body>div>form {
	position:relative;
	height:100vh;
	margin:0;
	padding:0
}

.name {
width: 75%;
display: flex;
align-items: center;
height: 100%;
margin-left: 2%;
}


.header-container {
display: flex;
width: 100%;
background-color: #f7fdff;
border-bottom: 1px solid #823600;
}

.header-content {
text-align: center;
}
.flex-mid {
flex-grow: 1;
padding: 5px;
}
.header-content h1 {
color: navy;
font-size: 1.6em;
font-weight: 400;
padding: 0px;
margin: 0px;
}
.header-content h1 span[main] {
font-size: 2em;
font-weight: 600;
color: #034865;
text-shadow: 2px 2px 2px #4d869c;
display: block;
}
.header-content h1 span {
white-space: nowrap;
}
.logo-right {
background-image: url(/App_Static/images/mcrhrdi-40.png);
margin-right: 10px;
}

.fr {
float: right;
}

.nav-float, .side-float {
float: left;
}

.main-sec {
width: 100%;
}

.left-side {
width: 50%;
height: 100%;
display:flex;
margin:0 auto;
}

.right-side {
width: 48%;
height: 100%;
display:flex;
align-items: center;
}

.side-img {
margin: 0 auto;
}

.card-sec {
height: 85%;
width: 75%;
margin-top: 5%;
margin-left: 10%;
background: #fff;
box-shadow: 0px 0px 20px #000;
display: flex;
align-items: center;
}

.card-det {
width: 80%;
margin: 0 auto;
padding:25px 0;
}

.intro-txt {
text-align: center;
padding-bottom: 15px;
font-size: 17px;
}

.card-det p {
margin-block-start: 0em;
margin-block-end: 0em;
margin-bottom: 5px;

}

.card-det .clstxt {
width: 100%;
border: 1px solid #a5a5a5;
border-radius: 0;
margin-bottom: 15px;
padding: 10px;
}

.start-btn {
border: none;
background: #264251;
border-radius: 0;
padding: 10px 30px; 
margin: 0 auto;
display: block;
color: #fff;
font-family: 'Montserrat', sans-serif;
}

.card-ddl {
width: 95%;
border: 1px solid #a5a5a5;
border-radius: 0;
margin-bottom: 15px;
padding: 10px;
}
.errorMsg{
border: 1px solid red;
border-radius: 9px;
text-align: center;
padding: 3px;
margin-bottom: 10px;
color: red;
}
.card-sec-login {
background: #fff;
box-shadow: 0px 0px 20px #000;
display: flex;
align-items: center;
width: 80%;
margin-top: 10%;
margin-left: 10%;
}
@media only screen and (min-width: 320px) {
.card-sec-login {
height: 60%;
}
}
@media only screen and (min-width: 1450px) {
.card-sec-login {
height: 50%;
}
}
@media only screen and (max-width: 1024px) {
	.left-side {
    	width: 65%;
    }
}
@media only screen and (max-width: 860px) {
	.left-side {
    	width: 80%;
    }
    .header-content h1 {
    	font-size: 1.3em;
    }
}

@media only screen and (max-width: 650px) {
	.left-side {
    	width: 90%;
    }
    .header-content h1 {
    	font-size: 1.1em;
    }
}
@media only screen and (max-width: 540px) {
	.intro-txt {
    	font-size: 15px;
    }
    .header-content h1 {
    	font-size: 0.8em;
    }
	.card-sec-login {
	    width: 100%;
	    margin-left: 0;
	}
}
@media only screen and (max-width: 400px) {
    .header-content h1 {
    	font-size: 0.75em;
    }
    .header-content h1 span[main] {
		font-size: 1.5em;
	}
}