.footer{
    border-radius: var(--r-md);
    overflow: hidden;
    margin-top: 50px;
    position: relative
}
/*
.footer:before{
    content: "";
    display: block;
    width: 150px;
    height: 150px;
    position: absolute;
    top: 27%;
    left: 0;
    border-radius: 50%;
    background: linear-gradient(90deg, rgba(239,118,34,1) 0%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 100%);
    transform: rotate(-55deg);
    opacity: .7;
}
.footer:after{
    content: "";
    display: block;
    width: 150px;
    height: 150px;
    position: absolute;
    top: 10%;
    right: 0;
    border-radius: 50%;
    background: linear-gradient(90deg, rgba(239,118,34,1) 0%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 100%);
    transform: rotate(130deg);
    opacity: .7
}
*/
.footer > app-widget-host{
    display: flex  
}
.footer-payment{
    display: flex;
    background-color: var(--c-primary-b)
}
.desktop .footer-payment app-widget-host{
    height: 40px;
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 1840px;
    margin: 0 auto
}
.footer-payment app-widget-host app-image{  
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex: 0 0 20%
}
.footer-text{   
    padding: 0 20px 20px;
    cursor: pointer

}
.footer-text > app-widget-host{  
    justify-content: center;
    align-items: center   
}
.footer-text-title{
    padding: 30px 0 15px;
    text-align: center
}
.footer-text .footer-text-title > div{
    color: var(--c-white-e);
    text-transform: uppercase;
    font-size: 18px
}
.footer-text-title-explanation{
    color: var(--c-white);
    text-align: center;
    padding-bottom: 20px
}
.footer .responsible-gambling {
    width: 100%
}
.footer .responsible-gambling > app-widget-host{
    flex-direction: row;
    padding-top: 15px;
    justify-content: space-evenly;
    max-width: 480px;
    margin: 0 auto
}
.footer .responsible-gambling img{
    max-width: 100%;
    height: 45px
}
.footer .payment-providers{
    
}
.footer .payment-providers > app-widget-host{
    flex-direction: row;
    justify-content: center;
    padding: 20px 15%
}
.footer .payment-providers img{
    max-width: 100px
}
.footer-links{    
    flex: 1 1 100%;
    justify-content: center;
    display: flex;
    align-items: center;
    width: 100%
}
.footer-links > app-widget-host{
    display: flex;
    flex-direction: row;
    padding: 40px 0 0;
    max-width: 1840px;
    margin: 0 auto
}
.license{
    display: flex;
    padding: 0 15%;
    color: var(--c-white-e);
    font-size: 14px;
    line-height: 18px
}
.license-title{
    font-size: 16px;
    text-transform: capitalize;
    line-height: 26px
}
.license-number{
    text-transform: capitalize;
    margin: 0;
    font-size: 12px;
    color: var(--c-white)
}
body .footer .license-number a{
    color: var(--c-white)
}
body .footer .license-number a:hover{
    color: var(--c-white-e)
}
.license .license-link-group-header {
    padding-bottom: 10px;
    margin: 0;
    color: var(--c-emphasis)
}
.footer-links .links{
    display: flex;
    flex: 1
   
}
.footer-links .links > app-widget-host{
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap

}
.footer-links .link-group{
    display: flex;
    flex: 0 0 50%;
    position: relative
}
.footer-links .link-group .link-group-header {
  width: 155px
}

.footer-links .link-group > app-widget-host{
    align-items: center;
    padding-right: 25px
}

.footer-links .link-group:last-child > app-widget-host{
    align-items: center;
    padding-right: 0;
    padding-left: 25px
}
.footer-links .link-group.addition-link-group{
    flex: 0 0 50%
}
.footer-links .link-group.addition-link-group > app-widget-host{
    align-items: flex-end
}
.footer-links .link-group-header{
    color: var(--c-emphasis);
    font-size: 16px;
    font-weight: bold
}
.footer-links .link-group .link{
    color: var(--c-white-e);
    font-size: 14px;
    margin-top: 15px;
    cursor: pointer;
    flex: 1 1 50%;
    width: 155px
}
.footer-links .link-group .link:hover{
    color: var(--c-emphasis)
}
.footer-links .link-group ul{
    flex-direction: column
}
.footer-links .link-group ul a{
    color: var(--c-white);
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 0
}
body .footer-links .link-group ul li:hover a,
body .footer-links .link-group ul li a :hover,
body .footer-links .link-group ul li a.active{
    color: var(--c-emphasis)
}
.footer-social{
    display: flex;    
    padding: 20px 30px 0;
    background-color: var(--c-shade-b)
}
.footer-social > app-widget-host{
    display: flex;
    flex-direction: column;
    align-items: center;   
    justify-content: space-between
}
.footer-social .footer-logo,
.footer-social .footer-social-img,{
    flex: 0 0 50%
    display: flex;
    align-items: center
}
.footer-social .footer-logo img{
    max-height: 80px
}
.footer-social .footer-social-img > app-widget-host{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center
}
.footer-social .footer-social-img-top > app-widget-host{
    flex-direction: row;
    padding-bottom: 15px
}
.footer-social .footer-social-img app-widget-host app-image{    
    cursor: pointer
}
.footer-social .footer-social-img app-widget-host .footer-social-facebook{
    margin: 0 20px;
}
.footer-social .footer-social-img app-widget-host app-image img{
   max-width: 24px
}
.footer-social .footer-social-img app-widget-host app-image:hover img{
    filter: invert(50%) sepia(83%) saturate(890%) hue-rotate(345deg) brightness(95%) contrast(97%);
}    
.footer-social .footer-social-img .content-page-box-inner{
   
}
body .content-page-box-inner a{
    color: var(--c-white-e)
}
body .content-page-box-inner a:hover{
    color: var(--c-emphasis)
}
.footer-responsible-link {
    background-color: var(--c-shade-b)
}

/* android & IOS */

.download-app{
    display: flex;
    align-items: flex-start;
    padding: 30px 0
}

#root .download-app > app-widget-host{
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    flex-wrap: wrap;
    flex-direction: row
}
#root .download-app .link-group-header{
    flex: 1 1 100%;
    justify-content: center;
    display: flex;
    position: unset;
    transform: unset;
    color: var(--c-white-e);
    font-size: 18px;
    padding-bottom: 15px
}
#root .download-app > app-widget-host > span{
    display: none
}
.download-app .download-android,
.download-app .download-ios{
    display: flex;  
    cursor: pointer
}
.download-app .download-android{
    justify-content: flex-start
}
.download-app .download-ios{
    justify-content: flex-end
}
.download-app .download-android img,
.download-app .download-ios img{
    max-width: 120px;
    background-repeat: no-repeat;
    background-position: center center;
    height: 40px
    
}

.mobile-app-ios {
    background-color: var(--c-primary);
    padding: 0 15px
}
.mobile-app-ios .title,
.mobile-app-ios .sub-title{
    color: var(--c-emphasis)
}

.desktop .mobile-app-ios > div {
    max-width: 760px;
    margin: 0 auto
}

.mobile-app-ios .warning {
    color: red;
    background-color: transparent
}

.mobile-app-ios .warning span {
    font-weight: bold
}

.mobile-app-ios .step {
    margin-bottom: 15px
}

.mobile-app-ios .steps .step-header {
    display: flex;
    align-items: center;
    height: 44px;
    background-color: var(--c-primary);
    color: var(--c-white-e);
    padding: 0 15px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px
}

.mobile-app-ios .steps .step-header .step-number {
    background-color: var(--c-black-e);
    border-radius: 12px;
    padding: 5px;
    margin-right: 15px;
    font-size: 16px;
    width: 24px;
    height: 24px;
    text-align: center
}

.mobile-app-ios .steps .step-header .step-title {
    font-weight: bold;
    font-size: 16px
}

.mobile-app-ios .steps .step-info {
    padding: 15px;
    background-color: var(--c-primary-b);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    color: var(--c-white-e)
}

.mobile-app-ios .steps .step-info .step-description {
    color: var(--c-white-e)
}

.mobile-app-ios .steps .step-info > a {
    display: flex
}

.mobile-app-ios .steps .step-info .image {
    padding: 15px
}

.mobile-app-ios .steps .step-info .image img {
    width: 100%;
    background-repeat: no-repeat
}

.mobile-app-ios .steps .step-note {
    margin-bottom: 15px;
    color: var(--c-emphasis)
}

.mobile-app-ios .steps .step-note span {
    font-weight: bold
}

.footer-copyright{
    background-color: var(--c-background);
    color: var(--c-white);
    padding: 15px;
    text-align: center
}