@import url("https://fonts.googleapis.com/css?family=Roboto:400,100,300,700,900");

body {
  padding: 0;
  margin: 0;
  font-family: "Roboto";
  font-size: clamp(10px, 10px + 1vw, 32px);
}

svg {
  vertical-align: middle;
}


.title {
  font-size: 0.6em;
  text-align: center;
  letter-spacing: 0.1em;
  font-weight: 700;
  padding: 0;
  color: white;
  text-transform: uppercase;
  text-shadow: 0 0 1em rgba(0,0,0,0.2);
}

.title small {
  font-size: 1em;
  font-weight: 300;
}

h1 {
  color: white;
  font-size: 3em;
  font-weight: 500;
  text-align: center;
}

h1 small {
  display: block;
  font-size: .5em;
}

hr {
  border-top: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  width: 50%;
}

.button {
  display: inline-block;
  padding: 10px 30px 10px 30px;
  text-align: center;
  border-radius: 8px;
  font-size: 1em;
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-decoration: none;
  margin: 0 .2em;
  color: white;
  background: rgba(255,255,255,0.0);
  transition: background-color 100ms linear;
}
.button-remove-members {
  display: none;
  padding: 6px 12px 6px 12px;
  text-align: center;
  border-radius: 8px;
  font-size: .5em;
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-decoration: none;
  color: white;
  background: rgba(230, 91, 101, 0.7);
  transition: background-color 100ms linear;
  margin-top: .2em;
  margin-bottom: .3em;
}

.button--remove {
  border: 2px solid rgba(230, 91, 101, 0.8);
  background: rgba(255,255,255,0.05);
  color: rgba(230, 91, 101, 1);
}
.button--remove:hover:not(:disabled) {
  border: 2px solid rgba(230, 91, 101, 1);
  color: rgba(230, 91, 101, 1);
  background: rgba(255,255,255,0.10);
}

.button--remove:active:not(:disabled) {
  border: 2px solid rgba(230, 91, 101, 1);
  color: rgba(230, 91, 101, 1);
  background: rgba(255,255,255,0.2);
}




.button:hover:not(:disabled) {
  background: rgba(255,255,255,0.10);
}

.button:active:not(:disabled) {
  background: rgba(255,255,255,0.20);
}

.button:disabled {
  cursor: default;
  opacity: 0.5;
}

.button--primary {
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  box-shadow: 0 0 0.6em rgba(255,255,255,0.5); 
}

.button--primary:hover:not(:disabled) {
  background-color: rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 1em rgba(255,255,255,0.8); 
}

.button--primary:active:not(:disabled) {
  background-color: rgba(0, 0, 0, 1.0);
  box-shadow: 0 0 1.4em rgba(255,255,255,1); 
}

.button--secondary {
  border: 2px solid rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.6);
}

.button--secondary:hover:not(:disabled) {
  border: 2px solid rgba(255,255,255,0.8);
  color: white;
  background: rgba(255,255,255,0.10);
}
.button--secondary:active:not(:disabled) {
  border: 2px solid white;
  color: white;
  background: rgba(255,255,255,0.2);
}

.button--icon {
  padding: 10px 20px;
}

.button--round {
  box-sizing: border-box;
  /* background: rgba(0,0,0,0.5); */
  border-radius: 3em;
  line-height: 2.1em;
  width: 5em;
  padding: 0;
  text-align: center;
}


.select {
  cursor: pointer;
  border: 2px solid rgba(255,255,255,0.6);
  color: rgba(255,255,255,0.8);
  background-color: rgba(0,0,0,0.05);
  font-size: .8em;
  padding: .4em .8em;
  /* margin: 0 .2em; */
  border-radius: 1em;
  cursor: pointer;
}
.select option {
  background-color: rgba(0,0,0,0.2);
 
}
.select:hover {
  border: 2px solid rgba(255,255,255,0.6);
  background-color: rgba(0,0,0,0.1);
  color: white;

}
.select:active {
  border: 2px solid rgba(255,255,255,1.0);
  background-color: rgba(0,0,0,0.2);
  border-color: white;
  color: white;
  
}


.label {
  color: rgba(255,255,255,0.6);
}


.input {
  border: 2px solid rgba(255,255,255,0.6);
  background-color: rgba(0,0,0,0.05);
  border-radius: 1em;
  font-size: .8em;
  padding: .5em 1em;
  text-transform: capitalize;
  color: whitesmoke;
  outline: none;
  
  margin-bottom: .2em;
}
.input:hover {
  border: 2px solid rgba(255,255,255,0.8);
  background-color: rgba(0,0,0,0.1);
}
.input:focus {
  border: 2px solid white;
  background-color: rgba(0,0,0,0.5);
}

::placeholder {
  color: rgba(255,255,255,0.8);
}


.icebreakerPage {
  display: flex;
  flex-direction: column;
  color: white;
  height: 100vh;
  min-height: 100%;
  width: 100%;
  overflow-x: hidden;
}
.icebreakerPage__header {
  flex-grow: 0;
  flex-shrink: 0;
  position: relative;
  padding: 2vw 5vw 0vw 5vw;
}
.icebreakerPage__logo {
  width: 14em;
}

.icebreakerPage__main {
  flex-grow: 1;
  flex-shrink: 1;
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
  position: relative;
  padding: 1vw 5vw;
}

.step {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  flex-direction: column;
}

.step--visible {
  display: flex;
}

.step__main {
  position: relative;
  flex-grow: 1;
  flex-shrink: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-left: 5vw;
  padding-right: 5vw;
  
}
.step__footer {
  flex-grow: 0;
  flex-shrink: 0;
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  padding: 2.5vw 5vw 5vw 5vw;
}

.step__footer__left {
  flex-grow: 1;
  flex-basis: 1px;
  text-align: left;
}
.step__footer__center {
  flex-grow: 2;
  flex-basis: 2px;
  text-align: center;
}
.step__footer__right {
  flex-grow: 1;
  flex-basis: 1px;
  text-align: right;
}

.questionPageContent {
  display: flex;
  flex-direction: column;
  justify-self: stretch;
  width: 100%;
  height: 100%;
}

.questionPageContent__header {
  flex-basis: 30%;
  flex-shrink: 1;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.questionPageContent__main {
  flex-basis: 80%;
  flex-shrink: 1;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.questionPicker {
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  align-items: flex-start;
  width: 100%;
  max-width: 1200px;
  margin: 2em auto 0 auto;
}
.questionPicker__questionContainer {
  position: relative;
  display: block;
  flex-grow: 1; 
  flex-shrink: 1;
  padding: 20px;
  pointer-events: none;
}

.questionPicker__question {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0;
}

.questionPicker__prev,
.questionPicker__next {
  flex-grow: 0; 
  flex-shrink: 0;
  margin: 3em 1em 1em 1em;
  padding: 0;
  line-height: 2em;
  width: 2em;
  text-align: center;
}


.categoryContainer {
  text-align: center;
}

.membersList {
  color: white;
  text-align: center;
  font-size: 0.6em;
  min-height: 3.5em;
  overflow-y: auto;
  max-height: 5.4em;
  user-select: none;
}

/* width */
.membersList::-webkit-scrollbar {
  width: 10px;
  
}

/* Track */
.membersList::-webkit-scrollbar-track {
  background: #f1f1f1; 
  border-radius: 10px;

}
 
/* Handle */
.membersList::-webkit-scrollbar-thumb {
  background: #004E4B; 
  border-radius: 10px;
 
}

/* Handle on hover */
.membersList::-webkit-scrollbar-thumb:hover {
  background: #127975; 

}

.memberChip {
  display: inline-block;
  margin: .1em .2em;
  border-radius: 2em;
  color: white;
  background-color: rgba(0,0,0,0.5);
  font-weight: 300;
  font-size: 1.2em;
  line-height: 2em;
  padding: 0 1em 0 1em;
  white-space: nowrap;
}

.memberDeleteBtn {
  border-radius: 50%;
  margin: 0 -.8em 0 .2em;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
  box-sizing: border-box;
  text-align: center;
  padding: 0;
  border: transparent;
  color: white;
}

.countdownStyle {
  padding: 12px 16px;
  font-size: 1.2rem;
  font-weight: normal;
  line-height: 1em;
  min-height: 1em;
  margin: 0;
  display: flex;
  justify-content: right;
}
#countDownTime{
  color: rgba(255,255,255,0.5);
  display: block;
}
.timesUpStyle {
  color:#e74c3c;
  padding: 1em 0;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1em;
  min-height: 1em;
  margin: 0;
  display: flex;
  justify-content: right;

}


.memberSpinner {
  display: block;
  position: relative;
  font-size: 3.2em;
  font-weight: 800;
  height: 1em;
  width: 100%;
  text-align: center;
  padding: 0;
  line-height: 1em;
  margin: 0 0 0 0;
  pointer-events: none;
}

.memberSpinner__member {
  position: absolute;
  display: block;
  width: 100%;
  text-align: center;
  animation-duration: 400ms;
}


.memberSpinner__spin-button {
  transition: opacity 400ms linear;
  /* margin-top: 1.2em; */
 
}
.memberSpinner__spin-button:disabled {
  opacity: 0;  
}


.questionText {
  font-weight: 700;
  text-align: center;
  font-size: 1.2em;
  text-shadow: 0 0 1em rgba(0,0,0,0.2);

}
.questionTextNonFacilitator {
  font-weight: 700;
  text-align: center;
  font-size: 2em;
  text-shadow: 0 0 1em rgba(0,0,0,0.2);
}

.questionText h4 {
  font-size: .4em;
  text-transform: uppercase;
  opacity: .5;
  margin: 0 0 .5em 0;
  
}

.step--icebreaker #spinBtn { display: none; }
/* .step--icebreaker #icebreakerFinishButton { background-color: rgba(216, 216, 216, 0.837); } */
.step--icebreaker .letsSpin { display: none; }
.step--icebreaker .yourTurn { display: none; }
.step--icebreaker .remainingMembers { display: none; }
.step--icebreaker .membersList { display: none; }
.step--icebreaker .memberSpinner { display: none; }
.step--icebreaker #countUpTime { display: none; }
.step--icebreaker #numRemainingMembers { display: none; }
.step--icebreaker.--with-members #spinBtn { display: block; }
.step--icebreaker.--with-members .letsSpin { display: block; }
.step--icebreaker.--with-members .yourTurn { display: none; }
.step--icebreaker.--with-members .remainingMembers { display: block; }
.step--icebreaker.--with-members .membersList { display: block; }
.step--icebreaker.--with-members .memberSpinner { display: block; }
.step--icebreaker.--with-members #countUpTime { display: block; }
.step--icebreaker.--with-members #numRemainingMembers { display: none; }
.step--icebreaker.--with-members .questionText { font-size: 1.6em; margin-top: 3em; }
.step--icebreaker:not(.--with-members) .questionText { font-size: 2.5em; }



/* emoji styles */
#emoji-icon-container{
  display: inline-flex;
  text-align: center;
  height: 2em;
}
      
.emoji-icon{
   font-family: 'Noto Color Emoji';
   font-size: 1.1em;
   margin: .3em;
   cursor: pointer;
  
}
.emoji-icon:hover{
 
  text-shadow: 0 0 .1em #dfe4ea;
}

.emoji-animation{
  font-size: 1.5em!important;
  bottom: -.1em;
  right: 15px;
  display:none;   
  position:absolute;
  padding:10px;  
  animation-name: moveEmoji;
  animation-timing-function: linear;
  animation-duration:2.8s;
  opacity: 0;
}
@keyframes moveEmoji {  

  0% {
      transform: translate(0,0);
      opacity: 1;
  }

 
  20% {
      transform: translate(10px, -50px);
      opacity: .9;
  }


  40% {
    transform: translate(-10px, -100px);
    opacity: .8;
} 
 

  60% {
      transform: translate(10px, -150px);
      opacity: .5;
  }

  80% {
    transform: translate(-5px, -200px);
    opacity: .2;
}



  100% {
      transform: translate(0px,-250px);
      animation-timing-function: ease-in-out;
      opacity: 0;
  }

} 
.share-link{
  font-size: .6em;
  
}
.share-linkContainer{
  display: flex;
}



.copy-text {
  margin-left: .3em;
	position: relative;
	 /* padding: 2px; */
	border: 2px solid rgba(255,255,255,0.6);
  background-color: rgba(0,0,0,0.05);
  border-radius: 6px;
	display: flex;
  height: 1em!important;
  margin-top: .4em;
}
.copy-text input.text {
	margin-left: .2em;
  margin-top: .1em;
	font-size: .5em;
	color: whitesmoke;
	border: none;
	outline: none;
  background-color: rgba(0,0,0,0.05);

}
.copy-text button {
	padding: -8px 5px 2px 5px;
	background: rgba(255,255,255,0.05);
	color: whitesmoke;
	font-size: .6em;
	border: none;
	outline: none;
	cursor: pointer;
}

.copy-text button:active {
	background: rgba(255,255,255,0.05);
}
.copy-text button:before {
	content: "Copied";
	position: absolute;
	top: -2px;
	right: -5em;
	background: rgba(255,255,255,0.05);
	padding: 8px 10px;
	font-size: .8em;
	display: none;
  border-radius: 8px;
}
.copy-text button:after {
	content: "";
	position: absolute;
	top: -20px;
	right: 25px;
	width: 10px;
	height: 10px;
	background: rgba(255,255,255,0.05);
	transform: rotate(45deg);
	display: none;
}
.copy-text.active button:before,
.copy-text.active button:after {
	display: block;
}