/* Made with love by Mutiullah Samim*/

@import url('https://fonts.googleapis.com/css?family=Numans');

html, body {
    background-image: url('../../Images/MoneyExchangeBG.JPG');
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    font-family: 'Numans', sans-serif;
}

.container{
height: 100%;
align-content: center;
}

/* Card centering — Safari for Windows 5.x doesn't understand `display: flex` at all
   (pre-modern-flexbox), so Bootstrap 4's `d-flex`/`align-items` are silently
   ignored and the card lands at the top-left. Rather than fight flexbox on a
   dead browser, pin the card to the viewport with position:fixed + negative
   margins — pure CSS 2.1, works everywhere back to IE 5.5 / Safari 1.
   All declarations are !important because Bootstrap's own `.card` rule sets
   position:relative and display:flex and can override us even when Loginstyle.css
   loads last (specificity ties). */
.card {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    width: 400px !important;
    height: 370px !important;
    margin-top: -185px !important;
    margin-left: -200px !important;
    display: block !important;
    background-color: rgba(0,0,0,0.9) !important;
}

/* Input group — Bootstrap 4 uses `flex: 1 1 auto; width: 1%` which collapses to a
   ~0px-wide input on Safari 5.x / older WebKit flex implementations. Force the
   input to fill the remaining row width with a calc() fallback that doesn't rely
   on flex-grow working correctly. */
.input-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    width: 100%;
}

.input-group > .form-control,
.input-group > .input-group-prepend + .form-control {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    width: calc(100% - 50px);
    min-width: 0;
}

.input-group-prepend {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50px;
    -webkit-flex: 0 0 50px;
    flex: 0 0 50px;
    width: 50px;
}

.social_icon span{
font-size: 60px;
margin-left: 10px;
color: #FFC312;
}

.social_icon span:hover{
color: white;
cursor: pointer;
}

.card-header h3{
color: white;
}

.social_icon{
position: absolute;
right: 20px;
top: -45px;
}

.input-group-prepend span{
width: 50px;
background-color: #FFC312;
color: black;
border:0 !important;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}

/* Inline SVG icons used instead of FontAwesome webfont, because old Safari
   (Safari 5.x for Windows, any WebKit before WOFF2 support) fails to load
   FA 5's WOFF2 glyphs and the icon boxes render empty. SVGs work everywhere. */
.login-icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
}

input:focus{
outline: 0 0 0 0  !important;
box-shadow: 0 0 0 0 !important;

}

.remember{
color: white;
}

.remember input
{
width: 20px;
height: 20px;
margin-left: 15px;
margin-right: 5px;
}

.login_btn{
color: black;
background-color: #FFC312;
width: 100px;
}

.login_btn:hover{
color: black;
background-color: white;
}

.links{
color: white;
}

.links a{
margin-left: 4px;
}