/*!*************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-24.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-24.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-24.use[3]!./src/assets/scss/style-global.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
1. color 
2. font-size
3. screen-size
*/
:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}

[data-theme=THEME_ASUS] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}

[data-theme=THEME_PROART] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}

@keyframes blowUpContent {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  99.9% {
    transform: scale(2);
    opacity: 0;
  }
  100% {
    transform: scale(0);
  }
}
@keyframes blowUpContentTwo {
  0% {
    transform: scale(2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes blowUpModal {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes blowUpModalTwo {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}
@keyframes fadeIn {
  0% {
    background: rgba(0, 0, 0, 0);
  }
  100% {
    background: rgba(0, 0, 0, 0.7);
  }
}
@keyframes fadeInFull {
  0% {
    background: rgba(0, 0, 0, 0);
  }
  100% {
    background: rgb(0, 0, 0);
  }
}
@keyframes fadeOut {
  0% {
    background: rgba(0, 0, 0, 0.7);
  }
  100% {
    background: rgba(0, 0, 0, 0);
  }
}
@keyframes fadeOutFull {
  0% {
    background: rgb(0, 0, 0);
  }
  100% {
    background: rgba(0, 0, 0, 0);
  }
}
@keyframes scaleUp {
  0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
  }
}
@keyframes scaleDown {
  0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
  }
  100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
  }
}
@keyframes scaleBack {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.85);
  }
}
@keyframes scaleForward {
  0% {
    transform: scale(0.85);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes quickScaleDown {
  0% {
    transform: scale(1);
  }
  99.9% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

@font-face {
  font-family: "Roboto";
  src: url(https://proartcc.azureedge.net/fonts/Roboto-Regular.298c1099.ttf) format("opentype");
}
html {
  font-size: 16px;
}

body {
  font-family: "Roboto", "微軟正黑體";
  font-weight: normal;
  line-height: normal;
  letter-spacing: normal;
  word-break: break-word;
}
body.style--fixed {
  position: fixed;
  overflow: hidden;
  left: 0;
  right: 0;
  width: 100%;
}

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

::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  background-color: var(--color-main);
}

body ::-webkit-scrollbar {
  width: 4px;
  height: 8px;
}

#app-main-page {
  flex-grow: 1;
}
#app-main-page.style--fixed {
  position: fixed;
  top: -400px;
}

.hidden {
  display: none !important;
}

.style--invisible {
  visibility: hidden !important;
}

.style--transparent {
  opacity: 0 !important;
}

.align-left {
  text-align: left;
}

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

.align-right {
  text-align: right;
}

.align-justify {
  text-align: justify;
}

.wd--full {
  width: 100%;
}

.link--default {
  color: var(--color-main);
  text-decoration: none;
  transition: color 0.5s ease-in-out;
}
.link--default:hover {
  color: #EBEBEB;
}
.link--default:active {
  color: var(--color-main-dark);
}
.link--default.disable {
  color: #a7a8ac;
}
.link--default.has--line {
  text-decoration: underline;
}

.link--sub {
  color: #EBEBEB;
  text-decoration: underline;
  transition: color 0.5s ease-in-out;
}
.link--sub:hover {
  color: var(--color-main);
}
.link--sub:active {
  color: var(--color-main-dark);
}
.link--sub.disable {
  color: #a7a8ac;
}

.link-block {
  display: inline-block;
  padding-left: 4px;
  box-sizing: border-box;
}

.font-highligh {
  font-weight: bold !important;
}

.font-size-md {
  font-size: 1rem;
}

.list-style-num {
  list-style-type: decimal;
  padding-left: 20px;
}
.list-style-num.has--space > li + li {
  margin-top: 10px;
}

.list-style-num2 {
  counter-reset: section;
  list-style-type: none;
}
.list-style-num2 > li {
  padding-left: calc(1rem * 1.5);
}
.list-style-num2 > li:before {
  counter-increment: section;
  content: "(" counters(section, ".") ")";
  display: inline-block;
  text-indent: -1.5rem;
}
.list-style-num2.has--space > li + li {
  margin-top: 10px;
}

.list-style--dot {
  list-style-type: disc;
  padding-left: 20px;
}
.list-style--dot.has--space > li + li {
  margin-top: 10px;
}

.color--main {
  color: var(--color-main);
}

.bg-color--main {
  background-color: var(--color-main);
}

.color--sub {
  color: #95d8e6;
}

.bg-color--sub {
  background-color: #95d8e6;
}

.color--bg {
  color: #111112;
}

.bg-color--bg {
  background-color: #111112;
}

.font--weight-blod {
  font-weight: bold;
}

.font--weight-normal {
  font-weight: normal;
}

.t-rotate-90 {
  transform: rotate(90deg);
}

.text--size-sm {
  font-size: 1rem;
}
@media (max-width: 1365px) {
  .text--size-sm {
    font-size: 0.875rem;
  }
}

.GTMClass_preventPointerEvent * {
  pointer-events: none;
}

.space-in-top-base-12 {
  padding-top: 48px;
}

.space-out-top-base-12 {
  margin-top: 48px;
}

.space-in-bottom-base-12 {
  padding-bottom: 48px;
}

.space-out-bottom-base-12 {
  margin-bottom: 48px;
}

.space-in-right-base-12 {
  padding-right: 48px;
}

.space-out-right-base-12 {
  margin-right: 48px;
}

.space-in-left-base-12 {
  padding-left: 48px;
}

.space-out-left-base-12 {
  margin-left: 48px;
}

.space-in-top-base-8 {
  padding-top: 32px;
}

.space-out-top-base-8 {
  margin-top: 32px;
}

.space-in-bottom-base-8 {
  padding-bottom: 32px;
}

.space-out-bottom-base-8 {
  margin-bottom: 32px;
}

.space-in-right-base-8 {
  padding-right: 32px;
}

.space-out-right-base-8 {
  margin-right: 32px;
}

.space-in-left-base-8 {
  padding-left: 32px;
}

.space-out-left-base-8 {
  margin-left: 32px;
}

.space-in-top-base-6 {
  padding-top: 24px;
}

.space-out-top-base-6 {
  margin-top: 24px;
}

.space-in-bottom-base-6 {
  padding-bottom: 24px;
}

.space-out-bottom-base-6 {
  margin-bottom: 24px;
}

.space-in-right-base-6 {
  padding-right: 24px;
}

.space-out-right-base-6 {
  margin-right: 24px;
}

.space-in-left-base-6 {
  padding-left: 24px;
}

.space-out-left-base-6 {
  margin-left: 24px;
}

.space-in-top-base-5 {
  padding-top: 20px;
}

.space-out-top-base-5 {
  margin-top: 20px;
}

.space-in-bottom-base-5 {
  padding-bottom: 20px;
}

.space-out-bottom-base-5 {
  margin-bottom: 20px;
}

.space-in-right-base-5 {
  padding-right: 20px;
}

.space-out-right-base-5 {
  margin-right: 20px;
}

.space-in-left-base-5 {
  padding-left: 20px;
}

.space-out-left-base-5 {
  margin-left: 20px;
}

.space-in-top-base-4 {
  padding-top: 16px;
}

.space-out-top-base-4 {
  margin-top: 16px;
}

.space-in-bottom-base-4 {
  padding-bottom: 16px;
}

.space-out-bottom-base-4 {
  margin-bottom: 16px;
}

.space-in-right-base-4 {
  padding-right: 16px;
}

.space-out-right-base-4 {
  margin-right: 16px;
}

.space-in-left-base-4 {
  padding-left: 16px;
}

.space-out-left-base-4 {
  margin-left: 16px;
}

.space-in-top-base-3 {
  padding-top: 12px;
}

.space-out-top-base-3 {
  margin-top: 12px;
}

.space-in-bottom-base-3 {
  padding-bottom: 12px;
}

.space-out-bottom-base-3 {
  margin-bottom: 12px;
}

.space-in-right-base-3 {
  padding-right: 12px;
}

.space-out-right-base-3 {
  margin-right: 12px;
}

.space-in-left-base-3 {
  padding-left: 12px;
}

.space-out-left-base-3 {
  margin-left: 12px;
}

.btn-block {
  display: block;
  width: 100%;
}
.btn-block .btn-inline {
  display: inline-block;
}
.btn-block .btn-inline + .btn-inline {
  margin-left: 20px;
}
.btn-block .btn-single + .btn-single {
  margin-top: 24px;
}

.tabFooter {
  margin-top: 24px;
}

.layout-detail-block.style--no-data {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.layout-detail-block.style--no-data .h--full {
  flex-grow: 1;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  img[src*=".svg"] {
    max-width: 100%;
  }
}
/*
.show-cookie-policy-info{
   font-family: Roboto;
   #cookie-policy-info{
      padding: 36px;
      background-color: $color-grey-light1;
      box-shadow: 0px 4px 12px 0 rgba(0, 0, 0, 0.5);
      .cookie-text-wrap{
         p{
            color: $color-white;
            a{
               color: $color-main;
            }
         }
      }
      .cookie-btn-box{
         display: flex;
         justify-content: center;
         margin: 48px 0 0 0;
         .btn-asus.btn-setting{
            width: 180px;
            height: 36px;
            margin-right: 24px;
            padding: 10px 38px;
            border-radius: $radius-default;
            border: solid 1px $color-main;
            background-color:transparent;
            color: $color-main;
            line-height: 0;
            &:hover{
               background: rgba($color-main, .2); 
            }
            &:active{
               background: transparent;
            }
         }
         .btn-asus.btn-ok{
            width: 180px;
            height: 36px;
            padding: 10px 38px;
            border-radius: $radius-default;
            border: solid 1px $color-main-active;
            color: $color-grey-dark3;
            background: linear-gradient(to top, #ffe9d1, $color-main-active);
            outline: none;
            transition: none;
            &:hover{
               background: $color-main-light;
               background-position:100px;  
            }
            &:active{
                  background: $color-main-light;
            }
         }
      }
   }
}



.cookie-policy-lightbox-wrapper{
   .cookie-policy-lightbox-header{
      font-family: Roboto;
      width: 960px;
      min-height:  570px;
      .cookie-policy-lightbox-menu{
         width: 280px;
         min-height:  570px;
         background: $color-bg-light2;
         .cookie-policy-lightbox-logo{
            margin: 36px;
         }
         .cookie-policy-lightbox-list{
            ul{
               .lightbox-list-option{
                  font-size: 16px;
                  width: 280px;
                  color: $color-disable;
                  padding: 24px 36px;
               } 
               .active{
                  color: $color-white;
                  background-color: $color-grey-dark1;
               }

            }
         }
      }
      .cookie-policy-lightbox-content{
         width: 680px;
         min-height:  570px;
         background-color: $color-grey-dark1;
         .cookie-policy-lightbox-section{
            padding: 38px 36px;
            .cookie-policy-lightbox-active{
               font-size: 16px;
               font-weight: 500;
               color: $color-white;
               margin-bottom: 15px;
               .switch-btn{
                  .check_box{
                     width: 60px;
                     height: 24px;
                     background-color: transparent;
                     border: solid 1px $color-disable;
                     .switch-check{
                        width: 12px;
                        height: 12px;
                        top: 6px;
                        left: 6px;
                        line-height: 1;
                        border: none;
                        background-color: $color-disable;
                        .icon-switch-check{
                           display: none;
                        }

                     }
                     &:hover{
                        border: solid 1px $color-white;
                        .switch-check{
                           background-color: $color-white;
                        }
                     }
                     &:active{
                        background-color: transparent;
                        border: solid 1px $color-disable;
                        .switch-check{
                           background-color: $color-main;
                        }
                     }

                  }

               }
               .switch-btn.on{
                  .check_box{
                     border: solid 1px $color-main;
                     background: $color-main;
                     .switch-check{
                        background: $color-grey-dark3;
                        border: none;
                        transform: translateX(36px);
                     }
                     &:hover{
                        border: solid 1px $color-white;
                        background-color: $color-white;
                     }
                     &:active{
                        border: solid 1px $color-main;
                        background: $color-main;
                        .switch-check{
                           background: $color-grey-dark3;
                        }
                     }
                  }

                  // background-color: $color-main;
               }
            }
            .cookie-policy-lightbox-title{
               font-weight: normal;
               color: $color-main;
               font-size: 20px;
            }
            .cookie-policy-lightbox-subtitle{
               font-size: 16px;
               color: $color-disable;
               margin-top: 7px;
            }
            .cookie-policy-lightbox-text{
               color: $color-white;
               font-family: Roboto;
               font-size: 16px;
               line-height: 1.5;
               text-align: left;
               a{
                  color: $color-main;
               }
            }
            .cookie-policy-lightbox-text:first-child{
               margin-top: 60px;
               color: aqua;
            }
         }



      }

   }
   .cookie-policy-lightbox-bottom{
      width: 960px;
      border-top: solid 1px $color-disable ;
      background: $color-bg-light2;
      padding: 36px;
      height: auto;
      .btn-allow-all{
         width: 180px;
         height: 36px;
         border-radius: $radius-default;
         border: solid 1px $color-main-active;
         color: $color-grey-dark3;
         background: linear-gradient(to top, #ffe9d1, $color-main-active);
         transition: none;
         outline: none;
         &:hover{
            background: $color-main-light;
            background-position:100px;  
         }
         &:active{
               background: $color-main-light;
         }
      }
      .btn-save{
         margin-left: 24px;
         width: 180px;
         height: 36px;
         border-radius: $radius-default;
         border: solid 1px $color-main-active;
         color: $color-grey-dark3;
         background: linear-gradient(to top, #ffe9d1, $color-main-active);
         transition: none;
         outline: none;
         &:hover{
            background: $color-main-light !important;
            background-position:100px;  
      }
      &:active{
         background: $color-main-light;
      }
      }
   }
}



.cookie-policy-lightbox-bottom .btn-allow-all:hover, .cookie-policy-lightbox-bottom .btn-save:hover {
   background: $color-main-light;
}
.cookie-policy-lightbox-bottom .btn-allow-all:hover, .cookie-policy-lightbox-bottom .btn-save:hover {
   background: $color-main-light;
}

#cookie-policy-info div:focus, #cookie-policy-info div:focus-visible, #cookie-policy-info a:focus, #cookie-policy-info a:focus-visible, #cookie-policy-lightbox-wrapper div:focus, #cookie-policy-lightbox-wrapper div:focus-visible, #cookie-policy-lightbox-wrapper a:focus, #cookie-policy-lightbox-wrapper a:focus-visible #cookie-policy-lightbox-wrapper li:focus, #cookie-policy-lightbox-wrapper li:focus-visible, #cookie-policy-lightbox-wrapper input:focus, #cookie-policy-lightbox-wrapper input:focus-visible {
   outline-color: $color-main-light !important;
   // outline-style: auto !important;
   // outline-width: 1px !important;
   outline: none;

}


@media only screen and (max-width: 960px){
   .show-cookie-policy-info{
      #cookie-policy-info.newStyle {
         width: 100%;
         max-width: 512px;
         min-width: 320px;
         bottom: unset;
         transition: all .2s ease-in-out;
         position: fixed;
         height: auto;
         top: 1vh;
         left: 50%;
         right: 0;
         transform: translate(-50%, 0%);
         padding: 32px;
         box-sizing: border-box;
         color: #181818;
         font-size: 14px;
         line-height: 1.4em;
         border-radius: 4px;
         z-index: 12000!important;
         padding: 36px;
         background-color: $color-grey-light1;
         box-shadow: 0px 4px 12px 0 rgba(0, 0, 0, 0.5);
         .cookie-text-wrap{
            p{
               color: $color-white;
               a{
                  color: $color-main;
               }
            }
            width: 100%;
            overflow: inherit;
            display: flex;
            flex-direction: column;
            align-items: center;
         }
      }
      #cookie-policy-info .cookie-policy-wrap{
         overflow: inherit;
      }
      #cookie-policy-info.newStyle .cookie-text-wrap{
         overflow: hidden;
      }
      #cookie-policy-info.newStyle .cookie-text-wrap .cookie-text-shadow{

      }
      #cookie-policy-info.newStyle .cookie-icon-close{
         position: absolute;
         right: 8px;
         top: 8px;
         width: 24px;
         height: 24px;
         cursor: pointer;
         background: url('https://dlcdnimgs.asus.com/images/icon/24_cross_normal.svg');
      }
      #cookie-policy-info.newStyle .cookie-text-wrap {
         background: unset;
         color: unset;
         height: unset;
      }
      #cookie-policy-info.newStyle .cookie-text-wrap .cookie-text-shadow {
         display: none;
     }
     #cookie-policy-info.newStyle .cookie-text-wrap {
         line-height: 1.4em;
         max-height: 60vh;
         overflow-y: auto;
      }
      #cookie-policy-info.newStyle .cookie-text-wrap p{
         font-size: 17px !important;
         line-height: 25.5px !important;
         position: unset;
         width: 100%;
         height: 100%;
         overflow-y: unset;
      }
      #cookie-policy-info .cookie-btn-box {
         flex-direction: unset;
     }
     #cookie-policy-info.newStyle .btn-ok, #cookie-policy-info.newStyle .btn-setting {
         font-size: 17px;
         margin-bottom: unset;
         margin: unset;
         margin-right: unset !important;
         padding: 10px 0 !important;
         &:first-child{
            margin-right : 12px !important;
         }
      }
      #cookie-policy-info .btn-ok {
         margin-left: 8px;
     }
   }


}
*/
.xmx-icon-left:before,
.xmx-icon-right:before,
.xmx-icon-double-left:before,
.xmx-icon-double-right:before,
.xmx-icon-double-left:after,
.xmx-icon-double-right:after {
  content: "";
  position: relative;
  top: -1px;
  display: inline-block;
  width: 10px;
  height: 10px;
  vertical-align: middle;
  border-style: solid;
  border-color: currentColor;
  border-width: 2px 0 0 2px;
  border-radius: 1px;
  box-sizing: border-box;
  transform-origin: center;
  transform: rotate(-45deg) scale(0.7);
}

.xmx-icon-double-left:after {
  left: -4px;
}

.xmx-icon-double-right:before {
  left: 4px;
}

.xmx-icon-right:before,
.xmx-icon-double-right:before,
.xmx-icon-double-right:after {
  transform: rotate(135deg) scale(0.7);
}

.xmx-btn {
  box-sizing: border-box;
  line-height: 1;
  font-size: 14px;
  font-weight: 500;
  padding: 7px 15px;
  margin: 0;
  cursor: pointer;
  background-color: transparent;
  outline: none;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  color: #EBEBEB;
  white-space: nowrap;
}
.xmx-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.xmx-btn-text {
  border: 0;
  padding: 0 4px;
  text-align: left;
  line-height: inherit;
}

.xmx-scrollbar {
  height: 100%;
}
.xmx-scrollbar:hover .xmx-scrollbar-track {
  opacity: 1;
}

.xmx-scrollbar-wrap {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.xmx-scrollbar-track {
  position: absolute;
  top: 2px;
  right: 2px;
  bottom: 2px;
  width: 6px;
  z-index: 1;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.24s ease-out;
}
.xmx-scrollbar-track .xmx-scrollbar-thumb {
  position: absolute;
  width: 100%;
  height: 0;
  cursor: pointer;
  border-radius: inherit;
  background-color: rgba(144, 147, 153, 0.3);
  transition: background-color 0.3s;
}

.xmx-zoom-in-down-enter-active,
.xmx-zoom-in-down-leave-active {
  opacity: 1;
  transform: scaleY(1);
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  transform-origin: center top;
}

.xmx-zoom-in-down-enter,
.xmx-zoom-in-down-enter-from,
.xmx-zoom-in-down-leave-to {
  opacity: 0;
  transform: scaleY(0);
}

.xmx-datepicker {
  position: relative;
  display: inline-block;
  width: 210px;
}
.xmx-datepicker svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.xmx-datepicker-range {
  width: 320px;
}

.xmx-datepicker-inline {
  width: auto;
}

.xmx-input-wrapper {
  position: relative;
}
.xmx-input-wrapper .xmx-icon-clear {
  display: none;
}
.xmx-input-wrapper:hover .xmx-icon-clear {
  display: block;
}
.xmx-input-wrapper:hover .xmx-icon-clear + .xmx-icon-calendar {
  display: none;
}

.xmx-input {
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  height: 34px;
  padding: 6px 30px;
  padding-left: 10px;
  font-size: 14px;
  line-height: 1.4;
  color: #EBEBEB;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.xmx-input:hover, .xmx-input:focus {
  border-color: var(--color-main);
}
.xmx-input:disabled, .xmx-input.disabled {
  color: #ccc;
  background-color: #f3f3f3;
  border-color: #ccc;
  cursor: not-allowed;
}
.xmx-input:focus {
  outline: none;
}
.xmx-input::-ms-clear {
  display: none;
}

.xmx-icon-calendar,
.xmx-icon-clear {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  font-size: 16px;
  line-height: 1;
  color: rgba(0, 0, 0, 0.5);
  vertical-align: middle;
}

.xmx-icon-clear {
  cursor: pointer;
}
.xmx-icon-clear:hover {
  color: rgba(0, 0, 0, 0.8);
}

.xmx-datepicker-main {
  font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif;
  color: #EBEBEB;
  background-color: #fff;
  border: 1px solid #43464f;
}

.xmx-datepicker-popup {
  position: absolute;
  margin-top: 1px;
  margin-bottom: 1px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  z-index: 2001;
}

.xmx-datepicker-sidebar {
  float: left;
  box-sizing: border-box;
  width: 100px;
  padding: 6px;
  overflow: auto;
}

.xmx-datepicker-sidebar + .xmx-datepicker-content {
  margin-left: 100px;
  border-left: 1px solid #43464f;
}

.xmx-datepicker-body {
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.xmx-btn-shortcut {
  display: block;
  padding: 0 6px;
  line-height: 24px;
}

.xmx-datepicker-header {
  padding: 6px 8px;
  border-bottom: 1px solid #43464f;
}

.xmx-datepicker-footer {
  padding: 6px 8px;
  text-align: right;
  border-top: 1px solid #43464f;
}

.xmx-calendar-range,
.xmx-time-range {
  display: flex;
}
@media (max-width: 750px) {
  .xmx-calendar-range,
  .xmx-time-range {
    flex-direction: column;
  }
}

.xmx-calendar {
  box-sizing: border-box;
  width: 248px;
  padding: 6px 12px;
}
.xmx-calendar + .xmx-calendar {
  border-left: 1px solid #43464f;
}

.xmx-calendar-header, .xmx-time-header {
  box-sizing: border-box;
  height: 34px;
  line-height: 34px;
  text-align: center;
  overflow: hidden;
}

.xmx-btn-icon-left,
.xmx-btn-icon-double-left {
  float: left;
}

.xmx-btn-icon-right,
.xmx-btn-icon-double-right {
  float: right;
}

.xmx-calendar-header-label {
  font-size: 14px;
}

.xmx-calendar-decade-separator {
  margin: 0 2px;
}
.xmx-calendar-decade-separator:after {
  content: "~";
}

.xmx-calendar-content {
  position: relative;
  height: 224px;
  box-sizing: border-box;
}
.xmx-calendar-content .cell {
  cursor: pointer;
}
.xmx-calendar-content .cell:hover {
  color: #111112;
  background-color: var(--color-main-light);
}
.xmx-calendar-content .cell.active {
  color: #111112;
  background-color: var(--primary-color);
}
.xmx-calendar-content .cell.in-range, .xmx-calendar-content .cell.hover-in-range {
  color: #EBEBEB;
  background-color: var(--color-main-light);
}
.xmx-calendar-content .cell.disabled {
  cursor: not-allowed;
  color: #ccc;
  background-color: #f3f3f3;
}

.xmx-calendar-week-mode .xmx-date-row {
  cursor: pointer;
}
.xmx-calendar-week-mode .xmx-date-row:hover {
  background-color: var(--color-main-light);
}
.xmx-calendar-week-mode .xmx-date-row.xmx-active-week {
  background-color: var(--color-main-light);
}
.xmx-calendar-week-mode .xmx-date-row .cell:hover {
  color: inherit;
  background-color: transparent;
}
.xmx-calendar-week-mode .xmx-date-row .cell.active {
  color: inherit;
  background-color: transparent;
}

.xmx-week-number {
  opacity: 0.5;
}

.xmx-table {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  text-align: center;
}
.xmx-table th {
  padding: 0;
  font-weight: 500;
  vertical-align: middle;
}
.xmx-table td {
  padding: 0;
  vertical-align: middle;
}

.xmx-table-date td,
.xmx-table-date th {
  height: 32px;
  font-size: 12px;
}
.xmx-table-date .today {
  color: var(--color-main-light);
}
.xmx-table-date .cell.not-current-month {
  color: #ccc;
  background: none;
}

.xmx-time {
  flex: 1;
  width: 224px;
  background: #fff;
}
.xmx-time + .xmx-time {
  border-left: 1px solid #43464f;
}

.xmx-date-time {
  position: relative;
  width: 248px;
  height: 270px;
}
.xmx-date-time .xmx-time {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.xmx-date-time-range {
  position: relative;
  width: 496px;
  height: 270px;
}
.xmx-date-time-range .xmx-time-range {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.xmx-time-header {
  border-bottom: 1px solid #43464f;
}

.xmx-time-content {
  height: 224px;
  box-sizing: border-box;
  overflow: hidden;
}

.xmx-time-columns {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.xmx-time-column {
  flex: 1;
  position: relative;
  border-left: 1px solid #43464f;
  text-align: center;
}
.xmx-time-column:first-child {
  border-left: 0;
}
.xmx-time-column .xmx-time-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.xmx-time-column .xmx-time-list::after {
  content: "";
  display: block;
  height: 192px;
}
.xmx-time-column .xmx-time-item {
  cursor: pointer;
  font-size: 12px;
  height: 32px;
  line-height: 32px;
}
.xmx-time-column .xmx-time-item:hover {
  color: #EBEBEB;
  background-color: var(--color-main-light);
}
.xmx-time-column .xmx-time-item.active {
  color: var(--primary-color);
  background-color: transparent;
  font-weight: 700;
}
.xmx-time-column .xmx-time-item.disabled {
  cursor: not-allowed;
  color: #ccc;
  background-color: #f3f3f3;
}

.xmx-time-option {
  cursor: pointer;
  padding: 8px 10px;
  font-size: 14px;
  line-height: 20px;
}
.xmx-time-option:hover {
  color: #EBEBEB;
  background-color: var(--color-main-light);
}
.xmx-time-option.active {
  color: var(--primary-color);
  background-color: transparent;
  font-weight: 700;
}
.xmx-time-option.disabled {
  cursor: not-allowed;
  color: #ccc;
  background-color: #f3f3f3;
}

.xmx-datepicker-range {
  width: 100%;
}

.xmx-datepicker {
  width: 100%;
}

.xmx-icon-calendar,
.xmx-icon-clear {
  position: absolute;
  right: 20px;
  color: #EBEBEB;
}

.xmx-icon-clear:hover {
  color: #EBEBEB;
}

.xmx-datepicker-range.disabled .xmx-icon-calendar {
  color: #a7a8ac;
  opacity: 0.2;
}

.xmx-input {
  background: transparent;
  height: 42px;
  padding: 6px 30px;
  padding-left: 20px;
  font-size: 1rem;
}
.xmx-input:disabled, .xmx-input.disabled {
  color: #a7a8ac;
  background-color: transparent;
  border-color: #a7a8ac;
  cursor: not-allowed;
  opacity: 0.2;
}

.erroDate .xmx-input {
  border: solid 1px #CC0000;
}

.xmx-datepicker-main {
  font: 0.875rem "Roboto", "微軟正黑體";
  font-family: "Roboto", "微軟正黑體";
  background-color: #111112;
  border: 1px solid #43464f;
  border-radius: 4px;
}

.xmx-datepicker-popup {
  margin-top: 8px;
  margin-bottom: 1px;
  box-shadow: 0px 1px 6px 0 #000;
}

.xmx-calendar-range {
  padding: 22px 12px 0 12px;
}

.xmx-calendar {
  box-sizing: border-box;
  width: 336px;
  padding: 0 12px 12px 12px;
  position: relative;
}
.xmx-calendar + .xmx-calendar::after {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 0;
  content: "";
  width: 2px;
  height: 48px;
  border-radius: 1.5px;
  background-color: #333845;
}
.xmx-calendar + .xmx-calendar {
  border-left: none;
}

.xmx-calendar-content {
  position: relative;
  height: unset;
  box-sizing: border-box;
}
.xmx-calendar-content .xmx-table-date .cell:not(.disabled) > div {
  height: 100%;
  line-height: 40px;
}
.xmx-calendar-content .xmx-table-date .cell:not(.disabled) > div:hover {
  color: #111112;
  background-color: var(--color-main-light);
  border-radius: 4px;
}
.xmx-calendar-content .xmx-table-date .cell:not(.disabled):hover {
  color: unset;
  background-color: unset;
  border-radius: 4px;
}
.xmx-calendar-content .xmx-table-date .cell {
  border-bottom: 2px solid #111112;
  border-top: 2px solid #111112;
  border-radius: 50%;
  transition: all 0.02s linear;
}
.xmx-calendar-content .xmx-table-date .cell.active:not(.not-current-month) {
  background-color: unset;
  border-radius: 4px;
}
.xmx-calendar-content .xmx-table-date .cell.active:not(.not-current-month) > div {
  color: #111112;
  background-color: var(--primary-color);
  border-radius: 4px;
}
.xmx-calendar-content .xmx-table-date .cell.disabled {
  color: #696870;
  cursor: not-allowed;
  background-color: transparent;
}
.xmx-calendar-content .xmx-table-date .cell.disabled:hover {
  background-color: transparent;
}
.xmx-calendar-content .xmx-table-date .cell.in-range, .xmx-calendar-content .xmx-table-date .cell.hover-in-range {
  border-radius: 0;
}
.xmx-calendar-content .xmx-table-month .cell > div,
.xmx-calendar-content .xmx-table-year .cell > div {
  height: 100%;
  line-height: 43px;
}
.xmx-calendar-content .xmx-table-month .cell > div:hover,
.xmx-calendar-content .xmx-table-year .cell > div:hover {
  color: #111112 !important;
  background-color: var(--color-main-light) !important;
  border-radius: 4px;
}
.xmx-calendar-content .xmx-table-month .cell:hover,
.xmx-calendar-content .xmx-table-year .cell:hover {
  color: unset;
  background-color: unset;
}
.xmx-calendar-content .xmx-table-month .cell.active:not(.not-current-month),
.xmx-calendar-content .xmx-table-year .cell.active:not(.not-current-month) {
  color: unset;
  background-color: unset;
  border-radius: 4px;
}
.xmx-calendar-content .xmx-table-month .cell.active:not(.not-current-month) > div,
.xmx-calendar-content .xmx-table-year .cell.active:not(.not-current-month) > div {
  color: #EBEBEB;
  background: #333845;
  border-radius: 4px;
}

.xmx-table th {
  color: #a7a8ac;
  border-bottom: solid 1px #333845;
}

.xmx-calendar-header, .xmx-time-header {
  box-sizing: border-box;
  height: 40px;
  line-height: 40px;
  border: solid 1px #43464f;
  border-radius: 4px;
}

.xmx-table-date td,
.xmx-table-date th {
  height: 40px;
  font-size: 1rem;
}
.xmx-table-date .today {
  color: var(--color-main-light);
}
.xmx-table-date .cell.not-current-month {
  color: #a7a8ac;
  background: none;
}

.xmx-table-year {
  width: 222px;
  border-collapse: collapse;
  height: 260px;
  margin: 0 auto;
  margin-top: 20px;
}
.xmx-table-year td {
  border-top: 8px solid #111112;
  border-bottom: 8px solid #111112;
}
.xmx-table-year td:first-child {
  border-right: 6px solid #111112;
}
.xmx-table-year td:nth-child(2) {
  border-left: 6px solid #111112;
}

.xmx-table-month {
  margin-top: 36px;
}
.xmx-table-month td {
  height: 40px;
  border-top: 8px solid #111112;
  border-bottom: 8px solid #111112;
}
.xmx-table-month td:first-child {
  border-right: 6px solid #111112;
}
.xmx-table-month td:nth-child(2) {
  border-left: 6px solid #111112;
}

.xmx-datepicker-btn-confirm {
  display: none;
  width: 120px;
  height: 32px;
  background-color: var(--color-main);
  color: #000;
  border-radius: 18px;
  font-size: 0.9375rem;
  transition: all 0.5s ease;
}

.textLimit {
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  overflow: hidden;
}

.textLimitHoverBlock {
  transition: opacity 1s linear;
  opacity: 0.9;
  top: 30px;
  z-index: 9999;
  background: #000;
  position: absolute;
  padding: 10px 16px;
  border-radius: 4px;
  width: 150%;
  text-align: center;
  box-shadow: 0px 1px 6px 0 #000;
}
.textLimitHoverBlock.opacity {
  opacity: 1;
}
.textLimitHoverBlock.rightPosition {
  right: 10px;
}

.slidebar .slider-target,
.slidebar .slider-target * {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-select: none;
  touch-action: none;
  -moz-user-select: none;
  user-select: none;
  box-sizing: border-box;
}
.slidebar .slider-target {
  position: relative;
}
.slidebar .slider-base,
.slidebar .slider-connects {
  width: 100%;
  /* height: 100%; */
  height: 2px;
  position: relative;
  z-index: 1;
}
.slidebar .slider-connects {
  overflow: hidden;
  z-index: 0;
}
.slidebar .slider-connect,
.slidebar .slider-origin {
  will-change: transform;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -webkit-transform-style: preserve-3d;
  transform-origin: 0 0;
  transform-style: flat;
}
.slidebar .slider-connect {
  height: 100%;
  width: 100%;
}
.slidebar .slider-origin {
  height: 10%;
  width: 100%;
  /* postcss升級後影響 width 從10% 改成100% */
}
.slidebar .slider-txt-dir-rtl.slider-horizontal .slider-origin {
  left: 0;
  right: auto;
}
.slidebar .slider-vertical .slider-origin {
  width: 0;
}
.slidebar .slider-horizontal .slider-origin {
  height: 0;
}
.slidebar .slider-handle {
  backface-visibility: hidden;
  position: absolute;
}
.slidebar .slider-touch-area {
  margin: 4px;
  height: 10px;
  width: 10px;
  background-color: var(--color-main-active);
}
.slidebar .slider-state-tap .slider-connect,
.slidebar .slider-state-tap .slider-origin {
  transition: transform 0.3s;
}
.slidebar .slider-state-drag * {
  cursor: inherit !important;
}
.slidebar .slider-tooltip-drag .slider-tooltip,
.slidebar .slider-tooltip-focus .slider-tooltip {
  display: none !important;
}
.slidebar .slider-tooltip-drag .slider-active .slider-tooltip,
.slidebar .slider-tooltip-drag.slider-state-drag .slider-tooltip:not(.slider-tooltip-hidden),
.slidebar .slider-tooltip-focus.slider-focused .slider-tooltip:not(.slider-tooltip-hidden) {
  display: block !important;
}
.slidebar .slider-horizontal {
  height: var(--slider-height, 6px);
}
.slidebar .slider-horizontal .slider-handle {
  width: var(--slider-handle-width, 20px);
  height: var(--slider-handle-height, 20px);
  top: calc(var(--slider-handle-height, 20px) / 2 * -1 - var(--slider-height, 3px) / 2 * -1 - 1px);
  right: calc(var(--slider-handle-width, 20px) / 2 * -1);
}
.slidebar .slider-vertical {
  width: var(--slider-height, 6px);
  height: var(--slider-vertical-height, 300px);
}
.slidebar .slider-vertical .slider-handle {
  width: var(--slider-handle-height, 16px);
  height: var(--slider-handle-width, 16px);
  top: calc(var(--slider-handle-width, 16px) / 2 * -1);
  right: calc(var(--slider-handle-height, 16px) / 2 * -1 - var(--slider-height, 6px) / 2 * -1 - 1px);
}
.slidebar .slider-txt-dir-rtl.slider-horizontal .slider-handle {
  left: calc(var(--slider-handle-width, 16px) / 2 * -1);
  right: auto;
}
.slidebar .slider-base {
  /* background-color: var(--slider-bg, #d1d5db) */
  background-color: #a7a8ac;
}
.slidebar .slider-base,
.slidebar .slider-connects {
  border-radius: var(--slider-radius, 9999px);
}
.slidebar .slider-connect {
  /* background: var(--slider-connect-bg, #10b981); */
  background: var(--color-main-active);
  cursor: pointer;
}
.slidebar .slider-draggable {
  cursor: ew-resize;
}
.slidebar .slider-vertical .slider-draggable {
  cursor: ns-resize;
}
.slidebar .slider-handle {
  width: var(--slider-handle-width, 16px);
  height: var(--slider-handle-height, 16px);
  /* border-radius: var(--slider-handle-radius, 9999px); */
  /* background: var(--slider-handle-bg, #fff); */
  /* background: #CDAC83; */
  border: var(--slider-handle-border, 0);
  border: 1px solid var(--color-main-active);
  /* box-shadow: var(--slider-handle-shadow, .5px .5px 2px 1px rgba(0, 0, 0, .32)); */
  cursor: grab;
}
.slidebar .slider-handle:focus {
  outline: none;
  /* box-shadow: 0 0 0 var(--slider-handle-ring-width, 3px) var(--slider-handle-ring-color, rgba(16, 185, 129, .18823529411764706)), var(--slider-handle-shadow, .5px .5px 2px 1px rgba(0, 0, 0, .32)) */
}
.slidebar .slider-active {
  /* box-shadow: var(--slider-handle-shadow-active, .5px .5px 2px 1px rgba(0, 0, 0, .42)); */
  cursor: grabbing;
}
.slidebar [disabled] .slider-connect {
  background: var(--slider-connect-bg-disabled, #9ca3af);
}
.slidebar [disabled].slider-handle,
.slidebar [disabled] .slider-handle,
.slidebar [disabled].slider-target {
  cursor: not-allowed;
}
.slidebar [disabled] .slider-tooltip {
  background: var(--slider-tooltip-bg-disabled, #9ca3af);
  border-color: var(--slider-tooltip-bg-disabled, #9ca3af);
}
.slidebar .slider-tooltip {
  position: absolute;
  /* display: block; */
  display: none;
  font-size: var(--slider-tooltip-font-size, 0.875rem);
  line-height: var(--slider-tooltip-line-height, 1.25rem);
  font-weight: var(--slider-tooltip-font-weight, 600);
  white-space: nowrap;
  padding: var(--slider-tooltip-py, 2px) var(--slider-tooltip-px, 6px);
  min-width: var(--slider-tooltip-min-width, 20px);
  text-align: center;
  color: var(--slider-tooltip-color, #EBEBEB);
  border-radius: var(--slider-tooltip-radius, 5px);
  border: 1px solid var(--slider-tooltip-bg, #10b981);
  background: var(--slider-tooltip-bg, #10b981);
}
.slidebar .slider-horizontal .slider-tooltip-top {
  transform: translate(-50%);
  left: 50%;
  bottom: calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px));
}
.slidebar .slider-horizontal .slider-tooltip-top:before {
  content: "";
  position: absolute;
  bottom: calc(var(--slider-tooltip-arrow-size, 5px) * -2);
  left: 50%;
  width: 0;
  height: 0;
  border: var(--slider-tooltip-arrow-size, 5px) solid transparent;
  border-top-color: inherit;
  transform: translate(-50%);
}
.slidebar .slider-horizontal .slider-tooltip-bottom {
  transform: translate(-50%);
  left: 50%;
  top: calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px));
}
.slidebar .slider-horizontal .slider-tooltip-bottom:before {
  content: "";
  position: absolute;
  top: calc(var(--slider-tooltip-arrow-size, 5px) * -2);
  left: 50%;
  width: 0;
  height: 0;
  border: var(--slider-tooltip-arrow-size, 5px) solid transparent;
  border-bottom-color: inherit;
  transform: translate(-50%);
}
.slidebar .slider-vertical .slider-tooltip-left {
  transform: translateY(-50%);
  top: 50%;
  right: calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px));
}
.slidebar .slider-vertical .slider-tooltip-left:before {
  content: "";
  position: absolute;
  right: calc(var(--slider-tooltip-arrow-size, 5px) * -2);
  top: 50%;
  width: 0;
  height: 0;
  border: var(--slider-tooltip-arrow-size, 5px) solid transparent;
  border-left-color: inherit;
  transform: translateY(-50%);
}
.slidebar .slider-vertical .slider-tooltip-right {
  transform: translateY(-50%);
  top: 50%;
  left: calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px));
}
.slidebar .slider-vertical .slider-tooltip-right:before {
  content: "";
  position: absolute;
  left: calc(var(--slider-tooltip-arrow-size, 5px) * -2);
  top: 50%;
  width: 0;
  height: 0;
  border: var(--slider-tooltip-arrow-size, 5px) solid transparent;
  border-right-color: inherit;
  transform: translateY(-50%);
}
.slidebar .slider-horizontal .slider-origin > .slider-tooltip {
  transform: translate(50%);
  left: auto;
}
.slidebar .slider-horizontal .slider-origin > .slider-tooltip-top {
  bottom: calc(var(--slider-tooltip-arrow-size, 5px) + var(--slider-handle-height, 16px) / 2 - var(--slider-height, 6px) / 2 + var(--slider-tooltip-distance, 3px) + 1px);
}
.slidebar .slider-horizontal .slider-origin > .slider-tooltip-bottom {
  top: calc(var(--slider-tooltip-arrow-size, 5px) + var(--slider-handle-height, 16px) / 2 - var(--slider-height, 6px) / 2 + var(--slider-tooltip-distance, 3px) + var(--slider-height, 6px) - 1px);
}
.slidebar .slider-vertical .slider-origin > .slider-tooltip {
  transform: translateY(calc(var(--slider-tooltip-line-height, 1.25rem) * -1 - var(--slider-tooltip-py, 2px) * -1 + 1px));
  top: auto;
}
.slidebar .slider-vertical .slider-origin > .slider-tooltip-left {
  right: calc(var(--slider-tooltip-arrow-size, 5px) + var(--slider-height, 6px) + var(--slider-handle-height, 16px) / 2 - var(--slider-height, 6px) / 2 + var(--slider-tooltip-distance, 3px) - 1px);
}
.slidebar .slider-vertical .slider-origin > .slider-tooltip-right {
  left: calc(var(--slider-tooltip-arrow-size, 5px) + var(--slider-height, 6px) + var(--slider-handle-height, 16px) / 2 - var(--slider-height, 6px) / 2 + var(--slider-tooltip-distance, 3px) - var(--slider-height, 6px) + 1px);
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/components/ui/button/button.scss?vue&type=style&index=0&id=2ae39520&scoped=true&lang=scss&external ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-2ae39520]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-2ae39520] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-2ae39520] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-2ae39520 {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-2ae39520 {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-2ae39520 {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-2ae39520 {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-2ae39520 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-2ae39520 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-2ae39520 {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-2ae39520 {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-2ae39520 {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-2ae39520 {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-2ae39520 {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-2ae39520 {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-2ae39520 {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.ui-button button[data-v-2ae39520] * {
  pointer-events: none;
}
.ui-button[data-v-2ae39520] {
  width: 100%;
}
.ui-button.wd--lg[data-v-2ae39520] {
  max-width: 400px;
}
.ui-button.wd--mlg[data-v-2ae39520] {
  max-width: 268px;
}
.ui-button.wd--mdlg[data-v-2ae39520] {
  max-width: 192px;
}
.ui-button.wd--md[data-v-2ae39520] {
  max-width: 180px;
}
.ui-button.wd--mmd[data-v-2ae39520] {
  max-width: 178px;
}
.ui-button.wd--ssmd[data-v-2ae39520] {
  max-width: 120px;
}
.ui-button.wd--smd[data-v-2ae39520] {
  max-width: 160px;
}
.ui-button.wd--sm[data-v-2ae39520] {
  max-width: 96px;
}
.ui-button.wd--ss[data-v-2ae39520] {
  max-width: 48px;
}
.ui-button.wd--auto[data-v-2ae39520] {
  max-width: -moz-fit-content;
  max-width: fit-content;
}
.ui-button.wd--full[data-v-2ae39520] {
  max-width: 100%;
}
.ui-button.h--smd .btn-default[data-v-2ae39520] {
  min-height: 32px;
}
.ui-button.h--md .btn-default[data-v-2ae39520] {
  min-height: 36px;
}
.ui-button.h--sm .btn-default[data-v-2ae39520] {
  min-height: 28px;
}
.ui-button.h--mlg .btn-default[data-v-2ae39520] {
  min-height: 42px;
}
.ui-button .icon-block[data-v-2ae39520] {
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
.ui-button .icon-block .icon-item[data-v-2ae39520] {
  width: 100%;
  vertical-align: middle;
}
.ui-button .icon-block img[data-v-2ae39520] {
  width: 100%;
  align-self: center;
}
.ui-button .text[data-v-2ae39520] {
  align-self: center;
}
.ui-button .style--has-icon[data-v-2ae39520] {
  align-items: center;
}
.ui-button .btn-default[data-v-2ae39520] {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 36px;
  border: 1px solid transparent;
  font-size: 0.9375rem;
  box-sizing: border-box;
  padding: 0 10px;
  cursor: pointer;
  width: 100%;
  transition: all 0.5s ease;
}
.ui-button .theme--1[data-v-2ae39520] {
  border-radius: 18px;
}
.ui-button .theme--2[data-v-2ae39520] {
  border-radius: 4px;
}
.ui-button .theme--3[data-v-2ae39520] {
  border-radius: 6px;
}
.ui-button .disabled[data-v-2ae39520] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.ui-button .color--main.type--full[data-v-2ae39520] {
  background-color: var(--color-main);
  color: #0f0f10;
}
.ui-button .color--main.type--full[data-v-2ae39520]:hover {
  background-color: var(--color-main-light);
}
.ui-button .color--main.type--full:hover .icon-item[data-v-2ae39520] {
  color: #0f0f10;
}
.ui-button .color--main.type--full[data-v-2ae39520]:active {
  background-color: var(--color-main-dark2);
  border: solid 1px var(--color-main-dark2);
}
.ui-button .color--main.type--full.disabled[data-v-2ae39520] {
  background-color: #292C35;
  color: #73747b;
}
.ui-button .color--main.type--full.disabled[data-v-2ae39520] {
  background-color: #292C35;
  color: #73747b;
}
.ui-button .color--main.type--border[data-v-2ae39520] {
  border-color: var(--color-main);
  color: var(--color-main);
  background-color: transparent;
}
.ui-button .color--main.type--border.disabled[data-v-2ae39520] {
  border-color: #73747b;
  color: #73747b;
}
.ui-button .color--main.type--border[data-v-2ae39520]:hover {
  border-color: var(--color-main-light);
  color: #0f0f10;
  background-color: var(--color-main-light);
}
.ui-button .color--main.type--border[data-v-2ae39520]:active {
  border-color: var(--color-main-dark2);
  color: #0f0f10;
  background-color: var(--color-main-dark2);
}
.ui-button .color--main.type--both[data-v-2ae39520] {
  border-color: var(--color-main);
  background: rgba(var(--color-main), 0.2);
  color: var(--color-main);
}
.ui-button .color--main.type--both.disabled[data-v-2ae39520] {
  border-color: #a7a8ac;
  color: #a7a8ac;
}
.ui-button .color--main.type--icon[data-v-2ae39520] {
  border-color: var(--color-main);
  background-color: var(--color-main);
  color: #EBEBEB;
}
.ui-button .color--main.type--icon[data-v-2ae39520]:hover {
  color: var(--color-main-light);
}
.ui-button .color--main.type--icon.disabled[data-v-2ae39520] {
  border-color: #a7a8ac;
  color: #a7a8ac;
}
.ui-button .color--main-gradient.type--full[data-v-2ae39520] {
  background-color: var(--color-main);
  color: #0f0f10;
}
.ui-button .color--main-gradient.type--full[data-v-2ae39520]:hover {
  background-color: var(--color-main-light);
}
.ui-button .color--main-gradient.type--full:hover .icon-item[data-v-2ae39520] {
  color: #0f0f10;
}
.ui-button .color--main-gradient.type--full[data-v-2ae39520]:active {
  background-color: var(--color-main-dark2);
  border: solid 1px var(--color-main-dark2);
}
.ui-button .color--main-gradient.type--full.disabled[data-v-2ae39520] {
  background-color: #292C35;
  color: #73747b;
}
.ui-button .color--main-gradient.type--full[data-v-2ae39520] {
  color: #0f0f10;
  background: var(--color-main);
  border-color: var(--color-main);
  transition: none;
  background-position: 0 0;
}
.ui-button .color--main-gradient.type--full[data-v-2ae39520]:hover {
  background: var(--color-main-light);
  background-position: 100px;
}
.ui-button .color--main-gradient.type--full[data-v-2ae39520]:active {
  background: var(--color-main-dark2);
}
.ui-button .color--main-gradient.type--full.disabled[data-v-2ae39520] {
  border-color: #292C35;
  color: #292C35;
}
.ui-button .color--main-gradient.type--full.disabled[data-v-2ae39520] {
  background-color: #292C35;
  color: #73747b;
}
.ui-button .color--main-gradient.type--border[data-v-2ae39520] {
  border-color: var(--color-main);
  color: var(--color-main);
  background-color: transparent;
}
.ui-button .color--main-gradient.type--border.disabled[data-v-2ae39520] {
  border-color: #73747b;
  color: #73747b;
}
.ui-button .color--main-gradient.type--border[data-v-2ae39520]:hover {
  border-color: var(--color-main-light);
  color: #0f0f10;
  background-color: var(--color-main-light);
}
.ui-button .color--main-gradient.type--border[data-v-2ae39520]:active {
  border-color: var(--color-main-dark2);
  color: #0f0f10;
  background-color: var(--color-main-dark2);
}
.ui-button .color--main-gradient.type--both[data-v-2ae39520] {
  border-color: var(--color-main);
  background: rgba(var(--color-main), 0.2);
  color: var(--color-main);
}
.ui-button .color--main-gradient.type--both.disabled[data-v-2ae39520] {
  border-color: #a7a8ac;
  color: #a7a8ac;
}
.ui-button .color--main-gradient.type--icon[data-v-2ae39520] {
  border-color: var(--color-main);
  background-color: var(--color-main);
  color: #EBEBEB;
}
.ui-button .color--main-gradient.type--icon[data-v-2ae39520]:hover {
  color: var(--color-main-light);
}
.ui-button .color--main-gradient.type--icon.disabled[data-v-2ae39520] {
  border-color: #a7a8ac;
  color: #a7a8ac;
}
.ui-button .color--main2-gradient.type--full[data-v-2ae39520] {
  background-color: var(--color-main);
  color: #0f0f10;
}
.ui-button .color--main2-gradient.type--full[data-v-2ae39520]:hover {
  background-color: var(--color-main-light);
}
.ui-button .color--main2-gradient.type--full:hover .icon-item[data-v-2ae39520] {
  color: #0f0f10;
}
.ui-button .color--main2-gradient.type--full[data-v-2ae39520]:active {
  background-color: var(--color-main-dark2);
  border: solid 1px var(--color-main-dark2);
}
.ui-button .color--main2-gradient.type--full.disabled[data-v-2ae39520] {
  background-color: #292C35;
  color: #73747b;
}
.ui-button .color--main2-gradient.type--full[data-v-2ae39520] {
  color: #0f0f10;
  background: var(--color-main);
  border-color: var(--color-main);
  transition: none;
  background-position: 0 0;
}
.ui-button .color--main2-gradient.type--full[data-v-2ae39520]:hover {
  background: var(--color-main-light);
  background-position: 100px;
}
.ui-button .color--main2-gradient.type--full[data-v-2ae39520]:active {
  background: var(--color-main-dark2);
}
.ui-button .color--main2-gradient.type--full.disabled[data-v-2ae39520] {
  border-color: #292C35;
  color: #292C35;
}
.ui-button .color--main2-gradient.type--full.disabled[data-v-2ae39520] {
  background-color: #292C35;
  color: #73747b;
}
.ui-button .color--main2-gradient.type--border[data-v-2ae39520] {
  border-color: var(--color-main);
  color: var(--color-main);
  background-color: transparent;
}
.ui-button .color--main2-gradient.type--border.disabled[data-v-2ae39520] {
  border-color: #73747b;
  color: #73747b;
}
.ui-button .color--main2-gradient.type--border[data-v-2ae39520]:hover {
  border-color: var(--color-main-light);
  color: #0f0f10;
  background-color: var(--color-main-light);
}
.ui-button .color--main2-gradient.type--border[data-v-2ae39520]:active {
  border-color: var(--color-main-dark2);
  color: #0f0f10;
  background-color: var(--color-main-dark2);
}
.ui-button .color--main2-gradient.type--both[data-v-2ae39520] {
  border-color: var(--color-main);
  background: rgba(var(--color-main), 0.2);
  color: var(--color-main);
}
.ui-button .color--main2-gradient.type--both.disabled[data-v-2ae39520] {
  border-color: #a7a8ac;
  color: #a7a8ac;
}
.ui-button .color--main2-gradient.type--icon[data-v-2ae39520] {
  border-color: var(--color-main);
  background-color: var(--color-main);
  color: #EBEBEB;
}
.ui-button .color--main2-gradient.type--icon[data-v-2ae39520]:hover {
  color: var(--color-main-light);
}
.ui-button .color--main2-gradient.type--icon.disabled[data-v-2ae39520] {
  border-color: #a7a8ac;
  color: #a7a8ac;
}
.ui-button .color--dark1.type--full[data-v-2ae39520] {
  background-color: #333845;
  color: #0f0f10;
}
.ui-button .color--dark1.type--full[data-v-2ae39520]:hover {
  background-color: var(--color-main-light);
}
.ui-button .color--dark1.type--full:hover .icon-item[data-v-2ae39520] {
  color: #0f0f10;
}
.ui-button .color--dark1.type--full[data-v-2ae39520]:active {
  background-color: var(--color-main-dark2);
  border: solid 1px var(--color-main-dark2);
}
.ui-button .color--dark1.type--full.disabled[data-v-2ae39520] {
  background-color: #292C35;
  color: #73747b;
}
.ui-button .color--dark1.type--full[data-v-2ae39520] {
  color: #EBEBEB;
}
.ui-button .color--dark1.type--full:hover .text[data-v-2ae39520] {
  color: #0f0f10;
}
.ui-button .color--dark1.type--border[data-v-2ae39520] {
  border-color: #333845;
  color: #333845;
  background-color: transparent;
}
.ui-button .color--dark1.type--border.disabled[data-v-2ae39520] {
  border-color: #73747b;
  color: #73747b;
}
.ui-button .color--dark1.type--border[data-v-2ae39520]:hover {
  border-color: var(--color-main-light);
  color: #0f0f10;
  background-color: var(--color-main-light);
}
.ui-button .color--dark1.type--border[data-v-2ae39520]:active {
  border-color: var(--color-main-dark2);
  color: #0f0f10;
  background-color: var(--color-main-dark2);
}
.ui-button .color--dark1.type--both[data-v-2ae39520] {
  border-color: #333845;
  background: rgba(51, 56, 69, 0.2);
  color: #333845;
}
.ui-button .color--dark1.type--both.disabled[data-v-2ae39520] {
  border-color: #a7a8ac;
  color: #a7a8ac;
}
.ui-button .color--dark1.type--icon[data-v-2ae39520] {
  border-color: #333845;
  background-color: #333845;
  color: #EBEBEB;
}
.ui-button .color--dark1.type--icon[data-v-2ae39520]:hover {
  color: var(--color-main-light);
}
.ui-button .color--dark1.type--icon.disabled[data-v-2ae39520] {
  border-color: #a7a8ac;
  color: #a7a8ac;
}
.ui-button .color--transprent.type--full[data-v-2ae39520] {
  background-color: transparent;
  color: #0f0f10;
}
.ui-button .color--transprent.type--full[data-v-2ae39520]:hover {
  background-color: var(--color-main-light);
}
.ui-button .color--transprent.type--full:hover .icon-item[data-v-2ae39520] {
  color: #0f0f10;
}
.ui-button .color--transprent.type--full[data-v-2ae39520]:active {
  background-color: var(--color-main-dark2);
  border: solid 1px var(--color-main-dark2);
}
.ui-button .color--transprent.type--full.disabled[data-v-2ae39520] {
  background-color: #292C35;
  color: #73747b;
}
.ui-button .color--transprent.type--full.disabled[data-v-2ae39520] {
  background-color: #292C35;
  color: #73747b;
}
.ui-button .color--transprent.type--full[data-v-2ae39520] {
  color: #EBEBEB;
}
.ui-button .color--transprent.type--full:hover .text[data-v-2ae39520] {
  color: #0f0f10;
}
.ui-button .color--transprent.type--border[data-v-2ae39520] {
  border-color: transparent;
  color: transparent;
  background-color: transparent;
}
.ui-button .color--transprent.type--border.disabled[data-v-2ae39520] {
  border-color: #73747b;
  color: #73747b;
}
.ui-button .color--transprent.type--border[data-v-2ae39520]:hover {
  border-color: var(--color-main-light);
  color: #0f0f10;
  background-color: var(--color-main-light);
}
.ui-button .color--transprent.type--border[data-v-2ae39520]:active {
  border-color: var(--color-main-dark2);
  color: #0f0f10;
  background-color: var(--color-main-dark2);
}
.ui-button .color--transprent.type--both[data-v-2ae39520] {
  border-color: transparent;
  background: rgba(0, 0, 0, 0.2);
  color: transparent;
}
.ui-button .color--transprent.type--both.disabled[data-v-2ae39520] {
  border-color: #a7a8ac;
  color: #a7a8ac;
}
.ui-button .color--transprent.type--icon[data-v-2ae39520] {
  border-color: transparent;
  background-color: transparent;
  color: #EBEBEB;
}
.ui-button .color--transprent.type--icon[data-v-2ae39520]:hover {
  color: var(--color-main-light);
}
.ui-button .color--transprent.type--icon.disabled[data-v-2ae39520] {
  border-color: #a7a8ac;
  color: #a7a8ac;
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/components/ui/modal/modal.scss?vue&type=style&index=0&id=14446f85&scoped=true&lang=scss&external ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-14446f85]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-14446f85] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-14446f85] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-14446f85 {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-14446f85 {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-14446f85 {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-14446f85 {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-14446f85 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-14446f85 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-14446f85 {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-14446f85 {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-14446f85 {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-14446f85 {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-14446f85 {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-14446f85 {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-14446f85 {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.ui-modal[data-v-14446f85] {
  transform: scale(0);
  transition: transform 0.5s;
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  left: 0;
  top: 0;
  overflow: hidden;
  animation: quickScaleDown-14446f85 0s 0.5s linear forwards;
}
.ui-modal .mask[data-v-14446f85] {
  animation: quickScaleDown-14446f85 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.ui-modal .modal-block[data-v-14446f85] {
  animation: quickScaleDown-14446f85 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.ui-modal.active[data-v-14446f85] {
  transition: none;
  transform: scale(1);
  animation: fadeIn-14446f85 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.ui-modal.active .modal-block[data-v-14446f85] {
  animation: fadeIn-14446f85 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.ui-modal .modal-all-block[data-v-14446f85] {
  text-align: center;
}
.ui-modal .modal-all-block .mask[data-v-14446f85] {
  position: fixed;
  width: 100vw;
  height: 100vh;
  display: inline-block;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.3);
  left: 0;
  right: 0;
  top: 0;
}
.ui-modal .modal-all-block .modal-block[data-v-14446f85] {
  z-index: 1000;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 15vh;
  background-color: #252934;
  width: 100%;
  display: inline-block;
  border-radius: 8px;
  box-shadow: 0px 4px 12px 0 rgba(0, 0, 0, 0.5);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.ui-modal .modal-all-block .modal-block .title-block[data-v-14446f85] {
  background-color: #191a20;
  flex-shrink: 0;
  flex-grow: 0;
  line-height: normal;
  padding: 8px 24px;
  box-sizing: border-box;
  border-radius: 8px 8px 0 0;
  position: relative;
  display: flex;
  flex-grow: 1;
  justify-content: space-between;
  align-items: center;
}
.ui-modal .modal-all-block .modal-block .title-block .title-main[data-v-14446f85] {
  color: var(--color-main);
  font-size: 1.25rem;
}
.ui-modal .modal-all-block .modal-block .title-block .title-sub[data-v-14446f85] {
  font-size: 0.875rem;
  color: #EBEBEB;
  line-height: 1.3;
}
.ui-modal .modal-all-block .modal-block .title-block .icon-block[data-v-14446f85] {
  display: inline-block;
  width: 24px;
  height: 24px;
  color: #EBEBEB;
}
.ui-modal .modal-all-block .modal-block .title-block .icon-block .icon-cancel[data-v-14446f85] {
  width: 100%;
}
.ui-modal .modal-all-block .modal-block .img-block[data-v-14446f85] {
  background-color: #252934;
  flex-shrink: 0;
  flex-grow: 0;
  max-width: 100%;
}
.ui-modal .modal-all-block .modal-block .img-block img[data-v-14446f85] {
  width: auto;
  max-width: 100%;
  display: inline-block;
}
.ui-modal .modal-all-block .modal-block .content-block[data-v-14446f85] {
  overflow-y: auto;
  box-sizing: border-box;
  padding: 24px 0;
  background-color: #252934;
  max-width: 100%;
  display: inline-block;
}
.ui-modal .modal-all-block .modal-block .btm-block[data-v-14446f85] {
  background-color: #252934;
  flex-shrink: 0;
  flex-grow: 0;
  border-radius: 0 0 8px 8px;
}
.ui-modal .modal-all-block .modal-block .btn-block[data-v-14446f85] {
  box-sizing: border-box;
  padding: 18px 24px;
}
.ui-modal .modal-all-block .modal-block .btn-block .wd--auto + .wd--auto[data-v-14446f85] {
  margin-left: 0;
}
.ui-modal .modal-all-block .modal-block .btn-block .verifyFalse[data-v-14446f85] {
  vertical-align: middle;
  padding: 6px 10px;
  color: #CC0000;
}
.ui-modal .modal-all-block.style--no-btn .content-block[data-v-14446f85] {
  border-radius: 0 0 8px 8px;
}
.ui-modal .modal-all-block.wd--default .modal-block[data-v-14446f85] {
  max-width: 528px;
}
.ui-modal .modal-all-block.wd--default .modal-block .btm-block[data-v-14446f85], .ui-modal .modal-all-block.wd--default .modal-block .title-block[data-v-14446f85], .ui-modal .modal-all-block.wd--default .modal-block .content-block[data-v-14446f85] {
  width: 528px;
}
.ui-modal .modal-all-block.wd--lg .modal-block[data-v-14446f85] {
  max-width: 960px;
}
.ui-modal .modal-all-block.wd--lg .modal-block .btm-block[data-v-14446f85], .ui-modal .modal-all-block.wd--lg .modal-block .title-block[data-v-14446f85], .ui-modal .modal-all-block.wd--lg .modal-block .content-block[data-v-14446f85] {
  width: 960px;
}
.ui-modal .modal-all-block.wd--sm .modal-block[data-v-14446f85] {
  max-width: 480px;
}
.ui-modal .modal-all-block.wd--sm .modal-block .btm-block[data-v-14446f85], .ui-modal .modal-all-block.wd--sm .modal-block .title-block[data-v-14446f85], .ui-modal .modal-all-block.wd--sm .modal-block .content-block[data-v-14446f85] {
  width: 480px;
}
.ui-modal .modal-all-block.min-h--md .modal-block .content-block[data-v-14446f85] {
  min-height: 300px;
}
.ui-modal .modal-all-block.btn--align-left .btn-block[data-v-14446f85] {
  text-align: left;
}
.ui-modal .modal-all-block.title--align-left .title-block[data-v-14446f85] {
  text-align: left;
}
.ui-modal .modal-all-block.btn--align-center .btn-block[data-v-14446f85] {
  text-align: center;
}
.ui-modal .modal-all-block.title--align-center .title-block[data-v-14446f85] {
  text-align: center;
}
.ui-modal .modal-all-block.title--align-center .title-block[data-v-14446f85] {
  justify-content: center;
}
.ui-modal .modal-all-block.title--align-center .title-block .title-detail[data-v-14446f85] {
  padding: 0 10px;
}
.ui-modal .modal-all-block.title--align-center .title-block .icon-block[data-v-14446f85] {
  position: absolute;
  top: 13px;
  right: 12px;
}
.ui-modal .modal-all-block.btn--align-right .btn-block[data-v-14446f85] {
  text-align: right;
}
.ui-modal .modal-all-block.title--align-right .title-block[data-v-14446f85] {
  text-align: right;
}
.ui-modal .modal-all-block.space--content-none .content-block[data-v-14446f85] {
  padding-left: 0;
  padding-right: 0;
}
.ui-modal .modal-all-block.space--content-td-none .content-block[data-v-14446f85] {
  padding-top: 0;
  padding-bottom: 0;
}
.ui-modal .modal-all-block.space--content-md .content-block[data-v-14446f85] {
  padding-left: 24px;
  padding-right: 24px;
}
.ui-modal .modal-all-block.space--content-td-md .content-block[data-v-14446f85] {
  padding-top: 24px;
  padding-bottom: 24px;
}
.ui-modal .modal-all-block.space--content-default .content-block[data-v-14446f85] {
  padding-left: 24px;
  padding-right: 24px;
}
.ui-modal .modal-all-block.space--content-td-default .content-block[data-v-14446f85] {
  padding-top: 24px;
  padding-bottom: 24px;
}
.ui-modal .modal-all-block.space--content-xmd .content-block[data-v-14446f85] {
  padding-left: 36px;
  padding-right: 36px;
}
.ui-modal .modal-all-block.space--content-td-xmd .content-block[data-v-14446f85] {
  padding-top: 36px;
  padding-bottom: 36px;
}
.ui-modal .modal-all-block.btn--arrange-top-down .btn-block[data-v-14446f85] {
  padding-bottom: 36px;
}
.ui-modal .modal-all-block.btn--arrange-top-down .btn-block .btn-inline + .btn-inline[data-v-14446f85] {
  margin-left: 0;
  margin-top: 24px;
}
.ui-modal .modal-all-block.btn--arrange-reverse .btn-block[data-v-14446f85] {
  flex-direction: row-reverse;
  display: flex;
  width: 100%;
}
.ui-modal .modal-all-block.btn--arrange-reverse .btn-block .btn-inline + .btn-inline[data-v-14446f85] {
  margin-left: 0;
  margin-right: 20px;
}
.ui-modal .modal-all-block.h--title-default .title-block[data-v-14446f85] {
  min-height: 48px;
}
.ui-modal .modal-all-block.h--title-md .title-block[data-v-14446f85] {
  min-height: 60px;
}
@media (max-width: 1440px) {
.ui-modal .modal-all-block .modal-block[data-v-14446f85] {
    top: 1vh;
}
}
@media (max-width: 960px) {
.ui-modal .modal-all-block .modal-block[data-v-14446f85] {
    overflow: auto;
    max-height: 90vh;
}
.ui-modal .modal-all-block .modal-block .content-block[data-v-14446f85] {
    max-width: unset;
}
}
/**
&.four {
    z-index:0;
    transform:scale(1);
    .modal-background {
      background:rgba(0,0,0,.7);
      .modal {
        animation: blowUpModal .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
      }
    }
    + .content {
      z-index:1;
      animation:blowUpContent .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
    }
    &.out {
      .modal-background {
        .modal {
          animation: blowUpModalTwo .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
        }
      }
      + .content {
        animation: blowUpContentTwo .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
      }
    }
  }
**/
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/components/ui/input/input.scss?vue&type=style&index=0&id=3a23cc62&scoped=true&lang=scss&external ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-3a23cc62]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-3a23cc62] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-3a23cc62] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-3a23cc62 {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-3a23cc62 {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-3a23cc62 {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-3a23cc62 {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-3a23cc62 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-3a23cc62 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-3a23cc62 {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-3a23cc62 {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-3a23cc62 {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-3a23cc62 {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-3a23cc62 {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-3a23cc62 {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-3a23cc62 {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.ui-input[data-v-3a23cc62] {
  display: inline-block;
  position: relative;
}
.ui-input input[data-v-3a23cc62] {
  font-size: 0.9375rem;
  outline: none;
  display: inline-block;
  width: 100%;
  height: 42px;
  border-radius: 6px;
  padding: 0;
  padding-left: 24px;
  padding-right: 20px;
  border: 1px solid #73747b;
  color: #EBEBEB;
  box-sizing: border-box;
}
.ui-input input[data-v-3a23cc62]:hover {
  border-color: var(--color-main);
}
.ui-input input[data-v-3a23cc62]:active, .ui-input input[data-v-3a23cc62]:focus {
  border-color: var(--color-main);
  outline: none;
}
.ui-input input[type=date][data-v-3a23cc62]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}
.ui-input.style--error input[data-v-3a23cc62] {
  border-color: #CC0000;
}
.ui-input.style--disable input[data-v-3a23cc62] {
  border-color: rgba(167, 168, 172, 0.2);
  color: rgba(167, 168, 172, 0.2);
}
.ui-input.style--disable[data-v-3a23cc62]:hover {
  border-color: rgba(167, 168, 172, 0.2);
}
.ui-input div[data-v-3a23cc62] {
  position: absolute;
  margin-top: 10px;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;
}
.ui-input div.erroSpan[data-v-3a23cc62] {
  color: #CC0000;
}
input.default[data-v-3a23cc62] {
  background-color: #111112;
}
input.unset[data-v-3a23cc62] {
  background-color: unset;
}
input[type=number][data-v-3a23cc62] {
  text-align: center;
  caret-color: #EBEBEB;
}
input[type=number][data-v-3a23cc62]::-webkit-outer-spin-button, input[type=number][data-v-3a23cc62]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number][data-v-3a23cc62] {
  /* Firefox */
  -moz-appearance: textfield;
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/components/ui/checkbox/checkbox.scss?vue&type=style&index=0&id=d232e7fe&scoped=true&lang=scss&external ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-d232e7fe]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-d232e7fe] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-d232e7fe] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-d232e7fe {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-d232e7fe {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-d232e7fe {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-d232e7fe {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-d232e7fe {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-d232e7fe {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-d232e7fe {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-d232e7fe {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-d232e7fe {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-d232e7fe {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-d232e7fe {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-d232e7fe {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-d232e7fe {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.ui-checkbox[data-v-d232e7fe] {
  display: inline-block;
}
.ui-checkbox .checkmark[data-v-d232e7fe] {
  display: inline-block;
  width: 100%;
  height: 100%; /* IE 9 */ /* Chrome, Safari, Opera */
  transform: rotate(45deg) scale(1);
}
.ui-checkbox .checkmark_stem[data-v-d232e7fe] {
  position: absolute;
  width: 2px;
  height: 11px;
  background-color: #a7a8ac;
  left: 8px;
  top: 1px;
}
.ui-checkbox .checkmark_kick[data-v-d232e7fe] {
  position: absolute;
  width: 6px;
  height: 2px;
  background-color: #a7a8ac;
  left: 4px;
  top: 10px;
}
.ui-checkbox.style--lg .checkmark[data-v-d232e7fe] {
  display: inline-block;
  width: 100%;
  height: 100%; /* IE 9 */ /* Chrome, Safari, Opera */
  transform: rotate(45deg) scale(1.2);
}
.ui-checkbox.style--lg .checkmark_stem[data-v-d232e7fe] {
  position: absolute;
  width: 2px;
  height: 11px;
  background-color: #a7a8ac;
  left: 8px;
  top: 1px;
}
.ui-checkbox.style--lg .checkmark_kick[data-v-d232e7fe] {
  position: absolute;
  width: 6px;
  height: 2px;
  background-color: #a7a8ac;
  left: 4px;
  top: 10px;
}
.ui-checkbox.style--lg .checkmark[data-v-d232e7fe] {
  position: relative;
  top: 5px;
}
.ui-checkbox.style--lg.style--has-text .text[data-v-d232e7fe], .ui-checkbox.style--lg.style--slot .text[data-v-d232e7fe] {
  padding-top: 3px;
  width: 100%;
}
.ui-checkbox.style--md .checkmark[data-v-d232e7fe] {
  display: inline-block;
  width: 100%;
  height: 100%; /* IE 9 */ /* Chrome, Safari, Opera */
  transform: rotate(45deg) scale(1.2);
}
.ui-checkbox.style--md .checkmark_stem[data-v-d232e7fe] {
  position: absolute;
  width: 2px;
  height: 11px;
  background-color: #a7a8ac;
  left: 8px;
  top: 1px;
}
.ui-checkbox.style--md .checkmark_kick[data-v-d232e7fe] {
  position: absolute;
  width: 6px;
  height: 2px;
  background-color: #a7a8ac;
  left: 4px;
  top: 10px;
}
.ui-checkbox.style--md .checkmark[data-v-d232e7fe] {
  position: relative;
  top: 5px;
}
.ui-checkbox.style--md.style--has-text .text[data-v-d232e7fe], .ui-checkbox.style--md.style--slot .text[data-v-d232e7fe] {
  padding-top: 3px;
  width: calc(100% - 24px - 1px * 2);
}
.ui-checkbox.style--sm .checkbox-style-block .checkmark-block[data-v-d232e7fe] {
  width: 16px;
  height: 16px;
}
.ui-checkbox.style--sm .checkbox-style-block .checkmark-block[data-v-d232e7fe] * {
  display: none;
}
.ui-checkbox.style--sm.style--has-text .text[data-v-d232e7fe], .ui-checkbox.style--sm.style--slot .text[data-v-d232e7fe] {
  width: calc(100% - 16px - 1px * 2);
}
.ui-checkbox .checkbox-style-block[data-v-d232e7fe] {
  cursor: pointer;
  font-size: 0;
}
.ui-checkbox .checkbox-style-block:hover .checkmark-block[data-v-d232e7fe] {
  border-color: var(--color-main-active);
}
.ui-checkbox .checkbox-style-block .checkmark-block[data-v-d232e7fe] {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  width: 24px;
  height: 24px;
  border: 1px solid #a7a8ac;
  font-size: 1.125rem;
  margin-top: 1px;
  border-radius: 2px;
  flex-shrink: 0;
}
.ui-checkbox .checkbox-style-block .checkmark-block[data-v-d232e7fe] * {
  display: none;
}
.ui-checkbox .checkbox-style-block.hoverEffect:hover .checkmark-block[data-v-d232e7fe] {
  border-color: #EBEBEB;
}
.ui-checkbox .checkbox-style-block.hoverEffect:hover .text[data-v-d232e7fe] {
  color: var(--color-main);
}
.ui-checkbox input[data-v-d232e7fe] {
  display: none;
}
.ui-checkbox input:checked + .checkbox-style-block[data-v-d232e7fe] {
  color: #EBEBEB;
  border-color: var(--color-main);
}
.ui-checkbox input:checked + .checkbox-style-block .checkmark-block[data-v-d232e7fe] {
  border-color: var(--color-main);
  background-color: var(--color-main);
}
.ui-checkbox input:checked + .checkbox-style-block .checkmark-block[data-v-d232e7fe] * {
  display: inline-block;
}
.ui-checkbox input:checked + .checkbox-style-block .checkmark_stem[data-v-d232e7fe] {
  background-color: #111112;
}
.ui-checkbox input:checked + .checkbox-style-block .checkmark_kick[data-v-d232e7fe] {
  background-color: #111112;
}
.ui-checkbox input:checked ~ .checkbox-style-block:hover .checkmark-block[data-v-d232e7fe] {
  background-color: var(--color-main-active);
  border-color: var(--color-main-active);
}
.ui-checkbox .slot-content[data-v-d232e7fe] {
  display: inline-block;
}
.ui-checkbox .text[data-v-d232e7fe] {
  display: none;
  padding-left: 14px;
  box-sizing: border-box;
  text-align: left;
  color: #a7a8ac;
}
.ui-checkbox.style--has-text[data-v-d232e7fe], .ui-checkbox.style--slot[data-v-d232e7fe] {
  font-size: 0;
}
.ui-checkbox.style--has-text .text[data-v-d232e7fe], .ui-checkbox.style--slot .text[data-v-d232e7fe] {
  display: inline-block;
  font-size: 0.9375rem;
}
.ui-checkbox.style--disable[data-v-d232e7fe] {
  cursor: not-allowed;
  pointer-events: none;
}
.ui-checkbox.style--disable .checkmark-block[data-v-d232e7fe] {
  border-color: rgba(167, 168, 172, 0.2);
}
.ui-checkbox.style--disable input:checked + .checkbox-style-block .checkmark-block[data-v-d232e7fe] {
  color: rgba(167, 168, 172, 0.2);
  border-color: rgba(167, 168, 172, 0.2);
  background-color: rgba(167, 168, 172, 0.2);
}
.ui-checkbox.style--disable input:checked + .checkbox-style-block .checkmark-block[data-v-d232e7fe] * {
  display: inline-block;
}
.ui-checkbox.style--disable input:checked + .checkbox-style-block .checkmark_stem[data-v-d232e7fe] {
  background-color: #111112;
}
.ui-checkbox.style--disable input:checked + .checkbox-style-block .checkmark_kick[data-v-d232e7fe] {
  background-color: #111112;
}
.ui-checkbox.style--disable .text[data-v-d232e7fe] {
  color: rgba(167, 168, 172, 0.2);
}
.ui-checkbox .inlineFlex[data-v-d232e7fe] {
  display: flex;
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/components/ui/textarea/textarea.scss?vue&type=style&index=0&id=5fef0290&scoped=true&lang=scss&external ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-5fef0290]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-5fef0290] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-5fef0290] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-5fef0290 {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-5fef0290 {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-5fef0290 {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-5fef0290 {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-5fef0290 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-5fef0290 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-5fef0290 {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-5fef0290 {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-5fef0290 {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-5fef0290 {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-5fef0290 {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-5fef0290 {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-5fef0290 {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.ui-textarea[data-v-5fef0290] {
  display: inline-block;
  width: 100%;
}
.ui-textarea textarea[data-v-5fef0290] {
  width: 100%;
  outline: none;
  border-radius: 6px;
  padding: 25px 0;
  padding-left: 24px;
  padding-right: 20px;
  border: 1px solid #73747b;
  color: #EBEBEB;
  box-sizing: border-box;
  background-color: unset;
  resize: none;
}
.ui-textarea textarea[data-v-5fef0290]:hover {
  border-color: var(--color-main);
}
.ui-textarea textarea[data-v-5fef0290]:active, .ui-textarea textarea[data-v-5fef0290]:focus {
  border-color: var(--color-main);
  outline: none;
}
.ui-textarea.style--error textarea[data-v-5fef0290] {
  border-color: #CC0000;
}
.ui-textarea.style--disable textarea[data-v-5fef0290] {
  border-color: rgba(167, 168, 172, 0.2);
  color: rgba(167, 168, 172, 0.2);
}
.ui-textarea.style--disable textarea[data-v-5fef0290]:hover {
  border-color: rgba(167, 168, 172, 0.2);
}
.ui-textarea.default textarea[data-v-5fef0290] {
  background-color: #111112;
}
.ui-textarea.unset textarea[data-v-5fef0290] {
  background-color: unset;
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/components/ui/select/select.scss?vue&type=style&index=0&id=5ff40eba&scoped=true&lang=scss&external ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-5ff40eba]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-5ff40eba] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-5ff40eba] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-5ff40eba {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-5ff40eba {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-5ff40eba {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-5ff40eba {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-5ff40eba {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-5ff40eba {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-5ff40eba {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-5ff40eba {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-5ff40eba {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-5ff40eba {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-5ff40eba {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-5ff40eba {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-5ff40eba {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.ui-select[data-v-5ff40eba] {
  position: relative;
  display: flex;
}
.ui-select[data-v-5ff40eba] ::-webkit-scrollbar {
  width: 5px;
  border-radius: 10px;
}
.ui-select[data-v-5ff40eba] ::-webkit-scrollbar-thumb {
  background-color: var(--color-main);
  border-radius: 10px;
}
.ui-select:hover .select-block[data-v-5ff40eba], .ui-select:active .select-block[data-v-5ff40eba] {
  border-color: var(--color-main);
}
.ui-select.active .select-block[data-v-5ff40eba]::after {
  border: solid #73747b;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 5px;
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  margin-top: 3px;
}
.ui-select.style--error .select-block[data-v-5ff40eba] {
  border-color: #CC0000;
}
.ui-select.style--error .select-block[data-v-5ff40eba]::after {
  border: solid #CC0000;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 5px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.ui-select.style--error.active .select-block[data-v-5ff40eba]::after {
  border: solid #CC0000;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 5px;
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}
.ui-select.style--disable[data-v-5ff40eba] {
  pointer-events: none;
}
.ui-select.style--disable .select-block[data-v-5ff40eba] {
  pointer-events: none;
  border-color: rgba(167, 168, 172, 0.2);
}
.ui-select.style--disable .select-block[data-v-5ff40eba]::after {
  border: solid rgba(167, 168, 172, 0.2);
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 5px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.ui-select.style--disable .select-block .selected-text[data-v-5ff40eba] {
  color: rgba(167, 168, 172, 0.2);
}
.ui-select.style--disable.active .select-block[data-v-5ff40eba]::after {
  border: solid rgba(167, 168, 172, 0.2);
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 5px;
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}
.ui-select.style--disable.active .select-block .selected-text[data-v-5ff40eba] {
  color: rgba(167, 168, 172, 0.2);
}
.ui-select.style--xl .select-block[data-v-5ff40eba] {
  height: 56px;
}
.ui-select .select-block[data-v-5ff40eba] {
  display: flex;
  width: 100%;
  align-items: center;
  height: 42px;
  border: 1px solid #73747b;
  box-sizing: border-box;
  padding: 0 24px;
  border-radius: 6px;
  position: relative;
  cursor: pointer;
  transition: border-color 0.5s;
}
.ui-select .select-block[data-v-5ff40eba]::after {
  transition: all 0.5s;
  content: " ";
  display: inline-block;
  margin-top: -2px;
  border: solid #73747b;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 5px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.ui-select .select-block .selected-text[data-v-5ff40eba] {
  display: block;
  width: 100%;
  text-decoration: none;
  color: #EBEBEB;
}
.ui-select .select-block div[data-v-5ff40eba] {
  position: absolute;
  top: 40px;
  margin-top: 10px;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
  left: 0;
}
.ui-select .select-block div.erroSpan[data-v-5ff40eba] {
  color: #CC0000;
}
.ui-select .select-list-block[data-v-5ff40eba] {
  transition: border-color 0.5s;
  display: inline-block;
  width: 100%;
  border-radius: 6px;
  border: 1px solid #73747b;
  max-height: 200px;
  overflow-y: auto;
  scroll-padding: 50px 0 0 50px;
  position: absolute;
  top: 64px;
  background-color: #111112;
  z-index: 40;
}
.ui-select .select-list-block .option[data-v-5ff40eba] {
  padding: 0;
}
.ui-select .select-list-block .option + .option[data-v-5ff40eba] {
  border-top: 1px solid #43464f;
}
.ui-select .select-list-block .option .text[data-v-5ff40eba] {
  padding: 15px 24px;
  cursor: pointer;
  display: block;
  text-decoration: none;
  color: #EBEBEB;
  transition: background-color 0.5s;
}
.ui-select .select-list-block .option .text.style--title[data-v-5ff40eba] {
  opacity: 0.65;
  color: #a7a8ac;
  pointer-events: none;
}
.ui-select .select-list-block .option .text[data-v-5ff40eba]:hover {
  color: var(--color-main-active);
  background-color: #383e4c;
}
.ui-select .select-list-block .option .text[data-v-5ff40eba]:active {
  color: var(--color-main);
  background-color: #2d3341;
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/components/ui/ctmenu/ctmenu.scss?vue&type=style&index=0&id=5616020e&scoped=true&lang=scss&external ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-5616020e]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-5616020e] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-5616020e] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-5616020e {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-5616020e {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-5616020e {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-5616020e {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-5616020e {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-5616020e {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-5616020e {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-5616020e {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-5616020e {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-5616020e {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-5616020e {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-5616020e {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-5616020e {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.ui_ctmenu[data-v-5616020e] {
  z-index: 1000;
  display: block;
  position: absolute;
  margin: -40px 0 0 -40px;
}
.ui_ctmenu.paddingModify[data-v-5616020e] {
  padding: 50px 50px 50px 50px;
}
.ui_ctmenu .contextmenu[data-v-5616020e] {
  width: 156px;
  border: solid 1px #333845;
  background: #f5f5f5;
  border-radius: 4px;
  box-shadow: 0px 1px 6px 0 #000;
  color: #333845;
  padding: 17px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 0.875rem;
}
.ui_ctmenu .contextmenu .contextmenu_each[data-v-5616020e] {
  cursor: pointer;
  width: 100%;
}
.ui_ctmenu .contextmenu .contextmenu_each:hover > div[data-v-5616020e] {
  background: #D9DEE1;
  opacity: 1;
}
.ui_ctmenu .contextmenu .contextmenu_each div[data-v-5616020e] {
  transition: all 0.1s ease-in-out;
  padding: 13px 19px;
}
.ui_ctmenu .contextmenu .contextmenu_each div.disable[data-v-5616020e] {
  opacity: 0.2;
}
.ui_ctmenu .contextmenu .contextmenu_each div.disable[data-v-5616020e]:hover {
  background: unset;
  opacity: 0.2;
  cursor: not-allowed;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/components/ui/tablebox/tablebox.scss?vue&type=style&index=0&id=ae80320a&scoped=true&lang=scss&external ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-ae80320a]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-ae80320a] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-ae80320a] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-ae80320a {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-ae80320a {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-ae80320a {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-ae80320a {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-ae80320a {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-ae80320a {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-ae80320a {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-ae80320a {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-ae80320a {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-ae80320a {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-ae80320a {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-ae80320a {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-ae80320a {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
span[data-v-ae80320a] {
  display: inline-block;
}
span.alignLeft[data-v-ae80320a] {
  text-align: left;
}
span.alignRight[data-v-ae80320a] {
  text-align: right;
}
.textLimit[data-v-ae80320a] {
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  overflow: hidden;
}
.testAlignLeft[data-v-ae80320a] {
  text-align: left;
  display: inline-block;
}
.textLimitHoverBlock[data-v-ae80320a] {
  transition: opacity 1s linear;
  opacity: 0.9;
  top: 50px;
  z-index: 9999;
  background: #000;
  position: absolute;
  padding: 10px 16px;
  border-radius: 4px;
  width: 100%;
  text-align: left;
  box-shadow: 0px 1px 6px 0 #000;
}
.textLimitHoverBlock.opacity[data-v-ae80320a] {
  opacity: 1;
}
.textLimitHoverBlock.rightPosition[data-v-ae80320a] {
  right: 10px;
}
.clickPopUpDefault[data-v-ae80320a] {
  cursor: pointer;
  display: flex;
  justify-content: center;
}
.clickPopUpDefault .clickPopUpIcon[data-v-ae80320a] {
  margin-right: 10px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  vertical-align: middle;
  transition: all 0.3s ease-in-out;
  border-radius: 50%;
  background: #000;
  cursor: pointer;
}
.clickPopUpDefault .clickPopUpIcon[data-v-ae80320a]:hover {
  background: var(--color-main);
  color: #000;
}
.clickPopUpDefault .clickPopUpIcon[data-v-ae80320a]:active {
  background: var(--color-main-active);
  color: #000;
}
.clickPopUpDefault .clickPopUpIcon.active[data-v-ae80320a] {
  transform: rotate(90deg);
}
.clickPopUpBlock[data-v-ae80320a] {
  transition: opacity 1s linear;
  opacity: 0.9;
  top: 60px;
  z-index: 9999;
  background: #000;
  position: absolute;
  padding: 10px 16px;
  border-radius: 4px;
  width: 100%;
  text-align: left;
  box-shadow: 0px 1px 6px 0 #000;
  z-index: 10;
  transition: 0.5s;
}
.clickPopUpBlock.noshow[data-v-ae80320a] {
  transform: scale(0);
}
.clickPopUpBlock.show[data-v-ae80320a] {
  transform: scale(1);
}
.clickPopUpBlock.opacity[data-v-ae80320a] {
  opacity: 1;
}
.clickPopUpBlock .clickPopUp_number_color[data-v-ae80320a] {
  color: #a7a8ac;
}
.isDecoration[data-v-ae80320a] {
  -webkit-text-decoration: underline solid 1px;
          text-decoration: underline solid 1px;
  cursor: pointer;
  transition: all ease-in-out 0.2s;
}
.isDecoration[data-v-ae80320a]:hover {
  color: var(--color-main);
}
td[data-v-ae80320a], td[data-v-ae80320a] {
  padding: 18px 20px;
}
.ui_tablebox[data-v-ae80320a] {
  width: 100%;
  position: relative;
  height: 100%;
}
.ui_tablebox.scroll[data-v-ae80320a] {
  overflow-y: scroll;
}
.ui_tablebox table.tableBlock[data-v-ae80320a] {
  width: 100%;
  text-align: center;
  height: 99%;
}
.ui_tablebox table.tableBlock thead.columns[data-v-ae80320a] {
  font-size: 0.875rem;
}
.ui_tablebox table.tableBlock thead.columns tr[data-v-ae80320a] {
  color: #a7a8ac;
  background: #111116;
}
.ui_tablebox table.tableBlock thead.columns tr td[data-v-ae80320a] {
  background: #111116;
  vertical-align: middle;
  font-size: 15px;
}
.ui_tablebox table.tableBlock thead.columns tr td.checkBoxTr.paddingNone[data-v-ae80320a] {
  padding-left: unset;
}
.ui_tablebox table.tableBlock thead.columns tr td.padding_0[data-v-ae80320a] {
  padding-right: 11px;
}
.ui_tablebox table.tableBlock thead.columns tr td .tdBlock[data-v-ae80320a] {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 16px;
  padding: 0 29px;
  position: relative;
}
.ui_tablebox table.tableBlock thead.columns tr td .tdBlock span[data-v-ae80320a] {
  position: absolute;
  right: 0;
  margin-left: 0;
  width: 24px;
}
.ui_tablebox table.tableBlock thead.columns tr td .tdBlock span img[data-v-ae80320a] {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: none;
  width: 100%;
}
.ui_tablebox table.tableBlock thead.columns tr td:hover.cursor[data-v-ae80320a] {
  cursor: pointer;
}
.ui_tablebox table.tableBlock thead.columns tr td:hover .tdBlock span img.sortShow[data-v-ae80320a] {
  display: inline-block;
}
.ui_tablebox table.tableBlock thead.columns tr td:focus.cursor[data-v-ae80320a] {
  cursor: pointer;
}
.ui_tablebox table.tableBlock thead.columns tr td:focus .tdBlock span img.sortShow[data-v-ae80320a] {
  display: inline-block;
}
.ui_tablebox table.tableBlock tbody[data-v-ae80320a] {
  font-size: 0.9375rem;
  transition: all 0.4s linear;
}
.ui_tablebox table.tableBlock tbody.hasHoverEffect[data-v-ae80320a]:hover {
  box-shadow: 0 0 6px 0 rgb(0, 0, 0);
}
.ui_tablebox table.tableBlock tbody.hasHoverEffect:hover + tbody > tr[data-v-ae80320a]:first-child {
  box-shadow: inset 0 3px 6px -2px rgba(0, 0, 0, 0.5);
}
.ui_tablebox table.tableBlock tbody.hasHoverEffect:hover tr[data-v-ae80320a] {
  background: #353c4b;
}
.ui_tablebox table.tableBlock tbody tr[data-v-ae80320a] {
  background: #191C25;
  transition: all linear 0.1s;
}
.ui_tablebox table.tableBlock tbody tr td[data-v-ae80320a] {
  position: relative;
  vertical-align: middle;
  padding: 19px 20px;
}
.ui_tablebox table.tableBlock tbody tr td.iconTr[data-v-ae80320a] {
  width: 30px;
  text-align: center;
  vertical-align: middle;
}
.ui_tablebox table.tableBlock tbody tr td.iconTr.paddingNone[data-v-ae80320a] {
  padding-right: 10px;
}
.ui_tablebox table.tableBlock tbody tr td.iconTr > div[data-v-ae80320a] {
  transform: rotate(-90deg);
  transition: all 0.3s ease-in-out;
}
.ui_tablebox table.tableBlock tbody tr td.iconTr > div.active[data-v-ae80320a] {
  transform: rotate(0deg);
}
.ui_tablebox table.tableBlock tbody tr td.iconTr .icon[data-v-ae80320a] {
  height: 28px;
  width: 28px;
  color: #a7a8ac;
  cursor: pointer;
}
.ui_tablebox table.tableBlock tbody tr td.checkBoxTr.paddingNone[data-v-ae80320a] {
  padding-left: unset;
}
.ui_tablebox table.tableBlock tbody tr.slot td[data-v-ae80320a] {
  padding: 0;
}
.ui_tablebox table.tableBlock tbody tr.slot .second[data-v-ae80320a] {
  transition: all 0.1s linear;
  max-height: 0px;
  overflow: hidden;
  width: 100%;
}
.ui_tablebox table.tableBlock tbody tr.slot .second.show[data-v-ae80320a] {
  max-height: 9999px;
}
.ui_tablebox table.tableBlock tbody:nth-child(even) tr[data-v-ae80320a] {
  background: #202430;
}
.ui_tablebox table.tableBlock tbody:not(.nodatas).hasHoverEffect tr[data-v-ae80320a]:hover {
  background: #353c4b;
}
.ui_tablebox table.tableBlock tbody.nodatas[data-v-ae80320a] {
  width: 100%;
  height: 100%;
  color: #a7a8ac;
}
.ui_tablebox table.tableBlock tbody.nodatas[data-v-ae80320a]:hover {
  box-shadow: unset;
}
.border[data-v-ae80320a] {
  border: solid 1px rosybrown;
}
.border2[data-v-ae80320a] {
  border: solid 1px darkorange;
}
.online[data-v-ae80320a] {
  color: #1dd0e9;
}
.offline[data-v-ae80320a] {
  color: #a7a8ac;
}
.waiting[data-v-ae80320a] {
  color: #7da7d9;
}
.general[data-v-ae80320a] {
  color: #EBEBEB;
}
.caution[data-v-ae80320a] {
  color: #fff568;
}
.limit[data-v-ae80320a] {
  color: #FF5353;
}
/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/components/ui/tab/tab.scss?vue&type=style&index=0&id=ca3ce4a6&scoped=true&lang=scss&external ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-ca3ce4a6]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-ca3ce4a6] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-ca3ce4a6] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-ca3ce4a6 {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-ca3ce4a6 {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-ca3ce4a6 {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-ca3ce4a6 {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-ca3ce4a6 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-ca3ce4a6 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-ca3ce4a6 {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-ca3ce4a6 {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-ca3ce4a6 {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-ca3ce4a6 {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-ca3ce4a6 {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-ca3ce4a6 {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-ca3ce4a6 {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.ui-tab .tab-title-block[data-v-ca3ce4a6] {
  width: 100%;
  table-layout: fixed;
  padding: 0;
  list-style-type: none;
  display: flex;
}
.ui-tab .tab-title-block .tab-item[data-v-ca3ce4a6] {
  cursor: pointer;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
  vertical-align: middle;
  width: auto;
  text-align: center;
  position: relative;
  transition: all 0.8s;
  max-width: 240px;
  display: inline-flex;
  width: 100%;
}
.ui-tab .tab-title-block .tab-item[data-v-ca3ce4a6]:not(:last-child) {
  margin-right: 2px;
}
.ui-tab .tab-title-block .tab-item .tab-text[data-v-ca3ce4a6] {
  position: relative;
  text-decoration: none;
  color: #a7a8ac;
  font-size: 0.9375rem;
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  padding: 19px 5px;
  font-weight: normal;
  transition: 0.5s;
  background-color: #09090C;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.ui-tab .tab-title-block .tab-item .text-alertText[data-v-ca3ce4a6] {
  position: absolute;
  right: 10px;
  top: 10px;
  border-radius: 18px;
  background-color: #FF4B4B;
  color: #fff;
  min-width: 18px;
  max-width: 38px;
  height: 18px;
  padding: 3px;
  font-size: 0.75rem;
  line-height: 20px;
  text-align: center;
}
.ui-tab .tab-title-block .tab-item:hover .tab-text[data-v-ca3ce4a6] {
  color: var(--color-main-active);
  background-color: #272C39;
}
.ui-tab .tab-title-block .tab-item:active .tab-text[data-v-ca3ce4a6] {
  color: var(--color-main);
  background-color: #181A21;
}
.ui-tab .tab-title-block .tab-item.active .tab-text[data-v-ca3ce4a6] {
  color: var(--color-main);
  background-color: #181A21;
}
.ui-tab .tab-title-block .tab-item.disabled[data-v-ca3ce4a6] {
  cursor: not-allowed;
}
.ui-tab .tab-title-block .tab-item.disabled .tab-text[data-v-ca3ce4a6] {
  cursor: not-allowed;
  color: #43464f;
  background-color: #23242e;
}
@keyframes lineWidth-ca3ce4a6 {
from {
    width: 0;
}
to {
    width: 100%;
}
}
.ui-tab.wd--auto .tab-title-block .tab-item[data-v-ca3ce4a6] {
  max-width: none;
}
.ui-tab.style--theme-2 .tab-title-block[data-v-ca3ce4a6] {
  border-bottom: 1px solid #a7a8ac;
  display: flex;
  justify-content: center;
}
.ui-tab.style--theme-2 .tab-title-block .tab-item .tab-text[data-v-ca3ce4a6] {
  background-color: transparent;
  border-bottom: 1px solid transparent;
}
.ui-tab.style--theme-2 .tab-title-block .tab-item.active .tab-text[data-v-ca3ce4a6] {
  background-color: transparent;
  border-bottom: 2px solid var(--color-main);
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/components/ui/radio/radio.scss?vue&type=style&index=0&id=77a7bf53&scoped=true&lang=scss&external ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-77a7bf53]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-77a7bf53] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-77a7bf53] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-77a7bf53 {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-77a7bf53 {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-77a7bf53 {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-77a7bf53 {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-77a7bf53 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-77a7bf53 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-77a7bf53 {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-77a7bf53 {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-77a7bf53 {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-77a7bf53 {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-77a7bf53 {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-77a7bf53 {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-77a7bf53 {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.ui-radio.style--block[data-v-77a7bf53] {
  display: block;
  margin-bottom: 20px;
}
.ui-radio.style--inline[data-v-77a7bf53] {
  display: inline-block;
  margin-right: 20px;
}
.ui-radio.style--disable[data-v-77a7bf53] {
  pointer-events: none;
}
.ui-radio.style--disable .checkmark-block[data-v-77a7bf53] {
  border-color: #404552;
}
.ui-radio.style--disable input:checked + .checkbox-style-block[data-v-77a7bf53] {
  color: #404552;
  border-color: #404552;
}
.ui-radio.style--disable input:checked + .checkbox-style-block .checkmark-block[data-v-77a7bf53] {
  border-color: #404552;
}
.ui-radio.style--disable input:checked + .checkbox-style-block .checkmark-block[data-v-77a7bf53] * {
  display: inline-block;
}
.ui-radio.style--disable input:checked + .checkbox-style-block .checkmark[data-v-77a7bf53] {
  background-color: #404552;
}
.ui-radio.style--disable .text[data-v-77a7bf53] {
  color: #404552;
}
.ui-radio .checkbox-style-block[data-v-77a7bf53] {
  cursor: pointer;
  font-size: 0;
  display: flex;
  align-items: center;
}
.ui-radio .checkbox-style-block:hover .checkmark-block[data-v-77a7bf53] {
  border-color: var(--color-main-active);
}
.ui-radio .checkbox-style-block .checkmark-block[data-v-77a7bf53] {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  min-width: 22px;
  height: 22px;
  border: 1.5px solid #404552;
  font-size: 1.125rem;
  margin-top: 1px;
  border-radius: 50%;
  position: relative;
}
.ui-radio .checkbox-style-block .checkmark-block[data-v-77a7bf53] * {
  display: none;
}
.ui-radio .checkbox-style-block .checkmark-block .checkmark[data-v-77a7bf53] {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
}
.ui-radio input[data-v-77a7bf53] {
  display: none;
}
.ui-radio input:checked + .checkbox-style-block[data-v-77a7bf53] {
  color: #EBEBEB;
  border-color: var(--color-main);
}
.ui-radio input:checked + .checkbox-style-block .checkmark-block[data-v-77a7bf53] {
  border-color: var(--color-main);
}
.ui-radio input:checked + .checkbox-style-block .checkmark-block[data-v-77a7bf53] * {
  display: inline-block;
}
.ui-radio input:checked + .checkbox-style-block .checkmark[data-v-77a7bf53] {
  background-color: var(--color-main);
}
.ui-radio input:checked ~ .checkbox-style-block:hover .checkmark[data-v-77a7bf53] {
  background-color: var(--color-main-active);
}
.ui-radio input:checked ~ .checkbox-style-block:hover .checkmark-block[data-v-77a7bf53] {
  border-color: var(--color-main-active);
}
.ui-radio .text[data-v-77a7bf53] {
  display: none;
  box-sizing: border-box;
  margin-top: calc((22px / 2 - 0.9375rem / 2 - 0.5px) * 2);
  position: relative;
  top: -2px;
}
.ui-radio.style--has-text[data-v-77a7bf53] {
  font-size: 0;
}
.ui-radio.style--has-text .text[data-v-77a7bf53] {
  display: inline-block;
  font-size: 0.9375rem;
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/components/ui/svgicon/svgicon.scss?vue&type=style&index=0&id=5cad1675&scoped=true&lang=scss&external ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-5cad1675]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-5cad1675] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-5cad1675] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-5cad1675 {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-5cad1675 {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-5cad1675 {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-5cad1675 {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-5cad1675 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-5cad1675 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-5cad1675 {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-5cad1675 {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-5cad1675 {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-5cad1675 {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-5cad1675 {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-5cad1675 {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-5cad1675 {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.ui_svgicon[data-v-5cad1675] {
  display: inline-block;
  width: inherit;
  height: inherit;
  align-self: center;
}
.ui_svgicon .svg-icon[data-v-5cad1675] {
  width: inherit;
  height: inherit;
  fill: currentColor;
  overflow: hidden;
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/components/ui/slidebar/slidebar.scss?vue&type=style&index=0&id=62eddb80&scoped=true&lang=scss&external ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-62eddb80]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-62eddb80] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-62eddb80] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-62eddb80 {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-62eddb80 {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-62eddb80 {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-62eddb80 {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-62eddb80 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-62eddb80 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-62eddb80 {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-62eddb80 {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-62eddb80 {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-62eddb80 {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-62eddb80 {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-62eddb80 {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-62eddb80 {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.slidebar[data-v-62eddb80] {
  height: 60px;
}
.slidebar .lock[data-v-62eddb80] {
  height: 60px;
  position: absolute;
  z-index: 10;
}
.slidebar .title[data-v-62eddb80] {
  display: inline-block;
  vertical-align: top;
  width: 180px;
  height: 60px;
  font-family: Roboto;
  font-size: 0.9375rem;
  line-height: 60px;
  letter-spacing: 0.38px;
  text-align: left;
  color: #a7a8ac;
}
.slidebar .btn[data-v-62eddb80] {
  border: 0;
  padding: 0;
  width: 34px;
  height: 34px;
  border-width: 1px;
  margin-top: 15px;
  background: none;
  cursor: pointer;
  border-radius: 4px;
}
.slidebar .btn .icon[data-v-62eddb80] {
  color: #EBEBEB;
}
.slidebar .btn.able[data-v-62eddb80]:hover {
  border-style: solid;
  border-width: 1px;
  border: 1px solid var(--color-main);
  border-image-slice: 1;
  background-color: var(--color-main-dark2);
}
.slidebar .btn.able:hover .icon[data-v-62eddb80] {
  color: var(--color-main-active);
}
.slidebar .disable[data-v-62eddb80] {
  cursor: default;
}
.slidebar .disable .icon[data-v-62eddb80] {
  color: #a7a8ac;
}
.slidebar .bar[data-v-62eddb80] {
  display: inline-block;
  vertical-align: top;
  width: 672px;
  height: 100%;
  position: relative;
  margin: 0 24px;
}
.slidebar .bar .slider-target[data-v-62eddb80] {
  width: 100%;
  height: 6px;
  margin-top: 29.5px;
  position: absolute;
}
.slidebar .bar .slider_point[data-v-62eddb80] {
  width: 10px;
  height: 10px;
  position: absolute;
  margin-top: 26px;
  padding: 0;
  border: 0;
  left: 0;
  cursor: pointer;
}
.slidebar .bar .slider_point p[data-v-62eddb80] {
  width: 40px;
  height: 10px;
  margin-left: -15px;
  margin-top: -30px;
  text-align: center;
  color: #EBEBEB;
  font-size: 0.8125rem;
}
.slidebar .bar .slider_point[data-v-62eddb80] {
  transform: 0.5s;
}
.slidebar .bar .able[data-v-62eddb80] {
  background-color: var(--color-main-active);
  animation: anima-62eddb80 1s;
}
.slidebar .bar .disable[data-v-62eddb80] {
  background-color: #a7a8ac;
}
@keyframes anima-62eddb80 {
0% {
    transform: scale(1);
}
50% {
    transform: scale(1.5);
}
100% {
    transform: scale(1);
}
}
.slidebar .value[data-v-62eddb80] {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 132px;
  height: 42px;
  margin-left: 24px;
  margin-top: 9px;
  line-height: 42px;
  text-align: center;
  color: var(--color-main);
  background-color: transparent;
  z-index: 0;
}
.slidebar .value input[type=number][data-v-62eddb80] {
  border: 0;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 76px;
  padding-right: 56px;
  font-family: Roboto;
  font-size: 0.9375rem;
  background: none;
  text-align: right;
  color: var(--color-main);
  caret-color: var(--color-main);
  border: solid 1px #73747b;
  border-radius: 4px;
}
.slidebar .value input[type=number]:focus + p + .full[data-v-62eddb80] {
  display: none;
}
.slidebar .value input[type=number]:focus + p + .full + .full[data-v-62eddb80] {
  display: none;
}
.slidebar .value input[type=number][data-v-62eddb80]:hover {
  border: solid 1px var(--color-main);
  outline: 0;
}
.slidebar .value input[type=number][data-v-62eddb80]:focus {
  border: solid 1px var(--color-main);
  outline: 0;
}
.slidebar .value p[data-v-62eddb80] {
  width: 47px;
  position: absolute;
  top: 1px;
  right: 5px;
  z-index: -1;
  text-align: left;
}
.slidebar .value .settingIcon[data-v-62eddb80] {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 6px;
  left: 13px;
  z-index: 1;
}
.slidebar .value .full[data-v-62eddb80] {
  width: 100%;
  height: 100%;
  background-color: #252934;
  z-index: 0;
  left: 1px;
  text-align: center;
  margin-left: 0px;
  pointer-events: none;
}
.slidebar .value[data-v-62eddb80] {
  /* Chrome, Safari, Edge, Opera */
}
.slidebar .value input[data-v-62eddb80]::-webkit-outer-spin-button,
.slidebar .value input[data-v-62eddb80]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.slidebar .value[data-v-62eddb80] {
  /* Firefox */
}
.slidebar .value input[type=number][data-v-62eddb80] {
  -moz-appearance: textfield;
}
.slidebar .value.disableInput[data-v-62eddb80] {
  opacity: 0.5;
}
.slidebar .value.disableInput input[type=number][data-v-62eddb80]:hover {
  border: solid 1px #a7a8ac;
  outline: 0;
  cursor: not-allowed;
}
.slidebar .disable_all[data-v-62eddb80] {
  opacity: 0.5;
}
.slidebar.small .bar[data-v-62eddb80] {
  width: 452px;
}
.slidebar.small .bar .slider-target[data-v-62eddb80] {
  margin-top: 30px;
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/components/ui/cardimg/cardimg.scss?vue&type=style&index=0&id=8cc2c66a&scoped=true&lang=scss&external ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-8cc2c66a]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-8cc2c66a] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-8cc2c66a] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-8cc2c66a {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-8cc2c66a {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-8cc2c66a {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-8cc2c66a {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-8cc2c66a {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-8cc2c66a {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-8cc2c66a {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-8cc2c66a {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-8cc2c66a {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-8cc2c66a {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-8cc2c66a {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-8cc2c66a {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-8cc2c66a {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.cardimg[data-v-8cc2c66a] {
  width: 550px;
  height: 156px;
  border-radius: 4px;
  border: solid 1px rgba(255, 255, 255, 0.15);
  background-color: #20222b;
  color: #EBEBEB;
}
.cardimg .icon[data-v-8cc2c66a] {
  width: 100px;
  height: 100%;
  float: left;
}
.cardimg .icon .svg[data-v-8cc2c66a] {
  width: 48px;
  height: 48px;
  margin: 54px 26px;
  color: var(--color-main);
}
.cardimg .data[data-v-8cc2c66a] {
  width: 358px;
  height: 100%;
  float: left;
}
.cardimg .data .title[data-v-8cc2c66a] {
  height: 16px;
  font-family: SegoeUI;
  font-size: 1.25rem;
  line-height: 16px;
  text-align: left;
  color: var(--color-main);
  margin-top: 29px;
  margin-bottom: 15px;
}
.cardimg .content p span[data-v-8cc2c66a] {
  font-size: 1rem;
}
.cardimg .check[data-v-8cc2c66a] {
  width: 92px;
  height: 100%;
  float: left;
}
.cardimg .check .button[data-v-8cc2c66a] {
  margin: 64.5px 34px;
}
.cardimg.large[data-v-8cc2c66a] {
  width: 100%;
}
.cardimg.large .check[data-v-8cc2c66a] {
  margin-right: 56px;
  float: right;
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/components/layout/breadcrumb/breadcrumb.scss?vue&type=style&index=0&id=8166e6aa&scoped=true&lang=scss&external ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-8166e6aa]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-8166e6aa] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-8166e6aa] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-8166e6aa {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-8166e6aa {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-8166e6aa {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-8166e6aa {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-8166e6aa {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-8166e6aa {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-8166e6aa {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-8166e6aa {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-8166e6aa {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-8166e6aa {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-8166e6aa {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-8166e6aa {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-8166e6aa {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.ui-breadcrumb[data-v-8166e6aa] {
  display: inline-block;
  width: 100%;
}
.ui-breadcrumb .breadcrumb-list-block[data-v-8166e6aa] {
  display: flex;
  flex-wrap: wrap;
}
.ui-breadcrumb .breadcrumb-list-block > li[data-v-8166e6aa] {
  position: relative;
}
.ui-breadcrumb .breadcrumb-list-block > li + li[data-v-8166e6aa] {
  padding-left: 20px;
}
.ui-breadcrumb .breadcrumb-list-block > li + li[data-v-8166e6aa]::before {
  position: absolute;
  left: 5px;
  margin: 0 auto;
  content: ">";
  display: inline-block;
  color: #EBEBEB;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.125rem;
}
.ui-breadcrumb .breadcrumb-list-block .text-block[data-v-8166e6aa] {
  text-decoration: none;
  color: var(--color-main);
  font-size: 1.5rem;
  transition: all 0.2s;
}
.ui-breadcrumb .breadcrumb-list-block .text-block[data-v-8166e6aa]:hover {
  color: var(--color-main-active);
}
.ui-breadcrumb .breadcrumb-list-block .text-block[data-v-8166e6aa]:active {
  color: var(--color-main-light3);
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/components/ui/dropdown/dropdown.scss?vue&type=style&index=0&id=3e272acf&scoped=true&lang=scss&external ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-3e272acf]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-3e272acf] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-3e272acf] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-3e272acf {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-3e272acf {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-3e272acf {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-3e272acf {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-3e272acf {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-3e272acf {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-3e272acf {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-3e272acf {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-3e272acf {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-3e272acf {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-3e272acf {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-3e272acf {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-3e272acf {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.dropdown[data-v-3e272acf] {
  display: inline-block;
  vertical-align: top;
}
.dropdown #btn[data-v-3e272acf] {
  padding: 0;
  border-radius: 4px;
  background-color: #2a2f3b;
  border: 0;
  cursor: pointer;
}
.dropdown #btn[data-v-3e272acf]:hover {
  color: var(--color-main);
  transition: color 0.8s linear;
}
.dropdown #btn:hover #img[data-v-3e272acf] {
  color: var(--color-main);
}
.dropdown #btn:hover #title span[data-v-3e272acf] {
  color: var(--color-main);
}
.dropdown #btn #title[data-v-3e272acf] {
  width: 96px;
  height: 42px;
}
.dropdown #btn #title span[data-v-3e272acf] {
  height: 11px;
  font-family: Roboto;
  font-size: 0.9375rem;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 42px;
  letter-spacing: normal;
  text-align: center;
  color: #EBEBEB;
}
.dropdown #btn #img[data-v-3e272acf] {
  width: 24px;
  height: 23px;
  background-size: 100%;
  background-repeat: no-repeat;
  color: #EBEBEB;
}
.dropdown #btn.able[data-v-3e272acf]:hover {
  background-color: #2a2f3b;
}
.dropdown #btn.able:hover #title span[data-v-3e272acf] {
  color: var(--color-main);
}
.dropdown #btn.able:hover #img[data-v-3e272acf] {
  color: var(--color-main);
}
.dropdown #btn.able[data-v-3e272acf]:active {
  background-color: #222634;
}
.dropdown #btn.able:active #title span[data-v-3e272acf] {
  color: var(--color-main);
}
.dropdown #btn.able:active #img[data-v-3e272acf] {
  color: var(--color-main);
}
.dropdown #btn.disable[data-v-3e272acf] {
  background-color: #333845;
  cursor: not-allowed;
}
.dropdown #btn.disable #title span[data-v-3e272acf] {
  opacity: 0.2;
}
.dropdown .popup[data-v-3e272acf] {
  position: absolute;
  z-index: 10;
  width: 240px;
  border-radius: 4px;
  box-shadow: 0px 1px 6px 0 #000;
  border: solid 1px #43464f;
  background-color: #22242e;
  padding: 14px 0;
  transition: 0.5s;
}
.dropdown .popup .option-item[data-v-3e272acf] {
  width: 100%;
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
}
.dropdown .popup button[data-v-3e272acf], .dropdown .popup .option-item[data-v-3e272acf] {
  font-family: Roboto;
  width: 100%;
  height: 43px;
  font-size: 0.9375rem;
  text-align: left;
  padding-left: 10%;
  background: none;
  border: 0;
  color: #EBEBEB;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
}
.dropdown .popup button[data-v-3e272acf]:hover, .dropdown .popup .option-item[data-v-3e272acf]:hover {
  background-color: #181A21;
}
.dropdown .popup button[data-v-3e272acf]:active, .dropdown .popup .option-item[data-v-3e272acf]:active {
  background-color: #171718;
}
.dropdown .popup .line[data-v-3e272acf] {
  width: 100%;
  height: 1px;
  background-color: #43464f;
}
.dropdown .noshow[data-v-3e272acf] {
  transform: scale(0);
}
.dropdown .show[data-v-3e272acf] {
  transform: scale(1);
}
.dropdown.theme--2 #btn[data-v-3e272acf] {
  background-color: transparent;
}
.dropdown.theme--2 .option-item[data-v-3e272acf] {
  transition: all 0.5s ease-in-out;
  display: flex;
  flex: 0 0 100%;
  align-items: center;
  justify-content: space-between;
  padding-right: 19px;
}
.dropdown.theme--2 .option-item[data-v-3e272acf]:hover {
  color: var(--color-main);
}
.dropdown.theme--2 .option-item[data-v-3e272acf]:acitve {
  background-color: rgba(56, 62, 76, 0.7);
}
.dropdown.theme--2 .option-item .icon-block[data-v-3e272acf] {
  display: none;
  width: 24px;
  height: 24px;
  color: var(--color-main);
}
.dropdown.theme--2 .option-item .icon-block .icon[data-v-3e272acf] {
  color: var(--color-main);
}
.dropdown.theme--2 .option-item.active[data-v-3e272acf] {
  background-color: #14151a;
}
.dropdown.theme--2 .option-item.active .icon-block[data-v-3e272acf] {
  display: inline-block;
}
.dropdown.theme--3 #btn[data-v-3e272acf] {
  background-color: transparent;
}
.dropdown.theme--3 .popup[data-v-3e272acf] {
  width: 270px;
}
.dropdown.theme--3 .popup .option-item[data-v-3e272acf] {
  display: flex;
  width: 100%;
  align-items: center;
}
.dropdown.theme--4 #btn[data-v-3e272acf] {
  background-color: transparent;
}
.dropdown.theme--4 .popup[data-v-3e272acf] {
  width: 260px;
  max-height: 270px;
  overflow-y: auto;
}
.dropdown.theme--4 .option-item[data-v-3e272acf] {
  transition: all 0.5s ease-in-out;
  display: flex;
  flex: 0 0 100%;
  align-items: center;
  justify-content: space-between;
  padding-right: 19px;
}
.dropdown.theme--4 .option-item[data-v-3e272acf]:hover {
  color: var(--color-main-active);
}
.dropdown.theme--4 .option-item .icon-block[data-v-3e272acf] {
  display: none;
  width: 24px;
  height: 24px;
  color: var(--color-main-active);
}
.dropdown.theme--4 .option-item .icon-block .icon[data-v-3e272acf] {
  color: var(--color-main-active);
}
.dropdown.theme--4 .option-item.active[data-v-3e272acf] {
  background-color: #171718;
}
.dropdown.theme--4 .option-item.active .icon-block[data-v-3e272acf] {
  display: inline-block;
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/components/ui/switcher/switcher.scss?vue&type=style&index=0&id=54ad2cc2&scoped=true&lang=scss&external ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-54ad2cc2]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-54ad2cc2] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-54ad2cc2] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-54ad2cc2 {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-54ad2cc2 {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-54ad2cc2 {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-54ad2cc2 {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-54ad2cc2 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-54ad2cc2 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-54ad2cc2 {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-54ad2cc2 {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-54ad2cc2 {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-54ad2cc2 {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-54ad2cc2 {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-54ad2cc2 {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-54ad2cc2 {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.switcher[data-v-54ad2cc2] {
  display: inline-block;
  width: 72px;
  height: 40px;
}
.switcher .toggle-button-cover[data-v-54ad2cc2] {
  position: relative;
  width: 72px;
  height: 40px;
}
.switcher .button-cover[data-v-54ad2cc2],
.switcher .knobs[data-v-54ad2cc2],
.switcher .layer[data-v-54ad2cc2] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.switcher .button[data-v-54ad2cc2] {
  position: relative;
  width: 60px;
  height: 24px;
  margin: 8px auto 0 auto;
  overflow: hidden;
}
.switcher .button.r[data-v-54ad2cc2],
.switcher .button.r .layer[data-v-54ad2cc2] {
  border-radius: 100px;
}
.switcher .checkbox[data-v-54ad2cc2] {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}
.switcher .knobs[data-v-54ad2cc2] {
  z-index: 2;
}
.switcher .layer[data-v-54ad2cc2] {
  width: 94%;
  border: solid 1px #a7a8ac;
  transition: 0.3s ease all;
  z-index: 1;
}
.switcher[data-v-54ad2cc2] {
  /* Button 1 */
}
.switcher #button-1 .knobs[data-v-54ad2cc2]:before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  top: 7px;
  left: 7px;
  line-height: 1;
  background-color: #a7a8ac;
  border-radius: 50%;
}
.switcher #button-1:hover .knobs[data-v-54ad2cc2]:before {
  background-color: #fff;
}
.switcher #button-1:active .knobs[data-v-54ad2cc2]:before {
  background-color: var(--color-main-dark);
}
.switcher #button-1:hover .layer[data-v-54ad2cc2] {
  border: solid 1px #fff;
}
.switcher #button-1:active .layer[data-v-54ad2cc2] {
  border: solid 1px #EBEBEB;
}
.switcher #button-1 .checkbox:checked + .knobs[data-v-54ad2cc2]:before {
  content: "";
  left: 42px;
  background-color: var(--color-main-light4);
}
.switcher #button-1 .checkbox:checked ~ .layer[data-v-54ad2cc2] {
  border: solid 1px var(--color-main-light5);
  background-color: var(--color-main);
}
.switcher #button-1:hover .checkbox:checked ~ .layer[data-v-54ad2cc2] {
  border: solid 1px var(--color-main-light5);
  background-color: var(--color-main-light3);
}
.switcher #button-1:active .checkbox:checked ~ .layer[data-v-54ad2cc2] {
  background-color: rgba(var(--color-main-light3), 0.7);
}
.switcher #button-1 .knobs[data-v-54ad2cc2],
.switcher #button-1 .knobs[data-v-54ad2cc2]:before,
.switcher #button-1 .layer[data-v-54ad2cc2] {
  transition: 0.3s ease all;
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/components/ui/circlechart/circlechart.scss?vue&type=style&index=0&id=f733ca34&scoped=true&lang=scss&external ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-f733ca34]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-f733ca34] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-f733ca34] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-f733ca34 {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-f733ca34 {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-f733ca34 {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-f733ca34 {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-f733ca34 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-f733ca34 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-f733ca34 {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-f733ca34 {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-f733ca34 {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-f733ca34 {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-f733ca34 {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-f733ca34 {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-f733ca34 {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.connectionstatus[data-v-f733ca34] {
  width: 340px;
  min-height: 434px;
  border-radius: 4px;
  background-color: #181A21;
  display: inline-block;
  vertical-align: top;
}
.connectionstatus .title[data-v-f733ca34] {
  max-width: 100%;
  height: 11px;
  margin: 24px;
  font-family: Roboto;
  font-size: 0.9375rem;
  font-weight: 300;
  text-align: left;
  color: var(--color-main);
}
.connectionstatus .chart[data-v-f733ca34] {
  width: 144px;
  height: 144px;
  margin: 20px 98px;
  margin-bottom: 30px;
  position: relative;
}
.connectionstatus .chart .donut[data-v-f733ca34] {
  width: 170px;
  height: 170px;
  margin: -13px;
  position: absolute;
}
.connectionstatus .chart .donut .donut-segment[data-v-f733ca34] {
  animation: donut1-f733ca34 3s;
}
@keyframes donut1-f733ca34 {
0% {
    stroke-dasharray: 0, 100;
}
50% {
    stroke-dasharray: 100, 0;
}
}
.connectionstatus .chart .total_Ratio[data-v-f733ca34] {
  position: absolute;
  width: 144px;
  margin-top: 40px;
  font-family: Roboto;
  font-size: 1.75rem;
  text-align: center;
  color: var(--color-main);
}
.connectionstatus .chart .total_text[data-v-f733ca34] {
  position: absolute;
  width: 105px;
  height: 28px;
  margin: 0 21.5px;
  margin-top: 80px;
  font-family: Roboto;
  font-size: 0.875rem;
  font-weight: 300;
  text-align: center;
  color: #EBEBEB;
}
.connectionstatus table thead tr th[data-v-f733ca34] {
  padding-left: 5px;
  font-family: Roboto;
  font-size: 0.9375rem;
  font-weight: 300;
  text-align: left;
  color: #a7a8ac;
  position: relative;
}
.connectionstatus table tbody tr td[data-v-f733ca34] {
  line-height: 31px;
  height: 31px;
  font-family: Roboto;
  font-size: 0.9375rem;
  font-weight: 300;
  text-align: left;
  color: #EBEBEB;
}
.connectionstatus table tbody tr td .color[data-v-f733ca34] {
  display: inline-block;
  vertical-align: top;
  width: 8px;
  height: 8px;
  margin-top: 11.5px;
  margin-right: 7px;
  border-radius: 8px;
  background: #CC0000;
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/components/ui/pagination/pagination.scss?vue&type=style&index=0&id=418c5a58&scoped=true&lang=scss&external ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-418c5a58]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-418c5a58] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-418c5a58] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-418c5a58 {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-418c5a58 {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-418c5a58 {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-418c5a58 {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-418c5a58 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-418c5a58 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-418c5a58 {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-418c5a58 {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-418c5a58 {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-418c5a58 {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-418c5a58 {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-418c5a58 {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-418c5a58 {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.ui_pagination[data-v-418c5a58] {
  width: 100%;
}
.ui_pagination .pagination[data-v-418c5a58] {
  display: flex;
  justify-content: space-between;
}
.ui_pagination .pagination .pagination_lists[data-v-418c5a58] {
  width: 100%;
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.ui_pagination .pagination .pagination_lists .pagination_each[data-v-418c5a58] {
  color: #a7a8ac;
  min-width: 32px;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  overflow: hidden;
  background: #151922;
  transition: all 0.2s;
}
.ui_pagination .pagination .pagination_lists .pagination_each[data-v-418c5a58]:hover {
  background: #23242e;
}
.ui_pagination .pagination .pagination_lists .pagination_each[data-v-418c5a58]:active {
  color: var(--color-main);
  background: #2a2f3b;
}
.ui_pagination .pagination .pagination_lists .pagination_each.active[data-v-418c5a58] {
  color: var(--color-main);
  background: #2a2f3b;
}
.ui_pagination .pagination .pagination_lists .pagination_each[data-v-418c5a58]:not(:last-child) {
  margin-right: 1px;
}
.ui_pagination .pagination .pagination_lists .pagination_each[data-v-418c5a58]:first-child {
  border-radius: 3px 0 0 3px;
}
.ui_pagination .pagination .pagination_lists .pagination_each[data-v-418c5a58]:last-child {
  border-radius: 0 3px 3px 0;
}
.ui_pagination .pagination .inputPage[data-v-418c5a58] {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
}
.ui_pagination .pagination .inputPage div[data-v-418c5a58] {
  margin-right: 5px;
}
.ui_pagination input[data-v-418c5a58] {
  text-align: center;
  margin-right: 5px;
  width: 48px;
  height: 32px;
  border-radius: 4px;
  border: solid 1px #333845;
  background-color: #000;
  outline: none;
  color: var(--color-main);
}
.ui_pagination[data-v-418c5a58] {
  /* Chrome, Safari, Edge, Opera */
}
.ui_pagination input[data-v-418c5a58]::-webkit-outer-spin-button,
.ui_pagination input[data-v-418c5a58]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ui_pagination[data-v-418c5a58] {
  /* Firefox */
}
.ui_pagination input[type=number][data-v-418c5a58] {
  -moz-appearance: textfield;
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/components/ui/linebar/linebar.scss?vue&type=style&index=0&id=cafd8a92&scoped=true&lang=scss&external ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-cafd8a92]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-cafd8a92] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-cafd8a92] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-cafd8a92 {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-cafd8a92 {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-cafd8a92 {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-cafd8a92 {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-cafd8a92 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-cafd8a92 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-cafd8a92 {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-cafd8a92 {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-cafd8a92 {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-cafd8a92 {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-cafd8a92 {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-cafd8a92 {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-cafd8a92 {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.linebar[data-v-cafd8a92] {
  width: 692px;
  height: 83px;
}
.linebar svg[data-v-cafd8a92] {
  width: 644px;
  height: 8px;
  border-radius: 8px;
  margin: 0 24px;
  margin-bottom: 24px;
  overflow: hidden;
}
.linebar svg line[data-v-cafd8a92] {
  animation: anima-cafd8a92 2s;
}
@keyframes anima-cafd8a92 {
0% {
    stroke-dasharray: 0, 644;
}
100% {
    stroke-dasharray: 644, 0;
}
}
.linebar .data[data-v-cafd8a92] {
  text-align: center;
}
.linebar .data .info[data-v-cafd8a92] {
  min-width: 115px;
  height: 20px;
  display: inline-block;
  vertical-align: top;
  margin: 0 20px;
}
.linebar .data .info .color[data-v-cafd8a92] {
  display: inline-block;
  vertical-align: top;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  margin-top: 12px;
  margin-right: 13px;
}
.linebar .data .info .number[data-v-cafd8a92] {
  display: inline-block;
  vertical-align: top;
  font-family: Roboto;
  font-size: 1.5rem;
  line-height: 20px;
  margin-top: 2px;
}
.linebar .data .info .text[data-v-cafd8a92] {
  display: inline-block;
  vertical-align: top;
  font-family: Roboto;
  font-size: 0.9375rem;
  margin-left: 5px;
  margin-top: 5px;
  line-height: 20px;
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/components/ui/progressbar/progressbar.scss?vue&type=style&index=0&id=6e4aa69e&scoped=true&lang=scss&external ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-6e4aa69e]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-6e4aa69e] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-6e4aa69e] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-6e4aa69e {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-6e4aa69e {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-6e4aa69e {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-6e4aa69e {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-6e4aa69e {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-6e4aa69e {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-6e4aa69e {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-6e4aa69e {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-6e4aa69e {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-6e4aa69e {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-6e4aa69e {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-6e4aa69e {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-6e4aa69e {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.ui_progressbar .progressbar[data-v-6e4aa69e] {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ui_progressbar .progressbar .progressbar_wrap[data-v-6e4aa69e] {
  width: 100%;
  height: 4px;
  background: #696870;
  overflow: hidden;
  position: relative;
  margin-bottom: 25px;
}
.ui_progressbar .progressbar .progressbar_wrap .progressbar_bar[data-v-6e4aa69e] {
  transform: all 0.4s;
  transition: ease-in-out all 0.4s;
  background: var(--color-main);
  left: 0;
  position: absolute;
  top: 0;
  height: 100%;
  width: 200px;
}
.ui_progressbar .progressbar .progressbar_text[data-v-6e4aa69e] {
  font-size: 1.25rem;
  color: var(--color-main);
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/components/ui/collapsemutiselect/collapsemutiselect.scss?vue&type=style&index=0&id=471cb584&scoped=true&lang=scss&external ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-471cb584]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-471cb584] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-471cb584] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-471cb584 {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-471cb584 {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-471cb584 {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-471cb584 {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-471cb584 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-471cb584 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-471cb584 {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-471cb584 {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-471cb584 {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-471cb584 {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-471cb584 {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-471cb584 {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-471cb584 {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.ui_collapsemutiselect[data-v-471cb584] {
  box-sizing: border-box;
  position: relative;
}
.ui_collapsemutiselect .detailInfo[data-v-471cb584] {
  position: absolute;
  border-radius: 8px;
  box-shadow: 0px 8px 16px 0 rgba(0, 0, 0, 0.2);
  width: inherit;
  z-index: 100;
  transition: all linear 0.2s;
}
.ui_collapsemutiselect .detailInfo > div[data-v-471cb584] {
  margin: 10px;
}
.ui_collapsemutiselect .detailInfo.noshow[data-v-471cb584] {
  transform: scale(0);
  background-color: transparent;
}
.ui_collapsemutiselect .detailInfo.show[data-v-471cb584] {
  transform: scale(1);
  background-color: #111116;
}
.ui_collapsemutiselect .collapsemutiselect[data-v-471cb584] {
  width: 1128px;
  height: 120px;
  border-radius: 6px;
  border: #a7a8ac dashed 1px;
  overflow: hidden;
  position: relative;
  transition: all 0.2s linear;
  background-color: #111112;
  z-index: 1;
}
.ui_collapsemutiselect .collapsemutiselect.border[data-v-471cb584] {
  border: #a7a8ac solid 1px;
}
.ui_collapsemutiselect .collapsemutiselect.height132[data-v-471cb584] {
  height: 132px;
}
.ui_collapsemutiselect .collapsemutiselect.heightAuto[data-v-471cb584] {
  padding-bottom: 20px;
  height: auto;
  max-height: 9999px;
}
.ui_collapsemutiselect .collapsemutiselect .collapsemutiselect_singleAdd[data-v-471cb584] {
  cursor: pointer;
  height: inherit;
  font-size: 0.9375rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
.ui_collapsemutiselect .collapsemutiselect .collapsemutiselect_dropdown[data-v-471cb584] {
  width: 100%;
  position: absolute;
  bottom: 0;
  background: #111112;
  display: flex;
  justify-content: center;
  padding-bottom: 5px;
  z-index: 2;
}
.ui_collapsemutiselect .collapsemutiselect .collapsemutiselect_dropdown .singleAdd_icon[data-v-471cb584] {
  cursor: pointer;
  margin: 0 auto;
}
.ui_collapsemutiselect .collapsemutiselect .collapsemutiselect_multiAdd[data-v-471cb584] {
  margin: 15px 24px;
}
.ui_collapsemutiselect .collapsemutiselect .collapsemutiselect_multiAdd .collapsemutiselect_header[data-v-471cb584] {
  display: flex;
  justify-content: space-between;
  align-content: center;
}
.ui_collapsemutiselect .collapsemutiselect .collapsemutiselect_multiAdd .collapsemutiselect_header .collapsemutiselect_header_title[data-v-471cb584] {
  color: #a7a8ac;
  font-size: 0.9375rem;
  align-self: center;
}
.ui_collapsemutiselect .collapsemutiselect .collapsemutiselect_multiAdd .collapsemutiselect_header .multiAdd_btn .btn-item.btn-item.btn-default.color--main.type--border.theme--1[data-v-471cb584] {
  border: darkkhaki solid 1px;
  display: flex;
}
.ui_collapsemutiselect .collapsemutiselect .collapsemutiselect_multiAdd .collapsemutiselect_list[data-v-471cb584] {
  margin-top: 5px;
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
}
.ui_collapsemutiselect .collapsemutiselect .collapsemutiselect_multiAdd .collapsemutiselect_list .list_name[data-v-471cb584] {
  width: 167px;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 0.9375rem;
  background: #272932;
  border: #272932 solid 1px;
  padding: 8px 0;
  text-align: center;
  border-radius: 4px;
  margin: 12px 10px 0px 0px;
}
.ui_collapsemutiselect .collapsemutiselect .collapsemutiselect_multiAdd .collapsemutiselect_list .dashEmpty[data-v-471cb584] {
  border: #a7a8ac dashed 1px;
  background: transparent;
  cursor: unset;
}
.ui_collapsemutiselect .collapsemutiselect .singleAdd_icon[data-v-471cb584] {
  margin-right: 15px;
  width: 20px;
  height: 20px;
  transition: all linear 0.4s;
}
.ui_collapsemutiselect .collapsemutiselect .singleAdd_icon.rotate_180[data-v-471cb584] {
  transform: rotate(-180deg);
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/components/ui/cardinfo/cardinfo.scss?vue&type=style&index=0&id=19a4ca3c&scoped=true&lang=scss&external ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-19a4ca3c]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-19a4ca3c] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-19a4ca3c] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-19a4ca3c {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-19a4ca3c {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-19a4ca3c {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-19a4ca3c {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-19a4ca3c {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-19a4ca3c {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-19a4ca3c {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-19a4ca3c {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-19a4ca3c {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-19a4ca3c {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-19a4ca3c {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-19a4ca3c {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-19a4ca3c {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.ui_cardinfo .cardinfo[data-v-19a4ca3c] {
  height: 184px;
  border-radius: 8px;
  background-color: #10121A;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.ui_cardinfo .cardinfo .cardinfo_pic[data-v-19a4ca3c] {
  flex-shrink: 0;
  width: 240px;
  background: #090B11;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ui_cardinfo .cardinfo .cardinfo_pic .cardinfo_pic_box[data-v-19a4ca3c] {
  height: 184px;
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
}
.ui_cardinfo .cardinfo .cardinfo_pic .cardinfo_pic_box img[data-v-19a4ca3c] {
  height: 100%;
}
.ui_cardinfo .cardinfo .cardinfo_info[data-v-19a4ca3c] {
  width: 100%;
}
.ui_cardinfo .cardinfo .cardinfo_btn[data-v-19a4ca3c] {
  flex-shrink: 0;
  width: 180px;
  border-left: solid 1px #43464f;
  margin: 44px 0 44px 0;
  padding: 0 42px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/components/ui/actionbar/actionbar.scss?vue&type=style&index=0&id=7e9e6c75&scoped=true&lang=scss&external ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-7e9e6c75]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-7e9e6c75] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-7e9e6c75] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-7e9e6c75 {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-7e9e6c75 {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-7e9e6c75 {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-7e9e6c75 {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-7e9e6c75 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-7e9e6c75 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-7e9e6c75 {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-7e9e6c75 {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-7e9e6c75 {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-7e9e6c75 {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-7e9e6c75 {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-7e9e6c75 {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-7e9e6c75 {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.ui_actionbar[data-v-7e9e6c75] {
  position: relative;
}
.ui_actionbar .actionbar .actionbar_list[data-v-7e9e6c75] {
  display: flex;
}
.ui_actionbar .actionbar .actionbar_list .actionbar_each[data-v-7e9e6c75] {
  cursor: pointer;
  width: 56px;
  height: 42px;
  overflow: hidden;
  background: #333845;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: ease-in-out 0.1s all;
}
.ui_actionbar .actionbar .actionbar_list .actionbar_each[data-v-7e9e6c75]:hover {
  background: #2a2f3b;
}
.ui_actionbar .actionbar .actionbar_list .actionbar_each:hover .actionbar_icon > .actionbar_svg[data-v-7e9e6c75] {
  color: var(--color-main-active);
}
.ui_actionbar .actionbar .actionbar_list .actionbar_each[data-v-7e9e6c75]:active {
  background: #222634;
}
.ui_actionbar .actionbar .actionbar_list .actionbar_each:active .actionbar_icon > .actionbar_svg[data-v-7e9e6c75] {
  color: var(--color-main);
}
.ui_actionbar .actionbar .actionbar_list .actionbar_each.disabled[data-v-7e9e6c75] {
  cursor: not-allowed;
  background: #333845;
}
.ui_actionbar .actionbar .actionbar_list .actionbar_each.disabled .actionbar_icon > .actionbar_svg[data-v-7e9e6c75] {
  color: #a7a8ac;
}
.ui_actionbar .actionbar .actionbar_list .actionbar_each[data-v-7e9e6c75]:first-child {
  border-radius: 6px 0 0 6px;
}
.ui_actionbar .actionbar .actionbar_list .actionbar_each[data-v-7e9e6c75]:not(:last-child) {
  margin-right: 1px;
}
.ui_actionbar .actionbar .actionbar_list .actionbar_each[data-v-7e9e6c75]:last-child {
  border-radius: 0 6px 6px 0;
}
.ui_actionbar .actionbar .actionbar_list .actionbar_each .actionbar_icon[data-v-7e9e6c75] {
  width: 24px;
  height: 24px;
}
.ui_actionbar .actionbar .actionbar_list .actionbar_each .actionbar_icon .actionbar_svg[data-v-7e9e6c75] {
  color: white;
}
.ui_actionbar .tooltips[data-v-7e9e6c75] {
  position: absolute;
  top: 20px;
  width: 120px;
  text-align: center;
  border-radius: 4px;
  box-shadow: 0px 1px 6px 0 #000;
  border: solid 1px #333845;
  background-color: #000;
  z-index: 100;
  transition: all linear 0.2s;
}
.ui_actionbar .tooltips > div[data-v-7e9e6c75] {
  margin: 10px;
}
.ui_actionbar .tooltips.noshow[data-v-7e9e6c75] {
  transform: scale(0);
  background-color: transparent;
}
.ui_actionbar .tooltips.show[data-v-7e9e6c75] {
  transform: scale(1);
  background-color: #111116;
}
/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/components/ui/tableinfo/tableinfo.scss?vue&type=style&index=0&id=48297dd8&scoped=true&lang=scss&external ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-48297dd8]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-48297dd8] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-48297dd8] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-48297dd8 {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-48297dd8 {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-48297dd8 {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-48297dd8 {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-48297dd8 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-48297dd8 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-48297dd8 {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-48297dd8 {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-48297dd8 {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-48297dd8 {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-48297dd8 {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-48297dd8 {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-48297dd8 {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.ui_tableinfo .tableinfo[data-v-48297dd8] {
  border-radius: 4px;
  height: 84px;
  background-color: #111112;
  padding: 24px;
  margin: 2px;
}
.ui_tableinfo .tableinfo .tableinfo_box[data-v-48297dd8] {
  height: 100%;
  display: flex;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
}
.ui_tableinfo .tableinfo .tableinfo_box table.tableinfo_each[data-v-48297dd8] {
  table-layout: fixed;
  width: 100%;
}
.ui_tableinfo .tableinfo .tableinfo_box table.tableinfo_each thead tr td.hasBorder[data-v-48297dd8] {
  padding: 10px 0px;
  color: #a7a8ac;
  text-align: center;
}
.ui_tableinfo .tableinfo .tableinfo_box table.tableinfo_each thead tr td.hasBorder[data-v-48297dd8]:not(:last-child) {
  border-right: #43464f solid 1px;
}
.ui_tableinfo .tableinfo .tableinfo_box table.tableinfo_each tbody tr td.hasBorder[data-v-48297dd8] {
  color: var(--color-main);
  text-align: center;
}
.ui_tableinfo .tableinfo .tableinfo_box table.tableinfo_each tbody tr td.hasBorder[data-v-48297dd8]:not(:last-child) {
  border-right: #43464f solid 1px;
}
.ui_tableinfo .tableinfo .tableinfo_box .custom[data-v-48297dd8] {
  min-width: 45%;
  display: flex;
  justify-content: end;
}
.ui_tableinfo .tableinfo .tableinfo_box .custom.style--wd-md[data-v-48297dd8] {
  min-width: 200px;
}
.ui_tableinfo .tableinfo .tableinfo_box .custom.style--wd-mx-x[data-v-48297dd8] {
  min-width: 180px;
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/components/ui/contentgroup/contentgroup.scss?vue&type=style&index=0&id=041ba6b8&scoped=true&lang=scss&external ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-041ba6b8]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-041ba6b8] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-041ba6b8] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-041ba6b8 {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-041ba6b8 {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-041ba6b8 {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-041ba6b8 {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-041ba6b8 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-041ba6b8 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-041ba6b8 {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-041ba6b8 {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-041ba6b8 {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-041ba6b8 {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-041ba6b8 {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-041ba6b8 {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-041ba6b8 {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.ui_contentgroup[data-v-041ba6b8] {
  height: 184px;
}
.ui_contentgroup .contentgroup[data-v-041ba6b8] {
  padding: 28px 35px;
}
.ui_contentgroup .contentgroup .contentgroup_top[data-v-041ba6b8] {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ui_contentgroup .contentgroup .contentgroup_top .contentgroup_title[data-v-041ba6b8] {
  display: flex;
  align-items: center;
}
.ui_contentgroup .contentgroup .contentgroup_top .contentgroup_title[data-v-041ba6b8] {
  font-size: 1.25rem;
}
.ui_contentgroup .contentgroup .contentgroup_top .contentgroup_title .titleType[data-v-041ba6b8] {
  color: #fff;
  border-right: solid 1px #a7a8ac;
  padding-right: 7px;
}
.ui_contentgroup .contentgroup .contentgroup_top .contentgroup_title .title[data-v-041ba6b8] {
  color: var(--color-main);
}
.ui_contentgroup .contentgroup .contentgroup_top .contentgroup_date[data-v-041ba6b8] {
  font-size: 0.875rem;
}
.ui_contentgroup .contentgroup .contentgroup_bottom[data-v-041ba6b8] {
  margin-top: 30px;
}
.ui_contentgroup .contentgroup .contentgroup_bottom .contentgroup_cellBlock[data-v-041ba6b8] {
  min-height: 54px;
}
.ui_contentgroup .contentgroup .contentgroup_bottom .contentgroup_cellBlock[data-v-041ba6b8]:not(:first-child) {
  padding-left: 24px;
  border-left: solid 1px white;
}
.ui_contentgroup .contentgroup .contentgroup_bottom .contentgroup_cellBlock[data-v-041ba6b8] {
  flex-grow: 1;
}
.ui_contentgroup .contentgroup .contentgroup_bottom .contentgroup_cellBlock:last-child .mini_title[data-v-041ba6b8] {
  margin-bottom: 15px;
}
.ui_contentgroup .contentgroup .contentgroup_bottom .contentgroup_cellBlock .mini_title[data-v-041ba6b8] {
  color: #a7a8ac;
  font-size: 0.9375rem;
  margin: 0 0 6px 0;
}
.ui_contentgroup .contentgroup .contentgroup_bottom .contentgroup_cellBlock .mini_text[data-v-041ba6b8] {
  color: var(--color-main);
  font-size: 2.25rem;
}
.ui_contentgroup .contentgroup .contentgroup_bottom .contentgroup_cellBlock .mini_text .fulfill[data-v-041ba6b8] {
  color: #30313e;
}
.ui_contentgroup .contentgroup .contentgroup_bottom .contentgroup_cellBlock .mini_title_white[data-v-041ba6b8] {
  color: white;
  margin: unset;
}
.ui_contentgroup .contentgroup .contentgroup_bottom .contentgroup_cellBlock .mini_text_24[data-v-041ba6b8] {
  font-size: 1.5rem;
}
.ui_contentgroup .iconBlock[data-v-041ba6b8] {
  position: relative;
}
.ui_contentgroup .iconBlock .clickSelect[data-v-041ba6b8] {
  font-size: 0.875rem;
  border-radius: 4px;
  border: solid 1px #a7a8ac;
  background-color: var(--color-grey-dark-1);
  display: flex;
  justify-content: space-between;
  padding: 5px 12px;
  cursor: pointer;
}
.ui_contentgroup .iconBlock .icon[data-v-041ba6b8] {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
  width: 25px;
  height: 25px;
  margin: 2px 14px;
  color: var(--color-main);
}
.ui_contentgroup .iconBlock .iconArrow[data-v-041ba6b8] {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
  width: 16px;
  height: 16px;
  margin: 2px 0px 2px 40px;
  color: #EBEBEB;
  transition: all 0.2s linear;
}
.ui_contentgroup .iconBlock .iconArrow.iconshow[data-v-041ba6b8] {
  transform: rotate(180deg);
}
.ui_contentgroup hr[data-v-041ba6b8] {
  border: none;
  border-top: solid 1px #43464f;
}
.ui_contentgroup .contentgroup_littleModal[data-v-041ba6b8] {
  margin-top: 4px;
  font-size: 0.9375rem;
  position: absolute;
  right: 0;
  width: 240px;
  border-radius: 4px;
  box-shadow: 0px 1px 6px 0 #000;
  border: solid 1px #43464f;
  background-color: #22242e;
  z-index: 10;
  transition: 0.5s;
}
.ui_contentgroup .contentgroup_littleModal.noshow[data-v-041ba6b8] {
  transform: scale(0);
}
.ui_contentgroup .contentgroup_littleModal.show[data-v-041ba6b8] {
  transform: scale(1);
}
.ui_contentgroup .contentgroup_littleModal .contentgroup_setting_menu[data-v-041ba6b8]:hover {
  background-color: #383e4c;
}
.ui_contentgroup .contentgroup_littleModal .contentgroup_setting_menu[data-v-041ba6b8]:active {
  background-color: #2d3341;
}
.ui_contentgroup .contentgroup_littleModal .contentgroup_setting_menu[data-v-041ba6b8] {
  cursor: pointer;
}
.ui_contentgroup .contentgroup_littleModal .contentgroup_setting_menu .isShow[data-v-041ba6b8] {
  padding: 15px 20px 15px 20px;
  cursor: pointer;
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/components/ui/timer/timer.scss?vue&type=style&index=0&id=3ccf9e1d&scoped=true&lang=scss&external ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-3ccf9e1d]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-3ccf9e1d] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-3ccf9e1d] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-3ccf9e1d {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-3ccf9e1d {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-3ccf9e1d {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-3ccf9e1d {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-3ccf9e1d {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-3ccf9e1d {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-3ccf9e1d {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-3ccf9e1d {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-3ccf9e1d {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-3ccf9e1d {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-3ccf9e1d {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-3ccf9e1d {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-3ccf9e1d {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.ui-timer[data-v-3ccf9e1d] {
  font-size: 0.9375rem;
  color: #a7a8ac;
  display: inline-block;
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/components/ui/flashMsg/flashMsg.scss?vue&type=style&index=0&id=43f0a82f&scoped=true&lang=scss&external ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-43f0a82f]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-43f0a82f] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-43f0a82f] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-43f0a82f {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-43f0a82f {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-43f0a82f {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-43f0a82f {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-43f0a82f {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-43f0a82f {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-43f0a82f {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-43f0a82f {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-43f0a82f {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-43f0a82f {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-43f0a82f {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-43f0a82f {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-43f0a82f {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.ui-flash-msg[data-v-43f0a82f] {
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 1003;
  display: inline-flex;
  background-color: #000;
  padding: 18px 16px;
  box-sizing: border-box;
  max-width: 300px;
  width: 100%;
  min-height: 72px;
  align-items: center;
  justify-content: center;
  font-size: 0.9375rem;
  box-shadow: 0px 1px 6px 0 #000;
  color: #EBEBEB;
  border: solid 1px #30313e;
}
.slide-fade-enter-active[data-v-43f0a82f] {
  transition: all 0.3s ease-out;
}
.slide-fade-leave-active[data-v-43f0a82f] {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter-from[data-v-43f0a82f],
.slide-fade-leave-to[data-v-43f0a82f] {
  transform: translateY(20px);
  opacity: 0;
}
.fadeIn-enter-active[data-v-43f0a82f] {
  animation: fadeIn-in-43f0a82f 3.5s 0.4s cubic-bezier(0.32, 1.75, 0.65, 0.91);
}
.fadeIn-leave-active[data-v-43f0a82f] {
  animation: fadeIn-in-43f0a82f 3.5s 0.4s cubic-bezier(0.32, 1.75, 0.65, 0.91);
}
@keyframes fadeIn-in-43f0a82f {
0% {
    opacity: 0;
    visibility: visible;
    transform: translate3d(0, -200%, 0);
}
12% {
    transform: translate3d(0, 0, 0);
}
20% {
    opacity: 1;
}
70% {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
}
80% {
    opacity: 0;
}
100% {
    visibility: hidden;
    transform: translate3d(25%, 0, 0);
}
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/components/ui/loading/loading.scss?vue&type=style&index=0&id=149db7d8&scoped=true&lang=scss&external ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-149db7d8]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-149db7d8] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-149db7d8] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-149db7d8 {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-149db7d8 {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-149db7d8 {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-149db7d8 {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-149db7d8 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-149db7d8 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-149db7d8 {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-149db7d8 {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-149db7d8 {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-149db7d8 {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-149db7d8 {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-149db7d8 {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-149db7d8 {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.ui-loading[data-v-149db7d8] {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  left: 0;
  top: 0;
  z-index: 1002;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.ui-loading .container[data-v-149db7d8] {
  width: 100%;
  display: block;
  color: var(--color-main-light3);
  flex-grow: 0;
  text-align: center;
}
.ui-loading .text[data-v-149db7d8] {
  display: block;
  width: 100%;
  flex-grow: 0;
  color: #EBEBEB;
  margin-top: 23px;
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/components/ui/multiselect/multiselect.scss?vue&type=style&index=0&id=011536e6&scoped=true&lang=scss&external ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-011536e6]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-011536e6] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-011536e6] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-011536e6 {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-011536e6 {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-011536e6 {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-011536e6 {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-011536e6 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-011536e6 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-011536e6 {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-011536e6 {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-011536e6 {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-011536e6 {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-011536e6 {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-011536e6 {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-011536e6 {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.multiselect[data-v-011536e6] {
  position: relative;
  display: flex;
}
.multiselect[data-v-011536e6] ::-webkit-scrollbar {
  width: 5px;
  border-radius: 10px;
}
.multiselect[data-v-011536e6] ::-webkit-scrollbar-thumb {
  background-color: var(--color-main);
  border-radius: 10px;
}
.multiselect:hover .select-block[data-v-011536e6], .multiselect:active .select-block[data-v-011536e6] {
  border-color: var(--color-main);
}
.multiselect.active .select-block[data-v-011536e6]::after {
  border: solid #73747b;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 5px;
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  margin-top: 3px;
}
.multiselect.style--error .select-block[data-v-011536e6] {
  border-color: #CC0000;
}
.multiselect.style--error .select-block[data-v-011536e6]::after {
  border: solid #CC0000;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 5px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.multiselect.style--error.active .select-block[data-v-011536e6]::after {
  border: solid #CC0000;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 5px;
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}
.multiselect.style--disable[data-v-011536e6] {
  pointer-events: none;
}
.multiselect.style--disable .select-block[data-v-011536e6] {
  pointer-events: none;
  border-color: rgba(167, 168, 172, 0.2);
}
.multiselect.style--disable .select-block[data-v-011536e6]::after {
  border: solid rgba(167, 168, 172, 0.2);
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 5px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.multiselect.style--disable .select-block .selected-text[data-v-011536e6] {
  color: rgba(167, 168, 172, 0.2);
}
.multiselect.style--disable.active .select-block[data-v-011536e6]::after {
  border: solid rgba(167, 168, 172, 0.2);
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 5px;
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}
.multiselect.style--disable.active .select-block .selected-text[data-v-011536e6] {
  color: rgba(167, 168, 172, 0.2);
}
.multiselect.style--xl .select-block[data-v-011536e6] {
  height: 56px;
}
.multiselect .select-block[data-v-011536e6] {
  display: flex;
  width: 100%;
  align-items: center;
  height: 42px;
  border: 1px solid #73747b;
  box-sizing: border-box;
  padding: 0 24px;
  border-radius: 6px;
  position: relative;
  cursor: pointer;
  transition: border-color 0.5s;
}
.multiselect .select-block[data-v-011536e6]::after {
  transition: all 0.5s;
  content: " ";
  display: inline-block;
  margin-top: -2px;
  border: solid #73747b;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 5px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.multiselect .select-block .selected-text[data-v-011536e6] {
  display: block;
  width: 100%;
  text-decoration: none;
  color: #EBEBEB;
}
.multiselect .select-block div[data-v-011536e6] {
  position: absolute;
  top: 40px;
  margin-top: 10px;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
  left: 0;
}
.multiselect .select-block div.erroSpan[data-v-011536e6] {
  color: #CC0000;
}
.multiselect .select-list-block[data-v-011536e6] {
  transition: border-color 0.5s;
  display: inline-block;
  width: 100%;
  border-radius: 6px;
  border: 1px solid #73747b;
  max-height: 200px;
  overflow-y: auto;
  scroll-padding: 50px 0 0 50px;
  position: absolute;
  top: 52px;
  background-color: #111112;
  z-index: 40;
}
.multiselect .select-list-block .option[data-v-011536e6] {
  padding: 15px 24px;
  display: flex;
  justify-content: start;
  align-items: center;
  cursor: pointer;
}
.multiselect .select-list-block .option .text[data-v-011536e6] {
  display: block;
  text-decoration: none;
  color: #EBEBEB;
  transition: background-color 0.5s;
}
.multiselect .select-list-block .option .text.style--title[data-v-011536e6] {
  opacity: 0.65;
  color: #EBEBEB;
  pointer-events: none;
}
.multiselect .select-list-block .option:hover .text[data-v-011536e6] {
  color: var(--color-main);
}
.multiselect .select-list-block .option[data-v-011536e6]:hover {
  background-color: #383e4c;
}
.multiselect .select-list-block .option:hover .checkmark-block[data-v-011536e6] {
  border: solid 1px #EBEBEB;
}
.multiselect .select-list-block .option:active .text[data-v-011536e6] {
  color: var(--color-main);
}
.multiselect .select-list-block .option[data-v-011536e6]:active {
  background-color: #2d3341;
}
.multiselect .select-list-block .option .padding[data-v-011536e6] {
  padding-left: 20px;
}
.textLimit[data-v-011536e6] {
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  overflow: hidden;
}
.checkmark-block[data-v-011536e6] {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  width: 16px;
  height: 16px;
  border: 1px solid #a7a8ac;
  font-size: 1.125rem;
  margin-top: 1px;
  border-radius: 2px;
  flex-shrink: 0;
  transition: all 0.1s linear;
}
.checkmark-block[data-v-011536e6] * {
  display: none;
}
.checkmark-block .checkmark[data-v-011536e6] {
  display: inline-block;
  width: 100%;
  height: 100%; /* IE 9 */ /* Chrome, Safari, Opera */
  transform: rotate(45deg) scale(1.2);
}
.checkmark-block .checkmark_stem[data-v-011536e6] {
  position: absolute;
  width: 2px;
  height: 11px;
  background-color: #a7a8ac;
  left: 8px;
  top: 1px;
}
.checkmark-block .checkmark_kick[data-v-011536e6] {
  position: absolute;
  width: 6px;
  height: 2px;
  background-color: #a7a8ac;
  left: 4px;
  top: 10px;
}
.checkmark-block.check .checkmark_stem[data-v-011536e6] {
  background-color: #111112;
}
.checkmark-block.check .checkmark_kick[data-v-011536e6] {
  background-color: #111112;
}
.checkmark-block.check[data-v-011536e6] {
  border-color: var(--color-main);
  background-color: var(--color-main);
}
.checkmark-block.check[data-v-011536e6] * {
  display: inline-block;
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/components/ui/datePicker/datePicker.scss?vue&type=style&index=0&id=6268a21a&scoped=true&lang=scss&external ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-6268a21a]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-6268a21a] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-6268a21a] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-6268a21a {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-6268a21a {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-6268a21a {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-6268a21a {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-6268a21a {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-6268a21a {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-6268a21a {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-6268a21a {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-6268a21a {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-6268a21a {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-6268a21a {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-6268a21a {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-6268a21a {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.date-picker .erroSpan[data-v-6268a21a] {
  color: #CC0000;
  margin-top: 4px;
}
.datePicker-footer[data-v-6268a21a] {
  padding: 17px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.datePicker-footer .timeBlock[data-v-6268a21a] {
  flex-shrink: 0;
  display: flex;
}
.datePicker-footer .timeBlock div[data-v-6268a21a] {
  display: flex;
}
.datePicker-footer .timeBlock div[data-v-6268a21a] :not(last-child) {
  margin-right: 12px;
}
.datePickerButtonBlock[data-v-6268a21a] {
  width: 100%;
}
.datePickerButtonBlock .buttonEach[data-v-6268a21a] {
  display: inline-block;
  flex-shrink: 0;
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/components/ui/UiDemo/UiDemo.scss?vue&type=style&index=0&id=721b2eb5&scoped=true&lang=scss&external ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-721b2eb5]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-721b2eb5] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-721b2eb5] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-721b2eb5 {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-721b2eb5 {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-721b2eb5 {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-721b2eb5 {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-721b2eb5 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-721b2eb5 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-721b2eb5 {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-721b2eb5 {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-721b2eb5 {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-721b2eb5 {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-721b2eb5 {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-721b2eb5 {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-721b2eb5 {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.ui-demo[data-v-721b2eb5] {
  min-height: 100vh;
  width: 100%;
  color: #fff;
  box-sizing: border-box;
  padding: 30px 20px;
}
.ui-demo .page-link-block[data-v-721b2eb5] {
  table-layout: fixed;
  width: 100%;
  max-width: 100%;
}
.ui-demo .page-link-block .wd-long[data-v-721b2eb5] {
  width: 40%;
}
.ui-demo .page-link-block .wd-sm[data-v-721b2eb5] {
  width: 30%;
}
.ui-demo .page-link-block .wd-num[data-v-721b2eb5] {
  width: 80px;
}
.ui-demo .page-link-block .title-link[data-v-721b2eb5] {
  font-size: 1rem;
  color: #444;
  font-weight: bold;
}
.ui-demo .page-link-block th[data-v-721b2eb5] {
  text-align: center;
  background-color: #d8d8d8;
  border: 1px solid grey;
}
.ui-demo .page-link-block td[data-v-721b2eb5] {
  padding: 5px;
  border: 1px solid grey;
}
.ui-demo .title-block[data-v-721b2eb5] {
  text-align: center;
}
.ui-demo .title-block .title--main[data-v-721b2eb5] {
  color: #fff;
  font-size: 36px;
  letter-spacing: 1.4px;
  font-weight: bold;
}
.ui-demo .title--sub[data-v-721b2eb5] {
  color: var(--color-main);
  font-size: 20px;
  letter-spacing: 1.4px;
  font-weight: bold;
  margin-top: 50px;
  margin-bottom: 20px;
  position: relative;
}
.ui-demo .title--sub[data-v-721b2eb5]:after {
  content: " ";
  display: inline-block;
  width: 20px;
  height: 1px;
  background-color: var(--color-main);
  position: absolute;
  bottom: -2px;
  left: 0;
}
.ui-demo .title--third[data-v-721b2eb5] {
  color: #7da7d9;
  font-size: 1rem;
  padding: 0 0 0 16px;
  margin-bottom: 20px;
  margin-top: 30px;
  position: relative;
  display: block;
}
.ui-demo .title--third[data-v-721b2eb5]:after {
  content: "*";
  display: inline-block;
  position: absolute;
  left: 0;
  top: 59%;
  transform: translateY(-50%);
  color: #7da7d9;
}
.ui-demo .demo-layout-block[data-v-721b2eb5] {
  max-width: 1200px;
  width: 100%;
  text-align: left;
  margin: 0 auto;
}
.ui-demo .select-block[data-v-721b2eb5] {
  max-width: 280px;
  width: 100%;
}
#drop1[data-v-721b2eb5] {
  margin-left: 20px;
}
#drop2[data-v-721b2eb5] {
  margin-left: 20px;
}
.tempModalData[data-v-721b2eb5] {
  display: flex;
}
.tempModalData > .tempModalData_each[data-v-721b2eb5] {
  cursor: pointer;
  border: solid 1px var(--color-main);
  border-radius: 5px;
  padding: 5px 10px;
  margin: 10px 5px;
  transition: all 0.2s ease-in-out;
}
.tempModalData > .tempModalData_each[data-v-721b2eb5]:hover {
  box-shadow: 5px 3px 3px #090B11;
  background: var(--color-main);
  color: #43464f;
}
.datePicker[data-v-721b2eb5] {
  width: 254px;
}
.datePicker-footer[data-v-721b2eb5] {
  padding: 17px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.datePicker-footer .timeBlock[data-v-721b2eb5] {
  flex-shrink: 0;
  display: flex;
}
.datePicker-footer .timeBlock div[data-v-721b2eb5] {
  display: flex;
}
.datePicker-footer .timeBlock div[data-v-721b2eb5] :not(last-child) {
  margin-right: 12px;
}
.datePickerButtonBlock[data-v-721b2eb5] {
  width: 100%;
}
.datePickerButtonBlock .buttonEach[data-v-721b2eb5] {
  display: inline-block;
  flex-shrink: 0;
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/view/dashboard/dashboard/dashboard.scss?vue&type=style&index=0&id=06819a4b&scoped=true&lang=scss&external ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-06819a4b]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-06819a4b] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-06819a4b] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-06819a4b {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-06819a4b {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-06819a4b {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-06819a4b {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-06819a4b {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-06819a4b {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-06819a4b {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-06819a4b {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-06819a4b {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-06819a4b {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-06819a4b {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-06819a4b {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-06819a4b {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.dashboard[data-v-06819a4b] {
  min-width: calc(1200px - 24px - 2px - 20px - 20px - 4px);
  padding: 0 20px;
}
.dashboard .ui_l[data-v-06819a4b] {
  margin-top: 50px;
  width: 692px;
  height: auto;
  display: inline-block;
  vertical-align: top;
}
.dashboard .ui_l .devices[data-v-06819a4b] {
  width: 100%;
  height: 56px;
}
.dashboard .ui_l .devices .select[data-v-06819a4b] {
  height: 56px;
  width: 100%;
}
.dashboard .ui_l .devices .select .select-block[data-v-06819a4b] {
  height: 100%;
}
.dashboard .ui_l .Status[data-v-06819a4b] {
  margin-top: 8px;
  display: flex;
}
.dashboard .ui_l .Status .Calibration[data-v-06819a4b] {
  margin-left: 12px;
}
.dashboard .ui_l .text_chart[data-v-06819a4b] {
  width: 100%;
}
.dashboard .ui_l .text_chart .chart[data-v-06819a4b] {
  display: inline-block;
  vertical-align: top;
  width: 340px;
  height: 132px;
  background-color: #181A21;
  border-radius: 4px;
  margin-top: 12px;
}
.dashboard .ui_l .text_chart .chart .title[data-v-06819a4b] {
  height: 59px;
  font-family: Roboto;
  font-size: 0.9375rem;
  font-weight: 300;
  color: var(--color-main);
  line-height: 59px;
  margin-left: 24px;
}
.dashboard .ui_l .text_chart .chart .value[data-v-06819a4b] {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  height: 73px;
}
.dashboard .ui_l .text_chart .chart .value .val[data-v-06819a4b] {
  height: 26px;
  line-height: 26px;
  font-family: Roboto;
  font-size: 2.25rem;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  text-align: center;
  color: #EBEBEB;
  margin-top: 3px;
}
.dashboard .ui_l .text_chart .chart .value .name[data-v-06819a4b] {
  height: 14px;
  font-family: Roboto;
  font-size: 0.9375rem;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: 14px;
  letter-spacing: normal;
  text-align: center;
  color: #a7a8ac;
  margin-top: 9px;
}
.dashboard .ui_l .text_chart .chart .large[data-v-06819a4b] {
  width: 100%;
}
.dashboard .ui_l .text_chart .n2[data-v-06819a4b] {
  margin-left: 12px;
}
.dashboard .ui_l .line_chart[data-v-06819a4b] {
  width: 692px;
  height: 208px;
  margin-top: 12px;
  border-radius: 4px;
  background-color: #181A21;
}
.dashboard .ui_l .line_chart .title[data-v-06819a4b] {
  height: 61px;
  font-family: Roboto;
  font-size: 0.9375rem;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: 61px;
  letter-spacing: normal;
  text-align: left;
  color: var(--color-main);
  margin-left: 24px;
}
.dashboard .ui_l .line_chart .content_flex[data-v-06819a4b] {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.dashboard .ui_l .line_chart .content_flex .content[data-v-06819a4b] {
  flex-shrink: 0;
  display: inline-block;
  vertical-align: top;
  margin-right: 28px;
  height: 28px;
  line-height: 28px;
  margin-left: 23px;
  font-family: Roboto;
  font-size: 0.9375rem;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  text-align: left;
  color: #EBEBEB;
}
.dashboard .ui_l .line_chart .content_flex .btn[data-v-06819a4b] {
  min-width: 85px;
  width: auto;
  vertical-align: top;
  height: 28px;
  margin-right: 24px;
}
.dashboard .ui_l .line_chart .bar[data-v-06819a4b] {
  margin-top: 40px;
}
.dashboard .ui_r[data-v-06819a4b] {
  margin-top: 50px;
  width: 412px;
  height: 862px;
  margin-left: 24px;
  background-color: #181A21;
  border-radius: 4px;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  position: relative;
}
.dashboard .ui_r .top[data-v-06819a4b] {
  width: 100%;
  height: 56px;
  background-color: #191a20;
}
.dashboard .ui_r .top .title[data-v-06819a4b] {
  display: inline-block;
  vertical-align: top;
  width: calc(100% - 84px);
  height: 56px;
  font-family: Roboto;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 56px;
  letter-spacing: normal;
  text-align: left;
  color: #EBEBEB;
  margin-left: 24px;
}
.dashboard .ui_r .top .bells[data-v-06819a4b] {
  display: inline-block;
  vertical-align: top;
  width: 60px;
  height: 100%;
  position: relative;
}
.dashboard .ui_r .top .bells button[data-v-06819a4b] {
  background-color: #191a20;
  border: 0;
  margin: 0;
  padding: 0;
  margin-top: 14px;
  cursor: pointer;
}
.dashboard .ui_r .top .bells button .icon[data-v-06819a4b] {
  color: var(--color-main);
}
.dashboard .ui_r .top .bells .dot[data-v-06819a4b] {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background-color: #FF4B4B;
  top: 13px;
  left: 21px;
}
.dashboard .ui_r .empty[data-v-06819a4b] {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dashboard .ui_r .return_all[data-v-06819a4b] {
  height: 76px;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}
.dashboard .ui_r .return_all .btn[data-v-06819a4b] {
  margin-top: 20px;
}
.dashboard .ui_r .data[data-v-06819a4b] {
  width: calc(100% - 24px);
  height: 108px;
  padding-left: 24px;
  position: relative;
  background-color: #181A21;
}
.dashboard .ui_r .data .name[data-v-06819a4b] {
  height: 42px;
  font-family: Roboto;
  font-size: 0.9375rem;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 57px;
  letter-spacing: normal;
  text-align: left;
  color: #EBEBEB;
}
.dashboard .ui_r .data .info[data-v-06819a4b] {
  margin-top: 8px;
  opacity: 0.98;
  font-family: Roboto;
  font-size: 0.9375rem;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 14px;
  letter-spacing: normal;
  text-align: left;
  color: rgba(167, 168, 172, 0.98);
}
.dashboard .ui_r .data .return[data-v-06819a4b] {
  width: 72px;
  height: 28px;
  display: none;
  justify-content: space-between;
  position: absolute;
  top: 14px;
  right: 14px;
}
.dashboard .ui_r .data .return button[data-v-06819a4b] {
  padding: 0;
  margin: 0;
  width: 28px;
  height: 28px;
  border-radius: 28px;
  border: 0;
  background-color: #181A21;
  padding-top: 3px;
  cursor: pointer;
}
.dashboard .ui_r .data .return button .check_icon[data-v-06819a4b] {
  stroke: #EBEBEB;
}
.dashboard .ui_r .data .return button .cancel_icon[data-v-06819a4b] {
  color: #ff5353;
}
.dashboard .ui_r .data[data-v-06819a4b]:hover {
  background-color: #353c4b;
}
.dashboard .ui_r .data:hover .return[data-v-06819a4b] {
  display: flex;
}
.dashboard .ui_r .data[data-v-06819a4b]:has(div.hasFocus) {
  background-color: #353c4b;
}
.dashboard .ui_r .data:has(div.hasFocus) .return.hasFocus[data-v-06819a4b] {
  display: flex;
}
.dashboard .ui_r .page[data-v-06819a4b] {
  width: 100%;
  height: 32px;
  text-align: center;
  bottom: 16px;
  position: absolute;
}
.dashboard .ui_r .page button[data-v-06819a4b] {
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 4px;
  background-color: #151922;
}
.dashboard .ui_r .page .number[data-v-06819a4b] {
  width: 98px;
  height: 32px;
  display: inline-block;
  vertical-align: top;
  line-height: 32px;
}
.dashboard .ui_r .page .able[data-v-06819a4b] {
  cursor: pointer;
}
.dashboard .ui_r .page .able .icon[data-v-06819a4b] {
  color: #EBEBEB;
}
.dashboard .ui_r .page .disable .icon[data-v-06819a4b] {
  opacity: 0.4;
  color: #a7a8ac;
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/components/ui/collapsemutiselect2/collapsemutiselect2.scss?vue&type=style&index=0&id=4acc60f8&scoped=true&lang=scss&external ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-4acc60f8]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-4acc60f8] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-4acc60f8] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-4acc60f8 {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-4acc60f8 {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-4acc60f8 {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-4acc60f8 {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-4acc60f8 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-4acc60f8 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-4acc60f8 {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-4acc60f8 {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-4acc60f8 {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-4acc60f8 {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-4acc60f8 {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-4acc60f8 {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-4acc60f8 {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.ui_collapsemutiselect2[data-v-4acc60f8] {
  box-sizing: border-box;
  position: relative;
}
.ui_collapsemutiselect2 .detailInfo[data-v-4acc60f8] {
  position: absolute;
  border-radius: 8px;
  box-shadow: 0px 8px 16px 0 rgba(0, 0, 0, 0.2);
  width: inherit;
  z-index: 100;
  transition: all linear 0.2s;
}
.ui_collapsemutiselect2 .detailInfo > div[data-v-4acc60f8] {
  margin: 10px;
}
.ui_collapsemutiselect2 .detailInfo.noshow[data-v-4acc60f8] {
  transform: scale(0);
  background-color: transparent;
}
.ui_collapsemutiselect2 .detailInfo.show[data-v-4acc60f8] {
  transform: scale(1);
  background-color: #111116;
}
.ui_collapsemutiselect2 .collapsemutiselect[data-v-4acc60f8] {
  width: 1128px;
  height: 120px;
  overflow: hidden;
  position: relative;
  transition: all 0.2s linear;
  background-color: #111112;
  z-index: 1;
}
.ui_collapsemutiselect2 .collapsemutiselect.height132[data-v-4acc60f8] {
  height: 132px;
}
.ui_collapsemutiselect2 .collapsemutiselect.heightAuto[data-v-4acc60f8] {
  padding-bottom: 20px;
  height: auto;
  max-height: 9999px;
}
.ui_collapsemutiselect2 .collapsemutiselect .collapsemutiselect_singleAdd[data-v-4acc60f8] {
  cursor: pointer;
  height: inherit;
  font-size: 0.9375rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
.ui_collapsemutiselect2 .collapsemutiselect .collapsemutiselect_dropdown[data-v-4acc60f8] {
  width: 100%;
  position: absolute;
  bottom: -10px;
  background: #111112;
  display: flex;
  justify-content: center;
  padding-bottom: 5px;
  z-index: 2;
}
.ui_collapsemutiselect2 .collapsemutiselect .collapsemutiselect_dropdown .singleAdd_icon[data-v-4acc60f8] {
  cursor: pointer;
  margin: 0 auto;
}
.ui_collapsemutiselect2 .collapsemutiselect .collapsemutiselect_multiAdd .collapsemutiselect_header[data-v-4acc60f8] {
  display: flex;
  justify-content: space-between;
  align-content: center;
}
.ui_collapsemutiselect2 .collapsemutiselect .collapsemutiselect_multiAdd .collapsemutiselect_header .collapsemutiselect_header_title[data-v-4acc60f8] {
  color: #a7a8ac;
  font-size: 0.9375rem;
  align-self: center;
}
.ui_collapsemutiselect2 .collapsemutiselect .collapsemutiselect_multiAdd .collapsemutiselect_header .multiAdd_btn .btn-item.btn-item.btn-default.color--main.type--border.theme--1[data-v-4acc60f8] {
  border: darkkhaki solid 1px;
  display: flex;
}
.ui_collapsemutiselect2 .collapsemutiselect .collapsemutiselect_multiAdd .collapsemutiselect_list[data-v-4acc60f8] {
  margin-top: 5px;
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
}
.ui_collapsemutiselect2 .collapsemutiselect .collapsemutiselect_multiAdd .collapsemutiselect_list .list_name[data-v-4acc60f8] {
  width: 177px;
  height: 20px;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 0.9375rem;
  background: #272932;
  border: #272932 solid 1px;
  padding: 8px 0;
  text-align: center;
  border-radius: 4px;
  margin: 12px 8px 0px 0px;
}
.ui_collapsemutiselect2 .collapsemutiselect .collapsemutiselect_multiAdd .collapsemutiselect_list .list_name.addButton[data-v-4acc60f8] {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-main);
  width: 177px;
  border-radius: 4px;
  border: solid 1px var(--color-main);
}
.ui_collapsemutiselect2 .collapsemutiselect .collapsemutiselect_multiAdd .collapsemutiselect_list .addButton[data-v-4acc60f8] {
  cursor: pointer;
  flex-shrink: 0;
  margin: 12px 10px 0px 0px;
}
.ui_collapsemutiselect2 .collapsemutiselect .collapsemutiselect_multiAdd .collapsemutiselect_list .dashEmpty[data-v-4acc60f8] {
  border: #a7a8ac dashed 1px;
  background: transparent;
  cursor: unset;
}
.ui_collapsemutiselect2 .collapsemutiselect .singleAdd_icon[data-v-4acc60f8] {
  margin-right: 15px;
  width: 20px;
  height: 20px;
  transition: all linear 0.4s;
}
.ui_collapsemutiselect2 .collapsemutiselect .singleAdd_icon.rotate_180[data-v-4acc60f8] {
  transform: rotate(-180deg);
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/view/calibration/calibration/calibration.scss?vue&type=style&index=0&id=dd8e1f92&scoped=true&lang=scss&external ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-dd8e1f92]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-dd8e1f92] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-dd8e1f92] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-dd8e1f92 {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-dd8e1f92 {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-dd8e1f92 {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-dd8e1f92 {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-dd8e1f92 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-dd8e1f92 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-dd8e1f92 {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-dd8e1f92 {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-dd8e1f92 {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-dd8e1f92 {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-dd8e1f92 {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-dd8e1f92 {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-dd8e1f92 {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.calibration[data-v-dd8e1f92] {
  width: calc(1200px - 24px - 2px - 20px - 20px - 4px);
  padding: 0 20px;
  position: relative;
}
.calibration .device[data-v-dd8e1f92] {
  width: 100%;
  height: 132px;
  margin-top: 10px;
}
.calibration .radio[data-v-dd8e1f92] {
  width: 100%;
  height: 26px;
  margin-top: 50px;
}
.calibration .radio .input[data-v-dd8e1f92] {
  display: inline-block;
  vertical-align: top;
  margin-right: 50px;
  margin-bottom: 0;
}
.calibration .radio0[data-v-dd8e1f92] {
  margin-top: 20px;
}
.calibration .remind[data-v-dd8e1f92] {
  margin-top: 23px;
  font-family: Roboto;
  font-size: 0.9375rem;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  text-align: left;
  color: #a7a8ac;
}
.calibration .remind0[data-v-dd8e1f92] {
  margin-top: 74px;
}
.calibration .chose[data-v-dd8e1f92] {
  width: 100%;
  height: 69px;
  margin-top: 32px;
}
.calibration .chose .outside[data-v-dd8e1f92] {
  display: inline-block;
  vertical-align: top;
  width: calc((100% - 37px) / 2);
}
.calibration .chose .outside .title[data-v-dd8e1f92] {
  height: 15px;
  font-family: Roboto;
  font-size: 1rem;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 15px;
  letter-spacing: normal;
  text-align: left;
  color: #a7a8ac;
}
.calibration .chose .outside .select[data-v-dd8e1f92] {
  margin-top: 12px;
}
.calibration .chose .outside .input[data-v-dd8e1f92] {
  margin-top: 12px;
  width: 100%;
  pointer-events: none;
}
.calibration .standard-select-container[data-v-dd8e1f92] {
  flex: 1;
  max-width: 300px;
  margin-left: 20px;
}
.calibration .standard-select-container .select[data-v-dd8e1f92] {
  margin-top: 0;
}
.calibration .sliderbar[data-v-dd8e1f92] {
  margin-top: 56px;
}
.calibration .btn[data-v-dd8e1f92] {
  width: 100%;
  margin-top: 30px;
  display: flex;
  justify-content: right;
}
.calibration .card[data-v-dd8e1f92] {
  width: 101%;
  margin-top: 45px;
}
.calibration .card .cardimg[data-v-dd8e1f92] {
  display: inline-block;
  vertical-align: top;
}
.calibration .card .right[data-v-dd8e1f92] {
  margin-left: 24px;
}
.calibration .card .top[data-v-dd8e1f92] {
  margin-top: 24px;
}
.calibration .sliderBlock[data-v-dd8e1f92] {
  margin-top: 45px;
  height: 44px;
}
.calibration .radioBlock .flex[data-v-dd8e1f92] {
  display: flex;
  align-items: center;
  justify-content: start;
}
.calibration .radioBlock .flex span[data-v-dd8e1f92] {
  margin: 0 20px;
}
.calibration .radioBlock .flex span.disable[data-v-dd8e1f92] {
  color: #a7a8ac;
}
.calibration .radioBlock .flex .select_ui[data-v-dd8e1f92] {
  width: 400px;
}
.calibration .radioBlock .input[data-v-dd8e1f92] {
  margin-top: 15px;
  width: 180px;
}
.calibration .gamut-section[data-v-dd8e1f92] {
  height: auto;
  min-height: 69px;
}
.calibration .gamut-section .gamut-outside[data-v-dd8e1f92] {
  width: 100%;
  margin-right: 0;
}
.calibration .gamut-section .eotf-outside[data-v-dd8e1f92] {
  width: 100%;
  margin-top: 20px;
}
.calibration .gamut-radio-block .gamut-option-block[data-v-dd8e1f92] {
  margin-bottom: 20px;
}
.calibration .gamut-radio-block .gamut-option-block .input[data-v-dd8e1f92] {
  margin-bottom: 10px;
}
.calibration .gamut-radio-block .gamut-option-block .input[data-v-dd8e1f92]:not(.style--disable) {
  pointer-events: auto !important;
}
.calibration .gamut-radio-block .gamut-option-block.standard-option[data-v-dd8e1f92] {
  display: flex;
  align-items: center;
  gap: 0;
}
.calibration .gamut-radio-block .gamut-option-block.standard-option .input[data-v-dd8e1f92] {
  margin-bottom: 0;
  flex-shrink: 0;
  width: 200px !important;
}
.calibration .gamut-radio-block .standard-gamut[data-v-dd8e1f92] {
  margin-left: 0;
  margin-top: 0;
  flex-shrink: 0;
}
.calibration .gamut-radio-block .select[data-v-dd8e1f92] {
  width: 300px !important;
}
.calibration .gamut-radio-block .customized-gamut[data-v-dd8e1f92] {
  margin-left: 54px;
  margin-top: 5px;
}
.calibration .gamut-radio-block .customized-gamut .coordinate-inputs[data-v-dd8e1f92] {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
}
.calibration .gamut-radio-block .customized-gamut .coordinate-inputs .color-coordinate[data-v-dd8e1f92] {
  flex: 1;
  min-width: 120px;
}
.calibration .gamut-radio-block .customized-gamut .coordinate-inputs .color-coordinate .color-label[data-v-dd8e1f92] {
  display: inline-block;
  font-family: Roboto;
  font-size: 0.9375rem;
  font-weight: normal;
  color: #EBEBEB;
  margin-right: 8px;
  margin-bottom: 0;
}
.calibration .gamut-radio-block .customized-gamut .coordinate-inputs .color-coordinate .coordinate-row[data-v-dd8e1f92] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.calibration .gamut-radio-block .customized-gamut .coordinate-inputs .color-coordinate .coordinate-row span[data-v-dd8e1f92] {
  font-family: Roboto;
  font-size: 0.9375rem;
  color: #EBEBEB;
  min-width: 10px;
}
.calibration .gamut-radio-block .customized-gamut .coordinate-inputs .color-coordinate .coordinate-row .coordinate-input[data-v-dd8e1f92] {
  width: 100px;
  margin-right: 5px;
}
.calibration .chose .outside .select[data-v-dd8e1f92] {
  width: 300px !important;
}
.calibration .chose .outside .select .select-block[data-v-dd8e1f92] {
  width: 300px !important;
}
.calibration .gamut-section .outside .select[data-v-dd8e1f92] {
  width: 300px !important;
}
.calibration .gamut-section .outside .select .select-block[data-v-dd8e1f92] {
  width: 300px !important;
}
.calibration .slidebar.bold-title[data-v-dd8e1f92] .title {
  font-weight: bold;
  font-size: 1rem;
}
.slidebar.bold-title .title[data-v-dd8e1f92] {
  font-weight: bold !important;
  font-size: 1rem !important;
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/components/ui/datePickerSingle/datePickerSingle.scss?vue&type=style&index=0&id=73f7957c&scoped=true&lang=scss&external ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-73f7957c]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-73f7957c] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-73f7957c] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-73f7957c {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-73f7957c {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-73f7957c {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-73f7957c {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-73f7957c {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-73f7957c {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-73f7957c {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-73f7957c {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-73f7957c {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-73f7957c {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-73f7957c {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-73f7957c {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-73f7957c {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.date-picker .erroSpan[data-v-73f7957c] {
  color: #CC0000;
  margin-top: 10px;
}
.datePicker-footer[data-v-73f7957c] {
  padding: 17px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.datePicker-footer .timeBlock[data-v-73f7957c] {
  flex-shrink: 0;
  display: flex;
}
.datePicker-footer .timeBlock div[data-v-73f7957c] {
  display: flex;
}
.datePicker-footer .timeBlock div[data-v-73f7957c] :not(last-child) {
  margin-right: 12px;
}
.datePickerButtonBlock[data-v-73f7957c] {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.datePickerButtonBlock .buttonEach[data-v-73f7957c] {
  display: inline-block;
  flex-shrink: 0;
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/view/calibration/advanced/advanced.scss?vue&type=style&index=0&id=a1f2a36a&scoped=true&lang=scss&external ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-a1f2a36a]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-a1f2a36a] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-a1f2a36a] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-a1f2a36a {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-a1f2a36a {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-a1f2a36a {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-a1f2a36a {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-a1f2a36a {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-a1f2a36a {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-a1f2a36a {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-a1f2a36a {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-a1f2a36a {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-a1f2a36a {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-a1f2a36a {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-a1f2a36a {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-a1f2a36a {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.advanced[data-v-a1f2a36a] {
  width: calc(1200px - 24px - 2px - 20px - 4px);
  padding-right: 20px;
  padding-top: 60px;
}
.advanced p[data-v-a1f2a36a] {
  font-family: Roboto;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  text-align: left;
}
.advanced .mt60[data-v-a1f2a36a] {
  margin-top: 60px;
}
.advanced .mt57[data-v-a1f2a36a] {
  margin-top: 60px;
}
.advanced .mt48[data-v-a1f2a36a] {
  margin-top: 48px;
}
.advanced .mt36[data-v-a1f2a36a] {
  margin-top: 36px;
}
.advanced .mt35[data-v-a1f2a36a] {
  margin-top: 35px;
}
.advanced .mt26[data-v-a1f2a36a] {
  margin-top: 26px;
}
.advanced .mt25[data-v-a1f2a36a] {
  margin-top: 25px;
}
.advanced .mt24[data-v-a1f2a36a] {
  margin-top: 24px;
}
.advanced .mt22[data-v-a1f2a36a] {
  margin-top: 22px;
}
.advanced .mt21[data-v-a1f2a36a] {
  margin-top: 21px;
}
.advanced .ml168[data-v-a1f2a36a] {
  margin-left: 168px;
}
.advanced .ml36[data-v-a1f2a36a] {
  margin-left: 36px;
}
.advanced .info .title[data-v-a1f2a36a] {
  height: 14px;
  font-size: 1.125rem;
  line-height: 14px;
  color: var(--color-main);
}
.advanced .info .content[data-v-a1f2a36a] {
  margin-top: 16px;
  height: 15px;
  font-size: 0.9375rem;
  line-height: 14px;
  color: #a7a8ac;
}
.advanced .select[data-v-a1f2a36a] {
  width: calc((100% - 40px) / 2);
  display: inline-block;
  vertical-align: top;
}
.advanced .select .title[data-v-a1f2a36a] {
  height: 15px;
  font-size: 0.9375rem;
  line-height: 15px;
  color: #a7a8ac;
}
.advanced .select .select_ui[data-v-a1f2a36a] {
  width: 100%;
  margin-top: 12px;
}
.advanced .select .remind[data-v-a1f2a36a] {
  margin-top: 14px;
  height: 14px;
  font-family: Roboto;
  font-size: 0.875rem;
  line-height: 14px;
  text-align: right;
  color: #a7a8ac;
}
.advanced .select .notice[data-v-a1f2a36a] {
  color: #a7a8ac;
  margin-top: 20px;
}
.advanced .select.both[data-v-a1f2a36a] {
  width: calc((100% - 76px) / 2);
}
.advanced .select.third[data-v-a1f2a36a] {
  width: calc((100% - 76px) / 3);
}
.advanced .radio .ui-radio[data-v-a1f2a36a] {
  width: 250px;
}
.advanced .radio .check[data-v-a1f2a36a] {
  margin-bottom: 0;
}
.advanced .outside[data-v-a1f2a36a] {
  width: 658px;
}
.advanced .outside .click[data-v-a1f2a36a] {
  width: 293px;
  margin-left: 36px;
}
.advanced .btn[data-v-a1f2a36a] {
  width: 100%;
  margin-top: 30px;
  display: flex;
  justify-content: right;
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/view/task/taskmanagement/taskmanagement.scss?vue&type=style&index=0&id=67a7e384&scoped=true&lang=scss&external ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-67a7e384]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-67a7e384] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-67a7e384] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-67a7e384 {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-67a7e384 {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-67a7e384 {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-67a7e384 {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-67a7e384 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-67a7e384 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-67a7e384 {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-67a7e384 {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-67a7e384 {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-67a7e384 {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-67a7e384 {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-67a7e384 {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-67a7e384 {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.taskmanagement[data-v-67a7e384] {
  word-break: break-word;
  min-width: calc(1200px - 24px - 2px - 20px - 20px - 4px);
  padding: 0 20px;
}
.taskmanagement .board[data-v-67a7e384] {
  height: 100%;
}
.taskmanagement .tab[data-v-67a7e384] {
  margin-top: 36px;
}
.taskmanagement .tabContent[data-v-67a7e384] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #181A21;
}
.taskmanagement .tabContent hr[data-v-67a7e384] {
  margin: 0 24px;
  border: unset;
  border-top: solid 2px #333845;
}
.taskmanagement .tabContent .tabHeader[data-v-67a7e384],
.taskmanagement .tabContent .tabFooter[data-v-67a7e384] {
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.taskmanagement .tabContent .tabHeader .btn-inline[data-v-67a7e384],
.taskmanagement .tabContent .tabFooter .btn-inline[data-v-67a7e384] {
  white-space: nowrap;
}
.taskmanagement .tabContent .tabHeader .right[data-v-67a7e384],
.taskmanagement .tabContent .tabFooter .right[data-v-67a7e384] {
  flex-grow: 1;
  position: relative;
  display: flex;
  align-items: center;
}
.taskmanagement .tabContent .tabHeader .right .margin[data-v-67a7e384],
.taskmanagement .tabContent .tabFooter .right .margin[data-v-67a7e384] {
  margin-right: 16px;
}
.taskmanagement .tabContent .tabHeader .select-block[data-v-67a7e384],
.taskmanagement .tabContent .tabFooter .select-block[data-v-67a7e384] {
  display: flex;
}
.taskmanagement .tabContent .tabHeader .select-block .select-each[data-v-67a7e384],
.taskmanagement .tabContent .tabFooter .select-block .select-each[data-v-67a7e384] {
  margin-right: 16px;
  width: 200px;
  flex-direction: column;
  display: flex;
}
.taskmanagement .tabContent .tabHeader .select-block .select-each > div[data-v-67a7e384]:first-child,
.taskmanagement .tabContent .tabFooter .select-block .select-each > div[data-v-67a7e384]:first-child {
  margin-bottom: 12px;
  color: #a7a8ac;
}
.taskmanagement .tabContent .tabHeader .select-block .datePickerLocal[data-v-67a7e384],
.taskmanagement .tabContent .tabFooter .select-block .datePickerLocal[data-v-67a7e384] {
  width: 254px;
}
.taskmanagement .tabContent .tabHeader .radioBlock[data-v-67a7e384],
.taskmanagement .tabContent .tabFooter .radioBlock[data-v-67a7e384] {
  position: absolute;
  top: -5px;
  right: 0;
}
.taskmanagement .tabContent .tabHeader .radioBlock > div[data-v-67a7e384]:first-child,
.taskmanagement .tabContent .tabFooter .radioBlock > div[data-v-67a7e384]:first-child {
  margin-right: 18px;
}
.taskmanagement .tabContent .alignEnd[data-v-67a7e384] {
  align-items: flex-end;
}
.taskmanagement .tabContent .tabFooter[data-v-67a7e384] {
  justify-content: space-between;
  align-items: center;
}
.taskmanagement .tabContent .tabMainBlock[data-v-67a7e384] thead.columns tr td {
  white-space: nowrap;
}
.taskmanagement .tabContent .tabMainBlock .editIcon[data-v-67a7e384] {
  width: 23px;
  height: 23px;
  cursor: pointer;
  transition: 0.1s all linear;
}
.taskmanagement .tabContent .tabMainBlock .editIcon[data-v-67a7e384]:hover {
  color: var(--color-main);
}
.taskmanagement .tabContent .tabMainBlock .editIcon[data-v-67a7e384]:active {
  color: var(--color-main-active);
}
.taskmanagement .tabContent .tabMainBlock .editIcon .noEdit[data-v-67a7e384] {
  color: #a7a8ac;
  cursor: not-allowed;
}
.taskmanagement .specialCase[data-v-67a7e384] {
  -webkit-text-decoration: underline solid 1px;
          text-decoration: underline solid 1px;
  cursor: pointer;
}
.flex[data-v-67a7e384] {
  display: flex;
}
.relative[data-v-67a7e384] {
  position: relative;
}
.tooltips[data-v-67a7e384] {
  position: absolute;
  text-align: center;
  border-radius: 4px;
  box-shadow: 0px 1px 6px 0 #000;
  border: solid 1px #333845;
  background-color: #000;
  z-index: 100;
  transition: all linear 0.2s;
}
.tooltips > div[data-v-67a7e384] {
  margin: 10px;
}
.tooltips.noshow[data-v-67a7e384] {
  transform: scale(0);
  background-color: transparent;
}
.tooltips.trangle[data-v-67a7e384] {
  top: 110%;
  left: -100%;
}
.tooltips.trangle[data-v-67a7e384]::before {
  content: " ";
  position: absolute;
  top: -13px;
  left: 53%;
  transform: translate(-50%, 0%);
  border-style: solid;
  border-width: 0 11px 14px 11px;
  border-color: transparent transparent #333845 transparent;
}
.tooltips.trangle[data-v-67a7e384]::after {
  content: " ";
  position: absolute;
  top: -12px;
  left: 53%;
  transform: translate(-50%, 0%);
  border-style: solid;
  border-width: 0 10px 13px 10px;
  border-color: transparent transparent #111116 transparent;
}
.tooltips.show.hasPopUp[data-v-67a7e384] {
  transform: scale(1);
  background-color: #111116;
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/view/dashboard/notification/notification.scss?vue&type=style&index=0&id=55a841ac&scoped=true&lang=scss&external ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-55a841ac]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-55a841ac] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-55a841ac] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-55a841ac {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-55a841ac {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-55a841ac {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-55a841ac {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-55a841ac {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-55a841ac {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-55a841ac {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-55a841ac {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-55a841ac {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-55a841ac {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-55a841ac {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-55a841ac {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-55a841ac {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.notification[data-v-55a841ac] {
  word-break: break-word;
  min-width: calc(1200px - 24px - 2px - 20px - 4px);
  padding: 0 20px 0 0;
  display: inline-block;
  vertical-align: top;
  height: 100%;
  position: inherit;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  border-radius: 4px;
}
.notification .notification_head .tab[data-v-55a841ac] {
  margin-top: 56px;
}
.notification .notification_head .table_back[data-v-55a841ac] {
  height: calc(100% - 114px);
  flex-grow: 1;
  border: solid 1px #181A21;
  background-color: #181A21;
}
.notification .notification_head .table_back .control[data-v-55a841ac] {
  width: calc(100% - 48px);
  height: 42px;
  margin: 24px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.notification .notification_head .table_back .control .select_device[data-v-55a841ac] {
  display: inline-block;
  vertical-align: top;
  width: 280px;
  margin-right: 10px;
}
.notification .notification_head .table_back .control .btn_delete[data-v-55a841ac] {
  display: inline-block;
  vertical-align: top;
}
.notification .notification_head .table_back .control .btn[data-v-55a841ac] {
  width: 208px;
}
.notification .notification_head .table_back .control .btn .button[data-v-55a841ac] {
  display: inline-block;
  vertical-align: top;
}
.notification .notification_head .table_back .control .btn .ml16[data-v-55a841ac] {
  margin-left: 16px;
}
.notification .notification_head .table_back .table[data-v-55a841ac] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100% - 90px);
}
.notification .notification_head .table_back .default[data-v-55a841ac] {
  margin-left: 24px;
  margin-top: 50px;
  font-family: "Roboto", "微軟正黑體";
}
.notification .nodata[data-v-55a841ac] {
  height: 100%;
}
.notification .tabFooter[data-v-55a841ac] {
  margin-left: 24px;
  margin-bottom: 24px;
  width: calc(100% - 48px);
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/view/device/device/device.scss?vue&type=style&index=0&id=b975313e&scoped=true&lang=scss&external ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-b975313e]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-b975313e] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-b975313e] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-b975313e {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-b975313e {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-b975313e {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-b975313e {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-b975313e {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-b975313e {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-b975313e {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-b975313e {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-b975313e {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-b975313e {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-b975313e {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-b975313e {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-b975313e {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.page_device[data-v-b975313e] {
  word-break: break-word;
  height: 100%;
  min-width: calc(1200px - 24px - 2px - 20px - 20px - 4px);
  padding: 0 20px;
}
.page_device .leftHeader[data-v-b975313e] {
  display: flex;
}
.page_device .leftHeader .select-block[data-v-b975313e] {
  width: 280px;
}
.page_device .leftHeader .tableVisibility[data-v-b975313e] {
  margin-left: 24px;
}
.page_device > .device[data-v-b975313e] {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.page_device[data-v-b975313e] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.page_device .tabHeader[data-v-b975313e] {
  margin: 54px 0 20px 0;
  display: flex;
  justify-content: space-between;
}
.page_device .tabHeader .buttonGroup[data-v-b975313e] {
  display: flex;
}
.page_device .tabHeader .buttonGroup .actionBar[data-v-b975313e] {
  margin: 0 12px;
}
.page_device .tabMainBlock[data-v-b975313e] {
  width: 100%;
}
.page_device .tabMainBlock.flexGrowHight[data-v-b975313e] {
  flex-grow: 1;
}
.page_device .tabFooter[data-v-b975313e] {
  margin-top: 24px;
}
.page_device .tooltips[data-v-b975313e] {
  position: absolute;
  top: 20px;
  width: 120px;
  text-align: center;
  border-radius: 4px;
  box-shadow: 0px 1px 6px 0 #000;
  border: solid 1px #333845;
  background-color: #000;
  z-index: 100;
  transition: all linear 0.2s;
}
.page_device .tooltips > div[data-v-b975313e] {
  margin: 10px 5px;
}
.page_device .tooltips.noshow[data-v-b975313e] {
  transform: scale(0);
  background-color: transparent;
}
.page_device .tooltips.show[data-v-b975313e] {
  transform: scale(1);
  background-color: #111116;
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/view/device/devicedetail/devicedetail.scss?vue&type=style&index=0&id=0be241f2&scoped=true&lang=scss&external ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-0be241f2]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-0be241f2] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-0be241f2] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-0be241f2 {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-0be241f2 {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-0be241f2 {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-0be241f2 {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-0be241f2 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-0be241f2 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-0be241f2 {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-0be241f2 {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-0be241f2 {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-0be241f2 {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-0be241f2 {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-0be241f2 {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-0be241f2 {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.page_devicedetail[data-v-0be241f2] {
  word-break: break-word;
  min-width: calc(1200px - 24px - 2px - 20px - 4px);
  padding: 0 20px 0 0;
}
.page_devicedetail .board[data-v-0be241f2] {
  height: 100%;
}
.page_devicedetail .cardInfo[data-v-0be241f2] {
  margin-top: 45px;
}
.page_devicedetail .tab[data-v-0be241f2] {
  margin-top: 36px;
}
.page_devicedetail .tabContent[data-v-0be241f2] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #181A21;
}
.page_devicedetail .tabContent .tabHeader[data-v-0be241f2], .page_devicedetail .tabContent .tabFooter[data-v-0be241f2] {
  padding: 24px;
  display: flex;
  justify-content: space-between;
}
.page_devicedetail .tabContent .tabHeader .right[data-v-0be241f2], .page_devicedetail .tabContent .tabFooter .right[data-v-0be241f2] {
  position: relative;
  display: flex;
  align-items: center;
}
.page_devicedetail .tabContent .tabHeader .right .icon[data-v-0be241f2], .page_devicedetail .tabContent .tabFooter .right .icon[data-v-0be241f2] {
  margin-right: 10px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  transition: all 0.2s linear;
}
.page_devicedetail .tabContent .tabHeader .right .icon[data-v-0be241f2]:hover, .page_devicedetail .tabContent .tabFooter .right .icon[data-v-0be241f2]:hover {
  color: var(--color-main);
}
.page_devicedetail .tabContent .tabHeader .right .icon[data-v-0be241f2]:active, .page_devicedetail .tabContent .tabFooter .right .icon[data-v-0be241f2]:active {
  color: var(--color-main-active);
}
.page_devicedetail .tabContent .tabHeader .right .count[data-v-0be241f2], .page_devicedetail .tabContent .tabFooter .right .count[data-v-0be241f2] {
  flex-shrink: 0;
  margin-right: 25px;
  color: #FF5353;
}
.page_devicedetail .tabContent .tabHeader .select-block[data-v-0be241f2], .page_devicedetail .tabContent .tabFooter .select-block[data-v-0be241f2] {
  width: 280px;
}
.page_devicedetail .tabContent .tabMainBlock .editIcon[data-v-0be241f2] {
  width: 23px;
  height: 23px;
  cursor: pointer;
  transition: 0.1s all linear;
}
.page_devicedetail .tabContent .tabMainBlock .editIcon[data-v-0be241f2]:hover {
  color: var(--color-main);
}
.page_devicedetail .tabContent .tabMainBlock .editIcon[data-v-0be241f2]:active {
  color: var(--color-main-active);
}
.page_devicedetail .tabContent .tabMainBlock .editIcon .noEdit[data-v-0be241f2] {
  color: #a7a8ac;
  cursor: not-allowed;
}
.page_devicedetail .tabContent .setting[data-v-0be241f2] {
  padding: 24px;
}
.page_devicedetail .tabContent .setting .title[data-v-0be241f2] {
  font-size: 1.125rem;
  color: var(--color-main);
  margin: 12px 0;
}
.page_devicedetail .tabContent .setting .warn[data-v-0be241f2] {
  font-size: 0.9375rem;
  color: #a7a8ac;
  display: flex;
  justify-content: space-between;
}
.page_devicedetail .tabContent .setting .setblock[data-v-0be241f2] {
  margin-top: 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.page_devicedetail .tabContent .setting .setblock .set .option[data-v-0be241f2] {
  margin: 0 0 15px 0;
  display: flex;
  align-items: center;
  color: white;
}
.page_devicedetail .tabContent .setting .setblock .set .option .switcher[data-v-0be241f2] {
  margin-right: 5px;
}
.page_devicedetail .tabContent .setting .setblock .set .option .settingIcon[data-v-0be241f2] {
  width: 23px;
  height: 23px;
  border: transparent solid 1px;
  padding: 2px;
  border-radius: 4px;
  margin-right: 12px;
  cursor: pointer;
  transition: all linear 0.2s;
}
.page_devicedetail .tabContent .setting .setblock .set .option .settingIcon[data-v-0be241f2]:hover {
  border: #333845 solid 1px;
  background: #111112;
}
.page_devicedetail .tabContent .setting .setblock .set .option .settingIcon.gold[data-v-0be241f2] {
  color: var(--color-main);
}
.page_devicedetail .tabContent .setting .status[data-v-0be241f2] {
  margin: 36px 0;
}
.page_devicedetail .tabContent .setting .divide[data-v-0be241f2] {
  width: 100%;
  margin: 21px 0 36px 0;
  border-bottom: solid 1px #a7a8ac;
}
.page_devicedetail .tabContent .setting .formBlock[data-v-0be241f2] {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}
.page_devicedetail .tabContent .setting .formBlock > div[data-v-0be241f2] {
  width: 48%;
  color: #a7a8ac;
}
.page_devicedetail .tabContent .setting .formBlock > div .input[data-v-0be241f2] {
  width: 100%;
}
.page_devicedetail .tabContent .setting .formBlock > div .formTitle[data-v-0be241f2] {
  margin-bottom: 10px;
}
.page_devicedetail .tabContent .setting .formBlock > div .formTitle[data-v-0be241f2]:not(:first-child) {
  margin-top: 36px;
}
.page_devicedetail .tabContent .setting .formContentBlock[data-v-0be241f2] {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.page_devicedetail .tabContent .setting .formContentBlock > div[data-v-0be241f2] {
  width: 48%;
  margin: 0 0 36px 0;
}
.page_devicedetail .tabContent .setting .formContentBlock > div[data-v-0be241f2]:nth-child(odd) {
  margin-right: 10px;
}
.page_devicedetail .tabContent .setting .formContentBlock .formTitle[data-v-0be241f2] {
  color: #a7a8ac;
  margin-bottom: 10px;
}
.page_devicedetail .tabContent .setting .formContentBlock .formTitle[data-v-0be241f2]:not(:first-child) {
  margin-top: 36px;
}
.page_devicedetail .tabContent .setting .applyBtn[data-v-0be241f2] {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.contentgroup[data-v-0be241f2] {
  padding: 28px 35px;
}
.contentgroup .contentgroup_top[data-v-0be241f2] {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.contentgroup .contentgroup_top .contentgroup_title[data-v-0be241f2] {
  display: flex;
  align-items: center;
  font-size: 1.25rem;
}
.contentgroup .contentgroup_top .contentgroup_title .titleType[data-v-0be241f2] {
  color: #EBEBEB;
  border-right: solid 1px #a7a8ac;
  padding-right: 7px;
}
.contentgroup .contentgroup_top .contentgroup_title .title[data-v-0be241f2] {
  color: var(--color-main);
  padding-left: 7px;
}
.contentgroup .border[data-v-0be241f2] {
  padding-top: 28px;
}
.contentgroup .border ul[data-v-0be241f2] {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
}
.contentgroup .border ul li.overTextLimit[data-v-0be241f2] {
  cursor: pointer;
}
.contentgroup .border ul li[data-v-0be241f2] {
  position: relative;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  overflow: hidden;
}
.contentgroup .border ul li[data-v-0be241f2]::before {
  content: " •  ";
}
.contentgroup .border ul li[data-v-0be241f2] {
  margin: 5px 0;
  width: 38%;
}
.contentgroup .border ul li[data-v-0be241f2]:nth-child(odd) {
  width: 50%;
  margin-right: 48px;
}
.tooltips[data-v-0be241f2] {
  position: absolute;
  text-align: center;
  border-radius: 4px;
  box-shadow: 0px 1px 6px 0 #000;
  border: solid 1px #333845;
  background-color: #000;
  z-index: 100;
  transition: all linear 0.2s;
}
.tooltips > div[data-v-0be241f2] {
  margin: 10px;
}
.tooltips.noshow[data-v-0be241f2] {
  transform: scale(0);
  background-color: transparent;
}
.tooltips.trangle[data-v-0be241f2] {
  top: 110%;
  left: -100%;
}
.tooltips.trangle[data-v-0be241f2]::before {
  content: " ";
  position: absolute;
  top: -13px;
  left: 53%;
  transform: translate(-50%, 0%);
  border-style: solid;
  border-width: 0 11px 14px 11px;
  border-color: transparent transparent #333845 transparent;
}
.tooltips.trangle[data-v-0be241f2]::after {
  content: " ";
  position: absolute;
  top: -12px;
  left: 53%;
  transform: translate(-50%, 0%);
  border-style: solid;
  border-width: 0 10px 13px 10px;
  border-color: transparent transparent #111116 transparent;
}
.tooltips.show.hasPopUp[data-v-0be241f2] {
  transform: scale(1);
  background-color: #111116;
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/view/group/group/group.scss?vue&type=style&index=0&id=414823e1&scoped=true&lang=scss&external ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-414823e1]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-414823e1] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-414823e1] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-414823e1 {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-414823e1 {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-414823e1 {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-414823e1 {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-414823e1 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-414823e1 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-414823e1 {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-414823e1 {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-414823e1 {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-414823e1 {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-414823e1 {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-414823e1 {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-414823e1 {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.page_group[data-v-414823e1] {
  height: 100%;
  word-break: break-word;
  min-width: calc(1200px - 24px - 2px - 20px - 20px - 4px);
  padding: 0 20px;
}
.page_group > .group[data-v-414823e1] {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.page_group[data-v-414823e1] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.page_group .tabHeader[data-v-414823e1] {
  margin: 54px 0 20px 0;
  display: flex;
  justify-content: space-between;
}
.page_group .tabHeader .select-block[data-v-414823e1] {
  width: 280px;
}
.page_group .tabHeader .buttonGroup[data-v-414823e1] {
  display: flex;
  flex-shrink: 0;
}
.page_group .tabHeader .buttonGroup .actionBar[data-v-414823e1] {
  margin: 0 12px;
}
.page_group .tabMainBlock.flexGrowHight[data-v-414823e1] {
  flex-grow: 1;
}
.page_group .tabFooter[data-v-414823e1] {
  margin-top: 24px;
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/view/group/groupdetail/groupdetail.scss?vue&type=style&index=0&id=27059e72&scoped=true&lang=scss&external ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-27059e72]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-27059e72] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-27059e72] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-27059e72 {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-27059e72 {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-27059e72 {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-27059e72 {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-27059e72 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-27059e72 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-27059e72 {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-27059e72 {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-27059e72 {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-27059e72 {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-27059e72 {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-27059e72 {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-27059e72 {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.page_groupdetail[data-v-27059e72] {
  word-break: break-word;
  height: 95%;
  min-width: calc(1200px - 24px - 2px - 20px - 4px);
  padding: 0 20px 0 0;
}
.page_groupdetail .board[data-v-27059e72] {
  height: 100%;
}
.page_groupdetail .cardInfo[data-v-27059e72] {
  margin-top: 45px;
}
.page_groupdetail .tab[data-v-27059e72] {
  margin-top: 36px;
}
.page_groupdetail .tabContent[data-v-27059e72] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  background: #181A21;
}
.page_groupdetail .tabContent .tabHeader[data-v-27059e72], .page_groupdetail .tabContent .tabFooter[data-v-27059e72] {
  padding: 24px;
  display: flex;
  justify-content: space-between;
}
.page_groupdetail .tabContent .tabHeader .select-block[data-v-27059e72], .page_groupdetail .tabContent .tabFooter .select-block[data-v-27059e72] {
  width: 280px;
  flex-shrink: 0;
}
.page_groupdetail .tabContent .tabHeader .button-block[data-v-27059e72], .page_groupdetail .tabContent .tabFooter .button-block[data-v-27059e72] {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.page_groupdetail .tabContent .tabHeader .button-block .btn-inline[data-v-27059e72]:nth-child(2), .page_groupdetail .tabContent .tabFooter .button-block .btn-inline[data-v-27059e72]:nth-child(2) {
  margin-left: 10px;
}
.page_groupdetail .tabContent .tabMainBlock .dataInfo[data-v-27059e72] {
  padding: 20px;
}
.page_groupdetail .tabContent .tabMainBlock .editIcon[data-v-27059e72] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  transition: 0.1s all linear;
}
.page_groupdetail .tabContent .tabMainBlock .editIcon[data-v-27059e72]:hover {
  color: var(--color-main);
}
.page_groupdetail .tabContent .tabMainBlock .editIcon[data-v-27059e72]:active {
  color: var(--color-main-active);
}
.page_groupdetail .tabContent .tabMainBlock .editIcon .noEdit[data-v-27059e72] {
  color: #a7a8ac;
  cursor: not-allowed;
}
.page_groupdetail .tabContent .setting[data-v-27059e72] {
  padding: 24px;
}
.page_groupdetail .tabContent .setting .title[data-v-27059e72] {
  font-size: 1.125rem;
  color: var(--color-main);
  margin: 12px 0;
}
.page_groupdetail .tabContent .setting .warn[data-v-27059e72] {
  font-size: 0.9375rem;
  color: #a7a8ac;
}
.page_groupdetail .tabContent .setting .setblock[data-v-27059e72] {
  margin-top: 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.page_groupdetail .tabContent .setting .setblock .set .option[data-v-27059e72] {
  margin: 0 0 15px 0;
  display: flex;
  align-items: center;
  color: white;
}
.page_groupdetail .tabContent .setting .setblock .set .option .switcher[data-v-27059e72] {
  margin-right: 5px;
}
.page_groupdetail .tabContent .setting .setblock .set .option .settingIcon[data-v-27059e72] {
  width: 23px;
  height: 23px;
  border: transparent solid 1px;
  padding: 2px;
  border-radius: 4px;
  margin-right: 12px;
  cursor: pointer;
  transition: all linear 0.2s;
}
.page_groupdetail .tabContent .setting .setblock .set .option .settingIcon[data-v-27059e72]:hover {
  border: #333845 solid 1px;
  background: #111112;
}
.page_groupdetail .tabContent .setting .setblock .set .option .settingIcon.gold[data-v-27059e72] {
  color: var(--color-main);
}
.border[data-v-27059e72] {
  border: violet solid 1px;
}
/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/view/cloud/cloudtarget/cloudtarget.scss?vue&type=style&index=0&id=6196be9e&scoped=true&lang=scss&external ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-6196be9e]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-6196be9e] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-6196be9e] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-6196be9e {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-6196be9e {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-6196be9e {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-6196be9e {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-6196be9e {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-6196be9e {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-6196be9e {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-6196be9e {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-6196be9e {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-6196be9e {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-6196be9e {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-6196be9e {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-6196be9e {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.page-cloudtarget[data-v-6196be9e] {
  height: 100%;
  padding: 0 20px;
  min-width: calc(1200px - 24px - 2px - 4px);
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.page-cloudtarget .tabHeader[data-v-6196be9e] {
  margin: 54px 0 20px 0;
  display: flex;
  justify-content: space-between;
}
.page-cloudtarget .tabHeader .select-block[data-v-6196be9e] {
  width: 280px;
}
.page-cloudtarget .tabHeader .buttonGroup[data-v-6196be9e] {
  display: flex;
  flex-shrink: 0;
}
.page-cloudtarget .tabHeader .buttonGroup .actionBar[data-v-6196be9e] {
  margin: 0 12px;
}
.page-cloudtarget .tabHeader .buttonGroup .btn-inline[data-v-6196be9e] {
  min-width: 120px;
  margin-right: 8px;
}
.page-cloudtarget .tabHeader .buttonGroup .btn-inline[data-v-6196be9e]:last-child {
  margin-right: 0;
}
/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/view/login/login.scss?vue&type=style&index=0&id=a3ccadca&scoped=true&lang=scss&external ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-a3ccadca]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-a3ccadca] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-a3ccadca] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-a3ccadca {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-a3ccadca {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-a3ccadca {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-a3ccadca {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-a3ccadca {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-a3ccadca {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-a3ccadca {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-a3ccadca {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-a3ccadca {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-a3ccadca {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-a3ccadca {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-a3ccadca {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-a3ccadca {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.page-login[data-v-a3ccadca] {
  background-color: #111112;
  width: 100vw;
  height: 100vh;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-login[data-v-a3ccadca]:focus {
  outline: none;
}
.page-login .login-block[data-v-a3ccadca] {
  max-width: 687px;
  width: 100%;
  text-align: center;
  margin: 0 auto;
}
.page-login .title-block[data-v-a3ccadca] {
  margin-bottom: 34px;
}
.page-login .title-block .title--main[data-v-a3ccadca] {
  color: var(--color-main);
  font-size: 2.5rem;
  margin-bottom: 2px;
  font-weight: bold;
}
.page-login .title-block .title--sub[data-v-a3ccadca] {
  color: var(--color-main);
  font-size: 1.75rem;
  font-weight: lighter;
}
.page-login .desc-block[data-v-a3ccadca] {
  margin-bottom: 60px;
}
.page-login .desc-block .text[data-v-a3ccadca] {
  color: #EBEBEB;
  font-size: 0.9375rem;
}
.page-login .btn-block[data-v-a3ccadca] {
  text-align: center;
}
.page-login .btn-block .text[data-v-a3ccadca] {
  margin-bottom: 24px;
}
.page-login .btn-block .btn-single[data-v-a3ccadca] {
  margin: 0 auto;
}
.page-login .ui-staging-login[data-v-a3ccadca] {
  color: #EBEBEB;
}
.page-login .ui-staging-login .form-title-block[data-v-a3ccadca] {
  margin-bottom: 8px;
}
.page-login .ui-staging-login .form-item-block .input-item[data-v-a3ccadca] {
  width: 100%;
}
.page-login .ui-staging-login .ui-form-grid-row + .ui-form-grid-row[data-v-a3ccadca] {
  margin-top: 20px;
}
.page-login .ui-adc-login[data-v-a3ccadca] {
  color: #EBEBEB;
}
.page-login .ui-adc-login .form-title-block[data-v-a3ccadca] {
  margin-bottom: 8px;
}
.page-login .ui-adc-login .form-item-block .input-item[data-v-a3ccadca] {
  width: 100%;
}
.page-login .ui-adc-login .ui-form-grid-row + .ui-form-grid-row[data-v-a3ccadca] {
  margin-top: 20px;
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/components/layout/layoutMain/layoutMain.scss?vue&type=style&index=0&id=6ee72cab&scoped=true&lang=scss&external ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-6ee72cab]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-6ee72cab] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-6ee72cab] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-6ee72cab {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-6ee72cab {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-6ee72cab {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-6ee72cab {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-6ee72cab {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-6ee72cab {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-6ee72cab {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-6ee72cab {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-6ee72cab {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-6ee72cab {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-6ee72cab {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-6ee72cab {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-6ee72cab {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.ui-layout-main[data-v-6ee72cab] {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100); /* --vh 變數寫在 ts 裡面 */
  overflow: hidden;
}
.ui-layout-main .header-block[data-v-6ee72cab] {
  flex-shrink: 0;
  flex-grow: 0;
}
.ui-layout-main .layout-main-block[data-v-6ee72cab] {
  display: flex;
  width: 100%;
  flex-grow: 1;
}
.ui-layout-main .side-menu-block[data-v-6ee72cab] {
  border-right: solid 1px #353c4b;
}
.ui-layout-main .side-menu-block .minW[data-v-6ee72cab] {
  overflow-y: scroll;
  height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  align-items: space-between;
  padding: 36px 0;
  background: #111112;
  width: 240px;
}
.ui-layout-main .side-menu-block .minW .side-menu-block_userDataRWD[data-v-6ee72cab] {
  background-image: url(https://proartcc.azureedge.net/img/asus_pacc_sw_img_phone_bg.fda800b7.png);
  padding-top: 36px;
  border-bottom: solid 1px var(--color-main);
  min-height: 135px;
  display: flex;
  align-items: center;
  flex-direction: column;
  color: var(--color-main-active);
}
.ui-layout-main .side-menu-block .minW .side-menu-block_userDataRWD .icon-block[data-v-6ee72cab] {
  margin-bottom: 15px;
  width: 56px;
  height: 56px;
}
.ui-layout-main .side-menu-block .btn-block[data-v-6ee72cab] {
  margin-bottom: 30px;
  flex-shrink: 0;
  flex-grow: 0;
}
.ui-layout-main .side-menu-block .btn-block.marginInside[data-v-6ee72cab] {
  margin-top: 24px;
}
.ui-layout-main .side-menu-block .btn[data-v-6ee72cab] {
  margin: 0 auto;
}
.ui-layout-main .side-menu-block .side-menu-list[data-v-6ee72cab] {
  flex-grow: 1;
}
.ui-layout-main .side-menu-block .side-menu-item .side-menu-item_flex[data-v-6ee72cab] {
  display: flex;
  align-items: center;
}
.ui-layout-main .side-menu-block .side-menu-item .item-block.moreInfo.hasArrow[data-v-6ee72cab] {
  position: relative;
}
.ui-layout-main .side-menu-block .side-menu-item .item-block.moreInfo.hasArrow[data-v-6ee72cab]::after {
  position: absolute;
  right: 20px;
  transition: all 0.5s;
  content: " ";
  display: inline-block;
  margin-top: -2px;
  border: solid #73747b;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 5px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.ui-layout-main .side-menu-block .side-menu-item .item-block.sideInfoActive.hasArrow[data-v-6ee72cab]::after {
  border: solid #73747b;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 5px;
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  margin-top: 3px;
}
.ui-layout-main .side-menu-block .side-menu-item[data-v-6ee72cab]:nth-child(6) {
  border-bottom: #353c4b solid 1px;
}
.ui-layout-main .side-menu-block .side-menu-item .item-block[data-v-6ee72cab] {
  display: table;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  transition: 0.3s all;
  text-decoration: none;
}
.ui-layout-main .side-menu-block .side-menu-item .item-block .text[data-v-6ee72cab] {
  color: #EBEBEB;
  display: table-cell;
  vertical-align: middle;
  padding-left: 12px;
  font-size: 0.9375rem;
}
.ui-layout-main .side-menu-block .side-menu-item .item-block .icon-block[data-v-6ee72cab] {
  display: table-cell;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  box-sizing: border-box;
  color: #a7a8ac;
  transition: 0.3s all;
}
.ui-layout-main .side-menu-block .side-menu-item .item-block .icon-block .icon-item[data-v-6ee72cab] {
  vertical-align: middle;
}
.ui-layout-main .side-menu-block .side-menu-item .item-block[data-v-6ee72cab]:hover:not(.infoList) {
  background-color: #181A21;
}
.ui-layout-main .side-menu-block .side-menu-item .item-block:hover:not(.infoList) .icon-block[data-v-6ee72cab], .ui-layout-main .side-menu-block .side-menu-item .item-block.active:not(.infoList) .icon-block[data-v-6ee72cab] {
  color: var(--color-main-active);
}
.ui-layout-main .side-menu-block .side-menu-item .item-block.active[data-v-6ee72cab] {
  background-color: #171718;
  border-bottom: solid;
  border-width: 2px;
  -o-border-image: linear-gradient(to left, var(--color-main-dark), var(--color-main-active), var(--color-main-dark)) 30;
     border-image: linear-gradient(to left, var(--color-main-dark), var(--color-main-active), var(--color-main-dark)) 30;
}
.ui-layout-main .side-menu-block .side-menu-item .item-block.active:not(.infoList) .text[data-v-6ee72cab] {
  color: var(--color-main-active);
}
.ui-layout-main .side-menu-block .side-menu-item .item-block.active:not(.infoList) .icon-block[data-v-6ee72cab] {
  color: var(--color-main-active);
}
.ui-layout-main .side-menu-block .btm-block[data-v-6ee72cab] {
  flex-shrink: 0;
  flex-grow: 0;
}
.ui-layout-main .side-menu-block .btm-block .logout[data-v-6ee72cab] {
  cursor: pointer;
}
.ui-layout-main .side-menu-block .btm-block .link-text[data-v-6ee72cab] {
  color: #EBEBEB;
  font-size: 0.9375rem;
  text-decoration: none;
}
.ui-layout-main .side-menu-block .btm-block .link-text[data-v-6ee72cab]:hover {
  color: var(--color-main);
}
.ui-layout-main .side-menu-block .btm-block .link-text.active[data-v-6ee72cab] {
  color: var(--color-main-active);
}
.ui-layout-main .side-menu-block .btm-block .text[data-v-6ee72cab] {
  color: #EBEBEB;
  font-size: 0.9375rem;
}
.ui-layout-main .side-menu-block .btm-block .version[data-v-6ee72cab] {
  color: #a7a8ac;
  font-size: 0.75rem;
  margin-top: 8px;
}
.ui-layout-main .side-menu-block .infoList[data-v-6ee72cab] {
  padding: 0 !important;
}
.ui-layout-main .side-menu-block .infoList div[data-v-6ee72cab] {
  cursor: pointer;
  padding: 0 20px !important;
  display: flex;
  align-items: center;
  transition: 0.8s all;
  min-height: 50px;
  color: antiquewhite;
}
.ui-layout-main .side-menu-block .infoList div[data-v-6ee72cab]:hover, .ui-layout-main .side-menu-block .infoList div.active[data-v-6ee72cab] {
  background-color: #181A21;
}
.ui-layout-main .side-menu-block .infoList div:hover .text[data-v-6ee72cab], .ui-layout-main .side-menu-block .infoList div.active .text[data-v-6ee72cab] {
  color: var(--color-main);
}
.ui-layout-main .side-menu-block .infoList div:hover .icon-block[data-v-6ee72cab], .ui-layout-main .side-menu-block .infoList div.active .icon-block[data-v-6ee72cab] {
  color: var(--color-main);
}
.ui-layout-main .side-menu-block .infoList div.active[data-v-6ee72cab] {
  background-color: #171718;
}
.ui-layout-main .layout-content-block[data-v-6ee72cab] {
  width: calc(100% - 240px);
  background-color: #111112;
  box-sizing: border-box;
  padding: 36px 2px 36px 24px;
  color: #EBEBEB;
  flex-shrink: 0;
  flex-grow: 0;
  display: flex;
  flex-direction: column;
}
.ui-layout-main .layout-detail-block[data-v-6ee72cab] {
  flex-basis: 0;
  flex-shrink: 1;
  flex-grow: 1;
  overflow-y: auto;
}
.ui-layout-main .nav-bar-block[data-v-6ee72cab] {
  padding-right: 24px;
  min-width: calc(1200px - 24px - 2px);
  display: flex;
  flex-grow: 0;
  flex-shrink: 0;
  align-items: flex-start;
  align-items: center;
}
.ui-layout-main .nav-bar-block .left-part-block[data-v-6ee72cab] {
  flex-grow: 1;
}
.ui-layout-main .nav-bar-block .right-part-block[data-v-6ee72cab] {
  flex-grow: 0;
  flex-shrink: 0;
}
.ui-layout-main .nav-bar-block .right-part-block.extra[data-v-6ee72cab] {
  margin-left: 15px;
}
.ui-layout-main .nav-bar-block .btn-block[data-v-6ee72cab] {
  display: inline-block;
  width: 24px;
  height: 24px;
  color: #EBEBEB;
  vertical-align: top;
}
.ui-layout-main .nav-bar-block .page-title-block[data-v-6ee72cab] {
  display: inline-block;
  width: calc(100% - 24px);
  vertical-align: middle;
  box-sizing: border-box;
  padding-left: 16px;
}
.ui-layout-main .nav-bar-block .right-btn-block[data-v-6ee72cab] {
  color: #a7a8ac;
  text-decoration: none;
  cursor: default;
}
.ui-layout-main .nav-bar-block .right-btn-block .icon-block[data-v-6ee72cab] {
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 24px;
}
.ui-layout-main .nav-bar-block .right-btn-block .text[data-v-6ee72cab] {
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 24px);
  box-sizing: border-box;
  padding-left: 12px;
}
@media only screen and (max-width: 1024px) {
.layout-main-block .layout-content-block[data-v-6ee72cab] {
    width: 100%;
}
.ui-layout-main .side-menu-block[data-v-6ee72cab] {
    border-right: #343842 solid 1px;
    position: absolute;
    z-index: 41;
    top: 0;
    left: 0;
    width: 0px;
    height: 100%;
    transition: 0.2s ease-in-out;
    overflow-x: hidden;
    opacity: 0.3;
}
.ui-layout-main .side-menu-block .minW[data-v-6ee72cab] {
    height: 100%;
    width: 304px;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 0;
}
.ui-layout-main .side-menu-block .minW .btm-block[data-v-6ee72cab] {
    border-top: solid 1px #353c4b;
    padding: 24px 10px;
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
}
.ui-layout-main .side-menu-block .minW .btm-block .versionBlock[data-v-6ee72cab] {
    display: flex;
    align-items: center;
}
.ui-layout-main .side-menu-block .minW .btm-block .versionBlock .version[data-v-6ee72cab] {
    color: #EBEBEB;
    font-size: 0.875rem;
    margin: 0 0 0 6px;
}
.ui-layout-main .side-menu-block.sideBarActive[data-v-6ee72cab] {
    opacity: 1;
    width: 304px;
}
}
.mask[data-v-6ee72cab] {
  position: fixed;
  width: 100vw;
  height: 100vh;
  display: inline-block;
  z-index: 41;
  background-color: rgba(0, 0, 0, 0.75);
  left: 0;
  right: 0;
  top: 0;
}
.mask-enter-active[data-v-6ee72cab],
.mask-leave-active[data-v-6ee72cab] {
  transition: opacity 0.2s ease;
}
.mask-enter-from[data-v-6ee72cab],
.mask-leave-to[data-v-6ee72cab] {
  opacity: 0;
}
/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/components/layout/header/header.scss?vue&type=style&index=0&id=a5de6d96&scoped=true&lang=scss&external ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-a5de6d96]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-a5de6d96] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-a5de6d96] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-a5de6d96 {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-a5de6d96 {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-a5de6d96 {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-a5de6d96 {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-a5de6d96 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-a5de6d96 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-a5de6d96 {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-a5de6d96 {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-a5de6d96 {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-a5de6d96 {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-a5de6d96 {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-a5de6d96 {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-a5de6d96 {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.ui-header[data-v-a5de6d96] {
  background-color: #000;
}
.ui-header .header-block[data-v-a5de6d96] {
  display: flex;
  width: 100%;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 15px 25px;
}
.ui-header .logo-block[data-v-a5de6d96] {
  display: flex;
  align-items: center;
}
.ui-header .logo-block .logo[data-v-a5de6d96] {
  display: inline-block;
  vertical-align: middle;
  color: var(--color-main);
  text-decoration: none;
  font-size: 1.125rem;
}
.ui-header .icon[data-v-a5de6d96] {
  display: inline-block;
  width: 26px;
  height: 26px;
  color: #fff;
  transition: color 0.5s;
}
.ui-header .icon[data-v-a5de6d96]:hover {
  color: var(--color-main);
}
.ui-header .icon[data-v-a5de6d96]:active {
  color: var(--color-main-dark);
}
.ui-header .user-icon[data-v-a5de6d96] {
  color: var(--color-main);
}
.ui-header .tool-block[data-v-a5de6d96] {
  display: flex;
}
.ui-header .tool-list-block[data-v-a5de6d96] {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.ui-header .tool-list-block > li[data-v-a5de6d96] {
  padding-right: 32px;
  box-sizing: border-box;
  position: relative;
}
.ui-header .tool-list-block .dot[data-v-a5de6d96] {
  position: absolute;
  top: -5px;
  left: 17px;
  font-size: 14px;
  color: #EBEBEB;
  position: absolute;
  border-radius: 17px;
  background-color: #CC0000;
  min-width: 17px;
  max-width: 1000px;
  height: 17px;
  padding: 3px;
  vertical-align: middle;
  font-size: 0.75rem;
  line-height: 16px;
  text-align: center;
}
.ui-header .right-block[data-v-a5de6d96] {
  position: relative;
  padding: 0 36px;
}
.ui-header .right-block[data-v-a5de6d96]:before {
  content: " ";
  display: inline-block;
  height: 70%;
  background-color: #EBEBEB;
  width: 1px;
  position: absolute;
  left: 0;
  opacity: 0.2;
  top: 50%;
  transform: translateY(-50%);
}
.ui-header .right-item-block[data-v-a5de6d96] {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.ui-header .right-item-block .icon-block[data-v-a5de6d96] {
  width: 26px;
  height: 26px;
}
.ui-header .right-item-block .text-block[data-v-a5de6d96] {
  color: #EBEBEB;
  text-decoration: none;
  font-size: 0.9375rem;
  padding-left: 15px;
  box-sizing: border-box;
  text-decoration: none;
  padding-top: 4px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-header .right-block.active .profile-block[data-v-a5de6d96]:after {
  border: solid #EBEBEB;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  top: 15px;
}
.ui-header .right-block.active .profile-block + .detail-block[data-v-a5de6d96] {
  animation: fadeInFull-a5de6d96 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.ui-header .profile-block[data-v-a5de6d96] {
  position: relative;
  transition: all 0.5s;
}
.ui-header .profile-block[data-v-a5de6d96]:after {
  transition: all 0.5s;
  content: "";
  display: inline-block;
  border: solid #EBEBEB;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  position: absolute;
  right: -18px;
}
.ui-header .profile-block + .detail-block[data-v-a5de6d96] {
  animation: fadeOutFull-a5de6d96 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  box-sizing: border-box;
  padding: 33px 10px;
  max-width: 200px;
  width: 100%;
  display: inline-block;
  background-color: #22242e;
  box-shadow: 0px 1px 6px 0 #000;
  border: 1px solid #43464f;
  border-radius: 4px;
  text-align: center;
  position: absolute;
  top: calc(100% + 10px);
  left: 18px;
  z-index: 41;
}
.ui-header .profile-block + .detail-block .img-block[data-v-a5de6d96] {
  text-align: center;
  display: inline-block;
  width: 100%;
  margin-bottom: 16px;
}
.ui-header .profile-block + .detail-block .img-block .icon[data-v-a5de6d96] {
  display: inline-block;
  width: 50px;
  height: 50px;
}
.ui-header .profile-block + .detail-block .text--main[data-v-a5de6d96] {
  color: var(--color-main-active);
  font-size: 0.9375rem;
  margin-bottom: 4px;
}
.ui-header .profile-block + .detail-block .text--sub[data-v-a5de6d96] {
  color: #EBEBEB;
  font-size: 0.9375rem;
  margin-bottom: 30px;
  font-size: 0.75rem;
}
.ui-header .profile-block + .detail-block .btn-block[data-v-a5de6d96] {
  max-width: 136px;
  text-align: center;
  margin: 0 auto;
}
.ui-header .hamberger[data-v-a5de6d96] {
  display: none;
}
@media only screen and (max-width: 1024px) {
.ui-header .hamberger[data-v-a5de6d96] {
    display: block;
}
.ui-header .icon[data-v-a5de6d96] {
    width: 36px;
    height: 36px;
}
.ui-header .tool-block ul li[data-v-a5de6d96]:not(:last-child) {
    display: none;
}
.ui-header .tool-block ul li[data-v-a5de6d96] {
    padding: 0px;
}
.ui-header .tool-block ul li .dot[data-v-a5de6d96] {
    top: 2px;
    left: 22px;
    min-width: 8px;
    max-width: 8px;
    max-height: 8px;
}
.ui-header .tool-block .right-block[data-v-a5de6d96] {
    display: none;
}
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/view/main/main.scss?vue&type=style&index=0&id=1d5780dd&scoped=true&lang=scss&external ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-1d5780dd]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-1d5780dd] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-1d5780dd] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-1d5780dd {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-1d5780dd {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-1d5780dd {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-1d5780dd {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-1d5780dd {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-1d5780dd {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-1d5780dd {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-1d5780dd {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-1d5780dd {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-1d5780dd {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-1d5780dd {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-1d5780dd {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-1d5780dd {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/view/message/message.scss?vue&type=style&index=0&id=00e7f279&scoped=true&lang=scss&external ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-00e7f279]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-00e7f279] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-00e7f279] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-00e7f279 {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-00e7f279 {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-00e7f279 {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-00e7f279 {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-00e7f279 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-00e7f279 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-00e7f279 {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-00e7f279 {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-00e7f279 {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-00e7f279 {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-00e7f279 {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-00e7f279 {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-00e7f279 {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}
.ui-form-layout .form-title-block[data-v-00e7f279] {
  width: 100%;
  margin-bottom: 12px;
}
.ui-form-layout .form-item-block[data-v-00e7f279] {
  width: 100%;
}
.ui-form-layout .form-error-block[data-v-00e7f279] {
  width: 100%;
  margin-top: 8px;
}
.ui-form-layout .form-title[data-v-00e7f279] {
  color: #a7a8ac;
  font-size: 0.9375rem;
}
.ui-form-layout .error-txt[data-v-00e7f279] {
  color: #FF4B4B;
  font-size: 0.9375rem;
}
.ui-form-layout .form-required[data-v-00e7f279]:before {
  content: "*";
  font-size: 0.9375rem;
  color: var(--color-main);
  margin-right: 4px;
}

/* 設定GRID*/
.ui-form-grid-row[data-v-00e7f279] {
  display: flex;
  width: 100%;
  margin: auto -7px;
  flex-wrap: wrap;
}
.ui-form-grid-row.style--no-space [class*=ui-form-grid-col-][data-v-00e7f279] {
  margin-bottom: 0;
}
[class*=ui-form-grid-col-][data-v-00e7f279] {
  display: inline-flex;
  vertical-align: top;
  align-items: center;
  box-sizing: border-box;
  text-align: left;
  padding-right: 7px;
  padding-left: 7px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
[class*=ui-form-grid-col-].align-center[data-v-00e7f279] {
  justify-content: center;
}
[class*=ui-form-grid-col-].align-right[data-v-00e7f279] {
  justify-content: flex-end;
}
.ui-form-grid-col-1[data-v-00e7f279] {
  flex: 0 0 8.3333333333%;
  max-width: 8.3333333333%;
}
.ui-form-grid-1[data-v-00e7f279] {
  flex: 0 0 8.3333333333%;
  max-width: 8.3333333333%;
}
.ui-form-grid-col-2[data-v-00e7f279] {
  flex: 0 0 16.6666666667%;
  max-width: 16.6666666667%;
}
.ui-form-grid-2[data-v-00e7f279] {
  flex: 0 0 16.6666666667%;
  max-width: 16.6666666667%;
}
.ui-form-grid-col-3[data-v-00e7f279] {
  flex: 0 0 25%;
  max-width: 25%;
}
.ui-form-grid-3[data-v-00e7f279] {
  flex: 0 0 25%;
  max-width: 25%;
}
.ui-form-grid-col-4[data-v-00e7f279] {
  flex: 0 0 33.3333333333%;
  max-width: 33.3333333333%;
}
.ui-form-grid-4[data-v-00e7f279] {
  flex: 0 0 33.3333333333%;
  max-width: 33.3333333333%;
}
.ui-form-grid-col-5[data-v-00e7f279] {
  flex: 0 0 41.6666666667%;
  max-width: 41.6666666667%;
}
.ui-form-grid-5[data-v-00e7f279] {
  flex: 0 0 41.6666666667%;
  max-width: 41.6666666667%;
}
.ui-form-grid-col-6[data-v-00e7f279] {
  flex: 0 0 50%;
  max-width: 50%;
}
.ui-form-grid-6[data-v-00e7f279] {
  flex: 0 0 50%;
  max-width: 50%;
}
.ui-form-grid-col-7[data-v-00e7f279] {
  flex: 0 0 58.3333333333%;
  max-width: 58.3333333333%;
}
.ui-form-grid-7[data-v-00e7f279] {
  flex: 0 0 58.3333333333%;
  max-width: 58.3333333333%;
}
.ui-form-grid-col-8[data-v-00e7f279] {
  flex: 0 0 66.6666666667%;
  max-width: 66.6666666667%;
}
.ui-form-grid-8[data-v-00e7f279] {
  flex: 0 0 66.6666666667%;
  max-width: 66.6666666667%;
}
.ui-form-grid-col-9[data-v-00e7f279] {
  flex: 0 0 75%;
  max-width: 75%;
}
.ui-form-grid-9[data-v-00e7f279] {
  flex: 0 0 75%;
  max-width: 75%;
}
.ui-form-grid-col-10[data-v-00e7f279] {
  flex: 0 0 83.3333333333%;
  max-width: 83.3333333333%;
}
.ui-form-grid-10[data-v-00e7f279] {
  flex: 0 0 83.3333333333%;
  max-width: 83.3333333333%;
}
.ui-form-grid-col-11[data-v-00e7f279] {
  flex: 0 0 91.6666666667%;
  max-width: 91.6666666667%;
}
.ui-form-grid-11[data-v-00e7f279] {
  flex: 0 0 91.6666666667%;
  max-width: 91.6666666667%;
}
.ui-form-grid-col-12[data-v-00e7f279] {
  flex: 0 0 100%;
  max-width: 100%;
}
.ui-form-grid-12[data-v-00e7f279] {
  flex: 0 0 100%;
  max-width: 100%;
}
@media (max-width: 1199px) {
.ui-form-grid-col-nb-1[data-v-00e7f279] {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
}
.ui-form-grid-nb-1[data-v-00e7f279] {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
}
.ui-form-grid-col-nb-2[data-v-00e7f279] {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
}
.ui-form-grid-nb-2[data-v-00e7f279] {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
}
.ui-form-grid-col-nb-3[data-v-00e7f279] {
    flex: 0 0 25%;
    max-width: 25%;
}
.ui-form-grid-nb-3[data-v-00e7f279] {
    flex: 0 0 25%;
    max-width: 25%;
}
.ui-form-grid-col-nb-4[data-v-00e7f279] {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
}
.ui-form-grid-nb-4[data-v-00e7f279] {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
}
.ui-form-grid-col-nb-5[data-v-00e7f279] {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
}
.ui-form-grid-nb-5[data-v-00e7f279] {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
}
.ui-form-grid-col-nb-6[data-v-00e7f279] {
    flex: 0 0 50%;
    max-width: 50%;
}
.ui-form-grid-nb-6[data-v-00e7f279] {
    flex: 0 0 50%;
    max-width: 50%;
}
.ui-form-grid-col-nb-7[data-v-00e7f279] {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
}
.ui-form-grid-nb-7[data-v-00e7f279] {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
}
.ui-form-grid-col-nb-8[data-v-00e7f279] {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
}
.ui-form-grid-nb-8[data-v-00e7f279] {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
}
.ui-form-grid-col-nb-9[data-v-00e7f279] {
    flex: 0 0 75%;
    max-width: 75%;
}
.ui-form-grid-nb-9[data-v-00e7f279] {
    flex: 0 0 75%;
    max-width: 75%;
}
.ui-form-grid-col-nb-10[data-v-00e7f279] {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
}
.ui-form-grid-nb-10[data-v-00e7f279] {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
}
.ui-form-grid-col-nb-11[data-v-00e7f279] {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
}
.ui-form-grid-nb-11[data-v-00e7f279] {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
}
.ui-form-grid-col-nb-12[data-v-00e7f279] {
    flex: 0 0 100%;
    max-width: 100%;
}
.ui-form-grid-nb-12[data-v-00e7f279] {
    flex: 0 0 100%;
    max-width: 100%;
}
.ui-form-grid-col-nb-auto[data-v-00e7f279] {
    max-width: auto;
    flex-basis: auto;
}
}
@media (max-width: 1023px) {
.ui-form-grid-col-pad-1[data-v-00e7f279] {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
}
.ui-form-grid-pad-1[data-v-00e7f279] {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
}
.ui-form-grid-col-pad-2[data-v-00e7f279] {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
}
.ui-form-grid-pad-2[data-v-00e7f279] {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
}
.ui-form-grid-col-pad-3[data-v-00e7f279] {
    flex: 0 0 25%;
    max-width: 25%;
}
.ui-form-grid-pad-3[data-v-00e7f279] {
    flex: 0 0 25%;
    max-width: 25%;
}
.ui-form-grid-col-pad-4[data-v-00e7f279] {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
}
.ui-form-grid-pad-4[data-v-00e7f279] {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
}
.ui-form-grid-col-pad-5[data-v-00e7f279] {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
}
.ui-form-grid-pad-5[data-v-00e7f279] {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
}
.ui-form-grid-col-pad-6[data-v-00e7f279] {
    flex: 0 0 50%;
    max-width: 50%;
}
.ui-form-grid-pad-6[data-v-00e7f279] {
    flex: 0 0 50%;
    max-width: 50%;
}
.ui-form-grid-col-pad-7[data-v-00e7f279] {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
}
.ui-form-grid-pad-7[data-v-00e7f279] {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
}
.ui-form-grid-col-pad-8[data-v-00e7f279] {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
}
.ui-form-grid-pad-8[data-v-00e7f279] {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
}
.ui-form-grid-col-pad-9[data-v-00e7f279] {
    flex: 0 0 75%;
    max-width: 75%;
}
.ui-form-grid-pad-9[data-v-00e7f279] {
    flex: 0 0 75%;
    max-width: 75%;
}
.ui-form-grid-col-pad-10[data-v-00e7f279] {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
}
.ui-form-grid-pad-10[data-v-00e7f279] {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
}
.ui-form-grid-col-pad-11[data-v-00e7f279] {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
}
.ui-form-grid-pad-11[data-v-00e7f279] {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
}
.ui-form-grid-col-pad-12[data-v-00e7f279] {
    flex: 0 0 100%;
    max-width: 100%;
}
.ui-form-grid-pad-12[data-v-00e7f279] {
    flex: 0 0 100%;
    max-width: 100%;
}
.ui-form-grid-col-pad-auto[data-v-00e7f279] {
    max-width: auto;
    flex-basis: auto;
}
}
@media (max-width: 767px) {
.ui-form-grid-col-mobile-1[data-v-00e7f279] {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
}
.ui-form-grid-mobile-1[data-v-00e7f279] {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
}
.ui-form-grid-col-mobile-2[data-v-00e7f279] {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
}
.ui-form-grid-mobile-2[data-v-00e7f279] {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
}
.ui-form-grid-col-mobile-3[data-v-00e7f279] {
    flex: 0 0 25%;
    max-width: 25%;
}
.ui-form-grid-mobile-3[data-v-00e7f279] {
    flex: 0 0 25%;
    max-width: 25%;
}
.ui-form-grid-col-mobile-4[data-v-00e7f279] {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
}
.ui-form-grid-mobile-4[data-v-00e7f279] {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
}
.ui-form-grid-col-mobile-5[data-v-00e7f279] {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
}
.ui-form-grid-mobile-5[data-v-00e7f279] {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
}
.ui-form-grid-col-mobile-6[data-v-00e7f279] {
    flex: 0 0 50%;
    max-width: 50%;
}
.ui-form-grid-mobile-6[data-v-00e7f279] {
    flex: 0 0 50%;
    max-width: 50%;
}
.ui-form-grid-col-mobile-7[data-v-00e7f279] {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
}
.ui-form-grid-mobile-7[data-v-00e7f279] {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
}
.ui-form-grid-col-mobile-8[data-v-00e7f279] {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
}
.ui-form-grid-mobile-8[data-v-00e7f279] {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
}
.ui-form-grid-col-mobile-9[data-v-00e7f279] {
    flex: 0 0 75%;
    max-width: 75%;
}
.ui-form-grid-mobile-9[data-v-00e7f279] {
    flex: 0 0 75%;
    max-width: 75%;
}
.ui-form-grid-col-mobile-10[data-v-00e7f279] {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
}
.ui-form-grid-mobile-10[data-v-00e7f279] {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
}
.ui-form-grid-col-mobile-11[data-v-00e7f279] {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
}
.ui-form-grid-mobile-11[data-v-00e7f279] {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
}
.ui-form-grid-col-mobile-12[data-v-00e7f279] {
    flex: 0 0 100%;
    max-width: 100%;
}
.ui-form-grid-mobile-12[data-v-00e7f279] {
    flex: 0 0 100%;
    max-width: 100%;
}
.ui-form-grid-col-mobile-auto[data-v-00e7f279] {
    max-width: auto;
    flex-basis: auto;
}
}
.modal-content-detail[data-v-00e7f279] {
  display: inline-block;
  max-width: 100%;
  width: 100%;
}
.modal-content-detail .space-modal-md[data-v-00e7f279] {
  box-sizing: border-box;
  padding-left: 36px;
  padding-right: 36px;
}
.modal-content-detail.style--text[data-v-00e7f279] {
  text-align: left;
}
.modal-content-detail.style--text p[data-v-00e7f279] {
  margin-bottom: 15px;
}
.modal-content-detail.style--text p.space--sm[data-v-00e7f279] {
  margin-bottom: 5px;
}
.ui-msg-block[data-v-00e7f279] {
  position: fixed;
  z-index: 1001;
}
.ui-msg-block .modal-content-detail.style--normal-text[data-v-00e7f279] {
  padding: 32px 24px 24px 24px;
  box-sizing: border-box;
  text-align: left;
  font-size: 1rem;
  color: #EBEBEB;
}
.ui-msg-block .modal-contact .form-item-block .ui-input[data-v-00e7f279] {
  width: 100%;
}
.ui-msg-block .modal-global-add-device .img-block[data-v-00e7f279] {
  display: inline-block;
  max-width: 228px;
  width: 100%;
}
.ui-msg-block .modal-global-add-device .img-block img[data-v-00e7f279] {
  width: 100%;
  display: inline-block;
}
.ui-msg-block .modal-global-add-device .text-block[data-v-00e7f279] {
  padding-top: 4vh;
  color: #EBEBEB;
  font-size: 0.9375rem;
  padding-bottom: 3vh;
}
.ui-msg-block .modal-global-add-device .tab-content-block[data-v-00e7f279] {
  padding-top: 4vh;
}
.ui-msg-block .modal-global-add-device .main-desc-block .desc-lg[data-v-00e7f279] {
  font-size: 3.75rem;
  color: var(--color-main);
}
.ui-msg-block .modal-global-add-device .main-desc-block .desc-copy[data-v-00e7f279] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ui-msg-block .modal-global-add-device .main-desc-block .desc--sm[data-v-00e7f279] {
  font-size: 0.9375rem;
  color: #a7a8ac;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  padding: 2vh 0;
}
.ui-msg-block .modal-global-add-device .main-desc-block .desc--sm .txt[data-v-00e7f279] {
  display: inline-block;
  vertical-align: middle;
}
.ui-msg-block .modal-global-add-device .main-desc-block .desc--sm .timer[data-v-00e7f279] {
  display: inline-block;
  vertical-align: middle;
  padding-left: 4px;
}
.ui-msg-block .modal-license[data-v-00e7f279] {
  color: #EBEBEB;
}
.ui-msg-block .modal-license .tab-title-list[data-v-00e7f279] {
  position: relative;
}
.ui-msg-block .modal-license .tab-title-list[data-v-00e7f279]::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 1px;
  background-color: #a7a8ac;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.ui-msg-block .modal-license .tab-title-list .tab-item[data-v-00e7f279] {
  display: inline-block;
  max-width: 480px;
  width: 100%;
}
.ui-msg-block .modal-license .tab-content-block[data-v-00e7f279] {
  text-align: left;
}
.ui-msg-block .modal-license .list-block[data-v-00e7f279] {
  text-align: left;
}
.ui-msg-block .modal-license .title--sub[data-v-00e7f279] {
  color: var(--color-main);
  font-size: 1rem;
  padding: 20px 36px;
  box-sizing: border-box;
}
.ui-msg-block .modal-eula[data-v-00e7f279] {
  color: #EBEBEB;
}
.ui-msg-block .modal-eula[data-v-00e7f279] .list-block {
  font-weight: normal;
  text-align: justify;
}
.ui-msg-block .modal-eula[data-v-00e7f279] .list-block > li + li {
  margin-top: 10px;
}
.ui-msg-block .modal-import-csv[data-v-00e7f279] {
  color: #EBEBEB;
}
.ui-msg-block .modal-import-csv .temp-select-block[data-v-00e7f279] {
  box-sizing: border-box;
}
.ui-msg-block .modal-import-csv .temp-select-block .select-inline[data-v-00e7f279] {
  width: 100%;
}
.ui-msg-block .modal-import-csv .temp-select-block .table-list-block[data-v-00e7f279] {
  color: #EBEBEB;
}
.ui-msg-block .temp-select-block[data-v-00e7f279] {
  display: flex;
  width: 100%;
  box-sizing: border-box;
}
.ui-msg-block .temp-select-block .select-inline[data-v-00e7f279] {
  display: inline-flex;
  width: 49%;
}
.ui-msg-block .temp-select-block .select-inline + .select-inline[data-v-00e7f279] {
  margin-left: 2%;
}
.editIcon[data-v-00e7f279] {
  width: 23px;
  height: 23px;
  cursor: pointer;
  transition: 0.1s all linear;
}
.editIcon[data-v-00e7f279]:hover {
  color: var(--color-main);
}
.editIcon .noEdit[data-v-00e7f279] {
  color: #a7a8ac;
  cursor: not-allowed;
}
.save-customized-target[data-v-00e7f279] {
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 27px;
}
.save-customized-target .targetname[data-v-00e7f279] {
  height: 17px;
  font-family: Roboto;
  font-size: 1.125rem;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: 17px;
  letter-spacing: normal;
  text-align: left;
  color: #EBEBEB;
}
.save-customized-target .input[data-v-00e7f279] {
  width: 100%;
  margin-top: 19px;
}
.save-customized-target .error[data-v-00e7f279] {
  margin-top: 11px;
  height: 16px;
  font-family: Roboto;
  font-size: 1.125rem;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 16px;
  letter-spacing: normal;
  text-align: left;
  color: #ff8484;
}
.save-customized-target .info[data-v-00e7f279] {
  margin-top: 19px;
  margin-bottom: 5px;
  display: flex;
  flex-direction: row;
  justify-content: left;
}
.save-customized-target .info p[data-v-00e7f279] {
  display: inline-block;
  vertical-align: top;
  width: 187px;
  height: 14px;
  font-family: Roboto;
  font-size: 1.125rem;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: 14px;
  letter-spacing: normal;
  text-align: left;
  color: #EBEBEB;
}
.save-customized-target .info .value[data-v-00e7f279] {
  display: inline-block;
  vertical-align: top;
  width: 187px;
  height: 14px;
  font-family: Roboto;
  font-size: 1.125rem;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: 14px;
  letter-spacing: normal;
  text-align: left;
  color: #EBEBEB;
}
.save-customized-target .info.Gamut[data-v-00e7f279] {
  margin-top: 33px;
}
.modify_setting[data-v-00e7f279] {
  padding: 0 25px;
  text-align: left;
}
.modify_setting .radio[data-v-00e7f279] {
  width: 100%;
  height: 26px;
  margin-top: 36px;
  color: #EBEBEB;
}
.modify_setting .radio .input[data-v-00e7f279] {
  display: inline-block;
  vertical-align: top;
  margin-right: 50px;
  margin-bottom: 0;
}
.modify_setting .chose[data-v-00e7f279] {
  width: 100%;
  height: 60px;
  margin-top: 45px;
}
.modify_setting .chose .outside[data-v-00e7f279] {
  display: inline-block;
  vertical-align: top;
  width: calc((100% - 37px) / 2);
}
.modify_setting .chose .outside .title[data-v-00e7f279] {
  height: 15px;
  font-family: Roboto;
  font-size: 0.9375rem;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 15px;
  letter-spacing: normal;
  text-align: left;
  color: #a7a8ac;
}
.modify_setting .chose .outside .select[data-v-00e7f279] {
  margin-top: 12px;
  display: flex;
}
.modify_setting .chose .outside .input[data-v-00e7f279] {
  margin-top: 12px;
  display: flex;
  pointer-events: none;
}
.modify_setting .sliderbar[data-v-00e7f279] {
  width: 100%;
  margin: 25px 0 15px 0;
}
.modify_setting .btn[data-v-00e7f279] {
  width: 100%;
  margin-top: 30px;
  display: flex;
  justify-content: right;
}
.modify_setting .card[data-v-00e7f279] {
  width: 101%;
  margin-top: 45px;
}
.modify_setting .card .cardimg[data-v-00e7f279] {
  display: inline-block;
  vertical-align: top;
}
.modify_setting .card .right[data-v-00e7f279] {
  margin-left: 24px;
}
.modify_setting .card .top[data-v-00e7f279] {
  margin-top: 24px;
}
.modify_setting .remind[data-v-00e7f279] {
  margin-top: 23px;
  font-family: Roboto;
  font-size: 0.9375rem;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 14px;
  letter-spacing: normal;
  text-align: left;
  color: #a7a8ac;
}
.modify_setting .sliderBlock[data-v-00e7f279] {
  margin-top: 45px;
}
.modify_setting .radioBlock[data-v-00e7f279] {
  color: #EBEBEB;
  margin-left: 25px;
}
.modify_setting .radioBlock .flex[data-v-00e7f279] {
  display: flex;
  align-items: center;
}
.modify_setting .radioBlock .flex span[data-v-00e7f279] {
  margin: 0 20px;
}
.modify_setting .radioBlock .flex span.disable[data-v-00e7f279] {
  color: #a7a8ac;
}
.modify_setting .radioBlock .flex .select_ui[data-v-00e7f279] {
  width: 200px;
}
.modify_setting .radioBlock .input[data-v-00e7f279] {
  flex-shrink: 0;
  margin-top: 15px;
  width: 150px;
}
.groupModal .textLeft[data-v-00e7f279] {
  text-align: left;
}
.groupModal .textRight[data-v-00e7f279] {
  text-align: right;
}
.groupModal .textWhite[data-v-00e7f279] {
  color: #EBEBEB;
}
.groupModal .error[data-v-00e7f279] {
  color: #ff8484;
}
.groupModal .alertStyle[data-v-00e7f279] {
  height: 20px;
  margin-top: 10px;
}
.groupModal .un_group[data-v-00e7f279], .groupModal .un_bind[data-v-00e7f279], .groupModal .device_model_error[data-v-00e7f279], .groupModal .group-add[data-v-00e7f279], .groupModal .modifyGroup[data-v-00e7f279], .groupModal .device_unbind[data-v-00e7f279], .groupModal .device_reset[data-v-00e7f279], .groupModal .notification[data-v-00e7f279] {
  padding: 0 24px;
}
.groupModal .device_reset > div[data-v-00e7f279] {
  margin-top: 20px;
}
.groupModal .device_unbind ul[data-v-00e7f279] {
  margin-top: 20px;
}
.groupModal .device_unbind ul li[data-v-00e7f279] {
  margin-top: 10px;
}
.groupModal .un_bind div[data-v-00e7f279] {
  margin-top: 20px;
}
.groupModal .un_bind ul[data-v-00e7f279] {
  padding: 0 36px;
}
.groupModal .un_bind li[data-v-00e7f279] {
  list-style: circle;
  margin: 10px 0;
}
.groupModal .group-add .title[data-v-00e7f279], .groupModal .modifyGroup .title[data-v-00e7f279] {
  margin: 10px 0;
}
.groupModal .group-add .input[data-v-00e7f279], .groupModal .modifyGroup .input[data-v-00e7f279] {
  width: 100%;
}
.groupModal .modal_groupdevice[data-v-00e7f279] {
  min-height: 250px;
}
.groupModal .modal_groupdevice .select[data-v-00e7f279] {
  padding: 0 24px 24px 24px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.groupModal .modal_groupdevice .select .selectEach[data-v-00e7f279] {
  width: 48%;
}
.groupModal .modal_groupdevice .table[data-v-00e7f279] {
  color: white;
}
.groupModal .modal_groupdevice .table .editIcon[data-v-00e7f279] {
  width: 23px;
  height: 23px;
  cursor: pointer;
  transition: 0.1s all linear;
}
.groupModal .modal_groupdevice .table .editIcon[data-v-00e7f279]:hover {
  color: var(--color-main);
}
.groupModal .modal_groupdevice .table .editIcon[data-v-00e7f279]:active {
  color: var(--color-main-active);
}
.groupModal .modal_groupdevice .table .editIcon .noEdit[data-v-00e7f279] {
  color: #a7a8ac;
  cursor: not-allowed;
}
.SAVEMODIFY p[data-v-00e7f279] {
  color: #EBEBEB;
}
/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./src/assets/scss/page/app.scss?vue&type=style&index=0&id=7ba5bd90&lang=scss&scoped=true&external ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
1. color 
2. font-size
3. screen-size
*/
[data-v-7ba5bd90]:root {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
[data-theme=THEME_ASUS][data-v-7ba5bd90] {
  --color-main: #248DFF;
  --color-main-active: #61ADFF;
  --color-main-light: #61ADFF;
  --color-main-light2: #61ADFF;
  --color-main-light3: #61ADFF;
  --color-main-light4: #ECF5FF;
  --color-main-light5: #ECF5FF;
  --color-main-dark: #61ADFF;
  --color-main-dark2: #61ADFF;
  --color-main-dark3: #61ADFF;
  --primary-color: #248DFF;
}
[data-theme=THEME_PROART][data-v-7ba5bd90] {
  --color-main: #CDAC83;
  --color-main-active: #FCD9AF;
  --color-main-light: #FCD9AF;
  --color-main-light2: #FCD9AF;
  --color-main-light3: #FCD9AF;
  --color-main-light4: #ffe9d1;
  --color-main-light5: #dfc9a9;
  --color-main-dark: #b0875e;
  --color-main-dark2: #9a7a59;
  --color-main-dark3: #957b5d;
  --primary-color: #CDAC83;
}
@keyframes blowUpContent-7ba5bd90 {
0% {
    transform: scale(1);
    opacity: 1;
}
99.9% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(0);
}
}
@keyframes blowUpContentTwo-7ba5bd90 {
0% {
    transform: scale(2);
    opacity: 0;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
@keyframes blowUpModal-7ba5bd90 {
0% {
    transform: scale(0);
}
100% {
    transform: scale(1);
}
}
@keyframes blowUpModalTwo-7ba5bd90 {
0% {
    transform: scale(1);
    opacity: 1;
}
100% {
    transform: scale(0);
    opacity: 0;
}
}
@keyframes fadeIn-7ba5bd90 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0.7);
}
}
@keyframes fadeInFull-7ba5bd90 {
0% {
    background: rgba(0, 0, 0, 0);
}
100% {
    background: rgb(0, 0, 0);
}
}
@keyframes fadeOut-7ba5bd90 {
0% {
    background: rgba(0, 0, 0, 0.7);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes fadeOutFull-7ba5bd90 {
0% {
    background: rgb(0, 0, 0);
}
100% {
    background: rgba(0, 0, 0, 0);
}
}
@keyframes scaleUp-7ba5bd90 {
0% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
100% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
}
@keyframes scaleDown-7ba5bd90 {
0% {
    transform: scale(1) translateY(0px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translateY(1000px);
    opacity: 0;
}
}
@keyframes scaleBack-7ba5bd90 {
0% {
    transform: scale(1);
}
100% {
    transform: scale(0.85);
}
}
@keyframes scaleForward-7ba5bd90 {
0% {
    transform: scale(0.85);
}
100% {
    transform: scale(1);
}
}
@keyframes quickScaleDown-7ba5bd90 {
0% {
    transform: scale(1);
}
99.9% {
    transform: scale(1);
}
100% {
    transform: scale(0);
}
}