html,
body {
  height: 100%;
  margin: 0;
}

body.launching {
  @include background-size(cover);
  background-color: $base-color;

  &::after {
    @include animation(rotate-animation 1s linear infinite);
    @include transform-origin(50% 50%);
    @include background-size(cover);
    background-image: url(get-resource-path('images/loading.gif'));
    background-position: center;
    background-repeat: no-repeat;
    content: '';
    color: #fff;
    position: absolute;
    margin-top: -50px;
    margin-left: -50px;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
  }
}

.main-header {
  background-color: $base-color;
  background-image: url(get-resource-path('images/default/logo-uas.png'));
  background-position:  30px 12px;
  background-repeat: no-repeat;
  background-size: 80px 32px;
  padding: 0 30px 0 100px;
  font-size: 14px;
  color: #fff;

  @include extjs-button-toolbar-small-ui(
      $ui: 'header',

      $border-color: transparent,
      $border-color-over: transparent,
      $border-color-focus: transparent,
      $border-color-pressed: transparent,
      $border-color-focus-over: transparent,
      $border-color-focus-pressed: transparent,
      $border-color-disabled: transparent,

      $background-color: transparent,
      $background-color-over: transparent,
      $background-color-focus: transparent,
      $background-color-pressed: transparent,
      $background-color-focus-over: transparent,
      $background-color-focus-pressed: transparent,
      $background-color-disabled: transparent,

      $color: rgba(255, 255, 255, .8),
      $color-over: rgb(255, 255, 255),
      $color-focus: rgb(255, 255, 255),
      $color-pressed: rgb(255, 255, 255),
      $color-focus-over: rgb(255, 255, 255),
      $color-focus-pressed: rgb(255, 255, 255),
      $color-disabled: rgb(255, 255, 255),

      $inner-border-width: 0,
      $inner-border-width-over: 0,
      $inner-border-width-focus: 0,
      $inner-border-width-pressed: 0,
      $inner-border-width-focus-over: 0,
      $inner-border-width-focus-pressed: 0,
      $inner-border-width-disabled: 0,

      $inner-border-color: transparent,
      $inner-border-color-over: transparent,
      $inner-border-color-focus: transparent,
      $inner-border-color-pressed: transparent,
      $inner-border-color-focus-over: transparent,
      $inner-border-color-focus-pressed: transparent,
      $inner-border-color-disabled: transparent,

      $font-size: 14px
  );

  .x-btn-wrap-header-toolbar-small.x-btn-arrow-right:after {
      background-image: none;
      width: 8px;
      height: 8px;
      color: transparent;
      border:rgba(255, 255, 255, .8) solid;
      border-width: 1px 1px 0 0;
      transform: rotate(135deg);
      margin-top: 3px;
  }

  .x-toolbar-text-default {
      color: #fff;
  }
  
}