/* added by Siranga 26-04-2024 */
  .columnBlockLayout-sg {
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 10px;
  }

  ul.custom-bullet {
    list-style-type: none;
    padding-left: 10px;
  }

  ul.custom-bullet li::before {
    content: "-";
    display: inline-block;
    width: 1em;
    /* Adjust as needed */
    margin-left: -1em;
    /* Adjust as needed */
  }

  ul li:not(:last-child) {
    margin-bottom: 10px;
    /* Space between items, but not after the last one */
  }

  a.anchor-inherit-styles {
    font-weight: bold;
  }


  .crmEntityFormView .cell .picklist input[type=radio] {
    vertical-align: initial;
    transform: scale(1.2);
    /* or you can use 'inherit' or 'baseline' */
  }


  /* update complaint form radio buttons misalignment fix changed to margin 2>6 vertical*/
  html[dir=ltr] .crmEntityFormView .cell .picklist input[type=radio] {
    margin: 6px 12px 5px 0 !important;
  }

  /* update complaint form radio buttons misalignment fix changed to margin 2>6 horizontal */
  html[dir=ltr] .crmEntityFormView .cell.boolean-radio-cell input[type=radio] {
    margin: 6px 5px 5px 10px !important;
  }

  /* remove entityfrom border changed 1>0*/
  .crmEntityFormView,
  .entitylist,
  .modal-content,
  .popover-content {
    border: 0px solid #f2f2f2 !important;
  }

  .crmEntityFormView .actions {
    border-top: 0px solid #e5e5e5 !important;
  }

  .crmEntityFormView div.description {
    font-size: 0.9rem !important;
    opacity: 0.7;
  }


  .crmEntityFormView fieldset:not(.address-section) {
    margin-bottom: 0px !important;
}




  @media only screen and (min-width: 768px) {
    legend.section-title h3 {
      padding-left: 28px;
    }

    #custom-progressbar-container {
      margin-bottom: 40px;
    }

  }


  /* action buttons width on a smaller screen */
  @media only screen and (max-width: 767px) {
    .custom-contacttitle {
      padding: 0 !important;
    }

    .entity-action-button {
      width: 100%;
      min-width: 0 !important;
    }

    /* hide page title on mobile screens */
    h1.siteTitle {
      display: none !important;
      /* Hide the title on mobile screens */
    }

    /* add a bottom padding to the previous next buttons */
    .btn-group.entity-action-button {
      padding-bottom: 10px;
    }
  }

  .main-custom-siteTitle{
    flex: auto;
  }

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

  .hidden-row {
    display: none;
  }

  h1.siteTitle {
    font-size: 30px !important;
    padding-left: 3em !important;
  }



  /* table[data-name="tabyourdetails_section_6"] legend.section-title h3::after {
  content: " *";
  color: red;
} */

  /* table[data-name="tabyourdetails_section_6"] + legend h3 {
  content: " *" !important;
  color: red !important;
} */

  /* @media (min-width: 768px) {
    .custom-contacttitle {
      padding: 0 28px 0px;
      font-size: 1rem;
      font-weight: 700;
    }
  } */

  .custom-contacttitle {
    padding: 0 28px 0px;
    font-size: 1rem;
    font-weight: 700;
  }




  .custom-contacttitle::after {
    content: " *" !important;
    color: red !important;
  }


  /* .textarea-one-row {
    height: 1.5em;
    resize: none;
    overflow-y: hidden;
} */


  ::placeholder {
    color: grey !important;
    font-size: 1rem !important;
    opacity: 0.5 !important;
  }


  .custom-placeholder::placeholder {
    color: grey;
    font-size: 1rem;
    opacity: 0.5;
  }

  .smallText-faded {
    font-size: 0.9rem;
    /* opacity: 0.5; */
  }

  .columnBlockLayout-flex {
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 10px;
  }


  footer .footer-bottom p {
    color: #000 !important;
  }


  /* modern multiselect styles start*/
  .f16xq7d1 {
    background-color: #FFFFFF !important;
  }

  .fb073pr {
    border-bottom-color: #949494 !important;
  }

  .fjscplz {
    border-left-color: #949494 !important;
  }

  .f1gn591s {
    border-right-color: #949494 !important;
  }

  .fghlq4f {
    border-top-color: #949494 !important;
  }

  /* modern multiselect styles end*/


  textarea,
  select {
    border: 1px solid #949494 !important;
  }

  textarea {
    min-height: 120px !important;
  }




  .address-section {
    border: 1px dashed #bbb !important;
    padding: 10px 0px !important;
  }


  .description-text-modal-link {
    text-decoration: underline;
    cursor: pointer;
  }

  .address-edit-pencil {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(50%);
    border: none;
    background-color: transparent;
  }

  .noborder {
    border: none !important;
  }

  .custom-checkbox {
    margin-left: -20px !important;
    /* margin-top: 8px !important; */
    transform: scale(1.3);
  }

  .custom-font-icon-styles {
    font-size: 3em;
    color: #00803C;
  }

  /* customize form elements */
  .form-control,
  .input-group-text {
    height: 52px;
  }

  .input-group-addon {
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
  }



  .crmEntityFormView label {
    margin-bottom: 8px;
  }

  .crmEntityFormView .cell .field-label {
    margin-bottom: 8px;
  }

  .crmEntityFormView .cell {
    padding-bottom: 30px !important;
  }

  .f1tvdnth {
    height: 52px !important;
  }

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

  /* page component styles */
  .quick-exit {
    background-color: #4574BA !important;
    border-color: #4574BA !important;
    color: white !important;
    font-weight: 0 !important;
  }

  .btn-return-to-website {
    background-color: #EFB154 !important;
    border-color: #EFB154 !important;
  }

  .button1,
  .btn-primary,
  .btn-default,
  .btn-secondary{
    height: 44px !important;
  }

  /* p,
  .p, */
  .page-copy p,
  .page_section p,
  .section-diagonal-left p,
  .section-diagonal-right p,
  p.form-text span,
  .custom-bullet li {
    font-size: 16px !important;
    font-family: Arial, sans-serif !important;
    font-weight: normal !important;
  }

    p,
    .p,
    .page_section p,
    .section-diagonal-left p,
    .section-diagonal-right p,
    p.form-text span {
      font-size: 16px !important;
      font-family: Arial, sans-serif !important;
      font-weight: normal !important;
    }

  .page-copy .entity-form,
  .page-copy .entity-form label,
  .page-copy .entity-form .description {
    font-family: Arial, sans-serif !important;
  }

  /* progress bar font size */
  ol.progress.list-group.top {
    font-size: 12px !important;
    font-family: Arial, sans-serif !important;
  }







  /* custom progress styles start */
  /* @media (max-width: 767px) {
    .list-group-item.step {
      font-size: 14px; 
      line-height: 1.2;
      max-width: 80px; 
      word-wrap: break-word;
    }
  } */

  /* 
.progress.list-group.top.progress-bar-custom li {
    font-size: 16px;
}

.progress.list-group.top.progress-bar-custom li span {
    font-size: inherit;
} */

  /* For extra small devices (portrait phones, less than 576px) */
  /* For small devices (landscape phones, 576px to 767px) */

  @media (max-width: 476px) {
    ol.progress-bar-custom .step .number {
      margin-bottom: 35px !important;
    }

    ol.progress-bar-custom .list-group-item-success::before {
      margin-bottom: 35px !important;
    }
  }


  @media (min-width: 477px) and (max-width: 767px) {
    ol.progress-bar-custom .step .number {
      margin-bottom: 25px !important;
    }

    ol.progress-bar-custom .list-group-item-success::before {
      margin-bottom: 25px !important;
    }
  }


  @media (max-width: 767px) {

    ol.progress.bottom,
    ol.progress.top {
      flex-direction: row !important;
    }

  }


  /* Apply styles only on desktop screens (min-width: 768px or any other breakpoint you prefer) */
  @media (min-width: 768px) {
    ol.progress-bar-custom .step .number {
      margin-bottom: 15px !important;
    }

    ol.progress-bar-custom .list-group-item-success::before {
      margin-bottom: 15px !important;
    }
  }


  /* custom progress bar */
  .sticky-progress {
    position: -webkit-sticky;
    /* For Safari */
    position: sticky;
    top: 0;
    background-color: #f8f9fa;
    z-index: 1000;
    /* Ensure it is on top of other elements */
  }

  .sticky {
    position: sticky;
    top: 0 !Important;
    z-index: 1000;
  }

  #custom-progressbar-container .container {
    width: 98%;
    max-width: 1350px;
  }

  #custom-progressbar-container {
    width: 100%;
    /* background: #F2F3F5; */
    background: #ffffff;
    padding: 8px 0;
    min-height: 63px;
    top: -63px;
    transition: .5s;
  }


  /* Progress indicator styles */
  ol.progress-bar-custom.list-group.top {
    background: none !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
  }

  /* .list-group-item {
  border: 0 !important;
}

.card-body,
.list-group-item {
  background-color: transparent !important;
}

.list-group-item.active {
  color: #160c0c !important;
  font-weight: bold !important;
} */

  ol.progress-bar-custom .list-group-item {
    border: 0 !important;
  }

  ol.progress-bar-custom .card-body,
  ol.progress-bar-custom .list-group-item {
    background-color: transparent !important;
  }

  ol.progress-bar-custom .list-group-item.active {
    color: #160c0c !important;
    font-weight: bold !important;
  }



  /* General styling for the progress bar */
  .progress-bar-custom {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    list-style: none !important;
    padding: 0 !important;
    position: relative !important;
    margin: 20px 0 !important;
  }

  /* Line connecting the steps */
  .progress-bar-custom::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50px !important;
    right: 50px !important;
    height: 2px !important;
    background-color: #C6C6C6 !important;
    z-index: 0 !important;
    transform: translateY(-50%) !important;
  }

  /* Individual step styling */
  ol.progress-bar-custom .step {
    position: relative !important;
    text-align: center !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: center !important;
    margin-top: -10px !important;
    gap: 8px !important;
  }

  @media only screen and (min-width: 446px) and (max-width: 767px) {
    ol.progress-bar-custom .step {
      margin-top: 0 !important;
      /* Or any other value to override the -10px */
    }
  }


  /* Number styling */
  ol.progress-bar-custom .step .number {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background-color: #000 !important;
    color: #fff !important;
    line-height: 24px !important;
    padding: 20px !important;
  }

  /* Label styling */
  ol.progress-bar-custom .step .label {
    display: block !important;
    margin-top: 8px !important;
  }

  /* Completed steps */
  ol.progress-bar-custom .list-group-item-success .number {
    background-color: #00803C !important;
    color: #fff !important;
  }

  ol.progress-bar-custom .list-group-item-success .number {
    display: none !important;
    /* Hides the number but keeps the space */
  }

  ol.progress-bar-custom .list-group-item-success::before {
    content: "\f00c";
    /* Unicode for Font Awesome check icon */
    font-family: "Font Awesome 5 Free";
    /* Ensure the correct Font Awesome version is used */
    font-weight: 900;
    /* Required for Font Awesome icons */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background-color: #00803C !important;
    color: #fff !important;
    line-height: 24px !important;
    padding: 20px !important;
  }

  /* Current step */
  ol.progress-bar-custom .step.active .number {
    background-color: #1E3845 !important;
    color: #fff !important;
  }

  /* Incomplete steps */
  ol.progress-bar-custom .step.incomplete .number {
    background-color: #C6C6C6 !important;
    color: #fff !important;
  }

  /* ol.progress-bar-custom .step.active::after {
      background: blue;
    } */





  /* This is to show progress */
  /* ol.progress-bar-custom .step.active .number:after {
      content: '';
      position: absolute;
      top: 50%;
      left: 100%;
      height: 2px;
      width: 400%;
      background: black;
      transform: translateY(200%);
      z-index: -1;
      margin-left: -30px;
    }
  

    ol.progress-bar-custom .step.active .number::after{
      background: #ff0000;
    } */

  /* .progress-bar-custom,
  .progress-bar-custom::after,
  .progress-bar-custom::before {
      box-sizing: unset !important;
  } */

  ol.progress-bar-custom span.fa-solid.fa-check {
    display: none;
  }

  /* custom progress styles end */


  /* recaptcha styles start*/
  .captcha-cell .RadCaptcha p {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* recaptcha styles end*/


  .checkbox-cell {
    margin-bottom: 20px;
    display: block;
  }

  .crmEntityFormView .form-control.readonly:focus,
  .crmEntityFormView .form-control[readonly][disabled]:focus,
  .form-readonly .form-control:focus {
    outline: initial !important;
  }

  .btn-group .btn {
    min-width: 100px;
  }

  .crmEntityFormView div.description {
    margin-bottom: 8px !important;
  }

  .crmEntityFormView div.description.above[data-bs-toggle="modal"] {
    color: #0000EE;
  }

  .ui-autocomplete .ui-menu-item {
    margin-bottom: 5px;
    /* Adjust the value as needed */
    padding: 5px;
    /* Optional: Adds padding inside each item */
  }


  /* Style for the spinner */
  /* .spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border-left-color: #09f;
  animation: spin 1s linear infinite;
} */



  /* start address search spinner */
  /* Style for the spinner */
  .spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border-left-color: #DD6C25;
    /* Start with one of the colours */
    animation: spin 1s linear infinite, color-change 2s ease-in-out infinite;
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  /* Keyframe for color change */
  @keyframes color-change {
    0% {
      border-left-color: #DD6C25;
    }

    25% {
      border-left-color: #EFB154;
    }

    50% {
      border-left-color: #1E3845;
    }

    75% {
      border-left-color: #4C7ABD;
    }

    100% {
      border-left-color: #6BA48A;
    }
  }

  /* end address search spinner */














  /* Keyframes for spinning animation */
  /* @keyframes spin {
  to { transform: rotate(360deg); }
} */

  /* Center the loader in the input field */
  .autocomplete-loader {
    position: absolute;
    right: 10px;
    /* Adjust based on your input's padding */
    top: 50%;
    transform: translateY(50%);
  }


  .right-custom-icon::before {
    content: "\f26e";
    margin-right: 10px;
    font-family: 'bootstrap-icons';
    vertical-align: -.25em;
    font-size: 1.2em;
    font-weight: 700;
  }

  .cross-custom-icon::before {
    content: "\f62a";
    margin-right: 10px;
    font-family: 'bootstrap-icons';
    vertical-align: -.25em;
    font-size: 1.2em;
    font-weight: 700;
  }

  .right-custom-icon,
  .cross-custom-icon {
    list-style-type: none;
    margin-bottom: 10px;
    padding-left: 0;
  }

  .modal-header button {
    border: none;
    background: none;
    font-size: 30px;
  }


  .modal-dialog:not(.message-modal .modal-dialog) {
    height: 70vh;
    max-height: 70vh;
  }

  .modal-content:not(.message-modal .modal-content) {
    height: 100%;
    overflow-y: auto;
  }



  /* .spinnerform {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #4caf50;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#spinnerform.hidden {
  display: none;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
} 
*/


  /* load */

  #pulsecontainer.hidden {
    display: none;
  }

  .pulse-container {
    position: absolute;
    width: 60px;
    height: 60px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .pulse {
    position: absolute;
    border-radius: 50%;
    border: 4px solid;
    opacity: 0;
    animation: pulse 1.5s infinite ease-in-out;
  }

  .pulse:nth-child(1) {
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    border-color: #DD6C25;
  }

  .pulse:nth-child(2) {
    width: 80px;
    height: 80px;
    animation-delay: 0.3s;
    border-color: #EFB154;
  }

  .pulse:nth-child(3) {
    width: 100px;
    height: 100px;
    animation-delay: 0.6s;
    border-color: #1E3845;
  }

  @keyframes pulse {
    0% {
      opacity: 0.6;
      transform: scale(0.8);
      border-color: #DD6C25;
    }

    25% {
      border-color: #EFB154;
    }

    50% {
      opacity: 0;
      transform: scale(1.2);
      border-color: #1E3845;
    }

    75% {
      border-color: #4C7ABD;
    }

    100% {
      opacity: 0.6;
      transform: scale(0.8);
      border-color: #6BA48A;
    }
  }

  label.form-control.readonly {
    height: auto;
  }

  ul {
    font-family: Arial, sans-serif !important;
  }

  ul li {
    font-family: Arial, sans-serif !important;
  }

  .btn.create-action {
    display: flex;
    align-items: center;
}

.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
  background-color: #A9A9A9;
  /* Dark grey for disabled state */
  border-color: #A9A9A9;
  cursor: not-allowed;
  /* Cursor style */
  opacity: 0.6;
  /* Slight transparency */
  transition: background-color 0.3s ease;
  /* Smooth transition */
}

.special-message {
  position: relative;
  margin-top: 10px;
  padding: 15px;
  background-color: #305B9C;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  color: #FFFFFF; /* Default text colour */
  font-family: 'Arial', sans-serif;
  font-size: 1.1em;
  text-align: center;
}

.special-message:hover {
  background-color: #3e659e;
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
}

/* Change hyperlink colour to white */
.special-message a {
  color: #FFFFFF; /* White for hyperlinks */
  text-decoration: underline; /* Optional: underline for links */
}

.special-message a:hover {
  color: #e6e6e6; /* Optional: slightly lighter colour on hover */
}

.smalltitle a{
  font-size: 0.9rem !important;
    opacity: 0.7;
}