:root{--greyBack:#F5F5F5; --greyLight:#D0D0D0; --greyBorder:#A0A0A0; --greyDark:#555555; --green:#84B827; --blue:#2F6FDE; --yellow:#F0C328; --orange:#FF8800; --red:#FF6347;}
html{margin:0; font-family:"Arial"; font-size:16px; text-align:center; color:var(--greyDark); background:var(--greyBack); overflow-x:hidden; overflow-y:scroll; user-select:none;}
body{margin:0; min-width:100%; min-height:100%;}
#main{padding-left:200px; padding-top:80px; margin-bottom:100px; min-height:1400px; /*max-width:1400px;*/ overflow-x:hidden; background:var(--greyBack);}

.topBar{font-size:14px; position:fixed; z-index:2; background:var(--greyDark); height:40px; width:100%; border-bottom:3px solid var(--green);
box-shadow:0 8px 8px #C0C0C0;}
.topLeft{float:left; padding:5px 0;}
.logo{width:125px; height:30px; padding-left:8px; float:left;}
.topUser{float:left; color:white; margin-top:12px; margin-left:20px;}
.topRight{float:right; color:white; margin-top:8px; margin-right:10px;}
.logout{width:25px; margin-left:6px; vertical-align:middle;}

.navBar{width:200px; height:100%; padding-top:52px; text-align:left; position:fixed; z-index:1; background:var(--greyBack); box-shadow:5px 0px 5px var(--greyLight); overflow-x:hidden;}
.navBut, .navButAct{width:100%; margin:6px 0; line-height:26px; padding-left:10px; color:var(--greyDark); text-wrap:nowrap; overflow:hidden; transition:0.2s;}
.navButAct{background:var(--green);}
.navBut:hover{background:var(--greyLight); transition:0.2s;}
.navTog{width:24px; padding:0 8px; color:white; float:left;}
.navIcon{width:18px; margin-right:10px; vertical-align:text-bottom; opacity:0.7;}
.navTit{width:100%; margin:2px 0; padding:0 60px; height:22px; line-height:22px; vertical-align:middle; background:var(--greyDark); color:var(--greyBack);}

input[type=submit]{font-size:16px; vertical-align:top; line-height:24px; padding:0 12px; margin:6px; min-width:80px; max-width:200px; color:white; background:var(--green); border:none; border-radius:12px; user-select:none;}	
input[type=submit]:active{background:var(--greyDark); border:none;}
input[type=submit]:focus{outline:none;}

input[type=checkbox]{width:20px; height:14px; margin:1px; margin-right:4px; outline:none; accent-color:var(--green); vertical-align:text-top;}
input:focus[type=checkbox]{outline:none;}
label{font-size:14px;}

.card{display:inline-block; width:340px; min-height:400px; vertical-align:top; margin:0 6px 18px 6px; padding-bottom:10px; background:white; box-shadow:0px 0px 10px 5px var(--greyLight); border-radius:10px; overflow:hidden;}
.cardSet1{min-height:440px;}
.cardSet2{min-height:280px;}
.cardT1, .popT1{font-size:18px; letter-spacing:0.5px; color:white; text-align:center; background:var(--greyDark); padding:8px 0;}
.cardT2{font-weight:bold; font-size:14px; text-align:left; padding:4px 30px; margin-top:8px;}
.cardT3{font-size:14px; text-align:left; width:90%; padding:4px; padding-left:40px;}
.T18{font-size:18px; width:80%; text-align:left; margin-left:15%; margin-bottom:5px;}
.cardSep{height:3px; background:var(--green); margin-bottom:8px;}
.cardSep2{height:1px; background:#E0E0E0; margin:4px 15px;}
textarea{width:90%; resize:none; border-radius:6px; border:solid 1px var(--greyBack); outline:none; background:var(--greyBack); padding:5px;}

h3{margin:2px 0px 4px 0px; font-size:14px; font-weight:normal;}
.valRd, .valWr, .valRdWr, select, input[type=date], input[type=time], input[type=datetime]{font-size:14px; width:290px; border-radius:12px; border:solid 1px var(--greyBorder); background:var(--greyBack); margin:2px auto; height:18px; line-height:14px; text-align:center; font-family:inherit; color:var(--greyDark);}
.valRd{height:20px; line-height:20px; width:292px; border-color:var(--greyLight);}

select{font-family:inherit; height:23px;}
select:disabled{opacity:1; border-color:var(--greyLight);}
select:focus{outline:none; /*1px solid grey;*/}

input[type=date]{text-align:center; height:20px; line-height:18px; padding-right:8px;}
input[type=time]{width:70px; height:18px; padding-left:4px;}
input[type=datetime]{width:160px; height:18px; line-height:18px;}
.link{font-size:12px;}

table{border-collapse:collapse; font-size:14px; width:98%; margin:auto; table-layout:auto;}
table th{border:1px solid #DDDDDD; padding:4px; font-weight:normal; background:var(--greyDark); color:white;}
table td{border:1px solid #DDDDDD; padding:4px;}
table tr:nth-child(even){background:var(--greyBack);}
table tr:hover{background:#EEEEEE;}
table
{
    .valRd, .valWr, .valRdWr, select, input[type=date], input[type=time], input[type=datetime-local] {font-size:14px; width:95%; border:none; background:transparent; margin:auto; text-align:center; font-family:inherit; color:var(--greyDark);}
    input:focus{outline:1px solid grey;}
    input{width:90%;}
    select{min-width:60px;}
    th{height:30px;}
    td{height:30px;}
    .stackVal{margin:4px 0;}
}

.divPwd input:-webkit-autofill,
.divPwd input:-webkit-autofill:hover, 
.divPwd input:-webkit-autofill:focus, 
.divPwd input:-webkit-autofill:active {transition: background 5000s;-webkit-text-fill-color:var(--greyDark) !important;}
.divPwd input{height:21px; width:75%; margin-left:24px; text-align:center; border:0; outline:0; background:transparent;}
.delIcon{width:18px; opacity:0.7;}
.ulkIcon{width:20px; opacity:0.7;}

.divPwd{width:290px; border:1px solid var(--greyBorder); border-radius:12px; height:22px; margin:auto; margin-bottom:6px; background:var(--greyBack);}

.imgLogin{width:18px; height:18px; opacity:0.6; vertical-align:middle; border-bottom:1px solid transparent;}
.imgPwd{width:20px; height:20px; opacity:0.6; vertical-align:middle; border-bottom:2px solid transparent;}

.tip{position:relative; display:inline-block;}
.tipImg{width:15px; height:15px; vertical-align:top; padding:0 5px;}
.tip .tipText{visibility:hidden; max-width:140px; background:var(--greyDark); color:white; text-align:center;
    font-size:12px; font-weight:normal; border-radius:8px; padding:5px; position:absolute; z-index:2; top:150%; left:-70px; opacity:0; transition:opacity 0.5s;}
.tip:hover .tipText{visibility:visible; opacity:1.0;}

#msg {font-size:12px; color:red; min-height:20px;}
#update{font-size:12px; height:20px; margin-top:15px;}
#offset{display:none;}

.barBack{background:#E5E5E5; border-radius:10px; width:292px; height:18px; margin:0px auto 5px;}
.bar, .barDbl{background:var(--green); border-radius:inherit; height:inherit; width:0; color:var(--greyDark);}
h5{margin:0; margin-left:auto; padding:3px 6px; font:inherit; font-size:12px; font-weight:bold;}

.lamp{width:90%; height:6px; margin:auto; margin-top:5px; border-radius:3px;}
.jBack{background:lightgrey; width:90%; max-width:200px; height:6px; margin:auto; margin-top:5px; border-radius:3px;}
.jBar{background:var(--green); border-radius:inherit; height:inherit;}

.setMode{border:3px solid var(--greyLight); border-radius:12px; display:inline-block; width:70px; font-size:14px; height:20px; line-height:21px;}

.btnGroup{background:#E8E8E8; border-radius:20px; font-family:Arial; font-size:12px; text-align:center; padding:4px; margin:0 auto; width:fit-content;}
.btnGroupOn, .btnGroupOff{display:inline-block; width:70px; background:transparent; padding:5px 0; border-radius:16px; transition:0.5s background;}
.btnGroupOn{background:white; font-weight:bold; transition:0.5s background;}

h6{font-size:0;}
.space{height:10px;}
p{font-size:14px; margin:4px;}

.popup{display:none; position:fixed; z-index:3; left:0; top:0; width:100%; height:100%; overflow:auto; background:#FFF6;}
.popup-content{background:white; box-shadow:0px 0px 10px 5px var(--greyLight); margin:5% auto; padding-bottom:20px; width:340px; border-radius:10px; overflow:hidden;}
.popClose{font-size:24px; line-height:16px; padding:2px 8px; float:right;}
.popT1{font-size:16px; padding-left:26px;}

#chart20200{margin:0 10px; height:240px; border:1px solid #E0E0E0;}

#botSpace{height:50px;}
.botBar{box-shadow:0 -6px 6px var(--greyBorder); position:relative; z-index:1; padding:8px 0; width:100%; color:white; background:var(--greyDark);}
.botDiv1{display:inline-block; margin:5px 40px;}
.botLogo{width:100px; height:24px; vertical-align:bottom;}
.botDiv2, .botDiv3, .botDiv4{display:inline-block; font-size:11px; width:160px;}