/* Teléfonos */
@media only screen and (max-width: 575px) {
  #app > div:first-child.main-view {
    display: flex;
    flex-direction: column;
  }

  nav.the-main-menu h1 {
    width: 40px;
    background-image: url("/images/hiperme_isologotipo.png")!important;
  }

  nav.the-main-menu {
    width: 100%!important;
    flex-direction: row!important;
    justify-content: space-between;
    padding: 0 var(--column);
  }

  nav.the-main-menu .header {
    padding: inherit;
    width: 70px;
  }

  nav.the-main-menu .main.links {
    display: none;
  }
  
  nav.the-main-menu .user-buttons, 
  nav.the-main-menu .min .user-buttons {
    margin-top: inherit;
    padding: 0;
  }
  
  nav.the-main-menu.min .user-buttons {
    height: fit-content!important;
  }

  nav.the-main-menu button.button-open-close,
  nav.the-main-menu .user-buttons button {
    display: none!important;
  }

  nav.the-main-menu .el-drawer {
    background-color: var(--dark-blue);
  }

  nav.the-main-menu .open-menu {
    display: block
  }

  nav .user-email {
    display: none;
  }
  
  nav.the-main-menu .sub-header.header {
    display:none!important;
  }

  .light nav.the-main-menu .el-drawer {
    background-color: var(--light-menu-color);
  }

  .clasic nav.the-main-menu .el-drawer {
    background-color: var(--hiperpbx-grey);
  }

  nav.the-main-menu .user-email {
    display: none;
  }

  .min .user-buttons {
    flex-direction: inherit!important;
  }

  .el-drawer,
  .el-dialog {
    width: 80%!important;
  }

  /* Dashboard */
  .wrapper {
    flex-direction: column;
  }

  .wrapper > div:nth-child(1) {
    margin-right: 0
  }

  .wrapper > div:nth-child(2) {
    margin-top: var(--column)
  }
  
  .wrapper > div:nth-child(1),
  .wrapper > div:nth-child(2) {
    width: 100%!important;
  }

  /* Login */
  .login-form .image{
    display: none!important;
  }

  /* dashboard */
  .dashboard .header {
    display:block!important;
  }

  .dashboard .info-card {
    width: 100%!important;
    margin-bottom: var(--column);
  }

  /* Chat */
  .the-left-menu {
    display: none!important;
    width: 100%!important;
  }

  .the-left-menu.show {
    display: block!important;
  }

  .the-left-menu .footer {
    display: none!important;
  }

  .chat-container .min-button {
    display:none!important;
  }

  .chat-container {
    height: 94vh!important;
  }

  .el-upload-dragger { 
    width: 100% !important;
  }

  /* AgentConsole */

  .agent-logged .console {
    margin-top: 0!important;
  }

  .agent-options{
    display: none!important;
  }

  .agent-logged .console .column,
  .agent-logged .console .big-column{
    width: 100%!important;
  }

  .agent-logged .big-column {
    display: none!important
  }

  .agent-logged .hide {
    display: none;
  }

  .agent-logged .show {
    display: block!important;
  }

  .agent-logged .show-content {
    display: flex!important;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: baseline;
  }

  .agent-logged .console .big-column {
    margin: 0!important;
  }

  .agent-logged .go-back-button,
  .agent-logged .console-header {
    display:block!important;
  }

  .agent-logged .console-buttons,
  .agent-logged .call{
    margin-bottom: var(--column)
  }

  .agent-logged .console-buttons,
  .agent-logged .agent-in-break {
    display:block!important;
  }

  .agent-logged .agent-in-break {
    display:block!important;
    margin-bottom: var(--column);
  }

  .agent-logged .true-break {
    display:none!important;
  }

  .agent-not-logged img {
    width: 20em!important;
  }

  .agent-in-break .break-name {
    display:block;
  }

  .agent-in-break .header {
    align-items: center!important;
  }

  .crud-content .list {
    display: grid!important;
    grid-gap: .75em;
  }

  .crud-content .eltable {
    display: none;
  }

  .crud-content .search > div:first-child {
    width: 100%;
  }

  .crud-content .cards {
    display: grid!important;
    gap: var(--column);
    margin-top: var(--column);
  }
}