.des-app {
  height: 100vh;
  margin: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  width: 100%;

	main {
    height: inherit;
    display: flex;
    overflow: hidden;
    flex: 1 1 auto;
    width: 100%;

    ui-view {
      height: 100%;
      width: 100%;
      overflow: hidden;

      widgets-home-component, reports-dashboard-component {
        display: flex;
        height: inherit;
        width: 100%;

        section.dashboard {
          overflow: hidden;
          flex: 1;
          display: flex;
          flex-direction: column;
          height: initial;
          width: 100%;
          position: relative;

          .layout-flex {
            height: auto;
            flex: 1;
            display: flex;
            overflow-y: auto;
            overflow-x: hidden;
            min-height: 100%;
            width: 100%;
          }

        }
      }
    }
	}
	.navbar {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    navbar-component {
      flex: 1 0 auto;
    }
	}


  .container {
		.section {
			margin-bottom: 2.5rem;
			@media(max-width: 960px) {
				margin-bottom: 0;
			}
    }
  }
}

.btn-flat i.big-ic {
  font-size:$fz-h3;
  vertical-align: -6px;
}

h1.heading-resp {
  margin-top:    2rem;
  margin-bottom: 2rem;
  @media(max-width: 960px) {
    font-size:$fz-h2;
    line-height: 3rem;
    margin-top:    1rem;
    margin-bottom: 1rem;
  }
  @media(max-width: 480px) {
    font-size:$fz-h3;
    line-height: 2rem;
    font-weight: $fw-normal;
  }
}
.sr-button {
  margin-top:    2.5rem;
  margin-bottom: 2rem;
  @media(max-width: 960px) {
    margin-top:    1.5rem;
    margin-bottom: 1rem;
  }
  @media(max-width: 480px) {
    margin-top:    1rem;
    margin-bottom: 0;
  }
}
.sr-menu {
  position: absolute;
  z-index: 200;
  background: #efefef;
  width: 300px;
  height: 100%;
  overflow-y: auto;
  top: 0;
  right: 0;
  transform: translateX(300px);
  transition: transform 0.5s ease-in-out;
  &.is-active{
    transform: translateX(0);
  }
  .sr-menu-top {
    padding: 1.5rem;
    color: $gray-dark;
    background: $white;
    position: relative;
    .sr-menu__close {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      cursor: pointer;
      position: absolute;
      top: 1rem;
      right: 0.5rem;
      &:focus {
        outline: none;
      }
    }
    h3 {
      color: $gray-mid;
      .material-icons {
        font-size:$fz-h3;
        vertical-align: -3px;
        margin-right: 1rem;
      }
    }
    p {
      padding-top: 1.5rem;
      padding-bottom: 1.5rem;
    }
    .lay-icon {
      text-align: center;
      flex: 1 0 auto;
      color:$primary;
      transition: all .2s ease-in-out;
      span.icon {
        border-radius: 1000px;
        width: 48px;
        height: 48px;
        text-align: center;
        line-height: 48px;
        transition: all .2s ease;
        color:$primary;
        display: inline-block;
      }
      .material-icons {
        transition: all .2s ease;
      }
      span {
        display: block;
        font-family: $avizia-font;
        font-size: $fz-small;
        font-weight: $fw-normal;
        color: $gray-mid;
        line-height: 1.5rem;
      }
      &.active {
        span {
          color:$primary;
        }
      }
      &:hover, &:focus, &:active, &.active {
        .material-icons, span.icon {
          background: rgba( $primary, .26 );
        }
      }
      &.show-on-large {
        @media #{$large-and-down} {
          display: none;
        }
      }
    }
    .hide-on-small-only {
      @media #{$small-only} {
        display: none;
      }
    }
  }
  .sr-menu__items.collection {
    list-style: none;
    margin: 0;
    padding: 0;
    .sr-menu__item.collection-item {
      padding: 1rem;
      color: $gray-dark;
      position: relative;
      border-bottom:none;
      &:first-child {
        border-top: 1px solid $gray-light;
      }
      &:last-child {
        border-bottom: 1px solid $gray-light;
      }
      &:hover:not(.active), &.active:hover {
        background: transparent;
      }
      &:active {
        background: transparent !important;
      }
      .material-icons {
        position: absolute;
        left: 1rem;
        top: 50%;
        margin-top: -12px;
        color: #757575;
      }
      &.ic-left {
        padding-left: 60px;
        padding-right: 80px;
      }
      &.ic-left-empty {
        padding-left: 25px;
        padding-right: 80px;
      }
      .caption {
        display: block;
        margin: 0;
        color: $gray-mid;
      }
      .switch {
        position: absolute;
        right: 1rem;
        top: 50%;
        margin-top: -16px;
        label .lever {
          margin-left: 0;
          &:before {
            display: none;
          }
        }
      }
    }
  }
}
@media all and (min-width: 480px) {
  .sr-menu {
    transform: translateX(360px);
    width: 360px;
  }
}
body.has-active-menu {
  overflow: hidden;
  /*display:flex;
  flex-direction: row;*/
}
.sr-mask {
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 0;
  height: 0;
  background-color: black;
  opacity: 0;
  transition: opacity 0.5s, width 0s 0.5s, height 0s 0.53s;
  &.is-active {
    width: 100%;
    height: 100%;
    opacity: 0.5;
    transition: opacity 0.3s;
  }
}

/*cards*/
.h100 {
  height: 100%;
}

.card.widget {
  .toggle-body .card-content {
    background: rgba(224, 224, 224, 0.5);
  }
}
.blocks-widgets-column {
  min-height: 200px !important;
}