/*
Name: 			Theme Base
Written by: 	Okler Themes - (http://www.okler.net)
Theme Version: 	2.1.1
*/
@import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800');
:root {
    /* Color */
    --primary: #3acb8c;
    --primary-light: rgba(58, 203, 140, 0.49);
    --primary-hover: #3acb8c40;
    --secondary: #34b77e;
    --danger: #ff5247;
    --danger-light: rgba(255, 82, 71, 0.49);
    --modal: #151618;
    --card: #151618;
    --white: #ffffff;
    --black: #000000;
    --black-light: rgba(0, 0, 0, 0.7);
    --placeholder: #5a5a5a;
    --white-border: rgba(255, 255, 255, 0.2);
    --light-white: rgba(255, 255, 255, 0.6);
    --border-dark: #303437;
    --info: #008897b3;
    --icon-hover: #ffffff2b;
    --warning: #ffe20059;
    --background-light: #21262d;
    /* Typography */
    --small: 13px;
    --regular: 14px;
    --medium: 16px;
    --large: 24px;
}

html,
body {
    background: #232323;
    width: 100%;
}

body {
    color: var(--white);
    font-family: "Open Sans", Arial, sans-serif;
    margin: 0;
    font-size: var(--regular);
    height: calc(100vh - 80px);
}

p {
    margin: 0;
}

ul {
    padding: 0;
}
.delete-icon
{
    border: none;
    width: 40px;
    border-radius: 50%;
    height: 40px;
    margin-left: 10px;
}
.space-between-img-title
{
    margin: 20px 0px;
    align-items: center !important;
}
.space-between-img-title .title{
    margin-bottom: 0px !important;
}
/* time picker */
.popover{
    background-color: var(--card);
    width: 200px
}
.popover-body{
    border-bottom: none !important;
}
.timepicker-popover input::selection{
    background: black;
    color: white;
}
.keyboard-input td {
    color: white;
}
.popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.popover-header .close{
    color: #FFF;
}
.btn[title="Cancel"]{
    background-color: rgb(163 50 50 / 84%);
}
.btn[title="OK"]{
    background-color: var(--primary-light);
}
.invisible{
    display: none;
}
.popover .arrow{
    display: none;
}
.popover-header::before {
    border-bottom: none !important;
}
.timepicker-popover .btn-link:hover {
    background-color: #17222d !important;
}
.timepicker-popover .btn{
    margin-top: 1.5px;
}
#startTimePicker-picker-content>:nth-child(3){
    margin-top: 10px;
}



/* Selection */
::selection {
    color: var(--white);
    background: var(--primary-light);
}

.spinner-border-lg {
    width: 7rem;
    height: 7rem;
    vertical-align: -0.125em;
}

.spinner-border-sm {
    width: 1.1rem;
    height: 1.1rem;
}
#slotListTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before
{
display: none;
}
@keyframes spinner-border {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

#main-loader {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3001;
    background: rgb(0 0 0 / 85%);
    backdrop-filter: blur(3px);
}

#main-loader .loader-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 18px;
    height: 100%;
}

#main-loader .loader-content .loader-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    color: var(--white);
    opacity: 0.8;
}

#main-loader .loader-content .loader-box svg {
    position: absolute;
}

#main-loader.content-loader {
    background: #151618ed;
    border-radius: 10px;
    position: absolute;
    z-index: 2000;
}

#main-loader.content-loader .spinner-border {
    width: 5rem;
    height: 5rem;
}
#main-loader .loaderSpinner{
  display: inline-block;
  width: 7rem;
  height: 7rem;
  vertical-align: -.125em;
  border: .25em solid currentcolor;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: .75s linear infinite spinner-border;
  animation: .75s linear infinite spinner-border
}

/* Component */

a {
    color: var(--primary);
}

a.link-secondary {
    color: var(--light-white);
}

a:hover,
a:focus {
    color: var(--secondary);
}

a:active {
    color: var(--secondary);
}

a.text-light:focus,
a.text-light:hover {
    color: var(--white) !important;
}

.text-danger {
    color: var(--danger);
}

.text-primary {
    color: var(--primary) !important;
}

.text-primary {
    color: var(--primary) !important;
}

.text-primary-light {
    color: var(--primary-light) !important;
}

.text-light {
    color: var(--light-white) !important;
}

.text-hover:hover,
.text-hover:hover i {
    color: var(--primary) !important;
}

.border-primary {
    border: 1px solid var(--primary) !important;
}

.border-primary-md {
    border: 2px solid var(--primary) !important;
}

.border-secondary {
    border: 1px solid var(--secondary) !important;
}

.border-dark {
    border: 1px solid var(--border-dark) !important;
}

.border-danger {
    border: 1px solid var(--danger) !important;
}

.border-danger-md {
    border: 2px solid var(--danger) !important;
}

.border-dark-md {
    border: 2px solid var(--border-dark) !important;
}

.img-border {
    border-radius: 15px;
    box-shadow: 0 0 5px 0px var(--primary);
}

.back-primary {
    background: var(--primary) !important;
}

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

.back-secondary {
    background: var(--secondary);
}

.back-black {
    background: var(--black) !important;
}

.back-card {
    background: var(--card) !important;
}

.card-frame {
    border: 1px solid var(--primary);
    border-radius: 15px;
}

.dark-frame {
    border: 1px solid var(--border-dark);
    border-radius: 15px;
}

.max-1024 {
    max-width: 1024px;
}

.max-600 {
    max-width: 600px;
}

.w-max {
    width: max-content;
}

.w-fit {
    width: fit-content;
}

.empty-text {
    text-align: center;
    padding: 50px;
    font-size: 24px;
    color: var(--light-white);
}

.modal-open .tooltip {
    z-index: 2500;
}

.tooltip .tooltip-inner {
    background-color: #000c;
    border-radius: 6px;
    border: 1px solid var(--border-dark) !important;
}

.ui-tooltip {
    background-color: #000c;
    border-radius: 6px;
    padding: 5px 10px;
    border: 1px solid var(--border-dark) !important;
    box-shadow: none;
}

.ui-tooltip .ui-tooltip-content {
    color: var(--white);
}

.table {
    border-radius: 15px;
    overflow: hidden;
    background: var(--black);
}

.table-bordered,
.table-bordered th,
.table-bordered td,
.table td {
    border: 1px solid #6c7072;
}

.table thead th {
    border-bottom: 2px solid #6c7072;
}

.rightAnswer {
    background: var(--primary-light);
    border-radius: 5px;
}

.wrongAnswer {
    background: var(--danger-light);
    border-radius: 5px;
}

/* Dividers */
hr {
    border: 0;
    height: 1px;
    background-image: -webkit-gradient(linear,
            right top,
            left top,
            from(rgba(0, 0, 0, 0)),
            color-stop(rgba(0, 0, 0, 0.2)),
            to(rgba(0, 0, 0, 0)));
    background-image: linear-gradient(to left,
            rgba(0, 0, 0, 0),
            var(--secondary),
            rgba(0, 0, 0, 0));
    margin: 22px 0 22px 0;
}

hr.none {
    height: 2;
    background-image: none;
}

/* Loader */

#loader {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}

#loader span {
    position: absolute;
    display: inline-block;
    width: 70px;
    height: 70px;
    border-radius: 100%;
    background: var(--primary);
    -webkit-animation: loader 1.5s linear infinite;
    animation: loader 1.5s linear infinite;
}

#loader span:last-child {
    animation-delay: -0.9s;
    -webkit-animation-delay: -0.9s;
}

.loader {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    position: absolute;
    height: 100%;
    z-index: 2000;
    margin: 0 !important;
    background: rgb(0 0 0 / 80%);
}

.loader span {
    position: absolute;
    display: inline-block;
    width: 70px;
    height: 70px;
    border-radius: 100%;
    background: var(--primary);
    -webkit-animation: loader 1.5s linear infinite;
    animation: loader 1.5s linear infinite;
}

.loader span:last-child {
    animation-delay: -0.9s;
    -webkit-animation-delay: -0.9s;
}

@keyframes loader {
    0% {
        transform: scale(0, 0);
        opacity: 0.8;
    }

    100% {
        transform: scale(1, 1);
        opacity: 0;
    }
}

@-webkit-keyframes loader {
    0% {
        -webkit-transform: scale(0, 0);
        opacity: 0.8;
    }

    100% {
        -webkit-transform: scale(1, 1);
        opacity: 0;
    }
}

/* Notification */

.pnotify-container {
    padding: 10px 14px !important;
    color: var(--white) !important;
    border-radius: 10px;
    width: 500px;
}

.pnotify-container.material-success {
    background-color: #00673a;
}

.pnotify-container.material-error {
    background-color: #730000;
}

.pnotify-container .pnotify-icon.material-icon {
    margin-top: 2px;
}

.pnotify-container .pnotify-text {
    text-align: right;
}

.pill {
    background: var(--primary-hover);
    color: var(--white);
    padding: 5px 18px;
    font-size: 16px;
    border-radius: 30px;
}

.pill-sm {
    padding: 4px 15px;
    font-size: 13px;
}

.pill-primary-light {
    background: var(--primary-hover);
}

.pill-primary {
    background: var(--primary-light);
}

.pill-secondary {
    background: #2e86c166;
}

.pill-warning {
    background: var(--warning);
}

.pill-danger {
    background: var(--danger-light);
}

.pill-extracting{
    background: #a78521;
}

.pill-processing{
    background: #1d6383;
}

.pill-black {
    background: #767676;
}

.pill-white {
    background: rgb(86 101 115 / 40%);
}

/* Buttons  */

.button {
    border: 1px solid var(--black);
    border: none;
    font-size: var(--medium);
    font-weight: 600;
    padding: 0.7rem 1rem 0.7rem 1rem;
    border-radius: 8px;
    transition: 0.5s;
    cursor: pointer;
    outline: none;
    text-decoration: none;
    color: var(--white) !important;
}

.button:focus,
.button.focus,
.button:hover {
    outline: none;
    text-decoration: none;
}

.button.disabled,
.icon.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.button-primary {
    background-color: var(--primary-light);
}

.button-primary:hover,
.button-primary.hover {
    background-color: var(--secondary);
}

.button-primary:active,
.button-primary.active,
.show>.button-primary.dropdown-toggle {
    background-color: var(--primary);
    background-image: none;
}

.button-secondary {
    border: 1px solid var(--primary-light);
    background-color: transparent;
    color: var(--primary);
}

.button-secondary:hover,
.button-secondary.hover {
    background-color: var(--primary-light);
}

.button-secondary:active,
.button-secondary.active,
.show>.button-secondary.dropdown-toggle {
    background-color: var(--primary-light);
    background-image: none;
}

.button-danger {
    background-color: var(--danger-light);
}

.button-danger:hover,
.button-danger.hover {
    background-color: var(--danger);
}

.button-active {
    background: var(--info);
    color: var(--white);
}

.button-active:hover,
.button-active.hover {
    background-color: #008897ec;
    color: var(--white);
}

.button-light {
    background: transparent;
    padding: 7px 8px;
    color: var(--light-white) !important;
    border: 2px solid var(--border-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

.button-light:hover,
.button-light.hover {
    background: var(--primary-light);
    color: var(--white) !important;
    border-color: transparent;
}

.button-close {
    background: transparent;
    color: var(--light-white);
    border: 2px solid var(--border-dark) !important;
    border-radius: 99px;
    width: 32px;
    height: 32px;
    font-size: 15px;
    transition: 0.5s;
    cursor: pointer;
}

.button-close:hover,
.button-close.hover {
    background: var(--primary-light);
    color: var(--white);
    border-color: var(--primary-hover) !important;
}

.button-close:focus {
    outline: none;
}

.button-primary-light {
    background-color: var(--primary-light);
}

.button-primary-light:hover,
.button-primary-light.hover {
    background-color: var(--primary);
}

.button-primary-light:active,
.button-primary-light.active {
    background-color: var(--primary);
    background-image: none;
}

.icon {
    background: transparent;
    border: none;
    color: var(--light-white);
    line-height: 0;
    transition: all 0.3s;
    border-radius: 50%;
}

.icon-button,
.icon-button-text {
    padding: 10px;
}

.icon-button:hover {
    border-radius: 50%;
    background: var(--icon-hover);
}

.icon-button-primary:hover {
    background: var(--primary-hover) !important;
    color: var(--light) !important;
}

.icon-button-danger:hover {
    background: var(--danger-light);
    color: var(--light) !important;
}

.icon-button-warning:hover {
    background: var(--warning) !important;
    color: var(--light) !important;
}

.icon-button-text:hover {
    border-radius: 10px;
    background: var(--icon-hover);
}

/* Toggle Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 57px;
    height: 30px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border-dark);
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

.switch .slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: var(--black);
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

.switch input:checked+.slider {
    background-color: var(--primary-light);
}

.switch input:checked+.slider:before {
    background-color: var(--white);
}

.switch input:focus+.slider {
    box-shadow: 0 0 1px var(--primary-light);
}

.switch input:checked+.slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.switch .slider.round {
    border-radius: 34px;
}

.switch .slider.round:before {
    border-radius: 50%;
}

/* Toggle Switch End */

.alert {
    border: none;
    border-radius: 10px;
}

.alert-info {
    background: var(--info);
    color: var(--white);
}

.alert-warning {
    background: var(--warning);
    color: var(--white);
}

.alert-block {
    background: var(--danger-light);
    color: var(--white);
}

.alert-info-success {
    background: var(--primary-light);
}

.alert-info-danger {
    background: var(--danger-light);
}

/* Accordion */

#accordion .card {
    margin-bottom: 15px;
}

#accordion .card:last-child {
    margin-bottom: 0;
}

#accordion .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-radius: 15px !important;
}

#accordion .card-header .title {
    margin: 0;
    transition: all 0.1s;
}

#accordion .card:has(> .collapse.show) .card-header .title {
    color: var(--primary);
}

#accordion .card-header .icon {
    width: 30px;
    height: 30px;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--placeholder);
}

#accordion .card-header .icon:hover {
    color: var(--light-white);
}

#accordion .card-header .icon.collapsed {
    transform: rotate(180deg);
}

/* Select 2 */

.select2 .select2-selection {
    padding: 0.7rem 1rem 0.7rem 1rem;
    height: 50px;
    border-radius: 8px !important;
    background: transparent;
    border: 2px solid var(--white-border);
    box-shadow: none !important;
}

.select2 .select2-selection:focus {
    border-color: var(--primary);
}

.select2 .form-select-icon {
    padding: 0.7rem 2.3rem 0.7rem 1rem;
}

.select2 .select2-selection[aria-expanded="true"] {
    border: 2px solid var(--primary-light);
}

.select2 .select2-selection .select2-selection__rendered {
    padding-right: 0;
    padding-left: 0 !important;
}

.select2 .select2-selection .select2-selection__rendered .select2-selection__placeholder {
    color: var(--placeholder);
}

.select2 .select2-selection__arrow {
    top: 11px !important;
    right: 15px !important;
}

.select2 .select2-selection__rendered {
    padding: 0;
    font-size: 16px;
    color: var(--white) !important;
    line-height: unset !important;
}

.select2-dropdown {
    border-radius: 8px !important;
    overflow: hidden;
    border: 2px solid var(--primary-light) !important;
    background: var(--black);
    color: #fff;
    z-index: 2002;
    margin-top: 5px;
}

.select2-dropdown .select2-results__option {
    margin: 4px 8px;
    border-radius: 8px;
    padding: 8px 10px;
}

.select2-dropdown .select2-results__options::-webkit-scrollbar {
    display: none;
}

.select2-dropdown .select2-results__options .select2-results__option--highlighted {
    background: var(--primary-hover);
}

.select2-dropdown .select2-results__options .select2-results__option[aria-selected="true"] {
    background: var(--primary-light);
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border: solid var(--light-white) !important;
    border-width: 0 2px 2px 0 !important;
    display: inline-block;
    padding: 3px;
    top: 8px;
    margin: 0;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transition: all 0.3s;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    top: 10px;
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.drawer .select2.select2-container {
    max-width: 400px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    background: transparent;
    border-radius: 8px;
    border: 2px solid var(--white-border);
    font-size: var(--small);
    padding: 0.4rem 1rem 0.4rem 1rem;
    color: #fff;
    outline: none;
}

/* Date Picker */
.ui-datepicker {
    width: auto;
    background: var(--black);
    color: var(--light-white) !important;
    border-radius: 10px !important;
    border: 2px solid var(--primary-light) !important;
    padding: 15px;
    background-color: #000000 !important;

}

.certificate_date {
    left: 297.578px !important;
}

.ui-slider-horizontal {
    height: 0.5em !important;
    background: var(--primary-light) !important;
    margin-bottom: 20px !important;
}

.ui-slider-handle,
.ui-slider-handle:hover {
    border: 2px solid var(--primary) !important;
    background: var(--primary) url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x !important;
}

.ui-datepicker-close {
    background-color: var(--danger) !important;
    border: 1px solid var(--danger) !important;
    color: #fff !important;
}

.ui-datepicker-current {
    background-color: var(--primary-light) !important;
    border: 1px solid var(--primary-light) !important;
    color: #fff !important;
    opacity: 1 !important;
}

.ui-datepicker .ui-datepicker-title,
.ui-timepicker-rtl dl dt,
.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input {
    color: #fff !important;
}

.ui-datepicker td span,
.ui-datepicker td a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: none !important;
    color: var(--light-white) !important;
}

.ui-datepicker .ui-datepicker-calendar {
    margin-top: 10px;
}

.ui-datepicker td a.ui-state-hover {
    background-color: var(--primary-hover) !important;
}

.ui-datepicker a.ui-state-highlight,
.ui-datepicker .ui-widget-content a.ui-state-highlight,
.ui-datepicker .ui-widget-header a.ui-state-highlight {
    background-color: var(--warning) !important;
}

.ui-datepicker a.ui-state-active {
    color: var(--white) !important;
    background-color: var(--primary-light) !important;
}

.ui-datepicker .ui-widget-header {
    background: transparent;
    border: none;
}

.ui-datepicker .ui-widget-header .ui-icon {
    filter: invert(1) brightness(0.5);
    width: 20px;
    height: 20px;
    left: 0.5em;
    top: 0.3em;
    position: relative;
}

.ui-datepicker .ui-widget-header .ui-corner-all {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

.ui-datepicker .ui-widget-header .ui-corner-all.ui-state-hover {
    background-color: var(--primary-hover);
}

.ui-datepicker .ui-widget-header .ui-corner-all.ui-state-hover .ui-icon {
    filter: invert(1) brightness(1);
}

.ui-datepicker .ui-widget-header .ui-datepicker-next .ui-icon {
    background-image: url("/img/datepicker-prev.svg");
    left: 3px;
}

.ui-datepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-next:hover {
    left: -4px;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-prev:hover {
    /* right: -4px; */
    left: 88% !important;
}

.ui-datepicker .ui-widget-header .ui-datepicker-prev .ui-icon {
    background-image: url("/img/datepicker-next.svg");
}

.ui-datepicker .ui-icon-circle-triangle-w,
.ui-datepicker .ui-icon-circle-triangle-e {
    background-position: unset;
}

.ui-datepicker .ui-datepicker-title select {
    visibility: hidden;
    min-height: 35px;
}

.ui-datepicker .ui-datepicker-title .select2-container {
    margin: 0 5px;
}

.ui-datepicker .ui-datepicker-title .select2 .select2-selection {
    padding: 0.4rem 0.6rem;
    height: 35px;
}

.ui-datepicker .ui-datepicker-title .select2-selection__rendered {
    padding-right: 0;
    padding-left: 14px;
    line-height: 18px !important;
    font-size: 14px !important;
}

.ui-datepicker .select2 .select2-selection__arrow {
    top: 4px !important;
}

/* Date range Picker */
.daterangepicker {
    background-color: var(--black);
    border-radius: 10px;
    border: 2px solid var(--border-dark);
}

.daterangepicker:before,
.daterangepicker:after {
    display: none;
}

.daterangepicker .ranges ul {
    padding: 10px;
}

.daterangepicker .ranges li {
    border-radius: 8px;
    margin-bottom: 8px;
}

.daterangepicker .ranges li:hover {
    background-color: var(--primary-hover);
}

.daterangepicker .ranges li.active {
    background-color: var(--primary-light);
}

.daterangepicker.show-ranges.ltr .drp-calendar.left {
    border-left: none;
}

.daterangepicker .drp-calendar {
    max-width: none;
}

.daterangepicker .drp-calendar.left {
    padding: 15px 0 15px 15px;
}

.daterangepicker .drp-calendar.right {
    padding: 15px 15px 15px 10px;
}

.daterangepicker .drp-calendar.left .calendar-table {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.daterangepicker .drp-calendar.right .calendar-table {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.daterangepicker .calendar-table {
    border: none;
    border-radius: 10px;
    background-color: var(--modal);
    padding: 15px;
}

.daterangepicker .calendar-table table {
    border-collapse: separate;
    border-spacing: 0 5px;
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
    min-width: 35px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
}

.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
    background-color: transparent;
}

.daterangepicker td.in-range {
    background-color: var(--primary-hover);
    color: var(--white);
    border-radius: 0;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: var(--primary-light) !important;
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
    background-color: var(--primary-hover);
}

.daterangepicker td.start-date {
    border-radius: 50% 0 0 50%;
}

.daterangepicker td.end-date {
    border-radius: 0 50% 50% 0;
}

.daterangepicker td.start-date.end-date {
    border-radius: 50%;
}

/* Scroll to Top */
html .scroll-to-top {
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    font-size: 15px;
    background: var(--primary-light);
    border-radius: 50%;
    color: var(--white);
    opacity: 0;
    position: sticky;
    bottom: 0;
    right: -4px;
    margin-right: -28px;
    text-decoration: none;
    min-height: 35px;
    min-width: 35px;
    width: max-content;
    z-index: 1000;
    transform: scale(0.8);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;    
    float: right;
}

html .scroll-to-top.visible {
    transform: scale(1);
    opacity: 0.75;
    visibility: visible;
}

html .scroll-to-top:hover {
    opacity: 1;
}

html .scroll-to-top span {
    display: inline-block;
    padding: 0 5px;
}

/* Modal */

.modal {
    z-index: 3000;
    background-color: #2d2d2dd1;
    backdrop-filter: blur(5px);
}

@media (min-width: 768px) {
    .modal-xxl {
        width: 90%;
        max-width: 1400px;
    }
}

.modal-alert {
    border: 2px solid var(--border-dark);
    width: max-content;
    margin: 20px auto;
    padding: 5px;
    color: var(--light-white);
    border-radius: 50%;
}

.modal-open .select2-dropdown {
    z-index: 3001;
}

.modal-primary .modal-content {
    border-radius: 15px;
    background: var(--modal);
    transform: scale(0.9);
    transition: transform 0.2s ease;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.modal-primary.show .modal-content {
    transform: scale(1);
}

.modal-primary .modal-content .modal-header {
    border-bottom: 1px solid var(--border-dark);
}

.modal-primary .modal-content .modal-footer {
    border-top: 1px solid var(--border-dark);
}

.modal-primary .modal-content .modal-header .title {
    font-size: var(--large);
    margin: 0;
}

.modal-primary .modal-content .modal-header .modal-title {
    font-size: var(--large);
    margin: 0;
}

.modal-primary .modal-content .modal-body {
    scroll-behavior: smooth;
    margin: 3px;
}

.modal-primary .modal-content .modal-body .modal-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
}

.modal-primary .modal-content .modal-body .nav.nav-tabs {
    position: sticky;
    top: 0;
    z-index: 1;
    width: auto;
    box-shadow: 0 -2px 0px 16px #151618;
    border-radius: 0;
}

.modal-fullscreen {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
}

.modal-fullscreen .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
}

.modal-fullscreen .modal-content .modal-body {
    overflow: auto;
}

/* Drawer */
.drawer {
    border-right: none;
    background: transparent;
    box-shadow: 20px 0px 25px -5px rgba(0, 0, 0, 0.1), 8px 0px 10px -6px rgba(0, 0, 0, 0.1);
    background: transparent;
}

.drawer-content {
    background-color: var(--black);
    color: var(--white);
}

.drawer-header {
    padding: 20px;
    border-bottom: 1px solid var(--white-border);
    position: relative;
}

.drawer-header>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.drawer-title {
    font-size: 24px;
}

.drawer-body {
    padding: 20px;
}

.drawer-footer {
    padding: 20px;
    border-top: 1px solid var(--white-border);
}

.footer-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.drawer-backdrop {
    background-color: #2d2d2dd1;
    backdrop-filter: blur(5px);
}

.drawer .drawer-error {
    position: absolute;
    bottom: -30px;
    left: 0;
    right: 0;
    z-index: 1;
    background: #730000;
    padding: 8px 20px;
    border-radius: 8px;
    width: max-content;
    margin: 0 auto;
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.3s ease;
}

.drawer .drawer-error.show {
    bottom: -45px;
    opacity: 1;
    transform: scale(1);
}

/* Popover */

.popover {
    max-width: 450px;
    z-index: 3000;
    background-color: #000000d9;
    border-radius: 10px;
    border: 2px solid var(--modal);
}

.popover-header {
    background-color: #000000d9;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom: none;
}

.popover .arrow::before,
.popover .arrow::after {
    border-left-color: var(--border-dark);
    border-right-color: var(--border-dark);
}

.popover-header-box,
.popover-body-box {
    background: var(--modal);
    padding: 5px 10px;
    border-radius: 8px;
}

/* Form Elements */

.input-group {
    flex-wrap: unset;
}

.input-group-error {
    display: grid;
}

.input-group-error label.error {
    order: 3;
}

.input-group-error:has(> select.error) .select2 .select2-selection {
    border: 2px solid var(--danger-light);
}

.input-group>.form-input:not(:last-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group>.input-group-append>.button {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.form-label {
    font-size: var(--medium);
    line-height: 16px;
    margin-bottom: 12px;
}

.form-label-primary {
    color: var(--primary);
    font-weight: 600;
    font-size: 20px;
}

.form-label-group .input-group-append {
    position: absolute;
    padding: 0.6rem 0 0.6rem 0;
    z-index: 5;
    right: 0px;
}

.form-label-group .input-group-text {
    background: transparent;
    border: none;
    color: var(--placeholder);
}

.form-label-group:has(> .form-input:focus) .input-group-append .input-group-text,
.form-label-group:has(> .form-input:-webkit-autofill) .input-group-append .input-group-text {
    color: var(--white);
}

.form-input {
    background: transparent;
    border-radius: 8px !important;
    border: 2px solid var(--white-border);
    font-size: var(--medium);
    padding: 0.7rem 1rem 0.7rem 1rem;
    color: #fff;
    outline: none;
    width: 100%;
    max-width: 100% !important;
    height: auto;
}

.form-input:disabled,
.form-input[readonly] {
    background-color: var(--primary-light) !important;
    opacity: 1;
}

.form-input.error,
.select2-selection.error {
    border: 2px solid var(--danger-light);
}

.form-input-icon {
    padding: 0.7rem 2.3rem 0.7rem 1rem;
}

.form-input::placeholder {
    font-size: var(--medium);
    color: var(--placeholder) !important;
}

.form-input:focus {
    background: transparent;
    border: 2px solid var(--primary);
}

.form-input-table-search:focus {
    color: var(--white) !important;
}

.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px var(--secondary) inset;
    box-shadow: 0 0 0px 1000px var(--secondary) inset;
    -webkit-text-fill-color: var(--white);
    border: 2px solid var(--primary);
}

.form-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px var(--black) inset;
    box-shadow: 0 0 0px 1000px var(--black) inset;
    -webkit-text-fill-color: var(--white);
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    filter: grayscale(100%);
}

/* Form - Bordered */
.form-bordered .form-group {
    border-bottom: 1px solid var(--border-dark);
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.form-bordered .form-group:last-child,
.form-bordered .form-group:last-of-type {
    border-bottom: none !important;
    padding-bottom: 0px !important;
    margin-bottom: 0px !important;
}

.form_modal_group {
    text-align: start;
}

.form_modal_group label {
    padding-inline-start: 17px;
}

.custom-radio-right,
.custom-checkbox-right {
    padding-right: 1.5rem;
    padding-left: unset;
    margin: 3px 0;
}

#questionModal .custom-radio-right,
#questionModal .custom-checkbox-right {
    padding-right: 0rem;
    padding-left: unset;
    margin: 3px 0;
}

#questionModal .custom-checkbox-right {
    padding-right: 1.5rem;
    width: 20px;
}

.h50 {
    height: 50px;
    margin-top: 6px;
}

.noShadow,
.noShadow:hover {
    text-shadow: none;
    color: #ffffff;
}

.custom-checkbox-right .custom-control-label::before,
.custom-checkbox-right .custom-control-label::after {
    right: -23px;
    left: unset;
}

.custom-radio-right .custom-control-label::before,
.custom-radio-right .custom-control-label::after {
    right: 0;
    left: unset;
}

.checkbox-item:has(> .custom-checkbox .custom-control-input:checked) {
    background-color: var(--primary-hover);
}

.custom-checkbox-box:has(> .custom-control-input:checked) {
    color: var(--white);
}

#courseBox .checkbox-item:has(> .custom-checkbox .custom-control-input:checked) {
    background-color: var(--primary-hover);
}

.custom-radio-right .custom-control-input:checked~.custom-control-label::before,
.custom-radio .custom-control-input:checked~.custom-control-label::before,
.custom-checkbox-right .custom-control-input:checked~.custom-control-label::before,
.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
    box-shadow: none;
    background-color: var(--primary-light);
    border-color: var(--primary-light);
}

.custom-control-label {
    color: var(--light-white);
}

.custom-control-label::before {
    background-color: var(--light-white);
}

.custom-control-input:checked~.custom-control-label {
    color: var(--white);
}

#tasks_list_checkboxes .custom-control-input:disabled~.custom-control-label,
#add_courses_list .custom-control-input:disabled~.custom-control-label {
    color: var(--white);
}

.custom-control-input:disabled~.custom-control-label::before {
    background-color: var(--light-white);
    opacity: 0.5;
}

.custom-checkbox .custom-control-input:disabled:checked~.custom-control-label {
    color: var(--white);
}

.custom-checkbox .custom-control-input:disabled:checked~.custom-control-label::before {
    background-color: var(--secondary);
}

.custom-checkbox-box {
    padding: 5px;
    color: var(--light-white);
}

.custom-checkbox-box label {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
}

/* File Upload */
.fileupload .uneditable-input {
    border-radius: 0 8px 8px 0;
    border: 2px solid var(--white-border);
    font-size: var(--medium);
    padding: 0.7rem 1rem 0.7rem;
    background: transparent;
    height: auto;
    display: inline-flex;
    align-items: center;
    min-width: 200px;
    max-width: 300px;
    min-height: 50px;
    width: 100%;
}

.fileupload .btn-file>input {
    width: 100%;
    height: 100%;
    transform: unset;
}

/* Cards */
.card {
    background: var(--card);
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 15px;
    border: none;
}

.card-header {
    background: var(--card);
    border-radius: 8px 8px 0 0 !important;
    border-bottom: none;
    padding: 18px;
    position: relative;
}

/* Nav Tabs */

.tabs-primary .nav-tabs,
.tabs-secondary .nav-tabs,
.tabs-pills .nav-tabs {
    margin: 0;
    padding: 0;
    border-bottom: none;
}

.tabs-primary .nav-tabs li .nav-link {
    border-radius: 5px 5px 0 0;
    font-size: 14px;
}

.tabs-primary .nav-tabs li .nav-link,
.tabs-primary .nav-tabs li .nav-link:hover {
    background: var(--secondary);
    border-bottom: none;
    border-left: 1px solid var(--primary);
    border-right: 1px solid var(--primary);
    border-top: 1px solid var(--primary);
    color: var(--white);
}

.tabs-primary .nav-tabs li .nav-link:hover {
    background: var(--primary-light);
}

.tabs-primary .nav-tabs li .nav-link:active,
.tabs-primary .nav-tabs li .nav-link:focus {
    border-bottom: 0;
}

.tabs-primary .nav-tabs li .nav-link .badge {
    border-radius: 100%;
    padding: 6.4px 8.8px;
    padding: 0.4rem 0.55rem;
    margin-right: 5px;
}

.tabs-primary .nav-tabs li.active .nav-link,
.tabs-primary .nav-tabs li.active .nav-link:focus {
    background: var(--card);
    border-left: 1px solid var(--primary);
    border-right: 1px solid var(--primary);
    border-top: 1px solid var(--primary);
    color: var(--white);
}

.tabs-primary .nav-tabs .nav-item {
    margin: 5px 0 -1px 10px;
}

.tabs-primary .tab-content {
    border-radius: 15px 0 15px 15px;
    background-color: var(--card);
    border: 1px solid var(--secondary);
    padding: 15px;
}

.tabs-secondary .nav-tabs li .nav-link {
    color: var(--light-white);
    font-weight: 600;
    font-size: var(--medium);
    border: none;
}

.tabs-secondary .nav-tabs li .nav-link:hover {
    color: var(--primary-light);
}

.tabs-secondary .nav-tabs li.active .nav-link {
    color: var(--primary);
    background-color: transparent;
    border: none;
    border-bottom: 2px solid var(--primary);
    font-weight: 600;
    font-size: var(--medium);
}

.tabs-pills .nav.nav-tabs {
    width: fit-content;
    background: var(--modal);
    padding: 10px;
    border-radius: 30px;
    gap: 10px;
    margin-bottom: 15px;
}

.tabs-pills .nav-tabs li .nav-link {
    border: none;
    border-radius: 30px;
    color: var(--light-white);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 7px;
}

.tabs-pills .nav-tabs li .nav-link:hover {
    border: none;
    background-color: var(--primary-hover);
    color: var(--white);
}

.tabs-pills .nav-tabs .nav-item.show .nav-link,
.tabs-pills .nav-tabs .nav-link.active {
    border: none;
    background-color: var(--primary-light);
    color: var(--white);
}

.tabs-pills .nav-tabs li.active .nav-link,
.tabs-pills .nav-tabs li.active .nav-link:focus {
    background-color: var(--primary-light);
    color: var(--white);
}

/* Media Gallery */

.media-gallery .mg-files {
    gap: 30px 0;
    width: 100%;
    margin: 0;
}

.media-gallery .mg-files .thumbnail {
    background: var(--modal);
    border: 2px solid var(--primary);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 15px;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    overflow: hidden;
}
#courseSectionPart .thumbnail{
   height: 414.47px;
}

.media-gallery .mg-files .thumbnail .thumb-preview {
    position: relative;
    z-index: 2;
}

.media-gallery .mg-files .thumbnail .mg-title {
    margin: 0px 14px 0px;
    font-size: var(--medium);
    font-size: 1rem;
    color: var(--primary);
    display: -webkit-box !important;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 8px;
}

.navigationBox .description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.media-gallery .mg-files .thumbnail .mg-description .text-muted {
    margin: 10px 15px 15px;
    color: var(--light-white) !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.media-gallery .mg-files .thumbnail:hover .thumb-preview .mg-thumb-options .mg-zoom {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

.media-gallery .mg-files .thumbnail .thumb-preview .mg-thumb-options .mg-zoom {
    position: absolute;
    top: 0;
    right: 0;
    padding: 6px 10px;
    color: var(--white);
    background-color: var(--secondary);
    border-radius: 0 0 0 15px;
    cursor: pointer;
    -webkit-transition: -webkit-transform 0.1s linear 0.1s;
    transition: -webkit-transform 0.1s linear 0.1s;
    transition: transform 0.1s linear 0.1s;
    transition: transform 0.1s linear 0.1s, -webkit-transform 0.1s linear 0.1s;
    -webkit-transform: translate(100%, 0);
    transform: translate(101%, 0);
}

.media-gallery .mg-files .thumbnail .thumb-preview .mg-thumb-options .mg-toolbar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--secondary);
    color: var(--white);
    padding: 6px 10px;
    -webkit-transition: -webkit-transform 0.1s linear 0.1s;
    transition: -webkit-transform 0.1s linear 0.1s;
    transition: transform 0.1s linear 0.1s;
    transition: transform 0.1s linear 0.1s, -webkit-transform 0.1s linear 0.1s;
    -webkit-transform: translate(0, 100%);
    transform: translate(0, 100%);
}

.media-gallery .mg-files .thumbnail .thumb-preview .mg-thumb-options .mg-toolbar label {
    margin: 0;
}

.media-gallery ul.mg-folders>li a.menu-item {
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 5px;
    border-radius: 8px;
    cursor: pointer;
}

.media-gallery ul.mg-folders>li .item-options {
    position: absolute;
    left: 10px;
    top: 5px;
    opacity: 0;
    -webkit-transition: opacity 0.1s ease-in;
    transition: opacity 0.1s ease-in;
}

.media-gallery ul.mg-folders>li .item-options a:hover {
    text-decoration: none;
}
.media-gallery .thumb-image img{
height: 297.48px;
}

/* Progress Bar */

.progress {
    background: var(--border-dark);
    border-radius: 15px;
    margin: 10px 0px;
    overflow: visible;
    height: 12px;
}

.progress .progress-bar {
    background: var(--secondary);
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 15px;
    height: auto;
    position: relative;
}

.progress-percent {
    position: absolute;
    width: 50px;
    height: 50px;
    background: var(--black);
    top: -18px;
    right: -45px;
    border: 2px solid var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

/* Progress Rounded */

.progress-rounded {
    position: relative;
    width: max-content;
}

.progress-rounded svg {
    position: relative;
    width: 50px;
    height: 50px;
    transform: rotate(-90deg);
}

.progress-rounded svg circle {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: var(--border-dark);
    stroke-width: 4;
    stroke-linecap: round;
}

.progress-rounded svg circle:last-of-type {
    stroke-dasharray: 124px;
    stroke-dashoffset: calc(124px - (124px * var(--percent)) / 100);
    stroke: var(--secondary);
}

.progress-rounded .progress-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
}

.progress-rounded.progress-md svg {
    width: 75px;
    height: 75px;
}

.progress-rounded.progress-md svg circle:last-of-type {
    stroke-dasharray: 188px;
    stroke-dashoffset: calc(188px - (188px * var(--percent)) / 100);
}

.progress-rounded.progress-md .progress-number {
    top: 54%;
    font-size: 12px;
}

.progress-rounded.progress-md .progress-number .percent {
    font-size: 12px;
    color: var(--light-white);
    margin-left: 2px;
}

.text-eclipse-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-eclipse-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Sign Screens - Wrappers */

.auth-container {
    background-color: var(--black);
    display: flex;
    align-items: center;
    height: 100vh;
}

.body-info {
    width: 33.33%;
    height: 100%;
    background-image: linear-gradient(#000000a6, 73%, #071518), url("../img/home-background.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
}

.body-info .company-info {
    max-width: 350px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.body-sign {
    display: flex;
    align-items: center;
    height: 100%;
    max-width: 66.66%;
    padding: 0 15px;
    width: 100%;
    margin: 0 auto 0 0;
    background-image: linear-gradient(to bottom right, #000000a6, 10%, #000),
        url("../img/home-background.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    border-right: 1px solid var(--white-border);
}

.body-sign .center-sign {
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
}

.body-sign .card-sign .card-body {
    background: transparent;
    border-radius: 16px;
    padding: 0;
}

.body-sign .line-thru {
    display: block;
    font-size: 12px;
    font-size: 0.75rem;
    position: relative;
}

.body-sign .line-thru span {
    color: var(--primary);
    position: relative;
    z-index: 3;
}

.body-sign .line-thru:before {
    background-color: var(--black);
    content: "";
    height: 10px;
    left: 50%;
    position: absolute;
    margin: -5px 0 0 -20px;
    top: 50%;
    width: 40px;
    z-index: 2;
}

.body-sign .line-thru:after {
    border-bottom: 1px solid var(--primary);
    content: "";
    display: block;
    left: 10%;
    position: absolute;
    top: 47%;
    width: 81%;
    z-index: 1;
}

/* Course Syllabus */

.courseModal .courseDetails {
    box-shadow: 0 0 150px 150px var(--modal);
    z-index: 1;
}

.courseModal .courseImg {
    height: 100%;
    object-fit: cover;
}

.courseModal .courseDetails .lessons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.courseModal .courseDetails .lessons .info div {
    width: 60px;
    height: 60px;
    border: 1px solid var(--border-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.courseModalFeedback .button{
    padding: 8px 10px;
}

.course_syllabus .thumb-image img {
    border-radius: 15px;
}

#course-header {
    gap: 5px;
}

#course-header .nav-item .nav-link {
    border: 1px solid var(--border-dark);
    background: #000;
    border-radius: 10px;
    font-size: 14px;
    color: var(--white);
    padding-top: 8px;
    padding-bottom: 8px;
    transition: 0.2s;
}

#course_days label {
    margin: 8px 16px;
}

.material-box {
    border-radius: 10px;
    overflow: hidden;
    background: var(--black);
}

.material-box div:first-child {
    background: var(--primary-hover);
    padding: 10px 30px;
    text-align: center;
}

.material-box .button {
    padding: 5px 10px;
    font-size: var(--regular);
    border-width: 1px;
}

#course-header .nav-item .nav-link.active {
    background: var(--primary-light);
    color: var(--white);
}

#course-header .nav-item .nav-link:hover {
    background: var(--primary-light);
    color: var(--white);
}

#course-gallery .thumbnail {
    margin-bottom: 30px;
}
#course-gallery .videoFeedback{
    display: flex;
    justify-content: space-between;
    margin-top: 3px;
    align-items: center;
}
#course-gallery .videoFeedback .button{
    padding: 4px 14px;
    margin-right: 12px;
    font-size: 12px;
}

.course-video .videoBox {
    width: 80%;
    padding: 0 60px 0 60px;
}

.course-video .material {
    width: 20%;
    height: calc(100vh - 50px);
    overflow: auto;
    padding: 24px;
    background: var(--modal);
    border-radius: 10px;
}

/* Inner Menu */

.inner-toolbar {
    background: var(--modal);
    border: 1px solid transparent;
}

.inner-menu {
    background: var(--modal);
    color: var(--white);
    padding: 0;
    margin: 0;
}


.inner-toolbar>ul>li>.button {
    padding: 0.47rem 0.75rem;
    font-size: var(--regular);
}

#side-video-link {
    float: right;
    width: 100%;
}

.inner-menu a.menu-item {
    color: var(--white);
    display: block;
    text-decoration: none;
}

.inner-menu a.menu-item:hover {
    background: var(--primary-light);
    text-decoration: none;
}

/* Checkbox Item */

.checkbox-items {
    display: flex;
    flex-wrap: wrap;
}

.checkbox-item {
    margin: 5px;
    background: var(--black);
    padding: 5px 15px;
    border-radius: 8px;
}

.checkbox-item label,
.checkbox-item input {
    cursor: pointer;
}

/* Course Video */
#embedBox {
    border-radius: 10px;
    overflow: hidden;
}

/* Lab */
#pt_tech {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

#pt_tech kbd {
    padding: 4px 15px;
}

.media-gallery .mg-files .thumbnail .thumb-preview .thumb-image .thumb-image-icon {
    background: var(--black);
    width: 100%;
    position: absolute;
    z-index: 1;
    left: 0;
    height: 100%;
    display: flex;
    align-items: center;
    top: 0;
    justify-content: center;
    color: rgb(255 255 255 / 30%);
    font-size: 45px;
}

/* Intro */

.introjs-helperLayer {
    border: 3px solid var(--white) !important;
    background: transparent !important;
}

.introjs-tooltipReferenceLayer .introjs-helperNumberLayer {
    background: linear-gradient(to bottom, var(--primary) 0%, var(--secondary) 100%);
}

.introjs-tooltipReferenceLayer .introjs-tooltip {
    background: var(--black);
    box-shadow: 0px 0px 100px 8px var(--primary-light);
    border-radius: 10px;
}

.introjs-tooltipReferenceLayer .introjs-progress {
    height: 7px;
}

.introjs-tooltipReferenceLayer .introjs-progress .introjs-progressbar {
    background-color: var(--primary);
}

.introjs-tooltipReferenceLayer .introjs-bullets a.active {
    background: var(--primary);
}

.introjs-tooltipReferenceLayer .introjs-prevbutton,
.introjs-tooltipReferenceLayer .introjs-nextbutton,
.introjs-tooltipReferenceLayer .introjs-donebutton {
    border: 1px solid var(--primary) !important;
    background: transparent;
    padding: 6px 12px;
    border-radius: 5px;
    color: var(--white) !important;
    text-shadow: none;
    margin-right: 5px;
    box-shadow: none !important;
}

.introjs-tooltipReferenceLayer .introjs-prevbutton:hover,
.introjs-tooltipReferenceLayer .introjs-prevbutton:focus,
.introjs-tooltipReferenceLayer .introjs-nextbutton:hover,
.introjs-tooltipReferenceLayer .introjs-nextbutton:focus,
.introjs-tooltipReferenceLayer .introjs-donebutton:hover,
.introjs-tooltipReferenceLayer .introjs-donebutton:focus {
    background: var(--primary-light);
}

/* Calender */

.fc-button-group {
    display: flex;
    gap: 10px;
}

.fc .fc-toolbar {
    background: var(--black);
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 2.5em;
}

.fc .fc-toolbar .fc-button {
    border-radius: 8px;
    background: transparent;
    color: var(--white);
    outline: none;
}

.fc .fc-toolbar .fc-button.fc-prev-button,
.fc .fc-toolbar .fc-button.fc-next-button {
    border: 1px solid var(--border-dark);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.fc .fc-toolbar .fc-button:hover {
    background: var(--primary-hover);
}

.fc .fc-toolbar .fc-button.fc-state-active {
    background: var(--primary-light);
}

.fc .fc-toolbar h2 {
    color: var(--light-white);
}

.fc .fc-toolbar h2:before {
    color: var(--primary-light);
    content: "\f073";
    display: inline-block;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 28.8px;
    font-size: 1.8rem;
    font-style: normal;
    line-height: 1;
    margin-right: 10px;
    position: relative;
    top: 2px;
    -webkit-font-smoothing: antialiased;
}

.fc-unthemed th,
.fc-unthemed td,
.fc-unthemed thead,
.fc-unthemed tbody {
    border: none;
}

.fc-unthemed td.fc-today {
    background: var(--primary-hover);
    border: none;
}

.fc-row .fc-bg table,
.fc-row .fc-content-skeleton table {
    border-collapse: separate;
    border-spacing: 8px;
}

.fc-row .fc-content-skeleton table thead td {
    padding-right: 10px;
    padding-top: 5px;
}

.fc-row .fc-bg table td {
    border-radius: 8px;
}

.fc-row .fc-bg table td:not(.fc-today) {
    background: var(--black);
}

/* Admin */

#company_name,
#register_date,
#company_name_add {
    color: var(--primary);
    font-size: 20px;
}

#adminBlocks .tab-pane {
    background: var(--modal);
    border-radius: 15px;
}

.live-training-on {
    border-left: 1px solid var(--secondary);
}

.custom-items {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.custom-items .custom-items-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: var(--primary);
    font-weight: 600;
    font-size: 20px;
}

.custom-items .custom-items-label i {
    color: #e7e7e7;
    font-size: 35px;
    margin-bottom: 15px;
    background: var(--secondary);
    padding: 15px;
    border-radius: 50%;
}

.custom-items .items {
    display: flex;
    flex-direction: column;
}

#exams_list,
#tasks_list_checkboxes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px 20px;
    direction: rtl;
}

#add_courses_list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px 20px;
    direction: rtl;
}

#datatable-tabletools2_length .select2 {
    margin: 0 10px;
}

#datatable-tabletools2_length .select2 .select2-selection {
    direction: rtl;
    text-align: right;
}

#datatable-tabletools2_length .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b {
    top: 40%;
    left: 8px;
}

.dt-buttons-main {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}

.dt-buttons-main .btn-group {
    direction: initial;
}

.dt-buttons-main .buttons-excel {
    border: 2px solid var(--primary);
    font-size: var(--small);
    font-weight: 600;
    border-radius: 8px;
    transition: 0.5s;
    cursor: pointer;
    outline: none;
    text-decoration: none;
    background-color: var(--primary-light);
    color: var(--white);
}

.dt-buttons-main .buttons-excel:hover {
    background-color: var(--primary);
}

.expand {
    width: 30px;
    height: 30px;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s;
}

.dt-hasChild button.expand {
    transform: rotate(180deg);
}

#userList.dtr-inline.collapsed>tbody>tr>td.dtr-control:before {
    display: none;
}

.view_action {
    border: 2px solid var(--primary);
    border-radius: 50%;
    padding: 9px;
    font-size: 10px;
}

.view_action:hover {
    background-color: var(--primary-light);
}

.user-progress {
    border-radius: 15px;
}

.progress-section {
    background: var(--black);
    border-radius: 8px;
    padding: 10px 60px 10px 15px;
    border: 1px solid var(--border-dark);
}

.exam-progress {
    background: var(--black);
    border-radius: 8px;
    padding: 15px;
    border: 1px solid var(--border-dark);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.video-span {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.video-span>div {
    background: var(--black);
    padding: 5px 8px;
    border-radius: 8px;
    min-width: 30px;
    text-align: center;
    border: 1px solid var(--border-dark);
}

.exam-given {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-bottom: 1px solid var(--border-dark);
}

.exam-given .exam-date,
.exam-given .exam-percent {
    color: var(--primary);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 5px 20px;
}

.exam-given .exam-date span,
.exam-given .exam-percent span {
    color: var(--white);
}

.qa-download {
    width: max-content;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0;
}

.dropdown-menu {
    background-color: var(--black);
    border: 2px solid var(--primary-light);
    border-radius: 8px;
    width: auto;
    margin-top: 10px;
    padding: 2px;
}

.dropdown-item {
    color: var(--white);
    width: unset;
    border-radius: 8px;
    padding: 0.4rem 1rem;
    margin: 5px;
}

.dropdown-item:hover {
    background-color: var(--primary-hover);
    color: var(--white);
}

#manage_courses_video_select {
    max-width: 500px;
}

#manage_courses_video_select .multiselect-native-select .multiselect-container {
    padding-bottom: 15px;
}

#manage_courses_video_select .multiselect-native-select .multiselect {
    width: 100%;
    height: 50px;
    border-radius: 8px;
    background: transparent;
    border: 2px solid var(--white-border);
    color: #fff;
}

#manage_courses_video_select .multiselect-native-select .multiselect[aria-expanded="true"] {
    border: 2px solid var(--primary);
}

#manage_courses_video_select .multiselect-native-select .multiselect-item.multiselect-filter {
    padding: 15px;
}

#manage_courses_video_select .multiselect-native-select .multiselect-item.multiselect-filter:hover {
    background: transparent !important;
}

#manage_courses_video_select .multiselect-native-select input {
    background: transparent;
    border-radius: 0 8px 8px 0;
    border: 2px solid var(--white-border);
    font-size: var(--medium);
    padding: 0.7rem 1rem 0.7rem 1rem;
    color: #fff;
    outline: none;
    height: auto;
}

#manage_courses_video_select .multiselect-native-select input:focus {
    border: 2px solid var(--primary);
}

#manage_courses_video_select .multiselect-native-select .multiselect-clear-filter {
    background: var(--primary);
    color: var(--white);
    border: 2px solid var(--primary);
    font-size: var(--medium);
    font-weight: 600;
    padding: 0.6rem 1rem 0.6rem 1rem;
    border-radius: 8px 0 0 8px;
    transition: 0.5s;
    cursor: pointer;
    outline: none;
    text-decoration: none;
    height: 50px;
}

#manage_courses_video_select .multiselect-native-select .multiselect-clear-filter:hover {
    background: var(--primary-light);
}

#manage_courses_video_select .multiselect-native-select li a {
    color: var(--white);
}

#manage_courses_video_select .multiselect-native-select .multiselect-item.multiselect-group a label {
    color: var(--primary);
    margin-top: 10px;
    font-size: 20px;
}

#manage_courses_video_select .multiselect-native-select .multiselect-container li {
    border-radius: 8px;
    margin: 0 8px;
}

#manage_courses_video_select .multiselect-native-select .multiselect-container li:not(.multiselect-item.multiselect-group):hover {
    background: var(--primary-light);
}

#manage_courses_video_select .multiselect-native-select .multiselect-container li:not(.multiselect-item.multiselect-group) a label input[type="checkbox"] {
    accent-color: var(--primary);
    margin-left: 5px;
    width: 15px;
    height: 15px;
}

.manage_courses_list_main .select2 {
    width: 100% !important;
}

#manage_courses #update_card_manage_courses {
    background: black;
    border-radius: 15px;
}

.account-block {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.account-block #plan-text {
    color: var(--white);
    font-size: 20px;
}

.account-block #plan {
    color: var(--primary);
    font-size: 30px;
    margin: 15px 0;
}

.Subscription_Mandala {
    top: 0;
    position: absolute;
    width: 100%;
    left: 0;
    filter: grayscale(1);
    opacity: 0.1;
}

.block_user_main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    background-color: rgb(58 203 140 / 15%);
}

.block_user_main.blocked {
    border: 1px solid var(--danger);
    background-color: rgb(255 82 71 / 15%);
}

.block_user_main #unblock_user,
.block_user_main .block-reason-text,
.block_user_main .block-reason {
    display: none;
}

.block_user_main.blocked .block-reason {
    display: none !important;
}

.block_user_main.blocked #unblock_user,
.block_user_main.blocked .block-reason-text,
.block_user_main.blocked .block_user_icon .fa.fa-ban {
    display: block;
}

.block_user_main.blocked #block_user {
    display: none;
}

.block_user_main .block_user_icon {
    position: relative;
    width: max-content;
}

.block_user_main .reason_box {
    background: VAR(--black);
    padding: 10px 15px;
    border-radius: 8px;
}

.block_user_main .reason_box label {
    border-bottom: 1px solid var(--primary);
    width: 100%;
    padding-bottom: 5px;
    font-size: 16px;
    color: var(--primary);
}

.block_user_main .block_user_icon .fa.fa-user {
    font-size: 50px;
    color: var(--secondary);
}

.block_user_main .block_user_icon .fa.fa-ban {
    position: absolute;
    bottom: -6px;
    left: -9px;
    color: var(--danger);
    font-size: 25px;
    background: var(--card);
    border-radius: 50%;
    display: none;
}

.block_user_main #block_user_icon_text {
    color: var(--danger);
    margin-top: 10px;
    font-size: 18px;
}

/* Certificate */

.certificate-repeater .certificate_date {
    height: 48.38px;
}

.certificate-repeater select {
    background: transparent;
    border-radius: 8px;
    border: 2px solid var(--white-border);
    font-size: var(--medium);
    padding: 0.6rem 1rem 0.8rem 1rem;
    color: var(--white);
    outline: none;
    width: 100%;
    max-width: 100% !important;
    height: 48.38px;
}

.certificate-repeater select:focus {
    border: 2px solid var(--primary);
}

.certificate-repeater select option {
    background: var(--card);
}

.certificate-repeater .certificate_details {
    background: var(--black);
    padding: 30px;
    border-radius: 15px;
    margin: 10px;
}

.certificate-repeater #repeater-delete {
    border: 1px solid var(--border-dark);
    position: absolute;
    left: -24px;
    top: 40%;
}

.certificate-information {
    margin: 0 auto 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.certificate-information div {
    background-color: var(--modal);
    border-radius: 10px;
    padding: 10px 10px;
    display: flex;
    gap: 3px;
    flex-direction: column;
}

.certificate-information div .text {
    color: var(--secondary);
    font-size: 16px;
}

#mail-loader {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background: rgb(0 0 0 / 80%);
    display: none;
    font-size: var(--medium);
    border-radius: 15px;
}

#mail-loader .mail-send {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 45px;
}

/* Pagination */

.pagination {
    direction: initial;
}

.pagination .paginate_button a {
    border: none;
    font-size: var(--regular);
    font-weight: 600;
    transition: 0.5s;
    text-decoration: none;
    background-color: var(--border-dark);
    color: var(--white);
    margin: 0 5px;
    border-radius: 50% !important;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination .page-item.disabled .page-link {
    background-color: var(--border-dark);
    color: var(--white);
    border: none;
    opacity: 0.7;
}

.pagination .page-item.active .page-link {
    background-color: var(--primary-light);
}

.pagination .page-link:hover {
    background-color: var(--primary-hover);
}

/* Exam */

.card-title {
    color: var(--secondary);
    font-size: var(--large);
    margin: 0;
}

.card-subtitle {
    color: var(--light-white);
    font-size: var(--small);
}

#exam_good,
#exam_bad,
#time {
    background: var(--black);
    padding: 3px 7px;
    border-radius: 5px;
    margin: 0 5px;
    font-size: var(--medium);
    color: var(--white);
}

/* Other */

html.no-overflowscrolling .nano>.nano-pane>.nano-slider {
    background: var(--light-white);
    margin: 0;
    position: relative;
    visibility: hidden;
}

html.no-overflowscrolling.custom-scroll .nano>.nano-content {
    overflow-y: auto;
    overflow-x: hidden;
}

html.no-overflowscrolling.custom-scroll .nano>.nano-content::-webkit-scrollbar {
    display: none;
}

.hideme {
    display: none !important;
}

html.fixed .inner-menu .nano-content {
    padding: 15px;
}

.help-block {
    display: block;
    color: #ffffff;
    font-size: var(--medium);
}

table.table-bordered.dataTable th:first-child,
table.table-bordered.dataTable th:first-child,
table.table-bordered.dataTable td:first-child,
table.table-bordered.dataTable td:first-child {
    border-right-width: 0;
}

table.table-bordered.dataTable th:last-child,
table.table-bordered.dataTable th:last-child,
table.table-bordered.dataTable td:last-child,
table.table-bordered.dataTable td:last-child {
    border-right-width: 1px;
}

/* Subscription */

#currentlyActive {
    width: 50px;
    height: 50px;
    border: 2px solid var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin: 0 auto;
}

#activePurchase .active-list,
#purchaseContent .basic-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

#activePurchase .active-list .active-item {
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    position: relative;
    border: 1px solid var(--black);
    cursor: pointer;
}

#activePurchase .active-list .active-item:hover {
    border: 1px solid var(--border-dark);
}

.path-duration .path-duration-time {
    border-radius: 50%;
    padding: 15px;
    text-align: center;
    width: 90px;
    height: 90px;
    font-weight: bold;
    margin: 0 auto;
    background: var(--primary-hover);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.path-duration .path-duration-reminder {
    position: relative;
    margin-left: 20px;
    margin-top: 10px;
}

.path-duration .alarm {
    position: absolute;
    left: -17px;
    top: -3px;
    background: var(--black);
    transform: rotate(334deg);
    transition: 0.5s;
    color: var(--primary);
}

.path-duration .time-left {
    border: 2px solid var(--border-dark);
    border-radius: 15px;
    padding: 3px 15px 3px 25px;
    transition: 0.5s;
}

#purchaseContent .path-duration .path-duration-reminder .time-left {
    width: max-content;
}

#purchaseContent .path-duration .path-duration-time {
    transform: scale(1.3);
}

#purchaseContent .path-duration .inner-rings {
    border-radius: 50%;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

#purchaseContent .path-duration .inner-ring1 {
    width: 134px;
    height: 130px;
    border: 2px solid var(--primary-light);
    top: -20px;
}

#purchaseContent .path-duration .inner-ring2 {
    width: 154px;
    height: 150px;
    border: 1px solid var(--border-dark);
    top: -30px;
}

.legend {
    border-radius: 10px;
}

.legend-title {
    position: absolute;
    top: -21px;
    background: var(--modal);
    padding: 5px 10px;
    border-radius: 8px;
    font-size: var(--medium);
    color: var(--light-white);
}

.courses-list {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.courses-list .course-item {
    border: 1px solid var(--border-dark);
    border-radius: 8px;
    text-align: center;
}

.courses-list .course-item>div img {
    border-radius: 8px 8px 0 0;
}

.courses-list .course-item>div img {
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid var(--border-dark);
}

.courses-list .course-item .course-name {
    display: -webkit-box !important;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 5px;
}

.advance-info .advance-title {
    position: absolute;
    top: -21px;
    background: #151618;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 20px;
}

.renew {
    font-size: 15px;
}

#renewSubscription {
    text-decoration: none;
    border: 1px solid var(--primary);
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 13px;
    background: var(--primary-light);
    color: #fff;
    margin-left: 10px;
    transition: 0.5s;
}

#renewSubscription:hover {
    background: var(--primary);
}

.makat-amount {
    color: var(--primary) !important;
    font-weight: 600;
    font-size: 25px;
    margin: 10px 0;
    display: flex;
    align-items: center;
}

.renewal-box {
    background: #000;
    padding: 10px 20px 15px;
    border-radius: 10px;
    width: fit-content;
}

/* Assessment */

#viewAssessmentModal .modal-xl {
    min-width: 800px;
}

.tabs-assessment .tab-content {
    border-radius: 10px;
    background-color: var(--black);
    overflow: hidden;
}

.tabs-assessment .tab-pane table {
    box-shadow: 0 0 3px 0px #fff;
}

.tabs-assessment .tab-pane table th {
    text-align: center;
}

.tabs-assessment .tab-content .tab-pane .downloadAssessment {
    position: fixed;
    top: 96px;
    right: 35px;
    transition: 0.5s;
    z-index: 2;
}

.tabs-assessment .tab-content .tab-pane .downloadAssessment:hover {
    transform: scale(1.1);
}

.tabs-assessment .tab-content .tab-pane .downloadAssessment.downloading,
.history-list-item .directDownloadAssessment.downloading {
    pointer-events: none;
}

.tabs-assessment .summary-text {
    max-width: 800px;
    margin: 0 auto;
}

.tabs-assessment .areas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.tabs-assessment .areas div {
    padding: 5px 15px;
    border-radius: 8px;
    border: 2px solid var(--border-dark);
    width: max-content;
}

.tabs-assessment .progress-percents {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    border: 3px solid var(--primary);
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 50%;
    font-size: 15px;
}

#history {
    border-radius: 10px;
}

.history-content {
    height: calc(100vh - 172px);
    overflow-y: scroll;
    scroll-behavior: smooth;
}

.history-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.history-list-item {
    background-color: var(--black);
    border-radius: 10px;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.history-date {
    font-size: 18px;
}

.history-list-item .directDownloadAssessment {
    opacity: 0.7;
    transition: 0.5s;
}

.history-list-item .directDownloadAssessment:hover {
    opacity: 1;
}

.history-list-item .directDownloadAssessment:hover svg {
    transform: scale(1.1);
}

.history-progress .progress-rounded {
    transform: scale(1.2);
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#downloadLoader {
    width: 3.2em;
    height: 3.2em;
    border: 4px solid var(--light-white);
    border-radius: 50%;
    display: inline-block;
    position: relative;
    animation: rotation 1s linear infinite;
    position: fixed;
    top: 96px;
    right: 37px;
    z-index: 2;
    cursor: wait;
}


#downloadLoader::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4.2em;
    height: 4.2em;
    border-radius: 50%;
    border: 4px solid transparent;
    border-bottom-color: var(--primary);
}

.direct-download-item {
    position: relative;
    text-align: center;
}

.directDownloadLoader {
    width: 2.7em;
    height: 2.7em;
    border: 4px solid var(--border-dark);
    border-radius: 50%;
    display: inline-block;
    animation: rotation 1s linear infinite;
    position: absolute;
    top: 25px;
    left: -1px;
    right: 0;
    margin: auto;
    cursor: wait;
}

.directDownloadLoader::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 2.7em;
    height: 2.7em;
    border-radius: 50%;
    border: 4px solid transparent;
    border-bottom-color: var(--primary);
}

.downloadLoader {
    width: 5.4em;
    height: 5.4em;
    border: 4px solid transparent;
    border-radius: 50%;
    display: inline-block;
    animation: rotation 1s linear infinite;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 73px;
}

.downloadLoader::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 5.4em;
    height: 5.4em;
    border-radius: 50%;
    border: 4px solid transparent;
    border-bottom-color: var(--primary);
}

.downloadMaterial.disabled {
    opacity: 0.5;
    pointer-events: none;
}

#countdown {
    display: flex;
    margin-bottom: 20px;
}

#countdown-header {
    margin-bottom: 10px;
    color: var(--primary);
}

#countdown div {
    box-shadow: inset 0 0 5px var(--primary);
    position: relative;
    line-height: 31px;
    text-align: center;
    color: var(--light-white);
    margin: 0px 8px;
    font-size: 1.5rem;
    font-weight: 400;
    border-radius: 8px;
    padding: 5px 5px 8px;
    min-width: 40px;
    width: max-content;
}

#countdown div::before {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 100%;
    height: 21px;
    background: var(--secondary);
    color: white;
    font-size: 0.5em;
    line-height: 19px;
    font-weight: 300;
    border-radius: 0 0 8px 8px;
}

#countdown #day::before {
    content: "Days";
}

#countdown #hour::before {
    content: "Hours";
}

#countdown #minute::before {
    content: "Minutes";
}

#countdown #second::before {
    content: "Seconds";
}

/* Profile */

#overview .card .back-card {
    border-radius: 15px;
    padding: 20px;
}

.widget-summary .count {
    font-size: 40px;
    font-weight: bold;
    line-height: 40px;
}

.widget-summary #count_time span {
    color: var(--light-white);
    font-size: 14px;
    line-height: 0;
}

#mainLoader {
    background: rgb(0 0 0 / 85%);
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3001;
}

#mainLoader .loader-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 18px;
    height: 100%;
}

#mainLoader .loader-content>div {
    padding: 80px 50px 60px;
}

.secondary-loader {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    position: relative;
    animation: rotate 1s linear infinite;
}

.secondary-loader::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0px;
    border-radius: 50%;
    border: 5px solid #fff;
    animation: prixClipFix 2s linear infinite;
}

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

@keyframes prixClipFix {
    0% {
        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
    }

    25% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
    }

    50% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
    }

    75% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
    }

    100% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
    }
}

.credit-card {
    position: relative;
    max-width: 300px;
    min-width: 250px;
    height: 188px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 16px;
    background: var(--black);
}

.credit-card .text-light {
    color: #ffffffbf !important;
}

.credit-card .card-name p {
    font-size: 20px;
    font-weight: bold;
}

.credit-card .card-name,
.credit-card .expiry-date {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.credit-card .card-name img {
    width: 20px;
}

.credit-card #brand {
    border-radius: 5px;
}

.credit-card .card-infos {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.credit-card .card--bottom {
    display: flex;
    gap: 20px;
}

.credit-card .card-number {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.credit-card .card-text {
    font-size: 12px;
    line-height: 1;
}

.credit-card .card-digit {
    font-size: 20px;
    font-weight: bold;
}

#countryCode {
    width: 55px;
    border: 2px solid var(--white-border);
    border-radius: 0 8px 8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--white);
}

#countryCode+input {
    border-radius: 8px 0 0 8px;
}

#responseAlert {
    border: 2px solid var(--danger);
    background: var(--danger-light);
    border-radius: 5px;
    padding: 8px 15px;
    text-align: left;
    margin-bottom: 20px;
    font-size: var(--small);
}

#missingDetails {
    color: var(--danger);
    font-weight: 600;
    font-size: 20px;
    text-align: center;
}

.missing-group {
    display: none;
    background: var(--black);
    padding: 15px;
    border-radius: 10px;
}

#paymentLoader {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--black-light);
    z-index: 10;
    border-radius: 15px;
}

/* User Management */
.dataTables,
.table {
    color: var(--white);
}

.dtr-details .dt-center {
    text-align: left !important;
}

.dt-center:not(.dtr-hidden) {
    text-align: center;
}

.dataTables.table,
.dataTables .table {
    border-collapse: separate !important;
    border-spacing: 0 10px;
    background-color: transparent;
}

.dataTables thead th {
    border-top: none;
    border-bottom: 2px solid var(--primary-light);
}

.dataTables tbody td {
    border: none;
    vertical-align: middle;
}

.dataTables:not(.ltr) tbody tr td:first-child {
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
}

.dataTables.ltr tbody tr td:first-child {
    border: 0;
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
}

.dataTables:not(.ltr) tbody tr td:last-child:not(.dtr-hidden) {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.dataTables.ltr tbody tr td:last-child:not(.dtr-hidden) {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.dataTables tbody .details {
    border-radius: 8px !important;
}

.dataTables tbody tr {
    background-color: var(--modal) !important;
}

.dataTables tbody tr:not(.odd):not(.even) td {
    background: #212225;
}

.dataTables tbody tr.odd {
    background-color: var(--black) !important;
}

.dataTables tbody tr.even {
    background-color: rgb(52 183 126 / 20%) !important;
}


div.dataTables_wrapper div.dataTables_filter label .refresh {
    color: var(--white-border);
    width: 40px;
    height: 40px;
    margin-top: 3px;
}

.table-striped tbody tr:has(.tooltipTitle.expired) {
    background-color: var(--warning) !important;
}

.dataTables tbody tr.blocked {
    background-color: rgb(145 0 0 / 35%) !important;
}

.dataTables tbody tr.readOnly {
    background-color: var(--warning) !important;
}

.dataTables tbody tr.violated {
    background-image: url("/img/Violation.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: max-content;
}

.dataTables tbody tr.blocked.readOnly {
    background-image: linear-gradient(to right, #91000059, var(--warning));
    background-color: transparent !important;
}

.dataTables tbody tr.blocked.readOnly.violated {
    background-image: url("/img/Violation.png"),
        linear-gradient(to right, #91000059, var(--warning));
    background-color: transparent !important;
}

table.dataTable>tbody>tr.child ul.dtr-details {
    display: grid;
}

.dataTables ul.dtr-details {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.dataTables ul.dtr-details li {
    background-color: var(--black);
    border-radius: 8px;
    padding: 15px !important;
    display: flex;
    flex-direction: column;
    gap: 3px;
    border-bottom: none !important;
}

.dataTables ul.dtr-details li .dtr-title {
    color: var(--light-white);
}

.dataTables ul.dtr-details li .dtr-data {
    font-size: 18px;
    color: var(--primary);
    display: inline-block;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dataTables ul.dtr-details li.hiddenColumn.extra {
    grid-column: 1 / 5;
}

.dataTables tbody .details {
    border-radius: 8px;
    padding: 20px;
    border: 1px solid var(--primary-light);
    background-color: transparent !important;
}

.dataTables tbody .details tr:nth-of-type(odd) {
    background-color: var(--modal);
}

.dataTables tbody .details tr:nth-of-type(odd) td {
    background-color: rgb(52 183 126 / 20%);
}

.table.dataTable>tbody>tr.child ul.dtr-details>li {
    border-bottom: 1px solid var(--border-dark);
}

table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {
    margin-left: 0.5em;
    color: var(--light-white);
}

table.dataTable>tbody>tr.child span.dtr-title {
    min-width: 150px;
}

table.dataTable>tbody>tr.child:nth-of-type(even):hover {
    background: var(--black) !important;
}

table.dataTable>tbody>tr.child:nth-of-type(odd):hover {
    background: rgb(52 183 126 / 20%) !important;
}

.video-span {
    max-height: 400px;
    overflow: scroll;
}

.video-span::-webkit-scrollbar {
    display: none;
}

.dataTables_wrapper .dataTables_filter input {
    max-width: 300px !important;
}

.dataTables_filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dataTables_wrapper .dt-buttons.btn-group {
    gap: 10px;
}

.dataTables_wrapper .dt-buttons.btn-group .btn {
    background: transparent;
    border-radius: 8px;
    padding: 6px 8px;
    color: var(--light-white);
    border: 2px solid var(--border-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-secondary.focus,
.btn-secondary:focus {
    box-shadow: none;
}

.dataTables_wrapper .dt-buttons.btn-group button {
    width: max-content;
    padding: 6px 15px;
}

.dataTables_wrapper .dt-buttons.btn-group .btn:hover {
    background: var(--primary-light);
    color: var(--white);
    border-color: transparent;
}

.dataTables_paginate {
    margin-top: 10px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dataTables_length label {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: -48px;
}

.dataTables_length .select2 {
    margin: 0 10px;
    min-width: 75px !important;
}

.dataTables_info {
    position: absolute;
    bottom: -25px;
    right: 12px;
    font-size: 14px !important;
    color: var(--light-white);
}

#adminUserListDatatable_wrapper .dt-buttons a {
    background-color: transparent;
    color: var(--light-white);
    border: none;
    font-weight: 600;
    font-size: var(--medium);
    border-radius: 0;
    box-shadow: none;
    border-bottom: 2px solid transparent;
    transition: 0.3s all;
}

#adminUserListDatatable_wrapper .dt-buttons a.active {
    color: var(--primary);
    border-bottom: 2px solid var(--primary);
}

/* Super Admin */
html.fixed .inner-wrapper {
    height: calc(100vh);
}

.box-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.box-pills span {
    padding: 7px 15px;
    border-radius: 8px;
    background-color: var(--primary-hover);
}

.project-upload {
    border-radius: 15px;
    transition: all 0.2s;
    cursor: pointer;
}

.project-upload #uploadContent {
    border-radius: 15px;
    padding: 40px;
    border: 1px solid transparent;
}

.project-upload #uploadContent:hover {
    border: 1px solid var(--border-dark);
}

.project-upload input {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    cursor: pointer;
}

.project-upload input.selected {
    width: 0%;
    height: 0%;
}

#createEditUserButton.loading {
    pointer-events: none;
}

#createEditUserButton.loading .save {
    display: none;
}

#createEditUserButton.loading .load {
    display: block !important;
}

@media (max-width: 1440px) {
    #add_courses_list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .body-info {
        display: none;
    }

    .body-sign {
        max-width: 100%;
    }

    #activePurchase .active-list {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {

    #exams_list,
    #tasks_list_checkboxes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .history-list {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    html .scroll-to-top.hidden-mobile {
        display: none !important;
    }

    .live-training-on {
        border-left: none;
        border-bottom: 1px solid var(--secondary);
    }

    #add_courses_list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-block {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .courses-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {

    #exams_list,
    #tasks_list_checkboxes {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .certificate-repeater .certificate_details .row {
        gap: 15px;
    }

    .certificate-repeater #repeater-create {
        width: -webkit-fill-available;
        margin: 30px;
    }

    .course_logo img {
        width: 20% !important;
        margin-bottom: 20px;
    }

    #activePurchase .active-list {
        gap: 35px;
        margin-top: 20px;
    }

    #activePurchase .active-list .active-item {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

@media only screen and (max-width: 600px) {
    #countdown {
        margin-right: -2%;
    }

    #countdown-container {
        margin-right: -2%;
    }
}

@media only screen and (max-width: 525px) {
    .fileupload .uneditable-input {
        max-width: 150px;
        min-width: auto;
    }

    #add_courses_list {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .course_logo img {
        width: 30% !important;
    }

    #final_project .card-horizontal {
        display: flex;
    }

    .courses-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* New Sidebar and Header */
.no-data {
    color: var(--light-white);
    opacity: 0.5;
}

.inner-wrapper {
    background-color: #232323;
    margin-top: 75px !important;
    flex-direction: row-reverse;
}

.content-body {
    padding-top: 50px;
    background-color: var(--black);
    margin: 10px;
    border-radius: 10px;
    scroll-behavior: smooth;
}

.content-body:hover::-webkit-scrollbar-thumb,
.modal-primary .modal-content .modal-body:hover::-webkit-scrollbar-thumb,
.drawer-body:hover::-webkit-scrollbar-thumb {
    background: #99999980;
    border-radius: 7px;
}

.page-header .page-title {
    margin: 0;
    font-size: 30px;
}

.page-header .breadcrumbs a {
    color: var(--light-white);
    text-decoration: none;
    text-decoration: none;
    padding-bottom: 1px;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

.page-header .breadcrumbs a:hover {
    color: var(--primary);
    border-bottom: 1px solid var(--primary);
}

.sidebar-left {
    padding: 10px;
    background-color: transparent;
    height: calc(100vh - 80px);
    min-height: 100% !important;
    z-index: 1500 !important;
}

.sidebar-left .nano {
    border-radius: 10px;
    overflow: hidden !important;
    border: none !important;
}

.sidebar-widget.watched .widget-content {
    opacity: 0.9;
    background-color: var(--primary-hover);
}

.sidebar-widget .widget-content {
    display: flex;
    gap: 10px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--black);
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sidebar-widget .widget-content:hover {
    background: var(--primary-hover);
}

.sidebar-widget .widget-content .widget-img {
    width: 30%;
}

.sidebar-widget .widget-content .widget-img span {
    position: absolute;
    bottom: 4px;
    left: 4px;
    background: var(--black);
    padding: 0px 5px;
    border-radius: 5px;
    font-size: 12px;
}

.sidebar-widget .widget-content .widget-img {
    width: 30%;
}

.sidebar-widget .widget-content .widget-info {
    width: 70%;
    padding: 8px 5px;
}

.sidebar-widget .widget-content .widget-info p {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sideVideoMaterial {
    position: sticky;
    z-index: 1;
    top: 0;
    background: var(--modal);
    padding-bottom: 20px;
    box-shadow: 0 -20px 10px 12px var(--modal);
}

ul.nav-main {
    padding-right: 0;
}

ul.nav-main>li.nav-active>a {
    box-shadow: none;
}

.sidebar-left .nano nav.nav-main {
    padding: 10px;
}

.sidebar-left .nano nav.nav-main li {
    margin-bottom: 5px;
}

.sidebar-left .nano nav.nav-main li a {
    border-radius: 10px;
}

.sidebar-left .nano .nav-main>li:hover>a {
    background-color: var(--primary-hover) !important;
}

.sidebar-left .sidebar-header .sidebar-toggle:hover {
    opacity: 1;
}

.sidebar-left .sidebar-header {
    bottom: 0;
    top: unset;
}

.sidebar-left .sidebar-header .sidebar-toggle {
    top: unset;
    bottom: 37px;
    left: -8px;
    width: 25px !important;
    height: 25px;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
}

.sidebar-left .sidebar-header .sidebar-toggle i {
    font-size: 12px;
    line-height: 13px;
}

.sidebar-left-collapsed .sidebar-left {
    width: 85px !important;
}

ul.nav-main li a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    transition: all 0.2s;
}

ul.nav-main li a span {
    text-wrap: wrap;
}

.content-with-menu {
    border-top: 0;
    margin: 0;
    min-height: auto;
}

.content-with-menu-has-toolbar .inner-toolbar {
    position: sticky;
    top: -40px;
    border-radius: 10px;
    margin-bottom: 20px;
    z-index: 100;
    box-shadow: -2px -23px 10px -5px #000;
}

.inner-body,
.content-with-menu-has-toolbar .inner-toolbar {
    padding: 0 !important;
}

.content-with-menu {
    display: flex;
    gap: 10px;
}

.video-collapse {
    width: 350px;
}

.video-collapse.active {
    display: block;
    position: fixed;
    top: 85px;
    z-index: 2000;
    width: 100%;
    right: 162px;
    background: #000000d1;
    border-radius: 10px;
}

.sidebar-left-collapsed .video-collapse.active {
    right: 95px;
}

.video-collapse.active .collapse-body {
    width: 350px;
    height: calc(100vh - 80px);
}

.content-body:has(> .content-with-menu .video-collapse.active) {
    overflow: hidden;
}

.video-collapse .collapse-body {
    background: var(--modal);
    padding: 15px;
    border-radius: 10px;
    position: sticky;
    top: -40px;
    height: calc(100vh - 170px);
    overflow-y: auto;
}

.video-collapse .collapse-body::-webkit-scrollbar {
    display: none;
}

.video-collapse li a.menu-item {
    display: block;
}

.video-collapse li:hover a.menu-item {
    background: var(--primary-light);
    text-decoration: none;
}

html .body .header {
    margin: 10px;
    border: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

.userbox {
    margin: 0;
}

.userbox .name i {
    font-size: 25px;
}

.userbox .profile-info {
    margin: 0;
}

.userbox.show .dropdown-menu {
    right: 0px !important;
    top: 43px !important;
    border: 2px solid var(--primary-hover);
    padding: 10px 15px;
    min-width:15rem
}

.userbox.show .dropdown-menu li {
    margin: 5px 0 0;
}

.header-right {
    display: flex;
    align-items: center;
}

.notifications .notification-menu {
    left: 0px !important;
    box-shadow: none !important;
    z-index: 2000;
}

.notifications .notification-menu:before,
.notifications .notification-icon:before {
    display: none !important;
}

.notification-menu.course-list .notification-title {
    border: 2px solid var(--primary-hover);
    border-radius: 10px !important;
}

.notification-menu .nav::-webkit-scrollbar {
    display: none;
}

.notification-menu .nav {
    padding: 10px;
    width: 100%;
}

.notification-menu .nav div {
    display: flex;
    border: 1px solid var(--border-dark);
    border-radius: 10px;
    overflow: hidden;
    align-items: center;
    cursor: pointer;
}

.notification-menu .nav div:hover {
    background: rgb(58 203 140 / 50%);
}

.notification-menu .nav div span {
    color: var(--white);
    text-transform: none;
    padding: 5px 10px;
    max-width: 130px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.notifications .notification-menu .content {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.toggle-sidebar-left {
    cursor: pointer;
}

html.sidebar-left-big-icons.sidebar-left-collapsed .sidebar-left .nano .nav-main>li>a {
    padding: 12px;
}

html.sidebar-left-big-icons.sidebar-left-collapsed .sidebar-left .nano .nav-main>li>a>svg {
    width: 1.7em !important;
    height: 1.7em !important;
}

.media-gallery .mg-files .thumbnail {
    border: 1px solid #cccccc26;
}

/* Login */

#frm2FA .custom-control {
    position: relative;
    transition: 0.3s all;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    color: var(--light-white);
}

#frm2FA .custom-control:hover {
    background: var(--primary-hover);
}

#frm2FA .custom-control-label {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
}

#frm2FA .custom-control-label::after,
#frm2FA .custom-control-label::before {
    top: 0 !important;
    left: 0;
    width: 100%;
    height: 100%;
}

#frm2FA .custom-control:has(> .custom-control-input:checked) {
    background: var(--primary-light);
    color: var(--white);
}

#frm2FA .custom-control:has(> .custom-control-input) {
    border: 1px solid var(--white-border) !important;
}

.select-2fa {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;

    /* Remove below css if more than one box */
    grid-template-columns: repeat(1, minmax(0, 1fr));
    width: 50%;
    margin: 0 auto;
}

/* Company */
#companyCourseList .custom-control {
    max-width: 200px;
    overflow: hidden;
}

#companyCourseList .custom-control-label {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: initial;
}

#viewCompanyDetails .basic-info {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

#viewCompanyDetails .basic-info>div {
    background: var(--black);
    padding: 10px 15px;
    border-radius: 10px;
}

#viewCompanyDetails .basic-info>div .count {
    font-size: 25px;
}

#viewCompanyDetails .basic-info>div .count span {
    font-size: var(--small);
    color: var(--light-white);
    margin-right: 5px;
}

#viewCompanyDetails #viewContent .tag {
    background: var(--warning);
    font-size: 16px;
    padding: 4px 12px;
    color: var(--light);
    border-radius: 8px;
}

#howLongText .button {
    font-size: 14px;
    padding: 4px 10px !important;
}

/* View User */

.indicators {
    display: flex;
    align-items: center;
    background: black;
    padding: 10px 15px;
    border-radius: 10px;
    gap: 8px;
    margin-right: 10px;
}

.indicators i {
    font-size: 20px;
    border-radius: 50%;
}

.indicators.blocked i {
    color: rgb(87 0 3) !important;
}

.indicators.readOnly i {
    color: var(--warning) !important;
}

#viewUserDetails .info .col {
    padding: 0 5px;
    margin-bottom: 10px;
}

#viewUserDetails .info .col>div {
    background-color: var(--black);
    border-radius: 10px;
    padding: 10px 15px;
    display: flex;
    gap: 3px;
}

#viewUserDetails .info .col>div .text {
    color: var(--secondary);
    font-size: 16px;
}

#viewUserDetails .info .col>div .title {
    font-size: 18px;
}

#viewUserDetails #accordion .card {
    background-color: #212225;
}

#viewUserDetails #accordion .card-header {
    background-color: inherit;
}

#viewUserDetails .course {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
}

#viewUserDetails .course .item {
    border-radius: 10px;
    background: var(--black);
    overflow: hidden;
}

#viewUserDetails .course .item .progress-box {
    background: var(--modal);
    padding: 5px 10px;
    border-radius: 8px;
}

#viewUserDetails .course .item .progress-box .count {
    color: var(--primary);
    font-size: 20px;
    font-weight: 600;
}

#viewUserDetails .course .item .progress-box .count span {
    font-size: 12px;
    color: var(--light-white);
    margin-right: 5px;
}

#viewUserDetails .course .item img {
    height: 120px;
    object-fit: cover;
    object-position: top;
}

#viewUserDetails .violation-info>div {
    max-width: 50%;
    flex: 1;
}

.video-count {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.video-count div {
    background: var(--black);
    padding: 5px 10px;
    color: var(--light-white);
    border-radius: 8px;
}

#viewExamAttemptHistory .history-box {
    background: var(--black);
    padding: 12px;
    border-radius: 8px;
    width: max-content;
}

#viewExamAttemptHistory .history-box .date {
    background: var(--modal);
    padding: 5px 10px;
    border-radius: 8px;
    color: var(--light-white);
}

#viewExamAttemptHistory .history-box .progress-rounded {
    margin: 8px auto 0;
}

#certificateHIstory .certificate div {
    background: var(--black);
    border-radius: 10px;
    padding: 20px;
}

/* Add User */

#selectRole {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 23px;
    top: 0;
    background: var(--black);
    box-shadow: 0 0px 0 20px var(--black);
}

#selectRole .select-role {
    display: flex;
    align-items: center;
    gap: 20px;
}

#selectRole .select-role div:first-child {
    max-width: 200px;
}

#selectRole .select-role div:nth-child(2) {
    max-width: 300px;
}

#courseBox .content-box {
    background: var(--black);
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 15px;
}

#courseBox .content-box .title {
    color: var(--light-white);
    font-size: 20px;
    margin-bottom: 15px;
}

#courseBox .content-box .checkbox-item {
    background: var(--modal);
}

/*disabled css*/
#courseBox .content-box .disabled{opacity: 0.5;}
#courseBox .content-box .disabled .checkbox-item{pointer-events: none;}
.disabled .custom-checkbox .custom-control-input:checked~.custom-control-label::after{pointer-events: none;}

/*disabled css*/

/* File Uploads */

.file_upload {
    text-align: center;
    border: 2px dashed var(--border-dark);
    border-radius: 10px;
    color: var(--light-white);
    position: relative;
    transition: all 0.3s;
    overflow: hidden;
}

.file_upload:hover,
.file_upload.dragover {
    color: var(--white);
    border: 2px dashed var(--primary-hover);
    background-color: #3acb8c1a;
}

.file_upload:has(> .file-input.error) {
    border: 2px dashed var(--danger-light);
}

.file_upload .upload,
.file_upload .uploading {
    padding: 30px;
}

.file_upload .file-input {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    border-radius: 10px;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.file_upload+.files {
    padding: 10px 0;
}

.file_upload+.files .file {
    border: 1px solid var(--border-dark);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
}

.file_upload+.files .file .file-size {
    font-size: 11px;
    line-height: 11px;
}

.file_upload_img .image .overlay {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: end;
    padding: 20px;
}

.file_upload_img .image .overlay>div {
    background: #000000d6;
    border-radius: 50px;
    padding: 10px;
    position: relative;
    top: 10px;
    right: 10px;
}

.file_upload.selected .file-input {
    width: 36px;
    height: 36px;
    bottom: 21px;
    border-radius: 50%;
    right: 72px;
    display: none;
}

.file_upload.selected .upload,
.file_upload.selected.removing .action,
.file_upload.dragover .upload .drop-select,
.file_upload_single.active .action,
.file_upload_single.active .overlay .file-name .name,
.file_upload.loading .upload,
.file_upload label.error {
    display: none !important;
}

.file_upload_single.active .action-change {
    display: flex !important;
}

.file_upload_img.selected .image,
.file_upload.selected.removing .remove-loader,
.file_upload_single.selected .file,
.file_upload.dragover .upload .drop-here,
.file_upload_single.active .overlay .file-name input,
.file_upload.loading .uploading {
    display: block !important;
}

.course-management .course-image .file_upload.loading .uploading {
    display: flex !important;
}

.file_upload_single.loading .file-input {
    pointer-events: none;
}

.file_upload.loading {
    cursor: wait;
}

.file_upload .uploading {
    background-color: #3acb8c1a;
}

.file_upload .uploading svg path:nth-child(2) {
    animation: slide-up 0.8s linear infinite;
}

.file_upload_single .file {
    min-height: 210px;
}

.file_upload_single .extension {
    position: relative;
    min-height: 143px;
    background-color: #3acb8c1a;
}

.file_upload_single .extension .name {
    font-size: 80px;
    line-height: 80px;
    font-weight: 500;
    position: absolute;
    right: 10px;
    bottom: 0;
    opacity: 0.5;
}

.file_upload_single .extension .svg-icon {
    width: 10em;
    height: 10em;
    position: absolute;
    left: 25px;
    top: -30px;
    opacity: 0.6;
}

.file_upload_single .overlay {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: flex-end;
}

.file_upload_single .overlay .file-name {
    direction: ltr;
    text-align: left;
}

.file_upload_single .overlay .file-name h4 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-right: 10px;
}

.file_upload_single .overlay>div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
}

.file-supported {
    display: flex;
    align-items: center;
    margin-top: 3px;
}

.file-supported p {
    font-size: 12px;
}

/* Course Management */
.course-management .course-basic {
    gap: 30px;
}

.course-management .course-image {
    max-width: 350px;
    width: 100%;
}

.course-management .course-image .upload,
.course-management .course-image .uploading {
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.course-management .custom-radio-right .custom-control-label::before,
.course-management .custom-radio-right .custom-control-label::after {
    right: -24px;
    cursor: pointer;
}

.course-management .assignment .item {
    background: var(--black);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    border: 2px solid var(--modal);
}

.course-management .assignment .item label.error,
.questionOptions .card .w-100 label.error {
    display: none !important;
}

.course-management .assignment .item:has(> input.error) {
    border: 2px solid var(--danger-light);
}

.questionOptions .card .w-100:has(> input.error) {
    border-bottom: 2px solid var(--danger-light);
}

.course-management .assignment.zoom-in {
    animation: zoom-in 0.2s ease-in-out;
}

.course-management .assignment.zoom-out {
    animation: zoom-out 0.3s ease-in-out;
}

.course-management .assignment input {
    border: none !important;
    font-size: 14px;
}

.course-management .add {
    position: absolute;
    top: -25px;
    box-shadow: 0 0 0px 6px var(--black);
    background: #0f3323;
}

.course-management .add-text {
    position: absolute;
    top: -38px;
    left: 75px;
    font-size: 15px;
}

.course-management .add:hover {
    background: rgb(28 100 69);
}

.course-management .generalDocs .files .file,
.course-management #accordion .file {
    background: var(--black);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.course-management #accordion .card-header .icon {
    width: 35px;
    height: 35px;
}

.course-management #accordion .courseDay {
    font-size: 20px;
}

.course-management #accordion .courseVideo {
    font-size: 18px;
}

.course-management #accordion .courseDescription {
    max-height: 140px;
}

.course-management #accordion label.error {
    padding-right: 15px;
}

.course-management #accordion .play {
    padding: 10px;
    background-color: #0f3323;
    position: absolute;
    left: -15px;
    top: 30px;
    box-shadow: 0 0 0px 5px var(--modal);
}

.course-management #accordion .play:hover {
    background-color: rgb(28 100 69);
}

.course-management #accordion .video-card {
    margin-right: 30px !important;
    transition: all 0.3s;
}

.course-management #accordion .video-card .file-input {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    position: absolute;
    left: 83px;
    z-index: 1;
    display: none;
}

.course-management #accordion .video-card .drag {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    border-radius: 0px 15px 15px 0px;
    background: #212225;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: move;
}

.course-management #accordion .sortable li {
    list-style: none;
    transition: all 0.3s;
}

.course-management #accordion .sortable .ui-sortable-helper {
    transform: scale(1.03);
}

.course-management .sortable .ui-sortable-helper .card-header .drag,
.course-management .sortable.video-sortable .ui-sortable-helper .drag {
    background-color: var(--primary-hover) !important;
}

.course-management .sortable li.ui-sortable-placeholder {
    min-height: 112px;
    background-color: #3acb8c1a;
    border: 1px dashed var(--light-white);
    margin: 0 20px;
    margin-bottom: 10px;
    border-radius: 10px;
    visibility: visible !important;
}

.course-management .sortable.accordion-sortable>li.ui-sortable-placeholder {
    min-height: 71px;
    margin: 0;
}

.course-management.exam-management .sortable.accordion-sortable>li.ui-sortable-placeholder {
    min-height: 86px;
    margin: 0;
}

.course-management #accordion .card-header .drag {
    border-radius: 6px;
    padding: 3px 0;
    cursor: move;
}

.course-management #accordion .material-card {
    background: #3acb8c1a !important;
    margin-right: 30px !important;
}

.course-management #accordion .file {
    margin: 5px 0;
}

.course-management #accordion .material-card .add {
    left: -13px;
    top: 16px;
    box-shadow: 0 0 0px 6px var(--modal);
}

#courseList.dataTables tbody tr.odd {
    background-color: #0c0c0c !important;
}

.course-management .generalDocs .files .file.removing .action,
.course-management .materialDocs .files .file.removing .action,
.accordion-sortable li.loading .card-header .action,
.video-sortable li.loading .action,
.course-management .generalDocs.selected .info,
.course-management .materialDocs.selected .info,
#courseBody.upload #courseLists,
#courseBody.active #courseLists,
#uploadCourse.disabled .upload,
#uploadCourse .upload.error .info,
#courseBody.active #uploadCourse {
    display: none !important;
}

.course-management .generalDocs .files .file.removing .remove-loader,
.course-management .materialDocs .files .file.removing .remove-loader,
.video-sortable li.loading .remove-loader,
.accordion-sortable li.loading .card-header .remove-loader,
#courseBody.upload #uploadCourse,
#uploadCourse.disabled .process,
#uploadCourse .upload.error .error,
#courseBody.active #createEditCourse {
    display: block !important;
}

.course-management .materialDocs.selected .files {
    display: flex !important;
}

#viewCourseModal .basic-info {
    overflow: hidden;
    border-radius: 15px;
    background: var(--black);
}

#viewCourseModal .courseDetails {
    box-shadow: 0 0 150px 150px var(--black);
}

#viewCourseModal .documents .document>div {
    background: var(--black);
    border-radius: 10px;
    padding: 14px;
}

#viewCourseModal .general-documents .doc {
    background: var(--modal);
    padding: 5px 12px;
    border-radius: 8px;
}

#courseGallery .course-item>div {
    background: var(--black);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.2s;
    cursor: pointer;
}

#courseGallery .course-item>div .duration {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: var(--black);
    border-radius: 8px;
    padding: 3px 10px;
    border: 1px solid var(--border-dark);
    color: var(--light-white);
}

#courseGallery .course-item>div:hover {
    transform: scale(1.05);
}

#courseGallery .course-item>div p {
    min-height: 72px;
}

#zipStructureModal ul {
    padding: revert;
}

#userCourseAccess .custom-radio-right .custom-control-label::before,
#userCourseAccess .custom-radio-right .custom-control-label::after {
    right: -22px;
}

/* Loaders */

.upload-loader {
    max-width: 250px;
    margin: 0 auto;
}

.upload-loader svg {
    display: none;
}

.loader-line {
    width: 200px;
    height: 3px;
    position: relative;
    overflow: hidden;
    background-color: var(--border-dark);
    margin: 20px auto;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

.loader-line:before {
    content: "";
    position: absolute;
    left: -50%;
    height: 3px;
    width: 40%;
    background-color: var(--primary-light);
    -webkit-animation: lineAnim 1s linear infinite;
    -moz-animation: lineAnim 1s linear infinite;
    animation: lineAnim 1s linear infinite;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

#playVideoModal video {
    width: 100%;
    margin-top: 20px;
    border-radius: 10px;
}

.setting-loader {
    width: 60px;
    height: 40px;
    position: absolute;
    bottom: 15px;
    left: 15px;
    display: inline-block;
    transform: rotateY(180deg);
    --base-color: var(--modal);
    /*use your base color*/
}

.setting-loader::before {
    content: "";
    right: 0;
    top: 0;
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--primary-light);
    background-image: radial-gradient(circle 8px at 18px 18px,
            var(--base-color) 100%,
            transparent 0),
        radial-gradient(circle 4px at 18px 0px, var(--base-color) 100%, transparent 0),
        radial-gradient(circle 4px at 0px 18px, var(--base-color) 100%, transparent 0),
        radial-gradient(circle 4px at 36px 18px, var(--base-color) 100%, transparent 0),
        radial-gradient(circle 4px at 18px 36px, var(--base-color) 100%, transparent 0),
        radial-gradient(circle 4px at 30px 5px, var(--base-color) 100%, transparent 0),
        radial-gradient(circle 4px at 30px 5px, var(--base-color) 100%, transparent 0),
        radial-gradient(circle 4px at 30px 30px, var(--base-color) 100%, transparent 0),
        radial-gradient(circle 4px at 5px 30px, var(--base-color) 100%, transparent 0),
        radial-gradient(circle 4px at 5px 5px, var(--base-color) 100%, transparent 0);
    background-repeat: no-repeat;
    box-sizing: border-box;
    animation: rotationBack 3s linear infinite;
}

.setting-loader::after {
    content: "";
    right: 35px;
    top: 15px;
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--light-white);
    background-image: radial-gradient(circle 5px at 12px 12px,
            var(--base-color) 100%,
            transparent 0),
        radial-gradient(circle 2.5px at 12px 0px, var(--base-color) 100%, transparent 0),
        radial-gradient(circle 2.5px at 0px 12px, var(--base-color) 100%, transparent 0),
        radial-gradient(circle 2.5px at 24px 12px, var(--base-color) 100%, transparent 0),
        radial-gradient(circle 2.5px at 12px 24px, var(--base-color) 100%, transparent 0),
        radial-gradient(circle 2.5px at 20px 3px, var(--base-color) 100%, transparent 0),
        radial-gradient(circle 2.5px at 20px 3px, var(--base-color) 100%, transparent 0),
        radial-gradient(circle 2.5px at 20px 20px, var(--base-color) 100%, transparent 0),
        radial-gradient(circle 2.5px at 3px 20px, var(--base-color) 100%, transparent 0),
        radial-gradient(circle 2.5px at 3px 3px, var(--base-color) 100%, transparent 0);
    background-repeat: no-repeat;
    box-sizing: border-box;
    animation: rotationBack 4s linear infinite reverse;
}

.clock-loader {
    width: 48px;
    height: 48px;
    display: inline-block;
    position: relative;
    top: -5px;
    background-color: #fff;
    background: radial-gradient(ellipse at center,
            var(--light-white) 0%,
            var(--light-white) 14%,
            var(--primary-hover) 15%,
            var(--primary-hover) 100%);
    background-size: cover;
    background-position: center;
    border-radius: 50%;
}

.clock-loader::after,
.clock-loader::before {
    content: "";
    position: absolute;
    height: 16px;
    width: 4px;
    background: var(--light-white);
    top: 50%;
    right: 50%;
    transform: translateX(-50%) rotate(0deg);
    transform-origin: 25% 0;
    box-sizing: border-box;
    animation: rotation 10s linear infinite;
}

.clock-loader::before {
    height: 22px;
    width: 2px;
    transform: translateX(-50%) rotate(0deg);
    animation-duration: 1s;
}

.remove-loader {
    min-width: 28px;
    height: 30px;
    border-radius: 50%;
    border-top: 4px solid var(--light-white);
    border-right: 4px solid transparent;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

.remove-loader::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: -5px;
    width: 28px;
    height: 30px;
    border-radius: 50%;
    border-bottom: 4px solid var(--primary-light);
    border-left: 4px solid transparent;
}

.remove-loader-sm {
    min-width: 22px;
    height: 24px;
    border-top: 3px solid var(--light-white);
    border-right: 3px solid transparent;
}

.remove-loader-sm::after {
    top: -3px;
    width: 22px;
    height: 24px;
    border-bottom: 3px solid var(--primary-light);
    border-left: 3px solid transparent;
}

/* Exam Management */

.exam-type {
    gap: 20px;
}

.exam-type>div {
    background: var(--background-light);
    max-width: 200px;
    width: 100%;
    border-radius: 8px;
    padding: 10px 10px 40px;
}

.exam-type>div img {
    border-radius: 8px;
}

.exam-type .custom-radio {
    height: 100%;
    width: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: end;
    padding: 0;
}

.exam-type .custom-radio label {
    height: 100%;
    display: flex;
    align-items: end;
    position: relative;
    bottom: 0;
    padding: 0 15px 10px 10px;
    cursor: pointer;
}

.exam-type .custom-control-label::after,
.exam-type .custom-control-label::before {
    top: unset;
    bottom: 12px;
    right: 1rem;
    width: 1.2rem;
    height: 1.2rem;
    left: 85%;
}

.exam-type .custom-control-label::after {
    background: 54%/54% 54% no-repeat;
}

/* userprofile upload projetc*/
.project-upload #directuploadContent{
    border-radius: 15px;
    padding: 40px;
    border: 1px solid transparent;
}
.project-upload #directuploadContent:hover {
    border: 1px solid var(--border-dark);
}

#directProjectUpload #directProjectTaskList span{
    border: 1px solid var(--primary-light);
    padding: 8px;
    background-color: var(--primary-hover);
    border-radius: 8px;
}
#directProjectUpload .checkbox-items{
    gap: 8px;
}

/*userprofile slot booking*/
#directSlotBooking .direct-book-header{
    font-size: 25px;
    text-align: center;
    margin-bottom: 20px;
}
#directSlotBooking .form-input{
    border: none;
    padding: 0px;
}
#directSlotBooking .ui-datepicker-title{
    display: flex;
}
.direct_slot_checkboxs{
    display: flex;
    gap: 14px;
    margin-top: 15px;
    flex-wrap: wrap;
    max-height: 151px;
    overflow: auto;
    margin-bottom: 10px;
    padding-bottom: 5px;
}
.direct_slot_checkboxs div{
    display: flex;
    align-items: center;
    border: 1px solid var(--primary-light);;
    border-radius: 8px;
    font-size: 16px;
    position: relative;
    justify-content: center;
    padding: 12px;
}
.direct_slot_checkboxs div:hover{
    background-color: var(--primary-hover);
}
.direct_slot_checkboxs .selectedTime:hover{
    background-color: var(--primary-light);
}
.direct_slot_checkboxs input{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    opacity: 0;
    cursor: pointer;
}
.direct_slot_checkboxs div label{
    margin-bottom: 0px;
}
.selectedTime{
    background-color: var(--primary-light);
}
.direct_slot_checkboxs::-webkit-scrollbar-track {
    background: #888; 
}

.direct_slot_checkboxs::-webkit-scrollbar-thumb {
    background: var(--primary);
}
.direct_slot_checkboxs::-webkit-scrollbar {
    width: 8px; 
}
#directSlotBooking .ui-datepicker-title > span{
    width: 100% !important;
}
#directSlotBooking .directscheduleInterviewbtn:disabled{
    background-color: #453d3d;
}
/* upload lab submission in user profile */
#lab-task-list{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
#lab-task-list span{
    border: 1px solid var(--primary-light);
    padding: 6px;
    background: var(--primary-hover);
    border-radius: 8px;
}
#directLabUpload .fileupload-exists{
    display: none;
}
#directLabUpload .fileupload .btn-file>input{
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
}
#directLabUpload .btn-file{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
#directLabUpload .input-append{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#directLabUpload .input-append a{
    width: 95px;
}
#directLabUpload .card-horizontal .card-header+.card-body {
    padding-right: 25px;
}

/*userprofile slot booking*/
#directSlotBooking .direct-book-header{
    font-size: 25px;
    text-align: center;
    margin-bottom: 20px;
}
#directSlotBooking .form-input{
    border: none;
    padding: 0px;
}
#directSlotBooking .ui-datepicker-title{
    display: flex;
}
.direct_slot_checkboxs{
    display: flex;
    gap: 14px;
    margin-top: 15px;
    flex-wrap: wrap;
    max-height: 151px;
    overflow: auto;
    margin-bottom: 10px;
    padding-bottom: 5px;
}
.direct_slot_checkboxs div{
    display: flex;
    align-items: center;
    border: 1px solid var(--primary-light);;
    border-radius: 8px;
    font-size: 16px;
    position: relative;
    justify-content: center;
    padding: 12px;
}
.direct_slot_checkboxs div:hover{
    background-color: var(--primary-hover);
}
.direct_slot_checkboxs .selectedTime:hover{
    background-color: var(--primary-light);
}
.direct_slot_checkboxs input{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    opacity: 0;
    cursor: pointer;
}
.direct_slot_checkboxs div label{
    margin-bottom: 0px;
}
.selectedTime{
    background-color: var(--primary-light);
}
.direct_slot_checkboxs::-webkit-scrollbar-track {
    background: #888; 
}

.direct_slot_checkboxs::-webkit-scrollbar-thumb {
    background: var(--primary);
}
.direct_slot_checkboxs::-webkit-scrollbar {
    width: 8px; 
}
#directSlotBooking .ui-datepicker-title > span{
    width: 100% !important;
}
#directSlotBooking .directscheduleInterviewbtn:disabled{
    background-color: #453d3d;
}
/* upload lab submission in user profile */
#lab-task-list{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
#lab-task-list span{
    border: 1px solid var(--primary-light);
    padding: 6px;
    background: var(--primary-hover);
    border-radius: 8px;
}
#directLabUpload .fileupload-exists{
    display: none;
}
#directLabUpload .fileupload .btn-file>input{
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
}
#directLabUpload .btn-file{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
#directLabUpload .input-append{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#directLabUpload .input-append a{
    width: 95px;
}
#directLabUpload .card-horizontal .card-header+.card-body {
    padding-right: 25px;
}
/*userprofile slot booking*/
#directSlotBooking .direct-book-header{
    font-size: 25px;
    text-align: center;
    margin-bottom: 20px;
}
#directSlotBooking .form-input{
    border: none;
    padding: 0px;
}
#directSlotBooking .ui-datepicker-title{
    display: flex;
}
.direct_slot_checkboxs{
    display: flex;
    gap: 14px;
    margin-top: 15px;
    flex-wrap: wrap;
    max-height: 151px;
    overflow: auto;
    margin-bottom: 10px;
    padding-bottom: 5px;
}
.direct_slot_checkboxs div{
    display: flex;
    align-items: center;
    border: 1px solid var(--primary-light);;
    border-radius: 8px;
    font-size: 16px;
    position: relative;
    justify-content: center;
    padding: 12px;
}
.direct_slot_checkboxs div:hover{
    background-color: var(--primary-hover);
}
.direct_slot_checkboxs .selectedTime:hover{
    background-color: var(--primary-light);
}
.direct_slot_checkboxs input{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    opacity: 0;
    cursor: pointer;
}
.direct_slot_checkboxs div label{
    margin-bottom: 0px;
}
.selectedTime{
    background-color: var(--primary-light);
}
.direct_slot_checkboxs::-webkit-scrollbar-track {
    background: #888; 
}

.direct_slot_checkboxs::-webkit-scrollbar-thumb {
    background: var(--primary);
}
.direct_slot_checkboxs::-webkit-scrollbar {
    width: 8px; 
}
#directSlotBooking .ui-datepicker-title > span{
    width: 100% !important;
}
#directSlotBooking .directscheduleInterviewbtn:disabled{
    background-color: #453d3d;
}
/* upload lab submission in user profile */
#lab-task-list{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
#lab-task-list span{
    border: 1px solid var(--primary-light);
    padding: 6px;
    background: var(--primary-hover);
    border-radius: 8px;
}
#directLabUpload .fileupload-exists{
    display: none;
}
#directLabUpload .fileupload .btn-file>input{
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
}
#directLabUpload .btn-file{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
#directLabUpload .input-append{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#directLabUpload .input-append a{
    width: 95px;
}
#directLabUpload .card-horizontal .card-header+.card-body {
    padding-right: 25px;
}

.exam-nav a.nav-link.disable {
    pointer-events: none;
}

.exam-nav {
    box-shadow: 0 -90px 10px 130px var(--black);
}

#questionAnswer .question {
    max-height: 62px;
    resize: none;
}

.toggleCollapse.collapsed span {
    display: none;
}

.toggleCollapse.collapsed span.collapsed {
    display: block !important;
}

.toggleCollapse svg {
    transition: all 0.3s;
}

.toggleCollapse.collapsed svg.upArrow {
    transform: rotate(180deg);
}

.selectQuestion .custom-control-label::before,
.selectQuestion .custom-control-label::after {
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    top: unset;
    cursor: pointer;
}

.skillAssessmentFields .time-range input:nth-child(1) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.skillAssessmentFields .time-range input:nth-child(2) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.selectionMain label,
.card label {
    padding-right: 1.6em;
}

.questionCards .questionInfo {
    background: var(--black);
    padding: 6px 12px;
    border-radius: 10px;
}

.questionCards .questionInfo .options div {
    padding: 7px 10px;
    color: var(--light-white);
}

.questionCards .questionInfo .options div svg {
    margin-right: 7px;
}

.questionCards .questionInfo .options div.correct svg {
    /* margin-left: 7px; */
}

.questionCards .questionInfo .options div.correct {
    background: var(--primary-hover);
    color: var(--white);
    font-size: 16px;
    border-radius: 8px;
    padding: 7px 9px;
    margin: 10px 0px;
}

.questionCards .questionInfo .options div.incorrect {
    background: var(--danger-light);
    color: var(--white);
    font-size: 16px;
    border-radius: 8px;
    padding: 7px 9px;
}

#studentProjectRecordView .project_view_top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 8px;
    border-radius: 8px;
    background: var(--card)
}
#studentProjectRecordView .project_view_top p{
    font-size: 40px;
}
#studentProjectRecordView .project_view_middle{
    padding: 10px; 
    margin-top: 12px;
    border-radius: 8px;
    background: var(--card);
    display: flex;
    gap: 10px;
}
#studentProjectRecordView .project_view_middle .img-content img{
    width: 250px;
    height: 165px;
    border-radius: 10px;

}
#studentProjectRecordView .project_view_middle .img-content{
    display: flex;
    flex-direction: column;
    width: fit-content;
    gap: 2px;
}
#studentProjectRecordView .project_view_middle .img-content p{
    width: 100%;
    text-align: center;
}
#studentProjectRecordView .info-wrapper{
    width: calc(100% - 250px);
    background-color: var(--black);
    border-radius: 10px;
    display: flex;
    padding: 10px;
    margin-left: 0px;
    margin-right: 0px;

}
#studentProjectRecordView .totalTaskContent{
    border: 1px solid #3f4145;
    padding: 8px;
    border-radius: 8px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
#studentProjectRecordView .indicatorsContent .indicator-sign{
    width: 13px;
    height: 13px;
    border-radius: 50%;
}
#studentProjectRecordView .indicatorsContent > div{
    display: flex;
    gap: 3px;
    font-size: 13px;
    align-items: center;
    width: fit-content;
}
#studentProjectRecordView .indicatorsContent{
    display: flex;
    gap: 22px;
    border: 1px solid var(--card);
    background-color: var(--card);
    padding: 8px;
    border-radius: 8px;
    width: fit-content;
    margin-top: 10px;
    flex-wrap: wrap;
}
.submittedColor{
 background-color: #00800070;
}
.notSubmittedColor{
  background-color: #4545d761;
}
.inreviewColor{
   background-color: #2e86c166;
}
.passedColor{
  background-color: #3acb8c;
}
.failColor{
  background-color: #750d0d;
}
#studentProjectRecordView .totalTaskContent > div{
    padding: 5px;
    border-radius: 8px;
    text-align: right;
}
#studentProjectRecordView .projectTaskWrapper label{
    font-size: 18px;
}
#studentProjectRecordView .view_button .button{
    background-color: var(--card);
    padding: 13px;
    width: 230px;
}
#studentProjectRecordView .view_button .button:active{
    transform: scaleX(0.8);
}
#studentProjectRecordView .view_button{
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
}

#studentProjectRecordView .view_details{
    display: flex;
    flex-direction: column;
    justify-self: flex-start;
    align-items: flex-start;
    gap: 10px;
}
#studentProjectRecordView .interview-count{
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: right;
}
#studentProjectRecordView .interview-count .content-interview{
    display: flex;
    align-items: center;
}
#studentProjectRecordView .interview-count  p{
  font-size: 30px;
  color: #00673a;
}
#studentProjectRecordView .interview-count .Edit-interview-count{
    display: flex;
    gap: 5px;
}
#studentProjectRecordView .interview-count .Edit-interview-count button{
    height: fit-content;
}
#studentProjectRecordView .interview-count .Edit-interview-count .interviewCountError{
    font-size: 14px;
    color: red;
}

#studentProjectRecordView .view_details>:first-child{
    display: flex;
    gap: 7px;
    font-size: 18px;
}
#studentProjectRecordView .view_details>:nth-child(2){
    display: flex;
    gap: 7px;
    font-size: 18px;
}
#studentProjectRecordView .accordian-content{
    margin-top: 10px;
    background: var(--card);
    padding: 10px;
    border-radius: 5px;
}
#studentProjectRecordView .project-head h4{
    margin-top: 0px;
    margin-bottom: 0px;
}
#studentProjectRecordView .project-head{
    background: var(--black);
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    align-items: center;
}
#studentProjectRecordView .project-head a{
    background-color: var(--card);
    display: inline-block;
}
#studentProjectRecordView .rotate{
    transform: rotate(180deg);

}

#studentProjectRecordView .accordian-content{
    display: flex;
    flex-direction: column;
    gap: 20px 
}
#studentProjectRecordView .info_wrapper{
    padding: 8px 30px;
}

#project_content .project-accordian{
    padding: 8px 8px;
    background: #222121f0;
    border-radius: 12px;
    margin-top: 5px 
}
.project-accordian #submittedTask{
    flex-direction: row !important;
    gap: 10px !important;
    flex-wrap: wrap;
    padding: 0px !important;
}
.project-accordian #submittedTask > section{
    padding: 8px;
    background-color: var(--background-light);
    border-radius: 8px;
}
#submittedTask hr{
    margin-top: 5px;
    margin-bottom: 5px;
}
#interview_content .project-accordian{
    padding: 8px 8px;
    background: #222121f0;
    border-radius: 12px;
    margin-top: 5px 

}
#studentProjectRecordView .project-head-info{
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 16px;
}
#studentProjectRecordView .project-head-info>:first-child{
    width: 20px;
    height: 20px;
    border-radius: 50%;    
}
#studentProjectRecordView .project-head-info>:nth-child(3){
    margin-right: 45px;
    padding: 4px 14px;
    border-radius: 13px;
}
.pass{
    background: #3acb8c;
}
.fail{
    background: #750d0d;
}
.todo{
    background-color: #2e86c166;
}
#studentProjectRecordView .project-head-info>:nth-child(4){
    background: #454242;
    border-radius: 12px;
    padding: 4px 
}
#studentProjectRecordView .ratingControl{
    margin-top: 5px;
}
#studentProjectRecordView .ratingControl label{
    margin-bottom: 0px;
}
#studentProjectRecordView .feedbackWrapper{
    margin-top: 10px;
    padding-left: 40px;
    padding-right: 12px;
}
#studentProjectRecordView .feedbackWrapper div{
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
    background: var(--black);
    border-radius: 8px;
    padding: 12px;
    text-align: right;
}
#studentProjectRecordView .feedbackWrapper{
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: var(--border-dark);
    padding: 12px;
    border-radius: 12px;
}
#studentProjectRecordView .feedbackWrapper .feedbackAndCommenWrapper{
    display: flex;
    gap: 10px;
}
#studentProjectRecordView .ratingControl__star:nth-last-of-type(even)::after{
    clip-path: polygon(47% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 47% 70%);
}
#studentProjectRecordView .ratingControl__star:nth-last-of-type(even)::before{
    clip-path: polygon(47% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 47% 70%); 
}

.datepicker-width{
    max-width:85px !important;
}

.date-picker-border-none{
    max-width: 49px !important;
    border: none !important;
    color: var(--primary) !important;
    padding: 0px !important;
    cursor: default !important;
}



@media only screen and (max-width: 1105px){
    #studentProjectRecordView .view_details>:first-child,#studentProjectRecordView .view_details>:nth-child(2){
        font-size: 14px;
    }
    #studentProjectRecordView .view_button .button{
        width: 100%;
    }
}
@media only screen and (max-width: 991px){
    #studentProjectRecordView .view_button{
        margin-top: 10px;
    } 
    #studentProjectRecordView .project_view_middle .img-content img{
        height: 200px;
    }
    #studentProjectRecordView .project-head-info>:nth-child(3){
        margin-right: 0px;
    }
    #studentProjectRecordView .project-head-info{
        gap: 10px;
        font-size: 13px;
    }
}
@media only screen and (max-width: 580px){
    #studentProjectRecordView .project_view_middle{
        flex-direction: column;
    }
    #studentProjectRecordView .project_view_middle .img-content{
        width: 100%;
    }
    #studentProjectRecordView .info-wrapper {
        width: 100%;
    }
    #studentProjectRecordView .project_view_middle .img-content img{
        width: 100%;
    }
}

/* exam css end  */

/* Practitioner dashboard view */

#practitionerBody .studentPractitionerContent {
    background-color: #212225;
    padding: 20px;
    border: 1px solid #212225;
    border-radius: 15px;
    overflow-y: scroll;
    scroll-behavior: smooth;
}

#viewData .studentDetailsWrapper>div {
    background-color: var(--black);
    border-radius: 10px;
    padding: 15px 15px;
    display: flex;
    gap: 5px;
    flex-direction: column;
    margin-bottom: 30px;
    align-items: flex-start;
    min-height: 127px;
}

#viewData .studentDetailsWrapper div .text {
    color: var(--primary);
}

#viewData #ProjectTaskName {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    flex-direction: row;
    gap: 12px;
    margin-top: 10px;
}

#viewData #ProjectTaskName>span {
    border: 1px solid var(--primary-hover);
    background-color: var(--primary-hover);
    border-radius: 12px;
    padding: 7px 10px;
}

#viewData .studentDetailsWrapper>div>:nth-child(2) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#viewData .studentDetailsWrapper img {
    margin-bottom: 20px;
}

#viewData .studentDetailsWrapper #userEmailIds {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    margin-top: 20px;
}

#viewData .studentDetailsWrapper>div img {
    border-radius: 20px;
    width: 300px;
    height: 250px;
}
#viewData .select2-container{
    width: 100% !important;
}

.wrap-text {
    word-wrap: break-word;
}

/* practitioner Edit view */

#practitionerBody .selectMenu {
    width: 100%;
}

#practitionerBody .selectMenu:nth-child(2) {
    width: 300px
}

/* result radio button */
.resultRadio{
    position: relative;
}

.resultRadio label{
    display: flex;
    margin-left: 25px;
}

.resultRadio input[type=radio]:checked,
.resultRadio input:not(:checked){
    position: absolute;
    left: -1px;
    z-index: 3;
    top: 1px;
    width: 20px;
    height: 20px;
    opacity: 0;
}

.resultRadio input[type="radio"]:checked+label:before,
.resultRadio input[type="radio"]:not(:checked)+label:before{
    content: '';
    position: absolute;
    left: 0px;
    top: 2px;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    border-radius: 100%;
    background: #fff;
    z-index: 1;
}

.resultRadio input[type="radio"]:checked+label:after,
.resultRadio input[type="radio"]:not(:checked)+label:after{
    content: '';
    width: 12px;
    height: 12px;
    background: #14593b;
    position: absolute;
    top: 5px;
    left: 3px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    z-index: 1;
}

.resultRadio input[type="radio"]:not(:checked)+label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}

.resultRadio input[type="radio"]:checked+label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

#viewData #ProjectTaskNames {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    flex-direction: row;
    gap: 12px;
    margin-top: 10px;
}

#viewData #ProjectTaskNames div>p {
    padding: 3px;
}
#ProjectTaskNames > div{
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #1c1c1e;
    padding: 10px;
    border-radius: 12px;
    padding-top: 5px;

}
#ProjectTaskNames div textarea{
    width: 251px;
}
.error{
    color: red;
}

/* taskwise feedback in view part */
#ProjectTaskName div div{
    width: 251px;
}
#ProjectTaskName div p{
    text-align: right;
}
#ProjectTaskName div {
    background: var(--card);
    padding: 10px;
    border-radius: 12px;
}


/* project passed download certificate */
#projectDownloadCrt .fullnameConatiner h1{
    margin-top: 10px;
    margin-bottom: 20px
}
#projectDownloadCrt .fullNameContent{
   margin-bottom: 5px;
}
#projectDownloadCrt #fullName_Error{
    color: red;
    font-size: 14px;
}
#submitFullName{
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
}

/* labcertificate and projectcertificate part */
.content-body .certificatePart{
    cursor: pointer;
}

/* add slot */
.datepickerRepeater{
    background: #232325ab;
    border: 1px solid #212225;
    padding: 15px;
    border-radius: 20px;
}
.datepickerRepeater .slotCreationDatepicker{
    display: flex;
    gap: 15px;
    min-width: 350px;
}
.timeChips{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}
.timeChips div{
    border: 1px solid var(--primary-hover);
    background-color: var(--primary-hover);
    border-radius: 12px;
    padding: 7px 10px;
    display: flex;
    align-items: center;
    gap: 5px;    
}
.datepickerRepeater .slotBookContainer{
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}
#slotCreationModal button[aria-label="Close"] span{
    font-size: 35px;
}
.slotBookContainer .calenderWrapper{
    display: flex;
    align-items: center;
    gap: 12px;
    width: 200px;
}
.datepickerRepeater .icon{
    background-color: var(--primary-hover);
}
.slotBookContainer .removeBtn{
    background-color:rgb(255 0 0 / 24%)
}
.formRepeater .form_content_list{
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 600px;
    overflow: auto;
}
.timeSlotError{
    text-align: right;
    margin-top: 5px;
    color: red;
    font-weight: 500;
    font-size: 13px;
}

/* slot booking modal */
.booking-input .form-input {
    border: none;
    padding: 0px;
}
.booking-input .ui-datepicker-title{
    display: flex;
}
.booking-input .select2-container--default .select2-selection--single .select2-selection__arrow b{
    left: 10px;
}
.booking-input .ui-datepicker-title span{
    width: 100% !important;
}
.book-header{
    font-size: 35px;
    text-align: center;
}
.booking-input{
     margin-top: 35px;
}
.time_slot_checkboxs{
    display: flex;
    gap: 14px;
    margin-top: 15px;
    flex-wrap: wrap;
    max-height: 151px;
    overflow: auto;
    margin-bottom: 10px;
}
.time_slot_checkboxs div{
    display: flex;
    align-items: center;
    border: 1px solid var(--primary-light);;
    border-radius: 8px;
    font-size: 16px;
    position: relative;
    justify-content: center;
    padding: 12px;
}
.time_slot_checkboxs div:hover{
    background-color: var(--primary-hover);
}
.time_slot_checkboxs .selectedTime:hover{
    background-color: var(--primary-light);
}
.time_slot_checkboxs input{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    opacity: 0;
    cursor: pointer;
}
.time_slot_checkboxs div label{
    margin-bottom: 0px;
}
.selectedTime{
    background-color: var(--primary-light);
}
.book_interview_btn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.book_interview_btn:disabled{
    background-color: #4d4d4d;
    cursor: not-allowed;
}

.time_slot_checkboxs::-webkit-scrollbar-track {
    background: #888; 
}

.time_slot_checkboxs::-webkit-scrollbar-thumb {
    background: var(--primary);
}
.time_slot_checkboxs::-webkit-scrollbar {
    width: 8px; 
}

/* regeneration screen after submit data of practitioner slot */
.dateContainer{
    width: 200px;
}

@media only screen and (max-width:991px) {
    .editPractitionerContent .starRatingContainer {
        margin-top: 25px;
    }
}

@media only screen and (max-width: 1366px) {

    .video-collapse,
    .course-video .material {
        display: none;
    }

    .course-video .videoBox {
        width: 100%;
        padding: 30px;
    }

    .material-box.dp2 {
        display: block !important;
    }

    .material-box.dp1 {
        display: none;
    }

    #videoCollapse {
        display: block !important;
    }

    #viewUserDetails .course {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 1200px) {
    .dataTables ul.dtr-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dataTables ul.dtr-details li.hiddenColumn.extra {
        grid-column: 1 / 3;
    }
}

@media only screen and (max-width: 1100px) {
    #viewUserDetails .course {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 991px) {
    #viewCompanyDetails .basic-info {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #viewUserDetails .violation-info>div {
        max-width: 100%;
        flex: auto;
    }
}

@media only screen and (max-width: 767px) {
    .inner-wrapper {
        margin-top: 0 !important;
    }

    .content-body {
        padding-top: 40px;
        margin: 0 10px;
    }

    .page-header {
        display: none;
    }

    .content-with-menu-has-toolbar .inner-toolbar {
        top: -30px;
    }

    .content-with-menu .inner-body.mg-main {
        width: 100%;
    }

    ul.nav-main li a {
        flex-direction: row;
        justify-content: flex-start;
        gap: 10px;
    }

    .video-collapse.active {
        position: fixed;
        top: 0;
        right: 0 !important;
    }

    .video-collapse.active .collapse-body {
        height: 100vh;
    }

    .dataTables_filter {
        flex-direction: column-reverse;
        align-items: flex-end;
        gap: 10px;
    }

    .dataTables_wrapper .dt-buttons.btn-group {
        flex-wrap: wrap;
    }

    .dataTables_length label {
        margin-top: 10px;
    }

    #viewUserDetails .course {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .course-basic {
        flex-direction: column;
    }

    .course-management .course-image {
        max-width: 100%;
    }
}

@media only screen and (max-width: 525px) {
    .dataTables ul.dtr-details {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .dataTables ul.dtr-details li.hiddenColumn.extra {
        grid-column: 1 / 2;
    }

    #viewUserDetails .course {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .course-lesson .lesson {
        flex-direction: column !important;
    }
}

@keyframes lineAnim {
    0% {
        left: -40%;
    }

    50% {
        left: 20%;
        width: 80%;
    }

    100% {
        left: 100%;
        width: 100%;
    }
}

@keyframes zoom-in {
    0% {
        transform: scale(0.5);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes zoom-out {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes slide-up {
    0% {
        transform: translateY(700px);
    }

    100% {
        transform: translateY(-1000px);
    }
}

@keyframes rotationBack {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.content-body #coursecrt-tab {
    cursor: pointer;
}

.dropdown-menu .inner{
overflow-y: auto !important;
height: 290px;
width: 100%;
}
.figure {
    background: #1d1d1d;
    display: inline-block;
    margin: 10px;
    max-width: 280px;
    min-width: 230px;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 100%;
}

.figure * {
    -webkit-transition: all 0.35s ease;
    transition: all 0.35s ease;
}

/* Section 2 - Hover Effect #02 */

section.section-2 {
    background: var(--black);
    color: #efefef;
    display: none;
}

.section-2 .figure {
    color: #1d1d1d;
    border-radius: 5px;
}

.section-2 .figure img {
    vertical-align: top;
    max-width: 100%;
    backface-visibility: hidden;
    height: 250px;
    max-height: 100%;
}

.section-2 .figure figcaption {
    line-height: 1.1em;
    overflow: hidden;
    height: 50px;
    max-width: 100%;
    border-radius: 5px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding-left: 10px;
    padding-right: 8px;
}

.section-2 .figure h3 {
    text-transform: uppercase;
    font-size: 0.9em;
    margin: 0;
    letter-spacing: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    /* number of lines to show */
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

.section-2 .figure i {
    color: var(--white);
    display: none;
}

.section-2 .figure:hover i {
    display: block;
}

.section-2 .figure span {
    display: none;
}

.section-2 .figure span:hover {
    color: var(--white);
    margin-bottom: 7px;
    display: block;
}

.section-2 .figure h3.hover {
    color: #efefef;
    display: none;
}

.section-2 .figure a {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.section-2 .figure .title {
    font-weight: bold;
}

.section-2 .figure .hover {
    transform: translatey(50%);
}

.section-2 .figure:hover>img,
.section-2 .figure.hover>img {
    opacity: 0.7;
}

.section-2 .figure:hover figcaption,
.section-2 .figure.hover figcaption {
    background-color: #1d1d1d;
    padding-bottom: 20px;
}

.section-2 .figure:hover .title,
.section-2 .figure.hover .title {
    -webkit-transform: translateY(-150%);
    transform: translateY(-150%);
}

.section-2 .figure:hover .hover,
.section-2 .figure.hover .hover {
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

/* table wrapper css */
.tableListWrapper{
    background-color: var(--card);
    padding: 12px;
    border-radius: 15px;
    padding-bottom: 25px;
    position: relative;
}
.adminUserProject #main-loader{
    background: #0000008a;
    z-index: 3000 ;
}

/*interview-result-form*/
#interviewResultModal .close{
    font-size: 35px;
    font-weight: 500;
}
#interviewResultModal .interview-data-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
#interviewResultModal .interview-data-btn:disabled{
    background-color: #464242;
}

.interview-form{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.interview-form .feedback-label{
    color: var(--light-white);
}

/* serch-certificate view */
.search-person-information {
    position: relative;
}

.certificateDownload {
    position: absolute;
    left: 10px;
    bottom: 7px;
}

#certificate-download {
    width: 4.2em;
    height: 4.2em;
    border-top: 3px solid rgb(16 255 151);
    border-radius: 50%;
    position: absolute;
    animation: rotation 1s linear infinite;
    z-index: 2;
    cursor: wait;
    left: 4px;
    bottom: 4px;
}

.downloadFillGreen {
    fill: var(--primary);
}

.downloadFillWhite {
    fill: #fff;
}

#courseExamList .chipSmall {
    font-size: var(--small);
    line-height: 10px;
}

/*rating start*/
.ratingControl {
    position: relative;
    display: inline-flex;
    direction: rtl;
}

.ratingControl__radio {
    position: absolute;
    height: 0;
    width: 0;
    opacity: 0;
}

.ratingControl__star {
    position: relative;
    display: block;
    height: 24px;
    width: 12px;
    cursor: default;
    overflow: hidden;
}

.ratingControl.hover .ratingControl__star {
    cursor: pointer;
}


.ratingControl__star:nth-last-of-type(odd)::before,
.ratingControl__star:nth-last-of-type(odd)::after {
    left: 0;
    clip-path: polygon(53% 0%, 53% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.ratingControl__star:nth-last-of-type(even)::before,
.ratingControl__star:nth-last-of-type(even)::after {
    right: 0;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%);
}

.ratingControl__star::before,
.ratingControl__star::after {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
}

.ratingControl__star::before {
    width: 200%;
    background-color: #FFF;
}

.ratingControl__star::after {
    background-color: var(--primary-light);
}

.ratingControl.hover .ratingControl__star:hover::after,
.ratingControl.hover .ratingControl__star:hover~.ratingControl__star::after,
.ratingControl__radio:checked~.ratingControl__star::after {
    width: 200%;
}

/*rating end*/
/* student project list */
.content-body #myproject-tab {
    cursor: pointer;
}

.content-body .ProjectListBottomLabel {
    margin-top: -57px;
}

.content-body #projectLists_filter label {
    display: flex;
    align-items: center;
    gap: 12px;
}

.content-body .taskTooltips {
    border: 1px solid red;
}

/* assign practitioner*/
.assignUser {
    vertical-align: middle !important;
}

#assignPractitionerModal .PractitionerContainer {
    width: 100%;
}

#assignPractitionerModal .PractitionerHead {
    margin-bottom: 25px;
    font-weight: 500;
}

#assignPractitionerModal .selectPractitioner {
    font-size: 16px;
    font-weight: 600;
    text-align: right;
    display: flex;
    gap: 14px;
    align-items: baseline;
    justify-content: center;
}

#assignPractitionerModal .selectPractitioner .bootstrap-select>.dropdown-toggle {
    background-color: black;
    color: white;
}

#assignPractitionerModal .bootstrap-select .dropdown-toggle .filter-option {
    width: auto;
}

#assignPractitionerModal .bs-searchbox .form-control {
    background-color: black !important;
    color: white !important;
}

#assignPractitionerModal .selectPractitioner label {
    margin-bottom: 0px;
}

/* upcomming metting design */
.meeting-wrapper .meet-head{
    color: var(--primary);
}
.meeting-wrapper .nav-tabs{
    background-color: var(--black) !important;
}
.meeting-wrapper .meet_wrapper{
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.meeting-wrapper .meetingShowCardWrapper{
    background-color: var(--black);
    padding: 10px;
    border-radius: 10px;
    width: fit-content;
    text-align: right;
}
.meetingShowCardWrapper .desc{
    width: 15rem;
    margin-top: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5em;
    max-height: 4.5em;
}
.meetingShowCardWrapper .meet-title{
    color: var(--primary);
}
.meeting-wrapper .meeting-img{
    width: 15rem;
    border-radius: 10px;
}
.meeting-wrapper .nav_content_wrapper{
    background-color: var(--card);
    padding: 5px;
    border-radius: 8px;
}
.interview_wrapper .desc{
    margin-top: 5px;
    -webkit-line-clamp: 1;
}
.interview_wrapper .meet-title{
    width: 15rem;
}
.interview_wrapper{
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
/* reassign and delete slot code*/
#reassignAndDeleteModel .PractitionerContainer {
    width: 100%;
}

#reassignAndDeleteModel .PractitionerHead {
    margin-bottom: 25px;
    font-weight: 500;
}

#reassignAndDeleteModel .selectPractitioner {
    font-size: 16px;
    font-weight: 600;
    text-align: right;
    display: flex;
    gap: 14px;
    align-items: baseline;
}

#reassignAndDeleteModel .selectPractitioner .bootstrap-select>.dropdown-toggle {
    background-color: black;
    color: white;
}

#reassignAndDeleteModel .bootstrap-select .dropdown-toggle .filter-option {
    width: auto;
}

#reassignAndDeleteModel .bs-searchbox .form-control {
    background-color: black !important;
    color: white !important;
}

#reassignAndDeleteModel .selectPractitioner label {
    margin-bottom: 0px;
}
#reassignAndDeleteModel .radiowrapper{
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* calender chnages */
.zoom-wrapper{
    width: 100%;
}
.zoom-content{
    border: 1px solid var(--card);
    padding: 4px;
    border-radius: 10px;
    background-color:var(--card);
    margin-bottom: 6px;
}
.zoom-wrapper li{
    border-radius: 10px;
}
.zoom-wrapper .nav-active{
    background-color: var(--primary-light);
}
.zoom-wrapper>:first-child:hover{
    background-color: var(--primary-hover);
}
.zoom-wrapper .showelement:hover{
    background-color: var(--primary-hover);
}
.zoom-wrapper .nav-active:hover{
    background-color: var(--primary-light);  
}
.interview-modal-content{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fieldError{
    color: red;
    font-size: 13px;
}

/* course Flow arrangement css */
#course_Flow .flow-select-wrapper{
    display: flex;
    justify-content: space-between;
}
#course_Flow .select2-container{
    width: 350px !important;
}
#course_Flow .flow-select-wrapper input[name="courseFlowName"]{
    width: 350px;
}
#course_Flow .sortable li{
    list-style: none;
    display: flex;
}
#course_Flow .sortable{
    border: 1px solid var(--card);
    padding: 20px;
    background-color: #4b4c4f61;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#course_Flow .sortable li .course_flow_wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background-color: black;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}
#course_Flow .sortable li div p{
    font-size: 16px;
}
#course_Flow .sortable li div textarea{
    width: 350px;
}
#course_Flow .sortable li .drag-handle{
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1b1f2b;
    cursor: move;
}
#course_Flow .flow-set-btn{
    display: flex;
    align-items: center;
    gap: 5px 
}
#course_Flow .flow-select-wrapper>:first-child{
    display: flex;
    flex-direction: column;
}
#course_Flow .course_flow_wrapper>:nth-child(2){
    display: flex;
    flex-direction: column;
}
#course_Flow .makatCourseLogo{
    width: 80px;
    height: 80px;
}
#course_Flow .imgAndNameContent{
    display: flex;
    flex-direction: column;
    gap: 2px
}
#course_Flow #courseFlowList_wrapper .dt-buttons{
    position: absolute;
    right: 0px;
    top: 6px;
}
#course_Flow #courseFlowList_wrapper .select2-container{
    width: auto !important;
}
#course_Flow #coursesHtml{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}
#course_Flow #coursesHtml span{
    border: 1px solid var(--primary-light);
    padding: 5px;
    background-color: var(--primary-light);
    border-radius: 8px
}
#manage_users{
    padding-bottom: 35px !important;
}

.input_error{
    color: red;
    font-size: 14px;
    margin-top: 2px;
}
#editCourseFlow #editSelectedMakatCourse{
  width: 350px;
}
#viewCourseFlow #viewSelectedMakatCourse{
    width: 350px;
  }

/* view course flow design */
#course_Flow .preview{
   padding: 9px;
}
#course-Flow-contents .sortable li .course_flow_wrapper{
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}
#viewCourseFlow label{
    text-align: left;
    font-size: 16px;
    color: var(--primary);
}

/* course preview css */
/* === This project is still under development and will probably contain bugs == */
#coursePreviewModal .preview-wrapper{
    max-width: 80%;
}
#coursePreviewModal .video-title{
    font-size: 30px;
}
#coursePreviewModal .headwithIbutton{
    display: flex;
    align-items: baseline;
    gap: 8px;
    justify-content: center;
}
#coursePreviewModal .headwithIbutton i{
    font-size: 18px;
}

#coursePreviewModal .wrap {
    color: #3acb8c;
    font-size: 14px;
    line-height: 21px;
    max-width: 1840px;
    padding: 0 40px;
    margin: 0 auto;
    position: relative;
  }
  #coursePreviewModal .wrap .tooltiptext{
    width: 200px;
    left: 50px
  }

  #coursePreviewModal .btn{
    min-width: 150px;
    margin-bottom: 10px;
    color: #fff;
    display: inline-block;
    font-weight: 600;
    padding: 10px 20px;
    text-align: center;
    font-size: 14px;
    line-height: 1.4;
    transition: background .25s ease;
    border: none;
    white-space: normal;
    vertical-align: middle;
    overflow: visible;
    cursor: pointer;
    font-family: 'Poppins',sans-serif;
    text-decoration: none;
    background-color: #beac95;
  }
  #coursePreviewModal .btn-btn-oranje {background-color: #3acb8c; color: white;}
  #coursePreviewModal .timeline{
    overflow-x:auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    background-repeat: repeat-x;
    background-size: 10px 2px;
    background-position: center top 46%;
    /* background-image: -webkit-gradient(linear,left top,right top,color-stop(66%,#000),color-stop(0,transparent));
    background-image: linear-gradient(90deg,#3acb8c 66%,transparent 0);
    padding: 50px 0; */
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 100%;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
    flex-flow: row nowrap;




  }
  #coursePreviewModal .timeline-item{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:flex;
    justify-content: space-between;
    flex-flow:wrap;
    cursor: pointer;
    padding:0 50px;
    height:auto;
z-index: 2;

    display: flex;
    flex-direction: column;
    position: relative;

  }
  #coursePreviewModal .timeline-item.disable{pointer-events: none;}
  #coursePreviewModal .i-is-active.timeline-item{cursor:default;}
  #coursePreviewModal .timeline-content{width:100%;}
  #coursePreviewModal .p-timeline-item:hover{transform:scale(1.1); transition:transform .3s ease; z-index: 2;}
  #coursePreviewModal .p-timeline-item.i-is-active{cursor: default;}
  #coursePreviewModal .p-timeline-carmodel{width:100%;}
  #coursePreviewModal .p-timeline-carmodel{margin-top: 5px;margin-bottom: 10px;}

  #coursePreviewModal .p-timeline-block {
    min-width:150px;
    min-height:150px;
    max-width:150px;
    max-height:150px;
    border: solid 0px black;
    background-color:#beac95;
    position:relative;
    border-radius: 20px;
    top:3px;
    margin-bottom:20px;
    z-index: 2;
  }

  #coursePreviewModal .p-timeline-item{
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap:wrap;
    min-width:150px;
    max-width:150px;
    position: relative;
    text-align:center;
  }
  #coursePreviewModal .timeline-item .timeline-span{border: 1px solid #3acb8c;position: absolute;width: 100%;left: 50%; top: 35%;}
  #coursePreviewModal .timeline-item:last-child span {border: none;}

  #coursePreviewModal .p-timeline-content{
    width:98%;
    height:0;
    position:absolute;
    overflow:hidden;
    visibility:hidden;
    opacity: 0;
    transform:translateX(-1000px);
    transition: none;
    padding: 50px 20px 20px 20px;
  }
  #coursePreviewModal .i-is-active.p-timeline-content{
    color: #3acb8c;
    height:auto;
    padding: 20px 20px 20px 20px;
    width:70%;
    position:relative;
    visibility: visible;
    opacity:1;
    transform:translateX(0px);
    -webkit-transition: all 0.9s ease-in-out;
    transition: all 0.9s ease-in-out;
    margin: 0 auto;
    border: 1px solid #3acb8c;
    border-radius: 20px;
  }
  .atuserSide .i-is-active.p-timeline-content {
    width: 40% !important;
}
  #coursePreviewModal .i-is-active.p-timeline-content .timeline-content-card{width:100%;text-align: center;}
  #coursePreviewModal .i-is-active.p-timeline-item:hover{transform: none;}
  #coursePreviewModal .mini.i-is-active.p-timeline-content h3 {color:#3acb8c;}
  #coursePreviewModal .timeline-content-image img{width:100%; height:auto; max-width:100%;border-radius: 20px;}
  #coursePreviewModal .p-timeline-content p {font-size:14px; line-height:21px; padding-right:30px; font-weight:300;color: #FFF;}

  /*progress*/
  #coursePreviewModal .progress {
    width: 150px;
    height: 150px !important;
    float: none;
    line-height: 150px;
    background: none;
    margin: 20px auto;
    box-shadow: none;
    position: relative;
  }
  #coursePreviewModal .progress:after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 12px solid #fff;
    position: absolute;
    top: 0;
    left: 0;
  }
  #coursePreviewModal .progress>span {
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: 1;
  }
  #coursePreviewModal .progress .progress-left {
    left: 0;
  }
  #coursePreviewModal .progress .progress-bar {
    width: 100%;
    height: 100%;
    background: none;
    border-width: 12px;
    border-style: solid;
    position: absolute;
    top: 0;
    border-radius:0px;
  }
  #coursePreviewModal .progress .progress-left .progress-bar {
    left: 100%;
    border-top-right-radius: 80px;
    border-bottom-right-radius: 80px;
    border-left: 0;
    -webkit-transform-origin: center left;
    transform-origin: center left;
  }
  #coursePreviewModal .progress .progress-right {
    right: 0;
  }
  #coursePreviewModal .progress .progress-right .progress-bar {
    left: -100%;
    border-top-left-radius: 80px;
    border-bottom-left-radius: 80px;
    border-right: 0;
    -webkit-transform-origin: center right;
    transform-origin: center right;
    animation: loading-1 1.8s linear forwards;
  }
  #coursePreviewModal .progress .progress-value {
    width: 90%;
    height: 90%;
    border-radius: 50%;
    background: #000;
    font-size: 24px;
    color: #fff;
    line-height: 135px;
    text-align: center;
    position: absolute;
    top: 5%;
    left: 5%;
  }
  #coursePreviewModal .progress.blue .progress-bar {
    border-color: var(--primary);
  }  /*progress*/




.button-container{
    clear: both;
    margin-top: 20px;
}
#coursePreviewModal .timeline::-webkit-scrollbar-track {
    background: #888;
}

#coursePreviewModal .timeline::-webkit-scrollbar-thumb {
    background: var(--primary);
}
#coursePreviewModal .timeline::-webkit-scrollbar {
    width: 6px;
    height: 5px;
}
.headerButton{
    background: #B4537F;
    padding: 15px;
    border-radius: 10px;
    margin-left: 10px;
}
.headerButton:hover{
    text-decoration: none;
    background: #B4537F;
    opacity: 0.5;
}

/* message Notification */
.messageNotification{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
    top: 5px;
    left: 5px;
}

/* laptop resolutions*/
@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {

  #coursePreviewModal .timeline{background-position: center top 48%;}
  #coursePreviewModal .i-is-active.p-timeline-content .timeline-content-card{width:100%;}
  #coursePreviewModal .i-is-active.p-timeline-content .timeline-content-image{width:100%;}
}
/*Tablet - Landscape*/
@media screen and (max-width: 1199px){
  #coursePreviewModal .timeline-content-title{font-size: 1.7em;}
  #coursePreviewModal .p-timeline-content time{font-size:1em;}
  #coursePreviewModal .p-timeline-block{min-width: 165px; min-height: 165px; max-width: 165px; max-height: 165px;}

}
/*Tablet - Portrait*/
@media screen and (max-width: 1020px){
  #coursePreviewModal .p-timeline-carmodel{margin:0;}
   #coursePreviewModal .wrap{padding:0 40px;}
  #coursePreviewModal .timeline-wrap{padding:0;}
  #coursePreviewModal .p-timeline-content{display:flex;flex-flow: column;}
  #coursePreviewModal .i-is-active.p-timeline-content .timeline-content-card, .i-is-active.p-timeline-content .timeline-content-card, .i-is-active.p-timeline-content .timeline-content-image{width:100%;}
  #coursePreviewModal .i-is-active.p-timeline-content .timeline-content-image{padding:0; order:0; margin-bottom:20px;}
  #coursePreviewModal .i-is-active.p-timeline-content .timeline-content-card{padding:0; order:1;}
  #coursePreviewModal .i-is-active.p-timeline-content{padding:0;width: 50%;}
  #coursePreviewModal .p-timeline-item{min-width: 150px; max-width: 150px;}
  #coursePreviewModal .timeline-content-button{padding:10px 0px;}

}
/* Mobile devices */
@media screen and (max-width: 768px){
    /* #coursePreviewModal .timeline{background-position: center top 47%;} */
    #coursePreviewModal .timeline-item{margin:0 10px;}
    #coursePreviewModal .p-timeline-block{min-width: 145px; min-height: 145px; max-width: 145px; max-height: 145px;}
    #coursePreviewModal .p-timeline-date{font-size:16px;}
    #coursePreviewModal .p-timeline-carmodel{margin:0; line-height:20px; font-size: 13px;}
    #coursePreviewModal .p-timeline-content time{line-height:20px;}
    #coursePreviewModal .p-timeline-content p{font-size:0.9em; padding-right:0px;}
    #coursePreviewModal .timeline-content-title{font-size:1.5em; line-height:1.3em;}
    #coursePreviewModal .close{right:0px;}
    #coursePreviewModal .timeline-title{line-height:1em; font-size:1.5em;}
    #coursePreviewModal .timeline::-webkit-scrollbar {height:4px;}
    #coursePreviewModal .i-is-active.p-timeline-content{padding:0;width: 80%;}

}

@media only screen and (max-width: 1000px){
    #course_Flow .flow-select-wrapper{
        flex-direction: column;
        gap: 15px;
    }
    #course_Flow .sortable li .course_flow_wrapper{
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
}
@media only screen and (max-width: 530px){
    #course_Flow .select2-container{
        width: 100% !important;
    }
    #course_Flow .flow-select-wrapper input[name="courseFlowName"]{
        width: 100%;
    }
    #course_Flow .sortable li div textarea{
        width: 100%;
    }
}



@media only screen and (max-width: 930px) {
    .certificate-information {
        flex-direction: column;
    }

    .certificate-information .serach-certificate-container {
        width: 100%;
    }

    .certificate-information .search-person-information {
        width: 100% !important;
    }

    .certificate-information .serach-certificate-container img {
        width: 200px;
    }
}

@media only screen and (max-width: 385px) {
    .certificate-information .serach-certificate-container img {
        width: 100%;
    }
}

@media only screen and (min-width: 1200px) {
    .content-body .container {
        max-width: 100%
    }
}
/* ===== Scrollbar CSS ===== */
  /* Scrollbar starts here */

* {
    scrollbar-color: var(--primary);
}

kbd {
    background-color: #151618;
    padding: 8px 15px;
    border-radius: 15px;
    border: 1px solid rgb(255 255 255 / 20%);
    margin: 5px;
}

/* width */
::-webkit-scrollbar {
    height: 5px;
    width: 5px;
}

.modal::-webkit-scrollbar {
    height: 0px;
    width: 0px;
}

/* Track */
::-webkit-scrollbar-track {
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 7px;
    transition: all 0.3s ease;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--secondary);
}

/* dynamic makat creation css */
#makat_list_wrapper .dt-buttons{
    position: absolute;
    right: 0;
    top: 6px;
}
#makatCourseHtml {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
 #makatCourseHtml span{
    border: 1px solid var(--primary-light);
    padding: 5px;
    background-color: var(--primary-light);
    border-radius: 8px;
}

#addMakatscr .makatInput{
    width: 30%;
}
.makatScr .makatInput input{
    height: 60px;
}
.makatScr .makatSelectMenu{
    width: 50%;
}
.makatScr .makatInfoWrapper{
    background-color: var(--card);
    border-radius: 10px;
    padding: 16px 0px;
}

.makatScr .access{
    background-color: black;
    padding: 12px;
    border-radius: 10px;
    width: 100%;
    cursor: pointer;
}

.makatScr .AccessAvailable{
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    opacity: 0;
    cursor: pointer;
}
.access:hover{
    background-color: var(--primary-hover) !important;
}
.makatScr .makatSelectMenu .select2-selection{
    border: 2px solid var(--white-border);
    height: auto;
}
.makatScr .makatSelectMenu .select2-selection__rendered > .select2-selection__choice{
    background-color: var(--card);
}
.makatScr .makatSelectMenu .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove{
    margin-left: 4px;
}
.makatScr .makatSelectMenu .select2-selection__rendered .select2-search input{
    color:white !important;
}
.makatScr .makatLabel{
    font-size: 17px;
}
.makatScr .courseContentBox{
    display: flex;
    align-items: center;
    background-color: var(--black);
    padding: 10px;
    border-radius: 12px;
    flex-direction: column;
    height: 100%;
}
.makatScr .courseContentBox img{
    width: 100%;
    height: 100px;
}
.makatScr .courseContentBox img:hover{
    scale: 1.04;
}
.makatScr .courseContentBox h4{
    font-size: 16px;
    word-wrap: break-word;
    width: 180px;
}
.makatScr .gridOfCourse{
    background-color: var(--card);
    padding-top: 14px;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.makatScr .makatInfoWrapper .form-input{
    height: 52px;
}

@media only screen and (max-width: 767px){
    .makatScr .makatInfoWrapper .MakatDivMargin{
        margin-top: 15px !important;
    }
}

/* view makat design */
#viewMakatScr .viewMakatInfoWrapper > div {
    background-color: var(--card);
    padding: 12px;
    border-radius: 10px;
    height: fit-content;
}
#viewMakatScr .viewMakatInfoWrapper{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
#viewMakatScr .viewMakatInfoWrapper p {
    color: var(--primary);
    word-break: break-word;
}
#viewMakatScr .listOfMakatCourses{
    margin: 12px 3px;
}
#viewMakatScr .viewDescriptionwrapper{
    background-color: var(--card);
    padding: 12px;
    border-radius: 10px;
    height: fit-content;
    margin-top: 12px;
}
#viewMakatScr .viewDescriptionwrapper p {
    word-break: break-word;
    color: var(--primary);
}


@media only screen and (max-width: 1000px){
    #viewMakatScr .viewMakatInfoWrapper{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media only screen and (max-width: 545px){
    #viewMakatScr .viewMakatInfoWrapper{
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}


/* custom timepicker css */
#customTimePicker .popover{
    top: 45px;
    right: -112px;
}
#customTimePicker .closePopover{
    background-color: #000;
    border: none;
    padding: 0px;
}
#customTimePicker .timePickerInput{
    width: 55px;
}
#customTimePicker .form-input[readonly]{
    background-color: #000 !important;
}

/* lab activity css */
.labActivityWrapper{
    width: 230px;
    background-color: var(--black);
    border-radius: 10px;
}
.courseimage img{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.labActivityHead{
    font-size: 28px;
    font-weight: bold;
    color: var(--primary);
}
.labActivityList .activity-feed {
    padding: 15px;
    list-style: none;
    padding-top: 5px;
}

.labActivityList .activity-feed .feed-item {
    position: relative;
    padding-bottom: 23px;
    padding-right: 30px;
    border-right: 2px solid var(--primary-light);
}

.labActivityList .activity-feed .feed-item:last-child {
    border-color: transparent;
}

.labActivityList .activity-feed .labActivityIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: -15px;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: #fff;
}

.labActivityList .activity-feed .feed-item .date {
    display: block;
    position: relative;
    top: -5px;
    color: #8c96a3;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
}
.labActivityList .activity-feed .feed-item .text {
    position: relative;
    top: -3px;
    color: var(--primary);
    font-weight: 600;
}
.labActivityList .loginLogsLabel{
    color: var(--primary)
}
.labActivityList{
    display: flex;
    position: relative;
    width: 85%;
    background: var(--black-light);
    padding: 30px;
    border-radius: 20px;
    height: 540px;
    overflow: hidden;
}
.activityFeedWrapper{
    width: 100%;
    direction: ltr;
    padding-right: 12px;
    z-index: 3;
    height: 540px;
    overflow: auto;
}

.activityFeedWrapper::-webkit-scrollbar-thumb {
    background: var(--primary);
    position: absolute;
    right: 0px
}
.activityFeedWrapper::-webkit-scrollbar {
    width: 4px;
}
.activityLabimg{
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    left: 0px;
    opacity: 0.4;
    z-index: 1;
}
.labActivityIcon img{
    height: 27px;
    width: 27px;
}
.activityLabimg svg{
    width: 100%;
    height: 100%;
}
.activityLabimg  svg#freepik_stories-cloud-sync:not(.animatedSvg) .animable{
   opacity: 1;
}

@media only screen and (max-width: 991px){
    #labModel .linuxbtnWrapper{
        flex-direction: column;
        gap: 4px;
    }
}

/* feedback list table */
.feedbackListWrapper .dataTables_wrapper table thead th {
    padding-right: 0.75rem !important;
}
#feedbackList_wrapper .dt-buttons .select2-container{
    width: 200px !important;
}
#feedbackList_wrapper .select2-container--default.select2-container--disabled .select2-selection--single{
    background-color: #31222275;
}
#feedbackList_wrapper .pagination{
    margin-bottom: 7px;
}
#feedbackList_wrapper .dt-buttons{
    width: 100%;
}
.feedbackSelection input[name="feedbackSelection"]{
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 3;
}
.feedbackSelection .custom-control-label::before{
    width: 20px;
    height: 20px;
}
.feedbackSelection .custom-control-label::after{
    top: 2px;
    right: 2px;
    width: 24px;
    height: 24px;
}
#notificationList .dataTables_wrapper table thead th {
    padding-right: 0px;
}
#feedbackNotificationPage{
    background-color: var(--modal);
    padding: 12px;
    border-radius: 14px;
}
#feedbackNotificationPage .Notification_view_top{
    display: flex;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    background-color: var(--black);
    padding: 16px;
    border-radius: 15px;
    font-size: 23px;
    color: var(--primary);
}
#feedbackNotificationPage .notificationMiddle{
    display: flex;
    gap: 15px;
    background-color: var(--black);
    border-radius: 15px;
    margin-top: 12px;
    padding: 12px;
}
#feedbackNotificationPage .notificationCourseImg{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 50%;
    text-align: center;
    gap: 5px;
    font-size: 18px;
    color: var(--primary);
}
.feedbackStatus{
    color: white;
    padding: 3px;
    border-radius: 5px;
}
#feedbackNotificationPage .notificationBasicInfo{
    display: flex;
    flex-direction: column;
    width: 50%;
    gap: 8px;
}
#feedbackNotificationPage .notificationBasicInfo .feedbackTicketBtnWrapper{
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
#feedbackNotificationPage .videoInfo{
    font-size: 18px;
    color: var(--primary);
}

#feedbackNotificationPage .categoryInfo{
    font-size: 18px;
    color: var(--primary);
}
#notificationList_wrapper {
    background-color: var(--black);
    border-radius: 15px;
}
#notificationList_wrapper table{
    padding: 15px;
}

/* video feedback form css */
#videoFeedbackModal h2 {
    margin: 0px;
}
#videoFeedbackModal label{
    font-size: 16px;
}
#videoFeedbackModal .select2-container {
    width: 100% !important;
}
#videoFeedbackModal form{
    display: flex;
    flex-direction: column;
    gap: 12px;
}
#videoFeedbackModal .poorRating{
    color: #ed2f2f;
    font-size: 16px;

}
#videoFeedbackModal .excellentRating{
    color: #2aa942;
    font-size: 16px;

}
#videoFeedbackRating{
    display: flex;
    align-items: flex-start;
    gap: 7px;
}

/* feedback resolve form */
#sendNotificationModal .feedbackResolveForm{
    display: flex;
    flex-direction: column;
    gap: 5px;
}
#sendNotificationModal .feedbackResolveForm label{
    font-size: 18px;
}
#sendNotificationModal .headNotificationModal p {
    font-size: 25px;
}
#pressSendAllNotification:disabled{
    background-color: #31222275;
}

/* bulk user creation feature css */
.multipleCreateUserPopup h2{
    margin-top: 0px;
}
#multipleCreateUserPopup button[data-dismiss="modal"]:disabled{
    background-color: #372828db;
}
.animatedSvg{
    display: none;
}
.activeSvgLoader{
    display: block !important;
}
.validateDataPopup .validateDataWrapper{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.validateDataPopup .modal-dialog{
    max-width: 80%;
}
.validateDataPopup .rightUserDataContent{
    background-color: var(--black);
    border-radius: 12px;
    padding: 20px;
}
.validateDataPopup .wrongUserDataContent{
    background-color: var(--black);
    border-radius: 12px;
    padding: 20px;
}
.validateDataPopup #wrongUserInfo .tooltiptext{
    text-align: right;
    padding: 6px;
    margin-left: 0px;
    bottom: 63%;
    left: -122px;
    width: 265px;
}
.errorColumnUserCreate{
    width: 100px;
}

.validateDataPopup #sendUserCreation:disabled{
    background-color: grey;
}
.finalUserCreationDataModal .modal-dialog{
    max-width: 580px;
}
.finalUserCreationDataModal .modal-header h1{
    font-size: 27px;
}
.finalUserCreationDataModal .finalUserDataWrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.finalUserCreationDataModal .finalUserDataWrapper section> div{
    background-color: var(--black);
}
.finalUserCreationDataModal .userAccountNum{
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.finalUserCreationDataModal .userAccountNum > div{
    display: flex;
    flex-direction: column;
    padding: 15px;
    width: 100%;
    border-radius: 15px;
    gap: 4px;
}
.finalUserCreationDataModal .noCreateUserEmail > div{
    border-radius: 15px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.finalUserCreationDataModal .noCreateUserEmail ul{
    list-style-position: inside;
    word-break: break-all;
    display: flex;
    flex-direction: column;
    gap: 7px;

}
.finalUserCreationDataModal .noCreateUserEmail ul li{
    color: var(--primary);
}
.finalUserCreationDataModal .noCreateUserEmail ul li::marker{
    color: rgba(255, 255, 255, 0.6)
}
.finalUserDataWrapper span.text-light{
    font-size: 17px;
}
.finalUserDataWrapper span:not(.text-light){
    color: var(--primary);
}

@media only screen and (max-width: 941px) {
    .finalUserCreationDataModal .userAccountNum{
        flex-direction: column;
    }
}

/* feedback resolved css */
.feedbackResolveContainer{
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}
.feedbackResolveDataWrapper{
    background-color: var(--black);
    padding: 12px;
    width: 100%;
    border-radius: 12px;
    display: grid;
    gap: 10px;
    grid-template-columns: 3fr 1.5fr 1.5fr;
}
.feedbackResolveDataWrapper>div{
    display: flex;
    gap: 5px;
}
.feedbackResolveDataWrapper>div span:nth-child(1){
    min-width: max-content;
}
.feedbackResolveDataWrapper>div span:nth-child(2){
    word-break:  break-word;
  }
.feedbackResolveDataWrapper>div>span:nth-child(2){
    color: var(--primary);
}
.feedbackResolveDataWrapper>div>span:first-child{
    font-size: 17px;
}
.feedbackTabsWrapper .select2-container{
    width: 208px !important;
}
#todoFeedbackTable_length .select2-container{
    width: auto !important
}
#inReviewFeedbackTable_length .select2-container{
    width: auto !important
}
#completedFeedbackTable_length .select2-container{
    width: auto !important
}
.feedbackTabsWrapper .dt-buttons{
    display: flex;
    justify-content: flex-start;
}
.feedbackTabsWrapper .select2-container--default.select2-container--disabled .select2-selection--single{
  background-color: #332c2c
}

@media only screen and (max-width: 970px){
    .feedbackResolveDataWrapper{
        grid-template-columns: auto
}

}

/* new assign practitioner validation related css */
#newAssignPractitionerBtn:disabled{
    background-color: #3d3636
}

/* notification bell icon design changed css */
#notificationListPopup .secondaryGifWrapper img{
    width: 100%;

}
#notificationListPopup .dateWithReadButton{
    word-break: break-word;
    display: flex;

}
#notificationListPopup .sub .readMoreText{
    color: var(--primary);
}
#notificationListPopup .sub .readMoreText:hover{
   color: var(--white);
}
#notificationListPopup .sub .readMoreText:active{
    scale: 1.1;
}

/* login logs css */
svg#freepik_stories-cloud-sync:not(.animated) .animable {
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated
    #freepik--Floor--inject-2 {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0s;
}

svg#freepik_stories-cloud-sync.animated #elqm6muwnla9 {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomOut;
    animation-delay: 0s;
}

svg#freepik_stories-cloud-sync.animated #elxthdimqi3rq {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomOut;
    animation-delay: 0.029411764705882353s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elslb0o5ikvnq {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomOut;
    animation-delay: 0.058823529411764705s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elkqfmey63nu {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomOut;
    animation-delay: 0.08823529411764705s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elj0w23jkxqeb {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomOut;
    animation-delay: 0.11764705882352941s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elz507vpxrydi {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomOut;
    animation-delay: 0.14705882352941177s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elcd91o2pkaa {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomOut;
    animation-delay: 0.1764705882352941s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elo9mrexwho6j {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomOut;
    animation-delay: 0.20588235294117646s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #el9om6qcva0rn {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomOut;
    animation-delay: 0.23529411764705882s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elc3v89o375ec {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomOut;
    animation-delay: 0.2647058823529412s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #el36wokfjh1a4 {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomOut;
    animation-delay: 0.29411764705882354s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elk8qodsygs6q {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomOut;
    animation-delay: 0.3235294117647059s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #el8p75xuwvoh {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomOut;
    animation-delay: 0.3529411764705882s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elutg5e7e0mkb {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomOut;
    animation-delay: 0.38235294117647056s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elvwah3c7yml {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomOut;
    animation-delay: 0.4117647058823529s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #eleaakfgto6r {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomOut;
    animation-delay: 0.4411764705882353s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elohm0wqiiw9s {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomOut;
    animation-delay: 0.47058823529411764s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #ell5sf0340b08 {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomOut;
    animation-delay: 0.5s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #el72ohvqgt7v9 {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomOut;
    animation-delay: 0.5294117647058824s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elz1mbf25bynb {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomOut;
    animation-delay: 0.5588235294117647s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #el3s9wk6z9gb3 {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomOut;
    animation-delay: 0.5882352941176471s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #ell6gvew75q0m {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomOut;
    animation-delay: 0.6176470588235294s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elkk3e8nqg57j {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomOut;
    animation-delay: 0.6470588235294118s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #el5wvd72l91vk {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomOut;
    animation-delay: 0.6764705882352942s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elpi26ys6uh49 {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomOut;
    animation-delay: 0.7058823529411764s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #eljm4s6uj9hdo {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomOut;
    animation-delay: 0.7352941176470588s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elsjvxoljw21s {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomOut;
    animation-delay: 0.7647058823529411s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elcuhsgmvz7vf {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomOut;
    animation-delay: 0.7941176470588235s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #eldws1sjekl1 {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomOut;
    animation-delay: 0.8235294117647058s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elmket1m2t3r9 {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomOut;
    animation-delay: 0.8529411764705882s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #el1n415v5k0tf {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomOut;
    animation-delay: 0.8823529411764706s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elm4p06z2e27e {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomOut;
    animation-delay: 0.9117647058823529s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elmyw5j9ih7ms {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomOut;
    animation-delay: 0.9411764705882353s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #el41seqbrddjs {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomOut;
    animation-delay: 0.9705882352941176s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated
    #freepik--Plant--inject-2 {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomOut;
    animation-delay: 0s;
}

svg#freepik_stories-cloud-sync.animated
    #freepik--Cloud--inject-2 {
    animation: 1s 1 forwards
            cubic-bezier(0.36, -0.01, 0.5, 1.38) lightSpeedRight,
        1.5s Infinite linear floating;
    animation-delay: 0s, 1s;
}

svg#freepik_stories-cloud-sync.animated #el6wgdghosbq9 {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0s;
}

svg#freepik_stories-cloud-sync.animated #elqlexfun7av9 {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.018518518518518517s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elzgaivowqjgm {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.037037037037037035s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #el9srs25que4 {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.05555555555555555s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #el2zvwmvqe6ux {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.07407407407407407s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elelfovyddabq {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.09259259259259259s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elsebehumy6o8 {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.1111111111111111s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #ely5849lc1hsc {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.12962962962962962s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elwndbmx7v5t {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.14814814814814814s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #ells4avb7iqu {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.16666666666666666s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #el5ajrzzntidw {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.18518518518518517s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elnblkab8xb4c {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.2037037037037037s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elpw0jlhq9n6 {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.2222222222222222s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elo4catlflov {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.24074074074074073s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elihx941cann {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.25925925925925924s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elmevbd8tsbrm {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.2777777777777778s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elki8s80f1gei {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.2962962962962963s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #eljus9q372kn {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.31481481481481477s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elarbt149cv1t {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.3333333333333333s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #eldpm9glpte5s {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.35185185185185186s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #el61ovlyfczwi {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.37037037037037035s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elrcicsjscj3q {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.38888888888888884s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elmmyviqgnca {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.4074074074074074s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elbp5c1ju52f {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.42592592592592593s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elvdllsxm3p4 {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.4444444444444444s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elz1yej0ecui {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.4629629629629629s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elu8hqvb2eap {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.48148148148148145s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elcei45q0rkgs {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.5s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #el6s0h133ck69 {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.5185185185185185s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elbirgbcw83h9 {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.537037037037037s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #eljhx7ejd98m {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.5555555555555556s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elpmljvgy5uk {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.5740740740740741s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elfd1hgk0dim {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.5925925925925926s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elzijopw092vd {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.611111111111111s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #el4eo2n49vp9k {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.6296296296296295s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elcrlsd1wz2v7 {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.6481481481481481s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #eloulv2f1ayjb {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.6666666666666666s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elqh2b91o91bj {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.6851851851851851s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elorrlo22213j {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.7037037037037037s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #el72wr99z82qi {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.7222222222222222s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elpyulqqthgki {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.7407407407407407s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #eldr6q7nbtcpj {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.7592592592592592s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #el5t6icppxldi {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.7777777777777777s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #eli4zi8tucrh {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.7962962962962963s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elzujiw26k30b {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.8148148148148148s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elx5isisl1gio {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.8333333333333333s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elbngfdy413ag {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.8518518518518519s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elq3xtjbltco {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.8703703703703703s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elfgstsoetd4q {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.8888888888888888s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elnluz5lfn8e {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.9074074074074073s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #eljhi398nzazl {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.9259259259259258s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elsaj4leotus {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.9444444444444444s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #el3njdcd7l827 {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.9629629629629629s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated #elldqjej04ob {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn;
    animation-delay: 0.9814814814814814s;
    opacity: 0;
}

svg#freepik_stories-cloud-sync.animated
    #freepik--Files--inject-2 {
    animation: 1s 1 forwards
            cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomIn,
        1.5s Infinite linear floating;
    animation-delay: 0s, 1s;
}

svg#freepik_stories-cloud-sync.animated
    #freepik--Character--inject-2 {
    animation: 1s 1 forwards
        cubic-bezier(0.36, -0.01, 0.5, 1.38) zoomOut;
    animation-delay: 0s;
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes zoomOut {
    0% {
        opacity: 0;
        transform: scale(1.5);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes lightSpeedRight {
    from {
        transform: translate3d(50%, 0, 0) skewX(-20deg);
        opacity: 0;
    }

    60% {
        transform: skewX(10deg);
        opacity: 1;
    }

    80% {
        transform: skewX(-2deg);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes floating {
    0% {
        opacity: 1;
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

.animator-hidden {
    display: none;
}
/* primary notification table css */
.onlyPrimaryNotificationText{
    width: 40vw !important;
}
/* primary notification css */
.primaryNotificationModel .modal-body{
    padding: 0px;
    margin: 0px !important;
}
.primaryNotificationModel .modal-dialog{
    max-width: 450px;
}
.primaryNotificationModel .notificationGif img{
    height: 100%;
}
.primaryNotificationModel .primaryNotificationText{
    padding: 12px;
    font-size: 16px;
    height: max-content;
    overflow: auto;
    scroll-behavior: smooth;
}
.primaryNotificationModel .primaryNotificationText p{
    word-break: break-word;
}
.primaryNotificationModel button{
    margin-bottom: 8px;
    margin-top: 5px;
}

/* notification tab css */
#notificationTable_wrapper .dt-buttons{
    position: absolute;
    right: 0px;
    top: 5px;
}
#notificationTable_length{
    position: absolute;
    right: 0px;
}
#notificationTable_info{
    bottom: -24px;
}
#notificationTable .notificationText{
    width: 20vw !important;
}
.notificationTableWrapper{
    padding-bottom: 35px;
}
@media only screen and (max-width: 880px){
    #notificationTable_length{
     position: relative;
}
}

/* notification sent screen css */
.specialNotificationSendModal .dropDownWrapper{
    display: flex;
    gap: 12px;
}
.specialNotificationSendModal .dropDownWrapper > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
    font-size: 17px;
    width: 50%;
}
.specialNotificationSendModal .dropDownWrapper .select2-container{
    width: 100% !important;
}
.specialNotificationSendModal .notificationTextWrapper{
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 17px;
}
.specialNotificationSendModal .quillTextField{
    border: 2px solid var(--white-border);
    border-top: 2px solid var(--white-border) !important;
    height: 100px;
}
.specialNotificationSendModal .ql-snow .ql-tooltip{
    background-color: var(--black);
    box-shadow: 0 0 5px var(--primary);
    color: #ffffff;
    border-radius: 5px;
}
.specialNotificationSendModal  .ql-snow a{
    color: var(--primary);
}
.specialNotificationSendModal .ql-snow .ql-tooltip.ql-editing input[type=text]{
    background: #2f2f2f;
    border-radius: 4px;
    color: white;
}
.specialNotificationSendModal .ql-editor{
    padding: 0px;
    text-align: left;
}
.specialNotificationSendModal .ql-editor ol, .specialNotificationSendModal .ql-editor li{
    padding-left: 0px;
}
.specialNotificationSendModal .ql-editor .ql-ui{
    position: static;
}
.specialNotificationSendModal .ql-editor li > .ql-ui:before{
    margin-left: 0px;
    margin-right: 0px;
}
.specialNotificationSendModal .ql-toolbar{
    display: flex;
    justify-content: flex-start;
}
.specialNotificationSendModal .ql-toolbar.ql-snow{
    border: 2px solid var(--white-border);
    border-radius: 10px;
}

.specialNotificationSendModal .notificationMainWrapper{
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.specialNotificationSendModal .uploadGifContent {
    border: 2px dashed var(--white-border);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px;
}
.specialNotificationSendModal .changedGifwrapper .changedGifAction{
    background: #000000d6;
    border-radius: 50px;
    padding: 10px;
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: fit-content;
}
.specialNotificationSendModal .changedGifwrapper{
    width: 50%;
    height: 200px;
    position: relative;
    background-color: var(--card);
    border-radius: 10px;
}
.specialNotificationSendModal .changedGifwrapper img{
    width: 100%;
    height: 100%;
}
.specialNotificationSendModal .changedGifContent{
    display: flex;
    justify-content: center;
}
.specialNotificationSendModal .modal-dialog{
    max-width: 600px;
}
.specialNotificationSendModal .error{
    font-size: 14px;
    text-align: left;
}
.specialNotificationSendModal .tooltipWrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.specialNotificationSendModal .tooltipWrapper .tooltiptext{
    bottom: 78%;
    left: 160%;
    width: 240px;
}
.specialNotificationSendModal .iButtonForUpload{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* dynamic makat css */
.actionPartOfDynamicMakat{
    white-space:nowrap;
}
.dynamicMakatContent {
    width: 20% !important;
}
.dynamicMakatCourses{
    width: 45%;
}
.corse_exam_repeater {
    /* border: 1px solid #151618; */
    background-color: var(--card);
    border-radius: 9px;
    padding: 15px;
    margin-bottom:25px
    /* margin: 15px; */
    /* box-shadow: 0px 0px 0px 6px #151618; */
}

/*validation change in company management css */
#companyAddDrawer .companyName{
    width: 40%;
}

/* course percentage css */
.carouselCOursesHead{
    color: var(--primary);
}
.courseCarouselWrapper{
    background-color: var(--card);
    border-radius: 10px;
    padding-left: 10px;
    padding-bottom: 3px;
    padding-top: 10px;
}
.courseCarouselWrapper .item{
    border-radius: 10px;
    background: var(--black);
    overflow: hidden;
    min-width: 300px;
}
.courseCarouselWrapper .item img{
    height: 215px;
    object-fit: cover;
    object-position: top;
}
.courseCarouselWrapper .item img:hover{
    scale: 1.1;
    transition: scale 1s
}

.courseCarouselWrapper .item .progress-box .count{
    color: var(--primary);
    font-size: 17px;
    font-weight: 600;
}
.courseCarouselWrapper .item .progress-box .watchbtn button{
    padding: 8px 12px;
    width: 100% !important;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px
}
.courseCarouselWrapper .item .time-content{
    background-color: var(--card);
    padding: 3px 8px;
    border-radius: 5px;
}
.courseCarouselWrapper .item .viewingCompletedLabel{
    background-color: Var(--primary);
    font-size: 18px;
    font-weight: 600;
    height: 60px;
    margin-right: 5px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 5px;
}
.courseCarouselWrapper .slick-track{
    display: flex !important;
    flex-direction: row ;
}

.courseCarouselWrapper .slick-slide {
    margin-right: 10px !important;
}
.courseCarouselWrapper .slick-disabled{
    color: #3e3232 !important;
}

.courseCarouselWrapper .btnLeft{
    font-size: 45px;
    color: var(--light-white);
    position: absolute;
    top: 140px;
    left: -40px;
    cursor: pointer;
}

.courseCarouselWrapper .btnLeft:hover{
    color: var(--primary);
}
.courseCarouselWrapper .btnRight{
    font-size: 45px;
    color: var(--light-white);
    position: absolute;
    right: -40px;
    top: 140px;
    cursor: pointer;
}
.courseCarouselWrapper .btnRight:hover{
    color: var(--primary);
}
.courseCarouselWrapper .heart_Content{
    display: flex;
    align-items: center;
    gap: 5px;
}
.courseCarouselWrapper .heart_Content p{
    max-width: 90%;
}
.courseCarouselWrapper .last_watched_wrapper .count{
    font-size: 20px;
    color: var(--primary);
}

/* exam result analytics */
.examResultAnalyticsWrapper{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.examResultAnalyticsWrapper .examResultAnalyticsHead{
    color: var(--primary);
}
.examResultAnalyticsWrapper .examResultSelectionWrapper .select2-container{
    width: 400px !important;
}
.examResultAnalyticsWrapper .getExamAnalytics{
    width: 100px;
}
.examResultAnalyticsWrapper .getExamAnalytics:disabled{
    background-color: #3f3535;
}
.examResultAnalyticsWrapper .selectAndBtnWrapper{
    display: flex;
    gap: 15px;
}
.noDataAvailable{
    background-color: var(--card);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
    border-radius: 20px;
    height: 30vh;
    justify-content: center;
}
.meetings-part .noDataAvailable, .interview-part .noDataAvailable {
    height: auto;
}
.meetings-part, .interview-part{
    height: 273px;
    overflow: auto;
}
.meetings-part-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.meetings-part-scrollbar::-webkit-scrollbar-thumb {
    background: grey;
    border-radius: 5px;
}


@media only screen and (max-width: 850px){
    .examResultAnalyticsWrapper .examResultSelectionWrapper .select2-container{
        width: 300px !important;
    }
}
@media only screen and (max-width: 540px){
    .examResultAnalyticsWrapper .examResultSelectionWrapper .select2-container{
        width: 100% !important;
    }
    .examResultAnalyticsWrapper .selectAndBtnWrapper{
        flex-direction: column;
    }
    .examResultAnalyticsWrapper .examResultSelectionWrapper{
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

/* T&C add for lab */
.termConditionForLabModal .modal-title{
    color: var(--primary);
    font-size: 30px;
}
.termConditionForLabModal .contentOFLabCondition span{
    font-size: 16px;
    color: var(--light-white);
}

.termConditionForLabModal .custom-checkbox-right .custom-control-input{
    right: 1px;
    z-index: 2;
    width: 16px;
    height: 16px;
    opacity: 0;
    top: 4px;
}
.termConditionForLabModal .modal-body{
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.termConditionForLabModal .startLinuxLab:disabled{
  background-color: #453d3d
}

/* certificate Download analytics */

.crtDownloadAnalyticsWrapper {
    background-color: var(--card);
    padding: 10px 46px 10px 45px;
    border-radius: 20px
}
.crtDownloadAnalytics .cert_download_Wrapper{
    border-radius: 10px;
    padding-bottom: 5px;
}
.crtDownloadAnalytics .cert_download_Wrapper .slick-track{
    display: flex !important;
    flex-direction: row;
    gap: 10px;
    /* margin-right: -5px; */
}
.crtDownloadAnalytics .cert_download_Wrapper .btnRight{
    font-size: 45px;
    color: var(--light-white);
    position: absolute;
    top: 140px;
    right: -40px;
    cursor: pointer;
}
.crtDownloadAnalytics .cert_download_Wrapper .slick-disabled{
    color: #3e3232 !important;
}
.crtDownloadAnalytics .cert_download_Wrapper .btnLeft{
    font-size: 45px;
    color: var(--light-white);
    position: absolute;
    top: 140px;
    left: -40px;
    cursor: pointer;
}
.crtDownloadAnalytics .cert_download_Wrapper .btnLeft:hover{
    color: var(--primary);
}
.crtDownloadAnalytics .cert_download_Wrapper .btnRight:hover{
    color: var(--primary);
}

.crtDownloadAnalyticsContent .crtDownloadHead{
    color: var(--primary);
    font-size: 20px;
}
.crtDownloadAnalytics .cert_Download_figure{
    overflow: hidden;
    text-align: center;
    width:100%;
    border-radius: 5px;
    position: relative;
    margin-bottom: 0px;
}
.crtDownloadAnalytics .cert_Download_figure img{
    width: 100%;
    height: 270px;
}
.crtDownloadAnalytics .caption_text {
    font-size: 16px;
    margin: 0px;
    transform: translateY(7px);
}
.crtDownloadAnalytics .cert_img_wrapper{
    padding: 10px;
}
.crtDownloadAnalytics .cert_download_caption{
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    flex-direction: column;
    color: #120f0f;
    position: relative;
}
.crtDownloadAnalytics .cert_download_Wrapper a {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.crtDownloadAnalytics .cert_Download_figure:hover img{
    opacity: 0.7;
}
.crtDownloadAnalytics .cert_Download_figure i{
    transform: translateY(50px);
}
.crtDownloadAnalytics .cert_Download_figure:hover .caption_text{
    transform: translateY(-50px);
    transition: transform 0.5s
}
.crtDownloadAnalytics .cert_Download_figure:hover i {
    transform: translateY(-10px);
    transition: transform 0.5s
}

/* expired Makat analytics css */
.analyticsWrapper{
    display: flex;
    gap: 12px;
    border-radius: 10px;
    padding: 10px;
}
.analyticsWrapper .examResultAnalyticsWrapper{
    width: 100%;
}
.examResultAnalyticsWrapper .noDataAvailable{
    height: 100%;
}
.analyticsWrapper .expirePlanWrapper{
    width: 70%;
}

.expirePlanWrapper .expiredCourseItem{
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 630px;
    overflow: auto;
    padding: 10px;
    background-color: var(--card);
    border-radius: 10px;
}

.examResultAnalyticsWrapper .examResultAnalyticsItem{
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 630px;
    overflow: auto;
    padding: 10px;
    background-color: var(--card);
    border-radius: 10px;
    width: 100%;
    margin-top: 10px;
}
.examResultAnalyticsWrapper .examResultAnalyticsChartWrapper{
    height: 100%;
}
.expiredCourseItem .Item_course_Wrapper{
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.expiredCourseItem .Item_course_Wrapper:hover{
    border: 1px solid var(--border-dark);
}
.expiredCourseItem .Item_course_Wrapper .autoRenewableText{
    font-size: 14px;
}
.expirePlanWrapper .expiredCourseItem::-webkit-scrollbar-thumb {
    background: var(--primary);
}
.expirePlanWrapper .expiredCourseItem::-webkit-scrollbar {
    width: 6px;
}
.expirePlanWrapper .expiredMakatNameHead h3{
    color: var(--primary);
}
.expirePlanWrapper .expiredMakatNameHead h4{
    font-size: 18px;
}
.expirePlanWrapper .expiredPlanHead{
    color: var(--primary);
    margin-bottom: 20px;
}
.expirePlanWrapper .expiredCourseItem .active-item{
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    position: relative;
    border: 1px solid var(--black);
    cursor: pointer;
}
.expiredCourseItem .notranslate span:nth-child(2){
    color: var(--primary);
}
.expireCourseList .modal-dialog{
    max-width: 70%;
}

@media only screen and (max-width: 575px){
    .expireCourseList .modal-dialog{
        max-width: 100%;
    }
}

@media only screen and (max-width: 1350px){

    .analyticsWrapper{
        flex-direction: column;
    }
    .analyticsWrapper .expirePlanWrapper{
        width: 100%;
    }
    .expirePlanWrapper .expiredCourseItem{
        padding: 25px;
        height: 100% ;
        max-height: 650px;
    }
}
/* project submission result analytics */
.projectSubmitResultWrapper .projectSubmitResultHead{
    color: var(--primary);
}

#projectSubmitResultChartWrapper{
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 630px;
    overflow: auto;
    padding: 10px;
    background-color: var(--card);
    border-radius: 10px;
    width: 100%;
    margin-top: 10px;
}
/* favourite course count */
.favouriteCourseCountWrapper{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.favouriteCourseCountWrapper .favouriteCourseCountHead{
    color: var(--primary);
}
.favouriteCourseCountWrapper .favouriteCourseCountGraphWrapper{
    height: 630px;
    overflow: auto;
    padding: 10px;
    background-color: var(--card);
    border-radius: 10px;
}
/* heart design css */
.heart{
    text-align: left;
    padding: 9px;
    font-size: 25px;
    color: #ff0800;
    background: #ffffffa6;
    top: -15px;
    left: -15px;
    position: absolute;
    border-bottom-right-radius: 20px;
}
.displayingrid{
    display: flex;
    justify-content: flex-end;
}
:root {
    --stroke-width: 5px;
    --heart-width: 50px;
    --transition-length: 1.2s;
    --heart-color: #d32f2f;
 }

 .heart-wrapper{
    /* background-color: white; */
    border-bottom-right-radius: 10px;
}
 
.heart-container {
    /* position: relative; */
    width: var(--heart-width, 50px);
    aspect-ratio: 1/1;
    overflow: hidden;
    /* clip-path: url(#svgClip); */
}
 
 .heart-clip {
    appearance: none;
    margin: 0px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    overflow: hidden;
    z-index: 2;
 }

 .heart-clip + .fill {
    top:0;
    left:0;
    transform: translateY(50%);
    width: calc(2 * var(--heart-width, 50px));
    aspect-ratio: 1/1;
    transition: transform var(--transition-length, 0s) cubic-bezier(.2, .6, .8, .4);
 }

 .heart-clip:checked + .fill {
    transform: translateY(0);
 }

 .heart-stroke {
    width: calc(100% - (2 * var(--stroke-width, 5px)));
    aspect-ratio: 1/1;
    position: absolute;
    top: var(--stroke-width, 0);
    left: var(--stroke-width, 0);
    fill: transparent;;
    stroke: var(--heart-color);
    stroke-width: var(--stroke-width, 5px);
 }

 .waveShape {
    animation-name: waveAction;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-duration: 1s;
    fill: var(--heart-color);
 }

 @keyframes waveAction {
    0% {
       transform: translate(-175px, 0px);
    }
    100% {
       transform: translate(0px, 0px);
    }
 }

 /* course progress design changes css */
 .progessBox .select2-container {
    width: 400px !important;
 }
 .heart {
    width: 100px;
    height: 100px;
    background: url('/img/heart.png') no-repeat;
    background-position: 0 0;
    cursor: pointer;
    transition: background-position 1s steps(28);
    transition-duration: 0s;
 
    &.is-active {
        transition-duration: 1s;
        background-position: -2800px 0;
    }
}
.placement {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#labView .view-lab-description{
    display:flex ;
    background-color: var(--card);
    padding: 12px;
    border-radius: 10px;
    height: fit-content;
    margin-top: 12px;
}
#labView .view-lab-description p {
    word-break: break-word;
}

/* Survey Notification form */
.answer-container .custom-radio-right{
    padding-right: 0px !important;
}

.answer-container .custom-radio-right .custom-control-label{
    padding-right: 1.5rem;
}

.question{
    background-color: var(--card);
    padding: 12px;
    border-radius: 15px;
    padding-bottom: 25px;
    position: relative;
    margin-bottom: 1rem;
}

.survey-notification{
    max-height: calc(100vh - 300px);
    overflow: auto;
}

.primary-notification{
    max-height: calc(100vh - 203px);
    overflow: auto;
}

/* Audit logs */

.logTypeFilter .select2{
    width: max-content !important;
}

/*Cours form design enhancement*/
.sidebar-form li{
    border-radius: 6px;
    margin-bottom: 7px;
    color: var(--light-white);
}


.sidebar-form li:hover {
    background-color: var(--primary-hover) !important;
    color: var(--white);
}

.sidebar-form .nav-link{
    cursor: pointer;
}

.sidebar-form .active{
    background-color: var(--primary-light);
    color: var(--white);
    font-weight: 600;
}
.bg-card{
   background-color: var(--card);
}

 .floating-menu{
    flex-direction:column;
    position:absolute;
    top:2.8rem;
    row-gap:0.6rem;
    padding:5px;
    border-radius: 30px;
    right:-2.6rem;
    z-index: 999;
 }
  .dropdown-toggle[aria-expanded="true"]::after {
    transform: scale(-1, -1);
  }
  
  #assignNewExam .select2,#assignNewLab  .select2{
    width: 100% !important;
}

#video-index{
    background:var(--primary-light);
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    color: #ffffff;
    display: inline-block;
    font-weight: bold;
    line-height: 38px;
    margin-right: 27px;
    text-align: center;
    width: 38px; 
}

.lab-course-heading{
    background-color: var(--black);
    border-radius: 5px;
    padding: 9px 16px;
}

.lab-course-heading h4{
    font-weight: 600;
}

.lab-data-wraper{
    background-color: var(--card);
    padding: 12px;
    border-radius: 10px;
    height: fit-content;
    width: 100%;
    margin-top: 8px;
    margin-bottom: 12px;
}

.no-data-found{
    margin-top: 11px;
    padding: 28px 18px;
    font-size: 16px;
    background: black;
    width: 100%;
    border-radius: 10px;
}

.video-card .courseVideo{
    background-color: transparent !important;
}

/*New User Form Design*/

.user-form-header{
    border-bottom: 8px solid black;
    border-bottom-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

#accordion .user-form-header{
    border-bottom: 8px solid black;
    border-bottom-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

#userCourseList{
    background-color: var(--black);
    border-radius: 10px;
    padding: 15px;
}

#companiesCourseList.disabled{
    opacity: 0.5;
}

#labFile .notificationTextWrapper .ql-toolbar{
    border-radius: 8px;
}

#labFile .notificationTextWrapper .quillTextField{
    margin-top: 1rem;
    border-top: 1px solid;
    overflow: auto;
    min-height: calc(100vh - 692px);
    max-height: calc(100vh - 692px);
}

.runnnig-labs{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-light);
    height: 35px;
    width: 35px;
    border-radius: 100%;
    font-size: 16px;
}

.countdown{
    display: flex;
    justify-content: center;
    gap: 5px;
}
.countdown > div{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 1px 1px 15px rgba(0,0,0,0.25);
    width: 55px;
    height: 45px;
    border-radius: 5px;
    background-color: var(--black);
}
.number {
    font-weight: 500;
    font-size: 21px;
}

.color-active .number{
    color: var(--primary);
}
.color-inactive .number{
    color: #3acb8c87;
}

.countdown > div span:last-of-type{
    font-size: 9px;
    line-height: 11px;
}

@media screen and (max-width:600px){
    h1{
        font-size: 40px;
    }

    .countdown{
        flex-direction: column;
        align-items: center;
        gap: 5px;
        margin-top: 30px;
    }
    .countdown > div{
        background-color: #fff;
        width: 250px;
        height: 60px;
        margin: 0;
        flex-direction: row;
        justify-content: space-between;
        padding: 20px;
    }
    div span:last-of-type{
    font-size: 24px;
        text-transform: uppercase;
    }
    .number {
    font-size: 21px;
    }
}