:root {
  --theme-primary-color: #212c36;
  --theme-secondary-color: #22ae84;
  --theme-tertiary-color: #dd2627;
  --theme-image: url("/images/page-bg-new.jpg");
}


/* General Styles --------------------------*/

body, html {
  font-size:18px;
}

p {
    margin-top: 0;
    margin-bottom: 20px;
  line-height:1.5;
}

a {
  text-decoration: underline;
  -webkit-transition: .3s all ease;
  -o-transition: .3s all ease;
  transition: .3s all ease;
}

a:hover, a:focus {
    color: inherit;
    text-decoration: none;
}

.text-white a {
    color: inherit;
}

code {
  font-size: 100%;
  font-family: inherit;
  color: inherit;
}

button {
    border: none;
}

._Content img {
    max-width: 100%;
    height: auto;
}

._Content h1, ._Content h2, ._Content h3 {
  color: #3da586;
    font-weight: bold;
}

._Content ul li {
    margin-bottom: 5px;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: 15px; 
}

.h2, h2 {
    font-size: calc(1.325rem + .9vw);
}

h3, .h3 {
  font-size: 27px;
}

h4, .h4 {
  font-size: 21px;
  line-height:1.5;
}

h4, .h4 {
  font-size: 21px;
}

hr {
    margin: 1rem 0;
    color: inherit;
    background-color: currentColor;
    border: 0;
    opacity: .25;
}

._Content .bg-primary p a {
  color: inherit;
}

._Template {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width:100%;
}

._Content {
  margin: 70px auto 100px auto;
  max-width: 1140px;
  width:90%;
}

._Content:has(.full-width) {
    margin: 0;
    max-width: none;
    width: 100%;
}

html {
  scroll-behavior: smooth;
}

div {
  scroll-margin-top: 110px;
}

.btn, .btn-primary {
  border-color: inherit;
  border-radius: 0;
  padding: 7px 15px;
  white-space: break-spaces;
}

.text-shadow {
  text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
}

table {
  color: inherit;
  line-height: 1.4;
  width:100%;
}

.table td, .table th {
  border: none !important;
  padding:0;
}

.table td.col-12 {
    padding-left: 15px;
    padding-right: 15px;
}

.min-vh-100 {
    min-height: 100vh;
}

.div-link {
  cursor:pointer;
  transition:0.3s;
}

._ListPager {
    text-align: center;
    margin-top:30px;
}

._ListItems {
    display: none;
}

button._ListPagerNext {
    margin-right: 15px;
}

._ListPager .mdl-button--fab {
    background-color: rgb(203 203 203 / 75%) !important;
}

._ListPager .mdl-slider__background-lower, ._ListPager  .mdl-slider__background-upper {
    background: rgb(203 203 203 / 75%) !important;
}


figure.image.image-style-side {
    display: block;
}

figure.image.image-style-side img {
    margin-left: auto;
    margin-right: 0;
}

/* Navigation */

nav {
  background-color: #ffffff;
  display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

#navMenu {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

nav, #nbrand-img {
    transition: all linear 0.4s;
}

nav.scrolled {
  background-color: var(--theme-primary-color);
}

#nav-wrapper p, #nav-wrapper ul {
  display:inline;
  margin-bottom:0;
}

#nbrand-img {
    background-repeat: no-repeat;
    background-size: contain;
}

#nbrand-img {
    background-image: url(/images/envirostore-logo.png);
    display:inline-block;
    width: 328px;
    height: 84px;
}

.scrolled #nbrand-img {
    background-image: url(/images/ev-logo-white-large.png);
    width: 220px;
    height: 56px;
}

#navbar ul { 
  padding:0;
  margin:0;
}

#navbar ul li {
    display: inline;
}

.navbar ul {
  margin-left: auto !important;
}

#navMenu ul {
    display: flex;
    flex-direction: row;
    padding-left: 0;
    margin-bottom: 0;
  margin-right: 10px;
    list-style: none;
}

#navMenu ul a {
    display: block;
    padding: .5rem 1rem;
    color: rgba(0, 0, 0, .55);
    text-decoration:none;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    font-size: 0.9em;
    font-weight: 600;
    white-space: nowrap;
}

#navMenu ul a:hover {
    background-color: transparent;
    color: rgba(0, 0, 0, .7);
}

.scrolled #navMenu ul a {
    color: rgba(255,255,255,.55);
}

.scrolled #navMenu ul a:hover {
    color: rgba(255, 255, 255, .75);
}

#navbar .nav-logo a:hover {
    background: transparent;
    opacity: 0.8;
}


#navbar ul.DropDownMenu li.Parent li {
   /* float: none;*/
}

#navbar ul.DropDownMenu li.Parent ul {
  padding: 10px;
  top: auto !important;
}

#navbar ul.DropDownMenu li.Parent:has(.material-icons) a {
  padding-right:25px !important;
}

li.Parent .material-icons {
    position: absolute;
    top: 2px;
    right:-3px;
}

ul.DropDownMenu a:hover {
    background-color: #0000001c;
}

li.Parent ul {
  background-color: var(--theme-secondary-color);
  box-shadow: 3px 3px 10px 0px #00000075;
}

.mobBtn {
  display:none;
}

.mobBtn button {
    padding: 8px 15px;
    background-color: transparent;
}

.mobBtn span.material-icons {
    color: rgba(0, 0, 0, .55);
    font-size: 32px;
}

.scrolled .mobBtn span.material-icons {
    color: rgba(255, 255, 255, .55);
}

/* Banner */
#top-banner {
    background-image: var(--theme-image);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    height: 50vh;
}

#top-banner h1 {
    color: #ffffff;
    font-size: 3rem;
    font-weight:bolder;
    text-shadow: 2px 2px 2px #000;
}

#top-banner h2 {
    color: var(--theme-secondary-color);
    font-weight: bolder;
    text-shadow: 2px 2px 2px #0000008c;
}

/* Footer */


#footer-wrap {
    background-color: #212c36;
    color: #fff;

}

#footer-wrap h3 {
    font-size: 1em;
   font-weight:bold;
    color: #FFF;
    text-transform: uppercase;
}

.foot-link, .foot-link:active, .foot-link:visited {
    color: #fefff2;
    font-size: 0.92em;
    text-decoration: none;
    transition: all linear 0.3s;
}

.foot-link:hover {
    color: #86a3b5;
    text-decoration: none;
}

/* Layouts */

.full-width .row {
    
}

/* Tables tidy up */

.table-column table td {
    padding: 0 20px;
}

.table-column table td {
    border: none !important;
}

figure {
   display: table;
   padding: 5px;
}

figure.table {
    padding: 0;
    display: initial;
}
figure.image {
   margin:20px auto;
}

figure.image img {
    margin: 0 auto;
    display: block;
  max-width: 100%;
}

figcaption {
    display: table-caption;
    caption-side: bottom;
    padding: 10px;
    text-align: center;
    font-size: 90%;
    margin-bottom: 20px;
}

/* Page layouts, reusable layouts ------------------------------------------------- */

  .image-col {
    padding: 0 !important;
    min-height:550px;
  }

.text-col {
    align-content: space-evenly;
}


  .max-width-wrapper {
    max-width: 560px;
  }

    .h-section {
        padding-top: 110px !important;
        padding-bottom: 110px !important;
    }

.bg-grey {
    background-color: #f8f9fa;
}

  .mw-right {
    margin-right: auto;
    margin-left: 0;
  }

  .mw-left {
    margin-right: 0;
    margin-left: auto;
  }

  .image-col img {
    width: 100%;
    position: absolute;
    object-fit: cover;
    height: 100%;
  }

  .bg-image img {
    aspect-ratio: 27 / 10;
    object-fit: cover;
    width: 100%;
  }

.bg-image.last-banner img {
    aspect-ratio: 20 / 12;
    margin-bottom: min(-400px, -50vh);
}

a.btn.m-2 {
    display: inline-block;
    align-self: center;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    border-radius: .25rem;
    transition: color .15sease -in-out, background-color .15sease -in-out, border-color .15sease -in-out, box-shadow .15sease -in-out;
    white-space: unset;
}

/* Forms ---------------------------------------------------------------- */

._EmailForm {
  background-color: transparent;
  max-width: 600px;
  margin: 20px auto;
  width: 100%;
}

.mdl-textfield {
  width:100%;
}

.mdl-textfield__input {
    background-color: #ffffff;
  color: #212529;
  padding-left:5px;
}

label.mdl-textfield__label {
    padding-left: 5px;
  white-space: normal;
    display: contents;
}

._TextField.name_first, ._TextField.name_last {
    width: 49%;
}
._TextField.name_first {
  margin-right:1%;
}

.bg-dark ._EmailForm label {
    color: #ffffff !important;
}

.mdl-textfield__label {
    text-transform: none !important;
  font-size:16px!important;
}

.mdl-textfield.is-focused .mdl-textfield__input {
    color: inherit;
    border-color: var(--theme-primary-color);
}

.mdl-textfield--floating-label.has-placeholder .mdl-textfield__label, .mdl-textfield--floating-label.is-dirty .mdl-textfield__label, .mdl-textfield--floating-label.is-focused .mdl-textfield__label, .mdl-textfield--floating-label.is-active .mdl-textfield__label {
  color: var(--theme-primary-color);
}

div._Content input[type="text"], div._Content textarea {

}

.intl-tel-input {
    width: 100%;
}

._MobileNumber .mdl-textfield__label {
    left: 90px;
}

.mdl-textfield__label:after {
    width: 0;
    height: 0;
}

.mdl-button, .mdl-button--raised.mdl-button--colored, .mdl-button.mdl-button--colored {
    color: initial;
    text-transform: none;
} 
.mdl-button {
  border-radius:0;
  transition:0.3s;
}

.mdl-button--fab {
  border-radius: 50%;
  margin-top:10px;
  margin-right:5px;
}

.mdl-button:hover {
    background-color: rgb(158 158 158 / 50%);
  -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
}

.bg-dark .mdl-button--fab {
    background: rgb(255 255 255 / 75%);
}

.bg-dark .mdl-button--fab:hover {
    background: rgb(255 255 255 / 100%);
}

.mdl-textfield textarea {
    height: 100% !important;
}

._CheckBoxList ul.mdl-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.mdl-list__item {
   display: flex;
    flex-direction: row;
    align-items: center;
  padding:10px 30px 10px 0;
}

span.mdl-list__item-primary-content label {
    margin-bottom: 0;
}

._Captcha {
    padding-top: 15px;
    padding-bottom: 15px;
    margin-bottom: 10px;
}

/* Calendar / Date Picker */

.mddtp-picker .mddtp-picker__header, .mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__grid span.mddtp-picker__cell--selected, .mddtp-picker__body .mddtp-picker__viewHolder .mddtp-picker__grid .mddtp-picker__tr span.mddtp-picker__cell:hover {
   background-color: var(--theme-primary-color);
}


.mddtp-picker-date .mddtp-picker__left, .mddtp-picker-date .mddtp-picker__right, .mddtp-button {
    background-color: #bdbdbd;
    transition: 0.3s;
}

/* Online Manifest Database */

fieldset._Database.database {
    margin-bottom: 20px;
      padding: 50px 20px 20px 20px;
    border: 1px solid #dcdcdc;
  position:relative;
}

._EmailForm legend {
    font-size: 16px;
    position: absolute;
    top: 5px;
}

button._FieldAdd {
    margin-left: 20px;
}

._DatabaseItem {
  display:flex;
   align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
}

._DatabaseItem ._TextField {
    margin-right: 10px;
  flex: 0 0 22%;
}

button._FieldDelete {
    font-size: 14px !important;
    line-height: 1;
    padding: 3px;
  margin-left:20px;
}