main {
  background-color: #7b904b;
}

/* MAP */
#mapwrap {
  width: 1000px;
  height: 850px;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2666666667);
}

#map {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 1000px;
  height: 850px;
  overflow: clip;
}

#map {
  background-image: url(images/map75.png);
}

@media (min-resolution: 97dpi) {
  #map {
    background-image: url(images/map100.png);
  }
}
/* CURRENT CARD */
#turn_info {
  border-bottom: 1px solid black;
  overflow: clip;
  background-color: gray;
  white-space: normal;
  padding: 8px 0px;
}

#turn_info .card {
  margin: 0 auto;
}

@media (max-height: 800px) {
  #turn_info {
    height: 95px;
  }
  #turn_info:hover {
    height: auto;
  }
}
@media (max-height: 600px) {
  #turn_info {
    display: none;
  }
}
.game_info {
  padding: 3px 4px;
  border-bottom: 1px solid black;
  font-size: 16px;
  line-height: 1.5;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  background: floralwhite;
}

#roles {
  grid-column: 1;
  grid-row: 2;
}

.role_medallions {
  grid-row: 3;
  grid-column: 1/3;
  padding: 3px 4px;
  display: flex;
  flex-direction: row-reverse;
  gap: 4px;
}

.role_info {
  grid-row: 4;
  grid-column: 1/3;
}

#role_Anarchist {
  background-color: rgb(93, 89, 106);
}

#role_Communist {
  background-color: rgb(237, 36, 27);
}

#role_Moderate {
  background-color: rgb(134, 44, 97);
}

.role {
  color: floralwhite;
}
.role a {
  color: floralwhite;
}

#selectable_cards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 12px;
  gap: 12px;
  min-height: 260px;
}

#selectable_cards:empty {
  display: none;
}

.panel {
  min-width: 1271px;
  max-width: 1271px;
  background-color: #58641d;
  margin: 12px auto;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2666666667);
  border: 2px solid #333;
}

.panel_body {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 12px;
  gap: 12px;
  min-height: 260px;
}

.panel_header {
  color: floralwhite;
  user-select: none;
  font-weight: bold;
  text-align: center;
  border-bottom: 2px solid #333;
  background-color: red;
}

#hand_header {
  background-color: #273b09;
}

.panel_header[data-faction-id=a] {
  background-color: rgb(93, 89, 106);
}

.panel_header[data-faction-id=c] {
  background-color: rgb(237, 36, 27);
}

.panel_header[data-faction-id=m] {
  background-color: rgb(134, 44, 97);
}

.front {
  position: absolute;
  box-sizing: border-box;
  width: 93px;
  height: 102px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px;
  border-radius: 20px;
}

.contributions {
  display: flex;
  flex-direction: row;
  gap: 2px;
  margin-top: 15px;
  height: 25px;
  z-index: -1;
}
.contributions .faction_token {
  z-index: -1;
}

.front .value {
  font-weight: bold;
  font-size: 30px;
  margin-top: auto;
  z-index: -1;
}

#madrid_front {
  width: 104px;
  height: 114px;
  border-radius: 23px;
}

#madrid_front .contributions {
  padding: 0px 2px;
}

.card {
  background-size: 100% 100%;
  width: 198px;
  height: 270px;
  border-radius: 5px;
  box-shadow: 0 0 0 1px #333;
}

.card[data-card-id="1"] {
  background-image: url("images/cards100/card_1.png");
}

.card[data-card-id="2"] {
  background-image: url("images/cards100/card_2.png");
}

.card[data-card-id="3"] {
  background-image: url("images/cards100/card_3.png");
}

.card[data-card-id="4"] {
  background-image: url("images/cards100/card_4.png");
}

.card[data-card-id="5"] {
  background-image: url("images/cards100/card_5.png");
}

.card[data-card-id="6"] {
  background-image: url("images/cards100/card_6.png");
}

.card[data-card-id="7"] {
  background-image: url("images/cards100/card_7.png");
}

.card[data-card-id="8"] {
  background-image: url("images/cards100/card_8.png");
}

.card[data-card-id="9"] {
  background-image: url("images/cards100/card_9.png");
}

.card[data-card-id="10"] {
  background-image: url("images/cards100/card_10.png");
}

.card[data-card-id="11"] {
  background-image: url("images/cards100/card_11.png");
}

.card[data-card-id="12"] {
  background-image: url("images/cards100/card_12.png");
}

.card[data-card-id="13"] {
  background-image: url("images/cards100/card_13.png");
}

.card[data-card-id="14"] {
  background-image: url("images/cards100/card_14.png");
}

.card[data-card-id="15"] {
  background-image: url("images/cards100/card_15.png");
}

.card[data-card-id="16"] {
  background-image: url("images/cards100/card_16.png");
}

.card[data-card-id="17"] {
  background-image: url("images/cards100/card_17.png");
}

.card[data-card-id="18"] {
  background-image: url("images/cards100/card_18.png");
}

.card[data-card-id="19"] {
  background-image: url("images/cards100/card_19.png");
}

.card[data-card-id="20"] {
  background-image: url("images/cards100/card_20.png");
}

.card[data-card-id="21"] {
  background-image: url("images/cards100/card_21.png");
}

.card[data-card-id="22"] {
  background-image: url("images/cards100/card_22.png");
}

.card[data-card-id="23"] {
  background-image: url("images/cards100/card_23.png");
}

.card[data-card-id="24"] {
  background-image: url("images/cards100/card_24.png");
}

.card[data-card-id="25"] {
  background-image: url("images/cards100/card_25.png");
}

.card[data-card-id="26"] {
  background-image: url("images/cards100/card_26.png");
}

.card[data-card-id="27"] {
  background-image: url("images/cards100/card_27.png");
}

.card[data-card-id="28"] {
  background-image: url("images/cards100/card_28.png");
}

.card[data-card-id="29"] {
  background-image: url("images/cards100/card_29.png");
}

.card[data-card-id="30"] {
  background-image: url("images/cards100/card_30.png");
}

.card[data-card-id="31"] {
  background-image: url("images/cards100/card_31.png");
}

.card[data-card-id="32"] {
  background-image: url("images/cards100/card_32.png");
}

.card[data-card-id="33"] {
  background-image: url("images/cards100/card_33.png");
}

.card[data-card-id="34"] {
  background-image: url("images/cards100/card_34.png");
}

.card[data-card-id="35"] {
  background-image: url("images/cards100/card_35.png");
}

.card[data-card-id="36"] {
  background-image: url("images/cards100/card_36.png");
}

.card[data-card-id="37"] {
  background-image: url("images/cards100/card_37.png");
}

.card[data-card-id="38"] {
  background-image: url("images/cards100/card_38.png");
}

.card[data-card-id="39"] {
  background-image: url("images/cards100/card_39.png");
}

.card[data-card-id="40"] {
  background-image: url("images/cards100/card_40.png");
}

.card[data-card-id="41"] {
  background-image: url("images/cards100/card_41.png");
}

.card[data-card-id="42"] {
  background-image: url("images/cards100/card_42.png");
}

.card[data-card-id="43"] {
  background-image: url("images/cards100/card_43.png");
}

.card[data-card-id="44"] {
  background-image: url("images/cards100/card_44.png");
}

.card[data-card-id="45"] {
  background-image: url("images/cards100/card_45.png");
}

.card[data-card-id="46"] {
  background-image: url("images/cards100/card_46.png");
}

.card[data-card-id="47"] {
  background-image: url("images/cards100/card_47.png");
}

.card[data-card-id="48"] {
  background-image: url("images/cards100/card_48.png");
}

.card[data-card-id="49"] {
  background-image: url("images/cards100/card_49.png");
}

.card[data-card-id="50"] {
  background-image: url("images/cards100/card_50.png");
}

.card[data-card-id="51"] {
  background-image: url("images/cards100/card_51.png");
}

.card[data-card-id="52"] {
  background-image: url("images/cards100/card_52.png");
}

.card[data-card-id="53"] {
  background-image: url("images/cards100/card_53.png");
}

.card[data-card-id="54"] {
  background-image: url("images/cards100/card_54.png");
}

.card[data-card-id="55"] {
  background-image: url("images/cards100/card_55.png");
}

.card[data-card-id="56"] {
  background-image: url("images/cards100/card_56.png");
}

.card[data-card-id="57"] {
  background-image: url("images/cards100/card_57.png");
}

.card[data-card-id="58"] {
  background-image: url("images/cards100/card_58.png");
}

.card[data-card-id="59"] {
  background-image: url("images/cards100/card_59.png");
}

.card[data-card-id="60"] {
  background-image: url("images/cards100/card_60.png");
}

.card[data-card-id="61"] {
  background-image: url("images/cards100/card_61.png");
}

.card[data-card-id="62"] {
  background-image: url("images/cards100/card_62.png");
}

.card[data-card-id="63"] {
  background-image: url("images/cards100/card_63.png");
}

.card[data-card-id="64"] {
  background-image: url("images/cards100/card_64.png");
}

.card[data-card-id="65"] {
  background-image: url("images/cards100/card_65.png");
}

.card[data-card-id="66"] {
  background-image: url("images/cards100/card_66.png");
}

.card[data-card-id="67"] {
  background-image: url("images/cards100/card_67.png");
}

.card[data-card-id="68"] {
  background-image: url("images/cards100/card_68.png");
}

.card[data-card-id="69"] {
  background-image: url("images/cards100/card_69.png");
}

.card[data-card-id="70"] {
  background-image: url("images/cards100/card_70.png");
}

.card[data-card-id="71"] {
  background-image: url("images/cards100/card_71.png");
}

.card[data-card-id="72"] {
  background-image: url("images/cards100/card_72.png");
}

.card[data-card-id="73"] {
  background-image: url("images/cards100/card_73.png");
}

.card[data-card-id="74"] {
  background-image: url("images/cards100/card_74.png");
}

.card[data-card-id="75"] {
  background-image: url("images/cards100/card_75.png");
}

.card[data-card-id="76"] {
  background-image: url("images/cards100/card_76.png");
}

.card[data-card-id="77"] {
  background-image: url("images/cards100/card_77.png");
}

.card[data-card-id="78"] {
  background-image: url("images/cards100/card_78.png");
}

.card[data-card-id="79"] {
  background-image: url("images/cards100/card_79.png");
}

.card[data-card-id="80"] {
  background-image: url("images/cards100/card_80.png");
}

.card[data-card-id="81"] {
  background-image: url("images/cards100/card_81.png");
}

.card[data-card-id="82"] {
  background-image: url("images/cards100/card_82.png");
}

.card[data-card-id="83"] {
  background-image: url("images/cards100/card_83.png");
}

.card[data-card-id="84"] {
  background-image: url("images/cards100/card_84.png");
}

.card[data-card-id="85"] {
  background-image: url("images/cards100/card_85.png");
}

.card[data-card-id="86"] {
  background-image: url("images/cards100/card_86.png");
}

.card[data-card-id="87"] {
  background-image: url("images/cards100/card_87.png");
}

.card[data-card-id="88"] {
  background-image: url("images/cards100/card_88.png");
}

.card[data-card-id="89"] {
  background-image: url("images/cards100/card_89.png");
}

.card[data-card-id="90"] {
  background-image: url("images/cards100/card_90.png");
}

.card[data-card-id="91"] {
  background-image: url("images/cards100/card_91.png");
}

.card[data-card-id="92"] {
  background-image: url("images/cards100/card_92.png");
}

.card[data-card-id="93"] {
  background-image: url("images/cards100/card_93.png");
}

.card[data-card-id="94"] {
  background-image: url("images/cards100/card_94.png");
}

.card[data-card-id="95"] {
  background-image: url("images/cards100/card_95.png");
}

.card[data-card-id="96"] {
  background-image: url("images/cards100/card_96.png");
}

.card[data-card-id="97"] {
  background-image: url("images/cards100/card_97.png");
}

.card[data-card-id="98"] {
  background-image: url("images/cards100/card_98.png");
}

.card[data-card-id="99"] {
  background-image: url("images/cards100/card_99.png");
}

.card[data-card-id="100"] {
  background-image: url("images/cards100/card_100.png");
}

.card[data-card-id="101"] {
  background-image: url("images/cards100/card_101.png");
}

.card[data-card-id="102"] {
  background-image: url("images/cards100/card_102.png");
}

.card[data-card-id="103"] {
  background-image: url("images/cards100/card_103.png");
}

.card[data-card-id="104"] {
  background-image: url("images/cards100/card_104.png");
}

.card[data-card-id="105"] {
  background-image: url("images/cards100/card_105.png");
}

.card[data-card-id="106"] {
  background-image: url("images/cards100/card_106.png");
}

.card[data-card-id="107"] {
  background-image: url("images/cards100/card_107.png");
}

.card[data-card-id="108"] {
  background-image: url("images/cards100/card_108.png");
}

.card.event {
  position: absolute;
  width: 132px;
  height: 180px;
}

.blank_marker {
  box-sizing: border-box;
  position: absolute;
  background-color: red;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #333;
  margin-top: 1px;
}

.faction_token {
  box-sizing: border-box;
  background-size: 100% 100%;
}

#glory .faction_token {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 4px;
}

.contributions .faction_token {
  width: 25px;
  height: 25px;
  border-radius: 4px;
}

.faction_token[data-faction-id=a] {
  border: 1px #333 solid;
  background-image: url("images/factions/anarchists.png");
}

.faction_token[data-faction-id=c] {
  border: 1px #333 solid;
  background-image: url("images/factions/communitsts.png");
}

.faction_token[data-faction-id=m] {
  border: 1px #333 solid;
  background-image: url("images/factions/moderates.png");
}

.standee {
  box-sizing: border-box;
  position: absolute;
  width: 29px;
  height: 35px;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 4px;
  box-shadow: 0 0 0 1px #333;
  transition-property: top, left;
  transition-duration: 700ms;
  transition-timing-function: ease;
  z-index: 1;
}

.blank_marker.action,
.bonus.action,
.card.action,
.front.action,
.medallion.action,
.standee.action {
  box-shadow: 0 0 0 3px white;
}

.blank_marker.action {
  z-index: 2;
}

.blank_marker.action:hover,
.bonus.action:hover,
.card.action:hover,
.card.selected,
.front.action:hover,
.medallion.action:hover,
.standee.action:hover {
  box-shadow: 0 0 0 3px yellow;
}

.blank_marker.action:hover {
  opacity: 0.5;
}

.standee[data-standee-id="0"] {
  background-image: url("images/standees/standee_0.png");
}

.standee[data-standee-id="1"] {
  background-image: url("images/standees/standee_1.png");
}

.standee[data-standee-id="2"] {
  background-image: url("images/standees/standee_2.png");
}

.standee[data-standee-id="3"] {
  background-image: url("images/standees/standee_3.png");
}

.standee[data-standee-id="4"] {
  background-image: url("images/standees/standee_4.png");
}

.bonus {
  box-sizing: border-box;
  position: absolute;
  width: 54px;
  height: 54px;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 50%;
}

.bonus[data-bonus-id="0"][data-bonus-on="0"] {
  background-image: url("images/bonus/bonus_0_off.png");
}

.bonus[data-bonus-id="0"][data-bonus-on="1"] {
  background-image: url("images/bonus/bonus_0_on.png");
}

.bonus[data-bonus-id="1"][data-bonus-on="0"] {
  background-image: url("images/bonus/bonus_1_off.png");
}

.bonus[data-bonus-id="1"][data-bonus-on="1"] {
  background-image: url("images/bonus/bonus_1_on.png");
}

.initiative_token {
  width: 47px;
  height: 47px;
  background-size: cover;
  background-repeat: no-repeat;
  margin-right: auto;
  background-image: url("images/initiative_clockwise.png");
}

.initiative_token[data-year="2"] {
  background-image: url("images/initiative_counter_clockwise.png");
}

.medallion {
  width: 47px;
  height: 47px;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 1px #333;
  border-radius: 10px;
}

#medallions .medallion {
  box-sizing: border-box;
  position: absolute;
}

.medallion[data-medallion-id="0"] {
  background-image: url("images/medallions/medallion_0.png");
}

.medallion[data-medallion-id="1"] {
  background-image: url("images/medallions/medallion_1.png");
}

.medallion[data-medallion-id="2"] {
  background-image: url("images/medallions/medallion_2.png");
}

.medallion[data-medallion-id="3"] {
  background-image: url("images/medallions/medallion_3.png");
}

.medallion[data-medallion-id="4"] {
  background-image: url("images/medallions/medallion_4.png");
}

.medallion[data-medallion-id="5"] {
  background-image: url("images/medallions/medallion_5.png");
}

.medallion[data-medallion-id="6"] {
  background-image: url("images/medallions/medallion_6.png");
}

.medallion[data-medallion-id="7"] {
  background-image: url("images/medallions/medallion_7.png");
}

.medallion[data-medallion-id="8"] {
  background-image: url("images/medallions/medallion_8.png");
}

#log {
  background-color: floralwhite;
}

#log .h1,
#log .h2 {
  font-size: 10px;
  padding-top: 2px;
  padding-bottom: 2px;
  text-align: center;
}

#log .h1 {
  background-color: rgb(233, 223, 200);
}

#log .h2 {
  background-color: rgb(233, 223, 200);
}

#log .h2.anarchist {
  background-color: rgb(93, 89, 106);
  color: floralwhite;
}

#log .h2.communist {
  background-color: rgb(237, 36, 27);
  color: floralwhite;
}

#log .h2.moderate {
  background-color: rgb(134, 44, 97);
  color: floralwhite;
}

#log .h2.fascist {
  background-color: rgb(183, 144, 105);
}

#log div.i {
  padding-left: 32px;
  text-indent: -12px;
}

#log div.ii {
  padding-left: 44px;
  text-indent: -12px;
}