/* --------------------- Custom Header Navbar --------------------- */
.customHeader-navbar {
    height: var(--custom-header-height) !important;
}

.customHeader-top-nav-position {
    top: var(--custom-header-height) !important;
}

.customHeader-top-content-position {
    top: var(--custom-content-position) !important;
}

@media (min-width: 1081px) {
    .background-overlay {
        left: var(--custom-background-overlay) !important;
    }
}
/* --------------------- Custom Color CSS THEME --------------------- */
:root {
    --primary-color-h: 207;
    --primary-color-s: 86%;
    --primary-color-l: 54%;
    --contrastThreshold: 55%;
    --lightnessTransform: 10%;
    --darknessTransform: 15%;
    --primary-color-dark-l: calc(var(--primary-color-l) - var(--darknessTransform));
    --primary-color-light-l: calc(var(--primary-color-l) + var(--lightnessTransform));

    --color-primary: hsl(var(--primary-color-h),
                         var(--primary-color-s),
                         var(--primary-color-l));

    --color-primary-dark:hsl(var(--primary-color-h),
                         var(--primary-color-s),
                         var(--primary-color-dark-l));

    --color-primary-light:hsl(var(--primary-color-h),
                          var(--primary-color-s),
                          var(--primary-color-light-l));
}

.primary-color {
    background: var(--color-primary);
    --switch: calc((var(--primary-color-l) - var(--contrastThreshold)) * -100);
    color: hsl(0, 0%, var(--switch));
}

.primary-dark-color {
    background: var(--color-primary-dark);
    --switch: calc((var(--primary-color-dark-l) - var(--contrastThreshold)) * -100);
    color: hsl(0, 0%, var(--switch));
}

.main-btn, 
.txt-link-pointer,
.icon-link-pointer {
    color: var(--color-primary-dark) !important;
    cursor: pointer;
}

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

.primary-svg-custom-color {
    fill: var(--color-primary);
}

.light-svg-custom-color {
    fill: var(--color-primary-light);
}

.dark-svg-custom-color {
    fill: var(--color-primary-dark);
}

.primary-svg-stroke-color {
    stroke: var(--color-primary);
}

.light-svg-stroke-color {
    stroke: var(--color-primary-light);
}

.dark-svg-stroke-color {
    stroke: var(--color-primary-dark);
}

.txt-color-transform {
    color: var(--color-primary);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.dx-datagrid-rowsview .dx-selection.dx-row > td, .dx-datagrid-rowsview .dx-selection.dx-row:hover > td, .dx-switch.dx-state-hover .dx-switch-handle:before, 
.dx-switch.dx-state-focused .dx-switch-handle:before {
    background-color: var(--color-primary-dark) !important;
    color: #ffffff;
}

.dx-switch-on-value .dx-switch-container::before {
    background-color: var(--color-primary) !important; 
    opacity: 0.5;
}

.dx-texteditor.dx-editor-outlined.dx-state-hover,
.dx-texteditor.dx-editor-outlined.dx-state-focused,
.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
    border-color: var(--color-primary) !important;
}

.text-info,
.color-info,
.accordionOpen,
.language-switcher > a,
.primary-customizable-color,
.modal-good-luck-text, .icon-copied,
.page-course-details .description article ul li:before,
.dx-button-has-icon:not(.dx-button-has-text).dx-button-default, .dx-button.dx-button-back.dx-button-default, .dx-overlay-content .dx-button.dx-button-default,
.dx-calendar.dx-calendar-with-footer .dx-calendar-footer .dx-calendar-today-button.dx-button-default, .dx-calendar-navigator .dx-calendar-caption-button.dx-button-default,
.dx-field-value .dx-button.dx-button-default, .dx-field-value.dx-button.dx-button-default, .dx-field-value .dx-button.dx-button-has-icon:not(.dx-button-has-text).dx-button-default,
.dx-field-value.dx-button.dx-button-has-icon:not(.dx-button-has-text).dx-button-default, .dx-field-value .dx-button.dx-button-back.dx-button-default,
.dx-field-value.dx-button.dx-button-back.dx-button-default, .dx-fileuploader-files-container .dx-fileuploader-button.dx-button-default, .dx-scheduler-navigator .dx-button.dx-button-default {
    color: var(--color-primary) !important;
}

.text-primary,
.color-primary,
.bar-icon:hover,
.text-turquoise,
.modal-title-txt,
.dropcap.colored,
.list-info li .icon,
.btn-primary .badge,
a.text-primary:hover,
.table tr.first-line,
.title-primary-color,
.table tr.selected > td,
.icon-for-download:hover,
.proctoring-download-link,
.login-account > li > a > span,
.daterangepicker td.off.in-range,
span.fa-stack:hover > .text-info,
.page-about .stat-container .stat-num,
.panel-primary > .panel-heading .badge,
.page-course-details .description article h2,
.daterangepicker > .drp-buttons > .drp-selected,
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus,
.page-course-details .description header .summary span.price strong,
.btn-line-selected, .btn-line-selected:active, .btn-line-selected:focus,
.table-dynamic .table-bordered thead th .glyphicon-chevron-up:hover, .table-dynamic .table-bordered thead th .glyphicon-chevron-down:hover,
.table-dynamic .table-bordered thead th .glyphicon-chevron-up.active, .table-dynamic .table-bordered thead th .glyphicon-chevron-down.active {
    color: var(--color-primary-dark) !important;
}

.highlight,
.progress-bar,
.badge-primary,
.daterangepicker,
.slider-selection,
.active-dots-circle,
.btn-secondary:hover,
.panel-heading .context-button,
.daterangepicker .ranges li.active,
.pager li > a:hover, .pager li > a:focus,
.open .btn-line-selected.dropdown-toggle,
.open .btn-line-unselected.dropdown-toggle,
.dropcap-square.colored, .dropcap-circle.colored,
.ui-radio input[type="radio"]:checked + span:after,
.table.table-striped.selectable > tbody > tr.selected > td,
.breadcrumb-alt > li > a:hover, .breadcrumb-alt > li > a.active,
.panel-heading .filter-box .filter-box-content ul li.filter-object input[type="radio"],
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
    background-color: var(--color-primary-dark) !important;
}

.btn-secondary, .participants-button {
    color: var(--color-primary);
    border: 1px solid var(--color-primary) !important;
}

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

.btn-line-unselected:hover,
.btn-primary[disabled].active,
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open > .btn-info.dropdown-toggle,
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .btn-primary.dropdown-toggle,
.pagination > li > a:hover, .pagination > li > a:focus, .pagination > li > span:hover, .pagination > li > span:focus,
.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span, .pagination > .active > span:hover, .pagination > .active > span:focus {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
}

.participants-button:hover,
.ui-checkbox input[type="checkbox"]:checked + span:before {
    border: 1px solid var(--color-primary) !important;
    background-color: var(--color-primary) !important;
}

input.input-primary,
.form-control:focus,
input.input-primary:focus {
    border-color: var(--color-primary-dark);
}

.switch :checked + i {
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.5),inset 0 0 50px var(--color-primary-dark);
    -moz-box-shadow: inset 0 0 1px rgba(0,0,0,0.5),inset 0 0 50px var(--color-primary-dark);
    box-shadow: inset 0 0 1px rgba(0,0,0,0.5),inset 0 0 50px var(--color-primary-dark);
}

.breadcrumb-alt > li > a:hover:before, .breadcrumb-alt > li > a.active:before {
    border-color: var(--color-primary-dark) var(--color-primary-dark) var(--color-primary-dark) rgba(0,0,0,0);
}

.breadcrumb-alt > li > a:hover:after, .breadcrumb-alt > li > a.active:after {
    border-left: 1em solid var(--color-primary-dark);
}

.dropdown-menu.with-arrow.panel-primary:before {
    border-bottom: 8px solid var(--color-primary-dark);
}

.dropdown-menu.with-arrow.panel-primary:after {
    border-bottom: 7px solid var(--color-primary-dark);
}

.progress-bar-success,
.daterangepicker td.end-date,
.dashboard-dots-button-active,
.ui-tags-input .tags .tag-item,
.daterangepicker td.active, .daterangepicker td.active:hover,
.btn-info, .table.table-striped.selectable > tbody > tr:hover > td,
.dx-scheduler-navigator .dx-button.dx-button-default.dx-state-focused,
.dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row) > td:not(.dx-focused),
.dx-button-default, .dx-switch-on-value .dx-switch-handle::before, .dx-pager .dx-pages .dx-selection, .dx-pager .dx-page-sizes .dx-selection,
.dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row) > td:not(.dx-focused).dx-datagrid-group-space,
.dx-fileuploader-files-container .dx-fileuploader-button.dx-button-default.dx-state-focused, .dx-scheduler-navigator .dx-button.dx-button-default.dx-state-hover,
.dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row) > .dx-datagrid-readonly .dx-texteditor .dx-texteditor-input, 
.dx-calendar.dx-calendar-with-footer .dx-calendar-footer .dx-calendar-today-button.dx-button-default.dx-state-focused, .dx-calendar-navigator .dx-calendar-caption-button.dx-button-default.dx-state-hover,
.dx-calendar-navigator .dx-calendar-caption-button.dx-button-default.dx-state-focused, .dx-field-value .dx-button.dx-button-default.dx-state-hover, .dx-field-value.dx-button.dx-button-default.dx-state-hover,
.dx-field-value .dx-button.dx-button-default.dx-state-focused, .dx-field-value.dx-button.dx-button-default.dx-state-focused, .dx-fileuploader-files-container .dx-fileuploader-button.dx-button-default.dx-state-hover,
.dx-overlay-content .dx-button.dx-button-default.dx-state-hover, .dx-overlay-content .dx-button.dx-button-default.dx-state-focused, .dx-calendar.dx-calendar-with-footer .dx-calendar-footer .dx-calendar-today-button.dx-button-default.dx-state-hover,
::selection {
    background: var(--color-primary) !important;
}

::selection {
    color: white;
}

.page-about .stat-container .stat-desc {
    border-bottom: 2px solid var(--color-primary-dark);
}

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

.secondary:hover,
.btn-modal-cancel:hover,
.daterangepicker > .drp-buttons > .cancelBtn:hover {
    border: 1px solid var(--color-primary-dark) !important;
    background-color: var(--color-primary-dark) !important;
}

.btn-primary, .disabled-button,
.btn-primary.disabled, .btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled:active, .btn-primary.disabled.active, .btn-primary[disabled], .btn-primary[disabled]:hover, .btn-primary[disabled]:focus, .btn-primary[disabled]:active, fieldset[disabled] .btn-primary, fieldset[disabled] .btn-primary:hover, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:active, fieldset[disabled] .btn-primary.active {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.daterangepicker td.in-range {
    background-color: var(--color-primary-light) !important;
}

.table tr.selected {
    border-left: 4px solid var(--color-primary-dark);
}

.loading-animation {
    background: linear-gradient(269.37deg, rgba(110, 198, 255, 0) -3.08%, var(--color-primary) 44.36%, rgba(110, 198, 255, 0) 96.42%) !important;
}

input:focus-visible, .main-btn:focus-visible, .bar-icon:focus-visible, .icon-btn:focus-visible  {
    outline: 2px solid var(--color-primary) !important;
}

@media (min-width: 768px) {
    .modal-dialog {
        margin-top: calc( 30px + var(--custom-header-height)) !important;
    }
}

@media (min-width: 1081px) {
    .home-shortcut > a,
    .login-account > li > a > span {
        color: var(--color-primary-dark) !important;
    }

    .home-shortcut:hover {
        background-color:  var(--color-primary-dark);
    }

    .background-overlay {
        left: var(--custom-background-overlay) !important;
    }
}