/* ========================= RESET CSS =============================*/
  @import url("//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
 /* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

@font-face {
font-family: HyundaiSansTextOffice ;
src: url("../fonts/HyundaiSansHeadOffice-Regular.eot");
src: url("../fonts/HyundaiSansHeadOffice-Regular.woff") format("woff");
 
}

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
	font-family: HyundaiSansTextOffice;
	 
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

 

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

 

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  

  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.nav-justified > li{

    width:32.5% !important;
}
/* ============================== TEXT COLOR THEME ==========================*/
.Hyundai-Blue-color {
    color: #002C5F !important;
}
.Hyundai-Active-Blue-color{color: #00AAD2 !important;}
.Hyundai-Gold-color{color: #A36B4F !important;}
.Hyundai-Active-Red-color{color: #E63312 !important;}
.Hyundai-Sand-color{color: #E4DCD3 !important;}
.Hyundai-Light-Sand-color{color: #F6F3F2 !important;}
.Hyundai-Sky-Blue-color{color: #AACAE6 !important;}
.Hyundai-Black-color{color: #000000 !important;}
.Hyundai-White-color{color: #ffffff !important;}
.Hyundai-green-color{color: #029006 !important;}
.Hyundai-grey-color{color: #5B5B5E !important;}

/*========================= BACKGROUND COLOR THEME ============================*/


.Hyundai-Blue-bg{background: #002C5F !important ; }
.Hyundai-Active-Blue-bg{ background: #00AAD2 !important;   }
.Hyundai-Gold-bg{ background: #A36B4F !important; }
.Hyundai-Active-Red-bg{background: #E63312 !important; }
.Hyundai-Sand-bg{background:  #E4DCD3 !important;}
.Hyundai-Light-Sand-bg{background: #F6F3F2 !important; }
.Hyundai-Sky-Blue-bg{background: #AACAE6 !important; }
.Hyundai-Black-bg{background: #000000 !important; }
.Hyundai-White-bg{background: #ffffff !important; }
.Hyundai-green-bg{background: #029006 !important; }

/*========================= ALL FONT SIZE  ============================*/

h1{font-size: 2.5rem}
/*h2{font-size: 2rem  }*/
h3{font-size: 1.75rem  }
/*p{font-size: 1.2rem }*/
.font-15 {
    font-size: 15px !important;
}
.font-18 {
    font-size: 18px !important;
}
.font-20 {
    font-size: 20px !important;
}

.font-24 {
    font-size: 24px !important;
}

 


/* ================================== MARGIN TOP ==================================*/

.mrg-t-5 {margin-top: 5px;}
.mrg-t-10 {margin-top: 10px;}
.mrg-t-15 {margin-top: 15px;}
.mrg-t-20 {margin-top: 20px;}
.mrg-t-25 {margin-top: 25px;}
.mrg-t-30 {margin-top: 30px;}
.mrg-t-35 {margin-top: 35px;}
.mrg-t-40 {margin-top: 40px;}
.mrg-t-45 {margin-top: 45px;}
.mrg-t-50 {margin-top: 50px;}

/* ================================== MARGIN BOTTOM ==================================*/

.mrg-b-5 {margin-bottom: 5px;}
.mrg-b-10 {margin-bottom: 10px;}
.mrg-b-15 {margin-bottom: 15px;}
.mrg-b-20 {margin-bottom: 20px;}
.mrg-b-25 {margin-bottom: 25px;}
.mrg-b-30 {margin-bottom: 30px;}
.mrg-b-35 {margin-bottom: 35px;}
.mrg-b-40 {margin-bottom: 40px;}
.mrg-b-45 {margin-bottom: 45px;}
.mrg-b-50 {margin-bottom: 50px;}


/* ================================== MARGIN 	RIGHT ==================================*/

.mrg-r-5 {margin-right: 5px;}
.mrg-r-10 {margin-right: 10px;}
.mrg-r-15 {margin-right: 15px;}
.mrg-r-20 {margin-right: 20px;}
.mrg-r-25 {margin-right: 25px;}
.mrg-r-30 {margin-right: 30px;}
.mrg-r-35 {margin-right: 35px;}
.mrg-r-40 {margin-right: 40px;}
.mrg-r-45 {margin-right: 45px;}
.mrg-r-50 {margin-right: 50px;}


/* ================================== MARGIN LEFT==================================*/

.mrg-l-5 {margin-left: 5px;}
.mrg-l-10 {margin-left: 10px;}
.mrg-l-15 {margin-left: 15px;}
.mrg-l-20 {margin-left: 20px;}
.mrg-l-25 {margin-left: 25px;}
.mrg-l-30 {margin-left: 30px;}
.mrg-l-35 {margin-left: 35px;}
.mrg-l-40 {margin-left: 40px;}
.mrg-l-45 {margin-left: 45px;}
.mrg-l-50 {margin-left: 50px;}


/* ================================== MARGIN ALL (TOP, RIGHT, BOTTOM, LEFT) ==================================*/

.mrg-a-5 {margin: 5px;}
.mrg-a-10 {margin: 10px;}
.mrg-a-15 {margin: 15px;}
.mrg-a-20 {margin: 20px;}
.mrg-a-25 {margin: 25px;}
.mrg-a-30 {margin: 30px;}
.mrg-a-35 {margin: 35px;}
.mrg-a-40 {margin: 40px;}
.mrg-a-45 {margin: 45px;}
.mrg-a-50 {margin: 50px;}


/* ================================== PADDING TOP  ==================================*/

.pad-t-5{padding-top: 5px;}
.pad-t-10{padding-top: 10px;}
.pad-t-15{padding-top: 15px;}
.pad-t-20{padding-top: 20px;}
.pad-t-25{padding-top: 25px;}
.pad-t-30{padding-top: 30px;}
.pad-t-35{padding-top: 35px;}
.pad-t-40{padding-top: 40px;}
.pad-t-45{padding-top: 45px;}
.pad-t-50{padding-top: 50px;}



/* ================================== PADDING RIGHT  ==================================*/

.pad-r-5{padding-right: 5px;}
.pad-r-10{padding-right: 10px;}
.pad-r-15{padding-right: 15px;}
.pad-r-20{padding-right: 20px;}
.pad-r-25{padding-right: 25px;}
.pad-r-30{padding-right: 30px;}
.pad-r-35{padding-right: 35px;}
.pad-r-40{padding-right: 40px;}
.pad-r-45{padding-right: 45px;}
.pad-r-50{padding-right: 50px;}


/* ================================== PADDING BOTTOM ==================================*/

.pad-b-5{padding-bottom: 5px;}
.pad-b-10{padding-bottom: 10px;}
.pad-b-15{padding-bottom: 15px;}
.pad-b-20{padding-bottom: 20px;}
.pad-b-25{padding-bottom: 25px;}
.pad-b-30{padding-bottom: 30px;}
.pad-b-35{padding-bottom: 35px;}
.pad-b-40{padding-bottom: 40px;}
.pad-b-45{padding-bottom: 45px;}
.pad-b-50{padding-bottom: 50px;}


/* ================================== PADDING LEFT ==================================*/

.pad-l-5{padding-left: 5px;}
.pad-l-10{padding-left: 10px;}
.pad-l-15{padding-left: 15px;}
.pad-l-20{padding-left: 20px;}
.pad-l-25{padding-left: 25px;}
.pad-l-30{padding-left: 30px;}
.pad-l-35{padding-left: 35px;}
.pad-l-40{padding-left: 40px;}
.pad-l-45{padding-left: 45px;}
.pad-l-50{padding-left: 50px;}


/* ================================== PADDING ALL (TOP, RIGHT, BOTTOM. LEFT) ==================================*/

.pad-a-5{padding: 5px;}
.pad-a-10{padding: 10px;}
.pad-a-15{padding: 15px;}
.pad-a-20{padding: 20px;}
.pad-a-25{padding: 25px;}
.pad-a-30{padding: 30px;}
.pad-a-35{padding: 35px;}
.pad-a-40{padding: 40px;}
.pad-a-45{padding: 45px;}
.pad-a-50{padding: 50px;}


/* ==================================  FONT WEIGHT  ==================================*/

.text-bold-1{font-weight: 100;}
.text-bold-2{font-weight: 200;}
.text-bold-3{font-weight: 300;}
.text-bold-4{font-weight: 400;}
.text-bold-5{font-weight: 500;}
.text-bold-6{font-weight: 600;}
.text-bold-7{font-weight: 700;}
.text-bold-8{font-weight: 800;}
.text-bold-9{font-weight: 900;}



/* =============================== GOOGLE MAP CSS ==============================*/

/*==========================left profile menu ========================*/


 .map-control {
    display: none !important;
}

.box-shadow{ -webkit-box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%) !important;
    -moz-box-shadow: 1px 2px 12px 1px rgba(0,0,0,0.15) !important;
    box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%) !important; }
 

/* ========================  Top NAVBAR CSS WEB VIEW ======================================*/

section.Hyundai-top-menu-bar {
    position: absolute;
    z-index: 9999;
    width: 100%;
    top: 0px;
}


.Hyundai-top-menu-bar .navbar{
	
	position: relative;
    min-height: 50px;
    margin-bottom: 0px;
    border:  none;
}

a.navbar-brand.hyundai-logo img {
    width: 60%;
}

.Hyundai-top-menu-bar .fa {
    
    font-size: 25px !important;
    
}
 
 

/* ========================= Toggle button css =====================*/
 
 /* Switch button */


.webView-switch-button {
    width: 23%;
    margin: 0px auto;
    position: absolute;
    left: 35%;
    top: 21%;
}
.btn-default.btn-on.active{background-color: #00AAD2;color: white;}
.btn-default.btn-off.active{background-color: #00AAD2;color: white;}
	  
   

.webView-switch-button .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
    outline: none;
    outline-offset: -2px;
}

	
	.webView-switch-button .btn-default{text-shadow: none !important; background-image: none !important;  }
	
	.webView-switch-button .btn-group > .btn:last-child:not(:first-child), .btn-group > .dropdown-toggle:not(:first-child){border-radius: 0px !important;}
	
	.webView-switch-button  .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle){border-radius: 0px !important;}


/* ======================== Right side map controller ============================ */

.backButton-2 img {
    width: 24%;
    margin-left: 10px;
}

.right-controller {
    position: absolute;
    height: auto;
    width: 27%;
    z-index: 9999999;
    right: 0;
    top: 45%;
    bottom: 15%;
}

 .controllers ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    box-sizing: border-box;
    width: 60px;
    right: 10px;
    position: absolute;
}
ul, ol {
    margin-top: 0;
    margin-bottom: 10px;
}

.controllers ul li a img {
    width: 100%;
    padding: 8px;
}




/*================================== SEARCH BOX EXPEND ======================================*/

  .Searchbox {
    overflow: hidden;
    background: #fff;
    display: none;
    position: absolute;
    right: 21px;
    height: 42px;
    -webkit-box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%);
    -moz-box-shadow: 1px 2px 12px 1px rgba(0,0,0,0.15);
    box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%);
    border-radius: 50px;
    width: 100%;
    top: 7px;
}

 .Searchbox input#form1 {
    margin-top: -6px;
    height: 56px;
    margin-left: 5px;
    border: none;
}


/*================================== LEGEND BOX EXPEND ======================================*/

.legendbox{
    overflow: hidden;
    background: #fff;
    display:  none;
    position: absolute;
    right: 21px;
    height: 42px;
    -webkit-box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%);
    -moz-box-shadow: 1px 2px 12px 1px rgba(0,0,0,0.15);
    box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%);
    border-radius: 50px;
    width: 100%;
    top: 127px;
}

.legendbox ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.legendbox ul li {
    text-decoration: none;
    list-style: none;
    margin: 5px;
    display: inline-block;
    width: 25%;
}

.legendbox ul li img {
    width: 28px;
    display: inline-flex;
     
}

.legendbox ul li span {
    position: absolute;
    display: inline-block;
    top: 8px;
}

/* ====================================== LIST VIEW PAGE CSS ==============================*/

.backButton {
    display: none;
}

.list-view-card{
background: #fff;
min-height: 160px;
-webkit-box-shadow: -2px 4px 7px -1px rgba(0,0,0,0.75);
-moz-box-shadow: -2px 4px 7px -1px rgba(0,0,0,0.75);
box-shadow: -2px 4px 7px -1px rgba(0,0,0,0.75);
padding: 10px;
position: relative;
}

.footer-list-view-section {
    background: red;
    position: fixed;
    bottom: 325px;
}

 
 .favourite img {
    background: rgb(228, 220, 211);
    width: 27px;
    padding: 4px;
    border-radius: 50%;
    display: inline-block;
    font-size: 14px;
    margin-right: 5px;
}


 
.favourite.pull-right p {
    font-size: 13px;
    font-weight: 600;
}

.list-view-card p.address {
    width: 80%;
    margin-top: 5px;
}

.right-arrow.pull-right img {
    width: 30px;
    top: 42%;
    position: absolute;
    right: 6%;
}

span.Hyundai-Light-Sand-bg.Hyundai-green-color.pad-r-10.pad-l-10.text-bold-6 {
    margin-top: 5px;
    display: inline-block;
}

h4.pull-left.stationName {
    width: 65%;
    display: inline-block;
}

 .favourite.pull-right {
    width: 28%;
}

 

.flext-item{flex-grow: 1;
   
	margin-top: 15px;
   }

.bottomSection-list-view {
    position: absolute;
    bottom: 10px;
    width: 95%;
}



/*================== FILTER PAGE CSS=========================*/


.filterPage .topSwitch-button {
    width: 172px;
    
    margin: 0px auto;
}

.mobile-heading {
    background: #002C5F;
	padding: 10px;
	color: #fff !important;
}

.backButton-2 img {
    width: 55%;
    margin-left: 10px;
}

 section.container.filterPage {
    margin-top: 110px;
}

.radius {
        width: 100%;
        height: 45px;
        border: none;
        padding:5px;
        font-size: 18px;
        color: #fff;
        background-color: #00AAD2;
	border-radius: 0px;
        
      }

.buttonGroup {
    text-align: center;
}

 .connector-type {
    background: #F6F3F2;
    padding: 24px 10px 2px 22px;
    margin-top: 10px;
}
 
.connector-type .form-group {
  display: block;
  margin-bottom: 15px;
}

.connector-type .form-group input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}

.connector-type .form-group label {
  position: relative;
  cursor: pointer;
}

.connector-type .form-group label:before {
  content:'';
  -webkit-appearance: none;
  background-color: transparent;
  border: 2px solid #0079bf;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 10px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 10px;
}

.connector-type .form-group input:checked + label:after {
  content: '';
  display: block;
  position: absolute;
  top: 2px;
  left: 9px;
  width: 6px;
  height: 14px;
  border: solid #0079bf;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.form-group.Type-2-AC {
    width: 50%;
    float: left;
}


 .by-rating label {
  font-size: 3rem;
  display: flex;
  gap: 0.5rem;
}

.by-rating input[type="radio"] 
  {
  width: 2em;
  height: 2rem;
   
}

 span.ratingpoints img {
    display: inline-block;
    width: 33%;
    margin-left: 5px;
}

 .ratingslect {
    margin-top: 5px;
    margin-bottom: 5px;
}


.favourite-locations .form-group {
  display: block;
  margin-bottom: 15px;
}

.favourite-locations .form-group input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}

.favourite-locations .form-group label {
  position: relative;
  cursor: pointer;
}

.favourite-locations .form-group label:before {
  content:'';
  -webkit-appearance: none;
  background-color: transparent;
  border: 2px solid #0079bf;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 10px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 10px;
}

.favourite-locations .form-group input:checked + label:after {
  content: '';
  display: block;
  position: absolute;
  top: 2px;
  left: 9px;
  width: 6px;
  height: 14px;
  border: solid #0079bf;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

span.ratingpoints {
    vertical-align: super;
}

/* =================================== Map marker click then open side panel ===========================*/

.sidepanel  {
  width: 0;
  position: fixed;
  z-index: 1;
  height: 250px;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}


.stationAddress {
    width: 80%;
    
}
.closeButton {
    height: 35px;
}

div#MapInfoPanel {
    width: 25%;
    height: 100vh;
    background: #fff;
    z-index: 9999999999999999;
    -webkit-box-shadow: 4px 21px 8px 4px rgb(0 0 0 / 15%);
    -moz-box-shadow: 4px 21px 8px 4px rgba(0,0,0,0.15);
    box-shadow: 4px 21px 8px 4px rgb(0 0 0 / 15%);
    position: absolute;
    top: 76px;
}


.closeButton a img {
    position: absolute;
    width: 6%;
    top: 10px;
    right: 10px;
}

.closeButton a {
    cursor: pointer;
}

 

/* ========================= FULL RATING STAR ================================*/


 

  /* use display:inline-flex to prevent whitespace issues. alternatively, you can put all the children of .rating-group on a single line */
  .rating-group {
    display: inline-flex;
  }
  
  /* make hover effect work properly in IE */
  .rating__icon {
    pointer-events: none;
  }
  
  /* hide radio inputs */
  .rating__input {
   position: absolute !important;
   left: -9999px !important;
  }

  /* set icon padding and size */
  .rating__label {
    cursor: pointer;
    padding: 0 0.1em;
    font-size: 2rem;
  }
  
  /* set default star color */
  .rating__icon--star {
    color: orange;
  }
  
  /* set color of none icon when unchecked */
  .rating__icon--none {
    color: #eee;
  }

  /* if none icon is checked, make it red */
  .rating__input--none:checked + .rating__label .rating__icon--none {
    color: red;
  }

  /* if any input is checked, make its following siblings grey */
  .rating__input:checked ~ .rating__label .rating__icon--star {
    color: #ddd;
  }

  /* make all stars orange on rating group hover */
  .rating-group:hover .rating__label .rating__icon--star {
    color: orange;
  }

  /* make hovered input's following siblings grey on hover */
  .rating__input:hover ~ .rating__label .rating__icon--star {
    color: #ddd;
  }
  
  /* make none icon grey on rating group hover */
  .rating-group:hover .rating__input--none:not(:hover) + .rating__label .rating__icon--none {
     color: #eee;
  }

  /* make none icon red on hover */
  .rating__input--none:hover + .rating__label .rating__icon--none {
    color: red;
  }
 
span.reviewText {
    margin-top: 4px;
    display: inline-block;
    margin-left: 10px;
     
}
 
  .navigateIcon {
    background: #E4DCD3;
    width: 45px;
    padding: 10px;
    border-radius: 50%;
    margin: 8px 15px;
} 

/*======================= INFO PANEL TAB SECTION ==========================*/

 .cd-tabs:after {
  content: "";
  display: table;
  clear: both;
}

.cd-tabs:after {
  /* subtle gradient layer on top right - to indicate it's possible to scroll */
  position: absolute;
  top: 0;
  right: 0;
  height: 60px;
  width: 200px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to left, white, rgba(255, 255, 255, 0));
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}

.no-cssgradients .cd-tabs::after {
  display: none;
}

.cd-tabs.is-ended::after {
  /* class added in jQuery - remove the gradient layer when it's no longer possible to scroll */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;
}

.cd-tabs nav {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: inset 0 -2px 3px rgba(255, 255, 255, 0.06);
}

.cd-tabs-navigation {
  width: 100%;
}

.cd-tabs-navigation:after {
  content: "";
  display: table;
  clear: both;
}

.cd-tabs-navigation li {
  float: left;
}

.cd-tabs-navigation a {
  position: relative;
  display: block;
  height: 60px;
  text-align: center;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 700;
  color: #c3c2b9;
  padding-top: 34px;
}

.cd-tabs-navigation a.selected {
  background-color: #ffffff !important;
  box-shadow: inset 0 -2px 0 #002C5F;
  color: #29324e;
}

.cd-tabs-content {
  background: #ffffff;
}

.cd-tabs-content li {
  display: none;
}

.cd-tabs-content li.selected {
  display: block;
  -webkit-animation: cd-fade-in 0.5s;
  animation: cd-fade-in 0.5s;
}

.cd-tabs-content li p {
  font-size: 14px;
  line-height: 1.6;
  color: #000;
  margin-bottom: 0.5em;
}

/* ===============================OVERVIEW Section ========================================*/

li.overview {
    height: 55vh;
    overflow: hidden;
    overflow-y: scroll;
}

p.soket-img img {
    width: 35px;
    margin: 0px auto;
}

p.soket-img {
    height: 40px;
}
ul.cd-tabs-content {
    margin: 0px;
    padding: 0px;
}

.SoketType.Hyundai-Light-Sand-bg {
    margin: 10px;
    padding: 10px;
}

.distance img {
    width: 28px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

.openTime img {
    width: 28px;
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
}

.call img, .email img   {
    display: inline-block;
    width: 35px;
    vertical-align: middle;
    margin-right: 10px;
}


/* =============================== Review Section ========================================*/

a.review-btn {
    width: 40%;
}

li.review-tab {
    height: 350px;
    
    overflow: hidden;
    overflow-y: scroll;
}
.Hyundai-primary-btn {
    background: #002C5F;
    border-radius: 0px;
}

a.Hyundai-primary-btn {
     color: #fff !important;
}

.Hyundai-secondry-btn{
	
	background: #00AAD2;
    border-radius: 0px;
	padding: 10px 10px;
}

 

a.Hyundai-secondry-btn{
	
	 color: #fff !important;
}

a.btn.Hyundai-primary-btn.btn-block.btn-lg.pull-right img {
    width: 28px;
    display: inline-block;
    vertical-align: middle;
}

 
.userReview {
     
    border: 1px solid #e2dfdf;
} 
 

.userProfileImage.pull-left {
    width: 18%;
}

.userProfileImage.pull-left img {
    width: 45px;
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
}

.UserName.pull-left {
    width: 82%;
}

span.chargingStstusIcon img {
    width: 28px;
    display: inline-block;
    margin-right: 10px;
}


span.ConnectorStatusIcon img {
    width: 28px;
    display: inline-block;
    margin-right: 10px;
}

span.ratingIcon img {
    display: inline-block;
    width: 18px;
    margin-right: 5px;
	margin-bottom: 5px;
}

span.RatingCount, span.replyText {
    font-size: 1.75rem;
     
}

span.replyIcon img {
    display: inline-block;
    width: 28px;
    vertical-align: middle;
    margin-right: 10px;
}


span.Free-Wificon img, span.RestroomsIcon img, span.CoffeeShop-icon img, span.SurveillanceIcon img, span.Game-Zone-icon img {
    display: inline-block;
    width: 28px;
    margin-right: 10px;
    vertical-align: middle;
}

span.mapIcon img {
    display: inline-block;
    width: 28px;
    vertical-align: middle;
    margin-left: 10px;
}

.McDonaldsImages div {
    padding: 5px;
}

.McDonalds p{ margin-bottom: 0px !important;}

ul.cd-tabs-content li.amenities {
    height:  68vh;
    overflow-x: hidden;
    overflow-y: scroll;
}

.station-photo img {
    display: inline-flex;
    width: 50%;
}


hr {
  margin: 0;
  margin-bottom: 0.5em;
}

.cd-tabs-navigation ul {
  margin-bottom: 0;
}
.cd-tabs-navigation ul a {
  padding-top: 3em;
  padding-bottom: 1em;
}
.cd-tabs-navigation ul li {
  padding: 0 1.5em;
}

.cd-tabs-navigation a {
  /* COMPANY: */
   
  font-size: 1.2rem;
  color: #2F2F2F;
  letter-spacing: 1px;
   
}

.cd-tabs-content h1 {
  /* Be your own customer: */
  font-family: Montserrat-Regular;
  font-size: 30px;
  color: #2F2F2F;
  letter-spacing: 0.2px;
  line-height: 40px;
  margin-bottom: 0;
  margin-top: 0;
}

.cd-tabs-content heading {
  /* Be your own customer: */
  /* font-family: Montserrat-Regular; */
  /* font-size: 30px; */
  /* color: #2F2F2F; */
  /* letter-spacing: 0.2px; */
  /* Squarespace is built: */
  font-family: Lora-Italic;
  font-size: 18px;
  color: #4A4A4A;
  letter-spacing: 0.22px;
  line-height: 34px;
  /* line-height: 40px; */
}

.cd-tabs-content .heading p {
  /* Squarespace is built: */
  font-family: Lora-Italic;
  font-size: 18px;
  color: #4A4A4A;
  letter-spacing: 0.22px;
  line-height: 34px;
}

.cd-tabs-content .text p {
  /* Sed ut perspiciatis: */
  font-family: OpenSans;
  font-size: 14px;
  color: #595959;
  letter-spacing: 0.3px;
  line-height: 24px;
  padding-left: 2em;
  padding-top: 0.5em;
}

.cd-tabs-content li {
  padding-top: 1em;
}

.cd-tabs-navigation a:hover,
.cd-tabs-navigation a:active,
.cd-tabs-navigation a:focus,
.cd-tabs-navigation a:visited {
  text-decoration: none;
}

ul.cd-tabs-navigation {
    list-style: none;
	margin: 0px;
	padding: 0px;
}

ul.cd-tabs-navigation li {
    list-style: none;
	margin: 0px 24px;
}

.cd-tabs-navigation a.selected, .cd-tabs-navigation a.selected:hover {
  color: #000;
}


/*========================================Upcoming Booking sucessful msg page =======================*/

.toast.booking-successful-msg {
    background: #fff;
    position: absolute;
    width: 25%;
    z-index: 9999999;
    padding: 10px;
    top: 5%;
    margin: 0px auto;
    left: 37%;
     -webkit-box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%);
    -moz-box-shadow: 1px 2px 12px 1px rgba(0,0,0,0.15);
    box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%); 
}

.booking-confirm-icon img {
    width: 80%;
    margin-top: 2px;
    display: inline-block;
}

.booking-confirm-icon {
    width: 15%;
     
}

.booking-confirm-msg.pull-right {
    width: 75%;
}

.toast.upcoming-booking {
    background: #fff;
    width: 25%;
    position: fixed;
    bottom: 10px;
    z-index: 999999;
	padding: 10px;
	left: 37%;
	 -webkit-box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%);
    -moz-box-shadow: 1px 2px 12px 1px rgba(0,0,0,0.15);
    box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%);
}

.upcoming-booking-icon img {
    width: 100%;
    margin-top: 15px;
    display: inline-block;
}

.upcoming-booking-icon {
    width: 30%;
     
}

.upcoming-booking-msg {
    width: 65%;
	margin-top: 12px;
}

 .navigate img {
    width: 24%;
    display: inline-block;
    margin-right: 7px;
}

a.btn.Hyundai-secondry-btn.navigate {
    padding: 5px 10px !important;
}

a.btn.Hyundai-primary-btn.view-booking {
    padding: 10px 29px;
}


/* ================================ CHARGING DETAILS PAGE CSS ==============================*/
.row.charging-deatils {
    margin-top: -40px;
}

.upcoming-box{background: #fff;
    width: 100%;
	padding: 15px;
	 
	 -webkit-box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%);
    -moz-box-shadow: 1px 2px 12px 1px rgba(0,0,0,0.15);
    box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%);}

.view p img, .navigate-heading p img {
    width: 12%;
    display: inline-block;
    margin: 0px 5px;
    margin-left: 10px;
}

p.connect-gun {
    margin-top: 1px;
    font-size: 14px !important;
}

.toast.booking-successful-msg.connect-gun-with-charger {
    position: absolute;
    top: 50%;
	width: 85% !important;
	left: 8% !important;
	-webkit-box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%);
    -moz-box-shadow: 1px 2px 12px 1px rgba(0,0,0,0.15);
    box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%);}
 

/* =========================== NEW MOBILE FOOTER ======================================*/
	
	footer.footer-navbar-mobile {
    position: absolute;
    z-index: 9999999;
    bottom: 0px;
   width: 100%;
	 	
    background: #E4DCD3;
		 -webkit-box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%);
    -moz-box-shadow: 1px 2px 12px 1px rgba(0,0,0,0.15);
    box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%);
}
	
footer.footer-navbar .container-mob{
		 display: flex;
	}
	
	.container-mob{list-style: none; margin: 0px; padding: 15px 25px 15px 5px;}
	
	ul.container-mob li a img {
    width: 25px;
}

/*================== PROGRESS BAR EDIT CSS ========================================*/

.progress-bar {
	background: #002C5F !important ;
	border-radius: 25px !important;
	
}

.progress{border-radius: 25px;
	height: 8px;
		 -webkit-box-shadow: 4px 10px 10px 6px rgb(0 0 0 / 15%);
    -moz-box-shadow: 4px 10px 10px 6px rgb(0 0 0 / 15%);
    box-shadow: 4px 10px 10px 6px rgb(0 0 0 / 15%);

}


/* ============================ STEP ARROW CSS =======================*/

.step-arrow {
    position: fixed;
    z-index: 99999999;
    right: 325px;
    bottom: 44px;
    width: 15%;
}

.step-arrow a img {
    width: 25%;
    margin-bottom: 8px;
}



/*======================================= payment-information new design Prashant design ================================*/

.payment-information table tr td {border: none;}
.payment-information table tr th {border: none;}
.payment-information table tr th {font-size: 16px;}
img.rupee-sign {
    display: inline-block;
    width: 9px;
}

.payment-information table{margin-bottom: 0px !important;}

.scanpart.col-xs-2 img {
    width: 40px;
}

img.paytm {
    width: 15%;
}

a.link-account {
    margin-top: 55px;
    vertical-align: sub;
}

 
.delink-account {
    position: absolute;
    bottom: 61px;
    left: 36%;
}

img.cpo-logo {
    width: 9%;
    vertical-align: middle;
}

.book-my-next-slot {
    position: absolute;
    bottom: 52px;
    left: 3%;
}
 
.receipt-page {
    height: 80vh;
}

.receipt-page.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    padding: 2px 6px;
    line-height: 1.2em;
    vertical-align: top;
		 font-size: 12px;
     
}  

.nav-pills > li > a {
    border-radius: 0px;
}

.nav > li > a {
	margin: 4px;
	color: #000;
    position: relative;
    display: block;
    padding: 10px 15px;
    background: #fff;
 
}
 
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
    color: rgb(255, 255, 255);
    background-color: #002C5F;
}

span.booking-status  {
    display: inline-block;
    position: absolute;
    right: 20px;
    /* top: 2px; */
    line-height: 25px;
}

img.heart-line {
    width: 4%;
}

.booking-successful img {
    margin-top: -55px;
	width: 25%;
}

td.text-center.pay {
    border-right: 1px solid #ccc;
	 width: 50%;
}
 

/*========================= Your Profile CSS ================================*/
.edit-option img {
    width: 25%;
     
}

 span.user-profile-image img {
    width: 10%;
    display: inline-block;
}

span.user-upload-icon img {
    width: 4%;
    display: inline-block;
    margin-left: 7px;
}

.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 0px !important;
     
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

a.save-changes {
    float: right;
}
.edit-option.pull-right.Hyundai-Blue-color {
    text-align: right;
}

/*============================ ERROR 404 ===================*/

.error{height: 100vh;
 
display: flex;
align-items: center;
justify-content: center;}

.error-404{  width: 100%;
height: auto;
text-align: center;
	color: #fff;
   }
.error-404 h1{font-size: 72px !important; font-weight: 800;}

/*================================== Booking CSS =========================*/

.car-switch img {
    width: 5%;
    float: right;
	margin-top: 8px;

}

.car-switch h5 {
    width: 50%;
    float: left;
}

span.car-model {
    float: right;
}
 
span.connector-name {
    display: inline-block;
    margin-left: 10px;
}

.connector-details h4 img {
    vertical-align: bottom;
    display: inline-block;
    width: 12%;
}

.booking-page {
    height: 37vh;
}

.by-duration ul {
    padding: 0px;
    margin: 10px auto;
    list-style: none;
	display: flex;
}

  .by-duration ul li {
    margin: 7px 5px;
    flex-grow: 1;
}
.by-duration ul li a {
    flex-grow: 2;
    background: #fff;
    display: block;
    width: 100%;
    text-align: center;
     
    padding: 10px 6px;
    color: #000;
    text-decoration: none;
    -webkit-box-shadow: 4px 4px 8px 4px rgb(0 0 0 / 10%);
    -moz-box-shadow: 4px 4px 8px 4px rgba(0,0,0,0.10);
    box-shadow: 4px 4px 8px 4px rgb(0 0 0 / 10%);
}

.by-duration ul li a:hover {
     
    background: #002C5F;
	color: #fff;
     
}
 
.by-duration ul li a.active {
     
    background: #002C5F;
	color: #fff;
     
}  
 

.enter-custom-amount {background: #fff;
    display: block;
    width: 100%;
    text-align: center;
	margin-top: 17px;
    padding: 10px 6px;
    color: #000;
    text-decoration: none;
    -webkit-box-shadow: 4px 4px 8px 4px rgb(0 0 0 / 10%);
    -moz-box-shadow: 4px 4px 8px 4px rgba(0,0,0,0.10);
    box-shadow: 4px 4px 8px 4px rgb(0 0 0 / 10%);}


.enter-custom-amount .form-control{display: block;
    width: 100%;
    height: 22px !important;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
     background-image: none; 
    border: 1px solid transparent ;
      -webkit-box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%) !important;  
    -moz-box-shadow: 1px 2px 12px 1px rgba(0,0,0,0.0) !important;
      box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 0%) !important;  
      box-shadow: inset 0 1px 1px rgb(0 0 0 / 0%) !important;  
     
}

.select-soc ul {
    list-style: square;
    padding: 0px;
    margin: 0px;
}

  .select-soc ul li {
    background: url(../images/rectangle.png) left center no-repeat;
    float: left;
    margin: 5px;
    list-style: none;
    width: 19px;
    height: 18px;
    text-align: center;
    line-height: 19px;
    font-size: 11px;
    padding-left: 7px;
    padding-right: 7px;
}


.select-soc ul li a  {
      text-decoration: none;
	color: #878786;
	 
}

.select-soc ul li:hover a  {
	 border: 1px solid #002C5F;
	padding: 3px;
	color: #002C5F;
	 	 
}

.select-soc ul li.active a  {
	 border: 1px solid #002C5F;
	padding: 3px;
	color: #002C5F;
	 	 
}

.battery-SOC {
    margin-top: 50px;
}


/* ============================== Page loader ================================*/

img.page-loader {
    width: 25%;
    margin: 0px auto;
    display: block;
}

.spinner img {width: 25%;}
/* ========================================== new map page css ========================*/

.map-img img {
    width: 100%;
}

div.seletct-charger .nav-pills > li > a {
    border-radius: 0px;
}

div.seletct-charger .nav > li > a {
	margin: 4px;
	color: #000;
    position: relative;
    display: block;
    padding: 10px 15px;
    background: #fff;
    
}

div.seletct-charger .nav > li > a.fast-charger {
	margin: 4px;
	
	color: #000;
    position: relative;
    display: block;
    padding: 10px 15px;
    background: #fff;
    -webkit-box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%) !important;
    -moz-box-shadow: 1px 2px 12px 1px rgba(0,0,0,0.15) !important;
    box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%) !important;
}
 
div.seletct-charger .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
    color: rgb(255, 255, 255);
    background-color: #002C5F;
	list-style-image: url("../images/fast-dc-white.png");
}

 div.seletct-charger .nav > li {
    position: relative;
    display: inline-block;
    width: 48%;
}

/*========================================== Monitor page CSS ================================*/

.pad-a-10.monitor-page {
    height: auto !important;
}

img.live-charging-img {
    width: 43%;
    vertical-align: middle;
    float: right;
}

span.Hyundai-Active-Blue-color.live-percentage {
    display: inline-block;
    margin-right:  0px;
    margin-top: 24px;
	font-size: 4.5rem !important;
	margin-left: 25px;
}

.amenities-section ul.amenities {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

 ul.amenities li {
    display: inline-block;
    margin: 10px;
    width: 11%;
}

ul.amenities li img {
    
    width: 100%;
}

img.distance-icon {
    width: 20px;
    vertical-align: middle;
    margin-left: 10px;
}


 .placeholder-1 {background: url("../images/preloader.png");
	height: 100vh;
	width: 100%;
	 background-size: cover;
	 background-repeat: no-repeat;
	 background-position: center;

}


/*=============================================== map with vertical line   ===================================*/

 div#vertical-line {
    width: 90%;
    position: absolute;
    z-index: 9999999;
    background: #fff;
    height: 45px;
    margin-left: 5%;
    display: block;
    margin-top: 15px;
}

.map-with-vertical-line {
    height: 90vh;
    z-index: 99999;
    position: absolute;
}
.vertical-line-tiles {
    width: 100%;
    position: absolute;
    bottom: 57px;
     
    height:380px;
    z-index: 99999999;
	background: rgba(256,256,256,0.5);
}

.adaptable-footer{background: rgba(0,0,0,0.5) !important;}
 .tiles-box {
    background: #fff;
    margin-bottom: 5px;
    padding: 5px;
}
 
.adaptable-footer img.station-logo {
    width: 10%;
}

 .adaptable-footer img.fav-icon {
    width: 5%;
    margin-left: 12px;
    vertical-align: middle;
    margin-top: -6px;
}

img.station-logo {
    width: 16%;
}

img.fav-icon {
    width: 7%;
    margin-left: 3px;
    vertical-align: top;
}

 img.connector-icon {
    width: 12%;
    vertical-align: middle;
    margin-right: 5px;
}
 
p.station-add {
    margin-top: -5px;
    margin-left: 23px;
}

.stationdeatils {
    border-right: 2px solid #666666;
    padding: 0px 6px;
}
 
span.kwh-perice {
    margin-left: 10px;
}
 
span.kms {
    text-align: right;
    margin-left: 7px;
}

img.electric-car-icon {
    width: 38%;
}

.clickdrop-dwon {
    margin-right: 11px;
    margin-top: -8px;
    
}

.adap-footer-amenities ul {
    list-style: none;
    margin: 0px;
     padding: 0px;  
}

 .adap-footer-amenities ul li {
    float: left;
    width: 38px;
    height: 38px;
    margin: 10px 11px;
}

.adap-footer-amenities ul li img{width: 100%;}
.adap-footer-amenities ul li .fa-angle-down{ font-size: 35px;}

/*========================= accordination====================================*/
.set{
  position: relative;
  width: 100%;
  height: auto;
  background-color: #fff;
}
.set > a{
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #555;
  font-weight: 600;
  border-bottom: 1px solid #ddd;
  -webkit-transition:all 0.2s linear;
  -moz-transition:all 0.2s linear;
  transition:all 0.2s linear;
}
.set > a i{
  float: right;
  margin-top: 2px;
}
.set > a.active{
  background-color:#fff;
  color: #555;
}
.content{
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  display:none;
}
.content p{
  padding: 10px 15px;
  margin: 0;
  color: #333;
}
/* Rating Star Widgets Style */
.rating-stars ul {
    list-style-type: none;
    padding: 0;
    -moz-user-select: none;
    -webkit-user-select: none;
}

    .rating-stars ul > li.star {
        display: inline-block;
    }

        /* Idle State of the stars */
        .rating-stars ul > li.star > i.fa {
            font-size: 1.5em; /* Change the size of the stars */
            color: #ccc; /* Color on idle state */
        }

        /* Hover state of the stars */
        .rating-stars ul > li.star.hover > i.fa {
            color: #FFCC36;
        }

        /* Selected state of the stars */
        .rating-stars ul > li.star.selected > i.fa {
            color: #FF912C;
        }
/* =============================== Footer NAVBAR MOBILE VIEW ==============================*/


/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
	
	
    
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
	.navbar-header {
    width: 41%;
}
	 .webView-switch-button {
    width: 23%;
    margin: 0px auto;
    position: absolute;
    left: 35%;
    top: 26%;
}
	
	 .mobile-heading {
    background: #002C5F;
	padding: 10px;
	color: #fff !important;
}
	
	.backButton-2 img {
    width: 50%;
    margin-left: 10px;
}
 
  /* Switch button */
.btn-default.btn-on.active{background-color: #00AAD2;color: white;}
.btn-default.btn-off.active{background-color: #00AAD2;color: white;}
	 
   

.webView-switch-button .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
    outline: none;
    outline-offset: -2px;
}

	
	.webView-switch-button .btn-default{text-shadow: none !important; background-image: none !important;  }
	
	.webView-switch-button .btn-group > .btn:last-child:not(:first-child), .btn-group > .dropdown-toggle:not(:first-child){border-radius: 0px !important;}
	
	.webView-switch-button  .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle){border-radius: 0px !important;}
	
	 footer.footer-navbar {
    display: none;
}  

	
}

@media only screen and (max-width : 1024px) {
	 .step-arrow {
    position: fixed;
    z-index: 99999999;
    right: 192px;
    bottom: 182px;
    width: 15%;
}
.nav > li {
    position: relative;
    display: inline-block;
    width: 32%;
}

.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    width: 100%;
}

.nav > li > a {
    margin: 3px;
    color: #000;
    position: relative;
    display: block;
    padding: 10px 8px;
    background: #fff;
    
}	
	
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
	 
footer.footer-navbar {
		 display: none;
	} 
 .mobile-heading {
    background: #002C5F;
	padding: 10px;
	color: #fff !important;
}
	
	.backButton-2 img {
    width: 50%;
    margin-left: 10px;
}
.receipt-page {
    height: 82vh !important;
}
	
	.step-arrow {
    position: fixed;
    z-index: 99999999;
    right: 325px;
    bottom: 44px;
    width: 15%;
}

.step-arrow a img {
    width: 25%;
    margin-bottom: 8px;
}
}



/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1460px) {
	 
 div#MapInfoPanel {
    width: 47%;
    height: 100vh;
    background: rgb(255, 255, 255);
    z-index: 2147483647;
    box-shadow: rgb(0 0 0 / 15%) 4px 21px 8px 4px;
    position: absolute;
    top: 76px;
}

.delink-account {
    position: absolute;
    bottom: 60px;
    left: 45%;
}
	.book-my-next-slot {
    position: fixed;
    bottom: 52px;
    left: 3%;
}
	.receipt-page {
    height: 82vh !important;
}
.nav > li {
    position: relative;
    display: inline-block;
    width: 32.5%;
}

.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    width: 100%;
}

.nav > li > a {
    margin: 3px;
    color: #000;
    position: relative;
    display: block;
    padding: 10px 8px;
    background: #fff;
    
}
	
	.modal-footer {
    padding: 15px;
    text-align: inherit !important;
    border-top: 1px solid #e5e5e5;
}
	
	.footer-actions {
    width: 70%;
    margin: 0px auto;
}
	.modal {
    position: fixed;
    top: 30%;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}

.modal-content {
    position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 0px;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgb(0 0 0 / 50%);
    box-shadow: 0 3px 9px rgb(0 0 0 / 50%);
}

a.no {
    width: 50%;
    display: inline-block;
}

a.yes {
    text-align: right;
    display: inline-block;
    width: 48%;
}
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
	
	
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
 
	 
	.Mobile-view-footer-menu .btn-primary {
    background: #00AAD2;
    height: 45px;
    border: none;
    border-radius: 0px;
}
	
	.webView{display: none;}
	
	.right-controller {
    position: absolute;
    height: auto;
    width: 75%;
    z-index: 9999999;
    right: 0px;
    top: 45%;
    bottom: 15%;
}
	
	 .topSwitch-button {
    width: 40%;
    margin: 10px auto;
    height: 40px;
    position: absolute;
    z-index: 99999;
    left: 30%;
    right: 30%;
}
	
	.switch6-light {
    display: block;
    height: 45px;
    position: relative;
    overflow: visible;
    padding: 0px;
    margin-left: 0px;
    background: #fff;
}
	
	.switch6 {
    
    margin: 0 auto;
    width: 100%;
    
    margin-top: 15px !important;
    -webkit-box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%);
    -moz-box-shadow: 1px 2px 12px 1px rgba(0,0,0,0.15);
    box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%);
    height: 45px;
    
     
}
	
	footer.footer-navbar {
    position:fixed;
    z-index: 9999999;
    bottom: 0px;
    width: 100%;
    background: #fff;
		 -webkit-box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%);
    -moz-box-shadow: 1px 2px 12px 1px rgba(0,0,0,0.15);
    box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%);
}
	
	 footer.footer-navbar .container{
		 display: flex;
	} 
	ul.container p{margin-top: 45px; font-size: 10px;}
	
	ul.container  {
		
		list-style: none;
		text-decoration: none;
		text-align: center;
	}
	
	ul.container li a  {
		
		 display: inline-block;
		text-decoration: none;
		color: #000;
		font-size: 1.5rem;
		background: url("../images/footer-sprite-menu.png") no-repeat;
		 
	}
	
	  ul.container li.home a {
    background-position: 7px 6px;
    height: 40px;
    width: 60px;
}

ul.container li.notifications a {
    background-position: -47px 6px;
    height: 40px;
    width: 60px;
}

ul.container li.profile a {
    background-position: -100px 6px;
    height: 40px;
    width: 60px;
}

ul.container li.help a {
    background-position: -151px 6px;
    height: 40px;
    width: 60px;
}

  ul.container li.home a:hover {
    background-position: 7px -45px;
    height: 40px;
    width: 60px;
}

ul.container li.notifications a:hover {
    background-position: -47px -45px;
    height: 45px;
    width: 60px;
}

ul.container li.profile a:hover {
    background-position: -100px -45px;
    height: 40px;
    width: 60px;
}

ul.container li.help a:hover {
    background-position: -151px -45px;
    height: 40px;
    width: 60px;
}	
	
	
	/* =========================== NEW MOBILE FOOTER ======================================*/
	
	footer.footer-navbar-mobile {
    position: fixed;
    z-index: 9999999;
    bottom: 0px;
    width: 100%;
    background: #E4DCD3;
    -webkit-box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%);
    -moz-box-shadow: 1px 2px 12px 1px rgba(0,0,0,0.15);
    box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%);
}
	
footer.footer-navbar .container-mob{
		 display: flex;
	}
	
	.container-mob{list-style: none; margin: 0px; padding: 15px 25px 15px 5px;}
	
	ul.container-mob li a img {
    width: 25px;
}
 
	 /*=======================MOBILE VIEW STATION INFO PANEL =============================*/ 
 

.stationAddress {
    width: 80%;
    
}
.closeButton {
    height: 35px;
}

div#MapInfoPanel {
    width: 100%;
    height: 100vh;
    background: #fff;
    z-index: 9999999999999999;
    -webkit-box-shadow: 4px 21px 8px 4px rgb(0 0 0 / 15%);
    -moz-box-shadow: 4px 21px 8px 4px rgba(0,0,0,0.15);
    box-shadow: 4px 21px 8px 4px rgb(0 0 0 / 15%);
    top: 150px;
	position:fixed;
    padding: 25px !important;
      
}


.closeButton a img {
    position: absolute;
    width: 6%;
    top: 10px;
    right: 10px;
}

.closeButton a {
    cursor: pointer;
}

 

/* ========================= FULL RATING STAR ================================*/


 

  /* use display:inline-flex to prevent whitespace issues. alternatively, you can put all the children of .rating-group on a single line */
  .rating-group {
    display: inline-flex;
  }
  
  /* make hover effect work properly in IE */
  .rating__icon {
    pointer-events: none;
  }
  
  /* hide radio inputs */
  .rating__input {
   position: absolute !important;
   left: -9999px !important;
  }

  /* set icon padding and size */
  .rating__label {
    cursor: pointer;
    padding: 0 0.1em;
    font-size: 1.5em;
  }
  
  /* set default star color */
  .rating__icon--star {
    color: orange;
  }
  
  /* set color of none icon when unchecked */
  .rating__icon--none {
    color: #eee;
  }

  /* if none icon is checked, make it red */
  .rating__input--none:checked + .rating__label .rating__icon--none {
    color: red;
  }

  /* if any input is checked, make its following siblings grey */
  .rating__input:checked ~ .rating__label .rating__icon--star {
    color: #ddd;
  }

  /* make all stars orange on rating group hover */
  .rating-group:hover .rating__label .rating__icon--star {
    color: orange;
  }

  /* make hovered input's following siblings grey on hover */
  .rating__input:hover ~ .rating__label .rating__icon--star {
    color: #ddd;
  }
  
  /* make none icon grey on rating group hover */
  .rating-group:hover .rating__input--none:not(:hover) + .rating__label .rating__icon--none {
     color: #eee;
  }

  /* make none icon red on hover */
  .rating__input--none:hover + .rating__label .rating__icon--none {
    color: red;
  }
 
span.reviewText {
    margin-top: 5px;
    display: inline-block;
    margin-left: 10px;
	font-size: 13px;
     
}
 
  .navigateIcon {
    background: #E4DCD3;
    width: 40px;
    padding: 8px;
    border-radius: 50%;
    margin: 5px 18px;
} 

/*======================= INFO PANEL TAB SECTION ==========================*/

 .cd-tabs:after {
  content: "";
  display: table;
  clear: both;
}

.cd-tabs:after {
  /* subtle gradient layer on top right - to indicate it's possible to scroll */
  position: absolute;
  top: 0;
  right: 0;
  height: 60px;
  width: 200px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to left, white, rgba(255, 255, 255, 0));
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}

.no-cssgradients .cd-tabs::after {
  display: none;
}

.cd-tabs.is-ended::after {
  /* class added in jQuery - remove the gradient layer when it's no longer possible to scroll */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;
}

.cd-tabs nav {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: inset 0 -2px 3px rgba(255, 255, 255, 0.06);
}

.cd-tabs-navigation {
  width: 100%;
}

.cd-tabs-navigation:after {
  content: "";
  display: table;
  clear: both;
}

.cd-tabs-navigation li {
  float: left;
}

.cd-tabs-navigation a {
  position: relative;
  display: block;
  height: 60px;
  text-align: center;
  font-size: 12px !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 700;
  color: #c3c2b9;
  padding-top: 34px;
}

.cd-tabs-navigation a.selected {
  background-color: #ffffff !important;
  box-shadow: inset 0 -2px 0 #002C5F;
  color: #29324e;
}

.cd-tabs-content {
  background: #ffffff;
}

.cd-tabs-content li {
  display: none;
}

.cd-tabs-content li.selected {
  display: block;
  -webkit-animation: cd-fade-in 0.5s;
  animation: cd-fade-in 0.5s;
}

.cd-tabs-content li p {
  font-size: 0.8em;
  line-height: 12px;
  color: #000;
  margin-bottom: 0.5em;
}

 /* =============================== Review Section ========================================*/

.footer-section-reply {
    display: block;
    margin-top: 29px;
    position: relative;
}

	.RatingAndReply {
    position: absolute;
    width: 100%;
    bottom: -12px;
}
	
	a.review-btn {
    width: 65%;
}
	li.review-tab {
    height: 55vh;
    overflow: hidden;
    overflow-y: scroll;
}
	a.btn.Hyundai-primary-btn.btn-block.btn-lg.pull-right img {
    width: 28px !important;
    display: inline-block;
    vertical-align: middle;
}

a.Hyundai-primary-btn {
    color: #fff !important;
}
 
.userReview {
     
    border: 1px solid #e2dfdf;
} 
 

.userProfileImage.pull-left {
    width: 20%;
}

.userProfileImage.pull-left img {
    width: 35px;
    display: inline-block;
    margin-left:-5px;
    vertical-align: middle;
}

.UserName.pull-left {
    width: 80%;
}

span.chargingStstusIcon img {
    width: 20px;
    display: inline-block;
    margin-right: 5px;
}

	.cd-tabs {
    margin-top: 20px;
}

span.ConnectorStatusIcon img {
    width: 20px;
    display: inline-block;
    margin-right: 5px;
}

span.ratingIcon img {
    display: inline-block;
    width: 20px;
    margin-right: 5px;
}

span.RatingCount, span.replyText {
    font-size: 1.5rem;
     
}

span.replyIcon img {
    display: inline-block;
    width: 20px;
    vertical-align: middle;
    margin-right: 5px;
}


span.Free-Wificon img, span.RestroomsIcon img, span.CoffeeShop-icon img, span.SurveillanceIcon img, span.Game-Zone-icon img {
    display: inline-block;
    width: 28px;
    margin-right: 10px;
    vertical-align: middle;
}

span.mapIcon img {
    display: inline-block;
    width: 28px;
    vertical-align: middle;
    margin-left: 10px;
}

.McDonaldsImages div {
    padding: 5px;
}

.McDonalds p{ margin-bottom: 0px !important;}

ul.cd-tabs-content li.amenities {
    height:  55vh;
    overflow-x: hidden;
    overflow-y: scroll;
}
	
	li.photo-section {
    height: 60vh;
    overflow: hidden;
    overflow-y: scroll;
}

.station-photo img {
    display: inline-flex;
    width: 50%;
}


hr {
  margin: 0;
  margin-bottom: 0.5em;
}

.cd-tabs-navigation ul {
  margin-bottom: 0;
}
.cd-tabs-navigation ul a {
  padding-top: 3em;
  padding-bottom: 1em;
}
.cd-tabs-navigation ul li {
  padding: 0 1.5em;
}

.cd-tabs-navigation a {
  /* COMPANY: */
   
  font-size: 1.2rem;
  color: #2F2F2F;
  letter-spacing: 1px;
   
}

.cd-tabs-content h1 {
  /* Be your own customer: */
  font-family: Montserrat-Regular;
  font-size: 30px;
  color: #2F2F2F;
  letter-spacing: 0.2px;
  line-height: 40px;
  margin-bottom: 0;
  margin-top: 0;
}

.cd-tabs-content heading {
  /* Be your own customer: */
  /* font-family: Montserrat-Regular; */
  /* font-size: 30px; */
  /* color: #2F2F2F; */
  /* letter-spacing: 0.2px; */
  /* Squarespace is built: */
  font-family: Lora-Italic;
  font-size: 18px;
  color: #4A4A4A;
  letter-spacing: 0.22px;
  line-height: 34px;
  /* line-height: 40px; */
}

.cd-tabs-content .heading p {
  /* Squarespace is built: */
  font-family: Lora-Italic;
  font-size: 18px;
  color: #4A4A4A;
  letter-spacing: 0.22px;
  line-height: 34px;
}

.cd-tabs-content .text p {
  /* Sed ut perspiciatis: */
  font-family: OpenSans;
  font-size: 14px;
  color: #595959;
  letter-spacing: 0.3px;
  line-height: 24px;
  padding-left: 2em;
  padding-top: 0.5em;
}

.cd-tabs-content li {
  padding-top: 1em;
}

.cd-tabs-navigation a:hover,
.cd-tabs-navigation a:active,
.cd-tabs-navigation a:focus,
.cd-tabs-navigation a:visited {
  text-decoration: none;
}

ul.cd-tabs-navigation {
    list-style: none;
	margin: 0px;
	padding: 0px;
}

ul.cd-tabs-navigation li {
    list-style: none;
	margin: 0px 7px;
}

.cd-tabs-navigation a.selected, .cd-tabs-navigation a.selected:hover {
  color: #000;
}
	
	
	.InfoHeading.mrg-t-15 {
    margin-top: 0px !important;
}
	
	.stationAddress p {
    margin-top: 0px !important;
}
	
	.review.pull-left.mrg-t-10 {
    margin-top: -5px !important;
}
	
	.favoriteAndNavigate.pull-right {
    margin-top: -16px;
}
	
	ul.cd-tabs-navigation {
    margin-top: -30px;
}
 	
	.chargingSoketType {
    margin-top: -15px;
}
	
	hr.mrg-t-10.mobile-hr {
    margin-top: 3px;
}
	
	span.Hyundai-Active-Blue-bg.pad-l-10.pad-r-10.pad-t-5.pad-b-5.Hyundai-White-color {
    margin-top: 3px;
    display: inline-block;
}
	
	.distance, .openTime, .call, .email {
    font-size: 15px;
}
	span.priceRange {
    margin-top: 9px;
    display: inline-block;
}
	
	.secondInfo.mrg-t-20 {
    margin-top: 5px;
}
	
	.ThirdInfo.mrg-t-20 {
    margin-top: 5px;
}
	
	a.btn.Hyundai-primary-btn.btn-block.btn-lg.mrg-t-50 {
    margin-top: 55px;
}
	

	
	/* ========================= LIST VIEW PAGE CSS ===========================*/
	
	
	.backButton   {
	display: block !important ;
 }
	
	.backButton img {
	display: block !important ;
    width: 25px;
    position: absolute;
    left: 15px;
    top: 34px;			
}
	
	.row.mobile-list {
    margin-top: 80px;
}
	
	h4.pull-left.stationName {
    width: 64%;
    display: inline-block;
}

 .favourite.pull-right {
    width: 35%;
}
	
	.favourite img {
    background: rgb(228, 220, 211);
    width: 27px;
    padding: 4px;
    border-radius: 50%;
    display: inline-block;
    font-size: 14px;
    margin-right: 5px;
}
	.favourite.pull-right p {
    font-size: 11px;
    font-weight: 600;
}
	/* =======================MOBILE VIEW SWITCH BUTTON=====================*/
	
	.topSwitch-button {
    width: 60%;
    margin: 0px auto;
    position: absolute;
    top: 3%;
	left: 33%;
	right: 32%;
}
.btn-default.btn-on.active{background-color: #00AAD2;color: white;}
.btn-default.btn-off.active{background-color: #00AAD2;color: white;}
	 
   

.topSwitch-button .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
    outline: none;
    outline-offset: -2px;
}

	
	.topSwitch-button .btn-default{text-shadow: none !important; background-image: none !important;  }
	
	.topSwitch-button .btn-group > .btn:last-child:not(:first-child), .btn-group > .dropdown-toggle:not(:first-child){border-radius: 0px !important;}
	
	.topSwitch-button  .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle){border-radius: 0px !important;}
	
	/*======================================MOBILE VIEW FILTER PAGE CSS====================================*/
	
	section.container.filterPage {
    margin-top: 10px;
}
	
	.filter-by-name {
    margin-top: 85px;
}
	
	.form-control {
     
    height: 35px;
     

	}
	
	.buttonGroup.mrg-b-30.mrg-t-30 {
    margin-bottom: 100px;
}
	
	 

.filterPage .topSwitch-button {
    width: 172px;
    
    margin: 0px auto;
}

.mobile-heading {
    background: #002C5F;
	padding: 10px;
	color: #fff !important;
}

.backButton-2 img {
    width: 35%;
    margin-left: 0px;
}

 

.radius {
        width: 100%;
        height: 45px;
        border: none;
        padding:5px;
        font-size: 18px;
        color: #fff;
        background-color: #00AAD2;
	border-radius: 0px;
        
      }

.buttonGroup {
    text-align: center;
}

 .connector-type {
    background: #F6F3F2;
    padding: 24px 10px 2px 22px;
    margin-top: 10px;
}
 
.connector-type .form-group {
  display: block;
  margin-bottom: 15px;
}

.connector-type .form-group input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}

.connector-type .form-group label {
  position: relative;
  cursor: pointer;
}

.connector-type .form-group label:before {
  content:'';
  -webkit-appearance: none;
  background-color: transparent;
  border: 2px solid #0079bf;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 10px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 10px;
}

.connector-type .form-group input:checked + label:after {
  content: '';
  display: block;
  position: absolute;
  top: 2px;
  left: 9px;
  width: 6px;
  height: 14px;
  border: solid #0079bf;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.form-group.Type-2-AC {
    width: 50%;
    float: left;
}


 .by-rating label {
  font-size: 3rem;
  display: flex;
  gap: 0.5rem;
}

.by-rating input[type="radio"] 
  {
  width: 2em;
  height: 2rem;
   
}

 span.ratingpoints img {
    display: inline-block;
    width: 40%;
    margin-left: 5px;
}

 .ratingslect {
    margin-top: 5px;
    margin-bottom: 5px;
}


.favourite-locations .form-group {
  display: block;
  margin-bottom: 15px;
}

.favourite-locations .form-group input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}

.favourite-locations .form-group label {
  position: relative;
  cursor: pointer;
}

.favourite-locations .form-group label:before {
  content:'';
  -webkit-appearance: none;
  background-color: transparent;
  border: 2px solid #0079bf;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 10px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 10px;
}

.favourite-locations .form-group input:checked + label:after {
  content: '';
  display: block;
  position: absolute;
  top: 2px;
  left: 9px;
  width: 6px;
  height: 14px;
  border: solid #0079bf;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

span.ratingpoints {
    vertical-align: super;
}
	
	/*============= YOUR FEEDBACK CSS =================================*/
	
	a.submit-review {margin-bottom: 20px; margin-top: 50px;}
	
	
	/* ============================ STEP ARROW CSS =======================*/

.step-arrow {
    position: fixed;
    z-index: 99999999;
    right: 0px;
    bottom: 30px;
    width: 15%;
}

.step-arrow a img {
    width: 40%;
    margin-bottom: 8px;
}
	
	.delink-account {
    position: absolute;
    bottom: 61px;
    left: 40%;
}
.book-my-next-slot {
    position: fixed;
    bottom: 52px;
    left: 3%;
}
	.receipt-page {
    height: 88vh !important;
}
	
	.receipt-page.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    padding: 2px 6px;
    line-height: 1.2em;
    vertical-align: top;
		 font-size: 12px;
     
} 
	
	span.booking-status  {
    display: inline-block;
    position: absolute;
    right: 20px;
     
    line-height: 25px;
}

	.nav > li {
    position: relative;
    display: inline-block;
    width: 32.7%;
}

.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    width: 100%;
}

.nav > li > a {
    margin: 3px;
    color: #000;
    position: relative;
    display: block;
    padding: 10px 8px;
    background: #fff;
    
} 
	
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
	
	footer.footer-navbar-mobile {
    position: fixed;
    z-index: 9999999;
    bottom: 0px;
   width: 100%;
    background: #E4DCD3;
		 -webkit-box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%);
    -moz-box-shadow: 1px 2px 12px 1px rgba(0,0,0,0.15);
    box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%);
}
	
	.webView{display: none;}
	
	.right-controller {
    position: absolute;
    height: auto;
    width: 75%;
    z-index: 9999999;
    right: 0px;
    top: 45%;
    bottom: 15%;
}
	
	
	.Mobile-view-footer-menu .btn-primary {
    background: #00AAD2;
    height: 45px;
    border: none;
    border-radius: 0px;
}
	
	 
	
	footer.footer-navbar {
    position: fixed;
    z-index: 9999999;
    bottom: 0px;
    width: 100%;
    background: #fff;
		 -webkit-box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%);
    -moz-box-shadow: 1px 2px 12px 1px rgba(0,0,0,0.15);
    box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%);
}
	
	  footer.footer-navbar .container{
		 display: flex;
	}
	
	ul.container p{margin-top: 55px; font-size: 10px;}
	
	ul.container  {
		
		list-style: none;
		text-decoration: none;
		text-align: center;
	}
	
  ul.container li.home a {
    background-position: 7px 6px;
    height: 40px;
    width: 60px;
}

ul.container li.notifications a {
    background-position: -47px 6px;
    height: 40px;
    width: 60px;
}

ul.container li.profile a {
    background-position: -100px 6px;
    height: 40px;
    width: 60px;
}

ul.container li.help a {
    background-position: -151px 6px;
    height: 40px;
    width: 60px;
}
	
  ul.container li.home a:hover {
    background-position: 7px -45px;
    height: 40px;
    width: 60px;
}

ul.container li.notifications a:hover {
    background-position: -47px -45px;
    height: 45px;
    width: 60px;
}

ul.container li.profile a:hover {
    background-position: -100px -45px;
    height: 40px;
    width: 60px;
}

ul.container li.help a:hover {
    background-position: -151px -45px;
    height: 40px;
    width: 60px;
}	


	 /*=======================MOBILE VIEW STATION INFO PANEL =============================*/ 
 

.stationAddress {
    width: 80%;
    
}
.closeButton {
    height: 35px;
}

div#MapInfoPanel {
    width: 100%;
    height: 100vh;
    background: #fff;
    z-index: 9999999999999999;
    -webkit-box-shadow: 4px 21px 8px 4px rgb(0 0 0 / 15%);
    -moz-box-shadow: 4px 21px 8px 4px rgba(0,0,0,0.15);
    box-shadow: 4px 21px 8px 4px rgb(0 0 0 / 15%);
    top: 110px;
	position:fixed;
    padding: 5px !important;
	 
     
     
   bottom :-200px;
      
}


.closeButton a img {
    position: absolute;
    width: 6%;
    top: 10px;
    right: 10px;
}

.closeButton a {
    cursor: pointer;
}

 

/* ========================= FULL RATING STAR ================================*/


 

  /* use display:inline-flex to prevent whitespace issues. alternatively, you can put all the children of .rating-group on a single line */
  .rating-group {
    display: inline-flex;
  }
  
  /* make hover effect work properly in IE */
  .rating__icon {
    pointer-events: none;
  }
  
  /* hide radio inputs */
  .rating__input {
   position: absolute !important;
   left: -9999px !important;
  }

  /* set icon padding and size */
  .rating__label {
    cursor: pointer;
    padding: 0 0.1em;
    font-size: 1.5em;
  }
  
  /* set default star color */
  .rating__icon--star {
    color: orange;
  }
  
  /* set color of none icon when unchecked */
  .rating__icon--none {
    color: #eee;
  }

  /* if none icon is checked, make it red */
  .rating__input--none:checked + .rating__label .rating__icon--none {
    color: red;
  }

  /* if any input is checked, make its following siblings grey */
  .rating__input:checked ~ .rating__label .rating__icon--star {
    color: #ddd;
  }

  /* make all stars orange on rating group hover */
  .rating-group:hover .rating__label .rating__icon--star {
    color: orange;
  }

  /* make hovered input's following siblings grey on hover */
  .rating__input:hover ~ .rating__label .rating__icon--star {
    color: #ddd;
  }
  
  /* make none icon grey on rating group hover */
  .rating-group:hover .rating__input--none:not(:hover) + .rating__label .rating__icon--none {
     color: #eee;
  }

  /* make none icon red on hover */
  .rating__input--none:hover + .rating__label .rating__icon--none {
    color: red;
  }
 
span.reviewText {
    margin-top: 5px;
    display: inline-block;
    margin-left: 10px;
	font-size: 13px;
     
}
 
  .navigateIcon {
    background: #E4DCD3;
    width: 40px;
    padding: 8px;
    border-radius: 50%;
    margin: 5px 18px;
} 

/*======================= INFO PANEL TAB SECTION ==========================*/

 .cd-tabs:after {
  content: "";
  display: table;
  clear: both;
}

.cd-tabs:after {
  /* subtle gradient layer on top right - to indicate it's possible to scroll */
  position: absolute;
  top: 0;
  right: 0;
  height: 60px;
  width: 200px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to left, white, rgba(255, 255, 255, 0));
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}

.no-cssgradients .cd-tabs::after {
  display: none;
}

.cd-tabs.is-ended::after {
  /* class added in jQuery - remove the gradient layer when it's no longer possible to scroll */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;
}

.cd-tabs nav {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: inset 0 -2px 3px rgba(255, 255, 255, 0.06);
}

.cd-tabs-navigation {
  width: 100%;
}

.cd-tabs-navigation:after {
  content: "";
  display: table;
  clear: both;
}

.cd-tabs-navigation li {
  float: left;
}

.cd-tabs-navigation a {
  position: relative;
  display: block;
  height: 60px;
  text-align: center;
  font-size: 12px !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 700;
  color: #c3c2b9;
  padding-top: 34px;
}

.cd-tabs-navigation a.selected {
  background-color: #ffffff !important;
  box-shadow: inset 0 -2px 0 #002C5F;
  color: #29324e;
}

.cd-tabs-content {
  background: #ffffff;
}

.cd-tabs-content li {
  display: none;
}

.cd-tabs-content li.selected {
  display: block;
  -webkit-animation: cd-fade-in 0.5s;
  animation: cd-fade-in 0.5s;
}

.cd-tabs-content li p {
  font-size: 0.8em;
  line-height: 12px;
  color: #000;
  margin-bottom: 0.5em;
}

/* ===============================OVERVIEW Section ========================================*/

p.soket-img img {
    width: 30px;
    margin: 0px auto;
}

p.soket-img {
    height: 40px;
}
ul.cd-tabs-content {
    margin: 0px;
    padding: 0px;
}

.SoketType.Hyundai-Light-Sand-bg {
    margin: 5px;
    padding: 5px 10px;
}

.distance img {
    width: 24px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}

.openTime img {
    width: 24px;
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
}

.call img, .email img   {
    display: inline-block;
    width: 30px;
    vertical-align: middle;
    margin-right: 5px;
}


 /* =============================== Review Section ========================================*/

.footer-section-reply {
    display: block;
    margin-top: 29px;
    position: relative;
}

	.RatingAndReply {
    position: absolute;
    width: 100%;
    bottom: -12px;
}
	
	a.review-btn {
    width: 65%;
}
	li.review-tab {
    height: 55vh;
    overflow: hidden;
    overflow-y: scroll;
}
	a.btn.Hyundai-primary-btn.btn-block.btn-lg.pull-right img {
    width: 28px !important;
    display: inline-block;
    vertical-align: middle;
}

a.Hyundai-primary-btn {
    color: #fff !important;
}
 
.userReview {
     
    border: 1px solid #e2dfdf;
} 
 

.userProfileImage.pull-left {
    width: 20%;
}

.userProfileImage.pull-left img {
    width: 35px;
    display: inline-block;
    margin-left:-5px;
    vertical-align: middle;
}

.UserName.pull-left {
    width: 80%;
}

span.chargingStstusIcon img {
    width: 20px;
    display: inline-block;
    margin-right: 5px;
}

	.cd-tabs {
    margin-top: 20px;
}

span.ConnectorStatusIcon img {
    width: 20px;
    display: inline-block;
    margin-right: 5px;
}

span.ratingIcon img {
    display: inline-block;
    width: 20px;
    margin-right: 5px;
}

span.RatingCount, span.replyText {
    font-size: 1.5rem;
     
}

span.replyIcon img {
    display: inline-block;
    width: 20px;
    vertical-align: middle;
    margin-right: 5px;
}


span.Free-Wificon img, span.RestroomsIcon img, span.CoffeeShop-icon img, span.SurveillanceIcon img, span.Game-Zone-icon img {
    display: inline-block;
    width: 28px;
    margin-right: 10px;
    vertical-align: middle;
}

span.mapIcon img {
    display: inline-block;
    width: 28px;
    vertical-align: middle;
    margin-left: 10px;
}

.McDonaldsImages div {
    padding: 5px;
}

.McDonalds p{ margin-bottom: 0px !important;}

ul.cd-tabs-content li.amenities {
    height:  55vh;
    overflow-x: hidden;
    overflow-y: scroll;
}
	
	li.photo-section {
    height: 60vh;
    overflow: hidden;
    overflow-y: scroll;
}

.station-photo img {
    display: inline-flex;
    width: 50%;
}


hr {
  margin: 0;
  margin-bottom: 0.5em;
}

.cd-tabs-navigation ul {
  margin-bottom: 0;
}
.cd-tabs-navigation ul a {
  padding-top: 3em;
  padding-bottom: 1em;
}
.cd-tabs-navigation ul li {
  padding: 0 1.5em;
}

.cd-tabs-navigation a {
  /* COMPANY: */
   
  font-size: 1.2rem;
  color: #2F2F2F;
  letter-spacing: 1px;
   
}

.cd-tabs-content h1 {
  /* Be your own customer: */
  font-family: Montserrat-Regular;
  font-size: 30px;
  color: #2F2F2F;
  letter-spacing: 0.2px;
  line-height: 40px;
  margin-bottom: 0;
  margin-top: 0;
}

.cd-tabs-content heading {
  /* Be your own customer: */
  /* font-family: Montserrat-Regular; */
  /* font-size: 30px; */
  /* color: #2F2F2F; */
  /* letter-spacing: 0.2px; */
  /* Squarespace is built: */
  font-family: Lora-Italic;
  font-size: 18px;
  color: #4A4A4A;
  letter-spacing: 0.22px;
  line-height: 34px;
  /* line-height: 40px; */
}

.cd-tabs-content .heading p {
  /* Squarespace is built: */
  font-family: Lora-Italic;
  font-size: 18px;
  color: #4A4A4A;
  letter-spacing: 0.22px;
  line-height: 34px;
}

.cd-tabs-content .text p {
  /* Sed ut perspiciatis: */
  font-family: OpenSans;
  font-size: 14px;
  color: #595959;
  letter-spacing: 0.3px;
  line-height: 24px;
  padding-left: 2em;
  padding-top: 0.5em;
}

.cd-tabs-content li {
  padding-top: 1em;
}

.cd-tabs-navigation a:hover,
.cd-tabs-navigation a:active,
.cd-tabs-navigation a:focus,
.cd-tabs-navigation a:visited {
  text-decoration: none;
}

ul.cd-tabs-navigation {
    list-style: none;
	margin: 0px;
	padding: 0px;
}

ul.cd-tabs-navigation li {
    list-style: none;
	margin: 0px 7px;
}

.cd-tabs-navigation a.selected, .cd-tabs-navigation a.selected:hover {
  color: #000;
}
	
	
	.InfoHeading.mrg-t-15 {
    margin-top: 0px !important;
}
	
	.stationAddress p {
    margin-top: 0px !important;
}
	
	.review.pull-left.mrg-t-10 {
    margin-top: -5px !important;
}
	
	.favoriteAndNavigate.pull-right {
    margin-top: -16px;
}
	
	ul.cd-tabs-navigation {
    margin-top: -30px;
}
 	
	.chargingSoketType {
    margin-top: -15px;
}
	
	hr.mrg-t-10.mobile-hr {
    margin-top: 3px;
}
	
	span.Hyundai-Active-Blue-bg.pad-l-10.pad-r-10.pad-t-5.pad-b-5.Hyundai-White-color {
    margin-top: 3px;
    display: inline-block;
}
	
	.distance, .openTime, .call, .email {
    font-size: 15px;
}
	span.priceRange {
    margin-top: 9px;
    display: inline-block;
}
	
	.secondInfo.mrg-t-20 {
    margin-top: 5px;
}
	
	.ThirdInfo.mrg-t-20 {
    margin-top: 5px;
}
	
	a.btn.Hyundai-primary-btn.btn-block.btn-lg.mrg-t-50 {
    margin-top: 55px;
}
	
	
	/* ========================= LIST VIEW PAGE CSS ===========================*/
	
	.backButton   {
	display: block !important ;
 }
	
	.backButton img {
	display: block !important ;
    width: 25px;
    position: absolute;
    left: 15px;
    top: 34px;			
}
	
	.row.mobile-list {
    margin-top: 80px;
}
	
	h4.pull-left.stationName {
    width: 64%;
    display: inline-block;
}

 .favourite.pull-right {
    width: 35%;
}
	
	.favourite img {
    background: rgb(228, 220, 211);
    width: 27px;
    padding: 4px;
    border-radius: 50%;
    display: inline-block;
    font-size: 14px;
    margin-right: 5px;
}
	.favourite.pull-right p {
    font-size: 11px;
    font-weight: 600;
}
	
	/* =======================MOBILE VIEW SWITCH BUTTON=====================*/
	
	.topSwitch-button {
    width: 78%;
    margin: 0px auto;
    position: absolute;
    top: 3%;
	left: 22%;
	right: 21%;
}
.btn-default.btn-on.active{background-color: #00AAD2;color: white;}
.btn-default.btn-off.active{background-color: #00AAD2;color: white;}
	 
   

.topSwitch-button .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
    outline: none;
    outline-offset: -2px;
}

	
	.topSwitch-button .btn-default{text-shadow: none !important; background-image: none !important;  }
	
	.topSwitch-button .btn-group > .btn:last-child:not(:first-child), .btn-group > .dropdown-toggle:not(:first-child){border-radius: 0px !important;}
	
	.topSwitch-button  .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle){border-radius: 0px !important;}
	
	/*======================================MOBILE VIEW FILTER PAGE CSS====================================*/
	
	section.container.filterPage {
    margin-top: 10px;
}
	
	.filter-by-name {
    margin-top: 85px;
}
	
	.form-control {
     
    height: 35px;
     

	}
	
	.buttonGroup.mrg-b-30.mrg-t-30 {
    margin-bottom: 100px;
}
	
	 

.filterPage .topSwitch-button {
    width: 172px;
    
    margin: 0px auto;
}

.mobile-heading {
    background: #002C5F;
	padding: 10px;
	color: #fff !important;
}

.backButton-2 img {
    width: 65%;
    margin-left: 0px;
}

 

.radius {
        width: 100%;
        height: 45px;
        border: none;
        padding:5px;
        font-size: 18px;
        color: #fff;
        background-color: #00AAD2;
	border-radius: 0px;
        
      }

.buttonGroup {
    text-align: center;
}

 .connector-type {
    background: #F6F3F2;
    padding: 24px 10px 2px 22px;
    margin-top: 10px;
}
 
.connector-type .form-group {
  display: block;
  margin-bottom: 15px;
}

.connector-type .form-group input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}

.connector-type .form-group label {
  position: relative;
  cursor: pointer;
}

.connector-type .form-group label:before {
  content:'';
  -webkit-appearance: none;
  background-color: transparent;
  border: 2px solid #0079bf;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 10px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 10px;
}

.connector-type .form-group input:checked + label:after {
  content: '';
  display: block;
  position: absolute;
  top: 2px;
  left: 9px;
  width: 6px;
  height: 14px;
  border: solid #0079bf;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.form-group.Type-2-AC {
    width: 50%;
    float: left;
}


 .by-rating label {
  font-size: 3rem;
  display: flex;
  gap: 0.5rem;
}

.by-rating input[type="radio"] 
  {
  width: 2em;
  height: 2rem;
   
}

 span.ratingpoints img {
    display: inline-block;
    width: 60%;
    margin-left: 5px;
}

 .ratingslect {
    margin-top: 5px;
    margin-bottom: 5px;
}


.favourite-locations .form-group {
  display: block;
  margin-bottom: 15px;
}

.favourite-locations .form-group input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}

.favourite-locations .form-group label {
  position: relative;
  cursor: pointer;
}

.favourite-locations .form-group label:before {
  content:'';
  -webkit-appearance: none;
  background-color: transparent;
  border: 2px solid #0079bf;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 10px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 10px;
}

.favourite-locations .form-group input:checked + label:after {
  content: '';
  display: block;
  position: absolute;
  top: 2px;
  left: 9px;
  width: 6px;
  height: 14px;
  border: solid #0079bf;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

span.ratingpoints {
    vertical-align: super;
}
	
	/* ============================ STEP ARROW CSS Prashant design =======================*/

.step-arrow {
    position: fixed;
    z-index: 99999999;
    right: 0px;
    bottom: 30px;
    width: 15%;
}

.step-arrow a img {
    width: 75%;
    margin-bottom: 8px;
}
	
	.delink-account {
    position: absolute;
    bottom: 61px;
    left: 36%;
}
	.book-my-next-slot {
    position: fixed;
    bottom: 52px;
    left: 3%;
}
	
	.receipt-page {
    height: 87vh !important;
}
	.receipt-page.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    padding: 2px 6px;
    line-height: 1.2em;
    vertical-align: top;
		 font-size: 12px;
     
} 
	span.booking-status  {
    display: inline-block;
    position: absolute;
    right: 20px;
     
    line-height: 25px;
}
	
	.nav > li {
    position: relative;
    display: inline-block;
    width: 32%;
}

.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    width: 100%;
}

.nav > li > a {
    margin: 3px;
    color: #000;
    position: relative;
    display: block;
    padding: 10px 8px;
    background: #fff;
    
}

	/*========================================== Monitor page CSS ================================*/

.pad-a-10.monitor-page {
    height: auto !important;
}

img.live-charging-img {
    width: 43%;
    vertical-align: middle;
    float: right;
}

span.Hyundai-Active-Blue-color.live-percentage {
    display: inline-block;
    margin-right:  0px;
    margin-top: 24px;
	font-size: 4.5rem !important;
	margin-left: 25px;
}

.amenities-section ul.amenities {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

 ul.amenities li {
    display: inline-block;
    margin: 10px;
    width: 9%;
}

ul.amenities li img {
    
    width: 100%;
}
}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 375px) {
	 
	.webView{display: none;}
	 
	.right-controller {
    position: absolute;
    height: auto;
    width: 75%;
    z-index: 9999999;
    right: 0px;
    top: 45%;
    bottom: 15%;
}
	
   
 
	
	.Mobile-view-footer-menu .btn-primary {
    background: #00AAD2;
    height: 45px;
    border: none;
    border-radius: 0px;
}
	
	 
	
	footer.footer-navbar {
    position: fixed;
    z-index: 9999999;
    bottom: 0px;
    width: 100%;
    background: #fff;
		 -webkit-box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%);
    -moz-box-shadow: 1px 2px 12px 1px rgba(0,0,0,0.15);
    box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%);
}
	
footer.footer-navbar .container{
		 display: flex;
	} 
	
	ul.container p{margin-top: 45px; font-size: 10px;}
	
	ul.container  {
		
		list-style: none;
		text-decoration: none;
		text-align: center;
	}
	
	ul.container li a  {
		
		 display: inline-block;
		text-decoration: none;
		color: #000;
		font-size: 1.5rem;
		background: url("../images/footer-sprite-menu.png") no-repeat;
		 
	}
	
	  ul.container li.home a {
    background-position: 7px 6px;
    height: 40px;
    width: 60px;
}

ul.container li.notifications a {
    background-position: -47px 6px;
    height: 40px;
    width: 60px;
}

ul.container li.profile a {
    background-position: -100px 6px;
    height: 40px;
    width: 60px;
}

ul.container li.help a   {
    background-position: -151px 6px;
    height: 40px;
    width: 60px;
}
	
	
	  ul.container li.home a:hover {
    background-position: 7px -45px;
    height: 40px;
    width: 60px;
}

ul.container li.notifications a:hover {
    background-position: -47px -45px;
    height: 45px;
    width: 60px;
}

ul.container li.profile a:hover {
    background-position: -100px -45px;
    height: 40px;
    width: 60px;
}

ul.container li.help a:hover {
    background-position: -151px -45px;
    height: 40px;
    width: 60px;
}
	
	
	  ul.container li.home a .active {
    background-position: 7px -45px;
    height: 40px;
    width: 60px;
}

ul.container li.notifications a.active {
    background-position: -47px -45px;
    height: 45px;
    width: 60px;
}

ul.container li.profile a.active {
    background-position: -100px -45px;
    height: 40px;
    width: 60px;
}

ul.container li.help a.active {
    background-position: -151px -45px;
    height: 40px;
    width: 60px;
}
 
 
	/* =========================== NEW MOBILE FOOTER ======================================*/
	
	footer.footer-navbar-mobile {
    position: fixed;
    z-index: 9999999;
    bottom: 0px;
   width: 100%;
    background: #E4DCD3;
		 -webkit-box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%);
    -moz-box-shadow: 1px 2px 12px 1px rgba(0,0,0,0.15);
    box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%);
}
	
footer.footer-navbar .container-mob{
		 display: flex;
	}
	
	.container-mob{list-style: none; margin: 0px; padding: 15px 25px 15px 5px;}
	
	ul.container-mob li a img {
    width: 25px;
}
	
	
	/*=======================MOBILE VIEW STATION INFO PANEL =============================*/ 
 

.stationAddress {
    width: 80%;
    
}
.closeButton {
    height: 35px;
}

div#MapInfoPanel {
    width: 100%;
    height: 100vh;
    background: #fff;
    z-index: 9999999999999999;
    -webkit-box-shadow: 4px 21px 8px 4px rgb(0 0 0 / 15%);
    -moz-box-shadow: 4px 21px 8px 4px rgba(0,0,0,0.15);
    box-shadow: 4px 21px 8px 4px rgb(0 0 0 / 15%);
    top: 76px;
	position:fixed;
    padding: 5px !important;
      
}


.closeButton a img {
    position: absolute;
    width: 6%;
    top: 10px;
    right: 10px;
}

.closeButton a {
    cursor: pointer;
}

 

/* ========================= FULL RATING STAR ================================*/


 

  /* use display:inline-flex to prevent whitespace issues. alternatively, you can put all the children of .rating-group on a single line */
  .rating-group {
    display: inline-flex;
  }
  
  /* make hover effect work properly in IE */
  .rating__icon {
    pointer-events: none;
  }
  
  /* hide radio inputs */
  .rating__input {
   position: absolute !important;
   left: -9999px !important;
  }

  /* set icon padding and size */
  .rating__label {
    cursor: pointer;
    padding: 0 0.1em;
    font-size: 1.5rem;
  }
  
  /* set default star color */
  .rating__icon--star {
    color: orange;
  }
  
  /* set color of none icon when unchecked */
  .rating__icon--none {
    color: #eee;
  }

  /* if none icon is checked, make it red */
  .rating__input--none:checked + .rating__label .rating__icon--none {
    color: red;
  }

  /* if any input is checked, make its following siblings grey */
  .rating__input:checked ~ .rating__label .rating__icon--star {
    color: #ddd;
  }

  /* make all stars orange on rating group hover */
  .rating-group:hover .rating__label .rating__icon--star {
    color: orange;
  }

  /* make hovered input's following siblings grey on hover */
  .rating__input:hover ~ .rating__label .rating__icon--star {
    color: #ddd;
  }
  
  /* make none icon grey on rating group hover */
  .rating-group:hover .rating__input--none:not(:hover) + .rating__label .rating__icon--none {
     color: #eee;
  }

  /* make none icon red on hover */
  .rating__input--none:hover + .rating__label .rating__icon--none {
    color: red;
  }
 
span.reviewText {
    margin-top: 2px;
    display: inline-block;
    margin-left: 10px;
	font-size: 11px;
     
}
 
  .navigateIcon {
    background: #E4DCD3;
    width: 35px;
    padding: 6px;
    border-radius: 50%;
    margin: 5px 13px;
} 

/*======================= INFO PANEL TAB SECTION ==========================*/

 .cd-tabs:after {
  content: "";
  display: table;
  clear: both;
}

.cd-tabs:after {
  /* subtle gradient layer on top right - to indicate it's possible to scroll */
  position: absolute;
  top: 0;
  right: 0;
  height: 60px;
  width: 200px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to left, white, rgba(255, 255, 255, 0));
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}

.no-cssgradients .cd-tabs::after {
  display: none;
}

.cd-tabs.is-ended::after {
  /* class added in jQuery - remove the gradient layer when it's no longer possible to scroll */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;
}

.cd-tabs nav {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: inset 0 -2px 3px rgba(255, 255, 255, 0.06);
}

.cd-tabs-navigation {
  width: 100%;
}

.cd-tabs-navigation:after {
  content: "";
  display: table;
  clear: both;
}

.cd-tabs-navigation li {
  float: left;
}

.cd-tabs-navigation a {
  position: relative;
  display: block;
  height: 60px;
  text-align: center;
  font-size: 12px !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 700;
  color: #c3c2b9;
  padding-top: 34px;
}

.cd-tabs-navigation a.selected {
  background-color: #ffffff !important;
  box-shadow: inset 0 -2px 0 #002C5F;
  color: #29324e;
}

.cd-tabs-content {
  background: #ffffff;
}

.cd-tabs-content li {
  display: none;
}

.cd-tabs-content li.selected {
  display: block;
  -webkit-animation: cd-fade-in 0.5s;
  animation: cd-fade-in 0.5s;
}

.cd-tabs-content li p {
  font-size: 0.8em;
  line-height: 12px;
  color: #000;
  margin-bottom: 0.5em;
}

/* ===============================OVERVIEW Section ========================================*/

p.soket-img img {
    width: 30px;
    margin: 0px auto;
}

p.soket-img {
    height: 40px;
}
ul.cd-tabs-content {
    margin: 0px;
    padding: 0px;
}

.SoketType.Hyundai-Light-Sand-bg {
    margin: 5px;
    padding: 5px 10px;
}

.distance img {
    width: 24px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}

.openTime img {
    width: 24px;
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
}

.call img, .email img   {
    display: inline-block;
    width: 30px;
    vertical-align: middle;
    margin-right: 5px;
}


 /* =============================== Review Section ========================================*/

.footer-section-reply {
    display: block;
    margin-top: 29px;
    position: relative;
}

	.RatingAndReply {
    position: absolute;
    width: 100%;
    bottom: -12px;
}
	
	a.review-btn {
    width: 65%;
}
	li.review-tab {
    height: 55vh;
    overflow: hidden;
    overflow-y: scroll;
}
	a.btn.Hyundai-primary-btn.btn-block.btn-lg.pull-right img {
    width: 28px !important;
    display: inline-block;
    vertical-align: middle;
}

a.Hyundai-primary-btn {
    color: #fff !important;
}
 
.userReview {
     
    border: 1px solid #e2dfdf;
} 
 

.userProfileImage.pull-left {
    width: 20%;
}

.userProfileImage.pull-left img {
    width: 35px;
    display: inline-block;
    margin-left:-5px;
    vertical-align: middle;
}

.UserName.pull-left {
    width: 80%;
}

span.chargingStstusIcon img {
    width: 20px;
    display: inline-block;
    margin-right: 5px;
}

	.cd-tabs {
    margin-top: 20px;
}

span.ConnectorStatusIcon img {
    width: 20px;
    display: inline-block;
    margin-right: 5px;
}

span.ratingIcon img {
    display: inline-block;
    width: 20px;
    margin-right: 5px;
}

span.RatingCount, span.replyText {
    font-size: 1.5rem;
     
}

span.replyIcon img {
    display: inline-block;
    width: 20px;
    vertical-align: middle;
    margin-right: 5px;
}


span.Free-Wificon img, span.RestroomsIcon img, span.CoffeeShop-icon img, span.SurveillanceIcon img, span.Game-Zone-icon img {
    display: inline-block;
    width: 28px;
    margin-right: 10px;
    vertical-align: middle;
}

span.mapIcon img {
    display: inline-block;
    width: 28px;
    vertical-align: middle;
    margin-left: 10px;
}

.McDonaldsImages div {
    padding: 5px;
}

.McDonalds p{ margin-bottom: 0px !important;}

ul.cd-tabs-content li.amenities {
    height:  55vh;
    overflow-x: hidden;
    overflow-y: scroll;
}
	
	li.photo-section {
    height: 60vh;
    overflow: hidden;
    overflow-y: scroll;
}

.station-photo img {
    display: inline-flex;
    width: 50%;
}


hr {
  margin: 0;
  margin-bottom: 0.5em;
}

.cd-tabs-navigation ul {
  margin-bottom: 0;
}
.cd-tabs-navigation ul a {
  padding-top: 3em;
  padding-bottom: 1em;
}
.cd-tabs-navigation ul li {
  padding: 0 1.5em;
}

.cd-tabs-navigation a {
  /* COMPANY: */
   
  font-size: 1.2rem;
  color: #2F2F2F;
  letter-spacing: 1px;
   
}

.cd-tabs-content h1 {
  /* Be your own customer: */
  font-family: Montserrat-Regular;
  font-size: 30px;
  color: #2F2F2F;
  letter-spacing: 0.2px;
  line-height: 40px;
  margin-bottom: 0;
  margin-top: 0;
}

.cd-tabs-content heading {
  /* Be your own customer: */
  /* font-family: Montserrat-Regular; */
  /* font-size: 30px; */
  /* color: #2F2F2F; */
  /* letter-spacing: 0.2px; */
  /* Squarespace is built: */
  font-family: Lora-Italic;
  font-size: 18px;
  color: #4A4A4A;
  letter-spacing: 0.22px;
  line-height: 34px;
  /* line-height: 40px; */
}

.cd-tabs-content .heading p {
  /* Squarespace is built: */
  font-family: Lora-Italic;
  font-size: 18px;
  color: #4A4A4A;
  letter-spacing: 0.22px;
  line-height: 34px;
}

.cd-tabs-content .text p {
  /* Sed ut perspiciatis: */
  font-family: OpenSans;
  font-size: 14px;
  color: #595959;
  letter-spacing: 0.3px;
  line-height: 24px;
  padding-left: 2em;
  padding-top: 0.5em;
}

.cd-tabs-content li {
  padding-top: 1em;
}

.cd-tabs-navigation a:hover,
.cd-tabs-navigation a:active,
.cd-tabs-navigation a:focus,
.cd-tabs-navigation a:visited {
  text-decoration: none;
}

ul.cd-tabs-navigation {
    list-style: none;
	margin: 0px;
	padding: 0px;
}

ul.cd-tabs-navigation li {
    list-style: none;
	margin: 0px 7px;
}

.cd-tabs-navigation a.selected, .cd-tabs-navigation a.selected:hover {
  color: #000;
}
	
	
	.InfoHeading.mrg-t-15 {
    margin-top: 0px !important;
}
	
	.stationAddress p {
    margin-top: 0px !important;
}
	
	.review.pull-left.mrg-t-10 {
    margin-top: -5px !important;
}
	
	.favoriteAndNavigate.pull-right {
    margin-top: -16px;
}
	
	ul.cd-tabs-navigation {
    margin-top: -30px;
}
 	
	.chargingSoketType {
    margin-top: -15px;
}
	
	hr.mrg-t-10.mobile-hr {
    margin-top: 3px;
}
	
	span.Hyundai-Active-Blue-bg.pad-l-10.pad-r-10.pad-t-5.pad-b-5.Hyundai-White-color {
    margin-top: 3px;
    display: inline-block;
}
	
	.distance, .openTime, .call, .email {
    font-size: 15px;
}
	span.priceRange {
    margin-top: 9px;
    display: inline-block;
}
	
	.secondInfo.mrg-t-20 {
    margin-top: 5px;
}
	
	.ThirdInfo.mrg-t-20 {
    margin-top: 5px;
}
	
	a.btn.Hyundai-primary-btn.btn-block.btn-lg.mrg-t-50 {
    margin-top: 55px;
}
	
	
	/* ========================= LIST VIEW PAGE CSS ===========================*/
	
	.backButton   {
	display: block !important ;
 }
	
	.backButton img {
	display: block !important ;
    width: 25px;
    position: absolute;
    left: 15px;
    top: 34px;			
}
	
	.row.mobile-list {
    margin-top: 80px;
}
	
	h4.pull-left.stationName {
    width: 64%;
    display: inline-block;
}

 .favourite.pull-right {
    width: 35%;
}
	
	.favourite img {
    background: rgb(228, 220, 211);
    width: 27px;
    padding: 4px;
    border-radius: 50%;
    display: inline-block;
    font-size: 14px;
    margin-right: 5px;
}
	.favourite.pull-right p {
    font-size: 11px;
    font-weight: 600;
}
	
	
	/* =======================MOBILE VIEW SWITCH BUTTON=====================*/
	
	.topSwitch-button {
    width: 78%;
    margin: 0px auto;
    position: absolute;
    top: 3%;
	left: 21%;
	right: 20%;
}
.btn-default.btn-on.active{background-color: #00AAD2;color: white;}
.btn-default.btn-off.active{background-color: #00AAD2;color: white;}
	 

.topSwitch-button .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
    outline: none;
    outline-offset: -2px;
}

	
	.topSwitch-button .btn-default{text-shadow: none !important; background-image: none !important;  }
	
	.topSwitch-button .btn-group > .btn:last-child:not(:first-child), .btn-group > .dropdown-toggle:not(:first-child){border-radius: 0px !important;}
	
	.topSwitch-button  .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle){border-radius: 0px !important;}
	
	
	/*======================================MOBILE VIEW FILTER PAGE CSS====================================*/
	
	section.container.filterPage {
    margin-top: 10px;
}
	
	.filter-by-name {
    margin-top: 85px;
}
	
	.form-control {
     
    height: 35px;
     

	}
	
	.buttonGroup.mrg-b-30.mrg-t-30 {
    margin-bottom: 100px;
}
	
	 

.filterPage .topSwitch-button {
    width: 172px;
    
    margin: 0px auto;
}

.mobile-heading {
    background: #002C5F;
	padding: 10px;
	color: #fff !important;
}

.backButton-2 img {
    width: 80%;
    margin-left: 0px;
}

 

.radius {
        width: 100%;
        height: 45px;
        border: none;
        padding:5px;
        font-size: 18px;
        color: #fff;
        background-color: #00AAD2;
	border-radius: 0px;
        
      }

.buttonGroup {
    text-align: center;
}

 .connector-type {
    background: #F6F3F2;
    padding: 24px 10px 2px 22px;
    margin-top: 10px;
}
 
.connector-type .form-group {
  display: block;
  margin-bottom: 15px;
}

.connector-type .form-group input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}

.connector-type .form-group label {
  position: relative;
  cursor: pointer;
}

.connector-type .form-group label:before {
  content:'';
  -webkit-appearance: none;
  background-color: transparent;
  border: 2px solid #0079bf;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 10px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 10px;
}

.connector-type .form-group input:checked + label:after {
  content: '';
  display: block;
  position: absolute;
  top: 2px;
  left: 9px;
  width: 6px;
  height: 14px;
  border: solid #0079bf;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.form-group.Type-2-AC {
    width: 50%;
    float: left;
}


 .by-rating label {
  font-size: 3rem;
  display: flex;
  gap: 0.5rem;
}

.by-rating input[type="radio"] 
  {
  width: 2em;
  height: 2rem;
   
}

 span.ratingpoints img {
    display: inline-block;
    width: 60%;
    margin-left: 5px;
}

 .ratingslect {
    margin-top: 5px;
    margin-bottom: 5px;
}


.favourite-locations .form-group {
  display: block;
  margin-bottom: 15px;
}

.favourite-locations .form-group input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}

.favourite-locations .form-group label {
  position: relative;
  cursor: pointer;
}

.favourite-locations .form-group label:before {
  content:'';
  -webkit-appearance: none;
  background-color: transparent;
  border: 2px solid #0079bf;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 10px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 10px;
}

.favourite-locations .form-group input:checked + label:after {
  content: '';
  display: block;
  position: absolute;
  top: 2px;
  left: 9px;
  width: 6px;
  height: 14px;
  border: solid #0079bf;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

span.ratingpoints {
    vertical-align: super;
}
	
	/*============= YOUR FEEDBACK CSS =================================*/
	
	a.submit-review {margin-bottom: 20px; margin-top: 50px;}
	
	/* ============================ STEP ARROW CSS Prashant design =======================*/

.step-arrow {
    position: fixed;
    z-index: 99999999;
    right: 0px;
    bottom: 30px;
    width: 15%;
}

.step-arrow a img {
    width: 75%;
    margin-bottom: 8px;
}
	
	.delink-account {
    position: absolute;
    bottom: 61px;
    left: 36%;
}
	.book-my-next-slot {
    position: fixed;
    bottom: 52px;
    left: 3%;
}
	.receipt-page {
    height: 85vh !important;
}
	
	.receipt-page.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    padding: 2px 6px;
    line-height: 1.2em;
    vertical-align: top;
		 font-size: 12px;
     
} 
	span.booking-status  {
    display: inline-block;
    position: absolute;
    right: 20px;
    
    line-height: 25px;
}
	
	.nav > li {
    position: relative;
    display: inline-block;
    width: 32%;
}

.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    width: 100%;
}

.nav > li > a {
    margin: 3px;
    color: #000;
    position: relative;
    display: block;
    padding: 10px 8px;
    background: #fff;
    
}
	
	/*========================================== Monitor page CSS ================================*/

.pad-a-10.monitor-page {
    height: auto !important;
}

img.live-charging-img {
    width: 43%;
    vertical-align: middle;
    float: right;
}

span.Hyundai-Active-Blue-color.live-percentage {
    display: inline-block;
    margin-right:  0px;
    margin-top: 24px;
	font-size: 4.5rem !important;
	margin-left: 25px;
}

.amenities-section ul.amenities {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

 ul.amenities li {
    display: inline-block;
    margin: 5px;
    width: 11%;
}

ul.amenities li img {
    
    width: 100%;
}

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {
	 
	.webView{display: none;}
	 
	.right-controller {
    position: absolute;
    height: auto;
    width: 82%;
    z-index: 9999999;
    right: 0px;
    top: 45%;
    bottom: 15%;
}
	 	
	.Mobile-view-footer-menu .btn-primary {
    background: #00AAD2;
    height: 45px;
    border: none;
    border-radius: 0px;
}
 	
	footer.footer-navbar {
    position: fixed;
    z-index: 9999999;
    bottom: 0px;
    width: 100%;
    background: #fff;
		 -webkit-box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%);
    -moz-box-shadow: 1px 2px 12px 1px rgba(0,0,0,0.15);
    box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%);
}
	
footer.footer-navbar .container{
		 display: flex;
	} 
	
	ul.container p{margin-top: 45px; font-size: 10px;}
	
	ul.container  {
		
		list-style: none;
		text-decoration: none;
		text-align: center;
	}
	
	ul.container li a  {
		
		 display: inline-block;
		text-decoration: none;
		color: #000;
		font-size: 1.5rem;
		background: url("../images/footer-sprite-menu.png") no-repeat;
		 
	}
	
	  ul.container li.home a {
    background-position: 7px 6px;
    height: 40px;
    width: 60px;
}

ul.container li.notifications a {
    background-position: -47px 6px;
    height: 40px;
    width: 60px;
}

ul.container li.profile a {
    background-position: -100px 6px;
    height: 40px;
    width: 60px;
}

ul.container li.help a   {
    background-position: -151px 6px;
    height: 40px;
    width: 60px;
}
	
	
	  ul.container li.home a:hover {
    background-position: 7px -45px;
    height: 40px;
    width: 60px;
}

ul.container li.notifications a:hover {
    background-position: -47px -45px;
    height: 45px;
    width: 60px;
}

ul.container li.profile a:hover {
    background-position: -100px -45px;
    height: 40px;
    width: 60px;
}

ul.container li.help a:hover {
    background-position: -151px -45px;
    height: 40px;
    width: 60px;
}
	
	
	  ul.container li.home a .active {
    background-position: 7px -45px;
    height: 40px;
    width: 60px;
}

ul.container li.notifications a.active {
    background-position: -47px -45px;
    height: 45px;
    width: 60px;
}

ul.container li.profile a.active {
    background-position: -100px -45px;
    height: 40px;
    width: 60px;
}

ul.container li.help a.active {
    background-position: -151px -45px;
    height: 40px;
    width: 60px;
}
 
 
	
	/* =========================== NEW MOBILE FOOTER ======================================*/
	
	footer.footer-navbar-mobile {
    position: fixed;
    z-index: 9999999;
    bottom: 0px;
    width: 100%;
    background: #E4DCD3;
		 -webkit-box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%);
    -moz-box-shadow: 1px 2px 12px 1px rgba(0,0,0,0.15);
    box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%);
}
	
footer.footer-navbar .container-mob{
		 display: flex;
	}
	
	.container-mob{list-style: none; margin: 0px; padding: 15px 25px 15px 5px;}
	
	ul.container-mob li a img {
    width: 25px;
}
	/*=======================MOBILE VIEW STATION INFO PANEL =============================*/ 
 

.stationAddress {
    width: 80%;
    
}
.closeButton {
    height: 35px;
}

div#MapInfoPanel {
    width: 100%;
    height: 100vh;
    background: #fff;
    z-index: 9999999999999999;
    -webkit-box-shadow: 4px 21px 8px 4px rgb(0 0 0 / 15%);
    -moz-box-shadow: 4px 21px 8px 4px rgba(0,0,0,0.15);
    box-shadow: 4px 21px 8px 4px rgb(0 0 0 / 15%);
    top: 76px;
	position:fixed;
    padding: 5px !important;
      
}


.closeButton a img {
    position: absolute;
    width: 6%;
    top: 10px;
    right: 10px;
}

.closeButton a {
    cursor: pointer;
}

 

/* ========================= FULL RATING STAR ================================*/


 

  /* use display:inline-flex to prevent whitespace issues. alternatively, you can put all the children of .rating-group on a single line */

  .rating-group {
    display: inline-flex;
  }
  
  /* make hover effect work properly in IE */
  .rating__icon {
    pointer-events: none;
  }
  
  /* hide radio inputs */
  .rating__input {
   position: absolute !important;
   left: -9999px !important;
  }

  /* set icon padding and size */
  .rating__label {
    cursor: pointer;
    padding: 0 0.1em;
    font-size: 1.5rem;
  }
  
  /* set default star color */
  .rating__icon--star {
    color: orange;
  }
  
  /* set color of none icon when unchecked */
  .rating__icon--none {
    color: #eee;
  }

  /* if none icon is checked, make it red */
  .rating__input--none:checked + .rating__label .rating__icon--none {
    color: red;
  }

  /* if any input is checked, make its following siblings grey */
  .rating__input:checked ~ .rating__label .rating__icon--star {
    color: #ddd;
  }

  /* make all stars orange on rating group hover */
  .rating-group:hover .rating__label .rating__icon--star {
    color: orange;
  }

  /* make hovered input's following siblings grey on hover */
  .rating__input:hover ~ .rating__label .rating__icon--star {
    color: #ddd;
  }
  
  /* make none icon grey on rating group hover */
  .rating-group:hover .rating__input--none:not(:hover) + .rating__label .rating__icon--none {
     color: #eee;
  }

  /* make none icon red on hover */
  .rating__input--none:hover + .rating__label .rating__icon--none {
    color: red;
  }
 
span.reviewText {
    margin-top: 2px;
    display: inline-block;
    margin-left: 10px;
	font-size: 11px;
     
}
 
  .navigateIcon {
    background: #E4DCD3;
    width: 35px;
    padding: 6px;
    border-radius: 50%;
    margin: 5px 13px;
} 

/*======================= INFO PANEL TAB SECTION ==========================*/

 .cd-tabs:after {
  content: "";
  display: table;
  clear: both;
}

.cd-tabs:after {
  /* subtle gradient layer on top right - to indicate it's possible to scroll */
  position: absolute;
  top: 0;
  right: 0;
  height: 60px;
  width: 200px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to left, white, rgba(255, 255, 255, 0));
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}

.no-cssgradients .cd-tabs::after {
  display: none;
}

.cd-tabs.is-ended::after {
  /* class added in jQuery - remove the gradient layer when it's no longer possible to scroll */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;
}

.cd-tabs nav {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: inset 0 -2px 3px rgba(255, 255, 255, 0.06);
}

.cd-tabs-navigation {
  width: 100%;
}

.cd-tabs-navigation:after {
  content: "";
  display: table;
  clear: both;
}

.cd-tabs-navigation li {
  float: left;
}

.cd-tabs-navigation a {
  position: relative;
  display: block;
  height: 60px;
  text-align: center;
  font-size: 12px !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 700;
  color: #c3c2b9;
  padding-top: 34px;
}

.cd-tabs-navigation a.selected {
  background-color: #ffffff !important;
  box-shadow: inset 0 -2px 0 #002C5F;
  color: #29324e;
}

.cd-tabs-content {
  background: #ffffff;
}

.cd-tabs-content li {
  display: none;
}

.cd-tabs-content li.selected {
  display: block;
  -webkit-animation: cd-fade-in 0.5s;
  animation: cd-fade-in 0.5s;
}

.cd-tabs-content li p {
  font-size: 0.8em;
  line-height: 12px;
  color: #000;
  margin-bottom: 0.5em;
}

/* ===============================OVERVIEW Section ========================================*/

p.soket-img img {
    width: 30px;
    margin: 0px auto;
}

p.soket-img {
    height: 40px;
}
ul.cd-tabs-content {
    margin: 0px;
    padding: 0px;
}

.SoketType.Hyundai-Light-Sand-bg {
    margin: 5px;
    padding: 5px 10px;
}

.distance img {
    width: 24px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}

.openTime img {
    width: 24px;
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
}

.call img, .email img   {
    display: inline-block;
    width: 30px;
    vertical-align: middle;
    margin-right: 5px;
}


/* =============================== Review Section ========================================*/

.footer-section-reply {
    display: block;
    margin-top: 29px;
    position: relative;
}

	.RatingAndReply {
    position: absolute;
    width: 100%;
    bottom: -12px;
}
	
	a.review-btn {
    width: 65%;
}
	li.review-tab {
    height: 280px;
    
    overflow: hidden;
    overflow-y: scroll;
}
	a.btn.Hyundai-primary-btn.btn-block.btn-lg.pull-right img {
    width: 28px !important;
    display: inline-block;
    vertical-align: middle;
}

a.Hyundai-primary-btn {
    color: #fff !important;
}
 
.userReview {
     
    border: 1px solid #e2dfdf;
} 
 

.userProfileImage.pull-left {
    width: 20%;
}

.userProfileImage.pull-left img {
    width: 35px;
    display: inline-block;
    margin-left:-5px;
    vertical-align: middle;
}

.UserName.pull-left {
    width: 80%;
}

span.chargingStstusIcon img {
    width: 20px;
    display: inline-block;
    margin-right: 5px;
}

	.cd-tabs {
    margin-top: 20px;
}

span.ConnectorStatusIcon img {
    width: 20px;
    display: inline-block;
    margin-right: 5px;
}

span.ratingIcon img {
    display: inline-block;
    width: 20px;
    margin-right: 5px;
}

span.RatingCount, span.replyText {
    font-size: 1.5rem;
     
}

span.replyIcon img {
    display: inline-block;
    width: 20px;
    vertical-align: middle;
    margin-right: 5px;
}


span.Free-Wificon img, span.RestroomsIcon img, span.CoffeeShop-icon img, span.SurveillanceIcon img, span.Game-Zone-icon img {
    display: inline-block;
    width: 28px;
    margin-right: 10px;
    vertical-align: middle;
}

span.mapIcon img {
    display: inline-block;
    width: 28px;
    vertical-align: middle;
    margin-left: 10px;
}

.McDonaldsImages div {
    padding: 5px;
}

.McDonalds p{ margin-bottom: 0px !important;}

ul.cd-tabs-content li.amenities {
    height:  45vh;
    overflow-x: hidden;
    overflow-y: scroll;
}
	
	li.photo-section {
    height: 45vh;
    overflow: hidden;
    overflow-y: scroll;
}

.station-photo img {
    display: inline-flex;
    width: 50%;
}


hr {
  margin: 0;
  margin-bottom: 0.5em;
}

.cd-tabs-navigation ul {
  margin-bottom: 0;
}
.cd-tabs-navigation ul a {
  padding-top: 3em;
  padding-bottom: 1em;
}
.cd-tabs-navigation ul li {
  padding: 0 1.5em;
}

.cd-tabs-navigation a {
  /* COMPANY: */
   
  font-size: 1.2rem;
  color: #2F2F2F;
  letter-spacing: 1px;
   
}

.cd-tabs-content h1 {
  /* Be your own customer: */
  font-family: Montserrat-Regular;
  font-size: 30px;
  color: #2F2F2F;
  letter-spacing: 0.2px;
  line-height: 40px;
  margin-bottom: 0;
  margin-top: 0;
}

.cd-tabs-content heading {
  /* Be your own customer: */
  /* font-family: Montserrat-Regular; */
  /* font-size: 30px; */
  /* color: #2F2F2F; */
  /* letter-spacing: 0.2px; */
  /* Squarespace is built: */
  font-family: Lora-Italic;
  font-size: 18px;
  color: #4A4A4A;
  letter-spacing: 0.22px;
  line-height: 34px;
  /* line-height: 40px; */
}

.cd-tabs-content .heading p {
  /* Squarespace is built: */
  font-family: Lora-Italic;
  font-size: 18px;
  color: #4A4A4A;
  letter-spacing: 0.22px;
  line-height: 34px;
}

.cd-tabs-content .text p {
  /* Sed ut perspiciatis: */
  font-family: OpenSans;
  font-size: 14px;
  color: #595959;
  letter-spacing: 0.3px;
  line-height: 24px;
  padding-left: 2em;
  padding-top: 0.5em;
}

.cd-tabs-content li {
  padding-top: 1em;
}

.cd-tabs-navigation a:hover,
.cd-tabs-navigation a:active,
.cd-tabs-navigation a:focus,
.cd-tabs-navigation a:visited {
  text-decoration: none;
}

ul.cd-tabs-navigation {
    list-style: none;
	margin: 0px;
	padding: 0px;
}

ul.cd-tabs-navigation li {
    list-style: none;
	margin: 0px 7px;
}

.cd-tabs-navigation a.selected, .cd-tabs-navigation a.selected:hover {
  color: #000;
}
	
	
	.InfoHeading.mrg-t-15 {
    margin-top: 0px !important;
}
	
	.stationAddress p {
    margin-top: 0px !important;
}
	
	.review.pull-left.mrg-t-10 {
    margin-top: -5px !important;
}
	
	.favoriteAndNavigate.pull-right {
    margin-top: -16px;
}
	
	ul.cd-tabs-navigation {
    margin-top: -30px;
}
 	
	.chargingSoketType {
    margin-top: -15px;
}
	
	hr.mrg-t-10.mobile-hr {
    margin-top: 3px;
}
	
	span.Hyundai-Active-Blue-bg.pad-l-10.pad-r-10.pad-t-5.pad-b-5.Hyundai-White-color {
    margin-top: 3px;
    display: inline-block;
}
	
	.distance, .openTime, .call, .email {
    font-size: 15px;
}
	span.priceRange {
    margin-top: 9px;
    display: inline-block;
}
	
	.secondInfo.mrg-t-20 {
    margin-top: 5px;
}
	
	.ThirdInfo.mrg-t-20 {
    margin-top: 5px;
}
	
	a.btn.Hyundai-primary-btn.btn-block.btn-lg.mrg-t-50 {
    margin-top: 5px;
}
	
	
	/* ========================= LIST VIEW PAGE CSS ===========================*/
	
	.backButton   {
	display: block !important ;
 }
	
	.backButton img {
	display: block !important ;
    width: 25px;
    position: absolute;
    left: 15px;
    top: 34px;			
}
	
	.row.mobile-list {
    margin-top: 80px;
}
	
	h4.pull-left.stationName {
    width: 64%;
    display: inline-block;
}

 .favourite.pull-right {
    width: 35%;
}
	
	.favourite img {
    background: rgb(228, 220, 211);
    width: 27px;
    padding: 4px;
    border-radius: 50%;
    display: inline-block;
    font-size: 14px;
    margin-right: 5px;
}
	.favourite.pull-right p {
    font-size: 11px;
    font-weight: 600;
}
	
	/* =======================MOBILE VIEW SWITCH BUTTON=====================*/
	
	.topSwitch-button {
    width: 78%;
    margin: 0px auto;
    position: absolute;
    top: 3%;
	left: 16%;
	right: 16%;
}
.btn-default.btn-on.active{background-color: #00AAD2;color: white;}
.btn-default.btn-off.active{background-color: #00AAD2;color: white;}
	 
   

.topSwitch-button .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
    outline: none;
    outline-offset: -2px;
}

	
	.topSwitch-button .btn-default{text-shadow: none !important; background-image: none !important;  }
	
	.topSwitch-button .btn-group > .btn:last-child:not(:first-child), .btn-group > .dropdown-toggle:not(:first-child){border-radius: 0px !important;}
	
	.topSwitch-button  .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle){border-radius: 0px !important;}
	
	/*======================================MOBILE VIEW FILTER PAGE CSS====================================*/
	
	section.container.filterPage {
    margin-top: 10px;
}
	
	.filter-by-name {
    margin-top: 85px;
}
	
	.form-control {
     
    height: 35px;
     

	}
	
	.buttonGroup.mrg-b-30.mrg-t-30 {
    margin-bottom: 100px;
}
	
	 

.filterPage .topSwitch-button {
    width: 172px;
    
    margin: 0px auto;
}

.mobile-heading {
    background: #002C5F;
	padding: 10px;
	color: #fff !important;
}

.backButton-2 img {
    width: 100%;
    margin-left: 0px;
}

 

.radius {
        width: 100%;
        height: 45px;
        border: none;
        padding:5px;
        font-size: 18px;
        color: #fff;
        background-color: #00AAD2;
	border-radius: 0px;
        
      }

.buttonGroup {
    text-align: center;
}

 .connector-type {
    background: #F6F3F2;
    padding: 24px 10px 2px 22px;
    margin-top: 10px;
}
 
.connector-type .form-group {
  display: block;
  margin-bottom: 15px;
}

.connector-type .form-group input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}

.connector-type .form-group label {
  position: relative;
  cursor: pointer;
}

.connector-type .form-group label:before {
  content:'';
  -webkit-appearance: none;
  background-color: transparent;
  border: 2px solid #0079bf;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 10px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 10px;
}

.connector-type .form-group input:checked + label:after {
  content: '';
  display: block;
  position: absolute;
  top: 2px;
  left: 9px;
  width: 6px;
  height: 14px;
  border: solid #0079bf;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.form-group.Type-2-AC {
    width: 50%;
    float: left;
}


 .by-rating label {
  font-size: 3rem;
  display: flex;
  gap: 0.5rem;
}

.by-rating input[type="radio"] 
  {
  width: 2em;
  height: 2rem;
   
}

 span.ratingpoints img {
    display: inline-block;
    width: 60%;
    margin-left: 5px;
}

 .ratingslect {
    margin-top: 5px;
    margin-bottom: 5px;
}


.favourite-locations .form-group {
  display: block;
  margin-bottom: 15px;
}

.favourite-locations .form-group input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}

.favourite-locations .form-group label {
  position: relative;
  cursor: pointer;
}

.favourite-locations .form-group label:before {
  content:'';
  -webkit-appearance: none;
  background-color: transparent;
  border: 2px solid #0079bf;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 10px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 10px;
}

.favourite-locations .form-group input:checked + label:after {
  content: '';
  display: block;
  position: absolute;
  top: 2px;
  left: 9px;
  width: 6px;
  height: 14px;
  border: solid #0079bf;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

span.ratingpoints {
    vertical-align: super;
}
	
	/*============= YOUR FEEDBACK CSS =================================*/
	
	a.submit-review {margin-bottom: 20px; margin-top: 50px;}
	
	/*================================== MOBILE LEGEND BOX EXPEND ======================================*/

.legendbox{
    overflow: hidden;
    background: #fff;
    display: none;
    position: absolute;
    right: 21px;
    height: 42px;
    -webkit-box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%);
    -moz-box-shadow: 1px 2px 12px 1px rgba(0,0,0,0.15);
    box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%);
    border-radius: 50px;
    width: 100%;
    top: 127px;
}

.legendbox ul {
    list-style: none;
    padding: 0px;
    margin: 6px 0px;
}

.legendbox ul li {
    text-decoration: none;
    list-style: none;
    margin: 5px;
    display: inline-block;
    width: 22%;
	font-size: 11px;
}

.legendbox ul li img {
    width: 20px;
    display: inline-flex;
     
}

.legendbox ul li span {
    position: absolute;
    display: inline-block;
    top: 11px;
}
	
	
	/*========================================Upcoming Booking sucessful msg page =======================*/

.toast.booking-successful-msg {
    background: #fff;
    position: absolute;
    width: 90%;
    z-index: 9999999;
    padding: 10px;
    top: 5%;
    margin: 0px auto;
    left: 5%;
     -webkit-box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%);
    -moz-box-shadow: 1px 2px 12px 1px rgba(0,0,0,0.15);
    box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%); 
	line-height: 1.3 !important;
}

.booking-confirm-icon img {
    width: 80%;
    margin-top: 2px;
    display: inline-block;
}

.booking-confirm-icon {
    width: 15%;
     
}

.booking-confirm-msg.pull-right {
    width: 75%;
}

.toast.upcoming-booking {
    background: #fff;
    width: 95%;
    position: fixed;
    bottom: 10px;
    z-index: 999999999;
	padding: 10px 5px;
	left: 2.5%;
	 -webkit-box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%);
    -moz-box-shadow: 1px 2px 12px 1px rgba(0,0,0,0.15);
    box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%);
	line-height: 1.3 !important;
}

.upcoming-booking-icon img {
    width: 100%;
    margin-top: 15px;
    display: inline-block;
}

.upcoming-booking-icon {
    width: 25%;
     
}

.upcoming-booking-msg {
    width: 66%;
	margin-top: 12px;
}

 .navigate img {
    width: 24%;
    display: inline-block;
    margin-right: 0px;
}

a.btn.Hyundai-secondry-btn.navigate {
    padding: 5px 10px !important;
}

a.btn.Hyundai-primary-btn.view-booking {
    padding: 10px 10px;
}

	/* ================================ CHARGING DETAILS PAGE CSS ==============================*/
.row.charging-deatils {
    margin-top: -40px;
}

.upcoming-box{background: #fff;
    width: 100%;
	padding: 15px;
	 
	 -webkit-box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%);
    -moz-box-shadow: 1px 2px 12px 1px rgba(0,0,0,0.15);
    box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%);}

.view p img, .navigate-heading p img {
    width: 12%;
    display: inline-block;
    margin: 0px 5px;
    margin-left: 10px;
}

p.connect-gun {
    margin-top: 1px;
    font-size: 14px !important;
}

.toast.booking-successful-msg.connect-gun-with-charger {
    position: absolute;
    top: 50%;
	width: 85% !important;
	left: 8% !important;
	-webkit-box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%);
    -moz-box-shadow: 1px 2px 12px 1px rgba(0,0,0,0.15);
    box-shadow: 1px 2px 12px 1px rgb(0 0 0 / 15%);}
	
	
	/* ============================ STEP ARROW CSS Prashant Design =======================*/

.step-arrow {
    position:fixed;
    z-index: 99999999;
    right: 0px;
    bottom: 30px;
    width: 15%;
}

.step-arrow a img {
    width: 75%;
    margin-bottom: 8px;
}
	
	.delink-account {
    position: absolute;
    bottom: 61px;
    left: 36%;
}
	 
		.book-my-next-slot {
    position:fixed;
    bottom: 52px;
    left: 3%;
}
	.receipt-page {
    height: 83vh !important;
}
	 .receipt-page.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    padding: 2px 6px;
    line-height: 1.2em;
    vertical-align: top;
		 font-size: 12px;
     
}  
	span.booking-status  {
    display: inline-block;
    position: absolute;
    right: 20px;
     
    line-height: 25px;
}
	
	 .nav > li {
    position: relative;
    display: inline-block;
    width: 32%;
}

.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    width: 100%;
}

.nav > li > a {
    margin: 3px;
    color: #000;
    position: relative;
    display: block;
    padding: 10px 8px;
    background: #fff;
     
}
	
	/*========================================== Monitor page CSS ================================*/

.pad-a-10.monitor-page {
    height: auto !important;
}

img.live-charging-img {
    width: 43%;
    vertical-align: middle;
    float: right;
}

span.Hyundai-Active-Blue-color.live-percentage {
    display: inline-block;
    margin-right:  0px;
    margin-top: 24px;
	font-size: 4.5rem !important;
	margin-left: 25px;
}

.amenities-section ul.amenities {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

 ul.amenities li {
    display: inline-block;
    margin: 6px;
    width: 10%;
}

ul.amenities li img {
    
    width: 100%;
}

	img.distance-icon {
    width: 20px;
    vertical-align: middle;
    margin-left: 10px;
}
	
	/*=============================================== map with vertical line   ===================================*/

 div#vertical-line {
    width: 90%;
    position: absolute;
    z-index: 9999999;
    background: #fff;
    height: 45px;
    margin-left: 5%;
    display: block;
    margin-top: 15px;
}

.map-with-vertical-line {
    height: 90vh;
    z-index: 99999;
    position: absolute;
}
.vertical-line-tiles {
    width: 100%;
    position: absolute;
    bottom: 0;
     
    height: auto;
    z-index: 99999999;
	background: rgba(256,256,256,0.5);
}

.adaptable-footer{background: rgba(0,0,0,0.5) !important;}
 .tiles-box {
    background: #fff;
    margin-bottom: 5px;
    padding: 5px;
}
 
.adaptable-footer img.station-logo {
    width: 10%;
}

 .adaptable-footer img.fav-icon {
    width: 5%;
    margin-left: 12px;
    vertical-align: middle;
    margin-top: -6px;
}

img.station-logo {
    width: 16%;
}

img.fav-icon {
    width: 7%;
    margin-left: 3px;
    vertical-align: top;
}

 img.connector-icon {
    width: 12%;
    vertical-align: middle;
    margin-right: 5px;
}
 
p.station-add {
    margin-top: -5px;
    margin-left: 23px;
}

.stationdeatils {
    border-right: 2px solid #666666;
    padding: 0px 6px;
}
 
span.kwh-perice {
    margin-left: 10px;
}
 
span.kms {
    text-align: right;
    margin-left: 7px;
}

img.electric-car-icon {
    width: 38%;
}

.clickdrop-dwon {
    margin-right: 11px;
    margin-top: -8px;
    
}

.adap-footer-amenities ul {
    list-style: none;
    margin: 0px;
     padding: 0px;  
}

 .adap-footer-amenities ul li {
    float: left;
    width: 20px;
    height: 20px;
    margin: 10px 11px;
}

.adap-footer-amenities ul li img{width: 100%;}
.adap-footer-amenities ul li .fa-angle-down{ font-size: 25px;}
	
	/*============= accordation===========================*/
	
	 
.set{
  position: relative;
  width: 100%;
  height: auto;
  background-color: #fff;
}
.set > a{
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #555;
  font-weight: 600;
  border-bottom: 1px solid #ddd;
  -webkit-transition:all 0.2s linear;
  -moz-transition:all 0.2s linear;
  transition:all 0.2s linear;
}
.set > a i{
  float: right;
  margin-top: 2px;
}
.set > a.active{
  background-color:#fff;
  color: #555;
}
.content{
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  display:none;
}
.content p{
  padding: 10px 15px;
  margin: 0;
  color: #333;
}
    #map {
        height: 100%;
        width: 100%;
    }
}