.ACTnewFileExt,
.ACTfileExt{
	margin-left: 4px;
	width: 220px !important;
}

.ACTaddRequire {
	display: inline-block;
	align-items: center;
	vertical-align: middle;
}

.ACTaddRequire input[type="checkbox"] {
	vertical-align: middle;
}

.ACTcurrentFileName{
   background-color: #f5f5f5 !important;
}

.ACTnameInput {
   cursor: text !important;
   height: 100% !important;
   padding: 2px 4px !important;
}

.ACTbuttonWarning {
   background-color: var(--red);
   color: var(--white);
}

.ACTbuttonWarning:hover {
	background-color: var(--red-dark);
	transition: 70ms ease-in;
}

.ACTbuttonWarning:active {
	background-color: var(--red-darker);
}

.ACTuploadFile {
	position: absolute;
	z-index: -1;
	top: 4px;
	left: 16px;
	font-size: 12px;
	padding-top: 0 !important;
	color: var(--grey-600);
	font-family: var(--font-sans);
	visibility: hidden;
}

.ACTuploadFileFeedback {
	color: var(--grey-600);
	margin-top: 5px;
	margin-left: 12px;
	font-size: 11px;
}

.ACTtab {
	overflow: hidden;
	border: 1px solid var(--grey-300);
	border-top: none;
	background-color: var(--grey-200);
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
}
 
.ACTtabLink {
	background-color: var(--grey-200);
	float: left;
	border-right: 1px solid var(--grey-300);
	outline: none;
	cursor: pointer;
	padding: 6px 32px;
}
 
.ACTtabLink:hover {
	background-color: var(--grey-300);
}

.ACTselectedTab {
	background-color: white;
 }
 
 .ACTnewFileContent,
 .ACTuploadContent {
	padding: 24px 4px 12px;
}
.ACTdeleteDirMargin{
	margin-top: -8px
}
.ACTbreak {
	word-wrap: break-word;
}
.ACTerror{
	color: red;
}
.ACTmodalReplaceFile {
   background-color: var(--red) !important;
   color: var(--white) !important;
}

.ACTmodalReplaceFile:hover {
	background-color: var(--red-dark) !important;
	transition: 70ms ease-in !important;
}

.ACTmodalReplaceFile:active {
	background-color: var(--red-darker) !important;
}
.ACTfileInfo a{
	color: var(--blue);
	text-decoration: none;
	padding-left: 2px;
	padding-right: 2px;
}
.ACTfileInfo a:hover{
	text-decoration: underline;
}
.ACTbuttons,
.ACTdeleteButtons{
	justify-content: end;
}
.ACThide{
	display: none;
}

.ADCgridRow{
   display: grid;
	grid-template-columns: 150px auto;
}
.ADCbuttons{
   display: grid;
	grid-template-columns: auto auto;
	justify-content: end;
	margin-top: 32px;
	margin-right: 0;
	margin-left: auto;
}
.ANNblock {
   background-color: var(--grey-100);
   color: var(--grey-700);
   box-shadow: 0 1px 0px 0 rgba(0,0,0,0.1);
   border-radius: 2px;
   border: 1px solid var(--grey-300);
   padding-top: 0px;
   padding-bottom: 0px;
   padding-left: 4px;
   padding-right: 4px;
   clear : left;
   z-index: 3;
}
.ANNblock pre.ANNhighlight{
   background-color: #dcebf5;
}
.ANNblock pre{
   margin-top: 0px;
   margin-bottom: 0px;
}
.ANNblock > .NIScontrolBlock.annav{
   position: absolute;
   border-bottom: none;
   top: -13px;
   height: 13px;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   /* border-bottom-right-radius: 0px; */
   /* border-bottom-right-radius: 0px; */
}
.ANNloopBlock{
   position: absolute;
   margin-top: -1px;
   margin-left: 20px;
   padding-left: 0.5em;
   padding-right: 0.5em;
   border: 1px solid var(--grey-300);
   background-color: inherit;
   border-radius: 2px;
	box-shadow: 0 1px 0px 0 rgba(0,0,0,0.1);
	min-width: 96px;
}
rect.ANNblock{
   fill: #f3f3f3;
   stroke: #cccccc; 
}
div.ANNpopup{
   position: relative;
   min-height: 60px;
}
/* Override jQuery UI dialog font size */
div.ANNouterPopup, div.ANNouterDockPopup{
   font-size: 12px;
}
div.ANNouterPopup .ui-dialog-title{
   position: relative;
   z-index: 1; /* so it appears in front of the highlight_title div (see below) */
}
div.ANNouterPopup div.highlight_title{
   position: absolute;
   top: 0px;
   bottom: 0px;
   left: 0px;
   right: 0px;
   background-color: #A0CFEC;
   border-radius: 6px;
}
.ANNhighline{
   background-color: #D5E9FF;
}
div.ANNpopup div.string_slider{
   background-color: #fafbfc;
}
div.ANNpopup div.string_slider a.slide_arrow:hover{
   background-color: #f1f2f3;
}
/* Error Stack Trace styles */
.TRANSshowStackTrace, .TRANSshowStackTrace:visited{
   padding-left: 8px;
   text-decoration: none;
   color: #15317E;
   cursor: pointer;
}
.TRANSshowStackTrace:hover{
   color: #6698FF;
}
table.ANNest{
   color: #666;
   font: inherit;
   border-spacing: 0px;
   padding-top: 2px;
   width: 100%;
}
table.ANNest tr td{
   padding-left: 10px;
}
table.ANNest tr:nth-child(even){
   background-color: #E3E3E3;
}
table.ANNest tr:nth-child(odd){
   background-color: #EEEEEE;
}
div.ANNest_none{
   white-space: normal;
   padding-left: 5px;
   padding-top: 10px;
}
/* Raise emptyNodeDropdown by 6px to in popups to align it with the bottom
of the title bar. */
.ANNpopup div.emptyNodeDropdown{
   top: 0px;
}
.ANNnodeTreeValue{
   background-repeat: no-repeat;
   background-position: center left;
   padding-left: 20px;
   padding-top: 1px;
   padding-bottom: 1px;
   color: #276DC6;
   cursor: pointer;
   text-decoration: none;
}
.ANNnodeTreeValue:hover{
   color: #2590CD;
}
/*.ANNnodeTreeValue.waiting{*/
/*   background-image: url(images/spinner.gif);*/
/*}*/

.ANNcontrolCharColor{
   color:orangered;
}

.BLKmodal{
   display: grid;
   grid-template-rows: auto auto auto 1fr;
   grid-template-columns: 420px 1fr;
   height: calc(100% - 64px);
   background-color: var(--grey-100);
}
.BLKlogs{
   display: grid;
   grid-template-rows: 1fr;
}
.BLKborder{
   border: 1px solid var(--grey-300);
}
.BLKmiddle{
   border-radius: var(--border-radius);
   margin: 32px;
}
.BLKmodelContent{
   height: 100%;
}
.BLKbulkResubmitPop{
   height: 100%;
   padding: 0px !important;
}
.BLKmiddle {
   overflow-y: scroll;
}
.BLKbuttons{
   justify-content: flex-end;
   margin-top: 18px;
}
.BLKcount{
   height: 16px;
}
.BLKleft{
   grid-row: 1 / 5;
   padding: 32px;
   background-color: var(--white);
   height: calc(100% - 64px);
   border-right: 1px solid var(--grey-300);
   display: grid;
   grid-template-rows: auto auto auto auto 1fr auto auto auto;
}
.BLKmodal .LOGcellPreview{
   max-height: 62px;
}
.BLKmodal .LOGlogEntry:nth-child(odd){
   background-color: var(--white);
}
.BLKmodal .LOGlogEntry:nth-child(even){
   background-color: var(--grey-200);
}
.BLKmodal .LOGlogEntry{
   cursor: unset !important;
}
.BLKcount,
.BLKtitle{
   font-family: var(--font-buttons);
   color: var(--grey-500);
   font-weight: 500;
   font-size: 11px;
   letter-spacing: 0.05em;
}
.BLKtitle{
   margin-bottom: 12px;
   margin-top: 8px;
}
.BLKaction,
.BLKcomponent,
.BLKcount,
.BLKcriteria{
   border: 1px solid var(--grey-300);
   border-radius: var(--border-radius);
   padding: 24px;
   margin-bottom: 24px;
   background-color: var(--grey-100);
   color: var(--grey-600);
   padding-top: 16px;
   padding-bottom: 16px;
}
.BLKcriteria li{
   line-height: 2;
}
.BLKmodal .LOGlogEntry:hover{
   background-color: var(--grey-100) !important;
}
.BLKcomponent{
   padding: 24px;
   padding-top: 16px;
   margin-bottom: 16px;
}
.BLKconfirmText{
   font-size: 12px;
   color: var(--grey-500);
   font-weight: 500;
   margin-bottom: 14px;
   margin-left: 4px;
}
.BLKtargetGrid{
   display: grid;
   grid-template-columns: auto 1fr;
   column-gap: 12px;
}
.BLKellipsis{
   font-size: 14px;
   color: var(--grey-500);
   font-weight: 500;
   margin-bottom: 12px;
   margin-top: 4px;
   margin-left: 4px;
   text-align: center;
}
.BLKfeedback{
   height: 16px;
   padding-left: 4px;
}
.BLKerror{
   color: var(--red);
}
.BLKsuccess{
   color: var(--green);
}

/* .BUTTONaction is a green button for like Save or Edit */
/* BUTTONcancel is a grey button for like Cancel */

.BUTTONaction,
.BUTTONcancel,
.BUTTONdefault,
.BUTTONdisabled {
	font-family: var(--font-buttons);
	font-weight: var(--semibold);
	font-size: 10px;
	line-height: 10px;
	letter-spacing: 0.25px;
	border-radius: var(--border-radius);
	border: none;
	cursor: pointer;
	transition: 250ms ease-out;
	/* Means that the hover style goes away a little slower */
}

.BUTTONaction {
	background-color: var(--green);
	color: var(--white);
}

.BUTTONaction:hover {
	background-color: var(--green-hover);
	transition: 70ms ease-in;
	/* Means that the hover style comes in a gradual way */
}

.BUTTONaction:active {
	background-color: var(--green-active);
}

.BUTTONcancel,
.BUTTONdefault {
	background-color: var(--grey-200);
	color: var(--grey-600);
}

.BUTTONcancel:hover,
.BUTTONdefault:hover {
	background-color: var(--grey-300);
	transition: 70ms ease-in;
	/* Means that the hover style comes in a gradual way */
}

/*  When the mouse button is depressed */
.BUTTONcancel:active,
.BUTTONdefault:active {
	background-color: var(--grey-400);
}

/* BUTTONwarning is used in conjunction with a grey button, but turns it red on hover and when pressed */
/* Useful for buttons with actions that are destructive in nature */
.BUTTONwarning:hover {
	color: var(--red);
	background-color: var(--red-lighter);
	transition: 70ms ease-in;
	/* Means that the hover style comes in a gradual way */
	cursor: pointer;
}

/*  When the mouse button is depressed */
.BUTTONwarning:active {
	color: var(--red-dark);
	background-color: var(--red-light);
}

.BUTTONdisabled {
	background-color: var(--grey-200) !important;
	color: var(--grey-300) !important;
	cursor: not-allowed !important;
}

.BUTTONstandard {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 28px;
	width: fit-content;
	padding: 0px 12px;
	box-sizing: border-box;
	text-decoration: none;
	user-select: none;
}

/* Group multiple buttons in a div.BUTTONgroup to add spacing between buttons */
.BUTTONgroup {
	display: flex;
	user-select: none;
}

.BUTTONgroup .BUTTONstandard {
	margin-right: 8px;
}

.BUTTONgroup .BUTTONstandard:last-child {
	margin-right: 0px;
}


.CARDswitchAndTitle {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 16px;
}
.CARDswitchTarget {
	display: inline-flex;
	align-items: center;
}
.CARDdescriptionTarget {
	padding: 8px 16px;
	padding-top: 8px;
	margin-bottom: 8px;
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 8px;
}
.CARDcurrentActions,
.CARDlabelActions,
.CARDnameActions {
	margin-left: 8px;
}
.CARDgitEditButtonStyle {
	margin-top: -4px;
	margin-bottom: -4px;
}
.CARDeditBtn {
	cursor: pointer;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--border-radius);
}
.CARDeditBtn:hover:not(.CARDdisableLink) {
	background: var(--grey-300);
}
.CARDeditBtn img {
	width: 12px;
}
.CARDnameBlockEdit{
	display: flex;
	padding: 18px 0px;
}
.CARDnameBlock {
	display: grid;
	grid-template-columns: auto 1fr auto;
	padding: 18px 0px;
}
.CARDeditName{
	padding-top: 6px;
	margin-left: 10px;
}
.CARDname {
	color: var(--blue);
	font-size: 14px;
	font-weight: 600;
	word-break: break-all;
	height: 24px;
	padding-top: 6px;
}
.CARDnameSpacing {
	padding-bottom: 15px;
}
.CARDhidden{
	display: none !important;
}
.CARDvisHidden{
	visibility: hidden !important;
}
.CARDnotificationTarget {
	/* margin-top: -18px; */
	color: var(--grey-600);
	border: solid 1px var(--grey-200);
	border-radius: var(--border-radius);
	padding: 12px;
}
.CARDnotificationTarget a{
	color: var(--blue);
	text-decoration: none;
}
.CARDnotificationTarget a:hover{
	text-decoration: underline;
}
.CARDaddTags:hover,
.CARDaddDescription:hover{
	color: var(--blue);
	text-decoration: underline;
}
.CARDaddTags,
.CARDaddDescription {
	cursor: pointer;
}
.CARDdescriptionEditInput {
	height: 8em !important;
	resize: none;
}
/* Card Editable Fields section */
.CARDtableContainer {
	background: var(--grey-200);
	border-radius: var(--border-radius);
	padding: 16px;
	line-height: initial;
	border: 1px solid var(--grey-300);
}
.CARDfieldTarget {
	margin-top: 12px;
	padding-top: 16px;
	padding-bottom: 4px;
	border-top: 1px solid var(--grey-300);
	max-height: 200px;
	overflow-y: auto;
	height: 100%;
}
.CARDtableContainer>div:first-child {
	padding-top: 0px;
	border-top: none;
}
.CARDtableContainer>div:last-child {
	padding-bottom: 0px;
}
.CARDrepoRow,
.CARDgitRow {
	display: grid;
	grid-template-columns: 158px 1.0fr auto auto;
  	margin-top: 12px;
  	margin-bottom: 12px;
}
.CARDrepoRow{
	margin-top: 24px;
}
.CARDcommitRow{
	display: grid;
	grid-template-columns: 158px 1.0fr;
  	margin-top: 10px;
}
.CARDcurrentCommitIdDiv,
.CARDqueueCountValue,
.CARDcurrentCommit,
.CARDnoRepo,
.CARDerrorCountValue {
	color: var(--grey-600);
}
.CARDcurrentCommit {
	word-break: break-word;
}
.CARDpermissableAction{
	cursor: pointer;
}
.CARDeditConnection,
.CARDaction,
.CARDremoveUpstream,
.CARDseeInCollection,
.CARDaddToCollection,
.CARDeditUpstream,
.CARDpermissableAction,
.CARDcurrentRealCommitIdDiv,
a.CARDcurrentRepo {
	color: var(--blue);
	text-decoration: none;
	word-break: break-all;
}
.CARDcurrentRepo{
	color: var(--grey-600);
}
.CARDcurrentCommitDescription{
	display: -webkit-box; /* For iOS, Safari, and older versions of Chrome */
	display: -moz-box; /* For older versions of Firefox */
	display: box; /* Standard syntax */
	-webkit-box-orient: vertical; /* Set the orientation to vertical */
	-moz-box-orient: vertical;
	box-orient: vertical;
	-webkit-line-clamp: 2; /* Show only two lines of text */
	line-clamp: 2;
	max-height: 4em; /* Set the height for two lines of text */
	overflow: hidden; /* Hide any overflowing content */
	text-overflow: ellipsis;
	padding-bottom: 4px;

}
.CARDcurrentRepo{
	padding-right: 12px;
}
.CARDviewCurrentCommit{
	text-decoration: none;
	padding-right: 2px;
	padding-left: 2px;
}
.CARDeditConnection:hover,
.CARDaction:hover,
.CARDcurrentRealCommitIdDiv:hover,
.CARDremoveUpstream:hover,
.CARDseeInCollection:hover,
.CARDaddToCollection:hover,
.CARDeditUpstream:hover,
a.CARDcurrentRepo:hover {
	color: var(--blue);
	text-decoration: underline;
	cursor: pointer;
}
.CARDtags{
	color: var(--grey-600);
}
.CARDdescription {
	overflow-wrap: break-word;
	color: var(--grey-600);
	white-space: pre-wrap;
	line-height: 1.75;
	max-height: 100px;
	overflow-y: auto;
}
.CARDqueuePosition{
	display: inline;
   background: var(--white);
   box-shadow: 0 1px 2px rgb(0 0 0 / 38%);
   padding: 1px 6px;
   border-radius: 9999px;
   font-weight: 600;
	color: var(--grey-600) !important;
	margin-right: 4px;
}

.CARDlastActivityValue {
	display: grid;
	grid-template-columns: max-content auto;
}

.CARDlastActivityValue,
.CARDqueuePosition,
.CARDgitTerm {
	cursor: pointer;
	color: var(--blue);
}
.CARDstatusRow {
	display: grid;
	grid-template-columns: 150px auto;
	row-gap: 12px;
	column-gap: 8px;
	padding-bottom: 16px;
}
.CARDstatusClearQueue,
.CARDstatusClearError,
.CARDstatusRepositionQueue {
	cursor: pointer;
	text-align: left;
	display: inline-flex;
	align-items: center;
	justify-content: left;
	color: var(--grey-600);
}
.CARDstatusClearError{
	margin-left: 6px;
}
.CARDstatusClearQueue{
	margin-left: 2px;
}
.CARDerrorOffset {
	margin-left: 3px;
}

.CARDclearFont {
	color: var(--blue);
	padding-left: 2px;
	padding-right: 2px;
}
.CARDlastActivityTimestamp:hover,
.CARDclearFont:hover {
	text-decoration: underline;
}
.CARDdetailedCard {
	width: 100%;
}
.CARDdetailedCardId .POPpopoutCard-content{
	padding-top: 12px;
}
.CARDdetailedCardId .POPpopoutCard-header {
	height: auto;
}
.CARDdetailedCardId .POPpopoutCard-header {
	height: auto;
	gap: 24px;
}
.CARDdetailedCardId .POPpopoutCard-header .POPpopoutCard-title {
	flex-grow: 1;
}
.CARDdetailedCardId.POPpopoutCard-wrapper {
	width: 70%;
	max-width: 800px;
	min-width: 400px;
	max-height: 100%;
	overflow: auto;
	position: unset;
	top: unset;
	left: unset;
	transform: unset;
}
.CARDqueueCountValue,
.CARDerrorCountValue {
	display: inline;
}
.CARDerrorCount {
	display: inline;
	cursor: pointer;
	background: var(--white);
	box-shadow: 0 1px 2px rgb(0 0 0 / 50%);
	padding: 1px 6px;
	border-radius: 9999px;
	font-weight: 600;
	margin-right: 4px;
}
.CARDerrorDisplayRed{
	color: var(--red);
}
.CARDerrorDisplayGrey{
	color: var(--grey-600);
}

.CARDlastActivityWrap > div {
	white-space: pre-wrap;
	max-width: 500px;
	max-height: 100px;
	overflow-y: auto;
}

.CARDlastErrorTooltip > div {
	white-space: pre-wrap;
}

.CARDqueueCount {
	display: inline;
	cursor: pointer;
	background: var(--white);
	box-shadow: 0 1px 2px rgb(0 0 0 / 50%);
	padding: 1px 6px;
	border-radius: 9999px;
	color: var(--grey-600);
	font-weight: 600;
}
.CARDpermissionDiv,
.CARDbottomRow {
	margin-top: 16px;
}
.CARDcomponentIDlabel {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: grey;
	font-size: 11px;
}
.CARDcomponentIDcopy {
	margin-left: 8px;
	cursor: pointer;
	display: flex;
	align-items: center;
}
.CARDcomponentIDcopy img {
	width: 14px;
	height: 14px;
}
.CARDviewDetails::before{
	content: url("/CARD/CARDopen.svg");
	padding-right: 12px;
}
.CARDclosedFolder .CARDviewDetails::before{
	content: url("/CARD/CARDclosed.svg");
	padding-right: 12px;
}
.CARDcancelInplace,
.CARDsaveInplace,
.CARDsaveName,
.CARDcancelName,
.CARDsaveDescription,
.CARDcancelLabel,
.CARDsaveCurrentCommit,
.CARDcancelCurrentCommit,
.CARDsaveGit,
.CARDcancelGit {
	height: 24px;
	width: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.CARDbuttonDone,
.CARDbuttonDelete{
	display: none;
}
.CARDviewDetails {
	display: flex;
	align-items: center;
	justify-content: center;
  	text-align: center;
  	font-family: var(--font-buttons);
	color: var(--grey-500);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.1em;
	padding-right: 24px;
	padding: 16px 0px;
	border-top: 1px solid var(--grey-300);
}
.CARDviewDetails:hover {
  background-color: #ccc;
  cursor: pointer;
}
.CARDdetails {
  overflow: hidden;
  border-top: 1px solid var(--grey-300);
  padding-top: 4px;
  margin-top: 12px;
}
.CARDclosedFolder .CARDdetails{
	display: none;
}
.CARDcurrentCommitIdDevelopment,
.CARDloadingCommit{
	color: var(--grey-600);
	word-break: break-all;
}
.CARDcurrentRunningCommit{
	height: 28px;
	word-break: break-all;
}
.CARDcommitTime,
.CARDcommitAuthor,
.CARDcommitDescription{
	word-break: break-word;
	color: var(--grey-600);
	padding-right: 24px;
}
.CARDeditConRight{
	margin-left: 12px;
}
.CARDeditConLeft,
.CARDeditConRight,
.CARDmakeCopyBracketsEnd,
.CARDmakeCopyBrackets,
.CARDpreAction,
.CARDpostAction{
	word-break: break-word;
	color: var(--grey-600);
	padding-right: 4px;
}
.CARDpermission{
	word-break: break-word;
	color: var(--grey-600);
}
.CARDeditConLeft,
.CARDmakeCopyBracketsEnd,
.CARDpostAction{
	padding-left: 4px;
}
.CARDpermissionDiv{
	display: grid;
	grid-template-columns: 158px auto auto 1fr;
	padding-bottom: 12px;
}
.CARDgitBlock{
	padding-bottom: 16px;
	border-bottom: 1px solid var(--grey-300);
	border-top: 1px solid var(--grey-300);
}
.CARDpermissableAction{
	display: grid;
	grid-template-columns: auto auto auto auto;
}
.CARDcopyAction{
	display: grid;
	grid-template-columns: auto auto auto;
}
.CARDinjectTarget{
	margin-top: 4px;
	padding-top: 16px;
	padding-bottom: 4px;
	padding-left: 8px;
	border-top: 1px solid var(--grey-300);
	max-height: 200px;
	overflow-y: auto;
}
.CARDcustomFieldsErrorRow{
	display: grid;
	grid-template-columns: 92px 32px auto auto;
}
.CARDcurrentRepoGrid{
	display: grid;
	grid-template-columns: auto auto auto 4px 24px auto auto auto 1fr;
}
.CARDcurrentCommitDevelopmentGrid{
	display: grid;
	grid-template-columns: auto 18px 64px 4px 1fr;
}
.CARDcurrentCommitGrid{
	/* display: grid; */
	/* grid-template-columns: auto; */
	margin-right: 12px;
}
.CARDcurrentNoRepoGrid{
	display: grid;
	grid-template-columns: auto auto 18px 38px 4px 1fr;
}
.CARDcurrentTemplateGrid{
	display: grid;
	grid-template-columns: auto auto auto 4px 1fr;
}
.CARDnoRepoGrid{
	display: grid;
	grid-template-columns: auto 8px 20px 4px 1fr;
}
.CARDcurrentCommitIdDiv,
.CARDnoRepo{
	padding-right: 4px;
}
.CARDcurrentCommitIdDiv{
	line-height: 22px;
}
.CARDtemplateRemoveButtons {
	justify-content: flex-end; /* Change to flex-end for right alignment */
	margin-top: 32px;
	margin-right: 0;
	margin-left: auto;
}

.CARDnoRepoWarning{
	color: var(--red);
	text-decoration: none;
	word-break: break-all;
	padding-right: 2px;
}
.CARDorDiv{
	text-align: center;
	margin-left: 4px;
	color: var(--grey-600);
}

.CARDifwVerified::after {
	content: url("/CARD/CARDoutlineBlue.svg");
	margin-left: 8px;
}
.CARDverified::after {
	content: url("/CARD/CARDoutlineGrey.svg");
	margin-left: 8px;
	color: var(--grey-600);
}

.CARDcustomizeFeedback {
	color: red;
}
.CARDrefreshSpinner{
	animation: CARDspin 1s linear infinite;
}
.CARDloading-spinner {
	border: 4px solid rgba(0, 0, 0, 0.1);
	border-top: 4px solid #3498db;
	border-radius: 50%;
	width: 15px;
	height: 15px;
	animation: CARDspin 1s linear infinite;
	margin-left: 10px;
	margin: 18px;
}

@keyframes CARDspin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
.CARDnewCommitExists::before {
   content: '• ';
	color: red;
	font-size: 12px;
	font-weight: var(--extra-bold);
	padding-right: 4px;
}
.CARDunsecureTags::after{
   content: '• No matching role tags (no permissions applied)';
	color: red;
	font-size: 12px;
	/* font-weight: var(--extra-bold); */
	padding-right: 4px;
	padding-left: 6px;
}

.CARDswitchTarget .TOGstatus{
	height: 16px;
	width: 16px;
}
.CARDdisableLink,
.CARDdisableLink *{
	cursor: not-allowed !important;
	color: grey !important;
	text-decoration: unset !important;
}
.CARDdisable,
.CARDdisable *{
	cursor: not-allowed !important;
	color: grey !important;
	text-decoration: unset !important;
}
.CARDtagRow{
	display: grid;
	grid-template-columns: 150px 1fr;
	column-gap: 8px;
	margin-bottom: 8px;
	padding-left: 4px;
}
.CARDdetails .FORMlabel,
.CARDfieldTarget .FORMlabel,
.CARDstatusRow .FORMlabel{
	padding-left: 4px;
}
.CARDtagRowInner{
	display: grid;
	grid-template-columns: 1fr auto auto;
	column-gap: 8px;
}
.CARDtagRowInnerEdit{
	display: grid;
	grid-template-columns: 1fr auto auto;
	column-gap: 8px;
}
.CARDtagEditInputError{
	color: red;
}
.CARDtagClickable:hover{
	text-decoration: underline;
	cursor: pointer;
}
.CARDtagClickable{
	font-weight: 900 !important;
}
.CARDtagMoreInfo{
	height: 20px;
	font-size: larger;
}
.CARDrunFromComponentMoreInfo:hover,
.CARDtagMoreInfo:hover{
	color: var(--blue);
}
.CARDtagValue {
	overflow-x: auto;
	overflow-y: hidden;
	padding-top: 1px;
}
.CARDtagValue .DASHhashtag{
	font-size: 11px;
}
.CARDeditConnectionsDiv{
	display: grid;
	grid-template-columns: auto auto auto;
	padding-top: 7px;
}
.CARDvalueEdit{
	font-family: monospace !important;
}
.CARDactionPopup{
	max-width: 500px;
}
.CARDrunComponentOnDropdown{
	margin-top: 0px !important;
}
.CARDshowHideGrid{
	display: grid;
	grid-template-columns: auto auto auto 1fr;
	column-gap: 4px;
	margin-top: 4px;
	margin-left: 2px;
	color: var(--grey-600);
}
.CARDshowMore,
.CARDshowLess{
	cursor: pointer;
	color: var(--blue);

}
.CARDshowMore:hover,
.CARDshowLess:hover{
	text-decoration: underline;
}
.CARDhideShowRow{
	display: grid;
	grid-template-columns: 158px 1fr 126px;
	margin-bottom: 24px;
}
.CARDless .CARDcommitComponentInput,
.CARDless .CARDcommitInput{
	display: none;
}

.CARDless .CARDshowLess{
	display: none;
}
.CARDshowMore{
	display: none;
}
.CARDless .CARDshowMore{
	display: block;
}
.CARDrunningCommit{
	margin-bottom: 18px;
}
.CARDless .CARDcommitInputRow{
	display: none;
}
.CARDcommitComponentInput{
	margin-bottom: 8px;
}
.CARDcommitInputRowGrid{
	display: grid;
	grid-template-columns: 1fr auto;
}
.CARDcommitIdView{
	display: inline;
	margin-right: 6px;
	font-family: var(--font-monospace);
	font-size: 13px;
}
.CARDcommitMessage{
	display: inline;
	margin-top: 18px;
	font-size: 11px;
	padding-left: 4px;
	color: var(--grey-500);
}

.CARDrunFromComponentMoreInfo{
	height: 28px;
	width: 38px;
	font-size: 16px;
	margin-left: 8px;
}


.CARDtitle{
	margin: unset;
	font-weight: var(--bold);
	font-size: 20px;
	line-height: 32px;
	color: var(--grey-700);
	padding-bottom: 24px;
	margin-bottom: 0px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.CARDaddEnvVar {
	border-radius: 9999px;
	height: 40px;
	width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background-color: var(--grey-200);
	color: var(--grey-600);
	transition: 250ms ease-out;
	float: right;
	margin: 3px;
	margin-right: 30px;
}

.CARDfieldTable {
	display: grid;
	border-collapse: separate;
	box-sizing: border-box;
	text-indent: initial;
	border-spacing: 2px;
	width: 100%;
	border-radius: 4px;
	border: 1px solid var(--grey-300);
	border-bottom: 0px;
	margin-bottom: 8px;
}

.CARDfieldTable>* {
	border-bottom: 1px solid var(--grey-300);
}

.CARDfieldTableRow {
	display: grid;
	grid-template-columns: 32px 0.5fr 107px 1.5fr 32px 42px;
	background: var(--white);
	border-radius: var(--border-radius);
	box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
	margin-top: 4px;
}

.CARDaddField {
	cursor: pointer;
	color: var(--blue);
}

.CARDfieldHeading {
	font-weight: bold;
	text-align: left;
	border-left: 0px;
	border-right: 0px;
	padding: 8px 16px;
}

.CARDtableCell {
	text-align: left;
	border-left: 0px;
	border-right: 0px;
	padding: 2px;
	margin: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.CARDviewFields {
	display: grid;
	grid-template-columns: 150px 1fr auto;
	margin-bottom: 12px;
	column-gap: 8px;
}
.CARDeditFieldHeader{
	display: grid;
	grid-template-columns: 42px 0.5fr 107px 1.5fr 32px 42px;
	margin-bottom: 12px;
}

.CARDviewFields:last-child {
	margin-bottom: 0px;
}

.CARDrowName {
	/* text-align: left;
	border-left: 0px;
	border-right: 0px;
	padding: 4px;
	margin: 4px;
	display: inline-flex;
	align-items: center; */
	word-break: break-all;
}

.CARDrowType {
	text-align: left;
	border-left: 0px;
	border-right: 0px;
	padding: 4px;
	padding-left: 12px;
	margin: 4px;
	display: inline-flex;
	align-items: center;
	overflow: auto;
	color: var(--grey-600);
	font-weight: var(--light);
	font-style: italic;
	text-align: center;
}

.CARDeditValueInPlace {
	/* cursor: pointer;
	text-align: right;
	display: inline-flex;
	align-items: center;
	justify-content: right;
	color: var(--grey-600);
	margin: 4px;
	padding: 4px; */
	margin-top: -4px;
	margin-bottom: -4px;
}

.CARDeditInline {
	display: grid;
	grid-template-columns: 1fr 42px;
}

.CARDinplaceActions {
	display: flex;
	justify-content: flex-end
}

.CARDeditMode .CARDcurrentValue,
.CARDeditMode .CARDeditValueInPlace {
	display: none;
}

.CARDcurrentValue {
	/* text-align: left;
	border-left: 0px;
	border-right: 0px;
	padding: 4px;
	margin: 4px;
	display: inline-flex;
	align-items: center; */
	font-family: var(--font-monospace);
	color: var(--grey-600);
	word-break: break-all;
}
.CARDcommitInfoMsg{
	font-size: 11px;
	padding-top: 8px;
}

.CARDdeleteRow {
	z-index: 998;
	background: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.CARDaddValue {
	cursor: pointer;
	color: #2590cd;
	display: inline-flex;
	align-items: center;
}

.CARDmoveRow {
	border-radius: 4px;
	border: 1px solid var(--grey-300);
	background-color: var(--grey-200);
	color: var(--grey-600);
	margin-top: 8px;
	margin-bottom: 8px;
	margin-left: 8px;
}

.CARDhtmlBlockRow {
	display: grid;
	grid-template-columns: 0.25fr 0.9fr 80px;
	margin-top: 4px;
	margin-bottom: 4px;
}

.CARDhtmlBlockStyle {
	text-align: left;
	border-left: 0px;
	border-right: 0px;
	padding: 4px;
	margin: 4px;
	display: inline-flex;
	align-items: center;
}

.CARDsaveConfigButton {
	justify-content: right;
}

.CARDinformation {
	font-weight: var(--regular);
	font-size: 10px;
	line-height: 16px;
	color: var(--grey-600);
}

.CARDsaveFeedback {
	text-align: right;
	font-weight: var(--regular);
	font-size: 10px;
	line-height: 16px;
	color: var(--grey-600);
	margin: 8px;
	margin-top: 0px;
	color: var(--red);
}
.CARDfieldErrorLabel{
	color: var(--red);
}
.CARDinplaceFeedbackWrap,
.CARDeditFeedbackWrap {
	display: none;
	margin-top: 16px;
}

.CARDinplaceFeedback,
.CARDeditFeedback {
	display: flex;
	justify-content: flex-end
}

.CARDaddFieldRow {
	display: grid;
	grid-template-columns: auto 1.0fr;
}

.CARDeditActionsWrap {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-top: 16px;
	margin-bottom: -16px;
}

.CARDnotificationRedirect {
	display: inline;
	cursor:pointer;
	color: var(--blue-dark);
	text-decoration:underline;
}
.CARDfieldError{
	color: var(--grey-600);
	word-break: break-all;
}

.CHKcheckbox { 
   position: absolute;
   visibility: visible;
   opacity: 0; 
}
.CHKcheckbox + label {
   display: inline-block;
   font-weight: var(--regular);
   position: relative;
   padding-left: 24px;
   padding-top: 0px;
   min-height: var(--inputSize);
}
.CHKcheckbox + label:hover { 
   cursor: pointer; 
}
.CHKcheckbox + label:before{
   content:"";
   height: var(--inputSize);
   width: var(--inputSize);
   position: absolute;
   left: 0;
   top: 0;
   background-repeat: no-repeat;
}
.CHKcheckbox[disabled] + label:before { 
   opacity: 0.4; 
   cursor: not-allowed;
}
.CHKcheckbox[disabled] + label { 
   color: var(--grey-300); 
   cursor: not-allowed;
}
.CHKcheckbox:checked + label:before { 
   background: var(--checkbox-true); 
}
.CHKcheckbox + label:before { 
   background-image: var(--checkbox-false); 
}
.CLDgrid{
   display: grid;
   grid-template-columns: 1fr auto;
	gap: 14px;
}
.CLDgrid{
	font-size: 11px;
	font-family: unset;
}
.CLDgrid .RPOlink,
.CLDgrid .RPOplain,
.CLDgrid .RPOnoRepo{
	padding-top: 4px;
	padding-left: 4px;
}
.CLUSmodal{
   display: grid;
   grid-template-columns: 420px 1fr;
   height: 100%;
}
.CLUSlist{
   display: grid;
   grid-template-rows: auto 1fr auto;
   position: relative;
   border-right: 1px solid var(--grey-400);
   background-color: #ebf3f6;
   height: 100%;
}
.CLUSheader{
   height: 66px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 12px;
   padding-left: 24px;
   padding-right: 24px;
   user-select: none;
   border-bottom: 1px solid var(--grey-400);
   box-sizing: border-box;
}
.CLUStitle{
   font-family: var(--font-buttons);
   color: var(--blue-dark);
   font-size: 16px;
   font-weight: 500;
}
.CLUSmyKey,
.CLUSaddButton{
   border-radius: 9999px;
   font-family: var(--font-buttons);
   font-weight: var(--semibold);
   font-size: 10px;
   line-height: 10px;
   letter-spacing: 0.25px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 28px;
   width: fit-content;
   box-sizing: border-box;
   color: var(--white);
   transition: 250ms ease-out;
   padding: 0 14px 0px 10px;
   text-decoration: unset;
}
.CLUSdetails{
   background-color: #D2E4EC;
}
.CLUStableDiv{
   overflow: hidden;
   position: relative;
}
.CLUStable{
   display: grid;
   grid-auto-rows: auto;
   max-height: calc(100% - 16px);
   overflow-x: hidden;
   overflow-y: scroll;
   --scrollbarBG: #ebf3f6;
   --thumbBG: #d2dde8;
   scrollbar-width: thin;
   scrollbar-color: var(--thumbBG) var(--scrollbarBG);
   position: relative;
   row-gap: 1px;
}
.CLUStableHeading{
   cursor: pointer;
   background-color: #ebf3f6 !important;
   position: sticky;
   top: 0px;
   z-index: 100;
   padding-top: 4px;
   display: grid;
   grid-template-columns: minmax(24px, 28px) minmax(88px, 94px) minmax(105px, 1fr) minmax(66px, 125px) minmax(24px, 40px) minmax(24px, 40px) minmax(24px, 40px) minmax(24px, 40px) 34px;
   user-select: none;
   background: var(--white);
   column-gap: 12px;
   align-items: center;
   font-size: 11px;
   color: var(--grey-800);
   height: 32px;
}
.CLUSconnectionBad::before,
.CLUSconnection::before {
   content: '• ';
   font-size: 12px;
   font-weight: var(--extra-bold);
}
.CLUSerror,
.CLUSconnectionBad::before{
   color: red;
}
.CLUSsuccess{
   color: var(--green);
}
.CLUSerrorBox{
   display: grid;
   grid-template-columns: auto 1fr;
   column-gap: 12px;
}
.CLUSerrorBox{
   background: var(--grey-100);
   padding: 24px;
   border-radius: var(--border-radius);
   margin-bottom: 24px;
   border: 1px solid var(--grey-300);
}
.CLUSgroup{
	display: flex;
	justify-content: flex-end;
}
.CLUSheadingButtons{
	display: flex;
   flex-wrap: nowrap;
   gap: 8px;
}
.CLUSmyKey{
   background-color: var(--grey-400);
   padding: 0 14px 0px 14px;
}
.CLUSmyKey:hover{
   background-color: var(--grey-500);
   transition: 70ms ease-in;
}
.CLUSkeyField{
   height: 8em !important;
   padding: 12px !important;
   padding-top: 8px !important;
   padding-bottom: 8px !important;
   resize: none;
}
.CLUSerrorFeedback{
   color: var(--red);
}
.CLUSdetails{
   overflow: hidden;
   position: relative;
}
.CLUSinfoBox{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 540px;
   background-color: #fff;
   padding: 24px;
   padding-left: 36px;
   padding-right: 36px;
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.CLUSinfoBox h2{
   margin-top: 12px;
   text-align: center;
}
.CLUSinfoBox ul{
   margin-top: 18px;
   padding-inline-start: 28px;
   color: var(--grey-600);
}
.CLUSinfoBox li{
   line-height: 24px;
   font-size: 14px;
}
.CLUSinfoBox a{
   color: var(--blue);
   text-decoration: unset;
   cursor: pointer;
}
.CLUSinfoBox a:hover{
   text-decoration: underline;
}
.CLUSbox{
   border-radius: var(--border-radius);
	border: solid 1px var(--grey-300);
	padding: 24px;
   padding-top: 16px;
   padding-bottom: 16px;
	margin-bottom: 18px;
   background: var(--grey-100);
   text-overflow: ellipsis;
   overflow: hidden;
}
.CLUSgrid{
   display : grid;
	grid-template-columns: 1fr auto;
   row-gap: 8px;
   column-gap: 24px;
}
.CLUSmyKeyFeedback,
.CLUSerrorFeedback{
   min-height: 16px;
}
.CLUSinnerHeader {
   font-family: var(--font-buttons);
   color: var(--grey-500);
   font-weight: 500;
   font-size: 11px;
   letter-spacing: 0.05em;
}
.CLUSrestart{
   color: var(--blue);
   text-decoration: unset;
   padding-left: 2px;
   padding-right: 2px;
   cursor: pointer;
}
.CLUSrestart:hover{
   text-decoration: underline;
}
.CMTcommitHelpModalContent{
	height: 100%;
}
.CMTcommitHelpPop{
	height: 100%;
}
.CMTcommitHelpValue{
	margin-bottom: 24px;
}
.CMTcommitHelpModal{
	display: grid;
	grid-template-rows: auto 1fr auto auto;
	height: calc(100% - 125px);
}
.CMTcommitHelpHeader,
.CMTcommitHelpRow{
	display: grid;
	grid-template-columns: 120px 1fr 180px;
}
.CMTcommitHelpHeader{
	position: sticky;
	top: 0;
}
.CMTcommitHelpTable{
	border: 1px solid var(--grey-400);
	background-color: var(--grey-100);
	border-radius: var(--border-radius);
	/* overflow: hidden; */
	/* max-height: 350px; */
	overflow-y: auto;
	margin-top: 12px;
	margin-bottom: 24px;
}
.CMTcommitHelpHeading{
	padding: 8px 16px;
	min-height: 32px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}
.CMTcommitHelpHeader>div{
	border-bottom: 2px solid var(--grey-300);
	font-weight: var(--semibold);
	color: var(--grey-800);
	background-color: var(--grey-200);
}
.CMTcommitHelpRow>div {
	box-sizing: border-box;
	min-height: 40px;
	padding: 12px 16px;
	display: flex;
	border-bottom: 1px solid var(--grey-300);
	font-size: 11px;
	color: var(--grey-600);
	text-overflow: ellipsis;
	max-height: 80px;
	overflow: hidden;
	display: -webkit-box;
   -webkit-line-clamp: 4;
   -webkit-box-orient: vertical;
}
.CMThelpHeader{
	font-family: var(--font-buttons);
   color: var(--grey-500);
   font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.05em;
}
.CMTcommitHelpGrid{
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 8px;
}
.CMThelpFooter{
	justify-content: flex-end;
}
.CMTcommitHelpLabel{
	margin-bottom: 4px;
}
.CMTcommitHelpRow{
	cursor: pointer;
}
.CMTcommitHelpHash{
	color: var(--grey-800) !important;
	/* font-weight: var(--semibold); */
	font-family: var(--font-monospace);
	font-size: 12px !important;
}
.CMTcommitHelpRow:hover{
	background-color: var(--grey-200);
}
.CMTcommitHelpRow:hover .CMTcommitHelpHash{
	text-decoration: underline;
}
.CMTcommitInputValue{
	font-family: var(--font-monospace);
	font-size: 13px;
}

.CMTcomponentBox{
   display: grid;
   grid-template-columns: auto 1fr auto;
   column-gap: 24px;
   padding: 24px;
   padding-top: 0px;
   padding-bottom: 0px;
   height: 66px;
   border: 1px solid var(--grey-400);
   border-radius: var(--border-radius);
   background: var(--grey-100);
   align-items: center;
   flex-wrap: wrap;
   margin-bottom: 18px;
}
.CMTcommitHelpRunFromComponent input{
	height: 13px;
	margin-top: 6px;
	margin-bottom: 6px;
}
.CMTcommitHelpRunFromComponentBox{
	display: grid;
	grid-template-columns: 40px 1fr;
	column-gap: 8px;
   padding: 24px;
	padding-left: 12px;
   padding-top: 0px;
   padding-bottom: 0px;
   height: 48px;
   border: 1px solid var(--grey-400);
   border-radius: var(--border-radius);
   background: var(--grey-100);
   align-items: center;
   flex-wrap: wrap;
	margin-bottom: 6px;
}
.CMTupdateComponentLabel{
	color: var(--grey-600);
	font-size: 11px;
}
/* BASICS */

.CodeMirror {
  /* Set height, width, borders, and global font properties here */
  font-family: monospace;
  height: 300px;
  color: black;
  direction: ltr;
}

/* PADDING */

.CodeMirror-lines {
  padding: 4px 0; /* Vertical padding around content */
}
.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
  padding: 0 4px; /* Horizontal padding of content */
}

.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
  background-color: white; /* The little square between H and V scrollbars */
}

/* GUTTER */

.CodeMirror-gutters {
  border-right: 1px solid #ddd;
  background-color: #f7f7f7;
  white-space: nowrap;
}
.CodeMirror-linenumbers {}
.CodeMirror-linenumber {
  padding: 0 3px 0 5px;
  min-width: 20px;
  text-align: right;
  color: #999;
  white-space: nowrap;
}

.CodeMirror-guttermarker { color: black; }
.CodeMirror-guttermarker-subtle { color: #999; }

/* CURSOR */

.CodeMirror-cursor {
  border-left: 1px solid black;
  border-right: none;
  width: 0;
}
/* Shown when moving in bi-directional text */
.CodeMirror div.CodeMirror-secondarycursor {
  border-left: 1px solid silver;
}
.cm-fat-cursor .CodeMirror-cursor {
  width: auto;
  border: 0 !important;
  background: #7e7;
}
.cm-fat-cursor div.CodeMirror-cursors {
  z-index: 1;
}
.cm-fat-cursor .CodeMirror-line::selection,
.cm-fat-cursor .CodeMirror-line > span::selection, 
.cm-fat-cursor .CodeMirror-line > span > span::selection { background: transparent; }
.cm-fat-cursor .CodeMirror-line::-moz-selection,
.cm-fat-cursor .CodeMirror-line > span::-moz-selection,
.cm-fat-cursor .CodeMirror-line > span > span::-moz-selection { background: transparent; }
.cm-fat-cursor { caret-color: transparent; }
@-moz-keyframes blink {
  0% {}
  50% { background-color: transparent; }
  100% {}
}
@-webkit-keyframes blink {
  0% {}
  50% { background-color: transparent; }
  100% {}
}
@keyframes blink {
  0% {}
  50% { background-color: transparent; }
  100% {}
}

/* Can style cursor different in overwrite (non-insert) mode */
.CodeMirror-overwrite .CodeMirror-cursor {}

.cm-tab { display: inline-block; text-decoration: inherit; }

.CodeMirror-rulers {
  position: absolute;
  left: 0; right: 0; top: -50px; bottom: 0;
  overflow: hidden;
}
.CodeMirror-ruler {
  border-left: 1px solid #ccc;
  top: 0; bottom: 0;
  position: absolute;
}

/* DEFAULT THEME */

.cm-s-default .cm-header {color: blue;}
.cm-s-default .cm-quote {color: #090;}
.cm-negative {color: #d44;}
.cm-positive {color: #292;}
.cm-header, .cm-strong {font-weight: bold;}
.cm-em {font-style: italic;}
.cm-link {text-decoration: underline;}
.cm-strikethrough {text-decoration: line-through;}

.cm-s-default .cm-keyword {color: #708;}
.cm-s-default .cm-atom {color: #219;}
.cm-s-default .cm-number {color: #164;}
.cm-s-default .cm-def {color: #00f;}
.cm-s-default .cm-variable,
.cm-s-default .cm-punctuation,
.cm-s-default .cm-property,
.cm-s-default .cm-operator {}
.cm-s-default .cm-variable-2 {color: #05a;}
.cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;}
.cm-s-default .cm-comment {color: #a50;}
.cm-s-default .cm-string {color: #a11;}
.cm-s-default .cm-string-2 {color: #f50;}
.cm-s-default .cm-meta {color: #555;}
.cm-s-default .cm-qualifier {color: #555;}
.cm-s-default .cm-builtin {color: #30a;}
.cm-s-default .cm-bracket {color: #997;}
.cm-s-default .cm-tag {color: #170;}
.cm-s-default .cm-attribute {color: #00c;}
.cm-s-default .cm-hr {color: #999;}
.cm-s-default .cm-link {color: #00c;}

.cm-s-default .cm-error {color: #f00;}
.cm-invalidchar {color: #f00;}

.CodeMirror-composing { border-bottom: 2px solid; }

/* Default styles for common addons */

div.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;}
div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
.CodeMirror-activeline-background {background: #e8f2ff;}

/* STOP */

/* The rest of this file contains styles related to the mechanics of
   the editor. You probably shouldn't touch them. */

.CodeMirror {
  position: relative;
  overflow: hidden;
  background: white;
}

.CodeMirror-scroll {
  overflow: scroll !important; /* Things will break if this is overridden */
  /* 50px is the magic margin used to hide the element's real scrollbars */
  /* See overflow: hidden in .CodeMirror */
  margin-bottom: -50px; margin-right: -50px;
  padding-bottom: 50px;
  height: 100%;
  outline: none; /* Prevent dragging from highlighting the element */
  position: relative;
  z-index: 0;
}
.CodeMirror-sizer {
  position: relative;
  border-right: 50px solid transparent;
}

/* The fake, visible scrollbars. Used to force redraw during scrolling
   before actual scrolling happens, thus preventing shaking and
   flickering artifacts. */
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
  position: absolute;
  z-index: 6;
  display: none;
  outline: none;
}
.CodeMirror-vscrollbar {
  right: 0; top: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}
.CodeMirror-hscrollbar {
  bottom: 0; left: 0;
  overflow-y: hidden;
  overflow-x: scroll;
}
.CodeMirror-scrollbar-filler {
  right: 0; bottom: 0;
}
.CodeMirror-gutter-filler {
  left: 0; bottom: 0;
}

.CodeMirror-gutters {
  position: absolute; left: 0; top: 0;
  min-height: 100%;
  z-index: 3;
}
.CodeMirror-gutter {
  white-space: normal;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  margin-bottom: -50px;
}
.CodeMirror-gutter-wrapper {
  position: absolute;
  z-index: 4;
  background: none !important;
  border: none !important;
}
.CodeMirror-gutter-background {
  position: absolute;
  top: 0; bottom: 0;
  z-index: 4;
}
.CodeMirror-gutter-elt {
  position: absolute;
  cursor: default;
  z-index: 4;
}
.CodeMirror-gutter-wrapper ::selection { background-color: transparent }
.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }

.CodeMirror-lines {
  cursor: text;
  min-height: 1px; /* prevents collapsing before first draw */
}
.CodeMirror pre {
  /* Reset some styles that the rest of the page might have set */
  border-radius: 0;
  border-width: 0;
  background: transparent;
  font-size: inherit;
  margin: 0;
  white-space: pre;
  word-wrap: normal;
  line-height: inherit;
  color: inherit;
  z-index: 2;
  position: relative;
  overflow: visible;
}
.CodeMirror-wrap pre.CodeMirror-line,
.CodeMirror-wrap pre.CodeMirror-line-like {
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: normal;
}

.CodeMirror-linebackground {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 0;
}

.CodeMirror-linewidget {
  position: relative;
  z-index: 2;
  padding: 0.1px; /* Force widget margins to stay inside of the container */
}

.CodeMirror-widget {}

.CodeMirror-rtl pre { direction: rtl; }

.CodeMirror-code {
  outline: none;
}

/* Force content-box sizing for the elements where we expect it */
.CodeMirror-scroll,
.CodeMirror-sizer,
.CodeMirror-gutter,
.CodeMirror-gutters,
.CodeMirror-linenumber {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.CodeMirror-measure {
  position: absolute;
  width: 100%;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.CodeMirror-cursor {
  position: absolute;
  pointer-events: none;
}
.CodeMirror-measure pre { position: static; }

div.CodeMirror-cursors {
  visibility: hidden;
  position: relative;
  z-index: 3;
}
div.CodeMirror-dragcursors {
  visibility: visible;
}

.CodeMirror-focused div.CodeMirror-cursors {
  visibility: visible;
}

.CodeMirror-selected { background: #d9d9d9; }
.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
.CodeMirror-crosshair { cursor: crosshair; }
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }

.cm-searching {
  background-color: #ffa;
  background-color: rgba(255, 255, 0, .4);
}

/* Used to force a border model for a node */
.cm-force-border { padding-right: .1px; }

@media print {
  /* Hide the cursor when printing */
  .CodeMirror div.CodeMirror-cursors {
    visibility: hidden;
  }
}

/* See issue #2901 */
.cm-tab-wrap-hack:after { content: ''; }

/* Help users use markselection to safely style text background */
span.CodeMirror-selectedtext { background: none; }



.COMmodal{
   height: 100vh;
   overflow-y: auto;
   /* border-left: 1px solid var(--grey-400); */
   /* border-top: 1px solid var(--grey-400); */
   background-color: #ebf3f6;
}
.COMcommitRow{
   background-color: var(--white);
   color: var(--grey-700); 
}
.COMcommitListFade{
   background-color: #ebf3f6;
   padding: 20px;
   opacity: 75%;
   position: sticky;
   bottom: 0;
}
.SPLTcollapse .COMcommitListFade{
   display: none;
}
.TRANSmodal .COMtooltip{
   top: 66px !important;
}

.COMtooltipWrap > div {
   white-space: pre-wrap;
   max-width: 500px;
	max-height: 100px;
	overflow-y: auto;
}

.COMtooltip {
   top: 20px !important; 
   max-height: 95vh;
   max-width: 50vw;
   overflow: hidden;
   height: auto;
   padding: 20px;
   background: white;
   border-radius: 8px;
   box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.COMtooltipContent{
   overflow: auto;
   max-height: 90vh;
   padding-bottom: 10px;
}
.COMmodalContainer{
   position: relative;
   background: var(--white);
   display: grid;
   grid-template-rows: 66px 1fr;
}
.COMgrid{
   display: grid;
   grid-template-columns: auto 1fr;
   padding: 24px;
   column-gap: 24px;
}
.COMpreviewSelected{
   background-color: rgba(var(---green-lighter), 0.7);
}
.COMpreviewSelected:hover{
   background-color: rgba(var(---green-lighter), 0.9) !important;
}
   
.COMheader{
   border-bottom: solid 1px var(--grey-400);
   background-color: #ebf3f6;
}
.COMheader * {
  font-family: var(--font-buttons);
  color: var(--grey-600);
  font-size: 16px;
  font-weight: 500;
}
.COMpopoutModal{
   display: grid;
   grid-template-columns: auto 1fr;
   height: 100%;
   overflow: hidden;
}
.COMdiffSelected{
   background-color: rgba(var(---green-lighter), 0.7) !important;
}
.COMcommitRowDetails{
   display: grid;
   grid-template-columns: 1fr auto;
   padding-left: 8px;
}
.COMwindow .POPpopoutCard-content{
   height: calc(100% - 61px);
   padding: 0px;
}
.COMcommitRow{
   font-size: 11px;
   cursor: pointer;
   margin-left: 0px;
   display: grid;
   grid-template-columns: 1fr auto;
   padding: 8px;
   padding-left: 12px;
   line-height: 17.5px;
   max-height: 49px;
   border-bottom: 1px solid var(--grey-400);
   overflow: hidden;
   text-overflow: ellipsis;
   box-sizing: border-box;
   max-height: 46px;
   user-select: none;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
}
.COMcommitRowContainer{
   overflow: hidden;
   text-overflow: ellipsis;
}
.COMcommitRow:hover{
   background-color: rgba(var(---green-lighter), 0.3);
   box-sizing: border-box;
}
.COMcommitRowDate{
   font-weight: 600 !important;
   font-size: 11px !important;
   border-bottom: 1px solid var(--grey-400);
   padding-bottom: 4px;
   margin-bottom: 8px;
   padding-left: 4px;
   padding-right: 24px;
}
.COMcommitHash{
   font-family: var(--font-monospace);
   font-size: 11px !important;
   border: 1px solid var(--grey-300);
   padding: 2px;
   padding-left: 8px;
   padding-right: 8px;
   margin-right: 4px;
   border-radius: var(--border-radius);
}
.COMmessage{
   padding-top: 2px;
   font-size: 11px !important;
}
.COMauthor{
   font-size: 11px !important;
   padding-left: 8px;
   padding-bottom: 8px;
   color: var(--grey-600);
}
.COMdetails{
   border-radius: var(--border-radius);
   border: 1px solid var(--grey-400);
   padding: 12px;
   padding-bottom: 4px;
   background-color: var(--white);
}
.COMfolderDetails{
   border-top: 1px solid var(--grey-400);
   margin-top: 2px;
   padding-top: 10px;
   padding-bottom: 4px;
   padding-left: 10px;
   padding-right: 12px;
   display: grid;
   grid-template-columns: auto 1fr;
   font-family: var(--font-monospace);
   column-gap: 4px;
   font-size: 10.5px !important;
}
.TGITdiffCling.TGITdiffFrom{
   border-right: 1px solid var(--grey-300);
}
.COMrowBuffer{
   user-select: none;
   height: 200px;
   background-color: #ebf3f6;
}
.COMpopoutListSplitter{
   position: relative;
   border-right: 1px solid var(--grey-400);
   display: grid;
   grid-template-rows: 1fr;
   overflow: hidden;
   padding: 15px;
   width: 500px;
}
.COMresizeControl{
   right: -5px;
   top: 0;
   bottom: 0;
   width: 10px;
   padding: 0;
   border: 0;
   position: absolute;
   outline: none;
   cursor: ew-resize;
   background-color: transparent;
   z-index: 20;
}
.COMresizeShadow{
   bottom: 0;
   top: 0;
   right: 4px;
   pointer-events: none;
   position: absolute;
   width: 3px;
   transition: 150ms ease-out;
}
.COMresizeControl:hover .COMresizeShadow {
   background: var(--blue);
   transition: 75ms ease-in;
}
.COMpopoutList{
   height: 100%;
   overflow-y: auto;
   border: 1px solid var(--grey-400);
   border-radius: var(--border-radius);
}
.COMinnerDiv{
   overflow-y: auto;
   height: 100%;
   overflow-y: auto;
   /* border: 1px solid var(--grey-400); */
   /* border-radius: var(--border-radius); */
   /* padding-left: 10px;
   padding-right: 10px;
   padding-top: 10px; */
   /* background-color: var(--grey-100); */
}
.COMpopoutDiff{
   display: grid;
   height: 100%;
   overflow: hidden;
   row-gap: 24px;
   grid-template-rows: 1fr auto;
}
.COMrollback{
   display: grid;
   grid-template-columns: 1fr auto;
   padding: 24px;
   padding-top: 12px;
   padding-bottom: 12px;
   border-top: 1px solid var(--grey-400);
   color: var(--grey-600);
   border: 1px solid var(--grey-400);
   border-radius: var(--border-radius);
   background-color: var(--grey-100);
}
.COMrollbackText{
   padding-top: 5px;
   font-family: var(--font-buttons);
}
.COMpopoutDiffContainer{
   position: relative;
   display: grid;
   grid-template-rows: 1fr;
   overflow: hidden;
   padding: 15px;
   padding-bottom: 26px !important;
   background-color: var(--white);
}
.COMcloseButtonContainer{
   display: flex;
   height: 23px;
   width: 100%;
   position: sticky;
   z-index: 10000;
   top: 0;
   left: 5px;
   align-items: center;
   box-sizing: border-box;
   cursor: pointer;
   padding: 5px;
   padding-left: 3px;
   box-sizing: border-box;
}
.COMcloseButton{
   display: flex;
   align-items: center;
   justify-content: center;
   height: 18px;
   width: 18px;
   color: var(--white);
   margin-top: 4px;
}
.COMcloseButtonContainer:hover .COMcloseButton{
   opacity: 80%;
   border-radius: var(--border-radius);
   background: var(--grey-600);
   border: 1px solid var(--grey-600);
}
.COMcommitDateContainer{
   padding-top: 8px;
   background-color: var(--grey-200);
   color: var(--grey-600);
}
.COMcommitDateContainer:first-child{
   padding-top: 8px;
}
.COMcommitDate{
   display: flex;
   padding-bottom: 5px;
   align-items: center;
   user-select: none;
   border-bottom: 1px solid var(--grey-400);
   font-size: 12px;
   padding-left: 12px;
}
.COMcommitListType{
   color: var(--grey-600);
   font-size: 10.5px;
}
.COMerror{
   padding: 12px;
   font-size: 12px;
   color: var(--grey-600);
   font-family: var(--font-monospace);
}
.COMerrorWarning{
   color: var(--red);
   font-size: 12px;
   font-family: var(--font-monospace);
}
.COMerrorWarningLink{
   color: var(--blue);
   text-decoration: unset;
   cursor: pointer;
   padding-left: 2px;
   padding-right: 2px;
}
.COMerrorWarningLink:hover{
   text-decoration: underline;
}
.COMdivHalf *{
   font-size: 11px !important;
}

.CONFIRMmodal{
	max-width: 500px;
}

.CONFIRMbuttonGroup {
	margin-top: 24px;
	justify-content: flex-end;
}

.CONFIRMactionDescription {
	margin-top: 0px;
	font-size: 13px;
	line-height: 1.5em;
	color: var(--grey-800);
}
.CORheaderGrid {
   width: 100%;
   height: 100%;
   display: grid;
   grid-template-rows: auto 1fr auto; 
}
.CORheaderWrap {
   flex-grow: 1; 
}
.CORheader * {
	user-select: none;
}
.CORheaderLogo {
   display: flex;
   flex-direction: column;
}
.CORheaderLogoContainer {
   display: flex;
   position: relative; 
}
.CORheaderGlobalNotificationContainer {
   position: absolute;
   top: calc(50% - 24px);
   left: 0px;
   height: 12px;
   min-width: 12px;
   display: flex;
}
.CORheaderNav {
   display: flex;
   flex-direction: column;
}
.CORheaderNavIcon {
   width:  32px;
   height: 32px;
   fill: currentColor;
}
 .CORheaderNavLink{
   display: flex;
   flex-direction: column;
}
.CORheaderServerLabelContainer {
   display: flex;
   align-items: flex-end; 
}
.CORheaderServerLabel {
   position: relative;
   left: 50%;
   bottom: -6px;
}
.CORheaderUser {
   display: flex;
   flex: 0 0 auto; 
}
.CORheaderUserProfile {
   display: flex;
   position: relative; 
}
.CORheaderUserProfileIcon {
   height: 24px;
   width: 24px; 
}   
.CORheaderUserProfileIconArrow {
   position: absolute;
   right: -10px;
   display: inline-block; 
}
.CORheaderLogoutUser {
   display: flex;
}
.CORheaderLogoutUserIcon {
   width: 14px;
   height: 14px;
}

.CORwarningIcon {
   height: 6px;
   width: 6px;
   position: relative;
   float: right;
   left: 15px;
   top: -32px;
   margin-bottom: -5px;
}

.CORwarningIconOn {
   background-color: red;
   border-radius: 50%;
}

.CORheaderGrid {
   background: var(--blue-dark);
}
.CORpeerBorder {
   border-left: 4px solid lime;
}

.CORpeerPadding {
   height: 3em;
}

.CORheaderLogoStyle {
   align-items: center;
}
.CORheaderLogoContainerStyle {
   height: var(--main-toolbar-height);
   align-items: center;
   justify-content: center;
}
.CORheaderLogoImageStyle {
   width: 48px;
   height: 48px;
   filter: drop-shadow(1px 2px 4px rgba(0,0,0,0.25));
}
.CORheaderGlobalNotificationContainerStyle{
   visibility: hidden;
}
.CORheaderGlobalNotificationStyle {
   background: var(--red);
   border-radius: 12px;
   align-items: center;
   justify-content: center;
   color: var(--red-lighter);
   font-size: 8px;
   font-weight: var(--bold);
   padding-left: 5px;
   padding-right: 5px;
   padding-bottom: 2px;
   box-shadow: 0px 1px rgba(var(---grey-800), 0.5);
}
.CORheaderNavStyle {
   align-items: center;
}
.CORheaderNavLinkStyle {
   align-items: center;
   outline: none;
   text-decoration: none;
   margin-bottom: 16px;
   color: var(--blue-light);
   cursor: pointer;
}
.CORheaderNavLinkStyle .CORheaderNavIcon,
.CORheaderNavLinkStyle .CORheaderNavTitleStyle {
	opacity: 0.5;
}
.CORheaderNavTitleStyle {
   font-weight: var(--semibold);
   letter-spacing: 0.35px;
   font-family: var(--font-buttons);
   font-size: 8px;
}
.CORheaderNavLinkStyle:hover {
   text-decoration: none;
   color: var(--blue-lighter);
}
.CORheaderNavLinkStyle:hover .CORheaderNavIcon,
.CORheaderNavLinkStyle:hover .CORheaderNavTitleStyle {
   opacity: 0.85;
   text-decoration: none;
   color: var(--blue-lighter);
}
.CORheaderNavLinkStyle.selected {
   color: var(--white);
   cursor: default;
}
.CORheaderNavLinkStyle.selected .CORheaderNavIcon,
.CORheaderNavLinkStyle.selected .CORheaderNavTitleStyle {
	opacity: 1;
}

.CORheaderNavLinkStyle.selected .CORheaderNavIcon {
   fill: var(--white);
   color: var(--white);
}
.CORheaderServerLabelContainerStyle {
   width: 100%;
   overflow: hidden;
}
.CORheaderServerLabelStyle {
   font-family: var(--font-buttons);
   font-weight: var(--semibold);
   color: rgba(var(---blue-light), 0.5);
   font-size: 18px;
   font-weight: 500;
   letter-spacing: 0.05em;
   white-space: nowrap;
   transform-origin: center left;
   transform: rotate(270deg);
   cursor: default;
}
.CORheaderUserStyle {
   cursor: default;
   justify-content: center;
   margin: 32px 0px;
}
.CORheaderUserProfileStyle {
   white-space: nowrap;
   align-items: center;
   color: var(--blue-light);
   font-family: var(--font-buttons);
   font-size: 12px;
   font-weight: 500;
}
.CORheaderUserProfileIconStyle {
   fill: var(--blue-light);
}

.CORheaderLogoutUserStyle {
   text-decoration: none;
   font-size: 10px;
   font-family: var(--font-buttons);
   font-weight: 500;
   color: var(--grey-800);
   padding: 6px 12px;
   align-items: center;
}
.CORheaderLogoutUserIconStyle {
   fill: var(--grey-800);
   margin-right: 8px;
}
.CORheaderLogoutUserStyle:hover {
   color: var(--blue-dark);
	cursor: pointer;
}
.CORheaderLogoutUserStyle:hover .CORheaderLogoutUserIconStyle {
   fill: var(--blue-dark);
}
.CORheaderUserNameStyle {
   text-transform: none;
   font-family: var(--font-buttons);
   font-weight: var(--semibold);
}

.CORapp {
   height: 100vh;
   font-weight: var(--regular);
   font-size: 12px;
   line-height: 16px;
   display: grid;
   grid-template-columns: 80px 1fr;
   margin : 0px;
   padding : 0px;
   overflow: hidden;
}

.CORwarningBanner {
   position: fixed;
   top: 0;
   right: 0;
   /*transform: translateX(-50%);*/
   background-color: var(--blue-light);
   padding: 4px;
   width: 20%; /* Adjust the width as needed */
   text-align: center;
   z-index: 999;
}

.CORupdateRow{
   display: grid;
   grid-template-columns: auto 1fr;
}

.CORspinner {
   border: 3px solid #f3f3f3;
   border-top: 3px solid #3498db;
   border-radius: 50%;
   width: 12px;
   height: 12px;
   animation: CORspin 2s linear infinite;
}

@keyframes CORspin {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(360deg);
   }
}

.CORloading {
   color: var(--grey-500);
   padding-left: 12px;
}


.CORheaderUser{
   cursor: pointer;
}

.CORheaderTooltip {
	padding: 0 !important;
	max-height: 20px !important;
	display: flex;
	align-items: center;
}

.CORheaderLogoutUserStyle {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 12px;
}
.CORheaderLogoutUserIconStyle {
	margin-bottom: 0 !important;
}
/* Setting up CSS rules that are safe to use in custom component scripts 
   This gives custom scripts some insulation from our CSS implementation 
   Eliot*/

.CUSTerror {
  color : red;
}

.CUSTvalue {
   text-align: left;
   border-left: 0px;
   border-right: 0px;
   display: inline-flex;
   align-items: center;
   color: var(--grey-600);
}

.CUSTlabel{
   margin-top: 4px;
   text-align: left;
   border-left: 0px;
   border-right: 0px;
   display: inline-flex;
   align-items: center;
   font-weight: var(--semibold);
}

.CUSTrow{
   display: grid;
   grid-template-columns: 150px 1fr 80px;
   margin-top: 8px;
   margin-bottom: 8px;
}
.DASHpageLayout {
  overflow: hidden;
}
.DASHdashboardGrid{
  /* display: grid; */
  /* grid-template-rows: 66px 1fr; */
  /* height: 100vh; */
}
.DASHdashboard {
  display: grid;
  grid-template-columns: auto 1fr auto;
  height: 100vh;
}

.DASHsortAsc::after {
  content: url("/DASH/DASHiconSortDown.svg");
  margin-top: 0px;
  margin-left: 3px;
}

.DASHsortDsc::after {
  content: url("/DASH/DASHiconSortUp.svg");
  margin-top: 0px;
  margin-left: 3px;
}

.DASHsearch {
  padding: 16px;
  /* padding-left: 8px; */
  /* padding-right: 8px; */
  padding-top: 18px;
  padding-bottom: 16px;
  position: relative;
}

.DASHsearchHeader {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
  user-select: none;
}

.DASHsearchLabel {
  color: var(--grey-600);
  font-family: var(--font-buttons);
  font-weight: 500;
  letter-spacing: 0.02em;
  font-size: 11px;
  padding-left: 4px;
}

.DASHsearchInput {
  width: 100%;
  height: 28px;
  border-radius: var(--border-radius);
  background-color: transparent;
  font-weight: var(--regular);
  font-size: 12px;
  box-sizing: border-box;
}

.DASHcheckbox input {
  margin-right: 2px;
  margin-top: 4px;
}

.DASHlistView {
  display: grid;
  grid-template-rows: 72px auto 1fr auto;
  position: relative;
  background-color: #ebf3f6;
  border-right: 1px solid var(--grey-400);
  height: 100vh;
  z-index: 1;
  width: 520px; /* Give the pane a default width if it hasn't been resized manually */
}

.DASHsideHeader {
  padding: 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 12px;
  padding-left: 24px;
  padding-right: 16px;
  user-select: none;
  height: 66px;
  background-color: #ebf3f6;
  border-bottom: 1px solid var(--grey-400);
  box-sizing: border-box;
}

.DASHheading {
  font-family: var(--font-buttons);
  color: var(--blue-dark);
  font-size: 16px;
  font-weight: 500;
}

.DASHheadingButtons {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
}
.DASHonlyCheckedContainer{
  display: block;
  width: 170px;
  height: 28px;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


.DASHeditConnectionsContainer {
  display: block;
  width: 170px;
  height: 28px;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  top: -38px;
}

/* Hide the browser's default checkbox */
.DASHonlyCheckedContainer input,
.DASHeditConnectionsContainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.DASHonlyCheckedIcon{
  height: 28px;
}
.DASHeditConnectionsIcon{
  height: 32px;
}
.DASHonlyCheckedIcon,
.DASHeditConnectionsIcon {
  font-family: var(--font-buttons);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  position: absolute;
  opacity: 1;
  top: 0;
  left: 0;
  width: auto;
  padding: 0px 16px 0px 12px;
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(231,244,244,.6);
  border: 1px solid var(--blue);
  color: var(--blue);
}

.DASHonlyCheckedIcon svg,
.DASHeditConnectionsIcon svg {
  fill: currentColor;
  height: 16px;
  width: 16px;
  margin-right: 8px;
}

/* On mouse-over, add a grey background color */
.DASHeditConnectionsContainer:hover input ~ .DASHeditConnectionsIcon {
  color: var(--blue);
}

/* When the checkbox is checked, add a blue background */
.DASHonlyCheckedContainer input:checked ~ .DASHonlyCheckedIcon,
.DASHeditConnectionsContainer input:checked ~ .DASHeditConnectionsIcon {
  background-color: #C9DFE8;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.2);
  border: none;
  color: var(--blue-dark);
}

/* Table Rows */
.DASHtableRow {
  display: flex;
  /* grid-template-columns: minmax(24px, 28px) minmax(88px, 94px) minmax(105px, 1fr) minmax(40px, 125px) minmax(32px, 45px) minmax(24px, 40px) minmax(24px, 40px) minmax(32px, 54px); */
  user-select: none;
  background: var(--white);
  column-gap: 12px;
  align-items: center;
  font-size: 11px;
  color: var(--grey-800);
  height: 32px;
}

.DASHtableRow:hover {
  cursor: pointer;
}
.DASHrowHighlighted{
  background-color: var(--blue-lighter) !important;
  outline: 1px solid rgba(var(---blue), 0.6) !important;
}

.DASHcomponentRow.DASHselected,
.DASHtableRowHighlight {
  background-color: var(--blue-lighter) !important;
}

.DASHrowChecked {
  background-color: var(--blue-light) !important;
}
.DASHrowChecked.DASHrowHighlighted {
  background-color: var(--blue-lighter) !important;
}
.DASHrowSelected.DASHrowHighlighted{
  background-color: var(--blue-light) !important;
}
.DASHrowSelected {
  background-color: var(--blue-lighter) !important;
}

.DASHtableRow > :first-child {
  margin-left: 8px;
}

.DASHtableRow:first-child > * {
  height: 100%;
  display: flex;
  align-items: center;
  color: var(--grey-700);
  font-size: 10px;
  font-family: var(--font-buttons);
}

.DASHtableRow:last-child {
  border-bottom: 1px solid var(--grey-300);
  /* border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px; */
}

.DASHtableRow.DASHsourceSelected div:not(.POPtooltip) * {
  color: var(--white) !important;
}

.DASHtableRow.DASHcannotConnectTo.DASHsourceSelected div:not(.POPtooltip) * {
  color: var(--white) !important;
}

.DASHtableRow.DASHsourceSelected .TOGtoggle {
  border: 1px solid var(--white);
}

.DASHtableRow.DASHcannotConnectTo * {
  color: var(--grey-400);
}

.DASHaddFromUrlButton,
.DASHaddComponentButton {
  border-radius: 9999px;
  font-family: var(--font-buttons);
  font-weight: var(--semibold);
  font-size: 10px;
  line-height: 10px;
  letter-spacing: 0.25px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  width: fit-content;
  box-sizing: border-box;
  color: var(--white);
  transition: 250ms ease-out;
  text-decoration: unset;
}
.DASHaddFromUrlButton{
  background-color: var(--grey-400);
  padding: 0 14px 0px 14px;
}
.DASHaddFromUrlButton:hover{
  background-color: var(--grey-500);
  transition: 70ms ease-in;
}
.DASHaddComponentButton {
  background-color: var(--green);
  padding: 0 14px 0px 10px;
}
.DASHaddComponentButton:hover {
  background-color: var(--green-hover);
  transition: 70ms ease-in;
}

.DASHaddComponentButton:active {
  background-color: var(--green-active);
}

.DASHtableHeading {
  cursor: pointer;
  background-color: #ebf3f6 !important; 
  position: sticky;
  top: 0px;
  z-index: 100;
  padding-top: 4px;
}

.DASHresizeControl,
.DASHresizeControl2{
  right: -6px;
  top: 0px;
  bottom: 0px;
  width: 10px;
  padding: 0px;
  border: 0px;
  position: absolute;
  outline: none;
  cursor: ew-resize;
  background-color: transparent;
  z-index: 5;
}
.SPLTcollapse .DASHresizeControl2{
  z-index: initial;
}
.DASHresizeShadow,
.DASHresizeShadow2{
  bottom: 0;
  top: 0;
  right: 4px;
  pointer-events: none;
  position: absolute;
  width: 2px;
  transition: 150ms ease-out;
}

.DASHresizeControl:hover .DASHresizeShadow {
  background: var(--blue);
  /* box-shadow: 3px 0px 10px rgba(0,0,0,0.5); */
  transition: 75ms ease-in;
}
.DASHresizeControl2:hover .DASHresizeShadow2 {
  background: var(--blue);
  /* box-shadow: 3px 0px 10px rgba(0,0,0,0.5); */
  transition: 75ms ease-in;
}
.DASHlatestActivityNoPerm{
  white-space: nowrap;
  font-size: 11px;
}
.DASHlatestActivity,
.DASHcomponentName {
  color: #2590cd;
  cursor: pointer;
  white-space: nowrap;
  font-size: 11px;
  /* text-decoration: none; */
}
.DASHserverLabel{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.DASHselectToolbar {
	padding: 24px 16px 28px 16px;
	position: relative;
  display: grid;
  grid-template-columns: auto 190px;
}
.DASHselectToolbar select:disabled {
	opacity: 0.3;
}

.DASHtableOverflow {
  overflow: hidden;
  position: relative;
}
.DASHbulkWarning{
  color: var(--grey-600);
  font-size: 10.5px;
}
.DASHresultCount {
  color: var(--grey-600);
  font-size: 10px;
  padding-right: 2px;
}

.DASHmanageLinkRow {
  display: grid;
  grid-template-columns: 30px auto;
  padding: 4px;
  border: 1px solid var(--grey-300);
  border-bottom: 0;
  margin-left: 8px;
  margin-right: 8px;
  user-select: none;
}

.DASHlinkGuid {
  color: var(--grey-600);
  padding-left: 5px;
  font-size: 11px;
}

.DASHlinkLabel * {
  display: inline-block;
}

.DASHmapErrorDiv,
.DASHtooManyMessage{
  color: var(--grey-700);
  font-size: 16px  !important;
  position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
  text-align: center;
}

/* Color of connection path on hover (delete connection) */
.DASHeditMode .DASHlink:hover, 
.DASHeditMode .DASHlink2:hover {
  stroke: var(--red) !important;
  cursor: pointer;
}

.DASHnodeContents {
  transition: transform 500ms ease;
  background: var(--white);
  border-radius: 28px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25);
  width: 160px;
  height: 50px;
  padding: 0px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid var(--grey-300);
  /* position: relative; */
}

.DASHnoLink {
  background-color: rgba(128, 128, 128, 1) !important;
}

.DASHtableRow .DASHcannotConnectTo {
  background: #DFEBF1 !important;
  box-shadow: 0 2px 2px rgb(0 0 0 / 5%);
}

.DASHcannotConnectTo.DASHnodeChecked {
  background: #DFEBF1 !important;
  box-shadow: 0 2px 2px rgb(0 0 0 / 5%);
}
.DASHcannotConnectTo {
  background: #DFEBF1 !important;
  box-shadow: 0 2px 2px rgb(0 0 0 / 5%);
}
.DASHcannotConnectTo.DASHsourceSelected{
  background: var(--blue-dark) !important;
  box-shadow: 0 2px 2px rgb(0 0 0 / 25%);
}

.DASHcannotConnectTo .DASHnodeLabel {
  color: var(--grey-500);
}

.DASHcannotConnectTo .DASHnodeLabel::before {
  opacity: 0.5;
}

.DASHnode .DASHsourceSelected {
  background: var(--blue-dark) !important;
  box-shadow: 0 5px 5px rgb(0 0 0 / 25%);
}

.DASHsourceSelected .DASHnodeLabel {
  color: white;
}

.DASHsourceSelected.DASHcannotConnectTo .DASHnodeLabel::before {
  opacity: 1;
}

.DASHnodeContents.DASHgroupedNode {
  background-color: var(--green-lighter);
}

.DASHnodeContents.DASHgroupedNode.DASHnodeHighlighted,
.DASHnodeContents.DASHgroupedNode.DASHnodeSelected {
  background-color: var(--green-light) !important;
}
.DASHnodeHighlighted{
  outline: 1px solid rgba(var(---blue), 0.6) !important;
}
.DASHnodeContents.DASHgroupedNode.DASHnodeSelected.DASHnodeHighlighted {
  background-color: var(--green) !important;
}
.DASHavailableComponents {
  height: 100%;
  max-height: 200px;
  overflow-y: auto;
}

.DASHclearSearch {
  z-index: 998;
  background: none;
  position: absolute;
  right: 24px;
  bottom: 22px;
  user-select: none;
}

.DASHclearSearch:hover {
  background-color: transparent;
}

.DASHtableContainer {
  display: grid;
  grid-auto-rows: auto;
  max-height: calc(100% - 16px);
  overflow-x: hidden;
  overflow-y: scroll;
  --scrollbarBG: #ebf3f6;
  --thumbBG: #d2dde8;
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
  position: relative;
  /* padding-bottom: 40px; */
  row-gap: 1px;
  /* background-color: var(--white); */
}

.DASHtableContainer::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

.DASHtableContainer::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}

.DASHtableContainer::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG);
  border-radius: 8px;
  border: 5px solid var(--scrollbarBG);
}

.DASHcenterText {
  text-align: center;
  justify-content: center;
}
/*DashChange*/
.DASHcenterText .TOGtoggle {
  margin: auto; /* center toggle switch */
  width: 28px;
  height: 12px;
}

.DASHnamePlusLabel {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-items: center;
  height: 100%;
}

.DASHserverLabelHtml {
  overflow: hidden;
  white-space: nowrap;
  padding-left: 12px;
  font-size: 10px;
}

.DASHlabel {  /* make label scrollable for search */
  overflow-x: hidden;
}

.DASHlabel span {
  line-height: 18px;
}

.DASHdetailedCard {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.DASHdetailedTitleBar {
  display: grid;
  row-gap: 16px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--grey-300);
}

.DASHcardTitleBarLayout {
  display: grid;
  grid-template-columns: 65px 1fr 54px;
}

.DASHdetailNameLabel {
  color: #2590cd;
  font-size: 14px;
  font-weight: 600;
}

.DASHcardLabel {
  color: grey;
  white-space: pre-wrap;
}

.DASHcardLabelBox {
  line-height: 1.75;
  font-size: 12.5px;
}

.DASHmax500 {
  max-width: 500px;
  overflow-wrap: break-word;
}

.DASHscript {
  cursor: pointer;
  color: #2590cd;
  padding: 4px;
  margin: 4px;
}

.DASHeditComponentDetails {
  color: #2590cd;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  display: inline;
}

.DASHrunComponentOn {
  color: #2590cd;
  font-size: 14px;
  font-weight: 600;
  padding-top: 17px;
}

.DASHrunComponentOnSelector {
  grid-column: 2 / 3;
  padding: 8px;
  padding-right: 16px;
}

.DASHrunComponentInfo {
  height: 50px;
  width: 50px;
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0px;
  top: 0px;
}

.DASHrunComponentInfo:hover {
  background: rgba(179, 221, 245, 0.25);
  cursor: pointer;
}

a:visited.DASHrepoLink {
  text-decoration: none;
}

.DASHcustomFieldEdit {
  cursor: pointer;
  color: #2590cd;
  margin: 12px;
}

@keyframes fadein {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
.DASHiconAddStyle14px {
  width: 14px;
  height: 14px;
  margin-right: 8px;
  fill: currentColor;
}

.DASHeditConnectionsContainer input:checked ~ .DASHeditConnectionsIcon .DASHconnectionInfoDiv{
	visibility: visible;
}
.DASHeditConnectionsContainer input:checked ~ .DASHeditConnectionsIcon .DASHconnectionInfoDiv:hover ~ {
	visibility: visible;
}
.DASHconnectionInfoDiv{
	visibility: hidden;
   padding-right: 3px;
}

.DASHeditConnectionTooltip {
  width: 220px;
  font-size: 10px !important;
}

.DASHlastActTooltip {
  min-width: 110px !important;
  padding-left: 6px !important;
  text-align: center !important;
}

.DASHlastActText .DASHlastActLink {
  padding: 4px;
  margin: 4px;
}

.DASHlastActLink {
  cursor: pointer;
  color: #2590cd;
}

.DASHcheckedRow {
  background-color: var(--blue-light);
}

.DASHswitchOff {
  background-color: #c9d0d5 !important;
}

.DASHswitchOn {
  background-color: #33b44a !important;
}

.DASHswitchInProg {
  background-color: #fee94e !important;
}

.DASHswitchErr {
  background-color: #d0011b !important;
}
.DASHtooltipOverflow .POPtooltipContent{
  overflow-y: auto !important;
  max-height: 100px;
}
.DASHtooltipOverflow{
  background-color: var(--red-lighter) !important;
  border-color: var(--red-light) !important;
}
.DASHtooltipOverflow .POPtooltipRight:before{
  border-color: transparent var(--red-light)transparent transparent;
}
.DASHtooltipOverflow .POPtooltipRight:after{
  border-color: transparent var(--red-lighter) transparent transparent;
}
.DASHbulkActionPopup {
  max-width: 500px;
}
.DASHbulkDialogClass .FORMinput{
  margin-top: 8px !important;
}
.DASHserverLabel, .DASHcenterText, .DASHlabel {
  color: var(--grey-600);
  line-height: 18px;
}
.DASHshowOnlyCheckedSwitchBox{
  display: flex;
  justify-content: right;
}
.DASHshowOnlyCheckedLabel{
  margin: auto 0;
  text-align: right;
  color: var(--grey-600);
  font-size: 11px;
}
.DASHshowOnlyCheckedToggle{
  margin: auto;
  text-align: center;
  justify-content: center;
}
.DASHshowOnlyCheckedToggle .TOGtoggle{
  margin: auto;
  width: 28px;
  height: 13px;
}
.DASHrowBuffer{
  display: grid;
  grid-template-columns: 36px 50px minmax(125px, 2.5fr) 45px 45px 45px minmax(60px, 1fr);
  user-select: none;
  height: 60px;
}
.DASHlinkArea{
  stroke-width: 10px;
}
.DASHdeleteInfo{
  display: inline-block;
  cursor: pointer;
}
.DASHnotWritable{
  background-color: #c9d0d5;
}
.DASHlistDataError{
  color: var(--grey-600);
  text-align: center;
  padding: 24px;
}
.DASHdisplayNone{
  display : none !important;
}

.DASHeditConnInfo {
  position: absolute;
  top: 85px;
  right: 20px;
  padding: 10px; /* Add padding to create space around the content */
  background-color: white; /* Add a background color if needed */
  border: 1px solid;
  border-radius: var(--border-radius);
  white-space: pre;
  width: 220px;
  font-size: 10px !important;
  color: var(--blue);
  display: inline-block;
  width: auto;
}
.DASHlatestActivity,
.DASHcomponentName,
.DASHeditScript{
  color: var(--blue);
	text-decoration: none;
}
.DASHeditScript{
  font-size: 12px;
  margin-right: -4px;
  margin-left: -4px;
}
.DASHerrorCount{
  color: var(--grey-600);
	text-decoration: none;
}
.DASHredError{
  color: var(--red) !important;
	text-decoration: underline;
}
.DASHerrorCount:hover{
  color: var(--grey-600);
	text-decoration: underline;
	cursor: pointer;
}
.DASHlatestActivity:hover,
.DASHcomponentName:hover,
.DASHeditScript:hover{
  color: var(--blue);
	text-decoration: underline;
	cursor: pointer;
}
.DASHbulkShiftPinsFeedback,
.DASHbulkEditSubmitFeedback,
.DASHbulkEditAddFeedback,
.DASHbulkEditRemoveFeedback,
.DASHbulkShiftPinsRemoveFeedback {
  color: red;
  white-space: break-spaces;
  padding-top: 4px;
}
.DASHstatusHeader{
  margin-left: 2px;
}
.DASHhashtag{
  margin-right: 3px;
  text-decoration: none;
  padding: 1px 4px;
}
.DASHcomponents .DASHhashtag{
  font-size: 9px;
}
.DASHbulkListName{
  padding-right: 8px;
}
.DASHbuttonGroup{
  margin-top: 25px;
  display: flex;
  justify-content: end;
}
.DASHrenderHashtagInfoSymbol{
  color: var(--blue);
}
.DASHtagsSection{
  border-bottom-right-radius: 24px;
  background: #D2E4EC;
  top: 0px;
  align-items: center;
  display: flex;
  padding: 12px;
  padding-left: 16px;
  padding-top: 18px;
  padding-bottom: 14px;
  gap: 4px;
  overflow: hidden;
  position: fixed;
  /* box-shadow: 0 10px 10px 0px rgba(0, 0, 0, 0.0); */
}
.DASHeditMode .DASHtagsSection{
  background: rgba(var(---blue-dark), 0);
  padding-left: 8px;
}

.DASHtableRow:nth-child(even) {
	background-color: var(--white); 
 }

.DASHtableRow:nth-child(odd) {
	background-color: var(--grey-200); 
 }

.DASHsetHtmlTooltipWrapper {
  position: absolute;
  display: inline;
  visibility: hidden;
  word-break: break-all;
  width: 100%;
}

.DASHrowHighlighted .DASHsetHtmlTooltipWrapper {
	visibility: visible;
  width: 100%;
}
.DASHsetHtmlTooltipClass {
	position: absolute;
	border-radius: var(--border-radius);
	padding: 12px;
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
	font-size: 11px;
	color: var(--grey-800);
  text-align: unset;
}
.DASHsetHtmlTooltipClass::after,
.DASHsetHtmlTooltipClass::before{
  content: "";
  position: absolute;
  left: 18px;
  transform: translateX(-50%);
  border: 8px solid;
}
.DASHsetHtmlTooltipClass::after{
  top: -16px;
  border-color: transparent transparent white transparent;
}
.DASHsetHtmlTooltipClass::before{
  top: -17px;
  z-index: -20;
  border-color: transparent transparent #D6D4D2 transparent;
}
.DASHsetHtmlTooltipClass {
	background-color: var(--white);
	border: 1px solid var(--grey-300);
  top: 18px;
}
.DASHwelcomeModal a{
  color: var(--blue);
}
.DASHsearchFooterRow{
  display: grid;
  grid-template-columns: 1fr auto;
  padding-left: 14px;
  padding-right: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--grey-300);
}
.DASHfilterCheckbox {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	color: var(--grey-600);
	font-size: 10.5px;
	user-select: none;
	column-gap: 4px;
	color: var(--grey-600) !important;
  padding-left: 2px;
}
.DASHfilterCheckbox:hover{
	text-decoration: underline;
}
.DASHcomponentList {
  max-height: 400px;
  overflow-y: auto;
  list-style-type: none;
  border: 1px solid var(--grey-400);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  padding: 0;
  margin: 0;
  border-left: none;
  border-right: none;
  border-bottom: none;
}

.DASHcomponentList>div {
  border-top: 1px solid var(--grey-300);
  background: var(--grey-100);
  border-bottom: none;
  padding: 7px;
  font-size: 11px;
  color: var(--grey-700);
  display: grid;
  grid-template-columns: auto 1fr;
}

.DASHcomponentList div:first-child {
  border-top: none;
}
.DASHcomponents {
  border: 1px solid var(--grey-400);
  border-radius: var(--border-radius);
}

.DASHbulkDialogHeader {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  padding: 10px;
  padding-left: 7px;
  font-size: 9px;
  font-family: var(--font-buttons);
  background-color: var(--grey-200);
  letter-spacing: 0.05em;
  background: var(--grey-200);
  font-weight: var(--semibold);
}
.DASHbulkActionFade{
  background-color: #ebf3f6;
  padding: 20px;
  opacity: 75%;
  position: sticky;
  bottom: 0px;
}

.DASHsetPins{
  border-radius: 28px;
  color: var(--blue);
  border: 1px solid var(--blue);
  background-color: rgba(231, 244, 244, .6);
  letter-spacing: 0.03em;
  cursor: pointer;
  font-family: var(--font-buttons);
  margin-left: 12px;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1em;
  padding: 10px 14px 9px 14px;
  font-size: 11px;
  text-decoration: unset;
  user-select: none;
  margin-right: 5px;
  opacity: 1;
  bottom: 20px;
  position: fixed;
}
.DASHcenterText .TOGswitchDiv{
  margin-left: 2px;
}
.DASHbulkDialogClass .DASHcomponentList{
  max-height: 197px;
}
.DASHaddTagLabel{
  margin-top: 16px;
}

.DASHshiftXlabel{
  margin-top: 16px;
}
.DASHshiftX,
.DASHshiftY{
  width: 135px !important;
}

/* Git history splitter */
.DASHgitHistorySplitter{
  display: grid;
  grid-template-rows: 1fr auto;
  position: relative;
  height: 100vh;
  border-right: 1px solid var(--grey-400);
  width: 260px; /* Give the pane a default width if it hasn't been resized manually */
}
.DASHresizeControl2     .DASHresizeIcon,
.DASHgitHistorySplitter .DASHresizeIcon {
	fill: currentColor;
}
.DASHresizeControl2:hover     .DASHresizeButton,
.DASHgitHistorySplitter:hover .DASHresizeButton {
	opacity: 1;
	transition: 150ms ease-in;
}
.DASHcommitTarget{
  height: 100%;
  overflow: hidden;
}
.SPLTcollapse .COMheader{
  border-bottom: unset !important;
}
.SPLTcollapse .COMmodal {
  display: none;
}
.SPLTcollapse .DASHgitHistoryFadeSection,
.SPLTcollapse .COMmodalContainer{
  display: none;
}
.SPLTcollapse .DASHresizeShadow2{
  display: none;
}
.SPLTcollapse .DASHresizeControl2{
  cursor: default;
}
.DASHgitHistoryFadeSection{
  padding: 24px 16px 56px 16px;
  position: relative;
  background: #ebf3f6;
}
.DASHrightSide{
  display: grid;
  /* padding: 24px; */
  grid-template-rows: auto 1fr;
  background-color: #D2E4EC;
}
.DASHrightSidePadding{
  padding: 24px;
  padding-bottom: 0;
}
.SPLTcollapse.DASHgitHistorySplitter{
  border-right: unset;
  width: 0px !important;
}
.DASHnodeContents.DASHneighbour {
  background: #D4E3EA;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
}
.DASHneighbour *{
  opacity: 0.6;
}
.DASHqueCount{
  white-space: nowrap;
  overflow-x: hidden;
}

.CARDclearLink {
  position: absolute;
  top: 2px;
  padding: 4px;
  padding-left: 8px;
  left: 13px;
  color: var(--blue);
  font-size: 12px;
  cursor: pointer;
  background: none;
  border: none;
  padding-bottom: 0;
  text-decoration: none;
}

.CARDclearLink:hover {
  text-decoration: underline;
  color: var(--blue);
}
.DASHnameHeader{
  min-width: 100px;
  flex-grow: 1;
}
.DASHcheckbox{
  width: 18px;
}
.DASHstatusHeader{
  width: 88px;
}
.DASHlastAct{
  width: 110px;
}
.DASHque{
  width: 40px;
}
.DASHerr{
  width: 40px;
}
.DASHin{
  width: 40px;
}
.DASHout{
  width: 40px;
}
.DASHclusterMap {
	overflow: hidden;
	position: relative;
}

.DASHwelcomeOverlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50%;
	background-color: #fff;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.DASHwelcomeModal {
	text-align: center;
}

.DASHeditOverlay {
	position: fixed;
	bottom: -13px;
   right : 13px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.DASHmapOverlay {
	/* height: 0; */
	width: 100%;
	min-width: 100%;
	min-height: 100%;
	margin: auto;
	display: block;
	background-color: #D2E4EC;
	position: relative;
}

.DASHclusterNodeContainer {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: default;
}

.DASHnode {
	stroke: dimgrey;
	stroke-width: 1px;
}

.DASHlink,
.DASHlink2 {
	fill: none;
	stroke-width: 4px;
	cursor: default;
}
.DASHlink{
	stroke: var(--grey-500);
}
.DASHgroupLink,
.DASHgroupLink2 {
	stroke-dasharray: 4;
}
.DASHnodeLabel {
	color: var(--grey-800);
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
	font-size: 11px;
	font-weight: 500;
	margin-top: -2px;
	margin-left: 18px;
	margin-right: 12px;
}

.DASHnodeDisplayName {
	/* overflow: hidden;
	text-overflow: ellipsis; */
	white-space: normal;
	word-wrap: break-word;
}

.DASHnodeCounter {
	stroke: #3fb62a;
	stroke-width: 1;
	font-size: 10px;
	font-weight: lighter;
	text-anchor: middle;
	text-align: center;
}

.DASHnoderunning {
	padding: 0px 6px 0px 24px;
}

.DASHnodeStatusLight {
	content: '';
	width: 11px;
	height: 11px;
	background: #c9d0d5;
	display: inline-block;
	border-radius: 11px;
	position: fixed;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	border: 2.2px solid white;
	box-shadow: 0 0.75px 1px rgb(0 0 0 / 25%)
}

.DASHgroupedNode .DASHnodeStatusLight {
	display: none !important;
}

.DASHgroupedNode .DASHnodeLabel {
	margin-left: 4px;
	margin-right: 4px;
}

.DASHnodewarning {
	padding: 0px 6px 0px 24px;
}

.DASHnodewarning .DASHnodeLabel::before {
	content: '';
	width: 10px;
	height: 10px;
	background: var(--yellow);
	display: inline-block;
	border-radius: 10px;
	position: fixed;
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
	border: 2px solid white;
}

.DASHnodeoff {
	/* border: 1px solid var(--grey-600); */
}

/* Component styling on hover */
.DASHnodeContents.DASHselected,
.DASHnodehover {
	/* background: var(--blue-dark) ; */
}

.DASHnodeHighlighted,
.DASHnodeSelected {
	background: var(--blue-lighter) !important;
}

.DASHnodeHighlighted.DASHnodeSelected {
	background: var(--blue-light) !important;
}

.DASHnodeChecked {
	background: var(--blue) !important;
}

.DASHnodeChecked.DASHnodeHighlighted {
	background: var(--blue-dark) !important;
}

.DASHmapOverlay.DASHeditMode{
	background: #C7DDE7;
	height: 0; /* Without this, the border seems to go off screen? */
	box-sizing: border-box;
	border-style: solid;
	border-width: 72px 8px 8px 8px;
	border-color: red;
	animation-name: borderColor;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

@keyframes borderColor {
	0% {
	  border-color: rgba(var(---blue-dark), 0.1);
	}
	50% {
	  border-color: rgba(var(---blue-dark), 0.2);
	}
	100% {
	  border-color: rgba(var(---blue-dark), 0.1);
	}
}

.DASHmapOverlay.DASHeditMode::after {
	border: 0.5px solid;
	border-radius: var(--border-radius);
	background: #C7DDE7;
	content: "Editing connections...";
	display: flex;
	position: absolute;
	top: 17px;
	right: 39px;
	padding: 10px;
	text-align: center;
	justify-content: right;
	align-items: center;
	font-family: var(--font-buttons);
	font-size: 16px;
	font-weight: 500;
	color: var(--blue-dark);
	z-index: 1;
}

/* .DASHeditMode.DASHlink {
   stroke-dasharray: 10px 2px;
}

.DASHeditMode .DASHnodeContents {
   background-color: rgb(85, 186, 181);
   color : white;
} */



.DASHnodeContents.DASHnodeChecked .DASHnodeLabel,
.DASHnodeContents.DASHselected .DASHnodeLabel,
.DASHnodehover .DASHnodeLabel {
	color: var(--white);
	font-weight: 600;
}

.DASHnodeGreyedOut {
	background: var(--grey-500);
}

/* Detail card from component */

.DASHcenterVertical {
	display: grid;
	align-items: center;
}

.DASHcardDetails {
	display: grid;
	grid-template-columns: auto 1fr;
	row-gap: 8px;
	column-gap: 16px;
}

.DASHcomment {
	margin-bottom: 4px;
}

#endArrow:hover {
	fill: var(--blue)
}


.DBGcrashCard .POPpopoutCard-wrapper {
   width: 70%;
   max-width: 1200px;
   min-width: 400px;
   max-height: 100%;
   overflow: auto;
   position: unset;
   top: unset;
   left: unset;
   transform: unset;
}

.DBGcontent{
   scroll-behavior: auto;
   font-family: 'Courier New', Courier, monospace;
   white-space: pre;
   overflow: auto;
}
.DBGlist{
   max-height: 400px;
   overflow-y: auto;
}

.DBGdeleteFile {
   float: right;
}

.DBGerrorText {
   color: red;
   display: none;
   text-align: center;
}

.DBGshowFile {
   position: relative;
   text-decoration: none;
   color: #333;
   background-color: #f0f0f0;
   padding: 10px;
   border: 1px solid #ccc;
   display: inline-block;
   border-radius: 5px;
   transition: background-color 0.3s ease;
   width: 90%;
   text-align: center;
}

.DBGshowFile:hover {
   background-color: var(--blue-light);
}

.DBGshowFile span {
   position: absolute;
   left: 2%;
   background-color: pink;
   display: inline-block;
   border-radius: 15px;
   padding: 4px 6px;
   margin: -4px;
}


.DBMwindow {
	top: 50px;
	height: calc(100% - 104px);
}
.DBMwindow .POPpopoutCard-content {
	height: calc(100% - 61px);
	padding: 0px;
}
.DBMmodal {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr auto;
	height: 100%;
	overflow: hidden;
	width: 100%;
}
.DBMimportListContent,
.DBMfromFileDiv,
.DBMtoFileDiv{
	overflow: auto;
}
.DBMorHeader{
	font-family: var(--font-buttons);
	color: var(--grey-500);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.05em;
	margin-bottom: 24px;
	flex-grow: 1;
	text-align: center;
}
.DBMheader{
	font-family: var(--font-buttons);
	color: var(--grey-500);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.05em;
	margin-bottom: 24px;
}
.DBMimportSection{
	box-sizing: border-box;
	padding: 32px;
	margin-bottom: 12px;
}
.DBMsection{
	box-sizing: border-box;
	padding: 32px;
	height: 100%;
	overflow: hidden;
}
.DBMtoFileDiv,
.DBMfromFileDiv{
	border: 1px solid var(--grey-400);
	border-radius: var(--border-radius);
	flex-grow: 1;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: calc(100% - 32px);
}
.DBMtoFileSearchDiv,
.DBMfromFileSearchDiv{
	padding: 0px 8px;
	border-bottom: 1px solid var(--grey-400);
}
input.DBMtoFileSearch,
input.DBMfromFileSearch{
	outline: none;
	border: none;
	padding-left: 0px;
	padding-right: 0px;
	background-image: url(../SMPL/SMPLiconFilter.svg);
	background-repeat: no-repeat;
	background-position: 0px center;
	padding-left: 24px;
}
.DBMfromFilePathHeader,
.DBMtoFilePathHeader{
	font-weight: var(--semibold);
	padding-right: 4px;
}
.DBMfromFilePathHeader,
.DBMtoFilePathHeader,
.DBMfromFilePath,
.DBMtoFilePath{
	display: inline-block;
	color: var(--grey-500);
	padding: 12px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.DBMtoFileViewing,
.DBMfromFileViewing{
	padding-top: 24px;
	padding-bottom: 24px;
}
.DBMaccordian{
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: auto;
	cursor: pointer;
	padding-left: 8px;
}
.DBMmodal *{
	-webkit-user-select: none;
	-moz-user-select: none;  
	-ms-user-select: none;     
	user-select: none;          
 }
.DBMsegmentgroupFolder *,
.DBMmessageFolder *,
.DBMsegmentFolder *,
.DBMcompositeFolder *,
.DBMsectionTitle *,
.DBMnameNode *{
	display: inline-block;
}
.DBMheaderTitle{
	display: flex;
	width: 100%;
}
.DBMfolderNode{
	content: url(/DBM/images/DBMfolderOpen.svg);
}
.DBMtrayClosed .DBMfolderNode,
.DBMclosed .DBMfolderNode{
	content: url(/DBM/images/DBMfolderClosed.svg);
}
.DBMtitle{
	flex-grow: 1;
	padding-left: 8px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.DBMcontent > div:hover{
	background-color: rgba(179, 221, 245, 0.25);
}
.DBMcontent.DBMtrayClosed{
	display: none;
}
.DBMcontent.DBMtrayOpen{
  padding-left: 24px;
}
.DBMcontent > div,
.DBMlistRow > div{
	display: flex;
	align-items: center;
}
.DBMsegmentgroupFolder {
	position: sticky;
	top: 29px;
	bottom: 60px;
 }
.DBMmatchingFolder,
.DBMsegmentgroupFolder,
.DBMmessageFolder,
.DBMsegmentFolder,
.DBMcompositeFolder {
  height: 30px;
  min-height: 30px;
  display: flex;
  align-items: center;
  width: 100%;
  background-color: white;
  z-index: 1;
}
.DBMlistTitle{
	padding-left: 8px;
}
.DBMsegmentDefinitions::before{
	content:url(/TREE/images/EDIiconFolderRepeating.svg);
	margin-right: 6px;
	height: 16px;
	width: 16px;
}
.WNDtitleIcon.DBMsegmentDefinitions::before{
	content: url(/TREE/images/EDIiconFolderRepeating.svg);
}
.DBMclosed > .DBMnameNode > .DBMsegmentDefinitions::before,
.DBMclosed > .DBMsegmentDefinitions::before{
	content: url(/TREE/images/EDIiconFolderRepeating.svg);
}
.DBMmessageDef::before{
	content: url(/TREE/images/EDIiconMessage.svg);
	margin-right: 6px;
	height: 16px;
	width: 16px;
}
.DBMcompositeDef::before{
	content: url(/TREE/images/EDIiconComposite.svg);
	margin-right: 6px;
	height: 16px;
	width: 16px;
}
.DBMsegmentDef::before{
	content: url(/TREE/images/EDIiconSegment.svg);
	margin-right: 6px;
	height: 16px;
	width: 16px;
}
.DBMtoFileContent,
.DBMfromFileContent{
	height: 100%;
	overflow: auto;
	padding: 12px;
}
.DBMmessageFolder {
	position: sticky;
	top: 0px;
	bottom: 120px;
}
.DBMsegmentgroupFolder {
	position: sticky;
	top: 29px;
	bottom: 90px;
}
.DBMsegmentFolder {
	position: sticky;
	top: 59px;
	bottom: 60px;
}
.DBMcompositeFolder {
	position: sticky;
	top: 89px;
	bottom: 30px;
}
.DBMmatchingFolder {
	position: sticky;
	top: 119px;
	bottom: 0px;
}
.DBMimportBanner{
	display: flex;
	align-items: center;
	justify-content: right;
	height: 42px;
	background: var(--white);
	padding-right: 34px;
	padding-bottom: 32px;
}
.DBMdisabled{
	opacity: 0.5;
}
.DBMmatchingValue,
.DBMnodeValue{
	font-family: var(--font-monospace);
	padding: 2px 0px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	min-width: 8px;
	flex-grow: 1;
}
.DBMtrayOpen,
.DBMtrayClosed{
	cursor: pointer !important;
}
.DBMdisabled{
	cursor: default !important;
}
.DBMmessage{
	text-align: center;
	border: none;
	color: var(--grey-400);
	letter-spacing: 0.05em;
	max-height: calc(100% - 24px);
	font-size: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
.DBMdeleteMatchingItem,
.DBMcannotDeleteListItem,
.DBMdeleteListItem{
	display: inline;
	cursor: pointer;
	text-align: right;
	padding-right: 16px;
}
.DBMcannotDeleteListItem{
   color: var(--grey-400);
}
.DBMlistRow{
	display: flex;
	align-items: center;
}
.DBMlistRow > div{
	display: flex;
	align-items: center;
}
.DBMmatchingRule::before{
	content: url(/DBM/images/DBMmessageDefId.svg) !important;
}
.DBMdatabaseSelect{
	font-family: var(--font-monospace);
	width: 20% !important;
}
.DBMtable::before{
	content: url(/DBM/images/DBMtable.svg);
	margin-right: 6px;
	height: 16px;
	width: 16px;
}
.DBMdisabled{
	opacity: 0.5;
	cursor: default !important;
}
.DBMimportListContent .DBMlistRow:hover,
.DBMtoFileContent .DBMlistRow:hover,
.DBMfromFileContent .DBMlistRow:hover{
	background-color: rgba(179, 221, 245, 0.25);
}

.DBMtoFileContent .DBMlistRow,
.DBMfromFileContent .DBMlistRow{
	cursor: pointer;
}
.DBMqueryButton{
	margin-top: 12px;
	display: flex;
	justify-content: end;
	align-items: end;
}
.DBMdatabaseSkeleton{
	display: grid;
	grid-template-columns: 100px 1fr;
}
.DBMdatabaseSkeleton *{ 
	padding: 12px;
}
.DBMdatabaseSkeleton .FORMlabel{
	text-align: right;
}
.DBMdatabaseDiv{
	border: 1px solid var(--grey-400);
	border-radius: var(--border-radius);
	padding: 12px;
}
.DBMfromFileInput{
	display: grid;
	grid-template-columns: 1fr 42px;
}
.DBMtoFilePathDiv,
.DBMfromFilePathDiv{
	display: grid;
	padding: 8px;
	padding-bottom : 4px;
	border-top: 1px solid var(--grey-400);
}
.DBMtoFilePathDiv{
	grid-template-columns: auto 1fr 54px;
}
.DBMfromFilePathDiv{
	grid-template-columns: auto 1fr 42px 54px;
}
.DBMimportListContent{
	border: 1px solid var(--grey-400);
	border-radius: var(--border-radius);
	flex-grow: 1;
	overflow: auto;
	display: flex;
	flex-direction: column;
	height: calc(100% - 46px);
	padding: 12px;	
}
.DBMfromFile,
.DBMfromDatabase,
.DBMtoFile{
	padding: 12px;
}

.DBMexportExecute{
   margin: 12px 4px;
   float: right;
}

.DBMexportExplain{
	margin-bottom: 10px;
}
.DBMexportOverwriteWarning{
	margin-bottom: 10px;
}
.DBMexportContainer{
	height: 100%;
	display: flex;
	flex-direction: column;
}

.DBMalignMiddle{
	display: flex;
   align-items: center;
   justify-content: flex-start;
}

.DBMexporter .POPpopoutCard-content{
	height: calc(100% - 61px - 32px - 32px);
	overflow: hidden;
}

.DBMapiAndDatasource{
	display: grid;
	margin-bottom: 5px;
	grid-template-columns: auto 1fr 1fr;
	grid-column-gap: 20px;
	grid-column-gap: 20px;
}
.DBMexportInputContainer{
   display: grid;
	margin-bottom: 5px;
   grid-template-columns: auto 1fr auto 1fr;
   grid-column-gap: 20px;
   grid-column-gap: 20px;
}
.DBMexportInputContainer div{
   display: flex;
   align-items: center;
   justify-content: flex-start;
}
.DBMexportSqlContainer{
   height: fit-content;
	min-height: 100px;
	max-height: 400px !important;
	border-radius: var(--border-radius);
	border: 1px solid var(--grey-400);
	flex-grow: 1;
}
.DBMsuccessFeedback{
	padding: 5px;
	color: green;
	overflow-wrap: break-word;
}
.DBMerrorFeedback{
	padding: 5px;
	color: red;
	overflow-wrap: break-word;
}

.DBMexportSqlContainer .cm-s-default {
   min-height: 150px;
}
.DBMexportSqlContainer .CodeMirror.cm-s-default > .CodeMirror-scroll{
	min-height: 150px;
}

#DBMsqliteWindow {
	width: auto !important;
}

.DBMexportButtonRight{
	width: 100%;
	text-align: right;
}

.DBM-popup {
	background-color: #f2f2f2;
	border: 1px solid #ccc;
	padding: 20px;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

.DBM-code-examples {
	margin-bottom: 20px;
}

.DBM-code-examples pre {
	background-color: #333;
	color: #fff;
	padding: 10px;
	border-radius: 5px;
	overflow-x: auto;
	max-width: 100%;
}

.DBM-table-header {
	font-weight: bold;
}

.DBM-table-container {
	max-height: 200px; /* Set a maximum height for scrolling */
	overflow-y: auto; /* Add vertical scrollbar when the content exceeds the height */
}

.DBM-table {
	width: 100%;
	border-collapse: collapse;
}

.DBM-table th,
.DBM-table td {
	border: 1px solid #ccc;
	padding: 10px;
	text-align: left;
}

.DBM-table th {
	background-color: #f2f2f2;
}

.DBMcode-container {
	position: relative;
}

.DBMcopy-icon {
	position: absolute;
	top: 5px; /* Adjust the top and right values to position the icon as desired */
	right: 5px;
}

@keyframes flash {
	0% { opacity: 1; }
	50% { opacity: 0.5; }
	100% { opacity: 1; }
}

.DBMflash-animation {
	animation: flash 0.5s;
}

.DBM-button {
	background-color: #007BFF;
	color: #fff;
	padding: 10px;
	border: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	border-radius: 4px;
}

.DBM-button:hover {
	background-color: #0056b3;
}

.DBMcopyFeedback {
	float: right;
	color: var(--green-active);
}

.DBMusername{
	width: 43% !important;
}

.DBMpassword{
	width: 43% !important;
}

.DBMdatabase {
	width: 43% !important;
}

.cm-DEPdeprecated {
   text-decoration: line-through;
   color: var(--grey-600) !important;
}
.DETrelatedMessagesLink{
	color: var(--blue);
	cursor: pointer;
	text-decoration: none;
}
.DETrelatedMessagesLink:hover{
	text-decoration: underline;
}
.DETrelatedModalInfo{
	margin-bottom: 15px;
}
.DETmessageList{
	height: 450px;
	overflow-y: auto;
}
.DETmodal {
	overflow: hidden;
	column-gap: 24px;
	row-gap: 18px;
	display: grid;
	grid-template-rows: 1fr;
	row-gap: 14px;
}
.DETlistView{
	display: grid;
	grid-template-rows: 1fr 1fr;
	row-gap: 24px;
	position: relative;
	height: 100%;
	z-index: 1;
	width: 440px; 
	overflow: hidden;
	padding-left: 0px;
}
.DETtitle {
	font-family: var(--font-buttons);
	font-weight: 500;
	color: var(--grey-600) !important;
	letter-spacing: 0.05em;
	font-size: 11px;
	user-select: none;
	margin-top: 6px;
}
.DETcomponentRowFlex > *{
	display: flex; /* Use flexbox */
	/* justify-content: center; Center horizontally */
	/* align-items: center; Center vertically */
	/* padding-left: 12px; */
 }
 .DETcomponentRowFlex{
	/* background-color: var(--grey-200) !important; */
 }
.DETcomponentRow{
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 18px;
	/* padding: 12px; */
	/* padding-bottom: 12px; */
	padding: 8px;
	padding-top: 7px;
	/* padding-right: 2px; */
	/* padding-top: 10px; */
	/* border-bottom: 0.5px solid var(--grey-400); */
	/* border-radius: var(--border-radius); */
}
.DETswitchTarget{
	display: grid;
	grid-template-columns: auto 1fr;
	padding-left: 4px;
	padding-top: 6px;
}
.DETswitchTarget .TOGswitchDiv{
	margin-left: 0px;
}
.DETswitchRow{
	display: grid;
	grid-template-columns: auto 1fr;
}
.DETtimeBox{
	border: 1px solid var(--grey-400);
	border-radius: var(--border-radius);
}
.DETrowBox{
	padding: 12px;
	padding-right: 24px;
	background: var(--white);
	border: 1px solid var(--grey-400);
	border-radius: var(--border-radius);
}
.DETcomponentName{
	color: var(--grey-600);
	/* font-size: 13px; */
	font-weight: 500;
	font-size: 14px;
	text-decoration: unset;
	font-family: var(--font-monospace);
}
.DETcomponentName:hover{
	color: var(--blue);
	text-decoration: underline;
}
.DETactionsGrid{
	display: grid;
	grid-template-rows: auto 42px auto auto auto auto 1fr;
	row-gap: 12px;
}
.DETlogSizeGrid{
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 12px;
	padding: 4px;
	padding-bottom: 8px;
	padding-top: 12px;
}
.DETiconTimePair {
	display: grid;
	grid-template-rows: auto 1fr;
	row-gap: 6px;
	padding-left: 4px;
	padding-top: 4px;
}
.DETviewRow{
	display: grid;
	grid-template-columns: 1fr 116px 113px;
	column-gap: 12px;
	padding-left: 4px;
	/* padding-top: 6px; */
}
.DETviewBox{
	display: grid;
	grid-template-columns: 1fr auto;
	padding: 4px;
	/* padding-bottom: 24px; */
	/* padding-top: 24px; */
}
.DETdiv{
	display: grid;
	border: 1px solid var(--grey-400);
	border-radius: var(--border-radius);
	margin-bottom: 24px;
}
.DETiconTimeDiv{
	display: grid;
	grid-template-columns: auto auto 1fr;
	padding: 6px;
}
.DETcontainingDiv{
	padding: 2px;
	padding-left: 8px;
	padding-right: 8px;
	border: 1px solid var(--grey-400);
	border-radius: var(--border-radius);
	margin-bottom: 24px;
	background-color: white;
}
.DETtime {
	font-family: var(--font-monospace);
	color: var(--blue-dark);
	padding-top: 8px;
}
.DEThidden{
	display: none !important;
}
.DETheader{
	font-size: 11px;
	display: grid;
	grid-template-columns: auto auto  1fr auto;
	align-items: center;
	column-gap: 16px;
   border-bottom: solid 1px var(--grey-400);
	padding-left: 16px;
	padding-right: 24px;
}
.DETfooter .DETtitle{
   font-size: 10px;
}
.DETfooter {
   font-size: 11px;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	column-gap: 16px;
   border-top: solid 1px var(--grey-400);
	padding: 6px;
	padding-top: 2px;
	padding-left: 18px;
	padding-right: 12px;
}
.DETfooterContents {
	display: flex;
	align-items: baseline;
	column-gap: 8px;
}
.DETlocation{
	color: var(--grey-600);
}
.DETcomponentLink{
   content : url("../LOG/icons/NewWindow.svg");
   display :inline;
	opacity: 0.6;
	width: 40px;
	/* padding-right: ; */
	user-select: none;
 }
 .DETcomponentLink:hover {
   cursor: pointer;
	opacity: 1;
 }
 .DETnoRelated{
	color: var(--grey-400);
	text-align: center;
 }
 .DETupstreamHeader{
	display : grid;
   grid-template-columns: 1fr auto;
	column-gap: 12px;
   border-bottom: solid 1px var(--grey-300);
 }

.RELlogEntry,
.DETlogEntry{
   display : grid;
   grid-template-columns: auto 1fr;
	column-gap: 12px;
	padding: 0px 16px;
	cursor: pointer;
	user-select: none;
}
 .DETentrySelected{
	background-color: rgba(var(---blue-light), 0.7) !important;
	border-radius: var(--border-radius);
	box-sizing: border-box;
 }
 .RELlogEntry:hover,
 .DETlogEntry:hover {
   background-color: rgba(var(---blue-light), 0.5) !important;
	border-radius: var(--border-radius);
	box-sizing: border-box;
 }
.DETentrySelected.DETupstreamEntry:hover,
.RELentrySelected.RELlogEntry:hover,
.DETentrySelected.DETlogEntry:hover{
   background-color: rgba(var(---blue-light), 0.9) !important;
 }
 .DETlistDiv{
	background: var(--white);
	border: 1px solid var(--grey-400);
	border-radius: var(--border-radius);
	margin-top: 12px;
	overflow: auto;
 }
.RELlistDiv .RELlogEntry:nth-child(odd),
.DETlistDiv .DETlogEntry:nth-child(odd) {
	background-color: var(--grey-200); /* Background color for even items */
 }
 /* Style the odd items (2nd, 4th, 6th, etc.) */
.RELlistDiv .RELlogEntry:nth-child(even),
.DETlistDiv .DETlogEntry:nth-child(even) {
	background-color: var(--white); /* Background color for odd items */
 }
 .DETupstreamMessagesContainer,
 .DETrelatedMessagesContainer{
	overflow: hidden;
	height: 100%;
	display: grid;
	grid-template-rows: auto 1fr;
 }
 .DETlayout{
	display: grid;
	grid-template-rows: 1fr auto;
	height: 100%;
 }
.DETwindow .POPpopoutCard-content{
	height: calc(100% - 60px);
	box-sizing: border-box;
	padding : 24px;
	padding-left : 32px;
	padding-right : 32px;
	padding-top: 14px;
	background: var(--grey-200);
}
.DETwindow .POPpopoutCard-title *{
	/* font-weight: 500; */
	/* font-size: 14px; */
}
.DETwindow .POPpopoutCard-header{
	/* background: var(--grey-200); */
	/* border-bottom: unset; */
	/* display: grid; */
	/* grid-template-columns: 80px 1fr; */
}
.DETdetailedHeader{
	display: grid;
	grid-template-rows: 1fr auto;
	background-color: var(--grey-200) !important;
}
.DETdetailedDiv{
	display: grid;
	grid-template-columns: 244px 1fr ;
	column-gap: 18px;
	overflow: hidden;
	height: 100%;
}
.DETdetailPrev{
}
.DETdetailContentGrid {
	font-family: var(--font-monospace);
	background-color: var(--white);
	border: 1px solid var(--grey-400);
	border-radius: var(--border-radius);
	overflow: hidden;
}
.DETdetailContentGrid .LOGdetailTypeIcon{
	position: sticky;
	top: 0;
}
.DETdetailContentDiv{
	padding-top: 12px;
}
.DETmessageDiv{
	padding: 2px;
}
.DETdetailContent{
	padding: 18px;
	padding-top: 12px;
	padding-left: 12px;
	column-gap: 12px;
	display: grid;
	grid-template-columns: auto 1fr;
	white-space: pre;
	overflow: auto;
	line-height: 16px;
}
.DETheaderGrid{
	display: grid;
	grid-template-rows: 1fr auto;
	column-gap: 12px;
}
.DETstatusRow{
	padding: 8px;
	padding-top: 16px;
	padding-bottom: 16px;
	/* border-bottom: 0.5px solid var(--grey-400); */
}
.DETstatusRow .DETtitle{
	margin-top: 0px;
}
.DETstringView{
	padding-bottom: 4px;
	height: 42px !important;
	padding-left: 40px !important;
	color: var(--grey-600) !important;
}
.DETstringView.FORMselectBox:hover{
	color: var(--blue)  !important;
}
.DETrelated,
.DETdownloadLink{
	text-decoration: none;
}

.DETnoBorder{
	border: none !important;
}
.DETarrowsGrid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	background-color: var(--grey-200) !important;
	column-gap: 12px;
}
.DETarrowFont{
	font-size: 16px;
}
.DETmodal .TOGbutton{
	background-color: var(--white);
}
.DETarrow{
	cursor: pointer;
	text-decoration: none;
	user-select: none;
	background-color: var(--white);
	padding: 12px;
	margin-top: 2px;
	/* border: 1px solid var(--grey-400); */
	border: 1px solid var(--grey-300) !important;
	border-radius: var(--border-radius);
}
.DETdetailContentGrid{
	display: grid;
	grid-template-rows: auto 1fr auto;
}
.DETrightSide{
	display: grid;
	grid-template-rows: auto 1fr;
	row-gap: 14px;
	overflow: hidden;
}
.DETcellPreview{
   white-space : nowrap;
   overflow: hidden;
	color: var(--grey-800);
 }
 .DETcellTime,
 .DETcellPreview {
	font-family: var(--font-monospace);
	margin-top: 6px;
	margin-bottom: 4px;
	text-align: left;
 }
 .DETtime{
	min-width: 90px;
 }
 .DETrowBox,
.DETarrow,
.DETexport,
.DETreposition,
.DETresubmit,
.DETdownloadLink,
.DETwrap {
	display: flex;
	align-items: center;
	font-family: var(--font-buttons);
	column-gap: 12px;
	cursor: pointer;
	color: var(--grey-600);
}
.DETrelated:hover *,
.DETrelated:hover,
.DETrelatedMessages:hover,
.DETarrow:hover *,
.DETexport:hover,
.DETexport:hover .DETtoolbarIcon,
.DETreposition:hover,
.DETreposition:hover .DETtoolbarIcon,
.DETresubmit:hover,
.DETresubmit:hover .DETtoolbarIcon,
.DETdownloadLink:hover,
.DETdownloadLink:hover .DETtoolbarIcon,
.DETwrap:hover,
.DETwrap:hover .DETtoolbarIcon{
	color: var(--blue);
}

.DETmodalReposition,
.DETmodalExport {
	max-width: 650px;
}
.DETbuttons{
   display: grid;
	grid-template-columns: auto auto;
	justify-content: end;
	margin-top: 32px;
	margin-right: 0;
	margin-left: auto;
}
.DETexportModal .DETbuttons{
	margin-top: 18px;
}
.DETtoComponent {
	margin-bottom: 16px;
}
.DETdisabled.RELlink{
	color: var(--grey-600) !important;
	text-decoration: none !important;
}
.DETdisabled {
	opacity: 0.5;
}
.DETdisabled * {
	color: var(--grey-600) !important;
}
.DETdisabled:hover {
	color: var(--grey-600) !important;
	cursor: default;
}

.DETlogEditor {
	border: 1px solid var(--grey-400);
	border-radius: var(--border-radius);
	overflow-y: auto;
	height: 100%;
	box-sizing: border-box;
}
.DETresubmitModal{
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	height: 100%;
	overflow: hidden;
}
.DETmodalResubmit .POPpopoutCard-content{
	box-sizing: border-box;
	height: calc(100% - 61px);
}
.LOGeditorDiv{
	overflow: hidden;
}

.DETcomponentContainer {
	/* display: flex; */
	/* align-items: center; */
	/* float: left; */
}
.DETmessageLoading{
   background: transparent url(/DET/DETspinner.gif) repeat-y top left;
   /* content: url(/DET/DETspinner.gif); */
}
.DETdetailCard .POPpopoutCard-header {
	/* gap: 24px; */
}
.DETdetailCard .POPpopoutCard-header .POPpopoutCard-title {
	/* flex-grow: 1; */
}
.DETdateTime{
	text-align: left !important;
	padding: 12px !important;
 }
 .DETtitleDiv{
	padding: 12px;
	padding-left: 4px;
	padding-top: 24px;
	font-size: 14px;
	font-weight: 500;
 }
 .DETcomponentHeader{
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 12px;
	padding-top: 2px;
 }
.DETgrey{
	color: var(--grey-500);
	display: inline;
	padding-left: 4px;
	margin-right: 12px;
	margin-top: 8px;
	margin-left: 0px;
	height: 27px;
 }
 .DETviewAsRow{
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 24px;
	height: 42px;
	padding-left: 4px;
}

.DETerrorFeedback{
	margin-top: 8px;
	height: 16px;
	color: var(--red);
}
.DEVheader {
   border-bottom: solid 1px var(--grey-400);
   background-color: #ebf3f6;
   box-sizing: border-box;
   height: 68px;
   flex-shrink: 0;
   padding: 8px 24px;
   display: flex;
   align-items: center;
   column-gap: 16px;
}

.DEVheading {
	font-family: var(--font-buttons);
	color: var(--blue-dark);
	font-size: 16px;
	font-weight: 500;
	flex-grow: 1;
}

.DEVwrapper {
	background: #D2E4EC;
	padding: 24px;
}

.DEVbody{
	border-radius: 4px;
	border: solid 1px var(--grey-400);
	background-color: var(--white);
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
	border: none;
	max-width: 1000px;
	padding: 32px;
}

.DEVContainer{
	height: 100vh;
   display: grid;
   grid-template-rows: auto 1fr;
   background: #D2E4EC;
   color: var(--grey-800);
}

a.DIFFoption:hover {
   cursor: pointer;
}

span.DIFFoption {
   color: var(--grey-400);
	margin-left: 4px;
	margin-right: 4px; 
}

.DIFFcurrentHeader {
   background-color: rgba(191, 233, 233, 0.75);
}

.DIFFcurrentText {
   background-color: rgba(224, 245, 245, 0.75);
}

.DIFFincomingHeader {
   background-color: rgba(209, 215, 250, 0.75);
}

.DIFFincomingText {
   background-color: rgba(237, 239, 249, 0.75);
}

.CodeMirror .DIFFwidget {
   background-color: white;
   padding-bottom: 3px;
}

.CodeMirror .DIFFwidget a {
   font-family: var(--font-buttons);
   font-size: 10px;
	font-weight: 500;
   color: var(--grey-500);
   letter-spacing: 0.02em;
}

.CodeMirror .DIFFwidget a:hover {
   color: var(--blue);
}

.DIFFcurrentHeader ~ pre span span:after {
   content: " (Current Change)";
   color: #013134;
   opacity: 0.6;
   font-size: 10px;
   font-family: var(--font-sans);
   margin-left: 6px;
   letter-spacing: 0.02em;
}

.DIFFincomingHeader ~ pre span span:after {
   content: " (Incoming Change)";
   color: #000638;
   opacity: 0.6;
   font-size: 10px;
   font-family: var(--font-sans);
   margin-left: 6px;
   letter-spacing: 0.02em;
}

.cm-s-ifware .DIFFcurrentHeader ~ pre span {
   color: var(--teal-darker);
   font-weight: 400;
}

.cm-s-ifware .DIFFincomingHeader ~ pre span span {
   color: var(--indigo-darker);
   font-weight: 400;
}

.DRGdragSortListItem--Dragging {
  opacity: 0.25;
}
.DRGdragSortListItem--Draggable{
  cursor: move;
}

.DTAGrow{
   display: grid;
   grid-template-columns: 120px 1fr;
}
.DTAGmodal .BUTTONgroup{
   justify-content: right;
}
.DTAGsetupTags,
.DTAGtags{
   border-radius: 14px;
   letter-spacing: 0.03em;
   cursor: pointer;
   font-family: var(--font-buttons);
   font-size: 11px;
   font-weight: 500;
   line-height: 1em;
   padding: 8px 9px;
   font-size: 10.5px;
   text-decoration: unset;
   user-select: none;
   margin-right: 5px;
   opacity: 80%;
   box-sizing: border-box;
   height: 29px;
}
.DTAGsetupTags:hover{
   background-color: rgba(0, 0, 0, .05);
}
.DTAGsetupTags{
   color: rgba(156, 105, 222, 1.0);
   border: 1px solid rgba(156, 105, 222, 0.5);
   background-color: rgba(156, 105, 222, 0.1);
   font-weight: 600;
   white-space: nowrap;
}
.DTAGselected{
   font-weight: 600;
   border: 1px solid rgba(0, 0, 0, .07) !important;
   background-color: rgba(0, 0, 0, .07);
   box-shadow: inset 0 2px 3px rgba(0, 0, 0, .25);
   opacity: unset;
}
.DTAGerrorFeedback{
   padding-top: 8px;
   color: var(--red);
}
.DTAGlabel{
   margin-top: 8px;
}
.DTAGtagWindow {
   display: flex;
   flex-wrap: wrap;
   max-height: 70px;
   overflow-y: auto;
   gap: 5px;
   transition: all 0.5s ease-in-out;
}
.ECNmodal {
   display: grid;
   grid-template-rows: auto 1fr;
   row-gap: 12px;
   position: relative;
   height: 100%;
}
.ECNrow {
   display: grid;
   grid-template-columns: auto 32px;
}
.ECNtitle{
   font-family: var(--font-buttons);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.02em;
	line-height: 16px;
	color: var(--grey-500);
   margin-bottom: 5px;
}
.ECNsourcesTable,
.ECNreceiversTable{
   display: grid;
   grid-template-rows: auto 1fr auto auto;
   /* border: 1px solid var(--grey-400);
   border-radius: var(--border-radius); */
   background: var(--grey-100);
   /* padding: 1px; */
}
.ECNtables {
   display: grid;
   grid-template-columns: 1fr 1fr;
   column-gap: 36px;
}
.ECNdetails,
.ECNdelete,
.ECNrow a {
   color: var(--blue);
   text-decoration: none;
   cursor: pointer;
   padding-left: 2px;
   padding-right: 2px;
}
.ECNdetails:hover,
.ECNdelete:hover,
.ECNrow a:hover {
   text-decoration: underline;
}
.ECNaddSourceComp,
.ECNaddReceiverComp{
   position: relative;
   cursor: pointer;
}
.ECNsourcesHeader,
.ECNreceiversHeader{
   display: flex;
   align-items: center;
   padding: 12px;
   background: var(--grey-200);
   border-bottom: 1px solid var(--grey-400);
   border: 1px solid var(--grey-400);
   border-top-left-radius: var(--border-radius);
   border-top-right-radius: var(--border-radius);
}
.ECNrowSourceChild,
.ECNrowReceiverChild{
   display: flex;
   align-items: center;
   padding: 12px;
   border-bottom: 1px solid var(--grey-400);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.ECNrowReceiverCompSelection,
.ECNrowSourceCompSelection{
   display: flex;
   align-items: center;
}
.ECNdelete {
   background: var(--grey-200);
   color: var(--grey-600);
   text-align: center;
}
.ECNdeletetableCell{
   text-align: left;
   border-right: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: var(--grey-200);
   border: 1px solid var(--grey-400);
   border-top: 0;
   border-right: 0px;
   user-select: none;
}
.ECNerror{
   color: red;
}
.ECNtargetSelect {
   width: auto !important;
   cursor: pointer;
}
.ECNsourcesList, 
.ECNreceiversList {
   border-bottom: 1px solid var(--grey-400);
   min-height: 30vh;
   max-height: 30vh;
   overflow-y: auto;
   border: 1px solid var(--grey-400);
   border-top: 0px;
   background: white;
}
.ECNemptyDiv {
   background: var(--grey-200) !important;
   border: 1px solid var(--grey-400);
   border-left: 0;
   border-top-right-radius: 4px;
}
.ECNemptySources,
.ECNemptyReceivers {
   text-align: center;
   margin-top: 20px;
   color: #999;
   font-style: italic;
}
.ECNselectionRow {
   display: flex;
   gap: 12px;
}
.ECNtargetDivInfo {
   display: grid;
   grid-template-columns: auto auto 1fr auto;
   column-gap: 24px;
   padding: 24px;
   padding-top: 0px;
   padding-bottom: 0px;
   height: 66px;
   border: 1px solid var(--grey-400);
   border-radius: var(--border-radius); 
   background: var(--grey-100);
   align-items: center; 
   flex-wrap: wrap; 
   margin-bottom: 24px;
}
.ECNaddSource, 
.ECNaddReceiver {
   padding: 12px;
   background: var(--grey-200);
   border: 1px solid var(--grey-400);
   border-top: 0px;
   border-bottom-left-radius: var(--border-radius);
   border-bottom-right-radius: var(--border-radius);
}
.ECNtarget {
   border-radius: var(--border-radius);
}
.ECNreceiverName,
.ECNsourceName{
   flex-grow: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.ECNreceiverLink,
.ECNsourceLink{
   margin-left: 10px;
   color: var(--grey-500);
}
.ECNreceiverLink a,
.ECNsourceLink a{
   text-decoration: none;
   color: var(--blue);
}
.ECNsourcesHeader,
.ECNreceiversHeader,
.ECNtargetInfoHeader{
   font-weight: var(--semibold);
}
.ECNbuttonRow{
   display: grid;
   grid-template-columns: 1fr auto;
   margin-top: 24px;
}
.ECNcomponentDetails{
	display: grid;
	grid-template-columns: auto auto auto;
   color: var(--grey-500);
}
.ECNwarning{
   font-style: italic;
   color: #999;
}

.EDCloadingMessage{
   margin-top: 80px;
   text-align: center;
	color: var(--grey-600);
	height: 100%;
}
.EDCbuttons{
	position: sticky;
	bottom : 0px;
   display: grid;
	grid-template-columns: auto auto;
	justify-content: end;
	margin-top: 12px;
	margin-right: 0;
	margin-left: auto;
}
.EDCcontainer {
	background: var(--grey-200);
	padding: 12px 18px;
	border: 1px solid var(--grey-400);
	border-radius: var(--border-radius);
	margin-bottom: 12px;
}
.EDCcontainer:hover{
	background-color: #F8FCFE;
	border: 1px solid var(--blue);
	box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
}
.EDCheader{
   font-family: var(--font-buttons);
	color: var(--grey-500);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.05em;
   margin-bottom: 4px;
}
.EDClistHeader{
   margin-top: 12px;
}
.EDCcolumnGrid{
   display: grid;
   grid-template-columns: 1fr 1fr;
   column-gap: 24px;
}
.EDCnameDiv{
	display: grid;
	column-gap: 12px;
	grid-template-columns: 1fr 50px;
}
.EDCwindow{
	height: 100%;
	overflow: hidden;
}
.EDCwindow *{
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
 }
.EDCeditBanner{
	display: flex;
	align-items: center;
	position: sticky;
	top: 0px;
	height: 42px;
	z-index: 10;
	background: var(--white);
	margin-bottom: 16px;
}
.EDCnameEdit{
	width: 400px !important;
	min-width: 50px;
	flex-shrink: 1;
	margin-right: 12px;
	color: var(--blue-dark);
	font-weight: 400;
	font-size: 16px;
	white-space: nowrap;
}
.EDCdescriptionEdit{
	min-width: 70px;
	flex-grow: 1;
	color: var(--grey);
	font-weight: 400;
	font-size: 12px;
	margin-right: 12px;
}
.EDCsaveEditGroup{
	flex-shrink: 0;
	float: right;
}
.EDCwindowInner{
	height: calc(100% - 58px);
	overflow: hidden;
}
.EDCeditChildrenDiv{
	overflow: auto;
	max-height: calc(100% - 26px);
}
.EDCchildRow {
	display: grid;
	grid-template-columns: 110px 220px 4fr 3fr 32px;
}
.EDCchildHeaders div{
	padding: 6px 8px;
	font-size: 9px;
	font-family: var(--font-buttons);
	color: var(--grey-600);
	letter-spacing: 0.05em;
	line-height: 1.25em;
}
.EDCchildHeaders{
	position: sticky;
	top : 0px;
	border: 1px solid var(--grey-400);
	background: var(--grey-200);
	align-items: center;
	min-height: 28px;
	box-sizing: border-box;
}
.EDCchildrenDiv .EDCmatchingHeader{
	padding: 2px 4px;
	font-size: 9px;
	font-family: var(--font-buttons);
	color: var(--grey-600);
	letter-spacing: 0.05em;
	background: var(--grey-200);
	border-top: 1px solid var(--grey-400);
	border-bottom: 1px solid var(--grey-400);
	border-right: 1px solid var(--grey-400);
}
.EDCaddEditRow{
	display: grid;
	grid-template-columns: 32px 1.0fr;
	border: 1px solid var(--grey-400);
	background: var(--grey-100);
	align-items: center;
	height: 24px;
	position: sticky;
	bottom : 0px;
}
.EDCeditCell {
	text-align: left;
	border-left: 0px;
	border-right: 0px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.EDCeditCell .FORMinput,
.EDCeditCell .FORMselectBox {
	height: 32px;
	border-radius: 0px;
	border-left: 0px;
	border-right: 1px solid rgba(var(---grey-300), 0.65);
	border-bottom: 0px;
}
.EDCeditCell .FORMinput:focus,
.EDCeditCell .FORMselectBox:focus {
	outline: none;
	border: 2px solid var(--blue);
}
.EDCchildRow.EDCadded {
	outline: none;
	border: 2px solid var(--blue-light);
}
/* "Delete row" column */
.EDCeditCell:first-child {
	border-left: 1px solid var(--grey-400);
	border-bottom: 0px;
	background: var(--grey-100);
}
.EDCeditCell:last-child {
	border: 1px solid var(--grey-400);
	border-bottom: 0px;
	border-left: none;
	background: var(--grey-100);
}
.EDCwindowContent .POPpopoutCard-content{
	overflow-y: hidden;
	height: calc(100% - 61px);
	box-sizing: border-box;
}
.EDCmodal{
	height: 100%;
}
.EDCmoveRow {
	border: 1px solid var(--grey-400);
	border-bottom: 0px;
	border-right: 1px solid rgba(var(--grey-300), 0.65);
	background-color: var(--grey-100);
	color: var(--grey-600);
}
.EDCwindowError {
	color: red;
	margin-bottom: 18px;
}

.EDIcomposite.EDIchildrenDiv{
   display: grid;
	grid-template-columns: 0.7fr 1.4fr 50px;
}
.EDIchildrenDiv{
   display: grid;
	grid-template-columns: 0.7fr 1.4fr 50px 50px;
	border-left: 1px solid var(--grey-400);
}
.EDIopen,
.EDIclosed,
.EDInodeValue{
   cursor: pointer;
	flex-grow: 1;
}
.EDIvmdFile::before{
	content: url(/EDI/images/EDIschemaHL7.svg) !important;
}
.EDImatchingRule::before{
	content: url(/EDI/images/EDImessageDefId.svg) !important;
}
.PRJicon-file-untracked.EDIvmdFile::before{
	content: url(/EDI/images/EDIschemaHL7Untracked.svg) !important;
}
.PRJicon-file-renamed.EDIvmdFile::before,
.PRJicon-file-modified.EDIvmdFile::before{
	content: url(/EDI/images/EDIschemaHL7Modified.svg) !important;
}
.EDIsegmentDefinitions::before{
	content:url(/TREE/images/EDIiconFolderRepeating.svg);
	margin-right: 6px;
	height: 16px;
	width: 16px;
}
.WNDtitleIcon.EDIsegmentDefinitions::before{
	content: url(/TREE/images/EDIiconFolderRepeating.svg);
}
.EDIclosed > .EDInameNode > .EDIsegmentDefinitions::before,
.EDIclosed > .EDIsegmentDefinitions::before{
	content: url(/TREE/images/EDIiconFolderRepeating.svg);
}
.EDImessageDef::before{
	content: url(/TREE/images/EDIiconMessage.svg);
	margin-right: 6px;
	height: 16px;
	width: 16px;
}
.EDIcompositeDef::before{
	content: url(/TREE/images/EDIiconComposite.svg);
	margin-right: 6px;
	height: 16px;
	width: 16px;
}
.EDIsegmentDef::before{
	content: url(/TREE/images/EDIiconSegment.svg);
	margin-right: 6px;
	height: 16px;
	width: 16px;
}
.EDIchildlist{
   padding-left: 24px;
}
.EDIclosed > .EDIchildrenDiv,
.EDIclosed > .EDIparentDiv,
.EDIclosed > .EDIrowDiv,
.EDIclosed > .EDInodeRowDiv,
.EDIclosed .EDIchildlist{
   display: none;
}
.EDInameNode,
.EDIchildDescription,
.EDIcell,
.EDInodeValue{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	min-width: 8px;
}
.EDIcell{
	border: 1px solid var(--grey-400);
	border-left: 1px solid rgba(var(---grey-300), 0.65);
   border-top: 0;
   border-right: 0;
	background: var(--white);
	padding: 6px 8px;
	display: flex;
	align-items: center;
}
.EDIcell:first-child {
	border-left: 1px solid var(--grey-400);
}
.EDIcell:last-child {
	border-right: 1px solid var(--grey-400);
}
.EDIopenNode svg {
	width: 10px;
	height: 10px;
	opacity: 0.6;
	padding-left: 4px;
}
.EDIopenNode:hover svg{
	opacity: 1;
}
.EDInodeRowDiv,
.EDIrowDiv{
	display: contents;
}
.EDIsegmentgroupFolder *,
.EDImessageFolder *,
.EDIsegmentFolder *,
.EDIcompositeFolder *,
.EDIsectionTitle *,
.EDInameNode *{
	display: inline-block;
}
.EDIbuttonGroup,
.EDIdoneEditList,
.EDIeditListWindow,
.EDIeditMatchingWindow,
.EDIeditNodeWindow{
	float: right;
}
.EDInodeWindowClass{
	display: flex;
}
.EDIeditBanner{
	display: flex;
	align-items: center;
	position: sticky;
	top: 0px;
	height: 42px;
	z-index: 10;	
	background: var(--white);
	margin-bottom: 8px;
	padding-left: 8px;
}
.EDInodeName{
	flex-shrink: 1;
	margin-right: 12px;
	color: var(--blue-dark);
	font-weight: 400;
	font-size: 16px;
	white-space: nowrap;
}
.EDInodeDescription{
	flex-grow: 1;
	color: var(--grey);
	font-weight: 400;
	font-size: 12px;
	margin-right: 12px;
}
.EDIcomposite .EDIchildRow {
	display: grid;
	grid-template-columns: 32px 32px 1fr 1fr 50px 32px;
}
.EDIchildRow {
	display: grid;
	grid-template-columns: 32px 32px 1fr 1fr 50px 50px 32px;
	cursor: default;
}
.EDImatchingHeaders,
.EDImatchingRow{
	display: grid;
	grid-template-columns: 32px 1fr 1fr 32px;
	width: 100%;
	cursor: default;
}
.EDIparentTableDiv{
	display: grid;
	grid-template-columns: 1fr 2fr;
	border-left: 1px solid var(--grey-400);

}
.EDImoveRow {
	border: 1px solid var(--grey-400);
	border-bottom: 0px;
	border-right: 1px solid rgba(var(--grey-300), 0.65);
	background-color: var(--grey-100);
	color: var(--grey-600);
	cursor: move;
}
.EDIeditCell {
	text-align: left;
	border-left: 0px;
	border-right: 0px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.EDIeditCell .FORMinput,
.EDIeditCell .FORMselectBox {
	height: 32px;
	border-radius: 0px;
	border-left: 0px;
	border-right: 1px solid rgba(var(---grey-300), 0.65);
	border-bottom: 0px;
}
.EDIeditCell .FORMinput:focus,
.EDIeditCell .FORMselectBox:focus {
	outline: none;
	border: 2px solid var(--blue);
}
/* "Delete row" column */
.EDIeditCell:first-child {
	border: 1px solid var(--grey-400);
	border-bottom: 0px;
	border-right: 0px;
	background: var(--grey-100);
}
.EDInumber {
	border: 1px solid var(--grey-400);
	border-left: 0px;
	border-bottom: 0px;
	background: var(--grey-100);
}
.EDIeditCell:last-child {
	border: 1px solid var(--grey-400);
	border-bottom: 0px;
	border-left: none;
	background: var(--grey-100);
}
.EDIaddRowMatching,
.EDIaddChild{
	grid-column: 2/3;
	padding: 0px 8px;
	font-size: 9px;
	font-family: var(--font-buttons);
	font-weight: 500;
	cursor: pointer;
	color: var(--blue);
}
.EDIaddMatchingRow,
.EDIaddEditRow{
	display: grid;
	grid-template-columns: 32px 1.0fr;
	border: 1px solid var(--grey-400);
	background: var(--grey-100);
	align-items: center;
	height: 24px;
}
.EDIlistRow{
	display: flex;
	align-items: center;
}
.EDIaddListItem{
	padding-top: 4px;
	font-size: 10px;
	font-family: var(--font-buttons);
	font-weight: 500;
	cursor: pointer;
	color: var(--blue);
}
.EDImessageWarning,
.EDIcannotDeleteListItem,
.EDIdeleteListItem{
	display: inline;
	cursor: pointer;
	text-align: right;
	padding-right: 16px;
}
.EDImessageWarning{
   color: var(--grey-800);
}
.EDIcannotDeleteListItem{
   color: var(--grey-400);
}
.EDIcontent > div:hover{
	background-color: rgba(179, 221, 245, 0.25);
}
.EDIleafNode{
	content: url(/EDI/images/EDIitem.svg);
}
.EDIfolderNode{
	content: url(/EDI/images/EDIfolderOpen.svg);
}
.EDItrayClosed .EDIfolderNode,
.EDIclosed .EDIfolderNode{
	content: url(/EDI/images/EDIfolderClosed.svg);
}
.EDIaccordian{
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: auto;
	cursor: pointer;
}
.EDIwindow *{
	-webkit-user-select: none;
	-moz-user-select: none;  
	-ms-user-select: none;     
	user-select: none;          
 }
.EDIsegmentgroupFolder,
.EDImessageFolder,
.EDIsegmentFolder,
.EDIcompositeFolder {
  height: 30px;
  min-height: 30px;
  display: flex;
  align-items: center;
  width: 100%;
  background-color: white;
}
.EDImessageFolder {
	position: sticky;
	top: 0px;
	bottom: 90px;
 }
 .EDIsegmentgroupFolder {
	position: sticky;
	top: 29px;
	bottom: 60px;
 }
 .EDIsegmentFolder {
	position: sticky;
	top: 59px;
	bottom: 30px;
 }
 .EDIcompositeFolder {
	position: sticky;
	top: 89px;
	bottom: 0px;
 }
.EDIcontent.EDItrayClosed{
	 display: none;
 }
.EDIcontent.EDItrayOpen{
	padding-left: 24px;
}
.EDIhidden{
	display: none;
}
.EDInameMainEditHint{
	color: var(--red);
	font-size: 10px;
	line-height: 12px;
	padding-bottom: 8px;
}
.EDImatchingOrderLink{
	color: var(--blue);
}
.EDIheaderTitle{
	display: flex;
	width: 100%;
}
.EDItitle{
	flex-grow: 1;
	padding-left: 8px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.EDImatchingRulesContainer{
	height: calc( 100% - 52px);
	overflow: auto;
}
.EDImatchingRulesTable{
	display: grid;
	grid-template-columns: 24px 1fr 2fr;
	border-left: 1px solid var(--grey-400);
}
.EDImatchingRulesTable *{
	font-family: var(--font-monospace);
}
.EDIparentTableDiv .EDImatchingHeader,
.EDImatchingRulesTable .EDImatchingHeader,
.EDIchildrenDiv .EDImatchingHeader{
	padding: 2px 4px;
	font-size: 9px;
	font-family: var(--font-buttons);
	color: var(--grey-600);
	letter-spacing: 0.05em;
	background: var(--grey-200);
	border-top: 1px solid var(--grey-400);
	border-bottom: 1px solid var(--grey-400);
	border-right: 1px solid var(--grey-400);
}
.EDImatchingValueEnd,
.EDImatchingValue{
	border: 1px solid var(--grey-400);
	border-left: 0px;
	border-top: 0px;
	padding: 2px 4px;
	display: flex;
	align-items: center;
	font-size: 11px;
}
.EDImatchingValue{
	border-right: 1px solid rgba(var(---grey-300), 0.65);
}
.EDImatchingValueEnd{
	border-right: 1px solid rgba(var(---grey-400), 0.65);
}
.EDImessageRow *{
	display: inline-block;
}
.EDIaddMatchingRow{
	position: sticky;
	bottom : 38px;
}
.EDImatchingHint,
.EDIaddEditRow{
	position: sticky;
	bottom : 0px;
}
.EDImatchingHeaders,
.EDIchildHeaders{
	position: sticky;
	top : 0px;
	border: 1px solid var(--grey-400);
	background: var(--grey-200);
	align-items: center;
	min-height: 28px;
	box-sizing: border-box;
}
.EDImatchingHeaders div,
.EDIchildHeaders div{
	padding: 6px 8px;
	font-size: 9px;
	font-family: var(--font-buttons);
	color: var(--grey-600);
	letter-spacing: 0.05em;
	line-height: 1.25em;
}
.EDIwindowInner{
	height: calc(100% - 50px);
	overflow: auto;
}
.EDIwindow{
	height: 100%;
	overflow: hidden;
	/* padding: 4px; */
	padding-left: 8px;
	padding-right: 8px;
}
.EDIsaveEditGroup{
	flex-shrink: 0;
}
.EDInameMainEdit{
	width: auto !important;
	min-width: 50px;
}
.EDIdescriptionMainEdit{
	width: auto !important;
	min-width: 70px;
}
.EDInodeWindow{
	height: calc(100% - 58px);
	overflow: auto;
}
.EDIparentType,
.EDInameNode *{
	font-family: Monospace;
}
.EDInameNode{
	display: flex;
}
.EDInodeType{
	flex-grow: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: flex;
	align-items: center;
}
.EDIopenNode{
	flex-grow: 0;
}
.EDIboolValue{
	text-align: center;
	justify-content: center;
}
.FORMinput.EDIboolValue input{
	cursor: pointer !important;
}
.EDImatchingRulesDiv{
	margin-right: 12px;
	color: var(--blue-dark);
	font-weight: 400;
	font-size: 16px;
}
.EDImatchingFile{
	flex-grow: 1;
	font-family: var(--font-monospace);
	margin-right: 12px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;	
}
.EDImatchingHint{
	font-family: var(--font-sans);
	font-size: 11px;
	color: var(--grey-600);
	padding-top: 6px;
	background-color: white;
	overflow: hidden;
}
.EDIcontent > div,
.EDIlistRow > div{
	display: flex;
	align-items: center;
}
.EDIlistTitle{
	padding-left: 8px;
}
.EDIaccordian{
	height: calc(100% - 52px);
}
.EDImatchOrderDiv{
	white-space: nowrap;
}
.EDInodeValue{
	font-family: var(--font-monospace);
	padding: 2px 0px;
}

.editor--container {
   position: relative;
   height: inherit;
   width: inherit;
   border-radius: inherit;
}

.EDITfilter,
.edit-editor,
.editor-front-view {
   padding: 6px 24px 6px 6px;
   width: inherit;
   height: inherit;
   max-width: 100%;
   max-height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   white-space: pre;
   background: var(--white);
   box-sizing: border-box;
}

.EDITfilter{
   z-index: 100;
   border: solid 1px var(--grey-300);
   border-radius: var(--border-radius);
   caret-color: var(--grey-700);
   font-family: var(--font-sans);
   color: var(--grey-600);
   resize: none;
   overflow: auto;
   overflow-x: hidden;
   overflow-y: hidden;
   user-select: none;
}
.EDITfilter::placeholder{
   color: var(--grey-400);
}

.edit-editor {
   z-index: 100;
   color: transparent !important;
   border: solid 1px var(--grey-300);
   border-radius: var(--border-radius);
   background: transparent;
   caret-color: var(--grey-700);
   font-family: var(--font-sans);
   resize: none;
   overflow: auto;
   overflow-x: hidden;
   overflow-y: hidden;
}

.highlighted-content {
   overflow: auto;
   overflow-x: hidden;
   overflow-y: hidden;
}

.editor-front-view {
   border-radius: var(--border-radius);
   border: none !important;
}

.ChanTooltip {
   list-style: none;
}
.DASHlabel span font:hover {
   cursor: pointer;
}

EDITfilter,
.edit-editor,
.editor-front-view,
.editor-front-view * {
   font-size: 12px;
}
.edit-editor div,
.editor-front-view div,
.editor-front-view * div {
   color: var(--grey-600);
}
.edit-editor div span,
.editor-front-view div span,
.editor-front-view * div span {
   word-wrap: break-word;
}


.ENCbackground {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(0deg, rgba(0, 52, 101, 1) 0%, rgba(0, 100, 173, 1) 100%);
}

.ENCmodal {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
	width: 620px;
	display: grid;
	grid-template-columns: 1fr;
	border-radius: 4px;
	background: var(--white);
	box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.5);
}

.ENCmodalMainArea {
	padding: 48px 48px 56px 48px;
}

.ENCmainLogoArea {
	position: relative;
	top: -12px;
	display: grid;
	margin-bottom: 24px;
}

.ENCfooter {
	width: 100%;
	height: 120px;
	position: absolute;
	bottom: -120px;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: end;
}

.ENCfooterText {
	color: var(--white);
	font-size: 10px;
	letter-spacing: 0.06em;
	font-family: var(--font-buttons);
	margin: 0px 0px 2px 0px;
	opacity: 0.4;
}

.ENCinterfacewareLogo {
	width: 190px;
	height: 36px;
	opacity: 0.4;
	transition: 450ms ease-out;
}

.ENCloginForm {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 16px;
	align-items: end;
}

input.ENCloginFormInput {
	font-family: var(--font-sans);
	border-radius: var(--border-radius);
	border: 1px solid var(--grey-400);
	font-weight: var(--regular);
	font-size: 12px;
	line-height: 16px;
	padding: 6px 8px;
	color: var(--grey-800);
	width: 100%;
	margin: 0px;
	height: 36px;
	background: var(--grey-100);
	box-sizing: border-box;
}

.ENCsubmitButton {
	display: flex;
	align-items: center;
	justify-content: center;
	/* line-height: 12px; */
	padding: 12px 16px;
}

.ENCkeyLabel{
   margin-bottom: 13px;
}

.ENCerror { /*Error box invisible, remove comment when error section becomes usable*/
	text-align: center;
	border-radius: var(--border-radius);
	font-size: 10px;
	width: 100%;
	padding: 6px;
	margin-top: 12px;
	background: var(--red-lighter);
	color: var(--red-dark);
	display: none;
	box-sizing: border-box;
}

.ENCloginDescription {
	margin-top: 24px;
	color: var(--grey-800);
	font-size: 14px;
}

.ENCloginLegalStatement {
   display: flex;
	font-size: 10px;
	margin-top: 24px;
	color: var(--grey-800);
   justify-content: center;
}

.ENCforgotKeyDiv{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 24px;
}

.ENCforgotKey{
	color: var(--blue);
	text-decoration: none;
   font-size: 10px;
	text-align: center;
}

.ENCforgotKey:hover{
	text-decoration: underline;
}

.ENClabel {
	width: 100%;
	font-weight: var(--semibold);
	font-size: 12px;
	line-height: 16px;
	display: block;
	color: var(--grey-700);
}
.ENVtable{
   display: table;
   width: 100%;
}

.ENVrow{
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
   word-wrap: break-word;
   column-gap: 24px;
   padding-right: 12px;
}

.ENVeditable .ENVrow:hover{
   background-color: var(--grey-300);
   cursor: pointer;
}
.ENVedit{
   user-select: none;
}
.ENVkey{
   font-weight: bold;
   display: table-cell;
   padding: 3px 6px 3px 6px;
}

.ENVvalue{
   display: table-cell;
   font-family: var(--font-monospace);
}
.ENVkey{
   font-family: var(--font-monospace);
}
.ENVformFullWidth input{
   font-family: var(--font-monospace) !important;
}

.ENVstrike {
   text-decoration: line-through 2px;
}

.ENVdoc{
   color: var(--grey-500);
}

.ENVeditForm {
   display: grid;
   grid-template-columns: 1fr 1fr;
   row-gap: 8px;
   background: var(--grey-100);
   padding: 16px;
   margin-top: -16px;
   margin-bottom: 10px;
}

.ENVformFullWidth {
   grid-column: 1/-1;
}

.ENVsection {
   border: solid 1px var(--grey-400);
   border-radius: 4px;
   padding: 18px;
}

.ENVseparator {
   padding: 10px;
}

.ENVsectionTitle {
   font-weight: bold;
   margin: 3px 3px 4px 0;
   padding-bottom: 24px;
   padding-top: 10px;
}

.ENVinfo {
   width: 100%;
   font-weight: var(--semibold);
   font-size: 12px;
   line-height: 16px;
   display: block;
   margin-bottom: var(--label-margin-bottom);
   color: var(--grey-700);
}

.ENVinvalidInput {
   border: 2px solid var(--red) !important;
}

.ENVfeedback, .ENVapiFeedback {
   color: var(--red);
   font-size: 11px;
   line-height: 12px;
   margin-top: 4px;
}

.ENVdelete, .ENVnew, .ENVhide{
   float: right;
}

.ENVnew, .ENVhide {
   margin-top: 26px;
   margin-right: 18px;
}
.ENVtitle{
   padding-left: 10px;
}


.ERRcontainer {
   height: 100vh;
   background: #D2E4EC;
	color: var(--grey-800);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: var(--grey-800);
}

.ERRbody {
	border-radius: 4px;
	border: solid 1px var(--grey-400);
	background-color: var(--white);
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
	border: none;
	text-align: center;
	width: fit-content;
	min-width: 600px;
	max-width: 1000px;
	max-height: 70vh;
	padding: 32px;
	overflow: hidden;
	display: grid;
	grid-template-rows: auto auto 1fr;
	box-sizing: border-box;
}
.ERRheading {
	color: var(--grey-700);
	font-size: 12px;
	margin-bottom: 16px;
	margin-top: 8px;
}
.ERRheading b {
	color: var(--red-dark);
}

.ERRknownPages {
	overflow: auto;
	text-align: left;
	padding: 24px 40px;
	background: var(--grey-100);
	border-radius: 4px;
	box-sizing: border-box;
	color: var(--grey-800);
	border: 1px solid var(--grey-300);
}
.ERRknownPages a,
.ERRknownPages a:hover,
.ERRknownPages a:visited {
	color: var(--blue-dark);
	margin-bottom: 8px;
	display: inline-block;
}

.ESRinformation{
   overflow-wrap: break-word;
   color: var(--grey-600);
   line-height: 1.75;
   max-height: 100px;
   overflow-y: auto;
}
.ESRbuttonGroup{
   justify-content: right;
}
.ESRrepoRow{
	display: grid;
	grid-template-columns: 150px 1.0fr auto;
  	margin-top: 10px;
}
.ESRnoRepoWarning{
	color: var(--red);
	text-decoration: none;
	word-break: break-all;
	padding-right: 2px;
}
.ESRrepoRow a{
	text-decoration: none;
	color: var(--blue);
}
.ESRrepoRow a:hover{
	text-decoration: underline;
}
.ESRexampleDiv{
	border-radius: var(--border-radius);
	border: solid 1px var(--grey-300);
	padding: 24px;
	padding-top: 16px;
	padding-bottom: 16px;
	margin-bottom: 16px;
	overflow: hidden;
	background: var(--grey-100);
}
.ESRexample{
   height: 7em !important;
   padding: 12px !important;
   resize: none;
	font-family: var(--font-monospace) !important;
	margin-top: 8px;
}
.EXPwindow .EXPmodal{
   display: grid;
   grid-template-columns: auto 1fr;
   height: 100%;
	overflow: hidden;
}
.EXPimportWindow .POPpopoutCard-content{
	padding-top: 0px;
}

.EXPwindow .POPpopoutCard-content {
	height: calc(100% - 61px);
	padding: 0px;
}
.EXPwindow{
   top: 50px;
	height: calc(100% - 104px);
}
.EXPheader{
   display: grid;
   grid-template-rows: auto auto auto auto 1fr auto;
   padding: 32px;
   padding-top: 8px;
   overflow: auto;
    height: calc(100% - 40px);;
}
.EXPcode{
   background: var(--grey-200);
   border-left: 0px;
   padding: 32px;
   box-sizing: border-box;
   display: grid;
   grid-template-rows: auto 1fr auto;
   row-gap: 24px;
   height: 100%;
   overflow: hidden;
   border-left: 1px solid var(--grey-400);
}
.EXPheaderFont{
   font-family: var(--font-buttons);
   color: var(--grey-500);
   font-weight: 500;
   font-size: 11px;
   letter-spacing: 0.05em;
   margin-top: 24px;
   margin-bottom: 18px;
}
.EXPfileDiv{
   display: grid;
   grid-template-columns: 1fr auto auto;
   column-gap: 24px;
   margin-top: auto;
}
.EXPinputDiv{
   display: grid;
   grid-template-rows: auto auto auto auto auto auto auto 1fr;
}
.EXPexportFeedback{
   color: var(--red);
}
.EXPgenerateTitle{
   display: inline-block;
   color: var(--grey-500) !important;
   padding-left: 2px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   margin-top: 6px;
}
.EXPfile{
   display: inline-block;
   color: var(--grey-500);
   padding-left: 4px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   margin-top: 6px;
}

.EXPfileDiv .EXPheaderFont{
   margin: 0px;
   margin-top: 7px;
}
.EXPgenerateRow{
   display: grid;
   grid-template-columns: 1fr auto;

   margin-top: 12px;
}
.EXPbuttons{
   justify-content: right;
}
.EXPsql{
   padding: 8px;
   padding-top: 24px;
   padding-bottom: 24px;
   background-color: var(--white);
   border: 1px solid var(--grey-400);
   border-radius: var(--border-radius);
   overflow-y: auto;
   /* max-height: 73vh; */
}
.EXPinputDivs{
   margin-bottom: 24px;
}
.EXPcode .EXPheaderFont{
   margin-top: 0px;
   margin-bottom: 0px;
}
.EXPgenerateFeedback{
   color: var(--red);
}
.EXPlocationRow{
   display: grid;
   grid-template-columns: 1fr auto;
   column-gap: 8px;
}
.EXPpane{
   position:relative;
   height: 100%;
   overflow: hidden;
   max-width: 1070px;
   min-width: 400px;
}

/* Splitter */
.EXPresizeControl {
   right: -6px;
	top: 0;
	bottom: 0;
	width: 10px;
	padding: 0;
	border: 0;
	position: absolute;
	outline: none;
	cursor: ew-resize;
   background: transparent;
   border-right: 1px solid black;
}
.EXPresizeShadow {
   bottom: 0;
	top: 0;
	right: 4px;
	pointer-events: none;
	position: absolute;
	width: 3px;
	transition: 150ms ease-out;
}
.EXPresizeControl:hover .EXPresizeShadow {
   background: var(--blue);
	transition: 75ms ease-in;
}

.FILfileBrowser-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(var(---grey-400), 0.5);
    opacity: 1;
    transition: opacity 150ms ease-in;
    z-index: 1000;
}
.FILbrowserHeading {
    font-size: 18px;
}
.FILfileBrowser-newFolderOverlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 1;
    z-index: 7000;
}

.FILnewFolderButton {
    cursor: pointer;
}

.FILnewFolderButton:hover {
    color: var(--blue);
}

.FILfileBrowser-popup {
    position: fixed;
    top: 50% !important;
    left: 50% !important;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    background: var(--white);
    border: 1px solid var(--grey-400);
    box-shadow: 0 4px 16px 0 rgba(var(---grey-800), 0.5);
    border-radius: var(--border-radius);
    z-index:6000;
}

.FILfileBrowser-popup .FILfile-browser--container {
    margin: 25px;
    width: 70%;
    height: 100%;
    min-width: 600px;
	max-width: 100%;
    max-height: 100%;
	min-height: 400px;
}

.FILfileBrowserWrapper {
	border: 1px solid var(--grey-400);
	border-radius: var(--border-radius);
	overflow: hidden;
	margin-bottom: 16px;
}

.FILfileBrowserHeader {
	background-color: var(--grey-100);
	/* border-bottom: 1px solid var(--grey-300); */
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	min-height: 36px;
}

.FILfileBrowserHeaderLeft {
	padding: 0px 16px;
	display: flex;
	justify-content: flex-start;
}

.FILfileBrowserHeaderCenter {
	font-weight: var(--semibold);
	color: var(--grey-700);
	padding: 8px 0px;
}

.FILfileBrowserHeaderRight {
	padding: 0px 16px;
	display: flex;
	justify-content: flex-end;
}

.FILfileBrowserOptions {
	font-family: var(--font-buttons);
	color: var(--grey-600);
	font-weight: 500;
	letter-spacing: 0.05em;
	font-size: 10px;
}

.FILfileBrowserOptions a {
	display: flex;
	gap: 8px;
	align-items: center;
}

.FILiconBack,
.FILiconAddFolder {
	fill: currentColor;
}


.FILfileBrowser-popup .FILfile-browser--container .FILfileDirectory {
    font-size: 11px;
    color: var(--grey-600);
    border-top: 1px solid var(--grey-300) !important;
    min-height: 32px;
	 box-sizing: border-box;
	 display: flex;
     justify-content: space-between;
	 align-items: center;
	 padding: 0 16px;

    /* Standard CSS ellipsis */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* Beginning of string */
    direction: ltr;
    text-align: left;

}

.FILfileBrowser-popup .FILfile-browser--container .FILfileBrowser {
    border: 0px !important;
    padding: 8px;
    box-sizing: border-box;
    overflow: auto;
    height: 400px;
	 /* height: auto !important;
	 min-height: 200px; */
}

.FILfileBrowser-popup .FILfile-browser--container .FILnewFolder {
    box-shadow: 0 4px 16px 0 rgba(var(---grey-800), 0.5);
}


/* Styling for file list */
.FILfileBrowser .FILfileTree > li:first-child.directory {
	display: none;
}

.FILfileBrowser .FILfileTree .FILfullFileList {
	padding-left: 0px;
}

.FILfileBrowser .FILfileTree .FILfullFileList li {
	background-position: left 8px center;
	height: 26px;
	display: flex ;
	align-items: center;
	border-bottom: 1px solid var(--grey-200);
}

.FILfileBrowser .FILfileTree .FILfullFileList li:hover {
	background-color: rgba(var(---blue-lighter), 0.5);
}

.FILfileBrowserNameError {
    color: red;
    width: 600px;
    white-space: pre-wrap;
}

/* modal */
.FILmodal-container {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(var(---grey-400), 0.60); /* Page dimmer */
    opacity:1;
    transition: opacity 150ms ease-in;
    z-index: 1000;
}
.FILmodal {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    background: var(--white);
    border: 1px solid var(--grey-400);
    box-shadow: 0 2px 0 0 rgba(var(---grey-400),1);
    border-radius: var(--border-radius);
    padding: 32px !important;
    max-width: 90%;
}
.FILmodal-close {
    position: absolute;
    right: 16px;
    top: 16px;
    cursor: pointer;
    color: var(--grey-400);
}

.FILmodal-contents > h4:first-child {
	margin-top: 0px;
}

.FILmodal-contents > *:last-child {
    margin-bottom: 0px;
}

.FILbuttonGroup {
    margin-top: 24px;
}

.FILdisableButton {
    cursor: default;
    opacity: 0.6;
 }

.FILenableButton {
    cursor: pointer;
 }

.FILenableButton:hover {
	color: var(--blue);
}

.FILpathCopy {
    cursor: pointer;
    padding: 0px 5px;
}

.FILfolderName {
    max-width: 425px;
    /* overflow: hidden; */
    /* text-overflow:clip; */
}
.FILfileTypeSelect{
    margin-bottom: 12px;
}
.FILformSearch{
    border: 2px solid #ccc;
    padding: 5px;
    border-radius: 4px;
    width: 250px !important;
}
.FILerrorMessage {
    position: absolute;
    color: #6b7a86;
    opacity: 50%;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    top: 280px;
    left: 247px;
}
.FILpathCopy,
.FILfile-browser--container .FORMlabel,
.FILfile-browser--container h4,
.FILfileBrowserHeader{
    user-select: none;
}
.FILfileBrowser-heading--container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
@media screen and (max-width: 700px) {
    .FILfileBrowser-popup{
        width: calc(80% - ((700px - 100vw) / 100));
        overflow: auto;
    }
    .FILfile-browser--container{
        width: calc(80% - ((700px - 100vw) / 100));

    }
}
@media screen and (max-height: 700px) {
    .FILfileBrowser-popup {
        height: calc(80% - ((700px - 100vh) / 100));
        overflow: auto;
    }
    .FILfile-browser--container{
        height: calc(80% - ((700px - 100vh) / 100)) !important;
    }
}

/* Refactor to use FIL naming convention */

UL.FILfileTree {
	font-size: 11px;
	line-height: 18px;
	padding: 0px;
	margin: 0px;
}

UL.FILfileTree LI {
	list-style: none;
	padding: 0px;
	padding-left: 20px;
	margin: 0px;
	white-space: nowrap;
}

UL.FILfileTree A {
	color: var(--grey-800);
	text-decoration: none;
	display: block;
	margin-left: 12px;
}

UL.FILfileTree A:hover {
	cursor: default;
}

DIV.FILfileBrowser {
	width: 70%;
	height: 30%;
	min-width: 600px;
	max-width: 700px;
	max-height: 500px;
	min-height: 350px;
	overflow: auto;
	border-left: 1px solid #BBBBBB;
	border-right: 1px solid #BBBBBB;
	border-bottom: 1px solid #BBBBBB;
	padding:4px;
	background: #FFF;
}

.hide {
	display: none;
}

UL.FILfileTree A.currentSelect {
	background: #e5f3fa;
	font-weight:bold;
}

/* Core Styles */
.FILfileTree LI.directory { background: url(/FIL/images/directory.png) left top no-repeat; }
.FILfileTree LI.expanded { background: url(/FIL/images/folder_open.png) left top no-repeat; }
.FILfileTree LI.file { background: url(/FIL/images/file.png) left top no-repeat; }
.FILfileTree LI.wait { background: url(/FIL/images/spinner.gif) left top no-repeat; }
/* File Extensions*/
.FILfileTree LI.ext_3gp { background: url(/FIL/images/film.png) left top no-repeat; }
.FILfileTree LI.ext_afp { background: url(/FIL/images/code.png) left top no-repeat; }
.FILfileTree LI.ext_afpa { background: url(/FIL/images/code.png) left top no-repeat; }
.FILfileTree LI.ext_asp { background: url(/FIL/images/code.png) left top no-repeat; }
.FILfileTree LI.ext_aspx { background: url(/FIL/images/code.png) left top no-repeat; }
.FILfileTree LI.ext_avi { background: url(/FIL/images/film.png) left top no-repeat; }
.FILfileTree LI.ext_bat { background: url(/FIL/images/application.png) left top no-repeat; }
.FILfileTree LI.ext_bmp { background: url(/FIL/images/picture.png) left top no-repeat; }
.FILfileTree LI.ext_c { background: url(/FIL/images/code.png) left top no-repeat; }
.FILfileTree LI.ext_cfm { background: url(/FIL/images/code.png) left top no-repeat; }
.FILfileTree LI.ext_cgi { background: url(/FIL/images/code.png) left top no-repeat; }
.FILfileTree LI.ext_com { background: url(/FIL/images/application.png) left top no-repeat; }
.FILfileTree LI.ext_cpp { background: url(/FIL/images/code.png) left top no-repeat; }
.FILfileTree LI.ext_css { background: url(/FIL/images/css.png) left top no-repeat; }
.FILfileTree LI.ext_doc { background: url(/FIL/images/doc.png) left top no-repeat; }
.FILfileTree LI.ext_exe { background: url(/FIL/images/application.png) left top no-repeat; }
.FILfileTree LI.ext_gif { background: url(/FIL/images/picture.png) left top no-repeat; }
.FILfileTree LI.ext_fla { background: url(/FIL/images/flash.png) left top no-repeat; }
.FILfileTree LI.ext_h { background: url(/FIL/images/code.png) left top no-repeat; }
.FILfileTree LI.ext_htm { background: url(/FIL/images/html.png) left top no-repeat; }
.FILfileTree LI.ext_html { background: url(/FIL/images/html.png) left top no-repeat; }
.FILfileTree LI.ext_jar { background: url(/FIL/images/java.png) left top no-repeat; }
.FILfileTree LI.ext_jpg { background: url(/FIL/images/picture.png) left top no-repeat; }
.FILfileTree LI.ext_jpeg { background: url(/FIL/images/picture.png) left top no-repeat; }
.FILfileTree LI.ext_js { background: url(/FIL/images/script.png) left top no-repeat; }
.FILfileTree LI.ext_lasso { background: url(/FIL/images/code.png) left top no-repeat; }
.FILfileTree LI.ext_log { background: url(/FIL/images/txt.png) left top no-repeat; }
.FILfileTree LI.ext_m4p { background: url(/FIL/images/music.png) left top no-repeat; }
.FILfileTree LI.ext_mov { background: url(/FIL/images/film.png) left top no-repeat; }
.FILfileTree LI.ext_mp3 { background: url(/FIL/images/music.png) left top no-repeat; }
.FILfileTree LI.ext_mp4 { background: url(/FIL/images/film.png) left top no-repeat; }
.FILfileTree LI.ext_mpg { background: url(/FIL/images/film.png) left top no-repeat; }
.FILfileTree LI.ext_mpeg { background: url(/FIL/images/film.png) left top no-repeat; }
.FILfileTree LI.ext_ogg { background: url(/FIL/images/music.png) left top no-repeat; }
.FILfileTree LI.ext_pcx { background: url(/FIL/images/picture.png) left top no-repeat; }
.FILfileTree LI.ext_pdf { background: url(/FIL/images/pdf.png) left top no-repeat; }
.FILfileTree LI.ext_php { background: url(/FIL/images/php.png) left top no-repeat; }
.FILfileTree LI.ext_png { background: url(/FIL/images/picture.png) left top no-repeat; }
.FILfileTree LI.ext_ppt { background: url(/FIL/images/ppt.png) left top no-repeat; }
.FILfileTree LI.ext_psd { background: url(/FIL/images/psd.png) left top no-repeat; }
.FILfileTree LI.ext_pl { background: url(/FIL/images/script.png) left top no-repeat; }
.FILfileTree LI.ext_py { background: url(/FIL/images/script.png) left top no-repeat; }
.FILfileTree LI.ext_rb { background: url(/FIL/images/ruby.png) left top no-repeat; }
.FILfileTree LI.ext_rbx { background: url(/FIL/images/ruby.png) left top no-repeat; }
.FILfileTree LI.ext_rhtml { background: url(/FIL/images/ruby.png) left top no-repeat; }
.FILfileTree LI.ext_rpm { background: url(/FIL/images/linux.png) left top no-repeat; }
.FILfileTree LI.ext_ruby { background: url(/FIL/images/ruby.png) left top no-repeat; }
.FILfileTree LI.ext_sql { background: url(/FIL/images/db.png) left top no-repeat; }
.FILfileTree LI.ext_swf { background: url(/FIL/images/flash.png) left top no-repeat; }
.FILfileTree LI.ext_tif { background: url(/FIL/images/picture.png) left top no-repeat; }
.FILfileTree LI.ext_tiff { background: url(/FIL/images/picture.png) left top no-repeat; }
.FILfileTree LI.ext_txt { background: url(/FIL/images/txt.png) left top no-repeat; }
.FILfileTree LI.ext_vb { background: url(/FIL/images/code.png) left top no-repeat; }
.FILfileTree LI.ext_wav { background: url(/FIL/images/music.png) left top no-repeat; }
.FILfileTree LI.ext_wmv { background: url(/FIL/images/film.png) left top no-repeat; }
.FILfileTree LI.ext_xls { background: url(/FIL/images/xls.png) left top no-repeat; }
.FILfileTree LI.ext_xml { background: url(/FIL/images/code.png) left top no-repeat; }
.FILfileTree LI.ext_zip { background: url(/FIL/images/zip.png) left top no-repeat; }
.FILfileTree LI.ext_vmd { background: url(/FIL/images/vmd.png) left top no-repeat; }
.FLDmodal{
	padding: 4px;
}
.FLDfieldTableRow {
	display: grid;
	grid-template-columns: 32px 0.45fr 0.45fr 1fr 32px;
	cursor: default;
}
.FLDaddField {
	cursor: pointer;
	color: var(--blue);
}
.FLDtableCell {
	text-align: left;
	border-left: 0px;
	border-right: 0px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.FLDtableCell .FORMinput,
.FLDtableCell .FORMselectBox {
	height: 32px;
	border-radius: 0px;
	border-left: 0px;
	border-right: 1px solid rgba(var(---grey-300), 0.65);
	border-bottom: 0px;
}
.FLDtableCell .FORMinput:focus,
.FLDtableCell .FORMselectBox:focus {
	outline: none;
	border: 2px solid var(--blue);
}
/* "Delete row" column */
.FLDtableCell:last-child {
	border: 1px solid var(--grey-400);
	border-bottom: 0px;
	border-left: none;
	background: var(--grey-100);
}
.FLDtableLastColumn .FLDtableCell:last-child{
	border: unset;
}
.FLDviewFieldsHeader {
	margin-top: 8px;
	display: grid;
	grid-template-columns: 32px 0.45fr 0.45fr 1fr 32px;
	border: 1px solid var(--grey-400);
	background: var(--grey-200);
}
.FLDviewFieldsHeader div {
	padding: 6px 8px;
	font-size: 9px;
	font-family: var(--font-buttons);
	color: var(--grey-600);
	letter-spacing: 0.05em;
}
.FLDviewFields {
	display: grid;
	grid-template-columns: 32px 0.45fr 0.45fr 1fr 32px;
	min-height: 32px;
}
.FLDviewFields div {
	border: 1px solid var(--grey-400);
	border-left: 0px;
	border-right: 1px solid rgba(var(---grey-300), 0.65);
	border-top: 0px;
	padding: 6px 8px;
	padding-top: 0px;
	padding-bottom: 0px;
	display: flex;
	align-items: center;
}
.FLDviewFields div:first-child {
	border-left: 1px solid var(--grey-400);
}
.FLDviewFields div:last-child {
	border-right: 1px solid var(--grey-400);
}
.FLDeditFieldHeader {
	margin-top: 8px;
	display: grid;
	grid-template-columns: 32px 0.45fr 0.45fr 1fr 32px;
	border: 1px solid var(--grey-400);
	border-bottom: 0px;
	background: var(--grey-200);
	align-items: center;
	min-height: 28px;
}
.FLDeditFieldHeader div {
	padding: 6px 8px;
	font-size: 9px;
	font-family: var(--font-buttons);
	color: var(--grey-600);
	letter-spacing: 0.05em;
	line-height: 1.25em;
}
.FLDrowName {
	word-break: break-all;
}
.FLDeditInline {
	display: grid;
	grid-template-columns: 1fr 42px;
}

.FLDinplaceActions {
	display: flex;
	justify-content: flex-end
}

.FLDeditMode .FLDcurrentValue,
.FLDeditMode .FLDeditValueInPlace {
	display: none;
}

.FLDcurrentValue {
	color: var(--grey-600);
	word-break: break-all;
}

.FLDwidget {
	margin-left: 6px;
}

.FLDdeleteRow {
	z-index: 998;
	background: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.FLDaddValue {
	cursor: pointer;
	color: #2590cd;
	display: inline-flex;
	align-items: center;
	margin: 6px;
}
.FLDblankRow{
	color: var(--grey-600);
}
.FLDviewFieldsBlank{
	border-top: 0px !important;
	padding: 4px;
	border: 1px solid var(--grey-400);
}
.FLDmoveRow {
	border: 1px solid var(--grey-400);
	border-bottom: 0px;
	border-right: 1px solid rgba(var(--grey-300), 0.65);
	background-color: var(--grey-100);
	color: var(--grey-600);
	cursor: move;
}


/* Add shadow to row upon "move row" icon hover */
.FLDfieldTableRow .FLDtableCell:first-child:hover ~ .FLDtableCell,
.FLDtableCell:first-child:hover {
	box-shadow: 0 3px 8px rgb(0 0 0 / 25%);
	clip-path: inset(-5px 0px -11px 0px);
}

.FLDtableCell:first-child:hover {
	clip-path: inset(-5px 0px -11px -8px);
}

.FLDfieldTableRow .FLDtableCell:first-child:hover ~ .FLDtableCell:last-child {
	clip-path: inset(-5px -8px -11px 0px);
}


.FLDhtmlBlockRow {
	display: grid;
	grid-template-columns: 0.25fr 0.9fr 80px;
	margin-top: 4px;
	margin-bottom: 4px;
}

.FLDhtmlBlockStyle {
	text-align: left;
	border-left: 0px;
	border-right: 0px;
	padding: 4px;
	margin: 4px;
	display: inline-flex;
	align-items: center;
}

.FLDsaveConfigButton {
	justify-content: right;
	margin-top: 12px;
}

.FLDsaveConfigButton .BUTTONstandard {
	height: 24px;
	padding: 0px 12px;
}

.FLDinformation {
	font-weight: var(--regular);
	font-size: 10px;
	line-height: 16px;
	color: var(--grey-600);
}

.FLDsaveFeedback {
	text-align: right;
	font-weight: var(--regular);
	font-size: 10px;
	line-height: 16px;
	color: var(--grey-600);
	margin: 8px;
	margin-top: 0px;
	color: var(--red);
}

.FLDinplaceFeedbackWrap,
.FLDeditFeedbackWrap {
	display: none;
	margin-top: 16px;
}

.FLDinplaceFeedback,
.FLDeditFeedback {
	display: flex;
	justify-content: flex-end
}

.FLDaddFieldRow {
	display: grid;
	grid-template-columns: 32px 1.0fr;
	border: 1px solid var(--grey-400);
	background: var(--grey-100);
	align-items: center;
	height: 24px;
	margin-bottom: 12px;
}

.FLDaddField {
	grid-column: 2/3;
	padding: 0px 8px;
	font-size: 9px;
	font-family: var(--font-buttons);
	font-weight: 500;
}

.FLDeditActionsWrap {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-top: 16px;
	margin-bottom: -16px;
}

.FLDvalueEditFormat .BUTTONstandard {
	position: absolute;
	right: 48px;
	height: 20px;
	border-radius: 2px;
	padding: 0px 8px 0px 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 8px;
	letter-spacing: 0.05em;
	font-weight: 400;
	color: var(--grey-800);
}
.FLDtableLastColumn{
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.FLDviewFields .FLDtableLastColumn *{
	width: 100%;
	height: 100%;
	border: unset !important;
	padding: 0 0px;
}
.FLDtableLastColumn .FLDcurrentValue:first-child{
	border-right: 1px solid var(--grey-300, 0.65) !important;
}
.FLDnoBorder{
	border-right: unset !important;
}

/* Fonts */

@font-face {
   src: url("/FONT/OpenSans-Light.ttf") format("truetype");
   font-family: "Open Sans";
   font-weight: 300;
}
@font-face {
   src: url("/FONT/OpenSans-Regular.ttf") format("truetype");
   font-family: "Open Sans";
   font-weight: 400;
}
@font-face {
   src: url("/FONT/OpenSans-SemiBold.ttf") format("truetype");
   font-family: "Open Sans";
   font-weight: 600;
}
@font-face {
   src: url("/FONT/OpenSans-Bold.ttf") format("truetype");
   font-family: "Open Sans";
   font-weight: 700;
}
@font-face {
   src: url("/FONT/OpenSans-ExtraBold.ttf") format("truetype");
   font-family: "Open Sans";
   font-weight: 800;
}

@font-face {
   src: url("/FONT/Montserrat-Thin.ttf") format("truetype");
   font-family: "Montserrat";
   font-weight: 100;
}
@font-face {
   src: url("/FONT/Montserrat-ExtraLight.ttf") format("truetype");
   font-family: "Montserrat";
   font-weight: 200;
}
@font-face {
   src: url("/FONT/Montserrat-Light.ttf") format("truetype");
   font-family: "Montserrat";
   font-weight: 300;
}
@font-face {
   src: url("/FONT/Montserrat-Regular.ttf") format("truetype");
   font-family: "Montserrat";
   font-weight: 400;
}
@font-face {
   src: url("/FONT/Montserrat-Medium.ttf") format("truetype");
   font-family: "Montserrat";
   font-weight: 500;
}
@font-face {
   src: url("/FONT/Montserrat-SemiBold.ttf") format("truetype");
   font-family: "Montserrat";
   font-weight: 600;
}
@font-face {
   src: url("/FONT/Montserrat-Bold.ttf") format("truetype");
   font-family: "Montserrat";
   font-weight: 700;
}
@font-face {
   src: url("/FONT/Montserrat-ExtraBold.ttf") format("truetype");
   font-family: "Montserrat";
   font-weight: 800;
}

@font-face {
   src: url("/FONT/SourceCodePro-ExtraLight.ttf") format("truetype");
   font-family: "SourceCodePro";
   font-weight: 200;
}
@font-face {
   src: url("/FONT/SourceCodePro-ExtraLightItalic.ttf") format("truetype");
   font-family: "SourceCodePro";
   font-weight: 200;
	font-style: italic;
}
@font-face {
   src: url("/FONT/SourceCodePro-Light.ttf") format("truetype");
   font-family: "SourceCodePro";
   font-weight: 300;
}
@font-face {
   src: url("/FONT/SourceCodePro-LightItalic.ttf") format("truetype");
   font-family: "SourceCodePro";
   font-weight: 300;
	font-style: italic;
}
@font-face {
   src: url("/FONT/SourceCodePro-Regular.ttf") format("truetype");
   font-family: "SourceCodePro";
   font-weight: 400;
}
@font-face {
   src: url("/FONT/SourceCodePro-Italic.ttf") format("truetype");
   font-family: "SourceCodePro";
   font-weight: 400;
	font-style: italic;
}
@font-face {
   src: url("/FONT/SourceCodePro-SemiBold.ttf") format("truetype");
   font-family: "SourceCodePro";
   font-weight: 600;
}
@font-face {
   src: url("/FONT/SourceCodePro-SemiBoldItalic.ttf") format("truetype");
   font-family: "SourceCodePro";
   font-weight: 600;
	font-style: italic;
}
@font-face {
   src: url("/FONT/SourceCodePro-Bold.ttf") format("truetype");
   font-family: "SourceCodePro";
   font-weight: 700;
}
@font-face {
   src: url("/FONT/SourceCodePro-BoldItalic.ttf") format("truetype");
   font-family: "SourceCodePro";
   font-weight: 700;
	font-style: italic;
}
@font-face {
   src: url("/FONT/SourceCodePro-Black.ttf") format("truetype");
   font-family: "SourceCodePro";
   font-weight: 800;
}
@font-face {
   src: url("/FONT/SourceCodePro-BlackItalic.ttf") format("truetype");
   font-family: "SourceCodePro";
   font-weight: 800;
	font-style: italic;
}

:root{
   --font-sans: "Open Sans", Helvetica, Arial, sans-serif;
   --font-buttons: "Montserrat", Helvetica, Arial, sans-serif;
	--font-monospace: "SourceCodePro", Courier, monospace;
   --light: 300;
   --regular: 400;
   --semibold: 600;
   --bold: 700;
   --extra-bold: 1000;
   font-family: var(--font-sans);
}

pre {
	font-family: var(--font-monospace);
}
/* for input, textarea, select */
.FORMinput {
	height: 28px;
	border-radius: var(--border-radius);
	border: 1px solid var(--grey-400);
	background-color: var(--white);
	font-weight: var(--regular);
	font-size: 12px;
	line-height: 16px;
	padding: 6px 8px;
	color: var(--grey-800);
	width: 100%;
	box-sizing: border-box;
	font-family: var(--font-sans);
}

.FORMinputError {
	border-color: var(--red-light);
}

.FORMinputDisabled {
	border-color: var(--grey-300);
	color: var(--grey-300);
	cursor: not-allowed;
}

.FORMinput::placeholder {
	color: var(--grey-400);
}

.FORMselectBox {
	height: 28px;
	border-radius: var(--border-radius);
	border: 1px solid var(--grey-400);
	background-color: var(--white);
	font-weight: var(--regular);
	font-size: 12px;
	line-height: 16px;
	color: var(--grey-800);
	width: 100%;
	font-family: var(--font-sans);
	padding: 0px 32px 0px 8px;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-image: url('/FORM/FORMselectBoxArrow.svg');
	background-repeat: no-repeat, repeat;
	background-position: right 8px top 50%, 0 0;
}

.FORMbutton {
	font-family: var(--font-buttons);
	font-size: 12px;
	text-decoration: none;
	line-height: 12px;
	font-weight: var(--semibold);
	letter-spacing: 0.25px;
	padding: 8px 16px;
	border: 0;
	border-radius: var(--border-radius);
	display: inline-block;
	cursor: pointer;
}

/*  When the mouse button is depressed */
.FORMbutton:active {
	background-color: var(--grey-600);
}

/* Used for grouping inputs together with buttons, eg. "Browse" file selectors */
.FORMinputGroup {
	display: flex;
	align-items: center;
}
/* .FORMinputGroupDir{
	display: flex;
	align-items: center;
} */

.FORMinputGroup .FORMinput:first-child {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.FORMinputGroup .BUTTONstandard {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border: 1px solid #c9d0d5;
	border-left: none;
}

.FORMlabel {
	font-weight: var(--semibold);
}

.FORMlabel+.FORMinput,
.FORMlabel+.FORMselectBox {
	margin-top: 4px;
}

.hint {
	color: var(--red);
	font-size: 10px;
	line-height: 12px;
	margin-top: 4px;
}

.hint a {
	color: var(--red);
}

.hint--hidden {
	display: none;
}

.GINtitle {
	margin: unset;
	font-weight: var(--bold);
	font-size: 20px;
	line-height: 32px;
	color: var(--grey-700);
	padding: 0px 4px 24px;
	margin-bottom: 0px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 10px;
}
.GINruleHeading,
.GINruleRow{
	display: grid;
	column-gap: 24px;
	grid-template-columns: 60px 1fr 120px 120px 1.5fr;
}
.GINeditRuleHeading,
.GINeditRuleRow{
	display: grid;
	column-gap: 24px;
	grid-template-columns: 80px 0px 1fr 0px 100px 0px 100px 0px 170px 68px;
}
.GINeditRuleRow,
.GINruleRow{
	border-top: 1px solid var(--grey-300);
}

.GINruleTable{
	border-radius: var(--border-radius);
	border: 1px solid var(--grey-300);
	background-color: var(--grey-100);
	overflow: hidden;
	width: 100%;
}
.GINeditRuleHeading,
.GINruleHeading{
	border-bottom: 1px solid var(--grey-300);
	background-color: var(--grey-200);
}
.GINeditRuleHeading>div,
.GINruleHeading>div{
	font-weight: var(--semibold);
	color: var(--grey-800);
}
.GINheading{
	padding-left: 18px;
	padding-right: 12px;
	min-height: 32px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding-top: 16px;
	padding-bottom: 16px;
}
.GINruleData{
	text-align: left;
	border-left: 0px;
	border-right: 0px;
	padding: 18px;
	color: var(--grey-600);
	/* border-top: 1px solid var(--grey-300); */
}
.GINpaddingLeft{
	padding-left: 18px !important;
}
.GINruleVal{
	display : grid;
   box-sizing: border-box;
	margin: 12px 16px;
	align-items: center;
	/* border-bottom: 1px solid var(--grey-300); */
	color: var(--grey-800);
}
.GINpaddingRight{
	padding-right: 18px !important;
}
.GINdeleteRow{
	text-align: left;
	border-left: 0px;
	border-right: 0px;
	padding: 12px;
	padding-left: 0px;
	color: var(--grey-800);
}
a.GINruleData{
	color: var(--blue);
	text-decoration: none;
}
a.GINruleData:hover{
	text-decoration: underline;
}
.GINcolon{
	letter-spacing: 0.05em;
	color: var(--grey-600);
}
.GINimportant{
	align-items: center;
	padding: 24px;
	padding-left: 16px;
	margin-bottom: 24px;
	border-radius: 4px;
	border: 1px solid var(--grey-300);
	color: var(--grey-800);
	background-color: var(--grey-100);

}
.GINvalueEmpty{
	color: var(--red);
}
.GINdiv{
	border: 1px solid var(--grey-300);
	border-radius: var(--border-radius);
	background: var(--grey-100);
	padding: 24px 32px;
	display: grid;
	grid-template-columns: 120px 1fr auto;
	column-gap: 12px;
}
.GINdiv.GINrepo{
	grid-template-columns: 120px 1fr auto auto;
}
.GINmarginTop{
	margin-top: 4px;
}
.GINmodal{
	max-width: 850px !important;
}
.GINlink,
.GINrepoValue a{
	color: var(--blue);
	text-decoration: none;
	cursor: pointer;
}
.GINlink:hover,
.GINrepoValue a:hover{
	text-decoration: underline;
}
.GINautoGrid,
.GINpullFromGrid{
	display: grid;
	grid-template-columns: 120px 1fr;
	column-gap: 24px;
}
.GINeditAutoInputContainer{
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 12px;
}
.GINpullFromButtons{
  justify-content: end;
}
.GINpullFromTitle{
	margin-top: 4px;
	font-size: 11.5px;
	display: table-cell;
	font-weight: var(--semibold);
}

.GINeditRevert,
.GINeditRestore,
.GINeditAutoButtons,
.GINeditUserButtons{
	justify-content: end;
}
.GINeditUserBox{
   border-radius: var(--border-radius);
	border: solid 1px var(--grey-300);
	padding: 24px;
   padding-top: 16px;
   padding-bottom: 16px;
	margin-bottom: 10px;
   background: var(--grey-100);
   text-overflow: ellipsis;
   overflow: hidden;
}
.GINeditUserOption:hover{
   cursor: pointer;
   text-decoration: underline;
}

.GINrevertError,
.GINrestoreError,
.GINeditUserError{
	margin-top: 12px;
	color: var(--red);
	text-align: right;
	white-space: pre-wrap;
}

.GINeditAutoUnit{
	margin-top: 4px;
	color: var(--grey-600);
	padding-right: 12px;
}
.GINeditAutoDescription{
	color: var(--grey-600);
}
.GINrepoValue,
.GINautoValue,
.GINrestoreValue,
.GINrevertValue{
	color: var(--grey-600);
}
.GINrestoreGrid{
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 24px;
}
.GINgitURL{
	margin-top: 8px;
}
.GINpushButton{
	background-image: url('/GIN/GINpushIcon.svg');
	background-size: 16px;
	background-repeat: no-repeat;
	background-position: center;
	width: 42px;
	height: 28px;
}
.GINstatus,
.GINpushButtonDiv{
	color: var(--grey-600);
}
.GINstatus{
	/* text-align: right; */
	font-size: 11px;
	padding-left: 4px;
	padding-top: 4px;
}

/* Revert modal css */
.GINrevertModal {
	font-family: Arial, sans-serif;
	padding: 2px;
	/* background-color: #f9f9f9; */
	border-radius: 8px;
	max-width: 100%;
	/* margin: 0 auto; */
	/* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); */
	height: auto;
	overflow: auto;
}

.GINrevertFlex {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.GINrevertBtn,
.GINcommitChangesBtn{
	float: right;
}

.GINcommitSearch,
.GINrevertBtn{
	margin-top: 4px;
}

.GINcommitTable table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
	table-layout: auto;
	cursor: pointer;
}
.GINcommitTableHash{
	width: 90px;
}

.GINcommitTable th, .GINcommitTable td {
	text-align: left;
	padding: 12px 15px;
	border: 1px solid #ddd;
	word-wrap: break-word;
}

.GINcommitTable th {
	background-color: #f4f4f6;
	font-weight: bold;
	color: #333;
}

.GINcommitTable td {
	background-color: #fff;
	color: #555;
}

.GINcommitTable tr:nth-child(even) td {
	background-color: #f9f9f9;
}

.GINcommitTable tr:hover td {
	background-color: #f1f1f1;
}

/* Responsiveness: shrink columns for smaller screens */
@media (max-width: 768px) {
	.GINcommitTable th, .GINcommitTable td {
		padding: 8px;
		font-size: 14px;
	}

	.GINcommitTable th, .GINcommitTable td {
		display: block;
		text-align: right;
		position: relative;
		padding-left: 50%;
		white-space: nowrap;
	}

	.GINcommitTable th::before, .GINcommitTable td::before {
		content: attr(data-label);
		position: absolute;
		left: 15px;
		font-weight: bold;
		text-align: left;
		white-space: normal;
	}

	.GINcommitTable th {
		display: none;
	}
}

.GINrestoreError {
	color: red;
	margin-bottom: 10px;
	max-height: 500px;
}

.GINrevertModal div:focus {
	outline: none;
}

.GINrevertPagination,
.GINrevertCount{
	text-align: right;
}

.GINcommitChangesTarget{
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 12px;
}
.GINrestoreModal{
	max-height: 95%;
}
.GINdismissGrid{
	margin-top: 4px;
	padding-left: 4px;
	display: grid;
	grid-template-columns: 1fr auto auto auto ;
	column-gap: 4px;
}
.GINwarningDismiss{
	color: var(--blue);
	cursor: pointer;
}
.GINwarningDismiss:hover{
	text-decoration: underline;
}
.GINbracket{
	color: var(--grey-600);
}
.GINrestoreWarning{
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 16px;
	row-gap: 8px;
	padding-left: 4px;
	border: 1px solid var(--grey-300);
	border-radius: var(--border-radius);
	background: var(--grey-100);
	padding: 24px;
}
.GINrestoreWarningCheckbox2,
.GINrestoreWarningCheckbox3,
.GINrestoreWarningCheckbox{
	height: 14px;
}
.GINrestoreWarningText{
	padding-top: 2px;
}
.GINwarningDiv{
	border: 1px solid var(--grey-300);
	border-radius: var(--border-radius);
	background: var(--grey-100);
	padding: 24px;
}
.GINwarningMessage{
	padding-left: 8px;
	color: var(--grey-600);
}
.GINwarningMessage li{
	color: var(--grey-800);
}
.GINwarningTitle{
	padding-right: 12px;
	font-weight: var(--bold) !important;
}
.GINwarningTitle::before{
	content: '• ';
	color: red;
	font-size: 14px;
	font-weight: var(--bold);
}
.GINbracket,
.GINwarningDismiss{
	padding-top: 2px;
}
.GINwarningMessage a{
	color: var(--blue);
	text-decoration: none;
}
.GINwarningMessage a:hover{
	text-decoration: underline;
}
.GINrestoreLink{
	color: var(--blue);
	text-decoration: none;
}
.GINrestoreLink:hover{
	text-decoration: underline;
}


.GINrestoreProgress {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 12px 0;
}

/* If you need to adjust the spinner size */
.GINrestoreProgress .CARDloading-spinner {
    margin: 0; /* Remove existing margins */
    width: 25px;
    height: 25px;
    border-width: 3px;
}

.GINrestoreStatus {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.GINrestoreStatusText {
    color: var(--grey-600);
    font-size: 13px;
    text-align: center;
    max-width: 300px;
    line-height: 1.4;
}
.GINeditUserNote{
	color: var(--grey-600);
	padding: 4px;
}
.GINeditUserVal{
	padding-top: 12px;
}
.GITHstatus{
   color : green;
}

.GITHaccessError *{
   display: inline;
}
.GITHbox{
   border-radius: var(--border-radius);
	border: solid 1px var(--grey-300);
	padding: 24px;
   padding-top: 16px;
   padding-bottom: 16px;
	margin-bottom: 16px;
   overflow: hidden;
   background: var(--grey-100);
}
.GITHerrorSection,
.GITHsection {
	border-radius: 4px;
	border: solid 1px var(--grey-400);
	padding: 8px;
	margin-bottom: 10px;
}
.GITHsection{
	display : grid;
	grid-template-columns: 120px 1fr auto;
}
.GITHtitle{
   font-weight: bold;
   margin-top: 8px;
}
.GITHnotSet{
   display: flex;
   color: var(--red);
   opacity: 0.85
}
.GITHnotSet b{
   padding-right: 4px;
}
.GITHinfo{
   color : var(--grey-500);
   display: inline;
   margin-left: 4px;
}
.GITHdesc{
   color : var(--grey-500);
   margin-top: 8px;
}
.GITHtitleRow{
   display: grid;
   grid-template-columns: 96px 1fr auto;
   column-gap: 24px;
   margin-bottom: 4px;
   font-size: 11.5px;
}
.GITHserverEdit{
   display : grid;
	grid-template-columns: 100px 2fr 140px;
   column-gap: 20px;
   row-gap: 12px;
}
.GITHtableEdit,
.GITHtable{
   display : grid;
	grid-template-columns: 96px 1fr;
   column-gap: 20px;
   row-gap: 12px;
}
.GITHtable{
   padding-top: 8px;
   padding-left: 4px;
   padding-bottom: 8px;
   /* padding: 0px; */
}
.GITHtableTitle{
   font-size: 11.5px;
   display: table-cell;
   font-weight: var(--semibold);
}
.GITHtableTitleStyle{
   display: inline-block;
   font-size: 11.5px;
   font-weight: var(--semibold);
}
.GITHtableEdit .GITHtableTitle{
   margin-top: 4px;
}
.GITHbutton{
   display: grid;
   grid-template-columns: auto auto;
   justify-content: end;
   margin-top: 18px;
}
.GITHerror{
   color: red;
   padding-top: 12px;
   padding-right: 12px;
   text-align: right;
}
.GITHwarning {
   position: relative; /* Ensure the pseudo-element is positioned relative to this element */
 }
 .GITHwarning::before {
   content: '';
   position: absolute; /* Position the pseudo-element absolutely within its parent */
   top: 8px; /* Position vertically at the center of the parent */
   transform: translateY(-50%); /* Adjust for vertical centering */
   left: -14px; /* Position the pseudo-element to the left of the text */
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background-color: var(--red);
   margin-right: 8px; /* Margin between the pseudo-element and text */
 }
 .GITHerrorText{
   /* color: var(--red); */
 }
.GITSpane .SETpageDescription{
   margin-bottom: 16px;
}
.GITHserverLink,
.GITHlink{
	color: var(--blue);
	text-decoration: unset;
	cursor: pointer;
}
.GITHlink{
   padding-left: 2px !important;
	padding-right: 2px !important;
}
.GITHserverLink:hover,
.GITHlink:hover{
	text-decoration: underline;
}
.GITHtokenMark{
   display: inline-block;
}
.GITHpasswordSymbol{
   display: inline-block;
   padding-top: 4px;
}
.GITHsuccessMark{
   display: flex;
   justify-content: center;
   justify-content: center;
   cursor: default;
   margin-top: 2px;
   color: var(--grey-500);
}
.GITHsuccessMark::after{
   padding-left: 8px;
   margin-top: -2px;
   opacity: 0.5;
   content: url("/CARD/CARDcheckGrey.svg");
}
.GITHsuccessMark:hover::after{
   opacity: 1;
   padding-left: 8px;
   content: url("/CARD/CARDcheckBlue.svg");
}
.GITHgeneratorRow{
   display : grid;
	grid-template-columns: 1fr auto;
   row-gap: 8px;
   column-gap: 24px;
}
.GITHsuccess{
   color : var(--green);
}
.GITHsuccess.GITHsuccessMark::after{
   padding-left: 8px;
   margin-top: 0px;
   opacity: 0.5;
   content: url("/CARD/CARDcheckGrey.svg");
}

.GITHtableVal{
   overflow: hidden;
   text-overflow: ellipsis;
}
.GITHsshModal .GITHtableTitle{
   margin-top: 2px;
}
.GITHgrid{
   /* display: grid; */
   /* grid-template-columns: 1fr 1fr; */
   /* column-gap: 24px; */
}
.GITHhidden{
   display: none;
}
.GITHaddLocalKeyAzureImg{
   max-width: 500px;
	margin: 0 auto;
}
.GITHaddKeyAzureImg{
   max-width: 300px;
	margin: 0 auto;
}
.GITHtokenAzureLocalImg{
   max-width: 550px;
	margin: 0 auto;
}
.GITHtokenAzureImg{
	max-width: 370px;
	margin: 0 auto;
}
.GITHtokenBitbucketImg,
.GITHtokenGitLabImg {
	max-width: 550px;
	margin: 0 auto;
	/* margin-bottom: 16px; */
}
.GITHusernameAzureImg,
.GITHusernameBitbucketImg {
	max-width: 450px;
	margin: 0 auto;
}
.GITHeditKeyPath,
.GITHkeyFiles .GITHtableVal{
   color: var(--grey-500);
}
.GITHeditKeyPath{
   font-family: var(--font-monospace);
}
.GITKtableTitle{
   font-size: 11.5px;
   display: table-cell;
   font-weight: var(--semibold);
}
.GITKbox{
   border-radius: var(--border-radius);
	border: solid 1px var(--grey-300);
	padding: 24px;
   padding-top: 16px;
   padding-bottom: 16px;
	margin-bottom: 10px;
   background: var(--grey-100);
   text-overflow: ellipsis;
   overflow: hidden;
}
.GITKtableEdit{
   display : grid;
	grid-template-columns: auto 1fr auto;
   row-gap: 8px;
   column-gap: 24px;
   overflow: hidden;
}
.GITHimageGrid{
   display: grid;
   grid-template-columns: 1fr 1fr;
}
.GITKpath{
   overflow: hidden;
}
.GITKpath > *{
   overflow: auto;
}
.GITHpublicKeyContent{
   padding: 12px;
   padding-left: 24px;
   padding-right: 24px;
   height: 12em !important;
   resize: none;
}
.GITHhelpRow{
   /* text-align: right; */
   color: var(--grey-600);
   /* margin-top: 12px; */
}
.GITHserverAddress{
   display: flex;  
}
.GITHlocalServerAddress{
   /* margin-top: 8  px; */
}
.GITHvalidBox{
   border-radius: var(--border-radius);
	border: solid 1px var(--grey-300);
	padding: 24px;
   padding-top: 16px;
   padding-bottom: 16px;
	margin-bottom: 10px;
   background: var(--grey-100);
   text-overflow: ellipsis;
   overflow: hidden;
}
.GITHvalidAddress:hover{
   cursor: pointer;
   text-decoration: underline;
}
.GITHaddressRow{
   display: grid;
   grid-template-columns: auto 1fr;
   column-gap: 8px;
}
.GITHcloudService{
   color: var(--grey-600);
   padding-left: 8px;
}
.GITHserverMessage{
   color: var(--grey-600);
   
}

.GITSpane {
	padding: 32px;
	padding-bottom: 52px;
	border-radius: 4px;
	border: solid 1px var(--grey-400);
	background-color: var(--white);
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
	border: none;
	max-width: 800px;
}

.GITStitle {
	margin: unset;
	font-weight: var(--bold);
	font-size: 20px;
	line-height: 32px;
	color: var(--grey-700);
	padding: 0px 4px 24px;
	margin-bottom: 0px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 10px;
}


.GITSsectionTitle{
   font-weight: bold;
   margin: 3px 3px 3px 0px;
   grid-column-start : 1;
   grid-column-end : 3;   
   margin-bottom: 4px;
   display: grid;
}

.GITSsectionDesc{
  	grid-column-start : 1;
  	grid-column-end : 3;   
  	color : var(--grey-500);
  	display: grid;
}

.GITSstatus{
   color : var(--grey-500);
   margin-right: 1em;
   display: flex;
   align-items: center;
}

.GITSlabel, .GITSvalue {
   margin : 3px;
}

.GITSvalue {
   grid-column-start : 2;
   grid-column-end : 2;
   display: grid;
}

.GITSvalue.FORMinputGroup{
	/* grid-column-start : 1; */
   /* grid-column-end : 2; */
   display: flex;
}

/* .GITSeditButton {
	grid-column-start : 3;
	grid-column-end   : 3; 
	display: flex;
	align-items: end;
} */

.GITSlabel {
	grid-column-start : 1;
	grid-column-end : 1;
	font-weight: bold;
	display: flex;
	align-items: center;
}

.GITSbuttonGroup{
	grid-column-start : 1;
	grid-column-end   : 3;
	display :grid; 
	justify-content: right;
	padding-top : 12px;
	padding-bottom : 12px;
}

.GITSsystemPath{
	max-height: 30em;
	overflow-y: auto; 
	white-space: nowrap;
	overflow-x: scroll;
	grid-column-start : 1;
	grid-column-end : 3;   
	display : grid;
	margin-left: 3px;
 }
 
 .GITShelpContainer{
	display: grid;
	grid-template-columns: auto auto auto;
	padding-left: 4px;
}


.GITSwide{
   grid-column-start : 1;
   grid-column-end : 3;	
   display: grid;
}

.GITSstatus{
   color : green;
}

.GITSerror{
   color: red;
}

.GITSimageDiv{
	border: 1px solid var(--grey-400);
   border-radius: var(--border-radius);
   background: var(--grey-200);
   padding: 12px 24px;
	display: flex;
	justify-content: center;
	overflow: auto;
}


.GITSsectionDesc a{
	color: var(--blue);
	text-decoration: unset;
	padding-left: 2px;
	padding-right: 2px;
}

.GITSsectionDesc a:hover{
	text-decoration: underline;
}

.GSVmodal{
	min-width: 890px;
}
.GSVtitle {
	margin: unset;
	font-weight: var(--bold);
	font-size: 20px;
	line-height: 32px;
	color: var(--grey-700);
	padding: 0px 4px 24px;
	margin-bottom: 0px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 10px;
}
.GSVruleHeading,
.GSVruleRow{
	display: grid;
	column-gap: 24px;
	grid-template-columns: 60px 1fr 120px 120px 1.5fr;
}
.GSVeditRuleHeading,
.GSVeditRuleRow{
	display: grid;
	column-gap: 24px;
	grid-template-columns: 80px 0px 1fr 0px 100px 0px 100px 0px 170px 68px;
}
.GSVeditRuleRow,
.GSVruleRow{
	border-top: 1px solid var(--grey-300);
}

.GSVruleTable{
	border-radius: var(--border-radius);
	border: 1px solid var(--grey-300);
	background-color: var(--grey-100);
	overflow: hidden;
	width: 100%;
}
.GSVeditRuleHeading,
.GSVruleHeading{
	border-bottom: 1px solid var(--grey-300);
	background-color: var(--grey-200);
}
.GSVeditRuleHeading>div,
.GSVruleHeading>div{
	font-weight: var(--semibold);
	color: var(--grey-800);
}
.GSVheading{
	padding-left: 18px;
	padding-right: 12px;
	min-height: 32px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding-top: 16px;
	padding-bottom: 16px;
}
.GSVruleData{
	text-align: left;
	border-left: 0px;
	border-right: 0px;
	padding: 18px;
	color: var(--grey-600);
	/* border-top: 1px solid var(--grey-300); */
}
.GSVpaddingLeft{
	padding-left: 18px !important;
}
.GSVruleVal{
	display : grid;
   box-sizing: border-box;
	margin: 12px 16px;
	align-items: center;
	/* border-bottom: 1px solid var(--grey-300); */
	color: var(--grey-800);
}
.GSVpaddingRight{
	padding-right: 18px !important;
}
.GSVdeleteRow{
	text-align: left;
	border-left: 0px;
	border-right: 0px;
	padding: 12px;
	padding-left: 0px;
	color: var(--grey-800);
}
a.GSVruleData{
	color: var(--blue);
	text-decoration: none;
}
a.GSVruleData:hover{
	text-decoration: underline;
}
.GSVcolon{
	letter-spacing: 0.05em;
	color: var(--grey-600);
}
.GSVimportant{
	align-items: center;
	padding: 24px;
	padding-left: 16px;
	margin-bottom: 18px;
	border-radius: 4px;
	border: 1px solid var(--grey-300);
	color: var(--grey-800);
	background-color: var(--grey-100);

}
.GSVsshPort,
.GSVhttpPort{
	width: 80px;
}
.GSVportHeading{
	padding-left: 4px;
}
.GSVsshPort,
.GSVhttpPort{
	margin-left: 4px;
}
.GSVport{
	margin-left: 8px;
}
.GSVon,
.GSVand{
	margin-left: -20px;
}
.GSVproviderDiv{
	margin-left: -8px;
}
.GSVproviderHeading{
	padding-left: 0px;
	margin-left: -6px;
}


.HASHTAGtagStyle {
   display: inline;
   border-radius: 6px;
   padding-left: 6px;
   padding-right: 6px;
   letter-spacing: 0.03em;
   font-weight: 400;
}
.HASHTAGbold{
   font-weight: 900;
}
.HLPcontent{
   display: grid;
	grid-template-columns: auto 1fr;
   height: 100%;
   overflow: hidden;
}

.HLPhidden {
   opacity: 0;
}

.HLPstrong {
   font-weight: bold;
}

.HLPindexContainer {
   margin-right: 4px;
}

.HLPresizeControl {
	right: -6px;
	top: 0;
	bottom: 0;
	width: 10px;
	padding: 0;
	border: 0;
	position: absolute;
	outline: none;
	cursor: ew-resize;
	background-color: transparent;
}

.HLPresizeShadow {
	bottom: 0;
	top: 0;
	right: 4px;
	pointer-events: none;
	position: absolute;
	width: 3px;
	transition: 150ms ease-out;
   background-color: var(--grey-300);
}

.HLPresizeControl:hover{
	background: var(--blue);
	transition: 75ms ease-in;
}

.HLPindexContainer {
	position: relative;
   overflow: hidden;
}

.HLPindexPane {
   height: 100%;
	position: relative;
   padding: 4px;
}

.HLPlistBody {
	position: relative;
   overflow-y: auto;
	height: calc(100% - 50px);
}

.HLPrightPane {
   overflow: auto;
	height: 100%;
}

.HLPsearch {
   padding: 6px;
   margin-top: 10px;
   margin-bottom: 10px;
   width: auto;
}

.HLPcontainer {
   padding-top: 0;
   position: relative;
	color: var(--grey-800);
	padding: 10px;
}

.HLPheaderSection {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: start;
	position: sticky;
	top: 0;
	background: var(--white);
	min-height: 56px;
	padding: 20px 4px;
	z-index: 2;
	width: 100%;
}

.HLPheaderSection > div:first-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.HLPheaderSection > div:nth-child(2) {
	overflow: hidden;
	white-space: normal;
}
.HLPeditButton{
	margin-top: 12px;
	margin-right: 12px;
}

.HLPbuttonGroup{
	margin-top: 8px;
}

.HLPheading {
	flex-shrink: 0;
   margin-right: 24px;
	color: var(--blue-dark) !important;
	font-weight: 400;
	font-size: 18px;
}

.HLPsummary {
	flex-grow: 1;
	color: var(--grey);
	font-weight: 400;
	font-size: 13px;
	margin-top: 12px;
	margin-right: 24px;
}

.HLPeditSummary, .HLPeditName {
	font-weight: 400;
	font-size: 13px;
	margin-top: 3px;
	margin-right: 24px;
}

.HLPeditSummary {
	flex-grow: 1;
}

.HLPeditName {
	width: 20%;
}

.HLPlink{
	font-size: 13px;
   margin-top: 3px;
   color: var(--black);
}

.HLPlink:hover {
   cursor: pointer;
   color: var(--blue-dark);
   text-decoration: underline;
}

.HLPdragging {
   opacity: 0.25;
}

.HLPfunctionName{
   cursor: pointer;
   color: var(--blue-dark);
}

.HLPviewTableParameters {
	grid-template-columns: 120px 3fr;
}

.HLPeditTableParameters {
	grid-template-columns: 32px 40px 120px 1fr 32px;
}

.HLPviewListParameters {
	grid-template-columns: 40px 3fr;
}

.HLPeditListParameters {
	grid-template-columns: 32px 3fr 32px;
}

.HLProwHeader.HLPdescriptionHeader {
   border-bottom: 0;
}

.HLProwHeader {
	margin-top: 24px;
	display: grid;
	border: 1px solid var(--grey-400);
	background: var(--grey-200);
	color: var(--grey-600);
	font-size: 10px;
   text-align: left;
}

.HLPheaderSection + .HLProwHeader {
   margin-top: 1px;
}

.HLProwSubHeader {
	display: grid;
	border: 1px solid var(--grey-400);
   border-top: 0;
	background: var(--grey-100);
	color: var(--grey-600);
	font-size: 9px;
}

.HLProwHeader div,
.HLProwSubHeader div {
	padding: 6px 8px;
	font-size: 9px;
	font-family: var(--font-buttons);
	letter-spacing: 0.05em;
}

.HLProw {
	display: grid;
	min-height: 32px;
}

.HLProw .HLPcell {
	border: 1px solid var(--grey-400);
	border-left: 1px solid rgba(var(---grey-300), 0.65);
   border-top: 0;
   border-right: 0;
	background: var(--white);
}

.HLProw .HLPcell {
   padding: 6px 8px;
	align-items: center;
}

.HLPview {
   overflow: hidden;
   resize: none;
}

.HLPedit {
   height: 12em;
}

.HLProwHeaderWithToggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.HLPparameterSwitcherToggle {
	display: grid;
	grid-template-columns: 1fr 30px;
	align-items: center;
}
.HLPparameterSwitcherToggle .TOGtoggle {
	height: 12px;
	width: 28px;
	padding: 0px;
	margin-left: 4px;
}

.HLPparameterSwitcherToggle .TOGtoggle .TOGswitch {
	padding: 0px !important;
}

.HLPinput {
   color: inherit;
   font: inherit;
   padding: 0.5rem;
}

.HLProw > div:first-child {
	border-left: 1px solid var(--grey-400);
}

.HLProw > div:last-child {
	border-right: 1px solid var(--grey-400);
}

.HLPvalue {
	word-break: break-word;
}

.HLPblankRow{
	color: var(--grey-600) !important;
}

.HLPsaveButtonDisabled,
.HLPsaveButtonDisabled:hover {
   background-color: var(--green-light);
   color: var(--white);
   cursor: not-allowed;
}

.HLPeditButtonDisabled,
.HLPeditButtonDisabled:active,
.HLPeditButtonDisabled:hover {
	background-color: var(--grey-300) !important;
   cursor: not-allowed;
}

.HLPeditButton.BUTTONstandard,
.HLPsaveButton,
.HLPcancelButton {
	height: 24px;
	padding: 0px 12px;
}

.HLPcheckBox {
   justify-content: center;
   text-align: center;
}

.HLPindex {
   text-align: center;
}

.HLPdeleteRow {
	background: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.HLPmoveRow,
.HLPdeleteRow {
	border: 1px solid var(--grey-400);
	border-bottom: 0px;
	border-right: 1px solid rgba(var(--grey-300), 0.65);
	background-color: var(--grey-100) !important;
	color: var(--grey-600);
   justify-content: center;
}

.HLPcheckBox input,
.HLPdeleteRow {
   cursor: pointer;
}

.HLPmoveRow {
   cursor: move;
}

.HLPaddRow {
   cursor: pointer;
	color: var(--blue);
	font-family: var(--font-buttons);
	font-weight: 500;
}

/* Add shadow to row upon "move row" icon hover */
 .HLPmoveRow:hover,
 .HLPmoveRow:hover ~ * {
	box-shadow: 0 3px 8px rgb(0 0 0 / 25%);
	clip-path: inset(-5px 0px -11px 0px);
}

 .HLPmoveRow:hover {
	clip-path: inset(-5px 0px -11px -8px);
}

 .HLPmoveRow:hover ~ .HLPcell:last-child {
	clip-path: inset(-5px -8px -11px 0px);
}

.HLPvalue a {
	color: var(--blue);
	text-decoration: none;
}

.HLPvalue a:hover {
	text-decoration: underline;
}
.HLPicon::before{
	content: url(/HLP/HLPicon.svg) !important;
	margin-right: 6px;
	height: 16px;
	width: 16px;
}
.PRJicon-file-untracked.HLPicon::before{
	content: url(/HLP/HLPiconUntracked.svg) !important;
}
.PRJicon-file-renamed.HLPicon::before,
.PRJicon-file-modified.HLPicon::before{
	content: url(/HLP/HLPiconModified.svg) !important;
}

.HLPparameterDesc .ql-editor {
   padding: 0 !important;
}
.HLPparameterDesc .ql-tooltip {
   z-index: 5;
}

.HLPwindowIcon {
	background-image: url("/HLP/HLPtoolbarHelpIcon.svg");
}

.HSVdiffToolbar {
	border-bottom: 1px solid var(--grey-400);
	display: flex;
	align-items: center;
	padding: 2px 16px;
	color: var(--grey-700);
	min-width: 0;
	background-color: var(--grey-200);
	padding: 5px;
}
.HSVtoolbarFilename {
	display: inline-block;
	padding-right: 18px;
	font-size: 12px;
	font-weight: 600;
	color: var(--blue);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex-grow: 1;
	user-select: none;
}
.HSVdiffWrapper{
   overflow-y: auto;
   height: 100%;
   border: 1px solid var(--grey-400);
   border-radius: var(--border-radius);
   margin-bottom: 12px;
}
.HSVtoolbarLines {
	display: flex;
	align-items: baseline;
	padding-left: 16px;
	padding-right: 16px;
	font-size: 10px;
	flex-shrink: 0;
	user-select: none;
}
.HSVtoolbarLines .HSVlinesInfo {
	margin: 0 7px;
}
.HSVtoolbarLines .HSVlinesInfo .HSVlinesAdded {
	color: var(--teal);
	font-weight: 600;
}
.HSVtoolbarLines .HSVlinesInfo .HSVlinesDeleted {
	color: var(--purple);
	font-weight: 600;
}
.HSVtoolbarLines .HSVlinesInfo .HSVlinesChanged {
	color: #aaaaaa;
	font-weight: 600;
}
.HSVtoolbarDisplay {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
.HSVdiff {
	position: relative;
	height: 100%;
	overflow: auto;
}
.HSVdiff .HSVdiffBlock {
   padding: 20px;
   color: var(--grey-500);
}
.HSVdiffToolbarToggle{
	margin-right: 10px;
	margin-left: 4px;
	display: inline;
   background-repeat: no-repeat;
   background-position: center;
	content: url(/SRCH/SRCHdown.svg);
	cursor: pointer;
}
.HSVhide .HSVdiffToolbarToggle{
	content: url(/SRCH/SRCHup.svg);
	transform: rotate(90deg);
}
.HSVhide .HSVdiff{
	display: none;
}	
.HSVhide .HSVdiffToolbar{
	border-bottom: unset;
}
.HSVtoolbarFilename{
	cursor: pointer;
}
.HSVtoolbarFilename:hover{
	text-decoration: underline;
}
.HSVdiffMaxLines{
	font-size: 11px;
	color: var(--grey-500);
	font-family: var(--font-monospace);
	text-align: center;
	line-height: 36px;
}


.IMPwindow {
	top: 50px;
	height: calc(100% - 104px);
}
.IMPwindow .POPpopoutCard-content {
	height: calc(100% - 61px);
	padding: 0px;
}
.IMPmodal {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr auto;
	height: 100%;
	overflow: hidden;
	width: 100%;
}
.IMPimportListContent,
.IMPfromFileDiv,
.IMPtoFileDiv{
	overflow: auto;
}
.IMPorHeader{
	font-family: var(--font-buttons);
	color: var(--grey-500);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.05em;
	margin-bottom: 24px;
	flex-grow: 1;
	text-align: center;
}
.IMPheader{
	font-family: var(--font-buttons);
	color: var(--grey-500);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.05em;
	margin-bottom: 24px;
}
.IMPimportSection{
	box-sizing: border-box;
	padding: 32px;
	padding-bottom: 0px;
	display: grid;
	grid-template-rows: auto 1fr auto;
	height: 100%;
	overflow: hidden;
}
.IMPsection{
	box-sizing: border-box;
	padding: 32px;
	height: 100%;
	overflow: hidden;
}
.IMPtoFileDiv,
.IMPfromFileDiv{
	border: 1px solid var(--grey-400);
	border-radius: var(--border-radius);
	flex-grow: 1;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: calc(100% - 32px);
}
.IMPtoFileSearchDiv,
.IMPfromFileSearchDiv{
	padding: 0px 8px;
	border-bottom: 1px solid var(--grey-400);
}
.IMPtoFileSearch,
.IMPfromFileSearch{
	outline: none;
	border: none;
	padding-left: 0px;
	padding-right: 0px;
	background-image: url(/SMPL/SMPLiconFilter.svg);
	background-repeat: no-repeat;
	background-position: 0px center;
	padding-left: 24px;
}
/* .IMPfromFilePathHeader,
.IMPtoFilePathHeader,
.IMPfromFilePath,
.IMPtoFilePath{
	display: inline-block;
	color: var(--grey-500);
} */
.IMPtoFileViewing,
.IMPfromFileViewing{
	padding-top: 24px;
	padding-bottom: 24px;
}
.IMPaccordian{
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: auto;
	cursor: pointer;
	padding-left: 8px;
}
.IMPmodal *{
	-webkit-user-select: none;
	-moz-user-select: none;  
	-ms-user-select: none;     
	user-select: none;          
 }
.IMPsegmentgroupFolder *,
.IMPmessageFolder *,
.IMPsegmentFolder *,
.IMPcompositeFolder *,
.IMPsectionTitle *,
.IMPnameNode *{
	display: inline-block;
}
.IMPheaderTitle{
	display: flex;
	width: 100%;
}
.IMPfolderNode{
	content: url(/IMP/images/IMPfolderOpen.svg);
}
.IMPtrayClosed .IMPfolderNode,
.IMPclosed .IMPfolderNode{
	content: url(/IMP/images/IMPfolderClosed.svg);
}
.IMPtitle{
	flex-grow: 1;
	padding-left: 8px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.IMPcontent > div:hover{
	background-color: rgba(179, 221, 245, 0.25);
}
.IMPcontent.IMPtrayClosed{
	display: none;
}
.IMPcontent.IMPtrayOpen{
  padding-left: 24px;
}
.IMPcontent > div,
.IMPlistRow > div{
	display: flex;
	align-items: center;
}
.IMPsegmentgroupFolder {
	position: sticky;
	top: 29px;
	bottom: 60px;
 }
.IMPmatchingFolder,
.IMPsegmentgroupFolder,
.IMPmessageFolder,
.IMPsegmentFolder,
.IMPcompositeFolder {
  height: 30px;
  min-height: 30px;
  display: flex;
  align-items: center;
  width: 100%;
  background-color: white;
  z-index: 1;
}
.IMPlistTitle{
	padding-left: 8px;
}
.IMPsegmentDefinitions::before{
	content:url(/TREE/images/EDIiconFolderRepeating.svg);
	margin-right: 6px;
	height: 16px;
	width: 16px;
}
.WNDtitleIcon.IMPsegmentDefinitions::before{
	content: url(/TREE/images/EDIiconFolderRepeating.svg);
}
.IMPclosed > .IMPnameNode > .IMPsegmentDefinitions::before,
.IMPclosed > .IMPsegmentDefinitions::before{
	content: url(/TREE/images/EDIiconFolderRepeating.svg);
}
.IMPmessageDef::before{
	content: url(/TREE/images/EDIiconMessage.svg);
	margin-right: 6px;
	height: 16px;
	width: 16px;
}
.IMPcompositeDef::before{
	content: url(/TREE/images/EDIiconComposite.svg);
	margin-right: 6px;
	height: 16px;
	width: 16px;
}
.IMPsegmentDef::before{
	content: url(/TREE/images/EDIiconSegment.svg);
	margin-right: 6px;
	height: 16px;
	width: 16px;
}
.IMPtoFileContent,
.IMPfromFileContent{
	height: 100%;
	overflow: hidden;
}
.IMPmessageFolder {
	position: sticky;
	top: 0px;
	bottom: 120px;
}
.IMPsegmentgroupFolder {
	position: sticky;
	top: 29px;
	bottom: 90px;
}
.IMPsegmentFolder {
	position: sticky;
	top: 59px;
	bottom: 60px;
}
.IMPcompositeFolder {
	position: sticky;
	top: 89px;
	bottom: 30px;
}
.IMPmatchingFolder {
	position: sticky;
	top: 119px;
	bottom: 0px;
}
.IMPimportBanner{
	display: flex;
	align-items: center;
	justify-content: right;
	height: 42px;
	background: var(--white);
	margin-bottom: 8px;
}
.IMPdisabled{
	opacity: 0.5;
}
.IMPmatchingValue,
.IMPnodeValue{
	font-family: var(--font-monospace);
	padding: 2px 0px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	min-width: 8px;
	flex-grow: 1;
}
.IMPtrayOpen,
.IMPtrayClosed{
	cursor: pointer !important;
}
.IMPdisabled{
	cursor: default !important;
}
.IMPmessage{
	text-align: center;
	border: none;
	color: var(--grey-400);
	letter-spacing: 0.05em;
	max-height: calc(100% - 24px);
	font-size: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
.IMPdeleteMatchingItem,
.IMPcannotDeleteListItem,
.IMPdeleteListItem{
	display: inline;
	cursor: pointer;
	text-align: right;
	padding-right: 16px;
}
.IMPcannotDeleteListItem{
   color: var(--grey-400);
}
.IMPlistRow{
	display: flex;
	align-items: center;
}
.IMPlistRow > div{
	display: flex;
	align-items: center;
}
.IMPmatchingRule::before{
	content: url(/IMP/images/IMPmessageDefId.svg) !important;
}
.IMPlibrarySelect{
	font-family: var(--font-monospace);
}
.IMPtoFilePathDiv,
.IMPfromFilePathDiv{
	display: grid;
	padding: 8px;
	padding-bottom : 4px;
	border-top: 1px solid var(--grey-400);
}
.IMPtoFilePathDiv{
	grid-template-columns: auto 1fr 54px;
}
.IMPfromFilePathDiv{
	grid-template-columns: auto 1fr 42px 115px;
}
.IMPfromFilePathHeader,
.IMPtoFilePathHeader{
	font-weight: var(--semibold);
	padding-right: 4px;
}
.IMPfromFilePathHeader,
.IMPtoFilePathHeader,
.IMPfromFilePath,
.IMPtoFilePath{
	display: inline-block;
	color: var(--grey-500);
	padding: 12px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.IMPfromFile,
.IMPfromLibrary,
.IMPtoFile{
	padding: 12px;
}
.IMPimportBanner{
	display: flex;
	align-items: center;
	justify-content: right;
	height: 42px;
	background: var(--white);
	padding-right: 34px;
	padding-bottom: 32px;
}
.IMPimportListContent{
	border: 1px solid var(--grey-400);
	border-radius: var(--border-radius);
	flex-grow: 1;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: calc(100% - 46px);
	padding: 12px;	
}
.IMPimportListContent .IMPlistRow:hover,
.IMPtoFileContent .IMPlistRow:hover,
.IMPfromFileContent .IMPlistRow:hover{
	background-color: rgba(179, 221, 245, 0.25);
}
.IMPlibrarySkeleton{
	display: grid;
	grid-template-columns: 100px 1fr;
}
.IMPlibrarySkeleton .FORMlabel{
	text-align: right;
	padding: 12px;
}

.INITsetupAction{
   line-height: 12px;
   padding: 12px 16px;
   width: 8em;
   text-align: center;
}

.INITbackground {
	background: linear-gradient(#1A3664, #0164AD);
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-attachment: fixed;
}

#INITcomponentShape1 {
	width: 40px;
	height: 10px;
	border-radius: 10px;
	opacity: 0.02;
	background: transparent;
	box-shadow: 1916px 1127px #FFF , 1089px 1045px #FFF , 1255px 1538px #FFF , 625px 1608px #FFF , 889px 794px #FFF , 1259px 351px #FFF , 610px 1184px #FFF , 1803px 1205px #FFF , 642px 649px #FFF , 1961px 407px #FFF , 458px 899px #FFF , 1349px 1471px #FFF , 1248px 122px #FFF , 1096px 1801px #FFF , 887px 461px #FFF , 676px 1820px #FFF , 1071px 669px #FFF , 1743px 1817px #FFF , 1477px 732px #FFF , 660px 1203px #FFF , 1610px 1877px #FFF , 1985px 172px #FFF , 770px 263px #FFF , 1469px 1863px #FFF , 122px 707px #FFF , 1046px 33px #FFF , 1458px 649px #FFF , 1864px 183px #FFF , 1849px 768px #FFF , 602px 712px #FFF , 1530px 1955px #FFF , 1033px 651px #FFF , 181px 1933px #FFF , 427px 258px #FFF , 715px 1582px #FFF , 116px 994px #FFF , 586px 1091px #FFF , 212px 385px #FFF , 87px 1395px #FFF , 1242px 135px #FFF , 1171px 558px #FFF , 123px 1819px #FFF , 1311px 535px #FFF , 1219px 1642px #FFF , 1558px 599px #FFF , 1821px 1776px #FFF , 556px 7px #FFF , 1799px 242px #FFF , 310px 909px #FFF , 1569px 1149px #FFF , 1544px 34px #FFF , 333px 1628px #FFF , 1182px 165px #FFF , 1652px 108px #FFF , 1481px 641px #FFF , 1991px 1950px #FFF , 1816px 699px #FFF , 315px 1970px #FFF , 648px 271px #FFF , 1494px 679px #FFF , 75px 1628px #FFF , 1416px 1192px #FFF , 1460px 1572px #FFF , 74px 125px #FFF , 1388px 1805px #FFF , 689px 215px #FFF , 797px 1334px #FFF , 976px 617px #FFF , 1828px 789px #FFF , 724px 1397px #FFF , 288px 1267px #FFF , 428px 1331px #FFF , 1324px 383px #FFF , 777px 123px #FFF , 460px 138px #FFF , 1552px 427px #FFF , 301px 696px #FFF , 163px 285px #FFF , 1709px 408px #FFF , 1924px 1425px #FFF , 1043px 956px #FFF , 954px 1861px #FFF , 673px 176px #FFF , 1779px 1230px #FFF , 564px 1998px #FFF , 1068px 1362px #FFF , 1456px 1604px #FFF , 531px 1574px #FFF , 1529px 1813px #FFF , 97px 842px #FFF , 1359px 1847px #FFF , 322px 243px #FFF , 1556px 395px #FFF , 1662px 1057px #FFF , 54px 1281px #FFF , 665px 731px #FFF , 1519px 486px #FFF , 1028px 437px #FFF , 251px 1499px #FFF , 1349px 1021px #FFF , 1242px 1620px #FFF , 1818px 1722px #FFF , 1635px 1561px #FFF , 672px 635px #FFF , 1992px 563px #FFF , 1821px 1221px #FFF , 1449px 1264px #FFF , 315px 1383px #FFF , 677px 1513px #FFF , 738px 235px #FFF , 1913px 558px #FFF , 1008px 896px #FFF , 39px 1580px #FFF , 1001px 561px #FFF , 1433px 896px #FFF , 1352px 30px #FFF , 1623px 1494px #FFF , 710px 1037px #FFF , 339px 1034px #FFF , 1942px 1375px #FFF;
	animation: animComponentShape 50s linear infinite;
 }
 #INITcomponentShape1:after {
	content: " ";
	position: absolute;
	top: 2000px;
	width: 1px;
	height: 1px;
	background: transparent;
	box-shadow: 1916px 1127px #FFF , 1089px 1045px #FFF , 1255px 1538px #FFF , 625px 1608px #FFF , 889px 794px #FFF , 1259px 351px #FFF , 610px 1184px #FFF , 1803px 1205px #FFF , 642px 649px #FFF , 1961px 407px #FFF , 458px 899px #FFF , 1349px 1471px #FFF , 1248px 122px #FFF , 1096px 1801px #FFF , 887px 461px #FFF , 676px 1820px #FFF , 1071px 669px #FFF , 1743px 1817px #FFF , 1477px 732px #FFF , 660px 1203px #FFF , 1610px 1877px #FFF , 1985px 172px #FFF , 770px 263px #FFF , 1469px 1863px #FFF , 122px 707px #FFF , 1046px 33px #FFF , 1458px 649px #FFF , 1864px 183px #FFF , 1849px 768px #FFF , 602px 712px #FFF , 1530px 1955px #FFF , 1033px 651px #FFF , 181px 1933px #FFF , 427px 258px #FFF , 715px 1582px #FFF , 116px 994px #FFF , 586px 1091px #FFF , 212px 385px #FFF , 87px 1395px #FFF , 1242px 135px #FFF , 1171px 558px #FFF , 123px 1819px #FFF , 1311px 535px #FFF , 1219px 1642px #FFF , 1558px 599px #FFF , 1821px 1776px #FFF , 556px 7px #FFF , 1799px 242px #FFF , 310px 909px #FFF , 1569px 1149px #FFF , 1544px 34px #FFF , 333px 1628px #FFF , 1182px 165px #FFF , 1652px 108px #FFF , 1481px 641px #FFF , 1991px 1950px #FFF , 1816px 699px #FFF , 315px 1970px #FFF , 648px 271px #FFF , 1494px 679px #FFF , 75px 1628px #FFF , 1416px 1192px #FFF , 1460px 1572px #FFF , 74px 125px #FFF , 1388px 1805px #FFF , 689px 215px #FFF , 797px 1334px #FFF , 976px 617px #FFF , 1828px 789px #FFF , 724px 1397px #FFF , 288px 1267px #FFF , 428px 1331px #FFF , 1324px 383px #FFF , 777px 123px #FFF , 460px 138px #FFF , 1552px 427px #FFF , 301px 696px #FFF , 163px 285px #FFF , 1709px 408px #FFF , 1924px 1425px #FFF , 1043px 956px #FFF , 954px 1861px #FFF , 673px 176px #FFF , 1779px 1230px #FFF , 564px 1998px #FFF , 1068px 1362px #FFF , 1456px 1604px #FFF , 531px 1574px #FFF , 1529px 1813px #FFF , 97px 842px #FFF , 1359px 1847px #FFF , 322px 243px #FFF , 1556px 395px #FFF , 1662px 1057px #FFF , 54px 1281px #FFF , 665px 731px #FFF , 1519px 486px #FFF , 1028px 437px #FFF , 251px 1499px #FFF , 1349px 1021px #FFF , 1242px 1620px #FFF , 1818px 1722px #FFF , 1635px 1561px #FFF , 672px 635px #FFF , 1992px 563px #FFF , 1821px 1221px #FFF , 1449px 1264px #FFF , 315px 1383px #FFF , 677px 1513px #FFF , 738px 235px #FFF , 1913px 558px #FFF , 1008px 896px #FFF , 39px 1580px #FFF , 1001px 561px #FFF , 1433px 896px #FFF , 1352px 30px #FFF , 1623px 1494px #FFF , 710px 1037px #FFF , 339px 1034px #FFF , 1942px 1375px #FFF;
 }
 
 #INITcomponentShape2 {
	width: 60px;
	height: 15px;
	border-radius: 10px;
	opacity: 0.05;
	background: transparent;
	box-shadow: 4px 1840px #FFF , 690px 1434px #FFF , 931px 544px #FFF , 1534px 1924px #FFF , 1064px 1948px #FFF , 1295px 1153px #FFF , 1383px 1600px #FFF , 923px 599px #FFF , 654px 426px #FFF , 1702px 1413px #FFF , 1933px 1582px #FFF , 932px 641px #FFF , 1074px 103px #FFF , 1750px 1304px #FFF , 1862px 1238px #FFF , 1135px 128px #FFF , 748px 1493px #FFF , 344px 670px #FFF , 1672px 1935px #FFF , 739px 1262px #FFF , 1158px 681px #FFF , 729px 1758px #FFF , 299px 161px #FFF , 1264px 1313px #FFF , 1143px 408px #FFF , 1061px 662px #FFF , 1948px 103px #FFF , 1926px 785px #FFF , 661px 1333px #FFF , 322px 484px #FFF , 1681px 1491px #FFF , 1863px 310px #FFF , 476px 1888px #FFF , 1802px 778px #FFF , 242px 1740px #FFF , 904px 621px #FFF , 1449px 131px #FFF , 1817px 772px #FFF , 769px 1279px #FFF , 191px 1884px #FFF , 1489px 181px #FFF , 746px 1754px #FFF , 1278px 1011px #FFF , 986px 866px #FFF , 1109px 1437px #FFF , 1791px 1010px #FFF , 777px 985px #FFF , 1375px 1530px #FFF , 978px 1683px #FFF , 100px 1395px #FFF , 864px 192px #FFF , 367px 459px #FFF , 804px 219px #FFF , 764px 1594px #FFF , 1447px 1614px #FFF , 1982px 752px #FFF , 444px 264px #FFF , 178px 217px #FFF , 1791px 1996px #FFF , 1618px 1684px #FFF;
	animation: animComponentShape 100s linear infinite;
 }
 #INITcomponentShape2:after {
	content: " ";
	position: absolute;
	top: 2000px;
	width: 2px;
	height: 2px;
	background: transparent;
	box-shadow: 4px 1840px #FFF , 690px 1434px #FFF , 931px 544px #FFF , 1534px 1924px #FFF , 1064px 1948px #FFF , 1295px 1153px #FFF , 1383px 1600px #FFF , 923px 599px #FFF , 654px 426px #FFF , 1702px 1413px #FFF , 1933px 1582px #FFF , 932px 641px #FFF , 1074px 103px #FFF , 1750px 1304px #FFF , 1862px 1238px #FFF , 1135px 128px #FFF , 748px 1493px #FFF , 344px 670px #FFF , 1672px 1935px #FFF , 739px 1262px #FFF , 1158px 681px #FFF , 729px 1758px #FFF , 299px 161px #FFF , 1264px 1313px #FFF , 1143px 408px #FFF , 1061px 662px #FFF , 1948px 103px #FFF , 1926px 785px #FFF , 661px 1333px #FFF , 322px 484px #FFF , 1681px 1491px #FFF , 1863px 310px #FFF , 476px 1888px #FFF , 1802px 778px #FFF , 242px 1740px #FFF , 904px 621px #FFF , 1449px 131px #FFF , 1817px 772px #FFF , 769px 1279px #FFF , 191px 1884px #FFF , 1489px 181px #FFF , 746px 1754px #FFF , 1278px 1011px #FFF , 986px 866px #FFF , 1109px 1437px #FFF , 1791px 1010px #FFF , 777px 985px #FFF , 1375px 1530px #FFF , 978px 1683px #FFF , 100px 1395px #FFF , 864px 192px #FFF , 367px 459px #FFF , 804px 219px #FFF , 764px 1594px #FFF , 1447px 1614px #FFF , 1982px 752px #FFF , 444px 264px #FFF , 178px 217px #FFF , 1791px 1996px #FFF , 1618px 1684px #FFF;
 }
 
 #INITcomponentShape3 {
	width: 100px;
	height: 25px;
	border-radius: 25px;
	opacity: 0.08;
	background: transparent;
	box-shadow: 1796px 500px #FFF , 1074px 1639px #FFF , 716px 1600px #FFF , 944px 315px #FFF , 265px 1762px #FFF , 664px 1353px #FFF , 688px 1569px #FFF , 842px 774px #FFF , 1028px 1950px #FFF , 1144px 1172px #FFF , 690px 1567px #FFF , 801px 860px #FFF , 1854px 1588px #FFF , 1665px 1522px #FFF , 503px 38px #FFF , 521px 674px #FFF , 1304px 430px #FFF , 1036px 911px #FFF , 1398px 1233px #FFF , 1410px 1110px #FFF , 1526px 200px #FFF , 1021px 887px #FFF , 155px 778px #FFF , 1782px 579px #FFF , 1898px 1458px #FFF , 1682px 1447px #FFF , 1440px 1250px #FFF , 1089px 1624px #FFF , 1282px 1427px #FFF , 1339px 1840px #FFF;
	animation: animComponentShape 150s linear infinite;
 }
 #INITcomponentShape3:after {
	content: " ";
	position: absolute;
	top: 2000px;
	width: 3px;
	height: 3px;
	background: transparent;
	box-shadow: 1796px 500px #FFF , 1074px 1639px #FFF , 716px 1600px #FFF , 944px 315px #FFF , 265px 1762px #FFF , 664px 1353px #FFF , 688px 1569px #FFF , 842px 774px #FFF , 1028px 1950px #FFF , 1144px 1172px #FFF , 690px 1567px #FFF , 801px 860px #FFF , 1854px 1588px #FFF , 1665px 1522px #FFF , 503px 38px #FFF , 521px 674px #FFF , 1304px 430px #FFF , 1036px 911px #FFF , 1398px 1233px #FFF , 1410px 1110px #FFF , 1526px 200px #FFF , 1021px 887px #FFF , 155px 778px #FFF , 1782px 579px #FFF , 1898px 1458px #FFF , 1682px 1447px #FFF , 1440px 1250px #FFF , 1089px 1624px #FFF , 1282px 1427px #FFF , 1339px 1840px #FFF;
 }

@keyframes animComponentShape {
	from {
		transform: translateY(0px);
	}
	to {
		transform: translateY(-2000px);
	}
}

.INITcontainer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.INITinstallerContents {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: -100px;
}

.INITiguanaLogo {
	margin-bottom: 4px;
	margin-right: -24px;
}

.INITiguanaLogo svg {
	filter: drop-shadow(0px 3px 2px rgb(0 0 0 / 0.4));
	width: 220px;
	height: 75px;
}

.INITiguanaTagline {
	font-family: var(--font-buttons);
	font-weight: 400;
	font-size: 22px;
	letter-spacing: 0.02em;
	background: -webkit-linear-gradient(var(--blue-lighter), #89C6E9);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
	margin-bottom: 40px;
}

.INITmodal {
	width: 740px;
	height: 476px;
	border-radius: 4px;
	background: var(--white);
	box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.5);
	overflow: hidden;
	display: grid;
	grid-template-columns: 200px 1fr;
}

.INITmodalSidebar {
	padding: 40px 32px;
}

.INITstep {
	padding: 10px 0px;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}

.INITverticalStepper {
	position: relative;
}

/* regular step */
.INITstep .INITcircle {
	background-color: var(--white);
	border: 1px solid var(--grey-400);
	border-radius: 100%;
	width: 18px;
	height: 18px;
	display: inline-block;
	font-family: var(--font-buttons);
	font-size: 10px;
	font-weight: 500;
	color: var(--grey-500);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* active step */
.INITstep.INITactive .INITcircle {
	border: 1px solid var(--blue);
	color: var(--blue);
	font-weight: 600;
	box-shadow: 0 3px 5px rgba(var(---blue-darker),0.35);
}

/* completed step */
.INITstep.INITcompleted .INITcircle {
	background: var(--blue);
	border: 1px solid var(--blue);
	color: var(--blue);
	font-weight: 600;
}

.INITstep.INITcompleted .INITcircle::after {
	content: " ";
	position: absolute;
	top: 1px;
	left: 1px;
	background: var(--blue);
	border: 3px solid var(--blue-lighter);
	border-radius: 100%;
	display: block;
	width: 12px;
	height: 12px;
}

.INITstep .INITline {
	top: 20px;
	left: 9px;
	height: 100%;
	position: absolute;
	border-left: 1px solid var(--grey-400);
}

.INITstep.INITcompleted .INITline {
	border-left: 1px solid var(--blue);
}

.INITstep:last-child .INITline {
	border-left: 1px solid transparent;
	z-index: -1;
	/* hide the line */
}

.INITstepLabel {
	font-family: var(--font-buttons);
	font-size: 11px;
	font-weight: 500;
	color: var(--grey-600);
	margin-left: 8px;
}

.INITactive .INITstepLabel {
	color: var(--grey-800);
	font-weight: 600;
}


.INITmodalMainArea {
	padding: 32px 48px;
	color: var(--grey-800);
	font-size: 14px;
	position: relative;
	overflow: hidden;
}

.INITfooter {
	box-sizing: border-box;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	padding-left: 48px;
	padding-right: 48px;
	margin-bottom: 20px;
}

.INITbtnGroup {
	display: flex;
	justify-content: space-between;
	margin-top: 16px;
}

.INITmodalHeading {
	font-family: var(--font-buttons);
	color: var(--blue-dark);
	font-size: 18px;
	font-weight: 400;
}

.INITsetupContainer {
	display: flex;
	align-items: center;
	gap: 8px;
}


/* 1. Welcome Screen */

.INITfeatureGrid {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 16px;
	row-gap: 24px;
	margin-top: 40px;
}

.INITfeatureGrid div {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.INITfeature {
	font-family: var(--font-buttons);
	font-weight: 600;
	color: var(--grey-700);
	font-size: 13px;
	margin-bottom: 6px;
}

.INITfeatureDesc {
	font-size: 12px;
	color: var(--grey-600);
}

.INITstartBtn {
	position: absolute;
	right: 48px;
	bottom: 0px;
}


.INITinstall-text {
	font-size: 12px;
}

/* Define the spinner animation */
@keyframes INITspin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* Create the spinner element */
.INITspinner {
	border: 4px solid #f3f3f3;
	border-top: 4px solid #3498db;
	border-radius: 50%;
	width: 16px;
	height: 16px;
	animation: INITspin 2s linear infinite;
}


.INITinstallLocation {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr auto auto;
}



/* 2. Git Setup Screen */

.INITgitInstallContainer {
	border: 1px solid var(--grey-300);
	border-radius: var(--border-radius);
	padding: 12px 16px 16px 16px;
	background: var(--grey-100);
	margin-top: 24px;
}

.INITgitInstallContainer p {
	margin-top: 0px;
}

.INITinstallGit {
	display: inline-block;
	padding: 8px 12px;
	font-size: 10px;
	background-color: var(--blue);
}

.INITinstallGit:hover {
	background-color: #34ACF0;
}

.INITinstallGit:active {
	background-color: #167CBB;
}



/* 3. Application Setup */

.INITappType {
	display: block;
	border: 1px solid var(--grey-400);
	border-radius: var(--border-radius);
	background-color: var(--grey-100);
	padding: 12px 16px;
	margin-bottom: 16px;
}

.INITappTypelabel {
	font-weight: 600;
}

.INITappTypelabel span {
	display: inline-block;
	margin-left: 6px;
	font-size: 11px;
	color: var(--grey-600);
	font-weight: 400;
}

.INITinvisibleRadio {
	/* Add if not using autoprefixer */
	-webkit-appearance: none;
	appearance: none;
	/* For iOS < 15 to remove gradient background */
	background-color: #fff;
	/* Not removed via appearance */
	margin: 0;
	display: inline;
}

.INITinvisibleRadio:checked + label.INITappType {
	border-color: var(--blue) !important;
	background-color: var(--blue-lighter) !important;
}

.INITinvisibleRadio + label.INITappType:hover {
	border-color: rgba(var(---blue), 0.5);
	background-color: rgba(var(---blue-lighter), 0.5);
	cursor: pointer;
}

.INITinvisibleRadio:checked + label.INITappType .INITaccountForm {
	opacity: 1;
	pointer-events: inherit;
}

.INITinvisibleRadio + label.INITappType .INITaccountForm {
	opacity: 0.4;
	pointer-events: none;
}

.INITinvisibleRadio:checked + label.INITappType .INITappTypelabel {
	opacity: 1 !important;
}

.INITinvisibleRadio + label.INITappType .INITappTypelabel {
	opacity: 0.5;
}

.INITinvisibleRadio + label.INITappType:hover .INITappTypelabel {
	opacity: 0.75;
}

.INITaccountForm {
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.INITradioContainer input[type="radio"] {
	margin-right: 10px;
	margin-top: 0px;
}

.INITradioContainer input[type="radio"]:checked ~ .INITaccountFields input {
	border-color: var(--grey-600);
}
.INITradioContainer input[type="radio"]:checked ~ .INITaccountFields input::placeholder {
	color: var(--grey-500) !important;
}

.INITradioContainer input[type="radio"]:checked ~ .INITaccountFields input.INITinputError{
	border-color: red;
}
.INITradioContainer input[type="radio"]:checked ~ .INITaccountFields input.INITinputError::placeholder {
	color: red !important;
}

.INITaccountFields {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	column-gap: 12px;
	align-items: end;
	margin: 8px 8px 8px 30px;
}



/* 4. Application config */

.INITgitConfigs {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 12px;
	row-gap: 12px;
	align-items: end;
	margin: 8px 8px 8px 16px;
}

input.INITconfigError{
	border-color: red;
}
input.INITconfigError::placeholder {
	color: red !important;
}



/* 5. Account Setup */

.INITsignupFormContainer {
	border: 1px solid var(--grey-300);
	border-radius: var(--border-radius);
	padding: 12px 16px 16px 16px;
	background: var(--grey-100);
}

.INITsignupForm {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: 12px;
} 

.INITuserSubmit {
	padding: 8px 12px;
	font-size: 10px;
	margin-top: 16px;
	background-color: var(--blue);
}

.INITuserSubmit:hover {
	background-color: #34ACF0;
}
.INITuserSubmit:active {
	background-color: #167CBB;
}

.INITsignupForm .FORMlabel {
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 400;
}

.INITpasswordStrength {
	height: 5px;
	background-color: var(--blue-dark);
	transition: width 0.3s ease-in-out;
}

.INITpasswordStrength.full {
	background-color: var(--green-active);
}

.INITstrengthText {
	font-size: 12px;
	color: var(--grey-600);
}

.INITcreateRow{
	justify-content: end;
	grid-template-columns: auto;
}
.INITcheckmarkDiv{
	content: url("/INIT/INITcheckmark.svg");
	height: 50px;
	margin-top: 60px;
	margin-bottom: 20px;
}
.INITfinishDiv{
	display: flex;	
	justify-content: center;
	flex-wrap: wrap;
}
.INITfinished{
	flex-basis: 100%; 
	text-align: center;
}

.INITcurrentlyRunning{
	margin-top: 4px;
}
.INITprepareContainer {
	border: 1px solid var(--grey-300);
	border-radius: var(--border-radius);
	padding: 24px;
	background: var(--grey-100);
}
.INITuserExistsRow{
	margin-top: 8px;
	margin-bottom: 8px;
}
.INITuserExistsRow,
.INITprepareContainer > div{
	display: grid;
	grid-template-columns: 1fr auto;
}

.INITstatusCheckmark{
	content: url("/INIT/INITcheckmark.svg");
	height: 18px;
	margin-top: 4px;
}
.INITuserLabelRow{
	display: grid;
	grid-template-columns: 1fr auto;
	margin-bottom: 4px;
}
.INITdefaultUserValue{
	font-style: italic;
	font-size: 9px;
	margin-right: 4px;
}
.INITexeLocation{
   font-weight: lighter;
   font-size: x-small;
}
.INITexeLocationDir{
	font-weight: lighter;
}
.INITexePathValue{
	margin-left: 4px;
}
.INITexeLocation{
	display: block !important;
}
.INITexeLocation,
.INITerror pre, 
.INITsuccess pre,
.INITexePathValue {
	max-width: 100%; /* Adjust the value to your preferred max width */
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.INITerror, 
.INITsuccess {
	text-align: center;
	border-radius: var(--border-radius);
	font-size: 10px;
	width: 100%;
	padding: 6px;
	margin-top: 12px;
	display: none;
	box-sizing: border-box;
}

.INITsuccess {
	background: var(--green-lighter);
	color: var(--green-dark);
}

.INITerror {
	background: var(--red-lighter);
	color: var(--red-dark);
}

.INITwarningLabel {
	color: red;
}

.INIThidden{
	display: none !important;
}

.INITattemptingInstall{
	margin-top: 32px;
	display: grid;
	grid-template-columns: 1fr auto 12px;
}
.INITsidebarDiv{
	border-right: 1px solid var(--blue-light);
	background-color: var(--blue-lighter);
}

.INITversionDiv{
	font-weight: 400;
	color: var(--grey-600);
	font-size: 10px;
	text-align: center;
	margin-bottom: 12px;
}
.INITsidebarDiv{
	display: grid;
	grid-template-rows: 1fr auto;
}

.INITerror-container {
	text-align: center;
	padding: 40px;
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.INITerror-text {
	color: #333;
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 20px;
}

.INITinstructions {
	color: #333;
	font-size: 18px;
	margin-bottom: 30px;
}
.INITgitInfoView,
.INTexeAction{
	border: 1px solid var(--grey-300);
	border-radius: var(--border-radius);
	padding: 16px;
	background: var(--grey-100);
	margin-top: 8px;
}
.INITgitRowDownload{
	display: grid;
	grid-template-columns: 1fr auto;
}
.ITMcopyContentIcon{
   content: url("/ITM/ITMcopyIcon.svg");
   padding-right: 4px;
   padding-left: 2px;
   height: 12px;
}

.ITMhideContent .ITMcopyFlexDiv{
   visibility: hidden;
}
.ITMcopyContent{
   cursor: pointer;
   color: var(--grey-600);
   text-decoration: none;
   font-size: 11px;
   padding-right: 2px;
}

.ITMcopyContent:hover{
   color: #215FA3;
}
.ITMnoDataErrorToggle{
   cursor: pointer;
   color: var(--blue);
   user-select: none;
}
.ITMnoDataErrorToggle:hover{
   text-decoration: underline;
}
.ITMhide{
   display: none;
}
.string_slider {
   position: relative; /* So absolutely positioned children are placed within this block */
   /* Any padding or margins you want for the text/content */
   padding-top: 8px; 
   padding-left: 8px; 
 }
/* The container for your Copy Content link/icon */
.ITMcopyFlexDiv {
   position: absolute;
   top: 0;
   right: 8px;
   z-index: 9999; /* Ensure it's on top of other elements */
   background-color: #fff; /* White background */
   border: 1px solid #ccc; /* Light border for clarity */
   padding: 2px 4px;
   border-radius: 4px; /* Slight rounding (optional) */
   display: flex;
   align-items: center;
   margin: 2px;
   /* margin-top: 2px; */

 }

.ITMcopyFlexDivTable {
   z-index: 9999; /* Ensure it's on top of other elements */
   background-color: #fff; /* White background */
   border: 1px solid #ccc; /* Light border for clarity */
   padding: 2px 4px;
   padding-right: 8px;
   border-radius: 4px; /* Slight rounding (optional) */
   display: flex;
   align-items: center;
   margin: 2px;
   cursor: pointer;
   margin-right: 14px;
}

 .slide_arrow {
   /* This is just to ensure it doesn’t stretch or do anything odd in flex */
   flex-shrink: 0;
   margin-right: 8px;
 }
 
 .content {
   /* Let this grow as needed */
   flex: 1;
   /* Or margin: 0 auto if you want it centered, etc. */
 }

.ITMlink{
   color: #A000A0;
   padding-left: 10px;
}
.ITMlink{
   text-decoration: none;
}
.ITMlink:hover{
   color: #C45AEC;

}

.ITMlink:hover:after{
   position: absolute;
   left: 0;
   content: url("/TRANS/images/step_in.png"); 
   background-repeat: no-repeat;
   background-position: center;
}

.ITSpopupProtector {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	overflow: hidden;
}
.ITSintellisensePopup {
	z-index: 10;
	position: absolute;
	border: 1px solid #C5C6A4;
	background-color: #FFFFCC;
	box-shadow: 0 1px 2px #AAA;
	border-radius: 4px;
}
.ITSintellisenseOptionsContainer {
	overflow: auto;
	height: 100%;
	font-family: monospace;
}
.ITSintellisenseOptionsList {
	width: 100%;
	position: static;
}
.ITSoptionRow {
	cursor: pointer;
	font-family: monospace;
}
.ITSoptionRow.hover {
	background-color: #B9F5D0;
}
.ITSintellisenseOptions .ITSoptionData {
	padding-right: 4px;
	padding-left: 24px;
	background-repeat: no-repeat;
	background-position: 2px 0;
	white-space: nowrap;
	font-size: 12px;
}
.ITSintellisenseOptionsHelp .ITSoptionData {
	white-space: nowrap;
	padding-right: 10px;
	font-size: 12px;
}
.ITSintellisenseOptions .ITSoptionData.nt_60_1,
.ITSintellisenseOptions .ITSoptionData.nt_60_2 {
	padding-left: 4px;
}
.ITSnoParametersOption {
	padding: 0px 4px;
	font-family: monospace;
}
.ITSintellisenseHelpTitle {
	padding: 2px 2px 3px 0px;
	font-size: 9px;
	color: #898671;
	border-bottom: 1px solid #e4e3c5;
	background: #f8f2cc;
	cursor: pointer;
}
.ITSintellisenseHelpButtons {
	float: right;
	padding-left: 7px;
	padding-top: 1px;
	padding-right: 1px;
	height: 0px;
}
.ITSintellisenseHelpButtons img {
	padding-bottom: 1px;
}
.ITSintellisenseOptionValue {
	color: #666666;
	overflow: auto;
}
.ITSintellisenseOptionHelpValue {
	color: #5C5C5C;
}
.ITSintellisenseSearchMatch {
	font-weight: bold;
}
.ITSintellisenseLevelDivider {
	padding-left: 16px;
	background-image: url(/TREE/images/arrow-contracted.gif);
	background-repeat: no-repeat;
	background-position: 6px center;
}
.ITSintellisenseOptionsTruncatedWarning {
	background-image: url(/TREE/images/ellipsis.gif);
	font-style: italic;
	color: #333333;
	background-color: #ddded6;
	cursor: default;
}
.ITSintellisenseHelpData {
	white-space: normal;
	font-size: 12px;
	margin: 5px;
	color: #333;
}
.ITSintellisenseHelpData a {
	color: #215FA3;
}
.ITSintellisenseHelpData h1 {
	color: #1f79ba;
	font-weight: normal;
	font-size: 20px;
	margin-top: 5px;
}
.ITSintellisenseHelpData h2 {
	color: #76b73d;
	font-size: 10pt;
	margin: 15px 0px 10px 0px;
}
.ITSintellisenseHelpData h3 {
	font-size: 9pt;
	margin: 20px 0px 5px 0px;
}
.ITSintellisenseHelpData code {
	font-size: 10pt;
}
.ITSintellisenseHelpData .codeExample {
	border: solid #ccc 1px;
	border-radius: 5px;
	background-color: #FCFCFC;
	padding: 0px 10px;
	color: #666;
	display: table;
	/* shrink wrap the border on codeExample divs */
}
/* Add spacing between adjacent code example blocks. */
.ITSintellisenseHelpData .codeExample+.codeExample {
	margin-top: 10px;
}


.LBRnameFeedback{
   color: var(--red);
	font-size: 10px;
	/* line-height: 12px; */
	/* margin-top: 4px; */
	line-height: 0px;
}
.LBRheader{
	font-family: var(--font-buttons);
	color: var(--grey-500);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.05em;
}
.LBRrepoFeedback,
.LBRrepoDoesntExistFeedback,
.LBRnameExistsFeedback,
.LBRnameFeedback{
   color: var(--red);
	font-size: 10px;
	line-height: 0px;
	padding-left: 4px;
	/* margin-top: 4px; */
}
.LBRrepoLinkHrefDiv,
.LBRname{
	margin-bottom: 12px;
}
.LBRtemplateDiv {
	flex-grow: 1;
	display: grid;
	grid-template-rows: auto 1fr;
	border-radius: var(--border-radius);
	min-height: 0;
	overflow: hidden;
}
.LBRhidden{
	display: none !important;
}
.LBRgitFeedback{
   border: 1px solid var(--grey-400);
   border-radius: var(--border-radius);
   background: var(--grey-200);
   padding: 24px 32px;
}
.LBRnoCollections{
	color: var(--grey-600);
	border: solid 1px var(--grey-200);
	border-radius: var(--border-radius);
   padding: 100px;
	text-align: center;
	height: 100%;
}
.LBRfilter {
	background-image: url(/LBR/LBRiconFilter.svg);
	background-repeat: no-repeat;
	background-position: 6px center;
	padding-left: 28px;
	min-width: 120px;
}
.LBRheaderDiv{
	border-bottom: 1px solid var(--grey-100);	
	padding-right: 24px;
}
.LBRrepoLink{
	display: flex;
	height: 100% !important;
	justify-content: center;
	align-items: center;
	margin-left: 6px;
}
.LBRopenLinkDiv{
	content: url(/LBR/LBRiconNewWindow.svg);
}
.LBRrepoLink:hover .LBRopenLinkDiv,
.LBRopenCollection:hover .LBRopenLinkDiv{
	content: url(/LBR/LBRiconNewWindowHover.svg);
}
.LBRmodal{
	display: flex;
	flex-direction: column;
	height: 100%;
	color: var(--grey-800);
}
.LBRcardContent {
	display: grid;
	grid-gap: 32px;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	padding-bottom: 4px;
}
.LBRcardContent-hide {
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	padding-top: 24px;
	padding-bottom: 0px;
	box-sizing: border-box;
	padding-right: 24px;
}
.LBRcardLoading {
	background-image: url(/TRANS/images/spinner.gif);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 24px;
	opacity: 0.5;
	filter: alpha(opacity=5);
	height: 100%;
	width: 100%;
}
.LBRnoTemplatesDefined{
	width: 100%;
	color: var(--grey-400);
	letter-spacing: 0.05em;
	max-height: calc(100% - 24px);
	font-size: 11px;
	display: flex;
	height: 100% !important;
	justify-content: center;
	align-items: center;
}

.LBRnewCardError{
	color: red;
   padding: 100px;
}

.LBRtemplateCard-visible {
	opacity: 1;
	animation: fadein .4s cubic-bezier(0.29, 1.29, 1, 1) forwards;
}
.LBRtemplateCard {
	border-radius: var(--border-radius);
	background-color: var(--white);
	border: 1px solid var(--grey-400);
	height: 142px;
	text-align: left;
	opacity: 0;
	display: inline-block;
	overflow: hidden;
	padding: 20px;
	box-sizing: border-box;
	display: grid;
	grid-template-rows: auto 1fr;
}
.LBRcached{
	cursor: pointer;
}
.LBRcached:hover,
.LBRtemplateCardSelected {
	background-color: #F8FCFE;
	border: 1px solid var(--blue);
	box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
}
.LBRtemplateCard span {
	font-size: 11px;
	line-height: 1.6em;
	word-wrap: break-word;
	white-space: pre-wrap;
	color: var(--grey-600);
	box-decoration-break: clone;
}
.LBRtemplateCardHeader {
	display: flex;
	justify-content: space-between;
}
.LBRcatalogueModalContainer {
	height: calc(100% - 125px);
	padding-right: 8px !important;
}
.LBRcardContainer {
	overflow: auto;
}
.LBRcardContainer::-webkit-scrollbar {
	display: none;
}
.LBRtemplateCardName {
	display: block;
	font-weight: bold;
	font-size: 12px;
	margin-bottom: 12px;
	word-wrap: break-word;
	color: var(--grey-800);
}
.LBRtemplateCardDesc {
	overflow: auto;
	--scrollbarBG: #FFFFFF;
	--thumbBG: #D2DDE8;
	scrollbar-width: thin;
	line-height: 21px;
	padding-top: 2px;
	scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
.LBRtemplateCardDesc::-webkit-scrollbar {
	width: 16px;
	height: 16px;
}
.LBRtemplateCardDesc::-webkit-scrollbar-track {
	background: var(--scrollbarBG);
}
.LBRtemplateCardDesc::-webkit-scrollbar-thumb {
	background-color: var(--thumbBG);
	border-radius: 8px;
	border: 5px solid var(--scrollbarBG);
}
.LBRfilterContainer {
	background: var(--grey-200);
	padding: 24px 32px;
	border: 1px solid var(--grey-400);
	border-radius: var(--border-radius);
	margin-right: 24px;
}
.LBRrepoLinkHrefDiv{
	display: grid;
	grid-template-columns: 1fr 40px;	
}
.LBRbuttons {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: end;
	margin-top: 12px;
	margin-right: 0;
	margin-left: auto;
}
.LBRtopHeaderDiv{
	display: grid;
	grid-template-columns: 1fr 40px 40px 22px;	
}
.LBRnotCached{
	background-color: var(--grey-200) !important;
}
.LBRbuttonsRow{
	display: grid;
	grid-template-columns: 1fr auto auto;
	justify-content: end;
	padding-right: 24px;
}
.LBRrefreshCacheGrid{
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 8px;
	/* word-break: break-all; */
	/* padding-left: 24px; */
}
.LBRrefreshCache{
	color: var(--blue);
	text-decoration: none;
	word-break: break-all;
}
.LBRrefreshCacheInfo{
	color: var(--grey-600);
	text-decoration: none;
}
.LBRrefreshCacheInfoLink{
	color: var(--blue);
	text-decoration: none;
	padding-left: 2px;
	padding-right: 2px;
}
.LBRrefreshCacheInfoLink:hover,
.LBRrefreshCache:hover {
	color: var(--blue);
	text-decoration: underline;
	cursor: pointer;
}
.LBRcollectionsSelect{
	padding: 5px;
}
.LBRpaddingRight{
	padding-right: 24px;
}
.LBRplainFolderGrid{
	display: grid;
	grid-template-columns: 1fr auto auto;
	column-gap: 12px;
}

.LFDsampleData.LFDhide .LFDcr,
.LFDsampleData.LFDhide .LFDlf,
.LFDsampleData.LFDhide .LFDcrlf{
   visibility: hidden;
   display: inline-block;
   width: 0px;
   margin: 0px;
   padding: 0px;
	min-width: 0px;
   line-height: 14px;
}
.LFDcr,
.LFDlf,
.LFDcrlf{
	min-width: 18px;
   padding: 1px 5px;
   line-height: 16px;
   font-weight: bold;
   text-align: center;
   margin: 0px 2px;
   visibility: visible;
   border-radius: 3px;
   font-size: 0.7em;
}
.LFDcr{
   background-color: #cceafb;
   color: #1b6d8c;
   border: 1px solid #88b7e3;
}
.LFDlf {
   background-color: #e2f2be;
   color: #4ca449;
   border: 1px solid #a8ca5c;
}
.LFDcrlf {
   background-color: #cbf3ec;
   color: #1aa198;
   border: 1px solid #83d9c9;
}
.LFDlineFeedSelect {
	width: unset;
}
.LFDshowHide {
	background-image: url("/SMPL/SMPLiconShowHideEol.svg");
}
.LFDhide .LFDshowHide{
	background-color: var(--grey-300);
	background-position: center !important;
	box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.1);
}
.LFDconvert {
	background-image: url("/SMPL/SMPLiconReplaceEol.svg");
}
.LFDsampleData .LFDmodal{
   display: flex !important;
}
.LFDmodal{
   display: none !important;
}
.LGGgeneratorContainer {
   height: 100vh;
   display: grid;
   grid-template-rows: auto 1fr;
   background: #D2E4EC;
	color: var(--grey-800);
}
.LGGgeneratorContent {
   background: #D2E4EC;
	padding: 24px;
}
.LGGgeneratorContentInner {
	border-radius: 4px;
	border: solid 1px var(--grey-400);
	background-color: var(--white);
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
	border: none;
	max-width: 1000px;
	padding: 32px;
}
.LGGgeneratorConfig {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-column-gap: 16px;
	grid-row-gap: 16px;
	margin-top: 24px;
	margin-bottom: 16px;
}
.LGGgeneratorConfig * {
	font-size: 14px;
	display: flex;
	align-items: center;
}

.LGGgeneratorConfig * {
	font-size: 12px;
	display: flex;
	align-items: center;
}

.LGGgeneratorConfig *:nth-child(2n) {
	max-width: 240px;
}

.LIBbuttons{
	display: grid;
	grid-template-columns: auto auto;
	justify-content: end;
	margin-top: 32px;
	margin-right: 0;
	margin-left: auto;
}
.LIBlink{
	color: var(--blue);
	margin-left: 8px;
}
.LIBrow{
	display: grid;
	grid-template-columns: auto 1fr;
}
.LIBgroup{
	justify-content: end;
}
.LIBgroup .BUTTONcancel{
	margin-right: 8px;
}
.LIBdeleteModal{
	max-width: 480px;
}
.LIBcardMenuWait {
	background-image: url(/TRANS/images/spinner.gif);
	opacity: 0.5;
	/* Standard style for transparency */
	filter: alpha(opacity=5);
	/* For IE */
	height: 16px;
	width: 16px;
}

.LIBcardLoading {
	background-image: url(/TRANS/images/spinner.gif);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 24px;
	opacity: 0.5;
	/* Standard style for transparency */
	filter: alpha(opacity=5);
	/* For IE */
	height: 100%;
	width: 100%;
}

.LIBcatalogueIssue {
	display: none;
	white-space: pre-wrap;
	text-align: left;
	background: var(--red-lighter);
	border: 1px solid var(--red-light);
	border-radius: var(--border-radius);
	padding: 16px;
	margin-top: 16px;
}

.LIBcatalogueModalContainer {
	height: calc(100% - 125px)
}

.LIBcatalogueModalLayout {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.LIBlibraryDetailsLayout {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.LIBlibraryContainer {
	flex-grow: 1;
	display: grid;
	grid-template-columns: minmax(auto, 320px) 1fr;
	grid-template-rows: auto 1fr;
	border: 1px solid var(--grey-400);
	border-radius: var(--border-radius);
	min-height: 0;
	overflow: hidden;
}

.LIBlibraryCollection {
	/* display: flex; */
	grid-column: 1/2;
	grid-row: 1/3;
	padding: 24px;
}

.LIBlibraryCollectionBrowse {
	font-size: 12px;
	font-weight: var(--semibold);
	margin-bottom: 4px;
}

.LIBlibraryCollection .FORMselectBox {
	max-width: 320px;
}

.LIBcollectionGitLocation {
	font-size: 11px;
	color: var(--grey-600);
	margin-top: 16px;
	font-weight: var(--semibold);
}

.LIBcollectionGitLocation a {
	color: var(--grey-600);
	font-weight: var(--regular);
	text-decoration: none;
}

.LIBcollectionGitLocation a:hover {
	color: var(--blue);
	text-decoration: underline;
}

.LIBfilterContainer {
	background: var(--grey-200);
	border-left: 1px solid var(--grey-300);
	padding: 24px 32px;
}

.LIBfilterContainer input {
	background-image: url(/TEMPLATE/TEMPLATEiconFilter.svg);
	background-repeat: no-repeat;
	background-position: 6px center;
	padding-left: 28px;
}

.LIBcardContainer {
	background: var(--grey-200);
	border-left: 1px solid var(--grey-300);
	overflow: auto;
}

.LIBcardContainer::-webkit-scrollbar {
	display: none;
}

.LIBcardContent {
	display: grid;
	grid-gap: 24px;
	grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
}

.LIBcardContent-hide {
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 32px;
	padding-top: 0px;
	box-sizing: border-box;
}

.LIBcard-visible {
	opacity: 1;
	animation: fadein .4s cubic-bezier(0.29, 1.29, 1, 1) forwards;
}

.LIBcard {
	border-radius: var(--border-radius);
	background-color: var(--white);
	border: 1px solid var(--grey-400);
	text-align: left;
	opacity: 0;
	cursor: pointer;
	display: inline-block;
	overflow: visible;
	padding: 16px 24px;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto 1fr;
}

.LIBcardIcon {
	padding-right: 16px;
	grid-row: 1/-1;
}

.LIBcardIcon img {
	width: 16px;
}

.LIBcard:hover {
	background-color: #F8FCFE;
	border: 1px solid var(--blue);
	box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
}

.LIBcard:hover div {
	color: var(--blue);
}

.LIBcardHeader {
	display: flex;
	justify-content: space-between;
}

.LIBcardName {
	display: block;
	font-weight: bold;
	font-size: 11px;
	margin-bottom: 8px;
	word-wrap: break-word;
	color: var(--grey-800);
}

.LIBcardDesc {
	overflow: auto;
}

.LIBcardDesc {
	--scrollbarBG: #FFFFFF;
	--thumbBG: #D2DDE8;
	scrollbar-width: thin;
	scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}

.LIBcardDesc::-webkit-scrollbar {
	width: 16px;
	height: 16px;
}

.LIBcardDesc::-webkit-scrollbar-track {
	background: var(--scrollbarBG);
}

.LIBcardDesc::-webkit-scrollbar-thumb {
	background-color: var(--thumbBG);
	border-radius: 8px;
	border: 5px solid var(--scrollbarBG);
}

.LIBcard span {
	font-size: 11px;
	line-height: 1.6em;
	word-wrap: break-word;
	white-space: pre-wrap;
	color: var(--grey-600);
	box-decoration-break: clone;
}

.LIBcardMenu {
	flex-shrink: 0;
	background-image: url(/PRJ/PRJiconFileMoreOptions.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-color: transparent;
	width: 16px;
	height: 24px;
	border-radius: 3px;
	margin-top: -4px;
	margin-left: 8px;
}

.LIBgitTooltip {
	width: 120px;
	margin-top: 8px;
}

.LIBgitTooltip a {
	font-size: 11px;
	color: var(--grey-700);
	text-decoration: none;
	display: block;
	border-radius: 2px;
	margin: 2px -4px;
	padding: 1px 4px;
}

.LIBgitTooltip a:hover {
	color: var(--blue-dark);
	background: rgba(var(---blue-lighter), 0.5);
}

.LIBcardMenu:hover {
	background-color: var(--blue-lighter);
}

.LIBgitTooltip {
	width: 150px;
	margin-top: 15px;
}

.LIBstepHeading {
	font-size: 14px;
	font-weight: var(--semibold);
	margin-bottom: 24px;
}

.LIBcardSummary {
	border-radius: var(--border-radius);
	background-color: var(--grey-100);
	border: 1px solid var(--grey-400);
	box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
	padding: 24px;
	box-sizing: border-box;
	width: 100%;
	max-width: 600px;
	align-self: center;
	min-height: 0;
	overflow: auto;
	color: var(--grey-700);
}

.LIBsummaryIcon {
	width: 20px;
	height: 20px;
	grid-row: 1/5;
}

.LIBlibraryName {
	font-size: 14px;
	font-weight: var(--bold);
	color: var(--grey-800);
	margin-top: 2px;
	margin-bottom: 12px;
	grid-column: 2/4;
}

.LIBsummaryTable {
	display: grid;
	grid-template-columns: auto auto 1fr;
	grid-gap: 12px 16px;
}

.LIBheading {
	font-weight: var(--semibold);
	color: var(--grey-800);
}

.LIBgitLocation a {
	color: var(--grey-700);
}

.LIBgitLocation a:hover {
	color: var(--blue);
}

.LIBtemplateButtons {
	margin-top: 24px;
	display: flex;
	justify-content: end;
	align-items: end;
}

.LIBlibButton {
	margin-top: 24px;
	flex-grow: 1;
	display: flex;
	justify-content: end;
	align-items: end;
}

.LIBcard:hover,
.LIBcardSelected {
	background-color: #F8FCFE;
	border: 1px solid var(--blue);
	box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
}

.LIBcard:hover div,
.LIBcardSelected div {
	color: var(--blue);
}

.LIBcloneLibraryDialogueLayout {
	display: flex;
	flex-direction: column;
}

.LIBcloneLibraryDialogueWait {
	display: none;
}

.LIBRARYwaitMessage {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--grey-600);
	margin-bottom: 24px;
}

.LIBRARYwaitMessage img {
	width: 24px;
	height: 24px;
	margin-bottom: 16px;
}

.LIBprogress {
	margin-top: 24px;
	width: 100%;
	align-self: center;
	max-width: 600px;
	padding: 24px;
	box-sizing: border-box;
}

.LIBRARYfilesInLib {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-auto-rows: auto;
	column-gap: 16px;
	row-gap: 4px;
	margin-top: 8px;
	border: 1px solid var(--grey-300);
	border-radius: var(--border-radius);
	padding: 8px;
	color: var(--grey-600);
	font-size: 11px;
}

.LIBexistFile {
	grid-column: 2/-1;
}

.LIBexist {
	width: 100%;
	align-self: center;
	max-width: 600px;
	min-height: 0;
}

.LIBexistContainer {
	margin-top: 48px;
	padding: 24px;
	box-sizing: border-box;
	background-color: rgba(var(---blue-lighter), 0.5);
	color: var(--blue-darker);
	overflow: auto;
	max-height: 100%;
}

.LIBexistingFilesHeading {
	margin-bottom: 16px;
}

.LIBexistContainer .LIBexistFile {
	margin-left: 16px;
	margin-bottom: 4px;
	font-size: 11px;
}

.LIBacknowledgement {
	margin-top: 24px;
	width: 100%;
	align-self: center;
	max-width: 600px;
}

.LIBacknowledgement label {
	display: flex;
	align-items: center;
	font-weight: 600;
}

.LIBacknowledgement label input {
	margin-right: 8px;
}

.LIBerrorText {
  margin-top: -8px;
  white-space: break-spaces;
  color: red;
}
.LIBmargin{
	/* margin-top: -8px; */
	margin-left: 12px;
}
.LIBbreak{
	word-wrap: break-word;
}
.LIBred{
	color: red;
}
.LOGcontainer {
	height: 100%;
	display: grid;
	grid-template-columns: 370px 1fr;
	background: #D2E4EC;
	overflow: auto;
 }
 .LOGsearchLoadMore{
	margin-left: 4px;
	margin-right: 4px;
 }
.LOGmodal{
	height: 100vh;
	overflow: hidden;
}
.LOGlistView{
	display: grid;
	grid-template-rows: auto auto 1fr auto ;
	position: relative;
	background-color: #ebf3f6;
	border-right: 1px solid var(--grey-400);
	height: 100%;
	z-index: 1;
}
.LOGcomponentRow{
	display: grid;
	grid-template-columns: auto 1fr auto;
	column-gap: 12px;
	width: 100%;
}
.LOGswitchTarget .TOGswitchDiv{
	margin-left: 0px;
}
.LOGstorageRow{
	display: grid;
	grid-template-columns: 1fr auto   auto;
}
.LOGstorageDiv{
	border-top: 1px solid var(--grey-300);
	padding: 24px;
	padding-left: 16px;
	padding-right: 16px;
}
.LOGtopRow.LOGclearAllRow{
	margin-bottom: 8px;
}
.LOGactionsDiv{
	display: grid;
	grid-template-columns: 1fr auto auto;
}
.LOGclearAllRow{
	display: grid;
	grid-template-columns: 1fr auto auto;
}
.LOGtypeRow{
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 20px;
}
.LOGcomponentRow:hover{
	/* background-color: #F8FCFE; */
	/* box-shadow: 0 2px 4px rgb(0 0 0 / 10%); */
}
.LOGfilterCriteriaDiv{
	/* padding: 16px; */
	display: flex;
	flex-direction: column;
}
.LOGcomponentDiv{
	border-bottom: 1px solid var(--grey-300);
	height: 64px;
	padding-left: 16px;
	padding-right: 16px;
	display: flex;
	align-items: center;
	/* padding: 16px;
	padding-top: 24px;
	padding-bottom: 24px; */
}
.LOGsearchIndexUp,
.LOGsearchIndexDown{
	text-align: center;
	height: 18px;
	width: 24px;
	border-radius: var(--border-radius);
	user-select: none;
	cursor: pointer;
	margin-top: 1px;
	margin-right: 1px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.LOGsearchIndexUp:hover,
.LOGsearchIndexDown:hover{
	background: var(--white);
	box-shadow: 0px 1px 2px rgba(0,0,0,0.25);
}
.LOGsearchIndexUp:active,
.LOGsearchIndexDown:active{
	background: var(--white);
	box-shadow: none;
	margin-top: 2px;
}
.LOGsearchNavRow{
	display: grid;
	grid-template-columns: 120px auto auto;
	column-gap: 4px;
	font-family: var(--font-buttons);
	font-weight: 500;
	color: var(--grey-600) !important;
	letter-spacing: 0.05em;
	font-size: 11px;
}
.LOGdateTimeDiv{
	overflow: hidden;
	display: grid;
	grid-template-rows: 1fr auto;
	row-gap: 4px;
}
.LOGbulkEnd{
	margin-bottom: 6px;
}
.LOGendTime{
	margin-bottom: 8px;
}
.LOGstartTime{
	margin-bottom: 14px;
}
.LOGstartTime,
.LOGendTime {
	color: var(--grey-600);
	cursor: text;
}
.LOGcomponentRowFlex{
	width: 100%;
}
.LOGcomponentRowFlex > *{
	display: flex; /* Use flexbox */
	justify-content: center; /* Center horizontally */
	align-items: center; /* Center vertically */
}
.LOGwrapper {
	background: var(--white);
	border-radius: var(--border-radius);
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
	margin-bottom: 0px;
	overflow: hidden;
	display: flex;
   flex-direction: column;
	overflow: hidden;
}

 .LOGheader {
    border-bottom: solid 1px var(--grey-400);
	 background-color: #ebf3f6;
	 box-sizing: border-box;
	 height: 68px;
	 flex-shrink: 0;
	 padding: 8px 24px;
	 display: flex;
	 align-items: center;
	 column-gap: 16px;
 }

 .LOGheading {
	font-family: var(--font-buttons);
	color: var(--blue-dark);
	font-size: 16px;
	font-weight: 500;
	flex-grow: 1;
}
.LOGdateRow,
.LOGtoolBarTop{
	border-bottom: 1px solid var(--grey-400);
}
.LOGbottomBanner,
.LOGtoolBarBottom{
	border-top: 1px solid var(--grey-400);
	border-bottom: unset !important;
}
.LOGtoolbar {
	border-bottom: 1px solid var(--grey-400);
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 48px;
	flex-shrink: 0;
	background: var(--grey-200);
	padding: 0 24px;
}
.LOGdateRowGrid{
	display: grid;
	grid-template-columns: auto auto auto auto auto auto auto;
	column-gap: 36px;
}

.LOGtoolbarLeft {
	display: grid;
	grid-template-columns: 1fr auto 270px auto auto auto auto;
	column-gap: 24px;
	width: 100%;
}

.LOGfilter {
	display: flex;
	align-items: center;
	column-gap: 16px;
	position: relative;
}
.LOGbulkDiv{
	/* border-bottom: unset !important; */
}
.LOGbulkDiv,
.LOGdateTimeDiv,
.LOGtypeDiv,
.LOGsearchContainerDiv{
	border-bottom: 1px solid var(--grey-300);
	padding: 16px;
}
.LOGsearchFooterRow{
	display: grid;
	grid-template-columns: 1fr auto;
	width: 100%;
	row-gap: 12px;
}
.LOGsearchFooterRowTop{
	margin-bottom: 14px;
}
.LOGsearchContainer{
	position: relative;
   height: inherit;
   width: inherit;
   border-radius: inherit;
}
.LOGsearchHeader{
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}
.LOGsearchStatus{
	color: var(--grey-600);
	font-size: 10.5px;
	white-space: nowrap;
	/* margin-top: 6px; */
}
.LOGsearch {
	position: relative;
 }
.LOGsearchInput2 {
	width: 100%;
	height: 28px;
	border-radius: var(--border-radius);
	background-color: transparent;
	font-weight: var(--regular);
	font-size: 12px;
	box-sizing: border-box;
 }
 .LOGsearchCount{
	text-align: right;
	margin-right: 12px !important;
	padding-top: 4px;
 }
 .LOGtitleFooter{
	font-family: var(--font-buttons);
	font-weight: 500;
	color: var(--grey-600) !important;
	letter-spacing: 0.05em;
	font-size: 10px;
 }
.LOGtitle {
	font-family: var(--font-buttons);
	font-weight: 500;
	color: var(--grey-700) !important;
	letter-spacing: 0.05em;
	font-size: 10px;
}
.LOGbulkRow,
.LOGbulkTitle{
	margin-bottom: 14px;
}
.LOGbulkRow{
	display: grid;
	grid-template-columns: auto 1fr;
}
.LOGsearchInput::placeholder{
   color: var(--grey-400);
}
.LOGsearchInput {
	height: 24px;
	min-width: 150px;
	border-color: var(--grey-500);
	border: solid 1px var(--grey-400);
   border-radius: var(--border-radius);
   caret-color: var(--grey-700);
   font-family: var(--font-sans);
   color: var(--grey-600);
	font-size: 12px;
	padding: 6px 24px 6px 6px;
   width: inherit;
   height: inherit;
   max-width: 100%;
   max-height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   white-space: pre;
   background: var(--white);
   box-sizing: border-box;
}
.LOGfilterCheckbox {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	color: var(--grey-600);
	font-size: 10.5px;
	user-select: none;
	column-gap: 4px;
	color: var(--grey-600) !important;
}
.LOGfilterCheckbox:hover{
	text-decoration: underline;
}

.LOGbody {
	/* cursor: pointer; */
	flex-grow: 1;
	overflow: auto;
	/* margin: 24px 0px; */
	text-align: center;
	scrollbar-width: none;
}

.LOGbody::-webkit-scrollbar {
	width: 0em;
 }

 .LOGbody::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0);
 }
 .LOGcomponentSelect{
	width: 100%;
   height: 28px;
   border-radius: var(--border-radius);
   border: 1px solid var(--grey-400);
   background-color: var(--white);
	color: var(--grey-800);
   font-weight: var(--regular);
   font-size: 12px;
   line-height: 16px;
   /*color: var(--grey-800);*/
   font-family: var(--font-sans);
   cursor: pointer;
   padding: 0px 32px 0px 8px;
   appearance: none;
   background-image: url(/FORM/FORMselectBoxArrow.svg);
   background-repeat: no-repeat, repeat;
   background-position: right 8px top 50%, 0 0;
	/* width: 192px; */
}

 .LOGcomponentLink{
   content : url("../LOG/icons/NewWindow.svg");
   display :inline;
	opacity: 0.6;
	width: 40px;
 }

 .LOGcomponentLink:hover {
   cursor: pointer;
	opacity: 1;
 }

.LOGcellPreview {
	overflow: hidden;
	color: var(--grey-800);
	white-space: break-spaces;
}
.LOGselectingEnd .LOGlogEntry,
.LOGselectingStart .LOGlogEntry{
   grid-template-columns: auto auto auto 1fr auto auto;
}
 .LOGlogEntry{
   display : grid;
   grid-template-columns: auto auto 1fr auto auto;
	column-gap: 4px;
	cursor: pointer;
	padding-right: 8px;
 }
 .LOGcellPreview a{
	text-decoration: unset;
 }
 .LOGcellPreview a:hover{
	text-decoration: underline;
 }
 .LOGnavButton{
	padding: 4px;
	text-align: center;
	cursor: pointer;
	color: var(--grey-500);
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
 }
 .LOGnavButton:hover {
	background: var(--grey-200);
	color: var(--grey-800);
; }
.LOGnavButton:active {
	background: var(--grey-300);
	padding-top: 5px;
	padding-bottom: 3px;
; }
.LOGloadNewer,
.LOGloadNewest {
	border-bottom: 1px solid var(--grey-300);
 }
 .LOGloadOlder{
	border-top: 1px solid var(--grey-300);
 }
 .LOGloadOldest {
	border-bottom: 1px solid var(--grey-300);
	transform: rotate(180deg);
 }
 .LOGentrySelected{
	background-color: rgba(var(---blue-light), 0.7) !important;
	box-sizing: border-box;
 }
 .LOGlogEntry:hover {
   background-color: rgba(var(---blue-light), 0.5) !important;
	box-sizing: border-box;
 }

 .LOGentrySelected.LOGlogEntry:hover{
   background-color: rgba(var(---blue-light), 0.9) !important;
 }
 .LOGcellIcon img {
	height: 28px;
	padding-right: 12px;
	padding-left: 6px;
	padding-top: 4px;
 }

 .LOGcellTime {
	color: var(--blue-dark);
	font-weight: 500;
	padding-left: 12px;
 }

 .LOGcellTime,
 .LOGcellPreview {
	font-family: var(--font-monospace);
	padding-top: 8px;
	line-height: 20px;
	/* margin-bottom: 4px; */
	text-align: left;
 }

.LOGdetailContainer {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.LOGdetailHeader {
	 padding: 0 24px;
	 background-color: var(--grey-100);
	 border-bottom: 1px solid var(--grey-400);

}

.LOGdetailHeaderContents {
	height: 68px;
	flex-shrink: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.LOGdetailHeaderToolbarLeft,
.LOGdetailHeaderToolbarRight {
	display: flex;
	align-items: center;
	column-gap: 16px;
}

.LOGdetailFooter {
	flex-shrink: 0;
	height: 40px;
   background-color: var(--white);
   display: flex;
   padding: 0 24px;
	border-top: 1px solid var(--grey-400);
	display: flex;
	align-items: center;
	color: var(--grey-800);
	column-gap: 8px;
}

.LOGdetailHeaderText {
    text-align: left;
    flex: 1;
}



.LOGlight {
   display: inline-block;
}

.LOGfooterContents {
	display: flex;
	align-items: baseline;
	column-gap: 8px;
	color: var(--grey-600);
}

.LOGfooterIcon {
	color: var(--grey-500);
	fill: currentColor;
}


.LOGlabelValuePair {
	display: flex;
	align-items: baseline;
	column-gap: 8px;
}

.LOGlabel {
   font-family: var(--font-buttons);
	font-weight: 500;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.075em;
	margin-left: 24px;
	color: var(--grey-700);
}
.LOGlabel:first-child {
	margin-left: 0px;
}

.LOGvalue{
	text-align: right;
	font-size: 11px;
	padding-left: 12px;
}

.DETtoolbarIcon {
	color: var(--grey-600);
	fill: currentColor;
}
.LOGtoolBarBottom{
	user-select: text !important;
}

.LOGdetailHeaderDivider {
	width: 1px;
	height: 32px;
	background-color: var(--grey-300);
}

.LOGdetailScan {
    display: flex;
    align-items: center;
	 column-gap: 4px;
}

.LOGdetailPrev, .LOGdetailNext {
    background-color: #fff;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    position: relative;
}

.LOGdetailPrev:hover, .LOGdetailNext:hover {
	background-color: var(--blue-lighter);
}

.LOGdetailLeftArrow, .LOGdetailRightArrow{
    width: 6px;
    height: 6px;
    border: solid var(--grey-800);
    border-width: 0 2px 2px 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.LOGdetailLeftArrow {
    transform: translate(-50%, -70%) rotate(45deg);
}

.LOGdetailRightArrow {
    transform: translate(-50%, -35%) rotate(-135deg);
}



.LOGdetailTypeIcon {
   padding-right: 4px;
}

.LOGtoTranslatorLink,
.LOGreposition,
.LOGresubmit,
.LOGdownloadLink {
	display: flex;
	align-items: center;
	font-family: var(--font-buttons);
	text-transform: uppercase;
	text-decoration: none;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.05em;
	column-gap: 6px;
	cursor: pointer;
	color: var(--grey-600);
}

.LOGtoTranslatorLink:hover,
.LOGtoTranslatorLink:hover .DETtoolbarIcon,
.LOGreposition:hover,
.LOGreposition:hover .DETtoolbarIcon,
.LOGresubmit:hover,
.LOGresubmit:hover .DETtoolbarIcon,
.LOGdownloadLink:hover,
.LOGdownloadLink:hover .DETtoolbarIcon {
	color: var(--blue);
}


.LOGdetailComponentName {
	font-family: var(--font-buttons);
	color: var(--blue-dark);
	font-size: 14px;
}



.LOGmodalDelete {
	max-width: 450px;
}

.LOGactionDescription,
.LOGtoComponentDescription {
	margin-top: 0px;
	font-size: 13px;
	line-height: 1.5em;
	color: var(--grey-800);
}

.LOGresubmitPanel{
   position: absolute;
   width: 100%;
   height: 4em;
   bottom : -100%;
   z-index: 1000;
   border-top: solid black 1px;
   background-color: var(--grey-200);
}

.LOGresubmitComponent{
   width : 26em;
}

.LOGresubmitInfo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #78d958;
}

.LOGresubmitInfo.error {
	color: red;
}

.LOGerror {
	color: red;
	margin-bottom: 10px;
}

.LOGpullToRefresh{
	position: absolute;
	top: 50px; /* Off-screen position to hide it initially */
	left: 50%;
	transform: translateX(-50%);
}
.LOGtruncated{
	color: var(--grey-600) !important;
}
.LOGhidden{
	display: none;
}
.LOGlistDiv .LOGlogEntry:nth-child(even) {
	background-color: var(--grey-200); /* Background color for even items */
 }

 /* Style the odd items (2nd, 4th, 6th, etc.) */
 .LOGlistDiv .LOGlogEntry:nth-child(odd) {
	background-color: var(--white); /* Background color for odd items */
 }
 .LOGcurrentDate{
	text-align: left !important;
	font-weight: 600;
 }
 .LOGdateRow{
	padding: 8px;
	padding-right: 12px;
	padding-left: 16px;
	/* color: var(--blue-dark); */
	font-family: var(--font-monospace);
	text-align: center;
	background-color: var(--grey-300);
 }
.LOGclearSearch{
	z-index: 998;
	background: none;
	position: absolute;
	right: 8px;
	bottom: 6px;
}
.LOGcancelBulk,
.LOGclearBulk,
.LOGclearLogs,
.LOGbeginSearchHere,
.LOGshowNewLogs,
.LOGmanageStorage,
.LOGsearchLoadMore,
.LOGclearDateFilters,
.LOGclearSearchFilters,
.LOGfilterLoadMore{
	color: var(--blue);
	cursor: pointer;
	display: inline-block;
	text-decoration: none;
	font-family: var(--font-buttons);
	/* text-transform: uppercase; */
	font-weight: 500;
	font-size: 9.5px;
	letter-spacing: 0.08em;
}
.LOGbeginSearchHere,
.LOGfilterLoadMore{
	padding-left: 4px !important;
	padding-right: 4px !important;
}
.LOGbulkButtonDiv,
.LOGbulkTitleDiv,
.LOGendTimeTitleDiv{
	display: grid;
	grid-template-columns: 1fr auto;
}
.LOGbulkButtonDiv{
	column-gap: 12px;
	margin-bottom: 4px;
}
.LOGtitleFooter,
.LOGcomponentLink,
.LOGclearSearch,
.LOGheading,
.LOGtitle,
.LOGdateRow{
	user-select: none;
}
.LOGcancelBulk:hover,
.LOGclearBulk:hover,
.LOGshowNewLogs:hover,
.LOGsearchLoadMore:hover,
.LOGfilterLoadMore:hover,
.LOGmanageStorage:hover,
.LOGclearLogs:hover,
.LOGclearDateFilters:hover,
.LOGclearSearchFilters:hover{
	text-decoration: underline;
}
.LOGlayout{
	display: grid;
	grid-template-columns: 40px 1fr;
	grid-template-rows: 1fr auto;
	column-gap: 12px;
	padding-right: 18px;
	padding: 12px;
	overflow: hidden;
}
.LOGscrollbar{
	height: 100%;
	width: 100%;
	background: var(--white);
	border-radius: var(--border-radius);
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	position: relative;
}
.LOGscrollbar{
	display: grid;
	grid-template-rows: auto auto 1fr auto auto;
}
.LOGscrollbarLineSelected{
	width: 100%;
	height: 3px;
	background-color: red;
	position: absolute;
	transition: top 0.5s ease;
	overflow: hidden;
	z-index: 15;
}
.LOGscrollbarLine{
	width: 100%;
	height: 3px;
	background-color: var(--grey-400);
	position: absolute;
	transition: top 0.5s ease;
	overflow: hidden;
	z-index: 14;
}
.LOGunknownTop,
.LOGunknownBottom{
	height: 100%;
	width: 100%;
	position: absolute;
	transition: top 0.5s ease;
	overflow: hidden;
	background-color:var(--grey-300);
	overflow: hidden;
}
.LOGknownArea,
.LOGscrollbarBox{
	width: 100%;
	height: 100%;
	position: relative;
	background-color:var(--white);
	overflow: hidden;
}
.LOGtoolbarWrapper{
	display: grid;
	grid-template-columns: 1fr;
}

.LOGscrollbarLineTop,
.LOGscrollbarLineBottom{
	width: 100%;
	height: 4px;
	background-color: var(--grey-400);
	position: absolute;
	transition: top 0.5s ease;
	overflow: hidden;
	z-index: 10;
	cursor: pointer;
}

.LOGscrollbarLine:hover{
	height: 5px;
}
.LOGscrollbarLineBottom.LOGlineSelected,
.LOGscrollbarLineTop.LOGlineSelected{
	background-color: var(--blue) !important;
}
.LOGscrollbarLineTop:hover,
.LOGscrollbarLineBottom:hover{
	height: 4px;
	background-color: var(--grey-500);
}
.LOGscrollbarHoverLine{
	width: 100%;
	height: 3px;
	background-color: var(--grey-500);
	opacity: 50%;
	position: absolute;
	overflow: hidden;
	cursor: pointer;
	z-index: 8;
}
.LOGblurEntry{
	opacity: 40%;
}
.LOGscrollbarPopout{
	white-space: nowrap; /* Prevent text from wrapping */
	overflow: hidden;    /* Hide overflowing content */
	text-overflow: ellipsis;
	width: 200px;
}
.LOGhighlight{
	background-color: yellow;
}

.LOGclearButton {
	color: var(--grey-500);
	margin-top: -2px;
	opacity: 0.8;
	padding-left: 6px;
}
.LOGclearButtonStats{
	padding-left: 12px !important;
}
.LOGclearButton:hover,
.LOGclearButton:active {
	opacity: 1;
}
.LOGdisabled{
	color: grey !important;
	text-decoration: unset !important;
	cursor: not-allowed;
}
.LOGdetails{
	color: var(--blue);
	text-decoration: none;
	padding-left: 2px;
	padding-right: 2px;
}
.LOGdetails:hover{
	text-decoration: underline;
}
.LOGgrey{
	color: var(--grey-500);
	display: inline;
	margin-right: 12px;
	margin-top: 8px;
	margin-left: 0px;
}
.LOGmodal .TOGbutton{
	background-color: var(--white);
}
.LOGsideHeader{
	height: 66px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 12px;
	padding-left: 24px;
	padding-right: 24px;
	user-select: none;
	background-color: #ebf3f6;
	border-bottom: 1px solid var(--grey-400);
	box-sizing: border-box;
}
.LOGsideHeaderTitle{
	font-family: var(--font-buttons);
	color: var(--blue-dark);
	font-size: 16px;
	font-weight: 500;
}
.LOGselectingEnd .LOGtypeDiv,
.LOGselectingEnd .LOGdateTimeDiv,
.LOGselectingEnd .LOGsearchContainerDiv,
.LOGselectingEnd .LOGbulkDiv > *,
.LOGselectingEnd .LOGstorageDiv,
.LOGselectingEnd .LOGcomponentDiv,
.LOGselectingEnd .LOGsideHeader,
.LOGselectingStart .LOGtypeDiv,
.LOGselectingStart .LOGdateTimeDiv,
.LOGselectingStart .LOGsearchContainerDiv,
.LOGselectingStart .LOGbulkDiv > *,
.LOGselectingStart .LOGstorageDiv,
.LOGselectingStart .LOGcomponentDiv,
.LOGselectingStart .LOGsideHeader{
	opacity: 0.3;
}
.LOGbulkTitleDiv,
.LOGselectingEnd .LOGbulkRowEnd,
.LOGselectingStart .LOGbulkRowStart{
	opacity: unset !important;
}
.LOGselect{
	display: none;
}
.LOGselectingEnd .LOGselect,
.LOGselectingStart .LOGselect{
	display: unset;
}
.LOGselect .BUTTONstandard{
	margin-top: 4px;
	margin-left: 8px;
}
.LOGselect .BUTTONstandard:hover{
	background-color: var(--green-lighter);
}
.LOGselectingEnd .LOGendDot::before,
.LOGselectingStart .LOGstartDot::before{
	display: block;
   content: '';
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background-color: var(--blue);
   margin-right: 12px;
   margin-top: 9px;
}
.LOGselectingEnd .LOGclearDateDiv,
.LOGselectingStart .LOGclearDateDiv{
	display: none;
}
.LOGcancelDateDiv{
	display: none;
}
.LOGselectingEnd .LOGcancelDateDiv,
.LOGselectingStart .LOGcancelDateDiv{
	display: unset;
}

.LSTmodal{
   padding-left: 16px;
   padding-right: 16px;
   padding-top: 16px;
   padding-bottom: 12px;
   color: var(--grey-600);
}
.LSTgrid{
	display: grid;
	grid-template-columns: 1fr auto;
   column-gap: 16px;
   margin-bottom: 16px;
}
.LSTstopDiv{
   color: var(--grey-500);
   opacity: 0.8;
}
.LSTdismiss,
.LSTstop{
   color: var(--blue);
   cursor: pointer;
   display: inline-block;
   text-decoration: none;
   font-family: var(--font-buttons);
   font-weight: 500;
   font-size: 9.5px;
   letter-spacing: 0.08em;
}
.LSTdismiss:hover,
.LSTstop:hover{
   text-decoration: underline;
}

.LSTstopDiv:hover,
.LSTstopDiv:active{
	opacity: 1;
}
.LSTbar{
   height: 16px;
   width: 100%;
   background-color: var(--grey-200);
   border-radius: var(--border-radius);
   border: 1px solid var(--grey-400);
   width: 100%;
   position: relative;
   background-color:var(--white);
   overflow: hidden;
}
.LSTcomplete{
	height: 100%;
	width: 100%;
	position: absolute;
	transition: left 0.5s ease;
	overflow: hidden;
	background-color:var(--grey-300);
	overflow: hidden;
}
.LSTincomplete{
	height: 100%;
	width: 100%;
	position: absolute;
	transition: left 0.5s ease;
	overflow: hidden;
	background-color:var(--green);
	overflow: hidden;
   opacity: 0.8;
}
.LSTtitle{
   color: var(--grey-600);
   font-size: 10.5px;
   padding-left: 4px;
}
.LSThidden{
   display: none;
}


.MENUviewRepo{
   text-decoration: none;
	color: inherit;
}
.MENUtooltipArrow {
	position: absolute;
	top: 0;
	right: -27px;
	z-index: 100;
	border-color: inherit;
}
.MENUtooltipArrow:before {
	content: "";
	border-left: 5px solid transparent;
	border-bottom: 5px solid var(--white);
	border-right: 5px solid transparent;
	position: absolute;
	top: -4px;
	right: 32px;
}
.MENUtooltipArrow:after {
	content: "";
	position: absolute;
	top: -6px;
	right: 31px;
	border-left: 6px solid transparent;
	border-bottom: 6px solid var(--grey-400);
	border-right: 6px solid transparent;
	z-index: -1;
}
.MENUtooltipContents {
	background: var(--white);
	border-radius: 3px;
	border: 1px solid var(--grey-400);
	box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
	padding: 4px;
}
.MENUtooltipContents a,
.MENUtooltipContents p {
	font-size: 11px;
	margin: 2px 0px;
	padding: 3px 8px;
	border-radius: 3px;
	color: var(--grey-700);
}
.MENUtooltipContents a:hover,
.MENUtooltipContents p:hover {
	background: var(--blue-lighter);
	color: var(--grey-900);
	cursor: pointer;
}
.MENUtooltip {
	position: absolute;
	right: 5px;
}
.MENUtooltipContents:hover {
	cursor: pointer;  /* to prevent mouse change while switching between menu options */
}
.MENUwarning{
   position: relative; /* Ensure the pseudo-element is positioned relative to this element */
}
.MENUwarning::before {
   content: '';
   position: absolute; /* Position the pseudo-element absolutely within its parent */
   top: 10.5px; /* Position vertically at the center of the parent */
   transform: translateY(-50%); /* Adjust for vertical centering */
   left: -1px; /* Position the pseudo-element to the left of the text */
   width: 4px;
   height: 4px;
   border-radius: 50%;
   background-color: var(--red);
   margin-right: 8px; /* Margin between the pseudo-element and text */
}

.MKEtab {
   position: relative;
   padding-left: 20px;  /* Indent the text */
}

.MKEtab::before {
   content: '•';         /* Bullet symbol */
   position: absolute;
   left: 0;
}
.MKEbuttons{
   justify-content: end;
}
.MKEmessage{
   margin-bottom: 10px;
   font-weight: bold;
}
.MKEbox{
   border: 1px solid var(--grey-300);
   border-radius: var(--border-radius);
   padding: 10px;
   background-color: var(--grey-100);
   padding: 24px;
   padding-bottom: 12px;
   padding-top: 12px;
   margin-bottom: 24px;
}


.NRLdescription {
	display: block;
	border-radius: var(--border-radius);
	border: 1px solid var(--grey-400);
	background-color: var(--white);
	font-weight: var(--regular);
	font-size: 12px;
	line-height: 16px;
	padding: 6px 8px;
	color: var(--grey-800);
	width: 100%;
	box-sizing: border-box;
	font-family: var(--font-sans);
	resize: none;
	margin-top: 12px;
}
.NRLdescription::placeholder {
	color: var(--grey-400);
}
.NRLbottomRow{
	margin-top: 10px;
	display: grid;
	grid-template-columns: auto auto;
}
.NRLworking{
	display: flex;
	align-items: center;
}
.NRLspinner{
	margin-left: 6px;
}
.NRLbuttonsRow{
   display: grid;
	grid-template-columns: auto auto;
	justify-content: end;
	margin-left: auto;
}
.NRLheader{
	font-family: var(--font-buttons);
	color: var(--grey-500);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.05em;
}
.NRLcontainer {
	background: var(--grey-200);
	padding: 12px 18px;
	border: 1px solid var(--grey-400);
	border-radius: var(--border-radius);
	margin-bottom: 12px;
}
.NRLeditableCheck{
	height: 14px;
	margin-top: 6px;
	margin-bottom: 6px;
}
.NRLrepoFeedback,
.NRLnameExistsFeedback{
	color: var(--red);
	font-size: 10px;
	line-height: 12px;
	margin-top: 4px;
  	overflow: visible;
}
.NRLeditable{
	display: grid;
	grid-template-columns: auto 40px 1fr 80px;	
}
.NRLeditableLabel{
	padding-top: 6px;
	padding-bottom: 6px;
}
.NRLtags{
	margin-top: 12px;
}
.NRLname{
	margin-top: 12px;
}


.NWCnameFeedback{
   color: var(--red);
	font-size: 10px;
	line-height: 12px;
	margin-top: 4px;
}
.NWCaccessWarning{
	color: var(--grey-600);
	padding-left: 48px;
	overflow: hidden;
	width: 100%;
	text-overflow: ellipsis; 
	white-space: nowrap;
	font-size: 15px;

	/* text-align: center; */
}
.NWCdescription {
	display: block;
	border-radius: var(--border-radius);
	border: 1px solid var(--grey-400);
	background-color: var(--white);
	font-weight: var(--regular);
	font-size: 12px;
	line-height: 16px;
	padding: 6px 8px;
	color: var(--grey-800);
	width: 100%;
	box-sizing: border-box;
	font-family: var(--font-sans);
	resize: none;
	margin-top: 4px;
}
.NWCdescription::placeholder {
	color: var(--grey-400);
}
.NWCheader{
	font-family: var(--font-buttons);
	color: var(--grey-500);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.05em;
}
.NWCrepoFeedback,
.NWCrepoDoesntExistFeedback,
.NWCnameFeedback{
   color: var(--red);
	font-size: 10px;
	line-height: 12px;
	margin-top: 4px;
  	overflow: visible;
  	position: absolute;
}
.NWCnameExistsFeedback{
	color: var(--red);
	font-size: 10px;
	line-height: 12px;
	margin-top: 4px;
  	overflow: visible;
}
.NWCtemplateDiv {
	flex-grow: 1;
	display: grid;
	grid-template-rows: 40px 40px 1fr;
	border-radius: var(--border-radius);
	min-height: 0;
	overflow: hidden;
	padding-left: 16px;
}
.NWChidden{
	display: none !important;
}
.NWCgitFeedback{
   border: 1px solid var(--grey-400);
   border-radius: var(--border-radius);
   background: var(--grey-200);
   padding: 24px 32px;
}
.NWCnoCollections{
	color: var(--grey-600);
	border: solid 1px var(--grey-200);
	border-radius: var(--border-radius);
   padding: 100px;
	text-align: center;
	height: 100%;
}
.NWCfilter {
	background-image: url(/NWC/NWCiconFilter.svg);
	background-repeat: no-repeat;
	background-position: 6px center;
	padding-left: 28px;
	min-width: 120px;
}
.NWCheaderDiv{
	margin-bottom: 12px;
	padding-right: 24px;
}
.NWcheckboxGridDiv{
	margin-bottom: 4px;
	padding-right: 4px;
	display: grid;
	grid-template-columns: 1fr auto;
}
.NWCcheckboxDiv{
	border: 1px solid var(--grey-400);
	border-radius: var(--border-radius);
	background-color: var(--grey-200);
	padding: 12px;
	padding-left: 24px;
	padding-right: 20px;
	margin-right: 16px;
}
.NWCrepoLink{
	display: flex;
	height: 100% !important;
	justify-content: center;
	align-items: center;
	width: 50px;
	margin-top: 5px;
}
.NWCrepoLink:hover{
	color: var(--blue);
}
.NWCopenLinkDiv{
	content: url(/NWC/NWCiconNewWindow.svg);
}
.NWCrepoLink:hover .NWCopenLinkDiv,
.NWCopenCollection:hover .NWCopenLinkDiv{
	content: url(/NWC/NWCiconNewWindowHover.svg);
}
.NWCmodal{
	display: flex;
	flex-direction: column;
	height: 100%;
	color: var(--grey-800);
}
.NWCcardContent {
	display: grid;
	grid-gap: 32px;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	padding-bottom: 4px;
}
.NWCcardContent-hide {
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	padding-bottom: 0px;
	box-sizing: border-box;
	padding-right: 24px;
}
.NWCcardLoading {
	background-image: url(/TRANS/images/spinner.gif);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 24px;
	opacity: 0.5;
	filter: alpha(opacity=5);
	height: 100%;
	width: 100%;
}
.NWCbitbucketUrl{
	padding-left: 4px;
	padding-right: 4px;
}
.NWCaccessError{
	color: red;
	padding-right: 4px;
}

.NWCnoBitbucketAccess{
	width: 100%;
	color: var(--grey-800);
	letter-spacing: 0.05em;
	max-height: calc(100% - 24px);
	font-size: 13px;
	display: flex;
	height: 100% !important;
	justify-content: center;
	align-items: center;
}
.NWCnoTemplatesDefined{
	width: 100%;
	color: var(--grey-400);
	letter-spacing: 0.05em;
	max-height: calc(100% - 24px);
	font-size: 11px;
	display: flex;
	height: 100% !important;
	gap: 28%;
}
.NWCnoTemplatesDefinedText{
	display: flex;
   justify-content: center;
   align-items: center;
}

.NWCnewCardError{
	color: red;
   padding: 100px;
}

.NWCtemplateCard-visible {
	opacity: 1;
	animation: fadein .4s cubic-bezier(0.29, 1.29, 1, 1) forwards;
}
.NWCnoCache{
	background-color: var(--grey-200) !important;
}
.NWCblankCard,
.NWCtemplateCard {
	border-radius: var(--border-radius);
	background-color: var(--white);
	border: 1px solid var(--grey-400);
	height: 142px;
	text-align: left;
	display: inline-block;
	overflow: hidden;
	padding: 20px;
	box-sizing: border-box;
	display: grid;
	grid-template-rows: auto 1fr;
	user-select: none;
}
.NWCnoTemplatesDefined .NWCblankCard{
	width: 230px;
}
.NWCtemplateCard{
	opacity: 0;
}
.NWCblankCard{
 	border: 3px dotted var(--grey-400);
	padding: 18px !important;
	color: var(--grey-500);
}
.NWCblankCard:hover{
	padding: 20px !important;
	color: unset;
}
.NWCblankCard,
.NWCcached{
	cursor: pointer;
}
.NWCcomponentListRow:hover,
.NWCcached:hover,
.NWCblankCard:hover,
.NWCtemplateCardSelected{
	background-color: #F8FCFE;
	border: 1px solid var(--blue);
	box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
}
.NWCtemplateCard span {
	font-size: 11px;
	line-height: 1.6em;
	word-wrap: break-word;
	white-space: pre-wrap;
	color: var(--grey-600);
	box-decoration-break: clone;
}
.NWCtemplateCardHeader {
	display: flex;
	justify-content: space-between;
}
.NWCcatalogueModalContainer {
	height: calc(100% - 62px)
}
.NWCcardContainer {
	overflow: auto;
}
.NWCcardContainer::-webkit-scrollbar {
	display: none;
}
.NWCtemplateCardName{
	display: block;
	font-weight: bold;
	font-size: 12px;
	margin-bottom: 12px;
	word-wrap: break-word;
	color: var(--grey-800);
}
.NWCblankCardName {
	font-weight: bold;
	font-size: 12px;
	margin-bottom: 12px;
	word-wrap: break-word;
}
.NWCtemplateCardDesc {
	overflow: auto;
	word-wrap: break-word;

}
.NWCtemplateCardDesc a{
	color: var(--blue);
}
.NWCtemplateCardDesc {
	padding-top: 2px;
	--scrollbarBG: #FFFFFF;
	--thumbBG: #D2DDE8;
	scrollbar-width: thin;
	scrollbar-color: var(--thumbBG) var(--scrollbarBG);
	line-height: 21px;
}
.NWCtemplateCardDesc::-webkit-scrollbar {
	width: 16px;
	height: 16px;
}
.NWCtemplateCardDesc::-webkit-scrollbar-track {
	background: var(--scrollbarBG);
}
.NWCtemplateCardDesc::-webkit-scrollbar-thumb {
	background-color: var(--thumbBG);
	border-radius: 8px;
	border: 5px solid var(--scrollbarBG);
}
.NWCfilterContainer {
	background: var(--grey-200);
	padding: 12px 18px;
	padding-left: 12px;
	border: 1px solid var(--grey-400);
	border-radius: var(--border-radius);
	margin-bottom: 12px;
	margin-right: 16px;
	cursor: default;
}
.NWCfilterContainer:hover{
	background-color: #F8FCFE;
	border: 1px solid var(--blue);
	box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
}
.NWClistContainer{
	height: 100%;
	overflow-y: scroll;
}
.NWCrepoLinkHrefDiv{
	display: grid;
	column-gap: 8px;
	grid-template-columns: 50px 1fr;	
}
.NWCbuttons {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: end;
	margin-top: 12px;
	margin-right: 0;
	margin-left: auto;
}
.NWCtopHeaderDiv{
	display: grid;
	grid-template-columns: 1fr 40px 40px 22px;	
}
.NWCeditable{
	display: grid;
	grid-template-columns: auto 40px 1fr 80px;	
}
.NWCgrid{
	display: grid;
	grid-template-columns: 2fr 450px;	
	column-gap: 24px;
	height: calc(100% - 125px);
}
.NWCeditableLabel{
	padding-top: 6px;
	padding-bottom: 6px;
}
.NWCconnectComponentsCheck,
.NWCeditableCheck{
	height: 14px;
	margin-top: 6px;
	margin-bottom: 6px;
}
.NWCaddComponentsGrid{
	height: 100%;
	overflow: hidden;
}
.NWCadd{
	margin-right: 16px !important;
}

.NWCaddComponentButtons {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: end;
	margin-right: 0;
	margin-left: auto;
}
.NWCcomponentListRow{
	display: grid;
	grid-template-columns: 1fr 0px auto;
	padding: 6px 12px;
	margin-bottom: 6px;
	border-radius: var(--border-radius);
	background-color: var(--white);
	border: 1px solid var(--grey-400);
	cursor: pointer;
	box-sizing: border-box;
}
.NWCremoveListRow{
	cursor: pointer;
}
.NWCrowGuid{
	visibility: hidden;
}
.NWCconnectComponentsGrid{
	display: grid;
	grid-template-columns:  auto 40px 1fr;
}
.NWCcomponentListDiv{
	height: 100%;
	overflow: hidden;
	display: grid;
	row-gap: 24px;
	grid-template-rows: 1fr auto;
	position: relative;
}
.NWCmodal{
	user-select: none;
}
.NWCname{
	margin-right: 12px;
}
.NWCtrashIcon{
	width: 16px;
	height: 16px;
	margin-top: -4px;
	margin-bottom: -4px;
	fill: currentColor;
}
.NWCbuttonsRow{
	display: grid;
	grid-template-columns: auto 1fr auto auto auto;
	justify-content: end;
	margin-right: 16px;
	margin-top: 24px;
	margin-left: auto;
	width: 100%;
}
.NWCrefreshCacheGrid{
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 8px;
	word-break: break-all;
	padding-left: 24px;
}
.NWCrefreshCache{
	color: var(--blue);
	text-decoration: none;
	cursor: pointer;
}
.NWCrefreshCache:hover {
	color: var(--blue);
	text-decoration: underline;
	cursor: pointer;
}
.NWCnoCacheRow{
	display: grid;
	grid-template-columns: 150px 1fr;
}
.NWCtag{
	margin-top: 8px;
}
.NWCcollectionsDiv{
	width: 100%;
	margin-bottom: 12px;
	display: flex;
	gap: 10px;
	align-items: center;
}
.NWCcollectionsLabel{
	font-weight: bold;
}
.NWCpaddingRight{
	padding-right: 24px;
}
.NWCcustomTemplateCard{
	display: none !important;
}
.NWCmoveRepoDiv{
	border: 0;
	border-radius: var(--border-radius);
	background-color: var(--grey-100);
	color: var(--grey-600);
	font-size: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: move;
	background-color: var(--grey-200);
}
.NWCmoveRepoDiv:hover{
	background-color: var(--grey-300);
}
.NWCremoveComponent{
	padding-bottom: 4px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding-top: 0px;
}
.NWCrefreshInfo{
	color: var(--grey-600);
	text-decoration: none;
}
.NWCrefreshInfoLink{
	color: var(--blue);
	text-decoration: none;
	padding-left: 2px;
	padding-right: 2px;
}
.NWCrefreshInfoLink:hover{
	text-decoration: underline;
}
.PBLgroup{
   justify-content: end;
}
.PERmodal{
	max-width: 800px !important;
}
.PERtitle {
	margin: unset;
	font-weight: var(--bold);
	font-size: 20px;
	line-height: 32px;
	color: var(--grey-700);
	padding: 0px 0px 24px;
	margin-bottom: 0px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 10px;
}
.PEReditRuleHeading,
.PEReditRuleRow{
	display: grid;
	column-gap: 24px;
	grid-template-columns: 80px 0px 1fr 0px 100px 0px 100px 0px 170px 68px;
}
.PEReditRuleRow,
.PERruleRow{
	border-top: 1px solid var(--grey-300);
}

.PERruleTable{
	border-radius: var(--border-radius);
	border: 1px solid var(--grey-300);
	background-color: var(--grey-100);
	overflow: hidden;
	width: 100%;
}
.PEReditRuleHeading,
.PERruleHeading{
	border-bottom: 1px solid var(--grey-300);
	background-color: var(--grey-200);
}
.PEReditRuleHeading>div,
.PERruleHeading>div{
	font-weight: var(--semibold);
	color: var(--grey-800);
}
.PERheading{
	padding-left: 18px;
	padding-right: 12px;
	min-height: 32px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding-top: 16px;
	padding-bottom: 16px;
}
.PERruleData{
	text-align: left;
	border-left: 0px;
	border-right: 0px;
	padding: 18px;
	color: var(--grey-600);
	/* border-top: 1px solid var(--grey-300); */
}
.PERpaddingLeft{
	padding-left: 18px !important;
}
.PERruleVal{
	display : grid;
   box-sizing: border-box;
	margin: 12px 16px;
	align-items: center;
	/* border-bottom: 1px solid var(--grey-300); */
	color: var(--grey-800);
}
.PERpaddingRight{
	padding-right: 18px !important;
}
.PERdeleteRow{
	text-align: left;
	border-left: 0px;
	border-right: 0px;
	padding: 12px;
	padding-left: 0px;
	color: var(--grey-800);
}
a.PERruleData{
	color: var(--blue);
	text-decoration: none;
}
a.PERruleData:hover{
	text-decoration: underline;
}
.PERcolon{
	letter-spacing: 0.05em;
	color: var(--grey-600);
}
.PERimportant{
	align-items: center;
	padding: 24px;
	padding-left: 16px;
	margin-bottom: 18px;
	border-radius: 4px;
	border: 1px solid var(--grey-300);
	color: var(--grey-800);
	background-color: var(--grey-100);

}
.PERsshPort,
.PERhttpPort{
	width: 80px;
}
.PERportHeading{
	padding-left: 4px;
}
.PERsshPort,
.PERhttpPort{
	margin-left: 4px;
}
.PERport{
	margin-left: 8px;
}
.PERon,
.PERand{
	margin-left: -20px;
}
.PERproviderDiv{
	margin-left: -8px;
}
.PERproviderHeading{
	padding-left: 0px;
	margin-left: -6px;
}
.PERruleHeading,
.PERrow{
	display: grid;
	grid-template-columns: auto 1fr auto;
}
.PERcell{
	text-align: left;
	border-left: 0px;
	border-right: 0px;
	padding: 18px;
	color: var(--grey-600);
}
.PERmessage{
	text-align: left;
	border-left: 0px;
	border-right: 0px;
	padding: 18px;
	padding-left: 4px;
	color: var(--grey-600);
}
.PERpaddingTop{
	/* padding-top: 26px !important; */
}
.PERrow{
	border-top: 1px solid var(--grey-300);
	padding-top: 8px;
	padding-bottom: 8px;
}
.PERdeleteButton{
	width: 16px;
	height: 16px;
	fill: currentColor;
}
.PERruleHeading>div:first-child,
.PERrow>div:first-child{
	padding-left: 28px !important;
	padding-right: 0px;
}
.PERgroup{
	display: flex;
	justify-content: flex-end;
}
.PERbuttons{
	display: grid;
	grid-template-columns: auto auto;
	padding-right: 28px;
	padding-top: 9px;
}
.PERspace{
	padding-left: 8px;
	padding-right: 12px;
}
.PERrulesTarget .BUTTONdefault{
	border: 1px solid var(--grey-300);
}
.PERconnect{
	height: 34px;
	margin-right: 12px;
}
.PERconnect:hover{
	background-color: var(--green-hover);
	transition: 250ms ease-in;
	color: var(--white);
}
.PERconnect:active{
	background-color: var(--green-active);
	transition: 70ms ease-in;
	color: var(--white);
}
.PERdetails{
	color: var(--blue);
	text-decoration: unset;
	cursor: pointer;
	padding-left: 2px;
	padding-right: 2px;
}
.PERdetails:hover{
	text-decoration: underline;
}
.PERstatus{
	display: inline-flex; /* or inline-block, depending on your layout needs */
	align-items: center;
}
.PERstatus::before{
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--red);
	margin-right: 16px;
}
.PERstatus.PERconnected::before{
	background-color: var(--green);
}
.PERerror{
	color: var(--red-dark);
}
.PERinline{
	display: inline-flex;
}
.PERpublicKey{
   height: 12em !important;
   resize: none;
}
.PERdisplay{
	padding: 8px;
	padding-left: 16px;
	border-radius: 4px;
	border: 1px solid var(--grey-300);
	color: var(--grey-600);
}
.PINSrow,
.PINSheader{
   display: grid;
   grid-template-columns: auto auto auto 35px;
   border: 1px solid var(--grey-400);
   border-bottom: 0px;
   background: var(--grey-200);
   align-items: center;
   min-height: 28px;
}
.PINSrow{
   border-bottom: 0px;
}
.PINSheader {
   position: sticky;
   top: 0;
   z-index: 1;
   background: var(--grey-200);
   border-top-left-radius: var(--border-radius);
   border-top-right-radius: var(--border-radius);
}
.PINSheader div {
   padding: 6px 8px;
   font-size: 9px;
   font-family: var(--font-buttons);
   color: var(--grey-600);
   letter-spacing: 0.05em;
   line-height: 1.25em;
}
.PINSerrorFeedback{
   padding-top: 8px;
   color: var(--red);
}
.PINSdelete,
.PINSaddRow{
   color: var(--blue);
   text-decoration: none;
   cursor: pointer;
}
.PINSdelete:hover{
   text-decoration: underline;
}
.PINSaddRow{
   border: 1px solid var(--grey-400);
   padding: 6px;
   background: var(--grey-200);
   font-size: 11px;
   font-family: var(--font-buttons);
   font-weight: 500;
   border-bottom-left-radius: var(--border-radius);
   border-bottom-right-radius: var(--border-radius);
}
.PINSdelete{
   color: var(--grey-600);
   text-align: center;
}
.PINSselected{
   font-weight: 600;
   border: 1px solid rgba(0, 0, 0, .07) !important;
   background-color: rgba(0, 0, 0, .07);
   box-shadow: inset 0 2px 3px rgba(0, 0, 0, .25);
   opacity: unset;
}
.PINSsaveConfigButton{
   justify-content: right;
   margin-top: 25px;
}
.PINSrow .FORMinput{
   border-radius: 0px;
   border-left: 0px;
   border-bottom: 0px;
   border-top: 0px;
}
.PINStableContainer{
   max-height: 300px;
   overflow-y: auto;
}
.PINStable{
   border-bottom: 1px solid var(--grey-400);
}
.PINSmodal{
   max-height: 800px;
   overflow-y: hidden;
}
.PINSdeletetableCell {
   text-align: left;
   border-left: 0px;
   border-right: 0px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
}
.PINStable:last-child{
   border-bottom: 0px;
}
.PINStable:first-child{
   border-top: 0px;
}

.PINSheaderTitle{
   font-family: var(--font-buttons);
   color: var(--grey-500);
   font-weight: 500;
   font-size: 11px;
   letter-spacing: 0.05em;
}
.PINScontainer{
   background: var(--grey-200);
   padding: 12px 18px;
   border: 1px solid var(--grey-400);
   border-radius: var(--border-radius);
   margin-bottom: 12px;
   color: var(--grey-600);
}
.PINScontainer li{
   line-height: 36px;
}
.PINScontainer a{
   color: var(--blue);
   text-decoration: none;
   padding-left: 2px;
   padding-right: 2px;
}
.PINScontainer a:hover{
   text-decoration: underline;
}
.PINSclearAll{
   color: var(--blue);
   text-decoration: none;
   cursor: pointer;
   text-align: right;
}
.PINSclearAll:hover{
   text-decoration: underline;
}
.PINSclearAllContainer{
   color: var(--grey-600);
   text-align: right;
   display: grid;
   grid-template-columns: 1fr auto auto;
   padding-top: 18px;
   padding-bottom: 6px;
   padding-right: 2px;
   gap: 2px;
}
.POPpopoutCard--anchor{
	display: flex;
	position: absolute;
	top: 0px;
	left: 0px;
	align-items: center;
	justify-content: center;
	height: 100vh;
	width: 100vw;
	z-index: 997;
}
.POPpopoutCard-overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	opacity: 0.25;
	transition: opacity 0.4s;
	will-change: opacity;
	background-color: #000;
	user-select: none;
	z-index: 998;
}

.POPpopoutCard-wrapper {
	/* position: fixed; */
	/* top: 50%; */
	/* left: 50%; */
	/* transform: translate(-50%, -50%); */
	width: 50%;
	background-color: var(--white);
	border-radius: var(--border-radius);
	box-shadow: 0 4px 16px 0 rgba(var(---grey-800), 0.5);
	z-index: 999;
	overflow: hidden;
	max-height: 95%;
}

.POPpopoutCard-header {
	height: 60px;
	flex-shrink: 0;
	padding: 0 32px;
	display: flex;
	column-gap: 32px;
	align-items: center;
	border-bottom: 1px solid var(--grey-300);
}

.POPpopoutCard-content {
	position: relative;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 32px;
}

.POPpopoutCard--close {
	border: none;
	background-color: transparent;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%0A%3Csvg width='15px' height='16px' viewBox='0 0 15 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='2.-Menu' transform='translate(-15.000000, -13.000000)' stroke='%23000000'%3E%3Cg id='Group' transform='translate(15.000000, 13.521000)'%3E%3Cpath d='M0,0.479000129 L15,14.2971819' id='Path-3'%3E%3C/path%3E%3Cpath d='M0,14.7761821 L15,-1.24344979e-14' id='Path-3'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

/*
    Arrow Types:
      arrow-left
      arrow-right
      arrow-top
      arrow-bottom
      arrow-top-left
      arrow-top-right
      arrow-bottom-left
      arrow-bottom-right
 */

.POPpopoverWrap {
  position: relative;
  left: 12px;
}

.POPpopover-wrap {
  position: relative;
  left: 12px;
  z-index: 10;
}

.POPpopover {
  min-width: 100px;
  width: auto;
  height: auto;
  max-width: 250px;
  line-height: normal;
  position: fixed;
  border-radius: var(--border-radius);
  border: 1px solid var(--grey-400);
  background: var(--white);
  padding: 0;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}

.POPpopover-contents {
  padding: 10px;
  z-index: 9999;
}

.POPpopover-arrow-left {
  position: absolute;
  top: 32px;
  left: -11px;
  z-index: 100;
  border-color: inherit;
}

.POPpopover-arrow-left:before {
  content: "";
  border-top: 11px solid transparent;
  border-right: 11px solid #fff;
  border-bottom: 11px solid transparent;
  position: absolute;
  top: -20px;
  left: 0;
}

.POPpopover-arrow-left:after {
  content: "";
  position: absolute;
  top: -21px;
  left: -1px;
  border-top: 12px solid transparent;
  border-right: 12px solid var(--grey-400);
  border-bottom: 12px solid transparent;
  z-index: -1;
}

.POPpopover-arrow-right {
  position: absolute;
  top: 32px;
  right: -1px;
  z-index: 100;
}

.POPpopover-arrow-right:before {
  content: "";
  border-top: 11px solid transparent;
  border-left: 11px solid #fff;
  border-bottom: 11px solid transparent;
  position: absolute;
  top: -20px;
  left: -1px;
}

.POPpopover-arrow-right:after {
  content: "";
  position: absolute;
  top: -21px;
  left: -1px;
  border-top: 12px solid transparent;
  border-left: 12px solid var(--grey-400);
  border-bottom: 12px solid transparent;
  z-index: -1;
}

.POPpopover-arrow-top {
  position: absolute;
  top: 0;
  left: 30%;
  z-index: 100;
  border-color: inherit;
}

.POPpopover-arrow-top:before {
  content: "";
  border-left: 11px solid transparent;
  border-bottom: 11px solid var(--white);
  border-right: 11px solid transparent;
  position: absolute;
  top: -11px;
  left: 32px;
}

.POPpopover-arrow-top:after {
  content: "";
  position: absolute;
  top: -12px;
  left: 31px;
  border-left: 12px solid transparent;
  border-bottom: 12px solid var(--grey-400);
  border-right: 12px solid transparent;
  z-index: -1;
}

.POPpopover-arrow-bottom {
  position: absolute;
  bottom: 0;
  left: 30%;
  z-index: 100;
  border-color: inherit;
}

.POPpopover-arrow-bottom:before {
  content: "";
  border-left: 11px solid transparent;
  border-top: 11px solid var(--white);
  border-right: 11px solid transparent;
  position: absolute;
  bottom: -11px;
  left: 32px;
}

.POPpopover-arrow-bottom:after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 31px;
  border-left: 12px solid transparent;
  border-top: 12px solid var(--grey-400);
  border-right: 12px solid transparent;
  z-index: -1;
}

/* Top-Left placement */
.POPpopover-arrow-top-left {
  position: absolute;
  top: 0;
  left: -25px;
  z-index: 100;
  border-color: inherit;
}

.POPpopover-arrow-top-left:before {
  content: "";
  border-left: 11px solid transparent;
  border-bottom: 11px solid var(--white);
  border-right: 11px solid transparent;
  position: absolute;
  top: -11px;
  left: 32px;
}

.POPpopover-arrow-top-left:after {
  content: "";
  position: absolute;
  top: -12px;
  left: 31px;
  border-left: 12px solid transparent;
  border-bottom: 12px solid var(--grey-400);
  border-right: 12px solid transparent;
  z-index: -1;
}


/* Top-Right placement */
.POPpopover-arrow-top-right {
  position: absolute;
  top: 0;
  right: -25px;
  z-index: 100;
  border-color: inherit;
}

.POPpopover-arrow-top-right:before {
  content: "";
  border-left: 11px solid transparent;
  border-bottom: 11px solid var(--white);
  border-right: 11px solid transparent;
  position: absolute;
  top: -11px;
  right: 32px;
}

.POPpopover-arrow-top-right:after {
  content: "";
  position: absolute;
  top: -12px;
  right: 31px;
  border-left: 12px solid transparent;
  border-bottom: 12px solid var(--grey-400);
  border-right: 12px solid transparent;
  z-index: -1;
}

/* Bottom-Left placement */
.POPpopover-arrow-bottom-left {
  position: absolute;
  bottom: 0;
  left: -25px;
  z-index: 100;
  border-color: inherit;
}

.POPpopover-arrow-bottom-left:before {
  content: "";
  border-left: 11px solid transparent;
  border-top: 11px solid var(--white);
  border-right: 11px solid transparent;
  position: absolute;
  bottom: -11px;
  left: 32px;
}

.POPpopover-arrow-bottom-left:after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 31px;
  border-left: 12px solid transparent;
  border-top: 12px solid var(--grey-400);
  border-right: 12px solid transparent;
  z-index: -1;
}

/* Bottom-Right placement */
.POPpopover-arrow-bottom-right {
  position: absolute;
  bottom: 0;
  right: -25px;
  z-index: 100;
  border-color: inherit;
}

.POPpopover-arrow-bottom-right:before {
  content: "";
  border-left: 11px solid transparent;
  border-top: 11px solid var(--white);
  border-right: 11px solid transparent;
  position: absolute;
  bottom: -11px;
  right: 32px;
}

.POPpopover-arrow-bottom-right:after {
  content: "";
  position: absolute;
  bottom: -12px;
  right: 31px;
  border-left: 12px solid transparent;
  border-top: 12px solid var(--grey-400);
  border-right: 12px solid transparent;
  z-index: -1;
}

.POPpopover.with-arrow-top-left::before {
  content: "";
  height: 20px;
  width: calc(100% + 28px);
  display: block;
  top: -20px;
  left: -14px;
  position: absolute;
}

.POPpopover.with-arrow-top-right::before {
  content: "";
  height: 20px;
  width: calc(100% + 28px);
  display: block;
  top: -20px;
  left: -14px;
  position: absolute;
}

.POPpopover.with-arrow-bottom-left::before {
  content: "";
  height: 20px;
  width: calc(100% + 28px);
  display: block;
  bottom: -20px;
  left: -14px;
  position: absolute;
}

.POPpopover.with-arrow-bottom-right::before {
  content: "";
  height: 20px;
  width: calc(100% + 28px);
  display: block;
  bottom: -20px;
  left: -14px;
  position: absolute;
}


#POPpopover-arrow-left {
  position: absolute;
  top: 32px;
  left: -11px;
  z-index: 100;
  border-color: inherit;
}

#POPpopover-arrow-left:before {
  content: "";
  border-top: 11px solid transparent;
  border-right: 11px solid #fff;
  border-bottom: 11px solid transparent;
  position: absolute;
  top: -20px;
  left: 0;
}

#POPpopover-arrow-left:after {
  content: "";
  position: absolute;
  top: -21px;
  left: -1px;
  border-top: 12px solid transparent;
  border-right: 12px solid var(--grey-400);
  border-bottom: 12px solid transparent;
  z-index: -1;
}

#POPpopover-arrow-right {
  position: absolute;
  top: 32px;
  right: -1px;
  z-index: 100;
}

#POPpopover-arrow-right:before {
  content: "";
  border-top: 11px solid transparent;
  border-left: 11px solid #fff;
  border-bottom: 11px solid transparent;
  position: absolute;
  top: -20px;
  left: -1px;
}

#POPpopover-arrow-right:after {
  content: "";
  position: absolute;
  top: -21px;
  left: -1px;
  border-top: 12px solid transparent;
  border-left: 12px solid var(--grey-400);
  border-bottom: 12px solid transparent;
  z-index: -1;
}

#POPpopover-arrow-top {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  border-color: inherit;
}

#POPpopover-arrow-top:before {
  content: "";
  border-left: 11px solid transparent;
  border-bottom: 11px solid var(--white);
  border-right: 11px solid transparent;
  position: absolute;
  top: -11px;
  left: 32px;
}

#POPpopover-arrow-top:after {
  content: "";
  position: absolute;
  top: -12px;
  left: 31px;
  border-left: 12px solid transparent;
  border-bottom: 12px solid var(--grey-400);
  border-right: 12px solid transparent;
  z-index: -1;
}


.POPtooltip {
   position: fixed;
   z-index: 9999;
   padding: 8px;
   border-radius: 12px;
   pointer-events: auto;
}

.POPtooltip::after {
   content: '';
   position: absolute;
   width: 0;
   height: 0;
   border: 10px solid transparent;
}

.POPtooltip-bottom::after {
   top: -20px;
   left: 50%;
   transform: translateX(-50%);
   border-bottom-color: #333;
}

.POPtooltip-top::after {
   bottom: -20px;
   left: 50%;
   transform: translateX(-50%);
   border-top-color: #333;
}

.POPtooltip-left::after {
   right: -20px;
   top: 50%;
   transform: translateY(-50%);
   border-left-color: #333;
}

.POPtooltip-right::after {
   left: -20px;
   top: 50%;
   transform: translateY(-50%);
   border-right-color: #333;
}

/* Error variant */
.POPtooltip--error {
    background: #f8d7da;
    border: 1px solid var(--red);
    color: #842029;
}

.POPtooltip--error.POPtooltip-bottom::after {
    border-bottom-color: var(--red);
}
.POPtooltip--error.POPtooltip-top::after {
    border-top-color: var(--red);
}
.POPtooltip--error.POPtooltip-left::after {
    border-left-color: var(--red);
}
.POPtooltip--error.POPtooltip-right::after {
    border-right-color: var(--red);
}

/* Info variant */
.POPtooltip--info {
    background: white;
    border: 1px solid var(--blue);
    color: #212529;
}

.POPtooltip--info.POPtooltip-bottom::after {
    border-bottom-color: var(--blue);
    
}
.POPtooltip--info.POPtooltip-top::after {
    border-top-color: var(--blue);
}
.POPtooltip--info.POPtooltip-left::after {
    border-left-color: var(--blue);
}
.POPtooltip--info.POPtooltip-right::after {
    border-right-color: var(--blue);
}
.POPtooltip{
    font-size: 11px;
}
.POPtooltip > div{
    display: block;
    padding-left: 8px;
    padding-right: 8px;
    color: var(--grey-800);
    font-size: 11px;
}
.POPtooltip > div:not(:first-of-type){
    border-top: 1px solid var(--grey-300);
    margin: 12px 0;
    padding-top: 12px;
}
.POPtooltip > div:last-of-type{
    margin-bottom: 0px;

}
.POPtooltip.POPtooltip--info > div:not(:first-of-type){
    border-top-color: var(--blue-light);
}
.POPtooltip.POPtooltip--error > div:not(:first-of-type){
    border-top-color: var(--red-light);
}

.COMtooltip.POPtooltip.POPtooltip--info > div:not(:first-of-type){
    border-top: 1px solid var(--grey-300);
}
.POPtooltip .CARDloading-spinner{
    width: unset;
}
.PRJcomponentLink{
   content : url("../PRJ/PRJcomponentLink.svg");
   display :inline;
	opacity: 0.6;
	width: 40px;
 }
 .PRJbranchRowDiv{
   display: inline-flex;
   align-items: center;
   width: 100%;
 }
 .PRJbranchStatus{
   flex-grow: 1;
   overflow: hidden;
   text-overflow: ellipsis;
 }
.PRJconflictExistsFolder,
.PRJconflictExists{
  position: relative; /* Ensure the pseudo-element is positioned relative to this element */
}
.PRJconflictExistsFolder::after,
.PRJconflictExists::after {
  content: '';
  /* position: absolute;  */
  top: 10.5px; /* Position vertically at the center of the parent */
  transform: translateY(-50%); /* Adjust for vertical centering */
  left: -1px; /* Position the pseudo-element to the left of the text */
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--red);
  margin-left: 6px; 
  margin-top: 5px; 
}
.PRJconflictExistsFolder::after{
  opacity: 50%;
}
.PRJheaderTitle{
  height: 66px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  padding: 0 12px;
  padding-left: 24px;
  padding-right: 16px;
  user-select: none;
  background-color: #ebf3f6;
  border-bottom: 1px solid var(--grey-400);
  box-sizing: border-box;
}
.PRJheaderTitleText{
  font-family: var(--font-buttons);
  color: var(--blue-dark);
  font-size: 16px;
  font-weight: 500;
}
.PRJcloud{
  padding-left: 6px;
}
.PRJlibLinkIcon{
  content: url(../PRJ/PRJcomponentLink.svg);
  padding: 4px;
  height: 14px;
  width: 20px;
  opacity: 0.8;
}
.PRJlibLink:hover .PRJlibLinkIcon{
  content: url(../PRJ/PRJcomponentLinkHover.svg);
  opacity: 1;
}
.PRJlibLink{
  margin-right: 8px;
  background: rgba(var(---blue-lighter), 0.075);
  color: rgba(var(---blue), 0.75);
}
.PRJchanges .PRJitemName::after{
  content: "";
  display: inline-block;
  width: 0.5em;                  /* Circle width */
  height: 0.5em;                 /* Circle height */
  margin-right: 6px;            /* Spacing to the text */
  margin-left: 6px;            /* Spacing to the text */
  z-index: 1;
  background-color: var(--yellow-lighter);  /* Light yellow fill */
  border: 1px solid var(--yellow-dark);  /* Slightly darker border */
  opacity: 0.3;
  border-radius: 50%;             /* Makes it a circle */
  vertical-align: middle;         /* Align vertically with text if needed */
}
.PRJcreateModalHeading,
.PRJdeleteModalHeading {
   margin-top: 0px;
   margin-bottom: 24px;
}
.PRJcreateModal {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-column-gap: 8px;
   grid-row-gap: 4px;
   margin-bottom: 16px;
}
.PRJcreateModal input[type="radio"] {
   opacity: 0;
   position: fixed;
   width: 0;
}
.PRJcreateModal label {
   display: inline-block;
   background-color: var(--grey-100);
   padding: 8px 16px;
   font-size: 11px;
   border: 1px solid var(--grey-400);
   border-radius: var(--border-radius);
   color: var(--grey-600);
   text-align: center;
}
.PRJcreateModal label:hover {
   background-color: rgba(var(---blue-lighter), 0.5);
   border: 1px solid var(--grey-500);
}
.PRJcreateModal input[type="radio"]:checked + label {
   background-color: var(--blue-lighter);
   border-color: var(--blue);
   color: var(--blue-dark);
}

.PRJfileGroup {
   border-radius: 4px;
   border: 1px solid var(--grey-400);
   padding: 5px 8px;
   background: var(--grey-100);
   color: var(--grey-500);
}
.PRJdirGroup{
   border-radius: 4px;
   border: 1px solid var(--grey-400);
   padding: 5px 8px;
   background: var(--grey-100);
   background: var(--white);
   margin-bottom: 12px;
}
.FORMinputGroup .PRJfileGroup:first-child {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
}
.FORMinput.PRJfileGroup {
   background: var(--white);
}
.FORMinputGroup .PRJfileGroup:last-child {
   border-left-width: 0;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
}
.PRJproject-pane {
	height: 100vh;
	box-sizing: border-box;
	display: grid;
	overflow: auto;
	grid-template-rows: 1fr;
	grid-template-columns: 50px 1fr;
}

.PRJcomponentSelector {
	grid-column: 2 / 3;
	border-bottom: 1px solid #CDE1EB;
	padding: 8px;
	padding-right: 16px;
}

.PRJcomponentSelector:hover .PRJtranslatorInfo {
	display: flex;
}

.PRJtranslatorInfo {
	height: 50px;
	width: 50px;
	display: none;
	align-items: center;
	justify-content: center;
	position: absolute;
	left: 0px;
	top: 0px;
}

.PRJtranslatorInfo:hover {
	background: rgba(179, 221, 245, 0.25);
	cursor: pointer;
}

.PRJprojectPaneTabs {
	grid-row: 1/3;
	background: #D2E4EC;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.PRJprojectNameAndSwitch {
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--grey-300);
	height: 64px; /* Match editor toolbar height */
	box-sizing: border-box;
	padding : 0 16px;
	padding-right : 10px;
	column-gap: 12px;
}

.PRJprojectManagerCollapsed .PRJprojectNameAndSwitch {
	border-bottom: none;
	height: auto;
}

.PRJprojectName {
	font-size: 12px;
	letter-spacing: 0.02em;
	font-family: var(--font-buttons);
	font-weight: 500;
	color: var(--grey-600);
	height: 50px;
	line-height: 50px;
	/* padding: 0px 16px; */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 0;
	flex-grow: 1;
}

.PRJscriptSwitch {
	margin-left: auto;
	flex-shrink: 0;
	margin-right: 16px;
}

.PRJprojectManagerCollapsed .PRJprojectName {
	transform: rotate(90deg);
	overflow: visible;
}
.PRJprojectManagerCollapsed .PRJheaderTitleText{
	display: none;
}
.PRJprojectManagerCollapsed .PRJprojectNameAndSwitch {
	display: none;
}

.PRJprojectManagerCollapsed .PRJgitRepoLink {
	display: none;
}

.PRJcurrentIcon {
	background: #ebf3f6;
}

.PRJprojectTreeBody {
	padding: 12px;
	padding-top: 16px;
	overflow: hidden;
	flex-grow: 1;
	height: 0;
	padding-right: 2px;
	padding-left: 8px;
}

.PRJprojectManagerCollapsed .PRJprojectTreeBody {
	display: none !important;
}


.PRJprojectTreeScroller {
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	position: relative;
}

/* style project tree scrollbar */
.PRJprojectTreeScroller {
	--scrollbarBG: #ebf3f6;
	--thumbBG: #D2DDE8;
	scrollbar-width: thin;
	scrollbar-color: var(--thumbBG) var(--scrollbarBG);
	padding-right: 6px;
}
.PRJprojectTreeScroller::-webkit-scrollbar {
	width: 14px;
	height: 14px;
}
.PRJprojectTreeScroller::-webkit-scrollbar-track {
	background: var(--scrollbarBG);
}
.PRJprojectTreeScroller::-webkit-scrollbar-thumb {
	background-color: var(--thumbBG);
	border-radius: 8px;
	border: 4px solid var(--scrollbarBG);
}


.PRJproject-tree-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 24px 0px 16px 0px;
}

.PRJproject-tree-header h6 {
	flex-shrink: 0;
	font-size: 12px;
	font-weight: 400;
	color: var(--grey-600);
	margin: 0px;
}

.PRJrootAddFile {
	flex-shrink: 0;
	font-size: 10px;
	letter-spacing: 0.02em;
	cursor: pointer;
	font-family: var(--font-buttons);
	font-weight: 500;
	color: var(--grey-600);
	display: block;
	margin-bottom: 8px;
}

.PRJrootAddFile svg {
	fill: #9AA5B2;
	width: 16px;
	margin-right: 2px;
}

.PRJrootAddFile:hover {
	color: var(--blue);
}

.PRJrootAddFile:hover svg {
	fill: var(--blue);
}

.PRJprojectManager .ui-resizable-e:hover,
.PRJprojectManager .ui-resizable-e:active {
	background-color: #dddddd;
	cursor: col-resize;
}

.PRJresizeControl {
	right: -6px;
	top: 0px;
	bottom: 0px;
	position: absolute;
	outline: none;
	width: 10px;
	padding: 0px;
	border: 0px;
	cursor: ew-resize;
	background-color: transparent;
	z-index: 5;
}

.PRJprojectManagerCollapsed .PRJresizeControl {
	cursor: unset;
}

.PRJresizeShadow {
	bottom: 0px;
	top: 0px;
	right: 4px;
	pointer-events: none;
	position: absolute;
	width: 2px;
	transition: 150ms ease-out;
}

.PRJresizeControl:hover .PRJresizeShadow {
	background: var(--blue);
	transition: 75ms ease-in;
	/* Means that the hover style comes in a gradual way */
}

.PRJprojectManagerCollapsed .PRJresizeControl:hover .PRJresizeShadow {
	background: transparent;
}

/* .PRJresizeButton {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 18px;
	width: 18px;
	border-radius: 9999px;
	background: var(--white);
	border: 1px solid var(--grey-400);
	z-index: 10;
	position: absolute;
	top: 14px;
	left: -5px;
	opacity: 0;
	color: var(--grey-500);
} */

.PRJresizeIcon {
	width: 12px;
	height: 12px;
	fill: transparent;
}

.PRJprojectManagerCollapsed .PRJresizeIcon {
	transform: rotate(180deg);
}

.PRJresizeControl .PRJresizeIcon,
.PRJprojectManager .PRJresizeIcon {
	fill: currentColor;
}

/* .PRJresizeControl:hover .PRJresizeButton,
.PRJprojectManager:hover .PRJresizeButton {
	opacity: 1;
	transition: 150ms ease-in;
	
}

.PRJprojectManagerCollapsed .PRJresizeButton {
	opacity: 1;
}

.PRJresizeControl:hover .PRJresizeButton:hover {
	background: var(--blue-lighter);
	color: var(--blue);
	border: 1px solid var(--blue);
	transition: 150ms ease-out;
	cursor: pointer;
} */

.PRJmodal {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
	background: var(--white);
	border: 1px solid var(--grey-400);
	box-shadow: 0 2px 0 0 rgba(var(---grey-400), 1);
	border-radius: var(--border-radius);
	padding: 32px !important;
	width: 88%;
}

.PRJmodal-close {
	position: absolute;
	right: 16px;
	top: 16px;
	cursor: pointer;
	color: var(--grey-400);
}

.PRJmodal-contents>*:last-child {
	margin-bottom: 0px;
}

.PRJfileRenameTable {
	display: grid;
	grid-template-columns: auto 1fr;
	row-gap: 8px;
	column-gap: 16px;
	margin-bottom: 16px;
}

.PRJfileRenameItem {
	display: flex;
	align-items: center;
}

.GitIcon-modified {
	color: var(--blue);
}

.GitIcon-untracked {
	color: var(--red);
}
.PRJglobalSearch {
	padding-bottom: 12px;
	overflow: hidden;
	flex-shrink: 1;
	flex-grow: 1;
	height: 0;
	display: none;
}

.PRJprojectManagerCollapsed .PRJglobalSearch {
	display: none;
}

.PRJtabsSection {
	/* background: rgba(var(---blue-dark), 0.075); */
	height: 35.5px;
	display: flex;
	align-items: flex-end;
	flex-wrap: nowrap;
	flex-shrink: 0;
}

.PRJprojectManagerCollapsed .PRJtabsAndButtons {
	display: none;
}
.PRJaddLibraryLabel{
	height: 30px;
	background: transparent;
	color: rgba(var(---grey-600), 0.9);
	font-size: 10px;
	font-weight: 500;
	border-radius: 4px;
	padding-left: 4px;
	display: flex;
	align-items: center;
	cursor: pointer;
	white-space: nowrap;
}
.PRJlibraryButton{
	border-radius: 9999px;
	font-family: var(--font-buttons);
	font-weight: var(--semibold);
	font-size: 10px;
	line-height: 10px;
	letter-spacing: 0.25px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
  	height: 28px;
  /* height: 22px; */
	width: fit-content;
	box-sizing: border-box;
	color: var(--white);
	transition: 250ms ease-out;
	/* background-color: var(--green); */
	background-color: var(--grey-400);
	/* padding: 0 12px 0px 4px; */
	padding: 0 14px 0px 10px;

}
.PRJlibraryButton:hover {
	background-color: var(--green-hover);
	transition: 70ms ease-in;
 }
.PRJiconAddStyle14px {
	width: 12px;
	height: 12px;
	margin-right: 6px;
	fill: currentColor;
 }
 .PRJlibraryButton:active {
	background-color: var(--green-active);
 }
.PRJtab,
.PRJtabDisabled,
.PRJgitRepoLink {
	height: 30px;
	background: transparent;
	color: rgba(var(---grey-600), 0.65);
	font-family: var(--font-buttons);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.02em;
	padding: 0px 12px;
	border-radius: 4px;
	border-radius: 4px 4px 0px 0px;
	display: flex;
	align-items: center;
	cursor: pointer;
	white-space: nowrap;
}
.PRJbuttonGroup div:hover {
	background-color: rgba(var(---grey-200), 0.75);
	background-position: center !important;
}

.PRJtab:hover {
	color: var(--grey-700);
}

.PRJtabActive {
	background: #ebf3f6;
	color: var(--grey-600);
}

.PRJgitRepoLink a {
	color: rgba(var(---grey-600), 0.65);
	text-decoration: none;
}

.PRJgitRepoLink:hover a {
	color: var(--grey-700);
}

.PRJgitRepoLink img {
	display: none;
	margin-left: 2px;
}

.PRJgitRepoLink:hover img {
	display: initial;
}

.PRJbreak {
	word-wrap: break-word;
}

.TEMPLATEprefixHelp {
	display: inline;
}

.PRJprojectGitInfo {
	padding: 16px;
	padding-top: 21px;
	padding-bottom: 20px;
	font-family: var(--font-sans);
	font-size: 11px;
	color: var(--grey-700);
	height: 22px;
	white-space: nowrap; /* Prevent text from wrapping to the next line */
  	overflow: hidden; /* Hide any overflowing content */
  	text-overflow: ellipsis; 
	padding-right: 10px;
}

.PRJprojectManagerCollapsed .PRJprojectGitInfo {
	display: none;
}

.PRJprojectGitInfo img {
	height: 12px;
	margin-bottom: -2px;
	margin-right: 4px;
}

.PRJprojectGitInfoLabel {
	display: inline-block;
	margin-right: 4px;
	font-family: var(--font-buttons);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--grey-600);
}

span.PRJicon {
	display: inline-block;
	height: 16px;
	vertical-align: top;
	background-repeat: no-repeat;
	cursor: pointer;
	width: 16px;
	background-position: center center;
	margin-right: 4px;
	position: absolute;
	right: 24px;
}

.PRJfileTree {
	list-style-type: none;
	white-space: nowrap;
	/* height: 100%;
	overflow-y: auto;
	overflow-x: hidden; */
	margin-top: 0px;
	/* margin-left: -4px; */
	margin-bottom: 8px;
	/* margin-right: -4px; */
	padding-left: 0px;
}

/* Add padding to bottom of file tree to accomodate for popover options menu */
.PRJfileTree::after {
	content: '';
	display: block;
	height: 100px;
}

/* style file tree scrollbar */
.PRJfileTree {
	--scrollbarBG: #ebf3f6;
	--thumbBG: #D2DDE8;
	scrollbar-width: thin;
	scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}

.PRJfileTree::-webkit-scrollbar {
	width: 14px;
	height: 14px;
}

.PRJfileTree::-webkit-scrollbar-track {
	background: var(--scrollbarBG);
}

.PRJfileTree::-webkit-scrollbar-thumb {
	background-color: var(--thumbBG);
	border-radius: 8px;
	border: 4px solid var(--scrollbarBG);
}

.PRJfileTree *:hover {
	cursor: pointer;
}

.PRJfileTree ul {
	list-style-type: none;
	white-space: nowrap;
	padding-left: 12px;
	transform: translate(0, 0); /* 'hack' used to enable 'position: fixed;' popovers to move along with scroll */
}

.PRJfileTree [class^='PRJicon'] {
	display: flex;
	align-items: center;
	color: var(--grey-700);
	margin-bottom: 4px;
	padding: 4px 4px 2px 4px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	position: relative;
	height: 22px;
	padding-right: 21px;
	border: solid 1px transparent;
}

.PRJlibraryUncommitted,
.PRJlibraryBehind,
.PRJlibraryAhead {
	display: flex !important;
}

.PRJerrorIcon {
  display: flex !important;
  color: red !important;
}

.PRJfileTree [class^='PRJicon']:hover .PRJfolderMenu,
.PRJfileTree [class^='PRJicon']:hover .PRJfileMenu {
	display: inline-block !important;
}

.PRJfolderMenu,
.PRJfileMenu {
	display: inline;
	right: 0px;
	position: absolute;
	background-image: url(/PRJ/PRJiconFileMoreOptions.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-color: transparent;
	width: 24px;
	height: 100%;
	border-radius: 3px;
	margin-right: 0px;
}

.PRJfolderMenu.PRJmenuSelected,
.PRJfileMenu.PRJmenuSelected,
.PRJfolderMenu:hover,
.PRJfileMenu:hover {
	background-color: rgba(179, 221, 245, 0.75);
}

[class^='PRJicon']::before {
	height: 16px;
	width: 16px;
	vertical-align: middle;
	display: inline-block;
	position: relative;
	top: -1px;
}

.PRJicon-closedDir::before {
	content: url(/TRANS/images/project/folder-closed.svg);
}

.PRJicon-openDir::before {
	content: url(/TRANS/images/project/folder-open.svg);
}

.PRJicon-closedDir-untracked::before {
	content: url(/TRANS/images/project/folder-gs-iconClosedUntracked.svg);
}

.PRJicon-openDir-untracked::before {
	content: url(/TRANS/images/project/folder-gs-iconOpenUntracked.svg);
}

.PRJicon-closedDir-modified::before {
	content: url(/TRANS/images/project/folder-gs-iconClosedModified.svg);
}

.PRJicon-openDir-modified::before {
	content: url(/TRANS/images/project/folder-gs-iconOpenModified.svg);
}

.PRJicon-closedDir-library-locked::before {
  content: url(/LIB/LIBiconFolderClosedLocked.svg);
}

.PRJicon-openDir-library-locked::before {
	content: url(/LIB/LIBiconFolderOpenLocked.svg);
}

.PRJicon-closedDir-library-unlocked::before {
  content: url(/LIB/LIBiconFolderClosed.svg);
}

.PRJicon-openDir-library-unlocked::before {
  content: url(/LIB/LIBiconFolderOpen.svg);
}

.PRJicon-config::before {
	content: url(/TREE/images/PRJiconConfigFields.svg);
}
.PRJicon-config-modified::before {
	content: url(/TREE/images/PRJiconConfigFieldsModified.svg);
}
.PRJicon-config-untracked::before {
	content: url(/TREE/images/PRJiconConfigFieldUntracked.svg);
}
.PRJlibraryWarning,
.PRJlibraryOutOfSync{
	content: url("/PRJ/PRJlibraryWarning.svg");
}
.PRJlibraryUpdate {
  content: url("/LIB/LIBiconUpdate.svg");
}

.PRJicon-file::before {
	content: url(/TREE/images/message.svg);
}

.PRJicon-file-renamed::before,
.PRJicon-file-modified::before {
	content: url(/TREE/images/file-gs-iconMessageModified.svg);
}

.PRJicon-file-untracked::before {
	content: url(/TREE/images/file-gs-iconMessageUntracked.svg);
}


.PRJaddFileOrDir {
	vertical-align: middle;
	content: url(/TREE/images/add-file.svg);
}

.PRJaddFileOrDir:hover {
	background-image: url(/TREE/images/add-file-hover.svg);
}

.PRJremoveDir {
	vertical-align: middle;
	content: url(/TREE/images/remove-dir.svg);
}

.PRJremoveDir:hover {
	background-image: url(/TREE/images/remove-dir-hover.svg);
}

.PRJselectedSample {
	background-color: #D2EBEE !important;
	border-radius: var(--border-radius);
	font-weight: 600;
	color: var(--grey-900) !important;
}
.PRJfolderSelected {
	border-radius: var(--border-radius);
	font-weight: 600;
	color: var(--grey-900) !important;
}
.PRJselected {
	background-color: #D6E9F3 !important;
	border-radius: var(--border-radius);
	font-weight: 600;
	color: var(--grey-900) !important;
}

[class^='PRJicon'] {
	border-radius: var(--border-radius);
	display: flex;
	align-items: center;
	padding-left: 4px;
}

[class^='PRJicon']::before {
	margin-right: 4px;
}

[class^='PRJicon']:hover {
	background-color: rgba(179, 221, 245, 0.25);
}

.PRJmoreOptions {
	background-image: none;
}

.PRJmoreOptions .POPpopover-wrap {
	display: none;
	z-index: 1000;
	top: -15px;
	left: 26px;
}

.PRJfileMenu .POPpopover,
.PRJlibaryMenu .POPpopover,
.PRJfolderMenu .POPpopover {
	/* margin-top: 30px;
	margin-left: -10px; */
	width: 120px !important;
	margin-top: 24px;
	margin-left: -103px;
}

.PRJlibaryMenu .POPpopover-wrap,
.PRJfileMenu .POPpopover-wrap,
.PRJfolderMenu .POPpopover-wrap {
	display: none;
	z-index: 1000;
	top: 0;
	left: 0;
}

.PRJlibaryMenu .POPpopover-contents,
.PRJfileMenu .POPpopover-contents,
.PRJfolderMenu .POPpopover-contents {
	padding: 4px;
}

.PRJlibaryMenu .POPpopover-contents p,
.PRJfileMenu .POPpopover-contents p,
.PRJfolderMenu .POPpopover-contents p {
	margin: 0;
	padding: 4px;
	font-size: 11.5px;
	font-weight: var(--regular);
	color: var(--grey-800);
	border-radius: var(--border-radius);
}

.PRJlibaryMenu .POPpopover-contents p:hover,
.PRJfileMenu .POPpopover-contents p:hover,
.PRJfolderMenu .POPpopover-contents p:hover {
	background: var(--blue-lighter);
	font-weight: var(--semibold);
}
.PRJmenuSelected .POPpopover-wrap {
	display: inline;
	position: relative;
}
.PRJmoreOptions .POPpopover-wrap .p--small {
	margin-top: 0px;
	margin-bottom: 6px;
}
.PRJmoreOptions .POPpopover-wrap .p--small:last-child {
	margin-bottom: 0px;
}
.PRJmoreOptions:hover .POPpopover-wrap {
	display: block;
}
.PRJmoreOptions {
	background-image: url(/TREE/images/more-options.svg);
}
.PRJmoreOptions:hover {
	background-image: url(/TREE/images/more-options-hover.svg);
}
.PRJitemName {
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 8px;
	margin-right: 8px;
}
.PRJitemTag {
	align-items: center;
	color: white;
	border-radius: 9999px;
	font-size: 9px;
	font-weight: 600;
	line-height: 7px;
	padding: 0 4px;
}

.PRJdragging {
   opacity: 0.35;
}
.PRJdropZone {
   background-color: var(--grey-300);
   border: 1px var(--grey-400) dashed;
}
.PRJmenuBox {
   border: 1px var(--blue) solid !important;
}

/* Temporary START*/
.PRJbuttonGroup{
   display: flex;
   align-items: center;
	column-gap: 2px;
}

.PRJlibraryButton img,
.PRJaddFileButton img,
.PRJaddFolderButton img {
	margin-left: 4px;
	margin-right: 4px;
	margin-bottom: -4px;
	opacity: 0.6;
	cursor: pointer;
	width: 18px;
	height: 30px;
}
.PRJlibraryButton:hover img,
.PRJaddFolderButton:hover img,
.PRJaddFileButton:hover img{
	opacity: 1;
}
.PRJtabsAndButtons{
   display: flex;
   justify-content: space-between;
   background-color: rgba(var(---blue-dark), 0.1);
	padding: 0 16px;
	padding-right: 11px;
}
.PRJtabsSection{
   flex-grow: 1;
}

/*!
 * Quill Editor v1.3.6
 * https://quilljs.com/
 * Copyright (c) 2014, Jason Chen
 * Copyright (c) 2013, salesforce.com
 */
.ql-container {
  box-sizing: border-box;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  height: 100%;
  margin: 0px;
  position: relative;
}
.ql-container.ql-disabled .ql-tooltip {
  visibility: hidden;
}
.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
  pointer-events: none;
}
.ql-clipboard {
  left: -100000px;
  height: 1px;
  overflow-y: hidden;
  position: absolute;
  top: 50%;
}
.ql-clipboard p {
  margin: 0;
  padding: 0;
}
.ql-editor {
  box-sizing: border-box;
  line-height: 1.42;
  height: 100%;
  outline: none;
  overflow-y: auto;
  padding: 12px 15px;
  tab-size: 4;
  -moz-tab-size: 4;
  text-align: left;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.ql-editor > * {
  cursor: text;
}
.ql-editor p,
.ql-editor ol,
.ql-editor ul,
.ql-editor pre,
.ql-editor blockquote,
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6 {
  margin: 0;
  padding: 0;
  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol,
.ql-editor ul {
  padding-left: 1.5em;
}
.ql-editor ol > li,
.ql-editor ul > li {
  list-style-type: none;
}
.ql-editor ul > li::before {
  content: '\2022';
}
.ql-editor ul[data-checked=true],
.ql-editor ul[data-checked=false] {
  pointer-events: none;
}
.ql-editor ul[data-checked=true] > li *,
.ql-editor ul[data-checked=false] > li * {
  pointer-events: all;
}
.ql-editor ul[data-checked=true] > li::before,
.ql-editor ul[data-checked=false] > li::before {
  color: #777;
  cursor: pointer;
  pointer-events: all;
}
.ql-editor ul[data-checked=true] > li::before {
  content: '\2611';
}
.ql-editor ul[data-checked=false] > li::before {
  content: '\2610';
}
.ql-editor li::before {
  display: inline-block;
  white-space: nowrap;
  width: 1.2em;
}
.ql-editor li:not(.ql-direction-rtl)::before {
  margin-left: -1.5em;
  margin-right: 0.3em;
  text-align: right;
}
.ql-editor li.ql-direction-rtl::before {
  margin-left: 0.3em;
  margin-right: -1.5em;
}
.ql-editor ol li:not(.ql-direction-rtl),
.ql-editor ul li:not(.ql-direction-rtl) {
  padding-left: 1.5em;
}
.ql-editor ol li.ql-direction-rtl,
.ql-editor ul li.ql-direction-rtl {
  padding-right: 1.5em;
}
.ql-editor ol li {
  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  counter-increment: list-0;
}
.ql-editor ol li:before {
  content: counter(list-0, decimal) '. ';
}
.ql-editor ol li.ql-indent-1 {
  counter-increment: list-1;
}
.ql-editor ol li.ql-indent-1:before {
  content: counter(list-1, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-1 {
  counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-2 {
  counter-increment: list-2;
}
.ql-editor ol li.ql-indent-2:before {
  content: counter(list-2, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-2 {
  counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-3 {
  counter-increment: list-3;
}
.ql-editor ol li.ql-indent-3:before {
  content: counter(list-3, decimal) '. ';
}
.ql-editor ol li.ql-indent-3 {
  counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-4 {
  counter-increment: list-4;
}
.ql-editor ol li.ql-indent-4:before {
  content: counter(list-4, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-4 {
  counter-reset: list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-5 {
  counter-increment: list-5;
}
.ql-editor ol li.ql-indent-5:before {
  content: counter(list-5, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-5 {
  counter-reset: list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-6 {
  counter-increment: list-6;
}
.ql-editor ol li.ql-indent-6:before {
  content: counter(list-6, decimal) '. ';
}
.ql-editor ol li.ql-indent-6 {
  counter-reset: list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-7 {
  counter-increment: list-7;
}
.ql-editor ol li.ql-indent-7:before {
  content: counter(list-7, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-7 {
  counter-reset: list-8 list-9;
}
.ql-editor ol li.ql-indent-8 {
  counter-increment: list-8;
}
.ql-editor ol li.ql-indent-8:before {
  content: counter(list-8, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-8 {
  counter-reset: list-9;
}
.ql-editor ol li.ql-indent-9 {
  counter-increment: list-9;
}
.ql-editor ol li.ql-indent-9:before {
  content: counter(list-9, decimal) '. ';
}
.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 3em;
}
.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 4.5em;
}
.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 3em;
}
.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 4.5em;
}
.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 6em;
}
.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 7.5em;
}
.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 6em;
}
.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 7.5em;
}
.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 9em;
}
.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 10.5em;
}
.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 9em;
}
.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 10.5em;
}
.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 12em;
}
.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 13.5em;
}
.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 12em;
}
.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 13.5em;
}
.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 15em;
}
.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 16.5em;
}
.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 15em;
}
.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 16.5em;
}
.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 18em;
}
.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 19.5em;
}
.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 18em;
}
.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 19.5em;
}
.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 21em;
}
.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 22.5em;
}
.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 21em;
}
.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 22.5em;
}
.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 24em;
}
.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 25.5em;
}
.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 24em;
}
.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 25.5em;
}
.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 27em;
}
.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 28.5em;
}
.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 27em;
}
.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 28.5em;
}
.ql-editor .ql-video {
  display: block;
  max-width: 100%;
}
.ql-editor .ql-video.ql-align-center {
  margin: 0 auto;
}
.ql-editor .ql-video.ql-align-right {
  margin: 0 0 0 auto;
}
.ql-editor .ql-bg-black {
  background-color: #000;
}
.ql-editor .ql-bg-red {
  background-color: #e60000;
}
.ql-editor .ql-bg-orange {
  background-color: #f90;
}
.ql-editor .ql-bg-yellow {
  background-color: #ff0;
}
.ql-editor .ql-bg-green {
  background-color: #008a00;
}
.ql-editor .ql-bg-blue {
  background-color: #06c;
}
.ql-editor .ql-bg-purple {
  background-color: #93f;
}
.ql-editor .ql-color-white {
  color: #fff;
}
.ql-editor .ql-color-red {
  color: #e60000;
}
.ql-editor .ql-color-orange {
  color: #f90;
}
.ql-editor .ql-color-yellow {
  color: #ff0;
}
.ql-editor .ql-color-green {
  color: #008a00;
}
.ql-editor .ql-color-blue {
  color: #06c;
}
.ql-editor .ql-color-purple {
  color: #93f;
}
.ql-editor .ql-font-serif {
  font-family: Georgia, Times New Roman, serif;
}
.ql-editor .ql-font-monospace {
  font-family: Monaco, Courier New, monospace;
}
.ql-editor .ql-size-small {
  font-size: 0.75em;
}
.ql-editor .ql-size-large {
  font-size: 1.5em;
}
.ql-editor .ql-size-huge {
  font-size: 2.5em;
}
.ql-editor .ql-direction-rtl {
  direction: rtl;
  text-align: inherit;
}
.ql-editor .ql-align-center {
  text-align: center;
}
.ql-editor .ql-align-justify {
  text-align: justify;
}
.ql-editor .ql-align-right {
  text-align: right;
}
.ql-editor.ql-blank::before {
  color: rgba(0,0,0,0.6);
  content: attr(data-placeholder);
  font-style: italic;
  left: 15px;
  pointer-events: none;
  position: absolute;
  right: 15px;
}
.ql-bubble.ql-toolbar:after,
.ql-bubble .ql-toolbar:after {
  clear: both;
  content: '';
  display: table;
}
.ql-bubble.ql-toolbar button,
.ql-bubble .ql-toolbar button {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 24px;
  padding: 3px 5px;
  width: 28px;
}
.ql-bubble.ql-toolbar button svg,
.ql-bubble .ql-toolbar button svg {
  float: left;
  height: 100%;
}
.ql-bubble.ql-toolbar button:active:hover,
.ql-bubble .ql-toolbar button:active:hover {
  outline: none;
}
.ql-bubble.ql-toolbar input.ql-image[type=file],
.ql-bubble .ql-toolbar input.ql-image[type=file] {
  display: none;
}
.ql-bubble.ql-toolbar button:hover,
.ql-bubble .ql-toolbar button:hover,
.ql-bubble.ql-toolbar button:focus,
.ql-bubble .ql-toolbar button:focus,
.ql-bubble.ql-toolbar button.ql-active,
.ql-bubble .ql-toolbar button.ql-active,
.ql-bubble.ql-toolbar .ql-picker-label:hover,
.ql-bubble .ql-toolbar .ql-picker-label:hover,
.ql-bubble.ql-toolbar .ql-picker-label.ql-active,
.ql-bubble .ql-toolbar .ql-picker-label.ql-active,
.ql-bubble.ql-toolbar .ql-picker-item:hover,
.ql-bubble .ql-toolbar .ql-picker-item:hover,
.ql-bubble.ql-toolbar .ql-picker-item.ql-selected,
.ql-bubble .ql-toolbar .ql-picker-item.ql-selected {
  color: #fff;
}
.ql-bubble.ql-toolbar button:hover .ql-fill,
.ql-bubble .ql-toolbar button:hover .ql-fill,
.ql-bubble.ql-toolbar button:focus .ql-fill,
.ql-bubble .ql-toolbar button:focus .ql-fill,
.ql-bubble.ql-toolbar button.ql-active .ql-fill,
.ql-bubble .ql-toolbar button.ql-active .ql-fill,
.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-bubble.ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-bubble .ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-bubble.ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-bubble .ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-bubble.ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-bubble .ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
  fill: #fff;
}
.ql-bubble.ql-toolbar button:hover .ql-stroke,
.ql-bubble .ql-toolbar button:hover .ql-stroke,
.ql-bubble.ql-toolbar button:focus .ql-stroke,
.ql-bubble .ql-toolbar button:focus .ql-stroke,
.ql-bubble.ql-toolbar button.ql-active .ql-stroke,
.ql-bubble .ql-toolbar button.ql-active .ql-stroke,
.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-bubble.ql-toolbar button:hover .ql-stroke-miter,
.ql-bubble .ql-toolbar button:hover .ql-stroke-miter,
.ql-bubble.ql-toolbar button:focus .ql-stroke-miter,
.ql-bubble .ql-toolbar button:focus .ql-stroke-miter,
.ql-bubble.ql-toolbar button.ql-active .ql-stroke-miter,
.ql-bubble .ql-toolbar button.ql-active .ql-stroke-miter,
.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
  stroke: #fff;
}
@media (pointer: coarse) {
  .ql-bubble.ql-toolbar button:hover:not(.ql-active),
  .ql-bubble .ql-toolbar button:hover:not(.ql-active) {
    color: #ccc;
  }
  .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-fill,
  .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-fill,
  .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
  .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
    fill: #ccc;
  }
  .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
  .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
  .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
  .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
    stroke: #ccc;
  }
}
.ql-bubble {
  box-sizing: border-box;
}
.ql-bubble * {
  box-sizing: border-box;
}
.ql-bubble .ql-hidden {
  display: none;
}
.ql-bubble .ql-out-bottom,
.ql-bubble .ql-out-top {
  visibility: hidden;
}
.ql-bubble .ql-tooltip {
  position: absolute;
  transform: translateY(10px);
}
.ql-bubble .ql-tooltip a {
  cursor: pointer;
  text-decoration: none;
}
.ql-bubble .ql-tooltip.ql-flip {
  transform: translateY(-10px);
}
.ql-bubble .ql-formats {
  display: inline-block;
  vertical-align: middle;
}
.ql-bubble .ql-formats:after {
  clear: both;
  content: '';
  display: table;
}
.ql-bubble .ql-stroke {
  fill: none;
  stroke: #ccc;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.ql-bubble .ql-stroke-miter {
  fill: none;
  stroke: #ccc;
  stroke-miterlimit: 10;
  stroke-width: 2;
}
.ql-bubble .ql-fill,
.ql-bubble .ql-stroke.ql-fill {
  fill: #ccc;
}
.ql-bubble .ql-empty {
  fill: none;
}
.ql-bubble .ql-even {
  fill-rule: evenodd;
}
.ql-bubble .ql-thin,
.ql-bubble .ql-stroke.ql-thin {
  stroke-width: 1;
}
.ql-bubble .ql-transparent {
  opacity: 0.4;
}
.ql-bubble .ql-direction svg:last-child {
  display: none;
}
.ql-bubble .ql-direction.ql-active svg:last-child {
  display: inline;
}
.ql-bubble .ql-direction.ql-active svg:first-child {
  display: none;
}
.ql-bubble .ql-editor h1 {
  font-size: 2em;
}
.ql-bubble .ql-editor h2 {
  font-size: 1.5em;
}
.ql-bubble .ql-editor h3 {
  font-size: 1.17em;
}
.ql-bubble .ql-editor h4 {
  font-size: 1em;
}
.ql-bubble .ql-editor h5 {
  font-size: 0.83em;
}
.ql-bubble .ql-editor h6 {
  font-size: 0.67em;
}
.ql-bubble .ql-editor a {
  text-decoration: underline;
}
.ql-bubble .ql-editor blockquote {
  border-left: 4px solid #ccc;
  margin-bottom: 5px;
  margin-top: 5px;
  padding-left: 16px;
}
.ql-bubble .ql-editor code,
.ql-bubble .ql-editor pre {
  background-color: #f0f0f0;
  border-radius: 3px;
}
.ql-bubble .ql-editor pre {
  white-space: pre-wrap;
  margin-bottom: 5px;
  margin-top: 5px;
  padding: 5px 10px;
}
.ql-bubble .ql-editor code {
  font-size: 85%;
  padding: 2px 4px;
}
.ql-bubble .ql-editor pre.ql-syntax {
  background-color: #23241f;
  color: #f8f8f2;
  overflow: visible;
}
.ql-bubble .ql-editor img {
  max-width: 100%;
}
.ql-bubble .ql-picker {
  color: #ccc;
  display: inline-block;
  float: left;
  font-size: 14px;
  font-weight: 500;
  height: 24px;
  position: relative;
  vertical-align: middle;
}
.ql-bubble .ql-picker-label {
  cursor: pointer;
  display: inline-block;
  height: 100%;
  padding-left: 8px;
  padding-right: 2px;
  position: relative;
  width: 100%;
}
.ql-bubble .ql-picker-label::before {
  display: inline-block;
  line-height: 22px;
}
.ql-bubble .ql-picker-options {
  background-color: #444;
  display: none;
  min-width: 100%;
  padding: 4px 8px;
  position: absolute;
  white-space: nowrap;
}
.ql-bubble .ql-picker-options .ql-picker-item {
  cursor: pointer;
  display: block;
  padding-bottom: 5px;
  padding-top: 5px;
}
.ql-bubble .ql-picker.ql-expanded .ql-picker-label {
  color: #777;
  z-index: 2;
}
.ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-fill {
  fill: #777;
}
.ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
  stroke: #777;
}
.ql-bubble .ql-picker.ql-expanded .ql-picker-options {
  display: block;
  margin-top: -1px;
  top: 100%;
  z-index: 1;
}
.ql-bubble .ql-color-picker,
.ql-bubble .ql-icon-picker {
  width: 28px;
}
.ql-bubble .ql-color-picker .ql-picker-label,
.ql-bubble .ql-icon-picker .ql-picker-label {
  padding: 2px 4px;
}
.ql-bubble .ql-color-picker .ql-picker-label svg,
.ql-bubble .ql-icon-picker .ql-picker-label svg {
  right: 4px;
}
.ql-bubble .ql-icon-picker .ql-picker-options {
  padding: 4px 0px;
}
.ql-bubble .ql-icon-picker .ql-picker-item {
  height: 24px;
  width: 24px;
  padding: 2px 4px;
}
.ql-bubble .ql-color-picker .ql-picker-options {
  padding: 3px 5px;
  width: 152px;
}
.ql-bubble .ql-color-picker .ql-picker-item {
  border: 1px solid transparent;
  float: left;
  height: 16px;
  margin: 2px;
  padding: 0px;
  width: 16px;
}
.ql-bubble .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
  position: absolute;
  margin-top: -9px;
  right: 0;
  top: 50%;
  width: 18px;
}
.ql-bubble .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-bubble .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-bubble .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,
.ql-bubble .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before {
  content: attr(data-label);
}
.ql-bubble .ql-picker.ql-header {
  width: 98px;
}
.ql-bubble .ql-picker.ql-header .ql-picker-label::before,
.ql-bubble .ql-picker.ql-header .ql-picker-item::before {
  content: 'Normal';
}
.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: 'Heading 1';
}
.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: 'Heading 2';
}
.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: 'Heading 3';
}
.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: 'Heading 4';
}
.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: 'Heading 5';
}
.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: 'Heading 6';
}
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  font-size: 2em;
}
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  font-size: 1.5em;
}
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  font-size: 1.17em;
}
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  font-size: 1em;
}
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  font-size: 0.83em;
}
.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  font-size: 0.67em;
}
.ql-bubble .ql-picker.ql-font {
  width: 108px;
}
.ql-bubble .ql-picker.ql-font .ql-picker-label::before,
.ql-bubble .ql-picker.ql-font .ql-picker-item::before {
  content: 'Sans Serif';
}
.ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  content: 'Serif';
}
.ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  content: 'Monospace';
}
.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  font-family: Georgia, Times New Roman, serif;
}
.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  font-family: Monaco, Courier New, monospace;
}
.ql-bubble .ql-picker.ql-size {
  width: 98px;
}
.ql-bubble .ql-picker.ql-size .ql-picker-label::before,
.ql-bubble .ql-picker.ql-size .ql-picker-item::before {
  content: 'Normal';
}
.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  content: 'Small';
}
.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  content: 'Large';
}
.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  content: 'Huge';
}
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  font-size: 10px;
}
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  font-size: 18px;
}
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  font-size: 32px;
}
.ql-bubble .ql-color-picker.ql-background .ql-picker-item {
  background-color: #fff;
}
.ql-bubble .ql-color-picker.ql-color .ql-picker-item {
  background-color: #000;
}
.ql-bubble .ql-toolbar .ql-formats {
  margin: 8px 12px 8px 0px;
}
.ql-bubble .ql-toolbar .ql-formats:first-child {
  margin-left: 12px;
}
.ql-bubble .ql-color-picker svg {
  margin: 1px;
}
.ql-bubble .ql-color-picker .ql-picker-item.ql-selected,
.ql-bubble .ql-color-picker .ql-picker-item:hover {
  border-color: #fff;
}
.ql-bubble .ql-tooltip {
  background-color: #444;
  border-radius: 25px;
  color: #fff;
}
.ql-bubble .ql-tooltip-arrow {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  content: " ";
  display: block;
  left: 50%;
  margin-left: -6px;
  position: absolute;
}
.ql-bubble .ql-tooltip:not(.ql-flip) .ql-tooltip-arrow {
  border-bottom: 6px solid #444;
  top: -6px;
}
.ql-bubble .ql-tooltip.ql-flip .ql-tooltip-arrow {
  border-top: 6px solid #444;
  bottom: -6px;
}
.ql-bubble .ql-tooltip.ql-editing .ql-tooltip-editor {
  display: block;
}
.ql-bubble .ql-tooltip.ql-editing .ql-formats {
  visibility: hidden;
}
.ql-bubble .ql-tooltip-editor {
  display: none;
}
.ql-bubble .ql-tooltip-editor input[type=text] {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 13px;
  height: 100%;
  outline: none;
  padding: 10px 20px;
  position: absolute;
  width: 100%;
}
.ql-bubble .ql-tooltip-editor a {
  top: 10px;
  position: absolute;
  right: 20px;
}
.ql-bubble .ql-tooltip-editor a:before {
  color: #ccc;
  content: "\D7";
  font-size: 16px;
  font-weight: bold;
}
.ql-container.ql-bubble:not(.ql-disabled) a {
  position: relative;
  white-space: nowrap;
}
.ql-container.ql-bubble:not(.ql-disabled) a::before {
  background-color: #444;
  border-radius: 15px;
  top: -5px;
  font-size: 12px;
  color: #fff;
  content: attr(href);
  font-weight: normal;
  overflow: hidden;
  padding: 5px 15px;
  text-decoration: none;
  z-index: 1;
}
.ql-container.ql-bubble:not(.ql-disabled) a::after {
  border-top: 6px solid #444;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  top: 0;
  content: " ";
  height: 0;
  width: 0;
}
.ql-container.ql-bubble:not(.ql-disabled) a::before,
.ql-container.ql-bubble:not(.ql-disabled) a::after {
  left: 0;
  margin-left: 50%;
  position: absolute;
  transform: translate(-50%, -100%);
  transition: visibility 0s ease 200ms;
  visibility: hidden;
}
.ql-container.ql-bubble:not(.ql-disabled) a:hover::before,
.ql-container.ql-bubble:not(.ql-disabled) a:hover::after {
  visibility: visible;
}

/*!
 * Quill Editor v1.3.6
 * https://quilljs.com/
 * Copyright (c) 2014, Jason Chen
 * Copyright (c) 2013, salesforce.com
 */
.ql-container {
  box-sizing: border-box;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  height: 100%;
  margin: 0px;
  position: relative;
}
.ql-container.ql-disabled .ql-tooltip {
  visibility: hidden;
}
.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
  pointer-events: none;
}
.ql-clipboard {
  left: -100000px;
  height: 1px;
  overflow-y: hidden;
  position: absolute;
  top: 50%;
}
.ql-clipboard p {
  margin: 0;
  padding: 0;
}
.ql-editor {
  box-sizing: border-box;
  line-height: 1.42;
  height: 100%;
  outline: none;
  overflow-y: auto;
  padding: 12px 15px;
  tab-size: 4;
  -moz-tab-size: 4;
  text-align: left;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.ql-editor > * {
  cursor: text;
}
.ql-editor p,
.ql-editor ol,
.ql-editor ul,
.ql-editor pre,
.ql-editor blockquote,
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6 {
  margin: 0;
  padding: 0;
  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol,
.ql-editor ul {
  padding-left: 1.5em;
}
.ql-editor ol > li,
.ql-editor ul > li {
  list-style-type: none;
}
.ql-editor ul > li::before {
  content: '\2022';
}
.ql-editor ul[data-checked=true],
.ql-editor ul[data-checked=false] {
  pointer-events: none;
}
.ql-editor ul[data-checked=true] > li *,
.ql-editor ul[data-checked=false] > li * {
  pointer-events: all;
}
.ql-editor ul[data-checked=true] > li::before,
.ql-editor ul[data-checked=false] > li::before {
  color: #777;
  cursor: pointer;
  pointer-events: all;
}
.ql-editor ul[data-checked=true] > li::before {
  content: '\2611';
}
.ql-editor ul[data-checked=false] > li::before {
  content: '\2610';
}
.ql-editor li::before {
  display: inline-block;
  white-space: nowrap;
  width: 1.2em;
}
.ql-editor li:not(.ql-direction-rtl)::before {
  margin-left: -1.5em;
  margin-right: 0.3em;
  text-align: right;
}
.ql-editor li.ql-direction-rtl::before {
  margin-left: 0.3em;
  margin-right: -1.5em;
}
.ql-editor ol li:not(.ql-direction-rtl),
.ql-editor ul li:not(.ql-direction-rtl) {
  padding-left: 1.5em;
}
.ql-editor ol li.ql-direction-rtl,
.ql-editor ul li.ql-direction-rtl {
  padding-right: 1.5em;
}
.ql-editor ol li {
  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  counter-increment: list-0;
}
.ql-editor ol li:before {
  content: counter(list-0, decimal) '. ';
}
.ql-editor ol li.ql-indent-1 {
  counter-increment: list-1;
}
.ql-editor ol li.ql-indent-1:before {
  content: counter(list-1, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-1 {
  counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-2 {
  counter-increment: list-2;
}
.ql-editor ol li.ql-indent-2:before {
  content: counter(list-2, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-2 {
  counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-3 {
  counter-increment: list-3;
}
.ql-editor ol li.ql-indent-3:before {
  content: counter(list-3, decimal) '. ';
}
.ql-editor ol li.ql-indent-3 {
  counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-4 {
  counter-increment: list-4;
}
.ql-editor ol li.ql-indent-4:before {
  content: counter(list-4, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-4 {
  counter-reset: list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-5 {
  counter-increment: list-5;
}
.ql-editor ol li.ql-indent-5:before {
  content: counter(list-5, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-5 {
  counter-reset: list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-6 {
  counter-increment: list-6;
}
.ql-editor ol li.ql-indent-6:before {
  content: counter(list-6, decimal) '. ';
}
.ql-editor ol li.ql-indent-6 {
  counter-reset: list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-7 {
  counter-increment: list-7;
}
.ql-editor ol li.ql-indent-7:before {
  content: counter(list-7, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-7 {
  counter-reset: list-8 list-9;
}
.ql-editor ol li.ql-indent-8 {
  counter-increment: list-8;
}
.ql-editor ol li.ql-indent-8:before {
  content: counter(list-8, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-8 {
  counter-reset: list-9;
}
.ql-editor ol li.ql-indent-9 {
  counter-increment: list-9;
}
.ql-editor ol li.ql-indent-9:before {
  content: counter(list-9, decimal) '. ';
}
.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 3em;
}
.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 4.5em;
}
.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 3em;
}
.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 4.5em;
}
.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 6em;
}
.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 7.5em;
}
.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 6em;
}
.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 7.5em;
}
.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 9em;
}
.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 10.5em;
}
.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 9em;
}
.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 10.5em;
}
.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 12em;
}
.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 13.5em;
}
.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 12em;
}
.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 13.5em;
}
.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 15em;
}
.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 16.5em;
}
.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 15em;
}
.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 16.5em;
}
.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 18em;
}
.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 19.5em;
}
.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 18em;
}
.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 19.5em;
}
.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 21em;
}
.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 22.5em;
}
.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 21em;
}
.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 22.5em;
}
.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 24em;
}
.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 25.5em;
}
.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 24em;
}
.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 25.5em;
}
.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 27em;
}
.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 28.5em;
}
.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 27em;
}
.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 28.5em;
}
.ql-editor .ql-video {
  display: block;
  max-width: 100%;
}
.ql-editor .ql-video.ql-align-center {
  margin: 0 auto;
}
.ql-editor .ql-video.ql-align-right {
  margin: 0 0 0 auto;
}
.ql-editor .ql-bg-black {
  background-color: #000;
}
.ql-editor .ql-bg-red {
  background-color: #e60000;
}
.ql-editor .ql-bg-orange {
  background-color: #f90;
}
.ql-editor .ql-bg-yellow {
  background-color: #ff0;
}
.ql-editor .ql-bg-green {
  background-color: #008a00;
}
.ql-editor .ql-bg-blue {
  background-color: #06c;
}
.ql-editor .ql-bg-purple {
  background-color: #93f;
}
.ql-editor .ql-color-white {
  color: #fff;
}
.ql-editor .ql-color-red {
  color: #e60000;
}
.ql-editor .ql-color-orange {
  color: #f90;
}
.ql-editor .ql-color-yellow {
  color: #ff0;
}
.ql-editor .ql-color-green {
  color: #008a00;
}
.ql-editor .ql-color-blue {
  color: #06c;
}
.ql-editor .ql-color-purple {
  color: #93f;
}
.ql-editor .ql-font-serif {
  font-family: Georgia, Times New Roman, serif;
}
.ql-editor .ql-font-monospace {
  font-family: Monaco, Courier New, monospace;
}
.ql-editor .ql-size-small {
  font-size: 0.75em;
}
.ql-editor .ql-size-large {
  font-size: 1.5em;
}
.ql-editor .ql-size-huge {
  font-size: 2.5em;
}
.ql-editor .ql-direction-rtl {
  direction: rtl;
  text-align: inherit;
}
.ql-editor .ql-align-center {
  text-align: center;
}
.ql-editor .ql-align-justify {
  text-align: justify;
}
.ql-editor .ql-align-right {
  text-align: right;
}
.ql-editor.ql-blank::before {
  color: rgba(0,0,0,0.6);
  content: attr(data-placeholder);
  font-style: italic;
  left: 15px;
  pointer-events: none;
  position: absolute;
  right: 15px;
}
.ql-snow.ql-toolbar:after,
.ql-snow .ql-toolbar:after {
  clear: both;
  content: '';
  display: table;
}
.ql-snow.ql-toolbar button,
.ql-snow .ql-toolbar button {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 24px;
  padding: 3px 5px;
  width: 28px;
}
.ql-snow.ql-toolbar button svg,
.ql-snow .ql-toolbar button svg {
  float: left;
  height: 100%;
}
.ql-snow.ql-toolbar button:active:hover,
.ql-snow .ql-toolbar button:active:hover {
  outline: none;
}
.ql-snow.ql-toolbar input.ql-image[type=file],
.ql-snow .ql-toolbar input.ql-image[type=file] {
  display: none;
}
.ql-snow.ql-toolbar button:hover,
.ql-snow .ql-toolbar button:hover,
.ql-snow.ql-toolbar button:focus,
.ql-snow .ql-toolbar button:focus,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow .ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow .ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow .ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-item:hover,
.ql-snow .ql-toolbar .ql-picker-item:hover,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
  color: #06c;
}
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button:focus .ql-fill,
.ql-snow .ql-toolbar button:focus .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
  fill: #06c;
}
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button:focus .ql-stroke,
.ql-snow .ql-toolbar button:focus .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
  stroke: #06c;
}
@media (pointer: coarse) {
  .ql-snow.ql-toolbar button:hover:not(.ql-active),
  .ql-snow .ql-toolbar button:hover:not(.ql-active) {
    color: #444;
  }
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
    fill: #444;
  }
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
    stroke: #444;
  }
}
.ql-snow {
  box-sizing: border-box;
}
.ql-snow * {
  box-sizing: border-box;
}
.ql-snow .ql-hidden {
  display: none;
}
.ql-snow .ql-out-bottom,
.ql-snow .ql-out-top {
  visibility: hidden;
}
.ql-snow .ql-tooltip {
  position: absolute;
  transform: translateY(10px);
}
.ql-snow .ql-tooltip a {
  cursor: pointer;
  text-decoration: none;
}
.ql-snow .ql-tooltip.ql-flip {
  transform: translateY(50px);
}
.ql-snow .ql-formats {
  display: inline-block;
  vertical-align: middle;
}
.ql-snow .ql-formats:after {
  clear: both;
  content: '';
  display: table;
}
.ql-snow .ql-stroke {
  fill: none;
  stroke: #444;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.ql-snow .ql-stroke-miter {
  fill: none;
  stroke: #444;
  stroke-miterlimit: 10;
  stroke-width: 2;
}
.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
  fill: #444;
}
.ql-snow .ql-empty {
  fill: none;
}
.ql-snow .ql-even {
  fill-rule: evenodd;
}
.ql-snow .ql-thin,
.ql-snow .ql-stroke.ql-thin {
  stroke-width: 1;
}
.ql-snow .ql-transparent {
  opacity: 0.4;
}
.ql-snow .ql-direction svg:last-child {
  display: none;
}
.ql-snow .ql-direction.ql-active svg:last-child {
  display: inline;
}
.ql-snow .ql-direction.ql-active svg:first-child {
  display: none;
}
.ql-snow .ql-editor h1 {
  font-size: 2em;
}
.ql-snow .ql-editor h2 {
  font-size: 1.5em;
}
.ql-snow .ql-editor h3 {
  font-size: 1.17em;
}
.ql-snow .ql-editor h4 {
  font-size: 1em;
}
.ql-snow .ql-editor h5 {
  font-size: 0.83em;
}
.ql-snow .ql-editor h6 {
  font-size: 0.67em;
}
.ql-snow .ql-editor a {
  text-decoration: unset;
}
.ql-snow .ql-editor a:hover {
  text-decoration: underline;
}
.ql-snow .ql-editor blockquote {
  border-left: 4px solid #ccc;
  margin-bottom: 5px;
  margin-top: 5px;
  padding-left: 16px;
}
.ql-snow .ql-editor code,
.ql-snow .ql-editor pre {
  background-color: #f0f0f0;
  border-radius: 3px;
}
.ql-snow .ql-editor pre {
  white-space: pre-wrap;
  margin-bottom: 5px;
  margin-top: 5px;
  padding: 5px 10px;
}
.ql-snow .ql-editor code {
  font-size: 85%;
  padding: 2px 4px;
}
.ql-snow .ql-editor pre.ql-syntax {
  background-color: #eeeeee;
  color: black;
  overflow: visible;
  border : solid lightgray 1px;
}

.ql-snow .ql-editor img {
  max-width: 100%;
}
.ql-snow .ql-picker {
  color: #444;
  display: inline-block;
  float: left;
  font-size: 14px;
  font-weight: 500;
  height: 24px;
  position: relative;
  vertical-align: middle;
}
.ql-snow .ql-picker-label {
  cursor: pointer;
  display: inline-block;
  height: 100%;
  padding-left: 8px;
  padding-right: 2px;
  position: relative;
  width: 100%;
}
.ql-snow .ql-picker-label::before {
  display: inline-block;
  line-height: 22px;
}
.ql-snow .ql-picker-options {
  background-color: #fff;
  display: none;
  min-width: 100%;
  padding: 4px 8px;
  position: absolute;
  white-space: nowrap;
}
.ql-snow .ql-picker-options .ql-picker-item {
  cursor: pointer;
  display: block;
  padding-bottom: 5px;
  padding-top: 5px;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  color: #ccc;
  z-index: 2;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
  fill: #ccc;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
  stroke: #ccc;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  display: block;
  margin-top: -1px;
  top: 100%;
  z-index: 1;
}
.ql-snow .ql-color-picker,
.ql-snow .ql-icon-picker {
  width: 28px;
}
.ql-snow .ql-color-picker .ql-picker-label,
.ql-snow .ql-icon-picker .ql-picker-label {
  padding: 2px 4px;
}
.ql-snow .ql-color-picker .ql-picker-label svg,
.ql-snow .ql-icon-picker .ql-picker-label svg {
  right: 4px;
}
.ql-snow .ql-icon-picker .ql-picker-options {
  padding: 4px 0px;
}
.ql-snow .ql-icon-picker .ql-picker-item {
  height: 24px;
  width: 24px;
  padding: 2px 4px;
}
.ql-snow .ql-color-picker .ql-picker-options {
  padding: 3px 5px;
  width: 152px;
}
.ql-snow .ql-color-picker .ql-picker-item {
  border: 1px solid transparent;
  float: left;
  height: 16px;
  margin: 2px;
  padding: 0px;
  width: 16px;
}
.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
  position: absolute;
  margin-top: -9px;
  right: 0;
  top: 50%;
  width: 18px;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before {
  content: attr(data-label);
}
.ql-snow .ql-picker.ql-header {
  width: 98px;
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: 'Normal';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: 'Heading 1';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: 'Heading 2';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: 'Heading 3';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: 'Heading 4';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: 'Heading 5';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: 'Heading 6';
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  font-size: 2em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  font-size: 1.5em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  font-size: 1.17em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  font-size: 1em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  font-size: 0.83em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  font-size: 0.67em;
}
.ql-snow .ql-picker.ql-font {
  width: 108px;
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: 'Sans Serif';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  content: 'Serif';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  content: 'Monospace';
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  font-family: Georgia, Times New Roman, serif;
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  font-family: Monaco, Courier New, monospace;
}
.ql-snow .ql-picker.ql-size {
  width: 98px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: 'Normal';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  content: 'Small';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  content: 'Large';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  content: 'Huge';
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  font-size: 10px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  font-size: 18px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  font-size: 32px;
}
.ql-snow .ql-color-picker.ql-background .ql-picker-item {
  background-color: #fff;
}
.ql-snow .ql-color-picker.ql-color .ql-picker-item {
  background-color: #000;
}
.ql-toolbar.ql-snow {
  position: sticky;
  top: 70px;
  z-index: 2;
  background: var(--white);
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  padding: 8px;
}

.ql-toolbar.ql-snow .ql-formats {
  margin-right: 15px;
}
.ql-toolbar.ql-snow .ql-picker-label {
  border: 1px solid transparent;
}

.ql-toolbar.ql-snow .ql-picker-options {
  border: 1px solid transparent;
  box-shadow: rgba(0,0,0,0.2) 0 2px 8px;
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  border-color: #ccc;
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  border-color: #ccc;
}
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
  border-color: #000;
}
.ql-toolbar.ql-snow + .ql-container.ql-snow {
  border-top: 0px;
}
.ql-snow .ql-tooltip {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0px 0px 5px #ddd;
  color: #444;
  padding: 5px 12px;
  white-space: nowrap;
}
.ql-snow .ql-tooltip::before {
  content: "Visit URL:";
  line-height: 26px;
  margin-right: 8px;
}
.ql-snow .ql-tooltip input[type=text] {
  display: none;
  border: 1px solid #ccc;
  font-size: 13px;
  height: 26px;
  margin: 0px;
  padding: 3px 5px;
  width: 170px;
}
.ql-snow .ql-tooltip a.ql-preview {
  display: inline-block;
  max-width: 200px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}
.ql-snow .ql-tooltip a.ql-action::after {
  border-right: 1px solid #ccc;
  content: 'Edit';
  margin-left: 16px;
  padding-right: 8px;
}
.ql-snow .ql-tooltip a.ql-remove::before {
  content: 'Remove';
  margin-left: 8px;
}
.ql-snow .ql-tooltip a {
  line-height: 26px;
}
.ql-snow .ql-tooltip.ql-editing a.ql-preview,
.ql-snow .ql-tooltip.ql-editing a.ql-remove {
  display: none;
}
.ql-snow .ql-tooltip.ql-editing input[type=text] {
  display: inline-block;
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: 'Save';
  padding-right: 0px;
}
.ql-snow .ql-tooltip[data-mode=link]::before {
  content: "Enter link:";
}
.ql-snow .ql-tooltip[data-mode=formula]::before {
  content: "Enter formula:";
}
.ql-snow .ql-tooltip[data-mode=video]::before {
  content: "Enter video:";
}
.ql-snow a {
  color: var(--blue);
}
.ql-container.ql-snow {
  border: 1px solid #ccc;
}

.RELtitle {
	font-family: var(--font-buttons);
	font-weight: 500;
	color: var(--grey-600) !important;
	letter-spacing: 0.05em;
	font-size: 11px;
	user-select: none;
	margin-top: 6px;
}
.RELupstreamDiv{
   background: var(--white);
	border: 1px solid var(--grey-400);
	border-radius: var(--border-radius);
	margin-top: 12px;
	overflow: auto;
}
.RELupstreamDiv .RELupstreamEntry:nth-child(odd){
	background-color: var(--grey-200); 
}
.RELupstreamDiv .RELupstreamEntry:nth-child(even){
	background-color: var(--white);
}
.RELupstreamEntry{
	padding: 0px 16px;
	cursor: pointer;
	user-select: none;
}
.RELupstreamEntry:hover{
   background-color: rgba(var(---blue-light), 0.5) !important;
	border-radius: var(--border-radius);
	box-sizing: border-box;
}
.RELentrySelected.RELupstreamEntry:hover{
   background-color: rgba(var(---blue-light), 0.9) !important;
}
.RELupstreamBody{
	display : grid;
   grid-template-columns: auto auto 1fr auto auto minmax(110px, auto); 
	column-gap: 12px;
	padding: 6px;
}
.RELentrySelected{
	background-color: rgba(var(---blue-light), 0.7) !important;
	border-radius: var(--border-radius);
	box-sizing: border-box;
 }
.RELupstreamHeader{
   display : grid;
   grid-template-columns: 1fr auto;
   column-gap: 12px;
   border-bottom: solid 1px var(--grey-300);
	padding: 6px;
}
.RELlogEntry{
   grid-template-columns: auto auto 1fr auto auto minmax(110px, auto) !important;
	padding: 6px 16px;
}
.RELlogEntry .LOGcellTime,
.RELupstreamEntry .LOGcellTime{
	padding-left: 0px;
}
.RELlistDiv{
	background: var(--white);
	border: 1px solid var(--grey-400);
	border-radius: var(--border-radius);
	margin-top: 12px;
	overflow: auto;
 }
.RELmodal{
   overflow: hidden;
}
.RELnoBorder{
	border: none !important;
}
.RELcellPreview{
   white-space : pre-wrap;
   overflow: hidden;
	color: var(--grey-800);
	font-family: var(--font-monospace);
	margin-top: 6px;
	margin-bottom: 4px;
	text-align: left;
}
.RELname{
	color: var(--grey-600);
	text-decoration: none;
}
.RELname:hover{
	color: var(--blue);
	text-decoration: underline;
}
.RELwindow{
	display: grid;
	grid-template-rows: auto 1fr;
	max-height: calc(100% - 60px);
	overflow: hidden;
}
.RELdiv{
	display: grid;
	height: 100%;
	overflow: hidden;
}
.RELdiv2{
	/* display: grid; */
	height: 100%;
	overflow: hidden;
}
.RELwindow .POPpopoutCard-content{
	padding-top: 22px;
	background-color: var(--grey-200);
}
.RELtitleDiv{
	display: grid;
	grid-template-columns: 1fr auto;
}
.RELlink{
	/* color: var(--grey-600); */
	color: var(--blue);
	text-decoration: none;
}
.RELlink:hover{
	color: var(--blue);
	text-decoration: underline;
}
.RELgrey{
	color: var(--grey-500);
	display: inline;
	margin-right: 12px;
	margin-top: 8px;
	margin-left: 0px;
	padding-left: 4px;
}
.RELdetails{
	color: var(--blue);
	text-decoration: none;
	padding-left: 2px;
	padding-right: 2px;
}
.RELdetails:hover{
	text-decoration: underline;
}



.REPQselectMessage{
   width: 100%;
}
.REPQcontrols{
   margin-top: 10px;
   margin-bottom: 10px;
   display: grid;
   grid-template-columns: auto 1fr;
   grid-column-gap: 10px;
   grid-row-gap: 5px;
}
.REPQfeedback, .REPQrepositionError{
   color: red;
}
.RNMrow{
   display: grid;
   grid-template-columns: auto 1fr;
   column-gap: 24px;
   row-gap: 10px;
   background: var(--grey-100);
	padding: 24px;
	padding-top: 18px;
	padding-bottom: 18px;

	border-radius: var(--border-radius);
	border: 1px solid var(--grey-300);
}
.RNMerrorFeedback{
   color: red;
}
.RNMbuttons{
   justify-content: end;
}
.RNMmodal{
   width: 600px;
}
.RNMmodal .FORMlabel{
   margin-top: 10px;
}
.ROLtitle{
	margin: unset;
	font-weight: var(--bold);
	font-size: 20px;
	line-height: 32px;
	color: var(--grey-700);
	padding-bottom: 24px;
	margin-bottom: 0px;
	display: flex;
	padding-left: 10px;
	align-items: center;
}

.ROLcard{
   display: grid;
   grid-template-rows: auto auto auto auto;
   padding: 24px;
   padding-bottom: 24px;
	border-radius: var(--border-radius);
   border: 1px solid var(--grey-400);
	background-color: var(--white);
	box-sizing: border-box;
   margin-top: 12px;
}
.ROLrow{
   display: grid;
   grid-template-columns: auto 1fr;
   column-gap: 24px;
}
.ROLheader{
   display: grid;
   grid-template-columns: 1fr auto auto;
   column-gap: 12px;
}
.ROLgroup{
	margin-left: auto;
	float: right;
}
.ROLtrash{
	width: 16px;
	height: 16px;
	margin-top: -4px;
	margin-bottom: -4px;
	fill: currentColor;
}

.ROLlist{
	display: grid;
	grid-template-rows: repeat(auto-fill, 19px);
	row-gap: 6px;
}
.ROLlineItem{
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 6px;
	cursor: default;
}
.ROLsubsection{
	display: grid;
	grid-template-columns: 120px 1fr;
	column-gap: 12px;
	user-select: none;
}
.ROLscaffold{
	display: grid;
	grid-template-columns: 340px 340px;
	column-gap: 24px;
	padding-top: 24px;
	padding-bottom: 12px;
	margin-top: 12px;
	row-gap: 24px;
	overflow: auto;
}
.ROLlabel{
	display: grid;
	grid-template-rows: auto 1fr;
	row-gap: 8px;
	text-align: right;
}
.ROLroleName{
	font-weight: var(--bold) !important;
	font-size: 14px;
	line-height: 24px;
	color: var(--grey-700);
	padding-top: 4px;
	padding-left: 4px;
	user-select: none;
}


.ROLroleName::before{
	content: ">";
	transform: rotate(90deg);
	display: inline-block;
	margin-right: 12px;
}

.ROLcollapsed .ROLroleName::before{
	content: ">";
	transform: unset;
	display: inline-block;
	margin-right: 12px;
}
.ROLcollapsed.ROLedit .ROLroleName::before{
	content: unset;
	transform: unset;
	display: unset;
	margin-right: unset;
}
.ROLedit .ROLroleName::before{
	content: unset;
	transform: unset;
	display: unset;
	margin-right: unset;
}

.ROLroleName{
	cursor: pointer;
}
.ROLedit .ROLroleName{
	cursor: unset;
}
.ROLcollapsed .ROLroleAppliesTo,
.ROLcollapsed .ROLscaffold{
	display: none;
}
.ROLroleAppliesTo{
	display: grid;
	grid-template-columns: 120px minmax(auto, 354px) 1fr;
	border-top: 1px solid var(--grey-300);
	padding-top: 36px;
	margin-top: 24px;
	column-gap: 12px;
	overflow: auto;
}
.ROLedit.ROLcollapsed .ROLscaffold{
	display: grid;
}
.ROLaddError{
	color: red;
	padding-left: 2px;
}
.ROLmodal{
	/* min-width: 850px; */
}
.ROLdeselectAll,
.ROLselectAll{
	color: var(--blue);
	cursor: pointer;
}
.ROLdeselectAll:hover,
.ROLselectAll:hover{
	text-decoration: underline;
}
.ROLselectRow{
	font-size: 11px;
}
.ROLselectRow{
	color: var(--grey-700);

}
.ROLsubsection:last-of-type{
	/* margin-top: 36px; */
}
.ROLedit .ROLlineItem:hover div{
	text-decoration: underline;
}
.ROLaddRow{
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 12px
}
.ROLroleAppliesTo .FORMselectBox{
	margin-top: -4px;
}
.ROLcomponentRole .ROLiguanaWide{
	display: none;
}


.ROWdiv{
   display: grid;
   grid-template-columns: auto 1fr;
   column-gap: 24px;
   row-gap: 8px;
}
.RPOdescription {
	color: var(--grey-600);
	line-height: 16px;
}
.RPOdescriptionPadding{
	padding-left: 12px;
	padding-right: 12px;
}
.RPOgitFeedback,
.RPOborderDiv{
   border: 1px solid var(--grey-400);
   border-radius: var(--border-radius);
   background: var(--grey-200);
   padding: 32px;
}

.RPOsuccess {
	color: var(--green);
	position: absolute;
	margin-top: 0;
}

.RPOcomponentName{
   color: var(--blue);
   font-size: 14px;
   font-weight: 600;
   word-break: break-all;
   line-height: 1.3em;
}
.RPOcomponentDescription{
   overflow-wrap: break-word;
   color: var(--grey-600);
   white-space: pre-wrap;
   line-height: 1.75;
   max-height: 100px;
   overflow-y: auto;
}
.RPOheader{
   font-family: var(--font-buttons);
   color: var(--grey-500);
   font-weight: 500;
   font-size: 11px;
   letter-spacing: 0.05em;
}
.RPOfeedbackCustom{
   color: var(--grey-600);
   font-size: 11px;
	text-align: left !important;
	padding-top: 8px;
}
.RPOslugDiv{
   display: grid;
   grid-template-columns: auto auto auto 1fr;
}
.RPOgitUrl{
   color: var(--grey-600);
   white-space: pre-wrap;
   line-height: 1.75;
}
.RPObuttonsDismiss,
.RPObuttonsRepoSet,
.RPObuttons {
	display: grid;
	grid-template-columns: auto auto auto;
	justify-content: end;
	margin-right: 0;
	margin-left: auto;
}
.RPOprojectFeedback,
.RPOworkspaceFeedback,
.RPOfeedback,
.RPOslugFeedback{
	font-size: 10px;
	line-height: 12px;
	margin-top: 4px;
}
.RPOfeedback,
.RPOslugFeedback {
	color: red;
}

.RPOprojects,
.RPOworkspaces{
   min-width: 144px;
}

.RPOrow {
	display: grid;
	grid-template-columns: 92px auto 72px;
	column-gap: 12px;
	align-items: center; /* Center vertically */
}

.RPOrow .RPOfeedback,
.RPOrow .RPOslugFeedback,
.RPOrow .RPOworkspaceFeedback {
	justify-self: start; /* Override horizontal alignment for elements with classes RPOfeedback and RPOslugFeedback */
	align-self: start; /* Override vertical alignment for elements with classes RPOfeedback and RPOslugFeedback */
}

.RPOprojectRow{
   display: grid;
	grid-template-columns: auto 40px ;
}
.RPOslugDiv *{
   font-family: monospace !important;
}
.RPOpublishRow{
   display: grid;
	grid-template-columns: 1fr 1fr;
}
.RPOslugRow{
   display: grid;
	grid-template-columns: 1fr 1fr;
}
.RPOsubheader{
   font-family: var(--font-buttons);
   color: var(--grey-500);
   font-weight: 500;
   font-size: 11px;
   letter-spacing: 0.05em;
   text-align: right;
   padding-right: 12px;
	width: 100%;
}
.RPOcomponent *{
   /* font-size: 11px; */
}
.RPOopenWorkspace{
	padding-left : 12px;
}
.RPOopenWorkspace,
.RPOupdateOwners,
.RPOopenProject{
	display: flex;
	height: 100% !important;
	justify-content: center;
	align-items: center;
	margin-left: 16px;
}
.RPOopenLinkDiv{
	content: url(/RPO/RPOiconNewWindow.svg);
}
.RPOopenWorkspace:hover .RPOopenLinkDiv,
.RPOopenProject:hover .RPOopenLinkDiv{
	content: url(/RPO/RPOiconNewWindowHover.svg);
}

.RPOupdateOwnersBtn {
	content: url(/RPO/RPOiconUpdateOwners.svg);
}

.RPOupdateOwners:hover  .RPOupdateOwnersBtn {
	content: url(/RPO/RPOiconUpdateOwnersHover.svg);
	cursor: pointer;
}

.RPOrepoRow{
	display: grid;
	grid-template-columns: 98px auto 1fr;
	row-gap: 8px;
	column-gap: 12px;
}
.RPOnoRepo{
	color: var(--grey-600);
}
.RPOcreateRepo{
   color: var(--blue);
	cursor: pointer;
   padding-left: 8px;
}
.RPOcreateRepo:hover{
	text-decoration: underline;
}
.RPOinformation{
	overflow-wrap: break-word;
   color: var(--grey-600);
   /* white-space: pre-wrap; */
   line-height: 1.75;
   max-height: 100px;
   overflow-y: auto;
}
.RPOnoRepoWarning{
	color: var(--red);
	text-decoration: none;
	word-break: break-all;
	padding-right: 2px;
}
.RPOnoRepoGrid{
   display: grid;
   grid-template-columns: auto auto 1fr;
}
.RPOtemplateRemoveButtons{
	display: grid;
	grid-template-columns: auto auto;
	justify-content: end;
	margin-top: 32px;
	margin-right: 0;
	margin-left: auto;
}
.RPOcomponentDiv {
   border: 1px solid var(--grey-400);
   border-radius: var(--border-radius);
   background: var(--grey-200);
   padding: 24px 32px;
}

.RPOconfigWindow {
   box-sizing: border-box;
   overflow-y: auto;
   scrollbar-width: thin;
}

.RPOredirectHosts, .RPOredirectContainer {
	color: red;
}

.RPOredirectBtn a{
	text-decoration: none;
	color: white;
}

.RPOhidden{
	display: none;
}
.RPObuttons{
	justify-content: right;
}
.RPOlink{
	color: var(--blue);
	text-decoration: none;
}
.RPOlink:hover{
	text-decoration: underline;
}
.RPOdescription a{
	text-decoration: unset;
	color: var(--blue);
	padding-left: 4px;
	padding-right: 4px;
}
.RPOdescription a:hover{
	text-decoration: underline;
}
.RPOplain{
	color: var(--grey-600);
}
.RPOturnToPlainGrid{
	display: grid;
	grid-template-columns: auto auto auto;
	column-gap: 4px;
	color: var(--grey-600);
	padding-right: 8px;
}
.RPOturnToRepo,
.RPOturnToPlain{
	color: var(--blue);
	cursor: pointer;
}
.RPOturnToRepo:hover,
.RPOturnToPlain:hover{
	text-decoration: underline;
}
.RPOsetupWithRemoteGrid{
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 12px;
}
.RPOsetupWithRemoteText{
	padding-bottom: 1px;
}
.RPOturnToRepoDisabled,
.RPOturnToPlainDisabled{
	cursor: not-allowed;
}

.RPOremoveUpstream{
	color: var(--blue);
	text-decoration: none;
	padding-left: 2px;
	padding-right: 2px;
	cursor: pointer;
}
.RPOremoveUpstream:hover{
	text-decoration: underline;
}
.RPOactions{
	display: grid;
	grid-template-columns: auto auto 1fr;
	column-gap: 4px;
	color: var(--grey-600);
}
.RPOactionsOr{
	margin-right: 16px;
}
/* Search Field  - TODO could revisit the disabled look of the up and down arrows */
.SRCHsearchPrevious{
   margin-left : 0px;
   margin-right: 0px;
   width : 100%;
   background-image: url("/SEARCH/SEARCHup.svg");
}

.SRCHsearchNext{
   margin-left : 0px;
   margin-right: 0px;
   width : 100%;
   background-image: url("/SEARCH/SEARCHdown.svg");
}

.SEARCHmagnifyingGlass{
	cursor: pointer;
	width: 18px;
	height: 18px;
	margin-left: 4px;
	margin-right: 2px;
	margin-top: -1px;
}


.SEARCHclear{
   position: absolute;
   top: 7px;
   right: 6px;
   cursor: pointer;
}
  
#SRHbox.empty .SEARCHclear{
   visibility: hidden;
}    

#SRHbox input#SRHsearchText {
   border-width: 0px;
   color: #343434;
   position: relative;
   left: 2px;
   /* width: 300px; */
   font-size: 12px;
	font-family: var(--font-sans);
   background-color: transparent;
}
  
#SRHbox input#SRHsearchText:focus{
   outline: none;
}

#SRHbox.no_match div.SRHfield{
   background-color: #fae9e6 !important; /* $red-lighter */
}
  
#SRHbox.no_match input#SRHsearchText{
   color: #bf0710; /* $red-dark */
}
  
#SRHoptions{
   position: absolute;
   background: var(--white);
   vertical-align: middle;
   color: #444444;
   border: 1px solid #B1B1B1;
   padding: 3px 13px 7px 8px;
   display: none;
   z-index: 11; /* 1 + codemirror gutter z-index */
   font-size: 12px;
   line-height: normal;
   text-align: left;
}

  
 #SRHoptions .SRHcheckboxes input,
 #SRHoptions .SRHcheckboxes label{
   cursor: pointer;
   display: unset;
 }
  
#SRHoptions .SRHdivider {
   border-top: 1px solid #B1B1B1;
   margin: 3px -5px 3px -5px;
}
  
#SRHreplacementText{
   width: 100%;
   position: relative;
   margin-bottom: 2px;
}
  
#SRHoptions span{
   position: absolute;
   top: 5px;
   left: 5px;
   font-size: 12px;
   color: #B1B1B1;
   cursor: text;
}
  
#SRHoptions button {
   padding: 2px 4px;
   margin-right: 2px;
}
  
.SEARCHbutton{
   margin-top : 6px;
   display: inline-block;  
   padding: 9px;
}

.SEARCHmiddleButton{
   margin-left: 4px;
   margin-right: 4px;
}
.SECtitle {
    margin: unset;
    font-weight: var(--bold);
    font-size: 20px;
    line-height: 32px;
    color: var(--grey-700);
    padding-bottom: 24px;
    margin-bottom: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 10px;
}

.SECview .SECviewTable {
    display: grid;
    grid-template-columns: 1fr;
    border: 1px solid var(--grey-300);
    background-color: var(--grey-100);
    border-radius: var(--border-radius);
    overflow-x: auto;
}

.SECedit .SECviewTable {
    display: grid;
    grid-template-columns: 1fr auto;
    border: 1px solid var(--grey-300);
    background-color: var(--grey-100);
    border-radius: var(--border-radius);
    overflow-x: auto;
}

.SECedit .SECviewTable .SECtableHeading {
    grid-column: 1 / -1;
}

.SECrow {
    padding: 18px 24px;
    border-bottom: 1px solid var(--grey-300);
    display: flex;
    align-items: center;
    line-height: 28px;
}

.SECtoggle {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    width: 100%;
    padding: 4px 0;
}

.SECcheckbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.SECpath {
    flex: 1;
    transition: color 0.2s ease;
}

.SECignored {
    color: var(--grey-500);
    text-decoration: line-through;
}

.SEChint {
    font-size: 12px;
    color: var(--grey-500);
    font-weight: normal;
    margin-left: 8px;
}

/* Hover effect for the row */
.SECviewTable .SECrow:hover {
    background-color: var(--grey-200);
}

/* Focus styles for accessibility */
.SECcheckbox:focus-visible + .SECpath {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
    border-radius: 2px;
}

.SECallIgnored .SECpath {
    color: var(--grey-500);
    text-decoration: line-through;
}

.SECtableHeading .SECtoggle {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.SECtableHeading .SECcheckbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.SECreadOnly {
    cursor: default;
}

.SECreadOnly .SECcheckbox {
    cursor: default;
    opacity: 0.7;
}

/* Add Row Button Styling */
.SECadd {
    border-radius: 9999px;
    font-family: var(--font-buttons);
    font-weight: var(--semibold);
    font-size: 10px;
    line-height: 10px;
    letter-spacing: 0.25px;
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 28px;
    width: fit-content;
    padding: 0 12px 0px 8px;
    box-sizing: border-box;
    background-color: var(--grey-200);
    color: var(--grey-600);
    transition: 250ms ease-out;
    margin: 16px auto 0px auto;
    user-select: none;
}

.SECadd:hover {
    background-color: var(--grey-300);
    text-decoration: none;
    transition: 75ms ease-in;
}

.FORMbutton.BUTTONcancel.BUTTONwarning {
    cursor: pointer;
    color: var(--grey-600);
}

.FORMbutton.BUTTONcancel.BUTTONwarning:hover {
    color: var(--grey-800);
}

.SECheading{
    padding: 18px 24px;
	min-height: 32px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
    user-select: none;
}
.SECheading,
.SECrow{
	display: grid;
	column-gap: 24px;
	grid-template-columns: 1fr auto;
}
.SECdirHeading{
	border-bottom: 1px solid var(--grey-300);
	background-color: var(--grey-200);
}
.SECdirHeading>div{
	font-weight: var(--semibold);
	color: var(--grey-800);
}
.SECdirsTable{
	border-radius: var(--border-radius);
	border: 1px solid var(--grey-300);
	background-color: var(--grey-100);
	overflow: hidden;
	width: 100%;
}
.SEConDiv{
    padding: 12px 24px;
    border-radius: var(--border-radius);
    border: 1px solid var(--grey-300);
    background-color: var(--grey-100);
    display: grid;
    grid-template-columns: 150px 1fr;
    column-gap: 24px;
}
.SECdisabled{
    opacity: 0.5;
    pointer-events: none;
}
.SEConDiv div{
    line-height: 34px;
}
.SECinfo{
    /* font-size: 12.5px; */
    color: var(--grey-600);
    font-weight: normal;
    border: 1px solid var(--grey-300);
    border-radius: var(--border-radius);
    padding: 24px;
    margin: 12px 0;
}
.SECsecure{
    display: inline-block;
    opacity: 0.5;
    padding-left: 6px;
}
.SESSbackground {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(0deg, rgba(0, 52, 101, 1) 0%, rgba(0, 100, 173, 1) 100%);
}

.SESSmodal {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
	width: 620px;
	display: grid;
	/* grid-template-columns: 130px 1fr; */
	grid-template-columns: 1fr;
	border-radius: 4px;
	background: var(--white);
	box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.5);
}

.SESSmodalSidebar {
	/* background: var(--blue-darker); */
	border-radius: 4px 0px 0px 4px;
	background: rgb(9,30,58);
	background: linear-gradient(0deg, rgba(9,30,58,1) 0%, rgba(0,96,159,1) 75%, rgba(37,144,205,1) 100%);}

.SESSappIcon {
	/* height: 130px;
	width: 130px;
	position: absolute;
	top: 20px;
	left: 32px; */
	display: none;
}

.SESSmodalMainArea {
	padding: 48px 48px 56px 48px;
}

.SESSmainLogoArea {
	position: relative;
	top: -12px;
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-end;
	margin-bottom: 24px;
}

.SESSiguanaWordmark {
	width: 250px;
	height: 87px;
	margin: 0 auto;
}

.SESSloginVersion {
	font-family: var(--font-buttons);
	color: var(--green);
	font-size: 24px;
	position: relative;
	bottom: 24px;
	left: -12px;
}

.SESSloginLegalStatement {
	font-size: 10px;
	margin-top: 24px;
	color: var(--grey-800);
}

.SESSloginForm {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	column-gap: 16px;
	align-items: end;
}

.SESSlabel {
	width: 100%;
	font-weight: var(--semibold);
	font-size: 12px;
	line-height: 16px;
	display: block;
	margin-bottom: var(--label-margin-bottom);
	color: var(--grey-700);
}

input.SESSloginFormInput {
	font-family: var(--font-sans);
	border-radius: var(--border-radius);
	border: 1px solid var(--grey-400);
	font-weight: var(--regular);
	font-size: 12px;
	line-height: 16px;
	padding: 6px 8px;
	color: var(--grey-800);
	width: 100%;
	margin: 0px;
	height: 36px;
	background: var(--grey-100);
	box-sizing: border-box;
}

.SESSloginButton {
	width: 40px;
	height: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 12px;
	padding: 12px 16px;
}

.SESSfooter {
	width: 100%;
	height: 120px;
	position: absolute;
	bottom: -120px;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: end;
}

.SESSfooterText {
	color: var(--white);
	font-size: 10px;
	letter-spacing: 0.06em;
	font-family: var(--font-buttons);
	margin: 0px 0px 2px 0px;
	opacity: 0.4;
}

.SESSinterfacewareLogo {
	width: 190px;
	height: 36px;
	opacity: 0.4;
	transition: 450ms ease-out;
}

.SESSpasswordWarning,
.SESSerror {
	text-align: center;
	border-radius: var(--border-radius);
	font-size: 10px;
	width: 100%;
	padding: 6px;
	margin-top: 12px;
	background: var(--red-lighter);
	color: var(--red-dark);
	display: none;
	box-sizing: border-box;
}
.SESSforgotPassword,
.SESSpasswordWarning a{
	color: var(--blue);
	text-decoration: none;
}
.SESSforgotPassword:hover,
.SESSpasswordWarning a:hover{
	text-decoration: underline;
}
.SESSsvrDownSpacing {
	margin-bottom: 16px;
}

/* modal */
.SESSserverDownContainer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(var(---grey-400), 0.60);
	/* Page dimmer */
	opacity: 1;
	transition: opacity 150ms ease-in;
	z-index: 999999;
}

.SESSserverDown {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
	background: var(--white);
	border: 1px solid var(--grey-400);
	box-shadow: 0 2px 0 0 rgba(var(---grey-400), 1);
	border-radius: var(--border-radius);
	padding: 32px !important;
	max-width: 90%;
}

.SESSforgotPassword{
	font-size: 10px;
	text-align: center;
	color : var(--blue);
}
.SESSforgotPasswordDiv{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 24px;
}

.SESSunsupported {
	text-align: center;
}

.SESSloginSpinner{
	border: 4px solid #f3f3f3;
	border-top: 4px solid #3498db;
	border-radius: 50%;
	width: 10px;
	height: 10px;
	animation: INITspin 2s linear infinite;
}

.SETaddRow {
	border-radius: 9999px;
	font-family: var(--font-buttons);
	font-weight: var(--semibold);
	font-size: 10px;
	line-height: 10px;
	letter-spacing: 0.25px;
	cursor: pointer;
	display: flex;
	align-items: center;
	height: 28px;
	width: fit-content;
	padding: 0 12px 0px 8px;
	box-sizing: border-box;
	background-color: var(--grey-200);
	color: var(--grey-600);
	transition: 250ms ease-out;
	margin: 16px auto 0px auto;
	user-select: none;
}

.SETaddRow:hover {
	background-color: var(--grey-300);
	text-decoration: none;
	transition: 75ms ease-in;
}

.SETtitle{
	margin: unset;
	font-weight: var(--bold);
	font-size: 20px;
	line-height: 32px;
	color: var(--grey-700);
	padding-bottom: 24px;
	margin-bottom: 0px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.SETgitTitle {
	margin: unset;
	font-weight: var(--bold);
	font-size: 20px;
	line-height: 32px;
	color: var(--grey-700);
	padding-bottom: 24px;
	margin-bottom: 0px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 10px;
}

.SETgitCollectionView .SETcatalogueTable {
	display: grid;
	grid-template-columns: minmax(auto, 1.5fr) 1fr 1.2fr auto;
	border: 1px solid var(--grey-300);
	background-color: var(--grey-100);
	border-radius: var(--border-radius);
	overflow-x: auto;
}

.SETgitCollectionEdit .SETcatalogueTable {
	display: grid;
	grid-template-columns: 1fr auto;
	border: 1px solid var(--grey-300);
	background-color: var(--grey-100);
	border-radius: var(--border-radius);
	overflow-x: auto;
}

.SETgitCollectionEdit .SETcatalogueTable .SETcatalogueTableHeading {
	grid-column: 1/-1;
}

.SETcatalogueRow,
.SETcatalogueHeading {
	/* display: grid;
  grid-template-columns: 3fr 1fr 2fr 1fr 1fr 1fr;
  border-collapse: separate;
  text-indent: initial;
  align-items: center; */
	display: contents;
}
.SETcatalogueHeading>div {
	border-bottom: 2px solid var(--grey-300);
	font-weight: var(--semibold);
	color: var(--grey-800);
	background-color: var(--grey-200);
}
.SETcatalogueTableHeading {
	font-weight: var(--semibold);
	color: var(--grey-800);
	text-align: left;
	border-left: 0px;
	border-right: 0px;
	padding: 8px 16px;
	user-select: none;
}

.SETpurgeRuleData,
.SETcatalogueData {
	text-align: left;
	border-left: 0px;
	border-right: 0px;
	padding: 16px;
	color: var(--grey-800);
	white-space: nowrap;         /* Prevents text from wrapping onto a new line */
	overflow: hidden;            /* Hides any overflowing text */
	text-overflow: ellipsis;     /* Adds "..." to indicate clipping (if needed) */
	display: inline-block;       /* Keeps the element inline while respecting width */

}

.STGpurgeDaysText{
	width:25px;
}
.SEThidden{
	display: none !important;
}

.STGpurgeDaysText,
.STGpurgeDaysCount{
	visibility: hidden;
}
.STGpurgeDaysText.SETnotificationVisible ,
.STGpurgeDaysCount.SETnotificationVisible * {
	visibility: visible;
}

.SETcatalogueData img {
	height: 24px;
	width: 24px;
}

.SETcatalogueTable>* {
	border-bottom: 1px solid var(--grey-300);
}

.SETcatalogueWaiting {
	background-image: url(/TRANS/images/spinner.gif);
	opacity: 0.5;
	/* Standard style for transparency */
	filter: alpha(opacity=5);
	/* For IE */
	height: 16px;
	width: 16px;
}

.SETdefaultRepoRef {
	font-weight: var(--regular);
	font-size: 11px;
	line-height: 16px;
	margin-top: 24px;
	color: var(--grey-600);
	padding-top: 16px;
	border-top: 1px solid var(--grey-300);
}

.SEThideButton {
	display: none;
}


/* Styling for GIT Host settings page */

.GITHgitHost input,
.GITHgitHost select {
	margin-bottom: 16px;
	max-width: 400px;
}

.SETbitbucketHint {
	font-weight: var(--regular);
	font-size: 10px;
	line-height: 16px;
	color: var(--grey-600);
}

.SETnotificationWarning {
   color : red;
}
.SETeditCollection{
	margin-right: 8px;
}
.SETeditCollection,
.STNtest {
   cursor: pointer;
   color:var(--blue);
   text-decoration:none;
}
.SETeditCollection:hover,
.STNtest:hover{
   text-decoration:underline;
}

.SETpageDescription{
	align-items: center;
	padding: 8px;
	padding-left: 16px;
	margin-bottom: 16px;
	border-radius: 4px;
	border: 1px solid var(--grey-300);
	color: var(--grey-600);
}
.SETrefreshCacheInfoLink,
.SETcreateAndAddCollection,
.SETrefreshCache{
	color: var(--blue);
	text-decoration: none;
	word-break: break-all;
}
.SETrefreshCacheInfoLink{
	padding-left: 2px;
	padding-right: 2px;
}
.SETrefreshCacheGrid{
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 8px;
}
.SETrefreshCacheInfo{
	color: var(--grey-600);
	text-decoration: none;
}
.SETrefreshCacheInfoLink:hover,
.SETcreateAndAddCollection:hover,
.SETrefreshCache:hover {
	color: var(--blue);
	text-decoration: underline;
	cursor: pointer;
}
.SETtitleLink{
   text-decoration: none;
   color : inherit;
   all : unset;
	cursor: pointer;
	user-select: none;
}

.SETtitleLink.selected{
   font-weight: var(--bold);
}
.SETpageDescription a{
	text-decoration: unset;
	color: var(--blue);
	padding-left: 2px;
	padding-right: 2px;
}
.SETpageDescription a:hover{
	text-decoration: underline;
}

.SETnotificationsTable a,
.SETselectNotificationComponent a{
	text-decoration: unset;
	color: var(--blue);
}
.SETnotificationsTable a:hover,
.SETselectNotificationComponent a:hover{
	text-decoration: underline;
}
.STCnoAddCollection{
	display: block !important;
	padding-left: 0px !important;
}
.SETcontentAsideHeader{
	height: 66px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 12px;
	padding-left: 24px;
	padding-right: 24px;
	user-select: none;
	/* background-color: #ebf3f6; */
	border-bottom: 1px solid var(--grey-400);
	box-sizing: border-box;
}
.SETheading{
	font-family: var(--font-buttons);
	color: var(--blue-dark);
	font-size: 16px;
	font-weight: 500;
}
.SETdefaultLink{
	color: var(--blue);
	text-decoration: none;
	cursor: pointer;
}
.SETdefaultLink:hover{
	text-decoration: underline;
}
.SETresetGrid{
	display: grid;
	grid-template-columns: 1fr auto auto auto;
	color: var(--grey-600);
	column-gap: 4px;
	margin-bottom: 4px;
}
.SETdatabaseTableData{
	line-height: 28px;
}

.SETmainContentLayout {
	display: grid;
	grid-template-columns: 280px 1fr;
	grid-template-rows: 1fr;
}

.CORmainContents {
	background-color: var(--grey-200);
}

.SETcontentAsideLayout {
	position: relative;
	grid-column: 1;
	padding: 32px;
	padding-top: 24px;
	grid-row: 1 / span 2;
}

.SETcontentBodyLayout {
	grid-column: 2;
	grid-row: 1 / span 2;
	padding: 24px;
}

.SETsettingsNavLayout * {
	padding: 0;
	margin: 0;
}

.SETsettingsNavPageLayout {
	position: relative;
	display: flex;
	align-items: center;
	padding: 4px 0px;
	margin-bottom: 16px;
}

.SETsettingsPaneLayout {
	padding: 32px;
	padding-bottom: 52px;
}

.SETcontentBodyLayout table {
	width: 100%;
}

.SETcontentBodyLayout th {
	padding: 8px 16px;
}

.SETcontentBodyLayout td {
	padding: 8px 16px;
}

.SETtrashIcon {
	width: 16px;
	height: 16px;
	margin-top: -4px;
	margin-bottom: -4px;
	fill: currentColor;
}

.SETuserNameEdit {
	width: 20%;
}

.table-footer {
	display: flex;
}

.SETwarningIcon::before {
   content: '• ';
	color: red;
	font-size: 18px;
	font-weight: var(--bold);
}
 
.SETwarningHelpMessage {
	margin-top: 20px;
	color: var(--grey-600);
}

.SETcardRedirect {
	display: inline;
	cursor:pointer;
	color: var(--blue-dark);
	text-decoration:underline;
}
.SETmainContent {
	overflow: hidden;
	height: 100vh;
}

.SETcontentAsideHeader {
	/* background: var(--white); */
	/* border-right: 1px solid var(--grey-300); */
}

.SETcontentAside {
	overflow: hidden;
	/* Match dashboard colours */
	background-color: #ebf3f6;
	border-right: 1px solid var(--grey-400);
}

.SETcontentAside:hover {
	overflow: auto;
}

.SETcontentBody {
	overflow: auto;
	/* Match dashboard colours */
	background-color: #D2E4EC;
}

.SETheading {
	/* font-family: var(--font-buttons); */
	/* color: var(--blue-dark);
	font-size: 16px !important;
	font-weight: 500 !important;
	margin-bottom: 16px; */
}

.SETsettingsNav * {
	font-family: var(--font-buttons);
	font-weight: 370;
	font-size: 13px;
}

.SETsettingsNavPage {
	color: var(--grey-600);
	font-weight: var(--semibold);
	list-style-type: none;
}

.SETsettingsNavPage:hover {
	cursor: pointer;
	font-weight: var(--bold);
	color: var(--grey-700);
}

.SETsettingsNavPage.selected {
	font-weight: var(--bold);
	color: var(--grey-800);
}

/* .SETsettingsNavPage.selected::before {
   content: "";
   background-color: var(--blue);
   border-radius: 9999px;
} */
.SETsettingsIconSvg {
	fill: var(--grey-300);
}
.SETsettingsPane {
	border-radius: 4px;
	border: solid 1px var(--grey-400);
	background-color: var(--white);
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
	border: none;
	max-width: 1050px;
}

.SETsettingsPaneHeader {
	border-bottom: 1px solid var(--grey-300);
}

.SETtable {
	border-collapse: collapse;
}

.SETtableHeading {
	border: 1px solid var(--grey-300);
	text-align: left;
	border-left: 0px;
	border-right: 0px;
}

.SETtableHeading:first-child {
	border-left: 1px solid var(--grey-300);
}

.SETtableHeading:last-child {
	border-right: 1px solid var(--grey-300);
}

.SETtableData {
	border: 1px solid var(--grey-300);
	text-align: left;
	border-left: 0px;
	border-right: 0px;
}

.SETtableData:first-child {
	border-left: 1px solid var(--grey-300);
}

.SETtableData:last-child {
	border-right: 1px solid var(--grey-300);
}

.SETpermissionsListTableRow:hover .SETpermissionsListTableData {
	background-color: unset;
}

.SETnotificationRuleList table {
	border-collapse: collapse;
}

.SETpermissionsList table {
	border-collapse: collapse;
}

.SETusersList table {
	border-collapse: collapse;
}


.SETusersList td:last-child {
	white-space: nowrap;
	text-align: right;
}

.SETpermissionsList td:last-child {
	white-space: nowrap;
	text-align: right;
}

.SETnotificationRuleList a {
	text-decoration: none;
}

.SETusersList a {
	text-decoration: none;
}

.SETpermissionsList a {
	text-decoration: none;
}

.SETnotificationRuleList a:hover {
	border-bottom: 1px solid rgba(var(---blue), 0.5);
}

.SETusersList a:hover {
	border-bottom: 1px solid rgba(var(---blue), 0.5);
}

.SETpermissionsList a:hover {
	border-bottom: 1px solid rgba(var(---blue), 0.5);
}

.SETnotificationRuleDelete:hover {
	background: var(--red) !important;
	color: var(--red-lighter) !important;
}

.SETusersList .SETdeleteRow:hover {
	background: var(--red) !important;
	color: var(--red-lighter) !important;
}

.SETpermissionsList .SETdeleteRow:hover {
	background: var(--red) !important;
	color: var(--red-lighter) !important;
}

.SETnotificationRuleChannelList {
	border-bottom: 1px dashed var(--grey-600);
	cursor: default;
}

.SETpasswordLabel,
.SETuserInfo {
	width: 100%;
	font-weight: var(--semibold);
	font-size: 12px;
	line-height: 16px;
	display: block;
	margin-bottom: var(--label-margin-bottom);
	color: var(--grey-700);
}

.GSVadd,
.SETaddUser,
.SETaddPermission,
.STGadd,
.STNadd {
	border-radius: 9999px;
	font-family: var(--font-buttons);
	font-weight: var(--semibold);
	font-size: 10px;
	line-height: 10px;
	letter-spacing: 0.25px;
	cursor: pointer;
	display: flex;
	align-items: center;
	height: 28px;
	width: fit-content;
	padding: 0 12px 0px 8px;
	box-sizing: border-box;
	background-color: var(--grey-200);
	color: var(--grey-600);
	transition: 250ms ease-out;
	margin: 16px auto 0px auto;
	user-select: none;
}

.GSVadd:hover,
.SETaddUser:hover,
.SETaddPermission:hover,
.STGadd:hover,
.STNadd:hover {
	background-color: var(--grey-300);
	text-decoration: none;
	transition: 75ms ease-in;
}

.SETaddIcon {
	fill: currentColor;
	margin-right: 8px;
}

.SETtotalUsers,
.SETtotalPermissions,
.SETtotalNotifications,
.SETtotalRepos {
	font-family: var(--font-buttons);
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.02em;
	line-height: 16px;
	margin-top: 24px;
	color: var(--grey-500);
}

.SETtotalUsers {
	margin-top: 32px;
}

.SETusersTitle,
.SETloggingTitle,
.SETpurgingTitle,
.SETpermissionsTitle,
.SETnotificationsTitle,
.SETldapTitle {
	margin: unset;
	font-weight: var(--bold);
	font-size: 20px;
	line-height: 32px;
	color: var(--grey-700);
	padding-bottom: 24px;
	margin-bottom: 0px;
	display: flex;
	/* justify-content: space-between; */
	align-items: center;
}
.SETlicenseLabel,
.SETloggingTitle{
	padding-left: 10px;
}

/* SETTINGS TABLES - Common Styles */
.SETuserTable,
.SETloggingTable,
.SETpurgeRuleTable,
.SETpermissionTable,
.SETnotificationsTable {
	display: grid;
	border: 1px solid var(--grey-300);
	background-color: var(--grey-100);
	border-radius: var(--border-radius);
	overflow-x: auto;
}

.SETloggingHeading {
	display: contents;
	position: sticky;
	top: 0;
	z-index: 100;
}

.SETloggingTableHeading{
	position: sticky;
	top: 0;
}

.SETuserTableHeading,
.SETloggingTableHeading,
.SETpurgeRuleTableHeading,
.SETpermissionTableHeading,
.SETnotificationTableHeading {
	padding: 8px 16px;
	min-height: 32px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}
.SETnotificationTableHeading i{
	font-weight: var(--regular);
	padding-left: 6px;
}

.SETuserHeading,
.SETuserRow,
.SETloggingRow,
.SETpurgeRuleHeading,
.SETpurgeRuleRow,
.SETpurgingEditRow,
.SETpermissionHeading,
.SETpermissionRow,
.SETnotificationsHeading,
.SETnotificationRules,
.SETnotificationEditRow {
	display: contents;
}

.SETuserHeading>div,
.SETloggingHeading>div,
.SETpurgeRuleHeading>div,
.SETpermissionHeading>div,
.SETnotificationsHeading>div {
	border-bottom: 2px solid var(--grey-300);
	font-weight: var(--semibold);
	color: var(--grey-800);
	background-color: var(--grey-200);
}

.SETuserRow>div,
.SETloggingRow>div,
.SETpermissionRow>div,
.SETnotificationEditRow>div {
	box-sizing: border-box;
	min-height: 40px;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--grey-300);
	color: var(--grey-800);
}

/* Users */

.SETuserTable {
	grid-template-columns: minmax(120px, auto) minmax(auto, 1.5fr) auto;
}

.SETuserHeading :nth-child(1),
.SETuserHeading :nth-child(3) {
	cursor: pointer;
}

.SETpasswordIcon {
	width: 18px;
	height: 16px;
	margin-top: -4px;
	margin-bottom: -4px;
	fill: currentColor;
}

.SETuserPopoutCard,
.SETeditUserPopoutCard {
	max-width: 500px;
	min-width: 380px;
}

.SETuserForm {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 16px;
	row-gap: 8px;
	border-radius: var(--border-radius);
	margin-top: -16px;
}

.SETformFullWidth {
	grid-column: 1/-1;
}

.SETpasswordStrength {
	display: block;
	width: 100%;
	height: 4px;
	border: none;
	margin-top: 6px;
	margin-bottom: 2px;
}

.SETpasswordStrength::-webkit-progress-bar {
	background-color: var(--grey-300);
	border-radius: 4px;
}

.SETpasswordStrength::-webkit-progress-value {
	background-color: var(--blue);
	border-radius: 4px;
}

.SETuserPasswordStrengthLabel {
	color: var(--grey-600);
	font-size: 9px;
	margin: 0px;
	margin-top: -2px;
}

.SETlabelSubdued {
	color: var(--grey-600);
	font-weight: var(--regular);
}

.SETpasswordConfirm {
	margin-top: 16px;
}

.SETuserData>.button-group {
	flex-wrap: nowrap;
	display: flex;
	gap: 4px;
}
.SETuserData .BUTTONcancel{
	border: 1px solid var(--grey-300);
}

/* Logging */


.SETpurgeRuleTable {
	grid-template-columns: minmax(min-content, auto) minmax(min-content, auto) minmax(min-content, auto) minmax(min-content, auto) minmax(min-content, auto);
}

/* Permissions */

.SETpermissionTable {
	grid-template-columns: auto auto 60px;
}

.SETpermissionData:last-child {
	justify-content: flex-end;
}

.SETselectNotificationComponent {
	padding: 8px;
	padding-left: 16px;
	margin: 0;
	margin-bottom: 24px;
	border-radius: 4px;
	border: 1px solid var(--grey-300);
	color: var(--grey-600);
}
.SETselectNotificationComponentEditBox{
	padding: 8px;
	padding-left: 16px;
	margin: 0;
	margin-bottom: 24px;
	border-radius: 4px;
	border: 1px solid var(--grey-300);
	color: var(--grey-600);
}
.SETselectNotificationComponentEdit{
	display: flex;
	align-items: center;
}

.SETcomponentNotiDataErrorMsg{
	padding-top: 8px;
   color : red;
}

.SETcomponentDropdown {
	max-width: 240px;
	margin-left: 8px;
}

.SETnotificationsTable {
	grid-template-columns: minmax(min-content, 320px) minmax(min-content, 150px) min-content 70px 90px 120px 180px minmax(min-content, auto);
}

.SETnotificationParameter *,
.SETnotificationSign * {
	visibility: hidden;
}

.SETnotificationParameter.SETnotificationVisible *,
.SETnotificationSign.SETnotificationVisible * {
	visibility: visible;
}


.SETnotificationData:nth-child(2) {
	padding-right: 0px;
	white-space: nowrap;
}

.SETnotificationData:nth-child(3) {
	color: var(--grey-600);
}

.SETnotificationData:nth-child(4) {
	padding-left: 0px;
	padding-right: 4px;
}

.SETnotificationData:nth-child(5) {
	padding-left: 0px;
}

.SETnotificationParameter {
	width: 70px;
}

.SETconditionWrapper,
.SETconditionWrapperEdit {
	height: 28px;
	background: var(--white);
	box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.15);
	box-sizing: border-box;
	border-radius: var(--border-radius);
	color: var(--grey-600);
	padding-left: 8px;
	padding-right: 8px;
	width: 100%;
	display: flex;
	overflow: hidden;
	align-items: center;
	justify-content: left;
	text-wrap: nowrap;
}

.SETconditionWrapperEdit {
	background: var(--grey-100);
	box-shadow: none;
	border: 1px solid var(--grey-400);
	color: var(--grey-600);
}

.SETnotificationDelete {
	justify-content: flex-end;
}



.SETemptyTable {
	text-align: center;
	font-size: 14px;
	background-color: var(--grey-100);
	color: var(--grey-500);
	padding: 40px 24px;
	margin: 16px auto;
}



.SETinputFieldIcon {
	position: relative;
}

.SETiconPassword {
	position: absolute;
	right: 0px;
	padding: 6px 8px;
	cursor: pointer;
	fill: var(--grey-500);
}

.SETiconPassword:hover {
	fill: var(--grey-700);
}

.SETinputFieldInfo {
	color: var(--grey-600);
	font-size: 10px;
	line-height: 12px;
	margin-top: 4px;
	margin-bottom: 4px;
}

.SETtoggleNotificationsLayout {
	display: flex;
	align-items: center;
	padding: 8px;
	padding-left: 16px;
	margin: 0;
	margin-bottom: 24px;
	border-radius: 4px;
	border: 1px solid var(--grey-300);
	color: var(--grey-600);
}

.SETtoggleNotifications {
	position: relative;
	width: 20%;
	height: 10%;
}

.SETpermissionsLabel,
.SETusersLabel,
.SETpurgingLabel,
.SETnotificationsLabel {
	padding-left: 10px;
}
.SETpermissionsActions,
.SETuserActions,
.SETpurgingActions,
.SETnotificationActions {
	margin-left: auto;
}

/* Redo with namespaced classes */
.SETversionPageLayout {
	max-width: 1000px;
	min-width: 500px;
}

.SETversionAboutIguana {
	display: flex;
	align-items: baseline;
	padding-left: 4px;
}

.SETversionContainer {
	font-weight: var(--bold);
	font-size: 20px;
	line-height: 32px;
	color: var(--grey-700);
	padding-bottom: 24px;
	margin-bottom: 0px;
	padding-left: 10px;
}

.SETversionContainer * {
	position: relative;
	font-size: 16px;
	bottom: 32px;
}

.SETversionLabel {
	font-size: 11px;
	display: table-cell;
	width: 11em;
	font-weight: var(--semibold);
}

.SETversionDetail,
.SETversionUpgrade {
	font-size: 11px;
	padding-top: 1px;
	padding-bottom: 1px;
	padding-left: 4px;
	display: table-cell;
}
.STAgitInstalled,
.STAsshPath,
.STAkeygenPath,
.STApathModal,
.SETversionDetail{
	font-family: var(--font-monospace);
}

.SETversion,
.SETupdate,
.SETautoUpdate,
.SETmessage,
.SETtime,
.SETdebugSymbols,
.SETdebug{
	font-family: inherit;
}

.SETversionRow {
	display: table-row;
	line-height: 17px;
	font-size: 11px;
}

.SETversionPanel {
	background: var(--grey-100);
	padding: 24px 36px;
	border-radius: var(--border-radius);
	margin-bottom: 24px;
	border: 1px solid var(--grey-300);
}

.SETversionPanel:last-child {
	margin-bottom: 0px;
}

.SETlink{
	color: var(--blue);
	text-decoration: unset;
	padding-left: 4px !important;
	padding-right: 4px !important;
	cursor: pointer;
}
.SETlink:hover{
	text-decoration: underline;
}
.SETversionPanel a:hover{
	text-decoration: underline;
}
.SLCtable{
   display: grid;
   grid-template-columns: 180px 1fr;
   row-gap: 12px;
}
.SLCencryptionKeyBlock{
   margin-top: 12px;
}
.SLCtable .FORMlabel {
   margin-top: 12px;
}

.SLCconfirmButtons {
   display: flex;
   justify-content: end;
   margin-top: 24px;
}
.SLCkeyHelpTextarea{
   padding: 12px;
   padding-left: 12px;
   padding-right: 12px;
   height: 6em !important;
   resize: none;
}
.SLCkeyHelpDiv{
   background-color: var(--grey-100);
   color: var(--grey-500);
   border: 1px solid var(--grey-300);
   border-radius: 4px;
   padding: 24px;
   padding-bottom: 18px;
   padding-top: 18px;
}
.SLCkeyHelpGrid{
   display: grid;
   grid-template-columns: 1fr auto;
}
.SLCkeyHelpText{
   margin-top: 4px;
}
.SLCkeyHelpImportant{
   color: var(--red);
}
.SLCencAck,
.SLCencAck2{
   height: 12px;
   margin: 0px;
   margin-right: 4px;
}
.SLCencAck2{
   margin-top: 10px;
}
.SLCcheckboxContainer{
   margin-top: 4px;
   background: var(--grey-100);
   padding: 25px;
   padding-top: 14px;
   border-radius: var(--border-radius);
   margin-bottom: 24px;
   border: 1px solid var(--grey-300);
}

.SMPLgoToInput {
   width: 20px;
   text-align: center;
   margin: 0;
   padding: 0;
   height : 20px;
}
#mb-divider {
   border-top: 1px solid var(--grey-300) !important;
   margin: 8px -8px !important;
}
#mini-browser button#mb-search {
   margin: 0px;
   padding: 6px 10px;
   font-size: 9px;
   /* width: 100%; */
}
.SMPLhidden { 
   display: none; 
}
.SMPLmsgFirst {
	background-image: url("/TRANS/images/toolbar/button_msg_first.svg");
}
.SMPLmsgFirst.disabled {
	background-image: url("/TRANS/images/toolbar/button_msg_first_disabled.svg");
}
.SMPLmsgPrev {
	background-image: url("/TRANS/images/toolbar/button_msg_prev.svg");
}
.SMPLmsgPrev.disabled {
	background-image: url("/TRANS/images/toolbar/button_msg_prev_disabled.svg");
}
.SMPLmsgNext {
	background-image: url("/TRANS/images/toolbar/button_msg_next.svg");
}
.SMPLmsgNext.disabled {
	background-image: url("/TRANS/images/toolbar/button_msg_next_disabled.svg");
}
.SMPLmsgLast {
	background-image: url("/TRANS/images/toolbar/button_msg_last.svg");
}
.SMPLmsgLast.disabled {
	background-image: url("/TRANS/images/toolbar/button_msg_last_disabled.svg");
}
.SMPLmsgEdit {
	background-image: url("/TRANS/images/toolbar/button_msg_edit.svg");
}
.SMPLmsgEdit.disabled {
	opacity: 0.2;
	cursor: not-allowed !important;
}
.SMPLmsgAdd {
	background-image: url("/SMPL/SMPLiconAddMessage.svg");
}

.SMPLinsertHex {
	background-image: url("/SMPL/SMPLiconInsertHex.svg");
}
#SMPLhexInput {
	width: 40px;
	margin-left: 6px;
}
.SMPLhexCodeInput{
	display: contents;
}


/* Import Sample Data Modal */

.SMPLaddDataDialog {
	top: 50px;
	/* window height - toolbar - status bar */
	height: calc(100% - 104px);
}

.SMPLaddDataDialog .POPpopoutCard-content {
	/* card height - header - top bottom padding */
	height: calc(100% - 61px);
	padding: 0px;
}

.SMPLimportModal {
	display: grid;
	grid-template-columns: auto 1fr;
	height: 100%;
	overflow: hidden;
}

.SMPLimoprtSideBar {
	box-sizing: border-box;
	padding: 32px;
	display: grid;
	grid-template-rows: auto auto 1fr;
	height: 100%;
	overflow: hidden;
}

.SMPLimoprtSideBar .FORMlabel {
	margin-bottom: 4px;
}

.SMPLsectionHeader {
	font-family: var(--font-buttons);
	color: var(--grey-500);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.05em;
	margin-bottom: 24px;
}


/* Splitter */
.SMPLresizeControl {
	right: -6px;
	top: 0;
	bottom: 0;
	width: 10px;
	padding: 0;
	border: 0;
	position: absolute;
	outline: none;
	cursor: ew-resize;
	background-color: transparent;
	border-right: 1px solid black;
}

.SMPLresizeShadow {
	bottom: 0;
	top: 0;
	right: 4px;
	pointer-events: none;
	position: absolute;
	width: 3px;
	transition: 150ms ease-out;
}

.SMPLresizeControl:hover .SMPLresizeShadow {
	background: var(--blue);
	transition: 75ms ease-in;
}

.SMPLpane {
	position: relative;
	height: 100%;
	overflow: hidden;
}


/* CSS hack to overwrite styles of "CHOOSE FILE" button */
.SMPLfileSelectButtonContainer {
	position: relative;
}
.SMPLfileSelectButton {
	display: inline-block;
	cursor: pointer;
	font-family: var(--font-buttons);
	font-weight: var(--semibold);
	font-size: 10px;
	letter-spacing: 0.25px;
	border-radius: var(--border-radius);
	padding: 0px 12px;
	height: 28px;
	line-height: 28px;
	background-color: var(--grey-200);
	color: var(--grey-600);
}
.SMPLfileSelectButton:hover {
	background-color: var(--grey-300);
	transition: 70ms ease-in;
}
.SMPLfileSelectButton:hover {
	background-color: var(--grey-400);
	color: var(--grey-700);
}
.SMPLfileUploadSelect {
	position: absolute;
	z-index: -1;
	top: 4px;
	left: 16px;
	font-size: 12px;
	padding-top: 0 !important;
	color: var(--grey-600);
	font-family: var(--font-sans);
	visibility: hidden;
}

.SMPLfileUploadSelected {
	color: var(--grey-600);
	margin-top: 4px;
	font-size: 10px;
}

.SMPLimportFromUploadControls {
	margin-bottom: 24px;
}

.SMPLimportFromLogControls {
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.SMPLcomponentList {
	margin-bottom: 16px;
	height: 32px;
}

.SMPLcomponentLogs {
	border: 1px solid var(--grey-400);
	border-radius: var(--border-radius);
	flex-grow: 1;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: calc(100% - 32px);
}

.SMPLsearchFilterCell {
	padding: 0px 8px;
	border-bottom: 1px solid var(--grey-400);
}

.SMPLsearchFilter {
	outline: none;
	border: none;
	padding-left: 0px;
	padding-right: 0px;
	background-image: url(/SMPL/SMPLiconFilter.svg);
	background-repeat: no-repeat;
	background-position: 0px center;
	padding-left: 24px;
}

.SMPLimportLogMessages {
	overflow-y: auto;
	overflow-x: hidden;
	white-space: pre;
	flex-grow: 1;
	padding-top: 8px;
}

.SMPLimportLogMessage {
	padding: 6px 8px;
	font-size: 10px;
	border-bottom: 1px solid var(--grey-300);
	max-height: 45px;
	overflow: hidden;
	color: var(--grey-700);
}

.SMPLimportLogMessage:not(.SMPLimportLogMessageMeta):hover {
	background-color: var(--blue-lighter);
	cursor: default;
}

.SMPLimportLogMessage.SMPLimportLogMessageMeta.SMPLimportLogMessageMetaNoMatch {
	height: 100% !important;
}

.SMPLimportLogMessage.SMPLimportLogMessageMeta {
	text-align: center;
	border: none;
	color: var(--grey-400);
	letter-spacing: 0.05em;
	max-height: calc(100% - 24px);
	font-size: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.SMPLimportMain {
	background: var(--grey-200);
	border-left: 1px solid var(--grey-300);
	padding: 32px;
	box-sizing: border-box;
	display: grid;
	grid-template-rows: auto auto auto auto 1fr auto;
	height: 100%;
	overflow: hidden;
}

.SMPLimportMain .FORMlabel {
	margin-bottom: 4px;
}

.SMPLimportMain textarea {
	margin-bottom: 16px;
}

.SMPLimportNameField {
	margin-bottom: 16px;
}

.SMPLimportNameError {
	color: red;
}

.SMPLimportData {
	height: 100%;
	min-height: 128px;
}

.SMPLimportSampleEditor {
	border: 1px solid var(--grey-400);
	border-radius: var(--border-radius);
	overflow-y: auto;
	max-height: 73vh;
	margin-bottom: 16px;
}

/* Hide elements by adding the .SMPLhidden class - better than altering display:none */
.SMPLhidden {
	display: none !important;
}

.SNCKsnackbar {
    visibility: visible; /* Hidden by default. Visible on click */
    text-align: left; /* Left aligned text */
    border-radius: 4px; /* Rounded borders */
    padding: 24px 60px 24px 24px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 9999; /* Add a z-index if needed */
    left: 50%; /* Center the snackbar (Starting position) */
    transform: translateX(-50%); /* Center the snackbar (Offset back by half the width) */
    bottom: 48px; /* 30px from the bottom */
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    background-color: var(--grey-800); /* Dark grey background color $grey-800 */
    color: var(--grey-100); /* $grey-100 */
}

.SNCKsnackbar .SNCKclosePanel { /* Close icon position and styling */
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--grey-400);
}

.SNCKsnackbar a{
    color: var(--blue);
}

.SNCKsnackbar--error {
    visibility: visible;
}

.SNCKsnackbar--info {
    visibility: visible;
}

.SNCKsnackbar--success {
    visibility: visible;
}

.SNCKsnackbar--warning {
    visibility: visible;
}

.SNCKsnackbar .SNCKmessage::before { /* Styling of labels */
    font-family: var(--font-buttons);
    font-size: 11px;
    margin-right: 16px;
}

.SNCKsnackbar--error .SNCKmessage::before {
    content: "ERROR:";
    color: #FF593B; /* Red (Custom) */
}

.SNCKsnackbar--info .SNCKmessage::before {
    content: "INFO:";
    color: #2CA9F0; /* Blue (Custom) */
}

.SNCKsnackbar--success .SNCKmessage::before {
    content: "SUCCESS:";
    color: #6FD93E; /* Green (Custom) */
}

.SNCKsnackbar--warning .SNCKmessage::before {
    content: "WARNING:";
    color: #FFDA3B; /* Yellow (Custom) */
}

.SNCKsnackbarCloseIcon {
  fill: var(--grey-400);
  width: 16px;
  height: 16px;
}

.SNCKsnackbarCloseIcon:hover {
  fill: var(--grey-600);
}

.SNCKmessage {
    overflow-wrap: anywhere;
}
.SPINspinner{
   background-image: url(/TRANS/images/spinner.gif);
   opacity: 0.5;             /* Standard style for transparency */
   filter: alpha(opacity=5); /* For IE */
   height: 16px;
   width: 16px;
}
/*Resize button*/

.SPLTresizeButton {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 18px;
   width: 18px;
   border-radius: 9999px;
   background: var(--white);
   border: 1px solid var(--grey-400);
   opacity: 0;
   color: var(--grey-500);
}
.SPLTcollapse {
   width: 14px !important;
}
.SPLTresizeIcon {
	width: 12px;
	height: 12px;
	fill: transparent;
}
.SPLTcollapse .SPLTresizeIcon {
	transform: rotate(180deg);
}
.SPLTcollapse .SPLTresizeButton {
	opacity: 1;
}
.SPLTresizeButtonContainer:hover .SPLTresizeButton{
   background: var(--blue);
   color: var(--white);
   border: 1px solid var(--blue);
   transition: 150ms ease-out;
}
.SPLTresizeButtonContainer:hover{
   cursor: pointer;
}
.SPLTresizeButtonContainer{
   display: flex;
   height: 52px;
   width: 23px;
   position: absolute;
   z-index: 11;
   top: 7px;
   left: -5px;
   align-items: center;
}


.SRCHsidebarFindReplace {
	display: flex;
	flex-flow: column;
	height: 100%;
}
.SRCHsidebarSearchFields {
	/* flex-shrink: 0; */
	margin: 8px;
	display: grid;
	grid-template-columns: 16px 1fr;
	background: rgba(var(---blue-dark), 0.075);
	border-radius: var(--border-radius);
}
.SRCHsidebarSearchInput {
	width: 100%;
	border: none;
	outline: 0;
	font-size: 11px;
	font-family: var(--font-sans);
	color: var(--grey-800);
	background: transparent;
	padding: 0px;
}
.SRCHsidebarSearchInput:focus {
	border: none;
	outline: 0;
}
.SRCHsidebarSearchInput::placeholder {
	color: var(--grey-600);
}
.SRCHsidebarSearchInput:focus::placeholder {
	color: transparent;
}
.SRCHsidebarSearchList {
	overflow-y: auto;
	overflow-x: hidden;
}
/* style search results scrollbar */
.SRCHsidebarSearchList {
	flex-grow: 1;
	overflow-y: auto;
	--scrollbarBG: #ebf3f6;
	--thumbBG: #D2DDE8;
	scrollbar-width: thin;
	scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
.SRCHsidebarSearchList::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}
.SRCHsidebarSearchList::-webkit-scrollbar-track {
	background: var(--scrollbarBG);
}
.SRCHsidebarSearchList::-webkit-scrollbar-thumb {
	background-color: var(--thumbBG);
	border-radius: 8px;
	border: 3px solid var(--scrollbarBG);
}

.SRCHsidebarSearchRow {
	cursor: pointer;
	user-select: none;
	border-bottom: 1px solid var(--grey-300);
}
.SRCHsidebarSearchRow:last-of-type{
	border-bottom: none;
}
.SRCHsidebarControlFileName {
	font-size: 12px;
	font-weight: 600;
	display: flex;
	grid-template-columns: 16px 1fr 16px;
	gap: 6px;
	align-items: center;
	padding: 4px 0px 4px 8px;
	padding-right: 8px;
	flex-direction: row;
	line-height: 2em;
}
.SRCHresultSelected .SRCHcloseResult,
.SRCHsidebarCollapsableResults:hover .SRCHcloseResult,
.SRCHsidebarControlFileName:hover .SRCHcloseResult {
	visibility: visible;
}
.SRCHsidebarSearchResult {
	border-left: 1px solid var(--grey-400);
	margin-left: 16px;
	margin-bottom: 8px;
}
.SRCHsidebarResultString {
	font-size: 11px;
	font-family: var(--font-monospace);
	color: var(--grey-700);
	display: inline;
	word-break: break-all;
	line-height: 1.8em;
}
.SRCHsidebarResultString * {
	white-space: pre-wrap;
	word-wrap: break-word;
}
.SRCHsidebarSearchStringMatch {
	color: var(--grey-800);
	background-color: var(--teal-light);
	padding-left: 2px;
	padding-right: 2px;
	font-weight: 600;
}
.SRCHsidebarJumpToSearch {
	display: none;
}
.SRCHsidebarCollapsableResults {
	padding: 4px;
	padding-left: 8px;
	padding-right: 12px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 16px;
	align-items: center;
	margin-left: 6px;
	border-radius: 4px;
}
.SRCHsidebarCollapsableResults:first-child {
	margin-top: 0px;
}
.SRCHsidebarControlFileName:hover{
	background-color: rgba(179, 221, 245, 0.35);
}
.SRCHsidebarCollapsableResults:hover {
	background-color: rgba(179, 221, 245, 0.25);
	/* font-weight: 600; */
}
.SRCHsidebarCollapsableResults:hover .SRCHsidebarResultString {
	/* color: var(--grey-800) !important; */
	/* background-color: rgba(179, 221, 245, 0.25); */
}
.SRCHresultSelected{
	background-color: #D6E9F3 !important;
	border-radius: var(--border-radius);
	font-weight: 600;
	color: var(--grey-900) !important;
}
.SRCHsidebarCollapsableResults:hover .SRCHcloseResult {
	display: block;
}
.SRCHsidebarGitChangesTitle {
	padding-bottom: 5px;
}
.SRCHsidebarDiff {
	cursor: pointer;
	padding: 8px 12px;
}
.SRCHmatchCase,
.SRCHmatchWord {
	display: inline-block;
	height: 18px;
	width: 18px;
	border-radius: var(--border-radius);
	background-position: center;
	background-repeat: no-repeat;
}
.SRCHmatchCase:hover,
.SRCHmatchWord:hover {
	cursor: pointer;
	background-color: rgba(var(---blue-lighter), 0.75);
}
.SRCHmatchCase {
	background-image: url("/SRCH/SRCHiconMatchCase.svg");
}
.SRCHmatchWord {
	background-image: url("/SRCH/SRCHiconMatchWholeWord.svg");
	margin-left: 2px;
}
.SRCHgroup {
	margin-top: 8px;
	margin-bottom: 4px;
	padding-left: 12px;
	padding-right: 16px;
	display: grid;
	grid-template-columns: 1fr 22px 18px 18px;
	align-items: center;
	column-gap: 4px;
}
.SRCHglobal.TOGtoggle {
	margin-right: 8px;
	height: 12px;
	width: 28px;
}
.SRCHglobal .TOGcheck:checked~.TOGtrack {
	background-color: #639FC5;
}
.SRCHreplaceSliderLabel {
	font-family: var(--font-buttons);
	font-weight: var(--regular);
	letter-spacing: 0.02em;
}
.SRCHsearchActionBtn {
	display: block;
	height: 22px;
	width: 22px;
	border-radius: var(--border-radius);
	background-repeat: no-repeat;
	background-position: center;
	cursor: default;
}
.SRCHsearchActionBtn:hover {
	background-color: rgba(var(---blue-dark), 0.1);
	cursor: pointer;
}

.SRCHsearchPrevious {
	background-image: url("/SRCH/SRCHiconUp.svg");
	cursor: pointer;
}
.SRCHsearchNext {
	background-image: url("/SRCH/SRCHiconDown.svg");
	cursor: pointer;
}
.SRCHmatchCount {
	/* font-size: 10px; */
	/* font-family: var(--font-buttons); */
	/* color: var(--grey-700); */
	text-align: right;
	/* padding-right: 12px;
	padding-top: 4px;
	padding-bottom: 4px; */
}
.SRCHgridDiv{
	display: grid;
	grid-template-columns: auto 1fr auto;
	padding-right: 12px;
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 10px;
	color: var(--grey-700);
	font-family: var(--font-buttons);
	column-gap: 8px;
	font-size: 10.5px;

}
.SRCHmaxResults {
	font-size: 10px;
	font-family: var(--font-buttons);
	color: var(--grey-700);
	padding-right: 12px;
	padding-top: 4px;
	padding-bottom: 4px;
}
.SRCHtoggleReplace {
	display: inline;
	background-repeat: no-repeat;
	background-position: center;
}
.SRCHtoggleReplace:hover {
	background-color: rgba(var(---blue-dark), 0.05);
}
.SRCHtoggleReplaceOff {
	background-image: url("/SRCH/SRCHiconDown.svg");
}
.SRCHtoggleReplaceOn {
	background-image: url("/SRCH/SRCHiconUp.svg");
}
.SRCHtoggleReplaceDisabled {
	cursor: default;
}

.SRCHtoggleReplaceOff~.SRCHsidebarInputs .SRCHreplaceCell {
	display: none !important;
}

.SRCHtoggleReplaceOff~.SRCHsidebarInputs {
	grid-template-rows: auto auto;
}
.SRCHsidebarInputs {
	display: grid;
	grid-template-columns: 1fr auto;
	padding: 8px;
	padding-left: 2px;
	padding-right: 4px;
}
.SRCHinputArea {
	display: grid;
	grid-template-columns: 1fr auto auto auto;
	align-items: center;
	padding: 4px;
	background: rgba(var(---white), 0.75);
	border-radius: 2px;
}
.SRCHinputArea:focus-within {
	background: rgba(var(---white), 0.9);
}
.SRCHactionBtnArea {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	margin-left: 4px;
}
.SRCHreplaceCell {
	margin-top: 8px;
}
/* Replace One Button */
.SRCHreplaceInComponent {
	background-image: url("/SRCH/SRCHiconReplaceOne.svg");
}
/* Replace All Button */
.SRCHreplaceAllInComponent {
	background-image: url("/SRCH/SRCHiconReplaceAll.svg");
}
.SRCHsearchResultsButtons {
	flex-shrink: 0;
	display: flex;
	grid-template-columns: auto 1fr auto;
	column-gap: 8px;
	align-items: center;
	margin-top: 8px;
	margin-bottom: 8px;
	justify-content: space-between;
}
.SRCHsidebarHideOrShowTabs,
.SRCHsidebarRefreshSearch {
	width: 18px;
	height: 18px;
	display: inline;
	border-radius: var(--border-radius);
	background-position: center;
	background-repeat: no-repeat;
}
.SRCHsidebarHideOrShowTabs:hover,
.SRCHsidebarRefreshSearch:hover {
	cursor: pointer;
	background-color: rgba(var(---blue-dark), 0.1)
}
.SRCHsidebarMinimizeTabs {
	background-image: url("/SRCH/SRCHiconCollapseAllResults.svg");
}
.SRCHsidebarExpandTabs {
	background-image: url("/SRCH/SRCHiconExpandAllResults.svg");
}
.SRCHsidebarRefreshSearch {
	background-image: url("/SRCH/SRCHiconRefreshResults.svg");
}

.SRCHsidebarClearSearch {
	width: 18px;
	height: 18px;
	background-size: 16px;
	border-radius: var(--border-radius);
	background-image: url("/SRCH/SRCHiconClearSearch.svg");
	margin-left: 0;
	color: #adb6bd;
	margin: 2px;
}
.SRCHsidebarClearSearch:hover {
	color: #4D5A64;
	background-color: rgba(107, 122, 134, 0.1);
	cursor: pointer;
}
.SRCHtoggleSearchFields {
	flex-shrink: 0;
	display: block;
	height: 30px;

}
.SRCHcloseResult {
	visibility: hidden;	
	color: var(--grey-800);
	fill: currentColor;
	height: 12px;
	width: 12px;
	padding: 4px;
}
.SRCHcloseResult.BUTTONdefault{
	transition: none !important;
}

.SRCHbuttonCollapseToggle {
	display: inline-block;
	width: 16px;
	height: 16px;
	background-position: center;
	background-repeat: no-repeat;
}
.SRCHbuttonFileCollapse {
	background-image: url("/SRCH/SRCHiconCollapse.svg");
}
.SRCHbuttonFileExpand {
	background-image: url("/SRCH/SRCHiconExpand.svg");
}
/* Dialog confirmation for "replace all" */
.SRCHdialogDimmer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.25);
	user-select: none;
	z-index: 1000;
}
.SRCHdialog {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-sizing: border-box;
	max-width: 400px;
	width: auto;
	height: auto;
	background-color: var(--white);
	border-radius: var(--border-radius);
	box-shadow: 0 4px 16px 0 rgba(var(---grey-800), 0.5);
	z-index: 1001;
	padding: 32px;
}
.SRCHdialogHeading {
	font-family: var(--font-buttons);
	font-weight: 500;
	color: var(--grey-600);
	letter-spacing: 0.02em;
	margin-bottom: 8px;
	font-size: 11px;
}
.SRCHdialogConfirmation {
	margin-bottom: 24px;
	font-weight: var(--semibold);
	line-height: 1.6em;
	font-size: 12px;
}
.SRCHcloseSearchAndReplace {
	cursor: pointer;
	float: right;
	color: var(--grey-500);
	fill: currentColor;
	margin-top: 10px;
}
.SRCHcloseSearchAndReplace:hover {
	color: var(--grey-800);
}
.SRCHdisableItem {
	opacity: 0.3;
}

.SRCHmatchWordOn {
	background-color: rgb(169, 170, 171, 0.3);
}

.SRCHmatchCaseOn {
	background-color: rgb(169, 170, 171, 0.3);
}

.SRCHmatchWordOff {
	background-color: transparent;
}

.SRCHmatchCaseOff {
	background-color: transparent;
}

.SRCHdisabled {
	cursor: default;
	opacity: 0.3;
}

.SRCHdisabled:hover {
	background-color: rgba(var(---blue-dark), 0);
}

.SRCHspecialChar {
	background-color: rgba(var(---green));
}
.SRCHbuttonFileName {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	/* flex-grow: 4; */
}

.SRCHreadOnlyResults {
	background-color: rgba(var(---grey-300), 0.50);
}

.SRCHreadOnlyButton {
	color: var(--grey-600);
	margin-left: 4px;
	font-size: 11px;
	font-weight: 400;
	flex-grow: 1;
	font-style: italic;
}

.SRCHhighlightReplacement {
	font-weight: bold;
	padding: 2px 4px;
	border-radius: 3px;
}

.SRCHdisabled {
	opacity: 0.5;
	pointer-events: none;
	cursor: not-allowed;
}
    
.SRCHgrow{
	flex-grow: 1;
}
.STAupdateRow{
   display: grid;
   grid-template-columns: auto 1fr;
}
.STAupdateButtons{
	margin-top: 12px;
	display: flex;
	justify-content: end;
	align-items: end;
}
.STAloading{
   color: var(--grey-500);
   padding-left: 12px;
}
.STAdownloadComplete{
   padding-left: 2px !important;
}
.STAchangeLog ul {
   padding-left: 24px;
}
.STAspinner {
   border: 3px solid #f3f3f3;
   border-top: 3px solid #3498db;
   border-radius: 50%;
   width: 12px;
   height: 12px;
   animation: STAspin 2s linear infinite;
}

@keyframes STAspin {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(360deg);
   }
}
.STAtryAgain{
   text-decoration: underline;
   color: var(--grey-500);
   cursor: pointer;
}
.STAhidden{
   display: none;
}
.STAerror{
   display: inline;
	color: red;
}
.STAautoInfo {
   font-size: 14px;
   font-weight: bold;
   color: #333;
   margin-bottom: 15px;
   text-align: center;
}

.STAtime-picker {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
}

.STAtime-picker select {
   margin-right: 5px; /* Adjusted margin for spacing */
   max-height: 150px;
   overflow-y: auto;
   border: 1px solid #ddd;
   border-radius: 5px;
   padding: 10px;
   font-family: 'Arial', sans-serif;
   background-color: #f4f4f4;
   color: #333;
}

.STAtime-picker select:focus {
   outline: none;
   border-color: #66afe9;
   box-shadow: 0 0 5px rgba(102, 175, 233, 0.6);
}

.STAswitch {
   display: flex;
   align-items: center;
   margin-left: 10px; /* Adjusted margin for spacing */
}

.STAswitch input {
   display: none;
}

.STAswitch label {
   cursor: pointer;
   text-indent: -9999px;
   width: 50px;
   height: 20px;
   background: linear-gradient(to right, #757575, #2e2e2e);
   display: block;
   border-radius: 20px;
   position: relative;
   transition: background 0.3s ease-in-out;
}

.STAswitch label:after {
   content: '';
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   left: 5px;
   width: 15px;
   height: 15px;
   background: #fff;
   border-radius: 50%;
   transition: 0.3s;
}

.STAswitch input:checked + label {
   background: linear-gradient(to right, #4CAF50, #45a049);
}

.STAswitch input:checked + label:after {
   left: calc(100% - 5px);
   transform: translateX(-100%) translateY(-50%);
}

.STAautoButtonGroup {
   float: right;
}
.STAlatestAck{
   height: 12px;
   margin: 0px;
   margin-right: 4px;
}
.STAlinkDisabled{
   display: inline;
   padding-left: 4px;
   padding-right: 4px;
   color: var(--grey-600);
   cursor: not-allowed;
}
.STAlinkDisabled:hover{
   text-decoration: underline;
}
.STArowDiv{
   display: grid;
   grid-template-columns: 140px 1;
}
.STAheading{
   margin-bottom: 8px;
   margin-left: 12px;
}
.STAsystemPath{
	max-height: 30em;
	overflow-y: auto; 
	white-space: nowrap;
	overflow-x: scroll;
	grid-column-start : 1;
	grid-column-end : 3;   
	display : grid;
	margin-left: 3px;
 }
 .STAwarningText{
   color: var(--red);
 }
 .STAnoSpaceList {
   margin: 0;
   padding-left: 20px;
}
 .SETwarningLabel {
   position: relative; /* Ensure the pseudo-element is positioned relative to this element */
 }
 .SETwarningLabel::before {
   content: '';
   position: absolute; /* Position the pseudo-element absolutely within its parent */
   top: 10px; /* Position vertically at the center of the parent */
   transform: translateY(-50%); /* Adjust for vertical centering */
   left: -18px; /* Position the pseudo-element to the left of the text */
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background-color: var(--red);
   margin-right: 8px; /* Margin between the pseudo-element and text */
 }
.STAgitDiv.STAgitWarning .STAgitInfo{
   display: none;
}
.STAbrowser,
.STAbrowserVersion,
.STAnavName,
.STAnavAgent{
	font-family: inherit;
}
.STAchangeLog p{
   overflow: auto;
   max-height: 500px;
}

.STARTUPbackground {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(0deg, rgba(0, 52, 101, 1) 0%, rgba(0, 100, 173, 1) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
}

.STARTUPelements {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
	margin-top: -40px;
}

.STARTUPheading {
	font-family: var(--font-buttons);
	font-weight: 400;
	color: var(--blue-light);
	text-shadow: 0px 2px 4px rgba(0,0,0,0.25);;
}

.STARTUPlogContainer {
   height: 40vh;
   width: 75vw;
	max-width: 900px;
	border: 10px solid rgba(var(---blue-light), 0.75);
	background: #ECF6FB;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0px 4px 8px rgba(0,0,0,0.25);
	display: grid;
	grid-template-rows: 1fr auto;
	margin-top: 32px;
	margin-bottom: 32px;
}

.STARTUPlogs {
   height: 100%;
   width: 100%;
   overflow: auto;
}

.STARTUPlogs .LOGlogEntry:hover {
   background: inherit;
}

.STARTUPstatus {
	color: var(--blue-darker);
	font-size: 12px;
	margin-top: 15px;
	background: rgba(var(---blue-light), 0.75);
	width: 100%;
	text-align: center;
	font-family: var(--font-buttons);
	padding: 12px 0px 2px 0px;
}

.STARTUPgoToLogin {
	height: 40px;
	padding: 0px 18px;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.05em;
}



.SETdatabaseTitle{
	margin: unset;
	font-weight: var(--bold);
	font-size: 20px;
	line-height: 32px;
	color: var(--grey-700);
	padding-bottom: 24px;
	margin-bottom: 0px;
	display: flex;
	/* justify-content: space-between; */
	align-items: center;
}
.SETdatabaseLabel, .SETupgradeLabel {
	padding-left: 10px;
}
.SETdatabaseActions{
	margin-left: auto;
}
.SETdatabaseTable{
	display: grid;
	border: 1px solid var(--grey-300);
	background-color: var(--grey-100);
	border-radius: var(--border-radius);
	overflow-x: auto;
   grid-template-columns: 220px 1fr;
}
.SETdatabaseHeading{
   display: contents;
}
.SETdatabaseHeading>div {
	border-bottom: 2px solid var(--grey-300);
	font-weight: var(--semibold);
	color: var(--grey-800);
	background-color: var(--grey-200);
}
.SETdatabaseTableHeading{
	padding: 8px 16px;
	min-height: 32px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}
.SETdatabaseTableRow{
	display: contents;
}
.SETdatabaseTableRow>div{
	box-sizing: border-box;
	min-height: 40px;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--grey-300);
	color: var(--grey-800);
}
.SETdatabaseInfo{
	display: flex;
	align-items: center;
	padding: 8px;
	padding-left: 16px;
	margin: 0;
	margin-bottom: 24px;
	border-radius: 4px;
	border: 1px solid var(--grey-300);
	color: var(--grey-600);
}
.SETdatabaseTableValue{
	width: 100%;
	display: grid;
	grid-template-columns: 1fr auto;
}

.SETdatabaseFileFeedback{
	color: red;
	display: inline;
	grid-column-start: 1;
	grid-column-end: 3;
}

.STGtestPurgeContent{
	display: flex;
	height: 100%;
	flex-direction: column;
}

.STGpurgeTestTable {
	display: flex;
	height: 100%;
	flex-direction: column;
	row-gap: 18px;
}

.STGtestPurgeTableContainer{
	flex-grow: 1;
	overflow: hidden;
}

.STGpurgeTestCard .POPpopoutCard-content{
	height: calc(100% - 61px - 32px - 32px);
	overflow: hidden;
}

.STGtestPurgeTable{
   display: grid;
	max-height: calc(100% - 2px);
	border: 1px solid var(--grey-300);
	background-color: var(--grey-100);
	border-radius: var(--border-radius);
	overflow-x: auto;
	overflow-y: auto;
	grid-template-columns: minmax(max-content, auto) minmax(max-content, auto) minmax(max-content, auto) minmax(max-content, auto);
}

.STGtestPurgeBottom{
	display: grid;
	grid-template-columns: auto max-content max-content;
}

.STGtotalPurged{
	margin: 5px;
}

.STGtestPurgeTableLoading{
	display: flex;
	justify-content: center;
	align-items: center;
}

.STGtestPurgeHeader{
	cursor: pointer;
	display: contents;
	position: sticky;
	z-index: 100;
	top: 0;
}

.STGtestPurgeHeading {
	padding: 8px 16px;
	min-height: 32px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
   border-bottom: 2px solid var(--grey-300);
	font-weight: var(--semibold);
	color: var(--grey-800);
	background-color: var(--grey-200);
	position: sticky;
	top: 0;
}

.STGtestPurgeRows {
	display: contents;
	position: sticky;
}

.STGtestPurgeTableValue {
	box-sizing: border-box;
	min-height: 40px;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--grey-300);
	color: var(--grey-800);
}

.STGtestPurgeSummary{
	margin-bottom: 5px;
}

.SETloggingTable {
	max-height: 70vh;
	overflow: auto;
}


.STGlogUsageData {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 16px;
	margin-bottom: 24px;
}

.STGlogSizeDirectoryStats,
.STGdiskUsageStats {
	background: var(--grey-100);
	border: 1px solid var(--grey-300);
	border-radius: var(--border-radius);
	padding: 12px 16px;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 8px;
	row-gap: 4px;
	color: var(--grey-800);
}

.STGlogSizeDirectoryStats > *,
.STGdiskUsageStats > * {
	display: flex;
	align-items: flex-start;
}

.STGlogSizeDirectoryStats > .FORMlabel,
.STGdiskUsageStats > .FORMlabel {
	white-space: nowrap;
}

.STGdirectoryUrl {
	overflow-wrap: anywhere;
}
.STGlogSizeDirectoryStats {
	
}

.STGdiskUsageContainer {
	display: inline-block;
}

.STGbar {
	background-color: var(--blue-lighter);
	border: 1px solid var(--grey-500);
	width: 100%;
	min-width: 150px;
	max-width: 200px;
	height: 15px;
	position: relative;
	overflow: hidden;
	border-radius: 3px;
}

.STGusage {
	background-color: var(--blue);
	height: 100%;
	width: 0;
	color: white;
	line-height: 30px;
	position: absolute;
	text-align: center;
}

.STGspace {
	text-align: right;
	margin-top: 4px;
}

.STGlogUsagePage{
	display: flex;
	height: 80vh;
	flex-direction: column;
}

.STGsortAsc::after {
	content: url("/DASH/DASHiconSortDown.svg");
	margin-top: 0px;
	margin-left: 3px;
 }
 
 .STGsortDsc::after {
	content: url("/DASH/DASHiconSortUp.svg");
	margin-top: 0px;
	margin-left: 3px;
 }
.SETpurgeRuleData a{
	color: var(--blue);
	text-decoration: none;
}
.SETpurgeRuleData a:hover{
	text-decoration: underline;
}
.STGtitle{
	margin: unset;
	font-weight: var(--bold);
	font-size: 20px;
	line-height: 32px;
	color: var(--grey-700);
	padding-bottom: 24px;
	margin-bottom: 0px;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
}
.STGruleHeading,
.STGruleRow{
	display: grid;
	grid-template-columns: 1fr 1fr 84px;
}
.STGruleHeading{
	border-bottom: 1px solid var(--grey-300);
}
.STGruleHeading>div{
	font-weight: var(--semibold);
	color: var(--grey-800);
	background-color: var(--grey-200);
}
.STGpaddingRight{
	padding-right: 24px !important;
}
.STGpaddingLeft{
	padding-left: 24px !important;
}
.STGheading{
	padding-left: 12px;
	padding-right: 12px;
}
.STGruleTable{
	border-radius: var(--border-radius);
	border: 1px solid var(--grey-300);
	background-color: var(--grey-100);
	overflow: hidden;
	width: 100%;
}
.STGheading{
	min-height: 32px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding-top: 16px;
	padding-bottom: 16px;
}
.STGruleData{
	text-align: left;
	border-left: 0px;
	border-right: 0px;
	padding: 16px;
	color: var(--grey-800);
	border-top: 1px solid var(--grey-300);
}
.STGruleRow{
	border-top: 1px solid var(--grey-300);
}
.STGruleVal{
	display : grid;
   box-sizing: border-box;
	padding: 12px 16px;
	align-items: center;
	/* border-bottom: 1px solid var(--grey-300); */
	color: var(--grey-800);
}
.STGdaysRow{
	display: grid;
	grid-template-columns: 1fr 80px;
	column-gap: 24px;
}

.SETlicenseTitle{
	margin: unset;
	font-weight: var(--bold);
	font-size: 20px;
	line-height: 32px;
	color: var(--grey-700);
	padding-bottom: 24px;
	margin-bottom: 0px;
	display: flex;
	/* justify-content: space-between; */
	align-items: center;
}
.SETlicenseLabel.SETlicenseSection{
	padding: 10px 10px 10px 10px;
	font-weight: bold;
}
.SETlicenseInput{
	display: flex;
	align-items: center;
	padding: 8px;
	width: 100%;
	height: 100%;
	padding-left: 16px;
	border-radius: 4px;
	border: 1px solid var(--grey-300);
	height: 12em !important;
	resize: none;
}
.SETlicenseMessage{
	display: flex;
	align-items: center;
	padding-left: 16px;
	padding: 8px;
}
.SETlicenseError{
	display: flex;
	align-items: center;
	padding-left: 16px;
	padding: 8px;
	margin: 8px;
	border: 1px solid red
}
.SETnewLicenseError{
	padding-left: 16px;
	padding: 8px;
	color: red;
}

.SETlicenseActions{
	margin-left: auto;
}
.SETlicenseTable{
	display: grid;
	border: 1px solid var(--grey-300);
	background-color: var(--grey-100);
	border-radius: var(--border-radius);
	overflow-x: auto;
   grid-template-columns: 1fr auto;
}
.SETlicenseTableRow{
	display: contents;
}
.SETlicenseTableRow>div{
	box-sizing: border-box;
	min-height: 40px;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--grey-300);
	color: var(--grey-800);
}
.SETlicenseInfo{
	display: flex;
	align-items: center;
	padding: 8px;
	padding-left: 16px;
	margin: 0;
	margin-bottom: 24px;
	border-radius: 4px;
	border: 1px solid var(--grey-300);
	color: var(--grey-600);
}
.SETlicenseIdLabel{
	flex-grow: 1;
}
.STNlimitEditDiv{
   display: grid;
   grid-template-columns: 1fr 70px;
   column-gap: 8px;
}
.STNruleRow{
   display : grid;
   box-sizing: border-box;
	padding: 12px 16px;
	align-items: center;
	border-bottom: 1px solid var(--grey-300);
	color: var(--grey-800);
}
.STNrulesBox,
.STNrules{
   border-radius: var(--border-radius);
   border: 1px solid var(--grey-300);
   background-color: var(--grey-100);
   overflow: hidden;
   width: 100%;
   /* padding-left: 12px; */
   /* padding-right: 12px; */
}
.STNrulesHeading,
.STNrules,
.STNrulesRow{
   display : grid;
   grid-template-columns: minmax(120px, 3fr) 130px minmax(170px, 4fr) 120px 160px 84px;
}
.STNrulesHeading >*,
.STNrulesRow > *,
.STNrules > *{
   padding-left : 12px;
   padding-right : 12px;
}
.STNpadLeft{
   padding-left: 24px;
}
.STNheading{
   padding-top: 16px;
   padding-bottom: 16px;
	min-height: 32px;
	box-sizing: border-box;
   border-bottom: 2px solid var(--grey-300);
	font-weight: var(--semibold);
	color: var(--grey-800);
	background-color: var(--grey-200);

}
.STNcriteria{
   display: grid;
   grid-template-columns: auto auto auto 1fr;
   column-gap: 4px;
}
.STNcontainsRow{
   display: grid;
   grid-template-columns: auto 1fr;
}
.STNrules a{
   color: var(--blue);
   text-decoration: none;
}
.STNrules a:hover{
   text-decoration: underline;
}
.STNgt{
   padding-left: 4px;
   padding-right: 12px;
   padding-top: 6px;
}
.STNtagMatching{
   margin-top: 6px;
   padding-left: 24px;
}
.STNthreshold{
   min-width: 36px;
   color: unset;
}
.STNdeleteDiv{
   padding-right: 24px;
}
.STNeditTarget{
   margin-left: auto;
}
.STNhidden{
   display: none;
}
.STStable{
   display: grid;
   grid-template-columns: 120px 1fr;
}
.STSvalueColor{
   grid-column-start : 1;
   grid-column-end : 3;
   display: grid;
   margin : 3px;
}

.STSvalue {
   grid-column-start : 2;
   grid-column-end : 2;
   display: grid;
   margin : 3px;
}

.STScolor{
   width: 30px;
   height: 24px;
   margin-left: 12px;
}
.STScolorView{
   width: 18px;
   height: 18px;
   margin-left: 12px;
}

.STSvalueColor.FORMinputGroup,
.STSvalue.FORMinputGroup{
   display: flex;
}

.STStable .FORMlabel {
   margin-top: 10px;
}
.STSsecureInput{
   margin-top: 12px;
}

.STShidden{
   display: none;
}
.STSdescriptionInput{
   margin-bottom: 8px;
}
.STSdescriptionError,
.STSportError,
.STScertificateError,
.STSprivateKeyError{
   color: red;
   font-size: 11px;
   margin-left: 4px;
   margin-bottom: 8px;
}
.STScolorSelectDiv{
   display: flex;
   justify-content: center; /* Centers child horizontally */
   align-items: center; /* Centers child vertically */
   width: 100%; /* Set the width as needed */
   height: 300px; /* Set the height as needed */
}
.STScolorRow{
   display: grid;
   grid-template-columns: auto 24px 1fr;
   width: 160px;
}
.STSresetColor{
	color: var(--blue);
	text-decoration: underline;
	cursor: pointer;
   text-align: right;
   padding-left: 4px;
   padding-right: 4px;
}
.STScolorInfo{
   color: var(--grey-600);
}
.STSdescription a{
   color: var(--blue);
   text-decoration: none;
}
.STSdescription,
.STSuseHttps{
   font-family: inherit;
}
.STGcomponentIdOnTable a{
   color: var(--blue);
   text-decoration: unset;
}
.STGcomponentIdOnTable a:hover{
   text-decoration: underline;
}

.SETloggingTable {
	grid-template-columns: minmax(200px, auto) minmax(auto, 1.5fr) auto;
}
.TBLfile{
   content: url(/TBL/images/TBLfileIcon.svg);
}
.TBLeditBanner{
   display: flex;
	align-items: center;
	position: sticky;
	top: 0px;
	height: 42px;
	z-index: 10;	
	background: var(--white);
	margin-bottom: 8px;
}
.TBLfileName{
   flex-grow: 1;
	font-family: var(--font-monospace);
	margin-right: 12px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;	
}
.TBLtitle{
	flex-shrink: 1;
	margin-right: 12px;
	color: var(--blue-dark);
	font-weight: 400;
	font-size: 16px;
	white-space: nowrap;
}
.TBLnodeValue{
   cursor: pointer;
	flex-grow: 1;
   font-family: var(--font-monospace);
	padding: 2px 0px;
}
.TBLnodeTable .TBLnodeHeader{
	padding: 2px 4px;
	font-size: 9px;
	font-family: var(--font-buttons);
	color: var(--grey-600);
	letter-spacing: 0.05em;
	background: var(--grey-200);
	border-top: 1px solid var(--grey-400);
	border-bottom: 1px solid var(--grey-400);
	border-right: 1px solid var(--grey-400);
}
.TBLnodeTable{
   display: grid;
	grid-template-columns: 1fr 1.5fr 100px 54px; 
	border-left: 1px solid var(--grey-400);
}
.TBLvalueEnd,
.TBLvalue{
	border: 1px solid var(--grey-400);
	border-left: 0px;
	border-top: 0px;
	padding: 2px 4px;
	display: flex;
	align-items: center;
	font-size: 11px;
}
.TBLvalue{
	border-right: 1px solid rgba(var(---grey-300), 0.65);
}
.TBLvalueEnd{
	border-right: 1px solid rgba(var(---grey-400), 0.65);
}
.TBLnodeWindow{
   height: calc(100% - 58px);
	overflow: auto;
}
.TBLaddListItem{
   padding-top: 4px;
   padding-bottom: 4px;
	font-size: 10px;
	font-family: var(--font-buttons);
	font-weight: 500;
	cursor: pointer;
	color: var(--blue);  
	padding-left: 12px;
}
.TBLlistRow{
   display: flex;
   align-items: center;
}
.TBLlistRow > div{
   display: flex;
	align-items: center;
}
.TBLcontent > div{
	display: flex;
	align-items: center;
	padding-left: 8px;
}
.TBLlistRemove{
   display: inline;
	cursor: pointer;
	text-align: right;
	padding-right: 16px;
}
.TBLcontent > div:hover{
	background-color: rgba(179, 221, 245, 0.25);
}
.TBLeditName{
	width: auto !important;
	min-width: 50px;
	flex-shrink: 1;
	margin-right: 12px;
	white-space: nowrap;
}
.TBLeditDescription{
	width: auto !important;
	min-width: 70px;
	margin-right: 12px;
	flex-grow: 1;
}
.TBLsaveEditGroup{
	flex-shrink: 0;
}
.TBLnameMainEditHint{
	color: var(--red);
	font-size: 10px;
	line-height: 12px;
	padding-bottom: 8px;
}
.TBLhidden{
	display: none;
}
.TBLcolumnRow{
	display: grid;
	grid-template-columns: 32px 32px 1fr 1.5fr 100px 50px  32px;
	cursor: default;
}
.TBLnodeHeaders{
	position: sticky;
	top : 0px;
	border: 1px solid var(--grey-400);
	background: var(--grey-200);
	align-items: center;
	min-height: 28px;
	box-sizing: border-box;
}
.TBLnodeHeaders div{
	padding: 6px 8px;
	font-size: 9px;
	font-family: var(--font-buttons);
	color: var(--grey-600);
	letter-spacing: 0.05em;
	line-height: 1.25em;
}
.TBLeditCell {
	text-align: left;
	border-left: 0px;
	border-right: 0px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.TBLeditCell .FORMinput,
.TBLeditCell .FORMselectBox {
	height: 32px;
	border-radius: 0px;
	border-left: 0px;
	border-right: 1px solid rgba(var(---grey-300), 0.65);
	border-bottom: 0px;
}
.TBLeditCell .FORMinput:focus,
.TBLeditCell .FORMselectBox:focus {
	outline: none;
	border: 2px solid var(--blue);
}
/* "Delete row" column */
.TBLeditCell:first-child {
	border: 1px solid var(--grey-400);
	border-bottom: 0px;
	background: var(--grey-100);
	border-right: 0px;
}
.TBLeditCell:nth-child(2) {
	border: 1px solid var(--grey-400);
	border-bottom: 0px;
	background: var(--grey-100);
	border-left: 0px;
}
.TBLeditCell:last-child {
	border: 1px solid var(--grey-400);
	border-bottom: 0px;
	border-left: none;
	background: var(--grey-100);
}
.TBLboolValue{
	text-align: center;
	justify-content: center;
}
.TBLaddEditRow{
	position: sticky;
	bottom : 0px;
	display: grid;
	grid-template-columns: 32px 1.0fr;
	border: 1px solid var(--grey-400);
	background: var(--grey-100);
	align-items: center;
	height: 24px;
}
.TBLaddColumn{
	grid-column: 2/3;
	padding: 0px 8px;
	font-size: 9px;
	font-family: var(--font-buttons);
	font-weight: 500;
	cursor: pointer;
	color: var(--blue);
}
.TBLwindowInner{
	height: calc(100% - 50px);
	overflow: auto;
	max-height: 600px;
}
.TBLwindow *{
	-webkit-user-select: none;
	-moz-user-select: none;  
	-ms-user-select: none;     
	user-select: none;          
 }
.TBLwindow{
	height: 100%;
	overflow: hidden;
	padding: 8px;
 }
.TBLmoveRow {
	border: 1px solid var(--grey-400);
	border-bottom: 0px;
	border-right: 1px solid rgba(var(--grey-300), 0.65);
	background-color: var(--grey-100);
	color: var(--grey-600);
	cursor: move;
}
.TBLnumber {
	border: 1px solid var(--grey-400);
	border-bottom: 0px;
	border-right: 1px solid rgba(var(--grey-300), 0.65);
	background-color: var(--grey-100);
	color: var(--grey-600);
}
.TBLtable::before{
	content: url(/TBL/images/TBLtable.svg);
	margin-right: 6px;
	height: 16px;
	width: 16px;
}
.TBLcolumnBlank{
	border-top: 0px;
	padding: 4px;
	border: 1px solid var(--grey-400);
}
.TBLblankRow{
	color: var(--grey-600);
}
.TBLwarningMessage{
	display: inline;
	cursor: pointer;
	text-align: right;
	padding-right: 16px;
}
.TBLwarningMessage{
   color: var(--grey-800);
}
.TBLdatabase::before{
	content: url(/TBL/images/TBLdatabase.svg) !important;
}
.PRJicon-file-untracked.TBLdatabase::before{
	content: url(/TBL/images/TBLdatabaseUntracked.svg) !important;
}
.PRJicon-file-renamed.TBLdatabase::before,
.PRJicon-file-modified.TBLdatabase::before{
	content: url(/TBL/images/TBLdatabaseModified.svg) !important;
}
.TBLexport{
   /* margin: 12px 4px; */
	margin-right: 8px;
   /* float: right; */
}

.TEMPLATEtemplateCardMenuWait {
	background-image: url(../TRANS/images/spinner.gif);
	opacity: 0.5;
	/* Standard style for transparency */
	filter: alpha(opacity=5);
	/* For IE */
	height: 16px;
	width: 16px;
}

.TEMPLATEcardLoading {
	background-image: url(../TRANS/images/spinner.gif);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 24px;
	opacity: 0.5;
	/* Standard style for transparency */
	filter: alpha(opacity=5);
	/* For IE */
	height: 100%;
	width: 100%;
}

.TEMPLATEtemplateIssue {
	display: none;
	white-space: pre-wrap;
	text-align: left;
	background: var(--red-lighter);
	border: 1px solid var(--red-light);
	border-radius: var(--border-radius);
	padding: 16px;
	margin-top: 16px;
}

.TEMPLATEcatalogueModalContainer {
	height: calc(100% - 125px)
}

.TEMPLATEcatalogueModalLayout {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: var(--grey-800);
}

.TEMPLATEtemplateCollectionBrowse {
	font-size: 12px;
	font-weight: var(--semibold);
	margin-bottom: 8px;
	color: var(--grey-700);
	margin-top: 24px;
}


.TEMPLATEcomponentLibrary .FORMselectBox {
	max-width: 320px;
}

.TEMPLATEcollectionGitLocation {
	font-size: 11px;
	color: var(--grey-600);
	margin-top: 16px;
	font-weight: var(--semibold);
}

.TEMPLATEcollectionGitLocation a {
	color: var(--grey-600);
	font-weight: var(--regular);
	text-decoration: none;
}

.TEMPLATEcollectionGitLocation a:hover {
	color: var(--blue);
	text-decoration: underline;
}

.TEMPLATEcreateComponentButton {
	flex-grow: 1;
	justify-content: right;
	align-items: flex-end;
}

.TEMPLATEcreateHeading {
	padding-bottom: 4px;
}

.TEMPLATEtemplateDescription {
	color: var(--grey-700);
	margin-top: 16px;
	margin-bottom: 16px;
	line-height: 1.6em;
}

.TEMPLATEselectTemplateCard {
	border-radius: 8px;
	border: 1px solid var(--grey-400);
}

.TEMPLATEstepHeading {
	font-size: 14px;
	font-weight: var(--semibold);
	margin-bottom: 16px;
}

.TEMPLATEstepHeadingSubdued {
	color: var(--grey-500);
}

.TEMPLATEcreateContainer {
	flex-grow: 1;
	display: grid;
	grid-template-rows: auto 1fr;
	border: 1px solid var(--grey-400);
	border-radius: var(--border-radius);
	min-height: 0;
	overflow: hidden;
}

.TEMPLATEheaderContainer {
	/* background: var(--white);
	border-radius: 4px 4px 0px 0px;
	border: 1px solid var(--grey-300);
	padding: 24px 32px;
	text-align: center;
	display: grid;
	grid-template-columns: 1fr auto; */
	grid-column: 1/2;
	grid-row: 1/3;
	padding: 24px;
	padding-left: 48px;
}

.TEMPLATEfilterContainer {
	background: var(--grey-200);
	padding: 24px 32px;
}

.TEMPLATEfilterContainer input {
	background-image: url(../TEMPLATE/TEMPLATEiconFilter.svg);
	background-repeat: no-repeat;
	background-position: 6px center;
	padding-left: 28px;
}

.TEMPLATEcardContainer {
	background: var(--grey-200);
	overflow: auto;
}

.TEMPLATEcardContainer::-webkit-scrollbar {
	display: none;
}

.TEMPLATEcardContent {
	display: grid;
	grid-gap: 32px;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.TEMPLATEcardContent-hide {
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 32px;
	padding-top: 0px;
	padding-bottom: 0px;
	box-sizing: border-box;
}

.TEMPLATEtemplateCard-visible {
	opacity: 1;
	animation: fadein .4s cubic-bezier(0.29, 1.29, 1, 1) forwards;
}

.TEMPLATEtemplateCard {
	border-radius: var(--border-radius);
	background-color: var(--white);
	border: 1px solid var(--grey-400);
	height: 142px;
	text-align: left;
	opacity: 0;
	cursor: pointer;
	display: inline-block;
	overflow: visible;
	padding: 20px;
	box-sizing: border-box;
	display: grid;
	grid-template-rows: auto 1fr;
}

.TEMPLATEtemplateCard:hover,
.TEMPLATEtemplateCardSelected {
	background-color: #F8FCFE;
	border: 1px solid var(--blue);
	box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
}

.TEMPLATEtemplateCard:hover div,
.TEMPLATEtemplateCardSelected div {
	color: var(--blue);
}

.TEMPLATEtemplateCardHeader {
	display: flex;
	justify-content: space-between;
}

.TEMPLATEtemplateCardName {
	display: block;
	font-weight: bold;
	font-size: 12px;
	margin-bottom: 12px;
	word-wrap: break-word;
	color: var(--grey-800);
}

.TEMPLATEtemplateCardDesc {
	overflow: auto;
}

.TEMPLATEtemplateCardDesc {
	--scrollbarBG: #FFFFFF;
	--thumbBG: #D2DDE8;
	scrollbar-width: thin;
	scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}

.TEMPLATEtemplateCardDesc::-webkit-scrollbar {
	width: 16px;
	height: 16px;
}

.TEMPLATEtemplateCardDesc::-webkit-scrollbar-track {
	background: var(--scrollbarBG);
}

.TEMPLATEtemplateCardDesc::-webkit-scrollbar-thumb {
	background-color: var(--thumbBG);
	border-radius: 8px;
	border: 5px solid var(--scrollbarBG);
}

.TEMPLATEtemplateCard span {
	font-size: 11px;
	line-height: 1.6em;
	word-wrap: break-word;
	white-space: pre-wrap;
	color: var(--grey-600);
	box-decoration-break: clone;
}
.TEMPLATEcreateComponentButton {
	justify-content: flex-end;
	margin-top: 24px;
}

.TEMPLATEcreateHeading {
	padding-bottom: 4px;
}

.TEMPLATEcreateLabel {
	height: 6em;
	display: block;
	border-radius: var(--border-radius);
	border: 1px solid var(--grey-400);
	background-color: var(--white);
	font-weight: var(--regular);
	font-size: 12px;
	line-height: 16px;
	padding: 6px 8px;
	color: var(--grey-800);
	width: 100%;
	box-sizing: border-box;
	font-family: var(--font-sans);
	resize: none;
}

.TEMPLATEcreateLabel::placeholder {
	color: var(--grey-400);
}

.TEMPLATEcreateComponentDialogueWait {
	display: none;
}

.TEMPLATEwaitMessage {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--grey-600);
	margin-bottom: 24px;
}

.TEMPLATEwaitMessage img {
	width: 24px;
	height: 24px;
	margin-bottom: 16px;
}

.TEMPLATEcreateNewRepoHref {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: baseline;
	color: var(--grey-600);
}

.TEMPLATEgitTooltip {
	width: 120px;
	margin-top: 8px;
}

.TEMPLATEgitTooltip a {
	font-size: 11px;
	color: var(--grey-700);
	text-decoration: none;
	display: block;
	border-radius: 2px;
	margin: 2px -4px;
	padding: 1px 4px;
}

.TEMPLATEgitTooltip a:hover {
	color: var(--blue-dark);
	background: rgba(var(---blue-lighter), 0.5);
}

/* Styling for Wizard "Steps" circles */
.TEMPLATEsteps {
	padding: 0;
	margin-bottom: 24px;
	display: flex;
	justify-content: center;
	font-family: var(--font-buttons);
}

.TEMPLATEstep:first-of-type .TEMPLATEstep-circle::before {
	display: none;
}

.TEMPLATEstep:last-of-type .TEMPLATEstep-content {
	padding-right: 0;
}

.TEMPLATEstep-content {
	display: flex;
	align-items: center;
	flex-direction: column;
	width: 150px;
}

.TEMPLATEstep-circle {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 20px;
	height: 20px;
	color: var(--grey-400);
	font-weight: var(--semibold);
	border: 1px solid var(--grey-400);
	border-radius: 100%;
	background-color: var(--white);
}

.TEMPLATEstep-circle::before {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 0px;
	width: calc(150px - 20px);
	height: 1px;
	transform: translate(-100%, -50%);
	color: #adb5bd;
	background-color: currentColor;
}

.TEMPLATEstep-text {
	color: var(--grey-400);
	word-break: break-all;
	margin-top: 4px;
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.02em;
}

.TEMPLATEstep-active .TEMPLATEstep-circle {
	color: var(--blue);
	background-color: var(--blue-lighter);
	border-color: var(--blue);
}

.TEMPLATEstep-active .TEMPLATEstep-circle::before {
	color: var(--blue);
}

.TEMPLATEstep-active .TEMPLATEstep-text {
	color: var(--blue);
}

.TEMPLATEstep-success .TEMPLATEstep-circle {
	color: var(--grey-700);
	background-color: var(--grey-200);
	border-color: var(--grey-700);
}

.TEMPLATEstep-success .TEMPLATEstep-circle::before {
	color: var(--grey-700);
}

.TEMPLATEstep-success .TEMPLATEstep-text {
	color: var(--grey-700);
}

.TEMPLATEcreateComponentButtons {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: end;
	margin-right: 0;
	margin-left: auto;
}

.TEMPLATEcatalogueNextBtn {
	margin-right: 0px !important;
}

.TEMPLATEcreateComponentDetailsLayout {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.TEMPLATEconfigureComponent {
	box-sizing: border-box;
	border: 1px solid var(--grey-400);
	padding: 24px;
	border-radius: var(--border-radius);
	background: var(--grey-100);
	box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
	align-self: center;
	width: 100%;
	max-width: 600px;
	overflow: auto;
}

.TEMPLATEcollectionSelect {
	min-width: 120px;
}

.TEMPLATEsearchTemplates {
	min-width: 120px;
}

.TEMPLATElocalRepoOnly {
	background: var(--red-lighter);
	border: 1px solid var(--red-light);
	border-radius: var(--border-radius);
	padding: 16px;
	margin-bottom: 24px;
}

/* ****** */
.TEMPLATEprogressToDo {
	color: var(--grey-400);
}

.TEMPLATEprogressWorking {
	display: grid;
	grid-template-columns: 32px 1fr;
	align-items: top;
	margin-bottom: 12px;
	color: var(--grey-600);
}

.TEMPLATEprogressDone {
	color: var(--grey-800);
}

.TEMPLATEprogressDone .TEMPLATEiconSuccess {
	display: block;
}

.TEMPLATEprogressError {
	color: var(--grey-800);
}

.TEMPLATEprogressError .TEMPLATEiconError {
	display: block;
}

.TEMPLATEprogressIssue {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	color: var(--red-dark);
	white-space: pre-wrap;
}

.TEMPLATEprogressDoneMessage {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	color: var(--green-dark);
}

.TEMPLATEprogressDoneMessage a {
	color: var(--blue);
}

.TEMPLATEcardSummary {
	border-radius: var(--border-radius);
	background-color: var(--grey-100);
	border: 1px solid var(--grey-400);
	box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
	padding: 24px;
	box-sizing: border-box;
	width: 100%;
	max-width: 600px;
	align-self: center;
	min-height: 0;
	overflow: auto;
	color: var(--grey-700);
}

.TEMPLATEgitLocation {
	color: var(--grey-600);
	font-size: 11px;
	border-top: 1px solid var(--grey-400);
	padding-top: 16px;
}

.TEMPLATEcreationProgress {
	width: 100%;
	align-self: center;
	max-width: 600px;
	padding: 24px;
	box-sizing: border-box;
}

.TEMPLATEcreationProgressHeading {
	margin-bottom: 32px;
	color: var(--grey-800);
	font-weight: var(--semibold);
}

.TEMPLATEprogress>div {
	display: grid;
	grid-template-columns: 32px 1fr;
	align-items: top;
	margin-bottom: 12px;
}


.TEMPLATEprogressSteps>div {
	display: grid;
	grid-template-columns: 32px 1fr;
	align-items: top;
	margin-bottom: 12px;
}

.TEMPLATEiconSuccess,
.TEMPLATEiconError {
	height: 20px;
	width: 20px;
	margin-right: 4px;
	margin-top: -2px;
	display: none;
}

.TEMPLATEinfoBox {
	align-self: center;
	box-sizing: border-box;
	background: var(--blue-lighter);
	border-radius: var(--border-radius);
	padding: 16px;
	line-height: 1.5em;
	width: 100%;
	max-width: 600px;
	margin-top: 24px;
}

.TEMPLATEaddComponentModal {
	width: 400px;
}

.TEMPLATEaddComponentModalContents {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.TEMPLATEopenCatalogue,
.TEMPLATEimportUrl {
	display: inline-block;
	background-color: var(--grey-100);
	padding: 16px 16px;
	font-size: 11px;
	border: 1px solid var(--grey-400);
	border-radius: var(--border-radius);
	color: var(--grey-600);
	text-align: center;
	box-sizing: border-box;
	width: 100%;
	cursor: default;
}

.TEMPLATEopenCatalogue:hover,
.TEMPLATEimportUrl:hover {
	background-color: rgba(var(---blue-lighter), 0.5);
	border: 1px solid var(--blue);
	cursor: default;
}


.TEMPLATEimportUrlModal {
	max-width: 500px;
}

.TEMPLATEimportExistingBtn {
	margin-top: 16px;
}

.TEMPLATEsidebar {
	padding: 24px;
	padding-left: 48px;
}

.TEMPLATEsidebarHeader {
	font-family: var(--font-buttons);
	font-weight: 500;
	color: var(--grey-600);
	letter-spacing: 0.02em;
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: -32px;
}

.TEMPLATEcloneExistingMain {
	display: grid;
	grid-template-columns: minmax(auto, 320px) 1fr;
	grid-template-rows: auto 1fr;
	border: 1px solid var(--grey-400);
	border-radius: var(--border-radius);
}

.TEMPLATEcloneUrl {
	background: var(--grey-200);
	padding: 24px 32px;
}

.TEMPLATEor {
	font-family: var(--font-buttons);
	margin: 16px auto;
	font-weight: 600;
	font-size: 11px;
	color: var(--grey-600);
}

.TEMPLATEaddComponentPopout {
	transform: none;
}

.TEMPLATEtabs {
	display: block;
	border-bottom: 1px solid var(--grey-400);
	margin-bottom: 24px;
}

.TEMPLATEoption {
	display: inline-block;
	font-weight: 600;
	color: var(--grey-600);
	padding: 6px 0px;
	margin-left: 24px;
	margin-bottom: -1px;
	border-bottom: 1px solid transparent;
}

.TEMPLATEoption:hover {
	color: var(--grey-800);
	cursor: pointer;
}

.TEMPLATEoption-selected:hover,
.TEMPLATEoption-selected {
	color: var(--blue);
	border-bottom: 3px solid var(--blue);
}



.TEMPLATEconfigureContainer {
	border: 1px solid var(--grey-400);
	border-radius: var(--border-radius);
	display: grid;
	grid-template-columns: 2fr 3fr;
	overflow: hidden;
	flex-grow: 1;
	/* grid-template-rows: auto 1fr; */
}

.TEMPLATEconfigureSidebar {
	background: var(--white);
	padding: 32px 40px;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

.TEMPLATEbaseTemplate {
	border-radius: var(--border-radius);
	background-color: var(--grey-100);
	border: 1px solid var(--grey-300);
	padding: 24px;
	margin-bottom: 32px;
	box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
	/* box-sizing: border-box;
	display: grid;
	grid-template-rows: auto 1fr; */
}

.TEMPLATEbaseTemplate .TEMPLATEtemplateCardName {
	margin-bottom: 16px;
	color: var(--grey-700);
}

.TEMPLATEbaseTemplate .FORMlabel {
	font-size: 11px;
	margin-bottom: 2px;
	color: var(--grey-700);
}

.TEMPLATEbaseTemplate .LIBlabelHtml {
	font-size: 11px;
	line-height: 1.6em;
	/* word-wrap: break-word;
	white-space: pre-wrap; */
	color: var(--grey-600);
	margin-bottom: 16px;
}

.TEMPLATEbaseTemplate .LIBgitLocation {
	overflow-wrap: break-word;
}

.TEMPLATEbaseTemplate .LIBgitLocation a {
	font-size: 11px;
	color: var(--grey-600);
}

.TEMPLATEcloneOptions {
	flex-shrink: 0;
}

.TEMPLATEconfigureMain {
	background: var(--grey-200);
	padding: 32px 40px;
	overflow-y: auto;
}

.TEMPLATEconfigureMainHeader {
	font-family: var(--font-buttons);
	font-weight: 500;
	color: var(--grey-600);
	letter-spacing: 0.02em;
	margin-bottom: 24px;
}

.TEMPLATEuseCloneButtons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.TEMPLATEuseCloneButtons input[type="radio"] {
	opacity: 0;
	position: fixed;
	width: 0;
}

.TEMPLATEuseCloneButtons label {
	display: inline-block;
	background-color: var(--grey-100);
	padding: 8px 8px;
	font-size: 11px;
	border: 1px solid var(--grey-400);
	border-radius: var(--border-radius);
	color: var(--grey-600);
	text-align: center;
}

.TEMPLATEuseCloneButtons label:hover {
	background-color: rgba(var(---blue-lighter), 0.5);
	border: 1px solid var(--blue);
}

.TEMPLATEuseCloneButtons input[type="radio"]:checked+label {
	background-color: var(--blue-lighter);
	border-color: var(--blue);
	color: var(--blue-dark);
}

.TEMPLATEuseCloneButtons input[type="radio"]:disabled+label {
	opacity: 20%;
}

.TEMPLATEoptionDescription {
	padding-top: 14px;
	font-size: 11px;
	color: var(--grey-600);
	line-height: 1.5em;
}
.TEMPLATEcollectionDiv{
	display: grid;
	grid-template-columns: 1fr 1fr;	
}
.TEMPLATErepoLinkHrefDiv{
	display: grid;
	grid-template-columns: 1fr 40px;	
}
.TEMPLATErepoLinkHrefDivRev{
	display: grid;
	grid-template-columns: 16px 1fr;	
}
.TEMPLATEnameDescriptionDiv{
	/* border: 1px solid var(--grey-400);
	border-radius: var(--border-radius);
	padding: 24px 32px;
	background: var(--grey-200); */
}
.TEMPLATEtitleDiv{
	display: grid;
	grid-template-columns: 100px 1fr;
}
.TEMPATEselectTemplateHeader{
	font-family: var(--font-buttons);
	color: var(--grey-500);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.05em;
}
.TGITterm{
  overflow: auto;
  height: calc(100% - 16px);
  padding: 8px;
  background-color: #222222;
}
.TERMterminal {
  color: white;
  background-color: #222222;
  font-family: "Inconsolata", "Courier New", Courier, monospace;
  font-weight: bold;
  overflow: hidden;
  padding: 12px;
  padding-top: 8px;
}

.TERMterminal .TERMcontainer {
  width: 100%;
  height: 100%;
  /* overflow-y: scroll; */
}
.TERMterminal .TERMcontainer ::selection {
  background-color: #2690cd;
  text-shadow: none !important;
}

.TERMterminal output {
  clear: both;
  line-height: 1.25em;
  width: 100%;
}
.TERMterminal output pre {
  margin: 0;
}
.TERMterminal output span {
  display: block;
  font-weight: normal;
  color: #dddddd;
}

.TERMterminal .TERMprompt, .TERMterminal a {
  color: #2690cd;
  font-weight: bold;
}

.TERMterminal .TERMprompt {
  line-height: 1.25em;
  margin-right: 0.5em;
}

.TERMterminal .TERMcommand {
  display: flex;
}

.TERMpreserveWhitespace {
  white-space: pre;
}

.TERMterminal .TERMcommand.input .TERMprompt {
  color: white;
  font-weight: normal;
}

.TERMterminal .TERMcommand.idle .input {
  display: none;
}

.TERMterminal .TERMcommand.hidden .TERMprompt {
  display: none;
}

.TERMterminal .TERMcommand.hidden .input {
  max-width: 1px;
}

.TERMterminal .TERMcommand .input {
  background-color: transparent;
  border: none;
  color: inherit;
  font: inherit;
  flex: 1;
  margin: 0;
  outline: none;
  padding: 0;
}

.TERMterminal .TERMcommand .spinner:before {
  display: inline-block;
  content: '⠋';
  animation: spin 1s linear infinite;
  vertical-align: middle;
  margin-right: 10px;
}

.TERMlabel {
  color: #2690cd;
  font-weight: bold;
}

@keyframes spin {
  0% { content: '⠋' }
  10% { content: '⠙' }
  20% { content: '⠹' }
  30% { content: '⠸' }
  40% { content: '⠼' }
  50% { content: '⠴' }
  60% { content: '⠦' }
  70% { content: '⠧' }
  80% { content: '⠇' }
  90% { content: '⠏' }
}
.TGITgitWindow {
	overflow: hidden;
	transform: none;
	width: 95%;
	height: 95%;
	left: 2.5%;
	top: 2.5%;
}

.TGITgitWindow .POPpopoutCard-content {
	height: calc(100% - 61px);
	display: grid;
	grid-template-rows: 1fr auto;
	padding: 0px;
}

/* Top section (not including the Commit Message area */
.TGITdiffView {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
   padding: 32px 32px 32px 0;

   background: var(--grey-100);
	min-height: 0;
}

/* Left pane */
.TGITselectFileToCommit {
	height: 100%;
   position: relative;
   width: 220px;
	margin-right: 16px;
	margin-left: -8px;
	overflow: auto;
	padding-left: 10px;
}

.TGITfileSelectRow {
	display: flex;
	align-items: flex-start;
	margin-bottom: 0px;
	padding: 6px 8px;
	border-radius: var(--border-radius);
	cursor: pointer;
	border: solid 2px transparent;
}

.TGITfileSelectRow:hover {
	background-color: rgba(var(---blue-light), 0.5) !important;
}

.TGITfileSelectRowSelected{
	background-color: rgba(var(---blue-light), 0.5) !important;
}
.TGITfileSelectRowSelected.TGITfileSelectRow:hover{
	background-color: rgba(var(---blue-light), 0.7) !important;
}

.TGITfileSelectRow:hover .TGITselectFile {
	color: var(--blue-dark);
}

.TGITselectFile {
	font-size: 11px;
	font-weight: 500;
	color: var(--grey-700);
	word-break: break-word;
	margin-top: 0px;
}

.TGITstatusLetter {
	padding: 0px;
	box-sizing: border-box;
	height: 12px;
	width: 14px;
	border: 1px solid var(--grey-400);
	border-radius: 2px;
	font-family: var(--font-buttons);
	font-size: 8px;
	font-weight: 600;
	flex-shrink: 0;
	align-self: flex-start;
	margin-top: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 6px;
}

.TGITstatusLetter-modified {
	background-color: var(--yellow-lighter);
	border-color: var(--yellow);
	color: rgba(var(---yellow-dark), 0.75);
}

.TGITstatusLetter-added {
	background-color: var(--green-lighter);
	border-color: var(--green-light);
	color: var(--green);
}

.TGITstatusLetter-deleted {
	background-color: var(--red-lighter);
	border-color: var(--red-light);
	color: rgba(var(---red), 0.75);
}

.TGITcommitList {
  list-style-type: none;
  padding-left: 15px;
  line-height: 2;
}

/* Right pane (main area) */
.TGITfileDiff {
	display: grid;
	height: 100%;
	grid-template-rows: 48px 1fr;
}


/* Commit message area */
.TGITcommitDiffRow {
	padding: 0px 32px 24px 32px;
	background: var(--grey-100);
}

.TGITcommitMsg {
  	margin: 10px 0 10px 0;
	height: 56px;
	resize: none;
}

.TGITcommitButtonArea, .TGITfileDiffArea {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.TGITfileDiffArea, .TGITfileRevertConfirm {
  margin-top: 10px;
  margin-left: auto;
}

.TGITnoGitChanges{
   display: grid;
   grid-template-columns: auto auto;
}


/* Splitter */
.TGITcommitTitle {
   overflow: hidden;
   text-overflow: ellipsis;   
	margin-top: 7px;
}

.TGITpane {
   position: relative;
   height: 100%;
   font-family: var(--font-monospace);
}

.TGITresizeControl {
   height: 100%;
   position: absolute;
   top: 0;
   bottom: 0;
   right: -6px;
   width: 10px;
   padding: 0;
   border: 0;
   outline: none;
   cursor: ew-resize;
   background-color: transparent;
   z-index: 5;
 }
 
.TGITresizeShadow {
   bottom: 0;
   top: 0;
   right: 4px;
	pointer-events: none;
	position: absolute;
	width: 2px;
	transition: 150ms ease-out;
}
 
.TGITresizeControl:hover .TGITresizeShadow {
	background: var(--blue);
	transition: 75ms ease-in;
}

.TGITcommitMsgFeedback,
.TGITnoRemote {
	color: var(--red);
	font-size: 11px;
}

.TGITcomment{
   color : #C0C0C0;
   font-size: 12px;
   position: relative;
   top : 7px;
   right : 13px;
}

.TGITicon-openDir-library-unlocked::before {
	content: url(/LIB/LIBiconFolderOpen.svg);
	padding-left: 10px;
	margin-right: 4px;
}

.TGITicon-openDir::before {
	content: url(/TRANS/images/project/folder-open.svg);
	margin-right: 4px;
	padding-left: 10px;
}

.TGITfullDiff {
	display: grid;
	grid-template-columns: 50% 50%;
	height: 100%;
}

.TGITdiffTank {
	position: relative;
	background-color: #FFFFFF;
	height: 100%;
	width: 100%;
	overflow: hidden;
	border: 1px solid var(--grey-300);
	border-radius: var(--border-radius);
}

.TGITdiffToolbar {
	border-bottom: 1px solid var(--grey-300);
	display: flex;
	align-items: center;
	padding: 0 16px;
	color: var(--grey-700);
	min-width: 0;
}

.TGITtoolbarFilename {
	display: inline-block;
	padding-right: 18px;
	font-size: 12px;
	font-weight: 600;
	color: var(--blue);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex-grow: 1;
}

.TGITtoolbarLines {
	display: flex;
	align-items: baseline;
	padding-left: 16px;
	padding-right: 16px;
	font-size: 10px;
	flex-shrink: 0;
}

.TGITdiffToolLabel {
	font-size: 10px;
	letter-spacing: 0.05em;
	margin-right: 7px;
	margin-left: 7px;
}

/* Flatten rules - Eliot IX-947 ? */
.TGITtoolbarLines .TGITlinesInfo {
	margin: 0 7px;
}

.TGITtoolbarLines .TGITlinesInfo .TGITlinesAdded {
	color: var(--teal);
	font-weight: 600;
}

.TGITtoolbarLines .TGITlinesInfo .TGITlinesDeleted {
	color: var(--purple);
	font-weight: 600;
}

.TGITtoolbarLines .TGITlinesInfo .TGITlinesChanged {
	color: #aaaaaa;
	font-weight: 600;
}

.TGITtoolbarDisplay {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.TGITdiff {
	position: relative;
	height: 100%;
	overflow: hidden;
}
.TGITdiff .TGITcondensedDiff {
   height: 100%;
	overflow: auto;
}

.TGITdiff .TGITdiffBlock {
  padding: 20px;
  color: var(--grey-500);
}

.TGITinsDiff {
	background-color: var(--teal-lighter);
	color: var(--grey-900) !important;
	font-weight: 600;
}

.TGITdelDiff {
	background-color: var(--purple-lighter);
	color: var(--grey-900) !important;
	font-weight: 600;
}

.TGITdivDiff {
	background-color: var(--grey-300);
	color: var(--grey-900) !important;
	font-weight: 600;
}

.TGITchangeDiff {
	background-color: var(--grey-300);
}

.TGITdumDiff {
	background-color: var(--grey-200);
}

.TGITdiffTank.TGITvrt {
   border: none;
}

.TGITdiffCling {
	height: 100%;
	overflow: auto;
}
/*************************************************/
table.TGITdiffTable,
table.TGITpreviewTable {
	background-color: var(--white);
	border-collapse: collapse;
	vertical-align: middle;
	width: 100%;
}

table.TGITdiffTable,
table.TGITpreviewTable{
	font-size: 14px;
}

table.TGITdiffTable td,
table.TGITpreviewTable td {
	font-size: 12px;
	padding: 2px 8px;
	color: var(--grey-700);
}

table.TGITdiffTable tr,
table.TGITpreviewTable tr {
	height: 17px;
}

table.TGITdiffTable td.ln,
table.TGITpreviewTable td.ln {
	text-align: right;
	background: var(--white);
	width: 1px;
	/* Narrow as possible, but will expand to hold numbers */
	border-right: 1px solid var(--grey-300);
	vertical-align: top;
	color: var(--grey-500);
	padding-right: 8px;
	padding-left: 8px;
}

table.TGITdiffTable,
table.TGITpreviewTable {
	white-space: pre;
	font-family: var(--font-monospace);
	font-size: 12px;
	padding: 0;
	margin: 0;
}

table.TGITdiffTable span.highlight {
	color: var(--grey-900);
	font-weight: 600;
}

table.TGITdiffFrom.TGITdiffTable span.highlight {
	background-color: var(--purple-light);
	border-radius: 3px;
	box-shadow: 0 1px 1px rgb(0 0 0 / 25%);
	padding: 0px 1px;
}

table.TGITdiffTo.TGITdiffTable span.highlight {
	background-color: var(--teal-light);
	border-radius: 3px;
	box-shadow: 0 1px 1px rgb(0 0 0 / 25%);
	padding: 0px 1px;
}

table.TGITdiffTable td.center,
table.TGITpreviewTable td.center {
	text-align: center;
}

table.TGITdiffTable a,
table.TGITdiffTable a {
	color: #3151A2;
}

table.TGITdiffTable img,
table.TGITpreviewTable img {
	border-style: none;
	cursor: pointer;
	padding-left: 10px;
	vertical-align: middle;
}

table.TGITdiffTable tr.odd {
	background-color: #eee;
}

.THMthemeContainer{
   display: flex;
   padding: 5.5px 12px;
   border-bottom: 2.5px solid var(--grey-300);
   height: 27px;
   cursor: pointer;
   font-size: 10px;
   font-weight: 500;
   font-family: var(--font-buttons);
   align-items: center;
   justify-content: center;
   padding-left: 0px;
}
.THMthemeContainer svg{
   fill: white !important;
   margin-right: 8px;
}
#THMdarkMode,
#THMlightMode,
#THMbrowser,
.THMradio{
   cursor: pointer;
}
.THMthemeDiv{
   display: flex;
   border-bottom: 2.5px solid var(--grey-400);    
   padding-top: 10px;
   padding-bottom: 10px;
   padding-right: 8px;
   padding-left: 8px;
   gap: 6px;
   align-items: center;
   font-size: 10px;
   font-weight: 500;
   cursor: pointer;
}
.THMthemeDiv:last-child{
   border-bottom: 0px !important;
}
.THMthemeDiv:last-child:hover{
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
}
.THMthemeDiv:first-child:hover{
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
}
.THMthemeDiv:hover{
   background-color: var(--blue-lighter) !important;
}
.THMradioContainer{
   display: flex;
   flex-flow: column;
}
.THMtooltip{
   max-width: 50% !important;
   max-height: 80% !important;
   box-sizing: border-box !important; 
   padding: 0px !important;
   /* display: block; */
}
.THMtooltip .POPtooltipRight::before,
.THMtooltip .POPtooltipRight::after{
   display: none !important;
}

.TOGswitchDiv{
   display: grid;
   grid-template-columns: auto 1fr;
   column-gap: 12px;
   margin-left: 8px;
}
.TOGgrey .TOGstatus{
   background-color: var(--grey-200);
}
.TOGgreen .TOGstatus{
   background-color: var(--green);
}
.TOGyellow .TOGstatus{
   background-color: var(--yellow);
}
.TOGred .TOGstatus{
   background-color: var(--red);
}
.TOGstatus{
   margin-top: 2px;
   height: 14px;
   width: 14px;
}
.TOGstatus{
	border-radius: var(--border-radius);
   border: 1px solid var(--grey-400);
}
.TOGbutton{
   border: 1px solid var(--grey-300);
   height: 19px;
   width: 58px !important;
}

.TOGtoggle {
   position: relative;
   top: 0px;
   left: 0px;
   width: 32px;
   height: 16px;
   border-radius: 100px;
   background-color: var(--grey-400);
   overflow: hidden;
}
.TOGtoggle:first-child {
   margin-top: 0px;
}
.TOGtoggle--float-left {
   float: left;
   margin-right: 24px;
}
.TOGcheck {
   position: absolute;
   display: block;
   cursor: pointer;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
   z-index: 6;
}
.TOGcheck:checked ~ .TOGtrack {
   background-color: var(--blue);
}
.TOGcheck:checked ~ .TOGswitch {
   right: 2px;
   left: 18px;
   transition: .35s cubic-bezier(0.785, 0.135, 0.150, 0.860);
   transition-property: left, right;
   transition-delay: .05s, 0s;
}
.TOGswitch {
   display: block;
   position: absolute;
   left: 2px;
   top: 2px;
   bottom: 2px;
   right: 18px;
   background-color: var(--white);
   border-radius: 100px;
   z-index: 1;
   transition: .35s cubic-bezier(0.785, 0.135, 0.150, 0.860);
   transition-property: left, right;
   transition-delay: 0s, .05s;
}
.TOGtrack {
   display: block;
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   transition: .35s cubic-bezier(0.785, 0.135, 0.150, 0.860);
   border-radius: 100px;
}

.TPEbuttonsRow{
   display: grid;
	grid-template-columns: auto auto auto;
	justify-content: end;
	margin-top: 36px;
	margin-left: auto;
}   

.TPEpublicKey {
	display: block;
	border-radius: var(--border-radius);
	border: 1px solid var(--grey-400);
	background-color: var(--white);
	font-weight: var(--regular);
	font-size: 12px;
   height: 8em;
	padding: 6px 8px;
	color: var(--grey-800);
	width: 100%;
	box-sizing: border-box;
	font-family: var(--font-sans);
	resize: none;
	margin-top: 12px;
}

.TPEpublicKey::placeholder {
	color: var(--grey-400);
}

.TPEstatusRow{
	display: grid;
	grid-template-columns: 60px auto;
	row-gap: 12px;
}

.TRANSgitDiffContainer{
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   padding: 32px;
   background: var(--grey-100);
   min-height: 0;
}
.TRNhashWarningButtonContainer {
   display: grid;
   grid-template-columns: 1fr 1fr;
	background: var(--white);
   border: 1px solid var(--grey-400);
	border-top: none;
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
	padding-right: 16px; /* Accomodate for scrollbar */
}

.TRNhashWarningButtonContainer > div {
   display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.TRNhashWarningButtonContainer > div:first-child {
   border-right: 1px solid var(--grey-400);
}

.TRNhashUseEditor,
.TRNhashUseDisk {
   width: 100%;
	height: 40px;
	border: 1px solid var(--grey-400);
	background-color: var(--grey-100);
	color: var(--grey-600);
}

.TRNhashUseEditor:hover ,
.TRNhashUseDisk:hover {
	background-color: var(--blue-lighter);
	border-color: var(--blue);
	color: var(--blue-dark);
}
.TRANShide{
   visibility: hidden !important;
}

/*Git history splitter*/
.TRANSgitHistorySplitter {
   width: 200px;
   display: flex;
   flex-direction: column;
   position: relative;
   border-right: 1px solid var(--grey-400);
	background-color: var(--grey-100);
}
.TRANSresizeControl{
   right: -6px;
   top: 0px;
   bottom: 0px;
   width: 10px;
   padding: 0px;
   border: 0px;
   position: absolute;
   outline: none;
   cursor: ew-resize;
   background-color: transparent;
   z-index: 11;
}
.SPLTcollapse .TRANSresizeControl{
   z-index: initial;
}
.TRANSresizeShadow {
	bottom: 0px;
	top: 0px;
	right: 4px;
	pointer-events: none;
	position: absolute;
	width: 2px;
	transition: 150ms ease-out;
}
.TRANSresizeControl:hover .TRANSresizeShadow{
   background: var(--blue);
   /* box-shadow: 3px 0px 10px rgba(0,0,0,0.5); */
   transition: 75ms ease-in;
}
.TRANSresizeControl     .TRANSresizeIcon,
.DASHgitHistorySplitter .TRANSresizeIcon {
	fill: currentColor;
}
.TRANSresizeControl:hover      .TRANSresizeButton,
.TRANSgitHistorySplitter:hover .TRANSresizeButton {
	opacity: 1;
	transition: 150ms ease-in;
}
.SPLTcollapse .TRANSresizeControl{
   cursor: default;
}
.TRANSheader * {
   font-family: var(--font-buttons);
   color: var(--grey-600);
   font-size: 16px;
   font-weight: 500;
   height: 66px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 12px;
   padding-left: 24px;
   padding-right: 24px;
   user-select: none;
   border-bottom: 1px solid var(--grey-400);
   box-sizing: border-box;
}
.SPLTcollapse.TRANSgitHistorySplitter{
   width: 0px !important;
   border-right: 0px solid var(--grey-40) !important;
}
.SPLTcollapse .TRANSresizeShadow{
   display: none;
}
.SPLTcollapse .TRANSheaderText{
   border-bottom: unset;
}
.SPLTcollapse .TRANSgitHistoryTarget{
   display: none;
}
.TRANSgitHistoryTargetScroller{
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
   position: relative;
}
.TRANSgitHistoryTarget{
   overflow: hidden;
   flex-grow: 1;
   height: 0;
}
.TRANSgitHistorySplitter .COMcommitRow{
   line-height: 17px !important;
}
.TRANScommitListFade{
   background: var(--grey-100);
   padding: 26.5px;
   opacity: 75%;
   position: sticky;
   bottom: 0;
}
#TRANSeditorDiv .CodeMirror{
   right: 0px;
}

.TRANSwarningDiv{
   color: var(--grey-800);
   padding-top: 8px;
   padding: 12px;
}
div.annav iframe {
   z-index: 1;
   top: -20px;
   height: 20px;
   left: 4px;
}
span.pv{
   background-image: none;
   background-repeat: no-repeat;
   background-position: top left;
   cursor: pointer;
}
span.pv.waiting{
   background-image: url(/TRANS/images/spinner.gif);
   opacity: 0.5;             /* Standard style for transparency */
   filter: alpha(opacity=5); /* For IE */
}
span.lt{
 /* color: #c92c2c;  same as lua string */
   color: #139493;
}
span.el{ /* elipsis */
   color: #666;
}
span.st{
   color: #c92c2c; /* same as lua string */
}
span.nm{
 /* color: #3A3; same as lua number */
   color: var(--orange-dark);
}
span.lc{
   color: #AE7676; /* lua comment */
   font-style: italic;
}
span.kw{
   color: blue; /* same as lua keyword */
}
a.fc{
   color: #A000A0;
}
a.fc, a.fr{
   text-decoration: none;
}
a.fc:hover, a.fr:hover{
   color: #C45AEC;
}
a.fc div, a.fr div{
   display: none;
}
a.fc img, a.fr img{
   position: absolute;
   display: none;
}
span.ufc{ /* untraced function calls */
   cursor: help;
}

.ntv{
   background-repeat: no-repeat;
   background-position: center left;
   padding-left: 20px;
   padding-top: 1px;
   padding-bottom: 1px;
}
.ntv.waiting{
   background-image: url(/TRANS/images/spinner.gif);
}
.ntv.error{
   background-image: url(/TRANS/images/icon_error.gif);
   background-position: 2px;
   color:#433F38;
}
.ntv.help{
   background-image: url('/TRANS/images/icon_help.gif');
}
.ntv.error_stack{
   background-image: url('/TRANS/images/error_call_stack.png');
}
a.el, a.el:visited{
   color: #c92c2c;
}
.TRANSgotData{
   color: #2f9c0a !important; /* green */
}
/* String popup/dock display */
div.view_options{
   position: absolute;
   left: 0px;
   top: 3px;
   bottom: 0px;
   font-size: 11px;
}
div.view_options div.view_options_title{
   color: #888888;
   padding: 4px;
   padding-left: 8px;
}
div.view_options a{
   text-decoration: none;
   color: black;
   display: block;
   padding: 0 0 2px 23px;
}
div.view_options a.selected{
   background: transparent url(/TRANS/images/checkmark.gif) no-repeat 8px 2px;
}
div.view_options a.waiting{
   background: transparent url(/TRANS/images/spinner.gif) no-repeat 5px 0px;
}
div.view_options a:hover{
   text-decoration: none;
   color: #215FA3;
}
div.string_slider{
   position: absolute;
   left: 110px;
   right: 0px;
   top: 0px;
   bottom: 0px;
   z-index: 1;
}
#WNDdockBottom div.string_slider,
#WNDdockRight div.string_slider{
   bottom: 33px !important;
}
div.content{
   left: 0px;
   right: 0px;
   top: 0px;
   bottom: 0px;
   padding: 7px;
   overflow: auto;
   white-space: pre;
   font-family: Monospace,Verdana,Arial,Helvetica,Geneva,Lucida,sans-serif;
   height:100%;
	box-sizing: border-box;
}
table.Basic {
   border-collapse: collapse;
   border-spacing: 0;
   font-size: 11px;
   empty-cells: show;
   border: solid #ccc 1px;
   border-radius: 5px;
}
table.Basic td, table.Basic th {
   border-left: 1px solid #ccc;
   border-top: 1px solid #ccc;
   padding: 8px 12px;
   text-align: left;
}
table.Basic th {
   background-color: #CFCFCF;
   background-image:         linear-gradient(top, #E5E5E5, #CFCFCF);
   box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
   border-top: none;
   color: #6C6C6C;
   font-size: 10px;
   text-shadow: 0 1px #DDDDDD;
   font-weight: bold;
   letter-spacing: 0.05em;
}
table.Basic td:first-child, table.Basic th:first-child {
   border-left: none;
}
table.Basic th:first-child {
   border-radius: 5px 0 0 0;
}
table.Basic th:last-child {
   border-radius: 0 5px 0 0;
}
table.Basic th:only-child{
   border-radius: 5px 5px 0 0;
}
table.Basic tr:last-child td:first-child {
   border-radius: 0 0 0 5px;
}
table.Basic tr:last-child td:last-child {
   border-radius: 0 0 5px 0;
}
table.Basic tr {
   background: #F2F2F2;
}
table.Basic tr:nth-child(2n) {
   background: none repeat scroll 0 0 #FCFCFC;
}

div.string_slider div.content{
   left: 15px;
   margin-left: 20px;
   padding: 0px;
   /* padding-top: 8px; */
}
div.content{
   height: calc(100% - 28px);
}
.WNDdockContent div.string_slider div.content{
   height: 100%;

}
div.string_slider a.slide_arrow{
   position: absolute;
   width: 14px;
   background: transparent url(/TRANS/images/arrow-contractable.gif) no-repeat center center;
   left: 0px;
   top: 0px;
   bottom: 0px;
   border-right: 1px solid #BBBBBB;
   border-left: 1px solid #DDDDDD;
}
div.string_slider.expanded a.slide_arrow{
   border-left: none;
   background-image: url(/TRANS/images/arrow-expandable.gif);
}
div.content span.line_cropped_warning {
   color: #333;
   font-style: italic;
   background-color: #DDDED6;
   line-height: 0px;
}
div.content div.chunk.empty {
   background: transparent url(/TRANS/images/spinner.gif) repeat-y top left;
}
div.content div.chunk.error {
   color: #8E2525;
   background-color: #F6CECE;
}
/* Hex view styles */
span.ho    { background-color:#eeefea }
span.he    { background-color:#e0e1dd }
font.hst   { background-color:#9be0be }
font.hctrl { background-color:#93b2dc }
font.hnasc { background-color:#ccf2a7 }
span.ho, span.he {
   display: inline-block;
   width: 100%;
}

div.NIScontrolBlock {
   background-color: var(--grey-100);
   border: 1px solid var(--grey-300);
	top: -1px;
	height: 16px;
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	box-sizing: border-box;
	padding: 0px 4px;
	font-size: 10px;
	line-height: 0px;
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: center;
   margin-right: 8px;
}
div.NIScontrolBlock span {
	display: flex;
	flex-wrap: nowrap;
}

.TRANSinner *, 
.TRANSinner{
	font-family: var(--font-sans) !important;
	font-size: 9px;
	cursor: pointer;
	align-items: center;
	color: var(--grey-600);
}

.TRANSinner{
	margin: 0 4px;
   white-space: pre;
}

.NISgotoDiv {
   position: absolute;
   height: 24px;
   top: -30px;
   left: -1px;
   border: 1px solid var(--grey-300);
   background-color: var(--grey-100);
   font-size: 10px;
   margin: 0px;
   padding: 0px;
   display: flex !important;
   align-items: center;
   box-shadow: 0 2px 3px rgb(0 0 0 / 10%);
   border-radius: var(--border-radius);
   color: var(--grey-600);
}
.NISgotoDivText{
   vertical-align: middle;
   display: inline-block;
   padding: 0px 3px 0px 6px;
   font-family: var(--font-sans);
}
.NISgotoInput{
   box-sizing: border-box;
   width: 24px;
   height: 18px;
   font-size: 10px;
   font-family: var(--font-sans);
   border: 1px solid var(--grey-400);
   border-radius: 3px;
   margin-left: 2px;
}
.NISgotoGoButton{
   font-family: var(--font-buttons);
   font-size: 8px;
   font-weight: var(--semibold);
   height: 18px;
   background: var(--grey-300);
   padding: 0 6px;
   margin-left: 6px;
   margin-right: 6px;
   display: flex !important;
   align-items: center;
   border-radius: 3px;
}
.NISgotoGoButton:hover{
   background-color: var(--grey-400);
}
.NISgotoGoButton:active{
   background-color: var(--grey-500);
}
/* TODO - understand how this gets injected */
.cm-s-ifware span.cm-delim {color: #c508c5;}
.cm-s-ifware span.cm-keyword {color: var(--blue); font-weight: 600;}
.cm-s-ifware span.cm-atom {color: #219;}
.cm-s-ifware span.cm-number {color: var(--green); font-weight: 600;}
.cm-s-ifware span.cm-def {color: #00f;}
.cm-s-ifware span.cm-variable {color: var(--grey-700);}
.cm-s-ifware span.cm-variable-2 {color: #05a;}
.cm-s-ifware span.cm-variable-3 {color: #0a5;}
.cm-s-ifware span.cm-property {color: black;}
.cm-s-ifware span.cm-operator {color: black;}
.cm-s-ifware span.cm-comment {color: #C5980D; font-style: italic;}
.cm-s-ifware span.cm-string {color: #A626A4;}
.cm-s-ifware span.cm-string-2 {color: #f50;}
.cm-s-ifware span.cm-meta {color: #555;}
.cm-s-ifware span.cm-error {color: #f00;}
.cm-s-ifware span.cm-qualifier {color: #555;}
.cm-s-ifware span.cm-builtin {color: #139493;}
.cm-s-ifware span.cm-bracket {color: #cc7;}
.cm-s-ifware span.cm-tag {color: #170;}
.cm-s-ifware span.cm-attribute {color: #00c;}
.cm-s-ifware div.CodeMirror-selected {background: #B3D7FF;}

/* Force jQuery dialog to not show it's scrollbars in the Sample Data Editor
 * floating dialog */
.editor-wrapper .ui-dialog-content { overflow: hidden !important; }

.CodeMirror-gutters {
    border-right: none;
    background-color: #FFF;
}

.TRANSreadOnlyClass .CodeMirror-gutters {
	background-color: var(--grey-200) !important;
}

.CodeMirror *{
	font-family:  var(--font-monospace);
}

div.CodeMirror-scroll {
    margin-bottom: 0px;
    margin-right: 0px;
	 padding-bottom: 0px;
	 overflow-x: hidden !important; /* remove the horizontal scrollbar from the line numbers column */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.CodeMirror-scroll::-webkit-scrollbar {
	display: none;
 }

 /* Hide scrollbar for IE, Edge and Firefox */
 .CodeMirror-scroll {
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
 }

.CodeMirror-gutter.dirty {
	background: none; /* erase the yellow bit that shows at the bottom of the editor next to the line numbers */
}

/* This is used to artificially increase the width of the annotation blocks, so that there is still some right padding when you scroll all the way to the right. */
.ANNblock::after {
	content: " ";
	position: absolute;
	right: -24px;
	display: block;
}

.CodeMirror-vscrollbar{
    --scrollbarBG: #FFFFFF;
    --thumbBG: #D2DDE8;
    scrollbar-width: thin;
    scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
.CodeMirror-hscrollbar {
    --scrollbarBG: #FFFFFF;
    --thumbBG: #D2DDE8;
    scrollbar-width: thin;
    scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
.CodeMirror-vscrollbar::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}
.CodeMirror-hscrollbar::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}
.CodeMirror-vscrollbar::-webkit-scrollbar-track {
    background: var(--scrollbarBG);
}
.CodeMirror-hscrollbar::-webkit-scrollbar-track {
    background: var(--scrollbarBG);
}
.CodeMirror-vscrollbar::-webkit-scrollbar-thumb {
    background-color: var(--thumbBG) ;
    border-radius: 8px;
    border: 5px solid var(--scrollbarBG);
}
.CodeMirror-hscrollbar::-webkit-scrollbar-thumb {
    background-color: var(--thumbBG) ;
    border-radius: 8px;
    border: 5px solid var(--scrollbarBG);
}

.editor-wrapper .CodeMirror {
   border: 1px solid #D4CCB0;
   background-color: #fff;
}

.control-wrapper {
   /* padding: 10px 0 0 13px; */
}

.control-wrapper > label {
   white-space: nowrap;
}

.editor-wrapper .CodeMirror-lines {
   line-height: 18px;
}

.sde-titlebar {
   cursor: move;
   height: 30px;
   background-color: #C2C2C2;
   border-top:   1px solid #A9A9A9;
   border-right: 1px solid #A9A9A9;
   border-left:  1px solid #A9A9A9;
}

.sde-token {
   min-width: 18px;
   padding: 1px 5px;
   line-height: 16px;
   font-weight: bold;
   text-align: center;
   margin: 0px 2px;
   visibility: visible;
   border-radius: 3px;
   font-size: 0.7em;
}


.hex-code {
   background-color: #fffbb6;
   color: #eea20e;
   border: 1px solid #d7c954;
}

.CR {
   background-color: #cceafb;
   color: #1b6d8c;
   border: 1px solid #88b7e3;
}

.LF {
   background-color: #e2f2be;
   color: #4ca449;
   border: 1px solid #a8ca5c;
}

.CRLF {
   background-color: #cbf3ec;
   color: #1aa198;
   border: 1px solid #83d9c9;
}

#insert-hex input {
}

.control {
   margin-right: 12px;
}

.editor-wrapper {
}

.editor-container select, .editor-container button {
   margin: 0 4px;
   height: 20px;
}

.editor-container button {
   margin-left: 8px;
}

.editor-container .input[type=text] {
   padding: 0;
   margin-left: 4px;
}

.ui-dialog .ui-dialog-titlebar-maximize {
   width: 19px; height: 18px;
}

.ui-dialog .ui-dialog-titlebar-maximize span {
   display: block; margin: 1px;
}

.ui-dialog .ui-dialog-titlebar-maximize:hover,
.ui-dialog .ui-dialog-titlebar-maximize:focus {
   padding: 0;
}

.ui-dialog-titlebar-buttonpane {
  position: absolute;
  top: 50%;
  right: 0.3em;
  margin-top: -10px;
}

.ui-dialog .ui-dialog-titlebar-buttonpane > a {
   float: right;
}

.ui-dialog .alt-button-style {
  background: none;
  border: none;
}

.ui-dialog .alt-button-style:hover {
  background-color: #4CA109;
  border: 1px solid #327E04;
  cursor: pointer;
}

.ui-dialog a.ui-dialog-titlebar-maximize {
   position: absolute;
   right: 25px;
   top: 7px;
}

body.translator {
	overflow: hidden;
	/* Only turn on the hidden property when popup windows are being dragged - otherwise set to auto */
}
.TRANSwindow {
	height: 100%;
	overflow: hidden;
	display: grid;
	grid-template-columns: auto auto 1fr;
	/* margin: 10px; */
}
.TRANSwindowEdit {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto 1fr auto;
	overflow: hidden;
	position: relative;
	background-color: var(--grey-200);
}

.TRANSscriptingWindow {
	grid-column: 1/2;
	grid-row: 2/3;
	display: grid;
	grid-template-rows: 1fr auto;
	overflow: hidden;
}

div.TRANSmainContainer div#TRANSeditorDiv {
	flex-grow: 1;
	overflow: auto;
}
.TRANSwindowEditGrid{
	display: grid;
	grid-template-rows: 1fr auto;
	overflow: hidden;
	background-color: var(--grey-200);
}

div#TRANSeditorDiv {
	padding: 14px;
	padding-top: 20px;
	margin: 0px;
	background-color: #ffffff;
	overflow: auto;
}

div.CodeMirror-wrapping {
	position: absolute !important;
	/* override codemirror's default of 'relative' - #16706 */
	right: 100px;
	left: 225px;
}

div.CodeMirror-gutter-wrapper {
	cursor: default;
}

/* .CodeMirror-selected.current_search_match {
	background-color: #b5d5ff !important;
	color: black !important;
} */

.PRJprojectManager {
	width: 200px;
	min-width: 50px;
	height: 100%;
	border-right: 1px solid var(--grey-400);
	position: relative;
	background: #ebf3f6;
	display: flex;
	flex-direction: column;
	user-select: none;
}

.PRJprojectManagerCollapsed {
	width: 50px !important;
}

div.EDTiframeDialogFix {
	position: absolute;
	z-index: 999;
	/* just under a jQuery UI dialog */
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
}

.searched {
	background-color: rgba(133, 175, 224, 0.35);
	/* display: inline-block; */
}

/* #20660 - prevent clipping in Chrome when "zoomed in". */
input[type="file"] {
	padding-top: 2px;
	/* override default of 1px */
}

#TRANSeditorDiv {
	--scrollbarBG: #ffffff;
	--thumbBG: #d2dde8;
	scrollbar-width: thin;
	scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}

/*
https://interfaceware.atlassian.net/wiki/spaces/EC/pages/2142076929/Don+t+use+features+of+CSS+which+the+browser+manufacturers+tell+us+not+to
Eliot - need to understand what these are for - they don't sound like they will be supported.
*/
#TRANSeditorDiv::-webkit-scrollbar {
	width: 16px;
	height: 16px;
}

#TRANSeditorDiv::-webkit-scrollbar-track {
	background: var(--scrollbarBG);
}

#TRANSeditorDiv::-webkit-scrollbar-thumb {
	background-color: var(--thumbBG);
	border-radius: 8px;
	border: 5px solid var(--scrollbarBG);
}

.TRANSstatus_bar {
	padding: 8px 16px;
	border-top: 1px solid var(--grey-400);
	background: var(--white);
	font-family: var(--font-monospace);
}

/* Fake Dashboard Background */
.TRANSbackground {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	display: grid;
	grid-template-columns: 80px 400px 1fr;
}

.TRANSfakeHeader {
	background: var(--blue-dark);
}

.TRANSfakeDashboard {
	background-color: #ebf3f6;
	border-right: 1px solid var(--grey-400);
}

.TRANSfakeMap {
	background-color: #D2E4EC;
}

.TRANSfullScreenContainer {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}

.TRANSfullScreenFlipper {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 500ms;
}

.TRANSfullScreenFlipper-flipped {
	transform: rotateY(180deg);
}

.TRANSfullScreen {
	position: absolute;
	width: calc(100% - 80px);
	height: 100%;
}

/* Shrink Translator to size of Component card */
.TRANSfullScreenFlipper-flipped .TRANSfullScreen {
	max-height: 100%;
	height: 600px;
	width: 70%;
	transition: 500ms ease-in;
}

/* Hide contents of card while flipping */
.TRANSfullScreenFlipper-flipped .TRANSfullScreen .PRJprojectManager *,
.TRANSfullScreenFlipper-flipped .TRANSfullScreen .TRANSwindowEdit * {
	backface-visibility: hidden;
	opacity: 0;
	transition: 500ms ease-out;
}

.TRANSfullScreenFlipper-flipped .TRANSfullScreen {
	background: white;
	transition: 500ms ease-out;
}

.TRANSfullScreenFlipper-flipped .TRANSfullScreen .PRJprojectManager {
	background: white;
	border: none;
	transition: 500ms ease-out;
}



.TRANScloseTranslatorBox {
	height: 42px;
	width: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background-color: var(--grey-100);
	color: var(--grey-600);
	margin: 3px;
	margin-right: 0px;
	position: absolute;
	right: 0px;
}

.TRANScloseTranslator {
	border-radius: 9999px;
	height: 40px;
	width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--grey-600);
	transition: 250ms ease-out;
	margin: 3px;
	margin-right: 8px;
	position: absolute;
	right: 0px;
}

.TRANScloseTranslatorIcon {
	fill: currentColor;
	width: 18px;
}

.TRANScloseTranslator:hover {
	background-color: var(--grey-300);
	text-decoration: none;
	transition: 75ms ease-in;
}
.TRANSmodal{
	overflow: hidden;
}
.TRANSmargin{
	margin-bottom: 4px;
}
.ITMbannerContainer{
	position: absolute;
	bottom: 0px;
	height: 28px;
	width: 100%;
	border-top: 1px solid var(--grey-400);
	background-color: var(--grey-100);
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	align-items: center;
	display: flex;
	z-index: 20; /* Added z-index to fix banner being transparent */
}
#WNDdockBottom #WNDdockTabs,
#WNDdockBottom .ITMbannerContainer,
#WNDdockRight  #WNDdockTabs{
	height: 31px !important;
}
#WNDdockBottom .ITMbannerContainer,
#WNDdockRight  .ITMbannerContainer{
	border-bottom-left-radius: 0px !important;
	border-bottom-right-radius: 0px !important;
	height: 31px;
}
.ITMbanner{
	margin-left: 12px;
}
.ITMbanner2{
	margin-left: 4px;
}
.ITMbanner,
.ITMbanner2{
	color: var(--grey-600);
	font-size: 10.5px;
	opacity: 0.8;
}
.ITMbanner2:hover{
	opacity: 1;
	text-decoration: underline;
	cursor: pointer;
}

span.e {
   opacity: 0.5;              /* Standard style for transparency */
}
ul.ifwareTreeview > li.e { display: block; } /* if the root of the tree is empty, it must be shown. */

ul.ifwareTreeview{
 position: relative; /* helps us more easily determine positions of nodes relative to the entire tree. */
}

ul.ifwareTreeview li span.waiting{
 background-image: url(/TRANS/images/spinner.gif);
}

ul.ifwareTreeview ul.error{
 background-color: #FADCDC;
 color: #8E2525;
 white-space: pre;
}

/* BEGIN COLORIZATION FOR TREEVIEWS AND AUTO-COMPLETION */

span.clrz_kw{
 color: blue;
}

span.clrz_str{
 color: #c92c2c;
}

span.clrz_num{
 color: #33AA33;
}

span.clrz_light{
 color: #666666;
}

span.clrz_name{
 color: purple;
}

span.clrz_text{
 color: black;
}

/* See #25314 - if we get down below 50 levels of indentation we use this */
span.clrz_err{
	color: red;
}

div.emptyNodeDropdown{
   position: absolute;
   background-color: /*#f9fdcb;*/ #eaeaea;
   border: solid 1px #CCCCCC;
   border-top: 0;
   right: 16px; /* 16px instead of 0px to give room for the scrollbar */
   font-size: 11px;
   color: #555555;
   padding: 1px 4px 1px 1px;
}

div.emptyNodeDropdown label{
   cursor: pointer;
}

/* Lua node types - the numbers in these classes' names have to match those in the Lua headers */
.nt_0_0 { background-image: url(/TREE/images/data_type_null.gif); }
.nt_0_1 { background-image: url(/TREE/images/data_type_boolean.gif); }
.nt_0_2 { background-image: url(/TREE/images/lua_userdata.gif); }
.nt_0_3 { background-image: url(/TREE/images/data_type_integer.gif); }
.nt_0_4 { background-image: url(/TREE/images/data_type_string.gif); }
.nt_0_5 { background-image: url(/TREE/images/json_object.gif); }
.nt_0_6 { background-image: url(/TREE/images/lua_function.gif); }
.nt_0_7 { background-image: url(/TREE/images/lua_userdata.gif); }
.nt_0_8 { background-image: url(/TREE/images/lua_userdata.gif); }
/* Addition Lua nodes - should match numbers in NODLutils.h */
.nt_0_100 { background-image: url(/TREE/images/data_type_null.gif); }
.nt_0_101 { background-image: url(/TREE/images/lua_blank.gif); }
.nt_0_102 { background-image: url(/TREE/images/error.gif); }
.nt_0_103 { background-image: url(/TREE/images/warning.gif); }

/* HL7 node types - the numbers in these classes' names match the types in NOHconstant.h */
.nt_101_0 { background-image: url(/TREE/images/EDIiconMessage.svg); }
.nt_101_1 { background-image: url(/TREE/images/EDIiconFolderRepeating.svg); }
.nt_101_2 { background-image: url(/TREE/images/EDIiconFolder.svg); }	
.nt_101_3 { background-image: url(/TREE/images/EDIiconSegmentRepeating.svg); }
.nt_101_4 { background-image: url(/TREE/images/EDIiconSegment.svg); }
.nt_101_5 { background-image: url(/TREE/images/EDIiconCompositeRepeating.svg); }
.nt_101_6 { background-image: url(/TREE/images/EDIiconComposite.svg); }
.nt_101_7 { background-image: url(/TREE/images/EDIiconComposite.svg); }
.nt_101_8 { background-image: url(/TREE/images/EDIiconComposite.svg); }

/* DB node types - the numbers in these classes' names match the types in NODBconstant.h */
.nt_20_1 { background-image: url(/TREE/images/table.gif); }
.nt_20_2 { background-image: url(/TREE/images/table_rows.gif); }
.nt_20_3 { background-image: url(/TREE/images/data_type_string.gif); }
.nt_20_4 { background-image: url(/TREE/images/data_type_integer.gif); }
.nt_20_5 { background-image: url(/TREE/images/data_type_double.gif); }
.nt_20_6 { background-image: url(/TREE/images/data_type_datetime.gif); }
.nt_20_7 { background-image: url(/TREE/images/data_type_binary.gif); }

/* XML node types - the numbers in these classes' names match the types in NOXconstant.h */
.nt_30_1 { background-image: url(/TREE/images/attribute.gif); }
.nt_30_2 { background-image: url(/TREE/images/cdata.gif); }
.nt_30_3 { background-image: url(/TREE/images/xml_doc.gif); }
.nt_30_4 { background-image: url(/TREE/images/tag.gif); }
.nt_30_5 { background-image: url(/TREE/images/text.gif); }

/* Table Grammar node types - the numbers in these classes' names match the types in NOTGconstant.h */
.nt_40_1 { background-image: url(/TREE/images/table_grammar.gif); }
.nt_40_2 { background-image: url(/TREE/images/folder.gif); }
.nt_40_3 { background-image: url(/TREE/images/table_rows.gif); }
.nt_40_4 { background-image: url(/TREE/images/table.gif); }
.nt_40_5 { background-image: url(/TREE/images/table_rows.gif); }
.nt_40_6 { background-image: url(/TREE/images/data_type_string.gif); }
.nt_40_7 { background-image: url(/TREE/images/data_type_integer.gif); }
.nt_40_8 { background-image: url(/TREE/images/data_type_double.gif); }
.nt_40_9 { background-image: url(/TREE/images/data_type_datetime.gif); }

/* Table protocol node types - the numbers in these classes' names match the types in NTABconstant.h */
.nt_50_1 { background-image: url(/TREE/images/table_collection.gif); }
.nt_50_4 { background-image: url(/TREE/images/table.gif); }
.nt_50_5 { background-image: url(/TREE/images/table_rows.gif); }
.nt_50_6 { background-image: url(/TREE/images/data_type_string.gif); }
.nt_50_7 { background-image: url(/TREE/images/data_type_integer.gif); }
.nt_50_8 { background-image: url(/TREE/images/data_type_double.gif); }
.nt_50_9 { background-image: url(/TREE/images/data_type_datetime.gif); }

/* Help protocol node types, See ANNconstant.h*/
.nt_60_1 { font-weight: bold; }
.nt_60_2 { font-style: italic; }

/* help title icon */
.WNDtitleIcon.help { background-image: url('/TRANS/images/icon_help.gif'); }
.tx{
 padding: 0;
 color : #A22;
}
.gr{
 padding: 0;
 color : #C0C0C0;
}

.an, .editbox{
 font-size: 14px;
 line-height: 17px;
 padding: 0;
 color: black;
 cursor: default;
}

div.CodeMirror{
 font-size: 12px;
 line-height: 1.4em;
 height: 100%;
}
#TRANSeditorDiv.TRANSreadOnlyClass{
	background-color: var(--grey-200) !important;
}
.TRANSreadOnlyClass .CodeMirror{
	background-color: var(--grey-200);
	background-image: url(/TRANS/images/TRANSreadOnlyWatermark.svg);
	background-repeat: no-repeat;
	background-position: bottom 40px right 40px;
}

div.CodeMirror-scroll{
 height: 100%;
 /* position: relative; */
 cursor: text;
}

.CodeMirror-line-numbers{
 text-align: right;
 padding-right : 2px;
 font-size: 14px;
 line-height: 17px;
 padding-left: 0;
 padding-top: 0;
 padding-bottom: 0;
 color: black;
 cursor: default;
}

.CodeMirror-iframe{
 width:100%; 
 height: 100%; 
 display: block;
 border-right: 1px solid #b1b1b1;
}

div.an {
 height: 0;
}

div.an.stale{
   opacity: 0.15;             /* Standard style for transparency */
}

div.CodeMirror-line-numbers {
  color: #999999;
  border-right: 1px solid #dddddd;
  background-color: #f9f9f9;
  /*font-weight: bold;*/
}

div.CodeMirror-gutter {
   /* Doesn't make sense to use the text cursor here since you can't edit the
   line numbers. */
   cursor: default;
}

.dirty {
   margin-right: 2px;
   height: 15px;
   width: 4px;
   background-color: #FFEE62;
}

div.CodeMirror-line-numbers, 
.editbox{
   margin: 0px; 
   padding-left: 6px;
}


table.an, tr.an, td.an, tbody.an {
margin: 0;
padding: 0;
border-spacing: 0;
border-collapse: collapse;
}

/* For the logging */
td.l{
   text-align: right;
}

td.t{
   color : grey;
}

pre.code, 
.editbox {
  color: #666666;
}

.editbox p {
  margin: 0;
}

/* rect colors should match the colours in the CodeMirror theme css */

rect.lua-comment {
  fill: #BB9977;
}

rect.merge-conflict 
{
    fill: #f00;
    fill-opacity: 0.2;
    stroke: #f00;
}

rect.lua-keyword {
  fill: blue;
}

rect.lua-stdfunc {
  fill: #077;
}

rect.lua-error {
  fill: #F6CECE;
  stroke: #8E2525;
}

rect.lua-error-line {
  fill: #dcebf5;
}

rect.lua-scrollbar {
  fill: #0E68BF;
  stroke: #0E68BF; 
  fill-opacity: 0.2;
  stroke-opacity: 0.3;
}

/* Script error styles */
.error-highlight-row {
  background-color: #dcebf5 !important;
}

div.error-box {
  position: absolute;
  z-index: 10;
  background-color: var(--red-lighter);
  border: 1px solid var(--red-light);
  color: var(--red);
  /* white-space: pre; */
  /* box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15); */
  border-radius: 4px;
}

div.error-box textarea:target{
   border: 0px;
}

div.error-box div.error-toolbar{
   padding: 2px 2px 0px 0px;
   font-size: 9px;
	font-family: var(--font-sans);
   color: #c44040;
}
div.error-box div.error-toolbar{
   user-select: none;
}
div.error-box div.error-toolbar * {
	font-family: var(--font-sans);
}

div.error-box div.error-toolbar a,
div.error-box div.error-toolbar a:visited {
   color: inherit;
}

div.error-box div.error-message{
   padding: 2px 6px 2px 0.5em;
}

div.error-box div.error-toolbar img{
   cursor: pointer;
}

div.error-box img.error-stack,
div.error-box img.error-expand,
div.error-box img.error-collapse{
   padding-right: 2px;
}

div.error-box div.error-buttons{
   float: right;
   padding-left: 7px;
   padding-right: 1px;
   height: 0px; /* minimum height */
}

div.error-box.collapsed{
   cursor: pointer;
}

div.error-box.collapsed div.error-toolbar{
   float: right;
}

div.error-box.collapsed div.error-message{
   margin-right: 52px; /* make space for the buttons on the right */
}

div.error-box.collapsed div.error-toolbar span{
   display: none;
}

div.error-box.collapsed img.error-collapse{
   display: none;
}

div.error-box.expanded{
   cursor: move;
}

div.error-box.expanded div.error-toolbar{
   border-bottom: 1px solid #ebc1c1;
   padding-left: 0.5em;
   height: 18px;
   background: #f7d6d6; /* for non-css3 browsers */
}

div.error-box.expanded div.error-toolbar span{
   float: left;
}

div.error-box.expanded div.error-message{
   cursor: text;
}

div.error-box.expanded img.error-expand{
   display: none;
}

/* End of script error styles */

div.anpane {
 background-color:#EEE; border-top:1px solid #555;
 border-bottom:1px solid #888; 
 padding: 0px;
 clear : left;
 white-space: nowrap;
}

div.aninfo {
 /*display: inline-block;  /* stops the div from being too wide */ 
 white-space: nowrap;
 position: relative;
 top : -10px;
 z-index : 1000;
 moz-user-select: none;    /* #15281 these crytic CSS codes should make the annotation controls unselectable - first is for Mozilla */
 -khtml-user-select: none; /* this one is Chrome/Safari */ 
 user-select: none;        /* CSS3 way of achieving the same thing. */
 float: left;
 padding: 1px;
}

.TRANSfirst,
.TRANSback,
.TRANSnext,
.TRANSlast{
 cursor : pointer;
 padding: 3px;
 padding-top: 1px;
 padding-bottom: 1px;
}

span.print{
 color : #0B0;
}

span.tx, span.print{
 white-space : pre;
}

.toolbar{
 vertical-align: middle;
 font-size: 11px;
 margin-left: 10px;
 text-shadow: 0 1px 1px #F7F7F7;
}

input.toggle_annotations{
 /*vertical-align: middle;*/
}


div.an_sb {
   overflow: hidden;
   display: flex;
   align-items: center;
   white-space: nowrap;
   font-size: 10.5px;
   /* color: #78909c;
   float: left;
   font-size: 10px;
   height: 20px;
   letter-spacing: 0.05em;
   line-height: 20px;
   width: 50%; */
}

.TRANSbottomBarCurrentFile{
   width: 100%;
   font-family: var(--font-monospace);
   font-size: 11px;
   color: var(--grey-600);
   border: 0;
   background-color: transparent;
   margin-left: 5px;
   display: inline-block;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

.TRANSannotationStatus {
   color: #c92c2c; /* red */
   font-size: 10.5px;
   letter-spacing: 0;
   margin-left: 14px;
   text-transform: none;
}

.TRANSspinner{
 position: relative;
 top: 2px;
 height: 12px;
}

/* treeview */
span.tv{
 position: absolute;
 margin-top: -2px;
 padding-right: 2px;
 border: 1px dotted #00BB00;
 background-color: #E9FFE9;
 color: black;
 opacity: 0.9;
 line-height: 12px;
 z-index: 2000;
}

span.tv.front{
 z-index: 2001;
 border-color: #215FA3;
}

/* treeview placeholder */
span.tv_ph{
 visibility: hidden;
 padding-left: 50px;
 white-space: nowrap;
}

span.tv, span.tv_ph{
 font-size: 11px;
}

ul.ifwareTreeview{
 margin-top: 0;
 margin-bottom: 0;
}

ul.ifwareTreeview li.expandable span.treeIcon {
 height:15px !important;
}

.executeNowText {
    text-decoration: underline ! important;
    color: purple ! important;
}

div.TRANStoolbarWrapper {
	background-color: #f9fafb;
	/* $grey-100 */
	color: #666666;
	font-size: 11px;
	padding-left: 12px;
	padding-right: 12px;
	border-bottom: 1px solid var(--grey-400);
	/* $grey-300 */
	box-sizing: border-box;
	display: flex;
	align-items: center;
	grid-column: 1/3;
	grid-row: 1/2;
	z-index: 1;
	height: 66px;
	overflow-x: auto;
	overflow-y: hidden;
	/* margin-top: 11px;
	margin-bottom: 11px; */
}
.TRANStoolbarWrapper {
	--scrollbarBG: #f9fafb;
	--thumbBG: var(--grey-400);
	scrollbar-width: thin;
	scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
.TRANStoolbarWrapper::-webkit-scrollbar {
	width: 4px;
	height: 4px;
}
.TRANStoolbarWrapper::-webkit-scrollbar-track {
	background: var(--scrollbarBG);
}
.TRANStoolbarWrapper::-webkit-scrollbar-thumb {
	background-color: var(--thumbBG);
	border-radius: 0px;
	border: 0px solid var(--scrollbarBG);
}
div.TRANStoolbarWrapper form {
	margin-left: -15px;
}
/* Sample Data Label */
div.TRANStoolbarWrapper .label {
	width: initial;
	margin-bottom: 0px;
}

/* "BACK TO" SECTION */
.back {
	float: left;
}
.back a {
	color: #666;
}
.back a:hover {
	color: #009de8;
}

.back .label {
	line-height: unset;
}

/* SAMPLE DATA BUTTONS */

.TRANStoolbarText {
	font-family: var(--font-buttons);
	margin: 0 4px;
	font-weight: 400;
	color: var(--grey-600);
	font-size: 10px;
	white-space: nowrap;
	width: 46px;
}

.TRANStoolbarText * {
	font-size: 10px;
}

.TRANStoolbarText div {
	display: inline-block;
	margin-left: 2px;
	background-image: none;
	height: 24px;
	line-height: 24px;
	border-radius: 4px;
}


a.button_text {
	color: #444;
	font: normal 10px "Lucida Sans", sans-serif;
	text-decoration: none;
}

a.button_text span {
	display: block;
	line-height: 10px;
	padding: 7px 10px 7px 10px;
}

a.button_text span {
	background-image: none;
	display: block;
	height: 24px;
	line-height: 24px;
	border-radius: 4px;
	padding: 0px 6px;
	font-weight: var(--bold);
	font-size: 9px;
}

a.button_text span:hover {
	background-color: rgba(var(---grey-400), 0.25);
	color: var(--grey-600);
}

.TRANStoolbarButton {
	display: inline-block;
	height: 24px;
	margin-left: 1px;
	margin-right: 1px;
	cursor: pointer;
	width: 28px;
	border-radius: 4px;
	background-position: center;
	background-repeat: no-repeat;
	float: unset;
	margin: 0px 2px;
	cursor: pointer;
}
.TRANStoolbarButton.disabled {
	opacity: 0.3;
	cursor: not-allowed !important;
}
.TRANStoolbarButton:hover {
	background-color: rgba(var(---grey-400), 0.25);
	background-position: center !important;
}
.TRANStoolbarButton:active {
	background-color: rgba(var(---grey-400), 0.5);
	background-position: center !important;
}
.TRANStoolbarButton span {
	display: none;
}
/* TOOLBAR BUTTONS */
a.connected {
	margin-left: 0px;
	margin-right: 0px;
}

/* GOTO popup */
div.EDTsd_goto {
	position: absolute;
	background: #dedede;
	vertical-align: middle;
	color: #444444;
	border: 1px solid #b1b1b1;
	border-top: none;
	border-radius: 0px 0px 5px 5px;
	padding: 3px 8px 3px 8px;
	z-index: 90;
	/* above project divider line */
}

div.EDTsd_goto input.EDTsd_gotoInput {
	width: 30px;
	margin: 0;
	padding: 0;
	/* border: 1px solid #b1b1b1; */
}

div.EDTsd_goto img {
	cursor: pointer;
	margin-top: -2px;
	margin-left: 3px;
	vertical-align: middle;
}

.toolbarSubMenu {
	position: absolute;
	background: #dedede;
	color: #444444;
	border: 1px solid #b1b1b1;
	border-radius: 5px 5px 5px 5px;
	top: 25px;
	left: 0px;
	height: auto;
	padding: 2px 10px 10px 10px;
	clear: both;
	float: none;
	text-align: left;
	font: 10px/20px "Lucida Sans", sans-serif;
	text-shadow: 0 1px 1px #f7f7f7;
}

h3.SubMenuHeader {
	border-bottom: 1px solid #b1b1b1;
	margin: 6px 0px;
	color: #777777;
	font-weight: normal;
	font-size: 9px;
	text-shadow: 0 1px 1px #f7f7f7;
}

.toolbarSubMenu label input {
	margin-right: 5px;
}

.toolbarSubMenu label {
	display: block;
	padding-left: 15px;
	text-indent: -15px;
	font-weight: normal;
	color: #666666;
}

a.button_icon_wide {
	display: block;
	height: 25px;
	width: 40px;
	background-position: top left;
	float: left;
	margin-left: 1px;
	margin-right: 1px;
	cursor: pointer;
}
/* Updated Editor Toolbar Icons (2020) */

.TRANSrunButton {
	background-image: url("/TRANS/images/toolbar/button_runscript.svg");
}
.TRANSstopButton {
	background-image: url("/TRANS/images/TRANSstopButtonIcon.svg");
}
.TRANSautoRunButton {
	background-image: url("/TRANS/images/toolbar/button_autoexecute.svg");
}
.TRANSprojectToggle {
	background-image: url("/TRANS/images/toolbar/button_pmpane.svg");
}
.TRANSminiMapToggle {
	background-image: url("/TRANS/images/toolbar/button_thumbnail.svg");
}
.HLPhelpButton {
	background-image: url("/HLP/HLPtoolbarHelpIcon.svg");
}
.TRANSprojectSearch {
	background-image: url("/SEARCH/SEARCHicon.svg");
}

.TRANStoolbarWrapper {
	background-color: var(--grey-100);
	border-bottom: 1px solid var(--grey-300);
}
.TRANStoolbarButton.on {
	background-color: var(--grey-300);
	background-position: center !important;
	box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.1);
}

.TRANStoolbarWrapper span.label {
	font-size: 11px;
	color: var(--grey-600);
	margin-right: 12px !important;
}

div.EDTsd_goto #goto-row .input-group>* {
	height: 21px;
}

div.EDTsd_goto #goto-row input.EDTsd_gotoInput {
	width: 36px;
	margin-left: 6px;
	padding: 0px 4px;
}

div.EDTsd_goto #goto-row button {
	margin: 0px;
	padding: 0px 6px;
	font-size: 9px;
}

div.EDTsd_goto #mb-divider {
	border-top: 1px solid var(--grey-300) !important;
	margin: 8px -8px !important;
}

div.EDTsd_goto #mini-browser button#mb-search {
	margin: 0px;
	padding: 6px 10px;
	font-size: 9px;
	/* width: 100%; */
}

div#mb-parent {
	max-width: 600px;
	overflow: auto;
	max-height: 75%;
}

div.mb-entry {
	padding: 8px;
	font-size: 10px;
	border-radius: var(--border-radius);
}

div.mb-entry:hover {
	background-color: var(--blue-lighter);
	cursor: default;
}

.TRANSsection {
	display: flex;
	justify-content: space-around;
	float: left;
	padding: 0px 10px 0px 10px;
	border-right: 1px solid #bbb;
}
.TRANSsection span {
	float: left;
}
.TRANSsection span a {
	color: #6b7a86;
	text-decoration: none;
	font-size: 11px;
	font-weight: 400;
	margin-bottom: none;
}
.TRANSsection span a:hover {
	color: #009de8;
}
.TRANStoolbarWrapper .TRANSsection {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}
.TRANStoolbarWrapper .TRANSsection {
	padding: 0px 8px;
	border-right: 1px solid var(--grey-300);
	height: 32px;
}
.TRANStoolbarWrapper .TRANSsection:last-child {
	border-right: none;
	flex-grow: 1;
}


/*
 * Styles for the custom iNTERFACEWARE Treeview control.
 */
 
ul.ifwareTreeview
{
   padding-left: 0px;
   margin-left: 4px;
}

ul.ifwareTreeview ul
{
   padding: 0px;
   margin: 3px 0 0 18px;
}

ul.ifwareTreeview li
{
   padding: 2px 0 1px 0px;
   list-style-type: none;
   white-space: nowrap;
}

ul.ifwareTreeview li div
{
   white-space: nowrap;
   display: inline-block;
}

ul.ifwareTreeview span.treeIcon
{
   width: 16px;
   height: 16px;
   padding: 0px;
   margin: 0px;
   background-position: center center;
   background-repeat: no-repeat;
   cursor: pointer;
   display: inline-block;
   vertical-align: top;
}

ul.ifwareTreeview li.collapsable span.treeIcon
{
   background-image: url(/TREE/images/arrow-expanded.gif);
}

ul.ifwareTreeview li.expandable span.treeIcon
{
   background-image: url(/TREE/images/arrow-contracted.gif);
}

ul.ifwareTreeview li.leaf span.treeIcon
{
   background-image: none;
   cursor: default;
}

ul.ifwareTreeview span.nodeText
{
    height: 16px;
    padding: 1px 0 0 25px;
    display: inline-block;
    margin-left: -0.5em;
    background-position: 5px 0px;
    background-repeat: no-repeat;
    white-space: pre;
}

ul.ifwareTreeview span.hover,
ul.ifwareTreeview span.hover *
{
   color: #215FA3;
   cursor: pointer;
}

.TRGTblueDot::after{
	content: "";
	display: block;
	height: 8px;
	width: 8px;
	background: var(--blue);
	position: relative;
	top: 3px;
	left: 16px;
	border-radius: 9999px;
}
.TRGTcommit {
	background-image: url("/TRGT/images/TRGTcommitSvg.svg");
}
.TRGTgitPullRemote{
	background-image: url("/TRGT/images/TRGTpullRemoteSvg.svg");
}
.TRGTgitPushRemote{
	background-image: url("/TRGT/images/TRGTpushRemoteSvg.svg");
}
.TRGTrepoButton {
	background-image: url("/TRGT/images/TRGTrepoSvg.svg");
}
.TRGTgitBranchButton {
	background-image: url("/TRANS/images/toolbar/button_git_branch.svg");
}
.TRGTgitTerminalButton {
	background-image: url("/TRANS/images/toolbar/button_terminal.svg");
}
.TUNcontainer {
   height: 100vh;
   display: flex;
   flex-direction: column;
   background: var(--white);
}

.TUNheader {
   border-bottom: solid 1px var(--grey-400);
   background-color: #ebf3f6;
   box-sizing: border-box;
   height: 68px;
   flex-shrink: 0;
   padding: 8px 24px;
   display: flex;
   align-items: center;
   column-gap: 16px;
}

.TUNheading {
  font-family: var(--font-buttons);
  color: var(--blue-dark);
  font-size: 16px;
  font-weight: 500;
  flex-grow: 1;
}

.TUNbody{
   padding: 1em;
}

.TUNinfo{
   margin-top: 2em;
}

.TUNnameError,
.TUNerror{
	color: var(--red);
	font-size: 10px;
	line-height: 12px;
	margin-top: 4px;
  	overflow: visible;
}

.TUNpublicKeyCopy,
.TUNpublicKey {
	display: block;
	border-radius: var(--border-radius);
	border: 1px solid var(--grey-400);
	background-color: var(--white);
	font-weight: var(--regular);
	font-size: 12px;
   height: 8em;
	/* line-height: 16px; */
	padding: 6px 8px;
	color: var(--grey-800);
	width: 100%;
	box-sizing: border-box;
	font-family: var(--font-sans);
	resize: none;
	margin-top: 12px;
}
.TUNpublicKeyCopy{
	padding: 12px;
}
.TUNpublicKey::placeholder {
	color: var(--grey-400);
}
.TUNbuttonsRow{
   display: grid;
	grid-template-columns: auto auto;
	justify-content: end;
	margin-top: 36px;
	margin-left: auto;
}
.TUNaddHeader{
	font-family: var(--font-buttons);
	color: var(--grey-500);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.05em;
}

.TUNaddContainer{
   background: var(--grey-200);
	padding: 12px 18px;
	border: 1px solid var(--grey-400);
	border-radius: var(--border-radius);
	margin-bottom: 12px;
}
.TUNinformation{
	overflow-wrap: break-word;
   color: var(--grey-600);
   line-height: 1.75;
   max-height: 100px;
   overflow-y: auto;
}
.TUNconnectedDiv{
   /* font-size: 11px; */
   color: var(--grey-600);
   border-top: solid 1px var(--grey-400);
	background-color: var(--white);
	height: 40px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	padding: 0 24px;
}

.TUNdisconnected::before,
.TUNconnected::before {
   content: '• ';
   font-size: 20px;
   font-weight: var(--bold);
}
.TUNdisconnected::before{
   color: red;
}
.TUNconnected::before{
   color: var(--green);
}
.TUNname{
	/* margin-bottom: 12px; */
}
.TUNpageLayout {
   overflow: hidden;
 }
 
 .TUNdashboard {
   display: grid;
   grid-template-columns: auto 1fr;
 }
 
 .TUNsortAsc::after {
   content: url("/TUN/TUNiconSortDown.svg");
   margin-top: 0px;
   margin-left: 3px;
 }
 
 .TUNsortDsc::after {
   content: url("/TUN/TUNiconSortUp.svg");
   margin-top: 0px;
   margin-left: 3px;
 }
 
 .TUNsearch {
   padding: 8px 16px 16px 16px;
   position: relative;
 }
 
 .TUNsearchHeader {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   margin-bottom: 4px;
 }
 
 .TUNsearchLabel {
   color: var(--grey-600);
   font-family: var(--font-buttons);
   font-weight: 500;
   letter-spacing: 0.02em;
   font-size: 11px;
 }
 
 .TUNsearchInput {
   width: 100%;
   height: 28px;
   border-radius: var(--border-radius);
   background-color: transparent;
   font-weight: var(--regular);
   font-size: 12px;
   box-sizing: border-box;
 }
 
 .TUNcheckbox input {
   margin-right: 2px;
 }
 
 .TUNlistView {
   display: grid;
   grid-template-rows: 72px 1fr auto;
   position: relative;
   background-color: #ebf3f6;
   border-right: 1px solid var(--grey-400);
   height: 100vh;
   z-index: 1;
 }
 
 .TUNsideHeader {
   padding: 0px;
   display: flex;
   /* justify-content: space-between; */
   column-gap: 140px;
   align-items: center;
   border-bottom: 1px solid var(--grey-300);
   margin: 0 16px;
 }
 
 .TUNheading {
   font-family: var(--font-buttons);
   color: var(--blue-dark);
   font-size: 16px;
   font-weight: 500;
 }
 
 .TUNheadingButtons {
   display: flex;
   flex-wrap: nowrap;
   gap: 8px;
 }
 .TUNonlyCheckedContainer{
   display: block;
   width: 170px;
   height: 28px;
   position: relative;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
 
 
 .TUNeditConnectionsContainer {
   display: block;
   width: 170px;
   height: 28px;
   position: relative;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   top: -38px;
 }
 
 /* Hide the browser's default checkbox */
 .TUNonlyCheckedContainer input,
 .TUNeditConnectionsContainer input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
   height: 0;
   width: 0;
 }
 
 /* Create a custom checkbox */
 .TUNonlyCheckedIcon{
   height: 28px;
 }
 .TUNeditConnectionsIcon{
   height: 32px;
 }
 .TUNonlyCheckedIcon,
 .TUNeditConnectionsIcon {
   font-family: var(--font-buttons);
   font-size: 11px;
   font-weight: 500;
   white-space: nowrap;
   position: absolute;
   opacity: 1;
   top: 0;
   left: 0;
   width: auto;
   padding: 0px 16px 0px 12px;
   border-radius: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: rgba(231,244,244,.6);
   border: 1px solid var(--blue);
   color: var(--blue);
 }
 
 .TUNonlyCheckedIcon svg,
 .TUNeditConnectionsIcon svg {
   fill: currentColor;
   height: 16px;
   width: 16px;
   margin-right: 8px;
 }
 
 /* On mouse-over, add a grey background color */
 .TUNeditConnectionsContainer:hover input ~ .TUNeditConnectionsIcon {
   color: var(--blue);
 }
 
 /* When the checkbox is checked, add a blue background */
 .TUNonlyCheckedContainer input:checked ~ .TUNonlyCheckedIcon,
 .TUNeditConnectionsContainer input:checked ~ .TUNeditConnectionsIcon {
   background-color: #C9DFE8;
   box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.2);
   border: none;
   color: var(--blue-dark);
 }
 
 /* Table Rows */
 .TUNtableRow {
   display: grid;
   grid-template-columns: 70px auto auto 1fr ;
   border-bottom: 1px solid var(--grey-200);
   user-select: none;
   background: var(--white);
   align-items: center;
   font-size: 11px;
   color: var(--grey-800);
   height: 32px;
 }
 
 .TUNtableRow:hover {
   cursor: pointer;
 }
 .TUNrowHighlighted{
   background-color: var(--blue-lighter);
 }
 
 .TUNcomponentRow.TUNselected,
 .TUNtableRowHighlight {
   background-color: var(--blue-lighter);
 }
 
 .TUNrowChecked {
   background-color: var(--blue-light) !important;
 }
 .TUNrowChecked.TUNrowHighlighted {
   background-color: var(--blue-lighter)!important;
 }
 .TUNrowSelected.TUNrowHighlighted{
   background-color: var(--blue-light);
 }
 .TUNrowSelected {
   background-color: var(--blue-lighter);
 }
 
 .TUNtableRow > :first-child {
   margin-left: 16px;
 }
 
 .TUNtableRow:first-child > * {
   height: 100%;
   display: flex;
   align-items: center;
   color: var(--grey-700);
   font-size: 10px;
   font-family: var(--font-buttons);
 }
 
 .TUNtableRow:last-child {
   border-bottom: 1px solid var(--grey-300);
   /* border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px; */
 }
 
 .TUNtableRow.TUNsourceSelected div:not(.POPtooltip) * {
   color: var(--white) !important;
 }
 
 .TUNtableRow.TUNcannotConnectTo.TUNsourceSelected div:not(.POPtooltip) * {
   color: var(--white) !important;
 }
 
 .TUNtableRow.TUNsourceSelected .TOGtoggle {
   border: 1px solid var(--white);
 }
 
 .TUNtableRow.TUNcannotConnectTo * {
   color: var(--grey-400);
 }
 
 .TUNaddFromUrlButton,
 .TUNaddPeer {
   border-radius: 9999px;
   font-family: var(--font-buttons);
   font-weight: var(--semibold);
   font-size: 10px;
   line-height: 10px;
   letter-spacing: 0.25px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 28px;
   width: fit-content;
   box-sizing: border-box;
   color: var(--white);
   transition: 250ms ease-out;
 }
 .TUNaddFromUrlButton{
   background-color: var(--grey-400);
   padding: 0 12px 0px 12px;
 }
 .TUNaddFromUrlButton:hover{
   background-color: var(--grey-500);
   transition: 70ms ease-in;
 }
 .TUNaddPeer {
   background-color: var(--green);
   padding: 0 12px 0px 8px;
 }
 .TUNaddPeer:hover {
   background-color: var(--green-hover);
   transition: 70ms ease-in;
 }
 
 .TUNaddPeer:active {
   background-color: var(--green-active);
 }
 
 .TUNtableHeading {
   cursor: pointer;
   background-color: #ebf3f6;
   border-bottom: 1px solid var(--grey-300);
   position: sticky;
   top: 0px;
   z-index: 100;
 }
 
 .TUNresizeControl {
   right: -6px;
   top: 0;
   bottom: 0;
   width: 10px;
   padding: 0;
   border: 0;
   position: absolute;
   outline: none;
   cursor: ew-resize;
   background-color: transparent;
 }
 
 .TUNresizeShadow {
   bottom: 0;
   top: 0;
   right: 4px;
   pointer-events: none;
   position: absolute;
   width: 2px;
   transition: 150ms ease-out;
 }
 
 .TUNresizeControl:hover .TUNresizeShadow {
   background: var(--blue);
   /* box-shadow: 3px 0px 10px rgba(0,0,0,0.5); */
   transition: 75ms ease-in;
 }
 
 .TUNcomponentName {
   color: #2590cd;
   cursor: pointer;
   white-space: nowrap;
   font-size: 11px;
 }
 .TUNserverLabel{
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 .TUNselectToolbar {
    padding: 24px 16px 24px 16px;
    position: relative;
   display: grid;
   grid-template-columns: auto 190px;
 }
 .TUNselectToolbar select:disabled {
    opacity: 0.3;
 }
 
 .TUNtableOverflow {
   overflow: hidden;
   position: relative;
 }
 
 .TUNresultCount {
   color: var(--grey-600);
   font-size: 10px;
 }
 
 .TUNmanageLinkRow {
   display: grid;
   grid-template-columns: 30px auto;
   padding: 4px;
   border: 1px solid var(--grey-300);
   border-bottom: 0;
   margin-left: 8px;
   margin-right: 8px;
   user-select: none;
 }
 
 .TUNlinkGuid {
   color: var(--grey-600);
   padding-left: 5px;
   font-size: 11px;
 }
 
 .TUNlinkLabel * {
   display: inline-block;
 }
 
 .TUNmapErrorDiv,
 .TUNtooManyMessage{
   color: var(--grey-700);
   font-size: 16px  !important;
   position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
   text-align: center;
 }
 
 /* Color of connection path on hover (delete connection) */
 .TUNlink.TUNeditMode:hover {
   stroke: var(--red) !important;
   cursor: pointer;
 }
 .TUNnodeContents {
   transition: transform 500ms ease;
   background: var(--white);
   border-radius: 28px;
   box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
   width: 100px;
   height: 28px;
   padding: 0px 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   /* position: relative; */
 }
 
 
 .TUNtableRow .TUNcannotConnectTo {
   background: #DFEBF1 !important;
   box-shadow: 0 2px 2px rgb(0 0 0 / 5%);
 }
 
 .TUNcannotConnectTo.TUNnodeChecked {
   background: #DFEBF1 !important;
   box-shadow: 0 2px 2px rgb(0 0 0 / 5%);
 }
 .TUNcannotConnectTo {
   background: #DFEBF1 !important;
   box-shadow: 0 2px 2px rgb(0 0 0 / 5%);
 }
 .TUNcannotConnectTo.TUNsourceSelected{
   background: var(--blue-dark) !important;
   box-shadow: 0 2px 2px rgb(0 0 0 / 25%);
 }
 
 .TUNcannotConnectTo .TUNnodeLabel {
   color: var(--grey-500);
 }
 
 .TUNcannotConnectTo .TUNnodeLabel::before {
   opacity: 0.5;
 }
 
 .TUNnode .TUNsourceSelected {
   background: var(--blue-dark) !important;
   box-shadow: 0 2px 2px rgb(0 0 0 / 25%);
 }
 
 .TUNsourceSelected .TUNnodeLabel {
   color: white;
 }
 
 .TUNsourceSelected.TUNcannotConnectTo .TUNnodeLabel::before {
   opacity: 1;
 }
 
 .TUNnodeContents.TUNgroupedNode {
   background-color: var(--green-lighter);
 }
 
 .TUNnodeContents.TUNgroupedNode.TUNnodeHighlighted,
 .TUNnodeContents.TUNgroupedNode.TUNnodeSelected {
   background-color: var(--green-light) !important;
 }
 
 .TUNnodeContents.TUNgroupedNode.TUNnodeSelected.TUNnodeHighlighted {
   background-color: var(--green) !important;
 }
 .TUNavailableComponents {
   height: 100%;
   max-height: 200px;
   overflow-y: auto;
 }
 
 .TUNclearSearch {
   z-index: 998;
   background: none;
   position: absolute;
   right: 24px;
   bottom: 22px;
 }
 
 .TUNclearSearch:hover {
   background-color: transparent;
 }

.TUNtableContainer {
    display: grid;
    grid-auto-rows: auto;
    max-height: calc(100% - 16px);
    overflow-y: scroll;
    --scrollbarBG: #ebf3f6;
    --thumbBG: #d2dde8;
    scrollbar-width: thin;
    scrollbar-color: var(--thumbBG) var(--scrollbarBG);
    position: relative;
}

.TUNstepList {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.TUNstepList li {
    color: #777777;
    font-size: 16px;
    margin: 5px 0;
    list-style: none;
}

.TUNstepTitle {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: 10px;
}
 
 .TUNtableContainer::-webkit-scrollbar {
   width: 16px;
   height: 16px;
 }
 
 .TUNtableContainer::-webkit-scrollbar-track {
   background: var(--scrollbarBG);
 }
 
 .TUNtableContainer::-webkit-scrollbar-thumb {
   background-color: var(--thumbBG);
   border-radius: 8px;
   border: 5px solid var(--scrollbarBG);
 }
 
 .TUNcenterText {
   text-align: center;
   justify-content: center;
 }
 
 .TUNcenterText .TOGtoggle {
   margin: auto; /* center toggle switch */
   width: 12px;
   height: 12px;
 }
 
 .TUNnamePlusLabel {
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-items: center;
   height: 100%;
 }
 
 .TUNserverLabelHtml {
   overflow: hidden;
   white-space: nowrap;
   padding-left: 12px;
   padding-right: 24px;
   font-size: 10px;
 }
 
 
 .TUNlabel {  /* make label scrollable for search */
   overflow-x: hidden;
 }
 
 .TUNlabel span {
   line-height: 18px;
 }
 
 .TUNdetailedCard {
   display: grid;
   grid-template-rows: auto 1fr auto;
 }
 
 .TUNdetailedTitleBar {
   display: grid;
   row-gap: 16px;
   padding-bottom: 12px;
   margin-bottom: 12px;
   border-bottom: 1px solid var(--grey-300);
 }
 
 .TUNcardTitleBarLayout {
   display: grid;
   grid-template-columns: 65px 1fr 54px;
 }
 
 .TUNdetailNameLabel {
   color: #2590cd;
   font-size: 14px;
   font-weight: 600;
 }
 
 .TUNcardLabel {
   color: grey;
   white-space: pre-wrap;
 }
 
 .TUNcardLabelBox {
   line-height: 1.75;
   font-size: 12.5px;
 }
 
 .TUNmax500 {
   max-width: 500px;
   overflow-wrap: break-word;
 }
 
 .TUNscript {
   cursor: pointer;
   color: #2590cd;
   padding: 4px;
   margin: 4px;
 }
 
 .TUNeditComponentDetails {
   color: #2590cd;
   cursor: pointer;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: 11px;
   display: inline;
 }
 
 .TUNrunComponentOn {
   color: #2590cd;
   font-size: 14px;
   font-weight: 600;
   padding-top: 17px;
 }
 
 .TUNrunComponentOnSelector {
   grid-column: 2 / 3;
   padding: 8px;
   padding-right: 16px;
 }
 
 .TUNrunComponentInfo {
   height: 50px;
   width: 50px;
   display: none;
   align-items: center;
   justify-content: center;
   position: absolute;
   left: 0px;
   top: 0px;
 }
 
 .TUNrunComponentInfo:hover {
   background: rgba(179, 221, 245, 0.25);
   cursor: pointer;
 }
 
 a:visited.TUNrepoLink {
   text-decoration: none;
 }
 
 .TUNcustomFieldEdit {
   cursor: pointer;
   color: #2590cd;
   margin: 12px;
 }
 
 @keyframes fadein {
   0% {
     opacity: 0;
     transform: translateY(100%);
   }
   100% {
     opacity: 1;
     transform: translateY(0%);
   }
 }
 .TUNiconAddStyle14px {
   width: 14px;
   height: 14px;
   margin-right: 8px;
   fill: currentColor;
 }
 
 .TUNeditConnectionsContainer input:checked ~ .TUNeditConnectionsIcon .TUNconnectionInfoDiv{
    visibility: visible;
 }
 .TUNeditConnectionsContainer input:checked ~ .TUNeditConnectionsIcon .TUNconnectionInfoDiv:hover ~ {
    visibility: visible;
 }
 .TUNconnectionInfoDiv{
    visibility: hidden;
    padding-right: 3px;
 }
 
 .TUNeditConnectionTooltip {
   width: 220px;
   font-size: 10px !important;
 }
 
 .TUNlastAct {
   display: flex;
   align-items: center;
   height: 100%;
 }
 
 .TUNlastActTooltip {
   min-width: 110px !important;
   padding-left: 6px !important;
   text-align: center !important;
 }
 
 .TUNlastActText .TUNlastActLink {
   padding: 4px;
   margin: 4px;
 }
 
 .TUNlastActLink {
   cursor: pointer;
   color: #2590cd;
 }
 
 .TUNcheckedRow {
   background-color: var(--blue-light);
 }
 
 .TUNswitchOff {
   background-color: #c9d0d5 !important;
 }
 
 .TUNswitchOn {
   background-color: #33b44a !important;
 }
 
 .TUNswitchInProg {
   background-color: #fee94e !important;
 }
 
 .TUNswitchErr {
   background-color: #d0011b !important;
 }
 .TUNtooltipOverflow .POPtooltipContent{
   overflow-y: auto !important;
   max-height: 60px;
 }
 .TUNbulkActionPopup {
   max-width: 500px;
 }
 .TUNbulkDialogClass{
   padding-bottom: 24px;
 }
 .TUNserverLabel, .TUNcenterText, .TUNlabel {
   color: var(--grey-600);
 }
 .TUNshowOnlyCheckedSwitchBox{
   display: flex;
   justify-content: right;
 }
 .TUNshowOnlyCheckedLabel{
   margin: auto 0;
   text-align: right;
   color: var(--grey-600);
   font-size: 11px;
 }
 .TUNshowOnlyCheckedToggle{
   margin: auto;
   text-align: center;
   justify-content: center;
 }
 .TUNshowOnlyCheckedToggle .TOGtoggle{
   margin: auto;
   width: 28px;
   height: 13px;
 }
 .TUNrowBuffer{
   display: grid;
   grid-template-columns: 36px 50px minmax(125px, 2.5fr) 45px 45px 45px minmax(60px, 1fr);
   user-select: none;
   height: 60px;
 }
 .TUNlinkArea{
   stroke-width: 10px;
 }
 .TUNdeleteInfo{
   display: inline-block;
   cursor: pointer;
 }
 .TUNnotWritable{
   background-color: #c9d0d5;
 }
 .TUNlistDataError{
   color: var(--grey-600);
   text-align: center;
   padding: 24px;
 }
 .TUNdisplayNone{
   display : none;
 }
.UNITtestContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.UNITrun {
    margin-top: 12px;
}

.UNITtestColumns {
    display: flex;
    width: 100%;
    overflow: auto;
    height: 90vh;
    justify-content: space-between;
}

.UNITtestColumn {
    width: 48%;
}

.UNITheader{
    display: flex;
    justify-content: center;
    text-decoration: underline;
}

.UNITfail, .UNITsuccess {
    white-space: break-spaces;
    padding-left: 24px;
    line-height: normal;
}

.UPGRADEerror{
   color: red;
}
.UPGRADEspinnerText{
   font-size: 12px;
}

.UPGRADEabout {
   background-color: #ffffff;
   border: 1px solid #ccc;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   padding: 20px;
   max-width: 800px;
   margin: 0 auto;
   border-radius: 8px;
   overflow: hidden;
}
.UPGRADEabout h2 {
   margin-top: 0;
}
.UPGRADEabout ul {
   list-style-type: none;
   padding: 0;
}
.UPGRADEabout li {
   padding: 10px 0;
   border-bottom: 1px solid #e0e0e0;
}

.UPGRADEmodal-container {
   text-align: center;
   padding: 20px;
   background-color: white;
   border-radius: 10px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   display: grid;
   grid-template-columns: auto;
   justify-items: center;
}

.UPGRADEmodal-text {
   color: black;
   margin-bottom: 20px;
}

.UPGRADEmodal-text-info {
   color: black;
   margin-bottom: 20px;
   text-align: justify;
}

.UPGRADEsuccess-text {
   color: #4CAF50;
}

.UPGRADEerror-text {
   color: #FF0000;
   margin-top: 10px;
   white-space: break-spaces;
}

.UPGRADEspinner-container {
   margin: 20px 0; /* Add space between p and spinner */
}

.UPGRADEspinner {
   border: 4px solid #f3f3f3;
   border-top: 4px solid #3498db;
   border-radius: 50%;
   width: 16px;
   height: 16px;
   animation: UPGRADEspin 2s linear infinite;
}

@keyframes UPGRADEspin {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(360deg);
   }
}

.DOWNGRADElist {
   list-style-type: none;
   padding: 0;
   display: grid;
   grid-template-rows: .8fr auto;
}

.DOWNGRADElist:hover {
   cursor: pointer;
}

.DOWNGRADElist > li {
   margin: 5px 0;
   background-color: #f0f0f0;
   padding: 8px;
   border-radius: 5px;
}

.DOWNGRADEdelete {
   float: right;
   padding: 8px;
}

.UPGRADErow{
   display: grid;
   grid-template-columns: auto auto;
}

.UPGRADEcheckmark{
   content: url("/UPGRADE/UPGRADEcheckmark.svg");
   height: 10px;
   margin-top: 4px;
   margin-left: 4px;
}

.UPGRADEmain{
   padding: 8px;
}

.UPGRADEguid{
   width : 18em;
}
.UPGRADEaccessErrorDiv *{
   display: inline;
}
.UPGRADEaccessErrorDiv{
   background-color: var(--grey-200);
   border-radius: 4px;
   width: 100%;
   padding: 8px;
}

.UPGRADEspecial {
   height: 100vh;
   background: #D2E4EC;
	color: var(--grey-800);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: var(--grey-800);
}

.UPGRADEspecialContainer {
	border-radius: 4px;
	background-color: var(--white);
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
	border: none;
	padding: 24px 32px;
	max-width: 700px;
}

.UPGRADEspecialContainer .UPGRADEmain {
	text-align: center;
}

.UPGRADEaccessErrorDiv,
.UPGRADEspecialContainer p {
	color: var(--grey-700);
	font-size: 12px;
	line-height: 2;
}

.UPGRADEguidInputContainer {
	display: flex;
	align-items: center;
	column-gap: 16px;
	margin-bottom: 8px;
	justify-content: center;
}

.UPGRADEerror {
	color: var(--red);
}
.UPGRADEspecialContainer h3{
	text-align: center;
}

.USERbutton {
   display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 28px;
	width: fit-content;
	padding: 0px 12px;
	box-sizing: border-box;
   font-family: var(--font-buttons);
   font-weight: var(--semibold);
   font-size: 10px;
   line-height: 10px;
   letter-spacing: 0.25px;
   border-radius: var(--border-radius);
   border: none;
   cursor: pointer;
   transition: 250ms ease-out;
   margin-top: 16px;
}

.USERtableHeading{
   cursor: default !important;
}

.USERinvalidInput {
   border: 2px solid var(--red);
}

.USERreadOnly {
   background-color: inherit;
}

.USERhint {
	color: var(--red);
	font-size: 11px;
	line-height: 12px;
	margin-top: 4px;
}

.USERbuttonWarning {
   background-color: var(--red);
   color: var(--white);
}

.USERbuttonWarning:hover {
	background-color: var(--red-dark);
	transition: 70ms ease-in;
}

.USERbuttonWarning:active {
	background-color: var(--red-darker);
}

.USERbuttonAction {
   background-color: var(--green);
   color: var(--white);
}

.USERbuttonAction:hover {
	background-color: var(--green-hover);
	transition: 70ms ease-in;
}

.USERbuttonAction:active {
	background-color: var(--green-active);
}

.USERbuttonCancel {
	background-color: var(--grey-200);
	color: var(--grey-600);
}

.USERbuttonCancel:hover {
	background-color: var(--grey-300);
	transition: 70ms ease-in;
}

.USERbuttonCancel:active {
	background-color: var(--grey-400);
}

.USERbuttonDisabled {
   background-color: var(--green-light);
   color: var(--white);
   cursor: not-allowed;
}

.USERhidden{
   display: none;
}

.USERhideForAdmin{
   display: none;
}

.USERcreatePassword{
   cursor: pointer;
   color: var(--blue);
   transition: 250ms ease-out;
}

.USERcreatePassword:hover {
   text-decoration: underline;
}
.USERtagClickable:hover{
	text-decoration: underline;
	cursor: pointer;
}
.USERtagClickable{
   font-weight: 650 !important;
}
.USERupdateTag,
.SETupdateRow{
   margin-right: 8px;
}
.USERreadDiv{
   display: grid;
   grid-template-rows: auto auto;
   row-gap: 4px;
}
.USERtagRows{
   display: grid;
   grid-template-columns: 80px 1fr;
   column-gap: 12px;
   row-gap: 12px;
}
.USERbuttonGroup{
   display: flex;
   justify-content: end;
   width: 100%;
   gap: 8px;
}
.USERsetTagError{
   color: var(--red);
}
.USERexternal::after{
   padding-left: 8px;
   opacity: 0.5;
   content: url("/CARD/CARDcheckGrey.svg");
}
.USERexternal:hover::after{
   opacity: 1;
   padding-left: 8px;
   content: url("/CARD/CARDcheckBlue.svg");
}
.USERexternal{
   display: flex;
   justify-content: center;
   justify-content: center;
   font-style: italic;
   color: var(--grey-600);
   cursor: default;
}
.USERuserSelected{
   font-weight: 700;
}
.USERuserSelected::before {
   content: '';
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background-color: var(--blue);
   margin-right: 8px;
}
:root {
   --inputSize: 16px;
   --main-toolbar-height: 72px;
   --translator-header-height: 48px;
   --label-margin-bottom: 4px;
   --neg-label-margin-bottom: -4px;
   --dm-bg--white: #2B3742;
   --dm-text--white: #e8e6e3;
   --dm-border--white: #303436;
   --dm-bg--white-dm: #131516;
   --dm-bg--grey:#2c353e;
   --dm-bg-grey-common:#2c353f;
   --dm-bg--grey-100: #212d39;
   --dm-text--grey-100: #e5e3df;
   --dm-border--grey-100: #313638;
   --dm-bg--grey-200: #36414c;
   --dm-border--grey-200: #333739;
   --dm-bg--grey-300: #272a2c;
   --dm-text--grey-300: #d8d4cf;
   --dm-border--grey-300: #373c3e;
   --dm-bg--grey-400: #4d5660;
   --dm-text--grey-400: #cac5be;
   --dm-border--grey-400: #1F252A;
   --dm-bg--grey-500: #444e5a;
   --dm-text--grey-500: #b0a99f;
   --dm-border--grey-500: #494f52;
   --dm-bg--grey-600: #5b6266;
   --dm-text--grey-600: #9c9386;
   --dm-border--grey-600: #645d52;
   --dm-text--grey-700: #95979a;
   --dm-border--grey-700: #746c60;
   --dm-bg--grey-800: #232628;
   --dm-text--grey-800: #cac6bf;
   --dm-text--grey-900: #d4d0cb;
   --dm-bg--green-lighter: #2f3e14;
   --dm-bg--green-light: #3f5c22;
   --dm-border--green-light: #3b6626;
   --dm-bg--green: #4a9129;
   --dm-text--green: #7ed059;
   --dm-bg--green-hover: #729930;
   --dm-bg--green-active: #3b841f;
   --dm-text--green-active: #84da62;
   --dm-text--green-dark: #96ff70;
   --green-darker: #063a00;
   --dm-bg--blue-lighter: #545b63;
   --dm-text--blue-lighter: #c2e3f3;
   --dm-border--blue-lighter: #12445d;
   --dm-bg--blue: #1e73a4;
   --dm-text--blue: #44a6dd;
   --dm-border--blue: #1c6d9b;
   --dm-bg--blue-light: #303436;
   --dm-text--blue-light: #9dd3f2;
   --dm-border--blue-light: #0f4d71;
   --dm-bg--blue-dark: #004d7f;
   --dm-text--blue-dark: #5dbfff;
   --dm-text--blue-darker: #d3cfc9;
   --dm-bg--teal-lighter: #123939;
   --dm-bg--teal-light: #165453;
   --dm-text--teal: #59c6c5;
   --teal-dark: #02848e;
   --dm-text--teal-darker: #d7d4cf;
   --dm-bg--purple-lighter: #1d1f20;
   --dm-bg--purple-light: #25282a;
   --dm-text--purple: #9e6cdf;
   --purple-dark: #50248f;
   --indigo-lighter: #f4f5fa;
   --indigo-light: #b2bcf6;
   --indigo: #5d6ac4;
   --purple-darker: #230051;
   --indigo-dark: #202d79;
   --dm-text--indigo-darker: #d6d3cd;
   --dm-bg--yellow-lighter: #3a2f05;
   --yellow-light: #ffe98a;
   --dm-bg--yellow: #be9a02;
   --dm-border--yellow: #b59302;
   --yellow-dark: #9c6f19;
   --orange: #ff9800;
   --orange-light: #ffcc80;
   --yellow-darker: #573b00;
   --dm-text--orange-dark: #ff762b;
   --orange-lighter: #fff0db;
   --orange-darker: #471900;
   --dm-bg--red-lighter: #39120c;
   --dm-text--red-lighter: #f3cac3;
   --dm-border--red-lighter: #5c1e13;
   --dm-bg--red: #b22b12;
   --dm-text--red: #ea5235;
   --dm-border--red: #a42811;
   --dm-bg--red-light: #6f1601;
   --dm-border--red-light: #831a01;
   --dm-bg--red-darker: #290001;
   --dm-bg--red-dark: #99060d;
   --dm-text--red-dark: #f84851;
   --dm-bg--scrollbarBG: #15282f;
   --darkreader-text--blue-dark: #5dbfff;
   --dm-bg---white: 24, 26, 27;
   ---grey-100: 249, 250, 251;
   --dm-bg---grey-200: 29, 32, 33;
   --dm-bg---grey-300: 39, 42, 44;
   --dm-border---grey-300: 55, 60, 62;
   --dm-bg---grey-400: 51, 55, 57;
   --dm-border---grey-400: 62, 67, 69;
   ---grey-500: 154, 165, 178;
   --dm-bg---grey-600: 91, 98, 102;
   --dm-text---grey-600: 156, 147, 134;
   ---grey-700: 64, 72, 80;
   --dm-bg---grey-800: 35, 38, 40;
   ---grey-900: 29, 33, 34;
   --dm-bg---green-lighter: 47, 62, 20;
   ---green-light: 182, 221, 163;
   --dm-bg---green: 74, 145, 41;
   ---green-dark: 35, 132, 0;
   ---green-darker: 6, 58, 0;
   --dm-bg---blue-lighter: 33, 35, 37;
   --dm-border---blue: 28, 109, 155;
   --dm-bg---blue-light: 48, 52, 54;
   --dm-text---blue-light: 157, 211, 242;
   --dm-border---blue-light: 15, 77, 113;
   --dm-bg---blue-dark: 0, 77, 127;
   --dm-bg---blue-darker: 7, 24, 46;
   ---teal-lighter: 224, 245, 245;
   ---teal-light: 182, 236, 235;
   ---teal: 72, 192, 191;
   ---teal-dark: 2, 132, 142;
   ---teal-darker: 1, 49, 52;
   ---purple-lighter: 246, 240, 253;
   ---purple-light: 227, 208, 255;
   ---purple: 156, 105, 222;
   ---purple-dark: 80, 36, 143;
   ---indigo-lighter: 244, 245, 250;
   ---indigo-light: 178, 188, 246;
   ---indigo: 93, 106, 196;
   ---purple-darker: 35, 0, 81;
   ---indigo-dark: 32, 45, 121;
   ---indigo-darker: 0, 6, 56;
   ---yellow-lighter: 251, 242, 205;
   ---yellow-light: 255, 233, 138;
   ---yellow: 238, 193, 2;
   --dm-text---yellow-dark: 230, 186, 102;
   ---orange: 255, 152, 0;
   ---orange-light: 255, 204, 128;
   ---yellow-darker: 87, 59, 0;
   ---orange-dark: 230, 81, 0;
   ---orange-lighter: 255, 240, 219;
   ---orange-darker: 71, 25, 0;
   ---red-lighter: 250, 233, 230;
   --dm-text---red: 234, 82, 53;
   ---red-light: 254, 173, 154;
   ---red-darker: 51, 0, 1;
   ---red-dark: 191, 7, 16;
   --margin-top: 16px !important;
   --dm-border--border-radius: 4px !important;
   --dm-bg-dark-blue: #36414C;
}


:root {
   /* element constants  */
   --inputSize: 16px;
   --checkbox-true: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1ICg3ODA3NikgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+Y2hlY2tib3ggLyBzdGFuZGFsb25lIC8gc2VsZWN0ZWQ8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz4KICAgICAgICA8cmVjdCBpZD0icGF0aC0xIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHJ4PSI0Ij48L3JlY3Q+CiAgICAgICAgPGZpbHRlciB4PSItMjEuOSUiIHk9Ii0xNS42JSIgd2lkdGg9IjE0My44JSIgaGVpZ2h0PSIxNDMuOCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImZpbHRlci0yIj4KICAgICAgICAgICAgPGZlT2Zmc2V0IGR4PSIwIiBkeT0iMSIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSI+PC9mZU9mZnNldD4KICAgICAgICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMSIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIj48L2ZlR2F1c3NpYW5CbHVyPgogICAgICAgICAgICA8ZmVDb21wb3NpdGUgaW49InNoYWRvd0JsdXJPdXRlcjEiIGluMj0iU291cmNlQWxwaGEiIG9wZXJhdG9yPSJvdXQiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSI+PC9mZUNvbXBvc2l0ZT4KICAgICAgICAgICAgPGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgICAwIDAgMCAwIDAgICAwIDAgMCAwIDAgIDAgMCAwIDAuMDUgMCIgdHlwZT0ibWF0cml4IiBpbj0ic2hhZG93Qmx1ck91dGVyMSI+PC9mZUNvbG9yTWF0cml4PgogICAgICAgIDwvZmlsdGVyPgogICAgPC9kZWZzPgogICAgPGcgaWQ9ImNoZWNrYm94LS8tc3RhbmRhbG9uZS0vLXNlbGVjdGVkIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iQ2hlY2tib3gtLS1TZWxlY3RlZCI+CiAgICAgICAgICAgIDxnIGlkPSJDaGVja2JveCI+CiAgICAgICAgICAgICAgICA8dXNlIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjEiIGZpbHRlcj0idXJsKCNmaWx0ZXItMikiIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgICAgICAgICAgICAgPHJlY3Qgc3Ryb2tlPSIjMjU5MENEIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1saW5lam9pbj0ic3F1YXJlIiBmaWxsPSIjMjU5MENEIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHg9IjAuNSIgeT0iMC41IiB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHJ4PSI0Ij48L3JlY3Q+CiAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPHBhdGggZD0iTTExLjMxMzcsNS4yOTI4NiBDMTAuOTIyNyw0LjkwMTg2IDEwLjI4OTcsNC45MDE4NiA5Ljg5OTcsNS4yOTI4NiBMNi41MzU3LDguNjU2ODYgTDUuNzA2Nyw3LjgyODg2IEM1LjMxNjcsNy40Mzc4NiA0LjY4MzcsNy40Mzc4NiA0LjI5MjcsNy44Mjg4NiBDMy45MDI3LDguMjE4ODYgMy45MDI3LDguODUxODYgNC4yOTI3LDkuMjQyODYgTDUuODI4NywxMC43Nzc4NiBDNi4yMTg3LDExLjE2ODg2IDYuODUxNywxMS4xNjg4NiA3LjI0MjcsMTAuNzc3ODYgTDExLjMxMzcsNi43MDY4NiBDMTEuNzA0Nyw2LjMxNjg2IDExLjcwNDcsNS42ODM4NiAxMS4zMTM3LDUuMjkyODYiIGlkPSJUaWNrIiBmaWxsPSIjRkZGRkZGIj48L3BhdGg+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=);
   --checkbox-false: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1ICg3ODA3NikgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+Y2hlY2tib3ggLyBzdGFuZGFsb25lIC8gdW5zZWxlY3RlZDwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJjaGVja2JveC0vLXN0YW5kYWxvbmUtLy11bnNlbGVjdGVkIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iQ2hlY2tib3gtLS1VbnNlbGVjdGVkIiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgPHJlY3QgaWQ9IkNoZWNrYm94IiBzdHJva2U9IiNDOUQwRDUiIHN0cm9rZS13aWR0aD0iMiIgeD0iMSIgeT0iMSIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiByeD0iNCI+PC9yZWN0PgogICAgICAgICAgICA8cGF0aCBkPSJNMTEuMzEzNyw1LjI5Mjg2IEMxMC45MjI3LDQuOTAxODYgMTAuMjg5Nyw0LjkwMTg2IDkuODk5Nyw1LjI5Mjg2IEw2LjUzNTcsOC42NTY4NiBMNS43MDY3LDcuODI4ODYgQzUuMzE2Nyw3LjQzNzg2IDQuNjgzNyw3LjQzNzg2IDQuMjkyNyw3LjgyODg2IEMzLjkwMjcsOC4yMTg4NiAzLjkwMjcsOC44NTE4NiA0LjI5MjcsOS4yNDI4NiBMNS44Mjg3LDEwLjc3Nzg2IEM2LjIxODcsMTEuMTY4ODYgNi44NTE3LDExLjE2ODg2IDcuMjQyNywxMC43Nzc4NiBMMTEuMzEzNyw2LjcwNjg2IEMxMS43MDQ3LDYuMzE2ODYgMTEuNzA0Nyw1LjY4Mzg2IDExLjMxMzcsNS4yOTI4NiIgaWQ9IlRpY2siPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==);
   --radio-true: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1ICg3ODA3NikgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+cmFkaW8gLyBzdGFuZGFsb25lIC8gc2VsZWN0ZWQ8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0icmFkaW8tLy1zdGFuZGFsb25lLS8tc2VsZWN0ZWQiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJSYWRpbyIgZmlsbD0iI0ZGRkZGRiIgc3Ryb2tlPSIjMjU5MENEIiBzdHJva2Utb3BhY2l0eT0iMC43NSIgc3Ryb2tlLXdpZHRoPSIyIj4KICAgICAgICAgICAgPHJlY3QgaWQ9IkNoZWNrYm94IiB4PSIxIiB5PSIxIiB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHJ4PSI3Ij48L3JlY3Q+CiAgICAgICAgPC9nPgogICAgICAgIDxwYXRoIGQ9Ik04LDEzIEMxMC43NjE0MjM3LDEzIDEzLDEwLjc2MTQyMzcgMTMsOCBDMTMsNS4yMzg1NzYyNSAxMC43NjE0MjM3LDMgOCwzIEM1LjIzODU3NjI1LDMgMyw1LjIzODU3NjI1IDMsOCBDMywxMC43NjE0MjM3IDUuMjM4NTc2MjUsMTMgOCwxMyBaIiBpZD0iRG90IiBmaWxsPSIjMjU5MENEIj48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg==);
   --radio-false: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1ICg3ODA3NikgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+cmFkaW8gLyBzdGFuZGFsb25lIC8gdW5zZWxlY3RlZDwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJyYWRpby0vLXN0YW5kYWxvbmUtLy11bnNlbGVjdGVkIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iUmFkaW8iIGZpbGw9IiNGRkZGRkYiIHN0cm9rZT0iI0M5RDBENSIgc3Ryb2tlLXdpZHRoPSIyIj4KICAgICAgICAgICAgPHJlY3QgaWQ9IkNoZWNrYm94IiB4PSIxIiB5PSIxIiB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHJ4PSI3Ij48L3JlY3Q+CiAgICAgICAgPC9nPgogICAgICAgIDxwYXRoIGQ9Ik04LDEzIEMxMC43NjE0MjM3LDEzIDEzLDEwLjc2MTQyMzcgMTMsOCBDMTMsNS4yMzg1NzYyNSAxMC43NjE0MjM3LDMgOCwzIEM1LjIzODU3NjI1LDMgMyw1LjIzODU3NjI1IDMsOCBDMywxMC43NjE0MjM3IDUuMjM4NTc2MjUsMTMgOCwxMyBaIiBpZD0iRG90IiBmaWxsPSIjRkZGRkZGIj48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg==);

   /* dimensions */
   --margin-top: 16px !important;
   --border-radius: 4px !important;
   --main-toolbar-height: 72px;
   --translator-header-height: 48px;
   --label-margin-bottom: 4px;
   --neg-label-margin-bottom: -4px;
   --border-radius: 4px;

   /* Var for hex substitution */
   --blue: #1e90ff;
   --white: #ffffff;
   --grey-100: #f9fafb;
   --grey-200: #f4f6f8;
   --grey-300: #e2e5e8;
   --grey-400: #c9d0d5;
   --grey-500: #9aa5b2;
   --grey-600: #6b7a86;
   --grey-700: #404850;
   --grey-800: #2b3133;
   --grey-900: #1d2122;
   --green-lighter: #e5f2d7;
   --green-light: #b6dda3;
   --green: #5cb533;
   --green-hover: #82c341;
   --green-active: #4aa527;
   --green-dark: #238400;
   --green-darker: #063a00;
   --blue-lighter: #e5f3fa;
   --blue: #2590cd;
   --blue-light: #b3ddf5;
   --blue-dark: #00609f;
   --blue-darker: #091e3a;
   --teal-lighter: #e0f5f5;
   --teal-light: #b6eceb;
   --teal: #48c0bf;
   --teal-dark: #02848e;
   --teal-darker: #013134;
   --purple-lighter: #f6f0fd;
   --purple-light: #e3d0ff;
   --purple: #9c69de;
   --purple-dark: #50248f;
   --indigo-lighter: #f4f5fa;
   --indigo-light: #b2bcf6;
   --indigo: #5d6ac4;
   --purple-darker: #230051;
   --indigo-dark: #202d79;
   --indigo-darker: #000638;
   --yellow-lighter: #fbf2cd;
   --yellow-light: #ffe98a;
   --yellow: #eec102;
   --yellow-dark: #9c6f19;
   --yellow-darkr: #76520b;
   --yellow-darker: #573b00;
   --orange: #ff9800;
   --orange-light: #ffcc80;
   --orange-dark: #e65100;
   --orange-lighter: #fff0db;
   --orange-darker: #471900;
   --red-lighter: #fae9e6;
   --red: #de3617;
   --red-light: #fead9a;
   --red-darker: #330001;
   --red-dark: #bf0710;
   /* Var for RGB substitution */
   ---blue: 30, 144, 255;
   ---white: 255,255,255;
   ---grey-100: 249, 250, 251;
   ---grey-200: 244, 246, 248;
   ---grey-300: 226, 229, 232;
   ---grey-400: 201, 208, 213;
   ---grey-500: 154, 165, 178;
   ---grey-600: 107, 122, 134;
   ---grey-700: 64, 72, 80;
   ---grey-800: 43, 49, 51;
   ---grey-900: 29, 33, 34;
   ---green-lighter: 229, 242, 215;
   ---green-light: 182, 221, 163;
   ---green: 92, 181, 51;
   ---green-dark: 35, 132, 0;
   ---green-darker: 6, 58, 0;
   ---blue-lighter: 229, 243, 250;
   ---blue: 37, 144, 205;
   ---blue-light: 179, 221, 245;
   ---blue-dark: 0, 96, 159;
   ---blue-darker: 9, 30, 58;
   ---teal-lighter: 224, 245, 245;
   ---teal-light: 182, 236, 235;
   ---teal: 72, 192, 191;
   ---teal-dark: 2, 132, 142;
   ---teal-darker: 1, 49, 52;
   ---purple-lighter: 246, 240, 253;
   ---purple-light: 227, 208, 255;
   ---purple: 156, 105, 222;
   ---purple-dark: 80, 36, 143;
   ---indigo-lighter: 244, 245, 250;
   ---indigo-light: 178, 188, 246;
   ---indigo: 93, 106, 196;
   ---purple-darker: 35, 0, 81;
   ---indigo-dark: 32, 45, 121;
   ---indigo-darker: 0, 6, 56;
   ---yellow-lighter: 251, 242, 205;
   ---yellow-light: 255, 233, 138;
   ---yellow: 238, 193, 2;
   ---yellow-dark: 156, 111, 25;
   ---orange: 255, 152, 0;
   ---orange-light: 255, 204, 128;
   ---yellow-darker: 87, 59, 0;
   ---orange-dark: 230, 81, 0;
   ---orange-lighter: 255, 240, 219;
   ---orange-darker: 71, 25, 0;
   ---red-lighter: 250, 233, 230;
   ---red: 222, 54, 23;
   ---red-light: 254, 173, 154;
   ---red-darker: 51, 0, 1;
   ---red-dark: 191, 7, 16; }
.WNDdock {
   position: relative;
}

#WNDdockBottom {
   height: 25vh;
   width: 100%;
   grid-column: 1/2;
   grid-row: 3/4;
}

#WNDdockRight {
   height: 100%;
   width: 350px;
   grid-column: 2/3;
   grid-row: 2/4;
}

.WNDresizeDockY {
   position: absolute;
   width: 100%;
   height: 15px;
   top: -5px;
}

.WNDresizeDockX {
   position: absolute;
   width: 15px;
   top: 0px;
   height: 100%;
   left: -4px;
   z-index: 10;
}

.WNDdockPhantom {
   background: #e2e5e8;
   position: absolute;
   z-index: 6;
}

.WNDdockBottomPhantom {
   width: 100%;
   bottom: 0px;
   display: none;
}

.WNDdockRightPhantom {
   min-width: 200px;
   width: 33%;
   height: calc(100% - 50px);
   right: 0px;
   display: none;
   bottom: 0px;
}

#WNDdockTabs {
   display: flex;
}

.WINDhidden {
	display: none;
}

#WNDdockBottom {
	border-top: 1px solid var(--grey-400);
}

#WNDdockRight {
	border-left: 1px solid var(--grey-400);
	z-index: 5;
	/* Needs to be a value that is high enough to prevent code in the editor window from bleeding through */
}

.WNDresizeDockY {
	cursor: ns-resize;
}

.WNDresizeDockX {
	cursor: ew-resize;
}

#WNDdockTabs {
	height: 28px;
	justify-content: space-between;
	background: var(--grey-200);
	padding: 0px 4px 0px 0px;
	box-shadow: inset 0 -1px 1px 0px var(--grey-400);
	/* create illustion of a bottom border using an inset shadow */
}

#WNDdockTabs .button-group {
	align-self: center;
	flex-shrink: 0;
}

#WNDdockTabs .button-group {
	padding: 2px;
	margin-left: 0px;
	text-align: right;
	display: flex;
}

#WNDdockTabsList {
	display: flex;
	align-items: stretch;
	max-width: calc(100% - 48px);
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	margin: 0;
	padding-inline-start: 0px;
}

#WNDdockTabsList li {
	list-style-type: none;
	margin: 0;
	background-color: var(--grey-200);
	border-right: 1px solid var(--grey-300);
	border-bottom: 1px solid var(--grey-400);
	padding: 0px 8px;
	display: flex;
	align-items: center;
	font-size: 11px;
	width: 140px;
	min-width: 64px;
	color: var(--grey-600);
	position: relative;
	opacity: 0.75;
}

#WNDdockTabs #WNDdockTabsList li:hover {
	/* background: rgba(226, 229, 232, 0.5); */
	background-color: var(--white);
	color: var(--grey-700);
	opacity: 1;
}

#WNDdockTabs #WNDdockTabsList .selected {
	background-color: var(--white);
	border-right: 1px solid var(--grey-400);
	border-left: 1px solid var(--grey-400);
	border-bottom: 1px solid var(--white);
	margin-bottom: -1px;
	color: var(--grey-800);
	opacity: 1;
}

#WNDdockTabs #WNDdockTabsList li.selected:first-child {
	border-left: 0px;
}

#WNDdockTabs #WNDdockTabsList .selected:hover {
	background-color: var(--white) !important;
}

#WNDdockTabs #WNDdockTabsList li .WNDtitleGroup {
	display: flex;
	flex-wrap: nowrap;
	overflow: hidden;
	min-width: 20px;
	margin-left: 4px;
	/* Icon width + 4px right margin */
}

#WNDdockTabsList li .WNDtitleGroup .WNDtitleIcon {
	height: 16px;
	width: 16px;
	background-position: center;
	background-repeat: no-repeat;
	margin-right: 8px;
	flex-shrink: 0;
}

#WNDdockTabs #WNDdockTabsList li .WNDtitleGroup .WNDtitle {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	user-select: none;
	/* Likely future */
}

#WNDdockTabs #WNDdockTabsList li .button-group {
	display: flex;
	white-space: nowrap;
	flex-shrink: 0;
}

#WNDdockTabs #WNDdockTabsList li .button-group {
	margin-left: 0px;
	background-color: transparent;
}

#WNDdockTabs #WNDdockTabsList li .button-group img {
	width: 13px;
	height: 13px;
}

.WNDdockContent {
	/* padding: 16px; */
	overflow: auto;
	height: calc(100% - 32px);
	/* Subtract height of tabs container */
	width: 100%;
	position: relative;
}

.WNDdockContent ul#WNDdockContent {
	height: 100%;
	margin: 0px;
	padding: 0px;
}

.WNDdockContent ul#WNDdockContent>li {
	list-style-type: none;
	height: 100%;
	background-color: white;
}

.WNDdockContent ul#WNDdockContent>li .WNDcontent {
	height: 100%;
	padding: 0px;
	margin: 0px;
}

@keyframes tab-highlight {
	from {
		background: var(--blue-lighter);
		border: 1px solid rgba(37, 144, 205, 0.75);
		margin-top: -1px;
		margin-left: -1px;
		margin-right: 1px;
		border-bottom: 1px solid var(--blue-lighter);
		margin-bottom: -2px;
		z-index: 10;
	}

	to {
		background: var(--white);
		border: 1px solid var(--grey-300);
		margin-top: -1px;
		margin-left: -1px;
		margin-right: 1px;
		border-bottom: 1px solid rgba(255, 255, 255, 0);
		margin-bottom: -2px;
	}
}

@keyframes tab-content-highlight {
	from {
		border: 1px solid rgba(37, 144, 205, 0.75);
		box-shadow: inset 0 0 8px rgba(37, 144, 205, 0.5);
	}

	to {
		border: 1px solid transparent;
		box-shadow: inset 0 0 8px rgba(37, 144, 205, 0);
	}
}

.WNDdock.WNDhighlight #WNDdockTabs #WNDdockTabsList li.selected {
	animation: tab-highlight 0.75s;
	animation-timing-function: ease-in;
}

.WNDdock.WNDhighlight .WNDdockContent::before {
	content: "";
	position: absolute;
	display: block;
	top: 0px;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	pointer-events: none;
	animation: tab-content-highlight 0.5s;
	animation-timing-function: ease-in;
}

#WNDdockTabsList {
	--scrollbarBG: var(--grey-200);
	--thumbBG: #d2dde8;
	scrollbar-width: thin;
	scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}

#WNDdockTabsList::-webkit-scrollbar {
	width: 8px;
	height: 8px;
	border-bottom: 1px solid var(--grey-400);
}

#WNDdockTabsList::-webkit-scrollbar-track {
	background: var(--scrollbarBG);
	border-bottom: 1px solid var(--grey-400);
}

#WNDdockTabsList::-webkit-scrollbar-thumb {
	background-color: var(--thumbBG);
	border-radius: 4px;
	border: 2px solid var(--scrollbarBG);
	border-bottom: 1px solid var(--grey-400);
}

.WNDdockContent ul#WNDdockContent li[id^="content-"] {
	margin: 0px;
}

.WNDwindow {
	position: fixed; /*IX-3778 changing position from absolute to fixed*/
	background-color: var(--white);
	display: block;
	border: 1px solid var(--grey-400);
	border-radius: var(--border-radius);
	min-width: 300px;
	min-height: 200px;
	box-shadow: 0 2px 8px 0 rgba(var(---grey-600), 0.25);
}

.WNDresizeY {
	position: absolute;
	cursor: ns-resize;
	width: 100%;
	height: 15px;
}

.WNDresizeX {
	position: absolute;
	cursor: ew-resize;
	width: 15px;
	top: 0px;
	height: 100%;
}

.WNDcorner {
	position: absolute;
	width: 15px;
	height: 15px;
}

.WNDes {
	cursor: nwse-resize;
	bottom: -8px;
	right: -8px;
}

.WNDen {
	cursor: nesw-resize;
	top: -8px;
	right: -8px;
}

.WNDws {
	cursor: nesw-resize;
	bottom: -8px;
	left: -8px;
}

.WNDwn {
	cursor: nwse-resize;
	top: -8px;
	left: -8px;
}

.WNDn {
	top: -8px;
}

.WNDs {
	bottom: -8px;
}

.WNDe {
	right: -8px;
}

.WNDw {
	left: -8px;
}

.WNDcontent {
	box-sizing: border-box;
	overflow: auto;
	height: calc(100% - 29px);
	/* Subtract the title bar height */
	width: 100%;
	position: relative;
	/* padding: 2px !important; */
}

/*  Animation for showing currently selected window  */
@keyframes window-highlight {
	from {
		border: 1px solid rgba(var(---blue), 0.75);
		box-shadow: 0 2px 16px 0 rgba(var(---blue), 0.5);
	}

	to {
		border: 1px solid var(--grey-400);
		box-shadow: 0 2px 8px 0 rgba(var(---grey-600), 0.25);
	}
}

.WNDwindow.WNDhighlight {
	animation: window-highlight 0.5s;
	animation-timing-function: ease-in;
}

.WNDmoveXY {
	cursor: move;
	height: 28px;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	background-color: var(--grey-200);
	border-radius: 4px 4px 0px 0px;
	border-bottom: 1px solid var(--grey-300);
	padding: 0px 8px 0px 2px;
}

.WNDmoveXY .WNDtitleGroup {
	flex-grow: 1;
	display: flex;
	flex-wrap: nowrap;
	overflow: hidden;
	padding-left: 8px;
}

.WNDmoveXY .WNDtitleGroup .WNDtitleIcon {
	max-height: 16px;
	max-width: 16px;
	background-position: center;
	background-repeat: no-repeat;
	margin-right: 8px;
	flex-shrink: 0;
}

.WNDmoveXY .WNDtitleGroup .WNDtitle {
	color: var(--grey-600);
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex-grow: 1;
}

.WNDmoveXY .button-group {
	display: flex;
	flex-wrap: nowrap;
}

.WNDmoveXY .button-group {
	padding: 2px;
	margin-left: 0px;
	text-align: right;
}

.WNDmoveXY .POPpopover {
	display: none;
	position: absolute;
	min-width: 90px;
	text-transform: none;
	top: 10px;
	left: -48px;
	text-align: left;
}

.WNDdockWinBottom,
.WNDdockWinRight,
.WNDcloseWin,
.WNDtitleDockAll,
[class^="WNDtitleDockAll"],
.WNDundockTab,
.WNDcloseTab,
.WNDundockAll,
.WNDcloseDock {
	border-style: none;
	background-color: transparent;
	background-repeat: none;
	border-radius: var(--border-radius);
	height: 20px;
	width: 20px;
	padding: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.WNDdockWinBottom:hover,
.WNDdockWinRight:hover,
.WNDcloseWin:hover,
.WNDtitleDockAll:hover,
[class^="WNDtitleDockAll"]:hover,
.WNDundockTab:hover,
.WNDcloseTab:hover,
.WNDundockAll:hover,
.WNDcloseDock:hover {
	background-color: var(--grey-300);
}

.WNDbuttonGroup {
	display: flex;
	/* cursor: pointer; */
}

.WNDtab {
	cursor: pointer;
}

.WNDmoveXY .POPpopover .POPpopover-contents {
	padding: 8px;
}

.WNDmoveXY .POPpopover .POPpopover-contents p {
	white-space: nowrap;
	margin-top: 0px;
	margin-bottom: 4px;
	display: flex;
	align-items: center;
	color: var(--grey-600);
	padding: 2px 4px;
}

.WNDmoveXY .POPpopover .POPpopover-contents p:hover {
	color: var(--blue);
}

.WNDmoveXY .POPpopover .POPpopover-contents p img {
	margin-right: 6px;
}

.WNDmoveXY .POPpopover {
	left: -3px;
	top: 6px;
	display: block;
}

.WNDtitleButtons {
	display: flex;
	align-items: center;
	cursor: pointer;
	user-select: none;
	column-gap: 4px;
	margin-left: 8px;
}
.WNDdockWinBottom,
.WNDdockWinRight,
.WNDundockTab{
	display: none;
}
.WNDtab.selected .WNDdockWinBottom,
.WNDtab.selected .WNDdockWinRight,
.WNDtab.selected .WNDundockTab{
	display: flex;
}