/*
 * App Styles
 * Author: Andrew Broomfield
*/


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.hidden {display:none;}
.negative-margin-top {margin-top:-6vw !important;}
#quiz-container {

}

#leaderboard-form-container,
.question,
.leaderboard {
	width:66vw;
	margin:auto;
}

.intro {
	font-weight:600;
	color:var(--hm-mid-green);
}

h3.question-text {
	color:var(--hm-deep-green);
	font-weight:600;
	font-size:2em;
}


.hm-button {
	background:var(--hm-bright-green);
	border:none;
	color:var(--hm-deep-green);
	display:inline-block;
	padding:0.5em 1em;
	text-align:center;
	font-weight:600;
}


.option {
	background:var(--hm-deep-green);
	color:white;
	text-align:center;
	padding:0.75em 1em;
	margin-bottom:1.5em;
	font-weight:600;
}
.answer-zone {
	text-align:center;
	background:white;
	padding:0.75em 1em;
	margin-bottom:1.5em;
	min-height:2.5em;
	font-weight:600;
}

/*. Sliders/Range input */
/* General styling for all browsers */
input[type=range] {
  -webkit-appearance: none; /* Removes default styling in Webkit-based browsers */
  width: 100%;
  height: .75em;
  background: var(--hm-dark-green);
  border-radius: .75em;
  outline: none;
}

/* Webkit-based browsers (Chrome, Safari, Edge) */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.5em;
  height: 1.5em;
  background: var(--hm-deep-green);
  border-radius: 50%;
  cursor: pointer;
  outline:none;
  border:none;
  position:relative;
  top:-.4em;
}

/* Firefox */
input[type=range]::-moz-range-thumb {
  width: 1.5em;
  height: 1.5em;
  background: var(--hm-deep-green);
  border-radius: 50%;
  cursor: pointer;
  outline:none;
  border:none;
}

/* Styling the range track in Webkit-based browsers */
input[type=range]::-webkit-slider-runnable-track {
  width: auto;
  height: .75em;
  cursor: pointer;
  background: var(--hm-bright-green);
  border-radius: .75em;
}
/* Firefox range track */
input[type=range]::-moz-range-track {
  width: auto;
  height: .75em;
  background: var(--hm-bright-green);
  border-radius: .75em;
}

.slider-range {
	display:flex;
	justify-content: space-between;
}

tr.highlight {
	background:var(--hm-bright-green);
}

.overlay {
	display: none; 
	position: fixed; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
	background-color: rgba(0,0,0,0.7); 
	color: white; 
	text-align: center; 
	z-index: 9999;
}


.overlay h1, .overlay h2, .overlay h3, .overlay p {color:white;}

.overlay-inner {
	position: absolute; 
	top: 50%; 
	left: 50%; 
	transform: translate(-50%, -50%); 
	background-color: var(--hm-deep-green); 
	padding: 8vw 4vw 8vw 8vw; 
	border-radius: 0;
	border-bottom-right-radius: 20vw;
	width:66vw;
	text-align:left;
	
}


.overlay--get-ready {
	display:block;
	transition: opacity 250ms
}


.overlay--get-ready .overlay-inner {
	height:40vh;
	text-align:center;
	padding: 8vw;
}

.overlay--get-ready .countdown {
	color:var(--hm-bright-green);
	font-weight:600;
	font-size:10em;
	margin:0;
	transition: transform .25s ease-in-out;
}

.grow-shrink {
    animation: growShrink 0.5s ease-in-out;
}

@keyframes growShrink {
    0% { transform: scale(1); }
    50% { transform: scale(1.5); }
    100% { transform: scale(1); }
}

.fade-out {
	opacity:0;
}

/* Form */
input[type='text'], input[type='email'] {
	width:100%;
	font-size:1em;
	padding:.75em;
	border:0px;
	margin-top:1em;
}

input[type='checkbox'] {
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	margin: 0;
	
	font: inherit;
	color: var(--hm-deep-green);
	width: 1.15em;
	height: 1.15em;
	border: 0.15em solid var(--hm-deep-green);
	border-radius: 0;
	transform: translateY(0.05em);
	
	display: inline-grid;
    place-content: center;
}

input[type="checkbox"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--hm-deep-green);
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

.small {
	font-size:0.63em;
}

/* Leaderboard */
.leaderboard-header {
    position: relative;
	margin-bottom:5.5em;
}

.leaderboard-header::before {
    content: "";
    background: var(--hm-vibrant-purple);
    padding: 8vw;
    border-radius: 0;
    border-bottom-right-radius: 20vw;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 38vw;
    height: 33vw;
    /* margin-right: -15vw; */
    margin-bottom: -12.5vw;
}
.leaderboard-header__inner {
    background: var(--hm-deep-green);
    padding: 8vw;
    border-radius: 0;
    border-top-right-radius: 23vw;
    width: 75vw;
	color:white;
	position:relative;
}

.leaderboard-header.top-10 {
	padding-top:12.5vw;
	margin-top:-10.5vw;
	margin-bottom:0;
}

.leaderboard-header.top-10 .leaderboard-header__inner {
	border-top-right-radius: 0;
	border-bottom-left-radius: 23vw;
	padding-bottom:5em;
	margin-bottom:2em;
	padding-left:12vw;
}
.leaderboard-header.top-10::before {
	background: var(--hm-warm-orange);
	border-bottom-right-radius: 0;
	border-top-right-radius: 20vw;
	bottom:auto;
	margin-bottom:0;
	top:0;
}

.rcg-title {
	font-weight:600;
	font-size:2.6em;
}

.leaderboard {}

.leaderboard__title {
	color: var(--hm-deep-green);
	font-weight:600;
	padding: 0.5em 1em;
	border-bottom: 1px solid;
}	

.leaderboard__table {
	width: 100%;
	text-align: left;
	border: none;
	border-spacing: .5vw;
	-webkit-border-horizontal-spacing: .75vw;
    -webkit-border-vertical-spacing: 0;
}

.leaderboard__table td, .leaderboard__table th {
    border: 0;
    border-bottom: 1px solid #000;
    padding: 0.5em 1em;
}

.leaderboard__table tr.highlight th, .leaderboard__table tr.highlight td {font-weight:600;}

.leaderboard__table tbody tr th {color: var(--hm-mid-green);}

.leaderboard__table tr th:first-child,
.leaderboard__table tr td:last-child
 {width:2em;}

 
 .tight .leaderboard__table {font-size:.85em;}
 
.tight .leaderboard__table td, .tight .leaderboard__table th {
    padding: 0.15em 1em;
}

.tight .leaderboard__title {
	border-bottom: none;
	padding-top:0;
	padding-left:0px;
}	
 
 
 /* Timer */
#timer-container {
	padding-left:9.81481454vw;
	height:9.81481454vw;
	position:relative;
	width:34vw;
	margin:-5vw auto 8vw;
}

#timer-container::before {
	content:"";
	width:9.81481454vw;
	height:9.81481454vw;
	position:absolute;
	left:0;
	background:url(/wp-content/plugins/rcg-plugin/images/icon--timer.svg) no-repeat;
}

#timer-container > div {
	padding-left:1em;
	padding-top:.5em;
}

#timer-container > div span {
	display:block;
	color:var(--hm-deep-green);
	font-weight:600;
	font-size:1.5em;
}





/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/