.msf_container {
    position: relative;
    display: grid;
    float: left;
    margin-bottom: 25px;
}
.msf_container .msf_fields {
    width: 60px;
    border-radius: 10px;
    position: absolute;
    height: 31px;
    text-align: center;
    padding: 0;
    background: #76bd23;
    color: #000 !important;
    font-weight: bold;
    border: none;
}
.msf_container .msf_fields:focus{
    border: none;
}
.msf_container input::-webkit-outer-spin-button,
.msf_container input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.msf_container .msf_fields::placeholder{
    color: #000 !important;
}
.msf_container .imageBox {
    height:500px; 
    width:500px;
    cursor: pointer;
	background-size:100% 100%;
}

.msf_container .design1_field_1 {
    top: 26.8%;
    left: 14.5%;
}
.msf_container .design1_field_2 {
    top: 8%;
    left: 44%;
}
.msf_container .design1_field_3 {
    top: 8%;
    left: 62.5%;
}
.msf_container .design1_field_4 {
    top: 43.8%;
    left: 81%;
}

.msf_container .design1_field_5 {
    top: 86.5%;
    left: 28%;
}


.msf_container .design2_field_1 {
    top: 56%;
    left: 4%;
}

.msf_container .design2_field_2 {
    top: 26.6%;
    left: 12.8%;
}

.msf_container .design2_field_3 {
    top: 8%;
    left: 44.6%;
}

.msf_container .design2_field_4 {
    top: 8%;
    left: 63%;
}

.msf_container .design2_field_5 {
    top: 43.5%;
    left: 85%;
}

.msf_container .design2_field_6 {
    top: 86%;
    left: 29%;
}


.msf_container .design3_field_1 {
    top: 44%;
    left: 2%;
}

.msf_container .design3_field_2 {
    top: 7.5%;
    left: 22%;
}

.msf_container .design3_field_3 {
    top: 15%;
    left: 44.5%;
}

.msf_container .design3_field_4 {
    top: 15%;
    left: 62.5%;
}

.msf_container .design3_field_5 {
    top: 48%;
    left: 85%;
}

.msf_container .design3_field_6 {
    top: 87%;
    left: 29%;
}

.msf_container .design4_field_1 {
    top: 54%;
    left: 2%;
}

.msf_container .design4_field_2 {
    top: 15%;
    left: 21%;
}
.msf_container .design4_field_3 {
    top: 15%;
    left: 45%;
}

.msf_container .design4_field_4 {
    top: 15%;
    left: 63%;
}

.msf_container .design4_field_5 {
    top: 48%;
    left: 85%;
}

.msf_container .design4_field_6 {
    top: 79.5%;
    left: 20%;
}

.msfnotChoosen{
    opacity: 0.4;
}

.chooseMasonarySupportDesign{
    height: auto;
    overflow: hidden;
}

.btnWrap {
    position: absolute;
    bottom: -25px;
    width: 100%;
    text-align: center;
}

.getSizes{
    cursor: pointer;
}

.userInformation input[type="text"]{
    width: 100%;
    margin-bottom: 20px;
}

/*.msf_form_data{
        padding: 40px 40px;
    border: 1px solid #eee;
    box-shadow: 1px 1px 6px #eee;
}
*/
@media(min-width:220px) and (max-width:568px){
    .msf_container{
        float: none !important;
        margin-bottom: 10px !important;
    }
   .msf_container .imageBox {
        height: 360px;
        width: 360px;
        background-size: 100% 100%;
    }
    .msf_container .msf_fields {
        width: 50px;
        height: 25px;
    }

    .msf_container .design4_field_6 {
        top: 79%;
        left: 19%;
    }

    .getSizes{
        height: 30px;
        line-height: 4px;
    }   

    .btnWrap {
        bottom: -8px;
    }
    .msf_container .design1_field_2 {
        top: 8%;
        left: 39%;
    }

    .msf_container .design1_field_3 {
        top: 8%;
        left: 56%;
    }
    .msf_container .design1_field_4 {
        top: 43%;
        left: 73%;
    }

    .msf_container .design1_field_5 {
        top: 86%;
        left: 26%;
    }
    .msf_container .design2_field_1 {
        top: 55%;
        left: 3%;
    }
    .msf_container .design2_field_2 {
        top: 26.6%;
        left: 11%;
    }
    .msf_container .design2_field_3 {
        top: 7%;
        left: 40%;
    }

    .msf_container .design2_field_4 {
        top: 7%;
        left: 56%;
    }

    .msf_container .design2_field_5 {
        top: 43.5%;
        left: 77%;
    }

    .msf_container .design2_field_6 {
        top: 86%;
        left: 26%;
    }

    .msf_container .design3_field_2 {
        top: 7%;
        left: 19%;
    }

    .msf_container .design3_field_3 {
        top: 15%;
        left: 40%;
    }

    .msf_container .design3_field_4 {
        top: 15%;
        left: 56%;
    }

    .msf_container .design3_field_5 {
        top: 48%;
        left: 77%;
    }

    .msf_container .design3_field_6 {
        top: 87%;
        left: 26%;
    }
    .msf_container .design4_field_2 {
        top: 15%;
        left: 19%;
    }
    .msf_container .design4_field_3 {
        top: 15%;
        left: 40%;
    }

    .msf_container .design4_field_4 {
        top: 15%;
        left: 56%;
    }
    .msf_container .design4_field_5 {
        top: 48%;
        left: 77%;
    }




}