.open-sidebar{
    display: none;
}
#bottombar{
    display: none;
}
@media(max-width: 777px){
    .loginsx{
        width: 100%;
    }
    .loginsx h3{
        margin-top: 90vh;
    }
    .logindx{
        position: absolute;
        z-index: 2;
        border-radius: 8px;
        border:2px solid white;
        margin-top: 92px;
        background-color: rgba(255,255,255,0.4);
        width: 90%;
        left: 5%;
        right: 5%;
    }
    #monitorDipendentiOnline{
        display: none;
    }
}

@media(max-width: 480px){

    .dataTables_wrapper .row .col-sm-6:nth-child(1){
        width: 30%!important;
        float: left!important;
    }
    .dataTables_wrapper .row .col-sm-6:nth-child(2){
        width: 70%!important;
        float: left!important;
    }
    .dataTables_length span{
        display: none;
    }


    .loginsx h1{
        margin-top: -5px;
    }
    .loginsx h3{
        margin-top: 90vh;
    }
    .logindx{
        margin-top: 94px;
        padding-top:11vh;
        background-color: rgba(255,255,255,0.9)
    }
    .wrapper{
        width: 100%;
        /*position: relative;
        left:-240px;*/
    }
    #main{
        padding: 10px;
        width: 100%;
    }
    #sidebar{
        position: fixed;
        z-index: 50;
        left: 0;
        transform: translateX(-240px);
        transition: transform 0.2s ease-in-out;
        height: calc(100vh - 84px);
    }
    #sidebar.opened{
        transform: translateX(0);
    }
    .maintitle{
        font-size: 2.5rem;
        line-height: 3.5rem;
        margin-top: 0;
    }
    h3{
        font-size: 18px;
    }
    h3.alert{
        margin-top:8px;
    }
    #dashboard > ul{
        margin:30px 0px;
        gap: 9px 10px;
    }
    #dashboard > ul > li{
        padding: 8px;
        min-width: 45%;
        box-shadow: 0 0 7px rgba(0,0,0,0.08);
        min-height: 115px;
    }
    #dashboard > ul > li > a{
        padding: 10px;
    }

    #dashboard li a{
        padding: 6px 4px;
        font-size: 16px;
    }
    #dashboard > ul > li > a > i{
        font-size: 38px;
    }
    .footer-content {
        font-size: 76%;
    }
    .table-responsive-block thead{
        display: none;
    }


    .table-responsive-block tbody tr{
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-flow: row;
    }
    .table-responsive-block tbody td::before {
        content: attr(data-content);
        position: relative;
        display: block;
        font-size: 10px;
        line-height: 18px;
        font-weight: normal;
    }
    .table-responsive-block tbody tr td{
        width: 100%;
    }

    #tableOrdini.table-responsive-block tbody tr,
    #tabella_ordine.table-responsive-block tbody tr{
        grid-template-columns: 1fr;
    }
    #tableOrdini.table-responsive-block tbody tr td{
        grid-column: span 2;
        width: 89vw;
    }
    #tableOrdini.table-responsive-block tbody tr td:nth-child(1){
        grid-column: span 1;
        width: 42vw !important;
        font-size:110%;
        font-weight: bold;
    }
    #tableOrdini.table-responsive-block tbody tr td:nth-child(2){
        grid-column: span 1;
        width: 42vw !important;
        left: -2.2vw;
        position: relative;
    }
    #tableOrdini.table-responsive-block tbody tr td:last-child{
        text-align: right;
        border-bottom: 2px solid black;
    }
    #tableOrdini.table-responsive-block tbody tr td:last-child::before{
        display: none!important;
    }


    #tabella_ordine.table-responsive-block tbody tr td{
        grid-column: span 2;
        width: 95vw;
    }
    #tabella_ordine.table-responsive-block tbody tr td:nth-child(1){
        grid-column: span 1;
        width: 22vw !important;
        font-size: 110%;
        font-weight: bold;
    }
    #tabella_ordine.table-responsive-block tbody tr td:nth-child(2){
        grid-column: span 1;
        width: 73vw !important;
        left: 0;
        position: relative;
    }
    #tabella_ordine.table-responsive-block tbody tr td:nth-child(3){
        grid-column: span 1;
        width: 22vw !important;
        font-size: 150%;
        font-weight: bold;
    }
    #tabella_ordine.table-responsive-block tbody tr td:nth-child(3)::before{
        display: inline-block;
        margin-right: 2px;
    }
    #tabella_ordine.table-responsive-block tbody tr td:nth-child(4){
        grid-column: span 1;
        width: 73vw !important;
        left: 0;
        position: relative;
    }



    #tabella_ordine.table-responsive-block tbody tr td:last-child{
        border-bottom: 2px solid black;
    }

    .tableOrdineAdmin tr td.editableCells:nth-child(3){
        width: 33%;
    }
    .editableCells p{
        max-width: 37vw;
    }

    #formItemOrderTable.table-responsive-block tr {
        display: grid;
        grid-template-columns: auto 0 69%;

    }
    #formItemOrderTable.table-responsive-block tr td{
        display: block;
    }
    #formItemOrderTable.table-responsive-block tr td:nth-child(1){
        grid-column-start: 1;
        grid-column-end: 4;
    }


    #formItemOrderTable.table-responsive-block tr td:nth-child(2){
        grid-column-start: 1;
        grid-column-end: 2;
    }
    #formItemOrderTable.table-responsive-block tr td:nth-child(3){
        grid-column-start: 3;
        grid-column-end: 4;
    }
    #formItemOrderTable.table-responsive-block tr td:nth-child(4){
        grid-column-start: 1;
        grid-column-end: 4;
    }



    /*#tableOrdini.table-responsive-block tbody tr td:nth-child(1),
    #tableOrdini.table-responsive-block tbody tr td:nth-child(2)
    {
        width: 50%;
    }*/

    .open-sidebar{
        display: inline-block;
        float: left;
    }
    .open-sidebar a{
        display: inline-block;
        color:white;
        font-size: 26px;
        padding: 6px 0 6px 14px;
        outline: none;
    }


    /* bottom bar */
    #bottombar{
        display: block;
        position: fixed;
        width: 100%;
        left:0;
        bottom: 0;
        background-color: var(--maincolorStrong);
    }
    #bottombar > ul{
        padding-left: 0;
        margin:0px;
        display:flex;
        flex-wrap:nowrap;
        gap:2px 2px;
        align-content: space-between;

    }
    #bottombar > ul > li:nth-child(1),
    #bottombar > ul > li:nth-child(5){
        display: none;
    }
    #bottombar > ul > li{
        list-style-type: none;
        min-height: 20px;
        border:0;
        padding:4px;
        flex:20%;
        text-align: center;
    }
    #bottombar > ul > li a{
        font-size: 166%;
        color:var(--topColor);
    }
    #bottombar > ul > li a:hover{
        color:var(--topColor);
    }
    #bottombar > ul > li a span{
        display: none;
    }
    /* bottom bar */

    footer{
        padding-bottom:48px;
    }
}