/*  general  */
html { box-sizing: border-box; font-size: 62.5%; height: 100vh; background:#666; }
body { font-size: 1.6rem; }
[v-cloak]{display:none!important}
span { color: #990509; }
h1 { font-size: 250%; }
h2 { font-size: 125%; margin-bottom: 1.5rem; }
p { font-size: .875em; }
#app { background: #FFF; position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; }
.forms { padding: 20px 0; border-top:1px solid #DDD; margin:20px 0; }

/*  screens  */
.screen { position:relative; width: 100%; height:100%; padding:6rem 2rem; background-color: #EEE; overflow: auto; margin: 0 20px 20px 0; opacity:0.25; display: none; vertical-align: top; pointer-events:none; }
.screen--current { opacity:1;  pointer-events:auto; display: inline-block; }

/*  forms  */
.form-field { margin: 0 0 1rem; }
label { font-family: sans-serif; margin: 0 0 .3rem; }
.standard-input { background: #F5F5F5; border: .1rem solid #CCC; padding: 1rem; width: 100%; border-radius: .3rem; font-size: 1.5rem; font-family: sans-serif; box-shadow: none;  }
.error-message { background: #F04576; width:100%; padding: .5rem 1rem; color: #fff; margin: 0 0 1rem; border-radius: .3rem; display: table; }
.checkbox { position:relative; margin:0 0 3rem }
.checkbox__checkbox { position:absolute; opacity:0 }
.checkbox__label { color:#222; font-size:1.4rem; padding:0.4rem 0 0 4.5rem; display:block }
.checkbox__label:before { display:block; content:""; position:absolute; width:3rem; height:3rem; border:.1rem solid #CCC; left:0; top:0; border-radius:.2rem }
.checkbox__checkbox:checked + .checkbox__label:after { display:block; content:""; position:absolute; width:3rem; height:3rem; background:#888 url(../images/check.svg) no-repeat 50%; left:0; top:0; color:#fff; border-radius:.2rem }
form .submitting { background: rgba(0,0,0,0.5); display:none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; color: #FFF; }
form .submitting p { position: absolute; top: 85%; width: 100%; font-size: 125%; }
form.form--submitting .submitting { display:block; }

/*  account  */
.account-links { margin: 0 -4rem 2rem; }
.account-link { display: block; background: #FFF; margin: 0 0 .1rem; position: relative; padding: 0 4rem; height: 5.6rem; line-height: 5.6rem; }
.account-link__icon { position: absolute; right: 4rem; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: .5rem; }

/*  feedback  */
.feedback { padding:2rem; font-size:1.6rem; background:#888; color:#fff; text-align:center; box-shadow:0 0 1rem rgba(0,0,0,.3); z-index:11; position:fixed; left:0; top:-10rem; width:100%; -webkit-transition:top .2s ease;transition:top .2s ease}
.feedback.active { top:0;-webkit-transition-duration:.4s; transition-duration:.4s }
.feedback p { margin:0 }

/*  buttons  */
.button {width: 100%; height: 5.2rem; display: inline-block; line-height: 5.2rem; border-radius: 0.6rem; letter-spacing: .2rem; background: #888; color: #FFF; font-weight: bold; text-transform: uppercase; border: .1rem solid #888; padding: 0 3rem; text-align:center; }
.icon-button { height: 4rem; width: 4rem; align-items: center; }
/* .back-button { position: absolute; left: 1.6rem; top: .5rem; z-index: 3; } */
.back-button__icon { width: .9rem; height: 1.8rem; }
.modal .back-button { left: 0; }
.close-button { position: absolute; right: 0; top: 0; }
.close-button__icon { width: 3.2rem; height: 3.2rem; }
.modal .close-button { right: 0; top: .4rem; z-index: 3; }

/*  helpers  */
.block { display: block; }
.centre { margin-left: auto; margin-right: auto; }
.margin-b-0 { margin-bottom: 0; }
.margin-b-05 { margin-bottom: 0.5rem; }
.margin-b-10 { margin-bottom: 1rem; }
.margin-b-15 { margin-bottom: 1.5rem; }
.margin-b-20 { margin-bottom: 2rem; }
.margin-b-25 { margin-bottom: 2.5rem; }
.margin-b-30 { margin-bottom: 3rem; }
.margin-b-35 { margin-bottom: 3.5rem; }
.max-width-form { max-width: 34rem; width: 100%; }

/*  modals  */
.modal { position: fixed; left: -550%; top: 50%; box-shadow: rgba(0, 0, 0, 0.25) 0px 0.4rem 0.4rem; z-index: 1001; transform: translate(-50%, -50%); width: 80%; height: 80%; opacity: 0; background: #FFF; border-radius: 0.5rem; padding: 4rem 2rem; background-repeat: no-repeat; overflow: hidden; text-align:center; }
.modal--visible { opacity: 1; left: 50%; z-index: 100000 !important; display: block; pointer-events: auto; }
.modal-background { background: rgba(0,0,0,.7); position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 1000; pointer-events: none; opacity: 0; -webkit-transition: opacity .15s ease; transition: opacity .15s ease; }
.modal-background--visible { opacity: 1; pointer-events: auto; }
.modal--full-screen { width: 101%; height: 101%; }
.modal-content { overflow: auto; height: calc(100vh - 10.5rem); }

.modal--visible.modal-level-1 { z-index: 1101 !important; }
.modal--visible.modal-level-2 { z-index: 1201 !important; }
.modal-background--visible.modal-level-1 { z-index: 1100 !important; }
.modal-background--visible.modal-level-2 { z-index: 1200 !important; }

/*  navigation  */
.app-navigation { position: absolute; left: 0; right: 0; bottom: 0; background: #888; display: none!important; color: #fff; height: 7rem; font-size: 1.1rem; z-index: 10; box-shadow: 0 -2px 24px rgba(0,0,0,.1); padding-bottom: env(safe-area-inset-bottom); }
.app-navigation--visible { display: flex!important; }
.app-navigation__link { -webkit-box-flex: 1; flex: 1; color: inherit; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; opacity: .5; -webkit-transition: .3s ease; transition: .3s ease; padding: .7rem 0 0; outline: 0; }
.app-navigation__link.on { opacity: 1; }
.app-navigation__icon { fill: currentColor; margin: 0 0 .5rem; }
.app-navigation__indicator { position: absolute; width: 100%; left: 0; top: .8rem; height: .4rem; pointer-events: none; -webkit-transition: left .3s ease; transition: left .3s ease; }
.app-navigation__indicator:after { position: absolute; content: ""; display: block; background: #fff; height: .4rem; width: .4rem; border-radius: .2rem; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }

/*  wysiwyg  */
.wysiwyg p { margin:0.5rem 0; }

/*  responsive  */
/* @media only screen and (min-height: 670px) and (min-width: 600px) {
    #app { left: 50%; right: auto; top: 50%; bottom: auto; width: 60rem; height: 67rem; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); overflow: hidden; box-shadow: 0 0 2rem rgba(0,0,0,.2); border-radius: 1rem; }
    .modal { max-width: 60rem; max-height: 67rem; border-radius: 1rem; }
} */