body.responsive {
    overflow-x: hidden;
}

.section-content-desktop {
    display: none;
}

/*responsive-container*/
@media screen and (min-width: 768px) {
    /* Desktop view */

    body.responsive:not(.off) {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #121212;
    }

    .responsive:not(.off) .responsive-container {
        display: grid;
        position: relative;
        width: var(--desktop-container-width);
        min-height: 80vh;
        justify-content: center;
        padding: var(--desktop-container-padding);
        margin-left: auto;
        margin-right: auto;
        margin-top: var(--desktop-container-margin-top);
        margin-bottom: var(--desktop-container-margin-bottom);
    }

    .responsive:not(.off) .responsive-container {
        border-radius: 10px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
        background-color: #212121;
    }

    .responsive:not(.off) .page-content {
        width: calc(var(--desktop-container-width) - var(--desktop-container-padding) * 2);
    }

    .responsive:not(.off) .box-page .responsive-container {
        border-radius: 10px;
        background-color: #212121;
    }

    .responsive:not(.off) .game-page .responsive-container {
        margin-top: calc(var(--desktop-container-margin-top) + 25px);
        background-color: transparent;
        width: var(--desktop-game-page-max-width);
        padding: 0px;
        box-shadow:none;
    }

    .responsive:not(.off) .game-details-page .responsive-container {
        background-color: transparent;
        width: var(--desktop-game-page-max-width);
        padding: 0px;
    }

    .responsive:not(.off) .game-page .page-content {
        background-color: #212121;
        width: var(--desktop-game-page-max-width);
        padding: 15px;
        border-radius: 10px;
    }

    .responsive:not(.off) .game-details-page .page-content {
        background-color: #212121;
        width: var(--desktop-game-page-max-width);
        padding: 15px;
        border-radius: 10px;
    }

    .responsive:not(.off) .game-page .game-creator-details {
        margin-bottom: 10px;
        padding-left: 15px;
        padding-top: 5px;
        padding-bottom: 5px;
        border-radius: 10px;
        max-height: 60px;
    }

    .responsive:not(.off) .game-page .game-creator-details .image-link {
         padding-right: 10px;
         margin-left: -10px;
    }

    .responsive:not(.off) .page .responsive-container::-webkit-scrollbar {
        width: 8px;
    }

    .responsive:not(.off) .page .responsive-container::-webkit-scrollbar-track {
        background: #f1f1f1;
        -webkit-border-radius: 8px;
        border-radius: 8px;
    }

    .responsive:not(.off) .page .responsive-container::-webkit-scrollbar-thumb {
        background: #888;
        -webkit-border-radius: 8px;
        border-radius: 8px;
    }

    .responsive:not(.off) .page .responsive-container::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

    .responsive:not(.off) .btn-page-close {
        top: 10px;
    }

    .responsive:not(.off) .game-page .btn-page-close {
        top: -25px !important;
        right: 0px !important;
    }

    .responsive:not(.off) .btn-page-back {
        top: 10px;
        left: 10px;
    }

    .responsive:not(.off) #follow-actions,
    .responsive:not(.off) #friend-actions,
    .responsive:not(.off) #game-saved-message,
    .responsive:not(.off) #update-username-modal,
    .responsive:not(.off) #error-login-form,
    .responsive:not(.off) #error-signup-form,
    .responsive:not(.off) #link-copied-clipboard-message {
        width: var(--desktop-container-width);
        left: calc((100vw - var(--desktop-container-width) - var(--scrollbar-width))/2) !important;
    }

    .responsive:not(.off) .game-page #game-saved-message,
    .responsive:not(.off) .game-page #link-copied-clipboard-message,
    .responsive:not(.off) .game-details-page #game-saved-message,
    .responsive:not(.off) .game-details-page #link-copied-clipboard-message {
        width: var(--desktop-game-page-max-width);
        left: calc((100vw - var(--desktop-game-page-max-width) - var(--scrollbar-width))/2) !important;
    }

    .responsive:not(.off) #my-toibox-share.is-visible,
    .responsive:not(.off) #friend-list-of-friend-Share.is-visible,
    .responsive:not(.off) #my-game-gift-share.is-visible,
    .responsive:not(.off) #my-profile-share.is-visible {
        width: var(--desktop-container-width);
        left: calc((100vw - var(--desktop-container-width) - var(--scrollbar-width))/2) !important;
    }

    .responsive:not(.off) .new-user-tour-create-account-dialog,
    .responsive:not(.off) .new-user-tour-no-account-dialog,
    .responsive:not(.off) .new-user-tour-select-play-a-game-dialog,
    .responsive:not(.off) .new-user-tour-toibuck-dialog,
    .responsive:not(.off) .new-user-tour-select-interest-dialog,
    .responsive:not(.off) .new-user-tour-avatar-dialog,
    .responsive:not(.off) .new-user-tour-share-dialog,
    .responsive:not(.off) .new-user-tour-game-dialog,
    .responsive:not(.off) .new-user-tour-no-game-dialog,
    .responsive:not(.off) .new-user-tour-add-to-home-dialog,
    .responsive:not(.off) #shareGameChallengeDialog,
    .responsive:not(.off) #createGameChallengeDialog {
        width: var(--desktop-container-width);
        left: calc((100vw - var(--desktop-container-width) - var(--scrollbar-width))/2) !important;
    }

    #error-signup-verification-form,
    #signup-resend-code-form {
        width: var(--desktop-container-width);
        left: calc((100vw - var(--desktop-container-width) - var(--scrollbar-width))/2) !important;
    }

    .responsive:not(.off) .page-footer {
        margin-bottom: 0px;
        padding-bottom: 20px;
        width: 100%;
    }

    .responsive:not(.off) .sports-data-footer {
        margin-top: 0px;
    }

    .responsive:not(.off) #account-settings {
        padding-top: 30px;
    }

    .responsive:not(.off) .add-to-home-screen-modal .modal {
        display: block;
    }

    .responsive:not(.off) .add-to-home-screen-modal.modal-overlay {
        position: absolute;
        width: var(--desktop-container-width);
        left: calc((100vw - var(--desktop-container-width) - var(--scrollbar-width))/2) !important;
        align-items: start;
    }

    .responsive:not(.off) .add-to-home-screen-modal .modal-body {
        overflow: hidden;
        background-color: rgb(33 33 33 / var(--tw-bg-opacity));
    }

    .responsive:not(.off) .btn-add-to-home-screen-close {
        position: absolute;
    }

    .responsive:not(.off) #section-action-select-popup {
        width: var(--desktop-container-width);
        left: calc((100vw - var(--desktop-container-width) - var(--scrollbar-width))/2) !important;
    }

    .responsive:not(.off) .add-to-home-screen2-modal.is-visible {
        width: var(--desktop-container-width);
        left: calc((100vw - var(--desktop-container-width) - var(--scrollbar-width))/2) !important;
    }

    .responsive:not(.off) .box-page .profile-image,
    .responsive:not(.off) .box-page .avatar {
        width: var(--desktop-box-page-content-max-width);
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .responsive:not(.off) .box-page .section-content {
        width: var(--desktop-box-page-content-max-width);
        display: block;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .responsive:not(.off) .dynamic-page .section-content {
        width: var(--desktop-box-page-content-max-width);
        display: block;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .responsive:not(.off) .section-content-desktop {
        display: block !important;
    }

    .responsive:not(.off) .section-content-mobile {
        display: none !important;
    }

    .responsive:not(.off) .section-content.full-width-in-desktop {
        width: 100%;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .responsive:not(.off) .section-content.full-width-in-desktop img {
        width: 100%;
    }

    .responsive:not(.off) #thankDialog.is-visible {
        width: var(--desktop-container-width);
        left: calc((100vw - var(--desktop-container-width) - var(--scrollbar-width))/2) !important;
    }

    .responsive:not(.off) .header-menu-icon {
        position: absolute;
        top: calc(var(--desktop-container-margin-top));
        right: calc((100vw - var(--desktop-container-width) - var(--scrollbar-width))/2 + 3px) !important;
    }

    .responsive:not(.off) .header-user--avatar .noti-dot {
        position: absolute;
        top: calc(var(--desktop-container-margin-top));
        right: calc((100vw - var(--desktop-container-width) - var(--scrollbar-width))/2 + 23px) !important;
    }

    .responsive:not(.off) .hierarchy-menu {
        position: absolute;
        top: calc(var(--desktop-container-margin-top));
        right: calc((100vw - var(--desktop-container-width) - var(--scrollbar-width))/2) !important;
    }

    .responsive:not(.off) .game-details-page .header-menu-icon {
        position: absolute;
        top: calc(var(--desktop-container-margin-top) - 25px);
        right: calc((100vw - var(--desktop-game-page-max-width) - var(--scrollbar-width))/2) !important;
    }

    .responsive:not(.off) .game-details-page .header-user--avatar .noti-dot {
        position: absolute;
        top: calc(var(--desktop-container-margin-top) - 27px);
        right: calc((100vw - var(--desktop-game-page-max-width) - var(--scrollbar-width))/2 + 15px) !important;
    }

    .responsive:not(.off) .game-details-page .hierarchy-menu {
        position: absolute;
        top: calc(var(--desktop-container-margin-top) - 25px);
        right: calc((100vw - var(--desktop-game-page-max-width) - var(--scrollbar-width))/2 - 8px) !important;
    }

    .responsive:not(.off) .game-page .header-menu-icon {
        position: absolute;
        top: calc(var(--desktop-container-margin-top) - 30px);
        right: calc((100vw - var(--desktop-game-page-max-width) - var(--scrollbar-width))/2) !important;
    }

    .responsive:not(.off) .game-page .header-user--avatar .noti-dot {
        position: absolute;
        top: calc(var(--desktop-container-margin-top) - 33px);
        right: calc((100vw - var(--desktop-game-page-max-width) - var(--scrollbar-width))/2 + 15px) !important;
    }

    .responsive:not(.off) .game-page .hierarchy-menu {
        position: absolute;
        top: calc(var(--desktop-container-margin-top) - 30px);
        right: calc((100vw - var(--desktop-game-page-max-width) - var(--scrollbar-width))/2 - 8px) !important;
    }

    .responsive:not(.off) #cookie-policy-container {
        max-width: 100%;
        width: var(--desktop-container-width);
        left: calc((100vw - var(--desktop-container-width) - var(--scrollbar-width))/2) !important;
        right:auto;
    }

    .responsive:not(.off) .dynamic-page .section-title {
        margin-left: -24px;
        margin-right: -24px;
    }
}

@media screen and (min-width: 768px) and (max-height: 919px) {
    /* Desktop view */
}

@media screen and (max-width: 767px) {
    /* Mobile view */
    .responsive:not(.off) .responsive-container {
        display: block;
        position: relative;
    }

    .responsive:not(.off) .responsive-container .phone-frame {
        display: none;
    }

    .responsive:not(.off) #account-settings {
        padding-top: 40px;
    }

    .responsive:not(.off) .game-page .game-creator-details {
        display: none;
    }

    .responsive:not(.off) .game-page .btn-page-close {
        top: 35px !important;
        right: 10px !important;
    }

    .responsive:not(.off) .section-content-desktop {
        display: none !important;
    }

    .responsive:not(.off) .section-content-mobile {
        display: block !important;
    }

    #cookie-policy-container {
        max-width: 100%;
        width: 100%;
        left: 0px;
        right: 0px;
    }
}
/*end responsive-container*/