.responsive-only {
    display: none;
}

.table {
    display: table;
    border-collapse: collapse;
}

.tr, .th {
    display: table-row;
}

.td {
    display: table-cell;
    padding: 2px 8px;
}

/* RESPONSIVE */


@media (max-width: 1820px) {

.simple-phone-button .dn-container .ui-selectmenu-button{
    max-width : 100px;
    min-width : 100px;
}

}

/* Large devices (desktops, less than 1280px) */

@media (max-width: 1280px) {


    .simple-phone-button .dn-container .ui-selectmenu-button{
        max-width : 150px;
        min-width : 130px;
    }

    .entity-card .card-column.column-association{
        max-width : 100%;
    }

    #device-user-associations-container .widget.user{
        float:left;
        clear: none;
    }
    .ui-layout-content.menu {
        visibility: visible;
        height: calc(100% - 59px);
        overflow-y: scroll;
    }

    .menuButtons {
        float: none;
        clear: both;
    }

    .ui-column.last {
        padding-top: 10px;
    }

    .responsive-only {
        display: block;
    }

    .box-divider,
    .box-divider-75,
    .box-divider-25 {
        width: 100%;
    }

    #container {
        width: 100% !important;
        left: 0 !important;
    }

    #header, .ui-layout-north {
        height: 0 !important;
    }

    #header #multisearch {
        position: fixed;
        z-index: 2;
        right: 33px;
        top: 9px;
    }

    .ui-layout-center {
        top: 0 !important;
    }

    #header #logo, #header #controls {
        display: none;
    }

    .ui-layout-north {
        z-index: 1 !important;
    }

    .fx-paginated-autocomplete-settings {
        position: fixed;
        right: 10px;
        top: 9px;
    }

    #header  {
        background: none !important;
        box-shadow: none;
        text-align: left;
        height: 0 !important;
        overflow: visible;
    }

    #header > div:not(.multisearch) {
        display: none !important;
    }

    #header > div.multisearch {
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 250px;
    }

    #header #multisearch {
        width: 250px;
    }

    .content {
        padding: 15px !important
    }

    .widget {
        float: none;
        clear: both;
    }

    .ui-tabs-vertical > .ui-tabs-nav {
        width: 32px;
    }

    .ui-tabs-vertical > .ui-tabs-panel > .tab-content > form {
        padding: 1em;
    }

    .ui-tabs.ui-tabs-vertical > .ui-tabs-nav > li > a {
        overflow: visible;
    }

    .ui-tabs-vertical > .ui-tabs-nav > li > a > .summary {
        display: none;
    }

    /* prov */
    #step2 input[type=radio][name=choice].radio + label.radio {
        width: auto;
        height: auto;
        padding-left: 55px;
        display: block;
        margin-right: 0;
    }

    #step2 input[type=radio][name=choice].radio + label.radio::before {
        background-size: 25px;
    }

    .param select {
        border: solid 1px #ddd;
    }

    .ui-tabs-vertical > .ui-tabs-panel > .tab-content > form .selected.user {
        margin: 25px 0 0;
    }

    #step5 .column, #wizard.bulk #step4 .column {
        clear: left;
    }

    .column {
        float: none;
        width: auto;
    }

    .devices-container {
        display: block;
        padding: 0;
        margin: 0;
    }

    .devices-container .device-row {
        position: relative;
    }

    .devices-container .device-row .counters, .devices-container .device-row .button-container {
        float: right;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        padding-top: 14px;
        width: 28px;
        font-size: 7px;
    }

    .devices-container .device-row, .devices-container .device-row {
        display: table;
        width: 100%;
    }

    .devices-container .device-row .device-item, .devices-container .device-row .device-item {
        display: table-cell;
    }

    .column > .summary > p.param > label, .column > .summary > p.param > label {
        display: block;
        min-width: 0;
        font-style: italic;
        font-weight: normal;
    }

    fieldset.buttonset, .fieldset.buttonset {
        text-align: center;
    }

    .building.widget::before {
        left: calc(100% + 10px);
    }

    /* prov */
    .provisioning-widget {
        width: calc(50% - 13px);
    }

    /* self care */
    #save-phone-buttons-form .box-divider-25 {
        text-align: center;
    }

    .blf-container .blf-row, .forward-container .forward-row {
        display: block;
        margin-bottom: 5px;
        background: white;
        border: 1px solid #ddd;
    }

    .blf-container .blf-row, .forward-container .forward-row {
        padding-left: 5px;
        padding-right: 5px;
    }

    .blf-container, .forward-container {
        display: block;
    }

    .phone-buttons .blf-value {
        width: auto;
    }

    table.phone-buttons {
        margin: auto;
    }

    table,
    .table {
        width: 100%;
    }

    /* menu */
    .subtitle {
        background-position: left 51px center;
        background-size: 26px;
        padding: 2px 2px 2px 86px;
        min-height: 40px;
        overflow: hidden;
    }

    .subtitle .crumb {
        background-position: left 36px center!important;
        background-size: 33px!important;
        min-height: 0;
        padding: 3px 0 3px 20px!important;
        height: 33px;
        margin: 0;
    }

    .subtitle.user .crumb:not(.back) {
        margin: 0px 0px 0px 15px;
    }

    .subtitle .crumb.back {
        padding: 13px 0 13px 74px !important;
        margin: -9px 33px -15px -70px;
        min-height: auto;
    }

    .subtitle.ms365_resource_account > .crumb.back::before ,
    .subtitle.autoAttendant > .crumb.back::before,
    .subtitle.holiday > .crumb.back::before,
    .subtitle .crumb.back:before {
        font-size: 24px;
        left: 40px;
        top: 16px;
    }

    .subtitle .crumb.back.linked::after {
        top: -4px;
    }

    .subtitle .crumb .widget {
        padding-top: 0;
        padding-bottom: 0;
    }

    .subtitle .crumb .avatar {
        top: 0;
        width: 32px!important;
        height: 32px!important;
    }

    .subtitle .title {
        color: white;
        margin-top: 0;
        margin-bottom: 0;
        line-height: 22px;
    }

    .subtitle .widget .title {
        font-size: 21px;
        line-height: 21px;
    }

    .subtitle .widget .description {
        display: inline-block;
        font-size: 12px;
        line-height: 14px;

    }

    .widget.user .avatar-container.user.sync::after {
        top: -2px;
        right: -2px;
    }

    .actions.toolbar {
        background: #429014;
        border: 0;
        padding: 2px;
    }

    .actions.toolbar .favorites-button {
        height: 36px;
        margin-top: -2px;
    }

    .actions.toolbar .favorites-button:before {
        content: " ";
        border: 0;
        border-top: 18px solid transparent;
        border-bottom: 18px solid transparent;
        border-left: 10px solid #515151;
        position: absolute;
        top: 0;
        right: -9px;
    }

    .actions.toolbar .favorites-button:after {
        content: none;
    }

    .actions > input.search {
        margin-left: 14px;
        margin-bottom: 2px;
        margin-top: 2px;
        min-width: 160px;
    }

    .actions.toolbar #create-special-number-form {
        padding: 3px 0px 3px 5px;
    }

    .advanced-form-menu.ui-menu {
        left: 0 !important;
    }

    h1.title {
        font-size: 12px!important;
        line-height: 15px!important;
    }

    h2.description {
        font-size: 12px;
    }

    #formMask table tr td[data-label=""] {
        text-align: left;
    }

    table tr td > .ui-selectmenu-button, table tr td > input[type="text"] {
        padding-left: 6px;
        padding-right: 6px;
    }

    table tr td > .ui-selectmenu-button, table tr td > input[type="text"].speeddial-label , table tr td > input[type="text"]{
        width: calc(100% - 32px) !important;
    }

    table tr td > .ui-selectmenu-button .ui-selectmenu-text {
        padding-left: 0;
    }

    .param .loadable table tr td > .param {
        width: calc(100% - 40px);
    }

    .param .loadable table tr td > .param > .ui-selectmenu-button {
        width: 100% !important;
    }

    .event-hierarchy li {
        display: inline-block;
    }

    .ui-column {
        float: left;
        margin-right: 15px;
    }

    .button-line-input .numberInput {
        display: table-footer-group;
        width: 100%;
    }

    .simple-phone-button {
        display: inline-flex;
    }

    .simple-phone-button span.site {
        display: inline;
    }

    .button-line-input .ui-selectmenu-button {
        display: inline-block;
    }

    .box-divider.box-avatar{
        text-align: left;
    }
}

/* Medium devices (tablets, less than 992px) */

@media (max-width: 991.98px) {

    .sub-card .widget,.crumb .widget.user{
        width: auto !important;
        display : inline-block !important;
    }

    .widget.user{
        width: calc(100% - 60px);
        display: block;
    }


    .uri .param .label{
        display : inline-block;
    }
    .uri .uri {
        height:auto;
    }
    .uri .param{
        display:block;
    }

    .provisioning-widget {
        width: calc(50% - 13px);
        margin: 5px;
    }

    .ui-column.last {
        float: left;
        padding-top: 10px;
    }

    .menuButtons {
        max-width: 100%;
        float: none;
        clear: both;
    }

    .avatar-container {
        margin: 0 5px;
    }

    .param.workspace {
        padding: 8px 0 8px 0px;
    }

    .userDescription .param {
        width: 45%;
        max-width: 45%;
        display: inline-block;
        text-overflow: ellipsis;
    }

    .ui-column {
        width: 100%;
    }

    .avatar-container.big {
        align-items: center;
        margin-left: auto;
        margin-right: auto;
    }

    .widget .avatar-container {
        margin: 0;
    }

    .hunt-pilot .widget .avatar-container{
        margin: auto;
    }

    .param {
        padding-right: 0;
    }

    .param + .button {
        margin-left: 5px;
    }

    .paginateContainer, .countContainer {
        padding-right: 0;
    }

    /* menu */

    .subtitle .crumb .widget .avatar-container {
        top: 0 !important;
    }

    .subtitle .crumb:not(.back){
        width : calc(100% - 550px) !important;
    }

    .subtitle .crumb .widget{
        width : 100% !important;
    }

    .subtitle .crumb .widget .description{
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        width: 100%;
    }
    /* cards */

  /*  .entity-card .card-column {
        width: 50%;
    }
*/
    .entity-card .card-column.column-picture  {
        max-width: 260px;
    }


}

/* Small devices (landscape phones, less than 768px) */

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

    .subtitle .crumb:not(.back){
        width : auto !important;
    }
    .subtitle .crumb:not(.back) .widget .description{
        width : auto !important;
    }


    #available-services-dialog  .highlightTextarea button{
        right : 1px;
    }

    #available-services-dialog .param .label+ .highlightTextarea{
        width : calc(100% - 3px) !important;
    }
    #available-services-dialog .param .label+ .highlightTextarea{
        width : calc(100% - 3px) !important;
    }
    #available-services-dialog .param .label{
        width : calc(100% - 5px) !important;
    }
    #available-services-dialog .param .label+ .highlightTextarea textarea{
        height : 34px !important
    }
    .avatar-container.user .avatar.scaler {
        margin: 0px auto 0 auto;
    }
    .uri .uri {
        height:auto;
    }
    .uri .param{
        display:block;
    }

    .subtitle .crumb .avatar {
        margin: 0 auto 0 auto;
    }

    /* layout */
    #apply-user-template-dialog-content {
        display: block;
    }

    /* multisearch */
    #multisearch {
        display: none;
    }

    .ui-layout-container .header.ui-autocomplete {
        background: #ffffff;
    }

    .ui-layout-container .header.ui-autocomplete .ui-menu-item.ui-state-focus {
        background: #eee;
    }

    /* login */

    .loginicon {
        position: relative;
    }


    .loginModal {
        width: auto;
        height: auto;
        position: relative;
        top: 0;
        left: 0;
        margin-top: 0;
        margin-left: 0;
        -webkit-animation: none;
        -moz-animation: none;
        animation: none;
        box-shadow: none;
    }


    .loginerror {
        color: white;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 2px;
        background: red;
    }

    .loginModal .buttons {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 2px;
    }

    .avatar.scaler {
        position: relative;
        margin: 24px auto 0 auto;
    }

    .avatar.hunPilot {
        margin: 0 auto 0 auto;
    }


    html, body {
        background: #fff;
        min-width: 0;
        height: auto;
    }

    .content {
        padding: 7px !important;
    }


    .loginModal .avatar {
        top: 61px;
    }

    .logincontent {
        padding: 15px;
        margin: 0;
        position: relative;
        top: 115px;
    }


    .cell {
        clear: left;
        text-align: center;
        width: 100%;
    }

    /* forms */
    fieldset legend, .fieldset .legend {
        font-size: 13px;
        text-align: center;
    }

    fieldset fieldset, .box-container fieldset,
    fieldset .fieldset, .box-container .fieldset,
    .fieldset .fieldset {
        /* fix for device page*/
        margin-left: -7px;
        margin-right: -7px;
        border-radius: 0 !important;
    }

    /* buttons */
    .button {
        line-height: 22px !important;
    }

    .button::before {
        line-height: 28px !important;
    }

    .actions .button::before {
        line-height: 32px !important;
    }

    .button::after {
        line-height: 32px !important;
    }

    .button.small {
        padding: 2px;
    }

    .button.small::before {
        line-height: 26px !important;
    }

    .button .ui-button-text {
        height: 18px;
    }

    table tr td .param + .button.dn-matrix {
        line-height: normal !important;
        margin: 0;
    }

    .ui-column.last {
        float: left;
        padding-top: 10px;
    }

    .menuButtons {
        max-width: 100%;
        float: none;
        clear: both;
    }

    .menuButtons .button, .actions .button {
        width: calc(50% - 4px);
        margin: 2px !important;
        clear: none;
        float: left;
        box-sizing: border-box;
        text-align: center;
    }

    /* Notifications */
    .ui-pnotify {
        top: 0;
        left: 0;
        right: 0 !important;
        width: auto !important;
        box-shadow: 0 0 30px #000;
    }

    .ui-pnotify-container {
        border-top: 0;
        border-left: 0;
        border-right: 0;
        border-bottom-width: 2px;
        border-radius: 0;
    }

    .ui-pnotify-title {
        display: none;
    }

    /* widget */
    .widget-container {
        background: none;
        border: 0;
        padding: 0;
        display: inline-block;
    }

    input + .widget-container {
        margin-top: 5px;
        float: left;
        display: block;
    }

    .widget-container + div > input.search {
        margin-top: 5px;
    }

    .avatar.scaler {
        height: 36px;
    }

    .widget a.close-button, .widget a.unlink-button {
        visibility: visible;
        opacity: 0.3;
        bottom: 0;
        height: auto;
    }

    .widget.locked::before {
        background-size: 6px;
        background-color: #222;
        width: 14px;
        height: 14px;
        border-radius: 50px;
    }

    .building.widget::before {
        width: 32px;
        height: 32px;
        left: 5px;
        top: 8px;
        background: url(../img/gear.png) no-repeat left center #ffffff;
        background-size: 32px;
        border-radius: 50px;
    }

    /* input */
    input[type=checkbox].checkbox + label.checkbox {
        padding-right: 0;
    }

    .element {
        line-height: 31px !important;
        display: block;
    }

    .element > * {
        display: block!important;
        text-align: center;
        max-width: none!important;
    }

    .line .device-avatar-line {
        margin-top: 2px;
    }



    fieldset .label, .fieldset .label {
        width: auto;
    }

    .actions.toolbar form .param {
        padding-top: 3px;
        padding-left: 10px;
    }

    .param .label {
        display: block;
        min-width: 0;
        float: left;
        clear: none;
        width: 50%;
        line-height: 28px;
    }

    .param .long-label {
        width: 90%;
        white-space:normal;
    }

    .param > select, .param > .ui-selectmenu-button, .param > .chosen-container,
    .param > input[type="text"], .param > input[type="password"],
    .param > .value, .param > .fx-paginate-select-container, .param > .highlightTextarea, .param > textarea {
        display: block;
        min-width: 0;
        float: left !important;
        clear: none;
        box-sizing: border-box;
        margin: 0;
        max-width: none;
        width: 100% !important;
        margin-bottom: 3px;
    }

    .param .dn-container {
        min-width: 0;
        float: left !important;
        clear: none;
        box-sizing: border-box;
        margin: 0;
        max-width: none;
        width: 100% !important;
    }

    .param .ui-spinner {
        display: table;
        min-width: 0;
        float: left !important;
        clear: none;
        margin: 0;
        max-width: none;
        width: 100% !important;
    }

    .param .label + select, .param .label + select + .ui-selectmenu-button, .param .label + .chosen-container, .param .label + .ui-spinner,
    .param .label + input[type="text"], .param .label + input[type="password"],
    .param .label + .value, .param .label + select + .fx-paginate-select-container, .param .label + .highlightTextarea, .param .label + textarea {
        width: calc(50% - 6px) !important;
        box-sizing: border-box;
        margin-top: 2px;
        margin-left: 3px !important;
    }

    .param input[type=radio].radio + label.radio, input[type=checkbox].checkbox + label.checkbox {
        text-overflow: ellipsis;
        overflow: initial;
        display: table-cell;
        white-space: pre-line;
    }

    .param .param-floater {
        display: block;
        margin-left: calc(50% + 2px);
        text-align: left;
        clear: both;
    }

    .param > .title {
        text-overflow: ellipsis;
        overflow: hidden;
        display: block;
        text-align: center;
    }

    table tr td > input[type="text"].speeddial-label {
        width: calc(50%) !important;
        margin: 0;
    }

    .highlightTextarea {
        position: relative;
        display: inline-block;
        width: 50% !important;
        vertical-align: middle !important;
    }

    .actions form {
        display: block;
    }

    .ui-dialog .param .label {
        margin-right: 5px;
        width: calc(50% - 5px);
    }

    .ui-spinner > input[type="text"] {
        width: calc(100% - 30px);
    }

    .filter-hunt {
        max-width: calc(100% - 60px);
    }

    /* chosen fix  	 */
    .param .chosen-container-single .chosen-search input[type="text"] {
        float: none;
        width: 100% !important;
    }

    .param .highlightTextarea .highlightTextarea-container {
        width: calc(100% - 14px) !important;
        left: 1px !important;
    }

    .param .highlightTextarea .ui-autocomplete-input {
        width: 100% !important;
        box-sizing: border-box;
        margin: 0 !important;
    }

    .skill-bar {
        width: calc(100% - 111px);
    }

    /* tables */
    table:not(.softplate):not(.navplate):not(.numplate),
    table:not(.softplate):not(.navplate):not(.numplate) thead,
    table:not(.softplate):not(.navplate):not(.numplate) tbody,
    table:not(.softplate):not(.navplate):not(.numplate) td,
    table:not(.softplate):not(.navplate):not(.numplate) tr,
    .table, .table .thead, .table .tbody, .table .td,
    table:not(.softplate):not(.navplate):not(.numplate) .tr {
        display: block;
    }

    table td[data-label]::before,
    .table .td[data-label]::before {
        content: attr(data-label);
        position: relative;
        white-space: nowrap;
        font-weight: bold;
        width: 50%;
        text-overflow: ellipsis;
        overflow: hidden;
        display: block;
        float: left;
    }

    table tr td > .ui-selectmenu-button, table tr td > input[type="text"] {
        width: calc(50% - 20px) !important
    }

    table thead, table th,
    .table .thead, .table .th {
        display: none;
    }

    table td,
    .table .td {
        position: relative;
        text-overflow: ellipsis;
        overflow: hidden;
        padding: 8px 10px;
        line-height: 26px;
    }

    table tr,
    .table .tr {
        margin-bottom: 15px;
        margin-top: 1px;
        border: 1px dotted rgba(0, 0, 0, .1);
        display: block;
    }

    table tr td table tbody, .box-divider .table {
        border: 1px solid #ddd;
        background: #f5f5f5;
        padding: 5px;
    }

    table tr td table tr, .box-divider .table .tr {
        margin-bottom: 5px;
        background: #fff;
    }

    table tr td table tr:nth-child(odd), .box-divider .table .tr:nth-child(odd) {
        background: #e2f3ff;
    }

    table tr td table tr td[data-label=''], .box-divider .table .tr .td[data-label=''] {
        display: none;
    }

    table td input,
    .table .td input {
        width: calc(50% - 6px) !important;
        box-sizing: border-box;
    }

    table tr td .param + .button.dn-matrix {
        margin-top: 0;
    }

    .table .td .event-title .event-item,
    table td .event-title .event-item {
        font-style: italic;
        text-transform: none;
        color: #000000;
        line-height: 8px;
    }

    .badge-container {
        text-align: left;
    }


    .box-container .ui-accordion-header .label, .ui-accordion-header .index, td.handle > span.reorder {
        display: inline-block;
        width: 30px;
        padding: 0;
        background-color: rgba(170, 170, 170, 0.4);
    }

    .fx-datatable-slider table tr td .event-title {
        display: inline-block;
        vertical-align: top;
        line-height: 18px;
        white-space: normal;
    }

    .fx-datatable-slider table tr td .event-title * {
        vertical-align: bottom;
    }

    .fx-datatable-slider table tr td .event-title > .icon {
        vertical-align: middle;
    }

    table .badge-container {
        display: inline-block;
        width: 50%;
    }

    table .badge {
        width: calc(100% - 20px);
    }

    /* prov */
    .time > span {
        float: none !important;
        display: block;
        padding: 8px 5px;
        text-align: center;
    }

    #wizard.bulk #step4 .device-row .button-container .more.warning {
        display: none !important;
    }

    .ui-tabs-vertical > .ui-tabs-panel > .tab-content > h1 {
        font-size: 12px;
    }

    .column {
        float: left;
        width: 50%;
        display: block;
    }

    .column:after {
        content: "";
        clear: both;
        box-sizing: border-box;
    }

    .summary-field {
        vertical-align: bottom;
    }

    .container-summary {
        display: inline-block;
        max-width: 50%;
        white-space: normal;
        line-height: 20px;
    }

    .container-summary > * {
        overflow: visible;
        line-height: 20px;
        line-height: 1.8em;
        vertical-align: initial;
    }

    /* Toolbar */
    .actions.toolbar #create-special-number-form {
        padding-top: 0;
    }

    .actions.toolbar #create-special-number-form .button.valid.save {
        width: auto;
        line-height: 17px !important;
    }

    .actions.toolbar #create-special-number-form > * {
        float: left;
        margin: 3px !important;
    }

    .actions.toolbar #create-special-number-form .button.valid.save:before {
        line-height: 24px !important;
    }

    /* Notifications */
    .ui-pnotify-text {
        line-height: 16px;
    }

    /* ui-autocomplete */
    .ui-layout-container .ui-autocomplete {
        width: calc(100% - 15px) !important;
        left: 5px !important;
    }

    .ui-dialog .ui-dialog-content ~ .ui-autocomplete {
        position: fixed;
        left: 5px !important;
        top: 60px !important;
    }

    /* audit */
    #audit-grid table td[data-label]::before {
        width: 35%;
    }

    #audit-grid table td[data-label] > *:only-child {
        width: 65%;
    }

    /* devices */
    /* fix a forced up scrolling bug */
    #devices .sticky, #template-form .sticky, #home-page .sticky {
        position: absolute !important;
    }

    /** Personalization */
    .device-personalization {
        text-align: center;
    }

    .device-personalization p {
        display: inline;
    }

    .device-personalization .alert::after {
        display: none;
    }

    .device-personalization .device-info {
        display: block;
    }

    .device-personalization #device-background-list-container {
        margin: 0;
        padding-top: 0;
        text-align: left;
        max-width: none;
        display: block;
    }

    .device-header {
        margin-left: 0;
    }

    .device-display-container, .device-display-container .model-display-picture {
        display: table;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0;
    }

    #personalize-devices-dialog .image-input-selector h3 {
        font-size: 13px;
        font-family: 'robotoregular', Lato, Helvetica, Arial, sans-serif;
    }

    /* cards */

    .entity-card .card-column {
        width: calc(100% - 30px) !important;
        max-width: none !important;
    }



    .entity-card .card-column .device-picture-container {
        text-align: center;
    }

    .entity-card .line-avatar{
        text-align: center;
    }

    .crumb:not(.back){
        max-width:200px;
    }
    .container-summary{
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .device-phone-button .label.drag-button{
        width : 60px !important;
        padding: 0 10px!important;
    }
    .device-phone-button .param .label{
        width: calc(50% - 20px) !important;
    }

    .device-phone-button .buttons{
        display:inline-block;
        float:none;
    }

    .ring-setting-grid thead{
        display:none ;
    }

    .site-variable .buttons {
        vertical-align: top;
    }
    span.input-icon {
        float: left;
        margin-left: 3px;
    }
}


/* Extra small devices (portrait phones, less than 576px) */
@media screen and (max-width: 575.99px) {

    .entity-card .sub-card .widget{
        width: calc(100% - 60px) !important;
        display: block !important;
    }
    .template-name.label {
        max-width: 149px;
    }

    /* home page */
    .ui-column.last {
        float: none;
    }

    #user-menu {
        margin: 0 auto;
        display: inherit;
        padding-top: 15px;
    }

    /* menu */

    .subtitle .crumb .avatar, .widget.user .avatar-container.user.sync::after {
        display: none;
    }

    .subtitle .crumb .widget {
        padding-left: 0 !important;
    }

    .crumb:not(.back){
        max-width:100px;
    }
        /* ui-dialog */
    .ui-dialog .param .label {
        margin-right: 0;
        width: 100%;
    }

    /* params */
    .param .label + select, .param .label + select + .ui-selectmenu-button,
    .param .label + .chosen-container, .param .label + .ui-spinner, .param .label + input[type="text"],
    .param .label + input[type="password"], .param .label + .value, .param .label + select + .fx-paginate-select-container,
    .param .label + .highlightTextarea, .param .label + textarea {
        margin: 0;
        width: 100% !important;
    }




    .param .param-floater {
        padding: 4px 0;
        float: right;
    }

    .param .fx-paginate-select-container {
        width: calc(100% - 10px);
    }

    /* prov */
    .provisioning-widget {
        width: 100%;
        margin: 5px 0;
    }

    .devices-container .device-row .device-item .widget.device {
        max-width: calc(100% - 58px);
    }

    .param {
        padding-bottom: 5px;
        padding-right: 10px;
    }

    .param .label {
        display: block;
        min-width: 0;
        clear: none;
        width: 100%;
        line-height: 28px;
        float: none
    }

    .devices-container .device-row .button-container {
        position: relative;
    }

    /* inputs */
    input[type=checkbox][disabled].checkbox + label.checkbox, input[type=checkbox].disabled.checkbox + label.checkbox {
        white-space: pre-line;
        display: table-cell;
    }

    input[type=checkbox].checkbox.common.setting.quiet + label.checkbox {
        display: none;
    }

    /* fieldset */
    .fieldset, .box-container {
        overflow: hidden;
    }

    .ui-accordion .ui-accordion-content.advanced-options {
        padding: 10px;
    }

    /* audit */
    .fx-datatable-slider table tr td .event-title {
        width: 50%;
    }

    .fx-datatable-slider table tr td .event-title > * {
        display: inline-block;
    }

    .fx-datatable-slider table tr td .event-title *:not(.icon) {
        margin-right: 3px;
    }

    /* cards */

    .entity-card {
        padding-left: 0;
        padding-right: 0;
    }

    .entity-card .card-column.column-params {
        min-width: auto;
    }

    .badge-container {
        text-align: center;
    }

    .fieldset .legend{
        font-size : 11px;
        padding : 9px;
    }

    .event-info h1{
        padding : 10px 0px 10px 0px;
    }

    .event-info .badge-container{
        text-align: center;
    }

    .event-info .event-status{
        display:contents;

    }

    .param .label {
        width: 100% !important;
        font-weight: bold;
        margin-bottom: 5px;
        float: none;
    }
    .ui-accordion-header.empty .ui-icon {
        display:none !important;
    }
    .box-container .ui-accordion-header.empty {
        padding:3px;
    }
    .ui-accordion-header .value{
        margin:0px;
    }

    .site-variable .buttons {
        vertical-align: bottom;
    }

}

/* Extra small devices (portrait phones, less than 400px) */
@media screen and (max-width: 400px) {
    html {
        /* 		zoom: 0.9;		 */
    }

    /* home */
    .ui-column {
        width: 100%;
    }

    #user-menu {
        max-width: 100%;
    }

    .widget-container {
        width: 100%;
    }

    #user-form .widget-container .widget.phone {
        width: calc(100% - 80px);
    }

    .fieldset {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .box-content {
        padding: 5px;
    }

    .ui-tabs .ui-tabs-panel {
        padding: 0;
    }

    /* menu */

    .subtitle {
        padding-top: 0;
        padding-left: 0;
        padding-bottom : 0;
    }

    .subtitle .crumb {
        width: 100%;
    }

    .subtitle .crumb.back {
        padding: 7px 0 0px 74px !important;
        height: 33px;
        margin: 0px 33px 0px 14px;
    }

    .subtitle .crumb.back.linked {
        height: 33px;
    }

    .subtitle .crumb .avatar {
        display: block;
        position: relative;
        float: left;
        margin: 0 0;
    }

    .subtitle .crumb .widget.user .avatar-container.user {
        display: block;
        position: relative;
        float: left;
        margin-right: 15px;
    }

    .subtitle .crumb .widget.user .avatar-container.user.sync::after {
        display: block;
    }

    .subtitle .crumb.back:before {
        top: 10px;
    }

    .subtitle>.title {
        padding-left : 86px;
    }

    .subtitle>.description{
        padding-left : 86px;
    }

    /* login */
    .loginModal .logincontent {
        background-size: 60%, 0;
    }

    /* buttons */
    .menuButtons {
        float: none;
    }

    .cell > input {
        box-sizing: border-box;
        display: block;
        width: 100%;
        margin: 0;
    }

    .menuButtons .button, .actions .button, .ui-dialog .ui-dialog-buttonpane .button,
    .ui-dialog .ui-dialog-buttonpane .button.save {
        width: calc(100% - 4px);
        margin: 0 0 3px 0;
    }

    .menuButtons .menu.item {
        width: calc(50% - 10px);
        margin-right: 5px;
        line-height: 50px;
        line-height: 24px;
    }

    /* ui-dialog */
    .ui-dialog .ui-dialog-content img {
        max-width: 100%;
    }

    .ui-dialog .param {
        padding-top: 2px;
        padding-bottom: 8px;
    }

    .action.less.button, .action.more.button {
        width: calc(50% - 4px);
    }

    .scheduler-option.button {
        margin-right: 0 !important;
        padding: 3px 16px 5px 30px !important;
}

   .scheduler-option>.ui-button-text{
        display : inline ;
    }



        /* provisioning */
    #step2 input[type=radio][name=choice].radio + label.radio {
        padding-left: 16px;
    }

    #step2 input[type=radio][name=choice].radio + label.radio::before {
        display: none;
    }

    .devices-container .device-row .device-item .widget.device {
        max-width: calc(100% - 75px);
    }

    /* input */
    #user-form .param {
        border-top: 1px dashed rgba(0, 0, 0, 0.1);
        padding-top: 11px;
    }

    #user-form .param:first-of-type {
        border-top: 0;
    }

    .toolbar .param {
        border-top: 0;
        padding: 0px 3px;
    }

    .toolbar .param .label {
        line-height: 18px;
        text-align: center;
    }

    fieldset .param:first-of-type, .fieldset .param:first-of-type,
    .content .param:first-of-type {
        border-top: 0;
        margin-top: 0;
    }

    fieldset .event-children {
        padding-left: 0;
        padding-right: 0;
    }

    /* forms */
    fieldset legend, .fieldset .legend {
        width: 100%;
        text-align: left;
    }

    .event-children > div .tree {
        padding-top: 5px;
    }

    .event-children > legend > .option {
        display: contents;
    }

    .param .loadable table tr td > .param {
        width: calc(100% - 32px);
    }

    .box-container .fieldset .fieldset, .fieldset .legend + .fieldset {
        padding-top: 30px;
    }

    .fieldset .fieldset {
        padding-top: 30px;
    }

    .box-container .fieldset .fieldset .legend {
        text-align: left;
    }

    .legend input[type=checkbox].checkbox + label.checkbox {
        height: 20px;
        padding-left: 20px;
    }

    .param .label + select, .param .label + select + .ui-selectmenu-button, .param .label + .chosen-container, .param .label + .ui-spinner,
    .param .label + input[type="text"], .param .label + input[type="password"],
    .param .label + .value, .param .label + select + .fx-paginate-select-container, .param .label + .highlightTextarea, .param .label + textarea {
        min-width: 0;
        max-width: none;
        width: calc(100% - 10px) !important;
        box-sizing: border-box;
        display: block;
        margin: 0;
    }

    .param > .value{
        white-space: normal;
    }


    .param .label {
        width: 100% !important;
        font-weight: bold;
        margin-bottom: 5px;
        float: none;
    }

    .param .label label {
        max-width: 100%;
        white-space: normal;
    }

    .param .param-floater {
        width: auto;
        display: block;
        margin: 0;
        text-align: left;
        clear: both;
    }

    .ui-tabs .ui-tabs-panel >.box-content{
        padding:0px;
    }

    input[type=checkbox].checkbox + label.checkbox {
        white-space: normal;
        max-width: calc(100% - 90px);
        height: auto;
    }

    input[type=checkbox].checkbox.override + label.checkbox,
    input[type=checkbox].checkbox.common.setting + label.checkbox {
        padding-left: 20px;
    }

    .fieldset .label input[type=checkbox].checkbox.override + label.checkbox {
       padding-left: 20px;
    }

    .fieldset .label input[type=checkbox].checkbox.common.setting + label.checkbox,
    .fieldset input[type=checkbox].checkbox.common.setting + label.checkbox {
        padding-left: 15px;
    }

    .fieldset input[type=checkbox].checkbox.override + label.checkbox,
    .fieldset input[type=checkbox].checkbox.override:checked + label.checkbox {
        min-width: 12px;
    }

    .param input[type=radio].radio + label.radio {
        width: 100%;
        display: block;
    }

    .actions > input.search {
        margin-left: 10px;
    }

    .archetype.container .archetypes-header .param, .archetype.container .archetypes-header .param > .ui-selectmenu-button {
        width: 32px !important;
    }

    /* table */
    table.phone-buttons td[data-label].ui-sortable-handle:before,
    .table.phone-buttons .td[data-label].ui-sortable-handle:before {
        display: none;
    }

    table#search-result td[data-label]:before,
    .table#search-result .td[data-label]:before {
        display: none;
    }

    table td,
    .table .td {
        text-align: center;
    }

    table td input,
    .table .td input {
        width: calc(100% - 6px) !important;
        box-sizing: border-box;
    }

    table tr td > input[type="text"].speeddial-label, .highlightTextarea {
        width: 100% !important;
        margin: 0;
    }

    table td[data-label]::before,
    .table .td[data-label]::before {
        content: attr(data-label);
        position: relative;
        white-space: nowrap;
        font-weight: bold;
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        display: block;
        float: left;
    }

    table tr td > .ui-selectmenu-button, table tr td > input[type="text"] {
        width: calc(100% - 20px) !important
    }

    .box-divider > .summary > p.param > label, .box-divider > .summary > p.param > label {
        min-width: 100px;
    }

    .ui-accordion-content .box-container {
        margin: 0 0 5px 0;
    }

    .ui-accordion-content .box-container .box-content {
        padding: 5px;
    }

    .ui-accordion-content .box-container .ui-accordion-content .fieldset {
        padding-left: 5px;
        padding-right: 5px;
        margin-top: 0;
        padding-top: 25px;
    }

    .fieldset .content {
        padding-top: 35px !important;
    }

    /* widgets */
    .param .widget-container {
        width: 100%;
    }

    .param .widget-container .widget {
        width: calc(100% - 60px);
        float: left;
        margin-right: 0;
    }

    .param .value {
        margin-left: 0 !important;
        text-align: center;
    }



    /* fx-paginate */
    .fx-paginate-select-item {
        max-width: 100%;
    }

    .entity-card .param .label {
        font-weight: normal;
        text-align : center;
    }
    .widget-container .widget.device{
        width: calc(100% - 85px) !important;
        display: block !important;
    }

    .template-name.label {
        max-width: 30px;
    }

    .widget > .avatar-container .avatar {
        margin: auto auto auto 4px;
    }

    .loadable::after {
        background-size: 30px;
    }

    .hunt-pilot-accordion .hunt-pilot.widgets{
        padding:0px;
    }

    .hunt-pilot-accordion .hunt-pilot.widgets .widget{
        width: 100%;
    }
    .crumb:not(.back){
        max-width:200px;
    }

    .progress-bar {
        min-width : 0px !important;
    }

    .fas.event{
        display : inline;
    }
    .container-summary{
        max-width: 100%;
    }
    .user-title .user-display {
        width: 40%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block !important;
    }
    .user-title .progression-container {
        width : 10%;
        display: inline-block;
    }
    .user-title .user-photo{
        display: inline-block;
    }

}

/* Mega thin */
@media screen and (max-width: 300px) {
    html {
        /* 		zoom: 0.8; */

    }

    .crumb .widget.user {
        width: calc(100% - 60px) !important;
        display: block !important;
    }
    .user-title .user-display {
        width: 30%;
    }
    .user-title .progression-container {
        width : 10%;
    }
}

/* Mini height FIXES */

@media screen and (max-height: 400px) and (max-width: 1280px) {

    .loginModal #submit, .loginModal #submit:hover {
        height: 50px;
        background-size: 40px !important;
        margin: 15px;
    }
}

/* Tabs */

.ui-tabs-vertical {
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
}


@media screen and (min-width:401px) and (max-width: 768px) {
    .entity-card .card-column.column-params .param .label, .entity-card .card-column.column-params .param .value {
        width: calc(50% - 3px) !important;
    }
    .entity-card .card-column.column-params .param .label, .entity-card .card-column.column-params .param .label {
        width: calc(50% - 3px) !important;
    }

    .entity-card .param .label, .entity-card .param .value{
        width: calc(50% - 3px) !important;
    }
}

/* context menu */

@media screen and (max-width: 768px) , screen and (max-height: 768px) {

    .ui-contextmenu {
        vertical-align: middle;
        left: 0 !important;
        right: 0;
        top: 20% !important;
        width: 80%;
        margin: auto;
        outline: 50000px solid rgba(0, 0, 0, 0.1);
        z-index: 1;
    }

    .ui-menu .ui-menu-item {
        padding: 10px 12px 8px 10px;
        font-weight: bold;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .ui-menu .ui-menu-item:before {
        margin-right: 8px;
    }

    .advanced-form-menu .ui-menu-item {
        padding-left: 22px;
    }


}

/* ie svg into giff */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    html #loader {
        opacity: 0.6;
        filter: alpha(opacity=60);
        background: url(../img/l6.gif) no-repeat center center #fff;
    }

    .loadable::after  {
        background: url(../img/l6.gif) no-repeat center center rgba(255, 255, 255, 0.5)
    }

    [id^=device-screenshot-container]::after ,
    .ui-tabs-panel.loading::after,
    .dataTable::after {
        background: url(../img/l6.gif) no-repeat center center #fff;
    }
}

/* END responsive */