:root {
    --color-primary: #c31e25;
    --color-light-red: #c87a7e;
    --color-gray: #4e4b64;
    --color-dark-gray: #40552c;
    --color-dark-red: #6d1016;
    --color-light-gray: #f5f6fa;
}

body {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.65;
    color: var(--color-gray);
    text-align: left;
    background-color: #f5f6fa;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    margin-bottom: 0.5rem;
    font-family: Nunito, sans-serif;
    font-weight: 700;
    line-height: 1.1;
    color: #364a63;
}

.bg-red { background-color: var(--color-primary); }
.bg-blue { background-color: var(--color-primary); }
.bg-success { background-color: var(--color-green) !important; }
.bg-dark { background-color: #121212 !important; }
.bg-dark-red { background-color: var(--color-dark-red); }
.bg-light-red { background-color: var(--color-light-red); }
.bg-light-gray { background-color: var(--color-light-gray); }

.text-primary { color: var(--color-primary) !important; }
.text-dark { color: #121212 !important; }
.border-success { border-color: var(--color-green) !important; }

.rounded-1 { border-radius: 1rem !important; }
.rounded-2 { border-radius: 2rem !important; }

.btn, .dual-listbox .dual-listbox__button {
    display: inline-block;
    font-family: Nunito, sans-serif;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    padding: 0.4375rem 1.125rem;
    font-size: 0.8125rem;
    line-height: 1.25rem;
    border-radius: 4px;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-lg, .btn-group-lg > .btn, .dual-listbox .btn-group-lg > .dual-listbox__button {
    padding: 0.6875rem 1.5rem;
    font-size: 0.9375rem;
    line-height: 1.25rem;
    border-radius: 5px;
}

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

.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus {
    background-color: var(--color-light-red);
    border-color: var(--color-light-red);
    box-shadow: 0 0 0 0.25rem #90212145;
}

.btn-outline-primary,
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus {
    border-radius: 10px;
    color: var(--color-primary);
    border-color: var(--color-primary);
    background-color: transparent;
    box-shadow: none;
}

.btn-outline-baby-blue,
.btn-outline-baby-blue:hover,
.btn-outline-baby-blue:not(:disabled):not(.disabled):active,
.btn-outline-baby-blue:focus,
.btn-outline-baby-blue:not(:disabled):not(.disabled):active:focus {
    color: var(--color-baby-blue);
    border-color: var(--color-baby-blue);
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 0.7rem;
    box-shadow: none;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.navbar {
    height: 80px;
    overflow: hidden;
}

.banner {
    height: 320px;
    margin-top: 80px;
}

footer {
    background-color: #f5f6fa;;
    color: #858796;
    font-size: 0.9rem;
}

footer .text-blue {
    font-size: 20px;
    font-weight: 500;
}

footer img {
    width: 200px;
}

footer li>a {
    color: var(--color-primary);
    font-size: 1.3rem;
}

.nav li { cursor: pointer; }

.company {
    font-size: 0.8rem;
}

.navbar-brand img {
    width: 250px;
}

.text-blue {
    color: var(--color-primary);
}

.text-light-red {
    color: var(--color-light-red);
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    color: var(--color-light-red);
}

.logo-link img {
    width: 300px;
}

.form-control-user {
    font-size: .8rem;
    padding: 1rem;
}


/***************** LOADING *****************/

#loading {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: fixed;
    opacity: 0.7;
    background-color: #fff;
    z-index: 9999;
    text-align: center;
    display: none;
}

#loading-image {
    position: absolute;
    top: 35%;
    left: 45%;
    z-index: 100;
    color: var(--color-light-red);
    font-size: 150px;
}

:focus-visible {
    outline: none;
}