/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification\ 
for details on configuring this project to bundle and minify static web assets. */

html {
    /* Used to modify rem values. */
    font-size: 14px;
}

body {
    background-color: gainsboro;
}

footer {
    font-size: 12px;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* QR code generator */
#qrCode {
    margin: 15px;
}

/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
    /* Hide captions */
    .carousel-caption {
        display: none;
    }

    .container-fluid {
        --bs-gutter-x: 0px !important;
    }

    .row {
        --bs-gutter-x: 0px !important;
    }

    .card {
        --bs-card-spacer-x: 0px !important;
    }

    body {
        font-size: small;
    }
}

tfoot input {
    width: 100%;
    padding: 3px;
    box-sizing: border-box;
}

.card {
    -moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
}

.thumb {
    max-width: 320px;
    max-height: 240px;
}

.qr-code {
    max-width: 320px;
    max-height: 320px;
}

@media only screen and (min-width: 576px) {
    .qr-code {
        max-width: 320px;
        max-height: 320px;
    }
}

@media only screen and (max-width: 576px) {
    .qr-code {
        max-width: inherit;
        max-height: inherit;
    }
}

#loading {
    background: url("/images/spinner.svg") no-repeat center;
    background-color: #33333333;
    background-size: 80px;
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 1000;
}

table.dataTable thead th {
    padding: .75rem;
}

table.dataTable tfoot th {
    padding: .75rem;
}

/* Used to resolve issue with not showing arrow in select lists. */
select.form-control {
    -webkit-appearance: menulist;
}

.select2-dropdown {
    z-index: 1100 !important;
}

.select2-selection {
    height: 33px !important;
    border: 1px solid #ced4da !important;
}

.bg-transparent {
    background-color: transparent !important;
}

#navbar {
    transition: top 0.3s;
}

/* To enable flashy colors in tables uncomment the block below. */
tr {
    --bs-table-bg: initial !important;
}

.table-danger {
    background-color: pink !important;
}

.table-success {
    background-color: lightgreen !important;
}

.table-primary {
    background-color: lightblue !important;
}

table a:not([href]) {
    color: #007bff !important; /* typical link blue */
    text-decoration: underline !important;
    cursor: pointer;
}

.smart-table {
    margin-right: calc(var(--bs-gutter-x) * -0.5) !important;
    margin-left: calc(var(--bs-gutter-x) * -0.5) !important;
}

.css-spinner {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3498db;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
    margin: auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.spinner-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px; /* Ensures space while content loads */
    width: 100%;
}