:root {
    --magno-orange: #ed713d;
    --magno-yellow: #ffb12b;
    --magno-text: #262020;
    --magno-white: #ffffff;
}

body.modal-open {
    overflow: hidden !important;
}

#modalMagno {
    padding-right: 0 !important;
}

    #modalMagno.modal.show {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    #modalMagno .modal-magno-dialog {
        width: calc(100% - 32px);
        max-width: 980px;
        margin: 16px auto !important;
    }

    #modalMagno .modal-magno {
        border: 0;
        border-radius: 4px;
        background: var(--magno-white);
        color: var(--magno-text);
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
    }

    #modalMagno .modal-magno-body {
        max-height: calc(100vh - 48px);
        overflow-y: auto;
        padding: 42px 64px 32px;
        text-align: center;
    }

    #modalMagno .modal-magno-title {
        margin: 0 0 26px;
        color: var(--magno-orange);
        font-size: 40px;
        font-weight: 800;
        line-height: 1.15;
        text-align: center;
    }

    #modalMagno .modal-magno-text {
        max-width: 860px;
        margin: 0 auto 20px;
        color: var(--magno-text);
        font-size: 27px;
        font-weight: 500;
        line-height: 1.32;
        text-align: center;
    }

    #modalMagno .modal-magno-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 414px;
        max-width: 100%;
        min-height: 66px;
        margin: 24px auto 38px;
        padding: 0 48px;
        border: 0;
        border-radius: 999px;
        background: var(--magno-yellow);
        color: var(--magno-text);
        font-size: 28px;
        font-weight: 800;
        line-height: 1;
        cursor: pointer;
    }

        #modalMagno .modal-magno-btn:hover {
            filter: brightness(0.98);
        }

        #modalMagno .modal-magno-btn:focus {
            outline: 3px solid var(--magno-orange);
            outline-offset: 4px;
        }

    #modalMagno .modal-magno-help {
        margin: 0;
        color: var(--magno-text);
        font-size: 25px;
        font-weight: 500;
        line-height: 1.32;
        text-align: center;
    }

    #modalMagno .modal-magno-highlight {
        color: var(--magno-orange);
    }

    #modalMagno .modal-magno-brand {
        display: flex;
        justify-content: center;
        margin-top: 30px;
    }

    #modalMagno .modal-magno-logo {
        width: 340px;
        max-width: 100%;
        height: auto;
        display: block;
    }

.modal-backdrop.show {
    opacity: 0.7;
}