Why Gemfury? Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Debian packages RPM packages NuGet packages

Repository URL to install this package:

Details    
jsarnowski/oxygen / toolbar / UI / css / domtree.css
Size: Mime:

.ct-tab {z-index: 99;}

.ct-searchbox {position: relative;}
.ct-searchbox span {color: #bbbbbb; position: absolute; top: 5px; left: 7px;}
.ct-magnify-icon:before { content: "\e45a"; font-family: 'Flaticons-Stroke' !important; }
.ct-dom-parent-icon:before { color: #ffffff; content: "\e53c"; font-family: 'Flaticons-Stroke' !important; }
.ct-delete-icon:before {color: #bababa; content: "\e1cf";}
.ct-plus-icon:before {color: #515151; content: "\e1b8";}
.ct-copy-item-icon:before {content: "\e408"; font-family: 'Flaticons-Stroke' !important;}
.ct-always-show-icon:after {color: #ffffff; content: "|"; transform: rotate(45deg);
    position: absolute;
    top: 1px;
    font-weight: 500;
    font-size: 18px;
    left: 5px;}

/* DOM TREE & CSS Manager */

.ct-panel-elements-managers {	
	background-color: #262E35;
	margin: 0;
	position: fixed;	
	padding: 0;
	top: 58px;
	right: 0;
	bottom: 0px;
	width: 0px;
	z-index: 2147483643;
	overflow: hidden;
	font-family: "Source Sans Pro", serif;
}

.ct-elements-managers-head {
	border-bottom: 1px solid rgb(20, 22, 24);
	margin: 0;
	padding: 0;
	width: 100%;
	min-width: 300px;
}

.ct-elements-managers-head .ct-tabs {
	 background-color: #192026;
	padding: 3px 4px 0;
	width: 100%;
}

.ct-elements-managers-head .ct-tab {
    background-color: #444F58;
    border-bottom: 1px solid rgb(20, 22, 24);
	border-radius: 0px;
	color: #ffffff;
	line-height: inherit;
	margin: 0 4px 0 0;
	padding: 10px 11px 0;
	text-transform: none;
	float: left;
	font-size: 12px !important;
	height: 38px;
	top: 1px;
}
.ct-elements-managers-head .ct-tab:last-child {margin: 0;}
.ct-elements-managers-head .ct-tab:not(.ct-active):hover {color: #ff5722;}
.ct-elements-managers-head .ct-tab.ct-active {background-color: #262E35; border-bottom: 0px; font-weight: bold !important;}

.ct-elements-managers-body {padding: 0; width: 100%; min-width: 300px; height: 100%}

/* .ct-tab-panel {display: none;} */
.ct-elements-managers-body .ct-tab-panel {display: block; height: 100%}

.ct-elements-managers-buttons {overflow:hidden; padding: 4px; width: 100%;}
.ct-elements-managers-buttons .ct-button {

	color: #fff;
	text-transform: uppercase;
	float: right;

    border: 1px solid #171A1D;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
    border-radius: 2px;
    background: linear-gradient(to bottom, rgba(116, 128, 156, 1) 0%, rgba(83, 96, 127, 1) 100%);
    box-shadow: inset 1px 1px 1px 0px rgba(255, 255, 255, 0.2), inset -1px -1px 1px 0px rgba(0, 0, 0, 0.2), inset 1px 1px 6px 0px rgba(255, 255, 255, 0.2), inset -1px -1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 8px rgba(0, 0, 0, 0.2);

    font-size: 9px;

}
.ct-elements-managers-buttons .ct-button:hover {background-color: #000000;}
.ct-elements-managers-buttons .ct-icon {color: #aaaaaa; display: inline-block; float: inherit; height: 19px; margin: 0;}
.ct-elements-managers-buttons .ct-icon-right .ct-icon {margin-right:0; margin-left:4px; padding: 2px 0 0; display: none;}


.ct-elements-managers-top {
	border-bottom: 1px solid rgba(0,0,0,0.35);
	margin: 0 8px 0;
	width: calc(100% - 16px);
	height: 34px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.ct-elements-managers-top-item {float: left; padding: 0 4px}
.ct-elements-managers-top-item:first-child {padding: 0 5px 0 0}
.ct-elements-managers-top-item:last-child {padding: 0 0 0 4px}
.ct-elements-managers-top-item .ct-searchbox {width: 150px;}

.ct-elements-managers-top-item .ct-textbox input[type="text"] {
	font-size: 12px;
	color:#ffffff;

}

.ct-elements-managers-top-item .ct-textbox.ct-searchbox input[type="text"] {padding: 0 10px 2px 27px;}
.ct-elements-managers-top-item .ct-textbox:not(.ct-searchbox) ::-webkit-input-placeholder { font-style: italic; }
.ct-elements-managers-top-item .ct-textbox:not(.ct-searchbox) :-moz-placeholder { font-style: italic; }
.ct-elements-managers-top-item .ct-textbox:not(.ct-searchbox) ::-moz-placeholder { font-style: italic; }
.ct-elements-managers-top-item .ct-textbox:not(.ct-searchbox) :-ms-input-placeholder { font-style: italic; }

.ct-elements-managers-top-item .ct-elements-managers-buttons {padding: 0;}
.ct-elements-managers-top-item .ct-elements-managers-buttons .ct-button {background-color: #cfcfcf;	color: #525252;	height: 30px; line-height: 30px; font-size: 13px; padding: 0 8px;}
.ct-elements-managers-top-item .ct-elements-managers-buttons .ct-icon-right .ct-plus-icon {margin-left: 4px; padding: 2px 0 0;}
.ct-elements-managers-top-item .ct-elements-managers-buttons .ct-button:hover {background-color: #00a7f8; color: #ffffff;}
.ct-elements-managers-top-item .ct-elements-managers-buttons .ct-button:hover .ct-plus-icon:before {color: #ffffff;}

.ct-elements-managers-top-item .ct-control-button {border: 1px solid #bbbbbb; min-width: inherit; padding: 0 6px}
.ct-elements-managers-top-item .ct-control-button .ct-icon:before {color: #bbbbbb;}
.ct-elements-managers-top-item .ct-control-button:hover {border: 1px solid #00a7f8; min-width: inherit; padding: 0 6px}
.ct-elements-managers-top-item .ct-control-button:hover .ct-icon:before {color: #00a7f8;}


.ct-elements-managers-top-item.ct-button {color: rgba(255,255,255,0.5); text-transform: none; text-decoration: underline; font-size: 11px;}
.ct-elements-managers-top-item.ct-button:hover {color: rgba(255,255,255,0.8);}

.ct-elements-managers-bottom {margin: 0; padding: 0px 0 0; position: relative; overflow-x: auto; overflow-y: auto; height: 100%;}
.ct-elements-managers-top + .ct-elements-managers-bottom {height: calc(100% - 95px);}
#ct-dom-tree .ct-elements-managers-bottom {height: calc(100% - 79px);}
/*.ct-selectors-tab .ct-elements-managers-bottom {height: calc(100% + 8px);}*/

/*
.ct-elements-managers-bottom::-webkit-scrollbar { width: 3px; height: 3px; } 
.ct-elements-managers-bottom::-webkit-scrollbar-track { background-color: #c8cfd5; position: relative; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} 
.ct-elements-managers-bottom::-webkit-scrollbar-thumb {
  	background-color: #546f7a;
	-webkit-border-radius: 3px;
    -moz-border-radius: 3px; 
	border-radius: 3px;
	border: none;
}*/

	/* DOM TREE */

#ct-dom-tree {
	height: 100%;
}
.ct-dom-tree-parent.ct-dom-tree-node-anchor {


	background-color: #3f464e;
	border: 1px solid rgba(0,0,0,0);
	border-radius: 2px;

	color: #ffffff; 
	cursor: pointer; 
	font-size: 12px; 
	line-height: 12px;

	margin: 8px;

	margin-bottom: 6px;

	display: flex;
	align-items: center;


	width: calc(100% - 16px);
	position: relative; 
	z-index: 999;

	padding: 5px;


}

#ct-dom-tree-node-0 > span {
	display: none;
}
.ct-elements-managers-bottom .ct-dom-tree-parent span.ct-icon {padding: 1px 11px 0 0;}
.ct-elements-managers-bottom span.ct-icon {padding: 1px 11px 0 0;}

.ct-dom-tree-node {margin: 0; padding: 0; width: 100%; min-width: 260px;}
.ct-elements-managers-bottom > .ct-dom-tree-node, .ct-dom-tree-node.gu-mirror {padding: 0 0 0 23px;  margin: 0 0 0 10px; width: calc(100% - 11px); position: relative;}
.ct-elements-managers-bottom > .ct-dom-tree-node.ct-dom-tree-no-children {background-color: #262E35; z-index: 99; }
.ct-elements-managers-bottom > .ct-dom-tree-node > .ct-dom-tree-node {position: relative;}
.ct-elements-managers-bottom > .ct-dom-tree-node.ct-dom-tree-node-expanded:not(.ct-dom-tree-no-children)  {background: transparent url(../images/bg_dashed-vertical.png) repeat-y 0 0;}
/*
.ct-elements-managers-bottom > .ct-dom-tree-node.ct-dom-tree-node-expanded:not(.ct-dom-tree-no-children):before {
  content: '';
  width:26px;
  height: -webkit-calc(100% - 24px);
  height: -moz-calc(100% - 24px);
  height: calc(100% - 24px);
  background-color: #5A6670;
  display: block;
  position: absolute;
  left: -18px;
  top: 26px;
  z-index:999999;
}
*/
.ct-elements-managers-bottom > .ct-dom-tree-node .ct-dom-tree-node { padding: 0 0 0 45px; margin: 0 0 0 -13px; width: calc(100% + 13px);}
 .ct-dom-tree-node.gu-mirror.ct-dom-tree-child  { padding: 0 0 0 45px;}
.ct-dom-tree-node > .ct-dom-tree-node {display: none;}
.ct-dom-tree-node.ct-dom-tree-node-expanded > .ct-dom-tree-node {display: block;}

.ct-dom-tree-horizontal-dash {
	background: transparent url(../images/bg_dashed-horizontal.png) repeat-x 0 0; 
	display: block; 
	height: 38px; 
	position: absolute; 
	left: -99999px; 
	/* bottom: -8px; */
	top: 0px;
	right: 20px;
	z-index: 98;
}
.ct-elements-managers-bottom > .ct-dom-tree-node > .ct-dom-tree-node-anchor .ct-dom-tree-horizontal-dash {left: 9px;}
.ct-dom-tree-node .ct-dom-tree-horizontal-dash:last {display: none;}
.ct-dom-tree-bottom-dash-cover {background-color: #262E35; height: 13px; position: absolute; bottom: 0; left: 0; width: 100%;}
.ct-dom-tree-left-dash-cover {background-color: #262E35; height: 100%; position: absolute; bottom: 0; left: -27px; width: 25px; z-index: 99999;}
.ct-dom-tree-parent + .ct-dom-tree-node > .ct-dom-tree-left-dash-cover {display:block;}
.ct-dom-tree-node-anchor {background-color: #262E35; padding: 0 8px 0 0; position: relative;cursor: pointer;}
.ct-dom-tree-node-anchor.ct-dom-tree-node-selected {
	z-index:9999;
}
.ct-node-options {display:none; position: absolute; right: 2px; top: 3px; z-index: 2147483644;}
.ct-dom-tree-node-anchor:hover .ct-node-options {display: block}

.ct-node-options-none-hovered {display:block; position: absolute; right: 2px; top: 3px; z-index: 2147483644;}
.ct-dom-tree-node-anchor:hover .ct-node-options-none-hovered {display: none}

.ct-elements-managers-bottom .ct-node-options span.ct-icon {cursor: pointer; padding: 1px 4px 0 0;}
.ct-elements-managers-bottom .ct-node-options span.ct-icon.ct-more-options-icon {margin-right: 3px;}
.ct-elements-managers-bottom .ct-node-options span.ct-icon:hover:before {color: #ffffff;}

.ct-node-options-none-hovered img,
.ct-node-options img {
	width: 14px;
	height: 14px;
	margin-right: 3px;
    opacity: 0.8;
}
.ct-node-options img:hover {
	opacity: 1;
}

.ct-node-details {color: #bababa; position: absolute; right: 60px; top: 5px; z-index: 100; display:none;}
.ct-dom-tree-node-header:hover .ct-node-details { display: inline-block; }
.ct-css-node-header:hover .ct-node-details { 
	display: inline-block;
    color: #fff;
    position: static;
    float: left;
    margin-right: 10px;
}
.ct-dom-tree-node-header {
	background-color: #37414A;
	border: 1px solid rgba(0,0,0,0,0.5);
	color: #ffffff; 
	cursor: pointer; 
	font-size: 12px; 
	line-height: 12px;
	min-height: 26px; 
	margin: 0 0 4px; 

	display: flex;
	align-items: center;

    padding-top: 0px;
    padding-right: 4px;
    padding-bottom: 0px;
    padding-left: 6px;

	width: 100%; 
	position: relative; 
	z-index: 999;
}

.ct-dom-tree-node-active .ct-dom-tree-node-header {
	/* cursor: default; */
}
.ct-dom-tree-node-selected .ct-dom-tree-node-header, .ct-dom-tree-parent.ct-dom-tree-node-selected {background-color: #2783C7; border-color: #1A2127; color: #000000;}
/* .ct-dash-highlight {display:none; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; border: 2px dashed #89bbe8; z-index: 99;}*/

.ct-dom-tree-node-header.categorized-component {background-color: #82745b !important;}

.ct-dom-tree-node > .ct-dom-tree-node-anchor.ct-dom-tree-node-selected > .ct-dom-tree-node-header .ct-node-details {color: #000000;}
.ct-dom-tree-node > .ct-dom-tree-node-anchor.ct-node-options-active > .ct-dom-tree-node-header .ct-node-details {color: #000000; display: none;}

.ct-elements-managers-bottom .ct-dom-tree-node-type-general.ct-dom-tree-node-selected .ct-node-type-icon {border-color: #000000;}
.ct-dom-tree-parent.ct-dom-tree-node-selected .ct-icon:before {color:#000000;}

.ct-expand-butt {background-color: #262E35; position: absolute; /* bottom: 4px; */ top: -2px; left: -24px; padding: 7px 0 0 0; height: 25px; overflow: hidden;}
.ct-elements-managers-bottom .ct-expand-butt span.ct-icon {cursor: pointer; padding: 1px 7px 0 0;}
.ct-expand-butt span.ct-icon:before { color: rgb(182, 167, 255); content: "\e5b4"; font-family: 'Flaticons-Stroke' !important; font-size: 16px; }
.ct-expand-butt span.ct-icon:hover:before {color: #ffffff;}
.ct-dom-tree-node.ct-dom-tree-no-children .ct-expand-butt {display: none;}
.ct-dom-tree-node-expanded > .ct-dom-tree-node-anchor .ct-expand-butt span.ct-icon:before,
.ct-style-set-expanded > .ct-expand-butt span.ct-icon:before {content: "\e5b5";}
.ct-elements-managers-bottom .ct-dom-tree-node-type-general .ct-node-type-icon { 
	border: 2px solid #ffffff; 
	-webkit-border-radius:2px; 
	-moz-border-radius:2px; 
}
.ct-node-type-icon {
	border-radius: 2px; 
	height: 16px; 
	width: 16px; 
	padding: 0; 
	margin: 1px 12px 0 2px;
	display: none;
}
.ct-elements-managers-bottom .ct-dom-tree-node-type-image .ct-node-type-icon:before {margin: 2px 3px 0 2px; width: 14px;}
.ct-elements-managers-bottom .ct-dom-tree-node-type-image .ct-node-type-icon:before {
	content: "\e46a"; 
	font-family: 'Flaticons-Stroke' !important; 
	width: 14px; 
	font-size: 13px;
}
.ct-elements-managers-bottom .ct-dom-tree-node-type-text-block .ct-node-type-icon {margin: 1px 11px 0 2px; padding: 0; width: 14px;}
.ct-elements-managers-bottom .ct-dom-tree-node-type-text-block .ct-node-type-icon:before {content: "A";  font-family: 'Roboto-Bold' !important; font-size: 15px;}

.ct-dom-tree-node-anchor.ct-dom-tree-node-type-shortcode .ct-dom-tree-node-header, .ct-dom-tree-node-anchor.ct-dom-tree-node-type-shortcode .ct-node-details {color: #782a08;}
.ct-dom-tree-node-anchor.ct-dom-tree-node-type-shortcode .ct-node-type-icon {padding: 1px 14px 0 0;}
.ct-dom-tree-node-anchor.ct-dom-tree-node-type-shortcode .ct-node-type-icon:before {color: #782a08; content: "\e4d2"; font-family: 'Flaticons-Stroke' !important;}

.ct-dom-tree-node-anchor.ct-dom-tree-node-type-raw .ct-dom-tree-node-header {background-color: #e8e8e8; border-color: #cccccc; color: #8f8fad; font-style: italic;}
.ct-dom-tree-node-anchor.ct-dom-tree-node-type-raw .ct-node-type-icon {color: #8f8fad; font-style: normal; padding: 1px 14px 0 0;}
.ct-dom-tree-node-anchor.ct-dom-tree-node-type-raw .ct-node-details {right: 3px;}
.ct-dom-tree-node-anchor > .ct-dom-tree-node-header > .ct-node-details .ct-elements-managers-buttons {padding: 0; margin: -1px 0 0;}
.ct-dom-tree-node-anchor > .ct-dom-tree-node-header > .ct-node-details .ct-elements-managers-buttons .ct-button {background-color: #2b2b2b; color: #ffffff; font-style: normal; height: 21px; padding: 0 7px;}
.ct-dom-tree-node-anchor > .ct-dom-tree-node-header > .ct-node-details .ct-elements-managers-buttons .ct-button:hover {background-color: #3da2ff;}

.ct-dom-tree-node-anchor.ct-dom-tree-node-type-reusable .ct-dom-tree-node-header {color: #00a614;}
.ct-dom-tree-node-anchor.ct-dom-tree-node-type-reusable .ct-node-type-icon {padding: 1px 12px 0 1px;}
.ct-dom-tree-node-anchor.ct-dom-tree-node-type-reusable .ct-node-type-icon:before {color: #00a614; content: "\e4fd"; font-family: 'Flaticons-Stroke' !important; font-size: 17px;}

.ct-dom-tree-body-anchor:hover .ct-node-details {
	display: block;
	color: white;
	right: 10px;
}

.ct-dom-tree-node-details {
	-webkit-transition: max-height 0.5s, opacity 0.4s, border-width 0.2s, margin 0.4s;
	-moz-transition: max-height 0.5s, opacity 0.4s, border-width 0.2s, margin 0.4s;
	transition: max-height 0.5s, opacity 0.4s, border-width 0.2s, margin 0.4s;
	background-color: #515456; padding: 0; width: 100%;
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	margin: 0;
	border: 1px solid #515456; 
	border-width: 0;
}

.ct-dom-tree-node-details ul.ct-dom-tree-node-details-list {margin: 0; padding: 0; display: table; width: 100%;}
.ct-dom-tree-node-details ul.ct-dom-tree-node-details-list li {cursor: pointer; color: #ffffff; display: table-row; font-family: "Courier-New-Regular", "Open-Sans-Regular", Helvetica, arial, sans-serif; font-size: 11px; list-style: none; margin: 0; padding: 0; height: 25px; width: 100%;}

.ct-dom-tree-node-details ul.ct-dom-tree-node-details-list li .ct-dom-tree-node-attribute {display: table-cell; vertical-align: middle; width: 40px; padding: 0 0 0 5px;}

.ct-dom-tree-node-details ul.ct-dom-tree-node-details-list li .ct-attribute {background-color: #89bbe8; font-family: "Open-Sans-Regular", Helvetica, arial, sans-serif;  height: 17px; text-align: center; vertical-align: middle; width: 100%;}
.ct-dom-tree-node-details ul.ct-dom-tree-node-details-list li .ct-attribute-id {background-color: #e352b2;}
.ct-dom-tree-node-details ul.ct-dom-tree-node-details-list li .ct-attribute-id:before { content:"ID"; }
.ct-dom-tree-node-details ul.ct-dom-tree-node-details-list li .ct-attribute-class {background-color: #945ccc;}
.ct-dom-tree-node-details ul.ct-dom-tree-node-details-list li .ct-attribute-class:before { content:"class"; }

.ct-dom-tree-node-details ul.ct-dom-tree-node-details-list li .ct-dom-tree-node-detail {display: table-cell; padding: 1px 0 0 7px; vertical-align: middle; height: 25px; position: relative;}
.ct-dom-tree-node-details ul.ct-dom-tree-node-details-list li .ct-dom-tree-node-detail .ct-dom-tree-node-detail-options {position: absolute; right: 0px; top: 5px;}
.ct-dom-tree-node-details ul.ct-dom-tree-node-details-list li .ct-dom-tree-node-detail .ct-dom-tree-node-detail-options span.ct-icon {cursor: pointer; padding: 1px 6px 0 0;}
.ct-dom-tree-node-details ul.ct-dom-tree-node-details-list li .ct-dom-tree-node-detail .ct-dom-tree-node-detail-options span.ct-icon:before {color: #c3c3c3; font-size: 13px;}
.ct-dom-tree-node-details ul.ct-dom-tree-node-details-list li .ct-dom-tree-node-detail .ct-dom-tree-node-detail-options span.ct-icon:hover:before {color: #ffffff;}

.ct-more-options-container {display: none; position: absolute; top: -4px; right: 23px; margin: 0; padding: 0; z-index: 99;}
.ct-more-options-expanded .ct-more-options-container {display: block;}
.ct-more-options-expanded .ct-more-options {
	background-color: #e6edf1;
	border: 1px solid #474a4c;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	min-width: 170px;
	margin: 22px 0 0;
	-moz-border-radius:  3px 0px 3px 3px;
	-webkit-border-radius: 3px 0px 3px 3px;
    border-radius: 3px 0px 3px 3px;
}
.ct-more-options-expanded .ct-more-options ul {margin: 3px 0; padding: 0; width: 100%;}
.ct-more-options-expanded .ct-more-options ul li {color: #343434; cursor: pointer; display: list-item; font-size: 11px; list-style: none; margin: 0; padding: 4px 8px 4px; min-height: 25px; width: 100%;}
.ct-more-options-expanded .ct-more-options ul li.active,
.ct-more-options-expanded .ct-more-options ul li:hover {background-color: #b6babc;}

.ct-elements-managers-bottom .ct-node-options.ct-more-options-expanded span.ct-icon.ct-more-options-icon {
	background-color: #e6edf1;
	border-top: 1px solid #474a4c;
	border-left: 1px solid #474a4c;
	border-right: 1px solid #474a4c;
	-moz-border-radius:  3px 3px 0px 0px;
	-webkit-border-radius: 3px 3px 0px 0px;
    border-radius: 3px 3px 0px 0px;
	position: relative;
	z-index: 100;
	padding: 1px 4px 0;
}
	
	/* CSS Manager */

.ct-css-manager-tab {height: 100%}

.ct-css-manager-tab .ct-elements-managers-top-item {padding: 0 0 0 4px}
.ct-css-manager-tab .ct-elements-managers-top-item:first-child {padding: 0}

.ct-css-node {margin:0; padding:0; width: 100%;}
.ct-css-node-header {

    background-color: #3f464e;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 2px;

    cursor: pointer;
    font-size: 12px;


    color: #ffffff;
    line-height: 12px;
    min-height: 26px;
    margin-left: 8px;
    margin-right: 8px;
    margin-top: 0px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    padding-top: 0px;
    padding-right: 4px;
    padding-bottom: 0px;
    padding-left: 6px;
    position: relative;
    z-index: 999;

}

.ct-css-node-header:hover {
    background-color: #5DAEEA;
    border: 1px solid #0A2D48;
	color: #fff;
}

.ct-css-node-header .ct-icon.ct-settings-icon {
	margin-right: 0;
    padding-top: 0px !important;
    padding-right: 2px !important;
}

.ct-elements-managers-stylesheets > div {
	margin-left: 10px;
}


.ct-css-node-header.ct-css-node-selected, .ct-css-node-header:hover,
.ct-css-node-hilite {
	background-color: #7bacd0;
    border: 1px solid rgba(0,0,0,0);
    color: #000;
}

.ct-css-node-folder-menu {
  z-index: 9991;
}

.ct-css-folder-menu {
	width: 100px; 
	position: absolute;
	right: 0;
	top: 20px;
}

.ct-css-folder-menu  ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
    border-radius: 3px;
    background-color: #000;
    overflow: hidden;
}

.ct-css-folder-menu  ul > li {
    padding: 9px 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}


.ct-css-folder-menu  ul > li:hover {
	background-color: rgb(103, 111, 121);
    color: rgba(255, 255, 255, 1);
}


.ct-css-node-disabled {
  background-color: #999;
}
	
.ct-css-node-header.ct-node-options-active { padding: 5px 70px 5px 7px; }
.ct-css-node-header.ct-node-options-active .ct-node-options {display:block;}
.ct-elements-managers-bottom .ct-css-node-header .ct-node-options span.ct-icon:before {color: #bababa;}
.ct-elements-managers-bottom .ct-css-node-header.ct-css-node-selected .ct-node-options span.ct-icon:before, .ct-node-options span.ct-icon:before, .ct-elements-managers-bottom .ct-css-node-header:hover .ct-node-options span.ct-icon:before {color: #ffffff;}
.ct-elements-managers-bottom .ct-css-node-header .ct-node-options span.ct-icon:hover:before{color: #97c3eb;}


/* Style Sets */
.ct-style-set-child-selector {
	margin-left: 30px;
	width: calc(100% - 30px);
}
.ct-css-node-header.ct-active-selector {
	background: #5DAEEA;
}

/* Dragula */
.gu-mirror .ct-dom-tree-horizontal-dash {
	display: none !important;
}

.gu-mirror > .ct-dom-tree-node-anchor {
  opacity: 0.5;
}

.gu-mirror >  *:not(.ct-dom-tree-node-anchor) {
  opacity: 0 !important;
}

.gu-mirror > .ct-dom-tree-node-anchor > .ct-dom-tree-node-header.ct-handle > *:not(.ct-nicename)
{
  opacity: 0 !important;
}

.gu-mirror > .ct-dom-tree-node-anchor > .ct-dom-tree-node-header.ct-handle > .ct-dom-tree-node-details {
	display: none;
}

.gu-mirror .ct-expand-butt {
  opacity: 0;
}

/*.ct-handle {
	cursor: move !important;
}*/




/* more louis changes */


.ct-dom-tree-node-header {
	background-color: #3f464e;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 2px;
}

.ct-elements-managers-bottom .ct-css-node-header .ct-node-options span.ct-icon:before {
	color: #fff;
}

.ct-css-node-header.ct-node-options-active .ct-node-options {
	visibility: hidden;
}

.ct-css-node-header:hover.ct-node-options-active .ct-node-options {
	visibility: visible;
}



/* highlighted/selected element */

.ct-dom-tree-node-selected .ct-dom-tree-node-header, .ct-dom-tree-parent.ct-dom-tree-node-selected {
    background-color: #7bacd0;
    border: 1px solid #0A2D48;
    border: 1px solid rgba(0,0,0,0);
}

/* expand/collapse icons */
.ct-expand-butt span.ct-icon:before {
	color: rgba(255,255,255,0.5);
}

.ct-expand-butt span.ct-icon:hover:before {
	color: rgba(255,255,255,0.8);
}


/* component title in edit mode, should look like an input field*/
.ct-nicename-editing {
  background-color:rgba(255, 255, 255, 0.5);
  width: 70%;
  padding: 2px 4px;
  border: 1px #369 solid;
}

/* componentize, duplicate, wrap with div menu */
.ct-more-options-expanded .ct-more-options {
    background-color: #37414A;
    border: 1px solid #111111;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
}

.ct-elements-managers-bottom .ct-node-options.ct-more-options-expanded span.ct-icon.ct-more-options-icon {
    background-color: #37414A;
    border-top: 1px solid #111111;
    border-left: 1px solid #111111;
    border-right: 1px solid #111111;
}

/* id and class menu */
.ct-dom-tree-node-details {
    background-color: #232A30;
    border: 1px solid rgb(17, 17, 17);
}

.ct-dom-tree-node-details ul.ct-dom-tree-node-details-list li:hover {
	background-color: rgba(255, 255, 255, 0.2);
}


/* setting the background for tab section */
.ct-elements-managers-head .ct-tabs {
    background-color: #3A454E;
}

/* top section */

.ct-textbox .ct-searchbox {
	background-color: rgb(61, 72, 82);
}


/* scroll bar */

/*
.ct-elements-managers-bottom::-webkit-scrollbar {
	width: 2px;
	height: 2px;
} 
.ct-elements-managers-bottom::-webkit-scrollbar-track {
	background-color: #444444;
	position: relative; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
} 
.ct-elements-managers-bottom::-webkit-scrollbar-thumb {
  	background-color: #ffffff;
	-webkit-border-radius: 2px;
    -moz-border-radius: 2px; 
	border-radius: 2px;
	border: none;
}
*/



/* fonts */

.ct-panel-elements-managers {
	font-family: "Source Sans Pro" !important;
}


.ct-dom-tree-parent.ct-dom-tree-node-anchor {
	font-family: "Source Sans Pro" !important;
}


.ct-dom-tree-node-details ul.ct-dom-tree-node-details-list li .ct-attribute {
	font-family: "Source Sans Pro" !important;
}

.ct-more-options-expanded .ct-more-options ul li {
	color: #fff;
}

.ct-more-options-expanded .ct-more-options ul li:hover {
	background-color: rgba(255,255,255,0.2);
}




.ct-style-sheets-tab .ct-css-node-header:first-child {
	margin-top: 8px;
}

.ct-selectors-tab .ct-css-node-folder > .ct-css-node-header {
	margin-top: 8px;
}

.ct-css-node-folder {
	margin-left: 20px;
}

.ct-selectors-tab .ct-css-node-header.ct-style-set-node {
	margin-top: 8px;
}

.ct-selectors-tab .ct-icon.ct-dom-parent-icon {
	display: none;
}


.ct-elements-managers-top-item .ct-elements-managers-buttons .ct-button {
	height: 30px;
	border-radius: 2px;
    background: linear-gradient(to bottom, rgba(116, 128, 156, 1) 0%, rgba(83, 96, 127, 1) 100%);
    box-shadow: inset 1px 1px 1px 0px rgba(255, 255, 255, 0.2), inset -1px -1px 1px 0px rgba(0, 0, 0, 0.2), inset 1px 1px 6px 0px rgba(255, 255, 255, 0.2), inset -1px -1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 8px rgba(0, 0, 0, 0.2);
    font-size: 10px;
    font-family: "Open Sans";
    color: #fff;
    line-height: 30px;
	padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
}




.ct-selectors-tab .ct-elements-managers-top,
.ct-style-sheets-tab .ct-elements-managers-top {
	display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
}

.ct-selectors-tab .ct-elements-managers-top .ct-elements-managers-top-item,
.ct-style-sheets-tab .ct-elements-managers-top .ct-elements-managers-top-item {
	padding: 0px;
	display: flex;
	flex: 1;
}

.ct-selectors-tab .ct-elements-managers-top .ct-elements-managers-top-item:last-child,
.ct-style-sheets-tab .ct-elements-managers-top .ct-elements-managers-top-item:last-child {
	margin-left: 8px;
}

.ct-selectors-tab .ct-elements-managers-top .ct-elements-managers-top-item .ct-button,
.ct-style-sheets-tab .ct-elements-managers-top .ct-elements-managers-top-item .ct-button {
	width: 100%;
}

.ct-css-section-label {
    color: #fff;
    font-size: 12px;
    padding: 6px 0 0 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 12px;
}


.ct-selectors-tab .ct-elements-managers-top .ct-elements-managers-top-item .ct-textbox.ct-textbox-big,
.ct-style-sheets-tab .ct-elements-managers-top .ct-elements-managers-top-item .ct-textbox.ct-textbox-big {
	border: none;
	box-shadow: none;
	width: initial;
	margin: 0;

    background-color: #3f464e;
    display: flex;
    border-radius: 4px;
    height: 31px;
    align-items: center;
    border: none;

    flex-grow: 1;

}

.ct-selectors-tab .ct-elements-managers-top .ct-elements-managers-top-item .ct-textbox input,
.ct-style-sheets-tab .ct-elements-managers-top .ct-elements-managers-top-item .ct-textbox input {

	font-size: initial;
	color: initial;
	padding: initial;
	height: initial;
	margin: initial;
	width: initial;
}

.ct-selectors-tab .ct-elements-managers-top .ct-elements-managers-top-item .ct-textbox input,
.ct-style-sheets-tab .ct-elements-managers-top .ct-elements-managers-top-item .ct-textbox input {

    background: transparent;
    border: none;
    font-size: 14px;
    color: #fff;
    padding-left: 9px;
    padding-right: 9px;
    width: 100%;
    height: 100%;
    flex: 1;
    position: relative;
    z-index: 10;

}


.ct-elements-managers-top-item .ct-elements-managers-buttons .ct-button {
	height: 31px;
	border: 1px solid;
	background: transparent;
	font-family: inherit;
	box-shadow: none;
	font-size: 12px;
	line-height: 12px;
    text-decoration: none;
    padding: 0px !important;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 4px;
	width: 55px;
	color: rgba(255,255,255,0.7);
	border-color: rgba(255,255,255,0.3);
	text-transform: capitalize;
}

.ct-elements-managers-top-item .ct-elements-managers-buttons .ct-button:hover {
	background: initial;
	color: rgba(255,255,255,1);
	border-color: rgba(255,255,255,0.7);
}

.dom-tree-disabled > div > .ct-dom-tree-node-header, 
.dom-tree-disabled > div > .ct-dom-tree-node-header:hover {
	background-color: #999 !important;
	cursor: default;
}

.dom-tree-disabled > div > .ct-dom-tree-node-header .ct-node-options {
	display: none !important;
}

#ct-dom-tree .ct-dom-tree-node-header [contenteditable="true"] {
  -webkit-user-select: text !important;
  user-select: text !important;
}