/* styles.css */
.fs-group-inp {
    position: relative;
}

.fs-inp {
    height: 44px;
    font-size: unset !important;
    color: unset !important;
    margin-bottom: 5px;
}
.fs-inp:read-only{
    background-color: #f5f5f5;
    border: 1px solid #d9d9d9;
    background-image: none !important
}
.fs-label {
    font-size: 12px;
    color: #AAA8A8;
    position: absolute;
    top: -14px;
    left: 10px;
    transition: all .3s ease;
    padding-left: 3px !important;
    padding-right: 3px !important;
    background-image: linear-gradient(180deg, rgba(0, 0, 255, 0) 50%, #ffff 50%);
}

.fs-i-inp {
    position: absolute;
    right: 7px;
    top: 17px;
    font-size: 10px;
    color: #BFBFBF;
    display: none;
}

.fs-msg-inp {
    font-size: 12px;
    padding-left: 10px;
    display: none;
}

.fs-msg-inp.show {
    display: block;
    text-align: left !important;
}

.fs-group-inp .fs-inp {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    outline: 0;
    width: 100%;
}

.fs-group-inp .fs-inp:placeholder-shown + .fs-label,
.fs-group-inp:placeholder-shown + .fs-label {
    background-color: transparent;
    color: #BFBFBF;
    top: 10px;
}

/*.fs-inp:read-only, .fs-inp:disabled, fs-inp:disabled ~ label, .fs-inp:read-only ~ label {*/
/*    cursor: not-allowed;*/
/*    pointer-events: none;*/
/*    background-image: linear-gradient(180deg, rgba(0, 0, 255, 0) 50%, #963737 50%);*/
/*    !*background-image: unset !important;*!*/
/*}*/

.fs-inp:read-only, .fs-inp:read-only ~ label {
    cursor: not-allowed;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(0, 0, 255, 0) 50%, #FFFFFF 50%);
}

.fs-inp:disabled, .fs-inp:disabled ~ label  {
    cursor: not-allowed;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(0, 0, 255, 0) 50%, #FAFAFA 50%);
}

.fs-inp.error {
    border-color: #ff0c0c !important;
}

.fs-inp.error ~ label, .fs-inp.error ~ i, .fs-inp.error ~ span {
    color: #ff0c0c !important;
}

.fs-inp.warning {
    border-color: #ffc107 !important;
}

.fs-inp.warning ~ label, .fs-inp.warning ~ i, .fs-inp.warning ~ span {
    color: #ffc107 !important;
}

.fs-inp:required ~ i {
    display: block !important;
}

.fs-group-inp .fs-inp:focus + .fs-label,
.fs-group-inp:focus + .fs-label {
    top: -14px;
    left: 10px;
    background-image: linear-gradient(180deg, rgba(0, 0, 255, 0) 50%, #ffff 50%);
    color: #000000;
    font-weight: 600;
}