base_ui/assets/common/scss/components/popUp-tab.scss

.popUp-tab {
    &__header {
      position: absolute;
      z-index: 10;
      right: 0;
      top: 0;
      width: 160px;
      height: calc(100% - 65px);
      background: white;
      border-left: 1px solid #f1f1f1;
      padding: 20px 0;
      &-title {
        font-size: 16px;
        color: #444444;
        margin-bottom: 32px;
        padding-right: 23px;
        padding-left: 23px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
      }
    }
    &__menu {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      border-bottom: 1px solid #f1f1f1;
      a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding-right: 23px;
        border-radius: 0;
        width: 100%;
        border: unset;
        margin: 0;
        font-size: 14px;
        color: #444444;
        padding-top: 6px;
        padding-bottom: 6px;
        margin-bottom: 5px;
        padding-left: 23px;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        &.active {
          background-color: #e8fcff;
          color: #00b6e3;
          border-bottom: 1px solid #00b6e3;
          background: white;
        }
        &:hover {
          background-color: #e8fcff;
          background: unset;
        }
        &:last-child {
          margin-left: 29px;
        }
      }
      .nav-tabs {
        border: unset;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        overflow-y: hidden;
        overflow-x: auto;
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
        &::-webkit-scrollbar {
          display: none;
        }
      }
    }
    &__content {
      padding-top: 130px;
      height: calc(100% - 75px);
      .tab-pane {
        padding-right: 205px;
      }
    }
    &__buttons {
      position: absolute;
      bottom: -85px;
      left: 0;
      width: 100%;
      z-index: 11;

      // padding-left: 24px;
      // padding-right: 24px;

      padding-top: 1em;
      display: flex;
      align-items: center;
      border-top: 1px solid #f1f1f1;
      background: white;
      // border-bottom-left-radius: 20px;
      // border-bottom-right-radius: 20px;
      // height: 65px;
      justify-content: flex-end;
    }
    &__submit {
      border-radius: 20px;
      border: 2px solid #00b6e3;
      font-size: 14px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      padding-right: 16px;
      padding-left: 16px;
      color: #00b6e3;
      height: 32px;
      -webkit-transition: all 0.2s ease-in;
      transition: all 0.2s ease-in;
      &:hover {
        background-color: #00b6e3;
        color: #fff;
      }
    }
    &__clear {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      color: #444444;
      font-size: 14px;
      padding-right: 16px;
      padding-left: 16px;
      height: 32px;
      margin-left: 15px;
      &:hover {
        color: #00b6e3;
      }
    }
  }