/* CS Designer */
/* Author: BAB - www.wearebab.com */

/* COMMON - Basic elements */
body {margin:0; padding:10px; background:#FFF; font-family:Arial, Helvetica, sans-serif;}

/* COMMON - Basic edition zone */
.cscontent {display:inline-block; width:100%; min-height:50px;}
.cscontent:empty {display:block; width:100%; height:100px; background:#FFF8D8; outline:dashed 2px #F5CB74;}
.cscontent.dropzone-hover {background:#F6E3E3; cursor:move;  outline:dashed 1px #C00;}

/* COMMON - Placeholder */
.cs-placeholder {background:#FFF8D8; outline:dashed 2px #F5CB74; list-style:none;}
.cs-placeholder.vertical {float:left; width:20px; height:40px; margin:0 10px; pointer-events:none;}
.cs-placeholder.horizontal {display:block; clear:both; width:100%; height:30px; margin:15px 0px; pointer-events:none;}

/* VLE - Layout Basics */
body.cs-vle .cscontent > .row {margin:0;}
body.cs-vle cslayout {display:block; position:relative; margin-bottom:15px; text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#569AAF; background:#EBF4F7; outline:dashed 1px #C0D7DF; transition:background ease-in-out 0.2s, outline ease-in-out 0.2s;}
body.cs-vle cslayout .csl-inner {margin:5px; padding:10px;}
body.cs-vle cslayout .csl-inner.dropzone-hover {background:#F6E3E3; outline-color:#C00;}
/*body.cs-vle cslayout cslayout:last-child {}*/
body.cs-vle cslayout cslayout {margin-bottom:0; background:#FFF;}
body.cs-vle cslayout cslayout cslayout {background:#EBF4F7;}
body.cs-vle cslayout .layout-name {position:absolute; z-index:10000; top:0px; right:0px; padding:5px 5px 5px 22px; font-size:11px; color:#999; background:#FAFAFA url(/bundles/comitium5designer/designer/img/csd-ico-edit-layout-name.png) no-repeat 7px center; outline:dashed 1px #C0D7DF; cursor:text;}
body.cs-vle cslayout .layout-resize {display:flex; align-items:center; justify-content:center; position:absolute; z-index:10001; top:1px; right:1px; left:1px; bottom:1px; color:#5B96AA; background-color:#CFE1E8;}
body.cs-vle cslayout .layout-resize span {}
body.cs-vle cslayout .layout-resize span span {margin:0 5px; font-size:13px;}
body.cs-vle cslayout .layout-resize span span:nth-child(1) {padding-right:8px; border-right:1px solid #aacad5 !important;}
body.cs-vle cslayout .layout-resize span span:nth-child(2) {padding-right:8px; border-right:1px solid #aacad5 !important;}
body.cs-vle cslayout .layout-resize span span:nth-child(3) {}
body.cs-vle cslayout span.layout-edit {position:absolute; z-index:10000; background-color:#fff; top:0px; right:0px; left:0px; bottom:0px; text-align:center; padding:0px;}
body.cs-vle cslayout span.layout-edit textarea {padding:5px; width:100%; height:100%; color:#BBB; background:#444; outline:none; border:none;}
body.cs-vle cslayout span.layout-edit .layout-edit {z-index:101; padding:1px; background:#EBEBEB;}
body.cs-vle cslayout span.layout-edit .layout-edit input {width:calc(100% - 50px); height:25px; padding:0 3px; outline:0; color:#666; border:1px solid #CCC; border-radius:0px 3px 3px 0px;}
body.cs-vle cslayout span.layout-edit .layout-edit::before {content:""; display:inline-block; width:26px; height:25px; background:#FAFAFA url(/bundles/comitium5designer/designer/img/csd-ico-edit-layout-name.png) no-repeat 8px center; vertical-align:top; border:1px solid #CCC; border-right:none; border-radius:3px 0px 0px 3px;}

/* VLE - Layout Basics - Hover */
body.cs-vle cslayout.select-hover {background:#F6E3E3; cursor:move; outline-color:#C00;}
body.cs-vle cslayout.select-hover cslayout.select-hover {background:#F1DADA;}

/* VLE - Layout Basics - Widgets */
body.cs-vle cswidget {display:block; overflow:hidden; position:relative; pointer-events:none;}
body.cs-vle cswidget + cswidget {margin-top:20px;}
body.cs-vle cswidget * {display:none;}
body.cs-vle cswidget:before {display:block; content:""; position:absolute; left:0; top:0; right:0; bottom:0; z-index:10000; background:#E4EDE3; outline:1px solid #D1DFCE; opacity:0.7;}
body.cs-vle cswidget:empty {display:block; min-height:50px; margin-bottom:5px; background:#E4EDE3; outline:1px solid #D1DFCE;}
body.cs-vle cswidget:empty:before {display:block; content:"widget"; padding-top:18px; font-size:12px; color:#83987D;}

/* VLE - Layout Basics - Blocked */
body.cs-vle cslayout.layout-blocked:before {content:""; position:absolute; left:0; top:0; right:0; bottom:0; z-index:101; background:#A9E9D2 ; opacity:0.5;}
body.cs-vle cslayout.layout-blocked:after {content:attr(name); position:absolute; top:0px; right:0px; z-index:102; font-size:11px; color:#30aa8d; background:#FAFAFA; padding:5px; outline:dashed 1px #C0D7DF;}
body.cs-vle cslayout.layout-blocked .cstoolbar {left:50%; top:50%; margin-top:-15px; margin-left:-54px;}
body.cs-vle cslayout.layout-blocked .cstoolbar li {width:40px; height:40px; border:1px solid #C0D7DF; border-radius:100px !important; opacity:0.8;}
body.cs-vle cslayout.layout-blocked .cstoolbar li:hover {opacity:1;}
body.cs-vle cslayout.layout-blocked .cstoolbar li + li {margin-left:10px;}
body.cs-vle cslayout.layout-blocked .cstoolbar li.edit {background:#FFF url(/bundles/comitium5designer/designer/img/csd-ico-edit-blocked.png) no-repeat center !important;}
body.cs-vle cslayout.layout-blocked .cstoolbar li.remove {background:#FFF url(/bundles/comitium5designer/designer/img/csd-ico-delete-blocked.png) no-repeat center !important;}

/* VCE - Layout Basics - Empty elements */
body.cs-vce cslayout {display:block;}

@keyframes colorchange
{
	0%	{background:#FAEEEE;}
	50%	{background:#f4c9c9;}
	100%	{background:#FAEEEE;}
}

@-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
{
	0%	{background:#FAEEEE;}
	50%	{background:#f4c9c9;}
	100%	{background:#FAEEEE;}
}

/* VCE - Layout Basics - Empty elements */
body.cs-vce-hot .csl-inner:empty {display:block; position:relative; margin-bottom:15px; padding:16px 0px; background:#F6E3E3; outline:dashed 1px #C00; transition:background ease-in-out 0.2s, outline ease-in-out 0.2s;}

/* VCE - Layout Basics - Hover
body.cs-vce-show-all {}
body.cs-vce-show-all cslayout {display:block; position:relative; margin-bottom:15px; padding:16px; text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#569AAF; background:#EBF4F7; outline:dashed 1px #C0D7DF;}
body.cs-vce-show-all .cstoolbar {left:50%; top:50%; margin-top:-15px; margin-left:-15px;}
body.cs-vce-show-all .cstoolbar li {display:none; width:30px; height:30px; border:1px solid #C0D7DF; border-radius:100px !important; opacity:0.8;}
body.cs-vce-show-all .cstoolbar li.edit-date {display:block; background:#FFF url(/bundles/comitium5designer/designer/img/csd-ico-show-all.png) no-repeat center 4px !important;}
body.cs-vce-show-all cswidget { pointer-events:none;}
body.cs-vce-show-all cswidget .cstoolbar {display:none !important;} */

/* VCE - Layout Basics - Hover */
body.cs-vce-show-all {}
body.cs-vce-show-all cslayout {display:block; position:relative; margin-bottom:15px; padding:16px; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#569AAF; background:#EBF4F7; outline:dashed 1px #C0D7DF; /*transition:background ease-in-out 0.2s, outline ease-in-out 0.2s;*/}
body.cs-vce .cstoolbar {display:none !important;}
body.cs-vce.cs-vce-show-all .cstoolbar {display:block !important;}
body.cs-vce .cstoolbar li.edit-date {border-radius:0 0 4px 0;}
body.cs-vce cswidget .cstoolbar {top:0px; left:0; display:block !important;}
body.cs-vce cswidget .cstoolbar li.edit-date {border:1px solid #DDD; border-radius:0;}
body.cs-vce.cs-vce-hot cslayout:before {content:attr(name); position:absolute; top:0; right:15px; z-index:102; font-size:11px; color:#30aa8d; background:#FAFAFA; padding:5px; outline:dashed 1px #C0D7DF;}

/* VCE - Past and Future elements */
.csd-past-element {background:#F4C9C7  !important; outline-color:#E0B9B9 !important;}
.csd-future-element {background:#C3F1B3 !important; outline-color:#B7D4AF !important;}
body.cs-vce .csd-past-element {display:none !important;}
body.cs-vce .csd-future-element {display:none !important;}
body.cs-vce.cs-vce-show-all .csd-past-element {display:block !important;}
body.cs-vce.cs-vce-show-all .csd-future-element {display:block !important;}
body.cs-vce.cs-vce-show-all .csd-past-element, body.cs-vce.cs-vce-show-all .csd-future-element {opacity:.6;}

/* VCE - Layout Basics - Hover */
body.cs-vce cslayout.select-hover {background:#F6E3E3; outline-color:#C00;}
body.cs-vce cswidget {cursor:move;}
body.cs-vce cswidget:empty {display:block; min-height:50px; margin-bottom:5px; background:#E4EDE3 url(/bundles/comitium5designer/designer/img/csd-walert.png) no-repeat center; outline:1px solid #D1DFCE; cursor:;}
body.cs-vce-hot .csl-inner.select-hover {background:#f8d4d4; outline-color:#C00;  animation:colorchange 1s; -webkit-animation:colorchange 1s; animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite;}
body.cs-vce-hot .csl-inner {/*padding-top:10px; padding-bottom:10px; outline:1px dashed #C00;*/}
body.cs-vce-hot cswidget {pointer-events:none;}

/* VCE - Layout Basics - Locked */
body.cs-vce cslayout.csl-locked {position:relative; min-height:70px;}
body.cs-vce cslayout.csl-locked:before {content:""; display:block; position:absolute; left:0; top:0; right:0; bottom:0; z-index:2; background:#FFF; opacity:0.4; border:1px dashed #C00;}
body.cs-vce cslayout.csl-locked:after {content:""; display:block; position:absolute; left:50%; top:50%; margin-top:-20px; margin-left:-20px; z-index:1; width:40px; height:40px; border:1px dashed #C00; border-radius:100px !important; background:url(/bundles/comitium5designer/designer/img/csd-ico-layout-blocked.png) no-repeat center !important;}

/* VCE - Layout Basics - Widgets */
body.cs-vce cswidget {display:block; position:relative;}
body.cs-vce cswidget:empty {display:block; min-height:50px; margin-bottom:5px; background:#E4EDE3 url(/bundles/comitium5designer/designer/img/csd-walert.png) no-repeat center; outline:1px solid #D1DFCE; cursor:pointer;}
body.cs-vce .cswidget-loading {display:block; min-height:50px; margin-bottom:5px; background:#E4EDE3 url(/bundles/comitium5designer/designer/img/csd-wloader.gif) no-repeat center; outline:1px solid #D1DFCE;}
body.cs-vce .csw-empty {display:block; min-height:50px; margin-bottom:5px; background:#EEE2EA !important; outline:none !important; border:1px solid #E1CCDC; border-radius:3px; text-align:center;}
body.cs-vce .csw-empty:before {display:block; margin-bottom:10px; padding-top:16px; content:attr(data-name); font-size:12px; color:#B783AB; text-align:center;}

/* COMMON - Sortable */
.ui-sortable-placeholder {visibility:visible !important;}
/*.ui-sortable-helper, .ui-draggable-handle {opacity: 0.6; position:absolute; display:block; overflow:hidden; width:180px !important; height:31px !important;}*/
.ui-sortable-helper a, .ui-draggable-handle a {display:block; margin-bottom:1px; padding:6px 10px; color:#ddd; background:#404040; text-decoration:none; font-size:13px; font-family:"Open Sans", Arial, sans-serif;}
.ui-sortable-helper a:link, .ui-draggable-handle a:link, .ui-sortable-helper a:active, .ui-draggable-handle a:active, .ui-sortable-helper a:visited, .ui-draggable-handle a:visited {text-decoration: none;}
.ui-sortable-helper a img, .ui-draggable-handle a img {margin-right:5px; vertical-align:middle;}
.ui-sortable-helper, .ui-sortable-placeholder {overflow: hidden;}


/* COMMON - Show/hide */
@media (max-width: 767px) {
	.show_hidden .hidden-xs { display: inherit !important; opacity: 0.5;}
}
@media (min-width: 768px) and (max-width: 991px) {
	.show_hidden .hidden-sm { display: inherit !important; opacity: 0.5;}
}
@media (min-width: 992px) and (max-width: 1199px) {
	.show_hidden .hidden-md { display: inherit !important; opacity: 0.5;}
}
@media (min-width: 1200px) {
	.show_hidden .hidden-lg { display: inherit !important; opacity: 0.5;}
}

/* TOOLBAR - Basics */
.cstoolbar {position:absolute; top:-1px; left:-1px; z-index:10000; font-family:Arial, Helvetica, sans-serif;}
.cstoolbar ul {list-style:none; padding:0px; margin:0px;}
.cstoolbar ul li {display:block; width:24px; height:24px; background-color:#FFF; float:left; margin-right:-1px; font-size:0px; border:1px solid #DDD; cursor:pointer;}
.cstoolbar ul li:first-child {}
.cstoolbar ul li:last-child {border-radius:0px 0px 4px 0px;}
.cstoolbar ul li:hover {opacity:.9; transition:all ease-in-out 0.1s;}
.cstoolbar ul li.active {background-color:#EEE;}

.cstoolbar span {display:block; width:140px; position:absolute; right:-143px;  padding:0; text-align:center;}
.cstoolbar span a.confirm, .cstoolbar span a.cancel {display:inline-block; float:left; cursor:pointer; border-radius:4px; background-color:#FFF; border:1px solid #EBEBEB;}
.cstoolbar span a.confirm {width:60px;}
.cstoolbar span a.cancel {margin-left:2px;}
.cstoolbar span a.confirm::before, .cstoolbar span a.cancel::before {display:block; padding:5px 10px; font-size:11px; color:#C00;}
.cstoolbar span a.confirm::before {content:"Eliminar";}
.cstoolbar span a.cancel::before {content:"Cancelar"; color:#888;}
.cstoolbar span a {transition:all ease-in-out 0.15s;}
.cstoolbar span a:hover {text-decoration:none; opacity:.8; transition:all ease-in-out 0.15s;}

/* TOOLBAR - Icons */
.cstoolbar ul li.visibility, .cstoolbar ul li.lock, .cstoolbar ul li.link, .cstoolbar ul li.css, .cstoolbar ul li.clean-height, .cstoolbar ul li.save, .cstoolbar ul li.remove {background:#FFF url(/bundles/comitium5designer/designer/img/toolbar.jpg) no-repeat; transition:all 0.25s ease-in-out;}
.cstoolbar ul li.edit, .cstoolbar ul li.editable-fields-reset, .cstoolbar ul li.edit-date {background:#FFF; transition:all 0.25s ease-in-out;}
.cstoolbar ul li.visibility.active, .cstoolbar ul li.lock.active, .cstoolbar ul li.link.active, .cstoolbar ul li.css.active, .cstoolbar ul li.clean-height.active, .cstoolbar ul li.save.active, .cstoolbar ul li.remove.active {transition:all 0.25s ease-in-out;}
.cstoolbar ul li.visibility {background-position:3px -27px;}
.cstoolbar ul li.visibility.active {background-position:3px 3px;}
.cstoolbar ul li.lock {background-position:-30px 4px;}
.cstoolbar ul li.lock.active {background-position:-30px -27px;}
.cstoolbar ul li.link {background-position:-63px 4px;}
.cstoolbar ul li.link.active {background-position:-63px -27px;}
.cstoolbar ul li.css {background-position:-97px 4px;}
.cstoolbar ul li.css.active {background-position:-97px -27px;}
.cstoolbar ul li.clean-height {background-position:-130px 4px;}
.cstoolbar ul li.clean-height.active {background-position:-130px -27px;}
.cstoolbar ul li.save {background-position:-162px 4px;}
.cstoolbar ul li.save.active {background-position:-162px -27px;}
.cstoolbar ul li.remove {background-position:-195px 4px;}
.cstoolbar ul li.remove.active {background-position:-195px -27px;}
.cstoolbar ul li.editable-fields-reset {background:#FFF url(/bundles/comitium5designer/designer/img/csd-ico-clear-params.png) no-repeat center;}
.cstoolbar ul li.edit {background:#FFF url(/bundles/comitium5designer/designer/img/csd-ico-edit-params.png) no-repeat center;}
.cstoolbar ul li.edit-date {background:#FFF url(/bundles/comitium5designer/designer/img/csd-ico-dates.png) no-repeat center 5px;}
.cstoolbar ul li.edit-date.active {background:center -15px;}
.cstoolbar ul li.locale {width:auto; font-size:11px; line-height:24px; text-align:center; color:#777; font-weight:700;}
.cstoolbar ul li.locale span {display:none; position:relative; right:auto; width:auto; padding:0 5px; text-align:left; background:#FFF; text-transform: uppercase;}
.cstoolbar ul li.locale span + span {border-top:1px solid #DDD;}
.cstoolbar ul li.locale span:last-child {border-radius:0 0 4px 4px;}
.cstoolbar ul li.locale span.active {display:inline-block;}
.cstoolbar ul li.locale span.active:after {content:""; display:inline-block; width:8px; height:8px; margin-left:3px; background:url(/bundles/comitium5designer/global/img/portlet-collapse-icon.png) 0 0; background-size:100%;}

body.cs-vce.cs-vce-show-all .cstoolbar ul li.copy {background:#FFF url(/bundles/comitium5designer/designer/img/csd-ico-copy.gif) no-repeat center;}
body.cs-vce.cs-vce-show-all .cstoolbar ul li.cut {background:#FFF url(/bundles/comitium5designer/designer/img/csd-ico-cut.png) no-repeat center;}
body.cs-vce.cs-vce-show-all .cstoolbar ul li.paste {background:#FFF url(/bundles/comitium5designer/designer/img/csd-ico-paste.gif) no-repeat center;}
body.cs-vce.cs-vce-show-all .cstoolbar ul li.copy:hover, body.cs-vce.cs-vce-show-all .cstoolbar ul li.cut:hover, body.cs-vce.cs-vce-show-all .cstoolbar ul li.paste:hover {opacity:.8;}

/* MODAL - Common & Confirm */
.csmodal {position:fixed; left:0; top:0; right:0; bottom:0; z-index:10000; font-family:Arial, Helvetica, sans-serif; display:none;}
.csmodal-inner {z-index:201; position:fixed; top:50%; left:50%; right:auto; bottom:auto; max-width:400px; transform:translate(-50%, -50%); padding:20px; color:#666; background:#FFF; font-size:12px; line-height:1.4em; border-radius:4px;}
.csmodal-inner p {margin:0; padding:0;}
.csmodal-yes, .csmodal-no {display:inline-block; padding:4px 8px; color:#555; background:#FFF; text-decoration:none; border-radius:4px; font-size:12px; font-weight:500; font-family:"Open Sans", Arial, sans-serif; border:1px solid #DDD; transition:all ease-in-out 0.15s;}
.csmodal-yes {margin-right:10px; padding:6px 14px; color:#FFF; background:#4B8DF8; border:1px solid #2A78F3;}
.csmodal-yes:hover {color:#FFF; background:#2A78F3;}
.csmodal-no {padding:6px 14px; color:#FFF; background:#767676; border:1px solid #767676;}
.csmodal-bg {position:absolute; left:0; top:0; right:0; bottom:0; z-index:1; background:#000; opacity:0.6;}
.csmodal-content {margin-bottom:48px;}
.csmodal-options {position:absolute; bottom:0; left:0; right:0; text-align:right; padding:10px; background:#F0F0F0; border-radius:0 0 4px 4px;}

/* MODAL - Edit Layout styles */
.csmodal.edit-styles .csmodal-inner {max-width:100%; width:600px; height:400px; padding:0px;}
.csmodal.edit-styles .csmodal-inner textarea {padding:5px; width:100%; height:350px; color:#BBB; background:#444; outline:none; border:none; border-radius:4px 4px 0px 0px}
.csmodal.edit-styles .csmodal-inner a {display:inline-block; margin-top:12px; padding:4px 8px; color:#FFF; background:#4B8DF8; border:1px solid #2A78F3; text-decoration:none; border-radius:4px; font-size:12px; font-weight:100 !important; font-family:"Open Sans", Arial, sans-serif; transition:all ease-in-out 0.15s;}

.cke_editable.cke_focus {box-shadow:none !important; outline:2px dashed #F5CB74 !important; outline-offset:8px; transition:all 0.1s ease-in-out !important;}

/* VCE - Layout Basics - Locked */
body.cs-vce cslayout.csl-locked {position:relative; min-height:70px;}
body.cs-vce cslayout.csl-locked:before {content:""; display:block; position:absolute; left:0; top:0; right:0; bottom:0; z-index:99998; background:#FFF; opacity:0.4; border:1px dashed #C00;}
body.cs-vce cslayout.csl-locked:after {content:""; display:block; position:absolute; left:50%; top:50%; margin-top:-20px; margin-left:-20px; z-index:99999; width:40px; height:40px; border:1px dashed #C00; border-radius:100px !important; background:url(/bundles/comitium5designer/designer/img/csd-ico-layout-blocked.png) no-repeat center !important;}
