body {
    background-color: #fff;
    font-family: 'Manrope', sans-serif;
    overflow: hidden;
  }
         /* Set the size of the div element that contains the map */
  #map {
    /* The height is 400 pixels */
    /* height: 400px; */
    width: 100%;
    background-color: #ccc;
    position: absolute;
     /* The width is the width of the web page */
   }
   .user-details .container {
    max-width: 30% !important;
  }
  .user-details-text{
    padding: 25px;font-size: 18px
  }
  .responsive-user-detail{
  display:none
    }
  .eta-info{
    border-radius: 5px;
    /* border-bottom: 1.4px solid #ccc; */
    padding: 2px;margin-top: 15px;padding-bottom: 18px;
  }
     /*.customMarker {*/
     /*position:absolute;*/
     /*cursor:pointer;*/
     /*background-image: url('https://sensovium.net/sensovium/uploads/driver_marker.png');*/
     /*background-size: 100px 150px;*/
     /*width:100px;*/
     /*height:150px;*/
     /* -width/2 */
     /*margin-left:-50px;*/
     /* -height + arrow */
     /*margin-top:-110px;*/
     /*border-radius:10px;*/
     /*padding:0px;*/
  /*}*/
   /*.customMarker_2 {*/
      /*position:absolute;*/
      /*cursor:pointer;*/
      /*background-image: url('https://sensovium.net/sensovium/uploads/marker1.png');*/
      /*background-size: 66px 86px;*/
      /*width:66px;*/
      /*height:86px;*/
      /* -width/2 */
      /*margin-left:-50px;*/
      /* -height + arrow */
      /*margin-top:-110px;*/
      /*border-radius:10px;*/
      /*padding:0px;*/
  /*}*/


  /*.customMarker:after {
      content:"";
      position: absolute;
      bottom: -10px;
      left: 40px;
      border-width: 10px 10px 0;
      border-style: solid;
      border-color: #424242 transparent;
      display: block;
      width: 0;
  }*/
  /*.customMarker img {
      width:50px;
      height:50px;
      margin:41px 26px;
      border-radius:50%;
  }
  .customMarker_2 img {
      width:50px;
      height:50px;
      margin:6px 8px;
      border-radius:50%;
  }*/

  /* Remove the navbar's default margin-bottom and rounded borders */
  .header{
    margin-bottom: 0;
    border-radius: 0;
    height: 100px;
    background-color: #fff;
    background-position: 100% 100%;
    background-repeat: no-repeat;
  }
  .user-details{
    max-height: 100px;
    height: 100px;
    background-color: #31C2FF
  }
  .eta-details
  {
    max-height: 300px;
    height: 300px;
    background-color: #F4F4F4;
    padding: 20px
  }
  /* Add a gray background color and some padding to the footer */
  footer {
    background-color: #f2f2f2;
    padding: 25px;
    width: 100%;
    /*bottom: 0;*/
    height: 70px;
    /*position: absolute;*/

  }
  .card {
    /*width: 250px;*/
    background-color: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
    height: 230px
  }
  .demo{
      background: #deeaeb;
  }

  .progress{
      height: 10px;
      margin: 0;
      overflow: visible;
      border-radius: 50px;
      background: #EECC17;
      box-shadow: inset 0 1px  10px rgba(0,0,0,0.1);
  }
  .progress .progress-bar{
      border-radius: 50px;
      position: relative;

  }
  .progress .progress-bar:after{
      content: " \25BA";
  /*    font-family: "Font Awesome 5 Free";*/
      font-weight: 900;
      font-size: 30px;
      color: #000;
      position: absolute;
      top: -6px;
      right: -24px;

  }

  .progress-bar-info{
  background-color: #4EAD3E
  }
  .logo {
   /* padding: 15px */
  }
  .user-details{
    padding: 15px;
  }
  .profile{
    height: 60px;
    width: 60px;
    border:2px solid #fff;
    border-radius: 50%;
    background-size: cover;

  }
  .marker-pin {

    background-image: url("https://weblink-bucket.s3-us-west-2.amazonaws.com/public/images/current.png");
    background-size: 50px 50px;
    width: 50px;
    height: 50px;
    /* border-radius: 50% 50% 50% 0; */
    position: absolute;
    /* transform: rotate(-45deg); */
    /* left: 50%; */
    top: -36%;
    margin: -50px 0 0 -18px;
  }
  .marker-pin-current {

    background-image: url("https://weblink-bucket.s3.us-west-2.amazonaws.com/public/images/car_pin_icon.png");
    background-size: 15px 22px;
    width: 15px;
    height: 22px;
    /*border-radius: 50% 50% 50% 0;*/

    position: absolute;
    /*transform: rotate(-45deg);*/
    /* left: 50%; */
    /* top: -36%; */
    margin: -17px 0 0 -8px;
  }
  .marker-pin-sos{
    background-image: url("https://weblink-bucket.s3-us-west-2.amazonaws.com/public/images/sos.png");
    background-size: 50px 53px;
    width: 50px;
    height: 53px;
    /* border-radius: 50% 50% 50% 0; */
    position: absolute;
    /* transform: rotate(-45deg); */
    /* left: 50%; */
    top: -36%;
    margin: -50px 0 0 -18px;
  }

  .marker-pin-sos-current{
    background-image: url("https://weblink-bucket.s3-us-west-2.amazonaws.com/public/images/sos-current-icon.png");
    background-size: 20px 20px;
    width: 20px;
    height: 20px;
    /*border-radius: 50% 50% 50% 0;*/

    position: absolute;
    /*transform: rotate(-45deg);*/
    /* left: 50%; */
    /* top: -36%; */
    margin: -10px 0 0 -10px;

  }
  .link-expire{
    margin-top: 50%;
}
  @-webkit-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
  @-moz-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
  @-ms-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
  @keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
  .marker-pin-sos-sub-location{
      background: #f93939;
      border-radius: 50%;
      width: 5px;
      height: 5px;
      position: absolute;
      /* margin: -7px 0 0 -8px; */
  }

  /*width: 60px;
    height: 60px;
    border-radius: 50% 50% 50% 0;
    background: #045F8C;
    position: absolute;
    transform: rotate(-45deg);*/
    /*left: 50%;*/
    /*top: -36%;
    margin: -15px 0 0 -15px;*/
  .marker_content2::after {
      content: '';
      width: 38px;
      height: 39px;
      margin: 6px 0px 0 6px;
      /*background: #fff;*/
      background-image: url("https://weblink-bucket.s3-us-west-2.amazonaws.com/public/images/dest.png");
      background-size: cover;
      position: absolute;
      /*transform: rotate(45deg);*/
      border-radius: 50%;
  }
  .marker_content3::after {
    content: '';
    width: 27px;
    height: 27px;
    margin: 5px 0px 0 5px;
    /*background: #fff;*/
    /* background-image: url("https://weblink-bucket.s3-us-west-2.amazonaws.com/public/images/sos_start.png");  */
    background-size: cover;
    position: absolute;
    /*transform: rotate(45deg);*/
    border-radius: 50%;
  }
  .mapboxgl-popup-content {

    color: red;
    font-size: 14px;
  }
  .custom-div-icon-v2 i {
     position: absolute;
     width: 22px;
     font-size: 22px;
     left: 0;
     right: 0;
     margin: 10px auto;
     text-align: center;
  }

  .custom-div-icon-v2 i.awesome {
     margin: 12px auto;
     font-size: 17px;
  }
  .custom-div-icon i {
     position: absolute;
     width: 22px;
     font-size: 22px;
     left: 0;
     right: 0;
     margin: 10px auto;
     text-align: center;
  }

  .custom-div-icon i.awesome {
     margin: 12px auto;
     font-size: 17px;
  }
  .custom-div-icon-sos i {
    position: absolute;
    width: 22px;
    font-size: 22px;
    left: 0;
    right: 0;
    margin: 10px auto;
    text-align: center;
  }

  .custom-div-icon-sos i.awesome {
    margin: 12px auto;
    font-size: 17px;
  }
  .traffic,.current-location
    {
      position: absolute;
      z-index: 111;
      padding: 45px;
      bottom: 35px;
      width: 12%;
      right: -30px;
      /* display: none; */
  }

  .near_by, .near_by_set {
    position: absolute;
    z-index: 111;
    padding: 45px;
    bottom: 0;
    right: 75px;
  }
  .traffic img,.current-location img,.near_by img,.near_by_set img{
    height: 55px;
    width: 55px;

  }
  #eta-text, #place-text, #miles-text{
    font-size: 20px;
  }
  #school-icon{
    height: 20px;
    margin-top: -5px;
  }
  #source-icon, #destination-icon{
    height: 30px
  }
  .progress-bar-div{
    padding: 10px
  }
  .eta-text-div{
    margin-bottom: 20px;
  }
  .duration-distance-div{
    margin-top:20px;
  }
  .swal2-confirm {
    background-color: rgb(28, 192, 249) !important;
    border-left-color: rgb(28, 192, 249) !important;
    border-right-color: rgb(28, 192, 249) !important;
  }
  .eta-info-font{
    font-size: 16px;color:#A4B4D6;
  }
  /* #map{
    width: 72%;
    left: 28%;
  } */

  .slider_up {
    position: absolute;
    width: 28%;
    height: 100%;
    top: 20%;
    left: 0;
    overflow: hidden;
    background-color: #F3F6FC;
    transition: all 1s;
    z-index: 111;
    border-radius: 20px 20px 0px 0px;
  }

  .slider_up.close_div {
    top: 100%;
    height: 0;
  }
  body {
    background-color: #fff;
  }

  hr {
    border: 0;
    clear: both;
    display: block;
    width: 96%;
    background-color: #ccc;
    height: 1px;
  }


  .leaflet-routing-container {
    display: none !important
  }

  path.leaflet-interactive.animate {
    stroke-dasharray: 1920;
    stroke-dashoffset: 1920;
    animation: dash 3s linear 1s forwards;
  }


  @keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
  }


  .stack-top {
    z-index: 9;
    width: 28%;
    height: 100%;
    opacity: 0.87777;
    background-color: #fff;
    position: absolute;
  }

  .stop-trip-div {
    width: 100%;
    height: 100%;
    position: absolute;
  }

  .eta-details,
  .eta-sub-container {
    position: absolute;
    bottom: 0;
    background-color: #fff;
    width: 100%;
    border-radius: 20px 20px 0px 0px;
    z-index: 11;
  }

  .stack-top .eta-info-font {
    color: #2E3040 !important;
  }
  /* @media screen and ( min-height: 900px ) { */


  /* } */

  .slider_up_details {
    position: absolute;
    width: 100%;
    /* top: 90%; */
    /* height: 88%; */
    left: 0;
    overflow: hidden;
    background-color: #ffffff;
    transition: all 1s;
    z-index: 111;
    border-radius: 20px 20px 0px 0px;
  }
  .slider_up_details.close_details_div {
    height: 285px;
    /* top: 65%; */
  }
  @media (min-width: 768px){
.link-expire{
        margin-top: 7%;
}
.slider_up_details{
        display: none; /* top: 65%; */
       }
  .trip-container {
      width: 100%;
  }
  .eta-details{
    max-height: 285px;
    height: 285px;

  }
  .card {
   height: 100%;
   padding: 20px;
  }
  #eta-text, #place-text, #miles-text{
  font-size: 24px;
  }
  #school-icon{
  height: 30px;
  margin-top: -5px;
  }
  #refresh-icon,#edit-icon{
   height: 40px
  }
  #source-icon, #destination-icon{
  height: 45px;
  margin-top: -10px;
  }
  .responsive-header{
    display: none;
  }
  .sos-responsive-header{
    display: none;
  }
  .responsive-details{
    display: none;
  }
  .traffic, .current-location{
    padding: 10px ;
  }
  .current-location{
    bottom: 50px;
  }
  .map-div{
    position: absolute;
    width: 72%;
    left: 28%;
  }

  }
  @media(max-width:767px) {

    .header {
      height: 110px;
      /* background: #1cc0f9 !important; */
    }
    .stack-top{
      display: none;
    }
    .responsive-header{
      display: block;
    }
    .sos-responsive-header{
        display: block;
        height: 50px;
    }

    .responsive-details{
      display: block;
    }
    .logo {
      margin-top: 5px;
      margin-right: 10px;
      /* padding: 10px; */
    }
    .user-details {
      max-height: 65px;
      height: 65px;
      background-color: #31C2FF;
      /* display:none; */
    }

    .profile {
      height: 50px;
      width: 50px;
      margin-top: 3px;

    }
    .user-details .container {
      max-width: 50% !important;
      height: 100%;
    }
    .user-details-text{
      /* margin-top: -5px; */
      font-size: 18px;
      /* margin-left: 45px !important; */
      text-align : right !important;
      text-overflow: ellipsis;
      /* overflow:hidden; */
      color: #fff;

    }
    #eta-text, #place-text, #miles-text {
      font-size: 16px;
      /* text-overflow: ellipsis;  */

    }
    .trip-container{
      padding-right: 0 !important;
      padding-left: 0 !important;
    }
    .eta-details {
      max-height: 140px;
      height: 140px;
      background-color: #F4F4F4;
      padding: 0px;
    }
    .sos-details
      /* max-height: 125px; */
      {
        max-height: 118px;
        height: 118px;
        position: absolute;
        bottom: 0;
        background-color: #fff;
        width: 100%;
        border-radius: 20px 20px 0px 0px;
        z-index: 11;
    }

    #refresh-icon,#edit-icon{
      height: 22px;
    }
    .trip-container{
      padding-top: 15px;
      padding-bottom: 15px;
    }
    .eta-text-div{
      margin-bottom: 15px;
    }
    .duration-distance-div{
      margin-top:15px;
    }
    .card {
      height: 100%;
    }
    .traffic img,.current-location img,.near_by img,.near_by_set img{
      height: 45px;
      width: 45px;

    }
    .traffic, .current-location, .near_by, .near_by_set {
      padding: 5px;
    }
    .swal2-title {
      /* margin: 0px; */
      font-size: 20px !important;
    }
    .eta-info {
      border-radius: 5px;
      /* border-bottom: 1.4px solid #ccc; */
      padding: 2px;
      margin-top: 0px;
      margin-bottom: 20px;
      padding-bottom: 30px;
  }
  .eta-info div{
    padding-right: 0px;
    padding-left: 0px;
  }
  .sos-info {
    border-radius: 5px;
    /* border-bottom: 1.4px solid #ccc; */
    padding: 2px;
    margin-top: 5px;
    /* margin-bottom: 7px; */
    padding-bottom: 0px;
  }
  .sos-info div{
  padding-right: 0px;
  padding-left: 0px;
  }
  #map{
    width: 100% !important;
    left: 0%;
  }
  .slider_up {
    width: 100%;

  }

  }
  @media only screen
    and (max-width: 1024px)
    and (-webkit-min-device-pixel-ratio: 1.5) {
      .eta-info-font{
        font-size: 16px !important;
        font-weight: 600;
      }
      .eta-info div{
        padding-right: 0px;
        padding-left: 0px;
      }
  }

  /* @media screen and ( height: 400px ) { #map{
        height: 1220px !important
    } }
  @media screen and ( max-height: 699px ) { #map{
        height: 1220px !important
    } }
  @media screen and ( min-height: 800px ) {#map{
        height: 1220px !important
    }}

  @media screen and ( min-height: 900px ) {#map{
        height: 1450px !important
    }}


    @media screen and ( max-height: 1200px ) { #map{
        height: 400px !important
    } } */
    @media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
      .eta-info-font {
        font-size: 14px !important;

    }
    .eta-info{
      text-align: center;
    }
    .sos .eta-info{
        text-align: left;
    }
    .stack-top {
        z-index: 9;
        width: 40%;
        height: 100%;
        opacity: 0.87777;
        background-color: #fff;
        position: absolute;
    }

    #map {
        width: 72%;
        left: 40%;
    }
      .eta-info div{
        padding-right: 0px;
        padding-left: 0px;
      }
    }

