@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Open+Sans&display=swap');

body{background: #fff; font-size:13px;font-family: 'Open Sans', sans-serif;}
h1,h2,h3{font-family: 'Montserrat', sans-serif;font-weight: bold;}

body,html,#loginOuter,#loginOuter>.row{min-height:100vh;max-width:100%;}
.siteLogo{margin:35px 0 35px;  text-align:center;}
.siteLogo img {
    width: auto;
    height: auto;
    max-width: 200px;
    max-height: 100px;
}

#loginOuter>.row .col-lg{display:flex;align-items:center; justify-content:center;width:50%; padding:0;flex-direction: column;}
#loginBox{width: 330px;max-width:90%}
#loginBox h1{font-size: 24px;margin:0;}
#loginBox .btn{width: 100%; height: 40px; font-size:14px;}
#loginBox .form-floating>.form-control{padding:20px 0 5px; height:auto; border:none;border-radius:0; border-bottom:1px solid #ddd;font-size:14px}
#loginBox .form-floating>input[type="password"].form-control, #loginBox .form-floating>input[type="text"].form-control{padding:20px 38px 5px 0;}
#loginBox .form-control:focus{box-shadow:none;}
.form-floating>label{padding:15px 0 0 0;left:-2px;}
#loginBox .form-control:focus + label{padding-top:10px;}
.loginInfo{color: #888; margin:5px 0 15px;}
.forgot{margin:5px 0 10px; font-size:12px;}
.forgot a:hover{color: #0a58ca; text-decoration: underline;}
.ssoBtn{margin-top:10px;}

.showPwd{background:none;border: none;width:32px;height:32px;position: absolute;right: 0;bottom:5px;border-radius:50px;transition:ease all 0.1s;}
.showPwd:hover{background:#f6f6f6}
.showPwd:before,.showPwd:after{content:'';display: block;width:100%;height:100%;position: absolute;top: 0;left: 0; background:no-repeat center center;opacity:0.5}
.showPwd:before{background-image:url(../images/show-pwd.svg);}
.showPwd.hidePwd:before{display: none;}
.showPwd.hidePwd:after{background-image:url(../images/hide-pwd.svg);}

.loginFooter{margin-top:50px;  color: #888; font-size:12px; padding:0 10px; text-align: center;}
.loginFooter a{color:#777; padding:0 8px 0 5px; line-height:1; display: inline-block; border-right:1px solid #ddd;}
.loginFooter a:hover{color:#222;text-decoration: underline;}
.loginFooter span{margin-left:8px;display: inline-block;}
.loginFooter span:last-child{margin-left:0;}

.form-floating{position: relative;}
.form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label{padding-top:10px !important;}


.loginSlider{background: #EEF5FF;overflow:hidden;max-height:100%;}

.sliderBox{text-align: center;width:100%; opacity: 0;visibility: hidden;transition: opacity 1s ease;}
.sliderBox.slick-initialized {visibility: visible;opacity: 1;/*max-height:650px;*/}

.sliderBox .slick-track{display:flex; align-items:center}
.sliderBox .slick-slide{padding:0 150px; cursor:grab}
.sliderBox .slick-slide:active{cursor:grabbing}
.sliderBox h2{font-size:20px;color:#333;}
.sliderBox img{margin:20px auto;max-height:300px}
.sliderBox :not(.firstSlide)>img{width:100%;}
.sliderBox .proInfo{line-height:1.6;}
.sliderBox .firstSlide h2{font-size:25px; margin:30px 0;}

.slick-dots {
    display: block;
    width: 100%;
    padding: 0;
    margin:20px 0 2px;
    list-style: none;
    text-align: center;
}
.slick-dots li {
    position: relative;
    display: inline-block;
    width:12px;
    height:12px;
    margin: 0 5px;
    padding: 0;
	border-radius:50px;
	background:#1A73E8;
	opacity:0.5;
}
.slick-dots .slick-active{opacity:1;}
.slick-dots li button{opacity:0;cursor: pointer;}

@media all and (max-width:1300px){
	.sliderBox .slick-slide{padding:0 100px;}
	
}
@media all and (max-width:1199px){
	.sliderBox .slick-slide{padding:0 50px;}
}
@media all and (max-width:991px){
	body,html,#loginOuter,#loginOuter>.row{height:auto;}
	.siteLogo{position: relative;left: auto;top:auto;text-align: center; margin:20px 0;}
	.loginFooter{position: relative;left: auto;bottom:auto;width: 100%;text-align: center;padding: 20px;}
	#loginOuter>.row .col-lg{width:100%; padding-top: 30px;padding-bottom: 30px;}
}
@media all and (max-width:575px){
	.sliderBox .slick-slide{padding:0 30px;}
}
@media screen and (min-width:1000px) and (min-height:700px){
	.loginFooter{position: fixed; bottom: 10px}
}
@media all and (min-height:800px){
	.col-lg.justify-content-start{justify-content:center !important}
}