@media screen and (max-width: 500px) {
	
	div.cloudstyle#advancloudheader
	{
		display: none;
	}
	
	html #menuiconline
	{
		display: flex;
	}
	
	#wrapper
	{
		width: auto;
		min-width: auto;
	}
	
	#menuiconline:not(.menuclosed) #menuiconlineimg
	{
		background: #CCC;
	}
	
	#menuiconline.menuclosed ~ div#resoponsivemenucontainer
	{
		display: none;
	}
	
	#resoponsivemenucontainer
	{
		margin-top: -10px;
	}
	
	
	div.cloudstyle .errors p
	{
		 word-break: break-all;
	}
	
	div.cloudstyle .errors
	{
		 margin-left: 0;
	}
	
	div.cloudstyle label
	{
	    display: block;
	    width: auto;
	    float: none;
	    margin-bottom: 5px;
	    margin-left: 0;
	}
	
   div#resoponsivemenucontainer
   {
	   	position:absolute;
	   	z-index: 999;
	   	display: grid;
	    grid-template-areas:
	    	"flags flags flags"
	    	"scope scope scope"
	        "menu0 menu1 menu2"
	        "login login logout"
	        ;
	    grid-template-columns: repeat(3, 1fr);
	    row-gap: 12px;
	    padding: 4px;
	    padding-top: 12px;
	    padding-bottom: 12px;
	    background: #CCC;
	    margin-left: -8px;
   }
   
   div#resoponsivemenucontainer[data-menunumberofrows="4"]
   {
   		grid-template-areas:
	    	"flags flags flags flags"
	    	"scope scope scope scope"
	        "menu0 menu1 menu2 menu3"
	        "login login login logout"
	        ;
	    grid-template-columns: repeat(4, 84px );
   }
   
   div#overmenu,span#userprincipalcontainer,div#menu,div#menucontent,div#userprincipalmenu
   {
   		display: contents;
   }
   
   #overmenu span.overmenutitle
   {
   		display: none;
   }
   
   span#language
   {
   		grid-area: flags;
   		zoom: 1.4;
   }
   
   span#userprincipallogin
   {
   		grid-area: login;
   		text-align: left;
   }
   
   span#userprincipallogout
   {
   		grid-area: logout;
   }
   
   span#userprincipalscopeapps
   {
   		grid-area: scope;
   		text-align: center;
   }
   
   span#userprincipalscopeapps select.scopecomponentselect
   {
   		max-width:60px;
   }
   
   div#userprincipalmenu .menu_row:nth-of-type(1)
   {
   		grid-area: menu0;
   }
   
   div#userprincipalmenu .menu_row:nth-of-type(2)
   {
   		grid-area: menu1;
   }
   
   div#userprincipalmenu .menu_row:nth-of-type(3)
   {
   		grid-area: menu2;
   }
   
   div#userprincipalmenu .menu_row:nth-of-type(4)
   {
   		grid-area: menu3;
   }
   
   html #menu.cloudmenu div#userprincipalmenu div.menu_row
   {
   		display: flex;
   		flex-direction: column;
   		border: none;
   		padding: 0;
   		align-self: start;
   }
   
   div#userprincipalmenu .menu_row .menu_rowitem
   {
    border: none;
    border-radius: 0;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    margin-left: 0;
    padding-top: 10px;
    padding-bottom: 10px;
   }
   
   
}

html body
{

}