/*
cpkmodal.css
*/


/*
    CPockets modal
*/

/* Desktop and tablet */

.cpk_modal_dialog{
    width:600px;
    max-width:calc(100% - 40px);
    margin:30px auto;
}

#universal_cpk_modal .cpk_modal_container{
    border-radius:10px;
    overflow:hidden;
}

.cpk_modal_header{
    display:flex;
    align-items:center;
    gap:10px;
    padding:16px 20px;
}

.cpk_modal_header .modal-title{
    flex:1;
    min-width:0;
    font-weight:600;
}

.cpk_modal_close{
    flex:0 0 44px;
    width:44px;
    height:44px;
    font-size:26px;
    opacity:.7;
}

.cpk_modal_body{
    padding:20px;
    max-height:calc(100vh - 230px);
    overflow-y:auto;
}

.cpk_modal_footer{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    padding:14px 20px;
}


/* Mobile */

@media (max-width:768px){

    .cpk_modal_dialog{
        width:100%;
        max-width:none;
        margin:0;
        min-height:100vh;
    }

    .cpk_modal_container{
        min-height:100vh;
        border-radius:0;
        display:flex;
        flex-direction:column;
    }

    .cpk_modal_header{
        flex:0 0 auto;
        padding:12px 16px;
    }

    .cpk_modal_body{
        flex:1 1 auto;
        min-height:0;
        max-height:none;
        overflow-y:auto;
        padding:16px;
    }

    .cpk_modal_footer{
        flex:0 0 auto;
        padding:12px 16px;
    }

}

.cpk_modal_dialog_workspace{
    width:950px;
    max-width:calc(100% - 40px);
}