/******************************************************************************************************
 ****************************   Generic stylings   ****************************************************
 *****************************************************************************************************/
p {
    margin-left: 1%;
    margin-right: 10%;
}
ol {
    margin-left: 1%;
    margin-right: 10%;
}

.mobile {
    display: none;
}

.hide {
    display: initial;
}
/******************************************************************************************************
 ****************************   Top level containers   ***********************************************
 *****************************************************************************************************/
#saveMask {
    z-index: 1000;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    opacity: 1;
    display: none;
}

#saveMaskBackground {
    z-index: 1000;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background-color: #AAAAFF;
}

#saveMaskMessage {
    border: solid black 2px;
    background-color: #AAAAFF;
    opacity: 1;
    position: absolute;
    top: 40%;
    left: 40%;
    width: 20%;
    height: auto;
    font-size: 30px;
    text-align: center;
    z-index: 1001;
}

#topLevel {
    float: left;
	clear: both;
    width: 100%;
    display: flex;
    flex-direction: row;
    border-top: 10px solid #559955;
    padding-top: 5px;
}

#sidebar {
    margin-left: 0%;
    width: 15%;
    min-width: 200px;
    background-color: #CCCCFF;
    border-right: 3px solid black;  
    float: left;
}

#headerImages {
    width: auto;
    min-width: 1300px;
    clear: both;
    margin-bottom: 5px;
}

#imgLogo {
    width: 15%;
    min-width: 200px;
}

#headLabel {
    float: left;
    width: 15%;
    min-width: 200px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

#headLabel a {
    text-decoration: none;
    color: black;
}

#imgHeader {
    height: 100px;
    float: left;
}

#main {
    /*background-color: #FFCCCC;*/
    width: 85%;
}

#errors {
    background-color: red;
}

#phpErrors {
	float: left;
	clear: both;
}

#debug {
    float: left;
    clear: both;
}

h3,h2 {
    text-align: left;
    margin-left: 1%;
}

h2.titleCenter, h3.titleCenter, h4.titleCenter {
    text-align: center;
}

hr { 
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
}

/******************************************************************************************************
 ****************************   Sidebar specific stylings   ******************************************
 *****************************************************************************************************/
div.sidebar {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}

span.sidebar {
    margin-bottom: 0.25em;
}

input[type="password"].sidebar {
    width: 75%;
}

input[type="email"].sidebar {
    width: 75%;
}

input[type="text"].sidebar {
    width: 75%;
}

input[type="button"].sidebar {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-right: 0.5em;
}

#adminLinks {
    margin-top: 1em;
}

#hideSidebarButton {
    display: none;
}



/******************************************************************************************************
 ****************************   Main container specific stylings   ************************************
 *****************************************************************************************************/
.eventTableHeader {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.eventTable {
    margin-left: 1%;
    /*margin-left: auto;*/
    border: 2px solid black;
    border-collapse: collapse;
    /*width: 50%;*/
}

.eventTable td, .eventTable th{
    border: 2px solid black;
    border-collapse: collapse;
    padding-left: 1em;
    padding-right: 1em;
}

td.eventTable.number {
    text-align: center;
}

.privateEvent {
    background-color: #DDAAAA;
    /*background-color: #AAAAAA;*/
}

span.privateEvent {
    border: 1px solid black;
    padding-left: 1px;
    padding-right: 1px;
}

.sectionEvent {
    background-color: #AAAADD;
    /*background-color: #EEEEEE;*/
}

span.sectionEvent {
    border: 1px solid black;
    padding-left: 1px;
    padding-right: 1px;
}

/******************************************************************************************************
 ****************************   Member information specific stylings   ********************************
 *****************************************************************************************************/
#eventLists {
    /*margin: auto;*/
    display: flex;
    flex-direction: column;
    max-width: 50%;
    min-width: 400px;
}

th.userEventTableHeader {
    background-color: #CCCCCC;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.memberDataTable {
    border: 1px solid black;
    border-collapse: collapse;
    margin-right: 1em;
    /*float: left;*/
    margin-left: 2em;
    /*margin-bottom: 1em;*/
}

.memberDataTable td {
    border: 1px solid black;
    border-collapse: collapse;
    padding-left: 0.25em;
    padding-right: 0.25em;
}

.memberDataTable th {
    border: 1px solid black;
    border-collapse: collapse;
    padding-left: 0.25em;
    padding-right: 0.25em;
}

table.memberDataTable {
    margin-bottom: 2em;
}

div.memberDataTable {
    width: 50%;
    min-width: 600px;
}

.memberTables {
    padding-top: 1em;
    /*background-color: #289501;*/
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    /*justify-content: space-between;*/
}

#emailPrefTypeTable {
    max-width: 210px;
}

#emailPrefSectionTable {
    max-width: 250px;
}

#emailPrefTypeTablePrivate {
    max-width: 210px;
}

#emailPrefSectionTablePrivate {
    max-width: 250px;
}

.approvalTableDataType {
    max-width: 150px;
}


/******************************************************************************************************
 ****************************   Event details specific stylings   *************************************
 *****************************************************************************************************/
#eventDetailsTable th {
    text-align: left;
}

.eventInfo td, .eventInfo th {
    border: none;
}

table.eventInfo {
    min-width: 600px;
    border: none;
}

div.eventInfo, p.eventInfo, ol.eventInfo {
    width: 60%;
    min-width: 600px;
	margin-left: 1%;
}

h3.eventInfo {
    text-align: left;
	margin-left: 0%;
}

input[type="button"].eventInfo {
    font-size: medium;
    /*width: 7em;*/
}

img.eventInfo {
    width: 500px;
    float: none;
    display: block;
    margin: auto;
}

#eventImages {
    display: flex;
    flex-direction: row;
}

#eventImages div {
    display: flex;
    flex-direction: column;
    margin: 1%;
}

label.eventInfo {
    font-weight: bold;
    text-align: center;
}

/******************************************************************************************************
 ****************************   Sign-up form specific stylings   *************************************
 *****************************************************************************************************/
h3.userFormResponse {
    text-align: left;
}

textarea.userFormResponse {
    min-width: 270px;
    min-height: 50px;
}

input[type="checkbox"].userFormResponse {
    width: 20px;
    height: 20px;
}

label.userFormResponse {
    font-weight: bold;
}

table.userFormResponse, .userFormResponse td, .userFormResponse th {
    border: none;
}

td.formQuestion {
    width: 35%;
}

th.userFormQuestion {
    text-align: left;
    width: 6em;
}

table.userFormTable th {
    text-align: left;
    /*border: 1px solid black;*/
    /*border-collapse: collapse;*/
    max-width: 30em;
    padding-top: 10px;
    padding-bottom: 10px;
}

table.userFormTable td {
    /*border: 1px solid black;*/
    /*border-collapse: collapse;*/
    padding-top: 10px;
    padding-bottom: 10px;
}

table.userFormTable {
    /*border: 1px solid black;*/
    /*border-collapse: collapse;*/
}

/******************************************************************************************************
 ****************************   Event editing specific stylings   *************************************
 *****************************************************************************************************/
p.eventEditHeader {
    margin-left: 1%;
}

#eventEditingTable {
    margin-left: 0.5em;
    border: 1px solid black;
    border-collapse: collapse;
}

#eventEditingTable td, #eventEditingTable th{
    border: 1px solid black;
    border-collapse: collapse;
}

#data {
    display: flex;
    flex-direction: row;
}

input[type="text"].eventEditInput {
    width: 150px;
}

input[type="text"].eventEditInputLong {
    width: 90%;
}

textarea.eventEditInput {
    height: 300px;
    width: 500px;
    max-width: 600px;
    min-width: 400px;
    background-color: white;
}

.dateShort {
    width: 6em;
}

.dateLong {
    width: 15em;
}

.eventTextArea {
    height: 300px;
    width: 400px;
    max-width: 400px;
    min-width: 400px;
    background-color: white;
}

#ownerTable {
    border: none;
    width: 100%;
}

#ownerTable td {
    border: none;
}

#ownerTable th {
    text-align: left;
    border: none;
}

img.email {
    margin-left: 20px;
}

button.helpButton {
  float: right;
  font-size: medium;
  background-color: green;
  color: white;
}

#helpDiv {
  background-color: green;
  color: white;
  border: 1px solid #AAAAAA;
  max-width: 300px;
  /*margin-left: 25%;*/
  height: auto;
  z-index: 50;
  /*position: fixed;*/
  /*top: 40%;*/
  /*opacity: 0.75;*/
  display: none;
  text-align: center;
}

#autoSaveMessage {
    display: none;
    position: fixed;
    bottom: 0px;
    right: 0px;
    max-width: 30%;
    background-color: #5555FF;
    text-align: center;
    font-size: large;
}

div.notificationMessages {
    background-color: #EEEEEE;
    border: 0.5px solid black;
}

pre.notificationMessages {
    overflow-x: auto;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
 }

/******************************************************************************************************
 ********************   Participant editing table specific stylings   *********************************
 *****************************************************************************************************/
th.userTableHeader {
    background-color: #CCCCCC;
}

#attendeeTable th {
    /*text-align: left;*/
    /*border: none;*/
}

#attendeeTable td {
    text-align: center;
    /*border: none;*/
    padding-left: 5px;
    padding-right: 5px;
}

#attendeeTable tr {
    border: 1px solid black;
}

/******************************************************************************************************
 ****************************   Event approval specific stylings   ************************************
 *****************************************************************************************************/
.tableDistribute {
    display: flex;
    /*justify-content: space-between;*/
    align-items: flex-start;
    align-content: flex-start;
}

/******************************************************************************************************
 ****************************   Image information specific stylings   *********************************
 *****************************************************************************************************/
div.image {
    float: left;
    clear: both;
    border-bottom: 2px solid black;
    margin-bottom: 20px;
}

div.image div.image {
    float: none;
    border: none;
}

img.image {
    max-width: 500px;
    float: left;
}

textarea.image {
    width: 100%;
    height: 75px;
    float: left;
    clear: both;
}

label.image {
    float: left;
    clear: right;
    font-weight: bold;
}

input[type="button"].image {
    float: left;
    clear: both;
}