@media screen and (max-width: 500px) { 
	.mfLogin{
		width:90%;
			left: 5%;
	transform: translate(0,-50%);
	}
	.logininput, .loginButton{
		width: 90%;
		margin-left: 5%;
	}
}

@media screen and (max-width: 500px) { 
     .sidebarItemCollapsed{
        /* display: block; */
    }
 
    .sidebar{
        width: 80%;
    }

    .showHideNavbar{
        display: none;
    }

    .showHideNavbarMobile{
        display: block;
        top: 5px;
        height: 50px;
        width: 50px;
        background-color: #2F4050;
        filter: brightness(90%); 
        background-image: url('../UserContent/system/icon/menu.svg');    
        background-position: center;
        background-size: 50%;
        background-repeat: no-repeat;
        text-align: center;
        color: white;
        border-bottom-right-radius: 3px;
        border-top-right-radius: 3px;
        line-height: 38px;
        cursor: pointer;
        position: absolute;
        z-index: 2000;
    }  

    .mfHeader{
        font-size: 1.5em;
        padding-top: 15px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    .sideBarBottom{
        position: relative;
    }

    .navHolder{
        bottom: auto;
    }

    .sidebar{
        /* overflow-y: auto; */
    }

    .px20spacing{
        padding: 0px 2px 2px 2px;
        overflow-x: hidden ;
    }

    .mfTopButtons{
        padding: 0 5px;
    }

    .hideIfMobile{
        display: none;
    }

    .mfStripe{
        width: 100%;
        margin: 0;
        padding: 0;
        padding-left: 55px;
    }

    .DeviceControls{
        /* background-color: red; */
    }
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}