@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url("./Inter-Medium.woff2") format("woff2"), url("../fonts/Inter-Medium.woff") format("woff"); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url("./Inter-SemiBold.woff2") format("woff2"), url("./Inter-SemiBoldItalic.woff") format("woff"); }

html, body, #spfi-page { background-color: #ebecf0; color: #171717; font-family: 'Inter'; height: 100%; margin: 0; padding: 0; width: 100%; }
#spfi-page { display: flex; justify-content: center; align-items: center; }
h1 { font-weight: 600; margin: 0; padding: 0; }

#spfi-login-wrapper { height: 504px; position: relative; width: 356px; }
#spfi-login { background-color: #fff; background-image: url(./logo.svg); background-position: 29px 27px; background-repeat: no-repeat; bottom: 0; box-shadow: 0 0 15px rgba(0, 0, 0, .07); clip-path: inset(0 -15px -15px -15px); left: 0; position: absolute; right: 0; top: 36px; z-index: 1; }
#spfi-login-1, #spfi-login-3, #spfi-login-4 { background-color: #fff; box-shadow: 0 0 15px rgba(0, 0, 0, .07); position: absolute; width: 89px; }
#spfi-login-1 { clip-path: inset(-15px -15px 0 -15px); height: 12px; left: 0; top: 25px; z-index: 2; }
#spfi-login-3 { clip-path: inset(-15px 0 0 -15px); height: 22px; left: 178px; top: 15px; z-index: 3; width: 90px; /*workaround for zoom rounding*/ }
#spfi-login-4 { clip-path: inset(-15px -15px 0 -15px); height: 37px; left: 267px; top: 0; z-index: 2; }
#spfi-login h1 { bottom: 115px; font-size: 36px; left: 62px; line-height: 48px; position: absolute; }

#spfi-login-link { background-color: #ff0508; border: 1px solid #ff0508; border-radius: 4px; color: #ffffff; display: block; font-size: 20px; font-weight: 500; line-height: 24px; outline: 0; padding: 11px 0; position: absolute; text-align: center; text-decoration: none; }
#spfi-login-link:active { background-color: #9e0013; border-color: #9e0013; }
#spfi-login-link:focus { background-color: #ff0508; border-color: #ff0508; }
#spfi-login-link:hover { background-color: #c31d38; border-color: #c31d38; }
#spfi-login-link:focus::before { border: 2px solid #24a249; border-radius: 4px; bottom: -4px; content: ""; display: block; left: -4px; position: absolute; right: -4px; top: -4px; z-index: 1; }
#spfi-login-link:active::before { display: none; }
#spfi-login #spfi-login-link { bottom: 44px; left: 48px; width: 260px; }

#spfi-logout-wrapper { height: 464px; position: relative; width: 884px; }
#spfi-logout { background-color: #fff; background-image: url(./logo.svg); background-position: 43px 51px; background-repeat: no-repeat; bottom: 0; box-shadow: 0 0 15px rgba(0, 0, 0, .07); clip-path: inset(0 -15px -15px -15px); left: 0; position: absolute; right: 0; top: 40px; z-index: 1; }
#spfi-logout-1, #spfi-logout-3, #spfi-logout-4 { background-color: #fff; box-shadow: 0 0 15px rgba(0, 0, 0, .07); position: absolute; width: 143px; }
#spfi-logout-1 { clip-path: inset(-15px -15px 0 -15px); height: 14px; right: 429px; top: 27px; z-index: 2; }
#spfi-logout-3 { clip-path: inset(-15px 0 0 -15px); height: 26px; right: 142px; top: 15px; z-index: 3; width: 144px; /*workaround for zoom rounding*/ }
#spfi-logout-4 { clip-path: inset(-15px -15px 0 -15px); height: 41px; right: 0; top: 0; z-index: 2; }
#spfi-logout h1 { bottom: 115px; font-size: 32px; left: 62px; line-height: 44px; position: absolute; }
#spfi-logout-separator { background-color: #efefef; bottom: 62px; height: 293px; left: 310px; position: absolute; width: 2px; }
#spfi-logout-text { font-size: 20px; font-weight: 500; left: 398px; line-height: 30px; position: absolute; top: 177px; }
#spfi-logout #spfi-login-link { bottom: 62px; right: 174px; width: 312px; }