@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

body {

}

/* CSS LOGIN */

#loginbg {
  background: rgba(61, 28, 115, 0.9);
  font-family: 'Inter' !important;
  
}

.bgwht {
  filter: brightness(0) invert(1);
}

.borderlogin {
  border: 1px solid #303030;
  box-shadow: 0px 32px 128px 0px rgba(15, 229, 139, 0.15);
  border-radius: 16px;
  margin: 60px 0px;
  display: flex;
  /*justify-content: center;
  align-items: center;
  margin: 0 auto;*/
}

@media (min-width: 480px) {
  .plyr--video .plyr__controls {
    display: none;
  }
}

.star {
    font-size: 30px;
    color: lightgray;
    cursor: pointer;
}

.star.selected {
    color: gold;
}

#myFormtkn {
  border: 1px solid #222;
}

.martbs {
  margin-top: 60px;
  margin-bottom: 60px;
}

.imglogstyl {
  border-radius: 16px 0px 0px 16px;
  width: 50%;
}

.formlogin {
  background: #ffffff;
  width: 50%;
  float: right;
  padding: 80px 50px;
  border-radius:  0px 16px 16px 0px;
}

.formverif {
  background: #ffffff;
  padding: 80px 50px;
  border-radius:  16px 16px 16px 16px;
}

.formsukses {
  background: #ffffff;
  padding: 80px 50px;
  text-align: center;
  border-radius:  16px 16px 16px 16px;
}

.msgtop {
  margin-top: 30px;
}

.btncls {
  padding: 15px;
  width: 30%;
  margin: 5px;
}

.styllab {
  font-size: 32px;
  color: rgba(60, 21, 124, 1);
  margin-bottom: 0px;
  margin-top: 10px
}


.stylp {
  font-size: 16px;
  color: rgba(113, 113, 113, 1);
  line-height: 1;
  margin-bottom: 45px;
}

.labnm {
  margin-bottom: 0px;
  padding-top: 15px;
  color: rgba(184, 186, 192, 1);

}

.labpw {
  margin-bottom: 0px;
  color: rgba(184, 186, 192, 1);
  padding-top: 30px;

}

.laball {
  margin-bottom: 0px;
  color: rgba(51, 51, 51, 1);
  padding-top: 15px;

}

.bgipttext {
  background: rgba(219, 222, 234, 0.5);
  height: 48px;
  border-radius: 8px;
  border: none !important;
  box-shadow: none !important;
}

.stylechck{
  margin-top: 30px !important;
}

.stylspn {
  color: rgba(48, 48, 48, 1);
  font-size: 14px;
  padding-left: 5px;
}

.stylfp {
  color: rgba(60, 21, 124, 1);
  margin-top: 30px;
  float: right;
}

.btn-logins {
  background: rgba(171, 41, 203, 1);
  color: rgba(255, 255, 255, 1) !important;
  width: 100%;
  height: 48px;
  font-size: 20px;
  font-weight: bold;
  margin-top: 30px;
}

.styltxtlk {
  color: rgba(60, 21, 124, 1);
  font-weight: bold;
}

.styltxtrg {
  padding-top: 30px;
}


/* /CSS LOGIN */

/* CSS DASHBOARD */

.abstyle {
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  background: #FFFFFF;
  width: 50px;
  height: 50px;
  color: #AB29CB !important;
  font-size: 24px !important;
  text-align: center !important;
  display: flex !important;
  justify-content: center;
  align-items: center;
  margin: 15px 0px 0px 0px !important;
  padding: 0px !important;
  line-height: 0px !important;
}

.abstyle:hover {
  background: #FFFFFF !important;
}

.abstyle:focus {
  background: #FFFFFF !important;
}

.abstyletkn {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border: 1px solid #FFFFFF;
  width: 250px;
  height: 50px;
  color: #AB29CB !important;
  font-size: 12px !important;
 /* text-align: center !important;
  display: flex !important;
  justify-content: center;
  align-items: center;*/
  margin: 15px 0px 0px 0px !important;
  padding: 0px !important;
  /*line-height: 0px !important;*/
}

.abstyletkn:hover {
  background: rgba(60, 21, 124, 1) !important;
}

.abstyletkn:focus {
  background: rgba(60, 21, 124, 1) !important;
}

#logindash {
  font-family: 'Inter' !important;
  
}

.pdrnav {
  margin-right: 100px !important;
}

.navbar-right {
  margin-right: 0px;
}

.imgdash {
  width: 100%;
}

.textslider {
  position: absolute;
  bottom: 100px;
}

.dashlabs {
  font-size: 64px;
  font-family: 'Montserrat' !important;
  color: rgba(255, 255, 255, 1);
  line-height: 68px;
}

.dashp {
  font-size: 16px;
  line-height: 20px;
  color: rgba(255, 255, 255, 1);
  width: 60%;
  padding-top: 15px;

}

.btn-dash {
  width: 250px;
  height: 48px;
  background: rgba(255, 255, 255, 1);
  border-radius: 32px;
  color: rgba(0, 1, 47, 1);
  font-weight: bold;
  margin-top: 30px;
  line-height: 28.8px;

}

.navbar-default {
  background: rgba(60, 21, 124, 1);
}

.navbar {
  height: 78px;
  border: none;
  border-radius: 0px;
  margin-bottom: 0px;

}

.navline {
  border: 10px solid;
  border-image-slice: 1;
  border-width: 2px;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-image-source : linear-gradient(270deg, #683DE5 0%, #2CC295 47%, #00FF95 100%);
}

.navlines {
  border: 10px solid;
  border-image-slice: 1;
  border-width: 3px;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-image-source : linear-gradient(270deg, #683DE5 0%, #2CC295 47%, #00FF95 100%);
  margin-bottom: 0px;
  margin-top: 0px;
}

.dashlogo {
  width: 250px;
  padding: 10px 15px;
  margin-left: 100px;
}

.dashlogolg {
  width: 250px;
  padding: 10px 15px;
  margin-left: 100px;
}

.dashlogotkn {
  width: 250px;
  padding: 25px 15px;
}

.menunav {
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  padding: 20px;
}

.menustyl {
  display: inline-block;
}

.navonmid {
  float: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}

.navbar-default .navbar-nav>li>a {
  color: #FFFFFF;
  padding: 35px 30px 0px 30px;
  font-size: 20px;
  line-height: 24px;
  text-align: center;
  margin-bottom: 45px;
}

.navbar-default .navbar-nav>li>a.navlg{
  color: #FFFFFF;
  padding: 25px 30px 0px 30px;
  font-size: 20px;
  line-height: 24px;
  text-align: center;
  margin-bottom: 25px;
}

.navbar-default .navbar-nav>li>a:hover {
  color: #FFFFFF;
}

.btnnav {
  margin-top: 20px;
  width: 100px;
  height: 35px;
  border: 2px solid #FFFFFF;
  border-radius: 8px;
  margin-right: 15px;
  background: #3C157C;
  color: #ffffff;

}

.btnnav:focus {
  color: #ffffff;

}

.btnnav:hover {
  color: #ffffff;

}

.btnnavs {
  margin-top: 20px;
  width: 100px;
  height: 35px;
  border: 2px solid #FFFFFF;
  border-radius: 8px;
  margin-right: 100px;
  background: #C8FFE8;
  color: #3C157C;
}

.btnnavs:focus {
  color: #3C157C;
}

.btnnavs:hover {
  color: #3C157C;
}

.bgdasone {
  background: #683DE5;
}

.dashscr {
  width: 390px !important;
  border-top-right-radius: 64px !important;
  border-bottom-right-radius: 64px !important;
  background: rgba(245, 245, 245, 1);
  border-left: none;
  height: 40px;
}

.dashscrs {
  border-top-left-radius: 64px !important;
  border-bottom-left-radius: 64px !important;
  background: rgba(245, 245, 245, 1);
  border-right: none;
  height: 40px;
}

.dashswd {
  width: 520px !important;
}

.scrglyp {
  font-size: 18px;
}

.dashbtnscr {
  color: rgba(247, 246, 250, 1);
  background: rgba(60, 21, 124, 1);
  border-radius: 64px;
  float: right;
  height: 40px;
  width: 80px;
}

.dashbtnscr:hover {
  color: rgba(247, 246, 250, 1);
}

.dashbtnscr:focus {
  color: rgba(247, 246, 250, 1);
  border: none;
}

.dashlbone {
  color: rgba(255, 255, 255, 1);
  font-size: 40px;
  font-weight: bold;
  line-height: 48px;
  font-family: 'Lato';
  padding-top: 45px;
}

.dashpone {
  font-size: 16px;
  line-height: 20px;
  color: rgba(255, 255, 255, 1);
  padding-top: 10px;
  padding-bottom: 10px;
}

.scrbtn {
  padding-top: 30px;
  padding-bottom: 30px;
  z-index: 1;
}

.btnscr {
  border: 1px solid rgba(255, 255, 255, 1);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25) inset;
  border-radius: 64px;
  background: rgba(104, 61, 229, 1);
  height: 40px;
  width: 120px;
  color: rgba(255, 255, 255, 1);
  font-size: 16px;
  margin-left: 3px;
  margin-right: 3px;
}

.btnscrs {
  border: 1px solid rgba(255, 255, 255, 1);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25) inset;
  border-radius: 64px;
  background: rgba(104, 61, 229, 1);
  height: 40px;
  width: 160px;
  color: rgba(255, 255, 255, 1);
  font-size: 16px;
  margin-left: 3px;
  margin-right: 3px;
}

.btnscrss {
  border: 1px solid rgba(255, 255, 255, 1);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25) inset;
  border-radius: 64px;
  background: rgba(104, 61, 229, 1);
  height: 40px;
  width: 140px;
  color: rgba(255, 255, 255, 1);
  font-size: 16px;
  margin-left: 3px;
  margin-right: 3px;
}

.btnscrsss {
  border: 1px solid rgba(255, 255, 255, 1);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25) inset;
  border-radius: 64px;
  background: rgba(104, 61, 229, 1);
  height: 40px;
  width: 100px;
  color: rgba(255, 255, 255, 1);
  font-size: 16px;
  margin-left: 3px;
  margin-right: 3px;
}

.btnscrssss {
  border: 1px solid rgba(255, 255, 255, 1);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25) inset;
  border-radius: 64px;
  background: rgba(104, 61, 229, 1);
  height: 40px;
  width: 100px;
  color: rgba(255, 255, 255, 1);
  font-size: 16px;
  margin-left: 3px;
  margin-right: 3px;
}

.btnscrsssss {
  border: 1px solid rgba(255, 255, 255, 1);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25) inset;
  border-radius: 64px;
  background: rgba(104, 61, 229, 1);
  height: 40px;
  width: 120px;
  color: rgba(255, 255, 255, 1);
  font-size: 16px;
  margin-left: 3px;
  margin-right: 3px;
}

.btnscrssssss {
  border: 1px solid rgba(255, 255, 255, 1);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25) inset;
  border-radius: 64px;
  background: rgba(104, 61, 229, 1);
  height: 40px;
  width: 130px;
  color: rgba(255, 255, 255, 1);
  font-size: 16px;
  margin-left: 3px;
  margin-right: 3px;
}

.btnscrsssssss {
  border: 1px solid rgba(255, 255, 255, 1);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25) inset;
  border-radius: 64px;
  background: rgba(104, 61, 229, 1);
  height: 40px;
  width: 130px;
  color: rgba(255, 255, 255, 1);
  font-size: 16px;
  margin-left: 3px;
  margin-right: 3px;
}

.btnscr:hover {
  color: rgba(255, 255, 255, 1);
}

.btnscrs:hover {
  color: rgba(255, 255, 255, 1);
}

.btnscrss:hover {
  color: rgba(255, 255, 255, 1);
}

.btnscrsss:hover {
  color: rgba(255, 255, 255, 1);
}

.btnscrssss:hover {
  color: rgba(255, 255, 255, 1);
}

.btnscrsssss:hover {
  color: rgba(255, 255, 255, 1);
}

.btnscrssssss:hover {
  color: rgba(255, 255, 255, 1);
}

.btnscrsssssss:hover {
  color: rgba(255, 255, 255, 1);
}

.labmoddas {
  text-align: left;
  font-size: 20px;
  font-weight: bold;
  font-family: 'Lato';
  margin-top: 5px;
  height: 60px;
}

.labmodp {
  font-size: 12px;
  text-align: left;
  height: 90px;
}

.thumbnail {
  border-radius: 16px;
  padding: 0px;
}

.thumbnail a img {
  border-top-right-radius: 16px;
  border-top-left-radius: 16px;
}

.thumbnail .caption {
    padding: 15px;
    color: #333;
}

.stylglyp {
    text-align: left;
    margin-bottom: 0px;
}

.txtglyp {
  font-size: 9px;
  font-weight: bold;
  font-family: 'Inter';
  margin-left: 5px;
  color: #AB29CB;
}

.stylimgco {
  background: #2A0E57;
  padding: 15px;
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 16px;
  height: 75px;
  padding-top: 20px;
}

.stylimgni {
  width: 165px;
  justify-content: center;
}

.stylratting {
  float: right;
  border: 1px solid #A7AFCD;
  border-radius: 16px;
  width: 48px;
  height: 20px;
  background: #ffffff;
  position: relative;
  bottom: 25px;
  box-shadow: -1px 1px 8px #A7AFCD;
}

.txtstar {
  font-size: 9px;
  font-weight: bold;
  position: relative;
  bottom: 2px;
}

.imgstar {
  position: relative;
  bottom: 2px;
}

.btn-browse {
  color: #ffffff;
  font-weight: bold;
  font-size: 20px;
  font-family: 'Lato';
  border-radius: 64px;
  background: #2CC295;
  box-shadow: 1px 10px 10px #AB29CB;
  margin-top: 30px;
  margin-bottom: 60px;
  padding: 15px 30px;
}

.btn-browse:hover {
  color: #ffffff;
}

.stylaut {
  color: #303030;
  font-weight: bold;
  font-size: 40px;
  font-family: 'lato';
  text-align: center;
  padding-top: 60px;
}

.styltxtaut {
  color: #303030;
  font-size: 16px;
  text-align: center;
  padding-bottom: 60px;
}

.stylautimg {
  border-radius: 16px;
}

.boxaut {
  padding: 15px;  
}

.descboxaut {
  height: 150px;
  overflow: hidden;
  line-height: 1.5;
  position: relative;
  font-size: 12px;
}

.descboxaut1 {
  height: 150px;
  overflow: hidden;
  line-height: 1.5;
  position: relative;
  font-size: 12px;
}

.descboxaut2 {
  height: 150px;
  overflow: hidden;
  line-height: 1.5;
  position: relative;
  font-size: 12px;
}

.descboxaut3 {
  height: 150px;
  overflow: hidden;
  line-height: 1.5;
  position: relative;
  font-size: 12px;
}

.descboxact {
  height: auto;
}

.stylrm {
  position: absolute;
  right: 15px;
  left: 15px;
  bottom: 15px;
  border: none;
  font-size: 20px;
  font-weight: bold;
  background-color: transparent;
  padding: 20px 0px;
  color: #603C9B;
  z-index: 1;
  cursor: poInter;
  text-align: center;
}

.stylrm:after {
  position: absolute;
  content: "";
  right: 15px;
  left: 15px;
  bottom: 15px;
  height: 80px;
  background: linear-gradient(180deg , #ffffffa1 , #fff , #fff);
  z-index: -1;
}

.stylrm1 {
  position: absolute;
  right: 15px;
  left: 15px;
  bottom: 15px;
  border: none;
  font-size: 20px;
  font-weight: bold;
  background-color: transparent;
  padding: 20px 0px;
  color: #603C9B;
  z-index: 1;
  cursor: poInter;
  text-align: center;
}

.stylrm1:after {
  position: absolute;
  content: "";
  right: 15px;
  left: 15px;
  bottom: 15px;
  height: 80px;
  background: linear-gradient(180deg , #ffffffa1 , #fff , #fff);
  z-index: -1;
}

.stylrm2 {
  position: absolute;
  right: 15px;
  left: 15px;
  bottom: 15px;
  border: none;
  font-size: 20px;
  font-weight: bold;
  background-color: transparent;
  padding: 20px 0px;
  color: #603C9B;
  z-index: 1;
  cursor: poInter;
  text-align: center;
}

.stylrm2:after {
  position: absolute;
  content: "";
  right: 15px;
  left: 15px;
  bottom: 15px;
  height: 80px;
  background: linear-gradient(180deg , #ffffffa1 , #fff , #fff);
  z-index: -1;
}

.stylrm3 {
  position: absolute;
  right: 15px;
  left: 15px;
  bottom: 15px;
  border: none;
  font-size: 20px;
  font-weight: bold;
  background-color: transparent;
  padding: 20px 0px;
  color: #603C9B;
  z-index: 1;
  cursor: poInter;
  text-align: center;
}

.stylrm3:after {
  position: absolute;
  content: "";
  right: 15px;
  left: 15px;
  bottom: 15px;
  height: 80px;
  background: linear-gradient(180deg , #ffffffa1 , #fff , #fff);
  z-index: -1;
}

.actbtn {
  position: unset;
  width: 100%;
}

.actbtn:after {
  background: transparent;
}

.padbtm {
  padding-bottom: 120px;
}

.bgtesti {
  background: url('../img/image-testimoni.png');
  background-repeat: no-repeat;
  background-size: cover; 
  padding-bottom: 180px;
}

.labtesti {
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  font-family: 'lato';
  text-align: center;
  padding-top: 60px;
  margin-bottom: 20px;
}

.pagtesti {
  color: #fff;
  font-size: 16px;
  text-align: center;
  margin-bottom: 30px;
}

.bodytesti {
  border: 1px solid #fff;
  border-radius: 16px;
  background: #fff;
  padding: 15px 15px 20px 15px;
}

.labeltst {
  color: #AB29CB;
  font-weight: bold;
  font-family: 'lato';
  margin-bottom: 0px;
}

.labelblw {
  color: #717171;
  font-size: 10px;
  font-family: 'lato';
}

.isitesti {
  font-size: 10px;
  color: #303030;
  margin-bottom: 30px;
  height: 70px;
}

.authtesti {
  font-size: 8px;
  font-weight: bold;
  color: #303030;
  float: right;
}

.carousel-control {
  font-size: 90px;
  width: 85%;
  background-image: none !important;
}

.carousel-indicators {
  bottom: -90px;
}

.labsubs {
  font-size: 40px;
  font-weight: bold;
  font-family: 'lato';
  color: #603C9B;
  text-align: center;
  padding-top: 45px;
}

.pagsubs {
  font-size: 16px;
  color: #603C9B;
  text-align: center;
  padding-bottom: 30px;
}

.iptsubs {
  border: 1px solid #00FF57;
  border-radius: 64px;
  padding: 10px;
  width: 500px;
  font-size: 20px;
  text-align: center;
  font-family: 'Inter';
  outline: none;
}


.btn-subs {
  background: #00FF57;
  border-radius: 64px;
  padding: 10px;
  margin-left: 10px;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  width: 200px;
}

.btn-subs:focus {
  color: #fff;
  border: none;
}

.btn-subs:hover {
  color: #fff;
}

.footbg {
  background: #1A1A1A;
}

.footlogo {
  width: 250px;
  padding-top: 60px;
  padding-bottom: 60px;
}

.txtfoot {
  font-size: 20px;
  font-family: 'Inter';
  color: #fff;
  padding-bottom: 60px;
}

.labfoot {
  color: #00FF57;
  font-weight: bold;
  font-size: 16px;
  font-family: 'Inter';
  padding-top: 60px;
  padding-bottom: 15px;
  text-align: center;
}

.txtfoots {
  font-size: 16px;
  font-family: 'Inter';
  color: #fff;
  margin-bottom: 15px;
  text-align: center;
  text-decoration: none;
}

.thumbnails > img,
.thumbnails a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}

.thumbnails {
  display: block;
  padding: 4px;
  margin-bottom: 20px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 16px;
  -webkit-transition: border .2s ease-in-out;
       -o-transition: border .2s ease-in-out;
          transition: border .2s ease-in-out;
}
.thumbnails > img,
.thumbnails a > img {
  margin-right: auto;
  margin-left: auto;
}
a.thumbnails:hover,
a.thumbnails:focus,
a.thumbnails.active {
  border-color: #337ab7;
}
.thumbnails .caption {
  padding: 9px;
  color: #333;
}

.thumbnail {
    position: relative;
    z-index: 1;
}

/* /CSS DASHBOARD */

/* Footer */

.mybords {
   border: 2px solid; 
   padding: 30px; 
   margin: 15px; 
   border-radius: 30px; 
   background: rgba(60, 21, 124, 1); 
   color: #fff;
}

.mylabsft {
  font-weight: bold;
  font-size: 16px;
}

.mylabsft {
  font-size: 16px;
}

/* /Footer */

/* Author */

.authlabs {
  font-size: 40px;
  font-weight: bold;
  font-family: 'Lato';
  color: #3C157C;
}

.authlabstxt {
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  color: #303030;
  padding-top: 10px;
  padding-bottom: 10px;
}

.ifrmwdh {
  width: 100%;
  /*height: 500px;*/
  position: absolute !important;
  top: -260px;
  padding-right: 30px;
}

.padtabs {
  padding-top: 250px;
}

.btn-tabs {
  font-weight: bold;
  font-size: 16px;
  font-family: 'Inter';
  color: #242424 !important;
  border-bottom: 2px solid #AB29CB !important;
}

.btn-tabs:hover {
  color: #242424 !important;
}

.btn-tabs:focus {
  color: #242424 !important;
  border-bottom: 2px solid #AB29CB !important;
}

.btn-tabsx {
  font-weight: normal;
  font-size: 16px;
  font-family: 'Inter';
  color: #ABABAB !important;
}

.btn-tabsx:hover {
  color: #ABABAB !important;
}

.imgpdm {
  width: 200px;
  padding-top: 30px;
  padding-bottom: 30px;
}

.txtpdm {
  color: #3D4564;
  font-weight: bold;
  font-size: 16px;
  font-family: 'Montserrat';
}

.txtpdms {
  font-size: 16px;
  font-family: 'Inter';
  color: #3D4564;
}

.txtauthprof {
  font-weight: bold;
  font-size: 16px;
  color: #603C9B;
  padding-bottom: 15px;
}

.btnauthpr {
  border: 1px solid rgba(255, 255, 255, 1);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25) inset;
  border-radius: 64px;
  background: rgba(104, 61, 229, 1);
  height: 40px;
  width: 30%;
  color: rgba(255, 255, 255, 1);
  font-size: 16px;
  margin-left: 3px;
  margin-right: 3px;
  margin-bottom: 5px;
}

.btnauthprs {
  border: 1px solid rgba(255, 255, 255, 1);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25) inset;
  border-radius: 64px;
  background: rgba(104, 61, 229, 1);
  height: 40px;
 width: 30%;
  color: rgba(255, 255, 255, 1);
  font-size: 16px;
  margin-left: 3px;
  margin-right: 3px;
  margin-bottom: 5px;
}

.btnauthprs1 {
  border: 1px solid rgba(255, 255, 255, 1);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25) inset;
  border-radius: 64px;
  background: rgba(104, 61, 229, 1);
  height: 40px;
  width: 30%;
  color: rgba(255, 255, 255, 1);
  font-size: 16px;
  margin-left: 3px;
  margin-right: 3px;
  margin-bottom: 5px;
}

.btnauthprs2 {
  border: 1px solid rgba(255, 255, 255, 1);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25) inset;
  border-radius: 64px;
  background: rgba(104, 61, 229, 1);
  height: 40px;
  width: 30%;
  color: rgba(255, 255, 255, 1);
  font-size: 16px;
  margin-left: 3px;
  margin-right: 3px;
  margin-bottom: 5px;
}

.btnauthprs3 {
  border: 1px solid rgba(255, 255, 255, 1);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25) inset;
  border-radius: 64px;
  background: rgba(104, 61, 229, 1);
  height: 40px;
  width: 30%;
  color: rgba(255, 255, 255, 1);
  font-size: 16px;
  margin-left: 3px;
  margin-right: 3px;
  margin-bottom: 5px;
}

.btnauthprs4 {
  border: 1px solid rgba(255, 255, 255, 1);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25) inset;
  border-radius: 64px;
  background: rgba(104, 61, 229, 1);
  height: 40px;
  width: 30%;
  color: rgba(255, 255, 255, 1);
  font-size: 16px;
  margin-left: 3px;
  margin-right: 3px;
  margin-bottom: 5px;
}

.txtinst {
  color: #603C9B;
  font-weight: bold;
  font-size: 16px;
  font-family: 'Inter';
  padding-bottom: 15px;
}

.txtnameinst {
  color: #3D4564;
  font-size: 20px;
  font-family: 'Inter';
}

.txtcon {
  color: #603C9B;
  font-size: 16px;
  font-weight: bold;
  font-family: 'Inter';
  padding-bottom: 15px;
}

.txtconic {
  color: #333333;
  font-size: 16px;
  font-family: 'Inter';
  margin-left: 15px;
}

.glyphh-web {
  margin-bottom: 15px;
}

.glyphh-message {
  margin-bottom: 15px;
}

.txtscmod {
  color: #603C9B;
  font-weight: bold;
  font-size: 16px;
  font-family: 'Inter';
  padding-top: 30px;
  padding-bottom: 15px;
}

.authsm {
  width: 100% !important;
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
  background: #A7AFCD;
  color: #fff;
  border-right: none;
  height: 52px;
}

.authsm::placeholder {
  color: #fff;
}

input:focus, input.form-control:focus {

    outline:none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

.authsms {
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
  background: #A7AFCD;
  color: #fff;
  border-left: none;
  height: 52px;
}

.searchauths {
  background: #A7AFCD;
  padding: 5px 10px;
  border: none;
}

.btnmodsactv {
  border: 1px solid rgba(255, 255, 255, 1);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25) inset;
  border-radius: 64px;
  background: #AB29CB;
  height: 44px;
  color: rgba(255, 255, 255, 1);
  font-size: 16px;
  margin-left: 1px;
  margin-right: 1px;
  margin-bottom: 5px;
  margin-top: 20px;
}

.btnmodsactv:focus {
  background: #AB29CB;
  color: #fff;
}

.btnmodsactv:hover {
  background: #AB29CB;
  color: #fff;
}

.btnmods {
  border: 1px solid rgba(255, 255, 255, 1);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25) inset;
  border-radius: 64px;
  background: #D3D7E6;
  height: 44px;
  color: rgba(255, 255, 255, 1);
  font-size: 16px;
  margin-left: 1px;
  margin-right: 1px;
  margin-bottom: 5px;
  margin-top: 20px;
  padding-right: 20px;
  padding-left: 20px;
}

.btnmods:focus {
  background: #AB29CB;
  color: #fff;
}

.btnmods:hover {
  background: #AB29CB;
  color: #fff;
}

.txtsr {
  font-weight: bold;
  font-size: 16px;
  color: #603C9B;
}

.img-glyplist {
  float: right;
  padding-right: 15px;
  padding-top: 5px;
}

.bdrscr {
  border: 1px solid #E8E8E8;
  margin-bottom: 15px;

}

.txtwdh {
  width: 75%;
  display: inline-block;
}

.stylratt {
  background: #F5F5F5;
  width: 48px;
  border-radius: 8px;
  float: right;
  text-align: center;
}

.txtstars {
  font-weight: bold;
  font-size: 14px;
  font-family: 'Inter';
}

.imgstars {
  text-align: center;
}

.txtscrrs {
  font-family: 'Lato';
  font-size: 20px;
  font-weight: bold;
  color: #333333;
  padding: 15px;
}

.imgfolds {
  padding-left: 15px;
  padding-right: 5px;
}

.stylhr {
  margin: 5px 15px;
}

.txtrps {
  font-size: 24px;
  font-weight: bold;
  font-family: 'Inter';
  color: #333333;
  padding-left: 15px;
}

.txtrpsspn {
  font-size: 12px;
  font-family: 'Inter';
  color: #FF0000;
  padding-left: 5px;
  text-decoration: line-through; 
  text-decoration-color: red;
}

.txtrpsa {
  float: right;
  color: #AB29CB;
  font-size: 14px;
  font-family: 'Inter';
  padding-right: 15px;
  padding-top: 10px;
  text-decoration: underline;
}

.txtrpsa:hover {
  color: #AB29CB;
}

.txtrpsa:focus {
  color: #AB29CB;
}

.imgprt {
  width: 100%;
  padding-top: 15px;
  /*padding-bottom: 15px;*/
}

.imgkd {
  width: 100%;
  padding-bottom: 15px;
}

.imgktg {
  width: 100%;
  padding-bottom: 15px;
}

.mrgaut30 {
  margin-top: 30px;
}

.mrgaut15 {
  margin-top: 15px;
}

.authbtm45 {
  margin-bottom: 15px;
}

.authhg {
  height: 80px;
}

.btnauthhtb {
  color: #AB29CB;
  font-size: 16px;
  font-weight: bold;
  border: 1px solid #AB29CB;
  border-radius: 64px;
  background: #ffffff;
  margin-right: 15px;
}

.prgprt {
  font-size: 16px;
  color: #4A4A4A;
  margin-bottom: 0px !important;
}

.prgkd {
  font-size: 16px;
  color: #4A4A4A;
  position: absolute;
  width: 90%;
}

.prgktg {
  font-size: 16px;
  font-weight: bold;
  color: #4A4A4A;
  margin-top: 30px;
}


/* /Author */

/* Modules */

.plyr__controls{
  background: #222 !important;
  height: 30px;
  padding-bottom: 30px !important;
}

.nopads {
  padding-right: 0px;
  padding-left: 0px;
}

.mdlswdh {
  width: 100%;
  height: 450px;
  padding-right: 30px;
}

.labsmods {
  font-size: 24px;
  font-weight: 600;
  font-family: 'Montserrat';
  padding-top: 60px;
  color: #3D4564;
}

.mdlstyl {
  margin-top: 30px;
}

.labmods {
  color: #AB29CB;
  font-size: 16px;
  font-weight: 500;
  padding-top: 15px;
  padding-bottom: 15px;
}

.wrmods {
  color: #3D4564;
  font-size: 16px;
  font-weight: 500;
}

.narmods {
  color: #3D4564;
  font-size: 16px;
  font-weight: 500;
}

.modsch {
  font-size: 16px;
  font-weight: 500;
  color: #3D4564;
  padding-top: 30px;
}

.modsdrs {
  font-size: 16px;
  font-weight: 500;
  color: #3D4564;
}

.modspg {
  font-size: 16px;
  font-weight: 500;
  color: #3D4564;
  padding-top: 15px;
}

.modspgx {
  font-size: 16px;
  font-weight: 500;
  color: #3D4564;
  padding-top: 15px;
}

.modsbtm {
  margin-bottom: 15px;
}

.sidemods {
  border: 1px solid #603C9B;
  background: #2C2634;
  margin-top: 105px;
  margin-bottom: 30px;
  border-radius: 8px;
  padding: 15px;
}

.lbsidemods {
  color: #ffffff;
  font-weight: bold;
  font-size: 24px;
  font-family: 'Lato';
  width: 75%;
  display: flex;
}

.imgsidemods {
  float: right;
  padding-top: 15px;
  right: 15px;
  position: absolute;
}

.txtmods {
  font-family: 'Lato';
  color: #ffffff;
}

.ulmods {
  color: #ffffff;
  font-family: 'Lato';
  padding-left: 30px;
}

.bghrmods {
  border-top: 2px solid #603C9B;
}

.folmods {
  font-family: 'Lato';
  color: #ffffff;
  padding-bottom: 15px;
}

.modsradio {
  border-radius: 8px;
  border: 2px solid #603C9B;
  padding: 15px;
  margin-bottom: 15px;
  height: 100px;
}

input[type='radio'].radmods {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    outline: none;
    border: 3px solid #603C9B;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 10px;
}

input[type='radio']:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

input[type="radio"]:checked:before {
    background: white;
        
}
    
input[type="radio"]:checked {
    border-color: #603C9B;
}

.bpmods {
  color: #00FF57;
  font-size: 16px;
  font-family: 'Lato';
  font-weight: bold;
}

.bpmodss {
  color: #FFC700;
  font-size: 16px;
  font-family: 'Lato';
  font-weight: bold;
}

.bpmodsx {
  color: #0094FF;
  font-size: 16px;
  font-family: 'Lato';
  font-weight: bold;
}

.labpcmods {
  font-family: 'Lato';
  font-weight: bold;
  font-size: 16px;
  color: #ffffff;
}

.smlmods {
  font-size: 10px;
  font-family: 'Lato';
  color: #00FFB2;
  padding-left: 5px;
  text-decoration: line-through; 
  text-decoration-color: #00FFB2;
  position: relative;
  bottom: 3px;
}

.ulpacmods {
  font-size: 10px;
  color: #ffffff;
  padding-left: 20px;
}

.nopads {
  padding-right: 0px;
  padding-left: 0px;
}

.btn-mods {
  color: #ffffff;
  font-family: 'Lato';
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  border-radius: 8px;
  border: 2px solid #603C9B;
  background: #2C2634;
  margin-top: 60px;
  margin-bottom: 15px;
  height: 60px;
  width: 78%;
}

.btns-mods {
  color: #ffffff;
  font-family: 'Lato';
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  border-radius: 8px;
  border: 2px solid #603C9B;
  background: #2C2634;
  margin-top: 60px;
  margin-bottom: 15px;
  height: 60px;
  width: 100%;
}

.btns-mods:hover {
  color: #ffffff;
}

.btns-mods:focus {
  color: #ffffff;
}

.btn-mods:hover {
  color: #ffffff;
}

.btn-mods:focus {
  color: #ffffff;
}

.btn-cartmods {
  height: 60px;
  width: 20%;
  margin-top: 45px;
  border-radius: 8px;
  border: 2px solid #603C9B;
  background: #2C2634;
}

.bsmods {
  float: right;
  position: absolute;
  right: 30px;
  padding-top: 15px;
}

.bgratting {
  background: #F6F6F6;
  height: 80px;
  margin-top: 30px;
}

.userrtngs {
  font-weight: bold;
  font-size: 12px;
  padding-top: 30px;
  margin-bottom: 0px;
}

.planstyl {
  font-weight: bold;
}

.txtratting {
  color: #603C9B;
  font-weight: bold;
  text-align: center;
  font-size: 16px;
  padding-top: 10px;
  margin-bottom: 0px;
}

.spnratting {
  font-size: 24px;
}

.center-content {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding-top: 20px;
}

.btn-allratting {
  color: #603C9B;
  border: 1px solid #603C9B;
  background: #ffffff;
  border-radius: 4px;
  margin-right: 5px;
  margin-left: 5px;
  width: 90px;
}

.btn-allratting:hover {
  color: #603C9B;
}

.btn-allratting5 {
  color: #A4A4A4;
  border: 1px solid #A4A4A4;
  background: #ffffff;
  border-radius: 4px;
  margin-right: 5px;
  margin-left: 5px;
  width: 90px;
}

.btn-allratting5:hover {
  color: #603C9B;
  border: 1px solid #603C9B;
}

.btn-allratting4 {
  color: #A4A4A4;
  border: 1px solid #A4A4A4;
  background: #ffffff;
  border-radius: 4px;
  margin-right: 5px;
  margin-left: 5px;
  width: 90px;
}

.btn-allratting4:hover {
  color: #603C9B;
  border: 1px solid #603C9B;
}

.btn-allratting3 {
  color: #A4A4A4;
  border: 1px solid #A4A4A4;
  background: #ffffff;
  border-radius: 4px;
  margin-right: 5px;
  margin-left: 5px;
  width: 90px;
}

.btn-allratting3:hover {
  color: #603C9B;
  border: 1px solid #603C9B;
}

.btn-allratting2 {
  color: #A4A4A4;
  border: 1px solid #A4A4A4;
  background: #ffffff;
  border-radius: 4px;
  margin-right: 5px;
  margin-left: 5px;
  width: 90px;
}

.btn-allratting2:hover {
  color: #603C9B;
  border: 1px solid #603C9B;
}

.btn-allratting1 {
  color: #A4A4A4;
  border: 1px solid #A4A4A4;
  background: #ffffff;
  border-radius: 4px;
  margin-right: 5px;
  margin-left: 5px;
  width: 90px;
}

.btn-allratting1:hover {
  color: #603C9B;
  border: 1px solid #603C9B;
}

.marpads {
  padding: 0px 5px;
}


/* /Modules */

/* Profile User */

.insprof {
  border-radius: 50%;
  box-shadow: 0px 0px 10px 1px #474747;
  width: 50px;
  height: 50px;
  color: #AB29CB;
  font-size: 24px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 60px 0px 30px 0px;
}

.nmprof {
  font-weight: bold;
  color: #303030;
  font-size: 24px;
  margin-bottom: 0px;
  line-height: normal;
}

.infprof {
  color: #9C9A9A;
  font-size: 16px;
}

.labsprof {
  margin-top: 60px;
  margin-bottom: 30px;
}

.sncmmbr {
  font-size: 12px;
  color: #474747;
  margin-bottom: 45px;
}

.imgprofs {
  margin-right: 5px;
}

.imgprofsx {
  margin-right: 2px;
}

.btn-tabprf {
  font-weight: bold;
  font-size: 16px;
  color: #242424 !important;
  border-bottom: 2px solid #AB29CB !important;
}

.btn-tabprf:hover {
  color: #242424 !important;
}

.btn-tabprf:focus {
  color: #242424 !important;
  border-bottom: 2px solid #AB29CB !important;
}

.btn-tabprfs {
  font-size: 16px;
  color: #A4A4A4 !important;
}

.btn-tabprfs:hover {
  color: #A4A4A4 !important;
}

.navpad {
  margin-top: 30px;
  border-bottom: 0px;
  margin-bottom: 15px;
}

.btn-mymdl {
  border-bottom-color : #603C9B !important;
  background: #603C9B !important;
  color: #ffffff !important;
  margin-right: 15px !important;
  border-radius: 4px !important;
}

.btn-mymdl:hover {
  background: #603C9B !important;
  color: #ffffff !important;
}

.btn-mymdl:focus {
  background: #603C9B !important;
  color: #ffffff !important;
}

.btn-mymdls {
  border-bottom-color : #EAEEF4 !important;
  background: #EAEEF4 !important;
  color: #899BD9 !important;
  margin-right: 15px !important;
  border-radius: 4px !important;
}

.btn-mymdls:focus {
  background: #EAEEF4 !important;
  color: #899BD9 !important;
}

.btn-mycart {
  border-bottom-color : #603C9B !important;
  background: #603C9B !important;
  color: #ffffff !important;
  margin-right: 15px !important;
  border-radius: 4px !important;
}

.btn-mycart:hover {
  background: #603C9B !important;
  color: #ffffff !important;
}

.btn-mycart:focus {
  background: #603C9B !important;
  color: #ffffff !important;
}

.btn-mycarts {
  border-bottom-color : #EAEEF4 !important;
  background: #EAEEF4 !important;
  color: #899BD9 !important;
  margin-right: 15px !important;
  border-radius: 4px !important;
}

.btn-mycarts:focus {
  background: #EAEEF4 !important;
  color: #899BD9 !important;
}

.mytables {
  border: 1px solid #D5D4D4;
  padding: 10px;
  margin-top: 5px;
  width: 60%;
  display: inline-block;
  font-size: 14px;
  font-family: 'Lato';
}

.mytabless {
  border: 1px solid #D5D4D4;
  padding: 10px;
  margin-top: 5px;
  width: 20%;
  display: inline-block;
  text-align: center;
  font-size: 14px;
  font-family: 'Lato';
}

.mytablesx {
  border: 1px solid #D5D4D4;
  padding: 10px;
  margin-top: 5px;
  width: 20%;
  display: inline-block;
  text-align: center;
  font-size: 14px;
  font-family: 'Lato';
}

.mytables2 {
  border: 1px solid #D5D4D4;
  padding: 10px;
  margin-top: 5px;
  width: 50%;
  display: inline-block;
  font-size: 14px;
  font-family: 'Lato';
}

.mytabless2 {
  border: 1px solid #D5D4D4;
  padding: 10px;
  margin-top: 5px;
  width: 20%;
  display: inline-block;
  text-align: center;
  font-size: 14px;
  font-family: 'Lato';
}

.mytablesx2 {
  border: 1px solid #D5D4D4;
  padding: 10px;
  margin-top: 5px;
  width: 16%;
  display: inline-block;
  text-align: center;
  font-size: 14px;
  font-family: 'Lato';
}

.mytablex2 {
  border: 1px solid #D5D4D4;
  padding: 10px;
  margin-top: 5px;
  width: 14%;
  display: inline-block;
  text-align: center;
  font-size: 14px;
  font-family: 'Lato';
}

.jdlmyprf {
  margin-left: 30px;
  font-family: 'Lato';
  color: #333333;
  font-weight: bold;
}

.tipsprof {
  border: 1px solid #CFD7E3;
  border-radius: 8px;
  padding: 45px;
  margin-top: 5px;
  margin-bottom: 30px;
}

.tipsmark {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;

}

.prgtips {
  text-align: center;
  color: #4A6C9E;
  padding-top: 45px;
  padding-bottom: 45px;
}

.btn-tips {
  border-radius: 8px;
  font-weight: bold;
  color: #4A6C9E;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.btn-tips:hover {
  color: #4A6C9E;
}

.btn-tips:focus {
  color: #4A6C9E;
}

.txtmytb2 {
  margin-left: 5px;
  color: #4A4A4A;
}

.prsmytb2 {
  color: #AB29CB;
  font-weight: 600;
}

.mrgcart {
  margin-top: 30px;
}

.mrgcarts {
  margin-top: 15px;
  bottom-top: 15px;
}

.mrgcartx {
  margin-top: 15px;
}

.cktxtcart {
  margin-left: 15px;
}

.mycarts {
  border: 1px solid #D5D4D4;
  padding: 10px;
  margin-top: 5px;
  width: 50%;
  display: inline-block;
  margin-left: 15px;
}

.mycartss {
  border: 1px solid #D5D4D4;
  padding: 10px;
  margin-top: 5px;
  width: 25%;
  display: inline-block;
  text-align: center;
}

.mycartsx {
  border: 1px solid #D5D4D4;
  padding: 10px;
  margin-top: 5px;
  width: 20%;
  display: inline-block;
  text-align: center;
}

.spcheck {
  margin-right: 15px;
}

.txtmych {
  margin-left: 5px;
  color: #4A4A4A;
}

.btn-checkout {
  color: #AB29CB;
  border: 1px solid #AB29CB;
  border-radius: 0px;
  text-align: center;
  font-family: 'Lato';
  font-weight: bold;
  background: #ffffff;
  float: right;
  margin-right: 15px;
  margin-top: 18.7%;
  width: 200px;
  height: 50px;
  padding: 15px;
  margin-bottom: 15px;
}

.btn-checkout:hover {
  color: #AB29CB;
  border: 1px solid #AB29CB;
  background: #ffffff;
}

.btn-checkout:focus {
  color: #AB29CB;
  border: 1px solid #AB29CB;
  background: #ffffff;
}

.txtcomp {
  font-family: 'Lato';
  font-weight: bold;
  color: #0094FF;
}

.txtcmplt {
  color: #4A4A4A;
}

.txtgp {
  color: #333333;
  font-family: 'Lato';
}

.txtgptgl {
  font-weight: bold;
  color: #AB29CB;
  font-family: 'Lato';
}

.txtbodyprof {
  font-size: 14px;
  font-family: 'Lato';
  color: #89A4CB;
}

.coltxtprof {
  color: #4A6C9E;
  font-weight: bold;
  font-size: 14px;
}

.bgbodyprof {
  background: #ffffff;
  padding: 15px 15px 30px 15px;
  margin-top: 30px;
  margin-bottom: 45px;
  color: #89A4CB;
  border-radius: 8px;
}

.imgbodyprof {
  width: 20px;
}

.txtright {
  text-align: right;
}

.btn-gens {
  width: 100%;
  height: 36px;
}

.spntknprof {
  font-size: 14px;
  margin-bottom: 5px;
  margin-top: 5px;
}

.tknmartp {
  margin-top: 15px;
}

.martops {
  margin-bottom: 30px;
}

/* /Profile User */

/* Token */

.headtoken {
  font-size: 24px;
  font-weight: 600;
  font-family: 'Montserrat';
  color: #3D4564;
  padding: 15px 0px 10px 0px;
}

.tokenvids {
  width: 100%;
  height: 400px;
}

.hdtoken {
  font-weight: bold;
  font-family: 'Lato';
  color: #ffffff;
  padding: 10px;
}

.border-ongoings {
  border: 1px solid #603C9B;
  border-radius: 8px;
  background: #ffffff;
}

.border-ongoing {
  position: absolute;
  top: 75px;
  right: 25px;
  background: #ffffff;
  border: 1px solid #603C9B;
  border-radius: 20px;
  padding: 5px 10px;
  z-index: 10;
  display: inline-block;
}

.hdtokens {
  color: #4A4A4A;
  font-weight: 600;
  font-size: 16px;
  padding-top: 30px;
}

.timestokens {
  font-family: 'Montserrat';
  font-size: 36px;
  font-weight: bold;
  color: #AB29CB;
  padding: 30px;
  text-align: center;
}

.timestoken {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #8E24AA;
  /*display: flex;*/
  align-items: center;
  /*gap: 5px;*/
}

.remaining-text {
  font-weight: bold;
  color: #8E24AA;
  font-size: 10px;
}

.txttoken {
  font-size: 16px;
  font-weight: 600;
  color: #603C9B;
  padding-top: 30px;
}

.modulbrdr {
  border-radius: 8px;
  border: 1px solid #603C9B;
  background: #603C9B;
  color: #ffffff;
  margin-top: 5px;
  margin-bottom: 5px;
}

.jdltkn {
  font-weight: bold;
  font-family: 'Lato';
  color: #ffffff;
  padding: 10px;
  margin-bottom: 0px;
}

.jdlspn {
  font-family: 'Lato';
  color: #ffffff;
  font-weight: normal;
}

.tknoth {
  font-weight: bold;
  font-size: 16px;
  color: #603C9B;
  padding-top: 45px;
}

.marbtm {
  margin-bottom: 60px;
}

.labacttkn {
  font-weight: bold;
  font-size: 24px;
  color: #3D4564;
  padding-top: 30px;
}

.actvtkn {
  font-size: 16px;
  font-weight: 600;
  color: #3D4564;
}

.gptoken {
  font-size: 18px;
  font-weight: bold;
  padding-top: 30px;
}

/* new */

.video-wrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
}

.grace-overlay {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 600px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 25px;
  text-align: center;
  z-index: 10;
  font-family: "Arial", sans-serif;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.grace-overlays {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 600px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 25px;
  text-align: center;
  z-index: 10;
  font-family: "Arial", sans-serif;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.background-overlay {
  position: absolute;
  top: 4%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 490px;
  background: rgba(1, 1, 1, 0.8);
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 25px;
  text-align: center;
  z-index: 10;
  font-family: "Arial", sans-serif;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.background-overlays {
  position: absolute;
  top: 4%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 490px;
  background: rgba(1, 1, 1, 0.8);
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 25px;
  text-align: center;
  z-index: 10;
  font-family: "Arial", sans-serif;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.grace-title {
  color: #A03DC4;
  font-weight: 600;
  margin-bottom: 10px;
}

.grace-countdown {
  font-size: 32px;
  font-weight: bold;
  color: #A03DC4;
  margin-bottom: 15px;
}

.grace-desc {
  font-size: 15px;
  color: #333;
  margin-bottom: 12px;
}

.grace-desc strong {
  font-weight: 700;
}

.grace-warning {
  font-weight: bold;
  color: #000;
  margin-bottom: 20px;
}

.grace-button {
  background: #fff;
  border: 2px solid #A03DC4;
  color: #A03DC4;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

.grace-buttons {
  background: #fff;
  border: 2px solid #A03DC4;
  color: #A03DC4;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

.grace-button:hover {
  background: #A03DC4;
  color: #fff;
}

.play-icon {
  color: #A03DC4;
  font-size: 14px;
}

.expired-modal {
  position: fixed;
  z-index: 9999;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease-in-out;
}
.expired-content {
  background: #fff;
  border-radius: 12px;
  text-align: center;
  padding: 25px 40px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  font-family: "Poppins", sans-serif;
  max-width: 400px;
}
.expired-content h3 {
  color: #e74c3c;
  margin-bottom: 10px;
  font-weight: 700;
}
.expired-content p {
  font-size: 14px;
  color: #555;
}
@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

/* Quiz */

.quiz-progress .step {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 3px;
    border-radius: 50%;
    background-color: #ccc;
  }
  .quiz-progress .step.active {
    background-color: #9C27B0;
  }

  .quiz-box {
    /*max-width: 480px;*/
    margin: 50px auto;
    padding: 30px 25px;
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0,0,0,0.05);
    border-top: 6px solid #9C27B0;
  }

  .quiz-title {
    text-align: center;
    font-weight: bold;
    color: #9C27B0;
    font-size: 20px;
    margin-bottom: 5px;
  }

  .quiz-subtitle {
    text-align: center;
    font-weight: 600;
    color: #333;
    font-size: 18px;
  }

  .quiz-progress {
    text-align: center;
    margin-top: 5px;
    font-size: 13px;
    color: #555;
    margin-bottom: 25px;
  }

  .quiz-question {
    text-align: center;
    font-size: 13px;
    color: #555;
    margin-bottom: 25px;
    line-height: 1.6;
  }

  .answer-option {
    display: block;
    width: 100%;
    padding: 12px;
    background: #eef4ff;
    border-radius: 10px;
    border: none;
    margin-bottom: 12px;
    text-align: left;
    transition: 0.3s;
    font-size: 14px;
  }

  .answer-option:hover {
    background: #dfeeff;
  }

  .answer-option.active {
    background-color: #4da6ff;
    color: white;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  }

  .quiz-footer {
    margin-top: 30px;
    text-align: center;
  }

  .btn-back {
    background: #eee;
    color: #aaa;
    border-radius: 10px;
    border: none;
    padding: 10px 20px;
    margin-right: 10px;
    min-width: 100px;
  }

  .btn-submit {
    background: #20c997;
    color: white;
    border-radius: 10px;
    padding: 10px 20px;
    border: none;
    min-width: 100px;
  }

  .btn-back:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  .modul-heading.active {
    background-color: #754FFE; /* warna biru */
    color: white;
  }

  .custom-btn {
    margin: 30px 0px;
    width: 300px;
    padding: 15px 0;
    border-radius: 50px;
    font-weight: bold;
    font-size: 18px;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.4);
    transition: all 0.3s ease;
  }

  .custom-btn:hover {
    box-shadow: 0 0 25px rgba(0, 123, 255, 0.8);
    background-color: #007bff;
    color: #fff;
  }

/* /Token */

/* Tambahan */

  .pdrnavch {
    display: none;
  }

  .mynavmobs {
    display: none;
  }

  .myhr {
      display: none;
  }

/* /Tambahan */

/* MOBILE */
@media (max-width: 1199.9px) {
  .bgratting {
    background: #F6F6F6;
    height: auto;
    margin-top: 30px;
    padding: 30px;
  }

  .labfoot {
    padding-top: 15px;
  }
}

@media (min-width: 1300px) and (max-width: 1450px) {
    .container {
        width: 1200px;
    }

    .dashlogolg {
      margin-left: 50px;
    }

    .dashlogotkn {
      margin-left: 5%;
    }

    .pdrnav {
      margin-right: 50px !important;
    }
}

@media (min-width: 1450px) {
    .container {
        width: 1300px;
    }
}

@media (max-width: 425px) {
    .bpmods {
      font-size: 12px;
    }

    .labpcmods {
      font-size: 12px;
    }

    .smlmods {
      font-size: 8px;
    }

    .modsradio {
      padding: 15px 5px;
    }

    .nopads {
      padding-right: 5px;
      padding-left: 5px;
    }
}

@media (max-width: 1024px) {
   /* .dashlogo {
        margin-left: 0px;
    }*/

    .btnnavs {
      margin-right: 0px;
    }

    .mdlswdh {
      padding-right: 0px;
    }
}

@media (max-width: 375px) {
    .stylrm {
        bottom: 0px;
    }

    .stylrm1 {
        bottom: 0px;
    }

    .stylrm2 {
        bottom: 0px;
    }

    .stylrm3 {
        bottom: 0px;
    }
}

@media (max-width: 767.9px) {

    .dashlogo {
      width: 180px;
      padding: 0px;
      margin-left: 5px;
    }

    .dashlogolg {
      width: 180px;
      padding: 0px;
      margin-left: 5px;
    }

    .pdrnav {
        margin-right: -15px !important; /* reset */
        padding: 20px 0;            /* padding atas bawah */
    }

    .pdrnav > li {
        float: none !important;     /* hilangkan float kanan dari bootstrap */
        display: inline-block;      /* tampil horizontal */
        margin: 5px 10px;           /* jarak antar menu */
    }

    .myhr {
      display: block;
    }

    .pdrnavch {
      display:block;
    }

    .container-fluid {
        padding-top: 10px;
    }

    .mynavmobs {
      padding-right: 10px;
      position: absolute;
      right: 75px;
      top: 20px;
      width: 35px;
      display: block;
    }

    .navbar-default .navbar-nav>li>a.navlg {
      margin-bottom: 5px;
      padding-top: 0px;
    }

    .navbar-default .navbar-nav>div>a.navlg {
      margin-bottom: 5px;
      color: #FFFFFF !important;
      padding: 0px 30px 0px 30px;
      font-size: 20px;
      line-height: 24px;
      text-align: center;
    }

    .navbar{
      /*height: 60px;*/
      z-index: 100;
    }


    .sidemods {
      margin-top: 15px;
    }


    .navline {
      margin-bottom: 0px;
      margin-top: 0px;
    }

    .ifrmwdh {
      top: 10px;
    }

    .btnauthpr, .btnauthprs, .btnauthprs1, .btnauthprs2, .btnauthprs3, .btnauthprs4 {
      height: 75px;
    }

    .imglogstyl {
      display: none;
    }

    .formlogin {
      width: 100%;
      border-radius: 15px;
    }

    .sttop {
      margin-top: 15px;
    }

    .stbot {
      margin-bottom: 15px;
    }

    .dashswd {
      width: 95% !important;
    }

    .dashscr {
      width: 65% !important;
    }

    .iptsubs {
      width: 90%;
    }

    .btn-subs {
      margin-top: 15px;
    }

    .bodytesti {
      margin-top: 15px;
      margin-bottom: 15px;
    }

    .carousel-control {
      width: 50%;
    }

    .btnscr {
      width: 90%;
      margin-bottom : 15px;
    }

    .btnscrs {
      width: 90%;
      margin-bottom : 15px;
    }

    .btnscrss {
      width: 90%;
      margin-bottom : 15px;
    }

    .btnscrsss {
      width: 90%;
      margin-bottom : 15px;
    }

    .btnscrssss {
      width: 90%;
      margin-bottom : 15px;
    }

    .btnscrsssss {
      width: 90%;
      margin-bottom : 15px;
    }

    .btnscrssssss {
      width: 90%;
      margin-bottom : 15px;
    }

    .btnscrsssssss {
      width: 90%;
      margin-bottom : 15px;
    }

    .navonmid {
      float: none;
      position: relative; 
      top: 0%; 
      left: 0%; 
      transform: translate(0%, 0%); 
      background: #3C157C;
    }

    .navbar-nav {
      margin: 0px -15px;
      background: #3C157C;
      text-align: center;
      z-index: 1;
      position: relative;
    }

    .btnnav {
      margin-bottom: 60px;
      margin-top: 30px;
      width: 45%;
    }

    .btnnavs {
      margin-right: 0px;
      margin-bottom: 60px;
      margin-top: 30px;
      width: 45%;
    }

    .navbar-default .navbar-nav>li>a {
      margin-bottom: 0px;
    }
}

@media (min-width: 768px) and (max-width: 1200px) {
    .dashlogo {
        width: 200px;
        margin-left: 0px;
    }

    .navbar-default .navbar-nav>li>a.navlg {
      font-size: 16px;
      padding: 25px 15px 0 15px;
    }

    .btnnavs {
      margin-right: 0px;
    }

}

@media (min-width: 768px) and (max-width: 990.9px) {

    .ifrmwdh {
      top: -150px;
    }

    .padtabs {
      padding-top: 300px;
    }
}

@media (min-width: 991px) and (max-width: 1199.9px) {

    .ifrmwdh {
      top: -150px;
    }

    .padtabs {
      padding-top: 410px;
    }
}

@media (min-width: 1200px) and (max-width: 1449.9px) {

    .ifrmwdh {
      top: -150px;
    }

    .padtabs {
      padding-top: 320px;
    }
}