html {
    height: 100%;
}

body {
    color: #888;
    font-family: 'Open Sans', sans-serif;
    font-size: 19px;
    height: 100%;
    line-height: 1.2;
    background-color: #ecffcf;
    overflow-x: hidden; /* for view transitions */
}

h1 {
    color: #f70;
    margin-top: 1rem;
    text-shadow: 1px 1px 1px rgba(90, 130, 60, .4);
}

a { color: #57A; text-decoration: none; }
a:hover { text-decoration: underline; }

input, textarea {
    background-color: #fff;
    border: none;
    border-radius: 0;
    box-sizing: border-box;
    color: #888;
    outline: none;
    padding: .25rem .5rem;
}
::placeholder {
    opacity: .5;
    font-style: italic;
}

button {
    display: inline-flex;
    align-items: center;
    border: 3px solid rgba(0,0,0,.15);
    border-radius: 10px;
    color: #888;
    padding: .3em .7em;
    outline: none;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    white-space: nowrap;
}
button:hover { background-color: #d8d8d8; }
button[disabled],
button[disabled]:hover { background-color: #eee; color: #aaa; }

/* Additional button styles*/
.btn-primary { background-color: #FFE26E; color: #CB8530; }
.btn-primary:hover { background-color: #ffd306; }
.btn-transparent { background-color: transparent; border-color: transparent; }
.btn-transparent:hover { background-color: rgba(0,0,0,0); }

/* Helper classes */
.no-underline { text-decoration: none; }
.fade-out { transition: opacity 1s linear; opacity: 0; }
.spin { animation: spin 1.25s linear infinite; }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
.drop-shadow { filter: drop-shadow( 0px 3px 2px rgba(0,0,0,.3) )}
.zing-shadow-1 { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.5 ); }
.h25 { height: 3rem }
.w25 { width: 3rem }
.border-top2 { border-top-width: .25rem }
.validation-message { margin-bottom: .5rem; margin-top: .5rem; color: #AB3E5B; } /* mv2 zing-cranberry */
.pointer { cursor: pointer }

/* Icons */
.icon { fill: currentColor; }
button > .icon { margin-right: .5em; }
button > .icon.mr0 { margin-right: 0; }

/* Colors */
.zing-cranberry { color: #AB3E5B; }
.zing-blue { color: #57A; }
.zing-green { color: #BFD799; }
.zing-dark-green { color: #768A55; }
.zing-washed-green { color: #D0E6AC }
.zing-light-green { color: #ecffcf }

.bg-zing-green { background-color: #BFD799; }
.bg-zing-washed-green { background-color: #D0E6AC }
.bg-zing-light-green { background-color: #ecffcf }

.b--zing-green { border-color: #BFD799; }
.b--zing-washed-green { border-color: #D0E6AC; }
/*.info { color: #57A; }
.warning { color: #AD8A2A; }
.error { color: #AB3E5B; }*/

@media(min-width: 30em) {
    .max-img-h-ns { max-height: 20rem }
    button > .icon.mr1-ns { margin-right: .25rem; }
}

@media print {
    body { background-color: none; }
    .no-print { display: none; }
    .m0-print { margin: 0; }
    .mt0-print { margin-top: 0; }
}



/* Recipes CSS */
.category { text-align: center; padding: .25rem .75rem; border: 3px solid transparent; border-radius: 10px; }
.category.major { display: inline-flex; align-items: center; justify-content: center; font-size: 110%; line-height: 24px; font-weight: bold; }
.category:hover { cursor: pointer; text-decoration: none; }
.category.selected { width: 110%; margin-left: -5%; border: 3px solid rgba(0,0,0,.2); color: #CB8530; background-color: #FFE26E; box-shadow: 0 3px 5px 1px rgba(0,0,0,.2); font-weight: bold; }
.category > .icon { height: 1.1em; width: 1.1em; }

/* RecipeView CSS */
.ingredient:last-child { border: none; }

/* RecipeEditor CSS*/
.btn-structure { background-color: transparent;  }
.btn-structure:hover { background-color: rgba(0,0,0, .1); }
.btn-structure.selected { background-color: #cfe4ff }


/* LOADER STYLES */
#appLoading { position: relative; }
#appLoadingText { margin-top: .5em; text-align: center; font-size: 1.5em; font-weight: bold; color: #F70; }
#dotA, #dotB { transform: translateX(-22px) }
#loader { height: 100px; width: 200px; margin: auto; -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.dot { width: 15px; height: 15px; border-radius: 50%; position: absolute; z-index: 2; top: 0px; background: #F70; -moz-animation: sway 0.4s ease infinite; -webkit-animation: sway 0.4s ease infinite; animation: sway 0.4s ease infinite; }
.dot:nth-child(1) { left: 14.28571%; -moz-animation-delay: 0.25s; -webkit-animation-delay: 0.25s; animation-delay: 0.25s; }
.dot:nth-child(2) { left: 28.57143%; -moz-animation-delay: 0.5s; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }
.dot:nth-child(3) { left: 42.85714%; -moz-animation-delay: 0.75s; -webkit-animation-delay: 0.75s; animation-delay: 0.75s; }
.dot:nth-child(4) { left: 57.14286%; -moz-animation-delay: 1s; -webkit-animation-delay: 1s; animation-delay: 1s; }
.dot:nth-child(5) { left: 71.42857%; -moz-animation-delay: 1.25s; -webkit-animation-delay: 1.25s; animation-delay: 1.25s; }
.dot:nth-child(6) { left: 85.71429%; -moz-animation-delay: 1.5s; -webkit-animation-delay: 1.5s; animation-delay: 1.5s; }
.dot:nth-child(7) { left: 100%; -moz-animation-delay: 1.75s; -webkit-animation-delay: 1.75s; animation-delay: 1.75s; }
.dotb { width: 15px; height: 15px; border-radius: 50%; position: absolute; z-index: 1; top: 0px; background: #F70; -moz-animation: swayb 0.4s ease infinite 3s, reset 1s ease forwards 5s; -webkit-animation: swayb 0.4s ease infinite 3s, reset 1s ease forwards 5s; animation: swayb 0.4s ease infinite 3s, reset 1s ease forwards 5s; }
.dotb:nth-child(1) { left: 14.28571%; -moz-animation-delay: 0.25s; -webkit-animation-delay: 0.25s; animation-delay: 0.25s; }
.dotb:nth-child(2) { left: 28.57143%; -moz-animation-delay: 0.5s; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }
.dotb:nth-child(3) { left: 42.85714%; -moz-animation-delay: 0.75s; -webkit-animation-delay: 0.75s; animation-delay: 0.75s; }
.dotb:nth-child(4) { left: 57.14286%; -moz-animation-delay: 1s; -webkit-animation-delay: 1s; animation-delay: 1s; }
.dotb:nth-child(5) { left: 71.42857%; -moz-animation-delay: 1.25s; -webkit-animation-delay: 1.25s; animation-delay: 1.25s; }
.dotb:nth-child(6) { left: 85.71429%; -moz-animation-delay: 1.5s; -webkit-animation-delay: 1.5s; animation-delay: 1.5s; }
.dotb:nth-child(7) { left: 100%; -moz-animation-delay: 1.75s; -webkit-animation-delay: 1.75s; animation-delay: 1.75s; }

@-moz-keyframes sway {
    from { top: 0px; }
    to { top: 40px; -moz-transform: scale(0.75); transform: scale(0.75); z-index: 1; opacity: 0; }
}

@-webkit-keyframes sway {
    from { top: 0px; }
    to { top: 40px; -webkit-transform: scale(0.75); transform: scale(0.75); z-index: 1; opacity: 0; }
}

@keyframes sway {
    from { top: 0px; }
    to { top: 40px; -moz-transform: scale(0.75); -ms-transform: scale(0.75); -webkit-transform: scale(0.75); transform: scale(0.75); z-index: 1; opacity: 0; }
}

@-moz-keyframes swayb {
    from { top: 40px; -moz-transform: scale(0.75); transform: scale(0.75); z-index: 2; }
    to { top: 0px; }
}

@-webkit-keyframes swayb {
    from { top: 40px; -webkit-transform: scale(0.75); transform: scale(0.75); z-index: 2; }
    to { top: 0px; }
}

@keyframes swayb {
    from { top: 40px; -moz-transform: scale(0.75); -ms-transform: scale(0.75); -webkit-transform: scale(0.75); transform: scale(0.75); z-index: 2; }
    to { top: 0px; }
}

@-moz-keyframes reset {
    from { top: 0px; }
    to { top: 0px; }
}

@-webkit-keyframes reset {
    from { top: 0px; }
    to { top: 0px; }
}

@keyframes reset {
    from { top: 0px; }
    to { top: 0px; }
}