body {
	margin: 0;
	height: 100%;
	font-family: Roboto;
}
  
.intro {
height: 100vh;
background: url('/static/img/bg.svg'),linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 100% 100%;
background-blend-mode: hard-light;
-webkit-animation: hue-rotate 10s linear infinite;
	animation: hue-rotate 10s linear infinite;
}

@-webkit-keyframes hue-rotate {
from {
	-moz-filter: hue-rotate(0);
	-ms-filter: hue-rotate(0);
	filter: hue-rotate(0);
	}
to {
	-moz-filter: hue-rotate(360deg);
	-ms-filter: hue-rotate(360deg);
	filter: hue-rotate(360deg);
	}
}

@keyframes hue-rotate {
from {
	-moz-filter: hue-rotate(0);
	-ms-filter: hue-rotate(0);
	filter: hue-rotate(0);
	}
to {
	-moz-filter: hue-rotate(360deg);
	-ms-filter: hue-rotate(360deg);
	filter: hue-rotate(360deg);
	}
}

.blurred-box{
	position: relative;
	width: 250px;
	height: 350px;
	top: calc(50% - 175px);
	left: calc(50% - 125px);
	border-radius: 2px;
	overflow: hidden;
  }
  
  .blurred-box:after{
   content: '';
   width: 300px;
   height: 300px;
   background: inherit; 
   position: absolute;
   left: -25px;
   right: 0;
   top: -25px;  
   bottom: 0;
   box-shadow: inset 0 0 0 200px rgba(255,255,255,0.30);
   filter: blur(10px);
  }
  
  
  /* Form which you dont need */
  .user-login-box{
	position: relative;
	margin-top: 80px;
	text-align: center;
	z-index: 1;
  }

  .user-login-box > *{
	display: inline-block;
	width: 200px;
  }
  
  .user-icon{
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background-size: contain;
	background-image: url(/static/img/avatar.jpeg);
	position: absolute;
	top: calc(50% - 200px);
    left: calc(50% - 50px);
  }
  
  .user-name{
	margin-top: 15px;
	margin-bottom: 15px;
	color: white;
  }
  
  input.user-password{
	width: 120px;
	height: 40px;
	border-radius: 2px;
	border: 0;
	padding: 1px 2px;
	margin-bottom: 5px;
  }

button[type="submit"] {
    background: transparent;
    border: 0;
    -webkit-appearance: none;

}
.small_text {
	font-weight: 600;
	font-size: 0.75rem;
}
a {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	opacity: 0.3;
	text-align: center;
}
::-moz-placeholder { /* Firefox 19+ */
	opacity: 0.3;
	text-align: center;
}
:-ms-input-placeholder { /* IE 10+ */
	opacity: 0.3;
	text-align: center;
}
:-moz-placeholder { /* Firefox 18- */
	opacity: 0.3;
	text-align: center;
}
#email2 {
	opacity: 0;
	display: none;
}
.alert-box {
	position: absolute;
	z-index: 1;
	top: 10px;
	right: 0px;
	max-width: 400px;
	font-size: 0.8rem;
}

@media (max-width: 768px) {
	.alert-box {
		position: absolute;
		z-index: 1;
		top: unset;
		right: unset;
		bottom: 0;
		max-width: 100%;
	}
}
.form-switch {
	padding-left: 1.5em;
}
.submit-button {
	position: absolute;
    top: calc(50% - -52px);
    right: calc(50% - 100px);
	opacity: .2;
}
/*alert styling*/
.alert {
	border-color: transparent;
	overflow: hidden;
	background-color: inherit;
  }

  .alert-success::before, .alert-info::before, .alert-warning::before, .alert-danger::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f057";
    width: 50px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 30px;
    text-align: center;
    padding: 2px 0px 0px 0px;
    color: #fff;
  }
  .alert-danger:before {
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f057";
    background: #c82630;
  }
  .alert-success:before {
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f058";
    background: #00986a;
  }
  .alert-info:before {
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f05a";
    background: #00b3c8;
  }
  .alert-warning:before {
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f06a";
    background: #f9af2c;
  }
  .alert > span {
      padding-left: 50px;
  }
  .alert > span > a > p {
    margin-left: 50px;
  }
  *, ::after, ::before {
	  box-sizing: content-box;
  }
.alert-dismissible {
	padding-right: 0rem;
}
  .alert-danger:after{
	content: '';
	width: 100%;
	height: 90px;
	background: inherit; 
	position: absolute;
	left: 55px;
	right: 0;
	top: -25px;  
	bottom: 0;
	box-shadow: inset 0 0 0 200px rgba(255,255,255,0.30);
	filter: blur(10px);
   }
  
  @media (min-width: 768px) {
	.alert {
	  border-radius: 6px;
	  display: table;
	  width: 100%;
	  position: relative;
	  border-top: transparent;
	  border-bottom: transparent;
	  float:right;
	  clear:both;
	}
  
	.alert .close {
	  color: #888;
	  opacity: 1;
	  float: none;
	  position: absolute;
	  right: 18px;
	  top: 50%;
	  margin-top: -12px;
	  font-size: 25px;
	}
  
	.alert .icon {
	  text-align: center;
	  width: 50px;
	  height: 100%;
	  position: absolute;
	  top: 0;
	  left: 0;
	}
  
	.alert .icon i {
	  font-size: 20px;
	  color: #fff;
	  left: 21px;
	  margin-top: -10px;
	  position: absolute;
	  top: 50%;
	}
  
	.alert .icon img {
	  font-size: 20px;
	  color: #fff;
	  left: 18px;
	  margin-top: -10px;
	  position: absolute;
	  top: 50%;
	}
	/*============ colors ========*/
	.alert.alert-success .icon,
	.alert.alert-success .icon:after {
	  border-color: none;
	  background: #00986a;
	}
  
	.alert.alert-info .icon,
	.alert.alert-info .icon:after {
	  border-color: none;
	  background: #00b3c8;
	}
  
	.alert.alert-warning .icon,
	.alert.alert-warning .icon:after {
	  border: none;
	  background: #f9af2c;
	}
  
	.alert.alert-danger .icon,
	.alert.alert-danger .icon:after {
	  border-color: none;
	  background: #c82630;
	}
  }

.progress {
	background-color: inherit;
	position: absolute;
    display: flex;
    height: 1rem;
    overflow: hidden;
    font-size: .75rem;
    border-radius: .25rem;
    top: 90%;
    width: 100%;
    right: 2%;
}
.register_title {
	text-transform: uppercase;
	letter-spacing: 0.8em;
	color: #95aac9;
	padding: 10px 0px 20px 10px;
	pointer-events: none;
	top: calc(50% - 240px);
    left: calc(50% - 120px);
	position: absolute;
}