*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: "DM Sans", sans-serif !important;
}

body {
  &.no-scroll::-webkit-scrollbar {
    display: none;
    overflow-y: hidden;
  }
}

.app {
  height: 100vh;

  #google-signin-btn {
    border: 1px solid #2e2e2e;
    border-radius: 5px;
    padding: 5px;
    cursor: pointer;
    color: #2e2e2e;
  }
}

.app-fastmekanik {
  position: relative;
  min-height: 100vh;

  .loading-modal-overlay {
    background-color: hsla(0, 0%, 18%, 0.192);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;

    .loading-modal-content {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #ffffff;
      width: 100%;
      max-width: 300px;
      height: 300px;
      padding: 20px;
      border-radius: 20px;

      svg {
        animation: mover 1s infinite alternate;
      }
    }
  }

  input,
  textarea {
    &.required-error {
      border: 2px solid red;
    }
  }
}

.kofi-tabs {
  display: flex;
  align-items: center;
  border: 1px solid #c6c6c6;
  border-radius: 10px;
  .tab {
    cursor: pointer;
    border-right: 1px solid #c6c6c6;
    padding: 20px;

    .iconify {
      width: 2rem;
      height: 2rem;
    }

    &.active:first-child {
      background-color: #1768e1;
      color: #ffffff;
      border-radius: 10px 0 0 10px;
    }

    &.active {
      background-color: #1768e1;
      color: #ffffff;
    }

    &.active:last-child {
      background-color: #1768e1;
      color: #ffffff;
      border-radius: 0 10px 10px 0;
    }
  }

  .tab:last-child {
    border-right: none;
  }
}

.fk-btn-primary {
  background-color: #1768e1;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;

  &.default-static {
    width: 100px !important;
  }

  svg.iconify {
    margin-right: 10px;
  }
}

.fk-btn-primary-stroked {
  border: 1px solid #1768e1;
  color: #1768e1;
  display: flex;
  justify-content: center;
  align-items: center;

  &.default-static {
    width: 100px !important;
  }

  svg.iconify {
    margin-right: 10px;
  }
}

.fm-btn-disabled {
  background-color: #bcbcbc;
  color: #6e6e6e;
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;

  &.default-static {
    width: 100px !important;
  }
}

.fm-custom-loader {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 8px solid;
  border-color: #e4e4ed;
  border-right-color: #1768e1;
  animation: s2 1s infinite linear;
  display: none;

  &.search-loader {
    width: 12px;
    height: 12px;
  }

  &.mini {
    border: 3.8px solid;
    width: 30px;
    height: 30px;
  }
}

@keyframes s2 {
  to {
    transform: rotate(1turn);
  }
}

.fm-custom-loader-mini {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 3.8px solid #ffffff;
  animation: spinner-bulqg1 0.8s infinite linear alternate, spinner-oaa3wk 1.6s infinite linear;
}

@keyframes spinner-bulqg1 {
  0% {
    clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
  }

  12.5% {
    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
  }

  25% {
    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);
  }

  50% {
    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
  }

  62.5% {
    clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
  }

  75% {
    clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%);
  }

  100% {
    clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%);
  }
}

@keyframes spinner-oaa3wk {
  0% {
    transform: scaleY(1) rotate(0deg);
  }

  49.99% {
    transform: scaleY(1) rotate(135deg);
  }

  50% {
    transform: scaleY(-1) rotate(0deg);
  }

  100% {
    transform: scaleY(-1) rotate(-135deg);
  }
}

@keyframes mover {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-10px);
  }
}

.fm-user-review-circle {
  display: flex;
  .circle-rate-5 {
    border: 1px solid var(--accent);

    &.fill {
      background-color: var(--accent);
    }
    width: 15px;
    height: 15px;
    margin-right: 10px;
    border-radius: 20px;
  }

  .circle-rate-4 {
    border: 1px solid var(--accent);

    &.fill {
      background-color: var(--accent);
    }
    width: 15px;
    height: 15px;
    margin-right: 10px;
    border-radius: 20px;
  }

  .circle-rate-3 {
    border: 1px solid var(--accent);

    &.fill {
      background-color: var(--accent);
    }
    width: 15px;
    height: 15px;
    margin-right: 10px;
    border-radius: 20px;
  }

  .circle-rate-2 {
    border: 1px solid var(--accent);

    &.fill {
      background-color: var(--accent);
    }
    width: 15px;
    height: 15px;
    margin-right: 10px;
    border-radius: 20px;
  }

  .circle-rate-1 {
    border: 1px solid var(--accent);

    &.fill {
      background-color: var(--accent);
    }
    width: 15px;
    height: 15px;
    margin-right: 10px;
    border-radius: 20px;
  }
}

table {
  thead {
    /* border-bottom: 1px solid #e1e1e1; */

    th {
      padding: 10px 0 10px 0;
    }
  }

  tbody {
    tr {
      cursor: pointer;
      td {
        padding: 10px 5px 10px 5px;

        &.vehicle {
          width: 20%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        span,
        p {
          &.pending {
            color: #1768e1;
          }

          &.cancelled {
            color: red;
          }

          &.scheduled {
            color: #e9b827;
          }

          &.working {
            color: #e9b827;
          }

          &.completed {
            color: #07cd46;
          }

          &.backjob {
            color: red;
          }
        }
      }
    }

    tr:hover {
      background-color: #eaf2fd;
    }
  }
}

span,
p {
  &.pending {
    color: #1768e1;
  }

  &.cancelled {
    color: red;
  }

  &.scheduled {
    color: #e9b827;
  }

  &.working {
    color: #e9b827;
  }

  &.completed {
    color: #07cd46;
  }

  &.backjob {
    color: red;
  }
}

.fm-header {
  display: flex;
  justify-content: center;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #ffffff;
  border-bottom: 1px solid #efefef;
  z-index: 2;

  .fm-header-container {
    display: flex;
    align-self: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1136px;
    padding: 15px;

    .fm-nav {
      display: flex;
      align-items: center;

      a {
        padding: 10px 30px 10px 30px;
        text-decoration: none;
        color: black;
        font-weight: 500;

        &.active {
          color: var(--accent);
          border: 1px solid #efefef;
          border-radius: 25px;
        }
      }

      a:hover {
        background-color: #efefef;
        border-radius: 25px;
      }
    }

    .fm-user-nav {
      .fm-user-avatar {
        border-radius: 10px;
        width: 40px;
        cursor: pointer;
      }

      .dropdown-menu {
        padding: 0em 0 !important;
        border-radius: 10px;
        overflow: hidden;
      }

      .dropdown-item {
        display: flex;
        align-items: center;
        padding: 0.7rem 1rem !important;

        svg.iconify {
          margin-right: 10px !important;
        }
      }

      .fm-nav-mobile {
        display: none;
      }
    }
  }
}

footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 10px;
  margin-top: 50px;
  background-color: #fbfdff;
  p {
    padding: 0;
    margin: 0;
    text-align: center;
  }
}

.fm-location-search-wrapper {
  width: 100%;
  max-width: 400px;
  display: flex;
  margin-bottom: 30px;

  .search-group {
    display: flex;
    width: 100%;

    .search-group-input {
      display: flex;

      .fm-location-search-input {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        padding: 10px;
      }

      .fm-my-location-button {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        margin-right: 10px;
        padding: 10px;
      }
    }

    .fm-location-search-button {
      width: 120px;
      font-size: 14px;
      padding: 10px;
    }
  }
}

.fm-content-wrapper {
  width: 100%;
  min-height: 100vh;
  padding-top: 7rem;
  display: flex;
  justify-content: center;

  .fm-content {
    width: 100%;
    max-width: 1136px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 100px;
    /*justify-content: center;*/

    .fm-login-card {
      width: 100%;
      max-width: 500px;
      height: 500px;
      box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
      border-radius: 20px;
      padding: 30px;

      .fm-login-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        height: 100%;

        .banner {
          h3 {
            /*margin-bottom: 40px;*/
          }
        }

        .form {
        }

        .car-repair-img {
          img {
            width: 200px;
          }
        }
      }
    }

    .fm-content-banner {
      width: 100%;
      /*height: 100vh;*/
      display: flex;
      justify-content: center;
      padding-bottom: 100px;
      margin-bottom: 20px;

      .fm-banner-headline {
        width: 100%;
        display: flex;
        /*align-items: center;  */
        justify-content: center;
        padding: 100px 20px 20px 20px;
        color: #ffffff;
        height: 100%;

        div {
          width: 100% !important;
          /* display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: flex-start; */
        }

        div.illustration {
          display: flex;
          justify-content: center;
          background-image: url("/assets/images/hero-section-illustration.png");
          background-size: cover;
          background-repeat: no-repeat;
          background-position-x: -100px;
          background-position-y: -140px;
        }

        img {
          width: 100%;
          max-width: 400px;
        }

        h3 {
          /* color: var(--accent); */
          color: black;
          font-weight: bolder;
          font-size: 3em;
          line-height: 50px;
          margin-bottom: 20px;
          /* text-shadow: 2px 3px 0px rgba(0, 0, 0, 1); */
        }

        p {
          color: #2e2e2e;
          font-size: 18px;
          line-height: 25px;
        }

        button {
          width: 40%;
          font-weight: bolder;
          display: block;
        }
      }
    }

    .fm-content-services {
      min-height: 80vh;
      h1 {
        color: black;
        /* color: var(--accent); */
        /* text-shadow: 2px 3px 0px rgba(0, 0, 0, 1); */
        font-weight: bolder;
      }

      .fm-services-offerings {
        display: flex;
        justify-content: flex-start;

        .fm-for-experts {
          padding: 20px;
          h3 {
            /* color: var(--accent); */
            color: #1e304c;
            font-weight: bolder;
            margin-bottom: 40px;
          }

          section {
            article {
              padding-bottom: 30px;
              display: flex;
              align-items: flex-start;
              svg {
                margin-right: 20px;
                background-color: var(--accent);
                color: #ffffff;
                border-radius: 10px;
                padding: 5px;
              }

              div {
                h5 {
                  color: #1e304c;
                  font-weight: bold;
                }
              }
            }
          }
        }

        .fm-for-customers {
          padding: 20px;
          h3 {
            /* color: var(--accent); */
            color: #1e304c;
            font-weight: bolder;
            margin-bottom: 40px;
          }

          section {
            article {
              padding-bottom: 30px;
              display: flex;
              align-items: flex-start;

              svg {
                margin-right: 20px;
                background-color: var(--accent);
                color: #ffffff;
                border-radius: 10px;
                padding: 5px;
              }

              div {
                h5 {
                  color: #1e304c;
                  font-weight: bold;
                }
              }
            }
          }
        }
      }
    }

    .fm-waitlist {
      .fm-waitlist-promo {
        padding: 20px;

        .promo-section {
          display: flex;
          align-items: center;
          width: 100%;

          div {
            img {
              width: 100%;
              max-width: 800px;
            }

            .promo-card {
              padding: 10px;
              border-radius: 20px;
            }
          }
        }

        h3 {
          font-weight: bold;
          color: #1e304c;
        }
      }
      .fm-form-waitlist {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px 20px 20px 20px;
        background-color: #1768e1;
        border-radius: 20px;

        .card {
          width: 100%;
          max-width: 500px;
          padding: 20px;
        }
      }
    }

    .fm-profile-wrapper {
      display: flex;
      width: 100%;
      .fm-user-card {
        width: 300px;
        height: 350px;
        box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
        border-radius: 20px;
        padding: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .fm-user-email {
          margin: 0;
          color: #787878;
        }

        .fm-user-mobile {
          background-color: var(--accent);
          border-radius: 10px;
          color: #ffffff;
          padding-left: 10px;
          padding-right: 10px;
        }

        img {
          width: 100px;
          border-radius: 20px;
          margin-bottom: 30px;
          background-color: red;
        }

        .fm-user-rating {
          display: flex;
          flex-direction: column;
          align-items: center;

          span {
            color: #787878;
          }
          h3 {
            /*font-weight: bolder;*/
            color: var(--accent);
            font-size: 2rem;
          }
        }
      }

      .fm-user-details {
        padding-left: 30px;
        padding-right: 30px;

        h3 {
          font-weight: 600;
          margin-right: 10px;
        }

        .edit-profile {
          font-size: 14px;
          padding: 5px !important;
          width: 100px;
        }
        .edit-job {
          font-size: 14px;
          padding: 5px !important;
          width: 132px;
        }

        .fm-services-list {
          display: none;

          &.show {
            display: block;
          }

          .fm-specialization {
            /*box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);*/
            border: 1px solid #e8e8e8;
            border-radius: 10px;
            margin-bottom: 20px;

            .fm-service-heading {
              display: flex;
              justify-content: space-between;
              padding: 10px;
              border-bottom: 1px solid #e8e8e8;
              .fm-specialization-job {
                letter-spacing: 0px;
                font-weight: bold;
                color: #303335;
              }

              .fm-service-action {
                .iconify {
                  cursor: pointer;
                }
              }
            }

            .fm-services {
              padding: 10px;
              display: flow-root;

              .fm-service-name {
                font-size: 16px;
              }

              .fm-service-description {
                color: #777777;
                font-size: 14px;
              }

              .fm-service-rate {
                color: var(--accent);
                font-weight: bolder;
                float: right;
                margin-bottom: 0;
              }
            }
          }
        }

        .fm-user-reviews {
          display: none;

          &.show {
            display: block;
          }

          .fm-user-review-items {
            display: flow-root;
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid #f1f1f1;

            .fm-user-review-heading {
              display: flex;
              justify-content: space-between;
              margin-bottom: 20px;

              .user-img {
                width: 32px;
                border-radius: 5px;
              }

              .user-name {
                font-weight: bold;
              }

              .review-timestamp {
                font-size: 12px;
              }
            }

            .fm-user-review-text {
              font-size: 14px;
            }

            .fm-user-review-circle {
              display: flex;
              align-items: center;
              float: right;
            }
          }
        }

        .job-info-heading {
          display: none !important;
          &.show {
            display: flex !important;
          }
        }

        .user-reviews-heading {
          display: none !important;
          &.show {
            display: flex !important  ;
          }
        }
      }
    }

    .fm-search-wrapper {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

    .fm-map-wrapper {
      width: 100%;
      margin-bottom: 30px;

      #map {
        width: 100%;
        height: 500px;
        border-radius: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .fm-custom-marker {
        display: flex;
        background-color: #ffffff;
        padding: 10px;
        border-radius: 10px;

        img {
          margin-right: 5px;
          width: 32px;
          height: 32px;
          border-radius: 5px;
        }

        .fm-custom-marker-user-details {
          p {
            font-weight: bold;
            margin: 0;
          }

          a {
            margin: 0;
          }
        }
      }
    }

    .fm-mekanik-list-wrapper {
      width: 100%;
      margin-bottom: 30px;
    }

    .fm-expert-details-wrapper {
      width: 100%;

      .fm-expert-details-heading {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
        padding: 10px;
        border-radius: 10px;
        margin-bottom: 30px;

        img {
          width: 64px;
          height: 64px;
          border-radius: 10px;
          margin-right: 10px;
        }

        .fm-expert-name {
          font-weight: bold;
          margin: 0;
          padding: 0;
        }

        .fm-expert-mobile {
          color: #888888;
          margin: 0;
          padding: 0;
        }

        .fm-expert-rating {
          label {
            font-weight: bold;
          }
          p {
            margin: 0;
            padding: 0;
          }
        }

        .fm-expert-full-address {
          label {
            font-weight: bold;
          }
          p {
            font-size: 0.9rem;
            margin: 0;
            padding: 0;
          }
        }

        .fm-expert-heading-action {
          display: flex;
          flex-direction: column;
        }
      }

      .fm-expert-services {
        width: inherit;
        margin-bottom: 30px;

        .fm-expert-services-list {
          width: inherit;
          display: flex;
          align-items: center;
          flex-direction: column;
          box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
          padding: 10px;
          border-radius: 10px;

          .fm-expert-services-list-item {
            width: inherit;
            display: flex;
            border-bottom: 1px solid #e6e6e6;
            padding: 10px 0 10px 0;

            .fm-expert-service-job {
              label {
                font-weight: bold;
              }
              p {
                font-size: 0.9rem;
                margin: 0;
                padding: 0;
              }
            }

            .fm-expert-service-specialization {
              label {
                font-weight: bold;
              }
              p {
                font-size: 0.9rem;
                margin: 0;
                padding: 0;
              }
            }

            .fm-expert-service-details {
              label {
                font-weight: bold;
              }
              p {
                font-size: 0.9rem;
                margin: 0;
                padding: 0;
              }
            }

            .fm-expert-service-rate {
              label {
                font-weight: bold;
              }
              p {
                font-size: 0.9rem;
                margin: 0;
                padding: 0;
              }
            }
          }

          .fm-expert-services-list-item:last-child {
            border-bottom: none;
            padding-bottom: 0;
          }
        }
      }
    }

    .success-screen {
      min-height: 80vh;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      .success-icon-container {
        width: 100%;
        max-width: 580px;
        margin-right: 20px;
        resize: both;

        img {
          width: 100%;
        }
      }

      h1,
      h2,
      h3,
      h4,
      p {
        text-align: center;
      }

      p {
        font-size: 20px;
      }

      .text-success {
        color: #1768e1 !important;
      }
    }

    .fm-not-found {
      min-height: 70vh;
      padding: 20px;
      h3 {
        margin-bottom: 30px;
        text-align: center;
      }
      img {
        width: 100%;
        max-width: 500px;
      }
    }

    .fm-schedule-wrapper {
      width: 100%;
      padding: 20px;

      .revenue-forecast {
      }

      .fm-schedule-list {
        .grouped-list {
          box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
          padding: 10px;
          border-radius: 10px;
          margin-bottom: 20px;
          overflow: hidden;

          .requests {
            scrollbar-width: none;
            margin-bottom: 20px;
            overflow-x: scroll;

            table {
              width: 100%;
            }

            .request-header {
              display: flex;
              border-bottom: 1px solid #e1e1e1;
              padding: 5px;
              img {
                width: 32px;
                height: 32px;
                background-color: #dfebfc;
                margin-right: 10px;
                border-radius: 100%;
              }
            }

            .request-content {
              display: flex;
              justify-content: space-between;
              padding: 5px;
              cursor: pointer;
              p {
                margin: 0;
                padding: 0;
              }

              .tab {
                width: 20%;
                display: flex;
                flex-direction: column;
                align-items: flex-start;

                .service-label {
                  margin-bottom: 20px;
                }
              }
            }

            .request-content:hover {
              background-color: #1768e1;
            }
          }
        }
      }
    }

    .fm-service-request-details-wrapper {
      width: 100%;
      p,
      h3 {
        padding: 0;
        margin: 0;
      }

      .fm-service-details {
        padding: 20px;

        .print-heading {
          display: none;
        }
      }

      .services-wrapper {
        .service-provider {
          display: flex;
          justify-content: space-between;
          margin-bottom: 20px;
          img {
            margin-right: 10px;
            width: 32px;
            height: 32px;
            border-radius: 5px;
          }
        }

        .services-list,
        .additional-service-list {
          width: 100%;
          overflow-x: scroll;
          scrollbar-width: none;
          margin-bottom: 20px !important;

          table {
            width: 100%;
            thead {
              th {
                padding: 10px;
              }
            }
            tbody {
              tr {
                border: 1px solid #bcbcbc;
              }

              td {
                padding: 10px;
                &.description,
                &.cancel_reason {
                  width: 30%;
                }
              }
            }
          }
        }
      }
    }
  }
}

.fm-social-login {
  &.fb {
    background-color: #1768e1;
    color: #ffffff;
    padding: 10px;
    border-radius: 10px;
    border: none;
    width: 100%;
    margin-bottom: 20px;
  }

  &.google {
    color: var(--accent);
    padding: 10px;
    border: 3px solid var(--accent);
    border-radius: 10px;
    background-color: #ffffff;
    width: 100%;
  }
}

.hystmodal__wrap {
  padding: 10px;
}
.hystmodal__styled {
  padding: 20px;
  border-radius: 20px !important;
  /*display: flex;*/
  /*flex-direction: column;*/
  /*align-items: center;*/

  .title {
    text-align: center;
    font-size: 1.7rem;
    font-weight: 700;
  }

  .fm-form-user-info {
    form {
      .address-section,
      .info-section {
        label {
          font-weight: bold;
        }
      }

      .fm-form-action {
        width: 100%;
        display: flex;
        justify-content: flex-end;
      }
    }
  }

  .fm-form-user-job {
    form {
      .job-section,
      .services-section {
        label {
          font-weight: bold;
        }
      }

      .fm-form-action {
        width: 100%;
        display: flex;
        justify-content: flex-end;
      }
    }
  }

  .fm-form-user-review {
    form {
      .review-section {
        label {
          font-weight: bold;
        }

        .note {
          padding: 10px;
          background-color: #fff9d5;
          margin-bottom: 10px;
          border-radius: 10px;
        }
      }

      .fm-form-action {
        width: 100%;
        display: flex;
        justify-content: flex-end;
      }
    }
  }

  .fm-form-user-cancel-service-request {
    form {
      .review-section {
        label {
          font-weight: bold;
        }
      }

      .fm-form-action {
        width: 100%;
        display: flex;
        justify-content: flex-end;
      }
    }
  }

  .fm-form-user-confirmation {
    form {
      .fm-form-action {
        width: 100%;
        display: flex;
        justify-content: flex-end;
      }
    }
  }

  .fm-form-customer-request {
    form {
      .info-section {
        label {
          font-weight: bold;
        }

        .service-request-list {
          p,
          h5 {
            margin: 0;
            padding: 0;
          }

          .total-rate {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-end;

            p {
              margin-bottom: 10px;
            }
          }
        }
      }

      .request-form-section {
        label {
          font-weight: bold;
        }

        textarea {
          width: 100%;
        }
      }

      .fm-form-action {
        width: 100%;
        display: flex;
        justify-content: flex-end;
      }
    }
    .service-request-list {
      .service-request-item {
        padding: 10px;
        background-color: #f0f6ff;
        border-radius: 10px;
        margin-bottom: 10px;
        border: 1px solid #e1e1e1;
      }
    }
  }

  .fm-form-user-service-request-schedule {
    .calendar-section {
      .form-group {
        display: flex;
        input:first-child {
          margin-right: 10px;
        }
      }

      .note {
        background-color: #fffbd7;
        padding: 10px;
        border-radius: 10px;
        border: 1px solid #e1e1e1;
        font-size: small;
      }
    }
    .fm-form-action {
      width: 100%;
      display: flex;
      justify-content: flex-end;
    }
  }

  .fm-form-user-add-service {
    section {
      textarea {
        width: 100%;
      }
    }
    .fm-form-action {
      width: 100%;
      display: flex;
      justify-content: flex-end;
    }
  }
}

.hystmodal__window {
  border-radius: 20px;
}

.hystmodal__window--long {
  width: 1000px;
}

@media only screen and (max-width: 768px) {
  .fm-header-container {
    img {
      width: 120px;
    }

    .fm-nav {
      display: none !important;
    }

    .fm-user-nav {
      .fm-nav-mobile {
        display: block !important;
      }
    }
  }
  .fm-content {
    .fm-search-wrapper {
      justify-content: center !important;
    }

    .fm-profile-wrapper {
      flex-direction: column;
      align-items: center;
      .fm-user-card {
        margin-bottom: 50px;
      }
    }

    .fm-map-wrapper {
      #map {
        border-radius: 0 !important;
      }
    }

    .fm-banner-headline {
      flex-direction: column;
      flex-flow: column-reverse;
      align-items: center;
      padding-top: 10px !important;

      div {
        h3 {
          font-size: 2.5em !important;
        }
        button {
          width: 100% !important;
        }
      }
    }

    .fm-services-offerings {
      flex-wrap: wrap;
    }

    .fm-expert-details-wrapper {
      padding: 20px;
      .fm-expert-details-heading {
        flex-direction: column;
        align-items: flex-start !important;

        .fm-heading-user-info {
          margin-bottom: 20px;
        }

        .fm-expert-rating,
        .fm-expert-full-address {
          margin-bottom: 20px;
        }

        .fm-expert-heading-action {
          width: 100%;
          button {
            width: 100%;
          }
        }
      }

      .fm-expert-services-list-item {
        display: flex;
        flex-direction: column;

        div {
          width: 100%;
          margin-bottom: 20px;
        }
      }
    }

    .success-screen {
      flex-direction: column !important;
      padding: 20px;

      .success-icon-container {
        display: flex;
        justify-content: center;
        img {
          width: 70% !important;
          margin-bottom: 20px;
        }
      }
    }
  }
}

@media only screen and (max-width: 1024px) {
  .fm-form-waitlist {
    border-radius: 0 !important;
  }
}

@media only screen and (max-width: 430px) {
  .fm-user-details {
    .fm-user-basic-info {
      article {
        display: flex;
        flex-direction: column;
      }
    }

    .fm-user-job-info {
      article:first-child {
        .job-info-heading {
          display: flex;
          flex-direction: column;
        }
      }
    }

    .user-reviews-heading {
      display: flex;
      flex-direction: column;
    }
  }
}

@media only screen and (max-width: 375px) {
  .fm-search-wrapper {
    justify-content: center !important;
    .fm-location-search-wrapper {
      .search-group {
        flex-direction: column;
        padding: 10px;

        .search-group-input {
          margin-bottom: 10px;

          .fm-my-location-button {
            margin: 0;
          }
        }

        .fm-location-search-button {
          width: 100%;
        }
      }
    }
  }
}

@media print {
  .no-print {
    display: none !important;
  }

  #printable-section {
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;

    button {
      display: none;
    }

    .print-heading {
      display: block;
    }
  }
}
