@font-face {
  font-family: 'main-font';
  src: url("font/miso-regular.ttf");
}

@font-face {
  font-family: 'title-font';
  src: url("font/KCIllHand.otf");
}

:root {
  --form-border: rgb(85,177,201);
  --form-background: rgba(85,177,201, .2);
  --band-color: rgb(30,142,149);
  --attention-color: rgb(196, 64, 64);
  --disabled-button-color: rgb(212,212,212);
}


.title-font {
  font-family: 'title-font';
}

.main-font {
  font-family: 'main-font';
}

/* Mobile */
@media only screen and (max-device-width: 480px) {
  :root {
    --title-height: 6rem;
    --content-top: 10.5rem;
  }
  html {
    font-size: 34px;
  }
  body {
    font-size: 43px;
  }
  .page-width {
    width: 100%;
  }
  #title-wakefield {
    margin-top: .09em;
  }
}
/* Non-Mobile */
@media only screen and (min-device-width: 480px) {
  :root {
    --title-height: 6rem;
    --content-top: 10rem;
  }
  html {
    font-size: 24px;
  }
  .page-width {
    max-width: 550px;
  }
  #title-wakefield {
    margin-top: .02em;
  }
}

body {
  font-family: 'main-font';
  /*background-color: rgb(210,255,210);*/
  background-color: white;
  color: black;
  text-align: center;
  overflow-y: scroll;
}

body a {
  color: rgb(98, 98, 196);
}

button {
  border: 2px solid rgb(32,32,148);
  border-radius: .2em;
  color: black;
  background-color: rgb(193,197,227);
  cursor: pointer;
}

button:disabled {
  background-color: var(--disabled-button-color);
  cursor: default;
  opacity: .5;
}

button:hover {
  background-color: rgb(195,241,252);
}

button:disabled:hover {
  background-color: var(--disabled-button-color);
}

.inline-block {
  display: inline-block;
  margin-right: .5em;
  margin-left: .5em;
  margin-bottom: 0;
}

#fullback {
  position: fixed;
  top:0;
  left: 0; right: 0; width: 100%; height: 100%;
  /*opacity: .25;*/
  /*background-image: url("back-tile.png");*/
}

#fullpage {
  overflow: hidden;
}

#menu {
  position: absolute;
  top: 0; height: var(--title-height);
  left: 0; width: 100%;
  border-top: solid 1em var(--band-color);
}

#menu-identifier {
  font-size: .9em;
  margin-top: .3em;
}

#menu-identifier a {
  pointer-events: all;
  cursor: pointer;
  color: rgb(196,196,245);
}

.main-title {
  color: rgb(240, 198, 85);
  text-shadow: 2px 2px 2px var(--band-color), -2px -2px 2px var(--band-color), 2px -2px 2px var(--band-color), -2px 2px 2px var(--band-color);
}

#title-wakefield {
  
  font-size: .95em;
  line-height: 78%;
}

#title-porchfest {
  font-size: .92em;
  line-height: 78%;
}

.main-subtitle {
  font-size: 2em;
  margin-top: .3em;
  margin-bottom: 0;
}

.duck-img {
  margin-top: 0;
  padding-top: 0;
  width: 8.04em;
  height: 7em;
  background-image: url('img/Duck-2nd-texture.png');
  background-size: 107% 123%;
  background-position: center;
  background-repeat: no-repeat;
  display: inline-block;
}

.center-container {
  position: absolute;
  width: 100%;
  left: 0; right: 0; margin-left: auto; margin-right:auto;
}

#menu .logo {
  width: 28rem;
  position: absolute;
  font-size: 4rem;
  left: 0; right: 0; margin-left: auto; margin-right:auto;
  height: 100%;
  line-height: 80%;
  text-align: left;
  user-select: none;
  -webkit-user-select:none;
  text-align: center;
}

#menu .logo .img {
  display: inline-block;
  vertical-align: top;
}

#menu .logo .title-img {
  height: 100%;
}

#menu #items {
  background-color: var(--band-color);
  color: white;
  position: absolute;
  left:0; right:0; margin-left: auto; margin-right: auto;
  top: var(--title-height);
  padding-bottom: .3rem;
  white-space: nowrap;
}

#menu .item {
  display:inline-block;
  font-size: 1.7rem;
  user-select: none;
  -webkit-user-select:none;
  cursor: pointer;
  margin-right: .3em;
  margin-left: .3em;

}

#menu .item:hover {
  color: rgb(255, 255, 189);
}

.selected_menu_item {
  text-decoration: underline;
  color: rgb(255, 242, 255);
  pointer-events:none;
}

#page {
  position: absolute;
  top: var(--content-top);
}

#page-content {
  margin-left: .7em; margin-right: .7em;
  /* background-color: rgba(0,0,0,.2); */
}

.title {
  text-align: center;
  color: white;
  font-size: 6rem;
  margin-top: 2rem;
  line-height: 100%;
}

.subtitle {
  text-align: center;
  font-size: 3rem;
  margin: .5rem;
}

.sa {
  font-size: 2rem;
}

.notify {
  margin: 1em;
}

.form {
  margin-top: 1rem;
  left: 0; right: 0;
  margin-left: auto; margin-right: auto;
  width: 90%;
  text-align:center;  
}

.form-back {
  background-color: var(--form-background);
  border: 2px solid var(--form-border);
  border-radius: .5rem;
  overflow: hidden;
}

.form .title {
  color: black;
  text-align: center;
  font-size: 1.5rem;
  margin: .5rem;
}

.form .description {
  text-align: left;
  margin: .5em;
}

.form .description-long {
  font-size: .85em;
}

.form-input {
  color: black;
  font-size: 1.4rem;
  margin-top: .1rem;
  width: 100%;
}

.field-changed {
  border: 2px solid rgb(128,196,196);
  border-radius: .5rem;
  background-color: rgba(64,196,196,.2);
}

.form-input::placeholder {
  color: rgb(210,210,210);
}

.form-button {
  font-size: 1.4rem;
  margin-top: .7rem;
  margin-bottom: .4rem;
}

.form-submit-msg {
  font-size: .9em;
  margin-bottom: .3em;
}

.form-cancel-submit {
  float: left;
  margin-left: .3em;
}

.form-reset {
  float: right;
  margin-right: .3em;
}

.error-color {
  color: var(--attention-color);
  font-weight: bold;
}

.success-color {
  color: rgb(32, 124, 32);
}

.disappear {
  animation: field-saved 2s linear;
  -webkit-animation: field-saved 2s linear;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

@keyframes field-saved {
  0% { opacity: 1;}
  75% { opacity: 1;}
  100% { opacity: 0;}
}
@-webkit-keyframes field-saved {
  0% { opacity: 1;}
  75% { opacity: 1;}
  100% { opacity: 0;}
}

.main-banner-msg {
  color: red;
  margin-top: .7rem;
  border: 1px solid red;
  padding-left: .3rem;
  padding-right: .3rem;
  text-align: left;
}

.message {
  margin-top: .5rem;
  color: rgb(196,128,128);
  border: 1px solid rgba(196,128,128,.5);
}

.form form {
  margin-bottom: 0;
}

.form-value {
/*
  border: solid 1px rgba(255,255,255,.2);
  border-radius: .5rem;
*/
  width: 96%;
  left:0; right: 0; margin-left: auto; margin-right: auto;
  padding: .4rem;
  text-align: left;
}

.form-value .label {
  font-weight: bold;
}

.form-value input[type='text'], .form-value input[type='tel'], .form-value select {
  border-radius: .5rem;
  background-color: rgba(255,255,255,.8);
  padding-left: .2em;
  border: 1px solid black;
}

.form-value .small-select {
  font-size: 1em;
  padding-top: .1em;
  padding-bottom: .1em;
  border-radius: .4em;
}

.form-value select[type='time_select'] {
  width: 9rem;
}

.form-value textarea {
  margin-top: .1rem;
  font-size: 1.2rem;
  border-radius: .5rem;
  background-color: rgba(255,255,255,.8);
  padding-left: .2em;
  font-family: 'main-font';
  height: 10rem;
  resize: none;
}

.form-value ::placeholder {
  color: rgb(192, 192, 192);
}

.form-value input[type='text']:disabled {
  background-color:rgb(212,212,212);
}

.form-value input[type='checkbox'] {
  width: 1.5rem;
  height: 1.5rem;
}

.form-value .checkbox-label {
  font-size: 1.5rem;
  margin-left: .3em;
  vertical-align: text-bottom;
  user-select: none;
  -webkit-user-select: none;
}

.form-value .checkbox-wrapper {
  display: flex;
  align-items: center;
}

.form-value .multi-choice-checkbox {
  width: 1.2rem;
  height: 1.2rem;
}

.form-value .multi-choice-label {
  font-size: 1.2rem;
  margin-left: .3em;
  vertical-align: middle;
  user-select: none;
  -webkit-user-select: none;
}

.form-value .multi-select-columns-1 {
  margin-left: 1em;
}

.help-text {
  font-size: .8em;
  margin-left: .5em;
}


.form-value .msg {
  font-size: .9em;
  margin-left: 1em;
}

.form-value err {
  color: var(--attention-color);
}

.tabset {
  text-align:left;
  /* background-color: red; */
}

.tabset .tab {
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  border-right: 2px solid var(--form-border);
  border-bottom: 2px solid var(--form-border);
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: -5px;
  background-color: rgba(0,0,0,.05);
  color: rgb(96, 96, 96);
}

.tabset .tab:hover {
  background-color: rgba(0,0,0,.1);
  color:black;
}

.tabset .selected {
  border-bottom: none;
  background: none;
  cursor: default;
  color: black;
  pointer-events: none;
}

#footer {
  text-align: center;
  font-size: 1em;
}

.footer-cell {
  text-align: left;
  display:inline-block;
  vertical-align:top;
  margin-left: .1em;
  margin-right: .1em;
}

.footer-cell-divider {
  width: 0px;
  border-left: 1px solid rgb(196,196,196);
  height: 4.5em;
}

.pop-back {
  display: none;
  position: fixed;
  left: 0; top:0; bottom:0; right:0;
  background-color:rgba(0,0,0,.8);
  pointer-events: all;
}

.pop-panel {
  position: absolute;
  top: 10rem;
  left: 0; right: 0; margin-left: auto; margin-right: auto;
}

.popup {
  position: absolute;
  width: 74%;
  background-color: white;
  left: 0; right: 0; margin-left: auto; margin-right: auto;
  border-radius: .3em;
  overflow: hidden;
  padding: 1em;
}

.pop-title {
  font-size: 1.6rem;
  margin-bottom: .5em;
}

.band-link {
  font-size: .9em;
  border-radius: .3em !important;
}

.upload-file {
  font-size: 1em;
}

.img-display {
  width: 80%;
  border: 1px solid black;
  border-radius: .6em;
  margin: .3em;
}

.prop-table-frame {
  background-color: var(--band-color);
  border: 1px solid black;
  margin-top: 1rem;
  padding-top: .2rem;
}

.prop-table-frame .title {
  font-size: 2rem;
  color: white;
  text-shadow: 1px 1px 0 #404040, -1px -1px 0 #404040, 1px -1px 0 #404040, -1px 1px 0 #404040;
  margin-top: 0;
}

.prop-table-frame button {
  font-size: 1.2rem;
  margin-top: .5rem;
  margin-bottom: .5rem;
  margin-left: 1rem;
  margin-right: 1rem;
}

/* Master Table used in registrations.html */
.master-table {
  margin-top: .4rem;
  border: 1px solid #505050;
}

.prop-table {
  padding-top: .25rem;
  padding-bottom: .25rem;
  border-spacing: 0;
  font-size: 1em;
  background-color: white;
  width: 100%;
}

.prop-table tbody tr:nth-child(odd) {
  background-color: #FBFBFB;
}
.prop-table tbody tr:nth-child(even) {
  background-color: #EFEFEF;
}

.prop-table td {
  padding-left: .5rem;
  padding-right: .5rem;
}

.prop-table .key {
  font-size: .9em;
}

.prop-table .value {
  font-weight: bold;
}

.prop-table .value-note {
  margin-left: 1em;
  font-weight: normal;
  font-size: .8em;
  color: rgb(0,100,100);
  vertical-align: top;
}

#upload_audition {
  text-align: left;
  margin-top: 1rem;
  margin-left: 1rem;
  margin-right: 1rem;
  padding: .5rem;

  background-color:rgb(245,245,245);
  border: 1px solid black;
}

input[type='file'] {
  /* hides the No File Selected -- Use a label-for each time*/
  display: none;
  margin-top:1em;
}
.upload-file-label {
  border: 2px solid black;
  background-color: white;
  border-radius: .2em;
  padding-left: .5em;
  padding-right: .5em;
  cursor: pointer;
  font-size: 1.3em;
}

#kick-off-img {
  margin-top: .5em; 
  margin-bottom: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: .3em;
  border: 1px solid rgb(190, 190, 0);
  box-shadow: 0 0 .5em 0 rgba(90, 90, 0, 0.5);
}