
body {
	font-style: normal;
}
/* */
.form-check-input:checked {
	/*
	background-color: var(--bs-gray-500) !important;
	border-color: var(--bs-gray-600) !important;
	*/
}

.form-check-input {
	/* background-color: var(--bs-gray-400) !important; 
	border-color: var(--bs-gray-400) !important;*/
}


/*
Brand purple in hsl:
hsl(286,100%,70%)

and in hsla:
background-color: hsla(286,100%,70%,1) !important;


//////////


Brand blue:
background-color: hsl(250, 86%, 54%);

background-color: hsla(250, 86%, 54%, 1);



*/



/* Cosesion Main Header Bar: START */


#cosesion-main-header-bar-id {}


	#cosesion-main-header-bar-id li.active {
		/*background-color: rgba(0,0,0,.04);
		border-radius: 6px;
		*/
	}

	#cosesion-main-header-bar-id li.active > .issue-risk-label {
		/*background-color: rgba(0,0,0,.04);
		border-radius: 6px;
		*/
	}


	

	#welcome-screen-option-box__issues .critical .issue-count-by-risk {

		border-radius: 4px;
		padding-left: 0.333rem !important;
		padding-right: 0.333rem !important;

		padding-top: 0.111rem;
		padding-bottom: 0.111rem;

		font-size: 15px;

		color: #ffffff;
		background-color: var(--bs-red);

	}


	#cosesion-main-header-bar-id li.critical>a>span.issue-count-by-risk {
		
		border-radius: 4px;



		padding-left: 0.333rem !important;
		padding-right: 0.333rem !important;

		padding-top: 0.111rem;
		padding-bottom: 0.111rem;

		font-size: 15px;

		
		background-color: var(--csn-transparent-black-0006);
	}





	#cosesion-main-header-bar-id li.critical.active > a > span.issue-count-by-risk {
		background-color: var(--bs-red);
		color: #ffffff;
	}



	#welcome-screen-option-box__issues .medium .issue-count-by-risk {

		border-radius: 4px;

		padding-left: 0.333rem !important;
		padding-right: 0.333rem !important;

		padding-top: 0.111rem;
		padding-bottom: 0.111rem;

		font-size: 15px;
		color: #ffffff;
		background-color: var(--bs-orange);

		


	}


	#cosesion-main-header-bar-id li.medium>a>span.issue-count-by-risk {
		
		/* background-color: var(--csn-transparent-black-0009); */
		border-radius: 4px;


		padding-left: 0.333rem !important;
		padding-right: 0.333rem !important;

		padding-top: 0.111rem;
		padding-bottom: 0.111rem;

		font-size: 15px;
		
		background-color: var(--csn-transparent-black-0006);
	}

	#cosesion-main-header-bar-id li.medium.active > a > span.issue-count-by-risk {
		background-color: var(--bs-orange);
		color: #ffffff;
	}



	#welcome-screen-option-box__issues .low_risk .issue-count-by-risk {

		border-radius: 4px;

		padding-left: 0.333rem !important;
		padding-right: 0.333rem !important;

		padding-top: 0.111rem;
		padding-bottom: 0.111rem;

		font-size: 15px;
		background-color: var(--bs-yellow);
		color: #ffffff;

		


	}



	#cosesion-main-header-bar-id li.low_risk>a>span.issue-count-by-risk {		
		border-radius: 4px;


		padding-left: 0.333rem !important;
		padding-right: 0.333rem !important;

		padding-top: 0.111rem;
		padding-bottom: 0.111rem;

		font-size: 15px;

		background-color: var(--csn-transparent-black-0006);
	}
	#cosesion-main-header-bar-id li.low_risk.active > a > span.issue-count-by-risk {
		color: #000000;
		background-color: var(--bs-yellow);
	}

	#cosesion-main-header-bar-id li.ai_topic.active > a > span.issue-count-by-risk,
	#cosesion-main-header-bar-id li.ai.active > a > span.issue-count-by-risk {
		color: #f0f0f0;
		background-color: var(--bs-primary) !important;
	}


	#cosesion-main-header-bar-id li.ai {

		
		

	}

	#welcome-screen-option-box__issues .ai .issue-count-by-risk {

		border-radius: 4px;
		padding-left: 0.333rem !important;
		padding-right: 0.333rem !important;

		padding-top: 0.111rem;
		padding-bottom: 0.111rem;

		font-size: 15px;

		color: #ffffff;
		background-color: var(--bs-primary);

		

	}

#cosesion-main-header-bar-id li.ai_topic > a > span.issue-count-by-risk,
#cosesion-main-header-bar-id li.ai > a > span.issue-count-by-risk {
	border-radius: 4px;


	padding-left: 0.333rem !important;
	padding-right: 0.333rem !important;

	padding-top: 0.111rem;
	padding-bottom: 0.111rem;

	font-size: 15px;


	background-color: var(--csn-transparent-black-0006);
}
#cosesion-main-header-bar-id li.ai_topic.active > a > span.issue-count-by-risk
#cosesion-main-header-bar-id li.ai.active > a > span.issue-count-by-risk {
	background-color: var(--bs-primary);
}





	#welcome-screen-option-box__issues .all .issue-count-by-risk,
	#cosesion-main-header-bar-id li.all>a>span.issue-count-by-risk {

		border-radius: 4px;
		padding-left: 0.333rem !important;
		padding-right: 0.333rem !important;

		padding-top: 0.111rem;
		padding-bottom: 0.111rem;

		font-size: 15px;

		font-weight: 600 !important;
		background-color: var(--csn-transparent-black-0006);
		
	}

	


	#welcome-screen-option-box__issues #issues-detected-label-id + .all {
		display: none;
    		/* width: fit-content; */
	}


	#welcome-screen-option-box__issues .all .issue-count-by-risk {
		display: none;
    		/* width: fit-content; */
	}


		/* */

		#cosesion-main-header-bar-id li > a {

			border-width: 1px;
			border-style: solid;
			border-color: transparent;
			border-radius: 0.25rem;
			padding-top: 5px;
			padding-bottom: 5px;
			padding-right: 10px;

			

		}

#cosesion-main-header-bar-id li.critical.active > a,
#cosesion-main-header-bar-id li.medium.active > a,
#cosesion-main-header-bar-id li.low_risk.active > a,
#cosesion-main-header-bar-id li.ai_topic.active > a,
#cosesion-main-header-bar-id li.ai.active > a {
	border-width: 1px;
	border-style: solid;
	border-color: var(--csn-transparent-black-0020);
	border-radius: 0.25rem;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 10px;
	background-color: rgba(0,0,0,.03);
}


		#cosesion-main-header-bar-id li.critical.active > a > span.issue-risk-label {
			/* color: var(--bs-red) !important; */
			font-weight: 400;
			/* border-bottom-width: 1px;
			border-bottom-style: solid;
			border-bottom-color: var(--bs-red); */
		}

		#cosesion-main-header-bar-id li.medium.active > a > span.issue-risk-label {
			/* color: var(--bs-orange) !important; */
			font-weight: 400;
			/* border-bottom-width: 1px;
			border-bottom-style: solid;
			border-bottom-color: var(--bs-orange); */
		}

		#cosesion-main-header-bar-id li.low_risk.active > a > span.issue-risk-label {
			/* color: var(--bs-blue) !important; */

			font-weight: 400;
			/* border-bottom-width: 1px;
			border-bottom-style: solid;
			border-bottom-color: var(--bs-yellow); */
		}

	#cosesion-main-header-bar-id li.ai_topic.active > a > span.issue-risk-label
	#cosesion-main-header-bar-id li.ai.active > a > span.issue-risk-label {
		/* color: var(--bs-blue) !important; */

		font-weight: 400;
		/* border-bottom-width: 1px;
			border-bottom-style: solid;
			border-bottom-color: var(--bs-primary); */
	}






	/*
	Chandresh's current logic goes like this: */
	
	/* <li> critical inactive/active */
	/*
	.top-nav ul > li.critical, 
	.top-nav ul > li.critical > a > span {
		
		color: #900000;

	}
	*/


	.nav-item.all.inactive {
		/*
		background-color: var(--csn-transparent-black-0006);
		border-radius: 4px;		
		*/
	}

	.nav-item.all.active a,
	.nav-item.all.inactive a,
	.nav-item.all.inactive a:hover,
	.nav-item.all.inactive:hover {
		pointer-events: none;
	}

	/* And then when it's active, it's like this: */
	
	/*
	.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;
	}
	*/
	/* 
		- When the nav item is active, the css above also take effect.
		In other words, both of these peices of css are applied when the button is clicked,
		and when it's no active, then only the top css is applied. Meaning, the text color 
		is always a color related to the severity level, but the underline 
		and everything else is only applied with the the li has the active class.

	
	*/









/* Cosesion Main Header Bar: END */



/* */


/* Tree View: START */


	/*
	<div class="tree-view" id="cosesion-directory-tree-id">
							
		<div class="tv" :class="rulesCss">
			<ul>
				<tree-item class="item" :model="insights"></tree-item>
			</ul>
		</div>

	</div>
	*/



	.tree-view {
		
	}
		.tree-view ul > li.item {
			list-style: none;
		}

	


	/* */

	#cosesion-directory-tree-id {}

	#cosesion-directory-tree-id .fa-solid.fa-folder {

		

	}

	#cosesion-directory-tree-id li {
		margin-bottom: 0.25rem !important;
		margin-top: 0.25rem !important;
	}

	#cosesion-directory-tree-id li.item .fa-solid.fa-folder,
	#cosesion-directory-tree-id li.item .fa-solid.fa-file {
		margin-right: 0.5rem;
	}


	





/* Tree View: END */



/* 

*/


/* Suggestions Pane: START */

	/* 

	<div class="suggest-view" id="cosesion-suggested-rules-pane-id">
					
		<template v-for="sg in current.suggestions" :key="sg.rule_id">
			<h3>{{sg.title}}</h3>
			<p v-for="item in sg.items" :key="index">
				{{item}}
			</p>
			<h4>Suggestions</h4>
			<div class="sg-box" v-html="sg.sg_template"></div>
			<hr />
		</template>

	</div>


*/

/* Suggestions Pane: END */


/* Checkbox fixes: START */


.form-check-input:checked {
	background-color: var(--csn-opaque-black-white-0060);
	border-color: var(--csn-opaque-black-white-0020);
}

.form-check-input {
	background-color: var(--csn-opaque-black-white-0095);
	border-color: var(--csn-opaque-black-white-0020);
}




/* Checkbox fixes: END */


#welcome-screen-option-box__issues,
#welcome-screen-option-box__start-fresh {
	background-color:var(--csn-transparent-black-0003);
	padding: 2rem;
	height: 100%;
	border-radius: 0.5rem;

	border-width: 1px;
	border-style: solid;
	border-color: transparent;
}


#welcome-screen-option-box__issues:hover,
#welcome-screen-option-box__start-fresh:hover {

	background-color:var(--csn-transparent-black-0003);

	border-width: 1px;
	border-style: solid;

	border-color: var(--bs-primary);

	cursor: pointer;

}


/* */


/* .tree-view ul > li.item > div {
	color: var(--csn-opaque-black-white-0080);
	padding-left: 2rem;
} */


.my-cursor-pointer {
	cursor: pointer;
}
.my-removed-cursor-pointer {
	cursor: default;
}
.choosable-compartment:hover {
	border-color: var(--csn-transparent-black-0040);
}
.card-header {
	background-color: var(--csn-transparent-black-0003);
}
.text-bg-light {
	background-color: var(--csn-transparent-black-0003) !important;
}
.accordion-button::after {
	background-size: 1rem;
}
.card-body {
	color: var(--csn-transparent-black-0085) !important;
}
.form-check-input:checked[type=checkbox] {
	--bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-check-input:checked[type=radio] {
	--bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23000'/%3e%3c/svg%3e");
}
.form-check-input:checked {
	background-color: var(--csn-opaque-black-white-0096);
	border-color: var(--csn-opaque-black-white-0020);
	border-width: 2px;
}


/* */

.csn-data-item-text .fa-solid.fa-folder {
	/* color: var(--csn-opaque-black-white-0030); */
	color: var(--csn-opaque-saturated-blue-010);
	padding: 0.1rem;

}


/* */

#recommended-reorganization-response li > br,
#recommended-reorganization-response li + br,
#recommended-reorganization-response ul > br {
	display: none;
}

#recommended-reorganization-response ul {
	list-style: none;
}

#recommended-reorganization-response .rrr-folder {
	/* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-size: 16px; */
}


#recommended-reorganization-response .rrr-file:before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-label='File' color='%23b3b3b3' fill='currentcolor' aria-hidden='true' height='16' viewBox='0 0 16 16' version='1.1' width='16' data-view-component='true'%3E%3Cpath 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'%3E%3C/path%3E%3C/svg%3E");
	background-repeat: no-repeat;
	position: relative;
	left: -12px;
	top: 1px;
}


#recommended-reorganization-response .rrr-folder:before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1em' color='%235533ff' fill='currentcolor' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	position: relative;
	left: -12px;
	top: 1px;
}

/* 
url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")

*/


/* 

File icon:
<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>

url('data:image/svg+xml,<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>')


background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-label='File' aria-hidden='true' height='16' viewBox='0 0 16 16' version='1.1' width='16' data-view-component='true'%3E%3Cpath 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'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat no-repeat;
background-position: center center;
background-size: cover;
*/


/* 
Folder icon:


#5533ff

<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z"/></svg>


background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath d='M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z'/%3E%3C/svg%3E");
background-repeat: no-repeat no-repeat;
background-position: center center;
background-size: cover;

*/

#cosesion-directory-dir-id .fa-solid.fa-file {
	
}

#cosesion-directory-dir-id .bold6h > span > i {

	

}


/* .csn-file-folder-icon-name-wrapper.bold6h.node-active {
	border-width: 0;
	cursor: default;
}

.csn-file-folder-icon-name-wrapper.bold6h {
	border-width: 0;
	cursor: default;
} */



/* .csn-file-folder-icon-name-wrapper.bold6h.node-active:hover {
	background-color:initial;
}

.csn-file-folder-icon-name-wrapper.bold6h:hover {
	background-color:initial;
} */


.rr-1 .fa.fa-circle {
	color: var(--csn-transparent-monza-0100);
}

.rr-2 .fa.fa-circle {
	color: var(--csn-transparent-flush-orange-0100);
}

.rr-3 .fa.fa-circle {
	color: var(--csn-transparent-supernova-0100);
}

.rm-ai .rr-2 .fa.fa-circle {
	color: var(--csn-transparent-electric-violet-0100) !important;
}


.csn-tree .rm-ai .csn-file-folder-icon-name-wrapper.node-active.rr-2 {
	border-color: var(--csn-transparent-electric-violet-0100);
	background-color: var(--csn-transparent-electric-violet-0003);
}

.csn-tree .rm-ai .csn-file-folder-icon-name-wrapper.rr-2 .csn-tree-file-name-text {
	color: var(--csn-transparent-electric-violet-0100);
}



#cosesion-main-header-bar-id .navbar-nav > li:first-of-type {
	margin-right: 1rem;
}


.new-fs-tree {
	width: fit-content;

	background-color: var(--csn-transparent-black-0002);
	border-color: var(--csn-transparent-black-0003);

	margin-top: 1rem;

	padding-right: 2rem;
	padding-bottom: 1rem;
}



.new-fs-tree * {
	list-style: none;
}