﻿@media (min-width:769px) {
    .line-pagamento-topup {
        background-color: transparent;
        height: 2px;
        left: 0px;
        width: 100%;
        margin-top: var(--margin-dimension);
        margin-bottom: var(--margin-dimension);
    }

 .panel-regsiter-form {
        display: flex;
        flex-direction: row;
        margin-top: 45px;
        width: 60%;
    }
    .rectangle-blue {
        background-color: var(--blue-ribbon);
        border-radius: 10px;
        margin-left: 15px;
        margin-right: 15px;
        mix-blend-mode: normal;
        margin-top: var(--margin-dimension);
        padding: 20px 10px 20px 10px;
        line-height: 1.2;
        gap: 15px;
        display: flex;
        flex-direction: column;
        padding: 15px;
    }
    .rectangle-blue-mobile
    {
        display:none;
    }

    .frame-registrazione {
        background-color: var(--white);
        border-radius: 20px;
        box-shadow: 0px 6px 12px #0000002e;
        padding: 15px 10px 30px 10px;
        margin-top: var(--margin-dimension);
        width: 100%;
    }

    .first-frame-topup {
        background-color: var(--white);
        border-radius: 20px;
        box-shadow: 0px 6px 12px #0000002e;
        padding: 15px 10px 30px 10px;
        margin-top: var(--margin-dimension);
        width: 66%;
    }
    .second-frame-topup {
        background-color: var(--white);
        border-radius: 20px;
        box-shadow: 0px 6px 12px #0000002e;
        padding: 15px 10px 30px 10px;
        margin-top: 30px;
        margin-left: 15px;
        width: 33%;
    }
    .panel-doppia-virtuali {
        display: flex;
        margin-top: var(--margin-dimension);
        width: 100%;
        gap: 15px;
    }
    .panel-mezzo {
        width: 50%;
    }
    .line-articolo-topup {
        background-color: transparent;
        height: 1px;
        left: 0px;
        width: 100%;
    }
    .content-all-frame, .content-all-frame-special {
        display: flex;
        flex-direction: row;
        width: 100%;
    }
}

@media only screen and (min-width: 591px) and (max-width: 768px) {

    .line-pagamento-topup {
        width: 100%;
    }  .panel-regsiter-form {
        display: flex;
        flex-direction: row;
        margin-top: 45px;
        width: 90%;
    }

    .login-container {
        width: 100%;
    }

    .login-content {
        width: 100%;
    }

    .rectangle-blue {
        display: none;
    }

    .panel-internal-big {
    }

    .rectangle-blue-mobile {
        background-color: var(--blue-ribbon);
        border-radius: 10px;
        mix-blend-mode: normal;
        margin-top: var(--margin-dimension);
        padding: 20px 10px 20px 10px;
        line-height: 1.2;
        gap: 15px;
        display: flex;
        flex-direction: column;
        padding: 15px;
    }
    .frame-registrazione {
        background-color: var(--white);
        border-radius: 20px;
        box-shadow: 0px 6px 12px #0000002e;
        padding: 15px 10px 30px 10px;
        margin-top: var(--margin-dimension);
        width: 100%;
    }
    .first-frame-topup {
        background-color: var(--white);
        border-radius: 20px;
        box-shadow: 0px 6px 12px #0000002e;
        padding: 15px 10px 30px 10px;
        margin-top: var(--margin-dimension);
        width: 60%;
    }

    .second-frame-topup {
        background-color: var(--white);
        border-radius: 20px;
        box-shadow: 0px 6px 12px #0000002e;
        padding: 15px 10px 30px 10px;
        margin-top: 30px;
        margin-left: 15px;
        width: 38%;
    }

    .panel-doppia-virtuali {
        display: flex;
        margin-top: var(--margin-dimension);
        width: 100%;
        gap: 15px;
        flex-direction: column;
    }

    .panel-mezzo {
        width: 100%;
    }

    .line-articolo-topup {
        background-color: transparent;
        height: 1px;
        left: 0px;
        width: 100%;
    }
    .content-all-frame, .content-all-frame-special {
        display: flex;
        flex-direction: row;
        width: 100%;
    }
}
@media only screen and (min-width: 350px) and (max-width: 590px) {

    .line-pagamento-topup {
        width: 100%;
    }  .panel-regsiter-form {
        display: flex;
        flex-direction: row;
        margin-top: 45px;
        width: 90%;
    }

    .login-container {
        width: 100%;
    }

    .login-content {
        width: 100%;
    }

    .rectangle-blue {
        display: none;
    }

    .panel-internal-big {
    }

    .rectangle-blue-mobile {
        background-color: var(--blue-ribbon);
        border-radius: 10px;
        mix-blend-mode: normal;
        margin-top: var(--margin-dimension);
        padding: 20px 10px 20px 10px;
        line-height: 1.2;
        gap: 15px;
        display: flex;
        flex-direction: column;
        padding: 15px;
    }

    .first-frame-topup, .frame-registrazione {
        background-color: var(--white);
        border-radius: 20px;
        box-shadow: 0px 6px 12px #0000002e;
        padding: 15px 10px 30px 10px;
        margin-top: var(--margin-dimension);
        width: 100%;
    }

    .second-frame-topup {
        background-color: var(--white);
        border-radius: 20px;
        box-shadow: 0px 6px 12px #0000002e;
        padding: 15px 10px 30px 10px;
        margin-top: 30px;
        width: 100%;
    }

    .panel-doppia-virtuali {
        display: flex;
        margin-top: var(--margin-dimension);
        width: 100%;
        gap: 15px;
        flex-direction: column;
    }

    .panel-mezzo {
        width: 100%;
    }

    .line-articolo-topup {
        background-color: transparent;
        height: 1px;
        left: 0px;
        width: 100%;
    }
    .content-all-frame {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .content-all-frame-special {
        display: flex;
        width: 100%;
    }
}

.button-green-disable {
    align-items: center;
    background-color: var(--brand-color);
    border-radius: 10px;
    box-shadow: 0px 6px 12px #0000002e;
    padding: 10px 10px 10px 10px;
    letter-spacing: 0.09px;
    line-height: 27px;
    text-align: center;
    white-space: nowrap;
    height: 47px;
    border: none;
    font-family: var(--font-family-rubik);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 700;
    cursor: not-allowed;
    opacity: 0.5;
    color: var(--white) !important;
    text-decoration: none !important;
    text-transform: none !important;
    pointer-events: none;
}

    .title-white {
    color: var(--white);
    line-height: 30px;
}
    .panel-space-register {
        display: flex;
        flex-direction: column;
        margin-top: 15px;
    }

.panel-space-register-row {
    display: flex;
    flex-direction: row;
}
   .panel-register-right {
        display: flex;
        width: 50%;
        flex-direction: column;
        background-color: #1db954;
        border-radius: 0px 10px 10px 0px;
        box-shadow: 0px 6px 12px #00000033;
        padding: 30px;
    }

    .panel-registered-separate {
        margin-top: 60px;
        line-height: 30px;
    }

    .panel-registered-separate-small {
        margin-top: 15px;
        line-height: 30px;
    }

    .panel-register-centered {
        padding: 15px;
    }

    .panel-testo {
        width: 90%;
    }

    .title-space-left-register {
        margin-left: 20px;
        margin-top: 15px;
    }

    .testo-space-register {
        letter-spacing: 0;
        line-height: 30px;
        margin-top: 25px;
        margin-left: 20px;
        max-width: 1000px;
    }



    .rectagle-vertical {
        display: list-item;
        gap: 30px;
        list-style-type: disc;
        margin-left: 15px;
    }


    .panel-margin-top {
        margin-top: 60px;
    }

    .title-numeri-virtuali {
        margin-left: 20px;
    }

    .panel-numeri-virtuali {
        display: flex;
        flex-direction: column;
        margin-top: 15px;
        align-items: center;
        margin-left: 20px;
    }



    .sa-error-container {
        margin-top: 40px;
    }

    .cancel {
        background-color: var(--red) !important;
        margin-right: 30px;
    }

    /*Start menu disabled*/
    @media (min-width: 769px) {
        .elementoMenuDisabled {
            display: flex;
            cursor: not-allowed;
            opacity: 0.5;
        }

            .elementoMenuDisabled > a {
                color: currentColor;
                display: inline-block; /* For IE11/ MS Edge bug */
                pointer-events: none;
                text-decoration: none;
            }

        .testoMenuDisabled {
            cursor: not-allowed;
            opacity: 0.5;
        }

            .testoMenuDisabled > a {
                color: currentColor;
                display: inline-block;
                pointer-events: none;
                text-decoration: none;
                text-transform: none;
            }

        .iconLeftMenuDisable {
            cursor: not-allowed;
        }

            .iconLeftMenuDisable > a {
                color: currentColor;
                display: inline-block;
                pointer-events: none;
                text-decoration: none;
                text-transform: none;
            }

        .elemento-menu-secondario {
            margin-left: 15px;
            margin-top: 5px;
            height: 48px;
            position: relative;
            cursor: not-allowed;
            opacity: 0.5;
        }

            .elemento-menu-secondario > a {
                color: currentColor;
                display: inline-block;
                pointer-events: none;
                text-decoration: none;
                text-transform: none;
            }
    }

    @media (min-width: 1450px) {
        .iconLeftMenuDisable {
            align-items: center;
            display: flex;
            justify-content: center;
            margin-left: 15px;
            height: 48px;
        }

        .menuLeftDiscesa {
            height: 24px;
            width: 24px;
            margin-left: 8px;
            margin-top: 15px;
        }

        .testoMenuDisabled {
            flex-direction: column;
            justify-content: center;
            font-family: var(--font-family-rubik-medium);
            font-size: var(--font-size-m);
            font-weight: 700;
            display: flex;
            letter-spacing: 1px;
            line-height: 27px;
            margin-left: 8px;
            margin-top: 3px;
            white-space: nowrap;
            width: 80%;
        }
    }

    @media only screen and (min-width: 970px) and (max-width: 1450px) {

        .iconLeftMenu, .iconLeftMenuDisable {
            align-items: center;
            display: flex;
            justify-content: center;
            margin-left: 15px;
            height: 40px;
        }

        .menuLeftDiscesa {
            height: 24px;
            width: 24px;
            margin-left: 6px;
            margin-top: 10px;
        }
    }

    @media only screen and (min-width: 1150px) and (max-width: 1450px) {

        .testoMenuDisabled {
            flex-direction: column;
            justify-content: center;
            font-family: var(--font-family-rubik-medium);
            font-size: var(--font-size-m);
            font-weight: 700;
            display: flex;
            letter-spacing: 1px;
            line-height: 27px;
            margin-left: 8px;
            margin-top: 3px;
            white-space: nowrap;
            width: 80%;
        }

        .testoMenu {
            flex-direction: column;
            justify-content: center;
            font-family: var(--font-family-rubik-medium);
            font-size: var(--font-size-m);
            font-weight: 700;
            display: flex;
            letter-spacing: 1px;
            line-height: 27px;
            margin-left: 8px;
            margin-top: 3px;
            white-space: nowrap;
            cursor: pointer;
            width: 80%;
        }

        .testoMenu-selected {
            flex-direction: column;
            justify-content: center;
            font-family: var(--font-family-rubik);
            font-size: var(--font-size-m);
            font-weight: 700;
            display: flex;
            letter-spacing: 1px;
            line-height: 27px;
            margin-left: 8px;
            margin-top: 3px;
            white-space: nowrap;
            cursor: pointer;
            width: 80%;
        }

        .testoMenu-secondario {
            display: flex;
            letter-spacing: 0.09px;
            line-height: 27px;
            margin-left: 8px;
            white-space: nowrap;
            flex-direction: column;
            justify-content: center;
            font-family: var(--font-family-rubik);
            font-size: var(--font-size-m);
            font-weight: 700;
            text-decoration: none;
        }

        .testoMenu-secondario-selected {
            display: flex;
            height: 48px;
            width: 80%;
            letter-spacing: 0.09px;
            line-height: 27px;
            margin-left: 8px;
            white-space: nowrap;
            flex-direction: column;
            justify-content: center;
            color: var(--slimy-green);
            font-family: var(--font-family-rubik);
            font-size: var(--font-size-m);
            font-style: normal;
            font-weight: 700;
            text-decoration: none;
        }
    }

    @media only screen and (min-width: 970px) and (max-width: 1150px) {

        .testoMenuDisabled {
            flex-direction: column;
            justify-content: center;
            font-family: var(--font-family-rubik-medium);
            font-size: var(--font-size-s);
            font-weight: 700;
            display: flex;
            letter-spacing: 1px;
            line-height: 27px;
            margin-left: 8px;
            margin-top: 3px;
            white-space: nowrap;
            width: 80%;
        }


        .testoMenu {
            flex-direction: column;
            justify-content: center;
            font-family: var(--font-family-rubik-medium);
            font-size: var(--font-size-s);
            font-weight: 700;
            display: flex;
            letter-spacing: 1px;
            line-height: 27px;
            margin-left: 8px;
            margin-top: 3px;
            white-space: nowrap;
            cursor: pointer;
            width: 80%;
        }

        .testoMenu-selected {
            flex-direction: column;
            justify-content: center;
            font-family: var(--font-family-rubik);
            font-size: var(--font-size-s);
            font-weight: 700;
            display: flex;
            letter-spacing: 1px;
            line-height: 27px;
            margin-left: 8px;
            margin-top: 3px;
            white-space: nowrap;
            cursor: pointer;
            width: 80%;
        }

        .testoMenu-secondario {
            display: flex;
            letter-spacing: 0.09px;
            line-height: 27px;
            margin-left: 8px;
            white-space: nowrap;
            flex-direction: column;
            justify-content: center;
            font-family: var(--font-family-rubik);
            font-size: var(--font-size-s);
            font-weight: 700;
            text-decoration: none;
        }

        .testoMenu-secondario-selected {
            display: flex;
            height: 48px;
            width: 80%;
            letter-spacing: 0.09px;
            line-height: 27px;
            margin-left: 8px;
            white-space: nowrap;
            flex-direction: column;
            justify-content: center;
            color: var(--slimy-green);
            font-family: var(--font-family-rubik);
            font-size: var(--font-size-s);
            font-style: normal;
            font-weight: 700;
            text-decoration: none;
        }
    }

    @media only screen and (min-width: 769px) and (max-width: 970px) {
        .iconLeftMenu, .iconLeftMenuDisable {
            align-items: center;
            display: flex;
            justify-content: center;
            margin-left: 15px;
            height: 34px;
        }

        .menuLeftDiscesa {
            height: 24px;
            width: 24px;
            margin-left: 6px;
            margin-top: 10px;
        }
    }

    @media only screen and (min-width: 769px) and (max-width: 970px) {
        .testoMenuDisabled {
            flex-direction: column;
            justify-content: center;
            font-family: var(--font-family-rubik-medium);
            font-size: var(--font-size-s);
            font-weight: 700;
            display: flex;
            letter-spacing: 1px;
            line-height: 27px;
            margin-left: 8px;
            margin-top: 3px;
            white-space: nowrap;
            width: 80%;
        }

        .testoMenu {
            flex-direction: column;
            justify-content: center;
            font-family: var(--font-family-rubik-medium);
            font-size: var(--font-size-s);
            font-weight: 700;
            display: flex;
            letter-spacing: 1px;
            line-height: 27px;
            margin-left: 8px;
            margin-top: 3px;
            white-space: nowrap;
            cursor: pointer;
            width: 80%;
        }

        .testoMenu-selected {
            flex-direction: column;
            justify-content: center;
            font-family: var(--font-family-rubik);
            font-size: var(--font-size-s);
            font-weight: 700;
            display: flex;
            letter-spacing: 1px;
            line-height: 27px;
            margin-left: 8px;
            margin-top: 3px;
            white-space: nowrap;
            cursor: pointer;
            width: 80%;
        }

        .testoMenu-secondario {
            display: flex;
            letter-spacing: 0.09px;
            line-height: 27px;
            margin-left: 8px;
            white-space: nowrap;
            flex-direction: column;
            justify-content: center;
            font-family: var(--font-family-rubik);
            font-size: var(--font-size-s);
            font-weight: 700;
            text-decoration: none;
        }

        .testoMenu-secondario-selected {
            display: flex;
            height: 48px;
            width: 80%;
            letter-spacing: 0.09px;
            line-height: 27px;
            margin-left: 8px;
            white-space: nowrap;
            flex-direction: column;
            justify-content: center;
            color: var(--slimy-green);
            font-family: var(--font-family-rubik);
            font-size: var(--font-size-s);
            font-style: normal;
            font-weight: 700;
            text-decoration: none;
        }
    }

@media only screen and (min-width: 700px) and (max-width: 768px)
{
    .nosottomenumenu-disable {
        color: var(--text);
        font-family: var(--font-family-rubik);
        font-size: var(--font-size-m);
        font-style: normal;
        font-weight: 700;
        cursor: not-allowed;
        opacity: 0.5;
        display: flex;
        align-items: center;
    }

    .iconMenuTop-disable {
        align-items: center;
        display: flex;
        height: 48px;
        justify-content: center;
        width: 48px;
        cursor: not-allowed;
    }
    .onclick-menu-disable {
        color: var(--text);
        font-family: var(--font-family-rubik);
        font-size: var(--font-size-m);
        font-style: normal;
        font-weight: 700;
        display: flex;
        flex-direction: column;
        width: 95%;
        cursor: not-allowed;
        opacity: 0.5;
    }
}
@media only screen and (min-width: 500px) and (max-width: 700px) {
    .nosottomenumenu-disable {
        color: var(--text);
        font-family: var(--font-family-rubik);
        font-size: var(--font-size-s);
        font-style: normal;
        font-weight: 700;
        cursor: not-allowed;
        opacity: 0.5;
        display: flex;
        align-items: center;
    }


   .iconMenuTop-disable {
        align-items: center;
        display: flex;
        height: 40px;
        justify-content: center;
        width: 40px;
        cursor: not-allowed;
    }
    .onclick-menu-disable {
        color: var(--text);
        font-family: var(--font-family-rubik);
        font-size: var(--font-size-s);
        font-style: normal;
        font-weight: 700;
        display: flex;
        flex-direction: column;
        width: 95%;
        cursor: not-allowed;
        opacity: 0.5;
    }
}
@media (max-width: 500px) {
    .nosottomenumenu-disable {
        color: var(--text);
        font-family: var(--font-family-rubik);
        font-size: var(--font-size-xs);
        font-style: normal;
        font-weight: 700;
        cursor: not-allowed;
        opacity: 0.5;
        display: flex;
        align-items: center;
    }

    .iconMenuTop-disable {
        align-items: center;
        display: flex;
        height: 35px;
        justify-content: center;
        width: 35px;
        cursor: not-allowed;
    }
    .onclick-menu-disable {
        color: var(--text);
        font-family: var(--font-family-rubik);
        font-size: var(--font-size-xs);
        font-style: normal;
        font-weight: 700;
        display: flex;
        flex-direction: column;
        width: 95%;
        cursor: not-allowed;
        opacity: 0.5;
    }
}
.internal-menu-disable {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    position: relative;
    cursor: not-allowed;
}
