/*.form-label {
    display: inline-block;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    margin-bottom: 8px;
    margin-right:4px;
}

.required::before {
    content: "*";
    color: var(--red-bud);
    margin-right: 4px;
}*/

/*INPUT*/
.form-label {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
}

.required::before {
    content: "* ";
    color: var(--red-bud);
}

.input-custom {
    -webkit-appearance: none;
    background-color: var(--white);
    color: var(--black);
    /*border*/
    border-radius: var(--border-radius-default);
    border: none;
    outline: 1px solid var(--border-light);
    outline-offset: -1px;
    /*typography*/
    font-size: var(--font-size-medium);
    line-height: var(--line-height-default);
    font-weight: var(--font-weight-light);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /*layout*/
    padding: 12px;
    height: 40px;
    width: 100%;
    transition: outline-color 0.5s ease;
}
.input-sm {
    /*layout*/
    padding: 8px;
    height: 36px;
}

@media (max-width: 768px) {
    .input-custom {
        /*layout*/
        padding: 8px;
        height: 36px;
    }
    .input-sm {
        /*layout*/
        padding: 6px 8px;
        height: 32px;
    }
}

.input-custom:hover, .textarea-custom:hover {
    outline: 1px solid var(--border-dark);
}
.input-custom:focus, .textarea-custom:focus {
    outline: 2px solid var(--black);
    outline-offset: -2px;
}

.info-text {
    margin-top: 8px;
    margin-bottom: 0px;
    color: var(--subdued);
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    font-weight: var(--font-weight-light);
}

.input-custom.error, .textarea-custom.error {
    outline: 2px solid var(--red-bud);
    outline-offset: -2px;
}
.error-message {
    display:none;
    margin-top: 8px;
    margin-bottom:0px;
    color: var(--red-bud);
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    font-weight: var(--font-weight-light);
}
.input-custom.error ~ .error-message, .textarea-custom.error ~ .error-message {
    display: block;
}

/*TEXT AREA*/
.textarea-custom {
    -webkit-appearance: none;
    background-color: var(--white);
    color: var(--black);
    /*border*/
    border-radius: var(--border-radius-default);
    border: none;
    outline: 1px solid var(--border-light);
    outline-offset: -1px;
    /*typography*/
    font-size: var(--font-size-medium);
    line-height: var(--line-height-default);
    font-weight: var(--font-weight-light);
    /*layout*/
    padding: 10px;
    width: 100%;
    resize: none;
    overflow: auto;
    vertical-align: bottom; /*removes the extra space (inserted by browser) below text area*/
    transition: outline-color 0.5s ease;
    min-height:40px; /*for resizable*/
}

.textarea-scrollbar {
    border-right: 4px solid transparent;
    padding-right: 0px;
    overflow-y: scroll;
}
.textarea-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.textarea-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--grey-medium);
    border-radius: var(--border-radius-round);
}

.resize-vertical {
    resize: vertical;
}
.resize-vertical.textarea-scrollbar {
    overflow: hidden;
}

/*bootstrap setting*/
/*textarea.input-custom {
    height: auto;
    resize: vertical;
    overflow: auto;
}*/


/*SEARCH*/
input[type=search] {
    -webkit-appearance: none;
    background-color: var(--white);
    color: var(--black);
    /*border*/
    border-radius: var(--border-radius-default);
    border: none;
    outline: 1px solid var(--border-light);
    outline-offset: -1px;
    /*magnifying glass icon*/
    background-image: url(/assets/magnifyingGlass-grey-20x20.svg);
    background-size: 20px;
    background-position: 8px;
    background-repeat: no-repeat;
    /*typography*/
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    font-weight: var(--font-weight-light);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /*layout*/
    padding: 6px 8px 6px 36px;
    height: 32px;
    width: 100%;
    transition: outline-color 0.5s ease;
}
input[type=search]:hover {
    outline: 1px solid var(--border-dark);
}
input[type=search]:focus {
    outline: 2px solid var(--black);
    outline-offset: -2px;
}

input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    cursor: pointer;
    height: 16px;
    width: 16px;
    background-image: url("/assets/cross-black-16x16.svg");
    z-index:6000;
    pointer-events:all;
}

.search-custom .dropdown-menu {
    left: 0px !important;
    right: 0px !important;
}
.search-custom .dropdown-item::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M17.9422 17.0578L14.0305 13.1469C15.1642 11.7857 15.7296 10.0398 15.6089 8.27244C15.4883 6.50506 14.6909 4.85223 13.3826 3.65779C12.0744 2.46334 10.356 1.81926 8.58492 1.85951C6.81388 1.89976 5.12653 2.62125 3.87389 3.87389C2.62125 5.12653 1.89976 6.81388 1.85951 8.58492C1.81926 10.356 2.46334 12.0744 3.65779 13.3826C4.85223 14.6909 6.50506 15.4883 8.27244 15.6089C10.0398 15.7296 11.7857 15.1642 13.1469 14.0305L17.0578 17.9422C17.1159 18.0003 17.1848 18.0463 17.2607 18.0777C17.3366 18.1092 17.4179 18.1253 17.5 18.1253C17.5821 18.1253 17.6634 18.1092 17.7393 18.0777C17.8152 18.0463 17.8841 18.0003 17.9422 17.9422C18.0003 17.8841 18.0463 17.8152 18.0777 17.7393C18.1092 17.6634 18.1253 17.5821 18.1253 17.5C18.1253 17.4179 18.1092 17.3366 18.0777 17.2607C18.0463 17.1848 18.0003 17.1159 17.9422 17.0578ZM3.125 8.75C3.125 7.63748 3.4549 6.54994 4.07298 5.62491C4.69106 4.69989 5.56957 3.97892 6.5974 3.55317C7.62524 3.12743 8.75624 3.01604 9.84738 3.23308C10.9385 3.45012 11.9408 3.98585 12.7275 4.77252C13.5141 5.55919 14.0499 6.56147 14.2669 7.65261C14.484 8.74376 14.3726 9.87475 13.9468 10.9026C13.5211 11.9304 12.8001 12.8089 11.8751 13.427C10.9501 14.0451 9.86252 14.375 8.75 14.375C7.25866 14.3733 5.82888 13.7802 4.77435 12.7256C3.71981 11.6711 3.12665 10.2413 3.125 8.75Z" fill="%23717171"/></svg>');
    width: 20px;
    height: 20px;
}
.search-recent-header {
    padding: 12px;
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    color: var(--subdued);
}
.search-result-header {
    padding: 8px;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    color: var(--subdued);
    border-bottom: 0.5px solid var(--border-medium);
}


/*CHECKBOX*/
.checkbox-group, .radio-group, .switch-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.checkbox-label, .radio-label, .switch-label {
    font-size: var(--font-size-medium);
    line-height: var(--line-height-default);
    font-weight: var(--font-weight-light);
}

input[type=checkbox].checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--checkbox-color);
    cursor: pointer;
}
input[type=checkbox].checkbox {
    appearance: none;
    -webkit-appearance: none;
    outline: 1px solid var(--border-medium);
    outline-offset: -1px;
    border-radius: var(--border-radius-small);
    margin: 4px;
    transition: outline 0.5s ease;
}
input[type=checkbox].checkbox::after {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    position: relative;
    margin-left: -4px;
    margin-top: -4px;
    border-radius: var(--border-radius-small);
    transition: background-color 0.5s ease;
}
input[type=checkbox].checkbox:hover,
input[type=checkbox].checkbox:focus-visible {
    outline: 1px solid var(--border-dark);
}
input[type=checkbox].checkbox:hover::after, 
input[type=checkbox].checkbox:focus-visible::after {
    background-color: rgba(0, 0, 0, 0.08);
}

input[type=checkbox].checkbox:checked {
    outline: 1px solid var(--checkbox-color);
    background-color: var(--checkbox-color);
    background-image: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"> <path d="M10.7655 3.64052L4.76552 9.64052C4.73069 9.67539 4.68934 9.70305 4.64381 9.72192C4.59829 9.74079 4.54949 9.7505 4.50021 9.7505C4.45093 9.7505 4.40213 9.74079 4.35661 9.72192C4.31108 9.70305 4.26972 9.67539 4.2349 9.64052L1.6099 7.01552C1.53953 6.94516 1.5 6.84972 1.5 6.75021C1.5 6.6507 1.53953 6.55526 1.6099 6.4849C1.68026 6.41453 1.7757 6.375 1.87521 6.375C1.97472 6.375 2.07016 6.41453 2.14052 6.4849L4.50021 8.84505L10.2349 3.1099C10.3053 3.03953 10.4007 3 10.5002 3C10.5997 3 10.6952 3.03953 10.7655 3.1099C10.8359 3.18026 10.8754 3.2757 10.8754 3.37521C10.8754 3.47472 10.8359 3.57016 10.7655 3.64052Z" fill="white"/> </svg>');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px 12px;
}
input[type=checkbox].checkbox:checked:hover::after, input[type=checkbox].checkbox:checked:focus-visible::after {
    background-color: var(--checkbox-surround-hover);
}

.checkbox-primary {
    --checkbox-color: var(--black);
    --checkbox-surround-hover: rgba(33, 33, 33, 0.12);
}
.checkbox-secondary {
    --checkbox-color: var(--crimson-blaze);
    --checkbox-surround-hover: rgba(239, 51, 64, 0.12);
}

input[type=checkbox]:disabled {
    pointer-events: none;
    opacity: 0.6;
}
input[type=checkbox]:disabled ~ label {
    pointer-events: none;
}
input[type=checkbox]:checked:disabled {
    opacity: 0.4;
}


/*SWITCH*/
input[type=checkbox].switch {
    appearance: none;
    -webkit-appearance: none;
    width: 32px;
    height: 16px;
    background-color: var(--subdued);
    border-radius: var(--border-radius-round);
    cursor: pointer;
    position: relative;
    transition: background-color 0.8s var(--animation-spring-gentle);
}
input[type=checkbox].switch::before {
    position: absolute;
    content: "";
    background-color: var(--white);
    border-radius: var(--border-radius-round);
    height: 12px;
    width: 12px;
    top: 50%; /*relative to parent*/
    transform: translateY(-50%); /*relative to itself*/
    left: 2px;
    box-shadow: var(--shadow-button-hover);
    transition: left 0.8s var(--animation-spring-gentle);
}

input[type=checkbox].switch:checked {
    background-color: var(--switch-color);
}
input[type=checkbox].switch:checked::before {
    left: calc(100% - 2px - 12px);
}

.switch-primary {
    --switch-color: var(--black);
}
.switch-secondary {
    --switch-color: var(--crimson-blaze);
}


/*RADIO BUTTON*/
input[type=radio] {
    width: 16px;
    height: 16px;
    accent-color: var(--black);
    cursor: pointer;
}
input[type=radio] {
    appearance: none;
    -webkit-appearance: none;
    outline: 1px solid var(--border-dark);
    outline-offset: -1px;
    border-radius: var(--border-radius-round);
    margin: 4px;
    transition: outline 0.5s ease;
}
input[type=radio]::after {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    position: absolute;
    margin-left: -4px;
    margin-top: -4px;
    border-radius: var(--border-radius-round);
    transition: background-color 0.5s ease;
}
input[type=radio]:hover::after, input[type=radio]:focus-visible::after {
    background-color: rgba(0, 0, 0, 0.08);
}

.radio-primary {
    --radio-color: var(--black);
    --radio-surround-hover: rgba(33, 33, 33, 0.12);
}
.radio-secondary {
    --radio-color: var(--crimson-blaze);
    --radio-surround-hover: rgba(239, 51, 64, 0.12);
}

input[type=radio]:checked {
    outline: 1px solid var(--radio-color);
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none"><rect width="8" height="8" rx="4" fill="%23212121"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 8px 8px;
}
input[type=radio]:checked.radio-secondary {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none"><rect width="8" height="8" rx="4" fill="%23EF3340"/></svg>');
}
input[type=radio]:checked:hover::after, input[type=radio]:checked:focus-visible::after {
    background-color: var(--radio-surround-hover);
}

input[type=radio]:disabled {
    pointer-events: none;
    opacity: 0.4;
}
input[type=radio]:disabled ~ label {
    pointer-events: none;
}