/* Imports */
@import url('https://fonts.googleapis.com/css?family=Rubik');

/* Firefox-specific responsive-table fix provided by the Bootstrap Team */
@-moz-document url-prefix() {
    fieldset { display: table-cell; }
}

/* GENERAL THEME BEGIN */

@font-face {
    font-family: fredericka;
    src: url(../fonts/fredericka-the-great.regular.ttf);
}

body {
    font-family: 'Rubik', sans-serif;
    padding-top: 1em;
    background-image: url("../static/img/bg/iron_tile.png");
    background-color: #cccccc;
    background-size: repeat;
}

div.jumbotron-custom {
    background-color: rgba(0,0,0,0.7);
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 30px !important;
    padding-right: 30px !important;
}

div.content-wrapper {
    background-color: rgba(0,0,0,0.1);
    padding-top: 10px;
    padding-bottom: 10px;
}

.YES-font {
    font-family: fredericka;
}

.font-20px {
    font-size: 1.5em !important;
}

.font-2em {
    font-size: 2em !important;
}

.font-bold {
    font-weight: bold !important;
}

.font-dark {
    font-weight: 500 !important;
}

p.font-normal {
    font-size: 15px;
}
table {
    background-color: rgba(0, 0, 0, 0.08);
}
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.1);
}
.table-borderless > tbody > tr > td,
.table-borderless > tbody > tr > th,
.table-borderless > tfoot > tr > td,
.table-borderless > tfoot > tr > th,
.table-borderless > thead > tr > td,
.table-borderless > thead > tr > th {
    border: none;
}
.table > thead > tr > td.info,
.table > tbody > tr > td.info,
.table > tfoot > tr > td.info,
.table > thead > tr > th.info,
.table > tbody > tr > th.info,
.table > tfoot > tr > th.info,
.table > thead > tr.info > td,
.table > tbody > tr.info > td,
.table > tfoot > tr.info > td,
.table > thead > tr.info > th,
.table > tbody > tr.info > th,
.table > tfoot > tr.info > th {
    background-color: rgba(217, 237, 247, 0.7);
}
.table-hover > tbody > tr > td.info:hover,
.table-hover > tbody > tr > th.info:hover,
.table-hover > tbody > tr.info:hover > td,
.table-hover > tbody > tr:hover > .info,
.table-hover > tbody > tr.info:hover > th {
    background-color: rgba(196, 227, 243, 0.7);
}
.bg-table-info {
    background-color: rgba(217, 237, 247, 0.7);
}
/*
.table-striped tr:nth-child(even) {
    background-color: #f2f2f2
}*/
img#navbar-brand-image {
    height: auto;
    width: auto;
    max-width: 200px;
    max-height: 200px;
    position: relative;
    margin-top: -1.5em;
}

/* GENERAL THEME END */

/* NAVBAR THEME BEGIN */

#custom-bootstrap-menu.navbar-custom .navbar-brand {
    color: rgba(119, 119, 119, 1);
}
#custom-bootstrap-menu.navbar-custom {
    font-size: 14px;
    background-color: rgba(255, 255, 255, 0.5);
    border-width: 1px;
    border-radius: 4px;
}
#custom-bootstrap-menu.navbar-custom .navbar-nav>li>a {
    color: rgba(119, 119, 119, 1);
    background-color: rgba(248, 248, 248, 0);
}
#custom-bootstrap-menu.navbar-custom .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-custom .navbar-nav>li>a:focus {
    color: rgba(51, 51, 51, 1);
    background-color: rgba(248, 248, 248, 0);
}
#custom-bootstrap-menu.navbar-custom .navbar-nav>.active>a,
#custom-bootstrap-menu.navbar-custom .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-custom .navbar-nav>.active>a:focus {
    color: rgba(85, 85, 85, 1);
    background-color: rgba(231, 231, 231, 1);
}
#custom-bootstrap-menu.navbar-custom .navbar-toggle {
    border-color: #ddd;
}
#custom-bootstrap-menu.navbar-custom .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-custom .navbar-toggle:focus {
    background-color: #ddd;
}
#custom-bootstrap-menu.navbar-custom .navbar-toggle .icon-bar {
    background-color: #888;
}
#custom-bootstrap-menu.navbar-custom .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-custom .navbar-toggle:focus .icon-bar {
    background-color: #ffffff;
}
a.nav-spacer-small {
    width: 4em;
}
a#nav-username {
    cursor: default;
}
/* NAVBAR THEME END */

/* HELPER ELEMENTS BEGIN */
.help-block {
    color: #0f0f0f !important;
}
.padding-15px {
    padding: 15px;
}

.padding-1em {
    padding: 1em;
}

.padding-05em {
    padding: 0.5em;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                          supported by Chrome and Opera */
}
div.msgBar{
    position: fixed;
    top: 7%;
    left: 20%;
    width: 60%;
    z-index: 999;
}
p.p-info {
    padding: 0.5em;
    border-radius: 0.5em;
}
/* FORM ELEMENTS BEGIN */
.form-invalid {
    background-color: #ffcdbe;
    border-color: #ff423a;
}
.form-valid {
    background-color: #cbffc8;
    border-color: #62ff50;
}
/* FORM ELEMENTS END */
#spinnerContainer {
    position:fixed;
    padding:0;
    margin:0;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-color: rgba(134, 134, 134, 0.53);
    z-index: 9999;
}
/* HELPER ELEMENTS END */

/* CUSTOM GAME ELEMENTS BEGIN */
.hand-card {
    width: 6.5em;
    height: 9.5em;
    background-image: url('../static/img/game/card_front_argument.png');
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
}
/*
.hand-card:not(:first-of-type) {
    margin-left: -3em;
}
*/
.opponent-card {
    min-width: 90px;
    min-height: 133px;
    max-width: 150px;
    max-height: 200px;
    background-image: url('../static/img/game/card_back_rotated.png');
    background-size: contain;
    background-repeat: no-repeat;
}
.opponent-card:not(:first-of-type) {
    margin-left: -3em;
}
.opponent-card-flip {
    background-image: url('../static/img/game/card_back.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.hand-card .card-title {
    font-size: 0.9em;
    padding: 0.3em 0.3em 0em 0.3em;
    text-align: center;
    width: 7em !important;
    height: 8em;
    margin: 0 auto;
    word-wrap: break-word !important;
    white-space: pre-wrap;
    display: table-caption;
}

.hide-card {
    display: none;
}

#myCard {
    max-height: 230px;
    min-height: 130px;
    max-width: 150px;
    margin-top: 2em;
    margin-bottom: 2em;
    /*border: 1px solid grey;*/
    padding: 10px;
    padding-top: 15px;
}

#opponentCard {
    max-height: 230px;
    min-height: 130px;
    max-width: 150px;
    margin-top: 2em;
    margin-bottom: 2em;
    /*border: 1px solid grey;*/
    padding: 10px;
    padding-top: 15px;
}
#opponentCards {
    width: 100%;
    max-height: 230px;
    min-height: 130px;
    /*border: 1px solid grey;*/
    padding: 5px;
    padding-top: 10px;
}

#myCards {
    width: 100%;
    max-height: 230px;
    min-height: 130px;
    /*border: 1px solid grey;*/
    padding: 5px;
    padding-top: 10px;
}
.handCard-argument {
    background-image: url('../static/img/game/card_front_argument.png');
    background-size: contain;
    background-repeat: no-repeat;
}
.handCard-counter {
    background-image: url('../static/img/game/card_front_counterargument.png');
    background-size: contain;
    background-repeat: no-repeat;
}
.handCard-special {
    background-image: url('../static/img/game/card_front_special.png');
    background-size: contain;
    background-repeat: no-repeat;
}
.bigCardItem {
    min-width: 150px;
    min-height: 200px;
    max-width: 200px;
    max-height: 250px;
    margin-right: -1em;
    background-image: url('../static/img/game/card_front_argument.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.bigCardItem p.card-title {
    text-align: center;
    padding-top: 10px;
    padding-left: 5px;
    padding-right: 10px;
    font-size: 15px;
    font-weight: bold;
}
.bigCardItem p.card-text {
    text-align: center;
    padding-top: 10px;
    padding-left: 5px;
    padding-right: 10px;
    font-size: 15px;
}
.giantCardItem {
    position: relative;
    left: 2px;
    min-width: 290px;
    min-height: 430px;
    max-width: 290px;
    max-height: 430px;
    background-size: contain;
    background-repeat: no-repeat;
}

.giantCardItem .handCard-argument {
    background-image: url('../static/img/game/card_front_argument.png');
}

.giantCardItem .handCard-counter {
    background-image: url('../static/img/game/card_front_counterargument.png');
}

.giantCardItem .handCard-special {
    background-image: url('../static/img/game/card_front_special.png');
}

.giantCardItem p.card-title {
    text-align: center;
    padding-top: 1em;
    font-size: 1.4em;
    line-height: 1.4em;
    font-weight: bold;
    padding-left: 1em;
    padding-right: 1em;
}

.giantCardItem p.card-text {
    text-align: center;
    padding-top: 1em;
    font-size: 1.3em;
    line-height: 1.3em;
    padding-left: 1em;
    padding-right: 1em;
}
.previewCardItem {
    background-size: contain;
    background-repeat: no-repeat;
}

.previewCardItem .handCard-argument {
    background-image: url('../static/img/game/card_front_argument.png');
}

.previewCardItem .handCard-counter {
    background-image: url('../static/img/game/card_front_counterargument.png');
}

.previewCardItem .handCard-special {
    background-image: url('../static/img/game/card_front_special.png');
}

.previewCardItem p.card-title {
    text-align: center;
    padding-top: 1em;
    font-size: 1.2em;
    line-height: 1.4em;
    font-weight: bold;
    padding-left: 1em;
    padding-right: 1em;
}

.previewCardItem p.card-text {
    text-align: center;
    padding-top: 1em;
    font-size: 1em;
    line-height: 1em;
    padding-left: 1em;
    padding-right: 1em;
    min-height: 80%;
    max-height: 80%;
    max-width: 95%;
    overflow-y: auto;
}
.fullSize {
    width: 100%;
    height: 100%;
}
div#cardPreview {
    padding: 0;
    background-color: rgba(80, 80, 80, 0.2);
    height: 35em;
}
div#cardPreviewContent {
    padding: 10px;
    background-color: rgba(0,0,0,0);
    height: 32em;
}
div#cardPreviewTitle {
    font-size: 30px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.2);
}
.card-place {
    width: 7em;
    min-width: 7em;
    height: 10em;
    min-height: 10em;
    background-color: rgba(0,0,0,0.4);
    margin-right: 1em;
    margin-bottom: 0.2em;
    border-radius: 9px 9px 9px 9px;
    -moz-border-radius: 9px 9px 9px 9px;
    -webkit-border-radius: 9px 9px 9px 9px;
    border: 0px solid #000000;
    padding-top: 0.3em;
    padding-left: 0.3em;
}
.card-place-current {
    width: 7.2em !important;
    height: 10.2em !important;
    padding-top: 0.2em !important;
    padding-left: 0.25em !important;
    border: 0.2em solid red !important;
}
#card-place-1 {

}
.card-place-bottom {

}
.card-spacer {
    width: 40px;
}
#gameRoundCounter {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-right: 0.5em;
    width: 21em;
    height: 4em;
    border-radius: 9px 9px 9px 9px;
    -moz-border-radius: 9px 9px 9px 9px;
    -webkit-border-radius: 9px 9px 9px 9px;
    border: 0px solid #000000;
    background-color: #fbec67;
}
#gameRoundNum {
    display: inline-block;
    width: 2em;
    height: 1.6em;
    margin-left: 1em;
    text-align: center;
    line-height: 1.6em;
    background-color: #fff9be;
    font-size: 2.5em;
}
#gameRoundText {
    display: inline-block;
    margin-top: 0.15em;
    margin-left: 0.5em;
    font-size: 2.5em;
}
#gameScoreCounter {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    width: 21em;
    height: 4em;
    border-radius: 9px 9px 9px 9px;
    -moz-border-radius: 9px 9px 9px 9px;
    -webkit-border-radius: 9px 9px 9px 9px;
    border: 0px solid #000000;
    background-color: #bdd74b;
}
#gameTopicView {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-right: 0.5em;
    width: 21em;
    height: 4em;
    border-radius: 9px 9px 9px 9px;
    -moz-border-radius: 9px 9px 9px 9px;
    -webkit-border-radius: 9px 9px 9px 9px;
    border: 0px solid #000000;
    background-color: #3ab940;
}
#gameTimer {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    width: 7em;
    height: 4em;
    border-radius: 9px 9px 9px 9px;
    -moz-border-radius: 9px 9px 9px 9px;
    -webkit-border-radius: 9px 9px 9px 9px;
    border: 0px solid #000000;
    background-color: #bdd74b;
}
#gameTimerText {
    display: inline-block;
    margin-top: 0.15em;
    font-size: 2.5em;
}

#gameTopicView span {
    display: table;
    padding-top: 0.5em;
    text-align: center;
    width: 19em;
    height: 4em;
}
#cardBoardRow {
    margin-left: 10em;
}
#opponentHand {
    height: 9.5em;
}
#playerHand {
    height: 11em;
    max-height: 11em;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
}
#gameScoreText {
    display: inline-block;
    margin-top: 0.15em;
    font-size: 2.5em;
}
#gameScoreNum {
    display: inline-block;
    width: 2.5em;
    height: 1.6em;
    margin-left: 0.2em;
    padding-left: 0.2em;
    padding-top: 0.1em;
    background-color: #fff9be;
    font-size: 2.5em;
}
#gameScoreA {
    display: inline-block;
    margin-top: 0.15em;
    margin-left: 0.2em;
    font-size: 2.5em;
}
#gameScoreB {
    display: inline-block;
    margin-top: 0.15em;
    margin-left: 0.2em;
    font-size: 2.5em;
}
.gameConfirmDialog {
    padding: 1em;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    display:none;
    margin:1em;
    background-color: rgb(209, 209, 209);
}
.gameSkipRoundDialog {
    padding: 1em;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    display:none;
    margin:1em;
    background-color: rgb(209, 209, 209);
}
.gameEndRoundDialog {
    padding: 1em;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    display:none;
    margin:1em;
    background-color: rgb(209, 209, 209);
}
.gameGenericDialog {
    padding: 1em;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    display:none;
    margin:1em;
    background-color: rgb(209, 209, 209);
}
#gameButtons {
    display: inline-block;
    position: relative;
    /*margin-right: 10em;*/
}
#gameButtons div.row:first-of-type {
    margin-bottom: 1em;
}
#gameButtons button {
    min-width: 12em;
    min-height: 3em;
}
#gameButtons #protest-button {

}
div#filter-buttons {
    display: inline-block;
}
div#filter-buttons img {
    cursor: pointer;
    display: inline-block;
}
button.game-btn-filter-argument {

}
button.btn-disabled {
    background-color: #444444 !important;
    border-color: #444444 !important;
}
div.spacer-sm {
    height: 1em;
}
div#chatMessages {
    width: 100%;
}
input#chatInputMsg {
    display: inline;
}
input#chatInputMsgBtn {
    display: inline;
}
div#chatMessages {
    height: 30em;
    overflow-y: scroll;
    overflow-x: hidden;
}
div.chatMessageItem {
    padding: 3px;
    word-wrap: break-word;
    box-sizing: border-box;
}
span.chatMessageUsername {
    color: #a40000;
    font-weight: bold;
}
/* CUSTOM GAME ELEMENTS END */

/* CUSTOM GAME ELEMENTS REDESIGN BEGIN */
.debugBorder {
    /* REMOVE THIS LATER */
    border: 1px solid red;
    /* */
}
div#gameDebug .row:first-of-type div {

}
div#gameChatHeader {
    background-color: rgba(191, 191, 191, 0.7);
    /*border-top-left-radius: 1em;
    border-top-right-radius: 1em;*/
}
div#gameChatBody {
    background-color: rgba(162, 160, 157, 0.7);
    display: block;
    width: 100%;
    height: 48em;
    overflow-y: scroll;
    word-wrap: break-word;
}
div#gameChatBodyContent *{
    z-index: 999;
}
div#gameChatInput {
    background-color: rgba(191, 191, 191, 0.7);
    /*border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;*/
    height: 10.2em;
}
div#gameVoteHeader {
    background-color: rgba(191, 191, 191, 0.7);
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
}
div#gameVoteBody {
    background-color: rgba(162, 160, 157, 0.7);
    display: block;
    width: 100%;
    height: 48em;
    overflow-y: scroll;
    word-wrap: break-word;
}
div#game2VoteBody {
    margin-left: 0.5em;
    /*background-color: rgba(162, 160, 157, 0.7);*/
    display: block;
    width: 98%;
    height: 19em;
    word-wrap: break-word;
}
div#game2VoteInput {
    margin-left: 1em;
    background-color: rgba(191, 191, 191, 0.7);
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
    height: 12em;
    width: 96%;
}
div#game2ControlBody {
    margin-left: 0.5em;
    /*background-color: rgba(162, 160, 157, 0.7);*/
    display: block;
    width: 98%;
    height: 25em;
    word-wrap: break-word;
}
div#gameVoteInput {
    background-color: rgba(191, 191, 191, 0.7);
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
    height: 10.2em;
}
p#gameVoteDisabled {
    font-size: 1.5em;
}
div#gameTimerContainer {
    -webkit-box-shadow:inset 0 0 2px 2px #5a5a5a;
    box-shadow:inset 0 0 2px 2px #5a5a5a;
    -webkit-border-radius: 7px 7px 7px 7px;
    border-radius: 7px 7px 7px 7px;
    border: 2px solid #d0d0d0;
    background: linear-gradient(90deg, #d7d7d7 40%, #959595 40%);
    padding-top: 2%;
    padding-bottom: 2%;
}
span#gameTimerText {
    margin-left: -0.3em;
    font-size: 2em;
}
span#gameTimerValue {
    font-size: 2em;
    font-weight: bold;
    margin-left: 1em;
}
div#gameControlsCardPreview {
    background-color: rgba(191, 191, 191, 0.7);
    border-radius: 1em;
    height: 25em;
    margin-right: 2em;
}
div#gameControlsContainer {
    /*margin-left: -0.5em;*/
}
div#gameControlsGameButtons {
    font-size: 1.5em;
}
span#gameControlsCardPreviewText {
    margin-left: 4em;
    font-size: 1.5em;
}
div#gameControlsProtestButton {
    background-color: #e76655;
    padding-top: 0.3em;
    height: 2em;
    border-radius: 5px;
    cursor: pointer;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
div#gameControlsConcedeButton {
    background-color: #fbab66;
    padding-top: 0.3em;
    height: 2em;
    border-radius: 5px;
    cursor: pointer;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
div.gameControlsButtonDisabled {
    background-color: #5a5a5a !important;
    cursor: default !important;
}
div#gameControlsCardFiltersTitle {
    margin-left: 1.3em;
    font-size: 1.5em;
}
div#gameControlsCardFiltersButtons img {
    cursor: pointer;
}
div#gameFilterAll {
    margin-left: 1em;
    margin-right: 1em;
}
div#gameFilterArgument {
    margin-right: 1em;
}
div#gameFilterCounter {
    margin-right: 1em;
}
div#gameFilterSpecial {
}
div#gameBoardContainer {
    background-color: rgba(191, 191, 191, 0.7);
    height: 61em;
    /*margin-left: 0.5em;*/
}
div#gameBoardTopic{

}
div#topCards {

}
div#gameBoardActual {

}
@media screen and (min-width: 480px) {

}
textarea#gameChatTextInput {
    margin-top: 0.1em;
    width: 100%;
    height: 70%;
    resize: none;
    overflow-y: scroll;
}
a#gameChatSendButton {
    background-color: #fef0ba;
    border-radius: 5px;
    padding: 0.3em;
    cursor: pointer;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
    text-decoration: none;
    font-size: 1.5em;
}
.centeredDiv{
    display:flex;
    justify-content:center;
    align-items:center;
}
#gameBoardTopicTitle {
    font-size: 2em;
    text-align: center !important;
    word-wrap: break-word;
}
.spacer-60 {
    margin-top: 100%;
    margin-bottom: 100%;
    z-index: -999;
}
.spacer-40 {
    margin-top: 20%;
    margin-bottom: 20%;
    z-index: -999;
}
.spacer-28-4 {
    margin-top: 14.2%;
    margin-bottom: 14.2%;
    z-index: -999;
}
.spacer-20 {
    margin-top: 10%;
    margin-bottom: 10%;
    z-index: -999;
}
.spacer-30 {
    margin-top: 15%;
    margin-bottom: 15%;
    z-index: -999;
}
.spacer-15 {
    margin-top: 7.5%;
    margin-bottom: 7.5%;
    z-index: -999;
}
.spacer-10 {
    margin-top: 5%;
    margin-bottom: 5%;
    z-index: -999;
}
.spacer-5 {
    margin-top: 2.5%;
    margin-bottom: 2.5%;
    z-index: -999;
}
.col-spacer {
    z-index: -10;
    visibility: hidden;
}
div#gameControlsStatus {
    height: 8.5em;
}
.game-information-bubble {
    padding: 1em;
    border-radius: 5px;
}

.game-information-bubble.informative {
    border: 0.2em solid #0094eb;
    background-color: #94BADA;
}

.game-information-bubble.success {
    border: 0.2em solid #8ba441;
    background-color: #bdd74b;
}

.game-information-bubble.warning {
    border: 0.2em solid #a49550;
    background-color: #fbec67;
}

.game-information-bubble.danger {
    border: 0.2em solid #a45449;
    background-color: #e76655;
}
/* Viewport size adjustments for game happen here vvv */
@media screen and (max-width: 1860px) {
    div#gameControlsCardFiltersButtons div img{
        height: 3em !important;
        margin-right: -0.5em !important;
    }
}
@media screen and (max-width: 1796px) {
    .previewCardItem p.card-text {
        min-height: 80%;
        max-height: 80%;
        max-width: 95%;
        overflow-y: auto;
        overflow-x: hidden;
        word-wrap: break-word;
    }
}
@media screen and (max-width: 1776px) {
    .previewCardItem p.card-text {
        min-height: 70%;
        max-height: 70%;
        max-width: 95%;
        overflow-y: auto;
        overflow-x: hidden;
        word-wrap: break-word;
    }
}
@media screen and (max-width: 1677px) {
    span#gameControlsCardPreviewText {
        margin-left: 1em;
        font-size: 1.5em;
    }
    div#gameControlsCardFiltersButtons div img{
        height: 2.5em !important;
        margin-right: -0.5em !important;
    }
}
@media screen and (max-width: 1653px) {
    div#gameTimerContainer {
        background: linear-gradient(90deg, #d7d7d7 50%, #959595 50%);
    }
    span#gameTimerValue {
        margin-left: 0.5em;
        font-size: 2em;
    }
    div#gameControlsCardPreview {
        height: 20em;
    }
    span#gameControlsCardPreviewText {
        margin-left: 1.3em;
        font-size: 1.5em;
    }
    div#gameControlsCardFiltersButtons div img{
        height: 2.5em !important;
        margin-right: -0.5em !important;
    }
    div#gameControlsCardFiltersTitle {
        margin-left: 1em;
    }
}
@media screen and (min-width: 1600px) {
    div#gameControlsProtestButton {
        margin-left: 2em;
        margin-right: 2em;
    }
    div#gameControlsConcedeButton {
        margin-left: 2em;
        margin-right: 2em;
    }
    .previewCardItem p.card-text {
        min-height: 75%;
        max-height: 75%;
        max-width: 95%;
        overflow-y: auto;
    }
}
@media screen and (max-width: 1776px) {
    .previewCardItem p.card-text {
        min-height: 70%;
        max-height: 70%;
        max-width: 95%;
        overflow-y: auto;
        overflow-x: hidden;
        word-wrap: break-word;
    }
}
@media screen and (max-width: 1485px) {
    .previewCardItem p.card-text {
        min-height: 60%;
        max-height: 60%;
        max-width: 95%;
        overflow-y: auto;
        overflow-x: hidden;
        word-wrap: break-word;
    }
    div#gameControlsCardFiltersButtons div img{
        height: 2em !important;
        margin-right: -0.5em !important;
    }
}
@media screen and (max-width: 1350px) {
    div#gameTimerContainer {
        background: linear-gradient(90deg, #d7d7d7 50%, #959595 50%);
    }
    span#gameTimerText {
        font-size: 1.5em;
    }
    span#gameTimerValue {
        margin-left: 0.5em;
        font-size: 1.5em;
    }
    div#gameControlsCardPreview {
        height: 16em;
    }
    span#gameControlsCardPreviewText {
        margin-left: 1.3em;
        font-size: 1.5em;
    }
    div#gameControlsCardFiltersButtons div img{
        height: 2em !important;
        margin-right: -0.5em !important;
    }
    div#gameControlsCardFiltersTitle {
        margin-left: 1em;
    }
    .previewCardItem p.card-text {
        min-height: 60%;
        max-height: 60%;
        max-width: 95%;
        overflow-y: auto;
        overflow-x: hidden;
        word-wrap: break-word;
    }
}
@media screen and (max-width: 1234px) {
    .previewCardItem p.card-text {
        min-height: 50%;
        max-height: 50%;
        max-width: 95%;
        overflow-y: auto;
        overflow-x: hidden;
        word-wrap: break-word;
    }
    div#gameControlsCardFiltersButtons div img{
        height: 1.9em !important;
        margin-right: -0.5em !important;
    }
}

#vote-progressbar {
    background-color: black;
    border-radius: 13px; /* (height of inner div) / 2 + padding */
    padding: 3px;
}

#vote-progressbar > div {
    width: 0; /* Adjust with JavaScript */
    height: 12px;
    border-radius: 10px;
}

#vote-pro {
    background-color: #85a4c1;
}

#vote-contra {
    background-color: #b92c28;
}
#vote-A {
    background-color: #9CD4FF;
}
#vote-B {
    background-color: #8AF296;
}
#vote-C {
    background-color: #FBEC67;
}
#vote-D {
    background-color: #FBAB66;
}
#vote-E {
    background-color: #FB6666;
}
.game2-continue-button {
    display: block;
    position: relative;
    margin-top: 2em;
    margin-left: auto;
    margin-right: auto;
    background-color: #fbab66;
    padding-top: 0.3em;
    height: 2em;
    border-radius: 5px;
    cursor: pointer;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
input.voteMSG-BTN {
    margin-top: 1em;
}
div.voteMSG {
    border: 0.2em solid;
    border-radius: 0.5em;
    margin-top: 1em;
    padding: 1em;
}
div.voteMSG-success {
    border-color: #8ba441;
    background-color: #bdd74b;
}
div.voteMSG-info {
    border-color: #0094eb;
    background-color: #94BADA;
}
div.voteMSG-error {
    border-color: #a45449;
    background-color: #e76655;
}
/* Game Diary Elements BEGIN */
div.votePlayRoundDivider {
    border: 0.1em solid;
    border-radius: 1em;
    padding: 1em 1em 0.5em 1em;
    text-align: center;
}
div.votePlayRoundDividerBegin {
    border-color: #8ba441;
    background-color: #bdd74b;
    margin-bottom: 0.5em;
}
div.votePlayRoundDividerEnd {
    border-color: #0094eb;
    background-color: #94BADA;
    margin-bottom: 0.5em;
}
div.votePlayEntry {
    width: 75%;
    border: 0.1em solid;
    border-radius: 1em;
    padding: 1em;
    margin-bottom: 0.5em;
}
div.votePlayEntry-pro {
    border-color: #006aa6;
    background-color: #85a4c1;
}
div.votePlayEntry-contra {
    border-color: #a45449;
    background-color: #e76655;
    margin-left: 25%;
}
p.votePlayEntryTeam {
    font-weight: bold;
    font-style: italic;
}
hr.style-two {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    margin-top: 0.2em;
    margin-bottom: 0.2em;
}
p.votePlayEntryTitle {
    text-align: center;
    font-weight: bold;
}
div.gameBoardDiary {
    height: 57em;
    overflow-y: auto;
}
div#gameVote2Container {
    /*margin-left: -0.5em;*/
}
div#gameVote2Header {
    background-color: rgba(191, 191, 191, 0.7);
}
div#gameVote2Header div p {
    text-align: center;
    margin-bottom: 0;
}
div#gameControl2Header {
    background-color: rgba(191, 191, 191, 0.7);
    padding-right:0;
}
div#gameControl2Header div p {
    text-align: center;
    margin-bottom: 0;
}
div#game2ControlPaneContainer .row, div#game2VotePaneContainer .row{
    margin-right: 0;
}
/* Game Diary Elements END */
/* Game2 Elements BEGIN */
.game2CardPlace {
    width: 7em;
    min-width: 7em;
    height: 10em;
    min-height: 10em;
    background-color: rgba(0,0,0,0.4);
    margin-bottom: 0.2em;
    border-radius: 9px 9px 9px 9px;
    -moz-border-radius: 9px 9px 9px 9px;
    -webkit-border-radius: 9px 9px 9px 9px;
    border: 0px solid #000000;
    padding-top: 0.3em;
    padding-left: 0.3em;
}
#game2CardContainer {
    left: 1em;
    margin-bottom: 1em;
}
.game2CardPlaceStat {
    border: 2px solid orange;
    padding-top: 0.15em !important;
    padding-left: 0.15em !important;
}
.game2ScoreContainer {
    display: block;
    width: 3em;
    margin-left: auto;
    margin-right: auto;
    font-size: 2em;
    text-align: center;
    margin-bottom: 0.5em;
    border-radius: 5px;
    height: 1.5em;
}
.game2Team {
    display: inline-block;
    margin-left: 0;
}
.game2Score {
    display: inline-block;
    margin: 0 0 auto 0.5em;
}
#game2Team-A {
    border-color: #85a0c0;
    background-color: #9CD4FF;
}
#game2Team-B {
    border-color: #6fca7a;
    background-color: #8AF296;
}
#game2Team-C {
    border-color: #cebf5b;
    background-color: #FBEC67;
}
#game2Team-D {
    border-color: #c17e59;
    background-color: #FBAB66;
}
#game2Team-E {
    border-color: #c15858;
    background-color: #FB6666;
}
div#game2TimerDiv {
    display: none;
    position: absolute;
    bottom: 0;
}
span#game2TimerText {
    color: black;
    font-size: 2em;
}
div#game2ControlPane {
    background-color: rgba(162, 160, 157, 0.7);
}
div.gameControlsConcedeRoundButton {
    background-color: #fbab66;
    height: 2em;
    border-radius: 5px;
    margin-left: 1.2em;
    cursor: pointer;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
div.game2RowConceded {
    width: 4em;
    min-width: 4em;
    height: 10em;
    min-height: 10em;
    margin-right: 1em;
    margin-bottom: 0.2em;
    padding-top: 0.3em;
    padding-left: 0.3em;
    position: relative;
}
div.game2RowConceded p {
    font-size: 3em;
    color: red;
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}
div.game2Conceded {
    /*border: 2px solid red !important;*/
    outline: 2px solid red !important;
}
div.game2CardColumn {
    height: 45em;
    overflow-x: hidden;
    overflow-y: scroll;
}
#game2RoundCounter {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-right: 0.5em;
    width: 21em;
    height: 4em;
    border-radius: 9px 9px 9px 9px;
    -moz-border-radius: 9px 9px 9px 9px;
    -webkit-border-radius: 9px 9px 9px 9px;
    border: 0px solid #000000;
    background-color: #fbec67;
}
#game2RoundNum {
    display: inline-block;
    width: 2em;
    height: 1.6em;
    margin-left: 1em;
    text-align: center;
    line-height: 1.6em;
    background-color: #fff9be;
    font-size: 2.5em;
}
#game2RoundText {
    display: inline-block;
    margin-top: 0.15em;
    margin-left: 0.5em;
    font-size: 2.5em;
}
#vote2-progressbar {
    background-color: #7a7a7a;
    border-radius: 13px; /* (height of inner div) / 2 + padding */
    padding: 0;
    box-shadow: inset 2px 2px 2px 2px rgba(0,0,0,0.2);
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}

#vote2-progressbar > div {
    width: 0; /* Adjust with JavaScript */
    height: 1em;
    border-radius: 10px 0 0 10px;
}

#vote2-progressbar > div.progress-full {
    border-radius: 10px !important;
}

.game2VoteResultContainer {
    margin-left: 1em;
}

.vote2-TeamDesignator {
    display: block;
    width: 1.5em;
    margin-left: auto;
    margin-right: 1em;
    font-size: 1em;
    text-align: center;
    margin-bottom: 0.5em;
    border-radius: 5px;
    height: 1.5em;
}

/* Game2 Elements END */
/* CUSTOM GAME ELEMENTS REDESIGN END */