@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');



.pools-title{
    display: none
}
.pools-container.empty{
    text-align: center;
    color: var(--c-text-primary);
    font-size: 16px;
    line-height: 1.1;
    padding: 20px 0
}
.pools-header{
    background-image: unset;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 22px;
    padding: 15px 0 30px;
    font-size: 16px;
    color: var(--c-text-primary);
}
.pools-header .pools-winnings{
    text-align: center;
    color: var(--c-background-odds-active);
    font-size: 40px;
    font-weight: bold;
    line-height: 60px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Oswald', sans-serif;
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}
.pools-winnings:before,
.pools-winnings:after{
    content: "";
    display: flex;
    width: 67px;
    height: 67px;
    padding: 0 0px;
    background-image: url(/v1.032/r/images/icons/pools-stars.svg);
    background-size: contain;
    margin: 0 20px;   
    background-repeat: no-repeat;
    background-position: center
}
.pools-header .pools-winnings span{

}
.pools-matches .draw-normal-matches{
    display: flex;
    flex-direction: column;
    gap: 8px
}
.pools-matches .title-header{
    display: none
}
.pools-matches app-pools-matches li{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background-color: var(--c-background-primary);
    box-shadow: rgb(0 0 0 / 20%) 0 1px 11px;
    border-radius: var(--r-border-radius-medium);
    padding: 5px;
    color: var(--c-text-odds);
    gap: 8px
}
.pools-matches app-pools-matches li .match-header{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 350px;
    gap: 5px;
    font-weight: bold
}
.pools-matches app-pools-matches li .match-header .match-no{
    width: 35px;
    text-align: center
}
.pools-matches app-pools-matches li .match-header .match-title{
    display: flex;
    flex-direction: column   
}
.pools-matches app-pools-matches li .match-header .match-versus{
    display: none
}
.pools-matches app-pools-matches li .match-header .match-datetime{
    flex: 1 1 100%;
    padding-left: 40px;
    order: -1;
    font-weight: normal
}
.pools-matches app-pools-matches li .match-selections{
     display: flex;
    flex-wrap: wrap;
    width: 100%;
    flex: 2 1 480px;
    gap: 4px
}
.pools-matches app-pools-matches li .match-selections app-match-selection{
    flex: 1;
    background-color: var(--c-background-odds);
    border-radius: var(--r-border-radius-medium);   
    min-width: 100px;
    transition: all .3s ease-in-out
}
.desktop .pools-matches app-pools-matches li .match-selections app-match-selection:hover{
    background-color: rgba(51, 51, 51, .2);
    box-shadow: rgb(0 0 0 / 20%) 0 1px 11px
}
.pools-matches app-pools-matches app-match-selection .selection-bet{
    background-color: inherit;
    border-radius: var(--r-border-radius-medium);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: var(--c-text-odds);
    padding: 8px 12px
}
.pools-matches app-pools-matches app-match-selection .active .selection-bet{   
    background-color: var(--c-background-odds-active);
    color: white
}


.pools-footer{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 20px 4px;
    justify-content: space-between
}
.pools-footer .pools-info .value-block-wrapper{
    display: flex;
    gap: 8px;
    font-weight: bold;
    color: var(--c-text-odds)
}
.pools-footer .pools-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}
.pools-footer .pools-actions .pools-action{
    border-radius: var(--r-border-radius-medium);
    min-width: 150px;
    font-weight: bold;
    min-height: 36px;
    transition: all .3s ease-in-out
}
.desktop .pools-footer .pools-actions .pools-action:hover{
    transform: translateY(-2px)
}
.pools-footer .pools-actions .pools-favourites{
    background-color: var(--c-emphasis);
    color: var(--c-black)   
}
.pools-footer .pools-actions .pools-random{
    background-color: var(--c-background-login-button);
    color: white
}
.pools-footer .pools-actions .pools-clear{
    background-color: var(--c-background-odds-active);
    color: white;
}
.pools-footer .pools-actions .pools-submit{
    background-color: var(--c-background-login-button);
    color: white
}
.pools-footer .pools-actions .pools-submit .place-disabled-icon + .submit-bet-message{
    display: none
}
.pools-footer .pools-actions .pools-submit .submit-bet-message{
   
}
.pools-footer .pools-actions .pools-submit.submit-disabled{
    opacity: .7
}


/************************************
              Dark Theme
************************************/

.theme-dark .pools-matches app-pools-matches li{
    background-color: var(--c-bg-lighter-gray);
}


/************************************
               Mobile
************************************/

.mobile .pools-matches app-pools-matches li .match-selections app-match-selection{
    flex: 0 0 calc(50% - 2px)
}

.mobile .pools-winnings:after{
    display: none
}
.mobile .pools-winnings:before{ 
    flex: 1 1 100%   
}
.mobile .pools-header .pools-winnings span.amount{
    flex: 1 1 100%
}