/* Layout Left CSS*/
.layout-left {
  .leftHeader {
    background: @header-bg-color !important;
    padding: 0 !important;
    height: 48px !important;
    line-height: 48px !important;
    min-width: 1440px;
    display: flex;
    justify-content: space-between;
    .left {
      .left-logo {
        display: flex;
        height: 50px;
        font-size: 14px;
        color: #fffceb;
        .logo-link {
          cursor: pointer;
        }
        .logo-link:hover {
          color: #00c1de;
        }

        .sre-work-link {
          cursor: pointer;
        }
        .sre-work-link :hover {
          color: #00c1de;
        }
        .logo-text {
          font-size: 16px;
          font-weight: bold;
          color: #fff;
          opacity: 0.8;
        }
      }
      flex-grow: 0;
    }

    .center {
      margin: 0 10px;
      display: flex;
      width: auto;
      flex-direction: row-reverse;
      flex-grow: 1;
    }

    .right {
      display: flex;
      min-width: 110px;
      flex-grow: 0;
      justify-content: space-around;
    }
    .ant-menu {
      background: @header-bg-color;
    }
    .ant-menu-horizontal {
      border: none;
    }
  }

  .menu-tree-header {
    border-bottom: 1px solid @border-color-split;
    padding-top: 12px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
}

.header-search {
  margin-right: 3px;
  display: inline-block;
  width: 100%;
  max-width: 250px;
  text-align: left;

  .ant-select {
    width: 100%;
    .ant-select-selection {
      background-color: @header-bg-color;
      border: 1px solid #3a3d52;
    }
  }

  input {
    color: white;
    background: transparent;
  }

  i {
    color: @text-color;
  }

  .panel-container-card {
    left: 220px;
  }
}

/* Common Content CSS*/
.common-content {
  //background: @component-background;
}

.t-top-menus {
  justify-content: center;
  display: flex;
  border-top: solid 1px;
  border-color: @border-color-split;
  //background: @header-bg-color;
  background: @component-background;
  .t-menu {
    line-height: 30px;
    //background: @header-bg-color;
    border-bottom: none;
  }
}

.left-menus-panel {
  margin-top: 8px;
  margin-left: 8px;
  .ant-menu-inline,
  .ant-menu-vertical {
    border: none;
  }

  .ant-menu-inline-collapsed > .ant-menu-item,
  .ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item {
    padding: 3px 12px !important;
    height: 48px;
    font-size: 12px;
    text-align: center;
    span {
      display: block;
      opacity: 1;
      line-height: 1.2;
      max-width: none;
      margin-top: 13px;
    }
    .anticon {
      line-height: 1;
    }
  }
  .ant-menu-inline-collapsed
    > .ant-menu-item-group
    > .ant-menu-item-group-list
    > .ant-menu-submenu
    > .ant-menu-submenu-title,
  .ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title {
    padding: 3px 12px !important;
    height: 48px;
    font-size: 12px;
    text-align: center;
    span {
      display: block;
      opacity: 1;
      line-height: 1.2;
      max-width: none;
      margin-top: 0px;
    }
    .anticon {
      line-height: 1;
    }
  }
}
/* Common Footer CSS*/
.common-footer {
  width: 100%;
  text-align: center;
  //background: @component-background;
  height: 24px;
  line-height: 24px;
  //font-size: 12px;
  margin-top: 12px;
  //position: absolute;
  //top:calc(100vh - 2);
  //bottom: 16px;
  color: #999 !important;
  //box-shadow: 4px 4px 40px 0 rgba(0,0,0,.05) !important;
}

.globalSpin {
  width: 100%;
  margin: 40px 0 !important;
}

.globalBackground {
  background: @component-background;
}
.transparent-panel {
  background: var(--PrimaryBackColor) !important;
}
.headerBackground {
  background: @header-bg-color;
}
.common-border {
  border: solid 1px;
  border-color: @border-color-split;
}
// Scrollbars

// ::-webkit-scrollbar {
//   width: 8px;
//   height: 8px;
// }

.content-top-menu-bar {
  min-width: 500px;
  .ant-menu-horizontal {
    border: none;
  }
}

.abm_small_tabs {
  .ant-tabs-nav .ant-tabs-tab {
    margin: 0px 0px 0px 0px;
    padding: 8px 14px 8px 14px;
  }

  .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
    padding: 0px 3px;
  }

  .ant-tabs-bar {
    margin: 0px;
  }

  .ant-tabs-nav .ant-tabs-tab .anticon {
    margin-right: 1px;
  }
}

.abm-common-flex-row-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.abm-default-brief-header-container {
  .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
    background-color: transparent;
  }

  .brief-layout-header {
    padding: 0 15vw 0 calc(~'15vw - 40px');
    display: flex;
    justify-content: space-between;
    height: 48px;

    .ant-menu-item,
    .ant-menu-submenu {
      border: none;
    }
    .left-logo {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .logo-link {
        cursor: pointer;
        font-size: 12px;
        font-weight: bold;
      }
      .logo-link:hover {
        color: #00c1de;
      }

      .search-container {
        margin-left: 36px;
        .brief-layout-header-search {
          display: inline-block;
          width: 100%;
          max-width: 220px;
          .ant-select {
            width: 220px;
          }
        }
      }
      .menu-container {
        margin-left: 36px;
      }
    }

    .right-user {
      .userImg {
        width: 20px;
        border-radius: 20px;
        box-sizing: border-box;
        background-color: transparent;
      }

      .ant-menu-item .anticon,
      .ant-menu-submenu-title .anticon {
        min-width: 14px;
        margin-right: 0;
        font-size: 14px;
        -webkit-transition: font-size 0.15s cubic-bezier(0.215, 0.61, 0.355, 1),
          margin 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        transition: font-size 0.15s cubic-bezier(0.215, 0.61, 0.355, 1),
          margin 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      }

      .block-item {
        width: 24px;
        height: 100%;
        text-align: center;
        line-height: 42px;
        font-size: 16px;
        color: #fff;
        margin: 0 10px;
        cursor: pointer;
      }

      .block-item:hover {
        color: #00c1de;
      }
    }

    .center {
    }
  }
  .brief-sider-nav-toggleBar {
    float: left;
    padding-top: 5px;
  }
}

// ::-webkit-scrollbar:hover {
//   height: 8px;
// }

// ::-webkit-scrollbar-button:start:decrement,
// ::-webkit-scrollbar-button:end:increment {
//   display: none;
// }
// ::-webkit-scrollbar-button:horizontal:decrement {
//   display: none;
// }
// ::-webkit-scrollbar-button:horizontal:increment {
//   display: none;
// }
// ::-webkit-scrollbar-button:vertical:decrement {
//   display: none;
// }
// ::-webkit-scrollbar-button:vertical:increment {
//   display: none;
// }
// ::-webkit-scrollbar-button:horizontal:decrement:active {
//   background-image: none;
// }
// ::-webkit-scrollbar-button:horizontal:increment:active {
//   background-image: none;
// }
// ::-webkit-scrollbar-button:vertical:decrement:active {
//   background-image: none;
// }
// ::-webkit-scrollbar-button:vertical:increment:active {
//   background-image: none;
// }
// ::-webkit-scrollbar-track-piece {
//   background-color: transparent;
// }

// ::-webkit-scrollbar-corner:corner-present {
//   display: none;
// }
// ::-webkit-scrollbar-corner {
//   display: none;
// }

/* Make clicks pass-through */
#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  background: @nprogress-color;

  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;

  width: 100%;
  height: 2px;
}

/* Fancy blur effect */
#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px @nprogress-color, 0 0 5px @nprogress-color;
  opacity: 1;

  -webkit-transform: rotate(3deg) translate(0px, -4px);
  -ms-transform: rotate(3deg) translate(0px, -4px);
  transform: rotate(3deg) translate(0px, -4px);
}

/* Remove these to get rid of the spinner */
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 15px;
}

#nprogress .spinner-icon {
  width: 18px;
  height: 18px;
  box-sizing: border-box;

  border: solid 2px transparent;
  border-top-color: @nprogress-color;
  border-left-color: @nprogress-color;
  border-radius: 50%;

  -webkit-animation: nprogress-spinner 400ms linear infinite;
  animation: nprogress-spinner 400ms linear infinite;
}

.nprogress-custom-parent {
  overflow: hidden;
  position: relative;
}

.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
  position: absolute;
}

@-webkit-keyframes nprogress-spinner {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes nprogress-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
