@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/04/2024
 * Author:     Development Team <info@optiva.co.uk>
 * Copyright:  Optiva

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


a { color: #b8894c; text-decoration: none; }
a:link { text-decoration: none; }
a:hover { color: #d8a35d; text-decoration: none; }
a:active { text-decoration: none; }
a:visited { text-decoration: none; }


.alert.danger { background: #fbe8e8; }
.alert.success { background: #e8fbe9; }

.alert { display: none; }
.alert.active { display: block; }

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

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

.btn { font-size: 18px; line-height: 20px; font-weight: 400; padding: 9px 30px; color: #b8894c; border: 2px #b8894c solid; border-radius: 30px; filter: drop-shadow(0px); box-shadow: none; transition: 0.2s; transition-timing-function: ease-in; }
.btn:hover { transition: 0.2s; transition-timing-function: ease-in; }
.btn:focus { transition: 0.2s; transition-timing-function: ease-in; }

.btn-gold { background: #b8894c; border-color: #b8894c; color: #ffffff; }
.btn-gold:hover { background: #d8a35d!important; border-color: #d8a35d!important; color: #ffffff!important; }
.btn-gold:focus { background: #b8894c; border-color: #b8894c; color: #ffffff; }
.btn-gold:active { background: #b8894c!important; border-color: #b8894c!important; color: #ffffff!important; }
			

/**
 * Login Panel
 * ========================================================================== */	
 
 
html { background: url('../assets/login-bg.jpg') no-repeat; background-position: top center; background-size: 100%; background-repeat: no-repeat; background-color: #0d3638; }
	
body { background:#f7f7f7; font-weight: 400; font-family: 'Poppins', sans-serif;}

.main-background { background: #00070a; padding: 0px 0px 0px 0px; min-height: 100vh; position: relative; overflow: hidden; }
    .main-background video { position: fixed; top: -130px; left: 350px; right: 0px; }


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

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

}

#login-panel { background: #fff; padding: 50px 40px 40px 40px; margin: 0; min-height: 100%; position: absolute; text-align: center; }
    #login-panel img { max-width: 200px; margin-bottom: 40px; }
	#login-panel h2 { color: #b8894c; 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 { color: #003333; 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: #b8894c; }
	#login-panel p a:hover { color: #d8a35d; }
	#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 .btn { margin-top: 10px; }

	#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; }


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

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

}

@media screen and (max-width: 1400px) {
 
    .main-background video { top: -60px; max-width: 1600px; }

}

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

.main-background { padding: 30px; }

#login-panel { position: relative; }

}


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

.main-background video { width: 100%; bottom: 0px; top: auto; position: absolute; }

}

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

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

}