#sh-responsive-flex-image, #quote-form {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    max-width: 580px;
}

#sh-responsive-flex-image {
    width: 80%;
    margin-bottom: 50px;
}

#sh-responsive-flex-image > img {
    max-width: unset;
    min-width: 300px;
    width: 80%;
}

#quote-form {
    background-color: white;
    max-width: 600px;
}

.quote-form-label {
    height: 100%;
}

.quote-form-input > input {
    height: 40px;
}

#quote-form>.row:first-child {
    margin-bottom: 10px;
}

#quote-form>.row:last-child {
    margin-top: 10px;
}

.quote-form-message {
    height: 400px;    
}

div.quote-big-container {
    display: -ms-grid;
    display: grid;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.form-error {
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;

    background-color: red;
}

.quote-body {  
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 20px;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    -ms-grid-rows: 1fr 20px 1fr 20px 1fr 20px 1fr 20px auto 20px 1fr 20px 1fr;
    grid-template-rows: repeat(4, 1fr) auto repeat(4, 1fr);
    grid-auto-columns: 1fr;
    grid-auto-rows: -webkit-min-content;
    grid-auto-rows: min-content;
    gap: 20px;
        grid-template-areas: 
    "name"
    "email"
    "phone"
    "vehicle"
    "images"
    "message"
    "message"
    "captcha"
    "submit"
}

.quote-body > div {
    max-height: 200px;
}

.captcha {
    grid-area: captcha;
}

.frc-captcha {
    max-width: unset !important;
}

.message {  
    -ms-grid-row: 11;  
    -ms-grid-row-span: 3;  
    -ms-grid-column: 1;  
    height: 70px;
    grid-area: message; 
}

.message .form-floating {
    height: 200%;
}

.message .form-floating textarea[name="message"] {
    height: 100%;
}

.name { 
    -ms-grid-row: 1; 
    -ms-grid-column: 1; 
    height: 70px;
    grid-area: name; 
}

.email { 
    -ms-grid-row: 3; 
    -ms-grid-column: 1; 
    height: 70px;
    grid-area: email; 
}

.phone { 
    -ms-grid-row: 5; 
    -ms-grid-column: 1; 
    height: 70px;
    grid-area: phone; 
}

.vehicle {
    -ms-grid-row: 7;
    -ms-grid-column: 1;
    height: 70px;
    grid-area: vehicle;
}

.images {
    -ms-grid-row: 9;
    -ms-grid-column: 1;
    grid-area: images;
    -ms-grid-row-align: center;
        align-self: center;
    max-height: 200px;
}

.submit {
    -ms-grid-row: 15;
    -ms-grid-column: 1;
    height: 70px;
    grid-area: submit;
}

.submit input {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 5px;
}

.submit input:disabled {    
    filter: grayscale(60%);
    cursor: not-allowed;
}

.quote-header {
    padding-top: 20px;
    padding-bottom: 20px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

#upload-images, #remove-images {
    border-radius: 5px;
    border-width: 1px;
}

#upload-images:hover, #remove-images:hover {
    cursor: pointer;    
}

#remove-images {
    margin-left: auto;
}

#uploaded-image-holder {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

#uploaded-image-list {
    font-size: 15px;
    font-family: 'Montserrat Italic', sans-serif;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
    margin-left: 10px;
    margin-right: 10px;
    white-space: nowrap;
    text-align: start;
    overflow: hidden;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;;
    max-width: 240px;
}

.images-upload-box {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.images-upload-box p {
    font-size: .8rem;
    text-align: start;
    margin-bottom: 0;
}

.images-upload-button-outer {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    margin-top:10px;
    height: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: left;
        -ms-flex-pack: left;
            justify-content: left;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
}

.images-upload-button-outer > input {
    height: 50px;
}

#quote-form-name {
    margin-bottom: 1rem;
}

@media (min-width: 500px) {
    #images-upload-button-outer {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
    }
}

@media (min-width: 992px) {
    #quote-form-container {
        margin-right: 50px;
    }

    #sh-responsive-flex-image, #quote-form {
        -webkit-box-flex: unset;
            -ms-flex: unset;
                flex: unset;
    }
}
  