html { 
    margin: 0px !important; 
}

.menu-icon,
.check-button{
    cursor: pointer;
}

.menu-icon .bar1,
.menu-icon .bar2,
.menu-icon .bar3 {
    width: 28px;
    height: 3px;
    background-color: #f1f1f1;
    margin: 5px 0;
    transition: 0.4s;
}

.check-button{
    border:none;
    background: transparent;
    height: 55px;
}

.offcanvas{
    background-color: #f1f1f1;
}

.offcanvas-body .menu,
.offcanvas-body .menu-item{
    list-style-type: none;
    text-align: center;
    padding: 8px;
    background-color: #525252;
}

.offcanvas-body .sub-menu{
    list-style-type: none !important;
    text-align: center;
    padding: 8px;
}

.offcanvas-body .sub-menu > li{
    background-color: midnightblue;
    border-bottom: solid 1px #f1f1f1;
}

.offcanvas-body .menu-item > a{
    color: white !important;
}

/*.offcanvas-body .menu,
.offcanvas-body .menu-item,
.offcanvas-body .sub-menu{
    list-style-type: none !important;
    text-align: center;
    padding: 8px;
    background-color: midnightblue;
}

.offcanvas-body .menu-item > a{
    color: white !important;
}*/