/* default styles for extension "tx_frontend" */
    :root {
    /* ==========================================================================
        TYPO3 CONTENT ELEMENTS (TX_FRONTEND) DEFAULTS
        ========================================================================== */

    /* --- Spacings & Margins (iz TYPO3 Konstanti) --- */
    --ce-text-margin: 10px;
    --ce-column-spacing: 10px;
    --ce-row-spacing: 10px;
    --ce-list-padding-left: 40px;

    /* --- Flex Gallery & Rows --- */
    --ce-gallery-display: flex;
    --ce-gallery-direction: column;
    --ce-gallery-wrap: nowrap;
    --ce-gallery-justify: flex-start;
    --ce-gallery-align: stretch;
    --ce-gallery-gap: var(--ce-row-spacing);
    // --ce-gallery-margin-bottom: var(--ce-text-margin);

    --ce-row-display: flex;
    --ce-row-direction: row;
    --ce-row-wrap: wrap;
    --ce-row-justify: flex-start;
    --ce-row-align: stretch;
    --ce-row-gap: var(--ce-column-spacing);

    // --ce-intext-gallery-margin: var(--ce-text-margin);

    /* --- Gallery Floats --- */
    --ce-gallery-float-left: left;
    --ce-gallery-float-right: right;

    /* --- Borders & Media (iz TYPO3 Konstanti) --- */
    --ce-border-width: 2px;
    --ce-border-style: solid;
    --ce-border-color: #000000;
    --ce-border-padding: 0px;

    /* --- Uploads --- */
    --ce-uploads-margin: 0;
    --ce-uploads-padding: 0;
    --ce-uploads-item-margin: 1em 0;
    --ce-uploads-icon-padding-right: 1em;

    /* --- Table System --- */
    --ce-table-width: 100%;
    --ce-table-padding-v: 0.5em;
    --ce-table-padding-h: 0.75em;
    --ce-table-vertical-align: top;
    --ce-table-border-color: #dadada;
    --ce-table-border-width: 1px;
    --ce-table-header-border-width: 2px;
    --ce-table-stripe-bg: rgba(0, 0, 0, 0.05);

    /* --- Frames & Rulers --- */
    --frame-ruler-border-width: 1px;
    --frame-ruler-border-style: solid;
    --frame-ruler-border-color: rgba(0, 0, 0, 0.25);
    --frame-ruler-margin: 2em;

    --frame-indent-margin: 15%;
    --frame-indent-side-margin: 33%;
    }


    /* ==========================================================================
    ALIGNMENTS & BASIC LAYOUT
    ========================================================================== */

    .ce-align-left   { text-align: var(--ce-align-left-custom, left); }
    .ce-align-center { text-align: var(--ce-align-center-custom, center); }
    .ce-align-right  { text-align: var(--ce-align-right-custom, right); }

    /* Gallery Floats (samo za .ce-left i .ce-right) */
    .ce-left .ce-gallery { 
        float: var(--ce-gallery-float-left-custom, var(--ce-gallery-float-left, left)); 
    }

    .ce-right .ce-gallery { 
        float: var(--ce-gallery-float-right-custom, var(--ce-gallery-float-right, right)); 
    }
    .ce-above .ce-bodytext { 
        clear: var(--ce-bodytext-clear-custom, both); 
    }

    /* ==========================================================================
    MEDIA & BORDERS
    ========================================================================== */

    .ce-gallery figure { 
        display: var(--ce-gallery-figure-display-custom, table); 
        margin: var(--ce-gallery-figure-margin-custom, 0); 
    }

    .ce-gallery figcaption { 
        display: var(--ce-gallery-caption-display-custom, table-caption); 
        caption-side: var(--ce-gallery-caption-side-custom, bottom); 
    }

    .ce-gallery img { 
        display: var(--ce-gallery-img-display-custom, block); 
    }

    .ce-gallery iframe { 
        border-width: var(--ce-gallery-iframe-border-custom, 0); 
    }

    .ce-border img,
    .ce-border iframe {
        border: var(--ce-border-width-custom, var(--ce-border-width, 2px)) 
                var(--ce-border-style-custom, var(--ce-border-style, solid)) 
                var(--ce-border-color-custom, var(--ce-border-color, #000000));
        padding: var(--ce-border-padding-custom, var(--ce-border-padding, 0px));
    }

    /* ==========================================================================
    FLEX GALLERY & ROW SYSTEM
    ========================================================================== */

    .ce-gallery {
        max-width: var(--ce-gallery-max-width-custom, var(--ce-gallery-max-width));
        display: var(--ce-gallery-display-custom, var(--ce-gallery-display, flex));
        flex-direction: var(--ce-gallery-direction-custom, var(--ce-gallery-direction, column));
        flex-wrap: var(--ce-gallery-wrap-custom, var(--ce-gallery-wrap, nowrap));
        justify-content: var(--ce-gallery-justify-custom, var(--ce-gallery-justify, flex-start));
        align-items: var(--ce-gallery-align-custom, var(--ce-gallery-align, stretch));
        gap: var(--ce-gallery-gap-custom, var(--ce-gallery-gap, var(--ce-row-spacing, 10px)));
        margin-bottom: var(--ce-gallery-margin-bottom-custom, var(--ce-gallery-margin-bottom, var(--ce-text-margin, 10px)));
    }

    .frame-mediaslider {
    --ce-gallery-margin-bottom: 0;
    }

    .ce-image .ce-gallery { 
        margin-bottom: var(--ce-image-gallery-margin-bottom-custom, 0); 
    }

    .ce-row {
        display: var(--ce-row-display-custom, var(--ce-row-display, flex));
        flex-direction: var(--ce-row-direction-custom, var(--ce-row-direction, row));
        flex-wrap: var(--ce-row-wrap-custom, var(--ce-row-wrap, wrap));
        justify-content: var(--ce-row-justify-custom, var(--ce-row-justify, flex-start));
        align-items: var(--ce-row-align-custom, var(--ce-row-align, stretch));
        gap: var(--ce-row-gap-custom, var(--ce-row-gap, var(--ce-column-spacing, 10px)));
        margin-bottom: 0;
    }

    /* Auto Flex Basis po kolonama sa TYPO3 fallback gap-om */
    .ce-row > * {
        flex-grow: var(--ce-column-flex-grow-custom, 1);
        flex-shrink: var(--ce-column-flex-shrink-custom, 0);
        flex-basis: calc((100% - (var(--ce-columns-count, 1) - 1) * var(--ce-row-gap-custom, var(--ce-row-gap, 10px))) / var(--ce-columns-count, 1));
        max-width: calc((100% - (var(--ce-columns-count, 1) - 1) * var(--ce-row-gap-custom, var(--ce-row-gap, 10px))) / var(--ce-columns-count, 1));
    }

    /* TYPO3 Data-Attribute Mapiranje za Kolone */
    .ce-gallery[data-ce-columns="1"] { --ce-columns-count: 1; }
    .ce-gallery[data-ce-columns="2"] { --ce-columns-count: 2; }
    .ce-gallery[data-ce-columns="3"] { --ce-columns-count: 3; }
    .ce-gallery[data-ce-columns="4"] { --ce-columns-count: 4; }
    .ce-gallery[data-ce-columns="5"] { --ce-columns-count: 5; }
    .ce-gallery[data-ce-columns="6"] { --ce-columns-count: 6; }
    .ce-gallery[data-ce-columns="7"] { --ce-columns-count: 7; }
    .ce-gallery[data-ce-columns="8"] { --ce-columns-count: 8; }

    /* Intext & Positioning Spacings sa TYPO3 fallback-om */
    .ce-intext:after {
        display: block;
        height: 1px;
        content: " ";
        overflow: hidden;
        width: 100%;
    }
    .ce-intext.ce-right .ce-gallery { 
        margin-left: var(--ce-intext-gallery-margin-left-custom, var(--ce-intext-gallery-margin, var(--ce-text-margin, 10px))); 
        margin-bottom: var(--ce-intext-gallery-margin-bottom-custom, var(--ce-intext-gallery-margin, var(--ce-text-margin, 10px)));
    }

    .ce-intext.ce-left .ce-gallery { 
        margin-right: var(--ce-intext-gallery-margin-right-custom, var(--ce-intext-gallery-margin, var(--ce-text-margin, 10px))); 
        margin-bottom: var(--ce-intext-gallery-margin-bottom-custom, var(--ce-intext-gallery-margin, var(--ce-text-margin, 10px)));
    }

    .ce-above .ce-gallery {
        margin-bottom: var(--ce-above-gallery-margin-bottom-custom, var(--ce-text-margin, 10px));
    }

    .ce-below .ce-gallery { 
        margin-top: var(--ce-below-gallery-margin-top-custom, var(--ce-text-margin, 10px)); 
    }

    /* Lists */
    .ce-intext.ce-left ol, 
    .ce-intext.ce-left ul { 
        padding-left: var(--ce-list-padding-left-custom, var(--ce-list-padding-left, 40px)); 
        overflow: var(--ce-list-overflow-custom, auto); 
    }

    /* ==========================================================================
    HEADLINES
    ========================================================================== */

    .ce-headline-left   { text-align: var(--ce-headline-align-left-custom, left); }
    .ce-headline-center { text-align: var(--ce-headline-align-center-custom, center); }
    .ce-headline-right  { text-align: var(--ce-headline-align-right-custom, right); }

    /* ==========================================================================
    UPLOADS
    ========================================================================== */

    .ce-uploads { 
        margin: var(--ce-uploads-margin-custom, var(--ce-uploads-margin, 0)); 
        padding: var(--ce-uploads-padding-custom, var(--ce-uploads-padding, 0)); 
    }

    .ce-uploads li { 
        list-style: var(--ce-uploads-list-style-custom, none outside none); 
        margin: var(--ce-uploads-li-margin-custom, var(--ce-uploads-item-margin, 1em 0)); 
    }

    .ce-uploads img { 
        float: var(--ce-uploads-img-float-custom, left); 
        padding-right: var(--ce-uploads-img-padding-right-custom, var(--ce-uploads-icon-padding-right, 1em)); 
        vertical-align: var(--ce-uploads-img-vertical-align-custom, top); 
    }

    .ce-uploads span { 
        display: var(--ce-uploads-span-display-custom, block); 
    }

    /* ==========================================================================
    TABLES
    ========================================================================== */

    .ce-table { 
        width: var(--ce-table-width-custom, var(--ce-table-width, 100%)); 
        max-width: var(--ce-table-max-width-custom, 100%); 
    }

    .ce-table th, 
    .ce-table td { 
        padding: var(--ce-table-padding-v-custom, var(--ce-table-padding-v, 0.5em)) var(--ce-table-padding-h-custom, var(--ce-table-padding-h, 0.75em)); 
        vertical-align: var(--ce-table-vertical-align-custom, var(--ce-table-vertical-align, top)); 
        border-top: var(--ce-table-border-width-custom, var(--ce-table-border-width, 1px)) solid var(--ce-table-border-color-custom, var(--ce-table-border-color, #dadada));
    }

    .ce-table thead th { 
        border-bottom: var(--ce-table-header-border-width-custom, var(--ce-table-header-border-width, 2px)) solid var(--ce-table-border-color-custom, var(--ce-table-border-color, #dadada)); 
    }

    .ce-table-striped tbody tr:nth-of-type(odd) { 
        background-color: var(--ce-table-stripe-bg-custom, var(--ce-table-stripe-bg, rgba(0,0,0,.05))); 
    }

    .ce-table-bordered th, 
    .ce-table-bordered td { 
        border: var(--ce-table-bordered-width-custom, var(--ce-table-border-width, 1px)) solid var(--ce-table-border-color-custom, var(--ce-table-border-color, #dadada)); 
    }

    /* ==========================================================================
    FRAMES & RULERS
    ========================================================================== */

    .frame-ruler-before::before { 
        content: ''; 
        display: var(--frame-ruler-display-custom, block); 
        border-top: var(--frame-ruler-border-width-custom, var(--frame-ruler-border-width, 1px)) var(--frame-ruler-border-style-custom, var(--frame-ruler-border-style, solid)) var(--frame-ruler-border-color-custom, var(--frame-ruler-border-color, rgba(0,0,0,0.25))); 
        margin-bottom: var(--frame-ruler-margin-bottom-custom, var(--frame-ruler-margin, 2em)); 
    }

    .frame-ruler-after::after { 
        content: ''; 
        display: var(--frame-ruler-display-custom, block); 
        border-bottom: var(--frame-ruler-border-width-custom, var(--frame-ruler-border-width, 1px)) var(--frame-ruler-border-style-custom, var(--frame-ruler-border-style, solid)) var(--frame-ruler-border-color-custom, var(--frame-ruler-border-color, rgba(0,0,0,0.25))); 
        margin-top: var(--frame-ruler-margin-top-custom, var(--frame-ruler-margin, 2em)); 
    }

    .frame-indent { 
        /*margin-left: var(--frame-indent-margin-left-custom, var(--frame-indent-margin, 15%)); 
        margin-right: var(--frame-indent-margin-right-custom, var(--frame-indent-margin, 15%)); */
    }

    .frame-indent-left { 
        /*margin-left: var(--frame-indent-left-margin-custom, var(--frame-indent-side-margin, 33%)); */
    }

    .frame-indent-right { 
        /*margin-right: var(--frame-indent-right-margin-custom, var(--frame-indent-side-margin, 33%)); */
    } 

    .ce-center .ce-gallery figure {
        --ce-gallery-figure-margin-custom: 0 auto;
    }
    .ce-right .ce-gallery figure {
        --ce-gallery-figure-margin-custom: 0 0 0 auto;
    }
/* default styles for extension "tx_srfreecap" */
		.tx-srfreecap-image-accessible {
			background-color: transparent;
			vertical-align: middle;
		}
		.tx-srfreecap-accessible-link { width: 10em; float: right; vertical-align: middle; margin-right: 7em; }
		/*.tx-srfreecap-cant-read { display: inline-block; width: 150px; }*/
		.tx-srfreecap-cant-read a:link { background-color:transparent; font-weight:bold; text-decoration:none; }
/* default styles for extension "tx_srfreecap_pi2" */
		.tx-srfreecap-pi1-captcha label { display: inline-block; width: 150px; }
		img.tx-srfreecap-pi1-image { margin-left: 1em; margin-right: 1em; vertical-align: middle; }
		.tx-srfreecap-pi1-image-accessible {
			background-color: transparent;
			vertical-align: middle;
		}
		.tx-srfreecap-pi1-accessible-link { width: 10em; float: right; vertical-align: middle; margin-right: 7em; }
		.tx-srfreecap-pi1-cant-read { display: inline-block; width: 150px; }
		.tx-srfreecap-pi1-cant-read a:link { background-color:transparent; font-weight:bold; text-decoration:none; }