App/src/index.scss - master - astafievk/source_code

App/src/index.scss
4 407 строк109 KB
astafievK
source code
21 июн 2024, 21:02
21 июн 2024, 21:0237a1d03
$color-accent: rgb(254, 49, 58);

$color-primary: #e7e7e7;
$color-secondary: rgb(232, 232, 232);
$color-background-hover: rgb(225, 225, 225);
$color-background-active: rgb(212, 212, 212);
$color-border: rgb(18,18,18);
$color-header-footer: #f7f7f7;
$color-font: #000000;
$color-slider-background: #c0c0c0;
$color-modal: #cccccc;

@font-face {
  font-family: Campana;
  src: url('/fonts/CampanaRegular.otf');
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  border: none;
  color: $color-font;
  background: transparent;
  font-family: Poppins-Regular, sans-serif;
  text-decoration: none;

  &::-webkit-scrollbar{
    width: 0;
  }

  &::-webkit-scrollbar-thumb{
    background: $color-font;
    border-radius: 7px;
  }

  &::-webkit-scrollbar-track{
    background: $color-background-active;
    border-radius: 7px;
  }
}

[class*="copyrights-pane"] {
  display: none !important;
}

.ymaps-2-1-79-map {
  border-radius: 32px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  overflow: hidden;
}

.logo-wrapper {
  display: flex;
  flex-direction: row;
  border-radius: 7px;
  gap: 10px;
  filter: none;
  align-items: center;
  transition: filter .2s;

  img{
    height: 100%;
  }

  .label-wrapper {
    display: flex;
    flex-direction: column;

    span {
      line-height: 0.55;
      font-family: "Campana", sans-serif;
      font-size: 45px;
      transition: color 300ms;
    }

    span:nth-child(2){
      margin-left: 10px;
    }
  }

  &:hover{
    .label-wrapper{
      span{
        color: $color-accent;
      }
    }
  }
}

.modal {
  display: flex;
  visibility: hidden;
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100vh;

  .container {
    position: absolute;
    display: flex;
    flex-direction: column;
    overflow: auto;
    width: 100%;
    z-index: 2;
  }

  .spoiler {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(black, 0.8);
    transition: background-color 250ms;
  }

  &.active {
    visibility: visible;
  }
}

input{
  text-overflow: ellipsis;
}

body, html{
  min-height: 100vh;
}

body {
  position: relative;
  background: -webkit-linear-gradient(90deg, #f0e0e9,#e9d3d5,#e0c7dc);
  background: linear-gradient(90deg, #f0e0e9,#e9d3d5,#e0c7dc);

  .ant-message {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-width: 300px;
    padding: 0;
    font-weight: 800;
    font-size: 16px;
    background: transparent;
    position: fixed;
    z-index: 10001;

    .ant-message-notice-wrapper {
      padding: 0 !important;
      width: 100%;

      .ant-message-notice {
        .ant-message-notice-content {
          width: 100%;
          padding: 4px;
          border-radius: 7px;

          .ant-message-custom-content {
            .anticon {
              display: none;
            }
          }
        }
      }
    }
  }

  .checkbox-styled {
    display: none;

    &:checked + .label-styled {
      background: #ffffff;

      .button-text {
        color: black;
      }
    }
  }

  .label-styled {
    border: 1px solid #ffffff;
    display: inline-block;
    padding: 3px 12px;
    border-radius: 7px;
    user-select: none;
    cursor: pointer;
    transition: all 0.3s;

    .button-text {
      font-size: 16px;
      font-weight: 600;
      color: #ffffff;
      transition: all 0.3s;
    }
  }

  #root {
    min-height: 100vh;
    display: flex;
    flex-direction: column;

    .header-wrapper {
      position: sticky;
      top: 0;
      background: $color-header-footer;
      transition: box-shadow 500ms, background 500ms;
      z-index: 9999;

      .main-panel {
        width: 100%;
        height: 80px;
        max-width: 1600px;
        padding: 0 1rem;
        justify-content: center;
        display: flex;
        flex-direction: row;

        .nav {
          height: 100%;
          align-self: center;
          justify-content: center;
          flex-grow: 1;
          flex-direction: row;

          .nav-item {
            display: none;
            align-items: center;
            position: relative;
            border-radius: 7px;
            font-weight: 700;
            padding: 0 10px;
            color: $color-font;
            font-size: 21px;
            text-wrap: nowrap;
            transition: color 300ms;

            &:hover {
              color: $color-accent;
            }
          }

          .logo-wrapper {
            overflow: hidden;
            padding: 1rem 0;
            gap: 3px;
            height: 100%;

            img {
              width: 85%;
              height: 85%;
              object-fit: cover;
              display: none;
            }

            .label-wrapper {
              gap: 4px;
              flex-direction: row;

              span {
                font-size: 52px;
              }
            }
          }

          .dropdown-profile {
            position: relative;
            cursor: pointer;
            align-items: center;
            padding: 0 10px;

            .name {
              display: flex;
              font-weight: 700;
              font-size: 21px;
              user-select: none;
              transition: color 200ms;

              &:after {
                content: "";
                border-bottom: 3px solid $color-font;
                border-left: 3px solid $color-font;
                width: 10px;
                height: 10px;
                margin-left: 10px;
                transform: rotate(-45deg) translateY(25%);
                transition: border-color 200ms;
              }
            }

            .dropdown-content {
              display: none;
              position: absolute;
              background: #fff;
              top: 80px;
              box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.45);
              text-align: left;
              flex-direction: column;
              left: 50%;
              transform: translateX(-65%);
              border-radius: 24px;
              padding: 7px;
              z-index: 999;

              .dropdown-content__item {
                font-size: 18px;
                width: 100%;
                cursor: pointer;
                border-radius: 7px;
                color: $color-font;
                font-weight: 600;
                padding: 10px 15px;
                transition: color 200ms;

                &:hover {
                  color: $color-accent
                }
              }

              .exit {
                text-align: left;
              }

              &.visible {
                display: flex;
              }
            }

            &:hover,
            &.expanded {
              .name {
                color: $color-accent;

                &:after {
                  border-color: $color-accent;
                }
              }
            }
          }
        }

        .burger {
          cursor: pointer;
          display: flex;
          padding: 0 5px;
          align-self: center;
          user-select: none;
          margin-left: auto;
          position: relative;
          border: none;
          background: transparent;
          width: 40px;
          height: 26px;

          &::before,
          &::after {
            content: '';
            left: 0;
            position: absolute;
            display: block;
            width: 100%;
            height: 4px;
            border-radius: 10px;
            background: $color-font;
          }

          &::before {
            top: 0;
            box-shadow: 0 11px 0 $color-font;
            transition: box-shadow .3s .15s, top .3s .15s, transform .3s;
          }

          &::after {
            bottom: 0;
            transition: bottom .3s .15s, transform .3s;
          }

          &.active {
            &::before {
              top: 11px;
              transform: rotate(45deg);
              box-shadow: 0 6px 0 rgba(0, 0, 0, 0);
              transition: box-shadow .15s, top .3s, transform .3s .15s;
            }

            &::after {
              bottom: 11px;
              transform: rotate(-45deg);
              transition: bottom .3s, transform .3s .15s;
            }
          }
        }
      }

      &.opened {
        box-shadow: none;
        background: transparent;
      }
    }

    .footer-wrapper {
      display: flex;
      margin-top: auto;
      flex-direction: row;
      padding: 10px 30px;
      background: $color-font;

      .phone-wrapper,
      .address-wrapper {
        display: none;
        font-size: 20px;

        span {
          color: $color-secondary;
          width: 100%;
        }
      }

      div {
        display: flex;
        align-items: center;
        flex: 1;
      }

      .phone-wrapper {
        flex: 1;
      }

      .title-wrapper {
        flex: 2;
        display: flex;
        justify-content: center;
        align-items: center;

        a {
          line-height: 1;
          color: $color-secondary;
          font-family: "Campana", sans-serif;
          font-size: 45px;
          transition: color 300ms;
        }
      }

      .address-wrapper {
        flex: 1;
        flex-direction: column;
        justify-content: flex-start;

        span {
          text-align: right;
        }
      }
    }

    .mobile-menu__modal {
      z-index: 9998;

      .container {
        top: 0;
        right: 0;
        height: 100vh;
        width: 65%;
        padding: 90px 5px 25px 5px;
        transition: transform 250ms;
        transform: translateX(100%) translateZ(0);
        background: $color-header-footer;

        .menu {
          display: flex;
          flex-direction: column;
          width: 100%;
          height: 100%;
          flex-grow: 1;
          padding: 10px 0;
          gap: 5px;

          .menu-link {
            display: flex;
            border-radius: 7px;
            word-break: break-word;
            text-align: center;
            align-items: center;
            justify-content: center;
            color: black;
            width: 100%;
            font-size: 19px;
            font-weight: 600;
            align-self: center;

            &.login-logout {
              margin-top: auto;
            }

            &:hover,
            &:active {
              color: $color-accent;
            }
          }
        }

        .address {
          display: flex;
          margin-top: auto;
          flex-direction: column;
          width: 100%;
          gap: 3px;

          span {
            text-align: center;
            text-transform: uppercase;
            font-weight: 600;
            font-size: 13px;
          }
        }
      }

      &.active {
        .container {
          transform: translateX(0) translateZ(0);
        }
      }
    }

    .work-photo__modal {
      justify-content: center;
      align-items: center;

      .container {
        padding: 10px;
        width: 100%;
        height: 100%;
        background: $color-border;
        justify-content: center;
        max-width: 900px;
        margin: 0 auto;
        align-self: center;

        .work-photo {
          width: 100%;
          border-radius: 7px;
          user-select: none;
        }

        .info-wrapper {
          display: flex;
          margin-top: 10px;

          .employer-label {
            font-weight: 800;
            color: $color-secondary;
            line-height: 1.1;
            font-size: 16px;
          }
        }

        .controls {
          display: flex;
          flex-direction: row;
          margin-top: 20px;
          gap: 5px;
          justify-content: space-between;

          .control {
            height: 40px;
            width: 100%;
            color: $color-font;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            cursor: pointer;
            user-select: none;
            background: $color-secondary;
            border-radius: 7px;
            font-size: 16px;
            transition: background-color 200ms;

            &:hover {
              background: $color-background-hover;
            }

            &:active {
              background: $color-background-active;
            }
          }
        }
      }

      .spoiler {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(black, 0.8);
      }

      .cross {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 30px;
        height: 30px;
        cursor: pointer;
        z-index: 3;
        background-color: $color-secondary;
        clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
      }

      &.active {
        visibility: visible;
      }
    }

    .add-employer__modal,
    .change-employer__modal {
      .container {
        display: flex;
        position: relative;
        flex-direction: column;
        gap: 15px;
        border-radius: 7px;
        padding: 30px 10px 20px;
        width: 100%;
        height: 100%;
        max-width: 600px;
        max-height: 850px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: $color-header-footer;

        .container-item {
          display: flex;
          flex-direction: row;
          gap: 5px;

          &.photo {
            flex-direction: column;
            gap: 15px;

            .photo-wrapper {
              border-radius: 50%;
              width: 140px;
              height: 140px;
              overflow: hidden;
              align-self: center;
              display: flex;
              align-items: center;
              justify-content: center;
              background: $color-secondary;

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

            .actions {
              display: flex;
              flex-direction: row;
              gap: 6px;
              height: 50px;

              .file-input__wrapper {
                flex: 4;
                width: 100%;
                border-radius: 7px;
                background: $color-secondary;
                height: 100%;
                transition: background-color 200ms;

                label {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  cursor: pointer;
                  width: 100%;
                  height: 100%;

                  span {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 100%;
                    height: 100%;
                    cursor: pointer;
                    color: $color-font;
                    text-align: center;
                    font-size: 20px;
                    font-weight: 700;
                  }

                  #upload-photo-employer-edit,
                  #upload-photo-employer-add {
                    display: none;
                  }
                }

                &:hover {
                  background: $color-background-hover;
                }

                &:active {
                  background: $color-background-active;
                }
              }

              .experience {
                flex: 1;
                background: $color-secondary;
                border: 2px solid $color-secondary;
                color: $color-font;
                font-size: 20px;
                text-align: center;
                padding: 0 15px;
                height: 100%;
                border-radius: 7px;
                width: 100%;
                cursor: pointer;
                transition: border-color 200ms, border-radius 200ms;

                &:focus {
                  border-color: $color-accent;
                }
              }
            }
          }

          &.fields {
            flex-direction: column;

            input[type=text] {
              background: $color-secondary;
              border: 2px solid $color-secondary;
              color: $color-font;
              font-size: 20px;
              padding: 0 15px;
              height: 50px;
              border-radius: 7px;
              width: 100%;
              cursor: pointer;
              transition: border-color 200ms, border-radius 200ms;

              &:focus {
                border-color: $color-accent;
              }
            }
          }

          &.services {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            gap: 5px;
            flex-grow: 1;
            overflow: auto;
            min-height: 150px;

            .service {
              width: 100%;
              display: flex;
              border-radius: 24px;
              flex-direction: row;
              gap: 3px;

              .service-button {
                flex: 2;
                background: $color-secondary;
                text-align: left;
                padding: 5px 10px;
                font-size: 18px;
                font-weight: 600;
                color: $color-font;
                border-radius: 7px;
                cursor: pointer;
                transition: background-color 200ms, color 200ms;

                &:hover {
                  background: $color-background-hover;
                }

                &:active {
                  background: $color-background-active;
                }

                &.selected {
                  background: $color-font;
                  color: $color-secondary;
                }
              }

              .price-field,
              .duration-field {
                flex: 1;
                background: $color-secondary;
                border: 2px solid $color-secondary;
                color: $color-font;
                font-size: 20px;
                padding: 0 15px;
                height: 50px;
                border-radius: 7px;
                width: 100%;
                cursor: pointer;
                transition: border-color 200ms, border-radius 200ms;

                &:focus {
                  border-color: $color-accent;
                }
              }
            }
          }

          &.actions {
            margin-top: auto;
            display: flex;
            gap: 15px;

            button {
              flex-grow: 1;
              border-radius: 7px;
              height: 45px;
              font-size: 18px;
              background: $color-secondary;
              cursor: pointer;
              font-weight: 700;

              transition: background-color 200ms, color 200ms;

              &:hover {
                background: $color-background-hover;
              }

              &:active {
                background: $color-background-active;
              }
            }
          }
        }

        .cross {
          position: absolute;
          top: 20px;
          right: 20px;
          width: 30px;
          height: 30px;
          cursor: pointer;
          background-color: $color-font;
          clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
        }
      }
    }

    .add-service__modal,
    .change-service__modal {
      .container {
        display: flex;
        position: relative;
        flex-direction: column;
        gap: 15px;
        border-radius: 7px;
        padding: 60px 10px 20px;
        width: 100%;
        height: 100%;
        max-width: 600px;
        max-height: 850px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: $color-header-footer;

        .container-item {
          display: flex;
          flex-direction: row;
          gap: 5px;

          &.service {
            .service-wrapper {
              display: flex;
              overflow: hidden;
              width: 100%;
              flex-direction: column;
              text-align: center;
              transition: scale 350ms;

              .service {
                display: flex;
                min-height: 100px;
                line-height: 1.1;
                font-size: 17px;
                width: 100%;
                text-wrap: wrap;
                user-select: none;
                font-weight: 800;
                cursor: pointer;
                padding: 0 10px;
                align-items: center;
                justify-content: center;
                background: $color-secondary;
                border-radius: 24px;
                transition: background-color 200ms;

                &:hover {
                  background: $color-background-hover;
                }

                &:active {
                  background: $color-background-active;
                }
              }

              &:hover{
                scale: .95
              }
            }
          }

          &.fields {
            flex-direction: column;

            input[type=text],
            textarea {
              background: $color-secondary;
              border: 2px solid $color-secondary;
              color: $color-font;
              resize: none;
              font-size: 20px;
              padding: 0 15px;
              height: 50px;
              border-radius: 7px;
              width: 100%;
              cursor: pointer;
              transition: border-color 200ms, border-radius 200ms;

              &:focus {
                border-color: $color-accent;
              }
            }

            .field-descr {
              padding: 10px 15px;
              min-height: 150px;
              align-items: start;
            }

            .price-duration {
              display: flex;
              flex-direction: row;
              gap: 5px;

              .input-duration,
              .input-price {
                flex: 1;
              }
            }
          }

          &.actions {
            margin-top: auto;
            display: flex;
            gap: 15px;

            button {
              flex-grow: 1;
              border-radius: 7px;
              height: 45px;
              font-size: 18px;
              background: $color-secondary;
              cursor: pointer;
              font-weight: 700;

              transition: background-color 200ms, color 200ms;

              &:hover {
                background: $color-background-hover;
              }

              &:active {
                background: $color-background-active;
              }
            }
          }
        }

        .cross {
          position: absolute;
          top: 20px;
          right: 20px;
          width: 30px;
          height: 30px;
          cursor: pointer;
          background-color: $color-font;
          clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
        }
      }
    }

    .price-list__modal {
      justify-content: center;

      .container {
        height: 100%;
        overflow: hidden;
        position: relative;
        padding: 1.5rem 1rem 0;
        align-self: center;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 600px;
        background: $color-header-footer;

        h2 {
          font-size: 32px;
          text-align: center;
        }

        h3 {
          margin-bottom: 20px;
          text-align: center;
          font-size: 21px;
        }

        .rows {
          display: flex;
          overflow: auto;
          border-radius: 7px;
          flex-direction: column;

          .row {
            display: flex;
            gap: 6px;
            flex-direction: row;
            align-items: center;
            border-radius: 7px;
            padding: 0.8rem 0.5rem;
            cursor: pointer;
            transition: background-color 200ms;

            .name,
            .price {
              user-select: none;
              font-size: 19px;
            }

            .name {
              text-align: left;
              flex-grow: 1;
            }

            .price {
              font-weight: 700;
              text-align: right;
            }

            &:hover {
              background: $color-background-hover;
            }

            &:active {
              background: $color-background-active;
            }
          }

          &::-webkit-scrollbar {
            width: 11px;
          }
        }

        .advice {
          position: sticky;
          bottom: 0;
          padding: 1rem 0;
          background: $color-header-footer;
          text-align: center;
          user-select: none;
          font-size: 16px;
          width: 100%;
        }

        .cross {
          position: absolute;
          top: 15px;
          right: 15px;
          width: 30px;
          height: 30px;
          cursor: pointer;
          background-color: $color-font;
          clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
        }
      }
    }

    main {
      position: relative;

      .page {
        display: flex;
        flex-direction: column;
        box-shadow: #0000002e 0 8px 24px;
        padding: 10px;
        background: #f7f7f7;
        height: 100%;
        gap: 15px;
        max-width: 1600px;
        margin: 0 auto;

        h1 {
          font-size: 24px;
          font-weight: 800;
        }
      }

      .employers-container {
        .employers-wrapper {
          width: 100%;
          grid-template-columns: repeat(2, calc(100% / 2 - 8px / 2 * (2 - 1)));
          gap: 8px;
          display: grid;
          row-gap: 10px;

          .employer-card__wrapper {
            display: flex;
            flex-direction: column;
            background: $color-secondary;
            border-radius: 24px;
            transition: background 200ms, scale 350ms;

            .employer-card {
              display: flex;
              flex-grow: 1;
              position: relative;
              flex-direction: column;
              border-radius: 24px;
              cursor: pointer;

              .photo-wrapper {
                display: flex;
                width: 100%;
                aspect-ratio: 1/1;
                overflow: hidden;
                align-items: center;
                position: relative;
                justify-content: center;
                border-radius: 24px;

                .employer-card__photo {
                  position: relative;
                  border-radius: 24px;
                  object-fit: cover;
                  height: 100%;
                  width: 100%;
                }

                .advice {
                  position: absolute;
                  opacity: 0;
                  bottom: -10px;
                  left: 0;
                  width: 100%;
                  border-radius: 7px;
                  background: $color-background-hover;
                  padding: 6px 0;
                  font-weight: 600;
                  font-size: 12px;
                  margin-top: auto;
                  text-align: center;
                  z-index: 2;
                  transition: background-color 200ms, opacity 200ms, bottom 200ms;
                }
              }

              .employer-card__info {
                position: relative;
                display: flex;
                gap: 10px;
                flex-direction: column;
                flex-grow: 1;
                padding: 10px 7px 10px 7px;

                .bio {
                  height: 100%;
                  display: flex;
                  gap: 10px;
                  flex-direction: column;

                  .fullname {
                    font-weight: 800;
                    word-break: break-word;
                    font-size: 14px;
                    line-height: 1.1;
                  }

                  .exp-and-works {
                    display: flex;
                    margin-top: auto;
                    flex-direction: column;
                    gap: 2px;
                    text-wrap: nowrap;

                    .experience,
                    .works-count {
                      font-size: 13px;
                    }
                  }
                }

                .categories {
                  display: flex;
                  flex-direction: row;
                  margin-top: auto;
                  gap: 4px;
                  flex-wrap: wrap;

                  .category {
                    border: 2px solid white;
                    border-radius: 5px;
                    padding: 2px 4px;
                    opacity: 0.6;
                    font-size: 12px;
                    text-align: center;
                  }
                }
              }
            }

            &:hover {
              scale: .95;
              background: $color-background-hover;

              .employer-card {
                .photo-wrapper {
                  .advice {
                    background: $color-background-hover;
                    opacity: 1;
                    bottom: -1px;
                  }
                }
              }
            }

            &:active {
              background: $color-background-active;

              .employer-card {
                .photo-wrapper {
                  .advice {
                    background: $color-background-active;
                  }
                }
              }
            }
          }
        }
      }

      .works-container {
        .works-photos-tiles {
          display: grid;
          grid-template-columns: repeat(2, calc(100% / 2 - 5px / 2 * (2 - 1)));
          gap: 5px;

          .tile-wrapper {
            display: flex;
            background: pink;
            position: relative;
            overflow: hidden;
            border-radius: 24px;
            aspect-ratio: 4/3;
            transition: all 0.2s;

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

            .delete{
              position: absolute;
              padding: 5px;
              border-radius: 7px;
              bottom: 5px;
              left: 50%;
              transform: translateX(-50%);
              background: $color-secondary;
              cursor: pointer;
              font-size: 12px;
              font-weight: 700;
              transition: background-color 250ms;

              &:hover{
                background: $color-background-hover;
              }

              &:active{
                background: $color-background-active;
              }
            }
          }
        }
      }

      .page-admin__wrapper {
        height: 100%;
        position: relative;
        display: flex;
        flex-direction: row;

        .left-menu__wrapper {
          position: sticky;
          display: none;
          padding: 10px 15px;
          width: 250px;
          left: 0;
          top: 79px;
          background: $color-header-footer;
          border-radius: 0;

          .left-menu {
            display: flex;
            width: 100%;
            flex-direction: column;
            gap: 10px;

            .left-menu__item {
              width: 100%;
              height: 45px;
              border-radius: 7px;
              display: flex;
              align-items: center;
              padding: 0 12px;
              cursor: pointer;

              span {
                font-size: 22px;
                font-weight: 600;
                color: $color-font;
                transition: color 200ms;
              }

              &:hover,
              &:active,
              &.selected{
                span{
                  color: $color-accent;
                }
              }
            }
          }
        }

        .bottom-menu__wrapper {
          position: fixed;
          display: flex;
          padding: 5px;
          height: 50px;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 10;
          background: $color-secondary;

          .bottom-menu {
            display: flex;
            align-items: center;
            gap: 5px;
            width: 100%;
            flex-direction: row;
            z-index: 999;

            .bottom-menu__item {
              display: flex;
              align-items: center;
              flex-direction: column;
              justify-content: center;
              flex: 1 1 0;
              border-radius: 7px;
              height: 100%;
              gap: 3px;
              transition: background 200ms;

              span {
                user-select: none;
                font-size: 13px;
                color: $color-font;
              }

              &.selected {
                background: $color-background-active;

              }
            }
          }
        }

        .admin-container {
          flex-grow: 1;

          .admin-section {
            display: flex;
            flex-direction: column;
            gap: 15px;

            .add-button {
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 15px 0;
              background: $color-secondary;
              border-radius: 24px;
              cursor: pointer;
              transition: background 200ms;

              span {
                text-align: center;
                font-size: 16px;
                text-transform: uppercase;
                user-select: none;
                font-weight: 700;
                color: $color-font;
              }

              &:hover {
                background: $color-background-hover;
              }

              &:active {
                background: $color-background-active;
              }
            }

            .employers-wrapper {
              width: 100%;
              grid-template-columns: repeat(2, calc(100% / 2 - 8px / 2 * (2 - 1)));
              gap: 8px;
              display: grid;
              row-gap: 10px;

              .employer-card__wrapper {
                display: flex;
                flex-direction: column;
                background: $color-secondary;
                border-radius: 24px;
                transition: background 200ms, scale 350ms;

                .employer-card {
                  display: flex;
                  flex-grow: 1;
                  border-radius: 24px 24px 0 0;
                  position: relative;
                  flex-direction: column;
                  cursor: pointer;
                  transition: background 200ms;

                  .photo-wrapper {
                    display: flex;
                    width: 100%;
                    aspect-ratio: 1/1;
                    overflow: hidden;
                    align-items: center;
                    position: relative;
                    justify-content: center;
                    border-radius: 24px;

                    .employer-card__photo {
                      position: relative;
                      border-radius: 24px;
                      object-fit: cover;
                      height: 100%;
                      width: 100%;
                    }
                  }

                  .employer-card__info {
                    position: relative;
                    display: flex;
                    gap: 10px;
                    flex-direction: column;
                    flex-grow: 1;
                    padding: 10px 7px 10px 7px;

                    .bio {
                      display: flex;
                      height: 100%;
                      gap: 10px;
                      flex-direction: column;

                      .fullname {
                        font-weight: 800;
                        word-break: break-word;
                        font-size: 14px;
                        line-height: 1.1;
                      }

                      .exp-and-works {
                        display: flex;
                        flex-direction: column;
                        margin-top: auto;
                        gap: 2px;
                        text-wrap: nowrap;

                        .experience,
                        .works-count {
                          font-size: 13px;
                        }
                      }
                    }

                    .categories {
                      display: flex;
                      flex-direction: row;
                      margin-top: auto;
                      gap: 4px;
                      flex-wrap: wrap;

                      .category {
                        border: 2px solid white;
                        border-radius: 5px;
                        padding: 2px 4px;
                        opacity: 0.6;
                        font-size: 12px;
                        text-align: center;
                      }
                    }
                  }

                  &:hover{
                    background-color: $color-background-hover;
                  }

                  &:active{
                    background-color: $color-background-active;
                  }
                }

                .actions {
                  display: flex;
                  flex-direction: row;
                  border-top: 2px solid $color-header-footer;

                  .action {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    background: transparent;
                    padding: 10px 0;
                    color: $color-font;
                    font-size: 13px;
                    font-weight: 600;
                    width: 100%;
                    flex: 1;
                    transition: background 0.2s;

                    &.edit {
                      border-radius: 0 0 0 24px;
                    }

                    &.delete {
                      border-radius: 0 0 24px 0;
                    }

                    &:hover{
                      background-color: $color-background-hover;
                    }

                    &:active{
                      background-color: $color-background-active;
                    }
                  }
                }

                &:hover {
                  .employer-card {
                    .photo-wrapper {
                      .advice {
                        background: $color-background-hover;
                      }
                    }
                  }
                }

                &:active {
                  .employer-card {
                    .photo-wrapper {
                      .advice {
                        background: $color-background-active;
                      }
                    }
                  }
                }
              }
            }

            .services {
              display: grid;
              grid-template-columns: repeat(1, calc(100% / 1 - 8px / 1 * (1 - 1)));
              gap: 8px;

              .service-wrapper {
                display: flex;
                overflow: hidden;
                width: 100%;
                flex-direction: column;
                text-align: center;
                transition: scale 350ms;

                .service {
                  display: flex;
                  min-height: 55px;
                  line-height: 1.1;
                  font-size: 17px;
                  width: 100%;
                  text-wrap: wrap;
                  user-select: none;
                  font-weight: 800;
                  cursor: pointer;
                  padding: 0 10px;
                  align-items: center;
                  justify-content: center;
                  background: $color-secondary;
                  border-radius: 24px 24px 0 0;
                  transition: background-color 200ms;

                  &:hover {
                    background: $color-background-hover;
                  }

                  &:active {
                    background: $color-background-active;
                  }
                }

                .actions {
                  display: flex;
                  width: 100%;
                  border-top: 2px solid $color-header-footer;

                  .action {
                    flex: 1;
                    font-size: 13px;
                    user-select: none;
                    cursor: pointer;
                    padding: 10px 0;
                    color: $color-font;
                    font-weight: 600;
                    width: 100%;
                    background: $color-secondary;
                    text-align: center;
                    transition: background-color 200ms;

                    &.edit {
                      border-radius: 0 0 0 24px;
                    }

                    &.delete {
                      border-radius: 0 0 24px 0;
                    }

                    &:hover {
                      background: $color-background-hover;
                    }

                    &:active {
                      background: $color-background-active;
                    }
                  }
                }

                &:hover{
                  scale: .95
                }
              }
            }

            .clients {
              display: table;

              tbody {
                display: flex;
                gap: 4px;
                flex-direction: column;

                .client-row {
                  display: flex;
                  align-items: center;
                  min-height: 30px;
                  width: 100%;
                  gap: 5px;

                  .name-wrapper {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    height: 100%;

                    .name,
                    .info {
                      font-size: 15px;
                    }

                    .info {
                      opacity: 0.5;
                    }
                  }

                  .actions {
                    margin-left: auto;
                    display: flex;
                    height: 100%;
                    gap: 5px;
                    flex-direction: row;

                    .dropdown {
                      vertical-align: middle;
                      position: relative;
                      display: inline-block;

                      .dropdown-button {
                        height: 100%;
                        max-width: 100px;
                        color: $color-font;
                        user-select: none;
                        font-size: 18px;
                        padding: 0 8px;
                        text-overflow: ellipsis;
                        border: 2px solid $color-secondary;
                        border-radius: 7px;
                        cursor: pointer;
                        transition: border-color 200ms, border-radius 200ms;

                        &::selection {
                          background: transparent;
                        }

                        &:hover {
                          background-color: $color-secondary;
                        }
                      }

                      .dropdown-content {
                        display: none;
                        width: 100%;
                        position: absolute;
                        padding: 5px;
                        margin-top: 3px;
                        max-height: 275px;
                        overflow-y: auto;
                        box-shadow: 0 8px 16px 1px rgba(0, 0, 0, 0.54);
                        background: $color-secondary;
                        border-radius: 0 0 7px 7px;
                        min-width: 160px;
                        z-index: 1;

                        .dropdown-content__item {
                          color: $color-font;
                          font-size: 16px;
                          text-align: left;
                          width: 100%;
                          border-radius: 7px;
                          padding: 5px 8px;
                          text-decoration: none;
                          background: transparent;
                          cursor: pointer;
                          display: block;
                          transition: background 200ms;

                          &:hover {
                            background-color: $color-background-hover;
                          }

                          &:active {
                            background-color: $color-background-active;
                          }
                        }
                      }

                      &.expanded {
                        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);

                        .dropdown-button {
                          border-radius: 7px 7px 0 0;
                          background-color: $color-secondary;
                          border-color: $color-accent;
                        }

                        .dropdown-content {
                          display: block;
                        }
                      }
                    }

                    .action-delete {
                      height: 100%;
                      border: 2px solid $color-secondary;
                      aspect-ratio: 1/1;
                      border-radius: 7px;
                      cursor: pointer;
                      transition: background-color 200ms, border-color 200ms;

                      svg {
                        height: 65%;
                        transition: fill 200ms;
                      }

                      &:hover {
                        background-color: $color-background-hover;
                        border-color: $color-background-hover;

                        svg {
                          fill: $color-accent;
                        }
                      }

                      &:active {
                        background-color: $color-background-active;
                        border-color: $color-background-active;
                      }
                    }
                  }

                  &.admin {
                    .name-wrapper {
                      .role {
                        color: #939322;
                      }
                    }
                  }

                  &.employer {
                    .name-wrapper {
                      .role {
                        color: $color-accent
                      }
                    }
                  }

                  &:last-child {
                    border: none;
                  }
                }
              }
            }
          }
        }
      }

      .orders-container {
        .orders {
          width: 100%;
          display: flex;
          flex-direction: column;
          gap: 10px;

          .order-card {
            display: flex;
            flex-direction: column;
            background: black;
            border-radius: 7px;

            .card-header__wrapper {
              display: flex;
              flex-direction: column;
              border-bottom: 2px solid $color-secondary;
              padding: 8px;
              gap: 7px;
              font-size: 14px;

              span {
                font-weight: 700;
              }

              .card-header__title {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 5px;

                .code {
                  font-size: 16px;
                }

                .date {
                  font-weight: 500;
                }
              }

              .card-header__info {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 5px;

                .summary {
                  font-size: 16px;
                }

                .status {
                  margin-left: auto;
                  padding: 3px 5px;
                  border-radius: 7px;
                  font-weight: 700;

                  &.success {
                    background-color: green;
                  }

                  &.waiting {
                    background-color: gray;
                  }

                  &.canceled {
                    background-color: $color-accent;
                  }
                }
              }
            }

            .product-card {
              display: flex;
              flex-direction: row;
              padding: 8px;

              .image-wrapper {
                display: flex;
                align-items: flex-start;

                img {
                  width: 100px;
                  border-radius: 7px;
                }
              }

              span {
                font-size: 14px;
              }

              .info {
                display: flex;
                flex-direction: column;
                gap: 4px;
                margin-left: 10px;
                flex-grow: 1;

                .title {
                  font-weight: 700;
                }

                .code {
                  opacity: .6;
                }

                .price {
                  font-weight: 700;
                  display: flex;
                  flex-direction: row;
                  word-break: keep-all;
                }
              }
            }
          }
        }
      }

      .services-container {
        .advice {
          font-size: 13px;
          opacity: .75;
        }

        .services {
          display: grid;
          grid-template-columns: repeat(1, calc(100% / 1 - 8px / 1 * (1 - 1)));
          gap: 8px;

          .service {
            display: flex;
            align-items: center;
            cursor: pointer;
            user-select: none;
            justify-content: center;
            padding: 0 10px;
            min-height: 55px;
            font-size: 17px;
            font-weight: 800;
            background: $color-secondary;
            border-radius: 24px;
            text-align: center;
            text-wrap: wrap;
            transition: background-color 200ms, scale 350ms;

            &:hover {
              scale: 0.95;
              background: $color-background-hover;
            }

            &:active {
              background: $color-background-active;
            }
          }
        }
      }

      .time-container {
        h1 {
          text-align: center;
        }

        .time {
          display: flex;
          background: $color-header-footer;
          padding: 10px;
          flex-direction: column;
          gap: 7px;
          margin: 0 auto;
          width: 100%;
          max-width: 590px;
          border-radius: 7px;

          .form-elem {
            border-radius: 7px;
          }

          .dropdown {
            position: relative;
            width: 100%;
            display: inline-block;

            .dropdown-button {
              background: $color-secondary;
              width: 100%;
              color: $color-font;
              user-select: none;
              font-size: 18px;
              padding: 0 15px;
              height: 50px;
              text-overflow: ellipsis;
              border: 2px solid transparent;
              border-radius: 7px;
              cursor: pointer;
              transition: border-color 200ms, border-radius 200ms;

              &::selection {
                background: transparent;
              }
            }

            .dropdown-content {
              display: none;
              width: 100%;
              position: absolute;
              padding: 5px;
              margin-top: 3px;
              max-height: 275px;
              overflow-y: auto;
              box-shadow: 0 8px 16px 1px rgba(0, 0, 0, 0.54);
              background: $color-secondary;
              border-radius: 0 0 7px 7px;
              min-width: 160px;
              z-index: 1;

              .dropdown-content__item {
                color: $color-font;
                font-size: 18px;
                text-align: left;
                width: 100%;
                border-radius: 7px;
                padding: 10px 15px;
                text-decoration: none;
                background: transparent;
                cursor: pointer;
                display: block;
                transition: background 200ms;

                &:hover {
                  background-color: $color-background-hover;
                }

                &:active {
                  background-color: $color-background-active;
                }
              }
            }

            &.expanded {
              box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);

              .dropdown-button {
                border-radius: 7px 7px 0 0;
                border-color: $color-accent;
              }

              .dropdown-content {
                display: block;
              }
            }
          }

          .radios-wrapper {
            padding: 10px 0;
            display: flex;
            flex-direction: column;
            gap: 10px;

            .radios-label__wrapper {
              width: 100%;
              gap: 30px;
              align-items: center;
              display: flex;
              padding-left: 10px;

              .label {
                font-size: 18px;
                opacity: .75;
              }

              .dropdown {
                margin-left: auto;
                width: auto;

                .dropdown-button {
                  background: $color-secondary;
                  font-size: 18px;
                  padding: 0;
                  text-align: center;
                  height: 40px;

                  &::placeholder {
                    color: $color-font;
                    opacity: .75;
                  }
                }

                .dropdown-content {
                  background: $color-secondary;

                  .dropdown-content__item {
                    font-size: 18px;
                  }
                }
              }
            }

            .radios {
              display: grid;
              grid-template-columns: repeat(3, calc(100% / 3 - 4px / 3 * (3 - 1)));
              gap: 4px;

              input[type="radio"] {
                display: none;

                &:disabled {
                  opacity: 0.6;
                }
              }

              label {
                font-size: 18px;
                font-weight: 700;
                padding: 8px 12px;
                background: $color-secondary;
                border-radius: 7px;
                cursor: pointer;
                text-align: center;
                user-select: none;
                transition: background-color 200ms;

                &:hover {
                  background: $color-background-hover;
                }

                &:active {
                  background: $color-background-active;
                }
              }

              input[type="radio"]:disabled + label {
                opacity: 0.5;
              }

              input[type="radio"]:checked + label {
                background: $color-background-active;
                transition: background-color 200ms;
              }
            }
          }

          .client-info {
            display: flex;
            flex-direction: row;
            gap: 10px;

            .form-elem {
              flex-grow: 1;
              color: $color-font;
              font-size: 18px;
              padding: 0 9px;
              height: 50px;
              border-radius: 7px;
              width: 100%;
              background: $color-secondary;
              border: 2px solid $color-secondary;
              cursor: pointer;
              transition: border-color 200ms, border-radius 200ms;

              &:focus {
                border-color: $color-accent;
              }
            }
          }

          .info {
            display: flex;
            margin-top: 10px;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 8px;

            span {
              width: 100%;
              text-align: center;
              font-size: 17px;

              &.info-title {
                font-weight: 800;
                font-size: 20px;
              }

              &.info-time,
              &.info-price {
                font-size: 18px;
                font-weight: 700;
              }

              &.employee-name__wrapper,
              &.service-name__wrapper {
                display: flex;
                flex-direction: column;

                .employee-name,
                .service-name {
                  font-size: 18px;
                  font-weight: 700;
                }
              }
            }
          }

          #timeConfirm {
            font-size: 18px;
            color: $color-font;
            background: $color-secondary;
            border-radius: 7px;
            margin: 15px auto 0;
            cursor: pointer;
            font-weight: 700;
            padding: 18px 15px;
            transition: box-shadow 200ms, background-color 200ms;

            &:hover {
              box-shadow: 0 0 30px $color-accent;
              background: $color-background-hover;
            }

            &:active {
              box-shadow: 0 0 0 $color-accent;
              background: $color-background-active;
            }
          }
        }
      }

      .login-container {
        align-items: center;

        .auth-form__wrapper {
          width: 100%;
          display: flex;
          flex-direction: column;
          max-width: 420px;
          background: transparent;

          .label {
            font-size: 32px;
            text-align: center;
            color: $color-font;
            font-weight: 800;
          }

          .auth-form {
            display: flex;
            flex-direction: column;
            width: 100%;
            gap: 6px;
            margin-top: 25px;

            .form-elem {
              width: 100%;
              align-self: center;
              background: $color-secondary;
              padding: 7px 15px;
              font-weight: 800;
              color: $color-font;
              font-size: 20px;
              border-radius: 7px;
              border: 2px solid $color-secondary;
              transition: all 0.3s;

              &:hover {
                background: $color-header-footer;
              }

              &:focus {
                border-color: $color-accent;
                background: $color-header-footer;
              }

              &::placeholder {
                font-weight: 600;
              }
            }

            .actions {
              display: flex;
              flex-direction: column;
              gap: 10px;

              .action {
                width: 100%;
                text-align: center;
                font-size: 19px;
              }

              #authSubmit {
                width: 60%;
                align-self: center;
                border-radius: 7px;
                margin-top: 10px;
                border: 2px solid $color-accent;
                padding: 10px 0;
                cursor: pointer;
                font-weight: 600;
                transition: background-color 200ms;

                &:hover {
                  background: $color-background-hover;
                }

                &:active {
                  background: $color-accent;
                }
              }

              a {
                color: blue;
                transition: color 200ms;

                &:hover {
                  color: darkblue;
                }
              }
            }
          }

          .recover {
            margin-top: 10px;
            font-size: 16px;
            color: dodgerblue;
          }
        }
      }

      .registration-container {
        align-items: center;

        .registration-form__wrapper {
          width: 100%;
          display: flex;
          flex-direction: column;
          max-width: 420px;
          background: transparent;

          .label {
            font-size: 32px;
            text-align: center;
            color: $color-font;
            font-weight: 800;
          }

          .reg-form {
            display: flex;
            flex-direction: column;
            width: 100%;
            gap: 6px;
            margin-top: 25px;

            .form-elem {
              width: 100%;
              align-self: center;
              background: $color-secondary;
              padding: 7px 15px;
              font-weight: 800;
              color: $color-font;
              font-size: 20px;
              border-radius: 7px;
              border: 2px solid $color-secondary;
              transition: all 0.3s;

              &:hover {
                background: $color-header-footer;
              }

              &:focus {
                border-color: $color-accent;
                background: $color-header-footer;
              }

              &::placeholder {
                font-weight: 600;
              }
            }

            .actions {
              display: flex;
              flex-direction: column;
              gap: 10px;

              .action {
                width: 100%;
                text-align: center;
                font-size: 19px;
              }

              #authSubmit {
                width: 60%;
                align-self: center;
                border-radius: 7px;
                margin-top: 10px;
                border: 2px solid $color-accent;
                padding: 10px 0;
                cursor: pointer;
                font-weight: 600;
                transition: background-color 200ms;

                &:hover {
                  background: $color-background-hover;
                }

                &:active {
                  background: $color-accent;
                }
              }

              a {
                color: blue;
                transition: color 200ms;

                &:hover {
                  color: darkblue;
                }
              }
            }
          }

          .recover {
            margin-top: 10px;
            font-size: 16px;
            color: dodgerblue;
          }
        }
      }

      .employer-container {
        position: relative;

        .employer-info {
          display: flex;
          flex-direction: column;
          gap: 15px;

          .info-section {
            display: flex;
            flex-direction: column;
            gap: 10px;

            .section-title {
              font-size: 22px;
            }

            &.head {
              display: flex;
              flex-direction: column;
              justify-content: center;
              gap: 8px;

              .image-wrapper {
                border-radius: 50%;
                width: 110px;
                height: 110px;
                overflow: hidden;
                align-self: center;
                display: flex;
                align-items: center;
                justify-content: center;

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

              .employer-name {
                text-align: center;
                line-height: 1.05;
              }

              .info {
                display: flex;
                justify-content: center;
                gap: 3px;

                span {
                  font-weight: 700;
                  font-size: 16px;
                  opacity: .75;
                }
              }
            }

            &.works {
              .file-input__wrapper {
                width: 100%;
                height: 60px;
                border-radius: 7px;
                background: $color-secondary;
                transition: background-color 200ms;

                label {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  cursor: pointer;
                  width: 100%;
                  height: 100%;

                  span {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 100%;
                    height: 100%;
                    cursor: pointer;
                    color: $color-font;
                    text-align: center;
                    font-size: 20px;
                    font-weight: 700;
                  }

                  #upload-photo-employer-edit,
                  #upload-photo-employer-add {
                    display: none;
                  }
                }

                &:hover {
                  background: $color-background-hover;
                }

                &:active {
                  background: $color-background-active;
                }
              }

              .slider {
                padding: 3px;
                border-radius: 7px;
                margin-bottom: 40px;

                .flickity-viewport {
                  border-radius: 7px;
                  height: 200px;
                  transition: height 200ms;

                  .flickity-slider {
                    display: flex;
                    align-items: center;

                    .tile-wrapper {
                      height: 100%;
                      width: 50%;
                      overflow: hidden;
                      border-radius: 7px;
                      position: relative;
                      display: flex;
                      justify-content: center;
                      margin-right: 5px;

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

                      .delete{
                        display: none;
                        position: absolute;
                        padding: 5px;
                        border-radius: 7px;
                        bottom: 5px;
                        left: 50%;
                        transform: translateX(-50%);
                        background: $color-secondary;
                        cursor: pointer;
                        font-size: 12px;
                        font-weight: 700;
                        transition: background-color 250ms;

                        &:hover{
                          background: $color-background-hover;
                        }

                        &:active{
                          background: $color-background-active;
                        }
                      }
                    }
                  }
                }

                .flickity-prev-next-button {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  bottom: 0;
                  right: 0;
                  padding: 16px 30px;
                  border-radius: 7px;
                  transform: translateY(125%);

                  &.previous {
                    right: 70px;
                  }

                  &.next {

                  }

                  .flickity-button-icon {
                    width: 50%;
                    height: 50%;
                  }
                }
              }
            }

            &.services {
              .advice {
                font-size: 13px;
                opacity: .75;
              }

              .services-container {
                display: grid;
                grid-template-columns: repeat(1, calc(100% / 1 - 3px / 1 * (1 - 1)));
                gap: 3px;

                .service {
                  display: flex;
                  align-items: center;
                  cursor: pointer;
                  user-select: none;
                  justify-content: center;
                  padding: 0 10px;
                  min-height: 55px;
                  font-size: 17px;
                  font-weight: 800;
                  background: $color-secondary;
                  border-radius: 24px;
                  text-align: center;
                  text-wrap: wrap;
                  transition: background-color 200ms, scale 350ms;

                  &:hover {
                    scale: 0.95;
                    background: $color-background-hover;
                  }

                  &:active {
                    background: $color-background-active;
                  }
                }
              }
            }
          }
        }
      }

      .home-container {
        .home-elem {
          display: flex;
          flex-direction: column;
          gap: 6px;

          .link {
            padding-left: 10px;
            font-size: 22px;
            font-weight: 700;
          }

          &.employees{
            .slider {
              padding: 3px;
              border-radius: 7px;
              margin-bottom: 40px;

              .flickity-viewport {
                border-radius: 7px;
                height: 250px;

                .flickity-slider {
                  .employer-card__wrapper {
                    width: 50%;
                    display: flex;
                    flex-direction: column;
                    margin-right: 5px;
                    border-radius: 24px;

                    .employer-card {
                      display: flex;
                      flex-grow: 1;
                      height: 100%;
                      background: $color-secondary;
                      position: relative;
                      flex-direction: column;
                      border-radius: 24px;
                      cursor: pointer;
                      transition: background 200ms, scale 350ms;

                      .photo-wrapper {
                        display: flex;
                        aspect-ratio: 1/1;
                        width: 100%;
                        align-items: center;
                        position: relative;
                        overflow: hidden;
                        justify-content: center;
                        border-radius: 24px;

                        .employer-card__photo {
                          position: relative;
                          border-radius: 24px;
                          margin: 0 auto;
                          object-fit: cover;
                          height: 100%;
                          width: 100%;
                        }

                        .advice {
                          position: absolute;
                          opacity: 0;
                          bottom: -10px;
                          left: 0;
                          width: 100%;
                          border-radius: 7px;
                          background: $color-secondary;
                          padding: 6px 0;
                          font-weight: 600;
                          font-size: 12px;
                          margin-top: auto;
                          text-align: center;
                          z-index: 2;
                          transition: background-color 200ms, opacity 200ms, bottom 200ms;
                        }
                      }

                      .employer-card__info {
                        height: 100%;
                        position: relative;
                        display: flex;
                        gap: 10px;
                        flex-direction: column;
                        flex-grow: 1;
                        padding: 10px 7px 10px 7px;

                        .bio {
                          display: flex;
                          height: 100%;
                          gap: 10px;
                          flex-direction: column;

                          .fullname {
                            font-weight: 800;
                            word-break: break-word;
                            font-size: 14px;
                            line-height: 1.1;
                          }

                          .exp-and-works {
                            display: flex;
                            margin-top: auto;
                            flex-direction: column;
                            gap: 2px;
                            text-wrap: nowrap;

                            .experience,
                            .works-count {
                              font-size: 13px;
                            }
                          }
                        }

                        .categories {
                          display: flex;
                          flex-direction: row;
                          margin-top: auto;
                          gap: 4px;
                          flex-wrap: wrap;

                          .category {
                            border: 2px solid white;
                            border-radius: 5px;
                            padding: 2px 4px;
                            opacity: 0.6;
                            font-size: 12px;
                            text-align: center;
                          }
                        }
                      }

                      &:hover {
                        .photo-wrapper {
                          .advice {
                            opacity: 1;
                            bottom: -1px;
                          }
                        }
                      }
                    }

                    &:hover {
                      .employer-card {
                        scale: .95;

                        .employer-card {
                          background-color: $color-background-hover;
                        }
                      }
                    }

                    &:active {
                      .employer-card {
                        background-color: $color-background-active;
                      }
                    }
                  }
                }
              }

              .flickity-prev-next-button {
                display: flex;
                align-items: center;
                justify-content: center;
                bottom: 0;
                right: 0;
                padding: 16px 30px;
                border-radius: 7px;
                transform: translateY(125%);

                &.previous {
                  right: 70px;
                }

                &.next {

                }

                .flickity-button-icon {
                  width: 50%;
                  height: 50%;
                }
              }
            }
          }

          &.works{
            .slider {
              padding: 3px;
              border-radius: 7px;
              margin-bottom: 40px;

              .flickity-viewport {
                border-radius: 7px;
                height: 200px;
                transition: height 200ms;

                .flickity-slider {
                  display: flex;
                  align-items: center;

                  .tile-wrapper {
                    height: 100%;
                    width: 50%;
                    overflow: hidden;
                    border-radius: 7px;
                    position: relative;
                    margin-right: 5px;
                    display: flex;
                    justify-content: center;

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

                    .delete{
                      display: none;
                      position: absolute;
                      padding: 5px;
                      border-radius: 7px;
                      bottom: 5px;
                      left: 50%;
                      transform: translateX(-50%);
                      background: $color-secondary;
                      cursor: pointer;
                      font-size: 12px;
                      font-weight: 700;
                      transition: background-color 250ms;

                      &:hover{
                        background: $color-background-hover;
                      }

                      &:active{
                        background: $color-background-active;
                      }
                    }
                  }
                }
              }

              .flickity-prev-next-button {
                display: flex;
                align-items: center;
                justify-content: center;
                bottom: 0;
                right: 0;
                padding: 16px 30px;
                border-radius: 7px;
                transform: translateY(125%);

                &.previous {
                  right: 70px;
                }

                &.next {

                }

                .flickity-button-icon {
                  width: 50%;
                  height: 50%;
                }
              }
            }
          }
        }
      }
    }

    @media (min-width: 768px) {
      .footer-wrapper {
        .phone-wrapper,
        .address-wrapper {
          display: flex;
          font-size: 14px;
        }
      }

      .modal{
        .container{
          border-radius: 24px;
        }
      }

      .add-employer__modal,
      .change-employer__modal {
        .container {
          gap: 30px;

          .container-item {
            display: flex;
            flex-direction: row;
            gap: 5px;

            &.photo {
              .file-input__wrapper {
                width: 100%;
                border-radius: 7px;
                background: $color-header-footer;
                height: 60px;
                transition: background-color 200ms;

                label {
                  span {
                    font-size: 22px;
                  }
                }
              }
            }

            &.fields {
              flex-direction: row;

              input[type=text] {
                flex-grow: 1;
                font-size: 20px;
              }
            }

            &.services {
              gap: 7px;

              .service-button {
                padding: 7px 12px;
                font-size: 18px;
              }
            }

            &.actions {
              button {
                font-size: 24px;
              }
            }
          }
        }
      }

      .price-list__modal {
        .container {
          height: 90%;

          h2 {
            font-size: 34px;
          }

          h3 {
            margin-bottom: 30px;
            font-size: 24px;
          }

          .rows {
            gap: 5px;

            .row {
              padding: 0.8rem;

              .name,
              .price {
                font-size: 22px;
              }
            }
          }

          .advice {
            padding: 2rem 0;
            font-size: 20px;
          }
        }
      }

      main {
        .page {
          padding: 16px;

          h1 {
            font-size: 28px;
          }
        }

        .employers-container {
          .employers-wrapper {
            grid-template-columns: repeat(4, calc(100% / 4 - 16px / 4 * (4 - 1)));
            gap: 16px;

            .employer-card__wrapper {
              .employer-card {
                flex-direction: column;

                .photo-wrapper {
                  .advice {
                    font-size: 11px;
                  }
                }

                .employer-card__info {
                  gap: 0;
                  padding: 10px 7px 10px 7px;

                  .bio {
                    .fullname {
                      font-size: 14px;
                    }

                    .exp-and-works {
                      .experience,
                      .works-count {
                        font-size: 13px;
                      }
                    }
                  }

                  .categories {
                    margin-top: 10px;
                  }
                }
              }
            }
          }
        }

        .works-container {
          .works-photos-tiles {
            grid-template-columns: repeat(4, calc(100% / 4 - 5px / 4 * (4 - 1)));
          }
        }

        .page-admin__wrapper {
          .left-menu__wrapper {
            width: 200px;
            top: 88px;
            display: flex;
          }

          .bottom-menu__wrapper {
            display: none;
          }

          .admin-container {
            padding: 20px;

            .admin-section {
              .employers-wrapper {
                grid-template-columns: repeat(3, calc(100% / 3 - 16px / 3 * (3 - 1)));
                gap: 16px;

                .employer-card__wrapper {
                  .employer-card {
                    flex-direction: column;

                    .employer-card__photo {

                    }

                    .employer-card__info {
                      gap: 0;
                      padding: 10px 7px 10px 7px;

                      .bio {
                        .fullname {
                          font-size: 14px;
                        }

                        .exp-and-works {
                          .experience,
                          .works-count {
                            font-size: 13px;
                          }
                        }
                      }

                      .categories {
                        margin-top: 10px;
                      }
                    }
                  }
                }
              }

              .services {
                grid-template-columns: repeat(2, calc(100% / 2 - 10px / 2 * (2 - 1)));
                gap: 10px;

                .service-wrapper {
                  .service {
                    min-height: 80px;
                    font-size: 18px;
                  }

                  .actions {
                    .action {
                      font-size: 18px;
                      padding: 12px 0;
                    }
                  }
                }
              }

              .clients {
                tbody {
                  gap: 12px;

                  .client-row {
                    height: 45px;
                    gap: 10px;

                    .name-wrapper {
                      .name {
                        font-size: 18px;
                      }

                      .info {
                        font-size: 16px;
                      }
                    }

                    .actions {
                      gap: 5px;

                      .dropdown {
                        .dropdown-button {
                          max-width: 180px;
                          font-size: 18px;
                        }

                        .dropdown-content {
                          max-height: 300px;

                          .dropdown-content__item {
                            font-size: 18px;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }

        .orders-container {
          .orders {
            .order-card {
              .card-header__wrapper {
                font-size: 18px;

                .card-header__title {
                  display: flex;
                  flex-direction: row;
                  align-items: center;
                  gap: 5px;

                  .code {
                    font-size: 22px;
                  }
                }

                .card-header__info {
                  .summary {
                    font-size: 22px;
                  }
                }
              }

              .product-card {
                .image-wrapper {
                  img {
                    width: 200px;
                  }
                }

                .info {
                  display: flex;
                  flex-direction: column;
                  gap: 4px;
                  margin-left: 10px;
                  flex-grow: 1;

                  span {
                    font-size: 20px;
                  }

                  .title {
                    font-size: 24px;
                    font-weight: 700;
                  }
                }
              }
            }
          }
        }

        .services-container {
          .advice {
            font-size: 16px;
          }

          .services {
            grid-template-columns: repeat(3, calc(100% / 3 - 10px / 3 * (3 - 1)));
            gap: 10px;

            .service {
              padding: 0 10px;
              min-height: 80px;
              font-size: 18px;
            }
          }
        }

        .time-container {
          .time {
            .dropdown {
              .dropdown-button {
                font-size: 20px;
              }

              .dropdown-content {
                font-size: 20px;
              }
            }

            .radios-wrapper {
              .radios-label {
                font-size: 20px;
              }

              .radios {
                grid-template-columns: repeat(6, calc(100% / 6 - 8px / 6 * (6 - 1)));
                gap: 8px;

                label {
                  font-size: 20px;
                }
              }
            }

            .client-info {
              .form-elem {
                font-size: 20px;
              }
            }

            #timeConfirm {
              font-size: 20px;
            }
          }
        }

        .employer-container {
          .employer-info {
            .info-section {
              .section-title {
                font-size: 24px;
              }

              &.head {
                .image-wrapper {
                  width: 150px;
                  height: 150px;
                }

                .info {
                  span {
                    font-size: 21px;
                  }
                }
              }

              &.works {
                .slider {
                  .flickity-viewport {

                    .flickity-slider {
                      .tile-wrapper {
                        width: calc(100% / 3)
                      }
                    }
                  }

                  .flickity-prev-next-button {
                    padding: 20px 50px;

                    &.previous {
                      right: 110px;
                    }
                  }
                }
              }

              &.services {
                .advice {
                  font-size: 16px;
                }

                .services-container {
                  grid-template-columns: repeat(4, calc(100% / 4 - 5px / 4 * (4 - 1)));
                  gap: 5px;

                  .service {
                    min-height: 80px;
                    font-size: 18px;
                  }
                }
              }
            }
          }
        }

        .home-container {
          .home-elem {
            gap: 10px;

            .link {
              font-size: 24px;
            }

            .slider {
              .flickity-viewport {
                .flickity-slider {

                }
              }

              .flickity-prev-next-button {
                display: flex;
                align-items: center;
                justify-content: center;
                bottom: 0;
                right: 0;
                padding: 16px 30px;
                border-radius: 7px;
                transform: translateY(125%);

                &.previous {
                  right: 70px;
                }

                &.next {

                }

                .flickity-button-icon {
                  width: 50%;
                  height: 50%;
                }
              }
            }

            &.employees{
              .slider{
                .flickity-viewport {
                  .flickity-slider {
                    .employer-card__wrapper {
                      width: calc(100% / 3);

                      .employer-card {
                        flex-direction: column;

                        .photo-wrapper {
                          .advice {
                            font-size: 11px;
                          }
                        }

                        .employer-card__info {
                          gap: 0;
                          padding: 10px 7px 10px 7px;

                          .bio {
                            .fullname {
                              font-size: 14px;
                            }

                            .exp-and-works {
                              .experience,
                              .works-count {
                                font-size: 13px;
                              }
                            }
                          }

                          .categories {
                            margin-top: 10px;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }

            &.works{
              .slider{
                .flickity-viewport {


                  .flickity-slider {
                    .tile-wrapper{
                      width: calc(100% / 3);
                    }
                  }
                }
              }
            }
          }
        }
      }

      .work-photo__modal {
        .container {
          .photo-wrapper {
            .work-photo {
              width: 70%;
            }
          }

          .info-wrapper {
            .employer-label {

            }
          }
        }
      }
    }

    @media (min-width: 1024px) {
      .header-wrapper {
        background: none;
        display: flex;
        padding: 10px;
        justify-content: center;

        .main-panel {
          box-shadow: #0000002e 0 8px 24px;
          width: 90%;
          border-radius: 24px;
          background: $color-header-footer;

          .nav {
            display: flex;

            .nav-item {
              display: flex;
            }

            .logo-wrapper {
              padding: 0 20px;

              img {
                display: flex;
              }

              .label-wrapper {
                gap: 0;
                flex-direction: column;
              }
            }
          }

          .burger {
            display: none;
          }
        }
      }

      .footer-wrapper {
        .phone-wrapper,
        .address-wrapper {
          display: flex;
          font-size: 18px;
        }
      }

      .price-list__modal {
        .container {
          h2 {
            font-size: 34px;
          }

          h3 {
            margin-bottom: 30px;
            font-size: 27px;
          }

          .rows {
            gap: 5px;

            .row {
              padding: 1rem;

              .name,
              .price {
                font-size: 25px;
              }
            }
          }

          .advice {
            padding: 2rem 0;
            font-size: 20px;
          }
        }
      }

      main {
        .page {
          gap: 15px;
        }

        .employers-container {
          .employers-wrapper {
            .employer-card__wrapper {
              .employer-card {
                flex-direction: column;

                .photo-wrapper {
                  .advice {
                    font-size: 15px;
                  }
                }

                .employer-card__info {
                  gap: 0;

                  .bio {
                    .fullname {
                      font-size: 19px;
                    }

                    .exp-and-works {
                      .experience,
                      .works-count {
                        font-size: 18px;
                      }
                    }
                  }

                  .categories {
                    margin-top: 10px;

                    .category {
                      font-size: 14px;
                    }
                  }
                }
              }
            }
          }
        }

        .works-container {
          .works-photos-tiles {
            grid-template-columns: repeat(5, calc(100% / 5 - 5px / 5 * (5 - 1)));
          }
        }

        .services-container {
          .services {
            grid-template-columns: repeat(4, calc(100% / 4 - 10px / 4 * (4 - 1)));
            gap: 10px;

            .service {
              min-height: 100px;
              font-size: 22px;
            }
          }
        }

        .page-admin__wrapper {
          .left-menu__wrapper {
            display: flex;
            top: 156px;
          }

          .bottom-menu__wrapper {
            display: none;
          }

          .admin-container {
            .admin-section {
              .add-button {
                padding: 20px 0;

                span {
                  font-size: 24px;
                }
              }

              .employers-wrapper {
                .employer-card__wrapper {
                  .employer-card {
                    flex-direction: column;

                    .employer-card__info {
                      gap: 0;

                      .bio {
                        .fullname {
                          font-size: 19px;
                        }

                        .exp-and-works {
                          .experience,
                          .works-count {
                            font-size: 18px;
                          }
                        }
                      }

                      .categories {
                        margin-top: 10px;

                        .category {
                          font-size: 14px;
                        }
                      }
                    }
                  }

                  .actions {
                    .action {
                      font-size: 18px;
                    }
                  }
                }
              }

              .services {
                grid-template-columns: repeat(3, calc(100% / 3 - 10px / 3 * (3 - 1)));
                gap: 10px;

                .service-wrapper {
                  .service {
                    min-height: 100px;
                    font-size: 20px;
                  }

                  .actions {
                    .action {
                      font-size: 18px;
                    }
                  }
                }
              }

              .clients {
                tbody {
                  .client-row {
                    gap: 10px;

                    .name-wrapper {
                      .name {
                        font-size: 22px;
                      }

                      .info {
                        font-size: 20px;
                      }
                    }

                    .actions {
                      .dropdown {
                        .dropdown-button {
                          max-width: 260px;
                          font-size: 22px;
                        }

                        .dropdown-content {
                          max-height: 300px;

                          .dropdown-content__item {
                            font-size: 22px;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }

        .time-container {
          .time {
            .dropdown {
              .dropdown-button {
                font-size: 20px;
              }

              .dropdown-content {
                font-size: 20px;
              }
            }

            .radios-wrapper {
              .radios-label {
                font-size: 20px;
              }

              .radios {
                grid-template-columns: repeat(6, calc(100% / 6 - 8px / 6 * (6 - 1)));
                gap: 8px;

                label {
                  font-size: 20px;
                }
              }
            }
          }
        }

        .employer-container {
          .employer-info {
            .info-section {
              &.head {
                .image-wrapper {
                  width: 200px;
                  height: 200px;
                }
              }

              &.works {
                .slider {
                  .flickity-viewport {
                    height: 225px;

                    .flickity-slider {
                      .tile-wrapper {
                        width: calc(100% / 4)
                      }
                    }
                  }
                }
              }

              &.services {
                .advice {
                  font-size: 18px;
                }

                .services-container {
                  grid-template-columns: repeat(4, calc(100% / 4 - 5px / 4 * (4 - 1)));
                  gap: 5px;

                  .service {
                    min-height: 100px;
                    font-size: 22px;
                  }
                }
              }
            }
          }
        }

        .home-container {
          .home-elem {
            gap: 15px;

            .slider {
              .flickity-viewport {
                .flickity-slider {
                  .image-wrapper {
                    width: 20%;
                  }

                  .employer-card__wrapper {
                    width: 25%;

                    .employer-card {
                      flex-direction: column;

                      .photo-wrapper {
                        .advice {
                          font-size: 15px;
                        }
                      }

                      .employer-card__info {
                        gap: 0;

                        .bio {
                          .fullname {
                            font-size: 19px;
                          }

                          .exp-and-works {
                            .experience,
                            .works-count {
                              font-size: 18px;
                            }
                          }
                        }

                        .categories {
                          margin-top: 10px;

                          .category {
                            font-size: 14px;
                          }
                        }
                      }
                    }
                  }
                }
              }

              .flickity-prev-next-button {
                display: flex;
                align-items: center;
                justify-content: center;
                bottom: 0;
                right: 0;
                padding: 16px 30px;
                border-radius: 7px;
                transform: translateY(125%);

                &.previous {
                  right: 70px;
                }

                &.next {

                }

                .flickity-button-icon {
                  width: 50%;
                  height: 50%;
                }
              }
            }

            &.employees {
              .slider {
                .flickity-viewport {
                  .flickity-slider {
                    .employer-card__wrapper {
                      width: calc(100% / 4);

                      .employer-card {
                        flex-direction: column;

                        .photo-wrapper {
                          .advice {
                            font-size: 15px;
                          }
                        }

                        .employer-card__info {
                          gap: 0;

                          .bio {
                            .fullname {
                              font-size: 19px;
                            }

                            .exp-and-works {
                              .experience,
                              .works-count {
                                font-size: 18px;
                              }
                            }
                          }

                          .categories {
                            margin-top: 10px;

                            .category {
                              font-size: 14px;
                            }
                          }
                        }
                      }
                    }
                  }
                }

                .flickity-prev-next-button {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  bottom: 0;
                  right: 0;
                  padding: 16px 30px;
                  border-radius: 7px;
                  transform: translateY(125%);

                  &.previous {
                    right: 70px;
                  }

                  &.next {

                  }

                  .flickity-button-icon {
                    width: 50%;
                    height: 50%;
                  }
                }
              }
            }

            &.works{
              .slider{
                .flickity-viewport {
                  height: 225px;

                  .flickity-slider {
                    .tile-wrapper{
                      width: 25%;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    @media (min-width: 1280px) {
      .header-wrapper {
        .main-panel {
          .nav {
            .nav-item {
              padding: 0 20px;
              font-size: 23px;
            }

            .dropdown-profile {
              padding: 0 20px;

              .name {
                font-size: 23px;

                &:after {
                  width: 12px;
                  height: 12px;
                }
              }

              .dropdown-content {
                top: 90px;
                flex-direction: column;
                transform: translateX(-65%);

                .dropdown-content__item {
                  font-size: 20px;
                }
              }
            }
          }
        }
      }

      .footer-wrapper {
        .phone-wrapper,
        .address-wrapper {
          display: flex;
          font-size: 20px;
        }
      }

      main {
        padding: 24px 0;

        .page {
          border-radius: 24px;
        }

        .employers-container {
          .employers-wrapper {
            grid-template-columns: repeat(6, calc(100% / 6 - 16px / 6 * (6 - 1)));
            gap: 16px;

            .employer-card__wrapper {
              .employer-card {
                flex-direction: column;

                .photo-wrapper {
                  .advice {
                    font-size: 15px;
                  }
                }

                .employer-card__info {
                  gap: 0;

                  .bio {
                    .fullname {
                      font-size: 19px;
                    }

                    .exp-and-works {
                      .experience,
                      .works-count {
                        font-size: 18px;
                      }
                    }
                  }

                  .categories {
                    margin-top: 10px;

                    .category {
                      font-size: 14px;
                    }
                  }
                }
              }
            }
          }
        }

        .services-container {
          grid-template-columns: repeat(5, calc(100% / 5 - 10px / 5 * (5 - 1)));
          gap: 10px;

          .services {
            .service {
              min-height: 100px;
              font-size: 22px;
            }
          }
        }

        .page-admin__wrapper {
          .left-menu__wrapper{
            border-radius: 0 24px 24px 0;
            box-shadow: #0000002e 0 8px 24px;
          }

          .admin-container {
            .admin-section {
              .employers-wrapper {
                grid-template-columns: repeat(5, calc(100% / 5 - 16px / 5 * (5 - 1)));
                gap: 16px;

                .employer-card__wrapper {
                  .employer-card {
                    flex-direction: column;

                    .employer-card__photo {

                    }

                    .employer-card__info {
                      gap: 0;

                      .bio {
                        .fullname {
                          font-size: 19px;
                        }

                        .exp-and-works {
                          .experience,
                          .works-count {
                            font-size: 18px;
                          }
                        }
                      }

                      .categories {
                        margin-top: 10px;

                        .category {
                          font-size: 14px;
                        }
                      }
                    }
                  }
                }
              }

              .services {
                grid-template-columns: repeat(4, calc(100% / 4 - 10px / 4 * (4 - 1)));
                gap: 10px;

                .service {
                  min-height: 100px;
                  font-size: 22px;
                }
              }

              .clients {
                tbody {
                  .client-row {
                    .name-wrapper {
                      .name {
                        font-size: 24px;
                      }

                      .info {
                        font-size: 22px;
                      }
                    }

                    .actions {
                      .dropdown {
                        .dropdown-button {
                          max-width: 260px;
                          font-size: 24px;
                        }

                        .dropdown-content {
                          max-height: 300px;

                          .dropdown-content__item {
                            font-size: 24px;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }

        .time-container {
          .time {
            gap: 15px;
          }
        }

        .employer-container {
          .employer-info {
            .info-section {
              .section-title {

              }

              &.head {
                .info {
                  span {
                    font-size: 24px;
                  }
                }
              }

              &.works {
                .slider {
                  .flickity-viewport {
                    height: 300px;

                    .flickity-slider {
                      .time-wrapper {
                        width: calc(100% / 5);
                      }
                    }
                  }
                }
              }
            }
          }
        }

        .home-container {
          .home-elem {
            gap: 20px;

            .slider {
              .flickity-viewport {
                .flickity-slider {

                }
              }

              .flickity-prev-next-button {
                display: flex;
                align-items: center;
                justify-content: center;
                bottom: 0;
                right: 0;
                padding: 16px 30px;
                border-radius: 7px;
                transform: translateY(125%);

                &.previous {
                  right: 70px;
                }

                &.next {

                }

                .flickity-button-icon {
                  width: 50%;
                  height: 50%;
                }
              }
            }

            &.employees {
              .slider {
                .flickity-viewport {
                  .flickity-slider {
                    .employer-card__wrapper {
                      width: 20%;

                      .employer-card {
                        flex-direction: column;

                        .photo-wrapper {
                          .advice {
                            font-size: 15px;
                          }
                        }

                        .employer-card__info {
                          gap: 0;

                          .bio {
                            .fullname {
                              font-size: 19px;
                            }

                            .exp-and-works {
                              .experience,
                              .works-count {
                                font-size: 18px;
                              }
                            }
                          }

                          .categories {
                            margin-top: 10px;

                            .category {
                              font-size: 14px;
                            }
                          }
                        }
                      }
                    }
                  }
                }

                .flickity-prev-next-button {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  bottom: 0;
                  right: 0;
                  padding: 16px 30px;
                  border-radius: 7px;
                  transform: translateY(125%);

                  &.previous {
                    right: 70px;
                  }

                  &.next {

                  }

                  .flickity-button-icon {
                    width: 50%;
                    height: 50%;
                  }
                }
              }
            }

            &.works{
              .slider{
                .flickity-viewport {
                  height: 300px;

                  .flickity-slider {
                    .tile-wrapper{
                      width: 25%;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  &.scroll-locked {
    overflow: hidden;
  }

  @media (min-width: 1024px) {
    .ant-message {
      font-size: 19px;

      .ant-message-notice-wrapper {
        .ant-message-notice {
          .ant-message-notice-content {
            padding: 10px;
          }
        }
      }
    }
  }
}