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


.current-hot-potato-counter {
	text-align: center;
	padding: 20px 10px 10px 10px;
	background: #110100;
    border-radius: 10px 10px 0 0;
    color: #ffffff;
	text-shadow: 0 0 5px #000, 0 0 10px #000, 0 0 15px #000, 0 0 20px #393939, 0 0 30px #393939, 0 0 40px #393939;
}

.current-hot-potato-name {
	color: #ffffff;
	text-align: center;
	text-shadow: 0 0 5px #ff4500, 0 0 10px #ff4500, 0 0 15px #ff4500, 0 0 20px #ff6347, 0 0 30px #ff6347, 0 0 40px #ff6347;
	font-weight: 900;
}

.bold-standout-hippo {
	background-color: black;
	color: #ffffff;
	padding: 20px; 
	text-align: center;
	border: solid 1px #ffffff;
}


.date-range-hippo-buttons {
display: flex;
    justify-content: center;
    gap: 10px;
    margin: 10px 0px;
    flex-direction: row;
    flex-wrap: wrap;
    max-height: 100px;
    overflow: auto;
}

.hippo-p-center, .no-winners-hungry-hippo {
	text-align: center;
}

.hippo_box_ranking_score {
	display: inline-block;	
}

.hippo_ranking_boxes_container {
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
	margin-bottom: 25px;
	gap: 25px;
}

.winning-user-leadboard a {
	color: #ffffff;
}

.yesterday-results-hippo-parent {
	text-align: center;
}

.yesterday-results-hippo {
	color: blue;
	text-align: center;
}

.leaderboard-title-hippo {
	font-size: 16px;
	display: block;
}

.hippo_box_name small, .previous_winner_hippo_box small {
	display: block;
}

.hippo-leaderboard-table thead {
	background: #EEA636;
}

table.hippo-leaderboard-table td, table.hippo-leaderboard-table th {
	border: none !important;
}

.leaderboard_instant_winners_parent h3, .hungry_hippo_leaderboard_parent h3 {
	text-align:center;
}

.hippo_ranking_box {
    border-radius: 0;
    background: #6b6b6b;
	flex: 0 0 calc(33% - 20px);
	align-items: center;
	padding: 8px;
    border-radius: 99px;
	display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    gap: 15px;
	align-items: center;
	color: #ffffff;
}

.top_hippo_box_1 {
	background: #FDB618;
}

.top_hippo_box_2 {
	background: #F5802A;
}

.top_hippo_box_3 {
	background: #8652A1;
}

.previous_winner_hippo_box {
    display: grid;
    align-items: center;
    max-width: 300px;
    margin: 0 auto;
    margin-bottom: 20px;
	padding: 10px;
    background-color: #000000;    
}

.hippo_box_name {
	font-weight: 700;
}

.top_hippo_box_image img, .previous_winner_hippo_box img {
	background: #ffffff;
    border-radius: 99px !important;
	padding: 5px;
	max-width: 50px !important;
	margin-bottom: -5px;
}    

.previous_winner_hippo_box img {
	margin-bottom: 0px;
}

.hippo_box_position {
	text-align: center;
}

/* HOT POTATO SPECIFIC CSS */

body.hot_potato_competition .hippo-leaderboard-table thead {
	background: #ff0000 !important;
  	background: linear-gradient(to right, #ff0000, #fdcf58) !important;
	text-align: left;
	color: #ffffff;
}

body.hot_potato_competition .top_hippo_box_1 {
    background: #ff0000 !important;
  	background: linear-gradient(to right, #ff0000, #fdcf58) !important;
}

body.hot_potato_competition .hippo_ranking_boxes_container:before {
	content: "Current Leader";
    width: 100%;
    text-align: center;
    margin-bottom: -20px;
    font-size: 20px;
    font-weight: 900;
}

body.hot_potato_competition .announce-hot-potato {
	font-size: 20px;
    font-weight: 900;
}

body.hot_potato_competition .leaderboard_instant_winners_parent.hungry_hippo_leaderboard_parent {
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    padding: 20px;
    border-radius: 10px;
	    background-color: #ffffff;
    background-image: url(/wp-content/plugins/hungry-hippo-think/public/images/potpattern.png);
    background-size: 150px;
    background-repeat: repeat;
}

/* HOT POTATO SPECIFIC CSS */



body.hot_potato_competition .hippo-leaderboard-table thead {

	background: #ff0000 !important;

  	background: linear-gradient(to right, #ff0000, #fdcf58) !important;

	text-align: left;

	color: #ffffff;

}



body.hot_potato_competition .top_hippo_box_1 {

    background: #ff0000 !important;

  	background: linear-gradient(to right, #ff0000, #fdcf58) !important;

}



body.hot_potato_competition .hippo_ranking_boxes_container:before {

	content: "Current Leader";

    width: 100%;

    text-align: center;

    margin-bottom: -20px;

    font-size: 20px;

    font-weight: 900;

}



body.hot_potato_competition .announce-hot-potato {
	font-size: 20px;
    font-weight: 900;

}

body.hot_potato_competition .leaderboard_instant_winners_parent.hungry_hippo_leaderboard_parent {

box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

    padding: 20px;

    border-radius: 10px;

	    background-color: #ffffff;

    background-image: url(/wp-content/plugins/hungry-hippo-think/public/images/potpattern.png);

    background-size: 150px;

    background-repeat: repeat;

}
.above-parent-container-hp {
	gap: 15px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    margin-bottom: 15px;
}

.hotp-above-counter {
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    padding: 20px;
    border-radius: 10px;
    background-color: #ffffff;
    background-image: url(/wp-content/plugins/hungry-hippo-think/public/images/potpattern.png);
    background-size: 150px;
    background-repeat: repeat;
	text-align: center;
}

.hotp-above-counter span {
	display: block;
    font-size: 28px;
    font-weight: 900;
    margin-bottom: -10px;
}

@media all and (min-width: 1px) and (max-width: 768px) { 

	.previous_winner_hippo_box {

		max-width: 100%;

	}

	.top_hippo_box_1, .top_hippo_box_2, .top_hippo_box_3 {

	flex: 0 0 calc(100% - 0px);

}

	.hippo_ranking_boxes_container {

	gap: 10px;

}

	.hippo_ranking_boxes_container {

		margin-bottom: 10px;

	}

	body.hot_potato_competition .hippo_ranking_boxes_container:before {

    margin-bottom: -10px !important;

	}
	
	.above-parent-container-hp {
    flex-wrap: wrap;
}
	.hotp-above-counter {
		width: 100%;
	}

}