/* BIG TABLETS 960px*/
@media only screen and (max-width: 60em) {
  html {
    font-size: 52%;
  }

  .search input {
    height: 30px !important;
  }

  .secPersonInfo {
    padding: 3rem;
    /* background-color: brown; */
  }
}

/* SMALL TABLETS 820px*/
@media only screen and (max-width: 51.25em) {
  /* html {
    font-size: 52%;
  } */

  #depSection {
    transform: translateX(-110%);
    -webkit-transform: translateX(-110%);
    -moz-transform: translateX(-110%);
    -ms-transform: translateX(-110%);
    -o-transform: translateX(-110%);
  }
  .label-dep {
    width: 45px;
  }
  .secPersonInfo {
    /* background-color: rgb(216, 187, 19); */
    width: 60%;
  }

  .main-container {
    grid-template-columns: 100%;
  }
  .fillerLocDep {
    display: none;
  }
  .deploc-off-canvas {
    height: calc(98% - 17rem);
    width: 37%;
  }
}

/* BIG PHONES 660px */
/* @media only screen and (max-width: 41.25em) {
  .secPersonInfo {
    
    width: 60%;
  }

  .deploc-off-canvas {
    width: 28%;
  }
} */

/* CELLPHONES 580px */
@media only screen and (max-width: 36.25em) {
  html {
    font-size: 62.5%;
  }
  .secAgenda {
    grid-template-rows: 7rem 3.5rem 1fr;
  }

  .name-cell {
    grid-template-columns: 100%;
  }

  .legend {
    display: none;
  }
  .inline-department,
  .inline-location {
    display: none;
  }

  .secPersonInfo {
    /* background-color: rgb(255, 5, 243); */
    width: 100%;
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
  }
  .main-container {
    grid-template-columns: 1fr;
  }

  .header-title {
    font-size: 2.5rem;
  }

  .filler-person-info {
    display: none;
  }
  .deploc-off-canvas {
    width: 28%;
  }

  .deploc-header {
    height: 5rem;
  }
  .search input {
    height: 40px !important;
  }

  .deploc-off-canvas {
    width: calc(100% - 70px);
  }
  .close-person-info {
    display: block;
  }
  h1 {
    font-size: 2.5rem;
  }
  .manage-people-icon {
    height: 4rem;
  }
  .addedit-people-icon {
    height: 3rem;
  }
  .header-modal {
    height: 5rem;
  }
}

/* SMALL PHONES 360px */
@media only screen and (max-width: 25em) {
  .addedit-people-icon {
    display: none;
  }
  .header-modal {
    justify-content: center;
  }
  .header-modal-title {
    font-size: 2rem;
    text-align: center;
  }
  /* .search input {
    height: 20px !important;
  } */
}

/* VERY SMALL PHONES 310px */
@media only screen and (max-width: 19.375em) {
  h1 {
    font-size: 2.3rem;
  }
  .manage-people-icon {
    display: none;
  }
}

/* HEIGHT */

/* PORTRAIT SMALL TABLETS 480px */
@media only screen and (max-height: 30em) {
  .city-container {
    display: none;
  }
  .info-icon {
    display: none;
  }
}

/* PHONES 430px */
@media only screen and (max-height: 26.875em) {
  .label-agenda {
    top: 120px;
  }

  .label-dep {
    top: 185px;
  }
  .label-loc {
    top: 250px;
  }
}

/* VERY SMALL PHONES 340px*/
@media only screen and (max-height: 21.25em) {
  html {
    font-size: 48%;
  }
  .label-agenda {
    top: 100px;
  }

  .label-dep {
    top: 165px;
  }
  .label-loc {
    top: 230px;
  }
  .search input {
    height: 30px !important;
  }
}

/* BIG SCREENS 1440px*/

@media only screen and (min-width: 90em) {
  html {
    font-size: 76%;
  }
}

/* TOUCHSCREEN SCREENS */

@media (hover: hover) {
  li:hover {
    background-color: rgba(0, 194, 255, 0.18);
  }
  .manage-people-icon:hover {
    background-color: rgba(255, 255, 255, 0.13);
  }
  .dep-label:hover {
    background-color: #4abbfc;
  }
  .loc-label:hover {
    background-color: #34e0b8;
  }
  .label-agenda:hover {
    background-color: #485aff;
  }
  .label-dep:hover {
    background-color: #4abbfc;
  }
  .label-loc:hover {
    background-color: #34e0b8;
  }
}