@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 400;
    src: url('../webfonts/tajawal-v3-arabic_latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Tajawal'), local('Tajawal-Regular'),
    url('../webfonts/tajawal-v3-arabic_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../webfonts/tajawal-v3-arabic_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('../webfonts/tajawal-v3-arabic_latin-regular.woff') format('woff'), /* Modern Browsers */
    url('../webfonts/tajawal-v3-arabic_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../webfonts/tajawal-v3-arabic_latin-regular.svg#Tajawal') format('svg'); /* Legacy iOS */
}


html,body{

    background: #00467F;  /* fallback for old browsers */
   /* background: -webkit-linear-gradient(to right, #A5CC82, #00467F);*/  /* Chrome 10-25, Safari 5.1-6 */
    /*background: linear-gradient(to right, #A5CC82, #00467F); *//* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: url(../img/bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    overflow: hidden;
    font-family: 'Tajawal', sans-serif;
}

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

.card{

    margin-top: auto;
    margin-bottom: auto;
    width: 850px;
    background-color: #ffffff;
    border-radius: 0.3rem; -webkit-box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important; box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
}

.social_icon span{
    font-size: 29px;
    margin-left: -11px;
    color: #58ab95;
}

.social_icon span:hover{
    color:#FF9800;
    cursor: pointer;
}

.card-header h4{
    color: #5d6669;
    font-weight: bold;
}

.social_icon{
    position: absolute;
    left: 20px;
    top: -27px;
}
.card-header {
    padding: .8rem 1.25rem;
}

.input-group-append span{

    background-color: #CD3157;
    color: white;
    border:0 !important;
}

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

}



.login_btn{
    font-size: 16px;
    font-weight: bold;
    color: white;
    background-color: #CD3157;

}

.login_btn:hover{
    color: white;
    background-color: #144f5e;
}

.links{
    color: #5d6669;
    font-weight: bold;
}

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





span.msg_error {
    color: #ea0f0f;
    float: right;
    font-weight: bold;
    font-size: small;
}

span.msg_error {
    direction: rtl;
}
.alert-danger {
    direction: rtl;
}
.alert-successok {
    color: #001f07;
    background-color: #cbeaa5;
    border-radius: 0.3rem;
  }