/* __V3D_TEMPLATE__ - template-based file; delete this line to prevent this file from being updated */


body {
    margin: 0px;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    background: #ffffff;
    
}

@font-face {
  font-family: 'Chillax';
  src: url('media/fonts/Chillax-Semibold.woff2') format('woff2'),
       url('media/fonts/Chillax-Semibold.woff') format('woff');
  font-weight: 600; /* Semibold */
  font-style: normal;
  font-display: swap;
}

.v3d-container {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    
}

#preloader-wrapper {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* removes tap blinking on ios devices */
* { -webkit-tap-highlight-color:rgba(0,0,0,0); }

.controls {
  background: #004f78;
  width: 100%;
  position: fixed;
  bottom: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;  /* evenly distribute main sections */
  align-items: center;
  z-index: 9999;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
  padding: 0 2%;
}

.logo-container img {
  width: 300px;
  height: auto;
  display: block;
  padding-right: 100px;
  content: url('media/SkyBean_logo.png');
}

.swatches-wrapper {
  position: relative;  /* allows absolute swatches inside to center properly */
  height: 50px;        /* adjust to match your control bar height */
  flex: 1;             /* allow it to stretch evenly if needed */
}

.help-share {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  color: #FFFFFF;
  text-align: center;
  line-height: 20px;
}
.control_buttons {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  color: #FFFFFF;
  text-align: center;
  line-height: 20px;
}

.swatches-container,.swatches-container2,.swatches-container3,.swatches-container4,.swatches-container5,.swatches-container6 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 20px;
  color: #FFFFFF;
  visibility: hidden;
}

 

.color-item,.color-item2,.color-item3,.color-item4,.color-item5,.color-item6 {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     cursor: pointer;
     border: 0.1vw solid #FFFFFF;
     position: relative;
}


.color-item[title]:hover:after,
.color-item2[title]:hover:after,
.color-item3[title]:hover:after,
.color-item4[title]:hover:after,
.color-item5[title]:hover:after,
.color-item6[title]:hover:after,
.help-share a[title]:hover:after,
button[title]:hover:after {

  content: attr(title);
  top: -80px; 
  cursor: pointer;
  padding: 4px 4px;
  border: 0.2vw solid #134a70;
  border-radius: 4px; 
  position: absolute;
  color:#134a70;
  font-family: 'Chillax', sans-serif;
  font-weight: 300; /* Semibold */
  font-size: 15px;
  
}

title {
  display: none;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  border: 0.1vw solid #FFFFFF;
  font-size: 23px;
  color: #333;
  background: none;
}

.btn:hover {
    border: 0.2vw solid #FFFFFF; 
}

.btn i {
    color: #FFFFFF;
}



#help_div {
  display: none;
  position: absolute;
  font-family: 'Chillax-Regular';
  border-radius: 10px;
  border: 0.2vw solid #134a70;
  background-color: #ffffff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  width: 42vw;
  max-width: 80%;
  max-height: 80%;
  text-align: center;
  padding: 20px;
}

#power_button_div, #sd_card_div, #sound_div, #USB_div, #UpDown_button_div {
  display: none;
  position: absolute;
  font-family: 'Chillax-Regular';
  border-radius: 10px;
  border: 0.2vw solid #134a70;
  background-color: #ffffff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  width: 20vw;
  max-width: 80%;
  max-height: 80%;
  text-align: center;
  padding: 20px;
}

   
  h1 {
    font-family: 'Chillax', sans-serif;
    font-weight: 600; /* Semibold */
    color:#004f78;
    font-size: 2.5vw;
 
  }
  
  h3 {
    color:#004f78;
    padding:0.3vw;
    font-family: 'Chillax', sans-serif;
    font-weight: 300; /* Semibold */
    font-size: 1.4vw;
  }

  
  p {
   color:#004f78;
   padding:0.3vw;
   font-family: 'Chillax', sans-serif;
   font-weight: 100;
   font-size: 1.3 vw;
  }

  li {
   color:#004f78;
   padding:0.3vw;
   font-family: 'Chillax', sans-serif;
   font-weight: 100;
   font-size: 1.3 vw;
  }
  
  
  hr.rounded {
    border-top: 20px solid #134a70;
    border-radius: 5px;
  }
  
  
  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box
  }
  
  #preloader-wrapper {
    position: fixed;
    width: 100vw;
    height:100vh;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
.help-close-button {
    display: block;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

 
/* Mobile (portrait) */
@media screen and (max-width: 767px) {

  .controls {
        background: #004f78;
        width: 100%;
        position: fixed;
        bottom: 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        z-index: 9999;
        border-top: 2px solid black;
        white-space: nowrap; /* Prevent wrapping */
    }

 .logo-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0; 
    margin-right: 2px;
  }

  .logo-container img {
    content: url('media/SkyBean_logo_small.png');
    width: 6vw; 
    height: auto;
    display: block;
    padding-right: 2px;
  }

   .control_buttons {
    display: flex;
    gap: 3px;  
    align-items: center;
    justify-content: flex-start;
    padding:8px 4px;
    color: #FFFFFF;
    text-align: center;
    line-height: 20px;
    flex-wrap: nowrap;  
    white-space: nowrap;
  }

  .help-share {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    padding: 8px 4px;
    color: #FFFFFF;
    text-align: center;
    line-height: 18px;
    white-space: nowrap;
  }

   
  .color-item,.color-item2,.color-item3,.color-item4,.color-item5,.color-item6,.color-item:hover,.color-item2:hover,.color-item3:hover,.color-item4:hover,.color-item5:hover,.color-item6:hover,.btn, .btn:hover  {
    width: 20px;
    height: 20px;
    font-size: 15px;
  }

  
  .swatches-container,.swatches-container2,.swatches-container3,.swatches-container4,.swatches-container5,.swatches-container6 {
    display: flex;
    bottom: 0;
    padding: 1px 2px;
    border-radius: 20px;
    visibility: hidden;
    color: #FFFFFF;
    font-size: 12px;
    gap: 3px;
  }

  
  #help_div {
    width: 90vw;
    max-width: 90%;
    max-height: 90%;
    left: 50%;
    top: 10%;
    transform: translate(-50%, 0%);
    text-align: center;
  }

  #power_button_div, #sd_card_div, #sound_div, #USB_div, #UpDown_button_div {
    width: 40vw;
    max-width: 90%;
    max-height: 90%;
    left: 50%;
    top: 10%;
    transform: translate(-50%, 0%);
    text-align: center;
  }

  /* Text Adjustments for Mobile */
  h1 {
    font-family: 'Chillax', sans-serif;
    font-size: 20px;
  }

  h3 {
    font-family: 'Chillax', sans-serif;
    font-size: 14px;
  }

#preloader-wrapper {
    width: 100vw;
    height: 100vh;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }

  #preloader-wrapper img {
    width: 70vw;   /* Scale the image to 70% of the viewport width */
    height: auto;
  }

  #preloader-wrapper p {
    font-family: 'Chillax', sans-serif;
    text-align: center;
    font-size: 16px;  /* Smaller text size for mobile */
  }
}