.boardbutton {
    position: absolute;
    min-width: 8vw;
    max-width: 10.4vw;
}

.messageLeftOfConnection {
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: .5vw !important;
    max-width: 29vw !important;
}
.messageCentered {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
}
.messagebelowboard {
    top: 58vh !important;
    left: 59.5vw !important;
    width: 39.5vw !important;
    font-size: 1.7vw !important;
}
.messageBelowBonanzaGraf {
    top: 69vh !important;
    left: 1vw !important;
    width: 44vw !important;
}

@keyframes warningsign {
    49% {
        outline-offset: 0px;
    }

    50% {
        outline-offset: -3px;
    }

    99% {
        outline-offset: -3px;
    }
}

.ouch {
    animation-iteration-count: infinite;
    animation-name: warningsign;
    animation-duration: 1s;
    background-color: yellow;
    padding: .8em;
    border-radius: 1em;
    outline-style: dashed;
    outline-color: red;
    outline-width: 10px;
    outline-offset: 0px;
}

.autoloan {
    background-color: #6fb3d5;
    color: #00195b;
    padding: .8vw;
    border-radius: 1em;
    border: 0.7vw dashed #9dffa1;
    outline: none;
}
#d5 {
    display: none;;
}
#skip {
    cursor: pointer;
}

#borrowbutton {
    left: 16.5vw;
    top: 15.5vh;
}

#paybackbutton {
    left: 16.5vw;
    top: 19.5vh;
}

#buymarketbutton {
    left: 16.5vw;
    top: 23.5vh;
}

#hintButton {
    position: absolute;
    top: 60vh;
    left: 29vw;
    font-size: .85vw;
    padding: 0.4vw;
    opacity: 0;
    display: none;
    transition: opacity 1.5s ease;
}

#dividends {
    position: absolute;
    width: 29vw;
    height: 37vh;
    padding: 1vw;
    box-shadow: 4px 4px 14px 1px #0e0e0e;
    color: #ccc;
    background-color: #3a3020;
    z-index: 2000;
    left: 19vw;
    top: 57vh;
    font-size: 1.4vw;
    display: none;
}
#dividends h2, #dividends p {
    margin-block-start: 0;
}
#dividendsbutton {
    display: none;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 13vw;
}

#dividendAmountInput::-webkit-outer-spin-button,
#dividendAmountInput::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
#dividendAmountInput {
    font-size: 2.2vw;
    text-align: center;
    width: 28.4vw;
}
#dividends #PayDividendsButton {
    bottom: 2vh;
    right: 1vw;    
}
#DividendsMessage {
    color: yellow;
}
#CloseDividendsButton {
    top: 1vh;
    right: 1vw;
}
.xCentered {
    left: 50%;
    transform: translateX(-50%);
}
.yBottom {
    top: unset !important;
    bottom: 3vh;
}
.visible {
    display: block !important;
}

.opacity1 {
    opacity: 1 !important;
}

#orgcard {
    position: absolute;
    top: -3vh;
    right: 0vw;
    font-size: .8vw;
    font-weight: 100;
}

#pausetext {
    color: #e13d3d;
    font-size: 2.7vw;
    transform: rotate(-45deg);
    bottom: 6vh;
    position: absolute;
    font-family: calibri, verdana, helvetica, arial;
    width: 100%;
    display: none;
    text-align: center;
}

.calendar.paused div {
    color: #5b5b5b;
}

.calendar.paused div#pausetext {
    display: block;
}


#reloadCode {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 25px;
    height: 25px;
    background-image: url(../images/reloadwhite.png);
    background-repeat: no-repeat;
    background-size: contain;
    opacity: .5;
}

#checkmark {
    position: absolute;
    width: 10vw;
    height: 10vh;
    background-image: url(../images/checkmark.png);
    background-size: contain;
    background-repeat: no-repeat;
    display: none;
    transition: all 1s;
}

#checkmark.checkans1 {
    left: 15vw;
    display: block;
}

#checkmark.checkans2 {
    display: block;
    left: 26vw;
}

#checkmark.checkans3 {
    display: block;
    left: 21vw;
    top: -2vh;
}

#fullscreen {
    position: absolute;
    left: 2.8vw;
    bottom: .5vh;
    width: 1.8vw;
    height: 3.8vh;
    background-image: url(../images/fullscreenicon.png);
    background-repeat: no-repeat;
    background-size: contain;
    float: left;
    cursor: pointer;
}

#fullscreen:hover {
    transform: scale(1.5);    
}

#fullscreen.isInFullScreen {
    background-image: url(../images/notfullscreenicon.png);
}

#settings {
    position: absolute;
    left: .5vw;
    bottom: 0.7vh;
    width: 1.8vw;
    height: 3.6vh;
    background-image: url(../images/settings.png);
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;    
}

span.rolename {
    font-size: .8em;
    color: #daff6a;
    text-shadow: 0px 0px 13px black;
}

#answertype {
    position: absolute;
    left: 1vw;
    color: white;
    font-size: 2em;
    top: 1%;
}

.disagreed {
    color: #ff4d4d;
    text-shadow: 0px 0px 15px #ff4242
}

span#answertype1 {
    color: #66bbff;
}

.blanker {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9;
}

#blanker,
#messageblanker {
    background-color: #6f6f6fc9;
    display: none;
    background-image: url(../images/blurredgame.png);
    background-size: cover;
    background-repeat: no-repeat;
}

#messageblanker {
    z-index: 3;
}

.message {
    position: absolute;
    background-color: #000;
    color: #ff9d66;
    border: .1vw solid #ff9d66;
    border-radius: 1vw;
    top: 100vh;
    opacity: 0;
    transition: all 1s ease;
    min-width: 20%;
    z-index: 1000;
    font-size: 1.5vw;
    box-shadow: 5px 5px 15px 0px #000000c2;
}

.message p {
    margin: 2vw;
    transition: all 2s;
}

tr.markit {
    color: rgb(0, 182, 255);
}

tr.markit_Plus {
    color: #06d900;
}

tr.markit_Minus {
    color: #ff5454;
}

#card {
    position: absolute;
    color: black;
    font-size: 1.44vw;
    z-index: 3;
    left: 50%;
    width: 35vw;
    top: 50%;
    height: 47vh;
    transform: translate(-50%, -50%);
}


#card p {
    margin-block-end: 1vh;
    margin-block-start: 2.1vh;
    line-height: 3.2vh;    
}

#card h {
    font-weight: 700;
    text-align: center;
    margin-block-end: 1vh;
    margin-block-start: -2vh;
    display: block;
    font-variant: small-caps;
    text-decoration: underline;
}

#cardpane {
    z-index: 2;
    position: absolute;
    opacity: 0;
    width: 39.5vw;
    height: 55vh;
    left: 59.3vw;
    top: -100vh;
    background-color: #cccccc;
    transition: top .3s ease, opacity .2s ease;
}
.backbutton {
    position: absolute;
    top: 50%;
    left: 3%;
    transform: translateY(-50%) rotate(135deg);
    width: 70px;
    height: 70px;
    border: 7px solid #0091c7;
    border-radius: 0px;
    border-left: 0;
    border-top: 0;
}

.backbutton:hover {
    box-shadow: none;
    border-color: #92e2ff;
    background-color: transparent;
    border-radius: 0px;
    transform: translateY(-50%) rotate(135deg) scale(1.3);
}

.backbutton:focus {
    outline: none;
}


div#okbutton {
    display: none;
    position: absolute;
    top: 50%;
    width: 100%;
    height: 100%;
    transform: translateY(-50%);
    text-align: center;
}

div#yesnobuttons {
    position: absolute;
    left: 50%;
    width: 20vw;
    display: none;
    height: 4vh;
    transform: translateX(-50%);
}

button#yes {
    position: absolute;
    text-shadow: 3px 4px 6px #003500;
    background-color: darkgreen;
    box-shadow: 3px 3px 5px 0px #002100;
}

button#no {
    position: absolute;
    right: 0;
    text-shadow: 3px 4px 6px #2c0000;
    background-color: #640000;
    box-shadow: 3px 3px 5px 0px #210000;
}

button#ok {
    position: absolute;
    left: 50%;
    min-width: 40%;
    max-width: 47%;
    transform: translate(-50%, -50%);
    text-shadow: 3px 4px 6px #000513;
    padding: 0% 3% 0% 3%;
    background-color: #00195b;
    top: 50%;
    box-shadow: 3px 3px 5px 0px #210000;
}

button#yes:hover {
    box-shadow: 2px 5px 20px 3px #004f06;
    background-color: #099800;
    transition: all .3s;
}

button#no:hover {
    box-shadow: 2px 5px 20px 3px #470000;
    background-color: #980000;
    transition: all .3s;
}

button#ok:hover {
    box-shadow: 2px 5px 20px 3px #000114;
    background-color: #002898;
    transition: all .3s;
}

#answerpane {
    position: absolute;
    height: 8vh;
    width: 39.5vw;
    display: none;
    z-index: 3;
    top: 48vh;
    left: 59.3vw;
}

#answerpane button {
    font-size: 2vw;
    border: none;
    border-radius: .3vw;
    min-width: 9vw;
}

#callindicator {
    position: fixed;
    z-index: 2000;
    top: 0;
    right: 0;
    width: 308px;
    height: 20px;
    color: white;
    text-align: right;
}

#saleloop {
    top: 39vh;
    left: 11.5vw;
}

#financeloop {
    top: 12vh;
    left: 4.3vw;
}

#purchaseloop {
    top: 15vh;
    left: 28vw;
}

.loopname {
    position: absolute;
    color: #8f8f8f;
    text-align: center;
    width: 9vw;
    font-size: 1.6vw;
    text-shadow: 1px 1px 3px black;
}

.calendar {
    position: absolute;
    top: 69vh;
    left: 49.45vw;
    box-shadow: 4px 5px 11px 0px black;
    background-image: url(../images/calendar.png);
    background-size: cover;
    width: 8.5vw;
    height: 21vh;
    background-repeat: no-repeat;
    text-align: center;
    font-family: serif;
    font-weight: bold;
    margin: 0;
    padding: 0;
    color: #202020;
}

#calendar>div.paused {
    color: darkred;
}

#monthname {
    position: absolute;
    top: .5vh;
    left: 0;
    width: 100%;
    font-size: 1.2vw;
}

#daynum {
    position: absolute;
    top: 25%;
    left: 0;
    width: 100%;
    font-size: 5.2vw;
}

#weekday {
    position: absolute;
    top: 79%;
    left: 0;
    width: 100%;
    font-size: 1.3vw;
}

button {
    cursor: pointer;
    background-color: #00000000;
    color: #60d5ff;
    font-family: inherit;
    border: .1vw solid #60d5ff;
    border-radius: 3vw;
    font-size: 0.95vw;
    padding: 0.25vw;
    transition: all .2s ease;
    box-shadow: 1px 1px 3px #191919;
}

button.red {
    color: #ad3535;
}

button.green {
    color: #068802;
}

button:disabled {
    background-color: #5f5f5f40 !important;
    color: #4e4e4e !important;
    cursor: default;
    text-shadow: none !important;
    border: none;
    box-shadow: none !important;
}

button:hover {
    box-shadow: 0px 0px 20px 2px;
    color: #ffffff;
    text-shadow: 1px 1px 5px black;
}

#connectDialog .normalbutton {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-color: #0000004d;
    min-width: 20vw;
    font-size: 1.5em;
    top: 80%;
}

#connectDialog .normalbutton:not([disabled="true"]):not([disabled]):hover {
    background-color: #00b0f0 !important;
}

#connectDialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 32vw;
    height: 17em;
    background-color: #161616;
    text-align: center;
    font-size: 1.5vw;
    display:
        none;
    padding: 2vw;
    z-index: 10;
    box-shadow: 5px 5px 15px 0px #000000c2;
}

#connectDialog h1 {
    font-size: 1.8em;
    font-weight: 400;
    margin: -14px;
}

#connectDialog p {
    margin-block-end: 0em;
    margin-block-start: 0.6em;
}

#connectDialog ol {
    margin: 0px;
    padding-left: 0%;
    position: relative;
}

#connectDialog ol li {
    text-align: left;
}


#connectDialog ul li {
    list-style: none;
    text-align: left;
}

#connectDialog p.listheader {
    text-align: left;
}

p[data-langtext="connectYourName"] {
    margin-top: 0.5em;
}


#d1 {
    position: absolute;
    box-shadow: 4px 4px 14px 1px #0e0e0e;
    background-color: #333;
    width: 39.5vw;
    height: 55vh;
    left: 59.3vw;
    top: 2vh;
}

#d2 {
    position: absolute;
    height: 62vh;
    width: 55vw;
    padding: 1vw;
    box-shadow: 4px 4px 14px 1px #0e0e0e;
    left: 1vw;
    top: 2vh;
    font-size: 1vw;
    background-color: #333;
}

#d3,
#d4 {
    position: absolute;
    background-color: #333;
    padding: .5vw;
    box-shadow: 4px 4px 14px 1px #0e0e0e;
    color: #ccc;
    overflow: auto;
    left: 59.3vw;
    width: 38.5vw;
    top: 59vh;
    height: 29vh;
    text-shadow: 1px 1px 3px black;
}

#d4 {
    display: none;
}

#d3 table,
#d4 table {
    width: 37.3vw;
    position: absolute;
    left: 1vw;
    top: 5vh;
}

#d3 table,
#d3 table td,
#d4 table,
#d4 table td {
    border: 0.1px solid #999;
    border-collapse: collapse;
    font-size: 1.1vw;
    font-weight: 100;
    padding-left: .5vw;
    padding-right: .5vw;
}

#d3 table th,
#d4 table th {
    background-color: black;
    height: 2.7vh;    background-color: #333;

}

#results.noCenterY {
    top: 0px;
}

#d3 tr td:nth-child(even),
#d3 tr th:nth-child(even),
#d4 tr td:nth-child(even),
#d4 tr th:nth-child(even) {
    text-align: right;
}

#d3 tr:hover,
#d4 tr:hover {
    background-color: #000;
    color: white;
}

#showOthersButton,
#showOnlyMyGroup {
    position: absolute;
    z-index: 1;
}

button#allAccs {
    padding: 0px 9px;
    font-size: .7em;
    margin: 0px;
    position: absolute;
    left: 10px;
    top: 4px;
}

#gameboard {
    margin: 0px;
    position: relative;
    width: 39.5vw;
    height: 55vh;
}

.inputbox {
    color: #00B0F0;
    background-color: #545050;
    box-shadow: 2px 3px 9px 0px black;
    border: none;
    font-size: 2em;
    text-align: center;
    text-shadow: 1px 1px 5px #0000008f;
    font-family: calibri;
    max-width: 27vw;
}

#username {
    max-width: 8vw;
}

.gameNrInput,
.saveGameInput {
    font-size: 2em;
    max-width: 3.7vw;
    text-align: center;
    padding: 0.2vw;
}

.gameNrInput[readonly]:focus {
    outline: none;
}

.gameNrInput[readonly] {
    cursor: default;
}

.flashcircle {
    position: absolute;
    width: 3.2vw;
    height: 3.4vw;
    background-image: url(../images/selectRouteCircle.png);
    display: none;
    cursor: pointer;
    margin-top: 1vw;
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: -0.3vw;
}

#bookingarrow {
    position: absolute;
    top: 22.8vh;
    left: 58vw;
    width: 7vw;
    height: 14vh;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 1;
    background-color: #ccc;
    display: none;
    transition: all .2s ease;
    transform: scale3d(0.35, 2.8, 1) rotate(45deg);
}
.bookingarrowVisible {
    left: 55.9vw;
    display: block;
}

.flashcircle[data-square="1"] {
    left: 31.2vw;
    top: 43.1vh;
}

.flashcircle[data-square="2"] {
    left: 26.8vw;
    top: 44.4vh;
}

.flashcircle[data-square="3"] {
    left: 21.9vw;
    top: 46vh;
}

.flashcircle[data-square="8"] {
    left: 5.8vw;
    top: 35.1vh;
}

.flashcircle[data-square="9"] {
    left: 8.1vw;
    top: 29.4vh;
}

.flashcircle[data-square="10"] {
    left: 10.8vw;
    top: 25.9vh;
}

.flashcircle[data-square="11"] {
    left: 14.4vw;
    top: 24.8vh;
}

.flashcircle[data-square="12"] {
    left: 17.8vw;
    top: 25.4vh;
}

.flashcircle[data-square="13"] {
    left: 21.1vw;
    top: 27.1vh;
}

.flashcircle[data-square="16"] {
    left: 2.9vw;
    top: 40.5vh;
}

.flashcircle[data-square="17"] {
    left: 1.7vw;
    top: 34.6vh;
}

.flashcircle[data-square="18"] {
    left: 1.6vw;
    top: 28vh;
}

.flashcircle[data-square="19"] {
    left: 1.3vw;
    top: 21.7vh;
}

.flashcircle[data-square="20"] {
    left: 1.1vw;
    top: 14.1vh;
}

.flashcircle[data-square="21"] {
    left: 1.3vw;
    top: 7.6vh;
}

.flashcircle[data-square="22"] {
    left: 2.6vw;
    top: 2vh;
}

.flashcircle[data-square="26"] {
    left: 12.9vw;
    top: 12.9vh;
}

.flashcircle[data-square="27"] {
    left: 9.6vw;
    top: 18vh;
}

.flashcircle[data-square="28"] {
    left: 5.1vw;
    top: 18.1vh;
}

.flashcircle[data-square="29"] {
    left: 19vw;
    top: 6.3vh;
}

.flashcircle[data-square="30"] {
    left: 24.3vw;
    top: 6vh;
}

.flashcircle[data-square="31"] {
    left: 29.1vw;
    top: 2.7vh;
}

.flashcircle[data-square="32"] {
    left: 33.2vw;
    top: 1.4vh;
}

.flashcircle[data-square="33"] {
    left: 36.4vw;
    top: 6.4vh;
}

.flashcircle[data-square="34"] {
    left: 36.3vw;
    top: 14.1vh;
}

.flashcircle[data-square="35"] {
    left: 30.7vw;
    top: 21.2vh;
}

.flashcircle[data-square="36"] {
    left: 26.7vw;
    top: 19.1vh;
}

.flashcircle[data-square="37"] {
    left: 25.6vw;
    top: 11.5vh;
}

.flashcircle[data-square="38"] {
    left: 36.3vw;
    top: 23.7vh;
}

.flashcircle[data-square="39"] {
    left: 36.1vw;
    top: 31.6vh;
}

.flashcircle[data-square="40"] {
    left: 35.4vw;
    top: 39.5vh;
}

#dice {
    position: absolute;
    width: 4.2vw;
    height: 4.2vh;
    transition: all .4s;
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
}


#dice[data-square="1"] {
    left: 31.6vw;
    top: 46.5vh;
}

#dice[data-square="2"] {
    left: 27.2vw;
    top: 47.8vh;
}

#dice[data-square="3"] {
    left: 22.2vw;
    top: 49.5vh;
}

#dice[data-square="4"] {
    left: 18.6vw;
    top: 49.1vh;
}

#dice[data-square="5"] {
    left: 15.3vw;
    top: 48.8vh;
}

#dice[data-square="6"] {
    left: 11.7vw;
    top: 48.5vh;
}

#dice[data-square="7"] {
    left: 8.5vw;
    top: 47.8vh;
}

#dice[data-square="8"] {
    left: 6.1vw;
    top: 38.6vh;
}

#dice[data-square="9"] {
    left: 8.4vw;
    top: 32.8vh;
}

#dice[data-square="10"] {
    left: 11.2vw;
    top: 29.3vh;
}

#dice[data-square="11"] {
    left: 14.8vw;
    top: 28.5vh;
}

#dice[data-square="12"] {
    left: 18.1vw;
    top: 28.8vh;
}

#dice[data-square="13"] {
    left: 21.3vw;
    top: 30.6vh;
}

#dice[data-square="14"] {
    left: 23.8vw;
    top: 35.5vh;
}

#dice[data-square="15"] {
    left: 24vw;
    top: 41.7vh;
}

#dice[data-square="16"] {
    left: 3.2vw;
    top: 43.8vh;
}

#dice[data-square="17"] {
    left: 2vw;
    top: 38.1vh;
}

#dice[data-square="18"] {
    left: 1.9vw;
    top: 31.4vh;
}

#dice[data-square="19"] {
    left: 1.7vw;
    top: 25vh;
}

#dice[data-square="20"] {
    left: 1.5vw;
    top: 17.7vh;
}

#dice[data-square="21"] {
    left: 1.6vw;
    top: 11.2vh;
}

#dice[data-square="22"] {
    left: 3vw;
    top: 5.5vh;
}

#dice[data-square="23"] {
    left: 6.4vw;
    top: 2.8vh;
}

#dice[data-square="24"] {
    left: 9.7vw;
    top: 2.2vh;
}

#dice[data-square="25"] {
    left: 13.2vw;
    top: 4.5vh;
}

#dice[data-square="26"] {
    left: 13.2vw;
    top: 16.3vh;
}

#dice[data-square="27"] {
    left: 10vw;
    top: 21.3vh;
}

#dice[data-square="28"] {
    left: 5.5vw;
    top: 21.8vh;
}

#dice[data-square="29"] {
    left: 19.4vw;
    top: 9.6vh;
}

#dice[data-square="30"] {
    left: 24.7vw;
    top: 9.4vh;
}

#dice[data-square="31"] {
    left: 29.4vw;
    top: 6.4vh;
}

#dice[data-square="32"] {
    left: 33.6vw;
    top: 5vh;
}

#dice[data-square="33"] {
    left: 36.7vw;
    top: 9.8vh;
}

#dice[data-square="34"] {
    left: 36.7vw;
    top: 17.4vh;
}

#dice[data-square="35"] {
    left: 31.1vw;
    top: 24.7vh;
}

#dice[data-square="36"] {
    left: 27vw;
    top: 22.5vh;
}

#dice[data-square="37"] {
    left: 25.9vw;
    top: 15vh;
}

#dice[data-square="38"] {
    left: 36.7vw;
    top: 27.1vh;
}

#dice[data-square="39"] {
    left: 36.5vw;
    top: 34.8vh;
}

#dice[data-square="40"] {
    left: 35.7vw;
    top: 43.1vh;
}

#dice.e1 {
    background-image: url(../images/dice/dice1.gif);
}

#dice.e2 {
    background-image: url(../images/dice/dice2.gif);
}

#dice.e3 {
    background-image: url(../images/dice/dice3.gif);
}

#dice.e4 {
    background-image: url(../images/dice/dice4.gif);
}

#dice.e5 {
    background-image: url(../images/dice/dice5.gif);
}

#dice.e6 {
    background-image: url(../images/dice/dice6.gif);
}

#dice.rolling {
    background-image: url(../images/dice/tdice.gif);
}

#dice.paused {
    opacity: .3;
    cursor: default !important;
}

.switcharrow {
    position: absolute;
    display: none;
    cursor: pointer;
}

#arw716 {
    left: 5.3vw;
    top: 47.1vh;
    width: 3vw;
    height: 1.9vw;
}

#arw78 {
    left: 5.8vw;
    top: 43.3vh;
    width: 2.4vw;
    height: 3.7vw;
}

#arw2526 {
    left: 14.3vw;
    top: 8.5vh;
    width: 1.5vw;
    height: 3.4vw;
}

#arw2529 {
    left: 15.2vw;
    top: 8.4vh;
    width: 3.8vw;
    height: 2vw;
}

#arw3435 {
    left: 33.4vw;
    top: 22vh;
    width: 4.2vw;
    height: 2.5vw;
}

#arw3438 {
    left: 36.8vw;
    top: 22.2vh;
    width: 1.5vw;
    height: 2.2vw;
}

.indicatorArrows {
    filter: drop-shadow(5px 5px 4px black);
    transition: all .5s ease-out;
}

.iaLd {
    transform-origin: right top !important;
}

.iaRd {
    transform-origin: left top !important;
}

.iaLc {
    transform-origin: right top !important;
}

.iaRc {
    transform-origin: left top !important;
}

.indicatorArrows path {
    stroke-width: 2.5px;
}

.indicatorArrows text {
    fill: white;
    text-shadow: 2px 2px 2px black;
    font-size: 1.5vw;
}

.changearrow {
    transform: scaleX(0);
}

.lastcardarrow {
    margin-top: 5px;
}


#card span.small {
    font-size: .8em;
    float: left;
    margin-block-start: 1em;
}

#card span.small::before {
    content: '"';
}

#card span.small::after {
    content: '"';
}

.svg {
    position: absolute;
    transition: all .5s ease-out;
    transform-origin: right top;
    z-index: 6;
    width: 7.4vw;
    height: 6.1vh;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: .9;
    filter: drop-shadow(5px 7px 6px black);
}

.svg.b1.iaRd {
    background-image: url(../images/accarws/b1.png);
}

.svg.b2.iaRd {
    background-image: url(../images/accarws/b2.png);
}

.svg.b3.iaRd {
    background-image: url(../images/accarws/b3.png);
}

.svg.b4.iaRd {
    background-image: url(../images/accarws/b4.png);
}

.svg.b1.iaLd {
    background-image: url(../images/accarws/b1L.png);
}

.svg.b2.iaLd {
    background-image: url(../images/accarws/b2L.png);
}

.svg.b3.iaLd {
    background-image: url(../images/accarws/b3L.png);
}

.svg.b4.iaLd {
    background-image: url(../images/accarws/b4L.png);
}


.svg.b5.iaRc {
    background-image: url(../images/accarws/b5.png);
}

.svg.b6.iaRc {
    background-image: url(../images/accarws/b6.png);
}

.svg.b8.iaRc {
    background-image: url(../images/accarws/b8.png);
}

.svg.b9.iaRc {
    background-image: url(../images/accarws/b9.png);
}

.svg.b5.iaLc {
    background-image: url(../images/accarws/b5L.png);
}

.svg.b6.iaLc {
    background-image: url(../images/accarws/b6L.png);
}

.svg.b8.iaLc {
    background-image: url(../images/accarws/b8L.png);
}

.svg.b9.iaLc {
    background-image: url(../images/accarws/b9L.png);
}

.svg.r1.iaRc {
    background-image: url(../images/accarws/r1.png);
}

.svg.r7.iaRc {
    background-image: url(../images/accarws/r7.png);
}

.svg.r1.iaLc {
    background-image: url(../images/accarws/r1L.png);
}

.svg.r7.iaLc {
    background-image: url(../images/accarws/r7L.png);
}

.svg.r2.iaRd {
    background-image: url(../images/accarws/r2.png);
}

.svg.r3.iaRd {
    background-image: url(../images/accarws/r3.png);
}

.svg.r4.iaRd {
    background-image: url(../images/accarws/r4.png);
}

.svg.r6.iaRd {
    background-image: url(../images/accarws/r6.png);
}

.svg.r8.iaRd {
    background-image: url(../images/accarws/r8.png);
}

.svg.r2.iaLd {
    background-image: url(../images/accarws/r2L.png);
}

.svg.r3.iaLd {
    background-image: url(../images/accarws/r3L.png);
}

.svg.r4.iaLd {
    background-image: url(../images/accarws/r4L.png);
}

.svg.r6.iaLd {
    background-image: url(../images/accarws/r6L.png);
}

.svg.r8.iaLd {
    background-image: url(../images/accarws/r8L.png);
}

p.arwtext {
    z-index: 6;
    position: absolute;
    top: 49.4%;
    font-size: 1.15vw;
    text-shadow: 2px 2px 2px black;
    text-align: left;
    width: 5vw;
    margin: 0;
    line-height: 0;
}

.noanim {
    transition: unset !important;
}

.iaRd>p {
    left: 1.7vw;
}

.iaLc>p {
    left: 0.4vw;
    text-align: right;
}

.iaLd>p {
    left: 1.9vw;
}

.iaRc>p {
    left: -1vw;
    text-align: right;
}

.svg.iaLd {
    margin-left: -6vw;
}

.svg.iaRc {
    margin-left: 8vw;
}

.svg.iaLc {
    margin-left: 8vw;
}

.svg.iaRd {
    margin-left: -6vw;
}

.creport p {
    width: 20vw;
}

div .creport {
    margin-top: 9vh;
    margin-left: 7vw;
}

.creport span {
    float: right;
}

p#restartViaCode {
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 0%;
    font-size: 1.1em;
    text-decoration: underline;
    color: #b5b5b5;
    z-index: 100;
    cursor: pointer;
    display: none;
}

#RestartGameButton {
    top: 66% !important;
    font-size: 1em !important;
}

#startFromZeroButton {
    top: 36% !important;
}

#savefile {
    background-image: url(../images/savefile.png);
    background-color: transparent;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: contain;
    width: 32px;
    height: 32px;
    margin-right: 12px;
    position: absolute;
    left: 37px;
    top: 26px;
    border-radius: 2px;
    border: none;
    display: none;
}

@media only screen and (orientation:portrait) {
    body {
        height: 100vw;

        transform: rotate(90deg);
    }
}