
@import url('https://fonts.googleapis.com/css?family=Exo:100');

body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', sans-serif;
  color: #555;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABnSURBVHja7M5RDYAwDEXRDgmvEocnlrQS2SwUFST9uEfBGWs9c97nbGtDcquqiKhOImLs/UpuzVzWEi1atGjRokWLFi1atGjRokWLFi1atGjRokWLFi1af7Ukz8xWp8z8AAAA//8DAJ4LoEAAlL1nAAAAAElFTkSuQmCC") repeat;
  background-size: 50px 50px;
  animation: bg-scrolling-reverse 2s linear infinite;
}

body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(151, 151, 151, 0.1);
  z-index: 0;
  pointer-events: none;
}

@keyframes bg-scrolling-reverse {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}
.login-container {
  min-height: 100vh;
}
.card {
  border: none;
  border-radius: 16px;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
}
.form-control:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}
.btn-primary {
  border-radius: 10px;
}
.input-group-text {
  background-color: #fff;
  border-right: none;
}
.form-control {
  border-left: none;
}