@import url(http://fonts.googleapis.com/css?family=Open+Sans:600italic,800italic,400,300,600,800&subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic);
@-webkit-keyframes bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0); }

  40% {
    -webkit-transform: scale(1); } }

@keyframes bouncedelay {
  0%, 80%, 100% {
    transform: scale(0);
    -webkit-transform: scale(0); }

  40% {
    transform: scale(1);
    -webkit-transform: scale(1); } }

*:focus *:active {
  outline: 0 !important; }

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #555555;
  background: url("/static/login-bg.png") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }

.spinner {
  display: inline-block; }
  .spinner span {
    width: 10px;
    height: 10px;
    background-color: #23B0D6;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
    animation: bouncedelay 1.4s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both; }
    .spinner span.bounce1 {
      -webkit-animation-delay: -0.32s;
      animation-delay: -0.32s; }
    .spinner span.bounce2 {
      -webkit-animation-delay: -0.16s;
      animation-delay: -0.16s; }

.top {
  margin-top: 90px; }
  .top .logo {
    text-align: center; }
  .top #form {
    width: 460px;
    margin: 30px auto;
    display: table;
    background: #3ac5eb;
    border-radius: 5px;
    padding: 20px;
    color: white; }
    .top #form h2 {
      font-size: 33px;
      color: white;
      text-align: center;
      margin: 0 0 20px 0; }
    .top #form form input, .top #form form select {
      font-size: 14px;
      border: 0;
      border-bottom: 1px solid #aaaaaa;
      border-radius: 0; }
      .top #form form input.focus:focus, .top #form form select.focus:focus {
        outline: 1px dotted #2ecc9e !important;
        outline-offset: -2px; }
    .top #form form .input {
      position: relative;
      display: block; }
      .top #form form .input input {
        padding-left: 16px; }
        .top #form form .input input[type=checkbox] {
          border-bottom: none;
          padding-left: 0; }
      .top #form form .input.error input, .top #form form .input.error select {
        border-bottom-color: red; }
      .top #form form .input.error .helper {
        display: block; }
      .top #form form .input .helper {
        display: none;
        position: absolute;
        top: 0;
        left: 100%;
        background: rgba(0, 0, 0, 0.6);
        color: white;
        white-space: nowrap;
        margin: 6px 0 0 10px;
        padding: 0 5px;
        border-radius: 3px; }
        .top #form form .input .helper:before {
          content: '';
          width: 0;
          height: 0;
          border: 5px solid transparent;
          border-right-color: rgba(0, 0, 0, 0.6);
          display: block;
          position: absolute;
          left: -10px;
          top: 5px; }
      .top #form form .input.register {
        display: none; }
    .top #form form label {
      font-weight: normal;
      margin-bottom: 0;
      vertical-align: 1px;
      cursor: pointer; }
    .top #form form .btn {
      background-color: #23b0d6;
      border-color: #23b0d6;
      color: white; }
      .top #form form .btn:focus {
        outline: 1px dotted #2ecc9e !important;
        outline-offset: -2px; }
      .top #form form .btn .spinner {
        display: none; }
      .top #form form .btn:active, .top #form form .btn.active {
        outline: none;
        box-shadow: none;
        background-color: #428bca;
        border-color: #357ebd; }
      .top #form form .btn.active .text {
        display: none !important; }
      .top #form form .btn.active .spinner {
        display: inline-block; }
    .top #form form .half {
      padding: 15px 0; }
    .top #form .switch-form {
      color: white; }
    .top #form .forgot, .top #form .forgot-success, .top #form .register-success, .top #form .register {
      display: none; }
    .top #form.forgot .login {
      display: none; }
    .top #form.forgot .forgot {
      display: block; }
    .top #form.forgot .email {
      border-radius: 4px; }
    .top #form.forgot [type=submit] {
      margin-top: 20px; }
    .top #form.forgot .switch-form {
      text-align: center;
      margin-top: 12px; }
    .top #form.forgot .info {
      margin-bottom: 20px; }
    .top #form.loading .switch-form {
      display: none; }
    .top #form.register .register {
      display: block !important; }
    .top #form.register .login {
      display: none; }
    .top #form.register .login.reg {
      display: block; }
    .top #form.register .half.forgot {
      display: block; }
    .top #form.register.success .input {
      display: none !important; }
    .top #form.register.success .register-success {
      display: block;
      text-align: center; }
    .top #form.register.success .btn {
      display: none; }
    .top #form.forgot.success .input {
      display: none !important; }
    .top #form.forgot.success .btn {
      display: none; }
    .top #form.forgot.success .forgot-success {
      display: block;
      text-align: center; }
    .top #form.forgot.success .forgot {
      display: none; }

#actions {
  text-align: center; }
  #actions.isLogin .registerBtn {
    display: inline;}
  #actions.isLogin .loginBtn {
    display: none; }
  #actions.isNotLogin .registerBtn {
    display: none; }
  #actions.isNotLogin .loginBtn {
    display: inline; }

.dropDownLang {
  position: fixed;
  bottom: 15px;
  left: 50%;
  margin-left: -80px; }

.modal-header h4 {
  border: 1px solid;
  padding: 10px;
  margin-top: 0;
  margin-bottom: 0;
  color: #2ecc71;
  border-radius: 4px; }

select::-ms-value {
  background: none;
  color: #555555; }

select.selectLang {
  font-size: 14px;
  border: 0;
  border-radius: 0;
  background-color: #f5f5f5; }
  select.selectLang:focus {
    outline: none;
    border-color: #3ac5eb;
    box-shadow: none; }

.modal-body {
  overflow-y: scroll; }
  .modal-body input {
    font-size: 14px;
    border: 0;
    border-bottom: 1px solid #aaaaaa;
    border-radius: 4px; }
    .modal-body input:focus {
      outline: none;
      border-color: #3ac5eb;
      box-shadow: none; }
  .modal-body .input {
    position: relative;
    display: block; }
    .modal-body .input select {
      padding: 6px 3px; }
      .modal-body .input select:focus {
        outline: none;
        border-color: #cccccc;
        box-shadow: none; }
    .modal-body .input .helper {
      display: none;
      font-weight: normal;
      position: absolute;
      top: 0;
      left: 100%;
      background: rgba(0, 0, 0, 0.6);
      color: white;
      white-space: nowrap;
      margin: 6px 0 0 10px;
      padding: 0 5px;
      border-radius: 3px; }
      .modal-body .input .helper:before {
        content: '';
        width: 0;
        height: 0;
        border: 5px solid transparent;
        border-right-color: rgba(0, 0, 0, 0.6);
        display: block;
        position: absolute;
        left: -10px;
        top: 5px; }
    .modal-body .input.error input {
      border-bottom-color: red; }
    .modal-body .input.error .helper {
      display: block; }

#notify {
  position: fixed;
  top: -32px;
  left: 0;
  z-index: 5000;
  width: 100%;
  text-align: center;
  overflow: hidden;
  transition: top 500ms; }
  #notify.active {
    top: 0; }
  #notify .content {
    display: inline-block;
    padding: 5px 15px;
    border-style: solid;
    border-width: 0 1px 2px 1px;
    font-weight: bold;
    color: white;
    background: #e0e0e0;
    border-color: #cccccc;
    border-radius: 0 0 4px 4px; }
    #notify .content.success {
      background: #33bd33;
      border-color: #0e860e; }
    #notify .content.danger {
      background: #f44336;
      border-color: #b71c1c; }
    #notify .content.warning {
      background: #eb9316;
      border-color: #c27313; }
    #notify .content.info {
      background: #2aabd2;
      border-color: #2381a1; }