.headerSpace.hAcademy{height: 85px;}
#header{position: fixed; top: 0px; left: 0px; width: 100%; z-index: 55;}
#header.hAcademy{height: 85px; background: var(--bg_black);}
#header.hAcademy > div{width: 115px; height: 63px; position: relative; top: 10px; background-size: 100%; background-image: url('../../../images/logo/logo_wa.png');}

.footerSpace{height: 35px;}
#footer{padding: 50px 0px; text-align: center; background: var(--bg_silvercalm);}

section{max-width: 550px;}
section .distance{padding: 0px 20px;}
.layoutTicket{max-width: 400px;}

.headTitle{padding: 45px 10px; font-size: 30px; font-weight: bold;}

.sectionTitle{padding: 10px 0px; white-space: nowrap;}
.sectionTitle > div{display: inline-block;}
.sectionTitle > div:first-child{font-size: 17px; font-family: 'bold';}
.sectionTitle > div:nth-child(2){margin-left: 15px; position: relative; top: -2px;}

#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%; margin-top: 50px; margin-bottom: 50px; box-shadow: 0 0 6px 0 rgba(161, 161, 161, 0.5); border-radius: 5px; overflow: hidden;}

.popup_login{padding: 20px;}
.popup_login > div:first-child{font-size: 17px; font-family: 'bold';}

#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);}

/**DETAIL**/
.detailBox{margin-top: 20px; margin-bottom: 20px; border: 1.5px solid var(--bg_blue); border-radius: 10px; overflow: hidden;}
.detailBox .dbHaad{padding: 10px; color: var(--text_white); text-align: center; background: var(--bg_blue);}
.detailBox .dbHaad > div:first-child{font-weight: bold; font-size: 15px;}
.detailBox .dbCode{padding: 10px;}
.detailBox .dbCode > div:first-child{font-weight: bold; font-size: 11px;}
.detailBox .dbCode > div:nth-child(2){font-size: 17px; font-family: 'bold'; color: var(--text_blue);}
.detailBox .dbDetail{padding: 10px;}
.detailBox .dbDetail > div:first-child{font-weight: bold; font-size: 11px;}
.detailBox .dbDetail > div:nth-child(2){display: grid; grid-template-columns: 1fr 1fr; grid-gap: 5px;}
.detailBox .dbDetail > div:nth-child(2) > div{width: 100%;}
.detailBox .dbDetail > div:nth-child(2) > div > div:first-child{color: var(--text_silver);}
.detailBox .dbHowTo{padding: 10px;}
.detailBox .dbHowTo > div:first-child{font-weight: bold; font-size: 11px;}

.detailBox .dbHowTo .dhtList > div:not(:last-child){margin-bottom: 10px;}
.detailBox .dbHowTo .dhtList .dlBox{display: grid; margin-top: 5px; grid-template-columns: 130px 1fr; grid-gap: 10px;}
.detailBox .dbHowTo .dhtList .dlBox > div{width: 100%;}
.detailBox .dbHowTo .dhtList .dlBox > div:first-child > div{height: 130px; background-color: var(--bg_silvercalm);}

/**ERROR**/
.error_page{max-width: 500px; background: var(--bg_silvercalm); border-radius: 10px; margin-top: 70px; margin-bottom: 100px;}
.error_page > div{padding: 30px 35px 35px 30px; font-size: 17px;}
.error_page > div > div:first-child{font-size: 25px; font-weight: bold;}

.error_login{max-width: 570px; padding: 10px 15px; border: 2px solid var(--bg_orangecalm); border-radius: 10px; margin-top: 80px; margin-bottom: 200px;}
.error_login > div:first-child{font-family: 'bold'; font-size: 15px;}
.error_login > div:nth-child(2){margin-top: 5px;}