@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Sans:300,600&display=swap");

/*---------- variables ---------- */
:root {
    /* colors */
    --color-black: #0e0e0e;
    --color-black-2: #2a2a2a;
    --color-black-3: #333333;
    --color-black-4: #182039;
    --color-white: #ffffff;
    --color-error-light: #FCEAEA;
    --color-red: #ff444f;
    --color-red-1: #dd573a;
    --color-red-2: #ffc9cc;
    --color-red-3: #d43e47;
    --color-grey: #c2c2c2;
    --color-grey-1: #999999;
    --color-grey-2: #666565;
    --color-grey-3: #f2f2f2;
    --color-grey-4: #f2f3f4;
    --color-grey-5: #d6dadb;
    --color-grey-6: #777777;
    --color-grey-7: #f3f3f3;
    --color-grey-8: #414652;
    --color-green: #85acb0;
    --color-blue: #4c76be;
    --color-blue-1: #1877F2;
    --color-blue-2: #365899;
    --color-yellow: #fff2df;

    /* sizes */
    --text-size-xxxs: 1rem;
    --text-size-xxs: 1.2rem;
    --text-size-xsm: 1.3rem;
    --text-size-xs: 1.4rem;
    --text-size-s: 1.6rem;
    --text-size-sm: 2rem;
    --text-size-m: 2.4rem;
    --text-size-l: 3.2rem;
    --text-size-xl: 4.8rem;
    --text-size-xxl: 6.4rem;
    font-size: 62.5%;
}

html {
    font-size: 62.5%;
}

body,
* {
    font-family: "IBM Plex Sans", sans-serif;
}

body {
    margin: 0;
    background-color: #FFFFFF;
    letter-spacing: 0.15px;
}

header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 73px;
    margin-bottom: 4rem;
    background-color: #FFFFFF;
}

@media (max-width: 480px) {
    header {
        margin-bottom: unset;
    }
}

header #logo {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    border-style: solid;
    border-width: 0 0 0 0;
    border-color: var(--color-white);
    gap: 1rem;
}

header #subheader {
    height: 16px;
}

header #logo,
header #subheader {
    padding: 0 9px;
}

a {
    color: var(--color-red);
    font-size: var(--text-size-xs);
    line-height: 1.5;
    text-decoration: none;
}

a:hover {
    cursor: pointer;
    text-decoration: underline;
}

p {
    color: var(--color-black-3);
    font-weight: normal;
    font-size: var(--text-size-xs);
    line-height: 1.5;
    margin: 0
}

p.secondary {
    color: var(--color-grey);
}

p.error {
    color: var(--color-red);
    font-size: var(--text-size-xxs);
    align-self: flex-start;
    padding-inline-start: 0.8rem;
}

h1,
h2,
h3 {
    font-weight: bold;
    line-height: 1.25;
    width: 100%;
    margin-top: 0;
}

h1 {
    font-size: var(--text-size-xxl);
}

h2 {
    font-size: var(--text-size-xl);
}

h3 {
    font-size: var(--text-size-l);
}

h4 {
    font-size: var(--text-size-m);
}

/*---------- form, input, button ---------- */
#container {
    display: flex;
    flex-direction: column;
    align-items: start;
    max-width: 40.6rem;
    margin: auto;
    text-align: start;
    padding: 40px;
    background-color: var(--color-white);
    border-radius: 6px;
}

.rtl {
    direction: rtl;
}

@media (max-width: 480px) {
    #container {
        padding: 40px 16px;
    }
}

form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 0 auto 3.2rem;
}

form .input-group {
    margin-top: 1.4rem;
    height: 3.8rem;
}

form .input-group:first-child {
    margin-top: 0;
}

form a {
    align-self: center;
}

div.input-group {
    width: 100%;
    height: max-content;
}

div.input-wrapper {
    position: relative;
    border: 1px solid var(--color-grey-5);
    border-radius: 4px;
}

div.input-error {
    min-height: 1.8rem;
}

div.input-wrapper:hover {
    border-color: var(--color-grey-6);
}

div.input-wrapper.has_error {
    border-color: var(--color-red);
}

div.input-wrapper.has_error input~label {
    color: var(--color-red);
}

div.input-wrapper .input-button {
    position: absolute;
    top: 0;
    inset-inline-end: 10px;
    width: 17px;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
    display: none;
}

div.input-wrapper #btnToggle.icon_hidden {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTAgMGgxNnYxNkgweiIvPgogICAgICAgIDxwYXRoIGZpbGw9IiM5OTkiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTE0LjE3NyAyLjExOGEuNS41IDAgMSAxIC42NDYuNzY0bC0yLjA0OCAxLjczMkE3LjkyNSA3LjkyNSAwIDAgMSAxNS4zMzMgOGMtMS4xNTMgMi45MjctNCA1LTcuMzMzIDVhNy44MyA3LjgzIDAgMCAxLTMuOTA4LTEuMDM4bC0yLjI2OSAxLjkyYS41LjUgMCAxIDEtLjY0Ni0uNzY0bDIuMDQ3LTEuNzMzQTcuOTI1IDcuOTI1IDAgMCAxIC42NjcgOEMxLjgyIDUuMDczIDQuNjY3IDMgOCAzYTcuODMgNy44MyAwIDAgMSAzLjkwOSAxLjAzOHptLTIuMjY1IDMuMjI2TDEwLjU4IDYuNDcyYy4yNjcuNDQ4LjQyLjk3LjQyIDEuNTI4IDAgMS42NTMtMS4zNDcgMy0zIDMtLjczNiAwLTEuNDEtLjI2Ny0xLjkzMy0uNzA4bC0xLjEwNi45MzVDNS44OCAxMS43MjcgNi45MTQgMTIgOCAxMmMyLjU4NSAwIDQuODc4LTEuNTUgNi00YTcuMDQ2IDcuMDQ2IDAgMCAwLTIuMDg4LTIuNjU2ek04IDRDNS40MjIgNCAzLjEyMiA1LjU1IDIgOGE3LjA1IDcuMDUgMCAwIDAgMi4wODYgMi42NTZMNS40MiA5LjUyOEEyLjk4IDIuOTggMCAwIDEgNSA4YzAtMS42NTMgMS4zNDctMyAzLTMgLjczNiAwIDEuNDExLjI2NyAxLjkzNC43MDlsMS4xMDUtLjkzNUE2LjMzNiA2LjMzNiAwIDAgMCA4IDR6bTEuODAyIDMuMTNMNi44NDUgOS42MzNBMiAyIDAgMCAwIDkuODAyIDcuMTN6TTggNmEyIDIgMCAwIDAtMS44MDIgMi44N2wyLjk1Ny0yLjUwM0ExLjk5IDEuOTkgMCAwIDAgOCA2eiIvPgogICAgPC9nPgo8L3N2Zz4K");
}

div.input-wrapper #btnToggle.icon_visible {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTAgMGgxNnYxNkgweiIvPgogICAgICAgIDxwYXRoIGZpbGw9IiM5OTkiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTggNGMyLjU3OCAwIDQuODc4IDEuNTUgNiA0LTEuMTIyIDIuNDUtMy40MTUgNC02IDRzLTQuODc4LTEuNTUtNi00YzEuMTIyLTIuNDUgMy40MjItNCA2LTRtMC0xQzQuNjY3IDMgMS44MiA1LjA3My42NjcgOGMxLjE1MyAyLjkyNyA0IDUgNy4zMzMgNXM2LjE4LTIuMDczIDcuMzMzLTVjLTEuMTUzLTIuOTI3LTQtNS03LjMzMy01em0wIDNhMiAyIDAgMSAxLS4wMDEgNC4wMDFBMiAyIDAgMCAxIDggNm0wLTFDNi4zNDcgNSA1IDYuMzQ3IDUgOHMxLjM0NyAzIDMgMyAzLTEuMzQ3IDMtMy0xLjM0Ny0zLTMtM3oiLz4KICAgIDwvZz4KPC9zdmc+Cg==");
}

input[type=password]::-ms-reveal,
input[type=password]::-ms-clear {
    display: none;
}

input {
    background: none;
    color: var(--color-black-3);
    font-size: var(--text-size-s);
    padding: 1rem 1rem 1rem 0.8rem;
    width: calc(100% - 1.8rem);
    display: block;
    border: none;
    border-radius: 0;
}

input::-webkit-input-placeholder {
    opacity: 0;
    -webkit-transition: opacity 0.25s;
    -o-transition: opacity 0.25s;
    transition: opacity 0.25s;
    padding-inline-start: 0.3rem;
}

input::-moz-placeholder {
    opacity: 0;
    -webkit-transition: opacity 0.25s;
    -o-transition: opacity 0.25s;
    transition: opacity 0.25s;
    padding-inline-start: 0.3rem;
}

input:-ms-input-placeholder {
    opacity: 0;
    -webkit-transition: opacity 0.25s;
    -o-transition: opacity 0.25s;
    transition: opacity 0.25s;
    padding-inline-start: 0.3rem;
}

input::-ms-input-placeholder {
    opacity: 0;
    -webkit-transition: opacity 0.25s;
    -o-transition: opacity 0.25s;
    transition: opacity 0.25s;
    padding-inline-start: 0.3rem;
}

input~label {
    color: var(--color-grey-1);
    font-size: var(--text-size-xs);
    position: absolute;
    pointer-events: none;
    inset-inline-start: 1.1rem;
    top: 1rem;
    transition: 0.25s ease all;
    transform-origin: top left;
}

input:focus {
    outline: none;
}

input:focus::-webkit-input-placeholder {
    opacity: 0.4;
}

input:focus::-moz-placeholder {
    opacity: 0.4;
}

input:focus:-ms-input-placeholder {
    opacity: 0.4;
}

input:focus::-ms-input-placeholder {
    opacity: 0.4;
}

input:focus::placeholder {
    opacity: 0.4;
}

input:focus~label,
label.raised-label,
input:not(:focus):not(:invalid)~label {
    background-color: var(--color-white);
    -webkit-transform: translate(-4px, -1.8rem) scale(0.71);
    -ms-transform: translate(-4px, -1.8rem) scale(0.71);
    transform: translate(-4px, -1.8rem) scale(0.71);
    padding: 0 4px;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
}

/* somehow this `input:-webkit-autofill` was not picked on focus in Edge
        if we add it with other classes as above. it worked separately. */
input:-webkit-autofill~label {
    background-color: var(--color-white);
    -webkit-transform: translate(0, -1.8rem) scale(0.75);
    padding: 0 4px;
    -webkit-transform-origin: top left;
}

input[style*="background"]~.input-button {
    inset-inline-end: 32px;
}

input:not(:placeholder-shown)~.input-button {
    display: block;
}

button {
    border-radius: 4px;
    padding: 1rem 1.6rem;
    font-size: 1.4rem;
    transition: all 0.25s;
    font-weight: bold;
}

button:hover {
    cursor: pointer;
}

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

button:active {
    transform: scale(0.95);
}

button>* {
    pointer-events: none;
}

button.primary {
    border: 2px solid var(--color-red);
    color: var(--color-red);
    background: transparent;
}

button.primary:hover {
    background-color: var(--color-red);
    color: var(--color-white);
}

button.secondary {
    border: 2px solid var(--color-red);
    color: var(--color-white);
    background: var(--color-red);
}

button.secondary:hover {
    background-color: var(--color-red-3);
    border-color: var(--color-red-3);
}

button.tertiary {
    border: 2px solid var(--color-grey-1);
    color: var(--color-black);
    background: transparent;
}

button.tertiary:hover {
    background-color: rgba(0, 0, 0, 0.08);
}

#lost-password {
    align-self: flex-start;
    margin-bottom: 3rem;
}

#lost-password-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-direction: column;
}

#lost-password-container button[type="submit"] {
    margin-inline-start: auto;
    border: none;
    width: 100%;
    height: 4rem;
    border-radius: 16px !important;
}

#oa_social_login_container {
    margin: 1.6rem auto;
    width: 100%;
}

#oa_social_login_container iframe #social_login {
    background: black !important;
}

div#oa_social_login_container iframe {
    height: 170px !important;
    width: 100% !important;
}

.error-banner {
    background-color: var(--color-error-light);
    font-size: var(--text-size-s);
    max-width: 100%;
    margin-bottom: 2rem;
    padding: 1.2rem 1.6rem;
    border-radius: 4px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1rem;
    line-height: 1.5;
    align-self: stretch;
    /* Match the form's width */
}

.error-banner .error-icon {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.error-banner .error-icon svg {
    width: 24px;
    height: 24px;
}

.error-banner .error-text {
    flex: 1;
    text-align: left;
    font-weight: normal;
}

/* Keep the old style for backward compatibility */
p.error-oneall {
    color: var(--color-red);
    font-size: var(--text-size-s);
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
    margin-top: -20px;
}

.title-text {
    align-self: stretch;
    color: var(--system-light-1-prominent-text, #333);
    margin-top: 0;
    margin-bottom: 2rem;
    line-height: 26px;
    font-family: "IBM Plex Sans";
    font-size: 18px;
    font-weight: 700;
}

.deriv-url {
    background-color: var(--color-grey-3);
    border-radius: var(--text-size-s);
    margin-inline-start: 0.8rem;
    line-height: 0;
}

.binary-logo {
    margin-inline-end: 10px;
}

.binary-logo svg {
    vertical-align: middle;
}

.center-text {
    text-align: center;
}

.note-container {
    background-color: rgba(242, 243, 244, 0.56);
    display: flex;
    padding: 0.8em;
    margin-bottom: 2.5rem;
    align-items: center;
    border-radius: 4px;
}

.note-wrapper {
    text-align: start;
    display: flex;
    flex-direction: column;
    min-height: 42px;
}

.note-title {
    font-size: var(--text-size-xs);
    color: var(--color-grey-2);
    text-align: start;
    font-weight: normal;
    margin: 0;
    line-height: 21px;
}

.note-text {
    color: var(--color-grey-2);
    font-size: var(--text-size-xxxs);
}

.separator {
    width: 100%;
    border-top: 1px solid var(--color-grey-5);
}

.social-text {
    color: var(--color-grey-6);
    width: fit-content;
    margin: auto;
    transform: translateY(-11px);
    background: var(--color-white);
    padding: 0 2.2rem;
}

.account-link {
    font-size: var(--text-size-s);
}

.account-text {
    color: var(--color-black-3);
    font-size: var(--text-size-s);
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
    margin-top: -20px;
}

@media (max-width: 480px) {
    .account-text {
        margin-top: -18px;
        margin: 1.6rem auto 0;
    }
}

@media (max-width: 435px) {
    .account-text {
        margin-top: -18px;
        width: 58%
    }
}

@media (max-width: 360px) {
    .account-text {
        width: 63%
    }
}

.hide {
    display: none;
}

@media (max-width: 368px) {
    html {
        font-size: 55%;
    }

    .subtitle-text {
        flex-direction: column;
    }

    .deriv-url {
        margin-top: 0.8rem;
        margin-inline-start: 0;
    }
}

/*---------- Scopes confirmation page ---------- */
.scope-confirms#container {
    max-width: 50rem;
}

.scope-title {
    margin-bottom: 0.8rem;
}

.scope-subtitle {
    font-size: var(--text-size-sm);
}

.scopes {
    margin-top: 2.4rem;
    margin-bottom: 3.2rem;
    padding: 2.4rem;
    background: var(--color-grey-7);
}

.scopes ul {
    text-align: start;
    margin: 0;
    padding: 0;
    padding-inline-start: 2rem;
}

.scopes li {
    color: var(--color-black-3);
    font-size: var(--text-size-s);
    padding: 1rem 0;
}

#btnCancel {
    margin-inline-end: 0.8rem;
}

/*---------- reactivate account page ---------- */
.reactivate-account#container {
    align-items: center;
    text-align: center;
}

.reactivate-title {
    font-size: 2.4rem;
    margin-bottom: 0.8rem;
}

.reactivate-description {
    font-size: 1.6rem;
    margin-bottom: 2.4rem;
}

.reactivate-description a {
    font-size: 1.6rem;
}

@media (max-width: 450px) {
    .reactivate-account#container {
        background-color: unset;
        box-shadow: unset;
    }

    .reactivate-title {
        font-size: 2rem;
    }
}

.popup {
    background: rgba(0, 0, 0, 0.72);
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.popup-container {
    display: flex;
    width: 32.8rem;
    padding: 16px;
    gap: 1.6rem;
    flex-direction: column;
    align-items: flex-end;
    background-color: var(--color-white);
    border-radius: 8px;
    margin: 0 1.6rem;
}

.popup-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 16px;
    width: 296px;
    height: 20px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    z-index: 2;
    font-family: "IBM Plex Sans";
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-align: start;
}

.popup-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: var(--text-size-xxs);
    line-height: 1.8rem;
    color: var(--color-black-3);
    text-align: start;
}

.popup-btn {
    background-color: var(--color-red);
    border-radius: 4px;
    padding: 10px 16px 10px 16px;
    color: var(--color-white);
    font-size: var(--text-size-xs);
    cursor: pointer;
    font-weight: 700;
}

#passkeysContainer {
    width: 100%;
}

#passkeysForm {
    margin-bottom: 0;
}

.passkey {
    border-radius: 16px;
    border: 2px solid var(--system-light-3-less-prominent-text, #999);
    width: 100%;
}

.biometrics {
    border: 1px solid var(--color-red);
}

.passkey-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    color: #333333;
    height: 44px;
}

.biometrics-btn {
    color: var(--color-red);
}

a.passkey-btn:hover {
    text-decoration: none;
}

.passkey-text {
    font-weight: 700;
}

@media screen and (min-width: 767px) {
    #passkeysContainer.desktop-hidden {
        display: none;
    }

    .separator {
        display: none;
    }
}

.separator-show {
    display: block;
}

#passkeysContainer+.account-text {
    margin-top: 17px;
}


.deriv-loader__container {
    display: none;
    /* Initially hidden */
    z-index: 1000;
    inset: 0;
    position: fixed;
    background: rgba(255, 255, 255, 0.7);
    pointer-events: all;
}

.deriv-loader {
    display: flex;
    width: 7.2rem;
    height: 3.2rem;
    transition: all 0.4s ease;
    justify-content: space-between;
    align-items: center;
    margin: auto;
}

.deriv-loader__element {
    display: block;
    width: 0.8rem;
    height: 3.2rem;
    animation: loader 1.5s ease-in infinite both;
    border-radius: 1rem;
    background-color: var(--color-green);
}

.deriv-loader__element:nth-child(1) {
    animation-delay: 0.1s;
}

.deriv-loader__element:nth-child(2) {
    animation-delay: 0.2s;
}

.deriv-loader__element:nth-child(3) {
    animation-delay: 0.3s;
}

.deriv-loader__element:nth-child(4) {
    animation-delay: 0.4s;
}

.deriv-loader__element:nth-child(5) {
    animation-delay: 0.5s;
}

@keyframes loader {
    0% {
        bottom: 0;
        height: 50%;
    }

    12.5% {
        bottom: 0;
        height: 75%;
    }

    25% {
        bottom: 75%;
        height: 100%;
    }

    37.5% {
        bottom: 0;
        height: 75%;
    }

    50% {
        bottom: 0;
        height: 50%;
    }

    100% {
        bottom: 0;
        height: 50%;
    }
}


.providers_row {
    display: flex;
    justify-content: space-between;
    align-content: center;
    flex-direction: column;
    gap: 0.8rem;
}

.provider a.button {
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.account-text {
    margin-top: 17px;
}

.social_login_providers {
    margin: 0.8rem auto 1.6rem auto;
    width: 100%;
}

.provider_hidden {
    display: none !important;
}

.provider {
    border: none;
    border-radius: 16px;
}

.provider .name {
    color: var(--color-white);
    font-weight: 700;
}

.provider#provider_google {
    background: rgba(0, 0, 0, 0.04);
}

.provider#provider_google .name {
    color: var(--color-grey-8);
}

.provider#provider_google a.button .provider_icon {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgZmlsbC1ydWxlPSJub256ZXJvIj4KICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICA8Zz4KICAgICAgICAgICAgICAgICAgICA8Zz4KICAgICAgICAgICAgICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBmaWxsPSIjM0U4MkYxIiBkPSJNMTkuNTQ2IDEwLjIwMmMwLS42ODQtLjA2MS0xLjM2Ny0uMTgtMi4wNEg5Ljk3M3YzLjg1NWg1LjM2N2MtLjIyNCAxLjIzMi0uOTQxIDIuMzItMS45ODkgMy4wMDhsMy4yMjEgMi41MDRjMS44ODgtMS43MzYgMi45NzUtNC4yOSAyLjk3NS03LjMyN3oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC04MDIgLTYwMCkgdHJhbnNsYXRlKDczMiAxNTIpIHRyYW5zbGF0ZSg0MCA0NDApIHRyYW5zbGF0ZSgzMCA4KSB0cmFuc2xhdGUoMiAyKSIvPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZmlsbD0iIzMyQTc1MyIgZD0iTTEzLjM1IDE1LjAyNWMtLjg5LjYtMi4wMzMuOTUzLTMuMzc4Ljk1My0yLjYgMC00Ljc5Ni0xLjc1NC01LjU4LTQuMTEyTDEuMDYgMTQuNDQ4YzEuNjkyIDMuMzY3IDUuMTQzIDUuNDk2IDguOTEzIDUuNDkgMi42OTUgMCA0Ljk1Mi0uODkgNi42LTIuNDE0bC0zLjIyMi0yLjQ5OXoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC04MDIgLTYwMCkgdHJhbnNsYXRlKDczMiAxNTIpIHRyYW5zbGF0ZSg0MCA0NDApIHRyYW5zbGF0ZSgzMCA4KSB0cmFuc2xhdGUoMiAyKSIvPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZmlsbD0iI0Y5QkIwMCIgZD0iTTQuMzkyIDguMDc4TDEuMDYgNS40OTZjLTEuNDEyIDIuODE4LTEuNDEyIDYuMTQgMCA4Ljk1OGwzLjMzMy0yLjU4M2MtLjQxNC0xLjIzMi0uNDE0LTIuNTY2IDAtMy43OTN6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtODAyIC02MDApIHRyYW5zbGF0ZSg3MzIgMTUyKSB0cmFuc2xhdGUoNDAgNDQwKSB0cmFuc2xhdGUoMzAgOCkgdHJhbnNsYXRlKDIgMikiLz4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGZpbGw9IiNFNzQxMzMiIGQ9Ik05Ljk3MiAwYy0zLjc3IDAtNy4yMjEgMi4xMjktOC45MTMgNS40OTZsMy4zMzMgMi41ODJjLjc4NC0yLjM1OCAyLjk4LTQuMTEyIDUuNTgtNC4xMTIgMS40NjIgMCAyLjc3OS41MDUgMy44MSAxLjQ5bDIuODYyLTIuODYyQzE0LjkyLjk4NiAxMi42NjEgMCA5Ljk3MiAweiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTgwMiAtNjAwKSB0cmFuc2xhdGUoNzMyIDE1MikgdHJhbnNsYXRlKDQwIDQ0MCkgdHJhbnNsYXRlKDMwIDgpIHRyYW5zbGF0ZSgyIDIpIi8+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=");
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
}

.provider#provider_facebook {
    background: var(--color-blue-1);
}

.provider#provider_facebook a.button .provider_icon {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNSAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTIuNSIgY3k9IjEyIiByPSIxMCIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTE0LjA2MjUgMjEuODc4N1YxNC45Njk1SDE2LjM5MjZMMTYuODM1OSAxMi4wNjEySDE0LjA2MjVWMTAuMTczOUMxNC4wNjI1IDkuMzc4MjEgMTQuNDQ5OSA4LjYwMjY2IDE1LjY5MjEgOC42MDI2NkgxNi45NTMxVjYuMTI2NjhDMTYuOTUzMSA2LjEyNjY4IDE1LjgwODcgNS45MzAxOCAxNC43MTQ2IDUuOTMwMThDMTIuNDMwNCA1LjkzMDE4IDEwLjkzNzUgNy4zMjMwMSAxMC45Mzc1IDkuODQ0NThWMTIuMDYxMkg4LjM5ODQ0VjE0Ljk2OTVIMTAuOTM3NVYyMS44Nzg3QzExLjQ0NjYgMjEuOTU4NiAxMS45Njg1IDIyLjAwMDEgMTIuNSAyMi4wMDAxQzEzLjAzMTUgMjIuMDAwMSAxMy41NTM0IDIxLjk1ODYgMTQuMDYyNSAyMS44Nzg3WiIgZmlsbD0iIzE4NzdGMiIvPgo8L3N2Zz4K");
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
}

.provider#provider_apple {
    background: var(--color-black);
}

.provider#provider_apple a.button .provider_icon {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNSAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuMzE2ODEgNC4xNTM4NUM4LjEwNTA1IDQuMTUzODUgOS4wOTMxMyAzLjYwNDU4IDkuNjgxNTMgMi44NzIyMkMxMC4yMTQ0IDIuMjA4NTIgMTAuNjAzIDEuMjgxNjMgMTAuNjAzIDAuMzU0NzM2QzEwLjYwMyAwLjIyODg2MSAxMC41OTE5IDAuMTAyOTg4IDEwLjU2OTcgMEM5LjY5MjYzIDAuMDM0MzI5MyA4LjYzNzk1IDAuNjA2NDg0IDguMDA1MTMgMS4zNzMxN0M3LjUwNTU0IDEuOTU2NzcgNy4wNTAzNiAyLjg3MjIyIDcuMDUwMzYgMy44MTA1NUM3LjA1MDM2IDMuOTQ3ODcgNy4wNzI1NyA0LjA4NTE5IDcuMDgzNjcgNC4xMzA5NkM3LjEzOTE4IDQuMTQyNCA3LjIyOCA0LjE1Mzg1IDcuMzE2ODEgNC4xNTM4NVpNNC41NDEzMiAxOEM1LjYxODIxIDE4IDYuMDk1NTkgMTcuMjU2MiA3LjQzODkzIDE3LjI1NjJDOC44MDQ0OCAxNy4yNTYyIDkuMTA0MjMgMTcuOTc3MSAxMC4zMDMyIDE3Ljk3NzFDMTEuNDgwMSAxNy45NzcxIDEyLjI2ODMgMTYuODU1NyAxMy4wMTIxIDE1Ljc1NzJDMTMuODQ0OCAxNC40OTg0IDE0LjE4ODkgMTMuMjYyNiAxNC4yMTExIDEzLjIwNTNDMTQuMTMzNCAxMy4xODI1IDExLjg3OTcgMTIuMjMyNyAxMS44Nzk3IDkuNTY2NDNDMTEuODc5NyA3LjI1NDkzIDEzLjY1NiA2LjIxMzYgMTMuNzU2IDYuMTMzNUMxMi41NzkxIDQuMzk0MTUgMTAuNzkxNyA0LjM0ODM4IDEwLjMwMzIgNC4zNDgzOEM4Ljk4MjExIDQuMzQ4MzggNy45MDUyMiA1LjE3MjI4IDcuMjI4IDUuMTcyMjhDNi40OTUyNyA1LjE3MjI4IDUuNTI5MzkgNC4zOTQxNSA0LjM4NTg5IDQuMzk0MTVDMi4yMDk5IDQuMzk0MTUgMC4wMDA2MTAzNTIgNi4yNDc5MyAwLjAwMDYxMDM1MiA5Ljc0OTUyQzAuMDAwNjEwMzUyIDExLjkyMzcgMC44MjIxNTYgMTQuMjIzOCAxLjgzMjQ0IDE1LjcxMTRDMi42OTgzOSAxNi45NzAxIDMuNDUzMzIgMTggNC41NDEzMiAxOFoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=");
    background-repeat: no-repeat;
    width: 18px;
    height: 22px;
}