@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

:root {
    --bg-primary: #E5E5E5;
    --bg-secondary: #F5F5F7;
    --color-primary: #9171FE;
    --color-secondary: #CB67CB;
    --color-warning: #FAD28A;
}

* {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    outline: none;
    border: none;
    transition: all .2s linear;
}

/********** GLOBAL **********/

body .btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

body .text-secondary {
    color: var(--color-secondary) !important;
}

body .text-primary {
    color: var(--color-primary) !important;
}

a {
    text-decoration: none;
    color: black;
}

.form-control:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 0.25rem rgb(145 113 254 / 25%);
}

.selected {
    color: var(--color-primary);
    background: url(../img/item-active.png) no-repeat center bottom;
    padding-bottom: 0.75rem;
}

.bg-fluid {
    background: var(--bg-secondary);
    -moz-box-shadow: 0 1em 1em -1em rgba(0, 0, 0, 0.5) inset, 0 -1em 1em -1em rgba(0, 0, 0, 0.5) inset;
    -webkit-box-shadow: 0 1em 1em -1em rgba(0, 0, 0, 0.5) inset, 0 -1em 1em -1em rgba(0, 0, 0, 0.5) inset;
    box-shadow: 0 1em 1em -1em rgba(0, 0, 0, 0.5) inset, 0 -1em 1em -1em rgba(0, 0, 0, 0.5) inset;
}

.bg-c-primary {
    background-color: var(--bg-secondary);
}

/********** AUTH **********/
body.auth {
    background-image: url('../img/bg-auth.png');
    background-size: cover;
    background-position: center;
}

    body.auth .login {
        min-height: 100vh;
    }

    body.auth .auth-right {
        background: white;
        border: 1rem;
        border-radius: 3rem 0rem 0rem 3rem;
        box-shadow: 24px 0.1rem 67px black;
    }

    body.auth .logo {
        height: 4rem;
    }

    body.auth .bg-white {
        border-radius: 1rem;
        background: rgba(255,255,255,0.75) !important;
    }

    body.auth .p-introduce {
        font-weight: bold;
    }

        body.auth .p-introduce b {
            font-size: 1.2rem;
        }

    body.auth h1 {
        font-size: 4rem;
        letter-spacing: 0.5rem;
    }

/********** HOME **********/

body .navbar {
    background-color: var(--bg-secondary);
}

#logo {
    height: 4rem;
}

.nav-item .nav-link {
    font-size: 1.2rem;
}

.card-fid {
    background-image: url(/img/card-background-2.jpg);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
}

    .card-fid .card-fid-content {
        display: flex;
        flex: 1;
    }

.flex-fluid {
    flex: auto !important;
}

.card-add {
    background-image: url(/img/card-background.jpg);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

    .card-add .d-flex {
        height: 100%;
    }

.progress-bar-vertical {
    background: #d0cece;
    display: flow-root;
}

    .progress-bar-vertical .progress-bar {
        width: 100%;
        height: 0;
        -webkit-transition: height 0.6s ease;
        -o-transition: height 0.6s ease;
        transition: height 0.6s ease
    }

        .progress-bar-vertical .progress-bar span {
            position: absolute;
            margin-left: -2.8rem;
            color: black;
            font-size: 1rem;
            font-weight: bold;
        }

.association-thumbnail {
    width: 100%;
    max-width: 60px;
}

.range {
    width: 50%;
}

    .range .d-flex {
        margin-top: -1rem;
    }

        .range .d-flex span {
            font-size: 0.8rem;
        }

input[type='range'] {
    width: 100%;
    height: 50px;
    cursor: pointer;
}

    input[type='range'],
    input[type='range']::-webkit-slider-runnable-track,
    input[type='range']::-webkit-slider-thumb {
        -webkit-appearance: none;
    }

        input[type='range']::-webkit-slider-runnable-track {
            width: 200px;
            height: 10px;
            background: linear-gradient(to right, var(--color-primary), var(--color-primary)), #AAA;
            background-size: 0% 100%;
            background-repeat: no-repeat;
            border-radius: 5px;
        }

        input[type='range']::-webkit-slider-thumb {
            height: 30px;
            width: 30px;
            margin-top: -10px;
            background: var(--color-secondary);
            border-radius: 50%;
            border: 2px solid white;
        }

/********** SCAN **********/
#video-container video {
    border-width: 45px !important;
}

/********* HISTORY ***********/
table, .dataTables_length, .dataTables_info, .pagination {
    font-size: 0.8rem;
}

.table td, .table th {
    border: none;
}

.table th {
    color: var(--color-secondary);
    font-weight: normal;
}

.table td:first-of-type {
    border-radius: 0.8rem 0 0 0.8rem;
}

.table td:last-of-type {
    border-radius: 0 0.8rem 0.8rem 0;
}
/********** MEDIA QUERY < XS **********/
@media(max-width:576px) {
    .card-add, .card-fid {
        height: 50px;
    }
}

/********** MEDIA QUERY < MD **********/

@media(min-width:768px) {
    body .auth .auth-right {
        border-radius: 3rem 3rem 3rem 3rem;
        box-shadow: none;
    }

    .card-add, .card-fid {
    }
}

/********** MEDIA QUERY < LG **********/

@media(min-width:992px) {
    .card-add, .card-fid {
        height: 195px;
    }
}

/********** MEDIA QUERY < XL **********/

@media(min-width:1200px) {
    .card-add, .card-fid {
        height: 195px;
    }
}

/********** MEDIA QUERY < XXL **********/

@media(min-width:1400px) {
}