:root {
    --primary-color: #2f5597;
    --white-color: white;
    --black-color: black;
    --ek-color: #5ea5f1;
    --ek-color2: #4d6ea6;
    --ek-color3: #2f5597;
    --ek-color4: #52bdfa;
    --ek-color5: #5da4f5;
}

/* --------------- GENERAL STUFF --------------------- */

html, body {
    font-size: calc(1.0rem + 0.15vw);

}

.backgroundimage {
    height: 30vh;
    margin-top: -60px;
    background-repeat: no-repeat;
    background-size: cover;
}

/*TODO: Suggestion Manuela: Remove Images for Mobile Screens
@media (min-width:800px) {
    .backgroundimage {
        display: block !important height: 30vh;
        margin-top: -60px;
        background-repeat: no-repeat;
        background-size: cover;
    }
}

@media (min-width:300px) {
    .backgroundimage {
        display: none;
    }
}*/


body {
    /* This ensures the body takes at least full viewport height */
    min-height: calc(100vh - 121px);
    display: flex;
    flex-direction: column;
    margin-top: 121px;
    background-color: var(--primary-color);
    color: white;
}


h1 {
    font-size: calc(2.5rem + 2.1vw);
    align-content: center !important;
}
h3 {
    text-align:center;
}

small{
    font-size: 0.9rem;
}





/* --------------- NAVBAR -------------------- */
/* Fixed height navbar */
.navbar {
    min-height: 86px;
    background-color: var(--white-color) !important;
    
}

.navbar-collapse{
    background-color: var(--white-color) !important;
}

.nav-item.active {
    border-bottom: 7px solid var(--primary-color);
}

@media (min-width: 992px) {
    .nav-link {
        font-size: calc(0.7rem + 0.50vw);
    }
}

.nav-link {
    font-size: 1.1rem;
    white-space: nowrap;
}

.nav-item a:hover {
    color: var(--primary-color) !important;
}

/* --------------- FOOTER -------------------- */

/* Footer styling */
.footer {
    background-color: #f8f9fa;
    padding: 20px 0;
}

    .footer a {
        color: black;
        text-decoration: underline;
        font-size: 1.1rem;
    }





    .container{
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

/* --------------- HINT / TOOLTIP -------------------- */

.hint--custom-color::after {
    background-color: var(--ek-color);
    color: white;
}

.hint--custom-color.hint--top::before,
.hint--custom-color.hint--bottom::before,
.hint--custom-color.hint--left::before,
.hint--custom-color.hint--right::before {
    border-color: var(--ek-color4);
}

.hint--custom-color.hint--top::before {
    border-top-color: var(--ek-color4);
}

.hint--custom-color.hint--bottom::before {
    border-bottom-color: var(--ek-color4);
}

.hint--custom-color.hint--left::before {
    border-left-color: var(--ek-color4);
}

.hint--custom-color.hint--right::before {
    border-right-color: var(--ek-color4);
}

.btn-info {
    --bs-btn-bg: var(--ek-color);
}

/* Target hint.css tooltip text with a stronger selector */
.hint::before,
.hint--top::after,
.hint--bottom::after,
.hint--left::after,
.hint--right::after {
    font-size: 23px !important;
}

/* Remove text shadow from hint.css tooltips */
.hint::before,
.hint--top::after,
.hint--bottom::after,
.hint--left::after,
.hint--right::after {
    text-shadow: none !important;
}

/* --------------- FORMS -------------------- */

.form-wrapper {
    width: 100%;
    margin: 10px auto;
    border: 5px solid white;
    padding: 10px;
    color: white;
    border-radius: 20px;
    position: relative;
}

.form-title {
    display: inline-block;
    background-color: var(--primary-color);
    padding: 0 15px;
    font-size: calc(0.9rem + 0.5vw);
    position: absolute;
    top: -20px;
    left: 20px;
}

.form-item {
    flex-basis: 500px;
    min-width: 300px;
    padding: 10px;
    text-align: left;
    border-radius: 10px;
    font-weight: 400;
    font-size: 1rem;


}


.form-label{
    margin-bottom:0px;
}

button, Btn {
    align-self: center !important;
}




@media (min-width: 1300px) {
    .container {
        max-width: 90%;
    }
}
@media (min-width: 300px) {
    .container {
        overflow-x: hidden;
    }
}


.blazored-toast {
    width: 30rem;
    border-radius: .25rem;
}

.blazored-toast-container {
    z-index: 2000 !important;
}

.blazored-toast .blazored-toast-message[b-jnm4noxjw5] {
    font-size: 1rem !important;
}
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    font-size: 0.875em;
    color: red;
    font-weight: bold;
}

.invalid-feedback {
    font-size: 0.875em;
    color: red;
    font-weight: bold;
}

.bc-ek {
    background-color: var(--ek-color);
}

.height .form-control {
    height: 70px;
}

.underlinebold {
    font-weight: bold;
    text-decoration: underline;
}


.accordion-button:not(.collapsed){
    background-color: #cfe3ff;
    color: var(--pri);
    font-weight: bolder;
}

.accordion-body{
    font-size: 1rem;
}



ol li {
    padding-left: 0;
    margin-left: -20px; /* or adjust this value as needed */
}

ol li::marker{
    font-weight:600;
}

.requesttextarea {
    height: 170px;
}

.font-weight-bold {
    font-weight: bold !important;
}

.clickable {
    cursor: pointer;
}