@font-face {
    font-family: 'Roboto Slab';
    src: url(../fonts/roboto-slab.ttf);
}

@font-face {
    font-family: 'Material Icons';
    src: url(../fonts/materialIcons-regular.ttf);
}

@font-face {
    font-family: 'Inter';
    src: url(../fonts/inter.ttf);
}

:root {
    /* ############## VAR COLORS ################ */
    --white: #FFFFFF;
    --black: #000000;
    --text-black: #000000;
    --text-white: #FFFFFF;

    --background-off-white: #F7F7F7; /* in Figma background-white*/
    --darkmode-black: #2d2d2d;
    --light-gray: #888888;
    --lighter-gray: #9E9E9E;
    --pale-gray: #BFBFBF;
    --50perc-light-gray: #c3c3c3;
    --tu-delft-primary-blue: #00A6D6; /* Cyan */
    --tu-delft-secondary-blue: #0076C2;
    --tu-delft-dark-blue: #0C2340;
    --link-blue: #0076C2;
    --pale-blue: #d7eff4;
    --error-red: #E21A1A;

    /* ############## VAR FONT FAMILY ################ */

    --font-family-base: Arial, sans-serif;
    --font-family-titles: 'Roboto Slab', Arial, sans-serif;

    /* ############## VAR FONTS SIZES : based on tailwind ################ */
    --font-xs: 0.75rem; /* 12px */
    --font-line-xs: 1rem; /* 16px */

    --font-sm: 0.875rem; /* 14px */
    --font-line-sm: 1.25rem; /* 20px */
    /*--font-sm: 13.33px;*/
    /*--font-line-sm: 16.13px;*/

    /*--font-base: 1rem; !* 16px *!*/
    /*--font-line-base: 1.5rem; !* 24px *!*/
    --font-base: 1rem; /* 16px */
    --font-line-base: 1.25rem; /* 20px */

    --font-lg: 1.125rem; /* 18px */
    --font-line-lg: 1.75rem; /* 28px */

    --font-xl: 1.25rem; /* 20px */
    --font-line-xl: 1.75rem; /* 28px */

    --font-2xl: 1.5rem; /* 24px */
    --font-line-2xl: 2rem; /* 32px */

    --font-3xl: 1.875rem; /* 30px */
    --font-line-3xl: 2.25rem; /* 36px */
}

/* ############################################## //
// ################## COLORS #################### //
// ############################################## */

.bg-blue-delft {
    --bg-opacity: 1;
    background-color: var(--tu-delft-primary-blue);
}

.text-link {
    --bg-opacity: 1;
    color: var(--link-blue);
}

.text-link a{
    --bg-opacity: 1;
    color: var(--link-blue);
}


.link-in-blue a{
    --bg-opacity: 1;
    color: var(--link-blue);
}

/* ############################################## //
// ################### BASE ##################### //
// ############################################## */

body {
    background-color: var(--white);
    margin: 0;
    font-family: var(--font-family-base);
    font-size: var(--font-base);
    line-height: var(--font-line-base);
}

html {
    scrollbar-color: #8884 transparent;
    scroll-behavior: smooth;
}

img {
    object-fit: cover;
}

.img-icon img {
    height: 16px !important;
    margin: 0 auto;
}

h1 {
    font-family: var(--font-family-titles);
    font-weight: 300 !important;
    font-size: 2.1rem !important;
    line-height: 2.6rem !important;,;
    margin: 1em 0 0.5em 0;
}

h2 {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
    font-family: var(--font-family-titles);
    font-weight: 400 !important;
    margin: 1em 0 0.5em 0;
}

h3 {
    font-family: var(--font-family-titles);
    font-weight: 400 !important;
    font-size: 1.3rem !important;
    line-height: 2rem !important;
    color: #888888;
    margin: 1em 0 0.5em 0;
}

.h2-wrap-admin-pages{
    border-bottom: 1px solid var(--pale-gray);
    padding: 5px 0;
    margin-bottom: 5px;
}


.pages-text ol{
    padding: 5px!important;
    margin-left: 25px!important;
}

.pages-text ol li[data-list="ordered"]{
      list-style: decimal!important;
}

.pages-text ol li[data-list="bullet"]{
      list-style: disc!important;
}

.pages-text a{
    color: var(--link-blue) !important;
    cursor: pointer!important;
}

input[type=search] {
    border: none;
    padding: 12px;
}

input[type=text], textarea.textarea, select, .input-style, input[type=number], [type=date] {
    border: 1px solid #cccccc;
    padding: 8px;
    border-radius: 4px;
    background: white;
}

.input-error {
    border: 1px solid var(--error-red) !important;
}

#input-error {
    color: var(--error-red) !important;
}

.input-error {
    border: 1px solid var(--error-red) !important;
}

#errorDiv {
    color: var(--error-red) !important;
}

textarea.textarea {
    min-height: 280px;
}

.input-note {
    color: var(--light-gray);
    margin-top: 3px;
}

input[type=text]:disabled,
input[type=text]:disabled,
input[type=text]:disabled,
select:disabled {
    background: #eeeeee;
    font-style: italic;
}

.container {
    margin: auto;
    max-width: 1000px !important;
    padding: 0 20px;
    justify-content: space-between;
    align-items: center;
}

.content {
    padding: 32px 0 32px 0;
}

.font-icon {
    font-family: 'Material Symbols Outlined', sans-serif;
    user-select: none;
    font-style: normal;
    font-size: large;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
}

.icon {
    font-family: 'Material Symbols Outlined', sans-serif;
    user-select: none;
    font-style: normal;
    font-size: large;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
}

.icon-no-style {
    font-family: 'Material Symbols Outlined', sans-serif;
    user-select: none;
    font-style: normal;
    font-size: large;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
}


.background-off-white {
    background-color: var(--background-off-white);
}

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

span.tooltip {
    position: relative;
    display: inline-block;
    cursor: inherit;
}


/* ############################################## //
// ################## BUTTONS ################### //
// ############################################## */

button {
    transition: background-color 0.2s, color 0.2s;
    padding: 10px 20px;
    margin: 10px;
    border-radius: 3px;
    color: var(--text-white);
    background-color: var(--tu-delft-primary-blue);
    cursor: pointer;
}

button:hover {
    background-color: #2d2d2d;
    color: var(--text-white);
}

button .icon {
    float: left;
    margin-right: .5ex;
}


button.no-style {
    transition:  inherit!important;
    padding:  inherit!important;
    margin:  inherit!important;
    border:  inherit!important;
    color:  inherit!important;
    background:  inherit!important;
    cursor:  inherit!important;
}

button.no-style:hover {
    background-color:  inherit!important;
    color:  inherit!important;
}

button.no-style .icon {
    float: inherit!important;
    margin-right: 0!important;
}

.primary-button {
    font-family: var(--font-family-titles);
    color: var(--text-white);
    background-color: var(--tu-delft-primary-blue) !important;
    border-radius: 3px;
    border: none;
    padding: 12px;
}

.primary-button:hover {
    background-color: #2d2d2d;
    color: var(--text-white);
}

.secondary-button {
    font-family: var(--font-family-titles);
    border: var(--tu-delft-primary-blue) solid 1px;
    color: var(--tu-delft-primary-blue);
    background-color: transparent;
    border-radius: 3px;
    padding: 12px;
}

.secondary-button:hover {
    background-color: var(--tu-delft-primary-blue);
    border-color: var(--tu-delft-primary-blue);
    color: var(--text-white);
}

.tertiary-button {
    border: var(--tu-delft-secondary-blue) solid 1px;
    color: var(--tu-delft-secondary-blue);
    background-color: transparent;
    border-radius: 999px;
    text-transform: uppercase;
    padding: 12px;
}

.tertiary-button:hover {
    background-color: var(--tu-delft-secondary-blue);
    color: var(--text-white);
}

.caution-button {
    font-family: var(--font-family-titles);
    border: var(--error-red) solid 1px;
    color: var(--error-red);
    background-color: transparent;
    border-radius: 3px;
    padding: 12px;
}

.caution-button:hover {
    background-color: var(--error-red);
    border-color: var(--error-red);
    color: var(--text-white);
}

.button-lg {
    font-size: large;
    display: inline-flex;
    align-items: center;
    padding: 20px 30px;
}

.icon-button-lg {
    margin: 5px;
    padding: 10px;
    text-align: center;
    line-height: 30px;
    border-radius: 100%;
    border: var(--tu-delft-secondary-blue) 1px solid;
    color: var(--tu-delft-secondary-blue);
    font-family: 'Material Icons', sans-serif;
    transition: padding 0.1s ease, margin 0.1s ease
}

.icon-button-lg:hover {
    margin: 0;
    padding: 15px;
}

.icon-button-sm, .icon-button-sm:hover {
    font-family: 'Material Symbols Outlined', sans-serif;
    background: transparent;
    color: inherit;
}

.red-button {
    color: var(--error-red);
    background-color: transparent;
    padding: 12px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.red-button:hover {
    background: transparent;
    color: var(--error-red);
}


/*THIS IS DUPLICATE NEED TO REMOVE AND CREATE ONE GENREIC BTN-MORE CLASS*/
.more-info .btn-more, .btn-more {
    margin: 5px;
    padding: 10px;
    text-align: center;
    line-height: 28px;
    font-size: 28px;
    border-radius: 100%;
    cursor: pointer;
    border: 1px solid var(--tu-delft-primary-blue);
    color: var(--tu-delft-primary-blue);
    font-family: 'Material Icons', sans-serif;
    transition: padding 0.1s ease, margin 0.1s ease
}

.more-info .btn-more:hover, .btn-more:hover {
    background: transparent;
    padding: 15px;
    margin: 0;
}


.search-button button {
    border: 1px solid;
    border-radius: 0;
    text-align: center;
    font-family: 'Material Icons', sans-serif;
    border-left: none;
    background: var(--tu-delft-primary-blue);
    border-color: var(--tu-delft-primary-blue);
    height: 48px;
    width: 48px;
    line-height: 20px;
    font-size: 28px;
    color: var(--text-white);
}

.search-button button:hover {
    background: var(--tu-delft-secondary-blue);
    border-color: var(--tu-delft-secondary-blue);
}


/* ############################################## //
// ############# Loading spinner ################ //
// ############################################# */

.spinner {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: radial-gradient(farthest-side, #b7b7b7 94%, #0000) top/9px 9px no-repeat,
    conic-gradient(#0000 30%, #b7b7b7);
    -webkit-mask: radial-gradient(farthest-side, rgba(64, 64, 64, 0) calc(100% - 9px), #000 0);
    animation: spinner-c7wet2 1s infinite linear;
}

@keyframes spinner-c7wet2 {
    100% {
        transform: rotate(1turn);
    }
}


.btn-loader {
    width: 25px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(farthest-side, #ffffff 94%, rgba(255, 255, 255, 0)) top/8px 8px no-repeat,
    conic-gradient(#0000 30%, #ffffff);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #030202 0);
    animation: min-loader 1s infinite linear;
}

@keyframes min-loader {
    100% {
        transform: rotate(1turn)
    }
    /*This makes it spin*/
}


i.btn-loader {
    display: inline-block; /* Show the loader when the button has the 'loading' class */
}


/* ############################################## //
// ################ Pagination ################## //
// ############################################# */

.pagination {
    height: 30px;
    width: 30px;
    padding: 0;
    margin-left: 3px;
    font-size: var(--font-xs);
    line-height: 30px;
    text-align: center;
}

.pagination.dots {
    width: fit-content;
    margin-left: 0;
}

.pagination.selected {
    background-color: var(--tu-delft-primary-blue);
    color: var(--text-white) !important;
    border-radius: 9999px;
}

button.pagination:hover {
    background-color: transparent;
    color: var(--text-black) !important;
}

.pagination span.img-icon img {
    height: 14px !important;
}


.medium-note {
    font-family: var(--font-family-base);
    color: #888888;
    font-size: 13px;
    line-height: 20px;
}


/* ############################################## //
// ################# KEYWORDS ################### //
// ############################################# */


.keywords span {
    font-size: .75rem;
    text-transform: capitalize;
    border-radius: 999px;
    padding: 5px 10px;
    margin: 5px 5px 0 0;
    color: #888f;
    border: #8888 1px solid;
    display: inline-block;
    /*cursor: pointer;*/
    transition: background-color 0.2s ease;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.keyword:hover {
    background-color: #8882;
}

/* ############################################## //
// ############### DROPDOWN MENU ################ //
// ############################################# */

.drop-btn {
    font-family: 'Material Symbols Outlined', sans-serif;
    font-size: 20px;
    font-weight: bold;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
}

.dropdown-content a{
    color: #374151;
}
.dropdown-content a:hover{
    color: black;
}

/* Show the dropdown menu */
.show-dropdown {
    display: block;
}

/* ############################################## //
// ################# Messages ################### //
// ############################################# */

.hidden-after-5s {
    opacity: 1;
    animation: fadeOut 1s ease-in forwards;
    animation-delay: 5s;
}

@keyframes fadeOut {
    to {
        opacity: 0;
    }
}



/* ############################################## //
// ################# TABS ################### //
// ############################################# */

/* Style the tab */
.content-tab {
    overflow: hidden;
}

/* Style the buttons that are used to open the tab content */
.content-tab a {
    float: left;
    outline: none;
    cursor: pointer;
    transition: 0.3s;
}

/* Change background color of buttons on hover */
.content-tab a:hover {
    /*background-color: #ddd;*/
}

/* Create an active/current tablink class */
.content-tab a.active {
    color: var(--tu-delft-secondary-blue);
    border-color: var(--tu-delft-secondary-blue);
}

/* Style the tab content */
/*.div-content-tab {*/
/*    display: none;*/
/*    margin-top: 40px;*/
/*}*/



.profile-search-select select {
    border: none;
    /*border-bottom: 1px solid var(--link-blue);*/
    background: var(--white);
    border-radius: 0;
    outline: none;
    color: var(--link-blue);
    font-size: var(--font-sm);
    padding: 0 20px 1px 1px;
    appearance: none; /* Remove default arrow in some browsers */
    -webkit-appearance: none; /* Remove default arrow in older versions of WebKit */
    -moz-appearance: none; /* Remove default arrow in Firefox */
    background: url(/static/images/icons/selector-arrow-link.svg) no-repeat right 1px center;
    background-color: transparent;
    background-size: 16px; /* Adjust the size of the arrow */
}

.profile-search-select select option {
    padding: 7px;
    font-size: var(--font-sm);
    border: 1px solid var(--pale-gray);
}

/* Style for Firefox */
.profile-search-select select::-ms-expand {
    display: none;
}

.profile-search-select select::-ms-expand {
    margin-right: 3px;
}