.game-board {
    min-width: 500px;
}

.player.self {
    font-weight: bold;
}

.host-controls {
    position: fixed;
    right: 0;
    bottom: 0;
    padding: 6px;
    background: rgba(255, 252, 245, 0.58);
    user-select: none;
    cursor: default;
    text-align: right;
    z-index: 2;
}

.little-controls {
    text-align: left;
    border-bottom: 1px solid;
    padding-bottom: 6px;
}

.little-controls input {
    width: 45px;
    background: transparent;
    border: 1px solid;
    color: #000000;
    padding: 2px;
    margin: 3px;
}

.little-controls div {
    display: inline-block;
}

.little-controls i {
    vertical-align: middle;
    margin-right: 2px;
}

.little-controls .value {
    vertical-align: middle;
    margin: 0 3px;
}

.host-controls-menu {
    display: none;
    margin-bottom: 9px;
}

.host-controls:hover .host-controls-menu, .host-controls:focus .host-controls-menu {
    display: block;
}

.settings-button {
    cursor: pointer;
}

.settings-button:hover {
    background: #d4d4d4;
}

.settings-button.inactive {
    opacity: 0.3;
}

.side-buttons {
    display: none;
}

.host-controls:hover .side-buttons, .host-controls:focus .side-buttons {
    display: inline-block;
}

#avatar-input {
    display: none;
}

body {
    background: url(media/bg.png) black;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
}

.kicked {
    color: white;
    padding: 22px;
    text-align: center;
}

.player {
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.player-host-controls {
    display: none;
    vertical-align: text-bottom;
    position: absolute;
    bottom: -11px;
}

.spectators .player-host-controls {
    position: static;
}

.player-host-controls > * {
    margin-left: 3px;
}

.player:hover .player-host-controls, .player:focus .player-host-controls {
    display: flex;
    flex: 0;
}

.player .host-button, .command .host-button {
    font-size: 16px;
    cursor: pointer;
    vertical-align: middle;
}

.spectators-section {
    display: none;
    text-align: center;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1;
}

.spectators-section.active {
    display: block;
}

.spectators {
    display: inline-block;
    padding: 4px 6px;
    cursor: pointer;
    background: rgba(255, 252, 245, 0.58);
    user-select: none;
    white-space: nowrap;
    height: 20px;
}

.spectators .player {
    display: inline-block;
    margin: 0 4px;
    padding: 0;
    width: auto;
}

.spectators .player:hover .player-host-controls, .spectators .player:focus .player-host-controls {
    display: inline-block;
}

.avatar {
    width: 82px;
    height: 82px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-buttons {
    display: none;
    position: absolute;
    left: 0px;
    bottom: 0px;
}

.avatar:hover .avatar-buttons, .avatar:focus .avatar-buttons {
    display: block;
}

.avatar-buttons i {
    color: #4c4c4c;
    background: rgb(141, 141, 141);
    z-index: 2;
    padding: 1px 3px;
    margin-right: 3px;
}

.avatar-buttons i:hover {
    color: #222222;
    cursor: pointer;
}

.player-name {
    text-align: center;
    width: 100%;
}

.master-slot .player-name {
    display: block;
}

.master-slot .player-name-text {
    width: 75px;
}

.spectators .player-name-text {
    display: inline;
}

.player-slot {
    display: flex;
    margin: 6px;
    padding: 5px;
    background: #adadadc2;
    color: white;
    border-radius: 4px;
    z-index: 1;
    position: relative;
}

.player-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.join-slot-button {
    text-decoration: underline;
    cursor: pointer;
}

.player-name-text {
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 82px;
}

.player-role {
    width: 46px;
    height: 64px;
    position: absolute;
    top: -9px;
    left: -16px;
    background: url(media/roles.jpg);
    background-size: cover;
    box-shadow: 0 0 1px 1px #6b6b6b;
}

.bg-color-0 {
    background: #c65186;
}

.color-slot-0 {
    color: #c65186;
}

.bg-color-1 {
    background: #9b9b9b;
}

.color-slot-1 {
    color: #9b9b9b;
}

.bg-color-2 {
    background: #65371d;
}

.color-slot-2 {
    color: #65371d;
}

.bg-color-3 {
    background: #b01008;
}

.color-slot-3 {
    color: #ca0a00;
}

.bg-color-4 {
    background: #e16600;
}

.color-slot-4 {
    color: #e16600;
}

.bg-color-9 {
    background: #75279b;
}

.color-slot-9 {
    color: #75279b;
}

.bg-color-8 {
    background: #24367a;
}

.color-slot-8 {
    color: #2752f5;
}

.bg-color-7 {
    background: #096060;
}

.color-slot-7 {
    color: #096060;
}

.bg-color-6 {
    background: #257007;
}

.color-slot-6 {
    color: #2d9603;
}

.bg-color-5 {
    background: #baba45;
}

.color-slot-5 {
    color: #baba45;
}

.help-panel {
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(255, 252, 245, 0.58);
    z-index: 2;
    padding: 6px;
    user-select: none;
    display: none;
}

.help-panel:hover, .help-panel:focus {
    background: rgba(255, 252, 245, 0.86);
}

.status-message {
    display: none;
    margin-left: 5px;
    margin-top: -2px;
    vertical-align: super;
}

.help-panel:hover .status-message, .help-panel:focus .status-message {
    display: inline-block;
}

.game-table {
    display: flex;
    flex-flow: column;
    align-items: center;
    user-select: none;
}

.game-table-top {
    width: 717px;
    height: 423px;
    justify-content: center;
    align-items: center;
    display: flex;
    border: 13px solid #4c1c1c;
    box-sizing: border-box;
    background: url(media/table-bg.jpg);
    background-size: contain;
    position: relative;
}

.game-track-section {
    width: 452px;
    height: 194px;
    background: url(media/policy-track.png) bottom;
    background-size: cover;
    display: flex;
}

.tri-team .game-track-section {
    background: url(media/policy-track-tri.png) bottom;
    background-size: cover;
}

.middle-row {
    display: flex;
}

.main-slots {
    display: flex;
    width: 487px;
    justify-content: space-between;
}

.side-slots {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.player-table-section {
    position: absolute;
    width: 138px;
    height: 90px;
    display: flex;
    flex-direction: column;
    pointer-events: none;
}

.main-slots.bottom .player-table-section {
    top: -104px;
    left: -22px;
}

.main-slots.top .player-table-section {
    bottom: -104px;
    left: -22px;
    flex-direction: column-reverse;
}

.side-slots.left .player-table-section {
    top: 10px;
    right: -133px;
    transform: rotateZ(90deg);
}

.side-slots.right .player-table-section {
    top: 10px;
    left: -133px;
    transform: rotateZ(-90deg);
}

.plate-section {
    height: 49px;
}

.plate {
    background: url(media/plates.jpg);
    width: 115px;
    height: 40px;
    background-size: cover;
    margin: auto;
}

.plate.prev {
    opacity: 0.7;
}

.side-slots .plate {
    transform: rotateZ(180deg);
}

.plate.button {
    opacity: 0.3;
    cursor: pointer;
    pointer-events: auto;
}

.plate.button:hover {
    opacity: 0.6;
}

.vote-card {
    width: 114px;
    height: 159px;
    background: url(media/voting-cards.png);
    margin: 8px;
    background-size: cover;
}

.vote-card.ja {
    background-position-x: -114px;
}

.vote-card.nein {
    background-position-x: -231px;
}

.vote-section {
    display: flex;
    justify-content: center;
    height: 60px;
}

.vote-section .vote-card {
    width: 38px;
    height: 53px;
    transform: rotateZ(-90deg);
    margin: -3px;
}

.vote-section .vote-card.ja {
    background-position-x: -38px;
}

.vote-section .vote-card.nein {
    background-position-x: -77px;
}

.hand-section {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: flex;
    align-items: flex-end;
}

.vote-cards {
    display: flex;
    align-items: flex-end;
}

.vote-card.selected {
    margin-bottom: 25px;
}

.vote-card.unselected {
    margin-bottom: -30px;
    opacity: 0.6;
}

.hand-section .vote-card, .hand-section .policy-card {
    cursor: pointer;
}

.player-slot.unoccupied {
    visibility: hidden;
}

.player-slot.inactive {
    background: none;
}

.policy-cards {
    display: flex;
    align-items: flex-end;
}

.policy-card {
    width: 111px;
    height: 159px;
    background: url(media/policy-cards.png);
    margin: 8px;
    background-size: cover;
}

.deck.hidden {
    visibility: hidden;
}

.policy-card.l {
    background-position-x: -109px;
}

.policy-card.f {
    background-position-x: -219px;
}

.policy-card.c {
    background-position-x: -329px;
}

.player-role.check-button {
    cursor: pointer;
    opacity: 0.6;
}

.fasc-track {
    display: flex;
    padding: 37px 31px;
}

.lib-track {
    display: flex;
    padding: 13px 53px;
}

.com-track {
    display: flex;
    padding: 13px 79px;
    padding-top: 38px;
}

.policy-slot {
    width: 38px;
    height: 38px;
    margin: 0 3.8px;
    background: url(media/pres-actions.png);
    background-size: cover;
}

.com-track .policy-slot, .policy-slot.c {
    background: url(media/pres-actions-com.png);
    background-size: cover;
}

.game-track .policy-card {
    width: 38.3px;
    height: 56px;
    margin-top: -14px;
    margin-left: -1px;
    background-position-x: -77px;
}

.deck .policy-card {
    width: 38.3px;
    height: 56px;
    margin: 7px;
}

.game-track .policy-card.c {
    background-position-x: -116px;
}

.game-track .policy-card.f {
    background-position-x: -77px;
}

.game-track .policy-card.l {
    background-position-x: -38px;
}

.deck {
    display: flex;
    flex-direction: column;
    align-self: flex-end;
    padding-bottom: 15px;
    padding-left: 4px;
}

.deck.discard {
    padding-left: 4px;
}

.deck-count {
    color: white;
    text-align: center;
    margin-bottom: -8px;
    font-size: 20px;
    font-weight: bold;
    background: #0000004d;
    width: 42px;
    align-self: center;
}

.skip-token {
    width: 10px;
    height: 10px;
    background: #004e6d;
    border-radius: 25px;
}

.skip-track {
    padding: 1.2px 117.7px;
}

.skip-token.skip-1 {
    margin-left: 32px;
}

.skip-token.skip-2 {
    margin-left: 63px;
}

.win-banners {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 10px;
    right: 10px;
    display: none;
    z-index: -1;
}

.lib-win .win-banners, .fasc-win .win-banners, .com-win .win-banners {
    display: block;
}

.banner {
    height: 550px;
    width: 91px;
    background: url(media/banners.png);
    position: absolute;
    background-size: cover;
}

.lib-win .banner {
    background-position-x: -90px;
}

.com-win .banner {
    background-position-x: -181px;
}

.banner.left {
    left: 0;
}

.banner.right {
    right: 0;
}

.cards-hand .policy-card {
    width: 23px;
    height: 33px;
    margin: 1px;
}

.cards-hand {
    display: flex;
    position: absolute;
    bottom: -8px;
    align-self: center;
}

.main-slots.top .cards-hand {
    top: -8px;
}

.player-section .policy-slot {
    background-position-x: -115.5px;
    position: absolute;
    bottom: -3px;
    right: -13px;
    box-shadow: 0 0 2px 0 black;
}

.shot-button {
    color: #fb3535;
    background: white;
    border-radius: 25px;
    user-select: none;
    cursor: pointer;
    position: absolute;
}

.shot-mark {
    color: #de0000;
    user-select: none;
    position: absolute;
    top: 20px;
}

.shot-mark i {
    font-size: 54px;
}

.player-slot.shot .avatar {
    filter: grayscale(1);
}

.accept-button {
    font-size: 50px;
    background: #fefffc9c;
    margin: 10px;
    cursor: pointer;
    user-select: none;
}

.accept-button:hover {
    background: #fefffcc9;
}

.policy-card.selected {
    opacity: 0.5;
    margin-bottom: -53px;
}

.not-hitler-card {
    background: url(media/not-hitler.png);
    width: 57px;
    height: 33px;
    position: absolute;
    top: -10px;
    right: -9px;
}

.accept-button.veto {
    font-style: normal;
    padding: 5.6px 8px;
    font-size: 34px;
    margin: 10px 5px;
    font-family: sans-serif;
    text-transform: uppercase;
}

.notes {
    background: rgba(0, 0, 0, 0.85);
    font-weight: bold;
    font-family: monospace;
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 1;
    opacity: 1;
    font-size: 16px;
    text-shadow: 0 0 3px black;
    color: #cecac1;
    width: 304px;
}

.note-list {
    padding: 8px;
    padding-bottom: 0;
}

.color-lib {
    color: #0497d2;
    stroke: #0497d2;
    fill: #0497d2;
}

.color-fasc {
    color: #d60704;
    stroke: #d60704;
    fill: #d60704;
}

.color-com {
    color: #f4a954;
    stroke: #f4a954;
    fill: #f4a954;
}

.color-neutral {
    color: white;
    stroke: white;
    fill: white;
}

.color-unknown {
    color: gray;
}

.color-down {
    color: gray;
}

.note-controls, .note-text {
    display: inline-block;
}

.log-arrow {
    margin: 0 3px;
}

.log-colon {
    margin-right: 4px;
}

.note-controls {
    margin-right: 3px;
    cursor: pointer;
    user-select: none;
    font-size: 15px;
    position: relative;
    top: 3px;
}

.notes-hide {
    cursor: pointer;
    user-select: none;
}

.notes.hidden {
}

.notes.hidden .note-list {
    display: none;
}

.note-item {
    position: relative;
}

.note-list.expanded .note-item {
    opacity: 0.3;
}

.note-list .note-item.expanded {
    opacity: 1;
}

.note-expanded {
    margin-left: 18px;
}

.log-space {
    width: 4px;
    display: inline-block;
}

.note-item.reclaimed .note-expanded .enact-line,
.note-item.reclaimed .note-expanded .inspect-deck-line,
.note-item.reclaimed .note-expanded .inspect-line {
    text-decoration: line-through;
    text-decoration-color: #cccccc;
}

.note-buttons {
    padding-left: 4px;
    padding-right: 35px;
    display: flex;
    flex-wrap: wrap;
}

.note-button {
    border: 1px solid;
    margin: 2px 3px;
    padding: 1px 5px;
    cursor: pointer;
    user-select: none;
}

.notes-footer {
    display: flex;
    align-items: center;
    padding: 5px;
    min-height: 37px;
    box-sizing: border-box;
}

.votes-list {
    max-width: 260px;
}

.note-expanded .enact-line, .note-expanded .inspect-line, .note-expanded .inspect-deck-line {
    text-decoration: line-through;
}

.note-buttons-title {
    padding-top: 4px;
}

.notes.hidden {
    width: auto;
}

.notes.hidden .note-buttons {
    display: none;
}

.notes.hidden .notes-footer {
    padding: 6px;
    width: 74px;
}

.hand-section .policy-card {
    border-radius: 10px;
}

.vote-marks-section {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    user-select: none;
}

.vote-marks {
    position: absolute;
    bottom: 4px;
    left: 125px;
    display: flex;
    align-items: flex-end;
}

.main-slots.top .vote-marks {
    left: 135px;
    align-items: normal;
}

.main-slots.bottom .vote-marks {
    left: 124px;
}

.main-slots.top .vote-marks {
    top: 8px;
}

.vote-mark {
    line-height: 7px;
    width: 13px;
    display: block;
    pointer-events: auto;
}

.main-slots.bottom .vote-marks {
    bottom: 8px;
}

.game-track .policy-card.flipped {
    transform: scaleX(0);
    transition: transform 0.3s;
}

.game-track .policy-card {
    transform: scaleX(1);
}

.vote-mark:hover {
    text-shadow: white 0 0 3px;
    cursor: pointer;
}

.pres-highlight {
    text-decoration: underline;
}

.pres-highlight-vote {
    border: 1px solid;
    padding-left: 4px;
    margin-right: 4px;
    background: #ffffff24;
}

.arrows-pane {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.arrow {
    stroke-width: 3.5px;
    fill: none;
    opacity: 0.7;
    pointer-events: stroke;
}

.arrow.libConf {
    stroke-dasharray: 4;
}

.arrow:hover {
    opacity: 0.9;
}

.host-button.inactive {
    cursor: default;
}

.player.offline .player-name-text {
    text-decoration: line-through;
}

.player-slot.no-player .player.offline .player-name-text {
    text-decoration: none;
}

.main-slots.top .material-icons.vote-mark {
    transform: rotateZ(180deg);
}

.popup_modals .modal_buttons .btn.btn_pmry {
    background-color: #31894f !important;
}

.policy-card-drop {
    display: flex;
    justify-content: center;
    font-size: 119px;
    color: #b50b0b;
    user-select: none;
}

.watch {
    width: 102px;
    height: 135px;
    position: absolute;
    top: 6px;
    left: 21px;
    background: url(media/watch.png);
    background-size: contain;
    opacity: 0.6;
}

.watch-hand {
    width: 102px;
    height: 101px;
    background: url(media/watch-hand.png) no-repeat center center;
    position: absolute;
    bottom: 0;
    background-size: contain;
}

#watch-face {
    width: 102px;
    height: 102px;
    background: #ff000061;
    position: absolute;
    bottom: 0;
    border-radius: 53px;
    opacity: 0;
    transition: opacity 1s;
    pointer-events: none;
}

#watch-face.blink {
    opacity: 1;
    transition: none;
}

.black-slot-mark {
    cursor: default !important;
}

.little-controls.start-game-buttons {
    padding-bottom: 0;
    text-align: center;
}

.settings-button.level-selected {
    background: #cacaca;
}

.start-game-buttons div {
    display: inline-block;
    padding: 17px;
}

.tri-team .game-track-section {
    height: 283px;
}

.tri-team .game-table-top {
    height: 494px;
    background: url(media/table-bg-tri.jpg);
    background-size: contain;
}

.ptn body {
    background: url(media/ptn/bg.png) black;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
}

.ptn .not-hitler-card {
    background: url(media/ptn/not-hitler.png);
    background-size: contain;
}

.ptn .plate {
    background: url(media/ptn/plates.png);
    background-size: cover;
}

.ptn .player-role {
    background: url(media/ptn/roles.jpg);
    background-size: cover;
}

.ptn .watch {
    background: url(media/ptn/watch.png);
    background-size: contain;
}

.ptn .watch-hand {
    background: url(media/ptn/watch-hand.png) no-repeat center center;
    background-size: contain;
}

.ptn .vote-card {
    background: url(media/ptn/voting-cards.png) no-repeat center center;
    background-size: cover;
    background-position-x: 0;
}

.ptn .vote-card.nein {
    background-position-x: -77px;
}

.ptn .vote-card.ja {
    background-position-x: -38px;
}

.ptn .hand-section .vote-card.nein {
    background-position-x: -230px;
}

.ptn .hand-section .vote-card.ja {
    background-position-x: -115px;
}

.ptn .policy-slot {
    background: url(media/ptn/pres-actions.png);
    background-size: cover;
}

.ptn .com-track .policy-slot, .ptn .policy-slot.c {
    background: url(media/ptn/pres-actions-com.png);
    background-size: cover;
}

.ptn .game-track-section {
    background: url(media/ptn/policy-track.png);
    background-size: cover;
}


.ptn .tri-team .game-track-section {
    background: url(media/ptn/policy-track-tri.png) bottom;
    background-size: cover;
}

.ptn .policy-card {
    background: url(media/ptn/policy-cards.png);
    background-size: cover;
}

.ptn .policy-card.l {
    background-position-x: -109px;
}

.ptn .policy-card.f {
    background-position-x: -219px;
}

.ptn .policy-card.c {
    background-position-x: -329px;
}

.ptn .game-track .policy-card.f {
    background-position-x: -77px;
}

.ptn .game-track .policy-card.l {
    background-position-x: -38px;
}

.ptn .game-track .policy-card.c {
    background-position-x: -116px;
}

.player-role.zoomed {
    zoom: 2.9;
    z-index: 3;
}

.veto-bubble:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    border: 11px solid transparent;
    border-top-color: #adadadc2;
    border-bottom: 0;
    border-left: 0;
    margin-bottom: -11px;
}

.veto-bubble {
    z-index: 1;
    background: #adadadc2;
    padding: 6px 17px;
    position: absolute;
    left: 94px;
    top: -13px;
}

.video-mode .main-slots {
    width: 691px;
}

.video-mode .player-name-text {
    max-width: 201px;
}

.video-mode .avatar {
    width: 201px;
    height: 170px;
}

.video-mode .shot-mark {
    top: 64px;
}

.video-mode .main-slots.top .player-table-section, .video-mode .main-slots.bottom .player-table-section {
    left: 35px;
}

.video-mode .player-slot-8 .vote-section, .video-mode .player-slot-1 .vote-section {
    margin-left: 80px;
}

.video-mode .player-slot-3 .vote-section, .video-mode .player-slot-6 .vote-section {
    margin-left: -80px;
}

.video-mode .player-slot-4 .player-table-section, .video-mode .player-slot-0 .player-table-section {
    top: 72px;
}

.video-mode .player-slot-5 .player-table-section, .video-mode .player-slot-9 .player-table-section {
    top: 38px;
}

.user-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
}

.avatar.has-video {
    background: none !important;
}

.user-audio-marker.hasVoice {
    box-shadow: 0 0 3px 3px #ffffff26;
}

.user-audio-marker.muted {
    box-shadow: 0 0 3px 3px #aeaeae99;
}

.user-audio-marker.speaking {
    box-shadow: 0 0 8px 2px #4cb873 !important;
}

.meter-track {
    background: #7be006;
}

.chat:not(.active) .chat-messages {
    color: white;
}

.chat-send-input {
    color: black !important;
}

.chat.active .chat-tab-buttons {
    background: #ffffff57;
}

.konfa-menu img {
    filter: brightness(0.2) !important;
}

.chat {
    transform: translate(-50%);
    left: 50%;
}