@import url('https://fonts.googleapis.com/css?family=Pacifico|VT323|Quicksand|Inconsolata|Roboto|Bebas Neue|New Amsterdam|Macondo|Orbitron|Satisfy|Pirata One|Rubik Mono One|Matemasie|Creepster');
/* @import url(https://fonts.googleapis.com/css?family=Times+New+Roman);
@import url(https://fonts.googleapis.com/css?family=Pacifico); */
body {
    /* zoom :30%; */
    /* max-width: max-content; */
    margin: auto;
    padding: 0%;
}
.float{
  position:fixed;
  width:60px;
  height:60px;
  bottom:2%;
  right:1%;
  /* padding: 1.5%; */
  /* margin: 1%; */
  background-color:yellowgreen;
  color:#FFF;
  border-radius:50px;
  text-align:center;
  box-shadow: 2px 2px 3px #999;
}

.bi-wallet2 {
  position: absolute;
  top: 35%;
  right: 35%;
}

#my-float{
    position:fixed;
    bottom:2%;
    right:6%;
    color:red;
    font-size: small;
}
.container1 {
    position: absolute;
    width: 80%;
    height: 100%;
    background-image: radial-gradient(white, skyblue);
    left: 20%;
    display: flex;
    justify-content: center;
}
.slider #size {
    position: absolute;
    bottom: 15%;
    left: 2%;
    width: 90%;
    z-index: 100;
    display: none;
}
.slider #rotate {
    position: absolute;
    bottom: 10%;
    left: 2%;
    width: 90%;
    z-index: 100;
    display: none;
}
.controls {
    display: inline-block;
}
  #home {
    position: absolute;
    text-decoration: none;
    color: white;
    /* right: 5%; */
    top: 3%;
  }
.ukuran {
    position: absolute;
    top: 10%;
}

.inputImg {
    display: none;
}
.font {
    position: absolute;
    right: 20%;
    top: 120px;
    display: none;
}
#size-chart {
  position: absolute;
  right: 20%;
  top: 120px;
  cursor: pointer;
  width: 10%;
  height: 30px;
  /* display: none; */
}
#frontback {
  position: absolute;
  right: 57%;
  top: 120px;
  cursor: pointer;
  width: 10%;
  height: 30px;
  background-color: blue;
  text-decoration: none;
  color: white;
  text-align: center;
  border-radius: 5%;
  /* display: none; */
}
#front {
  position: absolute;
  right: 45%;
  top: 120px;
  cursor: pointer;
  width: 10%;
  height: 30px;
  background-color: blue;
  text-decoration: none;
  color: white;
  text-align: center;
  border-radius: 5%;
  /* display: none; */
}
#back {
  position: absolute;
  right: 32%;
  top: 120px;
  cursor: pointer;
  width: 10%;
  height: 30px;
  background-color: blue;
  text-decoration: none;
  color: white;
  text-align: center;
  border-radius: 5%;
  /* display: none; */
}
.border {
  position: absolute;
  /* width: 250px;
  height: 20px;
  border: 1px solid black;
  padding: 1%; */
  right: 40%;
  top: 120px;
  display: none;
}
.color {
    position: absolute;
    right: 80%;
    top: 140px;
    /* display: none; */
}
.edit {
  position: absolute;
  top: 50%;
  left: 20%;
  cursor: pointer;
  color: antiquewhite;
  width: 33px;
}
.pencil {
  position: absolute;
  top: 50%;
  left: 20%;
  cursor: pointer;
  color: antiquewhite;
}
.pencil img {
  width: 33px;
}
.pencilactive {
  position: absolute;
  top: 50%;
  left: 20%;
  cursor: pointer;
  color: antiquewhite;
  display: none;
}
.pencilactive img {
  width: 33px;
}
/* #hide1 {
  position: absolute;
  top: 140px;
}
#hide2 {
  position: absolute;
  top: 140px;
  display: none;
}
#hide3 {
  position: absolute;
  top: 140px;
  display: none;
} */
.container2 {
    position: absolute;
    width: 20%;
    height: 100%;
    top: 0%;
    background-color: #3498DB;
    left: 0%;
    display: flex;
    justify-content: center;
}
.wraper {
    position: absolute;
    width: 50%;
    height: 500px;
    top: 50px;
    left: 70px;
     display: flex;
    justify-content: space-between;
    /* background-color: red; */
}
.input {
    position: absolute;
    /*left: 20%;*/
    top: 10%;
    width: 100px;
    height: 30px;
    /* left: 10%; */
    background-color: blue;
    border-radius: 10%;
    cursor: pointer;
}
.uploadtext{
    position: absolute;
    top: -30%;
    left: 5%;
    color: white;
}
.save {
    position: absolute;
    /*left: 20%;*/
    top: 93%;
    width: 100px;
    height: 30px;
    /* right: 10%; */
    background-color: blue;
    border-radius: 10%;
    cursor: pointer;
}
.savetext{
    position: absolute;
    top: -30%;
    left: 5%;
    color: white;
}
.addtext {
    position: absolute;
    top: 36%;
    left: 20%;
    cursor: pointer;
    color: antiquewhite;
}
.addtext img {
    width: 30px;
}


.dropbtn {
    background-color: #3498DB;
    color: white;
    width: 100px;
    height: 50px;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    margin: 5%;
  }
  .dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;
  }
  .dropdown {
    position: relative;
    display: inline-block;
    /* top: 1%; */
  }
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    cursor: pointer;
  }
  .dropdown-content a:hover {background-color: #ddd;}
  .show {display:block;}



  .dropbtn2 {
    background-color: #3498DB;
    color: white;
    width: 120px;
    height: 50px;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    margin: 5%;
  }
  .dropbtn2:hover, .dropbtn2:focus {
    background-color: #2980B9;
  }
  .dropdown2 {
    position: relative;
    display: inline-block;
    /* top: 1%; */
  }
  .dropdown-content2 {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  .dropdown-content2 p {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    cursor: pointer;
  }
  .dropdown-content2 p:hover {background-color: #ddd;}
  .show2 {display:block;}


  .dropbtn3 {
    /* background-color: #3498DB; */
    color: white;
    width: 120px;
    height: 50px;
    /* padding: 16px; */
    font-size: 16px;
    border: none;
    cursor: pointer;
    /* margin: 5%; */
  } 
  .dropdown3 {
    position: absolute;
    /* width: 30px;
    height: 30px; */
    top: 20%;
    /*left: 20%;*/
    cursor: pointer;
    color: antiquewhite;
    /* background-color: antiquewhite; */
    /* top: 1%; */
  }
  .dropdown3 img{
    width: 30px;
  }
  .dropdown-content3 {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    /* min-width: 160px; */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    /* width: 400%; */
    /* padding: 20%; */
  } 
  .dropdown-content3 img {
    color: black;
    padding: 12px;
    text-decoration: none;
    display: block;
  }
  .dropdown-content3 img:hover {background-color: #ddd;}
  .show3 {display:inline;}



  .dropbtn4 {
    /* background-color: #3498DB; */
    color: white;
    width: 120px;
    height: 50px;
    /* padding: 16px; */
    font-size: 16px;
    border: none;
    cursor: pointer;
    /* margin: 5%; */
  } 
  .dropdown4 {
    position: absolute;
    /* width: 30px;
    height: 30px; */
    top: 35%;
    /*left: 20%;*/
    cursor: pointer;
    color: antiquewhite;
    /* background-color: antiquewhite; */
    /* top: 1%; */
  }
  .dropdown4 img{
    width: 30px;
  }
  .dropdown-content4 {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    /* min-width: 160px; */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    /* width: 400%; */
    /* padding: 20%; */
  } 
  .dropdown-content4 img {
    color: black;
    padding: 12px;
    text-decoration: none;
    display: block;
  }
  .dropdown-content4 img:hover {background-color: #ddd;}
  .show4 {display:inline;}



  .dropbtn5 {
    /* background-color: #3498DB; */
    color: white;
    width: 120px;
    height: 50px;
    /* padding: 16px; */
    font-size: 16px;
    border: none;
    cursor: pointer;
    /* margin: 5%; */
  } 
  .dropdown5 {
    position: absolute;
    /* width: 30px;
    height: 30px; */
    top: 50%;
    /*left: 20%;*/
    cursor: pointer;
    color: antiquewhite;
    /* background-color: antiquewhite; */
    /* top: 1%; */
  }
  .dropdown5 img{
    width: 38px;
  }
  .dropdown-content5 {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    /* min-width: 160px; */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    /* width: 400%; */
    /* padding: 20%; */
  } 
  .dropdown-content5 img {
    color: black;
    padding: 12px;
    text-decoration: none;
    display: block;
  }
  .dropdown-content5 img:hover {background-color: #ddd;}
  .show5 {display:inline;}

  .dropbtn6 {
    /* background-color: #3498DB; */
    color: white;
    width: 120px;
    height: 50px;
    /* padding: 16px; */
    font-size: 16px;
    border: none;
    cursor: pointer;
    /* margin: 5%; */
  } 
  .dropdown6 {
    position: absolute;
    /* width: 30px;
    height: 30px; */
    top: 65%;
    /*left: 20%;*/
    cursor: pointer;
    color: antiquewhite;
    /* background-color: antiquewhite; */
    /* top: 1%; */
  }
  .dropdown6 img{
    width: 38px;
  }
  .dropdown-content6 {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    /* min-width: 160px; */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    /* width: 400%; */
    /* padding: 20%; */
  } 
  .dropdown-content6 img {
    color: black;
    padding: 5px;
    height: 50px;
    text-decoration: none;
    display: block;
  }
  .dropdown-content6 img:hover {background-color: #ddd;}
  .show6 {display:inline;}

  .dropbtn7 {
    /* background-color: #3498DB; */
    color: white;
    width: 120px;
    height: 50px;
    /* padding: 16px; */
    font-size: 16px;
    border: none;
    cursor: pointer;
    /* margin: 5%; */
  } 
  .dropdown7 {
    position: absolute;
    /* width: 30px;
    height: 30px; */
    top: 80%;
    /*left: 20%;*/
    cursor: pointer;
    color: antiquewhite;
    /* background-color: antiquewhite; */
    /* top: 1%; */
  }
  .dropdown7 img{
    width: 40px;
  }
  .dropdown-content7 {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    /* min-width: 160px; */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    /* width: 400%; */
    /* padding: 20%; */
  } 
  .dropdown-content7 img {
    color: black;
    padding: 12px;
    width: 20px;
    text-decoration: none;
    display: block;
  }
  .dropdown-content7 img:hover {background-color: #ddd;}
  .show7 {display:inline;}

  .dropdown8 {
    position: absolute;
    /* display: inline-block; */
    top: 16%;
    left: 20%;
  }
  .dropdown8 img{
    width: 50px;
  }
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content8 {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .dropdown-content8 p {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    cursor: pointer;
  }
  
  /* Change color of dropdown links on hover */
  .dropdown-content8 p:hover {background-color: #ddd;}
  
  /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
  .show8 {display:inline;}


  .desain {
    position: absolute;
    /* display: inline-block; */
    top: 21%;
    left: 20%;
    width: 40px;
  }
  .dropdown9 {
    position: absolute;
    /* display: inline-block; */
    top: 21%;
    left: 20%;
  }
  .dropdown9 img{
    width: 40px;
  }
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content9 {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .dropdown-content9 img {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    cursor: pointer;
  }
  
  /* Change color of dropdown links on hover */
  .dropdown-content9 img:hover {background-color: #ddd;}
  
  /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
  .show9 {display:inline;}

  #warnakaos {
    height: 350px;
    width: 400px;
    top:10%;
    left:15%;
    border-radius: 10px;
    border: 1px solid #ccc;
    position: absolute;
    background-color: white;
  }
  .text {
    font-size: 8px;
    color: black;
  }
  
  
  
  #putih {
    position: absolute;
    right: 88%;
    top: 0%;
    width: 40px;
    height: 40px;
    background-color: white;
    border-radius: 50%;
    margin: 5px;
    cursor: pointer;
    border: 1px solid #ccc;
  }
  #hitam {
    position: absolute;
    right: 88%;
    top: 20%;
    width: 40px;
    height: 40px;
    background-color:#333030;
    border-radius: 50%;
    margin: 5px;
    cursor: pointer;
    border: 1px solid #ccc;
  }
  #abumisty {
    position: absolute;
    right: 88%;
    top: 40%;
    height: 40px;
    width: 40px;
    background-color: #9b9b9b;
    border-radius: 50%;
    margin: 5px;
    cursor: pointer;
    border: 1px solid #ccc;
  }
  #abutua {
    position: absolute;
    right: 88%;
    top: 60%;
    height: 40px;
    width: 40px;
    background-color: #545454;
    border-radius: 50%;
    margin: 5px;
    cursor: pointer;
   border: 1px solid #ccc;
  }
  #color-wheel {
    position: absolute;
    right: 88%;
    top: 80%;
    height: 40px;
    width: 40px;
    /* background-color: #b9b9b9; */
    border-radius: 50%;
    margin: 5px;
    cursor: pointer;
   /* border: 1px solid #ccc; */
  }
  #color-wheel img {
    width: 40px;
  }
  #merah {
    position: absolute;
    right: 70%;
    top: 0%;
    height: 40px;
    width: 40px;
    background-color: #fd0005;
    border-radius: 50%;
    margin: 5px;
    cursor: pointer;
    border: 1px solid #ccc;
  }
  #maroon {
    position: absolute;
    right: 70%;
    top: 20%;
    height: 40px;
    width: 40px;
    background-color: #840106;
    border-radius: 50%;
    margin: 5px;
    cursor: pointer;
    border: 1px solid #ccc;
  }
  #teracota {
    position: absolute;
    right: 70%;
    top: 40%;
    height: 40px;
    width: 40px;
    background-color: #af3b14;
    border-radius: 50%;
    margin: 5px;
    cursor: pointer;
    border: 1px solid #ccc;
  }
  #pink {
    position: absolute;
    right: 70%;
    top: 60%;
    height: 40px;
    width: 40px;
    background-color: #fcd5e7;
    border-radius: 50%;
    margin: 5px;
    cursor: pointer;
    border: 1px solid #ccc;
  }
  #fanta {
    position: absolute;
    right: 70%;
    top: 80%;
    height: 40px;
    width: 40px;
    background-color: #cc1f71;
    border-radius: 50%;
    margin: 5px;
    cursor: pointer;
    border: 1px solid #ccc;
  }
  #navy {
    position: absolute;
    right: 50%;
    top: 0%;
    height: 40px;
    width: 40px;
    background-color: #21325e;
    border-radius: 50%;
    margin: 5px;
    cursor: pointer;
    border: 1px solid #ccc;
  }
  #biruturkis {
    position: absolute;
    right: 50%;
    top: 20%;
    height: 40px;
    width: 40px;
    background-color: #189ce6;
    border-radius: 50%;
    margin: 5px;
    cursor: pointer;
    border: 1px solid #ccc;
  }
  #birubenhur {
    position: absolute;
    right: 50%;
    top: 40%;
    height: 40px;
    width: 40px;
    background-color: #082988;
    border-radius: 50%;
    margin: 5px;
    cursor: pointer;
    border: 1px solid #ccc;
  }
  #birumuda {
    position: absolute;
    right: 50%;
    top: 60%;
    height: 40px;
    width: 40px;
    background-color: #6cc9f4;
    border-radius: 50%;
    margin: 5px;
    cursor: pointer;
    border: 1px solid #ccc;
  }
  #hijauarmy {
    position: absolute;
    right: 50%;
    top: 80%;
    height: 40px;
    width: 40px;
    background-color: #003a07;
    border-radius: 50%;
    margin: 5px;
    cursor: pointer;
    border: 1px solid #ccc;
  }
  #hijaubotol {
    position: absolute;
    right: 25%;
    top: 0%;
    height: 40px;
    width: 40px;
    background-color: #0e6b50;
    border-radius: 50%;
    margin: 5px;
    cursor: pointer;
    border: 1px solid #ccc;
  }
  #hijaustabilo {
    position: absolute;
    right: 25%;
    top: 20%;
    height: 40px;
    width: 40px;
    background-color: #9cf007;
    border-radius: 50%;
    margin: 5px;
    cursor: pointer;
    border: 1px solid #ccc;
  }
  #hijautosca {
    position: absolute;
    right: 25%;
    top: 40%;
    height: 40px;
    width: 40px;
    background-color: #157291;
    border-radius: 50%;
    margin: 5px;
    cursor: pointer;
    border: 1px solid #ccc;
  }
  #hijaufuji {
    position: absolute;
    right: 25%;
    top: 60%;
    height: 40px;
    width: 40px;
    background-color: #0b9c41;
    border-radius: 50%;
    margin: 5px;
    cursor: pointer;
    border: 1px solid #ccc;
  }
  #mustard {
    position: absolute;
    right: 25%;
    top: 80%;
    height: 40px;
    width: 40px;
    background-color: #f1ab17;
    border-radius: 50%;
    margin: 5px;
    cursor: pointer;
    border: 1px solid #ccc;
  }
  #kuningkenari {
    position: absolute;
    right: 3%;
    top: 0%;
    height: 40px;
    width: 40px;
    background-color: #fee026;
    border-radius: 50%;
    margin: 5px;
    cursor: pointer;
    border: 1px solid #ccc;
  }
  #oren {
    position: absolute;
    right: 3%;
    top: 20%;
    height: 40px;
    width: 40px;
    background-color: #f35b10;
    border-radius: 50%;
    margin: 5px;
    cursor: pointer;
    border: 1px solid #ccc;
  }
  #ungu {
    position: absolute;
    right: 3%;
    top: 40%;
    height: 40px;
    width: 40px;
    background-color: #5f3269;
    border-radius: 50%;
    margin: 5px;
    cursor: pointer;
    border: 1px solid #ccc;
  }
  #cream {
    position: absolute;
    right: 3%;
    top: 60%;
    height: 40px;
    width: 40px;
    background-color: #d2bf94;
    border-radius: 50%;
    margin: 5px;
    cursor: pointer;
    border: 1px solid #ccc;
  }
  #coklat {
    position: absolute;
    right: 3%;
    top: 80%;
    height: 40px;
    width: 40px;
    background-color: #472114;
    border-radius: 50%;
    margin: 5px;
    cursor: pointer;
    border: 1px solid #ccc;
  }
  
  
  #textputih {
    position: absolute;
    top: 15%;
    left: 4%;
  }
  #texthitam {
    position: absolute;
    top: 36%;
    left: 4%;
  }
  #textabumisty {
    position: absolute;
    top: 55%;
    left: 2%;
  }
  #textabutua {
    position: absolute;
    top: 75%;
    left:2%;
  }
  #customtext {
    position: absolute;
    top: 95%;
    left: 2%;
  }
  #textmerah {
    position: absolute;
    top: 15%;
    left: 21%;
  }
  #textmaroon {
    position: absolute;
    top: 35%;
    left: 21%;
  }
  #textteracota {
    position: absolute;
    top: 55%;
    left: 19%;
  }
  #textpink {
    position: absolute;
    top: 75%;
    left: 22%;
  }
  #textfanta {
    position: absolute;
    top: 95%;
    left: 22%;
  }
  #textnavy {
    position: absolute;
    top: 15%;
    left: 42%;
  }
  #textbiruturkis {
    position: absolute;
    top: 35%;
    left: 39%;
  }
  #textbirubenhur {
    position: absolute;
    top: 55%;
    left: 39%;
  }
  #textbirumuda {
    position: absolute;
    top: 75%;
    left: 39%;
  }
  #texthijauarmy {
    position: absolute;
    top: 95%;
    left: 39%;
  }
  #texthijaubotol {
    position: absolute;
    top: 15%;
    left: 63%;
  }
  #texthijaustabilo {
    position: absolute;
    top: 35%;
    left: 63%;
  }
  #texthijautosca {
    position: absolute;
    top: 55%;
    left: 63%;
  }
  #texthijaufuji {
    position: absolute;
    top: 75%;
    left: 65%;
  }
  #textmustard {
    position: absolute;
    top: 95%;
    left: 65%;
  }
  #textkuningkenari {
    position: absolute;
    top: 15%;
    left: 82%;
  }
  #textoren {
    position: absolute;
    top: 35%;
    left: 89%;
  }
  #textungu {
    position: absolute;
    top: 55%;
    left: 89%;
  }
  #textcream {
    position: absolute;
    top: 75%;
    left: 88%;
  }
  #textcoklat {
    position: absolute;
    top: 95%;
    left: 88%;
  }
  



@media screen and (max-width: 1200px) {
  .float{
    position:fixed;
    width:60px;
    height:60px;
    bottom:2%;
    right:1%;
    /* padding: 1.5%; */
    /* margin: 1%; */
    background-color:yellowgreen;
    color:#FFF;
    border-radius:50px;
    text-align:center;
    box-shadow: 2px 2px 3px #999;
  }
  
  .bi-wallet2 {
    position: absolute;
    top: 35%;
    right: 35%;
  }
  
  #my-float{
      position:fixed;
      bottom:2%;
      right:10%;
      color:red;
  }
      #home {
        position: absolute;
        text-decoration: none;
        color: white;
        /* right: 5%; */
        top: 3%;
      }
    .container1 {
        position: absolute;
        width: 80%;
        height: 100%;
        background-image: radial-gradient(white, skyblue);
        left: 20%;
         display: flex;
         justify-content: center;
    }
    .controls {
        display: inline-block;
    }
    .inputImg {
        display: none;
    }
    .border {
      position: absolute;
      /* width: 250px;
      height: 20px;
      border: 1px solid black;
      padding: 1%; */
      right: 30%;
      top: 120px;
      display: none;
    }
    .font {
        position: absolute;
        right: 5%;
        top: 210px;
    }
    .color {
        position: absolute;
        left: 2%;
        top: 200px;
    }
    .container2 {
        position: absolute;
        width: 20%;
        height: 100%;
        top: 0%;
        background-color: #3498DB;
        left: 0%;
        display: flex;
        justify-content: center;
    }
    .wraper {
        position: absolute;
        width: 100%;
        height: 500px;
        top: 50px;
        left: 0%;
        display: flex;
        justify-content: space-between;
        /* background-color: red; */
    }
    .input {
        position: absolute;
        /*left: 1%;*/
        top: 10%;
        width: 60%;
        height: 30px;
        /* left: 10%; */
        background-color: blue;
        border-radius: 5%;
        cursor: pointer;
    }
    .uploadtext{
        position: absolute;
        top: -30%;
        left: 5%;
        color: white;
    }
    .save {
        position: absolute;
        /*left: 1%;*/
        top: 93%;
        width: 60%;
        height: 30px;
        /* right: 10%; */
        background-color: blue;
        border-radius: 5%;
        cursor: pointer;
    }
    .savetext{
        position: absolute;
        top: -30%;
        left: 5%;
        color: white;
    }
    .addtext {
        position: absolute;
        top: 51%;
        /*left: 20%;*/
        cursor: pointer;
        color: antiquewhite;
    }
    .edit {
      position: absolute;
      top: 36%;
      left: 20%;
      cursor: pointer;
      color: antiquewhite;
      width: 33px;
    }
    .pencil {
      position: absolute;
      top: 36%;
      left: 20%;
      cursor: pointer;
      color: antiquewhite;
    }
    .pencil img {
      width: 33px;
    }
    .pencilactive {
      position: absolute;
      top: 36%;
      left: 20%;
      cursor: pointer;
      color: antiquewhite;
      display: none;
    }
    .pencilactive img {
      width: 33px;
    }
    .dropdown8 {
      position: absolute;
      /* display: inline-block; */
      top: 18%;
      left: 20%;
    }
    .dropdown8 img{
      width: 50px;
    }
}



@media screen and (max-width: 760px) {
  .float{
    position:fixed;
    width:50px;
    height:50px;
    bottom:2%;
    right:1%;
    /* padding: 1.5%; */
    /* margin: 1%; */
    background-color:yellowgreen;
    color:#FFF;
    border-radius:50px;
    text-align:center;
    box-shadow: 2px 2px 3px #999;
  }
  
  .bi-wallet2 {
    position: absolute;
    top: 35%;
    right: 35%;
  }
  
  #my-float{
      position:fixed;
      bottom:3%;
      right:16%;
      color:red;
      font-size: x-small;
  }
      #home {
        position: absolute;
        text-decoration: none;
        color: white;
        /* right: 5%; */
        top: 3%;
        font-size :80%;
      }
    .container1 {
        position: absolute;
        width: 85%;
        height: 100%;
        background-image: radial-gradient(white, skyblue);
        left:15%;
        display: flex;
        justify-content: center;
    }
    .slider #size {
        position: absolute;
        bottom: 15%;
        left: 2%;
        width: 90%;
        z-index: 100;
        display: block;
    }
    .slider #rotate {
        position: absolute;
        bottom: 10%;
        left: 2%;
        width: 90%;
        z-index: 100;
        display: block;
    }
    .controls {
        display: inline-block;
    }
    .inputImg {
        display: none;
    }
    /* .row {
        margin: 1%;
        display: flex;
        justify-content: space-between;
        background-color: red;
    } */
    .font {
        position: absolute;
        right: 2%;
        top: 70px;
    }
     #size-chart {
      position: absolute;
      right: 20%;
      top: 65px;
      cursor: pointer;
      width: 28%;
      height: 5%;
      /* display: none; */
    }
    #frontback {
      position: absolute;
      right: 70%;
      top: 120px;
      cursor: pointer;
      width: 25%;
      height: 35px;
      background-color: blue;
      text-decoration: none;
      color: white;
      text-align: center;
      border-radius: 5%;
      /* display: none; */
    }
    #front {
      position: absolute;
      right: 40%;
      top: 120px;
      cursor: pointer;
      width: 25%;
      height: 35px;
      background-color: blue;
      text-decoration: none;
      color: white;
      text-align: center;
      border-radius: 5%;
      /* display: none; */
    }
    #back {
      position: absolute;
      right: 5%;
      top: 120px;
      cursor: pointer;
      width: 25%;
      height: 35px;
      background-color: blue;
      text-decoration: none;
      color: white;
      text-align: center;
      border-radius: 5%;
      /* display: none; */
    }
    .color {
        position: absolute;
        left: 1%;
        top: 10px;
    }
    .border {
      position: absolute;
      /* width: 250px;
      height: 20px;
      border: 1px solid black;
      padding: 1%; */
      right: 10%;
      top: 100px;
      display: none;
    }
    .container2 {
        position: absolute;
        width: 15%;
        height: 100%;
        top: 0%;
        background-color: #3498DB;
        left: 0%;
        display: flex;
        justify-content: center;
    }
    .wraper {
        position: absolute;
        width: 100%;
        height: 500px;
        top: 50px;
        left: 0%;
        display: flex;
        justify-content: center;
        /* background-color: red; */
    }
    .input {
        position: absolute;
        /*left: 5%;*/
        top: 10%;
        width: 90%;
        height: 30px;
        /* left: 10%; */
        background-color: blue;
        border-radius: 5%;
        cursor: pointer;
    }
    .uploadtext{
        position: absolute;
        top: 10%;
        left: 5%;
        color: white;
        font-size: 0.5rem;
    }
    .save {
        position: absolute;
        /*left: 5%;*/
        top: 93%;
        width: 90%;
        height: 30px;
        /* right: 10%; */
        background-color: blue;
        border-radius: 5%;
        cursor: pointer;
    }
    .savetext{
        position: absolute;
        top: 10%;
        left: 5%;
        color: white;
        font-size: 0.5rem;
    }
    .addtext {
        position: absolute;
        top: 35%;
        left: 20%;
        cursor: pointer;
        background-color:#3498DB;
    }
    .edit {
      position: absolute;
      top: 50%;
      left: 20%;
      cursor: pointer;
      width: 33px;
      /* background-color:#3498DB; */
    }
    .pencil {
      position: absolute;
      top: 50%;
      left: 20%;
      cursor: pointer;
      /* background-color:#3498DB; */
    }
    .pencil img {
      width: 33px;
    }
    .pencilactive {
      position: absolute;
      top: 50%;
      left: 20%;
      cursor: pointer;
      display: none;
    }
    .pencilactive img {
      width: 33px;
    }
    .dropdown8 {
      position: absolute;
      /* display: inline-block; */
      top: 9%;
      left: 5%;
    }
    .dropdown8 img{
      width: 30px;
    }
    .dropdown9 {
      position: absolute;
      /* display: inline-block; */
      top: 20%;
      left: 20%;
      /* background-color:#3498DB; */
    }
    .dropdown9 img{
      width: 40px;
    }
    .dropdown-content9 {
      top: -100%;
    }
    #warnakaos {
      position: absolute;
      left: 2.5%;
      width: 250px;
      height: 250px;
    }
    .text {
        font-size: 7px;
        /* text-align: center; */
    }
    
    #warnakaos #putih {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      position: absolute;
      left: 0%;
      top: 1%;
    }
    #warnakaos #hitam {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      position: absolute;
      left: 0%;
      top: 20%;
    }
    #warnakaos #abumisty {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      position: absolute;
      left: 0%;
      top: 40%;
      /* display: none; */
    }
    #warnakaos #abutua {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      position: absolute;
      left: 0%;
      top: 60%;
      /* display: none; */
    }
    #warnakaos #color-wheel {
      position: absolute;
      left: 0%;
      top: 80%;
    }
    #color-wheel img {
      width: 30px;
    }
    #warnakaos #merah {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      position: absolute;
      left: 18%;
      top: 1%;
      /* display: none; */
    }
    #warnakaos #maroon {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      position: absolute;
      left: 18%;
      top: 20%;
    }
    #warnakaos #teracota {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      position: absolute;
      left: 18%;
      top: 40%;
      /* display: none; */
    }
    #warnakaos #pink {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      position: absolute;
      left: 18%;
      top: 60%;
      /* display: none; */
    }
    #warnakaos #fanta {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      position: absolute;
      left: 18%;
      top: 80%;
    }
    #warnakaos #navy {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      top: 1%;
      left: 38%;
    }
    #warnakaos #biruturkis {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      position: absolute;
      left: 38%;
      top:20%;
      /* display: none; */
    }
    #warnakaos #birubenhur {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      position: absolute;
      left: 38%;
      top: 40%;
      /* display: none; */
    }
    #warnakaos #birumuda {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      position: absolute;
      left: 38%;
      top: 60%;
    }
    #warnakaos #hijauarmy {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      position: absolute;
      left: 38%;
      top: 80%;
      /* display: none; */
    }
    #warnakaos #hijaubotol {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      top: 1%;
      right: 22%;
      /* display: none; */
    }
    #warnakaos #hijaustabilo {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      top: 20%;
      right: 22%;
      /* display: none; */
    }
    #warnakaos #hijautosca {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      top: 40%;
      right: 22%;
      /* display: none; */
    }
    #warnakaos #hijaufuji {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      top: 60%;
      right: 22%;
    }
    #warnakaos #mustard {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      top: 80%;
      right: 22%;
    }
    #warnakaos #kuningkenari {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      top: 1%;
      right: 1%;
      /* display: none; */
    }
    #warnakaos #oren {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      top: 20%;
      right: 1%;
      /* display: none; */
    }
    #warnakaos #ungu {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      top: 40%;
      right: 1%;
      /* display: none; */
    }
    #warnakaos #cream {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      top: 60%;
      right: 1%;
    }
    #warnakaos #coklat {
      width: calc(50px - 20px);
      height: calc(50px - 20px);
      border-radius: 50%;
      top: 80%;
      right: 1%;
      /* display: none; */
    }
}