@import "../../../node_modules/foundation-sites/scss/foundation";

//Settings nach foundation für mixins in settings
@import "settings";

//Include foundation before other styles, so that other one can override foundation
@include foundation-everything;

//From framework
@import "../../../node_modules/cordova-sites/cordova-sites";
@import "../../../node_modules/cordova-sites-user-management/cordova-sites-user-management";

//Anderes nach Settings, damit Settings bereits angewendet werden
@import "wordRotator";
@import "animations";
@import "navbarOverride";
@import "themeBlue";

.translation{}

@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(450deg);
  }
}

@keyframes line {
  0% {
    stroke-dasharray: 2, 85.964;
    transform: rotate(0);
  }
  50% {
    stroke-dasharray: 65.973, 21.9911;
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dasharray: 2, 85.964;
    stroke-dashoffset: -65.973;
    transform: rotate(90deg);
  }
}

html, body {
  min-height: 100%;
  width: 100%;
  height: 100%;
  letter-spacing: 1px;
  overscroll-behavior: none;
}


a, a:hover {
  color: #ffca00;
}

#site {
  position: relative;
  max-height: 100%;
  max-width: 100%;
  //overflow: auto;
  height: 100%;
  width: 100%;
  //display: inline-block;
}

.right {
  float: right
}

.grow {
  flex: 1;
}

.loader {
  left: 50%;
  top: 50%;
  position: fixed;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;

  &.overlay {
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(192, 192, 192, 0.5);
    transform: none;
    z-index: 10000;

    svg {
      left: 50%;
      top: 50%;
      position: fixed;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      text-align: center;
    }
  }

  &.inline {
    left: initial;
    top: initial;
    position: initial;
    -webkit-transform: initial;
    transform: initial;
    text-align: center;
    display: inline;
  }

  &.small .spinner {
    transform: scale(0.5);
  }

  .spinner {
    box-sizing: border-box;
    //stroke: #b71c1a;
    stroke: #000;
    stroke-width: 3px;
    transform-origin: 50%;
    animation: line 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite, rotate 1.6s linear infinite;
  }
}

.overflow-auto {
  overflow: auto;
}
.overflow-hidden{
  overflow: hidden;
}

.height-100 {
  height: 100%;
}

.hidden {
  display: none;
}

//ViewInflater
.injected-span {
}

.vertical-middle {
  display: flex;
  align-items: center;
}

.vertical-bottom {
  display: flex;
  align-items: end;
}

.horizontal-center {
  display: flex;
  justify-content: center;
}

.width-100 {
  width: 100%;
}

@for $i from 1 through 6 {
  h#{$i}.inline {
    display: inline-block;
  }
}

img.back-button {
  cursor: pointer;
  max-height: 1.1rem;
  margin-right: 0.2rem;
  margin-bottom: 0.65rem;
}

a.hidden-link {
  color: inherit;
}

#main-content-container {
  overflow: auto;
  width: 100%;

  #main-content {
    padding-top: 0;
    padding-bottom: 0;
  }
}

body{
  //background-image: url("../img/background.png");
}