body {
    background:
        repeat-x center top / 100% 200px url('/static/images/background-header.svg'),
        repeat-x center bottom / 100% 200px url('/static/images/background-footer.svg');
    background-color: white;
    background-attachment: fixed;
}

.card-group {
    gap: 20px;
    margin-bottom: 20px;
}

.card {
    height: 300px;
    background-color: rgba(255, 255, 255, 0.7);
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}

.form-control {
    background-color: rgba(255, 255, 255, 0.7);
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}

.card:hover {
    /* filter: brightness(120%); */
    filter: brightness(102%);
}

.card-title {
    padding: 5px 5px 0 5px !important;
}

.card-subtitle {
    padding: 0 5px 0 5px !important;
}

.card-body {
    overflow-y: hidden;
}

.tab-container {
    height: calc(100vh - 350px);
    overflow-x: hidden;
    overflow-y: auto;
}

.tab-container > div.row > div:first-of-type {
    flex: 1 0 0%;
}

form .visually-hidden {
    display: revert;
    width: revert !important;
    height: revert !important;
    position: revert !important;
}

.modal-backdrop {
    --bs-backdrop-opacity: .1 !important;
}

.error .toast-header {
    background-color: rgba(255,0,0,0.95) !important;
    
}

.success .toast-header {
    background-color: rgba(0,255,0,0.95) !important;
    
}

.info .toast-header {
    background-color: rgba(71,191,255,0.95) !important;
    
}

.toast {
    --bs-toast-bg: rgba(var(--bs-body-bg-rgb), .95)
}


.toast-container .toast {
    width: auto;
}

.toast-body {
    white-space: pre;
    font-family: monospace;
}

/*@media (prefers-color-scheme: dark) {
    html {
        filter: url('./invert-luminance-preserve-hue.svg#invert-luminance-preserve-hue');
}
    }

    html > * {
        filter: revert;
    }

    .card, .form-control {
        background-color: rgba(192, 204, 224, 0.9);
        filter: brightness(120%) invert(0);
    }

    .card:hover, .form-control:hover, .form-control:focus {
        background-color: rgba(192, 204, 224, 0.9);
        filter: brightness(110%) invert(0);
    }

    .card-title, .card-subtitle {
        filter: invert(0);
    }

    .card-body {
        filter: invert(1);
    }

    .card-body > *:not(iframe) {
        filter: invert(1);
    }

    .card-body > iframe {
        filter: hue-rotate(60deg) brightness(80%) contrast(60%);
    }

  }
*/