@charset "UTF-8";

html, body{
 height: 100%; 
 margin: 0
}

@media ( max-width: 1199px ){

 html.sidebar-open, html.sidebar-open body{
  height: calc( 100vh - 1px );
  overflow: hidden
 }
 
}
@media ( min-width: 1200px ){

 .ui-frame-header{
  padding-left: 30px;
  padding-right: 30px  
	 
 }
	 
}

@media ( min-width: 1600px ){

 .ui-frame-header{
  padding-left: 50px;
  padding-right: 50px  
	 
 }
	 
}


@supports ( display: grid ){
	
 /*
  Page Frame
  */
	
 .ui-frame-header{
  grid-area: root-header
 }
 .ui-frame-app-window{
  grid-area: root-window
 }
 .ui-frame-footer{
  grid-area: root-footer
 }
 
 .ui-frame-container{
  min-height: 100%;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 80px minmax(0, 1fr) auto;
  grid-template-areas: 
    "root-header"
    "root-window"
    "root-footer";
 }
 
 @media ( max-width: 1199px ){
	 
  .ui-frame-container{
   grid-template-rows: 80px minmax(0, 1fr) auto;
   grid-template-areas: 
     "root-header"
     "root-window"
     "root-footer";
  } 
  
 }
 
 /*
  Header
  */

 .ui-frame-header-main{
  grid-area: logo
 }
 .ui-frame-header-side-first{
  grid-area: first
 }
 .ui-frame-header-side-last{
  grid-area: last
 }
 .ui-frame-mainmenu{
  grid-area: menu
 }
 .ui-frame-header-hamburger{
  grid-area: hamburger
 }
 
 /*
  Standard for small device
  */
  

 .ui-frame-container .ui-frame-header-group{
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto 70px;
  grid-template-rows: auto;
  grid-template-areas: 
   "logo . first hamburger"
 }
 
 .ui-frame-container .ui-frame-header-main{
  display: flex;
  justify-content: center;
 }
 .ui-frame-header-wrapper{
  padding-left: 16px
 }
 
  @media ( max-width: 1200px ){
	  
   .ui-frame-header-side-last{
	display: none   
   }
   
  }
 
  @media ( min-width: 992px ){
 
   .ui-frame-header-wrapper{
    padding-left: 31px
   }
   
  }
 
  @media ( min-width: 1200px ){
	  
   .ui-frame-header-hamburger{
    display: none 
   }
   .ui-frame-container .ui-frame-header-group{
    grid-template-columns: 300px minmax(0, 1fr) 300px;
    grid-template-rows: minmax(0, 1fr) 56px;
    grid-template-areas: 
      "first logo last"
      "menu menu menu"
   }
   .ui-frame-header-wrapper{
    padding-left: 36px;
    padding-right: 36px;	
	border-radius: 0 0 50px 50px
   }
   .ui-frame-header-side-last .wrapper{
    justify-content: flex-end   
   }
   .ui-frame-container.menu-center .ui-frame-mainmenu{
    display: flex;
    justify-content: center
   }
	 
  }

 
}