body{
    background-color: #1e1e1e;
    color: #ffffff;
    min-width: 600px;
}

.colorBg{
    background: #1e1e1e;
}

.divBg{
    background: #282828;
}

.c1{background: #3a3a3a;}
.c2{background: #777777;}
.c3{background: #6863ce;}
.c4{background: #ffffff;}
.c5{background: #7fc146;}
.c6{background: #ff554c;}
.c7{background: #ff6f00;}
.c8{background: #ff9500;}
.c9{background: #ffd300;}
.c10{background: #4cc053;}
.c11{background: #03a9f4;}

.demoDiv{width: 200px; height: 30px; position: relative; top: 10px; bottom: 10px; left: 20px;}

.shadow{box-shadow: 0 19px 35px rgba(0, 0, 0, 0.20), 0 15px 12px rgba(0, 0, 0, 0.22);}

.tC6::-webkit-slider-thumb{background: #ff554c;}
.tC7::-webkit-slider-thumb{background: #ff6f00;}
.tC8::-webkit-slider-thumb{background: #ff9500;}
.tC9::-webkit-slider-thumb{background: #ffd300;}
.tC10::-webkit-slider-thumb{background: #4cc053;}
.tC11::-webkit-slider-thumb{background: #03a9f4;}



.divdemo{
    height: 50px;
    width: 240px;
}
.buttonsize{
    height: 50px;
    width: 110px;
}
.roundbutton{
    height: 110px;
    width: 110px;
}
.button{
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    outline: none;
    color: #282828;
    background-color: #282828;
    border: 2px solid #282828;
    box-shadow: 0 5px 5px -5px #999 inset;
    height: 30px;
    width: 90px;
    margin-left: 10px;
    margin-top: 10px;
}
.rbutton{
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    outline: none;
    color: #282828;
    background-color: #282828;
    border: 2px solid #282828;
    border-radius: 50%;
    box-shadow: 0 5px 5px -5px #999 inset;
    height: 90px;
    width: 90px;
    margin-left: 10px;
    margin-top: 10px;
}
.btn1{
    border-color: #ff9500;
    color: #ff9500;
}
.btn1:hover{
    background-color: #ff9500;
    color: #282828;
}
.btn1:active{
    background-color: #ff9500;
    color: #282828;
    box-shadow: 0 5px 5px -4px #333 inset;
}

.btn2{
    border-color: #03a9f4;
    color: #03a9f4;
}
.btn2:hover{
    background-color: #03a9f4;
    color: #282828;
}
.btn2:active{
    background-color: #03a9f4;
    color: #282828;
    box-shadow: 0 5px 5px -4px #333 inset;
}

.btn3{
    border-color: #6863ce;
    color: #6863ce;
}
.btn3:hover{
    background-color: #6863ce;
    color: #282828;
}
.btn3:active{
    background-color: #6863ce;
    color: #282828;
    box-shadow: 0 5px 5px 0px #333 inset;
}
.menubutton{
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    outline: none;
    border-color: #6863ce;
    background-color: #282828;
    border: 2px solid #6863ce;
    box-shadow: 0 5px 5px -5px #999 inset;
    height: 30px;
    width: 200px;
    margin-left: 10px;
    margin-top: 10px;
}

.btnm{
    border-color: #6863ce;
    color: #6863ce;
}
.btnm:hover{
    background-color: #6863ce;
    color: #282828;
}
.btnm:active{
    background-color: #6863ce;
    color: #282828;
    box-shadow: 0 5px 5px 0px #333 inset;
}
.menuactive{
    background-color: #6863ce;
    color: #282828;
    box-shadow: 0 5px 5px -4px #333 inset;
}
.rel{
    position: relative;
}
.abs{
    position: absolute;
}
.cord1{
    left: 260px;
    top: 0px;
}
.cord2{
    left: 520px;
    top: 0px;
}
.lin1{
    top: 70px;
}
.lin2{
    top: 140px;
}
.lin3{
    top: 210px;
}

.meter1::-webkit-meter-bar{
    background: none;
    background-color: #777777;
    box-shadow: 0 5px 5px -5px #333 inset;
}
.meter1::-webkit-meter-optimum-value{
    box-shadow: 0 5px 5px -5px #999 inset;
    background: #ff6f00;
}
.meter2::-webkit-meter-bar{
    background: none;
    background-color: #777777;
    box-shadow: 0 5px 5px -5px #333 inset;
}
.meter2::-webkit-meter-optimum-value{
    box-shadow: 0 5px 5px -5px #999 inset;
    background: #ff554c;
}
.meter3::-webkit-meter-bar{
    background: none;
    background-color: #777777;
    box-shadow: 0 5px 5px -5px #333 inset;
}
.meter3::-webkit-meter-optimum-value{
    box-shadow: 0 5px 5px -5px #999 inset;
    background: #ffd300;
}
.meterx::-webkit-meter-bar{
    background: none;
    background-color: #777777;
    box-shadow: 0 5px 5px -5px #333 inset;
}
.meterx::-webkit-meter-optimum-value{
    box-shadow: 0 5px 5px -5px #999 inset;
    background: #6863ce;
}
.metery::-webkit-meter-bar{
    background: none;
    background-color: #777777;
    box-shadow: 0 5px 5px -5px #333 inset;
}
.metery::-webkit-meter-optimum-value{
    box-shadow: 0 5px 5px -5px #999 inset;
    background: #4cc053;
}

.meterdemo{
    width: 200px; 
    height: 30px; 
    margin-top: 10px; 
    margin-left: 20px;
}

input[type="range"]{
    -webkit-appearance: none;
    position: relative;
    margin-top: 20px;
    margin-left: 20px;
    width: 200px;
    border-radius: 8px;
    height: 8px;
    background-image: -webkit-gradient(
        linear, 
        left top, 
        right top, 
        color-stop(0.15, #c7c7c7), 
        color-stop(0.15, #c7c7c7)
    );
}

input[type='range']::-webkit-slider-runnable-track{
    width: 200px;
    height: 10px;
    color: #ffffff;
}

input[type='range']::-webkit-slider-thumb{
    position: relative;
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 4px;
    cursor: pointer;
    box-shadow: 0px 0px 0px 5px #c7c7c7;
}

#joystick-container {
    border: solid 1px #777777;
    display: inline-block;
}
#joystick {
    width: 200px;
    height: 200px;
    margin: 1px;
    cursor: url(https://lh3.googleusercontent.com/11BVuRSF5KogArDi_7fkkXIVWFFsLFVEF17ZEd0VYu5CSZCOtbqAPNlTSWYxqqWyqVUjc5UP85gzjeVTuvyLMtpJha-QlcRkZ4hwzl8gjzy4rv-mblbciwDLrcjeKqEoNRNVmGdPG0nFYaEUx3iuTKsRF9vuyPh_QJVKrOkqNynXbfB9tyvoM4MNn3ofvhKXOBtJdmsa7T_8CsOmIUVfQeyNrUgq5LIqjdt_IoWvJWiLfc4LrXRWP0-FPjUAqi3O7tlRlkDl_8AchIwjgn6vzL8EEKMc6rOQaV7HLqezR4Civ2GDtDPs52mSne7y6szc1xOIf6Ogw7sSmcFEe9VrS_gpwLVMaCOmN5dE2OwM0v0T7p_7NK1rocfIMO_6uTbXx-yeixq1qgsMq2nRcbF-ezOm6EaksCDJj6LNDLg-5wRsPAdkSyj_Fklj2coh3bmn_YGad4jU5_QzVSf1ABnGg0pytidyYq_l83FcnGvN7CWpwzzdhwBiZErFQJg5mvVDlEjxErjVSVH02Ss_WqwG9aOamPiVJ2EPPEQn-Ki9hbbI_EH-U_U_PqmM-9TTWeZgmmH3bGoMAU7XtMLUPspvbyfKOtbMk5Dbd2U7mXgDA6xjneFhUAj6aqfD_idfR4-DIGWqQo8MDPNJUkMljCXFBvvIsM4LYL1toqTbg0uWnq7Ov8dNM1YkUBaH-Pip=s100-no?authuser=0) 50 50, crosshair;
}

.text{
    width: 200px;
    height: 30px;
    font-size: 20px;
    margin-top: 10px;
    margin-left: 20px;
    background-color: #3a3a3a;
    border: none;
    color: #ffffff;
}
.text:hover{
    background-color: #464646;
}

.termintext{
    width: 200px;
    height: 30px;
    font-size: 16px;
    margin-top: 0px;
    margin-left: 0px;
    background-color: #3a3a3a;
    border: none;
    color: #ffffff;
}
.termintext:hover{
    background-color: #464646;
}


.errbtn{
    margin-left: 15px;
    color: #ff554c;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}
.errbtn:hover{
    color:white;
}

.ora{
    background-color: #282828;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 120px;
    height: 30px;
    cursor: none;
    border: 1px solid transparent;
    color: #6863ce;
    text-align: center;
    font-size: 150%;
    font-weight: bold;
    cursor: context-menu;
    background: linear-gradient(
        to right, #ff554c, #ff9500,
                  #4cc053, #03a9f4);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
 
}

.border-gradient{
    border: 1px solid;
    border-image-slice: 1;
    border-width: 1px;
    border-image-source: linear-gradient(
                to right, #ff554c, #ff9500,
                          #4cc053, #03a9f4);
}

.border-gradient-purrple{
    border: 1px solid;
    border-image-slice: 1;
    border-width: 1px;
    border-image-source: linear-gradient(
                to right, #d400ff, #a200ff,
                          #1100ff, #00aeff);
}


.btn-new{
    color: #ffffff;
    box-shadow: 0 19px 35px rgba(0, 0, 0, 0.20),
                0 15px 12px rgba(0, 0, 0, 0.22);
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    outline: none;
    background-color: #282828;
    box-shadow: 0 5px 5px -5px #999 inset;
    height: 30px;
    width: 280px;
    margin-left: 10px;
    margin-top: 10px;
}

.btn-new:hover{
    background-image:linear-gradient(
        to right, #bb00e0, #8e00e0,
                  #0f00e0, #0099e0);
    box-shadow: 0 5px 5px 5px rgba(102, 102, 102, 0.05) inset;
    
}
.btn-new:active{
    background-color: #6863ce;
    color: rgb(219, 219, 219);
    box-shadow: 0 5px 5px 0px #333 inset;
}
         

.hidden{
    display: none;
}

.testcir{
    fill: hsl(0, 0%, 0%);
}

.animsubbtn{
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    outline: none;
    border-color: #4cc053;
    background-color: #282828;
    border: 2px solid #4cc053;
    box-shadow: 0 5px 5px -5px #999 inset;
    height: 30px;
    width: 200px;
    margin-left: 10px;
    margin-top: 10px;
}

.btnas{
    border-color: #4cc053;
    color: #4cc053;
}
.btnas:hover{
    background-color: #4cc053;
    color: #282828;
}
.btnas:active{
    background-color: #4cc053;
    color: #282828;
    box-shadow: 0 5px 5px 0px #333 inset;
}
.animsubactive{
    background-color: #4cc053;
    color: #282828;
    box-shadow: 0 5px 5px -4px #333 inset;
}


.arrow{
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #000;
    color: #777;
}


textarea::-webkit-scrollbar {
    width: 3px;
}


textarea::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}


.gamesubbtn{
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    outline: none;
    border-color: #03a9f4;
    background-color: #282828;
    border: 2px solid #03a9f4;
    box-shadow: 0 5px 5px -5px #999 inset;
    height: 30px;
    width: 200px;
    margin-left: 10px;
    margin-top: 10px;
}

.btngs{
    border-color: #03a9f4;
    color: #03a9f4;
}
.btngs:hover{
    background-color: #03a9f4;
    color: #282828;
}
.btngs:active{
    background-color: #03a9f4;
    color: #282828;
    box-shadow: 0 5px 5px 0px #333 inset;
}
.gamesubactive{
    background-color: #03a9f4;
    color: #282828;
    box-shadow: 0 5px 5px -4px #333 inset;
}


.chbcontainer{
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
}

.chbcontainer input{
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.chbmark{
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

.chbmark:disabled{
    background-color: #f00;
}

.chbcontainer:hover input ~ .chbmark {
    background-color: #ccc;
}
  
.chbcontainer input:checked ~ .chbmark {
    background-color: #ff9500;
}
 
.chbmark:after {
    content: "";
    position: absolute;
    display: none;
}
  
.chbcontainer input:checked ~ .chbmark:after {
    display: block;
}
  
.chbcontainer .chbmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    
}

.pagetitle{
    position: absolute;
    top: -10px;
    left: 45px;
  
    font-size: 40px;
    font-family: Arial, Helvetica, sans-serif;
    
    background-image: linear-gradient(
                to right, #ff554c, #ff9500,
                          #4cc053, #03a9f4);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}



.pagetitlebox{
    background: #282828;
    box-shadow: 0 19px 35px rgba(0, 0, 0, 0.20),
                0 15px 12px rgba(0, 0, 0, 0.22);
    width: 400px; 
    height: 80px; 
    position: absolute; 
    top: 10px; 
    bottom: 10px; 
    left: 10px;
}

.mainmenu{
    background: #282828;
    box-shadow: 0 19px 35px rgba(0, 0, 0, 0.20),
                0 15px 12px rgba(0, 0, 0, 0.22);
    width: 300px;
    height: 870px;
    position: absolute;
    top: 110px;
    left: 10px;
    color: #ffffff;
}


.dyn-tab{
    background: #282828;
    box-shadow: 0 19px 35px rgba(0, 0, 0, 0.20),
                0 15px 12px rgba(0, 0, 0, 0.22);
    width: 1510px; 
    height: 870px; 
    position: absolute; 
    top: 110px; 
    bottom: 10px; 
    left: 330px;
}

.info-tab{
    background: #282828;
    box-shadow: 0 19px 35px rgba(0, 0, 0, 0.20),
                0 15px 12px rgba(0, 0, 0, 0.22);
    width: 632px; 
    height: 40px; 
    position: absolute; 
    top: 10px; 
    bottom: 10px; 
    left: 615px;
}

.info-text{
    color: #999;
    top: -4px;
    left: 10px;
    position: absolute;
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;
}

.intro-text{
    color: #eee;
    top: -4px;
    left: 10px;
    position: absolute;
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;
}

.version-text{
    color: rgba(0, 204, 255, 0.815);
    top: 50px;
    left: 685px;
    position: absolute;
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;
}