body {
    /*font-family: "Prompt", sans-serif !important;*/
    font-family: 'Noto Sans Thai', sans-serif;
    /*background-color: #f3f3f3 !important;*/
}

button {
    /*font-family: "Prompt", sans-serif;*/
    font-family: 'Noto Sans Thai', sans-serif;
}

a {
    /*font-family: "Prompt", sans-serif;*/
    font-family: 'Noto Sans Thai', sans-serif;
}

span {
    /*font-family: "Prompt", sans-serif;*/
    font-family: 'Noto Sans Thai', sans-serif;
}

samp {
    /*font-family: "Prompt", sans-serif;*/
    font-family: 'Noto Sans Thai', sans-serif;
}

textarea {
    /*font-family: "Prompt", sans-serif;*/
    font-family: 'Noto Sans Thai', sans-serif;
}

.tooltip {
    /*font-family: "Prompt", sans-serif;*/
    font-family: 'Noto Sans Thai', sans-serif;
}

.popover {
    /*font-family: "Prompt", sans-serif;*/
    font-family: 'Noto Sans Thai', sans-serif;
}

.font-monospace {
    /*font-family: "Prompt", sans-serif;*/
    font-family: 'Noto Sans Thai', sans-serif;
}

.accordion-button:not(.collapsed) {
    color: black !important;
    background-color: #fff !important;
    box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.125) !important;
}

.accordion-button {
    color: black !important;
}

.accordion-body {
    padding-top: 1px !important;
    padding-left: 2rem !important;
    padding-right: 0.5rem !important;
}

.menu-left {
    padding-left: 0.5rem;
}

.left.active {
    background-color: #343a86 !important;
    color: #fff !important;
    border-top-right-radius: 0.25rem !important;
    border-bottom-right-radius: 0.25rem !important;
}

.left {
    color: black !important;
    font-size: 14px;
}

.header-feft {
    background: #ff8800 !important;
    /*box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1) !important;*/
}

.type-top.active {
    /*border-bottom: 3px solid #FC8700 !important;*/
    background: #FC8700 !important;
    /*background: #e84e0e !important;*/
    color: white !important;
    font-weight: bolder;
    /*border-top-left-radius: 8px;*/
    /*border-top-right-radius: 8px;*/
}

.type-top {
    color: black !important;
    font-size: 14px !important;
    font-weight: 500;
}

.canvas-bottom {
    height: 75% !important;
}

.section-order {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.login {
    background-color: #ffffff !important;
    border-radius: 10px !important;
}

.custom-nav {
    background-color: #fff !important;
    /*background-color: #fc8700 !important;*/
    /*box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1) !important;*/
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    border-bottom: none;
}

.color-primary {
    color: black;
}

.search-click {
    border: 1px solid #ccc !important;
    outline: none !important;
    background-size: 22px !important;
    background-position: 13px !important;
    border-radius: 10px !important;
    width: 50px !important;
    height: 50px !important;
    padding: 25px !important;
    transition: all 0.5s !important;
}

.search-click:focus {
    width: 300px !important;
    padding-left: 50px !important;
}

.search-click {
    position: relative !important;
    overflow: hidden !important;
    height: 50px !important;
}

.search-click input {
    background: transparent !important;
    border: 1px solid #ccc !important;
    outline: none !important;
    position: absolute !important;
    width: 300px !important;
    height: 50px !important;
    left: 0% !important;
    padding: 10px !important;
}

input.largerCheckbox {
    width: 25px;
    height: 25px;
    accent-color: #FC8700;
}

/* custom image upload css */
.avatar-upload {
    position: relative;
    max-width: 305px;
    margin: 50px auto;
}

.avatar-upload .avatar-edit {
    position: absolute;
    right: 12px;
    z-index: 1;
    top: 10px;
}

.avatar-upload .avatar-edit input {
    display: none;
}

.avatar-upload .avatar-edit input + label {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin-bottom: 0;
    border-radius: 100%;
    background: #FFFFFF;
    border: 1px solid transparent;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    font-weight: bolder;
    transition: all 0.2s ease-in-out;
}

.avatar-upload .avatar-edit input + label:hover {
    background: #f1f1f1;
    border-color: #d6d6d6;
}

.avatar-upload .avatar-edit input + label:after {
    content: "+";
    /*font-family: 'FontAwesome';*/
    color: #757575;
    position: absolute;
    font-size: 30px;
    top: 3px;
    left: 0;
    right: 0;
    text-align: center;
    margin: auto;
}

.avatar-upload .avatar-preview {
    width: 300px;
    height: 300px;
    position: relative;
    border-radius: 24px;
    border: 6px solid #F8F8F8;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}

.avatar-upload .avatar-preview > div {
    width: 100%;
    height: 100%;
    border-radius: 24px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* custom input type text  */

.did-floating-label-content {
    position: relative;
    margin-bottom: 20px;
}

.did-floating-label {
    color: #fc8700;
    font-size: 14px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 15px;
    top: 11px;
    padding: 0 5px;
    background: #fff;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}

.did-floating-input, .did-floating-select {
    font-size: 14px;
    display: block;
    width: 100%;
    height: 36px;
    padding: 0 30px;
    background: #fff;
    color: #323840;
    border: 1px solid #ced4da;
    border-radius: 4px;
    box-sizing: border-box;
}

.did-floating-input:focus, .did-floating-select:focus {
    outline: none;
}

.did-floating-input:focus ~ .did-floating-label, .did-floating-select:focus ~ .did-floating-label {
    top: -10px;
    font-size: 14px;
}

select.did-floating-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

select.did-floating-select::-ms-expand {
    display: none;
}

.did-floating-input:not(:placeholder-shown) ~ .did-floating-label {
    top: -10px;
    font-size: 14px;
}

.did-floating-select:not([value=""]):valid ~ .did-floating-label {
    top: -10px;
    font-size: 14px;
}

.did-floating-select[value=""]:focus ~ .did-floating-label {
    top: 11px;
    font-size: 14px;
}

.did-floating-select:not([multiple]):not([size]) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-position: right 15px top 50%;
    background-repeat: no-repeat;
    background-size: 16px 12px;
}

.did-error-input .did-floating-input, .did-error-input .did-floating-select {
    border: 1px solid #C4C4C4;
    color: #9d3b3b;
}

.did-error-input .did-floating-label {
    font-weight: 600;
    color: #9d3b3b;
}

.did-error-input .did-floating-select:not([multiple]):not([size]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath id='Path_1' data-name='Path 1' d='M371,294l4,6,4-6Z' transform='translate(-371 -294)' fill='%239d3b3b'/%3E%3C/svg%3E%0A");
}

.input-group {
    display: flex;
}

.input-group .did-floating-input {
    border-radius: 0 4px 4px 0;
    border-left: 0;
    padding-left: 0;
}

.input-group-append {
    display: flex;
    align-items: center;
    /*   margin-left:-1px; */
}

.input-group-text {
    display: flex;
    align-items: center;
    font-weight: 400;
    height: 34px;
    color: #323840;
    padding: 0 5px 0 20px;
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #C4C4C4;
    border-radius: 4px 0 0 4px;
    border-right: none;
}

.checkbox_gg {
    width: 100%;
    margin: 0 0 15px 0;
    position: relative;
    display: block;
}

.checkbox_gg input[type="checkbox"] {
    width: auto;
    opacity: 0.00000001;
    position: absolute;
    left: 0;
    margin-left: -20px;
}

.checkbox_gg label {
    position: relative;
}

.checkbox_gg label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    margin: 4px;
    width: 22px;
    height: 22px;
    transition: transform 0.28s ease;
    border-radius: 3px;
    border: 2px solid #fc8700;
}

.checkbox_gg label:after {
    content: '';
    display: block;
    width: 10px;
    height: 5px;
    border-bottom: 2px solid #fc8700;
    border-left: 2px solid #fc8700;
    -webkit-transform: rotate(-45deg) scale(0);
    transform: rotate(-45deg) scale(0);
    transition: transform ease 0.25s;
    will-change: transform;
    position: absolute;
    top: 12px;
    left: 10px;
}

.checkbox_gg input[type="checkbox"]:checked ~ label::before {
    color: #fc8700;
}

.checkbox_gg input[type="checkbox"]:checked ~ label::after {
    -webkit-transform: rotate(-45deg) scale(1);
    transform: rotate(-45deg) scale(1);
}

.checkbox_gg label {
    min-height: 34px;
    display: block;
    padding-left: 40px;
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
    vertical-align: sub;
}

.checkbox_gg label span {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.checkbox_gg input[type="checkbox"]:focus + label::before {
    outline: 0;
}

.button_ios {
    border: none;
    color: #090909;
    padding: 0.7em 1.7em;
    font-size: 14px;
    border-radius: 0.5em;
    background: #e8e8e8;
    border: 1px solid #e8e8e8;
    transition: all .3s;
    box-shadow: 6px 6px 12px #c5c5c5,
    -6px -6px 12px #ffffff;
}

.button_ios:active {
    color: #666;
    box-shadow: inset 4px 4px 12px #c5c5c5,
    inset -4px -4px 12px #ffffff;
}

/*toggle checkbox style*/
.form-check-input:checked {
    background-color: #FC8700 !important;
    border-color: #FC8700 !important;
}

/*end toggle checkbox style*/

/*gp deliver radio card*/
input[type="radio"] {
    display: none;
}

.top-text-wrapper {
    margin: 20px 0 30px 0;
}

.top-text-wrapper h4 {
    font-size: 24px;
    margin-bottom: 10px;
}

.top-text-wrapper code {
    font-size: 0.85em;
    background: linear-gradient(90deg, #fce3ec, #ffe8cc);
    color: #ff2200;
    padding: 0.1rem 0.3rem 0.2rem;
    border-radius: 0.2rem;
}

.tab-section-wrapper {
    padding: 30px 0;
}

.grid-wrapper {
    display: grid;
    grid-gap: 30px;
    place-items: center;
    place-content: center;
}

.grid-col-auto {
    grid-auto-flow: column;
    grid-template-rows: auto;
}

/* ******************* Main Styeles : Radio Card */
label.radio-card {
    cursor: pointer;
}

label.radio-card .card-content-wrapper {
    /*background: #fff;*/
    border-radius: 5px;
    width: 100px;
    min-height: auto;
    padding: 15px;
    display: grid;
    box-shadow: 0 2px 4px 0 rgba(219, 215, 215, 0.04);
    /*transition: 200ms linear;*/
}

label.radio-card .check-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    border: solid 2px #e3e3e3;
    border-radius: 50%;
    /*transition: 200ms linear;*/
    position: relative;
}

label.radio-card .check-icon:before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.93552 4.58423C0.890286 4.53718 0.854262 4.48209 0.829309 4.42179C0.779553 4.28741 0.779553 4.13965 0.829309 4.00527C0.853759 3.94471 0.889842 3.88952 0.93552 3.84283L1.68941 3.12018C1.73378 3.06821 1.7893 3.02692 1.85185 2.99939C1.91206 2.97215 1.97736 2.95796 2.04345 2.95774C2.11507 2.95635 2.18613 2.97056 2.2517 2.99939C2.31652 3.02822 2.3752 3.06922 2.42456 3.12018L4.69872 5.39851L9.58026 0.516971C9.62828 0.466328 9.68554 0.42533 9.74895 0.396182C9.81468 0.367844 9.88563 0.353653 9.95721 0.354531C10.0244 0.354903 10.0907 0.369582 10.1517 0.397592C10.2128 0.425602 10.2672 0.466298 10.3112 0.516971L11.0651 1.25003C11.1108 1.29672 11.1469 1.35191 11.1713 1.41247C11.2211 1.54686 11.2211 1.69461 11.1713 1.82899C11.1464 1.88929 11.1104 1.94439 11.0651 1.99143L5.06525 7.96007C5.02054 8.0122 4.96514 8.0541 4.90281 8.08294C4.76944 8.13802 4.61967 8.13802 4.4863 8.08294C4.42397 8.0541 4.36857 8.0122 4.32386 7.96007L0.93552 4.58423Z' fill='white'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: 12px;
    background-position: center center;
    transform: scale(1.6);
    /*transition: 200ms linear;*/
    opacity: 0;
}

label.radio-card input[type=radio] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

label.radio-card input[type=radio]:checked + .card-content-wrapper {
    box-shadow: 0 2px 4px 0 rgba(219, 215, 215, 0.5), 0 0 0 4px #FC8700;
    background-color: #ffdab0;
}

label.radio-card input[type=radio]:checked + .card-content-wrapper .check-icon {
    background: #FC8700;
    border-color: #FC8700;
    transform: scale(1.2);
}

label.radio-card input[type=radio]:checked + .card-content-wrapper .check-icon:before {
    transform: scale(1);
    opacity: 1;
}

label.radio-card input[type=radio]:focus + .card-content-wrapper .check-icon {
    box-shadow: 0 0 0 4px rgba(48, 86, 213, 0.2);
    border-color: #FC8700;
}

label.radio-card .card-content img {
    /*margin-bottom: 10px;*/
}

label.radio-card .card-content h4 {
    /*font-size: 16px;*/
    /*letter-spacing: -0.24px;*/
    /*text-align: center;*/
    /*color: #1f2949;*/
    /*margin-bottom: 10px;*/
}

label.radio-card .card-content h5 {
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    color: #686d73;
}

/*end gp delivery*/

.modal-backdrop.show {
    opacity: 1 !important;
    background-color: rgba(0, 0, 0, 0.4) !important;
    -webkit-backdrop-filter: blur(5px) contrast(60%) !important;
    backdrop-filter: blur(5px) contrast(60%) !important;
    transition: 200ms -webkit-filter linear;
}