:root{
    --btn_bg: #3F4443;
    --btn_color: #EFEAE6;
    --btn_bg_hover: #333635;
    --btn_color_hover: #EFEAE6;
}

body::-webkit-scrollbar {
    width: 5px;
    border-radius: 4px;
    background-color: #efeae6;
}
body::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #bca390;
}
body, html{
	scrollbar-gutter: stable;
}
::selection {
    background: #d9cab2;
}

/* .y_scrollPreventer{
    touch-action: none;
    max-height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
} */

/* .hidden_html{
    overflow: hidden;
}
.title-search-result{
    position: fixed !important;
} */

/* link underline */
.y_linkUnderline{
    text-decoration: underline;
    text-underline-offset: .2em;
}

/* input btn */
.y_inputBtn label{
    --sizeEl: 35px;
    height: var(--sizeEl);
    line-height: var(--sizeEl);
    padding: 0 10px;
    border: 1px solid #CED1D1;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    & input{
        display: none;
    }
    & .y_inputBtn__title{
        display: block;
    }
    &:has(input:checked){
        border-color: #737C7B;
        background: #F8F5F0;
    }
}


/* radio */
.y_radio input{
    display: none;
}
.y_radio span {
    display: flex;
    align-items: center;
    cursor: pointer;
}
.y_radio span:before{
    content: '';
    -webkit-appearance: none;
    border-radius: 100%;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 5px;
    width: 1em;
    height: 1em;
    overflow: hidden;
    background: #efeae6;
    border: 1px solid #3F4443;
}
.y_radio input:checked + span:before{
    box-shadow: inset 0px 0px 0px 3px #efeae6;
    background: #3F4443;
}


/* btns */
.y_btn{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 54px;
    line-height: 54px;
    padding: 0 1.6rem;
    background: var(--btn_bg);
    font-size: 14px;
    color: var(--btn_color);
    text-align: center;
    cursor: pointer;
    border: none;
    border-radius: 3px;
    white-space: nowrap;
    transition: color .3s, background .3s, border .3s;
}
.y_btn_full{
    width: 100%;
}
.y_btn:hover{
    background: var(--btn_bg_hover);
    color: var(--btn_color_hover);
}

/* btn close */
.y_btnClose{
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.68042 5.67896L6.26792 4.09146C6.40903 3.95035 6.53917 3.93937 6.65833 4.05853L22.3875 19.7877C22.5067 19.9069 22.4957 20.037 22.3546 20.1781L20.7671 21.7656C20.626 21.9068 20.4958 21.9177 20.3767 21.7986L4.64749 6.06937C4.52833 5.95021 4.53931 5.82007 4.68042 5.67896Z' fill='%233F4443'/%3E%3Cpath d='M4.6558 19.9223L20.3684 4.20975C20.4931 4.08505 20.626 4.09325 20.7671 4.23436L22.3546 5.82186C22.4957 5.96298 22.5039 6.09588 22.3792 6.22059L6.66664 21.9332C6.54194 22.0579 6.40903 22.0497 6.26792 21.9085L4.68042 20.321C4.53931 20.1799 4.5311 20.047 4.6558 19.9223Z' fill='%233F4443'/%3E%3C/svg%3E%0A");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    cursor: pointer;
}


/* modal right */
.y_modalRight{
    display: none;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100vh;
    padding: 10px 15px 10px 10px;
    background: #00000080;
    z-index: 999;
}
.y_modalRight__box{
    padding: 25px 45px;
    opacity: 0;
    width: calc( 50% - 10px );
    min-width: 450px;
    height: 100%;
    background: #EFEAE6;
    margin-left: auto;
    border-radius: 5px;
    overflow: hidden;
    transform-origin: right top;
    transform: scaleX(0);
}
.y_modalRight__inner{
    display: flex;
    flex-direction: column;
    margin: auto;
    opacity: 0;
    max-width: 700px;
    height: 100%;
}
.y_modalRight__heading{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 15px;
}
.y_modalRight__close{
    flex-shrink: 0;
}
.y_modalRight__title{
    font-size: var(--font_size_5);
}
.y_modalRight__content{
    height: 100%;
    padding-right: 10px;
    overflow-y: auto;
    scrollbar-gutter: stable;
}
.y_modalRight__content::-webkit-scrollbar {
	width: 5px;
	background-color: #fffbf8;
	border-radius: 4px;
}
.y_modalRight__content::-webkit-scrollbar-thumb {
	height: 96px;
	background-color: #d1d1d1;
	border-radius: 4px;
}
.y_modalRight__form{
    display: flex;
    flex-direction: column;
    height: 100%;
}

@media (max-width: 1024px){
    .y_modalRight__box{
        width: 100%;
        max-width: 750px;
        min-width: auto;
    }
    .y_modalRight{
        padding: 10px;
    }
    .y_modalRight__box{
        padding: 20px 25px;
    }
    .y_modalRight__title{
        font-size: 20px;
    }
}

/* accordion */
.y_accordion{
    display: flex;
    flex-direction: column;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.y_accordion__item{
    border-bottom: 1px solid #CAC9C6;
}
.y_accordion__item:first-child{
    border-top: 1px solid #CAC9C6;
}
.y_accordion__trigger{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    cursor: pointer;
}
.y_accordion__icon{
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50%;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_568_3375)'%3E%3Cpath d='M14 5L8 11L2 5' stroke='%233F4443'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_568_3375'%3E%3Crect width='14' height='8' fill='white' transform='translate(1 4)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}
.y_accordion__item_open .y_accordion__icon{
    transform: rotate(180deg);
}
.y_accordion__content{
    opacity: 0;
    height: 0;
    padding: 0;
    box-sizing: content-box;
    overflow: hidden;
    line-height: 120%;
    color: #737C7B;
    transition: height .3s, padding .4s, opacity .2s;
}
.y_accordion__content p{
    margin: 0;
}
.y_accordion__content p + p{
    margin-top: .5em;
}
.y_accordion__content ul,
.y_accordion__content ol{
    margin: 0;
}
.y_accordion__content p + ul,
.y_accordion__content p + ol{
    margin-top: .5em;
}
.y_accordion__item_open .y_accordion__content{
    opacity: 1;
    padding: 15px 0;
    border-top: 1px solid #CAC9C6;
    transition: height .4s, padding .1s, opacity .6s;
}
@media (max-width: 768px){
    .y_accordion__trigger{
        padding: 15px 0;
    }
    .y_accordion__title{
        font-size: 12px;
    }
    .y_accordion__icon{
        width: 25px;
        height: 25px;
    }
    .y_accordion__content{
        font-size: 12px;
        line-height: 110%;
        transform: translateY(-5px);
        overscroll-behavior: contain;
    }
    .y_accordion__content{
        padding: 0;
    }
    .y_accordion__item_open .y_accordion__content{
        padding: 12px 0;
    }
}

/* accordion modal right */
.y_accordionModalRight .y_accordion__title{
    font-size: var(--font_size_2);
}
.y_accordionModalRight .y_accordion__content{
    font-size: var(--font_size_2);
}



/* datepicker */
.ui-widget.ui-widget-content{
    border-radius: 5px;
}
.ui-widget-header{
    background: white;
    border: none;
}
.ui-datepicker th{
    font-weight: 400;
    color: #888888;
}
.ui-state-default, .ui-widget-content .ui-state-default{
    background: white;
    border: none;
    border-radius: 5px;
    color: #3f4443;
    text-align: center;
}
.ui-state-default, .ui-widget-content .ui-state-default:hover{
    background: #ccbea840;
}
.ui-state-active, .ui-widget-content .ui-state-active{
    background: #f1e5d1;
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight{
    font-weight: 600;
}
.ui-widget-header .ui-icon{
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}
.ui-datepicker .ui-datepicker-prev span{
    background-image: url("data:image/svg+xml,%3Csvg class='w-4 h-4 rtl:rotate-180 text-gray-800 dark:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 10'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 5H1m0 0 4 4M1 5l4-4'%3E%3C/path%3E%3C/svg%3E");
}
.ui-datepicker .ui-datepicker-next span{
    background-image: url("data:image/svg+xml,%3Csvg class='w-4 h-4 rtl:rotate-180 text-gray-800 dark:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 10'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M1 5h12m0 0L9 1m4 4L9 9'%3E%3C/path%3E%3C/svg%3E");
}
.ui-datepicker .ui-datepicker-prev-hover {
    top: 2px;
	left: 2px;
}
.ui-datepicker .ui-datepicker-next-hover {
    top: 2px;
	right: 2px;
}
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover{
    background: transparent;
    border: none;
}