@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&display=swap');
* {
  margin: 0;padding: 0;
}
html,html{
 height:100%;
 min-height:100%;
 }
h2{color: var(--theme-color);font-weight: 400;margin-bottom: 30px;text-transform: uppercase; font-size: 21px;}
body {
  background: white;
  background: var(--main-bg-image);
  background-size: cover;
  font-family: 'Open Sans', sans-serif;
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  position: absolute;
  place-content: center;
}

form {
  height: auto;
  margin: 0 auto;
  width: 65%;
  max-width: 760px;
}

label {
  color:  var(--theme-color);
  display: block;
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 15px;
}
.logo{width: 220px; margin-bottom: 15px;}
input[type=text],input[type=password] {
  background-color: var(--theme-bkcolor);
  border: 0;
  color: #333333;
  font-size: 22px;
  padding: 0 20px;
  height: 50px;
  border-radius: 7px;
  outline: none !important;
  width: calc(100% - 40px);
  max-width: 100%;
  margin-bottom: 30px;
}
input[type=checkbox] {display: none;}
input::-moz-focus-inner {
  border: 0;
}
#password_reset_show, .link{
  display:block;
  font-size: 18px;
  color: var(--theme-color);
  text-align: right;
  display: inline-block;
  float: right;
  margin-left: 20px;
}
#login_form_show{
  color: var(--theme-color);
  display: block;
  text-align: center;
  font-size: 18px;
}
label.container{
  position: relative;
  padding-left: 35px;
  display: inline-block;
  margin-bottom: 30px
}
.checkmark {
    position: absolute;
    top: 0;
    left: 1px;
    height: 22px;
    width: 22px;
    background-color: var(--theme-bkcolor);
    border: 0;
   	border-radius: 3px;
}
.container:hover input ~ .checkmark {
    background-color: #ccc;
}
.container input:checked ~ .checkmark {
    background-color: var(--theme-bkcolor);
}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.container input:checked ~ .checkmark:after {
    display: block;
}
.container .checkmark:after {
    left: 7px;
    top: 4px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2.2px 2.2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.md-btn {
  background: var(--primary-color);
  border: 0;
  color: var(--theme-color);
  font-size: 22px;
  text-transform: uppercase;
  padding: 0 22px;
  height: 50px;
  border-radius: 7px;
  outline: none !important;
  width: 100%;
  margin: 10px 0 30px 0;
  cursor: pointer;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	position: relative;
	overflow: hidden;
  display: block;
}
a.md-btn{
  display: block;
  text-align: center;
  line-height: 50px;
  text-decoration: none;
  padding 0;
}
.md-btn span{
	z-index: 2;
  position: relative;
}
.md-btn::before, .md-btn::after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-color: rgba(0, 0, 0, 0.10);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	-webkit-transform: translate(0,-100%);
	transform: translate(0,-100%);
	-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
	transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.md-btn::after{
	-webkit-transition-delay: 0.2s; /* Safari */
    transition-delay: 0.2s;
}
.md-btn:hover::before, .md-btn:hover::after{
	-webkit-transform: translate(0,0);
	transform: translate(0,0);
}
.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
.alert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
}
.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;