@import url('bootstrap/bootstrap.min.css');
@import url('bootstrap/bootstrap-icons.min.css');
@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');



:root {
    --filter-width: 245px; /* 290, 320 */
    --geeklstfilter-listid-input-width: 105px; /*170*/
    --filter-select-width: 105px; /* 90 */
    --filter-label-width: 90px;
    --listfilter-label-width: 70px;
    --lstfilter-listid-width: 80px;
    --filter-operand-width: 40px;
    --geeklstfilter-helptext-width: var(--filter-width);
    --filter-value-width: 105px;
    --lstfilter-select-input-width: var(--filter-value-width);
    --listfilter-loadbtn-content-width: var(--filter-operand-width);
    --col-weight-light: #00be5b; /*#5bda98;*/
    --col-weight-medium: #ffc107; /*#ff6b26;*/
    --col-weight-heavy: #df4751;
    --col-rating-1: #b2151f;
    --col-rating-2: #b2151f;
    --col-rating-3: #d71925;
    --col-rating-4: #d71925;
    --col-rating-5: #5369a2;
    --col-rating-6: #5369a2;
    --col-rating-7: #1978b3;
    --col-rating-8: #1d804c;
    --col-rating-9: #186b40;
    --col-rating-10: #186b40;
    /*
    --col-rating-5: #b2151f;
    --col-rating-6: #d71925;
    --col-rating-7: #5369a2;
    --col-rating-8: #1978b3;
    --col-rating-9: #1d804c;
    --col-rating-10: #186b40;
    */
    --col-lang-0: #00c0ff; /*no*/
    --col-lang-1: #00be5b; /*some*/
    --col-lang-2: #ffc107; /*moderate*/
    --col-lang-3: #df4751; /*extensive*/
    --col-lang-4: #b2151f; /*unplayable*/

    --col-time-0: cornflowerblue;
    --col-time-1: lightseagreen;
    --col-time-2: yellowgreen;
    --col-time-3: green;
    --col-time-4: gold;
    --col-time-5: orange;
    --col-time-6: orangered;
    --col-time-7: red;
    --col-time-8: darkred;

    --weight-text-shadow: black;
    --spinner-background: #7777;
    --compfilter-operator-background-color:  lemonchiffon;
}

@media screen and (min-width: 900px) {
    :root {
        --gameslist-font-size : large;}
}

@media screen and (min-width: 770px) {
    :root {
        --gameslist-font-size: normal;
    }
}

@media screen and (max-width: 360px) {
    :root {
        --gameslist-font-size: small;
    }
}

.gameslist {
    font-size: var(--gameslist-font-size);
}

body {
    font-size: small;
}

.meta-header
{
    display:flex;
    font-size: 9px;
}

.meta-header-btn {
    margin-left: 10px;
}

.filter {
    /*max-width: 320px;*/
    min-width: var(--filter-width);
    display: flex;
    align-items: center;
    margin: 1px;
    border: thin solid lightgrey;
}

.filter-label {
    width: var(--filter-label-width);
    margin: 0px;
}

.filter-select {
    width: var(--filter-select-width);
    max-width: var(--filter-select-width);
}

.filter-value {
    width: var(--filter-value-width);
    max-width: var(--filter-value-width);
}

.filter-operand {
    width: var(--filter-operand-width);
    padding: 1px 4px 1px 1px;
    text-align-last: center;
}

.geeklstfilter
{

}

.geeklstfilter-helptext {
    max-width: var(--geeklstfilter-helptext-width);
    line-height: 0.75em;
}

.geeklstfilter-helptext-span
{
    font-size: xx-small;
}

.listfilter-outerbody 
{
    
}

.listfilter-innerbody
{
    display:flex;
}

.listfilter-label {
    width: var(--listfilter-label-width);
}

.lstfilter-listid {
    width: var(--lstfilter-listid-width);/* 80px;*/
}

.lstfilter-select-input {
    width: var(--lstfilter-select-input-width); /*90px;*/
}

.geeklstfilter-id
{
    display:flex;
}

.geeklstfilter-selector {
    display: flex;
}

.listfilter-loadbtn-content {
    width: var(--listfilter-loadbtn-content-width); /* 45px;*/
    text-align: center;
}

.geeklstfilter-ranking
{
    display:flex;
}

.geeklstfilter-listid-input {
    width: var(--geeklstfilter-listid-input-width); /*170px;*/
}

.filter-screen {
    display: flex;
    /*max-width: 1140px;*/
    margin: auto;
}

/* to działa na desktopie, ale na mobileu jest upierdliwe, jak to zrobić żeby na ekranie < XXX lista zjeżdżała pod panel ?*/
.filter-panel-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: scroll;
    /* overflow-x: visible; */
    min-width: fit-content;
}

.filter-panel {
    height: fit-content;
}

.ordcol {
    font-size: smaller;
}

.weight {
    text-shadow: 0 0 var(--weight-text-shadow);
    /* font-weight: bold; */

    --weight-norm: calc( max(0, calc( var(--weight) - 10)) * 100% / 40);
    --heavy-perc: max(0%, calc( (var(--weight-norm) * 2) - 100%));
    --light-perc: max(0%, calc(100% - (var(--weight-norm) * 2)));
    --medium-perc: calc(100% - var(--heavy-perc) - var(--light-perc));
    color: color-mix(in lch, color-mix(in lch, var(--col-weight-light) var(--light-perc), var(--col-weight-medium) ) var(--light-perc), color-mix(in lch, var(--col-weight-medium) var(--medium-perc), var(--col-weight-heavy) ) );
    white-space: nowrap;
}
/*
    .weight:before {
        content: "\e0cd";
        font-family: Icons;
        font-style: normal;
        font-weight: 400;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        speak: none;
    }
*/

.nobr {
    white-space: nowrap;
    width: fit-content;
}


.rating-1 {
    --rating-base: 1;
    --col-lower: var(--col-rating-1);
    --col-upper: var(--col-rating-2);
}
.rating-2 {
    --rating-base: 2;
    --col-lower: var(--col-rating-2);
    --col-upper: var(--col-rating-3);
}
.rating-3 {
    --rating-base: 3;
    --col-lower: var(--col-rating-3);
    --col-upper: var(--col-rating-4);
}
.rating-4 {
    --rating-base: 4;
    --col-lower: var(--col-rating-4);
    --col-upper: var(--col-rating-5);
}
.rating-5 {
    --rating-base: 5;
    --col-lower: var(--col-rating-5);
    --col-upper: var(--col-rating-6);
}
.rating-6 {
    --rating-base: 6;
    --col-lower: var(--col-rating-6);
    --col-upper: var(--col-rating-7);
}
.rating-7 {
    --rating-base: 7;
    --col-lower: var(--col-rating-7);
    --col-upper: var(--col-rating-8);
}
.rating-8 {
    --rating-base: 8;
    --col-lower: var(--col-rating-8);
    --col-upper: var(--col-rating-9);
}
.rating-9 {
    --rating-base: 9;
    --col-lower: var(--col-rating-9);
    --col-upper: var(--col-rating-10);
}
.rating-10 {
    --rating-base: 10;
    --col-lower: var(--col-rating-10);
    --col-upper: var(--col-rating-10);
}

.rating {
    text-shadow: 0 0 var(--weight-text-shadow);
    font-weight: bold;
    --floor: round(down, var(--rating)/10);
    --mod: calc(var(--rating) - 100*var(--floor));
    --rating-norm: calc(var(--mod) * 10%);
    color: color-mix(in lch, var(--col-lower), var(--col-upper) var(--rating-norm));
}

.langdep {
    white-space: nowrap;
    display: inline-block;
    min-width: 82px;
}

.langdep-0 { /*Unknown*/
}
.langdep-1 { /*No*/
    color: var(--col-lang-0); /*var(--col-rating-10);*/
}
.langdep-2 { /*Some*/
    color: var(--col-lang-1); /*color: var(--col-rating-8);*/
}
.langdep-3 { /*Moderate*/
    color: var(--col-lang-2); /*color: var(--col-rating-5);*/
}
.langdep-4 { /*Extensive*/
    color: var(--col-lang-3); /*color: var(--col-rating-3);*/
}
.langdep-5 { /*Unplayable*/
    color: var(--col-lang-4); /*color: var(--col-rating-1);*/
}

.spinner {
    position: fixed;
    width: 100%;
    height: 100%;
    background: var(--spinner-background); /* #7777;*/
    z-index: 10;
    place-content: center;
}

.spinner-content {
    text-align: center;
    font-size: xxx-large;
}

.game-title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-inline-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.2em;
    min-height: 2.4em;
    max-width: 174px;
    min-width: 174px;
    width: 174px;
    /* breakpoints: 105, 118, 144, 175, 184, 200, 205, 210, 218, 227, 236, 260px; */
}

.plynum {
    white-space: nowrap;
    width: 125px;
    display: -webkit-inline-box;
    letter-spacing: -0.2px;
}

.plynum-best
{

}
.plynum-reco
{
}

.playtime {
    text-shadow: 0 0 var(--weight-text-shadow);
    /* font-weight: bold; */
    letter-spacing: -0.2px;
    display: inline-block;
    width: 85px;
}

.tmax{
}

.tmin-0q {
    color: var(--col-time-0);
}

.tmax-1q {
    color: var(--col-time-1);
}

.tmax-2q {
    color: var(--col-time-2);
}

.tmax-3q {
    color: var(--col-time-3);
}

.tmax-4q, .tmax-5q {
    color: var(--col-time-4);
}

.tmax-2h, .tmax-3h {
    color: var(--col-time-6);
}

.tmax-6q, .tmax-7q, .tmax-8q {
    color: var(--col-time-5);
}


.tmax-4h, .tmax-5h, .tmax-6h, .tmax-7h {
    color: var(--col-time-7);
}

.tmax-1x {
    color: var(--col-time-8);
}

.tmin{
}

.tmin-0q {
    color: var(--col-time-0);
}

.tmin-1q {
    color: var(--col-time-1);
}

.tmin-2q {
    color: var(--col-time-2);
}

.tmin-3q {
    color: var(--col-time-3);
}

.tmin-4q {
    color: var(--col-time-4);
}

.tmin-5q, .tmin-6q {
    color: var(--col-time-5);
}

.tmin-7, .tmin-2h {
    color: var(--col-time-6);
}

.tmin-2h, .tmin-3h {
    color: var(--col-time-7);
}

.tmin-4h, .tmin-1x {
    color: var(--col-time-8);
}

.ord {
    display: inline-block;
    min-width: 36px;
    text-align: left;
}

.ord-1 {
    font-size: 300%;
}

.ord-2 {
    font-size: 245%;
}

.ord-3 {
    font-size: 160%;
}
.ord-4 {
    font-size: 124%;
}

.compfilter-operator {
    display: flex;
    background-color: var(--compfilter-operator-background-color); /* lemonchiffon;*/
}

.info-tooltip {
    font-size: xx-small;
    border-color: black;
    border-style: solid;
    border-width: thin;
    border-radius: 100%;
    height: 1.5em;
    width: 1.5em;
    text-align: center;
}

.compfilter-newfilter-label {
    align-self: center;
}

.compfilter-subfilter-position-controls {
    display: inline-grid;
    width: 1.3em;
}

.compfilter-subfilter-position-btn
{

}

.btn-xs {
    padding: .125rem .25rem;
    font-size: 0.425rem;
    border-radius: .2rem;
    width: 2.5em;
}

.filterpreset-listwrapper {
    display: flex;
    align-items: center;
}

.filterpreset-label > select {
    padding-left: 0.1rem;
}

.filterpreset-select {
    padding: 0 5px 0 5px;
}

.filterpreset-presetname-input-wrapper
{

}

.filterpreset-presetname-input
{
}

.filterpreset-buttons {
    white-space: nowrap;
}

.default-preset-bar {
    display: flex;
    justify-content: space-between;
}

.compfilter-newfilter-add > button {
    margin: 0px;
    padding: 2px;
    line-height: 1em;
}

.compfilter-newfilter-add .bi {
    font-size: 1.5rem;
}

.compfilter-subfilter-trash > button {
    margin: 0px;
    padding: 2px;
    line-height: 1em;
}

.compfilter-subfilter-trash .bi {
    font-size: 1.5rem;
}

.compfilter-subfilter-trash-this > button {
    margin: 0px;
    padding: 2px;
    line-height: 1em;
}

.compfilter-subfilter-trash-this .bi {
    font-size: 1.5rem;
}

.txtfilter-value
{

}

.filter-label > select {
    padding-right: 0.3rem;
    padding-left: 0.3rem;
}
/*
.bi:hover:after {
    position: relative;
    content: attr(title)
}
*/

.bgg-power-wrap {
    width: 50%;
}

.bgg-power-img {
    width: 100%;
}