﻿body {
  padding: 0;
  margin: 0;
}

.login-container {
  background-image: url('../back.jpg');
  background-size: cover;
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.inner {
  position: absolute;
}

.inner-container {
  width: 400px;
  height: 400px;
  position: absolute;
  top: calc(50vh - 200px);
  left: calc(50vw - 200px);
  overflow: hidden;
}

.bgvid.inner {
  top: calc(-50vh + 200px);
  left: calc(-50vw + 200px);
  filter: url("data:image/svg+xml;utf9,<svg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'><filter%20id='blur'><feGaussianBlur%20stdDeviation='10'%20/></filter></svg>#blur");
  -webkit-filter: blur(10px);
  -ms-filter: blur(10px);
  -o-filter: blur(10px);
  filter: blur(10px);
}

.box {
  position: absolute;
  height: 100%;
  width: 100%;
  font-family: Helvetica;
  color: #fff;
  background: rgba(0,0,0,0.13);
  padding: 30px 0px;
}

  .box h1 {
    text-align: center;
    margin: 30px 0;
    font-size: 30px;
  }

  .box-input {
    display: block;
    width: 300px;
    margin: 20px auto;
    padding: 15px;
    background: rgba(0,0,0,0.2);
    color: #fff;
    border: 0;
  }

    .box input:focus, .box input:active, .box button:focus, .box button:active {
      outline: none;
    }

  .box button {
    background: #742ECC;
    border: 0;
    color: #fff;
    padding: 15px;
    font-size: 20px;
    width: 300px;
    margin: 20px auto;
    display: block;
    cursor: pointer;
  }

    .box button:active {
      background: #27ae60;
    }

  .box p {
    font-size: 14px;
    text-align: center;
  }

    .box p span {
      cursor: pointer;
      color: #666;
    }

#copyright {
  position: absolute;
  background: rgba(0,0,0,0.13);
  bottom: 0;
  color: #fff;
}


#remember-container {
  position: relative;
  padding: 0px 60px;
}

.checkbox {
  position: relative;
  cursor: pointer;
  -webkit-appearance: none;
  border-radius: 4px;
  background: rgba(3,3,3,.2);
  display: inline-block;

  width: 15px;
  height: 15px;
}

  .checkbox:checked:active {
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
  }

  .checkbox:checked {
    background: rgba(3,3,3,.4);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.5);
    color: #fff;
  }

    .checkbox:checked:after {
      content: '\2714';
      font-size: 10px;
      position: absolute;
      top: 0px;
      left: 4px;
      color: #fff;
    }

#remember {
  position: absolute;
  padding: 0px 10px;
  color: rgba(0,0,0,.5);
}

#logo-container {
 // position: relative;
  padding: 0px 90px;
}