:root {
    --color-primary: #2C2C2C;
    --color-secondary: #868e96;
    --color-success: #1dc9b7;
    --color-info: #2196F3;
    --color-warning: #ffc241;
    --color-danger: #fd3995;
    --color-light: #fff;
    --color-dark: #505050;
    --color-primary-100: #808080;
    --color-primary-200: #6b6b6b;
    --color-primary-300: #565656;
    --color-primary-400: #414141;
    --color-primary-500: #2c2c2c;
    --color-primary-600: #272727;
    --color-primary-700: #232323;
    --color-primary-800: #1e1e1e;
    --color-primary-900: #1a1a1a;
    --color-success-50: #7aece0;
    --color-success-100: #63e9db;
    --color-success-200: #4de5d5;
    --color-success-300: #37e2d0;
    --color-success-400: #21dfcb;
    --color-success-500: #1dc9b7;
    --color-success-600: #1ab3a3;
    --color-success-700: #179c8e;
    --color-success-800: #13867a;
    --color-success-900: #107066;
    --color-info-50: #9acffa;
    --color-info-100: #82c4f8;
    --color-info-200: #6ab8f7;
    --color-info-300: #51adf6;
    --color-info-400: #39a1f4;
    --color-info-500: #2196F3;
    --color-info-600: #0d8aee;
    --color-info-700: #0c7cd5;
    --color-info-800: #0a6ebd;
    --color-info-900: #0960a5;
    --color-warning-50: #ffebc1;
    --color-warning-100: #ffe3a7;
    --color-warning-200: #ffdb8e;
    --color-warning-300: #ffd274;
    --color-warning-400: #ffca5b;
    --color-warning-500: #ffc241;
    --color-warning-600: #ffba28;
    --color-warning-700: #ffb20e;
    --color-warning-800: #f4a500;
    --color-warning-900: #da9400;
    --color-danger-50: #feb7d9;
    --color-danger-100: #fe9ecb;
    --color-danger-200: #fe85be;
    --color-danger-300: #fe6bb0;
    --color-danger-400: #fd52a3;
    --color-danger-500: #fd3995;
    --color-danger-600: #fd2087;
    --color-danger-700: #fc077a;
    --color-danger-800: #e7026e;
    --color-danger-900: #ce0262;
}

/*Login*/
.login {
    background: linear-gradient(180deg, #2C2C2C 20%, #A7A7A7 80%);
    height: 100%
}

.login-container {
    margin: 170px 10px -120px 10px;
    border-radius: 20px;
}

/*Backgrounds*/
.bg-persona-primary-100 {
    background-color: var(--color-primary-100)!important;
}

.bg-persona-primary-200 {
    background-color: var(--color-primary-200) !important;
}

.bg-persona-primary-300 {
    background-color: var(--color-primary-300) !important;
}

.bg-persona-primary-400 {
    background-color: var(--color-primary-400) !important;
}

.bg-persona-primary-500 {
    background-color: var(--color-primary-500) !important;
}

.bg-persona-primary-600 {
    background-color: var(--color-primary-600) !important;
}

.bg-persona-primary-700 {
    background-color: var(--color-primary-700) !important;
}

.bg-persona-primary-800 {
    background-color: var(--color-primary-800) !important;
}

.bg-persona-primary-900 {
    background-color: var(--color-primary-900) !important;
}

.bg-persona-white {
    background-color: var(--color-light) !important;
    color: var(--color-dark) !important!important;
}

.bg-trans-gradient {
    background: linear-gradient( 250deg, var(--color-primary-500), var(--color-primary-900)) !important;
}

/*Buttons*/
.btn-persona-primary {
    color: #fff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

    .btn-persona-primary:hover {
        color: #fff;
        background-color: var(--color-primary-400);
        border-color: var(--color-primary-600);
    }

    .btn-persona-primary:focus, .btn-persona-primary.focus {
        color: #fff;
        background-color: var(--color-primary-400);
        border-color: var(--color-primary-600);
        -webkit-box-shadow: 0 0 0 0.2rem rgb(240, 236, 230, 0.5);
        box-shadow: 0 0 0 0.2rem rgb(240, 236, 230, 0.5);
    }

    .btn-persona-primary.disabled, .btn-persona-primary:disabled {
        color: #fff;
        background-color: var(--color-primary);
        border-color: var(--color-primary);
    }

    .btn-persona-primary:not(:disabled):not(.disabled):active, .btn-persona-primary:not(:disabled):not(.disabled).active,
    .show > .btn-persona-primary.dropdown-toggle {
        color: #fff;
        background-color: var(--color-primary-600);
        border-color: var(--color-primary-600);
    }

        .btn-persona-primary:not(:disabled):not(.disabled):active:focus, .btn-persona-primary:not(:disabled):not(.disabled).active:focus,
        .show > .btn-persona-primary.dropdown-toggle:focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgb(240, 236, 230, 0.5);
            box-shadow: 0 0 0 0.2rem rgb(240, 236, 230, 0.5);
        }

.btn-persona-outline-primary {
    color: var(--color-primary) !important;
    /* background-color: transparent;*/
    background-color: white !important;
    border-color: var(--color-primary);
}

    .btn-persona-outline-primary.border-white {
        color: var(--color-primary);
        background-color: transparent;
        border-color: var(--color-light);
    }

    .btn-persona-outline-primary:hover {
        color: #fff !important;
        background-color: var(--color-primary-400) !important;
        border-color: var(--color-primary-600) !important;
    }

    .btn-persona-outline-primary:focus, .btn-persona-outline-primary.focus {
        color: #fff;
        background-color: var(--color-primary-400);
        border-color: var(--color-primary-600);
        -webkit-box-shadow: 0 0 0 0.2rem rgb(240, 236, 230, 0.5);
        box-shadow: 0 0 0 0.2rem rgb(240, 236, 230, 0.5);
    }

    .btn-persona-outline-primary.disabled, .btn-persona-outline-primary:disabled {
        color: #fff;
        background-color: var(--color-primary);
        border-color: var(--color-primary);
    }

    .btn-persona-outline-primary:not(:disabled):not(.disabled):active, .btn-persona-outline-primary:not(:disabled):not(.disabled).active,
    .show > .btn-persona-outline-primary.dropdown-toggle {
        color: #fff;
        background-color: var(--color-primary-600);
        border-color: var(--color-primary-600);
    }

        .btn-persona-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-persona-outline-primary:not(:disabled):not(.disabled).active:focus,
        .show > .btn-persona-outline-primary.dropdown-toggle:focus {
            color: #fff;
            -webkit-box-shadow: 0 0 0 0.2rem rgb(240, 236, 230, 0.5);
            box-shadow: 0 0 0 0.2rem rgb(240, 236, 230, 0.5);
        }

/*Typography*/
html body a:hover {
    color: var(--color-primary) !important;
}

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

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

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

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

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

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

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

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

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

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

.text-persona-dark {
    color: var(--color-dark) !important;
}

.text-persona-light {
    color: var(--color-light) !important;
}

.text-persona-danger {
    color: var(--color-danger) !important;
}

.text-persona-danger {
    color: var(--color-danger) !important;
}

.text-persona-danger-100 {
    color: var(--color-danger-100) !important;
}

.text-persona-danger-200 {
    color: var(--color-danger-200) !important;
}

.text-persona-danger-300 {
    color: var(--color-danger-300) !important;
}

.text-persona-danger-400 {
    color: var(--color-danger-400) !important;
}

.text-persona-danger-500 {
    color: var(--color-danger-500) !important;
}

.text-persona-danger-600 {
    color: var(--color-danger-600) !important;
}

.text-persona-danger-700 {
    color: var(--color-danger-700) !important;
}

.text-persona-danger-800 {
    color: var(--color-danger-800) !important;
}

.text-persona-danger-900 {
    color: var(--color-danger-900) !important;
}

.form-group-material .control-label {
    color: var(--color-primary) !important;
}

.form-control:focus {
    border-color: var(--color-primary-600)!important;
}

.form-group-material .bar::before {
    background: var(--color-primary);
}

.has-length .input-group-text {
    border-color: var(--color-primary) !important;
}

/*Font Styles*/
.font-weight-medium {
    font-weight: 500 !important;
}

.font-weight-semi-bold {
    font-weight: 600 !important;
}

/*Nav*/
.navbar {
    overflow: hidden;
    position: fixed;
    bottom: -1px;
    width: 100%;
    background-color: var(--color-primary);
    padding: 0.4rem 1rem !important;
}

    /* Style the links inside the navigation bar */
    .navbar a {
        float: left;
        display: block;
        color: #fff;
        text-align: center;
        text-decoration: none;
    }

        /* Add a color to the active/current link */
        .navbar a.active {
            color: var(--color-dark) !important;
            font-weight: bold !important;
        }

            .navbar a.active i {
                font-weight: 700 !important;
            }

        .navbar a.hover {
            color: var(--color-dark) !important;
            font-weight: 700 !important;
        }

            .navbar a.hover i {
                font-weight: 700 !important;
            }

/*Nab Pills*/
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff !important;
    background-color: var(--color-primary) !important;
}

a.nav-link {
    color: var(--color-primary) !important;
    background-color: transparent;
}

/*Accordion*/
.accordion .card .card-header .card-title {
    color: var(--color-primary) !important;
}

.accordion.accordion-hover .card-header:hover .card-title.collapsed {
    background-color: var(--color-primary-100)!important;
}

.accordion.accordion-hover .card-title:not(.collapsed) {
    color: #fff !important;
    background-color: var(--color-primary-100) !important;
}

/*Plugins*/
/*Select 2 Customization*/
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--color-primary) !important;
    color: #fff;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: white;
    border-color: var(--color-primary-300) !important;
    color: var(--color-primary) !important;
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple, .select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
    border-color: var(--color-primary) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
    color: var(--color-primary) !important;
}

.select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--color-primary) !important;
}

.select2-container--open .select2-dropdown--below {
    border-color: var(--color-primary) !important;
}

.select2-container--open .select2-dropdown--above {
    border-color: var(--color-primary) !important;
}

/*File Input*/
.js .input-file-trigger {
    background: var(--color-primary) !important;
    border: solid 1px var(--color-primary)!important;
}
    .js .input-file:hover + .input-file-trigger, .js .input-file:focus + .input-file-trigger, .js .input-file-trigger:hover, .js .input-file-trigger:focus {
        background: var(--color-primary) !important;
        border: solid 1px var(--color-primary) !important;
        color: var(--color-light)!important;
    }

/*bootbox*/
.bootbox-accept {
    color: #fff;
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/*Sweetalert*/
.swal2-styled.swal2-confirm {
    background-color: var(--color-primary) !important;
}

/*Carousel*/
.carousel-indicators li {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    width: 13px;
    height: 13px;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: var(--color-primary);
    background-clip: padding-box;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    opacity: .5;
    -webkit-transition: opacity 0.6s ease;
    transition: opacity 0.6s ease;
}

/*Checkbox*/
.checkbox input:checked ~ .helper {
    color: var(--color-primary) !important;
}

.checkbox label:hover .helper {
    color: var(--color-primary) !important;
}

.checkbox .helper::before, .checkbox .helper::after {
    background-color: var(--color-primary-900) !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: var(--color-primary-900) !important;
    background-color: var(--color-primary-900) !important;
}

/*Calendar*/
.calendar .calendar-body .days-header {
    background-color: var(--color-primary)!important;
}

/*Image*/
.img-border-style {
    border-radius: 10px !important;
    border-color: var(--color-primary)!important;
    border-width: 2px!important;
}