@import "card_layout_back.css";

.crewDetail_container {
  display: flex;
  justify-content: space-around;
  gap: 2em;
}

.crewDetail_container > div {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.crewDetail_container.dual_view > div {
  width: 50%;
}

@media only screen and (max-width: 799px) {
  .crewDetail_container {
    flex-direction: column;
  }
  .crewDetail_container.dual_view > div {
    width: 100%;
  }
  .crewDetail_container > div:not(:first-child) {
    margin-top: 4em;
    padding-top: 2em;
    border-top: 8px dashed #ccc;
  }
}

.gamepieceInfo_container {
  padding: 3em;
  position: relative;
}
@media only screen and (max-width: 899px) {
  .gamepieceInfo_container {
    padding: 0.1em;
  }
  .gamepieceInfo_container h1 {
    margin-top: 1.2em;
  }
}
@media only screen and (max-width: 699px) {
  .gamepieceInfo_container {
    line-height: 1.65em;
  }
}

.gamepieceInfo_container .titleName {
  margin: 0;
  text-align: center;
  font-size: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gamepieceInfo_container .name_and_id {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.gamepieceInfo_container .numid_top {
  color: #535353;
  font-size: 0.8em;
}


@media only screen and (max-width: 899px) {
  .gamepieceInfo_container .titleName {
    margin-top: 1em;
  }
}
@media only screen and (max-width: 599px) {
  .gamepieceInfo_container .titleName {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.5em;
  }
  .gamepieceInfo_container .titleName > span {
    flex-grow: 1;
  }
}

.gamepieceInfo_container .titleName i {
  color: rgba(0, 0, 0, 0.15);
  font-size: 0.8em;
  padding: 0.1em;
  margin: 0 0.2em;
  cursor: pointer;
  position: relative;
}

.gamepieceInfo_container .titleName i:hover {
  color: #4c8bf5;
}

.gamepieceInfo_container .titleName i:first-of-type {
  margin-left: 0.8em;
}
.gamepieceInfo_container .titleName i:last-of-type {
  margin-right: 0.8em;
}

.gamepieceInfo_container .titleName i a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

.full_card_container {
  display: flex;
  justify-content: center;
  font-size: 18px;
  position: relative;
  gap: 1.5em;
  flex-wrap: wrap;
}

.crew_card,
.ship_card {
  position: relative;
  overflow: hidden;
  background-color: #f7de92;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: 6px 12px 10px -5px rgba(0, 0, 0, 0.75);
  flex-shrink: 0;
}

.ship_card {
  width: 320px;
  min-width: 320px;
  height: 200px;
  border-radius: 13px;
  padding: 10px;
  font-family: windlass, serif;
}


.card_boat_aptitude .dice {
  height: 1em;
  display: inline-block;
  vertical-align: middle;
}

.please_report_issues {
  margin: 2em 0 0 0;
  color: #7a7a7a;
  text-align: center;
}

.card_container_1 {
  font-family: windlass, serif;
}

.card_container_1_big,
.card_container_1_2 {
  font-family: minister, serif;
}
.card_container_2 {
  font-family: minister, serif;
}

/* raw info container */
.rawInfo_container {
  margin: 0;
  position: relative;
  width: 100%;
}



.rawInfo_container table {
  flex-grow: 1;
  border-collapse: collapse;
}

.rawInfo_container tr td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  max-width: 45em;
}

.rawInfo_container table tr td:first-child:not(.rawInfo_expanded_text_container) {
  white-space: nowrap;
  padding-right: 0.5em;
}
.rawInfo_container table tr td.rawInfo_expanded_title {
  border: none;
}

/*@media only screen and (max-width: 799px) {*/
/*  .rawInfo_container > div {*/
/*    flex-direction: column;*/
/*    justify-content: center;*/
/*  }*/
/*}*/

.rawInfo_container.doubleCard > div {
  flex-direction: column;
}

.rawInfo_expanded_title {
  padding-top: 0.6em;
}
.rawInfo_expanded_text_container {
  padding-bottom: 0.6em;
  line-height: 1.4em;
}

.rawInfo_container .gameImg_container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 15px;
  padding: 0;
}

@media only screen and (min-width: 800px) {
  .rawInfo_container .gameImg_container {
    max-width: 33%;
    flex: 0 0 auto; /* Prevent the text from pushing too much the image */
  }
}

.rawInfo_container .gameImg_container img {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  max-width: 100%;
}

.whitebox .adminActions {
  position: absolute;
  display: flex;
  top: -23px;
  right: 15px;
  font-size: 1.5em;
  color: #d2d2d2;
}

.whitebox .adminActions a {
  text-decoration: none;
  color: inherit;
  background-color: #fff;
  border-radius: 50%;
  padding: 5px;
  box-shadow: 0 -5px 14px -14px #000;
}

.whitebox .adminActions i {
  display: flex;
  justify-content: center;
  width: 1.1em;
  margin: 5px;
}

.whitebox .adminActions a:hover {
  color: #428bca;
  cursor: pointer;
}

/* report */
.reportDatabaseMistakes_redirect {
  margin-top: 3em;
  text-align: end;
}
@media only screen and (max-width: 799px) {
  .reportDatabaseMistakes_redirect {
    margin-top: 2em;
    text-align: center;
  }
}

.comingSoonText {
  opacity: 0.6;
  text-align: center;
  padding: 15px;
  border-radius: 1em;
  border: 2px dashed rgba(0, 0, 0, 0.2);
}

.lookingForBetterPic {
  display: flex;
  align-items: center;
  background-color: #fff4dd;
  color: #e3aa00;
  margin: 1em;
  padding: 0.6em;
  border-radius: 10px;
  font-size: 0.8em;
}
.lookingForBetterPic i {
  margin: 0 8px 0 0;
  font-size: 1.5em;
}

.column_stats {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 2em;
}

.column_stats > div {
  display: flex;
  flex-direction: column;
  gap: 2em;
}

/*@media (min-width: 899px) {*/
/*  .column_stats > div {*/
/*    margin-top: 2em;*/
/*  }*/
/*  .column_stats > div:first-child {*/
/*    margin-right: 1.2em;*/
/*  }*/
/*  .column_stats .rawInfo_container:first-child {*/
/*    margin-top: 0;*/
/*  }*/
/*}*/
/*.column_stats > div {margin-right: 30px;}*/

@media only screen and (max-width: 799px) {
  .column_stats {
    display: block;
  }
  .column_stats > div {
    margin-right: 0;
  }
}






/* Costing algorithm table */

.costing_table_container table {
  width: 100%;
}
.costing_table_container table td {
  text-align: center;
}
.costing_table_container table tr.total {
  font-weight: bold;
  font-size: 1.25em;
}
.costing_table_container table tr.diff .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  font-size: 1.1em;
  font-weight: bold;
}
.costing_table_container table tr.diff img {
  height: 0.7em;
}
.costing_table_container table tr.total td {
  line-height: 3em;
}

.costing_table_container img {
  height: 1.5em;
}

.costing_table_container .ref_compare {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.costing_table_container .ref_compare span {
  font-size: 1.4em;
  font-weight: bold;
}







/* technical shape display (ships) */
.techshape_container {
  display: flex;
  align-items: center;
  font-size: 0.98em;
}
.techshape_container img {
  height: 100px;
}
.techshape_container .infos {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}
.techshape_container .infos p {
  width: 100%;
  margin: 0.3em 0 0.3em 1em;
}
.techshape_container .infos p.name {
  font-weight: bold;
  font-family: monospace;
  font-size: 1.5em;
}

/* KEYWORDS */

.keywords * {
  box-sizing: border-box;
}

.keywords {
  display: flex;
  flex-direction: column !important;
}

.keywords .item {
  margin-bottom: 1.2em;
  text-decoration: none;
  color: inherit;
  display: inline-block;
  width: 100%;
  padding: 2px;
}

.keywords .item:hover {
  background-color: rgba(0, 0, 0, 0.02);
  border-radius: 5px;
}
.keywords .item:hover .title {
  text-decoration: underline;
}
.keywords .item:hover .title span {
  text-decoration: none;
}

.keywords > p:first-of-type {
  opacity: 0.8;
  font-style: italic;
  margin-bottom: 1em;
}

.keywords p {
  margin: 0;
}

.keywords .title {
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 0.2em;
}

.keywords .title span {
  margin: 0 0 0 1.3em;
  font-weight: initial;
}

.keywords .title span i {
  margin: 0 0.3em 0 0;
}

.keywords .desc {
  margin-left: 0.4em;
}

.keywords div.kw_container {
  display: flex;
  align-items: center;
}

.keywords div.kw_container .content_container {
  flex-grow: 1;
}

.keywords .deleteShipKeywordLink {
  color: rgba(255, 20, 20, 0.1);
  margin: 0 0 1.2em 0;
}

.keywords .deleteShipKeywordLink:hover {
  color: rgba(255, 20, 20, 0.7);
  cursor: pointer;
}

.monospaced {
  font-family: monospace;
  font-size: 1.3em;
  letter-spacing: 0.04em;
}

.hide_table_column {
  display: none;
}

.expansion_results_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2em;
}
.expansion_results_container > div {
  margin: 0;
  min-width: 34%; /* this is to prevent three containers to be right to each-other since 34*3 is greater than 100 */
}

.expansion_description {
  width: 100%;
  max-width: 120ch;
  margin: 1.4em 0;
  text-align: justify;
}

@media only screen and (max-width: 799px) {
  .expansion_description {
    padding: 0.4em 0.6em;
    font-size: 0.9em;
  }
}

.expansion_description > p,
.expansion_description > img {
  display: inline;
}
.expansion_description > img {
  float: left;
  width: 4em;
  margin: 0 1em 0 0;
}
.expansion_description > p {
  float: none;
}
.expansion_description > p i {
  color: rgba(0, 0, 0, 0.5);
}

/* username and badge alignment fix */
.rawInfo_container td.author div {
  display: flex;
  align-items: center;
  justify-content: left;
  text-align: left;
}
.rawInfo_container td.author div .userSelectedBadge {
  margin-left: 0;
}

/* author in items */
.author .author_link {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

.author .author_avatar {
  border-radius: 15%;
  margin: 1px 0.35em 1px 0;
  width: 1.4em;
}

/* alternates */
.alternatives_container img {
  width: 6em;
  margin: 0 0.5em 0 0;
}
.alternatives_container h2 {
  margin: 0 0 0.3em 0;
}
.alternatives_container .intro {
  margin: 0;
}
.alternatives_container .infos p {
  margin: 0;
  color: black;
}
.alternatives_container a {
  text-decoration: none;
}
.alternatives_container tr:hover p {
  color: #005bad;
  text-decoration: underline;
}
.alternatives_container tr:hover td:last-child {
  background-color: rgba(0, 0, 0, 0.015);
  border-radius: 15px;
}
.alternatives_container .infos .name {
  margin: 0 0 0.3em 0;
  font-weight: bold;
  font-size: 1.1em;
}
@media (max-width: 799px) {
  .alternatives_container img {
    width: 3em;
  }
  .alternatives_container .infos p {
    line-height: 1.2em;
  }
}

/* printable stuff */
#printableArea.printableReady {
  position: absolute;
  z-index: 99999;
  top: 0;
  left: 0;
}
#printableArea.printableReady > div {
  margin: 0;
  box-shadow: none;
}
#printableArea.printableReady > div:first-child {
  margin: 0 2px 0 0;
}
#printableArea.printableReady > div:last-child {
  margin: 0;
}

.S {
  color: white;
  text-shadow: 0.5px 0 white, -0.5px -0.5px 1px black, 0.5px -0.5px 1px black, 0.5px 0.5px 1px black, -0.5px 0.5px 1px black;
  font-size: 1.5em;
  vertical-align: middle;
  line-height: 0.8em;
}

.L {
  color: red;
  text-shadow: 0.5px 0 red;
}

.card_boat_shipName {
  white-space: nowrap;
}

.card_boat_aptitude .L {
  font-size: 1.5em;
  vertical-align: middle;
}

.card_boat_statRow.BC {
  font-family: kopubbatang, serif;
  letter-spacing: -0.3px;
  font-size: 0.7em;
}

.card_boat_cost.BC {
  font-family: kopubbatang, serif;
  letter-spacing: -0.3px;
  font-size: 0.7em;
}

.card_boat_cost.BC span {
  font-family: windlass, serif;
  font-size: 0.85em;
}

.card_boat_cost.BC p {
  font-family: kopubbatang, serif;
  margin: 0.4em 0.1em 0 0;
}

[class*="aptitude"] .L {
  font-size: 1.25em;
  line-height: 0.6em;
}

.txtBlack {
  color: #000000;
}

.txtWhite {
  color: #ffffff;
}

.windlass {
  font-family: Windlass, serif;
}

.minister {
  font-family: Minister, serif;
}

.kopubbatang {
  font-family: kopubbatang, serif;
  letter-spacing: -0.3px;
}

/* FS is the only set with white speed for L for whatever reason */
.whiteSpeed .L {
  color: #ffffff !important;
}






.costing_credits {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0.3;
  padding: 0.5em 0.8em;
}







/*  wip icon  */
.wipIconContainer {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

@media (max-width: 599px) {
  .wipIconContainer {
    flex-direction: column-reverse;
  }
}

#wipBadge {
  display: flex;
  align-items: center;
  margin: 0;
  background-color: rgba(255, 171, 0, 0.13);
  border: 1px solid #dba060;
  color: #bf6f16 !important;
  font-weight: bold;
  gap: 3px;
  font-size: 0.45em;
  padding: 0.2em 0.7em;
  border-radius: 02em;
}

#wipBadge i {
  margin: 0;
  font-size: 1.2em;
  color: inherit;
}