:root {
    --password-hiden: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M2 5.27L3.28 4L20 20.72L18.73 22L15.65 18.92C14.5 19.3 13.28 19.5 12 19.5C7 19.5 2.73 16.39 1 12C1.69 10.24 2.79 8.69 4.19 7.46L2 5.27ZM12 9C12.7956 9 13.5587 9.31607 14.1213 9.87868C14.6839 10.4413 15 11.2044 15 12C15.0005 12.3406 14.943 12.6787 14.83 13L11 9.17C11.3213 9.05698 11.6594 8.99949 12 9ZM12 4.5C17 4.5 21.27 7.61 23 12C22.1839 14.0732 20.7969 15.8727 19 17.19L17.58 15.76C18.9629 14.8034 20.0782 13.5091 20.82 12C20.0116 10.3499 18.7564 8.95977 17.1973 7.9875C15.6381 7.01524 13.8375 6.49988 12 6.5C10.91 6.5 9.84 6.68 8.84 7L7.3 5.47C8.74 4.85 10.33 4.5 12 4.5ZM3.18 12C3.98844 13.6501 5.24357 15.0402 6.80273 16.0125C8.36189 16.9848 10.1625 17.5001 12 17.5C12.69 17.5 13.37 17.43 14 17.29L11.72 15C11.0242 14.9254 10.3748 14.6149 9.87997 14.12C9.38512 13.6252 9.07458 12.9758 9 12.28L5.6 8.87C4.61 9.72 3.78 10.78 3.18 12Z' fill='%23194739'/%3E%3C/svg%3E");
    --password-visible: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 6.5C13.8387 6.49389 15.6419 7.00678 17.2021 7.97973C18.7624 8.95267 20.0164 10.3462 20.82 12C19.17 15.37 15.8 17.5 12 17.5C8.2 17.5 4.83 15.37 3.18 12C3.98362 10.3462 5.23763 8.95267 6.79788 7.97973C8.35813 7.00678 10.1613 6.49389 12 6.5ZM12 4.5C7 4.5 2.73 7.61 1 12C2.73 16.39 7 19.5 12 19.5C17 19.5 21.27 16.39 23 12C21.27 7.61 17 4.5 12 4.5ZM12 9.5C12.663 9.5 13.2989 9.76339 13.7678 10.2322C14.2366 10.7011 14.5 11.337 14.5 12C14.5 12.663 14.2366 13.2989 13.7678 13.7678C13.2989 14.2366 12.663 14.5 12 14.5C11.337 14.5 10.7011 14.2366 10.2322 13.7678C9.76339 13.2989 9.5 12.663 9.5 12C9.5 11.337 9.76339 10.7011 10.2322 10.2322C10.7011 9.76339 11.337 9.5 12 9.5ZM12 7.5C9.52 7.5 7.5 9.52 7.5 12C7.5 14.48 9.52 16.5 12 16.5C14.48 16.5 16.5 14.48 16.5 12C16.5 9.52 14.48 7.5 12 7.5Z' fill='%23194739'/%3E%3C/svg%3E");
    --dropdown-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.64645 4.64645C1.84171 4.45118 2.15829 4.45118 2.35355 4.64645L8 10.2929L13.6464 4.64645C13.8417 4.45118 14.1583 4.45118 14.3536 4.64645C14.5488 4.84171 14.5488 5.15829 14.3536 5.35355L8.35355 11.3536C8.15829 11.5488 7.84171 11.5488 7.64645 11.3536L1.64645 5.35355C1.45118 5.15829 1.45118 4.84171 1.64645 4.64645Z' fill='%23194739'/%3E%3C/svg%3E");
    --dropdown-icon-size: 16px 16px;
    --checkbox-checked: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Crect x='5' y='5' width='14' height='14' fill='%23D9E021'/%3E%3Cpath d='M19 19H5V5H15V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V11H19M7.91 10.08L6.5 11.5L11 16L21 6L19.59 4.58L11 13.17L7.91 10.08Z' fill='%23194739'/%3E%3C/svg%3E");
    --radio-checked: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z' fill='%23194739'/%3E%3Cpath d='M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z' fill='%23D9E021'/%3E%3Cpath d='M12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17Z' fill='%23194739'/%3E%3C/svg%3E");
}

[data-bs-theme="dark"] {
    --password-hiden: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M2 5.27L3.28 4L20 20.72L18.73 22L15.65 18.92C14.5 19.3 13.28 19.5 12 19.5C7 19.5 2.73 16.39 1 12C1.69 10.24 2.79 8.69 4.19 7.46L2 5.27ZM12 9C12.7956 9 13.5587 9.31607 14.1213 9.87868C14.6839 10.4413 15 11.2044 15 12C15.0005 12.3406 14.943 12.6787 14.83 13L11 9.17C11.3213 9.05698 11.6594 8.99949 12 9ZM12 4.5C17 4.5 21.27 7.61 23 12C22.1839 14.0732 20.7969 15.8727 19 17.19L17.58 15.76C18.9629 14.8034 20.0782 13.5091 20.82 12C20.0116 10.3499 18.7564 8.95977 17.1973 7.9875C15.6381 7.01524 13.8375 6.49988 12 6.5C10.91 6.5 9.84 6.68 8.84 7L7.3 5.47C8.74 4.85 10.33 4.5 12 4.5ZM3.18 12C3.98844 13.6501 5.24357 15.0402 6.80273 16.0125C8.36189 16.9848 10.1625 17.5001 12 17.5C12.69 17.5 13.37 17.43 14 17.29L11.72 15C11.0242 14.9254 10.3748 14.6149 9.87997 14.12C9.38512 13.6252 9.07458 12.9758 9 12.28L5.6 8.87C4.61 9.72 3.78 10.78 3.18 12Z' fill='%23dee2e6bf'/%3E%3C/svg%3E");
    --password-visible: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 6.5C13.8387 6.49389 15.6419 7.00678 17.2021 7.97973C18.7624 8.95267 20.0164 10.3462 20.82 12C19.17 15.37 15.8 17.5 12 17.5C8.2 17.5 4.83 15.37 3.18 12C3.98362 10.3462 5.23763 8.95267 6.79788 7.97973C8.35813 7.00678 10.1613 6.49389 12 6.5ZM12 4.5C7 4.5 2.73 7.61 1 12C2.73 16.39 7 19.5 12 19.5C17 19.5 21.27 16.39 23 12C21.27 7.61 17 4.5 12 4.5ZM12 9.5C12.663 9.5 13.2989 9.76339 13.7678 10.2322C14.2366 10.7011 14.5 11.337 14.5 12C14.5 12.663 14.2366 13.2989 13.7678 13.7678C13.2989 14.2366 12.663 14.5 12 14.5C11.337 14.5 10.7011 14.2366 10.2322 13.7678C9.76339 13.2989 9.5 12.663 9.5 12C9.5 11.337 9.76339 10.7011 10.2322 10.2322C10.7011 9.76339 11.337 9.5 12 9.5ZM12 7.5C9.52 7.5 7.5 9.52 7.5 12C7.5 14.48 9.52 16.5 12 16.5C14.48 16.5 16.5 14.48 16.5 12C16.5 9.52 14.48 7.5 12 7.5Z' fill='%23dee2e6bf'/%3E%3C/svg%3E");
    --dropdown-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.64645 4.64645C1.84171 4.45118 2.15829 4.45118 2.35355 4.64645L8 10.2929L13.6464 4.64645C13.8417 4.45118 14.1583 4.45118 14.3536 4.64645C14.5488 4.84171 14.5488 5.15829 14.3536 5.35355L8.35355 11.3536C8.15829 11.5488 7.84171 11.5488 7.64645 11.3536L1.64645 5.35355C1.45118 5.15829 1.45118 4.84171 1.64645 4.64645Z' fill='%23dee2e6bf'/%3E%3C/svg%3E");
    --checkbox-checked: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M19 19H5V5H15V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V11H19M7.91 10.08L6.5 11.5L11 16L21 6L19.59 4.58L11 13.17L7.91 10.08Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
    --radio-checked: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z' fill='%23FFFFFF'/%3E%3Cpath d='M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z' fill='%2300000000'/%3E%3Cpath d='M12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

input:checked+.slider {
    background-color: var(--primary-color);
}

input:checked+.slider:before {
    background-color: var(--bs-white);
}

input:focus+.slider {
    box-shadow: 0 0 1px var(--blue-500);
}

input:checked+.slider:before {
    -webkit-transform: translateX(22px);
    -ms-transform: translateX(22px);
    transform: translateX(22px);
}

.input-icon-right {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(-50%, -50%);
}

.input-btn-reset-old {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    right: 0;
    transform: translate(-50%, -50%);
    /* content: url('/images/icons/close-circle.svg'); */
    cursor: pointer;
    display: none;
    /* margin-right: 8px; */
}

.input-btn-reset {
    cursor: pointer;
    display: none;
}

.form-placeholder {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 4px;
}

.form-control,
.form-select {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--text-primary);
    border-color: var(--border-primary);
    min-height: 48px;
    border-radius: var(--jm-border-radius);
    padding: var(--jm-input-padding);
    text-decoration: unset;
}


.form-select,
[data-bs-theme=dark] .form-select {
    --bs-form-select-bg-img: var(--dropdown-icon);
    background-size: var(--dropdown-icon-size);
}

.form-control::placeholder {
    color: var(--text-placeholder);
}

.form-control:-ms-input-placeholder {
    color: var(--text-placeholder);
}

.form-control::-ms-input-placeholder {
    color: var(--text-placeholder);
}


.form-control:focus {
    border-color: var(--border-secondary) !important;
    box-shadow: unset;
}

.form-control:disabled {
    color: var(--text-placeholder);
}

.form-control.error {
    border-color: var(--error-color)
}

.form-control-lg {
    font-size: 1rem;
}

/* .form-select {
    border-color: var(--border-primary) !important;
} */

.form-select::placeholder {
    color: var(--text-placeholder);
}

.form-select:-ms-input-placeholder {
    color: var(--text-placeholder);
}

.form-select::-ms-input-placeholder {
    color: var(--text-placeholder);
}

.form-select:focus,
.form-select:hover {
    border-color: var(--border-secondary) !important;
    box-shadow: unset;
}

.form-select:disabled {
    color: var(--text-placeholder);
}

.form-select.error {
    border-color: var(--error-color);
}

.form-select-lg {
    font-size: 1rem;
}

.form-error-span {
    margin-top: 4px;
    display: none;
}

.error-layout {
    /* Layout */
    margin-top: 8px;
    display: none;
    /* Typography */
    font-family: 'IBM Plex Sans Thai';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    color: var(--error-color);
}

.form-control:not(:placeholder-shown)+.input-btn-reset,
.form-control:not(:placeholder-shown)+.input-btn-reset:hover {
    display: block !important;
}

.form-control:not(:focus)+.input-btn-reset {
    display: none !important;
}

.form-control:read-only,
.input-group:has(.form-control:read-only) {
    background-color: var(--bs-tertiary-bg) !important;
}

.input-group {
    border: 1px solid var(--border-primary);
    border-radius: var(--jm-border-radius);
    align-items: center;
}

.input-group:focus-within {
    border-color: var(--border-secondary) !important;
}

.input-group .form-control,
.input-group .form-select {
    border: unset;
    background-color: transparent;
}

.input-group .form-control:focus,
.input-group .form-select:focus {
    border: unset;
    background-color: transparent;
}

.input-group:has(.form-control.error) {
    border-color: var(--error-color);
}

.input-layout {
    display: flex;
    flex-direction: column;
}

.input-layout:has(.input-group .form-control[style*="display: none;"]),
.input-layout:has(.form-control[style*="display: none;"]) {
    display: none;
}

.input-error-layout {
    margin-top: 4px;
    display: none;
    flex-direction: row;
    align-items: center;
    color: var(--error-color);
    --icon-primary: var(--error-color);
}

.input-error-layout:has(span:not(:empty)) {
    display: inline-block;
}

.input-password-visibility {
    cursor: pointer;
    width: 24px;
    height: 24px;
    background-image: var(--password-hiden);
}

.input-password-visibility.visible {
    background-image: var(--password-visible);
}

.form-check {
    display: flex;
    align-items: center;
    margin-bottom: unset;
    gap: 8px;
}

.form-check-input[type=checkbox] {
    width: 18px;
    height: 18px;
    margin-top: unset;
    border: 2px solid var(--border-primary);
}

.form-check-input:checked[type=checkbox] {
    background-color: var(--bs-body-bg);
    background-image: var(--checkbox-checked);
    background-size: unset;
    border: unset;
}

.form-check-input:focus[type=checkbox] {
    background-color: rgba(var(--bs-primary-rgb), 0.25);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

.form-check-input[type=radio] {
    width: 20px;
    height: 20px;
    margin-top: unset;
    border: 2px solid var(--border-primary);
}

.form-check-input:checked[type=radio] {
    background-color: var(--bs-body-bg);
    background-image: var(--radio-checked);
    background-size: unset;
}

.form-check-input:focus[type=radio] {
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

.form-check-input.radio-check-icon:checked[type=radio] {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%20fill%3D%22%23D9E021%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%203.75C7.44365%203.75%203.75%207.44365%203.75%2012C3.75%2016.5563%207.44365%2020.25%2012%2020.25C16.5563%2020.25%2020.25%2016.5563%2020.25%2012C20.25%207.44365%2016.5563%203.75%2012%203.75ZM2.25%2012C2.25%206.61522%206.61522%202.25%2012%202.25C17.3848%202.25%2021.75%206.61522%2021.75%2012C21.75%2017.3848%2017.3848%2021.75%2012%2021.75C6.61522%2021.75%202.25%2017.3848%202.25%2012Z%22%20fill%3D%22%23194739%22%2F%3E%3Cpath%20d%3D%22M16.1142%207.32358C16.5456%206.89214%2017.2451%206.89214%2017.6766%207.32358C18.1027%207.74973%2018.1079%208.43741%2017.6922%208.86998L11.8116%2016.2208C11.8031%2016.2314%2011.794%2016.2415%2011.7844%2016.2511C11.353%2016.6826%2010.6535%2016.6826%2010.222%2016.2511L7.43785%2013.5624C7.00641%2013.1309%207.00641%2012.4314%207.43785%2012C7.8693%2011.5686%208.5688%2011.5686%209.00024%2012L10.9699%2013.8743L16.0849%207.35663C16.094%207.34504%2016.1038%207.334%2016.1142%207.32358Z%22%20fill%3D%22%23194739%22%2F%3E%3C%2Fsvg%3E") !important;    
}