/* Common styles for all Azure B2C v2 templates */ /* Font faces */ @font-face { font-family: "EF Circular"; src: url("https://cdn.ef.studio/fonts/Light.woff"), url('https://cdn.ef.studio/fonts/Light.woff2'); font-weight: 300; } @font-face { font-family: "EF Circular"; src: url("https://cdn.ef.studio/fonts/LightItalic.woff"), url('https://cdn.ef.studio/fonts/LightItalic.woff2'); font-weight: 300; font-style: italic; } @font-face { font-family: "EF Circular"; src: url("https://cdn.ef.studio/fonts/Book.woff"), url('https://cdn.ef.studio/fonts/Book.woff2'); font-weight: normal; } @font-face { font-family: "EF Circular"; src: url("https://cdn.ef.studio/fonts/BookItalic.woff"), url('https://cdn.ef.studio/fonts/BookItalic.woff2'); font-weight: normal; font-style: italic; } @font-face { font-family: "EF Circular"; src: url("https://cdn.ef.studio/fonts/Medium.woff"), url('https://cdn.ef.studio/fonts/Medium.woff2'); font-weight: 500; } @font-face { font-family: "EF Circular"; src: url("https://cdn.ef.studio/fonts/MediumItalic.woff"), url('https://cdn.ef.studio/fonts/MediumItalic.woff2'); font-weight: 500; font-style: italic; } @font-face { font-family: "EF Circular"; src: url("https://cdn.ef.studio/fonts/Bold.woff"), url('https://cdn.ef.studio/fonts/Bold.woff2'); font-weight: bold; } @font-face { font-family: "EF Circular"; src: url("https://cdn.ef.studio/fonts/BoldItalic.woff"), url('https://cdn.ef.studio/fonts/BoldItalic.woff2'); font-weight: bold; font-style: italic; } @font-face { font-family: "EF Circular"; src: url("https://cdn.ef.studio/fonts/Black.woff"), url('https://cdn.ef.studio/fonts/Black.woff2'); font-weight: 900; } /* Global reset */ * { box-sizing: border-box; } /* Body and HTML */ body { width: 100%; height: 100%; margin: 0; background-color: #6560e4; display: flex; justify-content: center; text-align: center; font-family: 'EF Circular', sans-serif; color: #191919; } /* List styles */ ul { list-style-type: none; padding: 0; } /* Input styles */ input { width: 100%; height: 40px; margin-top: 4px; margin-bottom: 4px; padding: 12px 16px; border-radius: 4px; border: solid 1px #949494; outline: 0; } input:focus { border-color: #413bdd; } /* Button styles */ button { padding: 12px 24px; border-radius: 24px; background-color: #6560e4; font-size: 16px; font-weight: 700; text-align: center; color: white; border: 0; cursor: pointer; transition: background-color 0.3s; } button:focus, button:hover { background-color: #413bdd; outline: 0; } button:disabled { color: #dadada; background-color: #949494; cursor: default; } button:focus:not(:disabled):not([aria-disabled='true']), button:hover:not(:disabled):not([aria-disabled='true']) { background-color: #413bdd; outline: 0; } button#emailVerificationControl_but_send_new_code:focus:not(:disabled):not([aria-disabled='true']), button#cancel:focus:not(:disabled):not([aria-disabled='true']), button#cancel:hover:not(:disabled):not([aria-disabled='true']) { outline: 0; } button:disabled, button[aria-disabled='true'] { color: #dadada; background-color: #949494; cursor: default; } /* Headings */ h1 { font-size: 28px; font-weight: bold; line-height: 1.21; margin: 0; margin-bottom: 16px; } /* Links */ a, a:visited, a:active, a:hover { color: #6560e4; text-decoration: underline; font-size: 14px; font-weight: 700; cursor: pointer; } /* Labels */ label { font-size: 14px; font-weight: 700; } /* Container layout */ #container { width: 466px; height: 100%; display: flex; flex-direction: column; } #logo_container { height: 50%; display: flex; justify-content: center; align-items: flex-end; margin-bottom: 24px; } #logo { width: 100px; height: 25px; object-fit: contain; margin-top: 95px; } /* Card styles */ #card { width: 466px; border-radius: 8px; background-color: #ffffff; padding: 24px; z-index: 1000; line-height: 1.7; } /* API container */ #api { text-align: left; font-size: 12px !important; display: flex; flex-direction: column-reverse; } /* Footer */ #footer { margin-bottom: 20px; height: 50%; display: flex; justify-content: center; align-items: flex-end; font-size: 12px; line-height: 2; color: #ffffff; } /* Common element visibility */ .intro, .helpLink { display: none; } .divider { visibility: hidden; font-size: 2px; } /* Error styles */ .error { color: #d1334a; } /* HR styles */ #bottomHr { height: 1px; border-width: 0; background-color: #dadada; margin: 10px 0 10px; } /* EF Staff Account button */ #EFStaffAccount { background-color: transparent; box-shadow: none; color: #ffffff; border: 1px solid #ffffff; font-size: 12px; } /* Entry items */ .entry-item { height: 70px; margin: 24px 0; position: relative; } /* Social button */ .social { position: absolute; top: 30px; right: 30px; } /* Create account text */ .create { margin: 10px 14px 0; font-size: 14px; line-height: 1.57; text-align: center; color: #909aa3; }