/*
    /////
    GENERAL RESPONSIVE STYLES FOR TEMPLATES
    /////
*/

/* Extra large desktops */
@media (max-width: 1400px) {
}

/* Large desktops */
@media (max-width: 1200px) {
}

/* Small desktops / large tablets */
@media (max-width: 992px) {
}

/* Tablets */
@media (max-width: 768px) {
    .stdLayout.rowGrp {
        flex-direction: column;
    }

    .rowGrp {
        flex-wrap: wrap;
    }



    /* left navigation*/

    .navbar {
        width: 100%;
        min-width: 100%;
        flex: 0 0 100%;
    }

    .sidebar {
        min-width: 100%;
        border-right: 0;
    }

    .sub-menu {
        padding-left: 0;
    }

        .sub-menu a {
            padding-left: 2rem;
        }

    .navbar .mobileNavMenu {
        list-style: none;
        margin: 0;
        padding: 0;
        background: var(--cc-navBlue);
        cursor: pointer;
        justify-content: center;
        flex: 1 1 100%;
        align-items: center;
        display: flex;
        flex-direction: column;
    }

    .mobileNavMenu .mobile-level {
        padding: 10px 3rem;
        color: #fff;
        font-size: 1.1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

        .mobileNavMenu .mobile-level::after {
            content: ">";
        }

    .mobileNavMenu.open .mobile-level::after {
        transition: transform .2s ease;
        transform: rotate(180deg);
    }

    .sidebarlinks {
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease;
    }

        .sidebarlinks.open {
            max-height: 20rem;
            overflow-y: scroll;
            border-top: 1px solid #888;
            box-shadow: 0px 5px 5px rgba(0 0 0 /.5);
        }

            .sidebarlinks.open li {
                width: 99%;
            }





    /*Search bars*/
    .directoryContainer .dirSearch input {
        width: 100% !important;
    }
}

/* Large phones */
@media (max-width: 576px) {
}

/* Small phones */
@media (max-width: 480px) {
}

/* Very small devices */
@media (max-width: 360px) {
}