.body-dev:after {
  background: red;
  color: #fff;
  content: "undefined";
  left: 50%;
  opacity: 0.7;
  padding: .5em 1em;
  position: absolute;
  text-align: center;
  top: 50%;
  z-index: 99;
}
@media (max-height: 479px) and (orientation:landscape),(max-width: 479px) and (orientation:portrait) {
  .body-dev:after {
    background: orange;
    content: "xs";
  }
}
@media (min-height: 480px) and (max-height: 767px) and (orientation:landscape), (min-width: 480px) and (max-width: 767px)  and (orientation:portrait) {
  .body-dev:after {
    background: purple;
    content: "sm";
  }
}
@media (min-height: 768px) and (max-height: 1199px) and (orientation:landscape), (min-width: 768px) and (max-width: 1199px)  and (orientation:portrait) {
  .body-dev:after {
    background: green;
    content: "md";
  }
}
@media (min-height: 1200px) and (max-height: 1599px) and (orientation:landscape), (min-width: 1200px) and (max-width: 1599px)  and (orientation:portrait) {
  .body-dev:after {
    background: blue;
    content: "lg";
  }
}
@media (min-height: 1600px) and (orientation:landscape), (min-width: 1600px) and (orientation:portrait) {
  .body-dev:after {
    background: yellow;
    content: "xl";
  }
}
@media only screen  and (max-height: 479px) and (orientation:landscape),(max-width: 479px) and (orientation:portrait), (min-height: 480px) and (max-height: 767px) and (orientation:landscape), (min-width: 480px) and (max-width: 767px)  and (orientation:portrait) {
  html,
  body {
    font-size: 0.9rem;
  }
}
/*    PHONE   */
@media only screen  and (max-height: 479px) and (orientation:landscape),(max-width: 479px) and (orientation:portrait) {
  .no-xs {
    display: none!important;
  }
  .flex-swap-xs {
    flex-direction: column !important;
    justify-content: flex-start !important;
  }
  .flex-swap-xs-field {
    margin: 0 0 0.3em!important;
  }
  .period-picker {
    margin: 0;
    max-width: none;
    width: auto;
  }
  .period-picker div[data-send] {
    flex: 1;
  }
  .period-picker div[data-send]:last-child {
    border: 0;
  }
  .page-card {
    min-height: calc(100vh - 40px);
    margin: 0;
    padding: 0 0 2em 0;
  }
  .bravo-panel-field.big-field,
  .bravo-panel-field.small-field,
  .bravo-panel-field.medium-field {
    margin: 0;
    max-width: none;
    width: 100vw;
  }
  .bravo-panel-field .bg-view {
    padding: 8px !important;
    font-size: 80% !important;
    max-height: calc(100vh - 92px);
  }
  .card {
    margin: 0;
    padding: 0;
  }
  .cards-container.dialog {
    min-width: 0;
    max-width: 0;
    margin: 0 auto;
  }
}
@media only screen  and (min-height: 480px) and (max-height: 767px) and (orientation:landscape), (min-width: 480px) and (max-width: 767px)  and (orientation:portrait) {
  .no-sm {
    display: none!important;
  }
  .page-card {
    min-height: calc(100vh - 40px - 2em);
  }
  .card {
    max-height: none;
  }
  .cards-container.dialog {
    min-width: 0;
    max-width: 0;
    margin: 0;
  }
}
/*    DESKTOP     */
@media only screen  and (min-height: 768px) and (max-height: 1199px) and (orientation:landscape), (min-width: 768px) and (max-width: 1199px)  and (orientation:portrait) {
  .bravo-panel-field.small-field {
    width: 40vw;
  }
  .bravo-panel-field.medium-field {
    width: 60vw;
  }
}
/*    DESKTOP LARGER     */
/*    DESKTOP  && LARGER   */
@media only screen  and (min-height: 480px) and (max-height: 767px) and (orientation:landscape), (min-width: 480px) and (max-width: 767px)  and (orientation:portrait), (max-height: 479px) and (orientation:landscape),(max-width: 479px) and (orientation:portrait) {
  .dashboard .cards-container {
    display: flex;
    justify-content: flex-start;
  }
  .dashboard h3:first-child {
    border-bottom: 1px solid #bbb;
    background: #fff;
  }
  .dashboard .table-container {
    max-height: none;
  }
  .dashboard .card-header-cell {
    padding: 0.5em;
  }
}
/*    TO CHECK
@media screen and (max-height: 400px) {
  .bravo-panel-field{
    width:100%!important;
  }
  .bravo-panel-field .bg-view{
    max-height: calc(100vh - 89px);
    height: calc(100vh - 89px);
    overflow: hidden;
    overflow-y: auto;
  }
  .btn{
    margin: 6px;
  }
}
@media screen and (max-height: 800px) and (orientation: portrait){
  .bravo-panel-field{
 //   margin: 0!important;
  }
  .bravo-panel-field .bg-view{
    max-height: calc(100vh - 89px);
    overflow: hidden;
    overflow-y: auto;
  }
  .fullscreen{
    margin:0!important;
  }
}

@media screen and (max-height: 400px){
  .bg-right-side .collapse-btn{
    bottom: 1em;
    height:40px;
    line-height:40px;
  }
}
@media screen and (max-width: 66em){
  .side-buttons{
    margin-top: 1em;
    flex-direction: column;

  }
  .collapsed .side-buttons{
    margin-top: 0;
  }

  .collapsed .side-data{
    padding: 0;
  }
  .side-button{
    flex: 1;
  }
  .side-button i {
    font-size: 1.3em;
    color: #4e668b;
  }
  .big-green{
    font-size:18px;
  }
  .bg-workspace{

  }
  .bg-grid-wrapper.focused{
    outline: 1px solid rgba(28, 150, 113, 0.59);

  }

  .bg-right-side{
    flex: 0.0001 0 200px;
  }
  .side-container{
    padding: 0 0.6em 2em;
  }
}
@media screen and (max-width: 30em){
  .bg-right-side{
    flex: 0.0001 0 80%;
  }
  .side-container{
    padding: 0 0.6em 2em;
  }

}

/*@media screen  and (max-width: 30em) {

  .no-xs {
    display: none !important;
  }

  .navbar {
    &-title {
      max-width: 180px;
      font-size: 0.8em;
    }
    &-path {
      display: none;
    }
  }

  div.nline span{
    font-size: 12px;
  }

  .fixed-action-btn {
      bottom: 16px;
      right: 16px;
    margin-bottom: 0;
  }
  [data-accordion] div.header {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .flex-swap-xs{
    display: flex;
    flex-direction: column;
  }

}


@media screen and (min-width: 30em) and (max-width: 63.236em) {
  .no-sm {
    display: none !important;
  }

  div.nline span{
    font-size: 12px;
  }
}

@media screen and (min-width: 64em) and (max-width: 99em) {
  .no-md {
    display: none !important;
  }
}

@media screen and (max-height: 500px){
  .bravo-field-container{
    margin-top: 4px;
  }
  .fixed-action-btn{
    margin-bottom: 6px;
    right:8px;
  }
  .fixed-action-btn ul li{
    margin-bottom: 6px;
  }
}*/