html {
  box-sizing: border-box; }

*, *:before, *:after {
  box-sizing: inherit; }

/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

body {
  margin: 0; }

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

summary {
  display: list-item; }

audio, canvas, progress, video {
  display: inline-block; }

progress {
  vertical-align: baseline; }

audio:not([controls]) {
  display: none;
  height: 0; }

[hidden], template {
  display: none; }

a {
  background-color: transparent; }

a:active, a:hover {
  outline-width: 0; }

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted; }

b, strong {
  font-weight: bolder; }

dfn {
  font-style: italic; }

mark {
  background: #ff0;
  color: #000; }

small {
  font-size: 80%; }

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

figure {
  margin: 1em 40px; }

img {
  border-style: none; }

code, kbd, pre, samp {
  font-family: monospace,monospace;
  font-size: 1em; }

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible; }

button, input, select, textarea, optgroup {
  font: inherit;
  margin: 0; }

optgroup {
  font-weight: bold; }

button, input {
  overflow: visible; }

button, select {
  text-transform: none; }

button, [type=button], [type=reset], [type=submit] {
  -webkit-appearance: button; }

button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0; }

button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText; }

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: .35em .625em .75em; }

legend {
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal; }

textarea {
  overflow: auto; }

[type=checkbox], [type=radio] {
  padding: 0; }

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
  height: auto; }

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px; }

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none; }

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0; }

/* End extract */
input {
  appearance: none; }

@font-face {
  font-family: "Bebas-Neue";
  src: url("/public/fonts/bebas-neue-bold.woff2");
  font-weight: 600;
  font-style: normal; }
@font-face {
  font-family: "Bebas-Neue";
  src: url("/public/fonts/bebas-neue-book.woff2");
  font-weight: 400;
  font-style: normal; }
@font-face {
  font-family: "Nexa";
  font-weight: 200;
  src: url("/public/fonts/Nexa Light.woff2");
  font-style: normal; }
@font-face {
  font-family: "Nexa";
  font-weight: 600;
  src: url("/public/fonts/Nexa Bold.woff2");
  font-style: normal; }
input,
textarea,
select {
  background-color: #ffffff;
  font-size: 1rem; }

input[type=checkbox],
input[type=radio] {
  height: 20px;
  width: 20px;
  background-image: url("/public/images/radio-unchecked.svg");
  background-size: 20px 20px;
  background-position: center center;
  cursor: pointer;
  flex-shrink: 0; }

input[type=checkbox]:checked {
  background-image: url("/public/images/checkbox-checked.svg"); }

input[type=radio]:checked {
  background-image: url("/public/images/radio-checked.svg"); }

input[type=text],
input[type=email],
input[type=date],
input[type=file],
input[type=password],
input[type=number],
textarea,
select {
  width: 100%;
  border: none;
  outline: none;
  color: #2f2e82;
  font-weight: 600;
  letter-spacing: 1px;
  font-family: "Nexa", Helvetica, sans-serif;
  padding: 0.25rem;
  box-sizing: border-box; }

input[type=date] {
  width: max-content; }

input[type=date]::-webkit-calendar-picker-indicator {
  display: none; }

input[type=file] {
  padding: 4px; }

input[type=file] {
  display: none; }

input[type=file]::file-selector-button {
  border: 1px solid #2f2e82;
  color: #2f2e82;
  background-color: #ffffff;
  padding: 4px 8px;
  cursor: pointer; }

input[type=file]::file-selector-button:hover {
  background-color: #2f2e82;
  color: #ffffff; }

select {
  border: none;
  outline: none; }

html, body {
  height: 100%; }

html {
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  font-family: 'Bebas-Neue', Verdana, Sans-serif;
  letter-spacing: 0.1rem; }

body {
  background-color: #ffdd00;
  color: #ffffff;
  --red: #c00000;
  --cadisco-primary-color: #2f2e82;
  --cadisco-secondary-color: #ffdd00;
  --cadisco-ternary-color: #8ab725;
  --green: #8ab725;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column; }

ul {
  list-style: square; }

.header {
  position: sticky;
  top: 0;
  width: 100%;
  background-color: #ffdd00;
  height: 92px; }
  @media (min-width: 480px) {
    .header {
      height: 104px; } }
  @media (min-width: 1280px) {
    .header {
      height: 135px; } }
  .header .header-wrapper {
    align-items: center;
    border: none; }
    .header .header-wrapper .upper-band,
    .header .header-wrapper .lower-band {
      display: flex; }
    .header .header-wrapper .upper-band .strapline,
    .header .header-wrapper .lower-band .strapline {
      padding: 8px; }
      .header .header-wrapper .upper-band .strapline span,
      .header .header-wrapper .lower-band .strapline span {
        display: inline-block;
        color: #ffffff;
        font-size: 2.5rem;
        font-weight: bold;
        line-height: 2.5rem;
        text-transform: uppercase;
        height: 2.5rem;
        padding: 0;
        margin: 0;
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4); }
    .header .header-wrapper .upper-band {
      height: 50px;
      background: linear-gradient(135deg, #ffdd00 150px, #2f2e82 150px); }
      @media (min-width: 480px) {
        .header .header-wrapper .upper-band {
          height: 62px; } }
      @media (min-width: 1280px) {
        .header .header-wrapper .upper-band {
          height: 93px; } }
      @media (min-width: 480px) {
        .header .header-wrapper .upper-band {
          background: linear-gradient(135deg, #ffdd00 200px, #2f2e82 200px); } }
      @media (min-width: 1280px) {
        .header .header-wrapper .upper-band {
          background: linear-gradient(135deg, #ffdd00 370px, #2f2e82 370px); } }
      .header .header-wrapper .upper-band .logo {
        display: flex;
        padding: 12px; }
        .header .header-wrapper .upper-band .logo a img {
          width: 150px;
          height: auto;
          margin: 0;
          display: block; }
          @media (min-width: 480px) {
            .header .header-wrapper .upper-band .logo a img {
              width: 200px; } }
          @media (min-width: 1280px) {
            .header .header-wrapper .upper-band .logo a img {
              width: 370px; } }
      .header .header-wrapper .upper-band .right-part {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: end; }
        .header .header-wrapper .upper-band .right-part .strapline {
          display: none; }
          @media (min-width: 960px) {
            .header .header-wrapper .upper-band .right-part .strapline {
              display: inline-block; }
              .header .header-wrapper .upper-band .right-part .strapline span {
                font-size: 2rem; } }
          @media (min-width: 1280px) {
            .header .header-wrapper .upper-band .right-part .strapline span {
              font-size: 2.5rem; } }
        .header .header-wrapper .upper-band .right-part .social-networks {
          padding: 8px;
          display: flex; }
          .header .header-wrapper .upper-band .right-part .social-networks .upper-band-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 24px;
            width: 24px;
            padding: 4px;
            border: solid 1px #2f2e82;
            border-radius: 5px;
            margin: 2px; }
            @media (min-width: 720px) {
              .header .header-wrapper .upper-band .right-part .social-networks .upper-band-icon {
                height: 32px; } }
            @media (min-width: 1280px) {
              .header .header-wrapper .upper-band .right-part .social-networks .upper-band-icon {
                height: 42px; } }
            @media (min-width: 720px) {
              .header .header-wrapper .upper-band .right-part .social-networks .upper-band-icon {
                width: 32px; } }
            @media (min-width: 1280px) {
              .header .header-wrapper .upper-band .right-part .social-networks .upper-band-icon {
                width: 42px; } }
            .header .header-wrapper .upper-band .right-part .social-networks .upper-band-icon svg {
              height: 100%;
              width: auto;
              margin: auto; }
              .header .header-wrapper .upper-band .right-part .social-networks .upper-band-icon svg path {
                fill: #ffffff; }
          .header .header-wrapper .upper-band .right-part .social-networks .upper-band-icon:hover svg path {
            fill: #ffffff; }
        .header .header-wrapper .upper-band .right-part .other-language {
          display: flex;
          height: 24px;
          width: 24px;
          padding: 4px;
          justify-content: center;
          align-items: center;
          border: none;
          border-radius: 5px;
          margin: 2px 8px 2px 8px;
          background-color: #ffffff;
          color: #2f2e82;
          font-weight: 600; }
          @media (min-width: 720px) {
            .header .header-wrapper .upper-band .right-part .other-language {
              height: 32px; } }
          @media (min-width: 1280px) {
            .header .header-wrapper .upper-band .right-part .other-language {
              height: 42px; } }
          @media (min-width: 720px) {
            .header .header-wrapper .upper-band .right-part .other-language {
              width: 32px; } }
          @media (min-width: 1280px) {
            .header .header-wrapper .upper-band .right-part .other-language {
              width: 42px; } }
          .header .header-wrapper .upper-band .right-part .other-language .button-other-language {
            text-decoration: none;
            font-size: 1rem;
            color: #2f2e82; }
            @media (min-width: 720px) {
              .header .header-wrapper .upper-band .right-part .other-language .button-other-language {
                font-size: 1.5rem; } }
            @media (min-width: 1280px) {
              .header .header-wrapper .upper-band .right-part .other-language .button-other-language {
                font-size: 2rem; } }
          .header .header-wrapper .upper-band .right-part .other-language .button-other-language:hover {
            color: #2f2e82; }
    .header .header-wrapper .lower-band {
      height: 42px;
      background-color: #2f2e82;
      display: flex;
      justify-content: right;
      padding: 4px; }
      @media (min-width: 1280px) {
        .header .header-wrapper .lower-band {
          height: 42px; } }
      .header .header-wrapper .lower-band .strapline {
        text-transform: uppercase;
        display: flex;
        justify-content: left;
        width: 100%; }
        @media (min-width: 960px) {
          .header .header-wrapper .lower-band .strapline {
            display: none; } }
        .header .header-wrapper .lower-band .strapline span {
          font-size: 24px;
          line-height: 24px;
          height: 24px; }
      .header .header-wrapper .lower-band .header-menu {
        display: flex;
        justify-content: right; }
        .header .header-wrapper .lower-band .header-menu .nav {
          position: absolute;
          max-height: 0;
          height: 100vh;
          flex-grow: 1;
          margin-top: 92px;
          top: 0;
          left: 0;
          overflow: hidden;
          transition: max-height .5s ease-out;
          background-color: #2f2e82;
          display: flex;
          justify-content: center; }
          @media (min-width: 480px) {
            .header .header-wrapper .lower-band .header-menu .nav {
              margin-top: 104px; } }
          @media (min-width: 1280px) {
            .header .header-wrapper .lower-band .header-menu .nav {
              margin-top: 135px;
              height: fit-content;
              width: fit-content; } }
          @media (min-width: 1280px) {
            .header .header-wrapper .lower-band .header-menu .nav {
              position: relative;
              max-height: fit-content;
              margin-top: 0; } }
          @media (min-width: 1280px) {
            .header .header-wrapper .lower-band .header-menu .nav {
              border-radius: 3px; } }
          .header .header-wrapper .lower-band .header-menu .nav .menu {
            list-style: none;
            padding: 0;
            margin-top: 16px; }
            @media (min-width: 1280px) {
              .header .header-wrapper .lower-band .header-menu .nav .menu {
                margin: 0; } }
            .header .header-wrapper .lower-band .header-menu .nav .menu li {
              display: flex;
              margin: 24px; }
              @media (min-width: 1280px) {
                .header .header-wrapper .lower-band .header-menu .nav .menu li {
                  float: left;
                  position: relative;
                  border-bottom: none;
                  margin: 0; } }
              .header .header-wrapper .lower-band .header-menu .nav .menu li .menu-entry {
                text-decoration: none;
                font-size: 3rem;
                padding-bottom: 16px;
                margin: 16px 8px;
                font-weight: bold;
                color: #ffdd00;
                width: fit-content; }
                @media (min-width: 1280px) {
                  .header .header-wrapper .lower-band .header-menu .nav .menu li .menu-entry {
                    font-size: 2rem;
                    padding-bottom: 4px;
                    margin: 5px 8px; } }
              .header .header-wrapper .lower-band .header-menu .nav .menu li .menu-entry:hover {
                color: #ffdd00; }
              .header .header-wrapper .lower-band .header-menu .nav .menu li .link-account {
                color: #8ab725; }
              .header .header-wrapper .lower-band .header-menu .nav .menu li .link-account:hover {
                color: #8ab725; }
            .header .header-wrapper .lower-band .header-menu .nav .menu li[id=menu-map] {
              display: none; }
              @media (min-width: 1280px) {
                .header .header-wrapper .lower-band .header-menu .nav .menu li[id=menu-map] {
                  display: block; } }
            .header .header-wrapper .lower-band .header-menu .nav .menu li:last-child a {
              margin-right: 0; }
            .header .header-wrapper .lower-band .header-menu .nav .menu .submenu {
              padding: 0 12px; }
              @media (min-width: 1280px) {
                .header .header-wrapper .lower-band .header-menu .nav .menu .submenu {
                  display: none;
                  position: absolute;
                  top: 28px;
                  left: 0;
                  list-style: none;
                  padding-left: 0;
                  min-width: 200px;
                  background-color: #f9f9f9;
                  border: 1px solid #e6e6e6;
                  border-top: 2px solid #ffdd00; } }
              .header .header-wrapper .lower-band .header-menu .nav .menu .submenu li {
                width: max-content;
                border-bottom: none; }
                @media (min-width: 1280px) {
                  .header .header-wrapper .lower-band .header-menu .nav .menu .submenu li {
                    float: none; } }
                .header .header-wrapper .lower-band .header-menu .nav .menu .submenu li a {
                  font-weight: 200; }
                  @media (min-width: 1280px) {
                    .header .header-wrapper .lower-band .header-menu .nav .menu .submenu li a {
                      font-weight: 400;
                      font-size: 0.8rem;
                      display: block; } }
                .header .header-wrapper .lower-band .header-menu .nav .menu .submenu li a:hover {
                  color: #2f2e82; }
                @media (min-width: 1280px) {
                  .header .header-wrapper .lower-band .header-menu .nav .menu .submenu li a:hover + .submenu,
                  .header .header-wrapper .lower-band .header-menu .nav .menu .submenu li .submenu:hover {
                    display: block;
                    z-index: 10000; } }
              @media (min-width: 1280px) {
                .header .header-wrapper .lower-band .header-menu .nav .menu .submenu li:last-child a {
                  padding-right: 0; } }
        .header .header-wrapper .lower-band .header-menu .hamburger {
          cursor: pointer;
          float: right;
          margin: 7px auto; }
          @media (min-width: 1280px) {
            .header .header-wrapper .lower-band .header-menu .hamburger {
              display: none; } }
          .header .header-wrapper .lower-band .header-menu .hamburger .hamburger-line {
            background: #ffffff;
            display: inline-block;
            height: 2px;
            position: relative;
            width: 24px; }
          .header .header-wrapper .lower-band .header-menu .hamburger .hamburger-line::before,
          .header .header-wrapper .lower-band .header-menu .hamburger .hamburger-line::after {
            background: #ffffff;
            content: '';
            display: block;
            height: 100%;
            position: absolute;
            transition: all .2s ease-out;
            width: 100%; }
          .header .header-wrapper .lower-band .header-menu .hamburger .hamburger-line::before {
            top: 5px; }
          .header .header-wrapper .lower-band .header-menu .hamburger .hamburger-line::after {
            top: -5px; }
        .header .header-wrapper .lower-band .header-menu .side-menu {
          display: none; }
        .header .header-wrapper .lower-band .header-menu .side-menu:checked ~ nav {
          z-index: 9000;
          max-height: max-content; }
        .header .header-wrapper .lower-band .header-menu .side-menu:checked ~ .hamburger .hamburger-line {
          background: transparent; }
        .header .header-wrapper .lower-band .header-menu .side-menu:checked ~ .hamburger .hamburger-line::before {
          transform: rotate(-45deg);
          top: 0; }
        .header .header-wrapper .lower-band .header-menu .side-menu:checked ~ .hamburger .hamburger-line::after {
          transform: rotate(45deg);
          top: 0; }
        .header .header-wrapper .lower-band .header-menu .log-out,
        .header .header-wrapper .lower-band .header-menu .log-out:visited,
        .header .header-wrapper .lower-band .header-menu .log-out:hover {
          border: none;
          background: none;
          margin-left: 8px;
          cursor: pointer;
          font-size: 1.5rem;
          color: #ffdd00;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          text-decoration: none; }

.body-wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  scroll-margin-top: 92px; }
  @media (min-width: 480px) {
    .body-wrapper {
      scroll-margin-top: 104px; } }
  @media (min-width: 1280px) {
    .body-wrapper {
      scroll-margin-top: 135px; } }
  .body-wrapper .body-content {
    background-color: #2f2e82; }

.body-content {
  flex-grow: 1;
  padding: 16px; }
  @media (min-width: 960px) {
    .body-content {
      padding: 0; } }
  .body-content .catch-phrase {
    padding: 40px 80px; }
    .body-content .catch-phrase * {
      font-weight: 600;
      line-height: 2.5rem; }
      @media (min-width: 960px) {
        .body-content .catch-phrase * {
          line-height: 3.5rem; } }
    .body-content .catch-phrase p {
      font-size: 2.5rem;
      text-align: center; }
      @media (min-width: 960px) {
        .body-content .catch-phrase p {
          font-size: 3.5rem; } }
      .body-content .catch-phrase p span {
        color: #ffdd00; }

.body-wrapper,
.header .header-wrapper,
.footer {
  padding: 0 0; }
  @media (min-width: 720px) {
    .body-wrapper,
    .header .header-wrapper,
    .footer {
      padding: 0 15%; } }

.cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start; }
  @media (min-width: 1080px) {
    .cards {
      flex-direction: row;
      column-gap: 20px;
      justify-content: space-evenly;
      align-items: start; } }
  .cards .card {
    margin: 20px;
    flex: 1 1 30%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    flex-grow: 1;
    min-width: 200px;
    max-width: 250px; }
  .cards .card .card-image {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 100%;
    /* or any width you want (e.g., 50%, 33%, etc.) */
    aspect-ratio: 1 / 1;
    border: solid 10px #ffdd00;
    border-radius: 40px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: end;
    padding: 10px; }
    @media (min-width: 1400px) {
      .cards .card .card-image {
        border: solid 13px #ffdd00;
        border-radius: 50px; } }
    .cards .card .card-image p {
      color: #ffdd00;
      font-weight: 600;
      font-size: 2.5rem;
      line-height: 2.5rem;
      padding: 0;
      margin: 0; }
      @media (min-width: 1400px) {
        .cards .card .card-image p {
          font-size: 3.5rem;
          line-height: 3.5rem; } }
  .cards .card-account .card-image {
    background-image: linear-gradient(rgba(47, 46, 130, 0.5), rgba(47, 46, 130, 0.6)), url("/public/images/home-pumps-536px.jpg"); }
  .cards .card-prepaid-vouchers .card-image {
    background-image: linear-gradient(rgba(47, 46, 130, 0.5), rgba(47, 46, 130, 0.6)), url("/public/images/home-gas-station-551px.jpg"); }
  .cards .card-delivery .card-image {
    background-image: linear-gradient(rgba(47, 46, 130, 0.5), rgba(47, 46, 130, 0.6)), url("/public/images/home-fuel-truck-550px.jpg"); }
  .cards .card .card-text {
    font-size: 1.5rem; }

.call-to-action {
  padding: 40px; }
  .call-to-action p {
    line-height: 3rem;
    font-weight: 600;
    font-size: 3rem;
    text-align: center; }
  .call-to-action .call-to-action-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 20px; }
    .call-to-action .call-to-action-button a {
      background-color: #8ab725;
      color: #ffffff;
      text-transform: uppercase;
      padding: 8px 16px;
      font-size: 2rem;
      font-weight: 600;
      text-decoration: none; }
      .call-to-action .call-to-action-button a i {
        margin-left: 8px; }

.contact {
  background-color: #8ab725;
  background-image: url("/public/images/contact-phone.png"), url("/public/images/contact-email.png");
  background-repeat: no-repeat, no-repeat;
  background-position: top left, bottom right;
  background-size: 200px auto, 200px auto;
  padding: 200px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }
  @media (min-width: 960px) {
    .contact {
      background-size: 250px auto, 250px auto; } }
  .contact .contact-text-part1,
  .contact .contact-text-part2,
  .contact .contact-text-part3 {
    font-weight: 600;
    font-size: 2.5rem;
    line-height: 2.5rem;
    text-align: center;
    padding: 0;
    margin: 0; }
    @media (min-width: 1400px) {
      .contact .contact-text-part1,
      .contact .contact-text-part2,
      .contact .contact-text-part3 {
        font-size: 3.5rem;
        line-height: 3.5rem; } }
  .contact .contact-text-part1 {
    color: #ffffff; }
  .contact .contact-text-part2,
  .contact .contact-text-part3 {
    color: #ffdd00; }

.common-page {
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  row-gap: 24px;
  align-items: center; }
  .common-page h1 {
    color: #ffffff;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    align-items: center; }
    .common-page h1 .main-title {
      font-size: 2.5rem;
      line-height: 2.5rem; }
      @media (min-width: 960px) {
        .common-page h1 .main-title {
          font-size: 3.5rem;
          line-height: 3.5rem; } }
    .common-page h1 .secondary-title {
      font-size: 1.5rem;
      line-height: 1.5rem; }
      @media (min-width: 960px) {
        .common-page h1 .secondary-title {
          font-size: 2.5rem;
          line-height: 2.5rem; } }

.account-login-page h1 {
  font-size: 2.5rem;
  line-height: 1em;
  text-align: center; }
  @media (min-width: 960px) {
    .account-login-page h1 {
      font-size: 3.5rem; } }
.account-login-page h2 {
  padding: 20px 0;
  font-weight: 600;
  font-size: 2.5rem;
  line-height: 1em;
  text-align: center; }
  @media (min-width: 960px) {
    .account-login-page h2 {
      font-size: 3.5rem; } }
  .account-login-page h2 span:first-child {
    color: #ffdd00; }
  .account-login-page h2 span:last-child {
    color: #8ab725; }

.default-link,
.default-link,
.default-link:hover {
  margin-top: 8px;
  color: #ffdd00; }

.small-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; }
  .small-form form,
  .small-form .small-form-row {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    width: 100%; }
    @media (min-width: 960px) {
      .small-form form,
      .small-form .small-form-row {
        width: 400px; } }
  .small-form .small-form-row {
    padding: 16px 0; }
    .small-form .small-form-row .label {
      display: flex;
      flex-direction: column;
      justify-content: start;
      align-items: start;
      font-size: 1.5rem; }
      .small-form .small-form-row .label span:last-child {
        font-size: 1rem; }
    .small-form .small-form-row .small-form-label {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      width: 100%; }
      .small-form .small-form-row .small-form-label i {
        font-size: 1.2rem;
        color: #ffdd00;
        cursor: pointer; }
    .small-form .small-form-row .small-form-sublabel {
      font-size: 1rem; }
    .small-form .small-form-row .small-form-input {
      width: 100%;
      padding-top: 8px; }
  .small-form .small-form-row-chk {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    column-gap: 8px; }
  .small-form .btn-validate,
  .small-form .btn-validate:visited,
  .small-form .btn-validate:hover {
    border: none;
    width: 100%;
    background-color: #ffdd00;
    color: #2f2e82;
    padding: 8px 16px;
    font-size: 1.5rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    text-align: center; }

.large-form a,
.large-form a:hover,
.large-form a:visited,
.small-form a,
.small-form a:hover,
.small-form a:visited {
  color: #ffdd00;
  font-weight: 600; }

.large-form {
  width: 100%;
  max-width: 800px;
  margin: 0 auto; }
  .large-form .large-form-row {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 4px 0; }
    .large-form .large-form-row h2 {
      font-weight: 600;
      font-size: 1.2rem;
      color: #ffdd00;
      padding-top: 16px; }
    .large-form .large-form-row button {
      background-color: #ffdd00;
      color: #2f2e82;
      font-size: 2rem;
      font-weight: 600;
      padding: 8px 16px;
      min-width: 200px;
      border: none;
      cursor: pointer; }
    .large-form .large-form-row .input-block {
      display: flex;
      flex-direction: column;
      flex: 1;
      align-items: start; }
    @media (min-width: 960px) {
      .large-form .large-form-row .input-block {
        display: flex;
        flex-direction: row;
        align-items: center; } }
    .large-form .large-form-row .input-block-full-width {
      width: 100%; }
    .large-form .large-form-row .input-block-half-width {
      width: 100%; }
    @media (min-width: 960px) {
      .large-form .large-form-row .input-block-half-width {
        width: calc(50% - 0.5em);
        /* leave space for the gap */ } }
    .large-form .large-form-row .input-block-label {
      display: flex;
      flex-direction: column;
      align-items: start;
      padding-right: 0.5em; }
      .large-form .large-form-row .input-block-label label,
      .large-form .large-form-row .input-block-label span {
        font-weight: 600;
        font-size: 1rem;
        text-align: left; }
      .large-form .large-form-row .input-block-label .sublabel {
        font-weight: 400;
        font-size: 0.8rem;
        font-style: italic; }
    @media (min-width: 960px) {
      .large-form .large-form-row .input-block-label {
        flex: 0 0 200px;
        /* fixed width for all labels */
        align-items: end;
        padding-right: 1em;
        box-sizing: border-box; }
        .large-form .large-form-row .input-block-label label,
        .large-form .large-form-row .input-block-label span {
          text-align: right; } }
    .large-form .large-form-row .input-block-input {
      flex: 1;
      display: flex;
      flex-direction: row;
      justify-content: start;
      align-items: center;
      flex-wrap: wrap; }
      .large-form .large-form-row .input-block-input label {
        overflow-wrap: break-word; }
    .large-form .large-form-row .input-block-input input[type=text],
    .large-form .large-form-row .input-block-input input[type=number] {
      width: 100%; }
  @media (min-width: 960px) {
    .large-form .large-form-row {
      flex-direction: row; } }

.account-login-page .login-form hr {
  width: 100%;
  height: 1px;
  border: none;
  background-color: #ffdd00; }
.account-login-page .login-form .btn-create-account,
.account-login-page .login-form .btn-create-account:visited,
.account-login-page .login-form .btn-create-account:hover {
  border: solid 2px #ffdd00;
  background-color: #2f2e82;
  color: #ffffff;
  padding: 8px 16px;
  text-decoration: none;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  width: 100%; }

.error-messages {
  color: #c00000;
  font-weight: 600;
  padding: 4px !important;
  margin: 0 16px !important;
  background-color: rgba(255, 255, 255, 0.5); }

.otp-inputs {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  width: 100%; }

.otp-inputs input {
  width: 50px;
  height: 60px;
  font-size: 2rem;
  text-align: center; }

.otp-inputs input:focus {
  border: 2px solid #ffdd00; }

.radio {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 0 0 25%;
  padding: 4px 0; }
  .radio label {
    margin-left: 8px;
    cursor: pointer; }

.radio-double-width {
  flex: 0 0 50%; }

.radio-triple-width {
  flex: 0 0 75%; }

.radio-full-width {
  flex: 0 0 100%; }

.hidden {
  display: none !important; }

.input-block-input-file label {
  cursor: pointer; }
  .input-block-input-file label .btn-file-select {
    padding: 2px 8px;
    background-color: #ffdd00;
    color: #2f2e82;
    margin-right: 8px;
    font-weight: 600; }

.monthly-consumption-unit {
  display: flex;
  flex-direction: row;
  padding: 0 8px; }
  .monthly-consumption-unit input {
    margin-left: 12px; }
  .monthly-consumption-unit label {
    margin-left: 4px; }

.monthly-consumption {
  width: 8ch !important; }

.selected-file {
  margin-left: 16px;
  color: #ffdd00; }

.my-account-page h1 {
  align-items: start; }
  .my-account-page h1 .main-title {
    font-size: 1.5rem;
    line-height: 1.5rem; }
    @media (min-width: 960px) {
      .my-account-page h1 .main-title {
        font-size: 2.5rem;
        line-height: 2.5rem; } }
  .my-account-page h1 .secondary-title {
    font-size: 2.5rem;
    line-height: 2.5rem; }
    @media (min-width: 960px) {
      .my-account-page h1 .secondary-title {
        font-size: 3.5rem;
        line-height: 3.5rem; } }

.tmp-contacts {
  display: flex;
  flex-direction: column;
  justify-content: start; }
  @media (min-width: 960px) {
    .tmp-contacts {
      flex-direction: row;
      justify-content: space-between; } }
  .tmp-contacts .tmp-contact a {
    font-size: 1.5rem;
    text-decoration: none; }
    @media (min-width: 960px) {
      .tmp-contacts .tmp-contact a {
        font-size: 2rem; } }
  .tmp-contacts .tmp-contact a i {
    margin-right: 16px; }

/*# sourceMappingURL=style.css.map */