@charset "utf-8";
/* CSS Document for gridblock */
/* v1.1.18 */

.gridblock {}
.gridblock .content { display: none; padding: 15px; border-top: 1px solid #c1c9d4; }
.gridblock-top { margin-bottom: 40px; }
.gridblock-bottom {}

.gridblock .tab-nav { margin-bottom: 0; }
.gridblock .tab-nav > li { display: none; }
.gridblock .tab-nav > li > a { border-radius: 4px 4px 0px 0px; border-top-width: 2px; border-color: #9ca5b2 #9ca5b2 #9ca5b2; background: #EEE; color: #555; padding: 7px 10px; }
	.gridblock .tab-nav > li > a:hover { background: #FFF; color: #555; border-color: #9ca5b2 #9ca5b2 #9ca5b2; }
	.gridblock .tab-nav > li.active > a, .gridblock .tab-nav > li.active > a:hover, .gridblock .tab-nav > li.active > a:focus { background: #FFF; border: 1px solid #9ca5b2; border-bottom-color: transparent; border-top-width: 2px; }	
.gridblock .tab-content { border: 1px solid #9ca5b2; border-top: none; }
	.gridblock .tab-content > div { display: none; }
	.gridblock .tab-content > div.active { display: block; }

.gridblock .column-settings { position: relative; background: #FFF; padding: 20px; }
	.gridblock .column-settings .optionstoggler { display: none; position: absolute; background: #9ca5b2; padding: 0px; line-height: 19px; vertical-align: top; height: 18px; letter-spacing: 1px; color: #FFF; border-radius: 2px; font-size: 12px; left: 50%; bottom: -9px; margin: 0px 0px 0px -50px; width: 100px; text-align: center; cursor: pointer; }
	.gridblock .column-settings .optionstoggler:hover { background: #5bb585; }

.gridblock .column-input { background: rgba(255,255,255, 1); padding: 20px 20px 20px; -webkit-box-shadow: 0px 5px 15px rgba(0,0,0, 0.08); box-shadow: 0px 5px 15px rgba(0,0,0, 0.08); }
.gridblock .column-input:after, .gridblock .clearfix { content: ''; clear: both; display: block; height: 0px; }

.gridblock .column-slices { background: rgba(255,255,255, 0.5); padding: 20px 20px 20px; }
.gridblock .column-slices .column-slice { margin-top: 25px; }
.gridblock .column-slices .column-slice:nth-child(1) { margin-top: 5px; }


.gridblock .column-slice { background: #FFF; }	
.gridblock .column-slice-functions { position: relative; display: flex; align-items: center; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0, 0.08), 0 0 8px rgba(156,165,178, 0.6); box-shadow: inset 0 1px 1px rgba(0,0,0, 0.08), 0 0 8px rgba(156,165,178, 0.6); }
.gridblock .column-slice-sorter { padding: 0px 5px 0px 10px; white-space: nowrap; text-align: right; /*min-width: 145px;*/ }
	.gridblock .column-slice-sorter a.btn { float: none !important; }
	.gridblock .column-slice-sorter .btn-group-delete, .gridblock .column-slice-sorter .btn-group-add, .gridblock .column-slice-sorter .btn-group-status, .gridblock .column-slice-sorter .btn-group-copy { margin-right: 5px; }
	.gridblock .column-slice-sorter .btn-group-drag { margin-left: 5px; }	
		.gridblock .column-slice-sorter .btn-group-drag a.btn { background: none; border: none; cursor: grab; }
	.gridblock .column-slice-nodelete .column-slice-sorter .btn-group-delete a.btn { background: #e48d8a; border-color: #e48d8a; color: #a59c9c; cursor: default; }
	.gridblock .column-slice-sorter .btn-status.rex-online { background-color: rgba(18,181,94, 0.1); }
	.gridblock .column-slice-sorter .btn-status.rex-offline { background-color: rgba(217,83,79, 0.1); }
	.gridblock .column-slice-sorter .btn-copy.gridblock-iscopied { background: #4b9ad9; color: #FFF; }
	
	.gridblock .column-slice-sorter a.btn-addgridmodule { background: #dbedf7; }
		.gridblock .column-slice-sorter a.btn-addgridmodule:hover { background: #4b9ad9; color: #FFF; }

/* Buttonleiste oberhalb platzieren */
.gridblock .column-slice { background: none; }
.gridblock .column-slice-functions { flex-wrap: wrap; justify-content: flex-end; -webkit-box-shadow: none; box-shadow: none; }
.gridblock .column-slice-functions > div { order: 2; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0, 0.08), 0 0 8px rgba(156,165,178, 0.6); box-shadow: inset 0 1px 1px rgba(0,0,0, 0.08), 0 0 8px rgba(156,165,178, 0.6); }
.gridblock .column-slice-functions .column-slice-sorter { order: 1; padding: 5px 5px 7px 10px; background: #FFF; border: 1px solid #cfcfcf; border-bottom: none; -webkit-box-shadow: none; box-shadow: none; }

	
ul.gridblock-moduleselector a { cursor: pointer; }
ul.gridblock-moduleselector .gridblock-cutncopy-insert { border-bottom: 1px solid #ccc; }
	ul.gridblock-moduleselector .gridblock-cutncopy-insert a:before { display: inline-block; font-weight: normal; font-family: FontAwesome; font-size: inherit; text-rendering: auto; content: "\f0c5"; margin-right: 0.5em; color: #4b9ad9; } 
	ul.gridblock-moduleselector .gridblock-cutncopy-insert a span { /*font-weight: bold;*/ }
.gridblock .addmodule { text-align: center; margin-top: 50px; }
	.gridblock .addmodule a.btn-addgridmodule, .gridblock a.btn-choosegridmodul { padding-left: 50px; padding-right: 50px; background: #dbedf7; border-color: #dbedf7; color: #4b9ad9; border-radius: 0px; font-weight: bold; }
	.gridblock .addmodule a.btn-addgridmodule:hover, .gridblock a.btn-choosegridmodul:hover { background: #4b9ad9 !important; border-color: #4b9ad9 !important; color: #FFF !important; }
	.gridblock .addmodule a.btn-addgridmodule i, .gridblock a.btn-choosegridmodul i { display: none; }
	.gridblock .addmodule a.btn-addgridmodule span.caret, .gridblock a.btn-choosegridmodul span.caret { display: none; }

.gridblock .gridblock-group > span { font-weight: bold; display: block; margin-top: 25px; margin-bottom: -5px; }
	.gridblock .gridblock-group:nth-child(1) > span { margin-top: 0px; }
.gridblock .gridblock-group-inline dl { display: inline-block; width: auto; vertical-align: top; margin: 7px 25px 0px 0px; }
.gridblock .gridblock-group-inline dt { display: block; width: auto; min-width: 0px; padding-top: 0px; padding-right: 0px; }
	.gridblock .gridblock-group-inline dt label { font-weight: normal; margin-bottom: 2px; }


/* Checkbox / Radio */
.gridblock .checkbox.toggle label input, .radio.toggle label input { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 3em; height: 1.5em; background: #ddd; vertical-align: middle; border-radius: 1.6em; position: relative; outline: 0; margin-top: -3px; margin-right: 10px; cursor: pointer; transition: background 0.1s ease-in-out; }
	.gridblock .checkbox.toggle label input::after, .radio.toggle label input::after, .radio.switch label input::before { content: ''; width: 1.5em; height: 1.5em; background: white; position: absolute; border-radius: 1.2em; transform: scale(0.7); left: 0; box-shadow: 0 1px rgba(0, 0, 0, 0.5); transition: left 0.1s ease-in-out; }
.gridblock .checkbox.toggle label input:checked, .radio.toggle label input:checked { background: #5791CE; }
	.gridblock .checkbox.toggle label input:checked::after { left: 1.5em; }

.gridblock .radio.switch label { margin-right: 1.5em; }
.gridblock .radio.switch label input { width: 1.5em; margin-right: 5px; }
	.gridblock .radio.switch label input:checked::after { transform: scale(0.5); }
.gridblock .radio.switch label input::before { background: #5791CE; opacity: 0; box-shadow: none; }
	.gridblock .radio.switch label input:checked::before { animation: radioswitcheffect 0.65s; }
@keyframes radioswitcheffect { 0% { opacity: 0.75; } 100% { opacity: 0; transform: scale(2.5); } }


/* Select-Options mit Bild */
.gridblock .gb-option-img { max-height: 20px; } 


/* Options */
.gridblock .hiddenOpt { display: none; }
	.gridblock .hiddenOpt.gridblockoptions { padding-top: 17px; }
	.gridblock .hiddenOpt.gridcolumnoptions { padding-top: 37px; }
.gridblock-topmargin { margin-top: 35px; }
	.gridblock-topmargin:nth-child(1) { margin-top: 0px; }
.gridblock-colorinput-group {}
.gridblock-colorinput { position: relative; min-width: 100px; background: #FFF; padding: 3px 3px; padding: 0px; }
.gridblock-colorinput input { position: absolute !important; top: 0px; left: 0px; -webkit-appearance: none; background: #FFF; border: none; width: 100%; height: 100%; padding: 0px; cursor: pointer; }
	.gridblock-colorinput input::-webkit-color-swatch-wrapper, .gridblock-colorinput input::-webkit-color-swatch { padding: 0px; border: none; }
	.gridblock-colorinput input+i { display: inline-block; position: absolute; z-index: 5; top: 50%; right: 5px; margin-top: -7px; pointer-events: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.gridblockoptions select, .gridcolumnoptions select { margin: 0px !important; }
.gridblockoptions .bootstrap-select>.dropdown-toggle, .gridcolumnoptions .bootstrap-select>.dropdown-toggle { border-radius: 0px; }


/* Disabled */
.gridblock-slice-disabled {}
.gridblock-slice-disabled > .column-input { position: relative; display: none !important; }
	.gridblock-slice-disabled > .column-input:before { content:''; display: block; position: absolute; top: 0px; left: 0px; z-index: 1000; background: rgba(0,0,0, 0.35); width: 100%; height: 100%; pointer-events: auto !important; }
.gridblock-slice-disabled > .column-input * { pointer-events: none !important; }
/*.gridblock-slice-disabled .column-slice-sorter { display: none; }*/
.gridblock-module-disabled { font-size: 0.9em; font-weight: bold; color: #d9534f; background: rgba(255,255,255, 1); padding: 20px 20px 20px; -webkit-box-shadow: 0px 5px 15px rgba(0,0,0, 0.08); box-shadow: 0px 5px 15px rgba(0,0,0, 0.08); }
	.gridblock-module-disabled .addmodule { margin-top: 40px;}


/* Templatevorschau */
.gridblock-preview { display: inline-flex; padding: 4px; background: #FFF; border: 1px solid rgba(230,230,230, 1); width: 200px; min-height: 42px; }
	.gridblock-previewtext { background: #dfe3e9; }
.gridblock-preview > div { display: flex; padding: 5px; background: #4b9ad9; margin: 0px 3px; text-align: center; border-radius: 2px; }
	.gridblock-preview > div:first-child { margin-left: 0px; }
	.gridblock-preview > div:last-child { margin-right: 0px; }
.gridblock-preview span { display: block; color: #FFF; font-size: 9px; align-self: center; text-align: center; width: 100%; word-break: break-word; }
.gridblock-previewtext span { color: inherit; font-size: 0.85em; }
.gridblock-preview-caption { font-size: 0.8em; text-align: center; padding: 0px 6px 6px; }

.gridblock-previewlist { background: #FFF; padding: 10px; max-height: 180px; overflow: auto; border: 1px solid #c1c9d4; }
.gridblock-previewlist > div { display: inline-flex; flex-wrap: wrap; flex-direction: column; background: #FFF; vertical-align: top; }
.gridblock-previewlist > div > div { padding: 6px; -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; }
.gridblock-previewlist > div > div.gridblock-preview { border: 1px solid rgba(230,230,230, 1); cursor: pointer; }
	.gridblock-previewlist > div > div.gridblock-preview:hover, .gridblock-previewlist > div > div.selected { border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%); box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%); }
	.gridblock-previewlist > div > div.selected { background: #ebebeb; }
	.gridblock-previewlist > div > div > div { border-radius: 4px; }

/* Templateauswahl */
.rex-js-widget-gridblock .input-group { display: flex; }
	.rex-js-widget-gridblock .gridblock-template { position: relative; min-width: 214px; min-height: 56px; padding: 6px; background: #FFF; border: 1px solid #c1c9d4; -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%); box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%); }
	.rex-js-widget-gridblock .input-group-btn { width: auto; height: auto; }
	.rex-js-widget-gridblock .input-group-btn .btn { display: inline-flex; height: 100%; min-width: 50px; }
		.rex-js-widget-gridblock .input-group-btn .btn-options { display: none; color: #9ca5b2; min-width: 38px; }
	.rex-js-widget-gridblock .input-group-btn .btn i { align-self: center; width: 100%; }
	
.gridblock.noGridTemplate .rex-js-widget-gridblock .gridblock-template { min-height: 38px; }
.gridblock.noGridTemplate .rex-js-widget-gridblock .input-group-btn .btn { min-height: 38px; }
.gridblock.noGridTemplate .nav-tabs, .gridblock.noGridTemplate .tab-content { border: none; }


/* Modalfenster */
html.modal-opened { overflow-y: inherit; }
body.modal-open { overflow: hidden; height: auto; }
.gridblock-modal { background: rgba(40,53,66, 0.4); }
.gridblock-modal .modal-header { background: #dfe3e9; line-height: 1.25; padding: 10px 15px; font-size: 16px; }
.gridblock-modal .modal-title { display: inline; }

.gridblock-modal .gridblock-previewlist { padding: 0px; border: none; max-height: none; text-align: center; }
.gridblock-modal .gridblock-previewlist > div { margin: 10px; }
.gridblock-modal .gridblock-previewlist > div > div { width: 245px; }
	.gridblock-modal .gridblock-previewlist > div > div.gridblock-preview { min-height: 60px; }
.gridblock-modal .gridblock-preview span { font-size: 0.8em; }



@media (min-width: 768px){
	
	.gridblock-modal-large .modal-dialog { width: 100%; max-width: 565px;}
	.modal-dialog .gridblock-previewlist { text-align: left; }
	
}
@media (min-width: 900px){
	
	.gridblock-modal-large .modal-dialog { width: 100%; max-width: 830px;}
	
}



/* Redaxo-BE Slice-Übersicht */
/* Offline (Inhaltsblock) */
.gridblock-panel { border: 1px solid #dfe3e9; background: rgba(255,255,255, 0.1); position: relative; margin: 0px 0px 15px; }
	.gridblock-panel:last-child { margin-bottom: 0px; }
	.gridblock-panel-offline { /*background: #b0b8c4;*/ pointer-events: none; }
	.gridblock-panel-offline:before { content: ''; background: #b0b8c4; opacity: 0.6; position: absolute; top: 0px; left: 0px; z-index: 100; width: 100%; height: 100%; }
.gridblock-panel-header { position: relative; background: #dfe3e9; color: #000; padding: 5px 40px 5px 10px; }
	.gridblock-panel-offline-icon { display: none; position: absolute; top: 0px; right: 0px; z-index: 200; margin: 9px 10px 0px 0px; }
	.gridblock-panel-offline .gridblock-panel-offline-icon { display: inline-block; }
.gridblock-panel-body { position: relative; padding: 10px 10px; z-index: 1; background: rgba(0,0,0, 0.05); }

.gridblock-panel-columnspacer { height: 0px; margin: 50px 0px 0px; }
	.gridblock-panel-columnspacer:before { content: '';  height: 1px; background: rgba(156, 165, 178, 0.5); position: relative; top: -25px; display: block; }
.gridblock-panel-columnspacer1 { display: none; }



/* Schicken Glow-Effect vpn MBlock für ADD nutzen */
@keyframes gridblockAddGlow {
    0% {
        box-shadow: 
            0 0 0 0 rgba(40, 167, 69, 0.8),
            0 5px 15px rgba(0,0,0,.08);
        transform: scale(1);
    }
    50% {
        box-shadow: 
            0 0 0 15px rgba(40, 167, 69, 0.2),
            0 0 30px rgba(40, 167, 69, 0.4),
            0 8px 25px rgba(0,0,0,.15);
        transform: scale(1.02);
    }
    100% {
        box-shadow: 
            0 0 0 0 rgba(40, 167, 69, 0),
            0 5px 15px rgba(0,0,0,.08);
        transform: scale(1);
    }
}

.gridblock div.gridblock-add-glow {
    animation: gridblockAddGlow 1.2s ease-out;
    border-color: rgba(40, 167, 69, 0.6) !important;
    background: rgba(40, 167, 69, 0.03) !important;
	border-radius: 2px;
}

/* Dark Mode Add Glow */
@keyframes gridblockAddGlowDark {
    0% {
        box-shadow: 
            0 0 0 0 rgba(25, 135, 84, 0.9),
            0 5px 15px rgba(0,0,0,.3);
        transform: scale(1);
    }
    50% {
        box-shadow: 
            0 0 0 15px rgba(25, 135, 84, 0.3),
            0 0 30px rgba(25, 135, 84, 0.5),
            0 8px 25px rgba(0,0,0,.4);
        transform: scale(1.02);
    }
    100% {
        box-shadow: 
            0 0 0 0 rgba(25, 135, 84, 0),
            0 5px 15px rgba(0,0,0,.3);
        transform: scale(1);
    }
}

body.rex-theme-dark .gridblock div.gridblock-add-glow,
html[data-bs-theme="dark"] .gridblock div.gridblock-add-glow {
    animation: gridblockAddGlowDark 1.2s ease-out;
    border-color: rgba(25, 135, 84, 0.7) !important;
    background: rgba(25, 135, 84, 0.05) !important;
}

@media (prefers-color-scheme: dark) {
    body.rex-has-theme:not(.rex-theme-light) .gridblock div.gridblock-add-glow {
        animation: gridblockAddGlowDark 1.2s ease-out;
        border-color: rgba(25, 135, 84, 0.7) !important;
        background: rgba(25, 135, 84, 0.05) !important;
    }
}