.subPage{
    width:99%;
    height:100%;	
	
}
.header-content{
     background: white;
    box-shadow: 0px 4px 2px #888;
    margin-top: -5px;
    height: 69px;
}
.fontFamily{
	font-family:'Open Sans', sans-serif;
}
 .subpage-heading {
    margin-left: 10%;
    margin-top: 18px;
    font-size: 30px;
    padding-top: 2px;
    font-size: 27px;
    color: #124aaa;
}
#via1Stop{
	 margin-left: 9%;
	 color:#004aad; 
}
#blueWheel{
	width: 8%; 
	margin-left: 45%; 
	margin-top: -9%; 
	white-space: nowrap;
}
#navigationBar{
border-radius: 30px;
 margin-top: 16px; 
 background-color: #004aad; 
 height: 45px;
  flex-direction: row;
   display: flex; 
   align-items: center;
    width: 100%;	
}
#rclLogo{
		height: 43px;
		 width: 100px;
		  margin-left:20px; 
		   margin-top: 20px;
		    position: absolute;
}
#emailIcon{
	padding-right:20px;
	cursor:pointer;
	width: 62px;
}
#printIcon{
	width: 56px; 
	padding-right:20px;
	cursor:pointer;
}
#backIcon{
	width: 56px; 
	padding-right:20px;
	cursor:pointer;
}
.header-icons{
position: absolute;
    top: 28px;
    display: flex;
    align-items: center;
    margin-top: -10px;
    height: 35px;
    margin-right: -45px;
    margin-left: 84%;
}
#emailIcon{
	padding-right:20px;
	cursor:pointer;
	width: 62px;
}
#printIcon{
	width: 56px; 
	padding-right:20px;
	cursor:pointer;
}
#backIcon{
	width: 56px; 
	padding-right:20px;
	cursor:pointer;
}
#headerImg{
	width: 65%;  
	padding: 5%;
	margin-left: -6%;
	}
.emailBtn{
 background-image: url(../img/email.png);
 background-repeat: no-repeat; 
 width: 37px;
 height: 34px; 
 border: none; 
}
.printerBtn{
    background-image: url(../img/print-solid.png);
    background-repeat: no-repeat; 
    width: 37px;
    height: 34px; 
    border: none;
}
  #polPod{
margin-left: 6%;
    font-size: 19px;
    margin-top: 6px;
 }
 #pol{
 color:#004aad;
 margin-left: 19px;
 }
 #pod{
 color:#004aad;
float:right;
 }
 #arrival{ margin-left: -2%;}
 #destination{ margin-left: 28%;}

.backBtn{
    background-image: url(../img/backArrow.png);
    background-repeat: no-repeat; 
    width: 37px;
    height: 34px;
    border: none; 
}
 .contact-text {
	display: inline-block;
	width: 100%;
	/* font-family: OpenSans-Bold; */
	font-size: 16px;
	padding: 5px 0;
	color: black;
}

.contact-row {
	padding: 10px 0px;
}
.vessel-print-rcl{
    text-align:center;
    margin:10px 0;
} 

.vessel-print-logo{
    display:inline-block;
    height:65px;
    width:160px;
    vertical-align:top;
    margin-right:20px;
    
} 
	.printButtonPage{
    background-color:#f1f1f1;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    height: 100%;
    width: 100%;
    padding: 0%;
    margin-right: 0%;
    margin-left: 0%;
 
}			 

.validator {
    text-align: center;
    color: red;
    font-size: 12px;
    line-height: 24px;
    font-family: OpenSans-Semibold;
}
.validator2 {
    text-align: center;
    color: red;
    font-size: 12px;
    line-height: 24px;
    font-family: OpenSans-Semibold;
}
/* loader*/

 .lds-roller {
  display: inline-block;
  position: relative;
   position: absolute;
  left: 48%;
  top: 52%;
  z-index: 2;
  width: 80px;
  height: 30px;
}
.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 40px 40px;
}
.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #004aad;
  margin: -4px 0 0 -4px;
}
.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
  top: 63px;
  left: 63px;
}
.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
  top: 68px;
  left: 56px;
}
.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
  top: 71px;
  left: 48px;
}
.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
  top: 72px;
  left: 40px;
}
.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
  top: 71px;
  left: 32px;
}
.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
  top: 68px;
  left: 24px;
}
.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
  top: 63px;
  left: 17px;
}
.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
  top: 56px;
  left: 12px;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* loader */
.vessel-mail{
    width:480px;
}

.vessel-mailwrapper{

}

.vessel-mailheader {
    background-color: #084b8c;
    color: white;
    font-family: SourceSansPro-Bold;
    font-size: 18px;
}

.vessel-mailheader-text{
    width:94%;
    margin:0 auto;
}

.vessel-mailbody {
    width: 94%;
    margin: 0 auto;
}

.vesselmail.contact-field{
    width:90%;
}

.vesselmail.vessel-button{
    width:130px;
}
.headerData{
	    margin-left: 2px;
	font-size: 20px;
	color: white; 
}
.headerDesti{
	width: 40%;
	float: right;
	 margin-left: 7%;
}
.portDischarge headerData{
	font-size: 17px;
				 
}
.Dates-container {
    margin: 6px 0px 0px 0px;
    border: 2px dashed #004aad;
    border-radius: 9px;
    margin-left:0px;
    padding: 40px;
    background-image: url(../img/bookMarkW.png);
    background-repeat: no-repeat;
    background-size: 27%;
    background-position: 98%;
    background-position-y: top;
/*     white-space: nowrap;
 */
 }

.Schedule_info{
    margin-top:1.2%;
    background-color: #d9d9d9;
    max-width: 199%;
    width: 100%;
    float: right;
    padding: 12px 36px 9px 36px;
    margin-right: 4px;
    max-height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;

}
.vesselBox{
    background-color: white;
    border-radius: 10px;
    width: 100%;
    padding: 1% 6% 1% 6%;
    margin: 1% 1% 1% 1%;
  }
/*    .arrow-container::before {
border-top: 3px dotted rgb(10, 53, 245);
}  */
.line {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 58px;
    border-left: 4px dotted #004aad;
  }
  .dashed_line {
    border-top: 2px dashed #ddd7d7;
    width: 46%;
    margin-left: 26%;
    margin-top: -2%;
    white-space: nowrap;
  } 
  .dashed_line3{
    border-top: 2px dashed #ddd7d7;
    width: 79%;
    margin-left: 10%;
    margin-top: -2%;
    white-space: nowrap;
    }
    
    .dashed_line2{
    border-top: 2px dashed #ddd7d7;
    width: 78%;
    margin-left: 11%;
    margin-top: 7%;
    white-space: nowrap;
  }
 .transhipConnecterLine{
    border-left: 4px dashed #ddd7d7;
    height: 25%;
    margin-left: 1%;
    margin-top: -17%;
    }
    
    
   .transshipmentPopUp {
    color: white;
    background-color: #004aad;
    border-radius: 20px;
  }
#monthBar{
	margin-top: 7px; 
	background-color: #d9d9d9; 
	height: 40px; 
	width: 101%;
	padding-top: 1px;
    border-radius: 4px;
}
#month{
	color:#004aad;
	margin-top: 10px !important;
}
.day-bar{
/*     background-color: #004aad;
 */    width: 0;
    text-align: justify;
    padding-right: 76px;
    margin-top: 62px;
    height: 20px;
    margin-left: -111px;
    color: white; 
    font-weight: bold; 
    margin-left: -77px; 
    border-radius: 4px;
}
.vesselName{
	color:black;
	margin-left:21px;
}
.voyNumber{
	color:black;
	margin-left:21px;
}
.custom-btn {
    width: 73px;
    height: 21px;
    color: #fff;
    padding: 5px 0px;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px -1px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  outline: none;
}

.btn-1 {
  background: rgb(6,14,131);
  background: linear-gradient(0deg, rgba(6,14,131,1) 0%, rgba(12,25,180,1) 100%);
  border: none;
}
.btn-1:hover {
   background: rgb(0,3,255);
background: linear-gradient(0deg, rgba(0,3,255,1) 0%, rgba(2,126,251,1) 100%);
}
#cDay{
	margin-left: 7px;
	margin-top: -1px;
	cursor: pointer;
	font-size: 70%;
}
#cDate_month{
	margin-top: -34px;
 	margin-left: -36px;  
	font-size: 11px; 
	color: #004aad;
}

#scheduleInfo{
	color: #004aad;
	font-size: 144%;
	margin-left: 10%;
}
#vesselName{
    margin-top: 5%;
	margin-left: -1%;
}
#vesselHeaderDate{
	display: flex; justify-content: center;
	color: black; 
	width: 54%;
	 border-radius: 7px;
	  padding-top: 1%; 
	  background: linear-gradient(90deg, rgba(196,191,191,1) 48%, rgba(255,255,255,1) 100%);
	  MARGIN-TOP: 1%;
	   margin-left: 29%;
}
#vesselData{
	color:#e3635d;
font-size: 15px;
}
#showMore{
	margin-left: 50%; 
	color:#004aad;
	cursor: pointer;
}
.wheelImg{
	width: 8%;
    margin-left: 45%;
    margin-top: -4%;
    white-space: nowrap;
}
#vesselDates{
 font-size: 17px;;
}

@media screen and (min-width:2052px) and (max-width:2732px) {
   .dashed_line{
    width: 46%;
    margin-left: 26%;
    margin-top: -4%;
    }
#showMore{
	float:right;
	margin-left: 57%;
	
 }
 .header-icons{
  margin-left: 83%
  }
}

 @media screen and (min-width:2733px) and (max-width:4102px) {
   .dashed_line{
    width: 26%;
    margin-left: 26%;
    margin-top: -2%;
    }
#showMore{
	float:right;
	margin-left: 27%;
 }
  .header-icons{
   margin-left: 83%;
  }
}

@media screen and (min-width: 1024px){
    .dashed_line{
    width: 79%;
    margin-left: 10%;
    }
#showMore{
	float:right;
	margin-left: 24%;
 }

					
   
  .day-bar{
/*     margin-left: -62px;
 */    margin-top: 65px;
    border-radius: 5px;
    margin-right: -11%;
  }
  .custom-btn{
  
  padding: 5px 0px;
  }
  .Dates-container{
  padding: 40px;
  }
  #cDay{
  margin-left: 7px;
  }
  #cDate_month{
    margin-top: -30px;
     margin-left: -30px; 
    font-size: 11px;
  }
   #scheduleInfo{
   font-size: 144%;
  }
  #polPod{
   margin-top: 10%;
   width: 100%;
   margin-left: -2%;
   }
  #vesselName{
      margin-left: -2%;
      }
   #vesselData{
     font-size: 15px;
   }

}
#blueWheel{
    width: 8%;
    margin-left: 45%;
    margin-top: -4%;
    margin-bottom: 7%;
}
#via1Stop{
	 margin-left: -9%;
	 color:#004aad; 
}
#vesselDate{
	 margin-top: 9px; 
}


@media (min-width: 1023px) and (max-width: 1229px){
	.headerData{
	        margin-left: -3px;
	        font-size: 15px;
	    }
	#vesselDates{
	    font-size: 11px;
    } 
 #scheduleInfo{
   margin-left: 13%;
  }  
  #vesselHeaderDate{
  margin-left: 21%;
  width: 61%;
  }
    .header-icons{
   margin-left: 80%;
  }
    .Dates-container{
  padding: 33px;
  }
 #cDay{
  margin-left: -25px;
  }
  #cDate_month{
    margin-top: -30px;
    margin-left: -30px;
    font-size: 9px;
  }
    .day-bar{
    margin-left: -86%;
    margin-top: 65%;
    border-radius: 5px;
   
  }
  .custom-btn{
  width: 50%;
  padding: 5% 41%;
  }
 #vesselData{
    font-size: 14px;
  }
  #showMore {
    margin-left: 36%;
  }
  #headerImg{
      margin-left: -71%;
 }
 }

 
 

 @media screen and (min-width: 781px) and (max-width: 1024px){



 #vesselName {
    font-size: 56%;
    }
    #vesselData {
  font-size: 8px;
    }
 #month {
    color: #004aad;
    margin-left: 226px;
  }
   .header-icons{
       margin-left: 79%;
  }
 .headerData{
     font-size: 13px;
 }
  #scheduleInfo{
font-size: 10px;
    margin-left: 26%;
  } 
  #polPod {
    margin-left: -17%;
    font-size: 20px;
    margin-top: -19px;
 }
 #pod{
 color:#004aad;
margin-left: 85%;
 }
 .dashed_line {
    width: 51%;
    margin-left: 21%;
 }
 #blueWheel{
     margin-left: 39%;
    margin-top: -9%;
 }
 #via1Stop{
     font-size: 8;
 }
 #showMore {
    margin-left: 31%;
    font-size: 9px;
}
#vesselHeaderDate {
width: 56%;
    font-size: 9px;
    margin-left: 21%;
}

#vesselDates{
 font-size: 8px;;
}
.headerDesti {
    margin-left: 8%;
    font-size: 11px;
}
#rclLogo{
height: 30px;
    width: 67px;
    margin-left: 19px;
    margin-top: 20px;
}
.subpage-heading{
    margin-left: 13%;
    margin-top: 27px;
    font-size: 18px;
    padding-top: 2px;
   
}

#emailIcon{
  width: 51px;
}
#printIcon{
	width: 49px;
}
#backIcon{
width: 46px;
 }
 .Dates-container {
    padding: 27px;
}

.custom-btn {
    padding: 4px 26px;
    height: 17px;
}
.day-bar {
    margin-left: -54px;
    margin-top: 44px;
    border-radius: 4px;
}
#cDate_month {
    margin-top: -21px;
    margin-left: -20px;
    font-size: 7px;
    }
}
@media screen and (min-width: 801px) and (max-width: 1024px){
.Dates-container {
    padding: 23px;
}
.custom-btn {
    padding: 6% 38%;
    height: 16px;
    font-size: 12px;
    margin-left: -79%;
}
.day-bar {
   
    margin-top: 62%;
    border-radius: 4px;}


 
#cDate_month {
    margin-top: -21px;
    margin-left: -20px;
    font-size: 7px;
}

#cDay {
    margin-left: -18px;
}
}



















  @media screen and (max-width: 780px){
  .headerData {
    font-size: 12px;
        margin-left: 0px;
   }
   #emailIcon {
    width: 50px;
    margin-left: -32%;
    }
    #printIcon {
    width: 45px;
    }
    #backIcon {
    width: 46px;
    }
    .headerData {
    margin-left: 2px;
    font-size: 11px;
    }
    .portDischarge headerData{
        font-size: 9px;
    }
    .subpage-heading {
    margin-left: 16%;
    margin-top: 25px;
    font-size: 30px;
    padding-top: 2px;
    font-size: 20px;
    }
    #scheduleInfo {
    font-size: 106%;
    margin-left: 7%;
    }
    #vesselHeaderDate {
    width: 95%;
    margin-left: 6%;
    }
    #pod {
    margin-left: 38px;
    }
    #vesselName {
    font-size: 60%;
    }
    #vesselData {
    font-size: 8px;
    }
    #vesselDates {
    font-size: 8px;
    }
    #showMore {
    margin-left: 24%;
    font-size: 9px;
    }
    #month {
    margin-left: 224px;
    }
     #arrival{ margin-left: -63%;}
     #destination{ margin: -47%;}
  }


.selectedRow{
	 background-color: #ddd;
}