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: 130px;
}

.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(0, 217, 255);

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



.menu{
width: 1400px;
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: rgb(31, 30, 30);

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

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

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

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

  border: 1px solid rgb(118, 118, 118);
  border-radius: 8px;
  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(255, 0, 0);

}


.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:150px;
  

}

.image3{
  width:300px;
  

}

.image4{
  width:15px;  
}


.slider1{
writing-mode: vertical-lr;
direction: rtl;
appearance: none;
outline:none;
  border: 1px solid #ffffff;
  border-radius: 20px;
  box-shadow: inset 0 0 5px rgb(56, 5, 50);
 overflow:hidden;

  -webkit-transform: rotateX(180deg);
 -moz-transform: rotateX(180deg);
 -ms-transform: rotateX(180deg);
 -o-transform: rotateX(180deg);
 transform: rotateX(180deg);
 

}





.slider2{
width : 200px;

  appearance: none;
  outline:none;
  border: 1px solid #ffffff;
  border-radius: 20px;
  box-shadow: inset 0 0 5px rgba(0,0,0,1);
 overflow:hidden;

}


.slider4{
  width : 300px;
  
    appearance: none;
    outline:none;
    border: 1px solid #ffffff;
    border-radius: 20px;
    box-shadow: inset 0 0 5px rgba(0,0,0,1);
   overflow:hidden;
  
  }

.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;
}