.ppp { color:#17bab8;}
.ppppp { color:#10a6a4}
.color { color:#2f2f2f}
.lightGray { color:#757575;}

/* Fonts Calling */
@font-face {
    font-family: 'robotobold';
    src: url('../fonts/roboto/roboto-bold-webfont.woff2') format('woff2'),
         url('../fonts/roboto/roboto-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'robotolight';
    src: url('../fonts/roboto/roboto-light-webfont.woff2') format('woff2'),
         url('../fonts/roboto/roboto-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'robotomedium';
    src: url('../fonts/roboto/roboto-medium-webfont.woff2') format('woff2'),
         url('../fonts/roboto/roboto-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'robotoregular';
    src: url('../fonts/roboto/roboto-regular-webfont.woff2') format('woff2'),
         url('../fonts/roboto/roboto-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.form-group label{font-weight:normal;}

/* Header NavBar */
.navbar.navbar-inverse { box-shadow:0 0 4px #333; -moz-box-shadow:0 0 4px #333; -ms-box-shadow:0 0 4px #333; -webkit-box-shadow:0 0 4px #333;}
.nav.navbar-nav .dropdown-menu { width:190px; box-shadow:0 4px 4px rgba(0, 0, 0, 0.176); background:#17bab8; border-top:none;}
.nav.navbar-nav .dropdown-menu > li > a {padding: 8px 20px; color:#fff;}
.nav.navbar-nav .dropdown-menu > li > a:hover, .nav.navbar-nav .dropdown-menu > li > a:focus { background:rgba(16,166,164,0.8);}

.navbar-header { /*width:270px;*/ width:14.5%; min-width:270px; background:#003869;color:#fff; transition:all 0.5s ease-in-out;}
.navbar-toggle.navi { display:inline-block; float:left; margin-left:15px; border:none;}
.navbar-toggle.navi:hover, .navbar-toggle.navi:focus { background:rgba(16,166,164,0.8);}
.navbar-header a.navbar-brand {color:#fff; padding-top:20px;}
.navbar-right.left .dropdown-menu {left: 0; right:auto;}

.userSec { margin:10px 20px 0 0;}
.userSec li { float:left; margin-left:10px;}
.userSec li button.btn {font-size:18px; padding:4px 5px; border:none; color:#757575; height:auto !important; min-width:none !important; line-height:normal !important; font-family: 'robotolight';}

.navbar-nav { margin-right:15px;}
.container-fluid.noPadd { padding-left:0; padding-right:0;}

.headBreadcrumb { margin:0 0 0 25px;}
.headBreadcrumb h2 { font-size:20px; margin:20px 0 0 0; text-transform:uppercase; font-family: 'robotolight';}

/* tooltip */


.centered-form{
	margin-top: 30px;
}

.centered-form .panel{
	background: rgba(255, 255, 255, 0.8);
	/* box-shadow: rgba(0, 0, 0, 0.3) 20px 20px 20px; */
}
.regisbtn {
    padding: 15px;
}
.regisbtn input.btn.btn-info.btn-block {
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
	}
h3.panel-title.regisTop {
    font-size: 22px;
    text-align: left;
    display: block;
    padding: 0;
    margin: 5px;
}
.centered-form .panel-body {
    padding: 30px 30px 10px 30px;
}
.input-sm{font-size:14px!important;}

i.tooltip1 {outline:none; }
i.tooltip1 strong {line-height:30px;}
i.tooltip1:hover {text-decoration:none;} 
i.tooltip1 span {
    z-index:10;display:none; padding:5px;
    margin-top:36px; margin-left:-40px;
    width:auto; line-height:16px; font-size: 10px; font-family: monospace;
}
i.tooltip1:hover span{
    display:inline; position:absolute; 
    border:1px solid #FFF;  color:#EEE;
    background:#333;
}
i.tooltip1:hover span:before{}
.callout {z-index:20;position:absolute;border:0;top:-14px;left:5px;}
    
/*CSS3 extras*/
i.tooltip1 span
{
    border-radius:2px;        
    box-shadow: 0px 0px 3px 2px #666;
    /*opacity: 0.8;*/
}
 .icon-active{ color:#003869!important;}
   a.navbar-brand {
    /* margin-left: 15px!important; */
	/* background-color:#17bab8; */
}

/* .navbar-brand {
    height: 59px!important;
	    padding: 15px 27px!important;
		transition:all 0.5s ease-in-out;
} */
.navbar-brand > img {
       margin-left: 40px;
}
#collapseThree ul li a{
	text-decoration: none;
    color: #007CB7;
	font-weight: 600;
	}
div#export{
   position: absolute;
    top: 25px;
    z-index: 9999;
    margin-left: 10px;
    cursor: pointer;
    background-color: #007CB7;
    padding: 2px 10px;
    color: #fff;
    border-radius: 4px;
}

td#jqGrid_toppager_right {
    float: left;
}
td#jqGrid_toppager_center {
    float: right;
}
.ui-jqgrid .ui-pg-selbox, .ui-jqgrid .ui-jqgrid-toppager .ui-pg-selbox{padding:1px 0px!important;}
	#collapseThree ul li a i.fa {
    padding-right: 10px;
    font-size: 20px;
}
/*.topNevigation {
    background-color: #17bab8;
    height: 59px;
    width: auto;
}*/
button.collapsed.navbar-toggle.navi.slideNav.topTab {
    background-color: #003869;
    height: 59px;
    padding: 0 22px!important;
    margin: 0;
  /*  top: -11px!important; */
    border-radius: 0;
}
label.acc {
    float: left;
    padding: 15px 4px;
	font-family: 'robotolight';
    font-weight: normal;
}
label.sect {
    float: left;
    padding: 8px 22px 0px 5px;
	font-family: 'robotolight';
    font-weight: normal;
}
div#gbox_jqGrid, div#gview_jqGrid, div#jqGrid_toppager, .ui-jqgrid-hdiv.ui-state-default, .ui-jqgrid-bdiv {
    width: 100%!important;
}
.pull-right.mainAccount {
    padding-top: 4px;
}
.shipmentBox table td a:hover{color:#424242;}
table.ui-pg-table.ui-common-table.ui-pager-table {
    float: right;
}
/* end */
/* Sidebar */

.sidebar {width:275px; padding:15px 0 15px 0; background:#fff; box-shadow:0 0 4px #333;}
.sidebar .panel { border:none; box-shadow:none; border-radius:0;}
.sidebar .nav-sidebar { margin:10px 0 0 0;}
.sidebar .nav-sidebar li { border-bottom:1px solid #E4E4E4; padding:10px 0; padding-left:60px;}
.sidebar .nav-sidebar li:first-child { padding-top:0;}
.sidebar .nav-sidebar li label { font-weight:100; font-family: 'robotolight'; margin:0; cursor:pointer; display:block;}
.sidebar .nav-sidebar li label:hover { color:#17bab8;}
.sidebar .nav-sidebar li input[type="checkbox"] { margin-right:10px; position:relative; top:1px;}
.sidebar .panel-heading { padding:0; border-bottom:1px solid #E4E4E4;}
.sidebar .panel-heading a { display:block; padding:13px 10px 13px 67px; position:relative; color:#747474;}
.sidebar .panel-heading a:hover, .sidebar .panel-heading a:focus { text-decoration:none; color:#007CB7;}
.sidebar .panel-heading a i { width:25px; height:25px; line-height:25px; font-size:25px; color:#007CB7; text-align:center; position:absolute; left:21px; top:7px; /*background:#e7f8f8;*/}


/* Dashboard */
.main { width:100%; box-sizing:border-box; padding-left:275px;}
.main, .sidebar { -moz-transition:all 0.4s ease-in-out; -ms-transition:all 0.4s ease-in-out; -o-transition:all 0.4s ease-in-out; -webkit-transition:all 0.4s ease-in-out; transition:all 0.4s ease-in-out;}

.dashBord .breadcrumb { background:#fff; padding-top:20px; padding-bottom:15px; padding-left:35px; box-shadow:0 0 3px #A4A4A4; font-size:12px; font-family: 'robotolight';}
.dashBord .breadcrumb a { color:#17BAB8;}

.whiteBord { background:#fff;}
.whiteBord.Border { border:2px solid #d2d2d2;}
.whiteBord.marg { margin:0 10px 0 20px;}

.whiteBord.bottomArea { background:none; margin:25px 10px 0 20px;}

.tabbingGraph{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f3f3f3+50,ededed+51,ffffff+100;White+Gloss+%232 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
.tabbingGraph li { width:20%; float:left;}
.tabbingGraph li a { padding:20px 35px;}
.tabbingGraph li span { display:block;}
.tabbingGraph li span.price { font-size:26px; color:#2f2e2e; font-family: 'robotoregular'; margin-bottom:0;}
.tabbingGraph li span.orders { font-size:22px; color:#2f2e2e; font-family: 'robotobold'; margin-bottom:5px;}
.tabbingGraph li span.data { font-size:18px; color:#2f2e2e; font-family: 'robotolight'; margin-bottom:5px;}
.tabbingGraph li span.data i { font-size:25px; float:left; margin:0 10px 0 0;}

.success { color:#5cb85c;}
.danger { color:#d9534f;}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {border-top-color:#fff; border-left:none; border-right:none; border-radius:0; margin:0;}
.nav-tabs > li { border-right:1px solid #bdbdbd; border-left:1px solid #ffffff;}
.nav-tabs > li > a:hover {border-color:transparent;}
.whiteBord .tab-content { padding:20px 0px;}

.shipmentBox {  box-shadow:0 0 3px #A4A4A4; padding:15px 25px 50px; border-radius:4px; -moz-border-radius:4px; -ms-border-radius:4px; -webkit-border-radius:4px; border:3px solid #fff; position:relative;}
.shipmentBox:hover { border-color:#17bab8;}
.shipmentBox .logoBorder { border:1px solid #ececec; height:24px; width:auto;}
.shipmentBox h1 { font-size:22px; color:#003869; font-family: 'robotobold'; margin:0 0 5px;}
.shipmentBox h1:hover, .shipmentBox.paddingBottom header a:hover { text-decoration:none;}
.shipmentBox hr { background:#ccc; margin:10px 0 5px; position:relative;}
.shipmentBox hr:before { position:absolute; left:0; top:-2px; height:3px; background:#17bab8; content:""; width:70px;}
.shipmentBox table { margin:0; color:#545454;}
.shipmentBox table tr:first-child td { border-top:none;}
.shipmentBox .footerArea { background:#17bab8; border-radius:0 0 4px 4px; -moz-border-radius:0 0 4px 4px; -ms-border-radius:0 0 4px 4px; -webkit-border-radius:0 0 4px 4px; padding:10px 15px; 
position:absolute; bottom:-3px; left:-3px; right:-3px;}
.shipmentBox .footerArea h3 { margin:6px 0 0 15px; font-size:18px; color:#fff; font-family: 'robotoregular'; float:left;}
.shipmentBox .footerArea h3 strong { font-weight:600; margin-left:10px;}
.shipmentBox .footerArea .pull-right { margin-right:15px;}
.shipmentBox .btn { padding:0; width:28px; height:28px; border-radius:0; background:rgba(16,166,164,0.8); color:#fff; font-size:16px;}

.bottomArea .col-sm-4 { margin-bottom:20px;}

.dataTableDe h3 { margin:0 0 15px; font-size:20px; color:#007CB7; display:inline-block;}
.dataTableDe td { font-size:12px; color:#525252;}
.dataTableDe .dataTables_length label { margin:0; font-size:12px; text-transform:capitalize;}
.dataTableDe .dataTables_length label select { width:80px; box-shadow:none; border-color:#ccc; border-width:2px; padding:5px 20px 5px 5px; appearance:none; -moz-appearance:none; -ms-appearance:none; -webkit-appearance:none; background:url(../images/down.png) right 5px center no-repeat;}
.dataTableDe .dataTables_filter input[type="search"] { width:250px; box-shadow:none; border-color:#ccc; border-width:2px;}
.dataTableDe .dataTables_filter input[type="search"]:focus, .dataTableDe .dataTables_length label select:focus { border-color:#0b888c;}
/*.dataTableDe .dataTables_length { position:relative;}
.dataTableDe .dataTables_length:after { position:absolute; content:"\f107"; left:58px; font-family: 'FontAwesome'; font-size:20px; color:#0b888c; top:3px; z-index:-1;}*/
.dataTableDe thead {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f6f8f9+0,e5ebee+50,d7dee3+51,f5f7f9+100;White+Gloss */
background: #f6f8f9; /* Old browsers */
background: -moz-linear-gradient(top, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 ); /* IE6-9 */
}
.dataTableDe .dataTables_info { font-size:12px; color:#0b888c;}

@media (min-width:1365px) {
	.tabbingGraph li span.price { font-size:22px;}
	.tabbingGraph li span.orders { font-size:18px;}
	.tabbingGraph li span.data { font-size:16px;}
	.tabbingGraph li a { padding:20px;}	
	
	.shipmentBox .footerArea { padding:10px;}
	.shipmentBox .footerArea h3 { margin-left:10px;}
	.shipmentBox .footerArea .pull-right {margin-right: 5px;}
	.shipmentBox .footerArea h3 { font-size:16px;}
	.shipmentBox {padding: 15px 10px 50px;}
	.navbar-header{min-width:275px;}
}



.shipmentBox.paddingBottom { padding-bottom:15px;}
.shipmentBox.paddingBottom header { cursor:pointer;}
.shipmentBox.active {border-color: #003869;}
.shipmentBox table td a { color:#003869;}
.sidebar #accordion { width:275px;}
.sidebar .nav-sidebar li {padding-left:67px;}
.sidebar.hideClass { width:65px;}
.main.fillBoard { padding-left:45px;}

.navbar-toggle .icon-bar { background:#fff;}
.navbar-fixed-top, .navbar-fixed-bottom {background: rgb(255, 255, 255) none repeat scroll 0 0; box-shadow: 0 0 3px rgb(102, 102, 102);} 
.navbar-right.userSec { margin-right:25px;}

#boxview { padding-top:5px; margin-top:15px;}

.datepickerNew {background: rgb(255, 255, 255) none repeat scroll 0% 0%; cursor: pointer; border-radius: 4px; padding: 6px 10px; border: 1px solid rgb(204, 204, 204); width: 100%; text-align: left; font-family: 'robotolight';
    font-weight: normal;}
.datepickerNew label { font-weight:100;}
#jqGrid {font-family: 'robotolight'; font-size:12px;}


.form-group.topField > label {
    float: left;
    width: 280px;
	line-height: 32px; font-weight:100; color:#0b888c; margin-right:15px; font-size:20px; font-family: "robotoregular",Helvetica,Arial,sans-serif;
}
.form-group.topField > label select { width:180px; float:right; color:#424242;}

@media (max-width:1450px) {
.container{width:100%!important;}	
}

/* 23 April 2018 */
.daterangepicker.dropdown-menu.ltr.opensright.show-calendar {
    width: 665px;
}
.ui-state-highlight .ui-icon, .ui-icon, .ui-widget-content .ui-icon{margin:auto;}
.mainAccount select.form-control{width:140px;}
/*end */


.modal-backdrop{
  background-color:#ffffff !important;
  position:relative !important;
  opacity:0 !important;
}
.popup-position {
    position: relative;
    height: calc(100vh - 70px);
}

#popup-container {
    position: absolute;
    top: 9px;
    left: 0;
    width: 100%;
    height:99%;
    overflow-y: auto;
    padding: 0;
    background: #eee;
    border: 1px solid #ccc;
}
.popup-position ol {
    padding: 0 0 0 15px;
}
.close-popup {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #007CB7;
    border-radius: 100%;
    height: 30px;
    width: 30px;
    text-align: center;
    color: #fff;
    font-size: 16px;
    line-height: 30px;
    font-weight: bold;
}
.popup-position h3 {
    background: #003869;
    padding: 9px 10px;
    color: #fff;
    margin: 0 0 10px 0;
    width: 100%;
}

.close-popup:hover {
    text-decoration: none;
    color: #fff;
}
.popup_content ol >li {
    margin-top: 20px;
}