html {
  box-sizing: border-box;
  font-family: $core-font-standard;
  height: 100%;
}
*, *:before, *:after {
  box-sizing: inherit;
}

[v-cloak], .is-hidden {
  display: none;
}

#app {
  position: relative;
  min-height: 100%;

  &.is-fullscreen {
    height: 100vh;
  }
}

// body {
// 	background-color: lighten(mc('blue-grey','50'), 5%);
//   height: 100%;
// }

// main {
//   background-color: mc('blue','500');
//   background-image: linear-gradient(to bottom, mc('blue', '700') 0%, mc('blue', '500') 100%);
//   padding: 50px;
//   min-height: 100vh;
// }
// Container

.container {
  position: relative;
}

.content {
	padding: 20px;
}

.datatable {
  th, td {
    vertical-align: middle;
  }
}

// Visibility

.is-hidden {
  display: none !important;
}

.is-hidden-until-scroll {
  max-height: 0;
  overflow: hidden;
  transition: all .6s ease;
}
.is-sticky .is-hidden-until-scroll {
  max-height: 30px;
}

.is-hidden-mobile {
  @include mobile {
    display: none !important;
  }
}

.is-hidden-tablet {
  @include tablet {
    display: none !important;
  }
}

.is-hidden-tablet-only {
  @include tablet-only {
    display: none !important;
  }
}

.is-hidden-touch {
  @include touch {
    display: none !important;
  }
}

.is-hidden-desktop {
  @include desktop {
    display: none !important;
  }
}

.is-hidden-desktop-only {
  @include desktop-only {
    display: none !important;
  }
}

.is-hidden-widescreen {
  @include widescreen {
    display: none !important;
  }
}