/* Small screens no nav (master only) */
@media only screen and (max-width: 1024px) {
  nav.hide {
    max-width: 0px;
    min-width: 0px;
  }

  nav {
    display: flex;
    position: absolute;
    z-index: 30;
    border-right: 0px;
  }

  #master {
    width: 100%;
  }

  #detail {
    position: absolute;
    width: 100%;
  }

  #options_list {
    top: 47px;
  }
}

/* Large screens nav (both detail and master) */
@media only screen and (min-width: 1025px) and (max-width: 1499px) {
  nav {
    display: flex;
  }

  #master {
    width: 100%;
  }

  /*
  #detail {
    position: absolute;
    width: calc(100% - 260px);
    transition: width 0.3s ease; /* Add a smooth transition for better visual effect 
}

nav.hide #detailed {
   border: 5px solid red;
}*/
  /*
  nav:not(.hide)+#detail {
    width: calc(100% - 260px);
  }

  nav.hide+#detail {
    width: 100%;
  }
*/
  #detail {
    position: absolute;
    width: 100%;
  }

  #detail.nav {
    width: calc(100% - 260px);
  }

  #options_list {
    top: 47px;
  }

}

/* Extra-large screens (both detail and master) */
@media only screen and (min-width: 1500px) {
  nav {
    display: flex;
  }

  #master {
    width: 50%;
    overflow: auto;
  }

  aside .nav_box {
    display: none;
  }
}