/* Define mobile styles */
@media only screen {
    body { background: #222; color: #ccc; overflow-x: hidden; }
    label { color: #fff; }
    button, .button { background-color: #54aca6;}
    a { color: #54aca6; }
    .templates, .hidden { display: none; }
    .divider { margin: 1em 0; border-top: 1px solid #777; }
    .post { text-overflow: ellipsis; overflow-x: hidden; }
    .profile_img { border-radius: 50%; }
    .date { text-align: right;}
    a.unliked { color: #777; }
    .tools { text-align: right;}
    label.error { background-color: #a33; color: #eee; }

    table { width: 100%; border-radius: 0 0 6px 6px; }
    table tbody tr:last-child { border-radius: 0 0 6px 6px; }
    table tbody tr:last-child td { border-radius: 0 0 6px 0; }
    table tbody tr:last-child th { border-radius: 0 0 0 6px; }
    table caption { background-color: #111; border-radius: 6px 6px 0 0; }
    table caption ul { text-align: left; }
    thead, tbody, tfoot { background-color: #444; }
    tbody tr:nth-child(even) { background-color: #333; }
    th[scope="row"] { text-align: right; }

    .reveal { background-color: #444; }
    .ui-front { z-index: 2000!important;}
    .close-button, .close-button.medium { min-width: 2rem; color: #fff; }
    .callout { border-radius: 6px; background-color: #555; color: #fff; border-color: #eee; }

    .loader_wrapper { position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.6); width: 100%; height: 100%; z-index: 500; }
    .loader { position: relative; margin: auto; margin-top: calc(50vh - 67px); width: 134px; height: 134px;}

    .money::before { content: '£'; }
    .money { text-align: right; }
    .postcode { text-transform: uppercase;}
    span.copied-msg {text-transform: none;}

    body:not(.search_closed) #main_content { margin-top: 50px; }
    .search_wrapper { position: fixed; top: 0; transition: top 0.5s; width: 100%;}
    body.search_closed .search_wrapper { top: -60px; }
    .search_result { background-color: #ee3; color: #333; }
    .search_result.active { background-color: #ea1;}

    #page .posts_content, #page .post_content { display: none; }
    #page.posts .posts_content { display: block; }
    #page.post .post_content { display: block; }

    .edit_menu button.button { background: #272727; }
    .dropdown-pane[id^="post_menu"],
    .dropdown-pane[id^="comment_menu"],
    .dropdown-pane[id^="reply_menu"]
      { width: auto; padding: 0rem; z-index: 500; }
    .dropdown-pane[id^="post_menu"] a:not(:last-child),
    .dropdown-pane[id^="comment_menu"] a:not(:last-child),
    .dropdown-pane[id^="reply_menu"] a:not(:last-child)
      { margin-right: 0rem; }
    
    .dropdown-pane[id^="post_menu"] i,
    .dropdown-pane[id^="comment_menu"] i,
    .dropdown-pane[id^="reply_menu"] i
      { margin: 0.8rem; font-size: 1.2rem; }
    .dropdown-pane[id^="post_menu"] a,
    .dropdown-pane[id^="comment_menu"] a,
    .dropdown-pane[id^="reply_menu"] a
      { display: inline-block; }

    .is-dropdown-submenu { min-width: auto; }

    .interact .comment, .interact .reply { float: right;}

    .edit_overlay { backdrop-filter: blur(3px); z-index: 600; -webkit-backdrop-filter: blur(3px); box-shadow: #111 12px 0 0; border: 1px solid #000; }
    .compose_post { position: fixed; top: 0; right: 0; width: 100%; background: rgba(40,40,40,0.7); padding: 0.6rem 0.6rem; transition: top 0.5s; }
    .compose_post.closed { top: -170px; }
    .compose_post .edit_post { display: inline; }
    .compose_post .new_post { display: none; }
    .compose_post[data-id="0"] .new_post { display: inline; }
    .compose_post[data-id="0"] .edit_post { display: none; }
    .compose_post.closed [contenteditable] { height: 0; overflow: hidden; transition: height 0.5s; }

    .post_content .divider { display: none; }
    .post_content .back { display: block; margin-bottom: 1rem; }

    .comment_editor { position: fixed; bottom: 0; width: 100%; background: rgba(40,40,40,0.6); padding: 0.6rem 0.6rem 50px 0.6rem; transition: bottom 0.5s; }
    .comment_editor.closed { bottom: -180px; }
    .comment_editor[data-comment_id="0"] button .reply { display: none; }
    .comment_editor[data-post_id="0"] button .comment { display: none; }

    .comment_wrapper.active { background-color: #333; padding-top: 0.6rem; padding-bottom: 0.6rem; }

    [contenteditable] { background: #eee; padding: 0.4rem; color: #333; max-width: 100%; margin-bottom: 1rem; }

    .avails .admin_icon .profile_img, .gigs .admin_icon .profile_img { max-width: 30px; }
    #gig_detail.new .edit { display: none; }
    #gig_detail.edit .new { display: none; }
    table.published caption { background: #393; }
    table.published .dropdown.menu > li.is-dropdown-submenu-parent > a::after { border-color: #fff transparent transparent; }

    .available img { border-radius: 50%; max-width: 30px; margin-right: 5px; }
    .available .accept1 { border: 1px solid #fff; }
    .available .accept0 { opacity: 0.5; border: 1px solid #333; }

    .avails table .button { margin-bottom: 0; }
    .confirm { background-color: rgb(67, 111, 67); }
    .decline { background-color: rgb(177, 55, 55); }
    .avails .has-tip { border: 0; }
    div.avails { padding-bottom: 50px; }

    .buttons { text-align: center;}
    .footer_nav { position: fixed; bottom: 0; left: 0; right: 0; width:100%; background-color: #111; font-size: 2rem; z-index: 1000; }
    .footer_nav .small-2 { text-align: center; }

    .notification { opacity: 0; position: fixed; top: -200px; left: 10px; width: calc(100% - 20px); z-index: 5000; background-color: #555; border-radius: 1rem; box-shadow: 5px 5px 10px rgba(0,0,0,0.6); border: 1px solid #fff; padding: 1rem; transition: top 0.5s ease-in, opacity 0.7s ease-in; }
    .notification[open] { top: 10px; opacity: 1; }

    .flatpickr-calendar { position: fixed!important; }

    .grow-wrap {
        /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
        display: grid;
      }
      .grow-wrap::after {
        /* Note the weird space! Needed to preventy jumpy behavior */
        content: attr(data-replicated-value) " ";
      
        /* This is how textarea text behaves */
        white-space: pre-wrap;
      
        /* Hidden from view, clicks, and screen readers */
        visibility: hidden;
      }
      .grow-wrap > textarea {
        /* You could leave this, but after a user resizes, then it ruins the auto sizing */
        resize: none;
        height: auto;
      
        /* Firefox shows scrollbar on growth, you can hide like this. */
        overflow: hidden;
      }
      .grow-wrap > textarea,
      .grow-wrap::after {
        /* Identical styling required!! */
        border: 1px solid black;
        padding: 0.5rem;
        font: inherit;
      
        /* Place on top of each other */
        grid-area: 1 / 1 / 2 / 2;
      }
      #main_content { padding-bottom: 50px; }
}
@media print, screen and (min-width: 40em) {}
@media print, screen and (min-width: 64em) {}