/* ---------------------
    - top menu
    - screen menu
--------------------- */
.hidden {
    display: none;
}

/* —v‘f”ñŽ‹‰» */
.unvisible {
    opacity: 0;
}

/* top menu */
#topmenu-wrap {
    margin-top: 5px;
}

#top-menu {
    position: relative;
    height: 32px;
    width: 100%;
    margin-bottom: 5px;
    display: grid;
    grid-template-rows: 40px 1fr;
    grid-template-columns: 90px 90px 90px 1fr 90px 90px 90px;
}

#top-menu-register {
    position: relative;
    height: 32px;
    width: 100%;
    margin-bottom: 20px;
    display: grid;
    grid-template-rows: 40px 1fr;
    grid-template-columns: 90px 1% 90px 90px 90px 90px 8px 140px 90px 90px 1fr 90px 90px 90px 90px 1%;
}

#lowertop-menu {
    position: relative;
    height: 32px;
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 40px 1fr;
    grid-template-columns: 90px 90px 90px 1fr 90px 90px 90px;
}

#maincontent-wrap {
    height: calc(100% - 80px);
    overflow: hidden;
}

#main-contents {
    width: 90%;
    height: calc(97% - 10px);
    min-width: 600px;
    min-height: 500px;
    position: relative;
    top: 1.5%;
    left: 5%;
    background-color: #444;
    border-radius: 10px;
}

.page_title {
    font-size: 24px;
    font-weight: 600;
}

/* screen menu */
.close {
    pointer-events: none;
    z-index: 1;
    width: 100%;
    height: calc(100vh - 82px);
    position: fixed;
    top: 50px;
    left: 0;
    transition: background-color .6s;
}

#navTgl:checked ~ .close {
	pointer-events: auto;
	background-color: rgba(0,0,0,.3);
}

#navTgl:checked ~ .contents {
	transform: translateX(250px);
}

/* :::::: toggle button :::::: */
#outer_tgl {
    position: relative;
}

#navTgl {
	display: none;
}

label {
	cursor: pointer;
	position: absolute;
	left: 0;
}

.open {
	z-index: 2;
	/*width: 48px;*/
	/*height: 48px;*/
	/*background: lightSeaGreen;*/
	transition: background .6s, transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.open::before,
.open::after {
	content: "";
}

.open span,
.open::before,
.open::after {
/*	
	content: "";
	position: absolute;
	top: calc(50% - 1px);
	left: 30%;
	width: 40%;
	border-bottom: 2px solid white;
	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
*/	
}

.open::before {
/*	transform: translateY(-8px);*/
}

.open::after {
/*	transform: translateY(8px);*/
}

.close {
	z-index: 65;
	width: 100%;
	height: 100%;
	pointer-events: none;
	transition: background .6s;
}

#navTgl:checked + .open {
	/*background: indianRed;*/
	background-image: url('./images/prev_mini.png');
	transform: translateX(250px);
}

#navTgl:checked + .open span {
	transform: scaleX(0);
}

#navTgl:checked + .open::before {
	transform: rotate(45deg);
}

#navTgl:checked + .open::after {
	transform: rotate(-45deg);
}

#navTgl:checked ~ .close {
	pointer-events: auto;
	background: rgba(0,0,0,.3);
}


/* :::::: drawer menu :::::: */
.menu {
    /*
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 40px 200px 40px 200px ;
    */
	z-index: 99;
	position: fixed;
	overflow: auto;
	top: 50px;
	left: -1px;
	width: 300px;
	height: calc(100% - 62px);
	margin: 0;
	padding: 10px;
	box-sizing: border-box;
	background: rgba(10,10,10,1);
	transform: translateX(-100%);
	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.menu h2,
.menu a {
    color: white;
}

.menu h2 {
    width:180px;
    height:30px;
    text-align: left;
    padding-left: 15px;
    margin: 10px 0 10px 15px;
    border-left: 10px solid transparent;
}

.menu h2:first-child {
    border-left-color: #68d5db;
}

.menu h2:not(:first-child) {
    margin-top: 20px;
    border-left-color: #68d5db;
}

.menu ul {
	margin: 0;
	padding: 0;
}
.menu li {
    position: relative;
	font-size: .9em;
	line-height: 1.4;
}

.menu li:not(:first-child) {
    border-top: 1px dashed rgba(255,255,255,.4);
}

.menu a,
.span-menu {
    display: block;
    padding: 1em 2em;
    text-decoration: inherit;
    transition: background 0.8s;
}

.span-menu {
    cursor: pointer;
}

.menu li a::before,
.span-menu::before,
.menu li a::after,
.span-menu::after {
    position: absolute;
    left: 0;
    z-index: 2;
    content: '';
    width: 0;
    height: 0;
    border: 1.5px solid transparent;
}


.menu li a::before,
.span-menu::before {
    top: 0;
}

.menu li a::after,
.span-menu::after {
    top: -1px;
}

.menu li a:hover::before,
.span-menu:hover::before,
.menu li a:hover::after,
.span-menu:hover::after {
    width: calc(100% - 3px);
    height: calc(100% - 3px);
}

.menu li a:hover::before,
.span-menu:hover::before {
    border-bottom-color: rgba(255,255,255,.6);
    border-left-color: rgba(255,255,255,.6);
    transition: height .2s, width .2s .2s;
}

.menu li a:hover::after,
.span-menu:hover::after {
    border-top-color: rgba(255,255,255,.6);
    border-right-color: rgba(255,255,255,.6);
    transition: height .2s .6s, width .2s .4s;
}


.menu a:hover,
.span-menu:hover {
    text-decoration:underline;
    background: rgba(172,196,255,.35);
}

.menu .menu-logout {
    margin: 10px 10px 10px 80px;
    padding-top:3px;
    font-size: 18px;
    width: 120px;
}

.login_dlg {
    width: 420px;
    height: 240px;
}