@charset "utf-8";
html {max-width: 800px;width: 100%!important;margin: 0 auto;overflow-x: hidden;}
body {font-size: 14px;font-weight: 400; position: relative; color: #000000; max-width: 800px; font-family: "Noto Sans Thai", sans-serif;font-weight: 400;
margin: 0 auto;overflow-x: hidden;}
div {font-family: "Noto Sans Thai", sans-serif;font-weight: 400;}
p {font-size: 14px; font-family: "Noto Sans Thai", sans-serif; color: #000000;font-weight: 400;}
*, *:before, *:after {box-sizing: border-box;}
*:before, *:after {-webkit-transition: all .4s ease-in-out;-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;-ms-transition: all .4s ease-in-out;transition: all .4s ease-in-out;}
img {max-width: 100%;height: auto;}
ul,ol {font-family: "Noto Sans Thai", sans-serif;}
a * {-webkit-transition: all .4s ease-in-out;-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;-ms-transition: all .4s ease-in-out;transition: all .4s ease-in-out;}
a, div a, p a {color: #000000; text-decoration: none!important;outline: none;-webkit-transition: all .4s ease-in-out;-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;-ms-transition: all .4s ease-in-out;transition: all .4s ease-in-out;}
a:hover, div a:hover, p a:hover {color: #02539C;-webkit-transition: all .4s ease-in-out;-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;-ms-transition: all .4s ease-in-out;transition: all .4s ease-in-out;}
header {position: relative;z-index: 999;width: 100%;max-width:800px;padding: 15px 0;}
h1 {margin-bottom: 0;font-family: "Noto Sans Thai", sans-serif; font-size: 20px;line-height: 1.2;}
.section-box-inner h1 {display: none;}
h2 {font-size: 18px;font-family: "Noto Sans Thai", sans-serif;line-height: 1.2;}
h3, h4 {font-size: 16px;font-family: "Noto Sans Thai", sans-serif;line-height: 1.2;}
.clear {clear: both;}
.header-wrap {padding: 0;}
.content-wrap {width:95%; margin: 0 auto; max-width: 328px;position: relative;overflow: visible;}
button:focus {outline: none !important;}
.container-login {background: url(../../assets/images/login-bg.webp) no-repeat fixed bottom right; background-size: cover;display: flex;
  justify-content: center;align-items: center;min-height: 100vh;}
.overflowcontent {overflow: visible!important;}
.form_col {display: inline-block;flex: 0 0 auto;}
.form_col_select {width: 100%;padding: 0 50px 0 0;}
.form_col_selectnew {width: 50%;padding: 0 50px 0 0;}
.form_col_search {width: 100%;padding: 20px 0;}
.form_col_checklist {width: 23%;padding: 0 0 0 50px;}
.form_col_submit {width: auto;padding: 0 !important;position: absolute;bottom: 35px;left: 35px;}
.form_col select {font-size: 16px;color: #9A9A9A;padding: 10px 15px;width: 100%;
    -webkit-appearance: none;-moz-appearance: none;-ms-appearance: none;
    background: url("../../assets/images/icon/arrow-select.svg") right 13px center no-repeat #fff;border-radius: 10px;}
.form_col select.select-inner {font-size: 16px;color: #9A9A9A;padding: 10px 15px 7px 15px;width: 100%;
   background: #fff;border-radius: 10px;border: 1px solid #AAAAAA;-webkit-appearance: none;-moz-appearance: none;-ms-appearance: none;
    background: url("../../assets/images/icon/arrow-select.svg") right 13px center no-repeat #fff;}
.btn-form {font-size: 16px;background: #02539C;border-radius: 10px;text-align: center;color: #fff!important;box-shadow: unset!important;border: unset!important;
  padding: 10px 15px 10px 15px;font-weight: 500;width: 100%;-webkit-transition: all .4s ease-in-out;-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;-ms-transition: all .4s ease-in-out;transition: all .4s ease-in-out;}
.form_col label {display: block;color: #000;font-size: 16px;font-weight: 500;margin-bottom: 5px;}
.form_col .inputlog {font-size: 16px;color: #000;padding: 10px 15px 7px 15px;width: 100%;background: #fff;border-radius: 10px;border: 1px solid #AAAAAA;}
.form_col .inputdt {font-size: 16px;color: #000;padding: 10px 10px 7px 10px;width: 100%;background: #fff;border-radius: 10px;border: 1px solid #D6D6D6}
.form_col_checklist .form-check {margin-bottom: 10px}
.form_col_checklist .form-check-input,.storetype-box .form-check-input {margin-top: 0!important}
.form_col .form-check-label {font-size: 16px;color: #000;padding: 0 !important;margin-bottom: 0!important}
.login-title {font-size: 16px;line-height: 24px;text-align: center;font-weight: 400}
.logo-login {display: block;margin: 0 auto 15px auto;text-align: center;}
.logo-main {display: block;margin: 0 auto;text-align: center;}
.login-wrap {background: #fff;border-radius: 10px;padding: 35px 20px;width: 95%;max-width: 328px;}
.box-admin {max-width: 620px!important;padding: 60px 6%;}
.wrap-pass {position: relative;}
.wrap-pass .eye-pass {position: absolute;right: 15px;top: 50%;transform: translate(0,-50%);}
.form-note {font-size: 15px;color: #7E7E7E}
.privacy-check label {font-size: 16px;color: #474747}
.privacy-check label a {font-size: 18px;color: #0063AF;font-weight: 500}
.privacy-check label a:hover {color: #D8001A}
.form-control:focus {box-shadow: unset !important;}
.login-branch {font-size: 25px;font-weight: 500}
.txt-center {text-align: center!important;}
.txt-left {text-align: left!important;}
.txt-right {text-align: right!important;}
.bg-blue {background: #02539C!important}
.admin-list-box {padding: 35px;border-radius: 10px;display: flex;flex-wrap: wrap;justify-content: center;text-align: center;background: #fff;box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;}
.admin-list-box.bg-blue * {color: #fff!important}
.logout-btn {display: block;}
.logout-btn a {display: flex;align-items: center;justify-content: center;width: 100%;padding: 15px;border-radius: 10px;background: #02539C;color: #fff!important}
.logout-btn a span {padding-left: 10px;font-size: 16px;color: #fff!important}
.form_col input::placeholder {color: #9A9A9A!important;opacity: 1!important; /* Firefox */}
.form_col input::-ms-input-placeholder { /* Edge 12 -18 */color: #9A9A9A!important;}
.container-main {background: #E8EFF5;position: relative;}
.btn-searchtop {position: absolute;top: 50%;left: 10px;transform: translate(0, -50%);background: unset;border: unset;}
.form-group {position: relative;}
.form-control {font-size: 16px;color: #000000}
.searchinput {
  padding-bottom:10px;padding-top:10px;padding-left: 40px;border-radius: 10px;border: none;
}
.btn-form-short {background: #02539C;border-radius: 25px;text-align: center;color: #fff!important;box-shadow: unset!important;border: unset!important;
  padding: 7px 15px;font-weight: 400;-webkit-transition: all .4s ease-in-out;-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;-ms-transition: all .4s ease-in-out;transition: all .4s ease-in-out;}
.btn-form-payment {background: #8EC63F;border-radius: 25px;text-align: center;color: #fff!important;
    box-shadow: unset!important;border: unset!important;font-size: 20px;width: 100%;display: block;
  padding: 10px 15px;font-weight: 400;-webkit-transition: all .4s ease-in-out;-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;-ms-transition: all .4s ease-in-out;transition: all .4s ease-in-out;}
.btn-cancel {background: #E5E5E5!important;color: #000!important}
.btn-form-short:hover {background: #009EFF!important;color: #fff!important;}
.txt-blue {color: #02539C}
.main-title {border-bottom: 1px dashed #B8CBDB;padding-bottom: 20px;margin-bottom: 20px}
.box-member-info {background: #fff;border-radius: 10px;padding: 20px;box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;}
.member-dt-wrap {padding-bottom: 10px}
.member-dt-wrap p {display: flex;flex-wrap: wrap;align-items: center;margin-bottom: 10px}
.member-dt-wrap p span {width: 90%;color: #575757;padding-left: 10px}
.member-dt-wrap p span b {font-weight: 500;color: #000}
.menu-history-list a {border-radius: 10px;padding: 10px 5px;text-align: center;background: #F0F8FF;border: 2px solid #A8BDCF;font-size: 16px;
  color: #607180!important;display: block;width: 100%;font-weight: 600;box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;}
.menu-history-list a:hover {border: 2px solid #02539C;}
.package-list-wrap {background: #fff;border-radius: 10px;padding: 20px;box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;}
.package-list-id {color: #6E6E6E}
.package-list-name {color: #02539C;font-size: 16px;font-weight: 600;border-bottom: 1px dashed #B8CBDB;padding-bottom: 20px;margin-bottom: 20px}
.package-list-dt {color: #575757;}
.package-list-dt label {color: #000;display: block;flex-wrap: 500}
.search-data-box {box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;}
.btn-back svg .a,.btn-back svg .b{fill:none;stroke:#02539c;stroke-linecap:round;stroke-width:3px;}
.btn-back svg .b{stroke-linejoin:round;}
.vh100 {min-height: 100vh}
.package-list-dt-history {border-bottom: 1px dashed #B8CBDB;padding-bottom: 20px;margin-bottom: 20px}
.package-list-dt-history:last-child {border-bottom: unset!important;padding-bottom: unset!important;margin-bottom: unset!important}
.btn-back {position: absolute;top: -60px;z-index: 999;}