/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

/* Correctly targetting css elements requires a bit of knowledge
    Basically you just go for the .class-type you want to style but if you are trying to
    target a class only if it is inside another class then you need to use .class-type .nested class
    as shown here : https://stackoverflow.com/questions/8965063/target-a-css-class-inside-another-css-class
*/

/* ------------------------- PAGE ------------------------- */

/*This makes the wesbite use the font we want but it should be downloaded to use it offline*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

html, body {
    height: 100%;
    width: 100%;
    font-family: 'Open Sans', sans-serif;
    color: #222;
    font-size: 14px;
}

/* ------------------------- NAVBAR ------------------------- */

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

.nav-link {
    font-size: 1.2em !important;
}

.navbar-text {
    font-size: 1.2em !important;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

/* XXL navbar*/
@media (max-width: 1599.98px) {
    .navbar-expand-xxl > .container,
    .navbar-expand-xxl > .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (min-width: 1600px) {
    .navbar-expand-xxl {
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }

        .navbar-expand-xxl .navbar-nav {
            -ms-flex-direction: row;
            flex-direction: row;
        }

            .navbar-expand-xxl .navbar-nav .dropdown-menu {
                position: absolute;
            }

            .navbar-expand-xxl .navbar-nav .nav-link {
                padding-right: 0.5rem;
                padding-left: 0.5rem;
            }

        .navbar-expand-xxl > .container,
        .navbar-expand-xxl > .container-fluid {
            -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
        }

        .navbar-expand-xxl .navbar-collapse {
            display: -ms-flexbox !important;
            display: flex !important;
            -ms-flex-preferred-size: auto;
            flex-basis: auto;
        }

        .navbar-expand-xxl .navbar-toggler {
            display: none;
        }
}



/* ------------------------- BUTTONS ------------------------- */
.btn-primary {
    background-color: #283E51;
    border: 1px solid #283E51;
}

    .btn-primary:hover {
        background-color: #4b79a1;
        border: 1px solid #4b79a1;
    }

.btn-outline-primary {
    border: 1px solid #283E51;
}

    .btn-outline-primary:hover {
        background-color: #4b79a1;
        border: 1px solid #4b79a1;
    }

/* ------------------------- PILLS ------------------------- */

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

/* ------------------------- FOOTER ------------------------- */


.Site {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.Site-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.scrollable-content {
    flex: 1 1 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.main-content {
    flex: 1 1 0;
    padding-bottom: 20px;
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

footer {
    width: 100%;
    background-color: #3f3f3f;
    color: #d5d5d5;
    padding-top: 1rem;
}

/* ------------------------- CHECKBOX ------------------------- */

.big-checkbox {
    width: 30px;
    height: 30px;
}

.medium-checkbox {
    width: 20px;
    height: 20px;
}

/* ------------------------- SCROLLABLE ELEMENTS ------------------------- */

.scrollableElement {
    border-bottom: 1px solid;
    border-color: rgba(0, 0, 0, 0.1);
    height: 200px;
    overflow-y: scroll; /* Add the ability to scroll */
}

    /* Hide scrollbar for Chrome, Safari and Opera */
    .scrollableElement::-webkit-scrollbar {
        display: none;
    }

/* Hide scrollbar for IE and Edge */
.scrollableElement {
    -ms-overflow-style: none;
}

.scrollableParam {
    max-height: 200px;
    overflow-y: scroll; /* Add the ability to scroll */
}

    /* Hide scrollbar for Chrome, Safari and Opera */
    .scrollableParam::-webkit-scrollbar {
        display: none;
    }

/* Hide scrollbar for IE and Edge */
.scrollableParam {
    -ms-overflow-style: none;
}

.scrollableMenu {
    max-height: 25vh;
    overflow-y: scroll; /* Add the ability to scroll */
}

    /* Hide scrollbar for Chrome, Safari and Opera */
    .scrollableMenu::-webkit-scrollbar {
        display: none;
    }

/* Hide scrollbar for IE and Edge */
.scrollableMenu {
    -ms-overflow-style: none;
}

/* ------------------------- EMERGENCY WARNING FLASH ------------------------- */

@keyframes redflash {
    to {
        background-color: #dc3545;
    }
}

.red {
    animation: redflash 0.2s 2 alternate ease-out;
}

/* ------------------------- INLINE TEXT ------------------------- */

.inlineText {
    vertical-align: middle;
    display: inline-block;
    margin: 5px 0;
}

/* ------------------------- FULLSCREEN ------------------------- */

.DAfullScreen {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: 100;
    background-color: white;
    -moz-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -ms-user-select: none;
    user-select: none;
    display: flex;
    align-items: stretch;
    flex-direction: column;
}




/* ------------------------- Utility ------------------------------ */

.display-only-phone {
    display: contents;
}
@media (min-width: 576px) {
    .display-only-phone {
        display: none;
    }
}

.display-only-desktop {
    display: contents;
}
@media (max-width: 576px) {
    .display-only-desktop {
        display: none;
    }
}

@media (min-width: 1600px) {
    .d-xxl-inline-flex {
        display: -ms-inline-flexbox !important;
        display: inline-flex !important;
    }
}