/* Size */
.baseLogoSize{
    width: 111px;
    height: 62.5px;
}
.authentication .company_detail .logo  {
    margin-top: 85px;
    margin-bottom: 0px;
}

.loginLogoSize{
    width: 286px !important;
    height: 120px;
}

.tableImgSize{
    height: 100px;
}

.poweredByLogo{
    z-index: 1;
    margin-top: 7%;
    margin-right: 1%;
}

/* Border */
.noBorder{
    border: 0px !important;
}
.circle{
    border-radius: 50%;
}
.noBorderBottom{
    border-bottom: 0px !important;
}

.noBorderTop{
    border-top: 0px !important;
}
.noBorderLeft{
    border-left: 0px !important;
}
.noBorderRight{
    border-right: 0px !important;
}
.br-1{
    border-right: 1px solid;
}
.borderRaduis-1{
    border-radius: 0.25em;
}

.borderRaduis-2{
    border-radius: 2em;
}
.border-top-radius{
    border-top-left-radius: 0.55rem;
    border-top-right-radius: 0.55rem;
}
.border-bottom-radius{
    border-bottom-left-radius: 0.55rem;
    border-bottom-right-radius: 0.55rem;
}
/* Padding */
.pl-6{
    padding-left: 4rem;
}
.pl-23{
    padding-left: 23px;
}
.p-t-15{
    padding-top: 15px !important;
}
.p-b-10{
    padding-bottom: 10px !important;
}

/* Margin */
.ml-50{
    margin-left: 50%;
}
.ml-40{
    margin-left: 40%;
}
.mr-20{
    margin-right: 20%;
}
.ml-20{
    margin-left: 20%;
}
.mr-10{
    margin-right: 10%;
}
.ml-rev-4{
    margin-left: -4rem;
}
.ml-13{
    margin-left: 13.7%;
}

.max-width-50{
    max-width: 50%;
}
.mt-15{
    margin-top: 15%;
}
.mt-5-percent{
    margin-top: 5%;
}
.m-auto{
    margin: auto;
    display: block;
}
.mb-2rem{
    margin-bottom: -2rem;
}
.mt-reverse-9{
    margin-top: -9rem;
}
.mt-reverse-8-5{
    margin-top: -8.5rem;
}
.mt-reverse-075{
    margin-top: -0.75rem;
}
.mt-reverse-1{
    margin-top: -1rem;
}
.mt-reverse-2{
    margin-top: -2rem;
}
.ml-reverse-1{
    margin-left: -1rem;
}
.ml-reverse-2{
    margin-left: -2rem;
}
.mr-reverse-4{
    margin-right: -1.5rem;
}
.input-group-addon i {
    margin-left: 42%;
}

/* Position */
.top-15{
    top: 15%;
}

.disable-list{
    list-style: none;
}
.end-0{
    position: absolute;
    right: 0;
}
.left-48{
    left: 48%;
}
.modal-backdrop{
    z-index: 0 !important;
}

.fixedTop{
    top: 15%;
    position: absolute;
    right: 0;
    z-index: 1030;
}


/* Width */
.w-0{
    width: 0%;
}
.w-3{
    flex-basis: 0;
    flex-grow: 1;
    max-width: 3%;
}
@media screen and (min-width: 1950px) {
    .sidebar .container {
        max-width: 1170px;
    }
}


.w-15{
    width: 15%;
}

.w-20{
    width: 20%;
}

.w-30{
    width: 30%;
}

.w-40{
    width: 40%;
}

.w-60{
    width: 60%;
}

.w-70{
    width: 70%;
}
.w-80{
    width: 80%;
}
.mw-800{
    max-width: 800px;
}
.mw-900{
    max-width: 900px;
}

/* height */
.h-50-px{
    height: 50px;
}
.h-80{
    height: 80%;
}
.h-150{
    height: 150px;
}
.h-570{
    height: 570px;
}

.h-312{
    height: 312px;
}

/* font */
.fs-1{
    font-size: 1em;
}
.fs-2{
    font-size: 1.25em;
}

.fs-3{
    font-size: 2em;
}

.fs-24{
    font-size: 24px !important;
}
.font-150{
    font-size: 150px;
}

.fw-600{
    font-weight: 600 !important;
}
.fw-500{
    font-weight: 500 !important;
}
.fw-400{
    font-weight: 400 !important;
}
.fw-900{
    font-weight: 900 !important;
}
/* Spacing */
.spaceEven{
    justify-content: space-evenly;
}

.noLetterSpacing{
    letter-spacing: 0px !important;
}

/* Color */
.col-error{
    color: #FF1D25;
}
.col-success{
    color: #54d824;
}

.col-lango{
    color: #b11980 !important;
}
.bg-lango{
    background-color: #b11980 !important;
}
.a-col-cyan label::before{
    border: 1px solid #49c5b6;
}
.col-dark-purple{
    color: #6C6AAB;
}
.col-dark-gray{
    color: #44444F;
}
.bg-dark-purple{
    background-color: #6C6AAB;
}
.bg-dark-gray{
    background-color: #44444F;
}
.col-lango-link{
    color: #1715dc;
}

.col-lango-light-green{
    color: #7ED321;
}

.col-lango-red{
    color: #ED1C24;
}
.col-lango-close{
    color: #F44336;
}

.col-lango-check{
    color: #4CAF50;
}

.user-active{
    color: #18ce0f;
    background-color: #e6e6f2;
}

.user-inactive{
    color: #ce3900;
    background-color: #e6e6f2;
}

.ph-white::placeholder{
    color: white;
}

.authentication::before{
    background-color:#0f0f0e;
}

.border-cyan{
    border-color: cyan !important;
}
.border-blue{
    border-color: #60bafd !important;
}

.highlight-column{
    background-color: rgba(0,0,0,.075);
}

/* DataTable */

/* .themedTable .dataTables_filter{
    display: none;
} */

.themedTable .col-sm-12{
    padding: 0px;
}

/* .themedTable .dataTables_paginate{
    display: none;
} */

.themedTable .dataTables_length{
    text-align: left !important;
    padding-left: 2%;
}

.themedTable .dataTables_filter{
    padding-right: 2%;
}

table.dataTable {
    border-collapse: collapse !important;
}
.dataTables_length{
    display: none;
}

.student_table .dataTables_filter{
    display: none;
}
.student_table .dataTables_length{
    display: none;
}
/* .dataTables_length{
    opacity: 0 !important;
    display: none !important;
} */

.dataTables_wrapper .row{
    margin: 0px;
}

.dataTables_info{
    opacity: 0 !important;
    display: none !important;
}

.table-bordered thead th {
    border-bottom-width: 0px !important;
}

table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_desc_disabled:before {
    display: none;
}
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after {
    display: none;
}

.draggable-table-icon:hover{
    cursor:pointer;
}
.draggable-table .dataTables_empty{
    border: 0;
}

.exercise-table-bordered{
    border: 1px solid #dee2e6 !important;
}

/* row per page select box */

.rowSelect .bootstrap-select .dropdown-toggle{
    display: none !important;
}
.rowSelect .bootstrap-select .dropdown-menu{
    display: none !important;
}
.rowSelect select{
    opacity: 1 !important;
    display: block !important;
    width: auto !important;
    left: 0%;
}

/* modal */
section.content{
    z-index: auto !important;
}

.add-exercise.modal-dialog{
    max-width: 1500px;
}

/* boot strap select */
.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
    width: 100%;
}
.bootstrap-select .btn {
    color: #0f0f0e;
}

/* Disable State */
.form-control[readonly]{
    color: rgb(0, 0, 0) ;
    background-color: #ffffff;
    cursor: auto;
}

.datetimepicker[disabled]{
    color: rgb(0, 0, 0) ;
    background-color: #ffffff;
    cursor: auto;
}

/* Disable padding from  product detail*/
.preset-section .product_details{
    padding-top: 0%;
}

/* Tag setting */
.demo-tagsinput-area .tag{
    padding: 0.75em;
    font-size: 1em;
    margin: 0.5em;
}

/* Progress */
.progress{
    height: 20px;
}

/* Slider */

.slider-container{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.value-container{
    margin-bottom: 25px;
}


.slider {
    width: 100%;
    height: 15px;
    -webkit-appearance: none;
    background-color: grey;
    border-radius: 25px;
    box-shadow: 2px 3px 13px -3px grey;
    -webkit-box-shadow: 2px 3px 13px -3px grey;
    -moz-box-shadow: 2px 3px 13px -3px grey;
    transition: background 450ms ease-in;

}

.slider::-webkit-slider-thumb {
    appearance: none;
    cursor: pointer;
    width: 20px;
    height: 20px;
    border-radius: 50%; 
    background: #ffffff;
    border: 7px solid #ffffff;
    box-shadow: 2px 3px 13px -3px grey;
    -webkit-box-shadow: 2px 3px 13px -3px grey;
    -moz-box-shadow: 2px 3px 13px -3px grey;
}

.audio-slider{
    height: 5px;
}

/* Check Box */
.school.checkbox input[type="checkbox"]:checked+label::after {
    border-color: #b11980 !important;
    background: #b11980 !important;
}

.school label::before{
    background: #b11980 !important;
    opacity: 0.3;
}

/* Radio */
.lango-radio.radio input[type="radio"]:checked+label::after {
    width: 19px;
    height: 19px;
    background-color: #a27ce6;
    border: 1px solid #979797;
    top: 3px;
    left: 3px;
    opacity: 1;
}

/* Cards */
.product_item .product_details {
    padding-top: 70%;
}

.selectable {
    cursor: pointer;
    background-color: #f4f7f6;
    border-radius: 5px;
}

.preset-card{
    transition: 0s;
    border: solid #fff;
}

.audio-player{
    display: flex;
    align-items: center;
    gap: 10px;
}

.play-pause-btn{
    background-color: #fff;
    border: none;
    cursor: pointer;
}

.play-pause-icon {
    font-size: 24px;
}

.audio-progress-bar {
    width: 100%;
    height: 5px;
    -webkit-appearance: none;
    appearance: none;
    background-color: #eee;
    border-radius: 5px;
    outline: none;
}

.audio-progress-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #333;
    cursor: pointer;
}
/* Text Area */
textarea.form-control{
    border: 1px solid #E3E3E3;
    border-radius: 25px;
}
textarea.form-control:focus, textarea.form-control:active {
    border: 1px solid #E3E3E3;
}
.border-lango{
    border-color: #b11980 !important;
}
.border-grey{
    border-color: #E3E3E3 !important;
}
.border-purple{
    border-color: #a27ce6  !important;
}

/* filter */
.filter button{
    border-radius: 0.5rem !important;
    border-color: #979797 !important;
}

.filter button:hover{
    border-color: #e3e3e3 !important;
}

#performanceLegend {
    height: 50px;
}
.performanceLegendLabel{
    display: inline-block;
    padding: 0px 30px 15px 0px;
    position: relative;
}
.performanceLegendCircle{
    padding-left: 4px;
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 4px;
}

.overflow-4 {
    height: 440px; /* Set the desired height */
    overflow-x: hidden;
    overflow-y: auto; /* Set the overflow property to "hidden" */
}
.show-overflow {
    overflow-x: hidden;
    overflow-y: auto;
}

.bootstrap-tagsinput input {
    pointer-events: none;
}

/* Loading */
.loading-circle {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #a27ce6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Cursor */
.pointer{
    cursor: pointer;
}

/* Icons */
.zmdi-attachment {
    transform: rotate(-45deg);
}

/* Arrow progress bar */
.rectangle {
    height: 12px;
}
.circle-container{
    position: absolute;
    right: 0;
    top: -6px;
    z-index: 1;
    overflow: visible;
}
.outer-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: -10px;
}
.inner-circle {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #44444F;
    display: flex;
    justify-content: center;
    align-items: center;
}
.arrow-container{
    position: absolute;
    right: -23px;
    top: -12px;
    z-index: 1;
    overflow: visible;
}
.circle-label{
    position: absolute;
    top: 30px;
    left: -50px;
    width: 100px;
    text-align: center;
}
.arrow-container-date-text{
    color: #92929D;
}

/* message */
.message-box{
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
}
.alert.alert-success{
    background-color: rgb(24 206 15);
}
.alert.alert-danger{
    background-color: rgb(255 54 54);
}

.form-group input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
}

/* Style for the switch container */
.switch-container {
    display: inline-block;
    position: relative;
    width: 50px; /* Adjust the width as needed */
    height: 24px; /* Adjust the height as needed */
    background-color: #ccc;
    border-radius: 15px; /* Make it round */
}

/* Style for the switch handle */
.switch-handle {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px; /* Adjust the handle width as needed */
    height: 20px; /* Adjust the handle height as needed */
    background-color: #fff;
    border-radius: 50%; /* Make it round */
    transition: transform 0.3s;
}

/* Style for the checkbox input (hidden) */
.checkbox-input {
    display: none;
}

/* Style for the checked state of the switch */
.checkbox-input:checked + .switch-container .switch-handle {
    transform: translateX(25px); /* Adjust the handle's position */
    
}

.checkbox-input:checked + .switch-container {
    background-color: #a27ce6; /* Background color when the switch is on */
}

@media (max-width: 1169px) {
.sidebar .slimScrollDiv, .sidebar .list {
    height: 8vh !important;
}
}