@font-face {
    font-family: 'Super Clarendon Regular';
    src: url('/Assets/Superclarendon Regular.ttf') format('truetype');
}

@font-face {
    font-family: "Proxima Nova";
    src: url('/Assets/Proxima Nova Font.otf') format('opentype')
}

@font-face {
    font-family: "Helvetica Condensed";
    src: url('/Assets/Helvetica Condensed.ttf') format('truetype');
}

:root {
    --NLGreen: #76bd22;
    --NLGray: #414042;
    --NLBlack: #000000;
    --NLPurple: #611885;
    --NLBlue: #00115f;
    --NLTeal: #79cdb7;
    --NLBeige: #bfbb93;
    --NLBlueGray: #657380;
    --PageTopPadding: 130px;
    --AlertHeight: 44px;
}

body {
    margin-top: calc( var(--PageTopPadding) + var(--AlertHeight));
    margin-bottom: 20px;
    font-family: 'Proxima Nova', sans-serif;
}

@media (min-width: 1400px) {
    .container {
        max-width: 1500px;
    }
}

pre {
    background-color: #f5f5f5;
    padding: 10px 30px;
    white-space: pre-wrap;
}

.login {
    color: white;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 100%;
    height: 100%;
    align-items: center;
    margin: 0 10%;
}

.login-container {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.login-section {
    max-width: 500px;
}

    .login-section h1, .login-section h2, .login-section h3, .login-section h4, .login-section h5, .login-section h6 {
        color: white !important;
    }

.btn-nol-login {
    background-color: var(--NLGray);
    color: white;
}

.login-background {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100vh;
    background-image: url('/Images/nol-login-background.jpg');
}

.linebreak-text {
    white-space: pre-line;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Super Clarendon Regular", serif;
    color: var(--NLBlue);
}

.page-banner {
    background-image: url("/Images/nol-page-banner.png");
    background-size: cover;
    min-height: 136px;
}

    .page-banner h1 {
        padding-top: 50px;
        margin-top: 0px;
    }

a, .nav-link {
    color: var(--NLBlue);
}

    a:hover, .nav-link:hover {
        /*color: #007f00;*/
        color: var(--NLPurple);
    }

td a {
    text-decoration: none;
}

.ticketLink:visited {
    color: var(--NLPurple);
}
/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

thead {
    color: var(--NLBlue);
}

th {
    text-align: center;
}

tbody {
    text-align: center;
}

.fa {
    font-size: 12px;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

    input.login-input {
        max-width: 100%;
    }

/* Map Styling */

.map {
    min-height: 150px;
    min-width: 250px
}

.loader:after {
    position: absolute;
    box-sizing: border-box;
    content: "";
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 8px solid var(--NLGreen);
    border-top-color: var(--NLTeal);
    margin-left: -30px;
    width: 60px;
    margin-top: -20px;
    height: 60px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#legendContainer {
    border-width: 4px;
    border-color: #fafafa;
    border-radius: 3px;
    border-style: solid;
    display: grid;
    padding: 20px;
    grid-template-columns: repeat(10, 10%);
    grid-row-gap: 10px;
}

.legendItem {
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    text-align: center;
}

.legendColorBox {
    height: 25px;
    width: 25px;
    border-radius: 5px;
}

.legendLabel {
    min-width: 70px;
}


.ol-overlaycontainer-stopevent {
    display: none
}

.checkbox {
    margin-left: 20px;
}
/* Navbar and Alert Styling */
.navbar {
    background-color: white;
    border-bottom: 2px solid var(--NLGreen);
}

    .navbar .navbar-nav > li > a {
        color: var(--NLBlue);
    }

        .navbar .navbar-nav > li > a:active {
            color: var(--NLPurple);
        }

.navbar-brand {
    padding: 10px;
}

    .navbar-brand img {
        max-height: 97px;
    }

.nav-item {
    margin-left: 20px;
    margin-right: 20px;
}

.dropdown-menu > li > a:hover {
    color: white;
    background-color: var(--NLPurple);
}

#zohoMetrics {
    width: 100%;
}

    #zohoMetrics > iframe {
        width: 100%;
    }

.profile-picture {
    height: 25px;
    width: 25px;
    overflow: hidden;
    image-rendering: optimizeSpeed;
}
/* Photo Grid Styling */
.photo-grid {
    display: grid;
    grid-template-columns: 150px 150px 150px 150px;
    gap: 20px;
    grid-auto-rows: 150px;
}

.photo-grid-item {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    overflow: hidden;
    justify-items: center;
    align-items: center;
}

.photo-grid-checkbox {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 4;
}

.photo-grid-photo {
    width: 100%;
    height: 100%;
    overflow: hidden;
    object-fit: cover;
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 4;
}

    .photo-grid-photo img {
        min-width: 100%;
        min-height: 100%;
    }

/* photo carousel overlay */
#carousel-overlay {
    overflow-y: scroll;
    padding: 0;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #22222299;
    backdrop-filter: blur(12px);
    width: 100%;
    height: 100%;
    z-index: 1031; /*bootstrap sets the header at z-index 1030, and I want this on top*/
}

#carousel-overlay-grid {
    display: grid;
    grid-template-columns: 20% 60% 20%;
    grid-template-rows: 100px 1fr 15%;
}

#carousel-close {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 3;
    grid-column-end: 4;
    font-size: 30px;
    color: white;
    align-self: end;
    justify-self: center;
}

#carousel-container {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    width: 100%;
    height: 100%;
}

.carousel-inner {
    background-color: #00000000;
}

    .carousel-inner .carousel-item img {
        height: 100%;
        max-width: 500px;
    }

.img-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

.carousel-caption {
    font-size: 2rem;
}

#carousel-photo-grid {
    display: grid;
    grid-template-columns: repeat(7, 14.28%);
    width: fit-content;
    margin: auto;
}

    #carousel-photo-grid .carousel-photo-grid-photo {
        height: 100%;
    }

/* Login page styling */
.jumbotron {
    margin-top: 30px;
}

.btn-primary {
    background-color: var(--NLPurple);
    max-width: fit-content;
    padding: 5px 25px;
}

    .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
        background-color: var(--NLBlue) !important;
    }

.ticket-download {
    font-size: 13px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 15px;
    margin-bottom: 15px;
}
/* Closed ticket date range picker styling */
.ranges li {
    color: #010066;
}

    .ranges li.active, .ranges li:hover, .daterangepicker td.active {
        background-color: var(--NLBlue);
        border: transparent;
    }

        .daterangepicker td.active:hover {
            background-color: var(--NLBlue);
        }

.ticket-selected {
    float: left
}

.tickettext-entry {
    width: 100%;
    max-width: 100%;
    height: 400px !important;
    font-family: monospace !important;
}

.overdueTicketRow, .overdueTicketRow td, .overdueTicketRow a {
    /*background-color: #ffcccb !important;*/
    background-color: var(--NLTeal) !important;
}

.stickyFooter {
    left: 5px !important;
    bottom: 10px !important;
}

.assigned-region-grid {
    display: grid;
    grid-template-columns: repeat(7, 14.3%);
}

/* Popover Styling */
.popover.top {
    min-width: max-content;
    max-height: 30rem;
    overflow-y: scroll;
}

.popover-body {
    max-height: 300px;
    overflow-y: scroll;
    white-space: pre-line;
}


/* styling for kendo grid table _TicketListGridTable.cshtml */
.k-column-title {
    white-space: break-spaces;
}

.k-filtercell > span {
    flex-flow: row wrap;
    justify-content: end;
}

.k-button.k-selected:has(.k-button-text)::before {
    background-color: var(--NLGreen);
    opacity: 1;
    z-index: -1;
}

.k-pager-numbers .k-button.k-selected .k-button-text {
    color: white;
}

.k-pager-numbers .k-button .k-button-text {
    color: black;
}

.table-icon-container {
    text-align: center;
}

#map {
    position: relative;
}

.map-button {
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 1000;
    background-color: white;
    border: 1px solid #ccc;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

    .map-button:hover {
        background-color: #f0f0f0;
    }

.fixed-bottom-right {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1050;
    background-color: #f8d7da;
    padding: 10px 16px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    border: 1px solid #f5c6cb;
    border-radius: 5px;
    opacity: 0.95;
    white-space: nowrap;
    width: fit-content;
    max-width: none;
}

.fixed-bottom-right th {
    font-weight: bold;
    text-align: left;
}

    .fixed-bottom-right td {
        text-align: left;
        padding-left:10px;
    }