.footer > app-widget-host{
    display: flex
}
.footer-payment{
    display: flex;
    background-color: var(--c-background-footer-top)
}
.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-container {
    position:relative;
}
.footer-text-container {
    padding-bottom:20px;
    padding-top: 18px;
    display:  flex;
    flex-direction: column;
}
.footer-text-container > app-widget-host::before {
    position:absolute;
    width:100%;
    height:100%;
    content:"";
    background-image:linear-gradient(to top,var(--c-white-e) 20%, transparent 50%);
    top:0px;
}
.toggle-footer-text {
    position:absolute;
    bottom:0px;
    left:50%;
    transform:translate(-50%,0%) rotate(0deg) 
}
.toggle-footer-text
.toggle-footer-text .beto-image {
    width:48px;
    height:48px;
}
.footer-text-toggled .toggle-footer-text  {
    transform:translate(-50%,0%) rotate(180deg) 
}
.footer-text{
    display: flex;
    height: 120px;
    /* align-items: center; */
    background-color: var(--c-background-footer-middle);
    cursor: pointer;
    overflow: hidden;
    padding: 20px;
}

.footer-text .footer-text-title > div{
    color: var(--c-black-e);
    text-transform: uppercase;
    font-size: 18px
}
.footer-text-toggled .footer-text-container > app-widget-host::before {
    display:none;
}
.footer-text-toggled .footer-text {
    height:100%;
}
.footer-links{
    background-color: var(--c-background)
}
.footer-links > app-widget-host{
    display: flex;
    flex-direction: row;
    padding: 40px;
    max-width: 1840px;
    margin: 0 auto
}
.footer-license{
    display: flex;
    justify-content:center;
    text-align:center;
    /* flex: 0 0 25%; */
    color: var(--color-white);
    font-size: 13px;
    line-height: 18px;
    margin: 20px 20px;
}
.footer-license p {
    margin:0px
}
.license-title{
    font-size: 16px;
    text-transform: capitalize;
    line-height: 26px
}
.license-number{
    text-transform: capitalize
}
.license .link-group-header {
    padding-bottom: 10px
}
.footer-links .links{
    display: flex;
    flex: 0 0 75%;
    padding: 0 40px
}
.footer-links .links > app-widget-host{
    display: flex;
    flex-direction: row;
    justify-content: center

}
.footer-links .link-group{
    display: flex;
    flex: 0 0 33.333333%
}
.footer-links .link-group-header{
    color: var(--c-black);
    font-size: 14px;
    font-weight: bold
}
.footer-links .link-group .link{
    color: var(--c-black-e);
    font-size: 14px;
    margin-top: 15px;
    cursor: pointer
}
.footer-links .link-group .link:hover{
    color: var(--c-emphasis);
}
.footer-social{
    display: flex;    
    padding: 20px 40px;
   background: var(--c-emphasis-b);
}
.footer .socials{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content:center;
    margin: 0 auto;
    max-width: 280px;
}
.footer .socials > app-widget-host{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    gap: 20px;
}
.footer .socials .social:not(:last-child) {
    /* margin-right: 25px; */
}
.footer .socials {
    width:100%;
    display: inline-flex;
    justify-content: space-evenly;
    
}
.footer .socials .social {
    cursor: pointer;
    width: 32px;
    display: inline-block;
}
.footer .logo {
    margin:40px auto;
}
.footer .logo img{
    width: 100%;
    max-height: 50px
}
.footer-social .footer-social-img app-widget-host{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end
}
.footer-social .footer-social-img app-widget-host app-image{
    margin: 0 20px;
    cursor: pointer
}
.footer-social .footer-social-img app-widget-host app-image img{
   max-width: 24px
}

/* android & IOS */

#root .download-app > app-widget-host{
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 20px 0;
    flex-wrap: wrap;
    flex-direction: row
}
.download-app .link-group-header{
    flex: 1 1 100%;
    justify-content: center;
    display: flex;
    padding-bottom: 20px
}
#root .download-app > app-widget-host > span{
    display: none
}
.download-app .download-android,
.download-app .download-ios{
    display: flex;
    justify-content: center;
    cursor: pointer
}
.download-app .download-android img,
.download-app .download-ios img{
    width: 120px;
    background-repeat: no-repeat;
    background-position: center center
}

div[class*=mobile]-app-ios {
    background-color: var(--c-primary);
    padding: 0 15px
}
div[class*=mobile]-app-ios .title,
div[class*=mobile]-app-ios .sub-title{
    color: var(--c-text-odds-header)
}

.desktop div[class*=mobile]-app-ios > div {
    max-width: 760px;
    margin: 0 auto
}

div[class*=mobile]-app-ios .warning {
    color: red;
    background-color: transparent
}

div[class*=mobile]-app-ios .warning span {
    font-weight: bold
}

div[class*=mobile]-app-ios .step {
    margin-bottom: 15px
}

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

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

div[class*=mobile]-app-ios .steps .step-header .step-title {
    font-weight: bold;
    font-size: 16px
}

div[class*=mobile]-app-ios .steps .step-info {
    padding: 15px;
    background-color: var(--c-background-sidebar-menu-3);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    color: var(--c-text-header)
}

div[class*=mobile]-app-ios .steps .step-info .step-description {
    color: var(--c-text-header)
}

div[class*=mobile]-app-ios .steps .step-info > a {
    display: flex
}

div[class*=mobile]-app-ios .steps .step-info .image {
    padding: 15px
}

div[class*=mobile]-app-ios .steps .step-info .image img {
    width: 100%;
    background-repeat: no-repeat
}

div[class*=mobile]-app-ios .steps .step-note {
    margin-bottom: 15px;
    color: var(--c-text-odds-header)
}

div[class*=mobile]-app-ios .steps .step-note span {
    font-weight: bold
}
.footer .payments {
    display:flex;
    flex-direction:row;
   justify-content:center;
}
.footer .payments .payment {
     width: 80px;
     height:45px;
     background-repeat:no-repeat;
     background-position:center;
     background-size:100% auto;
     flex: 1 1 100%;
}
.footer .payments .payment.paystack {
    background-image:url(/v1.155/r/images/accessbet/payments/paystack1.png);
    background-size:80% auto;
}
.footer .payments .payment.monnify {
    background-image:url(/v1.155/r/images/accessbet/payments/monnify.png);
    background-size:80% auto
}
.footer .payments .payment.palmpay {
    background-image:url(/v1.155/r/images/accessbet/payments/palmpay.png)
}
.footer .payments .payment.flutterwave {
    background-image:url(/v1.155/r/images/accessbet/payments/flutterwave.png)
}
.footer .footer-menu ul{
    color:var(--c-white);
    justify-content:center;
    display:flex;
}
.footer .footer-menu {
    display: flex;
    justify-content: center;
}
#root div[class*=mobile] .footer .footer-menu li {
    width: 100%;
    display:flex;
    align-items:center;
    justify-content: center;
    padding: 5px 0;
    flex: 0 0 33%;
}
/* #root .mobile .footer .footer-menu li {
    flex: 0 0 calc(57% - 100px) !important;
} */
#root div[class*=mobile] .footer .footer-menu li a {
    padding:0px;
    width: 100%;
    justify-content: center;
    text-align: center;
    font-size:  13px;
    font-weight: 300;
}
/* #root div[class*=mobile] .footer .footer-menu li:not(:last-child)::after {
    content:"|";
    margin:0px 10px;
    color:#78859F;
} */
.customer-service {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    color:var(--c-white)
}
.customer-service {
    margin:20px 0px;
}
.customer-service .customer-service-title {
    width:100%;
    text-align:center;
}
.customer-service .customer-service-button {
    background-color:var(--primary-info-color);
    color:var(--c-black-e);
   max-width:160px;
    width:100%;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:8px;
    border-radius:5px;
    font-weight:700
}
.customer-service .customer-service-button div {
    margin-right:auto;
}
.customer-service .customer-service-button a{
    color: black
}
.customer-service .customer-service-button::before {
    content: "\e9a0";
    font-family: 'BIF';
    font-size: 24px;
    margin:0px 12px;
    background-repeat:no-repeat;
    background-position:center;
}
.customer-service .customer-service-button.chat {
    margin: 0 auto;
    cursor: pointer;
}
.customer-service .customer-service-button.chat::before {
    /* background-image:url(/v1.155/r/images/accessbet/icons/fluent_phone-chat-16-filled.svg); */
}
.customer-service .customer-service-button.telephone::before {
    background-image:url(/v1.155/r/images/accessbet/icons/material-symbols_call-log.svg)
}
.age-restriction {
    margin-top:20px;
    justify-content: center;
    display:  inline-flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
}
.age-restriction > app-widget-host {
    color:var(--color-white);
    justify-content:center;
    align-items:center;
    /* padding:0px 20px; */
    text-align:center;
}
.age-restriction .age-restriction-image {
    margin-bottom:10px;
    width: 40px;
    display:  inline-flex;
}
.scroll-to-top > div {
    display:flex;
}
.scroll-top-button {
    height:44px;
    max-width:352px;
    width:100%;
    margin: 20px auto 80px;
    border-radius:5px;
    background-color:transparent;
    border:1px solid var(--primary-info-color);
    color:var(--primary-info-color)
}
.scroll-top-button:hover {
    border:1px solid var(--secondary-success-color);
    color:var(--secondary-success-color);
}
#mainDiv:not(.view-page-) .footer-text-container {
    display:none;
}