/*
 * PocketLists.com
 *
 * @link https://1312.io
 * @author 1312 Inc.
 * @copyright 2017, 1312 Inc.
 * @package PocketLists.com
 */

/*
 * RESET
 * -----
 * Based on Eric Meyer's Reset
 * http://meyerweb.com/eric/tools/css/reset/
 * v2.0 | 20110126
 * License: none (public domain)
 */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, /* ol, ul, li, */ fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

/*
* BASE
* ----
* Classes for display of Webasyst backend with a blank app (common HTML elements, typography, colors, and Webasyst header styles)
*/

/* Common HTML elements, fonts, and colors
------------------------------------------ */
html, body { height: 100vh; width: 100%; }
body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; font-size: 16px; }
a, a:visited { color: #09f; outline:0 none; } /* dynamic content everywhere, so no special :visited markup */
a { text-decoration: none; }
a:hover { color: #f20 !important; }
a:focus { outline:none; outline-offset:-4px; }
input[type="button"]::-moz-focus-inner { border: 0; }
input[type="submit"]::-moz-focus-inner { border: 0; }
a img { border: 0; }
p, dl, hr, h1, h2, h3, h4, h5, h6, ol, ul, pre, table, address, fieldset, blockquote { margin-bottom: 1.5em; }
h1 { font-size: 2em; }
h1 a { text-decoration:none; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.3em; }
h5 { font-size: 1.2em; }
h6 { font-size: 1.1em; }
h1, h2, h3, h4, h5, h6 { line-height:1.2em; margin-bottom:.3em; }
ul, ol { padding-top:0; }
ol { list-style: decimal; }
hr { border-color: rgba(0,0,0,0.13); border-style: solid; border-width: 1px 0 0; clear: both; height: 0; margin: 0; }
table { /* border:1px solid #bbb; margin-bottom:10px; width:100%;*/  }
th, td { /* padding:.2em 0.75em; text-align:left;  */}
thead th { /* border-bottom:1px solid #aaa; background:#bbb;  padding:.4em 1em .2em;*/ }
tbody th, tbody td {/*  border-top:1px solid #bbb; border-bottom:1px solid #bbb; background:#fff; */ }
tfoot th, tfoot td { /* border-top:2px solid #666; background:#eee;  */}
input, textarea, select { margin:0;}
input, textarea { font-size: 1em; color: #000; }
input[type="button"]:focus { outline:none; outline-offset:-2px; }
fieldset { border:1px solid #bbb; padding:10px; position:relative; background:#e9e9e9; margin-bottom:10px; }
legend { font-size:1.1em; padding:.4em .8em; background:#fff; //background:none;
border:1px solid #bbb; //border:none
}
fieldset p label { width:98%; }
fieldset p input[type="text"] { width:98%; }
fieldset p select { width:99%; }
blockquote { color: #777; font-size:0.9em; padding:20px; background: #eee; border-left: 3px solid #ddd; }
blockquote cite { font-size:.9em; }
p, li { line-height: 1.5em; }

/* LAYOUT
--------- */

.container { min-width: 650px; max-width: 680px; margin: 0 auto; padding: 0 30px; }
.block { padding: 1rem; }
.block.double-padded { padding: 2rem; }
.squeezed { margin-left: 5rem; margin-right: 5rem; }
.align-center { text-align: center; }
.gray,
a.gray { color: #aaa; }
.bigger { font-size: 1.1875em; }
.small { font-size: 0.875em; }
.top-padded { margin-top: 4rem; }
.bottom-padded { margin-bottom: 4rem; }
.subtitle { font-size: 0.875em; font-weight: 500; color: #aaa; }
.nowrap { white-space: nowrap; }
.hint { color: #888; font-size: 0.925em; }

.icon16.loading { display: inline-block; width: 16px; height: 16px; background-image: url("/wa-content/img/loading32.gif"); background-size: 16px 16px; background-position: 0 0; }

.flexbox { display: flex; min-height: 100vh; width: 100%; align-items: center; }
.flexbox .box { flex: 1; }

.pl-list-preview { margin: 0 auto; border: 1px solid #eee; background: #fff; border-radius: 5px; box-shadow: 0 30px 50px rgba(0,0,0,0.12), 0 10px 20px -15px rgba(0,0,0,0.13); overflow: hidden; }
.pl-list-preview .pl-list-cover { background: #eee; height: 28vh; max-height: 300px; min-height: 100px; overflow: hidden; }
.pl-list-preview .pl-list-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pl-list-preview h1,
.pl-list-preview p { padding-left: 0.3rem; }
.pl-list-preview ul { list-style: none; padding-left: 0; }
.pl-list-preview ul li { display: flex; font-weight: 500; }
/* padding: 1rem;  } */
.pl-list-preview ul li .pl-item-checkmark { flex: 0 0 28px; padding: 1rem 0.3rem 0.7rem; }
.pl-list-preview ul li .pl-item-checkmark i { display: inline-block; width: 16px; height: 16px; border: 2px solid #ccc; border-radius: 50%; position: relative; top: 2px; }
.pl-list-preview ul li .pl-item-name { flex: 1; border-bottom: 1px solid #eee; padding: 1rem 0 0.7rem; }
.pl-list-preview ul li .pl-item-name.no-border { border: none; }
.pl-list-preview ul li.pl-item-subtask { padding-left: 36px; }
.pl-list-preview ul li.pl-item-subtask .pl-item-checkmark { flex: 0 0 18px; }
.pl-list-preview ul li.pl-item-subtask .pl-item-checkmark i { width: 12px; height: 12px; border: none; background: #ccc; top: -2px; }
.pl-list-preview ul li.pl-item-subtask .pl-item-name { padding-top: 0.85rem; }
.pl-list-preview ul li.pl-item-divider { font-weight: bold; padding-top: 1.3rem; border-bottom-width: 2px; padding-left: 0.4rem; }
.pl-list-preview ul li.pl-item-divider .pl-item-checkmark { display: none; }
.pl-list-preview ul li.pl-item-completed .pl-item-name { color: #999; }
.pl-list-preview ul li.pl-item-completed .pl-item-checkmark i { background: transparent url('/wa-apps/pocketlists/img/pl-done-checkbox.png') no-repeat !important; background-size: 16px 16px !important; border: none; border-radius: 0; opacity: 0.3; margin-left: 2px; }
.pl-list-preview ul li.pl-item-completed.pl-item-subtask .pl-item-checkmark i { background-size: 12px 12px !important; margin-left: 0px; }

.pl-family-preview { margin: 0 auto; border: 1px solid #eee; background: #fff; border-radius: 5px; box-shadow: 0 30px 50px rgba(0,0,0,0.06), 0 5px 20px -15px rgba(0,0,0,0.13); overflow: hidden; padding: 2rem; text-align: center; }
.pl-family-preview .pl-userpic { display: inline-block; margin: 0 8px 16px; color: #aaa; font-size: 0.875rem; text-align: center; }
.pl-family-preview .pl-userpic i { border-radius: 50%; width: 60px; height: 60px; display: block; margin: 0 auto 0.5rem; background: transparent url('/wa-apps/pocketlists/img/pl-userpic.png') no-repeat; background-size: 60px 60px; }
.pl-family-preview p { margin: 1rem auto 2rem; max-width: 65%; }

.pl-openinapp-button { display: inline-block; margin: 0 auto; text-align: center; padding: 0.8rem 1rem; border-radius: 5px; border: 2px solid #09f; color: #09f; font-weight: 500; }

.pl2icon-whinking { width: 64px; height: 64px; margin: 2rem auto; display: block; }
.pl2icon-whinking.pl2icon-bigger { width: 128px; height: 128px; margin-top: 4rem; }

.pl2header { display: flex; margin: 2rem 0 1rem; }
.pl2header a { flex: 1; display: flex; }
.pl2header a .pl2icon-back { flex: 0 0 24px; width: 24px; height: 48px; margin-right: 0.75rem; background: transparent url('/wa-apps/pocketlists/img/glyphs/chevron-left-solid.svg') no-repeat; background-size: 24px 24px; background-position: 0px 12px; opacity: 0.3; }
.pl2header a:hover .pl2icon-back { opacity: 0.6; }
.pl2header a .pl2icon-whinking { flex: 0 0 48px; width: 48px; height: 48px !important; margin: 0; }
.pl2header a .pl2icon-suffix { flex: 1; color: #aaa; white-space: nowrap; font-size: 17px; height: 48px; line-height: 48px; padding: 0 0.85rem; }
.pl2header a:hover .pl2icon-suffix { color: #646465; }
.pl2header #pl2hub-hidden-search-toggle { flex: 0 0 48px; width: 48px; height: 48px; background: transparent url('/wa-apps/pocketlists/img/glyphs/search-solid.svg') no-repeat; background-size: 24px 24px; background-position: 12px 12px; opacity: 0.3; transition: 0.2s opacity; }
.pl2header #pl2hub-hidden-search-toggle:hover { opacity: 0.6; }

.badge-appstore { width: 142px; margin: 0 auto; display: block; }

.pl-gradient-overlay-light {
    background: #f3f3f3;
    background: -moz-linear-gradient(-75deg, rgb(248,248,248) 0%, rgb(238,238,238) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-75deg, rgb(248,248,248) 0%,rgb(238,238,238) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(165deg, rgb(248,248,248) 0%,rgb(238,238,238) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

/* SIGN UP & LOG IN forms
------------------------- */

.wa-auth-form .pl2icon-whinking { margin: 2rem 0 1rem; width: 48px; height: 48px; }
.wa-auth-form h1 { border-bottom: 1px solid #eee; padding-bottom: 0.7rem; margin-bottom: 2rem; }

.wa-form-header { flex: 0 0 59px; border-bottom: 1px solid #eee; }
.wa-form-header h4 { margin-bottom: 0; line-height: 1em; margin-top: 0.13em; }
.wa-form { flex: 1; overflow: visible; }
.wa-field { display: flex; margin: 0; padding-top: 3px; }
.wa-field .wa-name { flex: 0 0 130px; max-width: 130px; color: #aaa; align-self: center; margin-bottom: 0.8rem; }
.wa-field .wa-value { flex: 1; margin-bottom: 0.8rem; position: relative; }
.wa-field .wa-value.wa-firstname-lastname-separator { flex: 0 0 1rem; }
.wa-field .wa-value.wa-submit { margin-top: 1rem; }
.wa-field .wa-value.wa-submit .button { margin-left: 0; }
.wa-field .wa-value.wa-submit a { padding-left: 0.5rem; padding-right: 0.5rem; }
.wa-field .wa-value input[type="text"],
.wa-field .wa-value input[type="email"],
.wa-field .wa-value input[type="password"],
.wa-field .wa-value textarea { background: rgba(0,0,0,0.06); border: none;  line-height: 1rem; margin: 0; width: 100%; outline: 0 none; overflow: hidden; overflow-wrap: normal; padding: 0.65rem; font-size: 1rem; position: relative; resize: none; top: 0px; font-family: inherit; border-radius: 5px; min-height: 30px; font-weight: 500; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.wa-field .wa-value textarea { min-width: 400px; height: 70px; }
.wa-field .wa-value input.wa-firstname-lastname { width: 100%; margin-right: 1rem; }
.wa-field .wa-value #pl2server-submit-loading { position: relative; top: 2px; margin-left: 5px; opacity: 0; }
.wa-field .wa-value p { margin-bottom: 0; }
.wa-field.wa-separator { height: 0.5rem; }
.wa-field.wa-field-photo img { border-radius: 50%; display: block; }
.wa-field.wa-field-photo span { display: none !important; } /* 'Delete photo' link */
.wa-field.wa-field-photo p { margin-top: 1rem; }
.wa-error-msg { color: orange; margin-left: 0.7rem; font-style: normal; font-weight: 500; margin-top: 0.8rem; margin-bottom: 0.5rem; display: block; }
.wa-form-footer { margin-top: 2rem; }
.wa-form-footer a { color: #aaa; text-decoration: none; }
.wa-change-password-link { display: block; padding-top: 1rem; padding-bottom: 1rem; }

/* BUTTONs
---------- */

.button { display: inline-block; border-radius: 0.4em; color: #fff; outline: 0 none; border: none; white-space: nowrap; padding: 10px 0.8rem; margin: 0 6px 0; background: #09F; font-size: 1em; color: white; font-weight: bold; transition: 0.2s; position: relative; top: 0; -webkit-appearance: none; cursor: pointer; }
.button:hover { color: #fff !important; box-shadow: 0 2px 20px -3px rgba(0,0,0,0.2); top: 0; }
.button:active { top: 1px; box-shadow: none; }

.button.rounded { border-radius: 1.4em; padding-left: 1rem; padding-right: 1rem; }
.button.rounded.minimal { padding-left: 0.65em; padding-right: 0.65rem; }

.button.white { background: #fff !important; color: #09f; box-shadow: 0 3px 10px -3px rgba(0,0,0,0.2); border: none; }

.button.transparent { background: transparent !important; color: #09f; margin: 0 3px; padding-left: 0.5rem; padding-right: 0.5rem; }
.button.transparent:hover { color: #09f !important; background: #f3f3f3 !important; box-shadow: none; }

.button:disabled,
.button[disabled] { background: #aaa; }

a.button { color: #fff; }
.button.red { color: #f55; }
.button.red:hover { color: #f00 !important; }

/* STATIC content
----------------- */

.pl2site h1 { border-bottom: 1px solid #eee; padding-bottom: 0.7rem; margin-bottom: 2rem; }
.pl2site footer { border-top: 1px solid #eee; padding-top: 1.2rem; margin-top: 3rem; margin-bottom: 0; min-height: 3rem; }

.pl2status-green { color: limegreen; }
.pl2ios-settings-iphonex { width: 512px; max-width: 100%; }

.pl2status-comingsoon { background: #fdf6ea; color: #db9d40; padding: 4px 15px 6px; border-radius: 20px; }
.pl2status-available { background: #E5F1FF; color: #09f; padding: 4px 15px 6px; border-radius: 20px; margin: 0 auto 20px; display: inline-block; }

/* MY
----- */

#pl2preview-my-data-button { }
#pl2preview-my-data-container { display: none; margin-top: 1rem; padding: 1rem; background: #eee; border-radius: 5px; }
#pl2preview-my-data-container ul li { margin-bottom: 0.75rem; }

/* MOBILE
--------- */

@media screen and (max-width: 760px) {

    img { max-width: 100%; height: auto !important; }
    h1 { font-size: 1.8rem; }

    .container { min-width: 0; padding: 1rem 1rem; }
    .squeezed { margin-left: 0; margin-right: 0; }

    .pl-list-preview { box-shadow: 0 20px 40px rgba(0,0,0,0.1); }

    .pl-family-preview p { max-width: 100%; }

    .wa-auth-form h1 { margin-bottom: 1.5rem; padding-bottom: 0.5rem; }

    .wa-field .wa-value.wa-submit { margin-top: 0.7rem; }
    .wa-field .wa-value.wa-submit .button  { display: block; width: 100%; text-align: center; margin-bottom: 0.3rem; }
    .wa-field .wa-value.wa-submit a,
    .wa-form-footer a  { display: block; width: 100%; text-align: center; padding: 0.3rem 0; }
    .wa-field .wa-value.wa-submit a.button { padding: 10px 0.8rem; width: auto; }

    .wa-field .wa-value #pl2server-submit-loading { display: block; margin: 0 auto; }

    #wa-my-info-edit-wrapper .wa-field { flex-flow: row wrap; }
    #wa-my-info-edit-wrapper .wa-field .wa-name { margin-bottom: 0.5rem; }
    #wa-my-info-edit-wrapper .wa-field .wa-value { flex: 0 0 100%; margin-bottom: 1rem; }

}

/* DARK MODE (sign up forms only)
--------------------------------- */

@media (prefers-color-scheme: dark) {

    body.pl2auth { background: #121212; color: #aaa; }
    .pl2auth h1,
    .pl2auth h2,
    .pl2auth h3,
    .pl2auth h4,
    .pl2auth h5,
    .pl2auth h6 { color: #fff; }
    .pl2auth .wa-field .wa-value input[type="text"],
    .pl2auth .wa-field .wa-value input[type="email"],
    .pl2auth .wa-field .wa-value input[type="password"],
    .pl2auth .wa-field .wa-value textarea { background: rgba(255,255,255,0.1); color: #fff; }
    .pl2auth .pl2site h1,
    .pl2auth .wa-auth-form h1 { border-bottom: 1px solid #333; }
    .pl2auth .pl2site footer { border-top: 1px solid #333; }

}