@import url('https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pattaya&family=Prompt:wght@300;400;500;600;700&family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100..900&display=swap');
@import url("../icons/FontAwesome/css/all.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css");

body {
    font-family: 'Noto Sans Thai', Arial, Helvetica, sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    padding: 0 !important;
    margin: 0 !important;
    position: relative;
    background-color: #ebf1f4;
}

a {
    color: #103f58;
    text-decoration: none;
}

.pointer {
    cursor: pointer;
}

::-moz-selection {
    color: #fff;
    background: #091444;
}

::selection {
    color: #fff;
    background: #091444;
}

.modal-body {
    overflow-x: hidden !important;
}

.modal-center-screen {
    text-align: center;
    padding: 0 !important;
}

.modal-center-screen:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px;
}

.modal-dialog-center-screen {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    width: 100%;
}

.modal-lg-20 {
    max-width: 20% !important;
}

.modal-lg-30 {
    max-width: 30% !important;
}

.modal-lg-40 {
    max-width: 40% !important;
}

.modal-lg-50 {
    max-width: 50% !important;
}

.modal-lg-60 {
    max-width: 60% !important;
}

.modal-lg-70 {
    max-width: 70% !important;
}

.modal-lg-80 {
    max-width: 80% !important;
}

.modal-lg-90 {
    max-width: 90% !important;
}

.modal-lg-95 {
    max-width: 95% !important;
}

.modal-lg-100 {
    max-width: 100% !important;
}

.modal-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100%;
    text-align: center;
}

.canvas-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100%;
    text-align: center;
}

.offcanvasize-30 {
    width: 30% !important;
}

.offcanvasize-40 {
    width: 40% !important;
}

.offcanvasize-50 {
    width: 50% !important;
}

.offcanvasize-60 {
    width: 60% !important;
}

.offcanvasize-70 {
    width: 70% !important;
}

.offcanvasize-80 {
    width: 80% !important;
}

.offcanvasize-90 {
    width: 90% !important;
}

.offcanvasize-100 {
    width: 100% !important;
}

.fs-8 {
    font-size: 8px !important;
}

.fs-9 {
    font-size: 9px !important;
}

.fs-10 {
    font-size: 10px !important;
}

.fs-11 {
    font-size: 11px !important;
}

.fs-12 {
    font-size: 12px !important;
}

.fs-13 {
    font-size: 13px !important;
}

.fs-14 {
    font-size: 14px !important;
}

.fs-15 {
    font-size: 15px !important;
}

.fs-16 {
    font-size: 16px !important;
}

.fs-18 {
    font-size: 18px !important;
}

.fs-20 {
    font-size: 20px !important;
}

.fs-21 {
    font-size: 20px !important;
}

.fs-22 {
    font-size: 20px !important;
}

.fs-23 {
    font-size: 20px !important;
}

.fs-24 {
    font-size: 20px !important;
}

.fs-25 {
    font-size: 25px !important;
}

.fs-30 {
    font-size: 30px !important;
}

.fs-35 {
    font-size: 35px !important;
}

.fs-40 {
    font-size: 40px !important;
}

.fs-45 {
    font-size: 45px !important;
}

.fs-50 {
    font-size: 50px !important;
}

.fs-60 {
    font-size: 60px !important;
}

.fs-70 {
    font-size: 70px !important;
}

.fs-80 {
    font-size: 80px !important;
}

.fs-90 {
    font-size: 90px !important;
}

.fs-100 {
    font-size: 100px !important;
}

.image-mx200 {
    max-width: 200px;
}

.image-mx300 {
    max-width: 300px;
}

.image-mx500 {
    max-width: 500px;
}

.colorx {
    color: #ff0000;
}

.text-orange {
    color: #f05800;
}

.badge-custom {
    padding: .66em .593em .6em .593em !important;
}

.alert-custom {
    border-radius: 10px;
    border: none;
}

.select2-container {
    z-index: 1500 !important;
}

.select2-dropdown {
    z-index: 1500 !important;
}

.select2-container--bootstrap-5 .select2-selection {
    border: 1px solid #e2e8ef;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: #00174d;
    box-shadow: none;
}

.select2-container--bootstrap-5 .select2-dropdown {
    border-color: #00174d;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
    color: #000;
    background-color: #b5b5b5;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
    color: #000;
    background-color: #e9ecef;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
    border: 1px solid #017ffd;
    box-shadow: none;
}

.select2-results__option {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
}

.image-box-container {
    position: relative;
    width: 150px;
}

.image-box-container .image-box {
    width: 150px;
    height: 150px;
    border: 2px dashed #ced4da;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: #f8f9fa;
    transition: 0.2s;
}

.image-box-container .image-box:hover {
    border: 2px dashed #9ea2a7;
    background: #e9ecef;
}

.image-box-container .placeholder-text {
    color: #9ca3af;
    font-size: 14px;
}

.image-box-container .preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-box-container .btn-remove-image {
    position: absolute;
    top: 5px;
    right: 10px;
}


/* ให้คลิกทะลุรูป/สิ่งที่อยู่ใน preview ไปโดน label */

.image-box-container .preview-box,
.image-box-container .preview-box * {
    pointer-events: none;
}


/* กันปุ่มลบทับกล่อง และทำให้คลิกกล่องชัดเจน */

.image-box-container .image-box {
    cursor: pointer;
}

.image-box-container .btn-remove-image {
    z-index: 10;
    cursor: pointer;
}

.pimg-uploader {
    position: relative;
    display: inline-block;
    width: var(--pimg-size, 140px);
    overflow: hidden;
}

.pimg-uploader.rounded {
    border-radius: 50%;
}

.pimg-uploader img {
    width: 100%;
    height: var(--pimg-size, 140px);
    object-fit: cover;
    display: block;
}

.pimg-uploader .pimg-button {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: var(--pimg-icon, 30px);
    height: var(--pimg-icon, 30px);
    border-radius: 50%;
    border: none;
    background: rgba(253 82 82 / 65%);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: calc(var(--pimg-icon, 30px) * 0.5);
    cursor: pointer;
    transition: 0.2s;
    z-index: 50;
}

.pimg-uploader .pimg-button:hover {
    background: rgba(255 0 0 / 80%);
}

.pimg-uploader input[type=file] {
    display: none;
}

@media (max-width: 767px) {

    .modal-lg-20,
    .modal-lg-30,
    .modal-lg-40,
    .modal-lg-50,
    .modal-lg-60,
    .modal-lg-70,
    .modal-lg-80,
    .modal-lg-90,
    .modal-lg-95 {
        max-width: 100% !important;
    }
}