/*****************************************
       Moved to main.css
******************************************/



.menu .menu-link,
.menu .menu-link:hover,
.menu .menu-link.active{
    background-color: transparent
}


/*****************************************
    Header Top Menu > Bonus Page
******************************************/


.bonus-content {
    width: 100%;
    padding-top: 0;
    margin: 0;

}
.bonus-container{
    display: flex;
    max-width: 1140px;
    margin: 0 auto;
    padding: 20px
}

.bonus-container > app-widget-host{
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px
}
.bonus-content .section-title{
    font-family: "Roboto Condensed", Sans-serif;
    font-size: 36px;
    text-align: center;
    font-weight: bold;
    text-transform: capitalize;
    padding: 20px 10px 20px;
    width: 100%;
    background-color: var(--c-white);
    margin-bottom: 30px;
    line-height: normal;
     color: var(--c-emphasis-b)
}

.bonus-container .bonus-card-wrap{
    flex: 0 0 calc(33.333333% - 20px);
    border-radius: 25px;
    overflow: hidden
}
.bonus-container .bonus-card-wrap.sports-bg{
    background-color: var(--c-emphasis-b);
}
.bonus-container .bonus-card-wrap.casino-bg{
    background-color: var(--c-emphasis-d);
}
.bonus-container .bonus-card-wrap img{
    object-fit: cover;
    width: 100%;
}
.bonus-container .bonus-card-wrap .bonus-card-description-wrap{
    padding: 15px 35px;
    color: var(--c-white)
}
.bonus-container .bonus-card-wrap .game-type{
    font-family: "Roboto Condensed", Sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
    margin-bottom: 15px
}
.bonus-container .bonus-card-wrap .promotion-title{
    font-family: "Roboto Condensed", Sans-serif;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px
}
.bonus-container .bonus-card-wrap .promotion-content{
    font-family: "Roboto Condensed", Sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 15px

}
.bonus-container .bonus-card-wrap .bonus-card-ctas > app-widget-host{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px
}
.bonus-container .bonus-card-wrap .bonus-card-cta{
    border: 1px solid;
    border-radius: var(--r-border-radius-small);
    min-width: 105px;
    text-align: center;
    font-family: "Roboto Condensed", Sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition: all .3s ease-in-out
}
.bonus-container .bonus-card-wrap .bonus-card-cta > div{
    padding: 12px 10px;
}
.bonus-container .bonus-card-wrap .more-info:hover {
    background-color: var(--c-white);
    color: var(--c-emphasis-b)
}
.bonus-container .bonus-card-wrap .bet-now{
    background-color: var(--c-white);
    color: var(--c-emphasis-b)
}
.bonus-container .bonus-card-wrap .bet-now:hover{
    background-color: transparent;
    color: var(--c-white)
}



/* */

.single-bonus-page{
    background-color: var(--c-background-b)
}
.single-bonus-container .single-bonus-image img{
     width: 100vw;
     display: block
}
.single-bonus-description-wrap{

}
.single-bonus-container .bonus-steps{
    background-color: var(--c-background)
}
.single-bonus-container .bonus-steps > app-widget-host{
    max-width: 1140px;
    margin: 0 auto;
    padding: 20px 10px
}
.single-bonus-container .steps-title{
    text-align: center;
    font-family: "Manrope", Sans-serif;
    font-size: 26px;
    font-weight: 400;
    line-height: 1.2
}
.single-bonus-container .steps-wrap > app-widget-host{
    flex-direction: row;
    counter-reset: list-counter;
}
.single-bonus-container .step-desctiption{
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    padding: 20px 0;
    font-family: "Manrope", Sans-serif;
    font-weight: 400;
    font-size: 18px;
    counter-increment: list-counter
}
.single-bonus-container .step-desctiption:before{
    content: counter(list-counter);
    border: 2px solid;
    border-radius: 50%;
    font-weight: bold;
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.single-bonus-container .single-bonus-description{
    max-width: 1140px;
    margin: 0 auto;
    padding: 20px 10px;
}
.single-bonus-container .single-bonus-bottom-wrap{
    background-color: var(--c-background);
}
.single-bonus-container .single-bonus-bottom-wrap > app-widget-host{
     flex-direction: row;
     max-width: 1140px;
    margin: 0 auto;
    padding: 50px 10px
}
.single-bonus-container .single-bonus-bottom-wrap .single-bonus-bottom img{
    width: 50px;
    height: 50px
}
.single-bonus-container .single-bonus-bottom-wrap .single-bonus-bottom{
    flex: 1
}
.single-bonus-container .single-bonus-bottom-wrap .single-bonus-bottom > app-widget-host{
    flex-direction: row;
    align-items: center;
    gap: 20px
}
.single-bonus-container .single-bonus-bottom-wrap .single-bonus-bottom .single-bonus-bottom-text > app-widget-host{
    gap: 10px
}
.single-bonus-container .single-bonus-bottom-wrap .single-bonus-bottom .bold{
    font-size: 18px;
    font-weight: bold
}
.single-bonus-container .single-bonus-bottom-wrap .single-bonus-bottom .normal{
    font-size: 18px 
}






/*****************************************
    Header Top Menu > About Page
******************************************/

.about-page .body,
.contact-page .body,
.bet-type-page .body,
.faq .body,
.instruction-help .body{   
}

.about-us-menu,
.bet-type-menu {
    display: flex
}
.about-us-menu > ul,
.bet-type-menu > ul{
    flex-direction: row;
    max-width: 1120px;
    margin: 0 auto
}
.about-us-menu > ul > li,
.bet-type-menu > ul > li{
    font-size: 18px;    
    font-weight: bold;
    line-height: 57px;
    cursor: pointer;
    height: 57px;
    margin-right: 30px
}

.about-us-menu .menu .menu-link,
.about-sub-menu .sub-menu-text a,
.bet-type-menu .menu .menu-link{
    color: var(--c-text-primary)
}
.about-us-menu .menu .menu-link:hover,
.about-us-menu .menu .menu-link.active,
.bet-type-menu .menu .menu-link:hover,
.bet-type-menu .menu .menu-link.active{
    color: var(--c-border-sport-coupon)
}
.about-sub-menu .sub-menu-title,
.about-sub-menu .sub-menu-title-content,
.instruction-help .sub-title,
.contact-title,
.contact-sub-title,
.toggle-menu .bet-type-title{
    font-size: 22px;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--c-border-sport-coupon);
    line-height: 30px;
    margin: 25px 0
}
.theme-dark .about-sub-menu .sub-menu-title,
.theme-dark .about-sub-menu .sub-menu-title-content,
.theme-dark .instruction-help .sub-title,
.theme-dark .contact-title,
.theme-dark .contact-sub-title,
.theme-dark .toggle-menu .bet-type-title{
   color: var(--c-text-title);
}
.about-sub-menu .sub-menu-title-content,
 .contact-sub-title,
.toggle-menu .bet-type-title{
    text-transform: capitalize;
    font-weight: normal
}
.about-sub-menu .sub-menu-text,
.contact-text,
.toggle-menu .bet-type-text,
.contact-header{
    font-size: 14px;
    line-height: 22px;    
    margin-bottom: 20px
}
.contact-text > app-widget-host{
    flex-direction: row
}
.contact-text strong{
    font-weight: bold;
    margin-right: 10px
}
.contact-text strong:last-child{
    font-weight: normal
}
.about-sub-menu .sub-menu-text span{
    font-weight: bold;
}
.about-sub-menu .sub-menu-text span:before{
    content: "\2027";
    margin-right: 15px
}
.sub-menu-merge{
    display: flex;
    align-items: center
}
.about-sub-menu .sub-menu-image,
.image-box  img,
.contact-img{
    height: 50px;
    width: 90px;
    min-width: 90px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain   
}
.contact-img{
    height: 100%;
    margin-right: 50px
}
.about-sub-menu .sub-menu-image.info-img{
     background-image: url(/v2.238/r/images/tipster/information.svg)
}
.about-sub-menu .sub-menu-image.protection-img{
    background-image: url(/v2.238/r/images/tipster/security.svg)
}

.about-sub-menu .sub-menu-image.prevention-img{
    background-image: url(/v2.238/r/images/tipster/hand.svg)
}
.about-sub-menu .sub-menu-image.information-img{
    background-image: url(/v2.238/r/images/tipster/information-variant.svg);
    height: 100px;
    width: 100%
}
.about-sub-menu .sub-menu-image.security-img{
    background-image: url(/v2.238/r/images/tipster/hand.svg)
}
.about-sub-menu .sub-menu-image.prevention-img-first{
    background-image: url(/v2.238/r/images/tipster/security.svg)
}
.about-sub-menu .sub-menu-image.prevention-img-second{
    background-image: url(/v2.238/r/images/tipster/18-icon-white.svg)
}
.about-sub-menu .sub-menu-merge > app-widget-host{
    flex-direction: row;
    align-items: center
}
.about-sub-menu .sub-menu-link{
    display: flex;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
   
}
.about-sub-menu .sub-menu-link:before{
    content: "";
    background-image: url(/v2.238/r/images/megabet/arrow-right.svg);
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 15px
}
.about-sub-menu .sub-menu-link a {
    color: var(--c-text-primary)  
}
.contact-content-page .license{
    flex-direction: column
}
.contact-content-page .license .link-group-header,
.contact-content-page .license .link-group-header p{
    margin-bottom: 0
}

/******************************************
  Header Top Menu > Instruction Help Page
******************************************/

.holder-boxes > app-widget-host{
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start    
}
.header-box{
    align-items: center;
    border-bottom: 1px solid var(--c-text-title);
    display: flex;
    flex-direction: column
}
.instruction-help .header-box > app-widget-host{
    align-items: center
}
.instruction-help .image-box {
    background-color: var(--c-background-header);
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%
}
.theme-dark .instruction-help .image-box{

}
.instruction-help .title-box{
    font-size: 17px;
    font-weight: bold;
    color: var(--c-border-sport-coupon);
    padding: 20px 0 40px
}
.merge-box{   
    overflow: hidden;
    display: flex;
    padding: 0 1% 3% 1%;
    min-height: 510px
}
.instruction-help .merge-box{
    flex: 0 1 25%
}

.contact .merge-box{
    min-height:   auto;
    padding-bottom: 0;
    display: flex;
    flex-direction: column
}

.instruction-help .merge-box > app-widget-host{
    padding: 30px;
    background: var(--c-background-primary);
    box-shadow: var(--bs-)
}
.content-page,
.boxed-content{    
    width: 100% 
}

.instruction-help .bottom-box,
.instruction-help .bottom-box > app-widget-host{
    height: 100%
}
.text-box,
.contact .title-box{
    color: var(--c-text-title);
    font-size: 14px;
    padding: 22px 0 50px;
    line-height: 22px;
    margin-bottom: auto
}
.contact .text-box{
    display: flex;
    justify-content: center;
    cursor: pointer
}
.contact .text-box:hover{
    color: var(--c-border-sport-coupon)
}
.contact .text-box p{
    margin: 0
}
.contact .title-box{
    padding-bottom: 10px
}
.instruction-help .button-box{
    background-color: var(--c-internal-user-background);
    color: var(--c-text-header);
    display: flex;
    justify-content: center;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
    align-items: center;
    height: 46px;
    border-radius: 8px;
    cursor: pointer
}
.instruction-help .button-box > div{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%
    
}


/******************************************
  Header Top Menu > Contact Page
******************************************/

.contact .content-page {
    width: 100%
}

.contact .contact-header ,
.contact .contact-options{
    align-items: center;
    display: flex
}
.contact .contact-options {
    flex-direction: column;
    align-items: flex-start
}


/******************************************
  Header Top Menu > Bet Type Page
******************************************/


.toggle-menu input {
    position: absolute;
    opacity: 0;
    z-index: -1
}
.toggle-menu .tabs {   
    overflow: hidden  
}
.toggle-menu .tab {
    width: 100%;
    color: var(--c-text-header);
    overflow: hidden;
    margin-bottom: 10px;
    font-size: 15px;
}
.toggle-menu .tab-label {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 10px 15px;
    cursor: pointer;
    background: var(--c-background-header-menu);
    border-radius: 8px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    color: #fff
}

.toggle-menu .tab-label::after {
    content: "\276F";
    width: 1em;
    height: 1em;
    text-align: center;
    -webkit-transition: all .35s;
    transition: all .35s
}

.toggle-menu .tab-content {
    max-height: 0;
    padding: 0 20px;
    color: var(--c-text-primary);
    -webkit-transition: all .35s;
    transition: all .35s;
    background: var(--c-background-primary);
    line-height: 22px   
}
.toggle-menu .tab-close {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: end;
    justify-content: flex-end;
    padding: 1em;
    font-size: 0.75em;
    background: var(--c-background-header)
    cursor: pointer
}
.toggle-menu .tab-close:hover {
    background: var(--c-background-header)
}

.toggle-menu input:checked + .tab-label {
    background-color: var(--c-background-header-menu)
}
.toggle-menu input:checked + .tab-label::after {
    -webkit-transform: rotate(90deg);
     transform: rotate(90deg)
}
.toggle-menu input:checked ~ .tab-content {
    max-height: 9999px;
    padding: 20px
}