html {
    height: -webkit-fill-available;
    --distance: 10rem;
    overscroll-behavior: none;
}

body {
    overscroll-behavior: none;
    background-color: bg-black;
    min-height: 100vh;
    font-family: 'Raleway', sans-serif;
    font-weight: 100;
    height: 100%;
}


/* LOGIN PAGE */
/* this what gives the login page the backgound image */
/* USELESS AND BROKE THE LAYOUT */
/* .login-body{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    align-content: center;
    min-height: 100vh;
    display: flex;
    align-items: center;
} */
/* END LOGIN PAGE */

main {
    height: 100vh;
    height: -webkit-fill-available;
    max-height: 100vh;
    overflow-x: auto;
    overflow-y: hidden;
}

/* Works on Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #442B48 #9BD1E5;
  }
  
  /* Works on Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 12px;
  }
  
  *::-webkit-scrollbar-track {
    background: #5C95FF;
  }
  
  *::-webkit-scrollbar-thumb {
    background-color: #442B48;
    border-radius: 20px;
    border: 3px solid #9BD1E5;
  }

.form-label {
    margin-top: 15px;
}


.centered_container {
    align-content: center;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.scrollable-form {
    max-height: 75vh;
    overflow-y:auto;
}

.modal-form {
    justify-content: left;
}


/* EVENT CARDS CSS */
.form-text {
    text-align: left;
}
/* END EVENT CARDS CSS */


/* Bottom-Right Floating Buttons ( +, ME) */
div.fixedPLUS {
    position: fixed;
    bottom: 80px;
    right: 24px;
    width: 48px;
    height: 48px;
}

div.fixedME {
    position: fixed;
    bottom: 16px;
    right: 24px;
    width: 48px;
    height: 48px;
}

/* END Bottom-Right Floating Buttons */


.bi-info-circle-dark {
    background-color: grey;
}


/* Tooltips for Creators */
.location-tooltip-div, .budget-tooltip-div, .event-card-budget-tooltip-div, .name-tooltip-div, .event-card-description-tooltip-div, .event-card-positions-tooltip-div, .event-card-updates-tooltip-div{
    position: relative;
    display: inline-block;
}

.location-tooltip, .budget-tooltip, .event-card-budget-tooltip, .name-tooltip, .event-card-description-tooltip, .event-card-updates-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    background-color: #333;
    color: white;
    padding: 10px;
    border-radius: 5px;
    z-index: 1;
    transition: opacity 0.3s ease-in-out;
    top: 100%;
    left: 900%;
    transform: translateX(-80%);
    white-space: nowrap;
    font-size: 0.8em;
}

/* Same thing but justified more to the right */
.event-card-positions-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    background-color: #333;
    color: white;
    padding: 10px;
    border-radius: 5px;
    z-index: 1;
    transition: opacity 0.3s ease-in-out;
    top: 100%;
    left: 900%;
    transform: translateX(-40%);
    white-space: nowrap;
    font-size: 0.8em;
}


.location-tooltip-div:hover .location-tooltip {
    visibility: visible;
    opacity: 1;
}

.budget-tooltip-div:hover .budget-tooltip {
    visibility: visible;
    opacity: 1;
}

.event-card-description-tooltip-div:hover .event-card-description-tooltip {
    visibility: visible;
    opacity: 1;
}

.event-card-positions-tooltip-div:hover .event-card-positions-tooltip {
    visibility: visible;
    opacity: 1;
}

.event-card-updates-tooltip-div:hover .event-card-updates-tooltip {
    visibility: visible;
    opacity: 1;
}

.event-card-budget-tooltip-div:hover .event-card-budget-tooltip {
    visibility: visible;
    opacity: 1;
}

.name-tooltip-div:hover .name-tooltip {
    visibility: visible;
    opacity: 1;
}
/* END Tooltips for Creators */


/* Add this class to an input field to make it invisible */
.hidden-field {
    /*visibility: hidden;
    opacity: 0; */
    display: none;
}

/* I needed this to put space between input fields */
.this-input-needs-space {
    margin-bottom: 15px;
}

/* Used in creator_created_events to show/hide input fields */
.edit-input, .edit-input-label {
    display: none !important;
}

/*
.non-editable {
    display: inline;
} */

.creator-hidden {
    display: none !important;
}

.creator-shown {
    display: inline !important;
}

footer {
    /* background-color: #192b1c; */
    color: #ffffff;
    padding: 20px;
    text-align: center;
}