@import url("http://fonts.googleapis.com/css2?family=Work+Sans&Work+Sans+Bold");

:root {
    --uccos-black: #1C1C1C;
    --uccos-petrol: #165D68;
    --uccos-turquoise: #49ADB7;
    --uccos-turquoise-light: #B5E4E4;
    --uccos-white: #FFFFFF;
    --uccos-red: #FF4B42;
    --uccos-yellow: #FFB652;

    --bs-body-font-family: "Work Sans", var(--bs-font-sans-serif);
    --bs-body-color: var(--uccos-black);
}

.bg-uccos-primary {
    background-color: var(--uccos-petrol);
}
.bg-uccos-secondary {
    background-color: var(--uccos-turquoise);
}
.bg-uccos-danger {
    background-color: var(--uccos-red);
}

.box {
    width: 150px;
    height: 150px;
}
h1 {
    color: var(--uccos-petrol);
    font-weight: 700;
    font-size: 64px;
}
h2 {
    font-weight: 600;
    
}
h1, h2, h3, h4, h5, h6 {
    font-family: "Work Sans Bold", var(--bs-font-sans-serif);
}

a {
    color: var(--uccos-petrol);
    font-weight: 600;
}
a:hover, a:active, a:visited, a:link {
    text-decoration: none;
}

header {
    background-color: var(--uccos-petrol);
    height: 70px;
}

header .navbar a {
    color: var(--uccos-white);
}

header .navbar .dropdown-toggle:focus {
    outline: none;
}

header .navbar .dropdown-menu {
    background-color: var(--uccos-petrol);
    color: var(--uccos-white);
    outline-color: none;
    border: none;
    border-radius: 0;
    margin-top: 24px;
    padding-top: 0;
    padding-bottom: 0;
}

header .navbar .dropdown-menu .dropdown-item {
    border-top-color: var(--uccos-white);
}

main {
    padding-top: 20px;
}

.full-width {
    margin: 0 auto;
    width: 100dvw;
    margin-left: calc(50% - 50dvw);
}

section.inverse {
    background-color: var(--uccos-turquoise);
    color: var(--uccos-white);
    box-shadow: 0 0 0 100vmax var(--uccos-turquoise);
    clip-path: inset(0 -100vmax);
}

footer {
    background-color: var(--uccos-black);
}

footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {
    color: var(--uccos-turquoise);
}
footer p {
    font-size: small;
    color: var(--uccos-white);
}

footer a {
    color: var(--uccos-yellow);
    transition: color .2s linear;
}
footer a:hover {
    color: var(--uccos-white);
    text-decoration: underline;
}
footer a svg {
    fill: var(--uccos-yellow) !important;
    transition: fill .2s linear;
}
footer a:hover svg {
    fill: var(--uccos-white) !important;
}
footer div.border-top {
    border-top: 1px solid var(--uccos-turquoise) !important;
}

.form-control {
    border-radius: var(--bs-border-radius-pill);
    padding-right: 0.8rem;
    padding-left: 0.8rem;
}
.form-control:focus {
    border-color: var(--uccos-petrol);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px var(--uccos-petrol);
}
.form-group-sm .form-control {
    border-radius: var(--bs-border-radius-pill);
}
.form-group-md .form-control {
    font-size: 14px;
    border-radius: var(--bs-border-radius-pill);
}
.form-group-lg .form-control {
    border-radius: var(--bs-border-radius-pill);
}

.form-select {
    border-radius: var(--bs-border-radius-pill);
    padding-right: 0.8rem;
    padding-left: 0.8rem;
}

.input-group-text {
    border-radius: var(--bs-border-radius-pill);
    padding-right: 0.8rem;
    padding-left: 0.8rem;
}

.time-frame-form label.btn-outline-primary {
    color: var(--uccos-turquoise);
    border-color: var(--uccos-turquoise);
}

.time-frame-form label.btn-outline-primary:hover {
    color: var(--uccos-white);
    background-color: var(--uccos-turquoise);
}

.time-frame-form .btn-check:active+.btn-outline-primary, 
.time-frame-form .btn-check:checked+.btn-outline-primary, 
.time-frame-form .btn-outline-primary.active, 
.time-frame-form .btn-outline-primary.dropdown-toggle.show, 
.time-frame-form .btn-outline-primary:active {
    background-color: var(--uccos-turquoise);
    border-color: var(--uccos-turquoise);
}

.bi-check-circle-fill {
    color: var(--uccos-petrol);
}

.bi-x-circle-fill {
    color: var(--uccos-red);
}

.btn {
    --bs-btn-border-radius: var(--bs-border-radius-pill);
    
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}

.btn-primary {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--uccos-petrol);
    --bs-btn-border-color: var(--uccos-petrol);
    
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: color-mix(in srgb, var(--uccos-petrol) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--uccos-petrol) 85%, black);
    
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: color-mix(in srgb, var(--uccos-petrol) 85%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--uccos-petrol) 75%, black);
    
    --bs-btn-disabled-color: var(--bs-white);
    --bs-btn-disabled-bg: var(--uccos-petrol);
    --bs-btn-disabled-border-color: var(--uccos-petrol);
}
.btn-outline-primary {
    --bs-btn-color: var(--uccos-petrol);
    --bs-btn-border-color: var(--uccos-petrol);
    
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--uccos-petrol);
    --bs-btn-hover-border-color: var(--uccos-petrol);
    
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--uccos-petrol);
    --bs-btn-active-border-color: var(--uccos-petrol);
    
    --bs-btn-disabled-color: var(--uccos-petrol);
    --bs-btn-disabled-border-color: var(--uccos-petrol);
}

.btn-secondary {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--uccos-turquoise);
    --bs-btn-border-color: var(--uccos-turquoise);
    
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: color-mix(in srgb, var(--uccos-turquoise) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--uccos-turquoise) 85%, black);
    
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: color-mix(in srgb, var(--uccos-turquoise) 85%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--uccos-turquoise) 75%, black);
    
    --bs-btn-disabled-color: var(--bs-white);
    --bs-btn-disabled-bg: var(--uccos-turquoise);
    --bs-btn-disabled-border-color: var(--uccos-turquoise);
}
.btn-outline-secondary {
    --bs-btn-color: var(--uccos-turquoise);
    --bs-btn-border-color: var(--uccos-turquoise);
    
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--uccos-turquoise);
    --bs-btn-hover-border-color: var(--uccos-turquoise);
    
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--uccos-turquoise);
    --bs-btn-active-border-color: var(--uccos-turquoise);
    
    --bs-btn-disabled-color: var(--uccos-turquoise);
    --bs-btn-disabled-border-color: var(--uccos-turquoise);
}

.btn-warning {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--uccos-yellow);
    --bs-btn-border-color: var(--uccos-yellow);
    
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: color-mix(in srgb, var(--uccos-yellow) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--uccos-yellow) 85%, black);
    
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: color-mix(in srgb, var(--uccos-yellow) 85%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--uccos-yellow) 75%, black);
    
    --bs-btn-disabled-color: var(--bs-white);
    --bs-btn-disabled-bg: var(--uccos-yellow);
    --bs-btn-disabled-border-color: var(--uccos-yellow);
}
.btn-outline-warning {
    --bs-btn-color: var(--uccos-yellow);
    --bs-btn-border-color: var(--uccos-yellow);
    
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--uccos-yellow);
    --bs-btn-hover-border-color: var(--uccos-yellow);
    
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--uccos-yellow);
    --bs-btn-active-border-color: var(--uccos-yellow);
    
    --bs-btn-disabled-color: var(--uccos-yellow);
    --bs-btn-disabled-border-color: var(--uccos-yellow);
}

.btn-danger {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--uccos-red);
    --bs-btn-border-color: var(--uccos-red);
    
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: color-mix(in srgb, var(--uccos-red) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--uccos-red) 85%, black);
    
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: color-mix(in srgb, var(--uccos-red) 85%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--uccos-red) 75%, black);
    
    --bs-btn-disabled-color: var(--bs-white);
    --bs-btn-disabled-bg: var(--uccos-red);
    --bs-btn-disabled-border-color: var(--uccos-red);
}
.btn-outline-danger {
    --bs-btn-color: var(--uccos-red);
    --bs-btn-border-color: var(--uccos-red);
    
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--uccos-red);
    --bs-btn-hover-border-color: var(--uccos-red);
    
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--uccos-red);
    --bs-btn-active-border-color: var(--uccos-red);
    
    --bs-btn-disabled-color: var(--uccos-red);
    --bs-btn-disabled-border-color: var(--uccos-red);
}