﻿/* 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. */
a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

main.container, footer div.container {
    background-color: #fff;
}

/* The white panel provides filler, if necessary, between the nav menu and the footer. */
body > div.whitepanel {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
    z-index: -1;
}

    body > div.whitepanel .container {
        padding: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
    }

/* Sticky footer styles
-------------------------------------------------- */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.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;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

body {
    /* Margin bottom by footer height */
    margin-bottom: 4em;
    background-color: #EEE;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 4em;
    line-height: 3em; /* Vertically center the text there */
    /* border-top: 1px solid #000; */
    margin-bottom: 1px; /* offset border so no scroll bar unless necessary */
}

    .footer div.container {
        border-top: 1px solid #000;
        height: 4em;
    }


/* Customizations for toaster messages */
.alert-heading {
    font-weight: bold;
}

.alert {
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
    font-size: 0.875rem;
    pointer-events: auto;
    opacity: 0.92;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    scrollbar-color: rgba(0,0,0,.2) rgba(0,0,0,.07);
}

    .alert::-webkit-scrollbar {
        width: 8px;
    }

    .alert::-webkit-scrollbar-track {
        background: rgba(0,0,0,.07);
    }

    .alert::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,.2);
        border-radius: 8px;
        border: 0px;
    }

    .alert > div.d-flex {
        border-bottom: 1px solid rgba(0,0,0,.15);
        padding-bottom: .25rem;
        margin-bottom: .5rem;
    }

    .alert > div.flex-fill {
        scrollbar-width: thin;
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }

    .alert .close.k-i-close {
        font-size: 1.25rem;
    }

/* Default bottom right */
.toaster-messages {
    position: fixed;
    padding: 1.25rem;
    width: 100%;
    bottom: 0px;
    right: 0px;
    pointer-events: none;
    z-index: 1051;
}

    .toaster-messages > div.row > div.alert {
        margin-left: auto;
    }

    .toaster-messages.top {
        bottom: auto;
        top: 0px;
    }

    .toaster-messages.left > div.row > div.alert {
        margin-left: initial;
    }

a.alertLocation:not(.bg-success):hover {
    background-color: rgba(0,0,0,.2);
}

.toaster-messages .alert {
    box-shadow: 0 0.4rem 1.25rem rgba(0,0,0,0.3);
}

.toast {
    max-width: inherit;
}

button.pin {
    font-size: 1.25rem;
    padding: 0;
    border: 0;
    background-color: transparent;
    opacity: .5;
    transition: opacity 0.15s ease-in-out;
    float: right;
}

    button.pin:hover, btn.pin:focus {
        opacity: 1;
    }

    button.pin.pinned {
        opacity: 1;
    }

        button.pin.pinned:hover, btn.pin.pinned:focus {
            opacity: .5;
        }

/* Fix custom labels (checkboxes) to have hand cursor in edge */
.custom-control-label {
    cursor: pointer;
}

input.custom-control-input:disabled + .custom-control-label {
    cursor: not-allowed;
}


hr {
    border: 3px solid #2F3976;
    border-radius: 3px;
    background-color: #2f3976;
}

/* Main site navigation bar stuff */
#mainNavbar ul.navbar-nav li.nav-item {
    margin-bottom: 3px;
    background-color: #B11019;
    border-radius: .45rem;
}

    #mainNavbar ul.navbar-nav li.nav-item div.dropdown-menu {
        background-color: #B11019;
        color: #fff;
    }

        #mainNavbar ul.navbar-nav li.nav-item div.dropdown-menu a {
            background: unset;
            color: #fff;
        }

            #mainNavbar ul.navbar-nav li.nav-item div.dropdown-menu a.active,
            #mainNavbar ul.navbar-nav li.nav-item div.dropdown-menu a:hover,
            #mainNavbar ul.navbar-nav li.nav-item div.dropdown-menu a:focus-within {
                background-color: #0000A0;
                color: #fff;
            }

    #mainNavbar ul.navbar-nav li.nav-item:hover, #mainNavbar ul.navbar-nav li.nav-item:focus-within, #mainNavbar ul.navbar-nav li.nav-item.dropdown.show a.dropdown-toggle {
        background-color: #0000A0;
    }

@media (max-width: 767px) {
    nav.navbar {
        background: #2F3976 linear-gradient(145deg, #2F3976, #111127);
    }

    #mainNavbar {
        background-color: #fff;
        padding: 5px;
    }
}

@media (min-width: 768px) {
    #mainNavbar ul.navbar-nav li.nav-item {
        margin-left: 4px;
        margin-bottom: 0px;
    }

    div.container.sticky-top {
        background: #fff;
    }

    #mainNavbar ul li.nav-item > a {
        height: 100%;
    }
}

div.sticky-top div.menushadow {
    background: linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.07), transparent);
    height: .5em;
    border-top: 2px solid #000;
    position: absolute;
}

/* Makes the mobile navbar on public site white instead of off-white */
.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-dark .navbar-toggler {
    border-color: rgba(255,255,255,1);
}

#mainNavbar li.nav-item a {
    color: #FFF;
}

    #mainNavbar li.nav-item a.dropdown-item.active {
        color: #fff;
        background: unset;
        background-color: #0000A0
    }

    #mainNavbar li.nav-item a.nav-link.active {
        background-color: #0000A0;
    }

    #mainNavbar li.nav-item a:hover {
        color: rgba(255,255,255,1);
    }

#mainNavbar ul.navbar-nav li.nav-item:first-child {
    margin-left: 0;
}

/* Branding Page Header Text */
.atatDescription {
    font-size: 1.75em;
    font-family: Georgia, Times, Times New Roman, serif
}

    .atatDescription hr {
        border: 3px solid #fff;
        border-radius: 3px;
        margin-top: 0px;
        margin-bottom: 0px;
    }

/* For button over header, eg, links to other main menu roots. */
header .bg-header a.btn {
    background-color: #3898FF;
    color: #000;
}

    header .bg-header a.btn:hover, header .bg-header .btn:focus {
        background-color: #80BDFF;
    }

.bg-header {
    background: #2F3976 linear-gradient(145deg, #2F3976, #111127);
    color: #fff;
}

main {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Dunno why, but in prod, this is ignored behind a supports rule? */
.sticky-top {
    position: sticky;
    top: 0;
    z-index: 1020;
}

div.partners > .row {
    padding-top: 1em;
}

.youtube-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

    .youtube-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

.k-grid table[role="grid"] tbody a.btn-primary {
    color: #fff;
}

/* Kendo icons should inherit height from container. Fixes close button on modals.*/
.k-icon {
    font-size: inherit;
}

.k-GridScrollContainer.k-grid {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    border-width: 0;
    border-radius: 0;
}

tr.deleting > td, .card.deleting, .deleting:not(tr), tr.deleting + tr.k-detail-row > td {
    background-color: rgba(255,0,0,.1);
}

.card.deleting, .deleting:not(tr) {
    border-color: rgba(255, 0, 0, 0.5);
}

hr.unstyled {
    all: unset;
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
    border-color: rgba(0, 0, 0, 0.125)
}