@charset "UTF-8";
@font-face {
  font-family: "Futura-Bk";
  src: url("../fonts/../fonts/Futura-Book.eot");
  src: url("../fonts/futura/Futura-Book.eot?#iefix") format("embedded-opentype"), url("../fonts/futura/Futura-Book.woff2") format("woff2"), url("../fonts/futura/Futura-Book.woff") format("woff"), url("../fonts/futura/Futura-Book.svg#Futura-Book") format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Futura-Bk";
  src: url("../fonts/futura/Futura-Bold.eot");
  src: url("../fonts/futura/Futura-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/futura/Futura-Bold.woff2") format("woff2"), url("../fonts/futura/Futura-Bold.woff") format("woff"), url("../fonts/futura/Futura-Bold.svg#Futura-Bold") format("svg");
  font-weight: 700;
  font-style: normal;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

::selection {
  color: #000;
  background-color: #fffd5f;
  text-shadow: none;
}

::-moz-selection {
  color: #000;
  background-color: #fffd5f;
  text-shadow: none;
}


*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-color: #ffffff;
  overflow: hidden;
  font-family: "Futura-Bk", sans-serif;
  font-size: 100%;
  font-style: normal;
  font-weight: 400;
  text-align: left;
  color: #282828;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body::before {
  content: "desktop";
  display: none;
}

terms {
  background: #f7f7f7;
  border: 1px solid #ddd;
  padding: 20px;
  overflow-y: scroll;
}

@media only screen and (max-width: 1170px) {
  body {
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body::before {
    content: "tablet";
  }
  body.overflow {
    overflow-x: hidden;
    overflow-y: hidden;
    overflow: hidden;
  }
}
@media only screen and (max-width: 670px) {
  body::before {
    content: "mobile";
  }
}
h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}

h1, h2, h3, h4, h5, h6, a {
  speak: none;
  text-transform: none;
}

strong {
  font-weight: 700;
}

b {
  font-weight: 700;
}

em {
  font-style: italic;
}

h1 {
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 1.4em;
}

h2 {
  font-size: 26px;
  font-size: 1.625rem;
  line-height: 1.4em;
}

h3 {
  font-size: 21px;
  font-size: 1.3125rem;
  line-height: 1.4em;
}

h4 {
  font-size: 19px;
  font-size: 1.1875rem;
  line-height: 1.4em;
}

h5 {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.4em;
}

p {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.4em;
}

@media only screen and (max-width: 1600px) {
  h2 {
    font-size: 22px;
    font-size: 1.375rem;
  }

  h3 {
    font-size: 19px;
    font-size: 1.1875rem;
  }

  h4 {
    font-size: 18px;
    font-size: 1.125rem;
  }
}
@media only screen and (max-width: 670px) {
  h1 {
    font-size: 24px;
    font-size: 1.5rem;
  }

  h2 {
    font-size: 20px;
    font-size: 1.25rem;
  }
}
button, a {
  outline: none;
  cursor: pointer;
  border: none;
  text-decoration: none;
  background-color: transparent;
  margin: 0;
  padding: 0;
  color: #282828;
}

button:link, button:hover, button:visited, button:focus {
  outline: none;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, p a {
  color: inherit;
  text-transform: inherit;
  cursor: pointer;
}

/*Custom*/
.password-container{
    width: 100%;
    position: relative;
}
.password-container input[type="password"],
.password-container input[type="text"]{
    width: 100%;
    padding: 20px 0px 20px 0px;
    box-sizing: border-box;
}
.fa-eye{
    position: absolute;
    top: 35%;
    right: 4%;
    cursor: pointer;
    color: lightgray;
}
/* Add a black background color to the top navigation */
.tab {
    background-color: #ffffff;
    overflow: hidden;
    text-align: center;
}

/* Style the links inside the navigation bar */
.tab a {
    display: inline-block;
    color: black;
    background-color: #ddd;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Change the color of links on hover */
.tab a:hover {
    background-color: #ddd;
    color: white;
}

/* Add a color to the active/current link */
.tab a.active {
    background-color: #005699;
    color: white;
}
/*End Custom*/

.button {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: auto;
  height: auto;
  padding: 0 30px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  background-clip: padding-box;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  background-color: #004f91;
  color: #ffffff;
  font-size: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 44px;
}
.button:hover {
  background-color: #00335e;
}
.button.mini {
  padding: 0 10px;
  line-height: 22px;
  font-size: 10px;
  font-size: 0.625rem;
}
.button.white {
  background-color: #ffffff;
  color: #282828;
}
.button.white:hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.button.secondary {
  background-color: #15cf8c;
}
.button.secondary:hover {
  background-color: #0e8f61;
}
.button.black {
  background-color: #282828;
}
.button.black:hover {
  background-color: #686868;
}
.button.purple {
    background-color: #bd66f3;
    color: #00004c;
}
.button.purple:hover {
    background-color: #a538ef;
}

.button.cards-button{
    float: right;
    background: #F0F0F0;
    border: 1px solid #8BC751;
    color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cards-popup, .card-payment-popup{
    position: fixed;
    inset:0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}


.cards-container{
    /*position: fixed;*/
    /*left:45%;*/
    /*bottom:5rem;*/
    background: white;
    border-radius: 15px;
    max-width: fit-content;
    /*padding-bottom: 2rem;*/
    /*border: solid 1px #BDBDBD;*/
}

.cards-container .buttons-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.2rem 1rem 1.2rem 1rem;
    gap: 1.2rem;
    width: 100%;

}
.buttons-container.with-cards{
    border-bottom: solid 2px #BDBDBD;
    padding: 1rem 1rem 2.5rem 1rem !important;
}

.cards-container .buttons-container .button{
    width: 100%;
    text-align: center;
    background: none;
    border: 2px solid #004F91;
    border-radius: 10px;
    color: #004F91;
    font-weight: 700;
    font-size: 1rem;
    padding: 0 0.4rem;
}

.cards-container .buttons-container .button.blue{
    background: #004F91!important;
    color: white!important;
}

.cards-container .or{
    position: relative;
    padding: 0 0.3rem;
    left:47%;
    top: -1rem;
    background: white;
    width: fit-content;
    font-size: 1.2rem;
}

.cards-header{
    background: #95C23D;
    padding: 1rem 0.8rem;
    border-radius: 15px 15px 0 0;
    text-align: center;
}

.cards-header h3{
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
}

.cards-list{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1rem;
    margin-top: 2rem;
    overflow-y: auto;
    max-height: 26rem;
}

.cards-item{
    border: solid 1px #BDBDBD;
    border-radius: 15px;
    color: black;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.8rem;
    gap: 2rem;
    cursor: pointer;
}

.card-payment-popup .cards-item{
    border: solid 2px #004F91;
}

.cards-item img{
    width: 70px;
}

.card-details{
    display: flex;
    flex-direction: column;
}

.card-details .card-nickname{
    position: relative;
    top: 0.3rem;
    font-size: 1rem;
    font-weight: 700;
    color: #004F91;
    display: flex;
    gap: 3rem;
    align-items: center;
}

.card-details .card-nickname svg{
    cursor: pointer;
}

.card-details .card-number{
    font-size: 1.25rem;
}

.card-details .expiration{
    position: relative;
    top: -0.7rem;
    font-size: 0.7rem;
    color: #9B9B9B;
}

.delete-card{
    font-size: 1.1rem;
    color: #bc0400;
}

.delete-card i{
    position: relative;
    top: 0.1rem;
}

.default-card{
    position: relative;
    left:0.5rem;
    top:-0.4rem;
    /*margin-top:4.6rem;*/
    width: fit-content;
    border: solid 1px #BDBDBD;
    border-radius: 15px;
    font-size: 0.6rem;
    font-weight: 700;
    text-align: center;
    color: #004F91;
    background: white;
    padding: 0.3rem 0.8rem;
}

.cards-msg{
    display: grid;
    grid-template-columns: 10% 90%;
    border: 1px solid #F5F5F5;
    border-radius: 12px;
    margin: 2rem 1rem 1rem 1rem;
}

.cards-msg div{
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F5F5F5;
    padding: 0.8rem 0.5rem;
    border-radius: 12px 0 0 12px;
}

.cards-msg p{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 0.3rem;
    line-height: 1.5rem;
    font-size: 1rem;

}


.card-payment-popup .cards-list{
    margin-top: 0;
    padding-top: 1rem;
}

.saved-card-txt{
    font-size: 1.2rem;
    margin-left: 1.7rem;
}


.button.cards-button:hover{
    background: #dfdfdf;
}

.swal-button {
  background-color: #8bc751 !important;
}

@media only screen and (max-width: 1600px) {
  .button {
    padding: 0 20px;
  }
}
ul.social {
  position: relative;
  z-index: 10;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}
ul.social li {
  position: relative;
  -webkit-flex-basis: 44px;
  -ms-flex-basis: 44px;
  flex-basis: 44px;
  max-width: 44px;
}
ul.social li a {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
  background-color: transparent;
  overflow: hidden;
}
ul.social li a span {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
  background-image: url(../images/icons/social-media.svg);
  opacity: 0.5;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 10;
}
ul.social li a:hover span {
  opacity: 1;
}
ul.social li a.facebook span {
  background-position: 0px center;
}
ul.social li a.gplus span {
  background-position: -88px center;
}
ul.social li a.twitter span {
  background-position: -176px center;
}
ul.social li a.youtube span {
  background-position: -264px center;
}
ul.social li a.instagram span {
  background-position: -352px center;
}
ul.social li a.mail span {
  background-position: -440px center;
}
ul.social li a.linkedin span {
  background-position: -528px center;
}

ul.social.black li a.facebook span {
  background-position: -44px center;
}
ul.social.black li a.gplus span {
  background-position: -133px center;
}
ul.social.black li a.twitter span {
  background-position: -219px center;
}
ul.social.black li a.youtube span {
  background-position: -308px center;
}
ul.social.black li a.instagram span {
  background-position: -396px center;
}
ul.social.black li a.mail span {
  background-position: -484px center;
}
ul.social.black li a.linkedin span {
  background-position: -572px center;
}

ul.social.color li a.facebook {
  background-color: #3C5A96;
}
ul.social.color li a.gplus {
  background-color: #DB4C3F;
}
ul.social.color li a.twitter {
  background-color: #1DADEA;
}
ul.social.color li a.youtube {
  background-color: #E32524;
}
ul.social.color li a.instagram {
  background-color: #d10869;
}
ul.social.color li a.mail {
  background-color: #222222;
}
ul.social.color li a.linkedin {
  background-color: #0077B5;
}

.pager {
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 20px;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.pager nav {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: auto;
  height: auto;
}
.pager a, .pager span {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 50px;
  height: auto;
  margin-right: 1px;
  text-transform: uppercase;
  background-color: #cacaca;
  font-size: 13px;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 45px;
  text-align: center;
  color: #5a5a5a;
}
.pager a {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.pager a:hover {
  background-color: #bbbbbb;
}
.pager a.selected {
  background-color: #282828;
  color: #ffffff;
}
.pager a.next-page {
  display: inline-block;
  vertical-align: top;
  width: auto;
  height: auto;
  width: auto;
  padding: 0 60px;
  float: right;
  background-color: #282828;
  color: #ffffff;
}
.pager a.next-page:hover {
  background-color: #004f91;
}

@media only screen and (max-width: 670px) {
  .pager {
    margin: 20px 0;
    display: block;
    width: 100%;
    height: auto;
  }
  .pager nav {
    text-align: center;
    width: 100%;
  }
  .pager a.next-page {
    display: none;
  }
}
form, .form {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
form > *.mb-5, .form > *.mb-5 {
  margin-bottom: 5px;
}
form > *.mb-10, .form > *.mb-10 {
  margin-bottom: 10px;
}
form > *.mb-15, .form > *.mb-15 {
  margin-bottom: 15px;
}
form > *.mb-20, .form > *.mb-20 {
  margin-bottom: 20px;
}
form > *.mb-25, .form > *.mb-25 {
  margin-bottom: 25px;
}
form > *.mb-30, .form > *.mb-30 {
  margin-bottom: 30px;
}
form > *.mb-35, .form > *.mb-35 {
  margin-bottom: 35px;
}
form > *.mb-40, .form > *.mb-40 {
  margin-bottom: 40px;
}
form > *.mb-45, .form > *.mb-45 {
  margin-bottom: 45px;
}
form > *.mb-50, .form > *.mb-50 {
  margin-bottom: 50px;
}

.form-title {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
}
.form-title h2 {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 5px;
  color: #282828;
}
.form-title p {
  color: #5a5a5a;
}

form fieldset, form .form-item {
  position: relative;
  width: 100%;
  height: auto;
  background-color: transparent;
  border: none;
  padding: 0;
}
form fieldset a, form .form-item a {
  position: relative;
  display: inline-block;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  font-size: 14px;
  font-size: 0.875rem;
  color: #5a5a5a;
  text-decoration: none;
}
form fieldset a:hover, form .form-item a:hover {
  color: #72ad38;
}

.flex-form {
  position: relative;
  width: 100%;
  height: auto;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.flex-form.align-bottom {
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
}
.flex-form.align-center {
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.flex-form fieldset, .flex-form .form-item {
  position: relative;
  width: auto;
  margin-right: 20px;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.flex-form fieldset:last-of-type, .flex-form .form-item:last-of-type {
  margin-right: 0px;
}
.flex-form.space-between {
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.flex-form.space-between fieldset, .flex-form.space-between .form-item {
  margin-right: 0px;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
}

@media only screen and (max-width: 670px) {
  .flex-form {
    display: block;
  }
  .flex-form fieldset, .flex-form .form-item {
    margin-right: 0px;
    -webkit-flex-basis: 100%;
    -ms-flex-basis: 100%;
    flex-basis: 100%;
  }
}
form .flex-form .flex-item,
.form .flex-form .flex-item {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
form .flex-form .flex-item label, form .flex-form .flex-item input,
.form .flex-form .flex-item label,
.form .flex-form .flex-item input {
  width: auto;
}
form .flex-form .flex-item label,
.form .flex-form .flex-item label {
  margin-right: 10px;
}
form .flex-form .flex-item input,
.form .flex-form .flex-item input {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

@media only screen and (max-width: 670px) {
  form .flex-form .flex-item,
.form .flex-form .flex-item {
    display: block;
  }
  form .flex-form .flex-item label, form .flex-form .flex-item input,
.form .flex-form .flex-item label,
.form .flex-form .flex-item input {
    margin-right: 0px;
  }
}
form fieldset label,
form .form-item label,
.form .form-item label {
  position: relative;
  display: inline-block;
  font-size: 14px;
  font-size: 0.875rem;
  color: black;
  margin-bottom: 5px;
}

@media only screen and (max-width: 670px) {
  form fieldset label,
form .form-item label,
.form .form-item label {
    margin-bottom: 10px;
  }
}
form fieldset input,
.form-item input {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  padding: 20px 0;
  margin: 0;
  outline: none;
  box-shadow: none;
  border: none;
  border-bottom: 1px solid rgba(40, 40, 40, 0.2);
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  background-clip: padding-box;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  font-size: 15px;
  font-size: 0.9375rem;
  color: #5a5a5a;
  background-color: #ffffff;
}

.personal_info_form{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 10%;
}

.personal_info_label{
    padding-left: 10px!important;
}

.personal_info_container{
    display: flex;
    align-items: center;
}

.personal_info_container i{
    transform: translateX(-150%);
}

.personal_info_input{
    padding: 10px!important;
    padding-right: 22px!important;
    border-radius: 12px !important;
    box-shadow: 1px 2px 2px 0px rgba(0, 0, 0, 0.15) !important;
    max-width: 99%;
}

.personal_info_select{
    background-color: #FFFFFF!important;
    padding-left: 10px!important;
    border-radius: 12px !important;
    box-shadow: 1px 2px 2px 0px rgba(0, 0, 0, 0.3) !important;
    max-width: 97%;
    /*height:30px!important;*/
}

.personal_info_avatar{
    display: flex!important;
    justify-content: center!important;
}

.gdpr_form{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 10%!important;
    margin-top: 70px!important;
}

.gdpr_label{
    padding-left: 10px!important;
}

.gdpr_container{
    height: 80%;
    margin-top: 20px;
    padding: 10px;
    border-radius: 12px;
    background-color: #F5F4F4;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    max-width: 99%;
}

.gdpr_input{
    margin:5px;
    color: #004F91;
    font-size: smaller;
    display: flex;
    justify-content: space-between;
}

.gdpr_input p {
    color: #01329c !important;
    max-width: 80%;
}

.submit_container{
    margin-top: 60px!important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    }

.submit_container .breaker-title{
    margin-bottom: 30px;
}

.submit_container .breaker-title .infos .form-item{
    display: flex;
    justify-content: center;
}

.submit_container .button{
    width: 23%;
    min-width: 180px;
}

/*////////////////////////CUSTOM TOGGLE SWITCH   START*/

.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 23px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #D0D0D0;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider2 {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000000;
    opacity: 0.5;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider2.round2 {
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 19px;
    width: 19px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #acf674;
;
}

input:focus + .slider {
    box-shadow: 0 0 1px #acf674;
}

input:checked + .slider:before {
    -webkit-transform: translateX(17px);
    -ms-transform: translateX(17px);
    transform: translateX(17px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/*////////////////////////CUSTOM TOGGLE SWITCH   END*/


form fieldset input::-webkit-input-placeholder,
.form-item input::-webkit-input-placeholder {
  color: #5a5a5a;
}
form fieldset input:-moz-placeholder,
.form-item input:-moz-placeholder {
  color: #5a5a5a;
}
form fieldset input::-moz-placeholder,
.form-item input::-moz-placeholder {
  color: #5a5a5a;
}
form fieldset input:-ms-input-placeholder,
.form-item input:-ms-input-placeholder {
  color: #5a5a5a;
}
form fieldset input:focus,
.form-item input:focus {
  background-color: #f0f0f0;
  padding: 20px;
  outline: none;
  color: #282828;
  border-bottom-color: rgba(40, 40, 40, 0);
}
form fieldset input.input-validation-error,
.form-item input.input-validation-error {
  border-bottom-color: rgba(40, 40, 40, 0);
  background-color: #ffe6e6;
  padding: 20px;
}

form span.field-validation-error,
.form span.field-validation-error {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  margin: 10px 0;
  color: #cc0000;
  font-size: 12px;
  font-size: 0.75rem;
}

form textarea,
.form textarea {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  min-height: 150px;
  padding: 18px;
  margin: 0px;
  outline: none;
  box-shadow: none;
  resize: none;
  resize: vertical;
  border: 1px solid rgba(40, 40, 40, 0.1);
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  background-clip: padding-box;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  font-size: 15px;
  font-size: 0.9375rem;
  color: #5a5a5a;
  background-color: #ffffff;
  text-align: left;
}
form textarea::-webkit-input-placeholder,
.form textarea::-webkit-input-placeholder {
  color: #5a5a5a;
}
form textarea:-moz-placeholder,
.form textarea:-moz-placeholder {
  color: #5a5a5a;
}
form textarea::-moz-placeholder,
.form textarea::-moz-placeholder {
  color: #5a5a5a;
}
form textarea:-ms-input-placeholder,
.form textarea:-ms-input-placeholder {
  color: #5a5a5a;
}
form textarea:focus,
.form textarea:focus {
  border-color: rgba(40, 40, 40, 0);
  background-color: #f0f0f0;
  padding: 20px;
  outline: none;
  color: #282828;
}

form input[type=checkbox],
.form input[type=checkbox] {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  z-index: 10;
}

form label[for*=checkbox],
.form label[for*=checkbox] {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  padding-left: 30px;
}
form label[for*=checkbox] a,
.form label[for*=checkbox] a {
  position: relative;
  display: inline-block;
  color: #acf674;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 11;
}
form label[for*=checkbox] a:hover,
.form label[for*=checkbox] a:hover {
  color: #72ad38;
}

form label[for*=checkbox]::before,
.form label[for*=checkbox]::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 37%;
  right: auto;
  bottom: auto;
  left: 0;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  border: 1px solid #282828;
  background-color: #ffffff;
  box-shadow: none;
}

form label[for*=checkbox]::after,
.form label[for*=checkbox]::after {
  content: "";
  display: none;
  position: absolute;
  top: 2px;
  right: auto;
  bottom: auto;
  left: 6px;
  width: 5px;
  height: 8px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  border-bottom: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
}

form input[type=checkbox]:checked + label::before,
.form input[type=checkbox]:checked + label::before {
  border-color: #004f91;
  background-color: #004f91;
}

form input[type=checkbox]:checked + label::after,
.form input[type=checkbox]:checked + label::after {
  display: block;
}

@media only screen and (max-width: 670px) {
  form label[for*=checkbox],
.form label[for*=checkbox] {
    margin-bottom: 10px;
  }
}
form input[type=radio],
.form input[type=radio] {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  z-index: 10;
}

form label[for*=radio],
.form label[for*=radio] {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  padding-left: 30px;
}
form label[for*=radio] a,
.form label[for*=radio] a {
  position: relative;
  display: inline-block;
  color: #8bc751;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 11;
}
form label[for*=radio] a:hover,
.form label[for*=radio] a:hover {
  color: #72ad38;
}

form label[for*=radio]::before,
.form label[for*=radio]::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 0;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  border: 1px solid #282828;
  box-shadow: none;
}

form input[type=radio] + label[for*=radio]::before,
.form input[type=radio] + label[for*=radio]::before {
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  background-clip: padding-box;
}

form label[for*=radio]::after,
.form label[for*=radio]::after {
  content: "";
  display: none;
  position: absolute;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 4px;
  width: 8px;
  height: 8px;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  background-clip: padding-box;
  background-color: #8bc751;
}

form input[type=radio]:checked + label::after,
.form input[type=radio]:checked + label::after {
  display: block;
}

@media only screen and (max-width: 670px) {
  form label[for*=radio],
.form label[for*=radio] {
    margin-bottom: 10px;
  }
}
form .submit,
.form .submit {
  position: relative;
  display: inline-block;
  border: none;
  outline: none;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  color: #fff;
  padding: 0 50px;
  line-height: 50px;
  text-decoration: none;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: 700;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
form .submit:focus,
.form .submit:focus {
  outline: none;
}
form .submit.basic,
.form .submit.basic {
  background-color: #004f91;
}
form .submit.basic:hover,
.form .submit.basic:hover {
  background-color: #00335e;
}
form .submit.success,
.form .submit.success {
  background-color: #15cf8c;
}
form .submit.success:hover,
.form .submit.success:hover {
  background-color: #0d8e60;
}
form .submit.danger,
.form .submit.danger {
  background-color: #cc0000;
}
form .submit.danger:hover,
.form .submit.danger:hover {
  background-color: #990000;
}

@media only screen and (max-width: 670px) {
  form .submit,
.form .submit {
    padding: 0 30px;
    line-height: 50px;
    margin-bottom: 10px;
  }
  form .submit:last-of-type,
.form .submit:last-of-type {
    margin-bottom: 0px;
  }
}
form .select-item::after,
.form .select-item::after {
  content: "";
  position: absolute;
  top: 25px;
  right: 25px;
  width: 0;
  height: 0;
  padding: 0;
  display: inline-block;
  border: 5px solid transparent;
  border-top: 8px solid #282828;
  pointer-events: none;
}
form .select-item select,
.form .select-item select {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  background-color: #f0f0f0;
  font-size: 15px;
  font-size: 0.9375rem;
  padding: 20px 60px 20px 20px;
  color: #282828;
  outline: none;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
form .select-item select:focus,
.form .select-item select:focus {
  outline: none;
}
form .select-item.black::after,
.form .select-item.black::after {
  top: 19px;
  right: 12px;
  border-width: 4px;
  border-top-width: 6px;
  border-top-color: #ffffff;
}
form .select-item.black select,
.form .select-item.black select {
  background-color: #282828;
  padding: 13px 30px 13px 20px;
  color: #ffffff;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  background-clip: padding-box;
}
form .select-item.purple select,
.form .select-item.purple select {
    background-color: #bd66f3;
    padding: 13px 30px 13px 20px;
    color: #ffffff;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    background-clip: padding-box;
}
form .select-item.purple::after,
.form .select-item.purple::after {
    top: 19px;
    right: 12px;
    border-width: 4px;
    border-top-width: 6px;
    border-top-color: #ffffff;
}

form .avatar {
  width: 120px;
  height: 120px;
  position: relative;
  border-radius: 100%;
  border: 6px solid #F8F8F8;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}
form .avatar div {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#meters-select-button, #meters-select-responsive-button {
  width: calc(100%) !important;
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  border: none;
  color: #ffffff;
  background-color: #004f91;
  cursor: pointer;
  font-size: 11px;
  font-size: 0.6875rem;
  text-transform: uppercase !important;
  padding: 0px 0px 0px 30px !important;
  font-weight: 700;
  height: 35px !important;
  line-height: 35px !important;
  margin-bottom: 5px;
  border-radius: 0;
}
#meters-select-button.gas, #meters-select-responsive-button.gas {
  background-color: #01329c !important;
}
#meters-select-button.electricity, #meters-select-responsive-button.electricity {
  background-color: #15cf8c !important;
}
#meters-select-button:focus, #meters-select-responsive-button:focus {
  outline: none !important;
}
#meters-select-button .ui-selectmenu-icon, #meters-select-responsive-button .ui-selectmenu-icon {
  margin: 10px auto;
}

.ui-selectmenu-menu {
    height: 400px !important;
    overflow: auto;
  z-index: 1000;
}
@media only screen and (max-width: 1170px) {
  .ui-selectmenu-menu {
    max-width: 160px;
  }
}

#meters-select-menu .ui-menu-item, #meters-select-responsive-menu .ui-menu-item {
  font-size: 14px;
  font-size: 0.875rem;
  color: #5a5a5a !important;
}
@media only screen and (max-width: 1170px) {
  #meters-select-menu .ui-menu-item, #meters-select-responsive-menu .ui-menu-item {
    font-size: 13px;
    font-size: 0.8125rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
#meters-select-menu .ui-menu-item .ui-menu-item-wrapper, #meters-select-responsive-menu .ui-menu-item .ui-menu-item-wrapper {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
#meters-select-menu .ui-menu-item .ui-state-active, #meters-select-responsive-menu .ui-menu-item .ui-state-active {
  border: none;
  color: #5a5a5a !important;
  background-color: lightgrey;
}

table {
  max-width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.table, .item-table {
  width: 100%;
  margin-bottom: 1.529411765em;
}

.table th, .item-table th,
.table td,
.item-table td {
  padding: 0.470588235em;
  text-align: left;
  border-top: 0.071428571em solid #b8b8b8;
}

.table th, .item-table th {
  font-weight: bold;
  vertical-align: bottom;
}

.table td, .item-table td {
  vertical-align: top;
}

.table thead:first-child tr th, .item-table thead:first-child tr th,
.table thead:first-child tr td,
.item-table thead:first-child tr td {
  border-top: 0;
}

.table tbody + tbody, .item-table tbody + tbody {
  border-top: 0.142857143em solid #b8b8b8;
}

.table-condensed th,
.table-condensed td {
  padding: 0.294117647em;
}

/* Adds borders and border-radius.  */
.table-bordered, .item-table {
  border: 0.071428571em solid #b8b8b8;
  border-collapse: separate;
  *border-collapse: collapsed;
  border-radius: 0.470588235em;
}

.table-bordered th + th, .item-table th + th,
.table-bordered td + td,
.item-table td + td,
.table-bordered th + td,
.item-table th + td,
.table-bordered td + th,
.item-table td + th {
  border-left: 0.071428571em solid #b8b8b8;
}

.table-bordered thead:first-child tr:first-child th, .item-table thead:first-child tr:first-child th,
.table-bordered tbody:first-child tr:first-child th,
.item-table tbody:first-child tr:first-child th,
.table-bordered tbody:first-child tr:first-child td,
.item-table tbody:first-child tr:first-child td {
  border-top: 0;
}

.table-bordered thead:first-child tr:first-child th:first-child, .item-table thead:first-child tr:first-child th:first-child,
.table-bordered tbody:first-child tr:first-child td:first-child,
.item-table tbody:first-child tr:first-child td:first-child {
  border-radius: 0.470588235em 0 0 0;
}

.table-bordered thead:first-child tr:first-child th:last-child, .item-table thead:first-child tr:first-child th:last-child,
.table-bordered tbody:first-child tr:first-child td:last-child,
.item-table tbody:first-child tr:first-child td:last-child {
  border-radius: 0 0.470588235em 0 0;
}

.table-bordered thead:last-child tr:last-child th:first-child, .item-table thead:last-child tr:last-child th:first-child,
.table-bordered tbody:last-child tr:last-child td:first-child,
.item-table tbody:last-child tr:last-child td:first-child {
  border-radius: 0 0 0 0.470588235em;
}

.table-bordered thead:last-child tr:last-child th:last-child, .item-table thead:last-child tr:last-child th:last-child,
.table-bordered tbody:last-child tr:last-child td:last-child,
.item-table tbody:last-child tr:last-child td:last-child {
  border-radius: 0 0 0.470588235em 0;
}

.item-table {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  background-clip: padding-box;
  border-color: #ffffff;
  word-break: break-all;
}
.item-table th, .item-table td {
  text-align: center;
  font-size: 12px;
  font-size: 0.75rem;
  vertical-align: middle;
  padding: 12px 5px;
  border-color: #ffffff;
}
.item-table th a, .item-table td a {
  color: #004f91;
}
.item-table th + th, .item-table td + td, .item-table th + td, .item-table td + th {
  border-color: #ffffff;
}
.item-table thead {
  background-color: #15cf8c;
  text-align: center;
}
.item-table thead th {
  font-size: 10px;
  font-size: 0.625rem;
  color: #ffffff;
}
.item-table tbody tr:nth-child(odd) {
  background-color: #f0f0f0;
}
.item-table tbody:last-child tr:last-child td:first-child,
.item-table tbody:last-child tr:last-child td:first-child,
.item-table thead:last-child tr:last-child th:last-child,
.item-table tbody:last-child tr:last-child td:last-child,
.item-table tbody:last-child tr:last-child td:last-child,
.item-table thead:first-child tr:first-child th:first-child,
.item-table thead:first-child tr:first-child th:last-child {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  background-clip: padding-box;
}

div#close {
  position: fixed;
  top: 60px;
  right: 70px;
  bottom: auto;
  left: auto;
  display: inline-block;
  vertical-align: top;
  width: auto;
  height: auto;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 500;
}
div#close.isLeft {
  top: 60px;
  left: -13px;
  right: auto;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
div#close.active {
  opacity: 1;
  visibility: visible;
}
div#close button {
  position: relative;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
div#close button span.icon {
  position: relative;
  display: block;
  width: 25px;
  height: 25px;
  margin-right: 15px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
div#close button span.icon span.line {
  display: block;
  width: auto;
  height: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background-color: #282828;
}
div#close button span.icon span.line:first-child {
  width: 100%;
  height: 2px;
}
div#close button span.icon span.line:last-child {
  width: 2px;
  height: 100%;
}
div#close button span.text {
  position: relative;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-size: 13px;
  font-size: 0.8125rem;
  color: #282828;
  text-transform: uppercase;
  font-weight: 700;
}

@media only screen and (min-width: 1171px) {
  div#close.isLeft span.icon span.line {
    background-color: #ffffff;
  }
  div#close.isLeft span.text {
    color: #ffffff;
  }
}
@media only screen and (max-width: 1600px) {
  div#close {
    top: 35px;
    right: 50px;
  }
}
@media only screen and (max-width: 1170px) {
  div#close {
    top: 35px;
    right: 30px;
  }
  div#close.isLeft {
    left: auto;
    top: 35px;
    right: 30px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@media only screen and (max-width: 670px) {
  div#close {
    top: 20px;
    right: 20px;
  }
  div#close.isLeft {
    top: 20px;
    right: 20px;
  }
  div#close button {
    width: 44px;
    height: 44px;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  div#close button span.icon {
    margin: auto;
  }
  div#close button span.icon span.line {
    background-color: #5a5a5a;
  }
  div#close button span.text {
    display: none;
  }
}
#overlay {
  position: fixed;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 150;
}
#overlay.active {
  opacity: 1;
  visibility: visible;
}

header {
  position: fixed;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  display: block;
  width: 310px;
  height: 100%;
  background-color: #f5f1e2;
  padding: 50px 40px 100px 40px;
  z-index: 100;
}

@media only screen and (max-width: 1600px) {
  header {
    width: 260px;
    padding: 40px 30px 80px 30px;
    overflow: hidden;
  }
}
@media screen and (max-width: 1171px), screen and (max-height: 1080px) {
  header {
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
  header::-webkit-scrollbar {
    width: 10px;
    display: none;
  }
  header::-webkit-scrollbar-track {
    background: #f0f0f0;
  }
  header::-webkit-scrollbar-thumb {
    background: #5a5a5a;
  }
  header::-webkit-scrollbar-thumb:hover {
    background: #282828;
  }
}
@media only screen and (max-width: 1170px) {
  header {
    position: relative;
    width: 100vw;
    height: auto;
    padding: 0px;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    z-index: 102;
  }
}
header .header-top {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  background-color: #f5f1e2;
}
header .header-top .sticky-inner {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  background-color: #f5f1e2;
}

@media only screen and (max-width: 1170px) {
  header .header-top {
    -webkit-order: 2;
    -ms-order: 2;
    order: 2;
    height: 80px;
  }
  header .header-top .sticky-inner {
    padding: 10px 15px 10px 15px;
    background-color: #ffffff;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
  header .header-top.sticky .sticky-inner {
    position: fixed;
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    -webkit-box-shadow: 0 0 10px 0 rgba(40, 40, 40, 0.2);
    -moz-box-shadow: 0 0 10px 0 rgba(40, 40, 40, 0.2);
    box-shadow: 0 0 10px 0 rgba(40, 40, 40, 0.2);
    z-index: 100;
  }
}
@media only screen and (max-width: 670px) {
  header .header-top {
    height: 60px;
  }
  header .header-top .sticky-inner {
    padding: 0px 10px;
  }
}
header .languages {
  position: fixed;
  top: 14px;
  right: 14px;
  bottom: auto;
  left: auto;
  background: #00004c;
  /*opacity: 0.8;*/
  width: 60px;
  height: -moz-calc(100vh - 28px);
  height: -webkit-calc(100vh - 28px);
  height: calc(100vh - 28px);
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
header .languages .inner {
  position: relative;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  white-space: nowrap;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
header .languages .inner ul {
  width: 230px;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}
header .languages .inner ul li {
  position: relative;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  margin-right: 15px;
}
header .languages .inner ul li:last-of-type {
  margin-right: 0px;
}
header .languages .inner ul li p, header .languages .inner ul li a {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  font-size: 15px;
  font-size: 0.9375rem;
  line-height: 25px;
  color: #ffffff;
  text-align: center;
}
header .languages .inner ul li a {
  font-weight: 700;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
header .languages .inner ul li a:hover, header .languages .inner ul li a.selected {
  color: #acf674;
}
header .languages .inner ul li a.selected {
  cursor: default;
  pointer-events: none;
}
header .languages .inner ul li a:last-of-type {
  margin-right: 0px;
}
header .languages .inner ul li p {
  padding-right: 40px;
}
header .languages .inner ul li p:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  display: block;
  width: 25px;
  height: 2px;
  margin: auto;
  background-color: #ffffff;
}

@media screen and (max-width: 1171px), screen and (max-height: 700px) {
  header .languages .inner ul li p {
    display: none;
  }
}
@media only screen and (max-width: 1170px) {
  header .languages {
    position: relative;
    top: auto;
    right: auto;
    width: auto;
    height: auto;
    background: #fff;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
  header .languages .inner {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    white-space: normal;
    display: block;
    width: 100%;
    height: auto;
  }
  header .languages .inner ul {
    width: 100%;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }
  header .languages .inner ul li {
    margin-right: 0px;
    width: 44px;
    height: 44px;
    text-align: center;
  }
  header .languages .inner ul li:first-of-type {
    display: none;
  }
  header .languages .inner ul li a {
    color: black;
    line-height: 44px;
    z-index: 10;
    font-size: 13px;
    font-size: 0.8125rem;
  }
  header .languages .inner ul li a::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    display: block;
    width: 30px;
    height: 30px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    background-clip: padding-box;
    background-color: #ffffff;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    z-index: -1;
  }
  header .languages .inner ul li a:hover {
    color: black;
  }
  header .languages .inner ul li a.selected {
    color: #ffffff;
  }
  header .languages .inner ul li a.selected::before {
    background-color: #acf674;
  }
}
@media only screen and (max-width: 670px) {
  header .languages .inner ul li {
    width: 40px;
    height: 40px;
  }
  header .languages .inner ul li a {
    line-height: 40px;
    font-size: 12px;
    font-size: 0.75rem;
  }
}
header .elpedison-logo {
  position: relative;
  margin: 0 auto;
  display: block;
  width: 200px;
  height: auto;
}
header .elpedison-logo img {
  display: block;
  width: 100%;
  height: auto;
}

@media only screen and (max-width: 1170px) {
  header .elpedison-logo {
    width: 180px;
  }
}
@media only screen and (max-width: 670px) {
  header .elpedison-logo {
    width: 140px;
  }
}
.trigger-menu {
  position: relative;
  display: none;
  width: 60px;
  height: 60px;
  background-color: transparent;
  cursor: pointer;
}
.trigger-menu span.icon {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  display: block;
  width: 22px;
  height: 2px;
  background-color: #282828;
}
.trigger-menu span.icon::after, .trigger-menu span.icon::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #282828;
}
.trigger-menu span.icon::after {
  margin-top: 7px;
}
.trigger-menu span.icon::before {
  margin-top: -7px;
}

@media only screen and (max-width: 1170px) {
  .trigger-menu {
    display: inline-block;
  }
}
@media only screen and (max-width: 670px) {
  .trigger-menu {
    margin-right: -10px;
    margin-left: 10px;
    background-color: #f0f0f0;
  }
}
header nav {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0px;
  padding-top: 50px;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}

@media only screen and (max-width: 1600px) {
  header nav {
    padding-top: 20px;
  }
}
@media screen and (max-width: 1171px), screen and (max-height: 1080px) {
  header nav {
    height: auto;
  }
}
@media only screen and (max-width: 1170px) {
  header nav {
    height: auto;
    -webkit-order: 1;
    -ms-order: 1;
    order: 1;
    padding: 0px 14px 0px 0px;
    background-color: #282828;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}
@media only screen and (max-width: 670px) {
  header nav {
    padding: 0px;
    display: block;
  }
}
header .user-profile {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  background-color: #f5f1e2;
}

@media only screen and (max-width: 1170px) {
  header .user-profile {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background-color: transparent;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
}
@media only screen and (max-width: 670px) {
  header .user-profile {
    width: 100%;
  }
}
header .user-profile .user-image {
  position: relative;
  display: block;
  width: 100px;
  height: 100px;
  overflow: hidden;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  background-clip: padding-box;
  margin-bottom: 10px;
}
header .user-profile .user-image a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
header .user-profile .user-image a img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

@media only screen and (max-width: 1600px) {
  header .user-profile .user-image {
    width: 80px;
    height: 80px;
  }
}
@media only screen and (max-width: 1170px) {
  header .user-profile .user-image {
    display: inline-block;
    width: 60px;
    height: 60px;
    margin-bottom: 0px;
    margin-right: 10px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    background-clip: padding-box;
  }
}
header .user-profile .user-infos {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
header .user-profile .user-infos h4 {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  font-weight: 700;
}
header .user-profile .user-infos p {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}
header .user-profile .user-infos p a {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  color: #5a5a5a;
  font-size: 0.9rem;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
header .user-profile .user-infos p a:hover {
  color: #8bc751;
}

@media only screen and (max-width: 1170px) {
  header .user-profile .user-infos {
    display: inline-block;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
  header .user-profile .user-infos h4 {
    color: #ffffff;
  }
  header .user-profile .user-infos p {
    margin-bottom: 0px;
  }
}
header .user-profile .user-nav {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}
header .user-profile .user-nav li {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 2px;
}
header .user-profile .user-nav li:last-of-type {
  margin-bottom: 0px;
}
header .user-profile .user-nav li.meter-select-wrapper-responsive {
  display: none;
}
header .user-profile .user-nav li.meter-select-wrapper, header .user-profile .user-nav li.meter-select-wrapper-responsive {
  height: 35px;
  line-height: 35px;
}
header .user-profile .user-nav li.meter-select-wrapper span.icon, header .user-profile .user-nav li.meter-select-wrapper-responsive span.icon {
  position: absolute;
  top: 0;
  right: auto;
  bottom: 0;
  left: 0;
  display: block;
  width: 30px;
  height: 30px;
  margin: auto;
  background-image: url(../images/icons/user-icons.svg);
  background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    background-size: 132px 22px;
    background-position: -66px center;
    margin-left: 5px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 1000;
}
header .user-profile .user-nav li a {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  padding-left: 30px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  font-size: 11px;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 35px;
  text-transform: uppercase;
  color: #ffffff;
}
header .user-profile .user-nav li a.profile {
  background-color: #8bc751;
}
header .user-profile .user-nav li a.profile:hover {
  background-color: #72ad38;
}
header .user-profile .user-nav li a.office {
  color: #5a5a5a;
  background-color: #f0f0f0;
}
header .user-profile .user-nav li a.office:hover {
  background-color: #e3e3e3;
}
header .user-profile .user-nav li a.office:hover.gas {
  border-left: 5px solid #01329c;
}
header .user-profile .user-nav li a.office:hover.electricity {
  border-left: 5px solid #15cf8c;
}
header .user-profile .user-nav li a.office.selected.gas {
  color: #ffffff;
  background-color: #01329c;
}
header .user-profile .user-nav li a.office.selected.electricity {
  color: #ffffff;
  background-color: #15cf8c;
}
header .user-profile .user-nav li a span.icon,
header .user-profile .user-nav li a span.edit-icon {
  position: absolute;
  top: 0;
  right: auto;
  bottom: 0;
  left: 0;
  display: block;
  width: 30px;
  height: 30px;
  margin: auto;
  background-image: url(../images/icons/user-icons.svg);
  background-repeat: no-repeat;
  background-size: 180px 30px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
header .user-profile .user-nav li a span.edit-icon {
  opacity: 0;
}
header .user-profile .user-nav li a.profile span.icon {
  background-position: left center;
}
header .user-profile .user-nav li a.profile span.edit-icon {
  background-position: -150px center;
}
header .user-profile .user-nav li a.office span.icon {
  background-position: -30px center;
}
header .user-profile .user-nav li a.office span.edit-icon {
  background-position: -120px center;
}

@media only screen and (max-width: 1600px) {
  header .user-profile .user-nav {
    margin-bottom: 30px;
  }
  header .user-profile .user-nav li a {
    font-size: 10px;
    font-size: 0.625rem;
  }
}
@media only screen and (max-width: 1170px) {
  header .user-profile .user-nav {
    width: auto;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    margin-bottom: 0px;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
  header .user-profile .user-nav li {
    width: 44px;
    height: 44px;
    margin-bottom: 0px;
    margin-right: 4px;
  }
  header .user-profile .user-nav li.meter-list-item {
    display: none;
  }
  header .user-profile .user-nav li.meter-select-wrapper {
    display: none;
  }
  header .user-profile .user-nav li.meter-select-wrapper-responsive {
    display: block;
    width: 160px;
  }
  header .user-profile .user-nav li:last-of-type {
    margin-right: 12px;
  }
  header .user-profile .user-nav li a {
    width: 100%;
    height: 100%;
    padding-left: 0px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    background-clip: padding-box;
  }
  .scrollable{
    overflow: auto;
      height: 100px;
  }
  header .user-profile .user-nav li a.profile, header .user-profile .user-nav li a.office {
    background-color: transparent;
    border: none;
  }
  header .user-profile .user-nav li a.profile:hover, header .user-profile .user-nav li a.office:hover {
    background-color: transparent;
  }
  header .user-profile .user-nav li a span.text {
    display: none;
  }
  header .user-profile .user-nav li a span.icon {
    right: 0;
    margin: auto;
    -webkit-transform-origin: center;
    transform-origin: center;
  }
  header .user-profile .user-nav li a span.edit-icon {
    display: none;
  }
  header .user-profile .user-nav li a.profile span.icon {
    background-position: -60px center;
  }
  header .user-profile .user-nav li a.office span.icon {
    background-position: -90px center;
  }
  header .user-profile .user-nav li a:hover span.icon {
    opacity: 1;
  }
  header .user-profile .user-nav li a:hover span.edit-icon {
    opacity: 0;
  }
}
@media only screen and (max-width: 670px) {
  header .user-profile .user-nav li {
    margin-right: 0px;
  }
  header .user-profile .user-nav li:last-of-type {
    margin-right: 7px;
  }
  header .user-profile .user-nav li a {
    width: 100%;
    height: 100%;
    padding-left: 0px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    background-clip: padding-box;
  }
}
header .primary {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
header .primary ul.primary-nav {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
header .primary ul.primary-nav li {
  display: block;
  width: 100%;
  height: auto;
  /*border-bottom: 1px solid #ebc8ff;*/
}
header .primary ul.primary-nav li a {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  cursor: pointer;
  font-size: 18px;
  font-size: 1.125rem;
  color: #272727;
  line-height: 38px;
}
header .primary ul.primary-nav li a.admin, header .primary ul.primary-nav li a.admin:hover {
  color: #01329c;
  font-weight: 700;
}
header .primary ul.primary-nav li a:hover {
  color: #282828;
}
header .primary ul.primary-nav li a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  left: auto;
  margin: auto;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  display: block;
  width: 7px;
  height: 7px;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
  border-top: 2px solid #bd66f3;
  border-right: 2px solid #bd66f3;
}
header .primary ul.primary-nav li a:hover::after {
  border-color: #282828;
}

header .primary ul.primary-nav li.has-children ul.submenu {
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  display: none;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: #f5f1e2;
}
header .primary ul.primary-nav li.has-children ul.submenu.active {
  display: block;
}
header .primary ul.primary-nav li.has-children ul.submenu li a {
  font-size: 14px;
  font-size: 0.875rem;
}
header .primary ul.primary-nav li.has-children ul.submenu li a.back {
  color: #f5f1e2;
  font-weight: 700;
  padding-left: 30px;
  background-color: #01329c;
}
header .primary ul.primary-nav li.has-children ul.submenu li a.back::after {
  content: "";
  left: 14px;
  right: auto;
  border-top: none;
  border-right: none;
  border-bottom: 2px solid #bd66f3;
  border-left: 2px solid #bd66f3;
}

@media only screen and (max-width: 1600px) {
  header .primary ul.primary-nav li a {
    font-size: 16px;
    font-size: 1rem;
  }
}
@media screen and (max-width: 1171px), screen and (max-height: 1080px) {
  header .primary ul.primary-nav {
    margin-bottom: 30px;
  }
}
@media only screen and (max-width: 1170px) {
  header .primary {
    position: fixed;
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #ffffff;
    padding: 0 20%;
    -webkit-transform: translate(0, -100%);
    -moz-transform: translate(0, -100%);
    -o-transform: translate(0, -100%);
    -ms-transform: translate(0, -100%);
    transform: translate(0, -100%);
    overflow: hidden;
    z-index: 100;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
  header .primary ul.primary-nav {
    margin-bottom: 0px;
  }
  header .primary ul.primary-nav li {
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
  }
  header .primary ul.primary-nav li a {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 44px;
  }
}
@media only screen and (max-width: 670px) {
  header .primary {
    padding: 0 15%;
  }
}
header .user-controls {
  position: relative;
  display: inline-block;
}
header .user-controls a {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  padding-left: 35px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
header .user-controls a::before {
  content: "";
  position: absolute;
  top: 0;
  right: auto;
  bottom: 0;
  left: 0;
  margin: auto;
  display: block;
  width: 24px;
  height: 24px;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  background-clip: padding-box;
  border: 2px solid #282828;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
header .user-controls a span.icon {
  position: absolute;
  top: 0;
  right: auto;
  bottom: 0;
  left: 10px;
  margin: auto;
  display: block;
  width: 18px;
  height: 10px;
  background-color: #f5f1e2;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
header .user-controls a span.icon::after {
  content: "";
  position: absolute;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: block;
  width: 100%;
  height: 2px;
  background-color: #282828;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
header .user-controls a span.icon::before {
  content: "";
  position: absolute;
  top: 0;
  right: auto;
  bottom: 0;
  left: 0;
  margin: auto;
  display: block;
  width: 8px;
  height: 8px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  border-left: 2px solid #282828;
  border-bottom: 2px solid #282828;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

header .user-controls a:hover {
  color: #5a5a5a;
}
header .user-controls a:hover::before {
  border-color: #8bc751;
}
header .user-controls a:hover span.icon {
  -webkit-transform: translate(-2px, 0);
  -moz-transform: translate(-2px, 0);
  -o-transform: translate(-2px, 0);
  -ms-transform: translate(-2px, 0);
  transform: translate(-2px, 0);
}
header .user-controls a:hover span.icon::after {
  background-color: #8bc751;
}
header .user-controls a:hover span.icon::before {
  border-color: #8bc751;
}

@media only screen and (max-width: 1170px) {
  header .user-controls {
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    margin: auto;
  }
  header .user-controls a {
    width: 44px;
    height: 44px;
    padding: 0px;
  }
  header .user-controls a::before {
    border-color: #ffffff;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  header .user-controls a span.text {
    display: none;
  }
  header .user-controls a span.icon {
    background-color: #282828;
  }
  header .user-controls a span.icon::after {
    background-color: #ffffff;
  }
  header .user-controls a span.icon::before {
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
  }

  header .user-controls a:hover::before {
    border-color: #ffffff;
  }
  header .user-controls a:hover span.icon {
    -webkit-transform: translate(0px, 0);
    -moz-transform: translate(0px, 0);
    -o-transform: translate(0px, 0);
    -ms-transform: translate(0px, 0);
    transform: translate(0px, 0);
  }
  header .user-controls a:hover span.icon::after {
    background-color: #ffffff;
  }
  header .user-controls a:hover span.icon::before {
    border-color: #ffffff;
  }
}
@media only screen and (max-width: 670px) {
  header .user-controls {
    position: fixed;
    top: 20px;
    right: auto;
    bottom: auto;
    left: 20px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  header .user-controls.active {
    opacity: 1;
    visibility: visible;
  }
  header .user-controls a::before {
    border-color: #5a5a5a;
  }
  header .user-controls a span.icon {
    background-color: #ffffff;
  }
  header .user-controls a span.icon::after {
    background-color: #5a5a5a;
  }
  header .user-controls a span.icon::before {
    border-color: #5a5a5a;
  }
}
header .notifications {
  position: fixed;
  top: 14px;
  right: 14px;
  bottom: auto;
  left: auto;
  display: block;
  width: 60px;
  height: auto;
}
header .notifications li {
  position: relative;
  display: block;
  width: 60px;
  height: 60px;
}
header .notifications li a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  margin: auto;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
header .notifications li a span.text {
  display: none;
}
header .notifications li a.trigger-chat {
  background-color: #282828;
}
header .notifications li a.trigger-chat:hover {
  background-color: #004f91;
}
header .notifications li a.trigger-chat span.chat-icon {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  display: block;
  width: 44px;
  height: 44px;
}
header .notifications li a.trigger-chat span.chat-icon::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  display: block;
  width: 28px;
  height: 20px;
  background-color: #ffffff;
}
header .notifications li a.trigger-chat span.chat-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 12px;
  width: 0;
  height: 0;
  margin-top: 10px;
  border-style: solid;
  border-width: 6px 6px 0px 0px;
  border-color: #ffffff transparent transparent transparent;
}
header .notifications li a.trigger-popup span.icon {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  display: block;
  width: 44px;
  height: 44px;
  background-image: url(../images/icons/icons.svg);
  background-repeat: no-repeat;
  background-size: 132px 44px;
}
header .notifications li a.trigger-popup.messages span.icon {
  background-position: left center;
}
header .notifications li a.trigger-popup.alerts span.icon {
  background-position: -44px center;
}
header .notifications li a.trigger-popup.faqs span.icon {
  background-position: -88px center;
}
header .notifications li a.trigger-popup span.counter {
  position: absolute;
  top: 10px;
  right: 6px;
  bottom: auto;
  left: auto;
  display: block;
  width: 18px;
  height: auto;
  white-space: nowrap;
  background-color: #7ec13e;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  background-clip: padding-box;
  font-size: 9px;
  font-size: 0.5625rem;
  font-weight: 700;
  text-align: center;
  line-height: 18px;
  color: #ffffff;
}

@media only screen and (max-width: 1170px) {
  header .notifications {
    position: relative;
    top: auto;
    right: auto;
    -webkit-order: 3;
    -ms-order: 3;
    order: 3;
    padding: 5px;
    background-color: #282828;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: feColorMatrix;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
  header .notifications li {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: inline-block;
    height: 56px;
    padding: 0 44px 0 6px;
    background-color: #004f91;
    margin-right: 2px;
  }
  header .notifications li:last-of-type {
    margin-right: 0px;
  }
  header .notifications li a {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
  header .notifications li a span.text {
    display: inline-block;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
    font-size: 12px;
    font-size: 0.75rem;
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
  }
  header .notifications li a.trigger-chat {
    background-color: transparent;
  }
  header .notifications li a.trigger-chat:hover {
    background-color: transparent;
  }
  header .notifications li a.trigger-chat span.chat-icon {
    position: relative;
    display: inline-block;
  }
  header .notifications li a.trigger-popup span.icon {
    position: relative;
    display: inline-block;
  }
  header .notifications li a.trigger-popup span.counter {
    right: auto;
    left: 30px;
  }
}
@media only screen and (max-width: 670px) {
  header .notifications {
    padding: 5px;
  }
  header .notifications li {
    height: 44px;
    padding: 0;
    margin-right: 2px;
  }
  header .notifications li a span.text {
    display: none;
  }
  header .notifications li a.trigger-chat span.chat-icon {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -o-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-transform-origin: center center;
    transform-origin: center center;
  }
  header .notifications li a.trigger-popup span.counter {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    margin: -10px 0 0 15px;
  }
}
footer {
  position: fixed;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
  z-index: 101;
}

@media only screen and (max-width: 1170px) {
  footer {
    position: relative;
    top: auto;
    left: auto;
    background-color: #ffffff;
  }
}
footer .mobile-stores {
    position: fixed;
    top: 75%;
    right: auto;
    bottom: auto;
    left: 0;
    display: block;
    justify-content: center;
    width: 310px;
    height: auto;
    background-color: #f5f1e2;
    padding: 0px 40px 0px 40px;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    overflow: hidden;
}

@media (max-width: 768px) {
    footer .mobile-stores {
        position: static !important;  /* cancel absolute/fixed */
        z-index: 0 !important;        /* ensure it's under the form if stacked */
        clear: both;                  /* in case previous elements float */
        margin-top: 16px;
        width: 100%;
    }
}

footer .tips-slider {
  position: fixed;
  top: 35%;
  right: auto;
  bottom: auto;
  left: 0;
  display: block;
  width: 310px;
  height: auto;
  background-color: #f5f1e2;
  padding: 0px 40px 0px 40px;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  overflow: hidden;
}
footer .tips-slider .tips-icon {
  position: relative;
  display: block;
  width: 55px;
  height: auto;
  margin: 0 0 20px 0;
}
footer .tips-slider .tips-icon img {
  display: block;
  width: 100%;
  height: auto;
}
footer .tips-slider .swiper-container {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
footer .tips-slider .swiper-container .swiper-wrapper {
  margin-bottom: 25px;
}
footer .tips-slider .swiper-container .swiper-wrapper .swiper-slide {
  background-color: #f5f1e2;
  height: 180px;
  max-height: 180px;
  overflow-y: hidden;
}
footer .tips-slider .swiper-container .swiper-wrapper .swiper-slide h4 {
  color: #5a5a5a;
}
footer .tips-slider .controls {
  position: relative;
  width: 100%;
  height: auto;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}
footer .tips-slider .controls .swiper-next, footer .tips-slider .controls .swiper-prev {
  position: relative;
  display: inline-block;
  width: 35px;
  height: 35px;
  background-color: #15cf8c;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  background-clip: padding-box;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
footer .tips-slider .controls .swiper-next:hover, footer .tips-slider .controls .swiper-prev:hover {
  background-color: #0d885b;
}
footer .tips-slider .controls .swiper-prev {
  margin-right: 7px;
}
footer .tips-slider .controls .swiper-next::before, footer .tips-slider .controls .swiper-prev::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  display: block;
  width: 8px;
  height: 8px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
footer .tips-slider .controls .swiper-next::before {
  left: 13px;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
}
footer .tips-slider .controls .swiper-prev::before {
  left: 14px;
  border-bottom: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
}

@media only screen and (max-width: 1600px) {
  footer .tips-slider {
    width: 260px;
    padding: 40px 30px 80px 30px;
  }
}
@media only screen and (max-width: 1170px) {
  footer .tips-slider {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    background-color: #f0f0f0;
    padding: 20px 30px;
    -webkit-transform: translate(0, 0%);
    -moz-transform: translate(0, 0%);
    -o-transform: translate(0, 0%);
    -ms-transform: translate(0, 0%);
    transform: translate(0, 0%);
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
  footer .tips-slider .tips-icon {
    position: relative;
    margin: 0;
    width: 100px;
    height: 100px;
    background-color: #ffffff;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    background-clip: padding-box;
    margin-right: 30px;
  }
  footer .tips-slider .tips-icon img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 50%;
  }
  footer .tips-slider .swiper-container {
    width: auto;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
  footer .tips-slider .swiper-container .swiper-wrapper {
    margin-bottom: 10px;
  }
  footer .tips-slider .swiper-container .swiper-wrapper .swiper-slide {
    background-color: #f0f0f0;
  }
  footer .tips-slider .swiper-container .swiper-wrapper .swiper-slide h4 {
    font-size: 17px;
    font-size: 1.0625rem;
  }
  footer .tips-slider .controls .swiper-next, footer .tips-slider .controls .swiper-prev {
    width: 44px;
    height: 44px;
  }
  footer .tips-slider .controls .swiper-prev {
    margin-right: 7px;
  }
  footer .tips-slider .controls .swiper-next::before {
    left: 17px;
  }
  footer .tips-slider .controls .swiper-prev::before {
    left: 19px;
  }
}
@media only screen and (max-width: 670px) {
  footer .tips-slider {
    padding: 20px;
    display: block;
  }
  footer .tips-slider .tips-icon {
    margin: 0 0 10px 0;
  }
  footer .tips-slider .swiper-container {
    width: 100%;
  }
}
footer .inner {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

@media only screen and (max-width: 1170px) {
  footer .inner {
    background-color: #282828;
    padding: 30px;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
}
@media only screen and (max-width: 670px) {
  footer .inner {
    padding: 20px;
  }
}
footer .elpedison-logo {
  position: relative;
  display: none;
}
footer .elpedison-logo img {
  display: block;
  width: 100%;
  height: auto;
}

@media only screen and (max-width: 1170px) {
  footer .elpedison-logo {
    display: inline-block;
    -webkit-flex-basis: 170px;
    -ms-flex-basis: 170px;
    flex-basis: 170px;
    max-width: 170px;
  }
}
@media only screen and (max-width: 670px) {
  footer .elpedison-logo {
    -webkit-flex-basis: 120px;
    -ms-flex-basis: 120px;
    flex-basis: 120px;
    max-width: 120px;
  }
}
footer ul.social {
  position: fixed;
  top: auto;
  right: 14px;
  bottom: 14px;
  left: auto;
  width: 60px;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transform: scale(0.85);
  -moz-transform: scale(0.85);
  -o-transform: scale(0.85);
  -ms-transform: scale(0.85);
  transform: scale(0.85);
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
footer ul.social li {
  margin-bottom: 12px;
}

@media only screen and (max-width: 1170px) {
  footer ul.social {
    position: relative;
    right: auto;
    bottom: auto;
    width: auto;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  footer ul.social li {
    margin-bottom: 0px;
  }
}
.swiper-container {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
}

.swiper-container-no-flexbox .swiper-slide {
  float: left;
}

.swiper-container-vertical > .swiper-wrapper {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  -o-transition-property: transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

.swiper-container-android .swiper-slide,
.swiper-wrapper {
  -webkit-transform: translate3d(0px, 0, 0);
  transform: translate3d(0px, 0, 0);
}

.swiper-container-multirow > .swiper-wrapper {
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.swiper-container-free-mode > .swiper-wrapper {
  -webkit-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  margin: 0 auto;
}

.swiper-slide {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  -o-transition-property: transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
}

.swiper-invisible-blank-slide {
  visibility: hidden;
}

/* Auto Height */
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
  height: auto;
}

.swiper-container-autoheight .swiper-wrapper {
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-transition-property: height, -webkit-transform;
  transition-property: height, -webkit-transform;
  -o-transition-property: transform, height;
  transition-property: transform, height;
  transition-property: transform, height, -webkit-transform;
}

/* 3D Effects */
.swiper-container-3d {
  -webkit-perspective: 1200px;
  perspective: 1200px;
}

.swiper-container-3d .swiper-wrapper,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-cube-shadow {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.swiper-container-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-container-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-container-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-container-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

/* IE10 Windows Phone 8 Fixes */
.swiper-container-wp8-horizontal,
.swiper-container-wp8-horizontal > .swiper-wrapper {
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}

.swiper-container-wp8-vertical,
.swiper-container-wp8-vertical > .swiper-wrapper {
  -ms-touch-action: pan-x;
  touch-action: pan-x;
}

.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  width: 27px;
  height: 44px;
  margin-top: -22px;
  z-index: 10;
  cursor: pointer;
  background-size: 27px 44px;
  background-position: center;
  background-repeat: no-repeat;
}

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
  left: 10px;
  right: auto;
}

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
  right: 10px;
  left: auto;
}

.swiper-button-prev.swiper-button-white,
.swiper-container-rtl .swiper-button-next.swiper-button-white {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}

.swiper-button-next.swiper-button-white,
.swiper-container-rtl .swiper-button-prev.swiper-button-white {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}

.swiper-button-prev.swiper-button-black,
.swiper-container-rtl .swiper-button-next.swiper-button-black {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}

.swiper-button-next.swiper-button-black,
.swiper-container-rtl .swiper-button-prev.swiper-button-black {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}

.swiper-pagination {
  position: absolute;
  text-align: center;
  -webkit-transition: 300ms opacity;
  -o-transition: 300ms opacity;
  transition: 300ms opacity;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  z-index: 10;
}

.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}

/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 10px;
  left: 0;
  width: 100%;
}

/* Bullets */
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  -webkit-transform: scale(0.33);
  -ms-transform: scale(0.33);
  transform: scale(0.33);
  position: relative;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  -webkit-transform: scale(0.66);
  -ms-transform: scale(0.66);
  transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  -webkit-transform: scale(0.33);
  -ms-transform: scale(0.33);
  transform: scale(0.33);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  -webkit-transform: scale(0.66);
  -ms-transform: scale(0.66);
  transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  -webkit-transform: scale(0.33);
  -ms-transform: scale(0.33);
  transform: scale(0.33);
}

.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 100%;
  background: #000;
  opacity: 0.2;
}

button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}

.swiper-pagination-bullet-active {
  opacity: 1;
  background: #007aff;
}

.swiper-container-vertical > .swiper-pagination-bullets {
  right: 10px;
  top: 50%;
  -webkit-transform: translate3d(0px, -50%, 0);
  transform: translate3d(0px, -50%, 0);
}

.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 6px 0;
  display: block;
}

.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 8px;
}

.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  -webkit-transition: 200ms top, 200ms -webkit-transform;
  transition: 200ms top, 200ms -webkit-transform;
  -o-transition: 200ms transform, 200ms top;
  transition: 200ms transform, 200ms top;
  transition: 200ms transform, 200ms top, 200ms -webkit-transform;
}

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 4px;
}

.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  white-space: nowrap;
}

.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  -webkit-transition: 200ms left, 200ms -webkit-transform;
  transition: 200ms left, 200ms -webkit-transform;
  -o-transition: 200ms transform, 200ms left;
  transition: 200ms transform, 200ms left;
  transition: 200ms transform, 200ms left, 200ms -webkit-transform;
}

.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  -webkit-transition: 200ms right, 200ms -webkit-transform;
  transition: 200ms right, 200ms -webkit-transform;
  -o-transition: 200ms transform, 200ms right;
  transition: 200ms transform, 200ms right;
  transition: 200ms transform, 200ms right, 200ms -webkit-transform;
}

/* Progress */
.swiper-pagination-progressbar {
  background: rgba(0, 0, 0, 0.25);
  position: absolute;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: #007aff;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: left top;
  -ms-transform-origin: left top;
  transform-origin: left top;
}

.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  -webkit-transform-origin: right top;
  -ms-transform-origin: right top;
  transform-origin: right top;
}

.swiper-container-horizontal > .swiper-pagination-progressbar {
  width: 100%;
  height: 4px;
  left: 0;
  top: 0;
}

.swiper-container-vertical > .swiper-pagination-progressbar {
  width: 4px;
  height: 100%;
  left: 0;
  top: 0;
}

.swiper-pagination-white .swiper-pagination-bullet-active {
  background: #ffffff;
}

.swiper-pagination-progressbar.swiper-pagination-white {
  background: rgba(255, 255, 255, 0.25);
}

.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill {
  background: #ffffff;
}

.swiper-pagination-black .swiper-pagination-bullet-active {
  background: #000000;
}

.swiper-pagination-progressbar.swiper-pagination-black {
  background: rgba(0, 0, 0, 0.25);
}

.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill {
  background: #000000;
}

/* Scrollbar */
.swiper-scrollbar {
  border-radius: 10px;
  position: relative;
  -ms-touch-action: none;
  background: rgba(0, 0, 0, 0.1);
}

.swiper-container-horizontal > .swiper-scrollbar {
  position: absolute;
  left: 1%;
  bottom: 3px;
  z-index: 50;
  height: 5px;
  width: 98%;
}

.swiper-container-vertical > .swiper-scrollbar {
  position: absolute;
  right: 3px;
  top: 1%;
  z-index: 50;
  width: 5px;
  height: 98%;
}

.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  left: 0;
  top: 0;
}

.swiper-scrollbar-cursor-drag {
  cursor: move;
}

.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
}

.swiper-zoom-container > img,
.swiper-zoom-container > svg,
.swiper-zoom-container > canvas {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.swiper-slide-zoomed {
  cursor: move;
}

/* Preloader */
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  -webkit-transform-origin: 50%;
  -ms-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
  animation: swiper-preloader-spin 1s steps(12, end) infinite;
}

.swiper-lazy-preloader:after {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-position: 50%;
  background-size: 100%;
  background-repeat: no-repeat;
}

.swiper-lazy-preloader-white:after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

@-webkit-keyframes swiper-preloader-spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes swiper-preloader-spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/* a11y */
.swiper-container .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}

.swiper-container-fade.swiper-container-free-mode .swiper-slide {
  -webkit-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.swiper-container-fade .swiper-slide {
  pointer-events: none;
  -webkit-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
}

.swiper-container-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-container-cube {
  overflow: visible;
}

.swiper-container-cube .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}

.swiper-container-cube .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-container-cube.swiper-container-rtl .swiper-slide {
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
}

.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-prev,
.swiper-container-cube .swiper-slide-next + .swiper-slide {
  pointer-events: auto;
  visibility: visible;
}

.swiper-container-cube .swiper-slide-shadow-top,
.swiper-container-cube .swiper-slide-shadow-bottom,
.swiper-container-cube .swiper-slide-shadow-left,
.swiper-container-cube .swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.swiper-container-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.6;
  -webkit-filter: blur(50px);
  filter: blur(50px);
  z-index: 0;
}

.swiper-container-flip {
  overflow: visible;
}

.swiper-container-flip .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
}

.swiper-container-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-container-flip .swiper-slide-active,
.swiper-container-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-container-flip .swiper-slide-shadow-top,
.swiper-container-flip .swiper-slide-shadow-bottom,
.swiper-container-flip .swiper-slide-shadow-left,
.swiper-container-flip .swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.swiper-container-coverflow .swiper-wrapper {
  /* Windows 8 IE 10 fix */
  -ms-perspective: 1200px;
}

aside.popup {
  position: fixed;
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  width: 680px;
  height: 100vh;
  display: block;
  visibility: hidden;
  overflow: hidden;
  background-color: #ffffff;
  -webkit-box-shadow: 0 0 10px 0 rgba(40, 40, 40, 0.4);
  -moz-box-shadow: 0 0 10px 0 rgba(40, 40, 40, 0.4);
  box-shadow: 0 0 10px 0 rgba(40, 40, 40, 0.4);
  z-index: 400;
  -webkit-transform: translate(0, -100%);
  -moz-transform: translate(0, -100%);
  -o-transform: translate(0, -100%);
  -ms-transform: translate(0, -100%);
  transform: translate(0, -100%);
}
aside.popup.active {
  visibility: visible;
}
aside.popup .inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  text-align: left;
  -webkit-transform: translate(0, 100%);
  -moz-transform: translate(0, 100%);
  -o-transform: translate(0, 100%);
  -ms-transform: translate(0, 100%);
  transform: translate(0, 100%);
  background-color: #ffffff;
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

@media only screen and (max-width: 1170px) {
  aside.popup {
    width: 100vw;
    height: 100vh;
  }
}
aside.popup .popup-title {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 100%;
  height: auto;
  padding: 50px 80px 50px;
  background-color: #ffffff;
  border-bottom: 1px solid rgba(40, 40, 40, 0.2);
  z-index: 100;
}
aside.popup .popup-title h2 {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
aside.popup .popup-title h2 span {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: auto;
  height: auto;
  color: #5a5a5a;
}

@media only screen and (max-width: 1600px) {
  aside.popup .popup-title {
    padding: 30px 50px;
  }
  aside.popup .popup-title h2 {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
  }
  aside.popup .popup-title h2 span {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: auto;
    height: auto;
    color: #5a5a5a;
  }
}
@media only screen and (max-width: 1170px) {
  aside.popup .popup-title {
    padding: 30px;
  }
}
aside.popup .popup-grid {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  padding: 50px 80px 80px;
}
aside.popup .popup-grid .item {
  position: relative;
  width: 100%;
  height: auto;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(40, 40, 40, 0.2);
}
aside.popup .popup-grid .item.default {
  border: 4px solid #ddd !important;
}

@media only screen and (max-width: 1600px) {
  aside.popup .popup-grid {
    padding: 50px;
  }
}
@media only screen and (max-width: 1170px) {
  aside.popup .popup-grid {
    padding: 30px;
  }
}
aside.popup.messages .popup-grid .item {
  display: block;
}
aside.popup.messages .popup-grid .item .time {
  position: absolute;
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  display: inline-block;
  vertical-align: top;
  width: auto;
  height: auto;
  font-size: 12px;
  font-size: 0.75rem;
  color: #5a5a5a;
}
aside.popup.messages .popup-grid .item p {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  color: #5a5a5a;
}
aside.popup.messages .popup-grid .item .item-header {
  position: relative;
  width: 100%;
  height: auto;
  padding-right: 100px;
  margin-bottom: 7px;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
aside.popup.messages .popup-grid .item .item-header > * {
  position: relative;
  margin-right: 10px;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
}
aside.popup.messages .popup-grid .item .item-header h3 a {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
aside.popup.messages .popup-grid .item .item-header h3 a:hover {
  color: #004f91;
}
aside.popup.messages .popup-grid .item .item-header span.tag, aside.popup.messages .popup-grid .item .item-header a.tag {
  position: relative;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-clip: padding-box;
  background-color: #f0f0f0;
  padding: 0 10px;
  font-size: 11px;
  font-size: 0.6875rem;
  line-height: 20px;
  color: #ffffff;
  font-weight: 700;
}
aside.popup.messages .popup-grid .item .item-header span.tag.alert, aside.popup.messages .popup-grid .item .item-header span.tag.issue, aside.popup.messages .popup-grid .item .item-header a.tag.alert, aside.popup.messages .popup-grid .item .item-header a.tag.issue {
  background-color: #cc0000;
}
aside.popup.messages .popup-grid .item .item-header span.tag.info, aside.popup.messages .popup-grid .item .item-header a.tag.info {
  background-color: #004f91;
}
aside.popup.messages .popup-grid .item .item-header span.tag.attach, aside.popup.messages .popup-grid .item .item-header a.tag.attach {
  background-color: transparent;
  padding: 0px;
  width: 27px;
  height: 27px;
  background-image: url(../images/icons/attach-icon.svg);
  background-position: center;
}
aside.popup.messages .popup-grid .item .item-header span.tag.attach a, aside.popup.messages .popup-grid .item .item-header a.tag.attach a {
  display: block;
  height: 27px;
  width: 27px;
  background: transparent;
}

aside.popup .popup-grid .item .dropdown {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  margin-top: 30px;
  overflow: hidden;
}
aside.popup .popup-grid .item .dropdown::after {
  content: "";
  position: absolute;
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00FFFFFF", endColorstr="#FFFFFFFF", GradientType=0);
}
aside.popup .popup-grid .item .dropdown.active::after {
  display: none;
}
aside.popup .popup-grid .item .dropdown p {
  font-size: 15px;
  font-size: 0.9375rem;
}

@media only screen and (max-width: 670px) {
  aside.popup.messages .popup-grid .item .time {
    position: relative;
    top: auto;
    right: auto;
    display: block;
    width: 100%;
    height: auto;
  }
  aside.popup.messages .popup-grid .item .item-header {
    padding-right: 0px;
  }
  aside.popup.messages .popup-grid .item .item-header > * {
    margin-right: 5px;
  }
  aside.popup.messages .popup-grid .item .item-header h3 {
    -webkit-flex-basis: 100%;
    -ms-flex-basis: 100%;
    flex-basis: 100%;
    max-width: 100%;
    padding: 10px 0;
  }

  aside.popup .popup-grid .item .dropdown {
    margin-top: 20px;
  }
}
aside.popup.faqs .popup-grid .item .item-header {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
aside.popup.faqs .popup-grid .item .item-header h3 {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
aside.popup.faqs .popup-grid .item .item-header h3 a {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  padding-right: 50px;
}
aside.popup.faqs .popup-grid .item .item-header h3 a:hover {
  color: #004f91;
}
aside.popup.faqs .popup-grid .item .item-header h3 a .plus-icon {
  position: absolute;
  top: 50%;
  right: 0;
  bottom: auto;
  left: auto;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  display: block;
  width: 30px;
  height: 30px;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  background-clip: padding-box;
  border: 2px solid #5a5a5a;
}
aside.popup.faqs .popup-grid .item .item-header h3 a .plus-icon::after, aside.popup.faqs .popup-grid .item .item-header h3 a .plus-icon::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background-color: #5a5a5a;
  display: block;
}
aside.popup.faqs .popup-grid .item .item-header h3 a .plus-icon::after {
  width: 10px;
  height: 2px;
}
aside.popup.faqs .popup-grid .item .item-header h3 a .plus-icon::before {
  height: 10px;
  width: 2px;
}
aside.popup.faqs .popup-grid .item .dropdown {
  margin-top: 0px;
}
aside.popup.faqs .popup-grid .item .dropdown.active {
  margin-top: 30px;
}

aside.popup.alerts .popup-grid .item {
  padding-bottom: 25px;
  margin-bottom: 25px;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
aside.popup.alerts .popup-grid .item .image {
  position: relative;
  height: auto;
}
aside.popup.alerts .popup-grid .item .image img {
  display: block;
  width: 100%;
  height: auto;
}
aside.popup.alerts .popup-grid .item .infos {
  position: relative;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding-left: 20px;
}
aside.popup.alerts .popup-grid .item .infos h3 {
  position: relative;
  font-weight: 700;
  margin-bottom: 5px;
}
aside.popup.alerts .popup-grid .item .infos .time {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  font-size: 12px;
  font-size: 0.75rem;
  color: #5a5a5a;
  margin-bottom: 10px;
}
aside.popup.alerts .popup-grid .item .infos p {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  color: #5a5a5a;
  margin-bottom: 15px;
}
aside.popup.alerts .popup-grid .item .infos .button {
  line-height: 38px;
  text-transform: uppercase;
}

@media only screen and (max-width: 670px) {
  aside.popup.alerts .popup-grid .item {
    padding-bottom: 20px;
    margin-bottom: 20px;
  }
  aside.popup.alerts .popup-grid .item .image {
    -webkit-flex-basis: 100%;
    -ms-flex-basis: 100%;
    flex-basis: 100%;
    max-width: 100%;
    margin-bottom: 15px;
  }
  aside.popup.alerts .popup-grid .item .infos {
    padding-left: 0px;
  }
}
aside.popup.profile,
aside.popup.office {
  width: 100vw;
  background-color: #8bc751;
  padding-left: 60px;
}
aside.popup.profile .inner,
aside.popup.office .inner {
  background-color: #f0f0f0;
}
aside.popup.profile .popup-grid,
aside.popup.office .popup-grid {
  padding: 50px 80px 80px;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}
aside.popup.profile .popup-grid .item,
aside.popup.office .popup-grid .item {
  -webkit-flex-basis: 32%;
  -ms-flex-basis: 32%;
  flex-basis: 32%;
  max-width: 32%;
  padding: 50px;
  padding-top: 230px;
  margin-bottom: 20px;
  margin-right: 1.33%;
  background-color: #ffffff;
  border: none;
  counter-increment: step-counter;
}
aside.popup.profile .popup-grid .item:nth-child(3n+3),
aside.popup.office .popup-grid .item:nth-child(3n+3) {
  margin-right: 0%;
}
aside.popup.profile .popup-grid .item::before,
aside.popup.office .popup-grid .item::before {
  content: "";
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 79, 145, 0);
  -webkit-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -moz-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -ms-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -o-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
aside.popup.profile .popup-grid .item::after,
aside.popup.office .popup-grid .item::after {
  content: counter(step-counter, decimal-leading-zero);
  position: absolute;
  top: 50px;
  right: 50px;
  bottom: auto;
  left: auto;
  display: inline-block;
  vertical-align: top;
  width: auto;
  height: auto;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  font-size: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #282828;
}
aside.popup.profile .popup-grid .item .icon, aside.popup.profile .popup-grid .item .image,
aside.popup.office .popup-grid .item .icon,
aside.popup.office .popup-grid .item .image {
  position: absolute;
  top: 100px;
  right: auto;
  bottom: auto;
  left: 50px;
  display: block;
  width: 90px;
  height: 90px;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  background-clip: padding-box;
  overflow: hidden;
  -webkit-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -moz-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -ms-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  -o-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
aside.popup.profile .popup-grid .item .image img,
aside.popup.office .popup-grid .item .image img {
  display: block;
  width: 100%;
  height: auto;
}
aside.popup.profile .popup-grid .item.electricity .icon,
aside.popup.office .popup-grid .item.electricity .icon {
  background-image: url(../images/icons/electricity-icon.svg);
  background-position: center;
  background-repeat: no-repeat;
}
aside.popup.profile .popup-grid .item.gas .icon,
aside.popup.office .popup-grid .item.gas .icon {
  background-image: url(../images/icons/gas-icon.svg);
  background-position: center;
  background-repeat: no-repeat;
}
aside.popup.profile .popup-grid .item h4,
aside.popup.office .popup-grid .item h4 {
  position: relative;
  display: none;
  width: 100%;
  height: auto;
  margin-bottom: 15px;
  color: #8bc751;
}
aside.popup.profile .popup-grid .item .title,
aside.popup.office .popup-grid .item .title {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 5px;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  font-size: 19px;
  font-size: 1.1875rem;
  line-height: 1.4em;
  font-weight: 700;
}
aside.popup.profile .popup-grid .item p,
aside.popup.office .popup-grid .item p {
  position: relative;
  margin-bottom: 5px;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  font-size: 13px;
  font-size: 0.8125rem;
  color: #282828;
}
aside.popup.profile .popup-grid .item:hover .icon, aside.popup.profile .popup-grid .item:hover .image, aside.popup.profile .popup-grid .item.selected .icon, aside.popup.profile .popup-grid .item.selected .image,
aside.popup.office .popup-grid .item:hover .icon,
aside.popup.office .popup-grid .item:hover .image,
aside.popup.office .popup-grid .item.selected .icon,
aside.popup.office .popup-grid .item.selected .image {
  top: 90px;
}
aside.popup.profile .popup-grid .item:hover::before,
aside.popup.office .popup-grid .item:hover::before {
  background-color: whitesmoke;
}
aside.popup.profile .popup-grid .item:hover .title:hover,
aside.popup.office .popup-grid .item:hover .title:hover {
  color: #acf674;
}
aside.popup.profile .popup-grid .item:hover .title, aside.popup.profile .popup-grid .item:hover p, aside.popup.profile .popup-grid .item:hover::after,
aside.popup.office .popup-grid .item:hover .title,
aside.popup.office .popup-grid .item:hover p,
aside.popup.office .popup-grid .item:hover::after {
  color: #282828;
}
aside.popup.profile .popup-grid .item.selected::before,
aside.popup.office .popup-grid .item.selected::before {
  background-color: #004f91;
}
aside.popup.profile .popup-grid .item.selected .title, aside.popup.profile .popup-grid .item.selected p, aside.popup.profile .popup-grid .item.selected::after,
aside.popup.office .popup-grid .item.selected .title,
aside.popup.office .popup-grid .item.selected p,
aside.popup.office .popup-grid .item.selected::after {
  color: #ffffff;
}
aside.popup.profile .popup-grid .item.selected .title:hover,
aside.popup.office .popup-grid .item.selected .title:hover {
  color: #acf674;
}
aside.popup.profile .popup-grid .item.selected h4,
aside.popup.office .popup-grid .item.selected h4 {
  display: block;
}

body.gas aside.popup.profile,
body.gas aside.popup.office {
  background-color: #004f91;
}

@media only screen and (max-width: 1600px) {
  aside.popup.profile .popup-grid,
aside.popup.office .popup-grid {
    padding: 50px;
  }
}
@media only screen and (max-width: 1170px) {
  aside.popup.profile,
aside.popup.office {
    padding-left: 0px;
  }
  aside.popup.profile .popup-grid,
aside.popup.office .popup-grid {
    padding: 30px;
  }
  aside.popup.profile .popup-grid .item,
aside.popup.office .popup-grid .item {
    -webkit-flex-basis: 100%;
    -ms-flex-basis: 100%;
    flex-basis: 100%;
    max-width: 100%;
    padding: 30px;
    margin-right: 0%;
  }
  aside.popup.profile .popup-grid .item::after,
aside.popup.office .popup-grid .item::after {
    top: 30px;
    right: 30px;
  }
  aside.popup.profile .popup-grid .item .icon, aside.popup.profile .popup-grid .item .image,
aside.popup.office .popup-grid .item .icon,
aside.popup.office .popup-grid .item .image {
    position: relative;
    top: auto;
    left: auto;
    margin-bottom: 20px;
  }
  aside.popup.profile .popup-grid .item:hover .icon, aside.popup.profile .popup-grid .item:hover .image, aside.popup.profile .popup-grid .item.selected .icon, aside.popup.profile .popup-grid .item.selected .image,
aside.popup.office .popup-grid .item:hover .icon,
aside.popup.office .popup-grid .item:hover .image,
aside.popup.office .popup-grid .item.selected .icon,
aside.popup.office .popup-grid .item.selected .image {
    top: auto;
  }
}
@media only screen and (max-width: 670px) {
  aside.popup.profile .popup-grid .item .title,
aside.popup.office .popup-grid .item .title {
    font-size: 14px;
    font-size: 0.875rem;
  }
}
.faqs button.accordion {
  background-color: #ffffff;
  color: #282828;
  cursor: pointer;
  padding: 18px 40px 18px 18px !important;
  width: 100% !important;
  text-align: left !important;
  outline: none !important;
  transition: 0.4s;
  position: relative;
  border: 1px solid #f0f0f0;
  font-weight: 700;
}
.faqs button.accordion.active {
  border-bottom: none;
}
.faqs button.accordion.active:after {
  content: "➖" !important;
}
.faqs button.accordion:after {
  content: "➕";
  font-size: 13px;
  color: #777;
  right: 20px;
  margin-left: 5px;
  position: absolute;
  top: 50%;
  margin-top: -5px;
}
.faqs .panel {
  padding: 18px;
  background-color: white;
  display: none;
  overflow: hidden;
  border: 1px solid #f0f0f0;
  border-top: none;
}

#preloader {
  position: fixed;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #f5f1e2;
  z-index: 1000;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
#preloader.is-hidden {
  display: none;
  visibility: hidden;
  opacity: 0;
}
#preloader .preloader-inner {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  margin: auto;
  text-align: center;
}
#preloader .preloader-inner .preloader-logo {
  position: relative;
  display: block;
  width: 250px;
  height: auto;
  margin: 0 auto;
  z-index: 10;
}
#preloader .preloader-inner .preloader-logo svg {
  display: block;
}
#preloader .preloader-inner .preloader-logo svg path {
  fill: #004f91;
}
#preloader .preloader-inner .loading-line {
  position: relative;
  display: block;
  width: 70vw;
  height: 1px;
  margin: 20px auto;
  overflow: hidden;
  background-color: rgba(40, 40, 40, 0.2);
}
#preloader .preloader-inner .loading-line span {
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  display: block;
  width: 0%;
  height: 100%;
  background-color: #8bc751;
}
#preloader .preloader-inner h3 {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  font-size: 11px;
  font-size: 0.6875rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #282828;
}

@media only screen and (max-width: 1170px) {
  #preloader .preloader-inner .loading-line {
    width: 70vw;
  }
}
@media only screen and (max-width: 670px) {
  #preloader .preloader-inner .preloader-logo {
    width: 200px;
  }
  #preloader .preloader-inner .loading-line {
    margin: 15px auto;
  }
}
#main {
  position: relative;
  display: block;
  width: -moz-calc(100% - 310px);
  width: -webkit-calc(100% - 310px);
  width: calc(100% - 310px);
  height: 100vh;
  padding: 14px;
  margin: 0px;
  margin-left: 310px;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  background-color: #f5f1e2;
}

@media only screen and (max-width: 1600px) {
  #main {
    width: -moz-calc(100% - 260px);
    width: -webkit-calc(100% - 260px);
    width: calc(100% - 260px);
    margin-left: 260px;
  }
}
@media only screen and (max-width: 1170px) {
  #main {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding: 10px;
    margin: 0px;
    margin-left: 0px;
  }
}
@media only screen and (max-width: 670px) {
  #main {
    padding: 0px;
  }
}
#main .inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: auto;
}

@media only screen and (max-width: 1170px) {
  #main .inner {
    height: auto;
  }
}
section {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0;
}
section .covers {
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #282828;
}
section .covers::after {
  content: "";
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(40, 40, 40, 0.6);
  mix-blend-mode: multiply;
}
section .cover {
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center;
}

@media only screen and (max-width: 1170px) {
  section {
    height: auto;
  }
}
section.login .cover {
  background-image: url(../images/covers/sign_in.jpg);
}

section .login-form {
  position: relative;
  width: 100%;
  height: 100%;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  overflow-y: auto;
}
section .login-form .tabs {
  position: relative;
  display: block;
  width: 600px;
  height: auto;
  -webkit-box-shadow: 0 0 40px 0 rgba(40, 40, 40, 0.4);
  -moz-box-shadow: 0 0 40px 0 rgba(40, 40, 40, 0.4);
  box-shadow: 0 0 40px 0 rgba(40, 40, 40, 0.4);
  background-color: #ffffff;
}
section .login-form .tabs nav {
  position: relative;
  width: 100%;
  height: auto;
  border-bottom: 1px solid rgba(40, 40, 40, 0.1);
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}
section .login-form .tabs nav a {
  position: relative;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background-color: #cdcdcd;
  cursor: pointer;
  overflow: hidden;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  font-size: 11px;
  font-size: 0.6875rem;
  line-height: 60px;
  color: #343434;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
}
section .login-form .tabs nav a:hover {
  background-color: silver;
}
section .login-form .tabs nav a span {
  position: relative;
  display: block;
}
section .login-form .tabs nav a::before {
  content: "";
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #00004c;
  -webkit-transform: translate(0, 100%);
  -moz-transform: translate(0, 100%);
  -o-transform: translate(0, 100%);
  -ms-transform: translate(0, 100%);
  transform: translate(0, 100%);
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
section .login-form .tabs nav a.selected {
  color: #ffffff;
}
section .login-form .tabs nav a.selected::before {
  -webkit-transform: translate(0, 0%);
  -moz-transform: translate(0, 0%);
  -o-transform: translate(0, 0%);
  -ms-transform: translate(0, 0%);
  transform: translate(0, 0%);
}
section .login-form .tabs .contents {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  background-color: #f5f1e2;
}
section .login-form .tabs .contents .content {
  position: absolute;
  display: none;
  width: 100%;
  height: auto;
  padding: 50px;
  opacity: 0;
}
section .login-form .tabs .contents .content.selected {
  position: relative;
  display: block;
  opacity: 1;
}

@media only screen and (max-width: 1170px) {
  section.login {
    padding: 100px;
  }

  section .login-form .tabs {
    width: 100%;
    background-color: #ffffff;
  }
  section .login-form .tabs nav a {
    font-size: 11px;
    font-size: 0.6875rem;
    line-height: 55px;
  }
}
@media only screen and (max-width: 670px) {
  section.login {
    padding: 15px;
  }

  section .login-form .tabs nav a {
    font-size: 10px;
    font-size: 0.625rem;
    letter-spacing: 0px;
    line-height: 44px;
  }
  section .login-form .tabs .contents .content {
    padding: 20px;
  }
  section .login-form .tabs .contents .content form .form-title {
    margin-bottom: 20px;
  }
}
section.categories .covers .cover {
  opacity: 0;
}
section.categories .covers .cover.default {
  opacity: 1;
}
section.categories .covers .cover:first-of-type {
  background-image: url(../images/covers/landing_page.jpg);
}
section.categories .covers .cover:nth-of-type(2) {
  background-image: url(../images/covers/Summary.jpg);
}
section.categories .covers .cover:nth-of-type(3) {
  background-image: url(../images/covers/my_bill.jpg);
}
section.categories .covers .cover:nth-of-type(4) {
  background-image: url(../images/covers/my_profile.jpg);
}
section.categories .covers .cover:nth-of-type(5) {
  background-image: url(../images/covers/my_supply_aggrement.jpg);
}

section.categories .categories-nav {
  position: relative;
  width: 100%;
  height: 100%;
  padding-right: 60px;
  z-index: 10;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}
section.categories .categories-nav .nav-item {
  position: relative;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 100%;
  text-align: center;
  overflow: hidden;
  background-color: rgba(139, 199, 81, 0);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
section.categories .categories-nav .nav-item .trigger {
  position: absolute;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: block;
  width: 100%;
  height: auto;
  z-index: 10;
  font-size: 15px;
  font-size: 0.9375rem;
  line-height: 30px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #ffffff;
  text-transform: uppercase;
}
section.categories .categories-nav .nav-item ul.submenu {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  padding: 0 30px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
section.categories .categories-nav .nav-item ul.submenu li {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 5px;
}
section.categories .categories-nav .nav-item ul.submenu li:last-of-type {
  margin-bottom: 0px;
}
section.categories .categories-nav .nav-item ul.submenu li a {
  display: block;
  width: 100%;
  height: auto;
  padding: 0px;
}
section.categories .categories-nav .nav-item.active {
  background-color: rgba(21, 207, 140, 0.5);
}
section.categories .categories-nav .nav-item.active ul.submenu {
  opacity: 1;
  visibility: visible;
}

body.gas section.categories .nav-item.active {
  background-color: rgba(0, 50, 160, 0.5) !important;
}

@media only screen and (max-width: 1600px) {
  section.categories .categories-nav .nav-item .trigger {
    font-size: 13px;
    font-size: 0.8125rem;
  }
  section.categories .categories-nav .nav-item ul.submenu {
    padding: 0 20px;
  }
}
@media only screen and (max-width: 1170px) {
  section.categories .categories-nav {
    height: auto;
    padding: 0px;
  }
  section.categories .categories-nav .nav-item {
    -webkit-flex-basis: 50%;
    -ms-flex-basis: 50%;
    flex-basis: 50%;
    max-width: 50%;
    height: 50%;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
  section.categories .categories-nav .nav-item:nth-child(2n+2) {
    border-right: none;
  }
  section.categories .categories-nav .nav-item:nth-last-of-type(-n + 2) {
    border-bottom-color: rgba(255, 255, 255, 0);
  }
  section.categories .categories-nav .nav-item .trigger {
    font-size: 17px;
    font-size: 1.0625rem;
  }
}
@media only screen and (max-width: 670px) {
  section.categories .covers {
    background-color: #ffffff;
    padding: 10px;
  }
  section.categories .covers::after {
    display: none;
  }
  section.categories .covers .cover {
    position: relative;
    height: auto;
    opacity: 1;
    margin-bottom: 10px;
  }
  section.categories .covers .cover.default {
    display: none;
  }

  section.categories .categories-nav {
    height: auto;
    padding: 10px;
  }
  section.categories .categories-nav .nav-item {
    -webkit-flex-basis: 100%;
    -ms-flex-basis: 100%;
    flex-basis: 100%;
    max-width: 100%;
    height: auto;
    border-right: none;
    border-bottom: none;
    margin-bottom: 10px;
  }
  section.categories .categories-nav .nav-item:last-of-type {
    margin-bottom: 0px;
  }
  section.categories .categories-nav .nav-item:after {
    content: "";
    position: absolute;
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(40, 40, 40, 0.7);
    mix-blend-mode: multiply;
  }
  section.categories .categories-nav .nav-item .trigger {
    font-size: 13px;
    font-size: 0.8125rem;
    z-index: 10;
  }
  section.categories .categories-nav .nav-item ul.submenu {
    z-index: 10;
    padding: 0 10px;
  }
}
section.category {
  padding: 0 60px 0 15%;
}
section.category .covers::after {
  background-color: rgba(0, 0, 76, 0.8);
}
section.category.ebill .covers .cover {
  background-image: url(../images/covers/my_bill.jpg);
}
section.category.user .covers .cover {
  background-image: url(../images/covers/my_profile.jpg);
}
section.category.dashboard .covers .cover {
  background-image: url(../images/covers/Summary.jpg);
}
section.category.elpedison_me .covers .cover {
  background-image: url(../images/covers/elpedison_me.jpg);
}
section.category.has-forms .covers .cover {
  background-image: url(../images/covers/cover-default.jpg);
}

@media only screen and (max-width: 1170px) {
  section.category {
    padding: 30px;
  }
}
@media only screen and (max-width: 670px) {
  section.category {
    padding: 10px;
  }
}
section.category .back-button {
  position: absolute;
  top: 40px;
  right: auto;
  bottom: auto;
  left: 15%;
  display: block;
  width: 44px;
  height: 44px;
  -webkit-transform: translate(-100%, 0);
  -moz-transform: translate(-100%, 0);
  -o-transform: translate(-100%, 0);
  -ms-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
  margin-left: -40px;
  overflow: hidden;
}
section.category .back-button a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
section.category .back-button a span.text {
  position: relative;
  display: none;
  background-color: #8bc751;
  padding: 0 10px;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 44px;
  color: #ffffff;
}
section.category .back-button a span.icon {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  background-clip: padding-box;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  background-color: #ffffff;
}
section.category .back-button a span.icon:hover {
  background-color: #bd66f3;
}
section.category .back-button a span.icon::after, section.category .back-button a span.icon::before {
  content: "";
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
section.category .back-button a span.icon::after {
  position: absolute;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: block;
  width: 45%;
  height: 2px;
  background-color: #bd66f3;
}
section.category .back-button a span.icon:hover::after {
  background-color: #ffffff;
}
section.category .back-button a span.icon::before {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  display: block;
  width: 8px;
  height: 8px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  left: 13px;
  border-bottom: 2px solid #bd66f3;
  border-left: 2px solid #bd66f3;
}
section.category .back-button a span.icon:hover::before {
  border-color: #ffffff;
}

@media only screen and (max-width: 1170px) {
  section.category .back-button {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    margin-left: 0px;
  }
  section.category .back-button a {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
  section.category .back-button a span.text {
    display: inline-block;
  }
  section.category .back-button a span.icon {
    width: 44px;
    height: 44px;
    -webkit-border-radius: 0%;
    -moz-border-radius: 0%;
    border-radius: 0%;
    background-clip: padding-box;
  }
  section.category .back-button a span.icon:hover {
    background-color: #ffffff;
  }
  section.category .back-button a span.icon:hover::after {
    background-color: #8bc751;
  }
  section.category .back-button a span.icon:hover::before {
    border-color: #8bc751;
  }
}
section .category-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  text-align: left;
  /*background-color: rgba(0, 0, 76, 0.8);*/
  padding: 40px 40px 40px 60px;
  overflow: auto;
}
section .category-inner::-webkit-scrollbar {
    width: 10px;
    /*display: none;*/
}
section .category-inner::-webkit-scrollbar-track {
    background: rgba(0, 0, 76, 0.8);
}
section .category-inner::-webkit-scrollbar-thumb {
    background: #bd66f3;
}
section .category-inner::-webkit-scrollbar-thumb:hover {
    background: #bd66f3;
}

@media only screen and (max-width: 1600px) {
  section .category-inner {
    padding: 50px;
  }
}
@media only screen and (max-width: 1170px) {
  section .category-inner {
    height: auto;
    padding: 30px;
    overflow: hidden;
  }
}
@media only screen and (max-width: 670px) {
  section .category-inner {
    padding: 0px;
  }
}
.category-inner p{
    color: #ffffff;
}
.category-title {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-bottom: 40px;
}
.category-title h1 {
    color: #ffffff;
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  font-weight: 700;
}
.category-title p {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  color: #5a5a5a;
}

.category-title div {
    align-self: flex-end;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 1rem;
    width: fit-content;
    height: auto;
    padding: 1rem;
    border: 1px solid #A5A5A5;
    border-radius: 10px;
    background-color: #FBFBFB;
    color: #004F91;
    font-weight: 600;
    font-size: 10pt;
}

.category-title .button {
  margin-top: 20px;
}

.nickname h2 {
  width: auto !important;
  display: inline-block !important;
}
.nickname a,
.nickname a:hover,
.nickname a:visited {
  display: inline-block;
  margin-top: 7px;
}

@media only screen and (max-width: 670px) {
  .category-title {
    padding: 30px;
    margin-bottom: 0px;
  }
}
.breaker-title {
  position: relative;
  width: 100%;
  height: auto;
  margin-bottom: 20px;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.breaker-title .infos {
  position: relative;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.breaker-title .infos h1, .breaker-title .infos h2, .breaker-title .infos h3, .breaker-title .infos h4 {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 5px;
  font-weight: 700;
}
.breaker-title .infos p {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  color: #5a5a5a;
}
.breaker-title .right {
  position: relative;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  margin-left: 50px;
}
.breaker-title .right .price {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  font-size: 30px;
  font-size: 1.875rem;
  font-weight: 700;
}

@media only screen and (max-width: 1600px) {
  .breaker-title .right {
    margin-left: 40px;
  }
  .breaker-title .right .price {
    font-size: 20px;
    font-size: 1.25rem;
  }
}
@media only screen and (max-width: 670px) {
  .breaker-title .infos {
    -webkit-order: 2;
    -ms-order: 2;
    order: 2;
    -webkit-flex-basis: 100%;
    -ms-flex-basis: 100%;
    flex-basis: 100%;
  }
  .breaker-title .right {
    -webkit-order: 1;
    -ms-order: 1;
    order: 1;
    -webkit-flex-basis: 100%;
    -ms-flex-basis: 100%;
    flex-basis: 100%;
    margin-left: 0px;
    margin-bottom: 20px;
  }
  .breaker-title .right .price {
    font-size: 24px;
    font-size: 1.5rem;
  }
}
ul.item-nav {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  padding-top: 10px;
}
ul.item-nav li {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
ul.item-nav li a {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: auto;
  height: auto;
  padding-left: 14px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  font-size: 14px;
  font-size: 0.875rem;
  color: #5a5a5a;
  line-height: 22px;
}
ul.item-nav li a:hover {
  color: #8bc751;
}
ul.item-nav li a::before {
  content: "";
  position: absolute;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 0;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  background-clip: padding-box;
  display: block;
  width: 6px;
  height: 6px;
  border: 2px solid #8bc751;
}

.category-grid {
  position: relative;
  width: 100%;
  height: auto;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}
.category-grid .grid-item {
  position: relative;
  -webkit-flex-basis: 49.2%;
  -ms-flex-basis: 49.2%;
  flex-basis: 49.2%;
  max-width: 49.2%;
  height: auto;
  background-color: #ffffff;
  -webkit-box-shadow: 0 0 15px 0 rgba(90, 90, 90, 0.15);
  -moz-box-shadow: 0 0 15px 0 rgba(90, 90, 90, 0.15);
  box-shadow: 0 0 15px 0 rgba(90, 90, 90, 0.15);
  padding: 30px;
  margin: 0;
  margin-bottom: 20px;
}
.category-grid .grid-item.electricity.selected {
  background-color: #acf674;
  color: #ffffff;
}
.category-grid .grid-item.electricity.selected .infos p {
  color: #ffffff;
}
.category-grid .grid-item.electricity.selected .nickname .button, .category-grid .grid-item.electricity.selected .nickname-actions .button:not(.black) {
  background-color: #01329c !important;
}
.category-grid .grid-item.gas.selected {
  background-color: #01329c;
  color: #ffffff;
}
.category-grid .grid-item.gas.selected .infos p {
  color: #ffffff;
}
.category-grid .grid-item.gas.selected .nickname .button, .category-grid .grid-item.gas.selected .nickname-actions .button:not(.black) {
  background-color: #acf674 !important;
}
.category-grid .grid-item.electricity:not(.selected):hover {
  border-bottom: 10px solid #acf674;
  cursor: pointer;
}
.category-grid .grid-item.electricity:not(.selected):hover .nickname h2 {
  color: #acf674;
}
.category-grid .grid-item.gas:not(.selected):hover {
  border-bottom: 10px solid #004f91;
  cursor: pointer;
}
.category-grid .grid-item.gas:not(.selected):hover .nickname h2 {
  color: #004f91;
}
.category-grid .grid-item.full-width {
  -webkit-flex-basis: 100%;
  -ms-flex-basis: 100%;
  flex-basis: 100%;
  max-width: 100%;
    border-radius: 0.25rem;
}
.category-grid .grid-item .image {
  position: relative;
  display: inline-block;
  width: 200px;
  height: auto;
  margin-bottom: 20px;
}
.category-grid .grid-item .image.full {
  width: 100% !important;
}
.category-grid .grid-item .image a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.category-grid .grid-item .image img {
  display: block;
  width: 100%;
  height: auto;
}
.category-grid .grid-item.center {
  text-align: center;
}
.category-grid .grid-item.flex-item {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.category-grid .grid-item.flex-item .image {
  width: 100px;
  margin-bottom: 0px;
}
.category-grid .grid-item.flex-item .image.image-large {
  width: 200px;
}
.category-grid .grid-item.flex-item .breaker-title {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: auto;
  padding-left: 20px;
}
.category-grid .grid-item .flex-list-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid lightgray;
}
.category-grid .grid-item .flex-list-item:last-child {
  border: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.category-grid .grid-item .flex-list-item .image {
  width: 100px;
  margin-bottom: 0px;
}
.category-grid .grid-item .flex-list-item .breaker-title {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin: auto;
  padding-left: 20px;
}

@media only screen and (max-width: 670px) {
  .category-grid {
    display: block;
  }
  .category-grid .grid-item {
    -webkit-flex-basis: 100%;
    -ms-flex-basis: 100%;
    flex-basis: 100%;
    max-width: 100%;
    padding: 30px;
    margin-bottom: 0px;
  }
  .category-grid .grid-item .image {
    width: 120px;
    margin-bottom: 15px;
  }
  .category-grid .grid-item.flex-item {
    display: block;
    width: 100%;
    height: auto;
    text-align: center;
  }
  .category-grid .grid-item.flex-item .image {
    display: block;
    width: 120px;
    margin: 0 auto 15px;
  }
  .category-grid .grid-item.flex-item .breaker-title {
    padding-left: 0px;
  }
  .category-grid .grid-item .flex-list-item {
    display: block;
    width: 100%;
    height: auto;
    text-align: center;
  }
}
section.has-forms .category-inner {
  background-color: transparent;
  padding: 0px;
}
section.has-forms .login-form {
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}
section.has-forms .login-form .tabs {
  top: 20%;
  margin: 0 auto;
}

@media only screen and (max-width: 1600px) {
  section.has-forms .category-inner {
    padding: 50px;
  }
}
@media only screen and (max-width: 1170px) {
  section.has-forms .category-inner {
    padding: 30px;
  }
  section.has-forms .category-inner .login-form .tabs {
    top: 0%;
  }
}
@media only screen and (max-width: 670px) {
  section.has-forms .category-inner {
    padding: 0px;
  }
}
section.message {
  padding: 0 15%;
  background-color: #282828;
}
section.message .covers::after {
  background-color: rgba(0, 79, 145, 0.8);
}
section.message .covers .cover {
  background-image: url(../images/covers/cover-default.jpg);
}

@media only screen and (max-width: 1170px) {
  section.message {
    padding: 30px;
  }
}
@media only screen and (max-width: 670px) {
  section.message {
    padding: 10px;
  }
}
.message-content {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  text-align: left;
  background-color: rgba(255, 255, 255, 0.95);
  padding: 40px 40px 40px 60px;
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.message-content::-webkit-scrollbar {
  width: 10px;
  display: none;
}
.message-content::-webkit-scrollbar-track {
  background: #f0f0f0;
}
.message-content::-webkit-scrollbar-thumb {
  background: #5a5a5a;
}
.message-content::-webkit-scrollbar-thumb:hover {
  background: #282828;
}

@media only screen and (max-width: 1170px) {
  section.message .message-content {
    height: auto;
    overflow: hidden;
    padding: 30px;
  }
}
@media only screen and (max-width: 670px) {
  section.message .message-content {
    padding: 30px 20px;
    margin: 0px;
  }
}
.message-content img {
  display: block;
  width: 100%;
  height: auto;
}
.message-content h1, .message-content h2, .message-content h3, .message-content h4, .message-content p {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
.message-content h1, .message-content h2, .message-content h3, .message-content h4 {
  margin-bottom: 15px;
}
.message-content p {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.6em;
  margin-bottom: 30px;
}
.message-content p a {
  color: #004f91;
}
.message-content p a:hover {
  color: #00335e;
}

@media only screen and (max-width: 670px) {
  .message-content {
    margin-bottom: 40px;
    padding: 0 15px;
  }
  .message-content h1, .message-content h2, .message-content h3, .message-content h4 {
    margin-bottom: 15px;
  }
  .message-content p {
    margin-bottom: 20px;
  }
}
.message-title {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  padding: 20px 0;
  text-align: left;
}

@media only screen and (max-width: 670px) {
  .message-title {
    padding: 15px 15px 20px;
  }
}
.message-title h1 {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  font-weight: 700;
}

.message-title h3 {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.message-content p.image,
.message-content .image {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 30px;
  padding: 0px;
  z-index: 10;
}
.message-content p.image img,
.message-content .image img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  width: auto;
}
.message-content p.image.image-left, .message-content p.image.image-right,
.message-content .image.image-left,
.message-content .image.image-right {
  width: auto;
  max-width: 250px;
}
.message-content p.image.image-left,
.message-content .image.image-left {
  float: left;
  margin-right: 30px;
}
.message-content p.image.image-right,
.message-content .image.image-right {
  float: right;
  margin-left: 30px;
}

@media only screen and (max-width: 670px) {
  .message-content p.image,
.message-content .image {
    margin-bottom: 20px;
  }
  .message-content p.image.image-left, .message-content p.image.image-right,
.message-content .image.image-left,
.message-content .image.image-right {
    max-width: 250px;
    margin-left: auto;
    margin-right: auto;
    float: none;
  }
  .message-content p.image.image-left a.image-description, .message-content p.image.image-left .image-description, .message-content p.image.image-right a.image-description, .message-content p.image.image-right .image-description,
.message-content .image.image-left a.image-description,
.message-content .image.image-left .image-description,
.message-content .image.image-right a.image-description,
.message-content .image.image-right .image-description {
    text-align: center;
  }
}
.message-content .video-container {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 30px;
  padding-bottom: 56.25%;
}
.message-content .video-container iframe {
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  width: 100%;
  height: 100%;
}

.message-content iframe {
  display: block;
  margin: auto;
}

@media only screen and (max-width: 670px) {
  .message-content .video-container {
    margin-bottom: 20px;
  }
}
.message-content ul, .message-content ol {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 30px;
}
.message-content ul li, .message-content ol li {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  padding-bottom: 10px;
  padding-left: 30px;
  margin-bottom: 10px;
  border-bottom: 1px solid #d7d7d7;
  font-size: 15px;
  font-size: 0.9375rem;
  line-height: 1.6em;
  color: #282828;
}
.message-content ul li:last-of-type, .message-content ol li:last-of-type {
  border-bottom: none;
  padding-bottom: 0px;
  margin-bottom: 0px;
}
.message-content ul li a, .message-content ul li p, .message-content ol li a, .message-content ol li p {
  margin-bottom: 0px;
  line-height: 1.5em;
  color: #282828;
}
.message-content ul li a, .message-content ol li a {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.message-content ul li a:hover, .message-content ol li a:hover {
  color: #004f91;
}
.message-content ul li::before {
  content: "";
  position: absolute;
  top: 8px;
  right: auto;
  bottom: auto;
  left: 0;
  display: block;
  width: 6px;
  height: 6px;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  background-clip: padding-box;
  background-color: #004f91;
}
.message-content ol li {
  counter-increment: step-counter;
}
.message-content ol li::before {
  content: counter(step-counter);
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  color: #004f91;
  font-weight: 700;
}

@media only screen and (max-width: 670px) {
  .message-content ul, .message-content ol {
    margin-bottom: 20px;
  }
  .message-content ul li, .message-content ol li {
    padding-left: 20px;
    margin-bottom: 5px;
  }
}
.message-content blockquote {
  position: relative;
  display: block;
  width: 50%;
  height: auto;
  float: left;
  padding: 30px;
  padding-left: 0px;
  text-align: left;
}
.message-content blockquote::before {
  content: "";
  position: absolute;
  top: 10px;
  right: auto;
  bottom: auto;
  left: 0;
  display: block;
  width: 30px;
  height: 3px;
  background-color: #8bc751;
}
.message-content blockquote p {
  font-size: 26px;
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.3em;
  margin-bottom: 0px;
  padding: 0px;
}

@media only screen and (max-width: 670px) {
  .message-content blockquote {
    width: 100%;
    float: none;
    padding: 0px;
    padding-top: 30px;
    margin-bottom: 20px;
  }
  .message-content blockquote p {
    font-size: 18px;
    font-size: 1.125rem;
  }
}
.GDPRPopUpBackground {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  left: 0px;
  top: 0px;
  color: #828387;
  font-size: 18px;
  z-index: 9999;
}
.GDPRPopUpBackground .GDPRPopUp {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  padding: 0px 50px;
  width: 600px;
  background: linear-gradient(#02508e, #ffffff, #afd173);
}
.GDPRPopUpBackground .GDPRPopUp .LikeSection {
  text-align: center;
}
.GDPRPopUpBackground .GDPRPopUp img {
  text-align: center;
  margin: auto;
}
.GDPRPopUpBackground .GDPRPopUp .FirstImage {
  margin-bottom: 25px;
}
.GDPRPopUpBackground .GDPRPopUp .SecondImage {
  margin-bottom: 30px;
}
.GDPRPopUpBackground .GDPRPopUp .TitleSection {
  font-weight: bolder;
  text-align: center;
  line-height: 1;
  padding-bottom: 15px;
  border-bottom: 3px solid #04508e;
  margin-bottom: 10px;
}
.GDPRPopUpBackground .GDPRPopUp .FirstLine {
  color: #92bf3e;
  font-size: 66px;
}
.GDPRPopUpBackground .GDPRPopUp .SecondLine {
  color: #04508e;
  font-size: 50px;
}
.GDPRPopUpBackground .GDPRPopUp .DescriptionSection {
  text-align: center;
  padding: 0px 20px;
  margin-bottom: 15px;
}
.GDPRPopUpBackground .GDPRPopUp .TextSection {
  height: 75px;
  overflow: auto;
  text-align: left;
  font-size: 14px;
  color: #000000;
  background: #ffffff;
  margin-bottom: 10px;
  padding: 7px 10px;
}
.GDPRPopUpBackground .GDPRPopUp .DataWarningSection {
  text-align: center;
  font-size: 16px;
  margin-bottom: 10px;
}
.GDPRPopUpBackground .GDPRPopUp .FormSectionInputs {
  text-align: center;
  font-size: 16px;
  line-height: 25px;
  margin-bottom: 15px;
}
.GDPRPopUpBackground .GDPRPopUp .FormSectionInputs span {
  color: #04508e;
}
.GDPRPopUpBackground .GDPRPopUp .FormSectionInputs input[type=email] .GDPRPopUpBackground .GDPRPopUp .FormSectionInputs input[type=tel] {
  border: 1px solid #04508e;
  background: #ffffff;
  padding: 3px;
  color: #000000;
  line-height: 1px;
}
.GDPRPopUpBackground .GDPRPopUp .FormSectionCheckbox {
  color: #04508e;
  text-align: center;
  font-size: 16px;
  margin-bottom: 30px;
}
.GDPRPopUpBackground .GDPRPopUp .FormSectionCheckbox input {
  border: 1px solid #04508e;
}
.GDPRPopUpBackground .GDPRPopUp .FormSectionConfirm {
  text-align: center;
}
.GDPRPopUpBackground .GDPRPopUp .FormSectionConfirm a {
  display: inline-block;
  text-decoration: none;
  font-size: 25px;
  font-weight: bold;
  padding: 12px 45px;
  background: #04508e;
  margin-bottom: 25px;
  color: #ffffff;
}
.GDPRPopUpBackground .GDPRPopUp .FormSectionConfirm a:hover {
  background: #92bf3e;
}

input.invalid {
    border-color: #dc3545;
}

.invalid-feedback {
    color: #dc3545;
    font-size: 14px;
    line-height: 21px;
    margin-top: 4px;
    text-align: left;
}

.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 500,
        'GRAD' 0,
        'opsz' 48;
    font-size: 30px;
}

.web-client-container {
    margin-right: 90px;
    margin-bottom: 10px;
}
/*# sourceMappingURL=style.css.map */

.container {
    max-width: 99vw;
    margin: 15px auto;
    padding: 0;
}

.top-text-wrapper {
    margin: 0 0 0 0;
}

.top-text-wrapper h4 {
    font-size: 24px;
    margin-bottom: 10px;
}

.top-text-wrapper code {
    font-size: 0.85em;
    background: linear-gradient(90deg, #fce3ec, #ffe8cc);
    color: #ff2200;
    padding: 0.1rem 0.3rem 0.2rem;
    border-radius: 0.2rem;
}

.tab-section-wrapper {
    padding: 30px 0;
}

.grid-wrapper {
    display: grid;
    grid-gap: 15px;
    place-items: start;
    place-content: start;
}

.grid-col-auto {
    grid-auto-flow: column;
    grid-template-rows: auto;
}

/* ******************* Main Styeles : Radio Card */
label.radio-card {
    cursor: pointer;
}
label.radio-card .card-content-wrapper {
    background: #f6f6f6;
    border-radius: 15px;
    max-width: 170px;
    min-height: 100px;
    padding: 15px;
    display: grid;
    /*border: solid 2px lightgray;*/
    box-shadow: 0 2px 4px 0 rgba(219, 215, 215, 0.04);
    transition: 200ms linear;
}
label.radio-card .check-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    border: solid 2px lightgray;
    border-radius: 50%;
    transition: 200ms linear;
    position: relative;
}
label.radio-card .check-icon:before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.93552 4.58423C0.890286 4.53718 0.854262 4.48209 0.829309 4.42179C0.779553 4.28741 0.779553 4.13965 0.829309 4.00527C0.853759 3.94471 0.889842 3.88952 0.93552 3.84283L1.68941 3.12018C1.73378 3.06821 1.7893 3.02692 1.85185 2.99939C1.91206 2.97215 1.97736 2.95796 2.04345 2.95774C2.11507 2.95635 2.18613 2.97056 2.2517 2.99939C2.31652 3.02822 2.3752 3.06922 2.42456 3.12018L4.69872 5.39851L9.58026 0.516971C9.62828 0.466328 9.68554 0.42533 9.74895 0.396182C9.81468 0.367844 9.88563 0.353653 9.95721 0.354531C10.0244 0.354903 10.0907 0.369582 10.1517 0.397592C10.2128 0.425602 10.2672 0.466298 10.3112 0.516971L11.0651 1.25003C11.1108 1.29672 11.1469 1.35191 11.1713 1.41247C11.2211 1.54686 11.2211 1.69461 11.1713 1.82899C11.1464 1.88929 11.1104 1.94439 11.0651 1.99143L5.06525 7.96007C5.02054 8.0122 4.96514 8.0541 4.90281 8.08294C4.76944 8.13802 4.61967 8.13802 4.4863 8.08294C4.42397 8.0541 4.36857 8.0122 4.32386 7.96007L0.93552 4.58423Z' fill='white'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: 12px;
    background-position: center center;
    transform: scale(1.6);
    transition: 200ms linear;
    opacity: 0;
}
label.radio-card input[type=radio] {
    appearance: none!important;
    -webkit-appearance: none!important;
    -moz-appearance: none!important;
}
label.radio-card input[type=radio]:checked + .card-content-wrapper {
    box-shadow: 0 2px 4px 0 rgba(219, 215, 215, 0.5), 0 0 0 2px #3057d5;
    background: white;
}
label.radio-card input[type=radio]:checked + .card-content-wrapper .check-icon {
    background: #3057d5;
    border-color: #3057d5;
    transform: scale(1.2);
}
label.radio-card input[type=radio]:checked + .card-content-wrapper .check-icon:before {
    transform: scale(1);
    opacity: 1;
}
label.radio-card input[type=radio]:focus + .card-content-wrapper .check-icon {
    box-shadow: 0 0 0 4px rgba(48, 86, 213, 0.2);
    border-color: #3056d5;
}
label.radio-card .card-content {
    display: grid;
}

label.radio-card .card-content-apple {
    display: grid;
}



label.radio-card .card-content img {
    margin-bottom: 10px;
}
label.radio-card .card-content h4 {
    font-size: 16px;
    letter-spacing: -0.24px;
    text-align: center;
    color: #1f2949;
    margin-bottom: 10px;
}
label.radio-card .card-content h5 {
    font-size: 17px;
    line-height: 1.4;
    /*text-align: center;*/
    align-self: flex-end;
    color: #484848;
}

label.radio-card .card-content .apple_text {
    font-size: 16px;
    line-height: 1.4;
    /*text-align: center;*/
    align-self: flex-end;
    color: #484848;
}

.new_image{
    max-width: 50%;
    /*max-height: 55%;*/
    display: inline;
    /*vertical-align: middle;*/
}

.button-disabled{
    background-color: #9AA490 !important;
    pointer-events: none;
    color: white !important;
}

.cursor-default {
    cursor: default;
}

/* Wrapper διάφανο */
.mfa-popup-transparent {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 600px;
    overflow: visible !important;
}

/* HTML container override */
.mfa-html-container {
    overflow: visible !important;
    padding: 0 !important;
}

/* Η κάρτα σου */
.modal-card {
    position: relative !important;
    background: #fff;
    border-radius: 0px;
    width: 600px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    overflow: visible; !important;
}

/* Header */
.modal-card .mfa-header {
    background: #00004c;
    color: #fff;
    padding: 12px 16px;
    text-align: center;
    font-weight: 600;
}

/* Body */
.modal-card .mfa-body {
    padding: 24px 32px;
    font-size: 0.95rem;
    color: #333;
}

/* Close “X” */
/*.mfa-close {*/
/*    !* ensure it’s on top *!*/
/*    z-index: 9999 !important;*/
/*    !* position exactly where SweetAlert2 expects it *!*/
/*    position: relative !important;*/
/*    top: 0.5rem !important;*/
/*    right: 0.5rem !important;*/
/*    !* make the “×” icon dark and large enough *!*/
/*    color: #c00909 !important;*/
/*    font-size: 2rem !important;*/
/*    opacity: 1 !important;*/
/*    !* remove any background clipping *!*/
/*    background: none !important;*/
/*}*/
/*.mfa-close:hover {*/
/*    color: #333 !important;*/
/*}*/
/* ensure the close button is positioned over the top-right of the white card */
.mfa-popup-transparent .swal2-close,
.mfa-popup-transparent .mfa-close {
    position: absolute !important;
    top: 0.8rem !important;    /* distance from the top of the popup */
    right: -7.5rem !important;  /* distance from the right edge */
    color: #bd66f3 !important;     /* or whatever color you like */
    font-size: 3rem !important;
    z-index: 10 !important;
}

.mfa-popup-transparent .mfa-close:hover {
    color: #c00909 !important;
}

/* 4. Input πεδίο OTP */
.mfa-input {
    width: 80%;
    padding: 12px;
    font-size: 1rem;
    border: 1px solid #D1D1D1;
    border-radius: 4px;
    margin-top: 8px;
    box-sizing: border-box;
}

.mfa-error{
    color: red;
    font-size: 0.9rem;
    margin-left: 11%;
    margin-top: 4px;
    text-align: left;
    display: none;
}
.mfa-email{
    margin-top: 0.5rem;
    font-weight: bold;
    color: rgba(0, 46, 108, 0.8);
}

.mfa-label {
    display: block;
    margin-left: 10%;
    font-weight: 600;
    color: #333;
    text-align: left;
}


/* 5. Buttons γενικά */
.mfa-btn {
    display: inline-block;
    min-width: 140px;
    padding: 12px 0;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    border-radius: 24px;
    cursor: pointer;
    margin: 16px 8px 0 8px;
}

/* 5a. Primary επιλογής (SMS/Email) – πράσινο από Figma */
.mfa-btn-primary {
    background: #bd66f3;
    color: #FFF;
}

/* 5b. Secondary (Back) – μπλε από Figma */
.mfa-btn-secondary {
    background: #9AA490;
    color: #FFF;
}

/* 5c. Success (Complete) – πράσινο ίδιο με primary */
.mfa-btn-success {
    background: #bd66f3;
    color: #FFF;
}

/* 6. Hide default footer spacing */
.swal2-footer {
    margin: 0 !important;
    padding: 0 !important;
}

/* Target the loading spinner inside your MFA popup */
.swal2-popup.mfa-popup-transparent.swal2-loading .swal2-loader,
.swal2-popup.mfa-popup-transparent.swal2-loading .swal2-spinner {
    width: 80px !important;
    height: 80px !important;
}

/* And style the ring itself (the ::before) */
.swal2-popup.mfa-popup-transparent.swal2-loading .swal2-loader::before,
.swal2-popup.mfa-popup-transparent.swal2-loading .swal2-spinner::before {
    content: '';
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: auto;
    border: 8px solid rgba(0,0,0,0.1) !important;
    border-top-color: #acf674 !important;   /* your primary color */
    border-right-color: #acf674 !important; /* or same color */
    border-radius: 50% !important;
    animation: swal2-rotate-loading 1s linear infinite !important;
}

/* In case the keyframes got missed, redefine: */
@keyframes swal2-rotate-loading {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Change the “Αποστολή κωδικού…” title color in the MFA loading modal */
.swal2-popup.mfa-popup-transparent.swal2-loading .swal2-title {
    color: #000000 !important;     /* or whatever hex you need */
    font-size: 1.1rem;           /* optional: tweak size */
    font-weight: 1000;            /* optional: tweak weight */
}

/* custom validation message container */
.mfa-validation {
    background-color: #fee;        /* light red background */
    color: #900;                   /* dark red text */
    /*border: 1px solid #f99;        !* red border *!*/
    /*border-radius: 4px;*/
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    margin: 0.5rem auto 0;         /* space above the buttons */
    display: flex;
    align-items: center;
}
/* you can even prepend a custom icon */
.mfa-validation::before {
    content: '❗';
    margin-right: 0.5rem;
    font-size: 1.2rem;
}

.swal2-popup.mfa-popup-transparent .swal2-validation-message {
    position: absolute !important;
    bottom: -3.25rem !important;    /* pulls it just under the white box—tweak if needed */
    left: 64.3% !important;
    transform: translateX(-50%) !important;
    width: 600px !important;        /* same as popup width */
    z-index: 10000 !important;      /* above everything */
    box-sizing: border-box !important;
    margin: 0 !important;           /* no auto margins */
    padding: 0.75rem 1rem !important;
    text-align: center !important;
    background-color: #fff !important;  /* or whatever bg you want */
    /*border: 1px solid #f99 !important;*/
    /*border-radius: 4px !important;               !* no auto margins needed *!            !* align the text with your card’s text *!*/
}

.supply-actions{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 0;
    align-items: center;
    /*transition: all 2s ease;*/
    /*transform: matrix(1, 0, 0, 1, 0, 0);*/
    /*animation: slideInFromTop 2s cubic-bezier(0.05, 0.74, 0.27, 0.99) forwards;*/
}

.supply-actions-img{
    max-width: 250px !important;
    height: auto;
}

.btn-wrapper-green{
    display: flex;
    flex-direction: column;
    align-items: center;
    /*padding: 8px 116px;*/
    position: relative;
    width: 296px;
    height: 64px;
    justify-content: center;
    background: #bd66f3;
    color: #00004c;
    border-radius: 20px;

}

.tooltip-title{
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 6px;
}
/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    margin-bottom: 0.25rem;
}
/* Tooltip text */
.tooltip .tooltiptext {
    top: 100%;
    left: 50%;
    margin-left: -140px; /* Use half of the width (120/2 = 60), to center the tooltip */

    visibility: hidden;
    width: 280px;
    background-color: #fffec5;
    color: #5d594d;
    text-align: left;
    padding: 0.5rem 1rem 1rem 1rem;
    border-radius: 20px;
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

.outlined-text {
    -webkit-text-stroke: 1px #00004c; /* outline thickness and color */
}