.hidden{
	display: none !important;
}

.nav{
	margin: 5px;
}

.my-custom-scrollbar {
position: relative;
height: 80vh;
overflow-y: auto;
}

.my-custom-scrollbar-half {
	position: relative;
	height: 38vh;
	overflow-y: auto;
}

.my-custom-scrollbar-5orders {
	position: relative;
	height: 20vh;
	overflow-y: auto;
}

.table-wrapper-scroll-y {
display: block;
}

.table-wrapper-scroll-y thead th{
	position: sticky;
	top: 0;
}

table  { border-collapse: collapse;  width: 100%; }
th     { background:#eee; }

.th-sm {border-top: 0px solid #dee2e6 !important}

thead {
	font-size: 14px;
}

tbody{
	font-size: 12px;
}

table thead tr th:nth-child(5) {
	width: 60px;
}

table thead tr th:nth-child(6) {
	width: 100px;
}

table thead tr th:nth-child(8) {
	width: 150px;
}

.flex-container{
	display: flex;
	flex-wrap: wrap;
}

.flex-container-columns{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}

.flex-space-between{
	justify-content: space-between;
}

.flex-space-around{
	justify-content: space-around;
}

.flex-start{
	justify-content: flex-start;
}

.flex-center{
	justify-content: center;
}

.flex-vheight{
	height: 80vh;
}

.flex-vheight-reduced{
	height: 70vh;
}

.map-new-order{
	height: 50vh;
	justify-content: center;
}

#orderNo{
	font-weight: bold;
}

.fontBolded{
	font-weight: bold;
}

#container-buttons{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
}

.modalBodyContent{
	border-top: solid 1px lightgray;
	border-bottom: solid 1px lightgray;
	padding: 8px;
}

.green-font{
	color: green;
}

.red-font{
	color: red;
}

.blue-font{
	color: #007bff !important;
}

.gray-font{
	color: #898289;
}

.black-font{
	color: black;
}

.italic-font{
	font-style: italic;
}

.nav-item{
	margin: auto 5px;
}

.hidden-option{
  display: none;
}

.infoCard{
	position: -webkit-sticky; /* Safari */
	position: sticky;
	/* top: 80px; */
}

#infoCard{
	position: -webkit-sticky; /* Safari */
	/* position: sticky; */
	top: 80px;
}

.title-sm{
	color: #6c757d;
	pointer-events: none;
	cursor: default;
	justify-content: center;
	text-align: center;
	padding: .5rem 1rem;
}

.addedBg{
	/* background-color: rgb(216, 254, 1); */
	background-color: rgb(204, 255, 102);
}

.card-body {
	border-bottom: 1px solid rgba(0,0,0,.125);
	padding: 0.25rem
}

.card-header {
	border-bottom: 2px solid rgba(0,0,0,.125);
	padding: 0.1rem 1.0rem
}

.truckList {
	padding: 0.1rem 1.0rem
}

.transportHours {
	width: 80px;
}

.transportHoursInput {
	font-size: 12px;
	height: calc(0.5em + .75rem + 2px);
	text-align: center;
	padding: .375rem .25rem
}

#truckList table thead tr th:nth-child(1) {
	width: 250px;
}

#truckList table thead tr th:nth-child(2) {
	width: 150px;
}

#truckList table thead tr th:nth-child(3) {
	width: 120px;
}

#truckList table thead tr th:nth-child(5) {
	width: 80px;
}

#truckList table thead tr th:nth-child(7) {
	width: 150px;
}

#truckList table thead tr th:nth-child(8) {
	width: 80px;
}

.remarkText {
	font-size: 14px;
}

.square, .square:focus {
	height: 15px;
	width: 15px;
	border: 1px solid black;
	outline: none;
}

.selectedIcon, .selectedIcon:focus {
	outline: none;
}

.no-outline, .no-outline:focus {
	outline: none;
}

.unconfirmed {
	background-color: #d5e10f;
}
.confirmed {
	background-color: #12e53f;
}
.rejected {
	background-color: #dd6c6c;
}

.unconfirmed-font {
	color: #d5e10f;
}
.confirmed-font {
	color: #12e53f;
}
.rejected-font {
	color: #dd6c6c;
}

.truckColor0 {
	background-color: #ff8d57;
}
.truckColor1 {
	background-color: #b263fa;
}
.truckColor2 {
	background-color: #57c9ff;
}
.truckColor3 {
	background-color: #62ff57;
}
.truckColor4 {
	background-color: #bfff57;
}
.truckColor5 {
	background-color: #fa63a9;
}
.truckColor6 {
	background-color: #0aeadf;
}
.truckColor7 {
	background-color: #9b8772;
}
.truckColor8 {
	background-color: #8fa2c3;
}
.truckColor9 {
	background-color: #f4b5b5;
}

.orderInTransport {
	background-color: #a2ef9f;
}
.orderInPlanning {
	background-color: #b07dda;
}

.transportHoursInput::-webkit-outer-spin-button,
.transportHoursInput::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.transportHoursInput[type=number]{
	-moz-appearance:textfield;
}

.completed{
	background-color: #0ab30a;
}

#invoiceList table thead tr th:nth-child(1) {
	width: 70px;
}
#invoiceList table thead tr th:nth-child(4) {
	width: 100px;
}
#invoiceList table thead tr th:nth-child(5) {
	width: 150px;
}
#invoiceList table thead tr th:nth-child(6) {
	width: 130px;
}

.paid{
	background-color: #79efef;
}

.font-12{
	font-size: 12px;
}

.font-1rem{
	font-size: 1rem;
}

.popover{
	max-width: 400px;
}

.vertical-center{
	vertical-align: middle;
}

#map {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
  }

/**
* Set rules for how the map overlays
* (information box and legend) will be displayed
* on the page. */
.map-overlay {
position: absolute;
bottom: 0;
right: 0;
background: #e3e3e3;
margin-right: 20px;
font-family: Arial, sans-serif;
overflow: auto;
border-radius: 3px;
}

#countryOverlay {
	top: 0;
	height: 90px;
	margin-top: 10px;
	width: 150px;
  }

.summary-border{
	border: gray;
	border-width: 5px;
    border-style: double;
}

.red-border{
	border-color: red;
}

.green-border{
	border-color: green;
}

.marker-main {
	background-image: url('/images/markers/marker-icon-20px-purple.png');
	background-size: cover;
	width: 20px;
	height: 48px;
	border-radius: 0%;
	cursor: pointer;
  }

.marker-yellow {
	background-image: url('/images/markers/marker-icon-20px-yellow.png');
	background-size: cover;
	width: 20px;
	height: 48px;
	border-radius: 0%;
	cursor: pointer;
  }

.marker-green {
	background-image: url('/images/markers/marker-icon-20px-green.png');
	background-size: cover;
	width: 20px;
	height: 48px;
	border-radius: 0%;
	cursor: pointer;
  }

.marker-red {
	background-image: url('/images/markers/marker-icon-20px-red.png');
	background-size: cover;
	width: 20px;
	height: 48px;
	border-radius: 0%;
	cursor: pointer;
  }

.marker-dot {
	background-image: url('/images/markers/marker-icon-circle-blue.png');
	background-size: cover;
	width: 10px;
	height: 10px;
	border-radius: 0%;
	cursor: pointer;
  }

.mapboxgl-popup {
max-width: 200px;
}

.mapboxgl-popup-content {
text-align: center;
font-family: 'Open Sans', sans-serif;
}