.hiko-dialog { cursor: pointer; } .hikodialog { padding: 1rem 3rem; background: white; max-width: 400px; padding-top: 2rem; border-radius: 30px; border: 0; box-shadow: 0 5px 30px 0 rgb(0 0 0 / 10%); animation: fadeIn 0.5s ease both; &::backdrop { animation: fadeIn 0.5s ease both; background: rgb(255 255 255 / 40%); z-index: 2; backdrop-filter: blur(1px); } .x { border: none; background: none; position: absolute; top: 15px; right: 10px; transition: ease filter, transform 0.3s; cursor: pointer; transform-origin: center; &:hover { transform: scale(1.1); } } h2 { text-align: center; font-weight: 600; font-size: 2rem; padding-bottom: 1rem; } h3 { text-align: left; font-weight: 600; font-size: 1.5rem; } p { text-align: left; font-size: 1.5rem; } .back { text-align: left; font-weight: 600; font-size: 1.5rem; cursor: pointer; } .center { display: block; margin-left: auto; margin-right: auto; width: 50%; } } .hiko-dialog-wizard { display: flex; flex-direction: column; input { text-align: left; padding: 1.5rem; margin: var(--inputs-border-width); } label { font-size: 1.6rem; margin-bottom: 0; line-height: 1.5; } button { margin: 1rem 0 1rem; display: inline-flex; justify-content: center; align-items: center; border: 0; padding: 0 3rem; cursor: pointer; font: inherit; font-size: 1.5rem; text-decoration: none; color: rgb(var(--color-button-text)); transition: box-shadow var(--duration-short) ease; -webkit-appearance: none; appearance: none; background-color: rgba(var(--color-button), var(--alpha-button-background)); } } .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: 50%; 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; } } @-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); } }