.filter-container{padding-top:25px;padding-bottom:25px;}
.filter-bottom-border{border-bottom: 0.5px solid #57aedc;}
.small-text-left-side {color:#828B95;font-size:12px;padding-left:50px;}
.small-text-right-side{color:#828B95;font-size:12px;padding-left:0;}
.normal-text{font-size:14px;color:#515153;text-transform: uppercase;}
.editors-pick{/*margin-bottom:15px;*/cursor: not-allowed !important;}

.pace {padding-top: 20px;} /* Select desired gameplay pace */

.most-popular{ margin-left:-6px; margin-bottom:7px;/*margin-top:7px;*/}
.most-recent{ margin-left:-6px; margin-bottom:7px;/*margin-top:7px;*/}
.user-rated{ margin-left:-6px; margin-bottom:7px;/*margin-top:7px;*/}
.last { margin-left:-6px; margin-bottom:20px;}

.players-line   {padding-bottom:35px;border-bottom: 0.5px solid #57aedc;width: 70px;position: relative; margin-left: 5px;}
    .playercount-pixel-paddin1{margin-left: -23px;}
    .playercount-pixel-paddin2{margin-left: 15px;}
.pace-line      {padding-bottom:1.5px;border-bottom: 0.5px solid #57aedc;width: 190px;position: relative; margin-left: 5px;}
    .gamelength-pixel-paddin1{margin-left: -12px;}
    .gamelength-pixel-paddin2{margin-left: 13px;}
    .gamelength-pixel-paddin3{margin-left: 140px; margin-top: -40px;}


.img-un-atstarpe-kolonam{padding-right:35px;}

.klase {
    height:50px;
    margin-bottom: 5px;
    padding: 5px;
}
.klase.hovered{
    background-color: #E45D33;
    border-radius: 5px;
}

.klase.hovered .small-text-left-side{
    color: white;
}

.category-icon {
    background-repeat: no-repeat;
    background-size: contain;
    height: 35px;
    padding-right:35px;
    margin-right: 10px;
}

.btn {padding: .1rem .35rem; font-weight: bold;}

.btn-primary {
    background-color: transparent;
    border-color: transparent;
}
.btn-right-side{
    background-color: transparent;
    border-color: transparent;
    padding-right: 18px;
    padding-left: 6px;
}

.btn-both-sides{
    background-color: transparent;
    border-color: transparent;
    padding-right: 6px;
    padding-left: 6px;
}

.right-side-filter{padding-left: 15px;}

.izvele{
    padding-left: 0;
    padding-right: 0;
}

.klase.hovered .btn.btn-primary,
.remove-default-background .btn.btn-primary.hovered,
.izvele .btn.btn-primary.hovered {
    color: #fff;
    background-color: #E4582C;
    border-color: #E4582C;
    transition: .125s;
    cursor:pointer;
}

.content-centered .klase.hovered{
    background-color: none;
    border-color: none;
}

.klase:hover:not(.hovered) .btn.btn-primary,
.remove-default-background .btn.btn-primary:hover:not(.hovered),
.izvele .btn.btn-primary:hover:not(.hovered)
{
    color:#212529;
    background-color: #F6F7FC;
    border-color: #F6F7FC;
}

.circle1 {margin-left: 1px;margin-top: -2px;
    width:  4px;height: 4px;
    background-color:#2B2B2B;
    border-radius: 3px;}

.circle2 {margin-left: 75px;margin-top: -4px;
    width:  4px;height: 4px;
    background-color:#2B2B2B;
    border-radius: 3px;}

.right-side-filter{max-width: 380px;}

.top-padding{
    padding-top: 20px;
}

.content-box .col-md-auto{
    padding: 0;
}

/* ==================================== */


.circle3 {margin-left: 1px;margin-top: -2px;
    width:  4px;height: 4px;
    background-color:#2B2B2B;
    border-radius: 3px;}
.circle4 {margin-left: 96px;margin-top: -4px;
    width:  4px;height: 4px;
    background-color:#2B2B2B;
    border-radius: 3px;}
.circle5 {margin-left: 191px;margin-top: -4px;
    width:  4px;height: 4px;
    background-color:#2B2B2B;
    border-radius: 3px;}
.right-side-filter{max-width: 430px;}

/*
Pogai "Medium" nevar uzspiest uz labās puses.
*/
/* ==================================== */

/*pics*/

.klase .traditional {
    background-image: url("/images/com_spele/assets/traditional.svg");
    background-position-x: 35%;
    height: 35px; /* 24.514 */
    margin-right: 5px;
    margin-left: 5px;
}
/*.traditional.category-icon{padding-right:10px;}*/
/*.dice-games.category-icon{transform: scale(0.8,0.8);}*/
.klase .dice-games.category-icon {
    background-image: url("/images/com_spele/assets/dice.svg");
}

.klase .original.category-icon {
    background-image: url("/images/com_spele/assets/idea_bulb.svg");
    background-position-x: 45%;
}

.klase .for-kids.category-icon {
    background-image: url("/images/com_spele/assets/kite.svg");
}

.klase .party-games.category-icon {
    background-image: url("/images/com_spele/assets/party.svg");
    background-position-x: 15%;
}

.klase .variations.category-icon {
    background-image: url("/images/com_spele/assets/variation.svg");
    background-position-x: 15%;
}

.klase:hover .traditional{
    background-image: url(/images/com_spele/assets/traditionalHover.svg);
}

.klase.hovered .traditional{
    background-image: url(/images/com_spele/assets/traditionalActive.svg);
    background-position-x: 35%;
}

.klase:hover .dice-games{
    background-image: url(/images/com_spele/assets/diceHover.svg);
}

.klase.hovered .dice-games {
    background-image: url(/images/com_spele/assets/diceActive.svg);
}

.klase:hover .original{
    background-image: url(/images/com_spele/assets/idea_bulbHover.svg);
}

.klase.hovered .original {
    background-image: url(/images/com_spele/assets/idea_bulbActive.svg);
    background-position-x: 45%;
}

.klase:hover .for-kids{
    background-image: url(/images/com_spele/assets/kiteHover.svg);
}
.klase.hovered .for-kids {
    background-image: url(/images/com_spele/assets/kiteActive.svg);
}

.klase:hover .party-games{
    background-image: url(/images/com_spele/assets/partyHover.svg);
}

.klase.hovered .party-games {
    background-image: url(/images/com_spele/assets/partyActive.svg);
    background-position-x: 15%;
}

.klase:hover .variations{
    background-image: url(/images/com_spele/assets/variationHover.svg);
}

.klase.hovered .variations{
    background-image: url(/images/com_spele/assets/variationActive.svg);
    background-position-x: 15%;
}



.btn-left-side{padding-right: 25px;}

@media (max-width: 768px){
    .content-box{
        width: fit-content;
        display: inline-grid;
        padding-left: 5px;
        padding-right: 5px;
    }
    .content-centered{
        width: fit-content;
        margin: auto;
    }
    .right-side-filter{
        margin: auto;
    }
    #filter{
        overflow-y: auto;
        overflow-x: hidden;
        bottom: 0;
        max-height: 600px;
    }
    .col-sm-auto{
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }
    .players-line{
        display: flex;
        padding-bottom: 20px;
    }
    .filter-button-box{
        display: flex;
    }
    .izvele {
        width: fit-content;
        margin: auto;
    }
    .btn-right-side{
        margin: 20px auto;
    }
}

@media (max-width:480px){
    .small-text-left-side {font-size:10px;}
}

@media (max-width:400px){
    .content-box{
        margin: 0 30px;
    }
}

@media (max-width:370px){
    .small-text-left-side {font-size:8.8px;}
}