*
{
    box-sizing: border-box;
}
html
{
    height:100%;
}
body
{
    margin:0;
    font-family:'Poppins',sans-serif;
    height:100%;
}
.page-container
{
    display:flex; align-items:center; justify-content:center;
    width:100%;
    height:100%; background:url(/resources/bblogin/images/loginBG.jpg?2482023) top left no-repeat; background-size:cover;
}
.logo-about-section
{
    width:45%;
    display:inline-flex;
    align-items:center;
    /*flex-direction:column;*/
    justify-content:center;
    /*background-color:#09b76b;*/
    /*color:#ffffff;*/ border-radius: 15px 0 0 15px;
    position:absolute; height:100%; top: 0; left: 0; background-color: #fdfdfdbf;;
}
.loginMidlScn { width:100%; max-width:700px; display: inline-flex; align-items: center; justify-content: flex-end; position: relative; }
.logo-about-section img
{
    /*height:60px;
    margin-top:-160px;*/
}
.bold-txt
{
    font-size:25px;
    margin:50px 0 10px 0;
    font-weight:500;
}
.logo-about-section svg
{
    position:absolute;
    bottom:0;
}
.login-section
{
    /*display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    margin:auto;
    max-width:500px;
    width:100%;*/ border-radius:0 15px 15px 0;
    width: 55%; height: auto; padding:30px 15px; background: #ffffff7a;
}
.login-head
{
    color:#063d99;
    font-size:28px;
    font-weight:300; padding-left:calc(50% - 70px); margin-bottom:20px;
    /*margin:-150px 0 20px 0;*/
}
.login-head > div { font-weight:600; line-height:10px }
.login-form
{
    display:flex;
    flex-direction:column;
    width:100%; padding:0 50px;
}
.login-input
{
    width:100%;
    margin:10px 0;
}
.login-input input
{
    width:100%;
    padding:13px 16px 13px 5px;
    border-radius:3px;
    outline:0;
    border:0;
    border-bottom:1px solid #ddd;
    /*color:#09b76b;*/
    font-family:'Poppins',sans-serif;
    font-size:15px;
}
.login-input input:focus
{
    border-color:#063d99; color:#063d99; font-weight:bold;
}
.login-button
{
    width:100%;
    margin:10px 0; text-align: center;
}
.login-button button
{
    width:120px;
    height:40px;
    border:0;
    outline:0;
    color:#ffffff;
    background-color:#990505;
    border-radius:50px; letter-spacing:1px;
    font-size:16px;
    font-family:'Poppins',sans-serif;
    cursor: pointer;
}
.login-button button:hover
{
    background-color: #990505;
    background-image: linear-gradient(140deg, #9b0b0b 10%, #3b3a3a 75%);
}
.login-options
{
    display:flex;
    justify-content:space-between;
    margin:5px 0;
    font-size:15px;
}
.login-options label
{
    cursor: pointer;
    color:#505050;
}
.login-options a
{
    color:#09b76b;
    font-size:16px;
}
.checkbox-container 
{
display:flex;
align-items:center;
position: relative;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

}

/* Hide the browser's default checkbox */
.checkbox-container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}

/* Create a custom checkbox */
.checkmark {
height: 18px;
width: 18px;
background-color: #fff;
border-radius:3px;
border:1px solid #09b76b;
}


/* When the checkbox is checked, add a blue background */
.checkbox-container input:checked ~ .checkmark {
background-color: #09b76b;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}

/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
display: block;
}

/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
left: 6px;
top: 5px;
width: 4px;
height: 8px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.other-login
{
    margin:0 0 10px;
    color:#040404;
    font-size:15.5px; text-align:center; font-weight:300; letter-spacing:1px;
}
.login-links
{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    margin:10px 0;
}
.ologin-btn
{
    height:45px;
    /*border-radius:3px;
    display:flex;
    align-items:center;
    justify-content:center;
    outline:0;
    background-color:#ffffff;*/
    max-width:45px;
    width:100%;
    cursor: pointer;
}
.fbtn
{
    background-image:url("../images/facebook-light.svg");
    background-repeat:no-repeat;
    background-position:center;
    border:0;
}
.gbtn
{
    background-image:url("../images/google-light.svg");
    background-repeat:no-repeat;
    background-position:center;
    border:0;
    margin:0 10px;
}
.abtn
{
    background-image:url("../images/apple-light.svg");
    background-repeat:no-repeat;
    background-position:center; 
    border:0;  
}
.fbtn:hover
{
    background-image: url("../images/facebook-dark.svg");
    background-color:rgb(59,89,152); border-radius:50%;
}
.gbtn:hover
{
    background-image: url("../images/google-dark.svg");
    background-color:rgb(64,130,238); border-radius:50%;
}
.abtn:hover
{
    background-image: url("../images/apple-dark.svg");
    background-color:rgb(0,0,0); border-radius:50%;
}

/*social icons css start*/

.btn_wrap i {    
    opacity: 0;
    font-size: 28px;
    color: #1F1E1E;
    will-change: transform;
    -webkit-transform: scale(.1);
            transform: scale(.1);
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

.btn_wrap {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    overflow: hidden;
    cursor: pointer;
    width:100%;
    height:50px;
    background-color: #EEEEED;
    border-radius: 80px;
    padding: 0 18px;
    will-change: transform;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.btn_wrap:hover {
    /* transition-delay: .4s; */
    -webkit-transform: scale(1);
            transform: scale(1)
}
.btn_wrap span {
    position: absolute;
    z-index: 99;
    width:100%;
    height:50px;
    border-radius: 80px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size:16px;
    text-align: center;
    line-height:46px;
    letter-spacing: 2px;
    color: #EEEEED;
    background-color: #1F1E1E;
    padding: 0 18px;
    -webkit-transition: all 1.2s ease;
    transition: all 1.2s ease;
}
.btn_wrap .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 240px;
    height: 64px;
    border-radius: 80px;
}
.btn_wrap .container i:nth-of-type(1) {
            -webkit-transition-delay: 1.1s;
                    transition-delay: 1.1s;
}
.btn_wrap .container i:nth-of-type(2) {
            -webkit-transition-delay: .9s;
                    transition-delay: .9s;
}
.btn_wrap .container i:nth-of-type(3) {
            -webkit-transition-delay: .7s;
                    transition-delay: .7s;
}
.btn_wrap .container i:nth-of-type(4) {
            -webkit-transition-delay: .4s;
                    transition-delay: .4s;
}
.btn_wrap:hover span {
    -webkit-transition-delay: .25s;
            transition-delay: .25s;
    -webkit-transform: translateX(-320px);
            transform: translateX(-320px)
}
.btn_wrap:hover i {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
}
/*social icons css end*/

@media only screen and (max-width:1200px)
{
    .logo-about-section{width:40%}  
}
@media only screen and (max-width:950px)
{
    .logo-about-section{display:none;}  
    .login-section{padding:0 20px;}
    .login-options a{font-size:15px;}
}