/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.btn.btn-primary, a {
	color:#49319e!important;
}
.btn.btn-outline-primary, .btn-outline-primary.custom-file-control::before {
	color:#49319e!important;
	border-color:#49319e!important;
}
#page {
	position: relative;
}
.cleanlogin-container {
	margin-top: 10%!important;
	border:0!important;
	box-shadow: 0 0 0 #fff!important;
}
.cleanlogin-form span {
	margin-left: 0!important;
}
.clanRanks .col {
	width:50%;
	float: left;
}
.clanRanks .notice {
	padding:5px;
}
.warTable {
	width:100%;
}
	.warTable td {
		width:33%;
	}
#warDayTable th,
#warDayTable tbody td {
		padding-left: 30px;
	}
	.clanWarList td {
		width:11%;
	}

.warblock .col-sm-6 {
  padding-left:1%;
  padding-right:1%;
  max-width: 48%;
  float: left;
}
.warFilterBar {
	margin-bottom: 40px;
}

.dangerRow,
.dangerBlock {
	background-color: #b20000!important;
	color:#fff;
}

table.dataTable tbody tr.odd {
	background-color: #eee!important;
}

.single .cardBlock {
	margin:10px auto 30px;
}
.single .cardBlock:after {
	clear: both;
}
.cardBlock .col-sm-3 {
	padding:1px;
}
.single h2 {
	margin-bottom: 40px;
}
.cardBlock {
	display: flex;
	flex-wrap:wrap;
}
.battleBlock  {
	padding-bottom: 20px;
}

.btn-group a {
	border-radius: 6px;
	border:1px solid #eee;
}

i.trophiesPB {
	color:#FFD700!important;
}
.single .wp-block-separator {
	margin:20px auto;
}
.card-level-icon {
	position: relative;
}
	.card-level-icon:before {
		font-family: "Font Awesome 5 Free";
		content: "\f521";
		display: inline-block;
		vertical-align: middle;
		font-weight: 900;
		font-size: 56px;
	}
	.card-level-icon p {
		position: absolute;
		color:#fff;
		width:50%;
		left:25%;
		top:10%;
		z-index: 9999;
	}

.battleDeckBlock {
	border:1px solid #eee;
	padding:4px;
}
.col-sm-4 {
	float: left;
}	

#queryBlock {
	margin: 40px auto;
}

.cardRow {
	margin-bottom: 40px;
}
.cardRow > *:nth-child(3n+4) {
  clear: left;
}
.cardRow p {
	font-size: 10px;
	width: 100%;
	text-align: center;
}

.cardListRow {

}
.cardListRow p {
	text-align: center;
	font-size: 11px;
}
.cardListRow span {
	font-size: 80%;
}
.cardListCol p {
	font-size: 11px;
}

#deckBuild {
	display: none;
    position: fixed;
    right: 0;
    bottom: 0;
    height: 200px;
    width: 100%;
    background: #fff;
    border: 1px solid #eee;
}
#deckBuild.active {
	display: block;
	height:200px;
}

.page-id-737 .cardCatHeader {
	font-size: 34px;
	margin:40px 0 5px;
}
.tradeManager h3 {
	margin:0 0 20px 0;
	padding-bottom: 10px;
	border-bottom:1px solid #ccc;
}


.playerView .playerData {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;	
}

.battleBlock {
	float: left;
}
.battleBlock:nth-child(2n+1){
    clear:left
}
	.battleBlock .deckBlock {
		float: left;
	}
	.battleBlock:after {
		clear:both;
	}

.muchGood {
	border:2px solid #53cd02;
}
.suchBad {
	border:2px solid #cd0202;
}
.clearfix {
	clear:both;
}

.noActive {
	display: none;
}
.active {
	display: block;
}

.cardSorter ul {
	margin-left: 0;
	padding-left: 0;
}
	.cardSorter li {
		list-style-type: none;
	}

.filterPill {
    margin: 0 4px 0 0;
    padding: 4px 16px;
    border: 1px solid #6c757d;
    border-radius: 18px;
    text-align: center;
    display: inline-block;
}

.filterBar {
	margin:20px auto;
}

	.filterBar button {
		border:1px solid #eee;
		border-radius: 3px;
		margin-left:3px;
		margin-right: 3px;
	}

#sortHolder {
	margin:10px auto 30px auto;
}

.closeCircle {
	margin-left: 8px;
}

.winCon {
	font-weight: bolder;
	text-decoration: underline;
}

.seasonBest {
	color:#989898;
}
.bestTrophies {
	font-weight: bolder;
}

.dataTable .icon,
.dataTable .arena {
	max-width: 24px;
}

#ladderTable_wrapper {
	width:100%;
}
	#ladderTable_wrapper .dataTables_scrollHead {
		width:100%;
	}

	#ladderTable .name {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;	
	}

		table#ladderTable thead th {
			font-size: 12px!important;
			font-weight: normal!important;
		}

table#ladderTable>tbody>tr>td {
}
	table#ladderTable tr td.name span {
		font-size: 80%;
	}


.sidebar_breaker {
	border-top:1px solid #eee;
	margin:20px auto;
	padding-top:3px;
	width:100%;
	height:4px;
	clear:both;
}

.modal-body .playerMeta {
	margin-bottom: 5px;
}
.gooder {
	background-color:#4ba82b;
	color:#fff;
}
.worser {
	background-color:#e23030;
	color:#fff;
}
.btn-primary:not(:disabled):not(.disabled):active, 
.btn-primary:not(:disabled):not(.disabled).active, 
.show>.btn-primary.dropdown-toggle {
    background-color: #caa6de!important;
    border-color: #caa6de!important;
}

.clanInfo {
	width:100%;
}
	.clanName span {
		font-size: 60%;
	}
	.clanInfo .col-3 .list-group {
		font-size: 16px;
	}
.badge-primary {
	background-color: #49319e!important;
}
.clanInfo li .badge-pill {
	    padding: .5em 1.2em!important;
}
.rankChange {
	display: inline-block;
    font-size: 12px;
    text-align: center;
    float: right;
}
.success {
	color:#4ba831;
}
.warning {
	color:#b20000;
}
@media (max-width: 1024px) {


	#warDayTable .clanScore,
	#warDayTable .participants {
		display: none;
	}

	#warDayTable th, #warDayTable tbody td {
	    padding-left: 30px;
	    word-break: keep-all;
	}

	#ladderTable .lchmax {
		display: none;
	}
	.container {
	    max-width: 100%!important;
	}
	.clanInfo li {
		text-align: center;
	}
	.clanInfo li span {
		width: 100%;
		margin-top: 5px;
	}
}



@media (max-width: 599px) {

	#warDayTable thead th,
	#warDayTable tbody td {
		width:20%;
		overflow: hidden;
		padding: 4px 0;
	}


}




	/* animations */
	#spin_wrapper {
		display: none;
		width:100%;
		height: 100%;
		margin:0 auto;
		background-color:rgba(255,255,255,.8);
		position: absolute;
		z-index: 888;
		top:0;
		bottom:0;
	}
	.sk-fading-circle {
	  margin: 0 auto;
	  width: 40px;
	  height: 40px;
	  position: relative;
	  z-index: 999;
	  top:50%;
	}

	.sk-fading-circle .sk-circle {
	  width: 100%;
	  height: 100%;
	  position: absolute;
	  left: 0;
	  top: 0;
	}

	.sk-fading-circle .sk-circle:before {
	  content: '';
	  display: block;
	  margin: 0 auto;
	  width: 15%;
	  height: 15%;
	  background-color: #333;
	  border-radius: 100%;
	  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
	          animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
	}
	.sk-fading-circle .sk-circle2 {
	  -webkit-transform: rotate(30deg);
	      -ms-transform: rotate(30deg);
	          transform: rotate(30deg);
	}
	.sk-fading-circle .sk-circle3 {
	  -webkit-transform: rotate(60deg);
	      -ms-transform: rotate(60deg);
	          transform: rotate(60deg);
	}
	.sk-fading-circle .sk-circle4 {
	  -webkit-transform: rotate(90deg);
	      -ms-transform: rotate(90deg);
	          transform: rotate(90deg);
	}
	.sk-fading-circle .sk-circle5 {
	  -webkit-transform: rotate(120deg);
	      -ms-transform: rotate(120deg);
	          transform: rotate(120deg);
	}
	.sk-fading-circle .sk-circle6 {
	  -webkit-transform: rotate(150deg);
	      -ms-transform: rotate(150deg);
	          transform: rotate(150deg);
	}
	.sk-fading-circle .sk-circle7 {
	  -webkit-transform: rotate(180deg);
	      -ms-transform: rotate(180deg);
	          transform: rotate(180deg);
	}
	.sk-fading-circle .sk-circle8 {
	  -webkit-transform: rotate(210deg);
	      -ms-transform: rotate(210deg);
	          transform: rotate(210deg);
	}
	.sk-fading-circle .sk-circle9 {
	  -webkit-transform: rotate(240deg);
	      -ms-transform: rotate(240deg);
	          transform: rotate(240deg);
	}
	.sk-fading-circle .sk-circle10 {
	  -webkit-transform: rotate(270deg);
	      -ms-transform: rotate(270deg);
	          transform: rotate(270deg);
	}
	.sk-fading-circle .sk-circle11 {
	  -webkit-transform: rotate(300deg);
	      -ms-transform: rotate(300deg);
	          transform: rotate(300deg); 
	}
	.sk-fading-circle .sk-circle12 {
	  -webkit-transform: rotate(330deg);
	      -ms-transform: rotate(330deg);
	          transform: rotate(330deg); 
	}
	.sk-fading-circle .sk-circle2:before {
	  -webkit-animation-delay: -1.1s;
	          animation-delay: -1.1s; 
	}
	.sk-fading-circle .sk-circle3:before {
	  -webkit-animation-delay: -1s;
	          animation-delay: -1s; 
	}
	.sk-fading-circle .sk-circle4:before {
	  -webkit-animation-delay: -0.9s;
	          animation-delay: -0.9s; 
	}
	.sk-fading-circle .sk-circle5:before {
	  -webkit-animation-delay: -0.8s;
	          animation-delay: -0.8s; 
	}
	.sk-fading-circle .sk-circle6:before {
	  -webkit-animation-delay: -0.7s;
	          animation-delay: -0.7s; 
	}
	.sk-fading-circle .sk-circle7:before {
	  -webkit-animation-delay: -0.6s;
	          animation-delay: -0.6s; 
	}
	.sk-fading-circle .sk-circle8:before {
	  -webkit-animation-delay: -0.5s;
	          animation-delay: -0.5s; 
	}
	.sk-fading-circle .sk-circle9:before {
	  -webkit-animation-delay: -0.4s;
	          animation-delay: -0.4s;
	}
	.sk-fading-circle .sk-circle10:before {
	  -webkit-animation-delay: -0.3s;
	          animation-delay: -0.3s;
	}
	.sk-fading-circle .sk-circle11:before {
	  -webkit-animation-delay: -0.2s;
	          animation-delay: -0.2s;
	}
	.sk-fading-circle .sk-circle12:before {
	  -webkit-animation-delay: -0.1s;
	          animation-delay: -0.1s;
	}

	@-webkit-keyframes sk-circleFadeDelay {
	  0%, 39%, 100% { opacity: 0; }
	  40% { opacity: 1; }
	}

	@keyframes sk-circleFadeDelay {
	  0%, 39%, 100% { opacity: 0; }
	  40% { opacity: 1; } 
	}