@charset "utf-8";

@import './colors.scss';
@import './variables.scss';
@import './mixins.scss';
@import "../../node_modules/bulma/bulma.sass";
// @import '../../node_modules/animate.css/source/_base.css';

.hero-bg-landing01 {
    background-image: url('/images/landing-hero01.jpg');
    background-size: cover;
    background-position: center;
}

.hero-bg-landing02 {
    background-image: url('/images/landing-hero02.jpg');
    background-size: cover;
    background-position: center;
}

.hero-bg-landing03 {
    background-image: url('/images/landing-hero03.jpg');
    background-size: cover;
    background-position: center;
}

.hero-bg-landing04 {
    background-image: url('/images/landing-hero04.jpg');
    background-size: cover;
    background-position: center;
}

.hero-bg-landing05 {
    background-image: url('/images/landing-hero05.jpg');
    background-size: cover;
    background-position: center;
}

.hero {
    .navbar.darken {
        @include linearGradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, 0));
    }
}

$sizeUnit: rem;
$marginKey: 'm';
$paddingKey: 'p';
$separator: '-';
$sizes: (
    ('none', 0),
    ('xxs', 0.75),
    ('xs', 0.25),
    ('sm', 0.5),
    ('md', 1),
    ('lg', 2),
    ('xl', 4),
    ('xxl', 8),
);
$positions: (
    ('t', 'top'),
    ('r', 'right'),
    ('b', 'bottom'),
    ('l', 'left')
);

@function sizeValue($key, $value) {
    @return if($key == 'none', 0, $value + $sizeUnit);
}

@each $size in $sizes {
    $sizeKey: nth($size, 1);
    $sizeValue: nth($size, 2);
    .#{$marginKey}#{$separator}#{$sizeKey} {
        margin: sizeValue($sizeKey, $sizeValue);
    }
    .#{$paddingKey}#{$separator}#{$sizeKey} {
        padding: sizeValue($sizeKey, $sizeValue);
    }
    @each $position in $positions {
        $posKey: nth($position, 1);
        $posValue: nth($position, 2);
        .#{$marginKey}#{$separator}#{$posKey}#{$separator}#{$sizeKey} {
            margin-#{$posValue}: sizeValue($sizeKey, $sizeValue);
        }
        .#{$paddingKey}#{$separator}#{$posKey}#{$separator}#{$sizeKey} {
            padding-#{$posValue}: sizeValue($sizeKey, $sizeValue);
        }
    }
}
// .app {
//   .columns{
//     margin-bottom: 0px !important;
//     max-height: calc(100vh - 12.25rem);
//     height: calc(100vh - 12.25rem);
//   }
// }
.app-content{
  // height: 100vh;
}
.sidebar{
  // margin: auto;
  flex-direction: column;
  max-width: 5em;
  width: 5em;
  height: 100%;
  // background-color:rgba(127, 88, 145, 0.7);
  // color: $beige-lighter;
  border-right: thin #ccc solid;

}
.menu-titles{
  margin-top: -2em;
}
.is-sidebar {

  // transform: translate(15%, 0);
  // background-color: rgba(0, 0, 0, .3);
}
.sidebar-menu{
  position: absolute;
  bottom: 25px;
  left: 1em;
}
.sideway-text{
  // transform: translate(0, -50%);
  // display: inline;
  // margin: 0 0;
}
.sideway-letter{
  // width: 50%;
  // height: 2em;
  transform: rotate(-90deg);
  margin: -.8em auto;
}

.is-fullheight{
  min-height: calc(100vh - ( #{$navbar-height}  ) );
  max-height: calc(100vh - ( #{$navbar-height}  ) );
  height: calc(100vh - ( #{$navbar-height}  ) );
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  .column{
    overflow-y: auto;
  }
}

.avatar-badge-image{
  display: table;
  margin: auto;
}

.is-avatar{
  padding:2px;
  border: thin solid #ccc;
}
.m-auto{
  margin: auto;
}

.css-loader{
  display: flex;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  .dot{
    margin: 5px;
    width: 2rem;
    height: 2rem;
    background: $primary;
    border-radius: 50%;
    animation-name: loading-pulse;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    &.delay-1{
      animation-delay:.3s;
    }
    &.delay-2{
      animation-delay:.6s;
    }
  }
}


@keyframes loading-pulse{
  0%{
    opacity: .1;
    transform: scale(.7);
  }
  50%{
    opacity: 1;
    transform: scale(1);
  }
  100%{
    opacity: .1;
    transform: scale(.7);
  }
}

.has-pointer{
  cursor: pointer;
}

.notifications {
  width: 15vw;
  z-index: 100;
  position: fixed;
  right: 25px;
  top: calc(25px + ( #{$navbar-height}  ) );
}

.notification-fade{
  animation: notification-fade .2s;
}

@keyframes notification-fade{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}