@import url('https://fonts.googleapis.com/css?family=Quicksand:400,500,600,700|Source+Sans+Pro:400,400i,600,600i,700,700i&display=swap');
body {font-size:15px; color:#000!important; font-family: 'Source Sans Pro', sans-serif!important; word-break: keep-all;}
ul > li { list-style: none; }
a {text-decoration: none;}
table {width: 100%;}

input::placeholder {color:#7e7c77!important; }
input.placeholder-right::placeholder{ text-align:right; padding-right:10px;}
span.inner_placeholder {position: absolute; right: 10px; top: 5px; color: #7e7c77;}

header.header {width:100%; float:left;}
.topbar {width:100%; background:#A50034;  display:flex; justify-content:center; align-items:center; color:#fff;  height:7vh;}
.top-title {font-size:30px; line-height:1.3;}
.left-wrapper {width: 25%; border-right:1px solid #A50034; float:left; padding:0}
.title-wrapper {width:100%;  background: #A50034; border-radius: 0 0  0 60px; padding: 30px 20px 30px 50px; display:flex; flex-direction:column;}
.right-wrapper {width:75%; float:left; padding: 50px 20px 20px 50px;}
.notice-text {font-size:15px; color: #7e7c77; margin-bottom:10px; line-height:1.2;}
div.mb-3 { text-align: center;}
.label-bold {font-weight:600;}

footer {width:100%; float:left; background:#f6f3eb; height:5vh; display:flex; justify-content:center; align-items:center;}
.footer-logo {text-align: center;}
.footer-logo img {max-width:160px; width:100%;}

/*login*/
.login-wrapper { width:100%; }
.login-container {  display: flex; align-items: center; justify-content:center!important; --bs-gutter-x:0!important;}
.login-title {color:#262626; font-size:35px; line-height:1.3; text-align:center ;margin-bottom:20px; display: block;}
.login-title p {font-size:15px; color: #7e7c77;  line-height:1.3;  font-family: 'Source Sans Pro', sans-serif; margin-bottom:0;}
.login-input {width:100%; max-width: 500px;  padding: 30px 50px; }
a.nextstep.login {width:100%; margin-bottom:0;}
.login-left {width:65%;  float:left; height:88vh; background: url("/images/Checklist/loginbg.jpg"); background-position: center center; background-repeat: no-repeat; background-size: cover;}
.login-right {width:35%;  float:left;display: flex; align-items: center; flex-direction: column; justify-content:center;}
label.rememberid {font-size:14px; color:#7e7c77; margin-top:-7px!important; }
.login-des {width:100%; max-width: 500px;  padding: 30px 50px; margin-top:20px; color:#7e7c77;}
.login-des li i {color: #A50034; font-size: 12px; padding-top: 3px;}
.login-des li i.icon-des {font-size:20px;}
.nextstep-btn-login {text-align: center; width:100%; padding-top:20px;}
.divideline {width:100%; height:1px; background:#E6E1D6; position:relative;}
.divideline::after {position: absolute; top:-10px; left:50%; right:50%; content: "\f111"; font-family: FontAwesome; color:#A50034; font-size:14px;}

/*step3*/
.page-title {width:100%; background:#f6f3eb; float:left; display:flex; justify-content: center; align-items: center; padding:15px 20px;} 
.title-left {width:80%; float:left; font-size:24px; line-height:1.1; color:#1a1a1a; } 
.title-right {width:20%; float:right; text-align: right;}
.title-right img {width:100%; max-width:130px;}
.page-left { border-right:1px solid #E6E1D6;}
.page-content {width:100%; max-width:500px; margin:auto;}
.light-bg {border-radius: 7px; background: #f6f3eb; padding:20px 30px;}
.light-bg .row {align-items: center; justify-content:center; text-align: center;}
.takepic img {max-width:150px; width:100%;}
.cameraicon i {font-size:25px; color: #A50034;margin-bottom:7px;}
.cameraicon {line-height:1.2;}
.type-wrapper {text-align: center; margin-top:30px; float:left; width: 100%; margin-bottom:30px;}
.type-wrapper p {font-weight:600; margin-bottom:10px;}
.radiofont {font-size:16px; margin-top:-5px!important;}
.result-wrapper {background: #e5e1d7; color: #a50034; text-align: center; float:left; width: 100%; border-radius: 50px; padding: 15px 30px; font-weight:600;}
.notice-text02 {color:#A50034; font-weight:600;}
.form-check-input:checked {background-color: #A50034!important; border-color: #A50034!important;}
.nextstep-btn {text-align: center; width:100%; padding-top:15px; border-top:1px solid #E6E1D6; margin-top:20px; padding-bottom:15px;}

.ex_btn.lg, .ex_btnS.lg, .ex_btnM.lg, .ex_btnL.lg {background-color:#a50034;}

/*common*/
.page-wrapper {position:relative;}
a.nextstep { border-radius: 5px; padding:0.35rem 1.5rem; font-size:15px; background:#A50034; border: 1px solid #A50034;}
a.nextstep:active{color: #fff;background-color: #FD312E!important;border-color: #FD312E!important;}
a.nextstep:focus{color: #fff;background-color: #FD312E!important;border-color: #FD312E!important;box-shadow:none!important;}
a.nextstep:visited {color: #fff;background-color: #A50034!important;border-color:#A50034!important;}
a.nextstep img {margin-top:-2px; padding-left:3px;}
.btn-primary.nextstep:hover {color: #fff;background-color: #FD312E!important;border-color: #FD312E!important;}
.page-number { color:#7e7c77;}
.page-number span { color: #a50034; font-size:18px; font-weight:600;}
.badge.stepbg {background: #4a4946!important; color:#fff; font-weight:500; font-size:14px;text-transform: uppercase;}
.icon-info  {color: #A50034; font-size: 24px!important; position:absolute; top:10px; right:20px; }
.icon-help  {color: #A50034; font-size: 18px!important;  }
.form-check-input:focus {
  border-color: #aaa!important;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(182,0,49,.25)!important;
}

@media only screen and (max-width:540px) {
    .topbar {height:40px;}
    .top-title {font-size: 20px;}
    .noticketbutton {width:80px;}
    .btn.btn-request {width:80px; font-size:13px;}
    .login-container {width:100%; display:flex; flex-direction: column; }
    .login-left  {width:100%; height:200px;}
    .login-right {width:100%;  justify-content: center;}
    .login-title {font-size: 25px!important; margin-bottom:15px; display: none;}
    .login-input{ padding: 25px 30px 30px 30px; background:#f6f3eb; max-width:100%;}
    .login-des {padding-left:20px; padding-right:30px; padding-top:10px; }
    .title-left {width:79%; font-size:19px; margin-right:1%;} 
    .badge.stepbg {font-size:13px;;}
    .page-left {padding:20px 20px 0 20px!important; border-right:0;}
    .page-right {padding:20px 20px 0 20px!important;}
    button.nextstep { padding:0.35rem 1.2rem; font-size:14px;}
    .result-wrapper {padding: 10px 30px;}
    .footer-logo img {max-width:130px;}
}
@media screen and (max-width: 1024px) and (min-width: 541px) {
    .topbar {height:50px;}
    .top-title {font-size: 23px;}
    .btn.btn-request {width:80px; font-size:13px;}
    .login-container {width:100%; display:flex; flex-direction: column; }
    .login-left  {width:100%; height:300px;}
    .login-right {width:100%;  justify-content: center; padding: 0 0 15px 0px;}
    .login-des { max-width:500px;}
    .footer-logo img{ max-width:170px; width:100%;}
    footer {height:45px;}
    .login-title {font-size: 30px!important; display: none;}
    .login-des {padding: 30px 50px; }
    .login-input{ padding: 25px 30px 30px 30px; background:#f6f3eb; max-width:100%;}
    .login-input form {max-width:500px; margin:auto;}
}

.ex_btn.lg, .ex_btnS.lg, .ex_btnM.lg, .ex_btnL.lg {background-color:#A50034;}
.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {background-color: #A50034; border-color: #A50034;
}

.timer {display: flex; justify-content: center; align-items: center; min-height: 20vh; gap: 30px; background: lightgray; border-radius: 20px;}
.timer .circle {position:relative; width: 150px; height: 150px; display: flex; justify-content: center; align-items: center; border-radius: 50%; box-shadow: 0 0 10px rgba(0,0,0,0.25);}
.timer .circle::before { content: ''; position: absolute; inset: 0; border: 10px solid #1b1a1c; border-radius: 50%; }
.timer .circle::after { content: ''; position: absolute; width: 125px; height: 125px; background: #2f2e33; border-radius: 50%; border: 15px solid #4d4c51; box-shadow: inset 0 5px 10px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.75), 0 -2px 2px rgba(255,255,255,0.5), inset 0 4px 2px rgba(0,0,0,0.25), inset 0 -2px 2px rgba(255,255,255,0.5); }
.timer .circle svg { position: relative; width: 150px; height: 150px; transform: rotate(270deg); }
.timer .circle svg circle { width: 100%; height: 100%; fill: transparent; stroke-width: 8; stroke: var(--clr); stroke-linecap: round; transform: translate(5px,5px); stroke-dasharray: 440; stroke-dashoffset: 440; }
.timer div { position: absolute; text-align: center; font-weight: 500; color: #fff; z-index: 10000; color: var(--clr); font-size: 1.65em; transform: translateY(-5px); }
.timer div span { position: absolute; transform: translateX(-50%) translateY(-15px); font-size: 0.25em; font-weight: 500; letter-spacing: 0.1em; }

.custom-1 {width: 8.33%;}
.custom-2 {width: 16.67%;}
.custom-3 {width: 25%;}
.custom-4 {width: 33.33%;}
.custom-5 {width: 41.67%;}
.custom-6 {width: 50%;}
.custom-7 {width: 58.33%;}
.custom-8 {width: 66.67%;}
.custom-9 {width: 75%;}
.custom-10 {width: 83.33%;}
.custom-11 {width: 91.67%;}
.custom-12 {width: 100%;}