.sub_container {

    
    flex-direction: column;
    
}

@media screen and (max-width: 900px) {
    .respimg {
        margin-top: 40px;
    }


    div.left-panel-act {
        width: auto;
        clear: both;
        float: none;
        vertical-align: middle;
    }

    div.right-panel-act {
        width: auto;
        clear: both;
        float: none;
        margin-left: 1%;
    }


    .account {
        margin-top: 0.4em;
        margin-bottom: 0.4em;
        font-size: 16px;
    }

    #badge_container img {
        width: 300px;
        height: auto;
    }
}


/*  Cell phone styles  */

@media screen and (max-width: 500px) {

    .column {
        text-align: center;
    }

    .account {
        margin-top: 0.4em;
        margin-bottom: 0.4em;
        font-size: 14px;
    }


    div.container {
        height: auto;
        display: block;

    }


    div.left-panel-act {
        float: none;
        background: #7986CB;
        margin-top: 1em;
        margin-right: 1%;
        margin-left: 1%;
        padding: 0.5em;
        margin-bottom: 1em;
    }

    div.right-panel-act {
        float: none;
        margin-top: 1em;
        margin-right: 1%;
    }

    #badge_container img {
        width: 240px;
        height: auto;
    }

    /*  h1 is the top left page title only */

    /*
    <item name="ind500" type="color">#3F51B5</item>
        <item name="ind300" type="color">#7986CB</item>
        <item name="ind700" type="color">#303F9F</item>
        <item name="ind900" type="color">#C6FF00</item>
        <item name="ind100" type="color">#C5CAE9</item>
        <item name="limea400" type="color">#FFC400</item>
        */
}