body {
  /* min-height: 75rem; */
  padding-top: 4.5rem;
  background-color:#214016;
  overflow-x:hidden;
  font-family: Arial, Helvetica, sans-serif;
}

.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.profile-link {
  color:#fff;
  text-decoration:none;
}
.profile-picture {
  height:32px;
}

.outer-wrapper .row {
  margin-left:5px;
  margin-right:5px;
  max-width: 1600px;
}

.play_area {
  position:relative;
  background: radial-gradient(circle, rgba(25,92,25,1) 0%, rgba(35,56,21,1) 100%);
  height: 500px;
}

.watermark {
  background-image: url('/sheeps/media/trick_schneider_game_arc_trans.png');
  background-size: auto;
  background-position: center 72px;
  background-repeat: no-repeat;
  opacity: 0.03;

  position: absolute;
  width: 100%;
  height: 100%;

}

#login {
  min-width: 400px;
  margin-left: auto;
  margin-right: auto;

}

.waiting-msg, .result-msg {
  position:absolute;
  left:50%;
  top:180px;
  transform: translateX(-50%);
  font-size:24px;
  font-weight:bold;
  background-color: rgba(0,0,0,0.5);
  color:#fff;
  padding:10px;
  border-radius: 5px;
  text-align:center;
  border:2px solid #fff;
  max-width: 80%;
  z-index: 100;
}

.seat {
  position:absolute;
  width: 100px;
  height: 100px;
  border: 2px solid #555;
  border-radius: 5px;
  padding:4px;
  background-color: #fff;
  background-size: auto;
  background-position: center center;
  background-repeat: no-repeat;
}
.seat-sit {
  position:absolute;
}
.seat[pos="5"] .seat-sit {
  margin-top:28px;
}

.user-pic {
  width:100%;
  height:100%;
  position:absolute;
  top:0px;
  left:0px;
}

.seat .seat-name {
  position:relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color:#fff;
  text-align:center;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}
.seat[pos="5"]:not(.empty) .seat-name {
/*color:#fff; */
  text-align: left;
/*text-shadow: none;*/
}


.seat[pos="1"] {
  left:10%;
  margin-left:-50px;
  margin-top:200px;
}
.seat[pos="2"] {
  left:33%;
  margin-left:-50px;
  margin-top:10px;
}
.seat[pos="3"] {
  left:66%;
  margin-left:-50px;
  margin-top:10px;
}
.seat[pos="4"] {
  left:90%;
  margin-left:-50px;
  margin-top:200px;
}
.seat[pos="5"] {
  padding-left:20px;
  margin-top:392px;
  min-height:80px;
}
.seat[pos="5"]:not(.empty) {
  left:0%;
  width:100%;
/*  background-image: none !important; */
  background-color: rgba(0,0,0,0.5);
  background-position-x: 0px;
  background-position-y: 0px;
  color:#fff;
}
.seat[pos="5"].empty {
  left:50%;
  transform:translateX(-50%);
  height:100px;
  min-height:100px;
}
/*
.seat[pos="5"].empty .
*/
.seat[pos="1"] .played-card, .seat[pos="1"] .sweep-card {
  left:105px;
  margin-top:5px;
}
.seat[pos="2"] .played-card, .seat[pos="2"] .sweep-card {
  left:28px;
  margin-top:96px;
}
.seat[pos="3"] .played-card, .seat[pos="3"] .sweep-card {
  left:28px;
  margin-top:96px;
}
.seat[pos="4"] .played-card, .seat[pos="4"] .sweep-card {
  left:-58px;
  margin-top:5px;
}
.seat[pos="5"] .played-card, .seat[pos="5"] .sweep-card {
  left:50%;
  margin-left:-22px;
  margin-top:-134px;
}

.player-icons {
  display:flex;
  flex-direction:column-reverse;
  height:55px;
  width:30px;
  position:absolute;
  display:flex;
}

.seat[pos="1"] .player-icons, .seat[pos="4"] .player-icons, .seat[pos="5"] .player-icons {
  margin-top:-86px;
}
.seat[pos="2"] .player-icons, .seat[pos="3"] .player-icons {
  margin-top:-24px;
  margin-left:96px;
}

.seat .dealer, .seat .picker {
  border:1px solid #fff;
  border-radius:5px;
  color:#fff;
  user-select:none;
}

.seat .dealer {
  background-color:#262;
}
.seat .picker {
  background-color:#f66;
}

.picker label, .dealer label {
  margin-right:5px;
  display:none;
}

.seat[pos="5"] .picker label, .seat[pos="5"] .dealer label {
  display:inline-block;
}
.seat[pos="5"] .player-icons {
  width:84px;
}

.emoji-area {
  position:absolute;
  z-index:30;
  top:10px;
  left:10px;
}

.points-area, .score-area {
  position:absolute;
  z-index:30;
  top:70px;
  left:71px;
  width:24px;
  height:24px;
  border-radius:12px;
  border:1px solid #fff;
  background-color:#262;
  color:#fff;
  text-align:center;
  font-size:12px;
  line-height:22px;
  user-select:none;
}
.score-area {
  border-radius:2px;
  width:auto;
  min-width:20px;
  padding-left:3px;
  padding-right:3px;
  left:2px;
  background-color:#555;
}
.points-area.red {
  background-color:#b22 !important;
  color:#fff !important;
}


.empty {
  background-color:#ccc;
  border-color:#f55;
}

/* same as seat dims so the prompt areas corespond */
.prompt-target {
  position:absolute;
  width: 100px;
  height: 100px;
  z-index:-1;
}
.seat[pos="5"] .prompt-target {
  margin-top:-10px;
  width:100%;
  margin-left:-20px;
}

#options-toggle {
  position:absolute;
  right:10px;
  top:10px;
  padding:2px 0 0;
  line-height:14px;
}

#score-toggle {
  position:absolute;
  right:40px;
  top:10px;
  padding:2px 0 0;
  line-height:14px;
}
#score-offcanvas {
  height:500px;
}

#prev-trick-toggle {
  position:absolute;
  right:70px;
  top:10px;
  padding:2px 0 0;
  line-height:14px;
}
#prev-trick {
  background-color: rgba(0,0,0,0.5);
  padding:4px;
  border-radius: 5px;
  text-align:center;
  border:2px solid #fff;
  position:absolute;
  right:10px;
  top:39px;
/*  width:157px;
  height:109px; */
}

#leave-table, #leave-seat {
  position:absolute;
  right:10px;
  bottom:115px;
}

.prompt {
  background:#fff;
  color:#444;
  padding:4px 8px;
  border-radius:4px;
  font-size:18px;
  display:none;
  z-index:30;
  min-width:120px;
  min-height:50px;
}
.prompt-content .btn {
  margin-right:5px;
}
.prompt[data-show] {
  display:block;
}
.prompt .material-symbols-outlined,
.dealer .material-symbols-outlined,
.picker .material-symbols-outlined,
.blitz .material-symbols-outlined,
.doubler .material-symbols-outlined,
.crack .material-symbols-outlined,
.recrack .material-symbols-outlined,
#leave-seat .material-symbols-outlined,
#leave-table .material-symbols-outlined {
  vertical-align: text-bottom;
  font-size:18px;
  padding-right:4px;
  padding-left:4px;
}
.prompt .spinner-border {
  margin-right:5px;
}
.prompt .call-up {
 /* hand cursor */
 cursor: pointer;

}
.arrow,
.arrow::before {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
  z-index: -1;
}
.arrow {
  visibility: hidden;
}
.arrow::before {
  visibility: visible;
  content: '';
  transform: rotate(45deg);
}
.prompt[data-popper-placement^='top'] > .arrow {
  bottom: -4px;
}
.prompt[data-popper-placement^='bottom'] > .arrow {
  top: -4px;
}
.prompt[data-popper-placement^='left'] > .arrow {
  right: -4px;
}
.prompt[data-popper-placement^='right'] > .arrow {
  left: -4px;
}
.shakeable {
  display:inline-block;
}
.hand {
  position:relative;
/*  margin-top:400px;
  left:50%;
  transform: translateX(-50%); */
  left:140px;
  height:0px;
  top:400px;
  min-width:400px;
}
.held-card, .played-card, .sweep-card {
  position:relative;
  width: 45px;
  height: 63px;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 5px;
  float:left;
  margin-right:3px;
  font-size:14px;
  line-height:10px;
  user-select:none;
}
.sweep-card {
  position:absolute;
}
.held-card img, .played-card img, .sweep-card img {
  position:absolute;
  top:0;
  left:0;
  width:100%;
}
.held-card .top, .played-card .top, .sweep-card .top {
  display:inline-block;
  position:absolute;
  top:6px;
  left:2px;
}
.held-card .bottom, .played-card .bottom, .sweep-card .bottom {
  display:inline-block;
  position:absolute;
  bottom:6px;
  right:2px;
  transform: rotate(180deg);
}

.held-card .top, .played-card .top, .sweep-card .top,
.held-card .bottom, .played-card .bottom, .sweep-card .bottom {
/*
  font-family: Arial, Helvetica, sans-serif;
*/


/*
font-family: "Mouse Memoirs", sans-serif;
font-family: "Crushed", sans-serif;
font-family: "homenaje", sans-serif;
*/
font-family: "Crushed", sans-serif;

  font-weight:400;
  font-style:normal;

}

.flip180 {
  transform: rotate(180deg);
}
/*
.card-sm {
  border:1px solid #000;
  padding:0px 4px 4px 4px;
  border-radius:3px;
  background-color:#fff;
}
*/
.played-card {
  position:absolute;
  z-index:20;
}
.sweep-card {
  position:absolute;
  z-index:21;
}
.red, .red {
  color:red;
}
.black, .black {
  color:black;
}
.held-card.toBury {
  border: 1px solid #f00;
  margin-top:-10px;
}
.held-card.under {
  margin-top:10px;
}
.held-card.under::before {
  content:"UNDER";
  position:absolute;
  top:25px;
  left:-4px;
  color:#f00;
  transform: rotate(70deg);
  font-size:15px;
  z-index:1;
  font-weight: 700;
}
/*
.noto-emoji {
  font-family: "Noto Color Emoji Compat";
  font-size: 20px;
}
*/

.emoji-picker .emoji {
  padding:2px;
  margin-right:2px;
  border:1px solid #aaa;
}

.alert-area {
  position:absolute;
  z-index:30;
  top:10px;
  left:10px;
}

.doubler, .blitz, .call_alert, .leaster_alert, .crack, .recrack {
  border:2px solid #f52;
  background-color: #fff;
  border-radius: 5px;
  font-weight: bold;
  padding:4px;
  margin-bottom:2px;
}

.card-icon {
  display:inline-block;
  border: 1px solid #000;
  border-radius:4px;
  padding:0px 4px 0px 4px;
  background-color:#fff;
  margin-right:4px;
  font-style: normal;
}

.leave-table {
  cursor: pointer;
  position:absolute;
  top:10px;
  right:10px;
  z-index:30;
}


.chat_wrapper {
  border: 1px solid #ddd;
  background-color: #eee;
  border-radius: 5px;
  padding: 15px;
  z-index: 99;
}
.chat_wrapper .members {
  width: 20%;
  overflow-y: scroll;
  overflow-x: hidden;
  background-color: #fff;
  border:1px solid #ddd;
  border-left:2px solid #eee;
  padding: 5px;
  margin-bottom: 5px;
  float: right;
}
.members .member-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat {
  width: 80%;
  overflow-y: scroll;
  border:1px solid #ddd;
  background-color: #fff;
  padding: 5px;
  margin-bottom: 5px;
  height:426px;
}
.chat, .chat_wrapper .members {
  height:397px;
}
.chat p {
  margin-bottom: 0px;
}
.chat p.system {
  color: #06f;
  font-style: italic;
}
.chat_input_text {
  width: 100%;
  border: 1px solid #ddd;
  padding: 5px 60px 5px 5px;
  border-radius: 1px;

}
.chat_input_text:focus {
  outline: none;
}

.chat_input_submit {
  position: absolute;
  margin-left:-54px;
  margin-top:3px;
}
.chat .hand-link {
  vertical-align:text-bottom;
}

.container {
  max-width: 100% !important;
}

.definition {
  border:none;
  background-color:transparent;
}
.definition span.material-symbols-outlined {
  font-size:16px;
}

#toast {
  position:absolute;
  top:10px;
  left:50%;
  transform: translateX(-50%);
  z-index:1090;
}
#toast .toast-body {
  background-color:#fff;
}
#toast .toast-header {
  background-color:#151;
  color:#fff;
}
#toast .btn-close {
  background-color:#fff;
  opacity:1;
}

/* large pip -- Aces and all cards at smaller resolutions */
.pip-l, .pip-ace {
  position:absolute;
  width:37px;
  text-align:center;
  font-size:40px;
  margin-top:22px;
  display:inline-block;
  width:100%;
}

.pip {
  position:absolute;
  font-size:22px !important;
  margin-top:0px !important;
  top:0px;
  text-align:center;
  width:100%;
  z-index:30;
}

/*
.pip1 {
  top:18px;
  left:4px;
}
.pip2 {
  transform: rotate(180deg);
  top:0px;
  left:0px;
}
*/

/* 7s and 8s middle pips */
.pip10 {
  top:23px;
}
.pip11 {
  top:53px;
}

/* 10's middle pips -- slightly off from 7s and 8s */
.pip16 {
  top:20px;
}
.pip17 {
  top:56px;
}

/* left col pips */
.pip4, .pip12, .pip8, .pip14, .pip6 {
  margin-left:-11px
}

/* right col pips */
.pip5, .pip9, .pip13, .pip7, .pip15 {
  margin-left:11px
}

/* top row */
.pip4, .pip1, .pip5 {
  top:10px;
}

/* 2nd row */
.pip12, .pip13 {
  top:27px;
}

/* middle row */
.pip8, .pip3, .pip9 {
  top:36px;
}

/* 4th row */
.pip14, .pip15 {
  top:45px;
}

/* bottom row */
.pip6, .pip2, .pip7 {
  top:65px;
}

/* bottom half pips are flipped */
.pip2, .pip6, .pip7, .pip11, .pip14, .pip15, .pip17 {
  transform: rotate(180deg);
}

.options-label {

}

@media (prefers-color-scheme: dark) {
/*
  body {
    background: var(--bs-dark);
  }
  .play_area {
    background: radial-gradient(circle, rgba(9,34,9,1) 0%, rgba(21,34,9,1) 100%);
  }
*/
/*
  .chat-wrapper {
    background-color:#000;
  }
  .chat, .chat_wrapper .members, .chat_input_text {
    color:#eee;
  }
 */

}