.display_flex_only{
    display: flex;
}
.top_7px {
    top: 7px !important;
}
.z_index_1 {
     z-index: 1!important;
}
.justify_content_space_between{
    justify-content: space-between !important;
}
.gap_1rem{
    gap: 1rem;
} 
.wd_100_px_only {
    width: 100px;
}
.top_0_only {
    top: 0;
}
.left_0_only{
    left: 0;
}
.padding_left_25px{
    padding-left: 25px !important;
}


.table_header_first {
        height: 23px;
        text-align: center;
        padding-top: 7px;
    }

    .toggle_wrap .button_toggler:before {
        content: 'View';
    }

    .toggle_wrap .toggle_checkbox:checked + .button_toggler:before {
        content: 'Edit';
    }


/*--for tree-view--*/
    .tree_value_wrap {
        padding: 0.5rem 1rem!important;
        border: 1px solid #c1e3ff!important;
        background: #e9f5ff!important;
        color: #3f6a7f!important;
        border-radius: 5px!important;
        min-height: 54px!important;
        flex-direction: row;
    }

    .unorder_li {
        flex-flow: column!important;
        gap: 1rem!important;
        list-style: none!important;
        border-left: 1px solid #2196F3!important;
    }

    .lisacc {
        --lc-pl: 30px;
        padding-left: var(--lc-pl)!important;
        border-left: 1px solid #2196F3!important;
        margin-left: -1px!important;
    }

    .tree-brunch-line {
        width: 31px !important;
        height: 56px !important;
        left: -32px !important;
        top: -22px !important;
        border-left: 1px solid #2196F3 !important;
        border-bottom: 1px solid #2196F3 !important;
    }

    .unorder_li li:nth-last-child(1) {
        border-left: 1px solid #ffffff!important;
    }

    ul#mainUL {
        margin-left: 0px!important;
        border-left: none!important;
        padding-top: 0rem!important;
        padding-bottom: 2rem;
    }

    /* Target only the first level of li inside the first ul */
    ul#mainUL > li {
        padding-left: 0px!important;
        border-left: none!important;
        margin-left: 0px!important;
        position: relative;
    }

    .order_color {
        border: 1px solid black !important;
        background: #FFEB3B !important;
        color: black!important;

        .inp-flo-label-wrap input {
            color: black!important;
        }

        .caret_arrow::before {
            color: black!important;
        }

        .last_update_text {
            color: black!important;
        }

        .last_update_labels {
            color: black!important;
        }
    }

    .dragging {
        background: blue!important;
        color: white!important;
        border: 1px solid blue!important;
        box-shadow: 0px 0px 5px 0px gray!important;

        .inp-flo-label-wrap input {
            color: white!important;
        }

        .caret_arrow::before {
            color: white!important;
        }

        .last_update_text {
            color: white!important;
        }

        .last_update_labels {
            color: white!important;
        }
    }

    .expand_collapse {
        left: -4px !important;
        top: 6px !important;
    }

    .edit_req_wrap {
        display: flex !important;
        justify-content: space-between !important;
        gap: 1rem;
    }

    .tree_button {
        position: unset!important;
    }

    .input_box ~ label {
        z-index: 1;
    }

    .edit_req_wrap .input_wrapper input {
        border: 2px solid #abdaff;
        border-radius: 5px;
        padding: 0.5rem 1rem;
        margin-left: 0px;
    }

    .inp-boxes-wrap {
        width: 100%;
        display: flex;
        justify-content: left;
        align-items: center;
        gap: 1rem;
    }

    .inp-flo-label-wrap {
        position: relative;
    }

    .inp-flo-label-wrap label {
        position: absolute;
        top: 7px;
        background: #e9f5ff;
        width: 100px;
        padding: 0px 5px;
        border-radius: 26px;
    }

    .removed_element {
        background: #ffd1d1 !important;
        border: 1px solid #9E9E9E !important;
    }

    .removed_element .input_box{
        text-decoration: line-through;
        color: red;
    }

    .tree_title_wrap {
        display: initial;
        position: relative;
        width: 100%;
    }

    .tbl-display-order-wrap {
        min-width: 15px;
        display: flex;
        font-family: monospace;
        font-size: 11px;
        width: 100px;
        height: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #2196f330;
        /* border-radius: 100%; */
        position: absolute;
        top: 9px;
        left: -35px;
        /* border: 1px solid gainsboro; */
        transform: rotate(-45deg);
        z-index: 8;
        color: #1f5acf;
    }

    .tbldo-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 50px;
        height: 100%;
        overflow: hidden;
    }

    .current-order-wrap, .old-order-wrap {
        font-family: monospace;
    }

    .current-order-wrap {
        display: none;
    }

    .cursor_move {
        cursor: grab!important;
    }

    .dw_margin_left_false select {
        margin-left: -13px !important;
    }
    /*--for tree-view--*/

    .topname-container {
        position: absolute;
        top: -65px;
        left: 0;
        background: tomato;
    }

    .annotation-box {
        display: inline-block;
        --primary-bg: #c3e3fd;
        --text-color: #000000;
        position: absolute;
        top: -85px;
        left: -45px;
        
        .btnpri {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-transform: uppercase;
            text-align: center;
            text-decoration: none;
            vertical-align: middle;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            background-color: transparent;
            -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
            position: relative;
            border: 1px solid #96d0ff !important;
            border-left: 0;
            border-right: 0;
            position: relative;
            z-index: 5;
            margin: 0 20px;
            min-height: 40px;
            background-color: var(--primary-bg);
            color: var(--text-color);
            width: 250px;
            border-top-right-radius: 27px;
            border-bottom-right-radius: 27px;
        }

        .btnpri .left-arrow {
            left: -16.4px;
            border-top: 0px solid transparent;
            border-right: 0px solid transparent;
        }

        .btnpri .right-arrow {
            right: -16.4px;
            border-bottom: 0px solid transparent;
            border-left: 0px solid transparent;
        }

        .btnpri .left-arrow,
        .btnpri .right-arrow {
            position: absolute;
            top: 8.78px;
            height: 32.5px;
            width: 32.5px;
            border: 2px solid transparent;
            -webkit-transform: rotate(45deg) skew(10deg, 10deg);
            -moz-transform: rotate(45deg) skew(10deg, 10deg);
            -ms-transform: rotate(45deg) skew(10deg, 10deg);
            transform: rotate(45deg) skew(10deg, 10deg);
            -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
            background-color: var(--primary-bg);
        }

        .btnpri .element_name_field {
            border: 0px solid #abdaff;
            /* color: white; */
        }
    }
    
    .dw_frist_li_class {
        margin-top: 2rem!important;
    }

    .input_wrapper.wd_60_pr.workflowdesc_main_txt.inp-flo-label-wrap {
        margin-left: 20px!important;
        margin-right: 0px !important;
    }

    .annotation-line {
        width: 18px;
        height: 42px;
        background: #c3e3fd;
        position: absolute;
        left: 24px;
        top: -12px;
        z-index: 0;
    }


    .input_wrapper.wd_60_pr.inp-flo-label-wrap {
        margin-left: 20px;
        margin-right: 0;
    }







    /*--for tree-view--*/
			.tree_value_wrap {
				padding: 0.5rem 1rem!important;
				border: 1px solid #c1e3ff!important;
				padding-left: 25px!important;
				position: relative!important;
				background: #e9f5ff!important;
				color: #3f6a7f!important;
				border-radius: 5px!important;
				/* box-shadow: 0px 0px 3px 0px #607d8b24; */
				min-height: 54px!important;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
			}

			ul {
				display: flex!important;
				flex-flow: column!important;
				gap: 1rem!important;
				/* padding-top: 1rem!important; */
				margin-left: 30px!important;
				list-style: none!important;
				border-left: 1px solid #2196F3!important;
			}
			
			li {
				padding-left: 31px!important;
				border-left: 1px solid #2196F3!important;
				margin-left: -1px!important;
			}

			.lisacc {
				--lc-pl: 30px;
				padding-left: var(--lc-pl)!important;
				border-left: 1px solid #2196F3!important;
				margin-left: -1px!important;
			}

			.tree-brunch-line {
				position: absolute !important;
				width: 31px !important;
				height: 56px !important;
				/* background: red; */
				left: -32px !important;
				top: -22px !important;
				border-left: 1px solid #2196F3 !important;
				border-bottom: 1px solid #2196F3 !important;
			}

			li:nth-last-child(1) {
				border-left: 1px solid #ffffff!important;
			}

			ul#mainUL {
				margin-left: 0px!important;
				border-left: none!important;
				padding-top: 0rem!important;
				padding-bottom: 2rem;
			}

			/* Target only the first level of li inside the first ul */
			ul#mainUL > li {
				padding-left: 0px!important;
				border-left: none!important;
				margin-left: 0px!important;
				position: relative;
			}

			.order_color {
				border: 1px solid black !important;
				background: #FFEB3B !important;
				color: black!important;

				.inp-flo-label-wrap input {
					color: black!important;
				}

				.caret_arrow::before {
					color: black!important;
				}

				.last_update_text {
					color: black!important;
				}

				.last_update_labels {
					color: black!important;
				}
			}

			.dragging {
				background: blue!important;
				color: white!important;
				border: 1px solid blue!important;
				box-shadow: 0px 0px 5px 0px gray!important;

				.inp-flo-label-wrap input {
					color: white!important;
				}

				.caret_arrow::before {
					color: white!important;
				}

				.last_update_text {
					color: white!important;
				}

				.last_update_labels {
					color: white!important;
				}
			}

			.expand_collapse {
				left: -4px !important;
				top: 6px !important;
			}

			.edit_req_wrap {
				display: flex !important;
				justify-content: space-between !important;
				gap: 1rem;
			}

			.tree_button {
				position: unset!important;
			}

			.input_box ~ label {
				z-index: 1;
			}

			.edit_req_wrap .input_wrapper input {
				border: 2px solid #abdaff;
				border-radius: 5px;
				padding: 0.5rem 1rem;
				margin-left: 0px;
			}

			.inp-boxes-wrap {
				width: 100%;
				display: flex;
				justify-content: left;
				align-items: center;
				gap: 1rem;
			}

			.inp-flo-label-wrap {
				position: relative;
			}

			.inp-flo-label-wrap label {
				position: absolute;
				top: 7px;
				background: #e9f5ff;
				width: 100px;
				padding: 0px 5px;
				border-radius: 26px;
			}

			.removed_element {
				background: #ffd1d1 !important;
				border: 1px solid #9E9E9E !important;
			}

			.removed_element .input_box{
				text-decoration: line-through;
				color: red;
			}

			.tree_title_wrap {
				display: initial;
				position: relative;
				width: 100%;
			}

			.tbl-display-order-wrap {
				min-width: 15px;
				display: flex;
				font-family: monospace;
				font-size: 11px;
				width: 100px;
				height: 15px;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #2196f330;
				/* border-radius: 100%; */
				position: absolute;
				top: 9px;
				left: -35px;
				/* border: 1px solid gainsboro; */
				transform: rotate(-45deg);
				z-index: 8;
				color: #1f5acf;
			}

			.tbldo-container {
				position: absolute;
				top: 0;
				left: 0;
				width: 50px;
				height: 100%;
				overflow: hidden;
			}

			.current-order-wrap, .old-order-wrap {
				font-family: monospace;
			}

			.current-order-wrap {
				display: none;
			}

			.cursor_move {
				cursor: grab!important;
			}

			.dw_margin_left_false select {
				margin-left: -13px !important;
			}
			/*--for tree-view--*/

			.topname-container {
				position: absolute;
				top: -65px;
				left: 0;
				background: tomato;
			}

			.annotation-box {
				display: inline-block;
				--primary-bg: #c3e3fd;
				--text-color: #000000;
				position: absolute;
				top: -85px;
				left: -45px;
				
				.btnpri {
					display: inline-flex;
					align-items: center;
					justify-content: center;
					text-transform: uppercase;
					text-align: center;
					text-decoration: none;
					vertical-align: middle;
					cursor: pointer;
					-webkit-user-select: none;
					-moz-user-select: none;
					-ms-user-select: none;
					user-select: none;
					background-color: transparent;
					-webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
					transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
					position: relative;
					border: 1px solid #96d0ff !important;
					border-left: 0;
					border-right: 0;
					position: relative;
					z-index: 5;
					margin: 0 20px;
					min-height: 40px;
					background-color: var(--primary-bg);
					color: var(--text-color);
					width: 250px;
					border-top-right-radius: 27px;
					border-bottom-right-radius: 27px;
				}

				.btnpri .left-arrow {
					left: -16.4px;
					border-top: 0px solid transparent;
					border-right: 0px solid transparent;
				}

				.btnpri .right-arrow {
					right: -16.4px;
					border-bottom: 0px solid transparent;
					border-left: 0px solid transparent;
				}

				.btnpri .left-arrow,
				.btnpri .right-arrow {
					position: absolute;
					top: 8.78px;
					height: 32.5px;
					width: 32.5px;
					border: 2px solid transparent;
					-webkit-transform: rotate(45deg) skew(10deg, 10deg);
					-moz-transform: rotate(45deg) skew(10deg, 10deg);
					-ms-transform: rotate(45deg) skew(10deg, 10deg);
					transform: rotate(45deg) skew(10deg, 10deg);
					-webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
					transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
					background-color: var(--primary-bg);
				}

				.btnpri .daiyan-name-field {
					border: 0px solid #abdaff;
					/* color: white; */
				}
			}
			
			.dw_frist_li_class {
				margin-top: 2rem!important;
			}

			.input_wrapper.wd_60_pr.workflowdesc_main_txt.inp-flo-label-wrap {
				margin-left: 20px!important;
				margin-right: 0px !important;
			}

			.annotation-line {
				width: 18px;
				height: 42px;
				background: #c3e3fd;
				position: absolute;
				left: 24px;
				top: -12px;
				z-index: 0;
			}


			.input_wrapper.wd_60_pr.inp-flo-label-wrap {
				margin-left: 20px;
				margin-right: 0;
			}







    .work-flow-label {
        transform: translateY(-15px) scale(0.9)!important;
        -moz-transform: translateY(-15px) scale(0.9)!important;
        -webkit-transform: translateY(-15px) scale(0.9)!important;
        -o-transform: translateY(-15px) scale(0.9)!important;
        -ms-transform: translateY(-15px) scale(0.9)!important;
        color: var(--color12)!important;
        opacity: 1!important;
        width: 63px!important;
    }

    label.switch {
        margin-right: -20px!important;
        margin-left: 20px!important;
    }

    p.switchlabel {
        font-size: 10px!important;
        margin-left: 20px!important;
        margin-right: -20px!important;
    }

    label.work-flow-label {
        left: 10px;
    }
/* Force label visibility and z-index on input focus */
.input_box:focus ~ .nevopl {
    z-index: 100 !important;
    display: block !important;
    opacity: 1 !important;
}

/* Ensure the label itself always has a high z-index */
.nevopl {
    z-index: 99 !important; 
}