:root {
    --themeyellow: #ecca11;
}
@media (min-width: 992px) {
    :root {
        --bs-app-header-height: 70px;
        --bs-app-header-height-actual: 70px;
    }

    [data-bs-theme=dark] {
        --bs-scrollbar-color: rgba(255,255,255,0.25);
    }
}
body > form {
    height: 100%;
    display: contents;
}
.app-default, body {
    background-color: var(--bs-app-bg-color);
    background-image: url(../../img/bg.jpg);
    background-size: cover;
    background-position:bottom;
    background-attachment: fixed;
}
@media (min-width: 992px) {
    .app-header .app-navbar {
        border-bottom: none;
    }
}
.bg-dark-green {
    background-color: #0f3e11!important;
    color:#fff;
}
.bg-green {
    background-color: #029a09;
}
.swal2-styled.swal2-confirm {
    background-color: var(--bs-primary);
}
.network-detail .separator.separator-dashed {
     border-bottom-color: rgba(255,255,255,0.2);
}

.t-color {
    color: #0f3f11 !important;
}
.y-color {
    color: #ebca11 !important;
}
.btn-green, .btn-green:hover, .btn-green:active, .btn-green:focus {
    background-color: #018836!important;
    color: #fff;
}
    .btn-green:disabled {
        background-color: #00752e!important;
    }
    network-detail .separator.separator-dashed {
        border-bottom-style: dashed;
        border-bottom-color: var(--bs-border-dashed-color);
    }
.network-detail .symbol .symbol-label {
    background-color:rgba(0,0,0,0.4)!important;
}
.network-detail .symbol .symbol-label i{
    color:#fff;
}
.bg-color {
    background-color: #ecca11 !important;
}
 
.app-sidebar-menu-primary.menu > .menu-item > .menu-link .menu-title {
    color: var(--bs-gray-800);
}
[data-bs-theme=dark] {
    --bs-body-bg: #172b23;
    --bs-app-bg-color: #111613;
    --bs-app-sidebar-base-bg-color: #172b23;
    --bs-app-header-base-bg-color: #111613;
    --bs-menu-dropdown-bg-color: #2f6542;
    --bs-root-card-border-color: #37423b;
    --bs-primary-active: #ecca11;
    --bs-primary: #ecca11;
    --bs-primary-inverse: #000000;
    --bs-text-muted: #848796;
    --bs-app-separator-border: 0px solid transparent;
 }

.modal_search.input-group-lg > .modal_search .form-select, .modal_search.input-group-sm > .form-select {
    padding-right: 2.5rem;
}
@media (max-width: 992px) {
    .modal_search {
        position:absolute;
        top:60px;
         left:0px;
    }
}
.video-duration {
    background-color: #151515;
    border-radius: 5px;
    bottom: 0.625rem;
    color: white;
    font-size: .85rem;
    line-height: 1rem;
    padding: 0 0.25rem;
    position: absolute;
    right: 0.625rem;
}
.app-sidebar {
    background-color: transparent;
}
.app-sidebar-navs {
    background-color: #172b23;
 }
.app-sidebar-header {
    background-color: #FBFBFB;
    height: var(--bs-app-header-height);
}
.app-sidebar-toggle {
    background-color: #ededed !important;
    border:1px solid rgba(0,0,0,0.15)!important;
    color: rgba(0,0,0,0.7);
}
@media (max-width: 991.98px) {
    .app-container {
         padding-left: 12px !important;
        padding-right: 12px !important;
    }
}
.menu-sub-dropdown .separator {
    border-bottom: 1px solid #cfcfcf;
}
.form-control.form-control-solid {
    background-color: var(--bs-app-bg-color);
    border-color: var(--bs-gray-300);
    color: var(--bs-gray-700);
}
.form-control.form-control-solid:active{
    background-color: var(--bs-app-bg-color)!important;
    border-color: var(--bs-gray-500);
    color: var(--bs-gray-900);
}
.card .symbol-50px {
    transition: transform .2s; /* Animation */
}
.card:hover .symbol-50px {
    transform: scale(1.2);
}
.card .symbol-50px i {
    transition: transform .3s; /* Animation */
}
.card:hover .symbol-50px i {
    transform: scale(1.3);
}
.text-green {
    color: #00a307;
}
.jstree-default .jstree-anchor {
     padding: 0 8px 0 4px;
}
.jstree-default .jstree-disabled {
    color: var(--bs-gray-700);
}
.jstree-default .jstree-anchor {
    line-height: 34px;
    height: 34px;
}
.jstree-default .jstree-icon:empty {
    width: 24px;
    height: 24px;
    line-height: 34px;
}
.jstree-default .jstree-closed > .jstree-ocl {
    background-position: -100px 0px;
}
.jstree-default .jstree-open > .jstree-ocl {
    background-position: -132px -0px;
}
.jstree-default .jstree-clicked {
    background: #2fc969;
    color:#fff;
    border-radius:8px;
}
    .vjs-picture-in-picture-control {
    display: none !important;
    visibility: hidden !important;
}

.all-lesson > div > .accordion-header {
    padding: 10px 6px;
    border: 1px solid rgba(0,0,0,0.1);
     background-color: rgba(0, 0, 0, 0.06);
    border-radius: 6px ;
 }
.all-lesson .accordion-header:not(.collapsed) h3 {
    font-weight: bolder !important;
}
.all-lesson .c-content{
    margin-top:3px;
    height:450px;
    overflow-y:scroll;
    padding:10px; 
    border:1px solid rgba(0,0,0,0.1);
    border-radius: 6px;
}
@media (max-width: 1200px) {
    .all-lesson .c-content {
         height: 330px; 
    }
}
    .lesson .timeline-item {
        cursor: pointer;
    }

    .lesson .timeline-icon {
        font-weight: bolder;
        position: relative;
    }

    .lesson .lesson-watched-done .timeline-icon {
        background-color: var(--bs-primary);
    }

        .lesson .lesson-watched-done .timeline-icon:after {
            content: '\e99f';
            font-family: keenicons-outline !important;
            position: absolute;
            right: -2px;
            bottom: -2px;
            font-size: 12px;
            line-height: 14px;
            background-color: #0c6405;
            color: #fff;
            border-radius: 100%;
            width: 14px;
            height: 14px;
        }

    .lesson .lesson-watched-done .timeline-icon {
        background-color: var(--bs-primary);
        color:#fff;
    }

    .lesson .lesson-watched-done .lesson-title {
        color: var(--bs-primary) !important;
    }

.lesson .lesson-watched-half-way .timeline-icon {
    background-color: var(--bs-warning);
    color:#fff;
}

.lesson .lesson-watched-half-way .lesson-title {
    font-weight: bolder;
}

.lesson .lesson-watch-current .timeline-icon {
    border: 1px solid var(--bs-gray-900);
}

    .lesson .lesson-watch-current .timeline-icon:after {
        content: '\f04b';
        font-family: "Font Awesome 6 Free";
        position: absolute;
        right: -2px;
        bottom: -2px;
        font-size: 8px;
        line-height: 14px;
        background-color: #000;
        color: #fff;
        border-radius: 100%;
        width: 14px;
        height: 14px;
    }

    #kt_drawer_lesson.drawer {
        background-color: transparent !important;
    }

    @media (min-width: 1199.98px) {
        #kt_drawer_lesson[data-kt-drawer=true] {
            display: block;
        }
        #kt_drawer_lesson .card{
            min-height:650px;
        }
        #kt_drawer_lesson.drawer {
            width: auto !important;
            right: initial !important;
            transform: initial !important;
            display: block !important;
            overflow: auto;
            z-index: 1;
            position: relative;
        }
    }
.reminder-bar {
    width: 100%;
    padding: 3px;
    background-color: #f74a4a;
    color: #fff;
    text-align: center;
    height: 28px;
    position: fixed;
    z-index: 9;
}
.reminder-bar a{
    color:#fff;
}
.reminder-bar a:hover{
    color:#ebca11;
}
.reminder-bar + .app-header{
    top:28px;
}
    .reminder-bar + .app-header + .app-wrapper {
        margin-top: 98px !important;
    }
    .reminder-bar + .app-header + .app-wrapper .app-sidebar {
        top: 28px !important;
    }
@media (max-width: 991.98px) {
    .reminder-bar {
     height: 90px;
  }
 
 
.reminder-bar + .app-header{
    top:90px;
}
    .reminder-bar + .app-header + .app-wrapper {
        margin-top: 170px !important;
    }
    .reminder-bar + .app-header + .app-wrapper .app-sidebar {
        top: 90px !important;
    }
}
.swal2-icon.swal2-success [class^=swal2-success-line] {
    background-color: var(--bs-primary);
}
.swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(var(--bs-primary-rgb),.3);
}
.form-check-image .form-check-wrapper {
    display: block;
}
.form-check-image.active:not(.form-check-success):not(.form-check-danger) .form-check-wrapper {
    border-color: transparent !important;
    display: block;
}
#kt_search{
    display:none!important;
}
[data-kt-password-meter-control=highlight] .bg-secondary {
    background-color: rgba(0,0,0,0.1) !important;
 }
[data-kt-password-meter-control=highlight] .bg-active-primary.active {
    background-color: var(--bs-primary) !important;
}
.price.c1 {
    background-color: #5cff8e;
}

.price.c2 {
    background-color: #25e861;
}

.price.c3 {
    background-color: #10c849;
    color: #fff !important;
}

.price.c4 {
    background-color: #07a036;
    color: #fff !important;
}
.label-pack.active, .div-box.active {
    border: 2px solid #0f3e11 !important;
    background-color: #efffee !important;
}

@media (max-width: 991.98px) {
 /*  .allpack .col-12:not(.div-box.active) {
        display: none !important
    }
    .allpack .col-12:has(.div-box.active) {
        display: block !important;
    }*/
    .allpack{
        margin-top:15px;
    }
    .allpack > * {
        margin-top: 0 !important;
    }
    .allpack .label-pack {
        display: none !important;
    }
    .allpack .label-pack.active {
        display: block!important;
    }
}
.like-button i {
    transition: all 0.5s;
}
.like-button.text-success i  {
    color: #000 !important;
 }
.like-button.text-success span {
    color: #000 !important;
}
    .like-button.text-success .likeicon {
        animation: like 0.5s 1;
        color: #000 !important;
    }
    .like-button.text-success i:before {
        font-family: keenicons-solid !important;
       
    }
@-webkit-keyframes like {
    0% {
        transform: scale(1);
    }

    90% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1.1);
    }
}
.btn-dark.btn-fav.active, .btn-dark.btn-fav.active:hover, .btn-dark.btn-fav.active:focus {
    background-color: rgba(0,0,0,0.05) !important;
    color: #000 !important;
}
    .btn-dark.btn-fav.active i {
        color: #000 !important;
    }
.btn-dark.btn-fav.active i::before{
     content: "\e99f";
     font-family: keenicons-solid!important;
}

.ranking {
    text-align: center;
    margin-bottom: 10px;
}
.rankingbox {
    border: 3px solid #ccc;
    -webkit-box-shadow: 0 5px 6px 2px rgba(0,0,0,0.1);
    box-shadow: 0 5px 6px 2px rgba(0,0,0,0.1);
}
.rankingbox.no1 {
    border-color:#f59704;
    background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,1) 65%, rgba(245,151,4,1) 100%);
}
.rankingbox.no2 {
    border-color:#707c9a;
    background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,1) 65%, rgba(112,124,154,1) 100%);
}
.rankingbox.no3 {
    border-color:#c56f32;
    background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,1) 65%, rgba(197,111,50,1) 100%);
}
.rankingbox .title-detail {
    font-size: 14px;
}
.rankingbox .rank{
    max-height:64px;
    position:absolute;
    left:-18px;
    top:-18px;
}
.nav-rank{
    border-bottom:none!important;
    display:flex;
    justify-content:center;
    font-size:16px;
}
.nav-rank .nav-link{
    border:1px solid rgba(0,0,0,0.1);
}
    .nav-rank .active.nav-link {
        border: 1px solid #17C653;
    }
@media (max-width: 991.98px) {
    .nav-rank {
        display: block;
    }
    .nav-rank .nav-link{
        text-align:center;
        margin-bottom:5px;
    }
}
.table-rank tr td {
    vertical-align: middle !important;
}
.dot:before {
    content: "•";
    margin: 0 4px;
}
/*ranking icon network*/
.network-icon{
     background-size:90%!important;
    background-repeat:no-repeat!important;
    background-position:center bottom!important;
}
    .network-icon.rahmah-icon {
        background-image: url(../../img/pack/pack_rahmah.png) !important;
    }
    .network-icon.pro-icon {
        background-image: url(../../img/pack/pack_pro.png) !important;
    }
    .network-icon.biz-icon {
        background-image: url(../../img/pack/pack_biz.png) !important;
    }
    .network-icon.cor-icon {
        background-image: url(../../img/pack/pack_corp.png) !important;
    }
    .network-icon.free-icon {
        background-image: url(../../img/pack/pack_free.png) !important;
    }
.icon-subscription{
    position:absolute;
    right:15px;
    top:15px;
}
    .icon-subscription i {
        color: var(--bs-primary);
        font-size:32px;
    }
.clickableDiv {
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.0);
}
.clickableDiv:hover {
    cursor: pointer;
    border:1px solid rgba(0,0,0,0.2);
}
#lblGlobal_EmailAddr {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 160px;
}

/*paging start*/
.GridPager, .GridPager tr {
    border-bottom: none !important;
}

    .GridPager > td {
    }

    .GridPager td span, .GridPager td a {
        display: block;
        position: relative;
        text-align: center;
        width: 22px;
        height: 22px;
        border: 1px solid transparent;
        color: #666;
        border-radius: 4px;
        margin-right: 2px;
        line-height: 20px;
    }

    .GridPager td span {
        border: 1px solid #ccc;
        color: #666;
        background-color:rgba(0,0,0,0.1);
    }
.symbol.symbol-circle img{
    object-fit:cover;
}