:root {
    --primary: #c21616;
    --primaryOpaque: color-mix(in srgb, var(--primary) 30%, rgba(0,0,0,0.1))
}

body {
    margin: 0;
    font-family: "Rubik", -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
}

body:not([data-bs-theme='dark']) {
    background-color: color-mix(in srgb, var(--primary) 3%, white);
}

.card {
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

[data-bs-theme='dark'] .card {
    border: 1px solid rgba(255,255,255, 0.1) !important;
}

.btn {
    border-radius: 0.5rem;
    padding: 0.7rem 0.75rem !important;
    transition: 0.2s;
    font-weight: bold;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    -o-transition: 0.2s;
}


.btn-primary {
    background-color: var(--primary) !important;
    color: #fff;
    border: 0px;
    box-shadow: 0px 6px 16px var(--primaryOpaque);
}

.btn-primary.active {
    /* outline: 1px solid #c97e00; */
    background-color: color-mix(in srgb, var(--primary) 80%, white) !important;
}

.card-footer:last-child {
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
}

.bg-primary,
.badge-primary {
    background-color: var(--primary) !important;
}


.text-primary {
    color: var(--primary) !important;
}

.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}

.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show>.btn-outline-primary.dropdown-toggle,
.btn-outline-primary:hover {
    color: #fff;
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn:not(:disabled):not(.disabled):active:focus,
.btn:not(:disabled):not(.disabled).active:focus,
.show>.btn.dropdown-toggle:focus,
.btn:focus,
.btn.focus {
    --scale: 0.98;
    box-shadow: none !important;
    outline: none;
    transform: scale(var(--scale), var(--scale));
    -webkit-transform: scale(var(--scale), var(--scale));
    -moz-transform: scale(var(--scale), var(--scale));
    -ms-transform: scale(var(--scale), var(--scale));
    -o-transform: scale(var(--scale), var(--scale));
}

a.bg-primary:hover, a.bg-primary:focus, button.bg-primary:hover, button.bg-primary:focus {
    background-color: color-mix(in srgb, var(--primary) 80%, black) !important;
}

.form-label {
    font-weight: bold;
    opacity: 0.8;
}

.input-group-text 
{ 
    padding: 0.375rem 1rem;
    height: calc(2em + 0.75rem + 2px)
}

.input-group-text.primary {
    background-color: var(--primary);
    color: #fff;
    border: 1px solid color-mix(in srgb, var(--primary) 80%, black);
}

.input-group-prepend > .input-group-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group-append > .input-group-text {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.form-check-input:checked~.form-check-label::before {
    color: #fff;
    border-color: var(--primary);
    background-color: var(--primary);
}

.form-check-input:focus~.form-check-label::before {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-check-input:focus:not(:checked)~.form-check-label::before {
    border-color: var(--primaryOpaque);
}

.form-check-input:not(:disabled):active~.form-check-label::before {
    color: #fff;
    background-color: var(--primaryOpaque);
    border-color: var(--primaryOpaque);
}

.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    padding: 0.375rem 1rem;
    transition: 0.2s;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    -o-transition: 0.2s;
    border-radius: 0.5rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
    box-shadow: none !important;
}

input.form-control, select.form-control {
    height: calc(2em + 0.75rem + 2px);
}

[data-bs-theme='dark'] .form-control {
    background-color: rgba(255, 255, 255, 0.05);
}

.form-control {
    background-color: white;
}


.form-control:focus {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-color: var(--primaryOpaque);
    outline: 0;
    box-shadow: none;
}

.btn-block {
    width: 100%;
}

.progress {
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
    background-color: rgb(255, 255, 255, 0.2);
}


.progress.thin {
    height: 3px;
}

.progress-bar {
    background-color: var(--primary);

}

.progress-bar.no-transition {
    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
}


.progress-bar-striped {
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-size: 1rem 1rem;
}

.progress-bar-animated {
    animation: progress-bar-stripes 1s linear infinite;
    -webkit-animation: progress-bar-stripes 1s linear infinite;
}

@keyframes progress-bar-stripes {
    from { background-position: 1rem 0; }
    to { background-position: 0 0; }
}

a {
    text-decoration: none;
}

.accordion-button:not(.collapsed) {
    color: var(--primary);
    background-color: white;
    box-shadow: none;
}

.accordion-button:focus {
    z-index: 3;
    border-color: #fff2d2;
    outline: none !important;
    box-shadow: none !important;
}

[hidden] {
    display: none !important;
}

.tab-bar {
    box-shadow: 0px -5px 15px rgba(0, 0, 0, 0.025);
    border-top: 1px solid #fff;
}

[data-bs-theme='dark'] .tab-bar {
    background-color: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.tab-bar .option {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #696969;
}

[data-bs-theme='dark'] .tab-bar .option {
    color: #c4c4c4;
}


.tab-bar .option.active {
    color: var(--primary);
}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.form-check-input:focus {
    border-color: color-mix(in srgb, var(--primary) 20%, rgba(255, 255, 255, 0));
    outline: 0;
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--primary) 10%, rgba(255, 255, 255, 0));
}


.chip {
    background-color: rgba(0, 0, 0, 0.075);
}

.chip.selected {
    background-color: var(--primary);
    color: #fff;
}


.progress {
    border-radius: 15px !important;
    background-color: rgb(0, 0, 0, 0.05);
}


.progress.thin {
    height: 3px;
}

.progress-bar {
    background-color: var(--primary);

}

.progress-bar.no-transition {
    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
}

.progress-bar-striped {
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-size: 1rem 1rem;
}

.progress-bar-animated {
    animation: progress-bar-stripes 1s linear infinite;
    -webkit-animation: progress-bar-stripes 1s linear infinite;
}

@keyframes progress-bar-stripes {
    from { background-position: 1rem 0; }
    to { background-position: 0 0; }
}




.card {
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0px 10px 23px rgba(0, 0, 0, 0.05);
    border-radius: 0.5rem;
}


[data-bs-theme="dark"] .card {
    border: 1px solid rgba(255,255,255,0.1);
}


.card-footer:last-child {
    border-top: 0px;
    border-radius: 0rem;
}

.card-header {
    border-bottom: 0px;
    border-radius: 0rem;
}
