﻿.ccc_rarity_icon { display: inline-block; width: 1.75em; height: 1em; background-size: contain; background-position: left center; background-repeat: no-repeat; vertical-align: text-top; }

.ccc_set-header_wrap { background: #202020 linear-gradient(to bottom, black 0, rgb(255, 255, 255) 1px, rgba(0,0,0,0) 11px); position: relative; margin: 4px 4px 0 4px; border-left: 1px solid black; border-right: 1px solid black; }
.ccc_set-header { max-width: 1200px; min-width: 565px; margin: auto; text-align: center; color: white; height: 200px; position: relative; background-position: top center; border-top: 1px solid #202020; background-size: cover; }
.ccc_set-header::after { content: ""; position: absolute; top: 0; right: 0; left: 0; bottom: 0; background: linear-gradient(to bottom, rgb(255, 255,255) 0%, rgba(0,0,0,0) 10px), linear-gradient(to top, rgb(32, 32, 32) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 100%), linear-gradient(to right, rgb(32, 32, 32) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 100%), linear-gradient(to left, rgb(32, 32, 32) 0%, rgba(20,20,20,0) 50%, rgba(20,20,20,0) 100%); }
.ccc_set-logo { position: relative; top: 20px; filter: drop-shadow(2px 2px 4px black); }
.ccc_set-header_end { background: linear-gradient(#202020 38px, transparent 39px); height: 40px; overflow: hidden; text-align: center; margin: 0 4px -30px 4px; }
.ccc_set-header_end_white { background-color: white; border-radius: 100% 100% 0 0; height: 120px; width: 100%; }


.ccc_set-listing_wrap { vertical-align: middle; border: 1px solid black; border-radius: 12px; width: 270px; height: 220px; background: linear-gradient(to right,#aa9 ,transparent 5px, transparent 275px, #aa9),linear-gradient(to bottom,#aa9 110px,#fff); display: inline-block; margin: 5px;}

.ccc_set-header_wrap_small { width: 270px; text-align: center; margin-bottom: -20px; }
.ccc_set-header_small { background-position: center center; background-size: cover; position: relative; border-radius: 10px 10px 0 0; }
.ccc_set-header_small::after { content: ""; position: absolute; top: 0; right: 0; left: 0; bottom: 0; background: linear-gradient(to bottom, rgb(255, 255,255) 0%, rgba(0,0,0,0) 10px), linear-gradient(to top, rgb(32, 32, 32) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 100%), linear-gradient(to right, rgb(32, 32, 32) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 100%), linear-gradient(to left, rgb(32, 32, 32) 0%, rgba(20,20,20,0) 50%, rgba(20,20,20,0) 100%); border-radius: 10px 10px 0 0; }
.ccc_set-logo_small { width: 250px; height: 100px; z-index: 1; position: relative; filter: drop-shadow(1px 1px 2px black); } 

.ccc_set-header_end_small { height: 20px; overflow: hidden; text-align: center; position: relative; top: -10px; }
.ccc_set-header_end_white_small { background-color: #aa9; border-radius: 0 100% 0 0; height: 30px; box-shadow: inset 1px 1px 2px white, 50px 0 #202020; position: absolute; left: -10px; right: -30px; }
.ccc_set-listing_stats { padding: 0 30px 5px 20px; text-shadow: 1px 1px rgba(255,255,255,0.5); position: relative; }
.ccc_set-listing_icon_small { position: absolute; bottom: 20px; right: 5px; font-size: 40px; line-height: 0; }
.ccc_folder_buttons { display:flex; box-shadow: 0 -1px rgba(0,0,0,0.1); border-top: 1px solid rgba(255,255,255,0.25); }
.ccc_folder_button { flex: 1; margin: 0 5px; text-align: center; padding: 5px; border-radius: 6px; }
.ccc_folder_button:hover { text-decoration: none; color: #774; text-shadow: 1px 1px #ddd; }

.ccc_set-new_wrap { border: 1px solid #888; border-radius: 20px; width: 200px; height: 180px; background: linear-gradient(to right, #000 ,transparent 5px, transparent 275px, #000),linear-gradient(to bottom,#222 110px, #555); display: inline-block; margin: 30px; vertical-align: middle; color: white; text-align: center; font-size: 18px; }
.ccc_set-createnew { display: block; margin: 25px auto 10px auto; text-align: center; font-size: 80px; width: 100px; height: 100px; border-radius: 100%; border: 1px solid white; background: black; color: white; }
.ccc_set-new_wrap:hover { color: white !important; }
.ccc_set-new_wrap:hover > .ccc_set-createnew { background:white; color:black; border:1px solid black; }



.ccc_card_pane { margin: 10px; vertical-align: top; font-size: 15px; background-color: white; display: inline-block; text-align: left; }
.ccc_card_full { display: flex; margin: auto; max-width: 900px; }
.ccc_left { width: 580px; margin: 0 10px 0 0; }
.ccc_right { flex: 0; width: 300px; min-width: 300px; }
.ccc_card_pane p { margin:1em 0 0 0; font-size:16px; }
.ccc_card_image_side { display: inline-block; width: 290px; vertical-align:top; }
.ccc_card_details { display: inline-block; width: 280px; margin-bottom:10px; margin-left:2px; }
.ccc_card_face { border: 1px solid black; border-radius: 9px; box-shadow: 2px 2px 4px rgba(0,0,0,0.5); height: 403px; position: relative; background-color: white; text-align:left;}
.ccc_text_flavor_divider { height:1px; width: 40%; margin:1em auto 0 auto; border-bottom:1px solid #aaa;}
.ccc_flavor_box, .ccc_flavor_box p { font-style: italic; font-size:1em; }
.ccc_cardname { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight:bold; text-shadow: 1px 1px 2px rgba(0,0,0,0.75), 0 0 1px black; }
.ccc_details_mana {
	filter: drop-shadow(-1px 2px rgba(0,0,0,0.75));
}
.ccc_details_mana > .sym_mana {
	margin-left: 1px;
}
.ccc_title_row { color: white; padding: 3px 5px 3px 5px; border-radius: 8px 8px 0 0; font-size: 16px; display: flex;}
.ccc_card_body { padding: 4px; min-height: 342px; max-height: 342px; overflow-x: auto; white-space: normal;}
.ccc_power_toughness_row.ccc_card-size_full, .ccc_loyalty_row.ccc_card-size_full {
	position: absolute;
	right: 2px;
	bottom: 1.8em;
	border: 3px outset #888;
	text-align: center;
	border-radius: 7px / 14px;
	box-shadow: inset 2px -2px 2px white, inset -2px 2px 2px black, 2px 2px 2px rgba(0,0,0,0.25);
	background: #ddd;
	padding: 3px 0;
	width: 4em;
	font-weight: bold;
}
.ccc_power_toughness_row.ccc_card-size_small, .ccc_loyalty_row.ccc_card-size_small {	text-align:right; }
.ccc_footer_row { position: absolute; left: 0; right: 0; bottom: 0; display: flex; border-top: 1px solid black; background-color: #e6e6e6; padding: 0 4px 0 4px; border-radius: 0 0 8px 8px;  min-height: 1.5em; }
.ccc_artist_row { font-size: 12px; flex: 1; text-align: left; }
.ccc_colnum_row { font-size: 12px; flex: 0; text-align: right; min-width: 5em; }
.ccc_card_face.ccc_2fc_card { flex: 1; height: auto; overflow:hidden; }
.ccc_card_face.ccc_2fc_card .ccc_card_body { max-height: 100%; min-height: 146px; max-height:calc(100% - 27px); overflow:auto;}
.ccc_card_face.ccc_2fc_card .ccc_card_text_contain { font-size: 14px; }
.ccc_card_face.ccc_2fc_card p { margin:0 0 0 0; }
.ccc_card_face.ccc_2fc_card .ccc_text_flavor_divider { margin: 5px auto 5px auto; }
.ccc_type_row { border-bottom: 1px solid #e0e0e0; margin-bottom: 0.2em; padding-bottom: 0.1em; }
.ccc_links_col { column-count: 1; padding:5px; line-height:1.5em; padding: 5px 0 5px 10px; }
.ccc_legal_price_wrap { display:block; }
.ccc_links_col * { vertical-align: middle; }

.ccc_card_image_container { perspective: 1000px; position: relative; left:0; transform-style: preserve-3d; transition: 0.75s ease-in; margin-bottom: 10px; padding-top: 125%; }
.ccc-side_by_side { position: relative; height: min-content; display:inline-block; width:700px; max-width: 95%; min-width: 500px; margin:10px 4px; text-align:left; vertical-align: bottom; }
.ccc-side_by_side-img { position: relative; width: 50%; }
.ccc-side_by_side-text { position: absolute; top: 0; right: 0; bottom: 0; left: 50.5%;  }
.ccc_2fc_wrap { display: flex; flex-direction: column; height: 100%; }
.ccc_card_image_container.cdb_flipped { transform: rotateY(180deg); transition: 0.75s ease-in-out;}
.ccc_card_image_container.cdb_turned { transform: rotate(-180deg); transition: 0.75s ease-in-out;}
.ccc_card_image_container.cdb_turn90 {
	transform: rotate(90deg);
	transition: 0.75s ease-in;
	scale: calc(5/7);
	z-index:+1;
}
.ccc_card_image_frontside , .ccc_card_image_backside { -webkit-backface-visibility: hidden; backface-visibility: hidden; position: absolute; top: 0; left: 0;transform-style: preserve-3d;}
.ccc_card_image_frontside { 	z-index: 2;	 transform: rotateY(0deg); }
.ccc_card_image_backside { transform: rotateY(180deg); }
.ccc_card_image_container > .cardimg { box-shadow: 2px 2px 6px rgba(0,0,0,0.5); width:290px; height:405px;}
.ccc_set_icon { float: right; font-size: 1.3em; }

.ccc_image_text_wrap { height:385px; width:270px; margin:8px; display:inline-block; vertical-align: top; text-align:left; position:relative; }
.ccc_under_button { vertical-align:top; height:24px; text-shadow: 1px 1px 2px black; font-size: 14px; position: relative; display: inline-block; border: 1px solid black; background: #474747 linear-gradient(to bottom, #4e4e4e 0%,#3c3c3c 50%,#2d2d2d 51%,#424242 100%); border-radius: 6px; color: white; padding: 2px 0 2px 0; margin-top:-2px; text-align: center; }
.ccc_under_button:hover { color: #8FF; }
.ccc_favorited { color: gold !important; }
.ccc_base_button { width: 94%; margin-left: 3%; font-size: 14px; text-align: center; border: 1px solid black; border-radius:20px; overflow: hidden; position: relative; background: black; }

.ccc_recent_container { background: linear-gradient(to bottom,#eef,#ccd 80%,#fff); border: 1px solid black; overflow: hidden; border-radius: 20px 20px 12px 12px; width: 98%; margin: auto; position: relative;}
.ccc_recent_link { background: linear-gradient(to right,#707288,#122342); padding: 2px 7px; border-radius: 100px 0 0 0; color: white; text-shadow: 1px 1px black; font-size: 16px; width: 260px; }
.ccc_recent_card_listing { height: 300px; }
.ccc_recent_card { vertical-align: top; display:inline-block; width: 175px; height: 240px; text-align: left; overflow: hidden; padding: 0 4px 6px 0; position:relative;  margin: 4px 4px 0 4px; }
.ccc_recent_card_fav { position: absolute; width: 80px; height: 22px; bottom: 0; left: 50%; margin-left:-40px; border-radius: 10px; background: #474747 linear-gradient(to bottom, #4e4e4e 0%,#3c3c3c 50%,#2d2d2d 51%,#424242 100%); color: gold; text-align: center; font-size: 14px; padding-top: 3px; text-shadow: 1px 1px rgba(255,255,255,0.25), -1px -1px rgba(0,0,0,0.25); box-shadow: inset 1px 1px 2px rgba(255,255,255,0.5), inset -1px -1px 2px rgba(0,0,0,0.5); } 

.ccc_cycle_preview {
	margin: 5px;
	display: inline-block;
	width: 150px;
	height: 190px;
	position: relative;
	vertical-align: bottom;
	border: 1px solid black;
	border-radius: 8px;
	background: linear-gradient(to bottom,#eeeee4,#aaaaa4);
	box-shadow: 2px 2px 3px rgba(0,0,0,0.25), inset 1px 1px 3px white;
	text-shadow: 1px 1px white;
	overflow: hidden;
}


.ccc_card_body.ccc_card-size_small { height: 80%; max-height: 80%; min-height: 80%; }
.ccc_card_face.ccc_card-size_small { font-size: 12px; }
.ccc_card_face.ccc_card-size_small > .ccc_title_row { font-size:12px; }

.ccc_head_credit_wrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; text-align: center; max-width: min-content; margin: auto; height: 32px; }
.ccc_head_credit { padding: 3px 12px 3px 22px; border-radius: 8px; border: 1px solid #445; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; max-width: min-content; }
.ccc_head_credit:hover { color:initial; background-color:rgba(128,128,128,0.25); }
.ccc_head_credit > .avatar { max-height: 1.4em; width: auto; margin: -0.3em 5px -0.25em 0; }
.ccc_head_credit > .ccc_rarity_icon { line-height: 1em; font-size: 1.25em; margin: -0.1em 0 -0.2em 0; }
.ccc_head_credit_type { writing-mode: vertical-rl; position: absolute; left: 0; top: 0; bottom: 0; background-color: black; color: white; text-align: center; font-size: 11px; font-family: Exo; font-weight: bold; padding: 0 2px 0 0; }

