@media only screen {
    body { padding-bottom: 4em; }
    body.login { background-color: #eee; }
    legend { display: block; width: 100%; position: relative; }
    legend .button { position: absolute; top: 0; right: 1em; }
    .round { border-radius: 50%; }

    form.login { width: 90%; margin: 10% auto; border: 1px solid #999; border-radius: 10px; padding: 1em; background: #fff; }
    form.login .logo { text-align: center; }
    
    .center { text-align: center; }
    .tools { float: right; }

    [data-sticky-container] div { width: 100%; }
    [data-sticky-container] .top-bar { background-color: rgba(215,215,215,0.6); padding: 0.5em; }
    [data-sticky-container] .top-bar ul { background-color: transparent; }
    [data-sticky-container] .tools .menu  { width: 100%; text-align: right; flex-direction: row-reverse;}
    [data-sticky-container] .tools .menu li { margin-left: 0.5em; }

    textarea.tinymce { height: 500px; }
    .tox-tinymce { margin-bottom: 2rem; }

    .review_wrapper { margin-top: 1em; padding-bottom: 1em; border-bottom: 2px solid #eee; position: relative; }
    .review_wrapper .date { text-align: right; }
    .review_wrapper .reviewer { font-style: oblique; }
    .review_wrapper .remove_wrapper { display: inline; position: absolute; top: 0; right: 1em; }
    .review_wrapper.remove_requested { color: #999; }
    .review_wrapper.remove_requested h4:after { content: ' [ You have requested this review is removed ]'; }

    button.loading i.button_loading { display: inline-block; width: 16px; height: 16px; background-image: url(/images/button-loading.svg); background-size: cover; }

    .reveal #gmap { height: 300px; }
    #gmap { background: url(/images/map-placeholder.jpg); background-size: cover; }

    .attribute_list { margin: 0; }
    .attribute_list li { padding: 0.6em; background-color: #eee; border: 1px solid #ccc; border-radius: 5px; list-style: none; position: relative; margin-top: 10px; color: #333; }
    .attribute_list:not(.horizontal) li { float: left; width: 100%; }
    .attribute_list.horizontal { line-height: 3em; }
    .attribute_list.horizontal li { display: inline; }
    .attribute_list.horizontal li span { white-space: nowrap; }
    .attribute_list.horizontal li a { margin: 0 0 0 3em; }
    .attribute_list .ui-sortable-helper a { display: none; }
    .attribute_list:not(.horizontal) li { padding-right: 6em; }
    .attribute_list:not(.horizontal) li a { position: absolute; top: 0.6em; right: 0.6em; }
    .attribute_list:not(.horizontal) li a:nth-of-type(2) { right: 4.2em;}
    .attribute_list li span:not(:last-of-type)::after { content: ',';}
    .attribute_list li span.alt { display: inline-block; }
    .attribute_list img { margin-right: 1em; float: left; }

    .photos_list .missing_alt { background-color: #ff9933; }
    .photos_list .missing_alt .alt::after { content: 'Please add a description'; }
    .videos_list .description { max-height: 1.6em; overflow-y: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .videos_list li span.alt { display: block; font-weight: bold; }
    .videos_list img { float: left; }

    .mhh-footer-wrapper { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; }

    body .ui-front { z-index: 2000; }

    body.media .cover_photo_wrapper { width: 100%; max-width: 500px; position: relative; }
    body.media .cover_photo { max-width: 500px; max-height: 500px; width: 100%; height: calc(100vw - .625rem * 2); background-position: center; background-size: cover; background-image: url(/images/add_cover_photo.png); }
    body.media .cover_photo_title { position: absolute; width: 100%; text-align: center; top: 0; background: rgba(0,0,0,0.2); padding: 1em; }
    body.media .upload_cover_photo { position: absolute; top: 3px; right: 3px; }

    .message_wrapper .received { float: right; }
    .message_wrapper .abstract { clear: both; }

    [data-joyride-for=".tools .button"] .joyride-buttons { display: none; }
}
/* Small only */
@media screen and (max-width: 39.9375em) {
    .text-center { text-align: center; }
}

/* Medium and up */
@media screen and (min-width: 40em) {
    .medium-text-right { text-align: right; }
    form.login { width: 70%; }
}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {}

/* Large and up */
@media screen and (min-width: 64em) {
    form.login { width: 50%; }
}

/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {}

@media only print {
    .no_print { display: none; }
}