/*
    Official Chicago Asset Colors: https://design.chicago.gov/all
*/

/* Font Declarations */
@font-face {
    font-family: "Big Shoulders Text";
    src: url("../Fonts/BigShouldersText-VariableFont_wght.ttf");
    font-weight: 1 999;
}

@font-face {
    font-family: "Lora";
    src: url("../Fonts/Lora-Regular.ttf");
    font-weight: 301 499;
}

@font-face {
    font-family: "Lora Bold";
    src: url("../Fonts/Lora-Bold.ttf");
    font-weight: 500 699;
}

@font-face {
    font-family: "Roboto";
    src: url("../Fonts/Roboto-Regular.ttf");
    font-weight: 301 499;
}

@font-face {
    font-family: "Roboto Black";
    src: url("../Fonts/Roboto-Black.ttf");
    font-weight: 700 999;
}

@font-face {
    font-family: "Roboto Bold";
    src: url("../Fonts/Roboto-Bold.ttf");
    font-weight: 500 699;
}

@font-face {
    font-family: "Roboto Light";
    src: url("../Fonts/Roboto-Light.ttf");
    font-weight: 1 300;
}

/* Global Styles */
body {
    font-family: "Lora", serif;
    background-color: #ffffff;
}

a {
    text-decoration: none;
}

    a:hover {
        color: #03265a;
    }

/* Component Styles */

/* Header */
header {
    background-color: #ffffff;
    width: 100%;
    padding: 1rem;
}

    header h1 {
        color: #131831;
        font-weight: normal;
        text-align: right;
        padding-top: 0.5rem;
        padding-right: 0rem;
    }

.header-bar {
}

.header-logo {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

    .header-logo .bi-chevron-compact-right {
        margin-top: 0.5rem;
        font-size: 2rem;
    }

.header-logo-link {
    display: flex;
    align-items: center;
}

.header-logo-link-text {
    font-size: 2.5rem;
    font-weight: 700;
    font-family: "Big Shoulders Text", sans-serif;
    font-variant-ligatures: discretionary-ligatures;
    text-transform: uppercase;
}

.header-page-title {
    padding-top: 1rem;
}

.header-logo-link-img {
    max-width: 6rem;
    max-height: 6rem;
    margin-right: 0.75rem;
    object-fit: contain;
}

.header-logo-IPL-link-img {
    height: 3.5rem;
    width: 17.5rem;
    margin-right: 0.75rem;
    object-fit: contain;
}

/* Navigation */
.container-fluid.navbar-container {
    background-color: #005b99;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 5px 5px;
    position: relative;
    margin-bottom: 0 !important;
}

    .container-fluid.navbar-container + * {
        margin-top: 2rem !important;
    }

nav.navbar {
    font-family: 'Roboto', sans-serif;
    margin-bottom: 0;
}

.navbar-dark .navbar-nav .nav-link {
    color: #ffffff;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
}

    .navbar-dark .navbar-nav .nav-link:hover {
        color: #d9d9d9;
    }

.navbar-nav {
    display: flex;
    align-items: center;
}

.nav-item {
    padding-right: 0.5rem;
    display: flex;
    align-items: center;
}

    .nav-item ul.dropdown-menu {
        background-color: #005b99;
        color: #d9d9d9;
        margin-top: 0;
        border-top: none;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

        .nav-item ul.dropdown-menu li a {
            color: #ffffff;
            padding: 0.5rem 1rem;
        }

            .nav-item ul.dropdown-menu li a:hover {
                color: #005b99;
            }

.nav-tabs button.nav-link.active {
    background-color: #DCE4EF;
    border-bottom: #DCE4EF;
}

.nav-tabs .nav-link.active {
    background-color: #ffffff;
}

.dashboard-nav-icon-link {
    color: #ffffff;
}

    .dashboard-nav-icon-link:hover {
        color: #d9d9d9;
    }

/* Footer */
footer {
    background-color: #d9d9d9;
    color: #000000;
    font-size: 0.8rem;
    display: block;
}

/* Cards */
.card {
    background-color: #ffffff;
    box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 50%);
}

    .card.dashboard-item {
        height: 100%;
    }

        .card.dashboard-item:hover {
            box-shadow: 0px 0px 1px 1px rgb(0 0 0 / 25%);
        }

        .card.dashboard-item .card-header {
            background-color: #DCE4EF;
        }

    .card.permit-type {
        height: 100%;
    }

        .card.permit-type:hover {
            box-shadow: 0px 0px 1px 1px rgb(0 0 0 / 25%);
        }

        .card.permit-type .card-header {
            background-color: #DCE4EF;
        }

            .card.permit-type .card-header h3 {
                margin-top: 0.5rem;
            }

.card-body {
    background-color: #ffffff;
    flex-direction: column;
    text-align: left;
}

.card-header {
    background-color: #DCE4EF;
    color: #000000;
    display: flex;
    justify-content: start;
    padding: 1rem .75rem 0.5rem .75rem;
    font-family: "Roboto", sans-serif;
}

    .card-header img {
        object-fit: contain;
    }

.card-small-text {
    font-size: 0.85rem;
}

.card-title {
    margin-bottom: 1rem;
    line-height: 1.2;
}

.card-button-full-width {
    width: 100%;
    padding: 0.5rem;
}

.hero-card {
    background-color: rgba(0,0,0,0.3);
    color: #ffffff;
    margin-bottom: 0;
    position: relative;
}

    .hero-card .card-body {
        background-color: inherit;
        font-family: "Big Shoulders Text", sans-serif;
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .hero-card h4 {
        font-size: clamp(2rem, 4vw, 3rem) !important;
        line-height: 1.2;
        margin: 0;
    }

    .hero-card .card-title {
        font-size: 2rem;
        line-height: 1.2;
        margin-bottom: 0;
    }

.permit-card {
    background-color: #eff3f6;
}

.profile-home .card {
    border: 1px solid rgba(0, 0, 0, 0.125);
    background-color: white;
}

    .profile-home .card .card-header {
        background-color: #0092D1;
        color: white;
    }

.sign-in-card .card-body {
    background-color: #005b99;
}

.sign-in-card a {
    color: #ffffff;
}

    .sign-in-card a:hover {
        color: #d9d9d9;
    }

.sign-in-card h5 {
    color: #ffffff;
}

.sign-in-card .required-asterisk {
    color: #ffffff;
}

.button-card-hover:hover {
    box-shadow: 0px 0px 1px 1px rgb(0 0 0 / 25%);
}

/* Alerts */
.alert.alert-error,
.alert.alert-danger {
    border-left: solid 1rem #cd2026 !important;
}

.alert.alert-info {
    border-left: solid 1rem #0075bb !important;
}

.alert.alert-success {
    border-left: solid 1rem #2e8540 !important;
}

.alert.alert-warning {
    border-left: solid 1rem #fdb81e !important;
}

.alert-error,
.alert-danger {
    background-color: #f9dede !important;
    border: inherit !important;
    border-color: #f9dede !important;
    border-radius: 0 !important;
    color: #000000 !important;
}

.alert-info {
    background-color: #a4d5ee !important;
    border: inherit !important;
    border-color: #a4d5ee !important;
    border-radius: 0 !important;
    color: #000000 !important;
}

.alert-info-text-color {
    color: #000000 !important;
}

.alert-success {
    background-color: #e7f4e4 !important;
    border: inherit !important;
    border-color: #e7f4e4 !important;
    border-radius: 0 !important;
    color: #000000 !important;
}

.alert-warning {
    background-color: #fff1d2 !important;
    border: inherit !important;
    border-color: #fff1d2 !important;
    border-radius: 0 !important;
    color: #000000 !important;
}

.global-alert-container {
    padding: 0rem;
}

    .global-alert-container .alert {
        margin: 0rem;
        padding: 1.5rem;
        text-align: center;
        border-bottom: solid 2px;
        border-radius: 0;
    }

/* Forms */
.form-control {
    line-height: 2.2rem;
}

    .form-control.error {
        border: 1px solid red;
        color: inherit;
    }

.form-floating > label {
    left: auto;
}

.form-floating .password-toggle {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.form-select {
    line-height: 2.2rem;
    text-align: left;
}

    .form-select.error {
        border: 1px solid red;
        color: inherit;
    }

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

input[type="password"]::-webkit-credentials-auto-fill-button,
input[type="password"]::-webkit-input-decoration,
input[type="password"]::-webkit-input-password-reveal {
    display: none !important;
}

.input-group-text-left-no-radius {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group-text-right-no-radius {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-validation-error {
    border: 1px solid red;
}

    .input-validation-error:focus {
        border: 1px solid red;
        box-shadow: 0 0 0 0.25rem rgba(255, 0, 0, 0.25);
    }

.input-validation-error-case {
    border-color: #b94a48;
    color: #b94a48;
}

.label-validation-error {
    color: #b94a48;
}

.logon-password,
.signIn-password {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

    .logon-password button,
    .signIn-password button {
        background: transparent;
        border: none;
        color: #bdbfbf;
        padding: 0.5rem;
        cursor: pointer;
        outline: none !important;
    }

        .logon-password button:focus,
        .signIn-password button:focus {
            outline: none !important;
            box-shadow: none !important;
        }

.password-toggle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #bdbfbf;
    padding: 0.5rem;
    cursor: pointer;
    outline: none !important;
}

    .password-toggle:focus {
        outline: none !important;
        box-shadow: none !important;
    }

.date-control {
    background: #ffffff !important;
    cursor: pointer;
}

.error {
    color: red;
}

.field-validation-error {
    color: red;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid red;
}

.validation-summary-valid {
    display: none;
}

.customErrorAddressInput {
    border: 1px solid red;
}

.subCapacityCheckbox {
    padding: 3px 5px 3px 5px;
    display: inline-block;
}

/* Other Components */
.hero-container {
    background-image: url("/Resources/Images/chicago-skyline-hero-image.jpg");
    background-size: cover;
    padding: 2.5rem;
    max-height: 16rem;
    min-height: 16rem;
    background-position-y: center;
    position: relative;
    box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.42), 0 3px 20px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
    margin: 0;
}

.accordion-header.document-header {
    display: flex;
    margin: 0.25rem 0.25rem 0.25rem 1rem;
}

.accordion-card-body {
    border: 1px solid rgba(0,0,0,0.125);
}



.accordion-toggle {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
}


    .accordion-toggle.collapsed::after {
        content: ""; /* Required for pseudo-elements */
        display: block; /* Allows setting width and height */
        width: 1.5em;
        height: 1.5em;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%626668'%3e%3cpath fill-rule='evenodd' d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4'/%3e%3c/svg%3e");
        background-repeat: no-repeat; /* Prevents tiling */
        position: absolute; /* Positions relative to .my-element */
        right: 0.625em;
        top: 50%;
        transform: translateY(-50%); /* Vertically centers the icon */
    }
    .accordion-toggle:not(.collapsed)::after {
        content: ""; /* Required for pseudo-elements */
        display: block; /* Allows setting width and height */
        width: 1.5em;
        height: 1.5em;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%626668'%3E%3Cpath fill-rule='evenodd' d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8'/%3E%3C/svg%3E");
        background-size: contain; /* Scales the image to fit */
        background-size: contain; /* Scales the image to fit */
        background-repeat: no-repeat; /* Prevents tiling */
        position: absolute;
        right: 0.625em;
        top: 50%;
        transform: translateY(-50%); /* Vertically centers the icon */
    }

.card-accordion-header {
    font-family: Roboto,serif;
}

.card-accordion-header {
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    background-color: rgba(0,0,0,0.03);
    border-bottom: 1px solid rgba(0,0,0,0.125);
}
/*.accordion > .card > .card-accordion-header {
    border-radius: 0;
    margin-bottom: -1px;
}
.card-accordion-header:first-child {
    border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
}
*/


.advanced-search-button {
    bottom: 13px;
    left: 20%;
    z-index: 1080;
}

.list-group-item-link {
    position: relative;
    display: block;
    padding: 0.5rem 1rem;
    color: #0d6efd;
    text-decoration: none;
    background-color: #ffffff;
    border-bottom: 1px solid rgba(0,0,0,.125);
}

    .list-group-item-link:hover {
        color: #005580;
    }

.return-to-top {
    position: fixed;
    bottom: 20px;
    right: 3%;
    z-index: 1080;
}

.table.dataTable {
    border-bottom: none !important;
    border-collapse: collapse;
    border-color: #dee2e6 !important;
}

.table-no-top-border {
    border-top: none !important;
}

.table-responsive {
    width: 100%;
}

.toolbar {
    padding-top: 1rem;
}

.trust-seal {
    line-height: 1.5;
    background-color: #f1f1f1;
    padding-bottom: 5px;
    padding-top: 5px;
    color: #808080;
}

    .trust-seal h6 {
        color: #000000;
    }

.trust-seal-building {
    color: #2e7dc3;
}

.trust-seal-content {
    font-size: 0.8rem;
}

.trust-seal-link {
    font-size: 0.8rem;
}

.trust-seal-link-container .bi-asterisk {
    font-size: 0.5rem;
    vertical-align: text-top;
}

.trust-seal-link-container .bi-chevron-compact-down {
    margin-left: 0.25rem;
}

.trust-seal-lock {
    color: #719f2a;
}

.trust-seal-star {
    width: 0.7rem;
    opacity: 0.33;
    vertical-align: middle;
    border-style: none;
}

img.captcha-img {
    border-radius: 4px;
}

img.captcha-reload-img {
    height: 25px;
    filter: invert(100%) sepia(4%) saturate(941%) hue-rotate(169deg) brightness(92%) contrast(84%);
}

    img.captcha-reload-img > b {
        color: #53595f;
    }

.chi-star-img {
    max-width: 4.5rem;
    max-height: 4.5rem;
    margin-right: 0.75rem;
    object-fit: contain;
}

    .chi-star-img + h5 {
        align-self: flex-end;
    }

.checkbox-icon-stack {
    text-align: center;
}

.icon-stack {
    text-align: center;
    min-width: 2.2rem;
}

.sig-canvas {
    cursor: crosshair;
    border: 1px solid #00000060;
    border-radius: 5px;
}

.border-bottom-faded {
    border-bottom: 1px solid #0000003d;
}

.critical-facility-text {
    color: #b94a48 !important;
}

.goog-te-gadget {
    display: inline-block;
}

.goog-te-gadget-icon {
    display: none;
}

.grab {
    cursor: grab;
}

.h-margin-block-start {
    margin-block-start: 1em;
}

.HasThorium-True {
    background-color: #f8d7da60 !important;
    border-color: #f5c2c7 !important;
    color: #842029 !important;
}

.hiddenRow {
    padding: 0px !important;
    border-bottom-width: 0px !important;
}

.hide {
    display: none;
}


.link-color {
    color: #0d6efd;
}

.max-vh-40 {
    max-height: 40vh;
}

.pointer {
    cursor: pointer;
}

.popover-info {
    color: #5B616B;
    cursor: pointer;
}

.required-asterisk {
    font-size: 0.75rem;
    color: #0075BB;
}

.row-hover:hover {
    background-color: rgba(0, 0, 0, 0.075);
}

.SuccessMessage {
    color: green;
}

.tool-tip {
    color: #5B616B;
}

.tt-hint {
    text-transform: uppercase;
}

.tt-input {
    text-transform: uppercase;
}

.tt-loading {
    padding: 1rem;
}

.tt-menu {
    background-color: #ffffffe0;
    border: 1px solid #00000060;
    border-radius: 5px;
    width: 100%;
    overflow-y: auto;
    max-height: 15rem;
}

.tt-not-found {
    padding: 1rem;
}

.tt-suggestion.tt-selectable {
    cursor: pointer;
    padding: 0.5rem;
}

    .tt-suggestion.tt-selectable:hover {
        color: #005b99;
        background-color: #e9ecef;
    }

.twitter-typeahead {
    width: 100%;
}

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

::placeholder {
    text-transform: initial;
}

#cart-count {
    white-space: nowrap;
}

.icon-color-blue {
    color: #0075BB;
}

    .icon-color-blue:hover {
        color: #005B99;
    }

.icon-size-1-5 {
    font-size: 1.5rem;
}

.icon-size-2 {
    font-size: 2rem;
}

.icon-size-3 {
    font-size: 3rem;
}

.icon-size-4 {
    font-size: 4rem;
}

.help-contact-info {
    font-family: "Roboto Light", sans-serif;
    font-size: 0.9rem;
}

.light-text {
    font-family: "Roboto Light", sans-serif;
}

.signout {
    font-family: "Roboto Bold", sans-serif;
}

.strong-bold {
    font-family: "Roboto Black", sans-serif;
}

.department-description {
    font-family: "Big Shoulders Text", sans-serif;
}

/* Utility Classes */
.bold {
    font-family: "Roboto Bold", sans-serif;
}

.fs-5-1 {
    font-size: 1.1rem !important;
}

.text-white {
    color: #ffffff;
}

.card-small-text {
    font-size: 0.85rem;
}

.trust-seal-content {
    font-size: 0.8rem;
}

.trust-seal-link {
    font-size: 0.8rem;
}

.required-asterisk {
    font-size: 0.75rem;
    color: #0075BB;
}

.trust-seal-link-container .bi-asterisk {
    font-size: 0.5rem;
    vertical-align: text-top;
}

.trust-seal-star {
    width: 0.7rem;
    opacity: 0.33;
    vertical-align: middle;
    border-style: none;
}

.icon-size-1-5 {
    font-size: 1.5rem;
}

.icon-size-2 {
    font-size: 2rem;
}

.icon-size-3 {
    font-size: 3rem;
}

.icon-size-4 {
    font-size: 4rem;
}

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

.max-vh-40 {
    max-height: 40vh;
}

.pointer {
    cursor: pointer;
}

.grab {
    cursor: grab;
}

.hide {
    display: none;
}

.link-color {
    color: #0d6efd;
}

.row-hover:hover {
    background-color: rgba(0, 0, 0, 0.075);
}

.border-bottom-faded {
    border-bottom: 1px solid #0000003d;
}

.h-margin-block-start {
    margin-block-start: 1em;
}

.critical-facility-text {
    color: #b94a48 !important;
}

.SuccessMessage {
    color: green;
}

.error {
    color: red;
}

.field-validation-error {
    color: red;
}

.label-validation-error {
    color: #b94a48;
}

.alert-info-text-color {
    color: #000000 !important;
}

.popover-info {
    color: #5B616B;
    cursor: pointer;
}

.tool-tip {
    color: #5B616B;
}

.tt-hint {
    text-transform: uppercase;
}

.tt-input {
    text-transform: uppercase;
}

::placeholder {
    text-transform: initial;
}

.icon-color-blue {
    color: #0075BB;
}

    .icon-color-blue:hover {
        color: #005B99;
    }

.chi-star-img {
    max-width: 4.5rem;
    max-height: 4.5rem;
    margin-right: 0.75rem;
    object-fit: contain;
}

    .chi-star-img + h5 {
        align-self: flex-end;
    }

.checkbox-icon-stack {
    text-align: center;
}

.icon-stack {
    text-align: center;
    min-width: 2.2rem;
}

.list-group-item-link {
    position: relative;
    display: block;
    padding: 0.5rem 1rem;
    color: #0d6efd;
    text-decoration: none;
    background-color: #ffffff;
    border-bottom: 1px solid rgba(0,0,0,.125);
}

    .list-group-item-link:hover {
        color: #005580;
    }

.tt-suggestion.tt-selectable {
    cursor: pointer;
    padding: 0.5rem;
}

    .tt-suggestion.tt-selectable:hover {
        color: #005b99;
        background-color: #e9ecef;
    }

.goog-te-gadget {
    display: inline-block;
}

.goog-te-gadget-icon {
    display: none;
}

.HasThorium-True {
    background-color: #f8d7da60 !important;
    border-color: #f5c2c7 !important;
    color: #842029 !important;
}

.hiddenRow {
    padding: 0px !important;
    border-bottom-width: 0px !important;
}

#cart-count {
    white-space: nowrap;
}

.trust-seal-building {
    color: #2e7dc3;
}

.trust-seal-lock {
    color: #719f2a;
}

.img.captcha-img {
    border-radius: 4px;
}

.img.captcha-reload-img {
    height: 25px;
    filter: invert(100%) sepia(4%) saturate(941%) hue-rotate(169deg) brightness(92%) contrast(84%);
}

    .img.captcha-reload-img > b {
        color: #53595f;
    }

.sig-canvas {
    cursor: crosshair;
    border: 1px solid #00000060;
    border-radius: 5px;
}

.tt-menu {
    background-color: #ffffffe0;
    border: 1px solid #00000060;
    border-radius: 5px;
    width: 100%;
    overflow-y: auto;
    max-height: 15rem;
}

.tt-loading {
    padding: 1rem;
}

.tt-not-found {
    padding: 1rem;
}

.twitter-typeahead {
    width: 100%;
}

/* Media Queries */
@media (max-width: 991.98px) {
    .navbar-collapse .nav-item {
        width: 100%;
    }

    .navbar-collapse .dropdown-menu.show {
        display: block;
    }

    .navbar-collapse .dropdown {
        display: block;
    }
}

input[type="file"] {
    padding: 0.3em;
}

    input[type="file"]::file-selector-button {
        border: 2px solid #0d6efd;
        padding: 0.3em 0.8em;
        border-radius: 0.25em;
        background-color: #0d6efd;
        color: #fff;
        cursor: pointer;
        margin-right: 10px;
    }

        input[type="file"]::file-selector-button:hover {
            background-color: #0056d2;
            border-color: #0056d2;
        }