form{position:relative; top: 0px; left: 0px; width: 100%; height:auto; overflow-x:hidden;}
.main{position:relative; top: 0px; left: 0px; width: 100%; height:auto; max-width: 100%; padding: 0px; margin: 0px; background-color: #fff;}
.container{position:relative; top: 0px; left: 0px; width: 1200px; height:auto; max-width: 100%; padding: 0px 15px; margin: 0px auto;}
.banner{position:relative; top: 0px; left: 0px; width: 100%; height:auto; border-bottom: 2px solid #fe1e1e; background-color: #fff; background-repeat: no-repeat; background-size:cover; background-position:center;}
.banner .container{ display:grid; grid-template-columns: 100px 1fr; height: 100%; align-items:center;}
.banner .logo{position:relative; top: 0px; left: 0px; width: 100%; height: auto; aspect-ratio: 1; background-image: url(../images/logo.png); background-repeat: no-repeat; background-size: auto calc(100% - 20px); background-position: center;}
.banner .banner-title{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 20px 0px; text-align:left;}
.banner .banner-title > div{position:relative; top: 0px; left: 0px; width: max-content; height:auto; white-space:nowrap; overflow:hidden; pointer-events:none;}
.banner .banner-title span{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 0px; margin: 0px; display:block; color: #444; font-size: 18px; text-transform: uppercase; font-weight: 400;}
.banner .banner-title span:last-child{font-weight: bold; letter-spacing: 2px; font-size: 28px; line-height: 36px; color: #fe1e1e;}

.customer-info{position:absolute; top: 10px; left:auto; right: 15px; bottom: auto; width: max-content; height:auto; color: #0072bc;}
.customer-info span { position:relative; top: 0px; left: 0px; width:max-content; height:auto; white-space:nowrap; display:grid; grid-template-columns: 20px 1fr; grid-column-gap: 0px; cursor:pointer;}
.customer-info span:before{content: ""; position:relative; top: 0px; left: 0px; font-weight: 300; font-family: "Font Awesome 5 Pro";}
.customer-info span:first-child:before{content: "\f090";}
.customer-info span:last-child:before{content: "\f08b";}
.customer-info span:last-child{display:none; color: #444;}
.customer-info.logined{display:grid; grid-template-columns: 1fr max-content; grid-column-gap: 20px;}
.customer-info.logined span:first-child{font-weight: bold;}
.customer-info.logined span:first-child:before{content: "\f2bd"; font-weight: 900;}
.customer-info.logined span:last-child{display:grid;}

.top-bar{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 10px 0px; line-height: 20px; background-color: #0060a1; color: #fff; border-bottom: 1px solid #0060a1;}
.top-bar .container{display:grid; grid-template-columns: 1fr max-content; grid-column-gap: 10px;}
.top-bar .container .date{line-height: 40px;}

.top-bar:has(.top-menu){padding: 0px; border-bottom: 0px;}
.top-menu{background-color: transparent; border-bottom: 0px; min-height: unset;}
.top-menu .menu > li > a{color: #fff; padding: 10px 15px;}
.top-menu .menu > li > a:hover, .top-menu .menu > li > a.active{background-color: #1a5382;}

.main-body{position:relative; top: 0px; left: 0px; width: 100%; height:auto; min-height: calc(100vh - 207px);}

.popup{border-color: rgba(0, 113, 166,1);}
.popup .popup-header{background: linear-gradient(135deg, rgba(0, 113, 166,1) 0%, rgba(0, 114, 188,1) 50%, rgba(0, 114, 188,1) 100%);}

input:focus, textarea:focus, select:focus{border-color: rgba(0, 114, 188,1);}
button:hover, button.hot{background: linear-gradient(135deg, rgba(0, 113, 166,1) 0%, rgba(0, 114, 188,1) 50%, rgba(0, 114, 188,1) 100%);}

.footer{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 20px 0px; background-color: #0060a1; color: #fff; background-image: url(../images/footer_bg.png); background-repeat:no-repeat; background-size: auto; background-position: bottom right;}

@media (max-width: 950px) {
    .top-bar .container{grid-template-columns: 1fr;}
    .top-bar .date{display:none;}
}

@media (max-width: 750px) {
    .banner .banner-title span:last-child{font-size: 24px;}
}

@media (max-width: 600px) {
    .banner .container{padding: 0px;}
    .banner .banner-title span:last-child{font-size: 20px;}
    .top-bar .container{grid-template-columns: max-content 1fr;}
    .top-bar .container .date{text-align:right; display:block;}
    .top-bar .container:has(.name:empty) .date{display:block;}
    .top-menu > ul{background-color: #0060a1;}
}

@media (max-width: 450px) {
    .banner .container{padding-top: 25px; grid-template-columns: 90px 1fr;}
    .banner .banner-title span:last-child{font-size: 18px; line-height: 24px; letter-spacing: 1px;}
}