html {
    font-family: var(--font-family);
    /* -webkit-tap-highlight-color: var(--color-white); */
}
body {
    font-family: var(--font-family);
    color: var(--color-gray);
    background-color: var(--color-light);
}
a {
    color: var(--color-secondary);
    /* background-color: var(--color-white); */
}
a:hover {
    color: var(--color-secondary-dark);
}

pre,
code,
kbd,
samp {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
        "Courier New", monospace;
}
caption {
    color: var(--color-light-dark);
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: var(--color-dark-light);
}
hr {
    border-top: 1px solid var(--color-black);
}
mark,
.mark {
    background-color: #fcf8e3;
}
.blockquote-footer {
    color: var(--color-gray);
}
.img-thumbnail {
    background-color: var(--color-light);
    border: 1px solid var(--color-light-dark);
}
.figure-caption {
    color: var(--color-gray);
}

code {
    color: #e30059;
}
kbd {
    color: var(--color-white);
    background-color: var(--color-dark);
}
pre {
    color: var(--color-gray);
}
.table {
    color: var(--color-gray);
}
.table th,
.table td {
    border-top: 1px solid var(--color-light);
}
.table thead th {
    border-bottom: 2px solid var(--color-light);
}
.table tbody + tbody {
    border-top: 2px solid var(--color-light);
}
.table-bordered {
    border: 1px solid var(--color-light);
}
.table-bordered th,
.table-bordered td {
    border: 1px solid var(--color-light);
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--color-light);
}
.table-hover tbody tr:hover {
    color: var(--color-gray);
    background-color: rgba(227, 230, 236, 0.25);
}
.table-primary,
.table-primary > th,
.table-primary > td {
    background-color: #b8d3fb;
}
.table-primary th,
.table-primary td,
.table-primary thead th,
.table-primary tbody + tbody {
    border-color: #7aadf8;
}

.table-hover .table-primary:hover {
    background-color: #a0c4fa;
}
.table-hover .table-primary:hover > td,
.table-hover .table-primary:hover > th {
    background-color: #a0c4fa;
}
.table-secondary,
.table-secondary > th,
.table-secondary > td {
    background-color: #d5b8ef;
}
.table-secondary th,
.table-secondary td,
.table-secondary thead th,
.table-secondary tbody + tbody {
    border-color: #b17ae2;
}
.table-hover .table-secondary:hover {
    background-color: #c9a3ea;
}
.table-hover .table-secondary:hover > td,
.table-hover .table-secondary:hover > th {
    background-color: #c9a3ea;
}
.table-success,
.table-success > th,
.table-success > td {
    background-color: #b8e8d5;
}
.table-success th,
.table-success td,
.table-success thead th,
.table-success tbody + tbody {
    border-color: #7ad4b1;
}
.table-hover .table-success:hover {
    background-color: #a5e2ca;
}
.table-hover .table-success:hover > td,
.table-hover .table-success:hover > th {
    background-color: #a5e2ca;
}
.table-info,
.table-info > th,
.table-info > td {
    background-color: #b8f2f3;
}
.table-info th,
.table-info td,
.table-info thead th,
.table-info tbody + tbody {
    border-color: #7ae6e9;
}
.table-hover .table-info:hover {
    background-color: #a2eeef;
}
.table-hover .table-info:hover > td,
.table-hover .table-info:hover > th {
    background-color: #a2eeef;
}
.table-warning,
.table-warning > th,
.table-warning > td {
    background-color: #fce5b8;
}
.table-warning th,
.table-warning td,
.table-warning thead th,
.table-warning tbody + tbody {
    border-color: #f9ce7a;
}
.table-hover .table-warning:hover {
    background-color: #fbdca0;
}
.table-hover .table-warning:hover > td,
.table-hover .table-warning:hover > th {
    background-color: #fbdca0;
}
.table-danger,
.table-danger > th,
.table-danger > td {
    background-color: #f9bdb8;
}
.table-danger th,
.table-danger td,
.table-danger thead th,
.table-danger tbody + tbody {
    border-color: #f3857a;
}
.table-hover .table-danger:hover {
    background-color: #f7a7a0;
}
.table-hover .table-danger:hover > td,
.table-hover .table-danger:hover > th {
    background-color: #f7a7a0;
}
.table-light,
.table-light > th,
.table-light > td {
    background-color: var(--color-white-dark);
}
.table-light th,
.table-light td,
.table-light thead th,
.table-light tbody + tbody {
    border-color: #f7f9fc;
}
.table-hover .table-light:hover {
    background-color: var(--color-light-dark);
}
.table-hover .table-light:hover > td,
.table-hover .table-light:hover > th {
    background-color: var(--color-light-dark);
}
.table-dark,
.table-dark > th,
.table-dark > td {
    background-color: #c0c4ca;
}
.table-dark th,
.table-dark td,
.table-dark thead th,
.table-dark tbody + tbody {
    border-color: #8b929c;
}
.table-hover .table-dark:hover {
    background-color: #b2b7be;
}
.table-hover .table-dark:hover > td,
.table-hover .table-dark:hover > th {
    background-color: #b2b7be;
}

.table-black,
.table-black > th,
.table-black > td {
    background-color: var(--color-muted-light);
}
.table-black th,
.table-black td,
.table-black thead th,
.table-black tbody + tbody {
    border-color: #7a7a7a;
}

.table-hover .table-black:hover {
    background-color: var(--color-muted);
}
.table-hover .table-black:hover > td,
.table-hover .table-black:hover > th {
    background-color: var(--color-muted);
}

.table-white,
.table-white > th,
.table-white > td {
    background-color: var(--color-white);
}
.table-white th,
.table-white td,
.table-white thead th,
.table-white tbody + tbody {
    border-color: var(--color-white);
}

.table-hover .table-white:hover {
    background-color: var(--color-white-dark);
}
.table-hover .table-white:hover > td,
.table-hover .table-white:hover > th {
    background-color: var(--color-white-dark);
}

.table-red,
.table-red > th,
.table-red > td {
    background-color: #f9bdb8;
}
.table-red th,
.table-red td,
.table-red thead th,
.table-red tbody + tbody {
    border-color: #f3857a;
}

.table-hover .table-red:hover {
    background-color: #f7a7a0;
}
.table-hover .table-red:hover > td,
.table-hover .table-red:hover > th {
    background-color: #f7a7a0;
}

.table-active,
.table-active > th,
.table-active > td {
    background-color: rgba(227, 230, 236, 0.25);
}

.table-hover .table-active:hover {
    background-color: rgba(212, 216, 226, 0.25);
}
.table-hover .table-active:hover > td,
.table-hover .table-active:hover > th {
    background-color: rgba(212, 216, 226, 0.25);
}

.table .thead-dark th {
    color: rgba(255, 255, 255, 0.65);
    background-color: var(--color-dark-light);
    border-color: #40516a;
}
.table .thead-light th {
    color: var(--color-graydark);
    background-color: var(--color-light);
    border-color: var(--color-light);
}

.table-dark {
    color: rgba(255, 255, 255, 0.65);
    background-color: var(--color-dark-light);
}
.table-dark th,
.table-dark td,
.table-dark thead th {
    border-color: #40516a;
}
.table-dark.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05);
}
.table-dark.table-hover tbody tr:hover {
    color: rgba(255, 255, 255, 0.65);
    background-color: rgba(255, 255, 255, 0.075);
}
.form-control {
    color: var(--color-gray);
    background-color: var(--color-white);
    border: 1px solid var(--color-light-dark);
}
.form-control::-ms-expand {
    background-color: var(--color-white);
}
.form-control:-moz-focusring {
    color: var(--color-white);
    text-shadow: 0 0 0var (--color-muted);
}
.form-control:focus {
    color: var(--color-gray);
    background-color: var(--color-white);
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 0.0625rem var(--color-secondary);
}
.form-control::-webkit-input-placeholder {
    color: var(--color-gray);
}
.form-control::-moz-placeholder {
    color: var(--color-gray);
}
.form-control:-ms-input-placeholder {
    color: var(--color-gray);
}
.form-control::-ms-input-placeholder {
    color: var(--color-gray);
}
.form-control::placeholder {
    color: var(--color-gray);
}
.form-control:disabled,
.form-control[readonly] {
    background-color: var(--color-light-dark);
}
select.form-control:focus::-ms-value {
    color: var(--color-gray);
    background-color: var(--color-white);
}
.form-control-plaintext {
    color: var(--color-gray);
    background-color: var(--color-white);
    border: solid var(--color-white);
}
.form-check-input[disabled] ~ .form-check-label,
.form-check-input:disabled ~ .form-check-label {
    color: var(--color-light-dark);
}
.valid-feedback {
    color: var(--color-success);
}
.valid-tooltip {
    color: var(--color-white);
    background-color: rgba(0, 172, 105, 0.9);
}
.was-validated .form-control:valid,
.form-control.is-valid {
    border-color: var(--color-success);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2300ac69' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
}
.was-validated .form-control:valid:focus,
.form-control.is-valid:focus {
    border-color: var(--color-success);
    box-shadow: 0 0 0 0.0625rem rgba(0, 172, 105, 0.25);
}
.was-validated .custom-select:valid,
.custom-select.is-valid {
    border-color: var(--color-success);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23323f52' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")
            no-repeat right 1rem center/8px 10px,
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2300ac69' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e")
            var(--color-white) no-repeat center right 2rem /
            calc(0.75em + 0.5rem) calc(0.75em + 0.5rem);
}
.was-validated .custom-select:valid:focus,
.custom-select.is-valid:focus {
    border-color: var(--color-success);
    box-shadow: 0 0 0 0.0625rem rgba(0, 172, 105, 0.25);
}
.was-validated .form-check-input:valid ~ .form-check-label,
.form-check-input.is-valid ~ .form-check-label {
    color: var(--color-success);
}
.was-validated .custom-control-input:valid ~ .custom-control-label,
.custom-control-input.is-valid ~ .custom-control-label {
    color: var(--color-success);
}
.was-validated .custom-control-input:valid ~ .custom-control-label::before,
.custom-control-input.is-valid ~ .custom-control-label::before {
    border-color: var(--color-success);
}
.was-validated
    .custom-control-input:valid:checked
    ~ .custom-control-label::before,
.custom-control-input.is-valid:checked ~ .custom-control-label::before {
    border-color: #00df88;
    background-color: #00df88;
}
.was-validated
    .custom-control-input:valid:focus
    ~ .custom-control-label::before,
.custom-control-input.is-valid:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.0625rem rgba(0, 172, 105, 0.25);
}
.was-validated
    .custom-control-input:valid:focus:not(:checked)
    ~ .custom-control-label::before,
.custom-control-input.is-valid:focus:not(:checked)
    ~ .custom-control-label::before {
    border-color: var(--color-success);
}
.was-validated .custom-file-input:valid ~ .custom-file-label,
.custom-file-input.is-valid ~ .custom-file-label {
    border-color: var(--color-success);
}
.was-validated .custom-file-input:valid:focus ~ .custom-file-label,
.custom-file-input.is-valid:focus ~ .custom-file-label {
    border-color: var(--color-success);
    box-shadow: 0 0 0 0.0625rem rgba(0, 172, 105, 0.25);
}
.invalid-feedback {
    color: var(--color-danger);
}
.invalid-tooltip {
    color: var(--color-white);
    background-color: rgba(232, 21, 0, 0.9);
}
.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: var(--color-danger);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23e81500' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23e81500' stroke='none'/%3e%3c/svg%3e");
}
.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 0.0625rem rgba(232, 21, 0, 0.25);
}
.was-validated .custom-select:invalid,
.custom-select.is-invalid {
    border-color: var(--color-danger);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23323f52' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")
            no-repeat right 1rem center/8px 10px,
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23e81500' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23e81500' stroke='none'/%3e%3c/svg%3e")
            var(--color-white) no-repeat center right 2rem /
            calc(0.75em + 0.5rem) calc(0.75em + 0.5rem);
}
.was-validated .custom-select:invalid:focus,
.custom-select.is-invalid:focus {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 0.0625rem rgba(232, 21, 0, 0.25);
}
.was-validated .form-check-input:invalid ~ .form-check-label,
.form-check-input.is-invalid ~ .form-check-label {
    color: var(--color-danger);
}
.was-validated .custom-control-input:invalid ~ .custom-control-label,
.custom-control-input.is-invalid ~ .custom-control-label {
    color: var(--color-danger);
}
.was-validated .custom-control-input:invalid ~ .custom-control-label::before,
.custom-control-input.is-invalid ~ .custom-control-label::before {
    border-color: var(--color-danger);
}
.was-validated
    .custom-control-input:invalid:checked
    ~ .custom-control-label::before,
.custom-control-input.is-invalid:checked ~ .custom-control-label::before {
    border-color: #ff311c;
    background-color: #ff311c;
}
.was-validated
    .custom-control-input:invalid:focus:not(:checked)
    ~ .custom-control-label::before,
.custom-control-input.is-invalid:focus:not(:checked)
    ~ .custom-control-label::before {
    border-color: var(--color-danger);
}
.was-validated .custom-file-input:invalid ~ .custom-file-label,
.custom-file-input.is-invalid ~ .custom-file-label {
    border-color: var(--color-danger);
}
.was-validated .custom-file-input:invalid:focus ~ .custom-file-label,
.custom-file-input.is-invalid:focus ~ .custom-file-label {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 0.0625rem rgba(232, 21, 0, 0.25);
}
.btn {
    color: var(--color-gray);
    background-color: var(--color-white);
    border: 1px solid var(--color-white);
}
.btn:hover {
    color: var(--color-gray);
}
.btn:focus,
.btn.focus {
    box-shadow: 0 0 0 0.2rem var(--color-primary);
}
.btn-primary {
    color: var(--color-white);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-primary:hover {
    color: var(--color-white);
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}
.btn-primary:focus,
.btn-primary.focus {
    color: var(--color-white);
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    box-shadow: 0 0 0 0.2rem var(--color-primary-dark);
}
.btn-primary.disabled,
.btn-primary:disabled {
    color: var(--color-white);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    color: var(--color-white);
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-primary-dark);
}

.btn-secondary {
    color: var(--color-white);
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}
.btn-secondary:hover {
    color: var(--color-white);
    background-color: var(--color-secondary-dark);
    border-color: var(--color-secondary-dark);
}
.btn-secondary:focus,
.btn-secondary.focus {
    color: var(--color-white);
    background-color: var(--color-secondary-dark);
    border-color: var(--color-secondary-dark);
    box-shadow: 0 0 0 0.2rem var(--color-secondary-dark);
}
.btn-secondary.disabled,
.btn-secondary:disabled {
    color: var(--color-white);
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
    color: var(--color-white);
    background-color: var(--color-secondary-dark);
    border-color: var(--color-secondary-dark);
}
.btn-secondary:not(:disabled):not(.disabled):active:focus,
.btn-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-secondary-dark);
}

.btn-success {
    color: var(--color-white);
    background-color: var(--color-success);
    border-color: var(--color-success);
}
.btn-success:hover {
    color: var(--color-white);
    background-color: var(--color-success-dark);
    border-color: var(--color-success-dark);
}
.btn-success:focus,
.btn-success.focus {
    color: var(--color-white);
    background-color: var(--color-success-dark);
    border-color: var(--color-success-dark);
    box-shadow: 0 0 0 0.2rem var(--color-successs-dark);
}
.btn-success.disabled,
.btn-success:disabled {
    color: var(--color-white);
    background-color: var(--color-success);
    border-color: var(--color-success);
}
.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle {
    color: var(--color-white);
    background-color: var(--color-success-dark);
    border-color: var(--color-success-dark);
}
.btn-success:not(:disabled):not(.disabled):active:focus,
.btn-success:not(:disabled):not(.disabled).active:focus,
.show > .btn-success.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-successs-dark);
}

.btn-info {
    color: var(--color-white);
    background-color: var(--color-info);
    border-color: var(--color-info);
}
.btn-info:hover {
    color: var(--color-white);
    background-color: var(--color-info-dark);
    border-color: var(--color-info-dark);
}
.btn-info:focus,
.btn-info.focus {
    color: var(--color-white);
    background-color: var(--color-info-dark);
    border-color: var(--color-info-dark);
    box-shadow: 0 0 0 0.2rem var(--color-info-dark);
}
.btn-info.disabled,
.btn-info:disabled {
    color: var(--color-white);
    background-color: var(--color-info);
    border-color: var(--color-info);
}
.btn-info:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled).active,
.show > .btn-info.dropdown-toggle {
    color: var(--color-white);
    background-color: var(--color-info-dark);
    border-color: var(--color-info-dark);
}
.btn-info:not(:disabled):not(.disabled):active:focus,
.btn-info:not(:disabled):not(.disabled).active:focus,
.show > .btn-info.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-info-dark);
}

.btn-warning {
    color: var(--color-white);
    background-color: var(--color-warning);
    border-color: var(--color-warning);
}
.btn-warning:hover {
    color: var(--color-white);
    background-color: var(--color-warning-dark);
    border-color: var(--color-warning-dark);
}
.btn-warning:focus,
.btn-warning.focus {
    color: var(--color-white);
    background-color: var(--color-warning-dark);
    border-color: var(--color-warning-dark);
    box-shadow: 0 0 0 0.2rem var(--color-warning-dark);
}
.btn-warning.disabled,
.btn-warning:disabled {
    color: var(--color-white);
    background-color: var(--color-warning);
    border-color: var(--color-warning);
}
.btn-warning:not(:disabled):not(.disabled):active,
.btn-warning:not(:disabled):not(.disabled).active,
.show > .btn-warning.dropdown-toggle {
    color: var(--color-white);
    background-color: var(--color-warning-dark);
    border-color: var(--color-warning-dark);
}
.btn-warning:not(:disabled):not(.disabled):active:focus,
.btn-warning:not(:disabled):not(.disabled).active:focus,
.show > .btn-warning.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-warning-dark);
}

.btn-danger {
    color: var(--color-white);
    background-color: var(--color-danger);
    border-color: var(--color-danger);
}
.btn-danger:hover {
    color: var(--color-white);
    background-color: var(--color-danger-dark);
    border-color: var(--color-danger-dark);
}
.btn-danger:focus,
.btn-danger.focus {
    color: var(--color-white);
    background-color: var(--color-danger-dark);
    border-color: var(--color-danger-dark);
    box-shadow: 0 0 0 0rem var(--color-danger-dark);
}
.btn-danger.disabled,
.btn-danger:disabled {
    color: var(--color-white);
    background-color: var(--color-danger);
    border-color: var(--color-danger);
}
.btn-danger:not(:disabled):not(.disabled):active,
.btn-danger:not(:disabled):not(.disabled).active,
.show > .btn-danger.dropdown-toggle {
    color: var(--color-white);
    background-color: var(--color-danger-dark);
    border-color: var(--color-danger-dark);
}
.btn-danger:not(:disabled):not(.disabled):active:focus,
.btn-danger:not(:disabled):not(.disabled).active:focus,
.show > .btn-danger.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-danger-dark);
}

.btn-light {
    color: var(--color-dark);
    background-color: var(--color-light);
    border-color: var(--color-light);
}
.btn-light:hover {
    color: var(--color-dark);
    background-color: var(--color-light-dark);
    border-color: var(--color-light-dark);
}
.btn-light:focus,
.btn-light.focus {
    color: var(--color-dark);
    background-color: var(--color-light-dark);
    border-color: var(--color-light-dark);
    box-shadow: 0 0 0 0.2rem var(--color-light-dark);
}
.btn-light.disabled,
.btn-light:disabled {
    color: var(--color-dark);
    background-color: var(--color-light);
    border-color: var(--color-light);
}
.btn-light:not(:disabled):not(.disabled):active,
.btn-light:not(:disabled):not(.disabled).active,
.show > .btn-light.dropdown-toggle {
    color: var(--color-dark);
    background-color: var(--color-light-dark);
    border-color: var(--color-light-dark);
}
.btn-light:not(:disabled):not(.disabled):active:focus,
.btn-light:not(:disabled):not(.disabled).active:focus,
.show > .btn-light.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-light-dark);
}

.btn-dark {
    color: var(--color-white);
    background-color: var(--color-dark);
    border-color: var(--color-dark);
}
.btn-dark:hover {
    color: var(--color-white);
    background-color: var(--color-dark-dark);
    border-color: var(--color-dark-dark);
}
.btn-dark:focus,
.btn-dark.focus {
    color: var(--color-white);
    background-color: var(--color-dark-dark);
    border-color: var(--color-dark-dark);
    box-shadow: 0 0 0 0.2rem var(--color-dark-dark);
}
.btn-dark.disabled,
.btn-dark:disabled {
    color: var(--color-white);
    background-color: var(--color-dark);
    border-color: var(--color-dark);
}
.btn-dark:not(:disabled):not(.disabled):active,
.btn-dark:not(:disabled):not(.disabled).active,
.show > .btn-dark.dropdown-toggle {
    color: var(--color-white);
    background-color: var(--color-dark-dark);
    border-color: var(--color-dark-dark);
}
.btn-dark:not(:disabled):not(.disabled):active:focus,
.btn-dark:not(:disabled):not(.disabled).active:focus,
.show > .btn-dark.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-dark-dark);
}

.btn-black {
    color: var(--color-white);
    background-color: var(--color-black);
    border-color: var(--color-black);
}
.btn-black:hover {
    color: var(--color-white);
    background-color: var(--color-black-dark);
    border-color: var(--color-black-dark);
}
.btn-black:focus,
.btn-black.focus {
    color: var(--color-white);
    background-color: var(--color-black-dark);
    border-color: var(--color-black-dark);
    box-shadow: 0 0 0 0.2rem var(--color-black-dark);
}
.btn-black.disabled,
.btn-black:disabled {
    color: var(--color-white);
    background-color: var(--color-black);
    border-color: var(--color-black);
}
.btn-black:not(:disabled):not(.disabled):active,
.btn-black:not(:disabled):not(.disabled).active,
.show > .btn-black.dropdown-toggle {
    color: var(--color-white);
    background-color: var(--color-black);
    border-color: var(--color-black);
}
.btn-black:not(:disabled):not(.disabled):active:focus,
.btn-black:not(:disabled):not(.disabled).active:focus,
.show > .btn-black.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-black-dark);
}

.btn-white {
    color: var(--color-dark);
    background-color: var(--color-white);
    border-color: var(--color-white);
}
.btn-white:hover {
    color: var(--color-dark);
    background-color: var(--color-white-dark);
    border-color: var(--color-white-dark);
}
.btn-white:focus,
.btn-white.focus {
    color: var(--color-dark);
    background-color: var(--color-white-dark);
    border-color: var(--color-white-dark);
    box-shadow: 0 0 0 0.2rem var(--color-black-dark);
}
.btn-white.disabled,
.btn-white:disabled {
    color: var(--color-dark);
    background-color: var(--color-white);
    border-color: var(--color-white);
}
.btn-white:not(:disabled):not(.disabled):active,
.btn-white:not(:disabled):not(.disabled).active,
.show > .btn-white.dropdown-toggle {
    color: var(--color-dark);
    background-color: var(--color-white-dark);
    border-color: var(--color-white-dark);
}
.btn-white:not(:disabled):not(.disabled):active:focus,
.btn-white:not(:disabled):not(.disabled).active:focus,
.show > .btn-white.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-black-dark);
}

.btn-red {
    color: var(--color-white);
    background-color: var(--color-red);
    border-color: var(--color-red);
}
.btn-red:hover {
    color: var(--color-white);
    background-color: var(--color-red-dark);
    border-color: var(--color-red-dark);
}
.btn-red:focus,
.btn-red.focus {
    color: var(--color-white);
    background-color: var(--color-red-dark);
    border-color: var(--color-red-dark);
    box-shadow: 0 0 0 0.2rem var(--color-red-dark);
}
.btn-red.disabled,
.btn-red:disabled {
    color: var(--color-white);
    background-color: var(--color-red);
    border-color: var(--color-red);
}
.btn-red:not(:disabled):not(.disabled):active,
.btn-red:not(:disabled):not(.disabled).active,
.show > .btn-red.dropdown-toggle {
    color: var(--color-white);
    background-color: var(--color-red-dark);
    border-color: var(--color-red-dark);
}
.btn-red:not(:disabled):not(.disabled):active:focus,
.btn-red:not(:disabled):not(.disabled).active:focus,
.show > .btn-red.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-red-dark);
}

.btn-orange {
    color: var(--color-white);
    background-color: var(--color-orange);
    border-color: var(--color-orange);
}
.btn-orange:hover {
    color: var(--color-white);
    background-color: var(--color-orange-dark);
    border-color: var(--color-orange-dark);
}
.btn-orange:focus,
.btn-orange.focus {
    color: var(--color-white);
    background-color: var(--color-orange-dark);
    border-color: var(--color-orange-dark);
    box-shadow: 0 0 0 0.2rem var(--color-orange-dark);
}
.btn-orange.disabled,
.btn-orange:disabled {
    color: var(--color-white);
    background-color: var(--color-orange);
    border-color: var(--color-orange);
}
.btn-orange:not(:disabled):not(.disabled):active,
.btn-orange:not(:disabled):not(.disabled).active,
.show > .btn-orange.dropdown-toggle {
    color: var(--color-white);
    background-color: var(--color-orange-dark);
    border-color: var(--color-orange-dark);
}
.btn-orange:not(:disabled):not(.disabled):active:focus,
.btn-orange:not(:disabled):not(.disabled).active:focus,
.show > .btn-orange.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-orange-dark);
}

.btn-yellow {
    color: var(--color-white);
    background-color: var(--color-yellow);
    border-color: var(--color-yellow);
}
.btn-yellow:hover {
    color: var(--color-white);
    background-color: var(--color-yellow-dark);
    border-color: var(--color-yellow-dark);
}
.btn-yellow:focus,
.btn-yellow.focus {
    color: var(--color-white);
    background-color: var(--color-yellow-dark);
    border-color: var(--color-yellow-dark);
    box-shadow: 0 0 0 0.2rem var(--color-yellow-dark);
}
.btn-yellow.disabled,
.btn-yellow:disabled {
    color: var(--color-white);
    background-color: var(--color-yellow);
    border-color: var(--color-yellow);
}
.btn-yellow:not(:disabled):not(.disabled):active,
.btn-yellow:not(:disabled):not(.disabled).active,
.show > .btn-yellow.dropdown-toggle {
    color: var(--color-white);
    background-color: var(--color-yellow-dark);
    border-color: var(--color-yellow-dark);
}
.btn-yellow:not(:disabled):not(.disabled):active:focus,
.btn-yellow:not(:disabled):not(.disabled).active:focus,
.show > .btn-yellow.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-yellow-dark);
}

.btn-green {
    color: var(--color-white);
    background-color: var(--color-green);
    border-color: var(--color-green);
}
.btn-green:hover {
    color: var(--color-white);
    background-color: var(--color-green-dark);
    border-color: var(--color-green-dark);
}
.btn-green:focus,
.btn-green.focus {
    color: var(--color-white);
    background-color: var(--color-green-dark);
    border-color: var(--color-green-dark);
    box-shadow: 0 0 0 0.2rem var(--color-green-dark);
}
.btn-green.disabled,
.btn-green:disabled {
    color: var(--color-white);
    background-color: var(--color-green);
    border-color: var(--color-green);
}
.btn-green:not(:disabled):not(.disabled):active,
.btn-green:not(:disabled):not(.disabled).active,
.show > .btn-green.dropdown-toggle {
    color: var(--color-white);
    background-color: var(--color-green-dark);
    border-color: var(--color-green-dark);
}
.btn-green:not(:disabled):not(.disabled):active:focus,
.btn-green:not(:disabled):not(.disabled).active:focus,
.show > .btn-green.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-green-dark);
}

.btn-teal {
    color: var(--color-white);
    background-color: var(--color-teal);
    border-color: var(--color-teal);
}
.btn-teal:hover {
    color: var(--color-white);
    background-color: var(--color-teal-dark);
    border-color: var(--color-teal-dark);
}
.btn-teal:focus,
.btn-teal.focus {
    color: var(--color-white);
    background-color: var(--color-teal-dark);
    border-color: var(--color-teal-dark);
    box-shadow: 0 0 0 0.2rem var(--color-teal-dark);
}
.btn-teal.disabled,
.btn-teal:disabled {
    color: var(--color-white);
    background-color: var(--color-teal);
    border-color: var(--color-teal);
}
.btn-teal:not(:disabled):not(.disabled):active,
.btn-teal:not(:disabled):not(.disabled).active,
.show > .btn-teal.dropdown-toggle {
    color: var(--color-white);
    background-color: var(--color-teal-dark);
    border-color: var(--color-teal-dark);
}
.btn-teal:not(:disabled):not(.disabled):active:focus,
.btn-teal:not(:disabled):not(.disabled).active:focus,
.show > .btn-teal.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-teal-dark);
}

.btn-cyan {
    color: var(--color-white);
    background-color: var(--color-cyan);
    border-color: var(--color-cyan);
}
.btn-cyan:hover {
    color: var(--color-white);
    background-color: var(--color-cyan-dark);
    border-color: var(--color-cyan-dark);
}
.btn-cyan:focus,
.btn-cyan.focus {
    color: var(--color-white);
    background-color: var(--color-cyan-dark);
    border-color: var(--color-cyan-dark);
    box-shadow: 0 0 0 0.2rem var(--color-cyan-dark);
}
.btn-cyan.disabled,
.btn-cyan:disabled {
    color: var(--color-white);
    background-color: var(--color-cyan);
    border-color: var(--color-cyan);
}
.btn-cyan:not(:disabled):not(.disabled):active,
.btn-cyan:not(:disabled):not(.disabled).active,
.show > .btn-cyan.dropdown-toggle {
    color: var(--color-white);
    background-color: var(--color-cyan-dark);
    border-color: var(--color-cyan-dark);
}
.btn-cyan:not(:disabled):not(.disabled):active:focus,
.btn-cyan:not(:disabled):not(.disabled).active:focus,
.show > .btn-cyan.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-cyan-dark);
}

.btn-blue {
    color: var(--color-white);
    background-color: var(--color-blue);
    border-color: var(--color-blue);
}
.btn-blue:hover {
    color: var(--color-white);
    background-color: var(--color-blue-dark);
    border-color: var(--color-blue-dark);
}
.btn-blue:focus,
.btn-blue.focus {
    color: var(--color-white);
    background-color: var(--color-blue-dark);
    border-color: var(--color-blue-dark);
    box-shadow: 0 0 0 0.2rem var(--color-blue-dark);
}
.btn-blue.disabled,
.btn-blue:disabled {
    color: var(--color-white);
    background-color: var(--color-blue);
    border-color: var(--color-blue);
}
.btn-blue:not(:disabled):not(.disabled):active,
.btn-blue:not(:disabled):not(.disabled).active,
.show > .btn-blue.dropdown-toggle {
    color: var(--color-white);
    background-color: var(--color-blue-dark);
    border-color: var(--color-blue-dark);
}
.btn-blue:not(:disabled):not(.disabled):active:focus,
.btn-blue:not(:disabled):not(.disabled).active:focus,
.show > .btn-blue.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-blue-dark);
}

.btn-indigo {
    color: var(--color-white);
    background-color: var(--color-indigo);
    border-color: var(--color-indigo);
}
.btn-indigo:hover {
    color: var(--color-white);
    background-color: var(--color-indigo-dark);
    border-color: var(--color-indigo-dark);
}
.btn-indigo:focus,
.btn-indigo.focus {
    color: var(--color-white);
    background-color: var(--color-indigo-dark);
    border-color: var(--color-indigo-dark);
    box-shadow: 0 0 0 0.2rem var(--color-indigo-dark);
}
.btn-indigo.disabled,
.btn-indigo:disabled {
    color: var(--color-white);
    background-color: var(--color-indigo);
    border-color: var(--color-indigo);
}
.btn-indigo:not(:disabled):not(.disabled):active,
.btn-indigo:not(:disabled):not(.disabled).active,
.show > .btn-indigo.dropdown-toggle {
    color: var(--color-white);
    background-color: var(--color-indigo-dark);
    border-color: var(--color-indigo-dark);
}
.btn-indigo:not(:disabled):not(.disabled):active:focus,
.btn-indigo:not(:disabled):not(.disabled).active:focus,
.show > .btn-indigo.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-indigo-dark);
}

.btn-purple {
    color: var(--color-white);
    background-color: var(--color-purple);
    border-color: var(--color-purple);
}
.btn-purple:hover {
    color: var(--color-white);
    background-color: var(--color-purple-dark);
    border-color: var(--color-purple-dark);
}
.btn-purple:focus,
.btn-purple.focus {
    color: var(--color-white);
    background-color: var(--color-purple-dark);
    border-color: var(--color-purple-dark);
    box-shadow: 0 0 0 0.2rem var(--color-purple-dark);
}
.btn-purple.disabled,
.btn-purple:disabled {
    color: var(--color-white);
    background-color: var(--color-purple);
    border-color: var(--color-purple);
}
.btn-purple:not(:disabled):not(.disabled):active,
.btn-purple:not(:disabled):not(.disabled).active,
.show > .btn-purple.dropdown-toggle {
    color: var(--color-white);
    background-color: var(--color-purple-dark);
    border-color: var(--color-purple-dark);
}
.btn-purple:not(:disabled):not(.disabled):active:focus,
.btn-purple:not(:disabled):not(.disabled).active:focus,
.show > .btn-purple.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-purple-dark);
}

.btn-pink {
    color: var(--color-white);
    background-color: var(--color-pink);
    border-color: var(--color-pink);
}
.btn-pink:hover {
    color: var(--color-white);
    background-color: var(--color-pink-dark);
    border-color: var(--color-pink-dark);
}
.btn-pink:focus,
.btn-pink.focus {
    color: var(--color-white);
    background-color: var(--color-pink-dark);
    border-color: var(--color-pink-dark);
    box-shadow: 0 0 0 0.2rem var(--color-pink-dark);
}
.btn-pink.disabled,
.btn-pink:disabled {
    color: var(--color-white);
    background-color: var(--color-pink);
    border-color: var(--color-pink);
}
.btn-pink:not(:disabled):not(.disabled):active,
.btn-pink:not(:disabled):not(.disabled).active,
.show > .btn-pink.dropdown-toggle {
    color: var(--color-white);
    background-color: var(--color-pink-dark);
    border-color: var(--color-pink-dark);
}
.btn-pink:not(:disabled):not(.disabled):active:focus,
.btn-pink:not(:disabled):not(.disabled).active:focus,
.show > .btn-pink.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-pink-dark);
}

.btn-gray {
    color: var(--color-white);
    background-color: var(--color-gray);
    border-color: var(--color-gray);
}
.btn-gray:hover {
    color: var(--color-white);
    background-color: var(--color-gray-dark);
    border-color: var(--color-gray-dark);
}
.btn-gray:focus,
.btn-gray.focus {
    color: var(--color-white);
    background-color: var(--color-gray-dark);
    border-color: var(--color-gray-dark);
    box-shadow: 0 0 0 0.2rem var(--color-gray-dark);
}
.btn-gray.disabled,
.btn-gray:disabled {
    color: var(--color-white);
    background-color: var(--color-gray);
    border-color: var(--color-gray);
}
.btn-gray:not(:disabled):not(.disabled):active,
.btn-gray:not(:disabled):not(.disabled).active,
.show > .btn-gray.dropdown-toggle {
    color: var(--color-white);
    background-color: var(--color-gray-dark);
    border-color: var(--color-gray-dark);
}
.btn-gray:not(:disabled):not(.disabled):active:focus,
.btn-gray:not(:disabled):not(.disabled).active:focus,
.show > .btn-gray.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-gray-dark);
}

.btn-graydark {
    color: var(--color-white);
    background-color: var(--color-graydark);
    border-color: var(--color-graydark);
}
.btn-graydark:hover {
    color: var(--color-white);
    background-color: var(--color-graydark-dark);
    border-color: var(--color-graydark-dark);
}
.btn-graydark:focus,
.btn-graydark.focus {
    color: var(--color-white);
    background-color: var(--color-graydark-dark);
    border-color: var(--color-graydark-dark);
    box-shadow: 0 0 0 0.2rem var(--color-graydark-dark);
}
.btn-graydark.disabled,
.btn-graydark:disabled {
    color: var(--color-white);
    background-color: var(--color-graydark);
    border-color: var(--color-graydark);
}
.btn-graydark:not(:disabled):not(.disabled):active,
.btn-graydark:not(:disabled):not(.disabled).active,
.show > .btn-graydark.dropdown-toggle {
    color: var(--color-white);
    background-color: var(--color-graydark-dark);
    border-color: var(--color-graydark-dark);
}
.btn-graydark:not(:disabled):not(.disabled):active:focus,
.btn-graydark:not(:disabled):not(.disabled).active:focus,
.show > .btn-graydark.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-graydark-dark);
}

.btn-outline-primary {
    color: var(--color-secondary);
    border-color: var(--color-secondary);
}
.btn-outline-primary:hover {
    color: var(--color-white);
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}
.btn-outline-primary:focus,
.btn-outline-primary.focus {
    box-shadow: 0 0 0 0.2rem var(--color-primary);
}
.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
    color: var(--color-secondary);
    background-color: var(--color-white);
}
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
    color: var(--color-white);
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-primary);
}

.btn-outline-secondary {
    color: var(--color-secondary);
    border-color: var(--color-secondary);
}
.btn-outline-secondary:hover {
    color: var(--color-white);
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}
.btn-outline-secondary:focus,
.btn-outline-secondary.focus {
    box-shadow: 0 0 0 0.2rem var(--color-secondary);
}
.btn-outline-secondary.disabled,
.btn-outline-secondary:disabled {
    color: var(--color-secondary);
    background-color: var(--color-white);
}
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active,
.show > .btn-outline-secondary.dropdown-toggle {
    color: var(--color-white);
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}
.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,
.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-secondary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-secondary);
}

.btn-outline-success {
    color: var(--color-success);
    border-color: var(--color-success);
}
.btn-outline-success:hover {
    color: var(--color-white);
    background-color: var(--color-success);
    border-color: var(--color-success);
}
.btn-outline-success:focus,
.btn-outline-success.focus {
    box-shadow: 0 0 0 0.2rem var(--color-success);
}
.btn-outline-success.disabled,
.btn-outline-success:disabled {
    color: var(--color-success);
    background-color: var(--color-white);
}
.btn-outline-success:not(:disabled):not(.disabled):active,
.btn-outline-success:not(:disabled):not(.disabled).active,
.show > .btn-outline-success.dropdown-toggle {
    color: var(--color-white);
    background-color: var(--color-success);
    border-color: var(--color-success);
}
.btn-outline-success:not(:disabled):not(.disabled):active:focus,
.btn-outline-success:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-success.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-success);
}

.btn-outline-info {
    color: var(--color-info);
    border-color: var(--color-info);
}
.btn-outline-info:hover {
    color: var(--color-white);
    background-color: var(--color-info);
    border-color: var(--color-info);
}
.btn-outline-info:focus,
.btn-outline-info.focus {
    box-shadow: 0 0 0 0.2rem var(--color-info);
}
.btn-outline-info.disabled,
.btn-outline-info:disabled {
    color: var(--color-info);
    background-color: var(--color-white);
}
.btn-outline-info:not(:disabled):not(.disabled):active,
.btn-outline-info:not(:disabled):not(.disabled).active,
.show > .btn-outline-info.dropdown-toggle {
    color: var(--color-white);
    background-color: var(--color-info);
    border-color: var(--color-info);
}
.btn-outline-info:not(:disabled):not(.disabled):active:focus,
.btn-outline-info:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-info.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-info);
}

.btn-outline-warning {
    color: var(--color-warning);
    border-color: var(--color-warning);
}
.btn-outline-warning:hover {
    color: var(--color-white);
    background-color: var(--color-warning);
    border-color: var(--color-warning);
}
.btn-outline-warning:focus,
.btn-outline-warning.focus {
    box-shadow: 0 0 0 0.2rem var(--color-warning);
}
.btn-outline-warning.disabled,
.btn-outline-warning:disabled {
    color: var(--color-warning);
    background-color: var(--color-white);
}
.btn-outline-warning:not(:disabled):not(.disabled):active,
.btn-outline-warning:not(:disabled):not(.disabled).active,
.show > .btn-outline-warning.dropdown-toggle {
    color: var(--color-white);
    background-color: var(--color-warning);
    border-color: var(--color-warning);
}
.btn-outline-warning:not(:disabled):not(.disabled):active:focus,
.btn-outline-warning:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-warning.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-warning);
}

.btn-outline-danger {
    color: var(--color-danger);
    border-color: var(--color-danger);
}
.btn-outline-danger:hover {
    color: var(--color-white);
    background-color: var(--color-danger);
    border-color: var(--color-danger);
}
.btn-outline-danger:focus,
.btn-outline-danger.focus {
    box-shadow: 0 0 0 0.2rem var(--color-danger);
}
.btn-outline-danger.disabled,
.btn-outline-danger:disabled {
    color: var(--color-danger);
    background-color: var(--color-white);
}
.btn-outline-danger:not(:disabled):not(.disabled):active,
.btn-outline-danger:not(:disabled):not(.disabled).active,
.show > .btn-outline-danger.dropdown-toggle {
    color: var(--color-white);
    background-color: var(--color-danger);
    border-color: var(--color-danger);
}
.btn-outline-danger:not(:disabled):not(.disabled):active:focus,
.btn-outline-danger:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-danger.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-danger);
}

.btn-outline-light {
    color: var(--color-light);
    border-color: var(--color-light);
}
.btn-outline-light:hover {
    color: var(--color-dark);
    background-color: var(--color-light);
    border-color: var(--color-light);
}
.btn-outline-light:focus,
.btn-outline-light.focus {
    box-shadow: 0 0 0 0.2rem var(--color-light);
}
.btn-outline-light.disabled,
.btn-outline-light:disabled {
    color: var(--color-light);
    background-color: var(--color-white);
}
.btn-outline-light:not(:disabled):not(.disabled):active,
.btn-outline-light:not(:disabled):not(.disabled).active,
.show > .btn-outline-light.dropdown-toggle {
    color: var(--color-dark);
    background-color: var(--color-light);
    border-color: var(--color-light);
}
.btn-outline-light:not(:disabled):not(.disabled):active:focus,
.btn-outline-light:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-light.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-light);
}

.btn-outline-dark {
    color: var(--color-dark);
    border-color: var(--color-dark);
}
.btn-outline-dark:hover {
    color: var(--color-white);
    background-color: var(--color-dark);
    border-color: var(--color-dark);
}
.btn-outline-dark:focus,
.btn-outline-dark.focus {
    box-shadow: 0 0 0 0.2rem var(--color-dark);
}
.btn-outline-dark.disabled,
.btn-outline-dark:disabled {
    color: var(--color-dark);
    background-color: var(--color-white);
}
.btn-outline-dark:not(:disabled):not(.disabled):active,
.btn-outline-dark:not(:disabled):not(.disabled).active,
.show > .btn-outline-dark.dropdown-toggle {
    color: var(--color-white);
    background-color: var(--color-dark);
    border-color: var(--color-dark);
}
.btn-outline-dark:not(:disabled):not(.disabled):active:focus,
.btn-outline-dark:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-dark.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-dark);
}

.btn-outline-black {
    color: var(--color-black);
    border-color: var(--color-black);
}
.btn-outline-black:hover {
    color: var(--color-white);
    background-color: var(--color-black);
    border-color: var(--color-black);
}
.btn-outline-black:focus,
.btn-outline-black.focus {
    box-shadow: 0 0 0 0.2rem var(--color-black);
}
.btn-outline-black.disabled,
.btn-outline-black:disabled {
    color: var(--color-black);
    background-color: var(--color-white);
}
.btn-outline-black:not(:disabled):not(.disabled):active,
.btn-outline-black:not(:disabled):not(.disabled).active,
.show > .btn-outline-black.dropdown-toggle {
    color: var(--color-white);
    background-color: var(--color-black);
    border-color: var(--color-black);
}
.btn-outline-black:not(:disabled):not(.disabled):active:focus,
.btn-outline-black:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-black.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-black);
}

.btn-outline-white {
    color: var(--color-white);
    border-color: var(--color-white);
}
.btn-outline-white:hover {
    color: var(--color-dark);
    background-color: var(--color-white);
    border-color: var(--color-white);
}
.btn-outline-white:focus,
.btn-outline-white.focus {
    box-shadow: 0 0 0 0.2rem var(--color-white);
}
.btn-outline-white.disabled,
.btn-outline-white:disabled {
    color: var(--color-white);
    background-color: var(--color-white);
}
.btn-outline-white:not(:disabled):not(.disabled):active,
.btn-outline-white:not(:disabled):not(.disabled).active,
.show > .btn-outline-white.dropdown-toggle {
    color: var(--color-dark);
    background-color: var(--color-white);
    border-color: var(--color-white);
}
.btn-outline-white:not(:disabled):not(.disabled):active:focus,
.btn-outline-white:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-white.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-white);
}

.btn-outline-red {
    color: var(--color-danger);
    border-color: var(--color-danger);
}
.btn-outline-red:hover {
    color: var(--color-white);
    background-color: var(--color-danger);
    border-color: var(--color-danger);
}
.btn-outline-red:focus,
.btn-outline-red.focus {
    box-shadow: 0 0 0 0.2rem var(--color-danger);
}
.btn-outline-red.disabled,
.btn-outline-red:disabled {
    color: var(--color-danger);
    background-color: var(--color-white);
}
.btn-outline-red:not(:disabled):not(.disabled):active,
.btn-outline-red:not(:disabled):not(.disabled).active,
.show > .btn-outline-red.dropdown-toggle {
    color: var(--color-white);
    background-color: var(--color-danger);
    border-color: var(--color-danger);
}
.btn-outline-red:not(:disabled):not(.disabled):active:focus,
.btn-outline-red:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-red.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-danger);
}

.btn-link {
    color: var(--color-secondary);
}
.btn-link:hover {
    color: var(--color-secondary-dark);
}
.btn-link:disabled,
.btn-link.disabled {
    color: var(--color-gray);
}
.dropdown-menu {
    color: var(--color-gray);
    background-color: var(--color-white);
    border: 1px solid var(--color-light);
}

.dropdown-divider {
    height: 0;
    margin: 0.5rem 0;
    overflow: hidden;
    border-top: 1px solid var(--color-light);
}

.dropdown-item {
    color: var(--color-dark);
}
.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--color-dark);
    background-color: var(--color-light);
}
.dropdown-item.active,
.dropdown-item:active {
    color: var(--color-white);
    background-color: var(--color-secondary);
}
.dropdown-item.disabled,
.dropdown-item:disabled {
    color: var(--color-gray);
    background-color: var(--color-white);
}
.dropdown-header {
    color: var(--color-gray);
}
.input-group-text {
    color: var(--color-gray);
    background-color: var(--color-white);
    border: 1px solid var(--color-light-dark);
}
.custom-control-input:checked ~ .custom-control-label::before {
    color: var(--color-white);
    border-color: var(--color-secondary);
    background-color: var(--color-secondary);
}
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.0625rem var(--color-secondary);
}
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: var(--color-secondary);
}
.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
    color: var(--color-white);
    background-color: #a6c9ff;
    border-color: #a6c9ff;
}
.custom-control-input[disabled] ~ .custom-control-label,
.custom-control-input:disabled ~ .custom-control-label {
    color: var(--color-gray);
}
.custom-control-input[disabled] ~ .custom-control-label::before,
.custom-control-input:disabled ~ .custom-control-label::before {
    background-color: var(--color-light);
}
.custom-control-label::before {
    content: "";
    background-color: var(--color-white);
    border: var(--color-light-dark) solid 1px;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
}
.custom-checkbox
    .custom-control-input:indeterminate
    ~ .custom-control-label::before {
    border-color: var(--color-secondary);
    background-color: var(--color-secondary);
}
.custom-checkbox
    .custom-control-input:indeterminate
    ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e");
}
.custom-checkbox
    .custom-control-input:disabled:checked
    ~ .custom-control-label::before {
    background-color: var(--color-primary);
}
.custom-checkbox
    .custom-control-input:disabled:indeterminate
    ~ .custom-control-label::before {
    background-color: var(--color-primary);
}
.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.custom-radio
    .custom-control-input:disabled:checked
    ~ .custom-control-label::before {
    background-color: var(--color-primary);
}
.custom-switch .custom-control-label::after {
    background-color: var(--color-light-dark);
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: var(--color-white);
}
.custom-switch
    .custom-control-input:disabled:checked
    ~ .custom-control-label::before {
    background-color: var(--color-primary);
}
.custom-select {
    color: var(--color-gray);
    background: var(--color-white)
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23323f52' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")
        no-repeat right 1rem center/8px 10px;
    border: 1px solid var(--color-light-dark);
}
.custom-select:focus {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 0.0625rem var(--color-primary);
}
.custom-select:focus::-ms-value {
    color: var(--color-gray);
    background-color: var(--color-white);
}
.custom-select[multiple],
.custom-select[size]:not([size="1"]) {
    background-image: none;
}
.custom-select:disabled {
    color: var(--color-gray);
    background-color: var(--color-light);
}
.custom-select:-moz-focusring {
    color: var(--color-white);
    text-shadow: 0 0 0var (--color-muted);
}
.custom-file-input:focus ~ .custom-file-label {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 0.0625rem var(--color-secondary);
}
.custom-file-input[disabled] ~ .custom-file-label,
.custom-file-input:disabled ~ .custom-file-label {
    background-color: var(--color-light);
}
.custom-file-label {
    color: var(--color-gray);
    background-color: var(--color-white);
    border: 1px solid var(--color-light-dark);
}
.custom-file-label::after {
    color: var(--color-gray);
    background-color: var(--color-white);
}
.custom-range {
    background-color: var(--color-white);
}
.custom-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px var(--color-light),
        0 0 0 0.0625rem var(--color-secondary);
}
.custom-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px var(--color-light),
        0 0 0 0.0625rem var(--color-secondary);
}
.custom-range:focus::-ms-thumb {
    box-shadow: 0 0 0 1px var(--color-light),
        0 0 0 0.0625rem var(--color-secondary);
}
.custom-range::-webkit-slider-thumb {
    background-color: var(--color-secondary);
}
.custom-range::-webkit-slider-thumb:active {
    background-color: #a6c9ff;
}
.custom-range::-webkit-slider-runnable-track {
    color: var(--color-white);
    background-color: var(--color-light-dark);
    border-color: var(--color-white);
}
.custom-range::-moz-range-thumb {
    background-color: var(--color-secondary);
}
.custom-range::-moz-range-thumb:active {
    background-color: #a6c9ff;
}
.custom-range::-moz-range-track {
    color: var(--color-white);
    background-color: var(--color-light-dark);
    border-color: var(--color-white);
}
.custom-range::-ms-thumb {
    background-color: var(--color-secondary);
}
.custom-range::-ms-thumb:active {
    background-color: #a6c9ff;
}
.custom-range::-ms-track {
    color: var(--color-white);
    background-color: var(--color-white);
    border-color: var(--color-white);
}
.custom-range::-ms-fill-lower {
    background-color: var(--color-light-dark);
}
.custom-range::-ms-fill-upper {
    background-color: var(--color-light-dark);
}
.custom-range:disabled::-webkit-slider-thumb {
    background-color: var(--color-light-dark);
}
.custom-range:disabled::-webkit-slider-runnable-track {
    cursor: default;
}
.custom-range:disabled::-moz-range-thumb {
    background-color: var(--color-light-dark);
}
.custom-range:disabled::-moz-range-track {
    cursor: default;
}
.custom-range:disabled::-ms-thumb {
    background-color: var(--color-light-dark);
}
.nav-link.disabled {
    color: var(--color-gray);
}
.nav-tabs {
    border-bottom: 1px solid var(--color-light-dark);
}
.nav-tabs .nav-link {
    border: 1px solid var(--color-white);
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    border-color: var(--color-light) var(--color-light) var(--color-light-dark);
}
.nav-tabs .nav-link.disabled {
    color: var(--color-gray);
    background-color: var(--color-white);
    border-color: var(--color-white);
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--color-graydark);
    background-color: var(--color-light);
    border-color: var(--color-light-dark) var(--color-light-dark)
        var(--color-light);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: var(--color-white);
    background-color: var(--color-secondary);
}
.navbar-toggler {
    background-color: var(--color-white);
    border: 1px solid var(--color-white);
}
.navbar-light .navbar-brand {
    color: var(--color-black);
}
.navbar-light .navbar-brand:hover,
.navbar-light .navbar-brand:focus {
    color: var(--color-black);
}
.navbar-light .navbar-nav .nav-link {
    color: var(--color-black);
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
    color: var(--color-black);
}
.navbar-light .navbar-nav .nav-link.disabled {
    color: var(--color-black);
}
.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active {
    color: var(--color-black);
}
.navbar-light .navbar-toggler {
    color: var(--color-black);
    border-color: var(--color-black);
}
.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='var(--color-black)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-light .navbar-text {
    color: var(--color-black);
}
.navbar-light .navbar-text a {
    color: var(--color-black);
}
.navbar-light .navbar-text a:hover,
.navbar-light .navbar-text a:focus {
    color: var(--color-black);
}
.navbar-dark .navbar-brand {
    color: var(--color-white);
}
.navbar-dark .navbar-brand:hover,
.navbar-dark .navbar-brand:focus {
    color: var(--color-white);
}
.navbar-dark .navbar-nav .nav-link {
    color: var(--color-white);
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: var(--color-white);
}
.navbar-dark .navbar-nav .nav-link.disabled {
    color: var(--color-white);
}
.navbar-dark .navbar-nav .show > .nav-link,
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--color-white);
}
.navbar-dark .navbar-toggler {
    color: var(--color-white);
    border-color: var(--color-white);
}
.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='var(--color-white)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-dark .navbar-text {
    color: var(--color-white);
}
.navbar-dark .navbar-text a {
    color: var(--color-white);
}
.navbar-dark .navbar-text a:hover,
.navbar-dark .navbar-text a:focus {
    color: var(--color-white);
}

.card {
    background-color: var(--color-white);
    border: 1px solid var(--color-muted);
}
.card-header {
    background-color: var(--color-light);
    border-bottom: 1px solid var(--color-muted);
}
.card-footer {
    background-color: var(--color-dark);
    border-top: 1px solid var(--color-dark);
}
.breadcrumb {
    background-color: var(--color-light);
}
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--color-gray);
    content: "/";
}
.breadcrumb-item.active {
    color: var(--color-gray);
}

.page-link {
    color: var(--color-secondary);
    background-color: var(--color-white);
    border: 1px solid var(--color-light-dark);
}
.page-link:hover {
    color: var(--color-secondary-dark);
    background-color: var(--color-light);
    border-color: var(--color-light-dark);
}
.page-link:focus {
    box-shadow: 0 0 0 0.2rem var(--color-primary);
}
.page-item.active .page-link {
    color: var(--color-white);
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}
.page-item.disabled .page-link {
    color: var(--color-gray);
    background-color: var(--color-white);
    border-color: var(--color-light-dark);
}
.badge-primary {
    color: var(--color-white);
    background-color: var(--color-secondary);
}
a.badge-primary:hover,
a.badge-primary:focus {
    color: var(--color-white);
    background-color: var(--color-primary-dark);
}
a.badge-primary:focus,
a.badge-primary.focus {
    box-shadow: 0 0 0 0.2rem var(--color-primary);
}
.badge-secondary {
    color: var(--color-white);
    background-color: var(--color-secondary);
}
a.badge-secondary:hover,
a.badge-secondary:focus {
    color: var(--color-white);
    background-color: var(--color-secondary-dark);
}
a.badge-secondary:focus,
a.badge-secondary.focus {
    box-shadow: 0 0 0 0.2rem var(--color-secondary);
}

.badge-success {
    color: var(--color-white);
    background-color: var(--color-success);
}
a.badge-success:hover,
a.badge-success:focus {
    color: var(--color-white);
    background-color: var(--color-success-dark);
}
a.badge-success:focus,
a.badge-success.focus {
    box-shadow: 0 0 0 0.2rem var(--color-success);
}

.badge-info {
    color: var(--color-white);
    background-color: var(--color-info);
}
a.badge-info:hover,
a.badge-info:focus {
    color: var(--color-white);
    background-color: var(--color-info-dark);
}
a.badge-info:focus,
a.badge-info.focus {
    box-shadow: 0 0 0 0.2rem var(--color-info);
}

.badge-warning {
    color: var(--color-white);
    background-color: var(--color-warning);
}
a.badge-warning:hover,
a.badge-warning:focus {
    color: var(--color-white);
    background-color: var(--color-warning-dark);
}
a.badge-warning:focus,
a.badge-warning.focus {
    box-shadow: 0 0 0 0.2rem var(--color-warning);
}

.badge-danger {
    color: var(--color-white);
    background-color: var(--color-danger);
}
a.badge-danger:hover,
a.badge-danger:focus {
    color: var(--color-white);
    background-color: var(--color-danger-dark);
}
a.badge-danger:focus,
a.badge-danger.focus {
    box-shadow: 0 0 0 0.2rem var(--color-danger);
}

.badge-light {
    color: var(--color-dark);
    background-color: var(--color-light);
}
a.badge-light:hover,
a.badge-light:focus {
    color: var(--color-dark);
    background-color: var(--color-light-dark);
}
a.badge-light:focus,
a.badge-light.focus {
    box-shadow: 0 0 0 0.2rem var(--color-light);
}

.badge-dark {
    color: var(--color-white);
    background-color: var(--color-dark);
}
a.badge-dark:hover,
a.badge-dark:focus {
    color: var(--color-white);
    background-color: var(--color-dark-dark);
}
a.badge-dark:focus,
a.badge-dark.focus {
    box-shadow: 0 0 0 0.2rem var(--color-dark);
}

.badge-black {
    color: var(--color-white);
    background-color: var(--color-black);
}
a.badge-black:hover,
a.badge-black:focus {
    color: var(--color-white);
    background-color: var(--color-black);
}
a.badge-black:focus,
a.badge-black.focus {
    box-shadow: 0 0 0 0.2rem var(--color-black);
}

.badge-white {
    color: var(--color-dark);
    background-color: var(--color-white);
}
a.badge-white:hover,
a.badge-white:focus {
    color: var(--color-dark);
    background-color: var(--color-white-dark);
}
a.badge-white:focus,
a.badge-white.focus {
    box-shadow: 0 0 0 0.2rem var(--color-white);
}

.badge-red {
    color: var(--color-white);
    background-color: var(--color-danger);
}
a.badge-red:hover,
a.badge-red:focus {
    color: var(--color-white);
    background-color: var(--color-danger-dark);
}
a.badge-red:focus,
a.badge-red.focus {
    box-shadow: 0 0 0 0.2rem var(--color-danger);
}
.jumbotron {
    background-color: var(--color-light);
}
.alert {
    border: 1px solid var(--color-white);
}
.alert-primary {
    color: var(--color-primary);
    background-color: #ccdffc;
    border-color: #b8d3fb;
}
.alert-primary hr {
    border-top-color: #a0c4fa;
}
.alert-primary .alert-link {
    color: #001e4b;
}

.alert-secondary {
    color: var(--color-secondary);
    background-color: #e1ccf4;
    border-color: #d5b8ef;
}
.alert-secondary hr {
    border-top-color: #c9a3ea;
}
.alert-secondary .alert-link {
    color: #1c0034;
}

.alert-success {
    color: var(--color-success);
    background-color: #cceee1;
    border-color: #b8e8d5;
}
.alert-success hr {
    border-top-color: #a5e2ca;
}
.alert-success .alert-link {
    color: #002617;
}

.alert-info {
    color: var(--color-info);
    background-color: #ccf5f7;
    border-color: #b8f2f3;
}
.alert-info hr {
    border-top-color: #a2eeef;
}
.alert-info .alert-link {
    color: #003a3c;
}

.alert-warning {
    color: var(--color-warning);
    background-color: #fdeccc;
    border-color: #fce5b8;
}
.alert-warning hr {
    border-top-color: #fbdca0;
}
.alert-warning .alert-link {
    color: #4c3200;
}

.alert-danger {
    color: var(--color-danger);
    background-color: #fad0cc;
    border-color: #f9bdb8;
}
.alert-danger hr {
    border-top-color: #f7a7a0;
}
.alert-danger .alert-link {
    color: #460600;
}

.alert-light {
    color: #7c7e81;
    background-color: var(--color-light);
    border-color: var(--color-white-dark);
}
.alert-light hr {
    border-top-color: var(--color-light-dark);
}
.alert-light .alert-link {
    color: #636567;
}

.alert-dark {
    color: var(--color-dark);
    background-color: #d2d5d9;
    border-color: #c0c4ca;
}
.alert-dark hr {
    border-top-color: #b2b7be;
}

.alert-black {
    color: var(--color-black);
    background-color: #cccccc;
    border-color: var(--color-muted-light);
}
.alert-black hr {
    border-top-color: var(--color-muted);
}
.alert-black .alert-link {
    color: var(--color-black);
}

.alert-white {
    color: var(--color-muted-dark);
    background-color: var(--color-white);
    border-color: var(--color-white);
}
.alert-white hr {
    border-top-color: var(--color-white-dark);
}
.alert-white .alert-link {
    color: #6c6c6c;
}

.alert-red {
    color: var(--color-danger);
    background-color: #fad0cc;
    border-color: #f9bdb8;
}
.alert-red hr {
    border-top-color: #f7a7a0;
}
.alert-red .alert-link {
    color: #460600;
}
.progress {
    background-color: var(--color-light);
}
.progress-bar {
    color: var(--color-white);
    background-color: var(--color-secondary);
}
.progress-bar-striped {
    background-image: linear-gradient(
        45deg,
        var(--color-white) 25%,
        var(--color-white) 25%,
        var(--color-white) 50%,
        var(--color-white) 50%,
        var(--color-white) 75%,
        var(--color-white) 75%,
        var(--color-white)
    );
}
.list-group-item-action {
    color: var(--color-graydark);
}
.list-group-item-action:hover,
.list-group-item-action:focus {
    color: var(--color-graydark);
    background-color: var(--color-light);
}
.list-group-item-action:active {
    color: var(--color-gray);
    background-color: var(--color-light);
}
.list-group-item {
    background-color: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.125);
}
.list-group-item.disabled,
.list-group-item:disabled {
    color: var(--color-gray);
    background-color: var(--color-white);
}
.list-group-item.active {
    color: var(--color-white);
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}
.list-group-item-primary {
    color: var(--color-primary);
    background-color: #b8d3fb;
}
.list-group-item-primary.list-group-item-action:hover,
.list-group-item-primary.list-group-item-action:focus {
    color: var(--color-primary);
    background-color: #a0c4fa;
}
.list-group-item-primary.list-group-item-action.active {
    color: var(--color-white);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.list-group-item-secondary {
    color: var(--color-secondary);
    background-color: #d5b8ef;
}
.list-group-item-secondary.list-group-item-action:hover,
.list-group-item-secondary.list-group-item-action:focus {
    color: var(--color-secondary);
    background-color: #c9a3ea;
}
.list-group-item-secondary.list-group-item-action.active {
    color: var(--color-white);
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}

.list-group-item-success {
    color: var(--color-success);
    background-color: #b8e8d5;
}
.list-group-item-success.list-group-item-action:hover,
.list-group-item-success.list-group-item-action:focus {
    color: var(--color-success);
    background-color: #a5e2ca;
}
.list-group-item-success.list-group-item-action.active {
    color: var(--color-white);
    background-color: var(--color-success);
    border-color: var(--color-success);
}

.list-group-item-info {
    color: var(--color-info);
    background-color: #b8f2f3;
}
.list-group-item-info.list-group-item-action:hover,
.list-group-item-info.list-group-item-action:focus {
    color: var(--color-info);
    background-color: #a2eeef;
}
.list-group-item-info.list-group-item-action.active {
    color: var(--color-white);
    background-color: var(--color-info);
    border-color: var(--color-info);
}

.list-group-item-warning {
    color: var(--color-warning);
    background-color: #fce5b8;
}
.list-group-item-warning.list-group-item-action:hover,
.list-group-item-warning.list-group-item-action:focus {
    color: var(--color-warning);
    background-color: #fbdca0;
}
.list-group-item-warning.list-group-item-action.active {
    color: var(--color-white);
    background-color: var(--color-warning);
    border-color: var(--color-warning);
}

.list-group-item-danger {
    color: var(--color-danger);
    background-color: #f9bdb8;
}
.list-group-item-danger.list-group-item-action:hover,
.list-group-item-danger.list-group-item-action:focus {
    color: var(--color-danger);
    background-color: #f7a7a0;
}
.list-group-item-danger.list-group-item-action.active {
    color: var(--color-white);
    background-color: var(--color-danger);
    border-color: var(--color-danger);
}

.list-group-item-light {
    color: #7c7e81;
    background-color: var(--color-white-dark);
}
.list-group-item-light.list-group-item-action:hover,
.list-group-item-light.list-group-item-action:focus {
    color: #7c7e81;
    background-color: var(--color-light-dark);
}
.list-group-item-light.list-group-item-action.active {
    color: var(--color-white);
    background-color: #7c7e81;
    border-color: #7c7e81;
}

.list-group-item-dark {
    color: var(--color-dark);
    background-color: #c0c4ca;
}
.list-group-item-dark.list-group-item-action:hover,
.list-group-item-dark.list-group-item-action:focus {
    color: var(--color-dark);
    background-color: #b2b7be;
}
.list-group-item-dark.list-group-item-action.active {
    color: var(--color-white);
    background-color: var(--color-dark);
    border-color: var(--color-dark);
}

.list-group-item-black {
    color: var(--color-black);
    background-color: var(--color-muted-light);
}
.list-group-item-black.list-group-item-action:hover,
.list-group-item-black.list-group-item-action:focus {
    color: var(--color-black);
    background-color: var(--color-muted);
}
.list-group-item-black.list-group-item-action.active {
    color: var(--color-white);
    background-color: var(--color-black);
    border-color: var(--color-black);
}

.list-group-item-white {
    color: var(--color-muted-dark);
    background-color: var(--color-white);
}
.list-group-item-white.list-group-item-action:hover,
.list-group-item-white.list-group-item-action:focus {
    color: var(--color-muted-dark);
    background-color: var(--color-white-dark);
}
.list-group-item-white.list-group-item-action.active {
    color: var(--color-white);
    background-color: var(--color-muted-dark);
    border-color: var(--color-muted-dark);
}

.list-group-item-red {
    color: var(--color-danger);
    background-color: #f9bdb8;
}
.list-group-item-red.list-group-item-action:hover,
.list-group-item-red.list-group-item-action:focus {
    color: var(--color-danger);
    background-color: #f7a7a0;
}
.list-group-item-red.list-group-item-action.active {
    color: var(--color-white);
    background-color: var(--color-danger);
    border-color: var(--color-danger);
}
.close {
    color: var(--color-black);
}
.close:hover {
    color: var(--color-black);
}
button.close {
    background-color: var(--color-white);
}
.toast {
    background-color: var(--color-white);
    border: 1px solid var(--color-black);
    box-shadow: 0 0.25rem 0.75rem var(--color-black);
}
.toast-header {
    color: var(--color-gray);
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-black);
}
.modal-content {
    background-color: var(--color-white);
    border: 1px solid var(--color-black);
}
.modal-backdrop {
    background-color: var(--color-black);
}
.modal-header {
    border-bottom: 1px solid var(--color-light);
}
.modal-footer {
    border-top: 1px solid var(--color-light);
}
.tooltip {
    font-family: var(--font-family);
}
.tooltip .arrow::before {
    content: "";
    border-color: var(--color-white);
}
.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: var(--color-black);
}
.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[x-placement^="right"] .arrow::before {
    border-right-color: var(--color-black);
}
.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: var(--color-black);
}
.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[x-placement^="left"] .arrow::before {
    border-left-color: var(--color-black);
}
.tooltip-inner {
    color: var(--color-white);
    background-color: var(--color-black);
}
.popover {
    font-family: var(--font-family);

    background-color: var(--color-white);
    border: 1px solid var(--color-black);
}
.popover .arrow::before,
.popover .arrow::after {
    content: "";
    border-color: var(--color-white);
}
.bs-popover-top > .arrow::before,
.bs-popover-auto[x-placement^="top"] > .arrow::before {
    border-top-color: var(--color-black);
}
.bs-popover-top > .arrow::after,
.bs-popover-auto[x-placement^="top"] > .arrow::after {
    border-top-color: var(--color-white);
}
.bs-popover-right > .arrow::before,
.bs-popover-auto[x-placement^="right"] > .arrow::before {
    border-right-color: var(--color-black);
}
.bs-popover-right > .arrow::after,
.bs-popover-auto[x-placement^="right"] > .arrow::after {
    border-right-color: var(--color-white);
}
.bs-popover-bottom > .arrow::before,
.bs-popover-auto[x-placement^="bottom"] > .arrow::before {
    border-bottom-color: var(--color-black);
}
.bs-popover-bottom > .arrow::after,
.bs-popover-auto[x-placement^="bottom"] > .arrow::after {
    border-bottom-color: var(--color-white);
}
.bs-popover-bottom .popover-header::before,
.bs-popover-auto[x-placement^="bottom"] .popover-header::before {
    content: "";
    border-bottom: 1px solid var(--color-light);
}
.bs-popover-left > .arrow::before,
.bs-popover-auto[x-placement^="left"] > .arrow::before {
    border-left-color: var(--color-black);
}
.bs-popover-left > .arrow::after,
.bs-popover-auto[x-placement^="left"] > .arrow::after {
    border-left-color: var(--color-white);
}
.popover-header {
    color: var(--color-dark-light);
    background-color: var(--color-light);
    border-bottom: 1px solid var(--color-light);
}
.popover-body {
    color: var(--color-gray);
}
.carousel-control-prev,
.carousel-control-next {
    color: var(--color-white);
}
.carousel-control-prev:hover,
.carousel-control-prev:focus,
.carousel-control-next:hover,
.carousel-control-next:focus {
    color: var(--color-white);
}
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}
.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
}
.carousel-indicators li {
    background-color: var(--color-white);
    border-top: 10px solid var(--color-white);
    border-bottom: 10px solid var(--color-white);
}
.carousel-caption {
    color: var(--color-white);
}
.spinner-border {
    border: 0.25em solid currentColor;
    border-right-color: var(--color-white);
}
.spinner-grow {
    background-color: currentColor;
}
.bg-primary {
    background-color: var(--color-primary) !important;
}
.bg-primary-light {
    background-color: var(--color-primary-light) !important;
}
.bg-primary-dark {
    background-color: var(--color-primary-dark) !important;
}
a.bg-primary:hover,
a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
    background-color: var(--color-primary-dark) !important;
}
.bg-transparent {
    background-color: var(--color-transparent) !important;
}
.bg-transparent-light {
    background-color: var(--color-transparent) !important;
}
.bg-transparent-dark {
    background-color: var(--color-transparent) !important;
}
a.bg-transparent:hover,
a.bg-transparent:focus,
button.bg-transparent:hover,
button.bg-transparent:focus {
    background-color: var(--color-transparent) !important;
}
.bg-secondary {
    background-color: var(--color-secondary) !important;
}
.bg-secondary-light {
    background-color: var(--color-secondary-light) !important;
}
.bg-secondary-dark {
    background-color: var(--color-secondary-dark) !important;
}

a.bg-secondary:hover,
a.bg-secondary:focus,
button.bg-secondary:hover,
button.bg-secondary:focus {
    background-color: var(--color-secondary-dark) !important;
}

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

a.bg-success:hover,
a.bg-success:focus,
button.bg-success:hover,
button.bg-success:focus {
    background-color: var(--color-success-dark) !important;
}

.bg-info {
    background-color: #293F6C !important;
    /* background-color: var(--color-info) !important; */
}
.bg-info-light {
    background-color: var(--color-info-light) !important;
}
.bg-info-dark {
    background-color: var(--color-info-dark) !important;
}

a.bg-info:hover,
a.bg-info:focus,
button.bg-info:hover,
button.bg-info:focus {
    background-color: var(--color-info-dark) !important;
}

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

a.bg-warning:hover,
a.bg-warning:focus,
button.bg-warning:hover,
button.bg-warning:focus {
    background-color: var(--color-warning-dark) !important;
}

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

a.bg-danger:hover,
a.bg-danger:focus,
button.bg-danger:hover,
button.bg-danger:focus {
    background-color: var(--color-danger-dark) !important;
}

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

a.bg-light:hover,
a.bg-light:focus,
button.bg-light:hover,
button.bg-light:focus {
    background-color: var(--color-light-dark) !important;
}

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

a.bg-muted:hover,
a.bg-muted:focus,
button.bg-muted:hover,
button.bg-muted:focus {
    background-color: var(--color-muted-dark) !important;
}

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

a.bg-dark:hover,
a.bg-dark:focus,
button.bg-dark:hover,
button.bg-dark:focus {
    background-color: var(--color-dark-dark) !important;
}

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

a.bg-black:hover,
a.bg-black:focus,
button.bg-black:hover,
button.bg-black:focus {
    background-color: var(--color-black) !important;
}

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

a.bg-white:hover,
a.bg-white:focus,
button.bg-white:hover,
button.bg-white:focus {
    background-color: var(--color-white-dark) !important;
}

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

a.bg-red:hover,
a.bg-red:focus,
button.bg-red:hover,
button.bg-red:focus {
    background-color: var(--color-red-dark) !important;
}

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

a.bg-blue:hover,
a.bg-blue:focus,
button.bg-blue:hover,
button.bg-blue:focus {
    background-color: var(--color-blue-dark) !important;
}

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

a.bg-indigo:hover,
a.bg-indigo:focus,
button.bg-indigo:hover,
button.bg-indigo:focus {
    background-color: var(--color-indigo-dark) !important;
}

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

a.bg-purple:hover,
a.bg-purple:focus,
button.bg-purple:hover,
button.bg-purple:focus {
    background-color: var(--color-purple-dark) !important;
}

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

a.bg-pink:hover,
a.bg-pink:focus,
button.bg-pink:hover,
button.bg-pink:focus {
    background-color: var(--color-pink-dark) !important;
}

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

a.bg-orange:hover,
a.bg-orange:focus,
button.bg-orange:hover,
button.bg-orange:focus {
    background-color: var(--color-orange-dark) !important;
}

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

a.bg-yellow:hover,
a.bg-yellow:focus,
button.bg-yellow:hover,
button.bg-yellow:focus {
    background-color: var(--color-yellow-dark) !important;
}

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

a.bg-green:hover,
a.bg-green:focus,
button.bg-green:hover,
button.bg-green:focus {
    background-color: var(--color-green-dark) !important;
}

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

a.bg-teal:hover,
a.bg-teal:focus,
button.bg-teal:hover,
button.bg-teal:focus {
    background-color: var(--color-teal-dark) !important;
}

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

a.bg-cyan:hover,
a.bg-cyan:focus,
button.bg-cyan:hover,
button.bg-cyan:focus {
    background-color: var(--color-cyan-dark) !important;
}

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

a.bg-gray:hover,
a.bg-gray:focus,
button.bg-gray:hover,
button.bg-gray:focus {
    background-color: var(--color-gray-dark) !important;
}

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

a.bg-graydark:hover,
a.bg-graydark:focus,
button.bg-graydark:hover,
button.bg-graydark:focus {
    background-color: var(--color-graydark-dark) !important;
}

.border {
    border: 1px solid var(--color-light) !important;
}

.border-top {
    border-top: 1px solid var(--color-light) !important;
}

.border-right {
    border-right: 1px solid var(--color-light) !important;
}

.border-bottom {
    border-bottom: 1px solid var(--color-light) !important;
}

.border-left {
    border-left: 1px solid var(--color-light) !important;
}
.border-primary {
    border-color: var(--color-secondary) !important;
}

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

.border-success {
    border-color: var(--color-success) !important;
}

.border-info {
    border-color: var(--color-info) !important;
}
.border-color-white {
    border-color: var(--color-white) !important;
}
.border-warning {
    border-color: var(--color-warning) !important;
}

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

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

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

.border-black {
    border-color: var(--color-black) !important;
}

.border-white {
    border-color: var(--color-white) !important;
}

.border-red {
    border-color: var(--color-danger) !important;
}

.shadow-sm {
    box-shadow: 0 0.125rem 0.25rem 0 var(--color-muted-dark) !important;
}

.shadow {
    box-shadow: 0 0.15rem 1.75rem 0 var(--color-muted-dark) !important;
}

.shadow-lg {
    box-shadow: 0 1rem 3rem var(--color-muted-dark) !important;
}

.stretched-link::after {
    content: "";
    background-color: var(--color-black);
}
.text-monospace {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
        "Courier New", monospace !important;
}
.text-white {
    color: var(--color-white) !important;
}

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

a.text-primary:hover,
a.text-primary:focus {
    color: var(--color-primary-dark) !important;
}

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

a.text-primary:hover,
a.text-primary:focus {
    color: var(--color-primary-dark) !important;
}

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

a.text-success:hover,
a.text-success:focus {
    color: var(--color-success-dark) !important;
}

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

a.text-info:hover,
a.text-info:focus {
    color: var(--color-info-dark) !important;
}

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

a.text-warning:hover,
a.text-warning:focus {
    color: var(--color-warning-dark) !important;
}

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

a.text-danger:hover,
a.text-danger:focus {
    color: var(--color-primary-dark) !important;
}

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

a.text-light:hover,
a.text-light:focus {
    color: var(--color-light-dark) !important;
}

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

a.text-dark:hover,
a.text-dark:focus {
    color: var(--color-dark-dark) !important;
}

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

a.text-black:hover,
a.text-black:focus {
    color: var(--color-black) !important;
}

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

a.text-white:hover,
a.text-white:focus {
    color: var(--color-white-dark) !important;
}

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

a.text-red:hover,
a.text-red:focus {
    color: var(--color-primary-dark) !important;
}

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

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

.text-black-50 {
    color: var(--color-black) !important;
}

.text-white-50 {
    color: var(--color-white) !important;
}

.text-hide {
    color: var(--color-white);
    background-color: var(--color-white);
}

@media print {
    pre,
    blockquote {
        border: 1px solid var(--color-light-dark);
    }
    .badge {
        border: 1px solid var(--color-black);
    }
    .table td,
    .table th {
        background-color: var(--color-white) !important;
    }
    .table-bordered th,
    .table-bordered td {
        border: 1px solid var(--color-light-dark) !important;
    }
    .table-dark th,
    .table-dark td,
    .table-dark thead th,
    .table-dark tbody + tbody {
        border-color: var(--color-light);
    }

    .table .thead-dark th {
        border-color: var(--color-light);
    }
}
.sidenav-toggled #layoutSidenav #layoutSidenav_content:before {
    content: "";
    background: var(--color-black);
}
.nav-fixed
    #layoutSidenav
    #layoutSidenav_nav
    .sidenav
    .sidenav-menu::-webkit-scrollbar-corner {
    background-color: var(--color-white);
}
.nav-fixed
    #layoutSidenav
    #layoutSidenav_nav
    .sidenav.sidenav-light
    .sidenav-menu::-webkit-scrollbar-thumb {
    background-color: var(--color-light-dark);
    border-color: var(--color-muted);
}
.nav-fixed
    #layoutSidenav
    #layoutSidenav_nav
    .sidenav.sidenav-light
    .sidenav-menu::-webkit-scrollbar-track {
    background-color: var(--color-white);
}
.nav-fixed
    #layoutSidenav
    #layoutSidenav_nav
    .sidenav.sidenav-dark
    .sidenav-menu::-webkit-scrollbar-thumb {
    background-color: var(--color-white);
    border-color: var(--color-black);
}
.nav-fixed
    #layoutSidenav
    #layoutSidenav_nav
    .sidenav.sidenav-dark
    .sidenav-menu::-webkit-scrollbar-track {
    background-color: var(--color-white);
}
.bg-gradient-primary-to-secondary {
    background-color: var(--color-secondary);
    background-image: linear-gradient(
        135deg,
        var(--color-secondary) 0%,
        var(--color-primary) 100%
    );
}
.overlay:before {
    content: "";
    background-color: var(--color-black);
}

.overlay-primary:before {
    background-color: var(--color-secondary) !important;
}

.overlay-secondary:before {
    background-color: var(--color-secondary) !important;
}

.overlay-success:before {
    background-color: var(--color-success) !important;
}

.overlay-info:before {
    background-color: var(--color-info) !important;
}

.overlay-warning:before {
    background-color: var(--color-warning) !important;
}

.overlay-danger:before {
    background-color: var(--color-danger) !important;
}

.overlay-light:before {
    background-color: var(--color-light) !important;
}

.overlay-dark:before {
    background-color: var(--color-dark) !important;
}

.overlay-black:before {
    background-color: var(--color-black) !important;
}

.overlay-white:before {
    background-color: var(--color-white) !important;
}

.overlay-red:before {
    background-color: var(--color-danger) !important;
}
.border-primary {
    border-color: var(--color-secondary) !important;
}

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

.border-success {
    border-color: var(--color-success) !important;
}

.border-info {
    border-color: var(--color-info) !important;
}

.border-warning {
    border-color: var(--color-warning) !important;
}

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

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

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

.border-black {
    border-color: var(--color-black) !important;
}

.border-white {
    border-color: var(--color-white) !important;
}

.border-red {
    border-color: var(--color-danger) !important;
}
.lift {
    box-shadow: 0 0.15rem 1.75rem 0 var(--color-dark);
}
.lift:hover {
    box-shadow: 0 0.5rem 2rem 0 var(--color-dark);
}
.lift:active {
    box-shadow: 0 0.15rem 1.75rem 0 var(--color-dark);
}

.lift-sm {
    box-shadow: 0 0.125rem 0.25rem 0 var(--color-dark);
}
.lift-sm:hover {
    box-shadow: 0 0.25rem 1rem 0 var(--color-dark);
}
.lift-sm:active {
    box-shadow: 0 0.125rem 0.25rem 0 var(--color-dark);
}
.shadow-right-sm {
    box-shadow: 0.125rem 0 0.25rem 0 var(--color-dark);
}
.shadow-right {
    box-shadow: 0.15rem 0 1.75rem 0 var(--color-dark);
}

.shadow-right-lg {
    box-shadow: 1rem 0 3rem 0 var(--color-dark);
}

.shadow-left-sm {
    box-shadow: -0.125rem 0 0.25rem 0 var(--color-dark);
}

.shadow-left {
    box-shadow: -0.15rem 0 1.75rem 0 var(--color-dark);
}

.shadow-left-lg {
    box-shadow: -1rem 0 3rem 0 var(--color-dark);
}
.alert-primary.alert-solid {
    color: var(--color-white);
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}
.alert-primary.alert-solid hr {
    border-top-color: var(--color-primary);
}
.alert-primary.alert-solid .alert-link {
    color: var(--color-white-dark);
}
.alert-primary.alert-solid .close {
    color: var(--color-white);
}

.alert-secondary.alert-solid {
    color: var(--color-white);
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}
.alert-secondary.alert-solid hr {
    border-top-color: var(--color-secondary);
}
.alert-secondary.alert-solid .alert-link {
    color: var(--color-white-dark);
}
.alert-secondary.alert-solid .close {
    color: var(--color-white);
}

.alert-success.alert-solid {
    color: var(--color-white);
    background-color: var(--color-success);
    border-color: var(--color-success);
}
.alert-success.alert-solid hr {
    border-top-color: var(--color-success);
}
.alert-success.alert-solid .alert-link {
    color: var(--color-white-dark);
}
.alert-success.alert-solid .close {
    color: var(--color-white);
}

.alert-info.alert-solid {
    color: var(--color-white);
    background-color: var(--color-info);
    border-color: var(--color-info);
}
.alert-info.alert-solid hr {
    border-top-color: #00b6bc;
}
.alert-info.alert-solid .alert-link {
    color: var(--color-white-dark);
}
.alert-info.alert-solid .close {
    color: var(--color-white);
}

.alert-warning.alert-solid {
    color: var(--color-white);
    background-color: var(--color-warning);
    border-color: var(--color-warning);
}
.alert-warning.alert-solid hr {
    border-top-color: var(--color-warning);
}
.alert-warning.alert-solid .alert-link {
    color: var(--color-white-dark);
}
.alert-warning.alert-solid .close {
    color: var(--color-white);
}

.alert-danger.alert-solid {
    color: var(--color-white);
    background-color: var(--color-danger);
    border-color: var(--color-danger);
}
.alert-danger.alert-solid hr {
    border-top-color: var(--color-primary);
}
.alert-danger.alert-solid .alert-link {
    color: var(--color-white-dark);
}
.alert-danger.alert-solid .close {
    color: var(--color-white);
}

.alert-light.alert-solid {
    color: var(--color-dark);
    background-color: var(--color-light);
    border-color: var(--color-light);
}
.alert-light.alert-solid hr {
    border-top-color: var(--color-light);
}
.alert-light.alert-solid .alert-link {
    color: var(--color-dark-dark);
}
.alert-light.alert-solid .close {
    color: var(--color-dark);
}

.alert-dark.alert-solid {
    color: var(--color-white);
    background-color: var(--color-dark);
    border-color: var(--color-dark);
}
.alert-dark.alert-solid hr {
    border-top-color: var(--color-dark);
}
.alert-dark.alert-solid .alert-link {
    color: var(--color-white-dark);
}
.alert-dark.alert-solid .close {
    color: var(--color-white);
}

.alert-black.alert-solid {
    color: var(--color-white);
    background-color: var(--color-black);
    border-color: var(--color-black);
}
.alert-black.alert-solid hr {
    border-top-color: var(--color-black);
}
.alert-black.alert-solid .alert-link {
    color: var(--color-white-dark);
}
.alert-black.alert-solid .close {
    color: var(--color-white);
}

.alert-white.alert-solid {
    color: var(--color-dark);
    background-color: var(--color-white);
    border-color: var(--color-white);
}
.alert-white.alert-solid hr {
    border-top-color: var(--color-white-dark);
}
.alert-white.alert-solid .alert-link {
    color: var(--color-dark-dark);
}
.alert-white.alert-solid .close {
    color: var(--color-dark);
}

.alert-red.alert-solid {
    color: var(--color-white);
    background-color: var(--color-danger);
    border-color: var(--color-danger);
}
.alert-red.alert-solid hr {
    border-top-color: var(--color-warning-dark);
}
.alert-red.alert-solid .alert-link {
    color: var(--color-white-dark);
}
.alert-red.alert-solid .close {
    color: var(--color-white);
}
.avatar-busy::before,
.avatar-idle::before,
.avatar-offline::before,
.avatar-online::before {
    content: "";
    background-color: var(--color-light-dark);
    border: 0.0625rem solid var(--color-white);
}

.avatar-busy::before {
    background-color: var(--color-danger);
}

.avatar-idle::before {
    background-color: var(--color-warning);
}

.avatar-offline::before {
    background-color: var(--color-light-dark);
}

.avatar-online::before {
    background-color: var(--color-success);
}

.btn-transparent-dark {
    color: var(--color-white);
    background-color: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-dark) !important;
}
.btn-transparent-dark:hover {
    color: var(--color-white);
    background-color: var(--color-dark-dark);
    border-color: var(--color-white);
}
.btn-transparent-dark:focus,
.btn-transparent-dark.focus {
    color: var(--color-white);
    background-color: var(--color-dark-dark);
    border-color: var(--color-white);
    box-shadow: 0 0 0 0.2rem var(--color-white);
}
.btn-transparent-dark.disabled,
.btn-transparent-dark:disabled {
    color: var(--color-white);
    background-color: var(--color-white);
    border-color: var(--color-white);
}
.btn-transparent-dark:not(:disabled):not(.disabled):active,
.btn-transparent-dark:not(:disabled):not(.disabled).active,
.show > .btn-transparent-dark.dropdown-toggle {
    color: var(--color-white);
    background-color: var(--color-dark);
    border-color: var(--color-white);
}
.btn-transparent-dark:not(:disabled):not(.disabled):active:focus,
.btn-transparent-dark:not(:disabled):not(.disabled).active:focus,
.show > .btn-transparent-dark.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-white);
}
.btn-transparent-dark:focus {
    box-shadow: 0 0 0 0.2rem var(--color-dark) !important;
}

.btn-transparent-light {
    color: var(--color-white);
    background-color: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-white) !important;
}
.btn-transparent-light:hover {
    color: var(--color-dark);
    background-color: var(--color-white);
    border-color: var(--color-white);
}
.btn-transparent-light:focus,
.btn-transparent-light.focus {
    color: var(--color-dark);
    background-color: var(--color-white);
    border-color: var(--color-white);
    box-shadow: 0 0 0 0.2rem var(--color-white);
}
.btn-transparent-light.disabled,
.btn-transparent-light:disabled {
    color: var(--color-white);
    background-color: var(--color-white);
    border-color: var(--color-white);
}
.btn-transparent-light:not(:disabled):not(.disabled):active,
.btn-transparent-light:not(:disabled):not(.disabled).active,
.show > .btn-transparent-light.dropdown-toggle {
    color: var(--color-dark);
    background-color: var(--color-white);
    border-color: var(--color-white);
}
.btn-transparent-light:not(:disabled):not(.disabled):active:focus,
.btn-transparent-light:not(:disabled):not(.disabled).active:focus,
.show > .btn-transparent-light.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-white);
}
.btn-transparent-light:focus {
    box-shadow: 0 0 0 0.2rem var(--color-white) !important;
}

.card {
    box-shadow: 0 0.15rem 1.75rem 0 var(--color-gray);
}
.card:not([class*="bg-"]) .card-header {
    color: var(--color-secondary);
}
.card-tabbed .nav-item .nav-link {
    color: var(--color-light-dark);
}
.card-tabbed .nav-item .nav-link.active {
    color: var(--color-secondary);
    border-bottom: 0.125rem solid var(--color-secondary);
}
.card-flag-dark {
    background-color: var(--color-dark-dark);
    color: var(--color-white);
}

.card-flag-light {
    background-color: var(--color-white);
    color: var(--color-gray);
}
.page-header.page-header-dark .page-header-title fs-md-35 fs-20 {
    color: var(--color-white);
}
.page-header.page-header-dark
    .page-header-title
    fs-md-35
    fs-20
    .page-header-icon {
    color: var(--color-white);
}
.page-header.page-header-dark .page-header-subtitle fs-md-19 fs-14 {
    color: var(--color-white);
}
.page-header.page-header-dark .breadcrumb {
    background-color: var(--color-black);
    box-shadow: 0 0.15rem 1.75rem 0 var(--color-dark);
}
.page-header.page-header-dark .breadcrumb .breadcrumb-item,
.page-header.page-header-dark
    .breadcrumb
    .breadcrumb-item
    + .breadcrumb-item::before {
    color: var(--color-white);
}
.page-header.page-header-dark .breadcrumb .breadcrumb-item a {
    color: var(--color-white);
}

.page-header.page-header-light .page-header-title fs-md-35 fs-20 {
    color: var(--color-dark);
}
.page-header.page-header-light
    .page-header-title
    fs-md-35
    fs-20
    .page-header-icon {
    color: var(--color-dark);
}
.page-header.page-header-light .page-header-subtitle fs-md-19 fs-14 {
    color: var(--color-dark);
}
.page-header.page-header-light .breadcrumb {
    background-color: var(--color-black);
}
.page-header.page-header-light .breadcrumb .breadcrumb-item,
.page-header.page-header-light
    .breadcrumb
    .breadcrumb-item
    + .breadcrumb-item::before {
    color: var(--color-gray);
}
.page-header.page-header-light .breadcrumb .breadcrumb-item a {
    color: var(--color-secondary);
}
.custom-control label:hover:before {
    background-color: var(--color-light);
}
.custom-control
    .custom-control-input:disabled:checked
    ~ .custom-control-label::before {
    background-color: var(--color-light);
    border-color: var(--color-light-dark);
}
.custom-control .custom-control-input:disabled ~ .custom-control-label {
    color: var(--color-light-dark);
}

.custom-control-solid label:before {
    background-color: var(--color-white-dark);
    border-color: var(--color-white-dark);
}
.custom-control-solid label:hover:before {
    background-color: var(--color-light-dark);
    border-color: var(--color-light-dark);
}
.custom-control-solid
    .custom-control-input:disabled
    ~ .custom-control-label::before {
    background-color: var(--color-white-dark);
    border-color: var(--color-white-dark);
}
.custom-control-solid
    .custom-control-input:disabled:checked
    ~ .custom-control-label::before {
    background-color: var(--color-white-dark);
    border-color: var(--color-white-dark);
}

.form-control-solid {
    background-color: var(--color-muted-light);
    border-color: var(--color-muted);
}
.form-control-solid:focus {
    background-color: var(--color-muted-light);
}
.navbar .dropdown-menu .dropdown-header {
    color: var(--color-light-dark);
}
.topnav.navbar-dark #sidebarToggle {
    color: var(--color-white);
}
.topnav.navbar-dark .navbar-brand {
    color: var(--color-white);
}
.topnav.navbar-light #sidebarToggle {
    color: var(--color-dark);
}
.topnav.navbar-light .navbar-brand {
    color: var(--color-dark);
}
.sidenav .sidenav-menu .nav .nav-link.active .nav-icon {
    color: var(--color-secondary);
}

.sidenav-dark {
    background-color: var(--color-dark);
    color: var(--color-white);
}
.sidenav-dark .sidenav-menu .sidenav-menu-heading {
    color: var(--color-white);
}
.sidenav-dark .sidenav-menu .nav-link {
    color: var(--color-white);
}
.sidenav-dark .sidenav-menu .nav-link .nav-link-icon {
    color: var(--color-white);
}
.sidenav-dark .sidenav-menu .nav-link .sidenav-collapse-arrow {
    color: var(--color-white);
}
.sidenav-dark .sidenav-menu .nav-link:hover {
    color: var(--color-white);
}
.sidenav-dark .sidenav-menu .nav-link.active {
    color: var(--color-white);
}
.sidenav-dark .sidenav-menu .nav-link.active .nav-link-icon {
    color: var(--color-white);
}
.sidenav-dark .sidenav-menu-nested {
    border-left-color: var(--color-white);
}
.sidenav-dark .sidenav-footer {
    background-color: var(--color-black);
}

.sidenav-light {
    background-color: var(--color-white);
    color: var(--color-dark);
}
.sidenav-light .sidenav-menu .sidenav-menu-heading {
    color: var(--color-dark-dark);
}
.sidenav-light .sidenav-menu .nav-link {
    color: var(--color-graydark);
}
.sidenav-light .sidenav-menu .nav-link .nav-link-icon {
    color: var(--color-primary);
}
.sidenav-light .sidenav-menu .nav-link .sidenav-collapse-arrow {
    color: var(--color-secondary-light);
}
.sidenav-light .sidenav-menu .nav-link:hover {
    color: var(--color-primary);
}
.sidenav-light .sidenav-menu .nav-link.active {
    color: var(--color-secondary);
}
.sidenav-light .sidenav-menu .nav-link.active .nav-link-icon {
    color: var(--color-primary);
}
.sidenav-light .sidenav-menu-nested {
    border-left-color: var(--color-light-dark);
}
.sidenav-light .sidenav-footer {
    background-color: var(--color-white);
}
.sidenav-light .sidenav-footer .sidenav-footer-subtitle {
    color: var(--color-gray-light);
}

.dropdown-menu {
    box-shadow: 0 0.15rem 1.75rem 0 var(--color-dark);
}
.dropdown-menu .dropdown-item.active .dropdown-item-icon,
.dropdown-menu .dropdown-item:active .dropdown-item-icon {
    color: var(--color-white);
}
.dropdown-user
    .dropdown-menu
    .dropdown-header
    .dropdown-user-details
    .dropdown-user-details-name {
    color: var(--color-dark);
}
.dropdown-user
    .dropdown-menu
    .dropdown-header
    .dropdown-user-details
    .dropdown-user-details-email {
    color: var(--color-gray);
}
.dropdown-user .dropdown-menu .dropdown-item .dropdown-item-icon {
    color: var(--color-black);
}
.dropdown-user .dropdown-menu .dropdown-item:active .dropdown-item-icon {
    color: var(--color-white);
}
.dropdown-notifications .dropdown-menu .dropdown-notifications-header {
    background-color: var(--color-secondary);
    color: var(--color-white);
}
.dropdown-notifications .dropdown-menu .dropdown-notifications-item {
    border-bottom: 1px solid var(--color-light);
}
.dropdown-notifications
    .dropdown-menu
    .dropdown-notifications-item
    .dropdown-notifications-item-icon {
    background-color: var(--color-secondary);
}
.dropdown-notifications
    .dropdown-menu
    .dropdown-notifications-item
    .dropdown-notifications-item-icon
    svg {
    color: var(--color-white);
}
.dropdown-notifications
    .dropdown-menu
    .dropdown-notifications-item
    .dropdown-notifications-item-content
    .dropdown-notifications-item-content-details {
    color: var(--color-light-dark);
}
.dropdown-notifications .dropdown-menu .dropdown-notifications-footer {
    color: var(--color-light-dark);
}
.dropdown-notifications .dropdown-menu .dropdown-notifications-footer:active {
    color: var(--color-white);
}
.dropdown-notifications .dropdown-menu::-webkit-scrollbar-thumb {
    background-color: var(--color-light-dark);
    border-color: var(--color-black);
}
.dropdown-notifications .dropdown-menu::-webkit-scrollbar-track {
    background-color: var(--color-white);
}
.dropdown-notifications .dropdown-menu::-webkit-scrollbar-corner {
    background-color: var(--color-white);
}
.footer.footer-dark {
    color: var(--color-white);
}
.footer.footer-light {
    color: var(--color-dark-dark);
}

.icon-stack {
    background-color: var(--color-light);
}
.video .video-link {
    color: var(--color-white);
}
.video .video-link:hover {
    color: var(--color-white);
}
.accordion-faq {
    box-shadow: 0 0.15rem 1.75rem 0 var(--color-dark);
}
.accordion-faq .card .card-header {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-light);
}
.accordion-faq .accordion-faq-item .card-header .accordion-faq-item-heading {
    color: var(--color-graydark);
}
.accordion-faq
    .accordion-faq-item
    .card-header
    .accordion-faq-item-heading
    .accordion-faq-item-heading-arrow {
    color: var(--color-light-dark);
}
.badge-transparent-light {
    color: var(--color-white);
    background-color: var(--color-black);
}

.badge-transparent-dark {
    color: var(--color-dark);
    background-color: var(--color-dark);
}
.icons-org-create .icon-users circle,
.icons-org-create .icon-users path:first-of-type {
    color: var(--color-secondary);
}
.icons-org-create .icon-users path {
    color: var(--color-primary);
}
.icons-org-create .icon-plus {
    color: var(--color-secondary);
}
.icons-org-join .icon-user {
    color: var(--color-secondary);
}
.icons-org-join .icon-arrow {
    color: var(--color-secondary);
}
.icons-org-join .icon-users circle,
.icons-org-join .icon-users path:first-of-type {
    color: var(--color-secondary);
}
.icons-org-join .icon-users path {
    color: var(--color-secondary);
}
.org-or-divider {
    border-bottom: 1px solid var(--color-light);
}
.org-or-divider .org-or {
    background-color: var(--color-white);
    border: 1px solid var(--color-light);
    color: var(--color-secondary);
}
.error-page {
    background-color: var(--color-white);
}
.error {
    color: var(--color-danger);
}
.error:after {
    color: var(--color-danger);
    background: var(--color-white);
}

.error:before {
    text-shadow: 1px 0 var(--color-secondary);
    color: var(--color-danger);
    background: var(--color-white);
}

.datatable table.dataTable thead,
.datatable table.dataTable tfoot {
    color: var(--color-secondary);
}
.datatable table.dataTable.table-dark thead,
.datatable table.dataTable.table-dark tfoot {
    color: var(--color-white);
}
.datatable table.dataTable thead .sorting [data-fa-pseudo-element=":after"],
.datatable table.dataTable thead .sorting_asc [data-fa-pseudo-element=":after"],
.datatable
    table.dataTable
    thead
    .sorting_desc
    [data-fa-pseudo-element=":after"],
.datatable
    table.dataTable
    thead
    .sorting_asc_disabled
    [data-fa-pseudo-element=":after"],
.datatable
    table.dataTable
    thead
    .sorting_desc_disabled
    [data-fa-pseudo-element=":after"] {
    color: var(--color-light-dark);
}
.datatable table.dataTable thead .sorting_asc [data-fa-pseudo-element=":after"],
.datatable
    table.dataTable
    thead
    .sorting_desc
    [data-fa-pseudo-element=":after"],
.datatable
    table.dataTable
    thead
    .sorting_asc_disabled
    [data-fa-pseudo-element=":after"],
.datatable
    table.dataTable
    thead
    .sorting_desc_disabled
    [data-fa-pseudo-element=":after"] {
    color: var(--color-secondary);
}
.datatable
    table.dataTable.table-dark
    thead
    .sorting
    [data-fa-pseudo-element=":after"] {
    color: var(--color-white);
}
.datatable
    table.dataTable.table-dark
    thead
    .sorting_asc
    [data-fa-pseudo-element=":after"],
.datatable
    table.dataTable.table-dark
    thead
    .sorting_desc
    [data-fa-pseudo-element=":after"],
.datatable
    table.dataTable.table-dark
    thead
    .sorting_asc_disabled
    [data-fa-pseudo-element=":after"],
.datatable
    table.dataTable.table-dark
    thead
    .sorting_desc_disabled
    [data-fa-pseudo-element=":after"] {
    color: var(--color-white);
}
.sbp-preview {
    border: 0.25rem solid var(--color-muted);
}
.sbp-preview .sbp-preview-content {
    border-bottom: 1px solid var(--color-light);
}
.sbp-preview .sbp-preview-code {
    background-color: var(--color-light);
    border-bottom: 1px solid var(--color-light);
}
.sbp-preview .sbp-preview-code .nav-tabs {
    border-bottom-color: var(--color-white);
}
.sbp-preview .sbp-preview-code .nav-tabs .nav-item .nav-link.active {
    border-color: var(--color-white);
    background-color: var(--color-dark);
    color: var(--color-white);
}
.sbp-preview .sbp-preview-text {
    background-color: var(--color-light);
}
code[class*="language-"],
pre[class*="language-"] {
    color: var(--color-white-dark);
    background: var(--color-dark);
    font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo",
        monospace;
}

code[class*="language-"]::-moz-selection,
pre[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection,
pre[class*="language-"] ::-moz-selection {
    background: var(--color-dark);
}

code[class*="language-"]::-moz-selection,
pre[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection,
pre[class*="language-"] ::-moz-selection {
    background: var(--color-dark);
}

code[class*="language-"]::selection,
pre[class*="language-"]::selection,
code[class*="language-"] ::selection,
pre[class*="language-"] ::selection {
    background: var(--color-dark);
}
.language-css > code,
.language-sass > code,
.language-scss > code {
    color: var(--color-orange-light);
}
#sidebarToggle svg g path {
    fill: var(--color-primary);
}

.facebook i,
.twitter i,
.instagram i,
.telegram i,
.whatsapp i,
.google i,
.linkedin i,
.skype i,
.youtube i,
.pinterest i,
.github i,
.mobile i,
.email i,
.no_social i {
    /* font-weight: 900; */
    position: relative;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}
.no_social i:before {
    position: absolute;
    color: var(--fa-primary-color,inherit);
    opacity: 1;
    opacity: var(--fa-primary-opacity,1);
}
.no_social i:after {
    color: var(--fa-secondary-color,inherit);
    opacity: .4;
    opacity: var(--fa-secondary-opacity,.4);
}
.facebook,
.facebook {
    background: var(--color-blue);
    --switch: calc((var(--blue-color-l) - var(--contrastThreshold)) * -100);
    color: hsl(0, 0%, var(--switch));
}
.facebook i {
    font-family: "Font Awesome 5 Brands";
}
.facebook i:before {
    content: "\f39e";
}
button.facebook:hover,
a.facebook:active,
button.facebook:hover,
a.facebook:active {
    background: var(--color-blue-dark);
    --switch: calc(
        (var(--blue-color-dark-l) - var(--contrastThreshold)) * -100
    );
    color: hsl(0, 0%, var(--switch));
}

.twitter,
.twitter {
    background: var(--color-cyan);
    --switch: calc((var(--cyan-color-l) - var(--contrastThreshold)) * -100);
    color: hsl(0, 0%, var(--switch));
}
.twitter i {
    font-family: "Font Awesome 5 Brands";
}
.twitter i:before {
    content: "\f099";
}
button.twitter:hover,
a.twitter:active,
button.twitter:hover,
a.twitter:active {
    background: var(--color-cyan-dark);
    --switch: calc(
        (var(--cyan-color-dark-l) - var(--contrastThreshold)) * -100
    );
    color: hsl(0, 0%, var(--switch));
}

.instagram,
.instagram {
    background: linear-gradient(
        -208deg,
        var(--color-blue),
        var(--color-red),
        var(--color-yellow)
    );
    --switch: calc((var(--cyan-color-l) - var(--contrastThreshold)) * -100);
    color: hsl(0, 0%, var(--switch));
}
.instagram i {
    font-family: "Font Awesome 5 Brands";
}
.instagram i:before {
    content: "\f16d";
}
button.instagram:hover,
a.instagram:active,
button.instagram:hover,
a.instagram:active {
    background: linear-gradient(
        -208deg,
        var(--color-blue-dark),
        var(--color-red-dark),
        var(--color-yellow-dark)
    );
    --switch: calc(
        (var(--cyan-color-dark-l) - var(--contrastThreshold)) * -100
    );
    color: hsl(0, 0%, var(--switch));
}

.telegram,
.telegram {
    background: var(--color-blue);
    --switch: calc((var(--blue-color-l) - var(--contrastThreshold)) * -100);
    color: hsl(0, 0%, var(--switch));
}
.telegram i {
    font-family: "Font Awesome 5 Brands";
}
.telegram i:before {
    content: "\f3fe";
}
button.telegram:hover,
a.telegram:active,
button.telegram:hover,
a.telegram:active {
    background: var(--color-blue-dark);
    --switch: calc(
        (var(--blue-color-dark-l) - var(--contrastThreshold)) * -100
    );
    color: hsl(0, 0%, var(--switch));
}

.whatsapp,
.whatsapp {
    background: var(--color-success);
    --switch: calc((var(--success-color-l) - var(--contrastThreshold)) * -100);
    color: hsl(0, 0%, var(--switch));
}
.whatsapp i {
    font-family: "Font Awesome 5 Brands";
}
.whatsapp i:before {
    content: "\f232";
}
button.whatsapp:hover,
a.whatsapp:active,
button.whatsapp:hover,
a.whatsapp:active {
    background: var(--color-success-dark);
    --switch: calc(
        (var(--success-color-dark-l) - var(--contrastThreshold)) * -100
    );
    color: hsl(0, 0%, var(--switch));
}

.google,
.google {
    background: var(--color-danger);
    --switch: calc((var(--danger-color-l) - var(--contrastThreshold)) * -100);
    color: hsl(0, 0%, var(--switch));
}
.google i {
    font-family: "Font Awesome 5 Brands";
}
.google i:before {
    content: "\f1a0";
}
button.google:hover,
a.google:active,
button.google:hover,
a.google:active {
    background: var(--color-danger-dark);
    --switch: calc(
        (var(--danger-color-dark-l) - var(--contrastThreshold)) * -100
    );
    color: hsl(0, 0%, var(--switch));
}

.linkedin,
.linkedin {
    background: var(--color-blue-dark);
    --switch: calc((var(--blue-color-l) - var(--contrastThreshold)) * -100);
    color: hsl(0, 0%, var(--switch));
}
.linkedin i {
    font-family: "Font Awesome 5 Brands";
}
.linkedin i:before {
    content: "\f0e1";
}
button.linkedin:hover,
a.linkedin:active,
button.linkedin:hover,
a.linkedin:active {
    background: var(--color-blue);
    --switch: calc(
        (var(--blue-color-dark-l) - var(--contrastThreshold)) * -100
    );
    color: hsl(0, 0%, var(--switch));
}

.skype,
.skype {
    background: var(--color-cyan);
    --switch: calc((var(--cyan-color-l) - var(--contrastThreshold)) * -100);
    color: hsl(0, 0%, var(--switch));
}
.skype i {
    font-family: "Font Awesome 5 Brands";
}
.skype i:before {
    content: "\f17e";
}
button.skype:hover,
a.skype:active,
button.skype:hover,
a.skype:active {
    background: var(--color-cyan);
    --switch: calc(
        (var(--cyan-color-dark-l) - var(--contrastThreshold)) * -100
    );
    color: hsl(0, 0%, var(--switch));
}

.youtube,
.youtube {
    background: var(--color-danger);
    --switch: calc((var(--danger-color-l) - var(--contrastThreshold)) * -100);
    color: hsl(0, 0%, var(--switch));
}
.youtube i {
    font-family: "Font Awesome 5 Brands";
}
.youtube i:before {
    content: "\f167";
}
button.youtube:hover,
a.youtube:active,
button.youtube:hover,
a.youtube:active {
    background: var(--color-danger);
    --switch: calc(
        (var(--danger-color-dark-l) - var(--contrastThreshold)) * -100
    );
    color: hsl(0, 0%, var(--switch));
}

.pinterest,
.pinterest {
    background: var(--color-danger);
    --switch: calc((var(--danger-color-l) - var(--contrastThreshold)) * -100);
    color: hsl(0, 0%, var(--switch));
}
.pinterest i {
    font-family: "Font Awesome 5 Brands";
}
.pinterest i:before {
    content: "\f231";
}
button.pinterest:hover,
a.pinterest:active,
button.pinterest:hover,
a.pinterest:active {
    background: var(--color-danger);
    --switch: calc(
        (var(--danger-color-dark-l) - var(--contrastThreshold)) * -100
    );
    color: hsl(0, 0%, var(--switch));
}

.github,
.github {
    background: var(--color-muted-dark);
    --switch: calc((var(--muted-color-l) - var(--contrastThreshold)) * -100);
    color: hsl(0, 0%, var(--switch));
}
.github i {
    font-family: "Font Awesome 5 Brands";
}
.github i:before {
    content: "\f09b";
}
button.github:hover,
a.github:active,
button.github:hover,
a.github:active {
    background: var(--color-muted-dark);
    --switch: calc(
        (var(--muted-color-dark-l) - var(--contrastThreshold)) * -100
    );
    color: hsl(0, 0%, var(--switch));
}

.mobile,
.mobile {
    background: var(--color-orange);
    --switch: calc((var(--orange-color-l) - var(--contrastThreshold)) * -100);
    color: hsl(0, 0%, var(--switch));
}
.mobile i {
    font-family: "Font Awesome 5 Pro";
}
.mobile i:before {
    content: "\f3cf";
}
button.mobile:hover,
a.mobile:active,
button.mobile:hover,
a.mobile:active {
    background: var(--color-orange-dark);
    --switch: calc(
        (var(--orange-color-dark-l) - var(--contrastThreshold)) * -100
    );
    color: hsl(0, 0%, var(--switch));
}

.email,
.email {
    background: var(--color-danger);
    --switch: calc((var(--danger-color-l) - var(--contrastThreshold)) * -100);
    color: hsl(0, 0%, var(--switch));
}
.email i {
    font-family: "Font Awesome 5 Pro";
}
.email i:before {
    content: "\f0e0";
}
button.email:hover,
a.email:active,
button.email:hover,
a.email:active {
    background: var(--color-danger-dark);
    --switch: calc(
        (var(--danger-color-dark-l) - var(--contrastThreshold)) * -100
    );
    color: hsl(0, 0%, var(--switch));
}

.no_social,
.no_social {
    background: var(--color-muted-dark);
    --switch: calc((var(--muted-color-l) - var(--contrastThreshold)) * -100);
    color: hsl(0, 0%, var(--switch));
}
.no_social i {
    font-family: "Font Awesome 5 Duotone";
}
.no_social i:before {
    content: "\f0c1";
}
.no_social i:after {
    content: "\10f0c1";
}
button.no_social:hover,
a.no_social:active,
button.no_social:hover,
a.no_social:active {
    background: var(--color-muted-dark);
    --switch: calc(
        (var(--muted-color-dark-l) - var(--contrastThreshold)) * -100
    );
    color: hsl(0, 0%, var(--switch));
}
::-webkit-scrollbar-track {
    background-color: var(--color-white);
}
::-webkit-scrollbar {
    background-color: var(--color-white);
}
::-webkit-scrollbar-thumb {
    background-color: var(--color-primary);
}