div.cim-container {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

div.controls {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

div.controls a i {
    font-size: 5rem;
    margin-right: 0.25em;
    margin-left: 0.25em;
    margin-right: 0.25em;
}

body.colorscheme-dark div.controls i.fa {
    color: #abd1f2;
}

body.colorscheme-light div.controls i.fa {
    color: #0077be;
}

div.controls a.deactivated i.fa {
    color: #0077be50;
}

div.stats {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

div.stats div {
    margin-right: 0.5em;
    margin-left: 0.5em;
}

div.stats i.fa {
    font-size: 2em;
}

div.stats-display {
    font-size: 3rem;
    font-weight: bold;
}

div.flag-wrapper{
    margin-top: 0.5em;
    margin-left: 0.5em;
    margin-right: 0.5em;
    height: 5em;
    width: 30%;
}

div.flag {
    height: 100%;
    width: 100%;
}

div.flag-correct {
    position: relative;
    border: 5px green solid !important;
}

div.flag-correct::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    content: "\f00c";
    color: green;
    font-weight: bold;
    font-size: 5rem;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
}

div.flag-incorrect {
    border: 5px red solid !important;
    position: relative;
    color: red;
}

div.flag-incorrect::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    content: "\f00d";
    color: red;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
    font-weight: bold;
    font-size: 5rem;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

body.colorscheme-dark div.flag {
    border: 1px solid white;
}

body.colorscheme-light div.flag {
    border: 1px solid black;
}

audio.chord {
}

/* Container styles */
.infobox-container {
  position: absolute;
  left: 78%;
  display: inline-block;
  font-size: 1.5em;
}

/* Infobox styles */
.infobox {
  position: absolute;
  top: 100%;
  left: 00%;
  transform: translateX(-100%);
  width: 60vw;
  padding: 10px;
  color: #1e1e1e;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s;
  z-index: 100;
}

/* Infobox arrow styles */
.infobox::after {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #ffffff transparent;
}

/* Show the infobox on hover */
.infobox-container:hover .infobox,
.infobox-container:active,
.infobox-container .infobox-trigger:active + .infobox {
  visibility: visible;
  opacity: 1;
}