@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&subset=latin-ext');

html { margin:0;padding:0;   -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; overflow-x: hidden;}
*, *:before, *:after {box-sizing: inherit; -moz-box-sizing: inherit; -webkit-box-sizing: inherit;}

.gradient {background: rgba(251,251,251,1);
background: -moz-linear-gradient(top, rgba(251,251,251,1) 0%, rgba(229,230,232,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(251,251,251,1)), color-stop(100%, rgba(229,230,232,1)));
background: -webkit-linear-gradient(top, rgba(251,251,251,1) 0%, rgba(229,230,232,1) 100%);
background: -o-linear-gradient(top, rgba(251,251,251,1) 0%, rgba(229,230,232,1) 100%);
background: -ms-linear-gradient(top, rgba(251,251,251,1) 0%, rgba(229,230,232,1) 100%);
background: linear-gradient(to bottom, rgba(251,251,251,1) 0%, rgba(229,230,232,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfbfb', endColorstr='#e5e6e8', GradientType=0 );}

body {
    font-family: 'Open Sans', sans-serif;
    background: #efefef;
    color: #333;
    font-size: 14px;
    line-height: 1.42857;
}

.anim, .mx-navigationtree .navbar-inner ul li a, .mx-navigationtree .navbar-inner ul li a .glyphicon  {-webkit-transition: all 0.3s ease-out !important;-moz-transition: all 0.3s ease-out !important; -o-transition: all 0.3s ease-out !important; transition: all 0.3s ease-out !important;}

/* main */
.flex {display: flex; width: 100% !important;  flex-wrap: wrap; padding:1vw;}
.flex2 {display: flex; width: 100% !important;  flex-wrap: wrap; padding:0vw;}
.colLeft {width:300px;}
.colRight {width: -moz-calc(100% - 300px);  width: -webkit-calc(100% - 300px);  width: calc(100% - 300px);  }
.rCont {background: #fff; border-radius:4px; -webkit-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1);
box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1); margin: 0 0.7vw 1.4vw 0.7vw !important; padding: 15px !important; flex: 0 1 auto;}
.logo {text-align: center; height: 200px; line-height: 200px; background: #c5352f; position: relative; margin-top: -90px !important; border-radius: 0 !important}
.logo img {margin: 50px auto 0 auto;}
.mx-title {color: #666; font-weight: 300; margin: 0px;}
.top { position: relative; top:0; left: 0; background: #fff; border-bottom:1px solid rgba(0,0,0,0.05); width: 100%; padding: 15px 20px 15px 350px;}
.col33 {width:33.33%;}
.col66 {width:66.66%;}
.col50 {width:50%;}
.col60 {width:60%;}
.col40 {width:40%;}
.col100 {width:100%;}
.mx-templategrid .mx-templategrid-item, .mx-templategrid .mx-templategrid-item.selected {padding: 0 !important; border:0 !important; background: none !important;}


/* top buttons */
.topBut, .top2But {width: 60px; height: 100%; display: block; position:absolute; background: none;  line-height: 50px; border: 0px !important; border-left: 1px solid #efefef  !important; padding: 0 !important; margin: 0 !important;  font-size: 15px !important; color:#798290 !important; right: 0; top:0; border-radius: 0 !important;}
.top2But {height: 70px; right: 160px;}
.topBut:hover, .topBut.mx-focus, .top2But:hover, .top2But.mx-focus {background: #c5352f!important; color:#fff !important;}
.backButton {right: 60px;}



/* menu */
.mx-navigationtree .navbar-inner ul li a {background: #fff !important; color:#666 !important; border-bottom: 1px solid #eee; border-left: 4px solid transparent;}
.mx-navigationtree .navbar-inner ul li:last-child a {border-bottom: 0 !important;}
.mx-navigationtree .navbar-inner ul li a:hover {color: #333;}
.mx-navigationtree .navbar-inner ul li a .glyphicon {margin-right: 8px; color: #666; }
.mx-navigationtree .navbar-inner ul li a:hover .glyphicon {margin-left: 10px; color: #333; }
.menu.rCont {padding: 0px !important;}
.mx-navigationtree .navbar-inner ul li a.active {border-left-color: #c5352f;}




/* boxes */
.boxNagl {font-size:16px; font-weight: 600; padding: 15px 20px; display: block; margin: -15px -15px -15px -15px; border-bottom: 1px solid #efefef;  background: #7b7b7b; color: #fff; border-top-left-radius: 4px; border-top-right-radius: 4px; }
.boxNagl2 {font-size:14px; font-weight: 600; padding: 15px 20px; display: block; margin: -15px -15px 0 -15px; border-right: 1px solid #efefef; background: #f9fafc; width: 30%; height: 100%; text-align: center; position: absolute; text-transform: uppercase;}
.count {position: absolute; width: 65%; left: 35%; top: 50%; transform: translate(0, -50%);  font-size:50px; font-weight: 700; }
.boxList .mx-grid-controlbar {margin-top:-42px !important;}
.fullCont  .boxList .mx-grid-controlbar {margin-top:-65px !important;}
.boxList {overflow: visible !important; position: relative;  margin-bottom: 0 !important;}
.mx-datagrid .mx-datagrid-head-table th {border:0 !important;}
.boxList .mx-grid-toolbar {position: absolute; top:-3px; left:120px;}
.mx-grid .mx-grid-controlbar .mx-grid-pagingbar .mx-button, .mx-grid-paging-status  {color: #fff;}
.mx-datagrid .mx-datagrid-body-table .mx-datagrid-body tr td {border-color: #eee;}
.fullCont .mx-grid-content {overflow-x: auto;}


/* List main */
.fullCont .mx-datagrid .mx-datagrid-head-table .mx-datagrid-head-wrapper {padding-top:25px;}
.fullCont .mx-grid-toolbar {position: absolute; top:0px; left:0px;}
.Extra.fullCont .mx-grid-toolbar { left:77px;}
.largeSearch .mx-grid-toolbar {top:0px;}
.fullCont:not(.largeSearch) .mx-grid-searchbar  {position: absolute; top:-5px; width: 260px; left: 320px;}
.largeSearch .mx-grid-searchbar  {position: absolute; top:-55px; width: 100%}
.Extra .mx-grid-searchbar  { top:-195px; }
.Extra .mx-grid-search-controls {position: absolute; top:190px; z-index: 101;}
.Extra .mx-grid-search-message {margin-top: 170px; display: none; color: #fff; background: #666; padding:10px 30px; border-radius: 5px; text-align: center; font-weight: 700;}
.fullCont .mx-grid-searchbar .btn-default {border-color: #59C2E6; background-color: #59C2E6; color:#fff; margin-top:-5px; }
.fullCont:not(.largeSearch) .mx-grid-searchbar  .mx-grid-search-input {width: 70px;}
.fullCont .mx-grid-searchbar .mx-name-reset {display: none;}
.rCont.fullCont {margin-top:50px !important;} 
.rCont.largeSearch {margin-top:100px !important;} 
.rCont.Extra {margin-top:230px !important;}
.fullCont .mx-grid-paging-status, .fullCont .mx-grid .mx-grid-controlbar .mx-grid-pagingbar .mx-button  {color: #333;}
.mx-datagrid .mx-datagrid-body-table .mx-datagrid-body tr.selected td, .mx-datagrid .mx-datagrid-body-table .mx-datagrid-body tr.selected:hover td {background-color: rgba(0,0,0,0.05) !important;}
.mx-grid-search-label {width: 45%}
.Extra .mx-grid-search-label {white-space: nowrap; overflow-x:hidden;}
.mx-grid-search-input {width: 55%}

.shMessage {display: block; padding:8px 10px; text-align: center; color:#fff; font-weight: 700;  margin: 0 10px 20px 10px; border-radius:4px;}
.sh2 .shMessage {margin: 0;}
.found {background: #8cc152;}
.notfound {background: #D9534F;}
.exist {background: #F6BB42;}

.mx-grid-search-item {width: 25%;}

.Scan .mx-grid-search-inputs .mx-grid-search-item:nth-child(18) {position: absolute; top: -64px;  left: 300px;  width: 130px;}
/*.Scan .mx-grid-search-inputs .mx-grid-search-item:nth-child(17) {position: absolute; top: -64px;  left: 380px;  width: 250px;}*/


/* login page */

.loginPage {}
.loginPage .mx-image {background: #c5352f; padding: 50px; margin-top: -100px !important;}
.loginpageRaben .loginpage-formwrapper {width: 300px; height: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);  padding: 30px; background: #fff; -webkit-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1); -moz-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1); box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1);}
.loginPage .mx-name-container1 {width: 300px; height: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);  padding: 30px; background: #fff; -webkit-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1); -moz-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1); box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1);}
.loginPage .mx-name-container1 img {display: block; margin: 0 auto 30px auto;}.loginPage .mx-name-container1 img {display: block; margin: 0 auto 30px auto;}
.loginPage .form-control {background: rgba(0,0,0,0.01) !important; border: 1px solid rgba(0,0,0,0.1) !important;  padding: 10px 20px !important; color:#333 !important;}
.loginPage .submit {display: block; margin: 0 auto; background: rgba(255,255,255,0.95) !important; font-weight: 700; text-transform: uppercase;  width:100%; color:#333;}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}

.loginPage input:-webkit-autofill,
.loginPage input:-webkit-autofill:hover,
.loginPage input:-webkit-autofill:focus,
.loginPage input:-webkit-autofill:active {
color:#333 !important;
}

.loginpageRaben .btn {display: block; margin: 0 auto; background: rgba(255,255,255,0.95) !important; font-weight: 700; text-transform: uppercase; border-radius: 6px; color: #333;}
.loginpageRaben .control-label {display: none;}

/* Mobile */

.topM { position: relative; top:0; left: 0; background: #fff; border:0px; width: 100%; padding: 0; height: 60px;z-index: 101; background: #c5352f;}
.logoM {text-align: center; height: 60px; line-height: 60px; background: #c5352f; position: absolute; margin-top: 0px !important; border-radius: 0 !important; width: 105px; left: 0px;}
.logoM img {margin: 10px auto 0 auto; height:40px !important;}
.flexM {background: #fff; }
.wx-mxwxbarcodescanner-button {display: block !important; padding: 12px  !important; text-align: center  !important; color:#fff  !important; font-weight: 700  !important; margin: 15px auto 10px auto !important; font-size: 16px !important; width: 200px !important;}
.flexM .mx-datagrid-head {background: #7b7b7b !important; color:#fff  !important;}
.topM  .topBut, .topM .top2But {color:#fff !important;  border-left: 1px solid rgba(255,255,255,0.3)  !important;}
.addBarcode {position: absolute;  top: -85px;  z-index: 101;  height: 60px;  width: 60px;  right: 50px;   background: none !important;   border: 0px;   color: #fff !important;   font-weight: bold;  font-size: 30px; border-left: 1px solid rgba(255,255,255,0.3)  !important; padding: 0 !important; border-radius: 0;}
.closeCamera, .closeCamera:hover, .closeCamera:active  {background-color: transparent; z-index: 1000 !important; position: fixed; left: 0px; top: 0px; font-size: 30px;border: 0px;}

/* Admin dashboard */
.nagl2 {font-size: 18px; text-align: center; font-weight: 300; padding: 0; display: block !important}
.bigFont {font-size:45px; text-align: center; font-weight: 700; }
.rCont .mx-layoutgrid {padding: 10px !important;}

/* Shipment view */
.shView .form-group {margin-top: 0px !important;  margin-bottom: 0px !important; padding-top: 5px !important;  padding-bottom: 5px !important;}
.shView .form-group:nth-child(odd) {background: #f7f7f7; }
.shView .form-group:first-child  {background: #000; }
.shView .col-sm-3 {width:200px !important;}
.shView .col-sm-9 {width: -moz-calc(100% - 200px);  width: -webkit-calc(100% - 200px);  width: calc(100% - 200px);}

.Extra .mx-datagrid-content-wrapper {overflow-x: scroll;}

@media only screen and (max-width: 1250px) {
.col50, .col40, .col60 { width: 100%; }
}



@media only screen and (max-width: 1600px) {
.mx-grid-search-item {width: 33%;}
.rCont.Extra {margin-top:280px !important;}
.Extra .mx-grid-searchbar  { top:-240px; }
.Extra .mx-grid-search-controls { top:235px; }
.Extra .mx-grid-search-message {margin-top: 180px;}
}