.hiko-dialog { cursor: pointer; } .hikodialog { padding: 10px 30px; background: white; max-width: 480px; padding-top: 20px; border-radius: 30px; border: 0; box-shadow: 0 5px 30px 0 #00000080; animation: fadeIn 0.5s ease both; &::backdrop { animation: fadeIn 0.5s ease both; background: #00000080; z-index: 1; backdrop-filter: blur(1px); } } .hikodialog .start { height: 14px } .hikodialog .x { border: none; background: none; position: absolute; top: 15px; right: 15px; transition: ease filter, transform 0.3s; cursor: pointer; transform-origin: center; } .hikodialog .dia-title { font-size: 28px; font-weight: 500; color: #333333; text-align: center; font-family: system-ui; height: 38px; } .hikodialog .dia-subtitle { font-size: 18px; font-weight: 400; font-style: normal; text-align: center; font-family: system-ui; } .hikodialog .dia-img { text-align: center; img { height: 52px; } } .hikodialog .iti { width: 100%; } @media screen and (max-width: 510px) { .hikodialog { margin: 15px 15px 0 15px; } } .hiko-passwordless { --h-inputs-border-width: 1px; --h-duration-short: .1s; --h-color-background: 255, 255, 255; --h-color-foreground: 18, 18, 18; --h-font-body-family: Assistant, sans-serif; --h-font-body-style: normal; --h-font-body-weight: 400; --h-inputs-shadow-horizontal-offset: 0px; --h-inputs-shadow-vertical-offset: 4px; --h-inputs-shadow-blur-radius: 5px; --h-color-shadow: 18, 18, 18; --h-inputs-shadow-opacity: 0.0; --h-inputs-border-opacity: 0.55; --h-buttons-shadow-horizontal-offset: 0px; --h-buttons-shadow-vertical-offset: 4px; --h-buttons-shadow-blur-radius: 5px; --h-buttons-shadow-opacity: 0.0; --h-buttons-shadow-visible: 0; --h-buttons-border-offset: 0px; --h-buttons-border-width: 1px; --h-buttons-border-opacity: 1.0; --h-color-button-text: 255, 255, 255; --h-color-button: 18, 18, 18; --h-alpha-button-background: 1; } .hiko-passwordless p { text-align: left; font-size: 15px; } .hiko-passwordless .message-back { font-size: 14px; font-weight: 600; font-family: system-ui; text-align: left; cursor: pointer; padding-bottom: 12px; } .hiko-passwordless .message-title { font-size: 26px; font-weight: 600; font-family: system-ui; text-align: left; } .hiko-passwordless .message-body { font-size: 16px; color: #606060; font-family: system-ui; line-height: normal; text-align: left; } .hiko-passwordless .message-resend { font-size: 15px; font-weight: 500; font-family: system-ui; } .hiko-passwordless label { font-size: 15px; margin-bottom: 5px; line-height: 1.5; float: left; } .hiko-passwordless .fieldx { position: relative; width: 100%; display: flex; transition: box-shadow var(--h-duration-short) ease; margin: 10px 0 10px 0; } .hiko-passwordless .fieldx__input, .hiko-passwordless .fieldx input { flex-grow: 1; text-align: left; padding: 15px; margin: var(--h-inputs-border-width); transition: box-shadow var(--h-duration-short) ease; } .hiko-passwordless .fieldx__input { -webkit-appearance: none; appearance: none; background-color: rgb(var(--h-color-background)); color: rgb(var(--h-color-foreground)); font-family: var(--h-font-body-family); font-style: var(--h-font-body-style); font-weight: var(--h-font-body-weight); font-size: 15px; width: 100%; box-sizing: border-box; transition: box-shadow var(--h-duration-short) ease; border-radius: 15px; height: 49px; min-height: calc(var(--h-inputs-border-width) * 2); min-width: calc(70px + (var(--h-inputs-border-width) * 2)); position: relative; border: 0; } .hiko-passwordless .fieldx:before { pointer-events: none; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 15px; box-shadow: var(--h-inputs-shadow-horizontal-offset) var(--h-inputs-shadow-vertical-offset) var(--h-inputs-shadow-blur-radius) rgba(var(--h-color-shadow), var(--h-inputs-shadow-opacity)); z-index: -1; } .hiko-passwordless .fieldx:after { pointer-events: none; content: ''; position: absolute; top: var(--h-inputs-border-width); right: var(--h-inputs-border-width); bottom: var(--h-inputs-border-width); left: var(--h-inputs-border-width); border: 1px solid transparent; border-radius: 15px; box-shadow: 0 0 0 var(--h-inputs-border-width) rgba(var(--h-color-foreground), var(--h-inputs-border-opacity)); transition: box-shadow var(--h-duration-short) ease; z-index: 1; } .hiko-passwordless .fieldx label { font-size: 15px; left: calc(var(--h-inputs-border-width) + 20px); top: calc(10px + var(--h-inputs-border-width)); margin-bottom: 0; pointer-events: none; position: absolute; transition: top var(--h-duration-short) ease, font-size var(--h-duration-short) ease; color: grey; letter-spacing: 1px; line-height: 1.5; } .hiko-passwordless .fieldx:hover.fieldx:after { box-shadow: 0 0 0 calc(1px + var(--h-inputs-border-width)) rgba(var(--h-color-foreground), var(--h-inputs-border-opacity)); outline: 0; border-radius: 15px; } .hiko-passwordless .fieldx__input:focus-visible { box-shadow: 0 0 0 calc(1px + var(--h-inputs-border-width)) rgba(var(--h-color-foreground)); outline: 0; border-radius: 15px; } .hiko-passwordless .fieldx__input:focus { box-shadow: 0 0 0 calc(1px + var(--h-inputs-border-width)) rgba(var(--h-color-foreground)); outline: 0; border-radius: 15px; } .hiko-passwordless .fieldx__input:focus~.field__label, .hiko-passwordless .fieldx__input:not(:placeholder-shown)~.field__label, .hiko-passwordless .fieldx__input:-webkit-autofill~.field__label, .hiko-passwordless .fieldx__input:focus, .hiko-passwordless .fieldx__input:not(:placeholder-shown), .hiko-passwordless .fieldx__input:-webkit-autofill, .hiko-passwordless .fieldx input:focus, .hiko-passwordless .fieldx input:not(:placeholder-shown), .hiko-passwordless .fieldx input:-webkit-autofill { padding: 22px 15px 8px 20px; margin: var(--h-inputs-border-width); } .hiko-passwordless .fieldx__input::-webkit-search-cancel-button, .hiko-passwordless .fieldx input::-webkit-search-cancel-button { display: none; } .hiko-passwordless .fieldx__input::placeholder, .hiko-passwordless .fieldx input::placeholder { opacity: 0; } .hiko-passwordless .fieldx__input:focus~.fieldx__label, .hiko-passwordless .fieldx__input:not(:placeholder-shown)~.fieldx__label, .hiko-passwordless .fieldx__input:-webkit-autofill~.fieldx__label { font-size: 10px; top: calc(var(--h-inputs-border-width) + 5px); left: calc(var(--h-inputs-border-width) + 20px); letter-spacing: 0.4px; } .hiko-passwordless .fieldx_dropdown { font-size: 15px !important; top: calc(var(--h-inputs-border-width) + 2px) !important; left: calc(var(--h-inputs-border-width) + 20px) !important; letter-spacing: 0.4px !important; } .hiko-passwordless .fieldx__button { align-items: center; background-color: transparent; border: 0; color: currentColor; cursor: pointer; display: flex; height: 44px; justify-content: center; overflow: hidden; padding: 0; position: absolute; right: 0; top: 0; width: 44px; } .hiko-passwordless .fieldx__button>svg { height: 25px; width: 25px; } .hiko-passwordless .fieldx__input:-webkit-autofill~.fieldx__button, .hiko-passwordless .fieldx__input:-webkit-autofill~.fieldx__label, .hiko-passwordless .fieldx input:-webkit-autofill~label { color: rgb(0, 0, 0); } .hiko-passwordless .buttonx { --h-shadow-horizontal-offset: var(--h-buttons-shadow-horizontal-offset); --h-shadow-vertical-offset: var(--h-buttons-shadow-vertical-offset); --h-shadow-blur-radius: var(--h-buttons-shadow-blur-radius); --h-shadow-opacity: var(--h-buttons-shadow-opacity); --h-shadow-visible: var(--h-buttons-shadow-visible); --h-border-offset: var(--h-buttons-border-offset); /* reduce radius edge artifacts */ --h-border-opacity: calc(1 - var(--h-buttons-border-opacity)); border-radius: 30px; position: relative; min-width: calc(120px + var(--h-buttons-border-width) * 2); min-height: calc(45px + var(--h-buttons-border-width) * 2); display: inline-flex; justify-content: center; align-items: center; width: 100%; border: 0; margin: 10px 0 10px; cursor: pointer; font: inherit; font-size: 15px; font-weight: 400; font-family: system-ui; text-decoration: none; color: rgb(var(--h-color-button-text)); transition: box-shadow var(--h-duration-short) ease; -webkit-appearance: none; appearance: none; background-color: rgba(var(--h-color-button), var(--h-alpha-button-background)); } .hiko-passwordless .buttonx:hover::after { --border-offset: 1.3px; box-shadow: 0 0 0 calc(var(--h-buttons-border-width) + var(--border-offset)) rgba(var(--h-color-button-text), var(--h-border-opacity)), 0 0 0 calc(var(--h-buttons-border-width) + 1px) rgba(var(--h-color-button), var(--h-alpha-button-background)); } .hiko-dialog-wizard { display: flex; flex-direction: column; } .hiko-custom_fields { display: flex; flex-direction: row; } .hikoloading { position: absolute; top: 0; left: 0; z-index: 100; width: 100vw; height: 100vh; background-color: rgba(192, 192, 192, 0.5); background-repeat: no-repeat; background-position: center; .spinner { position: fixed; top: 50%; left: calc(50% - 25px); margin: auto; width: 50px; height: 50px; -webkit-animation-name: spin; -webkit-animation-duration: 2000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: spin; -moz-animation-duration: 2000ms; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: spin; -ms-animation-duration: 2000ms; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; animation-name: spin; animation-duration: 2000ms; animation-iteration-count: infinite; animation-timing-function: linear; /* @media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { left: -webkit-calc(50% - 25px); } @-moz-document url-prefix() { -moz-calc(50% - 25px); } */ /* left: -webkit-calc(50% - 25px); */ /* left: -moz-calc(50% - 25px); */ } } .button--loading::after { content: ""; position: absolute; width: 16px; height: 16px; top: 0; left: 0; right: 0; bottom: 0; margin: auto; border: 4px solid transparent; border-top-color: #ffffff; border-radius: 50%; animation: spin 1s ease infinite; } @-ms-keyframes spin { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); } } @-moz-keyframes spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } #hikotoast { visibility: hidden; /* Hidden by default. Visible on click */ min-width: 250px; /* Set a default minimum width */ margin-left: -125px; /* Divide value of min-width by 2 */ background-color: #333; /* Black background color */ color: #fff; /* White text color */ text-align: center; /* Centered text */ border-radius: 2px; /* Rounded borders */ padding: 16px; /* Padding */ position: fixed; /* Sit on top of the screen */ z-index: 1; /* Add a z-index if needed */ left: 50%; /* Center the snackbar */ bottom: 30px; /* 30px from the bottom */ } /* Show the snackbar when clicking on a button (class added with JavaScript) */ #hikotoast.show { visibility: visible; /* Show the snackbar */ /* Add animation: Take 0.5 seconds to fade in and out the snackbar. However, delay the fade out process for 2.5 seconds */ -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; animation: fadein 0.5s, fadeout 0.5s 2.5s; } /* Animations to fade the snackbar in and out */ @-webkit-keyframes fadein { from { bottom: 0; opacity: 0; } to { bottom: 30px; opacity: 1; } } @keyframes fadein { from { bottom: 0; opacity: 0; } to { bottom: 30px; opacity: 1; } } @-webkit-keyframes fadeout { from { bottom: 30px; opacity: 1; } to { bottom: 0; opacity: 0; } } @keyframes fadeout { from { bottom: 30px; opacity: 1; } to { bottom: 0; opacity: 0; } }