@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/**
 * Title:      Optiva Stylesheet
 * Created:    20/01/2022
 * Author:     Development Team <info@optiva.co.uk>
 * Copyright:  Optiva

 * ========================================================================== */


a { text-decoration: none; }
a:link { text-decoration: none; }
a:hover { text-decoration: none; }
a:active { text-decoration: none; }
a:visited { text-decoration: none; }


/**
 * Boostrap Core Framework Overrides
 * ========================================================================== */

.container { width: 100%; max-width: 100%; }

.btn-primary { background: #006699; border-color: #006699; font-size: 18px; font-weight: 600; color: #fff; border-radius: 3px; box-shadow: none; padding: 5px 30px; margin: 10px 0px 50px 0px; }
.btn-primary:hover { background: #003366; border-color: #003366; }


			
/**
 * Login Panel
 * ========================================================================== */	
 
 
html { background: url('../assets/Image-Style-V3.jpg') no-repeat; background-position: 800px 0px; background-size: 800px; background-repeat: no-repeat; background-color: #172734; }
	
body { background:#f7f7f7; font-weight: 400; font-family: 'Poppins', sans-serif;}


@media screen and (min-width: 1500px) {

#login-panel { max-width: 460px; }

}

#login-panel { background: #fff; padding: 50px 60px 40px 60px; margin: 0; min-height: 100%; position: absolute; text-align: center; }
    #login-panel img { max-width: 140px; margin-bottom: 40px; }
	#login-panel h2 { color: #00a5c8; font-size: 30px; line-height: 38px; font-weight: 400; margin: 0px 0px 12px 0px; }
	#login-panel h3 { color: #999; font-size: 26px; margin: 0px 0px 20px 0px; }
	#login-panel h5 { font-size: 18px; line-height: 26px; }
	#login-panel p { color: #666; font-size: 15px; line-height: 22px; font-weight: 300; padding: 10px 0px 10px 0px; margin: 0px; }
	#login-panel p a { color: #31aabd; }
	#login-panel p a:hover { color: #1b8a93; }
	#login-panel form { padding-top: 15px; padding-bottom: 30px; }
	#login-panel label { color: #333; font-size: 16px; font-weight: 400; padding: 5px 0px; margin: 0px; }

	#login-panel .checkbox { position: relative; margin-top: 25px; margin-bottom: 0px; text-align: left; }
	#login-panel .checkbox input[type="checkbox"] { height: 32px; width: 100%; position: absolute; margin-top: 0px; margin-left: -20px; }
	#login-panel .checkbox label { color: #666666; font-size: 18px; line-height: 28px; padding-left: 19px; }
	#login-panel .checkbox label::before { width: 30px; height: 30px; border: 1px solid #cccccc; }
	#login-panel .checkbox label::after { color: #1b8a93; width: 30px; height: 30px; font-size: 20px; padding-left: 5px; padding-top: 7px; }

	#login-panel .form-group { margin-bottom: 10px; }

	#login-panel .form-control { font-size: 17px; border-bottom: 1px solid #ccc; border-left: 0px; border-right: 0px; border-top: 0px; border-radius: 0px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.0);}

	#login-panel .alert { margin-top: 30px; margin-bottom: 0px; }
	#login-panel .alert .close { display: none; }

	.error-validate { border-bottom: #cc0000 3px solid; padding-bottom: 10px; margin-bottom: 15px; font-size: 15px; line-height: 22px; color: #cc0000; font-weight: 400; }
	
.btn-login { background: #00a5c8; border-color: #00a5c8; font-size: 15px; font-weight: 600; color: #fff; border-radius: 30px; box-shadow: none; padding: 8px 26px; margin: 13px 5px 0px 0px; }
.btn-login:hover { background: #0499b9; border-color: #0499b9; color: #fff;}

.btn-login-keyline { background: none; border-color: #00a5c8; font-size: 15px; font-weight: 600; color: #00a5c8; border-radius: 30px; box-shadow: none; padding: 8px 26px; margin: 13px 0px 0px 5px; }
.btn-login-keyline:hover { background: #00a5c8; border-color: #00a5c8; color: #fff;}


@media screen and (max-width: 1760px) {

html { background-position: 650px 0px; }

}

@media screen and (max-width: 1500px) {
 
html {  background-position: right 0px; }

}

@media screen and (max-width: 992px) {
	
html { padding: 30px; background-position: 0px 0px; }

#login-panel { position: relative; }

}

@media screen and (max-width: 500px) {

#main-login-content { padding: 0px; }

}