@font-face {
    font-family: 'notoSansRegular';
    src: url('/english/fonts/IndosatRegular-Regular.woff2');
}

@font-face {
    font-family: 'notoSansSemiBold';
    src: url('/english/fonts/IndosatMedium-Medium.woff2');
}

@font-face {
    font-family: 'robotoMedium';
    src: url('/english/fonts/IndosatMedium-Medium.woff2');
}

@font-face {
    font-family: 'Ooredoo-Heavy';
    src: url('/english/fonts/IndosatBold-Bold.woff');
}

html {
    background-color: #000;
}

body {
    background-color: #FAFBFD;
    max-width: 500px;
    padding-right: 0 !important;
    overflow: visible !important;
    font-family: notoSansRegular;
}

    body.launching {
        background: #FFD500;
    }

header {
    box-shadow: 0px 1px 4px rgb(0 0 0 / 7%);
    background-color: #fff;
    position: fixed;
    max-width: 500px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 1000 !important;
}

a {
    color: #000;
    text-decoration: none;
    border: none;
    outline: 0 !important;
}

    a:active {
        color: #000;
        text-decoration: none;
        border: none;
        outline: 0 !important;
    }

    a:hover {
        color: #000;
        text-decoration: none;
        border: none;
        outline: 0 !important;
    }

button {
    border: 0 !important;
    outline: 0 !important;
}

footer nav.fixed-bottom {
    background-color: #fff;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.05);
    max-width: 500px;
    left: 50%;
    transform: translate(-50%, 0px);
    width: 100%;
}

footer nav.launching-home {
    background-color: #FFD500;
    max-width: 500px;
    left: 50%;
    transform: translate(-50%, 0px);
    width: 100%;
}

.offcanvas-body a {
    color: #000;
    font-weight: 500;
}

.offcanvas-start {
    width: 270px !important;
    border: none !important;
}

.innerContent {
    margin-top: 42px;
}

.library.innerContent {
    margin-top: 60px;
}

.topBanner img {
    max-width: 446px;
    width: 100%;
}

.topBanner.mb-3 {
    margin-top: 1rem !important;
}

.carouselBanners {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
}

    .carouselBanners::-webkit-scrollbar {
        height: 8px;
    }

    .carouselBanners::-webkit-scrollbar-thumb {
        background-color: #dedede;
        border-radius: 20px;
    }

.homeBanners .singleImg img {
    max-width: 285px;
}

.homeChallenges .singleImg img {
    max-width: 375px;
}

.homeContent .singleImg img {
    max-width: 241px;
}

.homeChallengePrizes .singleImg img {
    max-width: 305px;
}

.homeStore .singleImg img {
    max-width: 220px;
}

.singleStore.innerContent {
    margin-top: 40px;
}

.font-weight-bold {
    font-weight: bold
}

.text--black {
    color: #000
}

.customDialog {
    max-width: 410px;
}

    .customDialog .modal-content {
        border-radius: 15px;
    }

.card.challenges {
    margin-right: 15px !important;
    border-radius: .75rem !important;
    border: none !important;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.03) !important;
    width: 331px !important;
    margin-top: 15px;
}

.card.content {
    margin-right: 15px !important;
    border-radius: .75rem !important;
    border: none !important;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.03) !important;
    width: 218px !important;
    margin-top: 15px;
}

.card.list-challenges {
    /*margin-right: 15px !important;*/
    border-radius: .75rem !important;
    border: none !important;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.03) !important;
    max-width: 100% !important;
    margin-top: 15px;
    height: auto;
}

.card-img-top {
    border-radius: 0 !important;
}

h6.card-title {
    font-family: 'Ooredoo-Heavy';
    font-size: 17px !important;
    margin-bottom: 0px !important;
}

.card-title h6 {
    font-family: 'Ooredoo-Heavy';
    font-size: 17px !important;
    margin-bottom: 0px !important;
}

.challenge-body {
    padding-top: 15px;
    padding-left: 18px;
}

.card.list-stores {
    border-radius: .75rem !important;
    border: none !important;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.03) !important;
    /*width: 100% !important;*/
    margin-top: 15px;
    max-width: 218px;
    height: 100%;
}

.store-body {
    padding-top: 20px;
    padding-left: 15px;
    padding-right: 15px;
}

.card.single-store {
    border-radius: .75rem !important;
    border: none !important;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.03) !important;
    max-width: 446px !important;
    margin-bottom: 15px;
}

.singleStep img {
    width: 100%;
}

.modal-body p.title {
    font-family: 'Ooredoo-Heavy';
    font-size: 20px !important;
    margin-bottom: 11px !important;
}

.modal-body p.sub-title {
    margin-bottom: 11px !important;
}

.modal-footer button.btn-modal {
    font-family: 'Ooredoo-Heavy';
    font-size: 16px !important;
}

.modal-footer button.btn-modal {
    border-radius: 30px;
    border: transparent !important;
    background-color: #ED1C24;
    color: #fff;
    padding-left: 20px;
    padding-right: 20px;
    height: 50px;
    outline: 0 !important;
}

.modal-footer {
    justify-content: right;
}

.btn-modal:hover,
.btn-modal:focus,
.btn-modal:active,
.btn-modal:checked {
    border: transparent !important;
    background-color: #E80D15 !important;
    color: #fff !important;
    text-decoration: none !important;
    outline: 0 !important;
}

.btn-close:hover,
.btn-close:focus,
.btn-close:active {
    text-decoration: none !important;
    border: 0 !important;
    border-color: transparent !important;
    outline: 0 !important;
}


/*.customDialog .closeImg {
    max-width: 38px;
}*/

.customDialog .mainImg {
    max-width: 100%;
}

.leaderBoardTop {
    top: 50px;
    background-color: #FFD500;
}

.singleChallenge.innerContent {
    margin-top: 2.5rem;
}

.lastChallenge {
    padding-bottom: 225px;
}

.fixed-bottom.stickyButton {
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 999;
    bottom: 70px;
    max-width: 500px;
    padding: 30px 0;
    background-color: transparent;
    width: 100%;
}

.fixed-bottom.stickyHButton {
    left: 50%;
    z-index: 999;
    bottom: 0px;
    max-width: 500px;
    padding: 30px 0;
    transform: translate(-50%, 0);
    background-color: transparent;
    /*| backdrop-filter: blur(5px);*/
    width: 100%;
}


/*.modal-body {
    padding: 0rem !important;
    border-radius: 15px;
}

.modal-style {
    border: 0px !important;
    height: 250px !important;
    width: 100%;
}*/


/*.launchingPopup {
    max-width: 445px;
}

.launchingPopup .modal-content {
    background-color: transparent
}

.launchingPopup .modal-content .closeCta {
    right: 15px;
    top: 15px;
}

.launchingPopup .modal-content .closeImg {
    max-width: 40px;
}

.launchingPopup .modal-content .mainImg {
    max-width: none;
}*/

.sticky-top.storeSticky {
    top: 60px;
    background-color: #fff;
    padding-bottom: 15px;
}

.homeBanners.storeSticky .singleImg img {
    max-width: 290px;
}

.leaderPage.innerContent {
    margin-top: 30px;
}

.homeBanners.contentBanner .singleImg img {
    max-width: 435px;
}

.contentBlocks .singleImg img {
    max-width: 236px;
}

.subscriptionBanners .singleImg img {
    max-width: 320px;
}

@media (max-width: 500px) {
    .carouselBanners::-webkit-scrollbar {
        display: none
    }

    header,
    footer nav.fixed-bottom {
        transform: none;
        left: 0;
    }

    h6.card-title {
        font-size: 16px !important;
    }

    .challenge-body.pre-1 {
        padding-top: 14px !important;
    }

    h6.card-title.per {
        padding-bottom: .25rem !important;
    }
}

@media (max-width: 320px) {
    .fixed-bottom.stickyButton {
        bottom: 117px;
        padding: 15px 0;
    }

    h6.card-title {
        font-size: 16px !important;
    }

    .challenge-body.pre-1 {
        padding-top: 14px !important;
    }

    h6.card-title.per {
        padding-bottom: .25rem !important;
    }
}
.modal-body img {
    width: 100%;
}
a img, a:hover img,a:focus img, a {
    outline: none !important;
}