@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    background-color: #fbfbfb;
    font-family: 'Montserrat';
    font-size:1rem !important;
}

header {
    min-height:60px;
}

h1 {
    color: #003057;
    font-weight: 700;
}

h2 {
    color: #003057;
    font-weight: 700;
    font-size: 1.5rem;
}

h3 {
    color: #003057;
    font-weight: 700;
    font-size: 1.25rem;
}

h4, h5 {
    color: #003057;
}

p {
    color: #003057;
    font-size: 1rem;
}

a {
    color: #003057;
    display: inline-block;
}

li {
    color: #003057;
}

.light-blue {
    /*background-color: #e3edf8;*/
    background-color: #ebf2fa;
}

.light-blue-text {
    /*background-color: #e3edf8;*/
    color: #aecaec;
}

.mid-blue {
    background-color: #aecaec;
}

.dark-blue {
    background-color: #003057;
}

.green {
    background-color:#14a44d;
}

.dark-blue-text {
    color: #003057;
}

.yellow-text {
    color: #fab52c;
}

.navbar-light .navbar-nav .nav-link {
    color: #003057;
}

.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
    color: #fab52c;
}

.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show > .nav-link {
    color: #fab52c;
}

.btn-custom {
    text-transform: initial;
    font-size: 1.25rem;
    font-weight: 700;
    padding: 15px 20px 15px 20px;
    border-radius: 0.75rem;
    box-shadow: none;
}

.btn-default {
    background-color: #ffffff;
    color: #003057;
}

.btn-primary {
    background-color: #003057;
    border: .125rem solid #003057;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #003057;
    border: .125rem solid #003057;
}

.btn-secondary {
    background-color: #aecaec;
    color: #003057;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: #aecaec;
    color: #003057;
}

.btn-outline-primary {
    color: #003057;
    border-color: #003057;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: #003057;
    border-color: #003057;
}

.btn-round {
    border-radius: 2rem;
    padding: 1.2rem 1.5rem;
}

.btn-start {
    background-color: #fab52c;
    color: #003057;
}

.btn-start:hover, .btn-start:focus, .btn-start:active, .btn-start:active:focus {
    background-color: #f6c666 !important;
    color: #003057 !important;
    opacity: 1 !important;
}
.btn-success {
    color:#ffffff;
    border-color:#14a44d;
}

.form-control {
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 0.75rem;
//  font-size: 1.25rem;
}

.form-control:focus {
    border-color: #003057;
}

.form-control-label {
    color: #003057;
    font-size: 1.25rem;
}

.invalid-feedback,
.invalid-tooltip {
    font-size: 1rem;
}

.card {
    border-radius: 1.5rem;
}

.card-small-text {
    color: #fab52c;
}

@media (max-width: 767px) {
    .card-margin {
        margin-top: 4rem;
    }
}

@media (min-width: 768px) {
    .card-margin {
        margin-top: 6rem;
    }
}

.card-white {
    background-color: #ffffff;
    border-radius: 1.5rem;
}

.progress {
    border-radius: 2rem;
    background-color: #aecaec;
}

.progress-success {
    border-radius: 2rem;
    background-color: #ebf2fa;
}

.progress-bar {
    background-color: #fab52c;
    border-radius: 2rem;
}

.border-end {
    border-right: 3px solid #003057 !important;
}

.modal-footer {
    border-top: none;
}

.form-check-input {
    border: none;
    font-size: 1.25rem;
}

.form-check-label {
    color: #003057;
    font-size: 1.25rem;
}

.form-check-select {
    color: #003057;
    font-size: 1.25rem;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 0.75rem;
}

.form-check-input[type="radio"]:checked::after {
    background-color: #003057;
    border-color: #003057;
}

.form-outline .form-control ~ .form-notch div {
    border: none;
}

.container-medium {
    max-width: 810px !important;
    margin-right: auto;
    margin-left: auto;
}

.my-container {
    margin: 0 auto;
    width: 100%;
    max-width: 80%;
}
@media (max-width: 768px) {
    .my-container {
        max-width:100%;
    }
}

@media (min-width: 768px) {
    .my-container {
        max-width:100%;
    }
}
@media (min-width: 900px) {
    .my-container {
        max-width:100%;
    }
}
@media (min-width: 1600px) {
    .my-container {
        max-width: 70%;
    }
}

.white-section {
    background-color:#ffffff;
}

.hr-godi {
    border: 1px solid #003057;
    opacity: 1
}

h1, h2 {
    margin-bottom:1.3rem;
}

h2 {
    margin-top:1.8rem;
}

footer {
    background-color:#003057 !important;
    color:#ffffff;
}

.green {
    background-color:#14a44d;
}
.vjs-default-skin .vjs-big-play-button {
    top:70% !important;
}
.video-js, video {
    border-radius: 1.4rem;
    background-color:#fff;
}

.rounded, picture {
    border-radius: 1.4rem !important;
}

.text-white p, p.text-white {
    color:#fff !important;
}

.text-orange p, h2.text-orange, p.text-orange {
    color: #fab52c;
}


.text-orange p, h2.text-orange, p.text-orange {
    color: #fab52c;
}

input[type=range] {
    -webkit-appearance: none;
    margin: 20px 0;
    width: 100%;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    animate: 0.2s;
    background: #aecaec;
    border-radius: 25px;
}
input[type=range]::-webkit-slider-thumb {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 4px 0 rgba(0,0,0, 1);
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -8px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #aecaec;
}
.range-wrap{
    width: 100%;
    position: relative;
}
.range-value{
    position: absolute;
    top: -70%;
}
.range-value span{
    width: 50px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #aecaec;
    color: #003057;
    font-size: 1.75rem;
    font-weight: 700;
    display: block;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    border-radius: 6px;
}
.range-value span:before{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 10px solid #aecaec;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    margin-top: -1px;
}
.nrs-hidden {
    color: #ebf2fa;
}
.text-red {
    color: #dc4c64;
}

[data-toggle="collapse"].collapsed .if-not-collapsed {
    display: none;
}
[data-toggle="collapse"]:not(.collapsed) .if-collapsed {
    display: none;
}

.form-check-label {
    font-size:1rem !important;
}

.invalid-feedback {
    position:relative !important;
    font-size:0.9rem !important;
}

.input-error ul li:last-of-type {
    margin-bottom:0px !important;
}

.form-control.is-invalid {
    padding-right:0 !important;
}

/* Standard: alle Links außer Buttons haben Unterstreichung */
a:not(.btn) {
    text-decoration: underline;
    color: inherit; /* optional: erbt die Textfarbe */
}

/* Hover: Unterstreichung bleibt sichtbar */
a:not(.btn):hover {
    text-decoration: underline;
    color: inherit; /* oder eine Akzentfarbe */
}

/* Buttons sollen keine Unterstreichung bekommen */
a.btn {
    text-decoration: none;
}

nav a {
    text-decoration: none !important;
}

.card.text-white h5 {
    color:#ffffff !important;
}


/*
* Admin
 */

:root {
    /* Navbar-Höhe (anpassen, z. B. 64px, je nach deiner Navbar) */
    --navbar-height: 56px;
    --sidenav-width: 200px;
}

/* Falls deine Navbar fixed-top ist, gib dem Body Top-Padding */
body.navbar-fixed {
    padding-top: var(--navbar-height);
}

/* Admin-Sidenav */
#admin-sidenav {
    position: fixed;
    top: var(--navbar-height);     /* Start genau unter der Navbar */
    left: 0;
    width: var(--sidenav-width);
    height: calc(100vh - var(--navbar-height));
    overflow-y: auto;
    background: #f8f9fa;           /* helle Fläche (Bootstrap bg-light) */
    border-right: 1px solid #e9ecef;
    z-index: 1010;                  /* unter Navbar (Navbar meist 1030+) */
}

/* Content-Bereich, wenn Sidenav aktiv ist */
.with-admin-sidenav {
    margin-left: var(--sidenav-width);
    max-width: calc(100% - var(--sidenav-width));
}

/* Responsiv: auf kleinen Screens Sidenav schmaler oder ausblenden */
@media (max-width: 991.98px) {
    :root { --sidenav-width: 220px; }
}
@media (max-width: 767.98px) {
    /* Optional: auf sehr kleinen Geräten Sidenav ausblenden oder overlay */
    #admin-sidenav { display: none; }
    .with-admin-sidenav { margin-left: 0; }
}

.table-actions {
    width:1px;
    white-space: nowrap;
}

.btn.btn-sm {
    padding: 0.3125rem 1rem;
    font-size: 0.75rem;
    line-height: 1.5;
}


th {
    background-color: #aecaec !important;
    color: #003057 !important;
    font-weight:bold !important;
}

th a {
    font-weight:bold !important;
    text-decoration: none !important;
}

/* Platz für Pfeile rechts im TH */
th.sorting,
th.sorting_asc,
th.sorting_desc,
th.sorting_asc_disabled,
th.sorting_desc_disabled {
    position: relative;
    padding-right: 1.75rem; /* Platz für die Pfeile */
    cursor: pointer;
    white-space: nowrap;     /* optional */
    color: #495057;          /* Textfarbe wie vorher */
}

/* neutrale Pfeile (hell) */
th.sorting::before,
th.sorting::after,
th.sorting_asc::before,
th.sorting_asc::after,
th.sorting_desc::before,
th.sorting_desc::after {
    content: "";
    position: absolute;
    right: .5rem;
    border-left: .32rem solid transparent;
    border-right: .32rem solid transparent;
    opacity: .35;
}

/* ▲ oben */
th.sorting::before,
th.sorting_asc::before,
th.sorting_desc::before {
    top: 40%;
    border-bottom: .44rem solid #6c757d; /* neutral grau */
    transform: translateY(-50%);
}

/* ▼ unten */
th.sorting::after,
th.sorting_asc::after,
th.sorting_desc::after {
    top: 60%;
    border-top: .44rem solid #6c757d;    /* neutral grau */
    transform: translateY(-50%);
}

/* aktive Zustände dunkler hervorheben */
th.sorting_asc::before {
    border-bottom-color: #212529; /* ▲ aktiv */
    opacity: .9;
}
th.sorting_desc::after {
    border-top-color: #212529;    /* ▼ aktiv */
    opacity: .9;
}

/* optional: deaktivierte Sortierung blasser */
th.sorting_asc_disabled::before,
th.sorting_desc_disabled::after {
    opacity: .15;
}

/* Basis: Form inline halten */
.table-actions form {
    display: inline-flex;
    margin: 0;
    padding: 0;
}

/* In der Button-Group: Buttons sollen sich nicht überdehnen */
.table-actions .btn-group > .btn,
.table-actions .btn-group > form > .btn {
    flex: 0 0 auto;
    width: auto;
    line-height: 1.5; /* Text schön mittig */
    padding: .25rem .5rem; /* gleiche Höhe wie andere btn-sm */
}

/* Rundungen reparieren */
.table-actions .btn-group > .btn:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.table-actions .btn-group > form > .btn {
    border-radius: 0; /* mittlere Buttons ohne Ecken */
}

.table-actions .btn-group > form:last-child > .btn {
    border-top-right-radius: .25rem;   /* rechtes Ende wieder rund */
    border-bottom-right-radius: .25rem;
}

.container-fluid p:last-of-type {
    margin-bottom:0px !important;
    padding-bottom:0px !important;
}

.form-check-input {
    border: 0.125rem solid var(--mdb-form-control-border-color) !important;
}

.card.text-white h1, .card.text-white h2, .card.text-white h3, .card.text-white h4, .card.text-white h5 {
    color:#ffffff !important;
}