html {
}

body {
    background:         black;
    box-sizing:         border-box;
    margin:             auto;
    position:           relative;
}

input {
    display:        inline-block;
}
 
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

label {
    vertical-align:         top;
}

#adminContent {
    background:             gray;
    box-sizing:             border-box;
    display:                block;
    left:                   0;
    position:               absolute;
    top:                    0;
    width:                  100%;
}

#adminIcon {
    box-sizing:             border-box;
    color:                  gray;
    cursor:                 pointer;
    position:               absolute;
    right:                  0.5%;
    text-align:             center;
    height:                 100%;
    top:                    -5%;
    width:                  4%;
    z-index:                100
}

#adminMenu {
    background:             black;
    border:                 2px solid yellow;
    box-sizing:             border-box;
    height:                 fit-content;
    padding:                0;
    position:               absolute;
    right:                  1%;
    top:                    25%;
    transition:             ease 0.5s;
    visibility:             hidden;
    z-index:                100;
}

#bandDescription {
    box-sizing:             border-box;
    color:                  white;
    text-align:             justify;
}

#bandHeader {
    box-sizing:             border-box;
    height:                 20%;
    padding:                1%;
}

#bandPicture {
    box-sizing:             border-box;
    display:                flex;
    height:                 40%;
    justify-content:        space-around;
    position:               relative;
    width:                  100%;
}

#bandPictureImage {
    position:               absolute;
    max-width:              100%;
    max-height:             100%;
}

#bandPhoto {
    float:                  left; 
    max-height:             100%;
    width:                  35%;
}

#banner {
    box-sizing:             border-box;
    display:                none;
    height:                 12%;
    justify-content:        space-between;
    position:               relative;
}

#bannerImageLeft {
}

#bannerImageRight {
}

#bannerName {
    height:                 75%;
    left:                   15%;
    position:               absolute;
    top:                    0;
    width:                  70%;
}

#buttonDiv {
    border:                 1px solid white;
    box-sizing:             border-box;
    height:                 6%;
    padding:                1%;
    width:                  100%;
}

#calendar {
    background-color:       white;
    display:                none;
    position:               relative;
}

#calendarButtonDiv {
    height:                 5%;
}

#cancelButton {
    float:                  left;
}

#changeEventDescription {
    width:                  100%;
}

#calendarEventDescription {
    box-sizing:             border-box;
    width:                  100%;
}

#calendarEventOwner {
}

#calendarEventTitleDiv {
    box-sizing:             border-box;
    display:                block;
    width:                  100%;
}

#calendarInputArea {
    box-sizing:             border-box;
}

#changePwdButton {
    float:                  right;
}

#changePwdEmailInput {
    width:                  100%;
}

#changePwdErrorMsg {
    color:                  red;
    font-weight:            bold;
}

#closeButton {
    float:                  left;
}

#confirmEventChangeDescription {
    width:                  100%;
    vertical-align:         top;
}

#confirmEventDeletion {
    display:                none;
}

#dialog-calendarDialog {
    display:                none;
}

#dialog-userDialog {
    display:                none;
}

#documentBody {
    overflow-y:             scroll;
}

#emailDiv {
    border:                 1px solid gray;
    box-sizing:             border-box;
}

#Event1 {
    box-sizing:             border-box;
    height:                 10%;
    padding:                2%;
}

#Event1Image {
    float:                  left;
    max-height:             100%;
}

#eventDescription {
    box-sizing:             border-box;
    width:                  100%;
}

#eventOwner {
    float:                  left;
}

#eventTitle {
    box-sizing:             border-box;
    width:                  65%;
}

#fc-dom-1 {
    text-align:             center;
    width:                  100%;
}

#functionRow    {
    align-items:            center;
    bottom:                 5%;
    box-sizing:             border-box;
    display:                flex;
    height:                 25%;
    left:                   15%;
    position:               absolute;
    width:                  70%;
}

#gallery {
    box-sizing:             border-box;
    height:                 95%;
    overflow:               hidden;
    /*
    overflow-y:             scroll;
    */
    position:               relative;
}

#galleryLink {
}

#gigGuide {
    box-sizing:             border-box;
    height:                 100%;
    overflow-y:             scroll;
    position:               relative;
}

#greeting {
    color:                  white;
    position:               absolute;
    text-align:             center;
    width:                  100%;
}

#greetingTextDiv {
    bottom:                 12%;
    box-sizing:             border-box;
    color:                  white;
    position:               absolute;
    text-align:             center;
    width:                  100%;
}

#mainBody {
    border:                 1px solid white;
    box-sizing:             border-box;
    height:                 85%;
    /*
    overflow-y:             scroll;
    */
    padding:                1%;
    position:               relative;
    top:                    -1px;
}

#mainBodyBottomSection {
    border:                 1px solid white;
    box-sizing:             border-box;
    padding:                1%;
}

#mainMenu {
    box-sizing:             border-box;
    clear:                  both;
    display:                flex;
    height:                 3%;
    justify-content:        flex-start;
    position:               relative;
}

#userEmailInput,
#existingPasswordDiv,
#passwordDiv, 
#passwordConfirmDiv,
#userDisplayNameInput {
    align-items:            center;
    border:                 2px solid gray;
    box-sizing:             border-box;
    display:                flex;
    position:               relative;
}

#loginContinueButtonDiv {
    display:                none;
    position:               absolute;
}

#loginEmailInput {
    position:               relative;
    width:                  100%;
}

#loginEmailMobileLabel {
    float:                  left;
    height:                 100%;
    width:                  14%;
}

#loginEmailMobileInput {
    float:                  right;
    height:                 100%;
    width:                  85%;
}

#loginPwdErrorMsg {
    color:              red;
    font-weight:        bold;
}

#loginPwdDiv {
    align-items:    center;
    border:         1px solid gray;
    box-sizing:     border-box;
    display:        flex;
    position:       relative;
    width:          75%;
}

#loginScreen {
    align-items:            center;
    background-color:       powderblue;
    box-sizing:             border-box;
    display:                none;
    height:                 100%;
    justify-content:        center;
    opacity:                90%;
    padding:                5%;
    position:               absolute;
    width:                  100%;
    z-index:                100;
}

#loginTitle {
    color:                  black;
    top:                    5%;
    position:               absolute;
    text-align:             center;
    width:                  100%;
}

#mediaDisplayArea {
    align-items:            center;
    box-sizing:             border-box;
    display:                flex;
    flex-wrap:              wrap;
    height:                 100%;
    justify-content:        space-evenly;
    overflow-y:             scroll;
    padding-top:            1%;
    position:               relative;
    z-index:                10;
}

#musicPageIntro {
    box-sizing:             border-box;
    text-align:             justify;
}

#newButtonDiv {
    height:                 100%;
    margin-top:             1%;
}

#newEventButton {
    font-weight:            bold;
}

#newGigsHeader,
#previousGigsHeader {
    background:             #333;
    box-sizing:             border-box;
    color:                  white;
    font-weight:            bold;
    height:                 3%;
    padding:                0.25%;
    text-align:             center;
    width:                  100%;
}

#nextButton {
    cursor:                 pointer;
    position:               absolute;
    text-align:             center;
}

#prevButton {
    cursor:                 pointer;
    position:               absolute;
    text-align:             center;
}

#opening {
    box-sizing:             border-box;
    color:                  greenyellow;
    float:                  right;
    padding:                2%;
    position:               relative;
    text-align:             center;
    width:                  65%;
}

#ownerLabel {
    float:                  left;
}

#passwordEyeImage1,
#passwordEyeImage2 {
    position:               absolute;
    right:                  1%;
}

#registerButton {
    float:                  right;
}

#saveButton {
    float:                  right;
}

#serverResponseDiv {
    box-sizing:             border-box;
    color:                  red;
    height:                 25%;
    padding:                1% 2%;
}

#socialMediaIcons {
    box-sizing:             border-box;
    display:                flex;
    flex-wrap:              wrap;
    float:                  left;
    height:                 40%;
    position:               absolute;
    width:                  10%;
    justify-content:        space-between;
    z-index:                10;
}

#socialMediaLogos {
    display:                flex;
    height:                 100%;
    width:                  100%;
    justify-content:        space-between;
}

#theBand {
    box-sizing:             border-box;
    height:                 100%;
    overflow-y:             scroll;
    position:               relative;
    width:                  100%;
}

#UnderConstructionImage {
    width:                  25%;
}

#upperHeader {
    box-sizing:             border-box;
    color:                  white;
    display:                block;
    /*
    height:                 5%;
    */
    position:               relative;
    text-align:             center;
    width:                  100%;
}

#userDetails {
    box-sizing:             border-box;
    border:                 none;
    height:                 75%;
}

#userDisplayNameDiv {
    box-sizing:             border-box;
    border:                 none;
    height:                 50%;
    padding:                0.50%;
}

#userEmailDiv,
#userPwdConfirmDiv,
#userPwdDiv,
#userExistingPwdDiv {
    box-sizing:             border-box;
    border:                 none;
}

#userEmailEntry {
    box-sizing:             border-box;
}

#userEmailInput {
    box-sizing:             border-box;
}

#userEmailLable {
    box-sizing:             border-box;
    border:                 none;
    text-align:             left;
    width:                  25%;
}

#userInputArea {
    box-sizing:             border-box;
    display:                none;
    width:                  100%;
}

#userInputArea label {
    box-sizing:             border-box;
    width:                  33%;
}

#userInstructions {
    text-align:             justify;
}

#userMessageDiv {
    box-sizing:             border-box;
    color:                  black;
    height:                 25%;
    text-align:             justify;
}

#userPwdLableDiv {
    box-sizing:             border-box;
    border:                 none;
    display:                flex;
    height:                 50%;
    padding:                0.5%;
}

#userPwdInputDiv {
    box-sizing:             border-box;
    text-align:             left;
}

#userPwdLableDiv {
    box-sizing:             border-box;
    border:                 none;
    text-align:             left;
    width:                  25%;
}

#webContent {
    box-sizing:         border-box;
    display:            block;
    height:             100%;
    padding:            1%;
    position:           relative;
    width:              100%;
}

#whatsNew {
    box-sizing:         border-box;
    clear:              both;
    display:            block;
    height:             60%;
    overflow-y:         scroll;
    position:           relative;
    width:              100%;
}

.bannerImage {
    max-height:         100%;
    max-width:          15%;
}

.buttonLeft {
    float:              left;
}

.buttonMiddle {
    float:              right;
}

.buttonRight {
    float:              right;
}

.calendarInput {
    box-sizing:         border-box;
    width:              100%;
}

.calendarLable {
    box-sizing:             border-box;
    clear:                  both;
    float:                  left;
    width:                  25%;
}

.dateEntry {
}

.eventAlbum {
    aspect-ratio:           1 / 1;
    border:                 1px solid white;
    box-sizing:             border-box;
    cursor:                 pointer;
    display:                flex;
    justify-content:        space-around;
    position:               relative;
}

.fc .fc-daygrid-day.fc-day-today {
    background-color:       gray;
}

.fc-button {
    line-height:            0;
}

.fc-button-group {
    height:                 100%;
}

.fc-button-primary {
    height:                 100%;
}

.fc-myExternalLink-button {
    line-height:            0;
}

.fc-theme-standard td {
    border:                 1px solid gray;
}

.fc .fc-toolbar.fc-header-toolbar {
    height:                 2.0em;
    margin-bottom:          0.5em;
}

.fc-toolbar-chunk {
    align-items:            center;
    display:                flex;
    height:                 100%;
    position:               relative;
}

.fc .fc-toolbar-title {
    font-size:              1.75em;
}

.frontPageMenuElement {
    align-items:            center;
    border:                 1px solid white;
    box-sizing:             border-box;
    color:                  #17ff17;
    cursor:                 pointer;
    display:                flex;
    justify-content:        center;
    text-align:             center;
    width:                  15.8%;
}

.gigVideo {
    box-sizing:         border-box;
    /*
    max-height:         90%;
    */
    max-width:          95%;
    position:           relative;
    top:                8%;
}

.newGigGuideEntry,
.previousGigGuideEntry {
    border:                 1px solid white;
    box-sizing:             border-box;
    padding:                2%;
    position:               relative;
    width:                  50%;
}

.header1 {
    color:                  green;
    text-align:             center;          
}

.imageDiv {
    box-sizing:             border-box;   
    align-self:             center;
    display:                flex;
    min-width:              50%;
    opacity:                1;
    position:               relative;
    transition:             transform 0.75s, opacity 0.25s; 
}

.leftButton {
    left:                   4%;
    position:               absolute;
}

.navigationLink {
    display:                inline-block;
}

.newEventBody {
    box-sizing:             border-box;
    color:                  white;
    float:                  right;
    padding:                0 2%;
    text-align:             justify;
    width:                  85%;
}

.newEventImage {
    box-sizing:             border-box;
    float:                  left;
    max-width:              15%;
}

.newEventTitle {
    box-sizing:             border-box;
    color:                  white;
    font-weight:            bold;
    padding:                0.5%;
    position:               relative;
    right:                  0;
    text-align:             center;
    top:                    0;
    width:                  100%;
}

.photoAlbum {
    aspect-ratio:           1 / 1.25;
    border:                 1px solid white;
    box-sizing:             border-box;
    display:                flex;
    height:                 75%;
    justify-content:        space-around;
    width:                  45%;
    position:               relative;
}

.photoThumbnail {
    box-sizing:             border-box;
    max-height:             80%;
    max-width:              100%;
    padding:                1%;
}

.passwordEye {
    max-height:         65%;
    max-width:          10%;
    position:           absolute;
    right:              1%;
}

.pressRelease {
    border:                 1px solid white;
    box-sizing:             border-box;
    max-height:             20%;
    max-width:              33%;
    padding:                1%;
}

.pressReleaseImg {
    box-sizing:             border-box;
    cursor:                 pointer;
    max-height:             85%;
    max-width:              100%;
}

.regErrorMsg {
    color:                  red;
    font-weight:            bold;
}

.socialMediaLogo {
    cursor:                 pointer;
    max-height:             12%;
}

.songTitle {
    align-items:            center;
    box-sizing:             border-box;
    display:                flex;
}

.trackNumber {
    align-items:            center;
    box-sizing:             border-box;
    display:                flex;
}

.ui-dialog-buttonset {
    width:              100%;
}

.ui-dialog-content {
    box-sizing:         border-box;
}

.ui-dialog-title {
}

.ui-widget-overlay {
    background:         #090909;
    opacity:            0.9;
}

.userErrorMsg {
    color:              red;
    font-weight:        bold;
}

.userInputField {
    border:             none;
    box-sizing:         border-box;
    padding-left:       2%;
    width:              100%;
}

.userRegistrationLable {
    box-sizing:         border-box;
    font-weight:        bold;
}

.videoAlbum {
    /*
    aspect-ratio:       1 / 1.25;
    */
    border:             1px solid white;
    box-sizing:         border-box;
    display:            flex;
    height:             75%;
    justify-content:    space-around;
    padding:            1%;
    position:           relative;
    width:              45%;
}

.whatsNewEvent {
    border:             1px solid white;
    box-sizing:         border-box;
    overflow:           hidden;
    padding:            1%;
    position:           relative;
}