:root {
  --main-color: #0d6efd;
  --inactive-color: #f1f3f9; /*Autosuggest and select background color*/
  --top-color: #02257e;
  --box-color: #fff; /*Page background color*/
  --bar-color: #b0920c;
  --button-color1: #007bff;
  --button-color2: #28a745;
  --icon-color: #fff; /*For icon and font inside button*/
  --heading-color: #f1f3f9;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "hind-medium", sans-serif;
  font-weight: bold;
  font-size: 11px;
}

.job_bookingbox {
  display: inline-block; /*display flex make the whole page jump to left using disply block/inline-block solve that*/
  padding: 6.9rem 0 0 18.7rem;

  overflow: hidden;
  width: 100%;
  font-size: 0.9rem;
  background-color: #eeeefa;

  font-weight: 600;
}
.port_jobbox {
  display: flex;
  flex-direction: column;
  /* width: 72.4rem; */
  margin: 0rem 0.25rem -1rem 0rem;
  padding: 0px 0px 8px 5px;
  background-color: var(--main-color);
}

.LabelHeading {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: bold;
  margin: 0rem 0.071rem 0.125rem -0.25rem;
  background-color: var(--heading-color);
  outline: 1px solid var(--main-color);
  color: var(--top-color);
}

.jobbox1 {
  display: flex;
  justify-content: flex-start;
  /* border: 1px solid black; */
  margin: 1px 1px 4px -4px;
  min-height: 28px;
  overflow: hidden;
  /* width: 100.1%; */
  border-radius: 8px;
  list-style-type: none;
  align-items: center;
  padding: 2px 94px 2px 0px;

  background-color: var(--box-color);
  font-weight: bold;
  color: black;
}

.jobbox2 {
  display: flex;
  flex-direction: row;
  /* height: 36px; */
  font-size: 16px;
  margin: -3px 1px -2px -4px;
  background: var(--box-color);
  padding: 4px 94px 2px 0px;
}
.jobbox3 {
  margin: -3px 1px -4px -4px;
  background-color: var(--box-color);
  column-gap: 113px;
}

.jobbox31 {
  display: grid;
  grid-template-columns: 140px auto;
  row-gap: 4px;
}
.jobbox32 {
  display: grid;
  grid-template-columns: 140px auto;
  row-gap: 4px;
}
.jobbox4 {
  background-color: var(--box-color);
  margin: -3px 1px -4px -4px;
  column-gap: 113px;
}
/* .jobbox41 {
  display: grid;
  flex-direction: row;
  flex-wrap: wrap;
  grid-template-columns: 136px 124px 70px 116px;
  column-gap: 4px;
}

.jobbox42 {
  display: grid;

  grid-template-columns: 140px 129px 74px 100px;
} */

.jobbox5 {
  white-space: nowrap;
  background-color: var(--box-color);
  margin: -3px 1px -4px -4px;
  column-gap: 113px;
}
.jobbox51 {
  display: grid;
  grid-template-columns: 140px auto;
  row-gap: 4px;
}
.jobbox52 {
  display: grid;
  grid-template-columns: 140px auto;
  row-gap: 4px;
}

.jobbox6 {
  margin: 3px 1px 9px -4px;
  background-color: var(--box-color);
}

.text-inputAuto-added {
  width: 22.1rem;
}

.jobbox-Gd-R {
  width: 20rem;
}

.text-statusjob {
  width: 23vw;
  border-radius: 0.25rem;
  min-width: 11.5rem;
}

.fieldcheck_partybox {
  padding: 2px 0px 2px 0;
}
.fieldcheck_shipmentbox {
  padding: 2px 0px 2px 0;
}
.fieldcheck_portbox {
  padding: 2px 0px 2px 0;
}
.fieldcheck_vesselbox {
  padding: 2px 0px 2px 0;
}

.placeicon {
  font-family: fontawesome!important;
}

[disabled] {
  opacity: 0.6;
  font-weight: bold;
}

[Color-box] {
  background-color: var(--inactive-color);
}

.tablink {
  border: none;
  outline: none;
  cursor: pointer;
  padding: 4px 12px;
  font-size: 14px;
  border: 0.03rem solid;
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
  display: none;
}

.break-line {
  box-shadow: inset 0px -4px 3px -1px azure;
}

@keyframes slideIn {
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }

  100% {
    transform: translateY(0rem);
    opacity: 1;
  }

  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
}

@-webkit-keyframes slideIn {
  0% {
    -webkit-transform: transform;
    -webkit-opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    -webkit-opacity: 1;
  }

  0% {
    -webkit-transform: translateY(1rem);
    -webkit-opacity: 0;
  }
}

.slideIn {
  -webkit-animation-name: slideIn;
  animation-name: slideIn;
}

.ui-menu-item {
  background-color: #fff;
  border-bottom: 1px solid;
}

.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
  background: grey;
}

/*--------------*/
.text-input-xsm {
  width: 3.5rem;
}

.text-input-sm {
  width: 5.25rem;
}

.text-input-md {
  width: 7.5rem;
}

.text-input-lg {
  width: 10.5rem;
}

.text-input-xlg {
  width: 12.7rem;
}
.text-input-max{
  max-width: 400px;
}




.text-input-xxlg {
  width: 16.7rem;
}


.LabelHeading-new {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: bold;
  margin: -0.125rem 0.071rem 0rem -0.25rem;
  background-color: var(--heading-color);
  outline: 1px solid var(--main-color);
  color: var(--top-color);
}

.newbuttonbox {
  margin: 1px 1px 1px 1px;
}

.Firstpager-detailbox {
	display: flex;
	flex-direction: column;
	margin: 0rem 0.25rem -1rem 0px;
	padding: 1px 1px 15px 1px;
	background-color: var(--main-color);
  box-shadow:#19355b 0px 0px 0px 2px, #27518d 0px 4px 6px -1px, #19355b 0px 1px 0px inset;
}

/* .modal-backdrop.show {
	opacity: 1!important;
} */
.ui-widget-header {
	border: 1px solid #19355b;
	background: #19355b;
	color: #fff;
	font-weight: bold;
}
.ui-dialog .ui-dialog-titlebar {
	padding: 0.4em 1em;
	position: relative;
	margin: 0px 12px -4px 8px;
}
.ui-dialog .ui-dialog-titlebar-close {
	position: absolute;
	right: .3em;
	top: 50%;
	width: 20px;
	margin: -10px 0 0 0;
	padding: 1px;
	height: 20px;
  display: none;
}

.ui-widget-overlay {
	background: #000;
	opacity: 0.9;
	-ms-filter: Alpha(Opacity=0.9);
  
}
.ui-dialog .ui-dialog-content {
  
-webkit-overflow-scrolling: hidden;
overflow: hidden;
}