﻿/* Move down content because we have a fixed navbar that is 50px tall */
body {
    /*font-family: 'Roboto', sans-serif;*/
    /*font-family: "Open Sans","Segoe UI",sans-serif;*/
    font-family: "Lato",sans-serif;
    margin: 0px;
    padding: 0;
    /* CSS HEX */
    --ultramarine-blue: #1164fbff;
    --cardinal: #c5283dff;
    --maximum-yellow-red: #ffc857ff;
    --maximum-yellow-red-hover: #ffd453;
    --caribbean-green: #03cea4ff;
    --cornflower-blue: #5c95ffff;
    --color-primary: #0D63BA;
    --color-secondary: #F5F5F5;
    /*background-color: var(--color-secondary);*/
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
}

/* Set widths on the form inputs since otherwise they're 100% wide */
/*input,
select,
textarea {
    max-width: 280px;
}*/


/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }

    .body-content {
        padding: 0;
    }
}

/* CSI */
.header {
    background-color: var(--color-primary) !important;
}

.footer {
    background-color: var(--color-secondary) !important;
    color: rgb(0 0 0 / 30%) !important;
}


.logo {
    height: 40px;
}

.bg-primary {
    background-color: var(--color-primary) !important;
}

.cursor-default {
    cursor: default;
}

.text-color-primary {
    /*color: #3cafe6 !important;*/
    color: var(--color-primary) !important;
}

.text-color-secondary {
    color: var(--ultramarine-blue) !important;
}

.nav-link {
    color: #1c74bb;
    font-weight: 500;
}

    .nav-link:hover, .nav-link:focus {
        /*background: #3cafe6;*/
        background: var(--ultramarine-blue);
        color: #fff !important;
        border-radius: .25rem;
    }

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    /*background: #3cafe6;*/
    background: var(--ultramarine-blue);
    color: #fff !important;
    border-radius: .25rem;
}

.btn-yellow {
    color: #fff;
    background-color: var(--maximum-yellow-red);
    border: var(--maximum-yellow-red);
}

    .btn-yellow:hover {
        color: #fff;
        background-color: var(--maximum-yellow-red-hover);
        border: var(--maximum-yellow-red-hover);
    }
