html,
 body {
    font: 300 18px/18px Roboto, sans-serif;
    overflow: hidden;
   
 }



 #renderCanvas {
    width: 100%;
    height: 100%;
    touch-action: none;
 }

 #button_Back {

    color: white;

    padding-right: 12px;
    padding-left: 12px;
    padding-top: 12px;
    padding-bottom: 12px;

    border-radius: 7px 0px 0px 7px;
    text-align: center;
    background-color: rgb(255, 83, 103);
    border: 0ch;


 }




 #button_Back:hover {

    color: white;

    padding-right: 12px;
    padding-left: 12px;
    padding-top: 12px;
    padding-bottom: 12px;

    border-radius: 7px 0px 0px 7px;
    text-align: center;
    background-color: rgb(255, 114, 130);
    border: 0ch;


 }




 #button_Back:active {

    color: white;

    padding-right: 12px;
    padding-left: 12px;
    padding-top: 12px;
    padding-bottom: 12px;

    border-radius: 7px 0px 0px 7px;
    text-align: center;
    background-color: rgb(255, 144, 157);
    border: 0ch;


 }



 #button_Home {

    color: white;

    padding-right: 16px;
    padding-left: 16px;
    padding-top: 12px;
    padding-bottom: 12px;


    border-radius: 0px 7px 7px 0px;
    text-align: center;
    background-color: rgb(255, 83, 103);
    border: 0ch;

 }


 #button_Home:hover {

    color: white;

    padding-right: 16px;
    padding-left: 16px;
    padding-top: 12px;
    padding-bottom: 12px;


    border-radius: 0px 7px 7px 0px;
    text-align: center;
    background-color: rgb(255, 114, 130);
    border: 0ch;

 }



 #button_Home:active {

    color: white;

    padding-right: 16px;
    padding-left: 16px;
    padding-top: 12px;
    padding-bottom: 12px;


    border-radius: 0px 7px 7px 0px;
    text-align: center;
    background-color: rgb(255, 144, 157);
    border: 0ch;

 }



 .button_ModelAdi {

    padding: 12px;
    text-align: center;
    background-color: transparent;
    border: 0ch;

 }







 #button_Icons {

    color: rgb(121, 121, 121);


    padding: 12px;
    padding-left: 16px;
    padding-right: 16px;

    border-radius: 7px 0px 0px 7px;
    text-align: center;
    background-color: rgb(236, 236, 237);
    border: 0ch;

 }

 #button_Icons:hover {

    color: rgb(121, 121, 121);


    padding: 12px;
    padding-left: 16px;
    padding-right: 16px;

    border-radius: 7px 0px 0px 7px;
    text-align: center;
    background-color: rgb(212, 212, 212);
    border: 0ch;

 }

 #button_Icons:active {

    color: rgb(121, 121, 121);


    padding: 12px;
    padding-left: 16px;
    padding-right: 16px;

    border-radius: 7px 0px 0px 7px;
    text-align: center;
    background-color: rgb(184, 184, 184);
    border: 0ch;

 }



 /*-----------------------------------*/



 .button_Icons_right {

    color: rgb(121, 121, 121);


    padding: 12px;
    padding-left: 16px;
    padding-right: 16px;

    border-radius: 7px 0px 0px 7px;
    text-align: center;
    background-color: rgb(236, 236, 237);
    border: 0ch;

 }

 .button_Icons_right:hover {

    color: rgb(121, 121, 121);


    padding: 12px;
    padding-left: 16px;
    padding-right: 16px;

    border-radius: 7px 0px 0px 7px;
    text-align: center;
    background-color: rgb(212, 212, 212);
    border: 0ch;

 }

 .button_Icons_right:active {

    color: rgb(121, 121, 121);


    padding: 12px;
    padding-left: 16px;
    padding-right: 16px;

    border-radius: 7px 0px 0px 7px;
    text-align: center;
    background-color: rgb(184, 184, 184);
    border: 0ch;

 }

 /*---------------------------------*/



 .button_Icons_orta {

    color: rgb(121, 121, 121);


    padding: 12px;
    padding-left: 16px;
    padding-right: 16px;


    text-align: center;
    background-color: rgb(236, 236, 237);
    border: 0ch;

 }

 .button_Icons_orta:hover {

    color: rgb(121, 121, 121);


    padding: 12px;
    padding-left: 16px;
    padding-right: 16px;


    text-align: center;
    background-color: rgb(212, 212, 212);
    border: 0ch;

 }


 .button_Icons_orta:active {

    color: rgb(121, 121, 121);


    padding: 12px;
    padding-left: 16px;
    padding-right: 16px;


    text-align: center;
    background-color: rgb(184, 184, 184);
    border: 0ch;

 }



 .button_Icons_left {

    color: rgb(121, 121, 121);


    padding: 12px;
    padding-left: 16px;
    padding-right: 16px;

    border-radius: 0px 7px 7px 0px;
    text-align: center;
    background-color: rgb(236, 236, 237);
    border: 0ch;

 }


 .button_Icons_left:hover {

    color: rgb(121, 121, 121);


    padding: 12px;
    padding-left: 16px;
    padding-right: 16px;

    border-radius: 0px 7px 7px 0px;
    text-align: center;
    background-color: rgb(212, 212, 212);
    border: 0ch;

 }


 .button_Icons_left:active {

    color: rgb(121, 121, 121);


    padding: 12px;
    padding-left: 16px;
    padding-right: 16px;

    border-radius: 0px 7px 7px 0px;
    text-align: center;
    background-color: rgb(184, 184, 184);
    border: 0ch;

 }



 .renk {

    color: rgb(121, 121, 121);

    margin-left: 5px;

    padding: 12px;
    padding-left: 16px;
    padding-right: 16px;

    border-radius: 7px 7px 7px 7px;
    text-align: center;
    background-color: rgb(236, 236, 237);
    border: 0ch;

 }


 .color {
    width: 50px;
    height: 100%;
    display: inline-block;
    padding: 20px;
    margin: 2px;
    cursor: pointer;
    border: 1px solid rgb(216, 216, 216);
    /* Stroke rengi ve kalınlığı */
 }



 #colorPalette {
    margin: 10px;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2);

 }

 .colorpaleting {
    width: auto;
    height: auto;

    padding: 5px;

    border-radius: 5px;
    cursor: pointer;
    background-color: rgb(255, 255, 255);
 }







 /*model adı*/
 .modelAdi_dark {
    font-family: inter;
    color: rgb(121, 121, 121);
    font-size: 20px;
    padding-left: 10px;
 }


 .modelAdi_light {
    font-family: inter;
    color: rgb(235, 235, 235);
    font-size: 20px;
    padding-left: 10px;
 }



 /*Buton calss - my-button*/
 .buttonContainer {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
 }


 /* Normal durum */
 .my-button {
    background-color: #f1f1f1;
    color: #333;
    display: block;
    margin-bottom: 10px;
    margin-left: 20px;
    margin-top: 20px;
    font-size: 20px;
    padding: 15px;
    border: none;
    border-radius: 5px;
 }

 /* Farenin üzerine geldiği durum */
 .my-button:hover {
    background-color: #ddd;
 }

 /* Tıklanma durumu */
 .my-button:active {
    background-color: #bbb;
 }

 /* Odaklanma durumu (klavye ile erişildiğinde) */
 .my-button:focus {
    outline: none;
    box-shadow: 0 0 5px #888;
 }

 /* Devre dışı (disable) durumu */
 .my-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
 }











 /*Loading style*/



 #loading-bar {
    width: 200px;
    height: 20px;
    border: 1px solid #ccc;
    position: relative;
 }

 #progress-bar {
    width: 0%;
    height: 100%;
    background-color: #bc3958;
 }

 #progress-percent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
 }