/* 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; }
/* default styles for extension "tx_frontend" */
:root {
  /* ==========================================================================
     TYPO3 CONTENT ELEMENTS (TX_FRONTEND) DEFAULTS
     ========================================================================== */

  /* --- Spacings & Margins (iz TYPO3 Konstanti) --- */
  --ce-text-margin: 20px;
  --ce-column-spacing: 20px;
  --ce-row-spacing: 20px;
  --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, 20px)));
    margin-bottom: var(--ce-gallery-margin-bottom-custom, var(--ce-gallery-margin-bottom, var(--ce-text-margin, 20px)));
}

.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, 20px)));
    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, 20px))) / var(--ce-columns-count, 1));
    max-width: calc((100% - (var(--ce-columns-count, 1) - 1) * var(--ce-row-gap-custom, var(--ce-row-gap, 20px))) / 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, 20px))); 
    margin-bottom: var(--ce-intext-gallery-margin-bottom-custom, var(--ce-intext-gallery-margin, var(--ce-text-margin, 20px)));
}

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

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

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

/* 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%)); */
}
  
