.otp-input:focus {
      border-color: #BC0028 !important;
      outline: none;
  }


  .login-page-image {
      display: flex;
      justify-content: center;
  }

  .login-page-image img {
      width: 85%;
  }

  .login-page-footer a {
      text-decoration: none;
      color: #BC0028;
  }

  .login-page-footer p {
      font-size: 14px;
  }

  .form-group input::placeholder {
      opacity: 0;
  }


  .form-group-grid {
      --pad-top1: 0.8rem;
      --pad-top2: 0.8rem;
      --pad-left: 1rem !important;
      position: relative;
  }

  .form-group {
      --pad-top1: 0.8rem;
      --pad-top2: 0.8rem;
      --pad-left: 2.2rem;
      position: relative;
  }

  .form-group .grid-input label {
      position: absolute;
      left: var(--pad-left);
      top: var(--pad-top1);
      pointer-events: none;
      background-color: white;
      transition: all 0.3s ease-out;
      font-size: 14px;
  }

  .form-group label {
      position: absolute;
      left: var(--pad-left);
      top: var(--pad-top1);
      pointer-events: none;
      background-color: white;
      transition: all 0.3s ease-out;
      font-size: 14px;
  }

  .form-group input:focus+label,
  .form-group input:not(:placeholder-shown)+label {
      transform: translateY(calc(-50% - var(--pad-top2))) scale(.8);
      /* color: #BC0028 !important; */
      background-color: white;
  }

  .form-group input.grid-input:focus+label,
  .form-group input.grid-input:not(:placeholder-shown)+label {
      transform: translateY(calc(-50% - var(--pad-top2))) scale(.8);
      /* color: #BC0028 !important; */
      background-color: white;
  }

  .form-group select:focus+label,
  .form-group select:not([value=""])+label {
      transform: translateY(calc(-50% - var(--pad-top2))) scale(.8);
      /* color: #BC0028 !important; */
      background-color: white !important;
  }

  .form-group select.grid-input:focus+label,
  .form-group select.grid-input:not([value=""])+label {
      transform: translateY(calc(-50% - var(--pad-top2))) scale(.8);
      /* color: #BC0028 !important; */
      background-color: white !important;
  }

  .page-header {
      position: relative;
      background: url("/assets/image/breadcrumb.jpg");
      background-size: cover;
      /* padding-top: 100px; */
  }

  .breadcrumb-layer {
      position: absolute;
      height: 100%;
      width: 100%;
      background-color: hsl(347, 100%, 37%, 0.7);
  }

  section {
      margin-top: 65px;
  }

  .grid-input {
      margin-left: 0 !important;
      margin-right: 0 !important;
  }



  #timeline-wrap {
      /* margin:20% 20%; */
      margin: 40px 100px;
      margin-top: 120px;
      top: 100;
      position: relative;

  }

  #timeline {
      height: 1px;
      width: 100%;
      background-color: #BC0028;
      position: relative;

  }

  .marker {
      z-index: 1000;
      color: #fff;
      width: 45px;
      height: 45px;
      line-height: 45px;
      font-size: 1.3em;
      text-align: center;
      position: absolute;
      margin-left: -25px;
      background-color: #BC0028;
      border-radius: 50%;
  }

  .marker:hover {
      -moz-transform: scale(1.2);
      -webkit-transform: scale(1.2);
      -o-transform: scale(1.2);
      -ms-transform: scale(1.2);
      transform: scale(1.2);

      -webkit-transition: all 300ms ease;
      -moz-transition: all 300ms ease;
      -ms-transition: all 300ms ease;
      -o-transition: all 300ms ease;
      transition: all 300ms ease;
  }

  .marker h6 {
      color: #222;
      margin: 10px 0 0;
      font-size: 13px;
      display: block;
      display: flex;
      justify-content: center;
  }

  .timeline-icon.one {
      background-color: #BC0028;
  }

  .timeline-icon.two {
      background-color: #BC0028;
  }

  .timeline-icon.three {
      background-color: #BC0028;
  }

  .timeline-icon.four {
      background-color: #BC0028;
  }

  .timeline-icon.five {
      background-color: #BC0028;
  }

  .timeline-icon.six {
      background-color: #BC0028;
  }

  .timeline-icon.seven {
      background-color: #BC0028;
  }

  .bg-timeline-outline {
      background-color: white !important;
      color: #BC0028;
      border: 1px solid #BC0028;
  }


  .mfirst {
      top: -25px;
  }

  .m2 {
      top: -25px;
      left: 16.67%
  }

  .m3 {
      top: -25px;
      left: 33.33%
  }

  .m4 {
      top: -25px;
      left: 50%
  }

  .m5 {
      top: -25px;
      left: 66.67%
  }

  .m6 {
      top: -25px;
      left: 83.33%
  }


  .mlast {
      top: -25px;
      left: 100%
  }

  .timeline-panel {
      margin-top: 20%;
      width: 500px;
      height: 200px;
      background-color: #BC0028;
      border-radius: 2px;
      position: relative;
      text-align: left;
      padding: 10px;
      font-size: 20px;
      font-weight: bold;
      line-height: 20px;
      float: left;
  }

  .timeline-panel:after {
      content: '';
      position: absolute;
      margin-top: -12%;
      left: 10%;
      width: 0;
      height: 0;
      border: 12px solid transparent;
      border-bottom: 15px solid #BC0028;
  }

  .multi-select-values {
      background-color: #BC0028;
      color: white;
      margin: 2px;
      border-radius: 3px;
      padding: 2px 4px;
      font-size: 12px;
  }

  .multi-select-values i {
      font-size: 13px;
      cursor: pointer;
  }

  .bi-x::before {
      content: "\f62a";
      padding-top: 4px !important;
  }

  .required-message {
      font-size: 13px;
  }

  .thm-btn-small {
      background-color: #BC0028;
      color: white;
      font-size: 13px;
      border-radius: 30px;
      padding: 4px 15px;
      margin: 7px 0;
  }

  .thm-btn-small:hover {
      background-color: #BC0028 !important;
      text-decoration: none;
  }

  .interest p {
      font-size: 13px;
      margin-left: 3px;
      padding-top: 3px;
  }

  .interest i::before {
      padding-top: 0 !important;
  }

  .interest-span {
      font-size: 13px;
      background-color: #bc00281f;
      border-radius: 3px;
      padding: 2px 4px;
      margin: 0 2px;
  }

  .custom-dropdown-values {
      background-color: #fff;
  }


  .navbar-login-btn {
      background-color: #BC0028;
      color: white !important;
      border-radius: 30px;
      padding: 8px 30px !important;
      /* margin-left: 10px; */
      font-size: 14px;
  }


  .profile-image-preview-1 img {
      width: 50px;
      height: 50px;
      border-radius: 10%;
      object-fit: cover;
  }


  .user-images-preview img {
      width: 100px;
      height: 100px;
      border-radius: 10%;
      object-fit: cover;
  }

  .user-images-preview {
      position: relative;
  }

  .user-images-preview button {
      background-color: #BC0028;
      border-radius: 50%;
      padding: 2px 6px;
      position: absolute;
      top: -5px;
      right: -5px;
      color: white;
      border: none;
      cursor: pointer;
  }

  .user-images-preview button i {}

  input[type="checkbox"] {
      accent-color: #BC0028;
  }

  .dropdown-fixed-size {
      max-height: 180px;
      overflow-y: scroll;
  }

  .custom-dropdown {
      cursor: pointer;
  }

  .text-area-desc {
      width: 100%;
      border-radius: 20px;
      padding: 10px;
      font-size: 14px;
      color: gray;
      padding-left: 14px;
      border: 1px solid #e1dbdb;
  }

  .text-area-label {
      font-size: 14px;
      color: #3a3939;
  }

  textarea:focus {
      outline: none;
      border: 1px solid #BC0028;
  }

  .multidropdown-main-options {
      max-height: 200px;
      position: absolute;
      top: 100%;
      z-index: 999;
  }

  .add-interest-btn {
      padding: 12px 16px;
      margin: 0px 0;
      margin-top: 7px;
  }

  .add-interest-delete-btn {
      padding: 12px 33px;
      margin: 0px 0;
      margin-top: 7px;
      border: 1px solid #BC0028;
      background: white;
      color: black;
  }

  .matched-profile-link p,
  .matched-profile-link {
      color: #000;
      text-decoration: none;
  }

  .proposal-card {
      cursor: pointer;
  }

  .proposal-card-active {
      background-color: #BC0028;
  }

  .proposal-card-active h4,
  .proposal-card-active p {
      color: white;
  }

  .activity-nodata-img {
      width: 500px;
      margin: 0 auto;
  }

  .age-search-select {
      border: 1px solid #ccc;
      border-radius: 4px;
      max-height: 300px;
      padding: 2px 2px;
  }

  .age-search-select:focus {
      outline: none;
  }

  .age-search-select::-webkit-scrollbar {
      display: none;
  }

  .hero {
      /* background: linear-gradient(to right, #BC0028, #e00000); */
      background-color: #f2f2f2da;
      color: #000;
      padding: 100px 0;
      text-align: center;
  }

  .hero h1 {
      font-size: 3rem;
      font-weight: 700;
  }

  .download-buttons img {
      height: 50px;
      margin: 10px;
  }

  .thank-you-card {
      max-width: 500px;
      margin: 30px auto;
      background: white;
      border: 0.5px solid #ccc;
      border-radius: 12px;
      padding: 40px;
      text-align: center;
  }

  .thank-you-icon {
      font-size: 60px;
      color: #28a745;
  }

  .home-btn {
      background-color: var(--primary-color);
      border: none;
      border-radius: 7px;
      text-decoration: none;
  }

  .btn-primary:hover {
      background-color: var(--hover-color);
      text-decoration: underline;
  }

  .matched-button-active {
      background-color: #BC0028;
      color: white;
      border-color: #BC0028;
  }

  .matched-button-active:hover {
      background-color: #BC0028;
      color: white;
      border-color: #BC0028;
  }

  a {
      text-decoration: none !important;
  }

  .match-criteria-label {
      font-size: 14px;
  }

  .match-criteria-info input[type="checkbox"]~label,
  .match-criteria-info input[type="radio"]~label {
      font-size: 12px;
  }

  .age-match-select {
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 13px;
  }

  .age-match-select:focus {
      outline: none;
  }

  .age-match-select::-webkit-scrollbar {
      display: none;
  }

  .registration-section h6 {
      font-weight: 700;
  }

  .public-view {
      border-radius: 5px;
      border: 1px solid #bc00282e;
      color: #ded3d3;
      padding: 1px 3px;
  }

  .public-view i {
      color: #BC0028;
  }

  .custom-tooltip {
      padding: 10px;
  }

  .user-big-images {
      height: 370px !important;
      object-fit: cover;
  }

  .user-small-images {
      height: 90px !important;
      object-fit: cover;
  }

  .profile-buttons button {
      border: none;
  }

  .sidebar {
      overflow: auto;
      position: -webkit-sticky;
      position: sticky;
      top: 2%;
      margin-top: 7px;
  }





  .profile-listing-card {
      background-color: #f0eded;
      border: 0.5px solid f0eded;
      border-radius: 12px;
      width: 500px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
      padding: 16px 20px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      transition: box-shadow 0.3s ease;
      box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
      cursor: pointer;
  }

  .profile-listing-card:hover {
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  }

  .avatar {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 20px;
      flex-shrink: 0;
      border: 3px solid #ff4d4d;
  }

  .avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }



  .info h2 {
      margin: 0;
      font-size: 20px;
      font-weight: 700;
      color: #333;
  }

  .info .meta {
      font-size: 14px;
      color: #666;
      display: flex;
      align-items: center;
      margin-top: 4px;
  }

  .meta i {
      margin-right: 6px;
      color: #999;
  }

  .meta+.meta {
      margin-top: 4px;
  }

  .select-user-container {
      margin-top: 7rem;
  }

  .userimages-icon {
      cursor: pointer;
      background: rgb(188 0 40 / 53%) !important;
      color: white !important;
  }

  .navbar-login-btn-light {
      background-color: white;
      border: 1px solid #BC0028 !important;
      color: #BC0028;
      border-radius: 30px;
      padding: 9px 30px !important;
      font-size: 14px;
  }




  /* From Uiverse.io by Galahhad */
  /* The design is inspired from the mockapi.io */

  .popup {
      --burger-line-width: 1.125em;
      --burger-line-height: 0.125em;
      --burger-offset: 0.625em;
      --burger-bg: white;
      --burger-color: #333;
      --burger-line-border-radius: 0.1875em;
      --burger-diameter: 2.125em;
      --burger-btn-border-radius: calc(var(--burger-diameter) / 2);
      --burger-line-transition: .3s;
      --burger-transition: all .1s ease-in-out;
      --burger-hover-scale: 1.1;
      --burger-active-scale: .95;
      --burger-enable-outline-color: var(--burger-bg);
      --burger-enable-outline-width: 0.125em;
      --burger-enable-outline-offset: var(--burger-enable-outline-width);
      /* nav */
      --nav-padding-x: 0.25em;
      --nav-padding-y: 0.625em;
      --nav-border-radius: 0.375em;
      --nav-border-color: #777;
      --nav-border-width: 0.0625em;
      --nav-shadow-color: rgba(0, 0, 0, .2);
      --nav-shadow-width: 0 1px 5px;
      --nav-bg: #eee;
      --nav-default-scale: .8;
      --nav-active-scale: 1;
      --nav-position-left: 0;
      --nav-position-right: unset;
      /* if you want to change sides just switch one property */
      /* from properties to "unset" and the other to 0 */
      /* title */
      --nav-title-size: 0.625em;
      --nav-title-color: #777;
      --nav-title-padding-x: 1rem;
      --nav-title-padding-y: 0.25em;
      /* nav button */
      --nav-button-padding-x: 1rem;
      --nav-button-padding-y: 0.375em;
      --nav-button-border-radius: 0.375em;
      --nav-button-font-size: 12px;
      --nav-button-hover-bg: #BC0028;
      --nav-button-hover-text-color: #fff;
      --nav-button-distance: 0.875em;
      /* underline */
      --underline-border-width: 0.0625em;
      --underline-border-color: #BC0028;
      --underline-margin-y: 0.3125em;
  }

  /* popup settings 👆 */

  .popup {
      display: inline-block;
      text-rendering: optimizeLegibility;
      position: relative;
  }

  .popup input {
      display: none;
  }

  .burger {
      display: flex;
      position: relative;
      align-items: center;
      justify-content: center;
      background: var(--burger-bg);
      width: var(--burger-diameter);
      height: var(--burger-diameter);
      border-radius: var(--burger-btn-border-radius);
      border: none;
      cursor: pointer;
      overflow: hidden;
      transition: var(--burger-transition);
      outline: var(--burger-enable-outline-width) solid transparent;
      outline-offset: 0;
      border: 1px solid #BC0028;
      transform: scale(var(--burger-hover-scale));
  }

  .burger span {
      height: var(--burger-line-height);
      width: var(--burger-line-width);
      background: var(--burger-color);
      border-radius: var(--burger-line-border-radius);
      position: absolute;
      transition: var(--burger-line-transition);
  }

  .burger span:nth-child(1) {
      top: var(--burger-offset);
  }

  .burger span:nth-child(2) {
      bottom: var(--burger-offset);
  }

  .burger span:nth-child(3) {
      top: 50%;
      transform: translateY(-50%);
  }

  .popup-window {
      transform: scale(var(--nav-default-scale));
      visibility: hidden;
      opacity: 0;
      position: absolute;
      padding: var(--nav-padding-y) var(--nav-padding-x);
      background: var(--nav-bg);
      font-family: var(--nav-font-family);
      color: var(--nav-text-color);
      border-radius: var(--nav-border-radius);
      box-shadow: var(--nav-shadow-width) var(--nav-shadow-color);
      /* border: var(--nav-border-width) solid var(--nav-border-color); */
      top: calc(var(--burger-diameter) + var(--burger-enable-outline-width) + var(--burger-enable-outline-offset));
      left: var(--nav-position-left);
      right: var(--nav-position-right);
      transition: var(--burger-transition);
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  }

  .popup-window legend {
      padding: var(--nav-title-padding-y) var(--nav-title-padding-x);
      margin: 0;
      color: var(--nav-title-color);
      font-size: var(--nav-title-size);
      text-transform: uppercase;
  }

  .popup-window ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
  }

  .popup-window ul button {
      outline: none;
      width: 100%;
      border: none;
      background: none;
      display: flex;
      align-items: center;
      color: var(--burger-color);
      font-size: var(--nav-button-font-size);
      padding: var(--nav-button-padding-y) var(--nav-button-padding-x);
      white-space: nowrap;
      border-radius: var(--nav-button-border-radius);
      cursor: pointer;
      column-gap: var(--nav-button-distance);
      padding: 5px 8px;
  }

  .popup-window li {
      margin: 0;
  }

  .popup-window ul li:nth-child(1) svg,
  .popup-window ul li:nth-child(2) svg {
      color: cornflowerblue;
  }

  .popup-window ul li:nth-child(4) svg,
  .popup-window ul li:nth-child(5) svg {
      color: rgb(153, 153, 153);
  }

  .popup-window ul li:nth-child(7) svg {
      color: red;
  }

  .popup-window hr {
      margin: var(--underline-margin-y) 0;
      border: none;
      border-bottom: var(--underline-border-width) solid var(--underline-border-color);
  }

  /* actions */

  .popup-window ul button:hover,
  .popup-window ul button:focus-visible,
  .popup-window ul button:hover svg,
  .popup-window ul button:focus-visible svg {
      color: var(--nav-button-hover-text-color);
      background: var(--nav-button-hover-bg);
  }

  .burger:hover {
      transform: scale(1.2);
  }

  .burger:active {
      transform: scale(var(--burger-active-scale));
  }

  .burger:focus:not(:hover) {
      outline-color: var(--burger-enable-outline-color);
      outline-offset: var(--burger-enable-outline-offset);
  }

  .popup input:checked+.burger span:nth-child(1) {
      top: 50%;
      transform: translateY(-50%) rotate(45deg);
  }

  .popup input:checked+.burger span:nth-child(2) {
      bottom: 50%;
      transform: translateY(50%) rotate(-45deg);
  }

  .popup input:checked+.burger span:nth-child(3) {
      transform: translateX(calc(var(--burger-diameter) * -1 - var(--burger-line-width)));
  }

  .popup input:checked~nav {
      z-index: 99;
      transform: scale(var(--nav-active-scale));
      visibility: visible;
      opacity: 1;
  }

  .activity-text {
      font-size: 14px;
      margin: 12px;
  }




  .custom-modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.6);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 999999;
  }

  .custom-modal {
      background: #ffffff;
      width: 100%;
      max-width: 400px;
      border-radius: 8px;
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      animation: fadeIn 0.3s ease-in-out;
  }

  .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #dee2e6;
      padding-bottom: 10px;
  }

  .modal-body {
      margin-top: 15px;
  }

  .modal-footer {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 7px;
  }

  .close-btn {
      background: transparent;
      border: none;
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
  }

  .report-btn {
      background: none;
      border: none;
      color: #BC0028;
      cursor: pointer;
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 5px;
  }

  @keyframes fadeIn {
      from {
          opacity: 0;
          transform: translateY(-10%);
      }

      to {
          opacity: 1;
          transform: translateY(0);
      }
  }


  .form-check-input:checked {
      background-color: #BC0028;
      border-color: #BC0028;
  }

  .form-check-input:focus {
      box-shadow: 0 0 0 .25rem rgba(253, 13, 13, 0.25)
  }

  .form-control:focus {
      box-shadow: none !important;
      border-color: #BC0028;
  }

  .btn-adi {
      border-radius: 30px;
  }

  .font-label {
      font-size: 13px
  }

  .customReason {
      font-size: 13px;
  }

  .main-button {
      background-color: #BC0028;
      color: white;
      border: none;
      border-radius: 30px;
      padding: 8px 21px;
      font-size: 13px;
  }

  .login-btn:hover {
      text-decoration: none;
  }

  .user-image img {
      width: 80px;
      height: 80px;
      object-fit: cover;
      border-radius: 100%;
      margin-right: 25px;
  }


  .preference-header p {
      background: #eee;
      padding: 6px 12px 6px 12px;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 500;
      text-align: center;
      margin-bottom: 0px;
  }


  .detail-label {
      font-size: 15px;
  }

  .detail-value {
      font-size: 14px;
  }


  .rcm-heading {
      font-size: 15px;
      font-weight: 600;
      color: #000;
      margin-bottom: 0px;
  }



  /* Phone CSS  */


  .mobile-view {
      display: block;
  }

  @media (max-width: 768px) {
      .mobile-view {
          display: none;
      }

      .detail-row {
          gap: 40px;
      }

      .profile-footer-2 {
          width: 100%;
      }

      .coustom-profile-card {
          height: 100%;
      }

      .mmt {
          margin-top: 30px;
      }

      .coustom-text-overlay {
          height: 225px !important;
      }

      .mobile-start {
          justify-content: start !important;
      }
      .multi-select-search.form-control{
        font-size: 10px;
      }
      .multi-select-search.form-control label {
    font-size: 10px;
}
      .multi-select-search.form-control input[type="checkbox"] {
   width: 12px !important;
    height: 9px !important;
    margin: 0px 5px 0 !important;
}
  }


  .photo-request-layer-box {
      position: relative;
  }

  .photo-request-layer {
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #3e3030db;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
  }

  .photo-request-layer p {
      font-size: 12px;
      cursor: pointer;
  }

  .photo-request-layer i {
      line-height: 12px;
  }


  .react-datepicker-wrapper {   
    width: 100%;
  }