/********** Template CSS **********/
:root { --primary: #009CFF; --light: #F3F6F9; --dark: #191C24; }

.back-to-top { position: fixed; display: none; right: 45px; bottom: 45px; z-index: 99; }


/*** Spinner ***/
#spinner { opacity: 0; visibility: hidden; transition: opacity .5s ease-out, visibility 0s linear .5s; z-index: 99999; }

#spinner.show { transition: opacity .5s ease-out, visibility 0s linear 0s; visibility: visible; opacity: 1; }


/*** Button ***/
.btn { transition: .5s; }

.btn.btn-primary { color: #FFFFFF; }
.btn-primary.aspNetDisabled { color: #000; background-color: #009CFF; border-color: #009CFF; }
.btn-square { width: 38px; height: 38px; }
.btn-secondary.aspNetDisabled, .btn-outline-primary.aspNetDisabled, .btn-primary.aspNetDisabled { opacity: 0.4; cursor: default; }
.btn-outline-primary.aspNetDisabled:hover { color: #009CFF; background-color: #fff; }
.btn-sm-square { width: 32px; height: 32px; }

.btn-lg-square { width: 48px; height: 48px; }

.btn-square,
.btn-sm-square,
.btn-lg-square { padding: 0; display: inline-flex; align-items: center; justify-content: center; font-weight: normal; border-radius: 50px; }


/*** Layout ***/
.sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 250px; height: 100vh; overflow-y: auto; background: var(--light); transition: 0.5s; z-index: 999; }

.content { margin-left: 250px; min-height: 100vh; background: #FFFFFF; transition: 0.5s; }

@media (min-width: 992px) {
    .sidebar { margin-left: 0; }

    .sidebar.open { margin-left: -250px; }

    .content { width: calc(100% - 250px); }
    .w-md-25 { width: 25% !important; }
    .content.open { width: 100%; margin-left: 0; }
}

@media (max-width: 991.98px) {
    .sidebar { margin-left: -250px; }

    .sidebar.open { margin-left: 0; }

    .content { width: 100%; margin-left: 0; }
}


/*** Navbar ***/
.sidebar .navbar .navbar-nav .nav-link { padding: 7px 20px; color: var(--dark); font-weight: 500; border-left: 3px solid var(--light); border-radius: 0 30px 30px 0; outline: none; }

.sidebar .navbar .navbar-nav .nav-link:hover,
.sidebar .navbar .navbar-nav .nav-link.active { color: var(--primary); background: #FFFFFF; border-color: var(--primary); }

.sidebar .navbar .navbar-nav .nav-link i { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: #FFFFFF; border-radius: 40px; }

.sidebar .navbar .navbar-nav .nav-link:hover i,
.sidebar .navbar .navbar-nav .nav-link.active i { background: var(--light); }

.sidebar .navbar .dropdown-toggle::after { position: absolute; top: 15px; right: 15px; border: none; content: "\f107"; font-family: "Font Awesome 5 Free"; font-weight: 900; transition: .5s; }

.sidebar .navbar .dropdown-toggle[aria-expanded=true]::after { transform: rotate(-180deg); }

.sidebar .navbar .dropdown-item { padding-left: 25px; border-radius: 0 30px 30px 0; }

.content .navbar .navbar-nav .nav-link { margin-left: 25px; padding: 12px 0; color: var(--dark); outline: none; }

.content .navbar .navbar-nav .nav-link:hover,
.content .navbar .navbar-nav .nav-link.active { color: var(--primary); }

.content .navbar .sidebar-toggler,
.content .navbar .navbar-nav .nav-link i { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: #FFFFFF; border-radius: 40px; }

.content .navbar .dropdown-toggle::after { margin-left: 1px; vertical-align: middle; border: none; content: "\f107"; font-family: "Font Awesome 5 Free"; font-weight: 900; transition: .5s; }

.content .navbar .dropdown-toggle[aria-expanded=true]::after { transform: rotate(-180deg); }

@media (max-width: 575.98px) {
    .content .navbar .navbar-nav .nav-link { margin-left: 15px; }
}


/*** Date Picker ***/
.bootstrap-datetimepicker-widget.bottom { top: auto !important; }

.bootstrap-datetimepicker-widget .table * { border-bottom-width: 0px; }

.bootstrap-datetimepicker-widget .table th { font-weight: 500; }

.bootstrap-datetimepicker-widget.dropdown-menu { padding: 10px; border-radius: 2px; }

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover { background: var(--primary); }

.bootstrap-datetimepicker-widget table td.today::before { border-bottom-color: var(--primary); }


/*** Testimonial ***/
.progress .progress-bar { width: 0px; transition: 2s; }


/*** Testimonial ***/
.testimonial-carousel .owl-dots { margin-top: 24px; display: flex; align-items: flex-end; justify-content: center; }

.testimonial-carousel .owl-dot { position: relative; display: inline-block; margin: 0 5px; width: 15px; height: 15px; border: 5px solid var(--primary); border-radius: 15px; transition: .5s; }

.testimonial-carousel .owl-dot.active { background: var(--dark); border-color: var(--primary); }
.empDetailsLabel { width: 130px }
.empDetails { width: calc(100% - 135px) }
.empImageRight { width: calc(100% - 220px) }
.red { color: #dc3545 !important; }
.green { color: #198754 !important }
.redRow { background-color: rgba(220, 53, 69,0.7) !important; color: #fff }
.greenRow { background-color: rgba(25, 135, 84,0.7) !important; color: #fff }
.ti1 { text-indent: 10px; }
.form-check .form-check-input { float: left; margin-left: -1.5em }
.form-check input { width: 1em; height: 1em; margin-top: .25em; vertical-align: top; background-color: #fff; background-repeat: no-repeat; background-position: center; background-size: contain; border: 1px solid rgba(0,0,0,0.25); appearance: none; color-adjust: exact }
.form-check input[type="checkbox"] { border-radius: .25em }
.form-check input[type="radio"] { border-radius: 50% }
.form-check input:active { filter: brightness(90%) }
.form-check input:focus { border-color: #80ceff; outline: 0; box-shadow: 0 0 0 .25rem rgba(0,156,255,0.25) }
.form-check input:checked { background-color: #009CFF; border-color: #009CFF }
.form-check input:checked[type="checkbox"] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") }
.form-check input:checked[type="radio"] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e") }
.form-check input[type="checkbox"]:indeterminate { background-color: #009CFF; border-color: #009CFF; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e") }
.form-check input:disabled { pointer-events: none; filter: none; opacity: .5 }
.form-check input[disabled] ~ .form-check-label, .form-check input:disabled ~ .form-check-label { opacity: .5 }
.blue { color: #009CFF }
.ui-datepicker { background-color: #fff; padding: 15px; border-radius: 20px; }
.ui-datepicker td span, .ui-datepicker td a { color: #000; /* Numbers color */ fill: #000; }
.ui-datepicker td { background: #fff; padding: 10px; }
.ui-datepicker-calendar .ui-state-active, .ui-datepicker-calendar .ui-state-hover { color: #009CFF; /* Numbers color on hover */ }
.ui-datepicker-next { float: right !important; }
.ui-datepicker-title { text-align: center; padding: 5px 0; }

@media (min-width: 576px) {
    .w-sm-10 { width: 10% !important; }
    .w-sm-15 { width: 15% !important; }
    .w-sm-25 { width: 25% !important; }
    .w-sm-50 { width: 50% !important; }
    .w-sm-75 { width: 75% !important; }
    .h-sm-75 { height: 75% !important; }
}

@media (min-width: 900px) {
    .w-md-50 { width: 50% !important; }
}

@media (min-width: 1200px) {
    .w-lg-15 { width: 15% !important; }
}

@media (max-width: 576px) {
    .empDetailsLabel, .empDetails { width: 100%; }
    .empImageRight { width: 100%; }
}