body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }

.workflowCreateSection{background-image: url(../images/tile.png); background-repeat: repeat; background-size: 30px 30px;}
 
 /* required LIB STYLES */
/* .Treant se automatski dodaje na svaki chart container */
/* overflow must be visible — chart-wrapper provides the clipping viewport */
.Treant { position: relative; overflow: visible !important; padding: 0 !important; }
.Treant > .node,
.Treant > .pseudo { position: absolute; display: block; visibility: hidden; }
.Treant.Treant-loaded .node,
.Treant.Treant-loaded .pseudo { visibility: visible; }
.Treant > .pseudo { width: 0; height: 0; border: none; padding: 0; }
.Treant .collapse-switch { width: 3px; height: 3px; display: block; border: 1px solid black; position: absolute; top: 1px; right: 1px; cursor: pointer; }
.Treant .collapsed .collapse-switch { background-color: #868DEE; }
.Treant > .node img {	border: none; float: left; }


/* optional Container STYLES */
/* chart-wrapper is the visible viewport — it clips via overflow:hidden */
/* workflowPanCanvas fills the viewport so #workflowChart reports correct clientWidth to Treant */
/* #workflowChart (= .chart) must NOT clip — overflow:visible lets nodes render beyond initial bounds */
.chart-wrapper { position: relative; overflow: hidden; height: calc(100vh - 150px); width: 100%; }
.chart { width: 100%; height: 100%; margin: 0; overflow: visible; }
.comments { width: 427px; margin: 15px auto; }
.comments ul { margin-left: 35px; list-style: none; }
.comment {color: #333333; display: inline-block;   font-size: 14px;  margin-top: 6px;  width: 250px;}


.delete-node-btn{ position:absolute; top:-12px; right:-12px; font-size:14px; border:0px; color:#aaa; border-radius:100%;  padding:0px; width:22px; height:22px; text-align:center; }
.workflow-box:hover .delete-node-btn{background:#dc6b66; color:#fff;}

.edit-node-btn{ position:absolute; top:auto; right:-12px; border:0px; font-size:15px; color:#aaa; border-radius:100%;  padding:0px; width:22px; height:22px; text-align:center; }
.workflow-box:hover .edit-node-btn{background:#295d9d; color:#fff;}
 
.Treant .comment h3{ margin:0px; padding:0px; font-size:16px; font-weight:bold; color:#555}
.Treant .comment h3 i{ padding-right:10px; font-size:14px;}
.Treant .comment { margin: 0; text-align:left; }
.workflow-box{ padding: 10px 15px; border: 2px solid #ddd; background:#f9f9f9; border-radius: 5px;  width:100%; position:relative; z-index:999!important }
.Treant .comment .line-truncate{ padding-left:25px; color:#777; display:block; width:100%;}
 
.Treant .comment span.add-node-button{ display:inline-flex; align-items:center; z-index:999; position:relative; width:auto; padding:0; }
.Treant .comment span.add-node-button .btn{ padding:4px 6px 3px!important; text-align:center!important; border-radius:5px; color:#fffefe; background:#3c3838; font-size:16px; font-weight:normal; border:none; display:inline-block; flex-shrink:0; }
.Treant .comment span.add-node-button::before{ content:""; display:block; width:20px; height:2px; background:#7b7878; flex-shrink:0; }
.Treant .comment span.add-node-button:after{ display:none; }

.yes-condition, .no-condition{ width:40px; height:40px; border-radius:100%; margin:0 auto; text-align:center; padding:0px; line-height:37px;}
.yes-condition{border:solid 2px #55D3A6 }
.no-condition{border:solid 2px #F87C80 }

 
.automationpoup .modal-dialog{ width:600px; font-family:Calibri!important}
.automationpoup .modal-content{border-radius:0px; border:none; }
.automationpoup .modal-header{ background:#337ab7} 
.automationpoup .modal-header h4{ font-size:22px; color:#fff; letter-spacing:.5px}
.automationpoup .modal-body{ display:inline-block; width:100%;}
.automationpoup .modal-body h2{font-size:18px; color:#295d9d;  margin:0px 0px 15px; display:inline-block; width:100%; padding:0px;}
.automationpoup .modal-body h5{ margin:0px 0px 15px; padding:0px; color:#555; font-size:18px; display:inline-block; width:100%;}
ul.automation-step-ul{ margin:0px; padding:0px 0px 10px; list-style:none; display:inline-block; width:100%;}
ul.automation-step-ul li{  text-align:center; background:#fff;border:solid 1px #f2f2f2; margin-bottom:-1px; margin-right:-1px; padding:0px;}
ul.automation-step-ul li a{ display:block; padding:10px 5px; color:#32485F; outline:none}
ul.automation-step-ul li a:hover, ul.automation-step-ul li a:hover i{ text-decoration:none; background:#f2f2f2; outline:none}
ul.automation-step-ul li a i{ display:block; font-size:40px;  padding-bottom:5px; color:#295D9D}
 

.automationworkflowmodelbody .panel-heading{ padding:0px;}
.automationworkflowmodelbody h4 a { display:block; padding:10px 15px}
.automationworkflowmodelbody h4 a i{ padding-right:5px;}
.automationworkflowmodelbody .panel-body a{ display:block; font-size:18px; margin-bottom:10px; color:#337AB7; }
.automationworkflowmodelbody .panel-body a i{ padding-right:5px; vertical-align:middle}
.automationworkflowmodelbody a:hover, .automationworkflowmodelbody a:focus{ text-decoration:none; outline:none}
.automationworkflowmodelbody .panel-body a:last-child{margin-bottom:0px;}

.innermodelbx .modal-dialog{ width:600px!important;}
.innermodelbx .modal-dialog .form-group label{ display:block; font-size:14px;}
.innermodelbx .modal-dialog .btn{border-radius:0px;}

.workflow-box.greenborder, .workflow-box.greenborder h3{ border-color:#8DB580; color:#8DB580}
.workflow-box.redborder, .workflow-box.redborder h3{border-color:#E15554; color:#E15554}
.workflow-box.blueborder, .workflow-box.blueborder h3{border-color:#295D9D; color:#295D9D}
.workflow-box.yellowborder, .workflow-box.yellowborder h3{border-color:#F5D100; color:#F5D100}



.alert-message-box { background: #f9f9fb none repeat scroll 0 0; border: 1px dashed #ddd; border-radius: 5px; display: inline-block;  ;  padding: 10px;  width: 100%;}
.alert-message-box.info h3 {  color: #eea236;}
.alert-message-box h3 { font-size: 19px;  margin: 0;  padding: 0;}
.alert-message-box p { color: #999;  font-size: 14px; margin: 8px 0 0 25px; word-spacing: 1px;}
.alert-message-box p {  color: #999;  font-size: 14px; word-spacing: 1px;}









/*new css for workflow */

.workflowTopBar {width: calc(100% + 30px); background: #1b1e26;  padding: 12px 15px 12px;  z-index: 2;  border-bottom: solid 1px #323333; margin: 0px -15px;}    

.sourceDropDown .dropdown-menu .dropdown-item {padding: 10px 30px; color: #9fa2a6}
.sourceDropDown .dropdown-menu .dropdown-item:hover, .sourceDropDown .dropdown-menu .dropdown-item:focus
{background: #1b1b1c; color: #fff}
.sourceDropDown .dropdown-menu .dropdown-item span{ width: 30px;  height: 30px; line-height: 30px; border-radius: 5px; font-size:18px; border-radius: 5px; color: #fff; display: inline-block; margin-right: 5px; text-align: center;}
.sourceDropDown .dropdown-menu .dropdown-item.callData span{background: #5bb280}
.sourceDropDown .dropdown-menu .dropdown-item.directory span{background: #e1b34c}
.sourceDropDown .dropdown-menu .dropdown-item.events span{background: #5480e5}

.sourceDropDown .dropdown-menu .dropdown-item.disabled{text-decoration: line-through;}
.sourceDropDown .dropdown-menu .dropdown-item.disabled span{opacity: .5}

.sourceDropDown .dropdown-menu{margin-left: 20px!important; border-radius: 8px; background: #0b0b0b;}
.sourceDropDown .dropdown-menu:after{  content: ""; position: absolute;  top: 10px;  right: 100%;  margin-top: -5px;  border-width: 10px;  border-style: solid;  border-color: transparent #0b0b0b transparent transparent;}



.workflowSelectModal .modal-content, .workflowSelectModal .MuiDialog-paper, .workflowSelectModal .MuiPaper-root{ background:var(--modalBg); border-radius:17px; box-shadow:0px 0px 11px #0000000f; border: solid 8px #ffffff2e; }
.workflowSelectModal .modal-dialog{max-width:800px; border: solid 8px #ffffff2e; border-radius: 17px;}
/* MUI DialogTitle reset for modal header look */
.workflowSelectModal .MuiDialogTitle-root{ border-bottom: none; color: var(--titletext); }
/* MUI DialogContent zero-padding when modal-body is used */
.workflowSelectModal .MuiDialogContent-root{ padding: 0; }
/* MUI DialogActions */
.workflowSelectModal .MuiDialogActions-root{ border-top: solid 1px var(--sparatorBorder, #e3e3e3); }
.workflowSelectModal .modal-header{border-bottom: none; position: relative; padding: 0px 50px 0px; flex-direction: column;}
.workflowSelectModal .s_headingOne{color: var(--titletext); font-size: 28px; font-weight: 300; display: inline-block;}
.workflowSelectModal .s_descrptn{font-size: 18px; color: var(--textGray); margin-top: 5px; font-weight: normal;}
.workflowSelectModal .modal-header .close{position: absolute; right: 35px; top: 25px;    text-align: center;
	text-shadow: none; color: var(--textGray);	padding: 0;	border-radius: 50%; opacity: 1; font-weight: 300; font-size: 50px; z-index: 99}

.WfieldLabel{font-size: 16px; color: var(--blackMedium)} 

.workflowSelectModal .modal-header .close:hover, .workflowSelectModal .modal-header .close:focus{color: var(--blackMedium); opacity:1  }

.seetingChooseOption{padding: 20px 20px 50px; border-radius:15px 15px 0px 0px; background: #00000075; border-bottom: solid 1px #3c3b3b;}
[data-theme="light"] .seetingChooseOption{background: #f0f0f0; border-color:var(--BorderColor2)	}

.workflowSelectModal .moduleChooseBlock{padding: 30px;}

.workflowSelectModal .modal-body{padding:20px; min-height:600px; }

.settingBlockHdng{color: #d5ae3b ; font-size: 16px; display: block;}
[data-theme="light"] .settingBlockHdng{color:#222 }

.sourceAcBox{display: block; margin-top: 20px; position: relative;} 
.sourceAcBox button{display:block;  width: 100%; border-radius: 5px; background: #353434; padding:20px 10px;  border:solid 1px #e3e0d229; text-align:center; cursor:pointer; }
[data-theme="light"] .sourceAcBox button{ background: #fff;  border:solid 1px #e3e0d2;} 
.sourceAcBox button span{width: 40px;	height: 40px;	line-height: 40px;	font-size: 21px;	border-radius: 50%;	text-align: center;	background: #f2f2f2; display:inline-block; } 
.sourceAcBox button font, .sourceAcBox button .module-label{font-size: 16px; margin-top: 8px; font-weight: normal; color: var(--textdark2) !important; display: block; width: auto !important; height: auto !important; border-radius: 0 !important; background: transparent !important; line-height: normal !important; text-align: center;}
 

.sourceAcBox.action button{background-color: #2086DF33; color: #2086DF70; border-color: #2086DF70}
.sourceAcBox.action button span{background-color: #2086DF33; color: #2086DF}

.sourceAcBox.condition button{background-color: #7661c833; color: #7661c870; border-color: #7661c870}
.sourceAcBox.condition button span{background-color: #7661c833; color: #7661c8}

.sourceAcBox.fetch button{background-color: #328B0033; color: #328B0070; border-color: #328B0070}
.sourceAcBox.fetch button span{background-color: #328B0033; color: #328B00}

.sourceAcBox.goto button{background-color: #dd7b1133; color: #dd7b1170; border-color: #dd7b1170}
.sourceAcBox.goto button span{background-color: #dd7b1133; color: #dd7b11}

.sourceAcBox.end button{background-color: #df545433; color: #df545470; border-color: #df545470}
.sourceAcBox.end button span{background-color: #df545433; color: #df5454}

.sourceAcBox.webhook button{background-color: #0097A733; color: #0097A770; border-color: #0097A770}
.sourceAcBox.webhook button span{background-color: #0097A733; color: #0097A7}
 

.chooseAcBox{display: block; margin-top: 20px; position: relative;} 
.chooseAcBox button{display:block;  width: 100%; border-radius: 5px; background: #3c3a3a; padding:20px 15px;  border:solid 2px #514949; text-align:center; cursor:pointer;  min-height: 160px;}
.chooseAcBox button span{display: block; font-size: 25px; display:inline-block; width:50px; height:50px; border-radius:5px; color:#ffffff87;  }
.chooseAcBox button font{font-size: 18px; font-weight: normal; color: #fff; display: block;}
.chooseAcBox button:hover{border-color: #A4821E; background: #2d2a2a}  

.stepBackBtn{   border: none; color: var(--customBtncolor2); background: var(--chipBg2); font-size: 22px;   border-radius: 50%; text-align: center; width: 35px; height: 35px; margin-right: 10px; line-height:19px; vertical-align: super}
 

.multiselectDropBtn{background: var(--formControlBg); color: var(--formControlText); border: solid 1px var(--BorderColor2); padding: 5px 10px; border-radius: 5px; margin-right: 5px; font-size: 15px; width: 100%; text-align: left;}
.multiselectDropBtn:hover, .multiselectDropBtn:focus,.multiselectDropBtn:visited{background: var(--formControlBg); color: var(--formControlText);}
.multiselectDropBtn i{position: absolute; right: 10px; top: 10px; color: #666}
.multiselectDropBtn:after{display: none!important;}
.multiSelectDropDown{width: 320px; background: var(--dropdownBg); margin-top: 8px; box-shadow: 0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}
.multiSelectDropDown:after{
  width: 0;  height: 0;   border-left: 8px solid transparent;  border-right: 8px solid transparent;   border-bottom: 8px solid var(--dropdownBg); position: absolute; top: -8px; left: 40px; content: "";
}

.dropup .multiSelectDropDown:after{bottom: -8px; top: inherit; border-top: 8px solid #373737; border-bottom: inherit;}
 

.multiSelectDropDown .nav-tabs{border-color:   #ffffff26}
.multiSelectDropDown .nav-tabs .nav-link{  padding: 4px 5px; background: none; border-radius: 0px; border:0px; color: #cdcdcd; font-size: 14px;}
.multiSelectDropDown .nav-tabs .nav-link.active{border-bottom: solid 2px #EA9108}
.multiSelectDropDown .serach_bx_sec{ display: inline-block; width: 100%; padding: 10px; }
.multiSelectDropDown .serach_bx_sec .serach_bx_inner{ width: 100%; background-color: var(--formControlBg); padding: 4px 10px 6px; border-radius: 4px; color: var(--formControlText) }
.multiSelectDropDown .serach_bx_sec .serach_bx_inner i{vertical-align: middle; font-size: 12px;}
.multiSelectDropDown .serach_bx_sec .serach_bx_inner input{background: transparent; border: 0px; width: auto; color: #cdcdcd; font-size: 13px; 
	vertical-align: middle;}
	.multiSelectDropDown .serach_bx_sec .serach_bx_inner input:hover, .multiSelectDropDown .serach_bx_sec .serach_bx_inner input:focus{box-shadow: none; outline: none;}
.multiSelectDropDown .serach_bx_sec .serach_bx_inner input::-webkit-input-placeholder {color: #cdcdcd; opacity: 1}
.multiSelectDropDown .serach_bx_sec .serach_bx_inner input:-ms-input-placeholder { color: #cdcdcd;  opacity: 1}
.multiSelectDropDown .serach_bx_sec .serach_bx_inner input::placeholder { color: #cdcdcd;  opacity: 1}
.MS_DropList {display: block;}
.MS_DropList ul{list-style: none; margin: 0px; padding: 0px;  max-height: 260px; min-height: 150px; overflow: auto;}
.MS_DropList ul li{display: inline-block; width: 100%; font-size: 14px; color: #cdcdcd; padding: 3px 15px; white-space: normal;
 word-break: break-all; }
.MS_DropList ul li label.custom-control-label{cursor: pointer; color: var(--textdark2);}
.MS_DropList ul li label.custom-control-label::before{background: #ffffff36; border-color: #7b7b7b }
.MS_DropList ul li .L_Id{color: var(--textID); display: inline-block; width: 50px; font-size: 13px; vertical-align: top;}
.MS_DropList ul li .L_Name{display: inline-block;  width:calc(100% - 50px); white-space: nowrap; text-overflow: ellipsis; white-space: nowrap;}
.MS_DropList ul hr{border-color: #ffffff1f; margin: 0px;}
.MS_DropList li a{color: #cdcdcd; font-size: 13px;}
.MS_DropList li:hover a{color: #fff}
 
.multiSelectDropDown .apply_btn_sec{display: inline-block; width: 100%; padding:9px 5px 1px; text-align: center; border-top: solid 1px var(--sparatorBorder); margin-top: 10px}
.multiSelectDropDown .apply_btn_sec .apply_btn{padding: 5px 30px; border-radius: 20px; border:none; font-size: 14px; background: #007bff; color: #ffffffe8}

.SkipFilterSec{background: var(--lightGrayBg); padding: 15px; border-radius: 5px; margin-top: 20px;}
.SkipFilterSec .form-control{background:var(--formControlBg); color: var(--formControlText); border: solid 1px var(--BorderColor2); padding: 5px 10px; border-radius: 5px; height: inherit; font-size: 15px;}
.SkipFilterSec .multiselectDropBtn{background:var(--formControlBg); border: solid 1px  var(--BorderColor2); color: var(--formControlText);}
.SkipFilterSec .multiselectDropBtn:hover{background:var(--formControlBg); border: solid 1px var(--BorderColor2);}
.SkipFilterSec .ifelseSelcBtn{background:#2b2b2b; border: solid 1px #2b2b2b; font-size: 15px;}

.workflowSelectModal .TriSea-technologies-Switch > label::before{background: rgb(79, 78, 78); opacity: 1}
[data-theme="light"] .workflowSelectModal .TriSea-technologies-Switch > label::before{background: #ddd; box-shadow: none}

.condtext{color: #d98383; font-size: 16px;}
[data-theme="light"] .condtext{color:#232628 }


/*---------------*/


/*workflow module Selection modal*/
.wFModuleSelectionModal .modal-dialog{max-width: 800px;}  
.TitleInput{display: block;  width: 100%; padding: 9px 10px 9px 10px; background: var(--formControlBg); color: var(--textmBlue); font-size: 18px; border: dashed 1px var(--BorderColor2); border-radius: 4px;}
.TitleInput:hover, .TitleInput:focus{ background: var(--formControlBg); box-shadow: none; outline: none;  color: var(--textmBlue);  border: dashed 1px var(--BorderColor2); }

.TitleInput::placeholder{color: var(--textLight2);}

.InputClass {background: var(--formControlBg); color: var(--formControlText); border:none; padding: 5px 10px;border-radius: 5px;margin-right: 5px;font-size: 14px;	width: 100%;text-align: left;}
.InputClass:focus{background: var(--formControlBg);;color: var(--formControlText); border:none; outline: none; box-shadow: none}
.InputClass:disabled, .InputClass[readonly]{ background:var(--formControlBg); }
 
.inputfieldTitle{display: block;   color: #a37329;  font-size: 16px;  margin-bottom: 5px;}
[data-theme="light"] .inputfieldTitle {  color: var(--blackMedium);   }



.actionselectDropdown{font-size: 18px!important}

.actionSettingBox{ }
.actionSettingBox h3{color:cornflowerblue; font-size: 17px; font-weight: normal;  font-family: Comfortaa; border-bottom: solid 1px #dddddd14; padding-bottom: 10px; margin-bottom: 10px;}

/*.modalInnerContantScorll{  max-height: calc(100vh - 300px); min-height: 400px; overflow-y: auto;}*/
.modalInnerContantScorll{   min-height: 400px;  }

#skipPortion.modalInnerContantScorll{overflow-y: visible;}

   
.filterMainCase{background: #f9f9f9;padding: 15px;border-radius: 5px; position: relative; border:solid 1px #eee;}
[data-theme="dark"] .filterMainCase{background: rgba(0,0,0,.13); border-color: #55555578}


.filterMainCase .caseName{ position:absolute; top:-25px; left:20px; padding:2px 5px; background:#f9f9f9; border-radius:5px 5px 0px 0px; padding:2px 15px 0px; font-size: 15px;  color: var(--textmBlue); border:solid 1px #eee; border-bottom: 0px;}
.filterMainCase .caseName input{ background:none; border:none; outline:none; color:  var(--textmBlue); font-size:15px; }

[data-theme="dark"] .filterMainCase .caseName{background: #222425; border-color: #55555578;}

.andOrCondiSelect{color: var(--textblack7);   background: var(--formControlBg); border: solid 1px var(--BorderColor2); padding: 4px; font-size: 15px; border-radius: 5px;}
[data-theme="dark"] .andOrCondiSelect{color: #d98383 }


.filterSelectDrop {	background: var(--formControlBg);color: var(--formControlText);border:none; padding: 6px 10px;border-radius: 5px;margin-right: 5px;font-size: 14px;	width: 100%;text-align: left; width: 100%}
.filterSelectDrop .textbox {background: none;	border: none;	outline: none;	width: 94%;	color: var(--formControlText);	font-size: 14px;	font-weight: 400;}
.filterSelectDrop a.angleDown{color:var(--formControlText); font-size: 10px; float: right; margin-top: 4px;}

.conditionSuggBox{	background: var(--dropdownBg); border:solid 1px var(--BorderColor2); min-width: 300px; width: fit-content;   left: 0px!important; min-height: 200px; max-height: 290px; overflow: auto; position: absolute;}
.conditionSuggBox .cond_sugeList{list-style: none; margin: 0px; padding: 0px;}
.conditionSuggBox .cond_sugeList li{display: inline-block; width: 100%; padding: 0px; color: var(--textblack7); font-size: 14px;}
.conditionSuggBox .cond_sugeList li a{display: block; color: var(--textblack7);  padding: 4px 2px 4px 30px; font-size: 13px;}
.conditionSuggBox .cond_sugeList li a:hover{background: var(--dropdownmenuhoverBg);}
.conditionSuggBox h3{font-size: 16px; color: var(--textmBlue) ; padding-left: 15px; margin-top: 5px; margin-bottom: 5px; font-weight: normal;}

.filterMainCase .deleteCaseBtnSec{position: absolute; right: -10px; top: 	-12px}
.filterMainCase .deleteCaseBtnSec button{width: 25px; height: 25px; border-radius: 50%; font-size: 13px; outline: none; border: solid 1px #ddd; background: #fff; display: inline-block; color:#333;}

 


.addMoreCaseBtnDiv .btn:hover, .addMoreCaseBtnDiv .btn:focus, .addMoreCaseBtnDiv .btn:visited, .addMoreCaseBtnDiv .btn:active:focus{box-shadow: none; outline: none}

.addMoreCaseBtnDiv .btn:not(:disabled):not(.disabled).active:focus, .addMoreCaseBtnDiv .btn:not(:disabled):not(.disabled):active:focus{box-shadow: none;}



.casechildBx{	background: #fff; padding: 10px;	border-radius: 5px;	border: solid 1px #eee; margin-bottom: 10px; position: relative;}
[data-theme="dark"] .casechildBx{background: #423f3f4a; border-color: #393838;}
.casechildBx .deletechildCaseBtn{position: absolute; right: -14px; top: 30%; z-index:1 }
.casechildBx .deletechildCaseBtn button{width: 28px; height: 28px; border-radius: 50%; font-size: 12px; outline: none; border: solid 1px #ddd; background: #fff; display: inline-block; color:#333;}
[data-theme="dark"] .deletechildCaseBtn button, [data-theme="dark"]  .filterMainCase .deleteCaseBtnSec button{background: #353434; border-color: #73777678; color: #ffffffd1}

.whereTag{font-size: 15px; color: var(--textblack7);}
[data-theme="dark"] .whereTag{color: #d98383;}
/*workflow module Selection modal*/



.WorkflowBox .workflowhdngbox{padding: 9px 13px; border:dashed 1px #6a5a74; background:#25212f;border-radius:10px;width: 250px;position: relative;   }
.WorkflowBox.callData .workflowhdngbox{border:solid 2px #38b374; background:#38b37433; }
.WorkflowBox.directory .workflowhdngbox{border:solid 2px #cc9d34; background:#cc9d3433; }
.WorkflowBox.Events .workflowhdngbox{border:solid 2px #5480e5; background:#5480e533;  } 

.WorkflowBox .workflowhdngbox h2{color: var(--text-dark2); text-align: center; font-size: 18px; font-weight: 400; margin-top: 0px; display: inline-block; vertical-align: middle;}
.WorkflowBox .workflowhdngbox span.sourceIcon{  font-size: 18px; text-align: center; display: inline-block; width: 35px; height: 35px; line-height: 35px; background: #fbfbfb1f; margin-right: 10px; vertical-align: middle; border-radius: 50%;}
.WorkflowBox.callData .workflowhdngbox span.sourceIcon{color: #38b374; background: #38b37433}
.WorkflowBox.directory .workflowhdngbox span.sourceIcon{color: #cc9d34; background: #cc9d3433}
.WorkflowBox.Events  span.sourceIcon{color: #5480e5; background: #5480e533} 
 
/* node container: flex row so the visual box and + button sit side by side */
.workflowNodeSec.node { display: flex; flex-direction: row; align-items: center; }

/* add-node-button: horizontal layout (tree grows left → right) */
.workflowNodeSec span.add-node-button {
    display: inline-flex;
    align-items: center;
    position: relative;
    width: auto;
    padding: 0 0 0 0;
    margin: 0;
    flex-shrink: 0;
}
.workflowNodeSec span.add-node-button .btn {
    padding: 0 !important;
    width: 28px; height: 28px; line-height: 28px;
    text-align: center !important;
    border-radius: 5px;
    border: solid 1px #ccc;
    background: #f2f2f2;
    font-size: 15px;
    font-weight: normal;
    display: inline-block;
    flex-shrink: 0;
}
[data-theme="dark"] .workflowNodeSec span.add-node-button .btn { color: #fffefe; background: #3c3838; border: none; }
.workflowNodeSec span.add-node-button .btn i { color: var(--textGray); }

/* horizontal stem line to the left of the + button */
.workflowNodeSec span.add-node-button::before {
    content: "";
    display: block;
    width: 20px; height: 2px;
    background: #ccc;
    flex-shrink: 0;
}
[data-theme="dark"] .workflowNodeSec span.add-node-button::before { background: #4c5560; }
/* remove old vertical stem */
.workflowNodeSec span.add-node-button::after { display: none; }

.workflowNodeSec .delete-node-btn {	position: absolute;	top: -12px;	right: -12px;	font-size: 12px;	border: 0px;	color: #aaa;	border-radius: 100%;padding: 0px;width: 22px;
	height: 22px;	text-align: center;	background: #000; opacity: 0; z-index: 2}
[data-theme="light"] .workflowNodeSec .delete-node-btn, [data-theme="light"] .workflowNodeSec .edit-node-btn {background: #f2f2f2; color: #666}	

.workflowNodeSec .delete-node-btn:hover{background: #dc6b66; color: #fff;}
.workflowNodeSec .edit-node-btn {position: absolute;top: auto; bottom: 42px;	right: -12px; border: 0px; font-size: 11px; color: #aaa; border-radius: 100%; padding: 0px;	width: 22px; height: 22px;
	text-align: center; background: #000; opacity: 0; z-index: 1}
.workflowNodeSec .edit-node-btn:hover{background: #295d9d; color: #fff;}
.workflowNodeSec:hover .delete-node-btn, .workflowNodeSec:hover .edit-node-btn{opacity: 1}


/* ── horizontal tree layout: + button to the RIGHT of the node box ── */

/* Module node outer shell — visual box only, button is a sibling outside this */
.flowSetingDtlouterBx { width: auto; padding: 10px; border-radius: 10px; border: solid 2px #4c5560; background: #1b1e26; }

/* Setting/source node horizontal wrapper — parentWorkflowBox + add-node-button side by side */
.nodeHorizontalWrap { display: flex; flex-direction: row; align-items: center; }

.workflowSettingBox{padding: 0px; border:solid 1px #4c5560; background:#2e3a48;border-radius:5px;width: 250px;position: relative; box-shadow:0px 4px 10px rgba(19, 19, 21, 0.33); 
	    position: relative; display: inline-block; vertical-align: top; height: auto;}
[data-theme="light"] .workflowSettingBox{background: #fff; border-color: #ddd; box-shadow: 0px 4px 10px rgba(19, 19, 21, 0.12);}

/*.workflowSettingBox:after{position: absolute; width: 2px; height: 28px; top: -30px; left: 0px; right: 0px; margin: 0 auto; content: ""; border-left: dashed 1px #777;}*/

 


.workflowSettingBox.NodeSkip{  background:#353535; min-height: 95px; margin-right: 35px;} 
[data-theme="light"] .workflowSettingBox.NodeSkip{background: #f2f2f2}
.workflowSettingBox.NodeSkip::before {position: absolute;right: -52px; top: 42%;	background: #353535;padding: 2px 23px;	color: #cc8a34;content: "SKIP";transform: rotate(90deg);border-radius: 7px 7px 0px 0px;
 border: solid 1px #4c5560; border-bottom-color: transparent; font-weight: 500; font-size: 14px;} 
.crsr_default{cursor: default;}
[data-theme="light"] .workflowSettingBox.NodeSkip::before {background: #ffd1a8; border-color: #4c556033}

.workflowActionInfo{padding: 5px;}
.workflowActionInfo ul{list-style: none; margin: 0px; padding: 0px;}
.workflowActionInfo ul li{display: inline-block; width: 100%; color: #bbb7b7; margin-bottom: 5px; font-size: 14px; background: #0f0f0f3d; padding: 5px 10px; border-radius:4px}
[data-theme="light"] .workflowActionInfo ul li{background: #d0d0d03d; color: #3c3b3b}
.workflowActionInfo ul li .inhdng{ display:block;   color:var(--text-dark2); font-size:14px;    }
.workflowActionInfo ul li a{  color: #cdcdcd;   margin-right: 5px; background: #191f26; border-radius: 4px; color: #bbb7b7; padding: 2px 5px; display: inline-block; font-size: 12px; line-height: normal;}
[data-theme="light"] .workflowActionInfo ul li a{ background:#e3e3e3; color:#5e5e5e }
.workflowActionInfo ul li .actDetail{display: block; vertical-align: top; font-size: 15px;}

.workflowActionInfo .statusTag{margin-right: 4px; margin-bottom: 2px;  border: none; padding: 2px 5px; font-size: 11px;}
.workflowActionInfo .fldValueTag{margin-right: 4px; margin-bottom: 2px; background: #00000057; border: none; padding: 2px 5px; font-size: 12px; color: #bbb7b7}

.workflowActionInfo .call_type_2X{background: #00000057; color: #bbb7b7; font-size: 12px; margin-bottom: 2px; margin-right: 4px;} 

.conditionTag{ margin: 0px 4px;font-size: 14px;  color:  var(--textGray);	  }
[data-theme="dark"] .conditionTag{color:  #cdcdcd99;}
.workflowSettingBox.NodeSkip .inhdng{border:none; color: #333; display: inline-block;}
[data-theme="dark"] .workflowSettingBox.NodeSkip .inhdng{color: #d0bb65c7}

.dispostionName{margin-bottom: 4px;}
.dispostionName span{font-size: 12px; display: inline-block;width: 55px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;vertical-align: top; padding: 2px 4px; background: #e1e0e0; border-radius: 4px; color: #333; line-height: normal;} 
[data-theme="dark"] .dispostionName span{background: #232323; color: #bbb7b7}

.dispostionName font{font-size: 12px; vertical-align: top; color: #777; display: inline-block; width: 13px;}

.workflowSettingBox.NodeSkip  .workflowActionInfo ul li{background: none; padding: 5px; margin-bottom: 0px; border-bottom:dashed 1px #4c5560; border-radius:0px; }
[data-theme="light"] .workflowSettingBox.NodeSkip  .workflowActionInfo ul li{border-color: #ccc}
.workflowSettingBox.NodeSkip  .workflowActionInfo ul li:last-child{border-bottom: none;}


/*.NodeMudleSection span.add-node-button:after{ border: none; background: linear-gradient(180deg, hsl(185.4, 45.9%, 76.1%) 0%, hsl(37.1, 78.9%, 73.9%) 100%)}*/
 


 

.ModuleINfoSec{color: #fff; text-align: left; opacity: 0; height: 0px;    border-radius: 5px; padding: 15px; 
	font-size: 16px; width: 100%; position: absolute; left: 0px; top: 55px;   z-index: 9999; background-image: linear-gradient(
  180deg,
  hsl(0deg 0% 20%) 0%,
  hsl(0deg 0% 20%) 17%,
  hsl(0deg 0% 19%) 31%,
  hsl(0deg 0% 19%) 43%,
  hsl(0deg 0% 18%) 54%,
  hsl(0deg 0% 17%) 66%,
  hsl(0deg 0% 16%) 77%,
  hsl(0deg 0% 16%) 88%,
  hsl(0deg 0% 15%) 100%); border: solid 1px;  box-shadow:0px 2px 10px rgba(19, 19, 21, 1); transition: all .3s; visibility: hidden;}

.ModuleINfoSec i{color: rgba(256, 256, 256, .6); font-size: 10px;}
/*.NodeMudleSection:hover .ModuleINfoSec{display: block;}*/

  



.startSourceBtn{background: #007bff;text-align:center; border:none;  border-radius: 10px; padding: 4px 10px; font-size: 16px; color: #fff; font-weight: normal; position: relative;}
[data-theme="light"] .startSourceBtn{background: #333}
.startSourceBtn i{vertical-align: inherit; margin-right: 2px; line-height: normal;}
/*.startSourceBtn:before,
.startSourceBtn:after{ content: ""; position: absolute; height: 100%;  width: 90%; background-color: #007bff; border-radius: 10px; z-index: -1; opacity: 0.7; left: 5%; top: 0px;}
.startSourceBtn:before{ animation: pulse 2s ease-out infinite;}
.startSourceBtn:after{ animation: pulse 2s 1s ease-out infinite;}
@keyframes pulse{ 100%{transform: scale(1.5);  opacity: 0; }
}*/
.workflowNodeSec span.add-node-button .btn:hover{	animation:  hoverShine 200ms;}

@keyframes hoverShine {
	0%{
		background-image: linear-gradient(135deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
	}
	50%{
		background-image: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.4) 50%, rgba(255,255,255,0) 100%);
	}
	100%{
		background-image: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,.4) 100%);
	}
}

@keyframes hoverShineNode {
	0%{
		background-image: linear-gradient(135deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
	}
	50%{
		background-image: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.2) 50%, rgba(255,255,255,0) 100%);
	}
	100%{
		background-image: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,.2) 100%);
	}
}



.NodeBoxSection{display: block; position:relative;  }
.NodeBoxSection .NodeName{  background: #2E3A48;   border: solid 1px #ffffff1c; position: relative; border-radius: 5px; width: 180px; padding: 4px 10px; color: var(--textdark2); font-size: 15px; text-align: left;}

.NodeBoxSection .NodeName:hover{animation: hoverShineNode 200ms;}

.NodeBoxSection .NodeName .nodeicon{display: inline-block; width: 25px; height: 25px; line-height: 25px; border-radius: 5px; margin-right: 5px; background: #ffffff50; vertical-align: unset;   text-align: center; }
.NodeBoxSection .NodeName .nodeicon i{font-size: 12px;}
.NodeBoxSection .NodeName .nodenamedtl{display: inline-block; vertical-align: middle; width: 75%; line-height: normal;}
.NodeBoxSection .NodeName .nodenamedtl font{display: block; font-size: 11px; color: var(--textGray);}
.NodeBoxSection .NodeName .nodenamedtl .nodeModuleTag{ display: inline-block; font-size: 12px;  background: #00000026;  position: absolute;  color: var(--blackMedium);  padding: 2px 4px;  border-radius: 4px;
  position: absolute;  right: 5px;  top: 7px;}
 .nodeTitle{border-top: solid 1px #00000014;   margin-left: -10px;  padding-left: 10px;  margin-right: -10px;  padding-top: 2px; margin-top: 2px; font-size: 15px;}

.NodeBoxSection .NodeName .ActionBtn{display: none}
.NodeBoxSection .NodeName .ActionBtn button{background: #000;	padding: 2px 4px;	width: 22px;	height: 22px;	line-height: 11px;	border-radius: 20px;	border: none;	color: #cdcdcd;	
	font-size: 11px; margin-left:5px;  position: absolute;}
.NodeBoxSection .NodeName .ActionBtn button.deletenode{background: #fff; color: #e13c34; top: -10px;  right: -10px;}
.NodeBoxSection .NodeName .ActionBtn button.editnode{background: #fff; color: #2068c1; bottom: -10px; right: -10px;}
.NodeBoxSection .NodeName .ActionBtn button.deletenode:hover, .NodeDetailSec .innerDtlBx .ActionBtn button.editnode:hover{background: #fff;}
.NodeBoxSection .NodeName:hover .ActionBtn{ display:block; }


.NodeDetailSec{position: absolute; top: 0px; left: -45px; width: 250px; z-index: 99; opacity: 0; visibility: hidden; height: 0px; transition: all .2s;   border-radius: 10px ;  
	box-shadow:0px 4px 10px rgba(19, 19, 21, 0.33);}
.NodeDetailSec .innerDtlBx{   border-radius:0px 0px 5px 5px;  padding:10px 15px; height:100%; }
.NodeDetailSec .innerDtlBx .nodenameTag{display: inline-block; border-radius: 20px; padding: 4px 12px; background: #0003; color: #fff; font-size: 14px; vertical-align: middle}
.NodeDetailSec .innerDtlBx .ActionBtn{display: inline-block; float: right; vertical-align: middle}
.NodeDetailSec .innerDtlBx .ActionBtn button{background: #000;	padding: 2px 4px;	width: 22px;	height: 22px;	line-height: 11px;	border-radius: 4px;	border: none;	color: #cdcdcd;	font-size: 11px; margin-left:5px; }
.NodeDetailSec .innerDtlBx .ActionBtn button.deletenode{background: #ffffff70; color: #e13c34}
.NodeDetailSec .innerDtlBx .ActionBtn button.editnode{background: #ffffff70; color: #2068c1}
.NodeDetailSec .innerDtlBx .ActionBtn button.deletenode:hover, .NodeDetailSec .innerDtlBx .ActionBtn button.editnode:hover{background: #fff;}
 
.NodeDetailSec .innerDtlBx ul{list-style: none; margin: 10px 0px 0px; padding: 10px 10px 0px; border-top: solid 1px #ffffff17}
.NodeDetailSec .innerDtlBx ul li{display: block; color: #fff; font-size: 15px; margin-bottom: 4px;}
.NodeDetailSec .innerDtlBx ul li .tyHdng{color: #fff9; font-size: 14px; display: inline-block; width:70px;  }
.NodeDetailSec .innerDtlBx ul li a{color: #fff;  }
.NodeDetailSec .innerDtlBx ul li .dataRecrd{display: inline-block; color: #fff;}

 
 

.NodeBoxSection:hover  .NodeDetailSec{opacity: 1; visibility: visible;   height: auto;}

.NodeBoxSection.functionNode .NodeName{background: #328B0033; border-color: #328B0070}
.NodeBoxSection.actionNode .NodeName{background: #2086DF33; border-color: #2086DF70}
.NodeBoxSection.GOTONode .NodeName{background: #dd7b1133; border-color: #dd7b1170}
.NodeBoxSection.filterNode .NodeName{background: #7661c833; border-color: #7661c870}
.NodeBoxSection.otherNode .NodeName{background: #2E3A4833; border-color: #2E3A4870}
.NodeBoxSection.webhookNode .NodeName{background: #0097A733; border-color: #0097A770}

.NodeBoxSection.functionNode .NodeDetailSec{background: #328B00 ; }
.NodeBoxSection.actionNode .NodeDetailSec{background: #2086DF; }
.NodeBoxSection.GOTONode .NodeDetailSec{background: #dd7b11; }
.NodeBoxSection.filterNode .NodeDetailSec{background: #7661c8; }
.NodeBoxSection.otherNode .NodeDetailSec{background: #2E3A48; }
.NodeBoxSection.webhookNode .NodeDetailSec{background: #0097A7; }

.NodeBoxSection.functionNode .NodeName .nodenamedtl .nodeModuleTag{background: #328B0050 ;}
.NodeBoxSection.actionNode .NodeName .nodenamedtl .nodeModuleTag{background: #2086DF50 ;}
.NodeBoxSection.GOTONode .NodeName .nodenamedtl .nodeModuleTag{background: #dd7b1150 ;}
.NodeBoxSection.filterNode .NodeName .nodenamedtl .nodeModuleTag{background: #7661c850 ;}
.NodeBoxSection.otherNode .NodeName .nodenamedtl .nodeModuleTag{background: #2E3A4850 ;}
.NodeBoxSection.webhookNode .NodeName .nodenamedtl .nodeModuleTag{background: #0097A750 ;}
.NodeBoxSection.caseNode .NodeName .nodenamedtl .nodeModuleTag{background: #7661c850}
.NodeBoxSection.othercaseNode .NodeName .nodenamedtl .nodeModuleTag{background: #df545450}

  
 

.NodeBoxSection.caseNode .NodeName{background: #7661c833; border-color:#7661c870}
.NodeBoxSection.caseNode .NodeDetailSec{background: #7661c8;}

.NodeBoxSection.caseNode .NodeName{border-radius: 10px; font-size: 15px; width: 150px; padding: 4px 15px 4px 15px;}
.NodeBoxSection.caseNode .NodeName .nodenamedtl{width: 70%;}

.NodeBoxSection.othercaseNode .NodeName{background: #df545433; border:dashed 1px #df5454 }
.NodeBoxSection.othercaseNode .NodeDetailSec{background: #737275; }
.NodeBoxSection.othercaseNode .NodeName{  font-size: 15px; width: 150px; padding: 4px 15px 4px 15px;}

.trueNode{background: #fff;padding: 2px 16px;min-width: 0;width: auto;border-radius: 20px;font-size: 14px; color: #61c86c; border: solid 1px #ccc;display: flex;
    align-items: center;
    justify-content: space-between;}
.falseNode{background: #fff;padding: 2px 16px;min-width: 0;width: auto;border-radius: 20px;font-size: 14px; color: #e85e5e; border: solid 1px #ccc;display: flex;
    align-items: center;
    justify-content: space-between;}

[data-theme="dark"] .trueNode , [data-theme="dark"] .falseNode {background: #2E3A48; border:solid 1px transparent;}

.nodeID{font-size: 12px; display: block;text-align: left;	color: var(--textGray);}


/*disposition select dropdown*/
.ifelseSelcBtn{letter-spacing: normal; font-size: 14px; text-align: left;  background: var(--formControlBg);  border: solid 1px transparent ;  color: var(--formControlText);  padding: 5px 10px;  border-radius: 5px;  cursor: pointer;}
.ifelseSelcBtn:after{float: right; margin-top: 9px;}

.ifelsecustomLevl_option { background: #2b2b2b;  box-shadow: 0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);  margin-top: 8px; padding-bottom: 10px;
 right:0px!important; width: 100%; min-width: 550px; position: absolute; }
[data-theme="light"]  .ifelsecustomLevl_option{background: #fff}
.ifelsecustomLevl_option::after {  width: 0;  height: 0;  border-left: 8px solid transparent;  border-right: 8px solid transparent;  border-bottom: 8px solid #2b2b2b;  position: absolute;  top: -8px;
right:50px;  content: "";}
[data-theme="light"] .ifelsecustomLevl_option::after{border-bottom: 8px solid #fff;} 
.dropup .ifelsecustomLevl_option:after {top: inherit; bottom: -8px; border-top: 8px solid #2b2b2b; border-bottom: inherit;}


.ifelsecustomLevl_option .agent_list_32 ul{max-height: 250px; min-height: 250px; overflow: auto;}
.ifelsecustomLevl_option .agent_list_32 li .custom-control label font{max-width: 142px; min-width: 142px; display: inline-block; vertical-align: middle; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-left: 4px; color: #cdcdcd; font-size: 13px; background: #55513d; border-radius: 4px; padding-left: 7px; margin: 0px 5px;}
[data-theme="light"] .ifelsecustomLevl_option .agent_list_32 li .custom-control label font{background: #55513d26; color: #4a4747}
.ifelsecustomLevl_option .agent_list_32 li.labelblue .custom-control label font{background: #4e588d}
[data-theme="light"] .ifelsecustomLevl_option .agent_list_32 li.labelblue .custom-control label font{background: #4e588d57}
.ifelsecustomLevl_option .agent_list_32 li.labelpurple .custom-control label font{background: #5a4879}
[data-theme="light"] .ifelsecustomLevl_option .agent_list_32 li.labelpurple .custom-control label font{background: #5a487978}
.ifelsecustomLevl_option .agent_list_32 li.labelorange .custom-control label font{background: #876431}
[data-theme="light"] .ifelsecustomLevl_option .agent_list_32 li.labelorange .custom-control label font{background: #8764316e}
.ifelsecustomLevl_option .agent_list_32 li.labeldarkorange .custom-control label font{background: #6f4302}
[data-theme="light"] .ifelsecustomLevl_option .agent_list_32 li.labeldarkorange .custom-control label font{background: #6f430278}

.ifelsecustomLevl_option .agent_list_32 li .custom-control label{color: #666}
.ifelsecustomLevl_option .agent_list_32 li .custom-control{margin-bottom: 0px!important; margin-right: 0px!important}
.ifelsecustomLevl_option   .custom-control-label:before{background: #ffffff4f}
.ifelsecustomLevl_option .apply_btn_sec {  display: inline-block;  width: 100%;  padding: 15px 5px 5px 5px;  text-align: center;  border-top: solid 1px #ffffff17;  margin-top: 10px;}
.ifelsecustomLevl_option .apply_btn_sec .apply_btn { padding: 5px 30px;  border-radius: 20px;  border: none;  font-size: 14px;  background: #ea91089e;  color: #ffffffe8;}
[data-theme="light"] .ifelsecustomLevl_option .apply_btn_sec .apply_btn{background: #007bff}

.ifelsecustomLevl_option .serach_bx_sec { display: inline-block;  width: 100%;  padding: 10px;}
.ifelsecustomLevl_option .serach_bx_sec .serach_bx_inner {  width: 100%;  background-color: #ffffff21;  padding: 4px 10px 6px;  border-radius: 4px;  color: #cdcdcd;}
[data-theme="light"] .ifelsecustomLevl_option .serach_bx_sec .serach_bx_inner{background:var(--formControlBg); color:var(--formControlText) }
.ifelsecustomLevl_option .serach_bx_sec .serach_bx_inner i {  vertical-align: middle;  font-size: 12px;}
.ifelsecustomLevl_option .serach_bx_sec .serach_bx_inner input { background: transparent; border: 0px; width: 80%; color: #cdcdcd;  font-size: 13px;  vertical-align: middle;}
.ifelsecustomLevl_option .serach_bx_sec .serach_bx_inner input:hover,.ifelsecustomLevl_option .serach_bx_sec .serach_bx_inner input:focus{box-shadow: none; outline: none; }

 
.th_option_drop .agent_list_32 li .custom-control label{color: #cdcdcd}
.th_option_drop .agent_list_32 li .custom-control{margin-bottom: 0px!important; margin-right: 0px!important}
.th_option_drop .custom-control-label:before{background: #ffffff4f}
.th_option_drop .apply_btn_sec {  display: inline-block;  width: 100%;  padding: 15px 5px 5px 5px;  text-align: center;  border-top: solid 1px #ffffff17;  margin-top: 10px;}
.th_option_drop .apply_btn_sec .apply_btn { padding: 5px 30px;  border-radius: 20px;  border: none;  font-size: 14px;  background: #ea91089e;  color: #ffffffe8;}

/*disposition select dropdown*/

.workflowSelectModal .custom-alert{background: #ffffff30}

.workflowTitleBx{	width: 425px; font-size: 15px;background: var(--formControlBg);border: solid 1px var(--BorderColor2);outline: none;	padding: 4px 10px;border-radius: 4px;	color: var(--textID);}
.workflowTitleBx::placeholder {    color: var(--text-disbaled); font-size:15px;   }



.campaigninfoBx{padding: 10px 20px;background: #25435e82; border-radius: 10px;}
.campaigninfoBx ul{list-style: none; margin: 0px; padding: 0px;}
.campaigninfoBx ul li{display: inline-block; width: 100%; font-size: 14px; color: #ffffffc9; margin-bottom: 5px; position: relative; padding-left: 30px;}
.campaigninfoBx ul li:before{position: absolute; width: 8px; height: 8px; background:#ffffff1a; border-radius: 20px; left: 9px; top: 6px; content: "";}
.campaigninfoBx ul li font{ color:#df9535 }
.campaigninfoBx h4{color: #fff; font-size: 18px; font-weight: normal; margin-bottom: 7px;}

.contactlistmapingbx{padding:10px 20px;background: var(--gray200); border-radius: 5px;}
.contactlistmapingbx .filterSelectDrop{background:#464444  ; border: none;} 

[data-theme='light'] .contactlistmapingbx .filterSelectDrop{background: #fff !important; border:solid 1px #eee !important}

.contactlistmapingbx .filterSelectDrop .textbox{ width:92%; }
.contactlistmapingbx .filterSelectDrop textarea.textbox{width: 100%}



.skipandsettingboth .workflowSettingBox{margin-top: 15px;} 
.skipandsettingboth{position: relative;  padding-left: 35px;}
.skipandsettingboth:after{position: absolute;left: 15px;  top: -15px; width: 2px; height: 100%; border-left: dashed 1px #888; content: "";}

.skipandsettingboth .workflowSettingBox:after{position: absolute; top: 50%; left: -20px; width: 20px; height: 2px; border-top: dashed 1px #888; content: ""; margin: inherit;}
/*.skipandsettingboth .workflowSettingBox.NodeSkip:after{border-color: #b3995c }*/

.filtercasenodedata{display: block; width: 100%; max-height: 300px; overflow: auto;}
.fcaseDRow{display: block; width: 100%; background-color: #1110103d; padding: 5px; border-radius: 5px; margin-top: 8px;}
.conditionLabel{color: #f9ddc4c7; font-size: 12px; display: block; font-weight: 500; margin-bottom: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.conditionLabel font{display: block; color: #fff}
 
.conditiondata{ color:#fff; display:block; }

.fcaseIRow{display: block;  } 
.fandOr{display: block; text-align: center; position: relative; border-top: solid 1px #ffffff3d; margin: 15px 0px;}
.fandOr span{background: #e69a76; padding: 0px 8px; font-size: 11px; border-radius: 20px; position: absolute; top: -9px; left: 0px; right: 0px ;margin: 0 auto; display:table; }


/*alert msg css*/
.alertMsg{padding: 13px 20px 13px 50px; font-size: 16px; color: #fff; background: #007bff; position: fixed; top: 122px; right: -360px; box-shadow: 0 .25rem .75rem rgba(0, 0, 0, 0.68); 
	border-radius: 5px; min-width: 350px; z-index: 999; transition: all .5s; }
.alertMsg .msgTitle{display: block;  color: #ffffff8a;   font-size: 15px;  }
.alertMsg:after{position: absolute; left: 11px; top: 11px;   font-family: "Font Awesome 5 Free"; font-weight: 900; color: #ffffff75; font-size: 32px}


.alertMsg.success{background: #295e34}
.alertMsg.success:after{content: "\f058"}

.alertMsg.error{background: #723131}
.alertMsg.error:after{content: "\f06a"}

.alertMsg.show{right: 15px;}
 
.closebtnmsg{position: absolute;  top: -8px;  right: -8px;  background: #fff;  border: none;  color: #a62c2c;  width: 23px;  height: 23px; line-height: 23px;  border-radius: 50%;   
  text-align: center;  font-size: 14px;}

.alertMsg.success .closebtnmsg{color: #295e34}

/*alert msg css*/

.normlDrop{background: #fff!important; padding:7px 10px!important; border:solid 1px #eee !important}
[data-theme="dark"] .normlDrop{background:#464444 !important; border:none!important   }

.ctcopntionsection{padding: 15px; background: rgba(0,0,0,.13);  border-radius: 9px; margin-bottom: 10px;}
.ctcopntionsection .ctcfldlb1{font-size: 14px; color: #939393; margin-bottom: 3px;}


.daterangepicker.drop-up::before{display: none!important}
.daterangepicker.drop-up::after{border-top-color: #343637!important}
.daterangepicker .drp-buttons{border-top: 1px solid #dddddd1c!important}

/*css for customized radio button*/
.custmizedRadio{padding-left: 0px;}
.custmizedRadio .custom-control-label{background: #373737; width: 100%; padding: 5px 18px; padding-left: 32px; border-radius: 6px;}
.custmizedRadio .custom-control-label::before{top: 9px; left: 9px; background: #ffffff2e; border-color: #adb5bd54 }
.custmizedRadio  .custom-control-label::after{top: 9px; left: 9px;}
.custmizedRadio .custom-control-input:checked ~  .custom-control-label{ color:#fff; background:#f0f8ff24 }
 

/*css for customized radio button*/

.popover{max-width: inherit; width: 450px}
.instrucBlist{font-size: 15px; display: block; color: #cdcdcd; margin: 10px; position: relative; padding-left: 17px;}
.instrucBlist i{position: absolute; left: 0px; top: 7px; font-size: 9px; color: #666}

/*css for custom select2*/

.customSelectInputBox .select2-container--default .select2-selection--single{background: var(--formControlBg); height: 35px; border-radius: 5px; border-color: transparent;}
.customSelectInputBox .select2-container--default .select2-selection--single .select2-selection__rendered{color: var(--formControlText); font-size: 14px; line-height: 35px;}
.customSelectInputBox .select2-container--default .select2-selection--single .select2-selection__arrow{top: 4px;}


.customSelectDropdown.select2-container--default .select2-search--dropdown .select2-search__field{background: var(--formControlBg) !important; color: var(--formControlText); font-size: 14px; padding: 6px 4px; border:solid 1px var(--sparatorBorder) !important; border-radius: 4px;}
.customSelectDropdown.select2-container--default .select2-search--dropdown .select2-search__field:focus{box-shadow: none; outline: none}
.customSelectDropdown.select2-container--default .select2-results__group{color: #d5ae3b; font-size: 15px; font-family: Comfortaa; }
.customSelectDropdown.select2-results__option{font-size: 14px!important}
.customSelectDropdown.select2-container--default .select2-results__option--highlighted[aria-selected]{background: var(--chipBg) !important;}

/*css for custom select2*/
 



.parentWorkflowBox{background: #fff;  border-radius: 12px; border:solid 1px var(--sparatorBorder); box-shadow: 0px 4px 10px rgba(19, 19, 21, 0.12); min-width: 300px; max-width: 350px; position: relative;}
 [data-theme="dark"] .parentWorkflowBox{background: #222}

.parentWorkflowBox .ActionBtn { display: none; }
.parentWorkflowBox .ActionBtn button { background: #000; padding: 2px 4px; width: 22px; height: 22px; line-height: 11px; border-radius: 20px; border: none; color: #cdcdcd; font-size: 11px; margin-left: 5px; position: absolute; z-index: 10; box-shadow: 0 2px 4px rgba(0,0,0,0.15); }
.parentWorkflowBox .ActionBtn button.deletenode { background: #fff; color: #e13c34; top: -10px; right: -10px; }
.parentWorkflowBox .ActionBtn button.editnode { background: #fff; color: #2068c1; bottom: -10px; right: -10px; }
.parentWorkflowBox .ActionBtn button.deletenode:hover, .parentWorkflowBox .ActionBtn button.editnode:hover { background: #fff; }
.parentWorkflowBox:hover .ActionBtn { display: block; }

 .workflowHeadPart{display: flex; flex-direction: row; background: #7b7b7b33; padding: 10px; border-radius: 10px 10px 0px 0px;} 
 .workflowIcon{width: 35px; height: 35px; line-height: 35px; background: #7b7b7b33; color: #7b7b7b; border-radius: 50%;  text-align: center;  font-size: 16px; margin-right: 5px;}
 .workflowTitle{font-size: 18px; font-weight: normal; padding-left: 5px; color: var(--textdark2);}


 .workflowInfoBox{ display:block; padding: 10px 20px;}
 .workflowInfoBox ul{list-style: none; margin: 0px ; padding: 0px;}
 .workflowInfoBox ul li{display: block; padding: 8px 10px 8px 20px;  border-radius: 10px; border:solid 1px var(--sparatorBorder); margin-bottom: 5px; position: relative;}
 .workflowInfoBox ul li:after{position: absolute; left: 10px; top: 12px; width: 2px; height: 33px; background: #abddab; content: "";}
  .dtitle{font-size: 14px; color: var(--blackMedium);}
  .datarecord{margin-top: 3px; font-size: 12px; color: var(--textLight2);}
  .datarecord a{color: var(--textLight2);}

  .greenShade{border-color:#38b37470 }
  .greenShade .workflowHeadPart{ background:#38b37470 }
  .greenShade .workflowIcon{background: #38b37470; color: #ffffff90}
  .greenShade .workflowInfoBox ul li:after{background: #38b374}

  .yellowShade{border-color: #cc9d3470}
  .yellowShade .workflowHeadPart{ background:#cc9d3470 }
  .yellowShade .workflowIcon{background: #cc9d3470; color: #ffffff90}
  .yellowShade .workflowInfoBox ul li:after{background: #cc9d34}

  .blueShade{border-color: #5480e570}
  .blueShade .workflowHeadPart{background: #5480e570}
  .blueShade .workflowIcon{background: #5480e570; color: #ffffff90}
  .blueShade .workflowInfoBox ul li:after{background: #5480e5}

  .dispostionName span{width: 60px;}
  [data-theme="light"] .dispostionName span{background: #f0f0f0; color: #666} 

  .skipCaseBox{ }
  .skipCaseBox h3{font-size: 14px; margin-bottom: 10px;}
  .skipCaseBox ul li:after{background: #c1a244 !important}

/* ── Node-edit pre-fetch overlay ── */
/* Covers #workflow-root while handleEditNode awaits API calls before opening the modal */
.node-edit-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.75);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  backdrop-filter: blur(1px);
}

[data-theme="dark"] .node-edit-overlay {
  background: rgba(30, 30, 40, 0.75);
}

.node-edit-overlay__spinner {
  width: 38px;
  height: 38px;
  border: 3px solid #e0e0e0;
  border-top-color: #5a7ce6;
  border-radius: 50%;
  animation: node-edit-spin 0.7s linear infinite;
}

[data-theme="dark"] .node-edit-overlay__spinner {
  border-color: #444;
  border-top-color: #7b9ef5;
}

.node-edit-overlay__text {
  font-size: 13px;
  color: #5c5561;
  font-weight: 500;
}

[data-theme="dark"] .node-edit-overlay__text {
  color: #ccc;
}

@keyframes node-edit-spin {
  to { transform: rotate(360deg); }
}

.modalLoader{ color:#fff; font-size:50px; position:absolute; text-align:center; left:0px; right:0px; top:40%; }

/* ══════════════════════════════════════════════════════════
   Workflow chart skeleton — shown while getDbWorkflow loads
   ══════════════════════════════════════════════════════════ */

/* Shimmer keyframe — shared by all skeleton elements */
@keyframes wf-sk-pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Base shimmer block */
.wf-sk-shimmer {
  background: linear-gradient(90deg, #e8e8e8 25%, #f4f4f4 50%, #e8e8e8 75%);
  background-size: 200% 100%;
  animation: wf-sk-pulse 1.5s infinite;
  display: block;
}

[data-theme="dark"] .wf-sk-shimmer {
  background: linear-gradient(90deg, #2e2e2e 25%, #3a3a3a 50%, #2e2e2e 75%);
  background-size: 200% 100%;
}

/* ── Skeleton overlay: fills the chart viewport, horizontal (WEST) layout ── */
.wf-chart-skeleton {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--contentSectinoBg, #F8FAFD);
  display: flex;
  flex-direction: row;      /* left-to-right, matching rootOrientation: WEST */
  align-items: center;      /* vertically centered — parent sits between its children */
  padding: 40px 50px;
  overflow: auto;
  gap: 0;
}

/* ── Source card (parentWorkflowBox greenShade, min-width:300px) ── */
.wf-sk-source {
  width: 300px;
  border-radius: 12px;
  border: 1px solid #38b37470;  /* matches greenShade border-color */
  background: var(--tableBg, #fff);
  box-shadow: 0 4px 10px rgba(19, 19, 21, 0.08);
  overflow: hidden;
  flex-shrink: 0;
}

.wf-sk-source__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #38b37425;   /* greenShade workflowHeadPart */
}

.wf-sk-icon-circle {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  flex-shrink: 0;
}

.wf-sk-source__title { flex: 1; }

.wf-sk-source__body {
  padding: 10px 16px 12px;
}

.wf-sk-cond-row {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--sparatorBorder, #eee);
  margin-bottom: 6px;
}

.wf-sk-cond-row:last-child { margin-bottom: 0; }

/* ── Horizontal connector line (levelSeparation = 80px) ── */
.wf-sk-h-line {
  width: 80px;
  height: 2px;
  background: var(--sparatorBorder, #dde3ea);
  flex-shrink: 0;
}

.wf-sk-h-line--sm {
  width: 32px;
}

/* ── Node group: card + its right-side children ── */
.wf-sk-node-group {
  display: flex;
  flex-direction: row;
  align-items: center;      /* centers parent card with children column */
  flex-shrink: 0;
}

/* ── Children column (siblings stacked vertically, siblingSeparation≈40px) ── */
.wf-sk-children {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Single arm: h-line + child node ── */
.wf-sk-arm {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* ── Regular node card (NodeBoxSection .NodeName — 180px wide) ── */
.wf-sk-node {
  width: 180px;
  border-radius: 5px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  background: #2E3A4812;
  border: 1px solid #2E3A4830;
}

.wf-sk-node--action  { background: #2086DF12; border-color: #2086DF30; }
.wf-sk-node--filter  { background: #7661c812; border-color: #7661c830; }
.wf-sk-node--function{ background: #328B0012; border-color: #328B0030; }

.wf-sk-node__icon {
  width: 25px;
  height: 25px;
  border-radius: 5px;
  flex-shrink: 0;
}

.wf-sk-node__text {
  flex: 1;
  min-width: 0;
}

/* ── Pill nodes (trueNode / falseNode — border-radius:20px, width:auto) ── */
.wf-sk-pill {
  height: 28px;
  width: 90px;
  border-radius: 20px;
  flex-shrink: 0;
}

.wf-sk-pill--true  { background: #61c86c18; border: 1px solid #61c86c50; }
.wf-sk-pill--false { background: #e85e5e18; border: 1px solid #e85e5e50; }

/* ── Case child node (caseNode) ── */
.wf-sk-case {
  width: 155px;
  border-radius: 5px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
  background: #7661c812;
  border: 1px solid #7661c830;
}

/* ── Dark mode ── */
[data-theme="dark"] .wf-chart-skeleton {
  background: var(--contentSectinoBg, #141618);
}

[data-theme="dark"] .wf-sk-source {
  background: var(--tableBg, #242628);
  border-color: var(--sparatorBorder, #333);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .wf-sk-source__head {
  background: #38b37418;
}

[data-theme="dark"] .wf-sk-cond-row {
  border-color: var(--sparatorBorder, #333);
}

[data-theme="dark"] .wf-sk-h-line {
  background: #444;
}

[data-theme="dark"] .wf-sk-node {
  background: #2E3A4820;
  border-color: #2E3A4850;
}

[data-theme="dark"] .wf-sk-node--action {
  background: #2086DF18;
  border-color: #2086DF40;
}

[data-theme="dark"] .wf-sk-node--filter {
  background: #7661c818;
  border-color: #7661c840;
}

[data-theme="dark"] .wf-sk-node--function {
  background: #328B0018;
  border-color: #328B0040;
}

/* ── Modal form skeleton ────────────────────────────────────────────────── */
.wf-modal-skeleton {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--modalBg, #fff);
  z-index: 10000;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}

/* Title field row */
.wf-modal-sk-title {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wf-modal-sk-label {
  width: 80px;
  height: 11px;
  border-radius: 4px;
}
.wf-modal-sk-field {
  height: 36px;
  border-radius: 6px;
  width: 100%;
}

/* Category + Function row (two columns) */
.wf-modal-sk-row2 {
  display: flex;
  gap: 12px;
}
.wf-modal-sk-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Arg row — label + input stacked */
.wf-modal-sk-arg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--sparatorBorder, #eee);
  background: var(--tableBg, #fff);
}
.wf-modal-sk-arg-label {
  height: 10px;
  border-radius: 4px;
  width: 40%;
}
.wf-modal-sk-arg-input {
  height: 33px;
  border-radius: 6px;
  width: 100%;
}

/* Divider above args */
.wf-modal-sk-divider {
  height: 1px;
  background: var(--sparatorBorder, #eee);
  margin: 2px 0;
}

[data-theme="dark"] .wf-modal-skeleton {
  background: var(--modalBg, #1e2430);
}