body.no-scroll {
    overflow: hidden;
}

.modal {
    display: none; 
    position: inherit;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; 
    overflow: hidden;
}

.modal-content {
    position: relative;
    width: 100%;
    display: flex;
}

.modal-container {
    width: 100%;
    padding: 30px 23px 50px 23px;
}
.modal-container.login {
   /* background-color: #FFFFFF;*/
}
  
.modal-close {
    position: absolute;
    right: 20px;
    top: 16px;
    cursor: pointer;
    line-height: 1;
    display: none;
}

/* Close button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
  
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.modal-container.login {
    display: none;
}

.modal-container.register {
    display: none;
}

.modal-container .logo-modal {
    display: none;
}

@media (min-width: 768px) {

    .modal {
        z-index: 9999;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(70deg, rgba(15, 16, 72, 0.5) 0%, rgba(15, 16, 72, 0.20) 143.39%);
        backdrop-filter: blur(5px);
        mix-blend-mode: normal;
        position: fixed;
        overflow: auto;
    }

    .modal-content {
        position: relative;
        background-color: #FFFFFF;
        margin: 80px auto 60px;
        width: 448px;
        display: flex;
        border-radius: 4px 4px 10px 10px;
        border-top: 4px solid #6C6CFF;
    }

    .modal-container {
        width: 100%;
        padding: 45px 45px 46px;
    }

    .modal-close {
        display: block;
    }

    .modal-container .logo-modal {
        display: block;
        height: 26px;
    }

}