/* CSS Document */

@font-face {
    font-family: Poppins;
    src: url(../fonts/Poppins-Medium.ttf);
}

body
{
	margin:0px; padding:0px;
	background:#eee7e2;
	font-family:Poppins; color:#0d1014;
	background:url(../images/loginbg.jpg) no-repeat;
	background-size:100% auto;
}
div,ul,li,a,h1,h2,h3,h4,h5,h6,p
{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
ul,li,h1,h2,h3,h4,h5,h6,p{ margin:0px; padding:0px; }

div,ul,li,a,h1,h2,h3,h4,h5,h6,p
{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
ul,,h1,h2,h3,h4,h5,h6,p{ margin:0px; padding:0px; }



/* Form Fields */
input[type='text'],input[type='search'],textarea,input[type='password'],select,input[type='date']
{
	width:100%; height: auto; float:left; outline:0px;
	padding-left:5px; padding-right:5px;
	border:1px solid #d7dce5;
	font-size:13px; color:#212121; font-family:Helvetica;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	
    -webkit-transition: width 1s ease;  
    -moz-transition: width 1s ease;  
    -o-transition: width 1s ease;  
    -ms-transition: width 1s ease;  
    transition: width 1s ease;
	
    transition:border 0.7s;
}
input[type='text']:focus,input[type='search']:focus,input[type='password']:focus,textarea:focus,input[type='date']:focus,select:focus
{
	border:1px solid #d7dce5;
}
input[type="text"]:disabled{ cursor:not-allowed; background:#EEE; }
input[readonly]{ cursor:not-allowed; background:#EEE; }
button
{
	width:auto; height:27px; float:left;
	padding-left:20px; padding-right:20px;
	background:#0072c5; border:0px;
	outline:0px; cursor:pointer;
	font-size:12px; color:#FFF;
}
button:hover{ background:#1e82cc; }
button:active{ background:#5c5c5c; }
button:disabled { background:#5c5c5c; cursor:not-allowed; }


#modal
{
	width:100%; height:100vh; position:fixed; left:0%; top:0%; display:none;
    z-index: 1010;
    overflow-x: hidden;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.30);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}
#modal_in
{
	width:98%; max-width:480px; height:auto; position:absolute; left:50%; top:50%; z-index:1056;
	padding:40px;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    background: rgba(255, 255, 255, 0.30);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}
#modal_in_error
{
	width:100%; height:auto; float:left;
	margin-bottom:15px;
	text-align:center;
}
#modal_in_error i
{
	width:85px; height:auto;
	margin-bottom:15px;
	font-size:72px; color:#e74242;
    animation: Shake 2s linear infinite; 
}
@keyframes Shake { 
    0% { 
        transform: rotate(13deg); 
    } 
  
    25% { 
        transform: rotate(-14deg); 
    } 
  
    50% { 
        transform: rotate(13deg); 
    } 
  
    75% { 
        transform: rotate(-14deg); 
    } 
  
    100% { 
        transform: rotate(13deg); 
    } 
}
#modal_in_error h2
{
	width:100%; height:auto; float:left;
	text-align:center; color:#b92025; font-size:24px; font-weight:500;
}
#modal_in_error p
{
	width:100%; height:auto; float:left;
	text-align:center; font-size:16px;
}

#modal_in ul
{
	width:100%; height:auto; float:left;
	text-align:center; font-size:16px;
	background:#f45757;
	border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
	font-size:14px; color:#FFF; text-align:left;
	padding:15px
}
#modal_in ul li{ margin-left:5%; width:95%; }
#modal_in_close
{
	width:50%; height:auto; float:left; cursor:pointer;
	margin-top:20px; margin-left:25%; margin-right:25%;
	border:1px solid #b92025;
	font-size:14px; color:#b92025; text-align:center; line-height:42px;
	border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
}
#modal_in_close:hover{ background:#b92025; color:#FFF; text-decoration:none; }


#error_msg
{
	width:35%; height:auto; position:absolute; left:2%; top:2%; z-index:999;
	background:#df6c6e;
	-webkit-border-radius: 3px;
	-moz-border-radius:3px;
	border-radius: 3px;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    0px 0px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow:         0px 0px 5px 0px rgba(50, 50, 50, 0.75);
	padding:20px;
	font-size:13px; color:#FFF;
}
#error_msg_close{ font-size:14px; color:#FFF; position:absolute; right:10px; top:5px; }

#login_form
{
	width:30%; height:auto; float:left;
	margin-left:35%; margin-right:35%; margin-top:10%;
	background:rgba(255,255,255,0.8);
	padding:20px;
}

#logo
{
	width:100%; height:auto; float:left;
	text-align:center;
}

#logo img
{
	width:auto; height:95px;
}

#login_form h1
{
	width:100%; height:auto; float:left;
	font-size:16px; text-align:center;
	margin-bottom:25px;
}

#login_form input
{
	height:40px;
	margin-bottom:20px;
}

#login_form button
{
	height:40px;
	font-size:14px;
}


@media(max-width:601px)
{
	body{ 
	background-size:auto 100vh;
	}
	#login_form{ width:94%; margin-left:3%; margin-right:3%; }
}