:root {
    --primary-color: #ff0000
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

header {
    overflow: hidden;
    background-color: #ff0000;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px -1px, rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px
}

    header nav {
        display: flex;
    }

    header img {
        max-height: 4em;
        margin: 8px 16px;
    }

    header a {
        display: inline-flex;
        text-align: center;
        padding: 12px 16px;
        text-decoration: none;
        font-size: 1.2em;
        color: #ffffff;
        align-items: center;
        opacity: 0.6;
        border-bottom: solid transparent 5px;
    }

        header a.active {
            opacity: 1;
            border-bottom: solid #ffffff 5px;
        }

        header a:hover {
            color: #ffffff;
        }

main div.header {
    display: flex;
    align-items: center;
    height: 64px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

main .header h1 {
    font-size: 32px;
    text-align: center;
    flex: 1 1 0%;
    font-weight: normal;
}

.table {
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
    border-collapse: separate;
}

.tableHeader {
    border-bottom: 1px solid #80808060;
    padding: 8px;
    min-height: 58px;
    align-content: center;
}

.tableItem {
    padding: 0px 8px;
    margin: 8px;
    min-height: 58px;
    display: grid;
    grid-template-columns: 4fr auto auto auto;
    border-bottom: 1px solid #80808060;
    align-content: center;
    column-gap: 12px;
}

    .tableItem:last-child {
        border: 0px solid;
    }

    .tableItem * {
        align-self: center;
    }

.tableFooter {
    border-top: 1px solid #80808060;
    padding: 8px;
    min-height: 58px;
    align-content: center;
}

.customModal {
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding: 10%; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.customModal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-height: 80%;
    display: flex;
}

.modalClose {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .modalClose:hover,
    .modalClose:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

.qrCode {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.iconButton {
    cursor: pointer;
    color: #ff0000;
    text-decoration: none;
    font-size: 2em;
    text-align: center;
    margin: 4px;
    box-sizing: border-box;
    text-shadow: 0px 1px 1px rgba(0,0,0,.2); /*rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;*/
}

    .iconButton:hover {
        color: rgb(178, 0, 0);
        text-shadow: 0px 2px 1px rgba(0,0,0,.2);
        transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, text-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    }

input[type=text], input[type=password] {
    background-color: transparent;
    box-sizing: border-box;
    border: 0px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.42);
    /*margin-bottom: 1px;*/
    margin: 16px;
    /*transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;*/
}

    input[type=text]:hover, input[type=password]:hover {
        box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.42);
    }

    input[type=text]:focus, input[type=password]:focus {
        box-shadow: inset 0 -2px 0 rgb(255, 0, 0);
        transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
        outline: none;
    }

input[type=radio] {
    opacity: 0;
    width: 0;
    position: fixed;
}

    input[type=radio]:checked + .radioLabel {
        box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0px, rgba(0, 0, 0, 0.14) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 0px 0px 0px, inset rgba(0, 0, 0, 0.2) 0px 2px 4px -1px, inset rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, inset rgba(0, 0, 0, 0.12) 0px 1px 10px 0px;
    }

        input[type=radio]:checked + .radioLabel.ok {
            background-color: rgb(33, 89, 35)
        }

        input[type=radio]:checked + .radioLabel.warn {
            background-color: rgb(153, 67, 1);
        }

        input[type=radio]:checked + .radioLabel.error {
            background-color: rgb(117, 26, 26);
        }

    input[type=radio]:first-child + .radioLabel {
        border-radius: 4px 0px 0px 4px
    }

.radioLabel {
    float: left;
    display: inline-block;
    box-sizing: border-box;
    background-color: rgb(178, 0, 0);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px -1px, rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px, inset rgba(0, 0, 0, 0.2) 0px 0px 0px 0px, inset rgba(0, 0, 0, 0.14) 0px 0px 0px 0px, inset rgba(0, 0, 0, 0.12) 0px 0px 0px 0px;
    color: rgb(255, 255, 255);
    padding: 6px 16px;
    text-transform: uppercase;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

    .radioLabel.ok {
        background-color: rgb(46, 125, 50)
    }

    .radioLabel.warn {
        background-color: rgb(237, 108, 2);
    }

    .radioLabel.error {
        background-color: rgb(211, 47, 47);
    }

    .radioLabel:last-child {
        border-radius: 0px 4px 4px 0px
    }

form:has(:invalid) :where(input[type="submit"]) {
    background-color: rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.26);
    box-shadow: none;
}

a::after {
    /*content: '<i class="fa-solid fa-square-minus" />';*/
}

.floatRight {
    float: right;
}

.floatLeft {
    float: left;
}

.textButton {
    margin: 8px;
    box-sizing: border-box;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
    background-color: rgb(255, 0, 0);
    border: 0px;
    outline: 0px;
    color: rgb(255, 255, 255);
    padding: 6px 16px;
    border-radius: 4px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

    .textButton:hover {
        background-color: rgb(178, 0, 0);
        box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px -1px, rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px;
        transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    }

.loader {
    height: 4px;
}

.loaderBackground {
    position: relative;
    display: block;
    height: 4px;
    overflow: hidden;
    z-index: 0;
    background-color: rgb(255, 158, 158);
}

.loaderForeground1 {
    position: absolute;
    left: 0px;
    bottom: 0px;
    top: 0px;
    transition: transform 0.2s linear 0s;
    transform-origin: left center;
    background-color: rgb(255, 0, 0);
    width: auto;
    animation: 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) 0s infinite normal none running animation-loader1;
}

.loaderForeground2 {
    position: absolute;
    left: 0px;
    bottom: 0px;
    top: 0px;
    transition: transform 0.2s linear 0s;
    transform-origin: left center;
    background-color: rgb(255, 0, 0);
    width: auto;
    animation: 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite normal none running animation-loader2;
}

@keyframes animation-loader1 {
    0% {
        left: -35%;
        right: 100%;
    }

    60% {
        left: 100%;
        right: -90%;
    }

    100% {
        left: 100%;
        right: -90%;
    }
}

@keyframes animation-loader2 {
    0% {
        left: -200%;
        right: 100%;
    }

    60% {
        left: 107%;
        right: -8%;
    }

    100% {
        left: 107%;
        right: -8%;
    }
}

.messageContainer {
    pointer-events: none;
    position: absolute;
    right: 24px;
    top: 106px;
    height: 100%;
    overflow: hidden;
    width: 315px;
}

.message {
    height: 64px;
    margin-bottom: 24px;
    border-radius: 4px;
    padding: 6px 16px;
    color: rgb(255, 255, 255);
    display: flex;
}

    .message .messageTextContainer {
        padding: 2px 0px;
    }

    .message .messageTextTitle {
        font-weight: bold;
    }

    .message.ok {
        background-color: rgb(46, 125, 50)
    }

        .message.ok::before {
            font: var(--fa-font-solid);
            content: '\f058';
            margin-right: 12px;
            padding: 7px 0px;
        }

    .message.warn {
        background-color: rgb(237, 108, 2);
    }

        .message.warn::before {
            font: var(--fa-font-solid);
            content: '\f071';
            margin-right: 12px;
            padding: 7px 0px;
        }

    .message.error {
        background-color: rgb(211, 47, 47);
    }

        .message.error::before {
            font: var(--fa-font-solid);
            content: '\f06a';
            margin-right: 12px;
            padding: 7px 0px;
        }

.fade-out {
    animation: fadeOut 1s;
}

@keyframes fadeOut {
    from {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.statusLabel {
    box-sizing: border-box;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px -1px, rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px;
    color: rgb(255, 255, 255);
    padding: 6px 16px;
    text-transform: uppercase;
    min-width: 150px;
    text-align: center;
    border-radius: 4px;
}

    .statusLabel.Ok, .statusLabel.Approved {
        background-color: rgb(46, 125, 50);
    }

        .statusLabel.Ok::after {
            content: "Ok";
        }

        .statusLabel.Approved::after {
            content: 'Validé';
        }

    .statusLabel.Defective, .statusLabel.Pending {
        background-color: rgb(237, 108, 2);
    }

        .statusLabel.Defective::after {
            content: "Deffectueux";
        }

        .statusLabel.Pending::after {
            content: "En attente";
        }

    .statusLabel.Missing, .statusLabel.Rejected {
        background-color: rgb(211, 47, 47);
    }

        .statusLabel.Missing::after {
            content: "Manquant";
        }

        .statusLabel.Rejected::after {
            content: 'Refusé';
        }

.backButton {
    color: var(--primary-color);
    font-size: 2em;
    cursor: pointer;
}

.loginBlock {
    margin: 48px auto auto auto;
    width: auto;
}

    .loginBlock td {
        vertical-align: middle;
    }