body {
    font-family: "Yantramanav", sans-serif;
    background-color: #293947;
    margin: 0px;
    /* background-image: url(/images/cambry11.png);
    background-size: cover;
    background-position-y: center;
    background-position-x: center;
    background-repeat: no-repeat;
    height: 100vh; */
    /* padding-bottom: 204px; */
}

.background {
    background-image: url(/images/cambry11.png);
    background-size: cover;
    background-position-y: center;
    background-position-x: center;
    background-repeat: no-repeat;
    margin: 0px;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0px;
    transition: 2s;;
}

.whineyPete {
    background-image: url(/images/pete.png);
    background-position: center;
    background-size: contain;
    width: 48px;
    height: 48px;
    position: fixed;
    margin: 16px;
    top: 48px;
    right: 36px;
    border: solid 4px #8daab7;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .7), 0 4px 8px 3px rgba(0, 0, 0, .5);
    border-radius: 64px;
    transition: 1s;
    z-index: 50;
}

.whineyPete.enabled {
    border: solid 4px white;
}

.loginButton {
    opacity: 1;
    width: 80%;
    margin: 0px auto;
}

.signInButton {
    opacity: 1;
    position: relative;
    margin: 0px auto;
    width: fit-content;
    top: calc(50% + 100px);
    transition: 500ms;
}

.loadingGames {
    height: 68px;
    position: fixed;
    /* bottom: 0px; */
    /* left: 168px; */
    font-size: 24px;
    font-weight: 400;
    color: #a6b7bf;
    display: flex;
    margin: 24px;
    z-index: 100;
    transition: 1s linear(0 0%, 0.22 2.1%, 0.86 6.5%, 1.11 8.6%, 1.3 10.7%, 1.35 11.8%, 1.37 12.9%, 1.37 13.7%, 1.36 14.5%, 1.32 16.2%, 1.03 21.8%, 0.94 24%, 0.89 25.9%, 0.88 26.85%, 0.87 27.8%, 0.87 29.25%, 0.88 30.7%, 0.91 32.4%, 0.98 36.4%, 1.01 38.3%, 1.04 40.5%, 1.05 42.7%, 1.05 44.1%, 1.04 45.7%, 1 53.3%, 0.99 55.4%, 0.98 57.5%, 0.99 60.7%, 1 68.1%, 1.01 72.2%, 1 86.7%, 1 100%);
}

.loaderText {
    line-height: 48px;
    color: #f896ff;
}

@keyframes rotating {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

.spinningLoader {
    opacity: 1;
    animation: rotating 5s linear(0 0%, 0.22 2.1%, 0.86 6.5%, 1.11 8.6%, 1.3 10.7%, 1.35 11.8%, 1.37 12.9%, 1.37 13.7%, 1.36 14.5%, 1.32 16.2%, 1.03 21.8%, 0.94 24%, 0.89 25.9%, 0.88 26.85%, 0.87 27.8%, 0.87 29.25%, 0.88 30.7%, 0.91 32.4%, 0.98 36.4%, 1.01 38.3%, 1.04 40.5%, 1.05 42.7%, 1.05 44.1%, 1.04 45.7%, 1 53.3%, 0.99 55.4%, 0.98 57.5%, 0.99 60.7%, 1 68.1%, 1.01 72.2%, 1 86.7%, 1 100%) infinite;
    background-image: url(/images/spin.svg);
    background-position: center;
    background-size: cover;
    width: 48px;
    height: 48px;
    margin-right: 10px;
}

.selectionContainer {
    display: flex;
    margin-bottom: 33px;
    max-width: 1330px;
    /* margin: 0px auto; */
    margin-top: 8px;
    /* padding-left: 152px; */
    height: 78px;
}

.selectionChip {
    width: 128px;
    height: 64px;
    font-size: 16px;
    border-radius: 8px;
    /* background-color: aliceblue; */
    opacity: 1;
    position: relative;
    width: 82px;
    height: calc(100% - 16px);
    /* margin: 10px; */
    margin-top: 0px;
    display: flex;
    margin: 8px;
    /* margin-bottom: -5px; */
    border: solid #283c47 2px;
    border: solid 2px #f0f3f5;
    box-shadow: 0 0px 3px 0 rgba(0, 0, 0, .2), 3px 0px 5px 1px rgba(0, 0, 0, .15);
}

.selectionChipImage {
    background-image: url(/images/london.jpg);
    width: 100%;
    /* height: 50%; */
    background-size: cover;
    opacity: 1;
    width: 100%;
    /* height: calc(100% - 1em); */
    background-position: center;
    background-size: cover;
}

.selectionChipText {
    opacity: 1;
    width: 1em;
    text-align: center;
    /* margin-top: 5px; */
    font-size: x-small;
    /* border-top: thin solid #6e7f80; */
    text-orientation: mixed;
    writing-mode: tb-rl;
    transform: rotate(180deg);
    background-color: #283c47;
    /* background-color: #583232; */
    padding: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    color: #283c47;
    color: #f0f3f5;
}

.selectionChipDate {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}


.selection {
    width: 100px;
    height: 100%;
    transition: 1s ease-in-out;
    /* margin: auto; */
    display: flex;
    margin: 0px auto;
    /* min-width: 99px; */
    /* border-bottom: 5px solid red; */
    margin-right: 5px;
    min-width: 180px;
    border: thin solid #121c21;
    border-radius: 5px;
}

.selectionThumb {
    opacity: 1
}

.selectionThumbImage {
    width: 96px;
    height: 40px;
    background-image: url(/images/arizona.jpg);
    background-position: center;
    background-size: cover;
}

.selectionThumbText {
    opacity: 1;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
}

.selectionWeight {
    display: flex;
    font-size: large;
    line-height: 72px;
    font-weight: 100;
    color: #a6b7bf;
    width: 100%;
    flex-direction: row-reverse;
    padding-right: 8px;
}

.selectionWeightInput {
    opacity: 1;
    width: 2em;
    text-align: right;
    border: none;
    background: transparent;
    font-size: large;
    color: #a6b7bf;
    font-family: "Roboto", sans-serif;
    font-weight: 100;
}

.selectionWeightText {
    opacity: 1;
    margin-top: 5px;
}

.instructions {
    padding: 16px;
}

.instructionsTitle {
    font-size: 24px;
    font-weight: 100;
}

.instructionsSubTitle {
    color: #8daab7;
    font-weight: 300;
}

.instructionsHighlight {
    opacity: 1;
    color: white;
    font-weight: 400;
}

.submitButton {
    text-align: center;
    opacity: 1;
    width: 128px;
    /* height: 64px; */
    background-color: #293947;
    /* z-index: 20; */
    /* position: absolute; */
    right: 0px;
    position: absolute;
    bottom: 0px;
    line-height: 24px;
    margin-right: 8px;
    z-index: 500;
    font-size: 24px;
    padding: 12px;
    border-radius: 8px;
    position: fixed;
    color: #293947;
    color: #f0f3f5;
    background-color: #8daab7;
    border: thin solid #8daab7;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .7), 0 4px 8px 3px rgba(0, 0, 0, .5);
    transition: .5s;
    margin-bottom: 24px;
}

.submitButton:hover {
    cursor: pointer;
    filter: brightness(1.5);
}

.submitButton.disabled {
    opacity: 0;
}

.submitButton.disabled:hover {
    cursor: default;
}



.selectionBadge {
    opacity: 1;
    position: absolute;
    right: 0px;
    top: 0px;
    font-size: 16px;
    margin-right: -1em;
    margin-top: -1em;
    width: 2em;
    height: 2em;
    border-radius: 2em;
    background-color: #7a0e0e;
    color: #708090;
    text-align: center;
    border: 2px solid white;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .3), 0 4px 8px 3px rgba(0, 0, 0, .5);
}

.selectionBadgeNumber {
    opacity: 1;
    height: 2em;
    line-height: 2em;
    color: white;
}

.header {
    opacity: 0;
    /* background-image: url(/images/black_neon.png); */
    height: 96px;
    width: 100%;
    background: linear-gradient(180deg, rgba(41, 57, 71, 1) 35%, rgba(50, 73, 88, 1) 100%);
    position: fixed;
    color: #f0f3f5;
    top: 0px;
    background-color: #324958;
    /* display: flex; */
    transition: 1s;
    z-index: 10;
    background-position: center;
    background-position-y: bottom;
    background-size: cover;
    border-bottom: solid thin #536872;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .8), 0 6px 12px 6px rgba(0, 0, 0, .4);}


.headerLeft {
    opacity: 1;
    width: 100%;
    display: flex;
}

.headerRight {
    opacity: 1;
    width: 32px;
    margin: 10px;
    /* background-color: #5c666c; */
    padding: 5px;
    /* border-radius: 16px; */
    position: fixed;
    top: 57px;
    right: 0px;
    z-index: 25;
}

.headerRightImage {
    opacity: 0;
    width: 32px;
    height: 32px;
    border-radius: 32px;
    background-position: center;
    background-size: cover;
    margin: 0px auto;
    margin-top: 4px;
    border: 4px #283d47 solid;
}

.headerRightText {
    opacity: 1;
}

.stage {
    opacity: 1;
    color: #384047;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1856px;
    margin: 0px auto;
    margin-top: 96px;
    /* min-width: 916px; */
    margin-bottom: 96px;
}

.gameEntry {
    transition: .5s ease-in-out;
    width: 156px;
    height: 256px;
    background-color: #324958;
    margin: 0px auto;
    /* padding: 10px; */
    margin-top: 32px;
    border-radius: 16px;
    z-index: 4;
    /* height: 80px; */
    margin-left: 18px;
    color: #aaa;
    position: relative;
    /* transform: scale(2); */
    /* filter: saturate(.5); */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .3), 0 4px 8px 3px rgba(0, 0, 0, .15);
}

/* .gameEntry:hover {
    transform: scale(1.05);
    filter: saturate(1.1);
} */

.gContents {
    /* display: flex; */
    height: 80px;
    /* padding: 5px; */
    border: solid #708090 thin;
    border-top: none;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.gDateSection {
    font-size: x-small;
    width: calc(100% - 12px);
    /* background-color: #536872; */
    height: fit-content;
    color: #f0f3f5;
    margin: 0px;
    display: flex;
    padding: 8px;
    padding-bottom: 5px;
    padding-right: 0px;
    /* border: solid #708090 thin; */
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.gDateSection:hover {
    cursor: pointer;
}

.gDateSectionDate {
    width: 100%;
    line-height: 2em;
    text-align: center;
}



.gDateSectionTime {
    /* width: 100%; */
    line-height: 2em;
    text-align: right;
}

.gLocationSection {
    opacity: 1;
    width: 100%;
    height: 96px;
    /* margin: 10px; */
    margin-top: 0px;
    display: flex;
    /* margin: 0px; */
    /* margin-bottom: -5px; */
    /* border-right: solid #708090 thin; */
}

.gLocationSection:hover {
    cursor: pointer;
}

.gLocationSectionImage {
    opacity: 1;
    width: 100%;
    /* height: calc(100% - 1em); */
    background-position: center;
    background-size: cover;
    box-shadow: 0 0px 3px 0 rgba(0, 0, 0, .2), 3px 0px 5px 1px rgba(0, 0, 0, .15);
}

.gLocationSectionName {
    opacity: 1;
    width: calc(100% - 10px);
    position: absolute;
    text-align: center;
    /* margin-top: 5px; */
    font-size: large;
    /* border-top: thin solid #6e7f80; */
    /* text-orientation: mixed; */
    /* writing-mode: tb-rl; */
    /* transform: rotate(180deg); */
    background-color: #324959;
    padding: 5px;
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 16px;
    color: #f0f3f5;
    bottom: 0px;
    /* border-top: solid 5px #29353d; */
}

.gDetailsSection {
    opacity: 1;
    width: 80%;
    margin: 0px auto;
    height: fit-content;
}

.gDetailsSectionTitle {
    opacity: 1;
    /* width: 100%; */
    text-align: center;
    font-size: medium;
    display: flex;
    margin-top: -31px;
    background-color: hsl(204 20% 5% / 1);
    border-radius: 64px;
    height: 32px;
    width: 64px;
    padding: 7px;
    border: solid #708090 thin;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 2px 4px 1px rgba(0, 0, 0, .15);
}

.gDetailsSectionIcons {
    opacity: 1;
    width: fit-content;
    /* background: green; */
    display: flex;
    margin: 0px auto;
    padding: 0px;
}

.gDetailsSectionIconsIcon {
    opacity: 1;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    margin: 4px;
}



.gDetailsSectionIconsTeam.gDetailsSectionIconsIcon {}

.gDetailsSectionIconsTeamLogo {
    filter: drop-shadow( 2px  0px 0px #29353d)         drop-shadow(-2px  0px 0px #29353d)        drop-shadow( 0px  2px 0px #29353d)         drop-shadow( 0px -2px 0px #29353d);
}

.gDetailsSectionIconsClickable {
    opacity: 1;
}

.gDetailsSectionIconsClickable:hover {
    cursor: pointer;
    opacity: 1 !important;
}

.gDetailsSectionIconsTeam {
    opacity: 1;
    /* margin-top: -32px; */
    margin-left: auto;
    margin: 2px;
    margin-top: -8px;
    left: -12px;
    /* margin-left: 16px; */
    position: absolute;
    top: 64px;
    width: 42px;
    height: 42px;
}

.gDetailsSectionIconsOpp {
    opacity: 1;
    /* margin-top: -32px; */
    /* margin-right: auto; */
    /* margin: 2px; */
    /* margin-top: -8px; */
    opacity: 1;
    /* margin-top: -32px; */
    margin-left: auto;
    margin: 2px;
    margin-top: -8px;
    right: -16px;
    /* margin-left: 16px; */
    position: absolute;
    top: 96px;
    /* filter: drop-shadow(2px 4px 6px black); */
}

.gDetailsSectionTravel {
    opacity: 1;
    border-radius: 10px;
    /* background-color: grey; */
    /* margin-left: 12px; */
    text-align: center;
}

.gDetailsSectionTravel {
    opacity: 1;
    border-radius: 10px;
    /* background-color: grey; */
    /* margin-left: 12px; */
    text-align: center;
    /* display: flex; */
    margin-top: 5px;
    position: relative;
}

.gDetailsSectionTravelTitle {
    opacity: 1;
    font-size: 11px;
    /* background-color: grey; */
    padding: 5px;
    margin-top: -12px;
    color: #f0f3f5;
}

.gDetailsSectionTravelContainerAvg {
    text-align: left;
    border-radius: 5px;
    background-color: #283947;
    width: fit-content;
    position: absolute;
    height: 32px;
    top: -145px;
    right: -24px;
    z-index: 7;
    /* padding: 3px; */
    border: solid thin #536872;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .3), 0 2px 4px 1px rgba(0, 0, 0, .15);
}

.gDetailsSectionTravelTitleAvg {
    margin-top: 0px;
    padding: 4px;
    font-size: 8px;
}

.gDetailsSectionIconsTravelTime.gDetailsSectionIconsTravelTimeAvg {
    font-size: 15px;
    margin-top: -12px;
    font-weight: 400;
}

.gDetailsSectionTravelContainerHome {
    /* text-align: left; */
    margin-top: 14px;
}



.gDetailsSectionIconsPlug {
    opacity: 1;
}

.gDetailsSectionIconsTopGolf {
    opacity: 1;
}

.gDetailsSectionIconsGoKart {
    opacity: 1;
}

.gDetailsSectionIconsTravelTime {
    opacity: 1;
    padding: 5px;
    font-size: 32px;
    font-weight: 300;
    margin-top: -16px;
    font-weight: 100;
    color: #8daab7;
}

.gDateSection {
    opacity: 1;
}

.gDateSectionDate {
    opacity: 1;
}

.gDateSectionTime {
    opacity: 1;
}