/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.isAsleep {
    transform: rotate(270deg);
}

.isParalyzed {
    transform: rotate(90deg);
}

.isConfused {
    transform: rotate(180deg);
}

.activeDamageCounters {
    left: 65px;
    top: -25px;
    position: relative;
}

img.PoisonMarker, img.BurnMarker {
    width: 25px;
}

.poisonedCounter, .burnCounter {
    top: -25px;
    left: -60px;
    position: relative;
}

#bubble-container {
    position: relative;
}

.bubble {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(80, 200, 120, 0.6); /* Poison green with some transparency */
    opacity: 0.75;
}


.selectedTrainerCard {
    width: 120px;
}

.roundDamageCounter {
    background: red;
    width: 18px;
    color: white;
    text-align: center;
    font-size: 10px;
    border: 2px solid black;
    border-radius: 15px;
    font-weight: bold;
}

.activeRoundDamageCounter {
    background: red;
    width: 26px;
    color: white;
    text-align: center;
    margin: auto;
    font-size: 14px;
    border: 2px solid black;
    border-radius: 15px;
    font-weight: bold;
}

.battleOptions {
    background: white;
    float: right;
    position: relative;
    right: 115px;
    min-width: 200px;
    border: 3px solid crimson;
}

.attackButton .text-start {
    width: 80%;
    float: left;
}

.attackButton .text-end {
    width: 20%;
    float: right;
}


.damageCounters {
    left: 85px;
    position: relative;
    text-align: left;
    margin-top: -150px;
    z-index: 100;
}

.damageCountersTrainer {
    left: 90px;
    position: relative;
    text-align: left;
    margin-top: -125px;
    z-index: 100;
}

#trainerPlace {
    height: 200px;
    width: 140px;
    margin-top: -240px;
    position: absolute;
}


.temphide {
    display: none;
}

.navbar-brand {
    color: white;
}

h1 {
    color: yellow;
    text-shadow: rgba(0, 0, 0, 0.80) 0px 0px 28px
}


.turnInfo {
    font-size: 10px;
}

.NoBasicOverlay {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 20px;
    margin-top: 50px;
    color: red;
}

.w-20 {
    width: 20% !important;
}


.hide {
    display: none;
}

.superLargeReadyIcon {
    font-size: 90px;
}

.activeUserRound {
    padding: 8px;
    background: green;
    border-radius: 15px;
    width: 3px;
    margin: 3px auto 0 auto;
    border: 1px solid black;
    height: 3px;
}

.RemainingDeckCardImage {
    max-width: 100px;
}

.PriceDeckCardImage {
    max-width: 65px;
}

.DiscardedCards {
    float: right;
    right: 55px;
    position: relative;
    top: 20px;
    opacity: 0.4;
}

.discardDeckCardImage {
    max-width: 45px;
    margin-left: -30px;
}

.discardDeckCardImage:first-child {
    margin-left: 0px;
}

.discardSpecialCard {
    font-size: 12px;
}

.cupOnPrices {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 35px;
    color: #ffcb05;
    text-shadow: 0 0 5px #3c5aa6, /* Top shadow */ 0 0 5px #3c5aa6, /* Bottom shadow */ 5px 0 5px #3c5aa6, /* Right shadow */ -5px 0 5px #3c5aa6; /* Left shadow */
    transform: translate(-50%, -50%); /* Center the element both horizontally and vertically */
/ padding: 5 px; /* Adjust padding as needed */
}

.RemainingDeckCards, .RemainingPrizeCards {
    text-align: center; /* Center the contents horizontally */
    position: relative; /* Required for absolute positioning */
}

.CardDeckCounter {
    position: absolute;
    right: 34px;
    font-size: 15px;
    bottom: -12px;
    background: rgb(255, 255, 255, 0.5);
    border-radius: 15px;
    padding: 1px 5px;
}

.PriceDeckCounter {
    position: absolute;
    right: 54px;
    font-size: 15px;
    bottom: -12px;
    background: rgb(255, 255, 255, 0.5);
    border-radius: 15px;
    padding: 1px 8px;
}


.OpponentBox {
    position: absolute;
    top: 0px;
    width: 150px;
}

.benchBoxTop {
    border: 10px solid black;
    height: 150px;
    margin: -50px 0 0 0;
    background-color: rgba(255, 255, 255, 1);
}

.OpponentBackCards {
    width: auto; /* Adjust the width as needed */
    height: auto; /* Adjust the height as needed */
    max-width: 50px;
    padding: 2px;
}

.selectAvatar {
    cursor: pointer;
}

.myhandArea {
    margin-top: 50px;
}

.centeredBoxOverlay {
    position: fixed; /* Makes the block stay in the same place even when scrolling */
    top: 40%; /* Center vertically */
    left: 50%; /* Center horizontally */
    min-width: 800px;
    background-color: lightsteelblue;
    min-height: 200px;
    border: 5px solid black;
    border-radius: 20px;
    padding: 10px;
    z-index: 1000; /* Ensures it stays above other content */
    transform: translate(-50%, -50%); /* Adjusts the position to truly center it because top/left refer to the top-left corner */
}

.MyAccountBox .musicSettings {
    background-color: rgba(255, 255, 255, 0.8);
}

div#getReady {
    max-width: 600px;
    margin: auto;
}

.musicSettings {
    padding: 5px 10px;
    font-size: 12px;
}

.selectedBenchCard {
    border: 5px solid green;
}


.overlayHeader {
    text-align: center;
    font-weight: bold;
    border-bottom: 1px solid;
}


.table > :not(caption) > * > * {
    background: transparent;
}

.benchCards img {
    width: 90px;
    max-height: 150px;
}

.benchCardEnergie img {
    width: 90px;
    max-height: 150px;
}

.MyBenchCards img {
    width: 120px;
    max-height: 200px;
}

.benchCards {
    padding: 2px;
    text-align: center;
}

.OpponentCards {
    margin-top: -30px;
}

.benchBoxBottom {
    border: 10px solid black;
    height: 150px;
    margin: 0 0 -50px 0;
    background-color: rgba(255, 255, 255, 1);
}

.MyAccountBox {
    position: absolute;
    bottom: 10px;
    right: 0px;
    width: 150px;
}

.logBox {
    position: absolute;
    top: 340px;
    left: 0px;
    width: 300px;
}

.logHolder {
    height: 200px;
    font-size: 10px;
    overflow: auto;
}

.logHeader {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid black;
}

.mySettingsBox {
    position: absolute;
    top: 0px;
    right: 0px;
}

.row.centerBoard {
    margin-top: 125px;
}

.scotlandFont {
    font-family: scotland;
}

@font-face {
    font-family: scotland;
    src: url(../webfonts/scotland.ttf);
}

.lead {
    padding-top: 35px;
    color: lawngreen;
    font-weight: bold;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.bg-white {
    background-color: rgba(255, 255, 255, 0.7) !important;
}

body {

    background-color: #ffffff;
    background-image: url("../images/background_30.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed, fixed;
}

.footer {
    background: white;
    width: 220px;
    border-radius: 10px;
    margin: 10px auto;
}

.logoHeader {
    width: 75%;
}

label {
    font-weight: bold;
}

.header {
    background-image: url(../images/header_bg.png);
    background-position: center center;
    background-repeat: repeat;
}

.headermenu {
    margin-top: 6px;
}

.smallcard {
    width: 100%;
    padding: 5px;
}

.whitebackground {
    padding: 15px;
    background: rgb(255, 255, 255, 0.8);
    border-radius: 20px;
}

.errormessage {
    color: red;
    font-size: 12px;
}

.supersizeenvelop {
    font-size: 150px;
}

.accountcolors {
    color: #ffc107;
}

.accountcolors:hover {
    color: #007bff;
}

.headercolors {
    color: #007bff;
}

.headercolors:hover {
    color: #ffc107 !important;
}

.accountcolorsdefault {
    color: #007bff;
}

.newsbutton {
    position: absolute;
    bottom: 20px;
    width: 90%;
}

.portrait_top {
    border-bottom: none;
    background: #ffc107;
    border: 1px solid #007bff;
    text-align: center;
    padding: 5px 10px;
    margin-top: 10px;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 15px 15px 0px 0px;
}

.portrait {
    border: 1px solid #007bff;
    border-bottom: none;
}

.mrx {
    margin-top: 100px;
}

.dashboardtitle {
    margin-top: 10px;
    border: 1px solid black;
    padding: 5px 10px;
    font-family: scotland, serif;
    background: linear-gradient(90deg, rgba(0, 39, 56, 1) 0%, rgba(0, 97, 132, 1) 22%, rgba(0, 116, 162, 1) 100%);
    font-weight: bold;
    color: white;
    border-radius: 10px;
    text-transform: uppercase;
    text-align: center;
}

.Boardtitle {
    margin-top: 10px;
    padding: 5px 10px;
    font-family: scotland, serif;
    background: linear-gradient(90deg, rgba(0, 39, 56, 1) 0%, rgba(0, 97, 132, 1) 22%, rgba(0, 116, 162, 1) 100%);
    font-weight: bold;
    color: white;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    text-transform: uppercase;
    text-align: center;
}

.mydecks {
    text-align: center;
}

.dashboardbutton {
    margin-top: 5px;
}

div#battleroomsouter {
    text-align: left;
}

.onlineplayers {
    font-size: 14px;
    margin-right: 5px;
}

.backgroundonlineplayers {
    position: absolute;
    font-size: 10px;
    margin: 2px;
    color: lime;
}

.filtertitle {
    font-weight: bold;
    padding: 10px 0px;
}

.filterselect {
    cursor: pointer;
}

.deckbuildercard {
    margin-bottom: 10px;
    cursor: pointer;
}

.typeselect {
    margin-right: 15px;
    margin-bottom: 0px;
}

.hoovercard {
    cursor: zoom-in;
}

.fullcard {
    width: 320px;
    z-index: 1000;
    position: fixed;
    top: 200px;
    right: 0px;
}

#carddeck {
    height: 145px;
    width: 110px;
    margin: 10px auto;
    padding: 10px;
    border: 4px solid #ffc107;
    background: #007bff;
    color: #ffc107;
}

#carddeckdelete {
    height: 145px;
    width: 110px;
    margin: 10px auto;
    padding: 10px;
    border: 4px solid black;
    background: red;
    color: #ffc107;
}

.fullcard {
    display: none;
}

i.far.fa-plus-hexagon, i.far.fa-check {
    font-size: 35px;
    margin-top: 15px;
}

i.far.fa-minus-hexagon, i.far.fa-check {
    font-size: 35px;
    margin-top: 15px;
}

.added {
    display: none;
}

span#resetcards {
    float: right;
}

.draggable {
    z-index: 1;
}

.dragMe {
    cursor: grab;
}

img.mycarddeck {
    max-width: 65px;
}

.notdraggable {
    opacity: 0.5;
    border: 2px solid red !important;
    cursor: not-allowed;
}

.col-sm-6.filtersmall {
    font-size: 12px;
    padding-right: 0px;
    text-align: left;
    margin-top: 15px;
}

div#mydeckcards {
    margin-top: 10px;
    min-height: 100px;
}

.typerow {
    text-align: left;
}

span.tinytext {
    font-size: 12px;
}

.searchfilter {
    margin-top: 10px;
    padding: 2px 10px;
}

.table td, .table th {
    padding: 10px;
}

.table {
    margin-bottom: 0px;
}

table.customtable td {
    padding: 10px 0px;
}

.choosedecktitle {
    float: left;
    font-weight: bold;
}


.nodeckselecterror {
    display: none;
    color: red;
    padding-bottom: 10px;
}


div#battleroomsouter {
    max-height: 310px;
    overflow: hidden;
}

div#battlerooms {
    overflow-y: auto;
    max-height: 310px;
}

.spectateeye {
    color: black;
}

.spectateeye i {
    color: black;
    margin-top: 4px;
}

#cardaddedmessage {
    position: sticky;
    top: 20px;
    z-index: 99999;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    display: none;
    color: white;
    background-color: black;
    border-color: red;
    border: 2px solid red;
    padding: 20px;
}

.offlinefield {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    display: none;
}

.tempborder {
    border: 2px solid red;
}

.centerbattlefield {
    padding: 10px;
}

.console {
    float: left;
    background: black;
    color: lime;
    position: absolute;
    z-index: 999999;
    width: 300px;
    padding: 10px;
    margin-top: 100px;
    margin-left: 20px;
}

.consoletitle {
    border-bottom: 2px solid white;
    color: white;
    text-transform: uppercase;
    text-align: center;
}

.innerconsole {
    font-size: 13px;
}

.carddeck {
    margin-bottom: 10px;
    text-align: center;
    padding: 0px 25px;
}

.cardgraveyard {
    margin-bottom: 10px;
    text-align: center;
    padding: 0px 25px;
    opacity: 0.2;
}

.pricetable {
    float: left;
    width: 50%;
    padding: 1px;
}

.cardsinhand {
    width: 100px;
    cursor: pointer;
}

.myhand {
    margin-top: 15px;
    bottom: 0px;
    text-align: center;
}

#requesthand {
    background: black;
    padding: 10px;
}

#draggablehandheader {
    color: white;
    text-transform: uppercase;
    border-bottom: 1px solid white;
    margin-bottom: 10px;
}

.cardsleft {
    margin-top: -24px;
    background: black;
    color: white;
    padding: 0px 2px;
    position: relative;
}

.myturntodraw {
    cursor: pointer;
}

.benchplaceholder {
    border: 1px solid #999;
    background: silver;
    border-radius: 10px;
    height: 141px;
}


#draggable {
    width: 100px;
    height: 100px;
    background-color: #f00;
    color: white;
    text-align: center;
    line-height: 100px;
    cursor: move;
}

.row.bench {
    margin-top: 15px;
    padding: 0px 40px;
}

.row.opponentbench {
    margin-bottom: 15px;
}

.trainerPlace.drop-location.possibleDragBox {
    border: 3px solid blue;
    animation: animate 3s linear infinite
}


.benchCards.drop-location.possibleDragBox {
    animation: animate;
    border: 3px solid blue;
    height: 130px;
    animation: animate 3s linear infinite
}

.extra_largeinfo {
    background: black;
    color: white;
    padding: 10px;
}

.actiondiv {
    border-bottom: 1px solid white;
}

.ui-draggable {
    cursor: all-scroll;
}

.newcards {
    max-width: 115px;
}

.fa-spinner {
    margin-top: 25px;
    font-size: 100px;
}


.pulse {
    position: relative;
    animation: animate 3s linear infinite;
    cursor: pointer;
}

.pulse i {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: #fff;
    height: 100%;
    cursor: pointer
}

@keyframes animate {
    0% {
        box-shadow: 0 0 0 0 rgb(0, 255, 0, 0.7), 0 0 0 0 rgb(0, 255, 0, 0.7)
    }
    40% {
        box-shadow: 0 0 0 50px rgb(0, 255, 0, 0), 0 0 0 0 rgb(0, 255, 0, 0.7)
    }
    80% {
        box-shadow: 0 0 0 50px rgb(0, 255, 0, 0), 0 0 0 30px rgb(0, 255, 0, 0)
    }
    100% {
        box-shadow: 0 0 0 0 rgb(0, 255, 0, 0), 0 0 0 30px rgb(0, 255, 0, 0)
    }
}

@keyframes smallAnimate {
    0% {
        box-shadow: 0 0 0 0 rgb(0, 255, 0, 0.7), 0 0 0 0 rgb(0, 255, 0, 0.7)
    }
    40% {
        box-shadow: 0 0 0 50px rgb(0, 255, 0, 0), 0 0 0 0 rgb(0, 255, 0, 0.7)
    }
    80% {
        box-shadow: 0 0 0 50px rgb(0, 255, 0, 0), 0 0 0 30px rgb(0, 255, 0, 0)
    }
    100% {
        box-shadow: 0 0 0 0 rgb(0, 255, 0, 0), 0 0 0 30px rgb(0, 255, 0, 0)
    }
}


.boardBorder {
    width: 100%;
    height: 95vh; /* Adjust the height as necessary */
    overflow: hidden;
    position: relative;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border: 2px solid rgba(0, 116, 162, 1);
}

.boardGame {
    position: relative;
    width: 2570px;
    height: 1926px; /* This ensures it takes up the full viewport height */
    background-image: url(../images/background.jpg);
    background-repeat: no-repeat;
    background-position: top left;
    cursor: grab;
}

.numberChooser{
    font-size:20px;
}

#imageXcontainer {
    position: relative;
}
#GameLog, #GameChat {
    padding-top:5px;
    font-size: 1.2vh;
    max-height: 250px; /* Set the maximum height of the chat container */
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: hidden; /* Prevent horizontal scrolling if not needed */
}

.PlayerIconInfo{
    font-size:40px;
}

.playerIcon{
    margin-top:-50px;
    margin-left:-2px;
}

.player_color_1{
    color:red;
    text-shadow: 1px 1px 2px black;
}

.player_color_2{
    color:blue;
    text-shadow: 1px 1px 2px black;
}

.player_color_3{
    color:yellow;
    text-shadow: 1px 1px 2px black;
}

.player_color_4{
    color:pink;
    text-shadow: 1px 1px 2px black;
}


#imageXcontainer img {
    position: absolute;
    transition: opacity 3s ease-in-out;
}

#prepareChat, #prepareLog {
    max-height: 250px; /* Set the maximum height of the chat container */
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: hidden; /* Prevent horizontal scrolling if not needed */
}

a{
    text-decoration: none;
}

.boardButton {
    position: absolute;
    border: 3px solid purple;
    width: 42px;
    height: 41px;
    border-radius: 40px;
}

.player_border_color_1{
    border: 3px solid red !important;
    animation: animatered 3s linear infinite;
}

.selectedWay{
    border: 3px solid black !important;
    animation: animateblack 3s linear infinite;
}

.player_border_color_2{
    border: 3px solid blue !important;
    animation: animateblue 3s linear infinite;
}

.player_border_color_3{
    border: 3px solid yellow !important;
    animation: animateyellow 3s linear infinite;
}

.player_border_color_4{
    border: 3px solid pink !important;
    animation: animatepink 3s linear infinite;
}


@keyframes animatered {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7), 0 0 0 0 rgba(255, 0, 0, 0.7);
    }
    40% {
        box-shadow: 0 0 0 50px rgba(255, 0, 0, 0), 0 0 0 0 rgba(255, 0, 0, 0.7);
    }
    80% {
        box-shadow: 0 0 0 50px rgba(255, 0, 0, 0), 0 0 0 30px rgba(255, 0, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0), 0 0 0 30px rgba(255, 0, 0, 0);
    }
}

.mrxTable{
    width:100%;
}

.mrxTable tr td:nth-child(1),
.mrxTable tr td:nth-child(3),
.mrxTable tr td:nth-child(5) {
    width: 15px;
}

.mrxTable tr td:nth-child(2),
.mrxTable tr td:nth-child(4),
.mrxTable tr td:nth-child(6) {
    width: 30px;
}

.mrxTable tr td{
 text-align: center;
}

.whiteMrxOption{
    height:30px;
    width:100%;
    color:black;
    background:white;
    border-radius:15px;
}

.xmethod_1{
    background:yellow !important;
}
.xmethod_2{
    background:#49AB9C !important;
}
.xmethod_3{
    background:#E9624C !important;
}
.xmethod_4{
    background:black !important;
    border:1px solid white;
}

.selectBoardButton{
    cursor:pointer;
}

.blueboard{
    background:black;
    padding:10px;
    margin-top:10px;
    color:white;
    border-radius: 15px;
}


@keyframes animateblue {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 0, 255, 0.7), 0 0 0 0 rgba(0, 0, 255, 0.7);
    }
    40% {
        box-shadow: 0 0 0 50px rgba(0, 0, 255, 0), 0 0 0 0 rgba(0, 0, 255, 0.7);
    }
    80% {
        box-shadow: 0 0 0 50px rgba(0, 0, 255, 0), 0 0 0 30px rgba(0, 0, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 0, 255, 0), 0 0 0 30px rgba(0, 0, 255, 0);
    }
}

@keyframes animateblack {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7), 0 0 0 0 rgba(0, 0, 0, 0.7);
    }
    40% {
        box-shadow: 0 0 0 50px rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0.7);
    }
    80% {
        box-shadow: 0 0 0 50px rgba(0,0, 0, 0), 0 0 0 30px rgba(0, 0, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 30px rgba(0, 0, 0, 0);
    }
}

@keyframes animateyellow {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 0, 0.7), 0 0 0 0 rgba(255, 255, 0, 0.7);
    }
    40% {
        box-shadow: 0 0 0 50px rgba(255, 255, 0, 0), 0 0 0 0 rgba(255, 255, 0, 0.7);
    }
    80% {
        box-shadow: 0 0 0 50px rgba(255, 255, 0, 0), 0 0 0 30px rgba(255, 255, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 0, 0), 0 0 0 30px rgba(255, 255, 0, 0);
    }
}

@keyframes animatepink {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 0, 255, 0.7), 0 0 0 0 rgba(255, 0, 255, 0.7);
    }
    40% {
        box-shadow: 0 0 0 50px rgba(255, 0, 255, 0), 0 0 0 0 rgba(255, 0, 255, 0.7);
    }
    80% {
        box-shadow: 0 0 0 50px rgba(255, 0, 255, 0), 0 0 0 30px rgba(255, 0, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 0, 255, 0), 0 0 0 30px rgba(255, 0, 255, 0);
    }
}

.taxiOption{
    background:yellow;
    border-radius:15px;
}
.busOption{
    background:#49AB9C;
    border-radius:15px;
}
.metroOption{
    background:#E9624C;
    color:white;
    border-radius:15px;
}
.blackOption{
    background:black;
    color:white;
    border-radius:15px;
}

.gameTravel{
    cursor:pointer;
}