/* The Modal (background) */
.modal {
    display: block;
    position: fixed;
    z-index: 10;
    top: 23%;
    left: -10px;
    overflow: auto;
    border-bottom-right-radius: 30px;
    border-top-right-radius: 30px;
    background-color: white;
    border-style: solid;
    border-width: 1px;
    border-color: var( --e-global-color-3071bbf );
    padding: 12px;


    opacity: 1;
    transform: translateY(50px);
    transition: opacity 1s ease-in-out 1s, transform 1s ease-in-out 1s;
    visibility: visible;
}

.modal:hover{
    background-color: #d9d9d9;
}


#userpopupbt{
    font-family: var( --e-global-typography-accent-font-family ), Sans-serif;
    font-size: var( --e-global-typography-accent-font-size );
    font-weight: var( --e-global-typography-accent-font-weight );
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 0px;
    padding-bottom: 0px;
    color: black;
    background-color: transparent;   
    cursor: pointer;
}

/* The Modal (background) */
.modal2 {
    display: block;
    position: fixed;
    z-index: 10;
    top: 30%;
    left: -10px;

    overflow: auto;
    border-bottom-right-radius: 30px;
    border-top-right-radius: 30px;
    background-color: white;
    border-style: solid;
    border-width: 1px;
    border-color: var( --e-global-color-3071bbf );
    padding: 12px;

    opacity: 1;
    transform: translateY(50px);
    transition: opacity 1s ease-in-out 1s, transform 1s ease-in-out 1s;
    visibility: visible;
}

.modal2:hover{
    background-color: #d9d9d9;
}

@media only screen and (max-width: 768px) {
    .modal {
        padding: 2px;
    }
}

@media only screen and (max-width: 768px) {
    .modal2 {
        padding: 2px;
    }
}

@media only screen and (max-width: 768px) {
    #userpopupbt{
        font-size: 12px !important;
    }
}

@media only screen and (max-width: 1024px) and (orientation: landscape) {
    .modal {
        top: 20%;
    }
}

@media only screen and (max-width: 668px) and (orientation: landscape) {
    .modal {
        top: 17%;
    }
}


@media only screen and (min-width: 1024px) and (max-height: 768px) and (orientation: portrait) {
    .modal {
        top: 20%;
    }
}

@media only screen and (min-width: 1365px) and (max-height: 769px){
    .modal {
        top: 18%;
    }
}