/* @font-face {
  font-family: 'Open Sans';
  src: url('../font/open-sans.woff2') format('woff2');
} */
@font-face {
  font-family: 'Roboto Light';
  src: url('../font/roboto/Roboto-Light.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto Regular';
  src: url('../font/roboto/Roboto-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto Medium';
  src: url('../font/roboto/Roboto-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto Bold';
  src: url('../font/roboto/Roboto-Bold.woff2') format('woff2');
}

body, html{
	background-color: #fff;
    font-size: 1rem;
    /* font-family: 'Open Sans',sans-serif;
	font-size: 14px; */
	font-family: "Roboto Regular";
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizelegibility;
    -webkit-text-shadow: hsla(0,0%,100%,.01) 0 0 1px;
    -webkit-text-stroke-width: .1px;
}
.md-logo {
	width: 160px;
}
.md-logo img{
	max-height: inherit;
}
a{
	text-decoration: none !important;
}
li a{
	color: #2a2a29 !important;
}
.main-menu {
	background-color: #f5f5f5;
}
.main-menu li a{
	font-size: 16px;
	color: #545454!important;
	padding-top:16px;
	padding-bottom:16px;
}
h1{
	font-size: 26px;
	color: #4e5254;
	Padding-top: 10px;
	padding-bottom: 10px;
	margin-top: 1rem!important;
	margin-bottom: 0.5rem!important;
}
h2{
	font-size: 20px;
	color: #4e5254;
}
h1,h2,h3,h4,h5,h6{
	text-transform: uppercase;
	margin: 0;
}
.table thead th {
	font-size: 13px;
}
.custom-table .table thead th {
	padding: 5px 10px;
	border: 0 none;
	background-color: #f6f6f6;
	font-weight: normal;
	text-align: center;
}
.custom-table .table tbody tr > th, .custom-table .table tbody tr > td {
	font-size: 0.75rem;
	vertical-align: middle;
	font-weight: 400;
	text-align: center;
}
.custom-table .table tbody tr > th, .custom-table .table tbody tr > th a{
	color: var(--site-color);
	text-align: center;
}

.shadow-box {
	box-shadow: 0 0 7px rgba(0,0,0,.1);
}

.more-link {
	font-size: 15px;
	text-transform: uppercase;
	font-weight: bold;
}
.pagination {
	align-items: center;
	justify-content: flex-end;
}
.pagination li a{
	color: #4e5254;
}
.page-item.active .page-link, .page-item .page-link:hover{
	background-color:var(--site-color);
	border-color: var(--site-color);
}
.page-item .page-link:hover, .theme-btn, .black-btn, .theme-btn:hover, .black-btn:hover {
	color: #fff;
}
.theme-btn, .theme-btn:hover {
	background-color: var(--site-color);
}
.theme-outline, .theme-outline:hover {
	border-color: var(--site-color);
	color: var(--site-color);
}
.black-btn {
	background-color:#4e5254;
}
.black-outline {
	border-color:#000;
	color:#000;
}
.grey-outline{
	border-color: #f6f6f6;
	color: #f6f6f6;
}
.theme-text{
	color: var(--site-color);
}
.theme-btn:focus, .black-btn:focus{
	box-shadow: none;
	outline: none;
}
label{
	text-transform: uppercase;
}
#mbl-menu li a{
	padding: 10px 15px;
}
.normal-text {
	text-transform: unset;
}
.line-chart {
	width: 200px;
	max-height: 400px;
}
.custom-chart{
	width: inherit;
	max-height: inherit;
}

.booking-list table tr td{
	padding: 10px 0px;
}
input, select {
	font-size: 11px!important;
}
label {
	font-size: 12px!important;
}
.f-18 {
	font-size: 18px;
}
.f-16 {
	font-size: 16px;
}
.add-new-address button {
	font-size: 16px;
}
.address-content {
	display: none;
}
.edit-icon {
	transition: 0.3s ease-in-out all;
	visibility: hidden;
}
.edit-icon button{
	color: #007bff;
}
.edit-field:hover .edit-icon{
	visibility: visible;
}
.custom-table .quote-id, .custom-table .vessel-name{
	font-size: 25px;
}
.quotes-header .back-btn, .quotes-detail, .quote-details-show .quotes-listing, .quote-details-show .quotes-form{
	display: none;
}
.quote-details-show .quotes-detail, .quote-details-show .quotes-header .back-btn{
	display: block;
}
.small-text {
	font-size: 12px;
}
.detail-option a{
	font-size: 28px;
}
.detail-option a:hover i, .detail-option a i{
	color: #007bff;
	text-decoration: none;
}
.booking-info h3 {
	font-size: 15px;
	color: #4e5254;
	font-weight: normal;
	font-family: "Roboto Medium";
}
#bookingTab li a {
	color: #4e5254;
	font-size: 16px;
	font-family: "Roboto Regular";
	padding: 15px 35px;
	text-transform: uppercase;
}
#bookingTab li a.active{
	color: var(--site-color);
}
.service-line-table .total-amount > td {
	font-family: "Roboto Bold";
	font-size: 14px!important;
}
#bookingTabContent .form-group{
	margin-bottom: 0;
}
.custom-file {
	position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
	margin-bottom: 0;
	height: calc(1.5em + .75rem + 2px);
}
.custom-file-input {
    position: relative;
    z-index: 2;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    margin: 0;
    opacity: 0;
}
.input-group > .custom-file:not(:first-child) .custom-file-label {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.custom-file-label {
    display: block;
    height: calc(1.5em + .75rem);
    padding: .375rem .75rem;
    line-height: 1.5;
    background: url(../img/down-arrow.png) no-repeat;
	background-position: center right;
	background-size: 5%;
	border-radius: .25rem;
	text-transform: lowercase;
}
.custom-file-label::after {
	display: none;
}
.selected-address h2{
	font-size: 15px;
}
.dotted-border .card{
	border-style: dashed;
}
.dotted-border .card .card-body{
	background: #f6f6f6;
}
#defaultAddress .select-address.dotted-border .card{
	border-color: var(--site-color);
}
.detail-option .icon-envelope-alt {
	color: #007bff;
}
.custom-table .table svg, .custom-table .table svg path{
	fill: #007bff;
}
/* track and trace css start  */
.card-wrapper .card-box{
	min-width: 150px;
	max-height: 72px;
	padding: 0 5px!important;
	color: #fff;
	margin-bottom: 2rem;
}

.card-wrapper .card-box.card-one .card{
	background-color:#0391c3;
}
.card-wrapper .card-box.card-two .card{
	background-color:#92bc3b;
}
.card-wrapper .card-box.card-three .card{
	background-color:#c2436c;
}
.card-wrapper .card-box.card-four .card{
	background-color:#cd8b2d;
}
.card-wrapper .card-box.card-five .card{
	background-color:#944635;
}
.card-wrapper .card-box.card-six .card{
	background-color:#08907c;
}
.card-wrapper .card-box.card-seven .card{
	background-color:#ff2e00;
}

.card-wrapper .card-box .card-title{
	font-size: 20px;
	font-weight: bold;
}
.card-wrapper .card-box .card-text{
	font-size: 12px;
	text-transform: capitalize;
}

.search-track .search-track-input, .search-track .input-group-text{
	height: 35px;
	background-color: #f5f5f5;
	border-right: 0 none;
}
.search-track .input-group-text {
	color: #cd8b2d;
	border-right: 1px solid #d8d8d8;
}
.search-track .search-track-input:focus{
	box-shadow: none;
}
.search-track .export-btn {
	background: url(../img/export-icon.png) no-repeat;
	background-size: 15px;
    background-position: 10px center;
    padding: 10px 10px 10px 30px;
    border: 1px solid #0778e0!important;
    color: #0778e0;
    font-size: 12px;
}
.offer-tag {
  background: #676b6d;
  color: #fff;
  width: 80%;
  text-align: center;
  padding: 2px 5px;
  position: relative;
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.25);
}
.offer-tag:after {
  width: 0;
  height: 0;
  border: 12.5px solid transparent;
  position: absolute;
  content: "";
  border-top-color: #676b6d;
  right: -23px;
  top: 0px;
  border-left-color: #676b6d;
}
.offer-tag:before {
    width: 0;
    height: 0;
    border: 13px solid transparent;
    position: absolute;
    content: "";
    border-bottom-color: #676b6d;
    right: -23px;
    top: -1px;
}
.track-trace-list .transport-name{
	/* color: #0275d8; */
	font-size: 18px;
	object-fit: contain;
	font-weight: 700;
}
.track-trace-list .transport-name a {text-decoration: none;}
.track-trace-list .time-update {
	color: #838383;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.track-trace-list .time-update .icon-time{
	font-size: 14px;
}
.v-divider-right:after {
	box-shadow: 0 4px 34px 0 rgba(0, 0, 0, 0.2);
	width: 2px;
    content: "";
    position: absolute;
    right: -10px;
    z-index: 1;
	background: #f6f6f6;
	top: -7px;
	bottom: -7px;
}
.v-divider-left:after {
	box-shadow: 0 4px 34px 0 rgba(0, 0, 0, 0.2);
	width: 2px;
    content: "";
    position: absolute;
    left: -10px;
    z-index: 1;
	background: #f6f6f6;
	top: -7px;
	bottom: -7px;
}
.track-trace-list .theme-text, .track-trace-list .description{
	font-size: 12px;
}
.step-row:before{
	top: 41%;
    position: absolute;
    content: " ";
    width: 85%;
    height: 5px;
    background-color: #ccc;
    z-index: 0;
    right: 0;
    left: 0;
	margin: auto;
	border-radius: 3px;

}
.step-row:after{
	top: 41%;
    position: absolute;
    content: " ";
    width: 30%;
    height: 5px;
    background-color: #4e5254;
    z-index: 1;
    /* right: 0; */
    left: 75px;
	margin: auto;
	border-radius: 3px;
}
.step-row li {
	max-width: 155px;
}
.step-row .step-title, .step-row .step-circle, .step-row .step-descrition{
	margin-bottom: 10px;
}
.step-row .step-title{
	font-size: 14px;
	color:#4e5254;
}
.step-row .step-circle .dot {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid #4e5254;
	display: inline-block;
	background: #fff;
	position: relative;
	z-index: 5;
}
.step-row li.active .step-circle .dot{
	background: var(--site-color);
	border-color:var(--site-color);
}
.step-row .step-descrition{
	font-size: 12px;
	color: #4e5254;
}
/* track and trace css end  */

/* payment tab css start */
#paymentsContent .form-control{
	min-width: 145px;
}
#paymentsContent .payments-option{
	min-width: 80px;
}
#paymentsContent .custom-table .table thead th{
	font-weight: bold;
}
body ::-webkit-scrollbar {
  width: 4px;
  height: 6px;
}

body ::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
          box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

body ::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
          box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
/* payment tab css end */



/* report page css start here */
.price {
	font-size: 26px;
	color: #007bff
}

@media screen and (min-width: 768px){
	.main-wrapper {
		min-height: calc(100vh - 12em);
	}
	.side-bar {
		min-height: calc(100vh - 5em);
	}
	#mbl-menu li.active a, #mbl-menu li a:hover {
		color: var(--site-color);
		border-bottom: 3px solid var(--site-color);
		transition:0.3s ease-in-out all;
	}
	#mbl-menu li a{
		border-bottom: 3px solid transparent;
	}
	#bookingTabContent .collapse{
		display: block;
		border: 0 none!important;
	}
	.service-line-table .total-amount-mbl, #paymentsContent .payments-option button span  {
		display: none;
	}
	.service-line-table tbody > tr > td.action-btn .upload-btn {
		background-color: var(--site-color);
		color: #fff;
	}
	.service-line-table tbody > tr > td.action-btn p button > span{
		display: none;
	}
}

@media screen and (max-width: 767px){
	.step-row:after, .step-row:before{
		display: none;
	}
	.step-row li {
		max-width: 100%;
		justify-content: space-between;
		width: 100%;
	}
	/* .step-row .step-title, .step-row .step-circle, .step-row .step-descrition{
		margin: 15px;
	} */
	.offer-tag {
		margin-left: auto;
	}
	.offer-tag:after{
		border-left-color: transparent;
		left: -13px;
		top: 0px;
		border-right-color: #676b6d;
		right: auto;
	}
	.offer-tag:before{
		left: -13px;
		top: -1px;
		right: 0px;
	}
	.v-divider-right:after, .v-divider-left:after {
		display: none;
	}
	.v-divider-right {
		border-bottom : 1px solid #d8d8d8;
		padding-top: 10px;
		padding-bottom: 10px;
		margin-bottom: 10px;
	}
	.v-divider-left {
		border-top : 1px solid #d8d8d8;
		padding-top: 10px;
		padding-bottom: 10px;
		margin-top: 10px;
	}
	.service-line-table tbody > tr > td.action-btn{
		max-width: 100%!important;
		flex: 0 0 100%!important;
	}
	.service-line-table tbody > tr > td.action-btn svg{
		display: none;
	}
	.service-line-table tbody > tr > td.action-btn .upload-btn,
	.service-line-table tbody > tr > td.action-btn .view-icon,
	.service-line-table tbody > tr > td.action-btn .delete-icon{
		margin-left: 10px;
		margin-right: 10px;
		padding-left:20px;
		padding-right:20px;
	}

	.service-line-table tbody > tr > td.action-btn .upload-btn {
		border-color: var(--site-color);
		color: var(--site-color);
	}
	.service-line-table tbody > tr > td.action-btn .view-icon {
		background-color: var(--site-color);
		color: #fff;
	}
	.service-line-table tbody > tr > td.action-btn .delete-icon{
		background-color:#4e5254;
		color: #fff;
	}
	.service-line-table .total-amount {
		display: none;
	}
	.service-line-table .total-amount-mbl > td {
		font-family: "Roboto Bold";
		font-size: 16px!important;
		color: var(--site-color);

	}
	.service-line-table .total-amount-mbl > td:last-child {
		text-align: right!important;
	}
	#bookingTabContent .tab-pane .accordion-header .btn{
		font-size: 16px;
	}
	#bookingTabContent .tab-pane{
		display: block;
		/* border: 1px solid #d8d8d8; */
		margin-top: 10px;
		margin-bottom: 10px;
	}

	#bookingTab li a {
		padding: 5px 10px;
	}
	#bookingTab {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.custom-table .quotes-details-table {
		background-color: #f6f6f6;
		border: 1px solid #d8d8d8;
	}
	.custom-table table > thead{
		display: none;
	}
	.custom-table table tbody > tr > td {
		display: flex;
		max-width: none;
		text-align: right;
		border-top: 0 none;
	}
	.custom-table .quotes-details-table tbody > tr > td:last-child:before, .service-line-table tbody > tr > td:before,
	#paymentsContent .payments-option button svg {
		display: none;
	}
	#paymentsContent .payments-option button.table-edit-icon {
		background-color: var(--site-color);
		color: #fff;
	}
	#paymentsContent .payments-option button.delete-icon {
		background-color: #4e5254;
		color: #fff;
	}
	#paymentsContent .payments-option {
		    width: 100%;
    max-width: 100%!important;
    flex: 0 0 100%;
    text-align: center!important;
	}

	#paymentsContent .payments-option button{
		max-width: 50%;
		margin: 0 15px;
		width: 33%;
	}

	.custom-table tbody > tr > td:before, .service-line-table tbody > tr > td .table-heading:before {
		font-weight: 400;
		color: #777;
		margin-right: auto;
		content: attr(data-table-header);
	}
	.service-line-table tbody > tr > td{
		display: inline-block!important;
		text-align: left!important;
		max-width: 50%!important;
		flex: 0 0 50%;
	}

	.service-line-table tbody > tr {
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		border: 1px solid #d8d8d8;
		margin-bottom: 15px;
	}
	.service-line-table tbody > tr > td p{
		font-size: 14px;
	}
	.service-line-table tbody > tr > td p.table-heading::before {
		color: var(--site-color);
		font-size: 16px;
	}
	.main-menu-inner .navbar-toggler{
		position: relative;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: .5s ease-in-out;
		-moz-transition: .5s ease-in-out;
		-o-transition: .5s ease-in-out;
		transition: .5s ease-in-out;
		cursor: pointer;
	}
	.main-menu-inner .navbar-toggler span{
		display: block;
		position: absolute;
	}

	.main-menu-inner.open .navbar-brand{
		visibility: hidden;
	}
	.main-menu-inner.open .navbar-toggler span:nth-child(1) {
		top: 18px;
		width: 0%;
		left: 55%;
	}
	.main-menu-inner.open .navbar-toggler span:nth-child(2) {
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.main-menu-inner.open .navbar-toggler span:nth-child(3) {
		top: 2px;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	.booking-list {background-color: #f5f5f5!important; border: 0 none!important;}
	.booking-list-item {
		border: 1px solid #d8d8dd;
		background-color: #fff;
		padding: 10px;
	}
	.pagination {
		justify-content: center;
	}
	.navbar-toggler{
		position: relative;
		border: 0 none;
	}
	.navbar-toggler span {
		display: block;
		background-color: var(--site-color);
		position: absolute;
		height: 4px;
		width: 26px;
		margin: auto;
		border-radius: 3px;
		opacity: 1;
		-webkit-transform: rotate(0);
		transform: rotate(0);
		-webkit-transition: .25s ease-in-out;
		transition: .25s ease-in-out;
	}
	.navbar-toggler:focus{
		box-shadow: none;
		border: 0 none;
		outline:0;
	}
	.navbar-toggler span:nth-child(1) {
		top: -6px;
	}
	.navbar-toggler span:nth-child(2) {
		top: 2px;
	}
	.navbar-toggler span:nth-child(3) {
		top: 10px;
	}
	#mbl-menu {
		background-color: #f5f5f5;
	}
	#mbl-menu li {
		border-bottom: 1px solid #d8d8d8;
	}
	#mbl-menu li a {
		padding-top: 10px;
		padding-bottom: 10px;
	}
	#mbl-menu li.active a {
		color: var(--site-color)!important;
	}

	.mbl-logo {
		max-width: 140px;
	}
	.mbl-logo img{
		max-height: inherit;
	}

}