/* Custom Style Overrides START */
@font-face {
    font-family: 'Segoe Fluent Icons';
    src: url('./SegoeIcons.ttf');
    font-display: block;
}


.hidden {
    display: none !important;
}

body, input, select, textarea, button {
  font-family: 'Roboto', sans-serif !important;
}

h1:not(.modal-title) {
    font-size: 48px !important;
}

h2 {
    font-size: 36px !important;
}

.form-control:disabled {
    background-color: rgba(241, 241, 241, 1) !important;
    opacity: 1;
}

.debug-values {
    display: none !important;
}

li,
.field-label {
    color: var(--portalThemeColor10) !important;
}

ul {
    font-size: 18px;
    color: #001E32;
}

/*
  Layout
*/
.table-responsive td {
    min-height: 200px;
}

/**/
a.sapol-link {
    font-weight: 500 !important;
    font-style: Regular !important;
    font-size: 18px !important;
    line-height: 150% !important;
    letter-spacing: Display Medium/Tracking !important;
    color: rgba(0, 75, 136, 1) !important;
}

a.sapol-link:hover {
    color: #004B88;
    text-decoration: underline
}

a.sapol-link:active {
    color: #004B88;
    outline: 1px solid #004B88;
}

a.sapol-link:focus:not(:active) {
    outline: 2px solid #6FCFEB
}

.sapol-link-open {
    font-family: 'Segoe Fluent Icons';
    color: rgba(0, 75, 136, 1);
    font-size: 14px;
}

h4 {
    font-weight: 700 !important;
    font-size: 24px !important;
    line-height: 114.99999999999999% !important;
    letter-spacing: 0.25px !important;
    margin-bottom: 4px !important;
}

.sapol-spacer {
    min-height: 2px !important;
    padding: 1px !important;
    background-color: rgba(220, 221, 222, 1);
}

.btn-yellow {
    background-color: #FDF9CE !important;
    font-family: Roboto;
    font-weight: 600;
    border-radius: 0px;
    margin: 10px;
}

    .btn-yellow:hover {
        background-color: #FFD900 !important;
    }

    .btn-yellow:active {
        background-color: #FEBE10 !important;
    }

.header-padding {
    padding-left: 160px;
    padding-right: 255px;
}

@media (max-width: 1200px) {
    .header-padding {
        padding-left: 0px;
        padding-right: 0px;
    }
}

.navbar-header a img,
.offcanvas-logo {
    height: 90px !important;
}

.offcanvas-heading {
    font-size: 20px !important;
    color: var(--portalThemeColor10);
}

.navbar-header .icons a {
    color: var(--portalThemeColor10);
}

.offcanvas-header {
    background: var(--portalThemeColor11);
}

.offcanvas-header .btn-close {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / 1em auto no-repeat;
}

.nav-icon {
    margin-right: 12px;
    color: var(--portalThemeOnColor1);
}

.header-container .navbar-header {
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 1200px) {
    .static-top .navbar-brand {
        position: initial;
        height: auto;
    }
}

 .offcanvas.offcanvas-end {
    max-height: 100% !important;
 }

.static-top.navbar .menu-bar > .navbar-nav > li > a {
    color: #5B5E60 !important
}

.static-top.navbar .menu-bar > .navbar-nav > li > a:hover {
    color: var(--portalThemeColor10) !important;
    text-decoration: none !important;
}

.static-top.navbar .menu-bar > .navbar-nav > .divider-vertical {
    display: none;
}


.navbar-toggler:focus {
    box-shadow: unset !important;
}

.navbar-toggler {
    background-color: transparent !important;
    border: none !important;
}

.navbar-light {
    padding-top: 0px;
}

.nav-section-2 {
    display: flex;
}

.nav > li > a:hover {
    color: var(--portalThemeColor5) !important;
    background-color: transparent !important;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 0px;
    width: 100%;
    height: 100px;
    margin: auto;
}

.breadcrumb.pagesBreadcrumb {
    padding: 0px !important;
    margin: 0px !important;
}

html[dir=ltr] li a {
    margin-left: 0px !important;
}

.breadcrumb > li a,
.breadcrumb > li h4 {
    text-decoration: none;
    color: #004B88 !important;
    font-size: 14px !important;
    font-weight: normal !important;
    margin-bottom: 0px !important;
}

.breadcrumb > li h4 {
    color: var(--bs-gray-600) !important;
    line-height: 30px !important;
    vertical-align: middle;
    font-size: 14px !important;
}

.hero-section-light {
    background-color: var(--portalThemeColor11);
    border: 1px solid #CFEAFF;
    display: flex;
    align-items: center;
    padding: 10px;
}

    .hero-section-light .row {
        align-items: center;
    }

        .hero-section-light .row div:first-of-type p {
            margin: 0 !important;
            font-size: 14px;
        }

        .hero-section-light .row div p {
            margin: 0 !important;
            font-size: 12px;
        }

.hero-icon-container {
    display: flex;
    align-items: center;
}

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

.hero-icons {
    margin-right: 5px;
    height: 56px;
    width: auto;
}

.icons {
    display: flex;
    align-items: center;
}

button.navbar-toggler {
    margin-right: 0px !important;
}

@media only screen and (max-width: 991px) {
    .hero-section.hero-section-light .container {
        max-width: 100%;
    }
}

@media only screen and (max-width: 914px) {
    .navbar-header a img,
    .offcanvas-logo {
        height: 58px !important;
    }

    .columnBlockLayout {
        margin-top: 0px !important;
    }

    .navbar-header a img, .offcanvas-logo {
        margin: 0 !important;
        /* margin-left: 10px !important; */
        padding: 0px;
    }

    .hero-icon-container {
        display: flex;
        align-items: center;
        width: 33%;
    }

    .hero-icons,
    .hero-text {
        display: none;
    }

    .hero-icon-container p {
        font-size: 11px;
    }
}

@media only screen and (max-width: 400px) {
    .navbar-header a img {
        height: 46px !important;
    }
    .header-container {
        padding: 8px !important;
    }
/* 
    .sectionBlockLayout  {
    padding: 8px !important;
} */

}


.wrapper-body hr {
    color: #DCDDDE;
    opacity: 100;
}

.form-control {
    font-size: 18px;
}

.form-select {
    font-size: 18px;
}

/* Placeholder (light grey across all inputs) */
input::placeholder {
    color: #b3b3b3 !important; /* light grey */
    opacity: 1; /* ensure consistent visibility */
}

/* Vendor prefixes for cross-browser support */
input::-webkit-input-placeholder {
    color: #b3b3b3 !important;
}

input::-ms-input-placeholder {
    color: #b3b3b3 !important;
}

input:-ms-input-placeholder {
    color: #b3b3b3 !important;
}

/* Typed text (normal) */
input {
    color: #212529;
}

/* Footer Start */
.footer-banner img {
    width: 100%;
    height: auto;
}

.footer-lower {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.footer-nav .nav {
    padding-bottom: 20px;
}

.footer-lower .footer-logos {
    display: flex;
    justify-content: flex-end;
}

footer .footer-lower .footer-logos img.first-logo {
    padding-right: 10px;
}

footer hr {
    color: #C2C4C5;
    margin: 2rem 0;
    opacity: 100;
}

footer p {
    color: var(--portalThemeOnColor1) !important;
    font-size: 18px;
}

.footer-bottom-text {
    font-size: 14px;
}

footer .footer-bottom ul li a:first-of-type {
    padding-left: 0px !important;
}

footer .footer-bottom ul li a:focus {
    background-color: transparent;
}

footer .footer-bottom ul li {
    margin-right: 10px;
}

/* Footer mobile start */

@media only screen and (max-width: 991px) {
    .footer-lower .footer-logos {
        padding-top: 20px;
        justify-content: center;
    }

    .footer-lower .footer-nav,
    .footer-lower .footer-logos {
        width: 100%;
    }
}

@media only screen and (max-width: 991px) {
    .footer-lower .footer-logos {
        padding-top: 20px;
        justify-content: center;
    }

    .footer-logos img {
        width: 80%;
    }
}

/* Footer mobile end */

/* Footer End */

/* Common styles */

/* Notification - Loading ... */

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

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

.spin {
    animation: spin 1.2s linear infinite;
    transform-origin: 50% 50%;
    display: inline-block;
}

/* Forms Start */
.form-control {
    background-color: var(--portalThemeOnColor1) !important;
    color: var(--portalThemeOnColor2) !important;
    border: 1px solid var(--portalThemeColor10) !important;
    border-radius: 0px !important;
    padding: 0.675rem .75rem !important;
}

.crmEntityFormView .cell.boolean-radio-cell label {
    display: inline-block !important;
}

.crmEntityFormView .tab-title {
  margin-top: 6px !important;
  margin-left: 28px;
  border-bottom-color: #DCDDDE;
}

.crmEntityFormView .cell div.table-info.required label:after {
    color: #001E32 !important;
}

.crmEntityFormView, .crmEntityFormView .actions {
    border: none !important;
}

.crmEntityFormView div.description {
  font-size: 14px;
}

.crmEntityFormView .validation-summary h2 {
    font-size: 24px !important;
    margin-bottom: 10px;
}

.crmEntityFormView .validation-summary .fa-info-circle {
    background-image: url(/ErrorCircle.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 32px;
    height: 32px;
    margin-bottom: -6px;
}

.fa-info-circle:before {
    content: '' !important;
}

.crmEntityFormView .validation-summary ul {
    margin-left: 38px;
}

.crmEntityFormView fieldset legend h3 {
    margin-left: 28px;
    margin-bottom: 10px;
}

.alert-danger {
    background-color: #FDF3F3;
}

.boolean-radio-cell .control .boolean-radio label {
    margin: 2px;
}

.boolean-radio-cell .control .boolean-radio {
    flex-direction: row-reverse;
}
.boolean-radio-cell .control, .boolean-radio-cell .control .boolean-radio {
    display: flex;
}

span.boolean-radio {
    display: inline-block;
    width: auto;
    height: auto;
    border: 1px solid var(--portalThemeColor10);
    border-radius: 25px;
    padding: 3px;
}

.boolean-radio input[type="radio"] {
    display: none; /* Hide the actual radio button */
}

.boolean-radio label {
    display: inline-block;
    padding: 5px 15px;
    background-color: #eee;
    border: 1px solid #ccc;
    cursor: pointer;
}

    .boolean-radio label:first-of-type {
        margin-right: 5px;
    }

    .boolean-radio label:hover {
        background-color: #ddd;
    }

.boolean-radio label {
    border-radius: 25px;
    width: 70px;
    text-align: center;
    font-weight: 600 !important;
    font-family: Roboto;
}

.boolean-radio input[type="radio"]:checked + label {
    background-color: var(--portalThemeColor10);
    color: var(--portalThemeOnColor1);
    border-color: var(--portalThemeColor10);
}

.input-group-addon, .input-group-addon.active {
    padding: 11px 12px;
}

.view-grid > table > thead > tr > th > a {
    color: var(--portalThemeColor8);
    text-decoration: none;
    font-weight: 600;
}

.view-grid > table > thead {
    border-bottom: 1px solid var(--portalThemeColor8);
}

.view-grid > table > tbody > tr > td,
table > tbody > tr > td,
.columnBlockLayout p {
    font-size: 18px;
}

.dropdown.action button {
    border: none !important;
    color: var(--portalThemeColor8) !important;
}

    .dropdown.action button:hover {
        background-color: transparent !important;
    }

#PreviousButton {
    margin-right: 10px;
}

/* Report a vehicle collision - landing */
.sapol-row {
    display: flex;
    flex-wrap: nowrap; /* keep left and right in a single row */
    gap: 16px;
}

    .sapol-row .left {
        flex: 0 0 75%; /* fixed to 75% width */
    }

    .sapol-row .right {
        flex: 0 0 25%; /* fixed to 25% width */
    }

.sapol-container div.breakout {
    opacity: 1;
    gap: 16px;
    border-width: 1px;
    background: var(--status-error-background, rgba(251,230,231,1));
    border: 1px solid var(--status-error-foreground, rgba(217,35,43,1));
    flex-grow: 0;
    flex-shrink: 0;
    align-self: flex-start;
    height: auto;
}

div.breakout-info,
div[aria-label="No item has been added"] {
    opacity: 1;
    gap: 16px;
    border-width: 1px;
    background: var(--portalThemeColor11);
    border: 1px solid #05374D;
    flex-grow: 0;
    flex-shrink: 0;
    align-self: flex-start;
    height: auto;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.emergency-call {
    display: flex;
    align-items: normal;
    gap: 6px;
    padding: 16px 16px;
}

.emergency-call .icon {
    background-image: url('/ErrorCircle.png');
    background-repeat: no-repeat;
    background-size: contain;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    margin-top: 8px;
}

.otp-modal-dialog .emergency-call .icon {
    background-image: url('/ErrorCircle.png');
    background-repeat: no-repeat;
    background-size: contain;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 3px;
}

.emergency-call .text-block {
    display: flex;
    flex-direction: column;
}

.emergency-call span {
    font-size: 16px;
}

.emergency-call .description {
    font-weight: 400;
    font-style: Regular;
    font-size: 18px;
    line-height: 150%;
    letter-spacing: Display Medium/Tracking;
}

#OtpWrong {
    padding: 16px 0px;
}

/* Button Save and Close*/

.hide-btn {
    display: none !important;
}

.sapol-button-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Start on left */
    gap: 12px; /* optional spacing between buttons */
}

    .sapol-button-bar .btn {
        float: none !important;
        display: inline-flex !important;
        margin: 0 !important;
    }

.sapol-rounded-container {
    background-color: #fff;
    border: 1px solid #ddd; /* light border */
    border-radius: 24px; /* rounded corners */
    padding: 48px 48px; /* inner spacing */
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); /* subtle shadow */
    width: 100%;
}

.csor-links-wrapper h2 {
    padding-bottom: 32px !important;
    margin-bottom: 0px !important;
}

/*
Loading screen
*/

body.hidden-during-check {
    visibility: hidden;
}

#loadingOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    font-size: 1.5rem;
}

ol.progress li.incomplete,
.list-group-item.active,
.list-group-item-success {
    border: none;
    background-color: white;
    font-weight: bold;
    color: #000000;
}

ol.progress .list-group-item-success span.fa-check {
    display: none;
}

.form-stepper-icon {
    margin-right: 5px;
}

.list-group-item.incomplete,
.list-group-item.incomplete svg::after {
    color: grey !important;
}

.form-stepper-icon.active,
.form-stepper-icon.success {
    border: 1px solid var(--portalThemeColor10);
    border-radius: 15px;
}

#WebFormPanel {
  border-left: #DCDDDE 1px solid !important;
}

#WebFormPanel .actions {
    text-align: right;
}

#WebFormPanel .actions .col-md-6 {
    width: 100%;
}

@media screen and (max-width: 991px) {
    #WebFormPanel .actions {
        text-align: center;
    }

    #WebFormPanel .actions .btn-group,
    #WebFormPanel .actions .btn-group input,
    #WebFormPanel .actions button {
        width: 100%;
    }

    #WebFormPanel .actions #btn-saveAndClose {
        width: auto;
    }

    #WebFormPanel .actions .btn-group input,
    #btn-saveAndClose {
        margin-bottom: 10px;
    }

    .form-top .col-lg-10 hr:first-of-type {
        display: none;
    }
}

.form-top {
    align-items: flex-end;
}

.receipt-container {
    margin-left: 28px;
}

/* Modal */
.generic-sapol-dialog {
    max-width: 740px;
    width: 100%;
    margin: 1.75rem auto; /* centers and keeps Bootstrap spacing */
}

.generic-sapol-dialog .btn-close{
    color: var(--portalThemeColor10);
    font-weight: 100;
    font-size: 20px;
}

.generic-sapol-dialog .modal-title{
    color: #5B5E60;
    font-weight: 100;
    font-size: 16px;
}

.generic-sapol-dialog .agreement-container{
    padding-top: 20px;
}

.generic-sapol-dialog .icon-container {
    padding-top: 4px;
    padding-right: 15px;
}

.generic-sapol-dialog .modal-body {
    padding-left: 20px;
}

.generic-sapol-dialog .modal-footer {
    border-top: none !important;
}

.generic-sapol-dialog .agreementh2{
    margin-top: 0px !important;
}


.modal-form .modal-title {
  font-size: 24px;      
}

.modal-form .modal-dialog {
    max-height: 90vh;
    margin-top: 5vh;
    margin-bottom: 5vh;
    display: flex;
    align-items: stretch;
    height: 100%;
    max-width: 704px
}

.modal-form .modal-body iframe {
    height: 100%;
}

.modal {
    background-color: rgba(0, 30, 50, 0.75);
}

@media (max-width: 768px) {
    .generic-sapol-dialog {
        max-width: 90%;
        /* shrink a bit for tablets/mobiles */
    }
}

@media (max-width: 576px) {
    .modal-form .modal-dialog {
        margin-left: 16px;
        margin-right: 16px;
    }
}

/* loading screen */

.loading-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.loading-screen-icon {
    --size: 64px;
    width: var(--size);
    height: var(--size);
    display: inline-block;
    color: #6FCFEB !important; /* change this to recolor */
    background: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none"><path d="M11.3333 32.0001C11.3333 20.5862 20.5861 11.3334 32 11.3334C38.0119 11.3334 43.4242 13.8991 47.2026 18.0001H41.6667C40.7462 18.0001 40 18.7463 40 19.6668C40 20.5872 40.7462 21.3334 41.6667 21.3334H50.3333C51.2538 21.3334 52 20.5872 52 19.6668V11.0001C52 10.0796 51.2538 9.33344 50.3333 9.33344C49.4129 9.33344 48.6667 10.0796 48.6667 11.0001V14.7311C44.351 10.5654 38.4749 8.00011 32 8.00011C18.7452 8.00011 8 18.7453 8 32.0001C8 45.2549 18.7452 56.0001 32 56.0001C45.2548 56.0001 56 45.2549 56 32.0001C56 30.6621 55.8903 29.3484 55.6792 28.0679C55.5294 27.1597 54.6718 26.5448 53.7635 26.6946C52.8553 26.8444 52.2405 27.702 52.3903 28.6103C52.572 29.7122 52.6667 30.8445 52.6667 32.0001C52.6667 43.414 43.4139 52.6668 32 52.6668C20.5861 52.6668 11.3333 43.414 11.3333 32.0001Z" fill="currentColor"/></svg>');
}

/* Action buttons: */

/* Row: three buttons on one line */
.ppFlexContainer.btn-row {
    display: flex;
    justify-content: center;
    gap: 16px; /* space between buttons */
    flex-wrap: nowrap; /* keep them on one line if possible */
}

/* Button block */
.ppFlexContainer .btnCard {
    /* ~30% width each (3 across) */
    flex: 1 1 30%;
    height: 104px;
    display: flex;
    align-items: center; /* vertical center */
    justify-content: space-between; /* text left, icon (pseudo) right */

    padding: 0 18px;
    background: #F6F7F7;
    color: #0a2540;
    text-decoration: none;
    font-weight: 600;
    font-size: 24px;
    border: 0; /* no side/bottom border */
    border-top: 8px solid var(--general-feature-colour, #FFD900); /* top border only */
    box-sizing: border-box;
    white-space: nowrap; /* prevent wrapping text */
    overflow: hidden;
    text-overflow: ellipsis; /* ellipsis if too long */
    cursor: pointer;
    --bs-btn-border-radius: 0px;
}

    /* Right-side icon via pseudo element (no markup change) */
    .ppFlexContainer .btnCard::after {
        content: "";
        width: 24px;
        height: 24px;
        margin-left: 12px;
        background-color: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='16' viewBox='0 0 18 16' fill='none'%3E%3Cpath d='M10.2673 0.206937C9.96736 -0.0787504 9.49262 -0.067207 9.20694 0.232719C8.92125 0.532646 8.93279 1.00738 9.23272 1.29307L15.4841 7.24768H0.75C0.335787 7.24768 0 7.58347 0 7.99768C0 8.41189 0.335787 8.74768 0.75 8.74768H15.4842L9.23272 14.7024C8.93279 14.9881 8.92125 15.4628 9.20694 15.7627C9.49262 16.0627 9.96736 16.0742 10.2673 15.7885L17.6862 8.72181C17.8551 8.56091 17.9551 8.35568 17.9861 8.14231C17.9952 8.09551 18 8.04716 18 7.99768C18 7.94811 17.9952 7.89966 17.986 7.85278C17.955 7.63954 17.855 7.43445 17.6862 7.27364L10.2673 0.206937Z' fill='%2300182C'/%3E%3C/svg%3E") no-repeat center / contain;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='16' viewBox='0 0 18 16' fill='none'%3E%3Cpath d='M10.2673 0.206937C9.96736 -0.0787504 9.49262 -0.067207 9.20694 0.232719C8.92125 0.532646 8.93279 1.00738 9.23272 1.29307L15.4841 7.24768H0.75C0.335787 7.24768 0 7.58347 0 7.99768C0 8.41189 0.335787 8.74768 0.75 8.74768H15.4842L9.23272 14.7024C8.93279 14.9881 8.92125 15.4628 9.20694 15.7627C9.49262 16.0627 9.96736 16.0742 10.2673 15.7885L17.6862 8.72181C17.8551 8.56091 17.9551 8.35568 17.9861 8.14231C17.9952 8.09551 18 8.04716 18 7.99768C18 7.94811 17.9952 7.89966 17.986 7.85278C17.955 7.63954 17.855 7.43445 17.6862 7.27364L10.2673 0.206937Z' fill='%2300182C'/%3E%3C/svg%3E") no-repeat center / contain;
    }

    /* Hover/Focus states */
    .ppFlexContainer .btnCard:hover {
        background: rgba(253, 249, 206, 1);
        text-decoration: underline;
    }
    /*
background: var(--card-hover-background, rgba(253, 249, 206, 1));

*/
    .ppFlexContainer .btnCard:focus-visible {
        outline: 3px solid rgba(25,118,210,.25);
        outline-offset: 2px;
    }

/* Optional: stack on narrow screens */
@media (max-width: 768px) {
    .ppFlexContainer.btn-row {
        flex-wrap: wrap;
    }

    .ppFlexContainer .btnCard {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* END: Action buttons */

h5.smallTitle {
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 27px */
    letter-spacing: var(--Display-Medium-Tracking, 0);
    display: flex;
    align-items: center;
}

.linkText {
    color: var(--text-link, #004B88);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 27px */
    letter-spacing: var(--Display-Medium-Tracking, 0);
}


/* Missing Offenders */

.padding-64 {
    margin-top: 64px !important;
    margin-bottom: 64px !important;
}

.padding-64-bottom {
    padding-bottom: 64px;
}

.sapol-container {
    padding-top: 48px;
    padding-bottom: 64px;
}

/* Responsive behavior */
@media (max-width: 768px) {
    .sapol-container {
        padding-top: 32px;
        padding-bottom: 24px;
    }

    .ppFlexContainer {
        gap: 16px !important;
    }
}

/*Cards */
.csor-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding-bottom: 32px;
}

/* Card container */
.csor-card {
    display: flex;
    justify-content: space-between; /* details left, image right */
    align-items: flex-start; /* top-align both */
    gap: 16px;
    background: #F6F7F7;
    /*border: 1px solid #e5e7eb;*/
    padding: 16px;
    /*box-shadow: 0 2px 6px rgba(0,0,0,.06);*/
    text-align: left;
    cursor: pointer;
    transition: box-shadow 0.2s ease;
    height: 100%;
}

    .csor-card:hover {
        /*box-shadow: 0 4px 10px rgba(0,0,0,.12);*/
        background-color: #fff3cd;
    }

    /* Details (left side) */
    .csor-card .userDetails {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* align content to top */
        align-items: flex-start;
        gap: 6px;
        min-width: 0;
    }

    .csor-card h3 {
        font-size: 24px;
        margin: 0;
        color: #111;
    }

    .csor-card p {
        margin: 0;
        font-size: 18px;
        color: #555;
    }

    /* Image (right side) */
    .csor-card .userImage img {
        width: 140px;
        height: 210px;
        display: block;
    }

/* Responsive behavior */
@media (max-width: 768px) {
    .csor-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .csor-cards {
        grid-template-columns: 1fr;
    }

    .csor-card {
        /* flex-direction: column; */
        align-items: flex-start;
    }

    .csor-card .userImage img {
        margin-top: 8px;
        max-width: 100% !important;
        height: auto !important;
    }
}

/* Missing offender - detail page */
.csor-ind-container {
    padding: 32px;
    border: 1px solid var(--general-disabled-middle-ground, #C2C4C5);
    border-radius: 16px;
    background-color: #fff;
}

.csor-ind-name {
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 600;
    text-align: left;
    padding-bottom: 0.5rem;
}

.csor-ind-content {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.csor-ind-left img {
    width: 275px;
    height: auto;
    object-fit: cover;
    background-color: #f3f3f3;
}

.csor-ind-right {
    flex: 1;
}

/* Missing Offenders : End*/

.btn-primary:hover {
    color: #FFD900 !important;
}

.btn-default {
    background-color: #E7E7E8 !important;
}

.btn-default:hover {
    color: #001E32 !important;
    background-color: #E4F3FF !important;
    border: #E4F3FF 1px solid;
}

.btn-default:focus {
    color: #001E32 !important;
    background-color: #C9ECFC !important;
    border: #C9ECFC 1px solid;
}

.btn-secondary {
    background-color: #E7E7E8 !important;
}

#SaveAndCloseButton {
    background-color: transparent !important;
}

#ReturnToItemSelectorButton {
    background-color: transparent !important;
}

.btn-secondary:hover {
    color: #001E32 !important;
    background-color: #E4F3FF !important;
    border: #E4F3FF 1px solid;
}

.btn-secondary:focus {
    color: #001E32 !important;
    background-color: #C9ECFC !important;
    border: #C9ECFC 1px solid;
}

/* Responsive: stack vertically on small screens */
@media (max-width: 990px) {
    .padding-fix {
        padding: 0 20px;
    }
}
@media (max-width: 768px) {
    .csor-ind-content {
        flex-direction: column;
        align-items: center;
    }

    .csor-ind-left,
    .csor-ind-right {
        flex: 1 1 100%;
    }

        .csor-ind-left img {
            max-width: 250px;
        }
}

.pp-visually-hidden {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* Title */
.title-subtext {
    font-size: 18px;
    font-weight: normal;
    margin-top: 24px;
    margin-bottom: 48px;
}

/* Region Pages - Local Search */
.sapol-cust-tbl-row, #contCaptcha, #contButtons {
    padding-left: 26px;
}

input.form-control.input-disabled-look {
    background-color: #e9ecef !important; /* add !important once */
    color: #6c757d;
    border-color: #ccc;
    cursor: not-allowed;
    opacity: 1;
}

input.form-control.readonly {
    background-color: #e9ecef !important; /* add !important once */
    color: #6c757d;
    border-color: #ccc;
    cursor: not-allowed !important;
    opacity: 1;
}

#contT2Submit .field-label {
    font-weight: normal;
    /* gap: 8px; */
    padding-bottom: 6px;
}

.field-label {
    font-weight: normal !important;
}

.sapol-button {
    margin-top: 5px;
    background: var(--buttons-secondary-background, #E7E7E8) !important;
}

#csor_cd_residentialaddress_manuallyButton:hover {
    margin-top: 5px;
    background: var(--general-hero-section-light, #E4F3FF) !important;
    color: var(--buttons-secondary-foreground, #001E32);
}



.cust-ico {
    height: 50px;
    width: 50px;
}

/* checkboxes */
input[type="checkbox"] {
  width: 20px; /* Adjust as needed */
  height: 20px; /* Adjust as needed */
}

td.clearfix.cell.checkbox-cell {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  margin: 10px 10px 10px 28px;
  background: #F6F7F7;
  padding: 10px;
}

td.clearfix.cell.checkbox-cell:has(.checkbox-cell-no-left-margin) {
  margin: 10px 10px 10px 0;
}

td.clearfix.cell.checkbox-cell div.table-info {
  padding-top: 4px;
}

td.clearfix.cell.checkbox-cell label {
  background-color: transparent;
}

/* radio buttons */
.picklist.vertical input {
    margin: 10px !important;
    width: 20px;
    height: 20px;
}

.picklist.vertical label {
    vertical-align: text-bottom;
    color: #001E32;
}

/* OPT modal */
.otp-modal-dialog {
    max-width: 740px;
    width: 100%;
    margin: 1.75rem auto; /* centers and keeps Bootstrap spacing */
}


#reviewAccordian h2 {
    padding-bottom: 0px !important;
    margin-top: 0px !important;
}

.accordion-item {
    border: 1px solid var(--portalThemeColor10) !important;
    margin-top: 10px;
}

.accordion-button:not(.collapsed) {
    background-color: transparent !important;
    border-bottom: 1px solid var(--portalThemeColor10) !important;
    color: var(--portalThemeColor10) !important
}

.accordion-button.collapsed {
    color: var(--portalThemeColor10) !important;
}

.accordion-button::after {
    background-image: var(--bs-accordion-btn-icon) !important;
}

.accordion-button:focus {
    border-color: var(--portalThemeColor10) !important;
    box-shadow: none !important;
}

.accordion-button {
    font-weight: 900;
    font-size: 24px;
    letter-spacing: 0.25px;
}

.accordion-collapse.collapse.show {
    border-top: none !important;
}

.accordion-flush .accordion-item .accordion-button, .accordion-flush .accordion-item .accordion-button.collapsed {
    border-bottom: none !important;
}

.fluent-icon {
    font-family: 'Segoe Fluent Icons', sans-serif;
    font-size: 24px;
    color: #D9232B;
}

.spinner-border-sm {
    margin-right: 5px;
}

#btn-back-to-top {
    margin-bottom: 10px;
    z-index: 10;
    border-radius: 25px;
    border: 1px solid var(--portalThemeColor10);
    font-size: 12px;
    padding: 0px 5px;
    color: var(--portalThemeColor10);
    font-weight: bold;
}

.progress.list-group.left .list-group-item {
  padding: 10px 7px;
}

@media (max-width: 768px) {
 .progress.list-group.left {
  overflow-x:scroll !important;
 }
}

.sapol-icon-at {
  display:inline-block;
  width:22px;
  height:24px;

  background-repeat:no-repeat;
  background-size:contain;

  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><!--!Font Awesome Free v6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d='M256 64C150 64 64 150 64 256s86 192 192 192c17.7 0 32 14.3 32 32s-14.3 32-32 32C114.6 512 0 397.4 0 256S114.6 0 256 0S512 114.6 512 256l0 32c0 53-43 96-96 96c-29.3 0-55.6-13.2-73.2-33.9C320 371.1 289.5 384 256 384c-70.7 0-128-57.3-128-128s57.3-128 128-128c27.9 0 53.7 8.9 74.7 24.1c5.7-5 13.1-8.1 21.3-8.1c17.7 0 32 14.3 32 32l0 80 0 32c0 17.7 14.3 32 32 32s32-14.3 32-32l0-32c0-106-86-192-192-192zm64 192a64 64 0 1 0 -128 0 64 64 0 1 0 128 0z'/></svg>");
}

.sapol-icon-phone { 
  display: inline-block;
  width: 22px;
  height: 24px;

  background-repeat: no-repeat;
  background-size: contain;

  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><!--!Font Awesome Free v6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d='M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z'/></svg>");
}

.sapol-icon-mail { 
  display: inline-block;
  width: 22px;
  height: 24px;
  margin-left: 3px;

  background-repeat: no-repeat;
  background-size: contain;

  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><!--!Font Awesome Free v6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d='M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z'/></svg>");
}

.sapol-icon-info { 
  display: inline-block;
  width: 32px;
  height: 44px;

  background-repeat: no-repeat;
  background-size: contain;

  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><!--!Font Awesome Free v6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/></svg>");
}

.sapol-icon-warning { 
  display: inline-block;
  width: 32px;
  height: 100px;

  background-repeat: no-repeat;
  background-size: contain;

  fill: #D17400;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><!--!Font Awesome Free v6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/></svg>");
}

.alert {
    --bs-alert-border-radius: 0
}

.fa-chevron-down:before {
    content: "\f142" !important;
}

.sapol-subgrid-dropdown-open {
    min-height: 13rem;
}

.pagination > li > a {
    color: #001E32;
}

.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover {
    background-color: #00294B !important;
}

.float-end {
    float: left !important;
}

.subgrid table .btn.showm,
.subgrid table .btn-default:active,
.subgrid table .btn-default:focus,
.subgrid table .btn-default {
    background-color: transparent !important;
}

table .dropdown-menu.show {
    border: none !important;
    border-radius: 0px !important;
}

table .dropdown-menu.show li a {
    padding: 10px;
    padding-left: 3px;
}

table .dropdown-menu.show li:hover,
table .dropdown-menu.show li a:hover,
table .dropdown-menu.show li:active,
table .dropdown-menu.show li a:active {
    background-color: #CFEAFF !important;
}

table .dropdown-menu.show {
    padding: 0px !important;
}

table .dropdown-menu.show .delete-link:hover,
table .dropdown-menu.show .delete-link a:hover,
table .dropdown-menu.show .delete-link:active,
table .dropdown-menu.show .delete-link a:active {
    background-color: #F8D0D2 !important;
    color: #D9232B !important;
}

table .dropdown-menu.show li a {
    text-decoration: none !important;
}

table .dropdown-menu.show li a span {
    display: none !important;
}

@media (max-width: 768px) {
    .actions .col-md-6 {
        display: flex;
        flex-direction: column-reverse;
    }

    .progress.list-group.left {
        overflow-x: scroll !important;
    }

    #WebFormPanel {
        border-left: none !important;
    }
}

@media (max-width: 768px) {
    .sapol-button-bar {
        flex-direction: column;
    }

    .sapol-button-bar .btn,
    .btn-primary,
    .button2, .btn-secondary, .btn-default {
        width: 100% !important;
        display: block !important;
    }
}

.msos-container {
    border: 1px solid #001E32;
}

/* Custom Style Overrides END */

.input-group-addon.btn {
    font-size: 18px !important;
}

/* Style for modal used in form step - Start */
.pp-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 30, 50, 0.75);
    display: none;
    z-index: 1050;
}

.pp-modal-overlay.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pp-modal {
    background: #fff;
    max-width: 704px;
    width: 90%;
    padding: 32px;
    border-radius: 12px;
    position: relative;
}

.pp-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
}

.pp-modal-actions {
    display: flex;
    gap: 16px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.pp-modal-actions>button {
    flex: 1 1 0;
    min-width: 0;
}

@media (max-width: 576px) {
    .pp-modal-actions {
        flex-direction: column;
    }

    .pp-modal-actions>button {
        width: 100%;
    }
}

body .msos-caret-button .msos-glyph:after,
body .msos-selecteditems-toggle {
    color: var(--portalThemeColor10) !important;
}

.alert-dismissible {
    align-items: flex-start !important;
}

.alert-dismissible i.fa-solid.fa-triangle-exclamation.fa-xl {
    margin-top: 20px;
}

/* Style for modal used in form step - End */