@charset "UTF-8";

* {margin: 0; padding: 0; box-sizing: border-box;}
a {text-decoration: none;}
.center {text-align:center;}
/*.material-icons {opacity: 0;transition:opacity 0.5s;}
*/body { background-color: #61a0b1; min-height:100vh; background-image: url(../../imgs/1443/bg.png); font-family: 'Source Sans Pro', Arial; font-size: 14px; color: #000; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-print-color-adjust:exact;}
.wrapper #mobile-bg {width: 100%; height: 200px;}
.content {background: #fff; opacity: 0.95; border-radius: 21px; padding: 20px; margin: 15px; display: flex; justify-content: center; flex-direction: column; padding-bottom:25px;}
#divLogin{text-align:center}
header .logo-image {display: block; margin-left: auto; margin-right: auto; padding: 0; height: 172px; margin-bottom: 10px;}
.heading-title {font-family: "Alice", serif;color: #b98027; text-align: center; margin-bottom: 10px;font-size: 11px;}
h3 {font-family: "Alice", serif;color: #7f1801; text-align: center; margin-bottom: 10px; font-size: 18px;}
.motif-login {display: block; margin-left: auto; margin-right: auto; padding: 0; width: 90px; margin-bottom: 10px;}
.input-group {display: flex;flex-direction: column;justify-content: center;margin-left: auto;margin-right: auto;margin-bottom: 10px; text-align:center;}
.br {margin: 5px;}
.lbl-text {font-size: 12px;font-family: "Roboto", sans-serif; color: #0e4653; opacity: 0.7; text-align: left; margin-bottom: 3px; margin-left: 70px; padding-top: 10px;}
.input-control {width: 253px; height: 40px; border-radius: 21px; padding: 5px; font-size: 14px; letter-spacing: 5px; border: 1.5px solid #0e4653; text-align:center; outline-style: none;margin-bottom: 2px;}
.eye {color: #0e4653; vertical-align: middle;margin-left: -35px;cursor: pointer;display: inline;font-size: 16px;position: absolute;margin-top: 9px;}
#hideeye {display: none;}
input[type="number"] {-moz-appearance: textfield;}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
.btn-login {width: 140px; height: 40px; border-radius: 21px; padding-left: 10px; font-size: 15px; margin: auto; background-color: #0e4653; border: solid 1px #0e4653; border-bottom: solid 5px #0e4653; color: #fff; transition: all .5s ease-in; font-weight: 400; margin-bottom: 10px; cursor: pointer;}
.btn-login:hover {background-color: #bfe7ef; color: #0e4653;}
.btn-Login-Miqaat{background-color: #b98027 !important;border:none; border: solid 1px #b98027 !important; border-bottom-style: solid; border-bottom-width: 1px; border-bottom: solid 5px #b98027 !important}
.btn-Login-Miqaat:hover{background-color:#ffefd4 !important; color:#7a4c02 !important}
.select {font-size: 12px;text-align: center;vertical-align: middle;margin-bottom: 25px;font-family: "Roboto", sans-serif;color: rgb(160, 157, 157); cursor: pointer;}
.select a {margin-left: 40px;font-family: "Roboto", sans-serif;font-size: 11px;color: rgb(160, 157, 157);white-space: nowrap; cursor: pointer;}
.select a:hover {color: #7f1801;}
input [type="checkbox"] {-webkit-appearance: none;height: 40px;width: 40px; background-color: #7f1801; border-radius: 5px;cursor: pointer;}
.policy {font-size: 6px;text-align: center;font-family:"Roboto", sans-serif;}
.policy a {color: #666; cursor: pointer;}
.policy a:hover {color: #7f1801;}

.divDate {color: #7f1801; font-size: 18px; margin: 5px; line-height: 1.1; display: inline-block; border-radius: 10px; padding: 5px; cursor:pointer;}
.divDate:hover {background: #fff;}
.its-blinker {-webkit-animation-name: blinker; -webkit-animation-duration: 1s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -moz-animation-name: blinker; -moz-animation-duration: 1s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; animation-name: blinker; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite;}
.its-blinker-slow {-webkit-animation-name: blinker; -webkit-animation-duration: 3s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -moz-animation-name: blinker; -moz-animation-duration: 3s; -moz-animation-timing-function: ease-in-out; -moz-animation-iteration-count: infinite; animation-name: blinker; animation-duration: 3s; animation-timing-function: ease-in-out; animation-iteration-count: infinite;}
.its-blinker-slow-3 {-webkit-animation-name: blinker; -webkit-animation-duration: 3s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 3; -moz-animation-name: blinker; -moz-animation-duration: 3s; -moz-animation-timing-function: ease-in-out; -moz-animation-iteration-count: 3; animation-name: blinker; animation-duration: 3s; animation-timing-function: ease-in-out; animation-iteration-count: 3;}
@-webkit-keyframes blinker {0% {opacity: 1.0;} 50% {opacity: 0.0;} 100% {opacity: 1.0;} }
@-moz-keyframes blinker {0% {opacity: 1.0;} 50% {opacity: 0.0;} 100% {opacity: 1.0;} }
@keyframes blinker {0% {opacity: 1.0;} 50% {opacity: 0.0;} 100% {opacity: 1.0;} }


/*-------------------------------------For Tablet and Desktop screens----------------------------------------------*/
@media screen and (min-width: 768px) {
    .wrapper #mobile-bg {display: none;}
    .wrapper {height: 100vh;width: 100vw;background-image: url(../../imgs/1443/bg_Login_Jamea.jpg);background-size: cover;display: flex;flex-direction: column;justify-content: center;align-items: center;}
    .wrapper .content {margin-top: 0;margin-right: 25px;max-width: 370px;padding: 20px;width: 100%;}
    .logo-image {display: block;margin-left: auto;margin-right: auto;padding: 0;height: 150px;margin-bottom: 20px;}
    .heading-title {font-size: 14px;}
    .motif-login {display: block;margin-left: auto;margin-right: auto;padding: 0;width: 90px;margin-bottom: 10px;}
    .input-group {display: flex;flex-direction: column;padding: 10px;}
    .input-group button {margin-left: auto;margin-right: 0;}
    .br {margin: 5px;}
    .lbl-text {font-size: 13px;font-family: "Roboto", sans-serif;text-align: left;color: #0e4653;opacity: 0.7;margin-bottom: 3px;margin-left: 45px;padding-top: 10px;}
    #lbl-text-password {margin-top: 15px;}
    .input-control {width: 253px;height: 45px;font-size: 13px;}
    .eye {font-size: 20px;}
    .btn-login {width: 160px;height: 45px;border-radius: 21px;padding-left: 10px;font-size: 15px;margin-right: auto;margin-left: auto;background-color: #0e4653;border: solid 1px #0e4653;border-bottom: solid 5px #0e4653;color: #fff;transition: all .5s ease-in;}
    .btn-login:hover {background-color: #bfe7ef;color: #0e4653;}
    .select {font-size: 12px;cursor: pointer;}
    .select a {font-size: 12px;cursor: pointer;}
    .select a:hover {color: #7f1801;}
    .policy {font-size: 7px;text-align: center;}
    .policy a {color: #666;cursor: pointer;}
    .policy a:hover {color: #0e4653;}
}

/*Smallest Screen*/

@media (max-width:323px){
    .eye {margin-left:95px;margin-top:-34px}
}

@media (min-width: 320px) and (max-width: 375px) {
.lbl-text {margin-left:20px;}
}

@media (min-width: 481px) and (max-width: 768px){
    .lbl-text {margin-left:130px;}
}

#chkRememberMe {margin-right:3px;}
.checkbox {display: inline-block; white-space: pre-line; margin: 0px !important; padding: 0px !important; vertical-align: middle; min-width: 90px; cursor: pointer;}
.its-checkbox {position: relative; display: inline-block; white-space: pre-wrap; vertical-align: middle; padding: 3px; cursor: pointer;}
.its-checkbox:after {content: "check_box_outline_blank"; font-family: 'Material Icons'; font-size: 32px; color: #0e4653; vertical-align: middle; letter-spacing: normal; display:inline-block; max-width:32px;overflow:hidden;}
.its-checkbox.selected:after {content: "check_box"; color: #0e4653;}
.its-checkbox:hover:after {color: #bfe7ef;}
.its-checkbox input[type="checkbox"] {margin-left: 10px; margin-top: 16px; position: absolute; cursor: pointer; outline: none; opacity: 0; z-index: 2;}

/*jQuery Msg*/
#purr-container {position: fixed; top: 300px; left: 50%; transform: translate(-50%, 0); z-index:1072;}
.notice {position: relative; width: 353px; min-height: 100px; background-color: #444343;  border-radius: 5px; transition: all 1s; margin: 10px;}
.notice:hover {background:#000;}
.notice .icon {float: left; font-size: 75px; padding: 1px 5px 1px 5px;}
.notice .close{position: absolute; top: 10px; right: 10px; display: inline-block; color: #fff;}
.notice .close:after{content: "close"; font-family: 'Material Icons'; font-size: 18px; vertical-align: middle; cursor: pointer; display:inline-block;}
.notice .close:hover {color:#e90f14; font-size: 22px; text-shadow:none;}
.notice-body {min-height: 50px; padding: 10px 10px 20px 10px; color: #f9f9f9;}
.notice h3 {margin: 0; font-size: 1.6em; color: #fff; text-align: left; border:none; font-family: Alice; text-transform:none;}
.notice p {margin: 0px;}
.notice .info {color:#FFFF00;} 
.notice .done {color:#0fe91e;}
.notice .error {color:#e90f14;}