@font-face { font-family: "sofia-pro"; src: url("https://use.typekit.net/af/30420e/00000000000000003b9b1a9e/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"), url("https://use.typekit.net/af/30420e/00000000000000003b9b1a9e/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"), url("https://use.typekit.net/af/30420e/00000000000000003b9b1a9e/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype"); font-display: swap; font-style: normal; font-weight: 700; } @font-face { font-family: "sofia-pro"; src: url("https://use.typekit.net/af/5855b2/00000000000000003b9b1a98/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"), url("https://use.typekit.net/af/5855b2/00000000000000003b9b1a98/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"), url("https://use.typekit.net/af/5855b2/00000000000000003b9b1a98/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype"); font-display: swap; font-style: normal; font-weight: 400; } /* .tk-sofia-pro { font-family: "sofia-pro", sans-serif; } */ html { width: 100%; height: 100%; margin: 0; padding: 0; font-size: 15px; line-height: 1.3; } @media (min-width: 1024px) { html { font-size: 16px; } } body { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; flex-grow: 1; width: 100%; height: 100%; margin: 0; box-sizing: border-box; font-family: sofia-pro, sans-serif; color: #303030; background-color: #edeff0; -webkit-overflow-scrolling: touch; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body h2 { text-align: center; } body h2 + p { margin: -10px 20px 10px 20px; text-align: center; } body p + p { margin-top: -5px; } body label + input, body label + select { margin-top: 5px; } *, *:before, *:after { box-sizing: inherit; } ::-webkit-scrollbar { width: 8px; /* Width of the vertical scrollbar */ height: 8px; } ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); /* Color and transparency of the scrollbar thumb */ border-radius: 10px; } ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border: none; } h1, h2, h3, h4 { margin: 0; } input, textarea, select { -moz-appearance: none; -webkit-appearance: none; padding: 0.4em 0.5em 0.6em 0.5em; width: 100%; max-width: 100%; font-size: 1.125rem; line-height: 1.3; font-family: sofia-pro, sans-serif; border: 1px solid #b7b7b7; border-radius: 4px; background-color: #F3F5F6; } select { background-image: url("img/icon_chevron_down-light-gray.svg"); background-repeat: no-repeat; background-position: calc(100% - 5px) 50%; } input::placeholder, textarea::placeholder { color: #b7b7b7; } input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; margin: 2px 10px 0 0; width: 15px; height: 15px; opacity: 0.5; background-image: url("img/icon_cross-white.svg"); background-size: cover; } input[type=checkbox] { width: auto; } label { color: #767676; } label > input, label > select { margin-top: 5px; margin-bottom: 5px; } label + input, label + select { margin-top: 5px; } input + label { margin-top: 5px; } a { cursor: pointer; color: #6027DA; text-decoration: none; } a.linkless { color: #303030; text-decoration: none; } .nohref { pointer-events: none; } .btn, button { position: relative; display: inline-flex; padding: 0.65em 1.2em 0.9em 1.2em; display: flex; flex-direction: row; justify-content: center; align-items: center; text-align: center; background: #6027DA; font-size: 1.125rem; line-height: 1; font-weight: 700; font-family: sofia-pro, sans-serif; color: white; border: none; border-radius: 4px; outline: none; text-decoration: none; cursor: pointer; } button:disabled, .btn:disabled { background: #b7b7b7; border-color: #b7b7b7; } button img, .btn img { margin-bottom: -2px; } .btn--secondary { font-weight: 400; background: none; color: #6027DA; border: 1px solid #6027DA; } .btn--secondary:disabled { border: 1px solid #767676; background: none; color: #767676; } .btn--secondary:hover { background-color: #edebff; } .btn--secondary-white { font-weight: 400; border: 1px solid white; background: none; color: white; } .btn--link { font-weight: 400; padding: 0; border: none; background: none; color: #6027DA; } button.btn--link:hover, .btn.btn--link:hover, button.btn--icon:hover, .btn.btn--icon:hover, button.button-white:hover, .btn.button-white:hover, button.btn--secondary-white, .btn.btn--secondary-white, button.button--close:hover { background-color: transparent; } .btn--icon { font-weight: 400; padding: 10px; background: none; border: none; } .button--close { position: absolute; top: 5px; right: 5px; } .button--white { position: absolute; bottom: 5px; right: 5px; padding: 2px 10px 5px 10px; font-size: 13px; color: #6027DA; background-color: white; border: none; border-radius: 15px; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15), 0px 20px 36px rgba(0, 0, 0, 0.1); } .btn--h35px { min-height: 35px; height: 35px; padding: 5px 12px 8px 12px; font-size: 15px; font-weight: 400; } .btn--circle { padding: 0.65em; border-radius: 100px; } .btn--circle-40px { width: 40px; min-height: 40px; height: 40px; padding: 10px; border-radius: 100px; } .button__fixed-bottom { z-index: 10; position: fixed; bottom: 10px; right: 10px; padding: 0.8em 1.5em 1em 1.5em; border-radius: 50px; font-weight: 700; } .button__fixed-bottom img { margin-bottom: -2px; margin-right: 5px; height: 15px; } .button--delete { padding: 5px 5px 7px 5px; font-size: 13px; color: white; background: #da7474; border: none; } .button--delete img { margin-bottom: -4px; margin-right: 5px; } .checkbox { position: relative; flex: 0 0 auto; width: 24px; height: 24px; background-color: white; border-radius: 4px; border: 1px solid #767676; display: flex; flex-direction: row; justify-content: center; align-items: center; } .checkbox--selected .checkbox:after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 14px; height: 14px; background-color: #00c473; border-radius: 2px; } .toggle { position: relative; height: 36px; width: 65px; background-color: #b7b7b7; border-radius: 50px; } .toggle:after { content: " "; position: absolute; top: 50%; transform: translateY(-50%); left: 2px; width: 32px; height: 32px; border-radius: 50px; background-color: #fff; } .toggle.toggle--active { background-color: #00c473; } .toggle.toggle--active:after { left: inherit; right: 2px; } .radio-button { margin-right: 10px; width: 24px; height: 24px; background-color: white; border: 1px solid #b7b7b7; border-radius: 50px; } .opt--selected .radio-button { position: relative; border-color: #538763; } .opt--selected .radio-button:after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 14px; height: 14px; background-color: #538763; border-radius: 50px; } .h3 { font-size: 20px; font-weight: bold; } table { width: 100%; border-collapse: collapse; } table tr, table th { padding: 2px 0; } table th { font-weight: 400; } hr { display: block; width: 100%; margin: 0.5rem 0; color: #dbdbdb; border-style: solid; border-width: 0; border-top-width: 1px; } hr.hr-10px-dark-white { color: #F3F5F6; border-top-width: 10px; } .box-content { box-sizing: content-box; } .required > label { color: #da7474; } .required input, .required > textarea { border: 1px solid #da7474; } section, .section { flex: 0 0 auto; width: 100%; max-width: 1100px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } .shadow { box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15); } .shadow-big { box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2); } .relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } .sticky { position: sticky; } .top--45px { top: -45px; } .top--5px { top: -5px; } .top-0px { top: 0px; } .top-5px { top: 5px; } .top-10px { top: 10px; } .top-170px { top: 170px; } .top-210px { top: 210px; } .top-center { top: 50%; transform: translateY(-50%); } .bottom--20px { bottom: -20px; } .bottom-0px { bottom: 0px; } .bottom-5px { bottom: 5px; } .bottom-10px { bottom: 10px; } .bottom-20px { bottom: 20px; } .bottom-80px { bottom: 80px; } .bottom-100px { bottom: 100px; } .bottom-05rem { bottom: 0.5rem; } .bottom-80px-safe { bottom: calc(env(safe-area-inset-bottom) + 80px); } .left--5pxpx { left: -5px; } .left-0 { left: 0px; } .left-5px { left: 5px; } .left-10px { left: 10px; } .left-50px { left: 50px; } .left-full { left: 100%; } .left-full-120px { left: calc(100% - 120px); } .left-center, .left-c { left: 50%; transform: translateX(-50%); } .right-0px { right: 0px; } .right-5px { right: 5px; } .right-8px { right: 8px; } .right-10px { right: 10px; } .right-05rem { right: 0.5rem; } .absolute-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .absolute-x-center { position: absolute; left: 50%; transform: translateX(-50%); } .absolute-y-center { position: absolute; top: 50%; transform: translateY(-50%); } .z-2 { z-index: 2; } .z-20 { z-index: 20; } .z-200 { z-index: 200; } .z-210 { z-index: 210; } .z-220 { z-index: 220; } .m-0 { margin: 0; } .my-0 { margin-top: 0; margin-bottom: 0; } .mx-0 { margin-right: 0; margin-left: 0; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .ml-0 { margin-left: 0; } .mr-0 { margin-right: 0; } .p-0 { padding: 0; } .py-0 { padding-top: 0; padding-bottom: 0; } .px-0 { padding-right: 0; padding-left: 0; } .pt-0 { padding-top: 0; } .pb-0 { padding-bottom: 0; } .pl-0 { padding-left: 0; } .pr-0 { padding-right: 0; } .top-0 { top: 0; } .bottom-0 { bottom: 0; } .left-0 { left: 0; } .right-0 { right: 0; } .m-0px { margin: 0px; } .my-0px { margin-top: 0px; margin-bottom: 0px; } .mx-0px { margin-right: 0px; margin-left: 0px; } .mt-0px { margin-top: 0px; } .mb-0px { margin-bottom: 0px; } .ml-0px { margin-left: 0px; } .mr-0px { margin-right: 0px; } .p-0px { padding: 0px; } .py-0px { padding-top: 0px; padding-bottom: 0px; } .px-0px { padding-right: 0px; padding-left: 0px; } .pt-0px { padding-top: 0px; } .pb-0px { padding-bottom: 0px; } .pl-0px { padding-left: 0px; } .pr-0px { padding-right: 0px; } .top-0px { top: 0px; } .bottom-0px { bottom: 0px; } .left-0px { left: 0px; } .right-0px { right: 0px; } .m-2px { margin: 2px; } .my-2px { margin-top: 2px; margin-bottom: 2px; } .mx-2px { margin-right: 2px; margin-left: 2px; } .mt-2px { margin-top: 2px; } .mb-2px { margin-bottom: 2px; } .ml-2px { margin-left: 2px; } .mr-2px { margin-right: 2px; } .p-2px { padding: 2px; } .py-2px { padding-top: 2px; padding-bottom: 2px; } .px-2px { padding-right: 2px; padding-left: 2px; } .pt-2px { padding-top: 2px; } .pb-2px { padding-bottom: 2px; } .pl-2px { padding-left: 2px; } .pr-2px { padding-right: 2px; } .top-2px { top: 2px; } .bottom-2px { bottom: 2px; } .left-2px { left: 2px; } .right-2px { right: 2px; } .m-5px { margin: 5px; } .my-5px { margin-top: 5px; margin-bottom: 5px; } .mx-5px { margin-right: 5px; margin-left: 5px; } .mt-5px { margin-top: 5px; } .mb-5px { margin-bottom: 5px; } .ml-5px { margin-left: 5px; } .mr-5px { margin-right: 5px; } .p-5px { padding: 5px; } .py-5px { padding-top: 5px; padding-bottom: 5px; } .px-5px { padding-right: 5px; padding-left: 5px; } .pt-5px { padding-top: 5px; } .pb-5px { padding-bottom: 5px; } .pl-5px { padding-left: 5px; } .pr-5px { padding-right: 5px; } .top-5px { top: 5px; } .bottom-5px { bottom: 5px; } .left-5px { left: 5px; } .right-5px { right: 5px; } .m-10px { margin: 10px; } .my-10px { margin-top: 10px; margin-bottom: 10px; } .mx-10px { margin-right: 10px; margin-left: 10px; } .mt-10px { margin-top: 10px; } .mb-10px { margin-bottom: 10px; } .ml-10px { margin-left: 10px; } .mr-10px { margin-right: 10px; } .p-10px { padding: 10px; } .py-10px { padding-top: 10px; padding-bottom: 10px; } .px-10px { padding-right: 10px; padding-left: 10px; } .pt-10px { padding-top: 10px; } .pb-10px { padding-bottom: 10px; } .pl-10px { padding-left: 10px; } .pr-10px { padding-right: 10px; } .top-10px { top: 10px; } .bottom-10px { bottom: 10px; } .left-10px { left: 10px; } .right-10px { right: 10px; } .m-11px { margin: 11px; } .my-11px { margin-top: 11px; margin-bottom: 11px; } .mx-11px { margin-right: 11px; margin-left: 11px; } .mt-11px { margin-top: 11px; } .mb-11px { margin-bottom: 11px; } .ml-11px { margin-left: 11px; } .mr-11px { margin-right: 11px; } .p-11px { padding: 11px; } .py-11px { padding-top: 11px; padding-bottom: 11px; } .px-11px { padding-right: 11px; padding-left: 11px; } .pt-11px { padding-top: 11px; } .pb-11px { padding-bottom: 11px; } .pl-11px { padding-left: 11px; } .pr-11px { padding-right: 11px; } .top-11px { top: 11px; } .bottom-11px { bottom: 11px; } .left-11px { left: 11px; } .right-11px { right: 11px; } .m-13px { margin: 13px; } .my-13px { margin-top: 13px; margin-bottom: 13px; } .mx-13px { margin-right: 13px; margin-left: 13px; } .mt-13px { margin-top: 13px; } .mb-13px { margin-bottom: 13px; } .ml-13px { margin-left: 13px; } .mr-13px { margin-right: 13px; } .p-13px { padding: 13px; } .py-13px { padding-top: 13px; padding-bottom: 13px; } .px-13px { padding-right: 13px; padding-left: 13px; } .pt-13px { padding-top: 13px; } .pb-13px { padding-bottom: 13px; } .pl-13px { padding-left: 13px; } .pr-13px { padding-right: 13px; } .top-13px { top: 13px; } .bottom-13px { bottom: 13px; } .left-13px { left: 13px; } .right-13px { right: 13px; } .m-15px { margin: 15px; } .my-15px { margin-top: 15px; margin-bottom: 15px; } .mx-15px { margin-right: 15px; margin-left: 15px; } .mt-15px { margin-top: 15px; } .mb-15px { margin-bottom: 15px; } .ml-15px { margin-left: 15px; } .mr-15px { margin-right: 15px; } .p-15px { padding: 15px; } .py-15px { padding-top: 15px; padding-bottom: 15px; } .px-15px { padding-right: 15px; padding-left: 15px; } .pt-15px { padding-top: 15px; } .pb-15px { padding-bottom: 15px; } .pl-15px { padding-left: 15px; } .pr-15px { padding-right: 15px; } .top-15px { top: 15px; } .bottom-15px { bottom: 15px; } .left-15px { left: 15px; } .right-15px { right: 15px; } .m-20px { margin: 20px; } .my-20px { margin-top: 20px; margin-bottom: 20px; } .mx-20px { margin-right: 20px; margin-left: 20px; } .mt-20px { margin-top: 20px; } .mb-20px { margin-bottom: 20px; } .ml-20px { margin-left: 20px; } .mr-20px { margin-right: 20px; } .p-20px { padding: 20px; } .py-20px { padding-top: 20px; padding-bottom: 20px; } .px-20px { padding-right: 20px; padding-left: 20px; } .pt-20px { padding-top: 20px; } .pb-20px { padding-bottom: 20px; } .pl-20px { padding-left: 20px; } .pr-20px { padding-right: 20px; } .top-20px { top: 20px; } .bottom-20px { bottom: 20px; } .left-20px { left: 20px; } .right-20px { right: 20px; } .m-25px { margin: 25px; } .my-25px { margin-top: 25px; margin-bottom: 25px; } .mx-25px { margin-right: 25px; margin-left: 25px; } .mt-25px { margin-top: 25px; } .mb-25px { margin-bottom: 25px; } .ml-25px { margin-left: 25px; } .mr-25px { margin-right: 25px; } .p-25px { padding: 25px; } .py-25px { padding-top: 25px; padding-bottom: 25px; } .px-25px { padding-right: 25px; padding-left: 25px; } .pt-25px { padding-top: 25px; } .pb-25px { padding-bottom: 25px; } .pl-25px { padding-left: 25px; } .pr-25px { padding-right: 25px; } .top-25px { top: 25px; } .bottom-25px { bottom: 25px; } .left-25px { left: 25px; } .right-25px { right: 25px; } .m-30px { margin: 30px; } .my-30px { margin-top: 30px; margin-bottom: 30px; } .mx-30px { margin-right: 30px; margin-left: 30px; } .mt-30px { margin-top: 30px; } .mb-30px { margin-bottom: 30px; } .ml-30px { margin-left: 30px; } .mr-30px { margin-right: 30px; } .p-30px { padding: 30px; } .py-30px { padding-top: 30px; padding-bottom: 30px; } .px-30px { padding-right: 30px; padding-left: 30px; } .pt-30px { padding-top: 30px; } .pb-30px { padding-bottom: 30px; } .pl-30px { padding-left: 30px; } .pr-30px { padding-right: 30px; } .top-30px { top: 30px; } .bottom-30px { bottom: 30px; } .left-30px { left: 30px; } .right-30px { right: 30px; } .m-40px { margin: 40px; } .my-40px { margin-top: 40px; margin-bottom: 40px; } .mx-40px { margin-right: 40px; margin-left: 40px; } .mt-40px { margin-top: 40px; } .mb-40px { margin-bottom: 40px; } .ml-40px { margin-left: 40px; } .mr-40px { margin-right: 40px; } .p-40px { padding: 40px; } .py-40px { padding-top: 40px; padding-bottom: 40px; } .px-40px { padding-right: 40px; padding-left: 40px; } .pt-40px { padding-top: 40px; } .pb-40px { padding-bottom: 40px; } .pl-40px { padding-left: 40px; } .pr-40px { padding-right: 40px; } .top-40px { top: 40px; } .bottom-40px { bottom: 40px; } .left-40px { left: 40px; } .right-40px { right: 40px; } .m-50px { margin: 50px; } .my-50px { margin-top: 50px; margin-bottom: 50px; } .mx-50px { margin-right: 50px; margin-left: 50px; } .mt-50px { margin-top: 50px; } .mb-50px { margin-bottom: 50px; } .ml-50px { margin-left: 50px; } .mr-50px { margin-right: 50px; } .p-50px { padding: 50px; } .py-50px { padding-top: 50px; padding-bottom: 50px; } .px-50px { padding-right: 50px; padding-left: 50px; } .pt-50px { padding-top: 50px; } .pb-50px { padding-bottom: 50px; } .pl-50px { padding-left: 50px; } .pr-50px { padding-right: 50px; } .top-50px { top: 50px; } .bottom-50px { bottom: 50px; } .left-50px { left: 50px; } .right-50px { right: 50px; } .m-65px { margin: 65px; } .my-65px { margin-top: 65px; margin-bottom: 65px; } .mx-65px { margin-right: 65px; margin-left: 65px; } .mt-65px { margin-top: 65px; } .mb-65px { margin-bottom: 65px; } .ml-65px { margin-left: 65px; } .mr-65px { margin-right: 65px; } .p-65px { padding: 65px; } .py-65px { padding-top: 65px; padding-bottom: 65px; } .px-65px { padding-right: 65px; padding-left: 65px; } .pt-65px { padding-top: 65px; } .pb-65px { padding-bottom: 65px; } .pl-65px { padding-left: 65px; } .pr-65px { padding-right: 65px; } .top-65px { top: 65px; } .bottom-65px { bottom: 65px; } .left-65px { left: 65px; } .right-65px { right: 65px; } .m-80px { margin: 80px; } .my-80px { margin-top: 80px; margin-bottom: 80px; } .mx-80px { margin-right: 80px; margin-left: 80px; } .mt-80px { margin-top: 80px; } .mb-80px { margin-bottom: 80px; } .ml-80px { margin-left: 80px; } .mr-80px { margin-right: 80px; } .p-80px { padding: 80px; } .py-80px { padding-top: 80px; padding-bottom: 80px; } .px-80px { padding-right: 80px; padding-left: 80px; } .pt-80px { padding-top: 80px; } .pb-80px { padding-bottom: 80px; } .pl-80px { padding-left: 80px; } .pr-80px { padding-right: 80px; } .top-80px { top: 80px; } .bottom-80px { bottom: 80px; } .left-80px { left: 80px; } .right-80px { right: 80px; } .m-100px { margin: 100px; } .my-100px { margin-top: 100px; margin-bottom: 100px; } .mx-100px { margin-right: 100px; margin-left: 100px; } .mt-100px { margin-top: 100px; } .mb-100px { margin-bottom: 100px; } .ml-100px { margin-left: 100px; } .mr-100px { margin-right: 100px; } .p-100px { padding: 100px; } .py-100px { padding-top: 100px; padding-bottom: 100px; } .px-100px { padding-right: 100px; padding-left: 100px; } .pt-100px { padding-top: 100px; } .pb-100px { padding-bottom: 100px; } .pl-100px { padding-left: 100px; } .pr-100px { padding-right: 100px; } .top-100px { top: 100px; } .bottom-100px { bottom: 100px; } .left-100px { left: 100px; } .right-100px { right: 100px; } .m-150px { margin: 150px; } .my-150px { margin-top: 150px; margin-bottom: 150px; } .mx-150px { margin-right: 150px; margin-left: 150px; } .mt-150px { margin-top: 150px; } .mb-150px { margin-bottom: 150px; } .ml-150px { margin-left: 150px; } .mr-150px { margin-right: 150px; } .p-150px { padding: 150px; } .py-150px { padding-top: 150px; padding-bottom: 150px; } .px-150px { padding-right: 150px; padding-left: 150px; } .pt-150px { padding-top: 150px; } .pb-150px { padding-bottom: 150px; } .pl-150px { padding-left: 150px; } .pr-150px { padding-right: 150px; } .top-150px { top: 150px; } .bottom-150px { bottom: 150px; } .left-150px { left: 150px; } .right-150px { right: 150px; } .m--2px { margin: -2px; } .my--2px { margin-top: -2px; margin-bottom: -2px; } .mx--2px { margin-right: -2px; margin-left: -2px; } .mt--2px { margin-top: -2px; } .mb--2px { margin-bottom: -2px; } .ml--2px { margin-left: -2px; } .mr--2px { margin-right: -2px; } .p--2px { padding: -2px; } .py--2px { padding-top: -2px; padding-bottom: -2px; } .px--2px { padding-right: -2px; padding-left: -2px; } .pt--2px { padding-top: -2px; } .pb--2px { padding-bottom: -2px; } .pl--2px { padding-left: -2px; } .pr--2px { padding-right: -2px; } .top--2px { top: -2px; } .bottom--2px { bottom: -2px; } .left--2px { left: -2px; } .right--2px { right: -2px; } .m--5px { margin: -5px; } .my--5px { margin-top: -5px; margin-bottom: -5px; } .mx--5px { margin-right: -5px; margin-left: -5px; } .mt--5px { margin-top: -5px; } .mb--5px { margin-bottom: -5px; } .ml--5px { margin-left: -5px; } .mr--5px { margin-right: -5px; } .p--5px { padding: -5px; } .py--5px { padding-top: -5px; padding-bottom: -5px; } .px--5px { padding-right: -5px; padding-left: -5px; } .pt--5px { padding-top: -5px; } .pb--5px { padding-bottom: -5px; } .pl--5px { padding-left: -5px; } .pr--5px { padding-right: -5px; } .top--5px { top: -5px; } .bottom--5px { bottom: -5px; } .left--5px { left: -5px; } .right--5px { right: -5px; } .m--10px { margin: -10px; } .my--10px { margin-top: -10px; margin-bottom: -10px; } .mx--10px { margin-right: -10px; margin-left: -10px; } .mt--10px { margin-top: -10px; } .mb--10px { margin-bottom: -10px; } .ml--10px { margin-left: -10px; } .mr--10px { margin-right: -10px; } .p--10px { padding: -10px; } .py--10px { padding-top: -10px; padding-bottom: -10px; } .px--10px { padding-right: -10px; padding-left: -10px; } .pt--10px { padding-top: -10px; } .pb--10px { padding-bottom: -10px; } .pl--10px { padding-left: -10px; } .pr--10px { padding-right: -10px; } .top--10px { top: -10px; } .bottom--10px { bottom: -10px; } .left--10px { left: -10px; } .right--10px { right: -10px; } .m--15px { margin: -15px; } .my--15px { margin-top: -15px; margin-bottom: -15px; } .mx--15px { margin-right: -15px; margin-left: -15px; } .mt--15px { margin-top: -15px; } .mb--15px { margin-bottom: -15px; } .ml--15px { margin-left: -15px; } .mr--15px { margin-right: -15px; } .p--15px { padding: -15px; } .py--15px { padding-top: -15px; padding-bottom: -15px; } .px--15px { padding-right: -15px; padding-left: -15px; } .pt--15px { padding-top: -15px; } .pb--15px { padding-bottom: -15px; } .pl--15px { padding-left: -15px; } .pr--15px { padding-right: -15px; } .top--15px { top: -15px; } .bottom--15px { bottom: -15px; } .left--15px { left: -15px; } .right--15px { right: -15px; } .m--20px { margin: -20px; } .my--20px { margin-top: -20px; margin-bottom: -20px; } .mx--20px { margin-right: -20px; margin-left: -20px; } .mt--20px { margin-top: -20px; } .mb--20px { margin-bottom: -20px; } .ml--20px { margin-left: -20px; } .mr--20px { margin-right: -20px; } .p--20px { padding: -20px; } .py--20px { padding-top: -20px; padding-bottom: -20px; } .px--20px { padding-right: -20px; padding-left: -20px; } .pt--20px { padding-top: -20px; } .pb--20px { padding-bottom: -20px; } .pl--20px { padding-left: -20px; } .pr--20px { padding-right: -20px; } .top--20px { top: -20px; } .bottom--20px { bottom: -20px; } .left--20px { left: -20px; } .right--20px { right: -20px; } .m--25px { margin: -25px; } .my--25px { margin-top: -25px; margin-bottom: -25px; } .mx--25px { margin-right: -25px; margin-left: -25px; } .mt--25px { margin-top: -25px; } .mb--25px { margin-bottom: -25px; } .ml--25px { margin-left: -25px; } .mr--25px { margin-right: -25px; } .p--25px { padding: -25px; } .py--25px { padding-top: -25px; padding-bottom: -25px; } .px--25px { padding-right: -25px; padding-left: -25px; } .pt--25px { padding-top: -25px; } .pb--25px { padding-bottom: -25px; } .pl--25px { padding-left: -25px; } .pr--25px { padding-right: -25px; } .top--25px { top: -25px; } .bottom--25px { bottom: -25px; } .left--25px { left: -25px; } .right--25px { right: -25px; } .m--40px { margin: -40px; } .my--40px { margin-top: -40px; margin-bottom: -40px; } .mx--40px { margin-right: -40px; margin-left: -40px; } .mt--40px { margin-top: -40px; } .mb--40px { margin-bottom: -40px; } .ml--40px { margin-left: -40px; } .mr--40px { margin-right: -40px; } .p--40px { padding: -40px; } .py--40px { padding-top: -40px; padding-bottom: -40px; } .px--40px { padding-right: -40px; padding-left: -40px; } .pt--40px { padding-top: -40px; } .pb--40px { padding-bottom: -40px; } .pl--40px { padding-left: -40px; } .pr--40px { padding-right: -40px; } .top--40px { top: -40px; } .bottom--40px { bottom: -40px; } .left--40px { left: -40px; } .right--40px { right: -40px; } .m--50px { margin: -50px; } .my--50px { margin-top: -50px; margin-bottom: -50px; } .mx--50px { margin-right: -50px; margin-left: -50px; } .mt--50px { margin-top: -50px; } .mb--50px { margin-bottom: -50px; } .ml--50px { margin-left: -50px; } .mr--50px { margin-right: -50px; } .p--50px { padding: -50px; } .py--50px { padding-top: -50px; padding-bottom: -50px; } .px--50px { padding-right: -50px; padding-left: -50px; } .pt--50px { padding-top: -50px; } .pb--50px { padding-bottom: -50px; } .pl--50px { padding-left: -50px; } .pr--50px { padding-right: -50px; } .top--50px { top: -50px; } .bottom--50px { bottom: -50px; } .left--50px { left: -50px; } .right--50px { right: -50px; } .mb-safe { margin-bottom: env(safe-area-inset-bottom); } .p-1rem { padding: 1rem; } .pb-full { padding-bottom: 100%; } .pb-safe { padding-bottom: env(safe-area-inset-bottom); } .bg-green { background-color: #00c473; } .b-green { border-color: #00c473; } .bg-green-d { background-color: #538763; } .b-green-d { border-color: #538763; } .bg-purple { background-color: #6027DA; } .b-purple { border-color: #6027DA; } .bg-purple-ll { background-color: #edebff; } .b-purple-ll { border-color: #edebff; } .bg-transparent { background-color: transparent; } .b-transparent { border-color: transparent; } .t-white { color: #fff; } .t-black { color: #303030; } .t-gray { color: #767676; } .t-gray-l, .t-light-gray { color: #b7b7b7; } .t-lightest-gray { color: #dbdbdb; } .t-green { color: #00c473; } .t-dark-green, .t-green-d { color: #538763; } .t-red { color: #da7474; } .t-purple { color: #6027DA; } .leading-tight { line-height: 1; } .leading-1-2 { line-height: 1.2; } .leading-normal { line-height: 1.35; } .leading-relaxed { line-height: 1.5; } .bg-none { background: none; } .bg-transparent { background-color: transparent; } .bg-black { background-color: #303030; } .bg-gray { background-color: #767676; } .bg-white { background-color: white; } .bg-white-d, .bg-dark-white { background-color: #F3F5F6; } .bg-white-dd, .bg-darker-white { background-color: #edeff0; } .bg-gray-ll, .bg-lightest-gray { background-color: #dbdbdb; } .bg-gray-l, .bg-light-gray { background-color: #b7b7b7; } .bg-green { background-color: #00c473; } .bg-green-wza { background-color: #51D870; } .bg-green { background-color: #00c473; } .bg-green-ll, .bg-lightest-green { background-color: #d2fdd4; } .bg-purple-ll, .bg-lightest-purple { background-color: #edebff; } .bg-red { background-color: #da7474; } .bg-lightest-yellow, .bg-yellow-ll { background-color: #FFEBA6; } .bg-bv-black { background-color: #000; } .bg-bv-red { background-color: #E60000; } .bg-grad-light-gray { background-image: linear-gradient(315deg, #d9d9d9 0%, #f6f2f2 74%); } .bg-white-to-transparent { background-image: linear-gradient(90deg, #fff 50%, rgba(255, 255, 255, 0)); } .bg-transparent-to-white { background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 50%); } .bg-transparent-to-white-y { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 50%); } .bg-transparent-to-white_y-0-90 { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 90%); } .bold { font-weight: 700; } .w-full { width: 100%; } .w-full-30px { width: calc(100% - 30px); } .w-full-35px { width: calc(100% - 35px); } .w-full-50px { width: calc(100% - 50px); } .w-full-60px { width: calc(100% - 60px); } .w-full-65px { width: calc(100% - 65px); } .w-full-120px { width: calc(100% - 120px); } .w-auto { width: auto; } .w-0 { width: 0px; } .w-4 { width: 1rem; } .w-10px { width: 10px; } .w-15px { width: 15px; } .w-20px { width: 20px; } .w-25px { width: 25px; } .w-30px { width: 30px; } .w-35px { width: 35px; } .w-40px { width: 40px; } .w-45px { width: 45px; } .w-50px { width: 50px; } .w-60px { width: 60px; } .w-57px { width: 57px; } .w-65px { width: 65px; } .w-80px { width: 80px; } .w-100px { width: 100px; } .w-110px { width: 110px; } .w-125px { width: 125px; } .w-150px { width: 150px; } .w-200px { width: 200px; } .w-250px { width: 250px; } .w-300px { width: 300px; } .w-350px { width: 350px; } .w-450px { width: 450px; } .w-650px { width: 650px; } .w-800px { width: 800px; } .w-25per { width: 25%; } .w-50per { width: 50%; } .w-75per { width: 75%; } .w-50per-7px { width: calc(50% - 7px); } .w-75per { width: 75%; } .h-auto { height: auto; } .h-full { height: 100%; } .h-full-70px { height: calc(100% - 70px); } .h-full-80px { height: calc(100% - 80px); } .h-full-115px { height: calc(100% - 115px); } .h-full-150px { height: calc(100% - 150px); } .h-full-250px { height: calc(100% - 250px); } .h-full-190px { height: calc(100% - 190px); } .h-90vh { height: 90vh; } .h-100vh { height: 100vh; } .h-50per { height: 50%; } .h-0 { height: 0px; } .h-10px { height: 10px; } .h-15px { height: 15px; } .h-20px { height: 20px; } .h-25px { height: 25px; } .h-40px { height: 40px; } .h-45px { height: 45px; } .h-50px { height: 50px; } .h-65px { height: 65px; } .h-70px { height: 70px; } .h-80px { height: 80px; } .h-125px { height: 125px; } .h-135px { height: 135px; } .h-150px { height: 150px; } .h-250px { height: 250px; } .h-400px { height: 400px; } .h-500px { height: 500px; } .h-800px { height: 800px; } .mw-full, .maxw-full { max-width: 100%; } .mw-50p { max-width: 50%; } .mw-80px { max-width: 80px; } .mw-100px { max-width: 100px; } .mw-120px { max-width: 120px; } .mw-150px { max-width: 150px; } .mw-200px { max-width: 200px; } .mw-250px { max-width: 250px; } .mw-300px { max-width: 300px; } .mw-400px { max-width: 400px; } .mw-450px { max-width: 450px; } .mw-500px { max-width: 500px; } .mw-650px { max-width: 650px; } .mw-850px { max-width: 850px; } .mw-1100px { max-width: 1100px; } .minw-0 { min-width: 0; } .minw-35px { min-width: 35px; } .h-4 { height: 1rem; } .h-30px { height: 30px; } .h-35px { height: 35px; } .h-50px { height: 50px; } .h-200px { height: 200px; } .h-250px { height: 250px; } .h-300px { height: 300px; } .h-350px { height: 350px; } .h-2000px { height: 2000px; } .minh-0 { min-height: 0; } .minh-40px { min-height: 40px; } .minh-45px { min-height: 45px; } .minh-77px { min-height: 77px; } .minh-100px { min-height: 100px; } .minh-120px { min-height: 120px; } .minh-350px { min-height: 350px; } .minh-full { min-height: 100%; } .maxh-full { max-height: 100%; } .maxh-4rem { max-height: 4rem; } .maxh-2-7rem { max-height: 2.7rem; } .maxh-800px { max-height: 800px; } .t-xs { font-size: 0.75rem; } .t-sm { font-size: 0.875rem; } .t-base { font-size: 1rem; } .t-lg { font-size: 1.125rem; } .t-xl { font-size: 1.25rem; } .t-2xl { font-size: 1.5rem; } .t-3xl { font-size: 1.875rem; } .t-4xl { font-size: 2rem; } .t-5xl { font-size: 3rem; } .t-13px { font-size: 13px; } .t-15px { font-size: 15px; } .t-17px { font-size: 17px; } .t-20px { font-size: 20px; } .t-24px { font-size: 24px; } .t-32px { font-size: 32px; } .t-65px { font-size: 65px; } .t-right { text-align: right; } .t-left { text-align: left; } .t-center { text-align: center; } .t-bold { font-weight: 700; } .t-normal { font-weight: 400; } .b-0, .b-none { border: 0; } .b-1px { border: 1px solid #dbdbdb; } .br-1px { border-right: 1px solid #dbdbdb; } .b-2px-white { border: 2px solid #fff; } .b-1px-green { border: 1px solid #00c473; } .b-2px-green { border: 2px solid #00c473; } .b-1px-purple { border: 1px solid #6027DA; } .b-1px-purple-l { border: 1px solid #D4CEFF; } .bt-1px { border-top: 1px solid #dbdbdb; } .bb-1px { border-bottom: 1px solid #dbdbdb; } .bb-3px-purple { border-bottom: 3px solid #6027DA; } .bb-3px-green { border-bottom: 3px solid #00c473; } .b-red { border-color: #da7474; } .s-white { stroke: #fff; } .s-green { stroke: #00c473; } .s-width-none { stroke-width: 0; } .fill-green { fill: #00c473; } .fill-white { fill: #fff; } .fill-gray { fill: #767676; } .transition-all { transition: 2s all ease; } .scroll-smooth { scroll-behavior: smooth; } .bg-cover { background-size: cover; background-repeat: no-repeat; } .bg-contain { background-size: contain; background-repeat: no-repeat; } .bg-center { background-position: center; } .bg-bottom { background-position: bottom; } .opacity-0 { opacity: 0; } .opacity-60 { opacity: 0.6; } .opacity-35 { opacity: 0.35; } .object-contain { object-fit: contain; } .object-cover { object-fit: cover; } .rounded-0 { border-radius: 0px; } .rounded { border-radius: 4px; } .rounded-15px { border-radius: 15px; } .rounded-25px { border-radius: 25px; } .rounded-30px { border-radius: 30px; } .rounded-full { border-radius: 9999px; } .hover-bg-white:hover { background-color: #fff; } .hover-bg-darker-white:hover { background-color: #edeff0; } .pre-wrap { white-space: pre-wrap; } .space-x-1 { margin-right: calc(1rem * var(0)); margin-left: calc(1rem * (1 - var(0))); } .space-y-1px > * { margin-top: 1px; } .space-y-5px > * { margin-top: 5px; } .space-y-10px > * { margin-top: 10px; } .space-y-10px > *:first-child { margin-top: 0; } .space-y-15px > * { margin-top: 15px; } .space-y-15px > *:first-child { margin-top: 0; } .space-y-20px > * { margin-top: 20px; } .space-y-20px > *:first-child { margin-top: 0; } .space-x-5px > * { margin-left: 5px; } .space-x-5px > *:first-child { margin-left: 0; } .space-x-10px > * { margin-right: 10px; } .space-x-10px > *:last-child { margin-right: 0; } .space-x-15px > * { margin-left: 15px; } .space-x-15px > *:first-child { margin-left: 0; } .space-x-20px > * { margin-left: 20px; } .space-x-20px > *:first-child { margin-left: 0; } .space-x-50px > * { margin-left: 50px; } .space-x-50px > *:first-child { margin-left: 0; } .trim { text-overflow: ellipsis; overflow: hidden; } .white-space-normal { white-space: normal; } .nowrap, .no-wrap { white-space: nowrap; } .overflow-hidden { overflow: hidden; } .overflow-y-scroll { overflow-y: scroll; } .overflow-y-auto { overflow-y: auto; } .overflow-x-scroll { overflow-x: scroll; overflow-y: none; } .overflow-x-auto { overflow-x: auto; } .overflow-x-hidden { overflow-x: hidden; } .word-break-all { word-break: break-all; } .underline { text-decoration: underline; } .no-underline { text-decoration: none; } .line-through { text-decoration: line-through; } .flex { display: flex !important; } .inline { display: inline; } .flex-row { flex-direction: row; } .flex-col { flex-direction: column; } .flex-row-reverse { flex-direction: row-reverse; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .items-between { align-items: space-between; } .items-around { align-items: space-around; } .items-evenly { align-items: space-evenly; } .justify-start { justify-content: flex-start; } .justify-end { justify-content: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-around { justify-content: space-around; } .justify-evenly { justify-content: space-evenly; } .align-self-stretch { align-self: stretch; } .align-self-c, .align-self-center { align-self: center; } .align-self-s { align-self: start; } .align-start { align-content: flex-start; } .flex-grow { flex: 1 1 0; } .flex-grow { flex: 1 1 0; } .flex-grow-2 { flex: 2 1 0; } .flex-grow-3 { flex: 3 1 0; } .flex-shrink { flex: 0 1 0; } .flex-initial { flex: 0 0 auto; } .flex-1 { flex: 1 1 0%; } .flex-1-0-0 { flex: 1 0 0; } .flex-0-1-auto { flex: 0 1 auto; } .flex-1-1-auto { flex: 1 1 auto; } .flex-nowrap { flex-wrap: nowrap; } .flex-wrap { flex-wrap: wrap; } .self-center { align-self: center; } .ver-c-c, .col-center-center { display: flex; flex-direction: column; justify-content: center; align-items: center; } .ver-s-c, .col-start-center { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } .ver-c-s, .col-center-start { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .ver-s-s, .col-start-start { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; } .ver-s-s-wrap, .col-start-start-wrap { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; } .ver-s-st, .col-start-stretch { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; } .ver-s-sb { display: flex; flex-direction: column; justify-content: flex-start; align-items: space-between; } .col-space-around-center { display: flex; flex-direction: column; justify-content: space-around; align-items: center; } .col-space-between-end { display: flex; flex-direction: column; justify-content: space-between; align-items: end; } .ver-e-s { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; } .ver-e-c { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; } .hor-c-c, .row-center-center { display: flex; flex-direction: row; justify-content: center; align-items: center; } .hor-c-s, .row-center-start { display: flex; flex-direction: row; justify-content: center; align-items: flex-start; } .hor-c-c-wrap, .row-center-center-wrap { display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap; } .hor-s-s, .row-start-start { display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; } .hor-s-s-wrap, .row-start-start-wrap { display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; } .hor-s-st { display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; } .hor-s-c, .row-start-center { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .hor-s-c-wrap, .row-start-center-wrap { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap; } .hor-e-c, .row-end-center { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; } .hor-s-e, .row-start-end { display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-end; } .row-space-between-start { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; } .row-space-between-end { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; } .hor-sb-c, .row-space-between-center { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .hor-sb-st, .row-space-between-stretch { display: flex; flex-direction: row; justify-content: space-between; align-items: stretch; } .row-start-center-wrap { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap; } .row-center-start-wrap { display: flex; flex-direction: row; justify-content: center; align-items: flex-start; flex-wrap: wrap; } .hor-sa-c, .row-space-around-center { display: flex; flex-direction: row; justify-content: space-around; align-items: center; } .hor-st-s { display: flex; flex-direction: row; justify-content: stretch; align-items: start; } .hor-st-st { display: flex; flex-direction: row; justify-content: stretch; align-items: stretch; } .row { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .col { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; } .col-1-2-m20 { width: calc(50% - 20px); margin-right: 20px; } .col-1-2-m20:last-child { margin-right: 0; } .grid { display: grid; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .grid-cols-1-5-1 { grid-template-columns: 1fr 5fr 1fr; } .gr_a .col-auto { grid-column: auto; } .col-span-1 { grid-column: span 1/span 1; } .col-span-2 { grid-column: span 2/span 2; } .col-span-3 { grid-column: span 3/span 3; } .col-span-4 { grid-column: span 4/span 4; } .col-span-5 { grid-column: span 5/span 5; } .gap-0 { gap: 0px; } .gap-1px { gap: 1px; } .gap-5px { gap: 5px; } .gap-10px { gap: 10px; } .gap-15px { gap: 15px; } .gap-20px { gap: 20px; } .gap-30px { gap: 30px; } .order-2 { order: 2; } .inactive-link { pointer-events: none; cursor: default; } .triangle-top-purple { position: relative; } .triangle-top-purple:after { content: ""; position: absolute; top: -11.5px; left: 50%; transform: translateX(-50%); width: 0; border-bottom: 12px solid #edebff; border-left: 8.5px solid transparent; border-right: 8.5px solid transparent; } .triangle-top-purple:before { content: ""; position: absolute; top: -13px; left: 50%; transform: translateX(-50%); width: 0; border-bottom: 13.5px solid #D4CEFF; border-left: 10px solid transparent; border-right: 10px solid transparent; } .triangle:before { content: ""; position: absolute; top: 100%; left: 20px; width: 0; border-top: 12px solid #d2fdd4; border-left: 10px solid transparent; border-right: 10px solid transparent; } .triangle-purple:after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 0; border-top: 12px solid #edebff; border-left: 8.5px solid transparent; border-right: 8.5px solid transparent; } .triangle-purple:before { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 0; border-top: 13.5px solid #6027DA; border-left: 10px solid transparent; border-right: 10px solid transparent; } .delay-1000 { transition-delay: 1000ms; } .delay-5000 { transition-delay: 5000ms; } .animation-slide-up { animation-name: slide-up; animation-duration: 0.5s; animation-direction: normal; animation-iteration-count: 1; } @-webkit-keyframes slide-up { 0% { transform: translateY(100%); opacity: 0; } 100% { transform: translateY(0%); opacity: 1; } } .list-style-none { list-style-type: none; } .cursor-pointer { cursor: pointer; } [contenteditable]:empty:before { content: attr(data-ph); color: #b7b7b7; } [contenteditable]:focus { padding: 0.4em 0.5em 0.7em 0.5em; border: 1px solid #b7b7b7; border-radius: 4px; background-color: #F3F5F6; } .comment { color: #767676; } .space-eater { flex: 1 1 0; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .spaceholder { padding: 30px 15px; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .spaceholder h3 { color: #b7b7b7; } .icon-close { position: absolute; top: 0; right: 0; padding: 15px; z-index: 1; } .icon { margin-bottom: -0.1em; } .icon--16px { height: 14px; } .icon--14px { height: 12px; } .hide { visibility: hidden; } .show { visibility: visible; } .invisible { display: none; visibility: hidden; height: 0; width: 0; padding: 0; margin: 0; overflow: hidden; } .block { display: block !important; } .hidden { display: none; } .image-slider { position: relative; width: 100%; max-height: 500px; overflow: hidden; background-color: #dbdbdb; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .image-slider__image { flex: 0 0 auto; width: 100%; height: 100%; max-height: 500px; object-fit: contain; transition: margin 300ms; } @media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { .image-slider__image { max-height: 350px; } } .image-slider__prev, .image-slider__next { position: absolute; left: 5px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 999px; background-color: rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; justify-content: center; align-items: center; } .image-slider__prev svg, .image-slider__next svg { stroke: white; transform: scale(1.2); } .image-slider__next { left: auto; right: 5px; } .label-error { color: #da7474; visibility: hidden; height: 0; } .label-error--visible { height: auto; visibility: visible; } .tabs { flex: 0 0 auto; width: 100%; height: 50px; background: white; border-bottom: 1px solid #edeff0; display: flex; flex-direction: row; justify-content: space-around; align-items: stretch; } .tab { font-size: 16px; cursor: pointer; display: flex; flex-direction: row; justify-content: center; align-items: center; } .tab__content .loader { margin: 40px 0; } .tab__content h2 { padding: 0 20px; text-align: center; } .tab--active { border-bottom: 4px solid #00c473; } .badge { margin-left: 5px; padding: 0.1em 0.7em 0.16em 0.7em; font-size: 12px; font-weight: 700; color: white; border-radius: 50px; background-color: #da7474; } .badge--zero { visibility: hidden; padding: 0; width: 0px; background-color: #dbdbdb; } .section > .loader { margin-top: 50px; } .map-edit__map { width: calc(100% + 40px); max-height: 650px; height: 50vh; } .verified { position: relative; padding: 0px 4px 2px 18px; font-size: 13px; color: #538763; border-radius: 4px; background-color: #d2fdd4; } .verified:after { content: url(img/icon_check-dark-green.svg); position: absolute; top: 0px; left: 5px; } .unverified { padding: 0px 4px 2px 4px; font-size: 13px; color: #B88F00; border-radius: 4px; background-color: #FFEBA6; } .card { background: white; border-radius: 4px; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15), 0px 2px 20px rgba(0, 0, 0, 0.1); overflow: hidden; } .userpic { display: block; flex: 0 0 auto; border-radius: 50%; background-color: #dbdbdb; background-size: cover; background-position: center center; } .box-gray { padding: 10px; border-radius: 4px; background-color: #edeff0; } .box-green { padding: 10px; border-radius: 4px; background-color: #d2fdd4; } .box-red { padding: 10px; border-radius: 4px; background-color: #FFD0D0; } .box-dark-white { padding: 10px 15px; border-radius: 4px; background-color: #F3F5F6; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .buren-avatars { display: flex; flex-direction: row; justify-content: center; align-items: center; } .buren-avatars > img, .buren-avatars > .placeholder-load-bg { width: 40px; height: 40px; margin-right: -10px; border: 2px solid white; } .user-info { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .user-info .userpic { margin-right: 5px; } .user-info .row { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap; } .user-info__user-name { margin-right: 5px; font-weight: 400; } .user-info__destination, .user-info__location { margin-right: 5px; color: #767676; } .warning-message { z-index: 210; position: fixed; top: 0; left: 0; margin: 10px; width: calc(100% - 20px); max-width: 450px; padding: 15px; background-color: #FFEBA6; border-radius: 4px; box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.15); } .modal { position: fixed; top: 0; left: 0; padding: 50px; width: 100%; height: 100%; max-height: 100vh; background: rgba(0, 0, 0, 0.3); display: flex; flex-direction: row; justify-content: center; align-items: center; } @media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { .modal { padding: 0; } } .modal-st { position: relative; width: 100%; max-width: 450px; min-height: 300px; max-height: 100%; overflow: hidden; gap: 15px; background: white; align-self: flex-start; border-radius: 4px; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; } @media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { .modal-st { border-radius: none; } } .modal__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .modal__icon-close { z-index: 1; position: absolute; top: 0; right: 0; padding: 15px; cursor: pointer; } .modal-bottom { bottom: 0; width: 100%; max-width: 450px; background: white; border-top-left-radius: 15px; border-top-right-radius: 15px; } /* Hack for behind-modal scroll */ .no-scroll { height: 100vh; overflow: hidden; } .modal.modal--opaque { background: #b7b7b7; } .chat-icon { position: relative; font-size: 16px; display: flex; flex-direction: row; justify-content: center; align-items: center; } .chat-icon img { margin-right: 10px; } .chat-icon--new:before { content: " "; position: absolute; top: 15px; left: 40px; width: 10px; height: 10px; background-color: #da7474; border-radius: 50%; } .home { width: 100%; padding-bottom: 80px; } .home--with-search { margin-top: 80px; } .nav-cat-header { position: fixed; top: 50px; left: 0; } .home__back { position: absolute; top: 0; left: 15px; } .home .bottom-nav-bar { display: none; } @media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { .home .bottom-nav-bar { display: flex; } .home .top-menu-old { display: none; } } .landing-bg { background-image: url("img/ill_landing.jpg"); background-image: url("img/ill_landing.jpg"), linear-gradient(180deg, #00C47C 24.58%, #C8FFB5 68.5%, #FFE4AE 82.3%); } @media (min-width: 1024px) { .landing-bg { background-image: url("img/ill_landing-lg.jpg"); background-image: url("img/ill_landing-lg.jpg"), linear-gradient(180deg, #00C47C 24.58%, #C8FFB5 68.5%, #FFE4AE 82.3%); } } .landingUS-bg { background-image: url("img/ill_landingUS.jpg"); background-image: url("img/ill_landingUS.jpg"), linear-gradient(180deg, #00C47C 24.58%, #C8FFB5 68.5%, #FFE4AE 82.3%); } @media (min-width: 1024px) { .landingUS-bg { background-image: url("img/ill_landingUS-lg.jpg"); background-image: url("img/ill_landingUS-lg.jpg"), linear-gradient(180deg, #00C47C 24.58%, #C8FFB5 68.5%, #FFE4AE 82.3%); } } .beta-dashboard, .new-nearby { width: 100%; padding-bottom: 50px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } .new-nearby h2 { margin: 30px 0 20px 0; padding: 0 20px; text-align: center; } .bottom-nav-bar { position: fixed; bottom: 0; left: 0; right: 0; background: white; box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.15); display: flex; flex-direction: row; justify-content: stretch; align-items: center; height: calc(env(safe-area-inset-bottom) + 55px); padding-bottom: env(safe-area-inset-bottom); } .bottom-nav-bar--ios { padding-bottom: 20px; height: 80px; } .bottom-nav-bar__tab { position: relative; width: 25%; height: 100%; border: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; } .bottom-nav-bar__tab--new:before { content: " "; position: absolute; top: 50%; left: 50%; transform: translate(5px, -15px); width: 10px; height: 10px; background-color: #da7474; border-radius: 50%; } .bottom-nav-bar .tab img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .bottom-nav-bar .tab img.active { opacity: 0; } .bottom-nav-bar .tab--active img { opacity: 0; } .bottom-nav-bar .tab--active img.active { opacity: 1; } .bottom-nav-bar__profile-active { border-radius: 100%; border: 4px solid #a9edbe; } .top-menu-old { flex: 0 0 auto; padding: 0 15px; width: 100%; height: 69px; font-size: 16px; color: white; background: #00c473; display: flex; flex-direction: row; justify-content: center; align-items: center; } .top-menu-old .col { margin-left: 0 10px; flex: 0 0 auto; display: flex; flex-direction: row; justify-content: center; align-items: center; } .top-menu-old .col:first-child { margin: 0; } .top-menu-old .col:last-child { margin: 0; } .logo-holder { text-align: center; flex: 1 1 auto; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .watersnoodramp-link { color: white; } .top-menu-old .userpic { margin: 0 10px; width: 40px; height: 40px; } .logo-holder img { width: 121px; } .top-menu-old button { font-size: 16px; } .burger-menu { position: absolute; top: 0; right: 0; width: 300px; height: 100%; background: #fafafa; transition: all 0.5s ease 0s; display: flex; flex-direction: column; justify-content: stretch; align-items: stretch; } .burger-menu--out { margin-right: -305px; } .burger-menu__profile { color: #303030; text-decoration: none; display: flex; flex-direction: column; justify-content: center; align-items: center; } .burger-menu__profile span { font-size: 18px; } .burger-menu .col { padding-top: 50px; padding-bottom: 20px; background-color: white; border-bottom: 1px solid #dbdbdb; display: flex; flex-direction: column; justify-content: center; align-items: center; } .burger-menu .userpic { margin-bottom: 10px; width: 45px; height: 45px; } .burger-menu a.row { width: 100%; padding: 0 20px; height: 50px; color: #767676; text-decoration: none; } .row.burger-menu__spullen-aanbieden { height: 60px; color: #3894ff; border-top: 1px solid #dbdbdb; border-bottom: 1px solid #dbdbdb; } .space-eater { flex-grow: 1; } .burger-menu__help { border-top: 1px solid #dbdbdb; font-weight: 700; } .dates-n-price-block { margin-right: 10px; font-weight: 700; } .dates-n-price-block .icon { margin-right: 0.1em; } .request-holder { width: 100%; max-width: 450px; background-position: 10px center; background-repeat: no-repeat; background-image: url("img/remove-request.svg"); } .request { position: relative; margin-bottom: 10px; padding: 10px; background: white; border-radius: 4px; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15); } .request.highlight { border: 2px solid #00c473; } .request .button--close { top: 0; right: 0; } .request__offer { margin-right: 20px; font-size: 16px; font-weight: 700; } .request__offer .comment { font-size: 14px; font-weight: 400; } .request__share { position: absolute; top: 10px; right: 10px; } .request__answers { position: absolute; bottom: 10px; right: 10px; display: flex; flex-direction: row; justify-content: center; align-items: center; } .request__answer { background-color: rgba(233, 0, 53, 0.1); margin-left: 15px; width: 45px; height: 45px; border-radius: 50%; display: flex; flex-direction: row; justify-content: center; align-items: center; } .request__answer--yes { background-color: rgba(0, 196, 115, 0.2); } .request__info { margin-top: 10px; width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .request__user-info { flex: 1 1 0; color: #767676; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .request__user-info .userpic { margin-right: 5px; width: 35px; height: 35px; border-radius: 50%; background-color: #dbdbdb; } .request__username { margin-right: 10px; max-width: 80px; overflow: hidden; } .request__product-name { width: 100%; font-size: 16px; font-weight: 700; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; } .request__product-name .col:first-child { margin-right: 20px; } .request__product-desc { margin: 5px 0 5px 0; width: 100%; color: #767676; font-size: 16px; overflow: hidden; } .request--removed { opacity: 0; } .request--tutorial-animation { animation: back-n-force 0.8s 2; animation-delay: 1.5s; } @keyframes back-n-force { 0% { left: 0; } 70% { left: 20%; } 100% { left: 0; } } .select-product { height: 100%; max-height: 100%; text-align: left; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; } .select-product > * + * { margin-top: 10px; } .select-product__listings { margin: 10px 0; padding-bottom: 150px; width: 100%; height: calc(100% - 200px); overflow-y: auto; } .select-product__listing { padding: 8px; width: 100%; min-height: 50px; text-align: left; border-top: 1px solid #dbdbdb; cursor: pointer; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .select-product__listing:last-child { border-bottom: 1px solid #dbdbdb; } .select-product__listing-image { margin-right: 5px; width: 38px; height: 38px; } .select-product__bottom-panel { position: absolute; bottom: 0px; left: 0px; width: 100%; padding: 20px; background-color: white; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); } .proposal { position: relative; width: 100%; background: white; text-align: left; } .proposal__product-name { margin-bottom: 5px; font-size: 20px; } .proposal__product-desc { font-size: 16px; } .proposal__info { margin: 10px 0; color: #767676; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .proposal__info .userpic { width: 25px; height: 25px; } .proposal__share { flex: 1 1 0; text-align: right; } .proposal__not-active { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } .proposal__title { margin: 20px 0; } .proposal-form { margin-top: 20px; } .proposal__listing { margin: 10px 0; width: 100%; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15), 0px 2px 20px rgba(0, 0, 0, 0.1); overflow: hidden; border-radius: 4px; } .proposal__listing img { width: 50px; height: 50px; } .proposal__listing .col { margin-left: 5px; width: calc(100% - 160px); } .proposal__listing .button--link { margin-right: 10px; } .proposal__listing .button--icon { height: 50px; width: 40px; background-color: #edeff0; } .proposal__listing .button--icon img { height: 10px; width: auto; } .proposal-form .section { padding: 15px 0; border-top: 1px solid #dbdbdb; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; } .proposal-form .section.row { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .proposal-form__dates { margin: 20px 0; } .proposal-form__dates-price { position: relative; padding: 10px 0; border-top: 1px solid #dbdbdb; border-bottom: 1px solid #dbdbdb; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .proposal-form__garantie { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .proposal-form__garantie .comment { margin-left: 10px; max-width: 120px; } .proposal__username { margin: 0 10px 0 4px; } .proposal-form__dates-price .dates, .proposal-form__dates-price .price { width: 100%; font-size: 24px; font-weight: 700; } .proposal-form__dates-edit { position: relative; width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .proposal-form__dates-edit .col { width: calc(50% - 10px); } .proposal-form__dates-edit .col input { margin-top: 5px; width: 100%; } .proposal-form__dates-edit .close { position: absolute; top: 0; right: 0; } .proposal-form__send { padding: 20px 0 0 0; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .proposal-form__send button { font-size: 16px; } .proposal-form__price-slider { position: relative; } .proposal-form__price-slider .advanced { position: absolute; top: 0; right: 0; } .proposal-form__price-slider .col { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; } .proposal-form__price-slider .day { font-size: 16px; } .proposal-form__price-slider .price { font-size: 16px; } .extra-days__holder { position: absolute; width: 70%; right: 0; top: 0; } .proposal-form__price-slider .extra-days { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; } .proposal-form__price-edit { position: relative; width: 100%; padding: 20px 0; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; } .proposal-form__price-edit .close { position: absolute; top: 0; right: 0; } .proposal-form__contact-share { padding: 20px 0 10px 0; font-size: 14px; text-align: center; color: #767676; display: flex; flex-direction: column; justify-content: center; align-items: center; } .products { display: grid; width: 100%; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-template-rows: repeat(auto-fill); grid-column-gap: 0.75rem; grid-row-gap: 0.75rem; justify-items: stretch; align-items: flex-start; } @media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { .products { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } } .products-hor { width: 100%; max-width: 538px; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; } .products__no-products { margin: 40px 0 20px 0; width: 100%; text-align: center; font-size: 20px; color: #767676; } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .placeholder-load-bg { background: linear-gradient(45deg, white, #b7b7b7, white); background-size: 400% 400%; animation: gradient 2s ease infinite; } .first-letter-cap:first-letter { text-transform: capitalize; } .circles__add-product-button { position: sticky; top: 10px; z-index: 2; } .circles__message { padding: 10px; background-color: #edebff; border: 1px solid #D4CEFF; border-radius: 15px; border-bottom-left-radius: 0; } .circles__code { padding: 10px 20px 12px 15px; width: 250px; font-family: monospace, "Courier New", Courier; font-size: 28px; font-weight: 700; letter-spacing: 16px; text-transform: uppercase; } .gradient-layer:before { content: " "; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-image: linear-gradient(to top, hsla(0, 0%, 0%, 0.4) 0%, hsla(0, 0%, 0%, 0.15) 25%, hsla(0, 0%, 0%, 0) 45%, hsla(0, 0%, 0%, 0) 55%, hsla(0, 0%, 0%, 0.15) 75%, hsla(0, 0%, 0%, 0.4) 100%); } .listing-page { display: grid; width: 100%; padding-bottom: 100px; background: #F3F5F6; grid-template-columns: auto minmax(200px, 650px) minmax(100px, 350px) auto; grid-template-rows: 69px auto auto; grid-column-gap: 30px; grid-row-gap: 30px; grid-template-areas: "a a a a" ". b c ." ". b . ." ". d d ." "e e e e"; } @media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { .listing-page { grid-template-columns: 100%; grid-template-rows: auto auto; grid-row-gap: 0; grid-template-areas: "b" "d" "e"; } } .listing-page__holder { grid-area: b; width: 100%; background: white; } .listing-page__right-panel { grid-area: c; padding: 20px; background: white; border-radius: 15px; box-shadow: 0px 1px 2px rgba(32, 27, 27, 0.15), 0px 20px 36px rgba(0, 0, 0, 0.1); position: sticky; top: 100px; } .listing-page__right-panel .userpic { width: 50px; height: 50px; } @media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { .listing-page__right-panel { display: none; } } .listing-page__crosslinks-panel { grid-area: d; } .listing-page__bottombar { display: none; } @media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { .listing-page__bottombar { position: fixed; bottom: 0; margin: 0; width: 100%; padding: 10px 15px; background: white; border-top: 1px solid #dbdbdb; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .listing-page__bottombar .userpic { margin-right: 5px; } } .listing-page__footer { grid-area: e; } @media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { .listing-page .image-slider { max-height: 350px; } } .slide-up { margin-top: -50px; opacity: 0; } .loader__holder { flex: 1 1 0; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .loader { margin: 15px; border: 5px solid #d2fdd4; border-radius: 50%; border-top: 5px solid #00c473; width: 40px; height: 40px; -webkit-animation: spin 1s linear infinite; /* Safari */ animation: spin 1s linear infinite; } .loader.loader--small { margin: 10px; width: 25px; height: 25px; } /* Safari */ @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .chats-screen-holder { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } .chats-screen { width: 100%; max-width: 1100px; height: calc(100% - 69px); display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; } .chats-screen__chat { width: 65%; height: 100%; border-right: 1px solid #dbdbdb; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; } .chat-list { position: relative; width: 35%; height: 100%; background-color: #edeff0; border-right: 1px solid #dbdbdb; border-left: 1px solid #dbdbdb; } @media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { .chat-list { width: 100%; border: none; } } .chat-list__wallet { width: 100%; height: 50px; background-color: #d2fdd4; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; } .chat-list__wallet img { height: 14px; margin-bottom: -2px; margin-right: 2px; } .chat-list .tabs { box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); overflow: hidden; } .chat-list #tab-content { height: calc(100% - 100px); padding-bottom: 80px; overflow-y: scroll; } .chat-list h2 { margin: 20px 0 15px 0; padding: 0 20px; text-align: center; } .chat-list__request { margin: 15px 15px; border-left: 2px solid #767676; } .chat-list__need { margin: 15px 15px; background-color: #f3f5f6; } .chat { position: relative; padding: 15px 0; border-bottom: 1px solid #dbdbdb; display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; } .chat:after { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); content: url("img/icon_chevron-right-gray.svg"); } .chat .userpic { flex: 0 0 auto; margin: 0 10px; width: 40px; height: 40px; } .chat__info { flex: 1 1 0; max-width: calc(100% - 80px); } .chat .order-preview { margin: 5px 0 5px 0; width: 100%; max-width: 220px; } .chat__last-message { margin-top: 5px; width: calc(100% - 10px); color: #767676; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .chat__last-message--unread { color: #303030; font-weight: 700; } .chat__unread-counts { position: absolute; bottom: 15px; right: 10px; background-color: #da7474; padding: 0px 7px 3px 7px; font-weight: 700; color: white; border-radius: 50px; } .chat__no-proposals { margin: 12px 0; display: flex; flex-direction: column; justify-content: center; align-items: center; } .chat .dates-n-price-block { font-weight: 400; } .wallet { z-index: 10; position: fixed; top: 0; left: 0; width: 100%; height: 50px; background-color: #e0f4d8; display: flex; flex-direction: row; justify-content: center; align-items: center; } .wallet .row { margin: 10px; } .wallet-modal__total { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } .wallet-modal__total > img { margin-bottom: 5px; } .wallet-modal__unlocked { position: relative; } .wallet-modal__unlocked:after { content: url("img/icon_unlocked.svg"); position: absolute; top: 50%; transform: translateY(-50%); right: 10px; height: 20px; } .wallet-modal__locked { position: relative; } .wallet-modal__locked:after { content: url("img/icon_locked.svg"); position: absolute; top: 50%; transform: translateY(-50%); right: 10px; height: 20px; } .wallet-modal__success { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .wallet-modal__history tr { border-bottom: 1px solid #dbdbdb; } .wallet-modal__history tr:first-child { border-top: 1px solid #dbdbdb; } .wallet-modal__history th { padding: 10px 0; } .garanty { padding: 5px 10px 7px 10px; border-radius: 4px; background-color: #d2fdd4; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .garanty img { margin-bottom: -2px; margin-right: 5px; height: 18px; } .chat-screen { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; } .chat-screen__from { position: relative; width: 100%; margin: 5px 20px 0 20px; padding: 4px 10px 5px 10px; display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; } .chat-screen__top-bar { z-index: 1; flex: 0 0 auto; width: 100%; height: 50px; background-color: white; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } @media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { .chat-screen__top-bar { position: fixed; top: 0; left: 0; } } .chat-screen__top-bar .col { flex: 1 1 0; width: calc(100% - 130px); } .chat-screen__top-bar .userpic-holder { margin: 0 5px 0 15px; } .chat-screen__chat-menu img { height: 18px; } .chat-screen__messages { padding-top: 10px; width: 100%; height: 100%; overflow-x: hidden; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } @media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { .chat-screen__messages { padding-top: 50px; } } .chat-screen__messages:after { content: "end"; opacity: 0; display: block; padding-bottom: 50px; } @media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { .chat-screen__messages:after { padding-bottom: calc(150px + env(safe-area-inset-bottom)); } } .chat-screen__messages-container { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } .chat-screen__bottom { z-index: 10; flex: 0 0 auto; bottom: 0; left: 0; width: 100%; padding-bottom: env(safe-area-inset-bottom); } @media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { .chat-screen__bottom { position: fixed; } } .chat-screen__bottom:focus-within { padding-bottom: 0; } .order-card { position: relative; margin: 0px 10px 8px 10px; flex: 1 0 auto; width: calc(100% - 20px); padding: 5px; background-color: white; border-radius: 4px; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; transition: height 0.3s ease-out; height: 67px; } .order-card__userpic { position: absolute; left: 50%; top: -30px; transform: translateX(-50%); } .order-card__top { width: 100%; border-bottom: 1px solid #dbdbdb; } .order-card__middle { flex: 1 1 0; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: stretch; } .order-card__bottom { flex: 0 0 auto; width: 100%; height: 45px; border-top: 1px solid #dbdbdb; display: flex; flex-direction: row; justify-content: space-around; align-items: center; } .order-card__fold-button { position: absolute; top: 0px; right: 2px; } .order-card.order-card--unfold { height: 350px; } .order-card__preview { width: 100%; } .order-preview { max-width: calc(100% - 130px); display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; background-color: white; border-radius: 4px; } .order-preview .col { margin-left: 5px; margin-right: 10px; width: 100%; flex: 1 1 auto; } .order-preview span { max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .order-preview__listing-image { flex: 0 0 auto; width: 58px; height: 58px; background-color: #767676; border-radius: 4px; } .order-preview__status { margin-bottom: -0.1em; margin-left: 5px; } .order-card__dynamic-content { padding: 0 15px; flex: 1 1 0; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .order-card__status { flex: 1 1 0; width: 100%; display: flex; flex-direction: column; justify-content: space-around; align-items: center; } .order-card__status > button { width: 100%; } .order-card__status > .row { width: 100%; } .order-card__status > .row > * { margin-right: 20px; flex: 1 1 0; } .order-card__status > .row > *:last-child { margin-right: 0; } .order-card__secondary-actions { margin: 5px 0; flex: 0 0 auto; min-height: 40px; width: 100%; display: flex; flex-direction: row; justify-content: space-around; align-items: center; } .order-card__actions button { flex: 1 1 0; } .order-card__user { width: 100%; padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid #dbdbdb; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .order-card__user .userpic { margin-right: 10px; } .order-card--fold .order-preview { max-width: none; width: calc(100% - 50px); } .order-card--unfold .order-preview { width: 100%; max-width: 100%; } .order-card .order-preview span { max-width: 100%; } .label-focus:focus-within { border: 1px solid #6027DA; } .textarea-blank { overflow: hidden; border: 0; outline: none; resize: none; background: none; } .chat-screen__input-bar { margin: 5px 5px 5px 5px; padding: 0 0 0 15px; bottom: 0; left: 0; min-height: 50px; background-color: white; border-radius: 25px; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .chat-screen__input-bar textarea { padding: 5px 0 5px 0; flex: 1 1 0; overflow: hidden; border: 0; outline: none; resize: none; background: none; } .chat-screen__modal-close-bg { z-index: 9; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(150, 150, 150, 0.5); } .chat-screen__modal-close-bg--close { top: -4000px; } .chat-screen__date { font-size: 13px; color: #767676; margin: 15px 0; padding: 2px 5px; border-radius: 5px; background-color: #dbdbdb; } .chat-screen__service { margin: 20px 0; max-width: 80%; text-align: center; } .chat-screen__order { margin: 15px 0 0 0; padding: 10px 15px; background: white; border-radius: 4px; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15); display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; } .chat-screen__message, .chat-msg { position: relative; margin: 5px 20px 0 20px; padding: 4px 10px 5px 10px; flex: 0 0 auto; max-width: 80%; overflow: hidden; align-self: flex-start; display: table-cell; border-radius: 15px; border-bottom-left-radius: 0; border: 1px solid #D4CEFF; background-color: #edebff; display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; } .chat-screen__message + .chat-screen__message { margin-top: 5px; } .chat-screen__message--my, .chat-msg--my { align-self: flex-end; border-color: #a9edbe; border-bottom-right-radius: 0; border-bottom-left-radius: 15px; background-color: #d2fdd4; } .chat-msg__space-for-time { width: 52px; height: 1em; } .chat-msg__time { position: absolute; right: 5px; bottom: 2px; color: #767676; font-size: 13px; } .chat-msg__image { width: 100px; } .order-block { flex-basis: 100%; width: 0; display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; } .chat-screen__white-block { margin: 5px 0; padding: 4px 10px 4px 5px; width: 100%; max-width: 220px; background-color: white; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15); border-radius: 4px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; } .chat-screen__delivery-sup { margin-top: 15px; padding: 10px; width: 250px; background-color: white; border-radius: 4px; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15); } .chat-screen__delivery-sup h2 { font-size: 17px; } .chat-screen__add-photo { width: 100%; height: 200px; background-color: white; } .chat-screen .modal__content { width: 100px; background-color: white; } .chat-screen__popup-block-contacts { flex: 0 0 auto; margin: 10px; bottom: 100px; padding: 10px; background-color: white; } .user-quick-info__map { position: relative; width: 100%; height: 250px; background-size: cover; } .user-quick-info__map > img { width: 100px; } .user-quick-info__map:after { content: " "; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; border: 2px solid #00c473; background-color: rgba(169, 237, 190, 0.35); border-radius: 50px; } .contact-block { flex: 0 0 auto; margin: 5px 0; max-width: 300px; background-color: white; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15); border-radius: 4px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; } .contact-block__info { flex: 1 1 0; padding: 10px; } .contact-block__info > * + * { margin-top: 3px; } .contact-block__map { position: relative; flex: 0 0 auto; } .contact-block__map > img { width: 100px; } .contact-block__row { flex: 0 0 auto; width: 100%; } .contact-block__row:first-child { border-bottom: 1px solid #dbdbdb; } .add-listing__rotate-btn { position: absolute; bottom: 2px; left: 2px; height: 35px; color: #767676; background: white; border: none; border-radius: 50px; } .add-listing__remove-btn { position: absolute; top: 2px; right: 2px; height: 35px; color: #767676; background: white; border: none; border-radius: 50px; } .select-hor { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; text-align: center; } .select-hor__option { flex: 1 1 0; margin-left: -1px; padding: 0 5px 3px 5px; height: 45px; color: #767676; border: 1px solid #dbdbdb; background-color: #F3F5F6; cursor: default; display: flex; flex-direction: column; justify-content: center; align-items: center; } .select-hor__option:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .select-hor__option:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .select-hor__option.opt--selected { background-color: #00c473; color: white; font-weight: 700; border: 1px solid #00c473; border-radius: 4px; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12); } .list-menu { border: 1px solid #dbdbdb; border-radius: 4px; } .list-menu .row { position: relative; padding: 11px 25px 13px 15px; min-height: 45px; border-bottom: 1px solid #dbdbdb; cursor: pointer; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .list-menu .row:hover { background-color: #F3F5F6; } .list-menu .row:last-child { border-bottom: none; } .list-menu .row > *:nth-child(2) { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end; } .tree-select { width: 100%; background-color: white; text-align: left; } .tree-select__back-btn { position: relative; color: #6027DA; background: none; border: none; padding: 15px 0; } .tree-select__back-btn img { margin-bottom: -5px; margin-right: 2px; } .tree-select__item { position: relative; padding: 15px 0px; border-top: 1px solid #dbdbdb; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .tree-select__item:after { content: url("img/icon_chevron_right.svg"); position: absolute; top: 50%; right: 0px; transform: translateY(-50%); } .tree-select__item:last-child { border-bottom: 1px solid #dbdbdb; } .with-arrow { position: relative; padding-right: 25px; } .with-arrow:after { display: inline-block; position: absolute; content: ""; top: 50%; right: 10px; transform: translateY(-50%) rotate(45deg); border-style: solid; border-width: 1px 1px 0 0; height: 0.65em; width: 0.65em; vertical-align: top; } .chevron::before { border-style: solid; border-width: 0.25em 0.25em 0 0; content: ""; display: inline-block; height: 0.45em; left: 0.15em; position: relative; top: 0.15em; transform: rotate(-45deg); vertical-align: top; width: 0.45em; } .chevron.right:before { left: 0; transform: rotate(45deg); } .chevron.bottom:before { top: 0; transform: rotate(135deg); } .chevron.left:before { left: 0.25em; transform: rotate(-135deg); } .with-radio-right { position: relative; padding-right: 50px; } .with-radio-right.opt--selected { background-color: #d2fdd4; } .with-radio-right:after { position: absolute; top: 50%; transform: translateY(-50%); right: 10px; width: 22px; height: 22px; border: 3px solid white; box-shadow: 0 0 0 1px #b7b7b7; content: " "; border-radius: 50px; background-color: #fff; } .with-radio-right.opt--selected:after { background-color: #00c473; } .status { background: #00c473; color: white; font-size: 12px; padding: 2px 5px; } .status.status--canc { background: #da7474; } .request-status { font-size: 14px; color: #00c473; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .request-status:before { content: ""; display: block; margin: 0 2px -2px 0; width: 10px; height: 10px; border-radius: 10px; background-color: #00c473; } .request-status--paused { color: #767676; } .request-status--paused.request-status:before { background-color: #767676; } .request-status--blocked { color: #da7474; } .request-status--blocked.request-status:before { background-color: #da7474; } .orders-n-requests .table__row { display: grid; grid-template-columns: 10% 15% 30% 15% 15% 15%; margin: 0px 0; padding: 7px 15px; background: white; } .cat-title { padding: 15px 15px; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .cat-title__back { width: 20px; } .cat-title h2 { margin-left: 25px; flex: 1 1 0; max-width: calc(100% - 60px); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .cat-bar-holder { position: relative; height: 45px; width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .cat-bar { position: absolute; top: 0; left: 0; padding: 0 10px 10px 10px; width: 100%; flex-wrap: nowrap; overflow: scroll; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; transition: all 0.3s ease-out; animation: 0.5s slide-up; } @-webkit-keyframes slide-in { 0% { transform: translateX(0%); } 50% { transform: translateX(-100%); } } @-webkit-keyframes slide-out { 0% { transform: translateX(-100%); } 50% { transform: translateX(0%); } } .cat-bar__item { padding: 8px 0px; margin-right: 15px; white-space: nowrap; } .cat-bar__item--current { padding: 8px 15px; background-color: #00c473; color: white; border-radius: 25px; } .slide__container { position: absolute; top: 0; left: 0; margin: 0; width: 100%; height: 100%; background-color: #edeff0; overflow: scroll; } @media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { .slide__container { position: fixed; } } .slide { margin-bottom: 100px; background: white; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; } .slide > * { margin-bottom: 15px; } .slide-in { left: 0; transition: all 0.2s ease-out; } .slide-out { transition: all 0.2s ease-out; left: 100%; opacity: 0; } .search-block { width: 100%; min-height: 40vh; background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://www.peerby.com/assets/fecadb07.jpg"); background-position: 100% 10%; background-size: 120% auto; background-repeat: no-repeat; display: flex; flex-direction: column; justify-content: center; align-items: center; } .search-block h2 { color: white; margin-top: 50px; font-size: 52px; } .search-block h3 { color: white; font-size: 36px; font-weight: 400; } .search-block .search-comp { margin: 40px 0; max-width: 800px; } .search-comp { position: relative; padding: 10px 20px; } @media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { .search-comp { background-color: none; padding: 0 10px; } } .search_comp__noam { display: none; margin-right: 10px; } @media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { .search_comp__noam { display: block; } } .search-comp__input { flex: 1 1 auto; position: relative; } .search-comp__input-icon { position: absolute; top: 50%; transform: translateY(-50%); left: 5px; stroke: #b7b7b7; } .search-comp__input input { padding-left: 25px; flex: 1 1 auto; height: 3em; text-overflow: ellipsis; font-size: 1.25rem; background: white; } @media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { .search-comp__input input { font-size: 1.125rem; height: 2.5em; padding-right: 5px; } } .search-comp__input input[name=query] { border-right: none; border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .search-comp__input input[name=placesQuery] { border-left: 1px solid #b7b7b7; border-right: 1px solid #b7b7b7; border-top-left-radius: 0px; border-bottom-left-radius: 0px; } .search-comp__input input:focus { padding-right: 40px; } .search-comp__autocomplete { z-index: 10; position: absolute; left: 0; right: 0; font-size: 17px; background: white; color: #767676; } @media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { .search-comp__autocomplete { top: 50px; left: -20px; width: 100vw; } } .search-comp__autocomplete-item { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; padding: 0 20px 5px 20px; height: 60px; border-bottom: 1px solid #dbdbdb; } .search-comp__autocomplete-item:hover { background: #edeff0; cursor: pointer; } .search-comp__clean { position: absolute; top: 50%; transform: translateY(-50%); right: 5px; stroke: #b7b7b7; } .search-comp__close { margin-left: 10px; flex: 0 0 auto; } .search-comp__radius { position: relative; padding-right: 0.75em; flex: 0 0 auto; width: 5em; height: 3em; font-size: 1.25em; text-overflow: ellipsis; background-color: white; background-image: url("img/icon_chevron_down-light-gray.svg"); background-repeat: no-repeat; background-position: calc(100% - 5px) 50%; border-radius: 0; } @media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { .search-comp__radius { font-size: 1.125rem; padding-left: 0.25em; width: 4.2em; height: 2.5em; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } } .search-comp__submit { height: 3em; font-size: 1.25rem; padding-left: 1.5em; padding-right: 1.5em; border-top-left-radius: 0px; border-bottom-left-radius: 0px; } @media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { .search-comp__submit { display: none; font-size: 1rem; } } @media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { .search-comp--green { position: fixed; top: 0; left: 0; padding: 10px 10px; background-color: #00c473; } .search-comp--green .search-comp__input input { background: rgba(0, 0, 0, 0.25); border: none; color: white; } .search-comp--green .search-comp__input input::placeholder { color: rgba(255, 255, 255, 0.5); } .search-comp--green .search-comp__input-icon { stroke: rgba(255, 255, 255, 0.5); } .search-comp--green .search-comp__clean { stroke: rgba(255, 255, 255, 0.5); } .search-comp--green .search-comp__radius { border: none; color: white; background-color: rgba(0, 0, 0, 0.25); background-image: url("img/icon_chevron_down-white-transparent.svg"); } .search-comp--green .search-comp__close { color: white; } } .search-page { width: 100%; overflow-y: scroll; display: grid; grid-template-columns: 1fr minmax(400px, 1100px) 1fr; grid-template-rows: auto auto auto; grid-template-areas: "a a a" ". b ." "c c c"; } @media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { .search-page { grid-template-columns: 100%; grid-row-gap: 0; grid-template-areas: "a" "b" "c"; } } .search-page__top { grid-area: a; z-index: 10; position: sticky; top: 0; width: 100%; background-color: white; display: flex; flex-direction: column; justify-content: center; align-items: center; } .search-page__list { grid-area: b; } .search-page__bottom { grid-area: c; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; background-color: white; } .post-request { margin: 20px 0 40px 0; padding: 20px; text-align: center; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; background: white; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15); border-radius: 4px; } @media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { .post-request { width: calc(100% - 30px); margin: 20px 15px 40px 15px; } } .post-request__form { padding: 20px; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; padding: 0px; } .post-request__form > * { text-align: center; } .post-request__form > * > * { text-align: left; } .post-request__form > * + * { margin: 10px 0; } .post-request__form > h2 { margin: 0 20px; font-size: 20px; } .post-request__form p { width: 100%; } .post-request__form p + p { margin-top: -5px; } .post-request__form .box-gray .col { margin-right: 20px; text-align: left; } .post-request__form > .row > button { margin-right: 20px; } .post-request__form > .row > button:last-child { margin-right: 0; } .post-request__form > .row > .col { flex: 1 1 0; margin: auto; margin-right: 15px; } .post-request__form > .row > .col:last-child { margin-right: 0; } .search-page__footerHolder { flex: 0 0 auto; padding: 30px 0; width: 100%; background: white; border-top: 1px solid #dbdbdb; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } .search-page__footer { width: 100%; max-width: 1100px; color: #767676; display: flex; flex-direction: row; justify-content: stretch; align-items: flex-start; } .search-page__footer .col { width: 25%; } .search-page__footer a { margin-top: 15px; color: #767676; text-decoration: none; } .search-page__footer a:hover { text-decoration: underline; } .search-page__social a { margin: 0 20px; } .search-page__social .row { margin-top: 20px; } .paging { margin: 20px 10px; max-width: calc(100% - 20px); overflow: auto; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; background-color: white; border: 1px solid #b7b7b7; border-radius: 4px; } .paging__page { margin-right: 0px; padding: 10px 20px; border-right: 1px solid #b7b7b7; } .paging__page:last-child { border-right: none; } .paging__page--current { background-color: #F3F5F6; } .minimise-card { animation: minimise 1s ease 1; } @-webkit-keyframes minimise { 0% { transform: scale(1); top: 0; left: 0; opacity: 1; } 100% { transform: scale(0.1); top: 100%; left: 50%; opacity: 0.1; } } .jump { animation: jump 1s ease-in-out 1; } @-webkit-keyframes jump { 0% { transform: translateY(0); } 35% { transform: translateY(-100%); } 50% { transform: translateY(0); } 85% { transform: translateY(-100%); } 100% { transform: translateY(0); } } .how-to { flex: 0 0 auto; padding: 40px 0; width: 100%; text-align: center; background-color: white; border-top: 1px solid #dbdbdb; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } .how-to h2 { margin-bottom: 20px; width: 100%; } .how-to__holder { width: 100%; max-width: 1100px; display: flex; flex-direction: row; justify-content: center; align-items: center; } @media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { .how-to__holder { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; } .how-to__holder .how-to__holder > * { flex: 0 0 auto; } } .how-to__holder > .col { width: 33%; margin: 0 20px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } @media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { .how-to__holder > .col { width: 100%; margin: 0; padding: 0 20px; } } .how-to__holder > .col h3, .how-to__holder > .col p { text-align: center; } .profile-screen { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } .profile__info { padding: 5px 15px 20px 15px; width: 100%; max-width: 500px; min-height: 240px; background: white; } .profile__info-holder { flex: 0 0 auto; padding: 0; max-width: none; background: white; border-bottom: 1px solid #dbdbdb; } .profile__info .userpic { width: 80px; height: 80px; } .profile__info .row { margin-bottom: 10px; } .profile__stats-col { margin-right: 10px; } .profile__info .row .profile__userpic-n-settings { position: relative; margin-bottom: 30px; display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; } .profile__info .verification-badge { margin: 5px 5px 0 0; } .profile__settings { flex: 1 1 0; text-align: right; } .options-menu { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 5px 15px 5px 15px; min-width: 220px; border-radius: 4px; background: white; display: flex; flex-direction: column; justify-content: center; align-items: center; } .options-menu__button { padding: 15px 0; width: 100%; font-size: 16px; color: #303030; background: none; text-decoration: none; text-align: center; border: none; border-radius: 0; border-bottom: 1px solid #dbdbdb; } .options-menu__button:last-child { border-bottom: none; } .options-menu__button button { margin-left: 10px; } .options-menu__button span { padding: 2px 0; } #tocopyEl { position: fixed; top: -9000px; left: -9000px; } .zoom-in-userpic .userpic { width: 300px; height: 300px; } .subscription-picker__select { display: flex; flex-direction: row; justify-content: space-between; align-items: stretch; } .subscription-picker__select > .row { position: relative; flex: 1 1 0; margin-right: 15px; padding: 15px 10px; border: 1px solid #b7b7b7; border-radius: 4px; background-color: #F3F5F6; } .subscription-picker__select > .row:last-child { margin-right: 0; } .subscription-picker__select .row.opt--selected { border-color: #00c473; background-color: #d2fdd4; } .subscription-picker__select > .row > .col { flex: 1 1 0; } .subscription-picker__discount { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: 2px 5px; color: white; font-weight: 700; background-color: #538763; border-radius: 4px; white-space: nowrap; } .subscription-picker__benefits { padding: 10px 20px; background-color: #d2fdd4; border-radius: 4px; text-align: left; } .subscription-picker__benefits p { margin: 5px 0px; } .subscription-picker__benefits img { margin-right: 10px; } #upload-photo { position: absolute; visibility: hidden; } .tinventory__button--yes { background: rgba(0, 196, 115, 0.2); } .tinventory__button--no { background: rgba(218, 116, 116, 0.2); } .footer { padding: 50px 0; font-size: 16px; width: 100%; max-width: 400px; color: #767676; display: flex; flex-direction: row; justify-content: center; align-items: center; } .footer img { margin: 0 15px; } .footer a { color: #767676; } @media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { .hide-on-mobile { visibility: hidden; } } .hide-scrollbar::-webkit-scrollbar { display: none; } @media only screen and (min-device-width: 0) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { ::-webkit-scrollbar { display: none; } .chat-screen__message, .chat-msg { margin: 5px 10px 0 10px; } .logo-holder img { width: 87px; } .chat-icon img { margin-right: 0; } .footer-block__footer { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } .footer-block__footer-holder { padding-top: 0; } .footer-block__footer .col { margin-top: 40px; padding: 0 20px; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } .footer-block__copyright img { margin: 0 15px; } }