.mainContainer{
    margin: 20px;
    align-items: center;
}

.imgGenerateHalf{
    width: 56%;
    margin: 0 auto;
}

.customBuildHalf{
    width: 43.5%;
    margin: 0 6px 0;
}

.binModifier{
    width: 18.8%;
    margin: 0.1%;
    cursor: pointer;
}

.fullWidth{
    width: 100% !important;
}

.customizeBtn{
    width: 31%; 
    margin: 1% 1%; 
    background: #B2B2B2; 
    text-align: center; 
    padding: 10px;
    cursor: pointer;
}

.customizeBtn:hover{
    background: #4AB291; 
}

.customRow{
    /* height: 33%; */
    height: 154px;
}

.cancelBtn{
    margin: 10px;
    padding: 9px 26px;
    background: #B2B2B2;
    color: #fff;
    border: none;
    border-radius: 21px;
    font-family: DroidSR;
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 1px;
    cursor: pointer;
}

.doneBtn{
    margin: 10px;
    padding: 9px 26px;
    background: #0033A0;
    color: #fff;
    border: none;
    border-radius: 21px;
    font-family: DroidSR;
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 1px;
    cursor: pointer;
}

.activeBinStyle{
    border: 2px solid #16BECF;
}

.activeStyle{
    border: 1px solid #000;
}

.signStyleBtn, .lidStyleBtn, .bodyStyleBtn{
    width: 22%; 
    height: 150px; 
    margin:0 1%; 
    cursor: pointer;
}

.signColorBtn, .lidColorBtn, .bodyColorBtn{
    width: 12.5%;
    height: 57px;
    margin: 0 1%;
    cursor: pointer;
}

@media screen and (max-width: 800px) {
    .imgGenerateHalf{
        width: 100%;
        margin: 0 auto;
    }
    
    .customBuildHalf{
        width: 100%;
        margin: 0 6px 0;
    }

    .mainContainer{
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }

    .lidStyleBtn, .bodyStyleBtn{
        width: 50%;
    }
}