@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Sarabun:wght@300;400;500;600;700&display=swap');
:root {
    --font-default: 'Inter', 'Sarabun', san-serif;
    --color-primary: #0046e3;
    --color-primary-hover: #0e55ed;
    --color-primary-active: #134bc3;
    --color-success: #29ae75;
    --color-success-hover: #21a26a;
    --color-success-active: #1c9762;
    --color-warning: #ff8f00;
    --color-warning-hover: #ec8612;
    --color-warning-active: #bf6a24;
    --color-danger: #df2853;
    --color-danger-hover: #d5264f;
    --color-danger-active: #c92249;
    --color-text-theme: #39456e;
    --color-text-theme-lighter: #475689;
    --color-text-theme-border: #a1abcd;
    --color-primary-svg-filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(208deg) brightness(54%) contrast(114%);
    --color-success-svg-filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(62deg) brightness(89%) contrast(114%);
    --color-warning-svg-filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(21deg) brightness(89%) contrast(119%);
    --color-danger-svg-filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(350deg) brightness(79%) contrast(114%);
    --color-disabled-svg-filter: invert(42%) sepia(93%) saturate(12%) hue-rotate(139deg) brightness(169%) contrast(114%);
    --color-gray-svg-filter: invert(42%) sepia(93%) saturate(12%) hue-rotate(139deg) brightness(129%) contrast(114%);
}
* {
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
}
body {
    font-family: var(--font-default);
}
body.submitting {
    pointer-events: none;
    opacity: 0.5;
}

.container {
    width: 960px;
    max-width: 100%;
    padding: 0 48px;
    box-sizing: border-box;
    margin: 0 auto;
}

h1,h2,h3,h4,h5,h6 { color: var(--color-text-theme); }
h1,h2 {
    letter-spacing: -0.02rem;
}
h3,h4,h5,h6 {
    letter-spacing: -0.01rem;
}

.h1-kick { height: 2.0rem; }
.h2-kick { height: 1.5rem; }
.h3-kick { height: 1.25rem; }
.h4-kick { height: 1.0rem; }
.h5-kick { height: 0.75rem; }
.h6-kick { height: 0.5rem; }
.h7-kick { height: 0.25rem; }
.header-kick { height: 3.0rem; }
.footer-kick { height: 5.0rem; }
.w-100 { width: 100%; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-primary { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-danger { color: var(--color-danger); }
.text-gray { color: #808080; }
.va-top { vertical-align: top; }
.va-middle { vertical-align: middle; }
.va-bottom { vertical-align: bottom; }

hr.theme-a {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 16px 0;
}
img { max-width: 100%; }
.form-group label {
    display: block;
    font-weight: 700;
    margin-bottom: 2px;
    color: var(--color-text-theme);
}
.textbox {
    border: 1px solid #d0d0d0;
    outline: none;
    font-size: 1.0rem;
    padding: 8px 12px;
    height: 40px;
    line-height: 40px;
    box-sizing: border-box;
    border-radius: 6px;
    font-family: var(--font-default);
}
.textbox:focus {
    border-color: #a0a0a0;
}
.textbox::placeholder {
    color: #c0c0c0;
}
.textarea {
    border: 1px solid #d0d0d0;
    outline: none;
    font-size: 1.0rem;
    padding: 8px 12px;
    line-height: 1.5rem;
    box-sizing: border-box;
    border-radius: 6px;
    font-family: var(--font-default);
    resize: none;
}
.textarea:focus {
    border-color: #a0a0a0;
}
.combobox {
    border: 1px solid #d0d0d0;
    outline: none;
    font-size: 1.0rem;
    padding: 8px 12px;
    padding-right: 30px;
    height: 40px;
    box-sizing: border-box;
    border-radius: 6px;
    font-family: var(--font-default);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 1em;
}
.combobox:focus {
    border-color: #a0a0a0;
}
.btn {
    display: inline-block;
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    border-radius: 6px;
    outline: none;
    border: 1px solid #d0d0d0;
    background-color: #ffffff;
    color: #000000;
    text-align: center;
    text-decoration: none;
    font-size: 1.0rem;
    font-family: var(--font-default);
    cursor: pointer;
    font-weight: 600;
    box-sizing: border-box;
    user-select: none;
}
.btn:hover {
    border-color: #c0c0c0;
}
.btn:active {
    border-color: #a0a0a0;
}

.btn.btn-primary {
    background-color: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
}
.btn.btn-primary:hover {
    background-color: var(--color-primary-hover);
    color: #ffffff;
    border-color: var(--color-primary-hover);
}
.btn.btn-primary:active {
    background-color: var(--color-primary-active);
    color: #ffffff;
    border-color: var(--color-primary-active);
}
.btn.btn-primary > img {
    filter: invert(100%);
}

.btn.btn-success {
    background-color: var(--color-success);
    color: #ffffff;
    border-color: var(--color-success);
}
.btn.btn-success:hover {
    background-color: var(--color-success-hover);
    color: #ffffff;
    border-color: var(--color-success-hover);
}
.btn.btn-success:active {
    background-color: var(--color-success-active);
    color: #ffffff;
    border-color: var(--color-success-active);
}
.btn.btn-success > img {
    filter: invert(100%);
}

.btn.btn-warning {
    background-color: var(--color-warning);
    color: #ffffff;
    border-color: var(--color-warning);
}
.btn.btn-warning:hover {
    background-color: var(--color-warning-hover);
    color: #ffffff;
    border-color: var(--color-warning-hover);
}
.btn.btn-warning:active {
    background-color: var(--color-warning-active);
    color: #ffffff;
    border-color: var(--color-warning-active);
}
.btn.btn-warning > img {
    filter: invert(100%);
}

.btn.btn-danger {
    background-color: var(--color-danger);
    color: #ffffff;
    border-color: var(--color-danger);
}
.btn.btn-danger:hover {
    background-color: var(--color-danger-hover);
    color: #ffffff;
    border-color: var(--color-danger-hover);
}
.btn.btn-danger:active {
    background-color: var(--color-danger-active);
    color: #ffffff;
    border-color: var(--color-danger-active);
}
.btn.btn-danger > img {
    filter: invert(100%);
}
.btn > img {
    vertical-align: middle;
    margin-top: -4px;
}
.btn > img:first-child {
    margin-right: 4px;
}
.btn > img:nth-child(2) {
    margin-left: 4px;
}
.btn > span {
    vertical-align: middle;
}
.btn > span:nth-child(2) {
    vertical-align: middle;
    margin-left: 4px;
}
.btn.btn-i {
    padding: 0 8px;
    margin-left: 0;
    margin-right: 0;
    min-width: 40px;
}
.btn.btn-i > img {
    margin-left: 0;
    margin-right: 0;
}
.btn:disabled {
    opacity: 0.5;
    pointer-events: none;
    user-select: none;
}
.btn-group {
    font-size: 0;
}
.btn-group button:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    vertical-align: middle;
}
.btn-group input {
    border-radius: 0;
    vertical-align: middle;
}
.btn-group button:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    vertical-align: middle;
}
.h1-back-btn {
    display: inline-block;
    padding: 4px 8px;
    height: 40px;
    line-height: 40px;
    border-radius: 8px;
    outline: none;
    border: none;
    background-color: transparent;
    color: #000000;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    user-select: none;
    margin-left: -12px;
    margin-bottom: 12px;
    font-size: 1.0rem;
    font-weight: 600;
    color: #8080a0;
}
.h1-back-btn:hover {
    color: #000000;
}
.h1-back-btn > img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    margin-top: -2px;
    vertical-align: middle;
    filter: invert(42%) sepia(93%) saturate(12%) hue-rotate(139deg) brightness(129%) contrast(114%);
}
.h1-back-btn:hover > img {
    filter: none;
}
.h1-back-btn > span {
    vertical-align: middle;
}
.checkbox-group {
    margin-bottom: 4px;
}
.checkbox-group > input[type="checkbox"] {
    margin-right: 4px;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    cursor: pointer;
}
.checkbox-group > span {
    vertical-align: middle;
    user-select: none;
    cursor: pointer;
}
.checkbox-group.checkbox-group-inline { display: inline-block; }
.table-wrapper {
    overflow-x: auto;
}
.table {
    border-spacing: 0;
}
.table th {
    background-color: #f0f8ff;
    border: 1px solid var(--color-text-theme-border);
    border-right: none;
    border-bottom: none;
    padding: 4px 8px;
    font-size: 0.9rem;
}
.table th:last-child {
    border-right: 1px solid var(--color-text-theme-border);
}
.table tr:last-child th {
    border-bottom: 1px solid var(--color-text-theme-border);
}
.table td {
    border: 1px solid #e0e0e0;
    border-right: none;
    border-bottom: none;
    padding: 4px 8px;
    font-size: 0.9rem;
}
/* .table tr:first-child td {
    border-top: none;
} */
.table td:last-child {
    border-right: 1px solid #e0e0e0;
}
.table tr:last-child td {
    border-bottom: 1px solid #e0e0e0;
}
.table td.no-data {
    padding: 16px;
    color: #808080;
}

.alertp {
    display: none;
    background-color: #f0f0f0;
    color: #404040;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
}
.alertp.active {
    display: block;
}
.alertp-body {
    
}
.alertp > button[data-type="close-btn"] {
    float: right;
    padding: 0 8px;
    height: 40px;
    line-height: 40px;
    border-radius: 6px;
    outline: none;
    border: none;
    background-color: transparent;
    color: #000000;
    text-align: center;
    text-decoration: none;
    font-size: 1.0rem;
    font-family: var(--font-default);
    cursor: pointer;
    font-weight: 600;
    box-sizing: border-box;
    user-select: none;
    margin-top: -10px;
}
.alertp > button[data-type="close-btn"]:hover {
    background-color: rgba(0, 0, 0, 0.02);
}
.alertp > button[data-type="close-btn"]:active {
    background-color: rgba(0, 0, 0, 0.04);
}
.alertp > button[data-type="close-btn"] > img {
    margin-top: 8px;
}
.alertp.alertp-success {
    background-color: #ebf6ed;
    color: #0b7415;
}
.alertp.alertp-warning {
    background-color: #f7ede3;
    color: #934418;
}
.alertp.alertp-danger {
    background-color: #fae7e9;
    color: #cd1818;
}
.alertp.alertp-success > button[data-type="close-btn"] > img { filter: var(--color-success-svg-filter); }
.alertp.alertp-warning > button[data-type="close-btn"] > img { filter: var(--color-warning-svg-filter); }
.alertp.alertp-danger > button[data-type="close-btn"] > img { filter: var(--color-danger-svg-filter); }

img.theme-a {
    border-radius: 8px;
}

.row {
    margin: 0 -8px;
    font-size: 0;
}
.col {
    display: inline-block;
    padding: 0 8px;
    vertical-align: top;
    box-sizing: border-box;
    font-size: 1.0rem;
    width: 100%;
}

.hidden { display: none; }

/* Desktop */
@media only screen and (min-width: 992px) {
    .hidden-d { display: none; }
    .col.col-d-1 { width: calc(100% * (1/12)); }
    .col.col-d-2 { width: calc(100% * (2/12)); }
    .col.col-d-3 { width: calc(100% * (3/12)); }
    .col.col-d-4 { width: calc(100% * (4/12)); }
    .col.col-d-5 { width: calc(100% * (5/12)); }
    .col.col-d-6 { width: calc(100% * (6/12)); }
    .col.col-d-7 { width: calc(100% * (7/12)); }
    .col.col-d-8 { width: calc(100% * (8/12)); }
    .col.col-d-9 { width: calc(100% * (9/12)); }
    .col.col-d-10 { width: calc(100% * (10/12)); }
    .col.col-d-11 { width: calc(100% * (11/12)); }
    .col.col-d-12 { width: calc(100% * (12/12)); }
}
/* Tablet */
@media only screen and (min-width: 601px) and (max-width: 991px) {
    .hidden-t { display: none; }
    .col.col-t-1 { width: calc(100% * (1/12)); }
    .col.col-t-2 { width: calc(100% * (2/12)); }
    .col.col-t-3 { width: calc(100% * (3/12)); }
    .col.col-t-4 { width: calc(100% * (4/12)); }
    .col.col-t-5 { width: calc(100% * (5/12)); }
    .col.col-t-6 { width: calc(100% * (6/12)); }
    .col.col-t-7 { width: calc(100% * (7/12)); }
    .col.col-t-8 { width: calc(100% * (8/12)); }
    .col.col-t-9 { width: calc(100% * (9/12)); }
    .col.col-t-10 { width: calc(100% * (10/12)); }
    .col.col-t-11 { width: calc(100% * (11/12)); }
    .col.col-t-12 { width: calc(100% * (12/12)); }
}
/* Mobile */
@media only screen and (max-width: 600px) {
    .hidden-m { display: none; }
    .col.col-m-1 { width: calc(100% * (1/12)); }
    .col.col-m-2 { width: calc(100% * (2/12)); }
    .col.col-m-3 { width: calc(100% * (3/12)); }
    .col.col-m-4 { width: calc(100% * (4/12)); }
    .col.col-m-5 { width: calc(100% * (5/12)); }
    .col.col-m-6 { width: calc(100% * (6/12)); }
    .col.col-m-7 { width: calc(100% * (7/12)); }
    .col.col-m-8 { width: calc(100% * (8/12)); }
    .col.col-m-9 { width: calc(100% * (9/12)); }
    .col.col-m-10 { width: calc(100% * (10/12)); }
    .col.col-m-11 { width: calc(100% * (11/12)); }
    .col.col-m-12 { width: calc(100% * (12/12)); }
}
/* Mobile & Tablet */
@media only screen and (max-width: 991px) {
    .container {
        padding: 0 24px;
    }
}