/*****************************************Start of Symbols*******************************/
			.whiteBorder{
				border-color: #f5f6fa !important;
			}
			
			.blackBorder{
				border-color: black !important;
			}
			
			.silverBorder{
				border-color: silver !important;
			}
			
			.goldBorder{
				border-color: gold !important;
			}
			
			.noBorder{
				border-color: transparent;
			}
			
			
			.chaosSymbol{
				background-image:url("../symbols/chaos.svg");
				background-size: cover;
				height:15px;
				width:18px;
				display: inline-block;
			}
			
			.tapSymbol{
				background-image:url("../symbols/T.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.untapSymbol{
				background-image:url("../symbols/Q.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.xMana{
				background-image:url("../symbols/X.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.yMana{
				background-image:url("../symbols/Y.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.zMana{
				background-image:url("../symbols/Z.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.infiniteMana{
				background-image:url("../symbols/Infinite.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.whiteMana{
				background-image:url("../symbols/W.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.blueMana{
				background-image:url("../symbols/U.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.blackMana{
				background-image:url("../symbols/B.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			.redMana{
				background-image:url("../symbols/R.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.greenMana{
				background-image:url("../symbols/G.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.snowMana{
				background-image:url("../symbols/s.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.energy{
				background-image:url("../symbols/e.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.colourlessMana{
				background-image:url("../symbols/C.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.hwhiteMana{
				background-image:url("../symbols/hw.svg");
				background-size: 8px;
				height:15px;
				width:7.5px;
				display: inline-block;
			}
			
			.hblueMana{
				background-image:url("../symbols/hu.svg");
				background-size: 8px;
				height:15px;
				width:7.5px;
				display: inline-block;
			}
			
			.hblackMana{
				background-image:url("../symbols/hb.svg");
				background-size: 8px;
				height:15px;
				width:7.5px;
				display: inline-block;
			}
			.hredMana{
				background-image:url("../symbols/hr.svg");
				background-size: 8px;
				height:15px;
				width:7.5px;
				display: inline-block;
			}
			
			.hgreenMana{
				background-image:url("../symbols/hg.svg");
				background-size: 8px;
				height:15px;
				width:7.5px;
				display: inline-block;
			}
			
			.hcolourlessMana{
				background-image:url("../symbols/hc.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.whiteblueMana{
				background-image:url("../symbols/wu.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.whiteblackMana{
				background-image:url("../symbols/wb.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.blueblackMana{
				background-image:url("../symbols/ub.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.blueredMana{
				background-image:url("../symbols/ur.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.blackgreenMana{
				background-image:url("../symbols/bg.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.blackredMana{
				background-image:url("../symbols/br.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.redgreenMana{
				background-image:url("../symbols/rg.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.redwhiteMana{
				background-image:url("../symbols/rw.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.greenwhiteMana{
				background-image:url("../symbols/gw.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.greenblueMana{
				background-image:url("../symbols/gu.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.whitepMana{
				background-image:url("../symbols/wp.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.bluepMana{
				background-image:url("../symbols/up.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.blackpMana{
				background-image:url("../symbols/bp.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.redpMana{
				background-image:url("../symbols/rp.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.greenpMana{
				background-image:url("../symbols/gp.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
						
			.oneMana{
				background-image:url("../symbols/1.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
				
			}
			
			.twoMana{
				background-image:url("../symbols/2.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.twobMana{
				background-image:url("../symbols/2b.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.twogMana{
				background-image:url("../symbols/2g.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.tworMana{
				background-image:url("../symbols/2r.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.twouMana{
				background-image:url("../symbols/2u.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.twowMana{
				background-image:url("../symbols/2w.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.threeMana{
				background-image:url("../symbols/3.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.fourMana{
				background-image:url("../symbols/4.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.fiveMana{
				background-image:url("../symbols/5.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.sixMana{
				background-image:url("../symbols/6.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.sevenMana{
				background-image:url("../symbols/7.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.eightMana{
				background-image:url("../symbols/8.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.nineMana{
				background-image:url("../symbols/9.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.tenMana{
				background-image:url("../symbols/10.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.elevenMana{
				background-image:url("../symbols/11.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.twelveMana{
				background-image:url("../symbols/12.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.thirteenMana{
				background-image:url("../symbols/13.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.fourteenMana{
				background-image:url("../symbols/14.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.fifteenMana{
				background-image:url("../symbols/15.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.sixteenMana{
				background-image:url("../symbols/16.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.seventeenMana{
				background-image:url("../symbols/17.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.eighteenMana{
				background-image:url("../symbols/18.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.nineteenMana{
				background-image:url("../symbols/19.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.twentyMana{
				background-image:url("../symbols/20.svg");
				background-size: 15px;
				height:15px;
				width:15px;
				display: inline-block;
			}
			
			.onehundredMana{
				background-image:url("../symbols/100.svg");
				background-size: cover;
				height:15px;
				width:30px;
				display: inline-block;
			}
			
			.onemillionMana{
				background-image:url("../symbols/1000000.svg");
				background-size: cover;
				height:15px;
				width:76px;
				display: inline-block;
			}

/*****************************************End of Symbols*******************************/

			.hide{
				display: none;
			}
			
			.show{
				display: block;
			}
			
			
			.autocomplete{
				position:relative;
				display: inline-block;
			}
			
			.autocomplete-items{
				position:absolute;
				border:1px solid black;
				border-bottom:none;
				border-top:none;
				z-index:99;
				top:100%;
				left:0;
				right:0;
			}
			
			.autocomplete-items div{
				padding:10px;
				cursor:pointer;
				border-bottom: 1px solid black;
				background-color:white;
			}
			
			.autocomplete-items div:hover{
				background-color: #e9e9e9 !important;
			}
			
			.autocomplete-active{
				background-color: #e9e9e9 !important;
				color: black;
			}
			
			.common{
				background-color: #000000;
			}
			
			.uncommon{
				background-color: #7B7B7C;
			}
			
			.rare{
				background-color: #DCBA69;
			}
			
			.mythic{
				background-color: #C26B0B;
			}
			
			.timeshifted{
				background-color: #B890BE;
			}
			
			.masterpiece{
				background-color: #A5D9EB;
			}
			
			.cardSearchDiv{
				width: 100%;
			}
			
			.setIcon{
				width: 180px;
				height: 180px;
			}
			
			body{
				background-color: #ecf0f1;
				padding: 10px;
			}
			
			#divCheckboxes{
				user-select: none;
				-moz-user-select: none;				
			}
			
			#cardWrapper{
					width:307px;
					height:465px;
					padding: 10px;
					margin: 10px;
					border: 2px;
					border-radius: 5px;
					border-color: transparent;
					border-style: solid;
					position: relative;
				}
			#name{
				display: inline;
			}
			
			#cost{
				display: inline;
				float: left;
				margin: 0px;
			}
			
			#cardImageBox{
				margin-top: 10px;
				margin-bottom:10px;
				width:300px;
				min-height:220px;
				float:center;
				text-align:center;
			}
			
			#cardImage{
				max-width: 100%;
				height: auto;
			}
			
			#setImage{
				max-width:100%;
				float: center;
			}
			
			#setImageBox{
				display: inline-block;
				float: right;
				width:20px;
				height:auto;
				position: relative;
			}
			
			#setImageBox:hover #setDropdown{
				display:block;
			}			
			
			#setDropdown{
				display:none;
				position:absolute;				
				z-index:1;
				border-left: 1px solid black;
				border-right: 1px solid black;				
				background-color: white;
			}
			
			#setDropdown div{
				border-bottom: 1px solid black;
				border-top: 0px;
				padding:3px;
				
				
			}
			
			#searchCollapse{
				background-color: white;
			}
			
			.dropdownItem{
				min-height: 20px;
				width: 20px;
				top: 100%;
				left: 0;
				right: 0;
			}
			
			.dropdownImage{
				max-width: 100%;
			}
			
			.dropdownItem:hover{
				background-color: #e9e9e9 !important;
			}
			
			#type_line{
				display: block;				
			}
			
			#flavor_text{
				font-style: italic;
			}
			
			#artist{
				display: inline;
				font-style: italic;
			}
            
            #attack{
                float: left;
				display: inline;
				margin: 0px;
            }

			#health{
				float: right;
				display: inline;
				margin: 0px;
			}
			
			#scryfallLinkBox{
				text-align:left;
			}
			
			#divCheckboxes{
				height: 38px;	
				vertical-align: middle;
			}
			
			#checkImage{
				margin-left: 30px;
			}
			
			#btnClear{
				margin-left: 30px;
			}
			
			#btnRequestData{
				margin-left:30px;
			}
			
			#licencesWrapper{
				position:relative;
				bottom: 0;
				width: 100%;
            }
            
            #nameBar{
                text-align: center;
            }
			
			#licences{
				width: 100%;
			}
			
			/* For Mobile */
			
			
			form{
				
				text-align: center;
				
			}
			
			.autocomplete{
				
				width: 100%;
				
			}
			
			#myInput, #generalInput{
				margin-bottom: 5px;
				border: black;
				border-style: solid;
				border-width: 1px;
				width: 100%;
				background-color: #dfe6e9;
				height: 38px;
			}		

			/* For Desktop */
			@media screen and (min-width: 630px) {
				
				#divCheckboxes{
				display: inline-block;
				}
			
				#divButtons{
					display: inline-block;
				}
			
				.autocomplete{					
					width: auto;					
				}
				
				form{				
				text-align: left;				
				}

				#myInput{
					width: auto;
				}				
				
			}