.home {
  width: calc(100vw - 40px);
  height: var(--app-height);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding-top: var(--header-height);
}

@media (min-width: 375px) and (max-width: 767px) {
  .homePage footer {
    position: fixed;
  }
}

@media (max-width: 1023px) {
  .home {
    flex-direction: column;
    min-height: var(--app-height);
    height: auto;
  }

  .home .rings {
    padding-bottom: 0;
  }

  .home .rankingCanvas {
    margin-bottom: 80px;
  }
}

@media (min-width: 1024px) and (max-width: 1280px) and (orientation: portrait) {
  .home {
    flex-direction: column;
  }
}

@media (min-width: 1920px) {
  .home {
    max-width: 1760px;
  }
}

@media (min-width: 2560px) {
  .home {
    max-width: 1920px;
  }
}

@media (min-width: 3840px) {
  .home {
    max-width: 2560px;
  }
}

/* SECTION Current Ring */

.currentRingPage {
  min-height: var(--app-height);
  display: flex;
  justify-content: center;
  align-items: center;
}

.currentRingWrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  position: relative;
}

.currentRingWrapper .infoHolder {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
}

/* ANCHOR Media Query */

@media (min-width: 1024px) {
  .currentRingPage {
    padding: 120px 0 110px;
  }

  .currentRingWrapper {
    width: calc(100% - 40px);
    background-color: var(--white);
    box-shadow: var(--shadow);
    border-radius: 15px;
    justify-content: flex-start;
    margin: 0 auto;
    max-height: 100%;
    padding: 10px;
  }

  .currentRingWrapper .infoHolder {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 20px;
  }
}

@media (min-width: 1440px) {
  .currentRingWrapper {
    width: 80vw;
    background-color: var(--white);
    box-shadow: var(--shadow);
    border-radius: 15px;
    padding: 20px;
  }
}

@media (max-width: 1023px) {
  .currentRingPage {
    width: calc(100% - 40px);
    min-height: var(--app-height);
    align-items: center;
    padding: 75px 0 80px;
  }

  .currentRingWrapper {
    width: 100%;
  }

  .currentRingWrapper .infoHolder {
    width: 100%;
  }
}

/* SECTION Top Content */

.currentRingWrapper .top {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

/* ANCHOR Link */

.currentRingWrapper .goBackLink {
  margin-left: -10px;
  margin-right: 20px;
}

.currentRingWrapper .goBackLink svg * {
  fill: var(--blue-med);
}

/* ANCHOR Media Query */

@media (max-width: 1023px) {
  .currentRingWrapper .goBackLink {
    margin-left: -10px;
    margin-right: 20px;
  }
}

/* ANCHOR Rings */

.currentRingWrapper .rings {
  width: 250px;
  height: 115px;
  padding: 0;
}

.currentRingWrapper .rings .ringWrapper {
  --ring-size: 80px;
  --ring-thickness: 8px;

  width: var(--ring-size);
  height: var(--ring-size);
  display: flex;
  z-index: 1;
  position: absolute;
}

.currentRingWrapper .rings .ringWrapper:before {
  content: '';
  position: absolute;
  width: var(--ring-size);
  height: var(--ring-size);
  border-radius: 100%;
  border: var(--ring-thickness) solid;
  top: 5px;
  left: 0;
  z-index: -1;
}

.currentRingWrapper .rings .ringWrapper:not(.active) {
  opacity: 0.2;
}

.currentRingWrapper .rings .ringWrapper.one {
  top: 0;
  left: 0;
}

.currentRingWrapper .rings .ringWrapper.two {
  bottom: 0;
  left: calc(33% - (var(--ring-size) / 2));
}

.currentRingWrapper .rings .ringWrapper.three {
  top: 0;
  left: calc(50% - (var(--ring-size) / 2));
}

.currentRingWrapper .rings .ringWrapper.four {
  bottom: 0;
  left: calc(66% - (var(--ring-size) / 2));
}

.currentRingWrapper .rings .ringWrapper.five {
  top: 0;
  left: calc(100% - var(--ring-size));
}

.currentRingWrapper .rings .ringWrapper .ring {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  border: var(--ring-thickness) solid;
}

.currentRingWrapper .rings .ringWrapper.one .ring {
  border-color: var(--blue-darker);
}

.currentRingWrapper .rings .ringWrapper.two .ring {
  border-color: var(--blue-lighter);
}

.currentRingWrapper .rings .ringWrapper.three .ring {
  border-color: var(--blue-dark);
}

.currentRingWrapper .rings .ringWrapper.four .ring {
  border-color: var(--blue-light);
}

.currentRingWrapper .rings .ringWrapper.five .ring {
  border-color: var(--blue-med);
}

.currentRingWrapper .rings .ringWrapper.one:before {
  border-color: var(--blue-darker-shadow);
}

.currentRingWrapper .rings .ringWrapper.two:before {
  border-color: var(--blue-lighter-shadow);
}

.currentRingWrapper .rings .ringWrapper.three:before {
  border-color: var(--blue-dark-shadow);
}

.currentRingWrapper .rings .ringWrapper.four:before {
  border-color: var(--blue-light-shadow);
}

.currentRingWrapper .rings .ringWrapper.five:before {
  border-color: var(--blue-med-shadow);
}

/* ANCHOR Media Query */

@media (max-width: 1023px) {
  .currentRingWrapper .rings {
    display: none;
  }
}

/* !SECTION */

.currentRingWrapper .contentWrapper {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  width: 100%;
}

.currentRingWrapper .content {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.currentRingWrapper .content .infoWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* ANCHOR Media Query */

@media (min-width: 1024px) {
  .currentRingWrapper .contentWrapper {
    justify-content: space-between;
  }

  .currentRingWrapper .content {
    margin-left: 50px;
  }
}

@media (max-width: 1023px) {
  .currentRingWrapper .contentWrapper {
    flex-direction: column;
    justify-content: flex-start;
  }
}

/* SECTION Content Left */

.currentRingWrapper .content.left {
  align-items: flex-start;
  justify-content: center;
}

/* ANCHOR Media Query */

@media (min-width: 1024px) {
  .currentRingWrapper .content.left {
    width: calc(50% - 20px);
  }
}

/* ANCHOR Current Ring */

.currentRingWrapper .content.left .currentRing {
  text-transform: uppercase;
}

.currentRingWrapper .content.left .infoWrapper {
  width: 100%;
  justify-content: space-between;
  margin-bottom: 20px;
}

/* ANCHOR Media Query */

@media (min-width: 1024px) {
  .currentRingWrapper .content.left .currentRing {
    font-size: var(--F18);
    margin-bottom: 20px;
  }
}

@media (max-width: 1023px) {
  .currentRingWrapper .content.left .currentRing {
    font-size: var(--F13);
    margin-bottom: 10px;
  }
}

/* ANCHOR Title */

.currentRingWrapper .content.left h1 {
  font-weight: var(--black);
  text-transform: uppercase;
  text-align: left;
}

/* ANCHOR Media Query */

@media (min-width: 1024px) {
  .currentRingWrapper .content.left h1 {
    font-size: var(--F40);
    line-height: var(--F40);
    width: 350px;
  }
}

@media (max-width: 1023px) {
  .currentRingWrapper .content.left h1 {
    font-size: var(--F24);
    line-height: var(--F24);
  }
}

@media (max-width: 767px) {
  .currentRingWrapper .content.left h1 {
    font-size: var(--F20);
    line-height: var(--F20);
  }
}

/* ANCHOR Current Points */

.currentRingWrapper .currentPoints {
  background-color: var(--grey-2);
  border-radius: 40px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 5px 20px;
}

.currentRingWrapper .currentPoints .title {
  font-size: var(--F09);
  line-height: var(--F10);
  font-weight: var(--bold);
  text-transform: uppercase;
  width: 70px;
}

.currentRingWrapper .currentPoints .content {
  font-size: var(--F40);
  font-weight: var(--black);
  text-transform: uppercase;
  color: var(--blue-med);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
}

.currentRingWrapper .currentPoints .content span {
  font-size: var(--F15);
  font-weight: var(--medium);
  text-transform: uppercase;
  color: var(--blue-darker);
  margin-top: -5px;
}

/* ANCHOR Media Query */

@media (max-width: 1023px) {
  .currentRingWrapper .currentPoints {
    margin-left: 10px;
  }

  .currentRingWrapper .currentPoints .title {
    font-size: var(--F07);
    line-height: var(--F09);
    width: 50px;
  }

  .currentRingWrapper .currentPoints .content {
    font-size: var(--F30);
  }
}

@media (max-width: 767px) {
  .currentRingWrapper .currentPoints {
    padding: 5px 15px;
  }

  .currentRingWrapper .currentPoints .content {
    font-size: var(--F24);
  }

  .currentRingWrapper .currentPoints .content span {
    font-size: var(--F10);
  }
}

/* ANCHOR Description */

@media (max-width: 767px) {
  .currentRingWrapper .description {
    font-size: var(--F14);
  }
}

/* !SECTION */

/* SECTION Content Right */

.currentRingWrapper .content.right {
  align-items: center;
  justify-content: center;
}

/* ANCHOR Media Query */

@media (min-width: 1024px) {
  .currentRingWrapper .content.right {
    width: calc(50% - 20px);
    margin-right: 30px;
  }
}

/* ANCHOR Phases */

.currentRingWrapper .phases {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.currentRingWrapper .phases .phaseItem {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: calc(100% / 4);
}

.currentRingWrapper .phases .phaseItem.disabled {
  pointer-events: none;
  cursor: default;
}

.currentRingWrapper .phases .phaseItem.done {
  opacity: 0.5;
}

.currentRingWrapper .phases .phaseItem p {
  color: var(--blue-darker);
  font-size: var(--F16);
  line-height: var(--F18);
}

.currentRingWrapper .phases .phaseItem.current p {
  color: var(--white);
  position: relative;
  z-index: 1;
}

.currentRingWrapper .phases .phaseItem.current p:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 50px);
  height: calc(100% + 10px);
  background-color: var(--blue-med);
  border-radius: 30px;
  z-index: -1;
}

.currentRingWrapper .phases .phaseItem.current svg * {
  fill: var(--blue-med);
}

.currentRingWrapper .phases .phaseItem p > span {
  font-weight: var(--black);
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

/* ANCHOR Media Query */

@media (min-width: 1024px) {
  .currentRingWrapper .phases {
    margin-bottom: 10px;
  }

  .currentRingWrapper .phases .phaseItem p > span {
    font-size: var(--F16);
  }
}

@media (max-width: 1023px) {
  .currentRingWrapper .phases {
    margin-top: 15px;
    margin-bottom: 15px;
  }

  .currentRingWrapper .phases .phaseItem .icon.medium {
    width: 45px;
    height: 45px;
  }

  .currentRingWrapper .phases .phaseItem p {
    font-size: var(--F10);
    line-height: var(--F11);
  }

  .currentRingWrapper .phases .phaseItem.current p:after {
    width: calc(100% + 20px);
  }
}

/* ANCHOR Info */

.currentRingWrapper .content.right .infoWrapper {
  margin-top: 30px;
}

.currentRingWrapper .content.right .infoWrapper .info {
  width: 60%;
}

.currentRingWrapper .content.right .infoWrapper.noButton .info {
  width: 100%;
}

.currentRingWrapper .content.right .infoWrapper .info p {
  font-size: var(--F12);
}

.currentRingWrapper .content.right .infoWrapper .info .duration {
  text-transform: uppercase;
  font-weight: var(--black);
  margin-bottom: 10px;
}

.currentRingWrapper .content.right .infoWrapper .info .phaseTitle {
  font-weight: var(--black);
  margin-bottom: 5px;
}

.currentRingWrapper .content.right .infoWrapper .info .phasePoints {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10px;
}

.currentRingWrapper .content.right .infoWrapper .info .phasePoints p {
  text-transform: uppercase;
  font-weight: var(--black);
  margin-left: 5px;
  margin-top: 4px;
}

.currentRingWrapper .content.right .infoWrapper .roundedClick {
  max-width: 150px;
}

/* ANCHOR Media Query */

@media (min-width: 1024px) {
  .currentRingWrapper .content.right .infoWrapper {
    justify-content: space-between;
  }
  .currentRingWrapper .content.right .infoWrapper .roundedClick {
    flex: 1 1 0;
  }
}

@media (max-width: 1023px) {
  .currentRingWrapper .content.right .infoWrapper {
    flex-direction: column;
    width: 100%;
  }

  .currentRingWrapper .content.right .infoWrapper .info {
    width: 100%;
    margin-bottom: 20px;
  }
}

/* !SECTION */

/* !SECTION */