/*-------------------- Main --------------------*/
.a-common-page-label {
  grid-area: a-common-page-label;
  color: #D9A036;
}

.common-collapse-button {
  background-color: #191919;
  border-top: none;
  border-left: none;
  border-right: none;
  color: #AAAAAA;
  border-bottom: 2px solid #AAAAAA;
  padding-bottom: 1em;
  font-weight: bold;
  margin-bottom: 2em;
  transition: 200ms;
}
.common-collapse-button:hover {
  cursor: pointer;
  color: #878787;
}

.common-collapse-button-text {
  padding-left: 1em;
  padding-right: 1em;
  font-size: 1.5rem;
}

.common-page-header {
  font-size: 2.5rem;
  font-weight: bold;
  color: #D9A036;
  max-width: 39em;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.1em;
  max-height: 2.2em;
  align-self: center;
}

.common-page-secondary-header {
  font-size: 1.5rem;
  font-weight: bold;
  color: #a1a1a1;
  max-width: 39em;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.1em;
  max-height: 2.2em;
  align-self: center;
}

.common-label {
  font-size: 1rem;
  font-weight: bold;
  color: #AAAAAA;
}

.common-text-input {
  margin-bottom: 1em;
  margin-left: 0.2em;
  font-size: 1rem;
  color: #d7d7d7;
  border-bottom: #4b4b4b solid 2px;
  border-top: none;
  border-left: none;
  border-right: none;
  background-color: #191919;
  width: 100%;
  height: 2.5em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0.5em;
  outline: none;
}
.common-text-input:focus {
  border-bottom: #d7d7d7 solid 2px;
}

.common-button {
  background-color: #D9A036;
  color: #0D0D0D;
  font-size: 1rem;
  padding: 0.5em;
  width: 100%;
  border: 0.15em #8C6723 solid;
  transition: 300ms;
  border-radius: 0.1em;
  font-weight: bold;
}
.common-button:hover {
  background-color: #8C6723;
  cursor: pointer;
}

.common-filter-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #f4f4f4;
  transition: 200ms;
}
.common-filter-title:hover {
  cursor: pointer;
  color: #D9A036;
}

.common-clickable:hover {
  cursor: pointer;
}

.selected-all {
  color: rgb(147, 0, 197) !important;
  border-bottom: rgb(147, 0, 197) 2px solid !important;
}

.selected-pc {
  color: rgb(217, 160, 54) !important;
  border-bottom: rgb(217, 160, 54) 2px solid !important;
}

.selected-ps1 {
  color: rgb(0, 172, 159) !important;
  border-bottom: rgb(0, 172, 159) 2px solid !important;
}

.selected-ps2 {
  color: rgb(0, 85, 165) !important;
  border-bottom: rgb(0, 85, 165) 2px solid !important;
}

.selected-ps3 {
  color: rgb(60, 54, 126) !important;
  border-bottom: rgb(60, 54, 126) 2px solid !important;
}

.selected-ps4 {
  color: rgb(0, 112, 192) !important;
  border-bottom: rgb(0, 112, 192) 2px solid !important;
}

.selected-ps5 {
  color: rgb(255, 255, 255) !important;
  border-bottom: rgb(255, 255, 255) 2px solid !important;
}

.selected-xbox360 {
  color: rgb(155, 200, 72) !important;
  border-bottom: rgb(155, 200, 72) 2px solid !important;
}

.selected-psp {
  color: rgb(225, 194, 23) !important;
  border-bottom: rgb(225, 194, 23) 2px solid !important;
}

.selected-psvita {
  color: rgb(0, 165, 255) !important;
  border-bottom: rgb(0, 165, 255) 2px solid !important;
}

.selected-xbox {
  color: rgb(15, 85, 15) !important;
  border-bottom: rgb(15, 85, 15) 2px solid !important;
}

.selected-xboxone {
  color: rgb(16, 124, 16) !important;
  border-bottom: rgb(16, 124, 16) 2px solid !important;
}

.selected-xboxseries {
  color: rgb(80, 80, 80) !important;
  border-bottom: rgb(80, 80, 80) 2px solid !important;
}

.selected-switch {
  color: rgb(230, 0, 18) !important;
  border-bottom: rgb(230, 0, 18) 2px solid !important;
}

.selected-switch2 {
  color: rgb(247, 133, 109) !important;
  border-bottom: rgb(247, 133, 109) 2px solid !important;
}

.selected-wiiu {
  color: rgb(0, 154, 199) !important;
  border-bottom: rgb(0, 154, 199) 2px solid !important;
}

.selected-wii {
  color: rgb(205, 205, 205) !important;
  border-bottom: rgb(205, 205, 205) 2px solid !important;
}

.selected-gamecube {
  color: rgb(100, 80, 151) !important;
  border-bottom: rgb(100, 80, 151) 2px solid !important;
}

.selected-n64 {
  color: rgb(255, 44, 28) !important;
  border-bottom: rgb(255, 44, 28) 2px solid !important;
}

.selected-snes {
  color: rgb(132, 95, 179) !important;
  border-bottom: rgb(132, 95, 179) 2px solid !important;
}

.selected-nes {
  color: rgb(202, 0, 0) !important;
  border-bottom: rgb(202, 0, 0) 2px solid !important;
}

.selected-ds {
  color: rgb(216, 223, 119) !important;
  border-bottom: rgb(216, 223, 119) 2px solid !important;
}

.selected-3ds {
  color: rgb(2, 164, 185) !important;
  border-bottom: rgb(2, 164, 185) 2px solid !important;
}

.selected-gba {
  color: rgb(82, 71, 138) !important;
  border-bottom: rgb(82, 71, 138) 2px solid !important;
}

.selected-gbc {
  color: rgb(142, 229, 63) !important;
  border-bottom: rgb(142, 229, 63) 2px solid !important;
}

.selected-gb {
  color: rgb(64, 60, 156) !important;
  border-bottom: rgb(64, 60, 156) 2px solid !important;
}

.selected-dcast {
  color: rgb(240, 132, 44) !important;
  border-bottom: rgb(240, 132, 44) 2px solid !important;
}

.selected-saturn {
  color: rgb(164, 4, 40) !important;
  border-bottom: rgb(164, 4, 40) 2px solid !important;
}

.selected-genesis {
  color: rgb(164, 180, 212) !important;
  border-bottom: rgb(164, 180, 212) 2px solid !important;
}

.selected-sms {
  color: rgb(132, 68, 44) !important;
  border-bottom: rgb(132, 68, 44) 2px solid !important;
}

.selected-android {
  color: rgb(120, 194, 88) !important;
  border-bottom: rgb(120, 194, 88) 2px solid !important;
}

.selected-ios {
  color: rgb(1, 199, 134) !important;
  border-bottom: rgb(1, 199, 134) 2px solid !important;
}

.selected-a2600 {
  color: rgb(224, 181, 121) !important;
  border-bottom: rgb(224, 181, 121) 2px solid !important;
}

.not-selected {
  color: white !important;
  background-color: #7d7d7d;
}

.common-link {
  transition: 200ms;
  text-decoration: none;
  color: #D9A036;
  font-weight: bold;
}
.common-link:hover {
  color: #8C6723;
  cursor: pointer;
}

.common-input-error {
  background-color: #b90000;
  border: 0.15em solid #870000;
  padding: 0.6em;
  margin-bottom: 1em;
  font-weight: bold;
}

.text-color-pc {
  color: rgb(217, 160, 54);
}

.text-color-ps5 {
  color: rgb(255, 255, 255);
}

.text-color-ps4 {
  color: rgb(0, 112, 192);
}

.text-color-ps3 {
  color: rgb(60, 54, 126);
}

.text-color-ps2 {
  color: rgb(0, 85, 165);
}

.text-color-ps1 {
  color: rgb(0, 172, 159);
}

.text-color-psvita {
  color: rgb(0, 165, 255);
}

.text-color-psp {
  color: rgb(225, 194, 23);
}

.text-color-xboxseries {
  color: rgb(80, 80, 80);
}

.text-color-xboxone {
  color: rgb(16, 124, 16);
}

.text-color-xbox360 {
  color: rgb(155, 200, 72);
}

.text-color-xbox {
  color: rgb(15, 85, 15);
}

.text-color-switch {
  color: rgb(230, 0, 18);
}

.text-color-switch2 {
  color: rgb(247, 133, 109);
}

.text-color-wiiu {
  color: rgb(0, 154, 199);
}

.text-color-wii {
  color: rgb(205, 205, 205);
}

.text-color-gamecube {
  color: rgb(100, 80, 151);
}

.text-color-n64 {
  color: rgb(255, 44, 28);
}

.text-color-snes {
  color: rgb(132, 95, 179);
}

.text-color-nes {
  color: rgb(202, 0, 0);
}

.text-color-3ds {
  color: rgb(2, 164, 185);
}

.text-color-ds {
  color: rgb(216, 223, 119);
}

.text-color-gba {
  color: rgb(82, 71, 138);
}

.text-color-gbc {
  color: rgb(142, 229, 63);
}

.text-color-gb {
  color: rgb(64, 60, 156);
}

.text-color-dcast {
  color: rgb(240, 132, 44);
}

.text-color-saturn {
  color: rgb(164, 4, 40);
}

.text-color-genesis {
  color: rgb(164, 180, 212);
}

.text-color-sms {
  color: rgb(132, 68, 44);
}

.text-color-android {
  color: rgb(120, 194, 88);
}

.text-color-ios {
  color: rgb(1, 199, 134);
}

.text-color-a2600 {
  color: rgb(224, 181, 121);
}

.border-color-pc {
  border-color: rgb(217, 160, 54) !important;
}

.border-color-ps5 {
  border-color: rgb(255, 255, 255) !important;
}

.border-color-ps4 {
  border-color: rgb(0, 112, 192) !important;
}

.border-color-ps3 {
  border-color: rgb(60, 54, 126) !important;
}

.border-color-ps2 {
  border-color: rgb(0, 85, 165) !important;
}

.border-color-ps1 {
  border-color: rgb(0, 172, 159) !important;
}

.border-color-psvita {
  border-color: rgb(0, 165, 255) !important;
}

.border-color-psp {
  border-color: rgb(225, 194, 23) !important;
}

.border-color-xboxseries {
  border-color: rgb(80, 80, 80) !important;
}

.border-color-xboxone {
  border-color: rgb(16, 124, 16) !important;
}

.border-color-xbox360 {
  border-color: rgb(155, 200, 72) !important;
}

.border-color-xbox {
  border-color: rgb(15, 85, 15) !important;
}

.border-color-switch {
  border-color: rgb(230, 0, 18) !important;
}

.border-color-switch2 {
  border-color: rgb(247, 133, 109) !important;
}

.border-color-wiiu {
  border-color: rgb(0, 154, 199) !important;
}

.border-color-wii {
  border-color: rgb(205, 205, 205) !important;
}

.border-color-gamecube {
  border-color: rgb(100, 80, 151) !important;
}

.border-color-n64 {
  border-color: rgb(255, 44, 28) !important;
}

.border-color-snes {
  border-color: rgb(132, 95, 179) !important;
}

.border-color-nes {
  border-color: rgb(202, 0, 0) !important;
}

.border-color-3ds {
  border-color: rgb(2, 164, 185) !important;
}

.border-color-ds {
  border-color: rgb(216, 223, 119) !important;
}

.border-color-gba {
  border-color: rgb(82, 71, 138) !important;
}

.border-color-gbc {
  border-color: rgb(142, 229, 63) !important;
}

.border-color-gb {
  border-color: rgb(64, 60, 156) !important;
}

.border-color-dcast {
  border-color: rgb(240, 132, 44) !important;
}

.border-color-saturn {
  border-color: rgb(164, 4, 40) !important;
}

.border-color-genesis {
  border-color: rgb(164, 180, 212) !important;
}

.border-color-sms {
  border-color: rgb(132, 68, 44) !important;
}

.border-color-android {
  border-color: rgb(120, 194, 88) !important;
}

.border-color-ios {
  border-color: rgb(1, 199, 134) !important;
}

.border-color-a2600 {
  border-color: rgb(224, 181, 121) !important;
}

.platform-badge {
  padding: 0.3em;
  width: 4em;
  text-align: center;
  border-radius: 0.4em;
  font-size: 1.1rem !important;
  font-weight: bold;
}

.badge-pc {
  background-color: rgb(217, 160, 54);
  border-color: rgba(217, 160, 54, 0.8);
  color: #ffffff;
}

.badge-ps5 {
  background-color: rgb(255, 255, 255);
  border-color: rgba(255, 255, 255, 0.8);
  color: #000000;
}

.badge-ps4 {
  background-color: rgb(0, 112, 192);
  border-color: rgba(0, 112, 192, 0.8);
  color: #ffffff;
}

.badge-ps3 {
  background-color: rgb(60, 54, 126);
  border-color: rgba(60, 54, 126, 0.8);
  color: #ffffff;
}

.badge-ps2 {
  background-color: rgb(0, 85, 165);
  border-color: rgba(0, 85, 165, 0.8);
  color: #ffffff;
}

.badge-ps1 {
  background-color: rgb(0, 172, 159);
  border-color: rgba(0, 172, 159, 0.8);
  color: #ffffff;
}

.badge-psvita {
  background-color: rgb(0, 165, 255);
  border-color: rgba(0, 165, 255, 0.8);
  color: #ffffff;
}

.badge-psp {
  background-color: rgb(225, 194, 23);
  border-color: rgba(225, 194, 23, 0.8);
  color: #ffffff;
}

.badge-xbox {
  background-color: rgb(15, 85, 15);
  border-color: rgba(15, 85, 15, 0.8);
  color: #ffffff;
}

.badge-xbox360 {
  background-color: rgb(155, 200, 72);
  border-color: rgba(155, 200, 72, 0.8);
  color: #ffffff;
}

.badge-xboxone {
  background-color: rgb(16, 124, 16);
  border-color: rgba(16, 124, 16, 0.8);
  color: #ffffff;
}

.badge-xboxseries {
  background-color: rgb(80, 80, 80);
  border-color: rgba(76, 76, 76, 0.8);
  color: #ffffff;
}

.badge-switch {
  background-color: rgb(230, 0, 18);
  border-color: rgba(230, 0, 18, 0.8);
  color: #ffffff;
}

.badge-switch2 {
  background-color: rgb(247, 133, 109);
  border-color: rgba(247, 133, 109, 0.8);
  color: #ffffff;
}

.badge-wiiu {
  background-color: rgb(0, 154, 199);
  border-color: rgba(0, 154, 199, 0.8);
  color: #ffffff;
}

.badge-wii {
  background-color: rgb(205, 205, 205);
  border-color: rgba(205, 205, 205, 0.8);
  color: #000000;
}

.badge-gamecube {
  background-color: rgb(100, 80, 151);
  border-color: rgba(100, 80, 151, 0.8);
  color: #ffffff;
}

.badge-n64 {
  background-color: rgb(255, 44, 28);
  border-color: rgba(255, 44, 28, 0.8);
  color: #ffffff;
}

.badge-snes {
  background-color: rgb(132, 95, 179);
  border-color: rgba(132, 95, 179, 0.8);
  color: #ffffff;
}

.badge-nes {
  background-color: rgb(202, 0, 0);
  border-color: rgb(202, 0, 0);
  color: #ffffff;
}

.badge-3ds {
  background-color: rgb(2, 164, 185);
  border-color: rgba(2, 164, 185, 0.8);
  color: #ffffff;
}

.badge-ds {
  background-color: rgb(216, 223, 119);
  border-color: rgba(216, 223, 119, 0.8);
  color: #ffffff;
}

.badge-gba {
  background-color: rgb(82, 71, 138);
  border-color: rgba(82, 71, 138, 0.8);
  color: #ffffff;
}

.badge-gbc {
  background-color: rgb(142, 229, 63);
  border-color: rgba(142, 229, 63, 0.8);
  color: #ffffff;
}

.badge-gb {
  background-color: rgb(64, 60, 156);
  border-color: rgba(64, 60, 156, 0.8);
  color: #ffffff;
}

.badge-dcast {
  background-color: rgb(240, 132, 44);
  border-color: rgba(240, 132, 44, 0.8);
  color: #ffffff;
}

.badge-saturn {
  background-color: rgb(164, 4, 40);
  border-color: rgba(164, 4, 40, 0.8);
  color: #ffffff;
}

.badge-genesis {
  background-color: rgb(164, 180, 212);
  border-color: rgba(164, 180, 212, 0.8);
  color: #ffffff;
}

.badge-sms {
  background-color: rgb(132, 68, 44);
  border-color: rgba(132, 68, 44, 0.8);
  color: #ffffff;
}

.badge-android {
  background-color: rgb(120, 194, 88);
  border-color: rgba(120, 194, 88, 0.8);
  color: #ffffff;
}

.badge-ios {
  background-color: rgb(1, 199, 134);
  border-color: rgba(1, 199, 134, 0.8);
  color: #ffffff;
}

.badge-a2600 {
  background-color: rgb(224, 181, 121);
  border-color: rgba(224, 181, 121, 0.8);
  color: #ffffff;
}

.common-pointer:hover {
  cursor: pointer;
}

.input-label {
  font-weight: bold;
  color: #AAAAAA;
}

.common-input-help {
  font-size: 0.8rem;
  color: #808080;
  font-style: italic;
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 28px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 7px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #018d01;
}

input:focus + .slider {
  box-shadow: 0 0 1px #018d01;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.user-picture {
  width: 100px;
  height: 100px;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.user-picture:hover {
  filter: brightness(1.1);
  transform: scale(1.02);
  cursor: pointer;
}

.common-deleted {
  background: repeating-linear-gradient(45deg, #262626, #262626 20px, rgba(255, 0, 0, 0.1) 20px, rgba(255, 0, 0, 0.1) 40px);
}

.common-tag {
  padding: 0.5em;
  width: auto;
  max-width: 13em;
  height: 1em;
  line-height: 1em;
  font-weight: bold;
  border-radius: 0.3em;
  background-color: rgb(0, 112, 192);
  color: #d7d7d7;
}

.no-border {
  border: none !important;
}

.common-input-textarea {
  margin-bottom: 1em;
  font-size: 1rem;
  color: #d7d7d7;
  border: #4b4b4b solid 2px;
  background-color: #191919;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0.5em;
  outline: none;
}
.common-input-textarea:focus {
  border-bottom: #d7d7d7 solid 2px;
}

.common-input-textarea-modal {
  margin-bottom: 1em;
  font-size: 1rem;
  color: #d7d7d7;
  border: #4b4b4b solid 2px;
  background-color: #373737;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0.5em;
  outline: none;
}
.common-input-textarea-modal:focus {
  border-bottom: #d7d7d7 solid 2px;
}

.button-flash-color {
  background-color: #018d01;
  border-color: #016a01;
  color: #ede1d5;
}

.icon-flash-color {
  color: #018d01;
}

@media only screen and (max-width: 1300px) {
  .common-page-header {
    max-width: 29em;
  }
  .common-page-secondary-header {
    max-width: 29em;
  }
}
@media only screen and (max-width: 1000px) {
  .common-page-header {
    max-width: 20em;
  }
  .common-page-secondary-header {
    max-width: 20em;
  }
}
@media only screen and (max-width: 670px) {
  .common-page-header {
    max-width: 17em;
  }
  .common-page-secondary-header {
    font-size: 1.5rem;
    max-width: 17em;
  }
}
/* =========================== LIBRARY =========================== */
.c-edit-library {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 7em 2em auto auto auto auto auto 4em;
  grid-template-areas: "a-edit-library-main-label" "a-edit-library-platform" "c-edit-library-versions-wrapper" "c-edit-library-stats" "c-edit-library-review-wrapper" "c-edit-library-settings" "c-edit-library-tags" "a-edit-library-remove";
}

.a-edit-library-main-label {
  grid-area: a-edit-library-main-label;
}

.a-edit-library-platform {
  grid-area: a-edit-library-platform;
}

.a-edit-library-main-label {
  grid-area: a-edit-library-main-label;
  align-self: center;
  color: #D9A036;
}

.c-edit-library-versions-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 4em 4em auto;
  grid-template-areas: "a-edit-library-version-title" "a-edit-library-version-add" "c-edit-library-version";
  border-bottom: 0.1em solid #8e8e8e;
  padding-bottom: 1em;
  margin-bottom: 1em;
}

.a-edit-library-version-add {
  grid-area: a-edit-library-version-add;
}

.c-edit-library-versions {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
}

.c-edit-library-version {
  display: grid;
  grid-template-columns: 2em min-content min-content;
  grid-template-rows: 1fr;
  grid-template-areas: "a-edit-library-version-handle c-edit-library-version-main c-edit-library-version-actions";
  border: 0.1em solid #8e8e8e;
  padding: 0.7em;
  margin-bottom: 1.1em;
  border-radius: 0.2em;
  align-items: center;
  background-color: #262626;
}

.a-edit-library-version-handle {
  grid-area: a-edit-library-version-handle;
}

.c-edit-library-version-main {
  display: grid;
  grid-template-columns: min-content 3em 6em 3em 4.5em 5em 10em 36em;
  grid-template-rows: 1fr;
  grid-template-areas: "c-edit-library-version-count a-edit-library-version-shop a-edit-library-version-bought a-edit-library-version-region a-edit-library-version-price a-edit-library-version-condition a-edit-library-version-conditions a-edit-library-version-edition";
}

.c-edit-library-version-count {
  display: grid;
  grid-template-columns: 2em 1.5em;
  grid-template-rows: 1fr;
  grid-template-areas: "a-edit-library-version-count a-edit-library-version-count-icon";
}

.a-edit-library-version-count {
  grid-area: a-edit-library-version-count;
  align-self: center;
  justify-self: center;
}

.a-edit-library-version-count-icon {
  grid-area: a-edit-library-version-count-icon;
  align-self: center;
  justify-self: center;
}

.a-edit-library-version-shop {
  grid-area: a-edit-library-version-shop;
}

.a-edit-library-version-shop {
  grid-area: a-edit-library-version-shop;
  align-self: center;
  justify-self: center;
}

.a-edit-library-version-bought {
  grid-area: a-edit-library-version-bought;
  align-self: center;
}

.a-edit-library-version-region {
  grid-area: a-edit-library-version-region;
  align-self: center;
  justify-self: center;
}

.a-edit-library-version-price {
  grid-area: a-edit-library-version-price;
  align-self: center;
}

.a-edit-library-version-edition {
  grid-area: a-edit-library-version-edition;
  max-width: 35em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  align-self: center;
}

.a-edit-library-version-condition {
  grid-area: a-edit-library-version-condition;
  align-self: center;
}

.a-edit-library-version-conditions {
  grid-area: a-edit-library-version-conditions;
  color: #AAAAAA;
  align-self: center;
}

.c-edit-library-version-actions {
  display: grid;
  grid-template-columns: 2em 2em 2em;
  grid-template-rows: 1fr;
  grid-template-areas: "a-edit-library-version-edit a-edit-library-version-copy a-edit-library-version-delete";
  justify-self: end;
}

.a-edit-library-version-copy {
  grid-area: a-edit-library-version-copy;
  justify-self: end;
}

.a-edit-library-version-edit {
  grid-area: a-edit-library-version-edit;
  justify-self: end;
}

.a-edit-library-version-delete {
  grid-area: a-edit-library-version-delete;
  justify-self: end;
}

.a-edit-library-remove {
  grid-area: a-edit-library-remove;
}

/* =========================== STATS =========================== */
.c-edit-library-stats {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 4em 4em 4em auto auto;
  grid-template-areas: "c-edit-library-stats-timers" "a-edit-library-stats-completion-title" "a-edit-library-stats-playthrough" "a-edit-library-stats-add" "c-edit-library-stats-completion" "c-edit-library-stats-completions-wrapper";
  border-bottom: 0.1em solid #8e8e8e;
  padding-bottom: 2em;
  margin-bottom: 1em;
}

.c-edit-library-stats-timers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "a-edit-library-stats-timer-playthrough-start a-edit-library-stats-timer-total-start" "c-edit-library-stats-timer-playthrough c-edit-library-stats-timer-total";
}

.a-edit-library-stats-timer-playthrough-start {
  grid-area: a-edit-library-stats-timer-playthrough-start;
  margin-right: 4em;
}

.a-edit-library-stats-timer-total-start {
  grid-area: a-edit-library-stats-timer-total-start;
}

.c-edit-library-stats-timer-playthrough {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 4em auto auto;
  grid-template-areas: "a-edit-library-stats-timer-playthrough-title" "c-edit-library-stats-timer-playthrough-actions" "a-edit-library-stats-timer-playthrough-display";
}

.a-edit-library-stats-timer-playthrough-title {
  grid-area: a-edit-library-stats-timer-playthrough-title;
}

.c-edit-library-stats-timer-playthrough-actions {
  display: grid;
  grid-template-columns: 10em 10em;
  grid-template-rows: 3em;
  grid-template-areas: "a-edit-library-stats-timer-playthrough-actions-set a-edit-library-stats-timer-playthrough-actions-reset";
  grid-column-gap: 2em;
}

.a-edit-library-stats-timer-playthrough-actions-set {
  grid-area: a-edit-library-stats-timer-playthrough-actions-set;
}

.a-edit-library-stats-timer-playthrough-actions-reset {
  grid-area: a-edit-library-stats-timer-playthrough-actions-reset;
}

.a-edit-library-stats-timer-playthrough-display {
  grid-area: a-edit-library-stats-timer-playthrough-display;
  font-size: 5rem;
  font-weight: bold;
  color: #D9A036;
}

.c-edit-library-stats-timer-total {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 4em 3em auto;
  grid-template-areas: "a-edit-library-stats-timer-total-title" "a-edit-library-stats-timer-total-set" "a-edit-library-stats-timer-total-display";
}

.a-edit-library-stats-timer-total-title {
  grid-area: a-edit-library-stats-timer-total-title;
}

.a-edit-library-stats-timer-total-set {
  grid-area: a-edit-library-stats-timer-total-set;
  width: 10em;
}

.a-edit-library-stats-timer-total-display {
  grid-area: a-edit-library-stats-timer-total-display;
  font-size: 5rem;
  font-weight: bold;
  color: #D9A036;
}

.a-edit-library-stats-playthrough {
  grid-area: a-edit-library-stats-playthrough;
}

.a-edit-library-stats-add {
  grid-area: a-edit-library-stats-add;
}

.c-edit-library-stats-completion {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: "c-edit-library-stats-completion-any c-edit-library-stats-completion-hundred c-edit-library-stats-completion-plat";
  grid-column-gap: 3em;
}

.c-edit-library-stats-completion-any {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 6em 3em 3em 3em 3em;
  grid-template-areas: "a-edit-library-stats-completion-any-title" "c-edit-library-stats-completion-any-date" "c-edit-library-stats-completion-any-last" "c-edit-library-stats-completion-any-time" "c-edit-library-stats-completion-any-times";
  background-color: #656366;
}

.a-edit-library-stats-completion-any-title {
  grid-area: a-edit-library-stats-completion-any-title;
  align-self: center;
  justify-self: center;
  font-size: 3em;
  font-weight: bold;
}

.c-edit-library-stats-completion-any-date {
  display: grid;
  grid-template-columns: 2.5em auto;
  grid-template-rows: 1fr;
  grid-template-areas: "a-edit-library-stats-completion-any-date-icon a-edit-library-stats-completion-any-date";
  justify-self: center;
}

.a-edit-library-stats-completion-any-date-icon {
  grid-area: a-edit-library-stats-completion-any-date-icon;
  align-self: center;
}

.a-edit-library-stats-completion-any-date {
  grid-area: a-edit-library-stats-completion-any-date;
  align-self: center;
  justify-self: center;
  font-size: 1.5rem;
  font-weight: bold;
}

.c-edit-library-stats-completion-any-last {
  display: grid;
  grid-template-columns: 2.5em auto;
  grid-template-rows: 1fr;
  grid-template-areas: "a-edit-library-stats-completion-any-last-icon a-edit-library-stats-completion-any-last";
  justify-self: center;
}

.a-edit-library-stats-completion-any-last-icon {
  grid-area: a-edit-library-stats-completion-any-last-icon;
  align-self: center;
}

.a-edit-library-stats-completion-any-last {
  grid-area: a-edit-library-stats-completion-any-last;
  align-self: center;
  justify-self: center;
  font-size: 1.5rem;
  font-weight: bold;
}

.c-edit-library-stats-completion-any-time {
  display: grid;
  grid-template-columns: 2.5em auto;
  grid-template-rows: 1fr;
  grid-template-areas: "a-edit-library-stats-completion-any-time-icon a-edit-library-stats-completion-any-time";
  justify-self: center;
}

.a-edit-library-stats-completion-any-time-icon {
  grid-area: a-edit-library-stats-completion-any-time-icon;
  align-self: center;
}

.a-edit-library-stats-completion-any-time {
  grid-area: a-edit-library-stats-completion-any-time;
  align-self: center;
  justify-self: center;
  font-size: 1.5rem;
  font-weight: bold;
}

.c-edit-library-stats-completion-any-times {
  display: grid;
  grid-template-columns: 2.5em auto;
  grid-template-rows: 1fr;
  grid-template-areas: "a-edit-library-stats-completion-any-times-icon a-edit-library-stats-completion-any-times";
  justify-self: center;
}

.a-edit-library-stats-completion-any-times-icon {
  grid-area: a-edit-library-stats-completion-any-times-icon;
  align-self: center;
}

.a-edit-library-stats-completion-any-times {
  grid-area: a-edit-library-stats-completion-any-times;
  align-self: center;
  justify-self: center;
  font-size: 1.5rem;
  font-weight: bold;
}

.c-edit-library-stats-completion-hundred {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 6em 3em 3em 3em 3em;
  grid-template-areas: "a-edit-library-stats-completion-hundred-title" "c-edit-library-stats-completion-hundred-date" "c-edit-library-stats-completion-hundred-last" "c-edit-library-stats-completion-hundred-time" "c-edit-library-stats-completion-hundred-times";
  background-color: #656366;
}

.a-edit-library-stats-completion-hundred-title {
  grid-area: a-edit-library-stats-completion-hundred-title;
  align-self: center;
  justify-self: center;
  font-size: 3em;
  font-weight: bold;
}

.c-edit-library-stats-completion-hundred-date {
  display: grid;
  grid-template-columns: 2.5em auto;
  grid-template-rows: 1fr;
  grid-template-areas: "a-edit-library-stats-completion-hundred-date-icon a-edit-library-stats-completion-hundred-date";
  justify-self: center;
}

.a-edit-library-stats-completion-hundred-date-icon {
  grid-area: a-edit-library-stats-completion-hundred-date-icon;
  align-self: center;
}

.a-edit-library-stats-completion-hundred-date {
  grid-area: a-edit-library-stats-completion-hundred-date;
  align-self: center;
  justify-self: center;
  font-size: 1.5rem;
  font-weight: bold;
}

.c-edit-library-stats-completion-hundred-last {
  display: grid;
  grid-template-columns: 2.5em auto;
  grid-template-rows: 1fr;
  grid-template-areas: "a-edit-library-stats-completion-hundred-last-icon a-edit-library-stats-completion-hundred-last";
  justify-self: center;
}

.a-edit-library-stats-completion-hundred-last-icon {
  grid-area: a-edit-library-stats-completion-hundred-last-icon;
  align-self: center;
}

.a-edit-library-stats-completion-hundred-last {
  grid-area: a-edit-library-stats-completion-hundred-last;
  align-self: center;
  justify-self: center;
  font-size: 1.5rem;
  font-weight: bold;
}

.c-edit-library-stats-completion-hundred-time {
  display: grid;
  grid-template-columns: 2.5em auto;
  grid-template-rows: 1fr;
  grid-template-areas: "a-edit-library-stats-completion-hundred-time-icon a-edit-library-stats-completion-hundred-time";
  justify-self: center;
}

.a-edit-library-stats-completion-hundred-time-icon {
  grid-area: a-edit-library-stats-completion-hundred-time-icon;
  align-self: center;
}

.a-edit-library-stats-completion-hundred-time {
  grid-area: a-edit-library-stats-completion-hundred-time;
  align-self: center;
  justify-self: center;
  font-size: 1.5rem;
  font-weight: bold;
}

.c-edit-library-stats-completion-hundred-times {
  display: grid;
  grid-template-columns: 2.5em auto;
  grid-template-rows: 1fr;
  grid-template-areas: "a-edit-library-stats-completion-hundred-times-icon a-edit-library-stats-completion-hundred-times";
  justify-self: center;
}

.a-edit-library-stats-completion-hundred-times-icon {
  grid-area: a-edit-library-stats-completion-hundred-times-icon;
  align-self: center;
}

.a-edit-library-stats-completion-hundred-times {
  grid-area: a-edit-library-stats-completion-hundred-times;
  align-self: center;
  justify-self: center;
  font-size: 1.5rem;
  font-weight: bold;
}

.c-edit-library-stats-completion-plat {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 6em 3em 3em 3em 3em;
  grid-template-areas: "a-edit-library-stats-completion-plat-title" "c-edit-library-stats-completion-plat-date" "c-edit-library-stats-completion-plat-last" "c-edit-library-stats-completion-plat-time" "c-edit-library-stats-completion-plat-times";
  background-color: #656366;
}

.a-edit-library-stats-completion-plat-title {
  grid-area: a-edit-library-stats-completion-plat-title;
  align-self: center;
  justify-self: center;
  font-size: 3em;
  font-weight: bold;
}

.c-edit-library-stats-completion-plat-date {
  display: grid;
  grid-template-columns: 2.5em auto;
  grid-template-rows: 1fr;
  grid-template-areas: "a-edit-library-stats-completion-plat-date-icon a-edit-library-stats-completion-plat-date";
  justify-self: center;
}

.a-edit-library-stats-completion-plat-date-icon {
  grid-area: a-edit-library-stats-completion-plat-date-icon;
  align-self: center;
}

.a-edit-library-stats-completion-plat-date {
  grid-area: a-edit-library-stats-completion-plat-date;
  align-self: center;
  justify-self: center;
  font-size: 1.5rem;
  font-weight: bold;
}

.c-edit-library-stats-completion-plat-last {
  display: grid;
  grid-template-columns: 2.5em auto;
  grid-template-rows: 1fr;
  grid-template-areas: "a-edit-library-stats-completion-plat-last-icon a-edit-library-stats-completion-plat-last";
  justify-self: center;
}

.a-edit-library-stats-completion-plat-last-icon {
  grid-area: a-edit-library-stats-completion-plat-last-icon;
  align-self: center;
}

.a-edit-library-stats-completion-plat-last {
  grid-area: a-edit-library-stats-completion-plat-last;
  align-self: center;
  justify-self: center;
  font-size: 1.5rem;
  font-weight: bold;
}

.c-edit-library-stats-completion-plat-time {
  display: grid;
  grid-template-columns: 2.5em auto;
  grid-template-rows: 1fr;
  grid-template-areas: "a-edit-library-stats-completion-plat-time-icon a-edit-library-stats-completion-plat-time";
  justify-self: center;
}

.a-edit-library-stats-completion-plat-time-icon {
  grid-area: a-edit-library-stats-completion-plat-time-icon;
  align-self: center;
}

.a-edit-library-stats-completion-plat-time {
  grid-area: a-edit-library-stats-completion-plat-time;
  align-self: center;
  justify-self: center;
  font-size: 1.5rem;
  font-weight: bold;
}

.c-edit-library-stats-completion-plat-times {
  display: grid;
  grid-template-columns: 2.5em auto;
  grid-template-rows: 1fr;
  grid-template-areas: "a-edit-library-stats-completion-plat-times-icon a-edit-library-stats-completion-plat-times";
  justify-self: center;
}

.a-edit-library-stats-completion-plat-times-icon {
  grid-area: a-edit-library-stats-completion-plat-times-icon;
  align-self: center;
}

.a-edit-library-stats-completion-plat-times {
  grid-area: a-edit-library-stats-completion-plat-times;
  align-self: center;
  justify-self: center;
  font-size: 1.5rem;
  font-weight: bold;
}

.c-edit-library-stats-completions-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: "c-edit-library-stats-completions-any-wrapper" "c-edit-library-stats-completions-hundred-wrapper" "c-edit-library-stats-completions-plat-wrapper";
}

.c-edit-library-stats-completions-any-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em auto;
  grid-template-areas: "a-edit-library-stats-completions-any-title" "c-edit-library-stats-completions-any";
  padding-top: 1em;
}

.a-edit-library-stats-completions-any-title {
  grid-area: a-edit-library-stats-completions-any-title;
}

.c-edit-library-stats-completions-any {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
}

.c-edit-library-stats-completions-hundred-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em auto;
  grid-template-areas: "a-edit-library-stats-completions-hundred-title" "c-edit-library-stats-completions-hundred";
  padding-top: 1em;
}

.a-edit-library-stats-completions-hundred-title {
  grid-area: a-edit-library-stats-completions-hundred-title;
}

.c-edit-library-stats-completions-hundred {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
}

.c-edit-library-stats-completions-plat-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em auto;
  grid-template-areas: "a-edit-library-stats-completions-plat-title" "c-edit-library-stats-completions-plat";
  padding-top: 1em;
}

.a-edit-library-stats-completions-plat-title {
  grid-area: a-edit-library-stats-completions-plat-title;
}

.c-edit-library-stats-completions-plat {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
}

.c-edit-completion-row {
  display: grid;
  grid-template-columns: min-content min-content min-content;
  grid-template-rows: 2em;
  grid-template-areas: "c-edit-completion-date c-edit-completion-time c-edit-completion-actions";
}

.c-edit-completion-date {
  display: grid;
  grid-template-columns: 2.5em 9em;
  grid-template-rows: 2em;
  grid-template-areas: "a-edit-completion-date-icon a-edit-completion-date";
}

.a-edit-completion-date-icon {
  grid-area: a-edit-completion-date-icon;
  align-self: center;
}

.a-edit-completion-date {
  grid-area: a-edit-completion-date;
  align-self: center;
  font-size: 1.2rem;
}

.c-edit-completion-time {
  display: grid;
  grid-template-columns: 2.5em 9em;
  grid-template-rows: 2em;
  grid-template-areas: "a-edit-completion-time-icon a-edit-completion-time";
}

.a-edit-completion-time-icon {
  grid-area: a-edit-completion-time-icon;
  align-self: center;
}

.a-edit-completion-time {
  grid-area: a-edit-completion-time;
  align-self: center;
  font-size: 1.2rem;
}

.c-edit-completion-actions {
  display: grid;
  grid-template-columns: 2em 2em;
  grid-template-rows: 2em;
  grid-template-areas: "a-edit-completion-edit a-edit-completion-delete";
}

.c-edit-library-review-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 4em 4em 4em auto auto;
  grid-template-areas: "a-edit-library-review-title" "a-edit-library-top" "a-edit-library-review-add" "a-edit-library-review-edit" "c-edit-library-review";
  border-bottom: 0.1em solid #8e8e8e;
  padding-bottom: 1em;
  margin-bottom: 1em;
}

.a-edit-library-review-title {
  grid-area: a-edit-library-review-title;
}

.a-edit-library-top {
  grid-area: a-edit-library-top;
}

.a-edit-library-review-add {
  grid-area: a-edit-library-review-add;
}

.a-edit-library-review-edit {
  grid-area: a-edit-library-review-edit;
}

.c-edit-library-review {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 4em auto auto;
  grid-template-areas: "a-edit-library-review-score" "c-edit-library-review-text" "c-edit-library-review-chart";
  padding-top: 1em;
}

.a-edit-library-review-score {
  grid-area: a-edit-library-review-score;
  font-size: 2rem;
  align-self: center;
}

.c-edit-library-review-text {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3em auto;
  grid-template-areas: "a-edit-library-review-text-label" "a-edit-library-review-text";
}

.a-edit-library-review-text-label {
  grid-area: a-edit-library-review-text-label;
  font-size: 1.5rem;
  align-self: center;
}

.a-edit-library-review-text {
  grid-area: a-edit-library-review-text;
}

.a-edit-library-review-label {
  grid-area: a-edit-library-review-label;
  align-self: center;
}

.a-edit-library-review-text {
  grid-area: a-edit-library-review-text;
}

.c-edit-library-review-chart {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 20em;
  grid-template-areas: "a-edit-library-review-chart-label" "a-edit-library-review-chart";
  padding-top: 1em;
}

.a-edit-library-review-chart-label {
  grid-area: a-edit-library-review-chart-label;
  font-size: 1.5rem;
  align-self: center;
}

.a-edit-library-review-chart {
  grid-area: a-edit-library-review-chart;
}

.c-edit-library-tags {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 4em 3.5em auto;
  grid-template-areas: "a-edit-library-tags-title" "a-edit-library-tags-add" "c-edit-library-tags-list";
  border-bottom: 1px #6d6d6d solid;
  margin-bottom: 1em;
}

.a-edit-library-tags-title {
  grid-area: a-edit-library-tags-title;
}

.a-edit-library-tags-add {
  grid-area: a-edit-library-tags-add;
}

.c-edit-library-tags-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16.5em, 1fr));
  padding-bottom: 2em;
}

.c-edit-library-tag {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 1fr;
  grid-template-areas: "a-edit-library-tag-main-name c-edit-library-tag-actions";
  margin-right: 1em;
  padding-bottom: 1em;
}

.c-edit-library-tag-actions {
  display: grid;
  grid-template-columns: 2em 2em;
  grid-template-rows: 1fr;
  grid-template-areas: "a-edit-library-tag-actions-edit a-edit-library-tag-actions-delete";
  align-items: center;
  justify-items: center;
  padding-left: 0.5em;
}

.a-edit-library-tag-actions-edit {
  grid-area: a-edit-library-tag-actions-edit;
}

.a-edit-library-tag-actions-delete {
  grid-area: a-edit-library-tag-actions-delete;
}

.a-edit-library-top {
  grid-area: a-edit-library-top;
}

.modal {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  display: none;
  z-index: 1;
  padding: 10em 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 80vh;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.7);
}

.modal-content {
  background-color: #373737;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  height: auto;
  width: 50em;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "c-modal-header" "c-modal-content";
}

.c-modal-header {
  display: grid;
  grid-template-columns: 1fr 1em;
  grid-template-rows: 3em;
  grid-template-areas: "a-modal-header-name a-modal-header-close";
  color: #d7d7d7;
  font-size: 1.5rem;
}

.a-modal-header-name {
  grid-area: a-modal-header-name;
  color: #d7d7d7;
  font-weight: bold;
}

.a-modal-header-close {
  transition: 200ms;
  color: #d7d7d7;
  justify-self: end;
}
.a-modal-header-close:hover {
  cursor: pointer;
  color: #191919;
}

.c-modal-content {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: ".";
}

.c-edit-library-modal-add-version {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1.5em 4em 1.5em 4em 1.5em 4em 1.5em 4em auto 1.5em 4em auto 1.5em 4em auto 3em;
  grid-template-areas: "a-edit-library-modal-add-version-amount-label" "a-edit-library-modal-add-version-amount-input" "a-edit-library-modal-add-version-date-label" "a-edit-library-modal-add-version-date-input" "a-edit-library-modal-add-version-price-label" "a-edit-library-modal-add-version-price-input" "a-edit-library-modal-add-version-edition-label" "a-edit-library-modal-add-version-edition-input" "c-edit-library-modal-add-version-edition-name" "a-edit-library-modal-add-version-shop-label" "a-edit-library-modal-add-version-shop-input" "c-edit-library-modal-add-version-region" "a-edit-library-modal-add-version-game-condition-label" "a-edit-library-modal-add-version-game-condition-input" "c-edit-library-modal-add-version-conditions" "a-edit-library-modal-add-version-submit";
}

.a-edit-library-modal-add-version-amount-label {
  grid-area: a-edit-library-modal-add-version-amount-label;
}

.a-edit-library-modal-add-version-amount-input {
  grid-area: a-edit-library-modal-add-version-amount-input;
}

.a-edit-library-modal-add-version-date-label {
  grid-area: a-edit-library-modal-add-version-date-label;
}

.a-edit-library-modal-add-version-date-input {
  grid-area: a-edit-library-modal-add-version-date-input;
}

.a-edit-library-modal-add-version-price-label {
  grid-area: a-edit-library-modal-add-version-price-label;
}

.a-edit-library-modal-add-version-price-input {
  grid-area: a-edit-library-modal-add-version-price-input;
}

.a-edit-library-modal-add-version-edition-label {
  grid-area: a-edit-library-modal-add-version-edition-label;
}

.a-edit-library-modal-add-version-edition-input {
  grid-area: a-edit-library-modal-add-version-edition-input;
}

.c-edit-library-modal-add-version-edition-name {
  grid-area: c-edit-library-modal-add-version-edition-name;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1.5em 4em;
  grid-template-areas: "a-edit-library-modal-add-version-edition-name-label" "a-edit-library-modal-add-version-edition-name-input";
}

.a-edit-library-modal-add-version-edition-name-label {
  grid-area: a-edit-library-modal-add-version-edition-name-label;
}

.a-edit-library-modal-add-version-edition-name-input {
  grid-area: a-edit-library-modal-add-version-edition-name-input;
}

.a-edit-library-modal-add-version-shop-label {
  grid-area: a-edit-library-modal-add-version-shop-label;
}

.a-edit-library-modal-add-version-shop-input {
  grid-area: a-edit-library-modal-add-version-shop-input;
}

.a-edit-library-modal-add-version-shop-label {
  grid-area: a-edit-library-modal-add-version-shop-label;
}

.a-edit-library-modal-add-version-shop-input {
  grid-area: a-edit-library-modal-add-version-shop-input;
}

.c-edit-library-modal-add-version-region {
  grid-area: c-edit-library-modal-add-version-region;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "a-edit-library-modal-add-version-region-label" "a-edit-library-modal-add-version-region-input";
}

.a-edit-library-modal-add-version-region-label {
  grid-area: a-edit-library-modal-add-version-region-label;
  min-height: 1.5em;
}

.a-edit-library-modal-add-version-region-input {
  grid-area: a-edit-library-modal-add-version-region-input;
  min-height: 4em;
}

.a-edit-library-modal-add-version-game-condition-label {
  grid-area: a-edit-library-modal-add-version-game-condition-label;
}

.a-edit-library-modal-add-version-game-condition-input {
  grid-area: a-edit-library-modal-add-version-game-condition-input;
}

.c-edit-library-modal-add-version-conditions {
  grid-area: c-edit-library-modal-add-version-conditions;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1.5em 4em 1.5em 4em 1.5em 4em 3em 3em;
  grid-template-areas: "a-edit-library-modal-add-version-case-condition-label" "a-edit-library-modal-add-version-case-condition-input" "a-edit-library-modal-add-version-disc-condition-label" "a-edit-library-modal-add-version-disc-condition-input" "a-edit-library-modal-add-version-art-condition-label" "a-edit-library-modal-add-version-art-condition-input" "c-edit-library-modal-add-version-manual" "c-edit-library-modal-add-version-special";
}

.a-edit-library-modal-add-version-case-condition-label {
  grid-area: a-edit-library-modal-add-version-case-condition-label;
}

.a-edit-library-modal-add-version-case-condition-input {
  grid-area: a-edit-library-modal-add-version-case-condition-input;
}

.a-edit-library-modal-add-version-disc-condition-label {
  grid-area: a-edit-library-modal-add-version-disc-condition-label;
}

.a-edit-library-modal-add-version-disc-condition-input {
  grid-area: a-edit-library-modal-add-version-disc-condition-input;
}

.a-edit-library-modal-add-version-art-condition-label {
  grid-area: a-edit-library-modal-add-version-art-condition-label;
}

.a-edit-library-modal-add-version-art-condition-input {
  grid-area: a-edit-library-modal-add-version-art-condition-input;
}

.c-edit-library-modal-add-version-manual {
  display: grid;
  grid-template-columns: 2em 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "a-edit-library-modal-add-version-manual-input  a-edit-library-modal-add-version-manual-label";
}

.a-edit-library-modal-add-version-manual-input {
  grid-area: a-edit-library-modal-add-version-manual-input;
}

.a-edit-library-modal-add-version-manual-label {
  grid-area: a-edit-library-modal-add-version-manual-label;
}

.c-edit-library-modal-add-version-special {
  display: grid;
  grid-template-columns: 2em 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "a-edit-library-modal-add-version-special-input  a-edit-library-modal-add-version-special-label";
}

.a-edit-library-modal-add-version-special-input {
  grid-area: a-edit-library-modal-add-version-special-input;
}

.a-edit-library-modal-add-version-special-label {
  grid-area: a-edit-library-modal-add-version-special-label;
}

.a-edit-library-modal-add-version-submit {
  grid-area: a-edit-library-modal-add-version-submit;
}

.c-edit-modal-add-to-top {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1em 4em auto 3em;
  grid-template-areas: "a-edit-modal-add-to-top-score-label" "c-edit-modal-add-to-top-score-input" "c-edit-modal-add-to-top-review" "a-edit-modal-add-to-top-submit";
}

.a-edit-modal-add-to-top-score-label {
  grid-area: a-edit-modal-add-to-top-score-label;
}

.c-edit-modal-add-to-top-score-input {
  display: grid;
  grid-template-columns: 1fr 2em;
  grid-template-rows: 1fr;
  grid-template-areas: "a-edit-modal-add-to-top-score-input a-edit-modal-add-to-top-score-preview";
}

.a-edit-modal-add-to-top-score-input {
  grid-area: a-edit-modal-add-to-top-score-input;
  align-self: center;
}

.a-edit-modal-add-to-top-score-preview {
  grid-area: a-edit-modal-add-to-top-score-preview;
  align-self: center;
}

.c-edit-modal-add-to-top-review {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 7em;
  grid-template-areas: "a-edit-modal-add-to-top-review-label" "a-edit-modal-add-to-top-review-input";
}

.a-edit-modal-add-to-top-review-label {
  grid-area: a-edit-modal-add-to-top-review-label;
}

.a-edit-modal-add-to-top-review-input {
  grid-area: a-edit-modal-add-to-top-review-input;
}

.a-edit-modal-add-to-top-submit {
  grid-area: a-edit-modal-add-to-top-submit;
}

.c-edit-modal-add-tag {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1em 4em 1em 4em 1em 4em 1em 4em 4em 3em;
  grid-template-areas: "a-edit-modal-add-tag-template-label" "a-edit-modal-add-tag-template-input" "a-edit-modal-add-tag-name-label" "a-edit-modal-add-tag-name-input" "a-edit-modal-add-tag-color-label" "a-edit-modal-add-tag-color-input" "a-edit-modal-add-tag-text-color-label" "a-edit-modal-add-tag-text-color-input" "a-edit-modal-add-tag-preview" "a-edit-modal-add-tag-submit-this";
}

.a-edit-modal-add-tag-template-label {
  grid-area: a-edit-modal-add-tag-template-label;
}

.a-edit-modal-add-tag-template-input {
  grid-area: a-edit-modal-add-tag-template-input;
}

.a-edit-modal-add-tag-name-label {
  grid-area: a-edit-modal-add-tag-name-label;
}

.a-edit-modal-add-tag-name-input {
  grid-area: a-edit-modal-add-tag-name-input;
}

.a-edit-modal-add-tag-color-label {
  grid-area: a-edit-modal-add-tag-color-label;
}

.a-edit-modal-add-tag-color-input {
  grid-area: a-edit-modal-add-tag-color-input;
}

.a-edit-modal-add-tag-text-color-label {
  grid-area: a-edit-modal-add-tag-text-color-label;
}

.a-edit-modal-add-tag-text-color-input {
  grid-area: a-edit-modal-add-tag-text-color-input;
}

.a-edit-modal-add-tag-preview {
  grid-area: a-edit-modal-add-tag-preview;
  justify-self: center;
}

.a-edit-modal-add-tag-submit-this {
  grid-area: a-edit-modal-add-tag-submit-this;
  align-self: center;
}

.c-edit-modal-edit-tag {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1em 4em 1em 4em 1em 4em 1em 4em 4em 5em 3em;
  grid-template-areas: "a-edit-modal-edit-tag-template-label" "a-edit-modal-edit-tag-template-input" "a-edit-modal-edit-tag-name-label" "a-edit-modal-edit-tag-name-input" "a-edit-modal-edit-tag-color-label" "a-edit-modal-edit-tag-color-input" "a-edit-modal-edit-tag-text-color-label" "a-edit-modal-edit-tag-text-color-input" "a-edit-modal-edit-tag-preview" "a-edit-modal-edit-tag-submit-this" "a-edit-modal-edit-tag-submit-all";
}

.a-edit-modal-edit-tag-template-label {
  grid-area: a-edit-modal-edit-tag-template-label;
}

.a-edit-modal-edit-tag-template-input {
  grid-area: a-edit-modal-edit-tag-template-input;
}

.a-edit-modal-edit-tag-name-label {
  grid-area: a-edit-modal-edit-tag-name-label;
}

.a-edit-modal-edit-tag-name-input {
  grid-area: a-edit-modal-edit-tag-name-input;
}

.a-edit-modal-edit-tag-color-label {
  grid-area: a-edit-modal-edit-tag-color-label;
}

.a-edit-modal-edit-tag-color-input {
  grid-area: a-edit-modal-edit-tag-color-input;
}

.a-edit-modal-edit-tag-text-color-label {
  grid-area: a-edit-modal-edit-tag-text-color-label;
}

.a-edit-modal-edit-tag-text-color-input {
  grid-area: a-edit-modal-edit-tag-text-color-input;
}

.a-edit-modal-edit-tag-preview {
  grid-area: a-edit-modal-edit-tag-preview;
  justify-self: center;
}

.a-edit-modal-edit-tag-submit-this {
  grid-area: a-edit-modal-edit-tag-submit-this;
  align-self: center;
}

.a-edit-modal-edit-tag-submit-all {
  grid-area: a-edit-modal-edit-tag-submit-all;
  align-self: center;
}

.c-edit-modal-delete-tag {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3em 3em;
  grid-template-areas: "a-edit-modal-delete-tag-submit-this" "a-edit-modal-delete-tag-submit-all";
}

.a-edit-modal-delete-tag-submit-this {
  grid-area: a-edit-modal-delete-tag-submit-this;
  align-self: center;
}

.a-edit-modal-delete-tag-submit-all {
  grid-area: a-edit-modal-delete-tag-submit-all;
  align-self: center;
}

.c-edit-modal-add-completion {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto auto 2em;
  grid-template-areas: "c-edit-modal-add-completion-type" "c-edit-modal-add-completion-date" "c-edit-modal-add-completion-time" "c-edit-modal-add-completion-minutes" "c-edit-modal-add-completion-seconds" "a-edit-modal-add-completion-submit";
}

.c-edit-modal-add-completion-type {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-edit-modal-add-completion-type-label" "a-edit-modal-add-completion-type-input";
}

.a-edit-modal-add-completion-type-label {
  grid-area: a-edit-modal-add-completion-type-label;
}

.a-edit-modal-add-completion-type-input {
  grid-area: a-edit-modal-add-completion-type-input;
}

.c-edit-modal-add-completion-date {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-edit-modal-add-completion-date-label" "a-edit-modal-add-completion-date-input";
}

.a-edit-modal-add-completion-date-label {
  grid-area: a-edit-modal-add-completion-date-label;
}

.a-edit-modal-add-completion-date-input {
  grid-area: a-edit-modal-add-completion-date-input;
}

.c-edit-modal-add-completion-hours {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-edit-modal-add-completion-hours-label" "a-edit-modal-add-completion-hours-input";
}

.a-edit-modal-add-completion-hours-label {
  grid-area: a-edit-modal-add-completion-hours-label;
}

.a-edit-modal-add-completion-hours-input {
  grid-area: a-edit-modal-add-completion-hours-input;
}

.c-edit-modal-add-completion-minutes {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-edit-modal-add-completion-minutes-label" "a-edit-modal-add-completion-minutes-input";
}

.a-edit-modal-add-completion-minutes-label {
  grid-area: a-edit-modal-add-completion-minutes-label;
}

.a-edit-modal-add-completion-minutes-input {
  grid-area: a-edit-modal-add-completion-minutes-input;
}

.c-edit-modal-add-completion-seconds {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-edit-modal-add-completion-seconds-label" "a-edit-modal-add-completion-seconds-input";
}

.a-edit-modal-add-completion-seconds-label {
  grid-area: a-edit-modal-add-completion-seconds-label;
}

.a-edit-modal-add-completion-seconds-input {
  grid-area: a-edit-modal-add-completion-seconds-input;
}

.a-edit-modal-add-completion-submit {
  grid-area: a-edit-modal-add-completion-submit;
}

.c-edit-modal-edit-completion {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto 2em;
  grid-template-areas: "c-edit-modal-edit-completion-date" "c-edit-modal-edit-completion-hours" "c-edit-modal-edit-completion-minutes" "c-edit-modal-edit-completion-seconds" "a-edit-modal-edit-completion-submit";
}

.c-edit-modal-edit-completion-date {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-edit-modal-edit-completion-date-label" "a-edit-modal-edit-completion-date-input";
}

.a-edit-modal-edit-completion-date-label {
  grid-area: a-edit-modal-edit-completion-date-label;
}

.a-edit-modal-edit-completion-date-input {
  grid-area: a-edit-modal-edit-completion-date-input;
}

.c-edit-modal-edit-completion-hours {
  grid-area: c-edit-modal-edit-completion-hours;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-edit-modal-edit-completion-hours-label" "a-edit-modal-edit-completion-hours-input";
}

.a-edit-modal-edit-completion-hours-label {
  grid-area: a-edit-modal-edit-completion-hours-label;
}

.a-edit-modal-edit-completion-hours-input {
  grid-area: a-edit-modal-edit-completion-hours-input;
}

.c-edit-modal-edit-completion-minutes {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-edit-modal-edit-completion-minutes-label" "a-edit-modal-edit-completion-minutes-input";
}

.a-edit-modal-edit-completion-minutes-label {
  grid-area: a-edit-modal-edit-completion-minutes-label;
}

.a-edit-modal-edit-completion-minutes-input {
  grid-area: a-edit-modal-edit-completion-minutes-input;
}

.c-edit-modal-edit-completion-seconds {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-edit-modal-edit-completion-seconds-label" "a-edit-modal-edit-completion-seconds-input";
}

.a-edit-modal-edit-completion-seconds-label {
  grid-area: a-edit-modal-edit-completion-seconds-label;
}

.a-edit-modal-edit-completion-seconds-input {
  grid-area: a-edit-modal-edit-completion-seconds-input;
}

.a-edit-modal-edit-completion-submit {
  grid-area: a-edit-modal-edit-completion-submit;
}

.c-edit-modal-add-review {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 2.5em;
  grid-template-areas: "c-edit-modal-add-review-score" "c-edit-modal-add-review-text" "a-edit-modal-add-review-submit";
}

.c-edit-modal-add-review-score {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em auto;
  grid-template-areas: "a-edit-modal-add-review-score-label" "c-edit-modal-add-review-score-input";
  padding-bottom: 1em;
}

.a-edit-modal-add-review-score-label {
  grid-area: a-edit-modal-add-review-score-label;
}

.c-edit-modal-add-review-score-input {
  display: grid;
  grid-template-columns: 1fr 2em;
  grid-template-rows: 1fr;
  grid-template-areas: "a-edit-modal-add-review-score-input a-edit-modal-add-review-score-preview";
}

.a-edit-modal-add-review-score-input {
  grid-area: a-edit-modal-add-review-score-input;
  align-self: center;
}

.a-edit-modal-add-review-score-preview {
  grid-area: a-edit-modal-add-review-score-preview;
  align-self: center;
}

.c-edit-modal-add-review-text {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 7em;
  grid-template-areas: "a-edit-modal-add-review-text-label" "a-edit-modal-add-review-text-input";
}

.a-edit-modal-add-review-text-label {
  grid-area: a-edit-modal-add-review-text-label;
}

.a-edit-modal-add-review-text-input {
  grid-area: a-edit-modal-add-review-text-input;
}

.a-edit-modal-add-review-submit {
  grid-area: a-edit-modal-add-review-submit;
}

.c-edit-modal-edit-review {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 2.5em;
  grid-template-areas: "c-edit-modal-edit-review-score" "c-edit-modal-edit-review-text" "a-edit-modal-edit-review-submit";
}

.c-edit-modal-edit-review-score {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em auto;
  grid-template-areas: "a-edit-modal-edit-review-score-label" "c-edit-modal-edit-review-score-input";
  padding-bottom: 1em;
}

.a-edit-modal-edit-review-score-label {
  grid-area: a-edit-modal-edit-review-score-label;
}

.c-edit-modal-edit-review-score-input {
  display: grid;
  grid-template-columns: 1fr 2em;
  grid-template-rows: 1fr;
  grid-template-areas: "a-edit-modal-edit-review-score-input a-edit-modal-edit-review-score-preview";
}

.a-edit-modal-edit-review-score-input {
  grid-area: a-edit-modal-edit-review-score-input;
  align-self: center;
}

.a-edit-modal-edit-review-score-preview {
  grid-area: a-edit-modal-edit-review-score-preview;
  align-self: center;
}

.c-edit-modal-edit-review-text {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 10em;
  grid-template-areas: "a-edit-modal-edit-review-text-label" "a-edit-modal-edit-review-text-input";
}

.a-edit-modal-edit-review-text-label {
  grid-area: a-edit-modal-edit-review-text-label;
}

.a-edit-modal-edit-review-text-input {
  grid-area: a-edit-modal-edit-review-text-input;
}

.a-edit-modal-edit-review-submit {
  grid-area: a-edit-modal-edit-review-submit;
}

.c-edit-modal-edit-timer-playthrough {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto 2em;
  grid-template-areas: "c-edit-modal-edit-timer-playthrough-hours" "c-edit-modal-edit-timer-playthrough-minutes" "c-edit-modal-edit-timer-playthrough-seconds" "a-edit-modal-edit-timer-playthrough-submit";
}

.c-edit-modal-edit-timer-playthrough-hours {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-edit-modal-edit-timer-playthrough-hours-label" "a-edit-modal-edit-timer-playthrough-hours-input";
}

.a-edit-modal-edit-timer-playthrough-hours-label {
  grid-area: a-edit-modal-edit-timer-playthrough-hours-label;
}

.a-edit-modal-edit-timer-playthrough-hours-input {
  grid-area: a-edit-modal-edit-timer-playthrough-hours-input;
}

.c-edit-modal-edit-timer-playthrough-minutes {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-edit-modal-edit-timer-playthrough-minutes-label" "a-edit-modal-edit-timer-playthrough-minutes-input";
}

.a-edit-modal-edit-timer-playthrough-minutes-label {
  grid-area: a-edit-modal-edit-timer-playthrough-minutes-label;
}

.a-edit-modal-edit-timer-playthrough-minutes-input {
  grid-area: a-edit-modal-edit-timer-playthrough-minutes-input;
}

.c-edit-modal-edit-timer-playthrough-seconds {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-edit-modal-edit-timer-playthrough-seconds-label" "a-edit-modal-edit-timer-playthrough-seconds-input";
}

.a-edit-modal-edit-timer-playthrough-seconds-label {
  grid-area: a-edit-modal-edit-timer-playthrough-seconds-label;
}

.a-edit-modal-edit-timer-playthrough-seconds-input {
  grid-area: a-edit-modal-edit-timer-playthrough-seconds-input;
}

.a-edit-modal-edit-timer-playthrough-submit {
  grid-area: a-edit-modal-edit-timer-playthrough-submit;
}

.c-edit-modal-edit-timer-total {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto 2em;
  grid-template-areas: "c-edit-modal-edit-timer-total-hours" "c-edit-modal-edit-timer-total-minutes" "c-edit-modal-edit-timer-total-seconds" "a-edit-modal-edit-timer-total-submit";
}

.c-edit-modal-edit-timer-total-hours {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-edit-modal-edit-timer-total-hours-label" "a-edit-modal-edit-timer-total-hours-input";
}

.a-edit-modal-edit-timer-total-hours-label {
  grid-area: a-edit-modal-edit-timer-total-hours-label;
}

.a-edit-modal-edit-timer-total-hours-input {
  grid-area: a-edit-modal-edit-timer-total-hours-input;
}

.c-edit-modal-edit-timer-total-minutes {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-edit-modal-edit-timer-total-minutes-label" "a-edit-modal-edit-timer-total-minutes-input";
}

.a-edit-modal-edit-timer-total-minutes-label {
  grid-area: a-edit-modal-edit-timer-total-minutes-label;
}

.a-edit-modal-edit-timer-total-minutes-input {
  grid-area: a-edit-modal-edit-timer-total-minutes-input;
}

.c-edit-modal-edit-timer-total-seconds {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-edit-modal-edit-timer-total-seconds-label" "a-edit-modal-edit-timer-total-seconds-input";
}

.a-edit-modal-edit-timer-total-seconds-label {
  grid-area: a-edit-modal-edit-timer-total-seconds-label;
}

.a-edit-modal-edit-timer-total-seconds-input {
  grid-area: a-edit-modal-edit-timer-total-seconds-input;
}

.a-edit-modal-edit-timer-total-submit {
  grid-area: a-edit-modal-edit-timer-total-submit;
}

.hours {
  width: 7em;
}

.date {
  width: 10em;
}

.input-disabled {
  color: #444444 !important;
  background-color: #191919 !important;
  border-color: #2f2f2f !important;
}
.input-disabled::placeholder {
  color: #5e5e5e;
}
.input-disabled:hover {
  cursor: not-allowed;
}
.input-disabled::placeholder {
  color: #444444 !important;
  opacity: 1; /* Firefox */
}

.icon-disabled {
  color: #444444 !important;
}
.icon-disabled::placeholder {
  color: #5e5e5e;
}
.icon-disabled:hover {
  cursor: not-allowed !important;
}

.library-plat-disabled {
  color: #5e5e5e;
}

.version-count-text {
  font-style: italic;
  color: #AAAAAA;
  font-size: 1.2rem;
  padding-right: 0.2em;
}

.background-any {
  background-color: #1daf2c;
  transition: 200ms;
}
.background-any:hover {
  background-color: #1a9426;
  cursor: pointer;
}

.background-hundred {
  background-color: #029ed2;
  transition: 200ms;
}
.background-hundred:hover {
  background-color: #0082ad;
  cursor: pointer;
}

.background-plat {
  background-color: #ffa500;
  transition: 200ms;
}
.background-plat:hover {
  background-color: #e19200;
  cursor: pointer;
}

.playthrough-started {
  background-color: #018d01;
  border-color: #016a01;
  color: #ede1d5;
}
.playthrough-started:hover {
  background-color: #016a01 !important;
}

@media only screen and (max-width: 1300px) {
  .c-edit-library-version-main {
    grid-template-columns: min-content 3em 6em 3em 4.5em 5em 10em 15.5em;
  }
  .a-edit-library-version-edition {
    font-size: 0.9rem;
  }
  .c-edit-library-stats {
    grid-template-rows: auto 4em 4em 4em auto auto;
  }
  .c-edit-library-review-chart {
    grid-template-columns: 60em;
  }
  .c-edit-library-stats-timer-playthrough-actions {
    grid-template-columns: 7em 7em 7em;
  }
  .a-edit-library-stats-timer-total-set {
    width: 6em;
  }
}
@media only screen and (max-width: 1000px) {
  .c-edit-library-version-main {
    display: grid;
    grid-template-columns: 6em 5em 4em 16.5em;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "c-edit-library-version-count a-edit-library-version-price a-edit-library-version-region a-edit-library-version-edition" "a-edit-library-version-bought a-edit-library-version-shop a-edit-library-version-condition a-edit-library-version-conditions";
  }
  .a-edit-library-version-edition {
    max-width: 17em;
  }
  .a-edit-library-version-price {
    justify-self: center;
  }
  .a-edit-library-version-condition {
    justify-self: center;
  }
  .a-edit-library-version-conditions {
    justify-self: center;
  }
  .a-edit-library-version-shop {
    justify-self: center;
  }
  .a-edit-library-stats-completion-any-title {
    font-size: 2rem;
  }
  .a-edit-library-stats-completion-hundred-title {
    font-size: 2rem;
  }
  .a-edit-library-stats-completion-plat-title {
    font-size: 2rem;
  }
  .a-edit-library-stats-completion-any-date {
    font-size: 1.2rem;
  }
  .a-edit-library-stats-completion-hundred-date {
    font-size: 1.2rem;
  }
  .a-edit-library-stats-completion-plat-date {
    font-size: 1.2rem;
  }
  .a-edit-library-stats-completion-any-last {
    font-size: 1.2rem;
  }
  .a-edit-library-stats-completion-hundred-last {
    font-size: 1.2rem;
  }
  .a-edit-library-stats-completion-plat-last {
    font-size: 1.2rem;
  }
  .a-edit-library-stats-completion-any-time {
    font-size: 1.2rem;
  }
  .a-edit-library-stats-completion-hundred-time {
    font-size: 1.2rem;
  }
  .a-edit-library-stats-completion-plat-time {
    font-size: 1.2rem;
  }
  .a-edit-library-stats-completion-any-times {
    font-size: 1.2rem;
  }
  .a-edit-library-stats-completion-hundred-times {
    font-size: 1.2rem;
  }
  .a-edit-library-stats-completion-plat-times {
    font-size: 1.2rem;
  }
  .c-edit-library-stats-completion {
    grid-column-gap: 1em;
  }
  .c-edit-library-review-chart {
    grid-template-columns: 40.5em;
  }
  .c-edit-library-stats-timers {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "a-edit-library-stats-timer-playthrough-start" "c-edit-library-stats-timer-playthrough" "a-edit-library-stats-timer-total-start" "c-edit-library-stats-timer-total";
  }
  .a-edit-library-stats-timer-playthrough-start {
    margin-right: 0em;
  }
  .a-edit-library-stats-timer-playthrough-display {
    padding-bottom: 0.5em;
  }
}
@media only screen and (max-width: 870px) {
  .modal-content {
    width: 40em;
  }
  .c-edit-modal-any-labels {
    grid-template-columns: 12em 6em 10em 5em;
  }
  .c-edit-modal-any-add {
    grid-template-columns: 12em 6em 10em 5em;
  }
}
@media only screen and (max-width: 730px) {
  .modal-content {
    width: 23em;
  }
  .c-edit-modal-any-labels {
    grid-template-columns: 7em 5em 5em 4em;
    column-gap: 0.5em;
    padding-bottom: 1em;
  }
  .c-edit-modal-any-add {
    grid-template-columns: 7em 5em 5em 4em;
    column-gap: 0.5em;
  }
}
@media only screen and (max-width: 670px) {
  .c-edit-library-version-main {
    display: grid;
    grid-template-columns: 6em 6em 5.5em;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: "c-edit-library-version-count a-edit-library-version-price a-edit-library-version-region" "a-edit-library-version-bought a-edit-library-version-condition a-edit-library-version-conditions" "a-edit-library-version-edition a-edit-library-version-edition a-edit-library-version-shop";
  }
  .a-edit-library-version-edition {
    max-width: 17em;
  }
  .c-edit-library-review-chart {
    grid-template-columns: 26em;
  }
  .a-edit-library-stats-timer-playthrough-display {
    font-size: 4.5rem;
  }
  .a-edit-library-stats-timer-total-display {
    font-size: 4.5rem;
  }
  .c-edit-library-stats-completion {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: "c-edit-library-stats-completion-any" "c-edit-library-stats-completion-hundred" "c-edit-library-stats-completion-plat";
    grid-gap: 1em;
  }
  .c-edit-library-stats-completion-any {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 4em 2.5em 2.5em 2.5em 2.5em;
  }
  .c-edit-library-stats-completion-hundred {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 4em 2.5em 2.5em 2.5em 2.5em;
  }
  .c-edit-library-stats-completion-plat {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 4em 2.5em 2.5em 2.5em 2.5em;
  }
}
.c-top {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto auto auto 4em auto;
  grid-template-areas: "a-top-label" "a-top-navigation" "c-top-filters" "c-top-search-game" "a-top-share" "c-top-games";
}

.a-top-label {
  color: #D9A036;
  grid-area: a-top-label;
}

.a-top-navigation {
  grid-area: a-top-navigation;
  padding-bottom: 2em;
}

.c-top-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: "c-top-filter-platform c-top-filter-completion";
  justify-content: space-between;
  grid-gap: 2em;
}

.c-top-filter-platform {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-top-filter-platform-label" "a-top-filter-platform-input";
}

.a-top-filter-platform-label {
  grid-area: a-top-filter-platform-label;
}

.a-top-filter-platform-input {
  grid-area: a-top-filter-platform-input;
}

.c-top-filter-completion {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-top-filter-completion-label" "a-top-filter-completion-input";
}

.a-top-filter-completion-label {
  grid-area: a-top-filter-completion-label;
}

.a-top-filter-completion-input {
  grid-area: a-top-filter-completion-input;
}

.c-top-actions {
  display: grid;
  grid-template-columns: 10em 10em;
  grid-template-rows: auto;
  grid-template-areas: "a-top-actions-share a-top-actions-add";
  grid-gap: 1em;
}

.a-top-actions-share {
  grid-area: a-top-actions-share;
  width: 10em;
}

.a-top-actions-add {
  grid-area: a-top-actions-add;
  width: 10em;
}

.c-top-search-game {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-top-search-game-label" "a-top-search-game-input";
}

.a-top-search-game-label {
  grid-area: a-top-search-game-label;
}

.a-top-search-game-input {
  grid-area: a-top-search-game-input;
}

.c-top-games {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
}

.c-top-row {
  display: grid;
  grid-template-columns: 2em 4em 5em auto;
  grid-template-rows: 6.5em;
  grid-template-areas: "a-top-handle a-top-position a-top-cover c-top-full-info";
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 4px 18px 0 rgba(0, 0, 0, 0.19);
  background-color: #262626;
  border-radius: 6px;
  margin-bottom: 1em;
  padding: 0.5em;
}

.a-top-handle {
  grid-area: a-top-handle;
  color: #AAAAAA;
  margin-left: 0.5em;
  align-self: center;
  justify-self: end;
}

.a-top-position {
  grid-area: a-top-position;
  color: #f7f7f7;
  font-size: 1.75rem;
  align-self: center;
  justify-self: center;
}

.a-top-cover {
  grid-area: a-top-cover;
  display: flex;
  align-items: center;
  justify-self: center;
}

.game-cover {
  width: 75px;
  height: 100px;
}

.c-top-full-info {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 1fr 1fr;
  grid-auto-flow: row;
  grid-template-areas: "c-top-name" "c-top-info";
  padding-left: 0.7em;
}

.c-top-name {
  display: grid;
  grid-template-columns: min-content auto;
  grid-auto-flow: row;
  grid-template-areas: "a-top-name a-top-year";
  align-items: center;
  font-size: 1.5rem;
  padding-top: 0.2em;
}

.a-top-name {
  grid-area: a-top-name;
  max-width: 41em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: #f7f7f7;
  padding-right: 0.6em;
  font-weight: bold;
}
.a-top-name :link {
  transition: 300ms;
  color: #f7f7f7;
  text-decoration: none;
}
.a-top-name :visited {
  color: #f7f7f7;
  text-decoration: none;
}
.a-top-name :hover {
  color: #D9A036;
  text-decoration: none;
}
.a-top-name :active {
  text-decoration: none;
}

.a-top-year {
  grid-area: a-top-year;
  color: #9A9A9A;
  align-self: center;
}

.c-top-info {
  display: grid;
  grid-template-columns: 5em 3em;
  grid-template-rows: 1fr;
  grid-template-areas: "a-top-platform a-top-score";
}

.a-top-platform {
  grid-area: a-top-platform;
  align-self: center;
  justify-self: center;
}

.a-top-score {
  font-size: 1.7rem;
  grid-area: a-top-score;
  align-self: center;
  justify-self: center;
}

.c-top-share {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em 3em 3em auto auto 4em auto;
  grid-template-areas: "a-top-share-link-label" "a-top-share-link-input" "a-top-share-image-label" "a-top-share-image-help" "c-top-share-image-settings" "c-top-share-image-templates" "a-top-share-image-generate" "c-top-share-image-preview";
}

.a-top-share-link-label {
  grid-area: a-top-share-link-label;
}

.a-top-share-link-input {
  grid-area: a-top-share-link-input;
  border-bottom: 2px solid #636363;
}

.a-top-share-image-label {
  grid-area: a-top-share-image-label;
}

.a-top-share-image-help {
  grid-area: a-top-share-image-help;
}

.c-top-share-image-settings {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto;
  grid-template-areas: "c-top-share-image-settings-row-1" "c-top-share-image-settings-row-2" "c-top-share-image-settings-row-3" "c-top-share-image-settings-row-4";
}

.c-top-share-image-settings-row-1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: "c-top-share-image-settings-amount c-top-share-image-settings-game";
  grid-gap: 1em;
}

.c-top-share-image-settings-amount {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-top-share-image-settings-amount-label" "a-top-share-image-settings-amount-input";
}

.a-top-share-image-settings-amount-label {
  grid-area: a-top-share-image-settings-amount-label;
}

.a-top-share-image-settings-amount-input {
  grid-area: a-top-share-image-settings-amount-input;
}

.c-top-share-image-settings-game {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-top-share-image-settings-game-label" "a-top-share-image-settings-game-input";
}

.a-top-share-image-settings-game-label {
  grid-area: a-top-share-image-settings-game-label;
}

.a-top-share-image-settings-game-input {
  grid-area: a-top-share-image-settings-game-input;
}

.c-top-share-image-settings-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: "c-top-share-image-settings-platform c-top-share-image-settings-completion";
  grid-gap: 1em;
}

.c-top-share-image-settings-platform {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-top-share-image-settings-platform-label" "a-top-share-image-settings-platform-input";
}

.a-top-share-image-settings-platform-label {
  grid-area: a-top-share-image-settings-platform-label;
}

.a-top-share-image-settings-platform-input {
  grid-area: a-top-share-image-settings-platform-input;
}

.c-top-share-image-settings-completion {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-top-share-image-settings-completion-label" "a-top-share-image-settings-completion-input";
}

.a-top-share-image-settings-completion-label {
  grid-area: a-top-share-image-settings-completion-label;
}

.a-top-share-image-settings-completion-input {
  grid-area: a-top-share-image-settings-completion-input;
}

.c-top-share-image-settings-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: "c-top-share-image-settings-show-completion c-top-share-image-settings-show-platform";
  grid-gap: 1em;
}

.c-top-share-image-settings-show-completion {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-top-share-image-settings-show-completion-label" "a-top-share-image-settings-show-completion-input";
}

.a-top-share-image-settings-show-completion-label {
  grid-area: a-top-share-image-settings-show-completion-label;
}

.a-top-share-image-settings-show-completion-input {
  grid-area: a-top-share-image-settings-show-completion-input;
}

.c-top-share-image-settings-show-platform {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-top-share-image-settings-show-platform-label" "a-top-share-image-settings-show-platform-input";
}

.a-top-share-image-settings-show-platform-label {
  grid-area: a-top-share-image-settings-show-platform-label;
}

.a-top-share-image-settings-show-platform-input {
  grid-area: a-top-share-image-settings-show-platform-input;
}

.c-top-share-image-settings-row-4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: "c-top-share-image-settings-show-score c-top-share-image-settings-order-positions";
  grid-gap: 1em;
}

.c-top-share-image-settings-show-score {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-top-share-image-settings-show-score-label" "a-top-share-image-settings-show-score-input";
}

.a-top-share-image-settings-show-score-label {
  grid-area: a-top-share-image-settings-show-score-label;
}

.a-top-share-image-settings-show-score-input {
  grid-area: a-top-share-image-settings-show-score-input;
}

.c-top-share-image-settings-order-positions {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-top-share-image-settings-order-positions-label" "a-top-share-image-settings-order-positions-input";
}

.a-top-share-image-settings-order-positions-label {
  grid-area: a-top-share-image-settings-order-positions-label;
}

.a-top-share-image-settings-order-positions-input {
  grid-area: a-top-share-image-settings-order-positions-input;
}

.c-top-share-image-templates {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 1em;
  padding-bottom: 1em;
}

.a-top-share-image-generate {
  grid-area: a-top-share-image-generate;
}

.a-top-share-image-preview {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
  border: 3px solid #636363;
}

.c-top-share-image-preview-1 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
}

.c-top-share-image-preview-1-row {
  display: grid;
  grid-template-columns: 4em 6em auto;
  grid-template-rows: 6.5em;
  grid-template-areas: "a-top-share-image-preview-1-position a-top-share-image-preview-1-cover c-top-share-image-preview-1-full-info";
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 4px 18px 0 rgba(0, 0, 0, 0.19);
  background-color: #262626;
  border-radius: 6px;
  padding: 0.5em;
  margin-bottom: 1em;
}

.a-top-share-image-preview-1-position {
  grid-area: a-top-share-image-preview-1-position;
  color: #f7f7f7;
  font-size: 1.75rem;
  align-self: center;
  justify-self: center;
}

.a-top-share-image-preview-1-cover {
  grid-area: a-top-share-image-preview-1-cover;
  display: flex;
  align-items: center;
  justify-self: center;
  padding-right: 0.5em;
}

/*.game-cover {
  width: 75px;
  height: 100px;
}*/
.c-top-share-image-preview-1-full-info {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 1fr 1fr;
  grid-auto-flow: row;
  grid-template-areas: "c-top-share-image-preview-1-name" "c-top-share-image-preview-1-info";
  padding-left: 0.7em;
}

.c-top-share-image-preview-1-name {
  display: grid;
  grid-template-columns: min-content auto;
  grid-auto-flow: row;
  grid-template-areas: "a-top-share-image-preview-1-name a-top-share-image-preview-1-year";
  align-items: center;
  font-size: 1.5rem;
  padding-top: 0.2em;
}

.a-top-share-image-preview-1-name {
  grid-area: a-top-share-image-preview-1-name;
  max-width: 20em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: #f7f7f7;
  padding-right: 0.6em;
  font-weight: bold;
}

.a-top-share-image-preview-1-year {
  grid-area: a-top-share-image-preview-1-year;
  color: #9A9A9A;
  padding-right: 1em;
  align-self: center;
}

.c-top-share-image-preview-1-info {
  display: grid;
  grid-template-columns: 5em 3em;
  grid-template-rows: 1fr;
  grid-template-areas: "a-top-share-image-preview-1-platform a-top-share-image-preview-1-score";
}

.a-top-share-image-preview-1-platform {
  grid-area: a-top-share-image-preview-1-platform;
  align-self: center;
  justify-self: center;
}

.a-top-share-image-preview-1-score {
  font-size: 1.7rem;
  grid-area: a-top-share-image-preview-1-score;
  align-self: center;
  justify-self: center;
}

.c-top-share-image-preview {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "c-top-share-image-preview-1";
  border: 3px solid #636363;
  padding: 1em;
  background-color: #191919;
}

.c-top-modal-add-game {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em 1fr;
  grid-template-areas: "a-top-modal-add-game-name-label" "a-top-modal-add-game-name-input" "c-top-modal-add-game-games-placeholder";
}

.a-top-modal-add-game-name-label {
  grid-area: a-top-modal-add-game-name-label;
}

.a-top-modal-add-game-name-input {
  grid-area: a-top-modal-add-game-name-input;
}

.c-top-modal-add-game-games-placeholder {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-auto-flow: row;
  grid-template-areas: ".";
}

.c-top-modal-add-game-game {
  display: grid;
  grid-template-columns: 6em 38em 6em;
  grid-template-rows: auto;
  grid-template-areas: "c-top-modal-add-game-game-cover a-top-modal-add-game-game-name a-top-modal-add-game-game-add";
  border-bottom: 1px #636363 solid;
  padding-bottom: 0.5em;
  padding-top: 0.5em;
}

.c-top-modal-add-game-game-cover {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3em 7em;
  grid-template-areas: "a-top-modal-add-game-game-platform" "a-top-modal-add-game-game-cover";
}

.a-top-modal-add-game-game-cover {
  grid-area: a-top-modal-add-game-game-cover;
  align-self: center;
}

.a-top-modal-add-game-game-platform {
  grid-area: a-top-modal-add-game-game-platform;
  align-self: center;
  font-size: 1rem !important;
}

.a-top-modal-add-game-game-name {
  grid-area: a-top-modal-add-game-game-name;
  max-width: 38em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: #f7f7f7;
  padding-right: 1em;
  font-weight: bold;
  align-self: center;
}

.a-top-modal-add-game-game-add {
  grid-area: a-top-modal-add-game-game-add;
  align-self: center;
  margin-right: 1em;
}

.c-top-modal-top-add-platform {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em 3em;
  grid-template-areas: "a-top-modal-top-add-platform-label" "a-top-modal-top-add-platform-input" "a-top-modal-top-add-platform-submit";
}

.a-top-modal-top-add-platform-label {
  grid-area: a-top-modal-top-add-platform-label;
}

.a-top-modal-top-add-platform-input {
  grid-area: a-top-modal-top-add-platform-input;
}

.a-top-modal-top-add-platform-submit {
  grid-area: a-top-modal-top-add-platform-submit;
}

.c-top-save-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em auto;
  grid-template-areas: "a-top-save-description" "c-top-save-actions";
}

.a-top-save-description {
  grid-area: a-top-save-description;
}

.c-top-save-actions {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3em 2em;
  grid-template-areas: "a-top-save-actions-save" "a-top-save-actions-discard";
}

.a-top-save-actions-save {
  grid-area: a-top-save-actions-save;
}

.a-top-save-actions-discard {
  grid-area: a-top-save-actions-discard;
}

.top-button-active {
  background-color: #018d01 !important;
  border-color: #016a01 !important;
  color: #ede1d5 !important;
}
.top-button-active:hover {
  background-color: #016a01 !important;
}

.score-0 {
  font-weight: bold;
  color: #ee1700;
}

.score-1 {
  font-weight: bold;
  color: #ee1700;
}

.score-2 {
  font-weight: bold;
  color: #ee1700;
}

.score-3 {
  font-weight: bold;
  color: #ee1700;
}

.score-4 {
  font-weight: bold;
  color: #eb4300;
}

.score-5 {
  font-weight: bold;
  color: #eb4300;
}

.score-6 {
  font-weight: bold;
  color: #0297ff;
}

.score-7 {
  font-weight: bold;
  color: #0297ff;
}

.score-8 {
  font-weight: bold;
  color: #009b00;
}

.score-9 {
  font-weight: bold;
  color: #009b00;
}

.score-10 {
  font-weight: bold;
  color: #ff1784;
}

.full-score {
  font-size: 1.5rem;
}

.modal-add-top-button-icon {
  display: none !important;
}

@media only screen and (max-width: 1300px) {
  .c-top-row {
    display: grid;
    grid-template-columns: 2em 4em 5em auto;
    grid-template-rows: 6.5em;
    grid-template-areas: "a-top-handle a-top-position a-top-cover c-top-full-info";
  }
  .c-top-name {
    font-size: 1.45rem;
  }
  .a-top-name {
    max-width: 29em;
  }
}
@media only screen and (max-width: 1000px) {
  .c-top-row {
    display: grid;
    grid-template-columns: 2em 4em 5em auto;
    grid-template-rows: 6.5em;
    grid-template-areas: "a-top-handle a-top-position a-top-cover c-top-full-info";
  }
  .c-top-name {
    font-size: 1.1rem;
  }
  .a-top-name {
    max-width: 21em;
  }
}
@media only screen and (max-width: 870px) {
  .modal-content {
    width: 40em;
  }
  .c-top-modal-add-game-game {
    grid-template-columns: 6em 28em 6em;
  }
  .a-top-modal-add-game-game-name {
    max-width: 27em;
  }
  .modal-add-top-button {
    display: block !important;
  }
  .modal-add-top-button-icon {
    display: none !important;
  }
  .a-top-share-image-preview-1-name {
    max-width: 13em;
  }
}
@media only screen and (max-width: 730px) {
  .modal-content {
    width: 23em;
  }
  .c-top-modal-add-game-game {
    grid-template-columns: 5.3em 16em 1.5em;
  }
  .c-top-modal-add-game-game-name {
    display: grid;
    grid-template-columns: 17em;
    grid-template-rows: 1fr;
    grid-template-areas: "a-wishlist-modal-add-game-game-name";
  }
  .a-top-modal-add-game-game-name {
    max-width: 15em;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.2em;
    max-height: 2.4em;
    align-self: center;
  }
  .modal-add-top-button {
    display: none !important;
  }
  .modal-add-top-button-icon {
    display: block !important;
  }
  .c-top-share-image-preview-1-name {
    grid-template-columns: 10.5em;
    grid-template-rows: 2em 2em;
    grid-template-areas: "a-top-share-image-preview-1-name" "a-top-share-image-preview-1-year";
    font-size: 1rem;
  }
  .a-top-share-image-preview-1-name {
    max-width: 20em;
    padding-right: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.1em;
    max-height: 2.2em;
    font-size: 0.9rem;
  }
  .c-top-share-image-preview-1-row {
    grid-template-columns: 3em 5em auto;
  }
}
@media only screen and (max-width: 670px) {
  .c-top-row {
    grid-template-columns: 1.5em 3em 5em auto;
  }
  .c-top-filters {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: "c-top-filter-platform" "c-top-filter-completion";
    grid-gap: 0;
  }
  .a-top-position {
    font-size: 1.3rem;
    font-weight: bold;
  }
  .a-top-name {
    max-width: 16em;
    padding-right: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.1em;
    max-height: 2.2em;
  }
  .c-top-name {
    display: grid;
    grid-template-columns: 14.5em;
    grid-template-rows: 2em 2em;
    grid-auto-flow: row;
    grid-template-areas: "a-top-name" "a-top-year";
    align-items: center;
    font-size: 1rem;
    padding-top: 0.2em;
  }
  .a-top-shop {
    font-size: 0.9rem;
  }
  .c-top-platform {
    padding-top: 0.3em;
  }
  .a-top-handle {
    margin-left: 0.1em;
  }
  .c-top-info {
    grid-template-columns: 4em 3em 7.4em;
  }
  .a-top-platform {
    font-size: 0.8rem !important;
  }
  .c-top-platforms {
    padding-bottom: 0em;
    padding-top: 0em;
  }
}
.c-stats {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto;
  grid-template-areas: "a-stats-label" "a-stats-navigation";
}

.a-stats-label {
  grid-area: a-stats-label;
  color: #D9A036;
}

.a-stats-navigation {
  grid-area: a-stats-navigation;
  padding-bottom: 2em;
}

.c-stats-list {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
}

.c-stats-piecharts {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
  justify-items: center;
}

.c-stats-piechart {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "a-stats-piechart";
  padding-top: 2em;
}

.a-stats-piechart {
  grid-area: a-stats-piechart;
}

.c-stats-barcharts {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  justify-items: center;
}

.c-stats-barchart {
  display: grid;
  grid-template-columns: 80em;
  grid-template-rows: 1fr;
  grid-template-areas: "a-stats-barchart";
  padding-top: 2em;
}

.a-stats-barchart {
  grid-area: a-stats-barchart;
}

@media only screen and (max-width: 1300px) {
  .c-stats-piecharts {
    grid-template-columns: 1fr 1fr;
  }
  .c-stats-barchart {
    grid-template-columns: 60em;
  }
}
@media only screen and (max-width: 1000px) {
  .c-stats-piecharts {
    grid-template-columns: 1fr;
  }
  .c-stats-barchart {
    grid-template-columns: 40em;
  }
}
@media only screen and (max-width: 670px) {
  .c-stats-piecharts {
    grid-template-columns: 1fr;
  }
  .c-stats-barchart {
    grid-template-columns: 25em;
  }
}
.c-completion {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto auto auto auto;
  grid-template-areas: "a-completion-label" "a-completion-navigation" "c-completion-search-game" "c-completion-filter" "c-completions";
}

.a-completion-label {
  grid-area: a-completion-label;
}

.a-completion-navigation {
  grid-area: a-completion-navigation;
  padding-bottom: 2em;
}

.c-completion-search-game {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-completion-search-game-label" "a-completion-search-game-input";
}

.a-completion-search-game-label {
  grid-area: a-completion-search-game-label;
}

.a-completion-search-game-input {
  grid-area: a-completion-search-game-input;
}

.c-completion-filter {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-completion-filter-label" "a-completion-filter-input";
}

.a-completion-filter-label {
  grid-area: a-completion-filter-label;
}

.a-completion-filter-input {
  grid-area: a-completion-filter-input;
}

.c-completions {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
}

.c-completion-row {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 2.5em auto;
  grid-template-areas: "a-completion-name" "c-completion-bottom";
  margin-bottom: 1em;
  border-bottom: 2px solid #373737;
  padding-bottom: 1em;
}

.a-completion-name {
  grid-area: a-completion-name;
  font-size: 1.5rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.c-completion-bottom {
  display: grid;
  grid-template-columns: 10.5em auto;
  grid-template-rows: auto;
  grid-template-areas: "a-completion-cover c-completion-platforms";
}

.a-completion-cover {
  grid-area: a-completion-cover;
  align-self: center;
}

.c-completion-platforms {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 0.5em;
}

.c-completion-platform {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 2em;
  grid-template-areas: "a-completion-platform" "a-completion-platform-completion";
  align-self: center;
  background-color: #272727;
  padding-top: 1.5em;
  padding-bottom: 1em;
}

.a-completion-platform {
  grid-area: a-completion-platform;
  justify-self: center;
  margin-bottom: 0.3em;
}

.a-completion-platform-completion {
  grid-area: a-completion-platform-completion;
  font-weight: bold;
  justify-self: center;
}

.completion-platform-completion-any {
  color: #1daf2c;
  font-size: 1.5rem;
}

.completion-platform-completion-hundred {
  color: #029ed2;
  font-size: 1.5rem;
}

.completion-platform-completion-platinum {
  color: #ffa500;
  font-size: 1.5rem;
}

.completion-platform-completion-none {
  color: #656366;
  font-size: 1.5rem;
}

@media only screen and (max-width: 1300px) {
  .a-completion-platform {
    font-size: 1.2rem;
  }
  .completion-platform-completion-hundred {
    font-size: 1.3rem;
  }
  .c-completion-platforms {
    grid-gap: 0.5em;
  }
}
@media only screen and (max-width: 1000px) {
  .c-completion-platforms {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .completion-platform-completion-any {
    font-size: 1.3rem;
  }
  .completion-platform-completion-hundred {
    font-size: 1.2rem;
  }
  .completion-platform-completion-platinum {
    font-size: 1.3rem;
  }
  .completion-platform-completion-none {
    font-size: 1.3rem;
  }
  .a-completion-platform {
    font-size: 1.1rem;
  }
}
@media only screen and (max-width: 670px) {
  .a-completion-name {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3em;
    max-height: 2.3em;
    font-size: 1.2rem;
    padding-bottom: 0.5em;
  }
  .c-completion-platforms {
    grid-template-columns: 1fr 1fr;
  }
  .c-completion-row {
    grid-template-rows: auto auto;
  }
}
.c-library {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto auto auto 5em auto auto auto auto;
  grid-template-areas: "library-label" "a-library-navigation" "library-platforms" "c-library-timers" "c-library-stats-platform" "c-library-actions" "c-library-filters-base-name" "c-library-filters-wrapper" "c-games-placeholder";
}

.library-label {
  color: #D9A036;
  grid-area: library-label;
}

.a-library-navigation {
  grid-area: a-library-navigation;
  padding-bottom: 2em;
}

.library-platforms {
  grid-area: library-platforms;
}

.c-library-actions {
  display: grid;
  grid-template-columns: 10em 10em 10em 10em;
  grid-template-rows: 4em;
  grid-template-areas: "a-library-filters a-library-reset a-library-active a-library-add-game";
  column-gap: 1em;
}

.a-library-filters {
  grid-area: a-library-filters;
  align-self: center;
}

.a-library-reset {
  grid-area: a-library-reset;
  align-self: center;
}

.a-library-active {
  grid-area: a-library-active;
  align-self: center;
}

.a-library-add-game {
  grid-area: a-library-add-game;
  align-self: center;
}

.a-library-random-game {
  grid-area: a-library-random-game;
  align-self: center;
}

.c-library-stats-platform {
  display: grid;
  grid-template-columns: 11em 11em 11em;
  grid-template-rows: 2em;
  grid-template-areas: "a-library-stat-any a-library-stat-hundred a-library-stat-plat";
  align-items: center;
}

.a-library-stat-any {
  grid-area: a-library-stat-any;
  color: #1daf2c;
  font-weight: bold;
}

.a-library-stat-hundred {
  grid-area: a-library-stat-hundred;
  color: #029ed2;
  font-weight: bold;
}

.a-library-stat-plat {
  grid-area: a-library-stat-plat;
  color: #ffa500;
  font-weight: bold;
}

.c-library-filters-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto 3em;
  grid-template-areas: "c-library-filters" "c-library-tags-wrapper" "c-library-sort" "a-library-submit";
  border: 2px solid #373737;
  padding: 1em;
  margin-bottom: 2em;
}

.c-library-filters {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto auto;
  grid-template-areas: "c-library-filters-base" "c-library-filters-conditions" "c-library-filters-completion" "c-library-filters-version" "c-library-filters-buying";
}

.c-library-filters-base {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3em auto;
  grid-template-areas: "a-library-filters-base-title" "c-library-filters-base-inputs";
  border-bottom: 1px solid #373737;
  padding-bottom: 0.5em;
  margin-bottom: 1em;
}

.a-library-filters-base-title {
  grid-area: a-library-filters-base-title;
}

.c-library-filters-base-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: ". . . .";
  column-gap: 1em;
}

.c-library-filters-base-name {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-library-filters-base-name-label" "a-library-filters-base-name-input";
}

.a-library-filters-base-name-label {
  grid-area: a-library-filters-base-name-label;
}

.a-library-filters-base-name-input {
  grid-area: a-library-filters-base-name-input;
}

.c-library-filters-base-year-from {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-library-filters-base-year-from-label" "a-library-filters-base-year-from-input";
}

.a-library-filters-base-year-from-label {
  grid-area: a-library-filters-base-year-from-label;
}

.a-library-filters-base-year-from-input {
  grid-area: a-library-filters-base-year-from-input;
}

.c-library-filters-base-year-to {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-library-filters-base-year-to-label" "a-library-filters-base-year-to-input";
}

.a-library-filters-base-year-to-label {
  grid-area: a-library-filters-base-year-to-label;
}

.a-library-filters-base-year-to-input {
  grid-area: a-library-filters-base-year-to-input;
}

.c-library-filters-base-bundle {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-library-filters-base-bundle-label" "a-library-filters-base-bundle-input";
}

.a-library-filters-base-bundle-label {
  grid-area: a-library-filters-base-bundle-label;
}

.a-library-filters-base-bundle-input {
  grid-area: a-library-filters-base-bundle-input;
}

.c-library-filters-base-top {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-library-filters-base-top-label" "a-library-filters-base-top-input";
}

.a-library-filters-base-top-label {
  grid-area: a-library-filters-base-top-label;
}

.a-library-filters-base-top-input {
  grid-area: a-library-filters-base-top-input;
}

.c-library-filters-base-playing {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-library-filters-base-playing-label" "a-library-filters-base-playing-input";
}

.a-library-filters-base-playing-label {
  grid-area: a-library-filters-base-playing-label;
}

.a-library-filters-base-playing-input {
  grid-area: a-library-filters-base-playing-input;
}

.c-library-filters-base-genre {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-library-filters-base-genre-label" "a-library-filters-base-genre-input";
}

.a-library-filters-base-genre-label {
  grid-area: a-library-filters-base-genre-label;
}

.a-library-filters-base-genre-input {
  grid-area: a-library-filters-base-genre-input;
}

.c-library-filters-base-score-from {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-library-filters-base-score-from-label" "a-library-filters-base-score-from-input";
}

.a-library-filters-base-score-from-label {
  grid-area: a-library-filters-base-score-from-label;
}

.a-library-filters-base-score-from-input {
  grid-area: a-library-filters-base-score-from-input;
}

.c-library-filters-base-score-to {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-library-filters-base-score-to-label" "a-library-filters-base-score-to-input";
}

.a-library-filters-base-score-to-label {
  grid-area: a-library-filters-base-score-to-label;
}

.a-library-filters-base-score-to-input {
  grid-area: a-library-filters-base-score-to-input;
}

.c-library-filters-base-review {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-library-filters-base-review-label" "a-library-filters-base-review-input";
}

.a-library-filters-base-review-label {
  grid-area: a-library-filters-base-review-label;
}

.a-library-filters-base-review-input {
  grid-area: a-library-filters-base-review-input;
}

.c-library-filters-conditions {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3em auto;
  grid-template-areas: "a-library-filters-conditions-title" "c-library-filters-conditions-inputs";
  border-bottom: 1px solid #373737;
  padding-bottom: 0.5em;
  margin-bottom: 1em;
}

.a-library-filters-conditions-title {
  grid-area: a-library-filters-conditions-title;
}

.c-library-filters-conditions-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: ". . . .";
  column-gap: 1em;
}

.c-library-filters-conditions-main {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-library-filters-conditions-main-label" "a-library-filters-conditions-main-input";
}

.a-library-filters-conditions-main-label {
  grid-area: a-library-filters-conditions-main-label;
}

.a-library-filters-conditions-main-input {
  grid-area: a-library-filters-conditions-main-input;
}

.c-library-filters-conditions-case {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-library-filters-conditions-case-label" "a-library-filters-conditions-case-input";
}

.a-library-filters-conditions-case-label {
  grid-area: a-library-filters-conditions-case-label;
}

.a-library-filters-conditions-case-input {
  grid-area: a-library-filters-conditions-case-input;
}

.c-library-filters-conditions-disc {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-library-filters-conditions-disc-label" "a-library-filters-conditions-disc-input";
}

.a-library-filters-conditions-disc-label {
  grid-area: a-library-filters-conditions-disc-label;
}

.a-library-filters-conditions-disc-input {
  grid-area: a-library-filters-conditions-disc-input;
}

.c-library-filters-conditions-art {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-library-filters-conditions-art-label" "a-library-filters-conditions-art-input";
}

.a-library-filters-conditions-art-label {
  grid-area: a-library-filters-conditions-art-label;
}

.a-library-filters-conditions-art-input {
  grid-area: a-library-filters-conditions-art-input;
}

.c-library-filters-completion {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3em auto;
  grid-template-areas: "a-library-filters-completion-title" "c-library-filters-completion-inputs";
  border-bottom: 1px solid #373737;
  padding-bottom: 0.5em;
  margin-bottom: 1em;
}

.a-library-filters-completion-title {
  grid-area: a-library-filters-completion-title;
}

.c-library-filters-completion-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: ". . . .";
  column-gap: 1em;
}

.c-library-filters-completion-any {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-library-filters-completion-any-label" "a-library-filters-completion-any-input";
}

.a-library-filters-completion-any-label {
  grid-area: a-library-filters-completion-any-label;
}

.a-library-filters-completion-any-input {
  grid-area: a-library-filters-completion-any-input;
}

.c-library-filters-completion-hundred {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-library-filters-completion-hundred-label" "a-library-filters-completion-hundred-input";
}

.a-library-filters-completion-hundred-label {
  grid-area: a-library-filters-completion-hundred-label;
}

.a-library-filters-completion-hundred-input {
  grid-area: a-library-filters-completion-hundred-input;
}

.c-library-filters-completion-plat {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-library-filters-completion-plat-label" "a-library-filters-completion-plat-input";
}

.a-library-filters-completion-plat-label {
  grid-area: a-library-filters-completion-plat-label;
}

.a-library-filters-completion-plat-input {
  grid-area: a-library-filters-completion-plat-input;
}

.c-library-filters-version {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3em auto;
  grid-template-areas: "a-library-filters-version-title" "c-library-filters-version-inputs";
  border-bottom: 1px solid #373737;
  padding-bottom: 0.5em;
  margin-bottom: 1em;
}

.a-library-filters-version-title {
  grid-area: a-library-filters-version-title;
}

.c-library-filters-version-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: ". . . .";
  column-gap: 1em;
}

.c-library-filters-version-edition {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-library-filters-version-edition-label" "a-library-filters-version-edition-input";
}

.a-library-filters-version-edition-label {
  grid-area: a-library-filters-version-edition-label;
}

.a-library-filters-version-edition-input {
  grid-area: a-library-filters-version-edition-input;
}

.c-library-filters-version-region {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-library-filters-version-region-label" "a-library-filters-version-region-input";
}

.a-library-filters-version-region-label {
  grid-area: a-library-filters-version-region-label;
}

.a-library-filters-version-region-input {
  grid-area: a-library-filters-version-region-input;
}

.c-library-filters-version-manual {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-library-filters-version-manual-label" "a-library-filters-version-manual-input";
}

.a-library-filters-version-manual-label {
  grid-area: a-library-filters-version-manual-label;
}

.a-library-filters-version-manual-input {
  grid-area: a-library-filters-version-manual-input;
}

.c-library-filters-version-special {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-library-filters-version-special-label" "a-library-filters-version-special-input";
}

.a-library-filters-version-special-label {
  grid-area: a-library-filters-version-special-label;
}

.a-library-filters-version-special-input {
  grid-area: a-library-filters-version-special-input;
}

.c-library-filters-buying {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3em auto;
  grid-template-areas: "a-library-filters-buying-title" "c-library-filters-buying-inputs";
  border-bottom: 1px solid #373737;
  padding-bottom: 0.5em;
  margin-bottom: 1em;
}

.a-library-filters-buying-title {
  grid-area: a-library-filters-buying-title;
}

.c-library-filters-buying-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: ". . . .";
  column-gap: 1em;
}

.c-library-filters-buying-paid-from {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-library-filters-buying-paid-from-label" "a-library-filters-buying-paid-from-input";
}

.a-library-filters-buying-paid-from-label {
  grid-area: a-library-filters-buying-paid-from-label;
}

.a-library-filters-buying-paid-from-input {
  grid-area: a-library-filters-buying-paid-from-input;
}

.c-library-filters-buying-paid-to {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-library-filters-buying-paid-to-label" "a-library-filters-buying-paid-to-input";
}

.a-library-filters-buying-paid-to-label {
  grid-area: a-library-filters-buying-paid-to-label;
}

.a-library-filters-buying-paid-to-input {
  grid-area: a-library-filters-buying-paid-to-input;
}

.c-library-filters-buying-market-from {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-library-filters-buying-market-from-label" "a-library-filters-buying-market-from-input";
}

.a-library-filters-buying-market-from-label {
  grid-area: a-library-filters-buying-market-from-label;
}

.a-library-filters-buying-market-from-input {
  grid-area: a-library-filters-buying-market-from-input;
}

.c-library-filters-buying-market-to {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-library-filters-buying-market-to-label" "a-library-filters-buying-market-to-input";
}

.a-library-filters-buying-market-to-label {
  grid-area: a-library-filters-buying-market-to-label;
}

.a-library-filters-buying-market-to-input {
  grid-area: a-library-filters-buying-market-to-input;
}

.c-library-filters-buying-date-from {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-library-filters-buying-date-from-label" "a-library-filters-buying-date-from-input";
}

.a-library-filters-buying-date-from-label {
  grid-area: a-library-filters-buying-date-from-label;
}

.a-library-filters-buying-date-from-input {
  grid-area: a-library-filters-buying-date-from-input;
}

.c-library-filters-buying-date-to {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-library-filters-buying-date-to-label" "a-library-filters-buying-date-to-input";
}

.a-library-filters-buying-date-to-label {
  grid-area: a-library-filters-buying-date-to-label;
}

.a-library-filters-buying-date-to-input {
  grid-area: a-library-filters-buying-date-to-input;
}

.c-library-filters-buying-shop {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-library-filters-buying-shop-label" "a-library-filters-buying-shop-input";
}

.a-library-filters-buying-shop-label {
  grid-area: a-library-filters-buying-shop-label;
}

.a-library-filters-buying-shop-input {
  grid-area: a-library-filters-buying-shop-input;
}

.c-library-sort {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: "c-library-sort-column c-library-sort-direction";
  column-gap: 1em;
  padding-bottom: 1em;
}

.c-library-sort-column {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-library-sort-column-label" "a-library-sort-column-input";
}

.a-library-sort-column-label {
  grid-area: a-library-sort-column-label;
}

.a-library-sort-column-input {
  grid-area: a-library-sort-column-input;
}

.c-library-sort-direction {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-library-sort-direction-label" "a-library-sort-direction-input";
}

.a-library-sort-direction-label {
  grid-area: a-library-sort-direction-label;
}

.a-library-sort-direction-input {
  grid-area: a-library-sort-direction-input;
}

.c-library-tags-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3em auto;
  grid-template-areas: "a-library-tags-title" "c-library-tags";
  border-bottom: 1px solid #373737;
  padding-bottom: 0.5em;
  margin-bottom: 1em;
}

.c-library-tags {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 2em auto;
  grid-template-areas: "c-library-tags-controls" "a-library-tags-result-title" "c-library-tags-result";
}

.a-library-tags-title {
  grid-area: a-library-tags-title;
}

.c-library-tags-controls {
  display: grid;
  grid-template-columns: 12em auto 11em;
  grid-template-rows: auto;
  grid-template-areas: "c-library-tags-controls-search c-library-tags-search-result c-library-tags-controls-match";
  grid-column-gap: 1em;
}

.c-library-tags-search-result {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 5em;
  grid-template-areas: "a-library-tags-controls-search-title" "a-library-tags-controls-search-result";
}

.a-library-tags-controls-search-title {
  grid-area: a-library-tags-controls-search-title;
}

.a-library-tags-controls-search-result {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  max-height: 7em;
  overflow: hidden;
  align-items: center;
}

.c-library-tags-controls-search {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-library-tags-controls-search-label" "a-library-tags-controls-search-input";
}

.a-library-tags-controls-search-label {
  grid-area: a-library-tags-controls-search-label;
}

.a-library-tags-controls-search-input {
  grid-area: a-library-tags-controls-search-input;
}

.c-library-tags-controls-match {
  display: grid;
  grid-template-columns: 6em 2em;
  grid-template-rows: 5.5em;
  grid-template-areas: "a-library-tags-controls-match-label a-library-tags-controls-match-input";
  align-items: center;
}

.a-library-tags-controls-match-label {
  grid-area: a-library-tags-controls-match-label;
}

.a-library-tags-controls-match-input {
  grid-area: a-library-tags-controls-match-input;
}

.a-library-tags-result-title {
  grid-area: a-library-tags-result-title;
}

.c-library-tags-result {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  max-height: 7em;
  align-content: flex-start;
  overflow: hidden;
  padding-bottom: 1em;
}

.a-library-submit {
  grid-area: a-library-submit;
}

.c-games-placeholder {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
}

.c-library-row {
  display: grid;
  grid-template-columns: 11em 52.5em 16em;
  grid-template-rows: 1fr;
  grid-template-areas: "a-library-cover c-library-left c-library-right";
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 4px 18px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 1em;
  background-color: #262626;
  border-radius: 0.5em;
  padding: 0.5em;
}

.a-library-cover {
  grid-area: a-library-cover;
  padding-left: 0.5em;
  align-self: center;
}

.c-library-left {
  display: grid;
  grid-template-columns: 52.5em;
  grid-template-rows: 6em 7.5em;
  grid-template-areas: "c-library-game" "c-library-stats";
}

.c-library-game {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 1fr;
  grid-template-areas: "c-library-game-info";
  align-self: center;
}

.game-cover-library {
  width: 150px;
  height: 200px;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.game-cover-library:hover {
  filter: brightness(1.1);
  transform: scale(1.02);
}

.c-library-game-info {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 3em 1fr;
  grid-template-areas: "a-library-name" "c-library-game-info-other";
}

.a-library-name {
  grid-area: a-library-name;
  align-self: center;
  color: #f7f7f7;
  font-size: 1.5rem;
  max-width: 35em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.a-library-name :link {
  transition: 300ms;
  color: #f7f7f7;
  text-decoration: none;
}
.a-library-name :visited {
  color: #f7f7f7;
  text-decoration: none;
}
.a-library-name :hover {
  color: #D9A036;
  text-decoration: none;
}
.a-library-name :active {
  text-decoration: none;
}

.c-library-game-info-other {
  display: grid;
  grid-template-columns: 3.5em 5.5em 2em 2em 2em 2em 2em;
  grid-template-rows: 1fr;
  grid-template-areas: "a-library-year a-library-platform a-library-completion a-library-tags a-library-review a-library-versions a-library-playing";
}

.a-library-year {
  grid-area: a-library-year;
  align-self: center;
  color: #AAAAAA;
  font-size: 1.25rem;
}

.a-library-platform {
  grid-area: a-library-platform;
  align-self: center;
  justify-self: start;
  font-weight: bold;
  font-size: 1.3rem;
}

.a-library-top {
  grid-area: a-library-top;
  align-self: center;
  color: #AAAAAA;
  font-size: 1.25rem;
  margin-left: -1.7em;
  justify-self: center;
}

.a-library-score {
  grid-area: a-library-score;
  align-self: center;
  font-size: 1.8rem;
  justify-self: center;
  padding-right: 0.5em;
}

.a-library-tags {
  grid-area: a-library-tags;
  align-self: center;
  font-size: 1.25rem;
  justify-self: center;
}

.a-library-review {
  grid-area: a-library-review;
  align-self: center;
  font-size: 1.25rem;
  justify-self: center;
}

.a-library-versions {
  grid-area: a-library-versions;
  align-self: center;
  font-size: 1.25rem;
  justify-self: center;
}

.a-library-playing {
  grid-area: a-library-playing;
  align-self: center;
  font-size: 1.25rem;
  color: #01a501;
  justify-self: center;
}

.a-library-completion {
  grid-area: a-library-completion;
  align-self: center;
  font-size: 1.25rem;
  justify-self: center;
}

.c-library-stats {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
}

.c-library-stats-completion {
  display: grid;
  grid-template-columns: min-content;
  grid-template-rows: 2em 2em 2em;
  grid-template-areas: "c-library-any" "c-library-hundred" "c-library-plat";
  font-size: 1rem;
  align-self: center;
  grid-gap: 0.5em;
}

.c-library-stats-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  max-height: 7em;
  align-content: flex-start;
  overflow: hidden;
}

.c-library-stats-tag {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 2em;
  grid-template-areas: "a-library-stats-tag";
  margin-right: 1em;
}

.a-library-stats-tag {
  grid-area: a-library-stats-tag;
}

.c-library-any {
  display: grid;
  grid-template-columns: 8em 8em 8em 4em;
  grid-template-rows: 2em;
  grid-template-areas: "c-library-any-date c-library-any-time ca-library-any-last c-library-any-times";
  font-size: 1rem;
  align-self: center;
  color: #AAAAAA;
  border-left: 5px solid #1daf2c;
  border-radius: 3px;
  background: linear-gradient(90deg, #1daf2c 0%, #262626 10%);
}

.c-library-any-date {
  display: grid;
  grid-template-columns: 2em auto;
  grid-template-rows: 2em;
  grid-template-areas: "a-library-any-date-icon a-library-any-date";
}

.a-library-any-date-icon {
  grid-area: a-library-any-date-icon;
  justify-self: center;
  align-self: center;
}

.a-library-any-date {
  grid-area: a-library-any-date;
  align-self: center;
}

.c-library-any-time {
  display: grid;
  grid-template-columns: 2em auto;
  grid-template-rows: 2em;
  grid-template-areas: "a-library-any-time-icon a-library-any-time";
}

.a-library-any-time-icon {
  grid-area: a-library-any-time-icon;
  justify-self: center;
  align-self: center;
}

.a-library-any-time {
  grid-area: a-library-any-time;
  align-self: center;
}

.c-library-any-last {
  display: grid;
  grid-template-columns: 2em auto;
  grid-template-rows: 2em;
  grid-template-areas: "a-library-any-last-icon a-library-any-last";
}

.a-library-any-last-icon {
  grid-area: a-library-any-last-icon;
  justify-self: center;
  align-self: center;
}

.a-library-any-last {
  grid-area: a-library-any-last;
  align-self: center;
}

.c-library-any-times {
  display: grid;
  grid-template-columns: 2em auto;
  grid-template-rows: 2em;
  grid-template-areas: "a-library-any-times-icon a-library-any-times";
}

.a-library-any-times-icon {
  grid-area: a-library-any-times-icon;
  justify-self: center;
  align-self: center;
}

.a-library-any-times {
  grid-area: a-library-any-times;
  align-self: center;
}

.c-library-hundred {
  display: grid;
  grid-template-columns: 8em 8em 8em 4em;
  grid-template-rows: 2em;
  grid-template-areas: "c-library-hundred-date c-library-hundred-time c-library-hundred-last c-library-hundred-times";
  font-size: 1rem;
  align-self: center;
  color: #AAAAAA;
  border-left: 5px solid #029ed2;
  border-radius: 3px;
  background: linear-gradient(90deg, #029ed2 0%, #262626 10%);
}

.c-library-hundred-date {
  display: grid;
  grid-template-columns: 2em auto;
  grid-template-rows: 2em;
  grid-template-areas: "a-library-hundred-date-icon a-library-hundred-date";
}

.a-library-hundred-date-icon {
  grid-area: a-library-hundred-date-icon;
  justify-self: center;
  align-self: center;
}

.a-library-hundred-date {
  grid-area: a-library-hundred-date;
  align-self: center;
}

.c-library-hundred-time {
  display: grid;
  grid-template-columns: 2em auto;
  grid-template-rows: 2em;
  grid-template-areas: "a-library-hundred-time-icon a-library-hundred-time";
}

.a-library-hundred-time-icon {
  grid-area: a-library-hundred-time-icon;
  justify-self: center;
  align-self: center;
}

.a-library-hundred-time {
  grid-area: a-library-hundred-time;
  align-self: center;
}

.c-library-hundred-last {
  display: grid;
  grid-template-columns: 2em auto;
  grid-template-rows: 2em;
  grid-template-areas: "a-library-hundred-last-icon a-library-hundred-last";
}

.a-library-hundred-last-icon {
  grid-area: a-library-hundred-last-icon;
  justify-self: center;
  align-self: center;
}

.a-library-hundred-last {
  grid-area: a-library-hundred-last;
  align-self: center;
}

.c-library-hundred-times {
  display: grid;
  grid-template-columns: 2em auto;
  grid-template-rows: 2em;
  grid-template-areas: "a-library-hundred-times-icon a-library-hundred-times";
}

.a-library-hundred-times-icon {
  grid-area: a-library-hundred-times-icon;
  justify-self: center;
  align-self: center;
}

.a-library-hundred-times {
  grid-area: a-library-hundred-times;
  align-self: center;
}

.c-library-plat {
  display: grid;
  grid-template-columns: 8em 8em 8em 4em;
  grid-template-rows: 2em;
  grid-template-areas: "c-library-plat-date c-library-plat-time c-library-plat-last c-library-plat-times";
  font-size: 1rem;
  align-self: center;
  color: #AAAAAA;
  border-left: 5px solid #ffa500;
  border-radius: 3px;
  background: linear-gradient(90deg, #ffa500 0%, #262626 10%);
}

.c-library-plat-date {
  display: grid;
  grid-template-columns: 2em auto;
  grid-template-rows: 2em;
  grid-template-areas: "a-library-plat-date-icon a-library-plat-date";
}

.a-library-plat-date-icon {
  grid-area: a-library-plat-date-icon;
  justify-self: center;
  align-self: center;
}

.a-library-plat-date {
  grid-area: a-library-plat-date;
  align-self: center;
}

.c-library-plat-time {
  display: grid;
  grid-template-columns: 2em auto;
  grid-template-rows: 2em;
  grid-template-areas: "a-library-plat-time-icon a-library-plat-time";
}

.a-library-plat-time-icon {
  grid-area: a-library-plat-time-icon;
  justify-self: center;
  align-self: center;
}

.a-library-plat-time {
  grid-area: a-library-plat-time;
  align-self: center;
}

.c-library-plat-last {
  display: grid;
  grid-template-columns: 2em auto;
  grid-template-rows: 2em;
  grid-template-areas: "a-library-plat-last-icon a-library-plat-last";
}

.a-library-plat-last-icon {
  grid-area: a-library-plat-last-icon;
  justify-self: center;
  align-self: center;
}

.a-library-plat-last {
  grid-area: a-library-plat-last;
  align-self: center;
}

.c-library-plat-times {
  display: grid;
  grid-template-columns: 2em auto;
  grid-template-rows: 2em;
  grid-template-areas: "a-library-plat-times-icon a-library-plat-times";
}

.a-library-plat-times-icon {
  grid-area: a-library-plat-times-icon;
  justify-self: center;
  align-self: center;
}

.a-library-plat-times {
  grid-area: a-library-plat-times;
  align-self: center;
}

.c-library-stats-review {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "c-library-stats-review-row1" "c-library-stats-review-row2";
}

.c-library-stats-review-row1 {
  display: grid;
  grid-template-columns: 3em 5em 1fr;
  grid-template-rows: 2em;
  grid-template-areas: "a-library-stats-review-score c-library-stats-review-top a-library-stats-review-show";
}

.a-library-stats-review-score {
  grid-area: a-library-stats-review-score;
  font-size: 1.5rem;
}

.c-library-stats-review-top {
  display: grid;
  grid-template-columns: 2em 1fr;
  grid-template-rows: 2em;
  grid-template-areas: "a-library-stats-review-top-icon a-library-stats-review-top";
}

.a-library-stats-review-top-icon {
  grid-area: a-library-stats-review-top-icon;
  align-self: center;
  justify-self: center;
}

.a-library-stats-review-top {
  grid-area: a-library-stats-review-top;
  align-self: center;
  font-size: 1.3rem;
}

.a-library-stats-review-show {
  grid-area: a-library-stats-review-show;
  align-self: center;
}

.c-library-stats-review-row2 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em;
  grid-template-areas: "a-library-stats-review-text";
}

.a-library-stats-review-text {
  grid-area: a-library-stats-review-text;
  color: #f7f7f7;
  font-size: 0.8rem;
  max-width: 64em;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.2em;
  max-height: 5.8em;
}

.c-library-right {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 1fr 3em;
  grid-template-areas: "c-library-versions" "c-library-version-circles";
  background-color: #2d2d2d;
  border-radius: 0.5em;
}

.c-library-versions {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
  padding-bottom: 0.5em;
}

.c-library-version {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3.5em 2em 1.5em 2em 2em;
  grid-template-areas: "c-library-version-shop" "a-library-version-bought" "a-library-version-edition" "a-library-version-condition" "a-library-version-conditions";
}

.c-library-version-shop {
  display: grid;
  grid-template-columns: 6em 5em 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "c-library-version-prices c-library-version-count a-library-version-shop";
  padding: 0.6em;
}

.c-library-version-prices {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "a-library-version-price" "a-library-version-approx";
}

.a-library-version-price {
  grid-area: a-library-version-price;
  color: #AAAAAA;
  font-size: 1.1rem;
  align-self: center;
}

.a-library-version-approx {
  grid-area: a-library-version-approx;
  color: #AAAAAA;
  font-size: 1.1rem;
  align-self: center;
}

.c-library-version-count {
  display: grid;
  grid-template-columns: min-content 1.5em;
  grid-template-rows: 1fr;
  grid-template-areas: "a-library-version-count a-library-version-count-icon";
}

.a-library-version-count {
  grid-area: a-library-version-count;
  align-self: center;
  justify-self: end;
  font-style: italic;
  color: #AAAAAA;
  font-size: 1.5rem;
  padding-right: 0.2em;
}

.a-library-version-count-icon {
  grid-area: a-library-version-count-icon;
  align-self: center;
}

.a-library-version-shop {
  grid-area: a-library-version-shop;
  color: #AAAAAA;
  justify-self: end;
  align-self: center;
}

.a-library-version-bought {
  grid-area: a-library-version-bought;
  color: #AAAAAA;
  font-size: 1.2rem;
  justify-self: center;
  align-self: center;
}

.a-library-version-edition {
  grid-area: a-library-version-edition;
  color: #AAAAAA;
  font-size: 0.7rem;
  justify-self: center;
  max-width: 21em;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3em;
  max-height: 2.6em;
  align-self: center;
}

.a-library-version-condition {
  grid-area: a-library-version-condition;
  color: #AAAAAA;
  font-size: 1.5rem;
  justify-self: center;
}

.a-library-version-conditions {
  grid-area: a-library-version-conditions;
  color: #AAAAAA;
  font-size: 1.5rem;
  justify-self: center;
}

.c-library-version-circles {
  display: grid;
  grid-template-columns: 1.5em 1.5em 1.5em 1.5em 1.5em 1.5em 1.5em 1.5em;
  grid-template-rows: 1fr;
  grid-template-areas: ". . . . . . . .";
  justify-self: center;
}

.a-library-version-circle {
  justify-self: center;
  padding-top: 0.1em;
}

.c-library-modal-add-game {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em 2em 4em 1fr;
  grid-template-areas: "a-library-modal-add-game-platform-label" "a-library-modal-add-game-platform-input" "a-library-modal-add-game-name-label" "a-library-modal-add-game-name-input" "c-library-modal-add-game-games";
}

.a-library-modal-add-game-platform-label {
  grid-area: a-library-modal-add-game-platform-label;
}

.a-library-modal-add-game-platform-input {
  grid-area: a-library-modal-add-game-platform-input;
}

.a-library-modal-add-game-name-label {
  grid-area: a-library-modal-add-game-name-label;
}

.a-library-modal-add-game-name-input {
  grid-area: a-library-modal-add-game-name-input;
}

.c-library-modal-add-game-games {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-auto-flow: row;
  grid-template-areas: ".";
}

.c-library-modal-add-game-game {
  display: grid;
  grid-template-columns: 6em 32em 5em 7em;
  grid-template-rows: 8em;
  grid-template-areas: "a-library-modal-add-game-game-cover c-library-modal-add-game-game-name a-library-modal-add-game-game-add a-library-modal-add-game-game-redirect";
  border-bottom: 1px #636363 solid;
}

.a-library-modal-add-game-game-cover {
  grid-area: a-library-modal-add-game-game-cover;
  align-self: center;
}

.c-library-modal-add-game-game-name {
  display: grid;
  grid-template-columns: min-content 3em;
  grid-template-rows: 1fr;
  grid-template-areas: "a-library-modal-add-game-game-name a-library-modal-add-game-game-year";
  align-items: center;
}

.a-library-modal-add-game-game-name {
  grid-area: a-library-modal-add-game-game-name;
  max-width: 27em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: #f7f7f7;
  padding-right: 1em;
  font-weight: bold;
}

.a-library-modal-add-game-game-year {
  grid-area: a-library-modal-add-game-game-year;
  color: #9A9A9A;
}

.a-library-modal-add-game-game-add {
  grid-area: a-library-modal-add-game-game-add;
  align-self: center;
  margin-right: 1em;
}

.a-library-modal-add-game-game-redirect {
  grid-area: a-library-modal-add-game-game-redirect;
  align-self: center;
}

.c-library-modal-bundle {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 5em 4em auto;
  grid-template-areas: "a-library-modal-bundle-help" "a-library-modal-bundle-submit" "c-library-modal-bundle-select" "c-library-modal-bundle-games";
}

.a-library-modal-bundle-help {
  grid-area: a-library-modal-bundle-help;
}

.a-library-modal-bundle-submit {
  grid-area: a-library-modal-bundle-submit;
  border-bottom: 2px solid #636363;
  margin-bottom: 1em;
}

.c-library-modal-bundle-select {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "a-library-modal-bundle-select-all a-library-modal-bundle-select-none";
  grid-column-gap: 2em;
}

.a-library-modal-bundle-select-all {
  grid-area: a-library-modal-bundle-select-all;
}

.a-library-modal-bundle-select-none {
  grid-area: a-library-modal-bundle-select-none;
}

.c-library-modal-bundle-games {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-auto-flow: row;
  grid-template-areas: ".";
}

.c-library-modal-bundle-game {
  display: grid;
  grid-template-columns: 6em 35em 8em;
  grid-template-rows: 8em;
  grid-template-areas: "a-library-modal-bundle-game-cover c-library-modal-bundle-game-name a-library-modal-bundle-game-select";
  border: 5px #636363 solid;
  margin-bottom: 1em;
  background-color: #424242;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 4px 18px 0 rgba(0, 0, 0, 0.19);
  transition: border-color 300ms ease;
}

.a-library-modal-bundle-game-cover {
  grid-area: a-library-modal-bundle-game-cover;
  align-self: center;
  justify-self: center;
}

.c-library-modal-bundle-game-name {
  display: grid;
  grid-template-columns: min-content 3em;
  grid-template-rows: 1fr;
  grid-template-areas: "a-library-modal-bundle-game-name a-library-modal-bundle-game-year";
  align-items: center;
}

.a-library-modal-bundle-game-name {
  grid-area: a-library-modal-bundle-game-name;
  max-width: 30em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: #f7f7f7;
  padding-right: 1em;
  font-weight: bold;
}

.a-library-modal-bundle-game-year {
  grid-area: a-library-modal-bundle-game-year;
  color: #9A9A9A;
}

.a-library-modal-bundle-game-select {
  grid-area: a-library-modal-bundle-game-select;
  align-self: center;
  padding-right: 1em;
}

.c-library-modal-random-games {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 5em auto;
  grid-template-areas: "a-library-modal-random-game-platforms" "a-library-modal-random-game-submit" "c-library-modal-random-game-games";
}

.a-library-modal-random-game-platforms {
  grid-area: a-library-modal-random-game-platforms;
}

.a-library-modal-random-game-submit {
  grid-area: a-library-modal-random-game-submit;
  align-self: center;
}

.c-library-modal-random-game-games {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-auto-flow: row;
  grid-template-areas: ".";
  align-items: center;
  justify-self: center;
  grid-gap: 1em;
}

.c-library-modal-random-game-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "c-library-modal-random-game";
}

.c-library-modal-random-game {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 3em 13.5em;
  grid-template-areas: "a-library-modal-random-game-platform" "a-library-modal-random-game-cover";
}

.a-library-modal-random-game-platform {
  grid-area: a-library-modal-random-game-platform;
  align-self: center;
  justify-self: center;
}

.a-library-modal-random-game-cover {
  grid-area: a-library-modal-random-game-cover;
  align-self: center;
  justify-self: center;
}

.c-library-modal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  align-content: flex-start;
}

.c-library-modal-stats-completion {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: "c-library-modal-stats-completion-any" "c-library-modal-stats-completion-hundred" "c-library-modal-stats-completion-plat";
  grid-row-gap: 1em;
}

.c-library-modal-stats-completion-any {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em 3em 3em 3em 3em;
  grid-template-areas: "a-library-modal-stats-completion-any-title" "c-library-modal-stats-completion-any-date" "c-library-modal-stats-completion-any-last" "c-library-modal-stats-completion-any-time" "c-library-modal-stats-completion-any-times";
  background-color: #656366;
  padding: 1em;
}

.a-library-modal-stats-completion-any-title {
  grid-area: a-library-modal-stats-completion-any-title;
  align-self: center;
  justify-self: center;
  font-size: 2em;
  font-weight: bold;
}

.c-library-modal-stats-completion-any-date {
  display: grid;
  grid-template-columns: 2.5em auto;
  grid-template-rows: 1fr;
  grid-template-areas: "a-library-modal-stats-completion-any-date-icon a-library-modal-stats-completion-any-date";
  justify-self: center;
}

.a-library-modal-stats-completion-any-date-icon {
  grid-area: a-library-modal-stats-completion-any-date-icon;
  align-self: center;
}

.a-library-modal-stats-completion-any-date {
  grid-area: a-library-modal-stats-completion-any-date;
  align-self: center;
  font-size: 2em;
  font-weight: bold;
}

.c-library-modal-stats-completion-any-last {
  display: grid;
  grid-template-columns: 2.5em auto;
  grid-template-rows: 1fr;
  grid-template-areas: "a-library-modal-stats-completion-any-last-icon a-library-modal-stats-completion-any-last";
  justify-self: center;
}

.a-library-modal-stats-completion-any-last-icon {
  grid-area: a-library-modal-stats-completion-any-last-icon;
  align-self: center;
}

.a-library-modal-stats-completion-any-last {
  grid-area: a-library-modal-stats-completion-any-last;
  align-self: center;
  font-size: 2em;
  font-weight: bold;
}

.c-library-modal-stats-completion-any-time {
  display: grid;
  grid-template-columns: 2.5em auto;
  grid-template-rows: 1fr;
  grid-template-areas: "a-library-modal-stats-completion-any-time-icon a-library-modal-stats-completion-any-time";
  justify-self: center;
}

.a-library-modal-stats-completion-any-time-icon {
  grid-area: a-library-modal-stats-completion-any-time-icon;
  align-self: center;
}

.a-library-modal-stats-completion-any-time {
  grid-area: a-library-modal-stats-completion-any-time;
  align-self: center;
  font-size: 2em;
  font-weight: bold;
}

.c-library-modal-stats-completion-any-times {
  display: grid;
  grid-template-columns: 2.5em auto;
  grid-template-rows: 1fr;
  grid-template-areas: "a-library-modal-stats-completion-any-times-icon a-library-modal-stats-completion-any-times";
  justify-self: center;
}

.a-library-modal-stats-completion-any-times-icon {
  grid-area: a-library-modal-stats-completion-any-times-icon;
  align-self: center;
}

.a-library-modal-stats-completion-any-times {
  grid-area: a-library-modal-stats-completion-any-times;
  align-self: center;
  font-size: 2em;
  font-weight: bold;
}

.c-library-modal-stats-completion-hundred {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em 3em 3em 3em 3em;
  grid-template-areas: "a-library-modal-stats-completion-hundred-title" "c-library-modal-stats-completion-hundred-date" "c-library-modal-stats-completion-hundred-last" "c-library-modal-stats-completion-hundred-time" "c-library-modal-stats-completion-hundred-times";
  background-color: #656366;
  padding: 1em;
}

.a-library-modal-stats-completion-hundred-title {
  grid-area: a-library-modal-stats-completion-hundred-title;
  align-self: center;
  justify-self: center;
  font-size: 2em;
  font-weight: bold;
}

.c-library-modal-stats-completion-hundred-date {
  display: grid;
  grid-template-columns: 2.5em auto;
  grid-template-rows: 1fr;
  grid-template-areas: "a-library-modal-stats-completion-hundred-date-icon a-library-modal-stats-completion-hundred-date";
  justify-self: center;
}

.a-library-modal-stats-completion-hundred-date-icon {
  grid-area: a-library-modal-stats-completion-hundred-date-icon;
  align-self: center;
}

.a-library-modal-stats-completion-hundred-date {
  grid-area: a-library-modal-stats-completion-hundred-date;
  align-self: center;
  font-size: 2em;
  font-weight: bold;
}

.c-library-modal-stats-completion-hundred-last {
  display: grid;
  grid-template-columns: 2.5em auto;
  grid-template-rows: 1fr;
  grid-template-areas: "a-library-modal-stats-completion-hundred-last-icon a-library-modal-stats-completion-hundred-last";
  justify-self: center;
}

.a-library-modal-stats-completion-hundred-last-icon {
  grid-area: a-library-modal-stats-completion-hundred-last-icon;
  align-self: center;
}

.a-library-modal-stats-completion-hundred-last {
  grid-area: a-library-modal-stats-completion-hundred-last;
  align-self: center;
  font-size: 2em;
  font-weight: bold;
}

.c-library-modal-stats-completion-hundred-time {
  display: grid;
  grid-template-columns: 2.5em auto;
  grid-template-rows: 1fr;
  grid-template-areas: "a-library-modal-stats-completion-hundred-time-icon a-library-modal-stats-completion-hundred-time";
  justify-self: center;
}

.a-library-modal-stats-completion-hundred-time-icon {
  grid-area: a-library-modal-stats-completion-hundred-time-icon;
  align-self: center;
}

.a-library-modal-stats-completion-hundred-time {
  grid-area: a-library-modal-stats-completion-hundred-time;
  align-self: center;
  font-size: 2em;
  font-weight: bold;
}

.c-library-modal-stats-completion-hundred-times {
  display: grid;
  grid-template-columns: 2.5em auto;
  grid-template-rows: 1fr;
  grid-template-areas: "a-library-modal-stats-completion-hundred-times-icon a-library-modal-stats-completion-hundred-times";
  justify-self: center;
}

.a-library-modal-stats-completion-hundred-times-icon {
  grid-area: a-library-modal-stats-completion-hundred-times-icon;
  align-self: center;
}

.a-library-modal-stats-completion-hundred-times {
  grid-area: a-library-modal-stats-completion-hundred-times;
  align-self: center;
  font-size: 2em;
  font-weight: bold;
}

.c-library-modal-stats-completion-plat {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em 3em 3em 3em 3em;
  grid-template-areas: "a-library-modal-stats-completion-plat-title" "c-library-modal-stats-completion-plat-date" "c-library-modal-stats-completion-plat-last" "c-library-modal-stats-completion-plat-time" "c-library-modal-stats-completion-plat-times";
  background-color: #656366;
  padding: 1em;
}

.a-library-modal-stats-completion-plat-title {
  grid-area: a-library-modal-stats-completion-plat-title;
  align-self: center;
  justify-self: center;
  font-size: 2em;
  font-weight: bold;
}

.c-library-modal-stats-completion-plat-date {
  display: grid;
  grid-template-columns: 2.5em auto;
  grid-template-rows: 1fr;
  grid-template-areas: "a-library-modal-stats-completion-plat-date-icon a-library-modal-stats-completion-plat-date";
  justify-self: center;
}

.a-library-modal-stats-completion-plat-date-icon {
  grid-area: a-library-modal-stats-completion-plat-date-icon;
  align-self: center;
}

.a-library-modal-stats-completion-plat-date {
  grid-area: a-library-modal-stats-completion-plat-date;
  align-self: center;
  font-size: 2em;
  font-weight: bold;
}

.c-library-modal-stats-completion-plat-last {
  display: grid;
  grid-template-columns: 2.5em auto;
  grid-template-rows: 1fr;
  grid-template-areas: "a-library-modal-stats-completion-plat-last-icon a-library-modal-stats-completion-plat-last";
  justify-self: center;
}

.a-library-modal-stats-completion-plat-last-icon {
  grid-area: a-library-modal-stats-completion-plat-last-icon;
  align-self: center;
}

.a-library-modal-stats-completion-plat-last {
  grid-area: a-library-modal-stats-completion-plat-last;
  align-self: center;
  font-size: 2em;
  font-weight: bold;
}

.c-library-modal-stats-completion-plat-time {
  display: grid;
  grid-template-columns: 2.5em auto;
  grid-template-rows: 1fr;
  grid-template-areas: "a-library-modal-stats-completion-plat-time-icon a-library-modal-stats-completion-plat-time";
  justify-self: center;
}

.a-library-modal-stats-completion-plat-time-icon {
  grid-area: a-library-modal-stats-completion-plat-time-icon;
  align-self: center;
}

.a-library-modal-stats-completion-plat-time {
  grid-area: a-library-modal-stats-completion-plat-time;
  align-self: center;
  font-size: 2em;
  font-weight: bold;
}

.c-library-modal-stats-completion-plat-times {
  display: grid;
  grid-template-columns: 2.5em auto;
  grid-template-rows: 1fr;
  grid-template-areas: "a-library-modal-stats-completion-plat-times-icon a-library-modal-stats-completion-plat-times";
  justify-self: center;
}

.a-library-modal-stats-completion-plat-times-icon {
  grid-area: a-library-modal-stats-completion-plat-times-icon;
  align-self: center;
}

.a-library-modal-stats-completion-plat-times {
  grid-area: a-library-modal-stats-completion-plat-times;
  align-self: center;
  font-size: 2em;
  font-weight: bold;
}

.c-library-timers {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "c-library-timers-label" "c-library-timers-games";
  padding-bottom: 1em;
}

.c-library-timers-label {
  display: grid;
  grid-template-columns: 15em 5em;
  grid-template-rows: 4em;
  grid-template-areas: "a-library-timers-label-text a-library-timers-label-open";
}

.a-library-timers-label-text {
  grid-area: a-library-timers-label-text;
  align-self: center;
  font-size: 1.3rem;
}

.a-library-timers-label-open {
  grid-area: a-library-timers-label-open;
  align-self: center;
}

.c-library-timers-games {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
  border-left: 2px solid #373737;
  border-right: 2px solid #373737;
  border-bottom: 2px solid #373737;
  padding: 1em;
}

.c-library-timers-game {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em;
  grid-template-areas: "a-library-timers-game";
}

.a-library-timers-game {
  grid-area: a-library-timers-game;
  align-self: center;
}

.c-library-modal-review {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "c-library-modal-review-row1" "c-library-modal-review-row2";
}

.c-library-modal-review-row1 {
  display: grid;
  grid-template-columns: 2em 5em;
  grid-template-rows: 2em;
  grid-template-areas: "a-library-modal-review-score a-library-modal-review-top";
}

.a-library-modal-review-score {
  grid-area: a-library-modal-review-score;
  font-size: 1.5rem;
}

.a-library-modal-review-top {
  grid-area: a-library-modal-review-top;
  align-self: center;
}

.c-library-modal-review-row2 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: "a-library-modal-review-text";
}

.a-library-modal-review-text {
  grid-area: a-library-modal-review-text;
  color: #f7f7f7;
  font-size: 0.8rem;
}

.c-library-modal-versions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ". .";
  grid-gap: 1em;
}

.c-library-modal-version {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3.5em 2em 1.5em 2em 2em;
  grid-template-areas: "c-library-modal-version-shop" "a-library-modal-version-bought" "a-library-modal-version-edition" "a-library-modal-version-condition" "a-library-modal-version-conditions";
  background-color: #424242;
  padding: 1em;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 4px 18px 0 rgba(0, 0, 0, 0.19);
  border-radius: 0.3em;
}

.c-library-modal-version-shop {
  display: grid;
  grid-template-columns: 6em 5em 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "c-library-modal-version-prices c-library-modal-version-count a-library-modal-version-shop";
}

.c-library-modal-version-prices {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "a-library-modal-version-price" "a-library-modal-version-approx";
}

.a-library-modal-version-price {
  grid-area: a-library-modal-version-price;
  color: #AAAAAA;
  font-size: 1.1rem;
  align-self: center;
}

.a-library-modal-version-approx {
  grid-area: a-library-modal-version-approx;
  color: #AAAAAA;
  font-size: 1.1rem;
  align-self: center;
}

.c-library-modal-version-count {
  display: grid;
  grid-template-columns: min-content 1.5em;
  grid-template-rows: 1fr;
  grid-template-areas: "a-library-modal-version-count a-library-modal-version-count-icon";
}

.a-library-modal-version-count {
  grid-area: a-library-modal-version-count;
  align-self: center;
  justify-self: end;
  font-style: italic;
  color: #AAAAAA;
  font-size: 1.5rem;
  padding-right: 0.2em;
}

.a-library-modal-version-count-icon {
  grid-area: a-library-modal-version-count-icon;
  align-self: center;
}

.a-library-modal-version-shop {
  grid-area: a-library-modal-version-shop;
  color: #AAAAAA;
  justify-self: end;
  align-self: center;
}

.a-library-modal-version-bought {
  grid-area: a-library-modal-version-bought;
  color: #AAAAAA;
  font-size: 1.2rem;
  justify-self: center;
  align-self: center;
}

.a-library-modal-version-edition {
  grid-area: a-library-modal-version-edition;
  color: #AAAAAA;
  font-size: 0.7rem;
  justify-self: center;
  max-width: 32em;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3em;
  max-height: 2.6em;
  align-self: center;
}

.a-library-modal-version-condition {
  grid-area: a-library-modal-version-condition;
  color: #AAAAAA;
  font-size: 1.5rem;
  justify-self: center;
}

.a-library-modal-version-conditions {
  grid-area: a-library-modal-version-conditions;
  color: #AAAAAA;
  font-size: 1.5rem;
  justify-self: center;
}

.library-game-selected {
  color: #f7f7f7;
}
.library-game-selected:hover {
  cursor: pointer;
}

.library-game-not-selected {
  color: #525252;
}
.library-game-not-selected:hover {
  cursor: pointer;
}

.dollar-sign {
  color: #AAAAAA;
  padding-right: 0.15em;
}

.flag-icon {
  padding-right: 0.5em;
}

.library-manual-yes {
  color: #008900;
}

.library-manual-no {
  padding: 0.05em;
  color: #656366;
}

.library-good {
  padding: 0.05em;
  color: #008900;
}

.library-decent {
  padding: 0.05em;
  color: #017ab8;
}

.library-replacement {
  padding: 0.05em;
  color: #c60700;
}

.library-none {
  padding: 0.05em;
  color: #656366;
}

.library-hits {
  padding: 0.05em;
  color: #27cc7b;
}

.library-icon {
  font-size: 0.8rem;
  color: #696969;
}

.library-api-price {
  font-size: 1rem;
}

.library-special-edition {
  color: #ffd400;
}

.modal-add-button-icon {
  display: none !important;
}

.modal-add-button {
  display: block !important;
}

.library-icon-shop {
  font-size: 1.6rem;
}

.library-bundle-name {
  color: #D9A036;
  font-weight: bold;
}

.library-already-added {
  color: #ede1d5;
  font-weight: bold;
}

.library-already-added-icon-disabled {
  color: grey;
}
.library-already-added-icon-disabled:hover {
  cursor: not-allowed;
}

.library-bundle-game-selected {
  border-color: #006400;
}

.library-bundle-game-selected-button {
  background-color: #018d01 !important;
  border-color: #016a01 !important;
  color: #ede1d5 !important;
}
.library-bundle-game-selected-button:hover {
  background-color: #016a01 !important;
}

.library-bundle-game-selected-icon {
  color: #018d01 !important;
}
.library-bundle-game-selected-icon:hover {
  color: #016a01 !important;
}

.regular-completion {
  display: block;
}

.regular-tags {
  display: block;
}

.full-completion {
  display: none;
}

.full-tags {
  display: none;
}

.full-review {
  display: none;
}

.library-background-any {
  background-color: #1daf2c !important;
}

.library-background-hundred {
  background-color: #029ed2 !important;
}

.library-background-plat {
  background-color: #ffa500 !important;
}

.active-timer-count {
  font-weight: bold;
  color: #D9A036;
}

@media only screen and (max-width: 1300px) {
  .c-library-left {
    grid-template-columns: 31.4em;
  }
  .c-library-row {
    grid-template-columns: 11em 31.5em auto;
  }
}
@media only screen and (max-width: 1000px) {
  .c-library-left {
    grid-template-columns: 26em;
  }
  .a-library-name {
    max-width: 22em;
    font-size: 1.2rem;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.1em;
    max-height: 2.2em;
    padding-bottom: 0.1em;
  }
  .c-library-stats {
    font-size: 0.9rem;
  }
  .c-library-right {
    display: none;
  }
  .c-library-row {
    grid-template-columns: 11em 28.5em 0em;
  }
  .platforms-switch button {
    font-size: 0.9rem !important;
  }
  .a-library-arrow-left {
    display: none;
  }
  .a-library-arrow-right {
    display: none;
  }
  .c-library-game-info-other {
    grid-template-columns: 3.5em 4em 2em 2em 2em 2em 2em;
  }
  .a-library-platform {
    font-size: 0.8rem !important;
  }
  .a-library-top {
    font-size: 1.1rem;
  }
  .a-library-score {
    font-size: 1.3rem;
    padding-right: 0;
  }
  .a-library-completion {
    font-size: 1rem;
  }
  .a-library-tags {
    font-size: 1rem;
  }
  .input-label {
    font-size: 0.9rem;
  }
  .c-library-tags-controls {
    grid-template-columns: 12em auto;
    grid-template-rows: auto auto;
    grid-template-areas: "c-library-tags-controls-search c-library-tags-search-result" "c-library-tags-controls-match .";
  }
  .c-library-tags-controls-match {
    grid-template-rows: 3em;
  }
  .c-library-actions {
    grid-template-columns: 9em 9em 9em 9em;
  }
  .a-library-stats-review-text {
    max-height: 5em;
  }
  .c-library-any {
    font-size: 0.9rem;
  }
  .c-library-hundred {
    font-size: 0.9rem;
  }
  .c-library-plat {
    font-size: 0.9rem;
  }
}
@media only screen and (max-width: 870px) {
  .modal-content {
    width: 40em;
  }
  .c-library-modal-add-game-game {
    grid-template-columns: 6em 22.5em 5em 7em;
  }
  .a-library-modal-add-game-game-name {
    max-width: 18.5em;
  }
  .a-library-modal-bundle-game-name {
    max-width: 21em;
  }
  .modal-add-button {
    display: block !important;
  }
  .modal-add-button-icon {
    display: none !important;
  }
  .c-library-modal-bundle-game {
    grid-template-columns: 6em 25.5em 8em;
  }
  .a-library-modal-version-edition {
    grid-area: a-library-modal-version-edition;
    max-width: 25em;
  }
}
@media only screen and (max-width: 730px) {
  .modal-content {
    width: 23em;
  }
  .c-library-modal-add-game-game {
    grid-template-columns: 5.3em 14em 2em 1.5em;
  }
  .c-library-modal-add-game-game-name {
    display: grid;
    grid-template-columns: 15em;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "a-library-modal-add-game-game-name" "a-library-modal-add-game-game-year";
  }
  .a-library-modal-add-game-game-name {
    max-width: 15em;
    align-self: end;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.2em;
    max-height: 2.4em;
  }
  .a-library-modal-add-game-game-year {
    align-self: start;
    padding-top: 0.5em;
  }
  .c-library-modal-bundle-game-name {
    display: grid;
    grid-template-columns: 15em;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "a-library-modal-bundle-game-name" "a-library-modal-bundle-game-year";
  }
  .a-library-modal-bundle-game-name {
    max-width: 15em;
    align-self: end;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.2em;
    max-height: 2.4em;
  }
  .a-library-modal-bundle-game-year {
    align-self: start;
    padding-top: 0.5em;
  }
  .modal-add-button {
    display: none !important;
  }
  .modal-add-button-icon {
    display: block !important;
  }
  .c-library-modal-bundle-game {
    grid-template-columns: 6em 14em 2.6em;
  }
  .c-library-modal-random-game-games {
    grid-template-columns: 1fr 1fr;
  }
  .c-library-modal-versions {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: ".";
    grid-gap: 1em;
  }
}
@media only screen and (max-width: 670px) {
  .platforms-switch button {
    font-size: 0.9rem !important;
    width: 6em;
  }
  .c-library-row {
    display: grid;
    grid-template-columns: 11em 14em;
    grid-template-rows: 4.5em 14em;
    grid-template-areas: "c-library-left c-library-left" "a-library-cover c-library-right";
  }
  .a-library-cover {
    align-self: center;
  }
  .c-library-game-info {
    display: grid;
    grid-template-columns: 24em;
    grid-template-rows: 2em 1.5em;
    grid-template-areas: "a-library-name" "c-library-game-info-other";
  }
  .c-library-left {
    grid-area: c-library-left;
  }
  .c-library-right {
    display: block;
  }
  .c-library-game {
    align-self: start;
    padding-left: 0.5em;
  }
  .a-library-name {
    max-width: 24em;
    font-size: 1.2rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: unset;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    line-height: unset;
    max-height: unset;
  }
  .c-library-game-info-other {
    grid-template-columns: 3.5em 4em 2em 2em 2em 2em 2em;
  }
  .a-library-top {
    font-size: 1rem;
    align-self: center;
  }
  .a-library-year {
    font-size: 1rem;
    align-self: center;
  }
  .a-library-completion {
    font-size: 1rem;
  }
  .a-library-tags {
    font-size: 1rem;
  }
  .a-library-version-edition {
    max-width: 17em;
  }
  .c-library {
    grid-template-rows: 5em auto auto auto 7em auto auto auto auto;
  }
  .c-library-stats-platform {
    display: grid;
    grid-template-columns: 11em 11em;
    grid-template-rows: 2em 2em;
    grid-template-areas: "a-library-stat-any a-library-stat-hundred" "a-library-stat-plat .";
    align-items: center;
  }
  .c-library-any {
    display: none;
  }
  .c-library-hundred {
    display: none;
  }
  .c-library-plat {
    display: none;
  }
  .c-library-stats {
    display: none;
  }
  .regular-completion {
    display: none;
  }
  .regular-tags {
    display: none;
  }
  .regular-review {
    display: none;
  }
  .full-completion {
    display: block;
  }
  .full-tags {
    display: block;
  }
  .full-review {
    display: block;
  }
  .c-library-modal-random-game-games {
    grid-template-columns: 1fr 1fr;
  }
  .c-library-actions {
    grid-template-columns: 10em 10em;
    grid-template-rows: 3em 4em;
    grid-template-areas: "a-library-filters a-library-reset" "a-library-active a-library-add-game";
  }
  .c-library-filters-base-inputs {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: ". .";
  }
  .c-library-filters-conditions-inputs {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: ". .";
  }
  .c-library-filters-completion-inputs {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: ". .";
  }
  .c-library-filters-version-inputs {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: ". .";
  }
  .c-library-filters-buying-inputs {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: ". .";
  }
  .c-library-tags-controls {
    grid-template-columns: auto;
    grid-template-rows: auto auto auto;
    grid-template-areas: "c-library-tags-controls-search" "c-library-tags-search-result" "c-library-tags-controls-match ";
  }
  .c-library-tags-search-result {
    grid-template-rows: 2em 5em;
  }
  .a-library-review {
    font-size: 1rem;
  }
  .a-library-version-count {
    font-size: 1.2rem;
  }
  .c-library-version-shop {
    grid-template-columns: 6em 3.5em 1fr;
  }
  .a-library-version-condition {
    font-size: 1.2rem;
  }
  .a-library-version-bought {
    font-size: 1rem;
  }
  .c-library-version {
    grid-template-rows: 3.5em 2em 1.5em 1.5em 2em;
  }
}
.c-years {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto auto;
  grid-template-areas: "a-years-label" "a-years-navigation" "c-years-stats";
}

.a-years-label {
  grid-area: a-years-label;
}

.a-years-navigation {
  grid-area: a-years-navigation;
  padding-bottom: 2em;
}

.c-years-filter {
  display: grid;
  grid-template-columns: 10em;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-years-filter-label" "a-years-filter-input";
}

.a-years-filter-label {
  grid-area: a-years-filter-label;
}

.a-years-filter-input {
  grid-area: a-years-filter-input;
}

.c-years-stats {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
  padding-bottom: 2em;
  padding-top: 2em;
}

.c-years-stat {
  display: grid;
  grid-template-columns: 22em 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "a-years-stat-label a-years-stat-value";
  padding-bottom: 0.5em;
}

.a-years-stat-label {
  grid-area: a-years-stat-label;
}

.a-years-stat-value {
  grid-area: a-years-stat-value;
}

.c-years-game-row-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "c-years-game-row";
  border-bottom: 1px solid #373737;
  margin-bottom: 1em;
  padding-bottom: 1em;
}

.c-years-game-row {
  display: grid;
  grid-template-columns: 10em 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "a-years-game-row-cover c-years-game-row-info";
}

.a-years-game-row-cover {
  grid-area: a-years-game-row-cover;
}

.years-game-row-game-cover {
  width: 150px;
  height: 200px;
}

.c-years-game-row-info {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3em 3.4em 2em 2em 2em;
  grid-template-areas: "a-years-game-row-info-name" "c-years-game-row-info-year" "a-years-game-row-info-any" "a-years-game-row-info-hundred" "a-years-game-row-info-plat";
}

.a-years-game-row-info-name {
  grid-area: a-years-game-row-info-name;
  font-size: 1.3rem;
  font-weight: bold;
  max-width: 52em;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.2em;
  max-height: 2.4em;
  align-self: center;
}

.c-years-game-row-info-year {
  display: grid;
  grid-template-columns: 3.5em 6em;
  grid-template-rows: 1fr;
  grid-template-areas: "a-years-game-row-info-year a-years-game-row-info-platform";
}

.a-years-game-row-info-year {
  grid-area: a-years-game-row-info-year;
  color: #AAAAAA;
  font-size: 1.25rem;
  align-self: center;
}

.a-years-game-row-info-platform {
  grid-area: a-years-game-row-info-platform;
  font-weight: bold;
  font-size: 1.3rem;
  align-self: center;
}

.a-years-game-row-info-any {
  grid-area: a-years-game-row-info-any;
  color: #1daf2c;
  font-size: 1.5rem;
}

.a-years-game-row-info-hundred {
  grid-area: a-years-game-row-info-hundred;
  color: #029ed2;
  font-size: 1.5rem;
}

.a-years-game-row-info-plat {
  grid-area: a-years-game-row-info-plat;
  color: #ffa500;
  font-size: 1.5rem;
}

.c-years-platforms {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
  justify-items: center;
}

.c-years-platform {
  display: grid;
  grid-template-columns: 21em;
  grid-template-rows: 3em 2em 2em 2em;
  grid-template-areas: "a-years-platform-platform" "a-years-platform-price" "a-years-platform-count" "a-years-platform-game";
  background-color: #2c2b2b;
  border-radius: 0.5em;
  padding: 1.5em;
  margin: 1.5em;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 4px 18px 0 rgba(0, 0, 0, 0.19);
  border: 2px solid;
}

.a-years-platform-platform {
  grid-area: a-years-platform-platform;
  align-self: center;
  justify-self: center;
}

.a-years-platform-price {
  grid-area: a-years-platform-price;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  align-self: center;
}

.a-years-platform-count {
  grid-area: a-years-platform-count;
  font-weight: bold;
  text-align: center;
  align-self: center;
}

.a-years-platform-game {
  grid-area: a-years-platform-game;
  text-align: center;
  align-self: center;
}

.years-game-row-new-platform {
  color: #016fc9;
}

.years-game-row-new-overall {
  color: #c9a101;
}

.c-years-bought-game-row-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "c-years-bought-game-row";
  border-bottom: 1px solid #373737;
  margin-bottom: 1em;
  padding-bottom: 1em;
}

.c-years-bought-game-row {
  display: grid;
  grid-template-columns: 6em 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "a-years-bought-game-row-cover c-years-bought-game-row-info";
}

.a-years-bought-game-row-cover {
  grid-area: a-years-bought-game-row-cover;
  align-self: center;
}

.c-years-bought-game-row-info {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3em auto 1.5em;
  grid-template-areas: "a-years-bought-game-row-info-name" "c-years-bought-game-row-info-year" "c-years-bought-game-row-info-any";
}

.a-years-bought-game-row-info-name {
  grid-area: a-years-bought-game-row-info-name;
  font-size: 1.3rem;
  font-weight: bold;
  max-width: 52em;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.2em;
  max-height: 2.4em;
  align-self: center;
}

.c-years-bought-game-row-info-year {
  display: grid;
  grid-template-columns: 3.5em 6em;
  grid-template-rows: 1fr;
  grid-template-areas: "a-years-bought-game-row-info-year a-years-bought-game-row-info-platform";
  padding-bottom: 0.5em;
}

.a-years-bought-game-row-info-year {
  grid-area: a-years-bought-game-row-info-year;
  color: #AAAAAA;
  font-size: 1rem;
  align-self: center;
}

.a-years-bought-game-row-info-platform {
  grid-area: a-years-bought-game-row-info-platform;
  font-weight: bold;
  font-size: 1.1rem;
  align-self: center;
}

.c-years-bought-game-row-info-price {
  display: grid;
  grid-template-columns: 7em auto;
  grid-template-rows: 1fr;
  grid-template-areas: "a-years-bought-game-row-info-price-date a-years-bought-game-row-info-price-price";
}

.a-years-bought-game-row-info-price-date {
  grid-area: a-years-bought-game-row-info-price-date;
  color: #AAAAAA;
  font-size: 1.1rem;
  align-self: end;
}

.a-years-bought-game-row-info-price-price {
  grid-area: a-years-bought-game-row-info-price-price;
  font-size: 1.1rem;
  align-self: end;
}

@media only screen and (max-width: 1300px) {
  .c-years-platform {
    grid-template-columns: 14em;
  }
  .a-years-game-row-info-name {
    max-width: 37em;
  }
  .a-years-bought-game-row-info-name {
    max-width: 37em;
  }
}
@media only screen and (max-width: 1000px) {
  .c-years-platforms {
    grid-template-columns: 1fr 1fr;
  }
  .a-years-game-row-info-name {
    max-width: 21em;
  }
  .a-years-bought-game-row-info-name {
    max-width: 21em;
  }
}
@media only screen and (max-width: 670px) {
  .c-years-platforms {
    grid-template-columns: 1fr;
  }
  .a-years-game-row-info-name {
    max-width: 13em;
    font-size: 1.1rem;
  }
  .a-years-bought-game-row-info-name {
    max-width: 13em;
    font-size: 1.1rem;
    -webkit-line-clamp: 2;
  }
}
.c-wishlist-page {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto auto 4em 6em auto;
  grid-template-areas: "a-wishlist-label" "a-wishlist-navigation" "a-wishlist-platforms" "c-wishlist-add" "c-wishlist-search-game" "c-wishlist";
}

.a-wishlist-label {
  color: #D9A036;
  grid-area: a-wishlist-label;
}

.a-wishlist-navigation {
  grid-area: a-wishlist-navigation;
  padding-bottom: 2em;
}

.a-wishlist-platforms {
  grid-area: a-wishlist-platforms;
  margin-bottom: 1em;
}

.c-wishlist-add {
  display: grid;
  grid-template-columns: 10em;
  grid-template-rows: 1fr;
  grid-template-areas: "a-wishlist-add";
}

.a-wishlist-add {
  grid-area: a-wishlist-add;
}

.c-wishlist-search-game {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-wishlist-search-game-label" "a-wishlist-search-game-input";
  padding-bottom: 2em;
}

.a-wishlist-search-game-label {
  grid-area: a-wishlist-search-game-label;
}

.a-wishlist-search-game-input {
  grid-area: a-wishlist-search-game-input;
}

.c-wishlist {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
}

.c-wishlist-game-row {
  display: grid;
  grid-template-columns: auto 2em;
  grid-template-rows: 1fr;
  grid-template-areas: "c-wishlist-game-info a-wishlist-game-delete";
  margin-bottom: 2em;
}

.c-wishlist-game-info {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 3em auto;
  grid-template-areas: "c-wishlist-game-row-row1" "c-wishlist-game-row-row2" "c-wishlist-game-row-row3";
}

.c-wishlist-game-row-row1 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "a-wishlist-game-row-info-name";
}

.a-wishlist-game-row-info-name {
  grid-area: a-wishlist-game-row-info-name;
  font-size: 1.3rem;
  font-weight: bold;
  align-self: center;
  max-width: 60em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.c-wishlist-game-row-row2 {
  display: grid;
  grid-template-columns: 6em 4em 2em 67em;
  grid-template-rows: 1fr;
  grid-template-areas: "a-wishlist-game-row-info-platform a-wishlist-game-row-info-year a-wishlist-game-row-info-region a-wishlist-game-row-info-edition";
}

.a-wishlist-game-row-info-platform {
  grid-area: a-wishlist-game-row-info-platform;
  align-self: center;
}

.a-wishlist-game-row-info-year {
  grid-area: a-wishlist-game-row-info-year;
  color: #AAAAAA;
  font-size: 1.2rem;
  align-self: center;
}

.a-wishlist-game-row-info-region {
  grid-area: a-wishlist-game-row-info-region;
  align-self: center;
}

.a-wishlist-game-row-info-edition {
  grid-area: a-wishlist-game-row-info-edition;
  max-width: 78em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  align-self: center;
}

.c-wishlist-game-row-row3 {
  display: grid;
  grid-template-columns: 6em auto;
  grid-template-rows: 1fr;
  grid-template-areas: "a-wishlist-game-row-cover c-wishlist-game-row-prices";
}

.a-wishlist-game-row-cover {
  grid-area: a-wishlist-game-row-cover;
}

.c-wishlist-game-row-prices {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
}

.c-wishlist-game-row-price {
  display: grid;
  grid-template-columns: 5em 5em;
  grid-template-rows: 1.3em;
  grid-template-areas: "a-wishlist-game-row-info-type a-wishlist-game-row-info-price";
  font-style: italic;
  color: #9A9A9A;
}

.a-wishlist-game-row-info-type {
  grid-area: a-wishlist-game-row-info-type;
  font-weight: bold;
}

.a-wishlist-game-row-info-price {
  grid-area: a-wishlist-game-row-info-price;
}

.a-wishlist-game-delete {
  grid-area: a-wishlist-game-delete;
  align-self: center;
}

.c-wishlist-modal-add-game {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em 2em 4em 1fr;
  grid-template-areas: "a-wishlist-modal-add-game-platform-label" "a-wishlist-modal-add-game-platform-input" "a-wishlist-modal-add-game-name-label" "a-wishlist-modal-add-game-name-input" "c-wishlist-modal-add-game-games-placeholder";
}

.a-wishlist-modal-add-game-platform-label {
  grid-area: a-wishlist-modal-add-game-platform-label;
}

.a-wishlist-modal-add-game-platform-input {
  grid-area: a-wishlist-modal-add-game-platform-input;
}

.a-wishlist-modal-add-game-name-label {
  grid-area: a-wishlist-modal-add-game-name-label;
}

.a-wishlist-modal-add-game-name-input {
  grid-area: a-wishlist-modal-add-game-name-input;
}

.c-wishlist-modal-add-game-games-placeholder {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-auto-flow: row;
  grid-template-areas: ".";
}

.c-wishlist-modal-add-game-game {
  display: grid;
  grid-template-columns: 6em 38em 6em;
  grid-template-rows: 8em;
  grid-template-areas: "a-wishlist-modal-add-game-game-cover c-wishlist-modal-add-game-game-name a-wishlist-modal-add-game-game-add";
  border-bottom: 1px #636363 solid;
}

.a-wishlist-modal-add-game-game-cover {
  grid-area: a-wishlist-modal-add-game-game-cover;
  align-self: center;
}

.c-wishlist-modal-add-game-game-name {
  display: grid;
  grid-template-columns: min-content 5em;
  grid-template-rows: 1fr;
  grid-template-areas: "a-wishlist-modal-add-game-game-name c-wishlist-modal-add-game-game-year";
  align-items: center;
}

.a-wishlist-modal-add-game-game-name {
  grid-area: a-wishlist-modal-add-game-game-name;
  max-width: 31em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: #f7f7f7;
  padding-right: 1em;
  font-weight: bold;
}

.c-wishlist-modal-add-game-game-year {
  display: grid;
  grid-template-columns: 2.5em 3em;
  grid-template-rows: 1fr;
  grid-template-areas: "a-wishlist-modal-add-game-game-year-icon a-wishlist-modal-add-game-game-year";
  align-items: center;
}

.a-wishlist-modal-add-game-game-year-icon {
  grid-area: a-wishlist-modal-add-game-game-year-icon;
  align-self: center;
}

.a-wishlist-modal-add-game-game-year {
  grid-area: a-wishlist-modal-add-game-game-year;
  color: #9A9A9A;
}

.a-wishlist-modal-add-game-game-add {
  grid-area: a-wishlist-modal-add-game-game-add;
  align-self: center;
}

.c-wishlist-modal-edition-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 2em;
  grid-template-areas: "c-wishlist-modal-region" "c-wishlist-modal-edition" "a-wishlist-modal-edition-submit";
}

.c-wishlist-modal-region {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-wishlist-modal-region-label" "a-wishlist-modal-region-input";
}

.a-wishlist-modal-region-label {
  grid-area: a-wishlist-modal-region-label;
}

.a-wishlist-modal-region-input {
  grid-area: a-wishlist-modal-region-input;
}

.c-wishlist-modal-edition {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em auto;
  grid-template-areas: "a-wishlist-modal-edition-label" "a-wishlist-modal-edition-input" "c-wishlist-modal-edition-name";
}

.a-wishlist-modal-edition-label {
  grid-area: a-wishlist-modal-edition-label;
}

.a-wishlist-modal-edition-input {
  grid-area: a-wishlist-modal-edition-input;
}

.c-wishlist-modal-edition-name {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-wishlist-modal-edition-name-label" "a-wishlist-modal-edition-name-input";
}

.a-wishlist-modal-edition-name-label {
  grid-area: a-wishlist-modal-edition-name-label;
}

.a-wishlist-modal-edition-name-input {
  grid-area: a-wishlist-modal-edition-name-input;
}

.a-wishlist-modal-edition-submit {
  grid-area: a-wishlist-modal-edition-submit;
}

.wishlist-added-icon {
  padding-left: 0.3em;
}

.game-cover-small {
  width: 75px;
  height: 100px;
  transition: 200ms;
}
.game-cover-small:hover {
  filter: brightness(1.1);
  transform: scale(1.02);
}

.modal-add-wishlist-button-icon {
  display: none;
}

@media only screen and (max-width: 1300px) {
  .c-wishlist-game-row-row2 {
    grid-template-columns: 6em 4em 2em 47em;
  }
  .a-wishlist-game-row-info-name {
    max-width: 44em;
  }
  .a-wishlist-game-row-info-edition {
    max-width: 51em;
  }
}
@media only screen and (max-width: 1000px) {
  .c-wishlist-game-row-row2 {
    grid-template-columns: 6em 4em 2em 27em;
  }
  .a-wishlist-game-row-info-name {
    max-width: 29em;
  }
  .a-wishlist-game-row-info-edition {
    max-width: 31em;
  }
}
@media only screen and (max-width: 870px) {
  .modal-content {
    width: 40em;
  }
  .c-wishlist-modal-add-game-game {
    grid-template-columns: 6em 28em 6em;
  }
  .a-wishlist-modal-add-game-game-name {
    max-width: 21em;
  }
  .modal-add-wishlist-button {
    display: block !important;
  }
  .modal-add-wishlist-button-icon {
    display: none !important;
  }
}
@media only screen and (max-width: 730px) {
  .modal-content {
    width: 23em;
  }
  .c-wishlist-modal-add-game-game {
    grid-template-columns: 5.3em 16em 1.5em;
  }
  .c-wishlist-modal-add-game-game-name {
    display: grid;
    grid-template-columns: 15em;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "a-wishlist-modal-add-game-game-name" "a-wishlist-modal-add-game-game-year";
  }
  .a-wishlist-modal-add-game-game-name {
    max-width: 15em;
    align-self: end;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.2em;
    max-height: 2.4em;
  }
  .a-wishlist-modal-add-game-game-year {
    align-self: start;
    padding-top: 0.5em;
  }
  .modal-add-wishlist-button {
    display: none !important;
  }
  .modal-add-wishlist-button-icon {
    display: block !important;
  }
}
@media only screen and (max-width: 670px) {
  .c-wishlist-game-row-row2 {
    grid-template-columns: 6em 4em 2em 13em;
  }
  .a-wishlist-game-row-info-name {
    max-width: 22em;
    font-size: 1.1rem;
  }
  .a-wishlist-game-row-info-edition {
    max-width: 19em;
    font-size: 0.9rem;
  }
}
.c-login {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto 1fr 4em 3em;
  grid-template-areas: "a-common-page-label" "a-login-error" "c-login-form" "a-login-register-link" "a-login-password";
}

.a-login-error {
  grid-area: a-login-error;
  background-color: #b90000;
  border: 0.15em solid #870000;
  padding: 0.6em;
  margin-bottom: 1em;
  font-weight: bold;
}

.c-login-form {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em 2em 4em auto 5em;
  grid-template-areas: "a-login-email-label" "a-login-email-input" "a-login-password-label" "a-login-password-input" "c-login-password-remember" "a-login-submit";
}

.a-login-email-label {
  grid-area: a-login-email-label;
}

.a-login-email-input {
  grid-area: a-login-email-input;
}

.a-login-password-label {
  grid-area: a-login-password-label;
}

.a-login-password-input {
  grid-area: a-login-password-input;
}

.c-login-password-remember {
  display: grid;
  grid-template-columns: 2em 18em;
  grid-template-rows: 3em;
  grid-template-areas: "a-login-password-remember-input a-login-password-remember-label";
}

.a-login-password-remember-input {
  grid-area: a-login-password-remember-input;
}

.a-login-password-remember-label {
  grid-area: a-login-password-remember-label;
}

.a-login-submit {
  grid-area: a-login-submit;
}

.a-login-register-link {
  grid-area: a-login-register-link;
  padding-top: 1em;
}

.a-login-password {
  grid-area: a-login-password;
}

.login-link-label {
  padding-right: 0.3em;
}

.c-reset-password {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto auto;
  grid-template-areas: "a-reset-password-label" "a-reset-password-error" "c-reset-password-form";
}

.a-reset-password-error {
  grid-area: a-reset-password-error;
  background-color: #b90000;
  border: 0.15em solid #870000;
  padding: 0.6em;
  margin-bottom: 1em;
  font-weight: bold;
}

.c-reset-password-form {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em 5em;
  grid-template-areas: "a-reset-password-form-email-label" "a-reset-password-form-email-input" "a-reset-password-form-submit";
}

.a-reset-password-form-email-label {
  grid-area: a-reset-password-form-email-label;
}

.a-reset-password-form-email-input {
  grid-area: a-reset-password-form-email-input;
}

.a-reset-password-form-submit {
  grid-area: a-reset-password-form-submit;
}

.a-reset-password-form-submit {
  grid-area: a-reset-password-form-submit;
}

.c-new-password {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto;
  grid-template-areas: "a-new-password-header" "c-new-password-form";
}

.a-new-password-header {
  grid-area: a-new-password-header;
}

.c-new-password-form {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1.5em 4em auto 1.5em 4em auto 2em;
  grid-template-areas: "a-new-password-password-label" "a-new-password-password-input" "a-new-password-password-error" "a-new-password-confirm-password-label" "a-new-password-confirm-password-input" "a-new-password-confirm-password-error" "a-new-password-submit";
}

.a-new-password-password-label {
  grid-area: a-new-password-password-label;
}

.a-new-password-password-input {
  grid-area: a-new-password-password-input;
}

.a-new-password-password-error {
  grid-area: a-new-password-password-error;
  margin-bottom: 2em;
}

.a-new-password-confirm-password-label {
  grid-area: a-new-password-confirm-password-label;
}

.a-new-password-confirm-password-input {
  grid-area: a-new-password-confirm-password-input;
}

.a-new-password-confirm-password-error {
  grid-area: a-new-password-confirm-password-error;
  margin-bottom: 2em;
}

.a-new-password-submit {
  grid-area: a-new-password-submit;
}

.c-registration {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto;
  grid-template-areas: "a-registration-header" "c-registration-form";
}

.a-registration-header {
  grid-area: a-registration-header;
}

.c-registration-form {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto auto 5em;
  grid-template-areas: "c-registration-email" "c-registration-username" "c-registration-password" "c-registration-confirm-password" "c-registration-private" "a-registration-submit";
}

.c-registration-email {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1.5em 4em auto;
  grid-template-areas: "a-registration-email-label" "a-registration-email-input" "a-registration-email-error";
}

.a-registration-email-label {
  grid-area: a-registration-email-label;
}

.a-registration-email-input {
  grid-area: a-registration-email-input;
}

.a-registration-email-error {
  grid-area: a-registration-email-error;
}

.c-registration-username {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1.5em 3em auto auto;
  grid-template-areas: "a-registration-username-label" "a-registration-username-input" "a-registration-username-help" "a-registration-username-error";
}

.a-registration-username-label {
  grid-area: a-registration-username-label;
}

.a-registration-username-input {
  grid-area: a-registration-username-input;
}

.a-registration-username-help {
  grid-area: a-registration-username-help;
  padding-bottom: 2em;
}

.a-registration-username-error {
  grid-area: a-registration-username-error;
}

.c-registration-password {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1.5em 4em auto;
  grid-template-areas: "a-registration-password-label" "a-registration-password-input" "a-registration-password-error";
}

.a-registration-password-label {
  grid-area: a-registration-password-label;
}

.a-registration-password-input {
  grid-area: a-registration-password-input;
}

.a-registration-password-error {
  grid-area: a-registration-password-error;
}

.c-registration-confirm-password {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1.5em 4em auto;
  grid-template-areas: "a-registration-confirm-password-label" "a-registration-confirm-password-input" "a-registration-confirm-password-error";
}

.a-registration-confirm-password-label {
  grid-area: a-registration-confirm-password-label;
}

.a-registration-confirm-password-input {
  grid-area: a-registration-confirm-password-input;
}

.a-registration-confirm-password-error {
  grid-area: a-registration-confirm-password-error;
}

.c-registration-private {
  display: grid;
  grid-template-columns: 2em 1fr;
  grid-template-rows: 3em;
  grid-template-areas: "a-registration-private-input a-registration-private-label";
}

.a-registration-private-input {
  grid-area: a-registration-private-input;
}

.a-registration-private-label {
  grid-area: a-registration-private-label;
}

.a-registration-submit {
  grid-area: a-registration-submit;
}

.c-settings {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto auto auto auto 3em;
  grid-template-areas: "a-settings-label" "a-settings-navigation" "c-settings-general" "c-settings-platforms-wrapper" "c-settings-tags-wrapper" "a-settings-save";
}

.a-settings-label {
  grid-area: a-settings-label;
}

.a-settings-navigation {
  grid-area: a-settings-navigation;
  padding-bottom: 2em;
}

.c-settings-general {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "c-settings-general-wrapper" "c-settings-notifications-wrapper";
}

.c-settings-general-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto auto auto auto auto;
  grid-template-areas: "c-settings-general-currency" "c-settings-general-region" "c-settings-general-timezone" "c-settings-general-library-completion" "c-settings-general-private-top" "c-settings-general-show-information" "c-settings-general-remove-wishlist" "c-settings-general-ps-plus";
  border-bottom: 1px solid #6d6d6d;
  padding-bottom: 2em;
  margin-bottom: 1em;
}

.c-settings-general-currency {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-settings-general-currency-label" "a-settings-general-currency-input";
}

.a-settings-general-currency-label {
  grid-area: a-settings-general-currency-label;
}

.a-settings-general-currency-input {
  grid-area: a-settings-general-currency-input;
}

.c-settings-general-region {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-settings-general-region-label" "a-settings-general-region-input";
}

.a-settings-general-region-label {
  grid-area: a-settings-general-region-label;
}

.a-settings-general-region-input {
  grid-area: a-settings-general-region-input;
}

.c-settings-general-timezone {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-settings-general-timezone-label" "a-settings-general-timezone-input";
}

.a-settings-general-timezone-label {
  grid-area: a-settings-general-timezone-label;
}

.a-settings-general-timezone-input {
  grid-area: a-settings-general-timezone-input;
}

.c-settings-general-library-completion {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-settings-general-library-completion-label" "a-settings-general-library-completion-input";
}

.a-settings-general-library-completion-label {
  grid-area: a-settings-general-library-completion-label;
}

.a-settings-general-library-completion-input {
  grid-area: a-settings-general-library-completion-input;
}

.c-settings-general-private-top {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-settings-general-private-top-label" "a-settings-general-private-top-input";
}

.a-settings-general-private-top-label {
  grid-area: a-settings-general-private-top-label;
}

.a-settings-general-private-top-input {
  grid-area: a-settings-general-private-top-input;
}

.c-settings-general-show-information {
  display: grid;
  grid-template-columns: 32em 2em;
  grid-template-rows: 3em;
  grid-template-areas: "a-settings-general-show-information-label a-settings-general-show-information-input";
  align-items: center;
}

.a-settings-general-show-information-label {
  grid-area: a-settings-general-show-information-label;
}

.a-settings-general-show-information-input {
  grid-area: a-settings-general-show-information-input;
}

.c-settings-general-remove-wishlist {
  display: grid;
  grid-template-columns: 32em 2em;
  grid-template-rows: 3em;
  grid-template-areas: "a-settings-general-remove-wishlist-label a-settings-general-remove-wishlist-input";
  align-items: center;
}

.a-settings-general-remove-wishlist-label {
  grid-area: a-settings-general-remove-wishlist-label;
}

.a-settings-general-remove-wishlist-input {
  grid-area: a-settings-general-remove-wishlist-input;
}

.c-settings-general-ps-plus {
  display: grid;
  grid-template-columns: 32em 2em;
  grid-template-rows: 3em;
  grid-template-areas: "a-settings-general-ps-plus-label a-settings-general-ps-plus-input";
  align-items: center;
}

.a-settings-general-ps-plus-label {
  grid-area: a-settings-general-ps-plus-label;
}

.a-settings-general-ps-plus-input {
  grid-area: a-settings-general-ps-plus-input;
}

.c-settings-general-ps-plus-value-type {
  display: grid;
  grid-template-columns: 18.5em 15em;
  grid-template-rows: 3em 3em;
  grid-template-areas: "a-settings-general-ps-plus-value-type-label a-settings-general-ps-plus-value-type-input" "a-settings-general-ps-plus-value-label a-settings-general-ps-plus-value-input";
  align-items: center;
  padding-left: 2em;
}

.a-settings-general-ps-plus-value-type-label {
  grid-area: a-settings-general-ps-plus-value-type-label;
}

.a-settings-general-ps-plus-value-type-input {
  grid-area: a-settings-general-ps-plus-value-type-input;
}

.a-settings-general-ps-plus-value-label {
  grid-area: a-settings-general-ps-plus-value-label;
}

.a-settings-general-ps-plus-value-input {
  grid-area: a-settings-general-ps-plus-value-input;
}

.c-settings-notifications-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 4em auto auto auto auto;
  grid-template-areas: "a-settings-general-notifications-label" "c-settings-general-notifications-new-top" "c-settings-general-notifications-new-top-friend" "c-settings-general-notifications-new-review" "c-settings-general-notifications-new-review-friend";
  border-bottom: 1px solid #6d6d6d;
  padding-bottom: 2em;
  margin-bottom: 1em;
}

.a-settings-general-notifications-label {
  grid-area: a-settings-general-notifications-label;
}

.c-settings-general-notifications-new-top {
  display: grid;
  grid-template-columns: 22em 2em;
  grid-template-rows: 3em;
  grid-template-areas: "a-settings-general-notifications-new-top-label a-settings-general-notifications-new-top-input";
  align-items: center;
}

.a-settings-general-notifications-new-top-label {
  grid-area: a-settings-general-notifications-new-top-label;
}

.a-settings-general-notifications-new-top-input {
  grid-area: a-settings-general-notifications-new-top-input;
}

.c-settings-general-notifications-new-top-friend {
  display: grid;
  grid-template-columns: 22em 2em;
  grid-template-rows: 3em;
  grid-template-areas: "a-settings-general-notifications-new-top-friend-label a-settings-general-notifications-new-top-friend-input";
  align-items: center;
}

.a-settings-general-notifications-new-top-friend-label {
  grid-area: a-settings-general-notifications-new-top-friend-label;
}

.a-settings-general-notifications-new-top-friend-input {
  grid-area: a-settings-general-notifications-new-top-friend-input;
}

.c-settings-general-notifications-new-review {
  display: grid;
  grid-template-columns: 22em 2em;
  grid-template-rows: 3em;
  grid-template-areas: "a-settings-general-notifications-new-review-label a-settings-general-notifications-new-review-input";
  align-items: center;
}

.a-settings-general-notifications-new-review-label {
  grid-area: a-settings-general-notifications-new-review-label;
}

.a-settings-general-notifications-new-review-input {
  grid-area: a-settings-general-notifications-new-review-input;
}

.c-settings-general-notifications-new-review-friend {
  display: grid;
  grid-template-columns: 22em 2em;
  grid-template-rows: 3em;
  grid-template-areas: "a-settings-general-notifications-new-review-friend-label a-settings-general-notifications-new-review-friend-input";
  align-items: center;
}

.a-settings-general-notifications-new-review-friend-label {
  grid-area: a-settings-general-notifications-new-review-friend-label;
}

.a-settings-general-notifications-new-review-friend-input {
  grid-area: a-settings-general-notifications-new-review-friend-input;
}

.c-settings-platforms-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 4em auto;
  grid-template-areas: "a-settings-platforms-label" "c-settings-platforms";
  border-bottom: 1px solid #6d6d6d;
  padding-bottom: 2em;
  margin-bottom: 1em;
}

.a-settings-platforms-label {
  grid-area: a-settings-platforms-label;
}

.c-settings-platforms {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: ". . . .";
  column-gap: 1em;
  row-gap: 1em;
}

.c-settings-platform {
  display: grid;
  grid-template-columns: 16em 3em;
  grid-template-rows: 4em;
  grid-template-areas: "a-settings-platform a-settings-platform-icon";
  border-radius: 0.3em;
  align-self: center;
  border: 4px solid #740101;
  background-color: #222222;
  transition: 300ms;
}
.c-settings-platform:hover {
  cursor: pointer;
}

.a-settings-platform {
  grid-area: a-settings-platform;
  font-weight: bold;
  padding: 1em;
  text-align: center;
  border-radius: 0.2em;
  align-self: center;
  margin-left: 2em;
}

.a-settings-platform-icon {
  grid-area: a-settings-platform-icon;
  align-self: center;
}

.platform-active {
  border-color: #006400 !important;
  border-radius: 0.3em;
}

.settings-platform-circle {
  padding-left: 0.5em;
}

.a-settings-save {
  grid-area: a-settings-save;
  padding-top: 1em;
}

.c-settings-tags-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 4em auto;
  grid-template-areas: "a-settings-tags-label" "c-settings-tags";
}

.a-settings-tags-label {
  grid-area: a-settings-tags-label;
}

.c-settings-tags {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 4em auto;
  grid-template-areas: "a-settings-tags-add" "c-settings-tags-list";
}

.a-settings-tags-add {
  grid-area: a-settings-tags-add;
}

.c-settings-tags-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16.5em, 1fr));
  padding-bottom: 1em;
}

.c-settings-tag {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 1fr;
  grid-template-areas: "a-settings-tag-main-name c-settings-tag-actions";
  margin-right: 1em;
  padding-bottom: 1em;
}

.c-settings-tag-actions {
  display: grid;
  grid-template-columns: 2em 2em;
  grid-template-rows: 1fr;
  grid-template-areas: "a-settings-tag-actions-edit a-settings-tag-actions-delete";
  align-items: center;
  justify-items: center;
  padding-left: 0.5em;
}

.a-settings-tag-actions-edit {
  grid-area: a-settings-tag-actions-edit;
}

.a-settings-tag-actions-delete {
  grid-area: a-settings-tag-actions-delete;
}

.c-settings-add-tag {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1em 4em 1em 4em 1em 4em 4em 2em;
  grid-template-areas: "a-settings-add-tag-name-label" "a-settings-add-tag-name-input" "a-settings-add-tag-color-label" "a-settings-add-tag-color-input" "a-settings-add-tag-text-color-label" "a-settings-add-tag-text-color-input" "a-settings-add-tag-preview" "a-settings-add-tag-submit";
}

.a-settings-add-tag-name-label {
  grid-area: a-settings-add-tag-name-label;
}

.a-settings-add-tag-name-input {
  grid-area: a-settings-add-tag-name-input;
}

.a-settings-add-tag-color-label {
  grid-area: a-settings-add-tag-color-label;
}

.a-settings-add-tag-color-input {
  grid-area: a-settings-add-tag-color-input;
}

.a-settings-add-tag-text-color-label {
  grid-area: a-settings-add-tag-text-color-label;
}

.a-settings-add-tag-text-color-input {
  grid-area: a-settings-add-tag-text-color-input;
}

.a-settings-add-tag-preview {
  grid-area: a-settings-add-tag-preview;
  justify-self: center;
}

.a-settings-add-tag-submit {
  grid-area: a-settings-add-tag-submit;
}

@media only screen and (max-width: 1300px) {
  .c-settings-platforms {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: ". . . ";
  }
}
@media only screen and (max-width: 1000px) {
  .c-settings-platforms {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: ". .";
  }
}
@media only screen and (max-width: 670px) {
  .c-settings-platforms {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: ".";
    grid-auto-flow: row;
    column-gap: 1em;
    row-gap: 1em;
  }
  .c-settings-platform {
    grid-template-columns: 23.5em 3em;
  }
  .c-settings-general-remove-wishlist {
    grid-template-columns: 23em 2em;
  }
  .c-settings-general-ps-plus {
    grid-template-columns: 23em 2em;
  }
  .c-settings-general-ps-plus-value-type {
    grid-template-columns: 9.5em 15em;
  }
  .c-settings-general-show-information {
    grid-template-columns: 23em 2em;
  }
}
.c-personal {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 7em auto auto auto 4em;
  grid-template-areas: "a-personal-label" "a-personal-navigation" "c-personal-personal-wrapper" "c-personal-picture-wrapper" "a-personal-privacy-password";
}

.a-personal-label {
  grid-area: a-personal-label;
}

.a-personal-navigation {
  grid-area: a-personal-navigation;
  padding-bottom: 2em;
}

.c-personal-personal-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3em auto 1.5em 4em auto 5em;
  grid-template-areas: "a-personal-personal-label" "c-personal-personal-name" "a-personal-personal-email-label" "a-personal-personal-email-input" "a-personal-personal-email-error" "a-personal-personal-submit";
}

.a-personal-personal-label {
  grid-area: a-personal-personal-label;
  padding-bottom: 1em;
}

.c-personal-personal-name {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1.5em 3em auto auto;
  grid-template-areas: "a-personal-personal-name-label" "a-personal-personal-name-input" "a-personal-personal-name-help" "a-personal-personal-name-error";
}

.a-personal-personal-name-label {
  grid-area: a-personal-personal-name-label;
}

.a-personal-personal-name-input {
  grid-area: a-personal-personal-name-input;
}

.a-personal-personal-name-help {
  grid-area: a-personal-personal-name-help;
  padding-bottom: 1em;
}

.a-personal-personal-name-error {
  grid-area: a-personal-personal-name-error;
  margin-bottom: 1em;
}

.a-personal-personal-email-label {
  grid-area: a-personal-personal-email-label;
}

.a-personal-personal-email-input {
  grid-area: a-personal-personal-email-input;
}

.a-personal-personal-email-error {
  grid-area: a-personal-personal-email-error;
  margin-bottom: 1em;
}

.a-personal-personal-submit {
  grid-area: a-personal-personal-submit;
  padding-bottom: 3em;
  border-bottom: 1px #6d6d6d solid;
}

.c-personal-personal-password-content {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em auto auto;
  grid-template-areas: "a-personal-personal-password-label" "a-personal-personal-password-input" "a-personal-personal-password-error" "a-personal-personal-password-submit";
}

.a-personal-personal-password-label {
  grid-area: a-personal-personal-password-label;
}

.a-personal-personal-password-input {
  grid-area: a-personal-personal-password-input;
}

.a-personal-personal-password-error {
  grid-area: a-personal-personal-password-error;
}

.a-personal-personal-password-submit {
  grid-area: a-personal-personal-password-submit;
}

.c-personal-picture-wrapper {
  display: none;
  grid-template-columns: 1fr;
  grid-template-rows: 4em 20em auto;
  grid-template-areas: "a-personal-picture-label" "a-personal-picture-current" "c-personal-picture-form";
}

.a-personal-picture-label {
  grid-area: a-personal-picture-label;
}

.a-personal-picture-current {
  grid-area: a-personal-picture-current;
}

.c-personal-picture-form {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 4em;
  grid-template-areas: "a-personal-picture-submit";
}

.a-personal-picture-submit {
  grid-area: a-personal-picture-submit;
  padding-bottom: 3em;
  border-bottom: 1px #6d6d6d solid;
}

.a-personal-privacy-password {
  grid-area: a-personal-privacy-password;
  align-self: center;
}

.c-change-password {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto 1em;
  grid-template-areas: "a-change-password-header" "c-change-password-form" "a-change-password-back";
}

.a-change-password-header {
  grid-area: a-change-password-header;
}

.c-change-password-form {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1.5em 4em 1.5em 4em 1.5em 4em 5em;
  grid-template-areas: "a-change-password-error" "a-change-password-old-label" "a-change-password-old-input" "a-change-password-new-label" "a-change-password-new-input" "a-change-password-confirm-label" "a-change-password-confirm-input" "a-change-password-submit";
}

.a-change-password-error {
  grid-area: a-change-password-error;
  margin-bottom: 2em;
}

.a-change-password-old-label {
  grid-area: a-change-password-old-label;
}

.a-change-password-old-input {
  grid-area: a-change-password-old-input;
}

.a-change-password-new-label {
  grid-area: a-change-password-new-label;
}

.a-change-password-new-input {
  grid-area: a-change-password-new-input;
}

.a-change-password-confirm-label {
  grid-area: a-change-password-confirm-label;
}

.a-change-password-confirm-input {
  grid-area: a-change-password-confirm-input;
}

.a-change-password-submit {
  grid-area: a-change-password-submit;
}

.a-change-password-back {
  grid-area: a-change-password-back;
}

.c-settings-data-management {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto 4em 4em 4em 6em 2em 2em 2em 2em 2em 2em 2em;
  grid-template-areas: "a-settings-data-management-label" "a-settings-data-management-navigation" "a-settings-data-management-delete-top" "a-settings-data-management-delete-library" "a-settings-data-management-delete-wishlist" "a-settings-data-management-delete-profile" "a-settings-data-management-import-top" "a-settings-data-management-import-library" "a-settings-data-management-import-wishlist" "a-settings-data-management-import-steam" "a-settings-data-management-export-top" "a-settings-data-management-export-library" "a-settings-data-management-export-wishlist";
}

.a-settings-data-management-label {
  grid-area: a-settings-data-management-label;
}

.a-settings-data-management-navigation {
  grid-area: a-settings-data-management-navigation;
  padding-bottom: 2em;
}

.a-settings-data-management-delete-top {
  grid-area: a-settings-data-management-delete-top;
}

.a-settings-data-management-delete-library {
  grid-area: a-settings-data-management-delete-library;
}

.a-settings-data-management-delete-wishlist {
  grid-area: a-settings-data-management-delete-wishlist;
}

.a-settings-data-management-delete-profile {
  grid-area: a-settings-data-management-delete-profile;
  border-bottom: 1px solid #6d6d6d;
  margin-bottom: 2em;
}

.a-settings-data-management-import-top {
  grid-area: a-settings-data-management-import-top;
}

.a-settings-data-management-import-library {
  grid-area: a-settings-data-management-import-library;
}

.a-settings-data-management-import-wishlist {
  grid-area: a-settings-data-management-import-wishlist;
}

.a-settings-data-management-import-steam {
  grid-area: a-settings-data-management-import-steam;
}

.a-settings-data-management-export-top {
  grid-area: a-settings-data-management-export-top;
}

.a-settings-data-management-export-library {
  grid-area: a-settings-data-management-export-library;
}

.a-settings-data-management-export-wishlist {
  grid-area: a-settings-data-management-export-wishlist;
}

.c-settings-data-password-content {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em auto auto;
  grid-template-areas: "a-settings-data-password-label" "a-settings-data-password-input" "a-settings-data-password-error" "a-settings-data-password-submit";
}

.a-settings-data-password-label {
  grid-area: a-settings-data-password-label;
}

.a-settings-data-password-input {
  grid-area: a-settings-data-password-input;
}

.a-settings-data-password-error {
  grid-area: a-settings-data-password-error;
}

.a-settings-data-password-submit {
  grid-area: a-settings-data-password-submit;
}

.c-home {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em;
  grid-template-areas: "a-home-label";
}

.a-home-label {
  grid-area: a-home-label;
}

.c-home-blocks {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
}

.c-home-block {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 4em auto;
  grid-template-areas: "a-home-block-title" "c-home-block-content";
  padding-bottom: 1em;
}

.c-home-newest-games {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-auto-flow: row;
  grid-template-areas: ". . . . . . .";
  align-items: center;
  justify-self: center;
  grid-gap: 1em;
  padding-bottom: 1em;
}
.c-home-newest-games .a-home-newest-game:nth-child(8) {
  display: none;
}

.c-home-recent-reviews-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "c-home-recent-reviews-arrows" "c-home-recent-reviews";
}

.c-home-recent-reviews-arrows {
  display: grid;
  grid-template-columns: 3em 3em;
  grid-template-rows: 3em;
  grid-template-areas: "a-home-recent-reviews-arrows-left a-home-recent-reviews-arrows-right";
}

.a-home-recent-reviews-arrows-left {
  grid-area: a-home-recent-reviews-arrows-left;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #262626;
  transition: 300ms;
}
.a-home-recent-reviews-arrows-left:hover {
  background-color: #373737;
  color: #D9A036;
  cursor: pointer;
}

.a-home-recent-reviews-arrows-right {
  grid-area: a-home-recent-reviews-arrows-right;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #262626;
  transition: 300ms;
}
.a-home-recent-reviews-arrows-right:hover {
  background-color: #373737;
  color: #D9A036;
  cursor: pointer;
}

.c-home-recent-reviews {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
  padding-top: 1em;
}

.c-home-recent-review {
  display: grid;
  grid-template-columns: 11em 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "c-home-recent-review-left c-home-recent-review-right";
  background-color: #262626;
  padding: 1em;
  border-radius: 0.5em;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 4px 18px 0 rgba(0, 0, 0, 0.19);
}

.c-home-recent-review-left {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "a-home-recent-review-cover";
}

.a-home-recent-review-cover {
  grid-area: a-home-recent-review-cover;
}

.c-home-recent-review-right {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 4em min-content min-content auto;
  grid-template-areas: "a-home-recent-review-game-name" "c-home-recent-review-game-info" "c-home-recent-review-game-review-score" "a-home-recent-review-game-review-text";
}

.a-home-recent-review-game-name {
  grid-area: a-home-recent-review-game-name;
  align-self: center;
  color: #f7f7f7;
  font-size: 1.5rem;
  max-width: 45em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.c-home-recent-review-game-info {
  display: grid;
  grid-template-columns: 4em 1fr;
  grid-template-rows: 2em;
  grid-template-areas: "a-home-recent-review-game-info-year a-home-recent-review-game-info-platform";
}

.a-home-recent-review-game-info-year {
  grid-area: a-home-recent-review-game-info-year;
  align-self: center;
  color: #AAAAAA;
  font-size: 1.25rem;
}

.a-home-recent-review-game-info-platform {
  grid-area: a-home-recent-review-game-info-platform;
  align-self: center;
  justify-self: start;
  font-weight: bold;
}

.c-home-recent-review-game-review-score {
  display: grid;
  grid-template-columns: 3em 2em auto 1fr;
  grid-template-rows: 2.5em;
  grid-template-areas: "a-home-recent-review-game-review-score a-home-recent-review-game-review-likes a-home-recent-review-game-review-likes-count a-home-recent-review-game-review-top";
}

.a-home-recent-review-game-review-score {
  grid-area: a-home-recent-review-game-review-score;
  align-self: center;
  font-size: 1.8rem;
}

.a-home-recent-review-game-review-likes-count {
  grid-area: a-home-recent-review-game-review-likes-count;
  align-self: center;
}

.a-home-recent-review-game-review-likes {
  grid-area: a-home-recent-review-game-review-likes;
  align-self: center;
  justify-self: center;
}

.a-home-recent-review-game-review-top {
  grid-area: a-home-recent-review-game-review-top;
}

.a-home-recent-review-game-review-text {
  grid-area: a-home-recent-review-game-review-text;
  color: #dbdbdb;
  font-size: 0.8rem;
}

@media only screen and (max-width: 1300px) {
  .c-home-newest-games {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-auto-flow: row;
    grid-template-areas: ". . .";
    align-items: center;
    justify-self: center;
    grid-gap: 1em;
    padding-bottom: 1em;
  }
  .c-home-newest-games .a-home-newest-game:nth-child(7) {
    display: none;
  }
  .c-home-newest-games .a-home-newest-game:nth-child(8) {
    display: none;
  }
  .a-home-recent-review-game-name {
    max-width: 32em;
  }
}
@media only screen and (max-width: 1000px) {
  .a-home-recent-review-game-name {
    max-width: 19em;
  }
}
@media only screen and (max-width: 670px) {
  .c-home-newest-games {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-auto-flow: row;
    grid-template-areas: ". .";
    align-items: center;
    justify-self: center;
    grid-gap: 1em;
    padding-bottom: 1em;
  }
  .c-home-newest-games .a-home-newest-game:nth-child(5) {
    display: none;
  }
  .c-home-newest-games .a-home-newest-game:nth-child(6) {
    display: none;
  }
  .c-home-newest-games .a-home-newest-game:nth-child(7) {
    display: none;
  }
  .c-home-newest-games .a-home-newest-game:nth-child(8) {
    display: none;
  }
  .c-home-recent-review {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "c-home-recent-review-left" "c-home-recent-review-right";
  }
  .a-home-recent-review-cover {
    align-self: center;
    justify-self: center;
  }
}
.c-users {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto auto;
  grid-template-areas: "a-users-header" "c-users-search-user" "c-users-users";
}

.a-users-header {
  grid-area: a-users-header;
}

.c-users-search-user {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: "c-users-search-user-name c-users-search-user-type";
  padding-bottom: 1em;
  grid-column-gap: 2em;
}

.c-users-search-user-name {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-users-search-user-label" "a-users-search-user-input";
}

.a-users-search-user-label {
  grid-area: a-users-search-user-label;
}

.a-users-search-user-input {
  grid-area: a-users-search-user-input;
}

.c-users-search-user-type {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-users-search-user-type-label" "a-users-search-user-type-input";
}

.a-users-search-user-type-label {
  grid-area: a-users-search-user-type-label;
}

.a-users-search-user-type-input {
  grid-area: a-users-search-user-type-input;
}

.c-users-users {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
}

.c-users-user {
  display: grid;
  grid-template-columns: 7em auto auto;
  grid-template-rows: 6.5em;
  grid-template-areas: "a-users-user-picture a-users-user-name a-users-user-statuses";
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 4px 18px 0 rgba(0, 0, 0, 0.19);
  background-color: #262626;
  border-radius: 6px;
  margin-bottom: 1em;
  padding: 0.5em;
}

.a-users-user-picture {
  grid-area: a-users-user-picture;
  align-self: center;
}

.a-users-user-name {
  grid-area: a-users-user-name;
  max-width: 38em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: #f7f7f7;
  padding-right: 0.6em;
  font-weight: bold;
  align-self: center;
  font-size: 1.5rem;
}
.a-users-user-name :link {
  transition: 300ms;
  color: #f7f7f7;
  text-decoration: none;
}
.a-users-user-name :visited {
  color: #f7f7f7;
  text-decoration: none;
}
.a-users-user-name :hover {
  color: #D9A036;
  text-decoration: none;
}
.a-users-user-name :active {
  text-decoration: none;
}

.a-users-user-statuses {
  grid-area: a-users-user-statuses;
  align-self: center;
  justify-self: end;
  padding-right: 1em;
}

.user-picture-share {
  width: 300px;
  height: 300px;
}

@media only screen and (max-width: 670px) {
  .a-users-user-name {
    font-size: 1.3rem;
  }
}
.c-users-top {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto auto auto auto;
  grid-template-areas: "a-users-top-label" "a-users-top-navigation" "c-users-top-filters" "c-users-top-search-game" "c-users-top-games";
}

.a-users-top-label {
  grid-area: a-users-top-label;
}

.a-users-top-navigation {
  grid-area: a-users-top-navigation;
  padding-bottom: 2em;
}

.c-users-top-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: "c-users-top-filter-platform c-users-top-filter-completion";
  justify-content: space-between;
  grid-gap: 2em;
}

.c-users-top-filter-platform {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-users-top-filter-platform-label" "a-users-top-filter-platform-input";
}

.a-users-top-filter-platform-label {
  grid-area: a-users-top-filter-platform-label;
}

.a-users-top-filter-platform-input {
  grid-area: a-users-top-filter-platform-input;
}

.c-users-top-filter-completion {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-users-top-filter-completion-label" "a-users-top-filter-completion-input";
}

.a-users-top-filter-completion-label {
  grid-area: a-users-top-filter-completion-label;
}

.a-users-top-filter-completion-input {
  grid-area: a-users-top-filter-completion-input;
}

.c-users-top-search-game {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-users-top-search-game-label" "a-users-top-search-game-input";
  padding-bottom: 2em;
}

.a-users-top-search-game-label {
  grid-area: a-users-top-search-game-label;
}

.a-users-top-search-game-input {
  grid-area: a-users-top-search-game-input;
}

.c-users-top-games {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
}

.c-users-top-row {
  display: grid;
  grid-template-columns: 5em 5.5em auto;
  grid-template-rows: 6.5em;
  grid-template-areas: "a-users-top-position a-users-top-cover c-users-top-full-info";
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 4px 18px 0 rgba(0, 0, 0, 0.19);
  background-color: #262626;
  border-radius: 6px;
  margin-bottom: 1em;
  padding: 0.5em;
}

.a-users-top-position {
  color: #f7f7f7;
  font-size: 1.75rem;
  align-self: center;
  justify-self: center;
  grid-area: a-users-top-position;
  padding-right: 0.3em;
}

.a-users-top-cover {
  display: flex;
  align-items: center;
  grid-area: a-users-top-cover;
}

.c-users-top-full-info {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 1fr 1fr;
  grid-auto-flow: row;
  grid-template-areas: "c-users-top-name" "c-users-top-info";
}

.c-users-top-name {
  display: grid;
  grid-template-columns: min-content auto;
  grid-auto-flow: row;
  grid-template-areas: "a-users-top-name a-users-top-year";
  align-items: center;
  font-size: 1.5rem;
  padding-top: 0.2em;
}

.a-users-top-name {
  grid-area: a-users-top-name;
  max-width: 42em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: #f7f7f7;
  padding-right: 0.6em;
  font-weight: bold;
}

.a-users-top-year {
  grid-area: a-users-top-year;
  color: #9A9A9A;
  padding-right: 1em;
  align-self: center;
}

.c-users-top-info {
  display: grid;
  grid-template-columns: 5em 3em;
  grid-template-rows: 1fr;
  grid-template-areas: "a-users-top-platform a-users-top-score";
}

.a-users-top-platform {
  grid-area: a-users-top-platform;
  align-self: center;
  justify-self: center;
}

.a-users-top-score {
  font-size: 1.7rem;
  grid-area: a-users-top-score;
  align-self: center;
  justify-self: center;
}

@media only screen and (max-width: 1300px) {
  .c-users-top-row {
    display: grid;
    grid-template-columns: 5em 5.5em auto;
    grid-template-rows: 6.5em;
    grid-template-areas: "a-users-top-position a-users-top-cover c-users-top-full-info";
  }
  .c-users-top-name {
    font-size: 1.45rem;
  }
  .a-users-top-name {
    max-width: 30em;
  }
}
@media only screen and (max-width: 1000px) {
  .c-users-top-row {
    display: grid;
    grid-template-columns: 5em 5.5em auto;
    grid-template-rows: 7em;
    grid-template-areas: "a-users-top-position a-users-top-cover c-users-top-full-info";
  }
  .c-users-top-name {
    font-size: 1.1rem;
  }
  .a-users-top-name {
    max-width: 22em;
  }
  .a-users-top-platform {
    font-size: 1.2rem;
  }
}
@media only screen and (max-width: 670px) {
  .c-users-top-row {
    grid-template-columns: 3em 5.5em auto;
  }
  .c-users-top-filters {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: "c-top-filter-platform" "c-top-filter-completion";
    grid-gap: 0;
  }
  .a-users-top-position {
    font-size: 1.3rem;
    font-weight: bold;
  }
  .a-users-top-name {
    max-width: 17em;
    padding-right: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.1em;
    max-height: 2.2em;
  }
  .c-users-top-name {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 2em 2em;
    grid-auto-flow: row;
    grid-template-areas: "a-users-top-name" "a-users-top-year";
    align-items: center;
    font-size: 1rem;
    padding-top: 0.2em;
  }
  .a-users-top-shop {
    font-size: 0.9rem;
  }
  .c-users-top-platform {
    padding-top: 0.3em;
  }
  .a-users-top-platform {
    font-size: 1rem;
  }
  .c-users-top-info {
    grid-template-columns: 4em 3em 7.4em;
  }
  .a-users-top-platform {
    font-size: 0.8rem !important;
  }
}
.c-users-library {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto auto 3em auto auto auto auto;
  grid-template-areas: "a-users-library-label" "a-users-library-navigation" "a-users-library-platforms" "c-users-library-stats-platform" "c-users-library-actions" "c-users-library-filters-base-name" "c-users-library-filters-wrapper" "c-users-games-placeholder";
}

.a-users-library-label {
  grid-area: a-users-library-label;
}

.a-users-library-navigation {
  grid-area: a-users-library-navigation;
  padding-bottom: 2em;
}

.a-users-library-platforms {
  grid-area: a-users-library-platforms;
  margin-bottom: 1em;
}

.a-users-library-search-game {
  grid-area: a-users-library-search-game;
}

.c-users-library-filters-base-name {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-users-library-search-game-label" "a-users-library-search-game-input";
}

.a-users-library-search-game-label {
  grid-area: a-users-library-search-game-label;
}

.a-users-library-search-game-input {
  grid-area: a-users-library-search-game-input;
}

.c-users-library-stats-platform {
  display: grid;
  grid-template-columns: 11em 11em 11em;
  grid-template-rows: 2em;
  grid-template-areas: "a-users-library-stat-any a-users-library-stat-hundred a-users-library-stat-plat";
  align-items: center;
}

.a-users-library-stat-any {
  grid-area: a-users-library-stat-any;
  color: #1daf2c;
  font-weight: bold;
}

.a-users-library-stat-hundred {
  grid-area: a-users-library-stat-hundred;
  color: #029ed2;
  font-weight: bold;
}

.a-users-library-stat-plat {
  grid-area: a-users-library-stat-plat;
  color: #ffa500;
  font-weight: bold;
}

.c-users-library-actions {
  display: grid;
  grid-template-columns: 10em 10em 10em;
  grid-template-rows: 4em;
  grid-template-areas: "a-users-library-filters a-users-library-reset a-users-library-active";
  column-gap: 1em;
}

.a-users-library-filters {
  grid-area: a-users-library-filters;
}

.a-users-library-reset {
  grid-area: a-users-library-reset;
}

.a-users-library-active {
  grid-area: a-users-library-active;
}

.c-users-library-filters-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 3em;
  grid-template-areas: "c-users-library-filters" "c-users-library-sort" "a-users-library-submit";
  border: 2px solid #373737;
  padding: 1em;
  margin-bottom: 2em;
}

.c-users-library-filters {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto auto;
  grid-template-areas: "c-users-library-filters-base" "c-users-library-filters-conditions" "c-users-library-filters-completion" "c-users-library-filters-version" "c-users-library-filters-buying";
}

.c-users-library-filters-base {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3em auto;
  grid-template-areas: "a-users-library-filters-base-title" "c-users-library-filters-base-inputs";
  border-bottom: 1px solid #373737;
  padding-bottom: 0.5em;
  margin-bottom: 1em;
}

.a-users-library-filters-base-title {
  grid-area: a-users-library-filters-base-title;
}

.c-users-library-filters-base-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: "c-users-library-filters-base-year-from c-users-library-filters-base-year-to c-users-library-filters-base-bundle" "c-users-library-filters-base-top c-users-library-filters-base-playing c-users-library-filters-base-genre c-users-library-filters-base-review" "c-users-library-filters-base-score-from c-users-library-filters-base-score-to";
  column-gap: 1em;
}

.c-users-library-filters-base-year-from {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-users-library-filters-base-year-from-label" "a-users-library-filters-base-year-from-input";
}

.a-users-library-filters-base-year-from-label {
  grid-area: a-users-library-filters-base-year-from-label;
}

.a-users-library-filters-base-year-from-input {
  grid-area: a-users-library-filters-base-year-from-input;
}

.c-users-library-filters-base-year-to {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-users-library-filters-base-year-to-label" "a-users-library-filters-base-year-to-input";
}

.a-users-library-filters-base-year-to-label {
  grid-area: a-users-library-filters-base-year-to-label;
}

.a-users-library-filters-base-year-to-input {
  grid-area: a-users-library-filters-base-year-to-input;
}

.c-users-library-filters-base-bundle {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-users-library-filters-base-bundle-label" "a-users-library-filters-base-bundle-input";
}

.a-users-library-filters-base-bundle-label {
  grid-area: a-users-library-filters-base-bundle-label;
}

.a-users-library-filters-base-bundle-input {
  grid-area: a-users-library-filters-base-bundle-input;
}

.c-users-library-filters-base-top {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-users-library-filters-base-top-label" "a-users-library-filters-base-top-input";
}

.a-users-library-filters-base-top-label {
  grid-area: a-users-library-filters-base-top-label;
}

.a-users-library-filters-base-top-input {
  grid-area: a-users-library-filters-base-top-input;
}

.c-users-library-filters-base-playing {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-users-library-filters-base-playing-label" "a-users-library-filters-base-playing-input";
}

.a-users-library-filters-base-playing-label {
  grid-area: a-users-library-filters-base-playing-label;
}

.a-users-library-filters-base-playing-input {
  grid-area: a-users-library-filters-base-playing-input;
}

.c-users-library-filters-base-genre {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-users-library-filters-base-genre-label" "a-users-library-filters-base-genre-input";
}

.a-users-library-filters-base-genre-label {
  grid-area: a-users-library-filters-base-genre-label;
}

.a-users-library-filters-base-genre-input {
  grid-area: a-users-library-filters-base-genre-input;
}

.c-users-library-filters-base-score-from {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-users-library-filters-base-score-from-label" "a-users-library-filters-base-score-from-input";
}

.a-users-library-filters-base-score-from-label {
  grid-area: a-users-library-filters-base-score-from-label;
}

.a-users-library-filters-base-score-from-input {
  grid-area: a-users-library-filters-base-score-from-input;
}

.c-users-library-filters-base-score-to {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-users-library-filters-base-score-to-label" "a-users-library-filters-base-score-to-input";
}

.a-users-library-filters-base-score-to-label {
  grid-area: a-users-library-filters-base-score-to-label;
}

.a-users-library-filters-base-score-to-input {
  grid-area: a-users-library-filters-base-score-to-input;
}

.c-users-library-filters-base-review {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-users-library-filters-base-review-label" "a-users-library-filters-base-review-input";
}

.a-users-library-filters-base-review-label {
  grid-area: a-users-library-filters-base-review-label;
}

.a-users-library-filters-base-review-input {
  grid-area: a-users-library-filters-base-review-input;
}

.c-users-library-filters-conditions {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3em auto;
  grid-template-areas: "a-users-library-filters-conditions-title" "c-users-library-filters-conditions-inputs";
  border-bottom: 1px solid #373737;
  padding-bottom: 0.5em;
  margin-bottom: 1em;
}

.a-users-library-filters-conditions-title {
  grid-area: a-users-library-filters-conditions-title;
}

.c-users-library-filters-conditions-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "c-users-library-filters-conditions-main c-users-library-filters-conditions-case c-users-library-filters-conditions-disc c-users-library-filters-conditions-art";
  column-gap: 1em;
}

.c-users-library-filters-conditions-main {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-users-library-filters-conditions-main-label" "a-users-library-filters-conditions-main-input";
}

.a-users-library-filters-conditions-main-label {
  grid-area: a-users-library-filters-conditions-main-label;
}

.a-users-library-filters-conditions-main-input {
  grid-area: a-users-library-filters-conditions-main-input;
}

.c-users-library-filters-conditions-case {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-users-library-filters-conditions-case-label" "a-users-library-filters-conditions-case-input";
}

.a-users-library-filters-conditions-case-label {
  grid-area: a-users-library-filters-conditions-case-label;
}

.a-users-library-filters-conditions-case-input {
  grid-area: a-users-library-filters-conditions-case-input;
}

.c-users-library-filters-conditions-disc {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-users-library-filters-conditions-disc-label" "a-users-library-filters-conditions-disc-input";
}

.a-users-library-filters-conditions-disc-label {
  grid-area: a-users-library-filters-conditions-disc-label;
}

.a-users-library-filters-conditions-disc-input {
  grid-area: a-users-library-filters-conditions-disc-input;
}

.c-users-library-filters-conditions-art {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-users-library-filters-conditions-art-label" "a-users-library-filters-conditions-art-input";
}

.a-users-library-filters-conditions-art-label {
  grid-area: a-users-library-filters-conditions-art-label;
}

.a-users-library-filters-conditions-art-input {
  grid-area: a-users-library-filters-conditions-art-input;
}

.c-users-library-filters-completion {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3em auto;
  grid-template-areas: "a-users-library-filters-completion-title" "c-users-library-filters-completion-inputs";
  border-bottom: 1px solid #373737;
  padding-bottom: 0.5em;
  margin-bottom: 1em;
}

.a-users-library-filters-completion-title {
  grid-area: a-users-library-filters-completion-title;
}

.c-users-library-filters-completion-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: "c-users-library-filters-completion-any c-users-library-filters-completion-hundred c-users-library-filters-completion-plat";
  column-gap: 1em;
}

.c-users-library-filters-completion-any {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-users-library-filters-completion-any-label" "a-users-library-filters-completion-any-input";
}

.a-users-library-filters-completion-any-label {
  grid-area: a-users-library-filters-completion-any-label;
}

.a-users-library-filters-completion-any-input {
  grid-area: a-users-library-filters-completion-any-input;
}

.c-users-library-filters-completion-hundred {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-users-library-filters-completion-hundred-label" "a-users-library-filters-completion-hundred-input";
}

.a-users-library-filters-completion-hundred-label {
  grid-area: a-users-library-filters-completion-hundred-label;
}

.a-users-library-filters-completion-hundred-input {
  grid-area: a-users-library-filters-completion-hundred-input;
}

.c-users-library-filters-completion-plat {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-users-library-filters-completion-plat-label" "a-users-library-filters-completion-plat-input";
}

.a-users-library-filters-completion-plat-label {
  grid-area: a-users-library-filters-completion-plat-label;
}

.a-users-library-filters-completion-plat-input {
  grid-area: a-users-library-filters-completion-plat-input;
}

.c-users-library-filters-version {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3em auto;
  grid-template-areas: "a-users-library-filters-version-title" "c-users-library-filters-version-inputs";
  border-bottom: 1px solid #373737;
  padding-bottom: 0.5em;
  margin-bottom: 1em;
}

.a-users-library-filters-version-title {
  grid-area: a-users-library-filters-version-title;
}

.c-users-library-filters-version-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "c-users-library-filters-version-edition c-users-library-filters-version-region c-users-library-filters-version-manual c-users-library-filters-version-special";
  column-gap: 1em;
}

.c-users-library-filters-version-edition {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-users-library-filters-version-edition-label" "a-users-library-filters-version-edition-input";
}

.a-users-library-filters-version-edition-label {
  grid-area: a-users-library-filters-version-edition-label;
}

.a-users-library-filters-version-edition-input {
  grid-area: a-users-library-filters-version-edition-input;
}

.c-users-library-filters-version-region {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-users-library-filters-version-region-label" "a-users-library-filters-version-region-input";
}

.a-users-library-filters-version-region-label {
  grid-area: a-users-library-filters-version-region-label;
}

.a-users-library-filters-version-region-input {
  grid-area: a-users-library-filters-version-region-input;
}

.c-users-library-filters-version-manual {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-users-library-filters-version-manual-label" "a-users-library-filters-version-manual-input";
}

.a-users-library-filters-version-manual-label {
  grid-area: a-users-library-filters-version-manual-label;
}

.a-users-library-filters-version-manual-input {
  grid-area: a-users-library-filters-version-manual-input;
}

.c-users-library-filters-version-special {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-users-library-filters-version-special-label" "a-users-library-filters-version-special-input";
}

.a-users-library-filters-version-special-label {
  grid-area: a-users-library-filters-version-special-label;
}

.a-users-library-filters-version-special-input {
  grid-area: a-users-library-filters-version-special-input;
}

.c-users-library-filters-buying {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3em auto;
  grid-template-areas: "a-users-library-filters-buying-title" "c-users-library-filters-buying-inputs";
  border-bottom: 1px solid #373737;
  padding-bottom: 0.5em;
  margin-bottom: 1em;
}

.a-users-library-filters-buying-title {
  grid-area: a-users-library-filters-buying-title;
}

.c-users-library-filters-buying-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "c-users-library-filters-buying-paid-from c-users-library-filters-buying-paid-to c-users-library-filters-buying-market-from c-users-library-filters-buying-market-to" "c-users-library-filters-buying-date c-users-library-filters-buying-shop . .";
  column-gap: 1em;
}

.c-users-library-filters-buying-paid-from {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-users-library-filters-buying-paid-from-label" "a-users-library-filters-buying-paid-from-input";
}

.a-users-library-filters-buying-paid-from-label {
  grid-area: a-users-library-filters-buying-paid-from-label;
}

.a-users-library-filters-buying-paid-from-input {
  grid-area: a-users-library-filters-buying-paid-from-input;
}

.c-users-library-filters-buying-paid-to {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-users-library-filters-buying-paid-to-label" "a-users-library-filters-buying-paid-to-input";
}

.a-users-library-filters-buying-paid-to-label {
  grid-area: a-users-library-filters-buying-paid-to-label;
}

.a-users-library-filters-buying-paid-to-input {
  grid-area: a-users-library-filters-buying-paid-to-input;
}

.c-users-library-filters-buying-market-from {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-users-library-filters-buying-market-from-label" "a-users-library-filters-buying-market-from-input";
}

.a-users-library-filters-buying-market-from-label {
  grid-area: a-users-library-filters-buying-market-from-label;
}

.a-users-library-filters-buying-market-from-input {
  grid-area: a-users-library-filters-buying-market-from-input;
}

.c-users-library-filters-buying-market-to {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-users-library-filters-buying-market-to-label" "a-users-library-filters-buying-market-to-input";
}

.a-users-library-filters-buying-market-to-label {
  grid-area: a-users-library-filters-buying-market-to-label;
}

.a-users-library-filters-buying-market-to-input {
  grid-area: a-users-library-filters-buying-market-to-input;
}

.c-users-library-filters-buying-date-from {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-users-library-filters-buying-date-from-label" "a-users-library-filters-buying-date-from-input";
}

.a-users-library-filters-buying-date-from-label {
  grid-area: a-users-library-filters-buying-date-from-label;
}

.a-users-library-filters-buying-date-from-input {
  grid-area: a-users-library-filters-buying-date-from-input;
}

.c-users-library-filters-buying-date-to {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-users-library-filters-buying-date-to-label" "a-users-library-filters-buying-date-to-input";
}

.a-users-library-filters-buying-date-to-label {
  grid-area: a-users-library-filters-buying-date-to-label;
}

.a-users-library-filters-buying-date-to-input {
  grid-area: a-users-library-filters-buying-date-to-input;
}

.c-users-library-filters-buying-shop {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-users-library-filters-buying-shop-label" "a-users-library-filters-buying-shop-input";
}

.a-users-library-filters-buying-shop-label {
  grid-area: a-users-library-filters-buying-shop-label;
}

.a-users-library-filters-buying-shop-input {
  grid-area: a-users-library-filters-buying-shop-input;
}

.c-users-library-sort {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: "c-users-library-sort-column c-users-library-sort-direction";
  column-gap: 1em;
  padding-bottom: 1em;
}

.c-users-library-sort-column {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-users-library-sort-column-label" "a-users-library-sort-column-input";
}

.a-users-library-sort-column-label {
  grid-area: a-users-library-sort-column-label;
}

.a-users-library-sort-column-input {
  grid-area: a-users-library-sort-column-input;
}

.c-users-library-sort-direction {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-users-library-sort-direction-label" "a-users-library-sort-direction-input";
}

.a-users-library-sort-direction-label {
  grid-area: a-users-library-sort-direction-label;
}

.a-users-library-sort-direction-input {
  grid-area: a-users-library-sort-direction-input;
}

.a-users-library-submit {
  grid-area: a-users-library-submit;
}

.c-users-games-placeholder {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
  grid-area: c-users-games-placeholder;
}

.c-users-library-row {
  display: grid;
  grid-template-columns: 11em 52.5em 16em;
  grid-template-rows: 1fr;
  grid-template-areas: "a-users-library-cover c-users-library-left c-users-library-right";
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 4px 18px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 1em;
  background-color: #262626;
  border-radius: 0.5em;
  padding: 0.5em;
}

.a-users-library-cover {
  grid-area: a-users-library-cover;
  padding-left: 0.5em;
  align-self: center;
}

.c-users-library-left {
  display: grid;
  grid-template-columns: 52.5em;
  grid-template-rows: 6em 7.5em;
  grid-template-areas: "c-users-library-game" "c-users-library-stats";
}

.c-users-library-game {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 1fr;
  grid-template-areas: "c-users-library-game-info";
  align-self: center;
}

.c-users-library-game-info {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 3em 1fr;
  grid-template-areas: "a-users-library-name" "c-users-library-game-info-other";
}

.a-users-library-name {
  grid-area: a-users-library-name;
  align-self: center;
  color: #f7f7f7;
  font-size: 1.5rem;
  max-width: 35em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.a-users-library-name :link {
  transition: 300ms;
  color: #f7f7f7;
  text-decoration: none;
}
.a-users-library-name :visited {
  color: #f7f7f7;
  text-decoration: none;
}
.a-users-library-name :hover {
  color: #D9A036;
  text-decoration: none;
}
.a-users-library-name :active {
  text-decoration: none;
}

.c-users-library-game-info-other {
  display: grid;
  grid-template-columns: 3.5em 5.5em 2em 2em 2em 2em;
  grid-template-rows: 1fr;
  grid-template-areas: "a-users-library-year a-users-library-platform a-users-library-completion a-users-library-review a-users-library-versions a-users-library-playing";
}

.a-users-library-year {
  grid-area: a-users-library-year;
  align-self: center;
  color: #AAAAAA;
  font-size: 1.25rem;
}

.a-users-library-platform {
  grid-area: a-users-library-platform;
  align-self: center;
  justify-self: start;
  font-weight: bold;
  font-size: 1.3rem;
}

.a-users-library-top {
  grid-area: a-users-library-top;
  align-self: center;
  color: #AAAAAA;
  font-size: 1.25rem;
  margin-left: -1.7em;
  justify-self: center;
}

.a-users-library-score {
  grid-area: a-users-library-score;
  align-self: center;
  font-size: 1.8rem;
  justify-self: center;
  padding-right: 0.5em;
}

.a-users-library-review {
  grid-area: a-users-library-review;
  align-self: center;
  font-size: 1.25rem;
  justify-self: center;
}

.a-users-library-versions {
  grid-area: a-users-library-versions;
  align-self: center;
  font-size: 1.25rem;
  justify-self: center;
}

.a-users-library-playing {
  grid-area: a-users-library-playing;
  align-self: center;
  font-size: 1.25rem;
  color: #01a501;
  justify-self: center;
}

.a-users-library-completion {
  grid-area: a-users-library-completion;
  align-self: center;
  font-size: 1.25rem;
  justify-self: center;
}

.c-users-library-stats {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
}

.c-users-library-stats-completion {
  display: grid;
  grid-template-columns: min-content;
  grid-template-rows: 2em 2em 2em;
  grid-template-areas: "c-users-library-any" "c-users-library-hundred" "c-users-library-plat";
  font-size: 1rem;
  align-self: center;
  grid-gap: 0.5em;
}

.c-users-library-any {
  display: grid;
  grid-template-columns: 8em 8em 8em 4em;
  grid-template-rows: 2em;
  grid-template-areas: "c-users-library-any-date c-users-library-any-time ca-users-library-any-last c-users-library-any-times";
  font-size: 1rem;
  align-self: center;
  color: #AAAAAA;
  border-left: 5px solid #1daf2c;
  border-radius: 3px;
  background: linear-gradient(90deg, #1daf2c 0%, #262626 10%);
}

.c-users-library-any-date {
  display: grid;
  grid-template-columns: 2em auto;
  grid-template-rows: 2em;
  grid-template-areas: "a-users-library-any-date-icon a-users-library-any-date";
}

.a-users-library-any-date-icon {
  grid-area: a-users-library-any-date-icon;
  justify-self: center;
  align-self: center;
}

.a-users-library-any-date {
  grid-area: a-users-library-any-date;
  align-self: center;
}

.c-users-library-any-time {
  display: grid;
  grid-template-columns: 2em auto;
  grid-template-rows: 2em;
  grid-template-areas: "a-users-library-any-time-icon a-users-library-any-time";
}

.a-users-library-any-time-icon {
  grid-area: a-users-library-any-time-icon;
  justify-self: center;
  align-self: center;
}

.a-users-library-any-time {
  grid-area: a-users-library-any-time;
  align-self: center;
}

.c-users-library-any-last {
  display: grid;
  grid-template-columns: 2em auto;
  grid-template-rows: 2em;
  grid-template-areas: "a-users-library-any-last-icon a-users-library-any-last";
}

.a-users-library-any-last-icon {
  grid-area: a-users-library-any-last-icon;
  justify-self: center;
  align-self: center;
}

.a-users-library-any-last {
  grid-area: a-users-library-any-last;
  align-self: center;
}

.c-users-library-any-times {
  display: grid;
  grid-template-columns: 2em auto;
  grid-template-rows: 2em;
  grid-template-areas: "a-users-library-any-times-icon a-users-library-any-times";
}

.a-users-library-any-times-icon {
  grid-area: a-users-library-any-times-icon;
  justify-self: center;
  align-self: center;
}

.a-users-library-any-times {
  grid-area: a-users-library-any-times;
  align-self: center;
}

.c-users-library-hundred {
  display: grid;
  grid-template-columns: 8em 8em 8em 4em;
  grid-template-rows: 2em;
  grid-template-areas: "c-users-library-hundred-date c-users-library-hundred-time c-users-library-hundred-last c-users-library-hundred-times";
  font-size: 1rem;
  align-self: center;
  color: #AAAAAA;
  border-left: 5px solid #029ed2;
  border-radius: 3px;
  background: linear-gradient(90deg, #029ed2 0%, #262626 10%);
}

.c-users-library-hundred-date {
  display: grid;
  grid-template-columns: 2em auto;
  grid-template-rows: 2em;
  grid-template-areas: "a-users-library-hundred-date-icon a-users-library-hundred-date";
}

.a-users-library-hundred-date-icon {
  grid-area: a-users-library-hundred-date-icon;
  justify-self: center;
  align-self: center;
}

.a-users-library-hundred-date {
  grid-area: a-users-library-hundred-date;
  align-self: center;
}

.c-users-library-hundred-time {
  display: grid;
  grid-template-columns: 2em auto;
  grid-template-rows: 2em;
  grid-template-areas: "a-users-library-hundred-time-icon a-users-library-hundred-time";
}

.a-users-library-hundred-time-icon {
  grid-area: a-users-library-hundred-time-icon;
  justify-self: center;
  align-self: center;
}

.a-users-library-hundred-time {
  grid-area: a-users-library-hundred-time;
  align-self: center;
}

.c-users-library-hundred-last {
  display: grid;
  grid-template-columns: 2em auto;
  grid-template-rows: 2em;
  grid-template-areas: "a-users-library-hundred-last-icon a-users-library-hundred-last";
}

.a-users-library-hundred-last-icon {
  grid-area: a-users-library-hundred-last-icon;
  justify-self: center;
  align-self: center;
}

.a-users-library-hundred-last {
  grid-area: a-users-library-hundred-last;
  align-self: center;
}

.c-users-library-hundred-times {
  display: grid;
  grid-template-columns: 2em auto;
  grid-template-rows: 2em;
  grid-template-areas: "a-users-library-hundred-times-icon a-users-library-hundred-times";
}

.a-users-library-hundred-times-icon {
  grid-area: a-users-library-hundred-times-icon;
  justify-self: center;
  align-self: center;
}

.a-users-library-hundred-times {
  grid-area: a-users-library-hundred-times;
  align-self: center;
}

.c-users-library-plat {
  display: grid;
  grid-template-columns: 8em 8em 8em 4em;
  grid-template-rows: 2em;
  grid-template-areas: "c-users-library-plat-date c-users-library-plat-time c-users-library-plat-last c-users-library-plat-times";
  font-size: 1rem;
  align-self: center;
  color: #AAAAAA;
  border-left: 5px solid #ffa500;
  border-radius: 3px;
  background: linear-gradient(90deg, #ffa500 0%, #262626 10%);
}

.c-users-library-plat-date {
  display: grid;
  grid-template-columns: 2em auto;
  grid-template-rows: 2em;
  grid-template-areas: "a-users-library-plat-date-icon a-users-library-plat-date";
}

.a-users-library-plat-date-icon {
  grid-area: a-users-library-plat-date-icon;
  justify-self: center;
  align-self: center;
}

.a-users-library-plat-date {
  grid-area: a-users-library-plat-date;
  align-self: center;
}

.c-users-library-plat-time {
  display: grid;
  grid-template-columns: 2em auto;
  grid-template-rows: 2em;
  grid-template-areas: "a-users-library-plat-time-icon a-users-library-plat-time";
}

.a-users-library-plat-time-icon {
  grid-area: a-users-library-plat-time-icon;
  justify-self: center;
  align-self: center;
}

.a-users-library-plat-time {
  grid-area: a-users-library-plat-time;
  align-self: center;
}

.c-users-library-plat-last {
  display: grid;
  grid-template-columns: 2em auto;
  grid-template-rows: 2em;
  grid-template-areas: "a-users-library-plat-last-icon a-users-library-plat-last";
}

.a-users-library-plat-last-icon {
  grid-area: a-users-library-plat-last-icon;
  justify-self: center;
  align-self: center;
}

.a-users-library-plat-last {
  grid-area: a-users-library-plat-last;
  align-self: center;
}

.c-users-library-plat-times {
  display: grid;
  grid-template-columns: 2em auto;
  grid-template-rows: 2em;
  grid-template-areas: "a-users-library-plat-times-icon a-users-library-plat-times";
}

.a-users-library-plat-times-icon {
  grid-area: a-users-library-plat-times-icon;
  justify-self: center;
  align-self: center;
}

.a-users-library-plat-times {
  grid-area: a-users-library-plat-times;
  align-self: center;
}

.c-users-library-stats-review {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "c-users-library-stats-review-row1" "c-users-library-stats-review-row2";
}

.c-users-library-stats-review-row1 {
  display: grid;
  grid-template-columns: 3em 5em 1fr;
  grid-template-rows: 2em;
  grid-template-areas: "a-users-library-stats-review-score c-users-library-stats-review-top a-users-library-stats-review-show";
}

.a-users-library-stats-review-score {
  grid-area: a-users-library-stats-review-score;
  font-size: 1.5rem;
}

.c-users-library-stats-review-top {
  display: grid;
  grid-template-columns: 2em 1fr;
  grid-template-rows: 2em;
  grid-template-areas: "a-users-library-stats-review-top-icon a-users-library-stats-review-top";
}

.a-users-library-stats-review-top-icon {
  grid-area: a-users-library-stats-review-top-icon;
  align-self: center;
  justify-self: center;
}

.a-users-library-stats-review-top {
  grid-area: a-users-library-stats-review-top;
  align-self: center;
  font-size: 1.3rem;
}

.a-users-library-stats-review-show {
  grid-area: a-users-library-stats-review-show;
  align-self: center;
}

.c-users-library-stats-review-row2 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em;
  grid-template-areas: "a-users-library-stats-review-text";
}

.a-users-library-stats-review-text {
  grid-area: a-users-library-stats-review-text;
  color: #f7f7f7;
  font-size: 0.8rem;
  max-width: 64em;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.2em;
  max-height: 5.8em;
}

.c-users-library-right {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 1fr 3em;
  grid-template-areas: "c-users-library-versions" "c-users-library-version-circles";
  background-color: #2d2d2d;
  border-radius: 0.5em;
}

.c-users-library-versions {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
  padding-bottom: 0.5em;
}

.c-users-library-version {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3.5em 2em 1.5em 2em 2em;
  grid-template-areas: "c-users-library-version-shop" "a-users-library-version-bought" "a-users-library-version-edition" "a-users-library-version-condition" "a-users-library-version-conditions";
}

.c-users-library-version-shop {
  display: grid;
  grid-template-columns: 6em 5em 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "c-users-library-version-prices c-users-library-version-count a-users-library-version-shop";
  padding: 0.6em;
}

.c-users-library-version-prices {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "a-users-library-version-price" "a-users-library-version-approx";
}

.a-users-library-version-price {
  grid-area: a-users-library-version-price;
  color: #AAAAAA;
  font-size: 1.1rem;
  align-self: center;
}

.a-users-library-version-approx {
  grid-area: a-users-library-version-approx;
  color: #AAAAAA;
  font-size: 1.1rem;
  align-self: center;
}

.c-users-library-version-count {
  display: grid;
  grid-template-columns: min-content 1.5em;
  grid-template-rows: 1fr;
  grid-template-areas: "a-users-library-version-count a-users-library-version-count-icon";
}

.a-users-library-version-count {
  grid-area: a-users-library-version-count;
  align-self: center;
  justify-self: end;
  font-style: italic;
  color: #AAAAAA;
  font-size: 1.5rem;
  padding-right: 0.2em;
}

.a-users-library-version-count-icon {
  grid-area: a-users-library-version-count-icon;
  align-self: center;
}

.a-users-library-version-shop {
  grid-area: a-users-library-version-shop;
  color: #AAAAAA;
  justify-self: end;
  align-self: center;
}

.a-users-library-version-bought {
  grid-area: a-users-library-version-bought;
  color: #AAAAAA;
  font-size: 1.2rem;
  justify-self: center;
  align-self: center;
}

.a-users-library-version-edition {
  grid-area: a-users-library-version-edition;
  color: #AAAAAA;
  font-size: 0.7rem;
  justify-self: center;
  max-width: 21em;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3em;
  max-height: 2.6em;
  align-self: center;
}

.a-users-library-version-condition {
  grid-area: a-users-library-version-condition;
  color: #AAAAAA;
  font-size: 1.5rem;
  justify-self: center;
}

.a-users-library-version-conditions {
  grid-area: a-users-library-version-conditions;
  color: #AAAAAA;
  font-size: 1.5rem;
  justify-self: center;
}

.c-users-library-version-circles {
  display: grid;
  grid-template-columns: 1.5em 1.5em 1.5em 1.5em 1.5em 1.5em 1.5em 1.5em;
  grid-template-rows: 1fr;
  grid-template-areas: ". . . . . . . .";
  justify-self: center;
}

.a-users-library-version-circle {
  justify-self: center;
  padding-top: 0.1em;
}

.regular-completion {
  display: block;
}

.full-completion {
  display: none;
}

.c-users-library-modal-review {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "c-users-library-modal-review-row1" "c-users-library-modal-review-row2";
}

.c-users-library-modal-review-row1 {
  display: grid;
  grid-template-columns: 2em 5em;
  grid-template-rows: 2em;
  grid-template-areas: "a-users-library-modal-review-score c-users-library-modal-review-top";
}

.a-users-library-modal-review-score {
  grid-area: a-users-library-modal-review-score;
  font-size: 1.5rem;
}

.c-users-library-modal-review-top {
  display: grid;
  grid-template-columns: 2em 1fr;
  grid-template-rows: 2em;
  grid-template-areas: "a-users-library-modal-review-top-icon a-users-library-modal-review-top";
}

.a-users-library-modal-review-top-icon {
  grid-area: a-users-library-modal-review-top-icon;
  align-self: center;
  justify-self: center;
}

.a-users-library-modal-review-top {
  grid-area: a-users-library-modal-review-top;
  align-self: center;
  font-size: 1.3rem;
}

.c-users-library-modal-review-row2 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: "a-users-library-modal-review-text";
}

.a-users-library-modal-review-text {
  grid-area: a-users-library-modal-review-text;
  color: #f7f7f7;
  font-size: 0.8rem;
}

@media only screen and (max-width: 1300px) {
  .c-users-library-left {
    grid-template-columns: 31.4em;
  }
  .c-users-library-row {
    grid-template-columns: 11em 31.5em auto;
  }
}
@media only screen and (max-width: 1000px) {
  .c-users-library-left {
    grid-template-columns: 27em;
  }
  .a-users-library-name {
    max-width: 22em;
    font-size: 1.2rem;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.1em;
    max-height: 2.2em;
    padding-bottom: 0.1em;
  }
  .c-users-library-stats {
    font-size: 0.9rem;
  }
  .c-users-library-right {
    display: none;
  }
  .c-users-library-row {
    grid-template-columns: 11em 28.5em 0em;
  }
  .platforms-switch button {
    font-size: 0.9rem !important;
  }
  .a-users-library-arrow-left {
    display: none;
  }
  .a-users-library-arrow-right {
    display: none;
  }
  .c-users-library-game-info-other {
    grid-template-columns: 3.5em 4em 2em 2em 2em 2em 2em;
  }
  .a-users-library-platform {
    font-size: 0.8rem !important;
  }
  .a-users-library-top {
    font-size: 1.1rem;
  }
  .a-users-library-score {
    font-size: 1.3rem;
    padding-right: 0;
  }
  .a-users-library-completion {
    font-size: 1rem;
  }
  .input-label {
    font-size: 0.9rem;
  }
  .c-users-library-actions {
    grid-template-columns: 9em 9em 9em;
  }
  .a-users-library-stats-review-text {
    max-height: 5em;
  }
  .c-users-library-any {
    font-size: 0.9rem;
  }
  .c-users-library-hundred {
    font-size: 0.9rem;
  }
  .c-users-library-plat {
    font-size: 0.9rem;
  }
}
@media only screen and (max-width: 870px) {
  .modal-content {
    width: 40em;
  }
  .a-users-library-modal-version-edition {
    grid-area: a-users-library-modal-version-edition;
    max-width: 25em;
  }
}
@media only screen and (max-width: 730px) {
  .modal-content {
    width: 23em;
  }
  .c-users-library-modal-versions {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: ".";
    grid-gap: 1em;
  }
}
@media only screen and (max-width: 670px) {
  .platforms-switch button {
    font-size: 0.9rem !important;
    width: 6em;
  }
  .c-users-library-row {
    display: grid;
    grid-template-columns: 11em 13.5em;
    grid-template-rows: 4.5em 14em;
    grid-template-areas: "c-users-library-left c-users-library-left" "a-users-library-cover c-users-library-right";
  }
  .a-users-library-cover {
    align-self: center;
  }
  .c-users-library-game-info {
    display: grid;
    grid-template-columns: 24em;
    grid-template-rows: 2em 1.5em;
    grid-template-areas: "a-users-library-name" "c-users-library-game-info-other";
  }
  .c-users-library-left {
    grid-area: c-users-library-left;
  }
  .c-users-library-right {
    display: block;
  }
  .c-users-library-game {
    align-self: start;
    padding-left: 0.5em;
  }
  .a-users-library-name {
    max-width: 24em;
    font-size: 1.2rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: unset;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    line-height: unset;
    max-height: unset;
  }
  .c-users-library-game-info-other {
    grid-template-columns: 3.5em 4em 2em 2em 2em 2em 2em;
  }
  .a-users-library-top {
    font-size: 1rem;
    align-self: center;
  }
  .a-users-library-year {
    font-size: 1rem;
    align-self: center;
  }
  .a-users-library-completion {
    font-size: 1rem;
  }
  .a-users-library-version-edition {
    max-width: 17em;
  }
  .c-users-library {
    grid-template-rows: 5em auto auto auto auto auto auto auto auto;
  }
  .c-users-library-stats-platform {
    display: grid;
    grid-template-columns: 11em 11em;
    grid-template-rows: 2em 2em;
    grid-template-areas: "a-users-library-stat-any a-users-library-stat-hundred" "a-users-library-stat-plat .";
    align-items: center;
    padding-bottom: 1em;
  }
  .c-users-library-any {
    display: none;
  }
  .c-users-library-hundred {
    display: none;
  }
  .c-users-library-plat {
    display: none;
  }
  .c-users-library-stats {
    display: none;
  }
  .regular-completion {
    display: none;
  }
  .regular-review {
    display: none;
  }
  .full-completion {
    display: block;
  }
  .full-review {
    display: block;
  }
  .c-users-library-modal-random-game-games {
    grid-template-columns: 1fr 1fr;
  }
  .c-users-library-actions {
    grid-template-columns: 10em 10em;
    grid-template-rows: 3em 4em;
    grid-template-areas: "a-users-library-filters a-users-library-reset" "a-users-library-active .";
  }
  .c-users-library-filters-base-inputs {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: ". .";
  }
  .c-users-library-filters-conditions-inputs {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: ". .";
  }
  .c-users-library-filters-completion-inputs {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: ". .";
  }
  .c-users-library-filters-version-inputs {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: ". .";
  }
  .c-users-library-filters-buying-inputs {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: ". .";
  }
  .c-users-library-tags-controls {
    grid-template-columns: auto;
    grid-template-rows: auto auto auto;
    grid-template-areas: "c-users-library-tags-controls-search" "c-users-library-tags-search-result" "c-users-library-tags-controls-match ";
  }
  .c-users-library-tags-search-result {
    grid-template-rows: 2em 5em;
  }
  .a-users-library-review {
    font-size: 1rem;
  }
  .a-users-library-version-count {
    font-size: 1.2rem;
  }
  .c-users-library-version-shop {
    grid-template-columns: 6em 3.5em 1fr;
  }
  .a-users-library-version-condition {
    font-size: 1.2rem;
  }
  .a-users-library-version-bought {
    font-size: 1rem;
  }
  .c-users-library-version {
    grid-template-rows: 3.5em 2em 1.5em 1.5em 2em;
  }
}
.c-users-wishlist-page {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto auto 6em auto;
  grid-template-areas: "a-users-wishlist-label" "a-users-wishlist-navigation" "a-users-wishlist-platforms" "c-users-wishlist-search-game" "c-users-wishlist";
}

.a-users-wishlist-label {
  color: #D9A036;
  grid-area: a-users-wishlist-label;
}

.a-users-wishlist-navigation {
  grid-area: a-users-wishlist-navigation;
  padding-bottom: 2em;
}

.a-users-wishlist-platforms {
  grid-area: a-users-wishlist-platforms;
  margin-bottom: 1em;
}

.c-users-wishlist-search-game {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-users-wishlist-search-game-label" "a-users-wishlist-search-game-input";
  padding-bottom: 2em;
}

.a-users-wishlist-search-game-label {
  grid-area: a-users-wishlist-search-game-label;
}

.a-users-wishlist-search-game-input {
  grid-area: a-users-wishlist-search-game-input;
}

.c-users-wishlist {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
}

.c-users-wishlist-game-row {
  display: grid;
  grid-template-columns: auto 2em;
  grid-template-rows: 1fr;
  grid-template-areas: "c-users-wishlist-game-info a-users-wishlist-game-delete";
  margin-bottom: 2em;
}

.c-users-wishlist-game-info {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 3em auto;
  grid-template-areas: "c-users-wishlist-game-row-row1" "c-users-wishlist-game-row-row2" "c-users-wishlist-game-row-row3";
}

.c-users-wishlist-game-row-row1 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "a-users-wishlist-game-row-info-name";
}

.a-users-wishlist-game-row-info-name {
  grid-area: a-users-wishlist-game-row-info-name;
  font-size: 1.3rem;
  font-weight: bold;
  align-self: center;
  max-width: 57em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.c-users-wishlist-game-row-row2 {
  display: grid;
  grid-template-columns: 6em 4em 2em 67em;
  grid-template-rows: 1fr;
  grid-template-areas: "a-users-wishlist-game-row-info-platform a-users-wishlist-game-row-info-year a-users-wishlist-game-row-info-region a-users-wishlist-game-row-info-edition";
}

.a-users-wishlist-game-row-info-platform {
  grid-area: a-users-wishlist-game-row-info-platform;
  align-self: center;
}

.a-users-wishlist-game-row-info-year {
  grid-area: a-users-wishlist-game-row-info-year;
  color: #AAAAAA;
  font-size: 1.2rem;
  align-self: center;
}

.a-users-wishlist-game-row-info-region {
  grid-area: a-users-wishlist-game-row-info-region;
  align-self: center;
}

.a-users-wishlist-game-row-info-edition {
  grid-area: a-users-wishlist-game-row-info-edition;
  max-width: 78em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  align-self: center;
}

.c-users-wishlist-game-row-row3 {
  display: grid;
  grid-template-columns: 6em auto;
  grid-template-rows: 1fr;
  grid-template-areas: "a-users-wishlist-game-row-cover c-users-wishlist-game-row-prices";
}

.a-users-wishlist-game-row-cover {
  grid-area: a-users-wishlist-game-row-cover;
}

.c-users-wishlist-game-row-prices {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
}

.c-users-wishlist-game-row-price {
  display: grid;
  grid-template-columns: 5em 5em;
  grid-template-rows: 1.3em;
  grid-template-areas: "a-users-wishlist-game-row-info-type a-users-wishlist-game-row-info-price";
  font-style: italic;
  color: #9A9A9A;
}

.a-users-wishlist-game-row-info-type {
  grid-area: a-users-wishlist-game-row-info-type;
  font-weight: bold;
}

.a-users-wishlist-game-row-info-price {
  grid-area: a-users-wishlist-game-row-info-price;
}

@media only screen and (max-width: 1300px) {
  .c-users-wishlist-game-row-row2 {
    grid-template-columns: 6em 4em 2em 47em;
  }
  .a-users-wishlist-game-row-info-name {
    max-width: 46em;
  }
  .a-users-wishlist-game-row-info-edition {
    max-width: 51em;
  }
}
@media only screen and (max-width: 1000px) {
  .c-users-wishlist-game-row-row2 {
    grid-template-columns: 6em 4em 2em 27em;
  }
  .a-users-wishlist-game-row-info-name {
    max-width: 31em;
  }
  .a-users-wishlist-game-row-info-edition {
    max-width: 31em;
  }
}
@media only screen and (max-width: 670px) {
  .c-users-wishlist-game-row-row2 {
    grid-template-columns: 6em 4em 2em 13em;
  }
  .a-users-wishlist-game-row-info-name {
    max-width: 23em;
    font-size: 1.1rem;
  }
  .a-users-wishlist-game-row-info-edition {
    max-width: 19em;
    font-size: 0.9rem;
  }
}
.c-users-stats {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto auto;
  grid-template-areas: "a-users-stats-label" "a-users-stats-navigation" "a-users-stats-follow";
}

.a-users-stats-label {
  grid-area: a-users-stats-label;
  color: #D9A036;
}

.a-users-stats-navigation {
  grid-area: a-users-stats-navigation;
  padding-bottom: 2em;
}

.a-users-stats-follow {
  grid-area: a-users-stats-follow;
  width: 7em;
  padding-bottom: 2em;
}

.c-users-stats-list {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
}

.c-users-stats-piecharts {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
  justify-items: center;
}

.c-users-stats-piechart {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "a-users-stats-piechart";
  padding-top: 2em;
}

.a-users-stats-piechart {
  grid-area: a-users-stats-piechart;
}

.c-users-stats-barcharts {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  justify-items: center;
}

.c-users-stats-barchart {
  display: grid;
  grid-template-columns: 80em;
  grid-template-rows: 1fr;
  grid-template-areas: "a-users-stats-barchart";
  padding-top: 2em;
}

.a-users-stats-barchart {
  grid-area: a-users-stats-barchart;
}

@media only screen and (max-width: 1300px) {
  .c-users-stats-piecharts {
    grid-template-columns: 1fr 1fr;
  }
  .c-users-stats-barchart {
    grid-template-columns: 60em;
  }
}
@media only screen and (max-width: 1000px) {
  .c-users-stats-piecharts {
    grid-template-columns: 1fr;
  }
  .c-users-stats-barchart {
    grid-template-columns: 40em;
  }
}
@media only screen and (max-width: 670px) {
  .c-users-stats-piecharts {
    grid-template-columns: 1fr;
  }
  .c-users-stats-barchart {
    grid-template-columns: 25em;
  }
}
.c-users-years {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto auto;
  grid-template-areas: "a-users-years-label" "a-users-years-navigation" "c-users-years-stats";
}

.a-users-years-label {
  grid-area: a-users-years-label;
}

.a-users-years-navigation {
  grid-area: a-users-years-navigation;
  padding-bottom: 2em;
}

.c-users-years-filter {
  display: grid;
  grid-template-columns: 10em;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-users-years-filter-label" "a-users-years-filter-input";
}

.a-users-years-filter-label {
  grid-area: a-users-years-filter-label;
}

.a-users-years-filter-input {
  grid-area: a-users-years-filter-input;
}

.c-users-years-stats {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
  padding-bottom: 2em;
  padding-top: 2em;
}

.c-users-years-stat {
  display: grid;
  grid-template-columns: 22em 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "a-users-years-stat-label a-users-years-stat-value";
  padding-bottom: 0.5em;
}

.a-users-years-stat-label {
  grid-area: a-users-years-stat-label;
}

.a-users-years-stat-value {
  grid-area: a-users-years-stat-value;
}

.c-users-years-game-row-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "c-users-years-game-row";
  border-bottom: 1px solid #373737;
  margin-bottom: 1em;
  padding-bottom: 1em;
}

.c-users-years-game-row {
  display: grid;
  grid-template-columns: 10em 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "a-users-years-game-row-cover c-users-years-game-row-info";
  border-left: 1em solid;
  padding-left: 0.5em;
}

.a-users-years-game-row-cover {
  grid-area: a-users-years-game-row-cover;
}

.years-game-row-game-cover {
  width: 150px;
  height: 200px;
}

.c-users-years-game-row-info {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3.5em 3em 1.5em 1.5em 1.5em;
  grid-template-areas: "a-users-years-game-row-info-name" "c-users-years-game-row-info-year" "a-users-years-game-row-info-any" "a-users-years-game-row-info-hundred" "a-users-years-game-row-info-plat";
}

.a-users-years-game-row-info-name {
  grid-area: a-users-years-game-row-info-name;
  font-size: 1.3rem;
  font-weight: bold;
  max-width: 52em;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.2em;
  max-height: 2.4em;
}

.c-users-years-game-row-info-year {
  display: grid;
  grid-template-columns: 3.5em 3em;
  grid-template-rows: 1fr;
  grid-template-areas: "a-users-years-game-row-info-year a-users-years-game-row-info-platform";
}

.a-users-years-game-row-info-year {
  grid-area: a-users-years-game-row-info-year;
  color: #AAAAAA;
  font-size: 1.25rem;
  align-self: start;
}

.a-users-years-game-row-info-platform {
  grid-area: a-users-years-game-row-info-platform;
  font-weight: bold;
  font-size: 1.3rem;
  align-self: start;
}

.a-users-years-game-row-info-any {
  grid-area: a-users-years-game-row-info-any;
  color: #1daf2c;
}

.a-users-years-game-row-info-hundred {
  grid-area: a-users-years-game-row-info-hundred;
  color: #029ed2;
}

.a-users-years-game-row-info-plat {
  grid-area: a-users-years-game-row-info-plat;
  color: #ffa500;
}

.c-users-years-platforms {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
  justify-items: center;
}

.c-users-years-platform {
  display: grid;
  grid-template-columns: 22em;
  grid-template-rows: 1.5em 1.5em 2em;
  grid-template-areas: "a-users-years-platform-price" "a-users-years-platform-count" "a-users-years-platform-game";
  padding-bottom: 2em;
}

.a-users-years-platform-price {
  grid-area: a-users-years-platform-price;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
}

.a-users-years-platform-count {
  grid-area: a-users-years-platform-count;
  font-weight: bold;
  text-align: center;
}

.a-users-years-platform-game {
  grid-area: a-users-years-platform-game;
  text-align: center;
}

.years-game-row-new {
  color: #c9a101;
}

.c-users-years-bought-game-row-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "c-users-years-bought-game-row";
  border-bottom: 1px solid #373737;
  margin-bottom: 1em;
  padding-bottom: 1em;
}

.c-users-years-bought-game-row {
  display: grid;
  grid-template-columns: 6em 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "a-users-years-bought-game-row-cover c-users-years-bought-game-row-info";
  border-left: 1em solid;
  padding-left: 0.5em;
}

.a-users-years-bought-game-row-cover {
  grid-area: a-users-years-bought-game-row-cover;
  align-self: center;
}

.c-users-years-bought-game-row-info {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3.5em 1.5em 1.5em;
  grid-template-areas: "a-users-years-bought-game-row-info-name" "c-users-years-bought-game-row-info-year" "c-users-years-bought-game-row-info-any";
}

.a-users-years-bought-game-row-info-name {
  grid-area: a-users-years-bought-game-row-info-name;
  font-size: 1.3rem;
  font-weight: bold;
  max-width: 52em;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.2em;
  max-height: 2.4em;
}

.c-users-years-bought-game-row-info-year {
  display: grid;
  grid-template-columns: 3.5em 3em;
  grid-template-rows: 1fr;
  grid-template-areas: "a-users-years-bought-game-row-info-year a-users-years-bought-game-row-info-platform";
}

.a-users-years-bought-game-row-info-year {
  grid-area: a-users-years-bought-game-row-info-year;
  color: #AAAAAA;
  font-size: 1rem;
  align-self: center;
}

.a-users-years-bought-game-row-info-platform {
  grid-area: a-users-years-bought-game-row-info-platform;
  font-weight: bold;
  font-size: 1.1rem;
  align-self: center;
}

.c-users-years-bought-game-row-info-price {
  display: grid;
  grid-template-columns: 7em auto;
  grid-template-rows: 1fr;
  grid-template-areas: "a-users-years-bought-game-row-info-price-date a-users-years-bought-game-row-info-price-price";
}

.a-users-years-bought-game-row-info-price-date {
  grid-area: a-users-years-bought-game-row-info-price-date;
  color: #AAAAAA;
  font-size: 1.1rem;
  align-self: end;
}

.a-users-years-bought-game-row-info-price-price {
  grid-area: a-users-years-bought-game-row-info-price-price;
  font-size: 1.1rem;
  align-self: end;
}

@media only screen and (max-width: 1300px) {
  .c-users-years-platform {
    grid-template-columns: 20em;
  }
  .a-users-years-game-row-info-name {
    max-width: 37em;
  }
  .a-users-years-bought-game-row-info-name {
    max-width: 37em;
  }
}
@media only screen and (max-width: 1000px) {
  .c-users-years-platforms {
    grid-template-columns: 1fr 1fr;
  }
  .a-users-years-game-row-info-name {
    max-width: 21em;
  }
  .a-users-years-bought-game-row-info-name {
    max-width: 21em;
  }
}
@media only screen and (max-width: 670px) {
  .c-users-years-platforms {
    grid-template-columns: 1fr;
  }
  .a-users-years-game-row-info-name {
    max-width: 13em;
    font-size: 1.1rem;
  }
  .a-users-years-bought-game-row-info-name {
    max-width: 13em;
    font-size: 1.1rem;
    -webkit-line-clamp: 2;
  }
}
.c-users-completion {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto auto auto auto auto;
  grid-template-areas: "a-users-completion-label" "a-users-completion-navigation" "a-users-completion-follow" "c-users-completion-search-game" "c-users-completion-filter" "c-users-completions";
}

.a-users-completion-label {
  grid-area: a-users-completion-label;
}

.a-users-completion-navigation {
  grid-area: a-users-completion-navigation;
  padding-bottom: 2em;
}

.a-users-completion-follow {
  grid-area: a-users-completion-follow;
  width: 7em;
  padding-bottom: 2em;
}

.c-users-completion-search-game {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-users-completion-search-game-label" "a-users-completion-search-game-input";
}

.a-users-completion-search-game-label {
  grid-area: a-users-completion-search-game-label;
}

.a-users-completion-search-game-input {
  grid-area: a-users-completion-search-game-input;
}

.c-users-completion-filter {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-users-completion-filter-label" "a-users-completion-filter-input";
}

.a-users-completion-filter-label {
  grid-area: a-users-completion-filter-label;
}

.a-users-completion-filter-input {
  grid-area: a-users-completion-filter-input;
}

.c-users-completions {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
}

.c-users-completion-row {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 2.5em auto;
  grid-template-areas: "a-users-completion-name" "c-users-completion-bottom";
  margin-bottom: 1em;
  border-bottom: 2px solid #373737;
  padding-bottom: 1em;
}

.a-users-completion-name {
  grid-area: a-users-completion-name;
  font-size: 1.5rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.c-users-completion-bottom {
  display: grid;
  grid-template-columns: 10.5em auto;
  grid-template-rows: auto;
  grid-template-areas: "a-users-completion-cover c-users-completion-platforms";
}

.a-users-completion-cover {
  grid-area: a-users-completion-cover;
  align-self: center;
}

.c-users-completion-platforms {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 0.5em;
}

.c-users-completion-platform {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1.7em 2em;
  grid-template-areas: "a-users-completion-platform" "a-users-completion-platform-completion";
}

.c-users-completion-platform {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1.7em 2em;
  grid-template-areas: "a-users-completion-platform" "a-users-completion-platform-completion";
  align-self: center;
  background-color: #272727;
  padding-top: 1.5em;
  padding-bottom: 1em;
}

.a-users-completion-platform {
  grid-area: a-users-completion-platform;
  font-size: 1.3rem;
  justify-self: center;
}

.a-users-completion-platform-completion {
  grid-area: a-users-completion-platform-completion;
  font-weight: bold;
  justify-self: center;
}

.completion-platform-completion-any {
  color: #1daf2c;
  font-size: 1.5rem;
}

.completion-platform-completion-hundred {
  color: #029ed2;
  font-size: 1.5rem;
}

.completion-platform-completion-platinum {
  color: #ffa500;
  font-size: 1.5rem;
}

.completion-platform-completion-none {
  color: #656366;
  font-size: 1.5rem;
}

@media only screen and (max-width: 1300px) {
  .a-users-completion-platform {
    font-size: 1.2rem;
  }
  .completion-platform-completion-hundred {
    font-size: 1.3rem;
  }
  .c-users-completion-platforms {
    grid-gap: 0.5em;
  }
}
@media only screen and (max-width: 1000px) {
  .c-users-completion-platforms {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .completion-platform-completion-any {
    font-size: 1.3rem;
  }
  .completion-platform-completion-hundred {
    font-size: 1.2rem;
  }
  .completion-platform-completion-platinum {
    font-size: 1.3rem;
  }
  .completion-platform-completion-none {
    font-size: 1.3rem;
  }
  .a-users-completion-platform {
    font-size: 1.1rem;
  }
}
@media only screen and (max-width: 670px) {
  .a-users-completion-name {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3em;
    max-height: 2.3em;
    font-size: 1.2rem;
    padding-bottom: 0.5em;
  }
  .c-users-completion-platforms {
    grid-template-columns: 1fr 1fr;
  }
  .c-users-completion-row {
    grid-template-rows: auto auto;
  }
}
.c-user {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto auto auto auto;
  grid-template-areas: "a-user-label" "a-user-navigation" "c-user-picture" "c-user-actions" "c-user-blocks";
}

.a-user-label {
  grid-area: a-user-label;
}

.a-user-navigation {
  grid-area: a-user-navigation;
  padding-bottom: 2em;
}

.c-user-picture {
  display: grid;
  grid-template-columns: 20em 1fr;
  grid-template-rows: 20em;
  grid-template-areas: "a-user-picture c-user-picture-data";
}

.a-user-picture {
  grid-area: a-user-picture;
}

.c-user-picture-data {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content min-content min-content min-content;
  grid-template-areas: "c-user-picture-data-ingame" "c-user-picture-data-registered" "c-user-picture-data-followers" "c-user-picture-data-friends";
  font-size: 1.5rem;
}

.c-user-picture-data-registered {
  display: grid;
  grid-template-columns: 2em 1fr;
  grid-template-rows: 2em;
  grid-template-areas: "a-user-picture-data-registered-icon a-user-picture-data-registered-value";
}

.c-user-picture-data-followers {
  display: grid;
  grid-template-columns: 2em 1fr;
  grid-template-rows: 2em;
  grid-template-areas: "a-user-picture-data-followers-icon a-user-picture-data-followers-value";
}

.c-user-picture-data-friends {
  display: grid;
  grid-template-columns: 2em 1fr;
  grid-template-rows: 2em;
  grid-template-areas: "a-user-picture-data-friends-icon a-user-picture-data-friends-value";
}

.a-user-picture-data-registered-icon {
  grid-area: a-user-picture-data-registered-icon;
}

.a-user-picture-data-registered-value {
  grid-area: a-user-picture-data-registered-value;
}

.a-user-picture-data-followers-icon {
  grid-area: a-user-picture-data-followers-icon;
}

.a-user-picture-data-followers-value {
  grid-area: a-user-picture-data-followers-value;
}

.a-user-picture-data-friends-icon {
  grid-area: a-user-picture-data-friends-icon;
}

.a-user-picture-data-friends-value {
  grid-area: a-user-picture-data-friends-value;
}

.c-user-actions {
  display: grid;
  grid-template-columns: 10em 10em 10em;
  grid-template-rows: 3em;
  grid-template-areas: "a-user-follow a-user-friend a-user-report";
  grid-column-gap: 2em;
}

.a-user-follow {
  grid-area: a-user-follow;
}

.a-user-friend {
  grid-area: a-user-friend;
}

.a-user-report {
  grid-area: a-user-report;
}

.c-user-blocks {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
}

.c-user-block {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 4em auto;
  grid-template-areas: "a-user-block-title" "c-user-block-content";
  padding-bottom: 1em;
}

.c-user-block-content {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
}

.c-user-recent-reviews-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "c-user-recent-reviews-arrows" "c-user-recent-reviews";
}

.c-user-recent-reviews-arrows {
  display: grid;
  grid-template-columns: 3em 3em;
  grid-template-rows: 3em;
  grid-template-areas: "a-user-recent-reviews-arrows-left a-user-recent-reviews-arrows-right";
}

.a-user-recent-reviews-arrows-left {
  grid-area: a-user-recent-reviews-arrows-left;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #262626;
  transition: 300ms;
}
.a-user-recent-reviews-arrows-left:hover {
  background-color: #373737;
  color: #D9A036;
  cursor: pointer;
}

.a-user-recent-reviews-arrows-right {
  grid-area: a-user-recent-reviews-arrows-right;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #262626;
  transition: 300ms;
}
.a-user-recent-reviews-arrows-right:hover {
  background-color: #373737;
  color: #D9A036;
  cursor: pointer;
}

.c-user-recent-reviews {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
  padding-top: 1em;
}

.c-user-recent-review {
  display: grid;
  grid-template-columns: 11em 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "c-user-recent-review-left c-user-recent-review-right";
  background-color: #262626;
  padding: 1em;
  border-radius: 0.5em;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 4px 18px 0 rgba(0, 0, 0, 0.19);
}

.c-user-recent-review-left {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "a-user-recent-review-cover";
}

.a-user-recent-review-cover {
  grid-area: a-user-recent-review-cover;
}

.c-user-recent-review-right {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 4em min-content min-content auto;
  grid-template-areas: "a-user-recent-review-game-name" "c-user-recent-review-game-info" "c-user-recent-review-game-review-score" "a-user-recent-review-game-review-text";
}

.a-user-recent-review-game-name {
  grid-area: a-user-recent-review-game-name;
  align-self: center;
  color: #f7f7f7;
  font-size: 1.5rem;
  max-width: 45em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.c-user-recent-review-game-info {
  display: grid;
  grid-template-columns: 4em 1fr;
  grid-template-rows: 2em;
  grid-template-areas: "a-user-recent-review-game-info-year a-user-recent-review-game-info-platform";
}

.a-user-recent-review-game-info-year {
  grid-area: a-user-recent-review-game-info-year;
  align-self: center;
  color: #AAAAAA;
  font-size: 1.25rem;
}

.a-user-recent-review-game-info-platform {
  grid-area: a-user-recent-review-game-info-platform;
  align-self: center;
  justify-self: start;
  font-weight: bold;
}

.c-user-recent-review-game-review-score {
  display: grid;
  grid-template-columns: 3em auto 1fr;
  grid-template-rows: 2.5em;
  grid-template-areas: "a-user-recent-review-game-review-score c-user-recent-review-game-review-likes a-user-recent-review-game-review-top";
}

.a-user-recent-review-game-review-score {
  grid-area: a-user-recent-review-game-review-score;
  align-self: center;
  font-size: 1.8rem;
}

.c-user-recent-review-game-review-likes {
  display: grid;
  grid-template-columns: 1.5em 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "a-user-recent-review-game-review-likes-icon a-user-recent-review-game-review-likes";
}

.a-user-recent-review-game-review-likes-icon {
  grid-area: a-user-recent-review-game-review-likes-icon;
  align-self: center;
}

.a-user-recent-review-game-review-likes {
  grid-area: a-user-recent-review-game-review-likes;
  align-self: center;
}

.a-user-recent-review-game-review-top {
  grid-area: a-user-recent-review-game-review-top;
}

.a-user-recent-review-game-review-text {
  grid-area: a-user-recent-review-game-review-text;
  color: #f7f7f7;
  font-size: 0.8rem;
}

.c-user-recent-completions-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "c-user-recent-completions-arrows" "c-user-recent-completions";
}

.c-user-recent-completions-arrows {
  display: grid;
  grid-template-columns: 3em 3em;
  grid-template-rows: 3em;
  grid-template-areas: "a-user-recent-completions-arrows-left a-user-recent-completions-arrows-right";
}

.a-user-recent-completions-arrows-left {
  grid-area: a-user-recent-completions-arrows-left;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #262626;
  transition: 300ms;
}
.a-user-recent-completions-arrows-left:hover {
  background-color: #373737;
  color: #D9A036;
  cursor: pointer;
}

.a-user-recent-completions-arrows-right {
  grid-area: a-user-recent-completions-arrows-right;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #262626;
  transition: 300ms;
}
.a-user-recent-completions-arrows-right:hover {
  background-color: #373737;
  color: #D9A036;
  cursor: pointer;
}

.c-user-recent-completions {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
  padding-top: 1em;
}

.c-user-recent-completion {
  display: grid;
  grid-template-columns: 11em 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "c-user-recent-completion-left c-user-recent-completion-right";
  background-color: #262626;
  padding: 1em;
  border-radius: 0.5em;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 4px 18px 0 rgba(0, 0, 0, 0.19);
}

.c-user-recent-completion-left {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "a-user-recent-completion-cover";
}

.a-user-recent-completion-cover {
  grid-area: a-user-recent-completion-cover;
}

.c-user-recent-completion-right {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 4em min-content auto;
  grid-template-areas: "a-user-recent-completion-game-name" "c-user-recent-completion-game-info" "c-user-recent-completion-data";
}

.a-user-recent-completion-game-name {
  grid-area: a-user-recent-completion-game-name;
  align-self: center;
  color: #f7f7f7;
  font-size: 1.5rem;
  max-width: 45em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.c-user-recent-completion-game-info {
  display: grid;
  grid-template-columns: 4em 1fr;
  grid-template-rows: 2em;
  grid-template-areas: "a-user-recent-completion-game-info-year a-user-recent-completion-game-info-platform";
}

.a-user-recent-completion-game-info-year {
  grid-area: a-user-recent-completion-game-info-year;
  align-self: center;
  color: #AAAAAA;
  font-size: 1.25rem;
}

.a-user-recent-completion-game-info-platform {
  grid-area: a-user-recent-completion-game-info-platform;
  align-self: center;
  justify-self: start;
  font-weight: bold;
}

.c-user-recent-completion-data {
  display: grid;
  grid-template-columns: 12em 16em 1fr;
  grid-template-rows: auto;
  grid-template-areas: "a-user-recent-completion-data-type c-user-recent-completion-data-date c-user-recent-completion-data-time";
}

.a-user-recent-completion-data-type {
  grid-area: a-user-recent-completion-data-type;
  font-size: 2rem;
  align-self: center;
  font-weight: bold;
}

.c-user-recent-completion-data-date {
  display: grid;
  grid-template-columns: 2.5em 1fr;
  grid-template-rows: auto;
  grid-template-areas: "a-user-recent-completion-data-date-icon a-user-recent-completion-data-date";
}

.a-user-recent-completion-data-date-icon {
  grid-area: a-user-recent-completion-data-date-icon;
  align-self: center;
}

.a-user-recent-completion-data-date {
  grid-area: a-user-recent-completion-data-date;
  align-self: center;
  font-size: 2rem;
}

.c-user-recent-completion-data-time {
  display: grid;
  grid-template-columns: 2.5em 1fr;
  grid-template-rows: auto;
  grid-template-areas: "a-user-recent-completion-data-time-icon a-user-recent-completion-data-time";
}

.a-user-recent-completion-data-time-icon {
  grid-area: a-user-recent-completion-data-time-icon;
  align-self: center;
}

.a-user-recent-completion-data-time {
  grid-area: a-user-recent-completion-data-time;
  align-self: center;
  font-size: 2rem;
}

.c-user-currently-playing-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "c-user-currently-playing-arrows" "c-user-currently-playings";
}

.c-user-currently-playing-arrows {
  display: grid;
  grid-template-columns: 3em 3em;
  grid-template-rows: 3em;
  grid-template-areas: "a-user-currently-playing-arrows-left a-user-currently-playing-arrows-right";
}

.a-user-currently-playing-arrows-left {
  grid-area: a-user-currently-playing-arrows-left;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #262626;
  transition: 300ms;
}
.a-user-currently-playing-arrows-left:hover {
  background-color: #373737;
  color: #D9A036;
  cursor: pointer;
}

.a-user-currently-playing-arrows-right {
  grid-area: a-user-currently-playing-arrows-right;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #262626;
  transition: 300ms;
}
.a-user-currently-playing-arrows-right:hover {
  background-color: #373737;
  color: #D9A036;
  cursor: pointer;
}

.c-user-currently-playings {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
  padding-top: 1em;
}

.c-user-currently-playing {
  display: grid;
  grid-template-columns: 11em 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "c-user-currently-playing-left c-user-currently-playing-right";
  background-color: #262626;
  padding: 1em;
  border-radius: 0.5em;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 4px 18px 0 rgba(0, 0, 0, 0.19);
}

.c-user-currently-playing-left {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "a-user-currently-playing-cover";
}

.a-user-currently-playing-cover {
  grid-area: a-user-currently-playing-cover;
}

.c-user-currently-playing-right {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 4em min-content auto;
  grid-template-areas: "a-user-currently-playing-game-name" "c-user-currently-playing-game-info" "c-user-currently-playing-data";
}

.a-user-currently-playing-game-name {
  grid-area: a-user-currently-playing-game-name;
  align-self: center;
  color: #f7f7f7;
  font-size: 1.5rem;
  max-width: 45em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.c-user-currently-playing-game-info {
  display: grid;
  grid-template-columns: 4em 1fr;
  grid-template-rows: 2em;
  grid-template-areas: "a-user-currently-playing-game-info-year a-user-currently-playing-game-info-platform";
}

.a-user-currently-playing-game-info-year {
  grid-area: a-user-currently-playing-game-info-year;
  align-self: center;
  color: #AAAAAA;
  font-size: 1.25rem;
}

.a-user-currently-playing-game-info-platform {
  grid-area: a-user-currently-playing-game-info-platform;
  align-self: center;
  justify-self: start;
  font-weight: bold;
}

.c-user-currently-playing-data {
  display: grid;
  grid-template-columns: 2.5em 1fr;
  grid-template-rows: auto;
  grid-template-areas: "a-user-currently-playing-data-time-icon a-user-currently-playing-data-time";
}

.a-user-currently-playing-data-time-icon {
  grid-area: a-user-currently-playing-data-time-icon;
  align-self: center;
}

.a-user-currently-playing-data-time {
  grid-area: a-user-currently-playing-data-time;
  font-size: 2rem;
  align-self: center;
}

.c-user-modal-report-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 3em;
  grid-template-areas: "c-user-modal-report-text" "a-user-modal-report-text-submit";
}

.c-user-modal-report-text {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 8em;
  grid-template-areas: "a-user-modal-report-text-label" "a-user-modal-report-text-input";
}

.a-user-modal-report-text-label {
  grid-area: a-user-modal-report-text-label;
}

.a-user-modal-report-text-input {
  grid-area: a-user-modal-report-text-input;
}

.a-user-modal-report-text-submit {
  grid-area: a-user-modal-report-text-submit;
}

.c-user-picture-data-ingame {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: "a-user-picture-data-ingame-label" "a-user-picture-data-ingame-name" "a-user-picture-data-ingame-platform";
}

.a-user-picture-data-ingame-label {
  grid-area: a-user-picture-data-ingame-label;
  align-self: center;
  padding-bottom: 0.5em;
}

.a-user-picture-data-ingame-name {
  grid-area: a-user-picture-data-ingame-name;
  align-self: center;
  padding-bottom: 0.5em;
  color: #D9A036;
  font-size: 2rem;
  max-width: 29em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.a-user-picture-data-ingame-platform {
  grid-area: a-user-picture-data-ingame-platform;
  align-self: center;
  margin-bottom: 2em;
}

@media only screen and (max-width: 1300px) {
  .a-user-picture-data-ingame-name {
    font-size: 1.5rem;
    max-width: 26em;
  }
}
@media only screen and (max-width: 1000px) {
  .a-user-recent-review-game-name {
    font-size: 1.3rem;
    max-width: 22em;
  }
  .a-user-recent-completion-game-name {
    font-size: 1.3rem;
    max-width: 22em;
  }
  .a-user-currently-playing-game-name {
    font-size: 1.3rem;
    max-width: 22em;
  }
  .c-user-recent-completion-data {
    grid-template-columns: 5em 12em 1fr;
  }
  .a-user-recent-completion-data-type {
    font-size: 1.5rem;
  }
  .a-user-recent-completion-data-date {
    font-size: 1.5rem;
  }
  .a-user-recent-completion-data-time {
    font-size: 1.5rem;
  }
  .a-user-picture-data-ingame-name {
    max-width: 16em;
    font-size: 1.2rem;
    display: -webkit-box;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.1em;
    max-height: 2.2em;
    padding-bottom: 0.1em;
    margin-bottom: 0.5em;
  }
}
@media only screen and (max-width: 670px) {
  .c-user-recent-review {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: "c-user-recent-review-left" "c-user-recent-review-right";
  }
  .c-user-recent-completion-data {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: "a-user-recent-completion-data-type" "c-user-recent-completion-data-date" "c-user-recent-completion-data-time";
  }
  .a-user-recent-review-game-name {
    max-width: 20em;
  }
  .a-user-recent-review-cover {
    justify-self: center;
  }
  .a-user-recent-completion-game-name {
    font-size: 0.9rem;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3em;
    max-height: 2.6em;
    align-self: center;
    max-width: 16em;
  }
  .a-user-currently-playing-game-name {
    font-size: 0.9rem;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3em;
    max-height: 2.6em;
    align-self: center;
    max-width: 16em;
  }
  .c-user-picture {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 20em auto;
    grid-template-areas: "a-user-picture" "c-user-picture-data";
  }
  .a-user-label {
    font-size: 2.2rem;
  }
  .c-user-actions {
    grid-template-columns: 7em 7em 7em;
  }
}
.c-user-private {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em 20em auto;
  grid-template-areas: "a-user-private-label" "a-user-private-picture" "c-user-private-actions";
}

.a-user-private-label {
  grid-area: a-user-private-label;
}

.a-user-private-picture {
  grid-area: a-user-private-picture;
}

.c-user-private-actions {
  display: grid;
  grid-template-columns: 10em 10em;
  grid-template-rows: 3em;
  grid-template-areas: "a-user-private-follow a-user-private-friend";
  grid-column-gap: 2em;
}

.a-user-private-follow {
  grid-area: a-user-private-follow;
}

.a-user-private-friend {
  grid-area: a-user-private-friend;
}

.c-api {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto;
  grid-template-areas: "a-api-label" "c-api-import";
}

.a-api-label {
  grid-area: a-api-label;
}

.c-api-import {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 4em auto auto 4em auto;
  grid-template-areas: "a-api-import-label" "c-api-import-inputs" "c-api-import-output-controls" "c-api-import-submit" "c-api-import-output";
  border-bottom: 2px solid #373737;
  padding-bottom: 3em;
  margin-bottom: 2em;
}

.a-api-import-label {
  grid-area: a-api-import-label;
}

.c-api-import-inputs {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto auto;
  grid-template-areas: "c-api-import-input-1" "c-api-import-input-2" "c-api-import-input-3" "c-api-import-input-4" "c-api-import-input-5";
  padding-bottom: 1em;
}

.c-api-import-input-1 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-api-import-input-1-label" "a-api-import-input-1-input";
}

.a-api-import-input-1-label {
  grid-area: a-api-import-input-1-label;
}

.a-api-import-input-1-input {
  grid-area: a-api-import-input-1-input;
}

.c-api-import-input-input-2 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-api-import-input-2-label" "a-api-import-input-2-input";
}

.a-api-import-input-2-label {
  grid-area: a-api-import-input-2-label;
}

.a-api-import-input-2-input {
  grid-area: a-api-import-input-2-input;
}

.c-api-import-input-3 {
  display: grid;
  grid-template-columns: 1.5em 6em;
  grid-template-rows: 2em;
  grid-template-areas: "a-api-import-input-3-input a-api-import-input-3-label";
}

.a-api-import-input-3-input {
  grid-area: a-api-import-input-3-input;
  align-self: center;
}

.a-api-import-input-3-label {
  grid-area: a-api-import-input-3-label;
  align-self: center;
}

.c-api-import-input-4 {
  display: grid;
  grid-template-columns: 1.5em 6em;
  grid-template-rows: 2em;
  grid-template-areas: "a-api-import-input-4-input a-api-import-input-4-label";
}

.a-api-import-input-4-input {
  grid-area: a-api-import-input-4-input;
  align-self: center;
}

.a-api-import-input-4-label {
  grid-area: a-api-import-input-4-label;
  align-self: center;
}

.c-api-import-input-5 {
  display: grid;
  grid-template-columns: 1.5em 8em;
  grid-template-rows: 2em;
  grid-template-areas: "a-api-import-input-5-input a-api-import-input-5-label";
}

.a-api-import-input-5-input {
  grid-area: a-api-import-input-5-input;
  align-self: center;
}

.a-api-import-input-5-label {
  grid-area: a-api-import-input-5-label;
  align-self: center;
}

.c-api-import-output-controls {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em auto 2em auto 2em auto;
  grid-template-areas: "a-api-import-output-controls-editions-label" "c-api-import-output-controls-editions" "a-api-import-output-controls-bundles-label" "c-api-import-output-controls-bundles" "a-api-import-output-controls-games-label" "c-api-import-output-controls-games";
}

.a-api-import-output-controls-editions-label {
  grid-area: a-api-import-output-controls-editions-label;
  align-self: center;
}

.c-api-import-output-controls-editions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 2em;
  grid-column-gap: 2em;
}

.a-api-import-output-controls-bundles-label {
  grid-area: a-api-import-output-controls-bundles-label;
  align-self: center;
}

.c-api-import-output-controls-bundles {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 2em;
  grid-column-gap: 2em;
}

.a-api-import-output-controls-games-label {
  grid-area: a-api-import-output-controls-games-label;
  align-self: center;
}

.c-api-import-output-controls-games {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 2em;
  grid-column-gap: 2em;
}

.c-api-import-output-control {
  display: grid;
  grid-template-columns: 1.5em 10em;
  grid-template-rows: 2em;
  grid-template-areas: "a-api-import-output-control-input a-api-import-output-control-label";
}

.a-api-import-output-control-input {
  grid-area: a-api-import-output-control-input;
  align-self: center;
}

.a-api-import-output-control-label {
  grid-area: a-api-import-output-control-label;
  align-self: center;
}

.c-api-import-submit {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 2em;
  grid-template-areas: "a-api-import-submit-update a-api-import-submit-import a-api-import-submit-stop";
  padding-top: 1em;
  grid-gap: 2em;
}

.a-api-import-submit-update {
  grid-area: a-api-import-submit-update;
}

.a-api-import-submit-import {
  grid-area: a-api-import-submit-import;
}

.a-api-import-submit-stop {
  grid-area: a-api-import-submit-stop;
}

.c-api-import-output {
  border: 2px solid white;
}

.c-api-price-charting {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 4em 4em auto auto;
  grid-template-areas: "a-api-price-charting-label-label" "c-api-price-charting-submit" "c-api-price-charting-errors" "c-api-price-charting-output";
  border-bottom: 2px solid #373737;
  padding-bottom: 3em;
  margin-bottom: 2em;
}

.a-api-price-charting-label-label {
  grid-area: a-api-price-charting-label-label;
}

.c-api-price-charting-submit {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em;
  grid-template-areas: "a-api-price-charting-submit";
  padding-top: 1em;
  grid-gap: 2em;
}

.a-api-price-charting-submit {
  grid-area: a-api-price-charting-submit;
}

.c-api-price-charting-errors {
  border: 2px solid #b00043;
  padding: 1.5em;
}

.c-api-price-charting-output {
  border: 2px solid white;
}

.c-api-price-charting-imports {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
  padding-bottom: 1em;
  margin-bottom: 1em;
  border-bottom: 1px solid #589100;
}

.c-api-price-charting-import {
  display: grid;
  grid-template-columns: 30em 42em 5em;
  grid-template-rows: 2em;
  grid-template-areas: "a-api-price-charting-import-name a-api-price-charting-import-platforms a-api-price-charting-import-choose";
  padding-bottom: 1em;
  padding-top: 2em;
  align-items: center;
}

.a-api-price-charting-import-name {
  grid-area: a-api-price-charting-import-name;
  font-weight: bold;
}

.a-api-price-charting-import-platforms {
  grid-area: a-api-price-charting-import-platforms;
}

.a-api-price-charting-import-choose {
  grid-area: a-api-price-charting-import-choose;
}

.c-manual-alternative-name {
  display: grid;
  grid-template-columns: 25em 25em 12em 7em 5em;
  grid-template-rows: 4em;
  grid-template-areas: "a-manual-alternative-name-1 a-manual-alternative-name-2 a-manual-alternative-name-3 a-manual-alternative-name-4 a-manual-alternative-name-5";
}

.a-manual-alternative-name-1 {
  grid-area: a-manual-alternative-name-1;
  align-self: center;
}

.a-manual-alternative-name-2 {
  grid-area: a-manual-alternative-name-2;
  align-self: center;
}

.a-manual-alternative-name-3 {
  grid-area: a-manual-alternative-name-3;
  align-self: center;
  padding-right: 2em;
}

.a-manual-alternative-name-4 {
  grid-area: a-manual-alternative-name-4;
  align-self: center;
  padding-right: 2em;
}

.a-manual-alternative-name-5 {
  grid-area: a-manual-alternative-name-5;
  align-self: center;
}

.imported-border {
  background-color: #0076e3 !important;
}

.c-api-ignore-window {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 3em;
  grid-template-areas: "a-api-ignore-window-items" "a-api-ignore-window-submit";
  padding-left: 2em;
  padding-right: 2em;
  padding-top: 3em;
  padding-bottom: 0.5em;
}

.a-api-ignore-window-items {
  grid-area: a-api-ignore-window-items;
}

.a-api-ignore-window-submit {
  grid-area: a-api-ignore-window-submit;
  width: 100%;
  padding-top: 0.5em;
}

.fixed-window {
  position: fixed;
  bottom: 0;
  right: 0;
  background-color: #373737;
  border: 2px solid #636363;
  border-radius: 0.2em;
  z-index: 1000;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  display: none;
}

.c-notifications {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto auto;
  grid-template-areas: "a-notifications-label" "a-notifications-navigation" "c-notifications-wrapper";
}

.a-notifications-label {
  grid-area: a-notifications-label;
}

.a-notifications-navigation {
  grid-area: a-notifications-navigation;
  padding-bottom: 3em;
}

.c-notifications-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "c-notification-row";
  margin-bottom: 1em;
  padding-bottom: 1em;
}

.c-notification-row {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 4em auto;
  grid-template-areas: "c-notification-main-row" "c-notification-full-text-row";
  margin-bottom: 1em;
}

.c-notification-main-row {
  display: grid;
  grid-template-columns: 5em 5em 1fr 2em 2em;
  grid-template-rows: 3em;
  grid-template-areas: "a-notification-new a-notification-date a-notification-text a-notification-open a-notification-delete";
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 4px 18px 0 rgba(0, 0, 0, 0.19);
  background-color: #262626;
  border-radius: 6px;
  padding: 0.5em;
}

.a-notification-new {
  grid-area: a-notification-new;
  align-self: center;
  justify-self: center;
}

.a-notification-date {
  grid-area: a-notification-date;
  align-self: center;
  font-style: italic;
  color: #878787;
  font-size: 0.9rem;
}

.a-notification-text {
  grid-area: a-notification-text;
  align-self: center;
  max-width: 64em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding-left: 1em;
}

.c-notification-full-text-row {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "a-notification-full-text";
  border-top: 2px solid #373737;
}

.a-notification-full-text {
  grid-area: a-notification-full-text;
  background-color: #262626;
  padding: 1.2em;
  line-height: 1.3em;
}

.a-notification-open {
  grid-area: a-notification-open;
  align-self: center;
}

.a-notification-delete {
  grid-area: a-notification-delete;
  align-self: center;
}

.c-notifications-invitations {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto;
  grid-template-areas: "a-notifications-invitations-text a-notifications-invitations-icon";
}

.a-notifications-invitations-text {
  grid-area: a-notifications-invitations-text;
}

.a-notifications-invitations-icon {
  grid-area: a-notifications-invitations-icon;
  align-self: center;
}

.notification-new {
  background-color: #018d01;
  border: 2px solid #016a01;
  color: #ede1d5;
  padding: 0.5em;
}

.expanded-text {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

@media only screen and (max-width: 1300px) {
  .a-notification-text {
    max-width: 44em;
  }
}
@media only screen and (max-width: 1000px) {
  .c-notification-row {
    grid-template-rows: 7em auto;
  }
  .c-notification-main-row {
    grid-template-columns: 5em 1fr 2em 2em;
    grid-template-rows: 3em 3em;
    grid-template-areas: "a-notification-new a-notification-date a-notification-open a-notification-delete" "a-notification-text a-notification-text a-notification-text a-notification-text";
  }
  .a-notification-text {
    max-width: 42em;
    padding-left: 0.5em;
    font-size: 0.9rem;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3em;
    max-height: 2.6em;
  }
}
@media only screen and (max-width: 670px) {
  .a-notification-text {
    max-width: 25em;
  }
}
.c-invitations {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto auto;
  grid-template-areas: "a-invitations-label" "a-invitations-navigation" "c-invitations-wrapper";
}

.a-invitations-label {
  grid-area: a-invitations-label;
}

.a-invitations-navigation {
  grid-area: a-invitations-navigation;
  padding-bottom: 3em;
}

.c-invitations-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
}

.c-invitations-user {
  display: grid;
  grid-template-columns: 7em auto 6em 6em;
  grid-template-rows: 6.5em;
  grid-template-areas: "a-invitations-user-picture a-invitations-user-name a-invitations-user-accept a-invitations-user-decline";
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 4px 18px 0 rgba(0, 0, 0, 0.19);
  background-color: #262626;
  border-radius: 6px;
  margin-bottom: 1em;
  padding: 0.5em;
}

.a-invitations-user-picture {
  grid-area: a-invitations-user-picture;
  align-self: center;
}

.a-invitations-user-name {
  grid-area: a-invitations-user-name;
  max-width: 38em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: #f7f7f7;
  padding-right: 0.6em;
  font-weight: bold;
  align-self: center;
  font-size: 1.5rem;
}
.a-invitations-user-name :link {
  transition: 300ms;
  color: #f7f7f7;
  text-decoration: none;
}
.a-invitations-user-name :visited {
  color: #f7f7f7;
  text-decoration: none;
}
.a-invitations-user-name :hover {
  color: #D9A036;
  text-decoration: none;
}
.a-invitations-user-name :active {
  text-decoration: none;
}

.a-invitations-user-accept {
  grid-area: a-invitations-user-accept;
  align-self: center;
  justify-self: end;
  padding-right: 1em;
}

.a-invitations-user-decline {
  grid-area: a-invitations-user-decline;
  align-self: center;
  justify-self: end;
  padding-right: 1em;
}

@media only screen and (max-width: 670px) {
  .a-invitations-user-name {
    font-size: 1.3rem;
  }
}
.c-help {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto auto auto auto auto auto auto auto auto auto auto auto;
  grid-template-areas: "a-help-label" "c-help-navigation" "c-help-top" "c-help-edit-top" "c-help-library" "c-help-edit-library" "c-help-wishlist" "c-help-statistics" "c-help-years" "c-help-completion" "c-help-users" "c-help-notifications" "c-help-settings";
}

.a-help-label {
  grid-area: a-help-label;
}

.c-help-navigation {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
}

.c-help-navigation-row {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em;
  grid-template-areas: "a-help-navigation-item";
}

.a-help-navigation-item {
  grid-area: a-help-navigation-item;
  align-self: center;
}

.c-help-top {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto auto auto auto auto auto auto;
  grid-template-areas: "a-help-top-label" "a-help-top-text" "a-help-top-filtering-label" "a-help-top-filtering-text" "a-help-top-share-label" "a-help-top-share-text" "a-help-top-add-game-label" "a-help-top-add-game-text" "a-help-top-row-label" "a-help-top-row-text";
}

.a-help-top-label {
  grid-area: a-help-top-label;
}

.a-help-top-text {
  grid-area: a-help-top-text;
}

.a-help-top-filtering-label {
  grid-area: a-help-top-filtering-label;
}

.a-help-top-filtering-text {
  grid-area: a-help-top-filtering-text;
}

.a-help-top-share-label {
  grid-area: a-help-top-share-label;
}

.a-help-top-share-text {
  grid-area: a-help-top-share-text;
}

.a-help-top-add-game-label {
  grid-area: a-help-top-add-game-label;
}

.a-help-top-add-game-text {
  grid-area: a-help-top-add-game-text;
}

.a-help-top-row-label {
  grid-area: a-help-top-row-label;
}

.a-help-top-row-text {
  grid-area: a-help-top-row-text;
}

.c-help-edit-top {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto auto auto auto auto;
  grid-template-areas: "a-help-edit-top-label" "a-help-edit-top-text" "a-help-edit-top-score-label" "a-help-edit-top-score-text" "a-help-edit-top-main-version-label" "a-help-edit-top-main-version-text" "a-help-edit-top-remove-label" "a-help-edit-top-remove-text";
}

.a-help-edit-top-label {
  grid-area: a-help-edit-top-label;
}

.a-help-edit-top-text {
  grid-area: a-help-edit-top-text;
}

.a-help-edit-top-score-label {
  grid-area: a-help-edit-top-score-label;
}

.a-help-edit-top-score-text {
  grid-area: a-help-edit-top-score-text;
}

.a-help-edit-top-main-version-label {
  grid-area: a-help-edit-top-main-version-label;
}

.a-help-edit-top-main-version-text {
  grid-area: a-help-edit-top-main-version-text;
}

.a-help-edit-top-remove-label {
  grid-area: a-help-edit-top-remove-label;
}

.a-help-edit-top-remove-text {
  grid-area: a-help-edit-top-remove-text;
}

.c-help-library {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
  grid-template-areas: "a-help-library-label" "a-help-library-text" "a-help-library-platforms-label" "a-help-library-platforms-text" "a-help-library-add-game-regular-label" "a-help-library-add-game-regular-text" "a-help-library-add-game-bundle-label" "a-help-library-add-game-bundle-text" "a-help-library-random-games-label" "a-help-library-random-games-text" "a-help-library-filtering-label" "a-help-library-filtering-text" "a-help-library-row-label" "a-help-library-row-text";
}

.a-help-library-label {
  grid-area: a-help-library-label;
}

.a-help-library-text {
  grid-area: a-help-library-text;
}

.a-help-library-platforms-label {
  grid-area: a-help-library-platforms-label;
}

.a-help-library-platforms-text {
  grid-area: a-help-library-platforms-text;
}

.a-help-library-add-game-regular-label {
  grid-area: a-help-library-add-game-regular-label;
}

.a-help-library-add-game-regular-text {
  grid-area: a-help-library-add-game-regular-text;
}

.a-help-library-add-game-bundle-label {
  grid-area: a-help-library-add-game-bundle-label;
}

.a-help-library-add-game-bundle-text {
  grid-area: a-help-library-add-game-bundle-text;
}

.a-help-library-random-games-label {
  grid-area: a-help-library-random-games-label;
}

.a-help-library-random-games-text {
  grid-area: a-help-library-random-games-text;
}

.a-help-library-filtering-label {
  grid-area: a-help-library-filtering-label;
}

.a-help-library-filtering-text {
  grid-area: a-help-library-filtering-text;
}

.a-help-library-row-label {
  grid-area: a-help-library-row-label;
}

.a-help-library-row-text {
  grid-area: a-help-library-row-text;
}

.c-help-edit-library {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
  grid-template-areas: "a-help-edit-library-label" "a-help-edit-library-text" "a-help-edit-library-add-version-label" "a-help-edit-library-add-version-text" "a-help-edit-library-row-label" "a-help-edit-library-row-text" "a-help-edit-library-add-completion-label" "a-help-edit-library-add-completion-text" "a-help-edit-library-plat-label" "a-help-edit-library-plat-text" "a-help-edit-library-add-to-top-label" "a-help-edit-library-add-to-top-text" "a-help-edit-library-remove-label" "a-help-edit-library-remove-text";
}

.a-help-edit-library-label {
  grid-area: a-help-edit-library-label;
}

.a-help-edit-library-text {
  grid-area: a-help-edit-library-text;
}

.a-help-edit-library-add-version-label {
  grid-area: a-help-edit-library-add-version-label;
}

.a-help-edit-library-add-version-text {
  grid-area: a-help-edit-library-add-version-text;
}

.a-help-edit-library-row-label {
  grid-area: a-help-edit-library-row-label;
}

.a-help-edit-library-row-text {
  grid-area: a-help-edit-library-row-text;
}

.a-help-edit-library-add-completion-label {
  grid-area: a-help-edit-library-add-completion-label;
}

.a-help-edit-library-add-completion-text {
  grid-area: a-help-edit-library-add-completion-text;
}

.a-help-edit-library-plat-label {
  grid-area: a-help-edit-library-plat-label;
}

.a-help-edit-library-plat-text {
  grid-area: a-help-edit-library-plat-text;
}

.a-help-edit-library-add-to-top-label {
  grid-area: a-help-edit-library-add-to-top-label;
}

.a-help-edit-library-add-to-top-text {
  grid-area: a-help-edit-library-add-to-top-text;
}

.a-help-edit-library-remove-label {
  grid-area: a-help-edit-library-remove-label;
}

.a-help-edit-library-remove-text {
  grid-area: a-help-edit-library-remove-text;
}

.c-help-wishlist {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto auto auto auto auto auto auto;
  grid-template-areas: "a-help-wishlist-label" "a-help-wishlist-text" "a-help-wishlist-platforms-label" "a-help-wishlist-platforms-text" "a-help-wishlist-add-game-label" "a-help-wishlist-add-game-text" "a-help-wishlist-filtering-label" "a-help-wishlist-filtering-text" "a-help-wishlist-row-label" "a-help-wishlist-row-text";
}

.a-help-wishlist-label {
  grid-area: a-help-wishlist-label;
}

.a-help-wishlist-text {
  grid-area: a-help-wishlist-text;
}

.a-help-wishlist-platforms-label {
  grid-area: a-help-wishlist-platforms-label;
}

.a-help-wishlist-platforms-text {
  grid-area: a-help-wishlist-platforms-text;
}

.a-help-wishlist-add-game-label {
  grid-area: a-help-wishlist-add-game-label;
}

.a-help-wishlist-add-game-text {
  grid-area: a-help-wishlist-add-game-text;
}

.a-help-wishlist-filtering-label {
  grid-area: a-help-wishlist-filtering-label;
}

.a-help-wishlist-filtering-text {
  grid-area: a-help-wishlist-filtering-text;
}

.a-help-wishlist-row-label {
  grid-area: a-help-wishlist-row-label;
}

.a-help-wishlist-row-text {
  grid-area: a-help-wishlist-row-text;
}

.c-help-statistics {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "a-help-statistics-label" "a-help-statistics-text";
}

.a-help-statistics-label {
  grid-area: a-help-statistics-label;
}

.a-help-statistics-text {
  grid-area: a-help-statistics-text;
}

.c-help-years {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto auto auto auto auto;
  grid-template-areas: "a-help-years-label" "a-help-years-text" "a-help-years-platforms-label" "a-help-years-platforms-text" "a-help-years-completion-label" "a-help-years-completion-text" "a-help-years-bought-label" "a-help-years-bought-text";
}

.a-help-years-label {
  grid-area: a-help-years-label;
}

.a-help-years-text {
  grid-area: a-help-years-text;
}

.a-help-years-platforms-label {
  grid-area: a-help-years-platforms-label;
}

.a-help-years-platforms-text {
  grid-area: a-help-years-platforms-text;
}

.a-help-years-completion-label {
  grid-area: a-help-years-completion-label;
}

.a-help-years-completion-text {
  grid-area: a-help-years-completion-text;
}

.a-help-years-bought-label {
  grid-area: a-help-years-bought-label;
}

.a-help-years-bought-text {
  grid-area: a-help-years-bought-text;
}

.c-help-completion {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto auto auto;
  grid-template-areas: "a-help-completion-label" "a-help-completion-text" "a-help-completion-filtering-label" "a-help-completion-filtering-text" "a-help-completion-row-label" "a-help-completion-row-text";
}

.a-help-completion-label {
  grid-area: a-help-completion-label;
}

.a-help-completion-text {
  grid-area: a-help-completion-text;
}

.a-help-completion-filtering-label {
  grid-area: a-help-completion-filtering-label;
}

.a-help-completion-filtering-text {
  grid-area: a-help-completion-filtering-text;
}

.a-help-completion-row-label {
  grid-area: a-help-completion-row-label;
}

.a-help-completion-row-text {
  grid-area: a-help-completion-row-text;
}

.c-help-users {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto;
  grid-template-areas: "a-help-users-label" "a-help-users-text" "a-help-users-follow-label" "a-help-users-follow-text";
}

.a-help-users-label {
  grid-area: a-help-users-label;
}

.a-help-users-text {
  grid-area: a-help-users-text;
}

.a-help-users-follow-label {
  grid-area: a-help-users-follow-label;
}

.a-help-users-follow-text {
  grid-area: a-help-users-follow-text;
}

.c-help-notifications {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto;
  grid-template-areas: "a-help-notifications-label" "a-help-notifications-text" "a-help-notifications-row-label" "a-help-notifications-row-text";
}

.a-help-notifications-label {
  grid-area: a-help-notifications-label;
}

.a-help-notifications-text {
  grid-area: a-help-notifications-text;
}

.a-help-notifications-row-label {
  grid-area: a-help-notifications-row-label;
}

.a-help-notifications-row-text {
  grid-area: a-help-notifications-row-text;
}

.c-help-settings {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
  grid-template-areas: "a-help-settings-label" "a-help-settings-text" "a-help-settings-currency-label" "a-help-settings-currency-text" "a-help-settings-region-label" "a-help-settings-region-text" "a-help-settings-timezone-label" "a-help-settings-timezone-text" "a-help-settings-share-label" "a-help-settings-share-text" "a-help-settings-notifications-label" "a-help-settings-notifications-text" "a-help-settings-platforms-label" "a-help-settings-platforms-text" "a-help-settings-personal-label" "a-help-settings-personal-text" "a-help-settings-delete-label" "a-help-settings-delete-text" "a-help-settings-import-label" "a-help-settings-import-text";
}

.a-help-settings-label {
  grid-area: a-help-settings-label;
}

.a-help-settings-text {
  grid-area: a-help-settings-text;
}

.a-help-settings-currency-label {
  grid-area: a-help-settings-currency-label;
}

.a-help-settings-currency-text {
  grid-area: a-help-settings-currency-text;
}

.a-help-settings-region-label {
  grid-area: a-help-settings-region-label;
}

.a-help-settings-region-text {
  grid-area: a-help-settings-region-text;
}

.a-help-settings-timezone-label {
  grid-area: a-help-settings-timezone-label;
}

.a-help-settings-timezone-text {
  grid-area: a-help-settings-timezone-text;
}

.a-help-settings-share-label {
  grid-area: a-help-settings-share-label;
}

.a-help-settings-share-text {
  grid-area: a-help-settings-share-text;
}

.a-help-settings-notifications-label {
  grid-area: a-help-settings-notifications-label;
}

.a-help-settings-notifications-text {
  grid-area: a-help-settings-notifications-text;
}

.a-help-settings-platforms-label {
  grid-area: a-help-settings-platforms-label;
}

.a-help-settings-platforms-text {
  grid-area: a-help-settings-platforms-text;
}

.a-help-settings-personal-label {
  grid-area: a-help-settings-personal-label;
}

.a-help-settings-personal-text {
  grid-area: a-help-settings-personal-text;
}

.a-help-settings-delete-label {
  grid-area: a-help-settings-delete-label;
}

.a-help-settings-delete-text {
  grid-area: a-help-settings-delete-text;
}

.a-help-settings-import-label {
  grid-area: a-help-settings-import-label;
}

.a-help-settings-import-text {
  grid-area: a-help-settings-import-text;
}

.navigation-subitem {
  padding-left: 1.5em;
}

.navigation-main-label {
  padding-top: 1em;
  padding-bottom: 0.5em;
  font-size: 2.5rem;
  color: #D9A036;
  font-weight: bold;
  border-top: 1px #6d6d6d solid;
  margin-top: 0.5em;
}

.navigation-subitem-label {
  padding-top: 0.6em;
  font-size: 1.7rem;
  color: #D9A036;
  font-weight: bold;
}

.c-challenges {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto auto auto;
  grid-template-areas: "a-challenges-title" "a-challenges-navigation" "c-challenges-personal" "c-challenges-personal-past";
}

.a-challenges-title {
  grid-area: a-challenges-title;
}

.a-challenges-navigation {
  grid-area: a-challenges-navigation;
}

.c-challenges-personal {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto;
  grid-template-areas: "a-challenges-personal-header" "c-challenges-personal-wrappers";
  padding-bottom: 1em;
}

.a-challenges-personal-header {
  grid-area: a-challenges-personal-header;
}

.c-challenges-personal-wrappers {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "c-challenges-personal-wrapper";
}

.c-challenges-personal-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em auto;
  grid-template-areas: "a-challenges-personal-date" ".";
}

.a-challenges-personal-date {
  grid-area: a-challenges-personal-date;
  font-size: 1.3rem;
  font-weight: bold;
  align-self: center;
}

.c-challenge-personal {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3em auto;
  grid-template-areas: "a-challenge-personal-text" "c-challenge-personal-progress-wrapper";
  padding-bottom: 1em;
}

.a-challenge-personal-text {
  grid-area: a-challenge-personal-text;
  align-self: center;
  color: #AAAAAA;
  font-size: 1.25rem;
}

.c-challenge-personal-progress-wrapper {
  display: grid;
  grid-template-columns: 1fr 2em;
  grid-template-rows: 2fr;
  grid-template-areas: "c-challenge-personal-progress a-challenge-personal-progress-total";
  align-self: center;
}

.c-challenge-personal-progress {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "a-challenge-personal-progress";
  position: relative;
  height: 2em;
  background-color: #2f2f2f;
  border-radius: 3px;
  overflow: hidden;
  margin: 10px 0;
}

.a-challenge-personal-progress {
  grid-area: a-challenge-personal-progress;
  height: 100%;
  background-color: #3aab3a;
  transition: width 0.3s ease;
  justify-content: center;
  align-content: center;
  text-align: center;
  font-weight: bold;
  font-size: 1.5rem;
}

.a-challenge-personal-progress-total {
  grid-area: a-challenge-personal-progress-total;
  align-self: center;
  justify-self: center;
  font-weight: bold;
  font-size: 1.5rem;
}

.c-challenges-personal-past {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto;
  grid-template-areas: "a-challenge-personal-text" "c-challenge-personal-progress-wrapper";
}

.c-export-top {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto;
  grid-template-areas: "a-export-top-label" "c-export-top-filters";
}

.a-export-top-label {
  color: #D9A036;
  grid-area: a-export-top-label;
}

.c-export-top-filters {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "c-export-top-filter-columns" "c-export-top-filter-type";
}

.c-export-top-filters {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: "c-export-top-filter-columns";
}

.c-export-top-filter-columns {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto;
  grid-template-areas: "a-export-top-filter-columns-label" "c-export-top-filter-columns-inputs";
  padding-bottom: 2em;
}

.a-export-top-filter-columns-label {
  grid-area: a-export-top-filter-columns-label;
}

.c-export-top-filter-columns-input {
  display: grid;
  grid-template-columns: 2em 15em;
  grid-template-rows: 2em;
  grid-template-areas: "a-export-top-filter-columns-input a-export-top-filter-columns-label";
}

.a-export-top-filter-columns-input {
  grid-area: a-export-top-filter-columns-input;
}

.a-export-top-filter-columns-label {
  grid-area: a-export-top-filter-columns-label;
}

.c-export-top-filter-type {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-export-top-filter-type-label" "a-export-top-filter-type-input";
}

.a-export-top-filter-type-input {
  grid-area: a-export-top-filter-type-input;
}

.a-export-top-filter-type-label {
  grid-area: a-export-top-filter-type-label;
}

.c-export-wishlist {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto;
  grid-template-areas: "a-export-wishlist-label" "c-export-wishlist-filters";
}

.a-export-wishlist-label {
  color: #D9A036;
  grid-area: a-export-wishlist-label;
}

.c-export-wishlist-filters {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "c-export-wishlist-filter-columns" "c-export-wishlist-filter-type";
}

.c-export-wishlist-filters {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: "c-export-wishlist-filter-columns";
}

.c-export-wishlist-filter-columns {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto;
  grid-template-areas: "a-export-wishlist-filter-columns-label" "c-export-wishlist-filter-columns-inputs";
  padding-bottom: 2em;
}

.a-export-wishlist-filter-columns-label {
  grid-area: a-export-wishlist-filter-columns-label;
}

.c-export-wishlist-filter-columns-input {
  display: grid;
  grid-template-columns: 2em 15em;
  grid-template-rows: 2em;
  grid-template-areas: "a-export-wishlist-filter-columns-input a-export-wishlist-filter-columns-label";
}

.a-export-wishlist-filter-columns-input {
  grid-area: a-export-wishlist-filter-columns-input;
}

.a-export-wishlist-filter-columns-label {
  grid-area: a-export-wishlist-filter-columns-label;
}

.c-export-wishlist-filter-type {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-export-wishlist-filter-type-label" "a-export-wishlist-filter-type-input";
}

.a-export-wishlist-filter-type-input {
  grid-area: a-export-wishlist-filter-type-input;
}

.a-export-wishlist-filter-type-label {
  grid-area: a-export-wishlist-filter-type-label;
}

.c-export-library {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto;
  grid-template-areas: "a-export-library-label" "c-export-library-filters";
}

.a-export-library-label {
  color: #D9A036;
  grid-area: a-export-library-label;
}

.c-export-library-filters {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "c-export-library-filter-columns" "c-export-library-filter-type";
}

.c-export-library-filters {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: "c-export-library-filter-columns";
}

.c-export-library-filter-columns {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto;
  grid-template-areas: "a-export-library-filter-columns-label" "c-export-library-filter-columns-inputs";
  padding-bottom: 2em;
}

.a-export-library-filter-columns-label {
  grid-area: a-export-library-filter-columns-label;
}

.c-export-library-filter-columns-input {
  display: grid;
  grid-template-columns: 2em 15em;
  grid-template-rows: 2em;
  grid-template-areas: "a-export-library-filter-columns-input a-export-library-filter-columns-label";
}

.a-export-library-filter-columns-input {
  grid-area: a-export-library-filter-columns-input;
}

.a-export-library-filter-columns-label {
  grid-area: a-export-library-filter-columns-label;
}

.c-export-library-filter-type {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-export-library-filter-type-label" "a-export-library-filter-type-input";
}

.a-export-library-filter-type-input {
  grid-area: a-export-library-filter-type-input;
}

.a-export-library-filter-type-label {
  grid-area: a-export-library-filter-type-label;
}

.c-import-wishlist-upload {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto;
  grid-template-areas: "a-import-wishlist-title" "c-import-wishlist-upload";
}

.a-import-wishlist-title {
  grid-area: a-import-wishlist-title;
}

.c-import-wishlist-upload-input {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3em 2em 5em;
  grid-template-areas: "a-import-wishlist-upload-input" "a-import-wishlist-upload-info" "a-import-wishlist-upload-button";
}

.a-import-wishlist-upload-input {
  grid-area: a-import-wishlist-upload-input;
}

.a-import-wishlist-upload-info {
  grid-area: a-import-wishlist-upload-info;
}

.a-import-wishlist-upload-button {
  grid-area: a-import-wishlist-upload-button;
}

.c-import-wishlist-mapping {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto 6em 4em 4em 4em 5em 3em 3em 3em auto;
  grid-template-areas: "a-import-wishlist-mapping-title" "c-import-wishlist-mapping-selects" "a-import-wishlist-help" "a-import-wishlist-preview" "a-import-wishlist-validate" "a-import-wishlist-confirm" "a-import-wishlist-preview-label" "a-import-wishlist-preview-stats-maybe" "a-import-wishlist-preview-stats-found" "a-import-wishlist-preview-stats-not-found" "c-import-wishlist-rows";
}

.a-import-wishlist-mapping-title {
  grid-area: a-import-wishlist-mapping-title;
}

.c-import-wishlist-mapping-selects {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ". . .";
  column-gap: 2em;
}

.c-import-wishlist-mapping-input {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-import-wishlist-mapping-label" "a-import-wishlist-mapping-input";
}

.a-import-wishlist-mapping-label {
  grid-area: a-import-wishlist-mapping-label;
}

.a-import-wishlist-mapping-input {
  grid-area: a-import-wishlist-mapping-input;
}

.a-import-wishlist-help {
  grid-area: a-import-wishlist-help;
  font-size: 1.1rem;
}

.a-import-wishlist-preview {
  grid-area: a-import-wishlist-preview;
  align-self: center;
}

.a-import-wishlist-validate {
  grid-area: a-import-wishlist-validate;
  align-self: center;
}

.a-import-wishlist-confirm {
  grid-area: a-import-wishlist-confirm;
  align-self: center;
}

.a-import-wishlist-preview-label {
  grid-area: a-import-wishlist-preview-label;
}

.a-import-wishlist-preview-stats-found {
  grid-area: a-import-wishlist-preview-stats-found;
  font-weight: bold;
  color: #046A38;
  font-size: 1.5rem;
}

.a-import-wishlist-preview-stats-maybe {
  grid-area: a-import-wishlist-preview-stats-maybe;
  font-weight: bold;
  color: #FFB81C;
  font-size: 1.5rem;
}

.a-import-wishlist-preview-stats-not-found {
  grid-area: a-import-wishlist-preview-stats-not-found;
  font-weight: bold;
  color: #BE3A34;
  font-size: 1.5rem;
}

.c-import-wishlist-rows {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
}

.c-import-wishlist-rows {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
}

.c-import-wishlist-row {
  display: grid;
  grid-template-columns: 1fr 12em 17em 5em 2em;
  grid-template-rows: 1fr;
  grid-template-areas: "a-import-wishlist-row-name a-import-wishlist-row-platform a-import-wishlist-row-edition a-import-wishlist-row-region a-import-wishlist-row-edit";
  padding: 0.7em;
  border: 1px solid #505050;
  margin-bottom: 1.5em;
  border-radius: 0.2em;
  font-weight: bold;
}

.a-import-wishlist-row-name {
  grid-area: a-import-wishlist-row-name;
  align-self: center;
}

.a-import-wishlist-row-platform {
  grid-area: a-import-wishlist-row-platform;
  padding-right: 1em;
  align-self: center;
}

.a-import-wishlist-row-edition {
  grid-area: a-import-wishlist-row-edition;
  font-size: 0.7rem;
  align-self: center;
  padding-right: 1em;
}

.a-import-wishlist-row-region {
  grid-area: a-import-wishlist-row-region;
  align-self: center;
}

.a-import-wishlist-row-edit {
  grid-area: a-import-wishlist-row-edit;
}

.c-import-wishlist-modal-edit-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 3em;
  grid-template-areas: "c-import-wishlist-modal-edit-platform" "c-import-wishlist-modal-edit-region" "a-import-wishlist-modal-edit-submit";
}

.c-import-wishlist-modal-edit-platform {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "c-import-wishlist-modal-edit-platform-select" "c-import-wishlist-modal-edit-platform-editions";
}

.c-import-wishlist-modal-edit-platform-select {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-import-wishlist-modal-edit-platform-select-label" "a-import-wishlist-modal-edit-platform-select-input";
}

.a-import-wishlist-modal-edit-platform-select-label {
  grid-area: a-import-wishlist-modal-edit-platform-select-label;
}

.a-import-wishlist-modal-edit-platform-select-input {
  grid-area: a-import-wishlist-modal-edit-platform-select-input;
}

.c-import-wishlist-modal-edit-platform-editions {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
}

.c-import-wishlist-modal-edit-platform-edition {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "c-import-wishlist-modal-edit-platform-edition-select" "c-import-wishlist-modal-edit-platform-edition-name";
}

.c-import-wishlist-modal-edit-platform-edition-select {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-import-wishlist-modal-edit-platform-edition-select-label" "a-import-wishlist-modal-edit-platform-edition-select-input";
}

.a-import-wishlist-modal-edit-platform-edition-select-label {
  grid-area: a-import-wishlist-modal-edit-platform-edition-select-label;
}

.a-import-wishlist-modal-edit-platform-edition-select-input {
  grid-area: a-import-wishlist-modal-edit-platform-edition-select-input;
}

.c-import-wishlist-modal-edit-platform-edition-name {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-import-wishlist-modal-edit-platform-edition-name-label" "a-import-wishlist-modal-edit-platform-edition-name-input";
}

.a-import-wishlist-modal-edit-platform-edition-name-label {
  grid-area: a-import-wishlist-modal-edit-platform-edition-name-label;
}

.a-import-wishlist-modal-edit-platform-edition-name-input {
  grid-area: a-import-wishlist-modal-edit-platform-edition-name-input;
}

.c-import-wishlist-modal-edit-region {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-import-wishlist-modal-edit-region-label" "a-import-wishlist-modal-edit-region-input";
}

.a-import-wishlist-modal-edit-region-label {
  grid-area: a-import-wishlist-modal-edit-region-label;
}

.a-import-wishlist-modal-edit-region-input {
  grid-area: a-import-wishlist-modal-edit-region-input;
}

.a-import-wishlist-modal-edit-submit {
  grid-area: a-import-wishlist-modal-edit-submit;
}

.import-success {
  background-color: #00751e;
}

.import-error {
  background-color: #af2a23;
}

.import-maybe {
  background-color: #bf8300;
}

.import-row-edited {
  border: 2px solid #bf00e4 !important;
}

c-import-top-upload {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto;
  grid-template-areas: "a-import-top-title" "c-import-top-upload";
}

.a-import-top-title {
  grid-area: a-import-top-title;
}

.c-import-top-upload {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto;
  grid-template-areas: "a-import-top-title" "c-import-top-upload-input";
}

.c-import-top-upload-input {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3em 2em 5em;
  grid-template-areas: "a-import-top-upload-input" "a-import-top-upload-info" "a-import-top-upload-button";
}

.a-import-top-upload-input {
  grid-area: a-import-top-upload-input;
}

.a-import-top-upload-info {
  grid-area: a-import-top-upload-info;
}

.a-import-top-upload-button {
  grid-area: a-import-top-upload-button;
}

.c-import-top-mapping {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto 6em 4em 4em 4em 5em 3em 3em 3em 3em auto;
  grid-template-areas: "a-import-top-mapping-title" "c-import-top-mapping-selects" "a-import-top-help" "a-import-top-preview" "a-import-top-validate" "a-import-top-confirm" "a-import-top-preview-label" "a-import-top-preview-stats-maybe" "a-import-top-preview-stats-found" "a-import-top-preview-stats-not-found" "a-import-top-preview-stats-exists" "c-import-top-rows";
}

.a-import-top-mapping-title {
  grid-area: a-import-top-mapping-title;
}

.c-import-top-mapping-selects {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ". . .";
  column-gap: 2em;
}

.c-import-top-mapping-input {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-import-top-mapping-label" "a-import-top-mapping-input";
}

.a-import-top-mapping-label {
  grid-area: a-import-top-mapping-label;
}

.a-import-top-mapping-input {
  grid-area: a-import-top-mapping-input;
}

.a-import-top-help {
  grid-area: a-import-top-help;
  font-size: 1.1rem;
}

.a-import-top-preview {
  grid-area: a-import-top-preview;
  align-self: center;
}

.a-import-top-validate {
  grid-area: a-import-top-validate;
  align-self: center;
}

.a-import-top-confirm {
  grid-area: a-import-top-confirm;
  align-self: center;
}

.a-import-top-preview-label {
  grid-area: a-import-top-preview-label;
}

.a-import-top-preview-stats-found {
  grid-area: a-import-top-preview-stats-found;
  font-weight: bold;
  color: #046A38;
  font-size: 1.5rem;
}

.a-import-top-preview-stats-maybe {
  grid-area: a-import-top-preview-stats-maybe;
  font-weight: bold;
  color: #FFB81C;
  font-size: 1.5rem;
}

.a-import-top-preview-stats-not-found {
  grid-area: a-import-top-preview-stats-not-found;
  font-weight: bold;
  color: #BE3A34;
  font-size: 1.5rem;
}

.a-import-top-preview-stats-exists {
  grid-area: a-import-top-preview-stats-exists;
  font-weight: bold;
  color: #348ebe;
  font-size: 1.5rem;
}

.c-import-top-rows {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
}

.c-import-top-rows {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
}

.c-import-top-row {
  display: grid;
  grid-template-columns: 8em 1fr 11em 2em;
  grid-template-rows: 1fr;
  grid-template-areas: "a-import-top-row-position a-import-top-row-name a-import-top-row-platform a-import-top-row-edit";
  padding: 0.7em;
  border: 1px solid #505050;
  margin-bottom: 1.5em;
  border-radius: 0.2em;
  font-weight: bold;
}

.a-import-top-row-position {
  grid-area: a-import-top-row-position;
  align-self: center;
}

.a-import-top-row-name {
  grid-area: a-import-top-row-name;
  align-self: center;
}

.a-import-top-row-platform {
  grid-area: a-import-top-row-platform;
  padding-right: 1em;
  align-self: center;
}

.a-import-top-row-edit {
  grid-area: a-import-top-row-edit;
  align-self: center;
}

.a-import-top-row-review {
  grid-area: a-import-top-row-review;
  font-size: 0.7rem;
  align-self: center;
  justify-self: center;
  overflow: hidden;
  height: 3em;
}

.c-import-top-modal-edit-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 3em;
  grid-template-areas: "c-import-top-modal-edit-platform" "a-import-top-modal-edit-submit";
}

.c-import-top-modal-edit-platform {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: "c-import-top-modal-edit-platform-select";
}

.c-import-top-modal-edit-platform-select {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-import-top-modal-edit-platform-select-label" "a-import-top-modal-edit-platform-select-input";
}

.a-import-top-modal-edit-platform-select-label {
  grid-area: a-import-top-modal-edit-platform-select-label;
}

.a-import-top-modal-edit-platform-select-input {
  grid-area: a-import-top-modal-edit-platform-select-input;
}

.import-exists {
  background-color: #348ebe;
}

.c-import-library-upload {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto;
  grid-template-areas: "a-import-library-title" "c-import-library-upload-input";
}

.a-import-library-title {
  grid-area: a-import-library-title;
}

.c-import-library-upload-input {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3em 2em 5em;
  grid-template-areas: "a-import-library-upload-input" "a-import-library-upload-info" "a-import-library-upload-button";
}

.a-import-library-upload-input {
  grid-area: a-import-library-upload-input;
}

.a-import-library-upload-info {
  grid-area: a-import-library-upload-info;
}

.a-import-library-upload-button {
  grid-area: a-import-library-upload-button;
}

.c-import-library-mapping {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto auto 6em 4em 4em 4em 5em 3em 3em 3em 3em auto;
  grid-template-areas: "a-import-library-mapping-title" "c-import-library-mapping-selects" "c-import-library-mapping-empty-review" "a-import-library-help" "a-import-library-preview" "a-import-library-validate" "a-import-library-confirm" "a-import-library-preview-label" "a-import-library-preview-stats-maybe" "a-import-library-preview-stats-found" "a-import-library-preview-stats-not-found" "a-import-library-preview-stats-exists" "c-import-library-rows";
}

.a-import-library-mapping-title {
  grid-area: a-import-library-mapping-title;
}

.c-import-library-mapping-selects {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ". . .";
  column-gap: 2em;
}

.c-import-library-mapping-input {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-import-library-mapping-label" "a-import-library-mapping-input";
}

.a-import-library-mapping-label {
  grid-area: a-import-library-mapping-label;
}

.a-import-library-mapping-input {
  grid-area: a-import-library-mapping-input;
}

.c-import-library-mapping-empty-review {
  display: grid;
  grid-template-columns: 2em 18em;
  grid-template-rows: 5em;
  grid-template-areas: "a-import-library-mapping-empty-review-input a-import-library-mapping-empty-review-label";
  align-items: center;
}

.a-import-library-mapping-empty-review-input {
  grid-area: a-import-library-mapping-empty-review-input;
  font-weight: bold;
  align-self: center;
}

.a-import-library-mapping-empty-review-label {
  grid-area: a-import-library-mapping-empty-review-label;
  align-self: center;
}

.a-import-library-help {
  grid-area: a-import-library-help;
  font-size: 1.1rem;
}

.a-import-library-preview {
  grid-area: a-import-library-preview;
  align-self: center;
}

.a-import-library-validate {
  grid-area: a-import-library-validate;
  align-self: center;
}

.a-import-library-confirm {
  grid-area: a-import-library-confirm;
  align-self: center;
}

.a-import-library-preview-label {
  grid-area: a-import-library-preview-label;
}

.a-import-library-preview-stats-found {
  grid-area: a-import-library-preview-stats-found;
  font-weight: bold;
  color: #046A38;
  font-size: 1.5rem;
}

.a-import-library-preview-stats-maybe {
  grid-area: a-import-library-preview-stats-maybe;
  font-weight: bold;
  color: #FFB81C;
  font-size: 1.5rem;
}

.a-import-library-preview-stats-not-found {
  grid-area: a-import-library-preview-stats-not-found;
  font-weight: bold;
  color: #BE3A34;
  font-size: 1.5rem;
}

.a-import-library-preview-stats-exists {
  grid-area: a-import-library-preview-stats-exists;
  font-weight: bold;
  color: #348ebe;
  font-size: 1.5rem;
}

.c-import-library-rows {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
}

.c-import-library-rows {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
}

.c-import-library-row {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto;
  grid-template-areas: "c-import-library-row-upper" "c-import-library-row-review" "c-import-library-row-labels" "c-import-library-row-versions";
  margin-top: 3em;
}

.c-import-library-row-upper {
  display: grid;
  grid-template-columns: 1fr 11em 2em;
  grid-template-rows: 2.5em;
  grid-template-areas: "a-import-library-row-name a-import-library-row-platform a-import-library-row-edit";
  padding-left: 0.7em;
  padding-right: 0.7em;
  padding-top: 0.7em;
  font-weight: bold;
}

.a-import-library-row-name {
  grid-area: a-import-library-row-name;
  align-self: center;
}

.a-import-library-row-platform {
  grid-area: a-import-library-row-platform;
  align-self: center;
  padding-right: 1em;
}

.a-import-library-row-exists {
  grid-area: a-import-library-row-exists;
  align-self: center;
}

.a-import-library-row-edit {
  grid-area: a-import-library-row-edit;
  align-self: center;
  justify-self: center;
}

.c-import-library-row-review {
  display: grid;
  grid-template-columns: 3em 1fr;
  grid-template-rows: auto;
  grid-template-areas: "a-import-library-row-review-score a-import-library-row-review-review";
  margin-bottom: 1.2em;
  border-bottom: 5px solid #191919;
  padding: 0.7em;
}

.a-import-library-row-review-score {
  grid-area: a-import-library-row-review-score;
  align-self: center;
  justify-self: center;
  font-weight: bold;
  font-size: 1.5rem;
}

.a-import-library-row-review-review {
  grid-area: a-import-library-row-review-review;
  font-size: 0.7rem;
}

.c-import-library-row-labels {
  display: grid;
  grid-template-columns: 5em 10em 5em 11em 13em 5em 7em 7em 6em 6em 5em 5em 2em;
  grid-template-rows: 2em;
  grid-template-areas: "a-import-library-row-label-copies a-import-library-row-label-edition a-import-library-row-label-price a-import-library-row-label-purchase-date a-import-library-row-label-shop a-import-library-row-label-region a-import-library-row-label-condition a-import-library-row-label-case a-import-library-row-label-disc a-import-library-row-label-art a-import-library-row-label-manual a-import-library-row-label-special .";
  grid-column-gap: 1em;
  padding-left: 0.7em;
  padding-right: 0.7em;
  font-size: 0.8rem;
  font-weight: bold;
}

.a-import-library-row-label-copies {
  grid-area: a-import-library-row-label-copies;
}

.a-import-library-row-label-edition {
  grid-area: a-import-library-row-label-edition;
}

.a-import-library-row-label-price {
  grid-area: a-import-library-row-label-price;
}

.a-import-library-row-label-purchase-date {
  grid-area: a-import-library-row-label-purchase-date;
}

.a-import-library-row-label-shop {
  grid-area: a-import-library-row-label-shop;
}

.a-import-library-row-label-region {
  grid-area: a-import-library-row-label-region;
}

.a-import-library-row-label-condition {
  grid-area: a-import-library-row-label-condition;
}

.a-import-library-row-label-case {
  grid-area: a-import-library-row-label-case;
}

.a-import-library-row-label-disc {
  grid-area: a-import-library-row-label-disc;
}

.a-import-library-row-label-art {
  grid-area: a-import-library-row-label-art;
}

.a-import-library-row-label-manual {
  grid-area: a-import-library-row-label-manual;
  justify-self: center;
}

.a-import-library-row-label-special {
  grid-area: a-import-library-row-label-special;
  justify-self: center;
}

.c-import-library-row-versions {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
}

.c-import-library-row-version {
  display: grid;
  grid-template-columns: 5em 10em 5em 11em 13em 5em 7em auto 2em;
  grid-template-rows: 3em;
  grid-template-areas: "a-import-library-row-copies a-import-library-row-edition a-import-library-row-price a-import-library-row-purchase-date a-import-library-row-shop a-import-library-row-region a-import-library-row-condition c-import-library-row-physical a-import-library-row-version-edit";
  grid-column-gap: 1em;
  padding-left: 0.7em;
  padding-right: 0.7em;
  font-size: 0.8rem;
  align-items: center;
}

.a-import-library-row-copies {
  grid-area: a-import-library-row-copies;
}

.a-import-library-row-edition {
  grid-area: a-import-library-row-edition;
}

.a-import-library-row-price {
  grid-area: a-import-library-row-price;
}

.a-import-library-row-purchase-date {
  grid-area: a-import-library-row-purchase-date;
}

.a-import-library-row-shop {
  grid-area: a-import-library-row-shop;
}

.a-import-library-row-region {
  grid-area: a-import-library-row-region;
}

.a-import-library-row-condition {
  grid-area: a-import-library-row-condition;
}

.c-import-library-row-physical {
  display: grid;
  grid-template-columns: 7em 6em 6em 5em 5em;
  grid-template-rows: 1fr;
  grid-template-areas: "a-import-library-row-case a-import-library-row-disc a-import-library-row-art a-import-library-row-manual a-import-library-row-special";
  grid-column-gap: 1em;
}

.a-import-library-row-case {
  grid-area: a-import-library-row-case;
}

.a-import-library-row-disc {
  grid-area: a-import-library-row-disc;
}

.a-import-library-row-art {
  grid-area: a-import-library-row-art;
}

.a-import-library-row-manual {
  grid-area: a-import-library-row-manual;
  justify-self: center;
}

.a-import-library-row-special {
  grid-area: a-import-library-row-special;
  justify-self: center;
}

.a-import-library-row-version-edit {
  grid-area: a-import-library-row-version-edit;
  justify-self: center;
}

.c-import-library-modal-edit-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto auto;
  grid-template-areas: "c-import-library-modal-edit-platform" "c-import-library-modal-edit-completion" "c-import-library-modal-edit-reviewed" "c-import-library-modal-edit-review" "a-import-library-modal-edit-submit";
}

.c-import-library-modal-edit-platform {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 3.5em 2em;
  grid-template-areas: "a-import-library-modal-edit-platform-label" "a-import-library-modal-edit-platform-input" "a-import-library-modal-edit-platform-help";
}

.a-import-library-modal-edit-platform-label {
  grid-area: a-import-library-modal-edit-platform-label;
}

.a-import-library-modal-edit-platform-input {
  grid-area: a-import-library-modal-edit-platform-input;
}

.a-import-library-modal-edit-platform-help {
  grid-area: a-import-library-modal-edit-platform-help;
  font-style: italic;
  color: #808080;
}

.c-import-library-modal-edit-completion {
  display: grid;
  grid-template-columns: 2em 18em;
  grid-template-rows: 3em;
  grid-template-areas: "a-import-library-modal-edit-completion-input a-import-library-modal-edit-completion-label";
  align-items: center;
}

.a-import-library-modal-edit-completion-input {
  grid-area: a-import-library-modal-edit-completion-input;
  font-weight: bold;
  align-self: center;
}

.a-import-library-modal-edit-completion-label {
  grid-area: a-import-library-modal-edit-completion-label;
  align-self: center;
}

.c-import-library-modal-edit-reviewed {
  display: grid;
  grid-template-columns: 2em 18em;
  grid-template-rows: 3em;
  grid-template-areas: "a-import-library-modal-edit-reviewed-input a-import-library-modal-edit-reviewed-label";
  align-items: center;
}

.a-import-library-modal-edit-reviewed-input {
  grid-area: a-import-library-modal-edit-reviewed-input;
  font-weight: bold;
  align-self: center;
}

.a-import-library-modal-edit-reviewed-label {
  grid-area: a-import-library-modal-edit-reviewed-label;
  align-self: center;
}

.c-import-library-modal-edit-review {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "c-import-library-modal-edit-score" "c-import-library-modal-edit-review";
}

.c-import-library-modal-edit-score {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em auto;
  grid-template-areas: "a-import-library-modal-edit-score-label" "c-import-library-modal-edit-score-input";
  padding-bottom: 1em;
}

.a-import-library-modal-edit-score-label {
  grid-area: a-import-library-modal-edit-score-label;
}

.c-import-library-modal-edit-score-input {
  display: grid;
  grid-template-columns: 1fr 2em;
  grid-template-rows: 1fr;
  grid-template-areas: "a-import-library-modal-edit-score-input a-import-library-modal-edit-score-preview";
}

.a-import-library-modal-edit-score-input {
  grid-area: a-import-library-modal-edit-score-input;
  align-self: center;
}

.a-import-library-modal-edit-score-preview {
  grid-area: a-import-library-modal-edit-score-preview;
  align-self: center;
}

.c-import-library-modal-edit-review-text {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 7em;
  grid-template-areas: "a-import-library-modal-edit-review-text-label" "a-import-library-modal-edit-review-text-input";
}

.a-import-library-modal-edit-review-text-label {
  grid-area: a-import-library-modal-edit-review-text-label;
}

.a-import-library-modal-edit-review-text-input {
  grid-area: a-import-library-modal-edit-review-text-input;
}

.import-exists {
  background-color: #348ebe;
}

.c-import-steam-upload {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em 2em 4em 3em auto 5em;
  grid-template-areas: "a-import-steam-upload-title" "a-import-steam-upload-profile-label" "a-import-steam-upload-profile-input" "a-import-steam-upload-profile-info" "c-import-steam-upload-profile-playtime" "a-import-steam-upload-profile-button";
}

.a-import-steam-upload-title {
  grid-area: a-import-steam-upload-title;
}

.a-import-steam-upload-profile-label {
  grid-area: a-import-steam-upload-profile-label;
}

.a-import-steam-upload-profile-input {
  grid-area: a-import-steam-upload-profile-input;
}

.a-import-steam-upload-profile-info {
  grid-area: a-import-steam-upload-profile-info;
}

.c-import-steam-upload-profile-playtime {
  display: grid;
  grid-template-columns: 2em auto;
  grid-template-rows: 3em;
  grid-template-areas: "a-import-steam-upload-profile-playtime-input a-import-steam-upload-profile-playtime-label";
}

.a-import-steam-upload-profile-playtime-input {
  grid-area: a-import-steam-upload-profile-playtime-input;
}

.a-import-steam-upload-profile-playtime-label {
  grid-area: a-import-steam-upload-profile-playtime-label;
}

.a-import-steam-upload-profile-button {
  grid-area: a-import-steam-upload-profile-button;
}

.c-import-steam-mapping {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto auto 6em 4em 4em 4em 5em 3em 3em 3em 3em auto;
  grid-template-areas: "a-import-steam-mapping-title" "c-import-steam-mapping-selects" "c-import-steam-mapping-empty-review" "a-import-steam-help" "a-import-steam-preview" "a-import-steam-validate" "a-import-steam-confirm" "a-import-steam-preview-label" "a-import-steam-preview-stats-maybe" "a-import-steam-preview-stats-found" "a-import-steam-preview-stats-not-found" "a-import-steam-preview-stats-exists" "c-import-steam-rows";
}

.a-import-steam-mapping-title {
  grid-area: a-import-steam-mapping-title;
}

.a-import-steam-help {
  grid-area: a-import-steam-help;
  font-size: 1.1rem;
}

.a-import-steam-preview {
  grid-area: a-import-steam-preview;
  align-self: center;
}

.a-import-steam-validate {
  grid-area: a-import-steam-validate;
  align-self: center;
}

.a-import-steam-confirm {
  grid-area: a-import-steam-confirm;
  align-self: center;
}

.a-import-steam-preview-label {
  grid-area: a-import-steam-preview-label;
}

.a-import-steam-preview-stats-found {
  grid-area: a-import-steam-preview-stats-found;
  font-weight: bold;
  color: #046A38;
  font-size: 1.5rem;
}

.a-import-steam-preview-stats-maybe {
  grid-area: a-import-steam-preview-stats-maybe;
  font-weight: bold;
  color: #FFB81C;
  font-size: 1.5rem;
}

.a-import-steam-preview-stats-not-found {
  grid-area: a-import-steam-preview-stats-not-found;
  font-weight: bold;
  color: #BE3A34;
  font-size: 1.5rem;
}

.a-import-steam-preview-stats-exists {
  grid-area: a-import-steam-preview-stats-exists;
  font-weight: bold;
  color: #348ebe;
  font-size: 1.5rem;
}

.c-import-steam-rows {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
}

.c-import-steam-rows {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
}

.c-import-steam-row {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto;
  grid-template-areas: "c-import-steam-row-upper" "c-import-steam-row-review" "c-import-steam-row-labels" "c-import-steam-row-versions";
  margin-top: 3em;
}

.c-import-steam-row-upper {
  display: grid;
  grid-template-columns: 1fr 11em 2em;
  grid-template-rows: 2.5em;
  grid-template-areas: "a-import-steam-row-name a-import-steam-row-platform a-import-steam-row-edit";
  padding-left: 0.7em;
  padding-right: 0.7em;
  padding-top: 0.7em;
  font-weight: bold;
}

.a-import-steam-row-name {
  grid-area: a-import-steam-row-name;
  align-self: center;
}

.a-import-steam-row-platform {
  grid-area: a-import-steam-row-platform;
  align-self: center;
  padding-right: 1em;
}

.a-import-steam-row-exists {
  grid-area: a-import-steam-row-exists;
  align-self: center;
}

.a-import-steam-row-edit {
  grid-area: a-import-steam-row-edit;
  align-self: center;
  justify-self: center;
}

.c-import-steam-row-review {
  display: grid;
  grid-template-columns: 3em 1fr;
  grid-template-rows: auto;
  grid-template-areas: "a-import-steam-row-review-score a-import-steam-row-review-review";
  margin-bottom: 1.2em;
  border-bottom: 5px solid #191919;
  padding: 0.7em;
}

.a-import-steam-row-review-score {
  grid-area: a-import-steam-row-review-score;
  align-self: center;
  justify-self: center;
  font-weight: bold;
  font-size: 1.5rem;
}

.a-import-steam-row-review-review {
  grid-area: a-import-steam-row-review-review;
  font-size: 0.7rem;
}

.c-import-steam-row-labels {
  display: grid;
  grid-template-columns: 5em 10em 5em 11em 13em 5em 7em 7em 6em 6em 5em 5em 2em;
  grid-template-rows: 2em;
  grid-template-areas: "a-import-steam-row-label-copies a-import-steam-row-label-edition a-import-steam-row-label-price a-import-steam-row-label-purchase-date a-import-steam-row-label-shop a-import-steam-row-label-region a-import-steam-row-label-condition a-import-steam-row-label-case a-import-steam-row-label-disc a-import-steam-row-label-art a-import-steam-row-label-manual a-import-steam-row-label-special .";
  grid-column-gap: 1em;
  padding-left: 0.7em;
  padding-right: 0.7em;
  font-size: 0.8rem;
  font-weight: bold;
}

.a-import-steam-row-label-copies {
  grid-area: a-import-steam-row-label-copies;
}

.a-import-steam-row-label-edition {
  grid-area: a-import-steam-row-label-edition;
}

.a-import-steam-row-label-price {
  grid-area: a-import-steam-row-label-price;
}

.a-import-steam-row-label-purchase-date {
  grid-area: a-import-steam-row-label-purchase-date;
}

.a-import-steam-row-label-shop {
  grid-area: a-import-steam-row-label-shop;
}

.a-import-steam-row-label-region {
  grid-area: a-import-steam-row-label-region;
}

.a-import-steam-row-label-condition {
  grid-area: a-import-steam-row-label-condition;
}

.a-import-steam-row-label-case {
  grid-area: a-import-steam-row-label-case;
}

.a-import-steam-row-label-disc {
  grid-area: a-import-steam-row-label-disc;
}

.a-import-steam-row-label-art {
  grid-area: a-import-steam-row-label-art;
}

.a-import-steam-row-label-manual {
  grid-area: a-import-steam-row-label-manual;
  justify-self: center;
}

.a-import-steam-row-label-special {
  grid-area: a-import-steam-row-label-special;
  justify-self: center;
}

.c-import-steam-row-versions {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
}

.c-import-steam-row-version {
  display: grid;
  grid-template-columns: 5em 10em 5em 11em 13em 5em 7em auto 2em;
  grid-template-rows: 3em;
  grid-template-areas: "a-import-steam-row-copies a-import-steam-row-edition a-import-steam-row-price a-import-steam-row-purchase-date a-import-steam-row-shop a-import-steam-row-region a-import-steam-row-condition c-import-steam-row-physical a-import-steam-row-version-edit";
  grid-column-gap: 1em;
  padding-left: 0.7em;
  padding-right: 0.7em;
  font-size: 0.8rem;
  align-items: center;
}

.a-import-steam-row-copies {
  grid-area: a-import-steam-row-copies;
}

.a-import-steam-row-edition {
  grid-area: a-import-steam-row-edition;
}

.a-import-steam-row-price {
  grid-area: a-import-steam-row-price;
}

.a-import-steam-row-purchase-date {
  grid-area: a-import-steam-row-purchase-date;
}

.a-import-steam-row-shop {
  grid-area: a-import-steam-row-shop;
}

.a-import-steam-row-region {
  grid-area: a-import-steam-row-region;
}

.a-import-steam-row-condition {
  grid-area: a-import-steam-row-condition;
}

.c-import-steam-row-physical {
  display: grid;
  grid-template-columns: 7em 6em 6em 5em 5em;
  grid-template-rows: 1fr;
  grid-template-areas: "a-import-steam-row-case a-import-steam-row-disc a-import-steam-row-art a-import-steam-row-manual a-import-steam-row-special";
  grid-column-gap: 1em;
}

.a-import-steam-row-case {
  grid-area: a-import-steam-row-case;
}

.a-import-steam-row-disc {
  grid-area: a-import-steam-row-disc;
}

.a-import-steam-row-art {
  grid-area: a-import-steam-row-art;
}

.a-import-steam-row-manual {
  grid-area: a-import-steam-row-manual;
  justify-self: center;
}

.a-import-steam-row-special {
  grid-area: a-import-steam-row-special;
  justify-self: center;
}

.a-import-steam-row-version-edit {
  grid-area: a-import-steam-row-version-edit;
  justify-self: center;
}

.c-games {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto 4em auto auto auto;
  grid-template-areas: "a-games-label" "a-games-platforms" "c-games-actions" "c-games-filters-base-name" "c-games-filters-wrapper" "c-games-wrapper";
}

.a-games-label {
  grid-area: a-games-label;
}

.a-games-platforms {
  grid-area: a-games-platforms;
  margin-bottom: 1em;
}

.c-games-actions {
  display: grid;
  grid-template-columns: 10em;
  grid-template-rows: 1fr;
  grid-template-areas: "a-games-filters";
}

.a-games-filters {
  grid-area: a-games-filters;
}

.c-games-filters-base-name {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-games-filters-base-name-label" "a-games-filters-base-name-input";
}

.a-games-filters-base-name-label {
  grid-area: a-games-filters-base-name-label;
}

.a-games-filters-base-name-input {
  grid-area: a-games-filters-base-name-input;
}

.c-games-filters-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 3em;
  grid-template-areas: "c-games-filters" "c-games-sort" "a-games-submit";
  border: 2px solid #373737;
  padding: 1em;
  margin-bottom: 2em;
}

.c-games-filters {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: ". . . .";
  column-gap: 1em;
  padding-top: 0.5em;
}

.c-games-filters-year-from {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-games-filters-year-from-label" "a-games-filters-year-from-input";
}

.a-games-filters-year-from-label {
  grid-area: a-games-filters-year-from-label;
}

.a-games-filters-year-from-input {
  grid-area: a-games-filters-year-from-input;
}

.c-games-filters-year-to {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-games-filters-year-to-label" "a-games-filters-year-to-input";
}

.a-games-filters-year-to-label {
  grid-area: a-games-filters-year-to-label;
}

.a-games-filters-year-to-input {
  grid-area: a-games-filters-year-to-input;
}

.c-games-filters-bundle {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-games-filters-bundle-label" "a-games-filters-bundle-input";
}

.a-games-filters-bundle-label {
  grid-area: a-games-filters-bundle-label;
}

.a-games-filters-bundle-input {
  grid-area: a-games-filters-bundle-input;
}

.c-games-filters-genre {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-games-filters-genre-label" "a-games-filters-genre-input";
}

.a-games-filters-genre-label {
  grid-area: a-games-filters-genre-label;
}

.a-games-filters-genre-input {
  grid-area: a-games-filters-genre-input;
}

.c-games-filters-library {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-games-filters-library-label" "a-games-filters-library-input";
}

.a-games-filters-library-label {
  grid-area: a-games-filters-library-label;
}

.a-games-filters-library-input {
  grid-area: a-games-filters-library-input;
}

.c-games-filters-score-from {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-games-filters-score-from-label" "a-games-filters-score-from-input";
}

.a-games-filters-score-from-label {
  grid-area: a-games-filters-score-from-label;
}

.a-games-filters-score-from-input {
  grid-area: a-games-filters-score-from-input;
}

.c-games-filters-score-to {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-games-filters-score-to-label" "a-games-filters-score-to-input";
}

.a-games-filters-score-to-label {
  grid-area: a-games-filters-score-to-label;
}

.a-games-filters-score-to-input {
  grid-area: a-games-filters-score-to-input;
}

.c-games-sort {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: "c-games-sort-column c-games-sort-direction";
  column-gap: 1em;
  padding-bottom: 1em;
}

.c-games-sort-column {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-games-sort-column-label" "a-games-sort-column-input";
}

.a-games-sort-column-label {
  grid-area: a-games-sort-column-label;
}

.a-games-sort-column-input {
  grid-area: a-games-sort-column-input;
}

.c-games-sort-direction {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-games-sort-direction-label" "a-games-sort-direction-input";
}

.a-games-sort-direction-label {
  grid-area: a-games-sort-direction-label;
}

.a-games-sort-direction-input {
  grid-area: a-games-sort-direction-input;
}

.a-games-submit {
  grid-area: a-games-submit;
}

.c-games-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-auto-flow: row;
  grid-template-areas: ".";
  align-items: center;
  justify-self: center;
  grid-gap: 1em;
  min-width: 750px;
  padding-bottom: 1em;
}

.c-games-game {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 13.2em;
  grid-template-areas: "a-games-game-cover";
}

.a-games-game-cover {
  grid-area: a-games-game-cover;
  align-self: center;
  justify-self: center;
}

.game-cover-games {
  width: 150px;
  height: 200px;
}

@media only screen and (max-width: 1000px) {
  .c-games-wrapper {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    min-width: 600px;
  }
}
@media only screen and (max-width: 670px) {
  .c-games-wrapper {
    grid-template-columns: 1fr 1fr;
    min-width: 300px;
  }
  .c-games-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: ". .";
    column-gap: 1em;
    padding-top: 0.5em;
  }
}
.c-game-page {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 7em 33em auto auto;
  grid-template-areas: "a-game-name" "a-game-cover" "c-game-platforms" "c-game-reviews";
}

.a-game-name {
  grid-area: a-game-name;
}

.a-game-cover {
  grid-area: a-game-cover;
  border-bottom: 1px solid #6d6d6d;
}

.c-game-platforms-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3em auto;
  grid-template-areas: "a-game-platform-header" "c-game-platforms";
  padding-top: 1em;
  border-bottom: 1px solid #6d6d6d;
  padding-bottom: 1em;
}

.a-game-platform-header {
  grid-area: a-game-platform-header;
}

.c-game-platforms {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
}

.c-game-platform {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto;
  grid-template-areas: "c-game-platform-info c-game-platform-actions";
}

.c-game-platform-info {
  display: grid;
  grid-template-columns: 8em 8em 5em auto;
  grid-template-rows: 3.5em;
  grid-template-areas: "a-game-platform-platform a-game-platform-release a-game-platform-rating a-game-platform-players";
  justify-self: start;
}

.a-game-platform-platform {
  grid-area: a-game-platform-platform;
  align-self: center;
}

.a-game-platform-release {
  grid-area: a-game-platform-release;
  align-self: center;
}

.a-game-platform-rating {
  grid-area: a-game-platform-rating;
  align-self: center;
  font-weight: bold;
}

.c-game-platform-players {
  display: grid;
  grid-template-columns: 2.5em 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "a-game-platform-players-icon a-game-platform-players";
}

.a-game-platform-players-icon {
  grid-area: a-game-platform-players-icon;
  align-self: center;
}

.a-game-platform-players {
  grid-area: a-game-platform-players;
  align-self: center;
  font-weight: bold;
}

.c-game-platform-actions {
  display: grid;
  grid-template-columns: 11em 11em 10em;
  grid-template-rows: 3.5em;
  grid-template-areas: "a-game-platform-library a-game-platform-top a-game-platform-wishlist";
  justify-self: end;
}

.a-game-platform-library {
  grid-area: a-game-platform-library;
  align-self: center;
  padding-right: 1em;
}

.a-game-platform-top {
  grid-area: a-game-platform-top;
  align-self: center;
  padding-right: 1em;
}

.a-game-platform-wishlist {
  grid-area: a-game-platform-wishlist;
  align-self: center;
}

.c-game-reviews-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3em auto auto;
  grid-template-areas: "a-game-review-header" "c-game-review-filters" "c-game-reviews";
  padding-top: 1em;
}

.a-game-review-header {
  grid-area: a-game-review-header;
}

.c-game-review-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: "c-game-review-user c-game-review-sort";
  grid-column-gap: 2em;
  padding-top: 1em;
}

.c-game-review-filter-user {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-game-review-filter-user-label" "a-game-review-filter-user-input";
}

.a-game-review-filter-user-label {
  grid-area: a-game-review-filter-user-label;
}

.a-game-review-filter-user-input {
  grid-area: a-game-review-filter-user-input;
}

.c-game-review-sort {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 4em;
  grid-template-areas: "a-game-review-sort-label" "a-game-review-sort-input";
}

.a-game-review-sort-label {
  grid-area: a-game-review-sort-label;
}

.a-game-review-sort-input {
  grid-area: a-game-review-sort-input;
}

.c-game-reviews {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
}

.c-game-review {
  display: grid;
  grid-template-columns: 14em 1fr;
  grid-template-rows: auto;
  grid-template-areas: "c-game-review-user c-game-review-main";
  border-bottom: 1px solid #373737;
  margin-bottom: 0.5em;
  padding-bottom: 1.5em;
}

.c-game-review-user {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3em 1fr;
  grid-template-areas: "a-game-review-user-name" "a-game-review-user-image";
}

.a-game-review-user-name {
  grid-area: a-game-review-user-name;
  align-self: center;
  font-weight: bold;
  color: #f7f7f7;
}
.a-game-review-user-name :link {
  transition: 300ms;
  color: #f7f7f7;
  text-decoration: none;
}
.a-game-review-user-name :visited {
  color: #f7f7f7;
  text-decoration: none;
}
.a-game-review-user-name :hover {
  color: #D9A036;
  text-decoration: none;
}
.a-game-review-user-name :active {
  text-decoration: none;
}

.a-game-review-user-image {
  grid-area: a-game-review-user-image;
}

.c-game-review-main {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 4em auto;
  grid-template-areas: "c-game-review-platform" "a-game-review-text";
}

.c-game-review-platform {
  display: grid;
  grid-template-columns: 6em 4em 1.5em 1fr;
  grid-template-rows: 3em;
  grid-template-areas: "a-game-review-platform a-game-review-rating a-game-review-like a-game-review-like-count";
}

.a-game-review-platform {
  grid-area: a-game-review-platform;
  align-self: center;
}

.a-game-review-rating {
  grid-area: a-game-review-rating;
  align-self: center;
  font-size: 1.8rem;
}

.a-game-review-like {
  grid-area: a-game-review-like;
  align-self: center;
}

.a-game-review-like-count {
  grid-area: a-game-review-like-count;
  align-self: center;
}

.a-game-review-text {
  grid-area: a-game-review-text;
}

.game-page-cover {
  height: 500px;
}

@media only screen and (max-width: 1000px) {
  .c-game-platform {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: "c-game-platform-info" "c-game-platform-actions";
    padding-top: 1em;
  }
  .c-game-platform-actions {
    justify-self: start;
  }
}
@media only screen and (max-width: 670px) {
  .a-game-platform-library {
    padding-right: 0.5em;
  }
  .a-game-platform-top {
    padding-right: 0.5em;
  }
  .c-game-platform-actions {
    grid-template-columns: 12em 11em 14em;
    font-size: 0.7rem;
  }
}
.c-report-bug {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto 5em;
  grid-template-areas: "a-report-bug-label" "c-report-bug-input" "a-report-bug-submit";
}

.a-report-bug-label {
  grid-area: a-report-bug-label;
}

.c-report-bug-input {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3em 13em;
  grid-template-areas: "a-report-bug-label" "a-report-bug-input";
}

.a-report-bug-label {
  grid-area: a-report-bug-label;
}

.a-report-bug-input {
  grid-area: a-report-bug-input;
}

.a-report-bug-input {
  grid-area: a-report-bug-input;
}

.a-report-bug-submit {
  grid-area: a-report-bug-submit;
}

body {
  color: #f7f7f7;
  margin: 0;
}

html {
  background-color: #191919;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  overflow-y: scroll;
}

textarea {
  resize: none;
}

img {
  vertical-align: bottom;
}

p {
  line-height: 1.5em;
}

::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

.c-layout {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 81em 1fr;
  grid-template-rows: 5em 1fr 3em;
  grid-template-areas: "a-empty-header-1 c-navigation a-empty-header-2" "a-empty-output-1 a-output a-empty-output-2" "a-empty-footer-1 c-footer a-empty-footer-2";
}

.c-navigation {
  border-bottom: 1px solid #9A9A9A;
  background-color: #191919;
  display: grid;
  grid-template-columns: 0.8fr 0.8fr 0.8fr 0.8fr 0.8fr 1.5fr;
  grid-template-rows: 1fr;
  grid-template-areas: "nav-logo nav-library nav-stats nav-games nav-users nav-profile";
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.c-navigation-logout {
  border-bottom: 1px solid #9A9A9A;
  background-color: #191919;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "nav-logo nav-games nav-users nav-login";
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.nav-link a {
  font-size: 1.5rem;
  text-decoration: none;
  color: #f7f7f7;
}
.nav-link a:hover {
  color: #D9A036;
}

.nav-logo {
  justify-self: start;
  align-self: center;
  grid-area: nav-logo;
}
.nav-logo a {
  font-size: 2.5rem;
  text-decoration: none;
  color: #f7f7f7;
}
.nav-logo a:hover {
  color: #f7f7f7;
}

.nav-library {
  justify-self: center;
  align-self: center;
  grid-area: nav-library;
}

.nav-stats {
  justify-self: center;
  align-self: center;
  grid-area: nav-stats;
}

.nav-games {
  justify-self: center;
  align-self: center;
  grid-area: nav-games;
}

.nav-users {
  justify-self: center;
  align-self: center;
  grid-area: nav-users;
}

.nav-profile {
  justify-self: center;
  align-self: center;
  grid-area: nav-profile;
  font-size: 1.5rem;
}

.c-nav-profile {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr;
  grid-template-areas: "a-nav-profile a-nav-profile-notification";
}

.a-nav-profile {
  grid-area: a-nav-profile;
  align-self: center;
  padding-right: 0.3em;
}
.a-nav-profile:hover {
  color: #D9A036;
  cursor: pointer;
}

.a-nav-profile-notification {
  grid-area: a-nav-profile-notification;
  align-self: center;
  padding-top: 0.3em;
}

.nav-notifications {
  justify-self: center;
  align-self: center;
  grid-area: nav-notifications;
  display: none;
}

.nav-settings {
  justify-self: center;
  align-self: center;
  grid-area: nav-settings;
  display: none;
}

.nav-logout {
  justify-self: center;
  align-self: center;
  grid-area: nav-logout;
  display: none;
}

.nav-login {
  justify-self: end;
  align-self: center;
  grid-area: nav-login;
}

.a-empty-header-1 {
  background-color: #191919;
  grid-area: a-empty-header-1;
}

.a-empty-header-2 {
  background-color: #191919;
  grid-area: a-empty-header-2;
}

.a-output {
  grid-area: a-output;
  padding-bottom: 3em;
}

.a-empty-output-1 {
  background-color: #191919;
  grid-area: a-empty-output-1;
}

.a-empty-output-2 {
  background-color: #191919;
  grid-area: a-empty-output-2;
}

.c-footer {
  border-top: 1px solid #373737;
  display: grid;
  background-color: #191919;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "a-footer-privacy a-footer-report a-footer-copyright";
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.a-empty-footer-1 {
  background-color: #191919;
  grid-area: a-empty-footer-1;
}

.a-empty-footer-2 {
  background-color: #191919;
  grid-area: a-empty-footer-2;
}

.a-footer-copyright {
  color: #AAAAAA;
  justify-self: end;
  align-self: center;
  grid-area: a-footer-copyright;
  font-size: 0.8rem;
}

.a-footer-privacy {
  color: #AAAAAA;
  justify-self: start;
  align-self: center;
  grid-area: a-footer-privacy;
}

.a-footer-report {
  color: #AAAAAA;
  justify-self: start;
  align-self: center;
  grid-area: a-footer-report;
}

.nav-expand-open {
  display: none;
  grid-area: nav-expand-open;
  justify-self: center;
  align-self: center;
}
.nav-expand-open:hover {
  color: #D9A036;
  cursor: pointer;
}

.nav-expand-close {
  display: none;
  grid-area: nav-expand-close;
  justify-self: center;
  align-self: center;
}
.nav-expand-close:hover {
  color: #D9A036;
  cursor: pointer;
}

.completion-none {
  border-right: 3px solid #656366;
  border-left: 3px solid #656366;
}

.completion-any {
  border-right: 3px solid #1daf2c;
  border-left: 3px solid #1daf2c;
}

.completion-hundred {
  border-right: 3px solid #029ed2;
  border-left: 3px solid #029ed2;
}

.completion-platinum {
  border-right: 3px solid #ffa500;
  border-left: 3px solid #ffa500;
}

.completion-text-none {
  color: #656366;
}

.completion-text-any {
  color: #1daf2c;
}

.completion-text-hundred {
  color: #029ed2;
}

.completion-text-platinum {
  color: #ffa500;
}

.input-dropdown {
  font-size: 1rem;
  color: #d7d7d7;
  border-bottom: #4b4b4b solid 2px;
  border-top: none;
  border-left: none;
  border-right: none;
  background-color: #191919;
  width: 100%;
  height: 2.5em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0.5em;
  outline: none;
}
.input-dropdown:focus {
  border-bottom: #d7d7d7 solid 2px;
}

.input-dropdown-modal {
  font-size: 1rem;
  color: #d7d7d7;
  border-bottom: #4b4b4b solid 2px;
  border-top: none;
  border-left: none;
  border-right: none;
  background-color: #373737;
  width: 100%;
  height: 2.5em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0.5em;
  outline: none;
}
.input-dropdown-modal:focus {
  border-bottom: #d7d7d7 solid 2px;
}

.input-text {
  margin-bottom: 1em;
  font-size: 1rem;
  color: #d7d7d7;
  border-bottom: #4b4b4b solid 2px;
  border-top: none;
  border-left: none;
  border-right: none;
  background-color: #191919;
  width: 100%;
  height: 2.5em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0.5em;
  outline: none;
}
.input-text:focus {
  border-bottom: #d7d7d7 solid 2px;
}

.input-text-modal {
  margin-bottom: 1em;
  font-size: 1rem;
  color: #d7d7d7;
  border-bottom: #4b4b4b solid 2px;
  border-top: none;
  border-left: none;
  border-right: none;
  background-color: #373737;
  width: 100%;
  height: 2.5em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0.5em;
  outline: none;
}
.input-text-modal:focus {
  border-bottom: #d7d7d7 solid 2px;
}

.action-icon {
  transition: 200ms;
}

.action-icon:hover {
  color: #D9A036;
  cursor: pointer;
}

.action-icon-active {
  color: #D9A036 !important;
}
.action-icon-active:hover {
  cursor: pointer;
  color: #8C6723;
}

.input-range {
  width: 95%;
}

.alert {
  display: none;
  position: fixed;
  right: 2em;
  color: #fff;
  padding-top: 1em;
  padding-bottom: 1em;
  padding-left: 4em;
  padding-right: 4em;
  border-radius: 0.3em;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  font-size: 1rem;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.5s, bottom 0.5s;
  text-align: center;
}
.alert.show {
  display: block;
  opacity: 1;
  bottom: 4em;
}
.alert.hide {
  opacity: 0;
  bottom: 20px;
}

.alert-success {
  background-color: #018d01;
}

.alert-error {
  background-color: #bd1200;
}

.no-wrap {
  white-space: nowrap;
}

.new-notifications-icon {
  color: #018d01;
  padding-left: 0.3em;
}

.loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  border: 10px solid #f7f7f7;
  border-radius: 50%;
  border-top: 10px solid #D9A036;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.c-nav-dropdown-content {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2em 2em 2em;
  grid-template-areas: "c-nav-dropdown-notifications" "a-nav-dropdown-settings" "a-nav-dropdown-logout";
  margin-top: 1em;
  margin-left: 3em;
  color: #f7f7f7;
  border: #8C6723 solid 1px;
  position: absolute;
  background-color: #404040;
  z-index: 1;
  padding: 0.7em;
  padding-left: 1em;
  padding-right: 1em;
}

.c-nav-dropdown-notifications {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr;
  grid-template-areas: "a-nav-dropdown-notifications-title a-nav-dropdown-notifications-icon";
}

.a-nav-dropdown-notifications-title {
  grid-area: a-nav-dropdown-notifications-title;
  align-self: center;
  justify-self: center;
}

.a-nav-dropdown-notifications-icon {
  grid-area: a-nav-dropdown-notifications-icon;
  align-self: center;
  padding-top: 0.3em;
  justify-self: center;
}

.a-nav-dropdown-settings {
  grid-area: a-nav-dropdown-settings;
  align-self: center;
  justify-self: center;
}

.a-nav-dropdown-logout {
  grid-area: a-nav-dropdown-logout;
  align-self: center;
  justify-self: center;
}

.nav-link-white {
  grid-area: nav-link-white;
  color: #f7f7f7;
  text-decoration: none;
}
.nav-link-white:hover {
  color: #D9A036;
}

.refresh-button {
  padding: 0.5em;
  border: none;
  background-color: #D9A036;
  color: white;
  position: fixed;
  bottom: 110px;
  right: 30px;
  z-index: 99;
  font-size: 18.5px;
  cursor: pointer;
}
.refresh-button:hover {
  background-color: #555;
}

.top-button {
  padding: 0.5em;
  border: none;
  background-color: #D9A036;
  color: white;
  position: fixed;
  bottom: 65px;
  right: 30px;
  z-index: 99;
  cursor: pointer;
}
.top-button:hover {
  background-color: #555;
}

.bottom-button {
  padding: 0.5em;
  border: none;
  background-color: #D9A036;
  color: white;
  position: fixed;
  bottom: 10px;
  right: 30px;
  z-index: 99;
  cursor: pointer;
}
.bottom-button:hover {
  background-color: #555;
}

.help-button {
  padding: 0.5em;
  border: none;
  background-color: #D9A036;
  color: white;
  position: fixed;
  bottom: 140px;
  right: 30px;
  z-index: 99;
  cursor: pointer;
}
.help-button:hover {
  background-color: #555;
}

.common-buttons-block button {
  background-color: transparent;
  background-repeat: no-repeat;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 2px #a1a1a1 solid;
  transition: 300ms;
  color: #a1a1a1;
  padding: 0.5em;
  font-size: 1.5rem;
  cursor: pointer;
  float: left;
  text-decoration: none;
  display: inline-block;
}
.common-buttons-block a {
  background-color: transparent;
  background-repeat: no-repeat;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 2px #a1a1a1 solid;
  transition: 300ms;
  color: #a1a1a1;
  padding: 0.5em;
  font-size: 1.5rem;
  cursor: pointer;
  float: left;
  text-decoration: none;
  display: inline-block;
}

.common-buttons-block-active {
  border-bottom: 2px solid #D9A036 !important;
  color: #D9A036 !important;
}

.platforms-switch button {
  background-color: #191919;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 2px solid #191919;
  color: white;
  padding-top: 0.8em;
  padding-bottom: 0.8em;
  cursor: pointer;
  float: left;
  width: 7em;
  font-size: 1rem;
  transition: 200ms;
  margin-bottom: 0.3em;
}
.platforms-switch button:hover {
  background-color: #313131;
}

.platforms-switch-modal button {
  background-color: #2b2b2b;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 2px solid #191919;
  color: white;
  padding-top: 0.8em;
  padding-bottom: 0.8em;
  cursor: pointer;
  float: left;
  width: 7em;
  font-size: 1rem;
  transition: 200ms;
  margin-bottom: 0.3em;
}
.platforms-switch-modal button:hover {
  background-color: #313131;
}

.message-page {
  padding-top: 2em;
  color: #D9A036;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}

.icon-inactive {
  color: #505050;
}

.slide-window {
  padding: 0.8em;
  border: 2px solid #6e6e6e;
  background-color: #444444;
  color: white;
  position: fixed;
  bottom: 10px;
  right: 80px;
  z-index: 99;
  font-size: 20px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 4px 18px 0 rgba(0, 0, 0, 0.19);
}

.icon-padding {
  padding-top: 0.2em;
}

@media only screen and (max-width: 1300px) {
  .c-layout {
    grid-template-columns: 1fr 61em 1fr;
  }
  .nav-expand-open {
    display: none;
  }
  .c-nav-profile {
    font-size: 1.3rem;
  }
  .c-nav-dropdown-content {
    margin-left: 2em;
  }
}
@media only screen and (max-width: 1000px) {
  .c-layout {
    grid-template-columns: 1fr 41em 1fr;
  }
  .nav-link a {
    font-size: 1rem;
  }
  .nav-logo {
    justify-self: start;
    align-self: center;
    grid-area: nav-logo;
  }
  .nav-logo a {
    font-size: 2rem;
  }
  .nav-logo a:hover {
    color: #f7f7f7;
  }
  .nav-expand-open {
    display: none;
  }
  .c-nav-profile {
    font-size: 0.8rem;
  }
  .c-nav-dropdown-content {
    margin-left: -2em;
  }
}
@media only screen and (max-width: 670px) {
  .c-layout {
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 5em 1fr 3em;
    transition: 300ms;
  }
  .c-layout .c-navigation {
    border-bottom: 1px solid #9A9A9A;
    background-color: #191919;
    display: grid;
    grid-template-columns: auto 3em;
    grid-template-rows: 5em;
    grid-template-areas: "nav-logo nav-expand-open";
  }
  .c-layout .c-navigation-logout {
    border-bottom: 1px solid #9A9A9A;
    background-color: #191919;
    display: grid;
    grid-template-columns: auto 3em;
    grid-template-rows: 5em;
    grid-template-areas: "nav-logo nav-expand-open";
  }
  .c-layout .nav-library {
    display: none;
  }
  .c-layout .nav-login {
    display: none;
  }
  .c-layout .nav-stats {
    display: none;
  }
  .c-layout .nav-games {
    display: none;
  }
  .c-layout .nav-users {
    display: none;
  }
  .c-layout .nav-profile {
    display: none;
  }
  .c-layout .nav-expand-open {
    display: block;
  }
  .c-layout .nav-expand-close {
    display: none;
  }
  .c-layout-expanded {
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 27em 1fr;
    grid-template-rows: 27em 1fr 3em;
    grid-template-areas: "a-empty-header-1 c-navigation a-empty-header-2" "a-empty-output-1 a-output a-empty-output-2" "a-empty-footer-1 c-footer a-empty-footer-2";
    transition: 300ms;
  }
  .c-layout-expanded .c-navigation {
    border-bottom: 1px solid #9A9A9A;
    background-color: #191919;
    display: grid;
    grid-template-columns: 1fr 3em;
    grid-template-rows: 5em 3em 3em 3em 3em 3em 3em 3em;
    grid-template-areas: "nav-logo nav-expand-close" "nav-library ." "nav-stats ." "nav-games ." "nav-users ." "nav-notifications ." "nav-settings ." "nav-logout .";
  }
  .c-layout-expanded .c-navigation-logout {
    border-bottom: 1px solid #9A9A9A;
    background-color: #191919;
    display: grid;
    grid-template-columns: 1fr 3em;
    grid-template-rows: 5em 3em 3em 3em;
    grid-template-areas: "nav-logo nav-expand-close" "nav-users ." "nav-login ." "nav-games .";
  }
  .c-layout-expanded .nav-logo {
    justify-self: center;
    padding-left: 3em;
  }
  .c-layout-expanded .nav-logo a {
    font-size: 2.5rem;
  }
  .c-layout-expanded .nav-expand-open {
    display: none;
  }
  .c-layout-expanded .nav-expand-close {
    display: block;
  }
  .c-layout-expanded .nav-link a {
    font-size: 1.5rem;
  }
  .c-layout-expanded .nav-library {
    padding-left: 3em;
    display: block;
  }
  .c-layout-expanded .nav-stats {
    padding-left: 3em;
    display: block;
  }
  .c-layout-expanded .nav-games {
    padding-left: 3em;
    display: block;
  }
  .c-layout-expanded .nav-users {
    padding-left: 3em;
    display: block;
  }
  .c-layout-expanded .nav-profile {
    display: none;
  }
  .c-layout-expanded .nav-notifications {
    padding-left: 3em;
    display: block;
  }
  .c-layout-expanded .nav-settings {
    padding-left: 3em;
    display: block;
  }
  .c-layout-expanded .nav-logout {
    padding-left: 3em;
    display: block;
  }
  .c-layout-expanded .nav-login {
    padding-left: 3em;
    display: block;
    justify-self: center;
  }
  .nav-profile {
    display: none;
  }
  .a-output {
    padding-left: 1em;
    padding-right: 1em;
  }
}

/*# sourceMappingURL=app.css.map */