/** 100% backend **/
body.backend100 #header .inner, body.backend100 #container {max-width: none;}

body.contao3-5.backend100 #container,
body.contao3-5.backend100 #footer,
body.contao3-5.backend100 #header {width: 100%;}
body.contao3-5.backend100 #left {width:19%;}
body.contao3-5.backend100 #main {width:79%;}

/** contao reset **/
.autogrid_row .tl_content,
.autogrid_row .tl_content.indent,
.autogrid_row .cte_type,
.autogrid_grid .tl_content.indent {width: inherit !important; box-shadow: none; margin-left: 0; margin-right: 0;}

/** hide operation buttons **/

.grid_preview_active .drag-handle {display: none;}
.autogridGridStart .tl_content_right a {display: none;}
.autogridColStop .tl_content_right a {display: none;}

.autogridGridStart .tl_content_right a.edit,
.autogridGridStart .tl_content_right a.copy,
.autogridGridStart .tl_content_right a.cut,
.autogridGridStart .tl_content_right a.delete,
.autogridGridStart .tl_content_right a.delete_block,
.autogridGridStart .tl_content_right a.toggle,
.autogridGridStart .tl_content_right a.show {display: inline;}

.autogridRowStop .tl_content_right a.edit,
.autogridRowStop .tl_content_right a.copy,
.autogridRowStop .tl_content_right a.cut,
.autogridRowStop .tl_content_right a.delete,
.autogridRowStop .tl_content_right a.toggle,
.autogridRowStop .tl_content_right a.show {display: none;}

.autogridGridStop .tl_content_right a.edit,
.autogridGridStop .tl_content_right a.copy,
.autogridGridStop .tl_content_right a.cut,
.autogridGridStop .tl_content_right a.delete,
.autogridGridStop .tl_content_right a.toggle,
.autogridGridStop .tl_content_right a.show {display: none;}

.autogridGridStart .tl_content_right .drag-handle {display: none;}

.autogridColStart .tl_content_right .toggle,
.autogridColStart .tl_content_right .cut,
.autogridColStart .tl_content_right .copy,
.autogridColStart .tl_content_right .delete,
.autogridColStart .tl_content_right .delete_block,
.autogridColStart .tl_content_right .show,
.autogridColStart .tl_content_right .tl_tree_checkbox {display: none;}

/* rotate paste-icon - workaround cuz has no class */
body.paste .autogrid_row .tl_content_right a:last-of-type img,
body.copy .autogrid_row .tl_content_right a:last-of-type img {transform: rotate(-90deg)}
 
 /* resize icons */
.autogrid_row > .col_1 .tl_content_right,
.autogrid_row > .col_2 .tl_content_right,
.autogrid_row > .col_3 .tl_content_right {transform: scale(0.9); transform-origin: right ;transition: transform 0.15s ease-in-out; -webkit-transition: transform 0.15s ease-in-out;}
.autogrid_row .tl_content_right {margin-left: 0;}

 /** contao modes **/
body.cutAll .autogridColStart .tl_content_right,
body.paste:not('.create') .autogridColStart .tl_content_right,
body.create.paste .autogridGridStart .tl_content_right {display: none;}

body.cutAll .autogridGridStop .tl_content_right,
body.paste .autogridGridStop .tl_content_right {display: block;}

body.cutAll .autogridGridStop .tl_content_right a,
body.cutAll .autogridGridStop .tl_content_right .drag-handle,
body.paste .autogridGridStop .tl_content_right a,
body.paste .autogridGridStop .tl_content_right .drag-handle,
body.paste .autogridGridSart .tl_content_right a:nth-last-child(2) {display: none;}

/** show paste button only **/
body.cutAll .autogridGridStop .tl_content_right a:nth-last-child(2),
body.paste .autogridGridStop .tl_content_right a:nth-last-child(2),
body.paste.create .autogridColStart .tl_content_right a:nth-last-child(2),
body.paste .autogridRowStop .tl_content_right a:nth-last-child(2),
body.cutAll .autogridRowStop .tl_content_right a:nth-last-child(2),
body.copyAll .autogridRowStop .tl_content_right a:nth-last-child(2) {display: inline-block;}
.autogridGridStart.paste a:nth-last-child(2) {display: none;}

/** show delete buttons for certain elements **/
.autogridColStart.hasButtons a.delete,.autogridColStart.hasButtons a.delete_block {display: inline;}

/** mulit select **/
body.select .autogridColStart .tl_content_right > * {display: inline-block;}

/* be styling */
a.icon_autogrid {position: relative;}
a.icon_autogrid .infobox {position: absolute; top: -2px; right: calc(100% + 5px); border: 1px solid #ccc; border-radius: 3px; padding: 5px; background: #fff; font-size: 11px; display: none;}
a.icon_autogrid .infobox:after, a.autogrid .infobox:before {left: 100%; top: 50%;	border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;}
a.icon_autogrid .infobox:after {border-color: rgba(255, 255, 255, 0); border-left-color: #ffffff; border-width: 5px; margin-top: -5px;}
a.icon_autogrid .infobox:before {border-color: rgba(204, 204, 204, 0); border-left-color: #cccccc; border-width: 6px; margin-top: -6px;}
a.icon_autogrid.autogrid_on:hover .infobox {display: block;}

/* reset contao defaults */
.grid_preview .tl_content.indent {border: 0;}
.grid_preview .tl_content.wrapper_start, .grid_preview .tl_content.wrapper_separator, .grid_preview .tl_content.wrapper_stop {background: none;}
.grid_preview, .grid_preview * {box-sizing: border-box;}

/* grid_preview */
.grid_preview {background: rgba(0,0,0,0.05);}
.grid_preview li:not(.autogridRowStart):not(.autogridRowStop):not(.autogridGridStart):not(.autogridGridStop):not(.autogridColStart):not(.autogridColStop):not(.sibling) {background: #fff;}
.autogrid_grid li:not(.autogridColStart):not(.autogridColStop):not(.autogridGridStart):not(.autogridGridStop) .tl_content:not(.wrapper_start):not(.wrapper_stop) {min-height: 100px;}
.grid_preview .flex_col li:not(.autogridColStart) {margin-bottom: 2px;}
body.contao3-5 .grid_preview .limit_toggler {background: none; border: none;}
.grid_preview .autogrid_row .tl_content.indent {margin-bottom: 3px;}
.grid_preview .autogrid_row .column {transition: all 0.1s ease-in-out;}

/* start elements padding */
.autogridRowStart > div,
.autogridGridStart > div {padding-top: 10px; padding-bottom: 10px;}

/* col start/stop */
.grid_preview .autogridColStart, .grid_preview .autogridColStop {background: rgba(0,0,0,0.05);}
.grid_preview .autogridColStart {border-bottom: 1px solid #fff;}
.grid_preview .autogridColStop {border-top: 1px solid #fff;}
.grid_preview .autogridColStart > div, .grid_preview .autogridColStop > div {padding: 4px;}
.grid_preview .autogridColStart .cte_type, .grid_preview .autogridColStop .cte_type {display: none;}

/* grid + row */
.grid_preview .autogrid_grid {margin-left: -5px; margin-right: -5px; padding: 0 20px;}
.grid_preview .autogrid_grid .grid_col {padding-left: 5px; padding-right: 5px;}
.grid_preview .autogrid_row {margin-left: -5px; margin-right: -5px; padding: 0 20px;}
.grid_preview .autogrid_row .column {padding-left: 5px; padding-right: 5px;}

/* grid info */
.autogrid_info {font-size: 11px; color: #999;}
.autogrid_info li {display: inline-block; margin-right: 10px; padding-right: 10px; border-right: 1px solid #999; background: none!important;}
.autogrid_info li:last-of-type {margin-right: 0; margin-right: 0; border: 0;}

/* autogrid_buttons */
.autogrid_buttons {position: absolute; left: 6px; top: 6px; overflow: hidden;}
.autogrid_buttons span {float: left; opacity: 0.8; display: inline-block; border-radius: 0 8px 8px 0; text-indent: -9999px; width: 17px; height: 15px; cursor: pointer; background-color: #9bc955; background-repeat: no-repeat; background-position: center; background-size: 8px; background-image: url('../img/grid_plus.svg'); transition: All 0.3s ease; -webkit-transition: All 0.3s ease;}
.autogrid_buttons span.down {border-radius: 8px 0 0 8px; margin-left: 1px; background-image: url('../img/grid_minus.svg'); background-position: 4px center;}
.autogrid_buttons span:hover {opacity: 1;}

.grid_preview .autogrid_row .tl_content {padding-top: 25px;}
.grid_preview .autogrid_row .flex_col .tl_content {padding-top: 4px;}

/* hide AG icon outside grids */
.tl_content .icon_autogrid {display: none;}
.autogrid_row .tl_content .icon_autogrid {display: inline;}

/** page grid presets **/
#page_grid_presets {width: 100%; position: relative;}
#page_grid_presets .counter {display: none;}
#page_grid_presets .tl_img_submit {top: 26px; margin-left: 5px;}
#page_grid_presets .tl_panel .float_box {float: left;}
#page_grid_presets .tl_panel.categories {text-align: left; padding: 10px;}
#page_grid_presets .tl_panel.categories h3 {margin: 0 0 4px 0; padding: 0;}
#page_grid_presets .tl_panel.categories .search-field input {width: auto !important;}
#page_grid_presets #tl_buttons {padding: 10px 20px; border-bottom: 1px solid silver;}
#page_grid_presets .content_wrapper {padding: 20px; background: #f8f8f8;}
#page_grid_presets .content_wrapper * {box-sizing: border-box; -webkit-box-sizing: border-box;}
#page_grid_presets .content_wrapper .content {border: 0; margin: 0;}
#page_grid_presets .content_wrapper .inside.grid_wrapper {margin-left: -1%; margin-right: -1%;}

#page_grid_presets #contao_theme_select {border-bottom: 1px solid silver; padding: 10px 20px;}
#page_grid_presets #contao_theme_select h3 {margin: 0; margin-bottom: 5px;}
#page_grid_presets #contao_theme_select select, #pct_demoinstaller #contao_theme_select .tl_select {min-width: 120px;}

#page_grid_presets .category {border-bottom: 1px solid silver; padding-bottom: 10px; margin-bottom: 10px;}
#page_grid_presets .column {float: left;}
#page_grid_presets .column.size_2 {width: 50%;}
#page_grid_presets .column .item {margin-bottom: 10px;}
#page_grid_presets .column .item .inside {background: #fff; border: 1px solid #ccc; border-radius: 3px;}
#page_grid_presets .image_container img {width: 100%; height: auto; padding: 15px;}
#page_grid_presets .column.col_0 .inside {margin-right: 5px;}
#page_grid_presets .column.col_1 .inside {margin-left: 5px;}

#page_grid_presets .submit.install {border-top: 1px solid #ddd; padding: 10px 15px; background: #f1f1f1; border-radius: 3px;}
#page_grid_presets input.di_submit {transition: All 0.3s ease; -webkit-transition: All 0.3s ease; cursor: pointer; box-sizing: border-box; -webkit-box-sizing: border-box; text-align: center; background: #009dcc; color: #fff; border: 0; padding: 10px 20px; text-shadow: none; display: inline-block; min-width: 90px; border-radius: 3px;}
#page_grid_presets input.di_submit:hover {opacity: 0.9;}

#page_grid_presets .items {display: flex; flex-wrap: wrap; margin-left: -10px; margin-right: -10px;}
#page_grid_presets .items > div {flex: 0 0 25%; padding-left: 10px; padding-right: 10px;}
#page_grid_presets .items > div .item {border: 1px solid rgba(0,0,0,0.1); background: #fff; margin-bottom: 20px; padding: 15px; cursor: pointer;}
#page_grid_presets .items > div .item, #page_grid_presets .items > div .item .column .attribute {transition: All 0.3s ease; -webkit-transition: All 0.3s ease;}
#page_grid_presets .items > div .item:hover {border-color: rgba(0,0,0,0.25); box-shadow: 0 0 6px 2px rgba(0,0,0,0.03);}
#page_grid_presets .items > div .item:hover .column .attribute {background: #77ac45;}
#page_grid_presets .grid_preview {margin-left: -3px; margin-right: -3px; background: none;}
#page_grid_presets .label {margin-bottom: 10px; font-size: 0.8rem;}
#page_grid_presets .column {padding-left: 3px!important; padding-right: 3px!important;}
#page_grid_presets .column .attribute {background: rgba(0,0,0,0.15); height: 40px;}
/* Contao 4 */
#page_grid_presets.contao-ht35 .category h2 {margin-bottom: 25px;}
#page_grid_presets.contao-ht35 .category {border: 0; padding: 0; margin-bottom: 45px;}
#page_grid_presets.contao-ht35 .items > div .item:hover .column .attribute {background: #e58230;}

@media only screen and (max-width: 767px) {
	#page_grid_presets .items > div {flex: 0 0 50%;}
	.grid_preview .autogrid_grid {grid-template-columns:100%!important; padding: 0;}
	.grid_preview .autogrid_row {padding-left: 10px; padding-right: 10px;}
}