/**
 * ROOT VARIABLES
 */
:root {
  --form-element-spacing-vertical: 5px;
  --form-element-spacing-horizontal: 5px;
  --typography-spacing-vertical: 1rem;
  --spacing: 0.75rem;
  --font-family: aktiv-grotesk, sans-serif;
  --font-size: 17px;
  --color: #535353;
  --alert-padding: 10px 20px;
  --alert-font-size: 15px;
}

:root:not([data-theme="dark"]) {
  --primary: rgba(10, 135, 63, 1);
  --primary-hover: rgba(10, 135, 63, 0.9);
  --primary-focus: rgba(10, 135, 63, 0.125);
  --primary-inverse: #ffffff;
  --secondary: #575757;
  --secondary-hover: #575757;
  --secondary-focus: #575757;
  --contrast: #000000;
  --contrast-hover: #000000;
  --contrast-focus: #000000;
  /*
  --card-box-shadow:
    0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698),
    0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024),
    0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03),
    0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036),
    0.2085rem 0.417rem 2.502rem rgba(27, 40, 50, 0.04302),
    0.5rem 1rem 6rem rgba(27, 40, 50, 0.06),
    0 0 0 0.0625rem rgba(27, 40, 50, 0.015);
  */
}
[data-theme=light],
:root:not([data-theme=dark]) {
  --dropdown-hover-background-color: #f0f0f0;
}
/**
 * MAIN
 */
/* remove the mobile bounce behavior from browsers */
html,body {overscroll-behavior: none;}

h1, h2, h3, h4, h5 {--font-family: proxima-nova, sans-serif;}
h1 {
  --font-size: 2rem;
  --typography-spacing-vertical: .5rem;
  color: #0A873F;
  line-height: 1.2;
}
h2 {
  --font-size: 1.5rem;
  --typography-spacing-vertical: .7rem;
}
h3 {
  --font-size: 1.25rem;
  --typography-spacing-vertical: 1.25rem;
  line-height: 1.2;
}
ul {
  padding-left: 30px;
}
ul li {
  list-style-type: disc;
}
hr {
  border-color: #959595;
  margin-top: 40px;
  margin-bottom: 40px;
}
p.small-uppercase, span.small-uppercase {
  text-transform: uppercase; 
  font-size: 13px
}
.before-header {
  background-color: #f0f0f0;
}

body > header {
  --block-spacing-vertical: 20px;
  padding: var(--block-spacing-vertical) 0;
}
body > header {
  height: 120px;
  box-shadow: 0 12px 20px 0px rgba(0, 0, 0, .03);
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 3;
}
nav:first-of-type {
  padding: 0px;
}
nav img {
  max-width: 160px;
}

nav ul li a:first-child {
  padding-top: 9px;
  padding-left: 12px;
}

article {
  border-radius: 1rem;
  min-height: 300px;
}
article.reduced-height {
  min-height: 200px;
}
article {margin: 24px 0px;}
article.grid div, article div {padding-top: 8px; padding-bottom: 8px;}

span.bluetext {color: rgb(26, 170, 218)}
span.greentext {color: rgba(10, 135, 63, 1)}
span.redtext {color: rgb(156, 17, 17)}
/**
 * BUTTONS
 */
 a[role="button"].fullwidth, button.fullwidth {width: 100%;}
 [role="button"], button, input[type="button"], input[type="reset"], input[type="submit"] {
   --background-color: #0a873f;
   --form-element-spacing-vertical: 14px;
   --form-element-spacing-horizontal: 42px;
   --border-radius: 2rem;
   --line-height: 1;
   --font-weight: 600;
   --box-shadow: none;
   --border-width: 3px;
   text-transform: uppercase;
   font-size: 14px;
   letter-spacing: .1em;
 }
 [role="button"].small, input[type="submit"].small, button.small {
   font-size: 11px;
   border: 1px solid;
   line-height: 30px;
   padding: 0 12px;
 }
  [role="button"].medium, input[type="submit"].medium, button.medium {
  font-size: 12px;
  line-height: 40px;
  padding: 0px 20px;
 }
 input[type="submit"].small {
  height: auto;
 }
 /* Button Small Outline */
 [role="button"].small.outline:is([aria-current], :hover, :active, :focus),
 button.small.outline:is([aria-current], :hover, :active, :focus) {
   border: 1px solid;
   --border-color: var(--primary);
 }
 /* Button Light */
 [role="button"].light, button.light {
  background-color: transparent;
  color: var(--primary);
  border: none;
 }
 [role="button"].light.contrast-inverse, button.light.contrast-inverse {
   color: #fff;
 }

 input[type="reset"], input[type="submit"] {margin-top: 8px;}
 /* Button - Contrast Inverse */
 :is(button, input[type="submit"], input[type="button"], [role="button"]).contrast-inverse {
   --background-color: transparent;
   --border-color: var(--contrast-inverse);
   --color: #ffffff;
 }
 /* States *
/* Button - State - Primary */
[role="button"]:is([aria-current], :hover, :active, :focus),
button:is([aria-current], :hover, :active, :focus),
input[type="button"]:is([aria-current], :hover, :active, :focus),
input[type="reset"]:is([aria-current], :hover, :active, :focus),
input[type="submit"]:is([aria-current], :hover, :active, :focus) {
    --background-color: #ffffff;
    --color: #0a873f;
}
/* Button - State - Secondary */
:is(button, input[type="submit"], input[type="button"],
[role="button"]).secondary:is([aria-current], :hover, :active, :focus),
input[type="reset"]:is([aria-current], :hover, :active, :focus) {
  opacity: .8;
}
/* Button - State - Outline */
:is(button, input[type="submit"], input[type="button"], [role="button"]).outline:is([aria-current], :hover, :active, :focus):not(.secondary):not(.contrast),
input[type="reset"].outline:is([aria-current], :hover, :active, :focus):not(.secondary):not(.contrast) {
  --background-color: var(--primary);
  --color: var(--primary-inverse);
}

/* Button - State - Contrast */
:is(button, input[type="submit"], input[type="button"], [role="button"]).contrast:is([aria-current], :hover, :active, :focus) {
    opacity: .8;
}
/* Button - State - Contrast Inverse */
:is(button, input[type="submit"], input[type="button"], [role="button"]).contrast-inverse {
  --background-color: transparent;
  --border-color: var(--contrast-inverse);
  --color: #ffffff;
}
.container .small {
  max-width: 640px;
}

/**
 * Utilities
 */
.center {
  text-align: center;
  margin: 0 auto;
}
.spacer {
  height: var(--spacer-height);
  width: 100%;
  display: block;
  padding:0!important;
}
.no-transition {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}
.inline-block-right {display: inline-block; float: right;}
.inline-block-left {display: inline-block;}

/* Tables and empty states */
.table-scroller, article.grid div.table-scroller {
  display: block;
  margin: 0;
  padding-top: 4px;
  padding-bottom: 4px;
  overflow-x: auto;
}
.table-scroller th {
  background: #fff;
  font-size: 16px;
  font-weight: 600;
}
.table-scroller tr {
  border-bottom: 1px solid var(--muted-border-color);
}
table[role="grid"] tr:nth-child(2n+1) {
  background-color: var(--table-row-stripped-background-color);
}
.empty-state-msg {
  background-color: var(--table-row-stripped-background-color);
  padding: 20px;
  font-size: 14px;
  text-align: center;
  border-radius: 8px;
  color: #64727C;
}
.grid ol.list-numbered-style {margin-left: 40px;}
.grid .grid-col-center-vertical {align-self: center; padding:0 20px 0 20px;}
ol.list-numbered-style li {
  counter-increment: my-awesome-counter;
}
ol.list-numbered-style li {
  list-style: none;
  position: relative;
  margin-bottom: 20px;
  line-height: 24px;
}
ol.list-numbered-style li::before {
  content: counter(my-awesome-counter);
  color: #fff;
  font-weight: bold;
  display: inline-block;
  position: absolute;
  left: -50px;
  top: -7px;
  background: #0A873F;
  border-radius: 80px;
  width: 36px;
  height: 36px;
  text-align: center;
  padding-top: 6px;
  padding-left: 0px;
}

/* Alerts */
/* Handle Django output */
.errorlist {
  color: #721c24;
  background-color: #f8d7da;
  border: solid 1px #f5c6cb;
  border-radius: var(--border-radius);
  font-size: var(--alert-font-size);
  margin-bottom: var(--spacing);
}
/* Fallback if alert class does not have a container */
ul.errorlist, ul.alert {
  padding: 10px 30px;
}
.alert {
  padding: var(--alert-padding);
  border-radius: 1rem;
  font-size: var(--alert-font-size);
  margin-bottom: var(--spacing);
  padding: 24px;
}
.alert.primary {
  color: #155724;
  background-color: #fff;
  border: solid 1px #d5d5d5;
}
.alert.primary.contrast {
  color: #fff;
  background-color: #0A873F;
}
.alert.primary.contrast ul, .alert.primary.contrast ul li,
.alert.primary.contrast p, .alert.primary.contrast h2,
.alert.primary.contrast h3 {
  color: #fff;
  margin-bottom: 8px;
}
.alert.primary ul, .alert.primary ul li, .alert.primary p,
.alert.primary h1, .alert.primary h2, .alert.primary h3, .alert.primary h4 {
  margin-bottom: 8px;
}
.alert.danger {
  color: #721c24;
  background-color: #f8d7da;
  border: solid 1px #f5c6cb;
}
.alert.danger ul, .alert.danger ul li, .alert.danger p,
.alert.danger h1, .alert.danger h2, .alert.danger h3, .alert.danger h4 {
  color: inherit;
  margin-bottom: 8px;
}
.alert.danger [role="button"].small, .alert.danger button.small {
 border-color: #721c24;
 color: inherit;
}
.alert.danger [role="button"].small.outline:is([aria-current], :hover, :active, :focus),
.alert.danger button.small.outline:is([aria-current], :hover, :active, :focus) {
  background-color: #721c24;
  color: #fff;
}
.alert.warning {
  color: #856404;
  background-color: #fff3cd;
  border: solid 1px #ffeeba;
}
.alert.warning ul, .alert.warning ul li, .alert.warning p,
.alert.warning h1, .alert.warning h2, .alert.warning h3, .alert.warning h4 {
  color: inherit;
  margin-bottom: 8px;
}
.alert.warning [role="button"].small, .alert.warning button.small {
 border-color: #856404;
 color: inherit;
}
.alert.warning [role="button"].small.outline:is([aria-current], :hover, :active, :focus),
.alert.warning button.small.outline:is([aria-current], :hover, :active, :focus) {
  background-color: #856404;
  color: #fff;
}
.alert.success {
  color: #155724;
  background-color: #d4edda;
  border: solid 1px #c3e6cb;
}

.alert.success ul, .alert.successul li,
.alert.success p, .alert.success h2,
.alert.success h3, .alert.success h4 {
  color: #155724;
  margin-bottom: 4px;
}
.alert h3 {font-size: 18px;}
.alert p {font-size: 15px!important;}
.helptext {
  font-size: 14px
}

.faq-container details {
  border-bottom: none;
}
.faq-container details summary {
  color: #0a873f;
  background: #fafafa;
  padding: 30px 35px 30px 15px ;;
  border-top: 1px solid #bfbfbf;
  position: relative;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
}
.faq-container details summary::after { margin-right: -20px;}
.faq-container details summary:focus:not([role=button]) {
    color: #0a873f;
}
.faq-container details p {
  padding: 10px 20px 0px 20px;
  font-size: 15px;
  line-height: 24px;
}

/**
 * TEMPLATES
 */
/* Template - Get started */
.get-started {padding-top: 20px;}
.get-started  article.grid div:nth-child(1){padding: 16px 32px;}
.get-started  article.grid div:nth-child(2){padding: 32px;}
.get-started label {margin-bottom: calc(var(--spacing) * 1);}

/* Template - Log in */
.login {padding-top: 20px;}
.login article.grid div:nth-child(1){padding: 16px 32px;}
.login article.grid div:nth-child(2){padding: 32px;}
/* Tip: reverse grid order for responsive columnns - below is right col first*/
/*.login article.grid div:nth-child(2){order:-1;}*/

/* Template - Sign up */
.signup {
  --typography-spacing-vertical: .5rem;
  padding-top: 40px;
}
.notice article {
  padding: 40px;
}
.signup h1, .signup h2,  .signup h3 {text-align: center;}
.signup article, .notice article {border-top: 20px solid #0a873f;}

/**
 * Logged in
 */
body.logged-in {
  min-height: 100vh;
  background: #fafafa;
}
body.logged-in nav a { font-family: proxima-nova, sans-serif; }
body.logged-in > main {
  height: calc(100% - 60px);
  --block-spacing-vertical: 16px;
  padding-top: 0px;
}
body.logged-in > header {
  height: 60px;
  padding-bottom: 0px;
  padding-top: 0px;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 3;
}
body.logged-in nav details {
  margin-bottom: 0px;
  color: #000;
}
body.logged-in nav details ul {
  padding: 10px;
}
body.logged-in nav details ul li {
  text-align: left;
  width: 200px;
}
body.logged-in nav details ul li a {
  color: #000;
  padding: 10px;
}
body.logged-in nav details summary svg path {
  fill: #0a873f;
}
body.logged-in nav details summary::after {
  top: 4px;
  position: relative;
}
body.logged-in nav details summary::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(10, 135, 63)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
body.logged-in nav details[open]>summary::after{transform:rotate(-180deg)}

body.logged-in nav img {max-width: 200px;}

.page-content {
  /*border: 2px solid red;*/
  padding: 32px 50px;
  margin-left: 280px;
  background: #fafafa;
}
.nav-rail {
   height: calc(100vh - 60px);
   /*border: 2px solid red;*/
   position: fixed;
   z-index: 2;
   transition: 0.25s;
}
.nav-rail .nav-rail-menu {
  background: #0a873f;
  width: 280px;
  height: inherit;
  padding-top: 10px;
}
.nav-rail-menu nav ul li {
  height: 60px;
  align-items: center;
  display: flex;
  padding-left: 36px;
  padding-right: 24px;
}
.nav-rail-menu nav ul li a {
  width: 100%;
  font-weight: 700;
  color: #fff;
}
.nav-rail-menu nav ul li a svg {
  margin-right: 8px;
  top: -2px;
  position: relative;
}
.nav-rail-menu nav ul li a svg path {
  fill: #fff;
}
.nav-rail-menu nav ul li:last-child {
  position: absolute;
  display: fe;
  width: 100%;
  text-align: center;
  bottom: 0;
  left:0;
  padding-left: 0px;
  justify-content: center;
}

.nav-rail-bg {
  background-color:rgba(255,255,255,0.65);
  width: 100%;
  height: inherit;
  position: fixed;
  /*display: none;*/
  opacity: 0;
  transition: 0.5s;
  height: calc(100vh - 60px);
  pointer-events: none;
}
.nav-rail.closed {left: -250px; opacity: 0;}
.nav-rail.open {left: 0px; opacity: 1;}
.btn-menu {
  cursor: pointer;
  position: fixed;
  top: 8px;
  left: 8px;
  width: 44px;
  height: 44px;
  align-items: center;
  display: grid;
  justify-items: center;
  z-index: 4;
}
.icon-menu-is-open {display: none;}

/** horizontal list **/
ul.hlist {
  list-style: none;
  margin: auto;
  padding: 0;
  display: inline-flex
}
li.hlist {
  display: inline-block
}

/** Icons **/
.icon-credit-card {margin-right: 6px;}
.icon-check-circle {margin-top:-3px; margin-right:3px;}
/**

/** Page Anchors with header offset **/
#anchor-billing-address {
  display: block;
  position: relative;
  top: -150px;
  visibility: hidden;
}
/**

 * Invoices
 */
body.logged-in .invoice-header {
  padding-top: 24px;
}
body.logged-in .invoice-header img {
  max-width: 220px;
}
body.logged-in a.invoice-amount::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(10, 135, 63)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  /*top: 4px;
  position: relative;*/
  display: inline-block;
  width: 24px;
  height: 24px;
  /*-webkit-margin-start: 0.5rem;
  margin-inline-start: .5rem;*/
  transform: rotate(-90deg);
  background-position: right center;
  background-size: 1rem auto;
  background-repeat: no-repeat;
  content: "";
  position: relative;
  top: 10px;
}

/* Property - Reports */
body.logged-in .grid.property-reports article {
  min-height: auto;
}
body.logged-in .grid.property-reports article h2 {
  margin-bottom: 12px;
}
body.logged-in .grid.property-reports article progress {
  background-color: #edf0f3;
}
body.logged-in .grid.property-reports .table-scroller {
  padding: 8px;
  background: #fafafa;
  border-radius: 12px;
  border: 1px solid #edf0f3;
  width: 100%;
  margin-bottom: 12px;
}
body.logged-in .grid.property-reports .table-scroller table {
  margin-bottom: 0px;
}

body.logged-in .grid.property-reports .table-scroller table tbody tr:last-child td,
body.logged-in .grid.property-reports .table-scroller table tbody tr:last-child th {
  border-bottom: none;
}

body.logged-in .grid.property-reports .table-scroller th {
  font-weight: 400;
  background: unset;
}
body.logged-in .grid.property-reports .table-scroller thead th {
  font-weight: 600;
}
body.logged-in .grid.property-reports .table-scroller tfoot th,
body.logged-in .grid.property-reports .table-scroller tfoot td {
  font-weight: 600;
}
body.logged-in .grid.property-reports .table-scroller tr {
  border-bottom: none;
}
body.logged-in .grid.property-reports .progress-chargers {
  padding-top: 0px;
  margin: 8px;
}
body.logged-in .grid.property-reports .progress-chargers progress {
   margin-bottom: 0px;
}
body.logged-in .grid.property-reports .progress-chargers p {
  font-size: 15px;
  margin: 0;
}
body.logged-in .grid.property-reports .progress-chargers .progress-labels {
  padding: 0px;
  margin-bottom: 8px;
}
body.logged-in .grid.property-reports .progress-chargers .progress-label-left {
  font-size: 13px;
  float: left;
}
body.logged-in .grid.property-reports .progress-chargers .progress-label-right {
  font-size: 13px;
  float: right;
  text-align: right;
}

/* Locations */

body.logged-in header.location {
  margin-top: 40px;
  margin-bottom: 40px;
  border-top: 1px solid #959595;
  padding-top: 30px;  
}

body.logged-in header.location h2{
  margin-bottom: 8px;
}

body.logged-in .tag {
  padding: 2px 8px 2px 8px;
  margin:0px 4px 4px 0px;
  border-radius:4px;
  text-align:center;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: currentColor;
  border: 1px solid currentColor;
  display: inline-block;
}

/* Location Charger small cards */
body.logged-in .grid.location-chargers {
  margin-bottom: 10px;
}

body.logged-in .grid.location-chargers article {
  min-height: auto;
  margin: 4px 0px 24px 0px;
  padding-bottom: 10px;
}

body.logged-in .grid.location-chargers article p {
  font-weight: 900;
  text-align:center;
  margin-top: 4px;
  margin-bottom: 4px;
}

body.logged-in .grid.location-chargers article.green, .grid.location-chargers article.green p {
  color: #0a873f;
}

body.logged-in .grid.location-chargers article.dark, body.logged-in .grid.location-chargers article.dark p {
  color: #000000;
}

body.logged-in .grid.location-chargers article.gray, body.logged-in .grid.location-chargers article.gray p {
  color: #959595;
}
body.logged-in .grid.location-chargers article.red, body.logged-in .grid.location-chargers article.red p {
  color: rgb(156, 17, 17);
}

body.logged-in .grid.location-chargers article .icon-charger svg {width: 32px; margin: 0 auto; display: block;}

/* Modal Dialog - Pico Overrides */

dialog {
  background-color: rgba(0, 0, 0, 0.2);
  text-align: center;
}
dialog form {text-align: left;}
@keyframes modal {
  from {
      transform: scale(0.85);
      opacity: 0;
      pointer-events: none;
  }
}

/* Deploy Chargepoint selector UI */
.charger-list-transfer-container {
  display: flex;
  gap: 20px;
  align-items: center;
  width: 100%;
}  

.charger-list-transfer-container .charger-list-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 460px;
  min-width: 240px;      
}

.charger-list-transfer-container .charger-list-container h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-weight: 600;
  color: #333;
}

.charger-list-transfer-container .filter-input {
  margin-bottom: 10px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
}

.charger-list-transfer-container select {
  height: 300px;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 5px;
  outline: none;
  transition: border-color 0.3s;
}
.charger-list-transfer-container #id_chargepoints {
    min-height: 350px;
}
.charger-list-transfer-container button {
    padding: 10px 10px 8px 10px;
    width: 100%;
    font-size: 11px;
}    

.charger-list-transfer-container select:focus {
  border-color: #3b82f6;
}

.charger-list-transfer-container .transfer-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 120px;      
}

.charger-list-transfer-container .transfer-buttons #addBtn {
  padding-left: 20px;
}    
.charger-list-transfer-container .transfer-buttons #removeBtn {
  padding-right: 20px;
}

.charger-list-transfer-container .svg-icon {
    height: 1.25rem;
    width: 1.25rem;
    stroke-width: 2;
    top: -1px;
    position: relative;
}    
/* Differentiate between selected and not selected with Selected Chargers select box */ 
select[multiple]#id_chargepoints option:checked {
  border-radius: 4px;
}
select[multiple]#id_chargepoints option:not(:checked) {
  color: #a0a0a0;
}

@media (max-width: 992px) {
  .charger-list-transfer-container {
      gap: 0px;
      flex-direction: column;
      width: 100%;        
  }
  .charger-list-transfer-container button {
      padding: 6px;
      min-width: 140px;        
  }      
  .charger-list-transfer-container select {
      width: 100%;
      height: 140px;
      max-width: unset;        
  }    
  .charger-list-transfer-container #id_chargepoints {
      min-height: unset;
  }    
  .charger-list-transfer-container .charger-list-container {
    width: 100%;
      max-width: unset;
  }    
  .charger-list-transfer-container #unassignedChargepoints {
      margin-bottom: 6px;
  }    
  
  .charger-list-transfer-container .transfer-buttons {
      flex-direction: unset;
      padding-top: 0px;
      padding-bottom: 0px;
  }
  .charger-list-transfer-container .transfer-buttons button {
      font-size: 12px;
      margin-bottom: 4px;
  }    
  .charger-list-transfer-container .svg-icon {
      rotate: 90deg;
      height: 20px;
      margin: 4px;        
  }    
}

/* Property Reports UI */
#get-report-csv {
  display: flex;
  margin-top: 20px;
}
#get-report-csv form {
  margin: 0;
}
#get-report-csv label {
  display: inline;
  font-size: 12px;
  font-weight: 800;
}
#get-report-csv input:not([type="Submit"]) {
  width: 160px;
  display: inline;
  margin-right: 10px;
}

@media (max-width: 992px) {
  #get-report-csv {
    margin: 20px auto 10px auto;
    display: grid;
    grid-template-columns: 1fr;    

  }  
  #get-report-csv input:not([type="Submit"]) {
    width: 100%;
    font-size: 13px;
    display: block;
    margin-right: 0px;
  }   
}

/* Hacky fix to remove duplicate calendar icons in Firefox only */
@-moz-document url-prefix() {
  /* CSS rules here will only apply in Firefox */
  input[type="datetime-local"], input[type="date"] {
    background-image: none!important;
    padding-right: 4px!important;
  }
}

/**
 * RESPONSIVE
 */
@media (max-width: 576px) {

}
@media (min-width: 576px) {
  body > footer, body > header, body > main, section {
    --block-spacing-vertical: calc(var(--spacing) * 2);
  }
  body > header {
    /*height: 120px;*/
    padding-top: 6px;
  }
  nav:first-of-type {padding: 0px;}
  .container {max-width: 510px;}
  .container.small {max-width: 640px;}
 [role="button"], button, input[type="button"], input[type="reset"], input[type="submit"] {width: auto;}
}

@media (min-width: 768px) {
  body > footer, body > header, body > main, section {
    --block-spacing-vertical: calc(var(--spacing) * 1.75);
  }
  .container {max-width: 700px;}
  .container.small {max-width: 640px;}
  /* Templates */
  .login {padding-top: 48px;}
  .get-started {padding-top: 48px;}
  .notice article {padding: 40px 80px;}

}
@media (max-width: 992px) {
  body > header {padding-top: 2px; padding-bottom: 0px; height: 60px;}
  header nav [role="button"] {font-size: 11px;}
  header nav ul li {font-size: 14px;}
  h1 {
    font-size: 28px;
  }
  h2 {
    font-size: 21px;
  }
  h3 {
    font-size: 18px;
  }
  address, blockquote, dl, figure, form, ol, p, pre, table, ul, label {
    font-size: 14px;
  }
  .hide-on-mobile {display: none;}
  .page-content {
    margin-left: 0px;
    padding: 16px;
  }
  article {margin-top: 0px; padding-top: 16px;}
  .signup {padding-top: 20px;}
  body.logged-in h1 {
    font-size: 24px;
  }
  body.logged-in h2 {
    --font-size: 21px;
    --typography-spacing-vertical: 12px;
  }
  body.logged-in h3 {
    font-size: 19px;
    line-height: 1.3;
  }
  body.logged-in alert h2, body.logged-in .alert h3, body.logged-in .alert h4 {
    font-size: 17px;
  }
  body.logged-in, body.logged-in p {
    font-size: 14px!important;
  }
  body.logged-in nav ul {
    margin: 0 auto;
  }
  body.logged-in .invoice-header img {
    max-width: 160px;
  }
  .table-scroller table, table {
    font-size: 14px;
  }
  .table-scroller td, .table-scroller th, table td, table th {
    font-size: 14px;
    min-width: 120px;
  }
  body.logged-in .grid.location-chargers {
    grid-template-columns: 1fr 1fr;
  }  
}
@media (min-width: 992px) {
  body > header {
    height: 84px;
  }
  .hide-on-desktop {display: none;}
  body > footer, body > header, body > main, section {
    --block-spacing-vertical: calc(var(--spacing) * 1.75);
  }
  nav img {max-width: 260px;}
  .container {max-width: 920px;}
  .container.small {max-width: 640px;}
  .nav-rail {
    left: 0px;
    opacity: 1;
  }
  body.logged-in .grid.location-chargers {
      grid-template-columns: repeat(auto-fit,minmax(19%,2fr));
  }  
}

@media (min-width: 1200px) {
  body > footer, body > header, body > main, section {
    --block-spacing-vertical: calc(var(--spacing) * 1.75);
  }
  .container {max-width: 1130px;}
  .container.small {max-width: 640px;}
  /* Templates */
  .get-started  article.grid div:nth-child(1){padding: 64px 32px;}
}