@import "../colors";
@import "../mixins";

@media all and (orientation: portrait) {
  body {
    position: relative;
    top: 15px;
  }

  #main {
    -webkit-flex-flow: column;
    flex-flow: column;
    flex-direction: column;
    min-height: 125%;
    max-height: 125%;
  }

  @media (max-device-width: 1279px) {
    .myNavbar {
      min-width: 630px;
    }

    .navbarButton {
      height: 100px;
      width: 10%;
      min-width: 60px;
    }

    .navbarTitle {
      font-size: 30px;
      padding-top: 30px;
      padding-left: 5px;
      overflow: hidden;
      height: 72px;
      width: 70%;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin-left: auto;
      margin-right: auto;
    }

    .title {
      font-size: 30px;
    }

    .glyphicon {
      font-size: 35px;
    }

    .collapseSection {
      display: none;
    }

    /* Logout dialog */

    .logout-dialog.ui-dialog {
      .ui-widget-header {
        font-size: 40px;
      }
    }

    .logout-dialog.ui-widget-content {
      font-size: 280%;
    }

    .ui-dialog-buttonset {
      width: 100%;
    }

    .ui-dialog-buttonset button {
      width: 40%;
      margin-left: 5% !important;
      margin-right: 5% !important;
    }

    /* Sliding menu */

    .sliding-menu {
      width: 15%;
      height: 100%;
      position: fixed;
      top: 0;
      left: -15%;
      z-index: 1031;
      &.sliding-menu-opened {
        left: 0px;
      }
      a {
        border-bottom: 1px solid #258ecd;
        padding: 1em;
      }
    }

    .slideSection {
      float: left;
      margin-top: 100px;
      height: 100%;
      width: 100%;
    }

    .slideButton {
      display: block;
      width: 100%;
      height: calc(~'20% - 20px');
    }

    .slideSection {
      margin-bottom: 0.5%;
      &.gradientBar {
        .linear-gradient(rgb(72,76,85), rgb(65,68,77));
      }
      .btn {
        .linear-gradient(rgb(72,76,85), rgb(65,68,77));
        border-left: 1px solid extract(@darkGrey, 2);
        border-right: 1px solid extract(@darkGrey, 4);
        &.navbarIconToggleActive {
          background: extract(@darkGrey, 3);
          border-bottom: 4px solid extract(@azure, 1);
        }
        i {
          color: extract(@white, 1);
        }
      }
    }

    #darkened-screen {
      display: none;
      background: black;
      opacity: 0.7;
      z-index: 1030;
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  }

  @media (min-device-width: 1280px) {
    .myNavbar {
      min-width: 768px;
    }

    .navbarButton {
      height: 50px;
      width: 51.2px;
    }

    .navbarSection {
      min-width: 256px;
      width: 33%;
    }

    .navbarTitle {
      font-size: 16px;
      padding-top: 13px;
      width: 30% !important;
    }

    .navbarUserButtons {
      float: left;
    }

    .title {
      font-size: 14px;
    }

    #main {
      padding-top: 0;
    }

    .collapseSection {
      display: block !important;
    }

    #collapseButtonSection {
      display: none;
    }

    /* Logout dialog */

    .logout-dialog.ui-dialog {
      .ui-widget-header {
        font-size: 12px;
      }
      .ui-dialog-content {
        font-size: 11px;
      }
    }

    .logout-dialog.ui-widget-content {
      font-size: 10px;
    }
  }
}