gwent-classic-v4.0/style.css

* {
	box-sizing: border-box;
	cursor: url(img/icons/cursor.png), auto;
}

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow-X: visible;
	scrollbar-width: none;
}

body {
	font-size: 0;
	font-family: Arial Narrow, sans-serif;
	color: goldenrod;
	background-color: #000;
}

body::-webkit-scrollbar {
	display: none;
}

main {
	position: absolute;
	width: 100%;
	height: calc(100vw * 1080 / 1920);
	background-image: url(img/board.jpg);
	background-size: 100% auto;
	background-repeat: no-repeat;
}

a:hover, label:hover, .hover_un:hover {
	text-decoration:underline;
}

div.abs {
	position:fixed;
	width: 100%;
	height: 100%;
	z-index: 2000;
}

#very_start_bg1 {
	background-image: url(img/start.jpg);
	background-size: 100% auto;
	background-repeat: no-repeat;
}

#very_start_bg2 {
	top: 3%;
	left: 2%;
	width: 32%;
	height: 94%;
	border: solid 4px white;
}

#very_start {
	position:absolute;
	height:auto;
	font-size: 20px;
	color: #FFF;
	z-index: 3000;
	text-align: center;
	font-weight: bold;
}

::selection {
	background: transparent;
}

::-moz-selection {
	background: transparent;
}

::-webkit-scrollbar {
	width: 1.5vw;
}

::-webkit-scrollbar-thumb {
	background: #5559;
	border-radius: .5vw;
	height: 3vw;
	border: .35vw double #000;
}

::-webkit-scrollbar-track {
	background: #131313;
}

html {
	scrollbar-color: #5559 #131313;
}

#click-background {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 1;
}

#hand-op {
	position: absolute;
	height: 6.35vw;
	width: 4.45vw;
	top: -7vw;
	left: 33vw;
	border: 1px solid blue;
}

#hand-op .card {
	position: absolute;
}

#youtube {
	position: fixed;
	height: 10px;
	width: 10px;
	display: hidden;
	z-index: -100;
}

#toggle-music {
	position: absolute;
	top: 45.6vw;
	left: 26vw;
	width: 2vw;
	height: 3vw;
	font-size: 3vw;
	color: goldenrod;
	text-shadow: 0 0 2vw #000;
	z-index: 86;
}

.music-customization {
	transform: translate(22.5vw, -.5vw);
}

#notification-bar {
	position: absolute;
	width: 100%;
	height: 14%;
	top: 43%;
	background-color: rgba(10, 10, 10, .95);
	z-index: 100;
}

#notification-bar>div {
	width: 22.1%;
	height: 207.25%;
	top: -66.6%;
	left: 22.55%;
	position: absolute;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

#notification-bar>div::after {
	position: absolute;
	left: 100.5%;
	top: 32.1%;
	width: 205%;
	height: 47.25%;
	color: goldenrod;
	font-size: 1.6vw;
	text-align: left;
	font-weight: 700;
	display: flex;
	align-items: center;
	white-space: pre;
}

#notif-nilfgaard-wins-draws {
	background-image: url(img/icons/notif_nilfgaard.png);
}

#notif-nilfgaard-wins-draws::after {
	content: "Nilfgaard wins draws";
}

#notif-op-leader::after {
	content: "Opponent uses leader";
}

#notif-op-white-flame {
	background-image: url(img/icons/notif_nilfgaard.png);
}

#notif-op-white-flame::after {
	content: "The opponent's leader cancel \A your opponent's Leader Ability";
}

#notif-meve_white_queen {
	background-image: url(img/icons/notif_lyria_rivia.png);
}

#notif-meve_white_queen::after {
	content: "Lyria & Rivia leader allows both players to restore \A 2 units when using the medic ability.";
}

#notif-me-first::after {
	content: "You will go first";
}

#notif-op-first::after {
	content: "Your opponent will go first";
}

#notif-me-coin {
	background-image: url(img/icons/notif_me_coin.png);
}

#notif-me-coin::after {
	content: "You will go first";
}

#notif-op-coin {
	background-image: url(img/icons/notif_op_coin.png);
}

#notif-op-coin::after {
	content: "Your opponent will go first";
}

#notif-round-start {
	background-image: url(img/icons/notif_round_start.png);
}

#notif-round-start::after {
	content: "Round Start";
}

#notif-me-pass {
	background-image: url(img/icons/notif_round_passed.png);
}

#notif-me-pass::after {
	content: "Round passed";
}

#notif-op-pass {
	background-image: url(img/icons/notif_round_passed.png);
}

#notif-op-pass::after {
	content: "Your opponent has passed";
}

#notif-win-round {
	background-image: url(img/icons/notif_win_round.png);
}

#notif-win-round::after {
	content: "You won the round!";
}

#notif-lose-round {
	background-image: url(img/icons/notif_lose_round.png);
}

#notif-lose-round::after {
	content: "Your opponent won the round";
}

#notif-draw-round {
	background-image: url(img/icons/notif_draw_round.png);
}

#notif-draw-round::after {
	content: "The round ended in a draw";
}

#notif-me-turn {
	background-image: url(img/icons/notif_me_turn.png);
}

#notif-me-turn::after {
	content: "Your turn!";
}

#notif-op-turn {
	background-image: url(img/icons/notif_op_turn.png);
}

#notif-op-turn::after {
	content: "Opponent's turn";
}

#notif-north, #notif-north-scorch-cancelled {
	background-image: url(img/icons/notif_north.png);
}

#notif-north::after {
	content: "Northern Realms faction ability triggered: \A North draws an additional card.";
}

#notif-north-scorch-cancelled::after {
	content: "Northern Realms leader ability used: \A Scorch ability cancelled for the rest of the round.";
}

#notif-monsters {
	background-image: url(img/icons/notif_monsters.png);
}

#notif-monsters::after {
    content: "Monsters faction ability triggered \A monsters retake one card to their hand";
}

#notif-scoiatael {
	background-image: url(img/icons/notif_scoiatael.png);
}

#notif-scoiatael::after {
	content: "Opponent used the Scoia'tael faction perk to go first.";
}

#notif-skellige-op {
	background-image: url(img/icons/notif_skellige.png);
}

#notif-skellige-op::after {
	content: "Opponent Skellige Ability Triggered!";
}

#notif-skellige-me {
	background-image: url(img/icons/notif_skellige.png);
}

#notif-skellige-me::after {
	content: "Skellige Ability Triggered!";
}

#notif-witcher_universe {
	background-image: url(img/icons/notif_witcher_universe.png);
}

#notif-witcher_universe::after {
	content: "Witcher Universe faction ability used: \A Turn skipped.";
}

#notif-toussaint, #notif-toussaint-decoy-cancelled {
	background-image: url(img/icons/notif_toussaint.png);
}

#notif-toussaint::after{
	content: "Toussaint faction ability used: \A Toussaint draws an additional card.";
}

#notif-toussaint-decoy-cancelled::after {
	content: "Toussaint leader ability used: \A Decoy ability cancelled for the rest of the round.";
}

#notif-lyria_rivia {
	background-image: url(img/icons/notif_lyria_rivia.png);
}

#notif-lyria_rivia::after {
	content: "Lyria & Rivia faction ability used: \A Morale Boost effect applied to a row.";
}

#notif-zerrikania {
    background-image: url(img/icons/notif_zerrikania.png);
}

#notif-zerrikania::after {
    content: "Zerrikania faction ability used: \A Unit restored from the discard pile.";
}

#notif-redenia {
    background-image: url(img/icons/notif_redania.png);
}

#notif-redania::after {
    content: "Redania faction ability used: \A Turn skipped.";
}

#notif-velen {
    background-image: url(img/icons/notif_velen.png);
}

#notif-velen::after {
    content: "Velen faction ability triggered: \A Player draws a card.";
}

.card-preview {
	position: relative;
	z-index: 80;
}

.card-preview>.card-lg {
	position: absolute;
	top: 11.95vw;
	left: 80.3vw;
}

.card-preview>.card-description {
	top: 43.1vw;
	left: 67.95vw;
}

.card-lg {
	height: 30.4vw;
	width: 16.1vw;
	border-radius: 1.5vw;
	background-size: contain;
	background-position: top;
	background-repeat: no-repeat;
}

.card-description {
	position: absolute;
	height: 11vw;
	/*width: 29.12vw;*/
  width: 40vw;
	background-color: rgba(20, 20, 20, .95);
	color: tan;
	text-align: center;
	pointer-events: none;
	border: .1vw solid #ffffff57;
	border-width: .1vw 0;
}

.card-description>* {
	position: relative;
}

.card-description>div {
	top: 1vw;
	left: .9vw;
	width: 1.95vw;
	height: 1.95vw;
	margin-bottom: -1.9vw;
	background-size: cover;
	background-position: center;
}

.card-description>h1 {
	font-weight: 700;
	top: .5vw;
	left: 16%;
	height: 16%;
	width: 70%;
	margin-bottom: -2.1vw;
	text-transform: capitalize;
	font-size: 1vw;
}

.card-description>p {
	top: 16%;
	left: 5%;
	width: 90%;
	height: 50%;
	font-size: .9vw;
}

#carousel {
	position: absolute;
	width: 100%;
	height: calc(100vw * 1080 / 1920);
	z-index: 90;
}

#carousel>:nth-child(1) {
	wdith: 100%;
	heigth: 100%;
	padding: 11.5% 10%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

#carousel>:nth-child(1)>:nth-child(3) {
	border: .3vw solid goldenrod;
	box-shadow: 0 0 4vw goldenrod;
	background-origin: border-box;
}

#carousel>:nth-child(1)>:nth-child(3):hover {
	border: .3vw solid goldenrod;
	box-shadow: 0 0 4vw goldenrod;
	background-origin: border-box;
}

#carousel>:nth-child(1)>:nth-child(2n) {
	width: 13.75vw;
	height: 25.9vw;
}

#carousel>:nth-child(1)>:nth-child(4n - 3) {
	width: 11.3vw;
	height: 21.3vw;
	margin: 0 2.75%;
}

#carousel .card-lg {
	display: inline-block;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top;
	position: relative;
}

#carousel .faction {
	display: inline-block;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top;
	position: relative;
}

#carousel .selection {
	border: .3vw solid green;
	box-shadow: 0 0 4vw green;
	background-origin: border-box;
}

.card-lg {
	border: .1vw solid transparent;
}

.card-lg:hover {
	border: .1vw solid goldenrod;
	box-shadow: 0 0 1vw goldenrod;
}

.start-game_class:hover {
	border: .1vw solid white;
	box-shadow: 0 0 .1vw white;
}

#no_hover:hover {
	border: .1vw solid transparent;
	box-shadow: none;
}

#carousel .card-lg:hover {
	background-origin: border-box;
}

#carousel .card-description {
	/*left: 35.35%;*/
  left: 30%;
	top: 77%;
}

#carousel>:nth-child(3) {
	position: absolute;
	width: 100%;
	height: 7.5%;
	top: 12%;
	font-size: 1.75vw;
	line-height: 250%;
	background-color: rgba(10, 10, 10, .95);
	text-align: center;
	box-shadow: 0 0 1vw #ffffff54;
}

/* Modal helpers */

#helper-box {
    position: absolute;
    top: 1vw;
    width: 100%;
    z-index: 1000;
}

#helper-box>div {
    border: .2vw ridge rgb(40, 40, 40);
    padding: 0.7vw 1vw;
    background-color: rgb(20, 20, 20);
    color: gray;
}

#helper-box-message {
    text-align: center;
    font-size: 1.5vw;
    padding-top: .6vw;
    color: lightgray;
}

#help-box-close {
    position: relative;
    right: -0.4vw;
    border: .2vw ridge rgb(40, 40, 40);
    background-color: rgb(40, 40, 40);
    color: gray;
}

#help-box-close:hover {
    background-color: rgb(60, 60, 60);
}
/* Popup */
#popup, #number-popup {
    position: absolute;
    width: 100%;
    height: calc(100vw * 1080 / 1920);
    background-color: rgba(10, 10, 10, .95);
    z-index: 1000;
}

#popup>div, #number-popup>div {
	margin-top: -89px;
	width: 26.5%;
	border: .2vw ridge rgb(40, 40, 40);
	padding: 0 .5vw;
	background-color: rgb(20, 20, 20);
}

#popup h3, #number-popup h3 {
	display: block;
	font-size: 1.05vw;
	text-transform: uppercase;
	color: grey;
	text-align: center;
	line-height: 100%;
}

#popup p, #number-popup p {
	text-align: center;
	font-size: 1.23vw;
	padding-top: .6vw;
	color: tan;
}

#popup>div>div, #number-popup>div>div {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .2vw;
	min-width: 10%;
	width: fit-content;
	margin: -1.4vw auto 0;
	border: .2vw ridge rgb(25, 25, 25);
	background-color: #000;
	top: 1.3vw;
}

#popup button, #number-popup button,input {
	display: inline-block;
	width: auto;
	height: 1.8vw;
	border: .2vw ridge rgb(20, 20, 20);
	background-color: rgb(20, 20, 20);
	font-size: 1vw;
	text-shadow: 1vw 1vw 1vw #000;
	text-transform: capitalize;
	margin: 0 .3vw;
}

#popup button:first-child, #number-popup button:last-child {
	color: green;
}

#popup button:last-child {
	color: darkred;
}

#number-popup-value {
    width: 5vw;
    color: white;
}

#end-screen {
	width: 100%;
	height: calc(100vw * 1080 / 1920);
	position: absolute;
	z-index: 1000;
	background-color: rgba(10, 10, 10, .95);
}

#end-screen * {
	position: relative;
}

#end-screen>:nth-child(1) {
	top: 12.6%;
	left: 32.9%;
	width: calc(100% * 656 / 1920);
	height: calc(100% * 416 / 1080);
	margin-bottom: -21.65%;
	background-size: contain;
}

.end-draw {
	background-image: url(img/icons/end_draw.png);
}

.end-win {
	background-image: url(img/icons/end_win.png);
}

.end-lose {
	background-image: url(img/icons/end_lose.png);
}

#end-screen>table {
	top: 55%;
	left: 7.6%;
	width: 74%;
	height: 22%;
	margin-bottom: -12.3%;
	table-layout: fixed;
}

#end-screen tbody :first-child th {
	font-size: .9vw;
	text-align: center;
	color: darkslategrey;
	color: rgb(100, 100, 100);
}

#end-screen td {
	font-size: 1.7vw;
	text-align: center;
	color: rgb(180, 180, 180);
}

#end-screen tr :first-child {
	font-size: 1.2vw;
	text-align: right;
	color: darkorange;
	padding-right: 5%;
}

#end-screen>p {
	top: 80%;
	left: 30.1%;
	width: 41%;
	height: 3%;
	font-size: 1.21vw;
	color: rgb(180, 180, 180);
}

#end-screen button {
	position: absolute;
	height: 3vw;
	width: 10vw;
	top: 87%;
	font-family: Arial Narrow;
	font-size: 1.5vw;
	color: goldenrod;
	background-color: #4c390a66;
	border: .2vw solid #1d180b;
	border-radius: 1vw;
	box-shadow: 0 0 1vw #6d5210;
}

#pass-button:hover, #toggle-music:hover {
	text-shadow: 0 0 1vw #6d5210;
}

#end-screen button:hover {
	box-shadow: 0 0 2vw #6d5210;
}

#end-screen button:nth-of-type(1) {
	left: 35%;
}

#end-screen button:nth-of-type(2) {
	left: 55%;
}

.panel {
	display: inline-block;
	height: 100%;
	box-sizing: border-box;
	overflow-y: hidden;
	overflow-x: visible;
	overflow-y: visible;
	position: absolute;
	height: calc(100vw * 1080 / 1920);
}

.panel div,
.panel section,
.panel span {
	position: relative;
}

#panel-left {
	width: 26.5%;
}

#panel-mid {
	width: 52.5%;
	left: 26.5%;
}

#panel-right {
	width: 21%;
	left: 79%;
}

#weather {
	top: 41.6%;
	left: 27.8%;
	width: 54.9%;
	height: 12.75%;
	margin-bottom: -27%;
	z-index: 1;
}

#arrangementWindow {
    top: 41.6%;
    left: 27.8%;
    width: 54.9%;
    height: 12.75%;
    margin-bottom: -27%;
    z-index: 10;
    background-color: rgba(20, 20, 20, .9);
    color: tan;
}

#arrangementWindow-title {
    top: 5%;
    left: 0%;
    width: 100%;
    height: 25%;
    text-align: center;
    font-weight: bold;
    font-size: 1.2vw;
}

#arrangementWindow-movesTitle {
    top: 0%;
    left: 0%;
    width: 100%;
    height: 30%;
    text-align: center;
    font-weight: bold;
    font-size: 1.6vw;
}

#arrangementWindow-counter {
    top: 0%;
    left: 0%;
    width: 100%;
    height: 50%;
    text-align: center;
    font-weight: bold;
    font-size: 2.6vw;
}

#arrangementWindow-button {
    bottom: 35%;
    right: -88%;
    width: 5%;
    height: 5%;
    text-align: center;
    color: tan;
    font-weight: bold;
    font-size: 1.6vw;
}

#arrangementWindow-button:hover {
    color: green;
}

.leader-box {
    left: 27.5%;
    width: 31.4%;
    height: 12.5%;
    margin-bottom: -26.25%;
}

.leader-box .card {
	pointer-events: none;
}

.leader-box>.leader-container {
	height: 100%;
	width: 63%;
	margin-bottom: -80%;
	display: flex;
	flex-items: center;
	justify-content: center;
}

.leader-box>div>.card {
	position: absolute;
	height: 98%;
	width: 95%;
	border-radius: .6vw;
}

.leader-active {
	top: 33%;
	left: 75%;
	height: 28%;
	width: 24%;
}

.leader-active>div {
	background-image: url(img/icons/icon_leader_active.png);
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
}

#leader-op {
	top: 7.55%;
}

#leader-me {
	top: 77.5%;
}

.stats {
	height: 12.5%;
	width: 88.5%;
	margin-bottom: -27%;
	background-color: rgba(20, 20, 20, .6);
}

.current-turn {
	box-shadow: -3vw 0 1vw .1vw goldenrod;
}

#stats-op {
	top: 24.25%;
}

#stats-me {
	top: 61.75%;
}

.profile-img {
	left: 28.4%;
	top: 9.6%;
	width: 21.9%;
	height: 80%;
	margin-bottom: -24%;
	background-image: url(img/icons/profile.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 100%;
}

.profile-img>div {
	left: -10%;
	top: -6%;
	height: 118%;
	width: 118%;
	background-image: url(img/icons/icon_player_border.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	overflow: visible;
}

.profile-img>div>div {
	width: 43%;
	height: 43%;
	left: -10.5%;
	top: .5%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.faction-ability {
	background-image: url('img/icons/faction-ability.png');
	left: 5%;
	top: 9.6%;
	width: 15%;
	height: 80%;
	margin-bottom: -24%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.faction-ability .faction-ability-count{
	left: 40%;
	top: 17%;
	width: 100%;
	height: 100%;
	margin-bottom: -24%;
	position: relative;
	color: #dddddd;
	font-size: 1.5vw;
	font-weight: bold;
}

#stats-me > div > div > div {
	top: 59%;
}

.score-total {
	top: 21%;
	left: 94.8%;
	height: 40%;
	width: 12%;
	margin-bottom: -12%;
	color: #000;
	text-shadow: 0 0 5px #fff;
	font-size: 2.3vw;
	font-weight: 700;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

#score-total-me {
	background-image: url(img/icons/score_total_me.png);
}

#score-total-op {
	background-image: url(img/icons/score_total_op.png);
}

.score-leader>div {
	background-image: url(img/icons/icon_high_score.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom;
	left: -46%;
	top: -32%;
	width: 195%;
	height: 170%;
}

.hand-count {
	top: 58.5%;
	left: 53.25%;
	height: 29.5%;
	width: 17%;
	margin-bottom: -9%;
	font-size: 1.7vw;
	font-weight: 700;
	padding-left: 7%;
	background-image: url(img/icons/icon_card_count.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left;
}

#hand-count-me {
	top: 10%;
}

.gem {
	width: 9%;
	height: 31%;
	margin-bottom: -9.25%;
	background-image: url(img/icons/icon_gem_off.png);
}

.gem-on {
	background-image: url(img/icons/icon_gem_on.png);
}

#gem2-op {
	top: 56.25%;
	left: 70.75%;
}

#gem1-op {
	top: 56%;
	left: 80%;
}

#gem2-me {
	top: 9%;
	left: 70.75%;
}

#gem1-me {
	top: 9%;
	left: 80%;
}

.name {
	left: 53%;
	top: 6%;
	width: 41.5%;
	height: 20%;
	margin-bottom: -6%;
	overflow: hidden;
	white-space: nowrap;
	font-size: 1.1vw;
	font-weight: 700;
}

#name-me {
	top: 46%;
}

.deck-name {
	left: 53%;
	top: 25%;
	width: 41.5%;
	height: 30%;
	margin-bottom: -6%;
	overflow: hidden;
	text-transform: capitalize;
	color: tan;
	font-size: .9vw;
}

#deck-name-me {
	top: 64%;
}

.passed {
	height: 0%;
	width: 0%;
	left: 90%;
	top: 87%;
	color: tan;
	font-size: 1.5vw;
	font-weight: 700;
	text-shadow: 1px 1px 2px #000;
}

#passed-me {
	top: -3%
}

#pass-button {
	top: 82%;
	left: 63%;
	width: 20%;
	height: 4%;
	font-size: 2vw;
	font-weight: 700;
	border: .1vw solid goldenrod;
	border-radius: .5vw;
	background-color: rgba(20, 20, 20, .9);
}

.field {
	width: 100%;
	height: 38.5%;
}

.field .hero {
	/*pointer-events: none;*/
}

#field-op {
	top: -1.1%;
}

/*
#field-op .card {
	pointer-events: none;
}
*/

#field-me {
	top: -1%;
}

#field-hand {
	width: 100%;
	height: 13%;
}

.field-row {
	height: 32%;
	top: 4%;
	display: flex;
	z-index: 1;
}

.field-row>div {
	position: absolute;
}

.row-score {
	width: 5.1%;
	top: 7%;
	height: 95%;
	margin-bottom: -12.65%;
	font-size: 1.8vw;
	color: #000;
	text-shadow: 0 0 5px #fff;
}

.row-special {
	width: 14.25%;
	height: 100%;
	left: 5.1%;
	margin-bottom: -12.65%;
}

.row-cards {
	height: 100%;
	width: 80.65%;
	left: 19.35%;
	left: 20%;
	width: 79.7%;
}

.row-weather {
	position: absolute;
	top: 5%;
	left: 5.75%;
	width: 94.25%;
	height: 100%;
	pointer-events: none;
	background-size: cover;
	background-position: bottom;
	background-repeat: no-repeat;
}

.frost {
	background-image: url(img/icons/overlay_frost.png);
}

.rain {
	background-image: url(img/icons/overlay_rain.png);
}

.fog {
	background-image: url(img/icons/overlay_fog.png);
}

#hand-row {
	top: 8%;
	height: 91%;
	left: 7.1%;
	width: 92.5%;
	z-index: 1;
}

#op-hand-row {
    top: 9%;
    height: 91%;
    left: 7.1%;
    width: 92.5%;
    z-index: 1;
}

#op-hand-row.human-op {
    top: -83%;
    height: 91%;
    left: 7.1%;
    width: 92.5%;
    z-index: 2;
}

.row-selectable {
	background-color: rgba(255, 255, 0, .08);
}

.row-selectable:hover {
	box-shadow: 0 0 .25vw rgba(255, 255, 0, 1);
	box-sizing: border-box;
}

.card-selectable>.card:hover {
	border: .12vw outset goldenrod;
	border-radius: .3vw;
	margin-bottom: 1vw;
	z-index: 1;
}

.cardpile {
	width: 27.6%;
	height: 13.5%;
	margin-bottom: -36.25%;
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	overflow: visible;
	z-index: 1;
}

.cardpile .card {
	pointer-events: none;
}

/*
	Special cards cardpile
*/

.field-row .cardpile {
	width: 14.25%;
	height: 100%;
	left: 5.1%;
	margin-bottom: -12.65%;
	flex: none;
	position: relative;
}

.field-row .cardpile .special {
	top: -1.7vw;
	margin-top: 2.2vw;
	position: absolute;
}

#grave-op {
	top: 6.5%;
	left: 6.5%;
}

#deck-op {
	top: 6.5%;
	left: 51%;
}

#grave-me {
	top: 76.5%;
	left: 6.5%;
}

#deck-me {
	top: 76.5%;
	left: 51%;
}

.deck-card {
	position: relative;
	display: inline-block;
	height: 6.675vw;
	width: 4.45vw;
	background-size: contain;
	background-repeat: no-repeat;
	box-shadow: -.1vw -.1vw .5vw rgba(20, 20, 20, .5);
}

.deck-counter {
	position: relative;
	background-color: rgba(20, 20, 20, .8);
	width: 3vw;
	height: 2vw;
	z-index: 1;
	color: tan;
	font-size: 1.3vw;
}

.cardpile .deck-card {
	top: -5%;
	margin-top: -114.5%;
}

.cardpile>.card {
	top: -5%;
	margin-top: -108.5%;
}

#deck-customization {
	position: absolute;
	width: 100%;
	height: calc(100vw * 1080 / 1920);
	background-color: rgba(10, 10, 10, .95);
	z-index: 85;
}

#faction-title {
	position: absolute;
	height: 5%;
	width: 100%;
	top: 6%;
}

#deck-customization h1 {
	position: absolute;
	font-size: 1.45vw;
	color: #dedede;
	line-height: 220%;
	text-transform: capitalize;
	padding: 0 3%;
	top: -60%;
	background-size: contain;
	background-repeat: no-repeat;
}

#faction-description {
	position: absolute;
	font-size: 1.14vw;
	color: #ab977c;
	top: 9.45%;
	left: 20.2%;
	width: 60%;
	text-align: center;
}

.deck-options {
	position: absolute;
	font-size: 1vw;
	color: #fff;
	top: 15%;
}

#select-deck {
	left: 30%;
}

#upload-deck {
	left: 39%;
}

#change-faction {
	left: 46%;
}

#download-deck {
	left: 54%;
}

#select-op-deck {
	left: 62%;
}

#op-deck-name {
	left: 72%;
	color: #cccccc;
	font-style: italic;
}

#site-links {
    right: 5%;
    top: 5%;
    position: absolute;
    font-size: 1vw;
    color: #ccc;
}

#site-links a {
    color: #aaa;
}

.card-array {
	position: absolute;
	width: 34.4%;
	height: 68%;
	overflow-y: scroll;
	padding: .1vw 1.1vw;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#card-bank {
	top: 22.5%;
	left: 8.275%;
}

#card-deck {
	top: 22.5%;
	left: 58.4%;
}

/*
	Custom display of cards in Array in customization window
*/

.card-array .card-lg {
	width: 9.88vw;
	height: 18.45vw;
	border-radius: 1vw;
	margin-bottom: .75vw;
	position: relative;
}

.card-array .card-lg .card-large-bg {
	width: 9.88vw;
	height: 18.45vw;
	border-radius: 1vw;
	margin-bottom: .75vw;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top;
	margin-left: -0.05vw;
}

.card-array .card-lg .card-large-faction-band {
	left: -0.05vw;
	top: 0.55vw;
	width: 2.5vw;
	height: 12.8vw;
	margin-bottom: .75vw;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom;
	position: absolute;
}

.card-array .card-lg div.card-count {
	position: relative;
	top: 91%;
	left: 74%;
	width: 20%;
	height: 7%;
	font-size: 1.2vw;
	color: #5f4923;
	padding-left: 1.7vw;
	background-image: url(img/icons/preview_count.png);
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
}

.card-array .card-lg .card-large-name {
	display: flex;
	justify-content: center;
	text-align: center;
	position: absolute;
	top: 75.5%;
	left: 0%;
	width: 100%;
	height: 5vw;
	font-size: 1vw;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
	color: #000;
	line-height: 0.8vw;
}

.card-array .card-lg .card-large-quote {
	display: flex;
	justify-content: center;
	text-align: center;
	position: absolute;
	top: 83%;
	left: 0%;
	width: 98%;
	height: 5vw;
	font-size: 0.7vw;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
	color: #000;
}

.card-array .card-lg .card-large-power {
	position: absolute;
	top: -2%;
	left: -4%;
	width: 5vw;
	height: 5vw;
	font-size: 1.2vw;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
}

.card-array .card-lg .card-large-power .card-large-power-strength {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #000;
	font-weight: bold;
	font-size: 1.4vw;
	margin-left: -1.8vw;
	margin-top: 0.8vw;
}

.card-array .hero .card-large-power {
	top: -2%;
	left: -4%;
}

.card-array .hero .card-large-power .card-large-power-strength {
	color: #fff;
}

.card-array .card-lg .card-large-row {
	position: absolute;
	top: 22%;
	left: 0vw;
	width: 3.5vw;
	height: 2.5vw;
	font-size: 1.2vw;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
}

.card-array .card-lg .card-large-ability {
	position: absolute;
	top: 40%;
	left: 0vw;
	width: 3.5vw;
	height: 2.5vw;
	font-size: 1.2vw;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
}

.card-array .card-lg .card-large-ability-2 {
	position: absolute;
	top: 56%;
	left: 0vw;
	width: 3.5vw;
	height: 2.5vw;
	font-size: 1.2vw;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
}

/*
	Custom display of cards in Preview
*/


.card-preview .card-lg .card-large-bg {
	width: 100%;
	height: 100%;
	border-radius: 1vw;
	margin-bottom: .75vw;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top;
}

.card-preview .card-lg .card-large-faction-band {
	left: 0.15vw;
	top: 1.15vw;
	width: 4.5vw;
	height: 20.5vw;
	margin-bottom: .75vw;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom;
	position: absolute;
}

.card-preview .card-lg .card-large-name {
	display: flex;
	justify-content: center;
	text-align: center;
	position: absolute;
	top: 75%;
	left: 0%;
	width: 100%;
	height: 5vw;
	font-size: 1.4vw;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
	color: #000;
	line-height: 1.1vw;
}

.card-preview .card-lg .card-large-quote {
	display: flex;
	justify-content: center;
	text-align: center;
	position: absolute;
	top: 84%;
	left: 0%;
	width: 96%;
	height: 5vw;
	font-size: 0.9vw;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
	color: #000;
}

.card-preview .card-lg .card-large-power {
	position: absolute;
	top: -2%;
	left: -4%;
	width: 10vw;
	height: 10vw;
	font-size: 1.2vw;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
}
.card-preview .card-lg .card-large-power .card-large-power-strength {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #000;
	font-weight: bold;
	font-size: 2.5vw;
	margin-left: -3.6vw;
	margin-top: 1.7vw;
}

.card-preview .hero .card-large-power {
	top: -3%;
	left: -6%;
}

.card-preview .hero .card-large-power .card-large-power-strength {
	color: #fff;
}

.card-preview .card-lg .card-large-row {
	position: absolute;
	top: 25%;
	left: 2%;
	width: 10vw;
	height: 4vw;
	font-size: 1.2vw;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
}

.card-preview .card-lg .card-large-ability {
	position: absolute;
	top: 40%;
	left: 2%;
	width: 10vw;
	height: 4vw;
	font-size: 1.2vw;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
}

.card-preview .card-lg .card-large-ability-2 {
	position: absolute;
	top: 55%;
	left: 2%;
	width: 10vw;
	height: 4vw;
	font-size: 1.2vw;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
}

/*
	Custom display of carousel cards
*/

#carousel .card-lg .card-large-bg {
	height: 100%;
	width: 100%;
	border-radius: 1vw;
	margin-bottom: .75vw;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom;
}

#carousel .card-lg .card-large-faction-band {
	left: 0.15vw;
	top: 1.15vw;
	width: 4.5vw;
	height: 20.5vw;
	margin-bottom: .75vw;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom;
	position: absolute;
}

#carousel > :nth-child(1) > :nth-child(2n) .card-large-faction-band {
	left: 0.5vw;
	top: 0.6vw;
	width: 3vw;
	height: 18vw;
}

#carousel > :nth-child(1) > :nth-child(4n - 3) .card-large-faction-band {
	left: 0.5vw;
	top: 0.5vw;
	width: 2.5vw;
	height: 14.7vw;
}

#carousel .card-lg .card-large-name {
	display: flex;
	justify-content: center;
	text-align: center;
	position: absolute;
	top: 75%;
	left: 0%;
	width: 100%;
	height: 5vw;
	font-size: 1.4vw;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
	color: #000;
}

#carousel .card-lg .card-large-quote {
	display: flex;
	justify-content: center;
	text-align: center;
	position: absolute;
	top: 86%;
	left: 0%;
	width: 96%;
	height: 5vw;
	font-size: 0.9vw;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
	color: #000;
}


#carousel > :nth-child(1) > :nth-child(2n) .card-large-name {
	font-size: 1.3vw;
}

#carousel > :nth-child(1) > :nth-child(2n) .card-large-quote {
	font-size: 0.8vw;
}


#carousel > :nth-child(1) > :nth-child(4n - 3) .card-large-name {
	font-size: 1.1vw;
}

#carousel > :nth-child(1) > :nth-child(4n - 3) .card-large-quote {
	font-size: 0.7vw;
}

#carousel .card-lg .card-large-power {
	position: absolute;
	top: -2%;
	left: -4%;
	width: 10vw;
	height: 10vw;
	font-size: 1.2vw;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
}

#carousel .card-lg .card-large-power .card-large-power-strength {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #000;
	font-weight: bold;
	font-size: 2.5vw;
	margin-left: -3.6vw;
	margin-top: 1.7vw;
}

#carousel > :nth-child(1) > :nth-child(2n) .card-large-power {
	top: -2%;
	left: -4%;
	width: 8vw;
	height: 8vw;
}

#carousel > :nth-child(1) > :nth-child(2n) .card-large-power .card-large-power-strength {
	margin-left: -2.8vw;
	margin-top: 1.1vw;
}

#carousel > :nth-child(1) > :nth-child(4n - 3) .card-large-power {
	top: -2%;
	left: -4%;
	width: 7vw;
	height: 7vw;
}

#carousel > :nth-child(1) > :nth-child(4n - 3) .card-large-power .card-large-power-strength {
	margin-left: -2.7vw;
	margin-top: 0.9vw;
	font-size: 2.3vw;
}

#carousel .hero .card-large-power {
	top: -3%;
	left: -6%;
}

#carousel .hero .card-large-power .card-large-power-strength {
	color: #fff;
}

#carousel .card-lg .card-large-row {
	position: absolute;
	top: 25%;
	left: 2%;
	width: 10vw;
	height: 4vw;
	font-size: 1.2vw;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
}

#carousel > :nth-child(1) > :nth-child(2n) .card-large-row {
	height: 3.8vw;
	left: 0%;
}

#carousel > :nth-child(1) > :nth-child(4n - 3) .card-large-row {
	height: 3.4vw;
	left: 0%;
}

#carousel .card-lg .card-large-ability {
	position: absolute;
	top: 41%;
	left: 2%;
	width: 10vw;
	height: 4vw;
	font-size: 1.2vw;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
}

#carousel .card-lg .card-large-ability-2 {
	position: absolute;
	top: 56%;
	left: 2%;
	width: 10vw;
	height: 4vw;
	font-size: 1.2vw;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
}

#carousel > :nth-child(1) > :nth-child(2n) .card-large-ability {
	height: 3.4vw;
	top: 41%;
	left: 2.5%;
}

#carousel > :nth-child(1) > :nth-child(4n - 3) .card-large-ability {
	height: 3vw;
	top: 42%;
	left: 2.5%;
}

#carousel > :nth-child(1) > :nth-child(2n) .card-large-ability-2 {
	height: 3.4vw;
	top: 56%;
	left: 2.5%;
}

#carousel > :nth-child(1) > :nth-child(4n - 3) .card-large-ability-2 {
	height: 3vw;
	top: 57%;
	left: 2.5%;
}

#carousel .hide .card-large-bg, #carousel .hide .card-large-faction-band, #carousel .hide .card-large-name, #carousel .hide .card-large-power,
#carousel .hide .card-large-power-strength, #carousel .hide .card-large-row, #carousel .hide .card-large-ability, #carousel .hide .card-large-ability-2, #carousel .hide .card-large-quote {
	display: none;
}
/*
	Custom display of leader card
*/
#card-leader .card-large-bg {
	width: 100%;
	height: 100%;
	border-radius: 1vw;
	margin-bottom: .75vw;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top;
}

#card-leader .card-large-name {
	display: flex;
	justify-content: center;
	text-align: center;
	position: absolute;
	top: 75%;
	left: 0%;
	width: 100%;
	height: 5vw;
	font-size: 0.9vw;
	background-position: left;
	background-repeat: no-repeat;
	background-size: contain;
	color: #000;
}

#card-leader .card-large-quote {
	display: none;
}
/*
	---
*/
#card-leader {
	position: absolute;
	height: 27%;
	width: 6.9%;
	top: 20.8%;
	left: 46.6%;
}

#card-leader p {
	font-size: 1.1vw;
	text-align: center;
	color: #8f6c36;
	line-height: 0%;
	margin: 9%;
}

#card-leader > div {
	position: relative;
	height: 84.5%;
	margin-top: 24.5%;
	background-size: contain;
	border-radius: .5vw;
	background-repeat: no-repeat;
}

#deck-stats {
	position: absolute;
	width: 12%;
	height: 30%;
	top: 49.5%;
	left: 44.05%;
}

#deck-stats>p:nth-child(odd) {
	color: #82735f;
	font-size: 1.05vw;
	text-align: center;
	margin-bottom: -6.75%;
}

#deck-stats>p:nth-child(even) {
	font-size: 1.2vw;
	text-align: left;
	color: #9f7d3e;
	padding-left: 2.3vw;
	margin-left: 3.95vw;
	margin-bottom: -6.75%;
	background-repeat: no-repeat;
	background-position: left;
	background-size: 2.5vw;
}

#deck-stats>p:nth-child(2) {
	background-image: url(img/icons/deck_stats_count.png);
}

#deck-stats>p:nth-child(4) {
	background-image: url(img/icons/deck_stats_unit.png);
}

#deck-stats>p:nth-child(6) {
	background-image: url(img/icons/deck_stats_special.png);
}

#deck-stats>p:nth-child(8) {
	background-image: url(img/icons/deck_stats_strength.png);
}

#deck-stats>p:nth-child(10) {
	background-image: url(img/icons/deck_stats_hero.png);
}

#start-game {
	position: absolute;
	top: 86%;
	left: 46.65%;
	width: 6%;
	height: 3%;
	font-size: .98vw;
}

#start-ai-game {
    position: absolute;
    top: 90%;
    left: 46.2%;
    width: 7%;
    height: 3%;
    font-size: .98vw;
}

#start-pvp-game {
    position: absolute;
    top: 94%;
    left: 45.7%;
    width: 8%;
    height: 3%;
    font-size: .98vw;
}

.start-game_class {
	white-space: nowrap;
	color: #fff;
	background-color: rgb(20, 20, 20);
	border: .1vw ridge rgb(30, 30, 30);
}

.card-contianer-title {
	position: absolute;
	width: 10%;
	height: 3%;
	font-size: 1.3vw;
	color: #959595;
}

#card-bank-title {
	top: 7.45%;
	left: 8.5%;
}

#card-deck-title {
	top: 7.8%;
	left: 84.45%;
}

.card {
	height: 6.35vw;
	width: 4.45vw;
	background-size: contain;
	background-repeat: no-repeat;
	box-shadow: -.1vw -.1vw .5vw rgba(20, 20, 20, .5);
	display: inline-block;
	position: relative;
	transition: margin-bottom 0.05s, margin-left .25s, margin-right .25s, transform 0.5s;
	z-index=1;
}

.deck-card .card {
	position: absolute;
}

.card>div {
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.card>div:nth-child(1) {
	top: -4%;
	left: -4%;
	width: 70%;
	height: 50%;
	margin-bottom: -71%;
	background-position: 0 0;
}

.card>div:nth-child(1)>div {
	top: 13%;
	left: 7%;
	width: 50%;
	heighth: 50%;
	font-size: 1vw;
	font-weight: 700;
	color: #000;
	text-shadow: 0 0 .1vw #fff;
}

.hero>div:nth-child(1)>div {
	color: #fff;
	text-shadow: 0 0 .1vw #000;
}

.card>div:nth-child(2) {
	top: 75%;
	left: 65%;
	width: 33%;
	height: 22%;
	margin-bottom: -32%;
}

.card>div:nth-child(3) {
	top: 75%;
	left: 32%;
	width: 33%;
	height: 22%;
	margin-bottom: -32%;
	font-size: 1vw;
}

.card > .card-ability-2:nth-child(4) {
	top: 75%;
	left: 0%;
	width: 33%;
	height: 22%;
	margin-bottom: -32%;
	font-size: 1vw;
}

.card > div:last-child {
	width: 100%;
	height: 100%;
	background-position: center;
	background-size: 40% auto;
	opacity: 0;
	filter: alpha(opacity=0);
	transition: background-size 0.25s;
}

.card-container {
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

.card-container .card {
	margin: 0 1px;
	flex-shrink: 0;
}

.center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.bg-contain {
	background-size: contain;
	background-repeat: no-repeat;
}

.visible {
	display: visible;
}

.hide {
	display: none;
}

.fade {
	opacity: .2;
	filter: alpha(opacity=20);
}

.noclick {
	pointer-events: none;
}

/*
    DECK SORTER
*/

#deck-sorter {
    position: absolute;
    width: 100%;
    height: calc(100vw * 1080 / 1920);
    z-index: 150;
    background-color: rgba(0,0,0,0.8);
}

#deck-sorter-title {
    position: absolute;
    width: 100%;
    height: 4vw;
    top: 1%;
    font-size: 1.75vw;
    line-height: 4vw;
    background-color: rgba(10, 10, 10, .95);
    text-align: center;
    box-shadow: 0 0 1vw #ffffff54;
}

.drop-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 20px;
}

.drop-targets {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.drop-line-title {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: 2px;
    font-weight: bold;
    width: 1vw;
    text-orientation: upright;
    writing-mode: vertical-rl;
    text-transform: uppercase;
    color: #666;
    font-size: 1.2vw;
}

.drop-box {
    width: 8.5vw;
    height: 15.5vw;
    border: solid 1px #ccc;
    margin: 10px;
    /* align items in the box */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 0.7vw;
}

.drop-susp {
    width: 8.5vw;
    height: 15.5vw;
    border: solid 3px #ccc;
    margin: 10px;
    /* align items in the box */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 60px;
    line-height: 60px;
    color: #ccc;
    background-color: rgba(200,200,200,.3);
    border-radius: 0.7vw;
}


.drop-item.drag-over, .drop-box.drag-over {
    border: dashed 1px green;
    border-radius: 0.7vw;
}

.drop-item, .drop-item .card-lg {
    width: 8vw;
    height: 15vw;
    border-radius: 0.7vw;
    /*background-color: #F0DB4F;*/
}

#deck-sorter .card-lg {
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top;
    position: relative;
}

#deck-sorter .card-lg .card-large-bg {
    height: 100%;
    width: 100%;
    border-radius: 0.7vw;
    margin-bottom: .75vw;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
}

#deck-sorter .card-lg .card-large-faction-band {
    left: 0.5vw;
    top: 0.25vw;
    width: 2vw;
    height: 10.5vw;
    margin-bottom: .75vw;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
    position: absolute;
}

#deck-sorter .card-lg .card-large-name {
    display: flex;
    justify-content: center;
    text-align: center;
    position: absolute;
    top: 75%;
    left: 0%;
    width: 100%;
    height: 5vw;
    font-size: 1.1vw;
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
    color: #000;
}

#deck-sorter .card-lg .card-large-quote {
    display: none;
}

#deck-sorter .card-lg .card-large-power {
    position: absolute;
    top: -3%;
    left: -5%;
    width: 6vw;
    height: 6vw;
    font-size: 1.2vw;
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
}

#deck-sorter .card-lg .card-large-power .card-large-power-strength {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    font-weight: bold;
    font-size: 2vw;
    margin-left: -2.2vw;
    margin-top: 0.7vw;
}

#deck-sorter .hero .card-large-power {
    top: -3%;
    left: -5%;
}

#deck-sorter .hero .card-large-power .card-large-power-strength {
    color: #fff;
}

#deck-sorter .card-lg .card-large-row {
    position: absolute;
    top: 22%;
    left: 5%;
    width: 2.5vw;
    height: 2.5vw;
    font-size: 1.2vw;
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
}

#deck-sorter .card-lg .card-large-ability {
    position: absolute;
    top: 41%;
    left: 5%;
    width: 2.5vw;
    height: 2.5vw;
    font-size: 1.2vw;
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
}

#deck-sorter .card-lg .card-large-ability-2 {
    position: absolute;
    top: 60%;
    left: 5%;
    width: 2.5vw;
    height: 2.5vw;
    font-size: 1.2vw;
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
}

#drop-submit {
    white-space: nowrap;
    color: #222;
    background-color: #567956;
    width: 100%;
    height: 100%;
    font-weight: bold;
}

#drop-submit:disabled {
    background-color: #8e8c6b;
}