:root {
    --colgateRed: #ed1d24;
    --colgateRedHover: #cc0000;
    --white: #ffffff;
    --greytext: #c2c2c2;
    --lightgrey: #949BA1;
    --mediumgrey: #6c757d;
    --grey: #434343;
    --mediumdarkgrey: #363636;
    --darkgrey: #202020;
    --black: #000000;
}


/*=========================== GENERAL ===========================*/
.main-header .logo {
    background-color: var(--colgateRed);
    color: var(--white);
    border-bottom: 0 solid transparent;
}

#lessonsDatatable_paginate{
    margin-top: 2em;
}

#lessonsDatatable_wrapper{
    margin-top: 2em;
}

.hide {
    display: none !important;
}

.disabled {
    cursor: default;
}
.outer-container {
    display: flex;
    align-items: center; /* Align items vertically */
}

.checkbox-container {
    margin-right: 10px; /* Adjust as needed */
}

.checkbox-container input[type="checkbox"] {
    margin: 0 0 0 -25px;
}
.country-element {
    display: block;
    padding: .2125rem 1rem;
    cursor: default;
    color: var(--white);
    font-size: 1.25rem;
}

.login-page .input-group-append {
    width: 17%;
}

.login-page .input-group-append .fa-lock {
    width: 100%;
}

.country_flag_row .flag_button {
    padding: 5px 0;
    height: 50px;
}

.country_flag_row .flag_button:hover {
    filter: grayscale(50%);
}

.country-element img {
    border-radius: 3px;
}

.input-group-append img {
    border-radius: 3px;
}

.flag_button img {
    border-radius: 10px;
}

.country_flag_row .col-2 {
    padding: 0 2px 0 2px;
}

.flag_button.disabled {
    color: grey;
    filter: grayscale(100%);
}

/*=========================== LOADER ===========================*/
.loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid var(--colgateRed);
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    margin: auto auto auto auto;
}

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

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

/*=========================== BUTTON ===========================*/
.btn {
    white-space: normal;
}

.btn-colgate,
.btn.btn-flat.btn-colgate {
    background-color: var(--colgateRed);
    border-color: var(--colgateRed);
    color: white;
}

.btn-colgate:hover,
.btn-colgate:active,
.btn.btn-colgate.btn-block.btn-flat:hover,
.btn.btn-colgate.btn-block.btn-flat:active {
    background-color: var(--colgateRedHover);
    color: var(--white);
}

/*=========================== CARD ===========================*/
.card-footer {
    border-radius: 0 0 10px 10px;
}

.login-page .card.card-header {
    padding: 10px;
}

.login-page .card.card-danger {
    border: 0;
}

.icheck-primary[class*="icheck-"] > label {
    padding-left: 5px !important;
    line-height: 18px;
}

.icheck-primary[class*="icheck-"] > input:first-child + input[type="hidden"] + label::before,
.icheck-primary[class*="icheck-"] > input:first-child + label::before {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    margin-left: -22px;
}

.icheck-primary[class*="icheck-"] > input:first-child:checked + input[type="hidden"] + label::after,
.icheck-primary[class*="icheck-"] > input:first-child:checked + label::after {
    top: 0;
    width: 4px;
    height: 8px;
    left: 0;
}

.login-box,
.register-box {
    width: 400px;
}

.checkbox.icheck-primary {
    text-align: left;
}

/*=========================== DATATABLES ===========================*/
.dataTables_wrapper {
    width: 100%;
    overflow: hidden;
}

.dataTables_scroll {
    width: 100%;
}

.dataTables_scrollHead {
    overflow: hidden !important;
}

.dataTables_scrollBody {
    overflow-x: auto;
    width: 100%;
}

.dataTables_scrollHeadInner,
.dataTables_scrollHeadInner table,
.dataTables_scrollBody table {
    width: 100% !important;
}

.dataTables_scrollHeadInner table,
.dataTables_scrollBody table {
    margin: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
}

.dataTables_scrollHead table.dataTable thead th,
.dataTables_scrollBody table.dataTable tbody td {
    white-space: nowrap;
    padding: 8px 20px 8px 8px !important;
}

table.dataTable thead th:nth-child(1),
table.dataTable tbody td:nth-child(1) {
    min-width: 120px; /* Status */
}

table.dataTable thead th:nth-child(2),
table.dataTable tbody td:nth-child(2) {
    min-width: 100px; /* Type */
}

table.dataTable thead th:nth-child(3),
table.dataTable tbody td:nth-child(3) {
    min-width: 300px; /* School */
}

table.dataTable thead th:nth-child(4),
table.dataTable tbody td:nth-child(4) {
    min-width: 150px; /* Location */
}

table.dataTable thead th:nth-child(5),
table.dataTable tbody td:nth-child(5) {
    min-width: 180px; /* Agent */
}

table.dataTable thead th:nth-child(6),
table.dataTable tbody td:nth-child(6) {
    min-width: 250px; /* Educator */
}

table.dataTable thead th:nth-child(7),
table.dataTable tbody td:nth-child(7) {
    min-width: 150px; /* Educator Number */
}

table.dataTable thead th:nth-child(8),
table.dataTable tbody td:nth-child(8) {
    min-width: 120px; /* Distributor */
}

table.dataTable thead th:nth-child(9),
table.dataTable tbody td:nth-child(9) {
    min-width: 120px; /* Registered */
}

table.dataTable thead th:nth-child(10),
table.dataTable tbody td:nth-child(10) {
    min-width: 180px; /* Days Since Registration */
}

table.dataTable thead th:nth-child(11),
table.dataTable tbody td:nth-child(11) {
    min-width: 120px; /* Delivered */
}

table.dataTable thead th:nth-child(12),
table.dataTable tbody td:nth-child(12) {
    min-width: 120px; /* Started */
}

table.dataTable thead th:nth-child(13),
table.dataTable tbody td:nth-child(13) {
    min-width: 120px; /* Completed */
}

table.dataTable thead th:nth-child(14),
table.dataTable tbody td:nth-child(14) {
    min-width: 120px; /* Enrolled */
}

table.dataTable thead th:nth-child(15),
table.dataTable tbody td:nth-child(15) {
    min-width: 120px; /* Attendance */
}

.dataTables_scroll {
    width: 100%;
    overflow-x: auto;
}

table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.dataTables_wrapper td a,
.clickable a {
    color: inherit;
    text-decoration: underline;
}

.dataTables_wrapper td a:hover,
.clickable a:hover {
    color: rgba(0, 0, 0, 0.5);
}

.dt-buttons,
.select2-container--default.select2-container--disabled .select2-selection__arrow {
    display: none;
}

#lessonsDatatable thead th {
    padding: 8px;
    vertical-align: middle;
    border-bottom: 2px solid #dee2e6;
    white-space: nowrap;
}

#lessonsDatatable th,
#lessonsDatatable td {
    text-align: left;
    padding: 8px;
}

/*=========================== STOCK ===========================*/
.remove-stock {
    display: inline;
}

.table.table-bordered.table-striped.nowrap {
    width: 99% !important;
}

.fa.fa-minus-circle {
    font-size: 1.5em;
    color: var(--colgateRed);
    vertical-align: middle;
    padding-top: 7px;
}

.fa.fa-minus-circle:hover {
    cursor: pointer;
    color: var(--colgateRedHover);
}

/*=========================== NAV ===========================*/
.nav-item {
    padding: 0 5px;
}

.nav-link i {
    text-align: center;
    width: 20px;
}

.navbar-red {
    background-color: var(--colgateRed);
}

.nav-pills .nav-link {
    border-radius: 10px;
}

[class*="sidebar-dark-"] .nav-sidebar > .nav-item > .nav-link:focus,
[class*="sidebar-dark-"] .nav-sidebar > .nav-item:hover > .nav-link,
[class*="sidebar-dark-"] .nav-sidebar > .nav-item.menu-open > .nav-link {
    background-color: #3f474e;
}


[class*="sidebar-dark-"] .nav-sidebar > .nav-item > .nav-link.active {
    box-shadow: none;
}

.nav-sidebar .nav-header:not(:first-of-type).side-nav-headings {
    background-color: #292d32;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 5px;
    cursor: default;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active {
    background-color: var(--colgateRed);
}

.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
    background-color: var(--colgateRedHover);
    border-radius: 10px;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-body {
    border: 0;
    padding: 6px;
}

.navbar-nav > .user-menu > .dropdown-menu,
.navbar-nav > .user-menu > .dropdown-menu > .user-body {
    border-radius: 10px;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header {
    cursor: default;
}

/*=========================== SELECT2 ===========================*/
.select2-container--default .select2-selection--single .select2-selection__clear {
    font-size: 1.5em;
}

.select2-selection__rendered {
    line-height: 25px !important;
}

.select2-container .select2-selection--single {
    height: 38px !important;
}

.select2-selection__arrow {
    height: 32px !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 0;
}

.select2-container--default .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-radius: 10px;
    border-color: #ced4da;
}

/*=========================== BORDER RADIUS ===========================*/
.img-thumbnail,
.deliveryDetails .card-body,
#map,
.btn,
#eventMap,
.bg-green,
.btn.btn-flat,
.form-control,
.alert-danger,
.alert-success,
.label-success,
.alert-warning,
.login-box-body,
.card.card-danger,
.input-group-text,
.form-control:focus,
input[type="number"],
.form-control:disabled,
.form-control[readonly],
.callout.callout-success,
.modal-success .modal-body,
.bootstrap-datetimepicker-widget,
.select2-selection .select2-selection--single,
.select2-container--default .select2-selection--single,
.navbar-custom-menu > .navbar-nav > li > .dropdown-menu,
.navbar-nav > .notifications-menu > .dropdown-menu > li,
.navbar-nav > .messages-menu > .dropdown-menu > li.header,
.dataTables_wrapper .dataTables_paginate .paginate_button,
.navbar-nav > .notifications-menu > .dropdown-menu > li.header,
.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > h4,
.select2-container--default.select2-container--disabled .select2-selection--single {
    border-radius: 10px;
}

.modal-content {
    border-radius: 12px;
}

.nav-tabs .nav-link,
.card-header.with-border {
    border-radius: 10px 10px 0 0;
}

.card-body {
    border-radius: 0 0 10px 10px;
}

.datepickerIcon .input-group-text,
.input-group-append .input-group-text {
    border-radius: 0 10px 10px 0 !important;
}

.main-header .navbar .nav > li > a {
    padding: 10px;
    border-radius: 10px;
}

.main-header .navbar .nav > li > a:hover,
.main-header .navbar .nav > li > a:active,
.main-header .navbar .nav > li > a:focus,
.main-header .navbar .nav .open > a,
.main-header .navbar .nav .open > a:hover,
.main-header .navbar .nav .open > a:focus,
.main-header .navbar .nav > .active > a,
.main-header .navbar .sidebar-toggle:hover {
    background-color: var(--colgateRedHover);
    border-radius: 10px;
}

.skin-colgate .main-header .logo:hover,
.skin-colgate-dark .main-header .logo:hover {
    background-color: var(--colgateRedHover);
}

.card.card-danger {
    border-top: 3px solid var(--colgateRed);
}

.dropdown-menu a {
    cursor: pointer;
}

/*=========================== BOX SHADOW ===========================*/
.card,
.btn-info.focus, .btn-info:focus,
.btn-danger.focus, .btn-danger:focus,
.btn-success.focus, .btn-success:focus,
.btn-warning.focus, .btn-warning:focus,
.btn-primary.focus, .btn-primary:focus,
.btn-secondary.focus, .btn-secondary:focus,
.btn-info:not(:disabled):not(.disabled).active,
.btn-info:not(:disabled):not(.disabled):active,
.btn-danger:not(:disabled):not(.disabled).active,
.btn-danger:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active,
.btn-success:not(:disabled):not(.disabled):active,
.btn-warning:not(:disabled):not(.disabled).active,
.btn-warning:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled).active:focus,
.btn-info:not(:disabled):not(.disabled):active:focus,
.btn-danger:not(:disabled):not(.disabled).active:focus,
.btn-danger:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-success:not(:disabled):not(.disabled).active:focus,
.btn-success:not(:disabled):not(.disabled):active:focus,
.btn-warning:not(:disabled):not(.disabled).active:focus,
.btn-warning:not(:disabled):not(.disabled):active:focus,
.btn-secondary:not(:disabled):not(.disabled).active:focus,
.btn-secondary:not(:disabled):not(.disabled):active:focus {
    box-shadow: none;
}

.btn-info,
.btn-danger,
.btn-warning,
.btn-success,
.btn-primary,
.btn-secondary,
.btn-info:hover,
.btn-danger:hover,
.btn-warning:hover,
.btn-success:hover,
.btn-primary:hover,
.btn-secondary:hover {
    border-color: transparent;
}

.btn-group-vertical > .btn.active,
.btn-group-vertical > .btn:active,
.btn-group-vertical > .btn:focus,
.btn-group-vertical > .btn:hover,
.btn-group > .btn.active,
.btn-group > .btn:active,
.btn-group > .btn:focus, .btn-group > .btn:hover {
    z-index: unset;
}

.customAddressError,
.customAddressErrorEvent {
    display: none;
}

/*=========================== DELIVERY IMAGE ===========================*/
.hover-title {
    display: inline;
    pointer-events: auto;
    cursor: pointer;
}

.hover-image {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.2s, opacity 0.2s linear;
    border: 2px solid #808080;
}

body:not(.mobile) .hover-title:hover + .hover-image {
    visibility: visible;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.2s linear;
}

.hover-image {
    display: flex;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    pointer-events: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    background-color: rgba(128, 128, 128, 0.6);
}

.hover-image img {
    max-height: 60vh !important;
    width: auto !important;
    height: auto !important;
    margin-bottom: 0;
    background: white;
    padding: 10px;
    color: black;
    border-radius: 10px;
}

td .no-image-uploaded {
    background-color: white;
    border-radius: 10px;
    padding: 14px 20px;
}

/*=========================== MODAL ===========================*/
.close {
    float: right;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    color: var(--mediumgrey);
    text-shadow: none;
    opacity: 1;
}

.close:hover {
    text-shadow: 0 0 2px #afaeae;
    color: var(--black);
}

/*=========================== LESSON PHOTOS MODAL ===========================*/
.lesson_photos {
    max-height: 60vh;
    width: auto;
    border-radius: 10px;
    padding: 0;
}

.img-thumbnail {
    max-height: 40vh;
}

.fas.fa-exclamation-triangle {
    color: var(--colgateRed);
}

.resendHsm {
    line-height: 1;
}