.D_OVERLAY {
    position: fixed !important;
    z-index: 2147483648;
    width:100%;
    height:100vh;
    overflow-x: hidden;
    background:rgba(0,0,0,0.5);    
    top:0;
}
.D_DIALOG {
    /*position: fixed !important;*/
    z-index: 1002;
    width:100%;
    max-height:100vh;
    overflow:hidden;
    
    box-sizing:border-box;
    margin-top:0;
    
    background: linear-gradient(90deg, hsla(202, 75%, 92%, 1) 0%, hsla(0, 0%, 100%, 1) 100%);
    background: -moz-linear-gradient(90deg, hsla(202, 75%, 92%, 1) 0%, hsla(0, 0%, 100%, 1) 100%);
    background: -webkit-linear-gradient(90deg, hsla(202, 75%, 92%, 1) 0%, hsla(0, 0%, 100%, 1) 100%);
    
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);    

    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

}
.BLUE_DIALOG {
    /*position: fixed !important;*/
    z-index: 1002;
    width:100%;
    max-height:100vh;
    overflow:hidden;
    background:#353688;
    color:#FFF;
    box-sizing:border-box;
    border-radius:0px;
    margin-top:0;

    border-radius:10px;
    overflow:hidden;
    
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);    
}


.D_DIALOG .content {
    position:relative;
    
    -webkit-overflow-scrolling:touch;
    background:none;
    padding:20px;
    
    overflow-y:auto;
    overflow-x:hidden;
    max-height: 100vh;
    box-sizing: border-box;
    padding-top: 70px;
    
}
.BLUE_DIALOG .content {
    position:relative;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    background:none;
    padding:30px;
    
    overflow: auto;
    max-height: 100vh;
    box-sizing: border-box;
    padding-top: 110px;
    color:#FFF;
}
.D_DIALOG .content h3 {
    text-align:center;
    margin:0px;
    margin-bottom:20px;
}
.D_DIALOG .loading {
    text-align:center;
    margin:50px 0;
}
.D_DIALOG .close {
    position:absolute;
    width:30px;
    height:30px;
    right:15px;
    top:10px;
    z-index:10;
    color:#2c2e83;
    font-size:22px;
    cursor:pointer;
}
.BLUE_DIALOG .close {
    position:absolute;
    width:30px;
    height:30px;
    right:15px;
    top:10px;
    z-index:10;
    color:#FFF;
    font-size:22px;
    cursor:pointer;
}
.D_DIALOG .title {
    
    padding:15px;
    padding-right:40px;
    margin:0px;
    margin-bottom:10px;
    text-align:center;
    color:#2c2e83;
    font-size:16px;
    font-weight:normal;
    border-bottom:1px solid #ece7eb;
    text-transform:uppercase;
    display:block;
    
    position: fixed;
    z-index: 10;
    background: #FFF;
    width: 100%;
    box-sizing:border-box;
    
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    
}
.BLUE_DIALOG .title {

    background:#353688;
    padding:30px;
    padding-right:40px;
    margin:0px;
    margin-bottom:10px;
    text-align:left;
    color:#FFF;
    font-size:16px;
    font-weight:normal;
    text-transform:uppercase;
    display:block;
    
    position: fixed;
    z-index: 10;
    width: 100%;
    box-sizing:border-box;
}

@media only screen and (min-width : 640px) {
    .D_DIALOG {
        width:600px;
        max-height:80vh;
        margin:10vh auto;
        border-radius:10px;
    }   
    .D_DIALOG .content {
        max-height:80vh;
    }
    .D_DIALOG .title {
        width:600px;
    }

    .BLUE_DIALOG {
        width:600px;
        max-height:80vh;
        margin:10vh auto;
    }
    .BLUE_DIALOG .content {
        max-height:80vh;
    }
    .BLUE_DIALOG .title {
        width:600px;
    }
}