﻿:root {
    --Charcoal: 65, 65, 65;
    --DarkCharcoal: 65, 65, 65;
    --Green: 55, 180, 90;
    --DarkGreen: 55, 180, 90;
    --Teal: 65, 195, 200;
    --DarkTeal: 65, 195, 200;
    --Gold: 255, 185, 50;
    --DarkGold: 255, 185, 50;
}

* {
    font-family: 'Barlow', sans-serif;
    color: rgb(var(--Charcoal));
}

a {
    color: rgb(var(--Green));
}

    a:hover,
    a:active,
    a:focus {
        color: rgb(var(--DarkGreen));
    }

/*#region Navbar */
.navbar {
    background-color: rgb(var(--Charcoal)) !important;
}

.nav-link {
    color: rgb(var(--Charcoal));
}

    .nav-link:hover {
        color: rgb(var(--DarkCharcoal));
    }

.nav-pills .nav-link.active {
    background-color: rgb(var(--Charcoal));
}
/*#endregion */

/*#region Buttons */
/*#region Primary et Success */
.btn-primary,
.btn-success,
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: rgb( var(--Green));
    border-color: rgb(var(--Green));
}

    .btn-primary:hover,
    .btn-primary:not(:disabled):not(.disabled).active,
    .btn-primary:not(:disabled):not(.disabled):active,
    .btn-success:hover,
    .btn-success:not(:disabled):not(.disabled).active,
    .btn-success:not(:disabled):not(.disabled):active {
        background-color: rgb(var(--DarkGreen));
        border-color: rgb(var(--DarkGreen));
    }

        .btn-primary:focus,
        .btn-primary:not(:disabled):not(.disabled).active:focus,
        .btn-primary:not(:disabled):not(.disabled):active:focus,
        .btn-success:focus,
        .btn-success:not(:disabled):not(.disabled).active:focus,
        .btn-success:not(:disabled):not(.disabled):active:focus {
            box-shadow: 0 0 0 0.2rem rgba(var(--Green),.6);
        }
/*#endregion */

/*#region Warning */
/*#region Normal */
.btn-warning {
    background-color: rgb( var(--Gold));
    border-color: rgb(var(--Gold));
}
/*#endregion */

/*#region Outline */
.btn-outline-warning {
    color: rgb( var(--Gold));
    border-color: rgb(var(--Gold));
}

    .btn-outline-warning:hover {
        background-color: rgb( var(--Gold));
        border-color: rgb(var(--Gold));
    }
/*#endregion */
/*#endregion */

/*#region Secondary et Dark */
/*#region Normal */
.btn-secondary,
.btn-dark {
    background-color: rgb( var(--Charcoal));
    border-color: rgb(var(--Charcoal));
}

    .btn-secondary:hover,
    .btn-secondary:not(:disabled):not(.disabled).active,
    .btn-secondary:not(:disabled):not(.disabled):active,
    .show > .btn-secondary.dropdown-toggle,
    .btn-dark:hover,
    .btn-dark:not(:disabled):not(.disabled).active,
    .btn-dark:not(:disabled):not(.disabled):active,
    .show > .btn-dark.dropdown-toggle {
        background-color: rgb( var(--DarkCharcoal));
        border-color: rgb(var(--DarkCharcoal));
    }

        .btn-secondary:focus,
        .btn-secondary:not(:disabled):not(.disabled).active:focus,
        .btn-secondary:not(:disabled):not(.disabled):active:focus,
        .btn-dark:focus,
        .btn-dark:not(:disabled):not(.disabled).active:focus,
        .btn-dark:not(:disabled):not(.disabled):active:focus {
            box-shadow: 0 0 0 0.2rem rgba(var(--Charcoal),.6);
        }
/*#endregion */

/*#region Outline */
.btn-outline-secondary,
.btn-outline-dark {
    color: rgb( var(--Charcoal));
    border-color: rgb(var(--Charcoal));
}

    .btn-outline-secondary:hover
    .btn-outline-dark:hover {
        background-color: rgb( var(--Charcoal));
        border-color: rgb(var(--Charcoal));
    }
/*#endregion */
/*#endregion */
/*#endregion */

/*#region Input */
.form-control:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--Green),.6);
    border-color: rgb(var(--Green))
}

.form-control::selection,
.form-control::-webkit-datetime-edit-day-field:focus,
.form-control::-webkit-datetime-edit-month-field:focus,
.form-control::-webkit-datetime-edit-year-field:focus {
    background-color: rgba(var(--Green),.3);
}
/*#endregion */

.custom-switch .custom-control-label::after {
    background-color: rgb(var(--Charcoal));
}

/*#region Pagination */

.page-link,
.page-link * {
    color: rgb(var(--Green));
}

    .page-link:hover {
        color: rgb(var(--DarkGreen));
        background-color: rgba(var(--Charcoal), .3);
    }

    .page-link:active,
    .page-link:focus {
        box-shadow: none;
        color: rgb(var(--Green));
    }

.page-item.active .page-link {
    background-color: rgb(var(--Green));
    border-color: rgb(var(--Green));
}

.page-item.disabled .page-link {
    color: rgba(var(--Green), .3);
}

/*#endregion */
/*#region Kiosks */
#Kiosks tbody tr:nth-of-type(odd) {
    background-color: rgba(var(--Charcoal), .3);
}

#Kiosks tbody tr:nth-of-type(even) {
    background-color: rgba(var(--Charcoal), .2);
}

#Kiosks tbody tr:hover {
    background-color: rgba(var(--Charcoal), .4);
}

/*#endregion */

/*#region Scroll */
*::-webkit-scrollbar {
    width: 15px;
}

*::-webkit-scrollbar-track {
    background: rgb(var(--Charcoal));
}

*::-webkit-scrollbar-thumb {
    background-color: rgb(var(--Green));
    border: solid 3px rgb(var(--Charcoal));
    border-radius: 15px;
}

/*#endregion Scroll */
