.container {
    max-width: 1310px;
}

html, body {
    height: 100%;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
    background-color: #f0f0f0;
}
h1, h2 {
    margin-top: 0;
}
h1.gmp-title {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: #ccc 1px solid;
    font-size: 24px;
}
h3.gmp-title {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: #ccc 1px solid;
    font-size: 20px;
}
a {
    color:#337ab7;
}
/* Bootstrap's default a:hover underline reads as a stray line under an icon glyph - applies
   everywhere an icon-only <a> exists (row actions, tree actions), not just the Kendo editor
   toolbar's own icon links. Excludes .btn-link deliberately: Bootstrap's own .btn-link:hover
   sets text-decoration:underline on purpose for icon+text buttons like "Nieuw item"/"Terug",
   and that's a normal, wanted hover affordance for a button that's mostly text. */
a:not(.btn-link):has(.fa, .fas, .far, .fab):hover {
    text-decoration: none;
}
.btn-link {
    color:#337ab7;
}
.btn-link:hover {
    color:#0056b3;
}
.page-link {
    color:#337ab7;
}
.page-item.active .page-link {
    background-color:#337ab7;
    border-color:#337ab7;
}
input[type=radio] + label,
input[type=checkbox] + label {
    margin-left: 4px;
    margin-right: 10px;
    display: inline-block;
}
input.form-control {
    display: inline-block;
}
select.form-control {
    display: inline-block;
    width: auto;
}
.inputErr {
    background-color: #ffe5e5;
}
table.inputErr,
span.inputErr {
    border-radius: 4px;
}
table.inputErr td,
span.inputErr {
    padding-left: 10px;
}
/*.inputErr,
select.inputErr + .select2 .select2-selection {
    background-color: #f2dede;
}

table.inputErr {
    padding: 8px 8px 0 8px;
    display: inline-block;
}*/

table.gmp-form tr td {
    padding: 4px 10px 4px 0;
}
table.gmp-form tr td td {
    padding: 0;
}
table.gmp-form tr td table.gmp-form tr td {
    padding: 0 10px 4px 0;
}

.fas {
    font-size: 1.1rem;
}

.maxWidth {width: 100%;}
.noWrap {white-space: nowrap;}
.alignRight {text-align: right}
.alignTop {vertical-align: top}

/* Row action icons (edit/move/publish/delete) used across the list tables (Panel,
   Panel/Categories, CmsPages/Snippets, Settings/Templates, Settings/Redirects, Forms,
   AdminUsers) and the CmsPages page tree - muted at rest so they don't compete with the
   row's actual content, full strength on row hover, with a colored circular background per
   icon on individual hover (blue for most actions, red for delete). */
.gmp-row-actions {
    display: inline-flex;
    align-items: center;
    gap: .1rem;
    opacity: .45;
    transition: opacity .12s ease;
}
tr:hover .gmp-row-actions,
.tree-row:hover .gmp-row-actions {
    opacity: 1;
}

.gmp-row-actions a,
.gmp-row-actions .link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    margin-left: 0;
    border: none;
    background: none;
    padding: 0;
    border-radius: 6px;
    color: #6c7a86;
    transition: background-color .12s ease, color .12s ease;
}
.gmp-row-actions a:hover,
.gmp-row-actions .link-btn:not(:disabled):not(.disabled):hover {
    background-color: rgba(51, 122, 183, .12);
    color: #337ab7;
}
.gmp-row-actions .link-btn:has(.fa-trash-alt):hover {
    background-color: rgba(220, 53, 69, .12);
    color: #dc3545;
}
.gmp-row-actions .fa-trash-alt {
    color: inherit;
}
.gmp-row-actions .link-btn:disabled,
.gmp-row-actions .link-btn.disabled {
    color: #d5d9dc;
}


#content-wrapper {
    min-height: 100%;
    margin-bottom:100px;
}
#content {
    margin-top: 20px;
}
    #content .content {
        background-color: #fff;
        padding-top: 20px;
        padding-bottom: 40px;
        padding-left:30px;
        padding-right:30px;
        -webkit-border-radius: 4px 4px 4px 4px;
        border-radius: 4px 4px 4px 4px;
    }
footer {
    margin-top: -50px;
    padding-top: 10px;
    width:100%;
    height: 50px;
    border: 1px solid #ccc;
}


/*.fancybox-slide--iframe .fancybox-content {
    max-width: 1250px;
    max-height:90%;
}*/
.fancybox__content {
    max-width: 1250px !important;
}
/* Iframe-based popups (widget-editor canvas, etc.) shouldn't be capped by the general
   max-width above - Fancybox's own default sizing for these already matches legacy. */
.has-iframe .fancybox__content,
.has-map .fancybox__content,
.has-pdf .fancybox__content {
    max-width: none !important;
}
/* Fancybox's own CSS zeroes padding for has-map/has-pdf/has-youtube/etc but not has-iframe -
   match that here so iframe content (the widget-editor canvas) isn't inset either. */
.has-iframe .fancybox__content {
    padding: 0 !important;
}

/* Widget-type editor popups (html.aspx, html-code.aspx, image-slider.aspx, google-map.aspx,
   youtube.aspx, spacer.aspx), opened from canvas-engine.js's editMain click handler. Their
   stored height ("90%") isn't passed to Fancybox's own width/height option (Fancybox turns a
   percentage into the invalid CSS value "90%px" and drops it, while still forcing flex-grow:0
   on this element regardless, so it never grows past a sliver). gmpApplyWidgetPopupHeight in
   canvas-engine.js applies the real, DB-derived height as an inline !important style once the
   popup exists - this rule is just the fallback for the brief gap before that runs.  */
/* The DB-stored width (e.g. "1200" for the Html type) is passed straight to Fancybox's own
   width option as a fixed pixel value with no cap - fine on a normal desktop window, but this
   popup itself renders inside the Canvas iframe (not the top-level browser window), which is
   often far narrower than 1200px, so the popup overflowed it on both sides. max-width here is
   relative to that iframe's own viewport, not the browser window's, so it correctly shrinks to
   fit within whatever space the Canvas iframe actually has instead of the raw DB width. */
#gmpWidgetTypeEditorPopup.fancybox__content {
    height: 90vh !important;
    flex: 1 1 auto !important;
    max-width: 95vw !important;
}

/* .gmp-inline dialogs (Canvas.cshtml's gmp-save/gmp-delete/gmp-grid/gmp-settings popups) are
   direct children of .fancybox__content, which Fancybox's own CSS sets to
   flex-direction:column with the default align-items:stretch - without this, the Ja/Oke and
   Nee/Annuleren links stretch to the dialog's full width instead of sizing to their content,
   stacking as separate full-width rows instead of sitting side by side. */
.gmp-inline-actions {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
}

/* Custom Kendo Editor toolbar dropdowns (insert symbol, insert internal link, insert
   snippet) - styled here instead of inline because a literal # in a Kendo template string
   (e.g. style="...#ccc") breaks Kendo's template parser, which uses # for its own
   interpolation syntax. */
.gmp-tool-symbol,
.gmp-tool-internal-link,
.gmp-tool-snippet {
    height: 26px;
    border: 1px solid #ccc;
}

.gmp-tool-symbol {
    width: 60px;
}

.gmp-tool-internal-link,
.gmp-tool-snippet {
    width: 130px;
}

/* Kendo's own .k-toolbar rule is already display:flex; flex-flow:row wrap (confirmed live via
   DevTools) - overflow:hidden is what actually clips the gmpBreak-forced second row, most
   likely paired with a JS-computed single-row height. Height and vertical overflow are
   overridden here so the wrapped row becomes visible instead of clipped, but overflow-x is
   deliberately left at Kendo's own hidden default - blanket overflow:visible also disabled
   horizontal clipping, which was silently containing narrow-viewport overflow before (the
   editor visibly overflowed the page horizontally at narrow widths once that was removed). */
.k-editor-toolbar.k-toolbar {
    height: auto !important;
    overflow-y: visible !important;
}

/* Invisible spacer tool (see gmpBreak in kendo-editor-tools.js). Confirmed live (DevTools)
   that Kendo wraps every top-level tools: array entry in its own
   <div class="k-toolbar-item k-{toolName}"> - that div, not the <span class="gmp-tool-break">
   inside it, is the actual flex child of .k-toolbar, so flex-basis:100% has to go on
   .k-toolbar-item.k-gmpBreak to force everything after it onto a new line. height/padding/
   border/margin all zeroed so it takes up no vertical space of its own. */
.k-toolbar-item.k-gmpBreak {
    flex-basis: 100%;
    width: 100%;
    height: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

/* Custom Kendo Editor tools using Font Awesome icons (undo, redo, cut, copy, horizontal
   rule, paste as plain text) - k-tool alone doesn't center/size non-Kendo icon content,
   so set that explicitly. These are <a> tags (Kendo's own toolbar buttons are <button>s),
   so Bootstrap's global `a{color:#007bff}` rule wins over the color these would otherwise
   inherit from .k-editor - overriding it back to inherit is what actually makes the icon
   color match Kendo's native tools (bold, italic, ...) instead of showing Bootstrap link
   blue. */
.gmp-tool-undo,
.gmp-tool-redo,
.gmp-tool-cut,
.gmp-tool-copy,
.gmp-tool-hr,
.gmp-tool-paste-strip,
.gmp-tool-link-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 26px;
    color: inherit;
}

/* Same <a>-tag issue as the color override above: Bootstrap's a:hover{text-decoration:
   underline} outranks a plain class selector (its combined element+:hover specificity beats
   ours), so it still wins even though the color override above doesn't underline at rest -
   needs its own :hover rule to override back to none, matching Kendo's native tools. */
.gmp-tool-undo:hover,
.gmp-tool-redo:hover,
.gmp-tool-cut:hover,
.gmp-tool-copy:hover,
.gmp-tool-hr:hover,
.gmp-tool-paste-strip:hover,
.gmp-tool-link-trigger:hover {
    text-decoration: none;
}

/* Hyperlink tool: one trigger button opens a dropdown with Link/Anchor/E-mail/Telefoon
   options, instead of four separate toolbar icons. The dropdown is appended to <body>
   (not nested under the toolbar) and positioned via JS with position:fixed, since Kendo's
   toolbar wrapper clips overflowing children - an absolutely positioned descendant of the
   toolbar never becomes visible regardless of z-index. */
.gmp-tool-link-menu {
    display: inline-block;
}

.gmp-link-dropdown {
    display: none;
    position: fixed;
    z-index: 100000;
    min-width: 140px;
    padding: 4px 0;
    margin-top: 2px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.gmp-link-dropdown.show {
    display: block;
}

.gmp-link-option {
    display: block;
    padding: 6px 16px;
    color: #212529;
    white-space: nowrap;
    text-decoration: none;
}

.gmp-link-option:hover {
    background: #f0f0f0;
    color: #212529;
    text-decoration: none;
}

.hidden{
    display:none;
}

#loader {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: url('../images/ajax-loader.gif') center center no-repeat rgba(255,255,255,0.9);
}

/* buttons */
.btn-primary {
    background-color: #2d546f;
    border-color: #2d546f;
}
.btn-primary:hover,
.btn-primary.active,
.btn-primary:focus {
    background-color: #94c743 !important;
    border-color: #94c743 !important;
}

/* Kendo's modern theme (kendo-theme-default) has no size constraint for the classic
   Editor ImageBrowser's thumbnails - confirmed absent from the theme CSS, unlike the newer
   FileManager widget it does style. Without this, a thumbnail renders at the uploaded image's
   full natural resolution (e.g. 1024x908) instead of fitting its preview box, stretching
   .k-file-preview along with it since nothing constrains either. */
.k-imagebrowser .k-file-preview {
    max-width: 100%;
    max-height: 100px;
    overflow: hidden;
}

.k-imagebrowser .k-file-preview img.k-file-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* The theme fixes .k-listview-item at height:120px, which was already too short for a
   plain file-type icon plus caption before the thumbnail override above existed - with a
   100px-tall image preview added on top, the caption (16px gap + ~18px text line) has no
   room left inside the 120px box (88px usable after its 32px padding) and spills into the
   next row. Grow the item to fit both.
   Targets .k-filemanager-listview, not .k-imagebrowser - confirmed live via DevTools that
   this Kendo version renders the ImageBrowser's listview wrapped in .k-filemanager-listview,
   so a .k-imagebrowser-scoped rule never matches the element at all (kept below anyway in
   case another Kendo version/widget instance does use that wrapper). Both are doubled to
   outrank the theme's own same-selector rule - main.css loads before the Kendo theme
   stylesheet on every page that uses this dialog (see Html.cshtml/_KendoStyles.cshtml and
   their counterparts), so with equal specificity the theme's later-loaded 120px rule would
   otherwise win regardless of source order in this file. */
.k-imagebrowser .k-listview-item.k-listview-item,
.k-filemanager-listview .k-listview-item.k-listview-item {
    height: 170px;
}