:root {
    --red-1: #c04444;
    --red-2: #903333;
    --red-3: #dc3545;
    --red-border: #b04444;
    --grey: rgb(80, 80, 80);
    --black-1: #161616;
    --black-2: #333333;
    --black-3: #404040;
    --white: #cccccc;

    --bs-body-color: var(--white);
    --bs-body-bg: var(--black-3);
    --bs-dark-rgb: 64,64,64;
    --bs-border-color: var(--white);
    --bs-emphasis-color: var(--white);
    --bs-emphasis-color-rgb: 255,255,255;
    --bs-link-color: var(--white);
    --bs-secondary-color: var(--white);
    --bs-secondary-bg: var(--black-2);
    --bs-tertiary-color: var(--white);
    --bs-tertiary-bg: var(--grey);

    --bs-link-hover-color-rgb: 192,51,51 ;
    --bs-link-color-rgb: 204,172,172;

    --bs-primary-rgb: 192,68,68;
    --bs-border-radius: 0.25rem;
}

@media (min-width: 1400px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 100%;
    }
}

span.input-group-text {
    color: var(--black-2);
}

body {
    background-color: var(--black-1);
    color: var(--white);
}

.bg-warning {
    color: var(--black-1);
    border-color: var(--red-1) !important;
}

.form-floating > label::after  {
    background-color: var(--white) !important;
}

* {
    text-decoration: none !important;
}

.pagination {
    --bs-pagination-active-bg: var(--red-1);
    --bs-pagination-active-border-color: var(--white);
    --bs-pagination-active-color: var(--white);
    --bs-pagination-hover-bg: var(--red-2);
    --bs-pagination-hover-color: var(--white);
}

.card { 
    background: none !important;
    --bs-card-spacer-x: var(--bs-card-cap-padding-x);
    --bs-card-spacer-y: var(--bs-card-cap-padding-y);
    --bs-card-border-color: var(--white);
}

.card-header, .card-footer {
    background: var(--black-2) !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 0 0 var(--black-1);
}

.menu {
    position: relative;
    min-height: 60px;
    background-color: var(--black-2);
    border-bottom: 2px dotted var(--grey);
    padding-left: 60px;
}

.menu > img {
    position: absolute; 
    top: 7px; 
    left: 5px; 
    height: 44px;
}

/* 
 * Custom button class
 */
.btn-primary {
    --bs-btn-bg: var(--red-1);
    --bs-btn-border-color: var(--red-border);

    --bs-btn-hover-bg: var(--red-2);
    --bs-btn-hover-border-color: var(--red-border);

    --bs-btn-active-bg: var(--red-1);
    --bs-btn-active-border-color: var(--red-border);
 
    --bs-btn-disabled-bg: var(--red-3);
    --bs-btn-disabled-border-color: var(--red-border);
}

/* 
 * Custom text class
 */

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

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

/* 
 * Custom link class
 */

.link-primary, .link-primary:focus {
    color: var(--red-2) !important;
    font-weight: bold;
    text-decoration: none;
} 

.link-primary:hover {
    color: var(--grey) !important;
}

.link-secondary, .link-secondary:focus {
    color: var(--white) !important;
    font-weight: bold !important;
    text-decoration: none;
} 

.link-secondary:hover {
    color: var(--red-1) !important;
}

/* 
 * Custom Cards
 */

/*.card {
    background-color: #c99f9f25 !important;
    border-color: #00000035 !important;
}
.card-header {
    background-color: #7a606025 !important;
}*/

/* 
 * Custom modals
 */

.modal-content {
    border-radius: 5px;
}

/* 
 * Custom NavBar
 */

#navMenuContent a.active {
    color: var(--red-1) !important;
}

/* 
 * Custom Checkbox
 */

input[type="checkbox"]:checked {
    background-color: var(--red-1);
    border-color: var(--red-border);
}