body  {
    background: #fbfbfb;
    height:100%;
}

.main-area {
    width:100%;
    max-width:400px;
    border:1px #cccccc solid;
    min-height:744px;
    background: white;
    border-radius:5px;
    margin:auto;
    margin-top:20px;
}

.logo {
    width:160px;
    margin-left:13px;
    margin-top:5px;
}

.main-content {
    width:100%;
    padding:28px;
    padding-top:0px;
}

.contact-link div {
    border:1px #ada8a8 solid;
    border-radius:5px;
    padding:5px;
    width:250px !important;
    text-align:center;
    margin-top:5px;
}

.btn-menu {
    border:1px #cccccc solid;
    width:100%;
    margin-top:10px;
}

.request-textarea {
    height:200px;
}

.btn-menu:hover {
    border:1px #4d4d4d solid;
}

.main-area label {
    margin-top:10px;
}
.contact-link div:hover {
    background: #e5e5e5;
}

.contact-link {
    text-decoration: none;
    color:#0d6efd;
}

.back-button {
    color:black;
    text-decoration: none;
}

.back-button div {
    border:1px #ada8a8 solid;
    border-radius:5px;
    width:100px;
    text-align:center;
    padding:3px;
    margin-bottom:15px;
}

.back-button div:hover {
    background: #e5e5e5;
}

.btn-mv {
    background:#7cc77a;
    border:#7cc77a;
    margin-top:15px;
}

.btn-mv:hover {
    background: #5ab358;
}

.btn-smart {
    background:white;
    border:1px red solid;
    padding:10px;
    color:black;
}

.time-input {
 width:10px !important;
 text-align:center;
}

.time-input:focus {
    border:1px #ced4da solid;
}

.time-btn-left {
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
}

.time-btn-right {
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
}

.time-tracker-table td {
    vertical-align: middle;
}

.tr-sat, .tr-sun {
    background: #f1f1f1;
}

/* At the top level of your code */
@media screen and (max-width: 450px) {
    .main-area {
        margin-top:0px;
        border:0px;
        max-height: 1000px;
        width:100%;
    }

    body {
        background: white;
    }
}