html {
  
}
.item {
   
}

.bold6h {
    
}
.pl-5{padding-left:5px;}

ul.new-fs-tree li {
    text-decoration: none;
}
li.csn-tree-file-item span.match-abb{
    float:right
}
span.rule-tag-abb {
    /* color:#525050 */
}

.top-nav ul > li {
    float: left;
    list-style: none;
    padding: 7px 5px 0 5px;
}
        .top-nav ul > li > a:link, .top-nav ul > li > a:hover, .top-nav ul > li > a:active, .top-nav ul > li > a:visited {
           text-decoration:none;
        }
        .top-nav ul > li > a:hover, .top-nav ul > li > a:active, .top-nav ul > li.active > a , .top-nav ul > li.active > a > span {
            font-weight: 400;
            margin:0 -1px;
        }
        .top-nav ul > li.critical, .top-nav ul > li.critical > a > span {
            color: #900000;
        }
        .top-nav ul > li.medium, .top-nav ul > li.medium > a > span {
            color: #ff6a00;
        }
        .top-nav ul > li.low_risk, .top-nav ul > li.low_risk > a > span {
           /* color: #002fb8; */
        }
        .top-nav ul > li.all, .top-nav ul > li.all > a > span {
            color: #343434;
        }
.top-nav ul > li v {
    color: white;
    text-align: center;
    padding: 5;
}

        .top-nav ul > li v:hover {
            background-color: #111;
        }

    .top-nav ul > li .active {
        background-color: green;
    }

.tree-view {
   
}
    .tree-view ul > li.item {
        list-style: none;
    }
    .dir-view ul > li.item {
        list-style: none;
    }
    .clear-b {
        clear: both;
    }
.padl-30{padding-left:30px;}
.padr-5 {padding-right: 30px;}
.node-error-count{
    color: #900000
}
.match-i {
    color: #909090;
    content: "\f111";
    padding: 5px 5px 5px 5px;
    margin-right: 5px;
    float: right;
}
.suggest-view {
}
.rule-view {
    padding: 10px;
    float: left;
    min-width: 25%;
    max-width: 30%;
}
.suggest-view .hdr {
 
}
.top-nav ul > li.active {
    text-decoration: underline;
    background: #f7f7f7;
    padding: 7px 15px 12px 15px;
    margin: 0 10px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
}


/* 

Icon should be faded on this markup
<li class="item">
	<div class="node-active">
		<span class="m">
			
			<i>
				<svg aria-label="File" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path>
				</svg>
			</i> &nbsp;CosesionSD_Report_20230716_124816.html
		</span>
	</div>
</li>

*/



/* 
Icon should be dark on this markup
<li class="item">
	<div class="rr-1">
		<span class="m">
			<i>
				<svg aria-label="File" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true">
					<path d="M2 1.75C2 .784 2.784 0 3.75 0h6.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16h-9.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 9 4.25V1.5Zm6.75.062V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path>
				</svg>
			</i>
			2023 Taxes.xlsx
		</span>

		<i class="fa fa-circle match-i">
		</i>
	</div>
</li>

*/
/* #cosesion-directory-tree-id li.item > div > .m > i > svg,
#cosesion-directory-tree-id .node-active {
	color: var(--csn-opaque-black-white-0080);
	fill: currentColor;

	

} */

/* #cosesion-directory-tree-id .tree-view ul > li.item > div.node-active > .m > i > svg {
	color: var(--csn-opaque-black-white-0080);
	fill: currentColor;
}

.tree-view ul > li.item > div {
	color: var(--csn-opaque-black-white-0080);
}
div.tv.rm-3 div.rr-3 > span.m {
	
	color: #ffb105;
	font-weight: 400;
}

div.tv.rm-2 div.rr-2 > span.m {
    color: var(--bs-orange) !important;
    font-weight: 400;
}
div.tv.rm-ai div.rr-2 > span.m {
	color: var(--csn-opaque-saturated-blue-012);
    font-weight: 400;
}

div.tv.rm-1 div.rr-1 > span.m {

	font-weight: 400;
	color: var(--bs-red);
	
} */





 /* div.tv.rm-3 .match-i {
    
    font-weight: 400;
    color: var(--bs-yellow);
}
 div.tv.rm-2 .match-i {

    color: var(--bs-orange) !important;
    font-weight: 400;
}

 div.tv.rm-1 .match-i {
    
    color: var(--bs-red);
    font-weight: 400;

}

div.tv.rm-ai .match-i {
    
    font-weight: 400;

    color: var(--csn-opaque-saturated-blue-010);
} */

/*
div.tv.rm-1 div.rr-1:hover, 
div.tv.rm-2 div.rr-2:hover, 
div.tv.rm-3 div.rr-3 :hover, 
div.tv.rm-ai div.rr-2 :hover {
    background-color: #E8F0FE;
    cursor: pointer;
    padding-left: 15px;
    margin-left: -15px;
}
*/
/*
div.tv.rm-1 div.rr-1:hover, 
div.tv.rm-2 div.rr-2:hover, 
div.tv.rm-3 div.rr-3 :hover, 
div.tv.rm-ai div.rr-2:hover {
    background-color: #E8F0FE;
}
*/

/* .match-h {
	padding-left: 15px;
	margin-left: -15px;
} */



.match-o{
    
}


/* Critical */
/* div.tv.rm-1 div.rr-1:hover {
    background-color: var(--csn-transparent-red-0004);
    cursor: pointer;
}
div.tv.rm-1 div.rr-1.match-h {
	background-color: var(--csn-transparent-red-0004);
	border-style: solid;
	border-color: var(--bs-red);
	border-width: 1px;
} */



/* #cosesion-directory-tree-id li.item > div.rr-1 > .m > i > svg,
#cosesion-directory-tree-id li.item > div.rr-2 > .m > i > svg,
#cosesion-directory-tree-id li.item > div.rr-3 > .m > i > svg,
#cosesion-directory-tree-id li.item > div.rr-ai > .m > i > svg,
#cosesion-directory-tree-id li.item .rr-ai > .m > .fa-solid.fa-folder,
#cosesion-directory-tree-id li.item .rr-1 > .m > .fa-solid.fa-folder,
#cosesion-directory-tree-id li.item .rr-2 > .m > .fa-solid.fa-folder,
#cosesion-directory-tree-id li.item .rr-3 > .m > .fa-solid.fa-folder {
    font-weight: 400;
    color: var(--csn-opaque-black-white-0030);
    fill: currentColor;
} */






/* Potential */
/* div.tv.rm-2 div.rr-2:hover {
	background-color: var(--csn-transparent-orange-0004);
	cursor: pointer;
}
div.tv.rm-2 div.rr-2.match-h {
	background-color: var(--csn-transparent-orange-0004);
	border-style: solid;
	border-color: var(--bs-orange);
	border-width: 1px;
} */


/* Low risk */
/* div.tv.rm-3 div.rr-3:hover {
	background-color: var(--csn-transparent-yellow-0004);
	cursor: pointer;
}
div.tv.rm-3 div.rr-3.match-h {
	background-color: var(--csn-transparent-yellow-0004);
	border-style: solid;
	border-color: var(--bs-yellow);
	border-width: 1px;
} */


/* AI */
/* div.tv.rm-ai div.rr-2:hover {
	background-color: var(--csn-transparent-blue-0004);
	cursor: pointer;
}
div.tv.rm-ai div.rr-2.match-h {
	background-color: var(--csn-transparent-blue-0004);
	border-style: solid;
	border-color: var(--bs-blue);
	border-width: 1px;
} */



.r2tree.item {
    list-style: none;
}
div.tv.rm-ai .fa.fa-plus.match-i:hover {
}
div.tv.rm-ai .fa.fa-plus.match-i:hover:before {
    color: #037403;
    font-size: 12px;
    border: 1px solid green;
    padding: 3px;
    border-radius:3px;
    margin-right:-3px;
}
div.tv.rm-ai .fa.fa-plus.match-i {
    margin-right: 3px;
    padding: 1px 3px 1px 3px;
}
div.tv.rm-ai .fa.fa-plus.match-i:before {
    color: #333bb7;
    font-size: 12px;
}

div.csn-file-folder-icon-name-wrapper > i.match-rl {
    color: #f5f5f5;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 10px;
    font-weight:400;
    float: right;
    margin-right: 5px;
    opacity:1 !important
}
div.csn-file-folder-icon-name-wrapper > i.rl-1.match-rl {
    background-color: #9a0000;
}
div.csn-file-folder-icon-name-wrapper > i.rl-2.match-rl {
    background-color: #ff6a00
}
div.csn-file-folder-icon-name-wrapper > i.rl-3.match-rl {
    background-color: #ffe100;
}

i.fa.fa-circle.match-rl {
    font-size: 9px;
    padding: 0px 6px 2px 0px;
    position: relative;
    top: -4px;
}
div.tv.rm-1 .fa.fa-circle.match-i,
div.tv.rm-2 .fa.fa-circle.match-i,
div.tv.rm-3 .fa.fa-circle.match-i,
div.tv.rm-ai .fa.fa-circle.match-i,
div.tv.rm-ai .fa.fa-plus.match-i {
    font-size: 9px;
    position: relative;
    top: 3px;
}


div.tv.rm-1 .fa-solid.fa-file,
div.tv.rm-2 .fa-solid.fa-file,
div.tv.rm-3 .fa-solid.fa-file,
div.tv.rm-ai .fa-solid.fa-file {
	/* visibility: hidden; */
}

div.ml-l, div.ml-r {
    float: left;
    border: 2px solid gray;
    border-radius: 10px;
    padding: 50px;
    margin: 50px;
    width: 40%;
    min-height:300px;
   
}
div.ml-r {
    width:40%
}


div.topnav.nav-tabs {
    border-bottom: 2px solid #454545;
}

div.topnav.nav-tabs .nav-link.active{
    border-top-width: 2px;
    border-color: #545454;
    border-bottom-width: 0;
    margin-bottom: -2px;
    border-left-width: 2px;
    border-right-width: 2px;
}

span.nav-ai-icon {
    position: relative;
    left: 0px;
    margin-left: 5px;
    color: var(--bs-primary) !important;
}
.jt-l, .jt-m, .jt-r {
    float: left;
    width: 34%;
}
.jt-r{
    width:30%;
}
.jt-r button{
    margin:10px;
}
    .mr-5 {
        margin-right: 5px;
    }

i.ok-check {
    padding: 0px 10px;
    font-size: 20px;
    color: var(--bs-success);
    font-weight: bolder;
}

i.sf.csn-folder-icon{
    cursor:pointer;
}

ul.sf.csn-tree-child {
    display: none;
}
ul.sf.csn-tree-child.open {
        display: block;
    }
.csn-tree-file-name-text{
    padding-left:5px;
    cursor:pointer;
}
.sf.csn-file-folder-icon-name-wrapper .sf.csn-tree-file-name-text {
    color: #909090
}
.bold6h.sf.csn-file-folder-icon-name-wrapper .sf.csn-tree-file-name-text {
    color: #525050
}
.bold6h.sf.csn-file-folder-icon-name-wrapper .sf.csn-tree-file-name-text:hover {
    background-color: aliceblue;
    cursor: pointer;
}
.sf.csn-file-folder-icon-name-wrapper.bold6h.node-active{
    font-weight: 600;
}
.new-fs-tree-sub-item > i.fs-remove-node{
    cursor : pointer;
}