@import '~antd/lib/style/themes/default.less';

@nav-header-height: @layout-header-height;

:global .ant-menu-inline-collapsed {
  width: 48px !important;
}

.lihover {
  .closeicon {
    display: none;
  }

  &:hover {
    .closeicon {
      display: block;
    }
  }
}

.diyinput {
  width: 360px;
  background-color: #f0f0f0 !important;
  border: none !important;
  border-radius: 0px !important;
  border-radius: 0px !important;
  outline: none !important;
  box-shadow: none !important;
  &:focus {
    box-shadow: none !important;
  }

  :global .ant-input {
    background-color: #f0f0f0 !important;
    border: none !important;
    border-radius: 0px !important;
    box-shadow: none !important;

    &:focus {
      box-shadow: none !important;
    }
  }
}

.rt {
  width: 140px;
  border-left: #ddd solid 1px;
}

@media (min-width: 400px) {
  .column {
    column-count: 1; // two columns on larger phones
    column-gap: 0px;
  }

  .rt {
    width: 0px;
    overflow: hidden;
    border-left: #ddd solid 1px;
  }
}

@media (min-width: 768px) {
  .column {
    column-count: 2; // two columns on larger phones
    column-gap: 0px;
  }

  .rt {
    width: 140px;
    border-left: #ddd solid 1px;
  }
}

@media (min-width: 992px) {
  .column {
    column-count: 3; // three columns on...you get it
    column-gap: 0px;
  }
}

@media (min-width: 1200px) {
  .column {
    column-count: 4; // three columns on...you get it
    column-gap: 0px;
  }
}

@media (min-width: 1660px) {
  .column {
    column-count: 6; // three columns on...you get it
    column-gap: 0px;
  }
}

.item {
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 12px;
  break-inside: avoid;

  > h2 {
    margin-bottom: 0px;
    padding: 4px 6px;
    color: #000;
    font-weight: bolder;
    font-size: 14px;
  }

  .activeh2 {
    margin-bottom: 0px;
    padding: 4px 6px;
    color: #fff;
    font-weight: bolder;
    font-size: 14px;
    background-color: @primary-color;
  }
}

.section {
  padding: 12px 0px;

  > h2 {
    margin-bottom: 0px;
    padding: 4px 6px;
    color: #000;
    font-weight: bolder;
    font-size: 14px;
  }
}

.carditem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box !important;
  width: 100%;
  padding: 6px;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.02s;
  break-inside: avoid !important;

  .diylink {
    color: #666 !important;
    transition: all 0.02s;
  }

  > .tocollect {
    display: none;
    color: @primary-color;
  }

  > .collected {
    color: @primary-color;
  }

  &:hover {
    background-color: rgba(0, 0, 0, 0.2);

    .diylink {
      color: @primary-color !important;
    }
  }

  &:hover > .tocollect {
    display: block;
  }
}

.rtcarditem {
  width: 100%;
  margin: 0px;
  padding: 6px;
  padding-left: 12px;
  border-left: transparent solid 1px;
  cursor: pointer;
  transition: all 0.02s;

  &:hover {
    color: @primary-color;
    border-left: @primary-color solid 1px;
  }
}

.fate {
  width: 100%;
  height: 100%;

  .mains {
    color: #fff;
  }

  .containbox {
    position: absolute;
    top: 48px;
    left: 100%;
    z-index: 998;
    width: ~'calc(100vw - 100%)';
    height: ~'calc(100vh - 48px)';
    padding: 24px;
    overflow: hidden;
    background-color: #f0f0f0;
    transform: translate(0);
    transform-origin: left center;
    * {
      opacity: 1;
    }
  }

  .containboxs {
    position: absolute;
    top: 48px;
    left: 100%;
    z-index: 998;
    width: ~'calc(100vw - 100%)';
    height: ~'calc(100vh - 48px)';
    padding: 0px;
    overflow: hidden;
    background-color: #f0f0f0;
    transform: translate(-100vw);
    transform-origin: left center;
    * {
      opacity: 0.4;
    }
  }
}

.logo {
  position: relative;
  height: @nav-header-height;
  height: 48px !important;
  padding-left: (@menu-collapsed-width - 32px) / 2;
  padding-left: 7px;
  overflow: hidden;
  line-height: @nav-header-height;
  line-height: 48px !important;
  background: #002140;
  transition: all 0.1s !important;
  img {
    display: inline-block;
    height: 32px;
    vertical-align: middle;
  }

  h1 {
    display: inline-block;
    margin: 0 0 0 8px;
    color: white;
    font-weight: 600;
    font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
    line-height: 48px !important;
    vertical-align: middle;
  }
}

:global .ant-layout-sider-collapsed {
  flex: 0 0 48px !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
}
.sider {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  &.fixSiderBar {
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);

    :global {
      .ant-menu-root {
        height: ~'calc(100vh - @{nav-header-height})';
        overflow-y: auto;
      }

      .ant-menu-inline {
        border-right: 0;

        .ant-menu-item,
        .ant-menu-submenu-title {
          width: 100%;
        }
      }
    }
  }
}

.icon {
  width: 14px;
  vertical-align: baseline;
}

:global {
  .top-nav-menu li.ant-menu-item {
    height: @nav-header-height;
    line-height: @nav-header-height;
  }

  .drawer .drawer-content {
    background: #001529;
  }

  .ant-menu-inline-collapsed {
    & > .ant-menu-item .sider-menu-item-img + span,
    &
      > .ant-menu-item-group
      > .ant-menu-item-group-list
      > .ant-menu-item
      .sider-menu-item-img
      + span,
    & > .ant-menu-submenu > .ant-menu-submenu-title .sider-menu-item-img + span {
      display: inline-block;
      max-width: 0;
      opacity: 0;
    }
  }

  .ant-menu-item .sider-menu-item-img + span,
  .ant-menu-submenu-title .sider-menu-item-img + span {
    opacity: 1;
    transition: opacity 0.3s @ease-in-out, width 0.3s @ease-in-out;
  }
  .ant-menu-title-content {
    display: flex;
    align-items: center;
  }

  .ant-drawer-left {
    .ant-drawer-body {
      padding: 0;
    }
  }
}
.firstag {
  height: 35px !important;
  margin-top: 0px !important;
  background-color: #000000;
  box-shadow: 0 2px 14px #000000 !important;
  user-select: none;
  &:hover {
    color: #ffffff !important;
    background-color: #000000 !important;
    box-shadow: 0 0px 0px #000000 !important;
  }
}