//@import url('https://fonts.googleapis.com/css?family=Abel|Aldrich|Audiowide|Black+Ops+One|Cherry+Cream+Soda|Exo|Exo 2|Graduate|Josefin+Sans|Kelly+Slab|Michroma|Monoton|Nixie+One|Open+Sans+Condensed:300|Orbitron|Poiret+One|Press+Start+2P|Prompt|Rajdhani|Raleway|Russo+One|Signika|Syncopate|Teko');

@font-face {
  font-family: Exo2;
  src: local("Exo 2"), url(../fonts/Exo2-Medium.ttf);
}

* { margin: 0; padding: 0; }

h1 { font-size: 1.5vw; }
h2 { font-size: 1vw; }

body {
  color: white;
  font-family: Exo2
}

#background-image {
  opacity: 1;
  display: block;
  transition: 1s;

  position: fixed;
  width: 100%;
  bottom: 0;
  right: 0;
  z-index: -1;
}

#ui-container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

#power-panel {
  background: rgba(8, 8, 8, 0.3);
  box-shadow: 0px 0px 0.5vw 0.5vw rgba(8, 8, 8, 0.3);
  cursor: pointer;
  opacity: 0.5;

  position: absolute;
  bottom: 2vw;
  right: 2vw;
  z-index: 100;

  #power-options {
    border-radius: 10px;
    padding: 0.5vw;
    transition: 1s;
    display: none;

    ul {
      list-style: none;

      li { 
        margin-bottom: 1vw;
        font-size: 1.5vw;

        i { margin-right: 0.5vw; }

        &:last-child { margin-bottom: 0; }
      }
    }

  }

  &.active {
    bottom: 1vw;
    #power-options { display: block; }
    #power-button { display: none; }
  }
}

#clock-panel {
  background: rgba(0, 0, 0, 0.3);
  font-size: 6vw;
  font-weight: 500;
  padding: 1vw 2vw;
  width: 100%;
  z-index: 1;
}

#login-panel {

  z-index: 2;

  input[type=password] {
    background: none;
    border: none;
    border-bottom: 2px solid white;
    color: white;
    font-size: 1vw;
    margin-top: 0.5em;
    opacity: 0;
    transition: 0.5s;
    width: 20em;

    &.active { opacity: 0.5; }
  }

  #users {
    cursor: pointer;
    display: inline-block;
    position: relative;

    i {
        opacity: 0;
        transition: 0.5s;
    }

    &:hover i { opacity: 1; }

    #users-list {
      list-style: none;
      display: none;
    }

    &.select-user {
      #user-display, i { display: none; }
      #users-list { display: inline-block; }
    }
  }

  #fail-msg {
    color: red;
    opacity: 0;
    transition: 0.5s;

    position: relative;
    left: -1vw;
  }
}

#session-panel {
  opacity: 0.2;
  transition: 0.5s;
  z-index: 2;
  &:hover { opacity: 1 };

  #sessions-list li { display: inline-block; }

}


#sessions { 
  cursor: pointer;
  display: inline-block;
  position: relative;

  #sessions-list {
    list-style: none;
    display: none;
  }

  &.select-session {
    #session-display { display: none; }
    #sessions-list { display: inline-block; }
  }
}

.failed-auth {
  input[type=password] {
    color: red;
    border-color: red !important;
  }
  #fail-msg { opacity: 1 !important; }
}

.lock-screen {
  #session-panel { display: none !important; }
}

@keyframes throb {
  from { opacity: 1; }
  to { opacity: 0; }
}

.throb { animation: alternate infinite 2s throb; }