/* MEDIA Queries - Responsive part*/

/*HELPER CLASSES*/
/*Smartphone size*/
@media screen and (max-width: 767px){
  .txt-hidden-xs{
     display:none !important;
  }
  
  /*Modal 6er grid sizes - xs*/
  .modal-xs-6{
    width:90%;
  }
  
  .modal-xs-5{
    width:75%;
  }
  .modal-xs-4{
    width:60%;
  }
  
  .modal-xs-3{
    width:45%;
  }
  
  .modal-xs-2{
    width:30%;
  }
  
  .modal-xs-1{
    width:15%;
  }
}
/*Tablet size*/
@media screen and (min-width: 768px) and (max-width: 991px){
  .txt-hidden-sm{
     display:none !important;
  }
  
  /*Modal 6er grid sizes - sm*/
  .modal-sm-6{
    width:90%;
  }
  
  .modal-sm-5{
    width:75%;
  }
  .modal-sm-4{
    width:60%;
  }
  
  .modal-sm-3{
    width:45%;
  }
  
  .modal-sm-2{
    width:30%;
  }
  
  .modal-sm-1{
    width:15%;
  }
  
}
/*Desktop small size*/
@media screen and (min-width: 992px) and (max-width: 1199px){
  .txt-hidden-md{
     display:none !important;
  }
  
  /*Modal 6er grid sizes - md*/
  .modal-md-6{
    width:90%;
  }
  
  .modal-md-5{
    width:75%;
  }
  .modal-md-4{
    width:60%;
  }
  
  .modal-md-3{
    width:45%;
  }
  
  .modal-md-2{
    width:30%;
  }
  
  .modal-md-1{
    width:15%;
  }
}
/*Desktop large size*/
@media screen and (min-width: 1200px){
  .txt-hidden-lg{
     display:none !important;
  }
  
  /*Modal 6er grid sizes - lg*/
  .modal-lg-6{
    width:90%;
  }
  
  .modal-lg-5{
    width:75%;
  }
  .modal-lg-4{
    width:60%;
  }
  
  .modal-lg-3{
    width:45%;
  }
  
  .modal-lg-2{
    width:30%;
  }
  
  .modal-lg-1{
    width:15%;
  }
}

@media screen and (max-width: 1024px){
  
  /*DASHBOARD*/
  .section-tile{
   padding:0px !important;
   height:160px !important;
  }
  
  #logo{
    margin-left:-11px;
  }
  
  /*TOP MENU BUTTONS*/
  a#link-help-page,a#link-logout{
    width:35px !important;
    height:35px !important;
    line-height:30px !important;
    margin-top:8px!important;
  }
  
  /*MINIFIE MENU BUTTON*/
  #left-panel .minifyme{
    display:none !important;
  }
  
  .input-group .input-group-addon{
    display:none;
  }
  
  /*STOREBOOK*/
  /*STOREBOOK - INPUT AND LABEL FIELDS*/
  .tab-content .form-group .col-md-10, .tab-content .form-group .col-md-2{
    width:100% !important;
  }
  
  /*LOCATIONOVERVIEW*/
  /*LOCATIONOVERVIEW - INPUT AND LABEL FIELDS*/
  #section-locationoverview-handlingunit-filter .form-group .col-md-10, 
  #section-locationoverview-handlingunit-filter .form-group .col-md-2{
    width:100% !important;
  }
  
  /*STOREBOOK - ACTION DROPDOWN MENUS*/
  .tab-content .dropdown ul.dropdown-menu{
    right:0px !important;
    left:auto !important;
  }
  
  form#user-form .col-md-8,
  #section-user-authorization .col-md-10,
  #section-user-sites-and-warehouses .col-md-10,
  #section-user-main-site .col-md-10,
  #form-contact-person .col-md-8,
  #form-contact-person .col-md-4{
    width:100% !important;  
  }
  
  /*TABLE*/
  /*TABLE BUTTONS*/
  table button.btn,table a.btn{
    padding:1px 5px!important;
  }
  /*TABLE ICON SIZE - smaller*/
  table i{
    font-size:13px!important;
  }
    
  div.well .btn{
    padding:1px 5px !important;
  }
  
  /*STICKY NAV*/
  .sticky{
    width:90% !important;
  }
  
}

@media screen and (min-width: 1025px) {
  /*TOUR GUIDE*/
  #section-wrapper-tour-guide #section-tour-guide{
    width:50%;
    margin:100px auto;
  }
  
  #section-wrapper-tour-guide #section-content-tour-guide ul{
	  display:inline-block;
	  /*flex-wrap: wrap;*/
	}
	
	/*#section-wrapper-tour-guide #section-content-tour-guide ul li{
	  display:flex;
	  margin-right:15px;
	}*/
  
  body.minified .login-info #section-login-info-user #lbl-login-info-username,body.minified .login-info #section-login-info-company{
    display:none !important;
  }
  
  .login-info #section-login-info-user #lbl-login-info-username{
	  height:auto;
	  margin-top:7px;
	  text-transform: capitalize;
	  font-size: 14px;
	  display: inline-block;
	  text-decoration: none;
	  max-width: 170px;
	  white-space: nowrap;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  vertical-align: middle;
	  border-bottom:none;
	  padding-left: 8px;
	}

  .login-info #section-login-info-company{
	  color: #cbcbcb;
	  padding: 0px 12px 0px 21px;
	  word-break: break-all;
	  display: inline-block;
  }

  .login-info:hover span.menu-item-area-right{
	  display:none;
	}
	
	/*By minifie the menu, we add the hover effect to showing the login user infos*/
	body.minified .login-info:hover span.menu-item-area-right{
      display:block !important;
  }
}

@media screen and (max-width: 1200px){
  
/*Label and input field adjustments*/
  label.control-label{
    width:100%;
    text-align:left!important;
  }
}
  
@media screen and (max-width: 1380px){
		  
	/*TABLE*/
  /*TABLE BUTTONS*/
  table button.btn,table a.btn{
    padding:1px 5px!important;
  }
  
  /*TABLE ICON SIZE - smaller*/
  table i{
    font-size:13px!important;
  }
  
  /*STOREBOOK - ACTION DROPDOWN MENUS*/
  .tab-content .dropdown ul.dropdown-menu{
    right:0px !important;
    left:auto !important;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1600px)
{
	/*LOGIN HEADER*/
  header#header-main #section-login-info{
   width:41.66666666666667% !important;
  }
  
  #section-login-area{
    width:33.33333333333333%;
  }
  
	/*DASHBOARD ICON SIZE*/
	.section-tile{
	   height:170px !important;
	   padding:3px !important;
	}
	
	.section-tile .tile-headline{
    height:54px !important;
  }
  
	.section-tile .tile-headline h3{
    font-size:16px !important;
	}
	
	.section-tile .tile-icon i
	{
	 font-size:35px !important;
	}
	
	/*TOUR GUIDE*/
  #section-wrapper-tour-guide #section-tour-guide{
    width:40%;
  }
}

@media screen and (min-width: 1601px)
{
  .section-tile .tile-headline{
    height:45px !important;
  }
  
  /*TOUR GUIDE*/
  #section-wrapper-tour-guide #section-tour-guide{
    width:33%;
  }
}