:root {
  --black: #000000;
  --white: #ffffff;
  --blue: #6080f0;
  --yellow: #f1d24d;
  --amber: #ff8d00;
  --red: #ff0000;
  --cadetBlue: #4a4f63;
  --blackGrey: #303030;
  --triggerGrey: #707070;
  --darkestGrey: #4a4f63;
  --darkGrey: #bfbfbf;
  --disabledGrey: #999999;
  --midGrey: #f0f0f0;
  --milderGrey: #eaeaea;
  --inputGrey: #dadada;
  --lightGrey: #f9f9f9;
  --SIERA-Teal: #255056;
  --SIERA-Teal-1: rgba(37, 80, 86, 0.2);
  --containerWidth: 93rem;
  --containerPadding: 1.5rem;
  --rootFontSize: 62.5%;
  --textFontSize: 1.6rem;
  --bigFontSize: 2.2rem;
  --marginSectionBig: 10rem;
  --marginSectionSmall: 8.5rem;
  --borderSmall: 0.2rem;
  --borderBig: 0.5rem;
  --marginSmall: 0.2rem;
  --paddingMedium: 1.9rem;
  --paddingBig: 4.9rem;
  --paddingBigMinus: -4.9rem;
  --lineHeight: 2.6rem;
  --fontWeightLigh: 400;
  --fontWeightBold: 500;
  --translateXSmall: 4rem;
  --transitionTimeSmall: 0.2s;
  --minWidthLabel: 12rem;
  --widthMinusIcon: 2rem;
  --heightMinusIcon: 0.3rem;
  --posTopMinusIcon: 3rem;
  --posRightMinusIcon: 4.9rem;
  --width1: 0.1rem;
  --width2: 0.2rem;
  --width4: 0.4rem;
  --width5: 0.5rem;
  --width6: 0.6rem;
  --width9: 0.9rem;
  --width10: 1rem;
  --width12: 1.2rem;
  --width13point5: 1.35rem;
  --width14: 1.4rem;
  --width15: 1.5rem;
  --width16: 1.6rem;
  --width20: 2rem;
  --width22: 2.2rem;
  --width28: 2.8rem;
  --width32: 3.2rem;
  --width35: 3.5rem;
  --width42: 4.2rem;
  --width55: 5.5rem;
  --widthMinus65: -6.5rem;
  --width80: 8rem;
  --width120: 12rem;
  --width150: 15rem;
  --width164: 16.4rem;
  --width198: 19.8rem;
  --width260: 26rem;
  --width304: 30.4rem;
  --width338: 33.8rem;
  --width500: 50rem;
}

@keyframes loadingBar {
  0% {width: 0}
  100% {width: calc(100% - var(--width4))}
}

@keyframes modalAnimation {
  0% {opacity: 0; transform: translate(-50%, -100%)}
  100% {opacity: 1; transform: translate(-50%, -50%)}
}

@keyframes fullView {
  100% {
    width: 100%;
  }
}

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

* {
  margin: 0;
  font-family: 'Inter', sans-serif;
}

html {
  font-size: var(--rootFontSize);
}

body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

p {
  line-height: var(--lineHeight);
}

p, a, li, span {
  font-size: var(--textFontSize);
}

header {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  padding: var(--marginSectionBig) 0 var(--marginSectionSmall);
}

header p {
  margin-left: auto;
  font-size: var(--bigFontSize);
}

.container {
  width: calc(100% - 3rem);
  max-width: var(--containerWidth);
  margin: 0 auto;
  padding: 0 var(--containerPadding);
}

ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul {
  border-top: var(--borderBig) solid var(--cadetBlue);
}

li {
  position: relative;
  margin-bottom: var(--marginSmall);
}

.summary-wrap {
  padding: var(--paddingMedium) var(--paddingBig);
  cursor: pointer;
}

summary {
  list-style: none;
}

summary * {
  transition: opacity var(--transitionTimeSmall) ease-in-out;
}

span.mpan {
  word-break: break-all;
}

span.meter-id {
  word-break: break-all;
}

summary p,
.content p {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

summary:focus,
summary:active {
  outline: none
}

details {
  position: relative;
  background-color: var(--lightGrey);
  border-bottom: var(--borderSmall) solid var(--milderGrey);
  overflow: hidden;
}

details .content {
  padding: var(--paddingMedium) var(--paddingBig);
}

span.label {
  font-weight: var(--fontWeightBold);
  min-width: var(--minWidthLabel);
}

details[open] {
  background: var(--white);
}

details[open] .summary-wrap {
  padding-bottom: 0;
}

details[open] .content {
  padding-top: 0;
}

details .minus-icon {
  display: block;
  position: absolute;
  opacity: 0;
  top: var(--posTopMinusIcon);
  right: var(--posRightMinusIcon);
  content: '';
  width: var(--widthMinusIcon);
  height: var(--heightMinusIcon);
  background: var(--blue);
  transform: translateX(var(--translateXSmall));
  transition: all var(--transitionTimeSmall) ease-in-out;
}

details[open] .minus-icon {
  opacity: 1;
  transform: translateX(0);
}

.list-index {
  position: absolute;
  width: var(--width35);
  height: var(--width35);
  background: var(--darkGrey);
  color: var(--white);
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
  left: var(--widthMinus65);
  text-align: center;
  line-height: var(--width35);
  border-radius: var(--width35);
  transition: all var(--transitionTimeSmall) ease-in-out;
}

form {
  padding-top: var(--width20);
}

form:before {
  content: "";
  display: block;
  position: relative;
  width: calc(100% + var(--paddingBig) * 2);
  height: var(--width1);
  margin-left: var(--paddingBigMinus);
  margin-bottom: var(--width20);
  background: var(--milderGrey);
}

.form-group {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: var(--width20);
}

.form-group label {
  font-weight: var(--fontWeightBold);
  min-width: var(--minWidthLabel);
}

input[type="number"], input[type="text"] {
  padding: var(--width12) var(--width16);
  padding-right: var(--width55);
  font-size: var(--width16);
  border: 1px solid var(--inputGrey);
  background: var(--midGrey);
  width: 100%;
  border-radius: 0;
}

input[type="number"] {
  border-radius: var(--heightMinusIcon);
}

.consumption-wrap {
  display: flex;
  position: relative;
  width: 100%;
  max-width: var(--width338);
  margin-right: var(--width20);
}

.consumption-wrap:after { 
  content: "";  
  display: block;
  position: absolute;
  width: var(--width32);
  right: var(--width16);
  top: var(--width14);
  font-size: var(--width14);
  text-align: right;
}

input[type="number"]:focus, input[type="text"]:focus,
input[type="number"]:active, input[type="text"]:active {
  outline: none;
}

input[name="unitInput"] {
  width: var(--width32);
  border-left: 0;
  text-align: right;
  font-size: var(--width14);
  padding: var(--width13point5) var(--width16) var(--width13point5) var(--width12);
  border-radius: 0 var(--heightMinusIcon) var(--heightMinusIcon) 0;
  margin-right: var(--width20);
}

input[disabled],
textarea[disabled] {
  background: var(--lightGrey);
  border-color: var(--midGrey);
  color: var(--disabledGrey)
}

input:not([disabled]) + input[disabled] {
  border: 1px solid var(--inputGrey);
  background: var(--midGrey);
  color: var(--black);
}

input:not([disabled]) + input[disabled][name="unitInput"] {
  border-left: 0;
}

.use-label {
  position: relative;
  display: flex;
  min-width: var(--width150);
  align-items: center;
  width: var(--width150);
  font-size: var(--width14);
  cursor: pointer;
  transition: all var(--transitionTimeSmall) ease-in-out;
  color: var(--disabledGrey);
}

.use-label.active {
  color: var(--black);
}

.use-label:hover {
  color: var(--black);
}

.use-label-icon {
  margin-left: auto;
}

.use-label-icon ellipse.border {
  stroke: var(--disabledGrey);
  transition: all var(--transitionTimeSmall) ease-in-out;
}

.use-label-icon ellipse.circle {
  fill: var(--white);
  transition: all var(--transitionTimeSmall) ease-in-out;
}

.use-label.active ellipse.border {
  stroke: var(--triggerGrey);
}

.use-label:hover ellipse.border {
  stroke: var(--triggerGrey);
}

.use-label.active ellipse.circle {
  fill: var(--triggerGrey);
}

textarea {
  width: 100%;
  max-width: var(--width304);
  resize: vertical;
  padding: var(--width12) var(--width16);
  font-size: var(--width16);
  border: 1px solid var(--inputGrey);
  background: var(--midGrey);
  border-radius: var(--heightMinusIcon);
}

textarea:focus,
textarea:active {
  outline: none;
}

.form-group-not-centered {
  align-items: flex-start;
}

.form-group-not-centered label {
  margin-top: var(--width10);
}

button.add-consumption-btn {
  background: var(--cadetBlue);
  color: var(--white);
  font-size: var(--width16);
  border: 0;
  font-weight: var(--fontWeightBold);
  padding: var(--width10) var(--width20);
  border-radius: var(--borderBig);
  cursor: pointer;
  margin-right: var(--width10);
}

button[disabled].add-consumption-btn {
  opacity: 0.5;
  cursor: initial;
}

button.add-consumption-btn:focus,
button.add-consumption-btn:active {
  outline: none;
}

li.open .list-index {
  top: var(--width28);
  transform: none;
}

.submit-btn {
  display: none;
  margin-left: auto;
  background: var(--yellow);
  color: var(--blackGrey);
  font-size: var(--width16);
  border: 0;
  margin-top: var(--width42);
  font-weight: var(--fontWeightBold);
  padding: var(--width10) var(--width20);
  border-radius: var(--borderBig);
  cursor: pointer;
  -webkit-box-shadow: 0px var(--borderSmall) var(--borderSmall) 0px rgba(0,0,0,.25);
  -moz-box-shadow: 0px var(--borderSmall) var(--borderSmall) 0px rgba(0,0,0,.25);
  box-shadow: 0px var(--borderSmall) var(--borderSmall) 0px rgba(0,0,0,.25);
  transition: all var(--transitionTimeSmall) ease-in-out;
}

.submit-btn.ready {
  display: flex;
}

.submit-btn:focus,
.submit-btn:active {
  outline: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

input:-internal-autofill-previewed {
  appearance: none;
  background-image: none;
}

.validation-errors {
  width: 100%;
  margin-left: var(--minWidthLabel);;
}

p.v-empty-value,
p.v-negative-value,
p.v-greater-than-ten-percent {
  display: none;
  color: var(--red);
  margin-top: var(--width10);
}

.content p.v-fifty-limit {
  display: none;
  color: var(--black);
  margin-left: var(--minWidthLabel);
  margin-top: var(--width10);
  margin-bottom: 0;
}

p.v-fifty-limit.shown {
  display: block;
}

p.v-greater-than-ten-percent {
  color: var(--amber);
}

p.v-empty-value.invalid,
p.v-negative-value.invalid,
p.v-greater-than-ten-percent.invalid {
  display: block;
}

p.v-greater-than-ten-percent span {
  cursor: pointer;
  color: var(--blue);
  text-decoration: underline;
  font-weight: var(--fontWeightBold);
}

p.v-greater-than-ten-percent span:hover {
  text-decoration: none;
}

span.change-consumption-btn {
  display: none;
  cursor: pointer;
  text-decoration: underline;
  font-weight: var(--fontWeightBold);
  color: var(--cadetBlue);
}

span.change-consumption-btn.visible {
  display: block;
}

span.change-consumption-btn:hover {
  text-decoration: none;
}

.check-icon,
.check-black-icon {
  opacity: 0;
  position: absolute;
  width: var(--width20);
  top: 50%;
  transform: translate(0, -50%);
  right: var(--paddingBig);
  z-index: 1;
  transition: all var(--transitionTimeSmall) ease-in-out;
  cursor: pointer;
}

li.completed .check-icon {
  opacity: 1;
}

li.completed details[open] .check-icon {
  transform: translate(var(--translateXSmall), -50%);
  opacity: 0;
}

.submit-btn.submitting {
  background: var(--cadetBlue);
  color: var(--white);
  transition: all var(--transitionTimeSmall) ease-in-out;
}

.loading-icon-span {
  position: relative;
  display: inline-block;
  background: var(--cadetBlue);
  border: var(--width1) solid var(--white);
  border-radius: var(--width4);
  height: var(--width6);
  width: var(--width32);
  margin-right: var(--width15);
}

.loading-icon-span:before {
  content: '';
  position: absolute;
  left: var(--width2);
  top: var(--width2);
  height: var(--width2);
  border-radius: var(--width4);
  background: var(--white);
  animation: loadingBar 1s infinite;
}

.modal {
  display: none;
  position: fixed;
  background: var(--cadetBlue);
  width: auto;
  max-width: var(--width500);
  padding: var(--width32) var(--posRightMinusIcon);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  text-align: center;
  border-radius: var(--width5);
  animation: modalAnimation 0.3s;
}

.modal p {
  color: var(--white);
  margin-bottom: var(--width32);
}

.modal p:last-child {
  margin-bottom: 0;
}

.modal p:first-child {
  margin-top: var(--width32);
}

.close {
  position: relative;
  display: block;
  margin-left: auto;
  width: var(--width16);
  height: var(--width16);
  opacity: 0.5;
  cursor: pointer;
  transition: all var(--transitionTimeSmall) ease-in-out;
  transform-origin: center;
}

.close:before {
  content: '';
  position: absolute;
  width: var(--width16);
  height: var(--width2);
  background: white;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: var(--width2);
}

.close:after {
  content: '';
  position: absolute;
  width: var(--width16);
  height: var(--width2);
  background: white;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  border-radius: var(--width2);
}

.close:hover {
  opacity: 1;
}

.close:hover {
  
  transform: rotate(180deg);
}

body.modal-present .container {
  pointer-events: none;
}

.disabled {
  pointer-events: none;
}

.disabled .check-black-icon {
  opacity: 1;
}

.completed summary:before {
  content: 'Not yet submitted';
  position: absolute;
  color: var(--blue);
  background-color: var(--lightGrey);
  top: 50%;
  right: var(--width80);
  display: block;
  z-index: 3;
  opacity: 0;
  transform: translateY(100%);
  transition: all var(--transitionTimeSmall) ease-in-out;
  cursor: pointer;
}

.completed.open summary:before {
  display: none;
}

.completed:hover summary:before {
  opacity: 1;
  transform: translateY(-50%);
}

.disabled-li:before {
  content: 'Submitted to Siera';
  position: absolute;
  top: 50%;
  right: var(--width80);
  background-color: var(--lightGrey);
  display: block;
  z-index: 3;
  opacity: 0;
  transform: translateY(100%);
  transition: all var(--transitionTimeSmall) ease-in-out;
}

.disabled-li:hover:before {
  opacity: 1;
  transform: translateY(-50%);
}

.disabled-li:hover summary *:not(.check-black-icon) {
  opacity: 0;
}

.completed:not(.open):hover summary *:not(.check-icon) {
  opacity: 0;
}

input.invalid-input,
input.invalid-input + input[name="unitInput"] {
  border-color: red;
}

input.invalid-warning-input,
input.invalid-warning-input + input[name="unitInput"] {
  border-color: var(--amber);
}

.modal-content {
  max-height: 75vh;
  overflow-y: auto;
}


.modal-content span {
  display: block;
}

.empty-list {
  padding: var(--width32) 0;
}

/* Shimmer animation */
.shimmer {
  position: relative;
  border-bottom: var(--borderSmall) solid var(--milderGrey);
  padding: 20px 50px;
  background-color: var(--lightGrey);
  margin-bottom: 2px;
  display: none;
}

.shimmer:last-child {
  margin-bottom: 0;
}

.shimmer.display {
  display: block;
}

.indexBubble {
  position: absolute;
  left: -60px;
  top: 50%;
  transform: translateY(-50%);
  height: 35px;
  width: 35px;
  border-radius: 50%;
}

.comment {
  height: 10px;
  background: #777;
  margin-top: 20px;
  width: 100%;
}

.w20 {
  width: 20%;
  margin-top: 0;
  margin-right: 50px;
  display: inline-block;
}

.w70 {
  width: 70%;
  margin-top: 0;
  display: inline-block;
}

.comment:first-of-type {
  margin-top: 0;
}

.wrapper {
  width: 0px;
  animation: fullView 0.001s forwards linear;
}

.animate {
  animation : shimmer 2s infinite;
  background: linear-gradient(to right, #eff1f3 4%, #e2e2e2 25%, #eff1f3 36%);
  background-size: 1000px 100%;
}

/* Footer */

footer {
  padding-bottom: 30px;
  margin-top: auto;
}

footer span {
  font-size: 14px;
}

.footer-wrap {
  margin-top: 3rem;
}

.footer-wrap em {
  font-style: normal;
  padding: 0 5px;
}

.footer-hr {
  border-top: 1px solid var(--SIERA-Teal-1);
}

.footer-data {
  padding: 20px 0;
  display: flex;
  color: var(--SIERA-Teal);
}

.footer-logo-address {
  padding-right: 60px;
}

.footer-logo {
  display: flex;
  margin-bottom: 20px;
}

.evora-logo {
  display: flex;
  flex-direction: column;
  width: 100px;
}

.footer-address {
  display: flex;
  flex-direction: column;
  line-height: 2.4rem;
}

.footer-contactDetails {
  display: flex;
  flex-direction: column;
  line-height: 2.4rem;
  align-self: flex-end;
}

.footer-Conditions {
  display: flex;
  flex-direction: column;
  margin-left: auto;
  padding-right: 0;
}

.footer-logout {
  display: flex;
  justify-content: flex-end;
  margin-right: 0.4rem;
  margin-bottom: 1.5rem;
}

.logout-title {
  text-decoration-line: underline;
  color: #707070;
  margin-right: 0.5rem;
  font-size: 100%;
  text-underline-offset: 0.2rem;
  cursor: pointer;
}

.logout-icon {
  position: relative;
  padding-left: 0.2rem;
  cursor: pointer;
}

.logout-box {
  position: relative;
}

.logout-arrow {
  position: absolute;
  top: 0.35rem;
  left: 0.7rem;
}

.conditions {
  display: flex;
  flex-direction: column;
  line-height: 2.4rem;
  margin-top: auto;
}

.conditions span {
  margin-left: auto;
}

/* Tablet and mobile view */

@media only screen and (max-width: 1140px) {
  .list-index {
    left: var(--width15);
    font-size: var(--width12);
    width: var(--width22);
    height: var(--width22);
    line-height: var(--width22);
    border-radius: var(--width22);
  }

  li.open .list-index {
    top: var(--width22);
    transform: none;
  }

  .check-icon, .check-black-icon {
    right: var(--width20)
  }

  .disabled-li:before,
  .completed summary:before {
    right: var(--paddingBig)
  }

  header {
    padding: var(--paddingBig) 0;
  }

  details .minus-icon {
    right: var(--width20)
  }

  .indexBubble {
    position: relative;
    left: 0;
    top: 0;
    transform: none;
    height: 22px;
    width: 22px;
    border-radius: 50%;
    margin-bottom: 20px;
  }
}

@media only screen and (max-width: 780px) {
  .consumption-wrap {
    max-width: var(--width198);
  }
  
  textarea {
    max-width: var(--width164);
  }

  .footer-data {
    flex-direction: column;
  }

  .footer-Conditions {
    margin-left: 0;
    align-self: flex-start;
  }

  .footer-contactDetails {
    align-self: flex-start;
  }
}

@media only screen and (max-width: 640px) {
  summary p, .content p {
    flex-direction: column;
    margin-bottom: var(--width10);
  }

  summary p span, .content p span {
    line-height: 1.4;
  }

  .summary-wrap {
    padding-bottom: var(--width9);
  }

  header {
    padding: var(--width32) 0;
  }

  li .list-index {
    top: var(--width22);
    transform: none;
  }

  form {
    padding-top: var(--width9);
  }

  .form-group label {
    width: 100%;
    margin-bottom: var(--width10);
  }

  .content div.use-label {
    max-width: var(--width120);
    min-width: auto;
    margin-top: var(--width10);
  }
  
  .consumption-wrap {
    max-width: 100%;
    margin-right: 0;
  }
  
  textarea {
    max-width: 100%;
  }

  .validation-errors,
  .content p.v-fifty-limit {
    margin-left: 0;
  }

  .shimmer {
    padding: 20px;
  }
}

@media only screen and (max-width: 480px) {
  button.add-consumption-btn {
    width: 100%;
    margin-right: 0;
  }

  .change-consumption-btn {
    margin-top: var(--width10);
  }

  header {
    flex-direction: column;
  }

  header p {
    margin-left: 0;
    margin-top: var(--width10);
    font-size: var(--textFontSize);
  }
}