.box-grid {
    margin: 10% auto auto auto;
    max-width: 100%;
}


html, body {
    margin: 0;
    padding: 0;
}



@media only screen and (max-width:320px) {
    .main-block {
        /* margin: 15px; */
        zoom: 30%;
        margin: 5% auto auto 300px;
    }

    .left-grid {
        zoom: 30%;
    }

    .right-grid {
        zoom: 30%;
    }

    .container {
        margin-bottom: 0;
    }
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .box-grid {
        zoom: 50%;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .box-grid {
        zoom: 50%;
    }
}


/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .box-grid {
        zoom: 55%;
    }
}



@media only screen and (min-width: 868px) {
    .box-grid {
        zoom: 60%;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .box-grid {
        zoom: 70%;
    }
}

@media only screen and (min-width: 1050px) {
    .box-grid {
        zoom: 80%;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1240px) {
    .box-grid {
        zoom: 100%;
    }

    .main-block {
        margin: 15px;
    }
}

/**************current *******/

/*BWI-*/
/* (2560*1440) Full HD Display */
@media only screen and (min-width: 2560px) {
    .main-block {
        zoom: 200%;
        margin: -6.9% auto auto auto;
    }

    #maindiv {
        padding-top: 100px;
    }

    .left-grid {
        zoom: 200%;
    }

    .right-grid {
        zoom: 200%;
    }

    #tdLeft {
        margin-left: 45%;
        margin-top: 40%;
    }

    #tdRight {
        margin-right: 45%;
    }

    #buttondiv {
        margin-left: 75%;
        margin-top: -1%;
    }
}


/* (1920x1080) Full HD Display */
@media only screen and (max-width: 1920px) {
    .main-block {
        zoom: 110%;
        margin: -6.9% auto auto auto;
    }

    #maindiv {
        padding-top: 100px;
    }

    .left-grid {
        zoom: 80%;
    }

    .right-grid {
        zoom: 80%;
    }

    #tdLeft {
        margin-left: 40%;
        margin-top: 40%;
    }

    #tdRight {
        margin-right: 35%;
    }

    #buttondiv {
        margin-left: 74%;
        margin-top: -4%;
    }   
}
@media only screen and (max-width: 1680px) {
    .main-block {
        zoom: 115%;
        margin: -6.9% auto auto auto;
    }

    #maindiv {
        padding-top: 120px;
    }

    .left-grid {
        zoom: 80%;
    }

    .right-grid {
        zoom: 80%;
    }

    #tdLeft {
        margin-left: 30%;
        margin-top: 80%;
    }

    #tdRight {
        margin-right: 20%;
    }

    #buttondiv {
        margin-left: 70%;
        margin-top: -5%;
    }
}
@media only screen and (max-width: 1400px) {
    .main-block {
        zoom: 145%;
    }

    #maindiv {
        padding-top: 60px;
    }

    #buttondiv {
        margin-left: 68%;
        margin-top: -4%;
    }

    #tdLeft {
        margin-top: 100%;
        margin-left: 32%;
    }


    #tdRight {
        margin-right: 125%;
    }

    .main-block > * {
        left: -100px;
    }
}
/* (1366x768) WXGA Display */
@media only screen and (max-width: 1366px) {
    .main-block > * {
        left: -15px;
        margin-top:-8%;
    }

    .main-block {
        zoom: 85%;
    }

    #maindiv {
        padding-top: 170px;
    }

    #buttondiv {
        margin-left: 66%;
        margin-top: -8%;
        zoom: 80%;
    }

    #tdLeft {
        margin-top: 15%;
        margin-left: 50%;
    }

    #tdRight {
        margin-right: 45%;
    }
}
/* (1280x1024)  */
@media only screen and (max-width: 1280px) {
    .main-block {
        zoom: 120%;
    }

    #maindiv {
        padding-top: 100px;
    }
    #buttondiv {
        margin-left: 65%;
        margin-top: -9%;
    }

    #tdLeft {
        margin-top: 45%;
    }
    #tdRight {
        margin-right: 105%;
    }

    .main-block > * {
        left: -105px;
    }
}
@media only screen and (max-width: 1025px) {
    .main-block {
        /* margin: 15px; */
        zoom: 105%;
        margin: -6.9% auto auto auto;
    }

    #maindiv {
        padding-top: 80px;
    }

    .left-grid {
        zoom: 80%;
    }

    .right-grid {
        zoom: 80%;
    }


    #tdLeft {
        margin-left: 35%;
        margin-top: 45%;
    }

    #tdRight {
        margin-right: 28%;
    }

    #buttondiv {
        margin-left: 65%;
        margin-top: -2%;
    }
}


/* (1024x768) iPad 1 & 2, XGA */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .main-block > * {
        left: -240px;
    }

    .main-block {
        zoom: 70%;
        margin: -6% auto auto 300px;
    }

    #maindiv {
        padding-top: 115px;
    }
  
    #tdLeft {
        margin-left: -16%;
        margin-top: 10%;
    }

    #tdRight {
        margin-right: 10%;
    }

    #buttondiv {
        margin-left: 60%;
        margin-top: -8%;
    }

    .container {
        margin-top: -20px;
        margin-bottom: 0;
    }
}

/* (768*1024) iPad 1 & 2, XGA */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .main-block > * {
        left: -435px;
    }

    .main-block {
        zoom: 70%;
        margin: -6% auto auto 300px;
    }

    #maindiv {
        padding-top: 115px;
    }

  

    #tdLeft {
        margin-left: -16%;
        margin-top: 10%;
    }

    #tdRight {
        margin-right: 160%;
    }

    #buttondiv {
        margin-left: 50%;
        margin-top: -8%;
    }

    .container {
        margin-top: -20px;
        margin-bottom: 0;
    }
}




.right-grid {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*margin-top:20px;
    margin-right: 80px;*/
}

.left-grid {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* margin-left: 60px;
    margin-top: 10px;*/
}

.row > button {
    padding: 15px 20px;
    margin-right: 15px;
}

.row > a {
    padding: 15px 20px;
}

#save {
    border: 1px solid #337ab7;
}