// router-tab (header)
@import "./var.scss";
@import "./mixin.scss";
@import "./common/fonts.scss";
@import "./common/text.scss";
@import "./common/input.scss";
@import "./common/button.scss";
@import "./common/grid.scss";
@import "./common/card.scss";
@import "./common/tabs.scss";
@import "./common/numericInput.scss";

html,
body {
  overflow: auto;
}

a {
  color: inherit !important;
  text-decoration: none !important;
}

.w100 {
  width: 100%;
}
.w35p {
  width: 35px;
}
.h30 {
  height: 30%;
}
.h35 {
  height: 35%;
}
.h50 {
  height: 50%;
}
.h60 {
  height: 60%;
}
.h65 {
  height: 65%;
}
.h100 {
  height: 100%;
}
.bd {
  &-b1 {
    border-bottom: 1px #39383d solid;
    &:last-child {
      border-bottom: 0;
    }
  }
}

.col-grp {
  > .col {
    padding: 7px 0 !important;
  }
}

.searchFilter {
  &.v-card {
    padding: 17px (20px - ($column-spacer / 2)) !important;

    & > .row {
      & > [class*="col-"] {
        padding: 0 ($column-spacer / 2);
        box-sizing: border-box;
      }
    }

    .row + .row {
      margin-top: $row-spacer;
    }
  }
}

.v-application--wrap {
  height: 100vh;

  & > div {
    height: 100%;
  }
}

.v-main,
.v-main__wrap,
.container {
  height: 100%;
}
.v-main__wrap > .container {
  background: #383f5d;
}

// router-tab header
.router-tab {
  height: 100%;
  &__header {
    align-items: flex-end;
    height: 72px;
    margin: -5px -5px 0;
    padding: 0 20px;
    box-sizing: border-box;
  }

  &-page {
    height: 100%;
  }

  & .router-tab__container {
    height: calc(100% - 72px);
    padding: 15px 10px;
  }

  .router-tab__slot-end {
    align-self: center;
    display: flex;
    align-items: center;
    > * {
      flex: none;
      margin-right: 6px;
      &:last-child {
        margin-right: 0;
      }
    }

    .v-menu + .v-btn {
      padding: 0 3px;
    }

    .v-btn {
      border-radius: 4px;
    }
  }
  .router-tab__nav {
    padding-left: 0;
  }

  .router-tab__scroll {
    height: auto;
  }

  .router-tab__item {
    height: 48px;
    padding: 0 12px !important;
    border-radius: 6px 6px 0 0;

    & > span {
      font-size: 1rem;
    }

    &.is-active {
      & > span {
        font-weight: 700;
      }
    }

    & + .router-tab__item {
      margin-left: 4px;
    }
  }

  .router-tab__item.is-active.is-closable,
  .router-tab__item:hover.is-closable {
    padding: 0 20px;
  }
}
// v-navigation-drawer (sidebar)
.v-navigation-drawer {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);

  &--fixed {
    z-index: 20;
  }

  .home {
    display: block;
    line-height: 0;
  }

  &__border {
    display: none;
  }

  &__append {
    padding: 0 17px;
    margin: 0 0 26px;

    > p {
      margin-bottom: 0;
    }
  }

  .v-treeview {
    padding: 0 10px;
    box-sizing: border-box;

    .v-treeview-node__level {
      width: 9px;
    }

    > .v-treeview-node {
      margin-top: 10px;

      &:first-child {
        margin-top: 0;
      }

      > .v-treeview-node__root {
        min-height: 44px !important;
      }
    }
    .v-treeview-node {
      .v-treeview-node__toggle {
        display: none !important;
      }

      & > .v-treeview-node__root:before {
        border-radius: 6px;
        z-index: -1;
      }

      & > .v-treeview-node__root:hover:before {
        opacity: 1 !important;
      }

      .v-treeview-node__children {
        .v-treeview-node__label {
          > button > span {
            font-size: 0.875rem;
          }
        }
      }
    }

    .v-treeview-node--click[aria-expanded="true"] {
      & > .v-treeview-node__root:before {
        opacity: 1 !important;
      }
    }

    .v-treeview-node[aria-expanded="true"] {
      &
        > .v-treeview-node__root
        > .v-treeview-node__content
        > .v-treeview-node__label
        > button
        > .v-icon.mdi-chevron-down {
        transform: rotate(-180deg);
      }
    }

    .v-treeview-node__label {
      & > button {
        width: 100%;
        display: flex;
        align-items: center;
        // justify-content: center;
      }

      & .v-icon.mdi-chevron-down {
        margin-left: auto;
      }
    }
  }

  .v-treeview-node--active {
    &:before {
      opacity: 1 !important;
    }
  }

  &.v-navigation-drawer--mini-variant {
    .home {
      display: none;
    }

    .v-treeview-node__content {
      margin-left: 0;
    }

    .v-treeview-node__content span:not(.v-icon),
    .v-treeview-node__root > button,
    .v-treeview-node__level,
    .v-treeview-node__content .v-icon.mdi-chevron-down {
      display: none;
    }

    .v-navigation-drawer__append {
      display: none;
    }
  }
}

.chart {
  height: 100%;
  &-title {
    display: block;
    width: 100%;
  }
  &-info {
    display: block;
    width: 100%;
    text-align: center;
  }
}

.v-application--is-ltr .v-messages {
  display: none;
}

.search-box {
  display: flex;
  align-items: center;
  &-label {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0.0178571429em;
    white-space: nowrap;
  }
}

.tui-grid-container,
.tui-grid-content-area {
  height: 100%;
}

.v-window__container,
.v-window__container > div {
  height: 100%;
}

.v-banner {
  &--last {
    .v-banner__wrapper {
      border-bottom: none !important;
    }
  }

  .v-chip {
    padding: 0 5px;
  }
}

.v-timeline {
  .v-timeline-item {
    line-height: 1;
  }

  .v-timeline-item__divider {
    min-width: auto;
    align-self: center;
  }

  .v-timeline-item__dot--small {
    width: 6px;
    height: 6px;
    left: calc(50% - 3px);
  }

  .v-timeline-item__body {
    max-width: none !important;
  }
}

.v-application--is-ltr .v-timeline--dense:not(.v-timeline--reverse):before {
  height: calc(100% - 30px);
  top: 10px;
  left: 22px !important;
  line-height: 0;
}

.v-label {
  font-size: 0.875rem !important;
}

.datepicker-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;

  .v-input {
    .v-input__append-outer {
      margin-top: 0;
      margin-left: 0;

      #startpicker-container,
      #endpicker-container {
        width: 100%;
        position: absolute;
        top: 36px;
        left: 0;
      }
    }
  }
}

@each $theme in dark, light {
  @include theme($theme);

  .v-application.#{$theme}-mode {
    min-width: 1000px;
    ::-webkit-scrollbar {
      width: 4px;
      border-radius: 3px;
    }

    ::-webkit-scrollbar-track {
      background-color: map-deep-get($config, #{$theme}, "scrollbar-track");
    }

    ::-webkit-scrollbar-thumb {
      width: 4px;
      border-radius: 3px;
      background-color: map-deep-get($config, #{$theme}, "scrollbar-thumb");
      background-clip: content-box;
    }

    .router-tab {
      .router-tab__header {
        background-color: map-deep-get($config, #{$theme}, "router-header");
        border-color: map-deep-get($config, #{$theme}, "router-header");
      }

      .router-tab__container {
        background: transparent;
      }

      .router-tab__item {
        background-color: map-deep-get($config, #{$theme}, "router-tab-item");
        border-color: map-deep-get($config, #{$theme}, "router-tab-item");
        color: map-deep-get($config, #{$theme}, "router-tab-item-color");

        &:not(.is-active) {
          &:hover {
            & > span {
              color: map-deep-get(
                $config,
                #{$theme},
                "router-tab-item-hover-color"
              );
            }
          }
        }

        .v-icon {
          color: map-deep-get($config, #{$theme}, "router-tab-item-icon-color");
        }

        &.is-active {
          background-color: map-deep-get(
            $config,
            #{$theme},
            "router-tab-item-active"
          );
          border-color: map-deep-get(
            $config,
            #{$theme},
            "router-tab-item-active"
          );
          color: map-deep-get(
            $config,
            #{$theme},
            "router-tab-item-active-color"
          );

          .v-icon {
            color: map-deep-get(
              $config,
              #{$theme},
              "router-tab-item-icon-active-color"
            );
          }
        }
      }

      .router-tab__slot-end {
        .v-btn {
          background-color: map-deep-get(
            $config,
            #{$theme},
            "router-tab-slot-end-button-backgroundColor"
          );
          box-shadow: none;
        }
      }
    }

    .v-banner {
      &__wrapper {
        border-bottom-color: map-deep-get(
          $config,
          #{$theme},
          "v-banner-border-color"
        ) !important;
      }
    }

    .v-navigation-drawer__append {
      > p {
        @if $theme == dark {
          color: rgba(255, 255, 255, 0.6);
        } @else {
          color: #999;
        }
      }
    }

    .v-footer {
      @if $theme == light {
        background-color: #dfdfe5;
        color: #767d83;
      }
    }
    .bd {
      @if $theme == dark {
        &-r-1 {
          border-right: 1px #373f45 solid;
        }
      } @else {
        &-r-1 {
          border-right: 1px #efefef solid;
        }
      }
    }

    .border-bottom-1 {
      border-bottom: 1px solid map-deep-get($config, #{$theme}, "border-color");
    }

    .v-box {
      min-width: 230px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      border-radius: 8px;
      background-color: map-deep-get($config, #{$theme}, "v-box");

      + .v-box {
        margin-top: 10px;
      }
    }

    .v-box-widget {
      min-height: 80px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 8px;
      border-radius: 8px;
      background-color: map-deep-get($config, #{$theme}, "v-box");

      + .v-box {
        margin-top: 10px;
      }
    }

    .widget-card{
      height: 282px;
    }

    .v-treeview {
      .v-treeview-node + .v-treeview-node {
        margin-top: 2px;
      }

      .v-treeview-node__root + .v-treeview-node__children {
        margin-top: 2px;
      }

      & > .v-treeview-node {
        & > .v-treeview-node__root {
          &:before {
            background-color: map-deep-get(
              $config,
              #{$theme},
              "v-treeview-node-root-backgroundColor"
            );
          }

          & > .v-treeview-node__content {
            .v-treeview-node__label {
              color: map-deep-get(
                $config,
                #{$theme},
                "v-treeview-node-root-label-color"
              );
            }
            .v-icon {
              color: map-deep-get(
                $config,
                #{$theme},
                "v-treeview-node-root-icon-color"
              );
            }
          }

          &:hover {
            & > .v-treeview-node__content {
              .v-treeview-node__label {
                color: map-deep-get(
                  $config,
                  #{$theme},
                  "v-treeview-node-root-label-active-color"
                );
              }
              .v-icon {
                color: map-deep-get(
                  $config,
                  #{$theme},
                  "v-treeview-node-root-icon-active-color"
                );
              }
            }
          }
        }

        & > .v-treeview-node__children {
          & > .v-treeview-node {
            & > .v-treeview-node__root {
              &:before {
                background-color: map-deep-get(
                  $config,
                  #{$theme},
                  "v-treeview-node-subroot-backgroundColor"
                );
              }

              & > .v-treeview-node__content {
                .v-treeview-node__label {
                  color: map-deep-get(
                    $config,
                    #{$theme},
                    "v-treeview-node-label-color"
                  );
                }
                .v-icon {
                  color: map-deep-get(
                    $config,
                    #{$theme},
                    "v-treeview-icon-color"
                  );
                }
              }

              &:not(.v-treeview-node--active):hover {
                &:before {
                  background-color: map-deep-get(
                    $config,
                    #{$theme},
                    "v-treeview-leaf-active-backgroundColor"
                  );
                }

                & > .v-treeview-node__content {
                  .v-treeview-node__label {
                    color: map-deep-get(
                      $config,
                      #{$theme},
                      "v-treeview-leaf-active-color"
                    );
                  }
                  .v-icon {
                    color: map-deep-get(
                      $config,
                      #{$theme},
                      "v-treeview-leaf-active-color"
                    );
                  }
                }
              }
            }

            & > .v-treeview-node--active {
              &:before {
                background-color: map-deep-get(
                  $config,
                  #{$theme},
                  "v-treeview-node-subroot-backgroundColor"
                );
              }

              & > .v-treeview-node__content {
                .v-treeview-node__label {
                  color: map-deep-get(
                    $config,
                    #{$theme},
                    "v-treeview-node-label-active-color"
                  );
                }
                .v-icon {
                  color: map-deep-get(
                    $config,
                    #{$theme},
                    "v-treeview-icon-active-color"
                  );
                }
              }
            }

            & > .v-treeview-node__children {
              & .v-treeview-node {
                & > .v-treeview-node__root {
                  &:before {
                    background-color: map-deep-get(
                      $config,
                      #{$theme},
                      "v-treeview-node-subroot-backgroundColor"
                    );
                  }

                  & > .v-treeview-node__content {
                    .v-treeview-node__label {
                      color: map-deep-get(
                        $config,
                        #{$theme},
                        "v-treeview-node-label-color"
                      );
                    }
                    .v-icon {
                      color: map-deep-get(
                        $config,
                        #{$theme},
                        "v-treeview-icon-color"
                      );
                    }
                  }

                  &:not(.v-treeview-node--active):hover {
                    &:before {
                      background-color: map-deep-get(
                        $config,
                        #{$theme},
                        "v-treeview-leaf-active-backgroundColor"
                      );
                    }

                    & > .v-treeview-node__content {
                      .v-treeview-node__label {
                        color: map-deep-get(
                          $config,
                          #{$theme},
                          "v-treeview-leaf-active-color"
                        );
                      }
                      .v-icon {
                        color: map-deep-get(
                          $config,
                          #{$theme},
                          "v-treeview-leaf-active-color"
                        );
                      }
                    }
                  }
                }

                & > .v-treeview-node--active {
                  &:before {
                    opacity: 0 !important;
                  }

                  & > .v-treeview-node__content {
                    .v-treeview-node__label {
                      color: map-deep-get(
                        $config,
                        #{$theme},
                        "v-treeview-node-label-active-color"
                      );
                    }
                    .v-icon {
                      color: map-deep-get(
                        $config,
                        #{$theme},
                        "v-treeview-node-label-active-color"
                      );
                    }
                  }
                }
              }
            }

            &[aria-expanded="true"] {
              & .v-treeview-node__root > .v-treeview-node__content {
                .v-treeview-node__label {
                  color: map-deep-get(
                    $config,
                    #{$theme},
                    "v-treeview-node-label-active-color"
                  );
                }
                .v-icon {
                  color: map-deep-get(
                    $config,
                    #{$theme},
                    "v-treeview-icon-active-color"
                  );
                }
              }
            }
          }
        }

        &[aria-expanded="true"] {
          & .v-treeview-node__root > .v-treeview-node__content {
            .v-treeview-node__label {
              color: map-deep-get(
                $config,
                #{$theme},
                "v-treeview-node-root-label-active-color"
              );
            }
            .v-icon {
              color: map-deep-get(
                $config,
                #{$theme},
                "v-treeview-node-root-icon-active-color"
              );
            }
          }
        }
      }
    }

    .vc-weeks {
      > .vc-weekday {
        background-color: map-deep-get(
          $config,
          #{$theme},
          "v-calendar-weekday-backgroundColor"
        );
        border-right: 1px
          solid
          map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color");
        color: map-deep-get($config, #{$theme}, "v-calendar-weekday-color");

        &:nth-of-type(1) {
          color: map-deep-get($color, "week", "sun");
        }

        &:nth-of-type(7) {
          color: map-deep-get($color, "week", "sat");
        }
      }

      > .vc-day {
        border-right: 1px
          solid
          map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color");
        border-bottom: 1px
          solid
          map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color");

        .day-hldyNm,
        .day-label.is-holiday {
          color: map-deep-get($color, "week", "sun");
        }

        &.weekday-1 {
          .day-label,
          .day-hldyNm {
            color: map-deep-get($color, "week", "sun");
          }
        }
        &.weekday-7 {
          .day-label,
          .day-hldyNm {
            color: map-deep-get($color, "week", "sat");
          }
        }

        &.is-today {
          > div {
            background-color: map-deep-get(
              $config,
              #{$theme},
              "v-calendar-is-today-background-color"
            );
          }
        }

        .day-label {
          color: map-deep-get($config, #{$theme}, "v-calendar-day-color");
        }

        &.is-not-in-month {
          background-color: map-deep-get(
            $config,
            #{$theme},
            "v-calendar-day-in-not-month-color"
          );

          .day-label {
            color: map-deep-get($config, #{$theme}, "non-activate");
          }
        }
      }
    }

    .v-dialog {
      .v-toolbar {
        .v-toolbar__title {
          color: map-deep-get($color, "white", "0");
        }
      }
      .v-card.theme--#{$theme} {
        .v-card__text {
          color: map-deep-get($config, #{$theme}, "v-dialog-card-text-color");
        }
      }
    }

    #startpicker-container
      .tui-datepicker-footer
      .tui-timepicker
      .tui-timepicker-row
      .tui-timepicker-column.tui-timepicker-colon,
    #endpicker-container
      .tui-datepicker-footer
      .tui-timepicker
      .tui-timepicker-row
      .tui-timepicker-column.tui-timepicker-colon {
      color: map-deep-get(
        $config,
        #{$theme},
        "tui-datepicker-calendar-color"
      ) !important;
    }

    .tui-datepicker .tui-is-selectable.tui-is-selected,
    .tui-datepicker.tui-rangepicker .tui-is-selectable.tui-is-selected {
      background-color: map-deep-get(
        $config,
        #{$theme},
        "tui-datepicker-selected-color"
      );

      @if $theme == light {
        color: #fff;
      }
    }

    .tui-datepicker {
      background-color: map-deep-get(
        $config,
        #{$theme},
        "tui-datepicker-backgroundColor"
      );
      border-color: map-deep-get(
        $config,
        #{$theme},
        "tui-datepicker-border-color"
      );
      border-radius: 4px;
      overflow: hidden;
      z-index: 100;

      .tui-is-selectable:hover {
        background-color: map-deep-get(
          $config,
          #{$theme},
          "tui-datepicker-selectable-hover-color"
        );
      }
    }

    .tui-calendar,
    .tui-calendar-btn {
      background-color: map-deep-get(
        $config,
        #{$theme},
        "tui-datepicker-backgroundColor"
      );
    }

    .tui-datepicker-type-date,
    .tui-calendar {
      min-width: 180px !important;
      max-width: 210px !important;
    }

    .tui-calendar {
      &.tui-calendar-year,
      &.tui-calendar-month {
        & th,
        & td {
          height: 48px;
        }
      }

      & th,
      & td {
        height: 32px;
      }

      &-title {
        font-size: 0.875rem;
        color: map-deep-get(
          $config,
          #{$theme},
          "tui-datepicker-calendar-color"
        );
        line-height: 1.28;
      }

      &-header {
        border-bottom: 1px
          solid
          map-deep-get(
            $config,
            #{$theme},
            "tui-datepicker-border-color"
          ) !important;
      }

      &-header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 32px;
        padding: 4px;
        box-sizing: border-box;
      }

      &-btn {
        width: 24px;
        height: 24px;
        position: relative;
      }

      .tui-calendar-btn-prev-month:after,
      .tui-calendar-btn-prev-year:after {
        width: 100%;
        height: 100%;
        margin: 0;
        top: 0;
        left: 0;
        background-position: 0 0;

        @if $theme == dark {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23fff; opacity: 0; %7D .cls-2 %7B fill: none; stroke: %23fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px; %7D %3C/style%3E%3C/defs%3E%3Cg id='arrow_left' transform='translate(-216 -147)'%3E%3Crect id='bg' class='cls-1' width='24' height='24' transform='translate(216 147)'/%3E%3Cpath id='chevron-left' class='cls-2' d='M923.742,118.668l6,6,6-6' transform='translate(349.668 -770.742) rotate(90)'/%3E%3C/g%3E%3C/svg%3E");
        } @else {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='m923.742 118.668 6 6 6-6' transform='rotate(90 525.705 -392.037)' style='fill:none;stroke:%23555;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px'/%3E%3C/svg%3E");
        }
      }

      .tui-calendar-btn-next-month:after,
      .tui-calendar-btn-next-year:after {
        width: 100%;
        height: 100%;
        margin: 0;
        top: 0;
        right: 0;
        background-position: 0 0;

        @if $theme == dark {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23fff; opacity: 0; %7D .cls-2 %7B fill: none; stroke: %23fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px; %7D %3C/style%3E%3C/defs%3E%3Cg id='arrow_right' transform='translate(-216 -147)'%3E%3Crect id='bg' class='cls-1' width='24' height='24' transform='translate(216 147)'/%3E%3Cpath id='chevron-right' class='cls-2' d='M0,6,6,0l6,6' transform='translate(230.999 153) rotate(90)'/%3E%3C/g%3E%3C/svg%3E%0A");
        } @else {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='m0 6 6-6 6 6' transform='rotate(90 4.5 10.5)' style='fill:none;stroke:%23555;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px'/%3E%3C/svg%3E%0A");
        }
      }

      .tui-calendar-week {
        @if $theme == dark {
          border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        } @else {
          border-bottom: 1px solid #e6e6e6;
        }
      }

      &-body-header {
        th {
          font-size: 0.875rem;
          color: map-deep-get(
            $config,
            #{$theme},
            "tui-datepicker-calendar-color"
          );
        }

        th.tui-sun {
          color: map-deep-get($color, "week", "sun");
        }

        th.tui-sat {
          color: map-deep-get($color, "week", "sat");
        }
      }

      &-week {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);

        td {
          font-size: 0.875rem;
          color: map-deep-get(
            $config,
            #{$theme},
            "tui-datepicker-calendar-color"
          );
        }

        td.tui-calendar-sun {
          color: map-deep-get($color, "week", "sun");
        }

        td.tui-calendar-sat {
          color: map-deep-get($color, "week", "sat");
        }
      }
    }

    .tui-datepicker-footer {
      border-top: 1px
        solid
        map-deep-get(
          $config,
          #{$theme},
          "tui-datepicker-border-color"
        ) !important;
      text-align: center;
    }

    .tui-datepicker-footer .tui-timepicker {
      width: 107px;
      padding: 10px 0;
      margin: 0 auto;
      border-top: none;

      &-row {
        padding: 10px;
        box-sizing: border-box;
        border: 1px
          solid
          map-deep-get($config, #{$theme}, "tui-datepicker-border-color");
        border-radius: 4px;
        background-color: transparent !important;
      }

      &-select {
        background-color: map-deep-get(
          $config,
          #{$theme},
          "tui-datepicker-backgroundColor"
        );
        font-size: 0.875rem;
        color: map-deep-get(
          $config,
          #{$theme},
          "tui-datepicker-calendar-color"
        );
        line-height: 1.285;
      }
    }

    .v-list {
      background-color: map-deep-get(
        $config,
        #{$theme},
        "tui-datepicker-backgroundColor"
      );
      border: 1px
        solid
        map-deep-get($config, #{$theme}, "tui-datepicker-border-color");
      border-radius: 4px;

      &-item--active {
        &:before {
          opacity: 0;
        }

        .v-list-item__content {
          background-color: currentColor;
        }

        .v-list-item__title {
          color: map-deep-get(
            $config,
            #{$theme},
            "tui-datepicker-calendar-color"
          );

          @if $theme == light {
            color: #fff !important;
          }
        }
      }
    }

    .theme--white {
      .toastui-editor-contents {
        * {
          color: #fff !important;
        }
      }
    }

    .toastui-editor-contents {
      * {
        color: map-deep-get(
          $config,
          #{$theme},
          "tui-editor-contents-color"
        ) !important;
      }
    }

    .tui-grid-summary-area {
      .tui-grid-cell {
        &.tui-grid-cell-summary {
          @if $theme == dark {
            color: #fff !important;
          } @else {
            color: #3f4d7d !important;
          }
        }
      }
    }

    .lnb-logo {
      color: map-deep-get($config, #{$theme}, "v-dialog-card-text-color");
      font-size: 2rem;
      font-weight: bold;
      padding-left: 8px;
    }
    .login-logo {
      color: map-deep-get($config, #{$theme}, "v-dialog-card-text-color");
      font-size: 1.5rem;
      font-weight: bold;
    }
  }

  .btn-close-menu-list {
    min-width: 100px;
    border-color: transparent;

    .v-list-item {
      min-height: 30px;
    }

    .v-list-item__title {
      color: #fff;

      &:hover {
        color: #46c0ff;
      }
    }
  }

  [hover-tooltip] {
    $caret-height: 4px;
    $caret-width: 6px;
    $distance: -12px;
    $tooltip-bg-color: rgba(39, 39, 39, 0.8);
    
    position: relative;
    cursor: default;
    
    &:hover {
      &::before {
        content: attr(hover-tooltip);
        font-size: 14px;
        text-align: center;
        position: absolute;
        display: block;
        left: 50%;
        min-width: 150px;
        max-width: 200px;
        bottom: calc(100% + #{$distance});
        transform: translate(-50%);
        animation: fade-in 300ms ease;
        background: $tooltip-bg-color;
        border-radius: 4px;
        padding: 10px;
        color: #ffffff;
        z-index: 1;
      }
      
      &::after {
        content: '';
        position: absolute;
        display: block;
        left: 50%;
        width: 0;
        height: 0;
        bottom: calc(100% + #{$distance - $caret-height});
        margin-left: - $caret-width/2;
        border: 1px solid black;
        border-color: $tooltip-bg-color transparent transparent transparent;
        border-width: $caret-height $caret-width 0;
        animation: fade-in 300ms ease;
        z-index: 1;
      }
    }
  }
  
  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 0.8;
    }
  }
  
  




}