body {
	margin : 0;
}

.Card_Display {
    height: 13.2vw;
    width: 9.45vw;
    background-size: cover;
    float:left;
}

.Display_Tooltip {
    height: 23.76vw;
    width: 17.01vw;
    background-size: cover;
	background-image: url("/images/P7qYTcI.png");
	top:0;
	left:0;
}

#Left_Tooltip .flipcard {
	transform: scaleY(-1) scaleX(-1);
	border:solid red;
}

#Decklist {
	background: #2b3034;
	height: 23vw;
	overflow-y: auto;
	overflow-x: hidden;
}

#Decklist #decklistheader {
	padding: 0 5% 0 5%;
	border: black;
	border-bottom: solid black;
	background: #1c1d21; /* The main dark color*/
	font-size: 100%;
}

#decklistheader input{
	background: transparent;
	border: none;
	color:dimgray;
}

#Decklist li {
	padding: 0 5% 0 5%;
	border: solid black;
	font-size: 80%;
	border-top: 0;
}
#Decklist .dbcardcount {
	float:right;
}

.dbCard_Display {
	height:100%;
	width:100%;
}

.RightUI {
	flex:1;
	display:flex;
	flex-direction: column;
}

#TopOptions {
	position:fixed;
	z-index: 1;
	height: 5%;
	background-color: #1c1d21;
	width:100%;
}

#TopOptions #Card\ Search {
	height:100%;
}

#TopOptions #TopTable {
	height:100%;
	background-color: #1c1d21;
	margin-bottom: 0;
}

#TopTable tbody {
	margin:0;
	position:absolute;
	background-color: #1c1d21;
	border: solid white;
}



#TopTable td {
	padding: 0 3ch 0 3ch;

}
#TopTable td:hover {
	padding-top: 0;
	padding-bottom: 0;
	background-color: #343a40;
}

#TopOptions label {
	font-size: 100%;
	margin:0;
	float:left;
	background-color: #1c1d21;
}

#TopOptions .topbuttons {
	font-color: white;
	box-sizing: border-box;
	background-color: #1c1d21;
	margin-left: 4%;
	border: solid dimgrey;
	color: white;
	padding: 0 2.5% 0 2.5%;
	font-size: 1.05vw;
	outline: none;

}

#TopOptions .topbuttons.selected {
	border: solid white;
}

#TopOptions #gamebutton {
	padding: 0 8% 0 8%;
	width:115%;
}

/* Dropdown Button */
.dropbtn {
	background-color: #04AA6D;
	color: white;
	padding: 16px;
	font-size: 16px;
	border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
	margin-left: 3%;
	position: relative;
	display: inline-block;
	width:35ch;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
	margin-left: 4%;
	display: none;
	position: absolute;
	background-color: #f1f1f1;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}

#filterquery {
	width:100%;
	background-color: red;
}


#filterquery div {
	visibility: hidden;
	float:left;
	background-color: #1c1d21;
}

#filterquery div input {

}

#setlist {
	width:24ch;
}


#Card_List {
	width: 130%;
	top: 10%;
	position:absolute;
	border-spacing: 0;
}

#Card_List th {
	font-size: 1.3vw;
	padding-top: 0.5%;
	padding-bottom: 0.5%;
}

#Card_List tr {
	height:5%;
	width:100%;
}

#Card_List td {
	font-size: 80%;
}

#Card_List .cshidden {
	display:none;
}

#Card_List .rarity {
	text-transform: capitalize;
	width: 10ch;
}

#Card_List .colors {
	width: 15vh;
}

#Card_List .manaCost {
	width: 30vh;
}

#Card_List .power {
	width:5ch;
}

#Card_List .toughness {
	width:5ch;
}

#Card_List .types{
	width: 21ch;
}

#Card_List .subtypes{
	width: 21ch;
}


#Card_List .convertedManaCost {
	width: 3ch;
}

#Card_List .Set {
	width: 21ch;
}

th.name {
	width:12%;
}

.Deck_Builder_Entry td {
}
										/* CSS rule is that lower class overrules upper class*/
#Card_List .highlighted {
	border-style: solid;
	border-color: deeppink;
	background-color: #2b3035;
}


#pagenumberbuttons {
	padding:0;
}

.pagenumberbutton {
	font-color: white;
	box-sizing: border-box;
	background-color: #1c1d21;
	border: solid dimgrey;
	color: white;
	padding: 0 0.6% 0 0.6%;
	font-size: 1.05vw;
	outline: none;
}

.dbmanasymbol {
	height: 3vh;
	width: 3vh;
	vertical-align: middle;
}

.energysymbol {
	height: 3vh;
	width: 3vh;
	margin-left: 0.4vh;
	vertical-align: middle;
}


[draggable] {
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	/* Required to make elements draggable in old WebKit */
	-webkit-user-drag: element;
}

::selection {
	/* Change highlight background color to black */
	background: #1c1d21;
}

#Deck_Builder_HeadingsYGO th {
	width:2ch;
	padding:1%;
}

#Card_List_BodyYGO tr td{
	width:2ch;
	margin:0;
}

* {
	border-spacing: 0;
	padding:0;
}