/* ------------------  PAGE SETTINGS ----------------------*/  
	@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');
	*{
		margin: 0; 
		padding: 0;
		box-sizing: border-box;
		font-family: 'Montserrat', sans-serif; 
		letter-spacing: 0.5px !important;
		touch-action: manipulation !important;   

		-webkit-touch-callout: none !important;              /* prevent callout to copy image, etc when tap to hold */
		-webkit-text-size-adjust: none !important;             /* prevent webkit from resizing text to fit */
		-webkit-user-select: auto !important;                  /* prevent copy paste, to allow, change 'none' to 'text' */


	/* no select */
	  -moz-user-select: none !important;
	  -khtml-user-select: none !important;  
	  -webkit-user-select: auto  !important;  
	  -ms-user-select: none !important;  
	  user-select: none !important;
	}            
			 
           
	 /* scroll bar */
	::-webkit-scrollbar { width: 0px; height: 0px; }
	 
               
	html, body {                    
		margin: 0;     
		height: 100%;      
		background: #1a191f;       
	   
		/* prevent pull refresh on mobile */ 
		overflow: hidden;    
		overscroll-behavior: none;   
	}
	 
	@keyframes fadeIn {
	  from {
		opacity: 0;
	  }
	  to {
		opacity: 1;  
	  } 
	}

	body {
	  animation: fadeIn 1s ease-in;
	}

 
	#container {
		width: 100%;
		max-width: 384px;  height:900px; margin: 0;  /* height:740px;*/
		padding: 0; 
		align-items:center; 
		position: absolute; 
		top: 50%; 
		left: 50%; 
		transform:translate(-50%,-50%);  
		display: flex;
		flex-direction: column; 
	 
		background: url('dd.jpg');
		background-size: cover;  
		background-repeat: no-repeat;  
		background-position: center;
	}   
	
	@media screen and (max-height: 900px){  
		
	  #container {
		  height: 100% !important;
	  } 
	}
  
	main {
	  flex: 1; /* takes the remaining height of the "container" div */
	  overflow: auto; /* to scroll just the "main" div  #cc7e85; */
	  width: 100%;
	} 
  
	header {
	 
	  width: 100%; 
	  padding: 10px 13px;  
	}    
		   
	footer {
	  width: 100%;
	  color: #d1d1d1;
	  /*text-shadow: 0 0 1px #ddd, 0 0 2px #ddd, 0 0 3px #ddd;*/
	  bottom: 0px;   
	  position: relative; height: 7%; z-index: 20;
	}

	section {
		height: 100%; /* takes the visible area of the "main" div */
		width: 100%;
	}
	  
	/* ------------------  END PAGE SETTINGS ----------------------*/
	 
	  
	   
	/* ----------- LOGO  BRANDING -----------------*/
	.logo {
		margin: -10px auto 20px auto;
		background: #1a191f; padding: 10px 5px; border-radius: 5px;
	}

	.logo img {
    
		width: auto; 
		height: 120px; 
		border-radius: 15%;  
		border: 1px solid #aaa  ; 
		padding: 10px;
	}

	.logo p {
		text-align: center; 
		margin-top: 1px; 
		font-style: normal;
	}
	/* -------- END LOGO BRANDING  --------*/
 
 
   


	/* ----------  GENERAL SETTINGS ---------*/
 	.d-padding {
	  padding: 10px; 
	  background: #1a191f;  
	}
	.mClick-inline { 
		display: inline; 
		padding: 5px 10px; 
		border-radius: 3px; 
		color: #d1d1d1;  cursor: pointer; 
	}
	.mClick-inline:active {
		background: #111; 
		z-index: 5;  
		color: #d1d1d1;
	} 
	.mClick { 
		display: block; 
		padding: 5px 10px; 
		border-radius: 3px; 
		color: #d1d1d1; cursor: pointer; 
	}
	.mClick:active { 
		background: #111 !important; 
		z-index: 5;  
		color: #d1d1d1; 
	} 
	.normal-link { 
		border-bottom: 2px solid #aaa ; 
		padding: 5px 10px; 
		cursor: pointer; 
	}
	.scriptInfo-center { 
		display: none; 
		text-align: center; 
		margin: 0 auto; 
		margin-top: 10px; 
		padding: 15px 10px;  width: 100%;
		background: #1a191f;  
		color: #d1d1d1;  position: absolute;
	}
	.scriptInfo-left { 
		display: none; 
		float: left; 
		margin: 0 auto;  
		color: #d1d1d1;
	}
	.scriptInfo-right { 
		display: none; 
		text-align: left; 
		margin: 0 auto;  
		color: #d1d1d1;
	}  
  
	/* Chrome, Safari, Edge, Opera */
	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	/* Firefox */
	input[type=number] {
		-moz-appearance: textfield;  
	}    
	 
	/* prevent highlight text */
	.noselect {
		-moz-user-select: none !important;
		-khtml-user-select: none !important;  
		-webkit-user-select: auto  !important;  
		-ms-user-select: none !important;  
		user-select: none !important;
	}
	::placeholder {  
		color: #d1d1d1  ;  
	}  
			 
		 
   
	/* SET FONT-SIZE */ 
	@font-face {
		font-family: 'Sacramento';
		src: url('Sacramento-Regular.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;    
	}    

	@media only screen and (max-width: 600px) {
	   .both-mFont {    
			font-size: 0.93em !important;  
			color: #d1d1d1 ;  
			font-weight: 500; 
			line-height: 1.4;
		}   
	   .watermark-text  {   
			margin: 0; 
			color: #d1d1d1  ; 
			line-height: 1;
			opacity: 1; 
			letter-spacing: 0.5px; 
			font-size: 1.3em !important; 
			font-family: 'Sacramento', cursive !important; 
		}
		.now-playing {  
			zoom: 1; 
		}     
		.btn {
			padding: 15px 20px; color: #d1d1d1;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			font-size: 0.78125em !important; 
		}
	}   
	  
    @media only screen and (min-width: 601px) {
		.both-mFont {
			font-size: 0.813em !important; 
			color: #d1d1d1 ;  
			font-weight: 500; 
			line-height: 1.4;       
		}     
		.watermark-text  { 
			margin: 0; 
			color: #d1d1d1  ;  
			font-weight: 500; 
			opacity: 1; 
			letter-spacing: 0.5px; 
			font-size: 1.3em !important; 
			font-family: 'Sacramento', cursive !important; 
			line-height: 1;
		}
		.now-playing {
			zoom: 0.92; 
			letter-spacing: 1px;
		} 
		.btn {
			padding: 10px 20px;
			border: none; color: #d1d1d1;  
			border-radius: 5px;
			cursor: pointer;
			font-size: 0.78125em !important; 
		} 
	} 
	  
   /* ---------- END GENERAL SETTINGS ---------*/
   
   
   
   
   
   
   
   
   
   
   
   
    
      
   
   
   
   /* ---------- INDEX PAGE ---------*/
   .inner-page-container {
		padding:20px; 	
		/*background: #17161b;*/
		display: flex; align-items: center;
		flex-direction: column; justify-content: center; height: 100%;
	}
    .index-page-logo {
		border-radius: 16px; 
		text-align: center !important;
		margin: auto;
		display: block;
	}
	.install-btn {
        background-color: #4CAF50;
        color: white;
        border: none;
        padding: 12px 24px;
        font-size: 1em;
        border-radius: 8px;
        cursor: pointer;
        transition: background-color 0.3s, transform 0.3s;
        margin: 30px auto;  
        width: 100%;
    }
    .install-btn:hover {
		background-color: #45a049;
        transform: translateY(-2px);
    }
    .install-btn:active {
        transform: translateY(2px);
    }
	.notice-install-div {
        color: white;
        border: 1px solid #FFE4B5 ;
        padding: 12px 24px;
        font-size: 1em;
        border-radius: 8px;
        cursor: pointer;
        transition: background-color 0.3s, transform 0.3s;
        margin-top: 20px;
        width: 100%;
    }
	.notice-install-div:hover {
        background-color: #45a049;
        transform: translateY(-2px);
    }
    .notice-install-div:active {
        transform: translateY(2px);
    }
	.instructions {
        background-color: #1a191f;
        padding: 10px 20px;
        border-radius: 8px;
        margin-top: 25px;
        /*border: 1px solid #ddd;*/
        text-align: left;  
    }
    .instructions li {
        margin-bottom: 0px;
    }
	
 	/* Popup styling */
	.popup {
		display: none; /* Initially hidden */
		position: fixed;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;  
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		justify-content: center;
		align-items: center;
	}
	.ios-color {color: #000;}
	.popup-content {
		background-color: #fff;
		padding: 20px;  
		border-radius: 8px;
		width: 95%;
		max-width: 300px; 
		height: 90%;   
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
		transform: scale(0); /* Start scaled down */
		transition: transform 0.3s ease-out; /* Smooth transition */
	}
	.popup.show .popup-content {
		transform: scale(1); /* Expand to original size */
	}
	.close-btn-popup {
		cursor: pointer; 
		font-weight: bold;   
		border: 1px solid #aaa ; 
		border-radius: 10px; 
		-webkit-tap-highlight-color: #111;
		background: transparent;
		height: 20px; width: 20px; 
		font-weight: 25px;
		padding: 10px;
		color: #000;
		font-size: 30px;
		vertical-align: bottom; margin: 10px 0 0 0; padding-top: 7px;
	}
	
	/* ----------END INDEX PAGE ---------*/
	   
     
	
	
	
	
	
	
	
	
	
	/* ---------- LOGIN PAGE ---------*/
	.faq {
		height: auto; 
		z-index: 1006;
		position: absolute;
		background: inherit;  
		width: 100%; 
		bottom: 0px; 
	}  
	.faq-close, .prayer-close, .more-close {    
		text-align: center;
		position: relative;  
		margin: auto 5px auto auto;
	}
	.faq-close span, .prayer-close span, .more-close span{
		cursor: pointer;
		display: inline-block;
		font-weight: bold;
		border-radius: 10px;
		-webkit-tap-highlight-color: #111;
		background: transparent;
		padding: 10px 20px 10px 17px; zoom: 1.3;
		height: 48px;
		width: 48px; line-height: 1.8em;
		vertical-align: middle; /* Aligns the element vertically */
	}
	.d-title {
		text-align: center;
		margin: 4px auto;
	}
	.d-title-desc{
		text-align: center; 
		margin: -6px auto 5px auto;
	}  
	.user-guide {
		height: 100%; 
		overflow-y: scroll;
	}
	.menu-logo {
		height: auto; 
		width: 100px; 
		border-radius: 25%; 
		padding: 10px;
	}
	/*  
	.login-direction {
		margin: 0; 
		padding: 0; 
		background: #1a191f; 
		color: #d1d1d1; display: flex;   justify-content: center;  
            align-items: center;  width: 100%;  
	}
	*/
	.faq {
		display: none; 
	}   
	.login-footer {
		background: #1a191f; 
		height: 5%; 
		padding: 10px 2px; 
	}   
	.login-footer-terms {
		position: absolute; 
		left: 10px; 
		bottom: 10px; 
		font-size: 14px; 
		text-decoration: none; 
		color: #ddd;   
	}
	.sidebar {
		width: 270px;
		background: #1a191f;
		color: #d1d1d1  ;
		right: 0; 
		height: 100%;
		display: none;
		z-index: 2111;
		position: absolute;
		overflow: scroll;  
	}
	.sidebar.active {
		right: 0; / 
		display: block;
	}
	.sidebar ul {
		list-style-type: none;
		padding: 10px;
	}
	.sidebar ul li p {
	  padding: 20px;
	  color: inherit;
	  border-bottom: 1px solid #aaa ;
	  display: block; 
	}
	.sidebar ul li a:hover {
		background-color: #575757;
	}
	.iti { 
		width: 100% !important;
	} 
	.iti-mobile .iti__country-list  { 
		height: auto !important;
		margin: auto; width: 90% !important; 
		background: #eee !important;
	} 
	.iti__country-list  {   
		background: #eee !important;
		color: #111  !important;   
		width: auto !important; 
	}
	.iti__country-list li {
		height: 70px;  
		line-height: 70px;  
		padding: 0;  
		color: #111  !important;
	}  
	.iti__country-list li .iti__country-name {
		color: #111  !important;  
		opacity: 1 !important;
	}
	.iti__country-list li .iti__country-code {
		color: #111  !important;  
		font-weight: 900 !important;  opacity: 1 !important;
	}	 
	.iti__country-list li:hover {
		color: #111  !important;  
	}  
	.iti__flag-container {
		margin-right: 40px !important;  
	} 
	.iti--allow-dropdown input, .iti--allow-dropdown input[type=text], .iti--allow-dropdown input[type=tel], .iti--separate-dial-code input, .iti--separate-dial-code input[type=text], .iti--separate-dial-code input[type=tel] {
	 	margin-left: 20px !important;
	}  
	.iti__flag {
		zoom: 2.5 !important; margin-right: 33px;
	}
	.iti__country-name {
		padding-left: 33px;  
	}
	.iti__country .iti__country-name {
		color: #000;   
		font-weight: 500;
	}
	.iti__country .iti__dial-code {
		color: red !important;   
		font-weight: 900;
	}
	.action-btn {
		border: 1px solid #aaa ; 
		line-height: 1.8em;  
		text-align: center; 
		height: 50px; width: 125px;
		background: transparent;
		cursor: pointer;  border-radius: 10px;
	}  
	.otp-input-fields{
		margin: 0px auto;
		box-shadow: 0px 0px 8px 0px transparent;
		width: auto;
		display: flex;
		justify-content: center;
		gap: 15px;
		padding: 5px 30px 0px 30px; 
	} 
    .otp__digit { 
 
		height: 48px;
		width: 48px;  
		background: transparent;
		border-radius: 4px;
		border: none; outline: none;
		border: 1px solid #aaa  ; 
		color: #d1d1d1   ;
		text-align: center;
		outline: none;  
		font-size: 1.2em !important;  
	}    
	.otp__digit_ {  

		height: 48px;
		width: 48px;
		background: transparent;
		border-radius: 4px;
		border: none; outline: none;
		border: 1px solid #aaa  ; 
		color: #d1d1d1   ;
		text-align: center;
		outline: none;  
		font-size: 1.2em !important; 
	}
	/* menu */  
	.dropdown-content {
		display: none;
		position: relative;
		background: #1a191f;
		min-width: 270px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1; margin: -10px 20px 0 auto;
		border-radius: 4px; border: 1px solid #aaa ;
		color: #d1d1d1  ; padding: 7px 20px;
	}
	.dropdown-content p {
		color: inherit;
		padding: 13px 16px;
		display: block; 
	}
	.top {
		border-bottom: 1px solid #d1d1d1 ;
	}
	.show {
		display: block;  
		opacity: 1;  
	}	 
	.login-header {
	  
		display: flex;  
		justify-content: space-between; 
		padding: 10px;
	}
	.login-top-left-icon {
		
		gap: 20px; 
		display: flex; 
		margin-top: 10px;
	}
	.login-form { 
		align-items: center; 
		width: 100% !important;  
		padding: 15px;  
		background: #1a191f !important;
	}
	.login-btn-and-phonetext {
		
		margin-top: 10px; 
		display: flex; 
		flex-direction: row; 
		justify-content: space-between;
	}
		
 

	    
	/* ---------- END LOGIN PAGE ---------*/   
	  
	
	
	
	
	
	
	
	/* ---------- REGISTER PAGE ---------*/   
	.myback {
		line-height: 1.8em;  
		text-align: center; 
		height: 48px; width: auto;
		background: transparent;
		cursor: pointer;  padding: 10px;
		border: none; outline: none;  -webkit-tap-highlight-color: #111;
	}
	.register-contents {
		justify-content: center;
		align-items:left; 
		height: 85%;
		display: flex;
		flex-direction: column; 
		padding: 20px;
		Background: #1a191f;
	}
	.local, .international {flex-direction:  column !important; }
	
	
	
	
	
	
	/* ---------- TERMS / PRIVACY / USER GUIDE PAGE ---------*/   
	.mCancel {
		border: 1px solid #aaa ; 
		line-height: 1.8em;  
		text-align: center; 
		height: 50px; width: 125px;
		background: transparent;
		cursor: pointer;  border-radius: 10px;
	}
	.details {
		padding: 10px 10px;
		margin: 10px ;
		position: relative;
		border-radius: 5px;
		box-sizing: border-box;
		background: inherit  ;
		box-shadow: 2px 2px 20px rgba(0,0,0,.2);
		background: #1a191f;  
	}
	
	address {
		font-style: normal; 
		margin-bottom: 6px; 
	}
	address p {
		display: flex; 
		justify-content: space-around; 
		margin: 20px auto;
	}
	.fancy-bg-div {  
		padding: 15px; 
		margin: 7px auto;
		background: #1a191f ;   
		border-radius: 7px; 
		border: 1px solid #aaa ;
		color: #d1d1d1  !important  ;
	}  
	.input-group {
		display: flex;
		align-items: center;
		margin: 0 auto;  
		border-bottom: 2px solid #aaa ;
		background: inherit; 
	}  
    .input-field {
		flex: 1;  
		border: none;
		padding: 8px ;  
		outline: none;  background: inherit;
		height: 65px;
	} 
	.input-field::placeholder  {
		padding-left: 20px;
	}
	.pRequest-form {
		
		align-items: center; 
		width: 100% !important; /* background: #1a191f; */
		padding: 15px;  
		background: #1a191f !important;
	}
    #pRequest {
		width: 100%;  
		height: 70px;  
		overflow-y: scroll;  
		resize: none; 
		line-height: 1.5;  
	}
	#pRequest::placeholder {  
		z-index: 4001;
	}
	.submit-button {
		background: inherit;
		color: #d1d1d1   ;
		border: none;  
		padding: 7px 15px;
		cursor: pointer;
		border-radius: 5px;   border: 1px solid #aaa ; 
	}
    @media screen and (max-width: 360px){ /* Keep page to phone size in tables.*/
        .input-group  {
			max-width: 360px; width: 100%;
		} 
        .submit-button {
			position: relative;
			margin-left: -40px;
		}
	}
	/* ---------- END TERMS / PRIVACY / USER GUIDE PAGE ---------*/   
 
  
	
	 
	
	
	
	
	
	
	/* ---------- PLAY PAGE ---------*/   
	/* Watermark */
	.watermark-text {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		white-space: nowrap;
		pointer-events: none;  
		text-align: center;
		user-select: none; 
		top: 30%;   font-weight: bolds;
	}
	.footer-addemail-notice { 
        width: 100%; 
        display: none; 
        flex-direction: column; 
        justify-content: space-between;  bottom: 0 !important; 
        height: auto;  
        margin: auto; 
        left: 0;  
        padding: 0px 20px 0px 20px;    
        position: absolute; background: #1a191f   ;   
        z-index: 1007;  border-top-height: 20px;
        border-top: 3px solid #ddd; border-radius: 8px;
        transition: transform 0.3s ease-in-out;  
    } 
   .half-border-top {
 
		background: #1a191f;  
		border-top: 1px solid transparent;  
		background-image: linear-gradient(to right, #aaa  100%, transparent 50%);
		background-repeat: no-repeat;  
		background-size: 50% 1px;  
		background-position: top right;  
	}   
    .footer-addemail-notice.show {
		transform: translateY(0);
	}  
	.close-btn {
		cursor: pointer; 
		font-weight: bold;   
		border: 1px solid #aaa ; 
		border-radius: 10px; 
		-webkit-tap-highlight-color: #111;
		background: transparent;
		height: 50px; width: 50px; 
		font-weight: 25px;
		color: #d1d1d1;
		font-size: 25px;
	    vertical-align: bottom; margin: 10px 0 0 0; padding-top: 7px; 
	}    
	.addemail-notice-head {display: flex; justify-content: space-between;}
	.addemail-notice-text { margin-top: 10px; margin-bottom: 10px; }
	.addemail-notice-btn { 
      
		display: inline-block;
		padding: 5px 20px; 
		color: #d1d1d1   ;
		background: none;
		border: 1px solid #aaa; 
		border-radius: 5px;
		text-decoration: none;
		text-align: center;
		transition: background 0.3s, transform 0.2s; -webkit-tap-highlight-color: #111;
	}
    .now-playing-hidden {
		visibility: hidden;
		opacity: 0;
    }
    .now-playing-visible {
		visibility: visible;
		opacity: 1;
    }
    .audio-info {
		transition: opacity 1s ease;
    }
    .now-playing {
		margin: auto; 
		width: 85% !important; 
		display: none; opacity: 0.9 !important;  
		padding: 0;
    }
    .off-air {
		position: absolute; 
		display: none;
		zoom: 0.85;
	}
	.radio-container input[type="radio"] {
		display: none;
	}
	.radio-container {
		display: none;
		align-items: center;
		cursor: pointer;
	}
	.checkmark {
		width: 16px;
		height: 16px;
		border-radius: 50%;
		background-color: #d1d1d1;
		display: inline-block;
		position: relative;
		margin-right: 5px;
		margin-left: 10px;
		animation: blink-animation 2s infinite;
	}
	@keyframes blink-animation {
		0% { background-color: #eee; }
		50% { background-color: red; }
		100% { background-color: #eee; }
	}
	.radio-container input[type="radio"]:checked + .checkmark {
		background-color: #eee;  
	}
	#streams, #pauses {
		color: #d1d1d1;  
	}
	@keyframes blinker {
		50% {
			opacity: 0;
		}  
	}  
	/* play section */
   .audio-play-section { 
		width: 100%; padding: 30px 0px;    
		border-radius: 8px;
	}
	.album-cover {    
		width: 10em; 
		height: 10em; 
		border-radius: 100%; 
		margin: auto;  border: none;  
		box-shadow: #8AB2AE  1.1px 1.1px 1.1px 1.04px;  
		display: grid; place-items: center;  z-index: 11;  
    }
    .title-artist {
		text-align: center;  
		background: #1a191f; padding: 15px 10px;
	}
    .footer { 
		width: 100%; 
		display: flex; 
		flex-direction: row nowrap; 
		align-items: flex-end;  
		justify-content: space-around;  
		height:8%;  margin: auto; left: 0;  
		padding: 10px 10px 5px 10px;  
		position: relative;   
		background: #1a191f;  opacity: 0.5;
	}     
    .icon-container { 
		vertical-align: top; 
		text-align: center; 
		width: auto;  
		z-index: 1005;  
	}
	.icon {     
		width: 35px; 
		margin: 0 auto; 
		padding: 0 auto;   color: #fff;  
		font-weight: bold;
		cursor: pointer !important; 
	}
	.icon-txt-footer { color: #fff; display: block; margin: -2px auto 0 auto;  padding: 0 auto;  zoom: 0.83; }
	.icon-link {
		text-decoration: none; 
		padding: 3px; 
		border-bottom: 1px solid #aaa ; 
		letter-spacing: 1px; 
		outline: none;
		color: inherit;
	}     
  	/* MORE */
	.more {
	  
		height: 100%; 
		z-index: 1006;
		position: absolute; 
		background: #1a191f  ;  
		width: 100%; 
		bottom: 0px;
		display: none;
		overflow: hidden;
		right: 0;
	}  
	.more.active {
		right: 0;  
		display: block;
	}
	.prayer {
		height: 100%; 
		z-index: 1006;
		position: absolute; 
		background: inherit  ;  
		width: 100%; 
		bottom: 0px;
		display: none;
	}
	.prayer-title {
		font-weight: bold; 
		padding: 10px; 
		text-align: center; 
		line-height: 1.5;
	}
	.prayer-header {
		width: 100%;
		padding: 10px;
		color: #d1d1d1   ;  
		height: auto;
	}
	.prayer-footer {
		width: 100%;
		padding: 10px 13px;
		color: #d1d1d1   ;  
		height: auto; bottom: 0px; 
		background: inherit;
		position: absolute; height: 7%;
	} 
	.prayer-main {
		flex: 1;  
		overflow: auto;  
		height: 100%;
		width: 100%;
		overflow: scroll;
		color: #d1d1d1   ;  
    }
	/*  ACCESS */  
	.access {
		height: 100%; 
		z-index: 1006;
		position: absolute; 
		background: inherit  ;  
		width: 100%; 
		bottom: 0px;
		display: none;
	}
	.access-main {
		flex: 1;  
		overflow: auto;  
		height: 100%;
		width: 100%;
		overflow: scroll;
		color: #d1d1d1   ;  
	}
	.more-title {
		font-weight: bold; 
		padding: 10px; 
		text-align: center; 
		line-height: 1.5;
	}
	.more-header {
		width: 100%;
		padding: 20px 13px;
		color: #d1d1d1   ;  
		height: auto;
	}
	.more-footer {
		width: 100%;
		padding: 10px 13px;
		color: #d1d1d1   ;  
		height: auto; bottom: 0px; 
		background: inherit;
		position: absolute; height: 7%;
	} 
	.more-main {
		flex: 1;  
		overflow: auto;  
		height: 100%;
		width: 100%;
		overflow: scroll;
		color: #d1d1d1   ;  
	}
	.added-for-more {
		display: flex; gap: 15px;   
		padding: 20px 15px !important;  
	}
	/*  USER PROFILE */
	.user-details-section{
		display: flex; 
		align-items: center; 
		margin: auto; 
		justify-content: center; 
		flex-direction: column; 
		width: 100%; 
		color: #d1d1d1   ;  
	}
	.card {
		border-radius: 6px;
		display: inline-block;
		height: 100%;
		margin: auto;
		background: #1a191f  ;
		width: 100%;
	   text-align:center; border: 1px solid red;
	}
	.profile{
		border-radius:20%;
		padding: 10px; font-size: 2em !important; 
		border: 1px solid #aaa  ; 
		color: #d1d1d1   ;     
	}
	.profile-title{

		text-transform: uppercase;
		font-weight: bold; 
		margin: 10px auto;
	}
	.item-edit-section {
    
		padding: 4px 10px; 
		margin: 10px 10px 4px 10px;
	}
	.fname-item-header, .email-item-header {
    
		gap: 10px; 
		color: #d1d1d1   ;  
		display: flex; 
		justify-content: space-between;
	}
	.edit-fullname-panel {
		margin: 0 10px; display: none;
	}
	.edit-loginPin-panel {
		margin: 0 10px; display: none;
	}
	.item-btn {
		margin-left: 10px;
		padding: 5px 20px;
		border: none;
		border-radius: 3px;
		cursor: pointer; background: transparent;  border: 1px solid #aaa;
	}
	.edit-email-panel {
		margin: 0 10px; display: none;
	}
	.edit-email-btn, .edit-fullname-btn {
		margin-top: 8px;
	}
	.user-number {
		letter-spacing: normal;  
		text-align: center; 
		margin: auto; line-height: 1.5;
	}
	.user-name {
		letter-spacing: normal; 
		margin: 0 auto !important; 
		line-height: 1.5; 
		text-transform: upppercase;   
	}
	.user-email {
		letter-spacing: normal;  
		margin: 20px auto 0 auto !important; 
		line-height: 1.5; 
		text-transform: upppercase; 
		zoom: 0.93;
	}
	.upper-content {
		max-width: 360px;  
		margin: 0 auto;
		padding: 0;
	}
	.upper-content img {
		float: right;  
		margin: 0 0 10px 10px; 
		max-width: 90px;
		border-radius: 5px;
	}
	.upper-content p {
		margin-bottom: 10px;
	}
	.contact-info {
 
		padding: 10px;
		border: 1px solid #aaa ;
		width: 100%; 
		border-radius: 7px;
	}  
	.contact-info p {
		margin: 0; 
		padding: 0;
	}
	.contact-info span {
		color: #d1d1d1   ;   
	}  
	.toggle {
		display: none;
	}
	.toggle-label {
		display: flex;
		align-items: center;
		cursor: pointer;
		background-color: #ccc;
		border-radius: 50px;
		padding: 10px;
		width: 45px;
		height: 25px;
		position: relative; margin-bottom: -5px;
	}
	.toggle-inner {
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		width: 100%;
		transition: background-color 0.3s;
	}
	.toggle-switch {
		position: absolute;
		left: 3px;
		width: 18px;
		height: 18px;
		background: white;
		border-radius: 50%;
		transition: transform 0.3s;
	}
	.toggle:checked + .toggle-label {
		background-color: #8B0000;
	}
	.toggle:checked + .toggle-label .toggle-switch {
		transform: translateX(20px);
	}
	.getStarted {
		display: none;
	}
	.button-like {
		display: inline-block;
		padding: 10px 20px;
		color: #d1d1d1 ;
		text-align: center;
		border-radius: 5px;
		cursor: pointer;
		transition: background-color 0.3s;
		text-decoration: none;  
	}
	.click-to-proceed {
    
		padding: 9px 15px; 
		border: 1px solid #aaa ;
		border-radius: 7px; 
		float: right;
	}
    .cancel-subscribe {
    
		margin: 3px auto 0 auto; 
		width: 90%;
	}
	.cancel-subscribe  span {
		margin-right: 5px; 
		padding: 10px 12px; 
		border-bottom: 1px solid #aaa ;
		text-align: center;
		float: right;
	}
	.error-code {
		margin: 0;
		color: #e74c3c;
		font-size: 4em !important;
	}
 
	#notification {
		position: fixed;
		top: 0px;
		width: 100%;
		background: #1a191f;  
		z-index: 1000;
		display: none;  
		line-height: 1; letter-spacing: 2px;
	}
	.hidden {
		display: none;  
	}
	.playing-program-title{
    
		font-weight: bold; 
		text-align: left; 
		line-height: 1.2;
		zoom: 0.95;
	}
	.active-show-details {
		width: 100%; 
		z-index: 5001;  
		position: absolute; 
		bottom: 0% !important; 
		padding: 15px 20px; 
		background: #1a191f; 
		display: none;
	}
	.nothing-playing , .currently-playing {
		display: none;
	}
	.home-from-appsubscribe {
		float: right; 
		padding: 4px 8px; 
		border: 1px solid #aaa ; 
		margin-right: 20px;
	} 
	.logo-appsubscribe {
		height: auto; 
		width: 120px; 
		border-radius: 25%; 
		padding: 10px; 
	}
	.more-icons {
		margin-right: 13px; 
		font-size: 1.7em !important; 
	}
	.more-item-text {
		display: flex; 
		flex-direction: column;
	}
	.more-item-text-lines{
		line-height: 1.2;
	}
	input[type="checkbox"], input[type="radio"] {
		-webkit-appearance: none;
		appearance: none;
		width: 17px;
		height: 17px;
		border: 1px solid #99d389;
		border-radius: 50%;
		position: relative;  
	}
	input[type="checkbox"]:checked::before, input[type="radio"]:checked::before {
		content: '';
		position: absolute;
		top: 0px;
		left: 0px;
		width: 15px;
		height: 15px;
		background: #eee; /* Accent color */
		border-radius: 50%;
	} 
    .install-pwa-others {
		background: #1a191f; 
		text-align: center;
		height: auto; 
		bottom: 1px; padding: 10px;  margin: auto auto auto auto; 
	}
	.pwa-others-install-text {
		color: #d1d1d1 ; 
		padding: 7px 10px;  
		margin: auto;  border-radius: 5px;
		background: #1a191f;   
	} 
	.side-icons {
		width: 91%; 
		margin: -60px auto auto auto; 
		position: absolute;  
		display: flex !important;
		flex-direction: column; gap: 30px;
	}
	.notification-red {
		color: red; 
		display: none; 
		margin-left: -1px; 
		position: absolute; 
		font-size: 1em !important;  zoom: 2;
	}
 
	/* ---------- END PLAY PAGE ---------*/   

	
	
	   
		   
		/* TERMS AND CONDITIONS */  
		.terms-back {
			
		  margin-top: 20px; 
		  width: 80px; 
		  margin-left: 20px;
		}
		 
   
		/* BIBLE GAME */

        button:focus, button:active {
          outline: none;
        }  

        .learn-list {
            display: flex;
            justify-content: center;  
            align-items: center;      
            height: 45px;          
            border: 1px solid #777 ;
            margin: 10px;  
            border-radius: 7px;
            outline: none;
            cursor: pointer;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s;
            
             background: transparent;
             padding: 7px 20px;
           -webkit-tap-highlight-color: #111;
        }

        .learn-list p {
            margin: 0;  
        }
 
      
	  
		/* Hide Elements - MTN/  ICN testing */
		.test-hidden {
			visibility: visibility;       
		}