/** Root Values**/
:root {
  --body-bg: linear-gradient(180deg, #f5f7fa 0%, #cc6699 100%);
  --msger-bg: #fff;
  --border: 2px solid #ddd;
  
  --search-bar-color: #FAF7FF ;
  --scrollbarTrackColor: #EF77B3 ;
  --scrollbarBlockColor: #EFEFEF;
  --TopAndBottomFixedBars: #B710AD;
}

/** 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%;
}

/** 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: 4;
}

/** 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;
  width: calc(100% - 475px); 
  height: 34px; 
  z-index: 4;
}

/** Top Bar Links **/
.TopBarLinks {
  position: absolute;
  right: 36px;
  top: 5px;
  color:white;
  font-weight: bold;
  font-size: 18px;
  padding: 1px;
  z-index: 1;
  float: right;
}

/** TopSettings Gear Button **/
.TopSetBtn {
  position: absolute;
  right: 0px;
  top: 0px;
  padding: 0px;
  z-index: 1;
}

/** Body **/
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto; /**100% wouldn't set things off with scroll bar, "100vh" (vertical height) gives perfect desired scroll setup**/
  background-image: var(--body-bg);
  background-position: center;
  background-repeat: no-repeat;
  font-family: Trebuchet MS, sans-serif;
}

.hoverBox {
  padding-top: 158px;
  padding-left: 180px;
  padding-right:180px;
  text-size:16px;
	}
	
.textMain {
  color:#2f2f2f;
  font-size:18px;
  text-align-last:center;
  text-shadow: 0px 0px 3px #dedede;
  line-height: 35px;
  }
  .textMainMobile {
  color:#2f2f2f;
  font-size:18px;
  text-align:center;
  text-shadow: 0px 0px 1px #000;
  line-height: 35px;
  }
  
/** Scripture and Note Container - Number - 1 - _Duplicate This For More Scripture Areas_**/
.indexcontainer {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  width: 100%;
  max-width: 1024px;
  margin: 0px 0px; /**Top Margin Side Margin**/
  height: calc(100% - 0px); /** 105% for overflow to set top border under FixedBar correctly **/
  border: var(--border);
  background: var(--msger-bg);
  background-repeat: no-repeat;
  box-shadow: 0 15px 15px -5px rgba(0, 0, 0, 0.2);
  webkit-box-shadow: 0 8px 48px 8px rgba(47, 91, 234, 0.175);
  box-shadow: 0 8px 48px 8px rgba(47, 91, 234, 0.175);
}

/** Index Structuring - Container **/
.indexstructure {
  //flex: 1;
  overflow-y: auto;
  padding: 10px;
}

.mainsection {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  padding-top: 0px;
  border-right: solid;
  border-left: solid;
  border-color: white;
  width: 100%;
  height: 550px; /**105% for overflow to set top border under FixedBar correctly **/
}

/** Nav Buttons Properties **/
.nav-btns {
  width: 35px;
  height: 35px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 95%; /** The original value was - cover **/
  border-radius: 20%;
}

/** Bottom LeafList Button **/
.LeafListBtn {
  position: absolute;
  left: 0px;
  top: 0px;
  padding: 0px;
}

 /* Place the navbar at the bottom of the page, and make it stick */
 .unavbar {
   background-color: #f2f2f2;
   border-top: solid;
   border-color: black;
   border-width: 1px;
   overflow: hidden;
   position: fixed;
   bottom: 0;
   align-items: right;
   width: 100%;
   z-index:4;
 }

/** Style the links inside the navigation bar **/
.unavbar a {
  float: right;
  display: block;
  color: white;
  text-align: left;
  padding: 0px 2px;
  text-decoration: none;
  font-size: 17.5px;
  width: 12.2%;
}

/** Style MyTable button **/
#MyTable {
  background-image: linear-gradient(180deg, #FA7878 0%, #FF2401 100%);;
}

/** Style MyBible button **/
#MyBible {
  background-image: linear-gradient(180deg, #8DA9E3 0%, #022287 100%);;
}

/* Style MyProfile button */
#MyProfile {
  background-image: linear-gradient(180deg, #CFD89B 0%, #FDEC21 100%);;
}

/** Style MyStudies button **/
#MyStudies {
  background-image: linear-gradient(180deg, #BDA0D8 0%, #7300AD 100%);;
}

/** Style MyLife button **/
#MyLife {
  background-image: linear-gradient(180deg, #FFCE90 0%, #FF9705 100%);;
}

/* Style MyDomain button */
#MyDomain {
  background-image: linear-gradient(180deg, #AEFFB4 0%, #089334 100%);;
}

/** Change the color of links on hover **/
.unavbar a:hover {
  background-color: #ddd;
  color: #f2f2f2; 

/**Add a color to the active/current link **/
.unavbar a.active {
  background-color: #04AA6D;
  color: white;
  }
.navbar a.active {
  background-color: #04AA6D;
  color: white;
}

/** Blue slide up box**/
.hid-box {
  top: 100%;
  position:relative;
  transition: all .3s ease-out;
  background: #428bca;
  height: 100%;
  border: solid;
  border-color: black;
  }

/** The subnavigation menu **/
.LeafListBtn {
  float: left;
  overflow: hidden;
}

/** Subnav button **/
.LeafListBtn .subnavbtn {
  font-size: 16px; 
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/** Add a red background color to navigation links on hover **/
.LeafListBtn a:hover, .LeafList:hover .subnavbtn {
  background-color: red;
}

/** When you move the mouse over the subnav container, open the subnav content **/
.LeafListBtn:hover .subnav-content {
  display: block;
}

/** Style the subnav content - positioned absolute **/
.subnav-content {
  display: none;
  position: absolute;
  left: 0;
  background-color: red;
  width: 100%;
  z-index: 1;
}

/** Style the subnav links **/
.subnav-content a {
  float: left;
  color: white;
  text-decoration: none;
}

/** Add a grey background color on hover **/
.subnav-content a:hover {
  background-color: #eee;
  color: white;
}

/* Force black text in all search bars across the site */
input[type="search"], 
#searchloggedoff, 
#searchloggedin,
.fixbarloggedin input,
.fixbarloggedoff input {
  color: black !important;
  -webkit-text-fill-color: black !important;
}