.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; } .Header{ font-weight: 800; font-size: 26px; margin-bottom: 0.2em; line-height: 1.2em; text-align: center; } .SubHeader{ font-weight: 500; color: #7a8aa0; margin-bottom: 16px; font-size: 12px; line-height: 1.5em; text-align: center; }; .LidoForm{ background: linear-gradient(65.21deg, rgb(55, 57, 74) 19.1%, rgb(62, 75, 79) 100%); margin-bottom: -20px; 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; margin: 0px; padding: 32px; box-shadow: none; color: #fff; } .LidoFormTopContainer{ margin-top: 0px; display: flex; margin: 20px 0px; } .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 currentcolor; 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: 20px; margin: 0px; padding: 32px; box-shadow: none; background: #eee; color: #7a8aa0; margin-top: -30px; } .LidoStakeFormInputContainer{ margin-bottom: 16px; z-index: 2; position: relative; display: inline-flex; border-width: 1px; border-style: solid; border-image: initial; border-radius: 10px; -webkit-box-align: stretch; align-items: stretch; box-sizing: border-box; padding: 0px 15px; 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; } .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: 6px; padding: 11px 16px; min-width: 50px; color: #00a3ff; &::before { display: block; background-color: #00a3ff; transition: opacity 100ms ease 0s; opacity: 0.1; content: ""; position: absolute; inset: 0px; pointer-events: none; border-radius: inherit; } } .LidoStakeFormInputContainerSpan3Max{ position: relative; pointer-events: none; visibility: visible; } .LidoStakeFormSubmitContainer{ cursor: pointer; box-sizing: border-box; margin: 0px; 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: 14px; border-radius: 10px; padding: 21px 44px; min-width: 120px; color: #fff; background-color: #00a3ff; transition: background-color 100ms ease 0s; &:hover { background-color: ##009bf2; } } .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; }