@import "../new-variables";

.modal-input {
    //display: block;
    //position: relative;

    display: flex;
    height: 63px;
    width: 100%;
    margin-bottom: 17px;
    border: 1px solid gray;


    :hover,
    :focus-within {
        border-color: $main-color;
    }

    label {
        //position: absolute;
        //left: 12px;
        //top: 50%;
        //transform: translateY(-50%);

        color: $main-color;
        font-size: $text-size-normal-bigger;
        letter-spacing: 0.28px;
        font-weight: $bold;
        text-transform: uppercase;
        flex: 0 0 auto;
        align-self: center;
        padding: 0 15px;

    }

    input {
        width: 100%;
        font-weight: $regular;
        flex: 1;
        border: none;
        outline: none;
        height: 100%;

        &:read-only {

        }
    }

    label,
    input {
        color: $main-color;
        font-size: $text-size-normal-bigger;
        letter-spacing: 0.28px;
    }
}

.form-input {
    border: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    label {
        color: $another-grey-text-color;
    }

    input {
        border-radius: 0;
        outline: none;
        width: 100%;
        height: 50px;
        border: 1px solid transparent;
        padding: 0 0 0 20px;
        background-color: $input-bg-color;
        color: $main-color;

        &.hasChanges {
            border-color: #e3ac16;
        }

        &:hover,
        &:focus-within {
            border: 1px solid $main-color;
        }

        &:read-only {
            background: transparent;
            border: 1px solid #a2a2a2;
        }
    }

    label,
    input {
        font-size: $text-size-normal;
        //text-transform: uppercase;
        font-weight: $bold;
    }

    .input-readonly {
        pointer-events: none;
    }
}

.file-input {
    input[type="file"]::-webkit-file-upload-button {
        background-color: $main-color; /* Change the background color */
        color: white; /* Change the text color */
        padding: 10px 20px; /* Adjust padding as needed */
        border: none; /* Remove the default button border */
        //text-transform: uppercase;
        cursor: pointer;
    }
label{
    color: $main-color;
    font-size: $text-size-normal-bigger;
    letter-spacing: 0.28px;
    font-weight: $bold;
    text-transform: uppercase;
    padding: 0 15px;

}
    font-weight: $regular;
    flex: 1;
    border: 1px solid gray;
    outline: none;
    font-size: $text-size-normal-bigger;
    letter-spacing: 0.28px;
    color: $main-color;
    margin-bottom: 36px;
    padding: 10px;
}