#content img {
    margin: 0;
}

.warning {
    background: #FDE672; 
    color: #111; 
    border-radius: 10px;
    display: grid;
    align-items: center; 
    grid-template-columns: 1fr 20fr;
    column-gap: 5px;
    padding: 5px;
    margin: 2em;
}

.warning img {
    display: inline-block;
    max-width: 40px;
}

.preview-selection {
    background: #620A1A;
    font-size: 0.8em;
    border-radius: 10px;
    width: 250px;
    height: 400px;
    position: fixed;
    right: 20em;
    bottom: 1em;
    transition: all 0.5s linear;
}

.image-mask {
    -webkit-mask-image: url(images/quickquote_assets/modules/floorstyle1.png);
    mask-image: url(images/quickquote_assets/modules/floorstyle1.png);
    mask-repeat: no-repeat;
     border: 1px solid red;
    width: 100%;
    height: 100%;
    display: block;
    margin: 0 auto;
}

.image-mask img {
      width: 150px;
        height:150px;
}

.is-closed {
    width: 250px;
    height: 40px;
    position: fixed;
    right: 20em;
}

.is-open {
    width: 250px;
    height: 400px !important;
    position: fixed;
    right: 20em;
    bottom: 1em;
}

.close-open {
    background: red;
    width: 25px;
    height: 25px;
    border-radius: 25px;
    position: absolute;
    top: 0.5em;
    right: 0.5em;
}

#close-icon {
    max-width: 100% !important;
    width: 33px;
    position: absolute;
}

#close:hover { 
    cursor: pointer;
    background-color: darkred;
    transform: scale(1.07);
    transition: 0.3s all linear;
}

.preview-edit, 
.preview-edit-b {
    background: #620A1A;
    color: #FFF !important;
    width: 50px;
    margin: 0 auto;
    border-radius: 15px;
    visibility: hidden;
    position: relative;
}

.preview-edit {
    top: -3px;
}

.preview-edit-b {
    top: 10px;
}

.preview-edit:hover, 
.preview-edit-b:hover {
    text-decoration: underline;
}

.preview-selection-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 65px 200px 135px;
    grid-column-gap: 3px;
    grid-row-gap: 0;
}

.preview-cell h4 {
    text-align: center;
}

.preview-cell p {
    color: #620A1A;
    font-size: 14px;
    text-align: center;
}

.preview-cell.pc-1 { 
    grid-area: 1 / 1 / 2 / 2;
    background-color: white;
    border-radius: 10px 10px 0 0;
    border: 1px solid #DDD
}

#preview-selection-image-pattern {
    max-width: 50%;
    display: block;
    margin: 0 auto;
    padding: 10px;
    height: auto;
    transition: all 0.2s linear;
}

#preview-selection-image-border {
    max-width: 75%;
    display: block;
    margin: 0 auto;
    padding: 5px;
    height: auto;
    transition: all 0.2s linear;
}


.preview-cell.pc-2 { 
    grid-area: 2 / 1 / 3 / 2;
    background: white;
    border: 1px solid #DDD;
}

.preview-cell.pc-3 { 
    grid-area: 3 / 1 / 4 / 2; 
    background: white;
    border-radius: 0 0 10px 10px;
    border: 1px solid #DDD
}

/*All CSS Grids*/
.grid-container {
    display: grid;
    grid-column-gap: 10px;
    grid-row-gap: 15px;
    width: 800px;
}

/*CSS grid for the main content of the quick quote page*/
.grid-container-main {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-column-gap: 2px;
grid-row-gap: 2px;
align-content: center;
justify-content: center;
align-items: center;
justify-items: center;
    width: 800px;
}

/*CSS Grid for the measurements section*/
.grid-container.measurements {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.grid-container.measurements > * { border-radius: 10px; }

.grid-container.measurements input[type=radio] { margin-top: 20px; }

/*CSS Grid for the patterns section*/
.grid-container.patterns {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(8, 1fr);
}

.grid-container.borders {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 1fr);
}

.grid-container.colours {
    display: grid;
    align-items: end;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

.grid-container.contact-info {
    display: grid;
    grid-template-columns: 25% 50% 25%;
    grid-template-rows: 1fr;
    grid-row-gap: 15px;
    align-items: center;
    justify-items: center;
    margin-bottom: 2em;
}

.grid-container.contact-info .grid-cell p,
.grid-container.contact-info .grid-cell input {
    align-self: stretch;
    justify-self: stretch;
}

.grid-container.contact-info .grid-cell input { 
    background: #F2E1E1;
    height: 10px; 
}

.grid-container.contact-info .grid-cell input, 
.grid-container.contact-info .grid-cell textarea {
    border: 1px solid #620A1A;
    border-radius: 15px;
    font-family: Veradana, Arial, sans-serif;
    padding: 10px;
}

.grid-container.contact-info .grid-cell input:valid { background: #E2F2F1;}

/*For the quick quote form contents*/
.grid-cell p, 
.grid-cell a {
display: inline-block;
text-align: left;
}

.grid-container.colours .grid-cell p {
    display: block;
    text-align: center;
}

.grid-container.colours .grid-cell img {
    display: block;
    text-align: center;
    margin: 0 auto !important;
}

/*Set rules for the cells within the measurements section of the form*/
.grid-container.measurements .grid-cell { 

    background:#F5E6E6;
    text-align: center;
} 

/*Layout of cells in the measurement grid*/
.grid-container.measurements .grid-cell-1a { grid-area: 1 / 1 / 2 / 2; }
.grid-container.measurements .grid-cell-1b { grid-area: 1 / 2 / 2 / 3; }
.grid-container.measurements .grid-cell-1c { grid-area: 1 / 3 / 2 / 4; }
.grid-container.measurements .grid-cell-2a { grid-area: 2 / 1 / 3 / 2; }
.grid-container.measurements .grid-cell-2b { grid-area: 2 / 2 / 3 / 3; }
.grid-container.measurements .grid-cell-2c { grid-area: 2 / 3 / 3 / 4; }
.grid-container.measurements .grid-cell-3a { grid-area: 3 / 1 / 4 / 2; }
.grid-container.measurements .grid-cell-3b { grid-area: 3 / 2 / 4 / 3; }
.grid-container.measurements .grid-cell-3c { grid-area: 3 / 3 / 4 / 4; }

.grid-container.patterns .grid-cell,
.grid-container.borders .grid-cell {
   max-width: 100%;
    text-align: center;
    margin-bottom: 10px;
}

.grid-container.patterns .grid-cell img,
.grid-container.borders .grid-cell img {
    margin: 0 !important;
    max-width: 90%;
    height: auto;
    padding: 0 !important;
    border: 3px solid #F5E6E6;
}

.grid-container.borders .grid-cell img {
    padding-left: 5px;
} 

.grid-cell p {
    font-size: 14px;
    padding-bottom: 5px;
}


#p1see p { 
    font-size: 11px;
    text-align: center;
}


.pattern-input-wrapper,
.border-input-wrapper {
    background: #F5E6E6;
    border-radius: 5px 5px 0 0;
    color: #620A1A;
    padding: 5px 1px 0 5px;
    height: 30px;
    width: 90%;
    display: block;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.border-input-wrapper.no-image {
    height: 70px;
    border-radius: 5px;
}

.no-image p {
    text-align: center;
    font-size: 16px;
    padding-top: 10px
}

.selected {
    background: #E6CACA !important;
    transition: all 0.15s linear;
}

.pattern-input-wrapper input,
.border-input-wrapper input {
    position: absolute;
    top: 0.4em;
    left: 0.4em;
}

.pattern-input-wrapper p
.border-input-wrapper p {
    height: 30px;
    font-size: 18px;
    padding: 0;
    position: absolute;
    top:0.35em;
    right: 0.5em;
    text-align: left;
}

@media screen and (min-width: 1200px) {
    form {width: 800px;}
    
     hr { 
         text-align: center;
         display: block;
         margin: 0 auto;
        width: 66%; 
          margin-top: 1em;
        margin-bottom: 1em;
    }
}

@media screen and (max-width: 1199px) {
    .preview-selection {
        z-index: 9999;
        right: 1em;
    }
}

@media screen and (max-width: 800px) {    
    form { 
        padding: 0;
        width: 600px; 
    }
    
    hr { width:75%; }
    
    .grid-container { 
        justify-items: center;
        width: 80%; 
    }
    
    .grid-container-main { width: 600px; }
    
    .grid-container.measurements {
        grid-template-rows: 4fr;
        grid-template-columns: 1fr;
    }
    
    .grid-container.measurements .grid-cell-1a { grid-area: 1/1/2/2;}
    .grid-container.measurements .grid-cell-1b { grid-area: 2/1/3/2;}
    .grid-container.measurements .grid-cell-1c { grid-area: 3/1/4/2;}
    .grid-container.measurements .grid-cell-2a { grid-area: 4/1/5/2;}
    .grid-container.measurements .grid-cell-2b { grid-area: 5/1/6/2;}
    .grid-container.measurements .grid-cell-2c { grid-area: 6/1/7/2;}

    
    .grid-container.patterns {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(16, 1fr);
    }
    
    .grid-container.patterns .grid-cell {width: 200px;}
    
    .grid-container.borders {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(10, 1fr);
    }
    
    .grid-container.contact-info input {
     width: 200px;
    }
    
    .grid-container.contact-info p {
        text-align: center;
        width: 200px;
    }
    
    .no-image p {
        font-size: 18px;
    }

    hr { 
        margin-top: 1em;
        margin-bottom: 1em;
        width: 66%; 
    }
    
    .grid-container { width: 100%; }
    
    .grid-container-main { width: 100%; }
    
    .grid-container.measurements img { margin: 0 auto !important; }
    
    .grid-container.patterns {
        grid-template-rows: 32fr;
        grid-template-columns: 1fr;
    }
    
     .grid-container.borders {
        grid-template-rows: 32fr;
        grid-template-columns: 1fr;
    }
    
    .grid-container.borders .grid-cell img {
        display: inline-block;
        max-width: 50%;
    }
    
    .grid-container.patterns .grid-cell img,
    .grid-container.borders .grid-cell img {
        max-width: 100%;
    }
    
    .pattern-input-wrapper,
    .border-input-wrapper { width: 100%;
    }
    
    .preview-selection-grid {
        grid-template-rows: 75px 150px 135px;
    }
    
    .preview-selection {
        width: 175px;
        height: 320px;
        bottom: 3.5em;
    }

    
    .is-closed {
        width: 175px;
        height: 20px;
        bottom: 3.75em;
    }

    .is-open {
        width: 175px;
        height: 320px !important;
    }
    
    .preview-cell h4 { 
        font-size: 12px !important;
        padding-top: 8px;
        text-align: left !important;
        width: 165px;
    }
    
    #preview-selection-floor {
        text-align: left;
        font-size: 12px;
    }
    
    #preview-selection-image-pattern {
        max-width: 45%;
        padding: 5px;
    }
    
    #preview-selection-image-border {
        max-width: 65%;
        padding: 5px;
    }
}


@media screen and (max-width: 600px) {
    form { width: 500px; }
    
    .grid-container.patterns .grid-cell {
        width: 66% !important;
    }
    
    .grid-container.borders .grid-cell {
        width: 100%;
    }
    
    .border-input-wrapper { width: 66%;}
    
    .grid-container.borders .grid-cell img {
        max-width: 66%;
    }
}

@media screen and (max-width: 500px) {
    .grid-container { grid-column-gap: 0; }
    form { width: 450px; }
}

@media screen and (max-width: 470px) {
    form { width: 460px; }
    textarea { width: 300px; }
}

@media screen and (max-width: 450px) {
    form { width: 440px; }
}

@media screen and (max-width: 430px) {
    form { width: 420px; }
}

@media screen and (max-width: 420px) {
    
    .grid-container { width: 100%; }
    
    .grid-container-main { width: 100%; }
    
    .is-closed { height: 30px; }
    
    .close-open { right: 0.7em; }
    
    form { width: 370px; }
    
    .grid-container.measurements img { margin: 0 auto !important; }
    
    #Style1-F {margin-bottom: 15px;}
    #Style2-B {margin-bottom: 15px;}
    #Style3-F {margin-bottom: 15px;}
    #Style4-H {margin-bottom: 15px;}
    
    .grid-container.colours {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(6, 1fr);
    }
}

@media screen and (max-width: 360px) {
    form { width: 320px; }
}