/* General style to hide scrollbars */
.navbar .nav {
    overflow-y: auto;
    scrollbar-width: none; /* for Firefox */
    -ms-overflow-style: none;  /* for Internet Explorer and Edge */
}

/* Hides the scrollbar while still allowing scrolling */
.navbar .nav::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}

/* Apply color styling to all <a> tags */
a {
    color: var(--text-color); /* Use the text color variable for consistency */
    text-decoration: none; /* Optional: removes underline from links */
}

a:hover {
    color: var(--text-color); 
}

a:focus {
    color: var(--primary);
}



/* Ensure <a> tags adapt to dark mode */
.dark-mode a {
    color: var(--text-color-dark); /* Adapt to dark mode text color */
}

.dark-mode a:hover, .dark-mode a:focus {
    color: var(--text-color-dark); /* Adapt hover effect to dark mode primary color */
}


/* #footer-container {
    min-height: 110vh;
    padding: 20px;
  } */


/* Buttons */
/* .btn-orange {
    background-color: $orange;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-orange:hover {
    background-color: darken($orange, 10%);
    color: white;
}

.btn-outlined-orange {
    background-color: transparent;
    color: $orange;
    border: 1px solid $orange;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-outlined-orange:hover {
    background-color: $orange;
    color: white;
} */

.btn-outline {
    background-color: transparent;
    color: var(--text-color-hover);
    /* border: 1px solid var(--text-color); */
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.3s;
}
.btn-outline:hover {
    background-color: var(--background-color-hover);
    color: var(--text-color);
    /* background-color: var(--background-color-hover);
    color: var(--text-color-hover); */
}
.btn-outline:active {
    border: 1px solid var(--text-color);
}

.btn-grad-hover-parent {
    /* --button-size: calc(min(100%, 60px));
    display: flex; 
    align-items: center; 
    justify-content: center; 
    height: auto; 
    padding: 10px;  */
    max-width: 100%;
    max-height: 100%;
}

.btn-grad-hover {
    width: 40px;
    height: 40px;

    /* width: 100%; */
    /* height: 100%; */
    /* max-width: 40px; */
    /* max-height: 40px;  */
    aspect-ratio: 1;

    /* font-size: 16px; */
    /* font-weight: 600; */
    color: #fff;
    cursor: pointer;
    /* margin: 20px; */
    text-align: center;
    border: none;
    background-size: 300% 100%;
    border-radius: 50%;
    moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;

    /* display: inline-flex;
    align-items: center;
    justify-content: center; */
}

.btn-grad-hover:hover {
    background-position: 100% 0;
    moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.btn-grad-hover:focus {
    outline: none;
}

.btn-grad-hover.bn-grad {
    background-image: linear-gradient(to right, #667eea, #764ba2, #6b8dd6, #8e37d7);
    box-shadow: 0 4px 15px 0 rgba(116, 79, 168, 0.75);
}

/* BUTTONS END */

/* ELEVATION */
.elevated-shadow {
    box-shadow:
        0 8px 16px var(--box-shadow-light-hover),
        0 12px 40px var(--box-shadow-dark-hover);
    /* transform: translateY(-5px); */
}
.elevated-shadow:hover {
    
    box-shadow:
        0 8px 16px var(--box-shadow-light-hover),
        0 12px 40px var(--box-shadow-dark-hover);
    
}

.elevated {
    transition:
        box-shadow 0.3s ease,
        transform 0.3s ease,
        background-color 0.3s ease;
}

.elevated:hover {
    box-shadow:
        0 8px 16px var(--box-shadow-light-hover),
        0 12px 40px var(--box-shadow-dark-hover);
    transform: translateY(-2px);
}
.elevated-soft {
    transition:
        box-shadow 0.3s ease,
        transform 0.3s ease,
        background-color 0.3s ease;
}

.elevated-soft:hover {
    box-shadow:
        0 8px 16px var(--box-shadow-light-hover),
        0 12px 40px var(--box-shadow-dark-hover);
    transform: translateY(-1px);
}
/* ELEVATION END */



.badge-container {
    position: relative;
    display: inline-block;
}

.status-badge {
    position: absolute;
    display: inline-block;
    min-width: 30%; /* Stellen Sie die Größe entsprechend Ihrem Design ein */
    top: -8px;
    /* right: -8px; */
    height: 22px;
    font-size: 14px;
    padding: auto 8px; /* Fügt horizontalen Abstand innerhalb der Badge hinzu */
    white-space: nowrap; /* Verhindert, dass der Text umbricht */

    left: 87%; /* Zentriert den Badge im Elternelement */
    transform: translateX(-50%); /* Verschiebt es zurück, um genau zentriert zu sein */
}

.bi {
    font-size: 1.5rem;
}
.bi-smaller {
    font-size: 1.25rem;
}

.datetime {
    font-size: 0.75rem;
}

.bi-half {
    font-size: 0.5rem;
}

.bi-75 {
    font-size: 0.75rem;
}

/* MODAL */
.modal-dialog-scrollable {
    max-height: calc(100% - 1rem);
}

.modal-content {
    max-height: 100%;
    overflow-y: auto !important; /* Ermöglicht das Scrollen innerhalb des Modal-Inhalts */
    animation: bounceIn 0.5s;
}

@keyframes bounceIn {
    0%,
    20%,
    40%,
    60%,
    80%,
    100% {
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }
    20% {
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        transform: scale3d(0.9, 0.9, 0.9);
    }
    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        transform: scale3d(0.97, 0.97, 0.97);
    }
    100% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}
/* MODAL END */