#frontpanel-toolbar {
  width: 100%;
  background: #232426;
  position: absolute;
  top: -50px;
  padding: 5px 0;
}
.toolbar {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;

  .storage-manager-store-time {
    font-size: 14px;
    color: rgb(144, 160, 175);
    font-style: italic;
    min-width: 250px;
    .time-label {
      text-decoration: underline;
    }
  }
}
.frontpanel-toolbar-container {
  z-index: 999;
  background: transparent;  
  display: flex;
  justify-content: flex-end;
  flex: 1;
  max-width: 600px;
}

.frontpanel-toolbar {
  margin: 0;
  list-style: none;
  padding-inline-start: 0;
  display: flex;

  &.component-toolbar {
    .frontpanel-toolbar-item {
      margin-right: 1.2rem;
      min-width: 3.9rem;
      padding: 0 0.3rem;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  &-alignment {
    min-width: 3.9rem !important;
    padding: 0 0.3rem;
  }

  .vertical-dropdown {
    font-size: 20px;
    color: #AFAFB0;
  }

  .frontpanel-toolbar-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    border-radius: 2px;
    min-width: 3.2rem;
    min-height: 3.2rem;
    justify-content: center;

    &:hover, &.selected {
      background: #343436;
    }

    & > div {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    &.disabled {
      pointer-events: none;
    }
    .svg-icon {
      width: 2rem;
      height: 2rem;

      &.dropdown-icon {
        width: 0.8rem;
        height: 0.8rem;
        margin-left: 0.5rem;
      }
    }
    .btn-drag, .btn-init {
      display: block;
      margin-bottom: 2px;
      width: 38px;
      height: 36px;
      padding: 8px;
      // background-color: rgba(255,255,255,0.1);
      border-radius: 3px;
      path {
        fill: #fff;
      }
      &:hover {
        path {
          fill: #1890ff;
        }
      }
    }
    .ant-select-selector {
      background: #1D1E20;
      border: 1px solid #18191A;
      color: #E1E1E1;
    }

    &.dropdown-item {
      .icon-jiantou-you1 {
        color: #818283;
      }
    }
  }
  &-init {
    margin: 0!important;
  }
  &-drag {
    .btn-drag {
      &.draggable {
        box-shadow: inset 0 0 8px fade(#fff, 15%);
        background-color: fade(#fff, 10%);
        path {
          fill: #1890ff;
        }
      }
    }
  }

  &-scalc {
    min-width: 7.6rem !important;
    border: 1px solid #1B1C1E;

    &.vertical-scalc {
      border: none
    }
    .ant-input-affix-wrapper {
      background: #1D1E20;
      border-radius: 2px;
      border: none;
      width: 7.6rem;
      padding: 0.4rem 0.8rem;

      &:hover, &-focused {
        border: none;
        box-shadow: none;
        outline: none;
        border-inline: none;
      }
      input {
        color: #E1E1E1;
        background: transparent;
      }
    }
    span.zoom-value {
      flex: 1;
    }
  }
}

.other-menu {
  display: flex;
  justify-content: space-evenly;
  flex: 1;
  
  &.vertical {
    flex-direction: column;
    width: 160px;
    padding: 4px 0;

    .separator {
      width: calc(100% - 41px);
      height: 1px;
      background: #1B1C1E;
      margin-left: 18px;
    }

    .frontpanel-toolbar {
      flex-direction: column;
      // border-bottom: 1px solid #1B1C1E;
      padding: 10px 0;
      .frontpanel-toolbar-item {
        justify-content: flex-start;
        padding: 0 18px;
        margin-right: 5px;

        .iconjiantou-you1 {
          font-size: 12px;
          color: #818283;
        }
        .vertical-content {
          flex: 1;
          display: flex;
          align-items: center;
          span {
            flex: 1;
            color: #E1E1E1;
            font-size: 14px;
            margin-left: 5px;
          }
        }
        &.disabled .vertical-content *{
          color: #48494B;
        }
      }

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

.component-menu {
  &.scalc-menu {
    width: 16rem;

    .ant-menu-title-content {
      width: 100%;
    }
    .menu-item-info {
      flex: 1;
    }

    .menu-item-tooltip {
      font-size: 1.2rem;
      color: #818283;
    }
  }
  .ant-dropdown-menu-item, .ant-menu-item {
    display: flex;
    align-items: center;
    .svg-icon {
      width: 1.6rem;
      height: 1.6rem;
      margin-right: 8px;
    }
    span {
      font-size: 1.4rem;
    }
    &.ant-menu-item-selected {
      background-color: #1f2d3c !important;
    }

    &[value='tooltip'] {
      white-space: pre-wrap;
      height: 40px !important;
      line-height: 1.6rem !important;
      font-size: 1.2rem !important;
      span {
        font-size: 1.2rem;
      }
    }
  }
  &.ant-menu-vertical>.ant-menu-item {
    height: 30px;
    line-height: 30px;

    .ant-menu-title-content {
      display: flex;
      align-items: center;
    }
  }
  .separator-line {
    width: calc(100% - 28px);
    height: 1px !important;
    background: #1B1C1E;
    margin-left: 14px;
    cursor: none;
  }
}

.resize-modal {
  padding-top: 0 !important;
  .ant-popover-arrow {
    display: none;
  }
  .ant-popover-inner {
    background: #232426;
    box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.12), 0px 9px 28px 0px rgba(0, 0, 0, 0.2), 0px 6px 16px -8px rgba(0, 0, 0, 0.32);
    border-radius: 2px;

    .ant-popover-title {
      color: #E1E1E1;
      border-bottom: 1px solid #1B1C1E;
    }

    .resize-form {
      font-size: 1.4rem;
      .resize-filed {
        display: flex;
        align-items: center;
    
        &.height-filed {
          margin-top: 12px;
        }
    
        span {
          color: #818283;;
    
          &.ant-select-selection-item {
            color: #E1E1E1;
          }
        }
        .ant-input{
          flex: 1;
          max-width: 90px;
          margin-right: 8px;
          margin-left: 4px;
          background: #1D1E20;
          border-radius: 2px;
          border: 1px solid #18191A;
          color: #E1E1E1;
        }
        .ant-select-selector {
          background: #1D1E20;
          border: 1px solid #18191A;
          color: #E1E1E1;
        }
      }
      .resize-button {
        margin-top: 15px;
        text-align: right;
        button {
          margin-left: 8px;
          font-size: 1.2rem;
        }

        button:nth-child(1) {
          background: #3C3D3F;
          border-radius: 2px;
          border: 1px solid #1B1C1E;
          color: #AFAFB0;
        }
        button:nth-child(2) {
          background: #0084FF;
          border-radius: 2px;
        }
      }
    }
  }
}

.toolbar-dark-dropdown, .toolbar-dark-dropdown .ant-dropdown-menu, .toolbar-dark-dropdown .ant-menu {
  background-color: #232426 !important;
  box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.12), 0px 9px 28px 0px rgba(0, 0, 0, 0.2), 0px 6px 16px -8px rgba(0, 0, 0, 0.32) !important;
  border-radius: 2px !important;
  padding: 0 !important;

  .frontpanel-toolbar-item .svg-icon{
    width: 1.6rem;
    height: 1.6rem;
  }
  
  .ant-select-item {
    color: #E1E1E1;
  }

  .ant-dropdown-menu-item, .ant-menu-item {
    color: #E1E1E1;
  }

  .ant-select-item-option-active, .ant-dropdown-menu-item-active {
    color: rgba(0,0,0,.85);
  }

  .ant-menu-item-disabled {
    color: #48494B !important;
    cursor: default !important;
    pointer-events: none !important;
  }
  
  .ant-menu-vertical {
    border-right: none;
  }
  
  .ant-popover-inner {
    background: transparent;
  }

  .ant-popover-arrow {
    display: none;
  }

  .ant-menu-item-active {
    color: #fff;
    background-color: #1F2D3C !important;
  }

  .ant-popover-inner-content {
    padding: 0;
  }

  .ant-select-item-option-active:not(.ant-select-item-option-disabled),
  .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
    background-color: #1f2d3c;
    color: #E1E1E1;
  }
}

.scalc-selector {
  width: 16rem !important;
}