* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
  background: #F5F5F5;
  font-size: 62.5%;
  overflow-y: scroll;
}

body {
  color: #212121;
  font-size: 1.6rem;
  line-height: 1.4;
  margin: 0;
  padding: 0;
}

a {
  color: #4CAF50;
}

.Container {
  padding: 0 1.5rem;
  padding-top: 5rem;
}

.Form {

}

.Form--login {
  max-width: 600px;
  margin: 0 auto;
}

.Form-subTitle {
  font-size: 1.6rem;
  line-height: 1;
  margin: 0;
  margin-bottom: .75rem;
}

.Form-group {
  text-align: left;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.Form-label, .Form-help {
  display: block;
  font-size: 1.4rem;
}

.Form-label--radio {
  display: inline-block;
  vertical-align: middle;
}

.Form-field {
  border: 1px solid #9E9E9E;
  display: flex;
  padding: .75rem 1.5rem;
  background-color: transparent;
  width: 100%;
  font: inherit;
  color: inherit;
  line-height: inherit;
}

.Button {
  background: transparent;
  border: 1px solid;
  display: inline-block;
  font: inherit;
  line-height: inherit;
  padding: .75rem 1.5rem;
  cursor: pointer;
  transition: opacity .4s ease-out;
  text-decoration: none;
}
.Button:hover {
  opacity: .7;
}

.Button--full {
  width: 100%;
}

.Button--login {
  background: #4CAF50;
  color: #fff;
}

.Button--valid {
   background: #4CAF50;
   color: #fff;
}

.Button--show {
  border-color: #4CAF50;
  font-weight: normal;
  text-align: left;
  position: relative;
  overflow: hidden;
  opacity: .8;
}
.Button--show.is-active {

}

.Button--show:after {
  content: ' + ';
  color: #4CAF50;
  float: right;
}
.Button--show.is-active:after {
  content: ' - ';
}

.Button--show:focus {
  outline: 0;
  opacity: 1;
}

.Alert {
  padding: 1.5rem 2rem;
}

.Alert--error {
  background-color: #FFCDD2;
}

.Alert--success {
  background-color: #C8E6C9;
}

.Table {
  width: 100%;
  border-collapse: collapse;
}
.Table-row:nth-child(odd) {
  background-color: #E0E0E0;
}
.Table-cell {
  border: 1px solid #9E9E9E;
  padding: .5rem;
}

.TopBar {
  min-height: 4rem;
  background: #212121;
  color: #FFF;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
}
.TopBar-item {
  min-height: 100%;
}
.TopBar-link {
  display: inline-block;
  line-height: 3rem;
  padding: .5rem;
  color: inherit;
  text-decoration: none;
}

@keyframes highlight {
  25%{
    background-color: #A5D6A7;
  }
  75%{
    background-color: #A5D6A7;
  }
}
.UsersList-row:target {
  animation: highlight 4s;
}

.ToggleView {
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: height .4s, opacity .4s;
}
.ToggleView .Form-group {
  margin-left: 1.5rem;
}
.ToggleView.is-active {
  height: auto;
  overflow: auto;
  opacity: 1;
}

@media(min-width: 800px) {
  .Flex {
    display: flex;
  }
  .Flex--inline {
    display: inline-flex;
  }
  /**
   * 1. Set the flex-shrink default explicitly to fix IE10 - http://git.io/vllC7
   */
  .Flex > *,
  .Flex--inline {
    flex-shrink: 1;
  }
  /**
   * Direction
   */
  .Flex--rowRev {
    flex-direction: row-reverse;
  }
  .Flex--col {
    flex-direction: column;
  }
  .Flex--colRev {
    flex-direction: column-reverse;
  }

  /**
   * Wrap
   */
  .Flex--wrap {
    flex-wrap: wrap
  }
  .Flex--wrapRev {
    flex-wrap: wrap-reverse
  }

  /**
   * Fit
   */
  .Flex--fit > * {
    flex: 1 1 0%;
  }

  /**
   * Equal height of flex-items
   */
  .Flex--equalHeight > * {
    display: flex;
  }

  /**
   * Align items along the main axis of the current line of the flex container
   */

  .Flex--mainStart {
    justify-content: flex-start;
  }
  .Flex--mainCenter {
    justify-content: center;
  }
  .Flex--mainEnd {
    justify-content: flex-end;
  }
  .Flex--mainBetween {
    justify-content: space-between;
  }
  .Flex--mainAround {
    justify-content: space-around;
  }

  /**
   * Align items in the cross axis of the current line of the flex container
   * Similar to `justify-content` but in the perpendicular direction
   */

  .Flex--crossStart {
    align-items: flex-start;
  }
  .Flex--crossCenter {
    align-items: center;
  }
  .Flex--crossEnd {
    align-items: flex-end;
  }
  .Flex--crossStretch {
    align-items: stretch;
  }
  .Flex--crossBaseline {
    align-items: baseline;
  }

  /**
   * Aligns items within the flex container when there is extra
   * space in the cross-axis
   *
   * Has no effect when there is only one line of flex items.
   */

  .Flex--crossAlignStart {
    align-content: flex-start;
  }
  .Flex--crossAlignCenter {
    align-content: center;
  }
  .Flex--crossAlignEnd {
    align-content: flex-end;
  }
  .Flex--crossAlignStretch {
    align-content: stretch;
  }
  .Flex--crossAlignBetween {
    align-content: space-between;
  }
  .Flex--crossAlignAround {
    align-content: flex-start;
  }



  .Flex-item--start {
    align-self: flex-start;
  }
  .Flex-item--center {
    align-self: center;
  }
  .Flex-item--end {
    align-self: flex-end;
  }
  .Flex-item--stretch {
    align-self: stretch;
  }
  .Flex-item--baseline {
    align-self: baseline;
  }
  .Flex-item--auto {
    align-self: auto;
  }


  .Flex-item--orderBefore {
    order: -1;
  }

  .Flex-item--orderAfter {
    order: 1;
  }

  .Flex-item--orderNone {
    order: 0;
  }

  /**
   * Provide all values to avoid IE10 bug with shorthand flex
   * - http://git.io/vllC7
   *
   * Use `0%` to avoid bug in IE10/11 with unitless flex basis. Using this
   * instead of `auto` as this matches what the default would be with `flex`
   * shorthand - http://git.io/vllWx
  */

  .Flex-item--grow1 {
    flex: 1 1 0%;
  }
  .Flex-item--grow2 {
    flex: 2 1 0%;
  }
  .Flex-item--grow3 {
    flex: 3 1 0%;
  }
  .Flex-item--grow4 {
    flex: 4 1 0%;
  }
  .Flex-item--grow5 {
    flex: 5 1 0%;
  }

  .Flex-item--expand {
    margin: auto;
  }
  .Flex-item--expandLeft {
    margin-left: auto;
  }
  .Flex-item--expandRight {
    margin-right: auto;
  }
  .Flex-item--expandTop {
    margin-top: auto;
  }
  .Flex-item--expandBottom {
    margin-bottom: auto;
  }
}

.u-bgLight {
  background: #fff;
}
.u-shadow {
  box-shadow: 1px 2px 6px 3px rgba(0,0,0,.1)
}
.u-paddingA1sp {
  padding: 1.5rem;
}

.u-marginA1sp {
  margin: 1.5rem;
}
.u-marginT1sp {
  margin-top: 1.5rem;
}
.u-marginR1sp {
  margin-right: 1.5rem;
}
.u-marginR2sp {
  margin-right: 3rem;
}
.u-marginL2sp {
  margin-left: 3rem;
}

.u-textCenter {
  text-align: center;
}

.u-tableCell {
  display: table-cell;
}

.u-alignMiddle {
  vertical-align: middle;
}

.u-fullHeight {
  min-height: 100vh;
  min-height: calc(100vh - 5rem);
}

.u-maxWidthForm {
  max-width: 600px;
  margin: 0 auto;
}