html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: black;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 24px;
}

h1 {
  font-size: 2em;
}

span {
  font-size: 1.6em;
}

button {
  font-size: 2em;
  margin: 5px;
  padding: 5px;
}

#eventList {
  display: none;
}

.buttonBar {
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
  /* background-color: rgba(0,0,0,.7); */
  display: flex;
  justify-content: space-between;
  height: 10vh;
}

.navButton {
  flex: .5;
  width: fit-content;
  background-color: #f7ce2f;
  color: #000;
  font-size: 1.5em;
  text-align: center;
  box-shadow: 0px 2px 9px #888;
  padding: 30px 0;
  position: relative;
  overflow: hidden;
  min-height: 100%;
}

.navButton.attention:after {
  animation: sheen 1.4s 0s alternate infinite ease-in-out;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.5) 50%, transparent);
  transform: rotateZ(60deg) translate(-1em, 4em);
}

@keyframes sheen {
  100% {
    transform: rotateZ(60deg) translate(0, -4em);
  }
}

.menuBar {
  position: relative;
  left: 33%;
  bottom:37%;
  width: 33%;
  background-color: #f7ce2f;
}

.menuButton {
  background-color: #f7ce2f;
  color: #000;
  font-size: 1.25em;
  text-align: center;
  box-shadow: 0px 2px 9px #888;
  padding: 20px 0;
  word-wrap: break-word;
}



.container {
  display: flex;
  background-color: #000;
  color: #f7ce2f;
  width: 100%;
  justify-content: space-around;
  align-items: top;
  flex-wrap: wrap;
  /* min-height: 100%; */

}

/* .container::after {
  display: block;
  height: 200px;
  content: " ";
} */

.border {
  border: 1px solid;
  border-radius: 25px;
  padding: 25px;
  margin: 15px 15px;
  min-height: 100%;
  width: 100%;
}

#filterBar {
  display: flex;
  margin: 0;
  width: 100%;
  overflow: scroll;
}

.filterButton {
  width: fit-content;
  border: 1px solid;
  border-radius: 25px;
  padding: 25px;
  margin: 10px;
  font-size: .95em;
}

.active {
  background-color: rgba(247,206,47, 0.3);
}

#results {
  display: flex;
  flex-direction: column;
  justify-content:space-around;
  align-items: stretch;
  min-height: 40vh;
}

.eventBox {
  position: relative;
  margin: 20px;
  padding: 10px;
  min-height: 10vh;
  border-radius: 25px 50px 25px 25px;
  box-shadow: -2px 2px 9px #f7ce2f;
}

.eventBoxname {
  font-size: 1.25em;
}

.eventBoxdate {
  font-size: 0.75em;
  margin: 0 25px;
}

.teamStatusBox, .fundingStatusBox, .teamChatBox {
  position: relative;
  font-size: 1em;
  padding: 15px;
  margin: 10px 25px;
  width: fit-content;
  border: 1px solid red;
  border-radius: 25px;
  box-shadow: -2px 2px 2px red;
  color: #f7ce2f;
  background-color: #303030;
}

.teamStatusBox.teamFull, .fundingStatusBox.funded, .teamStatusBox.isMember {
  border-color: lime;
  box-shadow: -2px 2px 2px lime;
}

.teamStatusBox.queuesFull {
  border-color: yellow;
  box-shadow: -2px 2px 2px yellow;
}

.teamStatusBox.activeQueue, .teamStatusBox.isInQueue {
  border-color: yellow;
  box-shadow: -2px 2px 2px yellow;
}

.field {
  width:50%;
  font-size: 1em;
}

.half {
  width:45%;
}

.notes {
  height: 80px;
}

.label {
  width: 100%;
  margin: 15px 0px;
  padding: 5px;
  font-size: 2em;
  text-align: left;
  color: #666666;
  border: 1px solid grey;
}

.creationDetails {
  font-size: .7em;
}

.fieldLabel {
  font-size: 1.25em
}

.team {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
}

.roleBox {
  font-size: 1.5em;
  margin: 10px;
  padding: 20px;
  text-align: center;
  background-color: #555;
  opacity: .6;
  color: #FFF;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.roleBox.queueRole {
  box-shadow: -2px 2px 9px yellow;
}

.roleBox.memberRole {
  box-shadow: -2px 2px 9px lime;
}

.role {
  flex: 1;
}

.roleRow {
  padding: 15px;
  text-align: center;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  flex-flow: wrap;
  width:100%;
}

.roleDetailsButton {
  /* width: fit-content; */
  font-size: .7em;
  padding: 15px;
  margin: 5px auto;
  border: 1px solid #f7ce2f;
  border-radius: 25px;
  box-shadow: -2px 2px 2px #f7ce2f;
}

.roleCounter {
  margin: 5px;
  width: 15px;
  height:15px;
  padding: 5px;
  background-color: red;
}

.roleCounter.filled {
  background-color: lime;
}

.roleCounter.queued {
  background-color: #f7ce2f;
}

.revChartContainer {
  display: flex;
  justify-content: space-between;
}

.revHeader {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: baseline;
}

.revShareSelect {
  font-size: 1.3em;
  padding: 14px;
  background-color: black;
  color: #f7ce2f;
}

.revenueChart {
  margin: 25px;
  width: 30vw;
  height: 30vw;
  border-radius: 50%;
  align-self: center;
}

.legendBox {
  margin: 25px;
  flex-grow: 1;
}

.legendItem {
  margin: 15px;
  font-size: 1.2em;
  text-align: right;
}

.rewardButtonBox {
  display: flex;
}

.rewardButton {
  bottom: 15px;
  border: 2px solid white;
  border-radius: 25px;
  padding: 15px;
  font-size: 1.5em;
  margin: 15px;
}

/*Sticky Header*/
.header-container {
  background-color: black;
  top: 0;
  height: 15vh;
  display: flex;
  justify-content: center;
}

.sticky-header {
  color: #f7ce2f;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-items: center;
  /* position: fixed; */
  top: 0;
  width: 336px;
  background: black;
  z-index: 99;
  font-size: 2rem;
  padding-left: 5px;
}

.h1__header {
  font-size: 2rem;
  align-self: center;
  margin: 0;
  padding-top: 10px;
}

.h2__header {
  font-size: 1rem;
  font-style: italic;
  margin: 0;
  display: flex;
  justify-content: flex-end;
  padding-right: 4px;
  color: #801C10;
}


/*Loading Page Customizations*/

.firebaseui-container {
  background-color: black;
}

#firebaseui-auth-container {
  display: flex;
  justify-content: center;
  margin: 10px;
}

.firebaseui-title {
  color:whitesmoke;
  font-size: .75rem;
}

.firebaseui-card-header {
  border: none;
}

.mdl-textfield__label.firebaseui-label {
  /* font-size: rem; */
  color:whitesmoke;
}

.firebaseui-textfield.mdl-textfield.mdl-js-textfield.mdl-textfield--floating-label.is-upgraded {
  font-size: 1rem;
}

.mdl-card.mdl-shadow--2dp.firebaseui-container.firebaseui-id-page-sign-in {
  box-shadow: none;
  border: none;
}

.mdl-card.mdl-shadow--2dp.firebaseui-container.firebaseui-id-page-sign-in > form,
.mdl-card.mdl-shadow--2dp.firebaseui-container.firebaseui-id-page-password-sign-in > form
{
  background-color: black;
  color: #f7ce2f;
  border-radius: 25px;
  border: 2px solid #f7ce2f;
  width:80vw;
  align-self: center;
    
}


/*Email input line*/
.firebaseui-input, .firebaseui-input-invalid, .firebaseui-id-email, mdl-textfield_input {
  color:whitesmoke;
}

.firebaseui-textfield.mdl-textfield .firebaseui-label::after {
  background-color: #f7ce2f;
}

/*Trouble signing in link*/
.firebaseui-id-secondary-link {
  color: whitesmoke;
}

/*TOS link*//*PP link*/
.firebaseui-tos-link, .firebaseui-pp-link {
  color: #f7ce2f;
}

/*Cancel button*/
.mdl-button--primary.mdl-button--primary{
  color: black;
  background-color: #f7ce2f;
  opacity: 0.50;
}


/*Next button*/
.mdl-button--raised.mdl-button--colored {
  background: #f7ce2f;
  color: black;
  font-size: .6rem;
  border-radius: 10px;
}
.mdl-button--raised.mdl-button--colored:hover, 
.mdl-button--raised.mdl-button--colored:active {
  opacity: .6;
  background: #f7ce2f;
}



.firebaseui-id-secondary-link.firebaseui-button.mdl-button.mdl-js-button.mdl-button--primary {
  font-size: .6rem;
  border-radius: 10px;
  background-color: #f7ce2f
}

.firebaseui-link:hover, .firebaseui-id-secondary-link {
  color:#f7ce2f;
}

.firebaseui-tos.firebaseui-tospp-full-message {
  font-size: .5rem;
  line-height:1.25;
}

.firebaseui-id-page-password-recovery, .firebaseui-text {
  background: black;
  color: white;
  font-size: .5rem;
  line-height:1.25;
}

.firebaseui-id-page-password-recovery {
  border-radius: 25px;
  border: 2px solid #f7ce2f;
}

 .mdl-textfield--floating-label.is-dirty, .mdl-textfield__label {
  color: white;
}

.firebaseui-tos-list {
  display:flex;
  justify-content: space-evenly;
  padding: 0;
}

/*Billing Name Info on Processing Payment*/

#form-container.border {
  display: flex;
  flex-direction: column;
}

#fname_input, #lname_input, #fname_input:focus, #lname_input:focus {
  padding: 16px;
  box-sizing: border-box;
  width:60%;
  margin-bottom: 5px;
  margin-left: 20%;
  font-size: 1rem;
  color: #a0a0a0;
  outline:none;
  font-family: Arial, Helvetica, sans-serif;
  background-color: white;
}

#fname_input::placeholder, #lname_input::placeholder {
  color: #a0a0a0;
}

#sq-card-number.field, 
#sq-expiration-date.field,
#sq-cvv.field,
#sq-postal-code.field {
  margin-left: 20%;
  width:60%;
}

.sqPay {
  color: whitesmoke;
  display:flex;
  flex-direction: column;
  justify-items: center;
  margin: 0 20%;
}

.sqPayImage {
  content: url('./images/payment+square+icon-1320186078492453375_128.png');
  display: block;
  width: 25%;
  margin: 0 auto;
}

.sqHeader {
  margin-bottom: .5em;
  font-size: 2.5em;
  margin-left: 20%;
}

#sq-creditcard.teamStatusBox.teamFull {
  margin-right: 20%;
  float: right;
  text-align: center;
  width: 150px;
}

.sqpptext {
  font-size: .85em;
  text-align: center;
}

.sqpplink {
  color: #f7ce2f;
}

/* Profile Section*/
#updateProfileButton {
  background-color: #f7ce2f;
  color: #000;
  font-size: 1.25em;
  text-align: center;
  box-shadow: 0px 2px 9px #888;
  border-radius: 25px;
  padding: 15px 10px;
  margin: 0;
}

.detailsPane_header {
  font-size: 1.35em;
  padding: 0 10px;
}

.eventviewerborder {
  padding: 0 20px;
}

.adjusteventbtn {
  background-color: #f7ce2f;
  color: #000;
  font-size: 1.25em;
  text-align: center;
  box-shadow: 0px 2px 9px #888;
  border-radius: 25px;
  padding: 15px 10px;
}

/*Create Tab Filters on EventList*/
.filterTab {
  border-radius: 10px 15px 0 0;
  padding: 5px;
  margin: 0;
  font-size: .7em;
  display: flex;
  text-align: center;
  align-items: center;
  box-shadow: -1px -1px 6px #f7ce2f inset;
  font-style: italic;
}

/*Add New Event Page*/
#addedit_eventBorder {
  padding: 10px;
  width: 90%;
}

.addedit_eventHeader {
  font-size: 1.25rem;
  padding: 0;
}

.addedit_eventLabels {
  font-size: .9rem;
}

#addedit_eventBorder .field {
  width: 98%;
  font-size: .9rem;
  display: flex;
  align-items: center;
}

#addedit_eventBorder .fieldLabel {
  font-size: 1rem;
}

#addedit_eventBorder .label {
  font-size: 1rem;
  border: 1px solid #f7ce2f;
  border-radius: 10px;
  color: #f7ce2f;
  opacity: .75;
  font-style: italic;
}

#addedit_eventBorder .label .creationDetails {
  font-size: 1rem;
  color: #f7ce2f;
  opacity: .75;
  font-style: italic;
}

#addedit_eventBorder hr {
  height: 1px;
  border-width: 0;
  color: #f7ce2f;
  background-color: #f7ce2f;
}

#addedit_eventBorder .revShareSelect {
  border: 1px solid #f7ce2f;
  border-radius: 10px;
  font-size: .75rem;
  margin-top: 5px;
}

#addedit_eventBorder .legendItem {
  font-size: .75rem;
}

#saveEvent, #deleteEvent, #addedit_eventBorder .roleDetailsButton {
  background: #f7ce2f;
  color: black;
  font-size: 1rem;
  border-radius: 10px;
}

@media(max-width:700px) {
  .team {
    display: flex;
    flex-direction: column;
  }

  .roleBox {
    font-size: 1.25em;
    padding: 5px;
  }

  .roleRow {
    padding: 5px;
  }

  .roleDetailsButton {
    padding: 10px;
  }
}

@media(min-width: 1000px) {
  .mdl-button:hover {
    opacity: 0.9;
  }
}