.oflow-client--tabs {

  &.oflow-client--tabs-left,
  &.oflow-client--tabs-right {
    height: 100%;
  }

  &.oflow-client--tabs-left {
    >.ant-tabs-nav {
      width: 50px;
      min-width: 50px;

      >.ant-tabs-nav-wrap {
        >.ant-tabs-nav-list {
          >.ant-tabs-ink-bar {
            left: 0;
            right: unset !important;
            height: 50px;
            width: 3px;
          }

          ;

          >.ant-tabs-tab {
            margin-top: 0;
            width: 100%;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            border-bottom: 1px solid #dfdfdf;
            height: 52px;
            // color: #888;

            &.ant-tabs-tab-active,
            &:hover {
              // background-color: #F5F5F5;

              >div {
                font-size: 14px;
                font-weight: normal !important;
                text-shadow: unset;
              }
            }

            >div {
              word-break: break-all;
              width: 24px;
              text-align: center;
              text-shadow: unset;
              white-space: pre-wrap;
            }
          }
        }
      }
    }

    >.ant-tabs-content-holder {
      >.ant-tabs-content.ant-tabs-content-left {
        height: 100%;

        >.ant-tabs-tabpane {
          padding-left: 0;
          height: 100%;
        }
      }
    }
  }

  &.oflow-client--tabs-right {

    >.ant-tabs-nav {
      width: 40px;
      min-width: 40px;

      >.ant-tabs-nav-wrap {
        >.ant-tabs-nav-list {
          >.ant-tabs-ink-bar {
            right: 0;
            left: unset !important;
          }

          ;

          >.ant-tabs-tab {
            padding: 8px 0 !important;
            margin-top: 0;
            width: 38px;
            text-align: center;
            display: flex;
            align-items: center;
            min-height: 100px;
            justify-content: center;
            border-bottom: 1px solid #dfdfdf;
            // color: #888;

            &.ant-tabs-tab-active,
            &:hover {
              // background-color: #F5F5F5 ;

              >div {
                font-size: 14px;
                font-weight: normal !important;
                text-shadow: unset;
              }
            }

            >div {
              word-break: break-all;
              width: 24px;
              text-align: center;
              text-shadow: unset;
              white-space: pre-wrap;
            }
          }
        }
      }
    }

    >.ant-tabs-content-holder {
      >.ant-tabs-content.ant-tabs-content-right {
        height: 100%;

        >.ant-tabs-tabpane {
          padding-right: 0;
          height: 100%;
        }
      }
    }
  }

  &.oflow-client--tabs-top {
    height: 100%;

    >.ant-tabs-nav {
      height: 32px;
      // border-top: 1px solid #f5f5f5;
      margin: 0;

      >.ant-tabs-nav-wrap {
        >.ant-tabs-nav-list {
          >.ant-tabs-ink-bar {
            top: 0;
            bottom: unset !important;
          }

          >.ant-tabs-tab {
            padding: 8px 20px !important;
            margin-top: 0;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            border-right: 1px solid #dfdfdf;
            // color: #888;

            &.ant-tabs-tab-active,
            &:hover {
              // background-color: #F5F5F5;

              >div {
                font-size: 14px;
                font-weight: normal !important;
                text-shadow: unset;
              }
            }

            >div {
              word-break: break-all;
              text-align: center;
              text-shadow: unset;
              white-space: pre-wrap;
            }
          }

          >.ant-tabs-tab+.ant-tabs-tab {
            margin: 0;
          }
        }
      }
    }

    >.ant-tabs-content-holder {
      &,
      >.ant-tabs-content-top {

        &,
        >.ant-tabs-tabpane {
          height: 100%;
        }
      }
    }
  }
}