#mainMenu{margin-top: 40px; margin-bottom: 35px;}
#mainMenu > a > div{display: grid; grid-gap: 15px; align-items: center; grid-template-columns: 20px 1fr; padding: 10px 15px; box-sizing: border-box;}
#mainMenu > a > div > div{width: 100%;}
#mainMenu > a > div > div:first-child > div{position: relative; width: 20px; height: 20px;}
#mainMenu > a > div > div:first-child > div > div{position: absolute; width: 10px; height: 10px; background: var(--bg_red); border-radius: 50%; top: -3px; right: -6px;}
#mainMenu > a > div > div:nth-child(2){font-weight: bold; color: var(--text_black);}
#mainMenu > a > div.active > div:nth-child(2){color: var(--text_blue);}

#content{padding: 0px 25px;}
.contentGrid{display: grid; grid-gap: 15px;}
.contentGrid.cg2{grid-template-columns: 1fr 1fr;}
.contentGrid.cg2 > div{width: 100%;}

.contentMedium{max-width: 550px;}

.contentfooterSpace{height: 25px;}

#footer{padding: 20px 15px 25px 15px; margin-bottom: 0px; font-size: 11px; line-height: 18px;}

#layout{display: grid; grid-template-columns: 230px 1fr; min-height: 100vh;}
#layout > div{width: 100%; display: relative;}
#layout > div:first-child{border-right: 1px solid var(--bg_line); position: relative; overflow: hidden;}
#layout .lrBg{position: absolute; top: -10px; left: -10px; width: 100%; height: 100%; z-index: -1; opacity: 0.3; filter: blur(3px); padding: 10px; background-repeat: no-repeat; background-size: cover;}
#layout .lrBg:before{content: ''; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-image: linear-gradient(to bottom, transparent, white);}

.layoutContentMenu{display: grid; grid-template-columns: 250px 1fr; grid-gap: 20px;}
.layoutContentMenu > div{width: 100%;}

.layoutOpt{white-space: nowrap; margin-bottom: 15px;}
.layoutOpt > div{display: inline-block;}
.layoutOpt > div:not(:last-child){margin-right: 10px;}

.layoutBtn{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 15px;}
.layoutBtn > div{width: 100%; border: 1px solid var(--bg_line); transition: var(--transition); cursor: pointer; border-radius: 10px; padding: 15px 0px;}
.layoutBtn > div:hover{border: 1px solid var(--bg_blue);}
.layoutBtn > div > div:first-child > div{width: 25px; height: 25px; margin-bottom: 10px;}
.layoutBtn > div > div:nth-child(2){text-align: center; font-weight: bold;}

.layoutWork{max-width: 600px; margin-top: 25px;}
.layoutWork .lwHead{display: grid; grid-template-columns: 130px 1fr; grid-gap: 20px;}
.layoutWork .lwHead > div{width: 100%;}
.layoutWork .lwHead > div:first-child > div{padding-bottom: 150%; background-color: var(--bg_silvercalm); border-radius: 10px; position: relative;}
.layoutWork .lwHead > div:first-child span{position: absolute; top: 10px; left: 10px; padding: 5px 10px; border-radius: 5px; background: var(--bg_blue); color: var(--text_white); font-size: 11px; font-weight: bold;}
.layoutWork .lwHead > div:first-child > div:hover span{display: none;}
.layoutWork .lwHead > div:first-child > div{padding-bottom: 150%; background-color: var(--bg_silvercalm); border-radius: 10px; position: relative;}
.layoutWork .lwHead > div:nth-child(2){padding-top: 15px;}
.layoutWork .lwHead .lhTitle{font-size: 17px; font-weight: bold;}
.layoutWork .lwHead .lhUrl{font-size: 11px; margin-top: 2px; color: var(--text_blue);}
.layoutWork .lwHead .lhInfo{margin-top: 15px; display: grid; grid-gap: 15px;}
.layoutWork .lwHead .lhInfo.p2{grid-template-columns: 1fr 1fr;}
.layoutWork .lwHead .lhInfo.p3{grid-template-columns: 1fr 1fr 1fr;}
.layoutWork .lwHead .lhInfo > div{width: 100%; border-radius: 10px; border: 1px solid var(--bg_line);}
.layoutWork .lwHead .lhInfo > div > div:first-child{font-size: 15px; padding: 10px 15px; background: var(--bg_silvercalm);}
.layoutWork .lwHead .lhInfo > div > div:nth-child(2){padding: 10px 15px; font-family: 'bold';}
.layoutWork .lwHead .lhInfo > div > div:nth-child(3){padding: 0px 15px 10px 15px;}
.layoutWork .lwHead .ihStatus{margin-top: 15px;}
.layoutWork .lwHead .ihStatus > div{display: inline-block; padding: 5px 10px; border-radius: 10px; border: 1.5px solid var(--bg_orange);}
.layoutWork .lwHead .ihStatus > div:not(:last-child){margin-right: 10px;}
.layoutWork .lwHead .ihStatus > div.decline{border: 1.5px solid var(--bg_red);}
.layoutWork .lwHead .ihStatus > div.accept{border: 1.5px solid var(--bg_green);}
.layoutWork .lwHead .liRev{position: relative; font-size: 11px; cursor: pointer;}
.layoutWork .lwHead .liRev > div{position: absolute; top: 3.5px; left: 4px; width: 7px; height: 7px; background: red; border-radius: 50%;}
.layoutWork .iwAdminOpt{margin-top: 15px; white-space: nowrap;}
.layoutWork .iwAdminOpt > div{padding: 10px 15px; text-align: center; cursor: pointer; display: inline-block; border: 1px solid var(--bg_line); border-radius: 5px;}
.layoutWork .iwAdminOpt > div:not(:last-child){margin-right: 10px;}
.layoutWork .iwAdminOpt > div > div:first-child > div{width: 15px; height: 15px; margin-bottom: 5px;}
.layoutWork .lwOption{white-space: nowrap; margin-top: 15px;}
.layoutWork .lwOption > div:not(:last-child){margin-right: 15px;}
.layoutWork .lwOption > div{display: inline-block;}
.layoutWork .lwOption .loItem{display: grid; grid-template-columns: 15px 1fr; cursor: pointer; font-weight: bold; grid-gap: 5px; align-items: center;}
.layoutWork .lwOption .loItem > div{width: 100%;}
.layoutWork .lwOption .loItem > div:first-child > div{width: 15px; height: 15px;}
.layoutWork .lwOption .loItem:hover{color: var(--text_blue);}
.layoutWork .lwRequest{border: 1px solid var(--bg_red); padding: 5px 7px; background: var(--bg_yellowcalm);}
.layoutWork .lwBtn{margin: 20px 0px;}
.layoutWork .lwTxt{margin: 20px 0px;}
.layoutWork .lwTxtWarning{margin: 20px 0px; padding: 5px 10px; border-radius: 5px; background: var(--bg_red); color: var(--text_white);}

.layout_card_opt{white-space: nowrap; margin-top: 7px;}
.layout_card_opt > div{display: inline-block; padding: 3px 7px; border-radius: 5px; cursor: pointer; font-size: 12px;}
.layout_card_opt > div:not(:last-child){margin-right: 5px;}
.layout_card_opt > div.red{background: var(--bg_red); color: var(--text_white);}
.layout_card_opt > div.blue{background: var(--bg_blue); color: var(--text_white);}

#popup{width: 100%; top: 0px; left: 0px; height: 100%; position: fixed; z-index: 90; background: rgba(239, 239, 239, 0.55); overflow: auto;}
#popup table{width: 100%; height: 100%;}
#popup .p_canvas{max-width: 400px; width: 80%; background: var(--bg_white); margin-top: 50px; margin-bottom: 50px; box-shadow: 0 0 6px 0 rgba(161, 161, 161, 0.5); border-radius: 5px; overflow: hidden;}

.popup_head_close{display: grid; grid-template-columns: 1fr 15px; padding: 10px 15px; box-sizing: border-box; background: var(--bg_bluecalm); grid-gap: 10px; align-items: center;}
.popup_head_close > div{width: 100%;}
.popup_head_close > div:first-child{font-weight: bold; font-size: 17px;}
.popup_head_close > div:first-child .phcBtn{padding: 3px 7px; border-radius: 50px; background: var(--bg_blue); color: var(--text_white); font-size: 11px; position: relative; top: -2px; left: 5px; cursor: pointer;}
.popup_head_close > div:nth-child(2) > div{width: 15px; height: 15px;}

.popup_head_action{height: 45px; padding: 0px 15px;}
.popup_head_action .pha_title{font-size: 15px; font-family: 'bold'; float: left; margin-top: 15px;}
.popup_head_action .pha_action{float: right;}
.popup_head_action .pha_action button{margin-top: 10px;}

.popup_option{padding: 10px 15px; white-space: nowrap;}
.popup_option > div{display: inline-block; padding: 3px 5px; border-radius: 3px; font-weight: bold;}
.popup_option > div:not(:last-child){margin-right: 5px;}
.popup_option .poAccept{background: var(--bg_green); color: var(--text_white);}
.popup_option .poDecline{background: var(--bg_red); color: var(--text_white);}

.popup_list{list-style-type: none;}
.popup_list > li{padding: 15px 20px; cursor: pointer; transition: all 0.5s ease;}
.popup_list > li:not(:last-child){border-bottom: 1px solid #f6f6f6;}
.popup_list > li:hover{background: #e7e7e7;}
.popup_list > a > li{padding: 15px 20px; cursor: pointer; transition: all 0.5s ease; color: var(--text_black);}
.popup_list > a:not(:last-child) > li{border-bottom: 1px solid #f6f6f6;}
.popup_list > a:hover > li{background: #e7e7e7;}
.popup_list.plIcon li{display: grid; grid-template-columns: 20px 1fr; grid-gap: 10px; align-items: center;}
.popup_list.plIcon li > div{width: 100%;}
.popup_list.plIcon li > div:first-child > div{width: 20px; height: 20px;}

#alert{width: 100%; height: 0px; position: fixed; top: 0px; left: 0px; z-index: 100;}
#alert > div{width: 90%; max-width: 450px; transition: 0.2s; box-shadow: 0 0 6px 0 rgba(161, 161, 161, 0.5); position: relative; top: -100px; border-radius: 20px;}
#alert > div > div{padding: 9px 15px 11px 15px; text-align: center; color: var(--text_white);}
#alert > div.success{background: var(--bg_alert_green);}
#alert > div.warning{background: var(--bg_alert_orange);}
#alert > div.failed{background: var(--bg_alert_red);}

.page_empty{padding: 100px 0px 110px 30px; font-size: 20px; color: var(--text_silver);}

.box_empty{padding: 50px 0px 70px 0px; font-size: 15px; text-align: center; color: var(--text_silver);}

.dropdown{display: inline-block; position: relative; cursor: pointer;}
.dropdown > div:first-child{padding: 7px 30px 8px 15px; max-width: 170px; background: #429dff; color: white; border-radius: 15px; position: relative;}
.dropdown > div:first-child:before{content: "▼"; position: absolute; font-size: 11px; top: 8px; right: 12px;}
.dropdown > div:last-child{display: none; z-index: 5; position: absolute; top: 100%; width: 200px; background: white; border: 2px solid #429dff; box-shadow: -1px 1px 10px silver;}
.dropdown > div:last-child > div{padding: 10px 15px;}
.dropdown > div:last-child > div:hover{text-decoration: underline;}
.dropdown > div:last-child > div:not(:last-child){border-bottom: 1px solid var(--bg_line);}
.dropdown:hover > div:first-child{border-radius: 15px 15px 0px 0px;}
.dropdown:hover > div:first-child ~ div:last-child{display: block;}

.tab .tOpt{white-space: nowrap; width: 100%; border-bottom: 1.5px solid var(--bg_line);}
.tab .tOpt > div{display: inline-block; padding: 10px 0px; font-weight: bold; color: var(--text_silver); position: relative; cursor: pointer;}
.tab .tOpt > div:not(:first-child){margin-left: 25px;}
.tab .tOpt > div.active{color: var(--text_black);}
.tab .tOpt > div:before{content: ''; transition: var(--transition); opacity: 0; position: absolute; bottom: -1.5px; left: 0px; width: 100%; height: 2px; background: var(--bg_black);}
.tab .tOpt > div:hover:before, .tab .tOpt > div.active:before{opacity: 1;}
.tab .tBody > span{display: none;}
.tab .tBody > span.active{display: block;}

.section{border: 1px solid var(--bg_line); border-radius: 13px; overflow: hidden;}
.section .title{font-size: 20px; font-weight: bold; padding: 20px;}
.section .body{padding: 0px 20px 20px 20px;}

.header{margin-bottom: 15px; padding: 15px 25px;}
.header .welcome{margin-top: 40px;}
.header .welcome > div:nth-child(2){font-size: 25px; margin-top: 3px; font-weight: bold;}
.header .clock{margin-top: 30px; margin-right: 50px; color: var(--text_silver); position: absolute; top: 10px; right: 15px;}
.header .clock > span:not(:last-child){font-size: 50px;}
.header .clock > span:last-child{font-size: 30px;}
.header .title{margin-top: 35px;}
.header .title > div:first-child{font-size: 25px; font-family: 'bold';}
.header .title > div:nth-child(2){color: #9e9e9e; margin-top: 5px;}
.header .back{display: grid; grid-gap: 15px; grid-template-columns: 25px 1fr; align-items: center; padding: 10px 15px;}
.header .back > div{width: 100%;}
.header .back > div:first-child > div{width: 25px; height: 25px;}

.headerBack{display: grid; grid-template-columns: 20px 1fr; grid-gap: 10px; align-items: center;}
.headerBack > div{width: 100%;}
.headerBack > div:first-child > div{width: 20px; height: 20px;}
.headerBack.mobileBack{display: none;}

.hamburger{width: 30px; height: 30px; cursor: pointer; position: fixed; top: 15px; left: 15px; display: none; z-index: 50;}
.hamburger > div{width: 25px; height: 25px; margin-top: 3px; transition: all 0.2s ease;}
.hamburger > div.active{transform: rotate(90deg);}

.sidenav .snLogo{padding: 20px 0px;}
.sidenav .snLogo > a > div{width: 115px;}
.sidenav .snLogo > a > div > div:first-child{padding-bottom: 23%;}
.sidenav .snLogo > a > div > div:nth-child(2){display: none; padding-bottom: 100%;}
.sidenav .snStatus{margin-bottom: 15px; text-align: center;}
.sidenav .snStatus > span{padding: 5px 10px; border-radius: 5px; color: var(--text_white); background: var(--bg_blue); font-size: 11px; font-weight: bold;}

.panelRevision{position: fixed; display: none; right: 0px; top: 0px; z-index: 55; width: 100%; max-width: 400px; height: 100%; background: var(--bg_silvercalm); box-shadow: 0px 0px 10px var(--shadow); border-left: 1px solid var(--bg_silver);}
.panelRevision > div{display: grid; height: 100%; grid-template-rows: 65px 1fr;}
.panelRevision > div > div{width: 100%; height: 100%;}
.panelRevision > div > div:nth-child(2){overflow: auto; padding-bottom: 15px;}
.panelRevision .prHead{padding: 15px 15px 5px 15px; box-sizing: border-box; display: grid; grid-template-columns: 15px 1fr; grid-gap: 15px; align-items: center; font-weight: bold; font-size: 15px;}
.panelRevision .prHead > div{width: 100%;}
.panelRevision .prHead > div:first-child > div{width: 15px; height: 15px;}
.panelRevision .prChat{padding: 0px 15px; margin-top: 5px;}

.menuVertical{border: 1px solid var(--bg_line); border-radius: 5px; overflow: hidden;}
.menuVertical > div{padding: 15px; display: grid; grid-template-columns: 15px 1fr; cursor: pointer; transition: var(--transition); grid-gap: 15px; align-items: center; box-sizing: border-box; position: relative;}
.menuVertical > div:not(:last-child){border-bottom: 1px solid var(--bg_line);}
.menuVertical > div:hover{background: var(--bg_silvercalm);}
.menuVertical > div.active{color: var(--text_blue);}
.menuVertical > div.active:before{content: ''; position: absolute; right: 0px; top: 10px; height: 27px; width: 2.5px; background: var(--bg_blue);}
.menuVertical > div > div{width: 100%; font-weight: bold;}
.menuVertical > div > div:first-child > div{width: 15px; height: 15px;}
.menuVertical .mvCount{padding: 2.5px 5px 3px 5px; border-radius: 5px; font-size: 9px; background: var(--bg_red); color: var(--text_white); vertical-align: middle;}

.siderightClose{display: none; position: absolute; top: 10px; right: 20px; z-index: 26;}
.siderightClose > div{width: 20px; height: 20px;}

.info{padding: 10px 15px; border-radius: 10px; background: var(--bg_silvercalm);}