html {
  box-sizing: border-box;
  height: 100%;
  font-size: $base-font-size;

  &.turbo-progress-bar::before,
  .turbo-progress-bar {
    background-color: $blue !important;
    z-index: 400001;
  }
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

noscript {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  text-align: center;
  line-height: 1em;
  border-bottom: 1px solid $warning_border_color;
  color: $warning_text_color;
  background-color: $warning_background_color;

  h1, p {
    margin: 16px 0;
  }
}

body {
  margin: 0;
  padding: 0;
  color: $text-color;
  font: $default-font-style;
  background-color: $body-background-color;
  height: 100%;
  cursor: default;

  // Fix for strange element window offset
  &.pages.edit { overflow: hidden }

  &.prevent-scrolling {
    overflow: hidden;
  }
}

a {
  color: inherit;
  text-decoration: none;
  transition: $transition-duration;

  &:hover {
    text-decoration: underline;
  }

  img {
    border: none;
  }
}

a:focus, [tabindex]:focus {
  @include default-focus-style;
}

form {
  margin-bottom: 0;
}

hr {
  border: 0 none;
  border-bottom: 1px solid;
  opacity: 0.5;
}

.panel {
  width: 80%;
  max-width: 500px;
  margin: 2em auto;
  padding: 4*$default-padding;
  background: $medium-gray;
  border-radius: $default-border-radius;
}

.float_right { float: right }

.float_left { float: left }

.center {
  text-align: center;
}

.top-rounded-border {
  @include border-top-radius($default-border-radius);
}

.left-rounded-border {
  @include border-left-radius($default-border-radius);
}

.right-rounded-border {
  @include border-right-radius($default-border-radius);
}

.bottom-rounded-border {
  @include border-bottom-radius($default-border-radius);
}

.bottom-left-rounded-border {
  border-bottom-left-radius: $default-border-radius;
}

.disable-user-select {
  user-select: none;
}

.handle {
  cursor: move;
}

.with_padding {
  padding: 2*$default-padding;
}

.with_margin {
  margin: 2*$default-margin;
}

a img {
  border-style: none;
}

.full_width {
  width: 100%;
}

.hidden {
  display: none;
}

@-moz-keyframes spin {
  from { -moz-transform: rotate(0deg); }
  to   { -moz-transform: rotate(360deg); }
}

@-webkit-keyframes spin {
  from { -webkit-transform: rotate(0deg); }
  to   { -webkit-transform: rotate(360deg); }
}

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