/* overrides default treeview skin */

.tree table.ygtvtable {
    width: 100%;
    min-height: 22px;
	border: none;
	border-collapse: collapse;
}

.tree td.ygtvcell {
    border: none; 
}
.tree a.ygtvspacer {
	text-decoration: none;
	outline-style: none;
}

/* expand/collapse box background style */
.tree .ygtvtp,
.tree .ygtvlp,
.tree .ygtvtm,
.tree .ygtvlm {
    cursor: pointer;
    background: unset;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.tree .ygtvtp::before,
.tree .ygtvlp::before,
.tree .ygtvtm::before,
.tree .ygtvlm::before {
    background-color: #6E7DAA;
}

/* expand/collapse box background hover style */
.tree .ygtvlph,
.tree .ygtvtph,
.tree .ygtvtphh,
.tree .ygtvlmh,
.tree .ygtvtmh,
.tree .ygtvlmhh {
    cursor: pointer;
    background: unset;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.tree .ygtvlph::before,
.tree .ygtvtph::before,
.tree .ygtvtphh::before,
.tree .ygtvlmh::before,
.tree .ygtvtmh::before,
.tree .ygtvlmhh::before {
    background-color: #535E80;
}

/* expand/collapse box text style */
.tree .ygtvlp::before,
.tree .ygtvtp::before,
.tree .ygtvtm::before,
.tree .ygtvlm::before,
.tree .ygtvlph::before,
.tree .ygtvlmh::before,
.tree .ygtvtmh::before,
.tree .ygtvtph::before {
    width: 15px;
    height: 15px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    color: white;
    font-size: 15px;
    font-weight: 600;
}

/* collapse (minus) unicode */
.tree .ygtvlm::before,
.tree .ygtvtm::before,
.tree .ygtvtmh::before,
.tree .ygtvlmh::before { content: "\2212"; }

/* expand (plus) unicode */
.tree .ygtvtp::before,
.tree .ygtvlp::before,
.tree .ygtvlph::before,
.tree .ygtvtph::before { content: "\002B"; }

/* no children (remove background) */
/* (where expand/collapse box usually is) */
.tree .ygtvln,
.tree .ygtvtn {
    width: 15px;
    height: 15px;
    background: unset;
}

.tree .ygtvln::before,
.tree .ygtvtn::before {
    content: '▪';
    color: #36485D;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 20px;
    width: 18px;
}

/* NOTE: CLP-10044 calls for square bullets except on the first level, but it
 * looks pretty wonky. Leave this uncommented for now but if we don't come
 * back to this style before release of this ticket, remove at any point in
 * the future.
 */
/* .tree #ygtvc1 > .ygtvitem > table .ygtvtn::before {
    content: "";
} */

.tree .ygtvlabel {
    display: block;
}

.tree .ygtvcontent {
    width: 100%;
	cursor: default;
    padding: 0 4px;
}

.tree .ygtvblankdepthcell {
    width: 15px;
    height: 15px;
}

.tree .ygtvcell > a {
    display: none
}

.tree .ygtvfocus {
    background-color: #E3E5F4;
}


/*
 *
 *     REMAINING TREEVIEW STYLES I HAVEN'T MODIFIED:
 *
 */


/* Loading icon */
.tree .ygtvloading {
    width: 16px;
    height: 16px;
    margin-left: 2px;
    background: url(/images/treeview-loading.gif) 0 0 no-repeat;
}
.tree .ygtvloading::before {
    content: '';
    background-color: transparent;
}

/* the style for the empty cells that are used for rendering the depth 
 * of the node */
 .tree .ygtvdepthcell { 
    width: 15px;
    height: 15px; 
    background: unset;
}


/* the style of the div around each node's collection of children */
* html .tree .ygtvchildren { height: 2%; }  

/* the style of the text label in ygTextNode */
.tree .ygtvlabel,
.tree .ygtvlabel:link,
.tree .ygtvlabel:visited,
.tree .ygtvlabel:hover { 
    margin-left: 2px;
    text-decoration: none;
	cursor: pointer;
    background-color: unset;
}

.tree div.ygtvspacer {
    height: 15px;
    width: 15px;
}

.tree .ygtvfocus a {
	outline-style: none;
}

.tree .ygtvok {
    width: 18px;
    height: 15px; 
    background: url(treeview-sprite.gif) 0 -8800px no-repeat; 
}

.tree .ygtvok:hover {
    background: url(treeview-sprite.gif) 0 -8844px no-repeat; 
}

.tree .ygtvcancel {
    width: 18px; height:15px; 
    background: url(treeview-sprite.gif) 0 -8815px no-repeat; 
}

.tree .ygtvcancel:hover  {
    background: url(treeview-sprite.gif) 0 -8866px no-repeat; 
}

.tree .ygtv-label-editor {
	background-color:#f2f2f2;
	border: 1px solid silver;
	position:absolute;
	display:none;
	overflow:hidden;
	margin:auto;
	z-index:9000;
}

.tree .ygtv-edit-TextNode  {
	width: 190px;
}

.tree .ygtv-edit-TextNode .ygtvcancel,
.tree .ygtv-edit-TextNode .ygtvok  {
	border:none;
}

.tree .ygtv-edit-TextNode .ygtv-button-container {
	float: right;
}

.tree .ygtv-edit-TextNode .ygtv-input input {
	width: 140px;
}

.tree .ygtv-edit-DateNode .ygtvcancel {
	border:none;
}
.tree .ygtv-edit-DateNode .ygtvok  {
	display:none;
}

.tree .ygtv-edit-DateNode .ygtv-button-container {
	text-align:right;
	margin:auto;
}

.tree .ygtv-highlight .ygtv-highlight1,
.tree .ygtv-highlight .ygtv-highlight1 .ygtvlabel {
	background-color:blue;
	color:white;
}

.tree .ygtv-highlight .ygtv-highlight2,
.tree .ygtv-highlight .ygtv-highlight2 .ygtvlabel {
	background-color:silver;
}

.tree .ygtv-highlight .ygtv-highlight0 .ygtvfocus .ygtvlabel,
.tree .ygtv-highlight .ygtv-highlight1 .ygtvfocus .ygtvlabel,
.tree .ygtv-highlight .ygtv-highlight2 .ygtvfocus .ygtvlabel {
	background-color: #c0e0e0;
}

.tree .ygtv-highlight .ygtvcontent {
	padding-right: 1em;
}

.tree .ygtv-checkbox .ygtv-highlight0 .ygtvcontent {
	padding-left:1em;
	background:url(check0.gif) no-repeat;
}

.tree .ygtv-checkbox .ygtv-highlight0 .ygtvfocus.ygtvcontent,
.tree .ygtv-checkbox .ygtv-highlight1 .ygtvfocus.ygtvcontent ,
.tree .ygtv-checkbox .ygtv-highlight2 .ygtvfocus.ygtvcontent  {
	background-color:#c0e0e0;
}

.tree .ygtv-checkbox .ygtv-highlight1 .ygtvcontent {
	padding-left:1em;
	background:url(check1.gif) no-repeat;
}

.tree .ygtv-checkbox .ygtv-highlight2 .ygtvcontent{
	padding-left:1em;
	background:url(check2.gif) no-repeat;
}