/* .alert {
    --bs-alert-border: none !important;
} */

/* @media (max-width: 576px) {
    .custom-btn {
        padding: .25rem .5rem;
        font-size: .875rem;
        line-height: 1.5;
    }
} */

/* body {
    --sidebar-width: 18.2rem;
    --sidebar-transition: color, background-color, background-image, transform, width, max-width, height, margin, padding;
    --sidebar-transition-duration: 400ms;
    --sidebar-transition-function-ease: ease;
    --sidebar-transition-function-ease-in-out: ease-in-out;
} */

/* .sidebar.sidebar-mini {
    --sidebar-width: 7.8rem;
} */

/* .sidebar.sidebar-boxed.sidebar-mini+.main-content {
    --sidebar-width: 7.8rem;
    margin-left: -webkit-calc(var(--sidebar-width) + 2rem);
    margin-left: calc(var(--sidebar-width) + 2rem);
} */

/* #sidebar-menu > li.nav-item.active > a  {
    background: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
} */

/* Custom table font size adjustments */
.custom-table-font-size td,
.custom-table-font-size th {
    font-size: 0.9em;
    /* Default font size */
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {

    .custom-table-font-size td,
    .custom-table-font-size th {
        font-size: 0.8em;
        /* Smaller font size for small devices */
    }
}

.content-inner {
    /* min-height: calc(100vh - 7rem) !important; */
    min-height: calc((var(--vh, 1vh) * 100) - 7rem) !important;
}

.select2-container--open {
    z-index: 9999999 !important;
}

.select2-selection--single, .form-select, .form-control {
    border-color: silver !important;
}

input[type=checkbox],
input[type=radio] {
    /* outline: 1px solid silver; */
    border: 1px solid silver !important;
}

.py-6rem {
    padding-top: .6rem !important;
    padding-bottom: .6rem !important;
}

.bg-orange  {
    background-color: #ff5621 !important;
}

.bg-dandelion {
    background-color: #FAD928 !important;
}

.bg-light-silver {
    background-color: #d9d9d97a !important;
}

.datatable-search-box {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 8px 12px;
    outline: none;
    width: 200px;
    font-size: 14px;
    transition: width 0.3s ease;
}

.datatable-search-box::placeholder {
    color: #999;
}

.datatable-search-box:focus {
    border-color: #007bff;
    width: 250px;
}

.dataTables_info {
    font-weight: 200;
    font-size: 0.75rem;
    color: grey;
}

.dataTables_filter label {
    font-weight: 200;
    font-size: 0.9rem;
    color: grey;
}

.dataTables_length label {
    font-weight: 200;
    font-size: 0.9rem;
    color: grey;
}

.training-table tr td {
    font-weight: 200;
}

.training-table tr td div h6 {
    font-weight: 400;
}

.training-table thead tr th {
    font-weight: 200;
    font-size: 0.9rem;
    background-color: white !important;
    border-bottom: 1px solid lightgray !important;
}

.vh-65 {
    min-height: 540px;
    height: 65vh !important;
}


.vh-45 {
    min-height: 440px;
    height: 45vh !important;
}

.vh-38 {
    height: 38vh !important;
}

.vh-70 { height: 70vh !important; }
.vh-80 { height: 80vh !important; }
.vh-83 { height: 83vh !important; }

.vh-40 { height: 40vh !important; }
.vh-30 { height: 30vh !important; }

.w-40 {
    width: 40% !important;
}

.w-45 {
    width: 45% !important
}

.w-50 {
    width: 50% !important;
}

.w-55 {
    width: 55% !important;
}

.w-60 {
    width: 60% !important;
}

.w-65 {
    width: 65% !important;
}

.w-95 {
    width: 95% !important;
}

.w-90 {
    width: 90% !important;
}

.w-95 { width: 95% !important; }

.wpx-230 {
    width: 230px;
}

.fw-400 {
    font-weight: 400 !important;
}

.fw-500 {
    font-weight: 500 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-700 {
    font-weight: 700 !important;
}

.fw-800 {
    font-weight: 800 !important;
}

.fw-900 {
    font-weight: 900 !important;
}

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

.fs-10 {
    font-size: 10px !important;
}
.fs-12 {
    font-size: 12px !important;
}
.fs-13 {
    font-size: 13px !important;
}
.fs-14 {
    font-size: 14px !important;
}
.fs-15 {
    font-size: 15px !important;
}
.fs-16 {
    font-size: 16px !important;
}
.fs-18 {
    font-size: 18px !important;
}
.fs-20 {
    font-size: 20px !important;
}
.fs-22 {
    font-size: 22px !important;
}
.fs-28 {
    font-size: 28px !important;
}

.bg-light-yellow {
    background-color: #fce362 !important;
}


.ls-2 {
    letter-spacing: 2px;
}

.ls-1-5{
    letter-spacing: 1.5px;
}

.ls-0-5{
    letter-spacing: 0.5px;
}

.fs-x-small {
    font-size: x-small;
}


/**
 * Disabled state
 */
button.disabled,
button[disabled] {
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
}

.text-justify {
    text-align: justify !important;
}

.bootstrap-tagsinput {
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    display: inline-block;
    padding: 4px 6px;
    color: #555;
    vertical-align: middle;
    border-radius: 4px;
    max-width: 100%;
    line-height: 22px;
    cursor: text;
}

.bootstrap-tagsinput input {
    border: none;
    box-shadow: none;
    outline: none;
    background-color: transparent;
    padding: 0 6px;
    margin: 0;
    width: auto;
    max-width: inherit;
}

.bootstrap-tagsinput.form-control input::-moz-placeholder {
    color: #777;
    opacity: 1;
}

.bootstrap-tagsinput.form-control input:-ms-input-placeholder {
    color: #777;
}

.bootstrap-tagsinput.form-control input::-webkit-input-placeholder {
    color: #777;
}

.bootstrap-tagsinput input:focus {
    border: none;
    box-shadow: none;
}

.bootstrap-tagsinput .tag {
    margin-right: 2px;
    color: white;
}

.bootstrap-tagsinput .tag [data-role="remove"] {
    margin-left: 8px;
    cursor: pointer;
}

.bootstrap-tagsinput .tag [data-role="remove"]:after {
    content: "x";
    padding: 0px 2px;
}

.bootstrap-tagsinput .tag [data-role="remove"]:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.bootstrap-tagsinput .tag [data-role="remove"]:hover:active {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.choices__input {
    background-color: white !important;
}

.choices__input--disabled   {
    background-color: white !important;
    border: 0 !important;
}

.prevent-select {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
  }

.scrollable-tbody {
    display: block;
    /* Set your desired height */
    height: 38vh !important;
    overflow-y: auto;
}

.scrollable-thead {
    display: block;
    /* Set your desired height */
    height: 7vh !important;
    overflow-y: auto;
}

.table-container {
    max-height: 240px !important;
    /* Set the height of the table container */
    overflow-y: auto !important;
    /* Enable vertical scrolling */
}

.table thead th {
    position: sticky;
    top: 0;
    background-color: #f8f9fa;
    /* Change the background color of the header if needed */
}

.reload-icon {
    animation: spin 5s infinite linear;
}

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

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

/* app navbar */

.mb-np1 {
    margin-bottom: -0.1em;
}

.mb-np2 {
    margin-bottom: -0.2em;
}

.mb-p2 {
    margin-bottom: 0.2em;
}

.mb-np4 {
    margin-bottom: -0.3em;
}

.hover-text-white:hover {
    color : white !important
}

text-dark-hover {
    color: black !important
}
text-dark-hover:hover {
    color: white !important
}

.invite-svg-reminder:hover .invite-svg-reminder-1 {
    fill: #1a448a !important
}

.invite-svg-revoke:hover .invite-svg-revoke-1 {
    fill: #c03221 !important;
    opacity: 1;
}

.invite-svg-revoke:hover .invite-svg-revoke-2 {
    fill: white !important;
}

.box-shadow {
    width: 250px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
}

.box-shadow-2 {
    box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2), 0 2px 10px 0 rgba(0, 0, 0, 0.19);
    /* width: 250px; */
    /* text-align: center; */
}

.sign-in-logo {
    top: 10rem;
    height: 40rem;
    position: fixed;
    left: -5rem;
    transform: scale(1.2);
}

.underlined-link, .underlined-link:hover, .underlined-link:visited {
    text-decoration: none;
    border-bottom: 1px solid black;
    color: black;
}

.underlined-link-primary, .underlined-link-primary:hover, .underlined-link-primary:visited {
    text-decoration: none;
    border-bottom: 1px solid #1A448A9E;
    color: #1A448A;
}                               

.underlined-link-success, .underlined-link-success:hover, .underlined-link-success:visited {
    text-decoration: none;
    border-bottom: 1px solid #008000;
    color: #008000;
}

.height-fixed-50 {
    height: 50px;
}
.height-fixed-100 {
    height: 100px;
}
.height-fixed-125 {
    height: 125px;
}
.height-fixed-150 {
    height: 150px;
}
.height-fixed-200 {
    height: 200px;
}



/* bg colors */

.bg-silver {
    background: #B2B2B2;
}

.bg-engineering-orange {
    background: #C03221;
}

.bg-spanish-orange {
    background: #F16A1B;
}

.bg-school-bus-yellow {
    background: #FAD928;
}

.bg-marian-blue {
    background: #1A448A;
}

/* Cursor style */
.pointer { cursor: pointer; }
.cursor-help { cursor: help !important; }
.cursor-zoom-in {cursor: zoom-in !important;}
.cursor-wait {cursor: wait !important;}


/* Bordered box style ::START */

.bordered-box {
    border: 1px solid #ccc;
    padding: 20px;
    margin-top: 20px;
    border-radius: 3px;
    position: relative;
}
.bordered-box-header {
    font-weight: bold;
    margin-bottom: 15px;
    margin-top: -30px;
    background: white;
    padding: 0px 10px;
}
.bordered-box-floating-header {
    height:100px;
}
.bordered-box-checkbox {
    margin-top: 10px;
}
.bordered-box-checkbox input {
    margin-right: 6px;
}


.nav-box {
    border: 1px solid #ccc;
    padding: 8px 4px;
    /* padding-left: 10px; */
    /* padding-right: 10px; */
    /* padding-top: 8px; */
    /* padding-bottom: 8px; */
    /* padding: 20px; */
    /* margin-top: 20px; */
    border-radius: 8px;
    /* position: relative; */
}

.nav-box-silver {
    background-color: #EEEEEE;
}

.nav-box-light-silver {
    background-color: #F9F9F9;
}

.nav-box-inner-shadow {
    box-shadow: inset 0px 0px 4px 0.1px rgba(0,0,0,0.40);
}

.nav-box-item {
    padding: 6px 8px; 
    border-radius: 8px;
    /* background-color: white; */
}

.nav-box-active {
    /* padding: 4px 5px;  */
    /* border-radius: 8px; */
    background-color: white;
}

.object-fit-cover {
    object-fit: cover;
}

/* Bordered box style ::END */

a.uf-button-main.uf-visible {
    margin-bottom: 50px !important;
    margin-right: 50px !important;
}