.propertyPage{
  margin-top: -8px;
  gap: 12px;

}

.propertyPage .propertyEditor{
  font-size:12px;
  padding:3px;
  margin:2px;
}

.booleanBadge{
  width:20px;
  height:20px;
  border-radius:50%;
  border:solid 1px var(--strongBGColor);
  
    overflow:hidden;line-height: 12px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    border: solid 1px var(--mediumBGColor);
    display:inline-block;
    text-align:center;
    padding-top:4px;
    font-size:12px;
}

.hideInput{
  transition:opacity 350ms,  display 350ms; 
  opacity: 0;
  display:none;
}

.btnInput{
  
  top:6px;
  position:relative;
  cursor:default;
  left:-27px;
  width:24px;height: 24px;
  border-radius:25%;overflow: hidden;
  border-color: rgba(0,0,0,0);
}

.alignleft{
  text-align:left !important;
}

.alignright{
  text-align:right !important;
}

.aligncenter{
  text-align: center !important;
}

.booleanBlock{
  width:20px;
  height:20px;
  padding-top:4px;
  border:solid 1px var(--strongBGColor);
  
    overflow:hidden;line-height: 12px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    border: solid 1px var(--mediumBGColor);
    display:inline-block;
    text-align:center;
    
    font-size:12px;
}

.booleanBadgeYes{
  background-color:var(--strongBGColor);
  color:var(--strongColor);
}

.booleanBadgeNo{
  background-color:var(--mediumBGColor);
}

.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  border: 1.5px solid #ddd;
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

.radio-list{
  list-style: none;
  white-space: nowrap;
  display:inline-block;
  padding-left :2px;
  margin: 0px !important;
  margin-top: 1px !important;
}

.radio-list li{
  display:inline-block;
  white-space: nowrap;
  margin:0px !important;
  /* padding-top: 2px;
  padding-bottom: 2px; */

}

.propertyEditorButton .editorCombo {
  height: 12px !important;

}

.radio-list button{
  font-size:11px;
  border-radius: 4px;
  background-color: white;
  color: black;
  border: 1.5px solid #d0d0d0;
  padding: 3px 8px !important;
  margin-bottom: 0px !important;
  margin-right: 2px;
}

.radio-list button.btn-primary-theme{
  background-color: #102b7c;
  color: white;
  border: 1.5px solid #102b7c;
}

.radio-list li:first-child button{
  border-radius: 4px;
}

.radio-list li:last-child button{
  border-radius: 4px;
  margin: 0px !important;
}

.form-note{
  border-bottom:solid 2px #909090;
  color:#909090;
  padding:6px 12px 6px 12px ;
  font-size: 16px;
  background-color:antiquewhite;
}

.timelineLabel{
  background-color:var(--strongBGColor);
  border:solid 1px var(--strongColor);
  padding:6px 12px 6px 12px;
  margin-bottom:5px;
  margin-top:5px;
  margin-left:0px;
  border-radius:6px;
  color:var(--strongColor);
  display:inline-block;
 position:relative;
  
}

.timelineTR{
  background-color:rgba(0,0,0,0) !important;
  border-left-color:rgba(0,0,0,0) !important;
  border-right-color:rgba(0,0,0,0) !important;
}

.timelineTR td{position:relative;}

.timelineLine{
  margin-left:10px;
  width:2px;
  min-width: 2px;
  height:50px;  
  background-color:var(--viewBorder);
  position:absolute;
  left:5px;
  top:0px;
  display:inline-block;
  z-index: 0;
}

.inputError{
  border-left: 5px solid darkred;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.errMessage{
  display:none;background-color:lightyellow;color:darkred;padding:3px;margin:3px;
}

.inputError .errMessage{
  display:inline-block;
}

.messageError{
  border:solid 1px red;
  padding:10px;
  background-color:#ffaaaa;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;

}

.editSizeTiny{
  display:inline-block;
  max-width:49%;min-width:49%;
  overflow:hidden;
}

.editSizeTiny input{
  max-width:100px;
}

.dropdown-item{
  font-size:12px;
  max-width:300px;
}

.btn-xs {
  font-size:13.3px;
  padding: 3px 6px;
  border-radius:3;

}

.viewToolbarButton {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 8px !important;
    line-height: 1 !important;
}

.viewToolbarButton .material-symbols-outlined,
.viewToolbarButton span.bi {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* Make small toolbar primary buttons look like default toolbar buttons: white bg, no border,
   but show a black border on hover for affordance. Scoped to view toolbar buttons. */
.viewToolbarButton.btn-xs.btn-primary-theme{
  background-color: transparent !important;
  border: none !important;
  color: black !important;
}
.viewToolbarButton.btn-xs.btn-primary-theme:hover{
  background-color: rgb(242, 242, 242) !important;
}

/* Mirror the same toolbar styling for default-theme small toolbar buttons */
.viewToolbarButton.btn-xs.btn-default-theme{
  background-color: transparent !important;
  border: none !important;
  color: black !important;
}
.viewToolbarButton.btn-xs.btn-default-theme:hover{
  background-color: rgb(242, 242, 242) !important;
}

.subtextLabel{
  font-size:12px;
  color:var(--mediumBGColor);
  padding:0px 0px 0px 0px;
  margin:0px 0px 0px 0px;
  font-style:italic;
}

/* Ensure the parent container is flexible */
.notepad {
  width: 100%;
  height: 100%;
  resize: both; /* Optional: Allow resizing */
  overflow: auto;
}

/* Ensure CodeMirror fills the parent container */
.CodeMirror {
  height: 100% !important;
  min-height: calc(5 * 1.5em); /* 5 lines with a line height of 1.5em */

  width: 100% !important;
}

/* The rule editor keeps its textarea, Test rule button and test results in one
   block. That block has to grow with the form row it sits in, otherwise it
   shrinks to the textarea's default width and the rule reads a few words wide. */
.ruleEditorWrap{
  flex:1 1 auto;
  min-width:0;
}

.boundFrame{
  width:calc(100% - 40px);
    min-height:20px;
    overflow-x:hidden;
    margin:5px 10px 5px 10px;
    padding:5px;
}


.processSlicer{
  display:inline-block;
  white-space: nowrap;
  margin:4px;
}

.processSlicer label{
  font-weight:bold;
}
.processStrip{
  display:inline-block;
  white-space: nowrap;
  margin:4px;
}

.processStrip .processStep{
  display:inline-block;
  padding:0px;
  margin:0px;
  border-radius:3px;
  background-color:var(--mediumBGColor);
  color:var(--strongColor);
  
}



.processStep.selected{
  border:1px solid var(--strongBGColor);
  box-shadow: none;
  box-shadow: 
        inset 2px 2px 4px rgba(0, 0, 0, 0.5) /* Adjust the values as needed */
}

.processLink
{
  display:inline-block;
  padding:5px;
  margin:2px;
  color:#000000;
  text-decoration:none;
}

.processLink:visited,
.processLink:hover,
.processLink:active
{
  text-decoration: none;
  color:#000000;
}

.ProcessStepRed{

  border:5px solid #702323;
  color:#EEEEEE !important;
}

.ProcessStepGreen{
  border:5px solid #1c5800;
  
  color:#EEEEEE !important;
}
.ProcessStepEnd{
  
  border-top-right-radius:50% !important;
  border-bottom-right-radius:50% !important;
  
}

.ProcessStepGate {
  border-left:solid 5px #001c98;
  border-right:solid 5px #001c98;
}


.processStep:hover{
  background-color:var(--strongColor);
  color:var(--strongBGColor)  !important;
}



.processBadge{
  display:inline-block;
  padding:5px;
  margin:2px;
  border-radius:3px;
  background-color:"rgba(255,255,255,0.25";
  color:var(--strongColor);
  text-decoration:none; 
}

.processSlicer{
  display:inline-block;
  white-space: nowrap;
  margin:4px;
  margin-top: 12px
}

.processSlicer label{
  font-weight:bold;
}


.processDivider {
   display:inline-block;
   
   margin-left:-5px;
   margin-right:0px;
   font-size:35px;
   position:relative;
   top:8px;
   color:  var(--strongBGColor);
}



.workflow {
  display: flex;
  align-items: center;
  gap: 0; /* No spacing between steps */
  white-space:nowrap;
}

.step {
  position: relative;
  background-color: #DFDFDF; /* Orange */
  color: black;
  padding: 7px 7px;

  margin-right: 21px;
  font-weight: bold;
  border-radius: 1px 0 0 1px;
  max-height:32;
	
}

/* Triangle head */
.step::after {
  content: "";
  position: absolute;
  top: 0;
  right: -20px;
  width: 0;
  height: 0;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-left: 20px solid #DFDFDF; /* Same color as step */
  
}

/* Optional: Dark orange for active step */
.step.active {
  background-color: #FF8C00;
}

.step.active::after {
  border-left-color: #FF8C00;
}

.codingFont{
	font-family: 'Fira Code', monospace;
  font-feature-settings: 'liga' 1; /* Enables ligatures */
	font-size:12px;
}


.table-xs{
  font-size:10px;
  
}

.table th,
.table td {
  /* Your styles here */
  padding: 3px;
  font-size: 10px;
  border: 1px solid #ddd;
  white-space: nowrap;
}

.ruleTestResults{
  width:100%;

  max-height:300px;
  overflow:auto;
}