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

.hidden {
  display: none !important;
}

body {
  font-family: 'Roboto', 'Segoe UI', sans-serif !important;
}

h1 {
  font-size: 48px !important;
}

h2 {
  font-size: 36px !important;
  padding-bottom: 15px !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;
}

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

.alert-dismissible {
  display: none !important;
}


/**/

a.sapol-link {
  font-weight: 400 !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;
}

.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-logo {
  margin-left: 0px;
}

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

.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='var(--portalThemeOnColor1)'%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 !important;
  opacity: 1;
  padding-top: 40px;
}

.offcanvas-header{
  height: 106px;
  padding:0px !important;
}

.offcanvas-header .btn-close {
  color: var(--portalThemeOnColor1);
}

.offcanvas-logo {
  width: auto;
  height: 32px;
}

.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{
  height: 100%;
  width: 100%;
  max-height: 100% !important;
  text-align: left;
  background-color: var(--portalThemeColor10);
  border: none !important;
  display: flex;
  width: 100%;
  padding: 0px 18px;
}


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

.static-top.navbar .menu-bar > .navbar-nav > li > a {
  color: var(--portalThemeOnColor1);
}

.navbar-toggler:focus {
  box-shadow: unset !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;
}

.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;
  }

  .offcanvas-header{
    padding-right: 0px !important;
    
  }

  .offcanvas-logo {
    margin-left: 0px !important;
  }

  .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,
  .offcanvas-logo {
    height: 46px !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);
  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 */


/* Forms Start */

.form-control,
.customControl {
    background-color: var(--portalThemeOnColor1);
    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;
}

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: 12.5px 12px;
}
.input-group-addon.cust-ico {
    height: 50px;
    width: 50px;
}


.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 {
  font-size: 16px;
}

.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;
}


.emergency-call {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.emergency-call .icon {
  font-family: 'Segoe Fluent Icons'; 
  color: #D9232B; 
  font-size: 28px;
}

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



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

/* Address Toggle button */

.sapol-button{
  border: 1px solid var(--portalThemeColor10) !important;
  display:block !important;
  clear:both;
  margin-top: 52px;
}
.sapol-button-modal
{
    margin-top: 5px;
}

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

.pp-input-icon-wrapper {
    padding: 9px 8px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 0;
}


/* 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: 24px;                     /* inner spacing */
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);  /* subtle shadow */
  margin-top: 40px;                  /* spacing from previous section */
  margin-bottom: 24px;               /* spacing from next section */
}

/*
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;
  }


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


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

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

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;
}

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

#WebFormPanel .actions {
  text-align: right;
  border-top: 1px solid #DCDDDE !important;
}

#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: 10px;
  }

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



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

.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;
}

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

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

@media (max-width: 998x) {
  .progress.list-group {
    overflow-x: scroll;
  }

  ol.progress.left li{
    flex-direction: column !important;
    text-align: center;
    align-items: center;
  }
}

#btn-saveAndClose {
  background-color: transparent !important;
  border-color: transparent !important;
}

#btn-saveAndClose:hover{
  color: var(--portalThemeColor3);
}

  
@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 {
    width: 100% !important;
    display: block !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;
}

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




.modal-title {
  font-size: 36px !important;
}

.modal-footer {
    border-top: 0;
}

#saveCloseModalLabel {
  margin-bottom: 0px !important;
}

.aMod {
    color: #2A2C2E;
    font-family: Arial;
    font-weight: 400;
    font-size: 14px;
    text-decoration: underline;
}

.modal-validation-summary li{
  list-style: none;
}

ul.modal-validation-summary{
  padding-top: 10px;
}


/* OPT modal */
.otp-modal-dialog {
  max-width: 740px;
  width: 100%;
  margin: 1.75rem auto; /* centers and keeps Bootstrap spacing */
}
@media (max-width: 768px) {
  .otp-modal-dialog {
    max-width: 90%; /* shrink a bit for tablets/mobiles */
  }
}

#sapol-custom-alert.vMod{
  margin-right:5%
}

#sapol-custom-alert.vMod{
  margin-top:10px;
}

span.input-group-text {
  display: none;
}

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 label {
  background-color: transparent;
}

.highlight,
.highlight-checkbox {
  background-color: var(--portalThemeColor11) !important;
}

.money.form-control-cell .pp-input-icon-wrap {
  width: 100% !important;
}

.review-heading {
  margin-bottom: 20px;
}

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

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

.review-links {
  text-decoration: none !important;
  font-weight: bold;
  color: var(--portalThemeColor10);
}

.pp-input-icon-wrap {
  width: 100%;
}

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

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

.crmEntityFormView div.description.below, .modal-body div.description.below {
  color: #5B5E60;
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

.crmEntityFormView div.description .info-icon {
  font-family: 'Segoe Fluent Icons';
}

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

.crmEntityFormView .section-title {
  margin-left: 22px;
}

@media (max-width: 767px){
  .crmEntityFormView .section-title {
    margin-left: 0px;
  }

  .title-subtext {
    line-height: normal !important;
  }

  td.clearfix.cell.checkbox-cell {
    margin: 0px 0px 10px 0px !important;
  }
}

.crmEntityFormView .cell div.table-info.required label:after {
    color: var(--portalThemeColor10);
}

.title-subtext {
  font-size: 18px;
  font-weight: normal;
  line-height: 85px;
}

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

html[dir=ltr] .crmEntityFormView .cell input[type=text], html[dir=ltr] .crmEntityFormView .cell select, html[dir=ltr] .crmEntityFormView .cell textarea {
    float: none;
}

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

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;
}

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

.error-field-state {
  border-color: #D9232B !important;
}

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

#customSuccessToast {
  background-color: #198754; /* success green */
  color: #fff;
  border-radius: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  min-width: 400px;
}
/* Light-green close icon */
#customSuccessToast .custom-close {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d4edda' viewBox='0 0 16 16'%3E%3Cpath d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:1rem;
  width:1.25rem; height:1.25rem;
  border:none; cursor:pointer; opacity:1;
}
/* Custom Style Overrides END */