*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
html,
body{

    width:100%;
    min-height:100vh;
    overflow:hidden;

    font-family:"Segoe UI",Arial,sans-serif;

    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;

}
.brandHeader{

    position:fixed;

    top:25px;

    left:25px;

    display:flex;

    align-items:center;

    gap:12px;

    z-index:99999;

}

.brandHeader img{

    width:46px;

    height:46px;

    object-fit:contain;

}

.brandText{

    color:#0b3d91;

}

#brandTitle{

    font-size:22px;

    font-weight:700;

    line-height:1;

}

#brandSubTitle{

    font-size:14px;

    color:#1f66ff;

    margin-top:4px;

}

.popupWindow{

    position:fixed;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    z-index:9999;

    animation:popup .22s ease;

}

.popupCard{
    width:min(460px, 92vw);
    max-width:460px;
    background: #ececec;
    border: 1px solid #8d8d8d;
    border-radius: 6px;      /* almost square */
    box-shadow: 0 10px 25px rgba(0,0,0,.35);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
}

.popupHeader{
    height: 42px;
    background: linear-gradient(#f8f8f8,#d8d8d8);
    border-bottom: 1px solid #bcbcbc;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#000;
    font-size:15px;
    font-weight:600;
}

.popupBody{
    background:#fff;
    padding:22px;
    color:#222;
}

.popupBody p{
    margin:0;
    text-align:left;
    font-size:15px;
    line-height:22px;
}

.buttonGroup{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:24px;
}

.buttonGroup{
    margin-top:24px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.actionBtn{
    min-width:110px;
    height:36px;
    padding:0 20px;
    border:1px solid #b5b5b5;
    border-radius:4px;
    background:#f5f5f5;
    color:#222;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:all .15s ease;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.actionBtn:hover{
    background:#e8e8e8;
    border-color:#8d8d8d;
}

.actionBtn:active{
    background:#dcdcdc;
    transform:scale(.98);
}
.dangerRed,
.blue{
    background:#ff0a0a;
    border-color:#ff0a0a;
    color:#fff;
}

.dangerRed:hover,
.blue:hover{
    background:#ff0a0a;
    border-color:#ff0a0a;
}
.green{
    background:#34C759;
    border-color:#34C759;
    color:#fff;
}

.green:hover{
    background:#28B44B;
}
.dangerCrimson,
.dangerDark,
.orange{
    background:#F2F2F2;
    border-color:#BEBEBE;
    color:#222;
}

.dangerCrimson:hover,
.dangerDark:hover,
.orange:hover{
    background:#E6E6E6;
}

@keyframes popup{

from{

opacity:0;

transform:scale(.75);

}

to{

opacity:1;

transform:scale(1);

}

}

@media (max-width:767px){

    .popupCard{

        width:92vw;

        border-radius:10px;

    }

    .popupBody{

        padding:18px;

    }

    .popupBody p{

        font-size:14px;

        line-height:20px;

    }

    .buttonGroup{

        gap:8px;

    }

    .actionBtn{

        width:100%;

        max-width:none;

        min-width:unset;

        height:42px;

    }

}
@media (min-width:768px) and (max-width:1199px){

    .popupCard{

        width:420px;

    }

}
@media (max-width:767px){

    .brandHeader{

        top:15px;

        left:15px;

    }

    .brandHeader img{

        width:34px;

        height:34px;

    }

    #brandTitle{

        font-size:17px;

    }

    #brandSubTitle{

        font-size:11px;

    }

}