body {

    font-family: "Poppins", Arial, Helvetica, sans-serif !important;

    background: url(../images/bann.png) no-repeat 0px 0px !important;

    background-size: cover !important;

    -webkit-background-size: cover !important;

    -ms-background-size: cover !important;

    -o-background-size: cover !important;

    -moz-background-size: cover !important;

    background-position: center !important;

    background-attachment: fixed !important;

}

.login-box .card .login-card-body .login-box-msg{

    text-align: center;

    font-size: 45px;

    font-weight: 300;

    margin: 30px 0; margin-top: 0px;

    color: #fff;

    letter-spacing: 9px;

    text-shadow: 4px 4px 3px #000;

    word-spacing: 4px;

    font-weight: 500;

}

.login-box {

    width: 100%;

}

.card {

    position: relative;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-direction: column;

    flex-direction: column;

    min-width: 0;

    word-wrap: break-word;

    background: none !important;

    background-clip: border-box;

    border: 0 ;

    border-radius: .25rem;

    box-shadow: none;

    margin-bottom: 0rem;

}

.login-card-body, .register-card-body {

    background: none !important;

    border-top: 0;

    color: #666;

    padding: 20px;

}

.login-box-form{     width: 80%; max-width: 455px;

    margin: 0 auto;

    padding: 2em 2em;

    background: #fff;

    -webkit-box-shadow: 0 6px 12px 0 rgb(37 37 37);

    -moz-box-shadow: 0 6px 12px 0 rgb(37, 37, 37);

    box-shadow: 0 6px 43px 0 rgb(0 0 0 / 40%);

}

.login-box .card .login-card-body .input-group .login-input-group-append .input-group-text {

    border: none !important;

    border-right: 0px!important;

    border-top-left-radius: .25rem!important;

    border-bottom-left-radius: .25rem!important;

    background: #00c6d7;

    color: #fff;

    border-radius: 0 !important;

}

.login-box .card .login-card-body .input-group .form-control {

    border-radius: 0;

    background-color: #fff;

    border: 0;

    border-left: 2px solid #00c6d7;

}



.form-control {

    display: block;

    width: 100%;

    height: calc(3rem + 2px);

    padding: .5rem .75rem;

    font-size: 1rem;

    font-weight: 400;

    line-height: 1.5;

    color: #000 !important;

    background-clip: padding-box;

    border: 1px solid #ced4da;

    border-radius: .25rem;

    box-shadow: inset 0 0 0 transparent;

    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;

    margin-right: 15px;

    -webkit-box-shadow: 0 6px 12px 0 rgb(37 37 37);

    -moz-box-shadow: 0 6px 12px 0 rgb(37, 37, 37);

    box-shadow: 0 6px 12px 0 rgb(0 0 0 / 40%);

}

.form-control::-webkit-input-placeholder {  color: #000; }



.form-control:-ms-input-placeholder { color:  #000; }



.form-control::placeholder { color:  #000; }

.input-group-text {

    display: -ms-flexbox;

    display: flex;

    -ms-flex-align: center;

    align-items: center;

    padding: .375rem 1.1rem;

    margin-bottom: 0;

    font-size: 1.3rem;

    font-weight: 400;

    line-height: 1.5;

    color: #495057;

    text-align: center;

    white-space: nowrap;

    background-color: #e9ecef;

    border: 1px solid #ced4da;

    border-radius: .25rem;

}

.text-sm .btn{text-align: center;

    border: 0;

    color: #000;

    font-size: 17px;

    font-weight: 600;

    padding: 14px 90px !important;

    background-color: #fff;

    border: 3px solid rgba(255, 255, 255, 0.43);

    box-shadow: 0 0px 12px 0 rgb(0 0 0 / 71%);

    outline: none;

    cursor: pointer;

    letter-spacing: 1px;

    transition: 0.5s ease-in-out;

    -webkit-transition: 0.5s ease-in-out;

    -moz-transition: 0.5s ease-in-out;

    -o-transition: 0.5s ease-in-out;

    -ms-transition: 0.5s ease-in-out;

    display: inline-block;

    width: auto;



}

.text-sm .btn:hover,.text-sm .btn:focus {

    color: #ffffff;

    border-color: #00c6d7;

}

.text-align{ text-align: center; margin-top: 40px; }

.mb-3, .my-3 {

    margin-bottom: 1.5rem!important;

}

.login-box-form h2 {

    color: #000;

    font-size: 20px;

    font-weight: 600;

    text-align: center;

    margin-bottom: 1.5em;

    letter-spacing: 3px;

    /* text-shadow: 3px 3px 4px #000; */

}

.login-copyright{ color: #f1f1f1; }

.login-copyright a{color: #fff;}

.anim {

    position: relative;

    display: block;

    margin-top: .5em;

}

input.checkbox {

    background: #fff;

    cursor: pointer;

    width: 1.2em;

    height: 1.2em;

    margin: 0 6px 0 0!important;

}

input.checkbox:before {

    content: "";

    position: absolute;

    width: 1.2em;

    height: 1.2em;

    background: inherit;

    cursor: pointer;

}

input.checkbox:after {

    content: "";

    transition: .4s ease-in-out;

    position: absolute;

    top: 1px;

    left: 0px;

    z-index: 1;

    width: 1.1em;

    height: 1.1em;

    /* margin-top: 4px; */

    border: 1px solid #00c6d7;

    box-sizing: border-box;

}

input.checkbox:after {

    content: "";

    transition: .4s ease-in-out;

    position: absolute;

    top: 0px;

    left: 0px;

    z-index: 1;

    width: 1.2em;

    height: 1.2em;

    /* margin-top: 4px; */

    border: 1px solid #00c6d7;

}

input.checkbox:checked:after {

    transform: rotate( -45deg );

    height: .5rem;

    border-color: #00c6d7;

    border-top-color: transparent;

    border-right-color: transparent;

}

.anim input.checkbox:checked:after {

    transform: rotate( -45deg );

    height: .5rem;

    animation: .4s rippling .4s ease;

    animation-fill-mode: forwards;

}


.check_remember,.check_remember a,.check_remember label{ color: #fff; font-weight: normal !important; }\

.check_remember a{ display: block; padding-top: 8px; }

@media (max-width: 900px){

    .login-box .card .login-card-body .login-box-msg {font-size: 33px; letter-spacing: 5px;  padding: 0;}

    .login-box-form { width: 100%; padding: 4em 2em; }

}



@media (max-width: 500px){

    .login-box .card .login-card-body .login-box-msg {font-size: 26px; letter-spacing: 4px;  padding: 0;}

    .login-box-form { width: 100%; padding: 3em 1em; }

    .login-box .card .login-card-body {

        padding: 30px 6px;   border-radius: 0.25rem;    }

    .login-box-form h2 { font-size: 18px; line-height: 1.5;}

}