/* Coded with love by Mutiullah Samim */

	@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

        button.btn-primary { color: white !important; }

		body,
		html {
			margin: 0;
			padding: 0;
			height: 100%;
			font-family: 'Lato', sans-serif;
		}
		.user_card {
			margin-top: 30%;
			margin-bottom: auto;
			padding: 10px;
		}

		.user_card h4{
			text-align: center;
			color: #b18336;
		}


		.loginBar {background: #f1f1f1; box-shadow: 3px 3px 10px #242424; z-index: 9;}
		.loginSideBar {padding: 0; background: #333; }
		.loginSlider {margin-top: 27%;}
		.loginSlider img {border: 5px solid #fff; border-radius: 10px;}
		.sliderCaption {color: #fff; text-align: center; margin-top: 10px; font-size: 21px;}

		a {color: #fff; text-decoration: none;}
		
		.brand_logo_container {
			height: 170px;
			width: 170px;
			border-radius: 50%;
			background: #333;
			padding: 10px;
			text-align: center;
		}
		
		.brand_logo {
			margin-top:21px;
			height: 150px;
			width: 150px;
			border-radius: 50%;
		}
		.form_container {
			margin-top: 30px;
		}
		.login_btn {
			width: 100%;
			background: #b18336 !important;
			color: white !important;
		}

		.login_btn:hover {
			width: 100%;
			background: #555 !important;
			color: white !important;
		}
		.login_btn:focus {
			box-shadow: none !important;
			outline: 0px !important;
		}
		.login_container {
			padding: 0 2rem;
		}
		.input-group-text {
			background: #333 !important;
			color: white !important;
			border: 0 !important;
			border-radius: 0.25rem 0 0 0.25rem !important;
		}
		.input_user,
		.input_pass:focus {
			box-shadow: none !important;
			outline: 0px !important;
		}
		.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
			background-color: #c0392b !important;
		}


		a, a:hover {text-decoration: none;}

		.counter {margin-top: 30px; text-align: center; color: #fff;}
		.counter p {text-align: center; font-size: 40px; display: block}
		.logoCounter {display: block; margin: 21px auto; text-align: center;}
		.logoCounter img {width: 12%;}
		.videoSection {text-align: center; margin: auto; display: block;}
		.videoSection video::-webkit-media-controls-fullscreen-button {
			display: none;
		}


		.header {margin-bottom: 21px; width: 100%;}
		.header .logo-inner {width: 172px; padding: 10px; text-align: center; margin: auto; margin-top: 15px; display: block;}
		.inner-page{ background: url("../image/bg.jpg") fixed; height: unset; background-position: top;}
		
		.masallah-page{ height: 105vh; }

		.topbar {background: #b18336; color:#333; width: 100%; margin-bottom: 15px;}
		.topbar h3 {text-align: left; padding: 10px; font-size: 15px; margin-bottom: 0; color: #fff;}
		.topbar a {text-align: right; float: right;}
		.btn {margin-top: 3px; background: #b28336; border-color: #b28336; color: #fff}
		
		.row {width: 100%; margin: 0;}


		.footer {margin-top: 53px;}
		.footer h3 {text-align: center; font-size: 14px; color: #333; font-style: italic; padding-bottom: 10px; }
		

		.centerRow {margin: auto; display: block; text-align: center;}
		.centerRow label { text-align: left; display: block; font-size: 12px;}
		.centerRow button { text-align: left; display: block;}
		.profilePhoto {border: 1px solid #333; padding: 21px; margin: 10px auto; display: block; text-align: center; border-radius: 7px; box-shadow: 3px 3px 10px #ccc; width: 72%;}
		.warakTable {font-size: 12px; background: #ccc;}
		.warakTable .active {background: green; color: #fff}

		.calendarBox {display: block;}
		.menuMonth {font-size: 21px; background: #c8ba97; padding: 10px; border: 1px solid #c8ba97; border-radius: 7px;}
		.calendarBox .dayBox {display: inline-block; width: 12%; border: 1px solid #ccc; padding: 21px; text-align: center; border-radius: 7px; background: #fff; box-shadow: 3px 3px 10px #ccc; margin: 5px;}
		.calendarBox .dayBox:hover {background: #f5f5f5 !important;}
		.calendarBox .dayBox:hover h3 {color: #333 !important;}
		.calendarBox .dayBox h3 {font-size: 18px; font-weight: 600;}
		.calendarBox .dayBox h3 span {color: #858585; font-size: 12px;}
		.calendarBox .dayBox p {font-size: 33px; margin-bottom: 0;}
		.calendarBox .dayBox span {font-size: 10px; text-transform: capitalize;}
		.calendarBox .dayBox.disabled {pointer-events: none; background: #eee;}
		.calendarBox .dayBox.disabled h3 {color: #c3bebe;}
		
		.cancelBtn {float: right; margin-top: 0px; background: red; border-color: red;}
		.cancelBtn i {margin-right: 3px;}
		.jaman-table th {background: #ddd;}
		.jaman-table td {vertical-align: middle;}
		.jaman-selection span {display: inline-block; margin-right: 15px; margin-top: 5px;}
		.jaman-selection span input {margin-right: 4px; transform: scale(1.3);}
		.saveJaman {background: green; border-color: green;}


		.jamanStatus {font-size: 11px !important;}
		.delivered {color: #265189;}
		.preparing {color: #c5c914;}
		.selected {color: green}
		.select {color: inherit}
		.no-jaman {color: #c3bebe}
		.cancelled {color: red}

		.thaaliInfo {font-size: 12px; background: #fff;}
		.thaaliInfo tr, .thaaliInfo td, .thaaliInfo th { vertical-align: middle;}
		.thaaliInfo .active {background: green; color: #fff}

		
		.disabled {background: #e1e1e1; color: #bdbdbd;}
		



		.mainTabs {display: block; margin: auto; text-align: center; text-transform: uppercase;}
		.mainTabs a, .mainTabs button {color: inherit}
		.mainTabs a:hover, .mainTabs button:hover {color: #c9b997;}
		.mainTabs .TabBox {border-radius: 8px; box-shadow: 3px 3px 10px #dddacd; line-height: 200px; text-align: center; display: inline-block; margin: 21px; width: 300px; background: #fffdf7; padding: 10px;}
		.mainTabs .TabBox h3 {line-height: 1.5; display: inline-block; vertical-align: middle; color: #b28336; font-weight: 600;}


		.majlis-content .table-bordered > :not(caption) > * {border-color: #a6a8ab;}
		.majlis-content .table-bordered td, .majlis-content .table-bordered th {border: 1px solid #a6a8ab;}
		.mediaImg {width: 20px;}


		.blink_me {
			animation: blinker 1s linear infinite;
		  }
		  
		  @keyframes blinker {
			50% {
			  opacity: 0;
			}
		  }

		  .ITSNo {margin-bottom: 10px;}

		  .attendRadio .form-check-inline .form-check-input {margin-top: 0.3rem;}
		  .attendRadio span {margin-right: 21px;}
		  .attendRadio .ITSNo {border-bottom: 1px solid #cdcdcd; padding-bottom: 10px;}

		  .Scanned {background: green; color: #fff; padding: 5px; font-size: 12px; border-radius: 3px;}
		  .not-Scanned {background: red; color: #fff; padding: 5px; font-size: 12px; border-radius: 3px;}









		@media (max-width: 767px){ 
		    
		    .TabBox.addwidth { width: 250px !important; }
		    
			.topbar h3 {font-size: 15px; text-align: center;}
			.topbar a {text-align: center; margin-bottom: 10px; float: unset;}
			.mobile-center {text-align: center; margin: auto; display: block;}
			.profilePhoto {width: 45%;}

			iframe {height: 300px; width: 100%;}

			.attendRadio span {display: block;}
			.attendRadio .form-check-inline {margin-right: 25px;}


			.mainTabs .TabBox {margin: 10px 5px; width: 153px;}
			.centerRow {margin-top: 30px;}

			.calendarBox .dayBox {width: 28%; padding: 10px;  margin:7px 5px;}
			.calendarBox .dayBox h3 {font-size: 14px; }
			.calendarBox .dayBox h3 span {font-size: 12px; margin-top: 5px; display: block;}
			.calendarBox .dayBox p {font-size: 21px; margin-bottom: 0;}
			.calendarBox .dayBox span {font-size: 10px; text-transform: capitalize;}
			.jamanStatus {font-size: 10px !important;}
		}

		.mp3player {
		    z-index: 99;
		}

		.mp3player {
		    background: #393b3b;
		    padding: 15px 10px;
		    margin-bottom: 10px;
		    border-radius: 5px;
		}

		.mp3player h5 {
		    font-weight: 600;
		    margin-bottom: 10px;
		    margin-left: 15px;
		    color: #fff;
		}

		.mp3player audio {
		    width: 100%;
		    margin: auto;
		    text-align: center;
		    display: block;
		    margin-bottom: 18px;
		}
		
		
		
		/* New CSS 30 march */
		 .scanDetails {border: 1px solid #ccc; padding: 30px 15px; border-radius: 5px; box-shadow: 3px 3px 10px #ccc;}
		  .scanDetails img {width: 153px; border: 1px solid #ccc; padding: 10px; border-radius: 100%;}

		  .mem-name {font-size: 15px; margin-top: 15px; margin-bottom: 0; font-weight: bold;}
		  .mem-its{font-size: 14px; margin-top: 5px; margin-bottom: 10px;}
		  .mem-status, .scan-status {border-radius: 5px; padding: 5px; color: #fff; font-size: 12px;}
		  .registered{background: green;}
		  .not-registered{background: red;}


		  .khidmatguzar {margin-top: 45px;}
		  .khidmatguzar p {font-size: 16px; font-weight: bold; margin-bottom: 10px; background-color: #b18336; padding: 5px; border-radius: 5px;}
		  .khidmatguzar span {font-size: 12px; }
		  .khidmatguzar a {color: #fff; width: 21%; }

		  .non-member-status {color: red;}

		  .masallah-number {margin: auto; display: block; color: green; margin-bottom: 0; border: 2px dotted green; width: 140px; height: 140px; padding: 21px 12px; font-weight: bold; text-align: center; border-radius: 100%; font-size: 53px; line-height: 95px;}
		  
		  /*05 April*/

		  .scanDetails .heading {border-bottom: 1px solid #ccc; padding-bottom: 10px; margin-bottom: 21px;}

		  .scanDetails table  {margin-top: 21px;}
		  .scanDetails table th {font-size: 12px; text-align: left; background: #b18336; text-transform: capitalize;}
		  .scanDetails table td {font-size: 12px; text-align: left; text-transform: capitalize;}

		  .enrolled {background: green; color: #fff; padding: 5px; text-align: center; font-size: 10px; border-radius: 5px; margin-top: 5px;}
		  .not-enrolled {background: red; color: #fff; padding: 5px; text-align: center; font-size: 10px; border-radius: 5px; margin-top: 5px;}

		  .btn-vsm {font-size: 9px; float: right; color: #fff !important;}

		  .pending-request {font-size: 10px; float: right; background: #b18336; padding: 5px; border-radius: 5px; display: block; width: 100%; text-align: center;}

		  .summary-box {border: 1px solid #ccc; padding: 10px; float: right; width: 100%; border-radius: 5px; box-shadow: 3px 3px 10px #ccc;}
		  .summary-box a, .summary-box button {margin: 7px; text-align: center; float: right; padding: 7px;}
		  .summary-box p {float: left; margin-bottom: 0; padding-top: 0px; font-size: 13px; text-transform: capitalize; display: inline-grid; width: 21%;}

		  .summary-box p span {font-size: 18px; color: green}
		  .summary-box p span.niyat-pending {color: red}

		  .transaction-table table {margin-top: 21px; font-size: 14px; text-transform: capitalize;}
		  

		  .monitorySign {font-size: 10px;}

		  .monitorySign.fa-plus {color: green}
		  .monitorySign.fa-minus {color: red}
		  .transaction-pending {color: red; padding: 5px; border-radius: 5px; white-space: normal;}
		  
		  .zone_error { display:none; }
		 

		  @media (max-width: 998px){
			.sabaqBox h2 {
				padding: 21px 10px !important;
				min-height: 100px !important;
				font-size: 21px !important;
			}
			  
			  .sabaqBox span, .sabaqBox span a {display: block}
		}
		  
		  @media (max-width: 767px){
    		.no-padding {padding: 0 !important;}
    		.summary-box p {width: 49%; padding-top: 15px;}
    		.summary-box a, .summary-box button {margin: auto; float: none;}
			.loginSlider {margin-top: 15%;}
			.sliderArea {margin-bottom: 30px;}
			.sabaqBox {min-height: 240px !important;}
			.sabaqBox h2 {padding: 16px 10px !important; min-height: 80px !important; font-size: 16px !important;}
		
	
		 }
		  
		 .ns_message { font-weight:bold; }

@media (max-width: 330px){
			.sabaqBox h2 {padding: 12px 7px !important; min-height: 70px !important; font-size: 12px !important;}
		.not-granted, .granted {font-size: 12px;}
	.sabaqBox .btn {font-size: 11px;}
		 }