/*
History
Datetag       Developer   Change detail
ERE20210602  Ed Einfeld  format classes, email-success and email-failure
ERE20211115  Ed Einfeld  Set font-size to 14px in tbody 
ERE20211122  Ed Einfeld  Added class, showonpicture.
ERE20211208  Ed Einfeld  Add styling for modal popup for displaying pictures.
ERE20211228  Ed Einfeld  Add style for the popup trigger.
ERE20220928  Ed Einfeld  Add Styles for the edit quizzes page CR0006.
ERE20221028  Ed Einfeld  Hide bullet points on UL's CR0006
ERE20221116  Ed Einfeld  Add more styles to Edit_quiz.php CR0006
ERE20230314  Ed Einfeld  Add style for Correct answer lable CR0006
ERE20230504  Ed Einfeld  Set up a style for Right To Left text flow. - CR0006
ERE20230517  Ed Einfeld  I moved some style for radio buttons out of inline code in edit-quiz.php
ERE20230629  Ed Einfeld  New styling for the new BS4 Menu.  This is related to the Bible quiz project - CR0006  
ERE20230704  Ed Einfeld  More styles for the BS4 Menu.
ERE20230717  Ed Einfeld  Quiz Due date style added.
ERE20230718  Ed Einfeld  Image style added
ERE20230720  Ed Einfeld  Style added to the table's total count;
ERE20230808  Ed Einfeld  Style added for group buttons on explore.php
ERE20230810  Ed Einfeld  Style added for Add Salvations Input fields.
ERE20230814  Ed Einfeld  Increaded margin spacing for input fields in
                         languge.php and foot.php
ERE20230815  Ed Einfeld  Add .hidden class for edit_quiz.php
ERE20230821  Ed Einfeld  Fixing radio button styles within responsive views.
ERE20230823  Ed Einfeld  Consolidate .sidebarMenu in this style sheet.
ERE20230824  Ed Einfeld  Modifying styles on the .sidebarMenu.
ERE20230912  Ed Einfeld  Code changes to the 'Add Albums' function in pictures and edit_pictures.
ERE20230917  Ed Einfeld  Add padding left, right and top to mobile responsive view.
ERE20230918  Ed Einfeld  Add styling for the new hamburger button, used to expand and 
                         collapse the menu in the mobile view.
ERE20230927  Ed Einfeld  Control the position of the delete confirm button for questions.
ERE20240425  Ed Einfeld  CR0008 - Add style for analytics page icon: asterisk. 
*/
@import url("fonts.css");

html { /* ERE20211209 */
  min-height:100%;/* make sure it is at least as tall as the viewport */
    position:relative;
}

body{
	color:#484848;
	font-size:14px;
	font-family: 'Roboto Condensed', sans-serif;
	background-image: url(../img/bg.jpg);
	background-repeat: repeat;
}

/* Beginning of sidebarMenu ERE20230823 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  /* font-family: arial */
  
}

h1{
	font-size:24px;
	color:#0088cc;
}
h2{
	font-size:20px;
	color:#0088cc;
	margin-bottom: 0px;
}

h4 { /* updates to admin page for BS4 menu upgrade - ERE20230704  */
	font-size: 17.5px;
}

hr { /* updates to admin page for BS4 menu upgrade - ERE20230704  */
	margin: 20px 0;
	border: 0;
	border-top: 1px solid #eeeeee;
	border-bottom: 1px solid #ffffff;
}

.flex-wrapper {
  display: flex;      
}

.sidePanel {
  min-width: 250px; /* ERE20230823*/
  /* background-color: #f2f2f2; */
  width: 23%;
  font-size: 15px;
}

.sidePanel.active { /* Active is not used*/
  /* display: none; */
  margin-left: -290px;
  transform: rotateY(100deg); /* Rotate sidebar vertically by 100 degrees. */
}

/* Hide hamburger in the wide screen view - ERE20230918 */
nav label,
#hamburger { 
	display: none;
	margin-bottom: 0;
}

.sidebar {
  width: 87%; 
  background: #000000e0;
  padding: 20px 0;
  transition: all 0.6s cubic-bezier(0.945, 0.020, 0.270, 0.665);
  transform-origin: center left; /* Set the transformed position of sidebar to center left side. */
  margin: 20px 0 0 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0,0.5);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0,0.5);
  border-radius: 10px;
  -webkit-border-radius: 10px;
  float: left;
}

/* .sidebar.active {
  margin-left: -250px;
  transform: rotateY(100deg); // Rotate sidebar vertically by 100 degrees. //
} */

.sidebar .sidebar-header {
  position: relative;
  Top: -10px;
  padding: 0 20px;
  color: white;
  text-align: center;
}


.sidebar ul { /* I added sidebar to the selector - ERE20230824 */
  padding-bottom: 0px
}


.sidebar ul {
  margin-bottom: 0;
}

.sidebar ul li {
  padding: 5px 3px 5px 15px;
  width: 100%;
}

.sidebar>ul>li {
  padding-bottom: 5px;
  border-bottom: 1px solid rgb(49, 44, 44);
}

.sidebar>ul>li>ul>li:first-child { /* Style menu items to fit nice - ERE20230824 */
	margin-top: 6px;
}

.sidebar>ul>li>ul>li:last-child { /* Style menu items to fit nicely - ERE20230824 */
	margin-bottom: -5px;
}

.sidebar>ul>
.sidebar>ul>li:last-child {
  padding-bottom: 5px;
}

.sidebar ul li a {
  color: #fff;
  display: block
}

.sidebar ul li a .fas {
  width: 30px;
  color: #bdb8d7 !important
}

i.fas.fa-home:hover,
i.fas.fa-tasks:hover,
i.fas.fa-image:hover,
i.fas.fa-area-chart:hover,
i.fas.fa-list-alt:hover,
i.fas.fa-align-justify:hover,
i.fas.fa-comment-alt:hover,
i.fas.fa-star:hover,
i.fas.fa-flag:hover,
i.fas.fa-eye:hover,
i.fas.fa-leaf:hover,
i.fas.fa-bullhorn:hover,
i.fas.fa-book:hover,
i.fas.fa-arrow-down:hover,
i.fas.fa-arrow-up:hover,
i.fas.fa-cog:hover,
i.fas.fa-folder-open:hover,
i.fas.fa-user:hover,
i.fas.fa-info-circle:hover,
i.fas.fa-globe-africa:hover,
i.fas.fa-wrench:hover,
i.fas.fa-question-circle:hover,
i.fas.fa-user:hover,
i.fas.fa-eye:hover, 
i.fas.fa-camera:hover,
i.fas.fa-asterisk:hover, /* CR0008 - ERE20240425 */
i.fas.fa-circle-question:hover { /* ERE20230718 */
  color: #304FFE !important
}

.sidebar ul li a .far {
  width: 30px;
  color: #bdb8d7 !important
}

.sidebar ul li:hover {
  background: #000
}

.sidebar>ul>li>ul>li:hover {
  background: #1e1e1e;
}

.sidebar ul li a:hover {
  text-decoration: none
}
/* #sidebarCollapse is not being used*/
#sidebarCollapse { 
  width: 40px;
  height: 40px;
  background: #f5f5f5;
  border: none;
  outline: none;
}

#sidebarCollapse span { 
  height: 2px;
  margin: 0 auto;
  display: block;
  background: #555;
  transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
}

#sidebarCollapse span:first-of-type {
  /* rotate first one */
  transform: rotate(45deg) translate(2px, 2px);
}
#sidebarCollapse span:nth-of-type(2) {
  /* second one is not visible */
  opacity: 0;
}
#sidebarCollapse span:last-of-type {
  /* rotate third one */
  transform: rotate(-45deg) translate(1px, -1px);
}

#sidebarCollapse.active span {
  /* no rotation */
  transform: none;
  /* all bars are visible */
  opacity: 1;
  margin: 5px auto;
}
/* End of sidebarMenu */


.container-fluid, .row-fluid {
	/* height: inherit;  */
}

.menucontainer{
	background-color:#111;
	border-right:#666 2px solid;
	overflow:hidden;
	margin:20px 0 0 20px !important;
	border-radius:10px;
	-moz-border-radius:10px;
	-o-border-radius:10px;
	-webkit-border-radius:10px;
	border: 1px solid #fff;
	border-radius: 5px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	/* der-radius:10px; */
	-webkit-border-radius:10px;
}

.active{
	background-color:#4c4c4c;
}

.maincontainer{
	background-color:#f4f4f4;
	Padding:20px;
	margin:20px 20px 20px 0; /* ERE20230823*/
	border: 1px solid #fff;
	border-radius: 5px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	/* der-radius:10px; */
  -webkit-border-radius:10px;
	width: 100%; /* ERE20230823 */
	

}


/* ERE20230706 this is from the older bootstrap */
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
  background-color: #ffffff;
  border: 1px solid #cccccc;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border linear .2s, box-shadow linear .2s;
  -moz-transition: border linear .2s, box-shadow linear .2s;
  -o-transition: border linear .2s, box-shadow linear .2s;
  transition: border linear .2s, box-shadow linear .2s;
}

/* ERE20230706 this is from the older bootstrap */
select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
  display: inline-block;
  height: 20px;
  padding: 4px 6px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 20px;
  color: #555555;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  vertical-align: middle;
}

select {
	width: 220px;
	border: 1px solid #cccccc;
	background-color: #ffffff;
	height: 30px;
}
 
.maincontainer input{
	width:50%;
	padding:5px;
	margin:0.05% 1%; /* ERE20230704 */ /* ERE20230817 */
  box-sizing: content-box; /* Height of input field gets lost - ERE20211116 */
}
.maincontainer textarea{
	width:96%;
	padding:5px;
	margin:0.05% 1% 1% 1%;
	height:200px;
}
#seo textarea{
	width:96%;
	padding:5px;
	margin:0.05% 1%;
	height:70px;
}

.maincontainer input[type=radio]{ /* styles moved from local - ERE20230821 */
	width: 16px;
	height: 15px; /* changed from 16px for Safari browser. Safari was clipping part of the circle - ERE20230822 */
	display: inline-block;
	position: relative;
	margin-top: 5px; 
}

.maincontainer input[type="checkbox"] { /* ERE20230629 - CR0006*/
	width: fit-content;
	block-size: fit-content;
}

.nicEdit-selected {
	background-color: #fff !important;
}
.pagination{
	margin-top:10px;
}

#album {
  height: 56px;
}
#albumName { /* ERE20211115 */
  position: relative;
  z-index: 0;
}
#addAlbum { /* ERE20211115 */
  position: relative;
  z-index: 10;
  bottom: 41px;
  margin-left: 6px; 
  width:200px /* Change from 224px - ERE20230823 */
}

#addAlbum input {
  /* margin-left: 6px; */
	margin-left: -2px;
  width: 208px; /* ERE20230823 */
}

button#createAlbumButton { /* code changes for add Album function - ERE20230912 */
  margin-bottom: 10px;
	margin-left: 20px;
}

.btn-primary{
	background-color:#0088cc;
	width:220px !important;
}
.btn-primary:hover{
	background-color:#0073ad;
}
.btn-light { /* This added to the bootstrap template button - ERE20230823 */
	border: 1px solid gray;
}
.btn-danger {
	width: auto;
	padding:5px 10px;
}
.box{
	border:#ccc 1px solid;
	padding:10px;
	height:auto;
	min-height:220;
	background:#fff;
	margin: 0 1% 10px 0; /* ERE20230704 #/
	/* margin: 0 1%; */
}
.marginLeft0{
	margin-left: 0 !important;
}
.marginLeft10{
	margin-left: 10px !important;
}
.marginTop20{
	margin-top:20px;
}

.maincontainer td{
	background-color:#FFF;
}
.tablehead{
	background-color:#e2e2e2 !important;
}

tbody { /* ERE20211115*/
  font-size: 14px;
}

.email-success { /* email-notification success text ERE20210602 */
	font-size: 1em;
	font-weight: bold;
	color:rgb(22, 129, 22);
	text-align: center;
  background: #fcf8e3;
  border: 1px solid #fbeed5;
  width: 70%;
  margin-left: 20%;
  margin-top: 1.0em;
  border-radius: 4px;
  padding: 10px;
}

.email-failure {  /* email-notification failure text ERE20210602 */
	font-size:1em;
	font-weight:bold;
	padding:5px 0 0;
	color:#f30;
	text-align: center;
  background: #fcf8e3;
  border: 1px solid #fbeed5;
  width: 70%;
  margin-left: 20%;
  margin-top: 1.0em;
  border-radius: 4px;
  padding: 10px;
}

.clearboth{
	clear:both;
}

/*.label-success, .label-important{
	width:96%;
	padding:5px;
	margin:0.05% 1%;
	font-family:Arial, Helvetica, sans-serif;
	} */

.tcal{
	width: 100% !important;
}
.pageoptions{
	width: 100%;
	padding: 5px;
	margin: 5px;
	border-top:#CCC 1px solid;
	border-bottom:#CCC 1px solid;
}
.pageisHomechk, .pagetabPosition{
	border-right:#CCC 1px solid;
	margin-right:20px;
	padding-right:20px;
}
.pageisHomechk{
	padding-top:5px;
}
.pageisHomechk input, .pageisHomechk label{
	display:inline;
	width:20px;
}
.pagetabPosition input, .pagetabPosition label{
	display: inline;
	width: 15px;
	padding: 0 2px;
}
.pagefriendlyURL input, .pagefriendlyURL label{
	display: inline;
	width: 200px;
	padding:0 2px;
}
.pagetabPosition input, .pagefriendlyURL input{
	margin-top:5px;
}
.fixedmargin input { /* This is a clone from browseimage ERE20230706 */
	width: 50%;
	margin: 0px 10px 10px 10px;
}
.browseimage input{
	width:50%;
	margin: 0px 10px 10px 10px;
}
.browseimage .btn{
	margin-top:0px;
	width:120px;
}
.showonpicturepage, .articlefriendlyURL{ /* Added class showonpicturepage - ERE20211121 */
	border-top:#CCC 1px solid;
	border-bottom:#CCC 1px solid;
	padding:10px 0;
	width:100%;
	margin-top:10px;
	margin-bottom: 10px;
}
.showonpicturepage input, .showonpicturepage label, 
.articlefriendlyURL input, .articlefriendlyURL label{ /* Added class showonpicturepage - ERE20211121 */
	display:inline;
	width:50%;
	padding:5px 7px;
	}

input.rad-input { /* I moved this style from inline - ERE20230517 */
	width: 16px;
	height: 16px;
	display: inline-block;
	position: relative;
}

.pageLinkDiv{
	display:none;
	}
.allowcomments {
	width: 16px;
	height: 16px;
	display: inline-block;
	float:left;
}
.admindevideddivs {
	margin:0px 0px 10px 0px;
}
.admindevideddivs select { /* ERE20211116 */
  margin-left: 9px;
}

.commentByline {
	margin: 16px 0px 0px 0px;
	font-size: 12px;
}
.commentTags .label {
	font-weight: normal;
}
.commentButtons {
	margin: 4px 0px 0px 0px;
}
.commentsSearchFilters label {
	display: inline;
	font-size: 14px;
	font-weight: normal;
	line-height: 20px;
	
}
.commentsSearchFilters label input {
	display: inline;
	width: 2%;
	margin: 0.05% 1%; /* change from 'width: 2%' - ERE20230809 */
}

.inline {
	display: inline;
}

.center-text {
	text-align: center;
}
.right-text {
	text-align: right;
}
.left-text {
	text-align: left;
}

.inOutTable {
	width: 100%;
	background-color: #f4f4f4;
}
.inOutTable .normalField {

}
.inOutTable .formattedField {
	
}
.inOutTable td {
	background-color: #f4f4f4;
	text-align: center;
}
.inOutTable input {
	width: 75%;
	margin-bottom: 1%; /* Increased margin bottom spacing - ERE20230814 */
}

.table th, .table td { /* This brought over from old Bootstrap 2 - ERE20230816*/
	padding: 8px;  
	line-height: 20px;
	text-align: left;
	vertical-align: top;
	border-top: 1px solid #dddddd;
}

.popup-trigger { /* Style for the popup trigger - ERE20211228*/
  cursor: pointer;
  color: #0283ff;

}
/* style for Modal popup that displays pictures - ERE20211208 */
/* ============================================================*/
.body-blackout {
  position: absolute;
  z-index: 1010;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65);
  display: none;
}

.body-blackout.is-blacked-out {
  display: block;
}

.popup-trigger {
  /* display: inline-block; */
}

.popup-modal {
  height: 420px;
  width: 650px;
  background-color: #f4f4f4;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 5px;
  opacity: 0;
  pointer-events: none;
  transition: all 300ms ease-in-out;
  z-index: 1011;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  border-radius:10px;
	-webkit-border-radius:10px;
}

.popup-modal.is--visible {
  opacity: 1;
  pointer-events: auto;
}

.popup-modal__close {
  position: absolute;
  /* font-size: 1.2rem; */
  right: 6px;
  top: 4px;
  cursor: pointer;
}

.popup-modal .picframe {
  max-height: 480px;
}

img.picimage {
  max-height: 330px;
  border: 1px solid #cccccc;
	max-width: 100%; /* ERE20230718*/
	height: auto; /* ERE20230718*/
	vertical-align: middle; /* ERE20230718*/

}

 .hidden { /* This was in the old Bootstrap 2 - ERE20230815 */
	display: none;
	visibility: hidden;
}

/* ERE20220928 - css for edit_quiz */
.question-box { 
  border: 1px solid black;
  border-radius: 4px;
  margin: 5px;
  min-height: 44px;
  padding: 6px 7px;
  -webkit-border-radius: 4px;
}

/* ERE20230314 - css for edit_quiz*/ /* commented out - ERE20230823 */
/* .mt-2 {
  margin-top: 5px;
} */

.expand-collapse {
  margin-bottom: 5px;
}

/* ERE20220928 - css for edit_quiz CR0006 
   I use spaan here because Bootstrap override classes with 'span' in them and makes a mess of things.
*/
.quest-spaan {
  cursor: pointer;
}

/* ERE20221116 - css for edit_quiz CR0006 */
.quest-head {
  /* display: inline-block; */
}

/* ERE20221116 - css for edit_quiz CR0006 */
.quest-head-btn {
  margin-top: 0px;
}

/* ERE20221116 - css for edit_quiz CR0006 */
.quest-form {
  margin-bottom: 0px;
}

/* ERE20221116 - css for edit_quiz CR0006 */
input.edit-quest {
  margin-bottom: 5px;
}

/* ERE20230504 - Right to left text flow CR0006 */
.rtl-text-flow {
	direction: rtl;
	text-align: right!important;
}

/* ERE20230504 - New div class for left text flow CR0006 */
.hdr-quest-text {
	display: inline-block;
}


.rad-button-div {
  display: inline-block;
  border: none;
  margin-top: 0px
}

.rad-spaan {
  margin-right: 8px;
}

.rad-spaan>input {
  width: 16px; 
  height: 16px;
  display: inline-block;
  position: relative;
}

.quest-type-radio {
  margin-top: 10px;
}

[id^="quest-list"] {
  list-style-type: none;
}

.add-offered-answer-btn {
  margin-left: 25px;
  margin-bottom: 12px;
}

/* form.question_form {
  margin-bottom: 0;
} */

.MultipleChoice ul { /* ERE20221028-CR0006 - Added for the quiz project  */
  list-style-type: none;
}

/* ERE20230404-CR0006 - Added for the quiz project */
.quizScore {
	float: right;
	margin-top: 0;
	border: 1px solid red;
	padding: 3px 10px;
	border-radius: 4px;
	
}

.quiz-due-by-date { /* ERE20230717 */
	width: 300px;
}

.vscomp-toggle-button { /* ERE20230717 */
	border-radius: 4px;
}

.floatLeft {
	float:left;
}

.clear-both {
	clear: both;
}
/*==============================================================*/
/*HELP STYLES*/
.help{
	border:#CCC 1px solid;
	padding:5px;
	cursor:pointer;
	margin-bottom:10px;
}
.helptitle{
	background-color:#e4e4e4;
	padding:5px;
}
.helpcontent{
	display:none;
	padding:10px 0 0 20px;
	margin-top:10px;
}

.w-footer {
	width: 100%;
}

.w-auto {
	width: auto!important;
}

/* ERE20230629 - CR0006 */
.maincontainer input.ui-autocomplete-input {
	width: 245px;
	position: relative;
	margin-left: 10px;
}

/* ERE20230629 - CR0006 */
.srch-label {
	line-height: 33px;
}

/* ERE20230629 - CR0006 */
.srch-div {
	width:480px
}

.pagination ul { /* ERE20230710 */
	display: flex;
}

.pagination ul > li { /* Pagination style for pages ERE20230629 */
	display: inline;
  margin: auto -1.6px auto 1.6px; /* ERE20230710 */
}

li {
	line-height: 20px;
}

.pagination ul > li:last-child {
	margin-left: 1.6px; /* ERE20230710 */
}

.pagination ul > li:first-child > a, .pagination ul > li:first-child > span { /* Pagination style for pages ERE20230629 */
	border-left-width: 1px;
	-webkit-border-top-left-radius: 4px;
	-moz-border-radius-topleft: 4px;
	border-top-left-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-bottom-left-radius: 4px;
}

.pagination ul > li:last-child > a, .pagination ul > li:last-child > span { /* Pagination style for last child in pagination ERE20230704 */
	/* border-left-width: 1px; */
	-webkit-border-top-right-radius: 4px;
	-moz-border-radius-topright: 4px;
	border-top-right-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	border-bottom-right-radius: 4px;

}

.pagination ul > .active > a, .pagination ul > .active > span { /* Pagination style for pages ERE20230629 */
	color: #999999;
	cursor: default;
}

.pagination ul > li > a:hover, .pagination ul > li > a:focus, .pagination ul > .active > a, .pagination ul > .active > span { /* Pagination style for pages ERE20230629 */
	background-color: #f5f5f5;
  margin-left: 0;
}

.pagination ul > li > a, .pagination ul > li > span { /* Pagination style for pages ERE20230629 */
	float: none;
	padding: 4px 12px;
	line-height: 20px;
	text-decoration: none;
	background-color: #ffffff;
	border: 1px solid #dddddd;
	border-left-width: 0;
}

hr.admin-hr {
	width: 99%;
}
.admin-row {/* admin page update for BS4 Menu upgrade - ERE20230705 */
	align-items: flex-start;
	justify-content: space-between;
	margin-left: -5px;
}

.breadcrumb { /* admin page updates - ERE20230705 */
	flex-direction: column;
}

ul#site-info>li { /* admin page updates - ERE20230705 */
	list-style-type: disc;
	margin-left: 20px;
}

form label.chkbox-label {
	display: block;
	margin-bottom: 0;
}

form input.chkbox {
	border-radius: 4px;
	border: 1px solid #cccccc;
	background-color: #ffffff;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	margin-bottom: 1%;

}

.scroll-table { /* ERE20230718 */
	overflow-x: scroll;
}

.lineHeight40 { /* ERE20230720 */
	line-height: 40px;
}

.dropdown-menu, .dropdown-item { /* style for dropdown buttons - ERE20230808*/
	background-color: #4c4c4c;
	color: #ea760d;
}
.hr-break { /* style for dropdown buttons - ERE20230808 */
	background-color: white;
	margin: 3px 0 0 0;
	height: 1px;
}

.btn-toolbar {
	flex-wrap: nowrap;
}

.well {
	min-height: 20px;
	padding: 19px;
	margin-bottom: 20px;
	background-color: #f5f5f5;
	border: 1px solid #e3e3e3;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
	-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

#addSalvationForm label {
	display: block;
}

/* Control the question text output on the question header ERE20230927 */
.quest-spaan.quest-text-short {
	display: inline-flex;
	width: 500px;
	height: 22px;
	overflow-y: hidden;
}

/* Control the position of the delete confirm button for questions - ERE20230927 */
.delete-quest-confirm {
	position: absolute;
	right: 104px;
} 

select.select-correct {
	width: 110px
}

/*================ Media Queries ============================*/

/*=============== Media ===============*/
/*=============== query ===============*/
@media (max-width: 992px) {
/* Control the question text output on the question header - ERE20230927 */
	.quest-spaan.quest-text-short {
		display: inline-flex;
		width: 280px;
		height: 22px;
		overflow-y: hidden;
	}
	
	/* Control the position of the delete confirm button for questions in mobile view - ERE20230927 */
	.delete-quest-confirm {
		position: absolute;
		right: 104px;
	} 
}

/*=============== media ===============*/
/*=============== query ===============*/
@media (max-width: 767px) {

	/* for sidebarMenu below - ERE20230823 */
	/* Add top and side padding for mobile - ERE20230917 */
	.flex-wrapper { 
    flex-direction: column;
		padding: 5px 5px 0 5px;
  }

  .sidePanel {
    width: 100%;
  }

	/* show hamburger in the mobile view - ERE20230918 */
	nav.sidebar label { 
		display: inline-block; 
		color: white;
		background: none; 
		font-style: normal;
		font-size: 1.2em;
		padding: 10px;
	}

	/* Toggle Show/Hide Menu */
	#hamitems { display: none; }
	nav.sidebar input:checked ~ #hamitems { 
		display: block;
		transition: height .35s ease-in; 
	}

	.sidebar .sidebar-header {
		display: inline-block;
		width: 80%;
		position: relative;
		top: 1px;
	}

  .sidebar {
    width: 100%;
    margin: 0;
		padding: 0 0 10px 0; /*  - ERE20230918 */
  }

  /* Reversing the behavior of the sidebar: 
     it'll be rotated vertically and off canvas by default, 
     collapsing in on toggle button click with removal of 
     the vertical rotation.   */
  #sidebar {
      margin-left: -250px;
      transform: rotateY(100deg);
  }
  #sidebar.active {
      margin-left: 0;
      transform: none;
  }

  /* Reversing the behavior of the bars: 
     Removing the rotation from the first,
     last bars and reappear the second bar on default state, 
     and giving them a vertical margin */
  .sidebarCollapse span:first-of-type,
  .sidebarCollapse span:nth-of-type(2),
  .sidebarCollapse span:last-of-type {
      transform: none;
      opacity: 1;
      margin: 5px auto;
  }

  /* Removing the vertical margin and make the first and last bars rotate again when the sidebar is open, hiding the second bar */
  .sidebarCollapse.active span {
      margin: 0 auto;
  }
  .sidebarCollapse.active span:first-of-type {
      transform: rotate(45deg) translate(2px, 2px);
  }
  .sidebarCollapse.active span:nth-of-type(2) {
      opacity: 0;
  }
  .sidebarCollapse.active span:last-of-type {
      transform: rotate(-45deg) translate(1px, -1px);
  }
	/* The above style is for the sidebarMenu - ERE20230823 */

	.maincontainer{
			/* margin-left: 20px!important; */
			width: 100%;
			margin: 10px 0 0 0;
	}
	.maincontainer input.btn-primary {
		width: 220px;
	}
	.maincontainer input{
		width:96%;
		margin-bottom: 3px;
	}

	.maincontainer textarea{
		width:96%;
		height:200px;
	}
	#seo textarea{
		width:96%;
		height:70px;
	}

	.email-success {
		width:95%;
		margin-left:0%;
	}
	.email-failure {
		width:95%;
		margin-left:0%;
	}

	.box{
		min-width: 80%;
	}

	.maincontainer input.ui-autocomplete-input { /* ERE20230705 */
		width: 300px;
		position: static;
		margin: 0;
		float: right;
	}

	.srch-label {
		float: right;
	}

	.add-salvation-grp { /* - ERE20230810 */
		width: 100%;
		margin-left: 0;
	}

	.add-salvation-grp input#datepicker { /* - ERE20230810 */
		width: 200px;
	}

	#addAlbum input {
		width: 188px; /* ERE20230823 */
	}
	
	button#createAlbumButton { /* code changes for add Album function - ERE20230912 */
		margin-left: 5px;
	}
	
	select#albumID {
		width:200px;
	}

	/* set up question-box row as inline-flex */
	/* .question-box {
		display: inline-flex;
		justify-content: space-between;
	}
	*/
	/* Display shortened question text in responsive view - ERE20230926 */
	.quest-spaan.quest-text-short {
		display: inline-flex;
		width: 143px;
		height: 22px;
		overflow-y: hidden;
	}

	.delete-quest-confirm {
		position: absolute;
		right: 90px;
	} 
	
}