/* color palette from <https://github.com/vuejs/theme> */
:root {
  --vt-c-white: #ffffff;
  --vt-c-white-soft: #f8f8f8;
  --vt-c-white-mute: #f2f2f2;

  --vt-c-black: #181818;
  --vt-c-black-soft: #222222;
  --vt-c-black-mute: #282828;

  --vt-c-indigo: #2c3e50;

  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);

  --vt-c-text-light-1: var(--vt-c-indigo);
  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
  --vt-c-text-dark-1: var(--vt-c-white);
  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
}

/* semantic color variables for this project */
:root {
  --color-background: #f9fafb;
  --color-background-soft: var(--vt-c-white-soft);
  --color-background-mute: var(--vt-c-white-mute);

  --color-border: var(--vt-c-divider-light-2);
  --color-border-hover: var(--vt-c-divider-light-1);

  --color-heading: var(--vt-c-text-light-1);
  --color-text: var(--vt-c-text-light-1);

  --section-gap: 160px;
}

:root {
  --nut-primary-color: #2b7fff;
  --nut-primary-color-end: #1447e6;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  font-weight: normal;
}
html {
  height: 100%;
}
body {
  height: 100%;
  color: var(--color-text);
  background: var(--color-background);
  transition:
    color 0.5s,
    background-color 0.5s;
  line-height: 1.6;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Fira Sans",
    "Droid Sans",
    "Helvetica Neue",
    sans-serif;
  font-size: 16px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html,
body {
  overflow: hidden;
}

.scroll-y {
  overflow-y: auto;
}

.t-c {
  text-align: center;
}

.nut-navbar {
  height: 70px !important;
  box-shadow: none !important;
  border-bottom: solid 1px #e5e7eb;

  .nut-navbar__left {
    .nut-icon-left {
      display: none;
    }
  }

  .title {
    font-size: 18px !important;
    color: #101828 !important;
    font-weight: bold;
    line-height: 20px;
  }
}

.nut-button--round {
  border-radius: 12px !important;
  padding: 0 12px 0 16px !important;
}

.nut-button__text {
  font-weight: bold !important;
}

.nut-button--normal {
  padding: 0 12px !important;
}

.nut-button--small {
  border-radius: 8px !important;
  padding: 0 8px !important;
  height: 32px;

  svg.nut-icon {
    width: 12px;
  }
}
.nut-button--large {
  border-radius: 16px;
}

.nut-button--Info {
  background-color: #f3f4f6;
  color: #364153;
}

.nut-button.nut-button--plain {
  background-color: #fff !important;
}

.full-btn-group {
  &.line-top {
    border-top: solid #e4e7ed 1px;
    padding-top: 16px;
    margin-top: 16px;
  }

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 20px;

  .nut-button {
    flex: 1;
  }
}

.scroll-L1 {
  .nut-tabs {
    flex: 1;
  }

  &.nut-tabs .nut-tabs__titles {
    height: 47px !important;
    border-top: solid 1px #e5e7eb;
    border-bottom: solid 2px #e5e7eb;
    background-color: #fff !important;

    .nut-tabs__titles-item {
      width: 80px !important;
      min-width: 80px !important;
      height: 47px !important;
    }

    .nut-tabs__titles-item.active .nut-tabs__titles-item__line {
      background-color: #155dfc !important;
      height: 2px !important;
      width: 100% !important;
    }

    .nut-tabs__titles-item__line {
      bottom: 1px !important;
    }

    .nut-tabs__titles-item.active .nut-tabs__titles-item__text {
      color: #155dfc;
    }

    .nut-tabs__titles-item__text {
      font-weight: 500;
      color: #6a7282;
    }
  }

  &.nut-tabs .nut-tabs__content {
    flex: 1;

    .nut-tab-pane {
      background: none;
      padding: 16px;
    }
  }
}

.scroll-L2.nut-tabs {
  .nut-tabs__titles {
    height: 44px;
    align-items: center;
    border-radius: 12px;
    margin-bottom: 16px;
  }

  .nut-tabs__titles-item__text {
    font-size: 14px !important;
    font-weight: bold !important;
  }

  .nut-tabs__titles-item {
    height: 36px !important;

    &.active {
      background-color: #fff !important;
      color: #155dfc !important;
      border-radius: 8px !important;
      box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.1);
      box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);

      .nut-tabs__titles-item__line {
        display: none !important;
        height: 0 !important;
      }
    }
  }

  .nut-tabs__content {
    .nut-tab-pane {
      background: none !important;
      padding: 0 !important;
    }
  }
}

.c-modal + .nut-popup {
  padding: 26px !important;
  border-radius: 16px;
  width: 90%;

  h3.title {
    margin-bottom: 16px;
  }

  .nut-cell {
    box-shadow: none;
    padding: 10px 0;
    border-top: solid 1px #e5e7eb;
    border-radius: 0;
    margin: 0;
  }

  .nut-cell:last-of-type {
    border-bottom: solid 1px #e5e7eb;
  }

  .nut-tab-pane {
    padding: 0 !important;
  }
}

.c-modal-L2 + .nut-popup {
  padding: 0 !important;

  .nut-tabs__titles {
    display: none;
  }
}

.no-active + .nut-popup {
  padding: 0 !important;

  .active {
    .nut-cascader-item__title {
      color: #000 !important;
    }

    .nut-cascader-item__icon-check {
      display: none !important;
    }
  }
}

.popup-L2 + .nut-popup {
  border-radius: 16px 0 0 16px !important;
  padding: 16px !important;
  width: 80% !important;
  height: 100% !important;
}

.popupScroll {
  max-height: 65vh;
  overflow: auto;
}

.popupScroll + .full-btn-group {
  margin: 0 -26px -26px;
  padding: 16px 26px 16px;
}

h3.title {
  font-size: 15px;
  color: #101828;
  font-weight: bold;

  .badge {
    color: #fff;
    font-size: 12px;
    padding: 4px 6px;
    border-radius: 8px;
    float: right;

    &.badge-green {
      background-color: #00bc7d;
    }

    &.badge-red {
      background-color: #fb2c36;
    }
  }
}

h4.title {
  font-size: 13px;
  color: #101828;
  font-weight: bold;
}

.collapse {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px 0;

  b {
    font-size: 16px;
    color: #101828;
    font-weight: bold;
  }

  span {
    color: #4a5565;
    font-size: 14px;
    font-weight: normal;
  }
}

ul.infoList {
  padding: 0;
  margin: 0;
  list-style: none;

  li {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    margin: 6px 0;

    label {
      color: #6a7282;
    }

    span {
      color: #1e2939;
      font-weight: bold;
    }
  }
}

ul.even {
  margin: 0 -26px;

  li {
    padding: 8px 26px;
    margin: 0;
  }

  li:nth-child(even) {
    background-color: #f9fafb;
  }
}

.c-cord {
  position: relative;
  background-color: #fff;
  border-radius: 14px 12px;
  padding: 16px;
  box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);

  .sub-cord {
    padding-left: 8px;
    padding-right: 0;
    padding-bottom: 0;
    box-shadow: none;
    margin-bottom: 0;
  }

  .status-L2 {
    position: absolute;
    top: 6px;
    right: 6px;
  }

  .font-size-14 {
    font-size: 14px !important;
    color: #666;
  }

  .cord-l2 .c-cord {
    border: solid 1px #f1f1f1;
    margin: 12px 0;
    background-color: #f9fafb;
  }

  &.L3 {
    background-color: #f9fafb !important ;
  }

  & > .delBtn {
    position: absolute;
    top: 20px;
    right: 16px;
  }

  & > .delBtn + h3.title {
    margin-right: 24px;
    word-break: break-all;
  }

  .status {
    position: absolute;
    top: 12px;
    right: 16px;
  }

  .actionBox {
    border-top: solid #f3f4f6 1px;
    padding-top: 14px;
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;

    svg {
      width: 16px;
    }
  }

  .nut-collapse-item__title {
    padding: 0 !important ;

    &:after {
      border: none !important ;
    }
  }

  .nut-collapse__item-wrapper__content {
    padding: 0 !important ;
  }
}

.c-cord + .c-cord {
  margin-top: 16px;
}

.selectBox {
  display: flex;
  flex-direction: row;
  gap: 16px;

  .c-cord-radio {
    position: relative;
    flex: 1;
    padding: 16px 12px;
    margin: 0;

    svg {
      position: absolute;
      top: 20px !important;
      right: 18px;
    }
  }
}

.c-cord-L2 {
  position: relative;
  background-color: #f9fafb;
  color: #475467;
  padding: 12px;
  font-size: 12px;
  margin-bottom: 8px;
  border-radius: 8px;

  .status-L2 {
    position: absolute;
    top: 6px;
    right: 6px;
  }

  .num {
    background: #e0e7ff;
    display: inline-block;
    float: left;
    width: 22px;
    height: 22px;
    border-radius: 10px;
    line-height: 22px;
    text-align: center;
    font-size: 12px;
    margin-right: 8px;
  }

  &.hasDel {
    position: relative;
    padding-left: 42px;

    .delBtn {
      position: absolute;
      top: 23px;
      left: 12px;
    }
  }

  &.hasMore {
    position: relative;

    h4 {
      font-size: 14px;
      font-weight: bold;
    }

    .moreBtn {
      position: absolute;
      right: 16px;
      top: 50%;
      margin-top: -8px;
    }
  }
}

.c-cord-radio {
  border: 1px dashed rgba(153, 161, 175, 1);
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 8px 12px;
  position: relative;

  svg {
    display: none;
  }

  .num {
    background: #e0e7ff;
    display: inline-block;
    float: left;
    width: 22px;
    height: 22px;
    border-radius: 10px;
    line-height: 22px;
    text-align: center;
    font-size: 12px;
    margin-right: 8px;
  }

  &.active-cord {
    border-color: #8ec5ff;
    background: #eff6ff;

    .num {
      background: #fff;
    }

    svg {
      position: absolute;
      top: 12px;
      right: 12px;
      display: block;
      color: #2b7fff;
    }
  }
}

.c-cord-checkbox {
  border: 1px dashed rgba(153, 161, 175, 1);
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 8px 12px;
  position: relative;

  .num {
    background: #e0e7ff;
    display: inline-block;
    float: left;
    width: 22px;
    height: 22px;
    border-radius: 10px;
    line-height: 22px;
    text-align: center;
    font-size: 12px;
    margin-right: 8px;
  }

  svg {
    display: none;
  }

  &.active-cord {
    border-color: #8ec5ff;
    background: #eff6ff;

    .num {
      background: #fff;
    }

    svg {
      position: absolute;
      top: 12px;
      right: 12px;
      display: block;
      color: #2b7fff;
    }
  }
}

.c-card-l4 {
  border-top: 1px dashed rgba(153, 161, 175, 0.5);
  margin: 12px -12px -8px -12px;
  padding: 6px 12px;
  border-radius: 0 0 10px 10px;

  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;

  .infoList {
    flex: 1;
    span {
      font-weight: normal;
    }
  }
}

.c-card-input-scan {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;

  .nut-input {
    border: solid 1px #d1d5db !important ;
    border-radius: 8px;
  }
}

.c-collapse {
  .nut-collapse-item {
    display: flex;
    flex-direction: column;
  }
  .nut-collapse-item__title {
    order: 1;
    margin: 10px 0 10px !important;
    padding: 0 !important;
    display: flex;
    justify-content: center !important;
    align-items: center;

    &:after {
      display: none;
    }

    .nut-collapse-item__title-main {
      display: none;
    }
  }

  .nut-collapse__item-wrapper__content {
    padding: 0 !important;
    order: 0;
  }
}

.form-box {
  .nut-cell-group__wrap {
    box-shadow: none;
  }

  .nut-cell-group__wrap {
    margin: 0;
  }

  .nut-input-box input {
    color: #cccccc !important;

    &::placeholder {
      color: #cccccc !important;
    }
  }

  .text-right {
    .nut-form-item__body__slots {
      display: block;
      text-align: right;
    }
  }
}

.form-n {
  .nut-cell-group__wrap {
    box-shadow: none !important;

    .nut-cell {
      border: none !important;
      display: flex !important;
      flex-direction: column !important;
    }

    .nut-form-item__body__slots label {
      margin-bottom: 8px;
      display: block;
      color: #444 !important;
    }

    .nut-cell__title {
      padding: 8px 0 !important;
    }
    .input-text,
    .nut-textarea__textarea {
      border: solid 1px #e5e5e5 !important;
      padding: 8px 10px !important;
      border-radius: 8px !important;
      background: #f9fafb !important;
    }
  }

  .searchBar {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }
}

/* .bg-white {
  background-color: #fff;

  box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);

  .c-cord-L2 {
    background-color: #fff;
  }
} */

#app {
  height: 100%;
  margin: 0 auto;
  font-weight: normal;
}

a,
.green {
  text-decoration: none;
  color: hsla(160, 100%, 37%, 1);
  transition: 0.4s;
  padding: 3px;
}

@media (hover: hover) {
  a:hover {
    background-color: hsla(160, 100%, 37%, 0.2);
  }
}

@media (min-width: 1024px) {
  body {
    display: flex;
    place-items: center;
  }

  #app {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 2rem;
  }
}

.border-bottom-none {
  border-bottom: none !important;
}

.layout {
  height: 100%;
}

.layout-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.status {
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;

  &.orange {
    background-color: #fe9a00;
  }

  &.green {
    background-color: #00bc7d;
  }

  &.blue {
    background-color: #2b7fff;
  }

  &.purple {
    background-color: #8e51ff;
  }

  &.red {
    background-color: #fb2c36;
  }

  &.gray {
    background-color: #6a7282;
  }
}

.status__text {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;

  &.orange {
    background-color: #fff !important;
    color: #fe9a00;
  }

  &.green {
    background-color: #fff !important;
    color: #00bc7d;
  }

  &.blue {
    background-color: #fff !important;
    color: #2b7fff;
  }

  &.purple {
    background-color: #fff !important;
    color: #8e51ff;
  }

  &.red {
    background-color: #fff !important;
    color: #fb2c36;
  }

  &.gray {
    background-color: #fff !important;
    color: #6a7282;
  }
}

.status-L2 {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;

  &.orange {
    color: #fe9a00;
  }

  &.green {
    color: #00bc7d;
  }

  &.blue {
    color: #2b7fff;
  }

  &.purple {
    color: #8e51ff;
  }

  &.red {
    color: #fb2c36;
  }

  &.gray {
    color: #6a7282;
  }
}

.colorRed {
  color: red !important;
}

.m-row-20 {
  margin: 0 20px !important;
}

.mt-6 {
  margin-top: 6px !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-6 {
  margin-bottom: 6px !important;
}

.mb-8 {
  margin-bottom: 8px !important;
}

.mb-12 {
  margin-bottom: 12px !important;
}

.mb-16 {
  margin-bottom: 16px;
}

.p-16 {
  padding: 16px !important;
}

.bold {
  font-weight: bold;
}

.c-page {
  padding: 16px;
}

.nut-grid-item__content {
  position: relative;
  border-radius: 12px !important;
  box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
}

.text-area {
  border: 1px solid #e5e5e5;
  border-radius: 6px !important;
}

.out-Search-Bar {
  font-size: 14px !important;
  color: #6a7282 !important;
  padding-top: 12px !important;

  label {
    display: block;
    margin-bottom: 8px !important;
  }

  span {
    color: red;
    margin-right: 4px;
  }

  .searchBar {
    padding: 0 !important;
    border: none !important;
  }
}
.border {
  border: solid 1px #e5e5e5;
}

.r-list {
  padding: 0;
  margin: 0;
  list-style: none;

  li {
    display: inline-block;
    margin: 0 4px 4px;
    padding: 4px 12px;
    border: 1px dashed #e5e5e5;
    max-width: 46%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.r-list-b {
  padding: 0;
  margin: 0;
  list-style: none;

  li {
    display: inline-block;
    margin: 0 4px 4px;
    padding: 4px 12px;
    border: 1px dashed #e5e5e5;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.numB {
  background-color: #f5f5f5;
  display: inline-block;
  width: 24px;
  height: 24px;
  text-align: center;
  line-height: 24px;
  border-radius: 50%;
  font-size: 12px;
}