/* 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. */

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #fff;
    font-family: arial, sans-serif;
}

*, ::after, ::before {
    box-sizing: border-box;
}
/*the top navigation -------------------------------------------------------------------------------------- */
.topnav {
    overflow: hidden;
    padding-left: 15px;
    background-color: skyblue;
}
    /* Style the links inside the navigation bar */
    .topnav a {
        float: left;
        display: block;
        color: black;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
    }
    /* Style the button inside the navigation bar to look like a link */
    .topnav form {
        display: inline;
        margin: 0;
    }

    .topnav button {
        background: none;
        border: none;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
        cursor: pointer;
    }
/* Add an active class to highlight the current page */
.active {
    background-color: #4CAF50;
    color: white;
}
/* style for main title */
.topnav .title {
    font-size: 18px;
    font-weight: bold;
}
/*div to move links to right*/
.topnav .right-links {
    float: right;
    padding-right: 15px;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown {
    float: left;
    overflow: hidden;
}
    /* Style the dropdown button to fit inside the topnav */
    .dropdown .dropbtn {
        font-size: 17px;
        border: none;
        outline: none;
        background-color: inherit;
        font-family: inherit;
        margin: 0;
    }
/* Style the dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: lightskyblue;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 9999;
}
    /* Style the links inside the dropdown */
    .dropdown-content a {
        float: none;
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
        white-space: nowrap;
    }
/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
    background-color: deepskyblue;
    color: white;
}

.right-links button:hover {
    background-color: deepskyblue;
    color: white;
}
/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
    background-color: deepskyblue;
    color: black;
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
    display: block;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 800px) {
    .topnav a:not(:first-child), .topnav .dropdown .dropbtn {
        display: none;
    }

    .topnav div.right-links {
        display: none;
    }

    .topnav a.icon {
        float: right;
        display: block;
    }
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 800px) {
    .topnav.responsive {
        position: relative;
    }

        .topnav.responsive a.icon {
            position: absolute;
            right: 0;
            top: 0;
        }

        .topnav.responsive a, .topnav.responsive div.right-links {
            float: none;
            display: block;
            text-align: left;
        }

        .topnav.responsive .dropdown {
            float: none;
        }

        .topnav.responsive .dropdown-content {
            position: relative;
        }

        .topnav.responsive .dropdown .dropbtn {
            display: block;
            width: 100%;
            text-align: left;
        }
}
/*end top navigation -------------------------------------------------------------------------------------- */
.main-container {
    padding: 2em;
    position: relative;
    min-height: 85%;
}

.masthead {
    margin: -2em;
    text-align: center;
    color: darkslategrey;
    height: 100%;
    /*background-image:url("../Images/Commons.jpg");
   
    background-size: cover;*/ /* <------ */
    /*background-repeat: no-repeat;
    background-position: center center;*/
}

    .masthead h1 {
        font-size: 2.5rem;
    }

    .masthead h2 {
        font-size: 1rem;
    }

    .masthead::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("../Images/Commons.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        /* filter: grayscale(100%);*/
    }

.masthead-inside {
    /* This will make it stack on top of the ::before */
    position: relative;
    color: white;
}

@media (min-width: 768px) {
    .masthead h1 {
        font-size: 4rem;
    }
}

@media (min-width: 992px) {
    .masthead h1 {
        font-size: 6.5rem;
        letter-spacing: 0.8rem;
    }

    .masthead h2 {
        font-size: 1.25rem;
    }
}
/*---------------------------------------------------- end masthead-------------------------------------------------*/

@media print {
    .noPrint {
        display: none;
    }

    .table th, .table td {
        padding: 1px;
    }
}

/* Sticky table headers styles
-------------------------------------------------- */

.sticky th {
    position: sticky;
    top: 0;
    background-color: #eee;
}

    .sticky th::after {
        content: '';
        width: 100%;
        height: 1px;
        position: absolute;
        bottom: 0;
        left: 0;
        background: black;
    }

/*----------------------------for two row sticky header -- must use javascript to set second row top */
thead tr.first th, thead tr.first td {
    position: sticky;
    position: -webkit-sticky; /* Safari */
    top: 0;
    background: #eee;
}

thead tr.second th, thead tr.second td {
    position: sticky;
    position: -webkit-sticky; /* Safari */
    background: #eee;
}

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

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

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

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

.bottom-shadow {
    -webkit-box-shadow: 0 10px 5px #888888;
    -moz-box-shadow: 0 10px 5px #888888;
    box-shadow: 0 10px 5px #888888;
}

.top-shadow {
    -webkit-box-shadow: 0 -10px 5px #888888;
    -moz-box-shadow: 0 -10px 5px #888888;
    box-shadow: 0 -10px 5px #888888;
}

.footer {
    padding: 8px;
    text-align: center;
}

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

.moreDots, .lessDots {
    cursor: pointer;
    font-size: small;
    color: grey;
}

.moreText {
    display: none;
}

.float-right {
    float: right !important;
}

.main-container::after {
    content: "";
    display: block;
    clear: both;
}

.table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 8px;
}

    .table td, .table th {
        padding: .75rem;
        border-top: 1px solid #dee2e6;
    }

    .table th {
        text-align: left;
    }

.table-hover tbody tr:hover {
    color: #212529;
    background-color: rgba(0,0,0,.075);
}

.table-bordered {
    border: 1px solid #dee2e6;
}

    .table-bordered td, .table-bordered th {
        border: 1px solid #dee2e6;
    }

.table-sm td, .table-sm th {
    font-size: .8em;
    padding: .2rem;
}

.header-main {
    background-color: lightskyblue;
}

    .header-main td, .header-main th {
        font-weight: bold;
        font-size: .9em;
        padding: .3em;
    }

.header {
    background-color: lightcyan;
}

    .header td {
        font-weight: bold;
        white-space: nowrap;
    }

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
.col-xl-auto {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 1200px) {
    .col-xl {
        max-width: 100%;
    }

    .col-xl-auto {
        max-width: 100%;
    }

    .col-xl-1 {
        max-width: 8.333333%;
    }

    .col-xl-2 {
        max-width: 16.666667%;
    }

    .col-xl-3 {
        max-width: 25%;
    }

    .col-xl-4 {
        max-width: 33.333333%;
    }

    .col-xl-5 {
        max-width: 41.666667%;
    }

    .col-xl-6 {
        max-width: 50%;
    }

    .col-xl-7 {
        max-width: 58.333333%;
    }

    .col-xl-8 {
        max-width: 66.666667%;
    }

    .col-xl-9 {
        max-width: 75%;
    }

    .col-xl-10 {
        max-width: 83.333333%;
    }

    .col-xl-11 {
        max-width: 91.666667%;
    }

    .col-xl-12 {
        max-width: 100%;
    }
}

.mx-xl-auto {
    margin: auto;
}

.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .form-control:focus {
        color: #495057;
        background-color: #fff;
        border-color: #80bdff;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

input:read-only {
    background-color: whitesmoke;
}

.inline {
    display: inline-block;
}

.table-sm .form-control {
    height: calc(1.2em + 0.5rem + 1px);
    padding: 0.2rem 0.5rem;
    font-size: .75rem;
    font-weight: 300;
    line-height: 1.2;
}

.table-alignment {
    text-align: right;
    vertical-align: top;
    padding: 4px;
}


.form-group {
    margin-bottom: 1rem;
}

.align-right {
    text-align: right;
}

.align-center {
    text-align: center;
}

label {
    display: inline-block;
    margin-bottom: .5rem;
}

.btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn-sm {
    font-weight: 300;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: .7rem;
    line-height: .9;
    border-radius: .2rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2 !important;
    border-color: #1861ac;
}

.btn-outline-primary {
    color: #007bff;
    border-color: #007bff;
}

.btn-warning {
    color: #212529;
    background-color: #ffc107;
    border-color: #ffc107;
}

.btn-secondary {
    color: #fff;
    background-color: #6c757d !important;
    border-color: #6c757d;
}

.btn-danger {
    color: #fff;
    background-color: #dc3545 !important;
    border-color: #dc3545;
}

.card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.25rem;
}

    .card > hr {
        margin-right: 0;
        margin-left: 0;
    }

    .card > .list-group:first-child .list-group-item:first-child {
        border-top-left-radius: 0.25rem;
        border-top-right-radius: 0.25rem;
    }

    .card > .list-group:last-child .list-group-item:last-child {
        border-bottom-right-radius: 0.25rem;
        border-bottom-left-radius: 0.25rem;
    }

.card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.25rem;
}

.card-title {
    margin-bottom: 0.75rem;
}

.card-subtitle {
    margin-top: -0.375rem;
    margin-bottom: 0;
}

.card-text:last-child {
    margin-bottom: 0;
}

.card-link:hover {
    text-decoration: none;
}

.card-link + .card-link {
    margin-left: 1.25rem;
}

.card-header {
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

    .card-header:first-child {
        border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
    }

    .card-header + .list-group .list-group-item:first-child {
        border-top: 0;
    }

.card-footer {
    padding: 0.75rem 1.25rem;
    background-color: rgba(0, 0, 0, 0.03);
    border-top: 1px solid rgba(0, 0, 0, 0.125);
}

    .card-footer:last-child {
        border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
    }

.card-header-tabs {
    margin-right: -0.625rem;
    margin-bottom: -0.75rem;
    margin-left: -0.625rem;
    border-bottom: 0;
}

.card-header-pills {
    margin-right: -0.625rem;
    margin-left: -0.625rem;
}

.card-img-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1.25rem;
}

.card-img {
    width: 100%;
    border-radius: calc(0.25rem - 1px);
}

.card-img-top {
    width: 100%;
    border-top-left-radius: calc(0.25rem - 1px);
    border-top-right-radius: calc(0.25rem - 1px);
}

.card-img-bottom {
    width: 100%;
    border-bottom-right-radius: calc(0.25rem - 1px);
    border-bottom-left-radius: calc(0.25rem - 1px);
}

.card-deck {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
}

    .card-deck .card {
        margin-bottom: 15px;
    }

.text-danger {
    color: #dc3545 !important;
}

.bg-success {
    background-color: #28a745 !important;
}

a.bg-success:hover, a.bg-success:focus,
button.bg-success:hover,
button.bg-success:focus {
    background-color: #1e7e34 !important;
}

.bg-info {
    background-color: #17a2b8 !important;
}

a.bg-info:hover, a.bg-info:focus,
button.bg-info:hover,
button.bg-info:focus {
    background-color: #117a8b !important;
}

.bg-warning {
    background-color: #ffc107 !important;
}

a.bg-warning:hover, a.bg-warning:focus,
button.bg-warning:hover,
button.bg-warning:focus {
    background-color: #d39e00 !important;
}

.bg-danger {
    background-color: #dc3545 !important;
}

a.bg-danger:hover, a.bg-danger:focus,
button.bg-danger:hover,
button.bg-danger:focus {
    background-color: #bd2130 !important;
}

.p-1 {
    padding: 0.25rem !important;
}

.p-2 {
    padding: 0.50rem !important;
}

.p-3 {
    padding: 0.75rem !important;
}

.w-25 {
    width: 25% !important;
}

.w-50 {
    width: 50% !important;
}

.w-75 {
    width: 75% !important;
}

.w-100 {
    width: 100% !important;
}

.m-1 {
    margin: 0.25rem !important;
}

.m-2 {
    margin: 0.5rem !important;
}

.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}

.alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}

.rounded {
    border-radius: 0.25rem !important;
}

.triangle-down {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid #555;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}



/*-------------------- Report pages-----------------------------------------------------------------------*/
.page-portrait {
    position: relative;
    width: 7.4in;
    height: 9.9in;
    page-break-after: always;
    border: 1px solid white;
    margin: auto;
    overflow: hidden;
}

.page-landscape {
    position: relative;
    height: 7.4in;
    width: 9.9in;
    page-break-after: always;
    border: 1px solid GhostWhite;
    margin: auto;
    overflow: hidden;
}

.page-portrait-openLength {
    width: 7.4in;
    page-break-after: always;
    border: 1px solid white;
    margin: auto;
}

.last-page {
    page-break-after: avoid;
    border: none;
}

.report-footer {
    bottom: .1in;
    width: 98%;
    text-align: right;
    position: absolute;
    border: 1px solid white;
    font-size: small;
}

.full-width {
    width: 100%;
}

.pop-up {
    padding: 10px;
    display: none;
    position: absolute;
    top: 2in;
    left: 0;
    right: 0;
    width: 6.5in;
    z-index: 999;
    border: 1px solid black;
    border-radius: 5px;
    margin: 0 auto;
}