#header{height: 100px; background: var(--bg_blue);}
#header > div:first-child{height: 30px; width: 125px; top: 20px; position: relative; cursor: pointer;}
#header > div:nth-child(2){position: relative; color: var(--text_white); top: 30px; text-align: center;}
#footer{background: var(--bg_silvercalm); position: fixed; left: 0px; bottom: 0px; width: 100%;}
#footer > div{text-align: center; padding: 15px 20px;}

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

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

#canvas{max-width: 500px; width: 90%; margin-bottom: 100px;}

/**FRONT**/
.front_input{padding: 25px 25px 28px 25px; background: var(--bg_silvercalm); margin-top: 35px; border-radius: 7px;}
.front_input input{text-transform: uppercase;}
.front_info{margin-top: 25px; text-align: center;}

/**VERIFY**/
.verify_box{border: 1.5px solid var(--bg_blue); margin-top: 15px; overflow: hidden; border-radius: 10px;}
.verify_box .vbHead{padding: 10px 15px; background: var(--bg_blue); color: var(--text_white); font-family: 'bold'; letter-spacing: 3px; font-size: 15px;}
.verify_box .vbTitle{font-size: 20px; text-align: center; padding: 20px 5px; font-weight: bold;}
.verify_box .vbTo{text-align: center;}
.verify_box .vbTo > div:first-child{color: var(--text_silver);}
.verify_box .vbTo > div:nth-child(2){font-family: 'bold';}
.verify_box .vbTo > div:nth-child(3){color: var(--text_green); margin-top: 10px; font-size: 15px;}
.verify_box .vbInfo{padding: 15px 15px 16px 15px; margin-top: 35px; border-top: 1.5px solid var(--bg_silver); border-bottom: 1.5px solid var(--bg_silver);}
.verify_box .vbInfo > div:first-child{font-weight: bold; margin-bottom: 3px;}
.verify_box .vbSignature{text-align: right; margin: 15px 35px 20px 0px; font-size: 18px; font-weight: bold; color: var(--text_blue);}
.verify_visit{margin-top: 25px; text-align: center;}
.verify_visit span{border-bottom: 2px solid var(--bg_blue); padding-bottom: 10px;}
.verify_info{margin-top: 35px; text-align: center;}

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