.overlay {
    background: var(--overlay);
    bottom: 0;
    display: block;
    height: auto;
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
    z-index: 100002;
    
    &.as-page {
       background: var(--bg-primary);
       height: 100vh;   
       padding: 4.4rem 3.2rem;
       pointer-events: auto;   
       width: 100%;    
        
       h1 {
          font-size: 1.9rem;
          margin-bottom: 1.5rem;
       }
    }
}

.popup {
    background-color: var(--popup-bg);
    border: none;
    border-radius: .6rem;
    display: inline-block;
    font-size: $app-font-base;
    font-weight: var(--font-weight-normal);
    left: 50%;  
    overflow: hidden;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    user-select: none;

    .buttons .button {
        font-size: 1.4rem;
    }
}

.message {
    color: var(--text-primary-color);
    font-weight: var(--font-weight-normal);
    margin: 0;
    padding: 4rem;
    position: relative;
    text-align: left;

    &.text-centered {
        text-align: center;
    }
}

h1,
h2 {
    font-size: 1.6rem;
    font-weight: var(--font-weight-semibold);
    margin: 0 0 7rem 0;
    text-align: center;
    text-transform: none;
}

h1 {
    margin: 1rem 0 3rem 0;
}

body[data-os="win"] {
    .overlay {
        height: calc(100% - 22px);
        top: 22px;
    }
}

body[data-os="linux"] {
    .overlay {
        height: calc(100%);
        top: 0;
    }
}
