@charset "UTF-8";
*,
*::before,
*::after{box-sizing:border-box;margin:0;padding:0}

@font-face{
    font-family:'SUIT';
    font-weight:400 700;
    src:url('/fonts/SUIT-Variable.woff2') format('woff2-variations');
}

html, body{height:100vh;font-family:"SUIT", sans-serif;line-height:1.6;background-image:url(/images/bg.png);background-size:cover;background-position:top;background-repeat:no-repeat;background-attachment:fixed;transition:opacity 0.3s ease-in-out}
ul, ol{list-style:none}
a{text-decoration:none;color:inherit}
button,
input,
select,
textarea{font:inherit;background:none;border:none;outline:none}

.sample{width:100%;height:100%;background-repeat:no-repeat;background-size:100% 100%}
body, *{font-family:"SUIT", sans-serif;color:#eaefe7;font-size:min(10px + 0.3vw, 17px);font-weight:400;line-height:1.5;font-variant-numeric:tabular-nums}
body ::-webkit-scrollbar{width:0.5rem;height:0.5rem}
body ::-webkit-scrollbar-track{background-color:transparent;border-radius:5px}
body ::-webkit-scrollbar-thumb{background-color:rgba(18, 18, 18, 0.2);border-radius:5px;border:1px solid rgba(255, 255, 255, 0.2)}
body ::-webkit-scrollbar-thumb:hover{background-color:rgba(16, 16, 16, 0.4)}
h1,
h2,
h3,
h4,
h5{font-family:"SUIT", sans-serif;color:#eaefe7;font-weight:700;line-height:1.6}
h1{font-size:1.5rem;line-height:1}
h2{font-size:1.25rem;line-height:1;font-weight:600}
h3{font-size:1.125rem}
h4{font-size:1rem}
h5{font-size:0.875rem}
a{font-family:"SUIT", sans-serif;color:#eaefe7;text-decoration:none;transition:color 0.3s ease}
p{font-family:"SUIT", sans-serif}
img{max-width:100%;max-height:100%}
main{padding-top:4rem;padding-left:4.5rem}

.icon{width:1rem;height:1rem;fill:#eaefe7;margin-right:0.25rem}
.container{position:relative;height:calc(100vh - 5rem);overflow-y:auto;padding:0 1rem}
.grid{display:grid;grid-template-columns:repeat(12, 1fr);gap:0.625rem;grid-template-rows:repeat(3, auto);position:relative;height:calc(100vh - 6rem);overflow-y:auto}
.gridCol{display:flex;flex-direction:column;justify-content:flex-start;align-items:start;row-gap:0.5rem;width:100%;height:calc(100% - 3.5rem)}
.gridCol .colTop{width:100%;height:3rem}
.gridCol .colBtm{flex:1;width:100%}
.wrap{background-color:rgba(18, 18, 18, 0.9);border-radius:20px;padding:1.25rem 1.25rem 1.25rem 1.25rem;backdrop-filter:blur(8px)}

.popupBg{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(30, 30, 40, 0.3);backdrop-filter:blur(5px)}
.popupBg .wrap{position:absolute;width:70%;max-height:30rem;top:40%;left:50%;border:1px solid #322f4c;transform:translate(-50%, -50%);box-shadow:0 4px 1rem rgba(0, 0, 0, 0.4)}

.topBar{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:nowrap;position:fixed;top:0;left:0;width:100vw;height:4rem;padding:0 1rem;z-index:999}
.topBar .topBarLeft{display:flex;align-items:center;justify-content:center;width:auto}
.topBar .topBarLeft a{display:flex;align-content:center}
.topBar .topBarLeft img{width:auto;height:35px;object-fit:contain;margin-right:0.75rem}
.topBar .topBarLeft .icon{flex-shrink:0;width:1rem;height:0.75rem}
.topBar .topBarLeft h3{font-size:1.125rem;white-space:nowrap}
.topBar .topBarLeft .companySelect{position:relative;margin-right:0.5rem;cursor:pointer}
.topBar .topBarLeft .companyList{position:absolute;top:100%;left:-2rem;width:max-content;background-color:rgba(18, 18, 18, 0.9);z-index:10;box-shadow:0 2px 5px rgba(0, 0, 0, 0.1)}
.topBar .topBarLeft .companyList ul{overflow-y:auto;max-height:30rem}
.topBar .topBarLeft .companyList li{padding:0.5rem 1rem;white-space:nowrap;color:#9c9c9c;font-size:1.125rem}
.topBar .topBarLeft .companyList li:hover{background-color:#23232a;color:#eaefe7}
.topBar .topBarLeft .companyList .virtualScroll{position:relative;overflow-y:auto;max-height:30rem;padding:0;margin:0;list-style:none}
.topBar .topBarLeft .companyList .renderArea{position:absolute;top:0;left:0;right:0}
.topBar .topBarLeft .companyList .spacer{width:100%}
.topBar .topBarLeft .companyList .companyItem{position:absolute;left:0;right:0;height:36px;line-height:36px;padding:0 1rem;white-space:nowrap;color:#9c9c9c;font-size:1.125rem;transition:background-color 0.15s;cursor:pointer}
.topBar .topBarLeft .companyList .companyItem:hover{background-color:#23232a;color:#eaefe7}
.topBar .topBarLeft .searchFirm{width:100%;padding:0.2rem 0.5rem;background-color:#1c1c20;border:1px solid #6b6b6b;border-radius:5px}
.topBar .topBarLeft .selectaddBox{position:relative;display:flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.25rem 1rem;border-radius:5px;background-color:transparent;cursor:pointer;user-select:none}
.topBar .topBarLeft .selectaddBox:hover{background-color:#1c1c20}
.topBar .topBarLeft .selectaddBox .selectValaue{display:inline-block;margin-top:0.2rem;font-size:1rem;font-weight:600}
.topBar .topBarLeft .selectaddBox .selectOption{display:none;position:absolute;top:100%;left:0;width:100%;z-index:10;box-shadow:0 2px 5px rgba(0, 0, 0, 0.1)}
.topBar .topBarLeft .selectaddBox .selectOption li{display:flex;align-items:center;justify-content:center;height:2.25rem;background-color:#1c1c20;color:#9c9c9c;line-height:1;font-size:1rem;font-weight:600}
.topBar .topBarLeft .selectaddBox .selectOption li:first-child{border-top-left-radius:5px;border-top-right-radius:5px}
.topBar .topBarLeft .selectaddBox .selectOption li:last-child{border-bottom-left-radius:5px;border-bottom-right-radius:5px}
.topBar .topBarLeft .selectaddBox .selectOption li:hover{background-color:#23232a;color:#eaefe7}
.topBar .topBarRight{display:flex;align-items:center;justify-content:center;gap:1rem;padding:0.5rem 0 0.5rem 2rem;border-radius:20px;background-color:rgba(18, 18, 18, 0.9)}
.topBar .topBarRight .state{display:flex;align-items:center;justify-content:center}
.topBar .topBarRight .stateR{color:#ff0202}
.topBar .topBarRight .stateR span{color:#ff0202}
.topBar .topBarRight .stateR svg{fill:#ff0202}
.topBar .topBarRight .stateO{color:#ffa702}
.topBar .topBarRight .stateO span{color:#ffa702}
.topBar .topBarRight .stateO svg{fill:#ffa702}
.topBar .topBarRight .stateB{color:#0077ff}
.topBar .topBarRight .stateB span{color:#0077ff}
.topBar .topBarRight .stateB svg{fill:#0077ff}
.topBar .topBarRight .red{color:#ff0202}
.topBar .topBarRight time,
.topBar .topBarRight button{display:flex;align-items:center;justify-content:center;font-size:0.875rem;font-weight:400}
.topBar .topBarRight time .icon,
.topBar .topBarRight button .icon{width:0.875rem;height:0.875rem}
.currentTime{font-variant-numeric:tabular-nums}

.alarmPopup{display:none;position:absolute;overflow:hidden;top:3.5rem;right:1rem;width:25rem;height:15rem;border:1px solid #23232a}
.alarmPopup.wrap{padding:0.75rem 1rem 1rem}
.alarmPopup table{width:100%;height:100%;border-collapse:collapse}
.alarmPopup table thead{position:sticky;top:0;z-index:1}
.alarmPopup table tbody{display:block;overflow-y:auto;width:23rem;height:11rem}
.alarmPopup table th,
.alarmPopup table td{padding:0.25rem;font-size:0.875rem}
.alarmPopup table tr{display:grid;grid-template-columns:13rem 1fr;width:100%}
.alarmPopup table tr.noData{grid-template-columns:1fr}
.alarmPopup table td{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:0.875rem}
.alarmPopup table td:first-child{width:13rem}
.alarmPopup table td:last-child{width:auto;text-align:center}

.sideBar{display:flex;align-items:center;justify-content:center;position:fixed;width:4.5rem;height:calc(100vh - 6rem);top:5rem;padding:1rem 0.5rem 1rem 1rem;border-radius:20px;background-color:rgba(18, 18, 18, 0.9);transition:all 0.5s ease;z-index:999}
.sideBar nav{display:flex;flex-direction:column;justify-content:space-between;align-items:center;flex-wrap:nowrap;width:100%;height:100%}
.sideBar nav ul{display:flex;flex-direction:column;justify-content:space-around;align-items:center;flex-wrap:nowrap;gap:0.5rem;width:100%;height:auto}
.sideBar nav ul li{display:flex;align-items:center;justify-content:center;position:relative;padding:0.75rem;border-radius:10px;background-color:#282430;cursor:pointer}
.sideBar nav ul li .navIcon{width:1.125rem;height:1.125rem;fill:#eaefe7}
.sideBar nav ul li h2{display:none;font-size:1rem;font-weight:600;transform:translateX(-20rem);opacity:0;transition:transform 0.3s ease}
.sideBar nav ul li:hover{background-color:#003399}
.sideBar nav ul li:first-child{background-color:rgba(18, 18, 18, 0.9)}
.sideBar nav ul li:first-child .navIcon{fill:#0077ff}
.sideBar nav ul li:nth-child(2){background-color:#2b2d55}
.sideBar nav ul li:nth-child(10){background-color:#202133}
.sideBar nav ul li:nth-child(11){background-color:#202133}
.sideBar nav ul li.active{background-color:#003399}
.sideBar nav .colorPicker{margin-top:auto;padding:0.75rem;border-radius:10px;background-color:rgba(18, 18, 18, 0.9);cursor:pointer}
.sideBar nav .colorPalette{display:none;position:absolute;left:2rem;bottom:4rem;width:2rem;line-height:1}
.sideBar nav .colorPalette .palette{width:1rem;height:1rem;cursor:pointer}
.sideBar nav .colorPalette .palette.p_orgin{width:0.7rem;height:0.7rem;margin:0.15rem;border:1px solid #ffffff;border-radius:20px}
.sideBar nav .colorPalette .palette.p_gray{fill:#414141}
.sideBar nav .colorPalette .palette.p_blue{fill:#165086}
.sideBar nav .colorPalette .palette.p_green{fill:#037e87}
.sideBar nav .colorPalette .palette.p_purple{fill:#8b8ab7}
.sideBar nav .colorPalette .palette.p_lgtgreen{fill:#8ab7a0}
.sideBar nav .colorPalette .palette.p_yellow{fill:#b9b07b}
.sideBar.expanded{width:11rem}
.sideBar.expanded li{width:9rem;justify-content:space-between}
.sideBar.expanded li h2{display:block;opacity:1;transform:translateX(0)}
.sideBar.expanded .colorPalette{width:10rem;left:1rem}

.button{display:inline-flex;align-items:center;justify-content:center;padding:0.5rem 1rem;border-radius:10px;border:1px solid #202133;background-color:#1c1c20;line-height:1;font-size:0.875rem;font-weight:600;cursor:pointer;transition:all 0.3s ease}
.button svg{margin-right:0.5rem;width:0.875rem;height:0.875rem}
.button:hover{background-color:#28283d;border:1px solid rgba(50, 47, 76, 0.4)}

.buttonLine{display:inline-flex;align-items:center;justify-content:center;margin:1rem 0;padding:0.25rem 1rem;border-radius:10px;border:1px solid #3c4248;background-color:#1c1c20;font-size:0.875rem;font-weight:600;cursor:pointer;transition:all 0.3s ease}
.buttonLine svg{margin-right:0.5rem}
.buttonLine:hover{background-color:#28283d;border:1px solid rgba(50, 47, 76, 0.4)}

.twobtn{display:flex;align-items:center;justify-content:center;gap:0.5rem}
.twobtn button{display:flex;align-items:center;justify-content:center;gap:0.5rem;width:8rem;height:2rem;border:1px solid #6b6b6b;border-radius:5px;cursor:pointer;transition:all 0.3s ease}
.twobtn button .icon{fill:#eaefe7}
.twobtn button.btnOne{border:1px solid #3c4248;background-color:rgba(18, 18, 18, 0.9)}
.twobtn button.btnOne:hover{border-color:#6b6b6b;background-color:rgba(50, 47, 76, 0.4)}
.twobtn button.btnTwo{border:1px solid #003399;background-color:#003399}
.twobtn button.btnTwo:hover{border-color:#6b6b6b;background-color:#003399}
.twobtn .buttonText{line-height:1;vertical-align:middle}

.selectBox{width:100%;border-radius:5px;background-color:#3c4248}
.selectBox select{width:100%;padding:0.2rem 0.5rem;background-color:transparent;appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;background-image:url("/images/icon_dorpdown.png");background-repeat:no-repeat;background-position:right 0.5rem center;background-size:1rem}
.selectBox select option{background-color:rgba(18, 18, 18, 0.9);padding:0.2rem 0.5rem}

.bgnone{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding-right:1rem;padding-bottom:0.5rem;height:3.5rem}
.bgnone .pageTitle{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:1rem}
.bgnone .checkDay{display:flex;flex-direction:row;justify-content:space-around;align-items:center;flex-wrap:nowrap;gap:0.5rem}
.bgnone .checkDay span{color:#0077ff;font-weight:700}
.bgnone .toggleSwitch{position:relative;width:1.75rem;height:0.8rem;border:1px solid #eaefe7;border-radius:13px;background:#23232a;cursor:pointer;transition:background-color 0.3s ease}
.bgnone .toggleSwitch.active{border:1px solid #eaefe7;background:#eaefe7}
.bgnone .toggleSwitch.active .toggleCircle{transform:translateX(3rem)}
.bgnone .toggleCircle{position:absolute;top:-1px;left:0;width:0.8rem;height:0.8rem;border-radius:50%;box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);background:#eaefe7;transition:transform 0.3s ease}
.bgnone .toggleSwitch.active .toggleCircle{transform:translateX(0.875rem);background:rgba(18, 18, 18, 0.9);border:1px solid #eaefe7}

.topArea{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding-bottom:0.5rem}
.topArea .pageTitle{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:1rem}
.topArea .checkDay{display:flex;flex-direction:row;justify-content:space-around;align-items:center;flex-wrap:nowrap;gap:0.5rem;width:20%;min-width:26rem;height:3rem;padding:0 1rem;border-radius:10px;background:rgba(18, 18, 18, 0.9)}
.topArea .checkDay .pickerT{width:3rem;white-space:nowrap;font-weight:500}
.topArea .checkDay input{width:100%;padding:0.25rem 1rem;border:1px solid #3c4248;border-radius:5px;background-color:#3c4248;text-align:center;font-size:0.875rem;transition:all 0.3s ease}
.topArea .checkDay input:hover{background-color:#191919;border:1px solid #6b6b6b}
.topArea .checkDay input:active{background-color:#3c4248}
.topArea .checkDay .button{width:auto;border-radius:5px;font-size:0.875rem;white-space:nowrap;cursor:pointer}
.topArea.expand .checkDay{width:37%;min-width:33rem}

.ctgControlState > .grid{grid-template-areas:"s1 s1 s1 s1 s1 s1 s1 s1 s1 s1 s1 s1" "s2 s2 s2 s2 s2 s2 s2 s2 s2 s2 s2 s2" "s3 s3 s3 s3 s3 s3 s3 s3 s3 s3 s3 s3";grid-template-rows:4fr 2fr 1fr;height:calc(100% - 3.5rem)}
.ctgControlState .setting{cursor:pointer}

.controlState .section2,
.controlState .section3{display:flex;flex-direction:column;justify-content:space-between;align-items:start;flex-wrap:nowrap;gap:0.5rem;overflow:hidden;height:100%}
.controlState section .titleArea{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%;height:2rem}
.controlState section .titleArea .setting{display:flex;align-items:center;justify-content:center}
.controlState section .titleArea .setting .icon{fill:#9c9c9c;transition:all 0.3s ease}
.controlState section .titleArea .setting .icon:hover{fill:#eaefe7}

.searchBar{display:flex;flex-direction:row;justify-content:space-around;align-items:center;flex-wrap:nowrap;gap:0.5rem;width:20%;min-width:26rem;height:3rem;padding:0 1rem;border-radius:10px;background:rgba(18, 18, 18, 0.9)}
.searchBar input{width:100%;padding:0.25rem 1rem;border:1px solid #3c4248;border-radius:5px;background-color:#3c4248;text-align:center;font-size:0.875rem;transition:all 0.3s ease}
.searchBar input:hover{background-color:#191919;border:1px solid #6b6b6b}
.searchBar input:active{background-color:#3c4248}
.searchBar .button{white-space:nowrap}

.buttonLine.paySet{border-color:#5073ff}
.buttonLine.paySet:hover{border-color:#33ffff}

.companyTable:hover{background-color:rgba(50, 47, 76, 0.4);cursor:default}
.companyTable td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.companyTable td.off{color:#ffffff7f}
.companyTable .buttonLine{margin:0;padding:0.25rem 1rem;color:#9966ff}
.companyTable .mode.auto{color:#0077ff;font-weight:700}
.companyTable .mode.normal{color:#eaefe7}
.companyTable .ctrlState.ctrl{color:#9966ff}
.companyTable .ctrlState.free{color:#99ff99}
.companyTable .state.on{color:#ffa702}
.companyTable .cant{color:#ff0202}

.searchBar label{color:#9c9c9c}

.popupTitle{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-bottom:0.5rem}

.popupCts{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0.5rem}
.popupCts label{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:7rem}
.popupCts label svg{cursor:pointer}
.popupCts label svg:hover{fill:#5073ff}
.popupCts input,
.popupCts .selectBox{width:calc(50% - 8rem);height:2rem;padding:0.2rem 0.5rem;border-radius:5px;background-color:#3c4248}
.popupCts input.fullSzie{flex:1}
.popupCts .redBox{width:100%;padding-left:7.5rem;background-image:linear-gradient(0deg, rgba(0, 51, 255, 0.2) 0%, rgba(0, 51, 255, 0) 100%);color:#a34eff;font-size:1.125rem}

.popupBg .wrap{overflow:hidden;height:100%;max-height:70%}
.popupBg .wrap .popupCts{height:calc(100% - 3rem);max-height:30rem;overflow-y:auto}
.popupBg .lastbox{width:100%;margin-top:1rem;background-color:#322f4c}
.popupBg .lastbox select{text-align:center}
.popupBg .lastbox option{background-color:#23232a}
.popupBg table{width:100%;margin-top:0.5rem;text-align:center}
.popupBg table thead{height:2rem;background-color:#23232a}
.popupBg table td{padding:0.25rem 0}
.popupBg table .waynode{color:#99ff99}

.popupBg.modebus .wrap{height:20rem}
.popupBg.modebus .popupCts{height:14rem}

.groupPop{position:relative;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.4)}
.groupPop .addpopup{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:wrap;row-gap:1rem;max-width:30rem}
.groupPop .addpopup input{width:calc(100% - 6rem);height:2rem;border-radius:5px;background-color:#3c4248}
.groupPop .addpopup input::placeholder{padding-left:0.5rem}
.groupPop.groupPlus3 input{width:100%}

.backicon{width:1rem;height:1rem;margin-left:1rem;fill:#eaefe7;cursor:pointer}

/* toast */
.toastArea{position:fixed;top:65px;right:30px;z-index:1300;width:300px}
.toast{display:flex;align-items:center;margin-bottom:10px;padding:23px 33px 23px 20px;box-shadow:2px 7px 15px rgba(0, 0, 0, 0.4);position:relative;width:300px;min-height:90px;font-size:16px;line-height:1.5;color:#ffffff;border-radius:8px;box-sizing:border-box}
.toastBlue{background-color:#5d49f1}
.toastRed{background-color:#e34b4b}
.toast .close{display:flex;align-items:center;justify-content:center;margin:0;position:absolute;top:0;right:0;width:40px;height:40px;font-size:20px;color:#ffffff;cursor:pointer}
.toast .close i{opacity:0.8}

/* dialog */
.dialog{display:flex;justify-content:center;align-items:center;position:fixed;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.4);z-index:7777}
.dialogBox{margin:0 auto;width:32rem;max-width:100%;padding:1rem;border-radius:.4rem;background-color:#f8f8f8}
.dialogMemo{min-height:8rem;margin:1rem;color:#282828;font-weight:600;line-height:2rem}
.dialogActArea{margin-top:1rem;text-align:right}
.dialogAct{display:inline-block;margin:0 .4rem;padding:1rem 2rem;border-radius:.4rem;background-color:#e0e0e0;color:#686868;font-weight:600}
.dialogAct:hover{background-color:#484848;color:#ffffff;cursor:pointer}

/* appLoading */
.appLoading{display:flex;justify-content:center;align-items:center;position:fixed;left:0;top:0;width:100%;height:100%;background-color:rgba(0, 0, 0, .4);z-index:8888}
.loader{position:relative;width:60px;height:60px;margin:75px;display:inline-block;vertical-align:middle}
.loader-7 .line{width:8px;position:absolute;border-radius:5px;bottom:0;background:-webkit-gradient(linear, left top, left bottom, from(#1ee95d), to(#5714ce));background:-webkit-linear-gradient(top, #1ee95d, #5714ce);background:-o-linear-gradient(top, #1ee95d, #5714ce);background:linear-gradient(to bottom, #1ee95d, #5714ce)}
.loader-7 .line1{left:0;-webkit-animation:line-grow 0.5s ease alternate infinite;animation:line-grow 0.5s ease alternate infinite}
.loader-7 .line2{left:20px;-webkit-animation:line-grow 0.5s 0.2s ease alternate infinite;animation:line-grow 0.5s 0.2s ease alternate infinite}
.loader-7 .line3{left:40px;-webkit-animation:line-grow 0.5s 0.4s ease alternate infinite;animation:line-grow 0.5s 0.4s ease alternate infinite}
@-webkit-keyframes line-grow{
    0%{height:0}
    100%{height:75%}
}
@keyframes line-grow{
    0%{height:0}
    100%{height:75%}
}

.disable{display:none !important}
.hidden{visibility:hidden !important}
.description{color:#a5a5a5}
.description a{font-weight:bold;text-decoration:underline}

.flatpickr-calendar .flatpickr-current-month input.cur-year{color:#393939}
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{color:#393939}