#mymenu li a.tools{color:#3e4095;}

.section1 {
  background:url("images/7.jpg");
  /*background-size: 100% 675px;*/
  background-size: 100% auto;
}


.navigation{
  margin-top:15px;
}

.navigation li a:nth-child(1)::after{
  content: '/';
  margin-right: 7px;
  margin-left: 7px;
}

#ref{
  width:390px;
  margin-top: 50px;
  filter: drop-shadow(0 0 5px rgb(177, 177, 177));
  padding: 10px;
  border-radius: 5px 0px 0px 5px!important;
}

#track_button{
  filter: drop-shadow(0 0 5px rgb(177, 177, 177));
  padding: 10px;
border-radius: 0px 5px 5px 0px!important;
}



.section2_container{
  width:100%;
  display:grid;
  /*grid-template-columns: 65% 35%;*/
  /*grid-template-rows: auto auto;*/
  padding-right:40px;
  padding-left:40px;
}

/*.details{
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-template-rows:  auto auto;
  gap:13px;

  grid-column: 1/3;
  grid-row: 1/1;

  font-size: 13px;
  font-weight: bold;

  padding-top: 50px;
  padding-bottom: 50px;
  height: fit-content;
}

.ref_number{
  grid-column: 1/1;
  grid-row: 1/1;
}

#ref_number{
  grid-column: 2/2;
  grid-row: 1/1;
  margin-right: 50px;
}

.Destination{
  grid-column: 3/3;
  grid-row: 1/1;
}

#Destination{
  grid-column: 4/4;
  grid-row: 1/1;
}

.Delivery_date{
  grid-column: 1/1;
  grid-row: 2/2;
}

#Delivery_date{
  grid-column: 2/2;
  grid-row: 2/2;
  margin-right: 50px;
}

.Delivery_time{
  grid-column: 3/3;
  grid-row: 2/2;
}

#Delivery_time{
  grid-column: 4/4;
  grid-row: 2/2;
}

#ref_number,#origin,#Destination,#Delivery_date,#Delivery_time{
  font-weight: lighter;
}*/



/*THE MAP*/
.map{
  /*grid-column: 1/1;*/
  grid-row: 1/1;
  height:450px;
  background-color: white;
  /*border-radius: 20px 0 0 0;*/
  
  filter: drop-shadow(0 0 5px rgb(177, 177, 177));
  /*border: 1.5px solid gray;*/
}

#map * {
  -moz-transition: none;
  -webkit-transition: none;
  -o-transition: all 0s ease;
  transition: none;
}






/*ICON INFOS*/
.icon_info_container{
  /*grid-column: 1/3;*/
  grid-row: 2/2;
  border-radius: 0px 0px 20px 20px!important;
  background-color: transparent;/*rgba(237, 50, 56, 0.555);*/
  display: flex;
 padding-top:25px;
 width:100%;

}

.icon_info_container img{
  height: 35px;
}

.icon_info_container label{
  font-size: 12px;
  font-weight: bold;
  color: gray;
}

.icon1_container,
.icon2_container,
.icon3_container{
  display: flex;
  align-items: center;
  margin-right:50px;
}


/*STYLING THE TABLES*/

.sectionStyle table {
  /*border-collapse: collapse;*/
  width: 100%;
  background-color: white;
}


.sectionStyle td{
  padding: 12px;
  
  color:rgb(37, 37, 37);
  font-size: 15px;
}

.sectionStyle th{
  padding: 12px;
  font-size: 20px;
  text-align: left;
  
}





/*TRACKING HISTORY*/
:is(.section3, .section2, .section5) :is(.headingStyle){
 margin-bottom: 20px!important;
}

#history th{
  background-color: #8587e9;
  color: white;
}

:is(#history) :is(td, th)
{
  border: 1px solid #ddd;
}

:is(#history, #shipment_details_table) :is(td, th):nth-child(1) {padding-left:20px;}
:is(#history, #shipment_details_table) :is(td, th):nth-child(3) {padding-right:20px;}

:is(#history, #shipment_details_table) :is(tr):nth-child(even){background-color: #f2f2f2;}
:is(#history, #shipment_details_table) :is(tr):hover {background-color: #ddd;}

/*INFO*/
.info_container{
  /*border-radius: 20px;*/
}

.styles{border-radius: 0px 0px 20px 20px!important;}

.info_heading{
  margin-bottom: 5px;
  font-size: 30px;
  color:#3e4095;
}

.info_table{
  table-layout: fixed;
  width: 100%;
}

:is(.info_table) :is(td, th){
  /*padding-left: 40px;*/
  padding-right: px;
  width:100%;

max-width: max-content;}


/*details*/
#shipment_details_table{
  width: 100%;
}
:is(#shipment_details_table) :is(td, th){
  width:50%;
  color:rgb(82, 82, 82);
}

:is(#shipment_details_table) :is(td, th):nth-child(1) {
  font-weight: bold; 
  color:#3e4095;
}


.section2, .section3, .section4, .section5{
  display: none;
}

.section4{
 margin-bottom: 1px!important;
}


@media only screen and (max-width: 800px) {
  .section1 {
    background-size: 1200px auto;
  }

 

  #ref{
    width:100%;
    border-radius: 5px!important;
    font-size: 12px;
  }

  #track_button{
    margin-top:10px;
    border-radius: 5px!important;}

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

    #history th, .info_table th{
      font-size: 13px;
    }
    .info_heading{
      
    }
    /*THE MAP*/
    .section2.sectionStyle{
     24 padding-left:0px;/)
      padding-right: 0px;
    }
    .section2_container{{}
      padding-right:5%;
      padding-left:5%;
    }{}
    .map{
    /*grid-column: 1/1;*/
    height:450px;
    width:100vw;
    /*border-radius: 20px 0 0 0;*/
    border-radius: 0px 0px 0 0;
    filter: drop-shadow(0 0 5px rgb(177, 177, 177));
    /*border: 1.5px solid gray;*/}
  .icon_info_container label{
    font-size: 10px;}

    
   
  }




}

table{border-radius: 20px 20px 0 0;}
#map-view-heading-style{margin-bottom: 0px!important;}