.cekos-anuitet-preview-note {
    padding: .75em 1em;
    margin-block: 1em;
    border-inline-start: .25em solid #368400;
    background: #f1f7eb;
    color: #294020;
    font-size: 12px;
    line-height: 1.5;
}
.cekos-anuitet-preview {
    container: cekos-anuitet / inline-size;
    min-width: 0;
    max-width: 100%;
}
.cekos-anuitet-preview #main,
.cekos-anuitet-preview #mainform,
.cekos-anuitet-preview #frm_form_5_container,
.cekos-anuitet-preview #form_n0islm,
.cekos-anuitet-preview .frm_form_fields,
.cekos-anuitet-preview #frm_form_5_container fieldset {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}
.cekos-anuitet-preview #frm_form_5_container {
    margin: 20px 0;
    padding: 0;
    background: transparent;
}
.cekos-anuitet-preview #frm_form_5_container fieldset {
    margin: 0;
    padding: clamp(12px, 3vw, 24px);
    border: 1px solid #d9e1e5;
    border-radius: 6px;
    background: #f4f9fc;
}
.cekos-anuitet-preview #frm_form_5_container .frm_fields_container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.cekos-anuitet-preview #frm_form_5_container .frm_fields_container > .frm_form_field {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    float: none;
    clear: none;
}
.cekos-anuitet-preview #frm_form_5_container .frm_primary_label {
    text-align: left !important;
    color: #33444e;
    line-height: 1.45;
    min-height: 0;
    height: auto;
    padding: 0;
    margin-block-end: 6px;
}
.cekos-anuitet-preview #frm_form_5_container input[type="text"]:not(.frm_verify) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 9px 10px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
}
.cekos-anuitet-preview #frm_form_5_container #frm_field_20_container,
.cekos-anuitet-preview #frm_form_5_container .pomeridole {
    grid-column: 1 / -1;
    min-width: 0;
    margin: 0;
    padding: 0;
}
.cekos-anuitet-preview #frm_form_5_container #field_anuitetmetodainput_label {
    min-height: 0;
    width: auto;
    margin: 0;
    flex: 0 0 auto;
}
.cekos-anuitet-preview #frm_form_5_container #frm_field_20_container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.cekos-anuitet-preview #frm_field_20_container .frm_opt_container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: auto;
    min-width: 0;
}
.cekos-anuitet-preview #frm_field_20_container .frm_radio {
    margin: 0;
    padding: 0;
}
.cekos-anuitet-preview #frm_field_20_container .frm_radio label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin: 0;
    min-height: 44px;
    border: 1px solid #d9e1e5;
    border-radius: 4px;
    background: #fff;
    box-sizing: border-box;
}
.cekos-anuitet-preview #frm_field_20_container input[type="radio"] {
    flex: 0 0 auto;
    margin: 0;
}
.cekos-anuitet-preview .wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
}
.cekos-anuitet-preview .wp-block-button {
    min-width: 0;
    margin: 0;
}
.cekos-anuitet-preview .obracunajbutton,
.cekos-anuitet-preview .ponistibutton {
    box-sizing: border-box;
    min-height: 44px;
    padding: 10px 14px;
    max-width: 100%;
    white-space: normal;
}
.cekos-anuitet-preview #AnuitetOutputDiv {
    padding: 0;
    min-width: 0;
    width: 100%;
    overflow-wrap: anywhere;
}
.cekos-anuitet-preview #AnuitetOutputDiv2 {
    margin-block: 20px;
    padding: 14px;
    background: #f7fafc;
    border: 1px solid #d9e1e5;
    border-radius: 6px;
}
.cekos-anuitet-preview #AnuitetOutputDiv2 > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 4px 12px;
    padding: 5px 0;
}
.cekos-anuitet-preview #AnuitetOutputDiv2 b {
    font-weight: 400;
    color: #62717b;
    font-size: 12px;
}
.cekos-anuitet-preview #AnuitetOutputDiv2 > div:first-child {
    border-bottom: 1px solid #d9e5d0;
    padding-block-end: 10px;
    margin-block-end: 5px;
}
.cekos-anuitet-preview #OutputResultsAnuitetRate {
    color: #327400;
    font-size: 20px;
    font-weight: 700;
}
.cekos-anuitet-preview #OutputResultsAnuitetTable {
    width: 100%;
    max-width: 100%;
    font-size: 12px;
    table-layout: fixed;
}
.cekos-anuitet-preview #OutputResultsAnuitetTable td {
    overflow-wrap: anywhere;
    padding: 5px;
}
.cekos-anuitet-preview #AnuitetChartId,
.cekos-anuitet-preview #AnuitetChartId canvas {
    min-width: 0;
    max-width: 100%;
}
@media screen {
    @container cekos-anuitet (max-width: 700px) {
        .cekos-anuitet-preview #frm_form_5_container .frm_fields_container {
            grid-template-columns: minmax(0, 1fr);
        }
        .cekos-anuitet-preview #frm_form_5_container .frm_fields_container > .frm_form_field,
        .cekos-anuitet-preview #frm_form_5_container .frm_fields_container > .pomeridole {
            grid-column: 1 / -1 !important;
            grid-row: auto !important;
        }
        .cekos-anuitet-preview #frm_form_5_container .frm_primary_label {
            min-height: 0;
        }
        .cekos-anuitet-preview #frm_form_5_container #frm_field_20_container {
            flex-direction: column;
            align-items: flex-start;
        }
        .cekos-anuitet-preview #frm_form_5_container .pomeridole .wp-block-buttons {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            align-items: stretch;
            width: 100%;
        }
        .cekos-anuitet-preview #frm_form_5_container .pomeridole,
        .cekos-anuitet-preview #frm_form_5_container #frm_field_21_container {
            display: block;
            width: 100%;
            min-width: 0;
            max-width: none;
        }
        .cekos-anuitet-preview #frm_form_5_container .pomeridole .wp-block-button,
        .cekos-anuitet-preview #frm_form_5_container .pomeridole .wp-block-button > span {
            display: block;
            width: 100%;
            max-width: none;
        }
        .cekos-anuitet-preview #frm_form_5_container .pomeridole a {
            width: 100%;
            text-align: center;
        }
        .cekos-anuitet-preview #OutputResultsAnuitetTable,
        .cekos-anuitet-preview #OutputResultsAnuitetTable tbody {
            display: block;
            width: 100%;
            min-width: 0;
            border: 0;
        }
        .cekos-anuitet-preview #OutputResultsAnuitetTable tbody { position: relative; }
        .cekos-anuitet-preview #OutputResultsAnuitetTable tr:first-child {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip-path: inset(50%);
        }
        .cekos-anuitet-preview #OutputResultsAnuitetTable tr:not(:first-child) {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 5px;
            padding: 12px;
            margin-block: 0 10px;
            border: 1px solid #d9e1e5;
            border-radius: 6px;
            background: #fff;
        }
        .cekos-anuitet-preview #OutputResultsAnuitetTable tr:not(:first-child) td {
            display: flex !important;
            justify-content: space-between;
            align-items: baseline;
            gap: 12px;
            min-width: 0;
            padding: 0;
            border: 0;
            text-align: right;
        }
        .cekos-anuitet-preview #OutputResultsAnuitetTable tr:not(:first-child) td::before {
            color: #62717b;
            text-align: left;
        }
        .cekos-anuitet-preview #OutputResultsAnuitetTable tr:not(:first-child) td:nth-child(1)::before { content: "Rata br."; }
        .cekos-anuitet-preview #OutputResultsAnuitetTable tr:not(:first-child) td:nth-child(2)::before { content: "Datum"; }
        .cekos-anuitet-preview #OutputResultsAnuitetTable tr:not(:first-child) td:nth-child(3)::before { content: "Početno stanje"; }
        .cekos-anuitet-preview #OutputResultsAnuitetTable tr:not(:first-child) td:nth-child(4)::before { content: "Rata (anuitet)"; }
        .cekos-anuitet-preview #OutputResultsAnuitetTable tr:not(:first-child) td:nth-child(5)::before { content: "Dodatno plaćanje"; }
        .cekos-anuitet-preview #OutputResultsAnuitetTable tr:not(:first-child) td:nth-child(6)::before { content: "Ukupna rata"; }
        .cekos-anuitet-preview #OutputResultsAnuitetTable tr:not(:first-child) td:nth-child(7)::before { content: "Principal"; }
        .cekos-anuitet-preview #OutputResultsAnuitetTable tr:not(:first-child) td:nth-child(8)::before { content: "Kamata"; }
        .cekos-anuitet-preview #OutputResultsAnuitetTable tr:not(:first-child) td:nth-child(9)::before { content: "Ostatak kredita"; }
        .cekos-anuitet-preview #OutputResultsAnuitetTable tr:not(:first-child) td:nth-child(10)::before { content: "Kumulirana kamata"; }
        .cekos-anuitet-preview #OutputResultsAnuitetTable tr:not(:first-child) td:nth-child(1) {
            color: #327400;
            font-weight: 700;
        }
        .cekos-anuitet-preview #OutputResultsAnuitetTable tr:not(:first-child) td:nth-child(9) {
            border-top: 1px solid #edf0f2;
            padding-block-start: 5px;
            font-weight: 700;
        }
    }
}
@media print {
    .cekos-anuitet-preview-note { display: none; }
}