#versemenupanel-popup, #menupanel-popup {
    right: 0 !important;
    left: auto !important;
}
#versemenu_popup, #menupanel {
    border: 1px solid #000;
    border-right: none;
    background: rgba(0,0,0,.5);
    margin: -1px 0;
}


@font-face {
	font-family: baloochettan;
	src: url('../fonts/baloochettan.ttf');
}

@font-face {
	font-family: oswald;
	src: url('../fonts/oswald.ttf');
}

@font-face {
	font-family: opensan;
	src: url('../fonts/OpenSansRegular.ttf');
}

@font-face {
    font-family: malafont;
    src: url('../fonts/lohit.ttf');
}
@font-face {
    font-family: malafont2;
    src: url('../fonts/JC_Malayalam.ttf');
}
@font-face {
	font-family: hindifont;
	src: url('../fonts/JC_Hindi.ttf');
}

@font-face {
	font-family: tamilfont;
	src: url('../fonts/latha.ttf');
}
@font-face {
	font-family: telugufont;
	src: url('../fonts/suranna.ttf');
}


@font-face {
	font-family: tammudu;
	src: url('../fonts/balootammudu.ttf');
}
@font-face {
	font-family: thambi;
	src: url('../fonts/baloothambi.ttf');
}
@font-face {
	font-family: bitter;
	src: url('../fonts/bitter.ttf');
}
@font-face {
	font-family: cabin;
	src: url('../fonts/cabin.ttf');
}
@font-face {
	font-family: lohit;
	src: url('../fonts/lohit.ttf');
}
@font-face {
	font-family: meera;
	src: url('../fonts/meera.ttf');
}
@font-face {
	font-family: notosans;
	src: url('../fonts/notosans.ttf');
}


.notosans{
	font-family: notosans;
	padding: 5px;
	line-height: 1.6;
}
.meera{
	font-family: meera;
	padding: 5px;
	line-height: 1.6;
}
.lohit{
	font-family: lohit;
	padding: 5px;
	line-height: 1.6;
}
.cabin{
	font-family: cabin;
	padding: 5px;
	line-height: 1.6;
}
.bitter{
	font-family: bitter;
	padding: 5px;
	line-height: 1.6;
}
.thambi{
	font-family: thambi;
	padding: 5px;
	line-height: 1.6;
}
.tammudu{
	font-family: tammudu;
	padding: 5px;
	line-height: 1.6;
}



.oswald{
	font-family: oswald;
	padding: 5px;
	line-height: 1.6;
}

.baloochettan{
	font-family: baloochettan;
	padding: 5px;
	line-height: 1.6;
}

.latha{
	font-family: tamilfont;
	padding: 5px;
	line-height: 1.6;
}

.suranna{
	font-family: telugufont;
	padding: 5px;
	line-height: 1.6;
}



.actualStyle {
	position : absolute;
	top: 200px;
}
.splitStyle {
	position : absolute;
	top: 300px;
}

.configStyle{
	position : absolute;
	top : 100px;	/* 70 and 80 below */
	font-family: Helvetica, Arial;
	color:black;
	font-size: 20px;
	visibility:hidden;
	width: 90%;
	overflow: hidden;
	margin-bottom: 115px;
}

.refSearchDivStyle{
	position : absolute;
	top : 100px;	/* 70 and 80 below */
	font-family: Helvetica, Arial;
	color:black;
	font-size: 14px;
	visibility:hidden;
	width: 90%;
}

.ShowScreenShotDivStyle {
	position : absolute;
	visibility:visible;
	width: 90%;
    /*background-color: #2F4F4F;*/
}

.gridStyle{
	position : absolute;
	top : 100px;	/* 70 and 80 below */
	font-family: Helvetica, Arial;
	color:black;
	font-size: 20px;
	visibility:hidden;
	width: 80%;
	padding:20px;
	/*word-spacing:10px;*/
}

.slateStyle{
	position : absolute;
	top : 100px;
	font-family: malafont;
	/*color:black;*/
	font-size: 20px;
	padding-right:20px;
}

.quickrefslateStyle{
	position : absolute;
	top : 110px;
	font-family: malafont;
	/*color:black;*/
	font-size: 20px;
	visibility:hidden;
	padding-right:20px;
}

/*.ui-page {
	background: #FFFFFF;
}*/

.ui-page, .ui-body-c, .ui-page-active, .ui-overlay-c, .ui-mobile-viewport
{
	background: transparent ;
	text-shadow:0 0 0;
}

/*body .ui-body-c, body .ui-overlay-c { text-shadow:0 0 0; }*/
	
.highlight {
	color : red;
}

.important {
    font-weight: bold;
    font-size: xx-large;
}

.mala {
	/*font-family: malafont;*/
	/*color: #0B173B;
	color: #cc6633;*/
	padding: 5px;
	text-shadow: none;
	line-height: 1.6;
}
.hindi {
	font-family: hindifont;
	/*color: #393B0B;*/
	padding: 5px;
	text-shadow: none;
	line-height: 1.6;
}
.kjv {
    font-family: opensan;
    /* font-family: Helvetica, Arial; */
	/*color: white;*/
	padding: 5px;
	text-shadow: none;
	line-height: 1.6;
}
.tamil {
	/* font-family: Calibri, Arial, Helvetica, sans-serif; */
	font-family: tamilfont;
	/*color: #787878;*/
	padding: 5px;
	text-shadow: none;
	line-height: 1.6;
}
.telugu {
	/* font-family: Calibri, Arial, Helvetica, sans-serif; */
	font-family: telugufont;
	/*color: #484848;*/
	padding: 5px;
	text-shadow: none;
	line-height: 1.6;
}
.Kannada {
	font-family: Calibri, Arial, Helvetica, sans-serif;
	padding: 5px;
	text-shadow: none;
	line-height: 1.6;
}

.Spanish, .Chinese, .Arabic, .Bengali, .Farsi, .Gujarati, .Korean, .Marathi, .Punjabi, .Tagalog {
	padding: 5px;
	text-shadow: none;
	line-height: 1.6;
}

.blacktext {
	color: black;
}

.whitetext {
	color: #DDDDDD;
}

.notesStyle {
	font-family: Helvetica, Arial;
	/*width:90%;*/
	color: #2F4F4F;
    /*color: #E0E0E0*/
	/*font-style:italic;*/
	background: #E0E0e0;		/*light gray*/
	/*background: #ffffa5;*/
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 30px;
	padding-right:5px;
	border-radius: 0em 0em 1em 1em;
	/*-webkit-box-shadow: 2px 4px 6px #444;*/
}


.refVerseStyle2 {
	/*width:90%;*/
	color: #2F4F4F;
	font-style:italic;
	background: #E0E0E0;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right:5px;
    border: 1px solid #000;
	border-radius: 1em 1em 1em 1em;
	/*-webkit-box-shadow: 2px 4px 6px #444;*/
}


.refVerseStyle {
	/*font-style:italic;*/
	/*font-weight: bold;*/
    border: 1px solid #E0E0E0;
    border-radius: 1em 1em 1em 1em;
}

.copyrights {
	font-family: Helvetica, Arial;
	color: #A5D3CA;
	padding: 10px;
	font-size : 12px
}

.download-progress-bar input[type=number] .ui-slider-handle {
      display: none;
      margin-left : -9999px;
 }

/*.download-progress-bar .ui-slider-track {
      margin: 0 15px 0 15px;
      pointer-events: none;
 }*/

#ShowScreenShotDiv {
	position : absolute;
	top : 0px;
	right:0px;
	width: 100%;
	overflow: hidden;
	left:0px;

}

#screenShotImg {
	position : relative;
	z-index : 1;
	overflow: hidden;
	max-width:100%;
	max-height:100%;
	margin:auto;
}

.screenShotImgTile {
	overflow: hidden;
	max-width:100%;
	max-height:100%;
	margin:auto;
	width:200px;
	height:113px;
	display: block;
    margin-left: auto;
    margin-right: auto;
}

.screenShotImgTilePort {
	overflow: hidden;
	max-width:100%;
	max-height:100%;
	margin:auto;
	width:113px;
	height:200px;
	display: block;
    margin-left: auto;
    margin-right: auto;
}


#ScreenShotVerse {
	position : absolute;
	z-index : 100;
	text-align: center;
	margin-left : 10px;
	margin-right : 20px;
	padding-right : 20px;
	overflow: hidden;
}

#ScreenShotUserInput_org {
	position : absolute;
	z-index : 100;
	right : 20px;
	padding: 20px;
	font-family: Helvetica, Arial;
}

#ScreenShotUserInput {
	position : absolute;
	z-index : 100;
	right : 0px;
	bottom: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 20px;
	padding-right:20px;
	font-family: Helvetica, Arial;
	color: #DDDDDD;
	text-shadow: 2px 2px 5px #000000;
	opacity: 0.6;
	border-radius: 25px 0px 0px 25px;
	background-color: #000000;
}

 .adjustbutton10 {
    width: 10%;
}
.adjustbutton15 {
    width: 15%;
}
.adjustbutton20 {
    width: 20%;
}

.adjustbutton30 {
    width: 30%;
}

/*
.adjustbutton200 a{
	width: 200px;
}

.ui-btn-inner {
    padding: 0;
} */

/* .ui-btn {
	width: 200px;                        
} */

 	.ui-controlgroup-horizontal .ui-controlgroup-controls { display: block !important; }
	
/*	.ui-body-d{
		border-style: none;
	}

	*/
		div[data-role='controlgroup'] >  div{
		width:500px;
		/* font-size: 5; */
	} 
	
	
.screenshot_style {
	color: #DDDDDD;
	
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000; 
}

.box1 {
	border: 2px solid white;
    border-radius: 20px;
	/* background-color: #000000;
	opacity: 0.2; */
}

.theme1 {
	border: 2px solid white;
    border-radius: 20px;
}

.theme2{
    border-radius: 10px;
	background-color: #000000;
	opacity: 0.8;
}

.theme3{
    border-radius: 10px;
	background-color: #FFFFFF;
	color: #000000;
	opacity: 0.7;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.theme4{
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    /* border-radius: 10px; */
	/* background-color: #FFFFFF;
	box-shadow: 10px 10px 5px grey; */
	/* color: red !important;  */
	opacity: 0.7;
	background-image: linear-gradient(to right, black , white);
}

.screenshot_style_hold {
	color: #DDDDDD;
	
	text-shadow: 2px 2px 5px #000000;
		 -webkit-transform: translate(10px, 0px);
          transform: translate(0px, 0px);
}

.screenshot_style_small_font {
	color: #DDDDDD;
	text-shadow: 2px 2px 2px #000000;
}

#ScreenShotVVLogo {
	position : absolute;
	z-index : 100;
	left : 0px;
	bottom: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 20px;
	padding-right:20px;
	font-family: Helvetica, Arial;
	font-size: 18px;
	color: #DDDDDD;
	text-shadow: 2px 2px 5px #000000;
	opacity: 0.6;
	border-radius: 0px 25px 25px 0px;
	background-color: #000000;
}

#ShowScreenShotDivBtns {
	z-index : 50;
	margin : 0px;
}

#ShowScreenShotDivUserInput {
	margin : 5px;
}
#ShowScreenShotDiv .ui-block-a, #ShowScreenShotDiv .ui-block-b, #ShowScreenShotDiv .ui-block-c {
	border: 5px solid white;
}

#bookSelDivList .list-view {
	overflow-y: scroll;
	margin-bottom: 115px;
	-webkit-overflow-scrolling: touch;
}

.booksTabStyle li:nth-child(n):not(.ui-li-divider), .booksTabStyle li:nth-child(n):not(.ui-li-divider) a {
	//background-color: white !important;
	//color: black;   overriden in code
	font-weight: normal;
	font-size: 20px;
	border-color: lightgray;
}

.booksTabStyle {
	position : absolute;
	font-family: Helvetica, Arial;
	visibility:hidden;
	width: 100%;
	overflow: auto;
}

.booksTabStyle .ui-block-a, .booksTabStyle .ui-block-b, .booksTabStyle .ui-block-c, .booksTabStyle .ui-block-d {
	background-color: white;
	border: 1px solid lightgray;
	height: 50px;
	text-align: center;
	font-size: 20px;
	padding-top: 15px; /* (50/2) - (20/2) */
}

.ui-slider-input {
    display : none !important;
}

.smallFont {
	font-size: 80%;
}


/* NEW CLASS ADDED FOR THE 2020 UPDATE */
.disclaimerClass {
	color:grey;
	font-size: 11px;
	padding-left:10px;
}



div[class*="col"] {
	background: #fff;
	text-align: center;
	color: #000;
	border: 1px solid #ddd;
	padding: 5px;
	margin-bottom: 16px;
	font-size: 12px;
  }
  
  .grid-resizable-demo {
	--f7-grid-row-gap: 16px;
  }
  .grid-resizable-demo div[class*="col"] {
	margin-bottom: 0;
  }
  .grid-resizable-demo .demo-col-center-content {
	display: flex;
	align-items: center;
	justify-content: center;
  }