/* TONE COLOR */
:root {
    --color-primary: #4877d8;
    --color-secondary: #dbf4fe;
    --color-dark: #27282e;
    --color-light: #f5f6fc;
    --color-background : #f5f6fc;
    --color-shadow-hard: #b1c5ef;
    --color-shadow-soft: #e3e7fb;

    --color-btn-primary : #f5f6fc;
    --background-btn-primary : #4877d8;
    --color-btn-primary-focus : #4877d8;
    --background-btn-primary-focus : #f5f6fc;
}

@media(min-width: 767px) {
    html {
        max-width: 400px;
        margin: auto;
        position: relative;
    }
}

/*  MOBILE VERSION  */
@media (min-width: 300px) {
    html {
        min-height: 100%;
    }

    body {
        font-family: "Poppins", sans-serif;
    }

    .bg-color {
        background-color: var(--color-background);
    }

    /* HOME PAGE */
    .navbar-nav .nav-link {
        font-size: 14px;
        font-weight: 500;
    }

    .navbar-light .navbar-nav .nav-link.active {
        color: var(--color-primary);
    }

    .navbar-light .navbar-toggler-icon {
        background-image: url("../common/images/nav-icon.png");
        height: 19px;
        width: 22px;
    }

    .navbar-toggler {
        outline: none;
        box-shadow: none;
        border: 0;
    }

    .navbar-brand img {
        width: 85px;
        height: auto;
    }

    .bg-navbar {
        background-color: var(--color-background);
    }

    .carousel-item {
        height: 210px;
    }

    .carousel-indicators {
        bottom: -7%;
    }

    .carousel-indicators li {
        width: 6px;
        height: 6px;
        border-radius: 100%;
    }

    .coursel-name-class {
        margin-bottom: -10px;
        font-size: 16px;
        font-weight: 400;
        color: var(--color-light);
    }

    #popular {
        margin: auto;
        margin-top: 75px;
        width: 90%;
        height: auto;
    }

    #popular-title {
        margin-bottom: 2%;
        font-weight: 500;
        font-size: 14px;
        color: var(--color-dark);
    }

    #popular-dots {
        border-radius: 15px;
        overflow: hidden;
    }

    #categories {
        margin: auto;
        margin-top: 15px;
        width: 90%;
        height: auto;
    }

    #title {
        position: relative;
        font-weight: 600;
        font-size: 14px;
        color: var(--color-dark);
        display: inline-block;
        margin-bottom: 10px;
    }

    #see-all {
        float: right;
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        color: var(--color-primary);
    }

    .item {
        border-radius: 10px;
        width: 95%;
        overflow: hidden;
        position: relative;
    }

    .item a {
        display: block;
        color: var(--color-secondary);
    }

    .item-title {
        position: absolute;
        margin-top: 5%;
        margin-left: 10%;
    }

    .item-category {
        font-weight: 500;
        font-size: 12pt;
        line-height: 18px;
    }

    .item-class {
        font-size: 10pt;
        font-weight: 450;
    }

    #new {
        margin: auto;
        margin-top: 10px;
        width: 90%;
        height: auto;
    }

    #new .margin-new {
        margin-bottom: 80px;
    }

    .new-link,
    .new-link:hover,
    .new-link:active,
    .new-link:visited,
    .new-link:focus {
        text-decoration: none;
        color: var(--color-primary);
    }

    .new-field {
        margin-bottom: 5%;
        width: 100%;
        min-height: 80px;
        background-color: #fff;
        border-radius: 10px;
        padding: 3%;
        overflow: hidden;
        box-shadow: 0px 4px 5px var(--color-shadow-soft);
        position: relative;
    }

    .new-img {
        width: 60px;
        height: 60px;
        border-radius: 10px;
        float: left;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
    }

    .new-img img {
        width: 100%;
        height: auto;
    }

    .new-intensive {
        width: 60px;
        height: 60px;
        border-radius: 10px;
        float: left;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
    }

    .new-intensive img {
        width: auto;
        height: 100%;
    }

    .new-field h6 {
        font-size: 14px;
        color: var(--color-dark);
        font-weight: 500;
        margin-top: 3px;
    }

    .new-perform {
        margin-top: -2%;
        font-size: 12px;
        color: #969696;
        /* display: inline-block; */
    }

    .status {
        width: auto;
        height: 20px;
        padding: 0px 10px 0px 10px;
        color: var(--color-primary);
        border-radius: 10px;
        position: absolute;
        right: 0px;
        bottom: 10px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .status span {
        font-size: 10px;
        font-weight: 500;
    }

    .btn-new {
        width: 70%;
        font-size: 12px;
        background-color: var(--color-primary);
        color: var(--color-light);
        border-radius: 35px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .btn-new:focus {
        background-color: var(--color-light);
        color: var(--color-primary);
    }

    /* INTENSIVE SECTION */
    .intensive {
        width: 100%;
        background-color: #fff;
        border-radius: 20px;
        box-shadow: 0px 4px 5px var(--color-shadow-soft);
        padding: 8px;
    }

    .intensive .image {
        width: 100%;
        height: 110px;
        margin: auto;
        border-radius: 15px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .intensive .info {
        width: 100%;
        height: auto;
        margin-top: 10px;
        margin-bottom: 5px;
    }

    .intensive .info .title {
        font-weight: 600;
        font-size: 16px;
        margin-bottom: 5px;
    }

    .intensive .info .price {
        font-size: 13px;
        font-weight: 600;
        color: #565656;
    }

    .intensive .info .detail {
        /* font-size: 11px;
        text-align: right;
        float: right;
        font-weight: 500;
        color: var(--color-light);
        background-color: var(--color-primary);
        padding: 5px 15px;
        border-radius: 50px;
        transform: translateY(-14px); */
        font-size: 12px;
        text-align: right;
        font-weight: 500;
        color: var(--color-primary);
        float: right;
        text-decoration: none;
    }

    .intensive .info .detail:active,
    .intensive .info .detail:focus,
    .intensive .info .detail:hover {
        color: #565656;
    }

    .btn-add-row {
        background-color: var(--color-primary);
        color: #f5f6fc;
        border-radius: 50px;
        padding: 4px 15px;
    }

    /* CATEGORIES PAGE */
    .filter {
        margin-top: 18%;
        margin-left: 5%;
        overflow: auto;
        white-space: nowrap;
    }

    .filter-recent {
        margin: 5px 10px 8px 5px;
        float: left;
        width: auto;
        height: auto;
    }

    .filter-recent select {
        border-radius: 20px;
        box-shadow: 0px 4px 5px var(--color-shadow-soft);
        height: 35px;
        justify-items: center;
        color: #565656;
        font-size: 12px;
        font-weight: 450;
        border: none;
    }

    .tab-slide {
        margin-top: 20%;
        margin-left: 5%;
        overflow: auto;
        white-space: nowrap;
    }

    .tab-item {
        display: inline-block;
        color: var(--color-primary);
        background-color: var(--color-light);
        font-size: 12px;
        font-weight: 400;
        text-align: center;
        margin-right: 5px;
        padding: 6px 20px 6px 20px;
        border-radius: 40px;
    }

    .tab-active,
    .tab-item:hover {
        background-color: var(--color-primary);
        color: var(--color-light);
    }

    .tab-item,
    .tab-item:hover,
    .tab-item:active,
    .tab-item:visited,
    .tab-item:focus {
        text-decoration: none;
    }

    /* REGISTER LOGIN PAGE */
    .sign {
        width: 90%;
        margin: auto;
        margin-top: 5%;
    }

    .in {
        margin-top: 5%;
    }

    .sign h4 {
        color: var(--color-dark);
    }

    .sign h6 {
        margin-top: -2%;
        font-size: 14px;
        font-weight: 400;
        color: #969696;
    }

    .sign img {
        margin-top: 7%;
        width: 60%;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    .form-field {
        margin-top: 7%;
    }

    .form-field form .form-group .form-control {
        border: none;
        box-shadow: 0px 4px 5px var(--color-shadow-soft);
        border-radius: 5px;
        font-weight: 400;
        color: #565656;
        font-size: 13px;
    }

    .form-control::-webkit-input-placeholder {
        font-size: 12px;
        font-weight: 300;
        color: #969696;
    }

    .btn-sign {
        width: 100%;
        background-color: var(--color-primary);
        color: var(--color-light);
        font-size: 14px;
        font-weight: 400;
        border-radius: 7px;
        margin-left: auto;
        margin-right: auto;
        display: block;
        box-shadow: 0px 4px 6px var(--color-shadow-hard);
    }

    .btn-sign:focus {
        background-color: var(--color-light);
        color: var(--color-primary);
    }

    .have-account {
        position: relative;
        font-size: 12px;
        margin-top: 5%;
        text-align: center;
        color: #969696;
    }

    .btn-sign-in {
        position: relative;
        font-size: 8pt;
        margin-top: 5%;
        margin-bottom: 10%;
        text-align: center;
        color: #969696;
    }

    .btn-sign-in a {
        background-color: white;
        color: var(--color-primary);
        font-size: 14px;
        font-weight: 500;
        width: 100%;
        border-color: var(--color-primary);
    }

    .btn-sign-in a:focus {
        background-color: var(--color-primary);
        color: var(--color-light);
    }

    .forgot {
        position: relative;
        font-size: 12px;
        margin-top: 10%;
        text-align: center;
        color: #3490dc;
    }

    .sign-up {
        position: relative;
        font-size: 8pt;
        margin-top: 10%;
        margin-bottom: 10%;
        text-align: center;
        color: #969696;
    }

    .sign-up a {
        background-color: white;
        color: var(--color-primary);
        font-size: 14px;
        font-weight: 500;
        width: 100%;
        border-color: var(--color-primary);
    }

    .sign-up a:focus {
        background-color: var(--color-primary);
        color: var(--color-light);
    }

    /* DETAIL PAGE */
    .enroll {
        position: fixed;
        width: 100%;
        height: 60px;
        bottom: -1px;
        left: 50%;
        transform: translate(-50%, 0%);
        background-color: #fff;
        box-shadow: 0px 2px 5px #8e91a4;
        /* border-radius: 10px 10px 0 0; */
        /* box-shadow: 0px -4px 5px #e1ebff; */
    }

    .enroll-btn-2 {
        position: fixed;
        width: 100%;
        height: 60px;
        bottom: -1px;
        left: 50%;
        transform: translate(-50%, 0%);
        background-color: #fff;
        box-shadow: 0px 2px 5px #8e91a4;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .enroll h5 {
        position: absolute;
        top: 50%;
        transform: translate(0%, -50%);
        margin-left: 5%;
        font-weight: 550;
        font-size: 17px;
        color: var(--color-primary);
    }

    .enroll .zero {
        position: absolute;
        width: 30%;
        font-size: 13px;
        padding: 7px 0 7px 0;
        font-weight: 530;
        background-color: var(--color-primary);
        color: var(--color-light);
        border-radius: 5px;
        right: 5%;
        top: 50%;
        transform: translate(0%, -50%);
    }

    .enroll .zero:focus {
        background-color: var(--color-light);
        color: var(--color-primary);
    }

    .enroll .new {
        position: absolute;
        width: 60%;
        font-size: 13px;
        padding: 7px 0 7px 0;
        font-weight: 530;
        background-color: var(--color-primary);
        color: var(--color-light);
        border-radius: 20px;
        right: 50%;
        top: 50%;
        transform: translate(50%, -50%);
        box-shadow: 0px 4px 5px var(--color-shadow-hard);
    }

    .enroll-btn-2 .visit {
        /* position: absolute; */
        width: 40%;
        font-size: 13px;
        padding: 7px 0 7px 0;
        font-weight: 530;
        background-color: var(--color-primary);
        color: var(--color-light);
        border-radius: 20px;
        /* right: 50%; */
        /* top: 50%; */
        /* transform: translate(50%, -50%); */
        box-shadow: 0px 4px 5px var(--color-shadow-hard);
    }

    .enroll-btn-2 .get {
        width: 50%;
        font-size: 13px;
        padding: 7px 0 7px 0;
        font-weight: 530;
        background-color: var(--color-primary);
        color: var(--color-light);
        border-radius: 20px;
        margin-right: 10px;
        box-shadow: 0px 4px 5px var(--color-shadow-hard);
    }

    .enroll-btn-2 .dont-get {
        background-color: #6c757d;
        color: var(--color-light);
    }

    .enroll .new:focus {
        background-color: var(--color-light);
        color: var(--color-primary);
    }

    .enroll .alert-verif {
        display: flex;
        height: 60px;
        font-size: 15px;
        font-weight: 530;
        color: var(--color-primary);
        background-color: #fff;
        align-items: center;
        justify-content: center;
    }

    /* DETAIL PAGE 2 */
    .navbar-brand>.arrow {
        width: 22px;
        height: auto;
    }

    .detail-header {
        position: absolute;
        height: 30%;
        width: 100%;
        top: 0;
        background-size: cover;
    }

    .detail-header .detail-title {
        position: absolute;
        bottom: 0;
        color: var(--color-light);
        padding: 0px 20px 25px 20px;
    }

    .detail-title h3 {
        font-weight: 400;
        margin-bottom: 5px;
        font-size: 22px;
    }

    .detail-title h6 {
        font-size: 13px;
        font-weight: 300;
    }

    .detail-content {
        position: absolute;
        width: 100%;
        min-height: 73%;
        border-radius: 20px 20px 0 0;
        top: 27%;
        left: 0;
        background-color: var(--color-light);
    }

    .detail-content .discount {
        height: 30px;
        background-color: var(--color-shadow-soft);
        color: var(--color-primary);
        padding: 0 20px 0 20px;
        margin: auto;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        border-radius: 0 20px 0 20px;
        right: 0;
    }

    .detail-content .discount .disc {
        font-size: 14px;
        font-weight: 500;
        display: inline-block;
        margin-right: 5px;
    }

    .detail-content .discount .disc-price {
        font-size: 12px;
        font-weight: 500;
        text-decoration: line-through;
        display: inline-block;
    }

    .detail-content .discount .disc-promo {
        font-size: 12px;
        font-weight: 500;
        display: inline-block;
    }

    .detail-class {
        padding: 30px 20px 0px 20px;
    }

    .info-mentor {
        margin-top: 15px;
    }

    .person-mentor {
        font-size: 12px;
        color: #969696;
        width: 50px;
        height: 50px;
        border-radius: 10px;
        float: left;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
    }

    .person-mentor img {
        width: 100%;
        height: auto;
    }

    .name-mentor {
        font-size: 12px;
        color: #969696;
    }

    .name-mentor h6 {
        color: var(--color-dark);
        font-weight: 520;
        padding-top: 5px;
    }

    .expert-mentor {
        margin-top: -5px;
        font-size: 12px;
    }

    .info-class {
        width: 100%;
        display: block;
        color: var(--color-primary);
        margin-top: 15px;
    }

    .info-class .row {
        margin-left: 0;
        margin-right: 0;
        margin-top: 10px;
    }

    .info-class .row .col-6 {
        padding-left: 0;
        padding-right: 0;
    }

    .info-class .head {
        font-size: 11px;
        font-weight: 400;
        color: #969696;
    }

    .fa-book,
    .fa-calendar {
        font-size: 12px;
    }

    .info-class span {
        padding-left: 2px;
        font-size: 13px;
        font-weight: 450;
        color: #565656;
    }

    .info-class .bold {
        font-size: 14px;
        font-weight: 600;
    }

    .due-date {
        background-color: #fff;
        margin-left: -20px;
        margin-right: -20px;
        padding-bottom: 15px;
    }

    .due-date .row {
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 10px;
        top: 50%;
        transform: translateY(20%);
    }

    .detail-class p, 
    .detail-class ul, 
    .detail-class ol {
        /* margin-top: 5px; */
        font-size: 13px;
        color: #565656;
        display: inline-block;
    }

    .materi-unduh {
        margin-top: 15px;
    }

    .list-class {
        margin-top: 15px;
    }

    .list-class h6 {
        color: var(--color-dark);
        font-weight: 500;
        display: inline;
    }

    .list-lesson {
        width: 100%;
        height: auto;
        background-color: #fff;
        border-radius: 10px;
        padding: 7px 13px 7px 13px;
        margin-top: 5px;
        margin-bottom: 7px;
        position: relative;
    }

    .name-lesson {
        font-size: 13px;
        color: #565656;
        font-weight: 450;
        width: 85%;
    }

    .time-lesson {
        display: inline-block;
        font-size: 12px;
        color: #969696;
        width: 85%;
    }

    .mar-t-15 {
        margin-top: 15px;
    }

    .benefit h6 {
        color: var(--color-dark);
        font-weight: 500;
        display: inline;
    }

    .benefit ul {
        padding-left: 27px;
        font-size: 13px;
        color: #565656;
        margin-top: 5px;
    }

    .benefit .li-certificate {
        padding-left: 13px;
        font-size: 13px;
        color: #565656;
        margin-top: 5px;
    }

    .tool ul {
        padding-left: 27px;
        font-size: 13px;
        color: #565656;
        margin-top: 5px;
    }

    .description {
        margin-top: 15px;
    }

    .description h6 {
        color: var(--color-dark);
        font-weight: 500;
        display: inline;
    }

    .sk {
        font-size: 11px;
        margin-bottom: 80px;
    }

    .btn-play {
        position: absolute;
        right: 13px;
        font-size: 13px;
        font-weight: 500;
        width: 35px;
        top: 50%;
        transform: translate(0%, -50%);
        align-items: center;
        background-color: var(--color-light);
        color: #969696;
        fill: var(--color-light);
        box-shadow: 0px 4px 6px #d9d9d9;
    }

    .btn-play:active,
    .btn-play:focus,
    .btn-svg-unduh:active,
    .btn-svg-unduh:focus {
        background-color: var(--color-light);
        color: var(--color-primary);
        fill: var(--color-primary);
    }

    .btn-svg-unduh {
        position: absolute;
        right: 13px;
        font-size: 13px;
        font-weight: 500;
        width: 35px;
        top: 50%;
        transform: translate(0%, -50%);
        align-items: center;
        color: #969696;
        fill: var(--color-light);
        padding: 0.375rem 0px;
    }

    .play-active {
        background-color: var(--color-primary);
        color: var(--color-light);
        box-shadow: 0px 4px 6px var(--color-shadow-hard);
    }

    /* FORGET */
    .form-forget-field {
        margin-top: 10%;
        width: auto;
        height: 190px;
        background-color: #fff;
        border-radius: 20px;
        box-shadow: 0px 4px 6px #d6deef;
    }

    .form-forget-field form .form-group {
        width: 100%;
        padding: 5%;
        align-items: center;
        margin-bottom: 0;
    }

    .form-forget-field form .form-group label {
        font-size: 12px;
        color: var(--color-dark);
    }

    .form-forget-field form .form-group .form-control {
        background-color: transparent;
        border: none;
        box-shadow: none;
        border-radius: 0px;
        border-bottom: 2px solid #565656;
    }

    .forget {
        width: 90%;
        margin: auto;
    }

    .forget h5 {
        margin-top: 10%;
        color: var(--color-dark);
        text-align: center;
    }

    .forget h6 {
        text-align: center;
        font-size: 13px;
        font-weight: 400;
        color: #969696;
    }

    .forget>img {
        margin-top: 5%;
        width: 60%;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    .send {
        margin-left: 5%;
        display: inline;
        font-size: 17px;
        font-weight: 500;
        color: #565656;
    }

    .submit-padding {
        padding: 20px 0px 20px 0px;
    }

    .btn-forget {
        width: 40%;
        background-color: var(--color-primary);
        color: var(--color-light);
        font-size: 14px;
        font-weight: 500;
        border-radius: 50px;
        float: right;
        margin-right: 5%;
        box-shadow: 0px 4px 7px #adbcdc;
        padding: 6px 0px 6px 0px;
    }

    /* RECENTS PAGE */
    .sort {
        /* margin: 15% 5% 4% 5%; */
        float: left;
        width: 30%;
        height: auto;
    }

    .sort select {
        border-radius: 20px;
        box-shadow: 0px 4px 5px #dbdbdb;
        height: 35px;
        justify-items: center;
        color: var(--color-dark);
        font-size: 13px;
        font-weight: 450;
    }

    /* PAYMENT PAGE */
    .payment {
        margin: 15% 5% 20% 5%;
        width: 90%;
    }

    .payment h5 {
        font-weight: 600;
        color: var(--color-primary);
    }

    .payment .text-label {
        font-size: 12px;
        font-weight: 400;
        color: #969696;
    }

    .custom-file-label {
        font-size: 14px;
        font-weight: 400;
        color: #969696;
        /* z-index: 0; */
    }

    .pay {
        margin-top: 15px;
        margin-bottom: 10px;
        height: auto;
        width: 100%;
        background-color: #88afff;
        color: var(--color-light);
        border-radius: 15px;
        padding: 15px;
        box-shadow: 0px 4px 5px var(--color-shadow-soft);
    }

    .pay-desc {
        font-size: 13px;
        font-weight: 500;
        margin-left: 15px;
    }

    .money {
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        /* justify-content: center; */
    }

    .money h2 {
        margin-bottom: 0;
        margin-left: 15px;
        display: inline-block;
        /* text-shadow: 0px 3px 4px #587cc8; */
        font-size: 25px;
    }

    .transaction {
        margin-top: 15px;
    }

    .transaction h6 {
        font-weight: 500;
        color: var(--color-dark);
    }

    .method {
        margin-bottom: 15px;
        width: 100%;
        min-height: 80px;
        border-radius: 15px;
        padding: 15px;
        overflow: hidden;
        display: flex;
        align-items: center;
        position: relative;
    }

    .method-img {
        position: absolute;
        width: 80px;
        height: 60px;
        right: 0;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
    }

    .method-img img {
        width: 100%;
        height: auto;
    }

    .method-content {
        margin-left: 15px;
    }

    .method-content label {
        font-size: 14px;
        font-weight: 400;
        margin-bottom: 0;
        color: var(--color-light);
    }

    .method-content h4 {
        margin-bottom: 0;
        color: var(--color-light);
        font-size: 20px;
    }

    .form-payment {
        margin-top: 10px;
        width: 100%;
        height: auto;
        padding: 20px;
        background-color: #fff;
        border-radius: 15px;
        box-shadow: 0px 4px 5px var(--color-shadow-soft);
    }

    .form-payment .promo {
        width: 100%;
    }

    .btn-promo {
        padding: 5px 20px 5px 20px;
        background-color: var(--color-primary);
        color: var(--color-light);
        /* border-radius: 20px; */
    }

    .form-payment form .form-group label {
        font-size: 12px;
        /* font-weight: 450;
        color: #bfbfbf; */
    }

    .form-payment .form .form-group .select-bank {
        font-size: 12px;
    }

    .form-payment form .form-group input {
        box-shadow: none;
        border: 1px solid #ced4da;
        color: var(--color-dark);
    }

    .form-payment form .form-group input::placeholder {
        font-size: 13px;
        font-weight: 400;
        color: #969696;
    }

    .form-payment .card {
        margin-bottom: 15px;
    }

    .form-payment .card .card-header {
        padding: 10px;
        background-color: var(--color-light);
        position: relative;
    }

    .form-payment .card .card-header span {
        font-size: 14px;
        font-weight: 500;
        color: #565656;
    }

    .form-payment .card .card-header img {
        height: 22px;
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
    }

    .form-payment .card .card-body {
        padding: 0 15px 0 15px;
        height: 50px;
        position: relative;
    }

    .form-payment .card .card-body h5 {
        color: #565656;
        font-size: 24px;
        margin-bottom: 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .form-payment .card .card-body .btn-copy {
        color: var(--color-primary);
        font-size: 24px;
        padding: 0;
        right: 15px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .btn-invoice {
        background-color: var(--color-primary);
        color: var(--color-light);
        font-size: 14px;
        font-weight: 500;
        margin-top: 15px;
        padding: 5px 30px 5px 30px;
        border-radius: 40px;
    }

    .btn-invoice:focus {
        background-color: var(--color-light);
        color: var(--color-primary);
    }

    /* PAYMENT VERIFICATION */
    .payment-verif {
        margin: 16% 5% 10% 5%;
        width: 90%;
    }

    .payment-verif h3 {
        font-weight: 500;
        color: var(--color-dark);
    }

    .payment-verif label {
        font-size: 14px;
        font-weight: 450;
        color: #969696;
        margin-top: 20px;
    }

    .center-otp {
        width: 100%;
        margin-top: 70px;
        text-align: center;
    }

    #otp {
        width: auto;
        margin: auto;
    }

    #otp input {
        margin: 10px;
        height: 60px;
        width: 60px;
        border: none;
        border-radius: 15px;
        background-color: #fff;
        box-shadow: 0px 4px 5px var(--color-shadow-hard);
        text-align: center;
    }

    .btn-verif {
        background-color: var(--color-primary);
        color: var(--color-light);
        font-size: 15px;
        font-weight: 500;
        width: 140px;
        border-radius: 20px;
        box-shadow: 0px 4px 5px var(--color-shadow-hard);
        padding: 7px 15px 7px 15px;
        margin-top: 40px;
        text-align: center;
    }

    .center-otp p {
        font-size: 14px;
        font-weight: 400;
        color: #565656;
        margin-top: 100px;
    }

    /* SUCCESS & FAIL PAGE */
    .success {
        margin-top: 40%;
        text-align: center;
    }

    .success img {
        width: 60%;
        height: auto;
        display: block;
        margin: auto;
        filter: drop-shadow(5px 5px 5px var(--color-primary));
        /* -webkit-filter: drop-shadow(5px 5px 5px var(--color-primary)); */
    }

    .success h6 {
        margin-top: 30px;
        color: var(--color-light);
        font-size: 17px;
    }

    .fail {
        margin-top: 40%;
        text-align: center;
    }

    .fail .cross {
        width: 150px;
        height: 150px;
        background: linear-gradient(332deg, rgba(100, 232, 222, 1) 0%, rgba(72, 119, 216, 1) 100%);
        fill: #ed553b;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        filter: drop-shadow(5px 5px 5px var(--color-primary));
    }

    .fail h6 {
        margin-top: 30px;
        color: var(--color-light);
        font-size: 17px;
    }

    .paid {
        margin-top: 15%;
        text-align: center;
        font-size: 12px;
        font-weight: 550;
        color: var(--color-light);
    }

    .paid h6 {
        margin-top: 0;
        font-size: 30px;
        font-weight: 550;
    }

    .btn-class {
        background-color: var(--color-primary);
        color: var(--color-light);
        font-size: 15px;
        font-weight: 500;
        width: 180px;
        border-radius: 20px;
        box-shadow: 0px 4px 5px var(--color-primary);
        padding: 7px 15px 7px 15px;
        margin-top: 40px;
        text-align: center;
    }

    /* DASHBOARD PAGE*/
    .dashboard {
        margin: auto;
        margin-top: 5%;
        width: 90%;
        height: auto;
    }

    .header {
        width: 100%;
        height: 50px;
    }

    .header .dropdown .dropdown-menu {
        border-radius: 20px;
        border: none;
        font-size: 14px;
        background-color: var(--color-primary);
    }

    .header .dropdown .dropdown-menu .dropdown-item {
        color: var(--color-light);
        text-align: center;
        padding: 7px 0px 7px 0px;
    }

    .name-user {
        font-size: 12px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: var(--color-dark);
        float: right;
        margin-right: 10px;
        max-width: 100px;
        text-align: right;
    }

    .logo {
        width: 100px;
        height: 50px;
        display: inline-block;
    }
    .logo img {
        width: 85px;
        height: auto;
    }

    .navbar-light .nav-logo {
        height: 50px;
        color: var(--color-primary);
        font-size: 20px;
        display: flex;
        align-items: center;
        text-align: center;
        font-weight: 500;
    }

    .logo h6 {
        height: 50px;
        color: var(--color-primary);
        font-size: 20px;
        display: flex;
        align-items: center;
        text-align: center;
    }

    .dash-categories {
        margin-top: 7%;
    }

    .dash-img {
        width: 50px;
        height: 50px;
        border-radius: 10px;
        float: right;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        /* box-shadow: 0px 4px 5px #e9e9e9; */
        box-shadow: 0px 4px 5px var(--color-shadow-soft);
    }

    .dash-img img {
        width: 100%;
        height: auto;
    }

    .dashboard h3 {
        color: var(--color-dark);
        font-weight: 500;
    }

    .welcome-search {
        margin: 20% auto 0 auto;
    }

    .welcome-search .row .col-10 {
        padding-left: 15px;
        padding-right: 15px;
    }

    .welcome-search .row .col-2 {
        padding-left: 0;
        padding-right: 15px;
    }

    .search {
        margin: 10% auto 0 auto;
    }

    .search-class {
        width: 100%;
        height: auto;
        margin-bottom: 20%;
        margin-top: 5px;
    }

    .has-search .form-control {
        width: 100%;
        font-size: 13px;
        box-shadow: 0px 4px 5px var(--color-shadow-soft);
        background-color: #fff;
        color: #565656;
        border-radius: 10px;
        border: none;
    }

    .has-search .form-control::placeholder {
        font-size: 12px;
        color: #969696;
    }

    .search .row .col-10 {
        padding-left: 15px;
        padding-right: 15px;
    }

    .search .row .col-2 {
        padding-left: 0;
        padding-right: 15px;
    }

    .btn-search {
        width: 100%;
        height: 38px;
        font-size: 16px;
        background-color: var(--color-primary);
        color: var(--color-light);
        border-radius: 10px;
        box-shadow: 0px 4px 6px var(--color-shadow-hard);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn-search:active,
    .btn-search:focus,
    .btn-search:hover,
    .btn-search:visited {
        background-color: var(--color-light);
        color: var(--color-primary);
    }

    /* HISTORY PAGE */
    .history {
        width: 100%;
        height: auto;
        margin-bottom: 5%;
        margin-top: 10%;
    }

    /* SEARCH CLASS */
    .allclass {
        width: 100%;
        height: auto;
        margin-bottom: 5%;
    }

    /* DASHBOARD CATEGORIES */
    .dash-filter {
        margin-top: 5%;
        margin-bottom: 10px;
        overflow: auto;
        white-space: nowrap;
    }

    /* SETTING PAGE */
    .setting {
        margin: auto;
        margin-top: 5%;
        margin-bottom: 20%;
        width: 90%;
        height: auto;
    }

    .setting .row .text-center {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .setting .row .text-center h6 {
        font-size: 16px;
        font-weight: 500;
        color: var(--color-dark);
    }

    .btn-back {
        width: 100%;
        height: auto;
    }

    .back-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0px 4px 5px var(--color-shadow-soft);
        font-size: 25px;
        background-color: #fff;
        color: var(--color-primary);
    }

    .setting a,
    .setting a:active,
    .setting a:focus {
        text-decoration: none;
    }

    .setting .back-icon:active {
        background-color: var(--color-primary);
        color: var(--color-light);
    }

    .setting .size {
        font-size: 10px;
        margin-top: 5px;
        color: #88afff;
        font-weight: 400;
    }

    .back-icon:active {
        background-color: var(--color-primary);
        color: var(--color-light);
    }

    .back-notif,
    .back-notif:active,
    .back-notif:focus,
    .back-notif:visited {
        text-decoration: none;
    }



    .profile {
        margin-top: 5%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .profile-img {
        width: 100px;
        height: 100px;
        border-radius: 30px;
        float: right;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0px 4px 5px var(--color-shadow-soft);
    }

    .notif-profile {
        margin-top: 10px;
        padding: 7px 20px;
        font-size: 12px;
        background-color: var(--color-secondary);
    }

    .notif-profile .close {
        font-size: 20px;
    }

    .notif-danger {
        background-color: #f9d6d5;
    }

    .upload-button {
        position: absolute;
        padding: 3px 6px;
        border-radius: 15px;
        margin-top: 70px;
        margin-left: 85px;
        background-color: var(--color-secondary);
        color: var(--color-primary); 
    }

    .upload-button:active,
    .upload-button:focus,
    .upload-button:hover,
    .upload-button:visited {
        background-color: var(--color-primary);
        color: #fff;
    }

    .profile-img img {
        width: 100%;
        height: auto;
    }

    #photo {
        position: absolute;
        opacity: 0;
        z-index: -1;
    }

    .name-profile {
        margin-top: 14px;
        font-weight: 500;
    }

    .profile-info {
        margin-top: 5%;
        width: 100%;
        height: auto;
        background-color: #fff;
        padding: 20px 20px 20px 20px;
        border-radius: 20px;
        box-shadow: 0px 4px 5px var(--color-shadow-soft);
        font-size: 15px;
        color: #565656;
    }

    .profile-info .row {
        margin-bottom: 15px;
    }

    .profile-info .row .col-8 {
        word-break: break-all;
    }

    .profile-info label {
        font-size: 12px;
        margin-bottom: 0px;
        color: #565656;
    }

    .profile-info form .form-group .form-control {
        box-shadow: 0px 4px 5px var(--color-shadow-soft);
        border: none;
        background-color: var(--color-light);
        color: #565656;
        font-size: 13px;
    }

    .profile-info .gender {
        font-size: 14px;
        color: var(--color-dark);
    }

    .password-change .form-control::placeholder {
        font-size: 12px;
        color: #969696;
        font-weight: 300;
    }

    .btn-center {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .btn-update {
        width: 50%;
        background-color: var(--color-primary);
        color: var(--color-light);
        font-size: 14px;
        font-weight: 500;
        border-radius: 50px;
        box-shadow: 0px 4px 7px #adbcdc;
        padding: 5px 0px 5px 0px;
        margin-top: 5px;
    }

    .btn-update:focus {
        background-color: var(--color-light);
        color: var(--color-primary);
    }

    .lock-field {
        margin-top: 5%;
        width: 100%;
        min-height: 50px;
        background-color: #fff;
        color: var(--color-primary);
        border-radius: 10px;
        padding: 3%;
        overflow: hidden;
        box-shadow: 0px 4px 5px var(--color-shadow-soft);
        position: relative;
    }

    .lock-img {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background-color: var(--color-secondary);
        float: left;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
    }

    .lock-field h6 {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display: inline;
        font-size: 14px;
        color: var(--color-dark);
        font-weight: 500;
    }

    .lock-field .icon-right {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display: inline;
        right: 20px;
        font-size: 20px;
        color: var(--color-dark);
        font-weight: 600;
    }

    .pass-field {
        width: auto;
        color: var(--color-primary);
        border-radius: 10px;
        box-shadow: 0px 4px 5px var(--color-shadow-soft);
    }

    .pass-img {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background-color: var(--color-secondary);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pass-img:active {
        background-color: var(--color-primary);
        color: var(--color-light);
    }

    .payment-summary {
        font-size: 13px;
        /* box-shadow: 0px 5px 5px #ddd; */
        color: #565656;
    }

    .payment-summary .big {
        margin-top: 2px;
        font-size: 15px;
        font-weight: 700;
        line-height: normal;
        color: #555;
    }

    .payment-summary .big.bundling {
        font-size: 14px;
        font-weight: 500;
    }

    .payment-summary .list-group-item {
        border: none;
        border-bottom: 1px dashed #ccc;
    }

    .payment-summary .list-group-item:last-child {
        font-size: 16px;
    }

    .payment-summary .list-group-item:last-child .big {
        font-size: 20px;
        color: var(--color-primary);
    }

    /* REVISI CARD KELAS */
    .class-section {
        margin-top: 7%;
        margin-bottom: 80px;
    }

    .link-card-class,
    .link-card-class:active,
    .link-card-class:focus,
    .link-card-class:visited {
        text-decoration: none;
    }

    .card-class {
        width: 100%;
        height: 160px;
        background-color: #fff;
        border-radius: 15px;
        box-shadow: 0px 4px 5px var(--color-shadow-soft);
    }

    .card-image {
        width: 100%;
        height: 100px;
        border-radius: 15px;
        position: relative;
        float: left;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(72, 119, 216, 0) 70%);
    }

    .overlay-header {
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(0deg, rgb(0, 0, 0) 10%, rgba(72, 119, 216, 0) 70%);
    }

    .card-head h5 {
        margin-bottom: 0;
    }

    .card-class .card-image .card-head {
        color: var(--color-light);
        position: absolute;
        left: 0;
        padding: 0px 15px 0px 15px;
        bottom: 0;
    }

    .card-class .card-image .card-head h6{
        font-size: 12px;
    }

    /* .card-image .class-tipe {
        width: auto;
        height: 25px;
        background-color: var(--color-primary);
        border-radius: 0px 15px 0px 15px;
        text-align: center;
        font-size: 14px;
        font-weight: 500;
        padding: 0px 17px 0px 17px;
        color: var(--color-light);
        position: absolute;
        top: 0;
        right: 0;
        text-transform: capitalize;
    } */

    .card-image .class-tipe {
        width: auto;
        height: 25px;
        background-color: var(--color-primary);
        border-radius: 0px 15px 0px 15px;
        text-align: center;
        font-size: 12px;
        font-weight: 400;
        padding: 3px 17px 0px 17px;
        color: var(--color-light);
        position: absolute;
        top: 0;
        right: 0;
        text-transform: capitalize;
    }

    .card-image .class-live {
        background-color: #E75098;
    }

    .card-price {
        width: 82%;
        position: absolute;
        margin-top: 107px;
        margin-left: 15px;
    }

    .card-price .discount {
        width: 45px;
        padding: 2px 0px;
        background-color: var(--color-primary);
        color: var(--color-light);
        border-radius: 10px;
        text-align: center;
        justify-content: center;
        font-size: 11px;
        margin-top: -2px;
    }

    .discount-price {
        text-decoration: line-through;
        font-size: 13px;
        color: #969696;
        padding-right: 0;
    }

    .card-price .row .price {
        /* text-align: right; */
        padding-right: 15px;
    }

    .card-price .row .price h6 {
        font-size: 18px;
        font-weight: 700;
        color: var(--color-dark);
        margin-bottom: 0px;
    }

    .card-price .row .price .date-live {
        color: #0B2873;
    }

    .card-price h5 {
        margin-top: 4px;
        font-size: 13px;
        font-weight: 500;
        color: #565656;
        display: inline-block;
    }

    .card-price .link-card-class {
        color: var(--color-primary);
    }

    /* .btn-card-class {
        margin-top: 5px;
        color: var(--color-primary);
        padding: 0px;
        font-size: 12px;
        border-radius: 50px;
        float: right;
        text-align: right;
    } */

    .btn-card-class {
        margin-top: 5px;
        color: var(--color-btn-primary);
        font-size: 11px;
        border-radius: 50px;
        float: right;
        text-align: right;
        background-color: var(--background-btn-primary);
        padding: 5px 15px;
        transform: translateY(-14px);
        font-weight: 500;
    }

    .btn-card-class:active,
    .btn-card-class:focus {
        background-color: var(--background-btn-primary-focus);
        color: var(--color-btn-primary-focus);
    }

    /* class non active */
    .card-class.old {
        background-color: #c4c4c4;
    }
    .card-class.old .overlay {
        background-color: rgb(113 113 113 / 70%);
        background-image: none;
    }
    .card-class.old .price h6 {
        color: #5a5a5a;
    }
    .card-class.old .class-tipe {
        background-color: #a5a5a5;
    }
    .card-class.old .btn-card-class {
        background-color: #777777;
    }

    /* MENU */
    .menu {
        position: fixed;
        bottom: 0;
        left: 0px;
        width: 100%;
        box-shadow: 0px 2px 5px #8e91a4;
        background-color: #fff;
        display: flex;
        overflow-x: auto;
        padding: 0px 0px 0px 0px;
        border-radius: 20px 20px 0px 0px;
        overflow: hidden;
        z-index: 100;
    }

    .menu-container {
        width: 400px;
        margin: auto;
        display: flex;
        flex-flow: row;
    }

    .menu-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex-grow: 1;
        min-width: 50px;
        overflow: hidden;
        white-space: nowrap;
        font-size: 22px;
        color: #565656;
        fill: #565656;
        -webkit-tap-highlight-color: transparent;
        transition: background-color 0.1s ease-in-out;
        padding: 10px 5px 8px;
        position: relative;
    }

    .menu-link .num {
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: #ed553b;
        border-radius: 50%;
        font-size: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        right: 21px;
        top: 3px;
        border: 2px solid #fff;
        font-weight: 500;
    }

    .menu-link,
    .menu-link:hover,
    .menu-link:active,
    .menu-link:visited,
    .menu-link:focus {
        text-decoration: none;
    }

    .menu-link span {
        font-size: 10px;
        font-weight: 400;
    }

    .menu-link--active {
        color: var(--color-primary);
        fill: var(--color-primary);
        position: relative;
    }

    .menu-link--active span {
        font-weight: 500;
    }

    .menu-link--active:after {
        content: "";
        width: 40px;
        height: 40px;
        border-radius: 50px;
        background-color: var(--color-shadow-hard);
        position: absolute;
        bottom: -32px;
        transition: background-color 0.1s ease-in-out;
    }

    .menu-icon {
        font-size: 18px;
    }

    .btn-search-class {
        padding: 5px 80px 5px 80px;
        background-color: var(--color-primary);
        color: var(--color-light);
        font-size: 13px;
        border-radius: 20px;
    }

    .btn-search-class:focus {
        background-color: var(--color-light);
        color: var(--color-primary);
    }

    /* BOOKING */
    .tabs {
        width: 100%;
        height: 40px;
        margin-top: 7%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .tab-booking {
        position: relative;
        width: 45%;
        height: 35px;
        background-color: var(--color-light);
        color: var(--color-primary);
        border: 1px solid var(--color-primary);
        border-radius: 5px;
        box-shadow: 0px 4px 5px var(--color-shadow-soft);
        margin-right: 10px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-size: 12px;
    }

    .tab-booking .ticket {
        width: 20px;
        height: 20px;
        border-radius: 100%;
        border: 2px solid var(--color-light);
        background-color: #ed553b;
        position: absolute;
        right: -7px;
        top: -7px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 10px;
        font-weight: 500;
    }

    .tab-booking-active {
        background-color: var(--color-primary);
        color: var(--color-light);
        font-weight: 500;
    }

    .tab-booking:focus {
        text-decoration: none;
        background-color: var(--color-primary);
        color: var(--color-light);
    }

    .tab-booking-active:focus {
        text-decoration: none;
        background-color: var(--color-light);
        color: var(--color-primary);
    }

    .kelasku {
        width: 100%;
        height: auto;
        margin-bottom: 80px;
        margin-top: 7%;
    }

    .no-booking {
        background-color: var(--color-light);
        color: #565656;
        border: 1px solid var(--color-primary);
        font-size: 12px;
        border-radius: 20px;
    }

    .no-booking .btn-invoice {
        font-size: 12px;
        margin-top: 10px;
    }

    /* CARD TICKET */
    .tickets {
        width: 100%;
        height: auto;
        margin-bottom: 80px;
        margin-top: 5%;
    }

    .ticket {
        width: 100%;
        margin-bottom: 15px;
        color: #fff;
        display: flex;
        flex-wrap: wrap;
    }

    .card-ticket {
        background: linear-gradient(to bottom, var(--color-primary) 0px, var(--color-primary) 40px, var(--color-shadow-soft) 40px, var(--color-shadow-soft) 100px);
        min-height: 11em;
        position: relative;
        padding: 1em;
    }

    .card-left {
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        width: 70%;
    }

    .card-left h4 {
        font-size: 14px;
        margin-top: -2px;
        font-weight: 400;
    }

    .card-left .title {
        margin-top: 20px;
    }

    .card-left .title h5 {
        font-size: 16px;
        color: #565656;
        font-weight: 600;
        margin: 0;
    }

    .card-left .mentor h5 {
        font-size: 14px;
        color: #565656;
        font-weight: 500;
        margin-bottom: 0;
    }

    .card-left span {
        font-size: 10px;
        color: #969696;
    }

    .card-left .date h5 {
        font-size: 14px;
        color: #565656;
        font-weight: 500;
        margin-bottom: 0;
    }

    .card-right {
        width: 30%;
        border-left: .18em dashed #fff;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        display: flex;
        align-items: center;
        flex-flow: column;
        justify-content: center;
    }

    .card-right h4 {
        font-size: 14px;
        margin-top: -2px;
        font-weight: 400;
        margin-bottom: 20px;
    }

    .card-right::before,
    .card-right::after {
        content: "";
        position: absolute;
        display: block;
        width: .9em;
        height: .9em;
        background: var(--color-light);
        border-radius: 50%;
        left: -.5em;
    }

    .card-right::before {
        top: -.4em;
    }

    .card-right::after {
        bottom: -.4em;
    }

    .card-right .qr-code {
        text-align: center;
        text-transform: uppercase;
    }

    .card-right .qr-code i {
        color: var(--color-dark);
        font-size: 80px;
    }

    .card-right .btn-scan {
        padding: 2px 15px 2px 15px;
        border-radius: 20px;
        background-color: var(--color-primary);
        color: var(--color-light);
        font-size: 12px;
        margin-top: 5px;
    }

    /* TICKET DETAIL */
    .ticket-detail {
        width: 100%;
        height: auto;
        margin-bottom: 20%;
        margin-top: 5%;
        color: #fff;
        display: flex;
        flex-wrap: wrap;
    }

    .ticket-detail .top {
        width: 100%;
        height: auto;
        border-radius: 10px 10px 0px 0px;
        background-color: var(--color-shadow-soft);
        margin: auto;
        padding: 25px;
    }

    .ticket-detail .top h4 {
        margin-top: 20px;
        font-weight: 600;
        color: var(--color-dark);
    }

    .ticket-detail .top h6 {
        margin-top: 20px;
        font-weight: 500;
        color: var(--color-dark);
    }

    .ticket-detail .top .qr-code {
        width: 100%;
        height: auto;
        margin: auto;
    }

    .ticket-detail .top .btn-invoice {
        margin-top: 0;
        padding: 20px 30px 20px 30px;
        font-size: 16px;
        border-radius: 5px;
    }

    .ticket-detail .top .text-notice {
        color: #565656;
        font-size: 12px;
    }

    .ticket-detail .top .qr-code img {
        width: 100%;
        color: var(--color-dark);
    }

    .ticket-detail .bottom {
        width: 100%;
        height: auto;
        border-top: .18em dashed #fff;
        border-radius: 0px 0px 10px 10px;
        background-color: var(--color-shadow-soft);
        margin: auto;
        padding: 15px;
        position: relative;
        display: inline-block;
    }

    .ticket-detail .bottom::before,
    .ticket-detail .bottom::after {
        content: "";
        position: absolute;
        display: block;
        width: .9em;
        height: .9em;
        background: var(--color-light);
        border-radius: 50%;
        top: -.5em;
    }

    .ticket-detail .bottom::before {
        left: -.4em;
    }

    .ticket-detail .bottom::after {
        right: -.4em;
    }

    .ticket-detail .bottom span {
        font-size: 10px;
        color: #969696;
        font-weight: 400;
    }

    .ticket-detail .bottom .nama h6 {
        font-size: 13px;
        color: #565656;
        font-weight: 500;
    }

    .ticket-detail .bottom .tanggal-jenis .row h6 {
        font-size: 13px;
        color: #565656;
        font-weight: 500;
    }

    .message {
        margin-top: 7%;
    }

    .message a {
        text-decoration: none;
    }

    .message .classes {
        font-size: 14px;
        font-weight: 600;
        color: var(--color-dark);
    }

    .message .info {
        font-size: 12px;
    }

    .message-show {
        width: 100%;
        margin-top: 7%
    }

    .message .border-custom {
        border: 1px solid var(--color-primary);
    }

    .message .border-custom hr {
        border-top-color: var(--color-primary);
    }

    .message .color-read {
        background-color: #fff;
    }

    .message-show .card {
        border-radius: 10px 10px 10px 10px;
        border: none;
        box-shadow: 0px 4px 5px var(--color-shadow-soft);
    }

    .message-show .card .card-header {
        font-size: 16px;
        font-weight: 500;
        background-color: var(--color-primary);
        color: var(--color-light);
        border-radius: 10px 10px 0px 0px;
    }

    .message-show .card .card-body p {
        font-size: 14px;
        color: #565656;
        margin-bottom: 5px;
    }

    .message-show .card .card-body .all-docs img {
        width: 100px;
        margin: 2px;
    }

    .btn-unduh {
        padding: 4px 40px 4px 40px;
        background-color: var(--color-primary);
        color: var(--color-light);
        border-radius: 20px;
        font-size: 14px;
        box-shadow: 0px 4px 5px var(--color-shadow-hard);
        margin-top: 10px;
    }

    .btn-back-detail,
    .btn-back-detail:focus,
    .btn-back-detail:active {
        text-decoration: none;
    }

    .btn-shadow {
        box-shadow: 0px 4px 5px var(--color-shadow-soft);
    }

    .btn-back-detail .back-icon:active {
        background-color: var(--color-primary);
        color: var(--color-light);
    }

    .btn-back-detail .back-icon {
        /* box-shadow: none; */
        width: 35px;
        height: 35px;
    }

    /* MESSAGE / NOTIFICATION */
    .notification {
        margin-top: -1px;
        width: 100%;
        min-height: 55px;
        overflow: hidden;
        border-top: 0.2px solid #e0e0e0;
        /* border-bottom: 1px solid var(--color-primary); */
        padding: 10px 20px 10px 35px;
        position: relative;
        display: flex;
    }

    .notification .icon {
        width: 25px;
        height: 25px;
        border-radius: 50px;
        float: left;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        margin-right: 10px;
        left: 0;
        background-color: #4caf50;
    }
    .notification .icon.read {
        opacity: 0.5;
    }
    .notification .icon.icon-2 {
        background-color: #ed553b;
    }
    .notification .icon.icon-3 {
        background-color: #FFC107;
    }
    .notification .icon.icon-4 {
        background-color: #4caf50;
    }

    .notification .icon::after {
        content: "";
        position: absolute;
        width: 8px;
        height: 8px;
        border-radius: 50px;
        border: 1px solid var(--color-light);
        right: -1px;
        top: -1px;
        background-color: #ed553b;
    }

    .notification .icon.read::after {
        display: none;
    }

    .notification .icon i {
        font-size: 12px;
        color: var(--color-light);
        margin-top: -1px;
    }

    .notification .isi {
        width: 100%;
    }

    .notification .isi h5 {
        font-size: 13px;
        font-weight: 400;
        margin-bottom: 5px;
        color: var(--color-dark);
        line-height: 18px;
    }

    .notification .isi .message-new {
        font-weight: 600;
    }

    .notification .isi .text {
        font-size: 12px;
        display: block;
        line-height: 17px;
        color: #969696;
        margin-top: 3px;
    }

    .message-show .card .delete {
        background-color: var(--color-light);
        width: 30px;
        height: 30px;
        border-radius: 5px;
        position: absolute;
        right: 10px;
        top: 10px;
        fill: var(--color-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
    }

    .message-show .delete:active,
    .message-show .delete:focus {
        background-color: var(--color-primary);
        fill: var(--color-light);
    }

    /* CERTIFICATE */
    .certificate {
        margin-top: 10px;
        width: 100%;
        height: 450px;
        padding: 10px 20px;
        background-color: #fff;
        box-shadow: 0px 4px 5px var(--color-shadow-soft);
        border-radius: 5px;
        position: relative;
    }

    .certificate .date {
        font-size: 12px;
        font-style: italic;
        font-weight: 500;
        color: #565656;
        display: inline-block;
    }

    .certificate .logo {
        position: absolute;
        right: 20px;
        text-align: right;
        font-size: 20px;
        font-weight: 600;
        color: var(--color-primary);
    }

    .certificate .nama {
        margin-top: 60px;
    }

    .certificate .nama h6 {
        font-size: 14px;
        color: #565656;
    }

    .certificate .nama h5 {
        font-size: 18px;
        font-weight: 700;
        color: var(--color-primary);
    }

    .certificate .peserta {
        margin-top: 30px;
    }

    .certificate .peserta h5 {
        font-size: 16px;
        font-weight: 700;
        color: var(--color-dark);
        margin-bottom: 5px;
    }

    .certificate .peserta h6 {
        font-size: 12px;
        color: #565656;
        font-style: italic;
    }

    .congratulation {
        margin-top: 30px;
    }

    .congratulation h5 {
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 5px;
    }

    .congratulation p {
        font-size: 12px;
        width: 80%;
        text-align: justify;
        line-height: 15px;
        color: #969696;
    }

    .certificate .signature {
        margin-top: 20px;
        text-align: right;
    }

    .certificate .signature h5 {
        font-size: 12px;
        font-weight: 700;
        margin-bottom: 0px;
    }

    .certificate .signature h6 {
        font-size: 10px;
        font-weight: 500;
        font-style: italic;
        color: #565656;
    }

    .ticket-cp{
        font-size: 11px;
        color: #565656;
        width: 220px;
        line-height: 12px;
    }

    .ticket-cp small .wa {
        font-weight: 500;
        /* color: #545454; */
        font-size: 8px;
    }
    

    .bg-bundling-topic {
        width: 100%;
        height: 150px;
        background: linear-gradient(315deg, rgba(201,32,219,1) 0%, rgba(72,119,216,1) 100%);
        position: relative;
    }
    .bg-bundling-topic .item-title {
        position: absolute;
        margin: 0px;
        width: 100%;
        top: 0px;
        left: 0px;
        padding: 10px;
    }
    .bg-bundling-topic .item-category {
        font-size: 13px;
        line-height: normal;
        margin-bottom: 5px;
    }
    .bg-bundling-topic .item-class {
        font-size: 12px;
        border-top: 1px solid #c3b5d2;
        padding-top: 5px;
        color: #fff;
    }

    .date-bundling {
        position: absolute;
        bottom: 0px;
        padding: 10px;
        line-height: normal;
        font-size: 11px;
        color: orange;
    }

    .mb-lihat-selengkapnya {
        margin-bottom: 20%;
    }

    .zoom {
        height: 70px;
        width: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .class-live {
        position: fixed;
        bottom: 65px;
        width: 100%;
        padding: 5px 5%;
    }

    .card-live {
        width: auto;
        height: auto;
        background-color: #fff;
        border-radius: 0px;
        padding: 12px 20px;
        box-shadow: 0px 2px 5px #8e91a4;
    }

    .class-live .card-live .badge {
        background-color: #E75098;
        color: #fff;
        font-weight: 500;
        padding: 8px 14px;
        border-radius: 7px;
    }

    .class-live .card-live .class .name {
        line-height: 17px;
        color: #0B2873;
        font-weight: 500;
    }

    .class-live .card-live .enter {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .class-live .card-live .btn {
        background-color: #2A5FE8;
    }
}



/* ADMIN CSS WEB VERSION*/
.thumbnail {
    width: 100%;
    height: 250px;
    position: relative;
    float: right;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #cbd4e7;
    border-radius: 20px;
}

.thumbnail img {
    width: 100%;
}

.thumbnail .icon {
    position: absolute;
    width: 80px;
    height: 80px;
    border: 5px solid var(--color-light);
    border-radius: 50%;
    box-shadow: 0px 4px 6px var(--color-shadow-hard);
    fill: var(--color-light);
    padding: 10px;
    bottom: 90px;
}

.thumbnail .text {
    position: absolute;
    color: var(--color-light);
    bottom: 20px;
}

.voucher-redeemed {
    background-color: #4877d8;
    color: #fff;
    padding: 10px 20px;
    margin-bottom: 15px;
    border-radius: 5px;
    position: relative;
}
.voucher-redeemed:before,
.voucher-redeemed:after {
    content: "";
    position: absolute;
    left: -13px;
    top: 25%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #fff;
}
.voucher-redeemed:after {
    left: auto;
    right: -13px;
}

#remove-voucher {
    position: absolute;
    right: -10px;
    top: 17%;
    background-color: red;
    color: #fff;
    border: 2px solid #fff;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    font-size: 12px;
    justify-content: center;
    border-radius: 50%;
    z-index: 100;
}