/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */
:root {
    --bs-primary: #3a77bc;
    --af-secondary: black;
    --bs-link-color: #3a77bc;
    --bs-link-color-rgb: 58, 119, 188;
    --bs-link-hover-color: #4a86c7;
    --bs-link-hover-color-rgb: 74, 134, 199;
} 

body {
    background-image: url(../tlo_AfirmaTEE.webp);
    background-size: contain;
    background-repeat: repeat;
    background-attachment: fixed;
}

#header {
    background: linear-gradient(37deg, rgba(81,182,235,1) 0%, rgba(237,130,214,1) 65%, rgba(196,102,189,1) 100%)
}

#wrapper {
    margin: 0 4vw;
    background: white;
}

.header-bottom {
    border-bottom: none;
}

@media (min-width: 768px) {
    .ratio-homeSlider {
        --bs-aspect-ratio: 42%;
    }
}

.footer {
    --footer-background-color: var(--bs-primary);
}

.header-bottom {
    padding: 0.7em 0;
}

#content-wrapper .page-header {
    display: none;
}

.breadcrumb__wrapper {
    visibility: hidden;
}

#top-menu > .current a {
    font-weight: bold;
    color: var(--bs-primary) !important;
}

#notifications {
    display: none;
}

.header-bottom a:not(.dropdown-item) {
    color: white !important;
}

.btn-primary {
    --bs-btn-bg: var(--af-secondary);
    --bs-btn-border-color: var(--af-secondary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-disabled-bg: var(--af-secondary);
    --bs-btn-disabled-border-color: var(--af-secondary);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

#Shape {
    fill: var(--bs-primary) !important;
}