:root {
    --body-background-light: #ffffff;
    --primary-button-light: #006132;
    --primary-button-hover-light: #ffffff;
    --primary-button-hover-text-light: #008746;
    --warning-button-light: #A60500;
    --text-primary-color-light: #1C1D1D;
    --text-secondary-color-light: #ffffff;
    --nav-background-light: #1C1D1D;
    --search-button-light: #A1E810;
    --href-link-color-light: #006132;
    --form-container-background-light: #F7FAFA;
    --button-style2-color-light: #ffffff;
    --primary-container-background-color-light: #F7FAFA;
    --secondary-container-background-color-light: #E6EDEF;
    --section-aside-hover-background-color-light: #E1E6EB;
    --user-name-color-light: #000000;
    --accessibility-color-light: #212529;
    --secondary-button-style2-color-light: #006132;
    /*This will be changed later with the dark color palette when doing the dark theme*/
    --body-background-dark: #121212;
    --primary-button-dark: #008746;
    --primary-button-hover-dark: #121212;
    --primary-button-hover-text-dark: #008746;
    --warning-button-dark: #A60500;
    --text-primary-color-dark: #EFECEC;
    --text-secondary-color-dark: #ffffff;
    --nav-background-dark: #1C1D1D;
    --search-button-dark: #A1E810;
    --href-link-color-dark: #ffffff;
    --form-container-background-dark: #F7FAFA;
    --button-style2-color-dark: #008746;
    --primary-container-background-color-dark: #1D1D1D;
    --secondary-container-background-color-dark: #282828;
    --section-aside-hover-background-color-dark: #3E3F42;
    --user-name-color-dark: #ffffff;
    --accessibility-color-dark: #ffffff;
    --secondary-button-style2-color-dark: #A1E810;
    --font-size-xl: 52px;
    --font-size-lg: 40px;
    --font-size-md: 24px;
    --font-size-sm: 18px;
    --font-size-xs: 16px;
    --font-size-xxs: 14px;
    --font-size-xxxs: 12px;
}

:root {
    --body-background: var(--body-background-light);
    --primary-button: var(--primary-button-light);
    --primary-button-hover: var(--primary-button-hover-light);
    --primary-button-hover-text: var(--primary-button-hover-text-light);
    --warning-button: var(--warning-button-light);
    --text-primary-color: var(--text-primary-color-light);
    --text-secondary-color: var(--text-secondary-color-light);
    --nav-background: var(--nav-background-light);
    --search-button: var(--search-button-light);
    --href-link-color: var(--href-link-color-light);
    --form-container-background: var(--form-container-background-light);
    --button-style2-color: var(--button-style2-color-light);
    --primary-container-background-color: var(--primary-container-background-color-light);
    --secondary-container-background-color: var(--secondary-container-background-color-light);
    --section-aside-hover-background-color: var(--section-aside-hover-background-color-light);
    --user-name-color: var(--user-name-color-light);
    --accessibility-color: var(--accessibility-color-light);
    --secondary-button-style2-color: var(--secondary-button-style2-color-light);
}

[color-scheme="dark"] {
    --body-background: var(--body-background-dark);
    --primary-button: var(--primary-button-dark);
    --primary-button-hover: var(--primary-button-hover-dark);
    --primary-button-hover-text: var(--primary-button-hover-text-dark);
    --warning-button: var(--warning-button-dark);
    --text-primary-color: var(--text-primary-color-dark);
    --text-secondary-color: var(--text-secondary-color-dark);
    --nav-background: var(--nav-background-dark);
    --search-button: var(--search-button-dark);
    --href-link-color: var(--href-link-color-dark);
    --form-container-background: var(--form-container-background-dark);
    --button-style2-color: var(--button-style2-color-dark);
    --primary-container-background-color: var(--primary-container-background-color-dark);
    --secondary-container-background-color: var(--secondary-container-background-color-dark);
    --section-aside-hover-background-color: var(--section-aside-hover-background-color-dark);
    --user-name-color: var(--user-name-color-dark);
    --accessibility-color: var(--accessibility-color-dark);
    --secondary-button-style2-color: var(--secondary-button-style2-color-dark);
}

@font-face {
    font-family: 'Gotham Book';
    src: url('../fonts/Gotham Book.otf') format('opentype');
}

@font-face {
    font-family: 'Gotham Bold';
    src: url('../fonts/Gotham-Black.otf') format('opentype');
}

@font-face {
    font-family: 'Gotham';
    src: url('../fonts/Gotham-Light.otf') format('opentype');
}


.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
    margin-bottom: 60px;
    font-family: 'Gotham', sans-serif;
    overflow-x: hidden;
    background-color: var(--body-background);
    color: var(--text-primary-color);
}

nav {
    background-color: var(--body-background);
}

.nav-item .nav-link {
    font-size: var(--font-size-sm);
}

nav.nav-background a:hover {
    font-weight: 700;
}

.primary-button {
    font-family: 'Gotham Book', sans-serif;
    background-color: var(--primary-button);
    font-size: var(--font-size-xs);
    color: var(--text-secondary-color)!important;
    border-radius: 8px;
    padding: 12px 24px 12px 24px;
}

.primary-button:hover img {
    filter: brightness(0) saturate(100%) invert(53%) sepia(44%) saturate(436%) hue-rotate(110deg) brightness(90%) contrast(83%);
}

.primary-button:hover {
    background-color: var(--primary-button-hover);
    color: var(--primary-button-hover-text)!important;
    border: 1px solid var(--primary-button-hover-text);
}

.inverted-primary-button {
    font-family: 'Gotham Bold', sans-serif;
    background-color: var(--primary-button-hover);
    font-size: var(--font-size-xs);
    color: var(--primary-button-hover-text) !important;
    border-radius: 8px;
    padding: 12px 24px 12px 24px;
    border: 1px solid var(--primary-button-hover-text)
}

.inverted-primary-button:hover{
    background-color: var(--primary-button);
    color: var(--text-secondary-color)!important;
}

.inverted-primary-button:hover img {
    filter: brightness(0) saturate(100%) invert(100%) contrast(100%);
}

.nav-background {
    background-color: var(--nav-background);
}

.first-carousel-slide-background{
/*    background-image: url('../images/home/Carousel Image 1.webp');*/
/*    background-size: cover;*/
/*    background-position: center;*/
    background-color: #2c3034;
}

.carousel-secondary-text {
    font-family: 'Gotham', sans-serif;
    font-weight: 400;
    color: var(--text-secondary-color);
}

.carousel-primary-text {
    font-family: 'Baskerville Old Face', sans-serif;
    font-weight: 700;
    color: var(--text-secondary-color);
    text-transform: capitalize;
}

.secondary-button {
    background-color: transparent;
    font-size: var(--font-size-xs);
    border-radius: 8px;
    font-weight: 700;
    color: var(--text-secondary-color);
    padding: 12px 24px 12px 24px;
    border: 1px solid var(--text-secondary-color);
}

.carousel-padding{
    padding-top: 6rem;
    padding-bottom: 6rem;
    padding-left: 10rem;
    padding-right: 10rem;
}

.medium-padding {
    padding-top: 5rem;
    padding-bottom: 5rem;
    padding-left: 5rem;
    padding-right: 5rem;
}

h1 {
    font-family: 'Gotham Black', sans-serif;
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary-color);
}

h3 {
    font-family: 'Gotham Black', sans-serif;
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--text-primary-color);
}

h5 {
    font-size: var(--font-size-sm);
    font-family: 'Gotham', sans-serif;
    font-weight: 700;
}

h6 {
    font-size: var(--font-size-xs);
    font-family: 'Gotham', sans-serif;
    font-weight: 500;
}

p {
    font-family: 'Gotham', sans-serif;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary-color);
}

.gotham-bold-font{
    font-family: 'Gotham Bold', sans-serif;
}

.news-heading {
    font-family: 'Gotham Black', sans-serif;
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--text-primary-color);
}

.news-description {
    font-family: 'Gotham', sans-serif;
    color: var(--text-primary-color);
    font-size: var(--font-size-xs);
}

/*@media (max-width: 967px) {
    :root {
        --font-size-xl: 44px;
        --font-size-lg: 34px;
        --font-size-md: 20px;
        --font-size-sm: 16px;
        --font-size-xs: 14px;
    }
}


@media (max-width: 576px) {
    :root {
        --font-size-xl: 36px;
        --font-size-lg: 28px;
        --font-size-md: 18px;
        --font-size-sm: 14px;
        --font-size-xs: 12px;
    }
}*/

.file-attachment-container {
    background-color: #E6EDEF; 
    border-radius: 8px;
}

html[color-scheme="dark"] .file-attachment-container {
    background-color: #282828; 
    border-radius: 8px;
}

@media (min-width: 767px) {
    .sticky-search-sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: scroll;
        scrollbar-width: none;
    }
}
@media (max-width: 767px) {
    
    
    .medium-padding {
        padding: 20px 15px !important;
    }

    .carousel-primary-text {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
        margin-bottom: 1rem !important;
    }

    .carousel-secondary-text {
        font-size: 1.2rem !important;
        line-height: 1.4 !important;
    }

    .carousel-padding {
        padding: 40px 15px !important;
    }
}

.search-button {
    background-color: var(--search-button);
    color: #1C1D1D;
    font-size: var(--font-size-sm);
    font-family: 'Gotham Bold', sans-serif;
    border-radius: 8px;
    font-weight: 700 !important;
}

.duration-text {
    color: var(--secondary-button-style2-color);
    font-weight: 700;
}

.deadline-text {
    color: var(--warning-button);
    font-weight: 700;
}

.accessibility-button-position {
    right: 0;
    top: 35%;
    transform: translateY(-50%);
    z-index: 9999;
    left: auto;
}

html[dir="rtl"] .accessibility-button-position {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    right: auto;
}

.hover-effect:hover{
    cursor: pointer;
}

/*html[dir="ltr"] #accessibility-toolbar{
    margin-right: -220px;
}*/

#accessibility-toolbar{
    display: none;
}

html[dir="rtl"] #accessibility-toggle {
    transform: scaleX(-1);
}

/*html[dir="rtl"] #accessibility-toolbar{
    margin-left: -200px;
}*/

label.form-label span {
    color: #A60500;
}

.href-link {
    color: var(--href-link-color);
    font-family: 'Gotham', sans-serif;
    font-size: var(--font-size-xs);
}

.form-container{
    background-color: var(--primary-container-background-color);
    border-radius: 8px;
}

.button-style2{
    background-color: var(--button-style2-color);
    color: var(--href-link-color);
    border: 1px solid #CACCE2;
    border-radius: 8px;
    font-weight: 700;
}

.font-size-sm{
    font-size: var(--font-size-sm);
}

.font-size-xxxs{
    font-size: var(--font-size-xxxs);
}

.font-size-xs{
    font-size: var(--font-size-xs);
}

html[dir="rtl"] .flip{
    transform: scaleX(-1);
}

input.form-control, select.form-select {
    border: 1px solid #545F23;
}

#validation{
    color: red;
}

textarea.select2-search__field{
    resize: none;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected {
    background-color: var(--primary-button-light)!important;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected:hover {
    background-color: var(--primary-button-light);
}

span.select2-search{
    position: absolute;
    bottom: 20%;
}

.search-sidebar {
    height: 100%;
    background-color: var(--primary-container-background-color);
    overflow-x: hidden;
}


.clear-filters-button {
    font-family: 'Gotham Bold', sans-serif;
    color: #A60500;
}

.form-check-input:checked{
    background-color: var(--primary-button-light);
    border-color: var(--primary-button-light);
}

.secondary-button-style2 {
    border: 1px solid #CACCE2;
    border-radius: 8px;
    color: var(--secondary-button-style2-color)!important;
    font-weight: 700;
}

.placeholder-icon {
    left: 7%;
    top: 50%;
    transform: translateY(-55%);
    right: auto;
}

html[dir="rtl"] .placeholder-icon {
    right: 7%;
    top: 50%;
    transform: translateY(-55%);
    left: auto;
}

.job-details-link {
    font-family: 'Gotham Black', sans-serif;
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--text-primary-color);
    text-decoration: none;
}

.job-details-link:hover {
    text-decoration: underline;
    color: var(--text-primary-color);
}

.job-details-title {
    font-family: 'Gotham Black', sans-serif;
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--text-primary-color);
    text-decoration: none;
}

.black-line {
    opacity: 1;
    border-color: #000000;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    content: url('../images/icons/Calendar Icon.svg');
}

.p-style2{
    color: var(--primary-button);
    font-family: 'Gotham Bold', sans-serif;
}

.section-aside-tag {
    color: var(--text-primary-color);
    text-decoration: none;
}

.section-aside-tag:hover {
    color: var(--text-primary-color);
}

.section-aside-li:hover {
    color: var(--text-primary-color);
    background-color: var(--section-aside-hover-background-color);
    cursor: pointer;
    border-radius: 8px;
}

.section-aside-li-active {
    border-radius: 8px;
    background-color: var(--section-aside-hover-background-color);
    font-family: 'Gotham Bold', sans-serif;
}

.password-toggle-icon{
    top: 54%;
    right: 22px;
}

html[dir="rtl"] .password-toggle-icon{
    left: 22px;
    right: auto;
}

div.htmx-swapping.htmx-delete {
    opacity: 0;
    transition: opacity 1s ease-out;
}

.warning-button{
    background-color: var(--warning-button);
    color: var(--text-secondary-color);
    font-size: var(--font-size-xs);
    font-family: 'Gotham Bold', sans-serif;
    border-radius: 8px;
    padding: 12px 24px 12px 24px;
}

.warning-button:hover img {
    filter: brightness(0) saturate(100%) invert(53%) sepia(44%) saturate(436%) hue-rotate(110deg) brightness(90%) contrast(83%);
}

.warning-button:hover {
    background-color: #ffffff;
    color: var(--warning-button);
    border: 1px solid var(--warning-button);
}

.download-link{
    color : var(--text-primary-color);
    text-decoration: none;
}

.download-link:hover{
    color : var(--text-primary-color);
    text-decoration: underline;
}

.primary-tag {
    background-color: var(--primary-container-background-color);
    color: var(--href-link-color);
    font-size: var(--font-size-xs);
}

.gotham-book-font{
    font-family: 'Gotham Book', sans-serif;
}

input[type="file"]::file-selector-button {
    display: none;
}

input[type="file"] {
    display: flex;
    align-items: center;
}

.custom-file-upload-button {
    background-color: var(--primary-button);
    color: var(--text-secondary-color);
    font-family: 'Gotham Book', sans-serif;
    padding: 10px 20px;
    cursor: pointer;
    display: inline-block;
    border-radius: 4px;
    border: none;
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}

.custom-file-upload-button:hover {
    background-color: var(--primary-button-hover);
    color: var(--primary-button-hover-text);
    border: 1px solid var(--primary-button-hover-text);
    transition: opacity 1s ease-in;
}

.custom-file-upload-button:hover span img {
    filter: brightness(0) saturate(100%) invert(53%) sepia(44%) saturate(436%) hue-rotate(110deg) brightness(90%) contrast(83%);
}

.signup-tab{
    display: none;
}

thead{
    background-color: var(--primary-button);
    color : #FFFFFF;
    font-family: 'Gotham Book', sans-serif;
}

[dir="rtl"] table thead tr:first-child th:first-child {
    border-radius: 0px 16px 0px 0px !important;
}

[dir="ltr"] thead tr:first-child th:first-child {
    border-radius: 16px 0px 0px 0px !important;
}

[dir="ltr"] table thead tr:first-child th:last-child {
    border-radius: 0px 16px 0px 0px !important;
}

[dir="rtl"] table thead tr:first-child th:last-child {
    border-radius: 16px 0px 0px 0px !important;
}

.secondary-search-button {
    background-color: #ffffff;
    font-family: 'Gotham Book', sans-serif;
    color: #221F20;
    border-radius: 8px;
    border-color: #221F20;
}

.secondary-search-button:hover {
    background-color: #221F20;
    color: #ffffff;
    border-color: #221F20;
}

span.select2-selection{
    border-color: #000000!important;
}

.details-link {
    font-family: 'Gotham Black', sans-serif;
    font-weight: 700;
    color: var(--text-primary-color);
    text-decoration: none;
}

.details-link:hover {
    text-decoration: underline;
    color: var(--text-primary-color);
}

.delete-action-button{
    border: 1px solid #AEBECD;
    color: #A60500;
    background-color: #ffffff;
    font-family: 'Gotham Book', sans-serif;
    border-radius: 8px;
}

.delete-action-button:hover{
    background-color: #A60500;
    color: #ffffff;
    border: 1px solid #A60500;
}

.edit-action-button {
    border: 1px solid #AEBECD;
    color: #006132;
    background-color: #ffffff;
    font-family: 'Gotham Book', sans-serif;
    border-radius: 8px;
}

.edit-action-button:hover {
    background-color: #006132;
    color: #ffffff;
    border: 1px solid #006132;
}

.edit-action-button:hover img {
    filter: brightness(0) invert(1);
}

.delete-action-button:hover img {
    filter: brightness(0) invert(1);
}

.btn-dropdown-custom {
    background-color: #A1E810;
    color: #1C1D1D;
    font-weight: 700;
    font-family: "Gotham Bold", sans-serif;
}

.empty-table-div {
    border: 1px solid #CACCE2;
    background: var(--primary-container-background-color);
    border-radius: 8px;
}

.custom-border {
    border-radius: 8px;
    border: 1px solid #CACCE2;
}

.card-img-size {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 8px;
}

div.carousel-indicators .active {
    background-color: #008746;
    border-radius: 8px;
}

.notification-container {
    border: 1px solid #CACCE2;
    border-radius: 8px;
}

.read-notification-container {
    background-color: #CACCE2;
}

.secondary-container {
    background-color: var(--secondary-container-background-color);
    border-radius: 8px;
}

html[color-scheme="dark"] .svg-dark {
    filter: brightness(0) saturate(100%) invert(100%) contrast(100%);
}

.user-name-header{
    color: var(--user-name-color);
}

.accessibility-button {
    color: var(--accessibility-color);
}

html[color-scheme="dark"] .svg-alternate-dark {
    filter: brightness(0) saturate(100%) invert(70%) sepia(87%) saturate(544%) hue-rotate(28deg) brightness(106%) contrast(87%);
}

html[color-scheme="dark"] td{
    color: #ffffff;
}

html[color-scheme="dark"] .modal-content{
    background-color: #1D1D1D;
}

html[color-scheme="dark"] .page-link {
    color: ActiveBorder;
    background-color: #1D1D1D;
    color: #A1E810;
}

html[color-scheme="dark"] .dropdown-menu{
    background-color: #1D1D1D;
}

html[color-scheme="dark"] .dropdown-item {
    color: #ffffff;
}

html[color-scheme="dark"] .dropdown-item:hover {
    background-color: #3E3F42;
}

.alternate-h5-dark {
    color: #006132;
}

[color-scheme="dark"] .alternate-h5-dark {
    color: #A1E810;
}

.applicant-tab{
    color: black;
}

[color-scheme="dark"] .applicant-tab {
    color: white;
}