/* 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(/bundles/comitium5designer/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(/bundles/comitium5designer/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(/bundles/comitium5designer/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(/bundles/comitium5designer/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(/bundles/comitium5designer/designer/img/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(/bundles/comitium5designer/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(/bundles/comitium5designer/layout/img/csd-ico-layout.gif) no-repeat center;}
		.icon-group a.layout.active {background:url(/bundles/comitium5designer/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(/bundles/comitium5designer/layout/img/csd-ico-code.png) no-repeat center;}
		.icon-group a.code.active {background:url(/bundles/comitium5designer/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(/bundles/comitium5designer/layout/img/csd-ico-desktop.png) no-repeat center;}
		.icon-group a.csd-desktop-view.active {background:url(/bundles/comitium5designer/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(/bundles/comitium5designer/layout/img/csd-ico-tablet.png) no-repeat center;}
		.icon-group a.csd-tablet-view.active {background:url(/bundles/comitium5designer/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(/bundles/comitium5designer/layout/img/csd-ico-phablet.png) no-repeat center;}
		.icon-group a.csd-phablet-view.active {background:url(/bundles/comitium5designer/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(/bundles/comitium5designer/layout/img/csd-ico-mobile.png) no-repeat center;}
		.icon-group a.csd-mobile-view.active {background:url(/bundles/comitium5designer/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(/bundles/comitium5designer/layout/img/csd-ico-desktop.png) no-repeat center;}
		.icon-group a.breakpointlg.active {background:url(/bundles/comitium5designer/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(/bundles/comitium5designer/layout/img/csd-ico-tablet.png) no-repeat center;}
		.icon-group a.breakpointmd.active {background:url(/bundles/comitium5designer/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(/bundles/comitium5designer/layout/img/csd-ico-phablet.png) no-repeat center;}
		.icon-group a.breakpointsm.active {background:url(/bundles/comitium5designer/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(/bundles/comitium5designer/layout/img/csd-ico-mobile.png) no-repeat center;}
		.icon-group a.breakpointxs.active {background:url(/bundles/comitium5designer/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(/bundles/comitium5designer/layout/img/csd-ico-bar-left.gif) no-repeat center;}
			.icon-group a.left.active {background:url(/bundles/comitium5designer/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(/bundles/comitium5designer/layout/img/csd-ico-no-bar.gif) no-repeat center;}
			.icon-group a.hidden.active {background:url(/bundles/comitium5designer/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(/bundles/comitium5designer/layout/img/csd-ico-bar-right.gif) no-repeat center;}
			.icon-group a.right.active {background:url(/bundles/comitium5designer/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) {}


/* CK EDITOR NEW CROPS */

.c-crops {}

.c-crops__dialog {
    width: 80%;
    max-width: 900px;
}

.c-crops__content {
    display: flex;
	flex-wrap: wrap;
}

.c-crops__content--info {
    width: 50%;
    display: flex;
    flex-direction: column;
    padding-left: 20px;
}

.c-crops__content--title {
    font-size: 15px;
    margin-top: 0;
}

.c-crops__content--title:before {
    margin-right: 6px;
    font-family: fontawesome;
    content: "\f125";
}

.c-crops__content--results {
    display: flex;
	flex-wrap: wrap;
	position: relative;
	/* justify-content: center; */
}
.c-crops__content--results.loading::before {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: auto;
    background: #ffffff87;
    content: url(/bundles/comitium5designer/layout/img/csd-loading.svg);
}

.c-crops__content--results-title {
    font-size: 15px;
    margin-top: 0;
}

.c-crops__content--results-title:before {
    margin-right: 6px;
    font-family: fontawesome;
    content: "\f03e";
}

.c-crops__content--results-box {
	display: flex;
	width: 23%;
	box-sizing: content-box;
	margin-bottom: 10px;
    /* margin-left: 10px; */
    /* border-right: solid 1px #e1e1e1; */
    padding-right: 10px;
}

/* .c-crops__content--results-box:first-child {
    margin-left: 0;
} */

/* .c-crops__content--results-box:last-child {
    border-right: none;
    padding-right: 0;
} */

.c-crops__content--results-crop-name {
	margin-bottom: 10px;
	border-bottom: solid 1px #e1e1e1;
    text-align: center;
    font-size: 12px;
}

.c-crops__content--results-container {
	display: flex;
    width: 100%;
    margin-top: 8px;
    padding: 10px;
	border: solid 1px #e1e1e1;
	border-radius: 4px;
    flex-direction: column;
}

.c-crops__content--results-image {
    /* display: flex;
	width: 60%; */

	width: 100%;
	/* background: #e1e1e1; */
	height: 120px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.c-crops__content--results-sizes {
    /* width: 40%; */
    margin: 8px 0 10px 0;
	display: flex;
	flex-wrap: wrap;
    justify-content: space-between;
    /* flex-direction: column; */
}

.c-crops__content--results-size {
	min-width: 49%;
    border: dashed 1px grey;
    padding: 2px 4px;
    font-size: 11px;
	margin-bottom: 4px;
	text-align: center;
}
.c-crops__content--resuls-alert {
	margin: auto;
    margin-bottom: 0;
	font-size: 10px;
}
.c-crops__content--resuls-alert::before {
	content: "\f06a";
	margin-right: 4px;
	color: #D55454;
	font-family: fontawesome;
}
.c-crops__content--results-size.is-disabled {
	border: dashed 1px #D55454;
	color: #D55454;
}

.c-crops__content--text {
    font-size: 12px;
}

.c-crops__content--crop {
    width: fit-content;
    margin: 5px 10px 5px 0;
    border: solid 1px grey;
    border-radius: 4px;
    padding: 6px 10px;
    color: grey;
    font-size: 13px;
}

.c-crops__content--crop:hover {
	border-color: #00A9C5;
	color: #00A9C5;
}

.c-crops__content--crop.active {
	background: #eaf1f3;
	border: dashed 1px #00A9C5;
	color: #00A9C5;
}

.c-crops__content--button {
    width: fit-content;
    margin-top: 20px;
}
.c-crops__content--button:hover {
	color: white;
}

.c-crops__primary-image {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-content: center;
    background: #ececec;
}

.c-crops__primary-image--image {
    width: 100%;
    max-width: 500px;
    margin: auto;
}

/* Crops watermarks */
.c-crops__watermarks {
    margin-top: 20px;
}

.c-crops__watermarks-select {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.c-crops__watermarks-select-input {
    padding-right: 10px;
}

.c-crops__watermarks-select label {
    flex-basis: 30%;
    margin-right: 10px;
    padding-bottom: 2px;
    font-size: 12px;
    font-weight: 400;
}

@media(max-width: 600px) {
    .c-crops__dialog {
        width: 96%;
    }

    .c-crops__primary-image {
        width: 100%;
    }

    .c-crops__content--info {
        width: 100%;
        margin-top: 10px;
        padding-left: 0;
    }

    .c-crops__content--results-box {
        width: 100%;
    }
}


/* FIXED CSD */
.csd-top--block-01 {display: flex;}
.csd-top--block-02 {display: flex; margin-right: 10px;}
.csd-top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; justify-content: space-between; }
@media (max-width: 1200px) { .csd-top > .logo { width: 40px; height: 40px; background: url(/bundles/comitium5designer/layout/img/newskin/c-logo-icon-white.svg) no-repeat center; background-size: 30px; } }
.csd-top .info { position: unset; left: unset; top: unset; padding: 0 8px; }
.csd-top .info span { font-size: 11px; }
.csd-top .info span:nth-child(1) { padding-right: 10px; }
.csd-top .info span:nth-child(2) { display: inline-block; margin: 0 4px; padding-right: 6px; border-right: 1px solid #474747; }
.csd-top .info span:nth-child(3) { padding-right: 6px; border-right: 1px solid #474747; }
@media (max-width: 1200px) { .csd-top .info span:nth-child(3) { display: none; } }
.csd-top .info span:nth-child(4) { padding-left: 4px; }
.csd-top .info span:first-child { margin: 0; }
/* .csd-top .csd-options { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; right: 305px; width: unset; top: unset; left: unset; margin: 0 !important; padding: unset; } */
.csd-top .csd-options {margin-right: 10px;}
.c-csd__modal--content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: left; }
.c-csd__modal--content > form { column-count: 3; column-fill: balance; column-gap: 60px; column-rule: 1px solid #e5e5e5;}
.c-csd__modal--content > form > label { font-weight: 400 !important; }

.modal-footer-alert { text-align: left; color: red; }

@media (max-width: 884px) {
	.csd-top .buttons .defaultBtn, .csd-top .buttons .mainBtn {
		padding: 7px 7px !important;
	}
	.csd-top .logo {
        background: url(/bundles/comitium5designer/layout/img/newskin/c-logo-icon-white.svg) no-repeat center;
        width: 40px;
        background-position: 10px;
    }
	.csd-top .info span:nth-child(3) { display: none; }
}

@media (max-width: 680px) {
	.csd-top .info span:nth-child(4) { display: none; }
	.csd-top .info span:nth-child(5) { display: none; }
}

/* WATERMARKS
/* ASSETS - Watermark - Selection */
.c-watermark {margin-top:20px; padding-top:20px; border-top:1px solid #DDD;}
.c-watermark__options {margin-bottom:10px;}
.c-watermark__label {display:block; margin-bottom:8px; font-size:14px; font-weight:400;}

/* WATERMARKS New Style */
.cs_watermarks .page-top-buttons {right:8px;}
.c-watermarks { display: flex; flex-wrap: wrap; margin-top: 20px; }
.c-watermarks__box { flex: 1 1 20%; margin: 10px; min-width: 100px; max-width: 150px; }
@media (max-width: 575.98px) { .c-watermarks__box { max-width: 100%; } }
.c-watermarks__watermark { display: flex; align-items: center; height: 100px; margin: 10px 0; border: solid 1px #dddddd; border-radius: 4px; background: #dedede; }
@media (max-width: 575.98px) { .c-watermarks__watermark { flex: 1 1 100%; } }
.c-watermarks__image { width: 100%; max-width: 100px; margin: 0 auto; padding: 10px; text-align: center; }
.c-watermarks__ico a:hover { text-decoration: none; }
.c-watermarks__ico--edit:before { font-family: Fontawesome; color: grey; margin-right: 20px; content: "\f044"; }
.c-watermarks__ico--delete:before { font-family: Fontawesome; color: grey; margin-right: 20px; content: "\f014"; }
.c-watermarks__form { margin-top: 20px; display: flex; justify-content: center; align-items: center; }
.c-watermarks__form--1col { width: 60%; border-bottom: solid 1px #eeeeee; margin-bottom: 10px; }
.c-watermarks__form--1col-pl-80 { padding-left: 80px; }
@media (max-width: 768px) { .c-watermarks__form--1col-pl-80 { padding: 0; } }
@media (max-width: 1024px) { .c-watermarks__form--1col { width: 80%; } }
@media (max-width: 768px) { .c-watermarks__form--1col { width: 100%; } }
.c-watermarks__form--2col { display: flex; width: 60%; }
.c-watermarks__form--2col .form-group {width: 50%;}
@media (max-width: 1024px) { .c-watermarks__form--2col { width: 80%; } }
@media (max-width: 768px) { .c-watermarks__form--2col { width: 100%; flex-direction: column; } }
.c-watermarks__position { width: 100%; height: 300px; margin-bottom: 20px; background-size: cover; background-repeat: no-repeat; background-position: center; overflow: hidden; }
.c-watermarks__position--label { width: 100%; height: 100px; display: flex; justify-content: center; align-items: center; }
.c-watermarks__position--label > .radio { background: none; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; opacity: 1; visibility: hidden; }
.c-watermarks__position--label > .radio > .checked { background-position: center !important; background-repeat: no-repeat !important; width: 100%; height: 100%; visibility: visible; }
.c-watermarks__position--row { display: flex; }
.c-watermarks__position--row:last-child .c-watermarks__position--cel {border-bottom: none;}
.c-watermarks__position--cel { width: calc(100% / 3); height: 100px; border-right: solid 1px white; border-bottom: solid 1px white; }
.c-watermarks__position--cel:last-child { border-right: 0; }
.c-watermarks__range { display: flex; align-items: center; }
.c-watermarks__range--list { display: inline-flex; width: 80%; justify-content: space-between; margin-bottom: 30px; font-size: 11px; }
.c-watermarks__range input[type=range] { width: 80%; height: auto !important; -webkit-appearance: none; margin: 10px 0; background-color: #FAFAFA; }
.c-watermarks__range input[type=number] { width: 20%; height: auto; margin-left: 10px; }
.c-watermarks__range input[type=range]:focus { outline: none; }
.c-watermarks__range input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 12px; cursor: pointer; animate: 0.2s; box-shadow: 0px 0px 0px #000000; background: #F7F7F7; border-radius: 8px; border: 1px solid #E8E8E8; }
.c-watermarks__range input[type=range]::-webkit-slider-thumb { box-shadow: 0px 0px 0px #000000; border: 1px solid #F2F2F2; height: 20px; width: 20px; border-radius: 16px; background: #00A9C5; cursor: pointer; -webkit-appearance: none; margin-top: -5px; }
.c-watermarks__range input[type=range]:focus::-webkit-slider-runnable-track { background: #F7F7F7; }
.c-watermarks__range input[type=range]::-moz-range-track { width: 100%; height: 12px; cursor: pointer; animate: 0.2s; box-shadow: 0px 0px 0px #000000; background: #F7F7F7; border-radius: 8px; border: 1px solid #E8E8E8; }
.c-watermarks__range input[type=range]::-moz-range-thumb { box-shadow: 0px 0px 0px #000000; border: 1px solid #F2F2F2; height: 20px; width: 20px; border-radius: 16px; background: #00A9C5; cursor: pointer; }
.c-watermarks__range input[type=range]::-ms-track { width: 100%; height: 12px; cursor: pointer; animate: 0.2s; background: transparent; border-color: transparent; color: transparent; }
.c-watermarks__range input[type=range]::-ms-fill-lower { background: #F7F7F7; border: 1px solid #E8E8E8; border-radius: 16px; box-shadow: 0px 0px 0px #000000; }
.c-watermarks__range input[type=range]::-ms-fill-upper { background: #F7F7F7; border: 1px solid #E8E8E8; border-radius: 16px; box-shadow: 0px 0px 0px #000000; }
.c-watermarks__range input[type=range]::-ms-thumb { margin-top: 1px; box-shadow: 0px 0px 0px #000000; border: 1px solid #F2F2F2; height: 20px; width: 20px; border-radius: 16px; background: #00A9C5; cursor: pointer; }
.c-watermarks__range input[type=range]:focus::-ms-fill-lower { background: #F7F7F7; }
.c-watermarks__range input[type=range]:focus::-ms-fill-upper { background: #F7F7F7; }
.c-watermarks__form--1col .form-image__img {display: flex;align-items: center;justify-content: center;width: 200px;height: 200px;padding: 20px;overflow: hidden;}
@media (max-width: 768px) { .c-watermarks__form--1col .form-image__img {width: 100%;height: auto;} }
.c-watermarks__form--1col .form-image__img img {width: 100%;height: 100%;-o-object-fit: contain;object-fit: contain;-o-object-position: center;object-position: center;}
.c-watermarks__form label {display: block;}
.c-watermarks__form span.required {visibility: hidden;}
.c-watermarks__form .has-error .help-block {color: #C00;}
.c-watermarks__form .help-block.help-info { color: #737373 !important; font-size: 12px;}
.c-watermark__tab.tab-pane.active.loading {background: url(/bundles/comitium5designer/designer/img/csd-loading.svg) center center no-repeat !important; background-size: 40px !important;}
.c-watermark__tab.tab-pane.active.loading >.c-crops-apply {opacity: .4;}

.c-watermark__checks {display: flex;}
.c-watermark__checks--span {margin-right: 16px; margin-left: 4px;}

.c-crops__content--info.loading {
    background: url(/bundles/comitium5designer/designer/img/csd-loading.svg) center center no-repeat !important;
    background-size: 40px !important;
}
.c-crops__content--info.loading .c-crops__content--title,
.c-crops__content--info.loading .c-crops__content--text,
.c-crops__content--info.loading .c-crops__content,
.c-crops__content--info.loading .c-watermark,
.c-crops__content--info.loading .c-crops__content--button {
    opacity: 0.4;
}

