@font-face {
  font-family: 'Montserrat';
  src: local('Montserrat-Regular'),
       url("../fonts/montserrat-v29-latin-regular.74795056a235.woff2") format('woff2');
  font-weight: normal;
  font-style: normal;
}

h1 {
  font-family: 'Montserrat', sans-serif;
}

body {
  font-family: 'Montserrat', sans-serif;
}

.input-container input,
.input-container select,
.input-container textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid black;
  border-radius: 4px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.input-container input:focus,
.input-container select:focus,
.input-container textarea:focus {
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.input-container label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.animated-border {
  position: relative;
  overflow: visible;
  animation: pulsate 10s ease-in-out infinite;
  background: linear-gradient(145deg,
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0.1));
  border-radius: 15px;
}

.animated-border::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(145deg,
      rgba(255, 255, 255, 0.07),
      rgba(255, 255, 255, 0.05));
  z-index: -1;
  border-radius: 12px;
}

@keyframes pulsate {

  0%,
  100% {
    box-shadow: 0 0 9px 2px rgba(0, 0, 0, 0.2);
  }

  50% {
    box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.3);
  }
}


.login-background {
  position: relative;
  overflow: hidden;
}

.login-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg fill='%232874a6' height='200px' width='200px' version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='-5.76 -5.76 75.52 75.52' enable-background='new 0 0 64 64' xml:space='preserve' transform='matrix(-1, 0, 0, 1, 0, 0)rotate(0)' stroke='%232874a6' stroke-width='1.28'%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath id='Clouds' d='M55.3457108,23.3169003c-0.936512,0-1.8457108,0.1455002-2.7149124,0.4335995 C51.0488014,18.0473995,45.8408012,14.0239,39.8143997,14.0239c-5.9519005,0-11.1826,4.0154009-12.7889996,9.6680002 C26.1081009,23.4904003,25.1601009,23.3736,24.1844997,23.3736c-6.0252991,0-11.232399,4.0223999-12.8143988,9.7265015 c-0.8692007-0.2890015-1.7783003-0.4346008-2.7149-0.4346008c-4.7723999,0-8.6552,3.8819008-8.6552,8.6543007 c0,4.7734985,3.8828001,8.6562996,8.6552,8.6562996h28.9755974c3.9942017,0,7.2432022-3.25,7.2432022-7.2441025 c0-0.7332993-0.1128006-1.4395981-0.3162003-2.1064987h10.7879105C60.1180992,40.6254997,64,36.7436981,64,31.9712009 S60.1180992,23.3169003,55.3457108,23.3169003z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 160px 160px;
  background-position: center;
  animation: subtleVibration 9s ease-in-out infinite;
}

@keyframes subtleVibration {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(8px);
  }

  50% {
    transform: translateX(-8px);
  }

  75% {
    transform: translateX(5px);
  }
}

.max-width-80 {
  max-width: 80px;
}