/*
 * Copyright © OurGroceries, Inc. All rights reserved.
 */

:root {
    --icon-dark-green: #429538;
    --icon-light-green: #8cc63e;
    --icon-red: #a61e22;
    --green-background: #ECF6DE;
}

body {
    margin: 0;
    padding: 0;
    background: white;
    font-family: sans-serif;
    font-size: 16px;
    word-wrap: break-word;
    /* Chrome's default is about 1.2, but FF is about 1.0. */
    line-height: 1.2;
}

h2 {
    font-size: 100%;
    font-weight: bold;
    margin: 0px 0px 4px 0px;
}

h3 {
    font-size: 100%;
    font-weight: bold;
    margin: 0px;
}

p {
    margin: 0px;
    margin-bottom: 1em;
}

a img {
    border: 0px;
}

img.header-image {
    /* Strict CSS says that inline elements (including img by default) align to the text
       baseline. This moves images up a few pixels, which isn't what we want when we're
       putting together the header. Making it a block element fixes it. */
    display: block;

    /* Fit within its parent. */
    max-width: 100%;
}

#overlayNotice {
    visibility: hidden;
    position: fixed;
    top: 0;
    right: 0;
    background-color: #8cc63f;
    color: white;
    font-weight: bold;
    padding: 0.5em 1em;
    z-index: 1000;
    border-bottom-left-radius: 5px;
}

#main-header-image {
    position: relative;
}

#auth-info {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
}

#auth-text {
    display: block;
    color: #888;
    padding: 2px 0 3px 8px;
    margin: 0;
    font-size: 80%;
}

#auth-text a {
    color: #888;
}

div.appstore {
    padding-top: 20px;
    padding-bottom: 20px;
}

.app-store-link {
    display: inline-block;
    overflow: hidden;
    background: url(/static/images/Download_on_the_App_Store_Badge_US-UK_135x40.svg) no-repeat;
}

.app-store-link.store-link-small {
    width: 200px;
    height: 59px;
    background-size: 200px 59px;
}

.app-store-link.store-link-large {
    width: 270px;
    height: 80px;
    background-size: 270px 80px;
    background-position: 50% 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.play-store-link.store-link-small img {
    width: 200px;
    height: 59px;
}

#overview .play-store-link.store-link-small img {
    margin-left: 30px;
}

.play-store-link.store-link-large img {
    width: 270px;
    height: 80px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.appstore .app-store-link.store-link-small {
    margin-left: 30px;
}

.appstore .app-store-link.store-link-large {
    clear: both;
    display: block;
}

.appstore .play-store-link.store-link-large {
    display: block;
    clear: both;
}

/* For pages that want a single column. */
div.single-column {
    padding-bottom: 20px;
}

.main-frame {
    max-width: 770px;
    margin: 1em auto 0 auto;
    background-color: white;
    padding: 0 10px;
}

.two-column-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    column-gap: 30px;
    row-gap: 40px;
}

.two-column-container > * {
    /* This forces columns to be the same width, regardless of
    content. Leave the "px" here, IE requires it: */
    flex: 1 1 0px;
}

#follow-us {
    margin: 10px 0 15px 0;
    font-size: 80%;
}

#follow-us a {
    text-decoration: none;
}

#follow-us a:hover {
    text-decoration: underline;
}

.social-icons {
    position: relative;
    /* The images are 48x48 and we resize them here. This will make them
       look better on retina displays. */
    width: 24px;
    height: 24px;
    top: 7px;
}

table.footer {
    clear: both;
}

td.footer {
    background-color: white;
    width: 750px;
    padding-left: 46px;
    padding-right: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 60%;
    text-align: center;
    line-height: 3ex;
}

.tabs-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    column-gap: 1em;

    margin-top: 1em;
    margin-bottom: 3em;
}

.tabs-container a {
    color: #8cc63f;
    font-size: 16pt;
    text-transform: uppercase;
    text-decoration: none;
    padding-bottom: 5px;
    letter-spacing: 1px;
}

.tabs-container a:hover {
    text-decoration: none;
    color: #419639;
}

.tabs-container a.current-tab {
    color: #419639;
    border-bottom: 2px solid #419639;
    font-weight: bold;
}

.center-iphone-image {
    display: none; /* Set to block by @media */
    margin: 1em auto;
    width: 196px;
}

.right-iphone-image {
    float: right;
    width: 196px;
    padding-left: 1em;
    margin-bottom: 2em;
}

.center-android-image {
    display: none; /* Set to block by @media */
    margin: 1em auto;
    width: 205px;
}

.right-android-image {
    float: right;
    width: 205px;
    padding-left: 1em;
    margin-bottom: 2em;
}

/* Show the correct image on the overview page. */
@media screen and (max-width: 600px) {
    .center-android-image,
    .center-iphone-image {
        display: block;
    }
    .right-android-image,
    .right-iphone-image {
        display: none;
    }
}

div#overview p.summary {
    font-size: 135%;
}

div#privacy li {
    margin-bottom: 1em;
}

.device_id_instructions li {
    margin-bottom: 1em;
}

.device_id_instructions img {
    border: 1px solid black;
    margin: 1em 0;
}

p.date {
    font-size: 60%;
    font-style: italic;
}


/* faq and user guide */
#faq > div,
#user-guide > div {
    /* More space between items */
    margin-top: 2.5em;
    margin-bottom: 2.5em;
}

#faq > div > img,
#user-guide > div > img {
    display: block;
    margin: 2em auto;
}

#faq :target,
#user-guide :target {
    margin-left: -12px;
    margin-right: -12px;
    padding: 10px 10px;
    border: 2px solid var(--icon-light-green);
    border-radius: 5px;
}

#faq :target p:last-child,
#user-guide :target p:last-child {
    /* The normal margin makes the yellow frame extend too low. */
    margin-bottom: 0;
}

#faq :target h2,
#user-guide :target h2 {
    margin-bottom: 10px;
}

#user-guide h2 {
    color: #888;
    font-size: 24pt;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1em;
}

#user-guide h3, #settings h3 {
    font-size: 18pt;
    margin-top: 2em;
    margin-bottom: 0.5em;
    background-color: var(--icon-dark-green);
    color: white;
    padding: 0.2em 0.5em;
    font-weight: 100;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

#user-guide :target h3 {
    margin-top: 0;
}

.table-of-contents {
    padding-inline-start: 0;
    padding-left: 0;
}

.table-of-contents li {
    list-style-type: none;
}

.table-of-contents > li {
    margin-top: 0.8em;
    font-weight: bold;
}

.table-of-contents > li > ul > li {
    font-weight: normal;
}

#user-guide i.fa {
    color: #888;
}

#user-guide i.fa-pull-left {
    color: var(--icon-light-green);
}

#user-guide .callout {
    background-color: var(--green-background);
    border-left: 6px solid var(--icon-light-green);
    padding: 0.4em 1.5em 0.4em 0.8em;
    min-height: 4em;
    margin: 1em 0;
}

#user-guide .callout ul {
    margin-left: 3.5em;
}

#user-guide .app-store-link,
#user-guide .play-store-link {
    display: block;
    width: 200px;
    margin: 1em auto;
}

#user-guide .icon-list {
    list-style: none;
    padding-right: 2.5em;
    margin-left: 5em;
}

#user-guide .icon-list li {
    margin-bottom: 1.5em;
    margin-top: 1.5em;
}

/* news */
#news .entry {
    /* Clear any image in the previous news item. */
    clear: both;
    /* More space between items */
    padding-bottom: 1em;
}

div#news div.right-text {
    /* Don't interfere with the phone image, even after the phone is vertically done. */
    margin-left: 220px;
}

div#news div.left-text {
    /* Don't interfere with the phone image, even after the phone is vertically done. */
    margin-right: 220px;
}


/* download */
.download-ios .app-store-link {
    display: block;
    margin: 2em auto;
}

.download-android .play-store-link {
    display: block;
    margin: 2em 0;
    text-align: center;
}

/* sign-in */
#signIn input[name=emailAddress] {
    width: 220px;
}

#signIn input[name=password],
#signIn input[name=passwordAgain] {
    width: 150px;
}

#signIn input[name=emailAddress],
#signIn input[name=password],
#signIn input[name=passwordAgain] {
    font-size: 100%;
    display: block;
    margin: 0.5em 0;
}

#emailPreferences .error,
#settings .error,
#resetPassword .error {
    color: #BC1E32;
    background-color: #FFFFD5;
    border: 1px solid #DC9886;
    padding: 10px;
    margin-bottom: 15px;
}

#emailPreferences .notice,
#settings .notice,
#resetPassword .notice  {
    color: #1EBC32;
    background-color: #E5FFE5;
    border: 1px solid #98DC86;
    padding: 10px;
    margin-bottom: 15px;
}

#signIn .notice {
    margin-bottom: 15px;
}

#signIn .error {
    color: var(--icon-red);
    margin-bottom: 15px;
    font-weight: bold;
}

#signIn form {
    background-color: var(--green-background);
    max-width: 24em;
    margin: 0 auto;
    border: 4px solid var(--icon-light-green);
    border-radius: 10px;
    padding: 0;
}

#signIn h2 {
    color: white;
    background-color: var(--icon-light-green);
    font-size: 18pt;
    text-align: center;
    padding: 6px 0;
}

#signIn .sign-in-contents {
    padding: 20px;
}

#signIn button {
    margin-top: 1em;
}

#signIn hr {
    margin: 1.5em 0;
}

#signIn .forgot-password-prompt {
    margin-bottom: 0;
}

#signIn .we-will-create-account {
    margin-top: 1em;
    margin-bottom: 0;
}

/* settings */
div#settings td.label {
    font-weight: bold;
    text-align: right;
    padding: 3px 20px 3px 0px;
}

div#settings td.widgets {
    width: 100%;
}

div#settings button {
    margin-top: 15px;
}

div#settings #runtimeError {
    color: var(--icon-red);
    font-weight: bold;
    margin-top: 10px;
}

div#settings .forgotIt {
    font-size: 75%;
    margin-left: 10px;
    text-decoration: none;
}

div#settings .forgotIt:hover {
    text-decoration: underline;
}

div#settings hr {
    margin-top: 20px;
    margin-bottom: 20px;
}

div#settings div.radioGroup {
    margin-top: 0.5em;
    margin-bottom: 1em;
    margin-left: 1.5em;
    line-height: 120%;
}

div#settings div.radioGroup > div {
    display: flex;
    flex-direction: row;
    align-items: baseline;
}

div#settings div.radioGroup > div > label {
    margin-left: 10px;
}

div#settings h1 {
    font-weight: 500;
}

div#settings .deleteButton,
div#settings #importFullAccountForm button {

    background-color: var(--icon-red);
    background-image: none;
    border-color: #dc3545;
    color: white;
}

#deleteAccountDialog p {
    margin: 1em 0;
}

.deleteAccountError {
    display: none;
    color: #dc3545;
}

.deleteAccountEmail {
    font-weight: bold;
}

/* Set up font size baseline from which jQuery can size its buttons, etc. */
.jQueryContainer {
    font-size: 11px;
}
.jQueryDialogContainer {
    font-size: 12px;
}

/* jQuery UI style overrides. */
.ui-dialog-buttonpane {
    font-size: 12px;
}

#importFullAccountForm input,
#importFullAccountForm button {

    display: block;
}

/* --------------------------------------------------------------------------------- */

#device-list-upgrade-note.upgraded {
    display: block;
}

#device-list-upgrade-note:not(.upgraded) {
    display: none;
}

.device-list {
    margin-top: 2em;
}

.device-list th {
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid #ccc;
    padding-right: 1em;
}

.device-list td {
    padding: 4px 1em 4px 0;
}

.device-list td.device-list-purchase-details {
    padding-left: 3em;
}

.device-list tr:hover td {
    background-color: #eee;
}

.device-list tr.device-list-removed:hover td {
    background-color: transparent;
}

.device-list-created, .device-list-last-seen {
    white-space: nowrap;
}

.device-list-created, .device-list-last-seen, .device-list-names {
    vertical-align: top;
}

.device-list-removed td {
    text-decoration: line-through;
    color: #aaa;
}

.device-list-removed .device-list-remove-button {
    display: none;
}

.device-list-remove-button {
    width: 100%;
    height: 16px;
    background: url('/static/images/delete_master_list_item.svg') no-repeat left center;
    background-size: 16px 16px;
    cursor: pointer;
}

img.remove-button {
    position: relative;
    top: 2px;
}

.device-list-removing .device-list-remove-button {
    background: url('/static/images/spinner-16x16.gif') no-repeat left center;
}

/* Reset password form. */
#resetPasswordForm td.label {
    font-weight: bold;
    text-align: right;
    padding: 3px 20px 3px 0px;
}

#resetPasswordForm td.widgets {
    width: 100%;
}

#resetPasswordForm button {
    margin-top: 15px;
}

#resetPasswordForm #runtimeError {
    color: var(--icon-red);
    font-weight: bold;
    margin-top: 10px;
}

/* Initially hide these dialogs. */
#purgeMasterListSortOrderDialog, #purgeCategoryListSortOrderDialog, #purgeMasterListDialog {
    display: none;
}

/* jquery-ui's text in buttons is too small. */
.ui-button {
    font-size: 1.2em;
}