@media (max-width:767px) {
    .main #menu {
        display: none;
        width: 100%;
    }

    .main #favoricon{
        width: 100%!important
    }

    .main .navbar-brand{
        padding: 5px;
    }

    .main #menu.in {
        display: block
    }

    .main #menu #collapseIcon{ 
        height: 22px;
    }

    .main #menu #collapseIcon > span{
        display: none;
    }

    .main #menu #accordion{
        display: block
    }

    #cal-day-box .day-event {
        max-width: 100px
    }

    .bootstrap-datagrid.table-xsblock > thead > tr > th {
        display: none
    }

    .bootstrap-datagrid.table-xsblock > tfoot > tr > td {
        display: none
    }

    .bootstrap-datagrid.table-xsblock > tbody > tr {
        border-bottom: 1px solid #ddd
    }

    .bootstrap-datagrid.table-xsblock .table-cell-label {
        display: inline-block;
        vertical-align:top;
    }

    .bootstrap-datagrid.table-xsblock .table-cell-text {
        width: 60%;
        display: inline-block;
        white-space: normal;
    }

    .bootstrap-datagrid.table-xsblock > tbody > tr > td {
        width: auto !important;
        text-align: left !important;
        display: block;
        border: 0
    }



    .bootstrap-datagrid > tbody {
        height: auto !important
    }

    .bootstrap-datagrid > tbody > tr > td.datagrid-command {
        width: 25px
    }

    .bootstrap-datagrid.table-xsblock > tbody > tr > td.datagrid-command {
        width: 100%;
        text-align: right !important;
    }

    .bootstrap-datagrid.table-xsblock > tbody > tr > td.datagrid-command > [command="showCommand"]{
        margin-right: 10px;
    }

    .bootstrap-datagrid.table-xsblock > tbody> tr >td.datagrid-rownumber {
        display: none
    }

    .bootstrap-datagrid.table-xsblock > tbody> tr >td.datagrid-checkbox {
        display: none
    }

    .bootstrap-datagrid.table-xsblock .autoquerytr{
        display: none
    }

    .bootstrap-datagrid.table-xsblock .autoquery-btn{
        display: none
    }

    .table-wrapper{
        overflow-x:hidden
    }

    #chatUXQuestion {
      margin-left: 1%;
      width: 85%;
    }

    #chatUXIcon {
      margin-left: 1%;
    }
}


@media (min-width:768px) {
    #chatUXQuestion {
      margin-left: 3%;
    }

    #chatUXIcon {
      margin: 1% 2%;
    }
}

@media (max-width:479px) {
    #cal-day-box .day-event {
        max-width: 60px
    }
}

@media screen and (max-width: 640px) {
    .sw > .nav {
        flex-direction: row !important;
    }
}