.svg-icon-bg.tile {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M13 6C13 4.89543 13.8954 4 15 4H18C19.1046 4 20 4.89543 20 6V9C20 10.1046 19.1046 11 18 11H15C13.8954 11 13 10.1046 13 9V6ZM18 6H15V9H18V6ZM6 13C4.89543 13 4 13.8954 4 15V18C4 19.1046 4.89543 20 6 20H9C10.1046 20 11 19.1046 11 18V15C11 13.8954 10.1046 13 9 13H6ZM6 15H9V18H6V15ZM15 13C13.8954 13 13 13.8954 13 15V18C13 19.1046 13.8954 20 15 20H18C19.1046 20 20 19.1046 20 18V15C20 13.8954 19.1046 13 18 13H15ZM15 15H18V18H15V15ZM6 4C4.89543 4 4 4.89543 4 6V9C4 10.1046 4.89543 11 6 11H9C10.1046 11 11 10.1046 11 9V6C11 4.89543 10.1046 4 9 4H6ZM6 6H9V9H6V6Z' fill='%23000000'/%3e%3c/svg%3e");}
.svg-icon-bg.list {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='%23000000'%3e%3cg id='SVGRepo_bgCarrier' stroke-width='0'/%3e%3cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'/%3e%3cg id='SVGRepo_iconCarrier'%3e%3ctitle%3elist_check_3_line%3c/title%3e%3cg id='页面-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e%3cg id='Editor' transform='translate(-48.000000, -192.000000)'%3e%3cg id='list_check_3_line' transform='translate(48.000000, 192.000000)'%3e%3cpath d='M24,0 L24,24 L0,24 L0,0 L24,0 Z M12.5934901,23.257841 L12.5819402,23.2595131 L12.5108777,23.2950439 L12.4918791,23.2987469 L12.4918791,23.2987469 L12.4767152,23.2950439 L12.4056548,23.2595131 C12.3958229,23.2563662 12.3870493,23.2590235 12.3821421,23.2649074 L12.3780323,23.275831 L12.360941,23.7031097 L12.3658947,23.7234994 L12.3769048,23.7357139 L12.4804777,23.8096931 L12.4953491,23.8136134 L12.4953491,23.8136134 L12.5071152,23.8096931 L12.6106902,23.7357139 L12.6232938,23.7196733 L12.6232938,23.7196733 L12.6266527,23.7031097 L12.609561,23.275831 C12.6075724,23.2657013 12.6010112,23.2592993 12.5934901,23.257841 L12.5934901,23.257841 Z M12.8583906,23.1452862 L12.8445485,23.1473072 L12.6598443,23.2396597 L12.6498822,23.2499052 L12.6498822,23.2499052 L12.6471943,23.2611114 L12.6650943,23.6906389 L12.6699349,23.7034178 L12.6699349,23.7034178 L12.678386,23.7104931 L12.8793402,23.8032389 C12.8914285,23.8068999 12.9022333,23.8029875 12.9078286,23.7952264 L12.9118235,23.7811639 L12.8776777,23.1665331 C12.8752882,23.1545897 12.8674102,23.1470016 12.8583906,23.1452862 L12.8583906,23.1452862 Z M12.1430473,23.1473072 C12.1332178,23.1423925 12.1221763,23.1452606 12.1156365,23.1525954 L12.1099173,23.1665331 L12.0757714,23.7811639 C12.0751323,23.7926639 12.0828099,23.8018602 12.0926481,23.8045676 L12.108256,23.8032389 L12.3092106,23.7104931 L12.3186497,23.7024347 L12.3186497,23.7024347 L12.3225043,23.6906389 L12.340401,23.2611114 L12.337245,23.2485176 L12.337245,23.2485176 L12.3277531,23.2396597 L12.1430473,23.1473072 Z' id='MingCute' fill-rule='nonzero'%3e%3c/path%3e%3cpath d='M7,13 C8.05436227,13 8.91816517,13.81585 8.99451427,14.8507339 L9,15 L9,18 C9,19.0543909 8.18412267,19.9181678 7.14926241,19.9945144 L7,20 L4,20 C2.94563773,20 2.08183483,19.18415 2.00548573,18.1492661 L2,18 L2,15 C2,13.9456091 2.81587733,13.0818322 3.85073759,13.0054856 L4,13 L7,13 Z M16,17 C16.5523,17 17,17.4477 17,18 C17,18.51285 16.613973,18.9355092 16.1166239,18.9932725 L16,19 L12,19 C11.4477,19 11,18.5523 11,18 C11,17.48715 11.386027,17.0644908 11.8833761,17.0067275 L12,17 L16,17 Z M7,15 L4,15 L4,18 L7,18 L7,15 Z M20,13 C20.5523,13 21,13.4477 21,14 C21,14.5523 20.5523,15 20,15 L12,15 C11.4477,15 11,14.5523 11,14 C11,13.4477 11.4477,13 12,13 L20,13 Z M7,3 C8.10457,3 9,3.89543 9,5 L9,8 C9,9.10457 8.10457,10 7,10 L4,10 C2.89543,10 2,9.10457 2,8 L2,5 C2,3.89543 2.89543,3 4,3 L7,3 Z M16,7 C16.5523,7 17,7.44772 17,8 C17,8.51283143 16.613973,8.93550653 16.1166239,8.9932722 L16,9 L12,9 C11.4477,9 11,8.55228 11,8 C11,7.48716857 11.386027,7.06449347 11.8833761,7.0067278 L12,7 L16,7 Z M7,5 L4,5 L4,8 L7,8 L7,5 Z M20,3 C20.5523,3 21,3.44772 21,4 C21,4.51283143 20.613973,4.93550653 20.1166239,4.9932722 L20,5 L12,5 C11.4477,5 11,4.55228 11,4 C11,3.48716857 11.386027,3.06449347 11.8833761,3.0067278 L12,3 L20,3 Z'  fill='%23000000'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
}
.content_aside-container {
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 30px;
}
.content_aside-container .content-column {
  padding: 0;
  flex-basis: 100%;
}
.content_aside-container .page-aside {
  flex-basis: 254px;
}

.games-catalogue-title {
  margin: 0 0 26px;
  font-size: clamp(2.5rem, 2.5vw, 3.6rem);
}
.games-catalogue-title a  {
  text-decoration: underline;
}
.games-catalogue-setting-panel {
  margin: 0 0 10px 0;
    & .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
}
/*
ФИЛЬТРЫ
*/
.mobile-filter-ctrl {
    display: none;
}
.games-catalogue .filter-block {
  font-size: 1.4rem;
  background-color: var(--bg-card);
  margin: 0 0 20px 0;
  padding: 15px 8px 15px 15px;
  & .filter-items-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 280px;
    overflow: auto;
    overscroll-behavior: none;
    &.special {
      max-height: none;
      display: flex;
      gap: 100px;
      & > div {
        background-color: var(--bg-card);
        padding: 20px 20px 10px;
        margin: 0 0 20px 0;
      }
    }
    & a {
      display: block;
      padding: 5px 10px;
      margin: 0 5px 0 0;
      white-space: nowrap;
      &:hover {
        background-color: var(--bg-content-highlite);
      }
    }
  }
  & .filter-items-list.multiple-select {
    & a {
      padding-left: 25px;
      position: relative;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='16px' height='16px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg stroke-linecap='round' stroke-linejoin='round'%3e%3c/g%3e%3cg %3e%3cg %3e%3cpath d='M4 7.2002V16.8002C4 17.9203 4 18.4801 4.21799 18.9079C4.40973 19.2842 4.71547 19.5905 5.0918 19.7822C5.5192 20 6.07899 20 7.19691 20H16.8031C17.921 20 18.48 20 18.9074 19.7822C19.2837 19.5905 19.5905 19.2842 19.7822 18.9079C20 18.4805 20 17.9215 20 16.8036V7.19691C20 6.07899 20 5.5192 19.7822 5.0918C19.5905 4.71547 19.2837 4.40973 18.9074 4.21799C18.4796 4 17.9203 4 16.8002 4H7.2002C6.08009 4 5.51962 4 5.0918 4.21799C4.71547 4.40973 4.40973 4.71547 4.21799 5.0918C4 5.51962 4 6.08009 4 7.2002Z' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: 5px center;
      &.active {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='16px' height='16px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='SVGRepo_bgCarrier' stroke-width='0'%3e%3c/g%3e%3cg stroke-linecap='round' stroke-linejoin='round'%3e%3c/g%3e%3cg %3e%3cg %3e%3cpath d='M8 12L11 15L16 9M4 16.8002V7.2002C4 6.08009 4 5.51962 4.21799 5.0918C4.40973 4.71547 4.71547 4.40973 5.0918 4.21799C5.51962 4 6.08009 4 7.2002 4H16.8002C17.9203 4 18.4796 4 18.9074 4.21799C19.2837 4.40973 19.5905 4.71547 19.7822 5.0918C20 5.5192 20 6.07899 20 7.19691V16.8036C20 17.9215 20 18.4805 19.7822 18.9079C19.5905 19.2842 19.2837 19.5905 18.9074 19.7822C18.48 20 17.921 20 16.8031 20H7.19691C6.07899 20 5.5192 20 5.0918 19.7822C4.71547 19.5905 4.40973 19.2842 4.21799 18.9079C4 18.4801 4 17.9203 4 16.8002Z' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
      }
      &.spinner::after{
          content: '\e649';
          font-family: "icomoon";
          font-size: medium;
          display: block;
          animation: anim-rotate 1s infinite linear;
          color: #6c6c6c;
          position: absolute;
          top: 50%;
          right: 10px;
          margin: -10px 0 0 0;
      }
    }
    & + .btn-primary {
      color: #fff
    }
  }
  & .btn {
      margin: 10px 0 0 0;
      &.btn-close {
        display: none;
      }
    }
  & .dropdown-menu .active {
      box-shadow: none;
      background-color: #3a92f5;
      color: #fff
    }
}

.filter-header {
  font-size: 1.6rem;
  margin: 0 0 10px 10px;
  text-transform: uppercase;
}
.game-filter-modal {
  & .modal-content {
    padding: 50px;
    & .btn {
      background-color: #3a92f5;
      color: #fff;
      display: block;
      margin-inline: auto;
      padding: 10px 50px;
      &[disabled] {
        opacity: 0.4;
        background-color: #ccc;
        color: #424242;
      }
    }
  }
  & .close {
    position: absolute;
    top: 20px;
    right: 20px
  }
}
.time-filter-years {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  max-width: 300px;
}
.time-filter-months {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  max-width: 300px;
}
.time-filter-months.disabled {
  display: none;
}

.time-filter .item {
  padding: 5px;
  cursor: pointer;
  text-align: center;
  color: var(--text-primary);
  flex-basis: calc((100% / 5) - 5px);
  &:hover {
    background-color: var(--bg-accent);
  }
  &.active {
    background-color: #3a92f5;
    color: #fff;
  }
  &.checked {
    background-color: var(--bg-accent);
  }
  &.highlighted {
    background-color: var(--bg-accent);
  }
}

.time-filter-years,
.time-filter-months {
  margin: 20px 0;
}
.time-filter-months .item {
  font-weight: normal;
  flex-basis: calc((100% / 4) - 5px);
}
.time-filter-months .item.disabled {
  cursor: default;
  color: #ccc;
}
.time-filter .btn {
  font-weight: bold;
}
.filter-block .active {
  box-shadow: none;
  background-color: var(--bg-accent);
  font-weight: bold;
  color: var(--text-primary)
}
@supports not selector(::-webkit-scrollbar) {
  .filter-items-list, 
  .time-filter-years, 
  .time-filter-months  {
    scrollbar-width: thin;
    scrollbar-color: #858585 var(--bg-accent);
  }
}
.filter-items-list::-webkit-scrollbar, 
.time-filter-years::-webkit-scrollbar, 
.time-filter-months::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}
.filter-items-list::-webkit-scrollbar-track, 
.time-filter-years::-webkit-scrollbar-track, 
.time-filter-months::-webkit-scrollbar-track  {
  border-radius: 4px;
  background-color: var(--bg-accent);
}
.filter-items-list::-webkit-scrollbar-track:hover, 
.time-filter-years::-webkit-scrollbar-track:hover, 
.time-filter-months::-webkit-scrollbar-track:hover {
  background-color: #EFEFEF;
}
.filter-items-list::-webkit-scrollbar-track:active, 
.time-filter-years::-webkit-scrollbar-track:active, 
.time-filter-months::-webkit-scrollbar-track:active {
  background-color: #D7D7D7;
}
.filter-items-list::-webkit-scrollbar-thumb, 
.time-filter-years::-webkit-scrollbar-thumb, 
.time-filter-months::-webkit-scrollbar-thumb  {
  border-radius: 5px;
  background-color: #b6b6b6;
}
.filter-items-list::-webkit-scrollbar-thumb:hover, 
.time-filter-years::-webkit-scrollbar-thumb:hover, 
.time-filter-months::-webkit-scrollbar-thumb:hover {
  background-color: #565656;
}
.filter-items-list::-webkit-scrollbar-thumb:active, 
.time-filter-years::-webkit-scrollbar-thumb:active, 
.time-filter-months::-webkit-scrollbar-thumb:active {
  background-color: #5C5C5C;
}

.filters-active-set {
  margin: 10px 0 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  & .item {
    padding: 4px 12px 4px 12px;
    line-height: 1;
    background-color: var(--bg-button-primary);
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    & .key {

      margin-right: 5px;
    }
    & b {
      white-space: nowrap;
    }
    & .btn {
      padding: 0;
      width: 18px;
      height: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background-color: var(--bg-button-secondary);
      border-radius: 100%;
      margin: 0 -4px 0 10px;
    & .close_icon {
        width: 10px;
        height: 10px;
      }
    }
  }
}
.games-catalogue-flow .alert  {
  width: 100%;
}
/*/БЛОКИ/*/
.games-catalogue-flow.list-view {
  & > .item {
    margin: 14px 0;
    background-color: var(--bg-card);
    padding: 15px;
    box-shadow: 0 0 4px rgba(0,0,0,0.2);
    & .additional {
      display: none;
    }
    & .body {
      display: flex;
    }
    & .poster {
      position: relative;
      flex-shrink: 0;
      margin-right: 20px;
      & img {
        width: 138px;
        height: 190px
      }
    }
    & .aside {
      width: 100%;
    }
    & .info {
      display: flex;
      gap: 40px;
      font-size: 1.4rem;
      font-weight: bold;
    }
    & .title {
      font-size: 2.4rem;
      margin: 10px 0 12px;
      line-height: 1;
      font-weight: bold;
    }
    & .title:has(+ .subtitle) {
      margin-bottom: 0;
    }
    &  .subtitle {
      margin-bottom: 10px;
    }
    & .prime-info {
      width: 60%;
      & .releases-short {
        display: none;
      }
    }
    & .footer {
      display: flex;
      gap: 10px;
      margin: 10px 0 0 0;
      &  > .btn {
        flex-basis: 100%;
        font-size: 1.4rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        &:hover {
          background-color: var(--main-color);
        }
        &.active {
          background-color: #f0f0f0;
        }
        &:last-child span {
          display: none;
          margin-inline: 5px;
        }
      }
    }
    & .tags {
      font-weight: bold;
      line-height: 1.2;
      margin: 0 0 10px 0;
    }
    & .game-rating-summary {
      & .item {
        margin: 0 0 8px 0;
        line-height: 1;
        & .value {
          display: inline-flex;
          width: 50px;
          font-size: 1.4rem;
        }
      }
    }
  }
}

.games-catalogue-flow.tile-view {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, 1fr);
  & > .item {
    position: relative;
    background-color: var(--bg-card);
    padding: 15px;
    box-shadow: 0 0 1px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    & .additional {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 0 5px 0;
      & .info-btn {
        border: 1px solid var(--border-base);
        background-color: var(--bg-button-secondary);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 0 0 auto;
        padding: 0;
        width: 24px;
        height: 24px;
        border-radius: 4px;
        & span {
          opacity: 0.5;
        }
        &:hover span {
          opacity: 1;
        } 
      }
      & .game-rating {
        background-color: #296fda;
        color: #fff;
        font-size: 1.2rem;
        line-height: 1;
        text-align: center;
        min-width: 22px;
        height: 18px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        border-radius: 4px;
        cursor: default;
      }
    }  
    & .poster {
      position: relative;
      margin: 0 0 10px 0;
      display: block;
      & img {
        width: 100%;
      }
    }
    & .title {
      font-weight: bold;
      font-size: 1.6rem;
      -webkit-line-clamp: 1;
      line-clamp: 1;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
    & .subtitle {
      display: none;
    }
    & .releases {
      display: none;
    }
    & .tags {
      font-weight: bold;
      font-size: 1.2rem;
      line-height: 1;
      margin: 6px 0;
      -webkit-line-clamp: 1;
      line-clamp: 1;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
    & .game-rating-summary {
      display: none;
    }
    & .footer {
      display: flex;
      flex-direction: column-reverse;
      justify-content: center;
      align-items: center;
      gap: 10px;
      padding: 12px 0 0 0;
      margin: auto 0 0 0;
      & > .btn {
        border-radius: 2px;
        width: 100%;
        background-color:  var(--bg-button-secondary);
        font-size: 1.2rem;
        color: var(--text-primary);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        &:hover {
          background-color: var(--main-color);
          color: var(--text-on-primary);
          & .badge {
            color: var(--text-on-primary);
          }
          & .svg-icon-bg {
            filter: invert(100%);
          }
        }
        &.active {
          background-color: var(--bg-accent);
          box-shadow: 0 0 3px rgba(0,0,0, 0.2) inset;
          &:hover {
            color: var(--text-primary);
            & .badge {
            color: var(--text-primary);
          }
          }
        }
        &:last-child {
          display: none;
        }
        &:first-child {
          order: 2
        }
      }
    }
  }
}
.game-rating-summary .users {
  color: #337ab7;
}
.game-rating-summary .editorial {
  color: var(--main-color);
}
.gp-game-choice {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 60px 60px 0;
  border-color: transparent var(--main-color) transparent transparent;
  transform: none;
  background: transparent;
  position: absolute;
  top: 0;
  right: 0;
  padding: 0;
  & .text {
    transform: rotate(45deg);
    display: block;
    text-align: center;
    position: relative;
    left: 20px;
    top: 7px;
    font-size: 1.2rem;
    width: 45px;
    line-height: 1;
    color: var(--text-on-primary);
  }
}

.games-catalogue-flow .gp-game-follow .badge {
  line-height: 1;
  color: var(--text-primary);
}
.game-rating-button .value {
  display: none;
}
.game-rating-button .value.active {
  display: inline-flex;
  background-color: #c5c5c5;
  color: #393939;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-weight: bold;
  margin-left: 4px;
  padding: 3px 5px 2px;
  line-height: 1;
}
.games-catalogue-flow .gp-game-follow .text {
  display: inline-flex;
  text-transform: capitalize;
  line-height: 1;
}
.games-catalogue-flow .item.alert {
  background-color: #ebebeb;
  padding: 16px;
  font-size: 1.6rem;
  color: #666;
  margin: 0;
  text-align: center;
  justify-content: center;
  flex-basis: 100%;
  box-shadow: none;
  max-width: none;
}
.platform-item.cancelled {
  text-decoration: line-through ;
}
.games-catalogue-flow  .alert-warning {
  width: 100%
}
.gp-game-follow:hover:before,
.gp-game-follow:hover:after {
  transition-delay: 500ms;
}
@media (max-width: 980px) {
  .content_aside-container .page-aside {
    order: -1;
  }
}
@media (max-width: 768px) {
  .games-catalogue-flow {
    display: block;
  }
  .content_aside-container .content-column {
    padding: 0;
  }
  .content_aside-container .page-aside {
    display: block;
    padding: 10px;
    flex-basis: auto;
    margin-top: 0;
    & > div {
      display: flex;
      gap: 10px;
    }
  }
  .mobile-filter-ctrl {
    display: inline-flex;
    flex-basis: 100%;
    background-color: var(--bg-button-secondary);
    justify-content: center;
    padding: 4px 10px;
    border: 1px solid var(--border-base);
    font-size: 1.2rem;
  }
  .sort-block .btn {
    font-size: 1.2rem;
    padding: 4px 10px;
  }
  .games-catalogue .filter-block {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    background-color: #2c2c2c;
    margin: 0;
    font-size: 1.6rem;
    padding: 15px 10px 5px 15px;
    & .btn {
      &.btn-close {
        display: inline-flex;
        position: fixed;
        right: 5px;
        top: 10px;
        background-color: transparent;
        border: none;
        width: auto;
        margin: 0;
      }
    }
    & .filter-items-list {
      max-height: calc(100% - 50px);
      & a {
        margin: 5px 15px 5px 0;
        border-radius: 5px;
        padding: 10px;
        color: #eee;
        &:hover {
          background-color: #000;
        }
      }
      & .active {
        background-color: #111;
        color: #fff;
      }
    }
    & .filter-items-list.multiple-select {
      & a {
        padding-left: 40px;
        background-position: 10px center;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='16px' height='16px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg stroke-linecap='round' stroke-linejoin='round'%3e%3c/g%3e%3cg id='SVGRepo_iconCarrier'%3e%3cg id='Interface / Checkbox_Unchecked'%3e%3cpath  d='M4 7.2002V16.8002C4 17.9203 4 18.4801 4.21799 18.9079C4.40973 19.2842 4.71547 19.5905 5.0918 19.7822C5.5192 20 6.07899 20 7.19691 20H16.8031C17.921 20 18.48 20 18.9074 19.7822C19.2837 19.5905 19.5905 19.2842 19.7822 18.9079C20 18.4805 20 17.9215 20 16.8036V7.19691C20 6.07899 20 5.5192 19.7822 5.0918C19.5905 4.71547 19.2837 4.40973 18.9074 4.21799C18.4796 4 17.9203 4 16.8002 4H7.2002C6.08009 4 5.51962 4 5.0918 4.21799C4.71547 4.40973 4.40973 4.71547 4.21799 5.0918C4 5.51962 4 6.08009 4 7.2002Z' stroke='%23eeeeee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
      }
      & a.active {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='16px' height='16px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='SVGRepo_bgCarrier' stroke-width='0'%3e%3c/g%3e%3cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3e%3c/g%3e%3cg id='SVGRepo_iconCarrier'%3e%3cg id='Interface / Checkbox_Check'%3e%3cpath d='M8 12L11 15L16 9M4 16.8002V7.2002C4 6.08009 4 5.51962 4.21799 5.0918C4.40973 4.71547 4.71547 4.40973 5.0918 4.21799C5.51962 4 6.08009 4 7.2002 4H16.8002C17.9203 4 18.4796 4 18.9074 4.21799C19.2837 4.40973 19.5905 4.71547 19.7822 5.0918C20 5.5192 20 6.07899 20 7.19691V16.8036C20 17.9215 20 18.4805 19.7822 18.9079C19.5905 19.2842 19.2837 19.5905 18.9074 19.7822C18.48 20 17.921 20 16.8031 20H7.19691C6.07899 20 5.5192 20 5.0918 19.7822C4.71547 19.5905 4.40973 19.2842 4.21799 18.9079C4 18.4801 4 17.9203 4 16.8002Z' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e")
      }
    }
  }
  .filter-header {
    color: #ccc
  }
  .games-catalogue-setting-panel {
    & .top {
      justify-content: center;
    }
  }
  .filters-active-set .key {
    display: none;
  }
  .filter-block .filter-items-list:has(:focus) .active {
    background-color: transparent;
    color: #eee;
  }

  .filter-block .filter-items-list:has(+ .btn) {
    max-height: 85vh;
  }

  .games-catalogue-title {
    margin: 20px 10px 0;
    text-align: center;
  }
  .games-catalogue .sort-block .active {
    background-color: #fff;
    color: #111;
    font-weight: bold;
  }
  .content_aside-container {
    box-shadow: none;
  }
  .games-catalogue-flow.list-view {
    & > .item {
      & .title {
        font-size: 1.8rem;
        margin: 0 0 10px 0;
        font-weight: bold;
      }
      & .info {
        font-size: 1.2rem;
        display: block;
        & .prime-info {
          width: auto;
        }
      }
      & .poster {
      & img {
          width: 100px;
          height: 138px;
        }
      }
      & .footer {
        & > .btn {
            font-size: 1.2rem;
        }
        
      }
    }
  }
  .games-catalogue-setting-panel {
    margin: 0;
    & .view-controll {
      display: none
    }
  }
  .game-rating-summary {
    display: none;
  }
  .time-filter .item {
    color: #fff
  }
  #btnAddGameMessage {
    display: none;
  }   
}
@media (max-width: 380px) {
  .games-catalogue-flow.list-view {
    & > .item {
      .footer {
        & > .btn:last-child {
          text-indent: -9999px;
        }
        & > .btn:last-child span {
          display: block;
        }
      }
    }
  }
}
@media (max-width: 340px) {
  .games-catalogue-flow.list-view {
    & > .item {
      .footer {
        flex-wrap: wrap;
        & > .btn:last-child {
          text-indent: 0;
        }
        & > .btn:last-child span {
          display: none;
        }
      }
    }
  }
}