/* THIS FILE SHOULD ONLY CONTAIN STYLES THAT WILL BE USED IN MULTIPLE PAGES ACROSS READYLIST */


@media only screen and (min-device-width: 320px) and (max-device-width: 800px) {
    /* Variables */
    :root {
        --popup-width: 90%;
    }

    /* Header */
    .logo {
        max-height: 2.5em;
    }

    .footer {
        position: inherit;

        .container {
            width: 100%;
        }
    }

    /* Icons */
    img.icon.large {
        width: 3em;
        height: 3em;
        padding-top: 1.5em;
        margin-left: 1em;
    }

    img.icon.medium {
        width: 2.5em;
        height: 2.5em;
    }

    /* Sidebar Navigation */
    .navigation {
        position: relative;
        top: 0;
        height: 6em;
        width: 100%;
        border-radius: 0;
    }

    .navigation_icons {
        position: relative;
        top: 0;
        border-radius: 0;
        width: 100%;

        li {
            float: left;
            margin: 0;
        }

        a {
            line-height: 6em;
            width: 15%;

            i {
                font-size: 2.5em;
            }
        }

        .selected::before, .tab_action_needed::before {
            width: 4em;
            height: 4em;
            margin: 1em;
        }
    }

    .navigation_text {
        visibility: hidden;
        position: relative;
        top: 0;
        border-radius: 0;
    }

    .tooltip .sub_tabs {
        left: 225px;
        top: 10px;
        width: 90%;

        span {
            font-size: 24px;
        }
    }

    .tooltip .sub_tabs::after {
        top: 0;
        left: 0.5em;
        width: 15px;
        height: 15px;
    }

    .navigation_initials:hover .sub_tabs {
        transition: none;
    }

    .navigation:hover .nav_text {
        transform: none;
    }

    .nav_nav:hover .info {
        transition: none;
    }

    .navigation_icons a:hover {
        transform: none;
    }

    .navigation:hover .navigation_text {
        transform: none;
    }

    .navigation_initials::after {
        content: '';
        position: absolute;
        margin: auto;
        left: 4.5em;
        top: 1.5em;
        width: 3px;
        height: 50%;
        background-color: white;
    }

    .tooltip.action_needed .sub_tabs {
        left: 1em;
        margin-top: 5em;
        font-size: 16px;
        width: 80%;

        span {
            display: inline;
            margin-left: 0;

            img {
                padding-right: 0;
            }
        }
    }

    .tooltip.action_needed {
        .sub_tabs.epic::after {
            left: 3em;
        }

        .sub_tabs.service::after {
            left: 11em;
        }
    }

    /* General Page Setup */
    .outer {
        margin: 0.5em;

        h1 {
            text-align: center;
        }

        .page_titles {
            display: none;
        }

        &:not(.admin.edit) .section {
            padding: 1em;
        }

        .outline {
            height: inherit;

            h6 div {
                width: 100%;
                height: inherit;

                img.icon {
                    width: 2em;
                    height: 2em;
                    padding: 0.5em;
                }
            }

            .photo {
                width: 100%;
            }

            &.action_needed {
                display: block;
            }

            &.rooms_list {
                display: flex;
                justify-content: space-between;
            }
        }

        [type=text] {
            width: 60%;
        }

        .right_align_buttons {
            display: block;
            text-align: center;

            button {
                margin-top: 1em;
                margin-left: 0;
                width: 80%;
            }
        }

        .card_header {
            float: none;
            writing-mode: horizontal-tb;
            text-transform: none;
            letter-spacing: normal;
            margin-left: 0;
            margin-right: 0;

            h2 {
                height: fit-content;
                font-size: 26px;
                line-height: inherit;
            }
        }

        #completed_notes img {
            padding-bottom: 1em;
        }

        #carousel {
            position: relative;
            display: block;

            form {
                width: inherit;
                transform: translate(0, 0) !important; /* Must use important even though it is not best practice because the
                inline styling is required to use the order, but must be overridden in mobile */
                height: min-content;

                &.finished .card_header {
                    float: none;
                    transform: rotate(0);
                    margin-left: 0;
                    margin-right: 0;
                }

                .checklist {
                    margin: 0;
                }

                &.non_interactable {
                    display: none;
                }
            }
        }
    }

    .ui-autocomplete .ui-menu-item a {
        font-size: large;
    }

    #search_box {
        line-height: 40px;

        h3 {
            line-height: 40px;
        }
    }

    .rl_header {
        display: none;
    }

    .navigation_initials_link {
        content: url("/_images/readylist-logo-icon.png");
        width: 1.5em;
        padding-top: 0.4em;
    }

    .mobile_ellipsis_overflow {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
}