/* Theme -----------------------------------------------------------------------------------------------------------------*/
body{font-size:1.25rem;font-weight:300; cursor:default; box-shadow:inset 0 0 5rem rgba(0, 0, 0, .5);}

/* Logo ------------------------------------------------------------------------------------------------------------------*/
@font-face{ font-family:'Rubik Microbe'; src:url(RubikMicrobe.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{ font-family:'Rubik Moonrocks'; src:url(RubikMoonrocks.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
.LogoImg {height:40px;width:40px;display:inline-block;margin-top:0px} .LogoImgText{height:40px;width:40px;display:inline-block;background:gray;background:rgba(0,0,0,0.2);border-radius:40px;padding-top:3px;font-size:22px}
.rubik-microbe-regular{font-family:"Rubik Microbe", serif; font-weight:400; font-style:normal;font-display:swap;} .rubik-moonrocks-regular{ font-family:"Rubik Moonrocks", serif; font-weight:400; font-style:normal;font-display:swap;}

/* Responsive Div --------------------------------------------------------------------------------------------------*/
.DivTableLeft   { border:1px solid #DDE5F0; padding:10px; text-align:center; cursor:default; display:inline-block; border-radius:8px 0px 0px 8px; margin-left:-5px; overflow:hidden; margin:1px 1px 1px 1px;} .DivTableLeft:hover   { box-shadow:inset 0 0 0 1px #DDE5F0; }
.DivTableCenter { border:1px solid #DDE5F0; padding:10px; text-align:center; cursor:default; display:inline-block; border-radius:0px 0px 0px 0px; margin-left:-5px; overflow:hidden; margin:1px 1px 1px 1px;} .DivTableCenter:hover { box-shadow:inset 0 0 0 1px #DDE5F0; }
.DivTableRight  { border:1px solid #DDE5F0; padding:10px; text-align:center; cursor:default; display:inline-block; border-radius:0px 8px 8px 0px; margin-left:-5px; overflow:hidden; margin:1px 1px 1px 1px;} .DivTableRight:hover  { box-shadow:inset 0 0 0 1px #DDE5F0; }

/* Animations ------------------------------------------------------------------------------------------------------*/
.AnimateText{ display:inline-block;background-image:linear-gradient(-225deg,#231557 0%,#44107a 29%,#ff1361 67%,#fff800 100%);background-size:auto auto;background-clip:border-box;background-size:200% auto;color:#fff;background-clip:text;text-fill-color:transparent;
 -webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:textclip 2s linear infinite; } 
@keyframes textclip{to{background-position:200% center;}}
@keyframes slideIn { to { transform: translateX(0); opacity: 1; } } @keyframes fadeIn { to { opacity: 1; } }
@-webkit-keyframes bounceright { from { -webkit-transform:translateX(0); } to { -webkit-transform:translateX(3px); }} @keyframes bounceright { from { transform:translateX(0); } to { transform:translateX(3px); }}
@keyframes spin { from {  transform: rotate(0deg); } to { transform: rotate(359deg); }}

/* Title -----------------------------------------------------------------------------------------------------------*/
.Title{width:100%;text-align:center;margin-bottom:40px;margin-top:10px}
.Title .T1{font-size:1.8em;font-weight:600;line-height:1.3;overflow:hidden} .Title .T1{transform:translateX(-40px);opacity:0;animation:slideIn 0.8s ease-out forwards;}
.Title .T2{display:block;color:#2563eb;transform:translateX(-40px);opacity:0;animation:slideIn 0.8s ease-out forwards;animation-delay:0.3s;text-transform:uppercase;letter-spacing:4px;font-size:30px}

/* Buttons ---------------------------------------------------------------------------------------------------------*/
.BTNStart{display:inline-block;padding:7px 24px 10px 24px;font-size:18px;font-weight:bold;color:#ffffff;background:linear-gradient(135deg, #6a11cb, #2575fc);border:none;border-radius:8px;text-decoration:none;box-shadow:0 6px 15px rgba(0,0,0,0.2);transition:all 0.3s ease;}
 .BTNStart:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(0,0,0,0.3);background:linear-gradient(155deg, #6a11cb, #2575fc);} .BTNStart:active{transform:translateY(0);box-shadow:0 6px 15px rgba(0,0,0,0.2);}
.BBTN{display:inline-block;margin-top:5px;padding:3px 10px 6px 10px;font-size:18px;font-weight:400;border:none;border-radius:8px;text-decoration:none;box-shadow:0 6px 15px rgba(0,0,0,0.4);transition:all 0.3s ease;}
 .BTNBlueSm{color:white;background:linear-gradient(135deg, #394D8F, #2575fc);} .BTNBlueSm:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(0,0,0,0.3);} .BTNBlueSm:active{transform:translateY(0);box-shadow:0 6px 15px rgba(0,0,0,0.2);}
  .BTNBlueSm img{height:20px;display:inline-block;margin-top:-4px;margin-right:5px}
 .BTNGreenSm{color:white;background:linear-gradient(135deg, #249754, #0B5C11, #249754, #0D6114, #249754);} .BTNGreenSm:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(0,0,0,0.3);} .BTNGreenSm:active{transform:translateY(0);box-shadow:0 6px 15px rgba(0,0,0,0.2);}
  .BTNGreenSm img{height:20px;display:inline-block;margin-top:-4px;margin-right:5px}
 .BTNRedSm{color:white;background:linear-gradient(135deg, #F34747, #7C0101, #F34747, #7C0101, #7C0101);} .BTNRedSm:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(0,0,0,0.3);} .BTNRedSm:active{transform:translateY(0);box-shadow:0 6px 15px rgba(0,0,0,0.2);}
  .BTNRedSm img{height:20px;display:inline-block;margin-top:-4px;margin-right:5px}
 .BTNLightSm{color:black;background:linear-gradient(135deg, #FFFFFF, #D0D0D0, #F5F5F5, #FFFFFF, #D0D0D0);} .BTNLightSm:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(0,0,0,0.3);} .BTNLightSm:active{transform:translateY(0);box-shadow:0 6px 15px rgba(0,0,0,0.2);}
  .BTNLightSm img{height:20px;display:inline-block;margin-top:-4px;margin-right:5px}
 .BTNWarningSm{color:white;background:linear-gradient(135deg, #FCDB03, #FFA703, #FCDB03, #FFA703, #FCDB03);} .BTNWarningSm:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(0,0,0,0.3);} .BTNWarningSm:active{transform:translateY(0);box-shadow:0 6px 15px rgba(0,0,0,0.2);}
  .BTNWarningSm img{height:20px;display:inline-block;margin-top:-4px;margin-right:5px}

/* Tabs -----------------------------------------------------------------------------------------------------------*/
.tab{ overflow: hidden; background-color: #F5FAFA;} .TabContent{display: none; padding: 6px 12px; } .TabContant .Active{display:block}
.tab button{background-color:inherit;float:left;border:none;outline:none;cursor:pointer;padding:14px 16px;transition:0.3s; font-size:17px;}.tab button:hover{background-color:#DEF0F0;} .tab button.active{background-color:#DEF0F0;}
.TabLinks{ height:50px;overflow:hidden;background-color:red;}