/* Import old font from google */
@import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap');

.navbar-sticky {
    position: sticky;
    width: 100%;
    z-index: 1;
    top: 0;
}

/* NavBar and h1 fonts same as old site */
.w3-top a, h1, .navbar-sticky a {
    font-family: "Bungee";
}

/* Adds a w3-content that uses full width */
.w3-content-full {
    max-width: 2560px;
    margin: 0px auto;
}

/* Compos */

/* Rankings list item */
.w3-bar a.rankingsItem {
    width: 100%;
    text-align: left;
}


/*--- Catering ---*/

/* Align Quantity Arrows */
.arrows {
    text-align: center;
}

/* Align Quantity columns and input */
td.quantity, th.quantity, .quantity, td.center, th.center {
    text-align: center;
}

/* Align add to basket icon */
.addToBasket {
    text-align: center;
}

/* Align remove from basket icon */
td.deleteIcon, th.deleteIcon {
    text-align: center;
}

/* Set heading width on small screen, and background color on all */
.cateringHeading {
    width: 100%;
    display: inline-block;
    background-color: #eee;
}

/* Override heading width on larger screens */
@media screen and (min-width: 975px) {
    div.cateringHeading {
        width: 65%;
    }
}

/* set each catering items base styles */
.cateringItem {
    display: inline-block;
    padding: 20px;
    vertical-align: top;
}

/* Override catering items padding for larger screens */
@media screen and (min-width: 975px) {
    div.cateringItem {
        padding: 34px;
    }
}

/* Setup the left section of each catering item (image and text) */
.cateringItemLeft {
    display: inline-block;
    vertical-align: top;
    width: 140px;
    max-width: 140px;
    min-width: 140px;
    text-align: center;
}

/* Setup the right section of each catering item, quantity and basket icon */
.cateringItemRight {
    display: inline-block;
    vertical-align: top;
    width: 34px;
    max-width: 34px;
    min-width: 34px;
}

/* Space quantity icons */
.quantityIcon {
    padding: 2px 0;
}

/* Alignment for quantity and basket icons */
.quantityIcon, .basketIcon {
    display: block;
    margin: 0 auto;
    vertical-align: top;
    cursor: pointer;
}

/* Item text alignment */
.cateringItemText {
    text-align: center;
}

/* Item Price spacing and formatting */
.cateringItemPrice {
    font-weight: bold;
    margin-left: 20px;
}

/* Add to Basket link positioning */
.cateringItemPrice a {
    float: right;
    margin: -3px 5px;
}

/* Add to basket positioning */
.cateringItemBasket {
    vertical-align: bottom;
}

/* Basket positioning */
.basketContainer {
    width: 100%;
    margin-top: 50px;
    float: right;
}

/* Override for basket positioning on larger screens */
@media screen and (min-width: 975px) {
    .basketContainer {
        width: 30%;
        float: right;
        margin-top: 0px;

    }
}
.themeSelectorContainer {
    margin: 0 20px;
    display: flex;
    align-items: center;
    height: 51px;
    float: right;
}
.themeSelector {
    border: 1px solid #dddddd;
    width: 28px;
    height: 28px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    border-radius: 28px;
}
.themeSelector:hover {
    opacity: 0.7;
}

/* Color Modes */
/* Light */
html body {
    background-color: #dddddd;
}


/* Dark */
html body.theme_dark {
    background-color: #181A1B;
    color: #dddddd;
}

/* Custom Black, use instead of w3-black */
.w3-custom-black {
    background-color: #222;
    color: #fff;
}

.theme_dark .w3-custom-black {
    background-color: #181A1B;
    color: #fff;
}

.content-container {
    background-color: white;
}

.theme_dark .content-container {
    background-color: #2B2F31;
}

.theme_dark .cateringHeading {
    background-color: #3E4446;
}

.theme_dark .w3-table-all tr {
    border-bottom: 1px solid #3E4446
}

.theme_dark .w3-table-all {
    border: 1px solid #3E4446;
}

.theme_dark .w3-table-all.border-top-only {
    border: 0;
    border-top: 1px solid #3E4446;
}

.theme_dark .w3-table-all tr:nth-child(odd) {
    background-color: #181A1B;
}

.theme_dark .w3-table-all tr:nth-child(even) {
    background-color: #202324;
}
.theme_dark .accessories-div {
    background-color: #2B2F31;
}
.theme_dark .fixed-div {
    background-color: #181A1B;
}
.darkSelector, .lightSelector {
    display: none;
}
.theme_light .darkSelector,
.theme_dark .lightSelector {
    display: initial;
}
.theme_light .lightSelector,
.theme_dark .darkSelector {
    display: none;
}

.compoStart {
    margin-left: 20px;
    margin-top:4px;
    float:right;
    color: #bcbcbc;
}

.theme_light .participantContainer {
    background-color: #eee;
    padding: 10px;
    border-radius: 10px;
}

.theme_dark .participantContainer {
    background-color: #222;
    padding: 10px;
    border-radius: 10px;
}

.arrivingContainer {
    column-count: 2;
    column-gap: 10px;
}

.arrivingDiv {
    background: #202324;
    margin: 5px;
    border: 1px solid #3E4446;
    display: inline-block;
    width: 100%;
    margin-bottom: 5px;
}
.arrivedStats {
    text-align: right;
    float: right;
}
table.attending td:nth-child(1), table.attending th:nth-child(1) {
    padding-left: 30px;
}

table.attending td, table.attending th {
    width: 16%;
    white-space: nowrap;
}
table.attending td.account, table.attending th.account {
    width: 20%;
}

.arrivingContainer input[type="checkbox"] {
    transform: scale(1.5);
    cursor: pointer;
}

#arrivingContent {
    visibility: hidden;
}

#arrivingContent.loaded {
    visibility: visible;
}
.theme_dark .floating-div {
    background-color: #181A1B;
    color: #dddddd;
}