@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,600,800');
@import url("//fonts.googleapis.com/earlyaccess/droidarabickufi.css");
body { font-family: 'Raleway', sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
.push-RightLeft { float: left }
.push-LeftRight { float: right }
.maraMosqueLogo { background-image: url("../images/MaraMosqueLogoBlk-En.png") }
.logoutContainer { right: 15px; left: auto; }

.toplinks.collapse{left: auto; right: 0;}
.MosqueName { right: 35px; left: auto; float: right; }
.langBtn, .langBtn:hover { padding: 0 9px; line-height: 25px; font-weight: bold; margin-top: 0px; }
.LoginPgWrapper .card-header { padding-left: 0; margin-left: 0 }
/* bg position 39px*/
.nav-link[data-toggle].collapsed:after { right: 4%; }
.nav-link[data-toggle]:not(.collapsed):after { right: 4%; }
.rtl { font-family: 'Droid Arabic Kufi', sans-serif; font-weight: normal !important }
h4 i { margin: 0 0.5rem 0 0; }
.form-control, .control-text { font-weight: 600 }
.radio-inline input[type="radio"] { vertical-align: text-bottom; }
.LoginPgMaraMosqueLogo { background-image: url('../images/MosqueLogoEn.png'); background-size: contain; right: 0; left: 0; }
.LoginPgLangBtn, .LoginPgLangBtn:hover { right: 40px; left: auto; padding: 5px 10px; }
.LoginPgWrapper .card .card-body input[type="text"] { background-position: left -121px; padding-left: 30px }
.LoginPgWrapper .card .card-body input[type="password"] { background-position: left -151px; padding-left: 30px }
/*.settingsMenu { left:17px; right:auto}
.loginType{  left: 14px; right: 0;}*/
.loginType span.logintypeName { padding-left: 50px; padding-right: 0; background-position: left top; text-align: left; line-height: 15px }
/*.sidePanel .nav-link[data-toggle]:not(.collapsed) { margin: 0 0 0 0.35rem !important }
.sidePanel .dropdown-submenu .nav-link, .sidePanel .dropdown-submenu .nav-link[data-toggle]:not(.collapsed) { margin: 0 !important }
.sidePanel .dropdown-submenu .dropdown-subsubMenu .nav-link, .sidePanel .dropdown-submenu .dropdown-subsubMenu .nav-link[data-toggle]:not(.collapsed) { margin: 0 0 0 0.5rem !important }*/


/*.dropdown-menu{ right:-13px; left:auto !important}
.loginType .dropdown-menu{ right:auto !important;left: 31px; }*/
.requiredFeild { color: red; font-weight: bold; font-size: large; }

/*high chart*/
/*.highcharts-title { left: 20px !important; right: auto; font-family: 'Raleway' !important; font-size:0.8rem !important; }*/
.highcharts-axis-labels { font-family: 'Raleway' !important; }

/*Homepage*/
.menuWrapper ul li a { font-size: 12px; }
.accordionSectionHeader { padding-left: 0.5rem; }
#Service01 .accordionSectionHeader::before, .ServiceCategoryWrapper #Category01 .accordionSectionHeader::before { background-position: 0 -360px; }
#Service02 .accordionSectionHeader::before, .ServiceCategoryWrapper #Category02 .accordionSectionHeader::before { background-position: 0 -498px; }
#Service04 .accordionSectionHeader::before, .ServiceCategoryWrapper #Category04 .accordionSectionHeader::before { background-position: 0 -626px; }
#Service03 .accordionSectionHeader::before, .ServiceCategoryWrapper #Category03 .accordionSectionHeader::before { background-position: 0 -750px; }
.accordionSectionHeader::after { left: auto; right: 0; }
.inpageWrapper .inpageHeading:after { vertical-align: sub; line-height: 20px; }


@media only screen and (min-device-width : 320px) and (max-device-width : 980px) {
    .nav-link[data-toggle].collapsed:after, .nav-link[data-toggle]:not(.collapsed):after { right: 7%; }
    .LoginPgMaraMosqueLogo { background-repeat: no-repeat; right: auto; left: 4%; background-position: right top; height: 0; background-size: 92% }
    .logoutContainer { right: 8px }
    .MosqueName { right: 17px; float: right; }
    .loginType .navbar-toggleable { right: 30px; }
    .loginType span.logintypeName { padding-left: 0; text-align: right }
    .logoutContainer .navbar-toggler { margin: 0 14px 0 0; }
    /*.loginType .dropdown-menu   { right: -15px !important; left:auto !important}*/
}

.table-responsive th:last-child, .table-responsive td:last-child { right: 0; left: auto }


blockquote { border-left: 10px solid #ccc; margin: 1.5em 10px; padding: 0.5em 10px; quotes: "\201C""\201D""\2018""\2019"; }

@media only screen and (min-width: 320px) and (max-width: 767px) {
    .navbar { flex-direction: row-reverse; }
}