.capi-moda {
    --capi-moda-width: 520px;
    --capi-moda-height: 560px;

    --capi-moda-header-height: 38px;
    --capi-moda-footer-height: 38px;
    --capi-moda-border-radius: 8px;
    --capi-moda-inner-radius: 4px;
}

.color-light {
    --capi-moda-background: #EEEEEE;
    --capi-moda-color: var(--noti-fonc, #000000);
}

.color-noti {
    --capi-moda-background: var(--noti-fonc, #E36B0A);
    --capi-moda-color: #FFFFFF;
}

.color-them {
    --capi-moda-background: var(--them-fonc, #445F73);
    --capi-moda-color: #FFFFFF;
}

.size-xs {
    --capi-moda-width: 300px;
    --capi-moda-height: 420px;
}

.size-md {
    --capi-moda-width: calc(min(95vw, 520px));
    --capi-moda-height: calc(min(95vh, 560px));
}

.size-lg {
    --capi-moda-width: calc(min(95vw, 640px));
    --capi-moda-height: calc(min(95vh, 560px));
}

.size-xl {
    --capi-moda-width: calc(min(95vw, 1080px));
    --capi-moda-height: calc(min(95vh, 720px));
}

.capi-moda {
    width: var(--capi-moda-width);
    max-width: var(--capi-moda-width);
    height: var(--capi-moda-height);
    max-height: var(--capi-moda-height);

    display: flex;
    flex-direction: column;
    gap: 0px;

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    overflow: hidden;

    background: var(--capi-moda-background, #FFFFFF);
    border-radius: var(--capi-moda-border-radius);
    box-shadow: 0 0 20px 5px #00000050;

    font-family: 'Inter';
}

.capi-moda.height-auto {
    height: unset;
    max-height: 90vh;
}

.capi-moda.position-top {
    top: 20%;
    transform: translateX(-50%) translateY(0%);
}

.capi-moda-head, .capi-moda-foot {
    height: unset;
    min-height: var(--capi-moda-header-height);
    
    display: flex;
    align-items: center;

    padding: 8px;
}

.capi-moda-foot {
    justify-content: flex-end;
    /* padding-left: 16px; */
}

.capi-moda-foot.empty-foot {
    min-height: 8px;
    height: 8px;
    padding: 0px;
}

.capi-moda-head button {
    height: calc(var(--capi-moda-header-height) - 16px);
    width: calc(var(--capi-moda-header-height) - 16px);

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;

    background-color: #FFFFFF;
    color: var(--capi-moda-background, #000000);
    font-size: 12px;
    border-radius: calc(var(--capi-moda-border-radius) - 4px);
}

.capi-moda-foot button {
    height: calc(var(--capi-moda-header-height) - 16px);
    min-width: calc(var(--capi-moda-header-height) - 16px);

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;

    background-color: #FFFFFF;
    color: var(--capi-moda-background, #000000);
    font-size: 12px;
    border-radius: calc(var(--capi-moda-border-radius) - 4px);
}

.capi-moda-head button:hover,
.capi-moda-foot button:hover {
    color: #FFFFFF;
    background-color: color-mix(in srgb, var(--capi-moda-background, #000000) 80%, #FFFFFF 20%);
}

.capi-moda-titr {
    flex-grow: 1;
    color: var(--capi-moda-color, #000000);
}

.capi-moda-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;

    padding: 4px;
    overflow: auto;

    border-radius: var(--capi-moda-inner-radius);
    font-size: 13px;
}