/****** Elad Shechter's RESET *******/
/*** box sizing border-box for all elements ***/
*,
*::before,
*::after{box-sizing:border-box;}a{text-decoration:none; color:inherit; cursor:pointer;}
button{background-color:transparent; color:inherit; border-width:0; padding:0; cursor:pointer;}
figure{margin:0;}
input::-moz-focus-inner {border:0; padding:0; margin:0;}
ul, ol, dd{margin:0; padding:0; list-style:none;}
h1, h2, h3, h4, h5, h6{margin:0; font-size:inherit; font-weight:inherit;}
p{margin:0;}
cite {font-style:normal;}
fieldset{border-width:0; padding:0; margin:0;}

/* Define the "system" font family */
@font-face {
    font-family: system;
    font-style: normal;
    font-weight: 300;
    src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma");
}

#placeholder-logo {
    width: 80%;
    max-width: 500px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

:root {
    --bar-height: 56px;
    --font-body: 'system';
    --color-error: red;
    --color-backdrop: rgba(0, 0, 0, 0.8);
    --color-primary: #00482c;
    --color-primary-1: rgba(0, 121, 74, 0.9);
}




a {
    text-decoration: underline;
    color: green;
}


html {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    min-height: 100%;
    padding: 0;
    font-family: var(--font-body);
}

.mqr-app-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-shadow: 0 0 10px 2px black;
    background-color: white;
    z-index: 2;
    transition: linear all 100ms;
}


[data-path="/welcome"] .mqr-app-bar {
    background-color: transparent;
    box-shadow: none;
}

.has-header {
    padding-top: var(--bar-height);
}

.mqr-icon {
    width: 25px;
    height: 25px;
    color: inherit;
}

.mqr-page {
    max-width: 800px;
    margin: auto;
}

.mqr-btn {
    padding: .5rem .8rem;
    font-size: 1em;
    border: solid 1px;
}

.form-field {
    display: block;
    margin: 1em 0;
}


.form-label {
    display: block;
}

.form-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fff;
    background-image: none;
    background-image: none;
    border: .05rem solid #bcc3ce;
    border-radius: .1rem;
    color: #3b4351;
    display: block;
    font-size: 1rem;
    /* font-size: .8rem; */
    /* height: 1.8rem; */
    line-height: 1.2rem;
    max-width: 100%;
    outline: 0;
    padding: .25rem .4rem;
    /* padding: .5em; */
    position: relative;
    transition: background .2s,border .2s,box-shadow .2s,color .2s;
    width: 100%;
}

.form-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 2px 1px var(--color-primary-1);
}

.form-label {
    padding: .3em 0;
}

.form-field {
    padding: .5em .3em;
}

.form-input.has-error {
    border-color: var(--color-error);
    box-shadow: 0 0 2px 2px #ffc2c2;
}



.form-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* background: #fff;  */
    border: .05rem solid #bcc3ce;
    border-radius: .1rem;
    color: inherit;

    outline: none;

    vertical-align: middle;
    width: 100%;

    background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;
    padding-right: 1.2rem;

    font-size: 1rem;
    /* font-size: .8rem; */
    /* height: 1.8rem; */
    line-height: 1.2rem;
    max-width: 100%;
    outline: 0;
    /* padding: .25rem .4rem; */
    padding: .25rem .4em;
    position: relative;
  }
  
  .form-select:focus {
    border-color: var(--color-primary); 
    box-shadow: 0 0 2px 1px var(--color-primary-1);
  }



.form-canvas {
    border: .05rem solid #bcc3ce;
    max-width: 100%;
    position: relative;
    width: 100%;
    height: 200px;
}

.form-canvas.has-error {
    border-color: var(--color-error);
    box-shadow: 0 0 2px 2px #ffc2c2;
}

.mqr-header {
    display: flex;
    align-items: center;
    height: var(--bar-height);
    padding: 16px;
}


.mqr-header__title {
    flex-grow: 1;
}


.form-checkbox.has-error {
    border: solid 1px var(--color-error);
}

.mqr-accordion.is-open {
    border: solid 1px var(--color-primary);
    padding: .5em;
}

.mqr-accordion.is-open .mqr-accordion__header {
    border: none;
    font-weight: bold;
    font-size: 1.2em;

}

.mqr-accordion__header {
    text-align: left;
    width: 100%;
    font-size: 1rem;
    border-bottom: solid 1px lightgrey;
    transition: linear all 100ms;
    display: flex;
    outline: none;
    /* font-size: 1.3rem;
    font-weight: bold; */
    /* padding:  .5rem; */
}

.mqr-accordion__contents {
    /* padding: .5rem; */
}



/* Select w/ icon .... */
.mqr-select-btn {
    display: flex;
    align-items: center;
}

.mqr-select-btn select {
    display: inline-block;
    font-size: 16px;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    background-color: transparent;
    outline: none;
    color: inherit;
    /* padding: .6em 1.4em .5em .8em;  */
    line-height: 1.3em;
    /* visibility: hidden; */
    order: 2;
    /* width: 100%;
    max-width: 100%; */
}


.mqr-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--color-backdrop);
    padding: 2em;
    z-index: 15;

}

.mqr-modal {
    width: 100%;
    height: 100%;
    max-width: 600px;
    background-color: white;
    margin: auto;
    display: flex;
    flex-direction: column;
    transition: linear all .5s;
}

.mqr-modal__content {
    flex-grow: 1;
    overflow: auto;
    padding: 16px;
}

.mqr-modal__footer {
    height: 56px;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    padding: 16px;
    box-shadow: 0 0 7px 1px black;
}

.mqr-logo {
    max-width: 400px;
    display: block;
    margin: 1em auto;
}

.main-btn {
    padding: 1.2rem 2rem;
    font-size: 1.2rem;
    text-transform: uppercase;
    margin: auto;
    display: block;
    color: var(--color-primary);
    outline: none;
}

.main-btn:active {
    background-color: var(--color-primary);
    color: white;
}


  /* .form-select:not([multiple]):not([size]) {
    
  }
   */