/* Using a wildcard like this slows down the site */
* {
  margin: 0; 
}

html,
body {
  height: 100%;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #999;
}

p {
  margin: 0.5em 0 0.5em 0;
}

header {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

nav a:visited,
nav a:link {
  color: #fff;
  text-decoration: none;
}

nav > ul {
  display: inline;
  padding: 0;
}

nav > ul > li {
  display: inline-block;
  list-style: none;
  margin: 0 5px 0 5px;
}

main {
  display: block;
  padding-top: calc(7.2em + 64px);
  padding-bottom: 80px;
  /*min-height: 85%; */
}

footer {
  padding: 15px;
}

aside {
  text-align: center;
}

article {
  width: 75%;
}

.columns {
  display: flex;
}

@media only screen and (min-width: 768px) {

  aside {
    margin-left: 2%;
  }

  .columns-desktop {
    display: flex;
  }
}

/* Pie */
.pie {
  width: 200px;
  padding: 10px;
  margin: 10px;
  background-color: #fff;
  border: solid 1px #ccc;
}

.pie img {
  width: 100%;
}

.pie .title {
  font-weight: bold;
}

.pie .price {
  text-align: right;
}

.pie .columns {
  width: 100%;
}

.pie .columns div {
  width: 50%;
}

.pie button {
  background-color: #f6aeae;
  padding: 10px;
  border: solid 1px #f6aeae;
  border-radius: 3px;
  color: #fff;
}


/* Added */
html {
  
  box-sizing: border-box;
  --bgColorMenu : #1d1d27;
  --duration: .7s;  

  }

  html *,
  html *::before,
  html *::after {

  box-sizing: inherit;

  }

  body{

  z-index: -1;
  margin: 0;
  align-items: center;
  justify-content: center;
  background-color: #5a5a5a;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--duration);

  }
  
.banner {
  position: fixed;
  left: 0;
  text-align: left;
  color: black;
  z-index: 100;
  display: block;
}
/* Centered text */
.centered, .centered-main {
  /* position: absolute; */
  /* top: 48%; */
  position: fixed;
  top: 4px;
  /* transform: translate(-20%, -50%); */
}
.centered {
  right: calc(100% - 96vw);
}
.centered-main {
  /* right: calc(100% - 112vw); */
  right: 19px;
}
.centered p, .centered-main p {
  font-family: "Lowvetica";
  font-size: 1.9rem;
  font-weight: 900;
  margin: 0px 0px 0px 3px;
  padding-top: 0.5rem;
  margin-top: auto;
  margin-bottom: auto;
  color: white;

}

  .menu{

  margin: 0;
  display: flex;
  /* Works well with 100% width  */
  width: 100%;
  font-size: 1.5em;
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  background-color: var(--bgColorMenu);

  }

  footer {
    padding: 0;
  }
  nav > ul > li {
    padding: 0;
  }

  .menu__item{

  all: unset;
  flex-grow: 1;
  z-index: 100;
  display: flex;
  cursor: pointer;
  position: relative;
  border-radius: 50%;
  align-items: center;
  will-change: transform;
  justify-content: center;
  padding: 0.55em 0 0.85em;
  transition: transform var(--timeOut , var(--duration));

  }

  .menu__item::before{

  content: "";
  z-index: -1;
  width: 4.2em;
  height: 4.2em;
  border-radius: 50%;
  position: absolute;
  transform: scale(0);
  transition: background-color var(--duration), transform var(--duration);

  }


  .menu__item.active {

  transform: translate3d(0, -.8em , 0);

  }

  .menu__item.active::before{

  transform: scale(1);
  background-color: var(--bgColorItem);

  }

  .icon{

  width: 2.6em;
  height: 2.6em;
  stroke: white;
  fill: transparent;
  stroke-width: 1pt;
  stroke-miterlimit: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 400;

  }

  .menu__item.active .icon {

  animation: strok 1.5s reverse;

  }

  @keyframes strok {

  100% {

      stroke-dashoffset: 400;

  }

  }

  .menu__border{

  left: 0;
  bottom: 99%;
  width: 10.9em;
  height: 2.4em;
  position: absolute;
  clip-path: url(#menu);
  will-change: transform;
  background-color: var(--bgColorMenu);
  transition: transform var(--timeOut , var(--duration));

  }

  .svg-container {

  width: 0;
  height: 0;
  }

  .accordion {
    margin: auto;
    width: 100%;
  }
  .accordion input {
    display: none;
  }
  .box {
    position: relative;
    background: white;
      height: 64px;
      transition: all .15s ease-in-out;
  }
  .box::before {
      content: '';
      position: absolute;
      display: block;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      pointer-events: none;
      box-shadow: 
      0 -1px 0 #e5e5e5,0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24);
  }
  header.box, .box-admin {
    background: #a92323;
    font-family: "Lowvetica";
    font-size: 1em;
    letter-spacing: 0.1em;
    cursor: initial;
    box-shadow: 
    0 -1px 0 #e5e5e5,0 0 2px -2px rgba(0,0,0,.12),0 2px 4px -4px rgba(0,0,0,.24);
  }  
  header.box {
    top: 7.2em;
    z-index: -1;
  }
  header.box.select {
    height: 100px;
    top: -20px;
  }
  header.box.fr-select {
    height: 96px;
    display: flex;
    top: -1.01em;
    padding: 1em 0;
  }
  header .box-title {
    margin: 0;
    font-weight: normal;
    font-size: 16pt;
    color: white;
    cursor: initial;
    line-height: 1em;
  }
  .box-title {
    width: calc(100% - 20px);
    height: 64px;
    padding: 4px 20px 0px 12px;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: flex;
    align-items: center;
  }
  .box-content {
    width: calc(100% - 20px);
    padding: 30px 20px;
    font-size: 11pt;
    color: rgba(0,0,0,.54);
    display: none;
  }
  .box-close {
    position: absolute;
    height: 64px;
    width: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
    display: none;
  }
  input:checked + .box {
    height: auto;
    margin: 12px 0;
      box-shadow: 0 0 6px rgba(0,0,0,.16),0 6px 12px rgba(0,0,0,.32);
  }
  input:checked + .box .box-title {
    border-bottom: 1px solid rgba(0,0,0,.18);
  }
  input:checked + .box .box-content,
  input:checked + .box .box-close {
    display: inline-block;
  }
  .arrows section .box-title {
    padding-left: 44px;
    width: calc(100% - 64px);
  }
  .arrows section .box-title:before {
    position: relative;
    display: block;
    content: '\203a';
    font-size: 18pt;
    left: -20px;
    top: -2px;
    transition: transform .15s ease-in-out;
    color: rgba(0,0,0,.54);
  }
  input:checked + section.box .box-title:before {
    transform: rotate(90deg);
  }

  


  @media screen and (max-width: 50em) {
  .menu{
      font-size: .8em;
  }
  }




  /* Dropdown */

  
/* Dropdown menu css */


.dropdown {
    position: relative;
    width: 150px;
    height: 40px;
    /* left: 25%; */
    margin-left: auto;
    margin-right: auto;
    font-family: "Parisienne";
    font-size: 1.4em;
    z-index: -1;
}
.dropdown2 {
    position: absolute;
    width: 150px;
    height: 40px;
    right: 16px;
    top: 4px;
    font-family: "Parisienne";
    font-size: 1.4em;
}

.dropdown::before, .dropdown2::before {
    content: "";
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1000;
    width: 8px;
    height: 8px;
    border: 2px solid #333;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    border-top: var(--myVar);
    border-right: var(--myVar);
    transform: rotate(-45deg);
    transition: 0.5s;
    pointer-events: none;
}

.dropdown.active::before, .dropdown2.active::before {
    top: 22px;
    transform: rotate(-225deg);
}

.dropdown input, .dropdown2 input {
    position: absolute;
    top: 8px;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background: #fff;
    font-size: 1.2em;
    border: outset;
    outline: none;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    padding: 6px 8px 6px 8px;
    border-radius: 10px;
    font-family: "Parisienne";
}

.dropdown .options, .dropdown2 .options {
    position: absolute;
    top: 50px;
    width: 100%;
    background: #fff;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    overflow: hidden;
    display: none;
}

.dropdown.active .options, .dropdown2.active .options {
    display: block;
}

.dropdown .options div, .dropdown2 .options div {
    padding: 8px 10px;
    cursor: pointer;
}

.dropdown .options div:hover, .dropdown2 .options div:hover {
    background: #a92323;
    color: #fff;
}



.nonactive {
  display: none;
}


/* Button */



.button-68 {
  appearance: none;
  backface-visibility: hidden;
  background-color: rgb(84, 126, 57);
  border-radius: 8px;
  border-style: none;
  box-shadow: rgba(39, 174, 96, .15) 0 4px 9px;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: Inter,-apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
  font-weight: 600;
  letter-spacing: normal;
  outline: none;
  overflow: hidden;
  padding: 6px 6px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transform: translate3d(0, 0, 0);
  transition: all .3s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: top;
  white-space: nowrap;
}

.button-68:hover {
  background-color: #1e8449;
  opacity: 1;
  transform: translateY(0);
  transition-duration: .35s;
}

.button-68:active {
  transform: translateY(2px);
  transition-duration: .35s;
}

.button-68:hover {
  box-shadow: rgba(39, 174, 96, .2) 0 6px 12px;
}

.button-68.qheaderactive {
  background-color: #1a6d3c;
  opacity: 1;
  transform: translateY(0);
  transition-duration: .35s;
  box-shadow: rgba(39, 174, 96, .2) 0 6px 12px;
}

.button-68.info {
  height: fit-content;
  min-width: fit-content;
  vertical-align: middle;
}


.button-68.info#fr-info {
  padding: 2px;
  margin: 0;
  border-radius: 4px;
}
.button-68.info#fr-info img {
  height: 20px;
  width: 20px;
}

.button-68.select {
  padding-left: 24px;
  padding-right: 24px;
  font-size:1.2em;
  height: 100%;
  width: 100%;
  display: inline-grid;
  align-items: center;
}

.button-68.select-save, .button-68.select-save-fr {
  margin-top: 10px;
  padding-left: 18px;
  padding-right: 18px;
  font-size:1.2em;
  height: 100%;
  display: inline-grid;
  align-items: center;
  background: #a92323;
}

.button-68.select-save:hover, .button-68.select-save-fr:hover {
  background: #741919;
}

.button-68.select-save-fr {
  margin-top: 0px;
}

.button-68.finalrose {
  border-style: solid;
  border-color: gray;
  background-color: darkgray;
  border-width: medium;
  box-shadow: rgba(157, 168, 162, 0.15) 0 4px 9px;
  display: flex; 
  padding: 0; 
  border-radius: 100%; 
  margin-left:16px; 
  width: 54px; 
  height: 54px;
  white-space: normal;
  font-size: 0.8em;
}
.button-68.finalrose:hover {
  background-color: rgb(139, 139, 139);
  box-shadow: rgba(157, 168, 162, .45) 0 8px 18px;
}


.selection-panel {
  display: flex;
  flex-direction: row;
}

.current-panel {
  padding-top: 12px;
}
.current-panel > div, .current-panel-text {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.2em;
}

.selection-text {
  font-size: 1.1em;
  font-weight: 600;
  padding: 12px;
  min-width: fit-content;
  display: flex;
  align-items: center;
}



/* Overlay */


/*==================================== Our Modal Window styles ====================*/
 .modal {
	 display: flex;
   align-items: center;
}
 .modal.select {
  float: right;
  width: 100%;
}

 .modal > label {
  vertical-align: middle;
	 transition: all 0.55s;
}
 .modal > label:hover {
	 transform: scale(0.97);
}
 .modal__overlay {
	 background: rgba(255, 255, 255, 0.7);
	 bottom: 0;
	 left: 0;
	 position: fixed;
	 right: 0;
	 text-align: center;
	 text-shadow: none;
	 top: 0;
	 z-index: 600;
}
 .modal__wrap, .modal__wrap-fr, .modal__wrap-info {
	 padding: 1em 0;
   overflow: hidden;
	 position: relative;
	 margin: 0;
   height: 70%;
	 width: 90%;
   color: black;
   border: solid 1px #555;
   background-color: #f7daac;
   box-shadow:  0 0 10px  rgba(0,0,0,0.6);
   -moz-box-shadow: 0 0 10px  rgba(0,0,0,0.6);
   -webkit-box-shadow: 0 0 10px  rgba(0,0,0,0.6);
   -o-box-shadow: 0 0 10px  rgba(0,0,0,0.6);
   border-radius: 16px;
}

 .modal__wrap.select, .modal__wrap-fr.select, .modal__wrap-info.select {
	 padding: 1em 0;
	 position: relative;
	 margin: 0;
   height: 90%;
	 width: 95%;
   color: black;
   border: solid 1px #555;
   background-color: white;
   box-shadow:  0 0 10px  rgba(0,0,0,0.6);
   -moz-box-shadow: 0 0 10px  rgba(0,0,0,0.6);
   -webkit-box-shadow: 0 0 10px  rgba(0,0,0,0.6);
   -o-box-shadow: 0 0 10px  rgba(0,0,0,0.6);
   border-radius: 16px;
}
 @media (min-width: 50em) {
	 .modal__wrap, .modal__wrap-fr, .modal__wrap-info {
		 padding: 1.75em;
	}
}
 @media (min-height: 37.5em) {
	 .modal__wrap, .modal__wrap-fr, .modal__wrap-info {
		 left: 50%;
		 position: absolute;
		 top: 70%;
		 transform: translate(-50%, -80%);
	}
  .modal__wrap.select, .modal__wrap-fr.select, .modal__wrap-info.select {
    left: 50%;
    position: absolute;
    top: 75%;
    transform: translate(-50%, -80%);
 }
}
 .modal__wrap label, .modal__wrap-fr label, .modal__wrap-info label.x {
	 border-radius: 50%;
	 cursor: pointer;
	 display: inline-block;
	 height: 1.5em;
	 line-height: 1.5;
	 position: absolute;
	 right: 0.5em;
	 top: 0.5em;
	 width: 1.5em;
   font-size: 1.2em;
}
 .modal__wrap h2,  .modal__wrap-fr h2,  .modal__wrap-info h2, .admin-page h2, .modal__wrap-info label {
	 margin-bottom: 1.5em;
	 text-transform: uppercase;
   position: relative;
   top: 16px;
   font-family: "Lowvetica";
   line-height: 0.9em;
   font-size: 1.5em;
   padding: 0px 28px;
}
.modal__wrap h2.select, .modal__wrap-info h2.select {
  top: calc(40% - 0.45em + 16px);
}
.modal__wrap-info label {
  top: 0px;
  padding-bottom: 6px;
}
 .modal__wrap p, .modal__wrap-info p, .modal__wrap-info input {
	 text-align: justify;
   position: relative;
   top: 24px;
   padding: 4px 20px;
   line-height: 1em;
   font-size: 1.4em;
} 
.modal__wrap-info input, .modal__wrap-info textare {
  line-height: 1.4em;
  margin: 6px 0px 8px 0px;
  border-color: lightgray;
  border-radius: 0.2em;
  border-width: 1px;
  border-style: ridge;
  width: 80%;
} 
.modal__wrap-fr p {
  position: relative;
  top: 0;
  margin: 0;
  padding: 0;
  line-height: 1.1em;
  font-size: 1.1em;
}
.modal_wrap p {
  top: 0px !important;
  font-size: 0.8em;
}
 .modal input:focus ~ label {
	 transform: scale(0.97);
}
 input {
	 position: absolute;
	 top: -10000px;
}
 .modal__overlay {
	 opacity: 50;
	 transform: scale(0);
	 transition: all 0.75s cubic-bezier(0.2, -0.2, 0.2, 1);
	 z-index: -100;
}
 input:checked ~ .modal__overlay {
	 opacity: 1;
	 transform: scale(1);
	 z-index: 800;
}

 #modal__desc.select,  #modal__desc.select > p,
 #modal__desca.select,  #modal__desca.select > p {
  font-size: 1em;
  text-align: unset;
  top: unset;
 }

 #modal__desc.select,  #modal__desca.select {
  font-size: 1em;
  text-align: unset;
  position: relative;
  top: 24px;
 }
 #modal__desc.fr-select,  #modal__desca.fr-select {
  top: 0;
  flex: 0 0 auto;
 }
 


.fr-text span p {
  margin-top: 6px;
  font-size: 1.02rem;
  font-weight: 600;
}




/* Select boxes */

.app {
  max-width: 320px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  overflow: auto;
  max-height: calc(100% - 300px);
  /* min-height: max-content; */
}

.app i {
  font-size: 80px;
}
.app.finalrose {
  font-size: 0.8em;
  max-width: unset;
  max-height: unset;
  min-height: unset;
  padding: 0px 24px;
}
.app.finalrose.fr-text {
  flex: 0 0 auto;
}
.app.finalrose.fr-select {
  flex: 1 1 auto;
  margin: 24px;
  padding: 0;
}

article {
  position: relative;
  width: 140px;
  height: 120px;
  margin: 5px;
  float: left;
  border-radius: 8px;
  border: 6px outset;
  box-sizing: border-box;
}
article.fr-select {
  width: 100px;
  height: unset;
  max-height: 200px;
}

article div {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1em;
  padding: 0px 6px;
  transition: .5s ease;
}

article input {
  display: unset !important;
  position: absolute;
  top: 0;
  left: 0;
  width: 140px;
  height: 120px;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
article.fr-select input {
  width: 100%;
  height: 100%;
}

article input[type=checkbox]:checked ~ div, article input[type=radio]:checked ~ div {
  background-color: #f7daac;
  border-style: inset;
}



/* Versus Points */

.versus-header {
  display: flex;
  flex-direction: row;
  text-align: center;
  background-color: white;
  border: outset;
  border-radius: 10px;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
  margin: 6px 6px 0px 6px;
  font-size: 1.2em;
  font-weight: 900;
  font-family: "Lowvetica";
  line-height: 1.3em;
  letter-spacing: 0.1em;
}


.versus-button {
  margin: 6px 26px 0px 26px;
  font-size: 1.15em !important;
  width: calc(100% - 58px);
}
.stats-button {
  margin: 6px 5% 0px 5%;
  padding: 10px 4px 10px 4px;
  font-size: 1.15em !important;
  width: 90%;
  color: black;
  justify-content: left;
  display: flex;
  flex-direction: row;
  text-align: center;
  background: white;
  background: -webkit-linear-gradient(to left, #f7daac, white);  
  background: linear-gradient(to left, #f7daac, white);
  border: outset;
  border-radius: 10px;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
  font-weight: 900;
  font-family: "Lowvetica";
  letter-spacing: 0.1em;
}
.stats-button > p {
  color: black;
  justify-content: left;
}



.versus-header > p:nth-child(1), .points-panel > div > form > section > p:nth-child(1) {
  padding: 0px 20px 0px 20px;
  width: 40%;
  display: flex;
  justify-content: center;
}
.versus-header > p:nth-child(3), .points-panel > div > form > section > p:nth-child(3) {
  width: 40%;
  padding: 0px 20px 0px 20px;
  display: flex;
  justify-content: center;
}
.versus-header > p:nth-child(1), .versus-header > p:nth-child(3) {
  padding-top: 2px;
  margin: auto;
}
.versus-header > p:nth-child(2) {
  width: 20%;
  display: flex;
  justify-content: center;
  font-family: "Parisienne";
  margin: auto;
}
.points-panel > div > form > section > p:nth-child(2) {
  width: 20%;
  display: flex;
  justify-content: center;
  text-align: center;
  margin: auto;
  font-size: 1.5em;
  font-weight: 700;

}


.versus > nav > section > .box-content {
  width: 100%;
  padding: 0px;
}

.versus > nav > section > .points-panel > div > form > section > p:nth-child(1),
.versus > nav > section > .points-panel > div > form > section > p:nth-child(3) {
  width: 40%;
  padding: 0px 40px 0px 40px;
}

.versus > nav > section > .points-panel > div > form > section > p:nth-child(1) > label,
.versus > nav > section > .points-panel > div > form > section > p:nth-child(3) > label {
  padding: 8px 0px;
}


.versus-choices {
  display: flex;
  flex-direction: row;
}

.user-choices, .opponent-choices {
  width: 50%;
}
.user-choices {
  padding-left: 18px;
  padding-right: 4px;
}

.versus-choices-line {
  content: "";
  background-color: rgb(161, 156, 156);
  position: absolute;
  width: 2px;
  height: calc(97% - 116px - 1em);
  left: 50%;
  padding-top: 2%;
  display: block;
}
.opponent-choices {
  padding-right: 18px;
  padding-left: 4px;
}

/* COLUMNS */

.col {
  display: block;
  float:left;
  margin: 1% 0 1% 1.6%;
}

.col:first-of-type { margin-left: 0; }

/* CLEARFIX */

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    zoom: 1;
    display: flex;
    flex-direction: row;
    width: 100%;
}

/* FORM */

.form .plan input, .form .payment-plan input, .form .payment-type input{
	display: none;
}

.form label{
	position: relative;
	color: #fff;
	background-color: #aaa;
	font-size: 26px;
	text-align: center;
  padding: 10px 0px;
	display: block;
	border: 3px solid transparent;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
  border-radius: 15%;
  width: 80%;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}

.form .plan input:checked + label, .form .payment-plan input:checked + label, .form .payment-type input:checked + label{
	border: 3px solid #585858;
	background-color: rgb(84, 126, 57);
}

.form .plan input:checked + label:after, form .payment-plan input:checked + label:after, .form .payment-type input:checked + label:after{
	content: "\2713";
	width: 40px;
	height: 40px;
	line-height: 40px;
	border-radius: 100%;
	border: 2px solid #585858;
	background-color: rgb(84, 126, 57);
	z-index: 1;
	position: absolute;
	top: -10px;
	right: -10px;
}





/* Standings */


.standings-container {
  display: flex;
  flex-direction: row;
  text-align: center;
  background-color: white;
  border: outset;
  border-radius: 10px;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
  margin: 6px;
  font-size: 1.3em;
  font-weight: 900;
  font-family: "Lowvetica";
  line-height: 1.3em;
  letter-spacing: 0.1em;
}

.standings > .accordion {
  position: fixed;
  height: 100%;
  padding-bottom: 300px;
  overflow: auto;
}

/*-------------------- Body --------------------*/

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}
/*-------------------- Leaderboard --------------------*/
ol {
  list-style: none;
}
.leaderboard {
  position: relative;
  top: calc(76px + 11.7rem + 24px);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  background: white;
  border-radius: 10px;
  box-shadow: 0 7px 30px rgba(62, 9, 11, .3);
}
.bottom-buffer {
  padding-bottom: 60px;
  top: 24px;
  position: relative;
}
.leaderboard h1 {
  font-size: 12px;
  color: black;
  padding: 18px 12px 18px 52px;
  display: flex;
  flex-direction: row;
  text-align: center;
}
.leaderboard h1 > p {
  margin-top: auto;
  margin-bottom: 0px;
}
.leaderboard h1 > p:nth-child(2) {
  margin-left: auto;
  margin-right: 0;
}
.leaderboard h1 > p:nth-child(3) {
  margin-right: 0;
}
.leaderboard h1 > p:not(:nth-child(1)) {
  width: 50px;
  text-align: right;
}
.leaderboard h1 svg {
  width: 25px;
  height: 26px;
  position: relative;
  top: 3px;
  margin-right: 6px;
  vertical-align: baseline;
}
.leaderboard ol {
  counter-reset: leaderboard;
}
.leaderboard ol li {
  position: relative;
  font-size: 17px;
  counter-increment: leaderboard;
  padding: 11px 12px 11px 42px;
  backface-visibility: hidden;
  transform: translateZ(0) scale(1, 1);
  display: flex;
  line-height: 16px;
}

.leaderboard-first::before, .leaderboard-second::before {
  /* content: counter(leaderboard); */
  content: '';
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  width: 31px;
  height: 32px;
  line-height: 42px;
  color: #416134;
  background: unset;
  background-image: url(images/first.png);
  background-size: 31px 32px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
}
.leaderboard-second::before {
  width: 28.5px;
  height: 26px;
  background-size: 28.5px 27px;
  line-height: 40px;
}
.leaderboard ol li:not(.leaderboard-first):not(.leaderboard-second)::before, .leaderboard-user:not(.leaderboard-first):not(.leaderboard-second)::before {
  /* content: counter(leaderboard); */
  position: absolute;
  z-index: 2;
  top: 15px;
  left: 15px;
  width: 24px;
  height: 24px;
  line-height: 26px;
  color: #416134;
  background: #fff;
  border-radius: 20px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
}
.leaderboard ol li mark, .leaderboard-user mark {
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 7px 0px 0px 6px;
  background: none;
  color: #fff;
}
.leaderboard ol li small, .leaderboard-user small {
  position: relative;
  z-index: 2;
  display: block;
  text-align: right;
  font-size: 15px;
  color: white;
  margin-right: 0;
  margin-top: 7px;
  min-width: 50px;
}
.leaderboard ol li img {
  margin: auto;
  z-index: 2;
}
.leaderboard ol li p:nth-child(2), .leaderboard-user p:nth-child(2) {
  margin-left: auto;
  margin-right: 0;
  margin-top: 0px;
  margin-bottom: 0px;
  color: white;
  z-index: 2;
}

.leaderboard ol li mark::before, .leaderboard ol li mark::after, .leaderboard-user mark::before, .leaderboard-user mark::after {
  content: '';
  position: absolute;
  z-index: 1;
  left: -9px;
  border-left: 10px solid transparent;
  transition: all 0.1s ease-in-out;
  opacity: 0;
}
.leaderboard ol li mark::after, .leaderboard-user mark::after {
  left: auto;
  right: -9px;
  border-left: none;
  border-right: 10px solid transparent;
}
.leaderboard ol li::after, .leaderboard-user::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease-in-out;
  opacity: 0;
}
/* 
.leaderboard ol li:nth-of-type(1), .leaderbboard-user {
  background: #354f31;
}
.leaderboard ol li:nth-of-type(1)::after, .leaderbboard-user {
  background: #354f31;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .08);
}
.leaderboard ol li:nth-of-type(1) mark::before, .leaderboard ol li:nth-of-type(1) mark::after {
  border-top: 10px solid #416134;
  bottom: -11px;
}

.leaderboard ol li:nth-of-type(2) {
  background: #416134;
}
.leaderboard ol li:nth-of-type(2)::after {
  background: #416134;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .08);
}
.leaderboard ol li:nth-of-type(2) mark::before, .leaderboard ol li:nth-of-type(2) mark::after {
  border-top: 6px solid #4d7337;
  bottom: -7px;
}

.leaderboard ol li:nth-of-type(3) {
  background: #547e39;
}
.leaderboard ol li:nth-of-type(3)::after {
  background: #547e39;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .11);
}
.leaderboard ol li:nth-of-type(3) mark::before, .leaderboard ol li:nth-of-type(3) mark::after {
  border-top: 2px solid #59823f;
  bottom: -3px;
}

.leaderboard ol li:nth-of-type(4) {
  background: #5d8443;
}
.leaderboard ol li:nth-of-type(4)::after {
  background: #5d8443;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .11);
}
.leaderboard ol li:nth-of-type(4) mark::before, .leaderboard ol li:nth-of-type(4) mark::after {
  border-top: 2px solid #5f8646;
  bottom: -3px;
}

.leaderboard ol li:nth-of-type(5) {
  background: #6d9056;
}
.leaderboard ol li:nth-of-type(5)::after {
  background: #6d9056;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .11);
}
.leaderboard ol li:nth-of-type(5) mark::before, .leaderboard ol li:nth-of-type(5) mark::after {
  border-top: 2px solid #74955e;
  bottom: -3px;
}

.leaderboard ol li:nth-of-type(6) {
  background: #7b9a66;
}
.leaderboard ol li:nth-of-type(6)::after {
  background: #7b9a66;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .11);
}
.leaderboard ol li:nth-of-type(6) mark::before, .leaderboard ol li:nth-of-type(6) mark::after {
  border-top: 2px solid #95ae85;
  bottom: -3px;
}

.leaderboard ol li:nth-of-type(7) {
  background: #b8c9ae;
}
.leaderboard ol li:nth-of-type(7)::after {
  background: #b8c9ae;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, .15);
}
.leaderboard ol li:nth-of-type(7) mark::before, .leaderboard ol li:nth-of-type(7) mark::after {
  top: -7px;
  bottom: auto;
  border-top: none;
  border-bottom: 6px solid #c5d3bd;
}

.leaderboard ol li:nth-of-type(8) {
  background: #d0dbc9;
}
.leaderboard ol li:nth-of-type(8)::after {
  background: #d0dbc9;
  box-shadow: 0 -2.5px 0 rgba(0, 0, 0, .12);
}
.leaderboard ol li:nth-of-type(8) mark::before, .leaderboard ol li:nth-of-type(8) mark::after {
  top: -9px;
  bottom: auto;
  border-top: none;
  border-bottom: 8px solid #d6e0d0;
}  */

.leaderboard ol li:last-child, .leaderboard ol li:last-child::after {
  border-radius: 0 0 10px 10px;
}
.leaderboard-user {
  z-index: 2;
  overflow: visible;
}
.leaderboard-user::after  {
  opacity: 1 !important;
  transform: scaleX(1.06) scaleY(1.03) !important;
}
.leaderboard-user mark::before,  .leaderboard-user mark::after {
  opacity: 1 !important;
  transition: all 0.35s ease-in-out !important;
}



/* Login form */



:root{  

  /* fonts size */
  --head: 3rem;
  --s_head: 1.6rem;
  --text: 1.125rem;
}

.login-container {
  height: 100%;
  background: white;
  background: -webkit-linear-gradient(to right, #f7daac, white);  
  background: linear-gradient(to right, #f7daac, white);
  display: flex;
  justify-content: center;
  align-items: center;
}
.admin-container{
  flex-direction: column;
  height: 100%;
  /* background: white;
  background: -webkit-linear-gradient(to right, #f7daac, white);  
  background: linear-gradient(to right, #f7daac, white); */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 8vh;
}

.center{
  margin: 3em;

}


.sign-up_box{
  border: 0;
  border-radius: 2em 2em 0 0;
  background-color: #979797;
  max-width: 500px;
  text-align: center;
  padding: .8em .6em .8em .6em;
  box-shadow: 9px 16px 20px 4px rgb(0 0 0 / 50%);
  
}


.heading{
  color: rgb(255, 255, 255);
  font-size: var(--head);
  margin-bottom: .3em;
}


.sign-up_box input{
  padding: 0.5em 0.3em 0.5em 0.8em;
  width: 85%;
  margin: 0.4em 0;
  outline: none;
  border: 0;
  border-radius: 5px;
  font-size: var(--text);
  position: static;
  text-align: center;
}

.sign-up_box input:focus{
  outline: none;
}

.sign-up_box input::placeholder{
  text-align: center;
  color: rgb(66, 65, 65)
}

.name{
  max-width: 42% !important;
}

.btn {
  display: block;
  background-color: #a92323;
  color: black;
  border: 0;
  outline: none;
  width: 100%;
  font-size: var(--s_head);
  padding: 0.8em 0.8em;
  line-height: 0.8em;
  font-family: "Lowvetica";
  letter-spacing: 0.1em;
  box-shadow: 9px 16px 20px 4px rgb(0 0 0 / 50%);
  
}
.btn {
  border-radius: 0 0 3em 3em;
}
.btn2 {
  border-radius: 3em 3em 0 0;
}
.btn3 {
  border-radius: 0;
}

  .btn:hover, .btn2:hover{
    background-color: #f7eaeb;
    cursor: pointer;
  }
  @media (hover: none) {
    .btn:not(.btnshort):hover, .btn2:hover {
      background-color: #a92323;
      cursor: pointer;
    }
  }
  .btn:active, .btn.activebtn, .btn2:active {
    background-color: #f7eaeb;
    cursor: pointer;
  }

  .btn.held {
    background-color: #b98a8e !important;
    cursor: inherit;
  }

/* admin layout */

.admin-label, .admin-label-label {
  font-size: var(--s_head);
  line-height: 0.8em;
  font-family: "Lowvetica";
  letter-spacing: 0.1em;
  background-color: #a92323;
  color: black;
  opacity: 0.9;
  border-radius: 3em;
  padding: 0.5em 1em;
}
.admin-label {
  font-size: var(--s_head);
  line-height: 0.8em;
}
.admin-label-label {
  font-size: 12px;
  line-height: 0.6em;
  top: -12px;
}



/* Admin Page */

.admin-page {
  background-color: white;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  display: none;
  overflow: auto;
}
.admin-page div {
  background-color: white;
}

.admin-page.active {
  display: flex;
  flex-direction: column;
}

.admin-qheader {
  background: inherit !important;
  height: 100%;
  display: flex;
  flex-direction: column;
  width: fit-content;
  margin:auto;
}
.admin-qheader-week {
  background: inherit !important;
  display: flex;
  flex-direction: row;
  margin:auto;
  margin-top: 4px;
  margin-bottom: 12px;
}
.admin-qheader > button {
  padding: 2px 4px;
  margin: 3px 0;
}
div.btn-admin-qheader {
  
  appearance: none;
  backface-visibility: hidden;
  background-color: rgb(84, 126, 57);
  border-radius: 8px;
  border-style: none;
  box-shadow: rgba(39, 174, 96, .15) 0 4px 9px;
  box-sizing: border-box;
  color: #fff;
  display: inline-block;
  font-family: Inter,-apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
  font-weight: 600;
  letter-spacing: normal;
  outline: none;
  overflow: hidden;
  padding: 6px 20px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transform: translate3d(0, 0, 0);
  transition: all .3s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: top;
  white-space: nowrap;
}


.box-admin {
  z-index: 1;
  display: flex;
  position: relative;
  padding-top: 10px;
  flex-direction: column;
}

.btn-close {
  position: absolute;
  cursor: pointer;
  top: 12px;
  right: 16px;
  background: transparent;
  font-size: larger;
}

.points-input, .buzzword-input {
  position: relative;
  top: unset;
  bottom: unset;
  margin: auto;
  width: 40px;
  height: 40px;
  color: rgba(0,0,0,.54);
  font-weight: 600;
  font-size: 1.2em;
  text-align: center;
  border: #1d1d27;
  border-style: outset;
  border-radius: 1rem;
}

.points-input-container {    
  padding: 0px 12px 0px 6px;
}


.admin-usercounts {
  margin: auto;
  font-size: x-large;
}
.admin-usercounts > table > tbody > tr > th {
  text-align: left;
  padding: 4px 80px 4px 0px;
}
.admin-buzzwords {
  overflow-y: scroll;
  font: smaller;
  margin: 2rem;
}

.admin-addbuzzword > input {
width: 40%;
margin-top: 20px;
padding: 6px;
}



.checkbox-wrapper-19 {
  top: unset;
  position: absolute;
  right: 20px;
  
  box-sizing: border-box;
  --background-color: #fff;
  --checkbox-height: 25px;
}

@-moz-keyframes dothabottomcheck-19 {
  0% {
    height: 0;
  }
  100% {
    height: calc(var(--checkbox-height) / 2);
  }
}

@-webkit-keyframes dothabottomcheck-19 {
  0% {
    height: 0;
  }
  100% {
    height: calc(var(--checkbox-height) / 2);
  }
}

@keyframes dothabottomcheck-19 {
  0% {
    height: 0;
  }
  100% {
    height: calc(var(--checkbox-height) / 2);
  }
}

@keyframes dothatopcheck-19 {
  0% {
    height: 0;
  }
  50% {
    height: 0;
  }
  100% {
    height: calc(var(--checkbox-height) * 1.2);
  }
}

@-webkit-keyframes dothatopcheck-19 {
  0% {
    height: 0;
  }
  50% {
    height: 0;
  }
  100% {
    height: calc(var(--checkbox-height) * 1.2);
  }
}

@-moz-keyframes dothatopcheck-19 {
  0% {
    height: 0;
  }
  50% {
    height: 0;
  }
  100% {
    height: calc(var(--checkbox-height) * 1.2);
  }
}

.checkbox-wrapper-19 input[type=checkbox] {
  display: none;
}

.checkbox-wrapper-19 .check-box {
  height: var(--checkbox-height);
  width: var(--checkbox-height);
  background-color: transparent;
  border: calc(var(--checkbox-height) * .1) solid #000;
  border-radius: 5px;
  position: relative;
  display: inline-block;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-transition: border-color ease 0.2s;
  -o-transition: border-color ease 0.2s;
  -webkit-transition: border-color ease 0.2s;
  transition: border-color ease 0.2s;
  cursor: pointer;
}
.checkbox-wrapper-19 .check-box::before,
.checkbox-wrapper-19 .check-box::after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  height: 0;
  width: calc(var(--checkbox-height) * .2);
  background-color: #34b93d;
  display: inline-block;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -o-transform-origin: left top;
  -webkit-transform-origin: left top;
  transform-origin: left top;
  border-radius: 5px;
  content: " ";
  -webkit-transition: opacity ease 0.5;
  -moz-transition: opacity ease 0.5;
  transition: opacity ease 0.5;
}
.checkbox-wrapper-19 .check-box::before {
  top: calc(var(--checkbox-height) * .72);
  left: calc(var(--checkbox-height) * .41);
  box-shadow: 0 0 0 calc(var(--checkbox-height) * .05) var(--background-color);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.checkbox-wrapper-19 .check-box::after {
  top: calc(var(--checkbox-height) * .37);
  left: calc(var(--checkbox-height) * .05);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.checkbox-wrapper-19 input[type=checkbox]:checked + .check-box,
.checkbox-wrapper-19 .check-box.checked {
  border-color: #34b93d;
}
.checkbox-wrapper-19 input[type=checkbox]:checked + .check-box::after,
.checkbox-wrapper-19 .check-box.checked::after {
  height: calc(var(--checkbox-height) / 2);
  -moz-animation: dothabottomcheck-19 0.2s ease 0s forwards;
  -o-animation: dothabottomcheck-19 0.2s ease 0s forwards;
  -webkit-animation: dothabottomcheck-19 0.2s ease 0s forwards;
  animation: dothabottomcheck-19 0.2s ease 0s forwards;
}
.checkbox-wrapper-19 input[type=checkbox]:checked + .check-box::before,
.checkbox-wrapper-19 .check-box.checked::before {
  height: calc(var(--checkbox-height) * 1.2);
  -moz-animation: dothatopcheck-19 0.4s ease 0s forwards;
  -o-animation: dothatopcheck-19 0.4s ease 0s forwards;
  -webkit-animation: dothatopcheck-19 0.4s ease 0s forwards;
  animation: dothatopcheck-19 0.4s ease 0s forwards;
}

/* For small mobile device */

@media (min-width:100px) and (max-width:250px){
  :root{  
      --head: 1.5rem;
      --s_head: 1rem;
      --text: .8rem;
  }

  
  .sign-up_box{
      padding: .4em;
      max-width: 250px;
  }

  .name{
      max-width: 100% !important;
      
  }

}

/* For mobile device  */

@media (min-width:251px) and (max-width: 500px){

  
  .name{
      max-width: 100% !important;
      
  }
}







/* shake */


@keyframes shake {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(1em);
  }
  40% {
    transform: translate(-1em);
  }
  60% {
    transform: translate(1em);
  }
  80% {
    transform: translate(-1em);
  }
  100% {
    transform: translate(0);
  }
}


.center.shake {
  animation: shake 0.5s infinite;
}



/*  Other Matchup Button */

.other-match-button {
  width:100%; 
  height:100%; 
  justify-content:center; 
  display:flex; 
  padding-bottom:2em;
}
.other-match-button > label {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}


/*   Matchup Swap Buttons */


/* CSS */
.button-80 {
  cursor: pointer;
  transform: translateZ(0) scale(1);
  transition: transform .2s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-80 > p {
  color: black;
}

.button-80:not(:disabled):hover {
  transform: scale(1.05);
}

.button-80:not(:disabled):hover:active {
  transform: translateY(2px);
  transition-duration: .35s;
}

.button-80:focus {
  outline: 0 solid transparent;
}

.button-80:focus:before {
  content: "";
  left: calc(-1*.375rem);
  pointer-events: none;
  position: absolute;
  top: calc(-1*.375rem);
  transition: border-radius;
  user-select: none;
}

.button-80:focus:not(:focus-visible) {
  outline: 0 solid transparent;
}

.button-80:focus:not(:focus-visible):before {
  border-width: 0;
}

.button-80:not(:disabled):active {
  transform: translateY(2px);
  transition-duration: .35s;
}




/* Back Button */

.back-button {
  
  position: relative;
  width: 150px;
  height: 40px;
  top: 8px;
  font-family: "Parisienne";
  font-size: 1.4em;
  cursor: pointer;
  background: white;
  background: -webkit-linear-gradient(to left, #f7daac, white);  
  background: linear-gradient(to left, #f7daac, white);
  font-size: 1.2em;
  border: outset;
  outline: none;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  padding: 6px 8px 6px 8px;
  border-radius: 10px;
  font-family: "Parisienne";
  color: black;
  
}


/* Map */


#map {
  height: 100%;
}

.marker-pin {
  width: 45px;
  height: 45px;
  border-radius: 50% 50% 50% 0;
  background: #a92323;
  position: absolute;
  transform: rotate(-45deg);
  left: 50%;
  top: 50%;
  margin: -20px 0 0 -20px;
}
.afterplace {
    content: '';
    width: 39px;
    height: 39px;
    margin: 3px 0 0 3px;
    background: #fff;
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
 }


 .custom-div-icon {
  top: -35px;
}

.custom-div-icon .img-cont {
   position: absolute;
   text-align: center;
   z-index: 100; 
   transform:rotate(45deg);
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   height: inherit;
   width: inherit;
}


.custom-div-icon .img-cont img {
  height: inherit;
}



.H_ib_body {
  background: unset !important;
  bottom: 85.4px !important;
  margin-right: 0 !important;
  margin-bottom: 2px !important;
  right: 50% !important;
  position: relative !important;
  background-color: #a92323 !important;
  width: max-content !important;
  cursor: default !important;
  z-index: 1;
}
.H_ib_tail {
  display: none !important;
}
.H_ib_close {
  display: none !important;
}
.H_ib {
  height: 0 !important;
}
.H_ib_content p {
  margin: 0 !important;
}
.H_ib_content {
  font-size: 12px !important;
  color: white !important;
  line-height: unset !important;
  padding: 4px !important;
  margin: 0 !important;
  text-align: center;
}




/* Dropping Dots */

#stage, .stage {
   background-color: white;
   width: 50%;
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   bottom: -46px;
 }
 
 #text-raining-text {
    color: black;
    font-family: Arial, sans-serif;
    font-size:24px;
    position: relative;
    width: 100%;
    text-align: center;
 }

/* Timeline container */
.timeline {
  width: 80%;
  margin-left: 10%;
  display: grid;
}
/* Card container */
.card {
  position: relative;
  width: 100%;
}

/* setting padding based on even or odd */
.card {
  padding: 0px 50px 0 50px;
  min-height: 198px;
}
/* Global ::before */
.card::before {
  content: "";
  position: absolute;
  width: 51%;
}

/* Setting the border of top, bottom, left */



.card:nth-child(odd)::before {
  left: 0px;
  top: -4.5px;
  bottom: -4.5px;
}

/* Setting the top and bottom to "-5px" because earlier it was out of a pixel in mobile devices */
@media only screen and (max-width: 400px) {
  .card:nth-child(odd)::before {
    top: -5px;
    bottom: -5px;
  }
}

/* Setting the border of top, bottom, right */
.card:nth-child(even)::before {
  right: 0;
  top: -0.5px;
  bottom: 0;
}
.card:nth-child(even) > .info-timeline {
  padding-bottom: 50px;
}

/* Removing the border if it is the first card */
.card:first-child::before {
  border-top: 0;
  border-top-left-radius: 0;
}

/* Removing the border if it is the last card  and it's odd */
.card:last-child:nth-child(odd)::before {
  border-bottom: 0;
  border-bottom-left-radius: 0;
}

/* Removing the border if it is the last card  and it's even */
.card:last-child:nth-child(even)::before {
  border-bottom: 0;
  border-bottom-right-radius: 0;
}

/* Information about the timeline */
.info-timeline {
  display: flex;
  flex-direction: row;
  background: white;
  color: gray;
  position: relative;
  overflow: hidden;
  padding-bottom: 50px;
  top:50px;
  z-index: -1;
}

/* Title of the card */
.title {
  color: rgb(84, 126, 57);
  position: relative;
}

/* Timeline dot  */
.title::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 999px;
  border: 3px solid rgb(84, 126, 57);
}

/* text right if the card is even  */
.card:nth-child(even) > .info-timeline > .title {
  text-align: right;
}

/* setting dot to the left if the card is odd */
.card:nth-child(odd) > .info-timeline > .title::before {
  left: -45px;
}

/* setting dot to the right if the card is odd */
.card:nth-child(even) > .info-timeline > .title::before {
  right: -45px;
}



.img-cont-bubble {
  position: relative;
  height:50px;
  width:50px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
}


.img-cont-bubble img {
 height:50px;
}

.stage > p {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  color: white;
  font-weight: 700;
  border: 3px solid rgb(84, 126, 57);
  background-color: rgb(84, 126, 57);
  border-radius: 20%;
  padding: 4px;
  top: 4px;
}


.squiggle {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: draw 8s linear forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

#svg {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  top: 0;
}
.svg {
  position: relative;
  grid-row: 1;
  grid-column: 1;
  height: calc(100% + 46px);
  left: 5%;
  width: 90%;
}



/* Kissed and Cried */

.timeline-kc {
  width: 70%;
  margin-left: 15%;
  display: grid;
}
.info-title {
  writing-mode: vertical-rl;
  position: absolute;
  height: 80%;
  justify-content: center;
  align-items: end;
  font-size: 24px;
  font-weight: 600;
  top: 10%;
  display: flex;
  width: 50px;
}
.info-title p {
  display: flex;
  height: fit-content;
  text-align: center;
}
.card:nth-child(odd) .info-title {
  left: -30px;
  transform: rotate(180deg);
}
.card:nth-child(even) .info-title {
  right: -30px;
}
.card-kc {
  min-height: 248px;
}










#popup_box, #popup_box_info
{
 visibility:hidden;
 display:none;
 flex-direction: column;
 background-color:#BDBDBD;
 position:fixed;
 left:8%;
 right:8%;
 border-radius:10px;
 border: solid 1px #555;
 box-shadow:0px 0px 10px 0px grey;
 z-index: 2;
 padding: 5px;
}
#popup_box {
  top:36%;
}
#popup_box_info {
  top:16%;
}
#popup_box input, #popup_box_info input 
{
  position: unset;
  top: unset;
}
#popup_box p, #popup_box_info p 
{
  top: unset;
}
#popup_box #cancel_button, #popup_box_info #cancel_button_info
{
 float:right;
 margin-left: auto;
 margin-right: 0;
 background-color:grey;
 border:none;
 color:white;
 padding:2px;
 height:22px;
 width:22px;
 border-radius:100%;
 border:1px solid #424242;
 box-shadow:0px 0px 10px 0px grey;
 cursor:pointer;
}
#popup_box #info_text, #popup_box_info #info_text
{
 font-size: 1.1em;
 color: black;
 background-color: white;
 padding: 10px;
 margin: 10px 0px;
}
#popup_box #close_button, #popup_box_info #close_button_info
{
 margin:auto;
 padding:0px;
 width:70px;
 height:30px;
 line-height:30px;
 font-size:16px;
 background-color:grey;
 color:white;
 border:none;
 border-radius:2px;
 cursor:pointer;
}

.fr-header {
  font-size: 1.1em;
  text-transform: uppercase;
  position: relative;
  font-family: "Lowvetica";
  line-height: 1.1em;
  padding: 0px 28px;
}

.fr-bubblediv, .fr-bubblediv-std {
  margin: auto; 
  overflow: hidden;  
  position: relative;
  border-style: solid; 
  border-color: #a92323; 
  border-width: medium;
  box-shadow: rgba(157, 168, 162, 0.15) 0 4px 9px;
  display: flex; 
  padding: 0; 
  border-radius: 100%; 
  white-space: normal;
  font-size: 0.8em;
}
.fr-bubblediv {
  width: 54px; 
  height: 54px;
}
.fr-bubblediv-std {
  width: 30px; 
  height: 30px;
}
.fr-bubblebubble, .fr-bubblebubble-std {
  color: white;
  text-align: center;
  height: fit-content;
  width: fit-content;
  min-width: 20px;
  font-size: 0.6rem;  
}
.fr-bubblebubble {
  left: calc(100% - 14px);
  position: absolute;
  padding: 4px;
  top: -3px;
}
.fr-bubblebubble-std {
  position: relative;
  margin-top: auto;
  margin-bottom: 0;
  left: -5px;
}
.fr-bubblebubble > div, .fr-bubblebubble-std > div {
  background-color: #a92323;
  border-radius: 8px;
  padding: 0px 4px;
  width: fit-content;
}
.fr-bubblebubble > div {
  line-height: 0.8rem;
  font-size: 0.8rem;
}
.fr-bubblebubble-std > div {
  line-height: 0.7rem;
  font-size: 0.7rem;
}


.finalrose-empty-std {
  min-width: 50px;
  z-index: 2;
}
.finalrose-empty-std > div {
  border-style: solid;
  border-color: gray;
  background-color: darkgray;
  border-width: medium;
  box-shadow: rgba(157, 168, 162, 0.15) 0 4px 9px;
  display: flex; 
  padding: 0; 
  border-radius: 100%; 
  width: 30px;
  height: 30px;
  white-space: normal;
  font-size: 0.8em;
  margin-left: 0;
  justify-content: center;
  align-items: center;
  color: white;
}













.visuallyhidden {
  position: absolute;
  z-index: -1;
  right: 0;
  opacity: 0;
  
}


.carde-carousel {
  --carde-width: 80%;
  --carde-max-width: 280px;
  --carde-height: 350px;
  --carousel-min-width: 600px;
  z-index: 1;
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: var(--carde-height);
  min-width: var(--carousel-min-width);
  transition: filter .3s ease;
}

@media screen and (max-width: 640px) {
  .carde-carousel {
    margin-left: calc((100vw - var(--carousel-min-width) - 40px) / 2)
  }
}

.carde-carousel.smooth-return {
  transition: all .2s ease;
}

.carde-carousel .carde {
  background: whitesmoke;
  width: var(--carde-width);
  max-width: var(--carde-max-width);
  text-align: center;
  padding: 1em;
  min-width: 250px;
  height: var(--carde-height);
  position: absolute;
  margin: 0 auto;
  color: rgba(0,0,0,.5);
  transition: inherit;
  -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
  box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
  border-radius: 1em;
  filter: brightness(.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.carde.highlight {
  filter: brightness(1)
}


.carde:nth-of-type(1) .image-container {
    background-image: url("https://static.addtoany.com/images/dracaena-cinnabari.jpg");
}
 
.carde:nth-of-type(2) .image-container {
  background-image: url("https://www.w3schools.com/w3css/img_lights.jpg")
}

.carde:nth-of-type(3) .image-container {
  background-image: url("https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500")
}
.carde:nth-of-type(4) .image-container {
  background-image: url("https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500")
}
.carde:nth-of-type(5) .image-container {
  background-image: url("https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg")
}



.image-container {
  width: 8em;
  height: 8em;
  position: relative;
  background-size: cover;
  margin-bottom: 2em;
  border-radius: 100%;
  padding: 1em;
  -webkit-box-shadow: inset 0px 0px 17px 0px rgba(0,0,0,0.3);
-moz-box-shadow: inset 0px 0px 17px 0px rgba(0,0,0,0.3);
box-shadow: inset 0px 0px 17px 0px rgba(0,0,0,0.3);
  
}

.image-container::after {
  content: "";
  display: block;
  width: 120%;
  height: 120%;
  border: solid 3px rgba(0,0,0,.1);
  border-radius: 100%;
  position: absolute;
  top: calc(-10% - 3px);
  left: calc(-10% - 3px);
}











/* Contestant Info */


.gallery {
  position: absolute;
  width: 100%;
  height: 100vh;
  color: #949494;
  overflow: hidden;
  visibility:hidden;
}

.cards {
  position: absolute;
  width: 300px;
  height: 150px;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cards li {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 300px;
  height: 150px;
  text-align: center;
  line-height: 150px;
  font-size: 4rem;
  font-family: sans-serif;
  background-color: green;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0.8rem;
}

.actions {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
}

button.stat {
  display:inline-block;
  outline: none;
  border: none;
  padding: 8px 14px;
  background: #414141;
  background-image: -webkit-linear-gradient(top, #575757, #414141);
  background-image: -moz-linear-gradient(top, #575757, #414141);
  background-image: -ms-linear-gradient(top, #575757, #414141);
  background-image: -o-linear-gradient(top, #575757, #414141);
  background-image: linear-gradient(to bottom, #575757, #414141);
  text-shadow: 0px 1px 0px #414141;
  -webkit-box-shadow: 0px 1px 0px 414141;
  -moz-box-shadow: 0px 1px 0px 414141;
  box-shadow: 0px 1px 0px 414141;
  color: #ffffff;
  text-decoration: none;
  margin: 0 auto 10px;
  -webkit-border-radius: 4;
  -moz-border-radius: 4;
  border-radius: 4px;
  padding: 12px 25px;
  font-family: "Signika Negative", sans-serif;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
  line-height: 5px;
}

button.stat:hover {
  background: #57a818;
  background-image: -webkit-linear-gradient(top, #57a818, #4d9916);
  background-image: -moz-linear-gradient(top, #57a818, #4d9916);
  background-image: -ms-linear-gradient(top, #57a818, #4d9916);
  background-image: -o-linear-gradient(top, #57a818, #4d9916);
  background-image: linear-gradient(to bottom, #57a818, #4d9916);
  text-shadow: 0px 1px 0px #32610e;
  -webkit-box-shadow: 0px 1px 0px fefefe;
  -moz-box-shadow: 0px 1px 0px fefefe;
  box-shadow: 0px 1px 0px fefefe;
  color: #ffffff;
  text-decoration: none;
}

button.stat {
  font-size: 12px;
  font-weight: 400;
}


.drag-proxy {
  visibility: hidden;
  position: absolute;
}






.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
}

.animated2 {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
}



@-webkit-keyframes bounceInRight {
  0%,60%,75%,90%,to {
      -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
      animation-timing-function: cubic-bezier(.215,.61,.355,1)
  }

  0% {
      opacity: 0;
      -webkit-transform: translate3d(3000px,0,0);
      transform: translate3d(3000px,0,0)
  }

  60% {
      opacity: 1;
      -webkit-transform: translate3d(-25px,0,0);
      transform: translate3d(-25px,0,0)
  }

  75% {
      -webkit-transform: translate3d(10px,0,0);
      transform: translate3d(10px,0,0)
  }

  90% {
      -webkit-transform: translate3d(-5px,0,0);
      transform: translate3d(-5px,0,0)
  }

  to {
      -webkit-transform: none;
      transform: none
  }
}

@keyframes bounceInRight {
  0%,60%,75%,90%,to {
      -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
      animation-timing-function: cubic-bezier(.215,.61,.355,1)
  }

  0% {
      opacity: 0;
      -webkit-transform: translate3d(3000px,0,0);
      transform: translate3d(3000px,0,0)
  }

  60% {
      opacity: 1;
      -webkit-transform: translate3d(-25px,0,0);
      transform: translate3d(-25px,0,0)
  }

  75% {
      -webkit-transform: translate3d(10px,0,0);
      transform: translate3d(10px,0,0)
  }

  90% {
      -webkit-transform: translate3d(-5px,0,0);
      transform: translate3d(-5px,0,0)
  }

  to {
      -webkit-transform: none;
      transform: none
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight
}


@-webkit-keyframes bounceOutLeft {
  20% {
      opacity: 1;
      -webkit-transform: translate3d(20px,0,0);
      transform: translate3d(20px,0,0)
  }

  to {
      opacity: 0;
      -webkit-transform: translate3d(-2000px,0,0);
      transform: translate3d(-2000px,0,0)
  }
}

@keyframes bounceOutLeft {
  20% {
      opacity: 1;
      -webkit-transform: translate3d(20px,0,0);
      transform: translate3d(20px,0,0)
  }

  to {
      opacity: 0;
      -webkit-transform: translate3d(-2000px,0,0);
      transform: translate3d(-2000px,0,0)
  }
}

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft
}