.container { position: relative; display: flex; flex-direction: column; align-items: center; } .email-substrate { display: grid; grid-template-columns: 1fr 41px !important; align-content: center; position: absolute; max-width: 100%; top: -18px; right: -12px; padding: 0px !important; padding-left: 16px !important; border-radius: 20px !important; height: 41px !important; background: transparent !important; outline: 2px solid #81A9F5 !important; &>p { color: #000000 !important; font-size: 14px !important; } &>div { height: 45px !important; width: 45px !important; background-color: #81A9F5 !important; } } .title { font-size: 28px; line-height: 125%; margin-top: 44px; color: #2c2c2c; font-weight: 500; } .prices-container { justify-content: center; gap: 15px; width: fit-content; margin: 0 auto; } .price-item { border: solid #2c2c2c 1px; border-radius: 8px; width: 70px; height: 65px; font-size: 20px; font-weight: 500; &:last-child::after { content: ""; position: absolute; width: 16px; height: 20px; // background-color: #224e90; background-image: url("/v1/palmistry/trial-choice/arrow.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; top: -30px; left: 50%; transform: translateX(-50%); } &.price-item-active { border: solid #224e90 3px !important; background-color: transparent; color: #224e90; } } .price-container { position: relative; width: 100%; margin-top: 16px; display: flex; flex-direction: column; gap: 32px; } .auxiliary-text { font-size: 15px; line-height: 125%; font-weight: 600; color: #0244a5; width: 100%; text-align: center; } .cursor { position: absolute; width: 2px; height: 20px; background-color: #224e90; top: 71px; right: 34px; } .loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .button { margin-top: 20px; transition: background 0.2s ease, color 0.2s ease; // position: sticky; // bottom: calc(0dvh + 16px); &:disabled { border: solid #224e90 1px; background: none; color: #120d0d; opacity: 1; } } .text { width: calc(100% + 24px); white-space: pre-wrap; margin-top: 40px; margin-bottom: 0px; font-size: 15px; font-weight: 500; line-height: 125%; color: #2C2C2C; text-align: center; } .list { width: calc(100% + 24px); margin-top: 16px; margin-bottom: 0px; display: flex; flex-direction: column; gap: 16px; li { font-size: 15px; font-weight: 500; line-height: 125%; color: #2C2C2C; list-style-type: disc; margin-left: 24px; &::marker { font-size: 10px; } } }