.navbar {
  background: rgb(226, 87, 87);
  color: white;
  display: flex;
  align-items: center;
}

.title {
  font-weight: bold;
  padding: 8px 10px;
}

.navbutton {
  padding: 10px;
  width: 15ch;
  position: relative;
  display: flex;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;

  .labelContainer {
    height: 1em;
  }
}

.panes {
  display: flex;
  background: #f3f3f3;
}

.sidebar {
  background: rgb(80, 50, 83);
  color: white;
  padding: 15px;
  line-height: 1.3;
  min-width: 20ch;

  svg {
    width: 10px;
    height: 10px;
    fill: white;
    margin-right: 5px;
    opacity: 0.5;
  }
}

.sidebarGroup {
  margin-bottom: 15px;
}

.sidebarGroupTitle {
  text-transform: uppercase;
  font-size: 9px;
  opacity: 0.7;
  margin-bottom: 7px;
  display: flex;
  align-items: center;
}

.sidebarItem {
  display: flex;
  align-items: center;
}

.labelContainer {
  height: 1.6em;
  position: relative;
  flex: 1;
}

.label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  transition: all 600ms ease-in-out;
}

.labelEnter {
  opacity: 0.01;
}

.labelEnterActive {
  opacity: 1;
}

.labelLeave {
  opacity: 1;
}

.labelLeaveActive {
  opacity: 0.01;
}

.main {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex: 1;
}

.flagContainer {
  position: relative;
  height: 60px;
  width: 60px;
}

.flag {
  position: absolute;
  left: 50%;
  right: 50%;
  height: 60px;
  width: 60px;
  margin-left: -30px;
  margin-right: -30px;
  background: white;
  padding: 4px;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 250ms ease-in-out;

  svg {
    width: 100%;
  }
}

.flagEnter {
  opacity: 0.01;
  left: 150%;
}

.flagEnterActive {
  opacity: 1;
  left: 50%;
}

.flagLeave {
  opacity: 1;
  left: 50%;
}

.flagLeaveActive {
  opacity: 0.01;
  left: -150%;
}

.hey {
  margin-top: 15px;
  color: var(--extra-light-body-color);
  text-align: center;
}
