@-moz-keyframes blur-in {
  0% {
    filter: blur(50px);
  }
  100% {
    filter: blur(0px);
  }
}
@-webkit-keyframes blur-in {
  0% {
    -webkit-filter: blur(50px);
    filter: blur(50px);
  }
  100% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
}
@keyframes blur-in {
  0% {
    -webkit-filter: blur(50px);
    filter: blur(50px);
  }
  100% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
}
/**
 * Copyright 2015 Google Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
html, body {
  background: #F5F5F5;
}

/** Common classes
------------------------------ **/
/** material icons **/
.material-icons {
  vertical-align: text-bottom;
}

.material-icons-s {
  font-size: 16px;
}

/** flash message **/
.flash {
  margin: 8px;
  padding: 8px;
  border-left: solid 4px #E0E0E0;
}
.flash .flash-title {
  line-height: 20px;
  font-size: 16px;
}
.flash .flash-body {
  line-height: 20px;
  font-size: 14px;
}
.flash.flash-info {
  border-left-color: #3F51B5;
}
.flash.flash-info .flash-title {
  color: #303F9F;
}
.flash.flash-success {
  border-left-color: #009688;
}
.flash.flash-success .flash-title {
  color: #00796B;
}
.flash.flash-error {
  border-left-color: #F44336;
}
.flash.flash-error .flash-title {
  color: #D32F2F;
}

/** input **/
.input-text {
  width: 480px;
  max-width: 100%;
  padding: 8px;
  border: solid 1px #E0E0E0;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
}

.input-text-s {
  width: auto;
}

.input-text-l {
  width: 100%;
}

.input-select {
  box-sizing: border-box;
  height: 40px;
  max-width: 100%;
  padding: 4px 8px;
  border: solid 1px #E0E0E0;
  border-radius: 4px;
  background: #fff;
  font-size: 16px;
}

.input-description {
  margin: 4px 0;
  color: #9E9E9E;
  font-size: 14px;
}
.input-description:last-child {
  margin-bottom: 0;
}

.input-error {
  margin-bottom: 4px;
  color: #F44336;
  font-size: 12px;
  font-weight: bold;
}

/** labels **/
.label {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 16px;
  background: #9E9E9E;
  color: #fff;
  font-size: 12px;
  text-align: center;
}
.label.label-primary {
  background: #3F51B5;
}
.label.label-success {
  background: #009688;
}
.label.label-info {
  background: #2196F3;
}
.label.label-warning {
  background: #FF9800;
}
.label.label-danger {
  background: #F44336;
}
.label.label-block {
  display: block;
}

/** tables **/
.table-wide {
  width: 100%;
}

.table-responsive {
  overflow-x: auto;
  width: 100%;
  background: #fff;
}

.mdl-data-table .mdl-data-table__cell--wrapped {
  white-space: normal;
}

/** paging **/
.paging ul {
  margin: 0;
  padding: 0;
}
.paging li {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  margin-right: 4px;
}
.paging li a {
  display: block;
  padding: 0 8px;
  text-decoration: none;
}
.paging li a:hover {
  background: #E0E0E0;
}
.paging li.paging-current a {
  background: #536DFE;
  color: #fff;
  font-weight: bold;
}

/** counts **/
.counts {
  line-height: 24px;
  font-size: 14px;
  text-align: right;
}
.counts .counts-current,
.counts .counts-total {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
}
.counts .counts-current {
  font-weight: bold;
}

/** Layouts
------------------------------ **/
.layout .header {
  background: #F5F5F5;
  color: #212121;
}
.layout .header .mdl-layout-label {
  margin-right: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  background: #009688;
  color: #fff;
}
.layout .header .mdl-layout__drawer-button {
  color: inherit;
}
.layout .header .mdl-textfield {
  padding: 0px;
  margin-top: 41px;
}
.layout .header .mdl-textfield .mdl-textfield__expandable-holder {
  bottom: 19px;
}

.drawer {
  background: #263238;
  border: none;
}
.drawer .drawer-header {
  box-sizing: border-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -webkit-justify-content: end;
  flex-direction: column;
  justify-content: end;
  padding: 16px;
}
.drawer .drawer-header .logo {
  text-align: center;
}
.drawer .drawer-header .logo img {
  max-width: 160px;
}
.drawer .navigation {
  background: #37474F;
  -webkit-flex-grow: 1;
  flex-grow: 1;
}
.drawer .navigation .mdl-navigation__link {
  display: -webkit-flex !important;
  display: flex !important;
  -webkit-flex-direction: row;
  -webkit-align-items: center;
  flex-direction: row;
  align-items: center;
  color: #fff;
  font-weight: 500;
  -moz-transition: background 0.25s;
  -o-transition: background 0.25s;
  -webkit-transition: background 0.25s;
  transition: background 0.25s;
}
.drawer .navigation .mdl-navigation__link.navigation-active {
  background-color: #00796B;
}
.drawer .navigation .mdl-navigation__link:hover {
  background-color: #009688;
}
.drawer .navigation .mdl-navigation__link .material-icons {
  font-size: 24px;
  color: #fff;
  margin-right: 32px;
}

/** Login
------------------------------ **/
.login {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px;
  display: -webkit-flex;
  -webkit-flex-direction: column;
  -webkit-align-items: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.login form {
  position: relative;
  width: 400px;
  max-width: 100%;
  margin: auto;
}
.login form .logo {
  padding: 8px;
  background: #263238;
  text-align: center;
}
.login form .logo img {
  width: 180px;
  max-width: 100%;
  -moz-animation: blur-in 1s;
  -webkit-animation: blur-in 1s;
  animation: blur-in 1s;
}
.login form .inputs {
  position: relative;
  padding: 16px;
  background: #fff;
  text-align: center;
}
.login form .inputs button {
  position: absolute;
  right: 8px;
  bottom: 8px;
}

/** Contents
------------------------------ **/
.content {
  max-width: 1080px;
}
.content h1 {
  font-size: 24px;
}

/** Sections
------------------------------ **/
section .actions {
  text-align: right;
}
section.systems .system {
  overflow: visible;
}
section.editForm .fields {
  padding: 8px;
  background: #fff;
}
section.editForm .field {
  margin-bottom: 8px;
  padding: 8px;
  border-bottom: dotted 1px #E0E0E0;
}
section.editForm .field:last-child {
  margin-bottom: 0;
}
section.editForm .field.field-actions {
  margin: -8px;
  padding: 16px;
  background: #EEEEEE;
}
section.editForm .field.field-error {
  background: #FFEBEE;
}
section.editForm .field .legend {
  margin-bottom: 8px;
  padding-left: 4px;
  border-left: solid 4px #E0E0E0;
  line-height: 20px;
  font-size: 16px;
}