@charset "utf-8";

@import url('font.css');
@import url('reset.css');

html,
body {display: block; height: 100vh; font-size: 16px; line-height: 1.5; color: rgb(34, 34, 34); letter-spacing: -1px;}

/* LAYOUT */
.container {display: flex; flex-direction: column; min-height: 100%;}

/* LAYOUT - MAIN */
.main {flex-grow: 1; flex-shrink: 1; flex-basis: auto; display: flex; flex-direction: column; transition: padding-top 200ms ease-in-out;}
.section {flex-grow: 1; flex-shrink: 1; flex-basis: auto; display: flex; flex-direction: column; position: relative; z-index: 10; background-color: rgb(255, 255, 255);}

/* INSET */
.inset {padding: 0 24px;}
.inset::before {content: ''; overflow: hidden; display: block; clear: both;}
.inset.full {flex-grow: 1; flex-shrink: 1; flex-basis: auto;}
.inset.middle {display: flex; flex-direction: column; justify-content: center;}

/* TEXT */
.text {font-size: 16px; color: rgb(34, 34, 34); word-break: keep-all;}
.text.xl {font-size: 20px;}
.text.bold {font-weight: bold;}

/* BUTTON */
.button-group {display: block; margin-top: 72px;}
.button-group.flex {display: flex;}
.button-group.center {text-align: center;}
.button {flex-grow: 0; flex-shrink: 1; flex-basis: 100%; display: inline-flex; justify-content: center; align-items: center; padding: 0 40px; height: 52px; border-radius: 10px; background-color: rgb(169, 15, 57); vertical-align: middle; font-weight: bold; font-size: 16px; color: rgb(255, 255, 255); white-space: nowrap;}
.button-label {font-size: inherit; color: inherit; white-space: nowrap;}

/* RESULT */
.result {text-align: center;}
.result.invalid {padding-top: 100px; background-image: url("../images/common/icn_invalid.svg"); background-repeat: no-repeat; background-position: 50% 0; background-size: 100px 100px;}
.result.invalid > :first-child {margin-top: 16px;}
.result .text + .text {margin-top: 16px;}
.result .round.message {margin-top: 32px;}