/** Tracking div css **/

.tracking {
  width : 100%;
  background-color: #F44336;
  display:flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color:white;
  font-size:16px;
  margin-top: -20px;

}

.tracking h1 {
  font-size: 30px;
  color : gold;
}

.track-wrapper {
  max-width:1280px;
  display:flex;
  flex-direction: row;
/**  padding:15px;
  margin: 25px 0 25px 0;  **/
  justify-content: center;
  align-items:center;
  flex-wrap: wrap;
}

.track-img {
  
  width:70px;
}

.track-div1 {
/**  width:40%;  **/
  display:flex;
  flex-direction: row;
  align-items: center;
  
}

.track-div1-inner1 {
  margin-left: 25px;
  width : 500px;
  padding: 17px;
}

.track-form {
  
  display:flex;
  justify-content :center;
  align-items:center;
  padding: 15px;
  margin-top: -20px;
}

.track-form ::placeholder {
  color:#F44336;
}

.input_track {
  background: #f44336;
    border: 2px solid white;
    line-height: 40px;
    margin-left: -1px;
    width : 200px;
    padding-left:10px;
    border-right: 0 none;
}

.input_search {
  display:flex;

  margin-top: 26px;

}

.input_search input[type=submit] {
  background-color: rgba(255, 255, 255, 0);
  border: 2px solid white;
  width : 45px;
  line-height: 40px;
  background: transparent url(./images/carbon_search.png) no-repeat scroll;
  background-position: center;
  margin-left:-3px;
  
}



@media screen and (max-width: 768px){

  .track-form {
    align-items: unset;
  }

  .input_search input[type=submit] {
    margin-top:1px;
  }

  .track-div1-inner1 {
    width:100%;
  }

  .track-form ::placeholder {
    color:#fff;
  }

  .tracking h1 {
    font-size:26px !important;
    margin-left : 10px;
  }

  .tracking p {
    font-size: 15px ;
  }

  .track-div1 {
    width:100%;
  }


  .track-wrapper {
    flex-direction: column;
  }

  .track-img {
    width:34px;
  }

  .input_track {
    width: 100%;
  }

  .servImg {
    width : 70%;
    margin-right: 0px;
  }



}

.servImg {
  width : 70%;
  margin-right: 30px;

}



@media screen and (max-width: 768px){
  
  .about-box-wrap {
    flex-direction : column;
  }

  .about-inner {
    width: 100%;
    padding:5px;

  }

  .about-us a {
    font-size: 14px;
  
  }

  .noshow {
    display: none;
    }

    .input_search {
      margin-top: 23px;
  }

}

/*** Tracking CSS **/

#trackinglive {
    display: flex;
    flex-direction:row;
    justify-content: center;

}

.warna {
    color : #a11400;
/**     font-family: 'Libre Baskerville', serif;  **/
}


.order-txt {
    font-size : 72px;
    font-weight:600;
    margin-bottom:100px;
}

.track-wrapper1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    margin-top: 150px;
   
    align-items: center;
}

.track-diag {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width:100%;
    height: 100%;
}

.rnd {
    height:40px;
    width : 40px;
    border-radius: 50%;
    border: 2px solid red;
    position: relative;
    font-weight: bold;;
}


@media screen and (max-width: 768px){


  .last {
    margin-top:-100px;
  }

  .form-row2 {
    flex-direction: column;
  }

  .rate-wrapper2 {
    width: 100%;
    padding-left:35px;
    padding-right: 0px;
  }

  .rate-wrapper {
    padding-left:35px;
    padding-right: 0px;
  }

  .form-row-last {
    display: block;
    justify-content: flex-start;
    margin-left: 0px;
  }

  .rate-3 { 
    margin: 0px;
  }

  .form-row {
    flex-direction: column;

  }
  

.section-wrap-left {
  flex-direction: column;
  align-items: center;

}

.rate-1 {
  flex-direction:column;
  align-items: center
  
}

.rate-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content:center;
}





.first-select {
  margin-right:0;
  width:80%;
  height:45px;
}

.option-image {
  margin-top: 0px;
  width:80%;
  margin-right: 8%;
}

.book-but {
  display: block;
}

}


/*** divider ***/

.div-wrapper-right {
  width:100%;
  display:flex;
  flex-direction:row;
  justify-content:flex-end;

}

.div-wrapper-left {
  width:100%;
  display:flex;
  flex-direction:row;
  justify-content:flex-start;

}

.tri1 {
  width: 0;
height: 0;
border: 0 solid transparent;
border-left-width: 50vw;
border-right-width: 0px;
border-top: 3vh solid #DAA520;

}

.tri2 {
  width: 0;
height: 0;
border: 0 solid transparent;
border-right-width: 50vw;
border-left-width: 0px;
border-bottom: 3vh solid #DAA520;

}


/*** ordering process section **/

.desktop-view {
  display:flex;
  flex-direction: column;
}


.mobile-view {
  display:none;
}


/** rates **/

.rates  {
  width :100%;
  background-color: #FFEBEE;
  display:flex;
  justify-content: center;
  flex-direction: row;
  
}

.rate-1 {
  border: 0px solid rgb(177, 176, 176);
  width: 70%;
  flex-direction: row;
  width: 100%;
  justify-content: flex-start;
  
}




.first-select {
  padding: 7px;
  width: 220px;
  margin-bottom: 15px;
  margin-right:15px;
  border: 2px solid red;

  background: #FFEBEE;
}

.first-select select option{
  height:50px;
}


.option-image {
  margin-top:0px;
}

.book-but {
  display: none;
}

.image-box {
/**  border: 1px solid blue;  **/
    flex-direction: column;
    align-items: center;
    display: flex;
}

/** booking form section **/
#booking-form {
  display: flex;
  width:100%;
  flex-direction: row;
  justify-content: center;
  background-color: #FFEBEE;
  display: none;
  scroll-margin-top: 100px;
}

.rate-3 {
 
  /* width: 70%; */
  justify-content: center;
/*  display: flex; */
  flex-direction: row;
  /* width: 100%; */
  /** border: 1px solid rgb(2, 2, 2);  **/
  width : 100%;
 /** margin : 50px 0;  **/
}

.rate-wrapper {
  display: flex;
  flex-direction: column;
  background-color: #E0E0E0;
  width: 1280px;
  padding: 25px;
  border-radius : 30px;
  margin : 50px 0;
}

.form-row {
  display: flex;
  justify-content: center;
}

.form-row-last {
  display: flex;
  justify-content: flex-start;
  margin-left: 35px;
  
}

.form-row-legal {
  
  display: flex;
  justify-content: flex-start;
  margin-left: 35px;
  width : 250px;
  margin-top : 30px;
  align-items: flex-end;
}

.up {

  align-items:flex-start !important;
}

/** section layout css **/
.section-wrap-mid {

    width:1076px;
    display:flex;
    flex-direction: column;
    padding:15px;
    justify-content: center;
  /**  margin: 70px 0;  **/
    margin-top: 50px;
}


/** bookmark **/
@media screen and ( max-width: 1024px) {

  .section-wrap-mid {
    width : 100%;
  }

  .section-wrap-left {
    width :100%;
  }

  .wrapper {
    width :100% !important;
  }

  nav {
    width : 100% !important;
  }

  .order-proc {
    width:100% !important;
  }
  
}

.section-wrap-left {
  width:1280px;
  display:flex;
  flex-direction: row;
  padding:15px;
  justify-content:flex-start;
  margin-bottom: 5px;

}

.section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 30px 0;
	padding-right:15px;
  
}

.section-header-left {
  display: flex;
  flex-direction: column;
  padding: 10px;
}


@media screen and (width: 1080px){
  
  .mainbod-wrapper {
    max-width:100%;
  }

  .mainbod-wrap2 {
    width: 900px;
    border: 0px solid yellow;
    display: flex;
    background-image: url(/assets/indomap.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 25px 35px;
    }
  
    .mainbod h1 {
      font-size: 31px;
    }
  
    .img_logo {
    margin-top:5px;
    margin-left : 50px;
    width: 130px;
    }
    .mainbod-wrap1 {
    padding-left : 20px;
    }
  
    .track-div1 {
  
      padding-left: 20px;
    }
  
    .group-form input {
      width: unset !important;
    }
  
    .rate-wrapper {
  
      width: 95% !important;
    }
  
    .form-row-last {
      margin-left: 0px !important;
    }
  
    .select-text {
      width : 290px !important;
    }
  
    .select::after {
      right : 65px !important;
    }
  
    .select {
      width: 290px;
    }
  
  
    .select {
      width:290px !important;
    }
  
    .select2 {
      width:290px !important;
    }
  
    .goLeft {
      margin-left:-25px;
    }

}

@media screen and (width: 1024px){
  
  .mainbod-wrapper {
  width:95%;
  }
  .marker-drop {
    visibility: hidden;
  }
}


.mainbod-wrap1 {
width:40%;
height : 400px;
border: 0px solid yellow;;
padding : 10px;
white-space: nowrap;
margin-top:50px;
color:white;
position: relative;

}

.mainbod-wrap2 {
    width:60%;
    border: 0px solid yellow;
    display:flex;
    background-image: url(/assets/indomap.png);
    background-repeat: no-repeat;
    background-size: contain;
}


/** Mainbod button **/

.button_1, .button_2 {
    width: 220px;
    height: 46px;
    background: #DAA520;
    border: 2px solid #FFD700;
    box-sizing: border-box;
    box-shadow: 2px 2px 1px 1px rgba(28, 28, 28, 0.25);
    border-radius: 25px;
    color : white;
    font-family: open sans;
    font-size:16px;

}

.button_4 {
  width: 220px;
  height: 46px;
  background: #c9c9c9;
  border: 0px solid #FFD700;
  box-sizing: border-box;
  box-shadow: 2px 2px 1px 1px rgba(28, 28, 28, 0.25);
  border-radius: 25px;
  color : #8c8a8a;
  font-family: open sans;
  font-size:16px;
}

.button_3 {
    width: 220px;
    
    background: white;
    border: 3px solid #FFD700;
    box-sizing: border-box;
    border-radius: 25px;
    color : #676768;
    font-family: 'open sans', serif;
    font-size:15px;
    z-index:20;
    font-size:17px;
   
}

.hheader {
  font-weight:400; 
  color: #fff; 
  font-size: 21px;
}


/* form starting stylings ------------------------------- */
.group 			  { 
  position:relative; 
  margin-bottom:30px; 
  margin-top:25px;
}

.group-form 			  { 
  position:relative; 
  margin-bottom:30px; 
  margin-top:25px;
  margin-right : 40px
}



.group input 				{
  font-size:14px;
  padding:10px 10px 10px 5px;
  display:block;
  width:300px;
  border:none;
  border-bottom:1px solid #737373;
  background-color: #292929;
}

.group-form input 				{
  font-size:14px;
  padding:10px 10px 10px 5px;
  display:block;
  width:350px;
  border:none;
  border-bottom:1px solid #737373;
  background-color: #E0E0E0;
  color:#0D47A1;
}

.group input:focus 		{ outline:none; }

.group-form input:focus 		{ outline:none; }



/* LABEL ======================================= */
.group label 				 {
  color:#fff; 
  font-size:14px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

/* active state */
.group input:focus ~ label, input:valid ~ label, textarea:focus ~ label, textarea:valid ~ label	{
  top:-20px;
  font-size:12px;
  color:#fff;
}

.group-form-3 input:focus ~ label, input:valid ~ label, textarea:focus ~ label, textarea:valid ~ label	{
  top:-20px;
  font-size:12px;
  color:#000;
}



/* BOTTOM BARS ================================= */
.bar 	{ position:relative; display:block; width:100%; }
.bar:before, .bar:after 	{
  content:'';
  height:2px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:#5264AE; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%; 
}

/* active state */
.group input:focus ~ .bar:before, input:focus ~ .bar:after {
  width:50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
  position:absolute;
  height:60%; 
  width:100px; 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
.group input:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}


.group-form label  {
  color:black; 
  font-size:14px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
  font-family: 'Open Sans', sans-serif;
}

.question-wrap {
  margin-left: 35px;
  margin-bottom : 30px;
}

/* active state */
.group-form input:focus ~ label, input:valid ~ label 		{
  top:-20px;
  font-size:12px;
  color:black;
}

/* BOTTOM BARS ================================= */
.bar-form 	{ position:relative; display:block; width:100%; }
.bar-form:before, .bar:after 	{
  content:'';
  height:2px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:#5264AE; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.bar-form:before {
  left:50%;
}
.bar-form:after {
  right:50%; 
}

/* active state */
.group-form input:focus ~ .bar:before, input:focus ~ .bar:after {
  width:50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
  position:absolute;
  height:60%; 
  width:100px; 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
.group-form input:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}




/** button **/

.contact_butt {
width: 133px;
height: 34px;


background: #363636;
border: 1px solid #FFFFFF;
box-sizing: border-box;
border-radius: 25px;
} 


/**  end of contact us font css **/


@media screen and (max-width:767px) {

  .question-wrap {
    margin-left: 0px;
  }

  .group-form {
    margin-right: 0px;

  }

  #footer h3 {
    font-size : 18px;
  }

  .foot-first {
    flex-direction: column;
    flex-wrap: nowrap;
  }
  
  .foot-inner1 {
    width : 100%;
    justify-content: center;
    margin-bottom: 50px;
  }
  
  .foot-inner2 {
    width : 100%;
   
    
  }

  .foot-img {
    width:20px;
    height:20px;
  }

  /**  Cookkiieeee css  **/
  .cc-window.cc-banner {
    padding: 1.5em 1.8em
  }
  .cc-message {
    font-size: 12px;
    line-height: 1.4
  }
  .cc-compliance {
    padding-left: 4em
  }
  .cc-banner .cc-btn:last-child {
    /* min-width: 140px; */
    width: 100px;
  }
    .cc-compliance {
      padding-left: 0em;
  }

  .text-gradient2 {
    font-size: 28px !important;
  }

}

/** start **/

/* select starting stylings ------------------------------*/
.select {
  font-family:
    'Roboto','Helvetica','Arial',sans-serif;
	position: relative;
	width: 350px;
}

.select-text {
	position: relative;
	font-family: inherit;
	background-color: transparent;
	width: 350px;
	padding: 10px 10px 10px 0;
	font-size: 15px;  
	border-radius: 0;
	border: none;
	border-bottom: 1px solid rgba(0,0,0, 0.12);
}

/* Remove focus */
.select-text:focus {
	outline: none;
	border-bottom: 1px solid rgba(0,0,0, 0);
}

	/* Use custom arrow */
.select .select-text {
	appearance: none;
	-webkit-appearance:none
}

.select:after {
	position: absolute;
	top: 18px;
	right: 10px;
	/* Styling the down arrow */
	width: 0;
	height: 0;
	padding: 0;
	content: '';
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid rgba(0, 0, 0, 0.12);
	pointer-events: none;
}


/* LABEL ======================================= */
.select-label {
	color: rgba(0,0,0, 0.26);
	font-size: 18px;
	font-weight: normal;
	position: absolute;
	pointer-events: none;
	left: 0;
	top: 10px;
	transition: 0.2s ease all;
}

/* active state */
.select-text:focus ~ .select-label, .select-text:valid ~ .select-label {
	color: #222222;
	top: -20px;
	transition: 0.2s ease all;
	font-size: 11px;
}

.select-text:valid {
    color :#0D47A1;
}

/* BOTTOM BARS ================================= */
.select-bar {
	position: relative;
	display: block;
	width: 350px;
}

.select-bar:before, .select-bar:after {
	content: '';
	height: 2px;
	width: 0;
	bottom: 1px;
	position: absolute;
	background: #2F80ED;
	transition: 0.2s ease all;
}

.select-bar:before {
	left: 50%;
}

.select-bar:after {
	right: 50%;
}

/* active state */
.select-text:focus ~ .select-bar:before, .select-text:focus ~ .select-bar:after {
	width: 50%;
}

/* HIGHLIGHTER ================================== */
.select-highlight {
	position: absolute;
	height: 60%;
	width: 100px;
	top: 25%;
	left: 0;
	pointer-events: none;
	opacity: 0.5;
}



/** multi select **/
.select2-selection--multiple:before {
    content: "";
    position: absolute;
    right: 7px;
    top: 42%;
    border-top: 5px solid #888;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

.select2-container--default .select2-selection--multiple {
    background-color: #ffffff00 !important;
    border-top : 0px solid #aaa !important;
    border-left : 0px solid #aaa !important;
    border-right : 0px solid #aaa !important;
    border-bottom : 1px solid #aaa;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    border-radius: 0px !important;
    font-size:13px;
}



.top-marg {
    margin-top :12px;
    width : 380px;
}

.credit{background:#fff;position:relative;display:inline-block;padding:10px 20px;border:1px solid #ddd;border-radius:20px}

/* CSS Multiple Whatsapp Chat */
#whatsapp-chat{position:fixed;background:#fff;width:350px;border-radius:10px;box-shadow:0 1px 15px rgba(32,33,36,.28);bottom:90px;right:30px;overflow:hidden;z-index:99;animation-name:showchat;animation-duration:1s;transform:scale(1)}
a.blantershow-chat{background:linear-gradient(to right top,#6f96f3,#164ed2);color:#fff;position:fixed;z-index:98;bottom:25px;right:30px;font-size:15px;padding:10px 20px;border-radius:30px;box-shadow:0 1px 15px rgba(32,33,36,.28)}
a.blantershow-chat i{transform:scale(1.2);margin:0 10px 0 0}
.header-chat{background:linear-gradient(to right top,#6f96f3,#164ed2);color:#fff;padding:20px}
.header-chat h3{margin:0 0 10px}
.header-chat p{font-size:14px;line-height:1.7;margin:0}
.info-avatar{position:relative}
.info-avatar img{border-radius:100%;width:50px;float:left;margin:0 10px 0 0}
.info-avatar:before{z-index:1;font-family:"Font Awesome 5 Brands";color:#fff;padding:4px 5px;border-radius:100%;position:absolute;top:30px;left:30px}
a.informasi{padding:10px 0px 0px 20px;display:block;overflow:hidden;animation-name:showhide;animation-duration:2.5s}
a.informasi:hover{background:#f1f1f1}
.info-chat span{display:block}
#get-label,span.chat-label{font-size:12px;color:#888}
#get-nama,span.chat-nama{margin:5px 0 0;font-size:15px;font-weight:700;color:#222}
#get-label,#get-nama{color:#fff}
span.my-number{display:none}
.blanter-msg{color:#444;padding:20px;font-size:12.5px;text-align:center;border-top:1px solid #ddd}
textarea#chat-input{border:none;font-family:'Arial',sans-serif;width:100%;height:20px;outline:none;resize:none}
a#send-it{color:#555;width:40px;margin:-5px 0 0 5px;font-weight:700;padding:8px;background:#eee;border-radius:10px}
.first-msg{background:#f5f5f5;padding:30px;text-align:center}
.first-msg span{background:#e2e2e2;color:#333;font-size:14.2px;line-height:1.7;border-radius:10px;padding:15px 20px;display:inline-block}
.start-chat .blanter-msg{display:flex}
#get-number{display:none}
a.close-chat{position:absolute;top:5px;right:15px;color:#fff;font-size:30px}
@keyframes showhide{from{transform:scale(.5);opacity:0}}@keyframes showchat{from{transform:scale(0);opacity:0}}

@media screen and (max-width:480px){
	#whatsapp-chat{width:auto;left:5%;right:5%;font-size:80%}
}
.hide{display:none;animation-name:showhide;animation-duration:1.5s;transform:scale(1);opacity:1}
.show{display:block;animation-name:showhide;animation-duration:1.5s;transform:scale(1);opacity:1}

.rowA {
    width: 20%;
}
.rowB {
    width: 20%;
}
.rowC {
    width: 20%;
    margin-top: -35px;
}
.rowD {
    width: 20%;
    margin-top: -16px;
}
.rowE {
    width: 20%;
}
.rowF {display:none;}
.rowG {display:none;}
.adjheight {
    display:none;
}
@media screen and (min-width: 812px) and (max-width:1080px) {
    .rowA, .rowB, .rowC, .rowD, .rowE { margin-top: 28px; margin-left:23px;}
    .rowC {margin-top:-10px}
    .rowB {margin-top:5px}
    .rowD {margin-top: -1px}
    .rowE {margin-top: -5px;}
    }

@media screen and (min-width: 769px)  and (max-width:811px) {
    .rowA, .rowB, .rowC, .rowD, .rowE { margin-top: -15px; margin-left:-15px;}
    .rowC {margin-top:-168px; margin-left:-50px;}
    .rowB {visibility:hidden}
    .rowE {margin-top:64px}
    .rowD {visibility: hidden;}


    .hideTall {
        display : none;
    }

    }

@media screen and (min-width: 429px)  and (max-width:768px) {
    .rowA, .rowB, .rowC, .rowD, .rowE { margin-top: 35px;}
}

@media screen and (min-width: 361px) and  (max-width:428px) {
    .rowA, .rowB, .rowC, .rowD, .rowE { margin-top: 39px; margin-left:-13px; visibility:hidden;}
    
    .rowF {
    position:absolute;
    margin-top:100px;

    width : 360px;
    height : 220px;
    display:block;
    }
	
}

@media screen and (min-width: 0px) and  (max-width:360px) {

.rowA, .rowB, .rowC, .rowD, .rowE { margin-top: 39px; margin-left:-13px; visibility:hidden;}

.rowF {
position:absolute;
margin-top:100px;

width : 360px;
height : 220px;
display:block;
}

.rowG {
position:absolute;
margin-top:200px;

width : 360px;
height : 50px;
display:block;
}

.adjHeight {
    margin-top:-59px;
}

.hideSmall {
    display: none;
}

.modal-body p, li{
    font-size: 11px;
    line-height: 1.5;
}