/*mobile CSS for basic mobile resolutions
*
* TODO: landscape mobile
*
*/

/*mobile iphone X, strictly for portrai only*/
.login .content {
    width: 95%;
    margin-top: 10%;
    max-width: 400px;
}
@media (max-width: 992px)
{
    .well-day-parts h4{
        text-align: center;
    }
    .zone-label-text:empty {
        display: none;
    }    
}
@media (min-device-width: 320px)
and (orientation: portrait)
{
    /***** login page *****/
    .header-container {
        font-size: 30px;
        letter-spacing: .15em;
    }
    .header-container .desk-img{
        height: auto;
        width: 25%;
    }
    #login-form .form-actions > * {
        width: 100%;
    }
    /**** end login page *****/

    div.dt-info{
        white-space: pre-line !important;
    }
    .dt-container .dt-paging{
        float: none !important;
    }
    .page-logo{
        display: flex !important;
        align-items: center;
    }
    .page-logo img{
        height: 5vh !important;
    }
    .user-profile{
        float: none !important;
    }
    .user-profile a.btn{
        text-overflow: ellipsis;
    }
    .portlet-body .form-actions{
        margin: 15px 0 !important;
    }
    .portlet-body .form-actions form{
        display: flex;
        flex-direction: column;
    }
    .portlet-body .btn.blue{
        margin: 5px !important;
        width: 100%;
    }
    .well-day-parts{
        padding: 5px;
    }
    .zone-container{
        margin: 5px;
    }
    td[name^="action_col"] {
        display: flex;
    }    
    
    .inventory_listing .form-control{
        padding-right: 30px;
    }
    #hs2c-panel{
        margin-left: 5px;
    }
}

/* other mobile */
@media only screen 
and (min-width: 320px) 
and (max-width: 1024px) {
    /**** online document page ****/
    #online_documentation #manual_menu{
        width: 100vw;
        position: fixed !important;
        right: 0;
        top: 0 !important;
        height: 100vh;
        background: rgba(43, 54, 67, .8);
        overflow-y: auto;
    }
    #online_documentation #manual_menu ul{
        background: transparent;
    }
    #online_documentation #manual_menu li>a, #online_documentation #manual_menu ul{
        color: #fff;
    }
    #online_documentation .menu-toggler{
        position: fixed;
        top: 50%;
        display: block !important;
    }

    #manual_menu>ul {
        margin: 50px;
        margin-bottom: 60%;
    }   

    /***** end document page ****8*/
}
/* other mobile */
@media (min-width: 1024px)
{
    #online_documentation .collapse{
        display: block;
        height: auto;        
    }
}

#online_documentation .menu-toggler{
    z-index: 10103;
    right: 0;
    height: 60px;
    width: 60px;
    border-radius: 50%!important;
    overflow: hidden;
    white-space: nowrap;
    color: #fff;
    background: #26a69a;
    outline: none;
    border: 0;
    display: none;
}

.menu-toggler .toggler-icon{
    display:block !important;
    font-size: 30px !important;
}
.flex {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}