body {
  font-family: arial, Helvetica, sans-serif;
  background-color: rgb(255, 255, 255);
  
}

hr {
border: 1px solid rgb(118, 118, 118);

}


.logo_class {
display: block;
width: 100px;
}

.image2_class {
display: block;
margin-left: auto;
margin-right: auto;


}


.menu_key{
text-align: center;
color:white;
text-decoration: none;
font-size: 13px;

}

.menu_key:hover {
color: rgb(219, 26, 26);

font-size: 17px;
cursor: pointer;
}



.menu{
width: 100%;
background-color: #232323;
text-align: center;
color: rgb(165, 164, 164);


}



.table1{
width: 1400px;
background-color: #232323;
color:white;
text-align: center;
margin-left: auto;
margin-right: auto;



}

.table2{

width:1200px;
background-color: #232323;
text-align: center;
margin-left: auto;
margin-right: auto;

}

.table3{

  width:1100px;
  background-color: #232323;
  text-align: center;
  margin-left: auto;
  margin-right: auto;

}

.table4{

  width:1200px;
  background-color: #232323;
  text-align: left;
  margin-left: auto;
  margin-right: auto;

}

.table5{

  width:1000px;
  background-color: #232323;
  text-align: center;
  margin-left: auto;
  margin-right: auto;

}


.column1_1{  
width:8%;
}

.column1_2{  
  width:77%;
  }

.column1_3{  
width:15%;
display:block;
}

.column2_1{  
width: 50px;
}


.column2_2{  
width: 85px;
background-color: rgb(44, 44, 44);
border-radius: 8px; 
}

.column2_3{  
  width: 900px;
  text-align: left;
background-color: rgb(44, 44, 44);
border-radius: 8px; 

}


.column2_4{

width:20%;
display:block;
text-align: center;

}

.column3_1{  
  width:10px;
  
}

.column3_2{  
  width:200px;
  
}

.column3_3{  
  width:20px;
  
}




.column4_1{  
  width:50px;
  display:inline-block;
  
}

.column4_2{  
  width:955px;
  display:inline-block;
  background-color: rgb(31, 30, 30);

  border: 1px solid rgb(118, 118, 118);
  border-radius: 8px;
  padding: 20px 20px;
  
  
}

.column4_3{  
  width:300px;
  display:inline-block;
  background-color: #232323;

  padding: 50px 10px;
  
  
}

.column4_4{  
  width:200px;
  display:inline-block;
  background-color: #232323;

  padding: 0px 20px;


  
  
}

.column4_6{  
  width:200px;
  display:inline-block;
background-color: #232323;
  color:white;


  
}

.column4_5{  
  width:300px;
  display:inline-block;
  background-color: #232323;

  padding: 16px 30px;
  
  
}



.page0{
display: block;
}

.page_menu{
display: none;
}

.page_key{
  display: none;
}

.page_keysetting{
  display: none;

}

.page_keymap{
  display: none;
}

.page_keycalibration{
display: none;

}

.page_firmware{
  display: none;
  
  }

.page_ledlighting{
  display: none;
  
  }

.page_notclb{
display: block;

}





.rowkey{
text-align: center;
}


.key {
  border: none;

}


.key2 {
border: none;
background-color: rgba(93, 66, 168);
color: white;
height: 50px;
width: 50px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 10px;
margin: 2px 0px;
transition-duration: 0.2s;
cursor: auto;
border-radius: 6px;
}


.key3 {
  border: none;
  background-color: rgba(93, 66, 168);
  color: white;
  height: 50px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 10px;
  margin: 2px 0px;
  transition-duration: 0.2s;
  cursor: auto;
  border-radius: 6px;
  }

  .key4 {
    border: none;
    background-color: rgba(187, 219, 28, 0.831);
    color: white;
    height: 50px;
    width: 50px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 10px;
    margin: 2px 0px;
    transition-duration: 0.2s;
    cursor: auto;
    border-radius: 6px;
    }

    .key5 {
      border: none;
      background-color: rgba(255, 217, 0, 0.831);
      color: white;
      height: 50px;
      width: 50px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 10px;
      margin: 2px 0px;
      transition-duration: 0.2s;
      cursor: auto;
      border-radius: 6px;
      }
     

.column_key_1{
background-color: rgb(0, 0, 0);

}

.column_key_2{
background-color: rgb(0, 0, 0);


}


.textkey{
font-size: 10px;
display:inline-block;
cursor: default;

}




.textkey1{
font-size: 7px;
display:inline-block;
cursor: default;

}

.textkey2{
font-size: 7px;
display:inline-block;
cursor: default;

}

.textkey3{
font-size: 7px;
display:inline-block;
cursor: default;

}

.textkey4{
font-size: 7px;
display:inline-block;

}
.textkey5{
font-size: 7px;
display:inline-block;

}

.click_usb_class{

border: none;
background-color: rgb(67, 65, 65); 
color: rgb(234, 234, 234);
height: 35px;
width: 200px;
text-align: center;
text-decoration: none;
font-size: 15px;
font-weight: bold;
margin: 2px 0px;
transition-duration: 0.2s;
cursor: pointer;
border-radius: 20px;


}

.center{
display: block;
text-align: center;

}

.keypad_area{
background-color: rgb(67, 65, 65); 

}

.buttondesc{

border: none;
color: rgb(255, 255, 255);
background-color: rgb(44, 44, 44);
padding: 8px 10px;
width: 70px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 8px;
margin: 2px 0px;
cursor: auto;


}

.buttonm {
border: none;
color: rgb(255, 255, 255);
background-color: rgb(44, 44, 44);
padding: 8px 10px;
width: 35px;  
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 8px;
margin: 2px 0px;
cursor: pointer;
}

.buttonm:hover{
background-color: rgb(243, 1, 1);

}


.buttonr0 {
border: none;
color: rgb(255, 255, 255);

height: 25px;
width: 90px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 10px;
margin: 2px 0px ;
transition-duration: 0.2s;
cursor: pointer;
border-radius: 6px;

background: linear-gradient(#8b8888,#353434);
  
  

}

.buttonr0:hover{

background: linear-gradient(#eb1313,#202020);

}

.buttonr1 {
border: none;
color: rgb(255, 255, 255);

height: 25px;
width: 90px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 10px;
margin: 2px 0px ;
transition-duration: 0.2s;
cursor: pointer;
border-radius: 6px;

background: linear-gradient(#8b8888,#353434);

}

.buttonr1:hover{

background: linear-gradient(#e75454,#202020);

}

.buttonr2 {
border: none;
color: rgb(255, 255, 255);
background-color: rgb(148, 155, 155);
height: 25px;
width: 90px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 10px;
margin: 2px 0px ;
transition-duration: 0.2s;
cursor: pointer;
border-radius: 6px;
}

.buttonr2:hover{
background-color: rgb(96, 92, 92);

}


.active1{
background-color: rgb(255, 0, 21);
color:white;
}

.active2{
color: rgb(0, 235, 255);

}


.active3{
background: linear-gradient(#eb1313,#202020);
color:white;
}



.textkeysel{

color:rgb(255, 136, 0);



}

.key_setting_disp{
display:none

}

.key_clb_disp{
display:none

}



.key_mapping_disp{
display:block

}


.image2{
  width:210px;
  

}

.image3{
  width:300px;
  

}

.image4{
  width:15px; 
  padding: 0px 10px;
}






.slider1 {
 writing-mode: vertical-lr;
direction: rtl;
appearance: none;
outline:none;
  width: 7px;
  height: 150px;    
  background: #0bdab7;       /* Track background */
  border-radius: 10px;       /* Rounded track */
  
  -webkit-transform: rotateX(180deg);
 -moz-transform: rotateX(180deg);
 -ms-transform: rotateX(180deg);
 -o-transform: rotateX(180deg);
 transform: rotateX(180deg);
  

}

/* Cyan Knob - Chrome/Safari */
.slider1::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;               /* Knob size */
  height: 20px;
  background: #00FFFF;       /* Pure cyan */
  border: 2px solid white;   /* White border */
  border-radius: 50%;        /* Circular knob */
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: transform 0.1s;
}




.slider2 {
  width: 200px;
  height: 7px;               /* Track height */
  -webkit-appearance: none;  /* Reset default styles */
  appearance: none;
  background: #00ffff;       /* Track background */
  border-radius: 10px;       /* Rounded track */
  outline: none;
  margin: 10px 0;            /* Spacing */
}


/* Style when slider is disabled */
.slider2:disabled {
  background: #ffffff;       /* White track when disabled */
  opacity: 0.7;             /* Optional: Slightly faded look */
}


/* Cyan Knob - Chrome/Safari */
.slider2::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;               /* Knob size */
  height: 20px;
  background: #00FFFF;       /* Pure cyan */
  border: 2px solid white;   /* White border */
  border-radius: 50%;        /* Circular knob */
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: transform 0.1s;
}

/* Cyan Knob - Firefox */
.slider2::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #00FFFF;       /* Pure cyan */
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  cursor: pointer;
}

/* Hover effect */
.slider2::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}
.slider2::-moz-range-thumb:hover {
  transform: scale(1.1);
}

.slider_val_class{
  color: rgb(231, 231, 231);
  font-size: 10px;
  text-align: center;

}


.vl {
  border-left: 1px solid rgb(255, 255, 255);
  height: 200px;
}


.switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 15px;

}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.toggle:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 1px;
  bottom: 1px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .toggle {
  background-color:rgb(255, 0, 0)
  
}


input:checked + .toggle:before {
  -webkit-transform: translateX(15px);
  -ms-transform: translateX(15px);
  transform: translateX(15px);
}

/* Rounded toggles */
.toggle.round {
  border-radius: 34px;
}

.toggle.round:before {
  border-radius: 50%;
}


.font1{

  color: rgb(255, 255, 255);
  font-size: 12px;
  text-align: left;


}

.font2{

  color: rgb(218, 218, 218);
  font-size: 8px;
  text-align: left;


}

.font3{

color: rgb(218, 218, 218);
font-size: 12px;
text-align: left;


}

.font5{

color: rgb(100, 100, 235);
font-size: 12px;
text-align: left;


}


.font6{

  color: rgb(255, 255, 255);
  font-size: 12px;
  text-align: left;
  
  
  }

  
.font7{

  color: rgb(201, 5, 136);
  font-size: 12px;
  text-align: left;
  
  
  }

.aligncenter{

text-align: center;

}

.layer_btn{

display: inline-block;

}


.size200{
  width: 100px;
}

.size150{
  width: 75px;
}

.size125{
  width: 65px;
}

.entersize{
  width: 115px;
}

.capsize{
  width: 90px;
}

.spacesize{
  width: 320px; 

}

.buttonpad{
  background-color: rgb(0, 0, 0);
  height: 50px;
	width: 28px;
  border: none;

}

.key_fake{

  display: none;


}

.popup {
  position: relative;
  display: inline-block;
  color: rgb(201, 5, 136);
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  font-size: 8px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

span1{

  position: relative;
  display: inline-block;
  width: 45px;
  height: 50px;
  padding: 4px 7px;
  margin: 0px 0px;
  background: linear-gradient(#282828,#202020);
  border-radius: 5px;
  box-shadow: inset -8px 0 8px rgba(0,0,0,0.25),
  inset 0px -8px 8px rgba(0,0,0,0.15),
   0 0 0 2px rgba(0,0,0,0.75),
  10px 20px 25px rgba(0,0,0,0.4);
  overflow: hidden;
}

span1:last-child{
  width: 100%;
}

span1::before{
  content: '';
  position: absolute;
  top: 3px;
  left: 4px;
  bottom: 7px;
  right: 6px;
  background: linear-gradient(90deg, #232323,
  #4a4a4a);
  box-shadow: -10px -10px 10px rgba(255,255,255,0.25),
  10px 5px 10px rgba(0,0,0,0.15);
  border-radius: 10px;
  border-left: 1px solid #0004;
  border-top: 1px solid #0009;
  border-bottom: 1px solid #0004;
}

span1.active1::before {
  background: linear-gradient(90deg, #b80101, #a53b3b);
}

span1 i{
  position: absolute;
  top: 10px;
  left: 8px;
  color: #fff;
  font-style: normal;
  text-transform: uppercase;
  font-size: 0.7em;
}

span1 j{
  position: relative;
  top: 20px;
  left: 0px;
  color: #fff;
  font-style: normal;
  text-transform: uppercase;
  font-size: 0.7em;
}




span1_25{

  position: relative;
  display: inline-block;
  width: 56px;
  height: 50px;
  padding: 4px 7px;
  margin: 0px 0px;
  background: linear-gradient(#282828,#202020);
  border-radius: 5px;
  box-shadow: inset -8px 0 8px rgba(0,0,0,0.25),
  inset 0px -8px 8px rgba(0,0,0,0.15),
   0 0 0 2px rgba(0,0,0,0.75),
  10px 20px 25px rgba(0,0,0,0.4);
  overflow: hidden;
}

span1_25:last-child{
  width: 100%;
}

span1_25::before{
  content: '';
  position: absolute;
  top: 3px;
  left: 4px;
  bottom: 7px;
  right: 6px;
  background: linear-gradient(90deg, #232323,
  #4a4a4a);
  box-shadow: -10px -10px 10px rgba(255,255,255,0.25),
  10px 5px 10px rgba(0,0,0,0.15);
  border-radius: 10px;
  border-left: 1px solid #0004;
  border-top: 1px solid #0009;
  border-bottom: 1px solid #0004;
}

span1_25.active1::before {
  background: linear-gradient(90deg, #b80101, #a53b3b);
}

span1_25 i{
  position: absolute;
  top: 10px;
  left: 8px;
  color: #fff;
  font-style: normal;
  text-transform: uppercase;
  font-size: 0.7em;
}

span1_25 j{
  position: relative;
  top: 20px;
  left: 0px;
  color: #fff;
  font-style: normal;
  text-transform: uppercase;
  font-size: 0.7em;
}



span1_5{

  position: relative;
  display: inline-block;
  width: 67px;
  height: 50px;
  padding: 4px 7px;
  margin: 0px 0px;
  background: linear-gradient(#282828,#202020);
  border-radius: 5px;
  box-shadow: inset -8px 0 8px rgba(0,0,0,0.25),
  inset 0px -8px 8px rgba(0,0,0,0.15),
   0 0 0 2px rgba(0,0,0,0.75),
  10px 20px 25px rgba(0,0,0,0.4);
  overflow: hidden;
}

span1_5:last-child{
  width: 100%;
}

span1_5::before{
  content: '';
  position: absolute;
  top: 3px;
  left: 4px;
  bottom: 7px;
  right: 6px;
  background: linear-gradient(90deg, #232323,
  #4a4a4a);
  box-shadow: -10px -10px 10px rgba(255,255,255,0.25),
  10px 5px 10px rgba(0,0,0,0.15);
  border-radius: 10px;
  border-left: 1px solid #0004;
  border-top: 1px solid #0009;
  border-bottom: 1px solid #0004;
}

span1_5.active1::before {
  background: linear-gradient(90deg, #b80101, #a53b3b);
}

span1_5 i{
  position: absolute;
  top: 10px;
  left: 8px;
  color: #fff;
  font-style: normal;
  text-transform: uppercase;
  font-size: 0.7em;
}

span1_5 j{
  position: relative;
  top: 20px;
  left: 0px;
  color: #fff;
  font-style: normal;
  text-transform: uppercase;
  font-size: 0.7em;
}

span1_75{

  position: relative;
  display: inline-block;
  width: 78px;
  height: 50px;
  padding: 4px 7px;
  margin: 0px 0px;
  background: linear-gradient(#282828,#202020);
  border-radius: 5px;
  box-shadow: inset -8px 0 8px rgba(0,0,0,0.25),
  inset 0px -8px 8px rgba(0,0,0,0.15),
   0 0 0 2px rgba(0,0,0,0.75),
  10px 20px 25px rgba(0,0,0,0.4);
  overflow: hidden;
}

span1_75:last-child{
  width: 100%;
}

span1_75::before{
  content: '';
  position: absolute;
  top: 3px;
  left: 4px;
  bottom: 7px;
  right: 6px;
  background: linear-gradient(90deg, #232323,
  #4a4a4a);
  box-shadow: -10px -10px 10px rgba(255,255,255,0.25),
  10px 5px 10px rgba(0,0,0,0.15);
  border-radius: 10px;
  border-left: 1px solid #0004;
  border-top: 1px solid #0009;
  border-bottom: 1px solid #0004;
}

span1_75.active1::before {
  background: linear-gradient(90deg, #b80101, #a53b3b);
}

span1_75 i{
  position: absolute;
  top: 10px;
  left: 8px;
  color: #fff;
  font-style: normal;
  text-transform: uppercase;
  font-size: 0.7em;
}

span1_75 j{
  position: relative;
  top: 20px;
  left: 0px;
  color: #fff;
  font-style: normal;
  text-transform: uppercase;
  font-size: 0.7em;
}


span2{

  position: relative;
  display: inline-block;
  width: 90px;
  height: 50px;
  padding: 4px 7px;
  margin: 0px 0px;
  background: linear-gradient(#282828,#202020);
  border-radius: 5px;
  box-shadow: inset -8px 0 8px rgba(0,0,0,0.25),
  inset 0px -8px 8px rgba(0,0,0,0.15),
   0 0 0 2px rgba(0,0,0,0.75),
  10px 20px 25px rgba(0,0,0,0.4);
  overflow: hidden;
}

span2:last-child{
  width: 100%;
}

span2::before{
  content: '';
  position: absolute;
  top: 3px;
  left: 4px;
  bottom: 7px;
  right: 6px;
  background: linear-gradient(90deg, #232323,
  #4a4a4a);
  box-shadow: -10px -10px 10px rgba(255,255,255,0.25),
  10px 5px 10px rgba(0,0,0,0.15);
  border-radius: 10px;
  border-left: 1px solid #0004;
  border-top: 1px solid #0009;
  border-bottom: 1px solid #0004;
}

span2.active1::before {
  background: linear-gradient(90deg, #b80101, #a53b3b);
}

span2 i{
  position: absolute;
  top: 10px;
  left: 8px;
  color: #fff;
  font-style: normal;
  text-transform: uppercase;
  font-size: 0.7em;
}

span2 j{
  position: relative;
  top: 20px;
  left: 0px;
  color: #fff;
  font-style: normal;
  text-transform: uppercase;
  font-size: 0.7em;
}


span2_25{

  position: relative;
  display: inline-block;
  width: 118px;
  height: 50px;
  padding: 4px 7px;
  margin: 0px 0px;
  background: linear-gradient(#282828,#202020);
  border-radius: 5px;
  box-shadow: inset -8px 0 8px rgba(0,0,0,0.25),
  inset 0px -8px 8px rgba(0,0,0,0.15),
   0 0 0 2px rgba(0,0,0,0.75),
  10px 20px 25px rgba(0,0,0,0.4);
  overflow: hidden;
}

span2_25:last-child{
  width: 100%;
}

span2_25::before{
  content: '';
  position: absolute;
  top: 3px;
  left: 4px;
  bottom: 7px;
  right: 6px;
  background: linear-gradient(90deg, #232323,
  #4a4a4a);
  box-shadow: -10px -10px 10px rgba(255,255,255,0.25),
  10px 5px 10px rgba(0,0,0,0.15);
  border-radius: 10px;
  border-left: 1px solid #0004;
  border-top: 1px solid #0009;
  border-bottom: 1px solid #0004;
}

span2_25.active1::before {
  background: linear-gradient(90deg, #b80101, #a53b3b);
}

span2_25 i{
  position: absolute;
  top: 10px;
  left: 8px;
  color: #fff;
  font-style: normal;
  text-transform: uppercase;
  font-size: 0.7em;
}

span2_25 j{
  position: relative;
  top: 20px;
  left: 0px;
  color: #fff;
  font-style: normal;
  text-transform: uppercase;
  font-size: 0.7em;
}

span2_75{

  position: relative;
  display: inline-block;
  width: 130px;
  height: 50px;
  padding: 4px 7px;
  margin: 0px 0px;
  background: linear-gradient(#282828,#202020);
  border-radius: 5px;
  box-shadow: inset -8px 0 8px rgba(0,0,0,0.25),
  inset 0px -8px 8px rgba(0,0,0,0.15),
   0 0 0 2px rgba(0,0,0,0.75),
  10px 20px 25px rgba(0,0,0,0.4);
  overflow: hidden;
}

span2_75:last-child{
  width: 100%;
}

span2_75::before{
  content: '';
  position: absolute;
  top: 3px;
  left: 4px;
  bottom: 7px;
  right: 6px;
  background: linear-gradient(90deg, #232323,
  #4a4a4a);
  box-shadow: -10px -10px 10px rgba(255,255,255,0.25),
  10px 5px 10px rgba(0,0,0,0.15);
  border-radius: 10px;
  border-left: 1px solid #0004;
  border-top: 1px solid #0009;
  border-bottom: 1px solid #0004;
}

span2_75.active1::before {
  background: linear-gradient(90deg, #b80101, #a53b3b);
}

span2_75 i{
  position: absolute;
  top: 10px;
  left: 8px;
  color: #fff;
  font-style: normal;
  text-transform: uppercase;
  font-size: 0.7em;
}

span2_75 j{
  position: relative;
  top: 20px;
  left: 0px;
  color: #fff;
  font-style: normal;
  text-transform: uppercase;
  font-size: 0.7em;
}


span6_25{

  position: relative;
  display: inline-block;
  width: 387px;
  height: 50px;
  padding: 4px 7px;
  margin: 0px 0px;
  background: linear-gradient(#282828,#202020);
  border-radius: 5px;
  box-shadow: inset -8px 0 8px rgba(0,0,0,0.25),
  inset 0px -8px 8px rgba(0,0,0,0.15),
   0 0 0 2px rgba(0,0,0,0.75),
  10px 20px 25px rgba(0,0,0,0.4);
  overflow: hidden;
}

span6_25:last-child{
  width: 100%;
}

span6_25::before{
  content: '';
  position: absolute;
  top: 3px;
  left: 4px;
  bottom: 7px;
  right: 6px;
  background: linear-gradient(90deg, #232323,
  #4a4a4a);
  box-shadow: -10px -10px 10px rgba(255,255,255,0.25),
  10px 5px 10px rgba(0,0,0,0.15);
  border-radius: 10px;
  border-left: 1px solid #0004;
  border-top: 1px solid #0009;
  border-bottom: 1px solid #0004;
}

span6_25.active1::before {
  background: linear-gradient(90deg, #b80101, #a53b3b);
}

span6_25 i{
  position: absolute;
  top: 10px;
  left: 184px;
  color: #fff;
  font-style: normal;
  text-transform: uppercase;
  font-size: 0.7em;
}

span6_25 j{
  position: relative;
  top: 20px;
  left: 0px;
  color: #fff;
  font-style: normal;
  text-transform: uppercase;
  font-size: 0.7em;
}



span_fake{

  position: relative;
  display: inline-block;
  width: 8px;
  height: 50px;
 padding: 4px 7px;
margin: 0px 0px;
  border-radius: 5px;
  overflow: hidden;
}

.wrap {
  min-height: 100vh;
  max-width: 720px;
  margin: 0px auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.wrap .half {
  width: 50%;
  padding: 32px 0;
}

.title {
  font-family: cursive;
  line-height: 24px;
  display: block;
  padding: 8px 0;
}

.readout {
  margin-top: 32px;
  line-height: 180%;
}

#values {
  font-family: cursive;
  line-height: 150%;
}

#hexInput {
  font-family: cursive;
  line-height: 150%;
  background-color: #949090;  
  border-radius: 8px; 
  border: 1px solid rgb(118, 118, 118);
  color:#000000;
  align-items: center;
  justify-content: center;

  width: 50%;


}



.link {
  margin-top: 16px;
}
.link a {
  color: MediumSlateBlue;
}



.IroColorPicker{

  align-items: center;
  display: inline-block;
   padding: 8px 0;


}


@media only screen and (min-width: 700px) {
  .half-readout{
    font-size: 1em;
  }
}



.vertical-line {
  height: 150px;   /* Adjust height as needed */
  width: 1px;      /* Line thickness */
  background-color: #949090;  /* Line color */
  margin: 0 10px;  /* Spacing around the line */
}



.underline-menu {
  display: flex;
  gap: 100px;
  justify-content: center;

 
 
  font-size: 15px;
}

.underline-menu a {
  position: relative;
  text-decoration: none;
  color: #ffffff;
  padding: 0.5rem 0;
  transition: color 0.3s ease;
}

/* Underscore Animation */
.underline-menu a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #00ffff;
  transition: width 0.3s ease;
}

.underline-menu a:hover {
  color: #00ffff;
}

.underline-menu a:hover::after {
  width: 100%;
}

/* Optional: Active Link Style */
.underline-menu a.active::after {
  width: 100%;
}


.led-effect-select {
  padding: 7px 15px;
  border: 2px solid #3a3a3a;
  border-radius: 8px;
  background: #1a1a1a;
  color: #00ffff;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 200px;
}

.led-effect-select:focus {
  outline: none;
  border-color: #00a8ff;
  box-shadow: 0 0 0 3px rgba(0, 168, 255, 0.2);
}

.status-message {
  margin-top: 10px;
  padding: 8px;
  border-radius: 4px;
  font-size: 14px;
}

.loading {
  color: #00a8ff;
}

.success {
  color: #4caf50;
}

.error {
  color: #f44336;
}