/** 
 * Modal
 *
 */
.theme-modal {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: var( --theme-color-background );
    width: 40%;
    z-index: 9999;  
    overflow-y: auto;
    align-items: flex-start!important;
    transition: .7s linear;
    margin-left: -110% !important;
    padding-bottom: calc( var(--theme-padding) * 2 );
}

.theme-modal > .theme-grid > *:not(:last-child) {
    margin-bottom: var( --theme-margin );
}

.theme-modal > .theme-grid > .theme-grid-row-language {
    margin-bottom: calc( var(--theme-margin ) * 2 );
}

.theme-modal .theme-grid > div:first-child {
    padding: var( --theme-padding );
    background-color: var( --theme-color-background );
}

@media only screen and (max-width: 1200px) {
    .theme-modal {
        width:50%;
    }
}

@media only screen and (max-width: 1024px) {
    .theme-modal {
        width:75%;
    }
}

@media only screen and (max-width: 768px) {
    .theme-modal {
        width:100%;
    }
}

.theme-modal-menu.theme-modal-active {
    transition: .7s linear;
    margin-left: 0 !important;
}

.theme-modal-logo {
    font-size: 28px;
    line-height: 28px;
    font-weight: 600;
}

.theme-modal-logo a {
    display: block;
    color: var( --theme-color );
}

.theme-modal-logo svg {
    display: block;
    width: auto;
    height: 33px;
}

@media only screen and (max-width: 768px) {
    .theme-modal-logo svg {
        height: 20px;
    }
}