mpETH.css

.LidoContainer{
  box-sizing: border-box;
  margin: 0px auto;
  min-width: 320px;
  width: 100%;
  padding: 0px 32px;
  max-width: 560px;
  position: relative;
  margin-top: 8px;
  margin-bottom: 8px;
}

a {
  color: transparent;
  background: linear-gradient(to right, #307c05, #a2e645, #34ac3c);
  background-clip: text;
  -webkit-background-clip: text;
}

.Header{
  font-weight: 800;
  font-size: 26px;
  margin-bottom: 0.2em;
  line-height: 1.2em;
  text-align: center;
}

.SubHeader{
  font-weight: 500;
  color: #FF79D8;
  margin-bottom: 16px;
  font-size: 12px;
  line-height: 1.5em;
  text-align: center;
};

.LidoForm{
  background: linear-gradient(to right, #a2e645, #dae77a, #bbd97a, #c0e14c, #a2e645, rgb(206, 255, 26));
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  padding-bottom: 52px;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.6em;
  border-radius: 20px;
  padding-inline: 32px;
  padding-block: 20px;
  box-shadow: none;
  color: black;
}

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

.LidoFormTopContainerLeft{
  margin-right: 18px;
  flex-basis: 50%;
  -webkit-box-flex: 1;
  flex-grow: 1;
  font-size: 12px;
  line-height: 1.6em;
}

.LidoFormTopContainerLeftContent1{
  display: flex;
  flex-direction: row;
  -webkit-box-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  align-items: center;
}

.LidoFormTopContainerLeftContent1Container{
  display: flex;
  -webkit-box-align: center;
  align-items: center;
}

.LidoFormTopContainerLeftContent1Circle{
  background-color: #53BA95;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: 8px;
}

.LidoFormTopContainerLeftContent2{
  margin-top: 2px;
  font-size: 18px;
  line-height: 1.4em;
  font-weight: 800;
  white-space: nowrap;
  display: block;
}

.LidoFormTopContainerRight{
  align-self: stretch;
  display: flex;
  flex: 1 1 50%;
  -webkit-box-flex: 1;
  overflow: hidden;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: end;
  justify-content: flex-end;
  margin-left: auto;
}

.LidoFormTopContainerRightContent1{
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  margin: 0px;
  border-radius: 1000px;
  padding: 4px;
  display: inline-flex;
  -webkit-box-align: center;
  align-items: center;
  background: rgba(0, 0, 0, .2);
  color: #fff;    
}

.LidoFormTopContainerRightContent1Text{
  padding: 0px 6px;
  font-weight: 400;
}

.LidoSplitter{
  box-sizing: border-box;
  list-style: none;
  opacity: 0.1;
  padding: 0px;
  flex-shrink: 0;
  -webkit-box-flex: 0;
  flex-grow: 0;
  border-top: 1px solid #6c721c;
  width: 100%;
  height: 0px;
  margin: 0px;
}

.LidoFormBottomContainer{
  margin-bottom: 0px;
  display: flex;
  margin: 20px 0px;
}

.LidoAprContainer{
  margin-right: 0px;
  flex-basis: 50%;
  -webkit-box-flex: 1;
  flex-grow: 1;
  font-size: 12px;
  line-height: 1.6em;
}

.LidoAprTitle{
  display: flex;
  flex-direction: row;
  -webkit-box-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  align-items: center;
}

.LidoAprValue{
  margin-top: 2px;
  font-size: 16px;
  line-height: 1.4em;
  font-weight: 800;
  white-space: nowrap;
  color: rgb(97, 183, 95);
  font-size: 16px;
  line-height: 1.4em;
  font-weight: 800;
  white-space: nowrap;
}

.LidoStakeForm{
  font-weight: 400;
  font-size: 12px;
  line-height: 1.6em;
  border-radius: 0px 0px 20px 20px;
  margin: 0px;
  padding: 32px;
  box-shadow: none;
  background: #eee;
  color: #7a8aa0;
  margin-top: -30px;
  position: relative;

  &:before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 0px 20px 20px 20px;
      top: calc(var(--lidoFormHeight) * -1);
      height: calc(100% + var(--lidoFormHeight));
      box-shadow: 6px 6px 6px rgba(0, 0, 0, .2);
      pointer-events: none;
  }
}

.LidoStakeFormInputContainer{
  z-index: 2;
  position: relative;
  display: inline-flex;
  border-width: 1px;
  border-style: solid;
  border-image: initial;
  border-radius: 15px;
  -webkit-box-align: stretch;
  align-items: stretch;
  box-sizing: border-box;
  padding: 0px 15px;
  padding-left: 0;
  cursor: text;
  transition: border-color 100ms ease 0s;
  width: 100%;
  background: #fff;
  border-color: rgba(0,10,61,.12);
  color: #273852;
}

.LidoStakeFormInputContainerSpan1{
  -webkit-box-flex: 0;
  flex-grow: 0;
  flex-shrink: 0;
  cursor: inherit;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  padding-right: 16px;
}

.customSelect {
  position: relative;
  flex: 1 1 45px;
  margin: 1px;
  min-width: 80px;
  max-width: 107px;

& svg {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  translate: 0 -1px;
  right: 10px;
  width: 8px;
  pointer-events: none;
}

& .selectCSS{
  font-weight: 400;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  border: none;
  -webkit-box-flex: 1;
  flex-grow: 1;
  position: relative;
  padding: 17px 0px;
  color: #273852;
  width: 100%;
  height: 100%;
  appearance: none;
  padding: 0;
  padding-inline: 15px;
  background: rgba(0,10,61,.12);
  border-radius: 15px;
  cursor: pointer;
  outline-color: rgba(0,10,61,.3);
}
}

.LidoStakeFormInputContainerSpan2{
  font-weight: 400;
  font-size: 14px;
  display: flex;
  -webkit-box-flex: 1;
  flex-grow: 1;
  position: relative;
  padding: 17px 0px;
}

.LidoStakeFormInputContainerSpan2Input{
  width: 100%;
  font-family: inherit;
  font-weight: 400;
  font-size: 1em;
  line-height: 1.43em;
  padding: 0px;
  border-radius: 0px;
  background: transparent;
  box-shadow: none;
  border: none;
  outline: none;
  position: relative;
  top: 0px;
  color: #273852;
}

.LidoStakeFormInputContainerSpan3{
  -webkit-box-flex: 0;
  flex-grow: 0;
  flex-shrink: 0;
  cursor: inherit;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  padding-left: 16px;
}

.LidoStakeFormInputContainerSpan3Content{
  cursor: pointer;
  letter-spacing: 0.4px;
  box-sizing: border-box;
  margin: 0px;
  border: none;
  outline: none;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  background: transparent;
  font-family: inherit;
  font-weight: 700;
  width: auto;
  line-height: 1em;
  font-size: 10px;
  border-radius: 30px;
  padding: 11px 16px;
  min-width: 50px;
  color: #174473;
  &::before {
    display: block;
    background-color: #174473;
    transition: opacity 100ms ease 0s;
    opacity: 0.1;
    content: "";
    position: absolute;
    inset: 0px;
    pointer-events: none;
    border-radius: inherit;
    transition: ease 100ms;
  }    
  &:active:before {
    opacity: .4;
  }
}

.LidoStakeFormInputContainerSpan3Max{
  position: relative;
  pointer-events: none;
  visibility: visible;
}

.LidoStakeFormSubmitContainer{
  cursor: pointer;
  box-sizing: border-box;
  margin: 0px;
  margin-top: 15px;
  border: none;
  outline: none;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  background-image: initial;
  background-position: initial;
  background-size: initial;
  background-repeat: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  font-family: inherit;
  font-weight: 700;
  width: 100%;
  line-height: 1em;
  font-size: 16px;
  border-radius: 30px;
  padding: 21px 44px;
  min-width: 120px;
  color: #fff;
  background-color: #174473;
  box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, .4);
  transition: 100ms ease;
  
  &:active {
    box-shadow: none;
    background-color: hsl(211, 67%, 20%);
  }
}

.LidoFooterContainer{
  font-weight: 400;
  font-size: 12px;
  line-height: 1.6em;
}

.LidoFooterRaw{
  margin-top: 0px;
  display: flex;
  margin: 16px 0px;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.6em;
}

.LidoFooterRawLeft{
  color: #7a8aa0;
  -webkit-box-flex: 1;
  flex-grow: 1;
}

.LidoFooterRawRight{
  color: #273852;
  text-align: right;
  margin-left: 32px;
  -webkit-box-flex: 1;
  flex-grow: 1;
}