html{
    height: 100%;
}

::selection {
    background: var(--bs-primary);
    color: white;
}

body{}

/* ================================ COLORS ================================ */

.red{
    color: var(--bs-red);
}

.blue{
    color: var(--bs-blue);
}

.green{
    color: var(--bs-green);
}

.yellow{
    color: var(--bs-yellow);
}

.orange{
    color: var(--bs-orange);
}

.cyan{
    color: var(--bs-cyan);
}

.purple{
    color: var(--bs-purple);
}

.teal{
    color: var(--bs-teal);
}

.black{
    color: var(--bs-gray-dark);
}

.brown{
    color: var(--bs-brown);
}
 /*-------------------------------------------------------*/

.modal-loading {
    display:    none;
    position:   fixed;
    z-index:    9999;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;

    background: rgba(0, 0, 0, .4) url('/assets/img/spinner.svg') 50% 50% no-repeat;
}

body.on-loading {
    overflow: hidden;
}

body.on-loading > .modal-loading {
    display: block;
}

/*
header .navbar {
    border-bottom: 0;
    box-shadow: 0 0 2rem 0  rgb(220, 220, 220);
    padding-left: 30px;
    padding-right: 30px;
}



@media (max-width: 575.98px) {
    body{
        margin-left: 0px;
        margin-right: 0px;
    }

    header .navbar {
        padding-left: 30px;
        padding-right: 30px;
    }
}
*/


.logo, .help-box a,
body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) .logo span.logo-sm  {

    background: linear-gradient(135deg,#8f75da 0,#727cf5 60%);

    color: #ececec;
    font-size: 1.3rem;
    font-weight: bold;

    -webkit-transition: all .4s;
    transition: all .4s;
}

.help-box a{
    background: transparent;
}

.logo:active,
.logo:focus,
.logo:hover,

.help-box a:active,
.help-box a:focus,
.help-box a:hover,
a.active {
    color: #fff !important;
    text-decoration: none;
}



.navbar-custom .topbar-menu .nav-link:active,
.navbar-custom .topbar-menu .nav-link:focus,
.navbar-custom .topbar-menu .nav-link:hover {
    color: #727cf5;
}


.page-header h1{
    font-size: 18px;
    /*margin: 0;
    line-height: 24px;
    */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: inherit;
}



.nowrap{
    white-space: nowrap;
}
/* 
.card {
    margin-bottom: 24px;
    box-shadow: 0 0.46875rem 2.1875rem rgb(63 106 216 / 3%), 0 0.9375rem 1.40625rem rgb(63 106 216 / 3%), 0 0.25rem 0.53125rem rgb(63 106 216 / 5%), 0 0.125rem 0.1875rem rgb(63 106 216 / 3%);

} */

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 0 solid transparent;
    border-radius: .25rem;
}

.btn-noborder{
    border: none;
}

/*
.btn-purple{
    background-color: purple !important;
    color: white !important;
  }

.btn-junglegreen{
    background-color: rgb(8, 177, 140) !important;
    color: black !important;
}

.btn-babyblueeyes{
    background-color: rgb(170, 210, 255) !important;
    color: black !important;
}

.btn-cyan{
    background-color: cyan !important;
    color: black !important;
}

.btn-pink{
background-color: pink !important;
color: black !important;
}

.btn-magenta{
background-color: magenta !important;
color: white !important;
}

.btn-brown{
background-color: brown !important;
color: white !important;
}

.btn-orange{
background-color: orange !important;
color: black !important;
}

.btn-lightgreen{
background-color: rgb(10, 207,151)  !important;
color: black !important;
}

.btn-lightgreen:hover{
    background-color: rgb(10, 207,151,.8) !important;
    color: black !important;
}


.btn-outline-lightgreen{
    border: 1px solid  rgb(10, 207,151) !important;
    background: transparent  !important;
    color:  rgb(10, 207,151) !important;
}

.btn-outline-lightgreen:hover{
    background-color: rgb(10, 207,151) !important;
    color: black !important;
}
*/




/*
th:first-child{

    border-left-color: rgb(222, 226, 230);
    border-left-style: solid;
    border-left-width: 1px;
}

*/

th{

    background-color: #eef2f7  !important;
    border-bottom: 0px none !important;
}

th.caption{
    background-color: transparent !important;
    font-size: 1.2rem;
}


/*
.bg-nav-pills {
    background-color: #eef2f7;
}

.nav-pills>li>a, .nav-tabs>li>a {
    color: #6c757d;
    font-weight: 600;
}
*/
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    border-radius: 0 !important;
}



.login-form{
    width: 350px;
    height: 450px;
}


.coupon-scrool{
    overflow-x: hidden;
    overflow-y: auto;
}


.bodyCertification {
    background-repeat: no-repeat;
}

.landscape {
    width: 678px;
    height: 480px;
    background-size: 463px 327px;
    overflow: hidden;
    /*padding-top: 34px;*/
}

.portrait {
    width: 480px;
    height: 678px;
    background-size: 327px 463px;
    overflow: hidden;
    /*padding-top: 60px;*/
}



.font-green{
    color: green;
}

.font-red:hover{
    color: darkgreen;
}



.font-red{
    color: #fa5c7c;
}

.font-red:hover{
    color: darkred;
}

/*
.badge-success-lighten {
    color: #0acf97;
    background-color: rgba(10,207,151,.18);
}

.badge-warning-lighten {
    color: #ffbc00;
    background-color: rgba(255,188,0,.18);
}

.badge-danger-lighten {
    color: #fa5c7c;
    background-color: rgba(250,92,124,.18);
}

.badge-info-lighten {
    color: #39afd1;
    background-color: rgba(57,175,209,.18);
}
*/

#menu-learner>.list-group-item{
    padding: .2rem 0 !important;
    border: #ccc;
}

select, input[type="text"]:not(.form-control){
    outline: none !important;
    border: 1px solid #dee2e6 !important;
    border-radius: .25rem;
    color: #6c757d;
    padding: .45rem .9rem !important;
    font-size: .9rem;
    font-weight: 400;
    line-height: 1.5;
    background-color: #fff;
    background-clip: padding-box;
}



body[data-leftbar-theme=dark] .leftside-menu .footer-in-header{

    /* background: transparent !important; */

    display: block;
    
    width: 260px;
    position: fixed;
    
    top:auto !important;
    line-height: 12px !important;
    color: #fff;
    font-weight: bold;
}



body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) .footer-in-header{

    background: transparent !important;
    position: absolute !important;
    left: 0;
    top: unset !important;
    bottom: 0 !important;
    transform: rotate(-90deg);

    width: 220px !important;
    margin-left: -80px;
    margin-bottom: 110px !important;
}


td.details-control {
    background: url('/assets/img/plus-solid.svg') no-repeat center center;
    background-size: 14px 14px;
    cursor: pointer;
}

tr.shown td.details-control {
    background: url('/assets/img/minus-solid.svg') no-repeat center center;
    background-size: 14px 14px;
    cursor: pointer;
}

.check-icon{
    color:#727cf5;
}


.card-fullscreen{
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100000;
}


* .hourselect{
    padding: 0px !important;
}

* .minuteselect{
    padding: 0px !important;
}

.fc-license-message{
    display: none !important;
}


table.dataTable thead tr th {
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
}

table.dataTable tbody tr td {
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
}

body[data-leftbar-theme=dark] .leftside-menu .logo:nth-child(2) {
    background: transparent !important;
}

table.dataTable thead>tr>th.sorting{
    padding-right: 20px;
}



.livewebinar{
    background-color: #2b3138 !important;
}

.zoom{
    background-color: #0c63ce !important;
}





.pointer {
    cursor: pointer !important;
}











.stepper{
    display: flex;
    flex-direction: row;
    justify-content: space-around;

    width: 100%;
}

.stepper-node{
    display: flex;
    flex-direction: column;
    
    width: fit-content;
}

.stepper-node>div{
    display: flex;
    flex-direction: row;
}

.stepper-node>div>div:first-child{
    margin-right: 6px;
}

.stepper-node>div:nth-child(2)>div:nth-child(2){
    width: 100%;
}


.stepper-n{
    width: 45px;
    height: 45px;
    font-size: 30px;
    text-align: center;
}

.stepper-txt{
    display: flex;
    align-items: center;

    height: 45px;
    font-size: 14px;
    overflow-wrap: break-word;
    text-align: start;
}

.stepper-btn{
    cursor: pointer;
    width: 45px;
    height: 45px;
    font-size: 16px;
    border-radius: 50%;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    color: rgb(255, 255, 255);
    background-color: rgb(159, 157, 157);
    border: none;
}

.stepper-btn[data-active="true"]{
    border: 2px solid black;
}

.stepper-btn[data-passed="true"]{
    border: 2px solid rgb(159, 157, 157);
    background-color: #313a46;;
}

.stepper-line{
    height: 100%;
    display: flex;
    align-items: center;
}

.stepper-line>span:first-child{
    display: inline-block;
    margin: 0px 2px;

    height: 6px;
    width: 6px;
    border-radius: 3px;

    background-color: rgb(159, 157, 157);
}

.stepper-line>span:nth-child(2){
    display: inline-block;

    margin: 2px 0px;
    
    height: 6px;
    width: 50px;
    
    border-radius: 3px;

    background-color: rgb(159, 157, 157);
}


.nav-profile-img>span:first-child {
    height: 36px;
    width: 36px;
    overflow: hidden;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
}

.nav-profile-img-overlay span:first-child {
    height: 35px;
    width: 35px;
    position: absolute;
}







#notifications_list_container::-webkit-scrollbar {
    width: 6px;
}

#notifications_list_container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

#notifications_list_container::-webkit-scrollbar-track {
    background: transparent;
}





.scrollbar-y::-webkit-scrollbar {
    width: 6px;
}
.scrollbar-y::-webkit-scrollbar-thumb {
    background: #D1D6DB;
    border-radius: 3px;
}
/* Handle on hover */
.scrollbar-y::-webkit-scrollbar-thumb:hover {
    background: #B1B6BB; 
}
.scrollbar-y::-webkit-scrollbar-track {
    background: transparent;
}



.scrollbar-x{
    overflow-x: scroll;
}

.scrollbar-x::-webkit-scrollbar {
    height: 6px;
}

/* Track */
.scrollbar-x::-webkit-scrollbar-track {
    background: #f1f2f2; 
    border-radius: 3px;
}
 
/* Handle */
.scrollbar-x::-webkit-scrollbar-thumb {
    background: #D1D6DB; 
    border-radius: 3px;
}

/* Handle on hover */
.scrollbar-x::-webkit-scrollbar-thumb:hover {
    background: #B1B6BB; 
}



.overflow-y-scroll{
    overflow-y: scroll !important;
}

.overflow-x-scroll{
    overflow-x: scroll !important;
}


.overflow-y-hidden{
    overflow-y: hidden !important;
}

.overflow-x-hidden{
    overflow-x: hidden !important;
}


.leftside-menu .scrollbar-y::-webkit-scrollbar {
    width: 8px;
}
.leftside-menu .scrollbar-y::-webkit-scrollbar-thumb {
    background: var(--bs-secondary);
    border-radius: 3px;
    border: 1px solid var(--bs-dark);
}

body[data-leftbar-compact-mode="condensed"] .leftside-menu .overflow-y-scroll{
    overflow: visible !important;
}

body[data-leftbar-compact-mode="condensed"] .leftside-menu .overflow-x-hidden{
    overflow: visible !important;
}


.side-nav .side-nav-item>a[aria-expanded=true] span.menu-arrow {
    -webkit-transform: rotate(90deg) !important;
    transform: rotate(90deg) !important;
}




.maxw-100{
    max-width: 100%;
}

.maxh-100{
    max-height: 100%;
}



.object-fit-cover{
    object-fit: cover
}




table.dataTable th, .dataTable td { max-width: 200px; min-width: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

table.dataTable td.dt-body-right{
    max-width: unset !important;
}


table.dataTable{
    border-collapse: separate !important; 
    border-spacing: 0 15px !important;

    font-size: .825rem !important;
}


table.dataTable thead tr th{
    /* background-color: var(--bs-primary) !important; */
    background-color: transparent !important;

    color: var(--bs-primary) !important;
    border-bottom: 1px solid var(--bs-primary) !important;

    padding: 8px 10px !important;

    
    overflow: visible !important;
}


table.dataTable thead tr th span{
    border-bottom: 2px solid var(--bs-primary) !important;
    padding: 9px !important;
}



table.dataTable tbody tr{
    background-color: var(--bs-light) !important;

}


table.dataTable tbody tr.even, table.dataTable tbody tr:nth-child(even){
    background-color: transparent !important;
}


table.dataTable tbody tr td.sorting_1{
    background-color: #727cf522 !important;
}



table.dataTable tbody tr td{
    border: unset !important;
    border-top: 1px solid #ddd !important;
    border-bottom: 1px solid #ddd !important;
    padding-top: .75rem !important;
    padding-bottom: .75rem !important;
}

table.dataTable tbody tr td:first-child{
    border-radius: .15rem 0 0 .15rem !important;
    border-left: 1px solid #ddd !important;
    padding-left: .75rem !important;
}


table.dataTable tbody tr td:last-child{
    border-radius: 0 .15rem .15rem 0 !important;
    border-right: 1px solid #ddd !important;
    padding-right: .75rem !important;
}


table.dataTable thead .sorting {
    background-image: url('../img/svg/sort.svg') !important;
    background-size: .825rem .825rem;
}

table.dataTable thead .sorting.sorting_asc {
    background-color: var(--bs-primary);
    background-image: url('../img/svg/sort-up.svg') !important;
    background-size: .825rem .825rem;
}

table.dataTable thead .sorting.sorting_desc {
    background-image: url('../img/svg/sort-down.svg') !important;
    background-size: .825rem .825rem;
}

table.dataTable.no-footer {
    border-bottom: 1px solid var(--bs-primary) !important;
}


table.dataTable tbody tr.even, table.dataTable tbody tr td:has(> .table), table.dataTable tbody tr.even, table.dataTable tbody tr td:has(> .table-responsive){
    padding: 0 !important;
    position: relative;
    overflow: visible;
}

table.dataTable tbody tr.even, table.dataTable tbody tr td .table{
    background-color: white !important;
}
table.dataTable tbody tr.even, table.dataTable tbody tr td .table tr{
    background-color: transparent !important;
}

table.dataTable tbody tr.even, table.dataTable tbody tr td .table tr td{
    border: none !important;
}

table.dataTable tbody tr td .table:before{
    content: ' ';
    border: 1px solid black;
    position: absolute;
    left: 50%;
    top: -11px;
    transform: translateX(-50%);

	width: 0;
	height: 0;
	border-left: 75px solid transparent;
	border-right: 75px solid transparent;
	border-bottom: 10px solid #ddd;
    border-top: 0;

}



.dataTables_wrapper .dataTables_filter input:not(:placeholder-shown) {
    background-color: var(--bs-primary);
    color: white;
    position: relative;
}


.dataTables_filter{
    margin-bottom: 1rem;
}

.dataTables_filter input[type="search"]{
    padding-left: 10px;
}

.dataTables_filter input[type="search"]::-webkit-search-cancel-button{
    
    display: block;
    position:relative;
    height: 16px;
    width: 16px;
    -webkit-appearance: none;

    right: 0;
    
    background-image: url('../img/svg/full_circle_times.svg') !important;  
}












.avatar-content{
    position: relative;
    background-color: var(--bs-primary-h);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  
    border: 1px solid var(--bs-primary);
    border-radius: 50%;
  
    height: 250px;
    width: 250px;
    
  
    display: flex;
    justify-content: center;
    align-items: center;
  
    line-height: 1;
    font-size: 200px;
    font-family: Arial, sans-serif;
    color: white;
}
  
.avatar-content:before{
    content: var(--avatar-letter);
}

.avatar-content-nav{
    height: 37.38px;
    width: 37.38px;
    font-size: 20px;

}

.text-ellipsis{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.w-auto{
    width: auto!important;
}




.bg-circle-pattern{
    background-image: url('/assets/img/bg-circle-pattern.png');
}




.bg-card-paypal, .bg-card-paypal_express{
    background-image: radial-gradient(#01216988, transparent), url('/assets/img/patterns/paypal.png'), radial-gradient(#012169, #0070ba);
}

.border-card-paypal{
    border: 1px solid #0070ba;
}

.border-card-paypal_express{
    border: 1px solid var(--bs-warning);
}
.border-card-paypal_express span{
    color: var(--bs-warning) !important;
}



.bg-card-bank_transfer{
    background-image: radial-gradient(#e0761388, transparent), url('/assets/img/patterns/bank_transfer.png'), radial-gradient(#e07613, #ffaa16);
}
.border-card-bank_transfer{
    border: 1px solid #e07613;
}


.bg-card-no_payment{
    background-image: radial-gradient(#5ca32588, transparent), url('/assets/img/patterns/gift.png'), radial-gradient(#5ca325, #8cd852);

}
.border-card-no_payment{
    border: 1px solid #5ca325;
}



.bg-card-stripe{
    background-image: radial-gradient(#635bffaa, transparent), url('/assets/img/patterns/stripe.png'), radial-gradient(#635bff, #00d4ff)
}
.border-card-stripe{
    border: 1px solid #0048E5;
}



.bg-slide-down{
    animation-name: bg-slide;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes bg-slide {
    0% {
        background-position: 0% 12.5%;
    }
    100% {
        background-position: 0% 150%;
    }
}



.overlay{
    position: absolute;
    top: 0;

    background-color: #0002;

    width: 100%;
    height: 100%;
}

.dropzone-overlay{
    cursor: no-drop;
}


.slide-in-from-left{
    animation-name: slide-in-from-left;
    animation-duration: .4s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
}
@keyframes slide-in-from-left {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0%);
    }
}

.bg-0-to-03{
    opacity: 0;
    animation-delay: .4s;
    animation-name: bg-0-to-03;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes bg-0-to-03 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.auth-fluid-bg-el{
    background-image: url('../img/adminPanelBGeLogos.png'),
    linear-gradient(transparent 55%, var(--bs-primary))
                         !important;
}


.auth-fluid-bg-MFAD{
    background-image: url('../img/adminPanelBGMedicalFAD.png'),
    linear-gradient(transparent 55%, var(--bs-primary))
                         !important;
}