:root {
  --body-bg: linear-gradient(180deg, #f5f7fa 0%, #cc6699 100%);
  --left-msg-bg: #95c2fd;
  --left-msg-bg2: #4169e1;
  --right-note-bg: #9F5EF7 ;
  --right-note-bg2: #7344B2 ;
  --left-msg-JesusBg: #ff0038;
  --left-msg-JesusBg2nd: #f08089;
  --right-msg-bg: #7b68ee;
  --scripture-txt-size: 24px;
  --scripture-ref-txt-size: 26px;
  --search-bar-color: #FAF7FF ;
  --scrollbarTrackColor: #EF77B3 ;
  --scrollbarBlockColor: #EFEFEF;
  --TopAndBottomFixedBars: #B710AD;
}
body {
	display: flex;
	flex-direction:column;
	/* height: 100vh; */
	background-image: var(--body-bg);
	background-position: center;
	background-repeat:no-repeat;
	background-color: #cc6699;
	font-family: Verdana, sans-serif;
	margin: 0;
	padding: 0;
	width: 100%;
	overflow-x: hidden;
}

/* The container <div> - needed to position the dropdown content */
.TopSetBtn {
	
	float:right;
	right:0;
}
	.dropbtn {
	background-color: transparent;
	cursor: pointer;
	background-image:url(ScriptureUI/images/settings.png);
	background-position: center;
    background-size: auto 100%;
    width:35px;
    height:35px;
}

  /* Dropdown Content (Hidden by Default) */
.settingsOptionsDropMenu {
	display: none;
	position: absolute;
	background-color: #f1f1f1;
	min-width: 160px;
	width: 260px;
	height: 200px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 101;
	float:right;
	top:40;
	right:0;
}

/* Links inside the dropdown */
.settingsOptionsDropMenu a {
	color: black !important;
	padding: 7px 12px;
	height:55px; 
	text-decoration: none;
	text-weight: 2px;
	display: block;
	font-size:20px;
}

/* Change color of dropdown links on hover */
.settingsOptionsDropMenu a:hover {background-color: #ddd;}

/* Show the dropdown menu (use JS to add this class to the .settingsOptionsDropMenu container when the user clicks on the dropdown button) */
.showSO {display:block;}
//.show  {display: block;}
.AccountSettingsOption {
	background-image: linear-gradient(180deg, #f5f7fa 0%, #cc6699 100%);
	}
.TableSettingsOption {
	background-image: linear-gradient(180deg, #FA7878 0%, #FF2401 100%);;
	}
.BibleSettingsOption {
	background-image: linear-gradient(180deg, #8DA9E3 0%, #022287 100%);;
	}
.ProfileSettingsOption {
	background-image: linear-gradient(180deg, #CFD89B 0%, #FDEC21 100%);;
	}
.StudiesSettingsOption {
	background-image: linear-gradient(180deg, #BDA0D8 0%, #7300AD 100%);;
	}
.LifeSettingsOption {
	background-image: linear-gradient(180deg, #FFCE90 0%, #FF9705 100%);;
	}
.DomainSettingsOption {
	background-image: linear-gradient(180deg, #AEFFB4 0%, #089334 100%);;
	}
.LogoutOption {
	background-image: linear-gradient(180deg, #F3FFE3 0%, #6D6D6D 100%);;
	}
#settingAOpt {
	display:none;
	background-image: linear-gradient(180deg, #F3C700 0%, #F4E18C 100%);;
}

/** TopLoggedOffFixedBar **/
.fixbarloggedoff { 
	width: 100%;
	position: fixed;
	left: 0px; 
	top: 0px; 
	height: 37px; 
	background-color: var(--TopAndBottomFixedBars); /** #cc6699**/
	z-index: 99;
	border-bottom: outline black;
} 
 
 /** TopLoggedInFixedBar **/
.fixbarloggedin { 
	width: 100%;
	position: fixed;
	left: 0px; 
	top: 0px; 
	height: 37px; 
	background-color: var(--TopAndBottomFixedBars); /** #cc6699**/
	z-index: 99;
	border-bottom: outline black;
} 

#searchFormLoggedOff, #searchFormLoggedIn {
    display: block;
    width: 100%;
    height: 100%;
}

input[type="search"], 
#searchloggedoff, 
#searchloggedin,
.fixbarloggedin input,
.fixbarloggedoff input,
form[id*="searchForm"] input {
    color: black !important;
    -webkit-text-fill-color: black !important;
}

/** Logged Off Search Bar Features **/
#searchloggedoff {
	background: var(--search-bar-color) ;
	border-style: inline-block;
	padding-left: 10px;
	border-radius: 25px;
	border-bottom: black;
	text-align: center;
	border-color: #D077D6 ;
	font-size: 18px;
	font-weight: normal;
	font-style: normal;
	color: black !important;
	position: absolute;
	left: 200px;
	width: calc(100% - 280px); 
	height: 34px; 
	z-index: 16;
}

/** Logged in Search Bar Features **/
#searchloggedin {
	background: var(--search-bar-color) ;
	border-style: inline-block;
	padding-left: 10px;
	border-radius: 25px;
	border-bottom: black;
	text-align: center;
	border-color: #D077D6 ;
	font-size: 18px;
	font-weight: normal;
	font-style: normal;
	color: black !important;
	position: absolute;
	left: 200px;
	right: 420px;
	width: auto;
	height: 34px; 
	z-index: 16;
}
.search-container {
		//position: absolute;
		width: calc(100% - 620px); 
		}
/** Top Bar Links **/
.TopBarLinks {
	position: absolute;
	right: 83px;
	top: 5px;
	color:white;
	font-weight: bold;
	font-size: 18px;
	padding: 1px;
	z-index: 14;
	float: right;
}

/** TopSettings Gear Button **/
.TopSetBtn {
	position: absolute;
	right: 0px;
	top: 0px;
	padding: 0px;
	z-index: 15;
}
.topHeaderLogo {
	background-image:url("ScriptureUI/images/header.png");
	width: 198px;
	height:35px;
	background-position: center;
	background-repeat: no-repeat;
	display:fixed;
    background-size: auto 100%;
}
/* Header Imgs*/
.headerlg {
	display: inline;
	width:198px;
	height:35px;
}
.headersm {
	display: none;
	width:35px;
	height:35px;
}
#settingOpt {
	margins:5px;
	display: flex;
	align-items: right;
	z-index:10;
	//height:60px;
}
.settingOptTxt{
	padding:5px;
	font-size:23px;
	align-items: right;
}

.topBarHeaderCon {
	display:fixed;
	}
	#searchloggedin {
	display: inline;
}
.settingOptImg {
	width:30px;
	height:30px;
	background-position: center;
	background-repeat: no-repeat;
    background-size: auto 100%;
    margin-left:3px;
    margin-bottom:9px;
}

/* Fix for links showing text cursor instead of pointer */
a, a:link, a:visited, a:hover, a:active {
    cursor: pointer !important;
    text-decoration: none;
}

/* Fix for clickable elements */
[onclick], .clickable, button, input[type="submit"], input[type="button"] {
    cursor: pointer !important;
}

/* AdminPanelOption styling */
.AdminPanelOption {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    color: black !important;
    background-image: linear-gradient(180deg, #F3C700 0%, #F4E18C 100%) !important;
}

#adminPanelOpt {
    margins: 5px;
    display: flex;
    align-items: right;
    z-index: 10;
}

/* The container <div> - needed to position the dropdown content */
.TopSetBtn {
	display: flex;
	flex-direction: row; /* Stack elements horizontal */
	float:right;
	right:0;
}
.dropbtn {
	background-color: transparent;
	cursor: pointer;
	background-image:url(ScriptureUI/images/settings.png);
	background-position: center;
    background-size: auto 100%;
    width:35px;
    height:35px;
}
@media screen and (max-width: 1024px) {
		body{
			display: block;
			}
	@media screen and (max-width: 992px) {
		
		.searchBtn {
		display: inline-block;
		position: absolute;
		background-image:url(ScriptureUI/images/Search100.png);
		background-position: center;
		background-size: auto 100%;
		width:35px;
		height:35px;
		top: 0px;
		right: 79px;
		padding: 0px;
		z-index: 1;
		float: right;
	}
	.TopBarLinks {
		display: inline-block;
		float:right;
		right: 115px;
	}
		#searchloggedin {
		display: none;
		
		height: 34px; 
		z-index: 2;
		}
		.search-container {
		//position: absolute;
		width: calc(100% - 315px); 
		}
		}
		
		 @media screen and (max-width: 480px) {
			#fixbarloggedoff {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 10px;
				box-sizing: border-box;
			}
			#searchFormLoggedOff {
				display: flex;
				flex: 1;
				align-items: center;
				margin-right: 10px;
			}
			#searchloggedoff {
				position: static;
				width: 100%;
				flex: 1;
				margin-left: 10px;
				font-size: 14px;
				height: 30px;
			}
			#TopSetLoginBtn {
				position: static;
				flex-shrink: 0;
			}
			.search-container {
				width: auto;
				flex: 1;
			}
		.unavbar a {
		max-width: 12.2%;
		width:auto;
	}
	/* Header Imgs*/
	.headerlg {
		display: none;
		width:198px;
		height:35px;
	}

	.headersm {
		display: inline;
		height:35px;
		width:35px;
	}
	.topHeaderLogo {
		background-image:url("ScriptureUI/images/gpcirclelogo.png");
		background-position: center;
		background-size: auto 100%;
		width: 35px;
		height: 35px;
	}
			}