/* ==========================================================================
   Templategrid

   Default Mendix Templategrid Widget. The template grid shows a list of objects in a tile view. For example, a template grid can show a list of products. The template grid has a lot in common with the data grid. The main difference is that the objects are shown in templates (a sort of small data view) instead of rows
========================================================================== */
  .mx-templategrid .mx-templategrid-item {
	  padding: 2px 8px 2px 8px; }
/* ==========================================================================
   Regions

   Used for navigation layouts
========================================================================== */
.region-topbar {
  	min-height: 85px !important; 
	border-bottom: 0px solid #004A7F !important;
    background-color: #000b28 !important; }

/* ==========================================================================
   Navbar Brand

   Used to style your app brand and logo
========================================================================== */
.navbar-brand {
  min-height: 85px; 
  line-height: 85px; }
  .navbar-brand img {
    margin-top: -5px; } 
/* ==========================================================================
   Page Header
========================================================================== */
.pageheader {
margin-bottom: 0px!important; }

.pageheader-title {
	font-size: 18px !important;
}

.pageheader-subtitle {
	font-size: 16px !important;
 }



/*******************************   HOME PAGE & TOP BAR    ********************************************************************************************/
.homepage-topbar-avatar-container {
	width: 70px;
    height: 70px;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
	background-color: #fff;
	border: 0px;
}
.homepage-topbar-avatar-container img {
  display: inline;
  margin: 0 auto;
  height: 100%;
  width: auto;
}

.mx-layoutcontainer-middle div.mx-layoutcontainer-nested:first-child {
	padding-top: 5px;
}
.mx-name-TopbarMenuIconContainer .toggle-btn {
	    font-size: 30px;
    float: left;
    height: 85px;
    width: 85px;
    border-right: solid 1px #fff;
    color: #fff;
	    padding-top: 23px;
    margin: auto;
    text-align: center;
    transform: none;
    vertical-align: middle;

	
}
.warehouse-topbar-profile-dropdownlist > button.dropdown-button {
	border-color: #000b28 !important;
	background-color: #000b28 !important;
	margin-top: 25px;
}

.warehouse-topbar-profile-dropdownlist > button.dropdown-button .caret {
   
    border-top: 8px dashed;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}

.mx-name-dropdownProfileDivConverter .mx-navigationlist .mx-navigationlist-item {
	background-color: #fff;	
    min-width: 220px;
    border-right: 0px;
	border: 0px;
}
.mx-name-dropdownProfileDivConverter .mx-navigationlist .mx-navigationlist-item  a {
	margin-left: 20px;
	
    font-size: 16px;
    color: #000;
}
.mx-name-dropdownProfileDivConverter .mx-navigationlist .mx-navigationlist-item  a:hover {
	text-decoration:none;
	color: rgb(246, 146, 30);
}
.homepage-maincontent-placeholder .mx-scrollcontainer-wrapper {
	position:relative;
}
@media (min-width: 992px) {
.mx-layoutcontainer .mx-placeholder .mx-layoutgrid {
    padding: 20px;
}
}


/********************************   END TOP BAR  *******************************************************************************************/
/********************************   LEFT MENU  *******************************************************************************************/
.mx-navigationtree .navbar-inner ul li a {
	font-size: 18px;
	color:#fff;
	padding-left: 30px;   
	padding-top: 15px;
    height: 60px; }
.mx-navigationtree li.mx-navigationtree-has-items > ul li a {	
	font-size: 18px;
    font-weight: normal;
    color: #fff;
    background-color: #003e6b;
    padding: 6px 20px 0px 25px;
	padding-left: 50px;
	border-left: solid #1e4b9b 0px;
	border-bottom: solid #1e4b9b 1px;
	border-right: solid #1e4b9b 0px;
	border-top: solid #1e4b9b 1px; 
}
.homepage-leftmenu-container .mx-layoutcontainer-wrapper {
	padding-top: 2px;
	background-color: #1e4b9b;
}
.mx-navigationtree ul li {
	border-bottom: 0px;
}
.mx-navigationtree .navbar-inner ul li a img {
	width: 50px;
  margin-right: 20px;
}
.mx-navigationtree .navbar-inner ul li a:hover {
        border-left: solid #8cd5f6 0px;
		border-bottom: solid #8cd5f6 1px;
		border-right: solid #8cd5f6 0px;
		border-top: solid #8cd5f6 1px; 
		padding-left: 30px;
		}
		.mx-navigationtree > .navbar-inner > ul > li.mx-navigationtree-has-items > ul > li > a:hover { padding-left: 50px; }
      .mx-navigationtree .navbar-inner ul li a.active {
         border-left: solid #8cd5f6 0px !important;
		border-bottom: solid #8cd5f6 1px; 
		border-right: solid #8cd5f6 0px;
		border-top: solid #8cd5f6 1px;
		 }
		 .mx-navigationtree .navbar-inner ul li a:focus {
   			 outline: none;
		}
.mx-navigationtree .navbar-inner ul li a .caret {    
	margin-left: 8px;
    border-top: 6px dashed;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
}
.mx-navigationtree,	
.mx-navigationtree .navbar-inner ul li a,	
.mx-navigationtree > ul li a:hover, .mx-navigationtree > ul li a:focus, .mx-navigationtree > ul li a.active,
.mx-navigationtree li.mx-navigationtree-has-items > ul li a,
.mx-navigationtree li.mx-navigationtree-has-items > ul li a:hover, .mx-navigationtree li.mx-navigationtree-has-items > ul li a:focus, .mx-navigationtree li.mx-navigationtree-has-items > ul li a.active {
	background-color: #1e4b9b !important;
}

.mx-navigationtree ul li ul li {padding:0px; margin-left: 0px;}


/******************************** MENU - NAM ***************************************************************************************/
/*Shrink to 85 px*/
.layout-atlas-responsive-default .mx-scrollcontainer:not(.mx-scrollcontainer-open) > .region-sidebar {
  width: 85px !important;
}

/*Home icon*/
.layout-atlas-responsive-default .mx-scrollcontainer:not(.mx-scrollcontainer-open) > .region-sidebar .navbar-inner ul li a {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 15px;
  padding-bottom: 15px;
  color: transparent;
}

/*Menu icon*/
.layout-atlas-responsive-default .mx-scrollcontainer:not(.mx-scrollcontainer-open) > .region-sidebar .navbar-inner ul li a img {
  padding-left: 0px;
}

/*Main text items*/
.layout-atlas-responsive-default .mx-scrollcontainer:not(.mx-scrollcontainer-open) > .region-sidebar .mx-scrollcontainer-wrapper .mx-navigationtree .navbar-inner ul > li.mx-navigationtree-has-items > a {
  display: none;
}

/*Sub items*/
.layout-atlas-responsive-default .mx-scrollcontainer:not(.mx-scrollcontainer-open) > .region-sidebar .mx-scrollcontainer-wrapper .mx-navigationtree .navbar-inner ul > li.mx-navigationtree-has-items > ul > li > a {
  padding-left: 15px;
}

.layout-atlas-responsive-default .mx-scrollcontainer:not(.mx-scrollcontainer-open) > .region-sidebar .mx-scrollcontainer-wrapper .mx-navigationtree .navbar-inner ul > li.mx-navigationtree-has-items > ul {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #5bc9f3;
  padding-top: 20px;
  padding-bottom: 20px;
  display: block !important;
  background-color: #1e4b9b;
  width: 350px;
}

.layout-atlas-responsive-default .mx-scrollcontainer:not(.mx-scrollcontainer-open) > .region-sidebar .mx-scrollcontainer-wrapper {    overflow-x: hidden;}
/******************************** END MENU NAM  ************************************************/

/********************************   MENU LINH *******************************************************************************************/
.mx-navigationtree .navbar-inner a,
.mx-navigationtree .navbar-inner li.mx-navigationtree-has-items ul {
  -webkit-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
}


.mx-navigationtree .navbar-inner li.mx-navigationtree-has-items ul { background-color: #1e4b9b;}
.layout-atlas-responsive-default .mx-scrollcontainer:not(.mx-scrollcontainer-open) > .region-sidebar .mx-scrollcontainer-wrapper .mx-navigationtree .navbar-inner ul > li.mx-navigationtree-has-items > a {
 -webkit-transition: border-width 0.1s ease-in-out;
  -moz-transition: border-width 0.1s ease-in-out;
  -o-transition: border-width 0.1s ease-in-out;
  transition: border-width 0.1s ease-in-out;
}

.layout-atlas-responsive-default .mx-scrollcontainer:not(.mx-scrollcontainer-open) > .region-sidebar > .mx-scrollcontainer-wrapper > .mx-navigationtree > .navbar-inner > ul > li.mx-navigationtree-has-items > ul > li:hover {}
.mx-name-dropdownProfileDivConverter .mx-navigationlist .mx-navigationlist-item a span.glyphicon {margin-right: 15px;}
/********************************   END MENU  LINH *******************************************************************************************/
/********************************   END LEFT MENU  *******************************************************************************************/



/*************************** OVERWRITE MAIN.CSS ***************************************************/
.layout-atlas .region-topbar .topbar-content {display: block;}
.layout-atlas .region-topbar .toggle-btn {margin-right: 15px; padding: 0px; padding-top: 23px; margin:auto;}
.layout-atlas .region-topbar .navbar-brand img {height: 85px; background: none; padding: 0px;}
.region-sidebar .mx-navigationtree li.mx-navigationtree-has-items > ul li a {
		font-size: 18px;
		font-weight: normal;
		color:#fff;
		background-color: #1e4b9b;
}
.layout-atlas-responsive-default .region-sidebar .mx-scrollcontainer-wrapper > .mx-navigationtree .navbar-inner > ul > li > a {
	height: 60px;
}

.layout-atlas .region-sidebar .mx-navigationtree .navbar-inner > ul > li > a {
	padding-left: 10px;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-right: 10px;
}
.region-sidebar .mx-navigationtree .navbar-inner > ul > li > a {
	color: #fff;
	border-left: 5px solid transparent;
	border-bottom: 0px; 
	border-top: 1px solid #1e4b9b;
	background-color: #1e4b9b;
	font-size: 18px;
	
}
.layout-atlas .region-sidebar {
	background-color: #1e4b9b;
}
a.homepage-topbar-chatbox-link, a.homepage-topbar-chatbox-link:hover {
	color: #d3eefb;
	text-transform:none !important;
	text-decoration:none !important;
}
@media (min-width: 768px) {
.layout-atlas-responsive-default .mx-scrollcontainer:not(.mx-scrollcontainer-open) > .region-sidebar .mx-scrollcontainer-wrapper > .mx-navigationtree ul li.mx-navigationtree-collapsed ul, .layout-atlas-responsive-default .mx-scrollcontainer:not(.mx-scrollcontainer-open) > .region-sidebar .mx-scrollcontainer-wrapper > .mx-navigationtree ul li.mx-navigationtree-has-items ul {
	display: block !important;
}
}
.mx-scrollcontainer .mx-placeholder {height: auto;}
.mx-title {margin: 0px;}
div.widget-progress-bar-text-contrast .progress-bar {color: #fff;}
.mx-scrollcontainer-fixed > .mx-scrollcontainer-middle > .mx-scrollcontainer-wrapper, .mx-scrollcontainer-fixed > .mx-scrollcontainer-left > .mx-scrollcontainer-wrapper, .mx-scrollcontainer-fixed > .mx-scrollcontainer-center > .mx-scrollcontainer-wrapper, .mx-scrollcontainer-fixed > .mx-scrollcontainer-right > .mx-scrollcontainer-wrapper {padding-top: 1px;}
.details-cus-listview-noborder>ul>li {border: 0px !important; padding: 0px !important;}
/**************************************************************************************************/


.mx-listview > ul > li.selected {
	background-color: #def;
}


.maincategory-dashboard-grid .mx-templategrid-item {padding:8px; border: 0px; cursor:pointer;}
.maincategory-dashboard-grid .mx-templategrid-item:hover {background-color:#A1DAF8 !important;}
.maincategory-dashboard-grid .mx-templategrid-item .mx-dataview-content {/*border: 1px solid #ddd;border-radius:20px;*/}
.maincategory-dashboard-grid .mx-dataview-content {border: 0px !important;}
.shiplistitem-grid-container .mx-grid-toolbar {height:10px;}
.shiplistitem-grid-container .mx-grid-content .mx-templategrid-row .mx-dataview .mx-table tr td {vertical-align:middle;}
.maincategory-dashboard-grid .flexitem-main .mx-dataview img {margin:auto;}
.btn-lg img {
    height: calc(14px + 14px) !important;
}
#ssoButton {background-color: #fff !important;}
.maincategory-dashboard-grid table tr td {vertical-align: middle;}
.sub-maincategory-link-containner .mx-templategrid-item {background-color:transparent;}
.sub-maincategory-link-text, .sub-maincategory-link-text:active, .sub-maincategory-link-text:visited {text-transform:uppercase; color:#000; font-size:18px; padding-right: 75px; background-repeat: no-repeat; background-position: right;}
.sub-maincategory-link-text:hover {text-decoration:none; color:red; font-weight:bold; background:url('images/icon2-16.png'); background-repeat: no-repeat; background-position: right;}
.mx-datagrid table tbody tr td {background-color:transparent !important;}
.mx-datagrid table tbody tr.selected td, .mx-datagrid table tbody tr.selected:hover td {background-color:transparent !important;}

	
/* ==========================================================================
  Custom by LinhND for DragAndDrop functions
========================================================================== */
	
.mx-name-templateGridEngineType .mx-grid-content,
.mx-name-templateGridPropellerType .mx-grid-content,
.mx-name-templateGridAnchorType .mx-grid-content,
.mx-name-templateGridS .mx-grid-content,    
.mx-name-templateGridProduct .mx-grid-content,
.mx-name-templateGridPackingUnit .mx-grid-content,
.mx-name-templateGridPickup .mx-grid-content,
.mx-name-templateGridDelivery .mx-grid-content,
.mx-name-templateGridModality .mx-grid-content, 
.mx-name-templateGridTrackAndTrace .mx-grid-content, 
.mx-name-templateGridLocation .mx-grid-content,
.mx-name-templateGridReceiver .mx-grid-content,
.mx-name-templateGridProducer .mx-grid-content
{ 

} 
.DropTarget .mx-templategrid-empty {height: 70px; border: solid 1px #ccc;}


/* ============= GENERATE SHIPMENT WIZARD STEPS  ======================== */

.ShipmentGenerationDispListView > ul > li {border: 0px; padding-top: 3px !important;padding-bottom: 3px !important;}
.ShipmentGenerationDispListView > ul > li.mx-listview-empty {display: none;}
.ShipmentGenerationDispListView {margin-bottom: 5px !important;}

.grid-inlineheader-customheader {
	display: none;
}
.grid-inlineheader-customheader .grid-inlineheader-header  
{  
	margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}
.mx-templategrid-content-wrapper .mx-templategrid-row:first-child .grid-inlineheader-customheader {
	display: inherit !important;
}
.Draggable .form-group {margin-bottom: 0px;}
.Draggable table.mx-table > tbody > tr > td > span {padding-left: 20px;}
.ship-selection-area-listview ul li {border-width: 0px; border-bottom-width: 1px; padding: 8px 15px 8px 15px;}
.ship-selection-area-listview ul li:last-child {border-width: 0px; border-bottom-width: 0px;}


.templateGridDragAndDrop .mx-grid-content { 
	border: 1px solid #009245;
	height: 46px !important;
	margin: 8px !important;
	
} 
.templateGridDragAndDrop {
	height: 60px;	
}


.DropTarget.DropTargetHover,
.DropTarget.DropTargetHover .mx-templategrid-empty  {
  margin: 0px;
  border: 1px solid #009245;
}

.DropTarget.DropTargetHover {
  margin: 0px;
  border: 1px solid #009245;
}
.Draggable.ui-draggable.ui-draggable-dragging{
	/* Nowhere to add custom style that works changed here for all app*/
	/* Applied to items being dragged */
	display: table;
	background-color: #d7ffea;
	width: 400px; /* To make sure barcode does not disapear*/	
	z-index: 100000 !important;
	}
.cus-templategrid-draganddrop .mx-listview-searchbar {padding:5px;margin-bottom:0px;}
.mx-grid-pagingbar, .mx-grid-search-controls {float: right;}
.mx-name-paging-first {margin-right:20px;}
.space-container {height:20px; border-bottom:solid 1px #ccc;}
table.export-stc-infor-block>tbody>tr>td {padding:3px;}
.export-main-label {
    margin: auto;
    padding-top: 50px;
    padding-bottom: 50px;
    font-size: 50px;
}
select.form-control {min-width:100px;}
.area-othervariants-listview>ul>li:hover, .area-othervariants-listview>ul>li:focus, .area-othervariants-listview>ul>li:active,
.area-othervariants-listview-img>ul>li:hover, .area-othervariants-listview-img>ul>li:focus, .area-othervariants-listview-img>ul>li:active {background-color: #fff;}