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

html, body {height:100%;}
body {margin:0; padding:0; font-family:"Open Sans", Arial, sans-serif; background:#222; overflow:hidden;}

/* Loading */
body.csd-loading:before {content:""; position:fixed; left:0; top:0; right:0; bottom:0; z-index:100; background:#FFF; opacity:0.6;}
body.csd-loading:after {content:""; position:fixed; left:0; top:0; right:0; bottom:0; z-index:101; background:url(../statics/designer-statics/images/layout_img/csd-loading.svg) no-repeat center;}

/* Links */
a:link, a:active, a:visited {text-decoration:none;}
a:hover {text-decoration:none;}

/* Basics */
.csd-top {position:relative; height:40px; background:#353535;}
	.csd-top .logo {width:150px; height:41px; background:url(../statics/designer-statics/images/layout_img/newskin/c-logo-white.svg) no-repeat center; background-size:130px;}
	.csd-top .info {position:absolute; left:155px; top:0; padding:0 15px; font-size:12px; color:#A2A2A2; border-left:1px solid #474747; border-right:1px solid #474747;}
		.csd-top .info span {display:inline-block; padding:12px 0px;}
		.csd-top .info span:first-child {margin-right:10px;}
		.csd-top .info span em {font-style:normal; color:#FFF;}
	.csd-top .buttons {position:absolute; right:5px; top:5px;}
		.csd-top .buttons .defaultBtn, .csd-top .buttons .mainBtn {padding:7px 15px; border:none; font-size:12px;}
		.csd-top .buttons .defaultBtn {color:#FFF; background:#777;}
		.csd-top .buttons .defaultBtn:hover, .csd-top .buttons .defaultBtn:focus {background:#999;}
		.csd-top .buttons .mainBtn:hover, .csd-top .buttons .mainBtn:focus {color:#FFF; background:#4ECAED;}
		.csd-top .buttons a {margin-left:0;}
		.csd-top .buttons .btn.dropdown-toggle {margin-left:-3px; padding-left:8px; padding-right:11px; border-left:1px solid rgba(255,255,255,.2); border-radius:0 3px 3px 0 !important;}
        .csd-top .buttons .dropdown-menu {left:auto; right:0; padding:0; min-width:0; border-radius:4px !important; font-size:13px;}
        .csd-top .buttons  ul.dropdown-menu li {margin:1px;}
        .csd-top .buttons  ul.dropdown-menu li + li {border-top:1px solid #DDD;}
        .csd-top .buttons  ul.dropdown-menu li a {margin:0; padding:5px 10px;}
        .csd-top .buttons  ul.dropdown-menu li a:hover {opacity:0.6;}
	.csd-top .csd-options {position:absolute; width:auto; top:5px; left:50%; margin:0px 0px 0px -150px !important; padding:0 !important; list-style:none;}
		.csd-top #designer-tabs {display:inline-block; margin-right:20px;}
			.csd-top #designer-tabs li {display:inline-block; height:30px; margin:0 -2px 0 -2px; padding:0 10px; font-size:12px; line-height:30px; color:#9EA29E; border:1px solid #000; transition:all ease-in-out 0.1s; vertical-align:middle; cursor:pointer;}
			.csd-top #designer-tabs li.vle {padding-left:32px; background:url(../statics/designer-statics/images/layout_img/csd-ico-vle.gif) no-repeat 8px 6px; border-radius:3px 0px 0px 3px;}
			.csd-top #designer-tabs li.vce {padding-left:32px; background:url(../statics/designer-statics/images/layout_img/csd-ico-vce.gif) no-repeat 8px 6px; border-radius:0px 3px 3px 0px;}
			.csd-top #designer-tabs li.vle.active, .csd-top #designer-tabs li.vce.active {color:#FFF; background-position:8px -24px;}
		.csd-top a.csd-show-all {display:inline-block; width:30px; height:30px; margin:0 -2px 0 -2px; padding:0 10px; line-height:30px; color:#9EA29E; background:url(../statics/designer-statics/images/csd-ico-show-all.png) no-repeat center 4px; border:1px solid #000; transition:all ease-in-out 0.1s; vertical-align:middle; cursor:pointer; font-size:0; border-radius:3px;}
		.csd-top a.csd-show-all.active {background-position:center -26px;}

.csd-middle {height:calc(100% - 80px); border-top:1px solid #000; border-bottom:1px solid #000;}
	.site-wrapper {position:relative; float:left; width:calc(100% - 180px); height:100%; text-align:center; overflow:auto;}
		.site-wrapper iframe {width:100%; height:100%; border:none; background-color:#fff;}
	.code-wrapper {position:relative; float:left; width:calc(100% - 220px); height:100%; padding:20px; background:#444;}
		.code-wrapper textarea {width:100%; height:100%; border:none; color:#BBB; background:none; font-size:13px;}
		.code-wrapper textarea:focus {outline:none;}
	.widgets-wrapper {float:right; width:180px; height:100%; margin:0; color:#DDD; background:#353535; font-size:13px; overflow:auto;}
		.widgets-wrapper .title {padding:8px 10px 0px 10px; color:#FFF; text-transform:uppercase; font-size:14px;}
		.widgets-wrapper .desc {padding:0px 10px 8px 10px; font-size:11px; color:#BDBDBD;}
		.widgets-wrapper .list {max-height:60%; overflow:auto;}
			.widgets-wrapper .list ul {margin:0; padding:0; list-style:none;}
				.widgets-wrapper .list ul li {display:block;}
					.widgets-wrapper .list ul li a {display:block; margin-bottom:1px; padding:6px 10px 6px 6px; color:#DDD; background:#404040;/* transition:all ease-in-out 0.1s;*/}
					.widgets-wrapper .list ul li a:hover {background:#4D4D4D; transition:all ease-in-out 0.1s;}
						.widgets-wrapper .list ul li a img {margin-right:5px; vertical-align:middle;}
						.widgets-wrapper .list ul li a i {margin-right:1px; font-size:12px; vertical-align:text-middle; color:#FFF;}
						.widgets-wrapper .list ul li a i:hover {color:#F00;}
						.widgets-wrapper .list ul li a i:hover:before {content:"\f00d";}
		.widgets-wrapper .search {padding:8px 0; text-align:center;}
			.widgets-wrapper .search label {width:90%; margin:0 auto; font-size:12px; text-transform:uppercase; text-align:left;}
			.widgets-wrapper .search input {width:90%; margin:4px auto 0 auto; padding:4px 8px; background:#000 url(../statics/designer-statics/images/layout_img/csd-ico-search.png) no-repeat calc(100% - 8px) center; border:none; border-radius:4px; transition:all ease-in-out 0.2s;}
			.widgets-wrapper .search input:focus {color:#333; background-color:#FFF; outline:none; transition:all ease-in-out 0.2s;}
			.widgets-wrapper .search ul {margin:10px 0px 0px 0px; padding:0; list-style-type:none; text-align:left;}
				.widgets-wrapper .search ul li {position:relative;}
					.widgets-wrapper .search ul li a {display:block; margin-bottom:1px; padding:6px 10px 6px 6px; color:#FFF; background:#404040; transition:all ease-in-out 0.1s;}
					.widgets-wrapper .search ul li a:hover {background:#4D4D4D; transition:all ease-in-out 0.1s;}
						.widgets-wrapper .search ul li a i {margin:-2px 4px 0 0; font-size:12px; line-height:0; vertical-align:middle; color:#FFF;}
						.widgets-wrapper .search ul li a i:hover {color:#ffd200 ;}
						.widgets-wrapper .search ul li a i:hover:before {content:"\f005";}
					.widgets-wrapper .search ul li span {display:flex; align-items:center; justify-content:center; position:absolute; right:5px; top:6px; margin:0; padding:0; width:18px; height:18px; background:#333; text-align:center; border-radius:100%; cursor:pointer; transition:all ease-in-out 0.15s;}
					.widgets-wrapper .search ul li span:hover {color:#FFF; background:#C00; transition:all ease-in-out 0.15s;}
					.widgets-wrapper .search ul li span:before {margin-top:-3px; content:"x"; color:#BBB; transition:all ease-in-out 0.1s; font-size:11px;}
					.widgets-wrapper .search ul li span:hover:before {color:#FFF; transition:all ease-in-out 0.1s;}
.csd-bottom {background:#353535; height:40px;}

/* Desktop */
.csd-middle.desktop .site-wrapper {width:calc(100% - 180px);}
.csd-middle.desktop .code-wrapper {width:calc(100% - 220px);}
.csd-middle.desktop .widgets-wrapper {width:180px;}
/* Tablet */
.csd-middle.tablet .site-wrapper {width:768px;}
.csd-middle.tablet .code-wrapper {width:728px;}
.csd-middle.tablet .widgets-wrapper {width:calc(100% - 768px);}
/* Mobile */
.csd-middle.mobile .site-wrapper {width:480px;}
.csd-middle.mobile .code-wrapper {width:440px;}
.csd-middle.mobile .widgets-wrapper {width:calc(100% - 480px);}

/* Bar left */
.csd-middle.bar-left .site-wrapper, .csd-middle.bar-left .code-wrapper {float:right;}
.csd-middle.bar-left .widgets-wrapper {float:left;}
/* No bar */
.csd-middle.no-bar .site-wrapper, .csd-middle.no-bar .code-wrapper {float:none; width:100%;}
.csd-middle.no-bar.tablet .site-wrapper {max-width:768px; margin:0 auto;}
.csd-middle.no-bar.mobile .site-wrapper {max-width:480px; margin:0 auto;}
.csd-middle.no-bar .widgets-wrapper {display:none !important;}

/* Bar right */
.csd-middle.bar-right .site-wrapper, .csd-middle.bar-right .code-wrapper {float:left;}
.csd-middle.bar-right .widgets-wrapper {float:right;}

/* General buttons */
.btn {padding:5px 18px; color:#FFF; font-size:12px; border-radius:4px; transition:all ease-in-out 0.15s;}
.btn-cancel {background:#767676;}
.btn-cancel:hover {background:#666; transition:all ease-in-out 0.15s;}
.btn-save {background:#4B8DF8;}
.btn-save:hover {background:#2A78F3; transition:all ease-in-out 0.15s;}
.btn-publish {background:#35AA47;}
.btn-publish:hover {background:#2F8A3E; transition:all ease-in-out 0.15s;}

/* Options buttons */
.icon-group {display:inline-block; margin:8px 20px 0px 0px;}
.icon-group.views {margin-left:10px;}
.icon-group.responsive-views {margin-left:calc(50% - 145px);}
.icon-group.widgets-views {float:right; margin-right:10px;}
	.icon-group a {display:inline-block; width:31px; height:25px; margin:0 -2px 0 -3px; font-size:0; line-height:0; border:1px solid #000; transition:all ease-in-out 0.1s;}
	.icon-group a:first-child {border-radius:3px 0px 0px 3px;}
	.icon-group a:last-child {border-radius: 0px 3px;}
	.icon-group a.layout, .icon-group a.layout:hover {background:url(../statics/designer-statics/images/layout_img/csd-ico-layout.gif) no-repeat center;}
		.icon-group a.layout.active {background:url(../statics/designer-statics/images/layout_img/csd-ico-layout-a.gif) no-repeat center; transition:all ease-in-out 0.1s;}
	.icon-group a.code, .icon-group a.code:hover {background:url(../statics/designer-statics/images/layout_img/csd-ico-code.png) no-repeat center;}
		.icon-group a.code.active {background:url(../statics/designer-statics/images/layout_img/csd-ico-code-a.png) no-repeat center; transition:all ease-in-out 0.1s;}

	.icon-group a.csd-desktop-view, .icon-group a.csd-desktop-view:hover {background:url(../statics/designer-statics/images/layout_img/csd-ico-desktop.png) no-repeat center;}
		.icon-group a.csd-desktop-view.active {background:url(../statics/designer-statics/images/layout_img/csd-ico-desktop-a.png) no-repeat center; transition:all ease-in-out 0.1s;}
	.icon-group a.csd-tablet-view, .icon-group a.csd-tablet-view:hover {background:url(../statics/designer-statics/images/layout_img/csd-ico-tablet.png) no-repeat center;}
		.icon-group a.csd-tablet-view.active {background:url(../statics/designer-statics/images/layout_img/csd-ico-tablet-a.png) no-repeat center; transition:all ease-in-out 0.1s;}
	.icon-group a.csd-phablet-view, .icon-group a.csd-phablet-view:hover {background:url(../statics/designer-statics/images/layout_img/csd-ico-phablet.png) no-repeat center;}
		.icon-group a.csd-phablet-view.active {background:url(../statics/designer-statics/images/layout_img/csd-ico-phablet-a.png) no-repeat center; transition:all ease-in-out 0.1s;}
	.icon-group a.csd-mobile-view, .icon-group a.csd-mobile-view:hover {background:url(../statics/designer-statics/images/layout_img/csd-ico-mobile.png) no-repeat center;}
		.icon-group a.csd-mobile-view.active {background:url(../statics/designer-statics/images/layout_img/csd-ico-mobile-a.png) no-repeat center; transition:all ease-in-out 0.1s;}

	.icon-group a.breakpointlg, .icon-group a.breakpointlg:hover {background:url(../statics/designer-statics/images/layout_img/csd-ico-desktop.png) no-repeat center;}
		.icon-group a.breakpointlg.active {background:url(../statics/designer-statics/images/layout_img/csd-ico-desktop-a.png) no-repeat center; transition:all ease-in-out 0.1s;}
	.icon-group a.breakpointmd, .icon-group a.breakpointmd:hover {background:url(../statics/designer-statics/images/layout_img/csd-ico-tablet.png) no-repeat center;}
		.icon-group a.breakpointmd.active {background:url(../statics/designer-statics/images/layout_img/csd-ico-tablet-a.png) no-repeat center; transition:all ease-in-out 0.1s;}
	.icon-group a.breakpointsm, .icon-group a.breakpointsm:hover {background:url(../statics/designer-statics/images/layout_img/csd-ico-phablet.png) no-repeat center;}
		.icon-group a.breakpointsm.active {background:url(../statics/designer-statics/images/layout_img/csd-ico-phablet-a.png) no-repeat center; transition:all ease-in-out 0.1s;}
	.icon-group a.breakpointxs, .icon-group a.breakpointxs:hover {background:url(../statics/designer-statics/images/layout_img/csd-ico-mobile.png) no-repeat center;}
		.icon-group a.breakpointxs.active {background:url(../statics/designer-statics/images/layout_img/csd-ico-mobile-a.png) no-repeat center; transition:all ease-in-out 0.1s;}

	.icon-group a.left, .icon-group a.left:hover {background:url(../statics/designer-statics/images/layout_img/csd-ico-bar-left.gif) no-repeat center;}
			.icon-group a.left.active {background:url(../statics/designer-statics/images/layout_img/csd-ico-bar-left-a.gif) no-repeat center; transition:all ease-in-out 0.1s;}
	.icon-group a.hidden, .icon-group a.hidden:hover {display:inline-block !important; visibility:visible !important; background:url(../statics/designer-statics/images/layout_img/csd-ico-no-bar.gif) no-repeat center;}
			.icon-group a.hidden.active {background:url(../statics/designer-statics/images/layout_img/csd-ico-no-bar-a.gif) no-repeat center; transition:all ease-in-out 0.1s;}
	.icon-group a.right, .icon-group a.right:hover {background:url(../statics/designer-statics/images/layout_img/csd-ico-bar-right.gif) no-repeat center;}
			.icon-group a.right.active {background:url(../statics/designer-statics/images/layout_img/csd-ico-bar-right-a.gif) no-repeat center; transition:all ease-in-out 0.1s;}

/* .csd-desktop-view, .csd-tablet-view, .csd-phablet-view, .csd-mobile-view {} */

/* MODAL - Common & Confirm */
.csmodal {position:fixed; left:0; top:0; right:0; bottom:0; z-index:200; 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:300px; transform:translate(-50%, -50%); padding:20px; padding-bottom:70px !important; color:#666; background:#FFF; font-size:12px; line-height:1.4em; border-radius:4px;}
.csmodal-inner p {margin:0; padding:0;}
.csmodal-title {margin-bottom:30px; font-size:16px; color:#000;}
.csmodal-options {position:absolute; left:0; bottom:0; right:0; z-index:1; clear:both; padding:10px; background:#F0F0F0; text-align:right; border-radius:0 0 4px 4px;}
.csmodal-options a, .csmodal-options input {margin-left:10px;}
.csmodal-options a:hover {color:#FFF;}
.csmodal-yes, .csmodal-no {display:inline-block; margin-top:12px; padding:4px 8px; color:#555; background:#FFF; text-decoration:none; border-radius:4px; font-size:11px; border:1px solid #DDD; transition:all ease-in-out 0.15s;}
.csmodal-yes:hover, .csmodal-no:hover {border-color:#CCC; transition:all ease-in-out 0.15s;}
.csmodal-yes {margin-right:10px; color:#4b9941;}
.csmodal-no {color:#D13015;}
.csmodal-bg {position:absolute; left:0; top:0; right:0; bottom:0; z-index:1; background:#000; opacity:0.6;}

.csmodal-inner ::-webkit-input-placeholder {color:#999 !important;}
.csmodal-inner :-moz-placeholder {color:#999 !important;}
.csmodal-inner ::-moz-placeholder {color:#999 !important;}
.csmodal-inner :-ms-input-placeholder {color:#999 !important;}

/* MODAL - Edit Layout styles */
.csmodal.edit-styles .csmodal-inner {max-width:100%; width:400px; height:200px; padding:0;}
.csmodal.edit-styles .csmodal-inner textarea {padding:5px; width:100%; height:100%; color:#BBB; background:#444; outline:none; border:none;}

/* MODAL - Widgets */
.csmodal.csmodal-widgets {}
.csmodal.csmodal-widgets .csmodal-inner {max-width:100%; width:800px; height:80%; padding:0;}
.csmodal.csmodal-widgets .csmodal-inner iframe {position:absolute; width:100%; height:100%; border:none; border-radius:4px; z-index:1;}
/*.csmodal.csmodal-widgets .form-group {padding:14px 20px 22px 20px; border-bottom:1px solid #EBEBEB; overflow:hidden;}*/

/* MODAL - Widgets
.csmodal.csmodal-widgets {}
.csmodal.csmodal-widgets .csmodal-inner {max-width:100%; width:100%; height:100%; padding:0; background:none;}
.csmodal.csmodal-widgets .csmodal-inner iframe {position:absolute; left:4vw; top:4vw; right:4vw; bottom:4vw; max-width:100%; width:92vw; height:90%; border:none; border-radius:0; z-index:1; box-sizing:border-box;}
.csmodal.csmodal-widgets .csmodal-options {left:4vw; right:4vw;} */

/* MODAL - Small */
.csmodal.csmodal-small {}
.csmodal.csmodal-small .csmodal-inner {max-width:100%; width:500px; height:auto; padding:20px;}
.csmodal.csmodal-small .csmodal-inner .col-md-12 {padding:0;}

/* MODAL - Small - Specific for dates */
.csmodal .input-group-addon {background:#F0F0F0 !important; border-left:0;}
.csmodal .input-group-addon + .input-group-addon {border-right:none;}
.csmodal .input-group.date-picker {border:none;}
.csmodal .input-group.date-picker input, .csmodal .input-group.date-picker span {background:#FAFAFA; box-shadow:none; border-color:#CCC;}
.csmodal .input-group.date-picker .remove-date {cursor:pointer;}
.csmodal .input-group.date-picker .remove-date:before {content:"X"; color:#C00;}
.modal-backdrop.fade.in {z-index: 1000 !important;}
/* CK EDITOR */
.cke_float {left:0 !important; top:0 !important; right:0 !important; padding:3px !important; border-radius:0 !important;}
.cke_combopanel {width:auto !important;}

@media screen and (max-width:1300px) {

/* */
.csd-top .info span:nth-child(2) {display:none;}
.csd-top .csd-options {left:50%;}
.csd-top .csd-options #designer-tabs li {width:36px; padding:0; font-size:0;}

}

.modal-footer .btn-default {color:#333;}

.modal-content .radio-inline input[type="radio"] {margin:0 !important; opacity:1;}

.csd-top .info span:nth-child(1) {padding-right:15px; color:#FFF; border-right:1px solid #474747; font-size:11px;}
.csd-top .info span:nth-child(2) {margin:0 10px;}
.csd-top .info span:nth-child(3) {}
