/* ----------Begin ZInput---------- */

/* Phần này của text field */
.z-input-outline * {
    transition: all .3s linear;
}

.z-input-outline {
    position: relative;
    padding: 0 1px;
    cursor: text;
    align-items: stretch;
    height: 42px;
    display: flex;
    text-align: left;
}

.z-input-outline fieldset {
    border-collapse: collapse;
    border: 1px solid;
    bottom: 0;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: -7px;
    transition-duration: .15s;
    transition-property: color;
    transition-timing-function: cubic-bezier(.25, .8, .25, 1);
    border-radius: inherit;
    padding: 8px;
    border-radius: 5px;
    margin: 0;
}

.z-input-outline fieldset legend {
    order: 0;
    color: inherit;
    display: block;
    /* cái css cần đổi nè*/
    white-space: normal;
    max-width: 100%;
    color: transparent;
    padding: 0;
    width: 0;
    white-space: nowrap;
}

/* Phần này của input */
.z-input-field {
    display: flex;
    flex: 1 1 auto;
    position: relative;
    align-items: center;

}

.z-input-field input {
    flex: 1 1 auto;
    padding: 8px 0;
    max-width: 100%;
    min-width: 0;
    width: 100%;
    max-height: 39px;
    border: 0;
}

.z-input-field input:focus {
    outline: none;
}

.z-input-field label {
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    top: 6px;
    white-space: nowrap;
    pointer-events: none;
    height: 20px;
    line-height: 20px;
    letter-spacing: normal;
    font-size: 16px;
    line-height: 1;
    min-height: 8px;
    transition: .3s cubic-bezier(.25, .8, .5, 1);
    top: 14px;
    position: absolute;
    margin-left: 11px;
}

.z-input-field .parent{
    position: absolute;
    left: 0;
    right: 0;
}

.z-input-field:has([required]) label:after{
    content: "*";
}

/* Sự kiện */
.is-float fieldset legend, .z-input-outline:has(input:focus) fieldset legend, .z-input-outline:has(input:not(:placeholder-shown)) fieldset legend {
    padding-right: 5px;
    width: fit-content;
}

.is-float label, .z-input-field:has(input:focus) label,  .z-input-field:has(input:not(:placeholder-shown)) label{
    top: -6px;
}
.is-float label, .z-input-field:has(input:focus) label,  .z-input-field:has(input:not(:placeholder-shown)) label{
    top: -6px;
}

.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: .25rem;
    margin-left: 2%;
    font-size: .875em;
    color: #dc3545;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 95%;
    white-space: nowrap;
}

.show-invalid-important .invalid-feedback, .show-invalid:has(input:invalid) .invalid-feedback, .show-invalid:has(select:invalid) .invalid-feedback {
    display: block;
}

/* .show-invalid-important input, .show-invalid input:invalid {
    border: 1px solid red !important;
} */

.show-invalid-important fieldset, .show-invalid:has(input:invalid) fieldset {
    border: 1px solid red !important;
}

.show-invalid-important label, .show-invalid:has(input:invalid) label, .show-invalid:has(select:invalid) label {
    color: red !important;
}
.show-invalid-important+div[zdatebutton]>button, .show-invalid:has(input:invalid)+div[zdatebutton]>button {
    border-color: red !important;
}

.show-invalid-important[zdatetime] input, .show-invalid[zdatetime] input:invalid{
    border-right: 0 !important;
}

/* .show-invalid-important div[zselect], .show-invalid:has(select:invalid) div[zselect] {
    border: 1px solid red !important;
} */
.show-invalid-important fieldset, .show-invalid:has(select:invalid) fieldset {
    border: 1px solid red !important;
}
/* ----------Begin ZSelect---------- */
.container {
    display: flex;
    flex-direction: column;
    margin: auto;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #eaeaea;
    box-shadow: -2px 4px 12px 0px #dcdcdc;
    overflow: hidden;
}

.parent {
    margin-bottom: 0;
}

.title {
    margin-bottom: 25px;
}

/* styles */
.custom-select {
    position: relative;
}

.custom-select-options {
    background: #fff;
    position: absolute;
    top: 45px;
    left: 0;
    z-index: 9;
    max-height: 0;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.06), 0 3px 6px rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

.custom-select-options ul {
    list-style: none;
    padding: 0;
    max-height: 200px;
    overflow: auto;
}

.custom-select-options ul li {
    text-align: left;
}

.custom-select-options li {
    position: relative;
    padding: 10px;
    border-bottom: 1px solid #ebebeb;
    cursor: pointer;
}

.custom-select-options li .custom-select-img-container {
    width: 20px;
    height: 20px;
    margin-right: 15px;
    display: inline-block;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    overflow: hidden;
}

.custom-select-options li .custom-select-img-container img {
    width: 100%;
}

.custom-select-options li.is-highlighted {
    background: var(--color-primary);
    color: #fff;
}

.custom-select-options li.is-highlighted:hover {
    color: #f0f0f0;
}

.custom-select-options li.label {
    color: #333;
}

.custom-select-options li:last-of-type {
    border-bottom: none;
}

.custom-select-options li:hover {
    color: var(--color-primary);
}

.custom-select-options.is-active {
    transition: max-height 0.8s;
    max-height: 800px;
    font-size: 14px;
-webkit-box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.35);
    box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.35);
}

.custom-select-options.has-images li {
    padding-left: 35px;
}

.custom-select-active {
    background: rgba(255, 255, 255, 0) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#888" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 36.4 100" style="enable-background:new 0 0 36.4 80;" xml:space="preserve"><g><path d="M18.2,50.1c-0.6,0-1.1-0.2-1.5-0.6L0.6,33.4c-0.8-0.8-0.8-2.1,0-3c0.8-0.8,2.1-0.8,3,0l14.6,14.6l14.6-14.6   c0.8-0.8,2.1-0.8,3,0c0.8,0.8,0.8,2.1,0,3L19.7,49.5C19.3,49.9,18.7,50.1,18.2,50.1z"/></g></svg>') no-repeat;
    background-position: calc(100% - 15px) center;
    border-radius: 5px;
    height: 38px;
    padding-right: 45px;
    padding-left: 15px;
    border: 0px solid #ddd;
    line-height: 40px;
    cursor: pointer;
    text-align: left;
}

.custom-select-searchbox {
    background: #fff url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="#888" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 125" xml:space="preserve"><path d="M79.1,76.2L63,60.1c7.9-9.4,7.5-23.4-1.3-32.2c-9.3-9.3-24.4-9.3-33.7,0c-9.3,9.3-9.3,24.4,0,33.7  c4.6,4.6,10.8,7,16.9,7c5.5,0,10.9-1.9,15.4-5.6l16.1,16.1L79.1,76.2z M30.8,58.8c-7.7-7.7-7.7-20.3,0-28c3.9-3.9,8.9-5.8,14-5.8  c5.1,0,10.2,1.9,14,5.8c7.7,7.7,7.7,20.3,0,28C51.1,66.5,38.5,66.5,30.8,58.8z"/></svg>') no-repeat;
    background-position: calc(100% - 10px) center;
    width: 100%;
    height: 40px;
    padding: 0 15px;
    border: 1px solid #ddd;
    border-radius: 5px 5px 0 0;
    outline: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 3px 6px rgba(0, 0, 0, 0.03);
}

.zselect-background {
    background: tan;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 8;
    display: none;
}

.reverse-select {
    display: flex;
    flex-direction: column-reverse;
}

.reverse-select input {
    margin: 0 !important;
}
/* ----------End Begin ZSelect---------- */