*, *::after, *::before {
    box-sizing: border-box;
}

@font-face {
    font-family: "Cafeteria";
    src: url("fonts/Cafeteria-Bold.otf") format("opentype");
}

body {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(18, 5rem);
    grid-template-rows: 8rem 2rem 8rem 25rem 4.4rem;
    gap: .2rem;
    cursor: pointer;
    justify-content: left;
    padding-top: .1rem;
    overflow: hidden; /* Hide scrollbars */
    user-select: none;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.buttonChoice {
    font-family : 'Cafeteria',Courier,serif;
    font-size: 18px;
}
.buttonVertical {
    display : block;
}


.connectStatusDisabled {
    display: none;
}

.connectStatus {
    display: inline-block;
    vertical-align: middle;
}

.topLeft {
    grid-row   :  1 / span 2;
    grid-column: 1 / span 3;
    flex-direction: column;
    padding: 0px;
    display: flex;
}

.scrollabletextbox {
    height:250px;
    font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
    border: 1px solid black;
    background : white;
    font-size: 50%;
    padding:1px;
    overflow:auto;
}

.ingamebuttons {
  display: flex;
}

.toprowcards {
    grid-row   :  1;
    grid-column: 4 / span 10;
    display: flex;
    min-width:0;
}

.draftOptions {
    grid-row   :  1;
    grid-column: 14 / span 1;
    justify-content: left;
    align-items : left;
    margin      : 0;
    padding     : 0.1em;
    font-family : 'Cafeteria',Courier,serif;
    font-size   : 0.8rem;
}

.draftConfig {
    grid-row   :  1;
    grid-column: 15 / span 1;
    justify-content: left;
    align-items : left;
    margin      : 0;
    font-family : 'Cafeteria',Courier,serif;
    font-size   : 0.6rem;
}

.endgameTable {
  width: 54%;
  height: 39%;
  table-layout: fixed;
  position: absolute;
  word-break:break-all;

}

.endgameTableBorderFont {
  border: 3px solid black;
  border-collapse: collapse;
  font-size : 1rem;
  font-family : 'Cafeteria';
  padding: 0px;
  margin: 0px;
}


.card-red {
    background-color: red;
}
.card-brown {
    background-color: maroon;
}
.card-grey {
    background-color: grey;
}
.card-blue {
    background-color: blue;
}
.card-green {
    background-color: green;
}
.card-yellow {
    background-color: gold;
}
.card-purple {
    background-color: purple;
}
.card-white {
    background-color: whitesmoke;
    color: black;
}
.card-misty {
    background-color: #BDE5CB;
}
.card-black {
    background-color: #424242;
    color: white;
}
.card-raspberry {
    background-color: #872657;
}
.card-mint {
    background-color: #98FF98;
}
.card-orange {
    background-color: darkorange;
}
.card.disabled {
    display: none;
}
.card.enabled {
    display: block;
}

.cardDisabled {
    position: relative;
    display: none;
}

.card {
    position: relative;
    height: 128px;
    width: 83px;
    border: 1px solid black;
    border-radius: .4rem;
    box-shadow: 4px 4px 16px 2px #000000A0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.0rem;
    flex-grow: 0;
    flex-shrink: 0;
}

.card-full {
    position: absolute;
    left: 10px;
    width: 74%;
    text-align: center;
    top: 50%;
    transform: translateY(-30%);
}

.card-left {
    position: absolute;
    left: 0px;
    width: 50%;
    text-align: center;
    top: 50%;
    transform: translateY(-40%);
}

.card-right {
    position: absolute;
    left: 50%;
    width: 50%;
    text-align: center;
    top: 50%;
    transform: translateY(-40%);
}

.card-tip {
   position:absolute;
   top: 105px;
   left: 55px;
   width: 25%;
}

/* This is for courtesan's or a corropolis token assigned to a particular card */
.card-token {
   position:absolute;
   top: 75%;
   /* left dynamically set by the number of tokens */
   width: 28px;
}


.card::before {
    position: absolute;
    content: attr(data-name) '\00000a ' attr(data-cost) '\00000a ' attr(data-prereq);
    white-space: pre;
    font-size: .6rem;
    font-weight: bold;
}

.card-cost {
   position: absolute;
   top: 11px;
   left: 0.5px;
   height: 12px;
   width: 100%;
}

.card-cost-img {
    /*position: absolute;*/
    display: inline-block;
    width: 11.5px;
    height: 11.5px;
}

.info11-5Values {
    position: absolute;
    display: inline-block;
    top: 4px;
    /*left: position set dynamically depending */
    font-size: 11px;
    font-weight: bolder;
    -webkit-text-fill-color: black;
    line-height: 11.5px;
    margin-top: -.5px;
    font-family : 'Cafeteria',Courier,serif;
}

.card::after {
    position: absolute;
    font-size: .5rem;
}

.game-details {
  font-size: 10px;
  font-weight: bold;
  justify-content: left;
  padding : 0;
  margin : 0;
  line-height : 2px;
  position: relative;
  height: 128px;
  width: 83px;
  border: 1px solid black;
  border-radius: .4rem;
  box-shadow: 4px 4px 16px 2px;
}


/* Displays version and player online status */
.statusTopRight {
    grid-column: 17 / span 2;
    justify-content: left;
    align-items : left;
    margin      : 0;
    padding     : 0.1em;
    font-family : 'Cafeteria',Courier,serif;
    font-size   : 0.8rem;
}

/* Long bar directly below the draftable cards */

.statusInfo {
    font-family : 'Cafeteria',Courier,serif;
}

.statusBtnImg {
    border-width: 0;
    width : 18px;
    height : 18px;
}


.card::before {
    top: .2rem;
    left: .2rem;
}

.card::after {
    bottom: .2rem;
    left: .2rem;
}


.cardD0 {
    position: relative;
    height: 128px;
    width: 80px;
    border: 1px solid black;
    border-radius: .4rem;
    box-shadow: 4px 4px 16px 2px  #000000A0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.0rem;
    transition: 0.2s;
}
.cardD0:not(:first-child) {
    margin-left: -28px;
}
.cardD0:hover ~ .cardD0 {
    transform:translateX(28px);
}
.cardD0::before {
    position: absolute;
    content: attr(data-name) '\00000a ' attr(data-cost) '\00000a ' attr(data-prereq);
    white-space: pre;
    font-size: .6rem;
    font-weight: bold;
}

.cardD0::after {
    position: absolute;
    font-size: .5rem;
}

.cardD0::cost {
  float: left;
  width: 11.1%;
  padding: 1px 1px 1px;
}

.cardD0::midCard {
   display: block;
   margin-left: auto;
   margin-right: auto;
   width: 60%;
}


.statusText {
    grid-row: 2;
    grid-column: 4 / span 12;
    display: flex;
    justify-content: left;
    align-items: center;
}

.wonderIcons {
    grid-row: 2;
    grid-column: 16 / span 3;
    display: flex;
    position: relative;
    top: -12px;
}

/* Drafted (or Trash) second row of cards */
.cardDbackground {
    grid-row: 3;
    grid-column:  span 15;
    display: flex;
    padding: 0px;
    font-size  : 10px;
}

/* Islands to right of drafted cards */
.cardsR {
    grid-row: 3;
    grid-column: 16 / span 3;
    display: flex;
    padding: 0px;
    font-size: 10px;
}

.cardR1 {
    width : 80px;
    height : 128px;
    position: relative;
    border: 1px solid black;
    border-radius: .4rem;
    box-shadow: 3px 3px 16px 2px #000000A0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.2s;
}
.cardR1:not(:first-child) {
    margin-left: -28px;
}
.cardR1:hover ~ .cardR1 {
    transform:translateX(28px);
}
.cardR1::before {
    position: absolute;
    content: attr(data-name) '\00000a ' attr(data-cost);
    white-space: pre;
    font-size: .6rem;
    font-weight: bold;
}
.cardR1::after {
    position: absolute;
    content: attr(future-content);
    font-size: .5rem;
}
.cardR1::cost {
  float: left;
  width: 11.1%;
  padding: 1px 1px 1px;
}
.cardR1::midCardL {
   display: block;
   margin-left: auto;
   margin-right: auto;
   width: 60%;
}
.cardR1::before {
    top: .2rem;
    left: .2rem;
}
.cardR1::after {
    bottom: .2rem;
    left: .2rem;
}


.wonderEastWest {
    grid-row: span 2;
    grid-column: span 1;
    display: block;
    justify-content: left;
    font-size: 1.0rem;
    font-family : 'Cafeteria',Courier,serif;
}

.wonderMiddleMap {
    grid-row: span 2;
    grid-column: span 1;
    display: absolute;
    justify-content: left;
    align-items: left;
    font-size: 1.0rem;
    font-family : 'Cafeteria',Courier,serif;
}
.wonderHome {
    position: relative;
    display: inline-block;
    height: 360px;
    font-size: 1.0rem;
    font-family : 'Cafeteria',Courier,serif;
}

.mapBase {
    position: relative;
    top: 0;
    left: 0;
}
.mapHome {
    position: absolute;
    left: 26px;
    top: 78px;
    width: 30px;
    height: 30px;
    z-index: -1;
}
.map3-4pW {
    position: absolute;
    left: 0px;
    top: 36px;
    width: 30px;
    height: 30px;
    z-index: -1;
}
.map3-4pE {
    position: absolute;
    left: 60px;
    top: 36px;
    width: 30px;
    height: 30px;
    z-index: -1;
}
.map4pN {
    position: absolute;
    left: 26px;
    top: 0px;
    width: 30px;
    height: 30px;
    z-index: -1;
}
.map5pW {
    position: absolute;
    left: -2px;
    top: 62px;
    width: 30px;
    height: 30px;
    z-index: -1;
}
.map5pE {
    position: absolute;
    left: 65px;
    top: 62px;
    width: 30px;
    height: 30px;
    z-index: -1;
}
.map5pNW {
    position: absolute;
    left: 10px;
    top: 16px;
    width: 30px;
    height: 30px;
    z-index: -1;
}
.map5pNE {
    position: absolute;
    left: 55px;
    top: 16px;
    width: 30px;
    height: 30px;
    z-index: -1;
}

.map6pW {
    position: absolute;
    left: -2px;
    top: 62px;
    width: 30px;
    height: 30px;
    z-index: -1;
}
.map6pE {
    position: absolute;
    left: 65px;
    top: 62px;
    width: 30px;
    height: 30px;
    z-index: -1;
}
.map6pNW {
    position: absolute;
    left: -2px;
    top: 20px;
    width: 30px;
    height: 30px;
    z-index: -1;
}
.map6pNE {
    position: absolute;
    left: 65px;
    top: 20px;
    width: 30px;
    height: 30px;
    z-index: -1;
}
.map6pN {
    position: absolute;
    left: 26px;
    top: 0px;
    width: 30px;
    height: 30px;
    z-index: -1;
}

.map7-8pSW {
    position: absolute;
    left: 0px;
    top: 76px;
    width: 25px;
    height: 25px;
    z-index: -1;
}
.map7-8pSE {
    position: absolute;
    left: 60px;
    top: 76px;
    width: 25px;
    height: 25px;
    z-index: -1;
}
.map7-8pW {
    position: absolute;
    left: -5px;
    top: 48px;
    width: 25px;
    height: 25px;
    z-index: -1;
}
.map7-8pE {
    position: absolute;
    left: 65px;
    top: 48px;
    width: 25px;
    height: 25px;
    z-index: -1;
}
.map7pNW {
    position: absolute;
    left: 8px;
    top: 10px;
    width: 25px;
    height: 25px;
    z-index: -1;
}
.map7pNE {
    position: absolute;
    left: 48px;
    top: 10px;
    width: 25px;
    height: 25px;
    z-index: -1;
}
.map8pNW {
    position: absolute;
    left: 0px;
    top: 15px;
    width: 25px;
    height: 25px;
    z-index: -1;
}
.map8pNE {
    position: absolute;
    left: 60px;
    top: 15px;
    width: 25px;
    height: 25px;
    z-index: -1;
}
.map8pN {
    position: absolute;
    left: 30px;
    top: 5px;
    width: 25px;
    height: 25px;
    z-index: -1;
}

/* Leaders to left of wonderboard */
.cardsL {
    flex-direction: column;
    grid-row: 4 / span 2;
    grid-column: 4 / span 1;
    display: flex;
    padding: 0px;
    font-size: .5rem;
}

.cardL1 {
    position: relative;
    height : 128px;
    width : 83px;
    border: 1px solid black;
    border-radius: .4rem;
    box-shadow: 3px 3px 16px 2px #000000A0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.2s;
}
.cardL1:not(:first-child) {
    margin-top: -55px;
}
.cardL1:hover ~ .cardL1 {
    transform:translateY(55px);
}
.cardL1::before {
    position: absolute;
    content: attr(data-name) '\00000a ' attr(data-cost) '\00000a ' attr(data-prereq);
    white-space: pre;
    font-size: .6rem;
    font-weight: bold;
}
.cardL1::after {
    position: absolute;
    font-size: .5rem;
}
.cardL1::cost {
  float: left;
  width: 11.1%;
  padding: 1px 1px 1px;
}
.cardL1::midCardL {
   display: block;
   margin-left: auto;
   margin-right: auto;
   width: 60%;
}
.cardL1::before {
    top: .2rem;
    left: .2rem;
}
.cardL1::after {
    bottom: .2rem;
    left: .2rem;
}

.infodivs16 {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 16px;
}
.infodivs20 {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 20px;
}
.info20 {
    position: absolute;
    display: inline-block;
    width: 20px;
    height: 20px;
}
.info20Values {
    position: absolute;
    display: inline-block;
    top: 2.5px;
    /*left: position set dynamically depending on how many $$ */
    font-size: 16px;
    font-weight: bolder;
    -webkit-text-fill-color: black;
    -webkit-text-stroke-width: .1px;
    -webkit-text-stroke-color: white;
    line-height: 18px;
    margin-top: -1px;
    font-family : 'Cafeteria',Courier,serif;
}
.info22 {
    position: absolute;
    display: inline-block;
    width: 22px;
    height: 22px;
}
.info22Values {
    position: absolute;
    display: inline-block;
    top: 3.5px;
    /*left: position set dynamically depending on how many $$ */
    font-size: 16px;
    font-weight: bolder;
    -webkit-text-fill-color: white;
    line-height: 18px;
    margin-top: -1px;
    font-family : 'Cafeteria',Courier,serif;
}

.info23Values {
    position: absolute;
    display: inline-block;
    top: 4px;
    /*left: position set dynamically depending on how many $$ */
    font-size: 18px;
    font-weight: bolder;
    -webkit-text-fill-color: white;
    -webkit-text-stroke-width: .8px;
    -webkit-text-stroke-color: green;
    line-height: 18px;
    margin-top: -1px;
    font-family : 'Cafeteria',Courier,serif;
}

.info40whiteValue {
    position: absolute;
    top: 12px;
    /*left: position set dynamically depending on how many $$ */
    font-size: 52px;
    font-weight: bolder;
    -webkit-text-fill-color: white;
    -webkit-text-stroke-width: .7px;
    -webkit-text-stroke-color: black;
    display: inline-block;
    line-height: 54px;
    margin-top: -3px;
    font-family : 'Cafeteria',Courier,serif;
}

.proddiv {
    border-width: 0;
    width : 9px;
    height : 18px;
    vertical-align: middle;
}
.prod1 {
    border-width: 0;
    width : 18px;
    height : 18px;
    vertical-align: middle;
}
.prod2 {
    border-width: 0;
    width : 25px;
    height : 18px;
    vertical-align: middle;
}
.prod3 {
    border-width: 0;
    width : 34px;
    height : 18px;
    vertical-align: middle;
}
.prod4 {
    border-width: 0;
    width : 38px;
    height : 18px;
    vertical-align: middle;
}
.prodOR {
    border-width: 0;
    width : 80px;
    height : 18px;
    vertical-align: middle;
    position: relative;
}
.wonderBoard {
    grid-column: span 11;
    position: relative;
    top: 0;
    left: 0;
}
.wonderbase {
    pointer-events: none;  /* disable MS edge visual serach hover */
    position: relative;
    top: 0;
    left: 0;
}
.wonderTip {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 15px;
    height: 15px;
    z-index: 1;
}
/* This is for Agbatana 'viewing' mode */
.wonderdarken {
  filter: brightness(40%);
}
.wonderviewing {
  position: absolute;
  top: 34px;
  left: 760px;
  width: 110px;
  height: 34px;
}

.wonderProduction {
    position: absolute;
    top: 13px;
    left: 80px;
    width: 45px;
    height: 45px;
}

.wonderPortBackground {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 200px;
    height: 70px;
}


.wonderDiplomacies {
    position: absolute;
    top: 10px;
    left: 360px;
    width: 300px;
    height: 60px;
    z-index: 1;
}
.wonderDiplomacy {
    float: left;
    width: 20%;  /* 1/5  300/5=60 */
}
.wonderDiplomacies::after {
    content: "";
    clear: both;
    display: table;
}

.wonderMVTs {
    position: absolute;
    top: 80px;
    left: 240px;
    width: 540px;
    height: 65px;
    z-index: 1;
}
.wonderMVTs::after {
    content: "";
    clear: both;
    display: table;
}

.wonderCoins {
    position: absolute;
    top: 150px;
    left: 90px;
    width: 70px;
    height: 70px;
    z-index: 1;
}
.wonderCoinsValue {
    position: absolute;
    top: 12px;
    /*left: position set dynamically depending on how many $$ */
    font-size: 52px;
    font-weight: bolder;
    -webkit-text-fill-color: black;
    -webkit-text-stroke-width: .3px;
    -webkit-text-stroke-color: white;
    display: inline-block;
    line-height: 54px;
    margin-top: -3px;
    font-family : 'Cafeteria',Courier,serif;
}
.wonderCoins::after {
    content: "";
    clear: both;
    display: table;
}

.wonderMLTs {
    position: absolute;
    top: 150px;
    left: 240px;
    width: 540px;
    height: 60px;
    z-index: 1;
}
.wonderMLTs::after {
    content: "";
    clear: both;
    display: table;
}

.wonderDebts {
    position: absolute;
    top: 210px;
    left: 240px;
    width: 480px;
    height: 60px;
    z-index: 1;
}
.wonderDebt {
    float: left;
    width: 12.5%;  /* 1/8 */
}
.wonderDebts::after {
    content: "";
    clear: both;
    display: table;
}

/* WP1 and WP2 are tokens for wonder base power top left */
.wonderTokenCorropolisWP1 {
    position: absolute;
    top: 2px;
    left: 18px;
    width: 70px;
    height: 70px;
}
.wonderTokenCorropolisWP2 {
    position: absolute;
    top: 2px;
    left: 115px;
    width: 70px;
    height: 70px;
}
/* BG1,BG2 are for background (card color) behind the tokens on wonder stages */
.wonderTokenCorropolisBG1 {
    position: absolute;
    top: 305px;
    left: 205px;
    width: 30px;
    height: 65px;
}
.wonderTokenCorropolisBG2 {
    position: absolute;
    top: 305px;
    left: 695px;
    width: 30px;
    height: 60px;
}
/* A2,B1,B2,B3 are for tokens on wonder stages */
.wonderTokenCorropolisA2 {
    position: absolute;
    top: 300px;
    left: 473px;
    width: 70px;
    height: 70px;
}
.wonderTokenCorropolisB1 {
    position: absolute;
    top: 300px;
    left: 185px;
    width: 70px;
    height: 70px;
}
.wonderTokenCorropolisB2 {
    position: absolute;
    top: 300px;
    left: 428px;
    width: 70px;
    height: 70px;
}
.wonderTokenCorropolisB3 {
    position: absolute;
    top: 300px;
    left: 675px;
    width: 70px;
    height: 70px;
}

.wonderTipManneken1v1 {
    position: absolute;
    top: 335px;
    left: 70px;
    width: 28px;
    height: 28px;
}
.wonderTipManneken2v1 {
    position: absolute;
    top: 335px;
    left: 345px;
    width: 28px;
    height: 28px;
}
.wonderTipManneken3v1 {
    position: absolute;
    top: 335px;
    left: 612px;
    width: 28px;
    height: 28px;
}
.wonderTipManneken1v2 {
    position: absolute;
    top: 300px;
    left: 67px;
    width: 24px;
    height: 24px;
}
.wonderTipManneken2v2 {
    position: absolute;
    top: 300px;
    left: 347px;
    width: 24px;
    height: 24px;
}
.wonderTipManneken3v2 {
    position: absolute;
    top: 300px;
    left: 628px;
    width: 24px;
    height: 24px;
}
.wonderTipZeugma2 {
    position: absolute;
    top: 342px;
    left: 347px;
    width: 28px;
    height: 28px;
}


/*Flipped stages*/
.wonderstagetext {
   align-items: center;
   font-family : 'Cafeteria',Courier,serif;
   font-size: 1.0rem;
   position: absolute;
   top: 20%;
   left: 10%;
}
.wonderstage-tip {
   position:absolute;
   top: 10px;
   left: 180px;
   width: 19px;
   height: 19px;
}

/*This is rev1 mummys on right side of board, rev2 left side*/
.wondermummy1R {
    position: absolute;
    top: 85px;
    left: 830px;
    width: 80px;
    height: 128px;
}
.wondermummy2R {
    position: absolute;
    top: 150px;
    left: 830px;
    width: 80px;
    height: 128px;
}

.wondermummy1L {
    position: absolute;
    top: 110px;
    left: 0px;
    width: 80px;
    height: 128px;
}
.wondermummy2L {
    position: absolute;
    top: 135px;
    left: 0px;
    width: 80px;
    height: 128px;
}

/* Bottom right, to right of island cards */
.dockyard {
    flex-direction: column;
    grid-row: 4 / span 2;
    grid-column: 16 / span 3;
    display: flex;
    position: relative;
    padding: 0px;
}

.dockyardTrackR {
    position: absolute;
    /* top: dynamically set */
    left: 8px;
    width: 20px;
    height: 60px;
}
.dockyardTrackY {
    position: absolute;
    /* top: dynamically set */
    left: 68px;
    width: 20px;
    height: 60px;
}
.dockyardTrackB {
    position: absolute;
    /* top: dynamically set */
    left: 133px;
    width: 20px;
    height: 60px;
}
.dockyardTrackG {
    position: absolute;
    /* top: dynamically set */
    left: 199px;
    width: 20px;
    height: 60px;
}

#overlay {
  position: fixed;
  opacity: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .6);
  pointer-events: none;
}

#overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* Popup on drafting card */
.cardpopup {
    display     : block;
    position    : absolute;
    margin      : 0;
    font-family : 'Cafeteria',Courier,serif;
    font-size   : 0.8rem;
    left        : 5px;
    top         : 2px;
    width       : 70px;
    height      : 120px;
    z-index     : 5;
    border-radius: .4rem;
    /* green transparent background #0ed145 */
    background-color: rgba(14, 209, 69, 0.6);
}

/* Popup on conscripted leaders */
.leaderpopup {
    display     : block;
    position    : absolute;
    margin      : 0;
    font-family : 'Cafeteria',Courier,serif;
    font-size   : 1.2rem;
    left        : 5px;
    top         : 2px;
    width       : 70px;
    height      : 120px;
    border-radius: .4rem;
    /* red transparent background */
    background-color: rgba(235, 15, 15, 0.6);
}


/* Popup forms for login etc */
.login-popup {
  display: block;
  position: absolute;
  bottom: 0;
  left: 10px;
  top: 2px;
  height: 370px;
  border: 3px solid #f1f1f1;
  padding: 0px;
}

/* Add styles to the form container */
.login-container {
  max-width: 400px;
  height: 365px;
  padding: 0px;
  padding-right: 20px;
  /*white transparent background */
  background-color: rgba(255, 255, 255, 0.5);
  font-family: "Cafeteria";
}

/* Full-width input fields */
.login-container input[type=text], .login-container input[type=password] {
  width: 200px;
  padding: 15px;
  margin: 5px 0 5px 0;
  border: none;
  background: #f1f1f1;
}

/* When the inputs get focus, do something */
.login-container input[type=text]:focus, .login-container input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

.loginBtnContainer {
  position:relative;
  height:100%;
}

/* Login buttons */
.loginYellow {
  background-color: #F0E44B;
  position: absolute;
  left: 60px;
  top: 0px;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 75%;
  margin-bottom:2px;
  opacity: 0.8;
}

.loginGreen {
  background-color: #04AA6D;
  position: absolute;
  left: 60px;
  top: 50px;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 75%;
  margin-bottom:2px;
  opacity: 0.8;
}

.loginRed {
  background-color: #DA7551;
  position: absolute;
  left: 60px;
  top: 100px;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 75%;
  margin-bottom:2px;
  opacity: 0.8;
}

/* Add some hover effects to buttons */
.login-container .btn:hover, .open-button:hover {
  opacity: 1;
}

.payment-popup {
  display: block;
  position: absolute;
  bottom: 0;
  left: 18px;
  top: 5px;
  width: 304px;
  height: 370px;
  border: 2px solid #0ed145;  /*green */
  padding: 0px;
  z-index: 5;  /* make this more than wonderBoard tokens */
}

.payment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.payment-header .title {
  font-size: 1.25rem;
  font-weight: bold;
}

.payment-container {
  max-width: 400px;
  width: 300px;
  height: 366px;
  padding: 0px;
  padding-right: 5px;
  background-color: white;
  font-family: "Cafeteria";
}

.payment-portbackground {
  position: absolute;
  top: 255px;
  left: 0px;
  width: 280px; /*295px; */
  height: 62px; /*70px; */
}
.payment-port {
  position: absolute;
  top: 260px;
  left: 0px;
  width: 200px; /*295px; */
  height: 55px;
}
.payment-portA1 {
    position:absolute;
    top: 5px;
    left: 4px;
    width: 46px;
    height: 46px;
}
.payment-portA2 {
    position: absolute;
    top: 5px;
    left: 50px;
    width: 46px;
    height: 46px;
}
.payment-portA3 {
    position: absolute;
    top: 5px;
    left: 96px;
    width: 46px;
    height: 46px;
}
.payment-portB1 {
    position: absolute;
    top: 5px;
    /* left dynamically set by loadPortDivs() */
    width: 46px;
    height: 46px;
}


.payment-dockchoice {
  position: absolute;
  top: 320px;
  left: 0px;
  width: 295px;
  height: 50px;
}

.payment-container .btn:hover, .open-button:hover {
  opacity: 1;
}