#popups:not(:empty) {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-color: rgba(15, 23, 42, 0.3) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 99 !important;
}

#popups.performa-closed {
  height: 0 !important;
  min-height: 0 !important;
  bottom: auto !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

#popups> :not(:last-child) {
  pointer-events: none;
}

#popups button[name="primary"] {
  background-color: var(--brand-color) !important;
  color: white !important;
}

/* #popups .popup.dfa_act{
	max-width: 650px;
	height: 100%;
	background: #ffffff;
	overflow: hidden;
}
#popups .popup .dfa_act .dialog_content {
	overflow-y: auto;
	max-height: calc(80vh - 11rem);
	padding: 1rem;
	min-height: 120px;
} */
/* Warning msg popup */
#popups .warningMsg {
  max-width: 500px !important;
  min-width: 500px !important;
  height: 211px !important;
  width: 500px !important;
  ;
  max-height: 211px !important;
  min-height: 211px !important;
}

#popups .warningMsg .dialog_content {
  min-height: 120px !important;
  overflow: hidden;
  width: 498px !important;
}

#popups .warningMsg .warningMsg_container {
  width: 475px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#popups .warningMsg .warningMsg_container .file_name_highlight {
  font-weight: 500;
  color: var(--brand-color);
  font-size: 12px;
  text-decoration: underline;
}

#popups .popup.chart_act {
  max-width: 650px;
  height: 100%;
  background: #ffffff;
  overflow: hidden;
}

#popups .dialog_content {
  overflow-y: auto;
  max-height: calc(80vh - 11rem);
  padding: 1rem;
  min-height: 120px;
  height: 100%;
}

#popups .dialog_content .div[data-id="params_content"] {
  width: 100%;
  height: 100%;
}

#popups .popup.chart_act.dialog_content {
  overflow-y: auto;
  max-height: 410px !important;
  padding: 1rem;
  min-height: 120px;
  height: 100%;
}

ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

li {
  list-style: none;
  padding: 0px;
}

ul.leftli {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  gap: 40px;
}

ul.leftli div {
  padding-left: 10px;
}

#popups .popup {
  position: fixed;
  display: none;
  top: 10vh;
  left: calc(100vw/2);
  transform: translate(-50%, 0);
  background-color: #7A838B;
  background-color: var(--block-background-color);
  border: 1px solid rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border-color);
  width: 90vw;
  max-width: 500px;
  max-height: calc(80vh);
  margin: 0px auto 0px auto;
  padding: 4rem 0 5rem 0;
  box-shadow: 0 0 0 4000px rgba(0, 0, 0, 0.3);
  z-index: 100;
  font-size: 13px;
  /*  overflow: hidden; */
  border-radius: 10px;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

#popups .popup.wide {
  max-width: 650px;
}

#popups .dfa_act,
#popups .def_del_col_act_conf,
#popups .def_multi_prop {
  max-width: 776px !important;
  width: 776px !important;
  min-width: 776px !important;
  height: 510px !important;
  max-height: 510px !important;
  min-height: 510px !important;
}

#popups .def_multi_prop .def_multi_prop_container {
  margin: 0;
  border: 1px solid #ccc;
  overflow-y: auto !important;
  background-color: white !important;
  height: 378px !important;
  width: 752px;
  padding: 5px;
}

#popups .def_multi_prop .def_multi_prop_container .def_multi_prop_row {
  padding: 5px;
  border-bottom: 1px solid #eeee;
}

#popups .def_multi_prop .def_multi_prop_container .def_multi_prop_row span {
  width: 20%;
  font-weight: 500;
}

#popups .def_multi_prop .def_multi_prop_container .def_multi_prop_row .def_multi_prop_row_value {
  width: 80%;
}

#popups .def_multi_prop .def_multi_prop_container .def_multi_prop_row select,
#popups .def_multi_prop .def_multi_prop_container .def_multi_prop_row input[type='number'],
#popups .def_multi_prop .def_multi_prop_container .def_multi_prop_row input[type='text'] {
  height: 32px;
  width: 100%;
}

#popups .def_multi_prop .def_multi_prop_container .def_multi_prop_row .def_multi_prop_draw_border {
  width: 100%;
}

#popups .def_multi_prop .def_multi_prop_container .def_multi_prop_row .def_multi_prop_draw_border .def_multi_prop_draw_bordersection {}

#popups .def_multi_prop .def_multi_prop_container::-webkit-scrollbar {
  width: 5px;
}

.def_del_col_act_conf .def_del_col_act_conf_container {
  margin: 0;
  border: 1px solid #ccc;
  overflow-y: auto !important;
  background-color: white !important;
  height: 378px !important;
  width: 752px;
}

.def_del_col_act_conf .def_del_col_act_conf_container th {
  display: table-cell !important;
  font-size: 12px !important;
  padding: 5px !important;
  font-weight: 500;
}

.def_del_col_act_conf .def_del_col_act_conf_container td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  padding: 5px;
}

.def_del_col_act_conf .def_del_col_act_conf_container td select {
  width: 100%;
  height: 100%;
}

.dfa_act .dialog_content {
  max-height: 410px !important;
}

#popups .popup a {
  color: #333
    /*var(--link-color);*/
}

#popups .popup.imgui {
  max-width: 400px;
  min-height: 156px !important;
  max-height: 156px;
  height: 156px !important;

}

#popups .popup h2 {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  height: 4rem;
  line-height: 4rem;
  padding: 0 1rem;
  font-size: 1.5rem;
  background-color: rgba(255, 255, 255, 0.3);
  background-color: var(--header-background-color);
  z-index: 0;
  cursor: move;
  font-weight: 500;
  font-size: 16px;
}

#popups .popup .dialog_content {
  overflow-y: auto;
  max-height: calc(80vh - 11rem);
  padding: 1rem 1rem 1rem;
  min-height: 120px;
}


#popups .popup .buttons {
  position: absolute;
  background-color: var(--block-background-color);
  bottom: 0;
  left: 0;
  right: 0;
  height: 5rem;
  line-height: 4rem;
  margin: 0;
  padding: .5rem 1rem 0.5rem 0;
  text-align: right;
  border-top: 1px solid var(--header-background-color);
  z-index: 3;
}

#popups .popup .close {
  position: absolute;
  right: 0;
  top: 0;
  min-width: 0;
  padding: 5px;
  line-height: 0.5;
  font-size: 16px;
  margin-top: 10px;
  margin-right: 10px;
  border: none;
  background: none;
  z-index: 1;
  background: url(images/icons/close.svg) no-repeat center;
  height: 24px;
  width: 24px;
  border-radius: 0;
  box-shadow: none;
}

#popups .popup input[type="range"] {
  margin: 0;
  width: 100%;
}

#popups .popup table {
  box-sizing: border-box;
  width: 100%;
}

#popups .popup:not(.check_in, .new_temp) td,
#popups .popup th {
  height: 25px;
}

#popups .popup td {
  vertical-align: middle;
  font-size: 12px;
}

#popups .popup th {
  text-align: left;
  padding: 5px 5px 5px 0;
  width: 130px;
  font-size: 14px;
}

.dialog_content table #popup-tr-undefined th {
  display: none;
}

#popup-tr-bartype th {
  width: 180px !important;
}

#pop_data_bartype,
#pop_data_barvalue {
  width: 230px;
}

#popups .popup textarea {
  color: var(--input-text-color);
  width: 100%;
  border: 1px solid #393939;
  padding-left: 5px;
}

#popups .popup .button {
  margin: 0 3px;
  background-color: rgba(255, 255, 255, 0.2);
  background-color: var(--button-background-color);
  min-width: 60px;
  border: 1px solid var(--brand-color);
  /* border:1px solid var(--border-color); */
  padding: 4px 10px;
  color: var(--brand-color);
}

#popups .popup .secondary_btn {
  margin: 0 3px;
  background-color: rgba(255, 255, 255, 0.2);
  background-color: var(--button-background-color);
  min-width: 60px;
  border: 1px solid var(--brand-color);
  padding: 4px 10px;
  color: var(--brand-color);
  font-size: 12px;
}

#popups .popup .primary_btn {
  margin: 0 3px;
  min-width: 60px;
  border: 1px solid var(--brand-color);
  padding: 4px 10px;
  color: var(--brand-color);
  background-color: var(--brand-color) !important;
  color: white !important;
  font-size: 12px;
}

#popups .popup .primary_btn:disabled {
  margin: 0 3px;
  min-width: 60px;
  border: 1px solid #ccc;
  padding: 4px 10px;
  background-color: #e0e0e0 !important;
  color: #888 !important;
  font-size: 12px;
  cursor: not-allowed;
  opacity: 0.6;
  visibility: visible !important;
}

#popups .popup input[type="text"],
#popups .popup input[type="number"],
#popups .popup textarea {
  width: 100%;
}

#popups .popup input[type="number"] {
  width: 100px;
}

#popups .popup input[type="radio"],
#popups .popup input[type="checkbox"] {
  margin-left: 0;
  accent-color: var(--brand-color);
}

#popups .popup label span {
  color: var(--text-color-muted);
}

#popups .popup .checkbox label {
  margin-top: 5px;
  color: var(--text-color-muted);
}

#popups .popup .preview_container {
  margin-top: 10px;
  margin-bottom: 15px;
  text-align: center;
}

#popups .popup .preview_canvas_left {
  position: relative;
  margin: 0 5px 5px 0;
  border: 1px solid #393939;
  display: inline-block;
  vertical-align: top;
}

#popups .popup .preview_canvas_post_back {
  position: absolute;
  border: 1px solid #393939;
  background-color: #ffffff;
}

#popups .popup .preview_canvas_post {
  position: relative;
  border: 1px solid #393939;
}

#popups .popup .canvas_preview_container {
  position: relative;
  display: inline-block;
  vertical-align: top;
}

#popups .popup .radios label {
  display: inline-block;
  margin-right: 10px;
}

#popups .popup .range_value {
  padding-left: 10px;
  width: 50px;
}

#popups .popup .long_text_value {
  font-size: 12px;
}

#popups .popup .preview-item-title {
  text-align: center;
  max-width: 150px;
}

#popups .popup .field_comment {
  display: inline-block;
  margin-left: 10px;
  opacity: 0.5;
}

#popups .popup .selection_card {
  background: var(--input-background-color);
  display: block;
  width: 100%;
  padding: 0;
  border-bottom: 0.1rem solid var(--input-border-color);
  overflow: hidden;
  position: relative;
}

#popups .popup .selection_card:first-child {
  margin-top: 1rem;
  border-radius: var(--input-border-radius) var(--input-border-radius) 0 0;
}

#popups .popup .selection_card:last-child {
  border-radius: 0 0 var(--input-border-radius) var(--input-border-radius);
  border-bottom: none;
}

#popups .popup .selection_card>input[type="checkbox"] {
  flex-grow: 0;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 1.5rem;
  transform: translateY(-50%) scale(1.5);
}

#popups .popup .selection_card>input[type="checkbox"]+label {
  display: block;
  width: 100%;
  flex-grow: 1;
  flex-shrink: 1;
  margin: 0;
  padding: 1rem 0.5rem 1rem 5.5rem;
  cursor: pointer;
}

#popups .popup .selection_card>input[type="checkbox"]+label:hover {
  background: var(--input-background-color-hover);
}

#popups .popup .selection_card .font_preview {
  font-size: 1.6rem;
  height: 2.5rem;
  line-height: 2.5rem;
  white-space: nowrap;
}

#popups .popup .pagination {
  display: flex;
  text-align: center;
  margin: 1rem 0 0 0;
}

#popups .popup .pagination button {
  flex-grow: 0;
  height: 2.8rem;
  line-height: 2.8rem;
  border-radius: 0;
  margin-left: -1px;
  min-width: 3.3rem;
}

#popups .popup .pagination button:first-child {
  border-radius: var(--button-border-radius) 0 0 var(--button-border-radius);
  margin-left: auto;
}

#popups .popup .pagination button:last-child {
  border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;
  margin-right: auto;
}

.table_class {

  display: block;

  max-width: 850px !important;

  min-height: 320px !important;

}

#popups .save_template {
  max-width: 327px !important;
  height: 190px !important;
}

/* Template Library */
#popups .temp_lib {
  max-width: 700px !important;
  height: 488px !important;
  max-height: 488px !important;
}

.temp_lib .dialog_content {
  max-height: 396px !important
}

#popups .temp_lib .temp_library_list_search_input {
  width: 35% !important;
  margin-bottom: 10px;
  padding: 6px;
}

#popups .temp_lib .temp_lib_container {
  max-width: 700px !important;
  height: 371px !important;
  background-color: #fafafa;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  padding: 10px;
  gap: 10px;
}

#popups .temp_lib .temp_lib_container .sharedicon {
  background: url(images/icons/grp.svg) no-repeat center;
  height: 20px;
  width: 20px;
  display: inline-block;
}

#popups .temp_lib .temp_lib_container .temp_library_list_title {
  display: flex;
  align-items: center;
  flex-direction: row;
}

#popups .temp_lib .temp_lib_container .lib_box_1 {
  flex: 1;
  border: 1px solid #ccc;
  height: 100%;
  width: 100%;
  background-color: white;
  overflow-y: auto;
}

#popups .temp_lib .temp_lib_container #lib_box_1 {
  position: relative;
  height: 82% !important;
  bottom: 31px !important;
}

#popups .temp_lib .temp_lib_container #lib_box_2 {
  position: relative;
  height: 95% !important;
  bottom: 10px !important;
}

#popups .temp_lib .temp_lib_container .lib_box_1::-webkit-scrollbar {
  width: 5px;
}

#popups .temp_lib .temp_lib_container .lib_box_2 {
  flex: 1;
  border: 1px solid #ccc;
  height: 100%;
  width: 100%;
  padding: 10px;
  background-color: white;
  width: 334px;
}

#popups .temp_lib .temp_lib_container .lib_box_2 .lib_tem_preview {
  height: 100%;
  width: 100%;
  border: 1px solid #ccc;
  position: relative;
  overflow: auto;

}

#popups .temp_lib .temp_lib_container .lib_box_2 .lib_tem_preview::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

#popups .temp_lib .temp_lib_container .lib_box_2 .lib_tem_preview h4 {
  text-align: center;
  position: relative;
  top: 37%;
  color: black;
  font-weight: 500;
}

#popups .temp_lib .temp_lib_container tbody .temp_title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#popups .temp_lib .temp_lib_container tbody td {
  border: 1px solid #f1f1f1;
  height: 30px !important;
  padding: 5px;
  padding: 0px 0px 0px 5px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.library-loader {
  border: 8px solid #eee;
  border-top: 8px solid #ccc;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

.library-loader-container {
  width: 674px !important;
  height: 371px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.select_icon {
  display: inline-block;
  background: url(images/icons/select_ic.png) no-repeat center;
  width: 16px;
  height: 16px;
  border: none !important;
  cursor: pointer;
}

.rem_icon {
  display: inline-block;
  background: url(images/icons/rem_ic.png) no-repeat center;
  width: 16px;
  height: 16px;
  border: none !important;
  cursor: pointer;
}

.down_icon {
  display: inline-block;
  background: url(images/icons/download_ic.png) no-repeat center;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.temp_act_icons {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

#popups .temp_lib .temp_lib_container tbody h5 {
  color: black;
  margin: 0;
  padding-left: 5px;
}

#popups .temp_lib .temp_lib_container tbody .lib_temp_active {
  background-color: var(--tab-active-color);
  z-index: 10;
}

#popups .temp_lib .temp_lib_container tbody td a {
  color: black;
  margin: 0;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
  width: 185px;
}

#popups .temp_lib .temp_lib_container tbody td span {
  color: black;
  padding: 7px;
  color: black;
  background-color: #eee;
  border-radius: 2px;
  cursor: pointer;
  visibility: hidden;
  z-index: 20;
  text-align: center;
  width: 60px;
  height: 28px;

}

#popups .temp_lib .temp_lib_container tbody td .remove_temp_button {
  border-left: 1px solid #ccc;
}

#popups .temp_lib .lib_box_1 .temp_title:hover {
  background-color: var(--tab-active-color);
  z-index: 10;
}

#popups .temp_lib .temp_lib_container .template_card {
  height: 200px;
  width: 200px;
}

.temp_lib .dialog_content table #popup-tr-undefined th {
  background: #fafafa;
  color: black;
  display: table-cell !important;
  font-size: 13px !important;
  border: 1px solid #f1f1f1;
  padding: 5px !important;
  position: sticky;
  top: 0;
  z-index: 40;
  font-weight: 500;
}

/* save template css */
#popups .save_temp {
  max-width: 450px !important;
  height: 190px !important;
}

#popups .save_server_template {
  max-width: 450px !important;
  height: 390px !important;
  max-height: 390px;
}

.save_server_template .dialog_content {
  max-height: 298px !important;
}

#popups .save_temp .save_temp_file {
  background-color: #eee;
  height: 80px;
  width: 425px;
  padding: 10px;
  color: black !important;
  font-size: 12px;
}

#popups .save_server_template .save_server_template_files {
  background-color: #eee;
  height: 278px;
  width: 425px;
  padding: 10px;
  color: black !important;
  font-size: 12px;
}

#popups .save_server_template .save_server_template_files .save_prev {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: end;
  gap: 5px;
  padding: 5px 0px 5px 5px;
}

#popups .save_server_template .save_server_template_files .save_prev .server_temp_title {
  width: 150px;
}

#popups .save_server_template .prev_temp_form {
  background-color: white;
  overflow-y: auto;
  height: 222px;
}

#popups .save_server_template .prev_temp_form h4 {
  font-weight: 500;
}

#popups .save_server_template .prev_temp_form a {
  color: black;
  padding: 5px;
  cursor: pointer;
  text-decoration: none;
}

#popups .save_server_template .prev_temp_form td:hover {
  background-color: var(--tab-active-color);
}

#popups .save_server_template .prev_temp_form::-webkit-scrollbar {
  width: 5px;
}

#popups .save_server_template .prev_temp_form input[type="checkbox"] {
  margin: 0;
}

#popups .save_server_template .prev_temp_form input[type="text"] {
  width: 100%;
  background: white !important;
  border: 1px solid #ccc !important;
  height: 25px;
  color: black;
}

#popups .save_server_template .prev_temp_form label {
  color: black;
  margin: 0;
  padding-left: 5px;
}

#popups .save_server_template .prev_temp_form .serv_select_box {
  display: flex;
  align-items: center;
  justify-content: center;
}

#popups .save_server_template .prev_temp_form td {
  border: 1px solid #f1f1f1;
}

#popups .save_server_template .prev_temp_form td p {
  width: 200px;
  height: 35px;
  margin: 0;
  color: black;
}

#popups .save_temp .save_temp_file .save_curr {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3px;
}

#popups .save_server_template .serv_search_box {
  height: 25px;
  color: black;
}

#popups .save_server_template .serv_search_box input {
  height: 25px;
  background-color: white;
  border: 1px solid #ccc !important;
  color: black;
}

#popups .dialog_content .showhistory_search_box {
  height: 25px;
  color: black;
  align-items: flex-end;
}

#popups .dialog_content .showhistory_search_box input {
  height: 25px !important;
  width: 200px !important;
  float: right;
  margin-bottom: 8px;
  background-color: white;
  border: 1px solid #ccc !important;
  color: black;
}

.switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 15px;
  top: 0px;
  margin-top: 0px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: auto;
  margin: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 11px;
  width: 11px;
  left: 1px;
  bottom: 2px;
  background-color: #fff;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: #2A9D8F;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2A9D8F;
}

input:checked+.slider:before {
  -webkit-transform: translateX(17px);
  -ms-transform: translateX(17px);
  transform: translateX(17px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.toggle_label {
  position: absolute;
  left: 90px;
  top: 5px;
  color: #666666;
}

.disabled_toggle {
  color: #DBE2EA !important;
}

#popups .save_temp .save_temp_file form {
  margin: 0;
}

#popups .save_temp .save_temp_file .save_curr input {
  margin: 0;
}

#popups .save_temp .save_temp_file .save_curr input[type='text'] {
  background: white !important;
  border: 1px solid #ccc !important;
  flex: 1;
  height: 25px;
  color: inherit;
}

#popups .save_temp .save_temp_file .save_curr label {
  margin: 0;
  width: 100px;
}

.save_server_template .dialog_content table #popup-tr-undefined th {
  background: #fafafa;
  color: black;
  display: table-cell !important;
  font-size: 13px !important;
  border: 1px solid #f1f1f1;
  padding: 5px !important;
  position: sticky;
  top: 0;
}


#popups .table_class .dialog_content {

  min-height: 320px !important;

  overflow: hidden !important;

}

#popups .new_temp .new_temp_btn {
  height: 20px !important;
  width: 20px !important;
  background: url(images/icons/settings_ic.png) no-repeat center center;
  display: inline-block;
  margin-left: 3px;
  vertical-align: middle;
  cursor: pointer;
}

#popups .settings_ic {
  height: 20px !important;
  width: 20px !important;
  background: url(images/icons/settings_ic.png) no-repeat center center;
  display: inline-block;
  margin-left: 3px;
  vertical-align: middle;
  cursor: pointer;
}

.configuration_icon {
  background: url(images/icons/configuration_ic.png) no-repeat center center;
  width: 25px;
  height: 25px;
}

#popups .new_temp input[type="number"] {

  width: 219px !important;
}

#popups .new_temp .dialog_content table td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  /*  overflow: hidden !important; */
  padding: 5px !important;
  text-align: start !important;
}

#popups .new_temp .dialog_content #popup-tr-templateName td {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#popups .buttons button[name="primary"]:disabled,
#popups .buttons button[data-id="popup_cancel"]:disabled {
  visibility: visible !important;
  opacity: 1 !important;
  background-color: rgba(239, 239, 239, 0.3) !important;
  color: rgba(16, 16, 16, 0.3) !important;
  border-color: rgba(118, 118, 118, 0.3) !important;
}

.dataassociate {
  background: url(images/icons/configuration_ic.png) center center;
  border: 0px !important;
  width: 16px !important;
  height: 16px !important;
  margin-left: 2px;
}

/* temp_library_list_search_input_div */
.temp_library_list_search_input_div {
  margin-left: 10px;
}

/* pagination for server templates css */
.lib_box_1 .pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 20px;
  gap: 10px;
  position: fixed;
  bottom: 60px;
  left: 36px;
}

.lib_box_1 .page-button {
  margin: 0 5px;
  padding: 5px 10px;
  background-color: #f0f0f0;
  border: none;
  cursor: pointer;
}

.lib_box_1 .page-button.active {
  background-color: #008080;
  color: #fff;
}

.lib_box_1 .pagination .page-numbers {
  display: flex;
}

.lib_box_1 button.pagination_first,
.lib_box_1 button.pagination_prev,
.lib_box_1 button.pagination_next_1,
.lib_box_1 button.pagination_last {
  background-color: #008080;
  color: #fff;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

.lib_box_1 button {
  line-height: 0 !important;
}

.lib_box_1 button:disabled {
  visibility: visible !important;
  background-color: #ddd;
  cursor: not-allowed;
}

#popups .temp_lib .dialog_content {
  min-height: 420px !important;
}

#noResultsMessage {
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 500px) {
  #popups .popup {
    max-height: calc(80vh - 20px);
    /* mobile phones has bottom menu */
  }

  #popups .popup tr {
    display: block;
    margin-bottom: 10px;
  }

  #popups .popup td,
  #popups .popup th {
    display: block;
    width: 100%;
    height: auto;
    padding: 5px;
  }

  #popups .popup th {
    padding: 5px 5px 0px 5px;
  }

  #popups .popup td {
    padding: 5px 5px 5px 5px;
  }

  #popups .popup .range_value {
    display: none;
  }
}

/* Modal overlay */
#dataViewModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1000;
  display: flex;
  /* hidden by default */
  justify-content: center;
  /* horizontal center */
  align-items: center;
  /* vertical center */
}

/* Modal box */
#dataViewModal .modal {
  background: #fff;
  border: 1px solid #888;
  border-radius: 6px;
  width: 500px;
  /* increased width */
  max-width: 90%;
  max-height: 40%;
  /* prevent overflowing screen */
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Header */
#dataViewModal .modal-header {
  font-weight: bold;
  border-bottom: 1px solid #ccc;
  padding: 10px;
  background: #f2f2f2;
}

/* Body (scrollable if content too large) */
#dataViewModal .modal-body {
  padding: 10px;
  overflow-y: auto;
  flex: 1;
  /* take remaining space */
}

/* Table inside modal */
#dataViewModal table {
  width: 100%;
  border-collapse: collapse;
}

#dataViewModal th,
#dataViewModal td {
  border: 1px solid #ccc;
  padding: 6px;
  font-size: 14px;
  text-align: left;
}

#dataViewModal th {
  background: #f9f9f9;
}

/* Sticky header */
#dataViewModal thead th {
  position: sticky;
  top: 0;
  background: #f9f9f9;
  z-index: 2;
}

/* Footer */
#dataViewModal .modal-footer {
  border-top: 1px solid #ccc;
  padding: 8px;
  text-align: right;
  background: #f2f2f2;
}

#dataViewModal .modal-footer button {
  padding: 5px 14px;
  cursor: pointer;
}

#prev-exp-container {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background: #f9fafb;
  border: 1px solid #ddd;
  padding: 6px;
  font-family: monospace;
  font-size: 12px;
  line-height: 1.4;
  border-radius: 4px;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

#prev-exp-container .group {
  color: #1a56db;
  font-weight: bold;
  cursor: pointer;
}

#prev-exp-container .operator {
  color: #c53030;
  font-weight: bold;
}

#prev-exp-container .condition {
  color: #111827;
}

#prev-exp-container .collapsed {
  display: none;
}

/* set filter prop Popup */

#set-filter-prop {
  display: flex;
  height: 100%;
}

#set-filter-prop .popup-sidebar {
  width: 220px;
  background: #f9f9f9;
  border-right: 1px solid #ddd;
  padding: 15px;
}

#set-filter-prop .popup-sidebar h3 {
  margin: 0 0 10px 0;
  font-size: 14px;
  font-weight: bold;
}

#set-filter-prop .popup-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#set-filter-prop .popup-sidebar ul li {
  padding: 8px 10px;
  margin-bottom: 5px;
  border-radius: 4px;
  cursor: pointer;
  transition: 0.2s;
}

#set-filter-prop .popup-sidebar ul li.active,
#set-filter-prop .popup-sidebar ul li:hover {
  background: #007bff;
  color: #fff;
}

#set-filter-prop .popup-content {
  flex: 1;
  padding: 20px;
}

#set-filter-prop .form-row {
  display: flex;
  /* make label + input inline */
  align-items: center;
  /* vertically center */
  margin-bottom: 12px;
}

#set-filter-prop .form-row label {
  width: 150px;
  /* fixed width for labels */
  margin-bottom: 0;
  /* remove bottom margin */
  font-size: 13px;
}

#set-filter-prop .form-row input {
  width: 100%;
  padding: 10px 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  cursor: pointer;

}

/* Combo dropdown */
#set-filter-prop .combo {
  position: relative;
}

#set-filter-prop .combo .dropdown-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #666;
  pointer-events: none;
}

#set-filter-prop .combo ul {
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  width: 100%;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  max-height: 130px;
  overflow-y: auto;
  display: none;
  z-index: 100;
}

#set-filter-prop .combo ul li {
  padding: 6px 10px;
  cursor: pointer;
}

#set-filter-prop .combo ul li:hover {
  background: #f0f0f0;
  color: #000000;
}

#set-filter-prop .form-row .combo,
#set-filter-prop .form-row input:not(.combo input) {
  flex: 1;
  /* input takes remaining space */
}

#set-filter-prop .combo input {
  width: 100%;
  /* ensure full width inside combo */
}

.ui_select_input_selected {
  background-color: var(--drop-down-active-color);
  color: #fff;
}

/* set filter prop popup css End */
#currency-format-div {
  display: flex;
  white-space: break-spaces;
}

#popups #popup-tr-AppendCurrencyFormat td {
  text-align: left !important;
}

#popup-tr-ButtonContainer input[type=number]::-webkit-outer-spin-button,
#popup-tr-ButtonContainer input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#popup-tr-ButtonContainer input[type=number] {
  -moz-appearance: textfield;
}

/* iframe action css */

#iframe-layerModal .accordion {
  background: #eef1f6;
  cursor: pointer;
  padding: 10px 15px;
  margin-top: 8px;
  border-radius: 5px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#iframe-layerModal .panel {
  display: none;
  background: #fff;
  padding: 10px 15px;
  margin-top: 5px;
  border-radius: 5px;
  border: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#iframe-layerModal .panel-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

#iframe-layerModal .layer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

#iframe-layerModal select {
  padding: 4px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 13px;
  flex: 1;
}

#iframe-layerModal .layer-btn {
  padding: 2px 6px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

#iframe-layerModal .add-layer-btn {
  padding: 4px 8px;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}

#iframe-layerModal .group-title {
  margin-top: 15px;
  font-weight: bold;
  font-size: 15px;
  color: #333;
}

/* iframe action css end*/

/* Compose string css start*/
#compose-string-container .string_composition_prop_selection {
  height: 20%;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}

#compose-string-container .string_composition_prop_select {
  display: flex;
  width: 50%;
  gap: 5px;
  height: 100%;
  justify-content: space-between;
  flex-direction: column;
}

.string_composition_prop_select span {
  font-size: 14px;
  font-weight: 500;
  line-height: 16.8px;
}

.string_composition_prop_select #compose-global-string {
  width: 100%;
  height: 40px;
}

#compose-string-container .string_composition_prop_btn {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: end;
}

#compose-string-container button {
  background-color: var(--brand-color);
  color: #ffffff;
  padding: 4px 10px 4px 10px;
  border-radius: 4px;
  height: 32px;
  width: 200px;
}

#compose-string-container .config_icons {
  justify-content: left;
}

/* Compose string css end*/

/* frame define action message setting css */
#frame-message-container .form-group {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

#frame-message-container .form-group label {
  flex: 0 0 120px;
  font-weight: bold;
  margin-right: 10px;
}

#frame-message-container .form-group input,
#frame-message-container .form-group select,
#frame-message-container .form-group textarea {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}

#frame-message-container textarea {
  resize: vertical;
  min-height: 80px;
}

/* frame define action message setting css end */


/* Custom index Css */
.custom-index-field-accordion {
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.custom-index-field-accordion-header {
  background: #f0f2f5;
  padding: 12px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.custom-index-field-accordion-content {
  display: none;
  background: #fff;
  padding: 12px;
}

.custom-index-field-accordion-content.active {
  display: block;
}

.custom-index-field-accordion-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

#custom-index-field-container table {
  width: 100%;
  border-collapse: collapse;
}

#custom-index-field-container th,
#custom-index-field-container td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

#custom-index-field-container th {
  background: #f9f9f9;
  font-weight: bold;
}

#custom-index-field-container input[type="text"],
#custom-index-field-container select {
  width: 95%;
  padding: 6px;
}

.custom-index-field-btn-add {
  background-color: var(--brand-color);
  color: #ffffff;
  padding: 4px 10px 4px 10px;
  border-radius: 4px;
  height: 32px;
  width: 75px;
}

/* Custom index Css end */

/* Generic validation css */

.is-invalid {
  border: 1px solid red !important;
}

/* Generic validation css end */


#frame-image-input-wrapper {
  position: relative;
  width: 605px;
}

#frame-image-input-wrapper #frame-uploadBtn {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 70px;
  cursor: pointer;
  border: none;
  color: white;
  font-weight: bold;
}

/* xml-loader setting css */
.xml-loader-properties {
  display: flex;
  height: 100%;
  flex: 1;
}

.xml-loader-properties .form-row {
  display: flex;
  /* make label + input inline */
  align-items: center;
  /* vertically center */
  margin-bottom: 12px;
  flex: 1;
}

.xml-loader-properties .form-row input {
  width: 100%;
  padding: 10px 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  cursor: pointer;
  text-align: left !important;
}

.xml-loader-properties .combo {
  position: relative;
  overflow: visible !important;
  /* let the ul escape */
}

.xml-loader-properties .combo .dropdown-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #666;
  pointer-events: none;
}

.xml-loader-properties .combo ul {
  position: absolute;
  top: 100%;
  /* directly below input */
  left: 0;
  width: 100%;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  max-height: 130px;
  overflow-y: auto;
  display: none;
  z-index: 999999 !important;
  /* make sure it's above modal and other UI */
}

.xml-loader-properties .combo ul li {
  padding: 6px 10px;
  cursor: pointer;
}

.xml-loader-properties .combo ul li:hover {
  background: #f0f0f0;
  color: #000000;
}

.xml-loader-properties .form-row .combo,
.xml-loader-properties .form-row input:not(.combo input) {
  flex: 1;
  /* input takes remaining space */
}

.xml-loader-properties .combo input {
  width: 100%;
  /* ensure full width inside combo */
}

td>.xml-loader-properties {
  overflow: visible !important;
}

/* xml-loader setting css end*/
input[type=text].import-wizard__search {
  padding: 8px;
}

/* --- Modern Check In Modal Premium Styles --- */
#popups .popup.check_in {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  max-width: 520px !important;
  width: 520px !important;
  height: auto !important;
  min-height: unset !important;
  max-height: 90vh !important;
  padding: 56px 0px 68px 0px !important;
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
  background: #ffffff !important;
}

#popups .popup.check_in #popup-tr-type,
#popups .popup.check_in #popup-tr-quality,
#popups .popup.check_in #popup-tr-undefined,
#popups .popup.check_in #popup-tr-calc_size,
#popups .popup.check_in #popup-tr-layers,
#popups .popup.check_in #popup-tr-delay {
  display: none !important;
}

#popups .popup.check_in h2 {
  background: #ffffff !important;
  color: #0f172a !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 18px 24px 16px 24px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
  height: auto !important;
  line-height: normal !important;
}

/* Close button micro-interaction: smooth 90deg rotate */
#popups .popup.check_in .close {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  margin-top: 18px !important;
  margin-right: 18px !important;
  opacity: 0.6 !important;
}

#popups .popup.check_in .close:hover {
  transform: rotate(90deg) !important;
  opacity: 1 !important;
}

#popups .popup.check_in .dialog_content {
  padding: 24px 24px 12px 24px !important;
  background-color: #ffffff !important;
  margin: 0 !important;
  height: auto !important;
  min-height: unset !important;
  max-height: calc(90vh - 128px) !important;
  overflow-y: auto !important;
}

#popups .popup.check_in .dialog_content table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
}

#popups .popup.check_in .dialog_content table tr {
  display: table-row !important;
  height: auto !important;
  border: none !important;
  background: transparent !important;
}

/* Specificity overrides to remove legacy obj_prop borders and backgrounds */
#popups .popup.check_in .dialog_content table tr th,
#popups .popup.check_in.obj_prop .dialog_content table tr th {
  width: 180px !important;
  max-width: 180px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  margin: 0 !important;
  padding: 12px 12px 12px 0 !important;
  text-align: left !important;
  height: auto !important;
  line-height: normal !important;
  border: none !important;
  background: transparent !important;
  vertical-align: middle !important;
}

/* Vertically align Comments label to the top of the textarea */
#popups .popup.check_in .dialog_content table tr#popup-tr-comments th,
#popups .popup.check_in.obj_prop .dialog_content table tr#popup-tr-comments th {
  vertical-align: top !important;
  padding-top: 14px !important;
}

#popups .popup.check_in .dialog_content table tr td,
#popups .popup.check_in.obj_prop .dialog_content table tr td {
  padding: 8px 0 !important;
  width: auto !important;
  height: auto !important;
  vertical-align: middle !important;
  border: none !important;
  background: transparent !important;
  display: table-cell !important;
}

/* Form Inputs */
#popups .popup.check_in input[type="text"] {
  background-color: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  color: #0f172a !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  font-family: 'Poppins', Arial, sans-serif !important;
  height: 38px !important;
  line-height: normal !important;
}

#popups .popup.check_in input[type="text"]:focus {
  border-color: #0F467C !important;
  box-shadow: 0 0 0 3px rgba(15, 70, 124, 0.15) !important;
  outline: none !important;
}

#popups .popup.check_in input[type="text"]:disabled {
  background-color: #f1f5f9 !important;
  color: #334155 !important;
  border-color: #cbd5e1 !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

#popups .popup.check_in textarea {
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  color: #0f172a !important;
  width: 100% !important;
  height: 120px !important;
  box-sizing: border-box !important;
  background-color: #ffffff !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  font-family: 'Poppins', Arial, sans-serif !important;
  resize: none !important;
  line-height: 1.5 !important;
}

#popups .popup.check_in textarea:focus {
  border-color: #0F467C !important;
  box-shadow: 0 0 0 3px rgba(15, 70, 124, 0.15) !important;
  outline: none !important;
}

/* Modern Toggle Switch styling for check_in checkbox */
#popups .popup.check_in .dialog_content table tr#popup-tr-isActive td.checkbox {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  border: none !important;
  background: transparent !important;
  padding: 8px 0 !important;
}

#popups .popup.check_in .dialog_content table tr#popup-tr-isActive input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#popups .popup.check_in .dialog_content table tr#popup-tr-isActive input[type="checkbox"] + label {
  display: inline-block !important;
  position: relative !important;
  width: 44px !important;
  height: 24px !important;
  background-color: #cbd5e1 !important;
  border-radius: 24px !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
  margin: 0 !important;
  padding: 0 !important;
}

#popups .popup.check_in .dialog_content table tr#popup-tr-isActive input[type="checkbox"] + label::after {
  content: "" !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 20px !important;
  height: 20px !important;
  background-color: #ffffff !important;
  border-radius: 50% !important;
  transition: transform 0.2s ease !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

#popups .popup.check_in .dialog_content table tr#popup-tr-isActive input[type="checkbox"]:checked + label {
  background-color: #0F467C !important;
}

#popups .popup.check_in .dialog_content table tr#popup-tr-isActive input[type="checkbox"]:checked + label::after {
  transform: translateX(20px) !important;
}

#popups .popup.check_in .dialog_content table tr#popup-tr-isActive input[type="checkbox"]:focus + label {
  box-shadow: 0 0 0 3px rgba(15, 70, 124, 0.15) !important;
}

/* Footer Buttons */
#popups .popup.check_in .buttons {
  padding: 16px 24px !important;
  border-top: 1px solid #f1f5f9 !important;
  background-color: #ffffff !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  height: auto !important;
  line-height: normal !important;
  bottom: 0 !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
}

#popups .popup.check_in .button {
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  height: 36px !important;
  min-width: 90px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#popups .popup.check_in [data-id="popup_cancel"] {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}

#popups .popup.check_in [data-id="popup_cancel"]:hover {
  background-color: #f8fafc !important;
  border-color: #94a3b8 !important;
}

#popups .popup.check_in [data-id="popup_ok"] {
  background-color: #0F467C !important;
  border: 1px solid #0F467C !important;
  color: #ffffff !important;
}

#popups .popup.check_in [data-id="popup_ok"]:hover {
  background-color: #0d3d6c !important;
  border-color: #0d3d6c !important;
}

#popups .popup.check_in .dialog_content table,
#popups .popup.check_in .dialog_content table tbody {
  display: block !important;
  width: 100% !important;
}

#popups .popup.check_in .dialog_content table tr#popup-tr-name {
  display: block !important;
  width: 100% !important;
  margin-bottom: 16px !important;
}

#popups .popup.check_in .dialog_content table tr#popup-tr-comments {
  display: block !important;
  width: 100% !important;
  margin-bottom: 8px !important;
}

#popups .popup.check_in .dialog_content table tr#popup-tr-name th,
#popups .popup.check_in .dialog_content table tr#popup-tr-comments th {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 0 6px 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
}

#popups .popup.check_in .dialog_content table tr#popup-tr-name td,
#popups .popup.check_in .dialog_content table tr#popup-tr-comments td {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}

#popups .popup.check_in .dialog_content table tr#popup-tr-name input[type="text"],
#popups .popup.check_in .dialog_content table tr#popup-tr-comments textarea {
  width: 100% !important;
  box-sizing: border-box !important;
}

#popups .popup.check_in .dialog_content table tr#popup-tr-isActive {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

#popups .popup.check_in .dialog_content table tr#popup-tr-isActive th {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
}

#popups .popup.check_in .dialog_content table tr#popup-tr-isActive td {
  display: block !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Container & Layout */
.comm-qc {
    width: 700px !important;
    min-width: 700px !important;
    max-width: 700px !important;
    height: 550px !important;
    min-height: 550px !important;
    max-height: 550px !important;
}

.qc-container {
    border-radius: 12px;
    width: 678px;
    height: 430px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.qc-container label {
    margin: 0px !important;
}

.qc-header {
    border-bottom: 1px solid #eee;
    height: 7%;
}

.qc-sections {
    height: 93%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    padding: 5px;
}
.qc-field{
    height: 100% !important;
    display: flex;
    flex-direction: column;
}
.qc-field input[type="text"]{
    height: 32px ;
}
.qc-sections > div:first-child {
    height: 20%;
}

.qc-sections > div:last-child {
    height: 80%;
}

.qc-header-title {
    font-size: 12px;
    font-weight: 600;
    color: #1a202c;
}


.qc-section-label {
    font-size: 12px;
    text-transform: uppercase;
}

/* Form Elements */
.qc-form-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 5px;
}

.qc-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 8px;
}

.qc-input,
.qc-select {
    width: 100%;
    height: 30px;
}

.qc-input:focus,
.qc-select:focus {
    outline: none;
    border-color: var(--brand-color);
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
}
.qc-dd-checkbox-group{
display: flex;
align-items: center;
gap: 5px;
}
.qc-dd-checkbox-group input[type="checkbox"]{
    margin: 0 !important;
}

/* Tabs */
.qc-tabs {
    display: flex;
    border-bottom: 2px solid #edf2f7;
    margin-bottom: 0;
}

.qc-tab {
    padding: 12px 20px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}

.qc-tab--active {
    color: var(--brand-color);
    border-bottom: 2px solid var(--brand-color);
}

.qc-tab:hover:not(.qc-tab--active) {
    color: #2d3748;
    background: #f7fafc;
}

/* Table */
.qc-table-container {
    border: 1px solid #edf2f7;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    overflow: auto;
}

.qc-table-container::-webkit-scrollbar {
    width: 5px;
}

.qc-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.qc-table th {
    background: #f8fafc;
    padding: 5px 5px;
    font-size: 12px !important;
    font-weight: 700;
    color: #4a5568;
    border-bottom: 1px solid #edf2f7;
    position: sticky;
    top: 0;
    text-align: center;
    border: 1px solid #f1f1f1;
    z-index: 100;
}

.qc-table select,.qc-table input[type='text']{
    width: 100%;
    height: 32px;
}

.qc-table td {
        padding: 5px 5px;
    font-size: 12px;
    border-bottom: 1px solid #f1f5f9;
}

.qc-table-empty {
    text-align: center;
    color: #a0aec0;
    font-style: italic;
    padding: 40px !important;
}

.qc-checkbox-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.qc-section {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.query_repos {
  background-color: white;
  width: 670px;
  height: 450px;
}

.query_container {
  background-color: white;
  width: 670px;
  height: 450px;
  border: 1px solid black;
  padding: 5px;
  gap: 5px;
  display: flex;

}

.query_container_left {
  width: 40%;
  float: left;
  /* padding: 20px;*/
  border: 1px solid black;
  height: 90%;
  overflow-x: scroll;
}

.query_container_right {
  width: 60%;
  float: left;
  /* padding: 20px;*/
  border: 1px solid black;
  height: 90%;
}

.information_table tr td {
  border: 1px solid black;
  align-items: center;
}

.query-tree-table-space-block {
  border: 1px solid transparent;
  display: inline-block;
  width: 20px !important;
  height: 20px !important;
  line-height: 16px;
  text-align: center;
  vertical-align: top;
  font-size: 19px !important;
  position: relative !important;
  box-sizing: border-box;
  margin-top: 7px;
  border-radius: 50%;
}

.query_repository {
  height: 80vh;
  max-width: 700px !important;

}

.query_container_left .query-tree-table-wrap {
  width: 100%;
  height: 100%;
  overflow-x: scroll;
}

.query-tree-table {
  border: 1px solid #f1f1f1 !important;
  table-layout: fixed !important;
  width: 100% !important;
  border-collapse: collapse !important;
  background-color: white !important;
}

.query-tree-table th {
  position: sticky;
  top: 0;
  color: #333;
  text-align: center;
  padding: 10px 0;
  background: #fafafa;
  font-size: 13px;
  border: 1px solid #f1f1f1;
  z-index: 100;
}

.query-tree-table td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}

.query-tree-table tr td:first-child {
  overflow: initial !important;
}

.query-tree-table-space-block {
  border: 1px solid transparent;
  display: inline-block;
  width: 20px !important;
  height: 20px !important;
  line-height: 16px;
  text-align: center;
  vertical-align: top;
  font-size: 19px !important;
  position: relative !important;
  box-sizing: border-box;
  margin-top: 7px;
  border-radius: 50%;
}

.query-tree-table tr td .query-tree-table-space-block:first-child {
  margin-left: 7px;
}

.query-tree-table-space-block.query-btn-toggle {
  /* border: 1px solid #d9d9d9; */
  position: relative;
  cursor: pointer;
  width: 15px;
  height: 17px;
  z-index: 12;
}

.query-tree-table-space-block.query-btn-toggle.is-close {
  background: #f1f1f1;
  border: 1px solid transparent;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.query-tree-table-space-block:before {
  position: absolute;
  content: "";
  width: 1px;
  height: 36px;
  background: #d9d9d9;
  left: 50%;
  top: -27px;
  z-index: -1;
}

.query-tree-table-space-block i {
  display: block;
  width: 3px;
  height: 3px;
  margin-left: 8px;
  margin-top: 7px;
  background: #d9d9d9;
  border-radius: 50%;
}

.query-tree-table-space-block.query-btn-toggle:before {
  display: none;
}

.query-tree-table-space-block.query-last-block:before {
  display: none;
}

.query-tree-table-space-block.query-last-block:after {
  position: absolute;
  content: "";
  width: 20px;
  height: 1px;
  background: #d9d9d9;
  top: 50%;
  margin-top: -1px;
  left: -10px;
}

.query-tree-table-space-block.query-btn-toggle:after {
  display: none;
}

.query-tree-table tr td .query-tree-table-space-block:first-child:after {
  display: none;
}

.query-tree-table-td-content {
  position: relative !important;
  display: inline-block;
  padding: 7px;
  cursor: pointer;
}

.query-table-td-content {
  position: relative !important;
  display: inline-block;
  padding: 7px;
  cursor: pointer;
}

.query-hidden {
  display: none !important;
}

.query-show {
  visibility: visible !important;
}

.query_settings_container {
  background-color: #fafafa;
  width: calc(var(--query-settings-dialog-width) - 18px);
  height: calc(var(--query-settings-dialog-height) - 35px);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.query_settings_container label {
  margin: 0;
}

.query_settings_container textarea {
  resize: none;
}

.query_settings_container .query_box {
  height: 85%;
  padding: 5px;
  border: 1px solid #ccc;
  background-color: white;
  width: 100%;
  overflow: hidden;
}

.query_settings_container .query_box .query_box_div1 {
  height: 15%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.query_settings_container .query_box .query_box_dropdwon {
  display: flex;
  flex-direction: row;
  gap: 5px;
  height: 25px;
}

.query_settings_container .query_box .query_box_dropdwon select,
.query_settings_container .query_box .query_box_dropdwon input {
  height: 25px;
}

.query_tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #fafafa;
  height: 6%;
}

.query_editor_query_tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #fafafa;
  height: 7%;
}

/* for tabs */
.query_tabs p {
  color: black;
  background-color: #dbd6d6;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 4px 10px;
  transition: 0.3s;
  font-size: 13px;
  margin: 0px
}

.query_tabs p.active {
  background-color: white;
}

.query_tabs p:hover {
  background-color: white;
}

/* tabs css end */
.query_tab_button {
  background-color: transparent;
  color: black;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  /*padding: 14px 16px;*/
  transition: 0.3s;
  font-size: 14px;
}

.query_editor_query_tab_button {
  background-color: transparent;
  color: black;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  /*padding: 14px 16px;*/
  transition: 0.3s;
  font-size: 14px;
}

.query_tabcontent {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 5px;
}

.query_tabcontent .query_builder_box {
  height: 120px;
}

.query_tabcontent .query_editor_query_tabcontent_table {
  /* display: flex; */
  flex-direction: row;
  width: 100%;
  height: 100%;
  gap: 5px;
}

.query_editor_query_tabcontent {
  /* display: flex; */
  /*border: 1px solid #ccc;*/
  border-top: none;
  justify-content: space-between;
  /* height: 159px;
    overflow-y: auto;
    margin-top: 3px;
    padding: 0px 21px; */
}

.query_editor_query_tabcontent_table_parent_div {
  height: 159px;
  overflow: auto;
  margin-top: 3px;
  padding: 0px 21px;
  width: 90%;
}

.query_editor_query_tabcontent .query_status_box_table {
  width: 100%;
  border: 1px solid black;
  border-collapse: collapse !important;
}

.query_status_box_table td {
  border: 1px solid black;
  border-collapse: collapse !important;
}

.query_status_box_table tr {
  border: 1px solid black;
  border-collapse: collapse !important;
}

.query_status_box_table_thead_tr th {
  display: table-cell !important;
  border: 1px solid black;
  border-collapse: collapse !important;
}

.query_writter_table {
  /* width:615px;
    height:100%; */
  display: flex;
  justify-content: space-between;
  width: 50%;
}

.query_writter_table .query_wrtting_table_class {
  width: 100%;
  height: 100%;
  border: 1px solid #ccc !important;
}

.query_writter {
  width: 100%;
  height: 30%;

}

.query_writter .query_wrtting_class {
  width: 100%;
  height: 100%;
  border: 1px solid #ccc !important;
}

.query_editor_table_button {
  width: 107px;
  display: flex;
  gap: 10px;
  flex-direction: column;
  justify-content: center;
}

.query_editor_table_button input {
  width: 105px;
  height: 25px;
}

.query_settings {
  --query-settngs-width: 70vw;
  --query-settings-height: 80vh;
  max-width: var(--query-settngs-width) !important;
  width: var(--query-settngs-width) !important;
  min-width: var(--query-settngs-width) !important;
  height: var(--idm-height) !important;
  min-height: var(--query-settings-height) !important;
  max-height: var(--query-settings-height) !important;
}

.query_settings .dialog_content {
  overflow: hidden !important;
  --query-settings-dialog-height: calc(var(--query-settings-height) - 85px);
  --query-settngs-dialog-width: var(--query-settngs-width);
  height: var(--query-settings-dialog-height) !important;
  max-height: var(--query-settings-dialog-height) !important;
  min-height: var(--query-settings-dialog-height) !important;
  width: var(--query-settngs-dialog-width) !important;
}

.field_selection_container {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
}

.field_selection_left_side {
  float: left;
  height: 100%;
  width: 60%;
  /*border:1px solid black;*/
}

.field_selection_middle_table {
  width: 100%;
  height: 50%;
}

.field_selection_middle_table td {
  text-align: center;
}

.last_div {
  width: 100%;
  height: 55%;
  border: 1px solid black;
}

.select_table_div {
  width: 80%;
}

.select_DB_objects {
  width: 50% !important;
}

.table_btn_field_select_div {
  display: flex;
  /* justify-content: space-between; */
  padding-bottom: 8px;
}

.list_of_fields {
  width: 100%;
  /* height: 40%; */
  border: 1px solid #e0d4d4;
  height: 130px;
  overflow-y: auto;
  border-radius: 5px;
  padding: 2px 5px;
}

.list_of_fields::-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
}

.loader {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  animation: spin 0.8s linear infinite;
  margin: auto;
}

.loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.table_of_list_of_fields {
  width: 100%;
  height: 100%;
  /* border: 1px solid black; */
}

.conditions_container {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
}

.conditions_container_left {
  float: left;
  height: 100%;
  width: 50%;
  /*border : 1px solid black;*/
}

#conditions_container_left_id {
  padding: 20px 0px;
}

#conditions_container_left_id div {
  display: flex;
  gap: 5px;
}

#compose_select_value {
  margin-left: 4px !important;
  width: 65% !important;
}

#compose_select_operator {
  width: 32%;
}

#external_object_select {
  width: 65%;
}

.conditions_buttons_div {
  margin-top: 15px;
  float: right;

}

#conditions {
  overflow-y: auto;
  height: 45%;

}

#sorting_criteria {
  height: 45%;
}

#conditions::-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
}

.compose_container {
  display: list-item !important;
  margin-top: 5px;
  list-style: none !important;

}

#conditions_container_left_id input {
  margin: 0;
  margin-right: 3px;

}

.list_of_tables_fields {
  width: 100%;
  border: 1px solid #e0d4d4;
  height: 130px;
  overflow-y: auto;
  border-radius: 5px;
  margin-top: 5px;
  padding: 5px;

}

.selected-sorting-row {
  background-color: lightblue;
}

.list_of_tables_fields::-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
}

.conditions_container_table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
}

.conditions_container_table th {
  background-color: #f2f2f2;
  border: 1px solid #ddd;
  padding: 8px;
}

.conditions_container_table td {
  border: 1px solid #ddd;
  padding: 8px;
}

/* .sorting_criteria_container {
  display: flex;
  gap: 20px;
  margin-top: 10px;
}

.sorting_criteria_left, 
.sorting_criteria_right {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sorting_field_list_container {
  margin-top: 5px;
}

.sorting_field_list {
  width: 150px;
}

.sorting_action_btn {
  width: 30px;
  margin: 2px 0;
}

.sorting_criteria_table {
  border-collapse: collapse;
  width: 100%;
}

.sorting_criteria_table th,
.sorting_criteria_table td {
  border: 1px solid #ccc;
  padding: 5px;
}

.sorting_order_buttons {
  margin-top: 10px;
} */


.table_list_of_tables_fields {
  width: 100%;
  height: 100%;
  /* border: 1px solid black; */
}

.relation_ship_table {
  height: 40%;
  width: 100%;
  border: 1px solid black;
}

.table_relation_ship_table td {
  height: 100%;
  border: 1px solid black;
}

.sorting_criteria_container {
  width: 100%;
  height: 100%;
  display: flex;
  gap: 5px;
}

#sorting_field_list {
  height: 110px;
}

#sorting_field_list::-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
}

#sorting_criteria_table_container::-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
}

#sorting_criteria_table_container {
  max-height: 160px;
  overflow-y: auto;
  /* border: 1px solid #ccc; */
}

.sorting_criteria_left_container {
  width: 50%;
  height: 100%;
  float: left;
  /* border:1px solid black*/
}

.selection_db_objects_1 {
  width: 100%;
  height: 35.99%;
  border: 1px solid black
}

.selection_db_objects {
  width: 100%;
  height: 50%;
  /* border:1px solid black*/
}

.table_selection_db_objects_1 td {
  color: black;
  border: 1px solid black;
}

.table_selection_db_objects_2 td {
  color: black;
  /*border:1px solid black;*/
  text-align: center;
}

.selection_db_objects_3 {
  width: 100%;
  height: 50%;
  border: 1px solid black
}

.table_selection_db_objects_3 td {
  color: black;
  border: 1px solid black;
}

.table_selection_db_objects_4 td {
  color: black;

  text-align: center;
}

.relationship_buttons_div {
  padding: 5px;
  display: inline-block;
}

.schema_table td {
  color: black;
}

.schema_list_div {
  padding: 10px;
  width: 100%;
  height: 50%;
  border: 1px solid black;
}

.schema_class {
  background: #fff;
  /* border: 1px solid black; */
  color: #000;
  margin: 2px;
  /* height: 300px; */
  overflow: hidden;
  padding: 5px;
}

#schema_class_selected_schema_tables {
  height: 375px;
  overflow-y: auto;
  margin: 2px;
  padding: 5px;
  border: 1px solid #ebdede;
  border-radius: 5px;
}

#schema_class_selected_schema_tables::-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
}

#table_added {
  height: 100px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid gray;
  width: 50%;
  margin-top: 6px;
}

.schema_object {
  display: block;

  max-width: 700px !important;

  /* min-height: 600px ; */
}

.query_menu_tab {
  width: 100%;
  padding: 5px;
  display: flex;
  height: 9%;
  gap: 10px;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.database_con {
  /* background: url(images/icons/execute_full_query.png) no-repeat center center; */
  /*display:inline-block*/
  border-radius: 4px;
  height: 100%;
  width: auto;
  cursor: pointer;
  margin: 0 3px;
  background-color: var(--button-background-color);
  min-width: 60px;
  border: 1px solid var(--brand-color);
  /* border: 1px solid var(--border-color); */
  padding: 4px 10px;
  color: var(--brand-color);
}

.select_query {
  background: url(images/icons/select_query.png) no-repeat center center;
  /*display:inline-block*/
  height: 18px;
  width: 18px;
  cursor: pointer;
}

.insert_query {
  background: url(images/icons/insert_query.png) no-repeat center center;
  /*display:inline-block*/
  height: 18px;
  width: 18px;
  cursor: pointer;
}

.update_query {
  background: url(images/icons/update_query.png) no-repeat center center;
  /*display:inline-block*/
  height: 18px;
  width: 18px;
  cursor: pointer;
}

.edit_query {
  background: url(images/icons/edit_query.png) no-repeat center center;
  /*display:inline-block*/
  height: 18px;
  width: 18px;
  cursor: pointer;
}

.reset_query {
  background: url(images/icons/reset_query.png) no-repeat center center;
  /*display:inline-block*/
  height: 18px;
  width: 18px;
  cursor: pointer;
}

.clear_query {
  background: url(images/icons/clear_query.png) no-repeat center center;
  /*display:inline-block*/
  height: 18px;
  width: 18px;
  cursor: pointer;
}

.save_query {
  background: url(images/icons/save_query.png) no-repeat center center;
  /*display:inline-block*/
  height: 18px;
  width: 18px;
  cursor: pointer;
}

.import_query {
  background: url(images/icons/import_query.png) no-repeat center center;
  /*display:inline-block*/
  height: 18px;
  width: 18px;
  cursor: pointer;
}

.tables_dropdown {
  background: url(images/icons/tables_dropdown.png) no-repeat center center;
  /*display:inline-block*/
  height: 18px;
  width: 18px;
  cursor: pointer;
}

.views_dropdown {
  background: url(images/icons/views_dropdown.png) no-repeat center center;
  /*display:inline-block*/
  height: 18px;
  width: 18px;
  cursor: pointer;
}

.synonymn_dropdown {
  background: url(images/icons/synonyms_dropdown.png) no-repeat center center;
  /*display:inline-block*/
  height: 18px;
  width: 18px;
  cursor: pointer;
}

.sequence_dropdown {
  background: url(images/icons/sequences_dropdown.png) no-repeat center center;
  /*display:inline-block*/
  height: 18px;
  width: 18px;
  cursor: pointer;
}

.stored_function_dropdown {
  background: url(images/icons/stored_function_dropdown.png) no-repeat center center;
  /*display:inline-block*/
  height: 18px;
  width: 18px;
  cursor: pointer;
}

.external_object_dropdown {
  background: url(images/icons/external_object_dropdown.png) no-repeat center center;
  /*display:inline-block*/
  height: 18px;
  width: 18px;
  cursor: pointer;
}

.columns_dropdown {
  background: url(images/icons/columns_dropdown.png) no-repeat center center;
  /*display:inline-block*/
  height: 18px;
  width: 18px;
  cursor: pointer;
}

.execute_full_query {
  /* background: url(images/icons/execute_full_query.png) no-repeat center center; */
  /*display:inline-block*/
  background-color: var(--brand-color);
  color: #ffffff;
  padding: 4px 10px 4px 10px;
  border-radius: 4px;
  height: 100%;
  width: 70px;
  cursor: pointer;
}

.execute_full_query:hover {
  background-color: var(--brand-hover-color);
  color: #ffffff;
}

.execute_top_ten {
  background: url(images/icons/execut_-top_ten.png) no-repeat center center;
  /*display:inline-block*/
  height: 18px;
  width: 18px;
  cursor: pointer;
}

.set_test_value {
  /* background: url(images/icons/execute_full_query.png) no-repeat center center; */
  /*display:inline-block*/
  border-radius: 4px;
  height: 100%;
  width: auto;
  cursor: pointer;
  margin: 0 3px;
  background-color: var(--button-background-color);
  min-width: 60px;
  border: 1px solid var(--brand-color);
  /* border: 1px solid var(--border-color); */
  padding: 4px 10px;
  color: var(--brand-color);
}

.custom_index_field_button_add_button {
  width: 10px;
  height: 10px;
}

#popups .schema_object .dialog_content {

  min-height: 600px !important;
  background: #fff;
  /*overflow-y:scroll ;*/


}

.input_blob {
  width: 200px !important;
}

.database_information td {
  text-align: center;
  border: 1px solid black;
}

.database_connection_popup {
  height: 405px !important;
  background: #fff;

}

#popups .database_connection_pop .dialog_content {
  height: 80vh;

}

.database_connection_pop {
  max-width: 700px !important;
  height: 600px !important;
}

#popups>.adding_query>.buttons>button:disabled {
  visibility: visible !important;
  background-color: rgba(239, 239, 239, 0.3) !important;
  color: rgba(16, 16, 16, 0.3) !important;
  border-color: rgba(118, 118, 118, 0.3) !important;
}

#popups .query_settings .dialog_content {
  min-height: 417px !important;
}

/* #popups > .query_settings > .buttons > button:disabled {
  visibility: visible !important;
  background-color: rgba(239, 239, 239, 0.3)!important;
  color: rgba(16, 16, 16, 0.3) !important;
  border-color: rgba(118, 118, 118, 0.3) !important;
} */

#popups .query_repository .dialog_content {
  min-height: 600px !important;
}


/* data base explorer tree css */

.database-explorer-tree-table-wrap {
  width: 100%;
}

.database-explorer-tree-table {
  border: 1px solid #f1f1f1 !important;
  table-layout: fixed !important;
  width: 100% !important;
  border-collapse: collapse !important;
  background-color: white !important;
}

.database-explorer-tree-table th {
  position: sticky;
  top: 0;
  color: #333;
  text-align: center;
  padding: 10px 0;
  background: #fafafa;
  font-size: 13px;
  border: 1px solid #f1f1f1;
  z-index: 100;
}

.database-explorer-tree-table td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}

.database-explorer-tree-table tr td:first-child {
  overflow: initial !important;
}

.database-explorer-tree-table-space-block {
  border: 1px solid transparent;
  display: inline-block;
  width: 20px !important;
  height: 20px !important;
  line-height: 16px;
  text-align: center;
  vertical-align: top;
  font-size: 19px !important;
  position: relative !important;
  box-sizing: border-box;
  margin-top: 7px;
  border-radius: 50%;
}

.database-explorer-tree-table tr td .database-explorer-tree-table-space-block:first-child {
  margin-left: 7px;
}

.database-explorer-tree-table-space-block.database-explorer-btn-toggle {
  /* border: 1px solid #d9d9d9; */
  position: relative;
  cursor: pointer;
  width: 15px;
  height: 17px;
  z-index: 12;
}

.database-explorer-tree-table-space-block.database-explorer-btn-toggle.is-close {
  background: #f1f1f1;
  border: 1px solid transparent;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.database-explorer-tree-table-space-block:before {
  position: absolute;
  content: "";
  width: 1px;
  height: 36px;
  background: #d9d9d9;
  left: 50%;
  top: -27px;
  z-index: -1;
}

.database-explorer-tree-table-space-block i {
  display: block;
  width: 3px;
  height: 3px;
  margin-left: 8px;
  margin-top: 7px;
  background: #d9d9d9;
  border-radius: 50%;
}

.database-explorer-tree-table-space-block.database-explorer-btn-toggle:before {
  display: none;
}

.database-explorer-tree-table-space-block.database-explorer-last-block:before {
  display: none;
}

.database-explorer-tree-table-space-block.database-explorer-last-block:after {
  position: absolute;
  content: "";
  width: 20px;
  height: 1px;
  background: #d9d9d9;
  top: 50%;
  margin-top: -1px;
  left: -10px;
}

.database-explorer-tree-table-space-block.database-explorer-btn-toggle:after {
  display: none;
}

.database-explorer-tree-table tr td .database-explorer-tree-table-space-block:first-child:after {
  display: none;
}

.database-explorer-tree-table-td-content {
  position: relative !important;
  display: inline-block;
  padding: 7px;
  cursor: pointer;
}

.database-explorer-hidden {
  display: none !important;
}

.database-explorer-show {
  visibility: visible !important;
}

/* data explorer tree end */

/* data explorer button css */
.de_field_button {
  height: 25px !important;
}

/* query repository tree*/
.query-repository-tree-table-wrap {
  width: 100%;
}

.query-repository-tree-table {
  border: 1px solid #f1f1f1 !important;
  table-layout: fixed !important;
  width: 100% !important;
  border-collapse: collapse !important;
  background-color: white !important;
}

.query-repository-tree-table th {
  position: sticky;
  top: 0;
  color: #333;
  text-align: center;
  padding: 10px 0;
  background: #fafafa;
  font-size: 13px;
  border: 1px solid #f1f1f1;
  z-index: 100;
}

.query-repository-tree-table td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}

.query-repository-tree-table tr td:first-child {
  overflow: initial !important;
}

.query-repository-tree-table-space-block {
  border: 1px solid transparent;
  display: inline-block;
  width: 20px !important;
  height: 20px !important;
  line-height: 16px;
  text-align: center;
  vertical-align: top;
  font-size: 19px !important;
  position: relative !important;
  box-sizing: border-box;
  margin-top: 7px;
  border-radius: 50%;
}

.query-repository-tree-table tr td .query-repository-tree-table-space-block:first-child {
  margin-left: 7px;
}

.query-repository-tree-table-space-block.query-repository-btn-toggle {
  /* border: 1px solid #d9d9d9; */
  position: relative;
  cursor: pointer;
  width: 15px;
  height: 17px;
  z-index: 12;
}

.query-repository-tree-table-space-block.query-repository-btn-toggle.is-close {
  background: #f1f1f1;
  border: 1px solid transparent;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.query-repository-tree-table-space-block:before {
  position: absolute;
  content: "";
  width: 1px;
  height: 36px;
  background: #d9d9d9;
  left: 50%;
  top: -27px;
  z-index: -1;
}

.query-repository-tree-table-space-block i {
  display: block;
  width: 3px;
  height: 3px;
  margin-left: 8px;
  margin-top: 7px;
  background: #d9d9d9;
  border-radius: 50%;
}

.query-repository-tree-table-space-block.query-repository-btn-toggle:before {
  display: none;
}

.query-repository-tree-table-space-block.query-repository-last-block:before {
  display: none;
}

.query-repository-tree-table-space-block.query-repository-last-block:after {
  position: absolute;
  content: "";
  width: 20px;
  height: 1px;
  background: #d9d9d9;
  top: 50%;
  margin-top: -1px;
  left: -10px;
}

.query-repository-tree-table-space-block.query-repository-btn-toggle:after {
  display: none;
}

.query-repository-tree-table tr td .query-repository-tree-table-space-block:first-child:after {
  display: none;
}

.query-repository-tree-table-td-content {
  position: relative !important;
  display: inline-block;
  padding: 7px;
  cursor: pointer;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  width: 100px;
  overflow: hidden;
}

.query-repository-hidden {
  display: none !important;
}

.query-repository-show {
  visibility: visible !important;
}

/* query repository tree end*/

/* database explorer table csss */
.tse_div2 textarea {
  border: 1px solid #ccc !important;
  resize: none;
}

/* database_explorer_tab */
.database_explorer_tab {
  margin: 0 !important;
}

/* query status */
.query_status_class {
  height: 100%;
  pointer-events: none;
  border: 1px solid #ccc !important;
  padding: 5px;
  display: block;
}

.query_builder_tools {
  height: 48%;
}

.query_result_container {
  height: 85%;
  padding: 5px;
  border: 1px solid #ccc;
  background-color: white;
  width: 100%;
  overflow: hidden;
}

.query_result_container .query_result_table {
  overflow: auto;
  height: 100%;
  width: 100%;
}

.query_result_container .query_result_table::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

#popups .query_settings .dialog_content table .query_result_container th {
  display: table-cell !important;
  background: #fafafa;
  color: black;
  display: table-cell !important;
  font-size: 12px !important;
  border: 1px solid #f1f1f1;
  padding: 5px !important;
  position: sticky;
  top: 0;
}

.query_settings .query_result_container table td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  padding: 5px 5px !important;
}

.database_explorer_field_button {
  display: inline-flex;
  align-items: center;
  float: right;
  height: 100%;
  gap: 3px
}

.database_explorer_addicon {
  padding: 0px 0px 4px 0px;
  width: 18px;
  height: 20px;
  border: none;
  box-shadow: none;
  background: url(images/icons/plus_ic.svg) no-repeat center center;
  filter: var(--menu-icons-filter);
  cursor: pointer !important;
}

.query-repository-tree-table tr[data-db-explorer-selected="true"] {
  background: linear-gradient(to right, #eef2ff, #f9fafd) !important;
  border-left: 3px solid var(--brand-color);
  box-shadow: inset 0 0 0 1px #eef2ff;
}

.query-repository-tree-table tr[data-db-explorer-selected="true"] td {
  background: transparent;
}

.query-repository-tree-table tr[data-db-explorer-selected="true"] td:first-child {
  border-left: none;
}
/* #popup-Header,#popup-Body,#popup-Footer{
margin-top: 32px;} */
#popups .popup.dist_opt {
  max-width: 850px !important;
  min-width: 850px !important;
  width: 850px !important;
  height: 510px !important;
  max-height: 510px !important;
  min-height: 510px !important;
}

#popups .popup.dist_opt .dialog_content {
  max-height: 410px !important;
}

#popups .popup.dist_opt .do_container {
  width: 100%;
  height: 100%;
}

#dist_div {
  height: 100%;
  width: 100%;
}

.tree_title_container {
  height: 28px;
  width: 100%;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 1px solid #ccc;
  margin: 0px !important;
}

.tree_title_container .tree_title_file_name {
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
  width: 110px;
  margin: 0 !important;
  padding: 5px;
}

.tree_title_container .tree_title {
  height: 100%;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  width: auto;
  flex: 1;
  padding: 5px;
}

.tree_title_container .add_button {
  background: url(images/icons/plus_ic.svg) center center no-repeat !important;
  height: 20px !important;
  width: 30px !important;
  border: 0;
  box-shadow: none !important;
  margin: 0px !important;
  border-left: 1px solid #ccc !important;
  border-radius: 0px !important;
  position: absolute;
  right: 0;
}

.tree_title_container .delete_button {
  background: url(images/icons/del_icon.svg) center center no-repeat !important;
  height: 20px !important;
  width: 30px !important;
  box-shadow: none !important;
  border: 0;
  background-color: transparent !important;
  margin: 0px !important;
  border-left: 1px solid #ccc !important;
  border-radius: 0px !important;
  position: absolute;
  right: 0;
}

.add_reference_fgt_button {
  background: url(images/icons/add_docs.svg) no-repeat center center;
  height: 15px !important;
  width: 30px !important;
  box-shadow: none !important;
  border: 0;
  margin: 0px !important;
  border-left: 1px solid #ccc !important;
  border-radius: 0px !important;
  position: absolute;
  right: 30px;

}

.tree_title_container .edit_button {
  background: url(images/icons/editdatabase.png) no-repeat center center #eaedf0;
  height: 20px !important;
  width: 30px !important;
  box-shadow: none !important;
  border: 0;
  background-color: transparent !important;
  margin: 0px !important;
  border-left: 1px solid #ccc !important;
  border-radius: 0px !important;
  position: absolute;
  right: 30px;
}

#layer_dist_div {
  background-color: white;
  height: 290px
}

#popups .dist_opt .dialog_content table #popup-tr-undefined th {
  display: table-cell !important;
  font-weight: 500 !important;
}

/* #button_DO,#button_FGT,#button_CS,#button_RSDPFL,#button_RSDPL1,
#button_RSDP,#button_CSRSP,#button_CSP,#button_CSRSH,#button_CSRSD,#button_Reserved,
#button_FL,#button_L1

{

  display: none;

} */

.delcolumn {



  background: url(images/dustbin.png) center center no-repeat;
  height: 12px;
  width: 10px;
  border: 0;
  box-shadow: none !important;
  background-color: transparent;



}



.delcolumn:hover {

  background: url(images/dustbin_hi.png) center center no-repeat;
  height: 12px;
  width: 10px;
  border: 0;
  box-shadow: none !important;
  background-color: transparent;

}

.addcolumn {
  background: url('images/icons/add_icons_doc_level_settings.png') center center no-repeat;
  height: 16px;
  width: 16px;
  border: 0;
  box-shadow: none !important;
  background-color: transparent;
  vertical-align: middle;
}



.addcolumn:hover {

  background: url('images/icons/add_icons_doc_level_settings.png') center center no-repeat;
  height: 16px;
  width: 16px;
  border: 0;
  box-shadow: none !important;
  background-color: transparent;

}


.distributed-context-menu.is-active {
  visibility: visible;
  pointer-events: auto;
}

.distributed-context-left {
  width: 35%;

}

.layer_distributed-context-left {

  float: left;
  width: 35%;

}

.distributed-context-right {

  width: 65%;

}

.layer_distributed-context-right {

  float: left;
  width: 65%;

}

.distributed-context-menu {
  position: absolute;
  visibility: hidden;
  text-align: center;
  background: lightgray;
  pointer-events: none;
  z-index: 99;
  /* border: 1px solid black;*/
}

.distributed-context-menu ul {
  padding: 0px;
  margin: 0px;
  min-width: 90px;
  list-style: none;
}

/*.distributed-context-menu ul li {
 padding-bottom: 7px;
  padding-top: 7px;
  border: 1px solid black;
}*/

.distributed-context-menu ul li a {
  text-decoration: none !important;
  color: black !important;
}

.distributed-context-menu ul li:hover {
  background: darkgray;
}

#div_summary_DO {
  display: block;
}

#div_summary_FL,
#div_summary_FGT,
#div_summary_FL_Actual,
#div_summary_FL_Virtual,
#div_summary_CI,
#div_summary_CILevel1 {
  display: none;
}

#div_summary_LFGT {
  display: block;
}

#div_summary_LFL,
#div_summary_LL1 {
  display: none;
}

.inputpath {
  background: transparent !important;
  border: 0 !important;
}

.inputField {
  height: 25px;
  background: transparent !important;
  border: 0 !important;
}

.distributed_mrg0A {
  margin: 0px;
}

.layer_distributed_mrg0A {
  margin: 0px;
}

#summary_CILevel1 li,
#summary_CILevel1 li a,
#summary_CILevel1 li a span {
  margin-left: 0px !important;
}

#summary_CILevel1 ul.menu_dropdown {
  left: 15px !important;
  top: 16.953125px !important;
}

.distributed_hdbg {
  background: #003366;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  padding: 10px 20px;
}

.distributed_br {
  display: flex;
  flex-direction: row;
  gap: 5px;
}

.layer_distributed_br {
  border: 1px solid #ccc;
  background: #f9f9f9;
  padding: 10px;
}

.distributed_whitebg {
  background: #fff;
  border: 1px solid #ccc;
  color: #000;
  height: 100%;
  overflow: auto;
  width: 100%;
}

.distributed_whitebg::-webkit-scrollbar {
  width: 5px;
}

.distributed_whitebg select {
  background: white !important;
  width: 100% !important;
  border: 1px solid #ccc !important;
  color: black !important;
  height: 100% !important;
}

.distributed_whitebg input[type='text'] {
  background: white !important;
  width: 100% !important;
  border: 1px solid #ccc !important;
  color: black !important;
  height: 100% !important;
}

.distributed_whitebg input[type='button'] {
  width: 20%;
  background: url(images/icons/configuration_ic.png) no-repeat center center;
  width: 25px;
  height: 25px;
}

.layer_distributed_whitebg {
  background: #fff;
  border: 1px solid #ccc;
  color: #000;
  margin: 5px;
  height: 250px;
  overflow: auto;
  width: 98%;
}

.distributed_table1 {
  border: 1px solid #ccc !important;
  font-size: 14px !important;
}

.distributed_table1 th {
  border: 1px solid #ccc !important;
  background: #f0f0f0 !important;
  font-weight: bold !important;
  font-size: 12px !important;
  padding: 5px 5px !important;
  color: #000 !important;
}

.distributed_table1 td {
  border: 1px solid #ccc !important;
  padding: 5px 5px !important;
  height: 32px !important;
  font-size: 12px !important;
  color: #000 !important;
}

.distributed_table1 th {
  height: auto !important;
}

.distributed_table1 td.dotsbg {
  /*	background: url(dots.png) no-repeat center left;*/
  padding-left: 35px;
}

/* simple tree */
.distributed-simple-tree {
  user-select: none;
  -moz-user-select: none;
}

.layer-dist-simple-tree {
  user-select: none;
  -moz-user-select: none;
}

.distributed-simple-tree>details>summary {
  display: none;
}

.layer-dist-simple-tree>details>summary {
  display: none;
}

.distributed-simple-tree a {
  outline: none;
  cursor: pointer;
}

.distributed-simple-tree summary {
  outline: none;
  cursor: pointer;
}

.layer-dist-simple-tree a,
.layer-dist-simple-tree summary {
  display: block;
  width: fit-content;
  width: -moz-fit-content;
  border: solid 1px transparent;
  padding: 0 2px;
  outline: none;
  cursor: pointer;
}

.distributed-simple-tree a {
  text-decoration: none;
  color: inherit !important;
}

.layer-dist-simple-tree a {
  text-decoration: none;
  color: inherit !important;
}

.distributed-simple-tree ::-webkit-details-marker {
  display: none;
}

.layer-dist-simple-tree ::-webkit-details-marker {
  display: none;
}

.distributed-simple-tree summary {
  /*list-style-type: none;
    background-color: #eee;
    outline: none;*/
  list-style-type: none;
  background-color: transparent;
  outline: none;
}

.layer-dist-simple-tree summary {
  list-style-type: none;
  background-color: #eee;
  outline: none;
}

.distributed-simple-tree.dark summary {
  background-color: #444;
}

.layer-dist-simple-tree.dark summary {
  background-color: #444;
}

.distributed-simple-tree details>:not(details),
.distributed-simple-tree details {
  position: relative;
  font-size: 12px;
}

.layer-dist-simple-tree details>:not(details),
.layer-dist-simple-tree details {
  position: relative;
  font-size: 12px;
}

.distributed-simple-tree details :not(summary) {
  margin-left: 20px;
}

.layer-dist-simple-tree details :not(summary) {
  margin-left: 20px;
}

.distributed-simple-tree.nodots details :not(summary) {
  margin-left: 12px;
}

.layer-dist-simple-tree.nodots details :not(summary) {
  margin-left: 12px;
}

.distributed-simple-tree details::before,
.distributed-simple-tree details>:not(details)::before {
  content: '';
  width: 10px;
  display: block;
  position: absolute;
}

.layer-dist-simple-tree details::before,
.layer-dist-simple-tree details>:not(details)::before {
  content: '';
  width: 10px;
  display: block;
  position: absolute;
}

.distributed-simple-tree details::before,
.distributed-simple-tree details>:not(details)::before {
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 2 2" xmlns="http://www.w3.org/2000/svg"><g><rect x="0" y="0" width="1" height="1"/></g></svg>') left top / 2px 2px;
}

.layer-dist-simple-tree details::before,
.layer-dist-simple-tree details>:not(details)::before {
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 2 2" xmlns="http://www.w3.org/2000/svg"><g><rect x="0" y="0" width="1" height="1"/></g></svg>') left top / 2px 2px;
}

.distributed-simple-tree.dark details::before,
.distributed-simple-tree.dark details>:not(summary)::before {
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 2 2" xmlns="http://www.w3.org/2000/svg"><g><rect x="0" y="0" width="1" height="1" fill="white"/></g></svg>');
}

.layer-dist-simple-tree.dark details::before,
.layer-dist-simple-tree.dark details>:not(summary)::before {
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 2 2" xmlns="http://www.w3.org/2000/svg"><g><rect x="0" y="0" width="1" height="1" fill="white"/></g></svg>');
}

.distributed-simple-tree.nodots details::before,
.distributed-simple-tree.nodots details>:not(summary)::before {
  background-image: none;
}

.layer-dist-simple-tree.nodots details::before,
.layer-dist-simple-tree.nodots details>:not(summary)::before {
  background-image: none;
}

.distributed-simple-tree details::before {
  top: 0;
  height: 100%;
  background-repeat: repeat-y;
  left: 5px;
  z-index: -1;
}

.layer-dist-simple-tree details::before {
  top: 0;
  height: 100%;
  background-repeat: repeat-y;
  left: 5px;
  z-index: -1;
}

/* #popups .popup table  tbody{
  background-color: white;
} */
.distributed-simple-tree details>:not(details)::before {
  top: 8px;
  height: calc(100% - 8px);
  background-repeat: repeat-x;
  left: -15px;
}

.layer-dist-simple-tree details>:not(details)::before {
  top: 8px;
  height: calc(100% - 8px);
  background-repeat: repeat-x;
  left: -15px;
}

/* .distributed-simple-tree details>a:active {
    background-color: #beebff;
    border-color: #99defd;
    z-index: 1;
    } */
.distributed-simple-tree details>a {
  background: rgb(247, 244, 244);
  /* padding: 3px 4px;
     font-weight: bold;*/
}

.layer-dist-simple-tree details>a {
  background: rgb(247, 244, 244);
  /* padding: 3px 4px;
     font-weight: bold;*/
}

.distributed-simple-tree details>a::before {
  display: none;
}

.layer-dist-simple-tree details>a::before {
  display: none;
}

.distributed-simple-tree details>summary::before {
  /* background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><g><rect x="0" y="0" width="12" height="12" fill="white" stroke="gray" stroke-width="1"/><line x1="3" y1="6" x2="9" y2="6" stroke="black" stroke-width="2"/><line x1="6" y1="3" x2="6" y2="9" stroke="black" stroke-width="2"/></g></svg>') center center / 12px 12px no-repeat;
    */
  background: url('images/icons/collapse.png') no-repeat center;
  left: -22px;
  top: 2px;
  width: 16px;
  height: 28px;
}

.layer-dist-simple-tree details>summary::before {
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><g><rect x="0" y="0" width="12" height="12" fill="white" stroke="gray" stroke-width="1"/><line x1="3" y1="6" x2="9" y2="6" stroke="black" stroke-width="2"/><line x1="6" y1="3" x2="6" y2="9" stroke="black" stroke-width="2"/></g></svg>') center center / 12px 12px no-repeat;
  left: -22px;
  top: 2px;
  width: 16px;
  height: 16px;
}

.distributed-simple-tree details[open]>summary::before {
  /* background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><title/><g><rect x="0" y="0" width="12" height="12" fill="white" stroke="gray" stroke-width="1"/><line x1="3" y1="6" x2="9" y2="6" stroke="black" stroke-width="2"/></g></svg>');
    */
  background: url('images/icons/expand.png') no-repeat center;
}

.layer-dist-simple-tree details[open]>summary::before {
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><title/><g><rect x="0" y="0" width="12" height="12" fill="white" stroke="gray" stroke-width="1"/><line x1="3" y1="6" x2="9" y2="6" stroke="black" stroke-width="2"/></g></svg>');
}

/* async tree */
.dist-async-tree details[open][data-loaded=false] {
  pointer-events: none;
}

.layer-dist-async-tree details[open][data-loaded=false] {
  pointer-events: none;
}

.dist-async-tree details[open][data-loaded=false]>summary::before {
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g><animateTransform attributeName="transform" type="rotate" from="0 32 32" to="360 32 32" dur="1s" repeatCount="indefinite"/><circle cx="32" cy="32" r="32" fill="whitesmoke"/><path d="M 62 32 A 30 30 0 0 0 32 2" style="stroke: black; stroke-width:6; fill:none;"/></g></svg>');
}

.layer-dist-async-tree details[open][data-loaded=false]>summary::before {
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g><animateTransform attributeName="transform" type="rotate" from="0 32 32" to="360 32 32" dur="1s" repeatCount="indefinite"/><circle cx="32" cy="32" r="32" fill="whitesmoke"/><path d="M 62 32 A 30 30 0 0 0 32 2" style="stroke: black; stroke-width:6; fill:none;"/></g></svg>');
}

.dist-async-tree.black details[open][data-loaded=false]>summary::before {
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g><animateTransform attributeName="transform" type="rotate" from="0 32 32" to="360 32 32" dur="1s" repeatCount="indefinite"/><circle cx="32" cy="32" r="32" fill="whitesmoke"/><path d="M 62 32 A 30 30 0 0 0 32 2" style="stroke: white; stroke-width:6; fill:none;"/></g></svg>');
}

.layer-dist-async-tree.black details[open][data-loaded=false]>summary::before {
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g><animateTransform attributeName="transform" type="rotate" from="0 32 32" to="360 32 32" dur="1s" repeatCount="indefinite"/><circle cx="32" cy="32" r="32" fill="whitesmoke"/><path d="M 62 32 A 30 30 0 0 0 32 2" style="stroke: white; stroke-width:6; fill:none;"/></g></svg>');
}

/* select tree */
.dist-select-tree .selected {
  background-color: var(--active-tag-color);
  z-index: 1;
  color: #000;
}

.layer-dist-select-tree .selected {
  background-color: #beebff;
  border-color: #99defd;
  z-index: 1;
  color: #000;
}

.dist-select-tree.dark .selected {
  background-color: #3a484e;
  border-color: #99defd;
  color: #000;
}

.layer-dist-select-tree.dark .selected {
  background-color: #3a484e;
  border-color: #99defd;
  color: #000;
}

/* .distributed-dropdown{
    width: 100%;
    background-color: white;
    color: black;
  } */
.distributed_caption {
  border: 1px solid #ccc;
  /* background: #f0f0f0; */
  font-weight: bold;
  padding: 6px 12px !important;
  color: #000;
}


.distributed_table1 {
  border: 1px solid #ccc;
  font-size: 14px;
}

.layer_distributed_table1 th {
  border: 1px solid #ccc;
  background: #f0f0f0;
  font-weight: bold;
  font-size: 12px !important;
  padding: 5px 5px !important;
  color: #000;
}

.layer_distributed_table1 td {
  border: 1px solid #ccc;
  padding: 5px 5px !important;
  font-size: 12px !important;
  height: 32px !important;
  color: #000;
}

.layer_distributed_table1 th {
  height: auto !important;
}

.layer_distributed_table1 td.dotsbg {
  /*	background: url(dots.png) no-repeat center left;*/
  padding-left: 35px;
}

#pre_add_con,
#post_add_con {
  color: black !important;
  margin: 0 !important;
}


/* dfa tree css */
#dfa_right_menu {
  border: 1px solid lightgray !important;
}

#mytable {
  margin: 0;
  border: 1px solid #ccc;
  overflow-y: auto !important;
  background-color: white !important;
  height: 378px !important;
}

#mytable::-webkit-scrollbar {
  width: 5px !important;
}

.tree-table-wrap {
  width: 100%;
}

.tree-table {
  border: 1px solid #f1f1f1 !important;
  table-layout: fixed !important;
  width: 100% !important;
  border-collapse: collapse !important;
  background-color: white !important;
}

.tree-table th {
  position: sticky;
  top: 0;
  color: #333;
  text-align: center;
  padding: 10px 0;
  background: #fafafa;
  font-size: 13px;
  border: 1px solid #f1f1f1;
  z-index: 100;
}

.tree-table td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}

.tree-table tr td:first-child {
  overflow: initial !important;
}

.add_button {

  width: 18px;
  height: 20px;
  border: none;
  box-shadow: none;
  background: url(images/icons/plus_ic.svg) no-repeat center center;
  filter: var(--menu-icons-filter);
  cursor: pointer !important;
  line-height: normal;

}

.delete_button {
  width: 18px;
  height: 20px;
  border: none;
  box-shadow: none;
  background: url(images/icons/del_icon.svg) no-repeat center center;
  filter: var(--menu-icons-filter);
  cursor: pointer !important;
  line-height: normal;
}

.tree-table-space-block {
  border: 1px solid transparent;
  display: inline-block;
  width: 20px !important;
  height: 20px !important;
  line-height: 16px;
  text-align: center;
  vertical-align: top;
  font-size: 19px !important;
  position: relative !important;
  box-sizing: border-box;
  margin-top: 7px;
  border-radius: 50%;
}

.tree-table tr td .tree-table-space-block:first-child {
  margin-left: 7px;
}

.tree-table-space-block.btn-toggle {
  /* border: 1px solid #d9d9d9; */
  position: relative;
  cursor: pointer;
  width: 15px;
  height: 17px;
  z-index: 12;
}

.tree-table-space-block.btn-toggle.is-close {
  background: #f1f1f1;
  border: 1px solid transparent;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.tree-table-space-block:before {
  position: absolute;
  content: "";
  width: 1px;
  height: 36px;
  background: #d9d9d9;
  left: 50%;
  top: -27px;
  z-index: -1;
}

.tree-table-space-block i {
  display: block;
  width: 3px;
  height: 3px;
  margin-left: 8px;
  margin-top: 7px;
  background: #d9d9d9;
  border-radius: 50%;
}

.tree-table-space-block.btn-toggle:before {
  display: none;
}

.tree-table-space-block.last-block:before {
  display: none;
}

.tree-table-space-block.last-block:after {
  position: absolute;
  content: "";
  width: 20px;
  height: 1px;
  background: #d9d9d9;
  top: 50%;
  margin-top: -1px;
  left: -10px;
}

.tree-table-space-block.btn-toggle:after {
  display: none;
}

.tree-table tr td .tree-table-space-block:first-child:after {
  display: none;
}

.tree-table-td-content {
  position: relative !important;
  display: inline-block;
  padding: 7px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
  width: 100px;
}

.hidden {
  display: none !important;
}

.show {
  visibility: visible !important;
}

/* DSC(define selected condition) css &&composition settings&&textmap*/
.dsc-tree-table-wrap,
.comp-tree-table-wrap,
.text-map-tree-table-wrap {
  width: 100%;
}

.dsc-tree-table,
.comp-tree-table,
.text-map-tree-table {
  border: 1px solid #f1f1f1 !important;
  table-layout: fixed !important;
  width: 100% !important;
  border-collapse: collapse !important;
  background-color: white !important;
}

.dsc-tree-table th,
.comp-tree-table th,
.text-map-tree-table th {
  position: sticky;
  top: 0;
  color: #333;
  text-align: center;
  padding: 10px 0;
  background: #fafafa;
  font-size: 13px;
  border: 1px solid #f1f1f1;
  z-index: 100;
}

.dsc-tree-table td,
.comp-tree-table td,
.text-map-tree-table td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}

.dsc-tree-table tr td:first-child,
.comp-tree-table tr td:first-child,
.text-map-tree-table tr td:first-child {
  overflow: initial !important;
}

.dsc-tree-table-space-block,
.comp-tree-table-space-block,
.text-map-tree-table-space-block {
  border: 1px solid transparent;
  display: inline-block;
  width: 20px !important;
  height: 20px !important;
  line-height: 16px;
  text-align: center;
  vertical-align: top;
  font-size: 19px !important;
  position: relative !important;
  box-sizing: border-box;
  margin-top: 7px;
  border-radius: 50%;
}

.dsc-tree-table tr td .dsc-tree-table-space-block:first-child,
.comp-tree-table tr td .comp-tree-table-space-block:first-child,
.text-map-tree-table tr td .text-map-tree-table-space-block:first-child {
  margin-left: 7px;
}

.dsc-tree-table-space-block.dsc-btn-toggle,
.comp-tree-table-space-block.comp-btn-toggle,
.text-map-tree-table-space-block.text-map-btn-toggle {
  /* border: 1px solid #d9d9d9; */
  position: relative;
  cursor: pointer;
  width: 15px;
  height: 17px;
  z-index: 12;
}

.dsc-tree-table-space-block.dsc-btn-toggle.is-close,
.comp-tree-table-space-block.comp-btn-toggle.is-close,
.text-map-tree-table-space-block.text-map-btn-toggle.is-close {
  background: #f1f1f1;
  border: 1px solid transparent;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.dsc-tree-table-space-block:before,
.comp-tree-table-space-block:before,
.text-map-tree-table-space-block:before {
  position: absolute;
  content: "";
  width: 1px;
  height: 36px;
  background: #d9d9d9;
  left: 50%;
  top: -27px;
  z-index: -1;
}

.dsc-tree-table-space-block i,
.comp-tree-table-space-block i,
.text-map-tree-table-space-block i {
  display: block;
  width: 3px;
  height: 3px;
  margin-left: 8px;
  margin-top: 7px;
  background: #d9d9d9;
  border-radius: 50%;
}

.dsc-tree-table-space-block.dsc-btn-toggle:before,
.comp-tree-table-space-block.comp-btn-toggle:before,
.text-map-tree-table-space-block.text-map-btn-toggle:before {
  display: none;
}

.dsc-tree-table-space-block.dsc-last-block:before,
.comp-tree-table-space-block.comp-last-block:before,
.text-map-tree-table-space-block.text-map-last-block:before {
  display: none;
}

.dsc-tree-table-space-block.dsc-last-block:after,
.comp-tree-table-space-block.comp-last-block:after,
.text-map-tree-table-space-block.text-map-last-block:after {
  position: absolute;
  content: "";
  width: 20px;
  height: 1px;
  background: #d9d9d9;
  top: 50%;
  margin-top: -1px;
  left: -10px;
}

.dsc-tree-table-space-block.dsc-btn-toggle:after,
.comp-tree-table-space-block.comp-btn-toggle:after,
.text-map-tree-table-space-block.text-map-btn-toggle:after {
  display: none;
}

.dsc-tree-table tr td .dsc-tree-table-space-block:first-child:after,
.comp-tree-table tr td .comp-tree-table-space-block:first-child:after,
.text-map-tree-table tr td .text-map-tree-table-space-block:first-child:after {
  display: none;
}

.dsc-tree-table-td-content,
.comp-tree-table-td-content,
.text-map-tree-table-td-content {
  position: relative !important;
  display: inline-block;
  padding: 7px;
  cursor: pointer;
}

.dsc-hidden,
.comp-hidden,
.text-map-hidden {
  display: none !important;
}

.dsc-show,
.comp-show,
.text-map-show {
  visibility: visible !important;
}

/* end of tree table css */
.dfa_addc {
  background-color: var(--block-background-color) !important;
  width: 400px !important;
  height: 172px !important;
}

.dfa_addc table {
  background-color: white !important;
}

.dfa_addc table th {
  color: black !important;
  border: 1px solid #f1f1f1 !important;
  width: 100px !important;
  font-weight: normal !important;
}

.dfa_addc table td {
  border: 1px solid #f1f1f1 !important;
  font-weight: normal !important;
  position: relative !important;
}

.dfa_addc table td select {
  width: 225px !important;
  float: left;
}

/* ieccm css */
.ieccm {
  max-width: 776px !important;
  min-width: 776px !important;
  width: 776px !important;
  height: 510px !important;
  max-height: 510px !important;
  min-height: 510px !important;
}

.ieccm .dialog_content {
  max-height: 275px !important;
}

.ieccm .dialog_content table #popup-tr-undefined th {
  display: table-cell !important;
}

.ieccm_container {
  display: flex;
  height: 395px;
  background-color: #fafafa;
  flex-direction: row;
  padding: 10px;
  gap: 10px;
  width: 752px;
}

.ieccm_left_side,
.ieccm_right_side {
  border: 1px solid #f1f1f1;
  height: 100%;
  background-color: white;
  overflow: auto;
}

.ieccm_left_side {
  width: 30%;
}

.ieccm_right_side {
  width: 70%;
}

.ieccm_right_side::-webkit-scrollbar {
  width: 5px;
}

.ieccm_left_side ::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.ieccm_right_side::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.ieccm_left_side ul,
#myUL {
  list-style-type: none !important;
}

.ieccm_left_side #myUL {
  margin: 0 !important;
  padding: 0 !important;
}

.ieccm_left_side .caret {
  font-size: 12px;
  color: black;
  cursor: pointer;
  -webkit-user-select: none;
  /* Safari 3.1+ */
  -moz-user-select: none;
  /* Firefox 2+ */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
  border-bottom: none !important;
}

.ieccm_left_side .caret::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

.ieccm_left_side .caret-down::before {
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.selected {
  background-color: var(--brand-color);
  border-color: var(--brand-color);
  z-index: 1;
  color: #ffff !important;
}

.ieccm_left_side .nested {
  display: none;
}

.ieccm_left_side .active {
  display: block;
  background-color: white;
  font-size: 12px;
  color: black;
  padding-inline-start: 20px
}

.groups_pages_container {
  border: 1px solid #f1f1f1;
  background-color: white;
  overflow: auto;
}

.groups_pages_container ul,
#myUL {
  list-style-type: none !important;
}

.groups_pages_container #myUL {
  margin: 0 !important;
  padding: 0 !important;
}

.groups_pages_container .caret {
  font-size: 12px;
  color: black;
  cursor: pointer;
  -webkit-user-select: none;
  /* Safari 3.1+ */
  -moz-user-select: none;
  /* Firefox 2+ */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
  border-bottom: none !important;
}

.groups_pages_container .caret::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

.groups_pages_container .caret-down::before {
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.groups_pages_container .nested {
  display: none;
}

.groups_pages_container .active {
  display: block;
  background-color: white;
  font-size: 12px;
  color: black;
  padding-inline-start: 20px
}



#myUL ul li {
  padding: 2px !important;
  cursor: pointer;
}

#myUL {
  padding-left: 24px !important;
}

#myUL ul.nested {
  list-style-type: none;
  margin-left: 0px !important;
  margin-top: 0px !important;
}

.ieccm_right_side table {
  border: 1px solid #f1f1f1 !important;
  /* table-layout: fixed !important; */
  width: 100% !important;
  border-collapse: collapse !important;
  background-color: white !important;
}

.ieccm_right_side table th {
  position: sticky;
  top: 0;
  color: #333;
  text-align: center !important;
  padding: 10px 0 !important;
  background: #fafafa;
  font-size: 12px !important;
  border: 1px solid #f1f1f1;
  z-index: 100;
  width: 100% !important;
}

.ieccm_right_side table td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  padding: 5px !important;
  text-align: center !important;
}

.ieccm_right_side table td input {
  width: 250px !important;
  height: 30px;
}

#popups>.dfa_act>.buttons>button:disabled {
  visibility: visible !important;
  background-color: rgba(239, 239, 239, 0.3) !important;
  color: rgba(16, 16, 16, 0.3) !important;
  border-color: rgba(118, 118, 118, 0.3) !important;
}

#popups .dfa_act .dialog_content {
  overflow-y: auto;
  max-height: 410px !important;
  padding: 1rem;
  min-height: 275px !important;
}

#popups .dfa_act .dialog_content table #popup-tr-undefined th {
  display: table-cell !important;
  font-size: 12px !important;
  padding: 5px !important;
  font-weight: 500;

}

.define_actions_buttons {
  display: inline-flex;
  align-items: center;
  width: 100%;
  padding-left: 5px;
  gap: 3px
}

#popups .ieccm .dialog_content {
  overflow-y: auto;
  max-height: 410px !important;
  padding: 1rem;
  min-height: 275px !important;
}


#template_info {
  position: relative;
}

#add_temp {
  color: 000 !important;
}

#defined-head {
  position: relative;
}

#templateNamesDiv .templates {
  padding: 4px 4px 4px 16px;
  border-bottom: 1px solid #ccc;
  font-size: 14px;
}

.field_settings_head {
  clear: both;
  width: 100%;
  background-color: #e0e0e0;
}

.bdr-top {
  border-top: 1px solid #ccc;
}

#open_defined ul {
  left: 25px !important;
  top: 25px !important;
}

#open_custom ul {
  left: 25px !important;
  top: 25px !important;
}

.comp-data-wide {
  max-width: 776px !important;
  height: 510px !important;
  max-height: 510px !important;
}

.comp-data-wide .dialog_content {
  max-height: 410px !important;
}

#open_reserved ul {
  left: 25px !important;
  top: 25px !important;
}

.template_infor {
  left: 25px !important;
  top: 25px !important;
}

#template_info ul {
  left: 25px !important;
  top: 25px !important;
}

#open_composition ul {
  left: 25px !important;
  top: 25px !important;
}

#map_field_groups {
  position: relative;
}

#map_field_groups ul {
  left: 25px !important;
  top: 25px !important;
}

#map_field_groups ul li a {
  color: #000 !important;
}

#open_defined ul li a {
  color: #000 !important;
}

#open_custom ul li a {
  color: #000 !important;
}

#open_composition ul li a {
  color: #000 !important;
}

#open_reserved ul li a {
  color: #000 !important;
}

.field_tabcontent p {
  margin: 0px;
  padding: 4px;
}

.composite_settings_sec {
  clear: both;
  width: 100%;
  background-color: #e0e0e0;
}

.composite_settings_sec p {
  margin: 0px;
  padding: 4px;
}

.comp-data-text {
  padding-left: 15px !important
}

.compmap-data-text {
  padding-left: 25px !important
}

.w50 {
  width: 50%;
  float: left;
}

.w65 {
  width: 65%;
  float: left;
}

.w35 {
  width: 35%;
  float: left;
}

.w100 {
  width: 100%;
  clear: both
}

.bdr-left {
  border-left: 1px solid #ccc;
}

#open_custom {
  position: relative;
}

#open_composition {
  position: relative;
}

.bdr-right {
  border-right: 1px solid #ccc;
}

.bdr-btm {
  border-bottom: 1px solid #ccc;
}

.d-inlineblock {
  display: inline-block;
}

#reserved-head {
  position: relative;
}

.defined-table-data th,
.custom-table-data th,
.reserved-table-data th {
  color: black;
  font-size: 14px !important;
  font-weight: 600;
  padding: 3px !important;
  text-align: center !important;
}

.defined-table-data td,
.custom-table-data td,
.reserved-table-data td {
  color: black;
  font-size: 14px !important;
  font-weight: 300;
  padding: 3px !important;
}

.defined-head,
.custom-head,
.reserved-head {
  padding-left: 15px;
}

#defined-head,
#reserved-head,
#custom-head {
  padding-left: 0px !important;
}

.field_settings-table {
  margin-top: 10px;
}

#field_settings p,
#composite_settings p {
  font-size: 14px;
}

.field_tabsec,
.composite_tab {
  border: 1px solid #ccc;
}

.dnone {
  display: none;
}

/* Style the tab */
.field_tab {
  position: sticky;
  top: 0;
  z-index: 200;
  overflow: hidden;
  background-color: #e4e4e4;
}

.field_tab p {
  color: black;
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 4px 16px;
  transition: 0.3s;
  font-size: 13px;
  margin: 0px
}

.field_tab p:hover {
  background-color: #ddd;
}

.field_tab p.active {
  background-color: rgb(255, 255, 255);
}

.field_tabcontent {
  margin: 15px 5px 15px 5px;
  display: none;
  border-top: none;
}

/* Style the mapp tab */
.map_tabs {
  overflow: hidden;
  background-color: #e4e4e4;
}

.map_tabs p {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 4px 16px;
  transition: 0.3s;
  font-size: 14px;
  margin: 0px
}

.map_tabs p:hover {
  background-color: #ddd;
}

.map_tabs p.active {
  background-color: rgb(255, 255, 255);
}

.field_tabcontent {
  margin: 15px 5px 15px 5px;
  display: none;
  border-top: none;
}

.outputtab .outputcheck {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

/* Accordion styles */
.outputsettings .outputtabs {
  overflow: hidden;
}

.outputtabs .outputtab {
  width: 100%;
  color: white;
  overflow: hidden;
}

.outputtab .outputtab-label {
  display: flex;
  justify-content: space-between;
  padding: 1em;
  background: #888888;
  cursor: pointer;
  font-size: 13px;
  margin: 0;
  /* Icon */
}

.outputtab .outputtab-label:hover {
  background: #686868;
}

.outputtab .outputtab-label::after {
  content: "❯";
  width: 1em;
  height: 1em;
  text-align: center;
  transition: all 0.35s;
}

.outputtab .outputtab-content {
  max-height: 0;
  padding: 0 1em;
  color: #2c3e50;
  background: white;
  transition: all 0.35s;
}

.outputtab-content .outputtab-content-field {
  display: flex;
  gap: 7px;
  flex-direction: row;
  align-items: center;
  padding: 3px;
  color: black;
  font-size: 12px;
}

.outputtab-content .outputtab-content-field label {
  width: 105px !important;
  margin: 0 !important;
}

.outputtab-content .outputtab-content-field input {
  margin: 0;
  flex: 1;
  height: 25px;
}

.outputtab-content .outputtab-content-field select {
  margin: 0;
  flex: 1;
  height: 25px;
}

.outputtab .outputtab-close {
  display: flex;
  justify-content: flex-end;
  padding: 1em;
  font-size: 0.75em;
  background: #2c3e50;
  cursor: pointer;
}

.outputtab .outputtab-close:hover {
  background: #1a252f;
}

.outputtab .outputcheck:checked+.outputtab .outputtab-label {
  background: white;
}

.outputtab .outputcheck:checked+.outputtab .outputtab-label::after {
  transform: rotate(90deg);
}

.outputtab .outputcheck:checked~.outputtab-content {
  max-height: 100vh;
  padding: 1em;
  height: 260px;
  overflow: auto;
}

.outputtab .outputcheck:checked~.outputtab-content::-webkit-scrollbar {
  width: 5px;
}

.cuscss {
  background: white !important;
  border: 1px solid #ccc !important;
  color: black !important;
  width: 100% !important;
  margin-top: 5px;
}

.customIndexmodal {
  max-width: 776px !important;
  height: 510px !important;
  max-height: 510px !important;
}

.customIndexmodal .dialog_content {
  max-height: 410px !important;
}

/* custom index styles */
.custom_index_container {
  height: 388px;
  width: 751px;
  display: flex;
  flex-direction: row;
  padding: 8px;
  justify-content: space-between;
}

.custom_index_div1 {
  border: 1px solid #ccc;
  width: 220px;
  background-color: white;
}

.custom_index_div2 {
  flex: 0.99;
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.custom_index_div3 {
  border: 1px solid #ccc;
  height: 235px;
  background-color: white;
  overflow: auto;
}

.custom_index_div3::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.custom_index_div3 .tree-table th {
  top: 22px !important;
}

.custom_index_div4 {
  overflow: auto;
  flex: 0.98;
  border: 1px solid #ccc;
  background-color: white;
}

.custom_index_div4 table td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #333;
  white-space: nowrap;
  overflow: hidden !important;

}

.custom_index_div4 table td input,
.custom_index_div4 table td select {
  background: white !important;
  width: 100%;
  color: black !important;
  border: 1px solid #ccc;
}

.custom_index_div4 table td input[type='image'] {
  border: none !important;
}

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

.custom_index_remove_field_button input {
  width: fit-content !important;
}

.custom_index_div4 table th {
  position: sticky;
}

.customindx_temp_title {
  display: inline-block;
  color: black;
  width: 100%;
  font-size: 13px;
  font-weight: 500;
  background-color: #fafafa;
  padding: 5px;
  border: 1px solid #f1f1f1;
}

.custom_index_button {
  flex: 1;
  display: inline-flex;
  width: 16px;
  position: relative;
  height: 16px;
  align-items: center;
  justify-content: end;
  vertical-align: middle;
}

#custom_index_ul {
  list-style-type: none !important;
}

#text_map_index_ul {
  list-style-type: none !important;
}

.custom_caret {
  background: url(images/icons/collapse.png) no-repeat center;
  width: 16px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  margin: 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  float: left !important;
}

.custom_index_info {
  height: 28px;
  width: 202px;
  display: flex;
  align-items: center;
  padding: 5px;
}

.text_map_caret {
  display: inline-block;
  padding: 5px;
  color: black;
  font-size: 12px;
  cursor: pointer !important;
  -webkit-user-select: none;
  /* Safari 3.1+ */
  -moz-user-select: none;
  /* Firefox 2+ */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none !important;
}

.text_map_caret::before {
  content: "\25B6" !important;
  color: black !important;
  display: inline-block !important;
  margin-right: 6px !important;
}

.custom_caret::before {
  background: url(images/icons/collapse.png) no-repeat center;
  width: 16px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  margin: 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  float: left !important;
}

.custom_caret-down {
  background: url(images/icons/expand.png) no-repeat center;
  width: 16px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  margin: 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  float: left !important;
}

.text_map_caret-down::before {
  -ms-transform: rotate(90deg);
  /* IE 9 */
  -webkit-transform: rotate(90deg);
  /* Safari */
  transform: rotate(90deg);
}

.custom_nested {
  display: none;
}

.text_map_nested {
  display: none;
}

.custom_active {
  display: block;
}

.text_map_active {
  display: block;
}

.custom_active li {
  cursor: pointer;
  font-size: 12px;
  color: black;
  padding: 7px 25px 5px;
  border: 1px solid #f1f1f1;
}

.custom_temp_list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.custom_temp_list span {
  flex: 1;
}

.custom_temp_list .custom_index_delete {
  flex: 0.19;
  height: 16px;
  position: absolute;
  right: 6px;
}

.custom_temp_list .custom_index_delete input {
  /* height: 16px; */
}

.custom_index_group_button {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 5px;
}

.custom_index_field_button {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 5px;
}

.custom_index_field_button input {
  /* vertical-align: middle;
  height: 25px;
  padding-top: 7px;
  padding-right: 2px; */
}

.custom_index_field_button input[type='checkbox'] {
  zoom: 0 !important;
}

.custom_index_field_button input[type='button'] {
  height: 16px;
  width: 16px;
  font-size: 11px;
  padding: 0;
  border-radius: 8px;
  border: 0;
  vertical-align: middle;
  text-align: center;
  margin: 0;
  box-shadow: none;
  margin-top: 8px;
  margin-right: 2px;
  background-color: white;
}

.custom_index_field_button input[type='button']:hover {
  background-color: white;
}

.custom_index_group_button input {
  /* vertical-align: middle;
  padding-top: 7px;
  height: 25px;
  padding-right: 2px; */
}

.action_icon_cls {
  font-size: 15px;
  cursor: pointer;
}

.custom_index_group_button input[type="button"] {
  height: 16px;
  width: 16px;
  font-size: 11px;
  padding: 0;
  border-radius: 8px;
  border: 0;
  vertical-align: middle;
  text-align: center;
  margin: 0;
  box-shadow: none;
  margin-top: 8px;
  margin-right: 2px;
  background-color: white;
}

.custom_index_group_button input[type='button']:hover {
  background-color: white;
}

.custom_index_comp_button {
  display: inline-block;
  float: right;
}

.custom_index_comp_button input {
  border: 1px solid #ccc !important;
  height: 25px !important;
  width: 32px !important;
  border-radius: 5px !important;
  font-size: 20px !important;
  text-align: center !important;
  background-color: white !important;
  cursor: pointer !important;
  color: black;
}

#popups>.custom_index_create_temp>.buttons>button:disabled {
  visibility: visible !important;
  background-color: rgba(239, 239, 239, 0.3) !important;
  color: rgba(16, 16, 16, 0.3) !important;
  border-color: rgba(118, 118, 118, 0.3) !important;
}

#popups .custom_index_create_temp {
  max-height: 155px !important;
  max-width: 300px !important;
}

#popups .custom_index_create_temp input[type="text"] {
  background: white !important;
  width: 100%;
  border: 1px solid #ccc;
  color: black;
}

#popups .custom_index_create_temp .dialog_content {
  min-height: 60px !important;
}

#popups .custom_index_create_temp .dialog_content table {
  background-color: white !important;
}

#popups .custom_index_create_temp .dialog_content table input {
  height: 25px !important;
}

#popups .custom_index_create_temp .dialog_content table th {
  display: table-cell !important;
  color: black;
  font-weight: normal;
  text-align: center;
  padding: 5px !important;
  background-color: #fafafa;
}

.template_plusIcon,
.compmapInfo-btntemp {
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><g><rect x="0" y="0" width="12" height="12" fill="white" stroke="gray" stroke-width="1"/><line x1="3" y1="6" x2="9" y2="6" stroke="black" stroke-width="2"/><line x1="6" y1="3" x2="6" y2="9" stroke="black" stroke-width="2"/></g></svg>') center center / 12px 12px no-repeat;
  width: 16px;
  height: 16px;
  margin: 0px;
  float: right;
  cursor: pointer;
}

.customIndexmodal #dist_div {
  height: calc(75vh - 115px) !important;
}

.customIndexmodal .distributed_whitebg {
  height: 100% !important;
}

.textarea-cs {
  background: white !important;
  color: black !important;
  border: 0px !important;
  height: 100% !important;
  border-radius: 0px !important;
  outline: none !important;
}

.def-file {
  max-width: 400px !important;
  min-height: 300px !important;
}

.text_map {
  max-width: 776px !important;
  height: 510px !important;
  max-height: 510px !important;
}

.text_map .dialog_content {
  max-height: 410px !important;
}

.op_filename_modal {
  background-color: white;
  height: 185px !important;
  width: 376px;
  padding: 3px;
  overflow-y: auto;
}

.xml_filename_modal {
  background-color: white;
  height: 185px !important;
  overflow-y: auto;
  height: 345px !important;
}

.op_filename_modal table td,
.xml_filename_modal table td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  padding: 5px !important;
}

.op_filename {
  width: 100%;
}

.op_filename_modal table .op_filename select,
.op_filename input,
.xml_filename_modal table .xml_filename select,
.xml_filename input {
  width: 100% !important;
  background: white !important;
  border: 1px solid #ccc !important;
  color: black !important;
  height: 22px;
  border-radius: 4px;
}

#op_attr_buttons,
#xml_attr_buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}

#op_attr_container,
#xml_attr_container {
  display: flex;
  flex-direction: column;
  background-color: #eee;
  padding: 5px;
}

#op_attr_tab,
#xml_attr_tab {
  background-color: #eee;
  flex: 1;
  border: 1px solid #f1f1f1;
  overflow: auto;
  pointer-events: none;
}

#op_attr_buttons,
#xml_attr_buttons {
  padding: 5px;
  pointer-events: none;
}

#op_attr_buttons input,
#xml_attr_buttons input {
  padding: 0;
}

.def-file .dialog_content {
  min-height: 200px !important;
}

.def-file .dialog_content table .op_filename_modal table th {
  background: #fafafa;
  color: black;
  display: table-cell !important;
  font-size: 13px !important;
  border: 1px solid #f1f1f1;
  padding: 5px !important;
  font-weight: 500;
}

.op_attr_prop,
.xml_attr_prop {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 5px;
  color: black;
  font-size: 12px;
}

#op_header {
  display: flex;
  flex-direction: column;
}

.op_preferences {
  display: flex !important;
  flex-direction: column !important;
}

#op_header .op_header_div1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  padding: 5px;
}

#op_header .op_header_div2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 5px;
  gap: 15px;
  background-color: #eee;
  pointer-events: none;

}

#op_header .op_header_div2 span,
.op_pp_div1 span {
  flex: 1;
}

#op_header .op_header_div2 select {
  background: white !important;
  border: 1px solid #ccc !important;
  color: black !important;
  width: 150px !important;
  height: 25px;
}

#op_header .op_header_div2 input {
  width: 100px;
  border: 1px solid #ccc !important;
  height: 25px !important;
  border-radius: 5px !important;
  font-size: 12px !important;
  text-align: center !important;
  background-color: white !important;
  cursor: pointer !important;
  color: black;
}

#op_header .op_header_div3 {
  flex: 1;
  padding: 5px;
  background-color: #eee;
  pointer-events: none;
}

#op_header .op_header_div3 textarea {
  height: 100%;
  width: 100%;
  color: black !important;
  font-size: 12px;
  background-color: white;
  border: 1px solid #ccc !important;
  resize: none;
}

.op_pp_div1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 5px 5px 5px 0px;
  gap: 15px;
}

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

.op_pp_box table td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  padding: 5px !important;
}

.op_pp_box table td select {
  background: white !important;
  width: 100%;
  color: black !important;
  border: 1px solid #ccc;
}

.op_pp_div2 {
  flex: 1;
  display: flex;
  gap: 10px;
  flex-direction: row;
  pointer-events: none;
  background-color: #eee;
}

.op_pp_input_settings {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.op_pp_input_settings input[type='text'] {
  background: white !important;
  border: 1px solid #ccc !important;
  color: black !important;
  height: 22px;
}

.op_pp_input_settings input[type='button'] {
  width: 32px;
  height: 22px;
  border: 1px solid #ccc !important;
  border-radius: 5px !important;
  font-size: 18px !important;
  text-align: center !important;
  background-color: white !important;
  cursor: pointer !important;
  color: black;
}

.op_pp_div2 .op_pp_settings {
  flex: 1;
  border: 1px solid #ccc;
}

.op_pp_div2 .op_pp_file_settings {
  flex: 1;
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: space-evenly;
}

.op_pp_div2 .op_pp_file_settings .op_pp_file_settings_div1 {
  color: black;
  font-size: 13px;
  font-weight: 500;
  background-color: #fafafa;
  width: 100%;
  height: 26px;
  padding: 5px;
}

.op_pp_div2 .op_pp_file_settings .op_pp_file_settings_div2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  padding: 2px;
  color: black;
  font-size: 12px;
}

.op_pp_div2 .op_pp_file_settings .op_pp_file_settings_div2 input {
  margin: 0;
}

.op_pp_div2 .op_pp_file_settings .op_pp_file_settings_div3 {
  flex: 1;
  border: 1px solid #eee;
  pointer-events: none;
  background-color: #eee;
}

.op_pp_div2 .op_pp_file_settings .op_pp_file_settings_div4 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 4px;
  color: black;
  font-size: 12px;
}

.op_pp_div2 .op_pp_file_settings .op_pp_file_settings_div4 input {
  flex: 1;
  background: white !important;
  border: 1px solid #ccc !important;
  color: black !important;
  height: 22px;
}

.text_map .text_map_container {
  height: 388px;
  width: 751px;
  display: flex;
  flex-direction: row;
  padding: 8px;
  gap: 5px;
}

.text_map .text_map_container .text_map_top {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: white;
  border: 1px solid #ccc;
}

.text_map .text_map_container .text_map_top .text_map_top_div1 {
  display: inline-flex;
  align-items: center;
  height: 25px;
  color: black;
  width: 100%;
  font-size: 13px;
  font-weight: bold;
  background-color: #fafafa;
  padding: 5px;
  border: 1px solid #f1f1f1;

}

.text_map .text_map_container .text_map_top .text_map_top_div2 {
  flex: 1;
  overflow: auto;
}

.text_map .text_map_container .text_map_top .text_map_top_div3 {
  display: flex;
  color: black;
  height: 54px;
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  font-size: 12px;
  font-weight: bold;
  background-color: #fafafa;
  flex-direction: row;
  align-items: center;
}

.text_map .text_map_container .text_map_middle {
  flex: 2;
  background-color: #fafafa;
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column;
}

.text_map .text_map_container .text_map_middle .text_map_content {
  flex: 1;
  padding: 10px;
}

.text_map .text_map_container .text_map_middle .text_map_content textarea {
  height: 285px !important;
  background-color: white !important;
  width: 463px !important;
  resize: none !important;
  color: black !important;
  font-size: 13px !important;
  border: 1px solid #ccc !important;
  overflow: auto;
  padding: 5px !important;
  border-radius: 0 !important;
}

.text_map .text_map_container .text_map_middle .text_map_content .textarea {
  height: 285px !important;
  background-color: white !important;
  width: 463px !important;
  color: black !important;
  font-size: 13px !important;
  border: 1px solid #ccc !important;
  overflow: auto;
  padding: 5px !important;
  border-radius: 0 !important;
}

.text_map .text_map_container .text_map_middle .text_map_repeat {
  display: flex;
  flex-direction: row;
  gap: 5px;
  color: black;
  font-size: 12px;
  align-items: center;
  padding-top: 17px;
  font-weight: 500;
}

.text_map .text_map_container .text_map_middle .text_map_repeat input {
  margin: 0 !important;
}

.text_map .text_map_container .text_map_middle .field_tab p.active {
  background-color: #fafafa !important;
}

.text_map_button {
  display: inline-block;
  height: 16px;
  width: 16px;
  vertical-align: middle;
}

.text_map_li {
  padding-left: 20px;
  color: black;
}

.text_map_button input {
  height: 16px;
  width: 16px;
}

.text_map_fields_list {
  padding: 5px;
}

/* xml loader settings */
/* xml loader tree css */
.xml-loader-tree-table-wrap {
  width: 100%;
}

.xml-loader-tree-table {
  border: 1px solid #f1f1f1 !important;
  table-layout: fixed !important;
  width: 100% !important;
  border-collapse: collapse !important;
  background-color: white !important;
}

.xml-loader-tree-table th {
  position: sticky;
  top: 0;
  color: #333;
  text-align: center;
  padding: 10px 0;
  background: #fafafa;
  font-size: 13px;
  border: 1px solid #f1f1f1;
  z-index: 100;
}

.xml-loader-tree-table td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}

.xml-loader-tree-table tr td:first-child {
  overflow: initial !important;
}

.xml-loader-tree-table-space-block {
  border: 1px solid transparent;
  display: inline-block;
  width: 20px !important;
  height: 20px !important;
  line-height: 16px;
  text-align: center;
  vertical-align: top;
  font-size: 19px !important;
  position: relative !important;
  box-sizing: border-box;
  margin-top: 7px;
  border-radius: 50%;
}

.xml-loader-tree-table tr td .xml-loader-tree-table-space-block:first-child {
  margin-left: 7px;
}

.xml-loader-tree-table-space-block.xml-loader-btn-toggle {
  /* border: 1px solid #d9d9d9; */
  position: relative;
  cursor: pointer;
  width: 15px;
  height: 17px;
  z-index: 12;
}

.xml-loader-tree-table-space-block.xml-loader-btn-toggle.is-close {
  background: #f1f1f1;
  border: 1px solid transparent;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.xml-loader-tree-table-space-block:before {
  position: absolute;
  content: "";
  width: 1px;
  height: 36px;
  background: #d9d9d9;
  left: 50%;
  top: -27px;
  z-index: -1;
}

.xml-loader-tree-table-space-block i {
  display: block;
  width: 3px;
  height: 3px;
  margin-left: 8px;
  margin-top: 7px;
  background: #d9d9d9;
  border-radius: 50%;
}

.xml-loader-tree-table-space-block.xml-loader-btn-toggle:before {
  display: none;
}

.xml-loader-tree-table-space-block.xml-loader-last-block:before {
  display: none;
}

.xml-loader-tree-table-space-block.xml-loader-last-block:after {
  position: absolute;
  content: "";
  width: 20px;
  height: 1px;
  background: #d9d9d9;
  top: 50%;
  margin-top: -1px;
  left: -10px;
}

.xml-loader-tree-table-space-block.xml-loader-btn-toggle:after {
  display: none;
}

.xml-loader-tree-table tr td .xml-loader-tree-table-space-block:first-child:after {
  display: none;
}

.xml-loader-tree-table-td-content {
  position: relative !important;
  display: inline-block;
  padding: 7px;
  cursor: pointer;
}

.xml-loader-hidden {
  display: none !important;
}

.xml-loader-show {
  visibility: visible !important;
}

/* xml loader tree css end */
.xml-load-setting {
  max-width: 776px !important;
  height: 510px !important;
  max-height: 510px !important;
}

.xml-load-setting .dialog_content {
  max-height: 410px !important;
}

.xml-load-setting .xml-setting-container {
  height: 388px;
  width: 751px;
  display: flex;
  flex-direction: row;
  padding: 8px;
  gap: 5px;
}

.xml-load-setting .xml-setting-container .xml-setting-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: white;
  border: 1px solid #ccc;
}

.xml-load-setting .xml-setting-container .xml-setting-right {
  flex: 1;
  background-color: white;
  border: 1px solid #ccc;
}

.xml-load-setting .xml-setting-container .xml-setting-right .xml_buttons {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.xml-load-setting .xml-setting-container .xml-setting-right td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #333;
  white-space: nowrap;
  overflow: hidden !important;
  padding: 5px !important;
}

.xml-load-setting .xml-setting-container .xml-setting-right select,
.xml-load-setting .xml-setting-container .xml-setting-right input[type='text'] {
  width: 100% !important;
  background: white !important;
  border: 1px solid #ccc !important;
  color: black !important;
  height: 22px;
  border-radius: 4px;
}

.xml-load-setting .xml-setting-container .xml-setting-right input[type='button'] {
  border: 1px solid #ccc !important;
  height: 22px !important;
  width: 30px !important;
  border-radius: 5px !important;
  font-size: 18px !important;
  text-align: center !important;
  background-color: white !important;
  cursor: pointer !important;
  color: black;
  padding: 0;
}

.xml-load-setting .xml-setting-container .xml-setting-right .xml_attr_properties {
  display: flex;
  flex-direction: column;
  color: black;
  height: 100%;
}

.xml-load-setting .xml-setting-container .xml-setting-right .xml_attr_properties .xml_attr_properties_title {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 13px;
  gap: 90px;
  width: 100%;
  font-weight: 500;
  background-color: #fafafa;
  padding: 5px;
  border: 1px solid #f1f1f1;
  height: 25px;
}

.xml-load-setting .xml-setting-container .xml-setting-right .xml_attr_properties .xml_attr_properties_title input[type="image"] {
  height: 25px;
  width: 25px;
}

.xml-load-setting .xml-setting-container .xml-setting-left .xml-setting-left-div1 {
  display: inline-flex;
  align-items: center;
  height: 25px;
  color: black;
  width: 100%;
  font-size: 13px;
  font-weight: bold;
  background-color: #fafafa;
  padding: 5px;
  border: 1px solid #f1f1f1;

}

.xml-load-setting .xml-setting-container .xml-setting-left .xml-setting-left-div2 {
  flex: 1;
  overflow: auto;
}

/* tree table css for ci define actions */
.CI-def-act-tree-table-wrap {
  width: 100%;
}

.CI-def-act-tree-table {
  border: 1px solid #f1f1f1 !important;
  table-layout: fixed !important;
  width: 100% !important;
  border-collapse: collapse !important;
  background-color: white !important;
}

.CI-def-act-tree-table th {
  position: sticky;
  top: 0;
  color: #333;
  text-align: center;
  padding: 10px 0;
  background: #fafafa;
  font-size: 13px;
  border: 1px solid #f1f1f1;
  z-index: 100;
}

.CI-def-act-tree-table td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}

.CI-def-act-tree-table tr td:first-child {
  overflow: initial !important;
}

.CI-def-act-tree-table-space-block {
  border: 1px solid transparent;
  display: inline-block;
  width: 20px !important;
  height: 20px !important;
  line-height: 16px;
  text-align: center;
  vertical-align: top;
  font-size: 19px !important;
  position: relative !important;
  box-sizing: border-box;
  margin-top: 7px;
  border-radius: 50%;
}

.CI-def-act-tree-table tr td .CI-def-act-tree-table-space-block:first-child {
  margin-left: 7px;
}

.CI-def-act-tree-table-space-block.CI-def-act-btn-toggle {
  /* border: 1px solid #d9d9d9; */
  position: relative;
  cursor: pointer;
  width: 15px;
  height: 17px;
  z-index: 12;
}

.CI-def-act-tree-table-space-block.CI-def-act-btn-toggle.is-close {
  background: #f1f1f1;
  border: 1px solid transparent;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.CI-def-act-tree-table-space-block:before {
  position: absolute;
  content: "";
  width: 1px;
  height: 36px;
  background: #d9d9d9;
  left: 50%;
  top: -27px;
  z-index: -1;
}

.CI-def-act-tree-table-space-block i {
  display: block;
  width: 3px;
  height: 3px;
  margin-left: 8px;
  margin-top: 7px;
  background: #d9d9d9;
  border-radius: 50%;
}

.CI-def-act-tree-table-space-block.CI-def-act-btn-toggle:before {
  display: none;
}

.CI-def-act-tree-table-space-block.CI-def-act-last-block:before {
  display: none;
}

.CI-def-act-tree-table-space-block.CI-def-act-last-block:after {
  position: absolute;
  content: "";
  width: 20px;
  height: 1px;
  background: #d9d9d9;
  top: 50%;
  margin-top: -1px;
  left: -10px;
}

.CI-def-act-tree-table-space-block.CI-def-act-btn-toggle:after {
  display: none;
}

.CI-def-act-tree-table tr td .CI-def-act-tree-table-space-block:first-child:after {
  display: none;
}

.CI-def-act-tree-table-td-content {
  position: relative !important;
  display: inline-block;
  padding: 7px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
  width: 100px;
}

.CI-def-act-hidden {
  display: none !important;
}

.CI-def-act-show {
  visibility: visible !important;
}

/* custom indexing define actions */
.CI_def_action {
  max-width: 776px !important;
  height: 510px !important;
  max-height: 510px !important;
}

.CI_def_action .dialog_content {
  max-height: 410px !important;
}

.CI_def_action .CI_def_act_container {
  display: flex;
  flex-direction: column;
  height: 388px;
  width: 751px;
  padding: 8px;
}

.CI_def_action .CI_def_act_title {
  display: flex;
  flex-direction: row;
  color: black;
  font-size: 13px;
  height: 25px;
  align-items: center;
  padding: 5px 5px 5px 0px;
  font-weight: 500;
}

.CI_def_action .CI_def_act_container .CI_def_act {
  flex: 1;
  background-color: white;
  border: 1px solid #ccc;
  overflow: auto;
}

.CI_def_action .CI_def_act_container .CI_def_act select {
  background: white !important;
  width: 100%;
  color: black !important;
  border: 1px solid #ccc;
}

.CI_def_action .dialog_content table #popup-tr-undefined th {
  background: #fafafa;
  color: black;
  display: table-cell !important;
  font-size: 13px !important;
  border: 1px solid #f1f1f1;
  padding: 5px !important;
  font-weight: 500;
}

/* ci db css */
.custom_index_db {
  max-width: 776px !important;
  height: 510px !important;
  max-height: 510px !important;
}

.custom_index_db .dialog_content {
  max-height: 410px !important;
}

.custom_index_db .custom_index_db_container {
  display: flex;
  flex-direction: row;
  background-color: #eee;
  height: 388px;
  width: 751px;
  gap: 10px;
}

.custom_index_db .custom_index_db_container .custom_index_db_img {
  width: 240px;
  border: 1px solid #ccc;
}

.custom_index_db .custom_index_db_container .custom_index_db_img img {
  width: 100%;
  height: 100%;
}

.custom_index_db .custom_index_db_container .custom_index_db_config {
  background-color: #eee;
  display: flex;
  flex-direction: column;
  gap: 5px;
  height: 100%;
  width: 100%;
}

.custom_index_db .custom_index_db_container .custom_index_db_config label {
  margin: 0;
  width: 155px;
}

.custom_index_db .custom_index_db_container .custom_index_db_config select,
.custom_index_db .custom_index_db_container .custom_index_db_config input[type="text"],
.custom_index_db .custom_index_db_container .custom_index_db_config input[type="password"] {
  background: white !important;
  width: 100%;
  color: black !important;
  border: 1px solid #ccc;
  height: 25px;
}

.custom_index_db .custom_index_db_container .custom_index_db_config .custom_index_db_fields {
  display: flex;
  flex-direction: column;
  color: black;
  font-size: 12px;
}

.custom_index_db .custom_index_db_container .custom_index_db_config .custom_index_db_params {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  padding: 10px;
}

.custom_index_db .custom_index_db_container .custom_index_db_config .custom_index_db_data {
  border: 1px solid #ccc;
  background-color: #f1f1f1 !important;
}

.custom_index_db .custom_index_db_container .custom_index_db_config .custom_index_db_buttons {
  color: black;
  font-size: 12px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 5px;
}

.custom_index_db .custom_index_db_container .custom_index_db_config .custom_index_db_buttons input[type="button"] {
  border: 1px solid #ccc !important;
  height: 25px !important;
  border-radius: 3px !important;
  font-size: 13px !important;
  text-align: center !important;
  background-color: #fafafa !important;
  cursor: pointer !important;
  color: black;
}

/* db mapping wizard */
.ci_db_map {
  max-width: 776px !important;
  width: 776px !important;
  height: 510px !important;
  max-height: 510px !important;
  min-width: 776px !important;
  min-height: 510px !important;
}

.ci_db_map .dialog_content {
  max-height: 410px !important;
}

.ci_db_map .ci_db_map_conatiner {
  display: flex;
  flex-direction: column;
  background-color: #eee;
  height: 388px;
  width: 751px;
  padding: 8px;
  gap: 10px;
}

.ci_db_map .ci_db_map_conatiner .ci_db_map_title {
  height: 70px;
  color: black;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  gap: 5px;
  font-weight: bold;
}

.ci_db_map .ci_db_map_conatiner .ci_db_map_title div:first-child {
  font-size: 20px;
}

.ci_db_map .ci_db_map_conatiner .ci_db_map_title div:last-child {
  font-size: 15px;
}

.ci_db_map .ci_db_map_conatiner .ci_db_map_box {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 5px;
  border: 1px solid #ccc;
  padding: 5px;
}

.ci_db_map .ci_db_map_conatiner .ci_db_map_box .ci_db_map_img {
  border: 1px solid #ccc;
}

.ci_db_map .ci_db_map_conatiner .ci_db_map_box .ci_db_map_wiz {
  flex: 1;
  display: flex;
  flex-direction: column;
  color: black;
  padding: 5px;
  gap: 5px;
}

.ci_db_map .ci_db_map_conatiner .ci_db_map_box .ci_db_map_wiz .ci_db_map_nxtbtn {
  color: black;
  display: flex;
  height: 25px;
  align-items: center;
  justify-content: end;
}

.ci_db_map .ci_db_map_conatiner .ci_db_map_box .ci_db_map_wiz .ci_db_map_nxtbtn input[type="button"] {
  border: 1px solid #ccc !important;
  height: 25px !important;
  border-radius: 3px !important;
  font-size: 13px !important;
  text-align: center !important;
  background-color: #fafafa !important;
  cursor: pointer !important;
  color: black;
}

.ci_db_map .ci_db_map_conatiner .ci_db_map_box .ci_db_map_wiz label {
  margin: 0;
  padding: 0px 5px 0px 5px;
}

.ci_db_map .ci_db_map_conatiner .ci_db_map_box .ci_db_map_wiz input[type="radio"] {
  margin: 0;
  zoom: 0;
  cursor: pointer;
}

.ci_db_map .ci_db_map_conatiner .ci_db_map_box .ci_db_map_wiz div:first-child {
  padding: 5px;
}

.ci_db_map .ci_db_map_conatiner .ci_db_map_box .ci_db_map_wiz .ci_db_map_buttons {
  border: 1px solid #ccc;
  height: 35px;
  padding: 7px;
}

.ci_db_map .ci_db_map_conatiner .ci_db_map_box .ci_db_map_wiz .ci_db_map_buttons form {
  margin: 0;
}

.ci_db_map .ci_db_map_conatiner .ci_db_map_box .ci_db_map_wiz .ci_db_map_text {
  flex: 1;
  border: 1px solid #ccc;
  color: black;
  font-size: 12px;
}

.ci_db_map .ci_db_map_conatiner .ci_db_map_box .ci_db_map_wiz .ci_db_map_text div {
  padding: 5px;
}

/* db wizard secon pop_up */
.ci_db_map_setting_conatiner {
  display: flex;
  flex-direction: column;
  background-color: #eee;
  height: 388px;
  width: 751px;
  padding: 8px;
  gap: 10px;
  color: black;
}

.ci_db_map_setting_conatiner .ci_db_map_setting_div1 {
  display: flex;
  flex-direction: row;
  gap: 5px;
  width: 100%;
  height: 90%;
}

.ci_db_map_setting_conatiner .ci_db_map_setting_div2 {
  height: 10%;
}

.ci_db_map_setting_buttons {
  display: flex;
  align-items: center;
  height: 100%;
  flex-direction: row;
  justify-content: space-between;
  padding: 5px;
}

.ci_db_map_setting_buttons input[type="button"] {
  border: 1px solid #ccc !important;
  height: 25px !important;
  border-radius: 3px !important;
  font-size: 13px !important;
  text-align: center !important;
  background-color: #fafafa !important;
  cursor: pointer !important;
  color: black;
}

.ci_db_map_info {
  width: 100%;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ci_db_map_info_title {
  font-size: 12px;
  padding: 5px;
  height: 10%;
}

.ci_db_map_info_tab {
  height: 90%;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ci_db_map_info_dropdown {
  height: 12%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}

.ci_db_map_info_dropdown label {
  margin: 0;
  width: 100px;
}

.ci_db_map_info_dropdown select,
.ci_db_map_info_dropdown input[type="text"] {
  background: white !important;
  width: 100%;
  border: 1px solid #ccc;
  color: black;
  height: 100%;
}

/* Modern Unified Select Box & Table Styling for DB Settings & Mapping Wizard */
.ci_db_map select,
.ci_db_map_info select,
.ci_db_map_info_dropdown select,
.ci_db_map_info_table select,
.schema_dropdown select,
.table_dropdown select,
.fields_mapping_item select,
.custom_index_db_container select {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 4px 28px 4px 10px !important;
  font-size: 13px !important;
  font-family: inherit !important;
  line-height: 1.4 !important;
  color: #1e293b !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  outline: none !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 14px 14px !important;
  cursor: pointer !important;
}

.ci_db_map select:hover:not(:disabled),
.ci_db_map_info select:hover:not(:disabled),
.ci_db_map_info_dropdown select:hover:not(:disabled),
.ci_db_map_info_table select:hover:not(:disabled),
.schema_dropdown select:hover:not(:disabled),
.table_dropdown select:hover:not(:disabled),
.fields_mapping_item select:hover:not(:disabled),
.custom_index_db_container select:hover:not(:disabled) {
  border-color: #94a3b8 !important;
  background-color: #f8fafc !important;
}

.ci_db_map select:focus,
.ci_db_map_info select:focus,
.ci_db_map_info_dropdown select:focus,
.ci_db_map_info_table select:focus,
.schema_dropdown select:focus,
.table_dropdown select:focus,
.fields_mapping_item select:focus,
.custom_index_db_container select:focus {
  border-color: #3b82f6 !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

.ci_db_map select:disabled,
.ci_db_map select.disabled,
.ci_db_map_info_dropdown select.disabled,
.schema_dropdown select.disabled {
  background-color: #f1f5f9 !important;
  color: #94a3b8 !important;
  border-color: #e2e8f0 !important;
  cursor: not-allowed !important;
  opacity: 0.8 !important;
}

/* Custom uiSelectInput plugin wrapper styling alignment */
.ci_db_map [id*="_ui_select_wrapper"],
.ci_db_map_info_dropdown [id*="_ui_select_wrapper"] {
  width: 100% !important;
  box-sizing: border-box !important;
}

.ci_db_map [id*="_ui_select_wrapper"] .ui-select-input,
.ci_db_map [id*="_ui_select_wrapper"] .select-input-container {
  height: 34px !important;
  border-radius: 6px !important;
  border-color: #cbd5e1 !important;
  font-size: 13px !important;
}

.ci_db_map_info_table {
  height: 88%;
  border: 1px solid #ccc;
  background-color: white;
  overflow: auto;
}

.ci_db_map_info_table::-webkit-scrollbar {
  width: 5px;
}

.ci_db_map_field_mapping {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 5px;
}

.ci_db_map_field_mapping_data {
  display: flex;
  flex-direction: column;
  flex: 1;
  border: 1px solid #ccc;
}

.ci_db_field_name {
  height: 25px;
  display: inline-flex;
  align-items: center;
  color: black;
  width: 100%;
  font-size: 12px;
  background-color: #fafafa;
  padding: 5px;
  border: 1px solid #f1f1f1;
}

.ci_db_field_content {
  flex: 1;
  background-color: white;
}

.ci_db_next_back_btns {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: end;
  gap: 5px;
}

.ci_db_hide {
  display: none !important;
}

.ci_db_map .dialog_content table th,
.ci_db_map .ci_db_map_info_table th {
  background: #f8fafc !important;
  color: #334155 !important;
  display: table-cell !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-bottom: 2px solid #e2e8f0 !important;
  padding: 8px 10px !important;
}

.ci_db_map .dialog_content table td,
.ci_db_map .ci_db_map_info_table td {
  border-bottom: 1px solid #f1f5f9 !important;
  font-size: 13px !important;
  color: #1e293b !important;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  padding: 6px 10px !important;
  vertical-align: middle !important;
}

.comp-data-wide .dialog_content table #popup-tr-undefined th {
  background: #fafafa;
  color: black;
  display: table-cell !important;
  font-size: 12px !important;
  border: 1px solid #f1f1f1;
  padding: 5px !important;
  font-weight: 500;
}

.customIndexmodal .dialog_content table #popup-tr-undefined th {
  background: #fafafa;
  color: black;
  display: table-cell !important;
  font-size: 13px !important;
  border: 1px solid #f1f1f1;
  padding: 5px !important;
  font-weight: 500;
}

.text_map .dialog_content table #popup-tr-undefined th {
  background: #fafafa;
  color: black;
  display: table-cell !important;
  font-size: 13px !important;
  border: 1px solid #f1f1f1;
  padding: 5px !important;
  font-weight: 500;
}

.xml-load-setting .dialog_content table #popup-tr-undefined th {
  background: #fafafa;
  color: black;
  display: table-cell !important;
  font-size: 13px !important;
  border: 1px solid #f1f1f1;
  padding: 5px !important;
  font-weight: 500;
}

.xml_loader_show {
  display: block;
}

.xml_loader_hide {
  display: none;
}

.mappingModal-comp {
  max-width: 650px !important;
}

.mappingModal-comp .dialog_content table #popup-tr-undefined th {
  display: table-cell !important;
  padding: 5px !important;
}

.disable_mouse_events {
  pointer-events: none;
}

.enable_mouse_events {
  pointer-events: all;
}

/* select  box */
.ci_select_box {
  max-width: 500px !important;
  height: 190px !important;
}

.ci_select_box .dialog_content {
  min-height: 150px !important;
  max-height: 75px !important;
}

.ci_select_box .dialog_content table {
  background-color: white;
}

.ci_select_box th {
  width: 160px !important;
  font-weight: normal !important;
  font-size: 13px !important;
  position: sticky;
  top: 0;
  color: #333;
  text-align: left !important;
  padding: 5px !important;
  background: #fafafa;
  border: 1px solid #f1f1f1;
  z-index: 100;
  vertical-align: middle;
}

.ci_select_box td {
  color: black;
  font-size: 13px !important;
}

.ci_select_box input,
.ci_select_box select {
  background: white !important;
  border: 1px solid #ccc !important;
  color: black !important;
  width: 100% !important;
  height: 25px !important;
}

#popups>.ci_select_box>.buttons>button:disabled {
  visibility: visible !important;
  background-color: rgba(239, 239, 239, 0.3) !important;
  color: rgba(16, 16, 16, 0.3) !important;
  border-color: rgba(118, 118, 118, 0.3) !important;
}

#popups>.CI_def_action>.buttons>button:disabled {
  visibility: visible !important;
  background-color: rgba(239, 239, 239, 0.3) !important;
  color: rgba(16, 16, 16, 0.3) !important;
  border-color: rgba(118, 118, 118, 0.3) !important;
}

#popups>.ci_db_map>.buttons>button:disabled {
  visibility: visible !important;
  background-color: rgba(239, 239, 239, 0.3) !important;
  color: rgba(16, 16, 16, 0.3) !important;
  border-color: rgba(118, 118, 118, 0.3) !important;
}

/* collapse and expand icons */
.tree-collapse {
  background: url(images/icons/collapse.png) no-repeat center center;
  margin-top: 4px !important;
}

.tree-expand {
  background: url(images/icons/expand.png) no-repeat center center;
  margin-top: 4px !important;
}

/* define actions */
.dfa_act select,
.dfa_act input[type="text"] {
  width: 100%;
  height: 100%;
}

/*  */
.CI_def_action select,
.CI_def_action input[type="text"] {
  width: 100%;
  height: 100%;
}

.CI_def_action .fit_div_content {
  width: 100%;
  height: 100%;
}

.fit_div_content {
  width: 100%;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: end;

}

/*  flex */
.flex_row_items {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  width: 100%;
}

.flex_row_items input[type="text"] {
  width: 100%;
  height: 100%;
}


#popups .water_mark #wm_select {
  width: 100% !important;
  height: 25px !important;
  background: white !important;
  border: 1px solid #ccc !important;
  color: black !important;
}

.water_mark_td {
  display: flex;
  gap: 10px;
  align-items: center;
}

.image_water_mark {
  width: 100%;

}

/* D options advanced settings css */
.adv_settings {
  max-width: 776px !important;
  height: 510px !important;
  max-height: 510px !important;
}


.adv_settings_container {
  background: white;
  max-width: 750px !important;
  width: 750px;
  height: 398px;
  min-height: 398px !important;
  display: flex;
  flex-direction: column;
  border: 1px solid #eee;
  border-radius: 14px;
}

.adv_settings_tabs_content {
  height: 90%;
}

.adv_settings_tabs_content select {
  height: 25px !important;
}

/* tabs */
.adv_settings_tabs {
  position: sticky;
  top: 0;
  z-index: 200;
  overflow: hidden;
  height: 10%;
  display: flex;
  border-bottom: 1px solid #e2e8f0;
  font-weight: 500;
  line-height: 1.25rem;
  background-color: rgb(243 244 246);

}

.adv_settings_tabs p {
  flex: 1;
  padding: 12px;
  text-align: center;
  border: none;
  background: transparent;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: 0.2s ease;
  border-bottom: 3px solid transparent;
  margin: 0px !important;
}

.adv_settings_tabs p.active {
  color: var(--brand-color);
  border-bottom: 3px solid var(--brand-color);
  background-color: #ffffff;
}

.adv_settings_tabs p:hover {
  background-color: #ddd;
}

.as_container {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.as_container::-webkit-scrollbar {
  width: 5px;
}

.doc_prop_container .doc_prop_title {
  font-size: 14px;
  font-weight: 500;
  line-height: 16.8px;
}

.doc_prop_container input[type="text"] {
  height: 32px;
}

.file_set_container {
  display: flex;
  flex-direction: column;

}

.ext_set_container {
  display: flex;
  flex-direction: column;
  padding: 5px;
}

.file_set_container label,
.ext_set_container label,
.enc_set_container label,
.aud_set_container label {
  margin: 0px !important;
  font-size: 13px;
  font-weight: 400;
  line-height: 15.8px;
}

.file_set_container textarea,
.ext_set_container textarea,
.aud_set_container textarea {
  resize: none;
  padding: 5px;
}

.ext_set_container .html5_file_name {
  width: 50% !important;
  height: 25px;
  border: 2px solid #ccc;
  vertical-align: middle;
  background-color: white;
  color: black;
}

.ext_set_container .html5_ids_list {
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: auto;
}

.ext_set_container .html5_ids_list::-webkit-scrollbar {
  width: 5px;
}

.ext_set_container .html5_ids_list li {
  padding: 5px;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}

.ext_set_container .html5_ids_list .html5_ids_list_item_active,
.obj_set_container .fgt_object_settings_list .fgt_object_settings_list_active {
  background-color: var(--active-tag-color);
}

.ext_set_container .html5_file,
.aud_set_container .mp3_file {
  border: 2px solid #ccc !important;
  height: 25px !important;
  width: 60px !important;
  border-radius: 5px !important;
  font-size: 13px !important;
  text-align: center !important;
  background-color: white !important;
  cursor: pointer !important;
  color: black;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ext_set_container textarea {
  width: 100%;
  height: 100%;
}

.ext_set_container select {
  width: 60%;
}

.enc_set_container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

.enc_set_container input[type='text'] {
  height: 32px;
}

.obj_set_container {
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding: 10px;
}

.obj_set_container .fgt_object_settings_list {
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: auto;
}

.obj_set_container .fgt_object_settings_css {
  resize: none;
  width: 100%;
  height: 100%;
  padding: 5px;
}

.obj_set_container .fgt_object_settings_list::-webkit-scrollbar {
  width: 5px;
}

.obj_set_container .fgt_object_settings_list li {
  padding: 5px;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}

.aud_set_container {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 5px;
}

.as_enc_container {
  display: flex;
  flex-direction: column;
  gap: 2%;
  padding: 5px;
}

.as_enc_container .as_enc_top {
  height: 8%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.as_enc_container .as_enc_top span {
  width: 30%;
}

.as_enc_container .as_enc_top select {
  width: 70%;
}

.as_enc_container .as_enc_bottom {
  height: 90%;
  border: 1px solid #eee;
  padding: 5px;
}

.as_enc_fields {
  display: flex;
  align-items: center;
  flex-direction: row;
  height: 25px;
}

.as_enc_fields .text_label {
  width: 30%;
}

.as_enc_fields .text_message {
  width: 97%;
}

.as_enc_fields input[type='checkbox'] {
  width: 3%;
}

.as_enc_fields select {
  width: 70%;
}

.as_enc_box {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.as_dig_container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1%;
  padding: 5px;
}

.as_dig_container .as_dig_left {
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid #eee;
}

.as_dig_container .as_dig_left .as_dig_title {
  height: 8%;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 5px;
  border-bottom: 1px solid #eee;
  justify-content: space-between;
  cursor: pointer;
}

.as_dig_container .as_dig_left .as_dig_title .dig_sig_buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.as_dig_container .as_dig_left .as_dig_title .dig_sig_buttons .dig_sig_add_icon {
  width: 24px;
  height: 24px;
  border: none;
  box-shadow: none;
  background: url(images/icons/plusic.svg) no-repeat center center;
  filter: var(--menu-icons-filter);
  cursor: pointer !important;
}

.as_dig_container .as_dig_left .as_dig_list {
  height: 92%;
  width: 100%;
  overflow-y: auto;
}

.as_dig_container .as_dig_left .as_dig_list .sign_active {
  background-color: #beebff;
  border-color: #99defd;
  z-index: 1;
}

.as_dig_container .as_dig_left .as_dig_list .dig_sign_del_icon {
  background: url(images/deleteicon.svg) no-repeat center;
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.as_dig_container .as_dig_left .as_dig_list::-webkit-scrollbar {
  width: 5px;
}

.as_dig_container .as_dig_right {
  width: 59%;
  height: 100%;
  border: 1px solid #eee;
}

.dig_sign_field {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px;
  flex-direction: row;
  width: 100%;
}

.dig_sign_fields {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px;
  flex-direction: column;
}

.dig_sign_field .dig_sign_field_heading {
  width: 50%;
}

.dig_sign_field select {
  width: 50%;
}

.dig_sign_field input[type="number"] {
  width: 50% !important;
  height: 25px;
}

.dig_sign_field .dig_sign_field_label {
  width: 97%;
}

/* properties */
.prop_settings {
  background: #fff;
  border: 1px solid #ccc;
  color: #000;
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

.table_td_strong_color {
  font-weight: 500;
}

.table_td_highlight_color {
  padding: 4px 8px;
  border-radius: 4px;
  background: #e0e7ff;
  color: var(--brand-color);
  font-weight: 500;
}

.prop_settings .prop_settings_body::-webkit-scrollbar {
  width: 5px;
}

.prop_settings .prop_settings_body {
  overflow: auto;
}

.prop_settings .prop_settings_header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  padding: 10px 15px;
}

.prop_settings .prop_settings_header .props_panel_header_title {
  width: 40%;
}

.prop_settings .prop_settings_header .props_panel_header_title span {
  font-weight: 500;
  font-size: 15px;
}

.prop_settings .prop_settings_header .props_panel_header_search {
  display: flex;
  flex-direction: row;
  width: 60%;
  gap: 5px;
  height: 30px;
}

.prop_settings .prop_settings_header .props_panel_header_search input[type="text"] {
  width: 70% !important;
  height: 100%;
}

.prop_settings .prop_settings_header .props_panel_header_auto_fill {
  background: none !important;
  width: 30%;
  height: 100%;
  background-color: var(--brand-color) !important;
  color: #ffffff;
}

.prop_settings .prop_settings_header .props_panel_header_auto_fill:hover {
  background-color: #eee !important;
  color: #202124;
}

.prop_settings th {
  background: #fafafa;
  color: #64748b;
  display: table-cell !important;
  font-size: 13px !important;
  border-bottom: 1px solid #f1f1f1;
  padding: 10px 15px !important;
  font-weight: 600;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.prop_settings td {
  height: 100%;
  padding: 10px 15px !important;
  border-bottom: 1px solid #eee;
  font-weight: 400;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

.prop_settings input[type='text'],
.prop_settings input[type='number'],
.prop_settings select {
  height: 25px;
  width: 100% !important;
}

.prop_settings .dist_fgt_prop {
  margin: 5px;
}

.prop_settings .dist_fgt_prop span {
  width: 30%;
}

.prop_settings .dist_fgt_prop span {
  width: 70%;
}

.prop_settings button {
  background: url(images/icons/configuration_ic.png) no-repeat center center;
  width: 25px;
  height: 25px;
}

.props-settings-loader {
  border: 6px solid #eee;
  border-top: 6px solid #ccc;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
}

.props-settings-loader-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hide_props_settings {
  display: none !important;
}

.server_config_settings {
  max-width: 500px !important;
  min-width: 500px !important;
  min-height: 212px !important;
  max-height: 212px !important;
  height: 212px !important;
  width: 500px !important;
}

.server_config_settings .server_config_settings_container {
  height: 108px;
  width: 475px;
}

.server_config_settings .server_config_settings_container .server_config_settings_options {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.server_config_settings .server_config_settings_container .server_config_settings_options .server_config_settings_option {
  height: 50%;
  display: flex;
  flex-direction: column;
}

.server_config_settings .server_config_settings_container .server_config_settings_options .server_config_settings_option span {
  font-size: 14px;
  font-weight: 500;
  line-height: 16.8px;
}

.server_config_settings .server_config_settings_container .server_config_settings_options .server_config_settings_option select {
  height: 32px;
}

/* tabs */
.document_tabs {
  position: sticky;
  top: 0;
  z-index: 200;
  overflow: hidden;
  background-color: #eee;
  height: 8%;
}

.document_content_box {
  height: 92%;
  width: 100%;
}

.document_tabs p {
  color: black;
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 6px;
  transition: 0.3s;
  font-size: 14px;
  margin: 0px;
  font-weight: 500;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

.document_tabs p.active {
  background-color: #fafafa;
}

.document_tabs p:hover {
  background-color: #ddd;
}

.document-d-none {
  display: none !important;
}

/* document define actions */
.document_container {
  display: flex;
  flex-direction: column;
  height: 384px;
}

.document_container .df_container {
  height: 100%;
  width: 100%;
  overflow-y: auto;
  border: 1px solid #ccc;
}


.settings_icon {
  background: url(images/icons/configuration_ic.png) no-repeat center center;
  width: 30px;
  height: 100%;
}

/* COMPOSE STRING */
.string_composition_prop {
  max-width: 776px !important;
  min-width: 776px !important;
  min-height: 510px !important;
  max-height: 510px !important;
  height: 510px !important;
  width: 776px !important;
}

.string_composition_prop .string_composition_prop_container {
  height: 397px;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  gap: 5px;

}

.string_composition_prop .string_composition_prop_container .string_composition_prop_selection {
  height: 20%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5px;
}

.string_composition_prop .string_composition_prop_container .string_composition_prop_selection .string_composition_prop_select {
  display: flex;
  flex-direction: row;
  width: 100%;
  /* gap: 5px; */
  align-items: center;
  height: 50%;
  justify-content: space-between;
}

.string_composition_prop .string_composition_prop_container .string_composition_prop_selection .string_composition_prop_btn {
  display: flex;
  flex-direction: row;
  height: 50%;
  justify-content: flex-end;
}

.string_composition_prop .string_composition_prop_container .string_composition_prop_selection .string_composition_prop_select span {
  font-size: 14px;
  font-weight: 500;
  line-height: 16.8px;
  width: 50%;
}

.string_composition_prop .string_composition_prop_container .string_composition_prop_selection .string_composition_prop_select select {
  width: 100%;
  height: 32px;
}

.string_composition_prop .string_composition_prop_container .string_composition_prop_selection button {
  background-color: var(--brand-color);
  color: #ffffff;
  padding: 4px 10px 4px 10px;
  border-radius: 4px;
  height: 32px;
  width: 200px;
}

.string_composition_prop .string_composition_prop_container .string_composition_prop_options {
  height: 80%;
  border: 1px solid #E4E4E4;
  border-radius: 12px;
  overflow-y: auto;
}

.string_composition_prop .string_composition_prop_container .string_composition_prop_options::-webkit-scrollbar {
  width: 5px;
}

.string_composition_prop .string_composition_prop_container .string_composition_prop_options tr {
  border-bottom: 1px solid #E4E4E4;
}

.string_composition_prop .string_composition_prop_container .string_composition_prop_options th:first-child {
  border-radius: 12px 0px 0px 0px;
}

.string_composition_prop .string_composition_prop_container .string_composition_prop_options th:last-child {
  border-radius: 0px 12px 0px 0px;
}

.string_composition_prop .string_composition_prop_container .string_composition_prop_options th {
  position: sticky;
  top: 0;
  color: #202124;
  padding: 5px 5px !important;
  background: #EEEEEE;
  font-size: 14px !important;
  /* border: 1px solid #E4E4E4; */
  z-index: 100;
  display: table-cell !important;
  font-weight: 400;
  height: 48px;
  vertical-align: middle;
  line-height: 20px;
  letter-spacing: 0.1px;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

.string_composition_prop .string_composition_prop_container .string_composition_prop_options td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #202124;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  padding: 6px !important;
  background: #FAFAFA;
  height: 48px;
  vertical-align: middle;
  line-height: 16px;
}

.string_composition_prop .string_composition_prop_container .string_composition_prop_options td select {
  width: 100%;
  height: 32px;
}

.string_composition_prop .string_composition_prop_container .string_composition_prop_options td input {
  width: 100%;
  height: 32px;
}

.string_composition_prop .string_composition_prop_container .string_composition_prop_options td .config_icons {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  gap: 5px;
}

.string_composition_prop .string_composition_prop_container .string_composition_prop_options td .config_icon {
  display: inline-block;
  height: 32px;
  width: 32px;
  background-color: #E9EDEE !important;
  border-radius: 6px;
  cursor: pointer;
}

.string_composition_prop .string_composition_prop_container .string_composition_prop_options td .delete_config {
  background: url(images/icons/delete_red_ic.svg) no-repeat center;
}

/* Update file generator state */
.update_fgt_state_container {
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  gap: 5px;
  height: 388px;
  width: 751px;
  overflow-y: auto;
}

.update_fgt_state_container .update_fgt_state_add_btn {
  height: 10%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.update_fgt_state_container .update_fgt_state_add_btn button {
  box-shadow: 0 1px 2px 0 var(--button-shadow-color), 0 1px 0 0 rgba(255, 255, 255, 0.1) inset;
  cursor: pointer;
  border: 1px solid var(--border-color);
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  background-color: var(--brand-color);
  color: #ffffff;
  padding: 4px 10px 4px 10px;
  border-radius: 4px;
  height: 32px;
  width: 200px;

}

.update_fgt_state_container .update_fgt_state_list {
  height: 90% !important;
}

.update_fgt_state_container .update_fgt_state_list select {
  height: 32px;
  width: 100%;
}

/* Styles for Custom Index Database Configuration Page */
#custom_index_db_con .card {
  background: #fff;
  border-radius: 12px;
  padding: 5px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  height: 100%
}

#custom_index_db_con .global-config {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  margin-bottom: 16px;
}

#custom_index_db_con .global-config p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #6b7280;
}

#custom_index_db_con .info {
  background: #eef2ff;
  color: #3730a3;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 24px;
}

#custom_index_db_con .section h2 {
  font-size: 18px;
  margin-bottom: 16px;
}

#custom_index_db_con .form-group {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

#custom_index_db_con label {
  font-size: 13px;
  color: #374151;
}

#custom_index_db_con input,
select {
  border-radius: 6px;
  border: 1px solid #d1d5db;
}

#custom_index_db_con input {
  padding: 8px 10px;
}

#custom_index_db_con input:focus,
#custom_index_db_con select:focus {
  outline: none;
  border-color: #2563eb;
}

#custom_index_db_con .disabled {
  opacity: 0.5;
  pointer-events: none;
}

#custom_index_db_con .actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

#custom_index_db_con button {
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  border: none;
  cursor: pointer;
}

#custom_index_db_con .primary {
  background: #2563eb;
  color: #fff;
}

#custom_index_db_con .secondary {
  background: #e5e7eb;
}

/* End of Styles for Custom Index Database Configuration Page */


.ci_db_map_info_dropdown {
  display: flex;
  width: 100%;
  gap: 20px;
  margin-bottom: 15px;
}

.schema_dropdown,
.table_dropdown {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.schema_dropdown select,
.table_dropdown select {
  width: 100%;
  height: 36px;
}

.schema_dropdown label,
.table_dropdown label {
  margin-bottom: 5px;
}

.ci_db_map_info_tab {
  margin-top: 15px;
}

/* Add ref fgt */
.add_ref_fgt {
  max-width: 450px !important;
  width: 450px !important;
  height: 390px !important;
  max-height: 390px !important;
  min-width: 450px !important;
  min-height: 390px !important;
}

.add_ref_fgt .add_ref_fgt_container {
  height: 285px;
  width: 425px;
}

.add_ref_fgt .ref_fgt_list {
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow-y: auto;
}

.add_ref_fgt .ref_fgt_list::-webkit-scrollbar {
  width: 5px;
}

.profile_settings_prop {
  width: 500px !important;
  min-width: 500px !important;
  max-width: 500px !important;
  height: 350px !important;
  min-height: 350px !important;
  max-height: 350px !important;
}

.profile_settings_prop .profile_settings_prop_container {
  height: 235px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.profile_settings_prop .profile_settings_prop_container .profile_settings_prop_field_row {
  height: 30px;
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
}

.profile_settings_prop .profile_settings_prop_container .profile_settings_prop_field_row span {
  width: 30%;
}

.profile_settings_prop .profile_settings_prop_container .profile_settings_prop_field_row select {
  width: 70%;
  height: 100%;
}

.transaction_selection_prop {
  width: 500px !important;
  min-width: 500px !important;
  max-width: 500px !important;
  height: 220px !important;
  min-height: 220px !important;
  max-height: 220px !important;
}

.transaction_selection_prop .profile_settings_prop_container {
  height: 105px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.transaction_selection_prop .profile_settings_prop_container .profile_settings_prop_field_row {
  height: 30px;
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
}

.transaction_selection_prop .profile_settings_prop_container .profile_settings_prop_field_row span {
  width: 30%;
}

.transaction_selection_prop .profile_settings_prop_container .profile_settings_prop_field_row select {
  width: 70%;
  height: 100%;
}

/* QC CUSTOM MAPPING*/
.qc_custom_mapping_container {
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  gap: 5px;
  height: 388px;
  width: 751px;
  overflow-y: auto;
}

.qc_custom_mapping_container .qc_custom_mapping_add_btn {
  height: 10%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
}

.qc_custom_mapping_container .qc_custom_mapping_add_btn div {
  display: flex;
  flex-direction: row;
  gap: 5px;
  height: 32px;
  width: 80%;
}

.qc_custom_mapping_container .qc_custom_mapping_add_btn div label {
  font-size: 14px;
  font-weight: 500;
  line-height: 16.8px;
  width: 25%;
}

.qc_custom_mapping_container .qc_custom_mapping_add_btn div select {
  height: 100%;
  width: 75%;
}

.qc_custom_mapping_container .qc_custom_mapping_add_btn button {
  box-shadow: 0 1px 2px 0 var(--button-shadow-color), 0 1px 0 0 rgba(255, 255, 255, 0.1) inset;
  cursor: pointer;
  border: 1px solid var(--border-color);
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  background-color: var(--brand-color);
  color: #ffffff;
  padding: 4px 10px 4px 10px;
  border-radius: 4px;
  height: 32px;
  width: 20%;

}

.qc_custom_mapping_container .qc_custom_mapping_list {
  height: 90% !important;
}

.qc_custom_mapping_container .qc_custom_mapping_list select {
  height: 32px;
  width: 100%;
}

/* transaction edit pop */
.edit_transaction_options {}

.edit_transaction_options .edit_transaction_options_container {
  height: 100px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.edit_transaction_options .edit_transaction_options_container .edit_transaction_option_title span {
  font-size: 14px;
  font-weight: 500;
  line-height: 16.8px;
}

.edit_transaction_options .edit_transaction_options_container .edit_transaction_option_fields {
  display: flex;
  flex-direction: row;
  height: 32px;
  align-items: center;
  gap: 10px;
}

.edit_transaction_options .edit_transaction_options_container .edit_transaction_option_fields span {
  padding: 4px 8px;
  border-radius: 4px;
  background: #e0e7ff;
  color: var(--brand-color);
  font-weight: 500;
}

.edit_transaction_options .edit_transaction_options_container .edit_transaction_option_fields input[type='text'] {
  flex: 1;
  height: 100%;
}
.print_settings{
  max-width: 776px !important;
  min-width: 776px !important;
  min-height: 510px !important;
  max-height: 510px !important;
  height: 510px !important;
  width: 776px !important;
}

.print_settings_container{
  height: 397px;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  gap: 5px;
}
.print_profile_settings_tabs{
  height: 8%;
}
.print_profile_settings_content{
  height: 92%;
}
.print_settings_actions_on_empty{
  height: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    width: 100% !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    background-color: #eee !important;
    align-items: center !important;
}
.print_settings_container .print_settings_actions_on_empty button{
  background-color: var(--brand-color);
  color: #ffffff;
  padding: 4px 10px 4px 10px;
  border-radius: 4px;
  height: 32px;
  width: 200px;
}
.print_settings_container .print_settings_actions{
  height: 10%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.print_settings_container .print_settings_actions button{
  background-color: var(--brand-color);
  color: #ffffff;
  padding: 4px 10px 4px 10px;
  border-radius: 4px;
  height: 32px;
  width: 200px;
}
.print_settings_container .print_settings_content{
  height: 90%;
  border: 1px solid #E4E4E4;
  border-radius: 12px;
  overflow-y:auto ;
}
.print_settings_container .print_settings_content::-webkit-scrollbar{
  width: 5px;
}

#popups .print_settings .dialog_content .print_settings_container th{
  position: sticky;
  top: 0;
  color: #202124;
  padding: 5px 5px !important;
  background: #EEEEEE;
  font-size: 14px !important;
  /* border: 1px solid #E4E4E4; */
  z-index: 100;
  display: table-cell;
  font-weight: 400;
  height: 48px;
  vertical-align: middle;
  line-height: 20px;
  letter-spacing: 0.1px;
  font-family:  'Poppins' ,Arial, Helvetica, sans-serif;;
}
#popups .print_settings .dialog_content .print_settings_container tr{
  border-bottom: 1px solid #E4E4E4;
}
#popups .print_settings .dialog_content .print_settings_container th:first-child{
  border-radius: 12px 0px 0px 0px;
}
#popups .print_settings .dialog_content .print_settings_container th:last-child{
  border-radius: 0px 12px 0px 0px;
}
#popups .print_settings .dialog_content .print_settings_container  td{
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color:#202124;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  padding: 6px !important;
  background: #FAFAFA;
  height: 48px;
  vertical-align: middle;
  line-height: 16px;
}
#popups .print_settings .dialog_content .print_settings_container  td .print_settings_icons{
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  gap: 5px;
}
#popups .print_settings .dialog_content .print_settings_container  td .print_settings_icon{
  display: inline-block;
  height: 32px;
  width: 32px;
  background-color: #E9EDEE !important;
  border-radius: 6px;
  cursor: pointer;
}
#popups .print_settings .dialog_content .print_settings_container  td .edit_print_settings{
  background: url(images/icons/edit_pen_ic.svg) no-repeat center;
}
#popups .print_settings .dialog_content .print_settings_container  td .delete_print_settings{
  background: url(images/icons/delete_red_ic.svg) no-repeat center;
}
#popups .print_settings .dialog_content .print_settings_container  td .print_settings_icons{
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: flex-start;
  gap: 5px;
}
#popups .print_settings .dialog_content .print_settings_container  td .print_settings_icon{
  display: inline-block;
  height: 32px;
  width: 32px;
  background-color: #E9EDEE !important;
  border-radius: 6px;
  cursor: pointer;
}
#popups .print_settings .dialog_content .print_settings_container  td .edit_print_settings{
  background: url(images/icons/edit_pen_ic.svg) no-repeat center;
}
#popups .print_settings .dialog_content .print_settings_container  td .print_profile{
  background-color: #E9EDEE !important;
  font-size: 18px;
  font-weight: bold;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #4A5568;
  text-decoration: none;
  line-height: 32px;
}
#popups .print_settings .dialog_content .print_settings_container  td .print_profile::before{
  content: "🖨";
  display: inline-block;
  width: 100%;
  text-align: center;
  filter: drop-shadow(0px 0px 0.5px rgba(0,0,0,0.3));
}
#popups .print_settings .dialog_content .print_settings_container  td .delete_print_settings{
  background: url(images/icons/delete_red_ic.svg) no-repeat center;
}
.print_profile_settings{
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
.print_profile_settings .print_profile_settings_container{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  gap: 5px;
}
/* tabs */
.print_profile_settings_tabs {
  position: sticky;
  top: 0;
  z-index: 200;
  overflow: hidden;
  background-color: #eee;
  height: 8%;
}
.print_profile_settings_tabs p,
.print_profile_settings_tabs button {
  color: black;
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 6px;
  transition: 0.3s;
  margin:0px;
  font-size: 14px;
  font-weight: 500;
  line-height: 16.8px;
  height: 100%;
}
.print_profile_settings_tabs p.active,
.print_profile_settings_tabs button.active,
.print_profile_settings_tabs button.is-active {
  background-color: #fafafa;
}
.print_profile_settings_tabs p:hover {
  background-color: #ddd;
}
.print_profile_settings_tabs_d_none{
  display: none !important;
}
.print_profile_settings .print_profile_settings_general_container{
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 15px;
}
.print_profile_settings .print_profile_settings_container .print_profile_settings_profile_container{
  height: 15%;
}
.print_profile_settings .print_profile_settings_container .print_profile_settings_pcs_container{
  height: 15%;
}
.print_profile_settings .print_profile_settings_container .print_profile_settings_ps_container{
  height: 70%;
}
.print_profile_settings .print_profile_settings_container .print_profile_settings_fields{
  display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      gap: 6px;
}
.print_profile_settings .print_profile_settings_container .print_profile_settings_fields span,
.print_profile_settings .print_profile_settings_container .print_profile_settings_fields label{
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  color: #25364d;
}
.print_profile_settings .print_profile_settings_container .print_profile_settings_fields .print_profile_settings_fields_actions{
  display: flex;
  align-items: center;
  flex-direction: row;
}
.print_profile_settings .print_profile_settings_container .print_profile_settings_fields .print_profile_settings_fields_actions select{
width: 95%;
}
.print_profile_settings .print_profile_settings_container .print_profile_settings_fields .print_profile_settings_fields_actions button{
  background: url(images/icons/configuration_ic.png) no-repeat center center;
  width: 5%;
  height: 32px;
}
.print_profile_settings .print_profile_settings_container .print_profile_settings_fields .print_profile_settings_fields_actions button:hover{
  background-color: #E4E4E4;
}
.print_profile_settings .print_profile_settings_container .print_profile_settings_fields input[type='text'],.print_profile_settings .print_profile_settings_container .print_profile_settings_fields select{
  height: 32px;
}
.print_profile_settings .print_profile_settings_container .print_profile_settings_fields .print_profile_settings_ps_content{
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
border: 1px solid #ccc;
border-radius: 4px;
padding: 5px;
}
.print_profile_settings .print_profile_settings_container .print_profile_settings_fields .print_profile_settings_ps_content .print_profile_settings_ps_content_top{
height: 20%;
display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20%;
}
.print_profile_settings .print_profile_settings_container .print_profile_settings_fields .print_profile_settings_ps_content .print_profile_settings_ps_content_middle{
  height: 30%;
  display: flex;
    flex-direction: column;
    gap: 5px;
}
.print_profile_settings .print_profile_settings_container .print_profile_settings_fields .print_profile_settings_ps_content .print_profile_settings_ps_content_middle .print_profile_settings_ps_content_fields{
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 18.4%;
}
.print_profile_settings .print_profile_settings_container .print_profile_settings_fields .print_profile_settings_ps_content .print_profile_settings_ps_content_middle .print_profile_settings_ps_content_fields input[type="number"]{
  width: 72% !important;
  height: 25px;
}
.print_profile_settings .print_profile_settings_container .print_profile_settings_fields .print_profile_settings_ps_content .print_profile_settings_ps_content_bottom{
  height: 50%;
}
/* printer tab */
.print_profile_settings_printer_container{
  display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}
.print_profile_settings_printer_container .print_profile_settings_printer_content{
  height: 30%;
    display: flex;
    flex-direction: column;
}
.print_profile_settings_printer_container .print_profile_settings_printer_content .print_profile_settings_printer_content_fields{
  display: flex;
    flex-direction: row;
    height: 50%;
    align-items: center;
    gap: 10px;
}
.print_profile_settings_printer_container .print_profile_settings_printer_content .print_profile_settings_printer_content_fields .print_profile_settings_printer_content_field{
  display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      gap: 6px;
}
.print_profile_settings_printer_container .print_profile_settings_printer_content .print_profile_settings_printer_content_fields .print_profile_settings_printer_content_field span{
  font-size: 14px;
  font-weight: 500;
  line-height: 16.8px;
}
.print_profile_settings_printer_container .print_profile_settings_printer_content .print_profile_settings_printer_content_fields .print_profile_settings_printer_content_field select{
  height: 32px;
  width: 100% !important;
}
.print_profile_settings_printer_container .print_profile_settings_printer_content .print_profile_settings_printer_content_fields .print_profile_settings_printer_content_field input[type='number']{
  height: 32px;
  width: 100% !important;
}
.print_profile_settings_printer_container .print_profile_settings_printer_content .print_profile_settings_printer_content_buttons{
  display: flex;
      align-items: center;
      flex-direction: row;
      justify-content: end;
      gap: 5px;
      height: 50%;
}
.print_profile_settings_printer_container .print_profile_settings_printer_content .print_profile_settings_printer_content_buttons button{
  background-color: var(--brand-color);
  color: #ffffff;
  padding: 4px 10px 4px 10px;
  border-radius: 4px;
  height: 32px;
  width: 150px;
}
.print_profile_settings_printer_container .print_profile_settings_printer_content_list{
  display: flex;
    flex-direction: column;
    height: 70%;
}
.print_profile_settings_printer_container .print_profile_settings_printer_content_list .print_profile_settings_printer_content_list_title{
  display: flex;
  align-items: center;
  flex-direction: row;
  height: 8%;
}
.print_profile_settings_printer_container .print_profile_settings_printer_content_list .print_profile_settings_printer_content_list_title span{
  font-size: 14px;
  font-weight: 500;
  line-height: 16.8px;
}
.print_profile_settings_printer_container .print_profile_settings_printer_content_list .print_profile_settings_printer_content_list_table{
  height: 92%;
  overflow-y:auto ;
  border: 1px solid #ccc;
  border-radius: 12px;
}
.print_profile_settings_printer_container .print_profile_settings_printer_content_list .print_profile_settings_printer_content_list_table::-webkit-scrollbar{
  width: 5px;
}
.print_profile_settings_printer_container .print_profile_settings_printer_content_list .print_profile_settings_printer_content_list_table th{
  position: sticky;
  top: 0;
  color: #202124;
  padding: 5px 5px !important;
  background: #EEEEEE;
  font-size: 14px !important;
  /* border: 1px solid #E4E4E4; */
  z-index: 100;
  display: table-cell !important;
  font-weight: 400;
  height: 48px;
  vertical-align: middle;
  line-height: 20px;
  letter-spacing: 0.1px;
  font-family:  'Poppins' ,Arial, Helvetica, sans-serif;;
}
.print_profile_settings_printer_container .print_profile_settings_printer_content_list .print_profile_settings_printer_content_list_table tr{
  border-bottom: 1px solid #E4E4E4;
}
.print_profile_settings_printer_container .print_profile_settings_printer_content_list .print_profile_settings_printer_content_list_table th:first-child{
  border-radius: 12px 0px 0px 0px;
}
.print_profile_settings_printer_container .print_profile_settings_printer_content_list .print_profile_settings_printer_content_list_table th:last-child{
  border-radius: 0px 12px 0px 0px;
}
.print_profile_settings_printer_container .print_profile_settings_printer_content_list .print_profile_settings_printer_content_list_table  td{
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color:#202124;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  padding: 6px !important;
  background: #FAFAFA;
  height: 48px;
  vertical-align: middle;
  line-height: 16px;
}

/* FTP Component Settings Popup Styles */
.ftp_component_settings {
  max-width: 650px !important;
  min-width: 650px !important;
  min-height: 600px !important;
  max-height: 750px !important;
  width: 650px !important;
  height: auto !important;
}

#popups .ftp_component_settings .dialog_content {
  overflow-y: auto !important;
  max-height: calc(80vh - 11rem) !important;
  padding: 0 !important;
  display: block !important;
  width: 100% !important;
}

#popups .ftp_component_settings .dialog_content table {
  width: 100%;
  border: none;
}

#popups .ftp_component_settings .dialog_content table tr {
  display: block !important;
  width: 100% !important;
}

#popups .ftp_component_settings .dialog_content table td {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  height: auto !important;
  vertical-align: top !important;
  display: block !important;
  width: 100% !important;
}

.ftp_component_settings_wrapper {
  width: 100%;
  display: block;
  box-sizing: border-box;
}

.ftp_component_settings_container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 15px;
  width: 100%;
  overflow-y: auto;
  max-height: calc(80vh - 12rem);
  box-sizing: border-box;
}

.ftp_component_settings_container::-webkit-scrollbar {
  width: 5px;
}

.ftp_component_settings_container::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.ftp_component_settings_container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

.ftp_settings_section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid #E4E4E4;
  border-radius: 4px;
  padding: 12px;
  background-color: #FAFAFA;
  box-sizing: border-box;
}

.ftp_checkbox_group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.ftp_checkbox_group input[type="checkbox"] {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: var(--brand-color);
  flex-shrink: 0;
}

.ftp_checkbox_group label {
  font-size: 13px;
  font-weight: 500;
  color: #202124;
  cursor: pointer;
  margin: 0;
  white-space: nowrap;
}

.ftp_content,
.shared_content,
.zip_content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: opacity 0.3s ease;
}

.ftp_field_group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  box-sizing: border-box;
}

.ftp_field_group label {
  font-size: 12px;
  font-weight: 500;
  color: #202124;
  line-height: 14px;
}

.ftp_field_group input[type="text"],
.ftp_field_group input[type="password"],
.ftp_field_group input[type="number"],
.ftp_field_group select {
  height: 32px;
  padding: 0 8px;
  border: 1px solid #D0D0D0;
  border-radius: 4px;
  font-size: 12px;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  background-color: #FFFFFF;
  color: #202124;
  box-sizing: border-box;
  width: 100%;
}

.ftp_field_group input[type="text"]:focus,
.ftp_field_group input[type="password"]:focus,
.ftp_field_group input[type="number"]:focus,
.ftp_field_group select:focus {
  outline: none;
  border-color: var(--brand-color);
  box-shadow: 0 0 0 2px rgba(var(--brand-color-rgb), 0.1);
}

.ftp_field_group input:disabled,
.ftp_field_group select:disabled {
  background-color: #F3F4F6;
  cursor: not-allowed;
  color: #9CA3AF;
}

.section_title {
  font-size: 13px;
  font-weight: 500;
  color: #202124;
  padding: 5px 0;
  display: block;
}

.ftp_radio_group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

.radio_item input[type="radio"] {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: var(--brand-color);
  flex-shrink: 0;
}

.radio_item label {
  font-size: 12px;
  font-weight: 400;
  color: #202124;
  cursor: pointer;
  margin: 0;
  line-height: 16px;
}

.ftp_main_toggle {
  margin-bottom: 5px;
}

#zip_password_group {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #E4E4E4;
}

#zip_password_group.ftp_field_group {
  display: flex;
}

#zip_password_group.ftp_field_group label {
  margin-bottom: 5px;
}

/* Disabled state styling */
.ftp_content[style*="pointer-events: none"],
.shared_content[style*="pointer-events: none"],
.zip_content[style*="pointer-events: none"] {
  color: #9CA3AF;
}

.ftp_content[style*="pointer-events: none"] input,
.ftp_content[style*="pointer-events: none"] select,
.shared_content[style*="pointer-events: none"] input,
.shared_content[style*="pointer-events: none"] select,
.zip_content[style*="pointer-events: none"] input,
.zip_content[style*="pointer-events: none"] select {
  background-color: #F3F4F6;
  cursor: not-allowed;
}

.ftp_content[style*="pointer-events: none"] label,
.shared_content[style*="pointer-events: none"] label,
.zip_content[style*="pointer-events: none"] label {
  color: #9CA3AF;
}

/* Control File Settings Styles */
.print_profile_settings_control_file_container {
  padding: 15px;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
}

.print_profile_settings_control_file_content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.print_profile_settings_control_file_section {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.print_profile_settings_control_file_section label {
  font-weight: 500;
  color: #202124;
  font-size: 13px;
}

.print_profile_settings_control_file_section input[type="text"],
.print_profile_settings_control_file_section textarea {
  padding: 8px;
  border: 1px solid #DADCE0;
  border-radius: 4px;
  font-size: 13px;
  font-family: Roboto, sans-serif;
}

.print_profile_settings_control_file_section textarea {
  min-height: 80px;
  resize: vertical;
}

.print_profile_settings_control_file_section input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--brand-color);
  cursor: pointer;
}

.print_profile_settings_control_file_section > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Modern Print Profile Wizard UI */
.print_profile_settings .print_profile_settings_container {
  gap: 14px;
}

.print_profile_settings .print_profile_settings_content {
  padding: 6px 4px 10px 4px;
}

.print_profile_settings .print_profile_settings_general_container,
.print_profile_settings .print_profile_settings_printer_container,
.print_profile_settings .print_profile_settings_control_file_container {
  gap: 14px;
  padding: 0;
}

.print_profile_settings .print_profile_settings_card {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border: 1px solid #dbe5f0;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(15, 70, 124, 0.06);
  padding: 16px;
}

.print_profile_settings .print_profile_settings_card_header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.print_profile_settings .print_profile_settings_card_header--compact {
  margin-bottom: 10px;
}

.print_profile_settings .print_profile_settings_card_title {
  font-size: 12px;
  font-weight: 500;
  color: #1f2f45;
  line-height: 1.3;
}

.print_profile_settings .print_profile_settings_card_subtitle {
  margin-top: 4px;
  font-size: 11px;
  color: #64748b;
  line-height: 1.45;
}

.print_profile_settings .print_profile_settings_profile_container,
.print_profile_settings .print_profile_settings_pcs_container {
  height: auto;
}

.print_profile_settings .print_profile_settings_ps_container {
  height: auto;
  min-height: 0;
}

.print_profile_settings .print_profile_settings_fields {
  gap: 10px;
}

.print_profile_settings .print_profile_settings_field,
.print_profile_settings .print_profile_settings_fields input[type='text'],
.print_profile_settings .print_profile_settings_fields select,
.print_profile_settings .print_profile_settings_fields input[type='number'],
.print_profile_settings .print_profile_settings_control_file_section input[type='text'],
.print_profile_settings .print_profile_settings_control_file_section textarea,
.print_profile_settings .print_profile_settings_printer_content_field select,
.print_profile_settings .print_profile_settings_printer_content_field input[type='number'] {
  width: 100% !important;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #d5deea;
  border-radius: 10px;
  background: #ffffff;
  color: #1f2937;
  font-size: 12px;
  font-weight: 400;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.print_profile_settings .print_profile_settings_fields select option,
.print_profile_settings .print_profile_settings_printer_content_field select option {
  font-size: 12px;
  font-weight: 400;
}

.print_profile_settings .print_profile_settings_control_file_section textarea {
  min-height: 110px;
}

.print_profile_settings .print_profile_settings_field:focus,
.print_profile_settings .print_profile_settings_fields input[type='text']:focus,
.print_profile_settings .print_profile_settings_fields select:focus,
.print_profile_settings .print_profile_settings_fields input[type='number']:focus,
.print_profile_settings .print_profile_settings_control_file_section input[type='text']:focus,
.print_profile_settings .print_profile_settings_control_file_section textarea:focus,
.print_profile_settings .print_profile_settings_printer_content_field select:focus,
.print_profile_settings .print_profile_settings_printer_content_field input[type='number']:focus {
  border-color: #7ea3cb;
  box-shadow: 0 0 0 3px rgba(15, 70, 124, 0.12);
  outline: none;
}

.print_profile_settings .print_profile_settings_field:disabled {
  background: #f6f8fb;
  color: #64748b;
}

.print_profile_settings .print_profile_settings_ps_content {
  gap: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px;
  background: #f8fbff;
}

.print_profile_settings .print_profile_settings_toggle_grid,
.print_profile_settings .print_profile_settings_control_flags {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.print_profile_settings .print_profile_settings_toggle_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #e3ebf4;
  border-radius: 10px;
  background: #ffffff;
  color: #526376;
  font-size: 11px;
  font-weight: 400;
}

.print_profile_settings .print_profile_settings_toggle_item input[type='radio'] {
  width: 16px;
  height: 16px;
  accent-color: var(--brand-color);
  margin: 0;
  flex-shrink: 0;
}

.print_profile_settings .print_profile_settings_toggle_item input[type='checkbox'] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.print_profile_settings .print_profile_settings_toggle_item span {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.3;
  font-weight: 400;
  font-size: 11px;
}

.print_profile_settings .print_profile_settings_toggle_item input[type='checkbox'] + span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  position: relative;
  padding-right: 48px;
}

.print_profile_settings .print_profile_settings_toggle_item input[type='checkbox'] + span::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: #d2dce8;
  border: 1px solid #c6d3e0;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.print_profile_settings .print_profile_settings_toggle_item input[type='checkbox'] + span::before {
  content: '';
  position: absolute;
  right: 18px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
  transform: translateY(-50%);
  transition: right 0.15s ease, background 0.15s ease;
  z-index: 1;
}

.print_profile_settings .print_profile_settings_toggle_item input[type='checkbox']:checked + span::after {
  background: #0f467c;
  border-color: #0f467c;
}

.print_profile_settings .print_profile_settings_toggle_item input[type='checkbox']:checked + span::before {
  right: 4px;
}

.print_profile_settings .print_profile_settings_toggle_item input[type='checkbox']:focus + span::after {
  box-shadow: 0 0 0 3px rgba(15, 70, 124, 0.14);
}

.print_profile_settings .print_profile_settings_inline_grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.print_profile_settings .print_profile_settings_field_group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.print_profile_settings .print_profile_settings_field_group--wide {
  grid-column: span 2;
}

.print_profile_settings .print_profile_settings_field_group--full {
  grid-column: 1 / -1;
}

.print_profile_settings .print_profile_settings_choice_group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.print_profile_settings .print_profile_settings_choice_item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #dbe5f0;
  border-radius: 999px;
  background: #ffffff;
  font-size: 11px;
  font-weight: 400;
  color: #425466;
}

.print_profile_settings .print_profile_settings_fields .print_profile_settings_fields_actions {
  gap: 10px;
}

.print_profile_settings .print_profile_settings_fields .print_profile_settings_fields_actions select {
  width: calc(100% - 54px) !important;
}

.print_profile_settings .print_profile_settings_icon_button,
.print_profile_settings .print_profile_settings_container .print_profile_settings_fields .print_profile_settings_fields_actions button {
  width: 44px !important;
  min-width: 44px;
  height: 44px;
  border: 1px solid #cfd9e6;
  border-radius: 10px;
  background: #f7faff url(images/icons/configuration_ic.png) no-repeat center center;
  cursor: pointer;
}

.print_profile_settings .print_profile_settings_icon_button:hover,
.print_profile_settings .print_profile_settings_container .print_profile_settings_fields .print_profile_settings_fields_actions button:hover {
  background-color: #e8f0fb;
  border-color: #a9bfd9;
}

.print_profile_settings .print_profile_settings_printer_content {
  height: auto;
  gap: 14px;
}

.print_profile_settings .print_profile_settings_printer_content .print_profile_settings_printer_content_fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  height: auto;
  align-items: stretch;
}

.print_profile_settings .print_profile_settings_printer_content .print_profile_settings_printer_content_field {
  height: auto;
  gap: 8px;
}

.print_profile_settings .print_profile_settings_printer_content .print_profile_settings_printer_content_buttons {
  justify-content: flex-end;
  height: auto;
  gap: 10px;
}

.print_profile_settings .print_profile_settings_printer_content .print_profile_settings_printer_content_buttons button {
  min-width: 148px;
  width: auto;
  height: 38px;
  border: 1px solid #0f467c;
  border-radius: 9px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.print_profile_settings .print_profile_settings_printer_content .print_profile_settings_printer_content_buttons button:first-child {
  background: #0f467c;
  color: #ffffff;
}

.print_profile_settings .print_profile_settings_printer_content .print_profile_settings_printer_content_buttons button:first-child:hover {
  background: #0d3d6e;
}

.print_profile_settings .print_profile_settings_printer_content .print_profile_settings_printer_content_buttons button:last-child {
  background: #ffffff;
  color: #0f467c;
  border-color: #b8c9db;
}

.print_profile_settings .print_profile_settings_printer_content .print_profile_settings_printer_content_buttons button:last-child:hover {
  background: #eef4fb;
}

.print_profile_settings .print_profile_settings_printer_content_list {
  height: auto;
  min-height: 0;
  gap: 0;
}

.print_profile_settings .print_profile_settings_list_card {
  flex: 1 1 auto;
}

.print_profile_settings .print_profile_settings_printer_content_list .print_profile_settings_printer_content_list_table {
  min-height: 220px;
  height: auto;
  background: #ffffff;
  border-color: #dbe5f0;
}

.print_profile_settings .print_profile_settings_printer_content_list .print_profile_settings_printer_content_list_table td {
  background: #ffffff;
}

.print_profile_settings .print_profile_settings_control_file_container {
  overflow: visible;
}

.print_profile_settings .print_profile_settings_control_file_content {
  gap: 14px;
}

@media (max-width: 900px) {
  .print_profile_settings .print_profile_settings_inline_grid,
  .print_profile_settings .print_profile_settings_printer_content .print_profile_settings_printer_content_fields {
    grid-template-columns: 1fr;
  }

  .print_profile_settings .print_profile_settings_field_group--wide {
    grid-column: auto;
  }
}
/* Print Profile Preview Modal */
#popups .print_profile_preview {
  max-width: 900px !important;
  min-width: 900px !important;
  width: 900px !important;
  max-height: 80vh !important;
  height: 80vh !important;
  min-height: 600px !important;
}

#popups .print_profile_preview .dialog_content {
  max-height: calc(80vh - 120px) !important;
  height: calc(80vh - 120px) !important;
  overflow-y: auto !important;
}
.profile-step-wizard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: auto;
  max-height: calc(100vh - 230px);
  min-height: 0;
  background: #fff;
  border: 1px solid #dfe6ef;
  border-radius: 5px;
  padding: 10px;
  box-sizing: border-box;
}

.profile-step-wizard__steps {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
  flex-wrap: nowrap;
  padding: 2px 0;
  width: 100%;
}

.profile-step-wizard__step {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent;
  color: #a8baca;
  padding: 0 0 4px 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  position: relative;
  flex: 1;
  min-width: 0;
  text-align: center;
}

.profile-step-wizard__step:hover,
.profile-step-wizard__step:focus,
.profile-step-wizard__step:active {
  background: transparent !important;
  box-shadow: none;
  outline: none;
}

/* Incoming connector: left cell-edge → left edge of circle.
   top: 11px = half of 22px circle, so line runs through the circle centre. */
.profile-step-wizard__step::before {
  content: '';
  position: absolute;
  top: 11px;
  transform: none;
  left: 0;
  right: calc(50% + 11px);
  height: 2px;
  background: #d4dde9;
  z-index: 0;
}

/* Outgoing connector: right edge of circle → right cell-edge */
.profile-step-wizard__step::after {
  content: '';
  position: absolute;
  top: 11px;
  transform: none;
  left: calc(50% + 11px);
  right: 0;
  height: 2px;
  background: #d4dde9;
  z-index: 0;
}

/* First step has no incoming line — !important wins over is-complete override */
.profile-step-wizard__step:first-child::before {
  display: none !important;
}

.profile-step-wizard__step.is-first-visible::before {
  display: none !important;
}

/* Last step has no outgoing line — !important wins over is-complete override */
.profile-step-wizard__step:last-child::after {
  display: none !important;
}

/* Completed step: both incoming and outgoing lines are highlighted */
.profile-step-wizard__step.is-complete::before,
.profile-step-wizard__step.is-complete::after {
  background: #0F467C;
}

/* Active step: incoming line is highlighted (we arrived), outgoing stays pale */
.profile-step-wizard__step.is-active::before {
  background: #0F467C;
}

.profile-step-wizard__step.is-active::after {
  background: #d4dde9;
}

.profile-step-wizard__step.is-active,
.profile-step-wizard__step[aria-current='step'] {
  color: #0F467C;
  background: transparent !important;
  font-weight: 700;
}

.profile-step-wizard__step.is-complete {
  color: #1f4f8f;
  font-weight: 600;
}

.profile-step-wizard__step-index {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #c8d8e8;
  background: #f0f4f9;
  color: #a0b4c8;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.profile-step-wizard__step.is-complete .profile-step-wizard__step-index {
  background: #1f4f8f;
  border-color: #1f4f8f;
  color: #fff;
}

.profile-step-wizard__step.is-active .profile-step-wizard__step-index {
  background: #0F467C;
  border-color: #0F467C;
  color: #fff;
}

.profile-step-wizard__step-label {
  font-size: 12px;
  line-height: 1.25;
  color: inherit;
  position: relative;
  z-index: 1;
  background: transparent;
  padding: 0;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.profile-step-wizard__content {
  flex: 0 1 auto;
  min-height: 0;
  overflow: auto;
  max-height: calc(100vh - 380px);
  padding: 4px 8px 8px 8px;
  scrollbar-width: thin;
  scrollbar-color: #9fb2c9 #eef3f8;
}

.profile-step-wizard__panel {
  display: none;
  min-width: 0;
  width: 100%;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
}

/* .profile-step-wizard__section-head {
	padding: 2px 2px 8px 2px;
} */

.profile-step-wizard__section-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #1f2f45;
}

.profile-step-wizard__section-head p {
  margin: 4px 0 0 0;
  font-size: 12px;
  color: #5f7187;
}

.profile-step-wizard__footer {
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid #e2e8f0;
  padding: 12px 4px 8px 4px;
  position: relative;
  background: #fff;
  z-index: 1;
  flex-shrink: 0;
  min-height: 56px;
}

.profile-step-wizard__nav-btn {
  border: 1px solid #cfd9e6;
  background: #f7faff;
  color: #222;
  border-radius: 5px;
  min-width: 112px;
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.profile-step-wizard__nav-btn:hover:not(:disabled) {
  background: #e6edf8;
  border-color: #b0c4dc;
}

.profile-step-wizard__footer .profile-step-wizard__nav-btn:first-child {
  margin-right: auto;
}

.profile-step-wizard__nav-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.profile-step-wizard__nav-btn--primary {
  background: #0F467C;
  border-color: #0F467C;
  color: #fff;
}

.profile-step-wizard__nav-btn--primary:hover:not(:disabled) {
  background: #0d3d6e;
  border-color: #0d3d6e;
}

#popups>.new_mail>.buttons,
#popups>.smssettings>.buttons,
#popups>.whatsappsettings>.buttons,
#popups>.print_profile_settings>.buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 56px;
  height: auto;
  padding: 8px 14px;
  line-height: normal;
}

#popups>.new_mail>.buttons>button,
#popups>.smssettings>.buttons>button,
#popups>.whatsappsettings>.buttons>button,
#popups>.print_profile_settings>.buttons>button {
  min-width: 92px;
}

#popups .new_mail .dialog_content,
#popups .smssettings .dialog_content,
#popups .whatsappsettings .dialog_content,
#popups .print_profile_settings .dialog_content {
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100vh - 172px) !important;
  padding: 12px 16px 12px 16px !important;
  box-sizing: border-box;
}

#popups .new_mail [data-id='params_content'],
#popups .smssettings [data-id='params_content'],
#popups .whatsappsettings [data-id='params_content'],
#popups .print_profile_settings [data-id='params_content'] {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-height: 0 !important;
  overflow: visible !important;
  width: 100%;
}

#popups .new_mail .profile-step-wizard,
#popups .smssettings .profile-step-wizard,
#popups .whatsappsettings .profile-step-wizard,
#popups .print_profile_settings .profile-step-wizard {
  flex: 0 1 auto;
  min-height: 0;
}

#popups .new_mail .profile-step-wizard__panel td,
#popups .new_mail .profile-step-wizard__panel th {
  height: auto !important;
  line-height: normal !important;
  vertical-align: middle;
}

#popups>.new_mail,
#popups>.smssettings,
#popups>.whatsappsettings,
#popups>.print_profile_settings {
  top: 4vh !important;
  width: min(860px, calc(100vw - 32px)) !important;
  max-width: min(860px, calc(100vw - 32px)) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: calc(100vh - 32px) !important;
  height: auto !important;
  padding-bottom: 4.5rem !important;
}

#popups>.new_mail {
  top: 11vh !important;
}

#popups .new_mail .new_mail_container,
#popups .smssettings .sms_settings_div,
#popups .whatsappsettings .wa_settings_modal,
#popups .print_profile_settings .print_profile_settings_container {
  display: flex;
  flex-direction: column;
  height: auto !important;
  min-height: 0 !important;
  width: 100%;
}

#popups .new_mail .dialog_content,
#popups .smssettings .dialog_content,
#popups .whatsappsettings .dialog_content,
#popups .print_profile_settings .dialog_content,
#popups .new_mail [data-id='params_content'],
#popups .smssettings [data-id='params_content'],
#popups .whatsappsettings [data-id='params_content'],
#popups .print_profile_settings [data-id='params_content'],
#popups .new_mail .profile-step-wizard__content,
#popups .smssettings .profile-step-wizard__content,
#popups .whatsappsettings .profile-step-wizard__content,
#popups .print_profile_settings .profile-step-wizard__content {
  scrollbar-width: thin;
  scrollbar-color: #9fb2c9 #eef3f8;
}

#popups .new_mail .dialog_content::-webkit-scrollbar,
#popups .smssettings .dialog_content::-webkit-scrollbar,
#popups .whatsappsettings .dialog_content::-webkit-scrollbar,
#popups .print_profile_settings .dialog_content::-webkit-scrollbar,
#popups .new_mail .profile-step-wizard__content::-webkit-scrollbar,
#popups .smssettings .profile-step-wizard__content::-webkit-scrollbar,
#popups .whatsappsettings .profile-step-wizard__content::-webkit-scrollbar,
#popups .print_profile_settings .profile-step-wizard__content::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

#popups .new_mail .dialog_content::-webkit-scrollbar-track,
#popups .smssettings .dialog_content::-webkit-scrollbar-track,
#popups .whatsappsettings .dialog_content::-webkit-scrollbar-track,
#popups .print_profile_settings .dialog_content::-webkit-scrollbar-track,
#popups .new_mail .profile-step-wizard__content::-webkit-scrollbar-track,
#popups .smssettings .profile-step-wizard__content::-webkit-scrollbar-track,
#popups .whatsappsettings .profile-step-wizard__content::-webkit-scrollbar-track,
#popups .print_profile_settings .profile-step-wizard__content::-webkit-scrollbar-track {
  background: #eef3f8;
  border-radius: 8px;
}

#popups .new_mail .dialog_content::-webkit-scrollbar-thumb,
#popups .smssettings .dialog_content::-webkit-scrollbar-thumb,
#popups .whatsappsettings .dialog_content::-webkit-scrollbar-thumb,
#popups .print_profile_settings .dialog_content::-webkit-scrollbar-thumb,
#popups .new_mail .profile-step-wizard__content::-webkit-scrollbar-thumb,
#popups .smssettings .profile-step-wizard__content::-webkit-scrollbar-thumb,
#popups .whatsappsettings .profile-step-wizard__content::-webkit-scrollbar-thumb,
#popups .print_profile_settings .profile-step-wizard__content::-webkit-scrollbar-thumb {
  background: #9fb2c9;
  border-radius: 8px;
  border: 2px solid #eef3f8;
}

#popups .new_mail .dialog_content::-webkit-scrollbar-thumb:hover,
#popups .smssettings .dialog_content::-webkit-scrollbar-thumb:hover,
#popups .whatsappsettings .dialog_content::-webkit-scrollbar-thumb:hover,
#popups .print_profile_settings .dialog_content::-webkit-scrollbar-thumb:hover,
#popups .new_mail .profile-step-wizard__content::-webkit-scrollbar-thumb:hover,
#popups .smssettings .profile-step-wizard__content::-webkit-scrollbar-thumb:hover,
#popups .whatsappsettings .profile-step-wizard__content::-webkit-scrollbar-thumb:hover,
#popups .print_profile_settings .profile-step-wizard__content::-webkit-scrollbar-thumb:hover {
  background: #8ea6c1;
}

/* Dashboard Action Layout Consistency */
.sms_settings_container .sms_settings_actions,
.print_settings_container .print_settings_actions,
.wa_settings_container .wa_settings_actions,
.create_profile_div {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
}

/* Dashboard Search Component */
.dashboard-search-container {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  max-width: 300px;
  margin-right: 12px;
}

.dashboard-search-input {
  width: 100% !important;
  padding: 8px 32px 8px 32px !important;
  font-size: 13px;
  border: 1px solid #dcdcdc !important;
  border-radius: 5px !important;
  outline: none;
  transition: all 0.3s ease;
  background: #ffffff !important;
  color: #333 !important;
  box-sizing: border-box;
}

.dashboard-search-input:focus {
  border-color: #0f467c !important;
  box-shadow: 0 0 0 3px rgba(15, 70, 124, 0.15) !important;
}

.dashboard-search-icon {
  position: absolute;
  left: 12px;
  display: flex;
  align-items: center;
  color: #888;
  pointer-events: none;
  z-index: 2;
}

.dashboard-search-clear {
  position: absolute;
  right: 12px;
  display: none;
  align-items: center;
  justify-content: center;
  color: #888;
  cursor: pointer;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transition: background-color 0.2s ease, color 0.2s ease;
  z-index: 2;
}

.dashboard-search-clear:hover {
  background-color: #f0f0f0;
  color: #333;
}

/* Dashboard Clone Icons styling */
.sms_settings_icons .clone_sms_settings,
.profile_actions_div .clone_mail_settings,
.print_settings_icons .clone_print_settings,
.wa_settings_icons .clone_wa_settings {
  background-image: url("images/icons/clone_icon.svg") !important;
}

.sms_settings_icons .clone_sms_settings:hover,
.profile_actions_div .clone_mail_settings:hover,
.print_settings_icons .clone_print_settings:hover,
.wa_settings_icons .clone_wa_settings:hover {
  background-color: #dbe5f0 !important;
}

/* Pagination Controls */
.profile-pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background-color: #f8fafc;
  border-top: 1px solid #e2e8f0;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #475569;
}

.profile-pagination-info {
  font-weight: 500;
}

.profile-pagination-info span {
  font-weight: 600;
  color: #0F467C;
}

.profile-pagination-buttons {
  display: flex;
  gap: 4px;
}

.profile-pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background-color: #ffffff;
  color: #475569;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.15s ease;
  user-select: none;
}

.profile-pagination-btn:hover:not(:disabled) {
  border-color: #0F467C;
  color: #0F467C;
  background-color: #f1f5f9;
}

.profile-pagination-btn:disabled {
  background-color: #f1f5f9;
  color: #94a3b8;
  border-color: #e2e8f0;
  cursor: not-allowed;
}

.profile-pagination-btn.active {
  background-color: #0F467C !important;
  border-color: #0F467C !important;
  color: #ffffff !important;
  font-weight: 600;
}

/* Row Highlight Animation */
@keyframes highlight-fade {
  0% {
    background-color: rgba(15, 70, 124, 0.25);
  }

  100% {
    background-color: transparent;
  }
}

.highlight-new-profile {
  animation: highlight-fade 2s ease-out forwards;
}

/* =============================================================================
   PROFILE DASHBOARD DESIGN SYSTEM  —  Mail · SMS · Print · WhatsApp
   Shared tokens, layout, table, controls, pagination — one source of truth.
   ============================================================================= */

/* ── 1. POPUP CONTAINER ──────────────────────────────────────────────────── */

#popups .popup.mail_Setting,
#popups .popup.sms_dashboard,
#popups .popup.print_settings,
#popups .popup.whatsappsettings_dashboard {
  width: 780px !important;
  min-width: 780px !important;
  max-width: 780px !important;
  height: 560px !important;
  min-height: 560px !important;
  max-height: 560px !important;
  border-radius: 8px !important;
  border: 1px solid #dde3ea !important;
  background: #ffffff !important;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18), 0 0 0 4000px rgba(15, 23, 42, 0.35) !important;
  overflow: hidden !important;
  padding: 56px 0 58px 0 !important;
  /* 56px top header, 58px footer for pagination */
  font-family: 'Inter', 'Poppins', system-ui, sans-serif !important;
  box-sizing: border-box !important;
}

/* ── 2. POPUP TITLE BAR & CLOSE BUTTON ── */

#popups .popup.mail_Setting h2,
#popups .popup.sms_dashboard h2,
#popups .popup.print_settings h2,
#popups .popup.whatsappsettings_dashboard h2 {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 56px !important;
  line-height: 56px !important;
  padding: 0 24px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e8edf3 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  z-index: 1 !important;
}

#popups .popup.mail_Setting .close,
#popups .popup.sms_dashboard .close,
#popups .popup.print_settings .close,
#popups .popup.whatsappsettings_dashboard .close {
  position: absolute !important;
  top: 14px !important;
  right: 18px !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #64748b !important;
  background-color: transparent !important;
  border: none !important;
  transition: background-color 0.15s, color 0.15s !important;
  opacity: 1 !important;
  margin: 0 !important;
  z-index: 2 !important;
}

#popups .popup.mail_Setting .close:hover,
#popups .popup.sms_dashboard .close:hover,
#popups .popup.print_settings .close:hover,
#popups .popup.whatsappsettings_dashboard .close:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

/* ── 3. POPUP CONTENT AREA ── */

#popups .popup.mail_Setting .dialog_content,
#popups .popup.sms_dashboard .dialog_content,
#popups .popup.print_settings .dialog_content,
#popups .popup.whatsappsettings_dashboard .dialog_content {
  position: absolute !important;
  top: 56px !important;
  bottom: 58px !important;
  left: 0 !important;
  right: 0 !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: #f8fafc !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

/* ── 4. POPUP FOOTER BUTTONS ── */

#popups .popup.mail_Setting .buttons,
#popups .popup.sms_dashboard .buttons,
#popups .popup.print_settings .buttons,
#popups .popup.whatsappsettings_dashboard .buttons {
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  background: transparent !important;
  border-top: none !important;
  height: 58px !important;
  bottom: 0 !important;
  position: absolute !important;
}

#popups .popup.mail_Setting .buttons button[data-id="popup_cancel"],
#popups .popup.mail_Setting .buttons button[data-id="popup_ok"],
#popups .popup.sms_dashboard .buttons button[data-id="popup_cancel"],
#popups .popup.sms_dashboard .buttons button[data-id="popup_ok"],
#popups .popup.print_settings .buttons button[data-id="popup_cancel"],
#popups .popup.print_settings .buttons button[data-id="popup_ok"],
#popups .popup.whatsappsettings_dashboard .buttons button[data-id="popup_cancel"],
#popups .popup.whatsappsettings_dashboard .buttons button[data-id="popup_ok"] {
  display: none !important;
}



#popups .popup.mail_Setting .buttons button:hover,
#popups .popup.sms_dashboard .buttons button:hover,
#popups .popup.print_settings .buttons button:hover,
#popups .popup.whatsappsettings_dashboard .buttons button:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

#popups .popup.mail_Setting .buttons button[name="primary"],
#popups .popup.sms_dashboard .buttons button[name="primary"],
#popups .popup.print_settings .buttons button[name="primary"],
#popups .popup.whatsappsettings_dashboard .buttons button[name="primary"] {
  background: #0f467c !important;
  color: #ffffff !important;
  border-color: #0f467c !important;
}

#popups .popup.mail_Setting .buttons button[name="primary"]:hover,
#popups .popup.sms_dashboard .buttons button[name="primary"]:hover,
#popups .popup.print_settings .buttons button[name="primary"]:hover,
#popups .popup.whatsappsettings_dashboard .buttons button[name="primary"]:hover {
  background: #0d3d6e !important;
  border-color: #0d3d6e !important;
}

/* ── 5. INNER DASHBOARD WRAPPERS ── */

.sms_settings_container,
.print_settings_container,
.wa_settings_container {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  width: 100% !important;
  padding: 16px 20px 0 20px !important;
  box-sizing: border-box !important;
  background: #f8fafc !important;
  gap: 12px !important;
  overflow: hidden !important;
}

.mail_Settings_1 {
  display: contents !important;
}

/* ── 6. ACTION BAR (Search + Add Button) ─────────────────────────────────── */

.mail_Settings_1>#General>.create_profile_div,
.sms_settings_actions,
.print_settings_actions,
.wa_settings_actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex: 0 0 auto !important;
}

/* empty-state variant — only show Add button centered */
.sms_settings_actions_on_empty,
.wa_settings_actions_on_empty {
  justify-content: flex-end !important;
}

/* ── 7. SEARCH INPUT ─────────────────────────────────────────────────────── */

.dashboard-search-container {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
  max-width: 300px !important;
}

.dashboard-search-input {
  width: 100% !important;
  height: 36px !important;
  padding: 0 32px 0 36px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  outline: none !important;
  background: #ffffff !important;
  color: #0f172a !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  box-sizing: border-box !important;
}

.dashboard-search-input::placeholder {
  color: #94a3b8 !important;
}

.dashboard-search-input:focus {
  border-color: #0f467c !important;
  box-shadow: 0 0 0 3px rgba(15, 70, 124, 0.12) !important;
}

.dashboard-search-icon {
  position: absolute !important;
  left: 11px !important;
  display: flex !important;
  align-items: center !important;
  color: #94a3b8 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.dashboard-search-clear {
  position: absolute !important;
  right: 9px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  transition: background 0.15s, color 0.15s !important;
  z-index: 1 !important;
}

.dashboard-search-clear:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

/* ── 8. ADD PROFILE BUTTONS ──────────────────────────────────────────────── */

#sms_add_profile_modal_btn,
#new_mail,
#add_print_profile,
#wa_new_profile {
  flex: 0 0 auto !important;
  height: 36px !important;
  padding: 0 16px !important;
  border-radius: 6px !important;
  border: none !important;
  background: #0f467c !important;
  color: #ffffff !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  box-shadow: 0 1px 3px rgba(15, 70, 124, 0.25) !important;
  margin: 0 !important;
}

#sms_add_profile_modal_btn:hover,
#new_mail:hover,
#add_print_profile:hover,
#wa_new_profile:hover {
  background: #0d3d6e !important;
}

/* ── 9. TABLE CARD WRAPPER ───────────────────────────────────────────────── */

.mail_profiles_div,
.sms_settings_content,
.print_settings_content,
.wa_settings_content {
  flex: 1 1 auto !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
  min-height: 0 !important;
}

/* inner scroll for the tbody only */
.mail_profiles_div,
.sms_settings_content,
.print_settings_content,
.wa_settings_content {
  overflow-y: auto !important;
}

/* ── 10. TABLE STRUCTURE ─────────────────────────────────────────────────── */

.mail_profiles_div_table,
.sms_settings_content table,
.print_settings_content table,
.wa_settings_content table,
.wa_settings_table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-family: inherit !important;
  font-size: 13px !important;
  table-layout: fixed !important;
  display: table !important;
}

/* thead sticky */
.mail_profiles_div_table thead,
.sms_settings_content table thead,
.print_settings_content table thead,
.wa_settings_content table thead {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
}

/* TH */
#popups .popup .dialog_content .mail_profiles_div_table th,
#popups .popup .dialog_content .mail_profiles_div_table_th,
#popups .popup .dialog_content .sms_settings_content table th,
#popups .popup .dialog_content .print_settings_content table th,
#popups .popup .dialog_content .wa_settings_content table th {
  background: #f1f5f9 !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  padding: 10px 16px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  height: auto !important;
  line-height: normal !important;
  display: table-cell !important;
  position: static !important;
}

/* TD */
#popups .popup .dialog_content .mail_profiles_div_table td,
#popups .popup .dialog_content .mail_profiles_div_table_td,
#popups .popup .dialog_content .sms_settings_content table td,
#popups .popup .dialog_content .print_settings_content table td,
#popups .popup .dialog_content .wa_settings_content table td {
  padding: 0 16px !important;
  height: 46px !important;
  color: #334155 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  background: transparent !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#popups .popup .mail_profiles_div_table tr:last-child td,
#popups .popup .sms_settings_content table tr:last-child td,
#popups .popup .print_settings_content table tr:last-child td,
#popups .popup .wa_settings_content table tr:last-child td {
  border-bottom: none !important;
}

#popups .popup .mail_profiles_div_table tbody tr:hover td,
#popups .popup .sms_settings_content table tbody tr:hover td,
#popups .popup .print_settings_content table tbody tr:hover td,
#popups .popup .wa_settings_content table tbody tr:hover td {
  background: #f8fafc !important;
}

/* Profile name column — takes up remaining width */
#popups .popup .dialog_content .mail_profiles_div_table td:first-child,
#popups .popup .dialog_content .sms_settings_content table td:first-child,
#popups .popup .dialog_content .print_settings_content table td:first-child,
#popups .popup .dialog_content .wa_settings_content table td:first-child {
  font-weight: 500 !important;
  color: #1e293b !important;
}

/* Actions column — fixed width */
#popups .popup .dialog_content .mail_profiles_div_table td:last-child,
#popups .popup .dialog_content .sms_settings_content table td:last-child,
#popups .popup .dialog_content .print_settings_content table td:last-child,
#popups .popup .dialog_content .wa_settings_content table td:last-child {
  width: 130px !important;
  text-align: right !important;
}

/* ── 11. ACTION ICON GROUPS ────────────────────────────────────────────────── */

.profile_actions_div,
.sms_settings_icons,
.print_settings_icons,
.wa_settings_icons {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  width: 100% !important;
}

/* ── Base icon button — use background-COLOR so SVG background-image shows through ── */
.profile_actions_div .mail_profile_icon,
.sms_settings_icons i,
.print_settings_icons i,
.wa_settings_icons i {
  display: inline-block !important;
  width: 30px !important;
  height: 30px !important;
  background-color: #f0f4f8 !important;
  /* background-color only — does NOT override background-image */
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
}

.profile_actions_div .mail_profile_icon:hover,
.sms_settings_icons i:hover,
.print_settings_icons i:hover,
.wa_settings_icons i:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
}

/* ── Edit icon — inline SVG (pencil) ── */
.edit_sms_settings,
.edit_wa_settings,
.edit_print_settings,
.edit_profile_config {
  background-image: url("images/icons/edit_icon.svg") !important;
}

.edit_sms_settings:hover,
.edit_wa_settings:hover,
.edit_print_settings:hover,
.edit_profile_config:hover {
  background-color: #dbeafe !important;
  border-color: #93c5fd !important;
}

/* ── Clone icon — inline SVG (copy) ── */
.clone_sms_settings,
.clone_wa_settings,
.clone_print_settings,
.clone_mail_settings {
  background-image: url("images/icons/clone_icon.svg") !important;
}

.clone_sms_settings:hover,
.clone_wa_settings:hover,
.clone_print_settings:hover,
.clone_mail_settings:hover {
  background-color: #e0e7ff !important;
  border-color: #a5b4fc !important;
}

/* ── Delete icon — inline SVG (trash) ── */
.delete_sms_settings,
.delete_wa_settings,
.delete_print_settings,
.delete_profile_config {
  background-image: url("images/icons/delete_icon.svg") !important;
}

.delete_sms_settings:hover,
.delete_wa_settings:hover,
.delete_print_settings:hover,
.delete_profile_config:hover {
  background-color: #fee2e2 !important;
  border-color: #fca5a5 !important;
}

/* ── Print icon — inline SVG (printer) ── */
.print_profile {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f467c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 6 2 18 2 18 9'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8'/%3E%3C/svg%3E") !important;
}

.print_profile:hover {
  background-color: #dcfce7 !important;
  border-color: #86efac !important;
}

/* ── Mail icon — inline SVG (envelope) ── */
.mail_body_config {
  background-image: url("images/icons/mail_icon.svg") !important;
}

.mail_body_config:hover {
  background-color: #dbeafe !important;
  border-color: #93c5fd !important;
}

/* ── 12. EMPTY STATE ────────────────────────────────────────────────────── */

.noProfiles_div {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  gap: 8px !important;
  color: #94a3b8 !important;
  font-size: 14px !important;
}

/* ── HIDE MAIL LEGACY DUPLICATE TABLE ──────────────────────────────────── */
/* The #mail_profiles_div (with id) is the legacy Profile Name/Creation Date/Status panel */
#mail_profiles_div {
  display: none !important;
}

/* ── MODULE-LEVEL POPUP SIZE OVERRIDES (smssettings.css / whatsappsettings.css fight our sizes) ── */

#popups .sms_dashboard,
#popups .whatsappsettings_dashboard,
#popups .print_settings {
  max-width: 780px !important;
  min-width: 780px !important;
  width: 780px !important;
  max-height: 560px !important;
  min-height: 560px !important;
  height: 560px !important;
  padding: 56px 0 58px 0 !important;
}

#popups .popup.sms_dashboard .dialog_content,
#popups .popup.whatsappsettings_dashboard .dialog_content,
#popups .popup.print_settings .dialog_content,
#popups .popup.mail_Setting .dialog_content {
  /*height: 100% !important;*/
  max-height: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Bypass popup.js table wrappers to allow flex layout propagation */
#popups .popup.sms_dashboard .dialog_content>div,
#popups .popup.sms_dashboard .dialog_content>div>table,
#popups .popup.sms_dashboard .dialog_content>div>table>tbody,
#popups .popup.sms_dashboard .dialog_content>div>table>tbody>tr,
#popups .popup.sms_dashboard .dialog_content>div>table>tbody>tr>td.html_value,
#popups .popup.whatsappsettings_dashboard .dialog_content>div,
#popups .popup.whatsappsettings_dashboard .dialog_content>div>table,
#popups .popup.whatsappsettings_dashboard .dialog_content>div>table>tbody,
#popups .popup.whatsappsettings_dashboard .dialog_content>div>table>tbody>tr,
#popups .popup.whatsappsettings_dashboard .dialog_content>div>table>tbody>tr>td.html_value,
#popups .popup.print_settings .dialog_content>div,
#popups .popup.print_settings .dialog_content>div>table,
#popups .popup.print_settings .dialog_content>div>table>tbody,
#popups .popup.print_settings .dialog_content>div>table>tbody>tr,
#popups .popup.print_settings .dialog_content>div>table>tbody>tr>td.html_value,
#popups .popup.mail_Setting .dialog_content>div,
#popups .popup.mail_Setting .dialog_content>div>table,
#popups .popup.mail_Setting .dialog_content>div>table>tbody,
#popups .popup.mail_Setting .dialog_content>div>table>tbody>tr,
#popups .popup.mail_Setting .dialog_content>div>table>tbody>tr>td.html_value {
  display: contents !important;
}

/* ── 13. PAGINATION FOOTER ────────────────────────────────────────────── */

.profile-pagination-container {
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 16px !important;
  background: #f1f5f9 !important;
  border-top: 1px solid #e2e8f0 !important;
  font-family: inherit !important;
  font-size: 12px !important;
  color: #64748b !important;
  box-sizing: border-box !important;
  height: 100% !important;
  width: 100% !important;
}

.profile-pagination-left {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.profile-pagination-right {
  display: flex !important;
  align-items: center !important;
}

.profile-pagination-info {
  font-weight: 400 !important;
  color: #64748b !important;
  white-space: nowrap !important;
}

.profile-pagination-info span {
  font-weight: 600 !important;
  color: #334155 !important;
}

.profile-pagination-ellipsis {
  display: inline-flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  height: 26px !important;
  min-width: 20px !important;
  padding: 0 4px !important;
  color: #64748b !important;
  font-weight: 600 !important;
  user-select: none !important;
}

.profile-pagination-size {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: #64748b !important;
  white-space: nowrap !important;
}

.profile-pagination-size-select {
  height: 26px !important;
  padding: 0 22px 0 7px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 5px !important;
  background: #ffffff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") no-repeat right 5px center / 14px 14px !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  outline: none !important;
  appearance: none !important;
  transition: border-color 0.15s !important;
  box-sizing: border-box !important;
}

.profile-pagination-size-select:focus {
  border-color: #0f467c !important;
  box-shadow: 0 0 0 2px rgba(15, 70, 124, 0.1) !important;
}

.profile-pagination-buttons {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
}

.profile-pagination-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 26px !important;
  min-width: 26px !important;
  padding: 0 7px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 5px !important;
  background: #ffffff !important;
  color: #475569 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  user-select: none !important;
}

.profile-pagination-btn:hover:not(:disabled) {
  border-color: #0f467c !important;
  color: #0f467c !important;
  background: #f0f7ff !important;
}

.profile-pagination-btn:disabled {
  background: #f8fafc !important;
  color: #cbd5e1 !important;
  border-color: #e8edf3 !important;
  cursor: not-allowed !important;
}

.profile-pagination-btn.active {
  background: #0f467c !important;
  border-color: #0f467c !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* ── 14. MAIL-SPECIFIC TWEAKS ────────────────────────────────────────────── */
/* Mail has legacy nested structure — normalise it */

.mail_Settings_1 .mail_tab {
  display: none !important;
}

.mail_Settings_1 #General {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  width: 100% !important;
  gap: 12px !important;
  padding: 16px 20px 0 20px !important;
  box-sizing: border-box !important;
  background: #f8fafc !important;
  overflow: hidden !important;
}

.mail_Settings_1 .create_profile_div {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
}

/* mail table container */
.mail_profiles_div {
  margin-bottom: 0 !important;
}

/* ensure the table itself doesn't have display:block override */
.mail_profiles_div_table,
.sms_settings_content table,
.print_settings_content table,
.wa_settings_content table {
  display: table !important;
  width: 100% !important;
}

/* ── 15. SMS-SPECIFIC TWEAKS ─────────────────────────────────────────────── */

.sms_settings_content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

/* ── 16. PRINT-SPECIFIC TWEAKS ───────────────────────────────────────────── */

.print_settings_content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

/* ── 17. WHATSAPP-SPECIFIC TWEAKS ────────────────────────────────────────── */

.wa_settings_content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

/* ── 18. SCROLLBAR STYLING ───────────────────────────────────────────────── */

.mail_profiles_div::-webkit-scrollbar,
.sms_settings_content::-webkit-scrollbar,
.print_settings_content::-webkit-scrollbar,
.wa_settings_content::-webkit-scrollbar {
  width: 5px !important;
}

.mail_profiles_div::-webkit-scrollbar-track,
.sms_settings_content::-webkit-scrollbar-track,
.print_settings_content::-webkit-scrollbar-track,
.wa_settings_content::-webkit-scrollbar-track {
  background: #f1f5f9 !important;
}

.mail_profiles_div::-webkit-scrollbar-thumb,
.sms_settings_content::-webkit-scrollbar-thumb,
.print_settings_content::-webkit-scrollbar-thumb,
.wa_settings_content::-webkit-scrollbar-thumb {
  background: #cbd5e1 !important;
  border-radius: 4px !important;
}

.mail_profiles_div::-webkit-scrollbar-thumb:hover,
.sms_settings_content::-webkit-scrollbar-thumb:hover,
.print_settings_content::-webkit-scrollbar-thumb:hover,
.wa_settings_content::-webkit-scrollbar-thumb:hover {
  background: #94a3b8 !important;
}

#popups .popup .dialog_content .mail_profiles_div_table th:last-child,
#popups .popup .dialog_content .sms_settings_content table th:last-child,
#popups .popup .dialog_content .print_settings_content table th:last-child,
#popups .popup .dialog_content .wa_settings_content table th:last-child {
  text-align: right !important;
}

/* =============================================================================
   VERSION HISTORY POPUP — vh-* Design System
   ============================================================================= */

/* ── Modal size: wider than profile dashboards (880px × 580px) ── */
#popups .popup.show_history_dashboard {
  width: min(1100px, calc(100vw - 32px)) !important;
  min-width: 800px !important;
  max-width: min(1100px, calc(100vw - 32px)) !important;
  height: 580px !important;
  min-height: 480px !important;
  max-height: 580px !important;
  padding: 56px 0 58px 0 !important;
  border-radius: 8px !important;
  border: 1px solid #dde3ea !important;
  background: #ffffff !important;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18), 0 0 0 4000px rgba(15, 23, 42, 0.35) !important;
  overflow: hidden !important;
  font-family: 'Inter', 'Poppins', system-ui, sans-serif !important;
  box-sizing: border-box !important;
}

#popups .popup.show_history_dashboard .dialog_content {
  position: absolute !important;
  top: 56px !important;
  bottom: 60px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background: #f8fafc !important;
  box-sizing: border-box !important;
}

#popups .popup.show_history_dashboard .buttons {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 58px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 0 20px !important;
  background: #ffffff !important;
  border-top: 1px solid #e8edf3 !important;
}

#popups .popup.show_history_dashboard h2 {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 56px !important;
  line-height: 56px !important;
  padding: 0 24px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e8edf3 !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  z-index: 1 !important;
}

#popups .popup.show_history_dashboard .close {
  position: absolute !important;
  top: 14px !important;
  right: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #64748b !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: background 0.15s, color 0.15s !important;
  z-index: 2 !important;
}

#popups .popup.show_history_dashboard .close:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}



/* ── vh-container: main flex wrapper ── */
.vh-container {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  width: 100% !important;
  background: #f8fafc;
}

/* ── Toolbar: search bar + result count ── */
.vh-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px 10px;
  background: #ffffff;
  border-bottom: 1px solid #e8edf3;
  flex-shrink: 0;
}

.vh-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  max-width: 400px;
}

.vh-search-icon {
  position: absolute;
  left: 11px;
  color: #94a3b8;
  pointer-events: none;
  z-index: 1;
  display: flex;
  align-items: center;
}

.vh-search-input {
  width: 100%;
  height: auto;
  padding: 8px 34px 8px 36px !important;
  font-family: inherit;
  font-size: 13px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  outline: none;
  background: #f8fafc;
  color: #0f172a;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  box-sizing: border-box;
}

.vh-search-input::placeholder {
  color: #94a3b8;
}

.vh-search-input:focus {
  border-color: #0f467c;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(15, 70, 124, 0.1);
}

.vh-search-clear {
  position: absolute;
  right: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: #e2e8f0;
  color: #64748b;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
}

.vh-search-clear:hover {
  background: #cbd5e1;
  color: #0f172a;
}

.vh-search-clear.d-none {
  display: none !important;
}

.vh-result-count {
  font-size: 12px;
  font-weight: 500;
  color: #0f467c;
  background: #e8f0f9;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  display: none;
}

/* ── File Name Global Banner (single-file mode) ── */
.vh-file-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  background: linear-gradient(90deg, #eef4fb 0%, #f5f9ff 100%);
  border-bottom: 1px solid #d4e3f5;
  color: #334155;
  font-size: 13px;
  flex-shrink: 0;
}

.vh-file-banner.d-none {
  display: none !important;
}

.vh-banner-filename {
  font-weight: 600;
  color: #0f467c;
  font-size: 13px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vh-banner-count {
  font-size: 11px;
  font-weight: 600;
  color: #0f467c;
  background: #dbeafe;
  padding: 2px 8px;
  border-radius: 10px;
  flex-shrink: 0;
}

/* ── Scrollable table wrapper ── */
.vh-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: auto;
  background: #f8fafc;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
}

.vh-table-wrap::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.vh-table-wrap::-webkit-scrollbar-track {
  background: #f1f5f9;
}

.vh-table-wrap::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.vh-table-wrap::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ── Table ── */
.vh-table-container {
  min-height: 100%;
  width: 100% !important;
  background: #ffffff;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

.vh-table {
  width: 100%;
  border-collapse: collapse;
  font-family: inherit;
  font-size: 13px;
  table-layout: fixed;
}

/* Sticky header */
.vh-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

.vh-table thead th {
  background: #f1f5f9;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  text-transform: capitalize;
  padding: 14px 14px;
  border-bottom: 2px solid #e2e8f0;
  white-space: nowrap;
  text-align: left;
}

/* ── Column widths ── */
#popups .popup.show_history_dashboard th,
#popups .popup.show_history_dashboard td {
  height: auto !important;
  box-sizing: border-box !important;
}

#popups .popup.show_history_dashboard th.vh-col-version,
#popups .popup.show_history_dashboard td.vh-col-version {
  width: 80px !important;
  text-align: center !important;
}

#popups .popup.show_history_dashboard th.vh-col-filename,
#popups .popup.show_history_dashboard td.vh-col-filename {
  width: 180px !important;
  text-align: left !important;
}

#popups .popup.show_history_dashboard th.vh-col-date,
#popups .popup.show_history_dashboard td.vh-col-date {
  width: 160px !important;
  text-align: left !important;
}

#popups .popup.show_history_dashboard th.vh-col-status,
#popups .popup.show_history_dashboard td.vh-col-status {
  width: 110px !important;
  text-align: center !important;
}

#popups .popup.show_history_dashboard th.vh-col-comments,
#popups .popup.show_history_dashboard td.vh-col-comments {
  width: auto !important;
  text-align: left !important;
}

#popups .popup.show_history_dashboard.obj_prop .dialog_content table th.vh-col-actions,
#popups .popup.show_history_dashboard.obj_prop .dialog_content table td.vh-col-actions {
  width: 115px !important;
  text-align: center !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
}

#popups .popup.show_history_dashboard [data-id="show_history_table"] tr th.vh-col-actions {
  text-align: left !important;
}

#popups .popup.show_history_dashboard [data-id="show_history_table"] tr td {
  border: none !important;
}

/* ── Overrides for global .obj_prop table styles ── */
#popups .popup.show_history_dashboard.obj_prop .dialog_content table tr {
  display: table-row !important;
  margin-bottom: 0 !important;
}

#popups .popup.show_history_dashboard.obj_prop .dialog_content table th,
#popups .popup.show_history_dashboard.obj_prop .dialog_content table td {
  display: table-cell !important;
}

#popups .popup.show_history_dashboard.obj_prop .dialog_content table th {
  padding: 14px 14px !important;
  background: #f1f5f9 !important;
  border-bottom: 2px solid #e2e8f0 !important;
}

#popups .popup.show_history_dashboard.obj_prop .dialog_content table td {
  padding: 11px 14px !important;
}


/* ── Table body rows ── */
.vh-table tbody tr {
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.12s;
}

.vh-table tbody tr:hover {
  background: #f8fafc;
}

/* Active row — left accent + subtle tint */
.vh-table tbody tr.vh-row-active {
  background: linear-gradient(90deg, rgba(15, 70, 124, 0.05) 0%, transparent 100%);
  border-left: 3px solid #0f467c;
}

.vh-table tbody tr.vh-row-active:hover {
  background: linear-gradient(90deg, rgba(15, 70, 124, 0.08) 0%, transparent 100%);
}

.vh-table tbody td {
  padding: 11px 14px;
  color: #334155;
  font-size: 13px;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Version number pill ── */
.vh-version-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 24px;
  padding: 0 6px;
  border-radius: 6px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
}

.vh-version-num--active {
  background: #0f467c;
  border-color: #0f467c;
  color: #ffffff;
}

/* ── Status badge pills ── */
.vh-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.vh-badge--active {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.vh-badge--inactive {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.vh-actions-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
}

/* ── vh-btn: shared action button base ── */
.vh-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 29px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  font-weight: 500;
  font-family: inherit;
  border-radius: 5px !important;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  line-height: 1;
}

/* Icon-only modifier */
.vh-btn--icon {
  width: 29px !important;
  padding: 0 !important;
  justify-content: center !important;
  gap: 0 !important;
}

/* Secondary (Get) */
.vh-btn--secondary {
  background: #ffffff !important;
  border: 1px solid #0f467c !important;
  color: #0f467c !important;
}

.vh-btn--secondary:hover {
  background: #0f467c !important;
  border-color: #0f467c !important;
  color: #ffffff !important;
}

/* Primary (Set Active) */
.vh-btn--primary {
  background: #ffffff !important;
  border: 1px solid #0f467c !important;
  color: #0f467c !important;
}

.vh-btn--primary:hover:not(:disabled):not([disabled]) {
  background: #0f467c !important;
  border-color: #0f467c !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(15, 70, 124, 0.3) !important;
}

/* Danger (Delete) */
.vh-btn--danger {
  background: #ffffff !important;
  border: 1px solid #ef4444 !important;
  color: #ef4444 !important;
}

.vh-btn--danger:hover:not(:disabled):not([disabled]) {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3) !important;
}

/* Current/active state */
.vh-btn--current {
  background: #e8f0f9 !important;
  border: 1px solid #b8d0ea !important;
  color: #4a7fad !important;
  cursor: default !important;
  opacity: 1 !important;
}

.vh-btn:disabled,
.vh-btn[disabled] {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  visibility: visible !important;
}

.vh-btn--current:disabled,
.vh-btn--current[disabled] {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ── Empty state ── */
.vh-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 60px 20px;
  color: #94a3b8;
  font-size: 14px;
  text-align: center;
}

.vh-empty-state p {
  margin: 0;
}

/* ── Confirm Dialogs (Overwrite & Set Active) ── */
#popups .popup.vh-confirm-dialog {
  width: 480px !important;
  max-width: 90vw !important;
  border-radius: 8px !important;
  border: 1px solid #dde3ea !important;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18), 0 0 0 4000px rgba(15, 23, 42, 0.35) !important;
  background: #ffffff !important;
  padding: 0 !important;
}

#popups .popup.vh-confirm-dialog h2 {
  position: static !important;
  height: 56px !important;
  line-height: 56px !important;
  padding: 0 24px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e8edf3 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

#popups .popup.vh-confirm-dialog .dialog_content {
  position: static !important;
  padding: 24px !important;
  height: auto !important;
  max-height: calc(80vh - 120px) !important;
  overflow-y: auto !important;
  background: #ffffff !important;
  color: #334155 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  box-sizing: border-box !important;
}

#popups .popup.vh-confirm-dialog .buttons {
  position: static !important;
  height: auto !important;
  padding: 16px 24px !important;
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  box-sizing: border-box !important;
}

#popups .popup.vh-confirm-dialog .buttons button {
  height: 36px !important;
  line-height: 1 !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  min-width: 80px !important;
  margin: 0 !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

#popups .popup.vh-confirm-dialog .buttons button[data-id='popup_cancel'] {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}

#popups .popup.vh-confirm-dialog .buttons button[data-id='popup_cancel']:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
}

#popups .popup.vh-confirm-dialog .buttons button[data-id='popup_ok'] {
  background: #0f467c !important;
  border: 1px solid #0f467c !important;
  color: #ffffff !important;
}

#popups .popup.vh-confirm-dialog .buttons button[data-id='popup_ok']:hover {
  background: #0d3d6e !important;
  border-color: #0d3d6e !important;
  box-shadow: 0 2px 6px rgba(15, 70, 124, 0.3) !important;
}

#popups .popup.vh-confirm-dialog .close {
  position: absolute !important;
  top: 14px !important;
  right: 18px !important;
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  color: #64748b !important;
  border: none !important;
  cursor: pointer !important;
  z-index: 2 !important;
  transition: background 0.15s !important;
}

#popups .popup.vh-confirm-dialog .close:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

#popups .popup.vh-confirm-dialog .close::before {
  content: "×" !important;
  font-size: 24px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  display: block !important;
}

/* ── Delete Dialogs (Premium Light Danger UI) ── */
#popups .popup.vh-delete-dialog {
  width: 480px !important;
  max-width: 90vw !important;
  border-radius: 8px !important;
  border: 1px solid #dde3ea !important;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18), 0 0 0 4000px rgba(15, 23, 42, 0.35) !important;
  background: #ffffff !important;
  padding: 0 !important;
}

#popups .popup.vh-delete-dialog h2 {
  position: static !important;
  height: 56px !important;
  line-height: 56px !important;
  padding: 0 24px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #ef4444 !important; /* Red title for danger theme */
  background: #ffffff !important;
  border-bottom: 1px solid #e8edf3 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

#popups .popup.vh-delete-dialog .dialog_content {
  position: static !important;
  padding: 24px !important;
  height: auto !important;
  max-height: calc(80vh - 120px) !important;
  overflow-y: auto !important;
  background: #ffffff !important;
  color: #334155 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  box-sizing: border-box !important;
}

#popups .popup.vh-delete-dialog .buttons {
  position: static !important;
  height: auto !important;
  padding: 16px 24px !important;
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  box-sizing: border-box !important;
}

#popups .popup.vh-delete-dialog .buttons button {
  height: 36px !important;
  line-height: 1 !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  min-width: 80px !important;
  margin: 0 !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

#popups .popup.vh-delete-dialog .buttons button[data-id='popup_cancel'] {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}

#popups .popup.vh-delete-dialog .buttons button[data-id='popup_cancel']:hover {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
}

#popups .popup.vh-delete-dialog .buttons button[data-id='popup_ok'] {
  background: #dc2626 !important;
  border: 1px solid #dc2626 !important;
  color: #ffffff !important;
}

#popups .popup.vh-delete-dialog .buttons button[data-id='popup_ok']:hover {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3) !important;
}

#popups .popup.vh-delete-dialog .close {
  position: absolute !important;
  top: 14px !important;
  right: 18px !important;
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  color: #64748b !important;
  border: none !important;
  cursor: pointer !important;
  z-index: 2 !important;
  transition: background 0.15s !important;
}

#popups .popup.vh-delete-dialog .close:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

#popups .popup.vh-delete-dialog .close::before {
  content: "×" !important;
  font-size: 24px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  display: block !important;
}

/* ── Version History Footer & Pagination ── */
#popups .popup.show_history_dashboard .dialog_content {
  bottom: 60px !important;
  /* Leave room for footer */
}

#popups .popup.show_history_dashboard .buttons {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 20px !important;
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
  border-radius: 0 0 8px 8px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.vh-pagination-info {
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
}

.vh-pagination-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.vh-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: #475569;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.vh-page-btn:hover:not(:disabled) {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #94a3b8;
}

.vh-page-btn.vh-page-btn--active {
  background: #0f467c !important;
  color: #ffffff !important;
  border-color: #0f467c !important;
}

.vh-page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f8fafc;
  visibility: visible !important;
}

/* Responsive adjustments for smaller screens (tablets/mobile) */
@media (max-width: 768px) {

  #popups .popup.show_history_dashboard th.vh-col-date,
  #popups .popup.show_history_dashboard td.vh-col-date {
    width: 130px !important;
  }

  #popups .popup.show_history_dashboard th.vh-col-status,
  #popups .popup.show_history_dashboard td.vh-col-status {
    width: 95px !important;
  }
}

#popups .popup.show_history_dashboard th.vh-col-select,
#popups .popup.show_history_dashboard td.vh-col-select {
  width: 40px !important;
  text-align: center !important;
  padding: 11px 4px !important;
}

#popups .popup.show_history_dashboard th.vh-col-user,
#popups .popup.show_history_dashboard td.vh-col-user {
  width: 170px !important;
  text-align: left !important;
}

#popups .popup.show_history_dashboard.obj_prop .dialog_content table th.vh-col-actions,
#popups .popup.show_history_dashboard.obj_prop .dialog_content table td.vh-col-actions {
  width: 115px !important;
}


@font-face {
	font-family: 'Poppins';
	src:url('fonts/Poppins-Normal.ttf') format('truetype');
	font-weight: 400;
	font-display: swap;
	font-style: normal;
}
@font-face {
	font-family: 'Poppins';
	src:url('fonts/Poppins-Bold.ttf') format('truetype');
	font-weight: 700;
	font-display: swap;
	font-style: bold;
}
@font-face {
	font-family: 'Poppins';
	src:url('fonts/Poppins-BoldItalic.ttf') format('truetype');
	font-weight: 700;
	font-display: swap;
	font-style: italic;
}
@font-face {
	font-family: 'Poppins';
	src:url('fonts/Poppins-Italic.ttf ') format('truetype');
	font-weight: 400;
	font-display: swap;
	font-style: italic;
}
 
.div_img { margin-bottom:5px; display:inline-block; border:1px solid #ccc; border-radius:5px; background:#fff; padding:8px;}
.hd_txt {font-size:16px; font-weight:bold; margin-bottom:10px;}
.txt_center {text-align:center;}

.txt_center a{color:#333;}

.menu_button{    margin: 0 auto; width:100%;
    -webkit-box-shadow: 0px 10px 29px -16px rgb(0 0 0 / 12%);
    -moz-box-shadow: 0px 10px 29px -16px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 10px 29px -16px rgb(0 0 0 / 12%);
    background: #fff;
    border-radius: 0px;
    overflow: hidden;}


.menu_button .btn {
  width: 100%;
  font-weight: normal;
  color: #000;
  padding: 10px 15px;
  letter-spacing: 0; border-top:1px solid #ccc;
  background:url(images/border-right.png) no-repeat top right;
  font-size: 16px;
  border-radius: 0 !important;
  -webkit-box-shadow: 0px 8px 18px -16px rgba(0, 0, 0, 0.19);
  -moz-box-shadow: 0px 8px 18px -16px rgba(0, 0, 0, 0.19);
  box-shadow: 0px 8px 18px -16px rgba(0, 0, 0, 0.19);
      display: inline-block; text-decoration:none;
}
.show_div{background: rgba(0, 0, 0, 0.02);text-align: center;cursor: pointer;}

.menu_button a{text-decoration:none; color:#333;}
 .configuration_user_configuration{
  width: 750px;
  height: 407px;
}

/*
button for tabs inbetween
*/
.leftmenu_div .hd_txt{font-size:15px; font-weight:bold;}
.leftmenu_div td {padding:5px; font-family:'Poppins', sans-serif;;border: 1px solid #ccc;}
.leftmenu_div ul {list-style:none; padding:0px; margin:5px 0 0 0;}
.leftmenu_div li {list-style:none; padding:6px 5px; margin:0;}
.leftmenu_div li.active{ background:grey;}
.leftmenu_div .hd_list{font-weight: lighter;}
.table_server {
  width: 100% !important;
  height: 100% px !important;
}
.table_server td{
  border: 1px solid black;
  text-align: left;
  padding-left: 5px;
  border: 1px solid #f1f1f1;
  font-size: 12px !important;
}
.table_server th{
  background: #fafafa;
  color: black;
  display: table-cell !important;
  font-size: 12px !important;
    border: 1px solid #f1f1f1;
    padding: 5px !important;
    position: sticky;
    top: 0;
}
.table_client{
  width: 800px !important;
  height: 300px !important;
}
.table_client td{
  border: 1px solid black;
  text-align: center;
  width: 267px;
  padding: 5px;
 
}
.div_for_server {
  width: 100%;
  height: 100%;
  padding: 5px;
  overflow:auto;
}
.env_tabs{
  background-color: white;
}
.env_tabs .env_tabs_buttons input[type='button']{
  background: transparent;
  outline: none;
  border: none;
}

.environment_div{
  background-color: white;
  padding:1px;
  gap:2px;
}
.environment_left{
  width:20%;
  float:left;
  border:1px solid black;
  height:100%;
}
.environment_right{
  width: 80%;
  float:left;
  border: 1px solid black;
  height: 100%;
}
.uniserve_managment_console{
  max-width: 776px !important;
  min-width: 776px !important;
  height: 510px !important;
  max-height: 510px !important;
  min-height: 510px !important;
  
  }
  .configuration_container_left{
   background:white;
  max-width: 750px !important;
  width: 750px;
  height: 407px;
  min-height: 407px !important;
  display: flex;
  flex-direction: column;
  border: 1px solid #eee;
  }
  .batch_progress_container{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: #eee;
  }
  .batch_progress_progress_text{
    position: absolute;
    top: 50%;
    left: 50%;
  }
  
  
  #popups .uniserve_managment_console .dialog_content{
  
    min-height: 448px !important;
    overflow: hidden;
  }
  /* for template list in batch process */
#popups    .templates_list   th{
background: #fafafa;
color: black;
display: table-cell !important;
font-size: 12px !important;
border: 1px solid #f1f1f1;
padding: 5px !important;
position: sticky;
top: 0;
font-weight: 500;
}
#popups    .templates_list   td{
border: 1px solid #f1f1f1 !important;
font-size: 12px !important;
color: #333;
white-space: nowrap;
text-overflow: ellipsis !important;
overflow: hidden !important;
padding: 5px;
}
.class_env_type{
  /* padding-left: 10px !important;
  padding-bottom: 10px !important; */
  width:200px !important;
}
.templates_list{
  overflow-y: auto;
  width: 100%;
  height: 100% ;
}
.templates_list .template_text{
  display: inline-block;
  width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.templates_list input[type="radio"]{
  zoom: 1.2;
  margin: 0;
}
.templates_list::-webkit-scrollbar{
  width: 5px;
}
#popups .uniserve_managment_console .active_item{
  color:var(--brand-color) ;
}
.batch_config_actions_container{
  display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.start_progress_box{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.calender_clock{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.calender_clock_img{
  background: url(images/calendar_clock.svg) no-repeat center;
  display: block;
  height: 16px;
  width: 16px;
  cursor: pointer;
}
.calender_month_img{
  background: url(images/calendar_month.svg) no-repeat center;
  display: block;
  height: 16px;
  width: 16px;
  cursor: pointer;
}
.start_progress{
  background: url(images/play_arrow_ic.svg) no-repeat center;
  width: 18px;
    height: 18px;
    display: inline-block;
    cursor: pointer;
}
/* schedule event */
.sched_evt{
  max-width: 776px !important;
  min-width: 776px !important;
  height: 510px !important;
  max-height: 510px !important;
  min-height: 510px !important;
}
#popups .sched_evt .dialog_content {
  min-height: 448px !important;
  overflow: hidden;
}
.sched_evt .sched_evt_container{
  display: flex;
  flex-direction: column;
  gap: 5px;
  height: 400px;
  width: 752px;
  border: 1px solid #ccc;
  padding: 10px;
}
.sched_evt .sched_evt_container .sched_evt_field{
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sched_evt .sched_evt_container .sched_evt_field input[type='text'],.sched_evt .sched_evt_container .sched_evt_field select{
  height: 25px;
    width: 100%;
}
.sched_evt .sched_evt_container .sched_evt_field textarea{
  height: 120px;
  border: 1px solid #ccc !important;
  width: 100%;
  resize: none;
}
.sched_evt .sched_evt_container .sched_evt_field .date_contnr{
  display: flex;
    height: 25px;
    align-items: center;
    gap: 3px;
}
.sched_evt .sched_evt_container .sched_evt_field .date_contnr .date_contnr_title{
  height: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px;

}

.sched_evt .sched_evt_container .sched_evt_field input[type="date"]{
  position: absolute;
  right: 25px;
  border: 0;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}
.sched_evt .sched_evt_container .sched_evt_field input[type="date"]:focus-visible{
  outline: 0;
}

/* Scheduled processes */
.sched_bat_proc{
  max-width: 776px !important;
  min-width: 776px !important;
  height: 510px !important;
  max-height: 510px !important;
  min-height: 510px !important;
}
#popups .sched_bat_proc .dialog_content {
  min-height: 448px !important;
  overflow: hidden;
}
 .sched_bat_proc_container{
  display: flex;
  flex-direction: column;
  gap: 5px;
  height: 100%;
  width: 100%;
  border: 1px solid #ccc;
}
 .sched_bat_proc_container input[type='text'],.sched_bat_proc .sched_bat_proc_container select{
  height: 25px;
    width: 100%;
}
#popups   .sched_bat_proc_container   td{
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  padding: 5px;
  }
#popups  .sched_bat_proc_container  th{
  background: #fafafa;
  color: black;
  display: table-cell !important;
  font-size: 12px !important;
  border: 1px solid #f1f1f1;
  padding: 5px !important;
  position: sticky;
  top: 0;
  font-weight: 500;
  }
  .batch_process_tabs_content{
    height: 92%;
  }
  .batch_process_tabs_content select{
    width: 100% !important;
    height: 25px !important;
  }
  /* tabs */
  .batch_process_tabs {
    position: sticky;
    top: 0;
    z-index: 200;
    overflow: hidden;
    background-color: #eee;
    height: 8%;
  }
   .batch_process_tabs p {
    color: black;
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 6px;
    transition: 0.3s;
    font-size: 13px;
    margin:0px;
    font-weight: 500;
  }
   .batch_process_tabs p.active {
    background-color: #fafafa;
  }
  .batch_process_tabs p:hover {
    background-color: #ddd;
  }
  .bp_configs_container{
    height: 372px;
    width: 748px;
  }
  .bp_d_none{
    display: none !important;
  }
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  .batchProcess-loader {
    border: 8px solid #eee;
    border-top: 8px solid #ccc;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
  }
  .batchProcess-loader-container {
    width: 100% !important;
    height: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }



#popups .popup .db-lookup-popup{
    min-height: 450px !important;
}
.db-lookup-popup .dialog_content{
    min-height: 130px !important;
}
.db-lookup-container {
    padding: 1px 10px 10px 10px;
    font-family: Arial, sans-serif;
    color: #333;
    background: #f5f5f5;
    border-radius: 6px;
}
#dbtypeSelectDiv{
    width: 65%;
}
#dbTestBtn{
    margin-top: 20px !important;
}
.flex-container {
    /* display: flex;
    flex-direction: column; */
    gap: 25px;
}
.db-lookup-form {
    /* background: #ffffff;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 0 5px #0003; */
}

.db-lookup-heading {
    font-size: 1.1em;
    margin-bottom: 10px;
    font-weight: bold;
}

.db-form-group {
    margin-bottom: 10px;
     flex: 1;
    display: flex;
    flex-direction: column;
}

.db-label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.db-select,
.db-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
}

/* advance pop up */
.db-advanced-form {
    background: #f5f5f5;

}

.db-form-row {
    display: flex;
    gap: 2rem;
    /* margin-bottom: 20px; */
}

.db-form-group {
   
}

.db-form-group label {
    /* margin-bottom: 5px; */
    /* font-weight: 500; */
}

.db-form-group .db-input {
    /* padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px; */
}
.db-advanced-popup .dialog_content{
     background: #f5f5f5; 
}
#popups .db-advanced-popup{
    min-height: 185px !important;
    max-height: 185px !important;
    min-width: 350px !important;
    max-width: 350px !important;
}

/* db query 1 */
.db_query_popup_1 .dialog_content{
    min-height: 450px !important;
    background: #f5f5f5; 
    border-radius: 5px;
}
.db_query_popup_1{
    max-width: 600px !important;
    min-height: 500px !important;
}
.db_query_popup_2 .dialog_content{
 min-height: 500px !important;
    background: #f5f5f5; 
    min-width: 600px !important;
}
.db_query_popup_2  .query-lower-section{
    border: 1px solid #eae6e6;
    border-radius: 5px;
    margin-top: 5px;
    padding: 5px;
}
.table-select-list-wrapper div{
    width: 100%;
}
.table-actions{
    width: 225px !important;
    padding: 135px 5px;
    align-items: center;
    display: grid;
    gap: 3px;
}
.table-select-list-wrapper {
    display: flex;
width: 100%;
justify-content: space-between;
margin-top: 10px;
}

.table-select-list-wrapper select{
    width: 100%;
    height: 315px;
}

/* db query 2 */
.db_query_popup_2 #tableSelect {
    width: 100%;
    padding: 4px;
    margin-top: 5px;
    margin-bottom: 10px;
}

.db_query_popup_2 .field-config-wrapper {
    display: flex;
    border: 1px solid #d1c2c2;
    border-radius: 5px;
    padding: 5px;
    margin-top: 5px;
    /* gap: 20px; */
    /* margin-top: 10px; */
}
.db_query_popup_2 label{
    margin-top: 0;
}

.db_query_popup_2 .field-config-wrapper > div {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.db_query_popup_2 .field-config-wrapper select {
    /* width: 150px; */
    width: 100%;
    height: 185px;
}
.db_query_popup_2 .condition-table-body td {
  padding: 4px 8px;
  line-height: 1.4;
  vertical-align: top;
  white-space: nowrap;
}

.db_query_popup_2 .condition-table-body td:nth-child(2) {
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.db_query_popup_2 .field-actions {
    justify-content: center;
    align-items: center;
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
        /* padding: 30px 20px; */
        width: 50% !important;

}
.db_query_popup_2{
    min-width: 600px !important;
    min-height: 500px !important;
}
.db_query_popup_2 .field-bottom-options {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.db_query_popup_2 .field-radio-options {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.db_query_popup_2 .serial-row {
    margin-top: 10px;
}
/* db query3 */
.db_query_popup_3 .dialog_content{
    min-height: 420px !important;
     background: #f5f5f5; 
     border-radius: 5px;
}
.db_query_popup_3{
    min-width: 600px !important;
}
.db_query_popup_3_1 .select-source-popup-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 5px;
}

.db_query_popup_3_1 .source-mode-group {
  display: flex;
  gap: 20px;
}

.db_query_popup_3_1 .source-object-select label,
.db_query_popup_3_1 .source-options label {
  display: block;
  margin-bottom: 5px;
  margin-top: 0;
}

.db_query_popup_3_1 .source-object-select select {
  width: 100%;
  padding: 4px;
}

.db_query_popup_3_1 .source-options {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.db_query_popup_preview .dialog_content{
    background-color: #f5f5f5;
    border-radius: 5px;
    min-height: 200px !important;
}
.db_query_popup_3_1 .row-number-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
}

.db_query_popup_3_1 .complex-object-box {
  border: 1px solid #ccc;
  padding: 10px;
  color: #555;
  background: #f7f7f7;
  margin-top: 10px;
}
.db_query_popup_3_1 .dialog_content{
    /* min-height: 400px !important; */
    background: #f5f5f5;
    border-radius: 5px
}
.select-source-popup-wrapper .source-mode-group label{
    display: flex;
    align-items: center;
    margin: 0;
}
.db_query_popup_3_1{
max-width: 300px !important;
    max-height: 230px !important;}
/* db query4*/
.db_query_popup_4 .disabled-row {
  background-color: #f0f0f0;
  opacity: 0.6;
  pointer-events: none;
}

.db_query_popup_4 .disabled-row input[type='checkbox'] {
  pointer-events: auto;
  opacity: 1;
}
.db_query_popup_4 .dialog_content{
    background: #f5f5f5;
    border-radius: 5px;
    min-height: 420px !important;
}
.db_query_popup_4{
    min-width: 600px !important;
}
.db_query_popup_4_content{
    height: 60vh;
    border: 1px solid #E4E4E4;
    border-radius: 12px;
    overflow-y: auto;
    padding: 0px 5px;
}
.db_query_popup_4_content::-webkit-scrollbar {
  width: 5px;
height: 5px;
}
.db_query_popup_4_content .output_feilds_table tr{
border-bottom: 1px solid #E4E4E4;
}
/* xml config */
.xml_config .dialog_content{
    background: #f5f5f5;
    border-radius: 5px;
    min-height: 90px !important;
    max-height: 90px !important;
    height: 90px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    width: 250px !important;
}
#popups .xml_config{
 min-width: 250px !important;
    max-width: 250px !important;
    width: 250px !important;
}
.xml_config_container #xml_complex_object{
    width: 100%;
}
/* csv config */
#popups .csv_config{
        min-height: 450px !important;
    height: 450px !important;
    max-height: 450px !important;
      /* min-width: 550px !important;
    max-width: 550px !important;
    width: 550px !important; */
}
.csv_config .dialog_content{
    min-height: 500px  !important;
    max-height: 500px !important;
    height: 500px !important;
  
    background: #f5f5f5;
    border-radius: 5px;
}
.csv_config .csv_config_form{
        height: 45vh;
    border: 1px solid #E4E4E4;
    /* border-radius: 12px; */
    overflow-y: auto;
    /* padding: 0px 5px; */
}
.csv_config_form .csv_table tr{
            border-bottom: 1px solid #E4E4E4;
}
.csv_config_form .csv_table th{
    background: #f5f5f5;
    /* color: #333;
    font-weight: 500; */
    display: table-cell !important;
    font-weight: 500 !important;
}
.csv_config_form::-webkit-scrollbar {
  width: 5px;
height: 5px;
}
.csv_tabs_header {
  display: flex;
  margin-bottom: 10px;
  position: sticky;
    top: 0;
    z-index: 200;
    overflow: hidden;
    background-color: #eee;
    height: 25px;
    min-height: 25px;
}

.csv_tab_btn {
  /* padding: 6px 12px;
  border: 1px solid #ccc;
  background: #f1f1f1; */
  cursor: pointer;
  /* margin-right: 5px; */
  background: #ddd;
}

.csv_tab_btn.active {
  /* background: #ddd;
  font-weight: bold; */
  background: #fafafa;
;
}

.csv_tab_content {
  display: none;
}

.csv_tab_content.active {
  display: block;
}
.input_field_settings_popup .dialog_content{
    background: #f5f5f5;
    border-radius: 5px;
   
}
.input_field_settings_modal #simple_somplex_radio_btns{
    display: flex;
    gap: 30px;
}
.input_field_settings_modal #simple_somplex_radio_btns label{
    
    align-items: center;
    display: flex;
    gap: 10px;
}
.input_field_settings_modal #simple_somplex_radio_btns input{
   margin: 0;
}
#popups .input_field_settings_popup{
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
}
.input_field_settings_modal .fieldTypeSelect{
    width: 70%;
}
.input_field_settings_modal #fieldTypeSelectRow{
display: grid;
}

/* QC CUSTOM MAPPING*/
.sd_lookup_container {
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  gap: 5px;
  height: 388px;
  width: 751px;
  overflow-y: auto;
}
.sd_lookup_container input[type='text']{
    height: 32px;
    width: 100%;
}

.sd_lookup_container .sd_lookup_add_btn {
  height: 10%;
  display: flex;
  flex-direction: row;
  justify-content:flex-end;
  align-items: center;
  gap: 5px;
}
.sd_lookup_container .sd_lookup_add_btn div{
  display: flex;
  flex-direction: row;
  gap: 5px;
  height: 32px;
  width: 80%;
}
.sd_lookup_container .sd_lookup_add_btn div label{
      font-size: 14px;
    font-weight: 500;
    line-height: 16.8px;
    width: 25%;
}
.sd_lookup_container .sd_lookup_add_btn div select{
  height: 100%;
  width: 75%;
}

.sd_lookup_container .sd_lookup_add_btn button {
  box-shadow: 0 1px 2px 0 var(--button-shadow-color), 0 1px 0 0 rgba(255, 255, 255, 0.1) inset;
  cursor: pointer;
  border: 1px solid var(--border-color);
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  background-color: var(--brand-color);
  color: #ffffff;
  padding: 4px 10px 4px 10px;
  border-radius: 4px;
  height: 32px;
  width: 20%;

}

.sd_lookup_container .sd_lookup_list {
  height: 90% !important;
}

.sd_lookup_container .sd_lookup_list select {
  height: 32px;
  width: 100%;
}

.import-wizard {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

.import-wizard__header {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 2px 4px 0 4px;
}

.import-wizard__title {
	font-size: 16px;
	font-weight: 700;
	color: #1f2f45;
}

.import-wizard__subtitle {
	font-size: 12px;
	color: #5f7187;
}

.import-wizard__wizard {
	width: 100%;
}

.import-wizard__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	align-items: start;
}

@media (max-width: 720px) {
	.import-wizard__grid {
		grid-template-columns: 1fr;
	}
}

.import-wizard__card {
	border: 1px solid #dfe6ef;
	border-radius: 10px;
	background: #fff;
	padding: 10px;
}

.import-wizard__card-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	justify-content: space-between;
	margin-bottom: 6px;
}

.import-wizard__card-head h4 {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	color: #1f2f45;
}

.import-wizard__meta {
	font-size: 11px;
	color: #6b7f96;
	white-space: nowrap;
}

.import-wizard__item-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	flex-shrink: 0;
}

.import-wizard__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.import-wizard__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	background: #f7faff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
}

.import-wizard__name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12px;
	color: #1f2f45;
}

.import-wizard__pill {
	flex-shrink: 0;
	font-size: 11px;
	border-radius: 999px;
	padding: 3px 8px;
	border: 1px solid transparent;
}

.import-wizard__pill--ok {
	background: #e8f5e9;
	border-color: #bde5c0;
	color: #1b5e20;
}

.import-wizard__pill--fail {
	background: #ffebee;
	border-color: #f5c1c9;
	color: #b71c1c;
}

.import-wizard__actions {
	display: flex;
	gap: 8px;
	padding-top: 6px;
}

.import-wizard__btn {
	border: 1px solid #cfd9e6;
	background: #fff;
	color: #222;
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 12px;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}

.import-wizard__btn:hover {
	background: #f7faff;
	border-color: #b0c4dc;
}

.import-wizard__banner {
	border-radius: 10px;
	padding: 10px 12px;
	border: 1px solid transparent;
	margin-bottom: 10px;
}

.import-wizard__banner-title {
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 2px;
}

.import-wizard__banner-text {
	font-size: 12px;
	color: inherit;
}

.import-wizard__banner--warn {
	background: #fff7e6;
	border-color: #ffe1a6;
	color: #7a4b00;
}

.import-wizard__banner--ok {
	background: #e8f5e9;
	border-color: #bde5c0;
	color: #1b5e20;
}

.import-wizard__settings-toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.import-wizard__search {
	flex: 1;
	min-width: 220px;
	border: 1px solid #dfe6ef;
	border-radius: 10px;
	padding: 8px 10px;
	font-size: 12px;
	outline: none;
}

.import-wizard__search:focus {
	border-color: #9fb2c9;
	box-shadow: 0 0 0 3px rgba(15, 70, 124, 0.10);
}

.import-wizard__settings {
	margin-top: 15px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15px;
}

@media (max-width: 720px) {
	.import-wizard__settings {
		grid-template-columns: 1fr;
	}
}

.import-wizard__setting {
	display: flex;
	gap: 12px;
	align-items: center; /* Center vertically for better alignment */
	padding: 12px;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	transition: all 0.2s ease;
}

.import-wizard__setting:hover {
  border-color: #cbd5e1;
  background-color: #f8fafc;
}

.import-wizard__template--disabled {
  cursor: default;
  background-color: #f9fbfe;
  border-color: #e5edf5;
  opacity: 0.85;
}

.import-wizard__template--disabled:hover {
  background-color: #f9fbfe;
  border-color: #e5edf5;
}

.import-wizard__setting input[type='checkbox'] {
	margin: 0;
	cursor: pointer;
  width: 14px;
  height: 14px;
  transform: scale(0.85);
}

.import-wizard__template--disabled input[type='checkbox'] {
  cursor: default;
}

.import-wizard__setting-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
  flex: 1;
}

.import-wizard__setting-name {
	font-size: 12px;
	font-weight: 700;
	color: #1f2f45;
}

.import-wizard__setting-value {
	font-size: 11px;
	color: #6b7f96;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

.import-wizard__summary {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.import-wizard__card--summary {
	padding: 12px;
}

.import-wizard__summary-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid #eef3f8;
	font-size: 12px;
	color: #1f2f45;
}

.import-wizard__summary-row:last-child {
	border-bottom: 0;
}

.import-wizard__mono {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 11px;
	color: #4a6078;
	max-width: 60%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: right;
}

.import-wizard__empty {
	padding: 10px;
	font-size: 12px;
	color: #6b7f96;
}

.import-wizard__empty--box {
	border: 1px dashed #dfe6ef;
	border-radius: 10px;
	background: #fbfdff;
}

/* Popup integration */
#popups > .import-wizard-dialog {
	top: 7vh !important;
	width: min(900px, calc(100vw - 32px)) !important;
	max-width: min(900px, calc(100vw - 32px)) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-height: calc(100vh - 32px) !important;
	height: auto !important;
	padding-bottom: 1rem !important;
}

#popups .import-wizard-dialog .dialog_content {
	height: auto !important;
	max-height: calc(100vh - 180px) !important;
	overflow: hidden !important;
}

#popups .import-wizard-dialog [data-id='params_content'] {
	display: flex;
	flex-direction: column;
	min-height: 0 !important;
}

#popups .import-wizard-dialog > .buttons {
	display: none !important;
}


/* =========================================
   Export Templates Wizard — Theme-aware Styles
   Uses the app's CSS custom properties so it
   respects light / dark / custom themes.
   ========================================= */

/* Overlay Backdrop */
.cw-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 99000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: cw-fade-in 0.2s ease forwards;
}

@keyframes cw-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Wizard Container */
.cw-wizard {
  width: min(820px, 96vw);
  min-height: 700px;
  max-height: 92vh;
  background: var(--block-background-color, #fff);
  border: 1px solid var(--border-color, #d7d7d7);
  border-radius: 10px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: cw-slide-up 0.25s cubic-bezier(0.34, 1.36, 0.64, 1) forwards;
}

@keyframes cw-slide-up {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ---- Header ---- */
.cw-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 12px;
  background: var(--header-background-color, #fff);
  border-bottom: 1px solid var(--border-color, #d7d7d7);
  flex-shrink: 0;
}

.cw-header-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-color, #0F467C);
  display: flex;
  align-items: center;
  gap: 8px;
}

.cw-header-title svg {
  stroke: var(--brand-color, #0F467C);
}

.cw-close-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-color, #d7d7d7) !important;
  background: var(--button-background-color, #f9f9fa) !important;
  border-radius: 5px !important;
  color: var(--text-color, #202124) !important;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  box-shadow: none !important;
  line-height: 1;
  padding: 0;
}

.cw-close-btn:hover {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #dc2626 !important;
}

/* ---- Step Indicator ---- */
.cw-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px 32px 14px;
  gap: 0;
  flex-shrink: 0;
  background: var(--section-background-color, #f9f9f9);
  border-bottom: 1px solid var(--border-color, #d7d7d7);
}

.cw-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  position: relative;
  flex: 1;
}

.cw-step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--border-color, #d7d7d7);
  background: var(--block-background-color, #fff);
  color: var(--text-color-muted, #888);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}

.cw-step.active .cw-step-circle {
  border-color: var(--brand-color, #0F467C);
  background: var(--brand-color, #0F467C);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(15, 70, 124, 0.15);
}

.cw-step.done .cw-step-circle {
  border-color: #16a34a;
  background: #16a34a;
  color: #fff;
}

.cw-step-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-color-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color 0.25s;
}

.cw-step.active .cw-step-label {
  color: var(--brand-color, #0F467C);
}

.cw-step.done .cw-step-label {
  color: #16a34a;
}

/* Step connector line */
.cw-step::before {
  content: '';
  position: absolute;
  top: 16px;
  left: calc(-50% + 16px);
  right: calc(50% + 16px);
  height: 2px;
  background: var(--border-color, #d7d7d7);
  z-index: 1;
  transition: background 0.3s;
}

.cw-step:first-child::before {
  display: none;
}

.cw-step.done::before,
.cw-step.active::before {
  background: var(--brand-color, #0F467C);
}

/* ---- Body ---- */
.cw-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}

/* Each panel is hidden by default; .cw-panel-active shows it */
.cw-panel {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.cw-panel.cw-panel-active {
  display: flex;
  animation: cw-panel-fade 0.22s ease forwards;
}

@keyframes cw-panel-fade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Step 1: Select Templates ---- */
.cw-search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-color, #d7d7d7);
  flex-shrink: 0;
  background: var(--block-background-color, #fff);
}

.cw-search-wrap {
  flex: 1;
  position: relative;
}

.cw-search-ic {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  pointer-events: none;
  stroke: var(--text-color-muted, #888);
  fill: none;
}

.cw-search-input {
  width: 100%;
  padding: 7px 32px 7px 34px !important;
  /* right-pad leaves room for clear btn */
  border-radius: 5px !important;
  border: 1px solid var(--input-border-color, #ccc) !important;
  background: var(--input-background-color, #fff) !important;
  color: var(--input-text-color, #0c0c0d) !important;
  font-size: 12px !important;
  outline: none;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

.cw-search-input:focus {
  border-color: var(--brand-color, #0F467C) !important;
  box-shadow: 0 0 0 2px rgba(15, 70, 124, 0.1);
}

/* Clear (×) button inside search */
.cw-search-clear {
  position: absolute !important;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px !important;
  height: 18px !important;
  border: none !important;
  background: var(--area-background-color, #e5e7eb) !important;
  border-radius: 50% !important;
  color: var(--text-color-muted, #666) !important;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  box-shadow: none !important;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
  visibility: visible !important;
}

.cw-search-clear:hover {
  background: var(--brand-color, #0F467C) !important;
  color: #fff !important;
}


.cw-select-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-color, #0F467C);
  white-space: nowrap;
  min-width: 75px;
  text-align: right;
  background: rgba(15, 70, 124, 0.06);
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(15, 70, 124, 0.15);
}

/* List Column Header */
.cw-list-header {
  display: flex;
  align-items: center;
  padding: 7px 20px;
  background: var(--section-background-color, #f9f9f9);
  border-bottom: 1px solid #f1f5f9;
  flex-shrink: 0;
}

.cw-list-header .cw-col-name {
  flex: 1;
}

.cw-list-header .cw-col-name label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-color-muted, #666);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  margin: 0;
}

.cw-list-header .cw-col-date {
  width: 150px;
  text-align: right;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-color-muted, #666);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Scrollable template list */
.cw-template-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.cw-template-list::-webkit-scrollbar {
  width: 6px;
}

.cw-template-list::-webkit-scrollbar-track {
  background: var(--section-background-color, #f9f9f9);
}

.cw-template-list::-webkit-scrollbar-thumb {
  background: var(--border-color, #ccc);
  border-radius: 3px;
}

/* Loading */
.cw-list-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 0;
  gap: 10px;
  color: var(--text-color-muted, #888);
  font-size: 13px;
}

.cw-spinner {
  width: 20px;
  height: 20px;
  border: 2.5px solid var(--border-color, #ddd);
  border-top-color: var(--brand-color, #0F467C);
  border-radius: 50%;
  animation: cw-spin 0.7s linear infinite;
}

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

/* Empty state */
.cw-empty {
  text-align: center;
  padding: 40px 24px;
  color: var(--text-color-muted, #888);
  font-size: 13px;
}

.cw-empty svg {
  display: block;
  margin: 0 auto 10px;
  stroke: var(--border-color, #ccc);
}

/* Template Row */
.cw-template-row {
  display: flex;
  align-items: center;
  padding: 13px 20px;
  gap: 12px;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.12s;
  user-select: none;
}

.cw-template-row:hover {
  background: var(--dropdown-hover-color, #e2eefc);
}

.cw-template-row.selected {
  background: rgba(15, 70, 124, 0.06);
}

/* Custom checkbox visual */
.cw-checkbox {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 2px solid var(--border-color, #ccc);
  background: var(--input-background-color, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}

.cw-template-row.selected .cw-checkbox {
  border-color: var(--brand-color, #0F467C);
  background: var(--brand-color, #0F467C);
}

.cw-template-row.selected .cw-checkbox::after {
  content: '';
  width: 4px;
  height: 8px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translateY(-1px);
  display: block;
}

/* ── Dashboard Actions Group ─────────────────────────────────────────── */
.mdb_actions_group {
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
}

.mdb_action_btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid transparent;
  outline: none;
  height: 38px;
  white-space: nowrap;
}

.mdb_action_primary {
  background-color: var(--brand-color) !important;
  color: white !important;
  box-shadow: 0 2px 4px rgba(0, 150, 136, 0.2);
}

.mdb_action_primary:hover {
  background-color: var(--brand-color) !important;
  filter: brightness(0.9);
  /* Subtle darkening for the shade difference */
  transform: translateY(-1px);
}

.mdb_action_secondary {
  background-color: white;
  color: #37474f;
  border-color: #cfd8dc;
}

.mdb_action_secondary:hover {
  border-color: var(--brand-color);
  color: var(--brand-color);
  background-color: #f1f8f7;
  transform: translateY(-1px);
}

.mdb_action_btn svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.mdb_action_btn:hover svg {
  transform: scale(1.1);
}

.mdb_action_btn span {
  line-height: 1;
}

/* Override existing dashboard btn if it exists */
.cw-dashboard-btn {
  display: none !important;
}

/* File icon */
.cw-tmp-icon {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  background: rgba(15, 70, 124, 0.08);
  border: 1px solid rgba(15, 70, 124, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cw-tmp-icon svg {
  stroke: var(--brand-color, #0F467C);
}

.cw-tmp-info {
  flex: 1;
  min-width: 0;
}

.cw-tmp-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-color, #202124);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cw-tmp-meta {
  font-size: 10px;
  color: var(--text-color-muted, #888);
  margin-top: 1px;
  font-family: monospace;
}

.cw-tmp-date {
  font-size: 11px;
  color: var(--text-color-muted, #888);
  width: 140px;
  text-align: right;
  flex-shrink: 0;
}

/* Pagination */
.cw-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 20px;
  border-top: 1px solid var(--border-color, #d7d7d7);
  flex-shrink: 0;
  background: var(--section-background-color, #f9f9f9);
}

.cw-page-btn {
  padding: 5px 16px !important;
  border-radius: 5px !important;
  border: 1px solid var(--border-color, #d7d7d7) !important;
  background: var(--button-background-color, #f9f9fa) !important;
  color: var(--text-color, #202124) !important;
  font-size: 12px !important;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: none !important;
}

.cw-page-btn:hover:not(:disabled) {
  background: var(--brand-color, #0F467C) !important;
  border-color: var(--brand-color, #0F467C) !important;
  color: #fff !important;
}

.cw-page-btn:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed;
  visibility: visible !important;
}

.cw-page-info {
  font-size: 12px;
  color: var(--text-color-muted, #888);
  min-width: 100px;
  text-align: center;
}

/* ---- Step 2: Review ---- */
.cw-revicw-header {
  padding: 14px 20px 10px;
  flex-shrink: 0;
  background: var(--section-background-color, #f9f9f9);
  border-bottom: 1px solid var(--border-color, #d7d7d7);
}

.cw-revicw-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-color, #202124);
}

.cw-revicw-subtitle {
  font-size: 12px;
  color: var(--text-color-muted, #666);
  margin-top: 2px;
}

.cw-revicw-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.cw-revicw-list::-webkit-scrollbar {
  width: 6px;
}

.cw-revicw-list::-webkit-scrollbar-thumb {
  background: var(--border-color, #ccc);
  border-radius: 3px;
}

.cw-revicw-row {
  display: flex;
  align-items: center;
  padding: 9px 20px;
  gap: 12px;
  border-bottom: 1px solid var(--border-color, #eee);
  animation: cw-row-in 0.18s ease forwards;
}

@keyframes cw-row-in {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.cw-revicw-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(15, 70, 124, 0.1);
  border: 1px solid rgba(15, 70, 124, 0.2);
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-color, #0F467C);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cw-revicw-info {
  flex: 1;
  min-width: 0;
}

.cw-revicw-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-color, #202124);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cw-revicw-id {
  font-size: 10px;
  color: var(--text-color-muted, #888);
  margin-top: 2px;
  font-family: monospace;
}

.cw-remove-btn {
  width: 24px !important;
  height: 24px !important;
  border: 1px solid #fca5a5 !important;
  background: #fee2e2 !important;
  border-radius: 5px !important;
  color: #dc2626 !important;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
  flex-shrink: 0;
  line-height: 1;
  padding: 0;
  box-shadow: none !important;
  visibility: visible !important;
}

.cw-remove-btn:hover {
  background: #fecaca !important;
}

/* ---- Step 3: Export Progress ---- */
.cw-export-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px 40px;
  gap: 18px;
}

.cw-export-icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(15, 70, 124, 0.08);
  border: 2px solid rgba(15, 70, 124, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: cw-pulse 2s ease-in-out infinite;
}

@keyframes cw-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(15, 70, 124, 0.25);
  }

  50% {
    box-shadow: 0 0 0 10px rgba(15, 70, 124, 0);
  }
}

.cw-export-status-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-color, #202124);
  text-align: center;
}

.cw-export-sub-text {
  font-size: 12px;
  color: var(--text-color-muted, #888);
  text-align: center;
  margin-top: -10px;
}

.cw-progress-wrap {
  width: 100%;
  max-width: 420px;
}

.cw-progress-track {
  height: 6px;
  background: var(--border-color, #e5e7eb);
  border-radius: 6px;
  overflow: hidden;
}

.cw-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 6px;
  background: var(--brand-color, #0F467C);
  transition: width 0.3s ease;
  position: relative;
  overflow: hidden;
}

.cw-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: cw-shimmer 1.4s linear infinite;
}

@keyframes cw-shimmer {
  from {
    left: -100%;
  }

  to {
    left: 200%;
  }
}

.cw-progress-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-color-muted, #888);
}

/* Success / Error states */
.cw-export-success .cw-export-icon {
  background: rgba(22, 163, 74, 0.1);
  border-color: #16a34a;
  animation: none;
  box-shadow: 0 0 0 8px rgba(22, 163, 74, 0.08);
}

.cw-export-error .cw-export-icon {
  background: rgba(220, 38, 38, 0.08);
  border-color: #dc2626;
  animation: none;
}

/* ---- Footer ---- */
.cw-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid var(--border-color, #d7d7d7);
  flex-shrink: 0;
  background: var(--section-background-color, #f9f9f9);
  gap: 10px;
}

.cw-footer-left {
  display: flex;
  gap: 8px;
}

.cw-footer-right {
  display: flex;
  gap: 8px;
}

/* Buttons */
.cw-btn {
  padding: 7px 18px !important;
  border-radius: 5px !important;
  font-size: 13px !important;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border-color, #d7d7d7) !important;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

.cw-btn-secondary {
  background: var(--button-background-color, #f9f9fa) !important;
  color: var(--text-color, #202124) !important;
}

.cw-btn-secondary:hover {
  background: var(--button-background-color-hover, #ddd) !important;
}

.cw-btn-primary {
  background: var(--brand-color, #0F467C) !important;
  color: #fff !important;
  border-color: var(--brand-color, #0F467C) !important;
  box-shadow: 0 2px 8px rgba(15, 70, 124, 0.25) !important;
}

.cw-btn-primary:hover:not(:disabled) {
  background: var(--brand-hover-color, #0B355E) !important;
  box-shadow: 0 4px 12px rgba(15, 70, 124, 0.35) !important;
}

.cw-btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  visibility: visible !important;
}

/* Dashboard Header Button */
.cw-dashboard-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: 5px;
  border: 1px solid var(--brand-color, #0F467C);
  background: transparent;
  color: var(--brand-color, #0F467C);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
  font-family: 'Poppins', sans-serif;
  box-shadow: none;
}

.cw-dashboard-btn:hover {
  background: var(--brand-color, #0F467C);
  color: #fff;
}

.cw-dashboard-btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  stroke: currentColor;
}

/* Select-all checkbox */
.cw-select-all-cb {
  width: 14px !important;
  height: 14px !important;
  accent-color: var(--brand-color, #0F467C);
  cursor: pointer;
  flex-shrink: 0;
}

/* Template type badges */
.cw-type-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-right: 5px;
  vertical-align: middle;
}

.cw-type-own-template {
  background: rgba(15, 70, 124, 0.1);
  color: var(--brand-color, #0F467C);
  border: 1px solid rgba(15, 70, 124, 0.2);
}

.cw-type-group-template {
  background: rgba(22, 163, 74, 0.1);
  color: #15803d;
  border: 1px solid rgba(22, 163, 74, 0.2);
}

.cw-type-shared-template {
  background: rgba(217, 119, 6, 0.1);
  color: #b45309;
  border: 1px solid rgba(217, 119, 6, 0.2);
}

.cw-type-library {
  background: rgba(109, 40, 217, 0.1);
  color: #7c3aed;
  border: 1px solid rgba(109, 40, 217, 0.2);
}

/* fallback for unknown types */
.cw-type-badge:not([class*="cw-type-own"]):not([class*="cw-type-group"]):not([class*="cw-type-shared"]):not([class*="cw-type-library"]) {
  background: var(--area-background-color, #e5e7eb);
  color: var(--text-color-muted, #666);
  border: 1px solid var(--border-color, #d1d5db);
}

/* Meta line layout */
.cw-tmp-meta,
.cw-revicw-id {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}


/* ---- Floating Progress (Top Right) ---- */
.cw-floating-progress {
  position: fixed;
  top: 24px;
  right: 24px;
  width: 320px;
  background: var(--block-background-color, #fff);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  padding: 16px;
  z-index: 100001;
  border: 1px solid var(--border-color, #d7d7d7);
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: cw-float-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  font-family: 'Poppins', sans-serif;
}

@keyframes cw-float-in {
  from {
    opacity: 0;
    transform: translateX(40px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.cw-floating-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-color, #0F467C);
}

.cw-floating-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-color, #0F467C);
}

.cw-floating-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-color-muted, #888);
  cursor: pointer;
  font-size: 18px;
  padding: 0;
  line-height: 1;
}

.cw-floating-close:hover {
  color: #dc2626;
}

.cw-floating-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cw-floating-status {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-color, #1a1f36);
}

.cw-floating-sub {
  font-size: 11px;
  color: var(--text-color-muted, #697386);
}

.cw-floating-progress-track {
  height: 6px;
  background: #f0f4f8;
  border-radius: 10px;
  overflow: hidden;
}

.cw-floating-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--brand-color, #0F467C);
  border-radius: 10px;
  transition: width 0.3s ease;
}

.cw-floating-footer {
  display: flex;
  justify-content: flex-end;
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-color, #0F467C);
}

/* Multiselect Dropdown */
.cw-multiselect-container .cw-multiselect-dropdown {
  max-height: 200px;
}

.cw-multiselect-container .d-none {
  display: none !important;
}

.cw-multiselect-dropdown::-webkit-scrollbar {
  width: 6px;
}

.cw-multiselect-dropdown::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

.cw-multiselect-header:hover {
  background: #f9f9f9 !important;
}

/* Tree View & Summary Results */
/* Tree View & Summary Results */
.cw-results-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 16px 20px 12px;
  box-sizing: border-box;
}

.cw-results-summary {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  flex-shrink: 0;
}

.cw-summary-card {
  flex: 1;
  padding: 14px 12px 12px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border-color, #e5e7eb);
  background: var(--block-background-color, #fff);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.15s ease;
}

.cw-summary-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.cw-summary-card.success {
  border-color: #6ee7b7;
  background: linear-gradient(160deg, #f0fdf4 0%, #ffffff 100%);
}

.cw-summary-card.success .cw-summary-val {
  color: #16a34a;
}

.cw-summary-card.failed {
  border-color: #fca5a5;
  background: linear-gradient(160deg, #fef2f2 0%, #ffffff 100%);
}

.cw-summary-card.failed .cw-summary-val {
  color: #dc2626;
}

.cw-summary-card.total {
  border-color: #93c5fd;
  background: linear-gradient(160deg, #eff6ff 0%, #ffffff 100%);
}

.cw-summary-card.total .cw-summary-val {
  color: var(--brand-color, #0F467C);
}

.cw-summary-val {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.cw-summary-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-color-muted, #666);
  margin-top: 5px;
  letter-spacing: 0.02em;
}

/* Tree View Container */
.cw-tree-container {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  background: var(--input-background-color, #fff);
  padding: 12px 16px;
}

.cw-tree-view {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Tree Node */
.cw-tree-node {
  display: flex;
  flex-direction: column;
  background: transparent;
  margin-bottom: 2px;
  position: relative;
}

/* Node Header Row */
.cw-node-row {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  border-radius: 4px;
  transition: background 0.15s ease;
}

.cw-node-row:hover {
  background: var(--dropdown-hover-color, #e2eefc);
}

/* Collapse/Expand Toggle */
.cw-node-toggle {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color-muted, #888);
  cursor: pointer;
  transition: transform 0.15s ease;
  z-index: 2;
}

.cw-node-toggle.collapsed svg {
  transform: rotate(-90deg);
}

/* Node Icon (Folder / Document) */
.cw-node-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-color, #0F467C);
  flex-shrink: 0;
}

.cw-node-title-area {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.cw-node-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-color, #202124);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cw-node-id {
  font-size: 10px;
  color: var(--text-color-muted, #888);
  font-family: monospace;
}

/* Node Badges */
.cw-node-badges {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Node Status Pills */
.cw-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cw-status-pill.success {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.cw-status-pill.failed {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.cw-status-pill.skipped {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fef3c7;
}

/* Children Container */
.cw-node-children {
  display: flex;
  flex-direction: column;
  padding-left: 20px;
  position: relative;
}

/* Vertical guide line */
.cw-node-children::before {
  content: '';
  position: absolute;
  top: -4px;
  bottom: 12px;
  left: 7px;
  width: 1px;
  border-left: 1px dashed #cbd5e1;
}

/* Horizontal branch line for child nodes */
.cw-node-children .cw-tree-node::before {
  content: '';
  position: absolute;
  top: 14px;
  left: -13px;
  width: 10px;
  height: 1px;
  border-top: 1px dashed #cbd5e1;
}

/* Failure Reason Box */
.cw-node-error {
  margin: 2px 8px 6px 28px;
  padding: 6px 10px;
  background: #fff5f5;
  border: 1px solid #fed7d7;
  border-radius: 4px;
  font-size: 11px;
  color: #c53030;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  cursor: help;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cw-node-error:hover {
  background: #fde8e8;
  border-color: #f8b4b4;
}

.cw-node-error span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  line-height: 1.4;
  max-height: 2.8em;
}

.cw-node-error-icon {
  margin-top: 2px;
  flex-shrink: 0;
}

/* Floating Error Tooltip/Popover */
.cw-error-tooltip {
  position: fixed;
  z-index: 1000000;
  background: #fff5f5;
  border: 1px solid #fed7d7;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 11.5px;
  color: #c53030;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  max-width: 480px;
  word-break: break-word;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  line-height: 1.4;
  font-family: 'Poppins', sans-serif;
}

/* Processing / Loader State */
.cw-processing-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: #fbfbfb;
  border: 1px solid #e3e8f0;
  border-radius: 8px;
  text-align: center;
  margin: 20px 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  animation: cw-fade-in 0.3s ease-in-out;
}

.cw-processing-title {
  margin: 16px 0 6px 0;
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
}

.cw-processing-text {
  margin: 0;
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.5;
}

.cw-processing-progress {
  width: 100%;
  max-width: 200px;
  height: 4px;
  background: #e2e8f0;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  margin-top: 16px;
}

.cw-processing-bar {
  position: absolute;
  height: 100%;
  width: 50%;
  background: var(--brand-color, #104374);
  border-radius: 2px;
  animation: cw-loader-pulse 1.5s infinite ease-in-out;
}

@keyframes cw-loader-pulse {
  0% {
    left: -50%;
  }

  100% {
    left: 100%;
  }
}

/* Template type badges */
.cw-type-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-left: 8px;
  vertical-align: middle;
}

.cw-type-own-template {
  background: transparent;
  color: var(--brand-color, #0F467C);
  border: 1px solid var(--brand-color, #0F467C);
}

.cw-type-group-template {
  background: transparent;
  color: #15803d;
  border: 1px solid #15803d;
}

.cw-type-shared-template {
  background: transparent;
  color: #b45309;
  border: 1px solid #b45309;
}

.cw-type-library {
  background: transparent;
  color: #7c3aed;
  border: 1px solid #7c3aed;
}

/* fallback for unknown types */
.cw-type-badge:not([class*="cw-type-own"]):not([class*="cw-type-group"]):not([class*="cw-type-shared"]):not([class*="cw-type-library"]) {
  background: transparent;
  color: var(--brand-color, #0F467C);
  border: 1px solid var(--brand-color, #0F467C);
}
/* template_comparison.css */

.tc-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 11000;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    animation: tc-fade-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes tc-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.tc-dialog {
    position: relative !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    color: #1e293b !important;
    border: 1px solid #e2e8f0 !important;
    animation: tc-slide-up 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.tc-dialog:not(.maximized) {
    width: 95vw !important;
    max-width: 1440px !important;
    height: 90vh !important;
    border-radius: 12px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

@keyframes tc-slide-up {
    from { transform: translateY(20px) scale(0.98); }
    to { transform: translateY(0) scale(1); }
}

/* Header & Meta Panel */
.tc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 24px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.tc-header-title-area h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tc-header-meta-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
    font-size: 11px;
    color: #64748b;
}

.tc-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.tc-meta-label {
    font-weight: 600;
    color: #475569;
}

.tc-badge-status {
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 9px;
    text-transform: uppercase;
}

.tc-badge-status.active {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.tc-badge-status.dirty {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}

.tc-close-btn {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #475569;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 500;
    transition: all 0.2s;
}

.tc-close-btn:hover {
    background-color: #f1f5f9;
    color: #0f172a;
    border-color: #94a3b8;
}

/* Tabs Panel */
.tc-tabs-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    padding: 0 24px;
}

.tc-tabs-list {
    display: flex;
    gap: 24px;
}

.tc-tab-trigger {
    padding: 14px 4px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    border: none;
    background: transparent;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tc-tab-trigger:hover {
    color: var(--brand-color, #00796B);
}

.tc-tab-trigger.active {
    color: var(--brand-color, #00796B);
    border-bottom-color: var(--brand-color, #00796B);
}

.tc-tab-badge {
    background: #f1f5f9;
    color: #475569;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 500;
}

.tc-tab-trigger.active .tc-tab-badge {
    background: rgba(0, 121, 107, 0.1);
    color: var(--brand-color, #00796B);
}

/* Tab Panels */
.tc-tab-panel {
    flex: 1;
    display: none;
    overflow: hidden;
}

.tc-tab-panel.active {
    display: flex !important;
    flex-direction: column;
}

/* Toolbar & Selects */
.tc-toolbar-panel {
    padding: 8px 16px !important;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.tc-version-selectors {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0 !important;
}

.tc-select-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #475569;
}

.tc-select-wrapper select {
    padding: 6px 32px 6px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background-color: #ffffff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
    min-width: 150px;
    transition: all 0.2s;
}

.tc-select-wrapper select:focus {
    border-color: var(--brand-color, #00796B);
    box-shadow: 0 0 0 2px rgba(0, 121, 107, 0.15);
}

.tc-swap-arrow {
    box-sizing: border-box !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    outline: none !important;
    line-height: 1 !important;
}

.tc-swap-arrow:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

/* Maximized Dialog State */
.tc-dialog.maximized {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 9999 !important;
}

/* Ensure Alertify notifier is always on top */
.alertify-notifier {
    z-index: 20000 !important;
}
.ajs-modal {
    z-index: 20001 !important;
}

/* Summary Cards */
.tc-summary-grid {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px;
    align-items: center;
    flex: 1 !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
}

.tc-summary-card-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 4px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 90px;
    height: 30px;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    flex-shrink: 0 !important;
}

.tc-summary-card-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px -1px rgba(0,0,0,0.05);
    border-color: #cbd5e1;
}

.tc-summary-card-item.selected {
    border-color: var(--brand-color, #00796B);
    background: rgba(0, 121, 107, 0.04);
}

.tc-sum-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.tc-sum-icon.added { background: #ecfdf5; color: #10b981; }
.tc-sum-icon.removed { background: #fef2f2; color: #ef4444; }
.tc-sum-icon.modified { background: #fffbeb; color: #f59e0b; }
.tc-sum-icon.total { background: #f8fafc; color: #475569; }

.tc-sum-data {
    display: flex;
    flex-direction: column;
}

.tc-sum-val {
    font-size: 11px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.1;
}

.tc-sum-lbl {
    font-size: 8px;
    color: #64748b;
    font-weight: 600;
    white-space: nowrap;
}

/* Compare Content Layout */
.tc-compare-layout {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.tc-diff-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid #e2e8f0;
}

.tc-diff-toolbar {
    padding: 8px 16px;
    border-bottom: 1px solid #e2e8f0;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tc-diff-filters-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.tc-search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.tc-search-icon {
    position: absolute;
    left: 10px;
    color: #64748b;
    pointer-events: none;
    z-index: 2;
}

.tc-search-box input {
    box-sizing: border-box !important;
    height: 32px !important;
    width: 240px !important;
    padding: 0 30px 0 32px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-family: inherit !important;
    color: #0f172a !important;
    outline: none !important;
    background: #ffffff !important;
    transition: all 0.15s ease-in-out !important;
}

.tc-search-box input:focus {
    border-color: var(--brand-color, #00796B) !important;
    box-shadow: 0 0 0 2px rgba(0, 121, 107, 0.15) !important;
}

.tc-search-clear-btn {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.15s;
    z-index: 2;
}

.tc-search-clear-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.tc-diff-toggle-option {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #475569;
    cursor: pointer;
}

.tc-diff-toggle-option input {
    accent-color: var(--brand-color, #00796B);
}

.tc-diff-actions-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tc-icon-btn {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
    color: #475569;
}

.tc-icon-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #94a3b8;
}

/* Split Pane Diffs */
.tc-diff-split-editor {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow-y: auto;
    background: #0f172a; /* Sleek dark code view */
    color: #e2e8f0;
    font-family: 'Consolas', 'Fira Code', monospace;
    font-size: 11px;
    line-height: 1.5;
}

.tc-diff-pane {
    display: flex;
    flex-direction: column;
    border-right: 1px solid #1e293b;
    overflow-x: auto;
}

.tc-diff-pane-header {
    background: #1e293b;
    padding: 6px 16px;
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid #0f172a;
    display: flex;
    justify-content: space-between;
}

.tc-diff-code-body {
    padding: 12px 0;
}

.tc-diff-line {
    display: flex;
    white-space: pre;
    min-height: 18px;
}

.tc-diff-ln {
    width: 40px;
    color: #475569;
    text-align: right;
    padding-right: 12px;
    user-select: none;
    border-right: 1px solid #1e293b;
    margin-right: 8px;
}

.tc-diff-txt {
    flex: 1;
    padding-left: 4px;
}

/* Diff Highlight Classes */
.tc-diff-line.added {
    background-color: rgba(16, 185, 129, 0.2);
}
.tc-diff-line.added .tc-diff-ln {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.tc-diff-line.removed {
    background-color: rgba(239, 68, 68, 0.2);
}
.tc-diff-line.removed .tc-diff-ln {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.tc-diff-line.modified {
    background-color: rgba(245, 158, 11, 0.2);
}
.tc-diff-line.modified .tc-diff-ln {
    background-color: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.tc-diff-line.empty-placeholder {
    background-color: rgba(30, 41, 59, 0.4);
    opacity: 0.3;
}

/* Audit Trails Tab */
.tc-audit-filters {
    padding: 12px 24px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.tc-audit-filter-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #475569;
}

.tc-audit-filter-item select, .tc-audit-filter-item input {
    padding: 5px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    font-family: inherit;
    font-size: 11px;
    outline: none;
}

.tc-audit-grid-container {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px;
}

.tc-audit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.tc-audit-table th {
    background: #f1f5f9;
    padding: 8px 12px;
    font-weight: 600;
    color: #475569;
    text-align: left;
    border-bottom: 2px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 1;
}

.tc-audit-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #e2e8f0;
    color: #334155;
    vertical-align: middle;
}

.tc-audit-table tbody tr {
    cursor: pointer;
    transition: background 0.15s;
}

.tc-audit-table tbody tr:hover {
    background: #f8fafc;
}

.tc-audit-action-badge {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.tc-audit-action-badge.add { background: #ecfdf5; color: #047857; }
.tc-audit-action-badge.delete { background: #fef2f2; color: #b91c1c; }
.tc-audit-action-badge.update { background: #fffbeb; color: #b45309; }
.tc-audit-action-badge.rollback { background: #f5f3ff; color: #6d28d9; }

.tc-audit-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--brand-color, #00796B);
    color: #ffffff;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 600;
    margin-right: 6px;
}

/* Activity Drawer Panel */
.tc-activity-drawer {
    position: absolute;
    top: 0;
    right: 0;
    width: 420px;
    height: 100%;
    background: #ffffff;
    border-left: 1px solid #e2e8f0;
    box-shadow: -10px 0 25px -5px rgba(0, 0, 0, 0.1);
    z-index: 12000;
    transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

.tc-activity-drawer.open {
    transform: translateX(0);
}

.tc-drawer-header {
    padding: 16px 20px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tc-drawer-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

.tc-drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tc-drawer-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tc-drawer-section-lbl {
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
}

.tc-drawer-section-val {
    font-size: 12px;
    color: #1e293b;
    font-weight: 500;
}

.tc-drawer-diff-preview {
    font-family: 'Consolas', monospace;
    font-size: 11px;
    background: #0f172a;
    color: #e2e8f0;
    padding: 12px;
    border-radius: 8px;
    overflow-x: auto;
    max-height: 200px;
    border: 1px solid #1e293b;
}

/* Version Manager Timeline */
.tc-version-timeline {
    padding: 24px;
    flex: 1;
    overflow-y: auto;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tc-timeline-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.tc-timeline-item.active {
    border-left: 4px solid var(--brand-color, #00796B);
}

.tc-timeline-item-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.tc-timeline-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tc-timeline-version-name {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

.tc-timeline-meta-row {
    display: flex;
    gap: 16px;
    font-size: 11px;
    color: #64748b;
}

.tc-timeline-comment {
    font-size: 12px;
    color: #334155;
    background: #f8fafc;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    margin-top: 4px;
    max-width: 600px;
}

.tc-timeline-actions-right {
    display: flex;
    gap: 8px;
    align-items: center;
}

.tc-btn-action {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.tc-btn-action.primary {
    background: var(--brand-color, #00796B);
    color: #ffffff;
}

.tc-btn-action.primary:hover {
    opacity: 0.9;
}

.tc-btn-action.secondary {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #475569;
}

.tc-btn-action.secondary:hover {
    background: #f1f5f9;
    color: #0f172a;
}

/* Loading Overlay & Skeleton */
.tc-loading-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
}

.tc-loading-container.active {
    display: flex !important;
    opacity: 1;
    pointer-events: auto;
}

.tc-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--brand-color, #00796B);
    border-radius: 50%;
    animation: tc-spin 1s linear infinite;
}

@keyframes tc-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.tc-loading-text {
    margin-top: 12px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}

/* Empty states styling */
.tc-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: #64748b;
}

.tc-empty-illustration {
    font-size: 48px;
    margin-bottom: 12px;
}

.tc-empty-title {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
}

.tc-empty-desc {
    font-size: 12px;
    color: #64748b;
    max-width: 320px;
}

/* Custom Searchable Dropdown Styles */
.tc-custom-select-container {
    position: relative;
    width: 220px;
    font-family: inherit;
}

.tc-custom-select-trigger {
    width: 100%;
    height: 32px;
    padding: 0 12px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 600;
    color: #1e293b;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.tc-custom-select-trigger:focus, .tc-custom-select-container.open .tc-custom-select-trigger {
    border-color: var(--brand-color, #0F467C) !important;
    box-shadow: 0 0 0 2px rgba(15, 70, 124, 0.15) !important;
}

.tc-custom-select-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    max-height: 250px;
    overflow: hidden;
}

.tc-custom-select-search-wrapper {
    padding: 6px 8px;
    border-bottom: 1px solid #e2e8f0;
}

.tc-custom-select-search {
    width: 100%;
    height: 28px;
    padding: 0 8px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 11px;
    outline: none;
    box-sizing: border-box;
}

.tc-custom-select-search:focus {
    border-color: var(--brand-color, #0F467C) !important;
    box-shadow: 0 0 0 2px rgba(15, 70, 124, 0.15) !important;
}

.tc-custom-select-options {
    overflow-y: auto;
    flex: 1;
    max-height: 200px;
}

.tc-custom-select-option {
    padding: 8px 12px;
    font-size: 11px;
    color: #334155;
    cursor: pointer;
    transition: background 0.1s;
    font-weight: 500;
}

.tc-custom-select-option:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.tc-custom-select-option.selected {
    background: var(--brand-color, #0F467C) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

.tc-custom-select-option.hidden {
    display: none;
}

#tc_aud_search:focus {
    border-color: var(--brand-color, #0F467C) !important;
    box-shadow: 0 0 0 2px rgba(15, 70, 124, 0.15) !important;
}

.tc-search-clear-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
}

/* Batch Mode Drawer Extensions & Badges */
.tc-audit-action-badge.batch_update {
    background: #fffbeb;
    color: #b45309;
}

.tc-drawer-badge.batch_update {
    background: #fffbeb;
    color: #b45309;
}

.tc-activity-drawer.batch-mode {
    width: 800px;
}

.tc-activity-drawer.batch-mode .tc-drawer-content {
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
}

.tc-drawer-batch-container {
    display: flex;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: #ffffff;
}

.tc-drawer-batch-left {
    width: 320px;
    min-width: 320px;
    border-right: 1px solid #e2e8f0;
    overflow-y: auto;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
}

.tc-drawer-batch-left-header {
    padding: 16px 20px;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    position: sticky;
    top: 0;
    z-index: 5;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tc-drawer-batch-list {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.tc-drawer-batch-item {
    padding: 14px 20px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #ffffff;
    border-left: 3px solid transparent;
}

.tc-drawer-batch-item:hover {
    background: #f8fafc;
}

.tc-drawer-batch-item.active {
    background: rgba(15, 70, 124, 0.04);
    border-left-color: var(--brand-color, #0F467C);
    padding-left: 17px;
}

.tc-drawer-batch-item-label {
    font-size: 12px;
    font-weight: 500;
    color: #334155;
    line-height: 1.5;
    word-break: break-word;
}

.tc-drawer-batch-item.active .tc-drawer-batch-item-label {
    font-weight: 600;
    color: var(--brand-color, #0F467C);
}

.tc-drawer-batch-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tc-drawer-batch-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}
.tc-drawer-batch-badge.add, .tc-drawer-batch-badge.create { background: #ecfdf5; color: #137333; }
.tc-drawer-batch-badge.delete { background: #fce8e6; color: #c5221f; }
.tc-drawer-batch-badge.update { background: #fef7e0; color: #b06000; }
.tc-drawer-batch-badge.rollback { background: #f3e8ff; color: #6b21a8; }

.tc-drawer-batch-right {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
}












/* =========================================
   Test Process Wizard - Modal Styles
   ========================================= */

/* Override the default modal constraints from popup.css for the Test Process Wizard */
#popups.performa-closed {
  pointer-events: none !important;
}

#popups .popup.performa {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  transform: translateX(0);
  width: 70vw !important;
  max-width: 70vw !important;
  min-width: 700px !important;
  height: 100vh !important;
  max-height: 100vh !important;
  min-height: 100vh !important;
  margin: 0 !important;
  border-radius: 16px 0 0 16px !important;
  /* Premium left-side rounded corners */
  border: none !important;
  border-left: 1px solid var(--border-color, #e5e7eb) !important;
  padding: 4rem 0 0 0 !important;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.12), 0 0 0 4000px rgba(0, 0, 0, 0.4) !important;
  /* Elegant drawer shadow + background dim overlay */
  display: flex !important;
  flex-direction: column !important;
  animation: slide-in-rtl 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  /* Premium entry transition */
  z-index: 1000 !important;
  overflow: hidden !important;
  transition: box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#popups .popup.performa.opening {
  animation: slide-in-rtl 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

#popups .popup.performa.closing {
  animation: slide-out-ltr 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.12), 0 0 0 4000px rgba(0, 0, 0, 0) !important;
}

#popups .popup.performa h2 {
  cursor: default !important;
  height: 4rem !important;
  line-height: 4rem !important;
  padding: 0 2rem !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: var(--text-color, #111827) !important;
  background-color: var(--section-background-color, #f9fafb) !important;
  border-bottom: 1px solid var(--border-color, #e5e7eb) !important;
}

#popups .popup.performa .close {
  margin-top: 1.25rem !important;
  margin-right: 1.5rem !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#popups .popup.performa .close:hover {
  transform: rotate(90deg) scale(1.1) !important;
  opacity: 0.8 !important;
}

/* RTL Slide-in Animation */
@keyframes slide-in-rtl {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

/* LTR Slide-out Animation */
@keyframes slide-out-ltr {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100%);
  }
}

/* Custom Scrollbars for Wizard body and lists */
#popups .popup.performa .tp-body::-webkit-scrollbar,
#popups .popup.performa .tp-table-container::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

#popups .popup.performa .tp-body::-webkit-scrollbar-track,
#popups .popup.performa .tp-table-container::-webkit-scrollbar-track {
  background: transparent;
}

#popups .popup.performa .tp-body::-webkit-scrollbar-thumb,
#popups .popup.performa .tp-table-container::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 10px;
}

#popups .popup.performa .tp-body::-webkit-scrollbar-thumb:hover,
#popups .popup.performa .tp-table-container::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
}

/* Responsive constraints for narrower viewports */
@media (max-width: 1500px) {
  #popups .popup.performa {
    width: 80vw !important;
    max-width: 80vw !important;
    min-width: 80vw !important;
  }
}

@media (max-width: 1200px) {
  #popups .popup.performa {
    width: 85vw !important;
    max-width: 85vw !important;
    min-width: 85vw !important;
  }
}

@media (max-width: 768px) {
  #popups .popup.performa {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    border-radius: 0 !important;
  }

  /* Switch grid to vertical column and adjust stepper sidebar to row */
  #popups .popup.performa .tp-wizard {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;
    grid-template-areas:
      "stepper"
      "body" !important;
  }

  #popups .popup.performa .tp-steps {
    flex-direction: row !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border-color, #e2e8f0) !important;
    padding: 12px 16px !important;
    gap: 12px !important;
    height: auto !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  #popups .popup.performa .tp-wizard.collapsed .tp-steps,
  #popups .popup.performa .tp-wizard.hide-sidebar .tp-steps {
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-bottom: none !important;
    overflow: hidden !important;
  }

  #popups .popup.performa .tp-step {
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px !important;
    background: transparent !important;
    flex: 1 !important;
  }

  #popups .popup.performa .tp-step-label {
    display: none !important;
    /* Hide labels to save space on mobile */
  }

  #popups .popup.performa .tp-step-circle {
    margin: 0 auto !important;
  }
}

#popups .popup.performa .dialog_content {
  max-height: none !important;
  max-width: none !important;
  height: calc(100% - 0rem) !important;
  width: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

#popups .popup.performa div[data-id="params_content"] {
  height: 100% !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

/* Force popup.js internal tables to expand fully */
#popups .popup.performa div[data-id="params_content"]>table,
#popups .popup.performa div[data-id="params_content"]>table>tbody,
#popups .popup.performa div[data-id="params_content"]>table>tbody>tr {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  flex: 1 !important;
}

#popups .popup.performa div[data-id="params_content"] td.html_value {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  flex: 1 !important;
}

/* Wizard Container with CSS Grid */
.tp-wizard {
  width: 100%;
  height: 100%;
  background: var(--block-background-color, #ffffff);
  display: grid !important;
  grid-template-columns: 240px 1fr !important;
  grid-template-rows: 1fr !important;
  grid-template-areas:
    "stepper body" !important;
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
  border-radius: 0 0 10px 10px;
  transition: grid-template-columns 0.3s ease !important;
}

.tp-wizard.collapsed {
  grid-template-columns: 72px 1fr !important;
}

.tp-wizard.collapsed .tp-steps {
  padding: 48px 10px 32px 10px !important;
}

.tp-wizard.collapsed .tp-step-label {
  display: none !important;
}

.tp-wizard.collapsed .tp-step-circle {
  display: flex !important;
}

.tp-wizard.collapsed .tp-step {
  justify-content: center !important;
  padding: 10px 0 !important;
}

.tp-sidebar-toggle {
  position: absolute;
  top: 24px;
  right: -12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color-muted, #64748b);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--border-color, #e2e8f0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  z-index: 10;
}

.tp-sidebar-toggle:hover {
  background: var(--hover-background, #f1f5f9);
  color: var(--brand-color, #0F467C);
  border-color: var(--brand-color, #0F467C);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.tp-wizard.collapsed .tp-sidebar-toggle {
  right: -12px;
  transform: none;
}

.tp-wizard.collapsed .tp-sidebar-toggle .tp-toggle-icon {
  transform: rotate(180deg);
}




/* ---- Stepper as a Left Sidebar Menu ---- */
.tp-steps {
  position: relative !important;
  grid-area: stepper !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 48px 16px 32px 16px !important;
  background: var(--section-background-color, #f8fafc) !important;
  border-bottom: none !important;
  border-right: 1px solid var(--border-color, #e2e8f0) !important;
  gap: 12px !important;
  height: 100% !important;
  flex-shrink: 0;
  box-sizing: border-box !important;
}

.tp-step {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  position: relative !important;
  padding: 10px 16px !important;
  margin: 4px 0 !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  border: 1px solid transparent !important;
  border-left: 3px solid transparent !important;
  background: transparent !important;
}

.tp-step:hover {
  background: var(--hover-background, #f1f5f9) !important;
}

.tp-step.active {
  background: #f1f5f9 !important;
  border: 1px solid var(--brand-color, #0F467C) !important;
  border-left: 4px solid var(--brand-color, #0F467C) !important;
}

.tp-step.done {
  border-left: 3px solid var(--brand-color, #0F467C) !important;
  /* Elegant brand-blue for completed step */
}

/* Hide step numbers completely by default, show in collapsed state */
.tp-step-circle {
  display: none !important;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #64748b;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.tp-step.active .tp-step-circle {
  background: var(--brand-color, #0F467C);
  color: white;
}

.tp-step.done .tp-step-circle {
  background: var(--brand-color, #0F467C);
  color: white;
  opacity: 0.8;
}

.tp-step-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-color, #1e293b) !important;
  text-transform: capitalize !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  transition: color 0.3s ease !important;
  margin: 0 !important;
  display: block !important;
  width: auto !important;
}

.tp-step.active .tp-step-label {
  color: var(--brand-color, #0F467C) !important;
  font-weight: 600 !important;
}

.tp-step.done .tp-step-label {
  color: var(--brand-color, #0F467C) !important;
}



.tp-body {
  grid-area: body !important;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #ffffff;
  position: relative;
}

.tp-panel {
  display: none;
  flex-direction: column;
  flex: 1;
  padding: 16px 24px;
  animation: tp-fade-in 0.3s ease forwards;
  overflow-y: auto;
  min-height: 0;
}

.tp-panel.tp-panel-fixed {
  overflow-y: hidden;
  padding-right: 20px;
  /* offset for hidden scrollbar */
}

.tp-panel.active {
  display: flex;
}

@keyframes tp-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Typography & Layout inside Panels */
.tp-panel-title {
  font-size: 16px !important;
  font-weight: 600;
  color: var(--text-color, #111827);
  margin: 0 0 4px 0 !important;
  line-height: 1.2;
}

.tp-panel-desc {
  font-size: 12px !important;
  color: var(--text-color-muted, #6b7280);
  margin: 0 0 16px 0 !important;
}

/* Tabs inside panels */
.tp-tabs {
  display: flex;
  gap: 16px;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  margin-bottom: 16px;
}

.tp-tab-btn {
  background: transparent;
  border: none;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-color-muted, #64748b);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  font-family: inherit;
  margin-bottom: -1px;
}

.tp-tab-btn:hover {
  color: var(--brand-color, #0F467C);
}

.tp-tab-btn.active {
  color: var(--brand-color, #0F467C);
  border-bottom-color: var(--brand-color, #0F467C);
}

.tp-tab-content {
  display: none;
  animation: tp-fade-in 0.3s ease forwards;
  height: 100%;
}

.tp-tab-content.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  max-height: 65vh;
  padding-right: 4px;
}

/* Page Item List */
.tp-page-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--border-color, #e2e8f0);
  background: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.tp-page-item:hover {
  background: var(--hover-background, #f8fafc);
  border-color: #cbd5e1;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}



.tp-page-item span {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-color, #334155);
}

.tp-pages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  max-height: 200px;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  background: #f1f5f9;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

/* Custom Scrollbar for tp-pages-grid */
.tp-pages-grid::-webkit-scrollbar {
  width: 6px;
}

.tp-pages-grid::-webkit-scrollbar-track {
  background: transparent;
  margin: 4px 0;
}

.tp-pages-grid::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 10px;
}

.tp-pages-grid::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
}

.tp-section {
  background: var(--section-background-color, #f9fafb);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.tp-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.tp-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color, #374151);
}

/* ---- Upload Area ---- */
.tp-upload-zone {
  border: 2px dashed var(--border-color, #cbd5e1);
  border-radius: 8px;
  padding: 32px 24px;
  text-align: center;
  background: #f8fafc;
  transition: all 0.2s ease;
  cursor: pointer;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 240px;
}

.tp-upload-zone:hover,
.tp-upload-zone.dragover {
  border-color: var(--brand-color, #0F467C);
  background: #f0f4f8;
}

.tp-upload-icon {
  margin-bottom: 12px;
  color: var(--brand-color, #0F467C);
}

.tp-upload-text {
  font-size: 14px;
  color: var(--text-color, #334155);
  font-weight: 500;
}

.tp-upload-subtext {
  font-size: 12px;
  color: var(--text-color-muted, #64748b);
  margin-top: 4px;
}

.tp-file-details {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: #ffffff;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 6px;
  gap: 12px;
  margin-top: 16px;
}

.tp-file-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border-radius: 4px;
  color: var(--brand-color, #0F467C);
}

.tp-file-info {
  flex: 1;
}

.tp-file-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-color, #1e293b);
}

.tp-file-meta {
  font-size: 11px;
  color: var(--text-color-muted, #64748b);
  display: flex;
  gap: 12px;
  margin-top: 2px;
}

/* Clear File Button */
.tp-btn-clear-file {
  background: transparent;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--text-color-muted, #64748b);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  border-radius: 50%;
}

.tp-btn-clear-file:hover {
  background: #fee2e2;
  color: #ef4444;
}

/* Forms & Inputs */
.tp-input-group {
  margin-bottom: 16px;
}

.tp-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-color, #475569);
  margin-bottom: 6px;
}

.tp-input,
input.tp-input,
.tp-wizard input.tp-input {
  width: 100% !important;
  padding: 8px 12px !important;
  border: 1px solid var(--border-color, #cbd5e1) !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  outline: none !important;
  transition: border-color 0.2s ease !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
  height: auto !important;
}

.tp-input:focus,
input.tp-input:focus,
.tp-wizard input.tp-input:focus {
  border-color: var(--brand-color, #0F467C) !important;
  box-shadow: 0 0 0 2px rgba(15, 70, 124, 0.1) !important;
}

.tp-input:disabled,
input.tp-input:disabled,
.tp-wizard input.tp-input:disabled {
  background: #f1f5f9 !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
}

/* Checkboxes */
.tp-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-color, #334155);
  cursor: pointer;
}

.tp-checkbox {
  width: 11px;
  height: 11px;
  appearance: none;
  background-color: transparent;
  cursor: pointer;
  position: relative;
  display: inline-block;
  margin: 0;
  border: none;
  background-image: url("images/icons/checkbox.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: all 0.2s;
}

.tp-checkbox:checked {
  background-image: url("images/icons/checkbox_checked.svg");
}

.tp-checkbox:checked::after {
  display: none;
}

.tdg-table .tp-checkbox {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
  border-radius: 2px !important;
  vertical-align: middle !important;
  margin: 0 !important;
}

/* Radio Buttons */
.tp-radio {
  width: 14px;
  height: 14px;
  border: 1px solid var(--border-color, #94a3b8);
  border-radius: 50%;
  appearance: none;
  background: #ffffff;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.tp-radio:checked {
  background: var(--brand-color, #0F467C);
  border-color: var(--brand-color, #0F467C);
}

.tp-radio:checked::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: white;
}

/* Search Bar */
.tp-search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  position: relative;
}

.tp-search-icon {
  position: absolute;
  left: 12px;
  color: #94a3b8;
}

.tp-search-input,
input.tp-search-input,
.tp-wizard input.tp-search-input {
  width: 100% !important;
  padding: 8px 12px 8px 36px !important;
  border: 1px solid var(--border-color, #cbd5e1) !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  outline: none !important;
  box-sizing: border-box !important;
  height: auto !important;
}

.tp-search-input:focus,
input.tp-search-input:focus,
.tp-wizard input.tp-search-input:focus {
  border-color: var(--brand-color, #0F467C) !important;
  box-shadow: 0 0 0 2px rgba(15, 70, 124, 0.1) !important;
}

/* Accordion */
.tp-accordion {
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 6px;
  margin-bottom: 12px;
  overflow: hidden;
}

.tp-accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8fafc;
  cursor: pointer;
  user-select: none;
}

.tp-accordion-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-color, #1e293b);
  display: flex;
  align-items: center;
  gap: 8px;
}

.tp-badge {
  background: rgba(15, 70, 124, 0.1);
  color: var(--brand-color, #0F467C);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.tp-accordion-icon {
  transition: transform 0.2s ease;
  color: #64748b;
}

.tp-accordion.open .tp-accordion-icon {
  transform: rotate(180deg);
}

.tp-accordion-body {
  display: none;
  padding: 0;
  border-top: 1px solid var(--border-color, #e2e8f0);
}

.tp-accordion.open .tp-accordion-body {
  display: block;
}

/* Tables */
.tp-table-container {
  flex: 1;
}

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

.tp-table th {
  position: sticky;
  top: 0;
  background: #f8fafc;
  padding: 8px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-color-muted, #64748b);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  z-index: 1;
}

.tp-table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-color, #f1f5f9);
  font-size: 13px;
  color: var(--text-color, #334155);
}

.tp-table tr:last-child td {
  border-bottom: none;
}

.tp-table tr:hover {
  background: #f8fafc;
}

/* Cards Grid */
.tp-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.tp-card {
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  padding: 16px;
  background: #ffffff;
  cursor: default !important;
  transition: all 0.2s ease;
  position: relative;
}

.tp-card:hover {
  border-color: var(--border-color, #e2e8f0);
  box-shadow: none;
}

.tp-card.selected {
  border-color: var(--brand-color, #0F467C);
  background: rgba(15, 70, 124, 0.03);
}

.tp-card-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.tp-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color, #1e293b);
}

.tp-card-desc {
  font-size: 12px;
  color: var(--text-color-muted, #64748b);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tp-card-check {
  position: absolute;
  top: 16px;
  right: 16px;
  color: var(--brand-color, #0F467C);
  display: none;
}

.tp-card.selected .tp-card-check {
  display: block;
}

/* Review Summary */
.tp-summary-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tp-summary-item {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px dashed var(--border-color, #e2e8f0);
}

.tp-summary-item:last-child {
  border-bottom: none;
}

.tp-summary-label {
  font-size: 13px;
  color: var(--text-color-muted, #64748b);
}

.tp-summary-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-color, #1e293b);
  text-align: right;
}

/* ---- Footer Actions ---- */
.tp-footer {
  grid-area: footer !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: var(--section-background-color, #f9fafb);
  border-top: 1px solid var(--border-color, #e5e7eb);
  flex-shrink: 0;
}

.tp-footer-left {
  display: flex;
  gap: 12px;
}

.tp-footer-right {
  display: flex;
  gap: 12px;
}

.tp-btn {
  padding: 10px 24px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-family: inherit !important;
  min-width: 110px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

.tp-btn-ghost {
  background: transparent;
  color: var(--text-color, #475569);
}

.tp-btn-ghost:hover {
  background: #f1f5f9;
}

.tp-btn-secondary {
  background: #ffffff;
  border-color: var(--border-color, #cbd5e1) !important;
  color: var(--text-color, #334155) !important;
}

.tp-btn-secondary:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

.tp-btn-primary {
  background: var(--brand-color, #0F467C);
  color: #ffffff;
}

.tp-btn-primary:hover {
  background: var(--brand-hover-color, #0b355e);
}

.tp-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  visibility: visible !important;
}

/* Utility */
.tp-d-none {
  display: none !important;
}

.tp-flex {
  display: flex;
}

.tp-items-start {
  align-items: flex-start;
}

.tp-items-center {
  align-items: center;
}

.tp-justify-between {
  justify-content: space-between;
}

.tp-gap-2 {
  gap: 8px;
}

.tp-gap-3 {
  gap: 12px;
}

/* Notification overriding for wizard */
.tp-notification {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tp-notification-warning {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

/* Result Preview and Difference Check Showcase Styles */
.tp-result-header {
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  padding-bottom: 16px;
  margin-bottom: 24px;
}

.tp-result-title-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.tp-result-title-row h3 {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: var(--text-color, #1e293b) !important;
  margin: 0 !important;
}

.tp-result-subtitle {
  font-size: 13px !important;
  color: var(--text-color-muted, #64748b) !important;
  margin: 4px 0 0 0 !important;
}

.tp-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.tp-badge-success {
  background-color: #d1fae5 !important;
  color: #065f46 !important;
}

.tp-badge-info {
  background-color: #dbeafe !important;
  color: #1e40af !important;
}

.tp-badge-warning {
  background-color: #fef3c7 !important;
  color: #92400e !important;
}

.tp-badge-danger {
  background-color: #fee2e2 !important;
  color: #991b1b !important;
}

.tp-badge-primary {
  background-color: #e0f2fe !important;
  color: #0369a1 !important;
}

.tp-badge-secondary {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
}

.tp-result-workspace {
  display: flex !important;
  flex-direction: row !important;
  gap: 24px !important;
  height: calc(100% - 100px) !important;
  align-items: stretch !important;
}

/* Left Column: Canvas */
.tp-canvas-container {
  flex: 1.2 !important;
  background: #f8fafc !important;
  border: 1px solid var(--border-color, #e2e8f0) !important;
  border-radius: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  height: 100% !important;
  min-height: 450px !important;
}

.tp-canvas-header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--border-color, #e2e8f0) !important;
  padding: 12px 16px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-color, #334155) !important;
}

.tp-canvas-page-num {
  color: var(--text-color-muted, #64748b) !important;
}

.tp-canvas-mockup {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
}

.tp-canvas-mock-page {
  background: #ffffff !important;
  width: 100% !important;
  max-width: 320px !important;
  height: 100% !important;
  max-height: 420px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
  border-radius: 6px !important;
  border: 1px solid #e2e8f0 !important;
  padding: 24px !important;
  position: relative !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* Simulated Canvas Layers */
.tp-mock-layer {
  border-radius: 4px !important;
  padding: 8px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  color: #1e293b !important;
  border: 1px dashed #cbd5e1 !important;
  background: #f8fafc !important;
  text-align: center !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.tp-mock-layer:hover {
  background: #e2e8f0 !important;
  border-color: var(--brand-color, #0F467C) !important;
  transform: scale(1.02) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
}

.tp-mock-header-layer {
  height: 32px !important;
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #1e40af !important;
}

.tp-mock-barcode-layer {
  height: 44px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  background: #fafaf9 !important;
  border-color: #d6d3d1 !important;
}

.tp-mock-barcode-lines {
  width: 60px !important;
  height: 12px !important;
  background: repeating-linear-gradient(90deg, #1c1917, #1c1917 2px, transparent 2px, transparent 5px) !important;
}

.tp-mock-text-layer {
  height: 36px !important;
  background: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
  color: #166534 !important;
}

.tp-mock-table-layer {
  flex: 1 !important;
  min-height: 80px !important;
  background: #fdf2f8 !important;
  border-color: #fbcfe8 !important;
  color: #9d174d !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.tp-mock-footer-layer {
  height: 24px !important;
  background: #faf5ff !important;
  border-color: #e9d5ff !important;
  color: #6b21a8 !important;
}

/* Right Column: Audit */
.tp-audit-container {
  flex: 0.8 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  justify-content: space-between !important;
  min-width: 280px !important;
}

.tp-audit-section {
  background: #ffffff !important;
  border: 1px solid var(--border-color, #e2e8f0) !important;
  border-radius: 12px !important;
  padding: 16px !important;
}

.tp-audit-section h4 {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-color, #334155) !important;
  margin: 0 0 12px 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.tp-audit-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.tp-audit-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 12px !important;
}

.tp-audit-item .label {
  color: var(--text-color-muted, #64748b) !important;
}

.tp-audit-item .value {
  font-weight: 600 !important;
  color: var(--text-color, #1e293b) !important;
}

.tp-audit-checklist {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.tp-check-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 12px !important;
  color: var(--text-color, #334155) !important;
}

.tp-icon-green {
  color: #10b981 !important;
}

.tp-actions-box {
  margin-top: auto !important;
}

.tp-btn-full {
  width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
  text-align: center !important;
  padding: 12px !important;
}

/* Difference Check Visualizer */
.tp-result-workspace-vertical {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  height: calc(100% - 80px) !important;
  overflow-y: auto !important;
}

.tp-diff-cards {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}

.tp-diff-card {
  background: #ffffff !important;
  border: 1px solid var(--border-color, #e2e8f0) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  position: relative !important;
}

.tp-card-badge {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
}

.tp-diff-card h5 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text-color, #1e293b) !important;
  margin: 0 0 4px 0 !important;
}

.tp-diff-card p {
  font-size: 11px !important;
  color: var(--text-color-muted, #64748b) !important;
  margin: 0 !important;
}

.tp-diff-grid-container {
  background: #ffffff !important;
  border: 1px solid var(--border-color, #e2e8f0) !important;
  border-radius: 12px !important;
  padding: 20px !important;
}

.tp-diff-grid-container h4 {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-color, #334155) !important;
  margin: 0 0 16px 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.tp-diff-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 12px !important;
  text-align: left !important;
}

.tp-diff-table th {
  padding: 12px 8px !important;
  border-bottom: 2px solid #e2e8f0 !important;
  color: #475569 !important;
  font-weight: 600 !important;
}

.tp-diff-table td {
  padding: 12px 8px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  vertical-align: middle !important;
}

.tp-code-path {
  font-family: 'Courier New', Courier, monospace !important;
  background: #f1f5f9 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  color: #0f172a !important;
}

.tp-text-muted {
  color: var(--text-color-muted, #94a3b8) !important;
  font-style: italic !important;
}

/* Scrollable Multiple Upload Files List Styles */
.tp-files-list-container {
  display: flex !important;
  flex-direction: column !important;
  padding: 16px !important;
  background: #ffffff !important;
  border: 1px solid var(--border-color, #e2e8f0) !important;
  border-radius: 12px !important;
  margin-top: 16px !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
}

.tp-files-list-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding-bottom: 10px !important;
  margin-bottom: 8px !important;
}

.tp-files-count {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-color, #1e293b) !important;
}

.tp-btn-clear-all-files {
  background: transparent !important;
  border: none !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #ef4444 !important;
  cursor: pointer !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  transition: all 0.2s ease !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.tp-btn-clear-all-files:hover {
  background: #fee2e2 !important;
}

.tp-files-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  max-height: 420px !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
}

/* Custom Scrollbar for files list */
.tp-files-list::-webkit-scrollbar {
  width: 6px !important;
}

.tp-files-list::-webkit-scrollbar-track {
  background: #f1f5f9 !important;
  border-radius: 3px !important;
}

.tp-files-list::-webkit-scrollbar-thumb {
  background: #cbd5e1 !important;
  border-radius: 3px !important;
}

.tp-file-item-row {
  display: flex !important;
  align-items: center !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  gap: 12px !important;
  transition: all 0.2s ease !important;
}

.tp-file-item-row:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

.tp-file-item-icon {
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  color: var(--brand-color, #0F467C) !important;
}

.tp-file-item-info {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  /* Enable truncation inside flex */
}

.tp-file-item-name {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-color, #334155) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.tp-file-item-name:hover {
  color: var(--brand-color, #0F467C) !important;
}

.tp-file-item-size {
  font-size: 10px !important;
  color: var(--text-color-muted, #64748b) !important;
  margin-top: 1px !important;
}

.tp-btn-remove-file {
  background: transparent !important;
  border: none !important;
  padding: 6px !important;
  cursor: pointer !important;
  color: var(--text-color-muted, #94a3b8) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  transition: all 0.2s ease !important;
}

.tp-btn-remove-file:hover {
  background: #fee2e2 !important;
  color: #ef4444 !important;
  transform: scale(1.05) !important;
}

/* Inner Tab selectors for Step 1 */
.tp-inner-tabs {
  display: flex !important;
  gap: 8px !important;
  border-bottom: 2px solid #e2e8f0 !important;
  padding-bottom: 6px !important;
  margin-bottom: 20px !important;
  width: 100% !important;
}

.tp-inner-tab-btn {
  background: transparent !important;
  border: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-color-muted, #64748b) !important;
  padding: 6px 12px !important;
  cursor: pointer !important;
  position: relative !important;
  transition: all 0.2s ease !important;
  border-radius: 4px 4px 0 0 !important;
}

.tp-inner-tab-btn:hover {
  color: var(--brand-color, #0F467C) !important;
  background: #f1f5f9 !important;
}

.tp-inner-tab-btn.active {
  color: var(--brand-color, #0F467C) !important;
}

.tp-inner-tab-btn.active::after {
  content: '' !important;
  position: absolute !important;
  bottom: -8px !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background: var(--brand-color, #0F467C) !important;
}

/* Code Editor */
.tp-editor-panel-content {
  animation: fadeIn 0.2s ease !important;
}

.tp-code-editor {
  width: 100% !important;
  height: 220px !important;
  font-family: 'Courier New', Courier, monospace !important;
  font-size: 12px !important;
  padding: 12px !important;
  border: 1px solid var(--border-color, #cbd5e1) !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  line-height: 1.5 !important;
  resize: vertical !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

.tp-code-editor:focus {
  border-color: var(--brand-color, #0F467C) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(15, 70, 124, 0.1) !important;
}

.tp-btn-clear-editor {
  background: transparent !important;
  border: none !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #ef4444 !important;
  cursor: pointer !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  transition: all 0.2s ease !important;
}

.tp-btn-clear-editor:hover {
  background: #fee2e2 !important;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Premium Audit Alert Styles ---- */
.tp-audit-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.tp-audit-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.tp-audit-item.tp-audit-success {
  background: #f0fdf4 !important;
  /* Elegant soft light green */
  border-color: #bbf7d0 !important;
  color: #166534 !important;
}

.tp-audit-item.tp-audit-success svg {
  color: #15803d !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}

.tp-audit-item.tp-audit-warning {
  background: #fffbeb !important;
  /* Elegant soft light amber */
  border-color: #fde68a !important;
  color: #92400e !important;
}

.tp-audit-item.tp-audit-warning svg {
  color: #b45309 !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}

.tp-audit-details {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  text-align: left !important;
}

.tp-audit-details h6 {
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: inherit !important;
}

.tp-audit-details p {
  margin: 0 !important;
  font-size: 11px !important;
  color: #4b5563 !important;
  line-height: 1.4 !important;
}

/* Custom styles for modern Segmented Source Selector & Hiding Sidebar */
.tp-wizard.hide-sidebar {
  grid-template-columns: 0px 1fr !important;
}

.tp-wizard.hide-sidebar .tp-steps {
  width: 0px !important;
  padding: 0 !important;
  border-right: none !important;
  overflow: hidden !important;
}

.tp-wizard.hide-sidebar .tp-steps .tp-step {
  display: none !important;
}

.tp-wizard.hide-sidebar .tp-sidebar-toggle {
  display: none !important;
}

.tp-source-selector {
  display: flex;
  background: #f1f5f9 !important;
  padding: 4px !important;
  border-radius: 8px !important;
  margin-bottom: 24px !important;
  max-width: 500px !important;
  border: 1px solid #e2e8f0 !important;
}

.tp-source-tab {
  flex: 1 !important;
  padding: 10px 16px !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  background: transparent !important;
  color: #64748b !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.tp-source-tab:hover {
  color: #334155 !important;
}

.tp-source-tab.active {
  background: #ffffff !important;
  color: var(--brand-color, #0f467c) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  font-weight: 600 !important;
}

.tp-source-tab:disabled {
  visibility: visible !important;
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Adjustments to result header back button */
#tp_btn_result_back {
  transition: all 0.2s ease !important;
}

#tp_btn_result_back:hover {
  background: #f1f5f9 !important;
  border-color: var(--brand-color, #0F467C) !important;
  transform: translateX(-2px) !important;
}

/* Hover and dragover styles for the Generate Input Data section when configured as upload zone */
.tp-generate-zone {
  cursor: pointer;
  transition: all 0.2s ease !important;
}

.tp-generate-zone:hover,
.tp-generate-zone.dragover {
  border-color: var(--brand-color, #0F467C) !important;
  background: #f0f4f8 !important;
}

/* Treeview UI adjustments to reduce space & checkbox size */
.tdg-page-tree {
  max-height: none !important;
  flex: 1 !important;
  min-height: 0 !important;
}

.tdg-tree-node {
  padding: 2px 4px !important;
  gap: 4px !important;
}

.tdg-tree-node .tp-checkbox {
  width: 9px !important;
  height: 9px !important;
  min-width: 9px !important;
  min-height: 9px !important;
  border-radius: 2px !important;
}

.tdg-tree-node .tp-checkbox:checked::after {
  display: none !important;
}

.tdg-tree-children {
  padding-left: 8px !important;
  margin-left: 10px !important;
  gap: 1px !important;
}

.tdg-tree-label {
  font-size: 11px !important;
}

.tdg-node-type-pill {
  font-size: 8px !important;
  padding: 1px 3px !important;
}

.tdg-sample-upload-zone.dragover {
  border-color: var(--brand-color, #0f467c) !important;
  background: #f0f4f8 !important;
}

/* TDG Modern 2-Column Grid Layout and Responsiveness */
.tdg-layout-2col {
  display: grid !important;
  grid-template-columns: 260px 1fr !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  transition: grid-template-columns 0.2s ease !important;
}

.tdg-layout-2col.sidebar-collapsed {
  grid-template-columns: 0px 1fr !important;
}

.tdg-layout-2col.sidebar-collapsed .tdg-sidebar {
  display: none !important;
}

.tdg-layout-2col .tdg-main {
  grid-column: 2 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Advanced Settings Grid */
.tdg-adv-accordion {
  width: 100% !important;
  /* max-width: 580px !important; */
  /* margin: 0 auto !important; */
  transition: all 0.2s ease !important;
}

/* Segmented tab active states transition */
.tdg-sidebar-tab-btn {
  transition: all 0.2s ease !important;
}

.tdg-sidebar-tab-btn:hover {
  color: var(--brand-color, #0F467C) !important;
}

/* Sample Upload Zone drag & drop visual feedback */
.tdg-sample-upload-zone {
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

.tdg-sample-upload-zone:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(15, 70, 124, 0.05) !important;
}

.tdg-sample-upload-zone.dragover {
  border-color: var(--brand-color, #0f467c) !important;
  background: #f1f5f9 !important;
  transform: scale(0.99) !important;
}

/* Treeview item styling */
.tdg-page-tree {
  max-height: none !important;
  flex: 1 !important;
  min-height: 0 !important;
}

/* ──────────────────────────────────────────────────────────────────
   TDG Table & Result Panels
─────────────────────────────────────────────────────────────────── */
.tdg-result-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}

.tdg-result-title {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
}

.tdg-result-desc {
  font-size: 11px;
  color: #64748b;
  padding: 8px 16px 4px;
  flex-shrink: 0;
}

.tdg-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-color, #0f467c);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 9999px;
  padding: 1px 7px;
  min-width: 20px;
}

/* ── Table ─────────────────────────────────────────────────────── */
.tdg-table-wrap {
  flex: 1;
  overflow: auto;
  min-height: 0;
  width: 100%;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.tdg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-family: 'Poppins', sans-serif;
}

.tdg-table thead tr {
  background: #f8fafc;
}

.tdg-table thead th {
  padding: 11px 14px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  color: #334155;
  white-space: nowrap;
  letter-spacing: 0.3px;
  text-transform: none;
  position: relative;
  background: #f8fafc;
  border-bottom: 2px solid #e2e8f0;
}

.tdg-table thead th:first-child {
  padding-left: 16px;
}

.tdg-table thead th:last-child {
  padding-right: 16px;
}

.tdg-table tbody tr {
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.15s;
}

.tdg-table tbody tr:hover {
  background: #f8fafc;
}

.tdg-table tbody td {
  padding: 10px 14px;
  color: #1e293b;
  font-size: 12px;
  vertical-align: middle;
}

.tdg-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  flex-shrink: 0;
}

/* ── Type Badges ──────────────────────────────────────────────── */
.tdg-type-badge {
  display: inline-block;
  padding: 2px 7px;
  font-size: 9px;
  font-weight: 700;
  border-radius: 9999px;
  text-transform: uppercase;
  background: #e2e8f0;
  color: #475569;
}

.tdg-type-json {
  background: #dbeafe;
  color: #1d4ed8;
}

.tdg-type-xml {
  background: #d1fae5;
  color: #065f46;
}

.tdg-type-csv {
  background: #fef3c7;
  color: #92400e;
}

.tdg-type-txt {
  background: #f1f5f9;
  color: #475569;
}

/* ── Status Badges ────────────────────────────────────────────── */
.tdg-status-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 9px;
  font-weight: 700;
  border-radius: 9999px;
  text-transform: uppercase;
}

.tdg-status-success,
.tdg-status-generated {
  background: #d1fae5;
  color: #065f46;
}

.tdg-status-pending {
  background: #fef3c7;
  color: #92400e;
}

.tdg-status-error {
  background: #fee2e2;
  color: #b91c1c;
}

/* ── Row Action Buttons ───────────────────────────────────────── */
.tdg-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tdg-row-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
}

.tdg-row-btn:hover {
  border-color: var(--brand-color, #0f467c);
  color: var(--brand-color, #0f467c);
  background: rgba(15, 70, 124, 0.04);
}

/* ── Toolbar Icon Buttons ─────────────────────────────────────── */
.tdg-icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s;
  font-family: 'Poppins', sans-serif;
  white-space: nowrap;
}

.tdg-icon-btn:hover {
  border-color: var(--brand-color, #0f467c);
  color: var(--brand-color, #0f467c);
  background: rgba(15, 70, 124, 0.03);
}

/* ── Generate Button ──────────────────────────────────────────── */
.tdg-generate-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, var(--brand-color, #0f467c) 0%, #1e5fa0 100%);
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(15, 70, 124, 0.15);
  transition: all 0.2s ease;
  font-family: 'Poppins', sans-serif;
}

.tdg-generate-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 70, 124, 0.25);
}

/* ── Processing State ─────────────────────────────────────────── */
.tdg-processing-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  background: #f8fafc;
}

/* ── Loader Wrapper ───────────────────────────────────────────── */
.tdg-loader-wrapper {
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 380px;
  text-align: center;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 36px 32px;
  box-shadow: 0 4px 24px rgba(15, 70, 124, 0.07);
}

/* ── Pulsing ring + icon ──────────────────────────────────────── */
.tdg-loader-icon-ring {
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tdg-loader-icon-ring::before,
.tdg-loader-icon-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: tdgRingPulse 1.8s ease-out infinite;
}

.tdg-loader-icon-ring::after {
  animation-delay: 0.9s;
}

/* Files — blue theme */
.tdg-loader-ring-files {
  background: rgba(15, 70, 124, 0.08);
}

.tdg-loader-ring-files::before,
.tdg-loader-ring-files::after {
  border: 2px solid rgba(15, 70, 124, 0.25);
}

/* PDF — red/rose theme */
.tdg-loader-ring-pdfs {
  background: rgba(239, 68, 68, 0.08);
}

.tdg-loader-ring-pdfs::before,
.tdg-loader-ring-pdfs::after {
  border: 2px solid rgba(239, 68, 68, 0.25);
}

@keyframes tdgRingPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(1.65);
    opacity: 0;
  }
}

.tdg-loader-icon-inner {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  box-shadow: 0 6px 20px rgba(15, 70, 124, 0.15), 0 2px 6px rgba(0, 0, 0, 0.06);
  color: var(--brand-color, #0f467c);
  animation: tdgIconBob 2.4s ease-in-out infinite;
}

.tdg-loader-icon-pdf {
  color: #ef4444;
}

@keyframes tdgIconBob {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

/* ── Titles ───────────────────────────────────────────────────── */
.tdg-loader-title {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: -0.2px;
}

.tdg-loader-subtitle {
  font-size: 12px;
  color: #64748b;
  line-height: 1.6;
  max-width: 280px;
}

/* ── Animated dots (file loader) ─────────────────────────────── */
.tdg-loader-dots {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

.tdg-loader-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-color, #0f467c);
  animation: tdgDotBounce 1.2s ease-in-out infinite;
  opacity: 0.7;
}

.tdg-loader-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.tdg-loader-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes tdgDotBounce {

  0%,
  80%,
  100% {
    transform: scale(0.7);
    opacity: 0.4;
  }

  40% {
    transform: scale(1.1);
    opacity: 1;
  }
}

/* ── Progress bar (PDF loader) ───────────────────────────────── */
.tdg-loader-bar-wrap {
  width: 100%;
  height: 6px;
  background: #f1f5f9;
  border-radius: 9999px;
  overflow: hidden;
}

.tdg-loader-bar {
  height: 100%;
  width: 0%;
  border-radius: 9999px;
  background: linear-gradient(90deg, #ef4444 0%, #f97316 100%);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.tdg-loader-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: -40%;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
  animation: tdgBarShimmer 1.2s ease infinite;
  width: 40%;
}

@keyframes tdgBarShimmer {
  0% {
    left: -40%;
  }

  100% {
    left: 110%;
  }
}

.tdg-loader-bar-label {
  font-size: 10.5px;
  color: #94a3b8;
  margin-top: -4px;
}

/* ── Steps list (file loader) ────────────────────────────────── */
.tdg-processing-steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 240px;
  width: 100%;
  text-align: left;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
}

.tdg-proc-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: #94a3b8;
  padding: 4px 0;
  transition: color 0.2s;
}

.tdg-proc-step.active {
  color: var(--brand-color, #0f467c);
  font-weight: 600;
}

.tdg-proc-step.done {
  color: #10b981;
}

.tdg-proc-step.done svg {
  stroke: #10b981;
}

.tdg-proc-step::before,
.tdg-proc-step::after,
.tdg-proc-step.done::before,
.tdg-proc-step.done::after {
  display: none !important;
  content: none !important;
}

/* ── Action/Condition Tabs inside Rules panel ─────────────────── */
.tdg-action-tabs {
  display: flex;
  gap: 4px;
  background: #e2e8f0;
  border-radius: 8px;
  padding: 2px;
}

.tdg-atab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  color: #64748b;
  transition: all 0.2s;
  font-family: 'Poppins', sans-serif;
}

.tdg-atab.active {
  background: #ffffff;
  color: var(--brand-color, #0f467c);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.tdg-action-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tdg-action-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 11px;
  color: #1e293b;
}

/* ── Treeview Nodes ───────────────────────────────────────────── */
.tdg-tree-wrap {
  padding-left: 12px;
}

.tdg-tree-node {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.12s;
  font-size: 11px;
  color: #1e293b;
}

.tdg-tree-node:hover {
  background: rgba(15, 70, 124, 0.05);
}

.tdg-tree-label {
  flex: 1;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tdg-node-type-pill {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 9999px;
  background: #f1f5f9;
  color: #64748b;
  flex-shrink: 0;
}

.tdg-tree-chevron {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  width: 16px;
  flex-shrink: 0;
  color: #94a3b8;
  transition: transform 0.15s;
}

.tdg-tree-chevron.open {
  transform: rotate(90deg);
}

/* ── TDG Select (Advanced Settings) ──────────────────────────── */
.tdg-select {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  padding: 4px 8px;
  color: #1e293b;
  background: #ffffff;
  outline: none;
  transition: border-color 0.15s;
}

.tdg-select:focus {
  border-color: var(--brand-color, #0f467c);
}

/* ── Idle state container ─────────────────────────────────────── */
.tdg-idle-state {
  overflow-y: auto;
}

/* ── Responsive collapse for narrow viewports ─────────────────── */
@media (max-width: 680px) {
  .tdg-layout-2col {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr;
  }

  .tdg-layout-2col .tdg-main {
    grid-column: 1 !important;
  }

  .tdg-sidebar {
    height: auto !important;
    max-height: 200px;
    overflow-y: auto;
    border-right: none !important;
    border-bottom: 1px solid #e2e8f0;
  }
}

/* ── Scope Tabs (Sidebar) ─────────────────────────────────────── */
.tdg-scope-tabs {
  display: flex;
  gap: 3px;
  background: #f1f5f9;
  border-radius: 10px;
  padding: 3px;
  flex-shrink: 0;
}

.tdg-scope-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 4px;
  font-size: 10px;
  font-weight: 600;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: 'Poppins', sans-serif;
  white-space: nowrap;
}

.tdg-scope-tab:hover {
  color: #1e293b;
  background: rgba(255, 255, 255, 0.7);
}

.tdg-scope-tab.active {
  background: #ffffff;
  color: var(--brand-color, #0f467c);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(15, 70, 124, 0.08);
}

.tdg-scope-tab svg {
  flex-shrink: 0;
}

/* ── Scope Info Card (for Complete Template / Current Page) ───── */
.tdg-scope-info-card {
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 16px;
  background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
  border: 1px solid #e0f2fe;
  border-radius: 10px;
  text-align: center;
  min-height: 0;
}

.tdg-scope-info-icon {
  width: 56px;
  height: 56px;
  background: rgba(15, 70, 124, 0.07);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tdg-scope-info-title {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
}

.tdg-scope-info-desc {
  font-size: 10.5px;
  color: #64748b;
  line-height: 1.5;
}

/* ── Status badge for 'ready' ─────────────────────────────────── */
.tdg-status-ready {
  background: #dbeafe;
  color: #1d4ed8;
}


/* Shift headers to avoid overlapping expand icon when sidebar is collapsed */
.tdg-layout-2col.sidebar-collapsed .tdg-result-hdr {
  padding-left: 54px !important;
  transition: padding-left 0.2s ease;
}


/* ── Modern Sidebar Tabs & Alignment ───────────────────────────── */
.tdg-sidebar {
  background: #ffffff !important;
  border-right: 1px solid #f1f5f9 !important;
}

.tdg-sidebar-tabs {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  gap: 8px !important;
}

.tdg-sidebar-tab-segment {
  display: flex !important;
  background: #f1f5f9 !important;
  padding: 3px !important;
  border-radius: 9px !important;
  flex: 1 !important;
  gap: 2px !important;
}

.tdg-sidebar-tab-btn {
  flex: 1 !important;
  border: none !important;
  background: transparent !important;
  padding: 6px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 7px !important;
  cursor: pointer !important;
  color: #64748b !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  font-family: 'Poppins', sans-serif !important;
  box-shadow: none !important;
}

.tdg-sidebar-tab-btn:hover {
  color: #1e293b !important;
  background: rgba(255, 255, 255, 0.3) !important;
}

.tdg-sidebar-tab-btn.active {
  background: #ffffff !important;
  color: var(--brand-color, #0f467c) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(15, 70, 124, 0.04) !important;
}

#tdg_btn_collapse_sidebar {
  width: 28px !important;
  height: 28px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  color: #64748b !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
  padding: 0 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

#tdg_btn_collapse_sidebar:hover {
  color: #1e293b !important;
  border-color: #cbd5e1 !important;
  background: #f8fafc !important;
}

/* ── Scope Tabs Segment ────────────────────────────────────────── */
.tdg-scope-tabs {
  background: #f1f5f9 !important;
  border-radius: 10px !important;
  padding: 3px !important;
  border: none !important;
}

.tdg-scope-tab {
  border-radius: 7px !important;
  padding: 6px 4px !important;
  font-size: 10.5px !important;
  color: #64748b !important;
  transition: all 0.2s ease !important;
}

.tdg-scope-tab:hover {
  color: #1e293b !important;
  background: rgba(255, 255, 255, 0.4) !important;
}

.tdg-scope-tab.active {
  background: #ffffff !important;
  color: var(--brand-color, #0f467c) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(15, 70, 124, 0.05) !important;
}

/* ── Treeview Node Beautification ────────────────────────────── */
.tdg-tree-node {
  display: flex !important;
  align-items: center !important;
  padding: 5px 8px !important;
  border-radius: 6px !important;
  transition: all 0.15s ease !important;
  background: transparent !important;
}

.tdg-tree-node:hover {
  background: #f8fafc !important;
}

.tdg-tree-label {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  flex: 1 !important;
}

/* Tree node badge badges based on element type */
.tdg-node-type-pill {
  font-size: 8px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  letter-spacing: 0.3px !important;
}

.tdg-tree-node[data-type="group"] .tdg-node-type-pill {
  background: #f1f5f9 !important;
  color: #475569 !important;
}

.tdg-tree-node[data-type="page"] .tdg-node-type-pill {
  background: #e0f2fe !important;
  color: #0369a1 !important;
}

.tdg-tree-node[data-type="layer"] .tdg-node-type-pill {
  background: #e0e7ff !important;
  color: #4338ca !important;
}

/* Align right utility */
.tdg-align-right {
  text-align: right !important;
}

.tdg-row-actions.tdg-align-right {
  justify-content: flex-end !important;
}

/* ── TDG Checkbox Styling ───────────────────────────────────── */
.tdg-chk-box {
  width: 12px !important;
  height: 12px !important;
  cursor: pointer !important;
  accent-color: var(--brand-color, #0f467c) !important;
  border-radius: 2px !important;
  margin: 0 !important;
  vertical-align: middle !important;
}

#tdg_dl_selected {
  background: var(--brand-color, #0f467c) !important;
  color: #fff !important;
  border-color: var(--brand-color, #0f467c) !important;
  font-weight: 600 !important;
}

#tdg_dl_selected:hover {
  opacity: 0.88 !important;
}

/* ── Download Selected button always-visible states ──────────── */
.tdg-dl-sel-btn {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  transition: all 0.2s ease !important;
}

.tdg-dl-sel-btn.tdg-dl-sel-active {
  opacity: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  background: var(--brand-color, #0f467c) !important;
  color: #ffffff !important;
  border-color: var(--brand-color, #0f467c) !important;
  font-weight: 600 !important;
}

.tdg-dl-sel-btn.tdg-dl-sel-active:hover {
  opacity: 0.88 !important;
}

#tp_container_upload {
  display: none !important;
}

#popups .popup.qt-sample-pop {
  z-index: 1100 !important;
  width: 800px !important;
  height: 620px !important;
  max-width: 95vw !important;
  max-height: 90vh !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: flex !important;
  flex-direction: column !important;
}

#popups .popup.qt-sample-pop .dialog_content {
  flex: 1 !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* ── Progress Panel Animations ──────────────────────────────── */
@keyframes tdgSpinAnim {
  to {
    transform: rotate(360deg);
  }
}

@keyframes tdgProgShimmer {
  0% {
    left: -60%;
  }

  100% {
    left: 110%;
  }
}

/* Spinner element used inside progress panel */
.tdg-progress-spinner {
  animation: tdgSpinAnim 0.8s linear infinite;
  flex-shrink: 0;
}

/* -- Arc progress ring (redesigned loader) ---------- */
.tdg-loader-redesigned {
  gap: 10px;
}

.tdg-arc-ring {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.tdg-arc-svg {
  width: 80px;
  height: 80px;
  transform: rotate(-90deg);
}

.tdg-arc-fill {
  stroke-dasharray: 201;
  stroke-dashoffset: 50;
  animation: tdgArcSpin 1.8s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
  stroke: var(--brand-color, #0f467c);
}

@keyframes tdgArcSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.tdg-arc-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-color, #0f467c);
}

/* -- Timeline step list (redesigned loader) ---------- */
.tdg-timeline-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 240px;
  max-width: 300px;
  width: 100%;
  margin-top: 4px;
}

.tdg-timeline-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 5px 0;
  position: relative;
}

.tdg-timeline-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 9px;
  top: 24px;
  width: 2px;
  bottom: -5px;
  background: #e2e8f0;
  transition: background 0.3s;
}

.tdg-timeline-step.ts-done::after {
  background: var(--brand-color, #0f467c);
}

.tdg-timeline-step.ts-active::after {
  background: linear-gradient(to bottom, var(--brand-color, #0f467c) 60%, #e2e8f0);
}

.tdg-timeline-dot {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  transition: all 0.3s ease;
}

.tdg-timeline-step.ts-pending .tdg-timeline-dot {
  background: #f1f5f9;
  border: 2px solid #cbd5e1;
}

.tdg-timeline-step.ts-active .tdg-timeline-dot {
  background: #eff6ff;
  border: 2px solid var(--brand-color, #0f467c);
  animation: tdgDotPulse 1.2s ease-in-out infinite;
}

.tdg-timeline-step.ts-done .tdg-timeline-dot {
  background: var(--brand-color, #0f467c);
  border: 2px solid var(--brand-color, #0f467c);
}

@keyframes tdgDotPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(15, 70, 124, 0.4);
  }

  50% {
    box-shadow: 0 0 0 5px rgba(15, 70, 124, 0);
  }
}

.tdg-timeline-step.ts-pending .tdg-timeline-label {
  font-size: 11.5px;
  color: #94a3b8;
  padding-top: 2px;
}

.tdg-timeline-step.ts-active .tdg-timeline-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--brand-color, #0f467c);
  padding-top: 2px;
}

.tdg-timeline-step.ts-done .tdg-timeline-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--brand-color, #0f467c);
  padding-top: 2px;
  opacity: 0.85;
}

/* Read-only mode for generated test cases */
.tdg-readonly-mode .tdg-action-list .tdg-action-item,
.tdg-readonly-mode .tdg-page-tree input,
.tdg-readonly-mode .tdg-page-tree label,
.tdg-readonly-mode #tdg_scope_tabs,
.tdg-readonly-mode #tdg_rules_select_all,
.tdg-readonly-mode label[for="tdg_rules_select_all"] {
  pointer-events: none !important;
}

.tdg-readonly-mode .tdg-action-list,
.tdg-readonly-mode .tdg-page-tree,
.tdg-readonly-mode #tdg_scope_tabs {
  opacity: 0.75;
}

/* Sort selected items to top in read-only mode */
.tdg-readonly-mode .tdg-page-tree,
.tdg-readonly-mode .tdg-tree-children {
  display: flex !important;
  flex-direction: column !important;
}

.tdg-readonly-mode .tdg-tree-wrap,
.tdg-readonly-mode .tdg-action-list .tdg-action-item {
  order: 1;
}

.tdg-readonly-mode .tdg-tree-wrap:has(> .tdg-tree-node > .tdg-node-chk:checked),
.tdg-readonly-mode .tdg-tree-wrap:has(> .tdg-tree-node > .tdg-node-chk:indeterminate),
.tdg-readonly-mode .tdg-action-list .tdg-action-item:has(.tp-checkbox:checked) {
  order: -1;
}
.mail_Settings_1 {
  height: 480px;
  width: 775px;
}

.mail_tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: transparent;
}

.mail_tab_button {
  background-color: transparent;
  color: black;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  /*padding: 14px 16px;*/
  transition: 0.3s;
  font-size: 14px;
}

.mail_tab_active {
  background-color: #ccc;
}

.mail_div_1 {
  height: 430px;
  width: 750px;
  /* border:1px solid black;*/
  padding: 5px;
  justify-content: space-between;

}

.mail_div_1_advanced {
  height: 500px;
  /* width: 690px; */
  /*border:1px solid black;*/
  padding: 10px;
  justify-content: space-between;
}

.mail_div_1 input[type=text] {
  width: 500px !important;
}

.mail_tabcontent {
  /* display: flex; */
  padding: 6px 12px;
  height: 416px;
  /*border: 1px solid #ccc;*/
  border-top: none;
  /* justify-content: space-between; */
}

.mail_div_gc {
  display: flex;
  /*border: 1px solid #000;*/
  /* height: 50px;*/
  width: 100%;
  /* padding: 10px;*/
  gap: 40px;
}

.mail_div_gc select {
  width: 500px;
  height: 20px;

}

.mail_div_ms {
  display: flex;
  /*border: 1px solid #000;*/
  height: 150px;
  width: 100%;
  /* padding: 10px;*/
  gap: 40px;
  color: #000;

}

.class_undo {
  background: url(images/icons/undo_button_ic.png) center center;
  border: 0px !important;
  width: 16px !important;
  height: 16px !important;
  margin-left: 5px;
  vertical-align: middle;
}

.class_edit {
  background: url(images/icons/edit_button_ic.png) center center;
  border: 0px !important;
  width: 16px !important;
  height: 16px !important;
  margin-left: 5px;
  vertical-align: middle;
}

.class_redo {
  background: url(images/icons/redo_button_ic.png) center center;
  border: 0px !important;
  width: 16px !important;
  height: 16px !important;
  margin-left: 5px;
  vertical-align: middle;
}

.mail_div_ms_1 .mail_div_ms .mail_div_ms_table input[type="text"] {
  width: 500px !important;
}

.mail_div_ms_table td {
  color: #000;
}

.mail_div_smtp_1 {
  display: inline-flex;
}

.mail_div_smtp {
  display: flex;
  height: 150px;
  width: 40%;
  padding: 10px;
  gap: 40px;
  color: #000;
  float: left;
}

.div_row_2 {
  width: 300px;
  height: 100px;
  float: left;
}

.div_row_1 {
  width: 200px;
  height: 100px;
  float: left;
}

.mail_div_smtp_table td {
  color: #000;
}

.smtp_port_number {
  display: inline-flex;
}

.other_div_1 {
  height: 300px;
  width: 750px;
  /* border:1px solid black;*/
  /* padding:10px;*/
  justify-content: space-between;
}

.div_other_1 {
  display: flex;
  gap: 20px;
  padding-left: 10px;
}

.div_other_2 {
  display: flex;
  gap: 20px;
  padding-top: 10px;
  padding-left: 10px;
  /*border: 1px solid #000;*/
  height: 50px;
}

.select_file_path {
  width: 500px;
  height: 25px;
}

.other_add_button {
  height: 25px;
}

.other_div_2 {
  height: 100px;
  width: 100%;
  /*border:1px solid black;*/
  padding: 10px;
  justify-content: space-between;
}

.mail_Setting {
  height: 600px !important;
  max-height: 600px !important;
  min-height: 600px !important;
  max-width: 800px !important;
  min-width: 800px !important;
  width: 800px !important;

}

.select_mail {
  width: 250px;
  margin-bottom: 20px;
}

.select_profile_label {
  margin: 0;
}

#popups .mail_Setting .dialog_content {

  min-height: 600px;

  overflow: hidden;


}

#popups .new_mail .dialog_content {

  max-width: 800px !important;
  min-height: 500px;


}

#popups .new_mail .new_mail_container {
  width: 780px;
  height: 475px;
}

/*for ps_merge_file_component*/
.psfile_div_2 {
  /* border: 1px solid black;*/
  height: 25px;
  width: 100%;
  display: flex;
  flex-direction: row
    /*Flex-direction row*/
  ;
  align-items: center;
  gap: 45px;
}

.file_search {
  width: 300px !important;
}

.psfile_div_1 {
  background: white;
  border: 1px solid #ccc;
  color: #000;
  margin: 2px;
  height: 500px;
  overflow: hidden;
}

.psfile_container {
  display: flex;
  flex-direction: row;
  height: 300px;
  width: 400px;
  /*border: 1px solid black;*/
  padding: 10px;
  gap: 10px
}

.psfile_left {
  height: 100%;
  width: 200px;
  /*border: 1px solid black;*/
  overflow-y: scroll;
}

.psfile_right {
  display: flex;
  width: 180px;
  flex-direction: column;
  justify-content: space-between;
  /* border: 1px solid black;*/
}

.result_string {
  width: 300px !important;
}

.psfolder_div_1 {
  background: white;
  /* border: 1px solid #ccc;*/
  color: #000;
  margin: 2px;
  height: 600px;
  overflow: hidden;
}

.ps_merge_file_component {

  display: block;

  max-width: 425px !important;

  min-height: 425px;

}



#popups .ps_merge_file_component .dialog_content {

  min-height: 500px;

  overflow: auto !important;


}

/*for pdf merge settings*/
.pdf_div_1 {
  background: white;
  /* border: 1px solid #ccc;*/
  color: #000;
  margin: 2px;
  height: 600px;
  overflow: hidden;
}

.pdf_merge_settings {

  display: block;

  max-width: 700px !important;

  min-height: 600px;

}

.pdf_file_path {
  width: 300px !important;
}

.pdf_table_div {
  width: 100%;
  height: 200px;
  background-color: white;
  /*border:1px solid black*/
}

.pdf_table td {
  color: #000;
  /*border:1px solid black;*/

}

.pdf_encripyion_class {
  width: 100%;
  gap: 40px !important;
}

#pfx_file_path {
  width: 100px !important;
}

#ds_password {
  width: 100px !important;
}

#user_password {
  width: 100px !important;
}

#owner_password {
  width: 100px !important;
}

.ds_container {
  width: 100%;
  border: 1px solid black;
  height: 100%;
  display: flex;
  gap: 10px;
}

.ds_right_container {
  width: 50%;
  border: 1px solid #000;
  height: 100%;
  gap: 10px;
  padding: 10px;
}

.ds_left_container {
  width: 50%;
  border: 1px solid #000;
  height: 100%;
  padding: 10px;
}

.ds_left_table {
  width: 300px;
}

.table_page_number_settings {
  color: #000;
}

.table_page_number_settings input[type=text] {
  width: 100px !important;
}

.ds_table td {
  color: #000
}

.ds_left_table td {
  color: #000
}

.ds_left_table input[type=text] {
  width: 40px !important;
}

.ds_right_container input[type=text] {
  width: 150px !important;
}

.ds_right_table td {
  color: black;
}

#popups .pdf_merge_settings .dialog_content {

  min-height: 600px;

  overflow: auto !important;


}

.sample {
  width: 100px;
  height: 100px;
  background-color: white;
}

.empty_pages input[type=text] {
  width: 300px !important;
}

/* Wizard layout styles for new mail popup */
/* .mailtabs{width:100%;box-sizing:border-box;display:flex;flex-direction:column;margin:0;padding:0;height:100%;}
 */
/* Card style to match app consistency */
.app-config-card {
  background: #fff;
  border: 1px solid #e3e8ef;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px
}

.app-config-card-header {
  font-weight: 600;
  color: #333;
  padding-bottom: 6px;
  border-bottom: 1px solid transparent;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px
}

.app-config-container {
  max-height: none;
  overflow: visible
}

/* subject dropdown styling */
.subject-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ccc;
  z-index: 1500;
  max-height: 200px;
  overflow: auto;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* Responsive tweaks inside popup */
#popups .new_mail .new_mail_container {
  width: 820px;
  max-width: calc(100vw - 80px)
}

/* Compact form grid and inputs to avoid vertical scroll */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start
}

.input-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px
}

.input-group label {
  font-size: 13px;
  color: #444;
  margin-bottom: 6px
}

.input-wrapper {
  display: block
}

.input-wrapper input[type="text"],
.input-wrapper input[type="email"],
.input-wrapper input[type="number"],
.input-wrapper select,
.input-wrapper textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px
}

.button_setting_class input[type=button] {
  margin-right: 8px;
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid #cfcfcf;
  background: #f7f7f7
}

/* Inline checkbox wrapper to keep checkbox and label on same line */
#popups .new_mail .inline-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px
}

#popups .new_mail .inline-checkbox label {
  margin: 0;
  cursor: pointer
}

/* Make popup height auto and ensure dialog content shows full area without inner scrollbars */
#popups .new_mail .dialog_content {
  max-height: calc(100vh - 160px) !important;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  padding: 8px 10px 0 10px !important;
}

#popups .new_mail .new_mail_container {
  height: 100%;
  max-height: none;
  padding: 0
}

/* Reduce spacing for attachments table */
.attachments-table th,
.attachments-table td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px
}

@media (max-width:900px) {
  .grid-2 {
    grid-template-columns: 1fr
  }

  #popups .new_mail .new_mail_container {
    width: calc(100vw - 40px)
  }

}

.emptypages td {
  color: #000;
}

/*for optional Settings*/
.optional_div_1 {
  background: white;
  border: 1px solid #ccc;
  color: #000;
  margin: 2px;
  min-height: 450px;
  overflow: auto;
  padding: 0;
}

.optional_settings {
  display: block;
  max-width: 680px !important;
  min-height: 500px;
}

#popups .optional_settings .dialog_content {
  min-height: 500px;
  overflow: hidden;
}

/* Readonly input styling for optional settings */
.optional_settings input[type="text"]:read-only {
  background-color: #f5f5f5;
  cursor: default;
  color: #666;
}

/*for advanced settings*/
.ads_div_1 {
  background: white;
  border: 1px solid #ccc;
  color: #000;
  margin: 2px;
  height: 500px;
  overflow: hidden;
  padding: 10px;
}

.attachment_id {
  width: 300px !important;
}

.ads_table {
  border: 1px solid black;
}

.ads_table_div {
  border: 1px solid #000;
  height: 200px;
}

.ads_table_div td {
  border: 1px solid black;
  color: black
}

.advanced_settings {
  display: block;

  max-width: 800px !important;

  min-height: 500px;
}

#popups .advanced_settings .dialog_content {

  min-height: 500px;

  overflow: hidden;


}

/*for mail filtering*/
.mf_div_1 {
  background: white;
  border: 1px solid #ccc;
  color: #000;
  margin: 2px;
  height: 600px;
  overflow: hidden;
  padding: 10px;
}

.for_checkbox {
  display: flex;
}

.mf_container {
  display: flex;
  flex-direction: row;
  height: 200px;
  width: 600px;
  /*border: 1px solid black;*/
  padding: 10px;
  gap: 10px
}

.mf_left {
  height: 100%;
  width: 400px;
  border: 1px solid black;
  padding: 10px;
}

.updatecomment {
  width: 100%;
  height: 50px;
}

.mf_right {
  display: flex;
  width: 400px;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid black;
  padding: 10px;
}

.fc_div_1 {
  border: 1px solid black;
  width: 100%;
  height: 90px;
}

.menu_buttons {
  padding: 5px;
}

.menu_buttons td {
  align-items: center;
}

.menu_buttons_2 {
  padding: 5px;
}

.menu_buttons_2 td {
  align-items: center;
}

.write_mail {
  width: 100%;
  height: 100%;
}

.message_area {
  width: 100%;
  height: 300px !important;
  border: 1px solid black;
}

.message_text_area {
  width: 100%;
  height: 600px !important;
  background-color: #fff;
}

.message_settings {
  min-width: 800px !important;
}

#popups .message_settings .dialog_content {

  min-height: 600px;

  overflow: hidden;


}

.mf_query_box {
  width: 100%;
  height: 100px;
  border: 1px solid #000;
}

.mail_filtering {
  display: block;

  max-width: 700px !important;

  min-height: 600px;
}

#popups .mail_filtering .dialog_content {

  min-height: 600px;

  overflow: hidden;


}

/*body {
    padding: 0;
    margin: 0;
    height: 100%;
    font-family: "Arial", sans-serif;
  }
  .title {
    text-align: center;
    padding: 40px 0;
    font-size: 40px;
    font-weight: 300;
    color: #636983;
  }
  .wrapper {
    background-color: #f6f8ff;
    width: 100%;
    min-height: 100vh;
  }
  .wrapper .line {
    width: 50%;
    margin: 50px auto 0 auto;
    height: 1px;
    background-color: #c3d2e3;
  }
  h2.tab-title {
    font-weight: 300;
  }
  h2.tab-title.tab-primary {
    color: #636983;
  }
  h2.tab-title.tab-success {
    color: #51a14c;
  }
  h2.tab-title.tab-default {
    color: #525252;
  }
  h2.tab-title.tab-warning {
    color: #b12222;
  }
  .container {
    width: 100%;
    padding: 10px 0;
    text-align: center;
  }
  .container .card {
    max-width: 600px;
    min-height: 140px;
    background-color: white;
    border-radius: 10px;
    border: 1px solid #e3e3e3;
    margin: 0 auto;
  }
  .tabs {
    text-align: left;
    position: relative;
  }
  .tabs input {
    position: absolute;
    opacity: 0;
    margin: 0;
    padding: 0;
  }
  .tabs input + label {
    font-weight: 300;
    color: #666;
    margin: 10px 0;
    width: 110px;
    cursor: pointer;
    display: inline-block;
    transition: all 0.3s;
    text-align: center;
    font-size: 12px;
    border: none;
  }
  .tabs input + label:hover {
    color: #777;
  }
  .tabs .tabsShadow {
    width: 100%;
    padding: 10px;
    box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
    position: absolute;
    height: 35px;
    z-index: 0;
    top: 0;
    pointer-events: none;
  }
  .content {
    margin: 0px auto;
    text-align: left;
    color: #fff;
    font-size: 13px;
    line-height: 20px;
    position: relative;
    height:330px;
  }
  .content .item {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    position: absolute;
    height: 300px;
    overflow: auto;
    padding: 10px;
    color: #fff;
    background-color: transparent;
    width: 100%;
    padding-bottom: 40px;
}
  .content p {
    margin: 10px 0;
  }
  .glider {
    width: 110px;
    height: 3px;
    background: #abe1ae;
    border-radius: 3px;
    position: absolute;
    box-shadow: 0px 0px 8px 0px rgba(91, 60, 196, 0.4);
    transition: all 0.3s;
  }
  #tab-1:checked ~ .glider {
    left: 0px;
  }
  #tab-2:checked + label {
    color: #deepskyblue;
  }
  
  #tab-2:checked ~ .glider {
    left: 113px;
  }
  #tab-3:checked + label {
    color: #525252;
  }
  
  #tab-3:checked ~ .glider {
    left: 226px;
  }
  
  #tab-4:checked ~ .glider {
    left: 339px;
  }
  #tab-1:checked ~ section #content-1,
  #tab-2:checked ~ section #content-2,
  #tab-3:checked ~ section #content-3,
  #tab-4:checked ~ section #content-4 {
    opacity: 1;
    visibility: visible;
  }
  @media (max-width: 700px) {
    .tabs input + label,
    .glider {
      width: 70px;
    }
    #tab-1:checked ~ .glider {
      left: 0px;
    }
    #tab-2:checked ~ .glider {
      left: 73px;
    }
    #tab-3:checked ~ .glider {
      left: 146px;
    }
    #tab-4:checked ~ .glider {
      left: 219px;
    }
  }
  .tabs input + label {
    margin: 10px -10px;
    width: 19.95%;
    transition: all 0.3s;
    text-align: center;
    border: none;
    border-bottom: 2pt solid #1d1e22;
    border-radius: 10pt 0pt 0pt 10pt;
    border-radius: 0;
    color: white;
    display: inline-flex;
    -webkit-box-pack: center;
    margin-bottom: 10px;
    padding: 5pt 10pt;
    vertical-align: top;
    justify-content: flex-start;
    background: #333;
    box-shadow: 1px 1px 2px 1px #231f20;
    font-family: "arial";
    text-transform: uppercase;
    font-weight: 500;
    font-size: 10pt;
  }
  .content {
    margin: 0px auto;
    text-align: left;
    color: #666;
    font-size: 13px;
    line-height: 20px;
    position: relative;
    height: 330px;
    background-color: #444c4c;
    border-radius: 5px;
    box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
    display: block;
    padding: 1.25rem;
    z-index: -2;
  }
  .container .card {
    max-width: 600px;
    min-height: 140px;
    background: #272a34;
    border-radius: 10px;
    border: none;
    margin: 0 auto;
    z-index: 4 !important;
    position: relative;
  }
  p {
    font-family: muli, sans-serif;
    font-family: stix-two-text, serif;
    font-family: source-serif-pro, serif;
  }
  .content p {
    margin: 10px 0;
    font-family: "arial";
    font-weight: 300;
    letter-spacing: 0.5px;
    font-size: 13px;
    font-style: normal;
    color: #fff;
    line-height: 30px;
    margin-top: 10pt;
  }
  h2.tab-title.tab-warning,
  h2.tab-title.tab-success,
  h2.tab-title.tab-primary,
  h2.tab-title.tab-default {
    font-family: "arial";
    font-size: 16px;
    font-weight: 600;
    display: inline-flex;
    color: #fff;
    background: #abe1ae;
    background-position: bottom center;
    margin-bottom: 0pt !important;
    margin-top: 6pt;
    height: 22pt;
      text-fill-color: transparent !important;
      background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
      -webkit-background-clip: text !important;
      -moz-background-clip: text;
      -moz-text-fill-color: transparent;
      -ms-background-clip: text;
      -ms-text-fill-color: transparent;
  }
  
  h2.tab-title.tab-primary {
      background:#abe1ae;
  }
  
  h2.tab-title.tab-success {
      background: #abe1ae;
  }
  
  h2.tab-title.tab-primary {
      background: #abe1ae;
      color: #fff;
  }
  
  h2.tab-title.tab-warning {
      background: #abe1ae;
      color: #fff;
  }
  
  .tabs input {
    position: relative;
    opacity: 0;
    margin: auto !important;
    padding: 0;
  }
  label.tab.tab-primary {
    border-radius: 6pt 0 0 6pt;
  }
  label.tab.tab-warning {
    border-radius: 0 6pt 6pt 0;
  }
  #tab-1:checked + label {
    color: #abe1ae;
  }
  #tab-2:checked + label {
      color: #abe1ae;
  }
  #tab-3:checked + label {
    color: #abe1ae;
  }
  #tab-4:checked + label {
    color: #abe1ae;
  }
  #tab-1:checked ~ .glider {
    left: 8px;
    border-radius: 4pt 2pt 2pt 6pt !important;
  }
  .glider {
    width: 22.25%;
    height: 7px;
    background: #abe1ae;
    border-radius: 0pt 2pt 2pt 0pt;
    position: absolute;
    box-shadow: 0px 0px 8px 0px rgba(91, 60, 196, 0.4);
    transition: all 0.3s;
    top: 36px;
  }
  #tab-2:checked ~ .glider {
    left: 35.25%;
  }
  #tab-3:checked ~ .glider {
    background:#abe1ae;
    left: 68.35%;
  }
  
  .glider {
      width: 33.56%;
      height: 30px;
      background: #abe1ae;
      border-radius: 2pt 2pt 2pt 2pt;
      position: absolute;
      box-shadow: 0px 0px 8px 0px rgb(91 60 196 / 40%);
      transition: all 0.3s;
      top: 10px;
      z-index: -1;
  }
  .container {
    width: 100%;
    padding: 0;
    text-align: center;
}
.container .card {
    max-width: 96%;
    width: 100%;
    left: 0px;
    min-height: 40px;
    background: transparent;
    border-radius: 10px;
    border: none;
    margin: 0px;
    z-index: 4 !important;
    position: absolute;
    margin-top: -20px !important;stroke-width: ;
}
.tabs input {
    position: relative;
    opacity: 0;
    margin: auto !important;
    padding: 0;
    line-height: 2.2;
}



.tabs input + label {
    margin: 0px -10px;
    width: 33%;
    
    transition: all 0.3s;
    text-align: center;
    border: none;
    border-bottom: 2pt solid #1d1e22;
    border-radius: 10pt 0pt 0pt 10pt;
    border-radius: 0;
    color: white;
    display: inline-flex;
    -webkit-box-pack: center;
    margin-bottom: 10px;
    padding: 5pt 10pt;
    vertical-align: top;
    justify-content: flex-start;
    background: #333;
    box-shadow: 1px 1px 2px 1px #231f20;
    font-family: "arial";
    text-transform: uppercase;
    font-weight: 500;
    font-size: 10pt;
}


.tabs .tabsShadow {
    width: 100%;
    padding: 10px;
    box-shadow: 0 0 25px 0 rgb(0 0 0 / 4%);
    box-sizing: border-box;
    position: absolute;
    height: 35px;
    z-index: 0;
    top: 0;
    pointer-events: none;
}

.content {
    margin: 0px auto;
    text-align: left;
    position: absolute;
    width: 100%;
    top: 46px;
    color: #fff;
    font-size: 13px;
    line-height: 20px;
    min-height: 290px;
    height:100%;
    background-color: #444c4c;
    border-radius: 5px;
    display: block;
    padding: .5rem;
    z-index: -2;
    overflow: auto;
    box-shadow: none;
}
#popups > div{
    top: 97px !important;
    width: 600px !important;
    max-width: 600px !important;}

.tab-title-content{
    color: #1d1e22;
}
label{
    display: block;
    vertical-align: top;
    margin-top: 7px;
    color: black;
}

.card1{
  padding: 10px !important;
  min-width: 100%;
  border: 1px solid #29343c;
  }
  .mrg5T{margin-top: 5px !important;}
  .mrg10T{margin-top: 10px;}
  .mrg20T{margin-top: 20px;}
  .mrg5R{margin-right: 5px;}
  .mrg10R{margin-right: 10px !important;}
  .float-right{float: right;}
  .textarea{border: 1px solid #fff;height: 150px;width: 100%;background-color: #444c4c;}
  .form-check-label{
    background: none !important;
    color: #fff !important;
    border-bottom: 0px !important;
    margin-bottom: 10px !important;
    box-shadow: none !important;
    width: 50% !important;
    padding: 0px !important;
    text-transform: none !important;
    margin: 0px 0px 0px 5px !important;
  }
  .form-check-input{opacity: 100 !important;}
  .width100{width: 100% !important;}
  .width20{width: 20% !important;}
  .width40{width: 40% !important;}
  .width60{width: 60% !important;}
  .width30{width: 30% !important;}
  .width50{width: 50% !important;}
  .width70{width: 70% !important;}
  .width80{width: 80% !important;}
  .width90{width: 90%  !important;}
  .d-flex{display: flex !important;}
  .align-center{align-items: center;}
  .mrg50R{margin-right: 50px !important;}
  .mrg70R{margin-right: 70px !important;}
  .mrg90R{margin-right: 90px !important;}
  .form-control {
      opacity: 100 !important;
    display: inline-block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #444c4c;
    background-clip: padding-box;
    border: 1px solid #ced4da !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  .form-select {
    /* display: block; 
    width: 100%;
    /* padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    -moz-padding-start: calc(0.75rem - 3px); 
    font-size: 1rem;
    font-weight: 400;
    line-height: 2.5;
    color: #fff;
    background-color: #444c4c;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: 1px solid #ced4da;
    border-radius: 0.25rem !important ;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  .primarybt { background: #283438 !important; border:1px solid var(--border-color) !important; color: #fff !important; font-weight:bold; padding:5px 18px !important; cursor: pointer; text-shadow: none !important; display: inline-block;}
  .primarybt { -moz-border-radius: 3px !important; -webkit-border-radius: 3px !important; border-radius: 3px !important; border: none; /*font-size: 16px !important;}
  .primarybt { -moz-box-shadow: 1px 1px 2px #dfdfdf !important; -webkit-box-shadow: 1px 1px 2px #dfdfdf !important; box-shadow: 1px 1px 2px #dfdfdf !important; text-decoration:none !important; }
  .primarybt a { text-decoration:none; font-weight:normal; text-decoration:none !important; border:1px solid var(--border-color) }
  .primarybt:hover { background: #283438 !important; color: #fff !important; text-decoration:none; border:1px solid #000 !important; }
  .primarybt:active { -moz-box-shadow: inset 1px 1px 1px #12274c; -webkit-box-shadow: inset 1px 1px 1px #12274c; box-shadow: inset 1px 1px 1px #12274c; color: #474646; text-decoration:none; }
  .text-center{text-align: center;}
  .mail_ic{background: url(images/icons/envelope-solid.svg) no-repeat left center;width: 250px;height: 250px;display: inline-block;}
  input[type="text"], select, input[type="number"], textarea {background: none;}
  .headercss{font-size: 16px;    margin-bottom: 5px;}
  #content-3 > div.card1,#content-1 > div.card1 > p{margin:0;padding: 0;}
  #content-3 > div.card1 > p,#content-2 > div:nth-child(2),#content-2 > p:nth-child(3),#content-1 > div.card1{margin:0;padding: 0;}
  #popups .popup .buttons {border-top:0;}
  #popups > div > div.buttons{display: none !important;}*/
.mail_div_1_advanced input {
  padding: 5px !important;
  height: auto !important;
}

.mail_div_1_advanced select {
  padding: 3px !important;
  height: auto !important;
}

.mail_tb td label {
  margin-top: 0px !important;
}

.mail_div_gc td label {
  margin-top: 0px !important;
}

.mrg5L {
  margin-left: 5px;
}

.valign_middle {
  vertical-align: middle;
}

.mrg10L {
  margin-left: 10px;
}

.mail_div_ms_1 input[type='button'] {
  padding: 5px !important;
}


/* added by Aswini */
.mail_profiles_div {
  height: 100%;
  border: 1px solid #E4E4E4;
  border-radius: 12px;
  overflow-y: auto;
}

.profiles_grid {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.profiles_grid p {
  margin: 0;
}

.profiles_header {
  display: flex;
  width: 75%;
  justify-content: space-around;

}

.profiles_header p {
  margin: 0;
  ;
}

.create_profile_div {
  display: flex;
  justify-content: end;
  margin-bottom: 1rem;
}

.mail_profiles_div_table th {
  display: table-cell !important;
  position: sticky;
  top: 0;
  color: #202124;
  padding: 5px 5px !important;
  background: #EEEEEE;
  font-size: 14px !important;
  /* border: 1px solid #E4E4E4; */
  z-index: 100;
  display: table-cell;
  font-weight: 400;
  height: 48px;
  vertical-align: middle;
  line-height: 20px;
  letter-spacing: 0.1px;
}

.mail_profiles_div_table .profile_actions_div {
  display: flex;
  justify-content: center;
  gap: 10px;
  /* border-collapse: collapse;
  border: 1px solid #000; */
}


/* .profile_actions_div img{
  cursor: pointer;
}
.profile_actions_div .button:hover{
  background-color: var(--brand-color) !important;
  color: #fff !important;
} */
.noProfiles_div {
  height: 100%;
  justify-content: center;
  align-items: center;
}

.mail_Settings_1::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.mail_profiles_div::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.mail_profiles_tbody td {
  /* width: 10rem; */
}

.mail_profiles_div_table {
  width: 100%;
  /* border-collapse: collapse;
  border: 1px solid #000; */
}

/* .mail_profiles_div_table .mail_profiles_div_table_th, .mail_profiles_div_table .mail_profiles_div_table_td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
} */
.mail_profiles_div_table .mail_profiles_div_table_th,
.mail_profiles_div_table_td {
  padding: 10px !important;
  text-align: left;
  word-wrap: break-word;
  min-width: 368px;
  max-width: 368px;
  /* border-collapse: collapse;
  border: 1px solid #000; */
}

.mail_profiles_div_table .mail_profiles_div_table_th {
  position: sticky;
  top: 0;
  color: #202124;
  padding: 10 !important;
  background: #EEEEEE;
  font-size: 14px !important;
  /* border: 1px solid #E4E4E4; */
  z-index: 100;
  display: table-cell;
  font-weight: 400;
  height: 48px;
  vertical-align: middle;
  line-height: 20px;
  letter-spacing: 0.1px;
}

.mail_profiles_div_table thead {
  /* position: sticky;
  top: -1;
  z-index: 1;
  background-color: var(--brand-color);
  color: #fff; */
}

/* .mail_profiles_div_table th {
  background-color: #f2f2f2;
} */

.mail_profiles_div_table .mail_profiles_div_table_td {
  text-overflow: ellipsis;
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #202124;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  padding: 6px !important;
  background: #FAFAFA;
  height: 48px;
  vertical-align: middle;
  line-height: 16px;
}

.new_mail_id {
  height: 28px !important;
  width: 60% !important;
}

/* table */

.mail_profiles_div_table {
  width: 100%;
  border-collapse: collapse;
  /* margin-top: 20px; */
}

.mail_profiles_div_table tr {
  border-bottom: 1px solid #E4E4E4;

}


/* 
.bordered-table .mail_profiles_div_table_th {
  background-color: #f2f2f2;
  color: black;
  position: sticky;
  top: 0;
  z-index: 10; 
  padding: 10px;
  text-align: left;
}

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

.bordered-table tr:hover {
  background-color: #ddd;
} */

#coreProfile {
  display: block;
}

#select_core_profile {
  width: 250px;
  padding: 5px;
}

.mail_body_container {
  min-height: 580px !important;
  /* width: 100%; */
  max-width: 850px !important;
}

#popups .mail_body_container .dialog_content::-webkit-scrollbar {
  width: 5px !important;
}

#popups .new_mail .dialog_content::-webkit-scrollbar {
  width: 5px !important;
}

#popups .mail_body_container .dialog_content {
  min-height: 590px !important;
  overflow-y: auto;
}

#popups .mail_Setting .dialog_content .mail_settings_loader_contaniner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  z-index: 1000;
}

#select_env {
  width: 175px;
  padding: 3px;
}

#new_mail {
  height: 32px;
  width: 200px;
  padding: 4px 10px;
  border: none;
  border-radius: 4px;
  background: var(--brand-color) !important;
  color: #fff !important;
  cursor: pointer;
  font-weight: 500;
  font-size: 13px;
  transition: background 0.15s;
}

#new_mail:hover {
  background: #0d3d6e !important;
}

#popups>.new_mail>.buttons>button:disabled {
  visibility: visible !important;
  background-color: rgba(239, 239, 239, 0.3) !important;
  color: rgba(16, 16, 16, 0.3) !important;
  border-color: rgba(118, 118, 118, 0.3) !important;
}

#popups>.new_mail {
  max-width: 800px !important;
  min-height: 550px;
}

#new_mail:disabled {
  visibility: visible !important;
  background-color: rgba(239, 239, 239, 0.3) !important;
  color: rgba(16, 16, 16, 0.3) !important;
  border-color: rgba(118, 118, 118, 0.3) !important;
}

.mail_profiles_div_table .profile_actions_div .mail_profile_icon {
  display: inline-block;
  height: 32px;
  width: 32px;
  background-color: #E9EDEE !important;
  border-radius: 6px;
  cursor: pointer;
}

/* .mail_profiles_div_table .profile_actions_div .web_mail_profile_icon{
  opacity: 0.3;
  pointer-events: none;
} */
/* .mail_profiles_div_table .profile_actions_div .edit_profile_config{
  background: url(images/icons/edit_pen_ic.svg) no-repeat center;
}
.mail_profiles_div_table .profile_actions_div .delete_profile_config{
  background: url(images/icons/delete_red_ic.svg) no-repeat center;

}
.mail_profiles_div_table .profile_actions_div .mail_body_config{
  background: url(images/icons/mail.svg) no-repeat center;
} */
.delete_profile_container {
  min-width: 330px;
  max-width: 330px;
  width: 330px;
  min-height: auto;
  height: auto;
}

/* #subject_mail {
  width: 100%;
  padding: 10px;
  padding-right: 40px;
  font-size: 16px;
  box-sizing: border-box;
} */

.dropdown-icon {
  position: absolute;
  top: 50%;
  right: 27px;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 1;
  right: 10px;
}

#subject_dropdownMenu {
  display: none;
  position: absolute;
  width: 100%;
  background: white;
  border: 1px solid #ccc;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  max-height: 150px;
  overflow-y: auto;
  z-index: 2;
}

#subject_dropdownMenu div {
  padding: 10px;
  cursor: pointer;
}

#subject_dropdownMenu div:hover {
  background-color: #f0f0f0;
}

/* PROFILE_NAME */

.new_mail_container .mail_global_config_selection {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 10px;
}

.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* AI Prompt Dialog Styles */
.ai_prompt_dialog {
  min-width: 550px !important;
  max-width: 600px !important;
}

.ai_prompt_dialog .dialog_content {
  max-height: 650px !important;
  overflow-y: auto;
  padding: 15px !important;
}

.ai-prompt-container {
  padding: 0;
}

.ai-prompt-field {
  margin-bottom: 12px;
}

.ai-prompt-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 5px;
  font-size: 13px;
  color: #333;
}

.ai-prompt-field label span[style*="color:red"] {
  font-size: 14px;
  margin-left: 2px;
}

.ai-prompt-field input[type="text"],
.ai-prompt-field textarea,
.ai-prompt-field select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13px;
  font-family: Arial, sans-serif;
  box-sizing: border-box;
  background-color: white;
}

.ai-prompt-field textarea {
  resize: vertical;
  min-height: 65px;
  line-height: 1.5;
}

.ai-prompt-field input[type="text"]:focus,
.ai-prompt-field textarea:focus,
.ai-prompt-field select:focus {
  outline: none;
  border-color: var(--brand-color);
  box-shadow: 0 0 0 2px rgba(15, 70, 124, 0.1);
}

.ai-prompt-field select {
  cursor: pointer;
}

.ai-prompt-field input::placeholder,
.ai-prompt-field textarea::placeholder {
  color: #999;
  font-size: 12px;
}

/* Enhanced button styling for Generate button */
.ai_prompt_dialog button[data-id='popup_ok'] {
  background: var(--brand-color) !important;
  color: white !important;
  font-weight: 600 !important;
  padding: 8px 24px !important;
  font-size: 13px !important;
}

.ai_prompt_dialog button[data-id='popup_ok']:hover {
  opacity: 0.9 !important;
}

/* Scrollbar styling for dialog */
.ai_prompt_dialog .dialog_content::-webkit-scrollbar {
  width: 5px;
}

.ai_prompt_dialog .dialog_content::-webkit-scrollbar-track {
  background: #f5f5f5;
}

.ai_prompt_dialog .dialog_content::-webkit-scrollbar-thumb {
  background: var(--brand-color);
}

.ai_prompt_dialog .dialog_content::-webkit-scrollbar-thumb:hover {
  background: #0a3458;
}

/* Override td height from other files */
.ai_prompt_dialog td {
  height: auto !important;
  min-height: unset !important;
  max-height: none !important;
}

/* Mail profile wizard: normalize legacy fixed-height rules */
#popups>.new_mail {
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100vh - 80px) !important;
}

#popups .new_mail .dialog_content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto;
  min-height: 0 !important;
  max-height: calc(100vh - 150px) !important;
  overflow: hidden !important;
  margin-bottom: 14px;
}

#popups .new_mail .new_mail_container {
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
}

#popups .new_mail .mailtabs {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

#popups .new_mail .profile-step-wizard__content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding-bottom: 12px !important;
}

#popups .new_mail .profile-step-wizard__panel td,
#popups .new_mail .profile-step-wizard__panel th {
  height: auto !important;
  min-height: unset !important;
  max-height: none !important;
  line-height: normal !important;
}
/* Main WhatsApp Settings Dialog */
.whatsappsettings {
	width: 860px !important;
	max-width: 860px !important;
	height: 78vh !important;
	max-height: 78vh !important;
	min-height: 620px !important;
}

.whatsappsettings .dialog_content {
	width: 840px;
	max-width: calc(100vw - 80px);
	height: calc(78vh - 9.2rem) !important;
	min-height: 440px;
	max-height: calc(78vh - 9.2rem) !important;
	overflow: auto;
	padding: 10px;
}

/* WhatsApp Dashboard */
.whatsappsettings_dashboard {
	max-width: 776px !important;
	min-width: 776px !important;
	min-height: 510px !important;
	max-height: 510px !important;
	height: 510px !important;
	width: 776px !important;
}

#popups .whatsappsettings_dashboard .dialog_content {
	max-height: 410px !important;
	overflow: hidden !important;
	padding: 1rem;
}

/* Settings Container & Actions */
.wa_settings_container {
	height: 397px;
	width: 100%;
	display: flex;
	flex-direction: column;
	background-color: #FFFFFF;
	gap: 5px;
}

.wa_settings_actions {
	height: 10%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.wa_settings_actions_on_empty {
	height: 100% !important;
	display: flex !important;
	flex-direction: row !important;
	justify-content: center !important;
	width: 100% !important;
	border: 1px solid #ccc !important;
	border-radius: 4px !important;
	background-color: #eee !important;
	align-items: center !important;
}

.wa_primary_btn {
	background-color: var(--brand-color);
	color: #ffffff;
	padding: 4px 10px;
	border-radius: 4px;
	height: 32px;
	width: 200px;
	border: none;
	cursor: pointer;
	font-weight: 500;
	font-size: 13px;
	transition: background 0.15s;
}

.wa_primary_btn:hover {
	background-color: #0d3d6e;
}

.wa_settings_content {
	height: 90%;
	border: 1px solid #E4E4E4;
	border-radius: 12px;
	overflow-y: auto;
}

.wa_settings_content::-webkit-scrollbar {
	width: 5px;
}

/* Settings Table */
.wa_settings_table {
	width: 100%;
	border-collapse: collapse;
}

.wa_settings_table th,
.wa_settings_table td {
	padding: 6px;
	height: auto;
}

.wa_settings_icons {
	display: flex;
	gap: 8px;
}

.wa_settings_icon {
	width: 32px;
	height: 32px;
	display: inline-block;
	cursor: pointer;
	background-size: 16px;
	background-repeat: no-repeat;
	background-position: center;
	background-color: #E9EDEE;
	border-radius: 6px;
}

.edit_wa_settings {
	background-image: url('images/icons/edit_pen_ic.svg');
}

.delete_wa_settings {
	background-image: url('images/icons/delete_red_ic.svg');
}

/* Modal Container */
.wa_settings_modal {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 0;
}

/* Tabs styling */
.wa_tabs {
	display: flex;
	gap: 6px;
	border-bottom: 1px solid #d7dbe2;
	padding-bottom: 0;
}

.wa_tab_button {
	border: 1px solid #d7dbe2;
	border-bottom: none;
	background: #f5f7fb;
	padding: 8px 14px;
	cursor: pointer;
	border-radius: 8px 8px 0 0;
	font-weight: 500;
	font-size: 13px;
	transition: all 0.2s ease;
}

.wa_tab_button:hover {
	background: #ffffff;
	color: #0F467C;
}

.wa_tab_button.active {
	background: #ffffff;
	color: #1f4f8f;
	font-weight: 600;
}

.wa_tabcontent {
	display: none;
	gap: 12px;
	border: 1px solid #d7dbe2;
	border-radius: 0 10px 10px 10px;
	padding: 10px;
	background: #fbfcff;
	overflow-y: auto;
	max-height: calc(100% - 40px);
}

/* Card Components */
.wa_section_box,
.wa-card {
	border: 1px solid #e8ecf3;
	background: #ffffff;
	padding: 10px;
	border-radius: 6px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 0;
}

.wa-card-title {
	font-size: 14px;
	font-weight: 600;
	color: #2d2d2d;
	margin: 0 0 8px 0;
}

/* Form Fields */
.wa-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.wa-field label,
.wa_section_box label {
	font-size: 13px;
	font-weight: 500;
	color: #333;
	margin: 0;
}

.wa-field input,
.wa-field select,
.whatsappsettings input[type="text"],
.whatsappsettings input[type="number"],
.whatsappsettings input[type="password"],
.whatsappsettings select,
.whatsappsettings textarea {
	width: 100%;
	background: #fff;
	color: #222;
	border: 1px solid #d2d8e3;
	border-radius: 4px;
	padding: 7px 10px;
	font-size: 13px;
	box-sizing: border-box;
}

.whatsappsettings textarea {
	min-height: 110px;
	resize: vertical;
	font-family: 'Courier New', monospace;
}

/* Toggle Component */
.wa-toggle-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px;
	border: 1px solid #e1e6ef;
	border-radius: 6px;
	background: #fff;
	gap: 12px;
}

.wa-toggle-row label {
	font-size: 13px;
	font-weight: 500;
	color: #333;
	margin: 0;
	flex: 1;
}

.wa-toggle-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.wa-toggle-wrap input[type='checkbox'] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.wa-toggle-switch {
	width: 44px;
	height: 20px;
	background: #ccc;
	border-radius: 10px;
	cursor: pointer;
	transition: background 0.25s;
	position: relative;
}

.wa-toggle-slider {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.25s;
}

.wa-toggle-wrap input[type='checkbox']:checked + .wa-toggle-switch {
	background: #0F467C;
}

.wa-toggle-wrap input[type='checkbox']:checked + .wa-toggle-switch .wa-toggle-slider {
	transform: translateX(24px);
}

/* DB Toggle Components */
.wa-db-toggle-switch {
	width: 44px;
	height: 20px;
	background: #ccc;
	border-radius: 10px;
	cursor: pointer;
	transition: background 0.3s;
	position: relative;
}

.wa-db-toggle-slider {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.3s;
}

/* Inline Checkbox */
.wa-inline-check {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 6px 0 12px 0;
}

.wa-inline-check input[type="checkbox"] {
	width: auto !important;
	margin: 0;
	cursor: pointer;
}

.wa-inline-check label {
	font-size: 13px;
	font-weight: 500;
	color: #333;
	margin: 0;
	cursor: pointer;
}

/* Config Table */
.wa-config-label {
	font-size: 13px;
	font-weight: 600;
	color: #333;
	display: block;
	margin-bottom: 8px;
}

.wa_config_table_wrap {
	border: 1px solid #e2e6ef;
	background: #fff;
	border-radius: 6px;
	padding: 12px;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Generic API Settings Card */
.wa-generic-api-card {
	border: 1px solid #d0d0d0;
	background: #fff;
	border-radius: 4px;
	padding: 12px;
	margin-top: 8px;
}

/* Generic API gear icon size */
#wa_generic_api_card .settings_icon {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	border: 1px solid #d0d0d0;
	border-radius: 4px;
	background-size: 16px;
	cursor: pointer;
}

.wa-generic-api-card-title {
	font-size: 13px;
	font-weight: 600;
	color: #333;
	padding-bottom: 8px;
	border-bottom: 1px solid #e8e8e8;
	margin-bottom: 10px;
}

.wa-generic-api-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 6px 0;
}

.wa-generic-api-row input[type="checkbox"] {
	width: auto !important;
	margin: 0;
	cursor: pointer;
}

.wa-generic-api-row label {
	font-size: 13px;
	font-weight: 500;
	color: #333;
	cursor: pointer;
	margin: 0;
}

.wa_config_table {
	width: 100%;
	border-collapse: collapse;
}

.wa_config_table th,
.wa_config_table td {
	border: 1px solid #e2e6ef;
	padding: 8px 10px;
	text-align: left;
	vertical-align: middle;
	height: auto;
	font-size: 13px;
}

.wa_config_table th {
	background: #f5f7fb;
	font-weight: 600;
	color: #333;
}

.wa_config_table td label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-weight: 500;
}

/* Advanced Tab */
.wa_advanced_stack {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wa_query_edit {
	width: 100%;
	min-height: 120px;
	border: 1px solid #d8dee9;
	border-radius: 4px;
	background: #fff;
	padding: 6px;
	box-sizing: border-box;
	font-family: 'Courier New', monospace;
	font-size: 12px;
	resize: vertical;
}

.wa_query_edit textarea {
	border: 0 !important;
	padding: 0 !important;
	min-height: 108px;
	background: transparent !important;
}

.wa_section_head {
	font-size: 13px;
	font-weight: 600;
	color: #25344d;
	margin: 0;
}

.wa_section_head_sm {
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 4px;
}

.wa_adv_hint {
	font-size: 12px;
	color: #5f6d83;
	margin: 0;
}

.wa_adv_section {
	background: #ffffff;
}

.wa_db_toggle_row .wa-toggle-wrap input[type='checkbox'] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

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

.wa_inline_row > input {
	flex: 1;
}

.wa_icon_btn {
	width: 36px;
	height: 34px;
	border: 1px solid #d2d8e3;
	border-radius: 4px;
	background-size: 18px;
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
	flex-shrink: 0;
}

.wa_table_param_section {
	border: 1px solid #e8ecf3;
	border-radius: 6px;
	padding: 12px;
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wa_db_meta_row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 10px;
	align-items: end;
}

.wa_insert_btn {
	padding: 7px 20px;
	background: #0F467C;
	color: #fff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
	height: 34px;
}

/* Override Global td/th constraints */
#popups .whatsappsettings .wa_config_table th,
#popups .whatsappsettings .wa_config_table td,
#popups .whatsappsettings .wa_settings_table th,
#popups .whatsappsettings .wa_settings_table td {
	height: auto !important;
}

#popups .whatsappsettings_dashboard .dialog_content .wa_settings_container th {
	position: sticky;
	top: 0;
	color: #202124;
	padding: 5px 5px !important;
	background: #EEEEEE;
	font-size: 14px !important;
	z-index: 100;
	display: table-cell;
	font-weight: 400;
	height: 48px;
	vertical-align: middle;
	line-height: 20px;
	letter-spacing: 0.1px;
	font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

#popups .whatsappsettings_dashboard .dialog_content .wa_settings_container tr {
	border-bottom: 1px solid #E4E4E4;
}

#popups .whatsappsettings_dashboard .dialog_content .wa_settings_container th:first-child {
	border-radius: 12px 0px 0px 0px;
}

#popups .whatsappsettings_dashboard .dialog_content .wa_settings_container th:last-child {
	border-radius: 0px 12px 0px 0px;
}

#popups .whatsappsettings_dashboard .dialog_content .wa_settings_container td {
	border: 1px solid #f1f1f1 !important;
	font-size: 12px !important;
	color: #202124;
	white-space: nowrap;
	text-overflow: ellipsis !important;
	overflow: hidden !important;
	padding: 6px !important;
	background: #FAFAFA;
	height: 48px;
	vertical-align: middle;
	line-height: 16px;
}

/* ============================================================
   Process Settings Dialog  –  redesigned
   ============================================================ */

/* ── Popup shell sizing ─────────────────────────────────────── */
#popups .process_settings_popup {
  width: 680px !important;
  max-width: 680px !important;
  height: 510px !important;
  max-height: 510px !important;
  min-height: 510px !important;
}

#popups .process_settings_popup .dialog_content {
  max-height: 408px !important;
  overflow: hidden !important;
  padding: 5px !important;
}

/* ── Two-panel shell ────────────────────────────────────────── */
.ps_shell {
  display: flex;
  height: 354px;
  border: 1px solid #cdd3dc;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #2c3e50;
}

/* ── Sidebar ────────────────────────────────────────────────── */
.ps_sidebar {
  width: 192px;
  min-width: 192px;
  display: flex;
  flex-direction: column;
  background: #f5f7fa;
  border-right: 1px solid #cdd3dc;
  overflow: hidden;
}

.ps_sidebar_hdr {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  height: 36px;
  min-height: 36px;
  background: var(--brand-color, #2d5fa6);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.ps_sidebar_hdr svg {
  flex-shrink: 0;
  opacity: 0.85;
}

.ps_client_list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
}

.ps_client_list::-webkit-scrollbar { width: 4px; }
.ps_client_list::-webkit-scrollbar-thumb {
  background: #b8c2d0;
  border-radius: 2px;
}

.ps_client_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px 6px 14px;
  cursor: pointer;
  color: #3d4f66;
  font-size: 11.5px;
  border-left: 3px solid transparent;
  transition: background 0.1s, border-color 0.1s;
  user-select: none;
  white-space: nowrap;
}

.ps_client_item:hover {
  background: #e4ecf9;
}

.ps_client_item.ps_active {
  background: #dde8f9;
  border-left-color: var(--brand-color, #2d5fa6);
  color: var(--brand-color, #1a3a70);
  font-weight: 600;
}

.ps_client_name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Green dot — indicates at least one automation is enabled */
.ps_config_dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #27ae60;
  flex-shrink: 0;
  margin-left: 5px;
  box-shadow: 0 0 0 2px rgba(39,174,96,0.18);
}

/* ── Main (right) panel ──────────────────────────────────────── */
.ps_main {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 12px 12px;
  background: #f8f9fb;
}

.ps_main::-webkit-scrollbar { width: 5px; }
.ps_main::-webkit-scrollbar-thumb {
  background: #b8c2d0;
  border-radius: 3px;
}

/* Right panel header row */
.ps_right_hdr {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  padding-bottom: 9px;
  border-bottom: 1.5px solid #e0e6ef;
}

.ps_right_hdr_icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: #e8eef8;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-color, #2d5fa6);
  flex-shrink: 0;
}

.ps_right_hdr_text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ps_right_client {
  font-size: 13px;
  font-weight: 700;
  color: #1e2d45;
  line-height: 1.25;
}

.ps_right_subtitle {
  font-size: 10.5px;
  color: #7a8ca0;
  line-height: 1.2;
}

/* ── Cards ───────────────────────────────────────────────────── */
.ps_card {
  background: #fff;
  border: 1px solid #dce3ed;
  border-left: 3px solid #cdd5e2;
  border-radius: 6px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-left-color 0.18s, box-shadow 0.18s;
}

.ps_card.ps_card_on {
  border-left-color: var(--brand-color, #2d5fa6);
  box-shadow: 0 2px 8px rgba(45,95,166,0.08);
}

.ps_card_hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #f2f5fa;
  border-bottom: 1px solid #dce3ed;
  min-height: 38px;
}

.ps_card_on .ps_card_hdr {
  background: #eaf0fb;
  border-bottom-color: #c5d5ee;
}

.ps_card_title_group {
  display: flex;
  align-items: center;
  gap: 7px;
}

.ps_card_icon {
  color: #6a88b0;
  flex-shrink: 0;
}

.ps_card_on .ps_card_icon {
  color: var(--brand-color, #2d5fa6);
}

.ps_card_title {
  font-size: 12.5px;
  font-weight: 600;
  color: #354a60;
}

.ps_card_on .ps_card_title {
  color: var(--brand-color, #1a3a6e);
}

/* ── Toggle switch ───────────────────────────────────────────── */
.ps_toggle_sw {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  flex-shrink: 0;
}

.ps_toggle_sw input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.ps_slider {
  position: relative;
  width: 38px;
  height: 21px;
  background: #b8c4d0;
  border-radius: 11px;
  flex-shrink: 0;
  transition: background 0.2s;
}

.ps_slider::before {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  top: 3px;
  left: 3px;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.22);
}

.ps_toggle_sw input:checked + .ps_slider {
  background: var(--brand-color, #2d5fa6);
}

.ps_toggle_sw input:checked + .ps_slider::before {
  transform: translateX(17px);
}

.ps_toggle_lbl {
  font-size: 11px;
  color: #8a96a8;
  user-select: none;
  min-width: 48px;
  transition: color 0.15s;
}

.ps_toggle_sw input:checked ~ .ps_toggle_lbl {
  color: var(--brand-color, #2d5fa6);
  font-weight: 600;
}

/* Small toggle for boolean field rows */
.ps_slider_sm {
  width: 30px;
  height: 17px;
}

.ps_slider_sm::before {
  width: 12px;
  height: 12px;
  top: 2.5px;
  left: 2.5px;
}

.ps_toggle_sw input:checked + .ps_slider_sm::before {
  transform: translateX(13px);
}

/* ── Card body ───────────────────────────────────────────────── */
.ps_card_body {
  padding: 2px 0 4px;
  animation: ps_body_in 0.16s ease;
}

@keyframes ps_body_in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Field rows ──────────────────────────────────────────────── */
.ps_field_row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #f0f3f7;
  min-height: 30px;
}

.ps_field_row:last-child {
  border-bottom: none;
}

.ps_field_row:hover {
  background: #f6f9fd;
}

.ps_field_label {
  width: 50%;
  flex-shrink: 0;
  padding: 5px 10px 5px 12px;
  display: flex;
  align-items: center;
  font-size: 11.5px;
  color: #3d4f66;
  background: #f4f6fa;
  border-right: 1px solid #e8ecf3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Level-1 indent (Distribution Mode row) */
.ps_field_l1 .ps_field_label {
  padding-left: 24px !important;
}

/* Level-2 indent (FGT Access Mode row) */
.ps_field_l2 .ps_field_label {
  padding-left: 38px !important;
  font-style: italic;
  color: #5a6e88;
}

.ps_field_ctrl {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 3px 8px 3px 7px;
  background: #fff;
}

/* ── Form controls ───────────────────────────────────────────── */
.ps_select {
  width: 100%;
  height: 24px;
  border: 1px solid #cdd3dc;
  border-radius: 4px;
  padding: 0 5px;
  font-size: 11.5px;
  font-family: inherit;
  color: #2c3e50;
  background: #fff;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: auto;
}

.ps_select:hover  { border-color: #8db0e0; }
.ps_select:focus  {
  border-color: var(--brand-color, #2d5fa6);
  box-shadow: 0 0 0 2px rgba(45,95,166,0.14);
}

.ps_text_input {
  width: 100%;
  height: 24px;
  border: 1px solid #cdd3dc;
  border-radius: 4px;
  padding: 0 7px;
  font-size: 11.5px;
  font-family: inherit;
  color: #2c3e50;
  background: #fff;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.ps_text_input:hover  { border-color: #8db0e0; }
.ps_text_input:focus  {
  border-color: var(--brand-color, #2d5fa6);
  box-shadow: 0 0 0 2px rgba(45,95,166,0.14);
}

.ps_text_input::placeholder { color: #b0bacb; }

/* ── Searchable dropdown widget ─────────────────────────────── */
.ps_searchable_wrap {
  position: relative;
  width: 100%;
}

/* Closed trigger — looks like a <select> */
.ps_sd_trigger {
  display: flex;
  align-items: center;
  width: 100%;
  height: 24px;
  border: 1px solid #cdd3dc;
  border-radius: 4px;
  padding: 0 8px;
  font-size: 11.5px;
  color: #2c3e50;
  background: #fff;
  cursor: pointer;
  box-sizing: border-box;
  user-select: none;
}

.ps_sd_trigger:hover { border-color: #8db0e0; }
.ps_sd_trigger.ps_sd_active {
  border-color: #4a90d9;
  box-shadow: 0 0 0 2px rgba(74,144,217,.18);
}

.ps_sd_display {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
}
.ps_sd_ph { color: #b0bacb; }

/* Chevron arrow */
.ps_sd_caret {
  flex-shrink: 0;
  width: 10px;
  height: 6px;
  margin-left: 5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238a99b3'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Dropdown panel */
.ps_sd_panel {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 100%;
  background: #fff;
  border: 1px solid #cdd3dc;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,.13);
  z-index: 9999;
  overflow: hidden;
}
.ps_sd_panel.ps_sd_open { display: block; }

/* Search input inside panel */
.ps_sd_search {
  display: block;
  width: 100%;
  height: 26px;
  border: none;
  border-bottom: 1px solid #e4eaf3;
  padding: 0 8px;
  font-size: 11px;
  color: #2c3e50;
  background: #f8f9fd;
  box-sizing: border-box;
  outline: none;
}
.ps_sd_search:focus { background: #fff; }
.ps_sd_search::placeholder { color: #b0bacb; }

/* Scrollable options list */
.ps_sd_list {
  max-height: 140px;
  overflow-y: auto;
  padding: 2px 0;
  margin: 0;
  list-style: none;
}

/* Thin scrollbar */
.ps_sd_list::-webkit-scrollbar        { width: 4px; }
.ps_sd_list::-webkit-scrollbar-track  { background: transparent; }
.ps_sd_list::-webkit-scrollbar-thumb  { background: #c4cdd8; border-radius: 2px; }

.ps_sd_item {
  padding: 3px 10px;
  font-size: 11.5px;
  color: #2c3e50;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ps_sd_item:hover              { background: #edf4ff; color: #1a5fb4; }
.ps_sd_item.ps_sd_selected     { background: #d8eaff; color: #1a5fb4; font-weight: 600; }

/* ── Distribution sub-section divider ───────────────────────── */
.ps_dist_section {
  margin-top: 3px;
  border-top: 1px solid #e4eaf3;
}

.ps_dist_divider {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  background: #edf2fc;
  border-bottom: 1px solid #d8e3f4;
  font-size: 10.5px;
  font-weight: 700;
  color: #4a6585;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ps_dist_divider::before {
  content: '';
  display: block;
  width: 3px;
  height: 12px;
  background: var(--brand-color, #2d5fa6);
  border-radius: 2px;
  flex-shrink: 0;
}

/* ── Empty / info placeholder ────────────────────────────────── */
.ps_no_fields {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px 12px;
  color: #9aabb8;
  font-size: 11.5px;
  text-align: center;
}

.ps_no_fields svg { opacity: 0.3; }

.sms_settings_div{
  background:#fff;
  border:1px solid #d0d0d0;
  color:#1f1f1f;
  margin:2px;
  min-height:600px;
  padding:12px 12px 12px 12px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.sms-topbar{
  display:flex;
  gap:12px;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
}

.sms-profile-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:280px;
  flex:1;
}

.sms-profile-field label,
.sms-field label,
.sms-radio-group span{
  font-size:13px;
  font-weight:500;
  color:#333;
}

.sms-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.sms_actions input,
.sms-actions input,
.sms-tabcontent button,
.sms_tab_button{
  font-size:13px;
}

.sms_settings_div input[type=text],
.sms_settings_div input[type=number],
.sms_settings_div input[type=password],
.sms_settings_div select,
.sms_settings_div textarea,
.sms-profile-field select{
  width:100% !important;
  border:1px solid #d0d0d0;
  border-radius:4px;
  background:#fff;
  padding:8px 10px;
  box-sizing:border-box;
}

.sms_tab{
  display:flex;
  gap:2px;
  border-bottom:none;
}

.sms_tab_button{
  background:#f5f5f5;
  color:#222;
  border:1px solid #d0d0d0;
  border-bottom:none;
  outline:none;
  cursor:pointer;
  transition:0.2s;
  font-size:14px;
  padding:7px 14px;
  border-radius:4px 4px 0 0;
}

.sms_tab_button.active,
.sms_tab_button:hover{
  background:#fff;
  color:#0F467C;
}

.sms_tabcontent {
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:0;
  min-height:470px;
}

.sms-card,
#smpp_div,
#web_url{
  border:1px solid #dcdcdc;
  border-radius:6px;
  background:#fafafa;
  padding:14px;
}

.sms-card-title{
  font-size:14px;
  font-weight:600;
  color:#2d2d2d;
  margin-bottom:12px;
}

.sms-grid-2,
.sms-grid-3,
.sms-grid-4{
  display:grid;
  gap:12px;
  margin-bottom:12px;
}

.sms-grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.sms-grid-3{ grid-template-columns:2fr 1fr auto; align-items:end; }
.sms-grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }

.sms-field{ display:flex; flex-direction:column; gap:6px; }
.sms-field-full{ grid-column:1 / -1; }
.sms-field-actions button{ min-width:96px; }

.sms-inline-check{
  display:flex;
  align-items:center;
  gap:8px;
  margin:6px 0 12px 0;
}

/* Generic API gear icon size */
#sms_generic_api_card .settings_icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  background-size: 16px;
  cursor: pointer;
}

.sms-toggle-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:6px 0 12px 0;
}

.sms-toggle-row label{
  font-size:13px;
  font-weight:500;
  color:#333;
  margin:0;
}

.sms-toggle-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
}

.sms-toggle-wrap input[type='checkbox']{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
}

.sms-toggle-switch{
  width:44px;
  height:20px;
  background:#ccc;
  border-radius:10px;
  cursor:pointer;
  transition:background 0.25s;
  position:relative;
}

.sms-toggle-slider{
  position:absolute;
  top:2px;
  left:2px;
  width:16px;
  height:16px;
  background:#fff;
  border-radius:50%;
  transition:transform 0.25s;
}

.sms-toggle-wrap input[type='checkbox']:checked + .sms-toggle-switch{
  background:#0F467C;
}

.sms-toggle-wrap input[type='checkbox']:checked + .sms-toggle-switch .sms-toggle-slider{
  transform:translateX(24px);
}

.sms-inline-groups{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-bottom:12px;
}

.sms-radio-group{
  display:grid;
  grid-template-columns:130px auto auto;
  align-items:center;
  gap:10px;
}

.sms-radio-group span{
  margin:0;
  line-height:1.2;
}

.sms-radio-group label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0;
  white-space:nowrap;
}

.sms-radio-group input[type='radio']{
  margin:0;
}

.sms-inline-row{
  display:flex;
  align-items:center;
  gap:8px;
}

.sms-inline-row button,
.sms-field-actions button,
.sms-actions input{
  border:1px solid #d0d0d0;
  background:#f5f5f5;
  border-radius:4px;
  padding:8px 14px;
  cursor:pointer;
}

.select_gc_div{
  border:1px solid #e1e1e1;
  border-radius:4px;
  padding:8px 10px;
  background:#fff;
}

.select_gc_sms_profile{
  width:100% !important;
}

.select_gc_row{
  align-items:center;
  gap:12px;
}

.select_gc_row label{
  min-width:110px;
  margin:0;
  font-size:13px;
  color:#666;
}

#sms_add_profile_modal_btn {
	background-color: var(--brand-color);
	color: #fff;
	padding: 4px 10px;
	border-radius: 4px;
	height: 32px;
	width: 200px;
	border: none;
	cursor: pointer;
	font-weight: 500;
	font-size: 13px;
	transition: background 0.15s;
}

#sms_add_profile_modal_btn:hover {
	background-color: #0d3d6e;
}

.select_gc_row .select_gc_sms_profile{
  flex:1;
  width:auto !important;
}

#request_te{
  width:100%;
  min-height:84px;
  background-color:#fff;
  resize:vertical;
}

.insert_message{
  width:100%;
  min-height:280px;
  border:1px solid #d0d0d0;
  border-radius:4px;
  background:#fff;
}

.query_edit{
  width:100%;
  min-height:280px;
  border:1px solid #d0d0d0;
  border-radius:4px;
  background:#fff;
}
.smssettings{

  display: block;

  max-width: 800px !important;

  min-height: 600px !important;

}


#popups .smssettings .dialog_content{

  min-height: 600px !important;

  max-height: 75vh;

  overflow: hidden !important;

  padding-bottom: 0 !important;


}

#popups .sms_dashboard{
  max-width: 776px !important;
  min-width: 776px !important;
  min-height: 510px !important;
  max-height: 510px !important;
  height: 510px !important;
  width: 776px !important;
}

#popups .popup.sms_dashboard .dialog_content{
  max-height: 410px !important;
  overflow: hidden !important;
  padding: 1rem;
}

#popups .database_settings_dialog{
  width: 540px !important;
  max-width: 540px !important;
  min-width: 540px !important;
  min-height: 620px !important;
  max-height: 80vh !important;
}

#popups .database_settings_dialog .dialog_content{
  max-height: calc(80vh - 9rem) !important;
  min-height: 470px !important;
  overflow-y: auto !important;
}

#popups .advanced_settings_dialog{
  width: 400px !important;
  max-width: 400px !important;
  min-width: 400px !important;
  min-height: 280px !important;
  height: 280px !important;
  max-height: 280px !important;
}

#popups .advanced_settings_dialog .dialog_content{
  max-height: none !important;
  min-height: auto !important;
  overflow-y: hidden !important;
  padding: 12px 16px 8px 16px !important;
}

#popups .advanced_settings_dialog td{
  height: auto !important;
}

/* SMS Dashboard — mirrors Print Settings layout */
.sms_settings_container{
  height: 397px;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  gap: 5px;
}

.sms_settings_actions_on_empty{
  height: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  width: 100% !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  background-color: #eee !important;
  align-items: center !important;
}

.sms_settings_container .sms_settings_actions_on_empty button{
  background-color: var(--brand-color);
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 4px;
  height: 32px;
  width: 200px;
  border: none;
  cursor: pointer;
}

.sms_settings_container .sms_settings_actions{
  height: 10%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.sms_settings_container .sms_settings_actions button{
  background-color: var(--brand-color);
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 4px;
  height: 32px;
  width: 200px;
  border: none;
  cursor: pointer;
}

.sms_settings_container .sms_settings_content{
  height: 90%;
  border: 1px solid #E4E4E4;
  border-radius: 12px;
  overflow-y: auto;
}

.sms_settings_container .sms_settings_content::-webkit-scrollbar{
  width: 5px;
}

#popups .sms_dashboard .dialog_content .sms_settings_container th{
  position: sticky;
  top: 0;
  color: #202124;
  padding: 5px !important;
  background: #EEEEEE;
  font-size: 14px !important;
  z-index: 100;
  display: table-cell;
  font-weight: 400;
  height: 48px;
  vertical-align: middle;
  line-height: 20px;
  letter-spacing: 0.1px;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

#popups .sms_dashboard .dialog_content .sms_settings_container table{
  width: 100%;
  border-collapse: collapse;
}

#popups .sms_dashboard .dialog_content .sms_settings_container tr{
  border-bottom: 1px solid #E4E4E4;
}

#popups .sms_dashboard .dialog_content .sms_settings_container th:first-child{
  border-radius: 12px 0px 0px 0px;
}

#popups .sms_dashboard .dialog_content .sms_settings_container th:last-child{
  border-radius: 0px 12px 0px 0px;
}

#popups .sms_dashboard .dialog_content .sms_settings_container td{
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #202124;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  padding: 6px !important;
  background: #FAFAFA;
  height: 48px;
  vertical-align: middle;
  line-height: 16px;
}

#popups .sms_dashboard .dialog_content .sms_settings_container td .sms_settings_icons{
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: flex-start;
  gap: 5px;
}

#popups .sms_dashboard .dialog_content .sms_settings_container td .sms_settings_icon{
  display: inline-block;
  height: 32px;
  width: 32px;
  background-color: #E9EDEE !important;
  border-radius: 6px;
  cursor: pointer;
}

#popups .sms_dashboard .dialog_content .sms_settings_container td .edit_sms_settings{
  background: url(images/icons/edit_pen_ic.svg) no-repeat center;
}

#popups .sms_dashboard .dialog_content .sms_settings_container td .delete_sms_settings{
  background: url(images/icons/delete_red_ic.svg) no-repeat center;
}



/*body {
    padding: 0;
    margin: 0;
    height: 100%;
    font-family: "Arial", sans-serif;
  }
  .title {
    text-align: center;
    padding: 40px 0;
    font-size: 40px;
    font-weight: 300;
    color: #636983;
  }
  .wrapper {
    background-color: #f6f8ff;
    width: 100%;
    min-height: 100vh;
  }
  .wrapper .line {
    width: 50%;
    margin: 50px auto 0 auto;
    height: 1px;
    background-color: #c3d2e3;
  }
  h2.tab-title {
    font-weight: 300;
  }
  h2.tab-title.tab-primary {
    color: #636983;
  }
  h2.tab-title.tab-success {
    color: #51a14c;
  }
  h2.tab-title.tab-default {
    color: #525252;
  }
  h2.tab-title.tab-warning {
    color: #b12222;
  }
  .container {
    width: 100%;
    padding: 10px 0;
    text-align: center;
  }
  .container .card {
    max-width: 600px;
    min-height: 140px;
    background-color: white;
    border-radius: 10px;
    border: 1px solid #e3e3e3;
    margin: 0 auto;
  }
  .tabs {
    text-align: left;
    position: relative;
  }
  .tabs input {
    position: absolute;
    opacity: 0;
    margin: 0;
    padding: 0;
  }
  .tabs input + label {
    font-weight: 300;
    color: #666;
    margin: 10px 0;
    width: 110px;
    cursor: pointer;
    display: inline-block;
    transition: all 0.3s;
    text-align: center;
    font-size: 12px;
    border: none;
  }
  .tabs input + label:hover {
    color: #777;
  }
  .tabs .tabsShadow {
    width: 100%;
    padding: 10px;
    box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
    position: absolute;
    height: 35px;
    z-index: 0;
    top: 0;
    pointer-events: none;
  }
  .content {
    margin: 0px auto;
    text-align: left;
    color: #fff;
    font-size: 13px;
    line-height: 20px;
    position: relative;
    height:330px;
  }
  .content .item {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    position: absolute;
    height: 300px;
    overflow: auto;
    padding: 10px;
    color: #fff;
    background-color: transparent;
    width: 100%;
    padding-bottom: 40px;
}
  .content p {
    margin: 10px 0;
  }
  .glider {
    width: 110px;
    height: 3px;
    background: #abe1ae;
    border-radius: 3px;
    position: absolute;
    box-shadow: 0px 0px 8px 0px rgba(91, 60, 196, 0.4);
    transition: all 0.3s;
  }
  #tab-1:checked ~ .glider {
    left: 0px;
  }
  #tab-2:checked + label {
    color: #deepskyblue;
  }
  
  #tab-2:checked ~ .glider {
    left: 113px;
  }
  #tab-3:checked + label {
    color: #525252;
  }
  
  #tab-3:checked ~ .glider {
    left: 226px;
  }
  
  #tab-4:checked ~ .glider {
    left: 339px;
  }
  #tab-1:checked ~ section #content-1,
  #tab-2:checked ~ section #content-2,
  #tab-3:checked ~ section #content-3,
  #tab-4:checked ~ section #content-4 {
    opacity: 1;
    visibility: visible;
  }
  @media (max-width: 700px) {
    .tabs input + label,
    .glider {
      width: 70px;
    }
    #tab-1:checked ~ .glider {
      left: 0px;
    }
    #tab-2:checked ~ .glider {
      left: 73px;
    }
    #tab-3:checked ~ .glider {
      left: 146px;
    }
    #tab-4:checked ~ .glider {
      left: 219px;
    }
  }
  .tabs input + label {
    margin: 10px -10px;
    width: 19.95%;
    transition: all 0.3s;
    text-align: center;
    border: none;
    border-bottom: 2pt solid #1d1e22;
    border-radius: 10pt 0pt 0pt 10pt;
    border-radius: 0;
    color: white;
    display: inline-flex;
    -webkit-box-pack: center;
    margin-bottom: 10px;
    padding: 5pt 10pt;
    vertical-align: top;
    justify-content: flex-start;
    background: #333;
    box-shadow: 1px 1px 2px 1px #231f20;
    font-family: "arial";
    text-transform: uppercase;
    font-weight: 500;
    font-size: 10pt;
  }
  .content {
    margin: 0px auto;
    text-align: left;
    color: #666;
    font-size: 13px;
    line-height: 20px;
    position: relative;
    height: 330px;
    background-color: #444c4c;
    border-radius: 5px;
    box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
    display: block;
    padding: 1.25rem;
    z-index: -2;
  }
  .container .card {
    max-width: 600px;
    min-height: 140px;
    background: #272a34;
    border-radius: 10px;
    border: none;
    margin: 0 auto;
    z-index: 4 !important;
    position: relative;
  }
  p {
    font-family: muli, sans-serif;
    font-family: stix-two-text, serif;
    font-family: source-serif-pro, serif;
  }
  .content p {
    margin: 10px 0;
    font-family: "arial";
    font-weight: 300;
    letter-spacing: 0.5px;
    font-size: 13px;
    font-style: normal;
    color: #fff;
    line-height: 30px;
    margin-top: 10pt;
  }
  h2.tab-title.tab-warning,
  h2.tab-title.tab-success,
  h2.tab-title.tab-primary,
  h2.tab-title.tab-default {
    font-family: "arial";
    font-size: 16px;
    font-weight: 600;
    display: inline-flex;
    color: #fff;
    background: #abe1ae;
    background-position: bottom center;
    margin-bottom: 0pt !important;
    margin-top: 6pt;
    height: 22pt;
      text-fill-color: transparent !important;
      background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
      -webkit-background-clip: text !important;
      -moz-background-clip: text;
      -moz-text-fill-color: transparent;
      -ms-background-clip: text;
      -ms-text-fill-color: transparent;
  }
  
  h2.tab-title.tab-primary {
      background:#abe1ae;
  }
  
  h2.tab-title.tab-success {
      background: #abe1ae;
  }
  
  h2.tab-title.tab-primary {
      background: #abe1ae;
      color: #fff;
  }
  
  h2.tab-title.tab-warning {
      background: #abe1ae;
      color: #fff;
  }
  
  .tabs input {
    position: relative;
    opacity: 0;
    margin: auto !important;
    padding: 0;
  }
  label.tab.tab-primary {
    border-radius: 6pt 0 0 6pt;
  }
  label.tab.tab-warning {
    border-radius: 0 6pt 6pt 0;
  }
  #tab-1:checked + label {
    color: #abe1ae;
  }
  #tab-2:checked + label {
      color: #abe1ae;
  }
  #tab-3:checked + label {
    color: #abe1ae;
  }
  #tab-4:checked + label {
    color: #abe1ae;
  }
  #tab-1:checked ~ .glider {
    left: 8px;
    border-radius: 4pt 2pt 2pt 6pt !important;
  }
  .glider {
    width: 22.25%;
    height: 7px;
    background: #abe1ae;
    border-radius: 0pt 2pt 2pt 0pt;
    position: absolute;
    box-shadow: 0px 0px 8px 0px rgba(91, 60, 196, 0.4);
    transition: all 0.3s;
    top: 36px;
  }
  #tab-2:checked ~ .glider {
    left: 35.25%;
  }
  #tab-3:checked ~ .glider {
    background:#abe1ae;
    left: 68.35%;
  }
  
  .glider {
      width: 33.56%;
      height: 30px;
      background: #abe1ae;
      border-radius: 2pt 2pt 2pt 2pt;
      position: absolute;
      box-shadow: 0px 0px 8px 0px rgb(91 60 196 / 40%);
      transition: all 0.3s;
      top: 10px;
      z-index: -1;
  }
  .container {
    width: 100%;
    padding: 0;
    text-align: center;
}
.container .card {
    max-width: 96%;
    width: 100%;
    left: 0px;
    min-height: 40px;
    background: transparent;
    border-radius: 10px;
    border: none;
    margin: 0px;
    z-index: 4 !important;
    position: absolute;
    margin-top: 40px !important;
}
.tabs input {
    position: relative;
    opacity: 0;
    margin: auto !important;
    padding: 0;
    line-height: 2.2;
}



.tabs input + label {
    margin: 0px -10px;
    width: 33%;
    
    transition: all 0.3s;
    text-align: center;
    border: none;
    border-bottom: 2pt solid #1d1e22;
    border-radius: 10pt 0pt 0pt 10pt;
    border-radius: 0;
    color: white;
    display: inline-flex;
    -webkit-box-pack: center;
    margin-bottom: 10px;
    padding: 5pt 10pt;
    vertical-align: top;
    justify-content: flex-start;
    background: #333;
    box-shadow: 1px 1px 2px 1px #231f20;
    font-family: "arial";
    text-transform: uppercase;
    font-weight: 500;
    font-size: 10pt;
}


.tabs .tabsShadow {
    width: 100%;
    padding: 10px;
    box-shadow: 0 0 25px 0 rgb(0 0 0 / 4%);
    box-sizing: border-box;
    position: absolute;
    height: 35px;
    z-index: 0;
    top: 0;
    pointer-events: none;
}

.content {
    margin: 0px auto;
    text-align: left;
    position: absolute;
    width: 100%;
    top: 46px;
    color: #fff;
    font-size: 13px;
    line-height: 20px;
    min-height: 290px;
    height:100%;
    background-color: #444c4c;
    border-radius: 5px;
    display: block;
    padding: .5rem;
    z-index: -2;
    overflow: hidden;
    box-shadow: none;
}
#popups > div{
    top: 97px !important;
    width: 600px !important;
    max-width: 600px !important;}

.tab-title-content{
    color: #1d1e22;
}
label{
    display: block;
    vertical-align: top;
    margin-top: 7px;
    color: black;
}

.card1{
  padding: 10px !important;
  min-width: 100%;
  border: 1px solid #29343c;
  }
  .mrg5T{margin-top: 5px !important;}
  .mrg10T{margin-top: 10px;}
  .mrg20T{margin-top: 20px;}
  .mrg5R{margin-right: 5px;}
  .mrg10R{margin-right: 10px !important;}
  .float-right{float: right;}
  .textarea{border: 1px solid #fff;height: 150px;width: 100%;background-color: #444c4c;}
  .form-check-label{
    background: none !important;
    color: #fff !important;
    border-bottom: 0px !important;
    margin-bottom: 10px !important;
    box-shadow: none !important;
    width: 50% !important;
    padding: 0px !important;
    text-transform: none !important;
    margin: 0px 0px 0px 5px !important;
  }
  .form-check-input{opacity: 100 !important;}
  .width100{width: 100% !important;}
  .width20{width: 20% !important;}
  .width40{width: 40% !important;}
  .width50{width: 50% !important;}
  .width60{width: 60% !important;}
  .width30{width: 30% !important;}
  .width70{width: 70% !important;}
  .width80{width: 80% !important;}
  .width90{width: 90%  !important;}
  .d-flex{display: flex !important;}
  .align-center{align-items: center;}
  .mrg50R{margin-right: 50px !important;}
  .mrg70R{margin-right: 70px !important;}
  .mrg90R{margin-right: 90px !important;}
  .form-control {
      opacity: 100 !important;
    display: inline-block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #444c4c;
    background-clip: padding-box;
    border: 1px solid #ced4da !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  .form-select {
    /* display: block; 
    width: 100%;
    /* padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    -moz-padding-start: calc(0.75rem - 3px); 
    font-size: 1rem;
    font-weight: 400;
    line-height: 2.5;
    color: #fff;
    background-color: #444c4c;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: 1px solid #ced4da;
    border-radius: 0.25rem !important ;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  .primarybt { background: #283438 !important; border:1px solid var(--border-color) !important; color: #fff !important; font-weight:bold; padding:5px 18px !important; cursor: pointer; text-shadow: none !important; display: inline-block;}
  .primarybt { -moz-border-radius: 3px !important; -webkit-border-radius: 3px !important; border-radius: 3px !important; border: none; /*font-size: 16px !important; }
  .primarybt { -moz-box-shadow: 1px 1px 2px #dfdfdf !important; -webkit-box-shadow: 1px 1px 2px #dfdfdf !important; box-shadow: 1px 1px 2px #dfdfdf !important; text-decoration:none !important; }
  .primarybt a { text-decoration:none; font-weight:normal; text-decoration:none !important; border:1px solid var(--border-color) }
  .primarybt:hover { background: #283438 !important; color: #fff !important; text-decoration:none; border:1px solid #000 !important; }
  .primarybt:active { -moz-box-shadow: inset 1px 1px 1px #12274c; -webkit-box-shadow: inset 1px 1px 1px #12274c; box-shadow: inset 1px 1px 1px #12274c; color: #474646; text-decoration:none; }
  .text-center{text-align: center;}
  .mail_ic{background: url(images/icons/envelope-solid.svg) no-repeat left center;width: 250px;height: 250px;display: inline-block;}
  input[type="text"], select, input[type="number"], textarea {background: none;}
  .headercss{font-size: 16px;    margin-bottom: 5px;}
  #content-3 > div.card1,#content-1 > div.card1 > p{margin:0;padding: 0;}
  #content-3 > div.card1 > p,#content-2 > div:nth-child(2),#content-2 > p:nth-child(3),#content-1 > div.card1{margin:0;padding: 0;}
  #popups .popup .buttons {border-top:0;}
  #popups > div > div.buttons{display: none !important;}
  popups .popup input[type="number"] {
    width: 246px !important;
}*/
/*!
 * 
 * Super simple wysiwyg editor v0.8.18
 * https://summernote.org
 * 
 * 
 * Copyright 2013- Alan Hong. and other contributors
 * summernote may be freely distributed under the MIT license.
 * 
 * Date: 2020-05-20T18:09Z
 * 
 */
/* Summernote icon font files are not present in this codebase; use fallback font to avoid 404 requests. */
[class^=note-icon]:before,[class*=" note-icon"]:before{display:inline-block;font-family:inherit;font-style:normal;font-size:inherit;text-decoration:inherit;text-rendering:auto;text-transform:none;vertical-align:middle;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;speak:none}.note-icon-fw{text-align:center;width:1.25em}.note-icon-border{border:solid .08em #eee;border-radius:.1em;padding:.2em .25em .15em}.note-icon-pull-left{float:left}.note-icon-pull-right{float:right}.note-icon.note-icon-pull-left{margin-right:.3em}.note-icon.note-icon-pull-right{margin-left:.3em}.note-icon-align::before{content:""}.note-icon-align-center::before{content:""}.note-icon-align-indent::before{content:""}.note-icon-align-justify::before{content:""}.note-icon-align-left::before{content:""}.note-icon-align-outdent::before{content:""}.note-icon-align-right::before{content:""}.note-icon-arrow-circle-down::before{content:""}.note-icon-arrow-circle-left::before{content:""}.note-icon-arrow-circle-right::before{content:""}.note-icon-arrow-circle-up::before{content:""}.note-icon-arrows-alt::before{content:""}.note-icon-arrows-h::before{content:""}.note-icon-arrows-v::before{content:""}.note-icon-bold::before{content:""}.note-icon-caret::before{content:""}.note-icon-chain-broken::before{content:""}.note-icon-circle::before{content:""}.note-icon-close::before{content:""}.note-icon-code::before{content:""}.note-icon-col-after::before{content:""}.note-icon-col-before::before{content:""}.note-icon-col-remove::before{content:""}.note-icon-eraser::before{content:""}.note-icon-float-left::before{content:""}.note-icon-float-none::before{content:""}.note-icon-float-right::before{content:""}.note-icon-font::before{content:""}.note-icon-frame::before{content:""}.note-icon-italic::before{content:""}.note-icon-link::before{content:""}.note-icon-magic::before{content:""}.note-icon-menu-check::before{content:""}.note-icon-minus::before{content:""}.note-icon-orderedlist::before{content:""}.note-icon-pencil::before{content:""}.note-icon-picture::before{content:""}.note-icon-question::before{content:""}.note-icon-redo::before{content:""}.note-icon-rollback::before{content:""}.note-icon-row-above::before{content:""}.note-icon-row-below::before{content:""}.note-icon-row-remove::before{content:""}.note-icon-special-character::before{content:""}.note-icon-square::before{content:""}.note-icon-strikethrough::before{content:""}.note-icon-subscript::before{content:""}.note-icon-summernote::before{content:""}.note-icon-superscript::before{content:""}.note-icon-table::before{content:""}.note-icon-text-height::before{content:""}.note-icon-trash::before{content:""}.note-icon-underline::before{content:""}.note-icon-undo::before{content:""}.note-icon-unorderedlist::before{content:""}.note-icon-video::before{content:""}.note-editor{position:relative}.note-editor .note-dropzone{position:absolute;display:none;z-index:100;color:#87cefa;background-color:#fff;opacity:.95}.note-editor .note-dropzone .note-dropzone-message{display:table-cell;vertical-align:middle;text-align:center;font-size:28px;font-weight:700}.note-editor .note-dropzone.hover{color:#098ddf}.note-editor.dragover .note-dropzone{display:table}.note-editor .note-editing-area{position:relative}.note-editor .note-editing-area .note-editable{outline:none}.note-editor .note-editing-area .note-editable sup{vertical-align:super}.note-editor .note-editing-area .note-editable sub{vertical-align:sub}.note-editor .note-editing-area .note-editable img.note-float-left{margin-right:10px}.note-editor .note-editing-area .note-editable img.note-float-right{margin-left:10px}.note-editor.note-frame,.note-editor.note-airframe{border:1px solid #00000032}.note-editor.note-frame.codeview .note-editing-area .note-editable,.note-editor.note-airframe.codeview .note-editing-area .note-editable{display:none}.note-editor.note-frame.codeview .note-editing-area .note-codable,.note-editor.note-airframe.codeview .note-editing-area .note-codable{display:block}.note-editor.note-frame .note-editing-area,.note-editor.note-airframe .note-editing-area{overflow:hidden}.note-editor.note-frame .note-editing-area .note-editable,.note-editor.note-airframe .note-editing-area .note-editable{padding:10px;overflow:auto;word-wrap:break-word}.note-editor.note-frame .note-editing-area .note-editable[contenteditable=false],.note-editor.note-airframe .note-editing-area .note-editable[contenteditable=false]{background-color:#8080801d}.note-editor.note-frame .note-editing-area .note-codable,.note-editor.note-airframe .note-editing-area .note-codable{display:none;width:100%;padding:10px;border:none;box-shadow:none;font-family:Menlo,Monaco,monospace,sans-serif;font-size:14px;color:#ccc;background-color:#222;resize:none;outline:none;-ms-box-sizing:border-box;box-sizing:border-box;border-radius:0;margin-bottom:0}.note-editor.note-frame.fullscreen,.note-editor.note-airframe.fullscreen{position:fixed;top:0;left:0;width:100% !important;z-index:1050}.note-editor.note-frame.fullscreen .note-resizebar,.note-editor.note-airframe.fullscreen .note-resizebar{display:none}.note-editor.note-frame .note-status-output,.note-editor.note-airframe .note-status-output{display:block;width:100%;font-size:14px;line-height:1.42857143;height:20px;margin-bottom:0;color:#000;border:0;border-top:1px solid #e2e2e2}.note-editor.note-frame .note-status-output:empty,.note-editor.note-airframe .note-status-output:empty{height:0;border-top:0 solid transparent}.note-editor.note-frame .note-status-output .pull-right,.note-editor.note-airframe .note-status-output .pull-right{float:right !important}.note-editor.note-frame .note-status-output .text-muted,.note-editor.note-airframe .note-status-output .text-muted{color:#777}.note-editor.note-frame .note-status-output .text-primary,.note-editor.note-airframe .note-status-output .text-primary{color:#286090}.note-editor.note-frame .note-status-output .text-success,.note-editor.note-airframe .note-status-output .text-success{color:#3c763d}.note-editor.note-frame .note-status-output .text-info,.note-editor.note-airframe .note-status-output .text-info{color:#31708f}.note-editor.note-frame .note-status-output .text-warning,.note-editor.note-airframe .note-status-output .text-warning{color:#8a6d3b}.note-editor.note-frame .note-status-output .text-danger,.note-editor.note-airframe .note-status-output .text-danger{color:#a94442}.note-editor.note-frame .note-status-output .alert,.note-editor.note-airframe .note-status-output .alert{margin:-7px 0 0 0;padding:7px 10px 2px 10px;border-radius:0;color:#000;background-color:#f5f5f5}.note-editor.note-frame .note-status-output .alert .note-icon,.note-editor.note-airframe .note-status-output .alert .note-icon{margin-right:5px}.note-editor.note-frame .note-status-output .alert-success,.note-editor.note-airframe .note-status-output .alert-success{color:#3c763d !important;background-color:#dff0d8 !important}.note-editor.note-frame .note-status-output .alert-info,.note-editor.note-airframe .note-status-output .alert-info{color:#31708f !important;background-color:#d9edf7 !important}.note-editor.note-frame .note-status-output .alert-warning,.note-editor.note-airframe .note-status-output .alert-warning{color:#8a6d3b !important;background-color:#fcf8e3 !important}.note-editor.note-frame .note-status-output .alert-danger,.note-editor.note-airframe .note-status-output .alert-danger{color:#a94442 !important;background-color:#f2dede !important}.note-editor.note-frame .note-statusbar,.note-editor.note-airframe .note-statusbar{background-color:#8080801d;border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-top:1px solid #00000032}.note-editor.note-frame .note-statusbar .note-resizebar,.note-editor.note-airframe .note-statusbar .note-resizebar{padding-top:1px;height:9px;width:100%;cursor:ns-resize}.note-editor.note-frame .note-statusbar .note-resizebar .note-icon-bar,.note-editor.note-airframe .note-statusbar .note-resizebar .note-icon-bar{width:20px;margin:1px auto;border-top:1px solid #00000032}.note-editor.note-frame .note-statusbar.locked .note-resizebar,.note-editor.note-airframe .note-statusbar.locked .note-resizebar{cursor:default}.note-editor.note-frame .note-statusbar.locked .note-resizebar .note-icon-bar,.note-editor.note-airframe .note-statusbar.locked .note-resizebar .note-icon-bar{display:none}.note-editor.note-frame .note-placeholder,.note-editor.note-airframe .note-placeholder{padding:10px}.note-editor.note-airframe{border:0}.note-editor.note-airframe .note-editing-area .note-editable{padding:0}.note-popover.popover{display:none;max-width:none}.note-popover.popover .popover-content a{display:inline-block;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}.note-popover.popover .arrow{left:20px !important}.note-toolbar{position:relative}.note-popover .popover-content,.note-editor .note-toolbar{margin:0;padding:0 0 5px 5px}.note-popover .popover-content>.note-btn-group,.note-editor .note-toolbar>.note-btn-group{margin-top:5px;margin-left:0;margin-right:5px}.note-popover .popover-content .note-btn-group .note-table,.note-editor .note-toolbar .note-btn-group .note-table{min-width:0;padding:5px}.note-popover .popover-content .note-btn-group .note-table .note-dimension-picker,.note-editor .note-toolbar .note-btn-group .note-table .note-dimension-picker{font-size:18px}.note-popover .popover-content .note-btn-group .note-table .note-dimension-picker .note-dimension-picker-mousecatcher,.note-editor .note-toolbar .note-btn-group .note-table .note-dimension-picker .note-dimension-picker-mousecatcher{position:absolute !important;z-index:3;width:10em;height:10em;cursor:pointer}.note-popover .popover-content .note-btn-group .note-table .note-dimension-picker .note-dimension-picker-unhighlighted,.note-editor .note-toolbar .note-btn-group .note-table .note-dimension-picker .note-dimension-picker-unhighlighted{position:relative !important;z-index:1;width:5em;height:5em;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIj4+Pjp6ekKlAqjAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKhmnaJzPAAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC") repeat}.note-popover .popover-content .note-btn-group .note-table .note-dimension-picker .note-dimension-picker-highlighted,.note-editor .note-toolbar .note-btn-group .note-table .note-dimension-picker .note-dimension-picker-highlighted{position:absolute !important;z-index:2;width:1em;height:1em;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIjd6vvD2f9LKLW+AAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKwNDEVT0AAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC") repeat}.note-popover .popover-content .note-style .dropdown-style blockquote,.note-popover .popover-content .note-style .dropdown-style pre,.note-editor .note-toolbar .note-style .dropdown-style blockquote,.note-editor .note-toolbar .note-style .dropdown-style pre{margin:0;padding:5px 10px}.note-popover .popover-content .note-style .dropdown-style h1,.note-popover .popover-content .note-style .dropdown-style h2,.note-popover .popover-content .note-style .dropdown-style h3,.note-popover .popover-content .note-style .dropdown-style h4,.note-popover .popover-content .note-style .dropdown-style h5,.note-popover .popover-content .note-style .dropdown-style h6,.note-popover .popover-content .note-style .dropdown-style p,.note-editor .note-toolbar .note-style .dropdown-style h1,.note-editor .note-toolbar .note-style .dropdown-style h2,.note-editor .note-toolbar .note-style .dropdown-style h3,.note-editor .note-toolbar .note-style .dropdown-style h4,.note-editor .note-toolbar .note-style .dropdown-style h5,.note-editor .note-toolbar .note-style .dropdown-style h6,.note-editor .note-toolbar .note-style .dropdown-style p{margin:0;padding:0}.note-popover .popover-content .note-color-all .note-dropdown-menu,.note-editor .note-toolbar .note-color-all .note-dropdown-menu{min-width:337px}.note-popover .popover-content .note-color .dropdown-toggle,.note-editor .note-toolbar .note-color .dropdown-toggle{width:20px;padding-left:5px}.note-popover .popover-content .note-color .note-dropdown-menu .note-palette,.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette{display:inline-block;margin:0;width:160px}.note-popover .popover-content .note-color .note-dropdown-menu .note-palette:first-child,.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette:first-child{margin:0 5px}.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-palette-title,.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-palette-title{font-size:12px;margin:2px 7px;text-align:center;border-bottom:1px solid #eee}.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-color-reset,.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-color-select,.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-reset,.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-select{font-size:11px;margin:3px;padding:0 3px;cursor:pointer;width:100%;border-radius:5px}.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-color-reset:hover,.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-color-select:hover,.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-reset:hover,.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-select:hover{background:#eee}.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-color-row,.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-row{height:20px}.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-color-select-btn,.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-select-btn{display:none}.note-popover .popover-content .note-color .note-dropdown-menu .note-palette .note-holder-custom .note-color-btn,.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-holder-custom .note-color-btn{border:1px solid #eee}.note-popover .popover-content .note-para .note-dropdown-menu,.note-editor .note-toolbar .note-para .note-dropdown-menu{min-width:228px;padding:5px}.note-popover .popover-content .note-para .note-dropdown-menu>div+div,.note-editor .note-toolbar .note-para .note-dropdown-menu>div+div{margin-left:5px}.note-popover .popover-content .note-dropdown-menu,.note-editor .note-toolbar .note-dropdown-menu{min-width:160px}.note-popover .popover-content .note-dropdown-menu.right,.note-editor .note-toolbar .note-dropdown-menu.right{right:0;left:auto}.note-popover .popover-content .note-dropdown-menu.right::before,.note-editor .note-toolbar .note-dropdown-menu.right::before{right:9px;left:auto !important}.note-popover .popover-content .note-dropdown-menu.right::after,.note-editor .note-toolbar .note-dropdown-menu.right::after{right:10px;left:auto !important}.note-popover .popover-content .note-dropdown-menu.note-check a i,.note-editor .note-toolbar .note-dropdown-menu.note-check a i{color:#00bfff;visibility:hidden}.note-popover .popover-content .note-dropdown-menu.note-check a.checked i,.note-editor .note-toolbar .note-dropdown-menu.note-check a.checked i{visibility:visible}.note-popover .popover-content .note-fontsize-10,.note-editor .note-toolbar .note-fontsize-10{font-size:10px}.note-popover .popover-content .note-color-palette,.note-editor .note-toolbar .note-color-palette{line-height:1}.note-popover .popover-content .note-color-palette div .note-color-btn,.note-editor .note-toolbar .note-color-palette div .note-color-btn{width:20px;height:20px;padding:0;margin:0;border:0;border-radius:0}.note-popover .popover-content .note-color-palette div .note-color-btn:hover,.note-editor .note-toolbar .note-color-palette div .note-color-btn:hover{transform:scale(1.2);transition:all .2s}.note-modal .modal-dialog{outline:0;border-radius:5px;box-shadow:0 3px 9px rgba(0,0,0,.5)}.note-modal .form-group{margin-left:0;margin-right:0}.note-modal .note-modal-form{margin:0}.note-modal .note-image-dialog .note-dropzone{min-height:100px;font-size:30px;line-height:4;color:#d3d3d3;text-align:center;border:4px dashed #d3d3d3;margin-bottom:10px}@-moz-document url-prefix(){.note-modal .note-image-input{height:auto}}.note-placeholder{position:absolute;display:none;color:gray}.note-handle .note-control-selection{position:absolute;display:none;border:1px solid #000}.note-handle .note-control-selection>div{position:absolute}.note-handle .note-control-selection .note-control-selection-bg{width:100%;height:100%;background-color:#000;-webkit-opacity:.3;-khtml-opacity:.3;-moz-opacity:.3;opacity:.3;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);filter:alpha(opacity=30)}.note-handle .note-control-selection .note-control-handle,.note-handle .note-control-selection .note-control-sizing,.note-handle .note-control-selection .note-control-holder{width:7px;height:7px;border:1px solid #000}.note-handle .note-control-selection .note-control-sizing{background-color:#000}.note-handle .note-control-selection .note-control-nw{top:-5px;left:-5px;border-right:none;border-bottom:none}.note-handle .note-control-selection .note-control-ne{top:-5px;right:-5px;border-bottom:none;border-left:none}.note-handle .note-control-selection .note-control-sw{bottom:-5px;left:-5px;border-top:none;border-right:none}.note-handle .note-control-selection .note-control-se{right:-5px;bottom:-5px;cursor:se-resize}.note-handle .note-control-selection .note-control-se.note-control-holder{cursor:default;border-top:none;border-left:none}.note-handle .note-control-selection .note-control-selection-info{right:0;bottom:0;padding:5px;margin:5px;color:#fff;background-color:#000;font-size:12px;border-radius:5px;-webkit-opacity:.7;-khtml-opacity:.7;-moz-opacity:.7;opacity:.7;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);filter:alpha(opacity=70)}.note-hint-popover{min-width:100px;padding:2px}.note-hint-popover .popover-content{padding:3px;max-height:150px;overflow:auto}.note-hint-popover .popover-content .note-hint-group .note-hint-item{display:block !important;padding:3px}.note-hint-popover .popover-content .note-hint-group .note-hint-item.active,.note-hint-popover .popover-content .note-hint-group .note-hint-item:hover{display:block;clear:both;font-weight:400;line-height:1.4;color:#fff;white-space:nowrap;text-decoration:none;background-color:#428bca;outline:0;cursor:pointer}.note-toolbar{background:#8080801d}.note-btn-group .note-btn{border-color:#00000032;padding:.28rem .65rem;font-size:13px}

/* ----------------------------------
   Existing login.css content
----------------------------------- */
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
  position: relative;
}

img.avatar {
  width: 40%;
  border-radius: 50%;
}

span.psw {
  float: right;
  padding-top: 16px;
}

.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {
    -webkit-transform: scale(0)
  }

  to {
    -webkit-transform: scale(1)
  }
}

@keyframes animatezoom {
  from {
    transform: scale(0)
  }

  to {
    transform: scale(1)
  }
}

@media screen and (max-width: 300px) {
  span.psw {
    display: block;
    float: none;
  }

  .cancelbtn {
    width: 100%;
  }
}

.alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
}

.success {
  padding: 8px;
  background-color: #179a4b;
  color: white;
}

.logindiv {
  width: 520px;
  margin: 0 auto;
  padding: 25px;
  margin-top: 50px;
  background-color: #fff;
  border-radius: 15px;
}

@media screen and (max-width : 600px) {
  .logindiv {
    width: 90%;
    margin: 0 auto;
    padding: 15px;
    background-color: #fff;
    border-radius: 10px;
  }
}

.closeebtn {
  margin: 0 3px;
  background-color: rgba(255, 255, 255, 0.2);
  background-color: var(--button-background-color);
  min-width: 60px;
  border: 1px solid #00897b;
  padding: 4px 10px;
  color: #00897b;
  border-radius: 5px;
}

.error-message {
  color: red;
  font-size: 12px;
  margin: 0 !important;
  padding: 0;
  width: 100%;
  text-align: left;
  min-height: 14px;
}

.error-message:empty {
  display: none !important;
}

/* ----------------------------------
   New Modern Login Layout (mc reference)
----------------------------------- */
.login-page {
  display: flex;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  opacity: 1;
}

.login-brand-panel {
  position: relative;
  flex: 0 0 48%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Use the exact color from designer-login-left-div if known, or fallback to dark blue */
  background: #0d1e44;
  overflow: hidden;
  padding: 60px 48px;
}

.login-brand-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  flex: 1;
  justify-content: center;
}

.login-brand-logo {
  margin-bottom: 10px;
}

.login-brand-subtitle {
  font-size: 20px;
  font-weight: 500;
  color: #ffffff;
  margin: 10px 0 20px;
}

.login-form-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f0f2f8;
  padding: 48px 32px;
  position: relative;
  overflow: hidden;
  animation: formPanelIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes formPanelIn {
  from {
    opacity: 0;
    transform: translateX(24px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.login-form-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(15, 70, 124, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(45, 77, 232, 0.06) 0%, transparent 60%);
  pointer-events: none;
}

.login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  background: #ffffff;
  border-radius: 24px;
  padding: 40px 40px 32px;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.04),
    0 12px 32px rgba(15, 70, 124, 0.10),
    0 40px 80px rgba(15, 70, 124, 0.06);
  border: 1px solid rgba(15, 70, 124, 0.08);
}

.login-card-header {
  margin-bottom: 20px;
}

.login-card-title {
  font-size: 28px;
  font-weight: 600 !important;
  color: #0d1b5e;
  margin: 0 0 6px;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.login-card-desc {
  font-size: 14px;
  color: #6c757d;
  margin: 0;
  font-weight: 400;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login-field-label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  letter-spacing: 0.2px;
  transition: color 0.2s ease;
  text-align: left;
  margin-bottom: 0 !important;
}

.login-field-control {
  position: relative;
  display: flex;
  align-items: center;
  background: #f8f9fc;
  border: 1.5px solid #e2e6f0;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.25s ease;
}

.login-field-control:focus-within {
  border-color: #0f467c;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(15, 70, 124, 0.1), 0 2px 8px rgba(15, 70, 124, 0.06);
}

.login-field-prefix {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  color: #9ca3af;
  flex-shrink: 0;
  transition: color 0.2s ease;
}

.login-field-control:focus-within .login-field-prefix {
  color: #0f467c;
}

.login-input {
  flex: 1 !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1a1a2e !important;
  padding: 13px 12px 13px 0 !important;
  font-family: inherit !important;
  box-shadow: none !important;
  height: auto !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.login-input::placeholder {
  color: #b0b7c8 !important;
  font-weight: 400 !important;
  font-size: 14px !important;
}

.designer-login-eye-slash,
.designer-login-eye {
  position: static !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0 !important;
  transform: none !important;
  right: auto !important;
  bottom: auto !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-width: 24px !important;
  min-height: 16px !important;
}

.login-field-suffix {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 14px !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  color: #9ca3af !important;
  flex-shrink: 0 !important;
  transition: color 0.2s ease !important;
  height: 100% !important;
}

.login-field-suffix:hover {
  color: #0f467c;
}

.login-forgot-link {
  font-size: 13px;
  color: #0f467c;
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  transition: opacity 0.2s ease;
  display: block;
  text-align: right;
  width: 100%;
}

.login-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 24px;
  background: #0f467c;
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 16px rgba(15, 70, 124, 0.35);
}

.login-submit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 70, 124, 0.45);
  background: #0f467c !important;
}

.registration_text {
  margin-top: 0 !important;
  text-align: right;
  font-size: 14px;
}

.create-link {
  color: #0f467c;
  font-weight: 500;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0;
  cursor: pointer;
  font-size: 14px;
}

.create-link:hover {
  text-decoration: underline;
  background: transparent !important;
}

.designer-login-alert {
  padding: 12px 14px;
  background: #fff5f5;
  border: 1px solid #fca5a5;
  border-radius: 10px;
  color: #b91c1c;
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 20px;
}

@media (max-width: 860px) {
  .login-page {
    flex-direction: column;
  }

  .login-brand-panel {
    flex: 0 0 auto;
    padding: 40px 32px 32px;
    min-height: 280px;
  }

  .login-form-panel {
    flex: 1;
    padding: 32px 20px;
  }
}
@font-face{font-family:'Roboto-Light';src:url("fonts/Roboto-Light.eot");src:local("Roboto Light"),local("Roboto-Light"),url("fonts/Roboto-Lightd41d.eot?#iefix") format("embedded-opentype"),url("fonts/Roboto-Light.woff2") format("woff2"),url("fonts/Roboto-Light.woff") format("woff"),url("fonts/Roboto-Light.ttf") format("truetype");font-weight:300;font-style:normal}

@font-face{font-family:'Roboto-regular';src:url("fonts/Roboto-Regular.eot");src:local("Roboto"),local("Roboto-Regular"),url("fonts/Roboto-Regulard41d.eot?#iefix") format("embedded-opentype"),url("fonts/Roboto-Regular.woff2") format("woff2"),url("fonts/Roboto-Regular.woff") format("woff"),url("fonts/Roboto-Normal.ttf") format("truetype");font-weight:normal;font-style:normal}

@font-face{font-family:'Roboto-Medium';src:url("fonts/Roboto-Medium.eot");src:local("Roboto Medium"),local("Roboto-Medium"),url("fonts/Roboto-Mediumd41d.eot?#iefix") format("embedded-opentype"),url("fonts/Roboto-Medium.woff2") format("woff2"),url("fonts/Roboto-Medium.woff") format("woff"),url("fonts/Roboto-Medium.ttf") format("truetype");font-weight:500;font-style:normal}

@font-face{font-family:'Roboto-Bold';src:url("fonts/Roboto-Bold.eot");src:local("Roboto Bold"),local("Roboto-Bold"),url("fonts/Roboto-Boldd41d.eot?#iefix") format("embedded-opentype");font-weight:bold;font-style:normal}

@font-face {
	font-family: 'Poppins';
	src:url('fonts/Poppins-Normal.ttf') format('truetype');
	font-weight: 400;
	font-display: swap;
	font-style: normal;
}
@font-face {
	font-family: 'Poppins';
	src:url('fonts/Poppins-Bold.ttf') format('truetype');
	font-weight: 700;
	font-display: swap;
	font-style: bold;
}
@font-face {
	font-family: 'Poppins';
	src:url('fonts/Poppins-BoldItalic.ttf') format('truetype');
	font-weight: 700;
	font-display: swap;
	font-style: italic;
}
@font-face {
	font-family: 'Poppins';
	src:url('fonts/Poppins-Italic.ttf ') format('truetype');
	font-weight: 400;
	font-display: swap;
	font-style: italic;
}
:root {
--brand-color:#0F467C;
}

/* Login Css */

/* Designer Login Container */
.designer-login-vh-100 {
  height: 100vh;
  display: flex;
}

.designer-login-row {
  display: flex;
  flex-wrap: wrap;
}

.designer-login-col-md-5 {
  width: 41.66666667%;
}

.designer-login-col-md-7 {
  width: 58.33333333%;
}

/* Left Section */
.designer-login-left-div {
  background: var(--brand-color);
  height: 100%;
  color: #fff;
  padding-top: 100px;
  width: auto;
}

.designer-login-inside-div {
  margin: 0 auto;
  width: 400px;
  text-align: left;
}

.designer-login-title img {
  max-width: 100%;
  height: auto;
}

.designer-login-subtext {
  font-weight: 400;
  font-size: 15px;
  color: #fff;
}

.designer-login-logo {
  background: url(images/login/Saly-1.png) no-repeat center;
  width: 385px;
  height: 385px;
  display: inline-block;
}

/* Right Section */
.designer-login-right-div {
  display: flex;
  justify-content: center;
  height: 550px;
  width: auto;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.designer-login-div-login {
  width: 50%;
  margin:auto;
  padding: 5px;
}

/* Typography */
.designer-login-light-txt {
  color: #757575 !important;
  font-weight: 400;
  font-family: "Poppins", Arial, Helvetica, sans-serif;
  margin-bottom: 15px;
}

.designer-login-login-title {
  font-family: "Poppins", Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
}

/* Form Elements */
.designer-login-form-group {
  margin-bottom: 10px;
}

.designer-login-form-label {
  display: block;
  margin-bottom: 5px;
  font-family: "Poppins", Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #333;
}

.designer-login-form-control {
  background: #F8F8F8 !important;
  border: 1px solid #D8D8D8 !important;
  border-radius: 4px !important;
  height: 40px !important;
  font-size: 12px;
  width: 100%;
  padding: 6px 12px;
  box-sizing: border-box;
  font-family: "Poppins", Arial, Helvetica, sans-serif;
}

.designer-login-form-control:focus {
  outline: none;
  border-color: var(--brand-color) !important;
}

/* Password Field with Toggle */
.designer-login-password-wrapper {
  position: relative;
}

.designer-login-eye-slash {
  background: url(images/login/eye_close.svg) no-repeat center center;
  display: inline-block;
  height: 16px;
  width: 24px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

/* Buttons */
.designer-login-primarybt {
  background: var(--brand-color);
  color: #fff;
  border: 1px solid var(--brand-color);
  border-radius: 4px;
  height: 45px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 9px 14px;
  text-decoration: none;
  margin-top: 10px;
  width: 100%;
  cursor: pointer;
  font-family: "Poppins", Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.2s;
}

.designer-login-primarybt:hover {
  background: #3C6C9A;
  color: #fff;
  border: 1px solid #3C6C9A;
}

/* Loader */
.designer-login-loader-container {
  background: var(--brand-color);
  color: #fff;
  border: 1px solid var(--brand-color);
  border-radius: 4px;
  height: 45px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 9px 14px;
  text-decoration: none;
  margin-top: 10px;
  opacity: 0.8;
}

.designer-login-loader {
  border: 4px solid #6CC6B1;
  border-top: 4px solid #ffff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: designer-login-spin 1s linear infinite;
}

@keyframes designer-login-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Alerts */
.designer-login-alert,
.designer-login-success {
  padding: 12px;
  margin-top: 15px;
  border-radius: 4px;
  position: relative;
}

.designer-login-alert {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
}

.designer-login-success {
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
}

.designer-login-closebtn {
  position: absolute;
  right: 10px;
  top: 5px;
  color: inherit;
  font-size: 20px;
  cursor: pointer;
}

/* Links */
.designer-login-primaryclr {
  color: var(--brand-color) !important;
}

.designer-login-onhoverpointer {
  cursor: pointer;
}

.designer-login-onhoverpointer:hover {
  color: #00897B;
}

/* Utilities */
.designer-login-mrg10T {
  margin-top: 10px;
}

.designer-login-mrg20T {
  margin-top: 20px;
}

.designer-login-mrg30T {
  margin-top: 30px;
}

.designer-login-text-right {
  text-align: right;
}

.designer-login-text-center {
  text-align: center;
}

.designer-login-d-none {
  display: none !important;
}

/* Responsive */
@media (max-width: 999px) {
  .designer-login-col-md-5,
  .designer-login-col-md-7 {
    width: 100%;
  }
  
  .designer-login-left-div {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  
  .designer-login-inside-div {
    width: 90%;
    max-width: 400px;
  }
  
  .designer-login-logo {
    background: url(images/login/Saly-2.png) no-repeat center;
    width: 315px;
    height: 405px;
  }
  
  .designer-login-div-login {
    width: 90%;
  }
  
  .designer-login-right-div {
    position: static;
    transform: none;
    height: auto;
    padding: 50px 0;
  }
}

/* Additional Designer Login Classes for Forgot Password */

/* Text Alignment */
.designer-login-text-left {
    text-align: left;
}

/* Padding Utilities */
.designer-login-pad5T {
    padding-top: 5px;
}

/* Margin Utilities */
.designer-login-mrg0B {
    margin-bottom: 0;
}

.designer-login-mrg25T {
    margin-top: 25px;
}

/* Forgot Password specific text styles */
.designer-login-div-login .designer-login-pad5T {
    font-family: "Poppins", Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 20px;
}

.designer-login-div-login .designer-login-pad5T br {
    display: block;
    content: "";
    margin-top: 5px;
}

/* Ensure consistent form styling */
.designer-login-div-login .designer-login-form-group {
    width: 100%;
}

.designer-login-div-login .designer-login-mrg25T {
    margin-top: 25px;
}

/* Responsive adjustments for forgot password */
@media (max-width: 999px) {
    .designer-login-div-login .designer-login-login-title {
        font-size: 20px;
    }
    
    .designer-login-div-login .designer-login-pad5T {
        font-size: 13px;
    }
}


/* Social Login Section */
.designer-login-login-top-txt {
    font-family: "Poppins", Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 15px;
    text-align: center;
}

.designer-login-pad0A {
    padding: 0 !important;
}

.designer-login-social-links {
    width: 100%;
}

.designer-login-social-ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    justify-content: center;
}

.designer-login-social-li {
    width: 50%;
    align-items: center;
    margin-left: 25%;
    padding: 10px 36px;
    color: #333;
    font-size: 16px;
    border: 1px solid #CFD8DC;
    border-radius: 6px;
    background: #FFF;
    font-family: "Poppins", Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    list-style-type: none;
    transition: border-color 0.2s;
}

.designer-login-social-li:hover {
    border: 1px solid #3C6C9A;
    cursor: pointer;
}

.designer-login-social-li a {
    color: #333;
    font-size: 16px;
    text-decoration: none;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}

.designer-login-google-ic {
    background: url(images/login/google.png) no-repeat center;
    width: 24px;
    height: 24px;
    display: inline-block;
}

/* Divider */
.designer-login-clear {
    clear: both;
}

.designer-login-d-flex {
    display: flex;
}

.designer-login-align-items-center {
    align-items: center;
}

.designer-login-brd-div {
    width: 100%;
    height: 1px;
    background-color: #5F6368;
    opacity: 0.2;
    flex: 1;
}

.designer-login-alternative-txt {
    color: #757575;
    margin: 0px 10px;
    font-family: "Poppins", Arial, Helvetica, sans-serif;
    font-size: 14px;
    white-space: nowrap;
}

/* External Links */
.designer-login-external-links {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.designer-login-mrg20L {
    margin-left: 20px;
}

/* Warning Messages */
.designer-login-warning-message {
    color: red;
    font-family: "Poppins", Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 5px 0 0 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Padding Utilities */
.designer-login-pad5R {
    padding-right: 5px;
}

.designer-login-pad10T {
    padding-top: 10px;
}

.designer-login-pad15B {
    padding-bottom: 15px;
}

/* Toggle Password Icon */
.designer-login-toggle-password {
    cursor: pointer;
}

/* Margin Utilities */
.designer-login-mrg20B {
    margin-bottom: 20px;
}

/* Responsive Adjustments for Registration */
@media (max-width: 999px) {
    .designer-login-social-li {
        width: 80%;
        margin-left: 10%;
        padding: 8px 20px;
    }
    
    .designer-login-alternative-txt {
        font-size: 12px;
    }
    
    .designer-login-div-login {
        width: 90%;
        max-width: 500px;
    }
}


.designer-login-div-login .designer-login-form-group {
    margin-bottom: 15px;
}

.designer-login-div-login .designer-login-password-wrapper {
    position: relative;
}

.designer-login-div-login .designer-login-eye-slash {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}


.designer-login-div-login .designer-login-pad10T {
    position: relative;
}

.designer-login-btn-container{
  position: relative;
}
		.primary_btn {
			display: inline-block;
			padding: 6px 20px;
			margin: 10px;
			font-size: 15px;
			font-weight: normal;
			color: #fff;
			background-color: #007a7d;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			transition: background-color 0.3s, transform 0.3s;
			text-decoration: none;
			text-align: center;
		}

		.primary_btn:hover {
			background-color: #009498;
		}

		.left {
			float: left
		}

		.pad15T {
			padding-top: 15px;
		}

		.content {
			clear: both;
			/* padding: 5px 0 0 10px; */
		}

		.input_data_div {
			display: flex;
			margin: 5px;
			justify-content: space-between;

		}

		.logout_cls {
			font-size: 12px;
			padding: 0;
			align-items: center;
			cursor: pointer;
			flex: 1;
			height: 25px;
			z-index: 200;
		}

		.logout_cls button {
			padding: 5px 15px;
		}

		.dph {
			display: none;
			position: absolute;
			margin-top: 30px;
			right: 0;
			width: 100px;
		}

		.dph span {
			display: inline-block;
			width: 100% !important;
			text-align: center;
			margin: 5px;


		}

		.logout_cls .user_org {
			float: left;
			background: var(--user-name-background-color);
			width: 24px;
			height: 25px;
			font-size: 16px;
			line-height: 100%;
			color: #fff;
			text-align: center;
			border-radius: 70%;
			cursor: pointer;
			position: relative;
			text-decoration: none;
			font-weight: 500;
			display: flex;
			align-items: center;
			justify-content: center;

		}

		.user_name {
			height: 100%;
			width: 100%;
		}

		.user_name:hover .dph {

			display: block;
			font-size: 10px;
			text-align: center;
			color: white;

		}

		.logout_cls .user_org:hover .dph {
			display: block !important;
		}

		#lookup_view_contanier {
			list-style-type: none;
		}

		#lookup_view_contanier {
			margin: 0;
			padding: 0;
			margin-top: 15px;
		}

		#lookup_view_contanier .actions {
			position: absolute;
			right: 18px;
		}

		/* #lookup_view_contanier li{
	position: relative;
} */
		.lookup_view ul {
			padding: 7px 5px !important;
		}

		#lookup_view_contanier .caret {
			cursor: pointer;
			-webkit-user-select: none;
			/* Safari 3.1+ */
			-moz-user-select: none;
			/* Firefox 2+ */
			-ms-user-select: none;
			/* IE 10+ */
			user-select: none;
		}

		#lookup_view_contanier .lookup-page-caret {
			height: 16px !important;
			margin-right: 5px;
		}

		#lookup_view_contanier .query_li {
			/* cursor: pointer; */
			position: relative !important;
		}

		#lookup_view_contanier .caret::before {
			content: "\25B6";
			color: black;
			display: inline-block;
			margin-right: 6px;

		}

		#lookup_view_contanier .caret-down::before {
			-ms-transform: rotate(90deg);
			/* IE 9 */
			-webkit-transform: rotate(90deg);
			/* Safari */
			transform: rotate(90deg);
		}

		/* #lookup_view_contanier .nested {
  display: none;
}

#lookup_view_contanier .active {
  display: block;
} */
		#lookup_view_contanier .delete {
			cursor: pointer;
			padding: 0px 3px 0px 3px;
			width: 50%;
			height: 19px;
			/* margin-left: 5px; */
			background: transparent url(images/icons/del_icon.svg) no-repeat center center;
		}

		#lookup_view_contanier .addicon {
			padding: 0px 0px 4px 0px;
			width: 18px;
			height: 20px;
			border: none;
			box-shadow: none;
			background: url(images/icons/plus_ic.svg) no-repeat center center;
			filter: var(--menu-icons-filter);
			cursor: pointer !important;
		}

		/* .input_data_div #toggle_spool{
						display: none;
					} */
@font-face {
	font-family: 'Poppins';
	src:url('fonts/Poppins-Normal.ttf') format('truetype');
	font-weight: 400;
	font-display: swap;
	font-style: normal;
}
@font-face {
	font-family: 'Poppins';
	src:url('fonts/Poppins-Bold.ttf') format('truetype');
	font-weight: 700;
	font-display: swap;
	font-style: bold;
}
@font-face {
	font-family: 'Poppins';
	src:url('fonts/Poppins-BoldItalic.ttf') format('truetype');
	font-weight: 700;
	font-display: swap;
	font-style: italic;
}
@font-face {
	font-family: 'Poppins';
	src:url('fonts/Poppins-Italic.ttf ') format('truetype');
	font-weight: 400;
	font-display: swap;
	font-style: italic;
}
:root {
	/* original - default */
	/* reach theme colors */
	--background: #f9f9f9;
	--text-color: #202124;
	--text-color-muted: #444444;
	--text-color-red: #bb2424;
	--text-color-green: #2b882b;
	--text-color-blue: #5454ca;
	--link-color: #000080;
	--section-background-color: #F9F9F9;
	--area-background-color: #d9d9d9;
	--block-background-color: #ffffff;
	--header-background-color: #ffffff;
	--button-background-color: #f9f9fa;
	--button-background-color-hover: #ddd;
	--button-background-color-active: #eee;
	--button-shadow-color: rgba(0, 0, 0, 0.3);
	--button-text-color-active: #59aed8;
	--button-border-radius: .4rem;
	--button-shadow-color: rgba(0, 0, 0, 0.1);
	--button-toggle-background-color: #b7b7b7;
	--button-toggle-background-color-hover: #b7b7b7;
	--input-background-color: #ffffff;
	--input-background-color-hover: #ddd;
	--input-text-color: #0c0c0d;
	--input-border-color: #ccc;
	--input-border-color-active: #59aed8;
	--input-border-radius: .4rem;
	--input-group-border-color: #c4c4c4;
	--menu-background-color:  #F9F9F9;
	--menu-icons-filter: none;
	--menu-icons-filter-active: invert(1);
	--menu-text-color: #202124;
	--menu-dropdown-hover-background-color: #6FAEFF;
	--number-input-arrow-width: 2rem;
	--menu-dropdown-border-color: rgba(0, 0, 0, 0.1);
	--background-color-active:#DEE8E7;
	--background-color-hover: #6FAEFF;
	--text-color-active: #15439b;
	--border-color: #d7d7d7;
	--scrollbar-track-color: #f9f9fa;
	--scrollbar-thumb-color: #919090;
	--mobile-menu-toggle-filter: none;
	--side-bar-text-color:black;
	--tab-active-color :#6FAEFF;
	--file-name-color:black;
	--side-bar-color:#FFFFFF;
	--tab-color-sidebar:#FFFFFF;
	--side-bar-border-color:1px solid #D9D9D9;
	--active-menu-item-color:#87CEEB;
	--active-sidebar-tab-text-color:#0F467C;
	--active-sidebar-tab-color:#FFFFFF;
	--active-page-color:#CCE7E5;
	--attibute-background-color:#F9F9F9;
	--top-menu-background-color:#F9F9F9;
	--top-menu-border-color:1px solid #D7D7D7;
	--active-object-color : #CCE7E5;
	--side-bar-non-active-tab-text-color: #202124;
	--brand-color:#0F467C;
	--brand-hover-color:#0B355E;
	--dropdown-hover-color:#e2eefc;
	--logo-color:#0F467C;
	--user-name-background-color:#0F467C;
	--custom-dropdown-hover-color:#f3f3f3;
	--active-tag-color:#6FAEFF;
	--actions-background-color:#FFFFFF;
	--drop-down-hover-color: #3C6C9A;
	--drop-down-active-color: #04529E;
	--brand-50:  #F3F8FC;
    --brand-100: #DCEAF6;
    --brand-200: #BDD7EC;
    --brand-300: #8FB9DB;
    --brand-400: #5E97C7;
    --brand-500: #2F71AA;
    --brand-600: #0F467C; /* Base */
    --brand-700: #0C3965;
    --brand-800: #092C4E;
    --brand-900: #061F37;

}
body.theme-reach {
	/* original - default */
	/* reach theme colors */
	--background: #f9f9f9;
	--text-color: #202124;
	--text-color-muted: #444444;
	--text-color-red: #bb2424;
	--text-color-green: #2b882b;
	--text-color-blue: #5454ca;
	--link-color: #000080;
	--section-background-color: #F9F9F9;
	--area-background-color: #d9d9d9;
	--block-background-color: #ffffff;
	--header-background-color: #ffffff;
	--button-background-color: #f9f9fa;
	--button-background-color-hover: #ddd;
	--button-background-color-active: #eee;
	--button-shadow-color: rgba(0, 0, 0, 0.3);
	--button-text-color-active: #59aed8;
	--button-border-radius: .4rem;
	--button-shadow-color: rgba(0, 0, 0, 0.1);
	--button-toggle-background-color: #b7b7b7;
	--button-toggle-background-color-hover: #b7b7b7;
	--input-background-color: #ffffff;
	--input-background-color-hover: #ddd;
	--input-text-color: #0c0c0d;
	--input-border-color: #ccc;
	--input-border-color-active: #59aed8;
	--input-border-radius: .4rem;
	--input-group-border-color: #c4c4c4;
	--menu-background-color:  #F9F9F9;
	--menu-icons-filter: none;
	--menu-icons-filter-active: invert(1);
	--menu-text-color: #202124;
	--menu-dropdown-hover-background-color: #6FAEFF;
	--number-input-arrow-width: 2rem;
	--menu-dropdown-border-color: rgba(0, 0, 0, 0.1);
	--background-color-active:#DEE8E7;
	--background-color-hover: #6FAEFF;
	--text-color-active: #15439b;
	--border-color: #d7d7d7;
	--scrollbar-track-color: #f9f9fa;
	--scrollbar-thumb-color: #919090;
	--mobile-menu-toggle-filter: none;
	--side-bar-text-color:black;
	--tab-active-color :#6FAEFF;
	--file-name-color:black;
	--side-bar-color:#FFFFFF;
	--tab-color-sidebar:#FFFFFF;
	--side-bar-border-color:1px solid #D9D9D9;
	--active-menu-item-color:#87CEEB;
	--active-sidebar-tab-text-color:#0F467C;
	--active-sidebar-tab-color:#FFFFFF;
	--active-page-color:#CCE7E5;
	--attibute-background-color:#F9F9F9;
	--top-menu-background-color:#F9F9F9;
	--top-menu-border-color:1px solid #D7D7D7;
	--active-object-color : #CCE7E5;
	--side-bar-non-active-tab-text-color: #202124;
	--brand-color:#0F467C;
	--brand-hover-color:#0B355E;
	--dropdown-hover-color:#e2eefc;
	--logo-color:#0F467C;
	--user-name-background-color:#0F467C;
	--custom-dropdown-hover-color:#f3f3f3;
	--active-tag-color:#6FAEFF;
	--actions-background-color:#FFFFFF;
	--drop-down-hover-color: #3C6C9A;
	--drop-down-active-color: #04529E;

}
body.theme-light {
		/* light */
		--background: #f9f9f9;
		--text-color: #202124;
		--text-color-muted: #444444;
		--text-color-red: #bb2424;
		--text-color-green: #2b882b;
		--text-color-blue: #5454ca;
		--link-color: #000080;
		--section-background-color: #F9F9F9;
		--area-background-color: #d9d9d9;
		--block-background-color: #ffffff;
		--header-background-color: #ffffff;
		--button-background-color: #f9f9fa;
		--button-background-color-hover: #ddd;
		--button-background-color-active: #eee;
		--button-shadow-color: rgba(0, 0, 0, 0.3);
		--button-text-color-active: #59aed8;
		--button-border-radius: .4rem;
		--button-shadow-color: rgba(0, 0, 0, 0.1);
		--button-toggle-background-color: #b7b7b7;
		--button-toggle-background-color-hover: #b7b7b7;
		--input-background-color: #ffffff;
		--input-background-color-hover: #ddd;
		--input-text-color: #0c0c0d;
		--input-border-color: #ccc;
		--input-border-color-active: #59aed8;
		--input-border-radius: .4rem;
		--input-group-border-color: #c4c4c4;
		--menu-background-color:  #F9F9F9;
		--menu-icons-filter: none;
		--menu-icons-filter-active: invert(1);
		--menu-text-color: #202124;
		--menu-dropdown-hover-background-color: #a3dbf7;
		--number-input-arrow-width: 2rem;
		--menu-dropdown-border-color: rgba(0, 0, 0, 0.1);
		--background-color-active:#DEE8E7;
		--background-color-hover: #6CC6B1;
		--text-color-active: #15439b;
		--border-color: #d7d7d7;
		--scrollbar-track-color: #f9f9fa;
		--scrollbar-thumb-color: #919090;
		--mobile-menu-toggle-filter: none;
		--side-bar-text-color:black;
		--tab-active-color :skyblue;
		--file-name-color:black;
		--side-bar-color:#FFFFFF;
		--tab-color-sidebar:#FFFFFF;
		--side-bar-border-color:1px solid #D9D9D9;
		--active-menu-item-color:#87CEEB;
		--active-sidebar-tab-text-color:#00897B;
		--active-sidebar-tab-color:#FFFFFF;
		--active-page-color:#CCE7E5;
		--attibute-background-color:#F9F9F9;
		--top-menu-background-color:#F9F9F9;
		--top-menu-border-color:1px solid #D7D7D7;
		--active-object-color : #CCE7E5;
		--side-bar-non-active-tab-text-color: #202124;
		--brand-color:#00897B;
		--logo-color:#202124;
		--user-name-background-color:#00897B66;
		--custom-dropdown-hover-color:#C5FFF4;
		--active-tag-color:#C5FFF4;
		--actions-background-color:#FFFFFF;
		--drop-down-hover-color: #3C6C9A;
		--drop-down-active-color: #04529E;
	
}
body.theme-dark{
	/* dark */
	--background: #666d6f;
	--text-color: #f4f3f3;
	--text-color-muted: #c1c1c1;
	--text-color-red: #e38282;
	--text-color-green: #8bdb8b;
	--text-color-blue: #a4a4ff;
	--link-color: #9ffda5;
	--section-background-color: #323a3c;
	--area-background-color: #464d4f;
	--block-background-color: #464d4f;
	--header-background-color: #373d3f;
	--button-background-color: #2f3739;
	--button-background-color-hover: #75df72;
	--button-background-color-active: #0c0c0d;
	--button-shadow-color: rgba(0, 0, 0, 0.3);
	--button-text-color-active: #adecab;
	--button-border-radius: .4rem;
	--button-toggle-background-color: #575f62;
	--button-toggle-background-color-hover: #575f62;
	--input-background-color: #2f3739;
	--input-background-color-hover: #383f44;
	--input-text-color: #f4f3f3;
	--input-border-color: #0f0f0f;
	--input-border-color-active: #0c0c0d;
	--input-border-radius: .4rem;
	--input-group-border-color:  #323a3c;
	--menu-background-color: #222;
	--menu-icons-filter: invert(1);
	--menu-icons-filter-active: none;
	--menu-text-color: #cccccc;
	--menu-dropdown-hover-background-color: #adecab;
	--number-input-arrow-width: 2rem;
	--background-color-active: #adecab;
	--background-color-hover: #575f62;
	--text-color-active: #080808;
	--border-color: #727677;
	--scrollbar-track-color: #464d4f;
	--scrollbar-thumb-color: #2f3739;
	--mobile-menu-toggle-filter: invert(1);
	--side-bar-text-color:black;
	--tab-active-color :#abe1ae;
	--file-name-color:white;
	--side-bar-color:#555;
	--tab-color-sidebar:#32383c;
	--active-sidebar-tab-color:var(--tab-color-sidebar);
	--active-sidebar-tab-text-color:#f3f3f3;
	--side-bar-non-active-tab-text-color:#b0b0b0;
	
	--active-page-text-color:#black;
	--attibute-background-color:#222;
	--active-page-color: #CCE7E5;
    --active-object-color: #CCE7E5;
	--actions-background-color:#FFFFFF;
	
}
body.theme-green{
	/* green */
	--background:green;
	--text-color: #0c0c0d;
	--text-color-muted: #80937d;
	--link-color: #9ffda5;
	--section-background-color: #1c2e04;
	--area-background-color: #3b5f11;
	--block-background-color: #3b5f11;
	--header-background-color: #2b460f;
	--button-background-color: #2e4a0d;
	--button-background-color-hover: #58960e;
	--button-background-color-active:#0c0c0d;
	--button-text-color-active: #ccc;
	--button-toggle-background-color: #243e05;
	--button-toggle-background-color-hover: #243e05;
	--input-background-color: #ffffff;
	--input-background-color-hover: #ddd;
	--input-text-color: #0c0c0d;
	--input-border-color: #ccc;
	--menu-background-color: #1c2e04;
	--menu-icons-filter: invert(1);
	--menu-icons-filter-active: none;
	--menu-text-color: #acc3a9;
	--menu-dropdown-hover-background-color: #adecab;
	--background-color-active: #58960e;
	--background-color-hover: #58960e;
	--text-color-active: #acc3a9;
	--border-color: #4d6b1e;
	--scrollbar-track-color: #050702;
	--scrollbar-thumb-color: #80937d;
	--mobile-menu-toggle-filter: invert(1);
	--file-name-color:white;
	--actions-background-color:#FFFFFF;
}
body.theme-red{
	/* red */
	--background: #050702;
	/*--text-color: #0c0c0d;*/
	--text-color-muted: #80937d;
	--link-color: #9ffda5;
	--section-background-color: #1c2e04;
	--area-background-color:#8B0000;
	--block-background-color:#8B0000;
	--header-background-color:#8B0000;
	--button-background-color: #8B0000;
	--button-background-color-hover:#8B0000;
	--button-background-color-active:#8B0000;
	--button-text-color-active: #ccc;
	--button-toggle-background-color:#8B0000;
	--button-toggle-background-color-hover: #8B0000;
	--input-background-color: #ffffff;
	--input-background-color-hover: #ddd;
	--input-text-color: #0c0c0d;
	--input-border-color: #ccc;
	--menu-background-color: #1c2e04;
	--menu-icons-filter: invert(1);
	--menu-icons-filter-active: none;
	--menu-text-color: #acc3a9;
	--menu-dropdown-hover-background-color: #adecab;
	--background-color-active: #8B0000;
	--background-color-hover:#8B0000;
	--text-color-active: #acc3a9;
	--border-color: #8B0000;
	--scrollbar-track-color: #050702;
	--scrollbar-thumb-color: #80937d;
	--mobile-menu-toggle-filter: invert(1);
	--file-name-color:white;
	--active-page-color: #8B0000;
    --active-object-color: #8B0000;
	--actions-background-color:#FFFFFF;
}
body.theme-orange{
	/* red */
	--background: #050702;
	/*--text-color: #0c0c0d;*/
	--text-color-muted: #80937d;
	--link-color: #9ffda5;
	--section-background-color: #1c2e04;
	--area-background-color:#f7880a83;
	--block-background-color:#f7880a83;
	--header-background-color:#f7880a83;
	--button-background-color: #f7880a83;
	--button-background-color-hover:#f7880a83;
	--button-background-color-active:#f7880a83;
	--button-text-color-active: #ccc;
	--button-toggle-background-color:#f7880a83;
	--button-toggle-background-color-hover: #f7880a83;
	--input-background-color: #ffffff;
	--input-background-color-hover: #ddd;
	--input-text-color: #0c0c0d;
	--input-border-color: #ccc;
	--menu-background-color: #1c2e04;
	--menu-icons-filter: invert(1);
	--menu-icons-filter-active: none;
	--menu-text-color: #acc3a9;
	--menu-dropdown-hover-background-color: #adecab;
	--background-color-active: #f7880a83;
	--background-color-hover:#f7880a83;
	--text-color-active: #acc3a9;
	--border-color: #f7880a83;
	--scrollbar-track-color: #050702;
	--scrollbar-thumb-color: #80937d;
	--mobile-menu-toggle-filter: invert(1);
	--file-name-color:white;
	--active-page-color: #f7880a83;
    --active-object-color: #f7880a83;
	--actions-background-color:#FFFFFF;
}
body.theme-skyblue{
	/* red */
	--background: #050702;
	/*--text-color: #0c0c0d;*/
	--text-color-muted: #80937d;
	--link-color: #9ffda5;
	--section-background-color: #1c2e04;
	--area-background-color:#87CEEB;
	--block-background-color:#87CEEB;
	--header-background-color:#87CEEB;
	--button-background-color: #87CEEB;
	--button-background-color-hover:#87CEEB;
	--button-background-color-active:#87CEEB;
	--button-text-color-active: #ccc;
	--button-toggle-background-color:#87CEEB;
	--button-toggle-background-color-hover: #87CEEB;
	--input-background-color: #ffffff;
	--input-background-color-hover: #ddd;
	--input-text-color: #0c0c0d;
	--input-border-color: #ccc;
	--menu-background-color: #1c2e04;
	--menu-icons-filter: invert(1);
	--menu-icons-filter-active: none;
	--menu-text-color: #acc3a9;
	--menu-dropdown-hover-background-color: #adecab;
	--background-color-active: #87CEEB;
	--background-color-hover:#87CEEB;
	--text-color-active: #acc3a9;
	--border-color: #87CEEB;
	--scrollbar-track-color: #050702;
	--scrollbar-thumb-color: #80937d;
	--mobile-menu-toggle-filter: invert(1);
	--file-name-color:white;
	--active-page-color: #87CEEB;
    --active-object-color: #87CEEB;
	--actions-background-color:#FFFFFF;
	
}

*{
	box-sizing: border-box;
	background-repeat: no-repeat;
}
html {
	font-size: 10px; /* Base is 10px for easy REM calculation */
}
body{
	margin: 0;
	background-color: #424F5A;
	background: var(--background);
	font-size: 12px;
	font-family: 'Poppins', sans-serif;;
	color: var(--text-color);
	line-height: 1.4;
	font-weight: normal;
	overflow: hidden;
	
}
canvas{
	outline: none;
	/* disable select canvas */
	-webkit-touch-callout: none;
	-ms-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}
img{
	border: none;
}
td, th{
	vertical-align:top;
}
table{
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	border-collapse: collapse;
	border-spacing: 0;
	width:100%;
}
hr{
	border-color: rgba(0,0,0,0.3);
	border-bottom: 0;
	margin: 1px 0px;
}
input[type="text"], select, input[type="number"],input[type="email"],input[type="password"], textarea{
	background: var(--input-background-color);
	border: 1px solid var(--input-border-color);
	border-radius: var(--input-border-radius);
	color: var(--input-text-color);
	padding: 1px 5px;
	font-size: 12px;
}
input:disabled {
	opacity: 0.3;
}
select{
	padding: 1px 4px;
}
option:hover{
	background-color: var(--dropdown-hover-color);
}
option:checked{
	color: white;
	background-color: var(--brand-color);
}
select::-ms-expand,
select::after {
  content: "▼"; /* This sets the content of the pseudo-element to a down arrow */
  font-weight: bold; /* Apply bold font weight to the arrow */
  color: red; /* Apply a specific color to the arrow */
  /* Add other styles as needed */
}
input[type="range"]{
	margin-left: 0;
	width:100%;
}
button, input[type="button"]{
	border-radius: var(--button-border-radius);
	box-shadow: 0 1px 2px 0 var(--button-shadow-color), 0 1px 0 0 rgba(255, 255, 255, 0.1) inset;
	cursor: pointer;
	border: 1px solid var(--border-color);
	background-color: var(--button-background-color);
	color: var(--text-color);
	font-family: 'Poppins', sans-serif;;
	font-size: 13px;
}
button:hover, input[type="button"]:hover{
	background-color: var(--button-background-color-hover);
}
button:disabled, input[type="button"]:disabled{
	visibility:hidden;
}
button[aria-pressed="true"], input[type="button"][aria-pressed="true"]{
	background-color: var(--button-background-color-active);
	color: var(--button-text-color-active);
	box-shadow: 0 1px 2px 0 var(--button-shadow-color), 0 1px 1px 1.5px rgba(58, 40, 40, 0.1) inset, 0 -1px 0 0 var(--button-text-color-active) inset;
}
button[aria-pressed="true"]:hover, input[type="button"][aria-pressed="true"]:hover{
	background-color: var(--button-background-color-hover);
}
button.ui_toggle_button:hover{
	background-color: var(--button-toggle-background-color-hover);
}
label{
	display: inline-block;
	vertical-align: top;
	margin-top: 7px;
}
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-track-piece {
    background: rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.6);
}
@supports (zoom:2) {
	input[type="radio"],  input[type=checkbox]{
		zoom: 1.5;
	}
}
@supports not (zoom:2) {
	input[type="radio"],  input[type=checkbox]{
		transform: scale(1.5);
		transform-origin: left center;
		margin: 8px 12px 8px 0;
	}
}
.top_right_txt{
    position: absolute;
    right: 10px;
}
.top_right_txt button {border:0px; background:none; cursor: none;box-shadow:none;}





.dropbtn {
	background-color: transparent;
	color: white; width:20px; height:20px;
	display:inline-block;
	border: none;
	cursor: pointer;
  }
  
  
  .dropdown {
	position: relative;
	display: inline-block;
  }
  
  
  .dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 9999;
  }
  
  
  .dropdown-content a {
	color: rgb(19, 18, 18);
	padding: 2px 10px;
	text-decoration: none;
	display: block;
  }
  
  .dropdown-content a:hover {background-color: #e7e7e7;}
  .dropdown-content img {vertical-align: middle; margin-right: 5px;}
  
  
  .dropdown:hover .dropdown-content {
	display: block;
	min-width:120px;
	width:auto;
  }
  
  .dropdown:hover .dropbtn {
	background-color: transparent;
  }
  #toggle_pagination {text-align: center; padding: 5px;}
  .canvas_preview_details {text-align: center;}
  .dropdown-content a.active{background-color:#ccc !important;}

  .notification {background:url('images/notify_ic.svg') no-repeat center center; cursor:pointer; width:24px; height:100%;background-color: transparent !important;
    box-shadow: none;   border: 0;}
  .notification_box{
    cursor: pointer;
	flex: 1;
    height: 24px;
    display: inline-flex;
  }
  .notification .badge {display:none; position: absolute; height: 14px; width: 14px; top: -3; padding-left: 2px; padding-right: 2px; left: 12px; border-radius: 50%; background-color: red; color: white; } 
  .eye_container{
	position: absolute;
	top: 55%;
	right: 0;
  }
  .eye {
	background: url(images/login/eye_open.svg) no-repeat center center;
	display: inline-block;
	height: 16px;
	width: 24px;
	cursor: pointer;
  }
  
  .eye-slash {
	background: url(images/login/eye_close.svg) no-repeat center center;
	display: inline-block;
	height: 16px;
	width: 24px;
	cursor: pointer;
  }
  select:focus-visible,input:focus-visible,textarea:focus-visible {
    outline-color: var(--active-menu-item-color);
  }
/* Common input label sizes */
.label_width_character {
    width: 100%;
    max-width: 2.88rem;
    overflow: hidden;
    flex-shrink: 0;
}

.label_width_small {
    width: 100%;
    max-width: 6.4rem;
    overflow: hidden;
}

.label_width_medium {
    width: 100%;
    max-width: 10.4rem;
    overflow: hidden;
}

/* Font color utility */
.text_red {
    color: var(--text-color-red);
}

.text_green {
    color: var(--text-color-green);
}

.text_blue {
    color: var(--text-color-blue);
}

.text_muted {
    color: var(--text-color-muted);
}

/*
    Size inputs based on the number of "w" characters that could fit in the input. "w" is usually the widest character.
    This is a rough estimate since all characters vary in width. For example an input with numbers
    usually fits way more characters than an input with letters.
    "cw" means character width
*/
.input_cw_1,
.input_cw_2,
.input_cw_3,
.input_cw_4,
.input_cw_5,
.input_cw_6,
.input_cw_7,
.input_cw_8,
.input_cw_9,
.input_cw_10 .input_cw_11,
.input_cw_12,
.input_cw_13,
.input_cw_14,
.input_cw_15 {
    width: 100%;
}

.input_cw_1 {
    max-width: 2.25rem;
}

.input_cw_2 {
    max-width: 3.25rem;
}

.input_cw_3 {
    max-width: 4.25rem;
}

.input_cw_4 {
    max-width: 5.25rem;
}

.input_cw_5 {
    max-width: 6.25rem;
}

.input_cw_6 {
    max-width: 7.25rem;
}

.input_cw_7 {
    max-width: 8.25rem;
}

.input_cw_8 {
    max-width: 9.25rem;
}

.input_cw_9 {
    max-width: 10.25rem;
}

.input_cw_10 {
    max-width: 11.25rem;
}

.input_cw_11 {
    max-width: 12.25rem;
}

.input_cw_12 {
    max-width: 13.25rem;
}

.input_cw_13 {
    max-width: 14.25rem;
}

.input_cw_14 {
    max-width: 15.25rem;
}

.input_cw_15 {
    max-width: 16.25rem;
}

input[type="number"].input_cw_1 {
    max-width: 4.25rem;
}

input[type="number"].input_cw_2 {
    max-width: 5.25rem;
}

input[type="number"].input_cw_3 {
    max-width: 6.25rem;
}

input[type="number"].input_cw_4 {
    max-width: 7.25rem;
}

input[type="number"].input_cw_5 {
    max-width: 8.25rem;
}

input[type="number"].input_cw_6 {
    max-width: 9.25rem;
}

input[type="number"].input_cw_7 {
    max-width: 10.25rem;
}

input[type="number"].input_cw_8 {
    max-width: 11.25rem;
}

input[type="number"].input_cw_9 {
    max-width: 12.25rem;
}

input[type="number"].input_cw_10 {
    max-width: 13.25rem;
}

input[type="number"].input_cw_11 {
    max-width: 14.25rem;
}

input[type="number"].input_cw_12 {
    max-width: 15.25rem;
}

input[type="number"].input_cw_13 {
    max-width: 16.25rem;
}

input[type="number"].input_cw_14 {
    max-width: 17.25rem;
}

input[type="number"].input_cw_15 {
    max-width: 18.25rem;
}

.ui_number_input.input_cw_1 {
    max-width: calc(2.25rem + var(--number-input-arrow-width));
}

.ui_number_input.input_cw_2 {
    max-width: calc(3.25rem + var(--number-input-arrow-width));
}

.ui_number_input.input_cw_3 {
    max-width: calc(4.25rem + var(--number-input-arrow-width));
}

.ui_number_input.input_cw_4 {
    max-width: calc(5.25rem + var(--number-input-arrow-width));
}

.ui_number_input.input_cw_5 {
    max-width: calc(6.25rem + var(--number-input-arrow-width));
}

.ui_number_input.input_cw_6 {
    max-width: calc(7.25rem + var(--number-input-arrow-width));
}

.ui_number_input.input_cw_7 {
    max-width: calc(8.25rem + var(--number-input-arrow-width));
}

.ui_number_input.input_cw_8 {
    max-width: calc(9.25rem + var(--number-input-arrow-width));
}

.ui_number_input.input_cw_9 {
    max-width: calc(10.25rem + var(--number-input-arrow-width));
}

.ui_number_input.input_cw_10 {
    max-width: calc(11.25rem + var(--number-input-arrow-width));
}

.ui_number_input.input_cw_11 {
    max-width: calc(12.25rem + var(--number-input-arrow-width));
}

.ui_number_input.input_cw_12 {
    max-width: calc(13.25rem + var(--number-input-arrow-width));
}

.ui_number_input.input_cw_13 {
    max-width: calc(14.25rem + var(--number-input-arrow-width));
}

.ui_number_input.input_cw_14 {
    max-width: calc(15.25rem + var(--number-input-arrow-width));
}

.ui_number_input.input_cw_15 {
    max-width: calc(16.25rem + var(--number-input-arrow-width));
}

/* virtual row css */
.virtul_column_defn {
    max-width: 776px !important;
    width: 776px !important;
    min-width: 776px !important;
    height: 510px !important;
    max-height: 510px !important;
    min-height: 510px !important;
}

.virtul_column_defn .virtul_column_defn_container {
    border: 1px solid var(--border-color);
    height: 400px !important;
    width: 752px !important;
}

.virtul_column_defn .virtul_column_defn_container::-webkit-scrollbar {
    width: 5px;
}
.virtul_column_defn .virtul_column_defn_container th{
    background: #fafafa;
    color: black;
    display: table-cell !important;
    font-size: 13px !important;
    border: 1px solid #f1f1f1;
    padding: 5px !important;
    font-weight: 500;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
}
.virtul_column_defn .virtul_column_defn_container td{
    border: 1px solid #f1f1f1 !important;
      font-size: 12px !important;
      color: #333;
      white-space: nowrap;
      text-overflow: ellipsis !important;
      overflow: hidden !important;
      padding: 5px !important;
}
.virtul_column_defn .virtul_column_defn_container td select,.virtul_column_defn .virtul_column_defn_container td input[type='text']{
    height: 30px !important;
    width: 100% !important;
}
.virtul_column_defn .virtul_column_defn_container td .fit_div_content{
    justify-content: center !important;
}
/* virtual row serial no evaluation */
.sr_no_eval{
    max-width: 776px !important;
    width: 776px !important;
    min-width: 776px !important;
    height: 510px !important;
    max-height: 510px !important;
    min-height: 510px !important;
}
.sr_no_eval .sr_no_eval_container {
    border: 1px solid var(--border-color);
    height: 400px !important;
    width: 752px !important;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.sr_no_eval .sr_no_eval_container .sr_no_eval_title{
    height: 10%;
}
.sr_no_eval .sr_no_eval_container .sr_no_eval_selection{
    height: 20%;
    display: flex;
    flex-direction: row;
    gap: 10px;
}
.sr_no_eval .sr_no_eval_container .sr_no_eval_selection .sr_no_eval_field{
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}
.sr_no_eval .sr_no_eval_container .sr_no_eval_selection .sr_no_eval_field:last-child{
    justify-content: center;
}
.sr_no_eval .sr_no_eval_container .sr_no_eval_selection .sr_no_eval_field select{
    height:30px;
    width: 100%;
}
.sr_no_eval .sr_no_eval_container .sr_no_eval_selection .sr_no_eval_field button{
    height:30px;
    width: 60px;
    background-color: var(--brand-color) !important;
    color: white !important;
}
.sr_no_eval .sr_no_eval_container .sr_no_eval_area{
    height: 60%;
}
.sr_no_eval .sr_no_eval_container .sr_no_eval_area textarea{
    height: 100%;
    resize: none;
    border: 1px solid var(--border-color) !important;
    padding: 10px;
}
.sr_no_eval .sr_no_eval_container .sr_no_eval_btns{
    height: 10%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 5px;
}
.sr_no_eval .sr_no_eval_container .sr_no_eval_btns button{
    height:30px;
    width: 80px;
}
.sr_no_eval .sr_no_eval_container .sr_no_eval_btns button:last-child{
    background-color: var(--brand-color) !important;
    color: white !important;
}
@font-face {
    font-family: 'wingdings';
    src: url('fonts/wingding.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
}

/* Thin */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

/* Thin Italic */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

/* Extra Light */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

/* Extra Light Italic */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

/* Light */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Light Italic */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

/* Regular (Normal.ttf) */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Normal.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Italic */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Medium */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Medium Italic */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

/* SemiBold */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* SemiBold Italic */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

/* Bold */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Bold Italic */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Extra Bold */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* Extra Bold Italic */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

/* Black */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* Black Italic */
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/*****************\
| UI Button Group |
\*****************/

.ui_button_group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.ui_button_group.no_wrap {
    flex-wrap: nowrap;
}

.ui_button_group.stacked {
    margin: .75rem 0;
}

.ui_button_group.stacked:first-child {
    margin-top: 0;
}

.ui_button_group.stacked:last-child {
    margin-bottom: 0;
}

.ui_button_group>button,
.ui_button_group>input[type="button"] {
    border-radius: 0;
}

.ui_button_group>button:focus,
.ui_button_group>input[type="button"]:focus {
    z-index: 1;
}

.ui_button_group>button+button,
.ui_button_group>button+input[type="button"],
.ui_button_group>input[type="button"]+button,
.ui_button_group>input[type="button"]+input[type="button"] {
    margin-left: -1px;
}

.ui_button_group>button:first-child,
.ui_button_group>input[type="button"]:first-child {
    border-radius: var(--button-border-radius) 0 0 var(--button-border-radius);
}

.ui_button_group>button:last-child,
.ui_button_group>input[type="button"]:last-child {
    border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;
}

/****************\
| UI Color Input |
\****************/

.ui_color_input {
    display: inline-block;
    padding: 0;
    margin: 0;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
}

.ui_color_input input[type="color"] {
    display: block;
    cursor: pointer;
    padding: 0;
    border: .2rem solid var(--input-background-color);
    width: 3rem;
}

.ui_color_input .alpha_overlay {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAABhWlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw1AUhU9bRdGKiBlERDJUJwuiIo5ahSJUCLVCqw4mL/2DJg1Jiouj4Fpw8Gex6uDirKuDqyAI/oA4OTopukiJ9yWFFjFeeLyP8+45vHcfEKyVmGa1jQOabpvJeExMZ1bFjld0YxgBCOiTmWXMSVICvvV1T51Ud1Ge5d/3Z/WoWYsBAZF4lhmmTbxBPL1pG5z3iQVWkFXic+Ixky5I/Mh1xeM3znmXgzxTMFPJeWKBWMy3sNLCrGBqxFPEEVXTKT+Y9ljlvMVZK1VY4578heGsvrLMdVpDiGMRS5AgQkEFRZRgI0q7ToqFJJ3HfPyDrl8il0KuIhg5FlCGBtn1g//B79lauckJLykcA9pfHOdjBOjYBepVx/k+dpz6CRB6Bq70pr9cA2Y+Sa82tcgR0LsNXFw3NWUPuNwBBp4M2ZRdKUQrmMsB72f0TRmg/xboWvPm1jjH6QOQolklboCDQ2A0T9nrPu/ubJ3bvz2N+f0AL+pyjMZuudYAAAAJcEhZcwAALiMAAC4jAXilP3YAAAAHdElNRQfkCx4BHwaj7CMVAAAAGXRFWHRDb21tZW50AENyZWF0ZWQgd2l0aCBHSU1QV4EOFwAAAC5JREFUOMtjfPfuHQNuICgoiEeWiYECMKp5ZGhm/P//Px7p9+/fjwbYqGZKNAMAANAI7r7rfkQAAAAASUVORK5CYII=');
    background-size: 100% 100%;
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    pointer-events: none;
}

/**************************\
| UI Color Picker Gradient |
\**************************/

.ui_color_picker_gradient {
    padding: 0 0 80% 0;
    position: relative;
    width: 100%;
}

.ui_color_picker_gradient .primary_pick {
    position: absolute;
    left: 86%;
    right: 0;
    top: 0;
    bottom: 0;
    background: white;
}

.ui_color_picker_gradient .secondary_pick {
    position: absolute;
    left: 0;
    right: 17%;
    top: 0;
    bottom: 0;
    border: 1px solid var(--border-color);
    background: black;
}

.ui_color_picker_gradient .secondary_pick:focus {
    outline: 0;
    border: 1px solid var(--input-border-color-active);
}

.ui_color_picker_gradient .secondary_pick .saturation_gradient {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
}

.ui_color_picker_gradient .secondary_pick .value_gradient {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
}

.ui_color_picker_gradient .secondary_pick .handle {
    position: absolute;
    left: 0;
    right: auto;
    top: 0;
    bottom: auto;
    pointer-events: none;
}

.ui_color_picker_gradient .secondary_pick .handle:before {
    content: '';
    display: block;
    position: absolute;
    left: -.6rem;
    top: -.6rem;
    height: .3rem;
    width: .3rem;
    border: .4rem solid #999;
    border-radius: 1000px;
}

.ui_color_picker_gradient .secondary_pick .handle:after {
    content: '';
    display: block;
    position: absolute;
    left: -.5rem;
    top: -.5rem;
    height: .5rem;
    width: .5rem;
    border: .2rem solid white;
    border-radius: 1000px;
}

.ui_color_picker_gradient .primary_pick .ui_range {
    border-color: rgba(1, 1, 1, 0.1);
}

.ui_color_picker_gradient .primary_pick .ui_range:focus {
    border-color: var(--input-border-color-active);
}

/*****************\
| UI Color Sample |
\*****************/

.ui_color_sample {
    border: 1px solid #999;
    box-shadow: 0 0 0 1px #555 inset;
    display: block;
    height: 28px;
    width: 28px;
}

/***************\
| UI Flex Group |
\***************/

.ui_flex_group {
    display: flex;
    flex-direction: row;
}

.ui_flex_group.stacked {
    margin: .75rem 0;
}

.ui_flex_group.stacked:first-child {
    margin-top: 0;
}

.ui_flex_group.stacked:last-child {
    margin-bottom: 0;
}

.ui_flex_group.column {
    flex-direction: column;
}

.ui_flex_group.justify_content_center {
    justify-content: center;
}

.ui_flex_group.justify_content_start {
    justify-content: flex-start;
}

.ui_flex_group.justify_content_end {
    justify-content: flex-end;
}

.ui_flex_group.justify_content_space_around {
    justify-content: space-around;
}

.ui_flex_group.justify_content_space_between {
    justify-content: space-between;
}

.ui_flex_group.align_items_baseline {
    align-items: baseline;
}

.ui_flex_group.align_items_center {
    align-items: center;
}

.ui_flex_group.align_items_start {
    align-items: flex-start;
}

.ui_flex_group.align_items_end {
    align-items: flex-end;
}

.ui_flex_group.align_items_stretch {
    align-items: stretch;
}

/****************\
| UI Icon Button |
\****************/

.ui_icon_button {
    height: 2.8rem;
    line-height: 2.8rem;
}

.ui_icon_button.input_height {
    height: 2.4rem;
    line-height: 2.4rem;
}

.ui_icon_button>svg {
    display: block;
    font-size: 1.6rem;
}

.ui_icon_button>img {
    display: block;
    margin: 0 auto;
}

button img {
    filter: var(--menu-icons-filter);
}

/****************\
| UI Input Group |
\****************/

.ui_input_group {
    display: flex;
    flex-direction: row;
    min-height: 2.4rem;
    width: 100%;
}

.ui_input_group.stacked {
    margin: .75rem 0;
}

.ui_input_group.stacked:first-child {
    margin-top: 0;
}

.ui_input_group.stacked:last-child {
    margin-bottom: 0;
}

.ui_input_group>input,
.ui_input_group>.ui_number_input,
.ui_input_group>.ui_range,
.ui_input_group>.ui_color_sample {
    border-radius: 0;
    height: auto;
    min-width: 0;
}

.ui_input_group>.ui_color_sample {
    border: none;
    width: 100%;
}

.ui_input_group> :first-child {
    border-radius: var(--input-border-radius) 0 0 var(--input-border-radius);
}

.ui_input_group> :last-child {
    border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0;
}

.ui_input_group>label {
    display: flex;
    align-items: center;
    border: 1px solid var(--input-group-border-color);
    border-right: 0;
    margin: 0;
    padding: 0 .75rem;
}

.ui_input_group>.ui_range+input,
.ui_input_group>.ui_range+.ui_number_input {
    margin-left: -1px;
}

.ui_input_grid {
    border-radius: var(--input-border-radius);
    box-shadow: 0 1px 0 0 rgba(1, 1, 1, 0.1);
}

.ui_input_grid.stacked {
    margin: .75rem 0;
}

.ui_input_grid.stacked:first-child {
    margin-top: 0;
}

.ui_input_grid.stacked:last-child {
    margin-bottom: 0;
}

:not(.ui_input_grid)>.ui_input_group {
    border-radius: var(--input-border-radius);
    box-shadow: 0 1px 0 0 rgba(1, 1, 1, 0.1);
}

.ui_input_grid>.ui_input_group {
    margin: -1px 0;
}

.ui_input_grid>.ui_input_group> :first-child,
.ui_input_grid>.ui_input_group> :last-child {
    border-radius: 0;
}

.ui_input_grid>.ui_input_group:first-child {
    margin-top: 0;
}

.ui_input_grid>.ui_input_group:first-child> :first-child {
    border-radius: var(--input-border-radius) 0 0 0;
}

.ui_input_grid>.ui_input_group:first-child> :last-child {
    border-radius: 0 var(--input-border-radius) 0 0;
}

.ui_input_grid>.ui_input_group:last-child {
    margin-bottom: 0;
}

.ui_input_grid>.ui_input_group:last-child> :first-child {
    border-radius: 0 0 0 var(--input-border-radius);
}

.ui_input_grid>.ui_input_group:last-child> :last-child {
    border-radius: 0 0 var(--input-border-radius) 0;
}

/*****************\
| UI Number Input |
\*****************/

.ui_number_input {
    border: 1px solid var(--input-border-color);
    border-radius: var(--input-border-radius);
    display: inline-block;
    padding: 0;
    margin: 0;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
}

.ui_number_input>input[type="number"]::-webkit-outer-spin-button,
.ui_number_input>input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ui_number_input>input[type="number"] {
    border: none;
    border-radius: 0;
    -moz-appearance: textfield;
    appearance: textfield;
    padding-right: 2.5rem;
    padding-right: calc(var(--number-input-arrow-width) + .5rem);
    width: 100%;
}

.ui_number_input>.increase_number,
.ui_number_input>.decrease_number {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 2rem;
    width: var(--number-input-arrow-width);
    border-radius: 0;
    border: 1px solid var(--input-border-color);
    border-right: none;
    padding: 0;
    margin: 0;
}

.ui_number_input> ::-moz-focus-inner {
    border: 0;
}

.ui_number_input>.increase_number:focus,
.ui_number_input>.decrease_number:focus {
    outline: 0;
}

.ui_number_input>.increase_number {
    right: 0;
    top: 0;
    bottom: 50%;
    border-top: none;
}

.ui_number_input>.increase_number::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-bottom: 3px solid var(--input-text-color);
}

.ui_number_input>.decrease_number {
    right: 0;
    top: calc(50% - 1px);
    bottom: 0;
    border-bottom: none;
}

.ui_number_input>.decrease_number::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 3px solid var(--input-text-color);
}

/**********\
| UI Range |
\**********/

:root {
    --range-handle-width: 18px;
}

.ui_range {
    display: flex;
    flex-direction: row;
    background: var(--input-background-color);
    border: 1px solid var(--input-border-color);
    border-radius: 1000px;
    height: 1.8rem;
    overflow: visible;
    outline: 0;
    padding: 0 calc(var(--range-handle-width) / 2);
    position: relative;
    width: 100%;
}

.ui_range:focus {
    border-color: var(--input-border-color-active);
    z-index: 1;
}

.ui_range.active {
    cursor: col-resize;
}

.ui_range .padded_track {
    position: absolute;
    left: calc(var(--range-handle-width) / 2);
    right: calc(var(--range-handle-width) / 2);
    top: 0;
    bottom: 0;
}

.ui_range .bar {
    overflow: visible;
    position: relative;
    width: 0%;
}

.ui_range .handle {
    background: var(--input-text-color);
    border: 1px solid var(--border-color);
    border-radius: 1000px;
    box-sizing: border-box;
    cursor: col-resize;
    display: block;
    height: 1.8rem;
    width: var(--range-handle-width);
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
}

.ui_range.color_picker .handle {
    background: none;
    border: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: auto;
    top: 0;
    bottom: 0;
    transform: translateX(50%);
}

.ui_range.color_picker .handle::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: .5rem solid transparent;
    border-right: .5rem solid transparent;
    border-top: .7rem solid white;
}

.ui_range.color_picker .handle::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: .5rem solid transparent;
    border-right: .5rem solid transparent;
    border-bottom: .7rem solid black;
}

.ui_range.color_picker .handle:hover::before {
    border-top-color: #eaeaea;
}

.ui_range.color_picker .handle:hover::after {
    border-bottom-color: #222;
}

.ui_range.vertical {
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    width: 1.8rem;
    padding: calc(var(--range-handle-width) / 2) 0;
}

.ui_range.vertical.active {
    cursor: row-resize;
}

.ui_range.vertical .padded_track {
    left: 0;
    right: 0;
    top: calc(var(--range-handle-width) / 2);
    bottom: calc(var(--range-handle-width) / 2);
}

.ui_range.vertical .bar {
    width: 100%;
    height: 0%;
}

.ui_range.vertical .handle {
    transform: translate(50%, -50%);
    top: 0;
    right: 50%;
    cursor: row-resize;
}

.ui_range.vertical.color_picker_thin {
    padding: 1px 0;
    border-radius: 0;
    width: 100%;
}

.ui_range.vertical.color_picker_thin .padded_track {
    top: 0;
    bottom: 0;
}

.ui_range.vertical.color_picker_thin .handle {
    border-radius: 0;
    width: 100%;
    height: .5rem;
}

/*************\
| UI Swatches |
\*************/

.ui_swatches {
    display: flex;
    justify-content: center;
}

.ui_swatches .swatch_group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: auto;
    border-radius: var(--input-border-radius);
    border: 1px solid var(--border-color);
    border-right: transparent;
    box-shadow: 0 1px 0 0 rgba(1, 1, 1, 0.1);
    overflow: hidden;
    max-height: calc(2.3rem);
}

.ui_swatches .swatch_group:focus {
    outline: 0;
    box-shadow: 0 0 0 1px var(--input-border-color-active);
}

.ui_swatches .swatch_group.rows_2 {
    max-height: calc(4.6rem - 1px);
}

.ui_swatches .swatch_group.rows_3 {
    max-height: calc(6.9rem - 2px);
}

.ui_swatches .swatch_group.cols_1 .swatch {
    width: 100%;
}

.ui_swatches .swatch_group.cols_2 .swatch {
    width: 50%;
}

.ui_swatches .swatch_group.cols_3 .swatch {
    width: 33.33%;
}

.ui_swatches .swatch_group.cols_4 .swatch {
    width: 25%;
}

.ui_swatches .swatch_group.cols_5 .swatch {
    width: 20%;
}

.ui_swatches .swatch_group.cols_6 .swatch {
    width: 16.66%;
}

.ui_swatches .swatch_group.cols_7 .swatch {
    width: 14.29%;
}

.ui_swatches .swatch_group.cols_8 .swatch {
    width: 12.5%;
}

.ui_swatches .swatch {
    background: white;
    display: inline-block;
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: 0;
    box-shadow: 0 0 0 1px white inset;
    margin: -1px 0 0 -1px;
    padding: 0;
    height: 2.3rem;
    min-width: 2.3rem;
    flex-grow: 1;
}

.ui_swatches .swatch:hover,
.ui_swatches .swatch:focus {
    background: white;
    box-shadow: 0 0 0 2px white inset, 0 0 0 3px var(--border-color) inset;
}

.ui_swatches .swatch:hover:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.1) 51%, rgba(0, 0, 0, 0.1) 100%);
}

.ui_swatches .swatch.active {
    box-shadow: 0 0 0 3px var(--button-text-color-active) inset, 0 0 0 4px var(--border-color) inset;
}


/******************\
| UI Toggle Button |
\******************/

.ui_toggle_button {
    padding-left: 2.6rem !important;
    position: relative;
}

.ui_toggle_button:before {
    background-color: var(--button-toggle-background-color);
    background-image: url('data:image/svg+xml;utf8,<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-x" fill="white" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--button-border-radius) 0 0 var(--button-border-radius);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1.8rem;
    content: '';
}

.ui_toggle_button[aria-pressed="true"]:before {
    background-color: var(--button-text-color-active);
    background-image: url('data:image/svg+xml;utf8,<svg width="0.7em" height="1em" viewBox="0 0 16 16" class="bi bi-check2" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/></svg>');
}

/* media */

.media-paging {
    width: 100%;
    margin: 10px 0;
    text-align: center;
}

.media-paging button {
    background-color: var(--button-background-color);
    color: var(--text-color);
}

.media-paging button.selected {
    background-color: var(--background-color-active);
    color: var(--text-color-active);
}

/* global search */
#global_search_results {
    padding-top: 10px;
    font-size: 14px;
}

#global_search_results .search-result {
    padding: 3px 5px;
}

#global_search_results .search-result.active {
    background-color: var(--background-color-active);
    color: var(--text-color-active);
    border-radius: 2px;
    position: relative;
    z-index: 10;
    cursor: pointer;
}

#global_search_results b {
    color: var(--text-color-red);
    z-index: 0;
    position: relative;
    pointer-events: none;
}

.popup.shortcuts table {
    line-height: 1;
}

/* custom css for dropdown containers */
.ui_icon_container::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 3px solid var(--input-text-color);
}

.icons_container {
    width: 134px;
    height: 171px;
    background-color: white;
    position: fixed;
    top: 60px;
    z-index: 100;
    border: 1px solid #d7d7d7;
    padding: 3px;
}

.icons_container .icons_container_title {
    font-family: 'Poppins', sans-serif;
    display: inline-block;
    width: 100%;
    height: 20%;
    padding: 5px;
    font-weight: 500;
}

.icons_container .icons_container_list {
    width: 100%;
    height: 80%;
    padding: 3px;
    display: flex;
    flex-flow: wrap;
    overflow: visible;
}

.icons_container .icons_container_list .icons_list_item_with_border {
    font-family: 'wingdings';
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
    font-weight: 400;
    border: 1px solid rgb(138, 136, 134);
    border-radius: 2px;
    box-sizing: border-box;
    cursor: default;
    display: inline-block;
    padding: 4px 4px;
    text-decoration: none;
    text-align: center;
    height: 40px;
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
    vertical-align: top;
    width: 40px;
    user-select: none;
    outline: transparent solid 2px;
    box-shadow: none;
}

.icons_container .icons_container_list .icons_list_item_without_border {
    font-family: 'wingdings';
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
    font-weight: 400;
    border: 1px solid transparent;
    border-radius: 2px;
    box-sizing: border-box;
    cursor: default;
    display: inline-block;
    padding: 4px 4px;
    text-decoration: none;
    text-align: center;
    height: 40px;
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
    vertical-align: top;
    width: 40px;
    user-select: none;
    outline: transparent solid 2px;
    box-shadow: none;
}

.icons_container .icons_container_list .icons_list_item_without_border:hover {
    border: 1px solid rgb(138, 136, 134);
}

.icons_container .icons_container_list .text_list_item {
    font-family: 'Poppins', sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 11px;
    font-weight: 400;
    border: 1px solid rgb(138, 136, 134);
    border-radius: 2px;
    box-sizing: border-box;
    cursor: default;
    display: inline-block;
    padding: 4px 4px;
    text-decoration: none;
    text-align: center;
    height: 40px;
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
    vertical-align: top;
    width: 40px;
    user-select: none;
    outline: transparent solid 2px;
    box-shadow: none;
}

.icons_container .icons_container_list .text_list_item_without_border {
    font-family: 'Poppins', sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 11px;
    font-weight: 400;
    border: 1px solid transparent;
    border-radius: 2px;
    box-sizing: border-box;
    cursor: default;
    display: inline-block;
    padding: 4px 4px;
    text-decoration: none;
    text-align: center;
    height: 40px;
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
    vertical-align: top;
    width: 40px;
    user-select: none;
    outline: transparent solid 2px;
    box-shadow: none;
}

.icons_container .icons_container_list .text_list_item_without_border:hover {
    border: 1px solid rgb(138, 136, 134);
}

/***********************\
| Select and input Group |
\***********************/

.ui_select_input {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: var(--input-border-radius);
    height: 30px !important;
}

.ui_select_input.disabled {
    background-color: #f5f5f5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.ui_select_input.disabled input,
.ui_select_input.disabled textarea {
    background-color: #f5f5f5 !important;
    color: #888 !important;
    cursor: not-allowed !important;
}

.ui_select_input.disabled .dropdown_icon {
    color: #aaa !important;
    cursor: not-allowed !important;
}


#popup-tr-Conditon .ui_select_input {
    width: 225px;
}

#popup-tr-Conditon .ui_select_input input {
    width: 100% !important;
}

.ui_select_input input:disabled {
    opacity: 1;
}

#dialog_content tr#popup-tr-Conditon td {
    overflow: visible !important;
}

.ui_select_input input {
    width: 100%;
    box-sizing: border-box;
    padding-right: 25px;
    height: 30px !important;
}

.ui_select_input textarea {
    resize: none;
    border: 1px solid #e2e5ea !important;
}

.ui_select_input .dropdown_icon {
    position: relative;
    right: 5px;
    top: -16px;
    float: right;
    transform: translateY(-50%);
    cursor: pointer;
    color: #333;
}

.ui_select_input .dropdown_list,
.ui_select_dropdown_list {
    display: none;
    position: fixed;
    width: 100%;
    background: white;
    border: 1px solid #ccc;
    max-height: 200px;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 999999;
    min-width: 200px
}

.ui_select_input .dropdown_list::-webkit-scrollbar,
.ui_select_dropdown_list::-webkit-scrollbar {
    width: 5px;
}

.ui_select_input .dropdown_list li,
.ui_select_dropdown_list li {
    padding: 5px 10px;
    cursor: pointer;
    color: #000;
}

.ui_select_input .dropdown_list li.ui_select_input_selected,
.ui_select_dropdown_list li.ui_select_input_selected {
    background-color: var(--drop-down-active-color);
    color: #fff;
}

.ui_select_input_selected {
    background-color: transparent;
}

.ui_select_input .dropdown_list li:hover,
.ui_select_dropdown_list li:hover {
    background: var(--drop-down-hover-color);
    color: #fff;
}

.ui_select_input .dropdown_list li,
.ui_select_dropdown_list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.option_tag {
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 3px;
    background: #e0e0e0;
    color: #555;
    margin-left: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}


/* text area */
/* UI Mention Wrapper */
.ui_mention_wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

/* Textarea Styling */
.ui_mention_textarea {
    width: 100%;
    min-height: 80px;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    white-space: pre-wrap;
    /* Important for accurate measurements */
    overflow-wrap: break-word;
}

.ui_mention_textarea:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: 0 0 8px rgba(102, 175, 233, 0.6);
}

/* Suggestions Dropdown */
.ui_mention_suggestions {
    position: absolute;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    min-width: 150px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 10000;
    /* Higher z-index */
    margin-top: 5px;
    /* Small gap from text */
}

.ui_mention_suggestions li {
    padding: 8px 12px;
    cursor: pointer;
    list-style: none;
    color: #333;
    transition: background-color 0.2s ease;
}

.ui_mention_suggestions li:hover {
    background-color: #f5f5f5;
}

.ui_mention_suggestions li.ui_select_input_selected {
    background-color: #e6e6e6;
}

/* Mention Highlight in Text */
.ui_mention_highlight {
    background-color: #e6f3ff;
    color: #0066cc;
    padding: 0 2px;
    border-radius: 2px;
}

/* Readonly State */
.ui_mention_textarea[readonly] {
    background-color: #f9f9f9;
    cursor: not-allowed;
}

/* Disabled State */
.ui_mention_wrapper.disabled .ui_mention_textarea {
    background-color: #eee;
    color: #999;
    cursor: not-allowed;
}

/* Error State */
.ui_mention_wrapper.error .ui_mention_textarea {
    border-color: #d9534f;
}

.ui_mention_wrapper.error .ui_mention_textarea:focus {
    box-shadow: 0 0 8px rgba(217, 83, 79, 0.6);
}

/* Success State */
.ui_mention_wrapper.success .ui_mention_textarea {
    border-color: #5cb85c;
}

.ui_mention_wrapper.success .ui_mention_textarea:focus {
    box-shadow: 0 0 8px rgba(92, 184, 92, 0.6);
}

/* ============================================================
   Date Format Combobox
   ============================================================ */
.date-combobox {
    position: relative;
    display: block;
    width: 100%;
}

.date-combo-wrap {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
}

.date-combo-wrap:focus-within {
    border-color: #2196f3;
    box-shadow: 0 0 0 1px #2196f3;
}

.date-combo-input {
    flex: 1;
    border: none !important;
    outline: none !important;
    padding: 3px 6px;
    min-width: 0;
    background: transparent;
    font-size: 12px;
    font-family: inherit;
    color: #333;
    width: auto !important;
    /* override popup.css input[type=text]{width:100%} - flex:1 handles sizing */
    box-sizing: border-box;
}

.date-combo-toggle {
    padding: 0 7px;
    cursor: pointer;
    color: #666;
    font-size: 10px;
    border: none;
    background: transparent;
    line-height: 22px;
    flex-shrink: 0;
}

.date-combo-toggle:hover {
    color: #222;
}

/* Body-appended dropdown */
.date-combo-dropdown-body {
    display: none;
    position: fixed;
    z-index: 999999;
    background: #fff;
    border: 1px solid #2196f3;
    border-top: none;
    border-radius: 0 0 3px 3px;
    max-height: 220px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.date-combo-dropdown-item {
    padding: 5px 10px;
    cursor: pointer;
    font-size: 12px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.date-combo-dropdown-item:hover {
    background: #e3f2fd;
    color: #1565c0;
}

.date-combo-dropdown-no-match {
    padding: 5px 10px;
    font-size: 11px;
    color: #999;
    font-style: italic;
    pointer-events: none;
}

/* Validation hint — hidden when empty so it doesn't add row height */
.date-combo-hint {
    display: block;
    font-size: 10px;
    padding: 1px 2px;
    line-height: 1.4;
}

.date-combo-hint:empty {
    display: none;
}

.date-hint-valid {
    color: #4caf50;
}

.date-hint-custom {
    color: #ff9800;
}

/* Input error state */
.date-combo-input.date-format-error {
    background: #fff0f0;
}

.date-hint-error {
    color: #e53935;
}

.row-col-map-dialog .ui_select_input {
    width: auto;
}
/* layout.css*/
@font-face {
	font-family: 'Tanker-Normal';
	src: url('fonts/Tanker-Normal.woff2') format('woff2'),
		url('fonts/Tanker-Normal.woff') format('woff'),
		url('fonts/Tanker-Normal.ttf') format('truetype');
	font-weight: 400;
	font-display: swap;
	font-style: normal;
}

@font-face {
	font-family: 'Poppins';
	src: url('fonts/Poppins-Normal.ttf') format('truetype');
	font-weight: 400;
	font-display: swap;
	font-style: normal;
}

@font-face {
	font-family: 'Poppins';
	src: url('fonts/Poppins-Bold.ttf') format('truetype');
	font-weight: 700;
	font-display: swap;
	font-style: bold;
}

@font-face {
	font-family: 'Poppins';
	src: url('fonts/Poppins-BoldItalic.ttf') format('truetype');
	font-weight: 700;
	font-display: swap;
	font-style: italic;
}

@font-face {
	font-family: 'Poppins';
	src: url('fonts/Poppins-Italic.ttf ') format('truetype');
	font-weight: 400;
	font-display: swap;
	font-style: italic;
}

.title_bar_area {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.title_bar_actions {
	height: 100%;
	width: 26%;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.app_logo {
	z-index: 100;
	height: 100%;
	width: 114px;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0px;
	gap: 3px;
	justify-content: center;
	background: var(--menu-background-color);
}

.app_logo span {
	font-size: 16px;
	font-weight: 400;
	line-height: 18.9px;
	font-family: 'Tanker-Normal';
	color: var(--logo-color);
	line-height: 100%;

}

.app_actions {
	width: 104px;
	height: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;
	margin-right: 25px;
}

.app_actions .app_list {
	flex: 1;
	height: 100%;
	display: flex;
	align-items: center;
	flex-direction: row;
}

.app_actions .app_list .app_list_menu {
	background: url(images/icons/apps.svg) no-repeat center center;
	width: 24px;
	height: 24px;
	display: inline-block;
	cursor: pointer;
}

.canvas_page_title {
	position: absolute;
	height: 24px;
	top: -24px;
}

.canvas_page_title .temp_close_button {
	background: url(images/icons/close_x.png) no-repeat center;
	border: none;
	color: var(--file-name-color);
	width: 24px;
	height: 24px;
}

.template_name {
	background: transparent;
	border: none;
	color: var(--file-name-color);
	box-shadow: none !important;
	padding: 0 !important;
	/* text-overflow: ellipsis;
    width: 100px;
    white-space: nowrap;
    overflow: hidden; */
}

.component_name {
	height: 25px;
	border-bottom: 1px solid #ccc;
	display: flex;
	flex-direction: row;
}

.component_name .component_text {
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden !important;
	text-overflow: ellipsis;
	width: 50%;
	display: inline-block;
}

.component_comments {
	height: 50px;
	padding: 5px 0px 5px 0px;
	display: flex;
	flex-direction: row;
}

.component_comments .component_textarea {
	height: 100%;
	flex: 1;
	padding: 5px;
	z-index: 9000;
}


#toggle_data ul {
	list-style-type: none;
	margin-left: -8px;
}

.dm_text_width {
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden !important;
	text-overflow: ellipsis;
	width: 150px;
}

.highcharts-credits {
	display: none;
}

.caret1 {
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.caret1::before {
	content: "\25B6";
	color: black;
	display: inline-block;
	margin-right: 6px;
}

.caret1-down::before {
	-ms-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}

.dm-caret1 {
	background: url(images/icons/collapse.png) no-repeat center;
	width: 16px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	flex-direction: row;
	margin: 0;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	float: left !important;
}

.dm-caret1::before {
	background: url(images/icons/collapse.png) no-repeat center;
	width: 16px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	flex-direction: row;
	margin: 0;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	float: left !important;
}

.dm-caret1-down {
	background: url(images/icons/expand.png) no-repeat center;
	width: 16px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	flex-direction: row;
	margin: 0;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	float: left !important;
}

.action_attributes_tab {
	display: flex;
	align-items: center;
}

.nested1 {
	display: none;
}

.nested2 {
	display: none;
}

.active {
	display: block;
}

.cw-step.active {
	display: flex;
}

.dm-nested1 {
	display: none;
}

.dm-nested2 {
	display: none;
}

.dm-active {
	display: block;
}

/* gui layers */
.gui-caret {
	background: url(images/icons/collapse.png) no-repeat center;
	width: 5%;
	height: 40px;
	display: inline-flex;
	align-items: center;
	flex-direction: row;
	margin: 0;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	float: left !important;
	filter: var(--menu-icons-filter);
}

.active_layer {
	background-color: #CCE7E5 !important;
}

.active_layer .layer_button {
	/*background-color: #CCE7E5 !important;*/
	border: none;
}

.gui-caret::before {
	background: url(images/icons/collapse.png) no-repeat center;
	width: 5%;
	height: 40px;
	display: inline-flex;
	align-items: center;
	flex-direction: row;
	margin: 0;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	float: left !important;
	filter: var(--menu-icons-filter);
}

.gui-caret-down {
	background: url(images/icons/expand.png) no-repeat center;
	width: 5%;
	height: 40px;
	display: inline-flex;
	align-items: center;
	flex-direction: row;
	margin: 0;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	float: left !important;
	filter: var(--menu-icons-filter);
}

.gui-nested {
	display: none;
}

.gui-active {
	display: block;
}

/* gui pages */
.page-caret {
	background: url(images/icons/collapse.png) no-repeat center;
	width: 5%;
	height: 40px;
	display: inline-flex;
	align-items: center;
	flex-direction: row;
	margin: 0;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	float: left !important;
	filter: var(--menu-icons-filter);
}

.page-caret::before {
	background: url(images/icons/collapse.png) no-repeat center;
	width: 5%;
	height: 40px;
	display: inline-flex;
	align-items: center;
	flex-direction: row;
	margin: 0;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	float: left !important;
	filter: var(--menu-icons-filter);
}

.page-caret-down {
	background: url(images/icons/expand.png) no-repeat center;
	width: 5%;
	height: 40px;
	display: inline-flex;
	align-items: center;
	flex-direction: row;
	margin: 0;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	float: left !important;
	filter: var(--menu-icons-filter);
}

.page-nested {
	display: none;
}

.page-active {
	display: block;
}

mark {
	background: orange;
	color: black;
}

.wrapper {
	display: -ms-grid;
	display: grid;
	margin: 0;
	position: fixed;
	/* dont change it, vh does not work on mobiles with bottom footer */
	top: 0;
	right: 0;
	left: 0;
	bottom: 5px;
	height: 100vh;
	overflow: hidden;
	-ms-grid-rows: auto 1fr;
	grid-template-rows: 40px 40px auto 1fr;
	-ms-grid-columns: auto 1fr auto;
	grid-template-columns: auto 1fr auto;
	grid-template-areas:
		"header header header"
		"navbar navbar navbar"
		"submenu submenu submenu"
		"sidebar_left main sidebar_right";
}

.trn {}

[data-tab-info] {
	display: none;
	margin-top: 15px;
}

.active[data-tab-info] {
	display: block;
}

.tab-content {

	color: var(--text-color);
	flex: 1;
	overflow: auto;

}

.tab-content::-webkit-scrollbar {
	width: 5px !important;
	height: 5px !important;
}

#data-mapper-myUL {
	margin: 0 !important;
}

#data-mapper-myUL li {
	padding-left: 25px;
}

.tabs {

	background: var(--tab-color-sidebar);
	display: inline;
	z-index: 99;
	width: 298px;
	font-size: 15px;
	padding: 0;
	font-family: 'Poppins', sans-serif;
	;
	display: flex;
	overflow-x: auto;
	/* border-top: 1px solid #ccc; */
	border-bottom: 1px solid #ccc;
	height: 40px;
}

.tabs__tab {
	margin: 0 !important;
}

.tabs::-webkit-scrollbar {
	height: 5px;
}

/*position:relative;
display:inline-block;
margin-right:-4px;
white-space:normal;
vertical-align:top;
*display:inline;
width:470px;
height:380px;*/
.tabs ul li {
	background: var(--tab-color-sidebar);
	color: var(--side-bar-non-active-tab-text-color);
	vertical-align: middle;
	font-size: 14px;
	cursor: pointer;
	/* width: 112px; */
	position: relative;
	display: inline-block;
	white-space: nowrap;
	width: auto;
	font-weight: 500;
	line-height: 21px;
}

.tabs span:hover {

	background: #484c50;

	padding: 15px;

	cursor: pointer;

	text-align: center;

	min-width: 142px;

	display: inline-block;

	/* float: left;*/

}

.tabs ul {
	margin: 0px !important;
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	padding: 5px 5px 5px 16px !important;
	gap: 15px;
	height: 100%;
}

.tabs ul li.active {

	background: var(--active-sidebar-tab-color);


	color: var(--active-sidebar-tab-text-color);
	font-weight: 600;

}

.html_value {
	display: block;
}

/* .active{

    background: #abe1ae;

    padding: 15px;

    color: #000;

} */

/*.tabs {
	font-size: 25px;
	
	color: rgb(255, 255, 255);
	display: flex;
	
	margin: 0;
}
  
.tabs span {
	background: rgb(85, 85, 85);
	padding: 5px;
	width:143px;
	border: 1px solid rgb(255, 255, 255);
}
  
.tabs span:hover {
	background: rgb(162, 159, 159);
	cursor: pointer;
	color: black;
}*/
.toggle {
	cursor: pointer;
}

.hidden {
	display: none;
}

.center {
	text-align: center;
}

.pointer {
	cursor: pointer;
}

.clear {
	clear: both;
}

.displayBlock {
	display: block;
}

.bold {
	font-weight: bold;
}

.left {
	float: left;
}

.right {
	float: right;
}

.grey {
	color: grey;
}

.noselect {
	-webkit-touch-callout: none;
	/* iOS Safari */
	-webkit-user-select: none;
	/* Safari */
	-khtml-user-select: none;
	/* Konqueror HTML */
	-moz-user-select: none;
	/* Firefox */
	-ms-user-select: none;
	/* Internet Explorer/Edge */
	user-select: none;
	/* Non-prefixed version */
}

.block {
	position: relative;
	background-color: rgba(255, 255, 255, 0.2);
	background-color: var(--block-background-color);
	margin-bottom: 10px;
	user-select: none;
	border-radius: 4px;
}

.sidebar_right .block {
	background-color: #68727b;
	background-color: var(--block-background-color);
	border-bottom: none;
	box-shadow: 0 -2px 0 0 var(--header-background-color) inset;
}

.sidebar_right .details {
	border-radius: 0 !important;
}

.block:last-child {
	margin-bottom: 0;
}

.block h2 {
	position: relative;
	padding: 2px 5px 2px 6px;
	margin: 0;
	font-size: 12px !important;
	font-weight: normal;
	background-color: rgba(255, 255, 255, 0.3);
	background-color: var(--header-background-color);
	border-bottom: 1px solid #ccc;
	border-radius: 4px 4px 0 0;
	color: var(--text-color);
}

.block.toggled h2,
.block h2.toggled:after {
	border: none;
}

.block h2.toggle:before {
	/* icon */
	position: absolute;
	content: '';
	width: 0;
	height: 0;
	right: 10px;
	top: 10px;
	border-style: solid;
	border-width: 0 4px 5px 4px;
	border-color: transparent transparent var(--text-color-muted) transparent;
}

.block h2.toggled:before {
	/* icon */
	border-width: 5px 4px 0 4px;
	border-color: var(--text-color-muted) transparent transparent transparent;
}

.block .content {
	padding: 7.5px 5px;
	border-bottom: 1px solid #ccc;
}

.content .menu_dropdown {
	display: flex;
	flex-direction: column;
	position: fixed;
	list-style: none;
	padding: 0;
	margin: 0;
	overflow-x: hidden;
	overflow-y: auto;
	min-width: 150px;
	box-shadow: 0 0 0 1px var(--menu-dropdown-border-color);
	background: var(--menu-dropdown-background-color);
}

.block_section {
	margin: .75rem 0;
}

.block_section:first-child {
	margin-top: 0;
}

.block_section:last-child {
	margin-bottom: 0;
}

.error {
	padding: 20px;
	margin: 10px;
	border: 1px solid #ff0000;
	background-color: #ffffff;
	width: 500px;
	font-weight: bold;
}

/* color chooser */
body .sp-replacer {
	width: 100%;
	height: 40px;
}

body .sp-preview {
	width: calc(100% - 20px);
	height: 100%;
}

/* ========== header ======================================================== */

.logo {
	position: relative;
	display: inline-block;
	height: 30px;
	width: 116px;
	padding: 5px 5px 5px 36px;
	margin: 5px;
	font-size: 14px;
	text-decoration: none;
	font-weight: bold;
	color: #ffffff;
	color: var(--text-color);
}

.logo:after {
	position: absolute;
	content: "";
	left: 0;
	top: 0;
	width: 31px;
	height: 30px;
	background: url('images/logo.svg') no-repeat center center;
	background-size: auto 28px;
	filter: var(--mobile-menu-toggle-filter);
}

.logo:hover:after {
	left: 2px;
}

.about-logo {
	margin-left: -1%;
}

.about-name {
	font-size: 15px;
	font-weight: bold;
}

.undo_button {
	display: none;
	width: 50px;
	height: 50px;
	top: 0;
	border: 0;
	outline: none;
	cursor: pointer;
	filter: var(--mobile-menu-toggle-filter);
	background: url(images/icons/undo.svg) no-repeat center center;
	background-size: auto 25px;
	margin-left: 10px;
}

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

@media screen and (max-width: 700px) {
	.undo_button {
		display: block;
	}
}

/* header */
.header {
	-ms-grid-row: 1;
	-ms-grid-column: 1;
	-ms-grid-column-span: 3;
	grid-area: header;
	display: flex;
	flex-direction: column;
	background-color: rgba(255, 255, 255, 0.2);
	background-color: var(--section-background-color);
	overflow: hidden;
	/* margin-bottom: 5px; */
	margin-top: 0px;
	border-bottom: 1px solid #d7d7d7 !important;
}

/* navbar */
.navbar_area {
	-ms-grid-row: 1;
	-ms-grid-column: 1;
	-ms-grid-column-span: 3;
	grid-area: navbar;
	display: flex;
	flex-direction: row;
	background-color: rgba(255, 255, 255, 0.2);
	background-color: var(--section-background-color);
	overflow: visible !important;
	/* margin-bottom: 5px; */
	margin-top: 0px;
	border-bottom: 1px solid #d7d7d7 !important;
	align-items: center;
	position: relative;
}

/* mouse details */
.mouse_details {
	position: absolute;
	left: 20px;
	bottom: 0;
}

/* ========== sub-header ==================================================== */

.submenu {
	-ms-grid-row: 1;
	-ms-grid-column: 1;
	-ms-grid-column-span: 3;
	grid-area: submenu;
	display: flex;
	flex-direction: row;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.2);
	background-color: var(--section-background-color);
	overflow: hidden;
	/* margin-bottom: 5px; */
	margin-top: 0px;
	border-bottom: 1px solid #d7d7d7 !important;
}

.attributes {
	margin: 0 !important;
	display: flex;
	flex-wrap: nowrap;
	background-color: var(--attibute-background-color);
	width: 100%;
	/*calc(100% - 125px);*/
	/* margin-top: 5px;
	margin-bottom: 5px !important; */
	padding: 8px 16px;
	;
	border: 0;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	height: 96px;
}

.attributes::-webkit-scrollbar {
	height: 5px;
}

.attributes .item {
	display: inline-flex;
	align-items: center;
	margin-right: 20px;
}

.attributes .item>label {
	margin: 0 .5rem 0 0;
}

.attributes input[type="number"] {
	width: 45px;
	margin-right: 5px;
}

.attributes input[type="color"] {
	cursor: pointer;
	padding: 0;
	border: .2rem solid var(--input-background-color);
	width: 3rem;
}

.attributes .item>button:not(.ui_icon_button) {
	display: inline-block;
	padding: 3px 10px;
}

.more_tools {
	position: absolute;
	background: url(images/icons/Polygon_ic.png) no-repeat center;
	bottom: 0;
	right: 0;
	height: 4px;
	width: 4px;
}

/* ========== left sidebar ================================================== */

.sidebar_left {
	border-right: 1px solid #ccc;
	-ms-grid-row: 2;
	-ms-grid-column: 1;
	grid-area: sidebar_left;
	display: flex;
	flex-direction: column;
	background-color: var(--section-background-color);
	overflow: hidden;
	align-self: start;
	width: 48px;
	overflow-y: auto;
	max-height: 100%;
	height: 100%;
}

.sidebar_left .item {
	position: relative;
	display: block;
	/* background-color: var(--area-background-color); */
	height: 25px;
	width: 30px;
	margin: 5px 0 0 5px;
	overflow: hidden;
	cursor: pointer;
}

.sidebar_left .item:after {
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	filter: var(--menu-icons-filter);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 20px 20px;
}

.sidebar_left .item:hover {
	background-color: var(--background-color-hover);
}

.sidebar_left .item.active {
	background-color: var(--background-color-active);
	color: var(--text-color-active);
}

/* .sidebar_left .item.active:after{
	filter: var(--menu-icons-filter-active);
} */

/*
IMPORTANT: any new icon should also must be added on /service-worker.js + its version should be updated !!!
 */
.sidebar_left .select:after {
	background-image: url('images/icons/selector_tool.svg');
}

.sidebar_left .selection:after {
	background-image: url('images/icons/selection.svg');
}

.sidebar_left .brush:after {
	background-image: url('images/icons/brush.svg');
}

.sidebar_left .pencil:after {
	background-image: url('images/icons/pencil.svg');
}

.sidebar_left .pick_color:after {
	background-image: url('images/icons/pick_color.svg');
}

.sidebar_left .erase:after {
	background-image: url('images/icons/erase.svg');
}

.sidebar_left .magic_erase:after {
	background-image: url('images/icons/magic_erase.svg');
}

.sidebar_left .fill:after {
	background-image: url('images/icons/fill.svg');
}

.sidebar_left .image:after {
	background-image: url('images/icons/image_ic.svg');
}

.sidebar_left .shape:after {
	background-image: url('images/icons/rectangle_ic.svg');
}

.sidebar_left .line:after {
	background-image: url('images/icons/line_ic.svg');
	background-size: 24px auto;
}

.sidebar_left .arrow:after {
	background-image: url('images/icons/arrow_right.svg');
	background-size: 24px auto;
}

.sidebar_left .rectangle:after {
	background-image: url('images/icons/rectangle_ic.svg');
	background-size: 16px auto;
}

.sidebar_left .ellipse:after {
	background-image: url('images/icons/circle_ic.svg');
	background-size: 16px auto;
}

.sidebar_left .text:after {
	background-image: url('images/icons/text_ic.svg');
	background-size: 14px auto;
}

/* .sidebar_left .richtext:after{ background-image: url('images/icons/richtext.svg'); background-size: 18px auto; } */
.sidebar_left .table:after {
	background-image: url('images/icons/table_ic.svg');
	background-size: 22px auto;
}

.sidebar_left .charts:after {
	background-image: url('images/icons/pie_ic.svg');
	background-size: 20px auto;
}

.sidebar_left .barcodes:after {
	background-image: url('images/icons/barcode_scanner.svg');
	background-size: 20px auto;
}

.sidebar_left .frame:after {
	background-image: url('images/icons/iframe.svg');
	background-size: 24px auto;
}

.sidebar_left .gradient:after {
	background-image: url('images/icons/gradient.png');
	background-size: 18px 12px;
	filter: none;
}

.sidebar_left .clone:after {
	background-image: url('images/icons/clone.svg');
}

.sidebar_left .crop:after {
	background-image: url('images/icons/crop.svg');
}

.sidebar_left .blur:after {
	background-image: url('images/icons/blur.svg');
}

.sidebar_left .sharpen:after {
	background-image: url('images/icons/sharpen.svg');
}

.sidebar_left .desaturate:after {
	background-image: url('images/icons/desaturate.svg');
}

.sidebar_left .bulge_pinch:after {
	background-image: url('images/icons/bulge_pinch.svg');
}

.sidebar_left .animation:after {
	background-image: url('images/icons/animation.svg');
}

.sidebar_left .bringBack:after {
	background-image: url('images/back.png');
}

.sidebar_left .bringFront:after {
	background-image: url('images/front.png');
}

.sidebar_left .complexobject:after {
	background-image: url('images/icons/complex.svg');
	background-size: 20px auto;
}

.sidebar_left .simpleobjects:after {
	background-image: url('images/icons/simple.svg');
	background-size: 20px auto;
}

.sidebar_left .interactive_shapes:after {
	background-image: url('images/icons/select_ic.svg');
	background-size: 20px auto;
}


/* .sidebar_left .checkbox:after{ background-image: url('images/icons/checkbox.png'); background-size: 20px auto; }
.sidebar_left .radio:after{ background-image: url('images/icons/radio_ic.png'); background-size: 20px auto; }
.sidebar_left .button:after{ background-image: url('images/icons/button_ic.png'); background-size: 20px auto; }
.sidebar_left .dropdown:after{ background-image: url('images/icons/dropdown_ic.png'); background-size: 20px auto; }
.sidebar_left .input_field:after{ background-image: url('images/icons/input_ic.png'); background-size: 20px auto; } */
@media screen and (max-width:550px) {
	#sidebar_left {
		left: -110px;
	}
}

/* ========== right sidebar ================================================= */

.sidebar_right {
	-ms-grid-row: 2;
	-ms-grid-column: 3;
	grid-area: sidebar_right;
	z-index: 2;
	transition: 0.2s;
	margin: 0;
	width: 300px;
	background: var(--side-bar-color);
	border: 1px solid #D9D9D9;
	overflow: hidden;
	border-top: none !important;
}

.sidebar_right.active {
	right: 0 !important;
}

.sidebar_right .block.layers {
	flex: 1;
	pointer-events: none;
}

.sidebar_right .block.layers .content {
	padding-bottom: 25px;
}

.sidebar_right .tabs_section {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

.sidebar_right .suggestions_section {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	padding: 10px;
}

.suggestions_original_text {
	display: flex;
	flex-direction: column;
	height: 15%;
}

.suggestions_original_text_title {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.sidebar_right .suggestions_section .suggestions_original_text .suggestions_original_text_title span {
	font-size: 16px;
	font-weight: 500;
}

.sidebar_right .suggestions_section .suggestions_original_text .suggestions_original_text_title .close_suggestions {
	padding: 5px;
	line-height: 0.5;
	font-size: 16px;
	border: none;
	background: none;
	z-index: 1;
	background: url(images/icons/close.svg) no-repeat center;
	height: 24px;
	width: 24px;
	border-radius: 0;
	box-shadow: none;
}

.sidebar_right .suggestions_section .suggestions_original_text .suggestions_original_text_title .close_suggestions:hover {
	border: 1px solid #ccc;
	border-radius: 4px;
}

.sidebar_right .suggestions_section .suggestions_original_text .suggestions_original_text_container {
	width: 100%;
	border: 1px solid #ccc;
	height: 60px;
	border-radius: 4px;
	padding: 5px;
}

.sidebar_right .suggestions_section .suggestions_original_text .suggestions_original_text_container:hover {
	border: 1px solid var(--brand-color);
}

.sidebar_right .suggestions_section .suggestions_original_text .suggestions_original_text_container p {
	width: 100%;
	cursor: pointer;
	height: 100%;
	margin: 0px;
	white-space: normal;
	text-overflow: ellipsis !important;
	overflow: hidden !important;
}

.sidebar_right .suggestions_section .suggestions_texts {
	height: 85%;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.sidebar_right .suggestions_section .suggestions_texts .suggestions_text_title {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	height: 5%;
}

.sidebar_right .suggestions_section .suggestions_texts .suggestions_text_title span {
	font-size: 16px;
	font-weight: 500;
}

.sidebar_right .suggestions_section .suggestions_texts .suggestions_list {
	overflow: auto;
	height: 95%;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

/* loader */
.sidebar_right .suggestions_section .suggestions_texts .suggestions_list-loader {
	border: 2px solid #ccc;
	border-top: 2px solid var(--brand-color);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	animation: spin 1s linear infinite;
}

.sidebar_right .suggestions_section .suggestions_texts .suggestions_list-loader-container {
	width: 100%;
	height: 95%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
}

.sidebar_right .suggestions_section .suggestions_texts .suggestions_list::-webkit-scrollbar {
	width: 5px;
}

.sidebar_right .suggestions_section .suggestions_texts span {
	font-size: 16px;
	font-weight: 500;
}

.sidebar_right .suggestions_section .suggestions_texts .suggestions_text_container {
	width: 100%;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 5px;
}

.sidebar_right .suggestions_section .suggestions_texts .suggestions_text_container:hover {
	border: 1px solid var(--brand-color);
}

.sidebar_right .suggestions_section .suggestions_texts .suggestions_text_container p {
	width: 100%;
	cursor: pointer;
	height: 100%;
	margin: 0px;
	white-space: normal;
	text-overflow: ellipsis !important;
	overflow: hidden !important;
}

/* preview */
.canvas_preview_wrapper {
	position: relative;
	height: 100px;
	margin: 5px 5px 10px 5px;
}

.canvas_preview_details {
	padding: 0 5px;
}

.canvas_preview_details button {
	margin: 0;
}

.preview canvas {
	cursor: pointer;
}

.details input {
	padding: 5px 10px;
}

.zoom_details {
	display: flex;
	position: absolute;
	bottom: 15px;
	right: 15px;
	z-index: 100;
	flex-direction: row;
	gap: 4px;
	visibility: hidden;
}

.zoom_details button {
	margin: 0;
}

/* color */
.color_area {
	border: 1px solid #444;
	width: calc(100% - 10px);
	height: 40px;
	cursor: pointer;
	margin: 5px;
}

/* layers */
.layers_list {
	/*margin-top: 10px;*/
}

#grouped_layers_base {
	position: relative;
	margin-left: 10px;
	border-top: 1px solid #ccc;
}

.layers_arrow {
	display: inline-block;
	/*float:right;*/
	margin-left: 5px;
	padding: 1px 8px;
	border: 1px solid #444;
	border-color: var(--border-color);
	text-decoration: none;
	color: var(--text-color);
	font-size: 12px;
}

.layer_add {
	display: inline-block;
	padding: 1px 8px;
	margin-right: 10px;
	font-size: 12px !important;
	background-color: #FFFFFF;
	/* background-color: var(--background-color-active); */
	border: 1px solid #444;
	border-color: var(--border-color);
	color: #000;
	cursor: pointer;
	text-decoration: none;
}

.layer_delete {
	display: inline-block;
	padding: 1px 8px;
	margin-right: 10px;
	font-size: 12px !important;
	background-color: #d18058;
	border: 1px solid #444;
	border-color: var(--border-color);
	color: var(--text-color-active);
	cursor: pointer;
	text-decoration: none;
}

.layers_list .item {
	margin-bottom: 2px;
}

.layers_list .layer_name {
	padding: 1px 5px 3px 5px;
	/* width: calc(100% - 110px); */
	width: 130px;
	text-align: left;
	overflow: hidden;
	/*background-color:#989898;*/
	/*background-color:#989898/*var(--area-background-color);*/
	;
	background-color: transparent;
	border-color: var(--border-color);
	border-radius: 3px;
	cursor: pointer;
	overflow: hidden;
	font-size: 12px;
	color: var(--text-color);
	white-space: nowrap;
	font-weight: 500;
	text-overflow: ellipsis;
}

.layer_list .layer_name button,
input[type="button"] {
	box-shadow: none;
}

.active_object {
	color: #FFFFFF !important;
	background-color: var(--brand-color) !important;
}

.active_object .actionicon,
.active_object .delete,
.active_object .visibility {
	background-color: #FFFFFF !important;
}

.active_object .layer_name {
	color: #FFFFFF !important;
}

.active_menu_item {
	background: var(--tab-active-color) !important;
	box-shadow: none;
	color: black !important;
}

.active_action {
	filter: none !important;
}

.layers_list .item.shorter .layer_name {
	width: calc(100% - 63px);
}

.layers_list .item.active .layer_name {
	background-color: var(--background-color-active);
	color: var(--text-color-active);
}

.layers_list .arrow_down {
	position: relative;
	float: left;
	margin-right: 5px;
	width: 10px;
	height: 19px;
	opacity: 0.4;
}

.layers_list .arrow_down:after {
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	filter: var(--menu-icons-filter);
	background: url('images/icons/arrow-down.svg') no-repeat center center;
	background-size: 12px auto;
}

.layers_list .visible {
	mask: url(images/icons/visible.svg) no-repeat center !important;
	-webkit-mask: url(images/icons/visible.svg) no-repeat center !important;
	-webkit-mask-size: contain !important;
	mask-size: contain !important;
	background-color: #5F6368;
}

.layers_list .visibility {
	position: relative;
	float: left;
	cursor: pointer;
	padding: 0px 3px 0px 3px;
	/* margin-right: 5px; */
	width: 16px;
	height: 16px;
	border: none;
	mask: url(images/icons/visibility_off.svg) no-repeat center;
	-webkit-mask: url(images/icons/visibility_off.svg) no-repeat center;
	-webkit-mask-size: contain;
	mask-size: contain;
	background-color: #5F6368;
	box-shadow: none;
}

.layers_list .visibility:after {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	filter: var(--menu-icons-filter);
	background: url(images/icons/eye_icon.png) no-repeat center;
	background-size: 18px auto;
}

#data-mapper-myUL .delete {
	/*float: right; */
	cursor: pointer;
	width: 12px;
	height: 19px;
	background: transparent url(images/icons/del_icon.svg) no-repeat center center;
}

#data-mapper-myUL .dm_rename_cmp_button {
	/*float: right; */
	cursor: pointer;
	width: 12px;
	height: 12px;
	background: transparent url(images/icons/rename.svg) no-repeat center center;
}

#data-mapper-myUL .objects {
	height: 28px;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 5px;
	justify-content: space-between;
	border-bottom: 1px solid #ccc;
	cursor: pointer;
	user-select: none;
	/* standard syntax */
	-webkit-user-select: none;
	/* webkit (safari, chrome) browsers */
	-moz-user-select: none;
	/* mozilla browsers */
	-khtml-user-select: none;
	/* webkit (konqueror) browsers */
	-ms-user-select: none;
	/* IE10+ */
}

.master_template_objects {
	border-left: 4px solid #0F467C;
	border-radius: 6px;
}

.master_template_object_indicator {
	font-size: 14px;
	color: #0F467C;
	font-weight: bold;
	padding: 2px 6px;
	border-radius: 4px;
	background: #eef2ff;
	color: #0F467C;
}

.child_template_objects {
	border-left: 4px solid #00C4FF;
	border-radius: 6px;
}

.child_template_object_indicator {
	font-size: 14px;
	color: #00C4FF;
	font-weight: bold;
	padding: 2px 6px;
	border-radius: 4px;
	background: #eef2ff;
	color: #00C4FF;
}

.master_template_object_indicator_aligment {
	height: 100%;
	display: inline-flex;
	align-items: center;
	float: right;
}

.master_template_disable_item,
.disable_mouse_events {
	opacity: 0.5;
	pointer-events: none;
}

/* #RawComplexObj .delete{
	float: right;
    cursor: pointer;
    padding: 3px 18px 2px 3px;
    width: 12px;
    height: 19px;
    margin-left: 5px;
    background: transparent url(images/icons/delete.svg) no-repeat center center;
    background-size: 10px 10px;
    border: none;
    box-shadow: none;
} */
.layers_list .greenicon {
	position: relative;
	float: left;
	padding: 0px 3px 0px 3px;
	/* margin-right: 5px; */
	width: 20px;
	height: 19px;
	border: none;
	box-shadow: none;
	z-index: 0;
	cursor: pointer;
}

.a_icon {
	/* position: absolute;  */
	/* right: 15px; */
	padding: 0px 0px 4px 0px;
	width: 40%;
	height: 20px;
	border: none;
	box-shadow: none;
	filter: var(--menu-icons-filter);
	cursor: pointer !important;
	font-size: 15px;
	font-weight: 500;

}

.actionicon {
	/* position: absolute;  */
	/* right: 15px; */
	width: 40%;
	height: 20px;
	border: none;
	box-shadow: none;
	filter: var(--menu-icons-filter);
	cursor: pointer !important;
	font-size: 15px;
	font-weight: 500;
	mask: url(images/icons/more_vert.svg) no-repeat center;
	-webkit-mask: url(images/icons/more_vert.svg) no-repeat center;
	-webkit-mask-size: contain;
	mask-size: contain;
	display: inline-block;
	background-color: #5F6368;
}

.page_count_title {
	height: 28px;
	position: relative;
	display: flex;
	align-items: center;
}

.page_count_title .addicon {
	/* position: absolute;
    right: 4px; */
	padding: 0px 0px 4px 0px;
	width: 18px;
	height: 20px;
	border: none;
	box-shadow: none;
	background: url(images/icons/plus_ic.svg) no-repeat center center;
	filter: var(--menu-icons-filter);
	cursor: pointer !important;
}

.page_count_title .delete {
	cursor: pointer;
	padding: 3px 18px 2px 3px;
	width: 12px;
	height: 19px;
	margin-left: 5px;
	background: transparent url(images/icons/del_icon.svg) no-repeat center center;
	border: none;
	box-shadow: none;
	float: right;
}

.layers_list .page_nav_prev_button {
	position: absolute;
	right: 60px;
	height: 20px;
	bottom: 1px;
	border-radius: 12px;
	background: transparent;
	box-shadow: none;
	border: none;
	font-size: 18px;
}

.layers_list .page_nav_next_button {
	position: absolute;
	right: 5px;
	height: 20px;
	bottom: 1px;
	border-radius: 12px;
	background: transparent;
	box-shadow: none;
	border: none;
	font-size: 18px;
}


.layers_list .delete {
	/* float: right; */
	cursor: pointer;
	padding: 0px 3px 0px 3px;
	width: 50%;
	height: 19px;
	/* margin-left: 5px; */
	mask: url(images/icons/del_icon.svg) no-repeat center center;
	-webkit-mask: url(images/icons/del_icon.svg) no-repeat center center;
	-webkit-mask-size: contain;
	mask-size: contain;
	/* border: none; */
	/* box-shadow: none; */
	/* position: relative; */
	/* right: 5px; */
	background-color: #5F6368;
}

/* filters */
.layers_list .filters {
	margin-bottom: 5px;
}

.layers_list .filter {
	margin-bottom: 2px;
	margin-left: 30px;
	opacity: 0.7;
}

.layers_list .filter .layer_name {
	position: relative;
}

.layers_list .filter .layer_name:after {
	position: absolute;
	content: "fx";
	right: -4px;
	top: 1px;
	bottom: 0;
	width: 20px;
}

.sidebar_right .label {
	display: inline-block;
	width: 115px;
}

.info .toggle.toggled {
	margin-bottom: -3px;
}

.block.details .row {
	clear: both;
	margin-bottom: 2px;
}

.block.details input[type="number"] {
	width: 70px;
	padding: 3px 5px;
	height: 23px;
}

.block.details select {
	width: calc(100% - 120px);
	height: 23px;
}

.block.details button {
	width: calc(100% - 70px);
	height: 23px;
	border: 1px solid #444;
}

.block.details button.reset {
	position: relative;
	width: 25px;
	overflow: hidden;
	opacity: 0.5;
	color: transparent;
}

.block.details button.reset:after {
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	background: url(images/icons/refresh.svg) no-repeat center center;
	background-size: auto 14px;
	filter: var(--menu-icons-filter);
}

.block.details button.active {
	background-color: var(--background-color-active);
	color: var(--text-color-active);
}

.block.details .dflex_row_center {
	display: flex;
	align-items: center;
	flex-direction: row;
	gap: 3px;
}

.details_configuration_icon {
	background: url(images/icons/configuration_ic.png) no-repeat center center;
}

@media screen and (max-width:700px) {
	body {
		padding-top: 50px;
	}

	.wrapper {
		top: 50px;
	}

	.sidebar_left {
		position: absolute;
		left: -90px;
		background: var(--background);
	}

	.sidebar_left.active {
		box-shadow: -5px 0px 10px 0px rgba(0, 0, 0, 0.75);
		left: 0;
		z-index: 3;
	}

	.sidebar_right {
		position: absolute;
		height: 100%;
		right: -210px;
		background: var(--background);
	}

	.sidebar_right.active {
		box-shadow: -5px 0px 10px 0px rgba(0, 0, 0, 0.75);
		right: 0;
		margin-right: 0;
	}
}

/* ========== content ======================================================= */

.ruler_left {
	display: none;
	position: absolute;
	left: 0;
	top: 50px;
	background-color: #ccc;
}

.ruler_top {
	display: none;
	position: absolute;
	left: 32px;
	top: 0;
	background-color: #ccc;
}

.ruler_top_onhide {
	position: absolute;
	left: 20px;
	top: 0;
	background-color: #ccc;
}

.middle_area {
	position: relative;
	-ms-grid-row: 2;
	-ms-grid-column: 2;
	grid-area: main;
	z-index: 1;
}

.main_wrapper {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #F5F5FA;
}

.middle_area.has-ruler .main_wrapper {
	top: 20px;
	left: 20px;
}

.canvas_wrapper {
	position: relative;
	z-index: 99;
}

.canvas_wrapper canvas {
	position: absolute;
	box-sizing: content-box;
	font-kerning: normal !important;
}

.loaded .canvas_wrapper canvas {
	border: 1px solid var(--border-color);
}

#mouse {
	position: absolute;
	pointer-events: none;
	width: 10px;
	height: 10px;
	z-index: 10;
}

#mouse.rect {
	border: 1px solid rgba(0, 0, 0, 0.5);
}

#mouse.circle {
	border: 1px solid rgba(0, 0, 0, 0.5);
	border-radius: 50%;
}

.transparent-grid {
	width: 100%;
	height: 100%;
	position: absolute;
	pointer-events: none;
	/*background: url(images/icons/grid.png) repeat top left;*/
	/* background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAQElEQVQ4T2N89+7dfwYigKCgIBGqGBgYRw3EGU6jYYgzaIZAsvn//z9ROeX9+/fE5ZRRA3GG02gY4s4pgz7ZAAAnSWvHPkHXaAAAAABJRU5ErkJggg==') repeat top left; */
	z-index: 1;
	image-rendering: pixelated;
	/* disable antialiasing */
}

#canvas_360_background {
	overflow: hidden;
	--bg-image: none;
	--bg-x: 0px;
	--bg-y: 0px;
	--bg-size: auto;
	--bg-opacity: 1;
}

#canvas_360_background::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--bg-image);
	background-position: var(--bg-x) var(--bg-y);
	background-size: var(--bg-size);
	background-repeat: no-repeat;
	opacity: var(--bg-opacity);
	z-index: -1;
}

#canvas_360_background>* {
	position: relative;
	z-index: 1;
}

.transparent-grid.white {
	background: white;
}

.transparent-grid.green {
	background: #5be471;
}

.transparent-grid.grey {
	background: #dfdfdf;
}

canvas {
	position: relative;
	z-index: 2;
}

#canvas_back {
	position: absolute;
	background-color: #ffffff;
	outline: none;
}

#canvas_grid {
	pointer-events: none;
}

.group {
	pointer-events: none;
	border: 1px solid #999999;
	margin: 5px 0px 5px 0px;
	/* padding:5px 8px; */
}

.flex-container {
	display: flex;
	flex-wrap: wrap;
}

.flex-container .item {
	flex: auto;
	max-width: 50px;
	margin: 2px 0;
	padding: 10px;
}

.flex-container .item:empty {
	height: 0;
	border: none;
}

.alertify-notifier {
	z-index: 9999999 !important;
	top: 24px !important;
	right: 24px !important;
	bottom: auto !important;
	left: auto !important;
	transform: none !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	align-items: flex-end !important;
	width: auto !important;
}

.alertify-notifier .ajs-message {
	border-radius: 8px !important;
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
	padding: 12px 38px 12px 42px !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	min-width: 320px !important;
	max-width: 420px !important;
	position: relative !important;
	left: auto !important;
	right: auto !important;
	text-shadow: none !important;
	border: 1.5px solid transparent !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
	background: rgba(239, 246, 255, 0.96) !important;
	border-color: #bfdbfe !important;
	border-left: 4px solid #3b82f6 !important;
	color: #1e3a8a !important;
}

.alertify-notifier .ajs-message::before {
	content: "" !important;
	position: absolute !important;
	left: 14px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 18px !important;
	height: 18px !important;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E") no-repeat center !important;
	background-size: contain !important;
}

.alertify-notifier .ajs-message.ajs-success {
	background: rgba(240, 253, 244, 0.96) !important;
	border-color: #bbf7d0 !important;
	border-left: 4px solid #10b981 !important;
	color: #14532d !important;
}

.alertify-notifier .ajs-message.ajs-success::before {
	content: "" !important;
	position: absolute !important;
	left: 14px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 18px !important;
	height: 18px !important;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points='22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center !important;
	background-size: contain !important;
}

.alertify-notifier .ajs-message.ajs-error {
	background: rgba(254, 242, 242, 0.96) !important;
	border-color: #fecaca !important;
	border-left: 4px solid #ef4444 !important;
	color: #7f1d1d !important;
}

.alertify-notifier .ajs-message.ajs-error::before {
	content: "" !important;
	position: absolute !important;
	left: 14px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 18px !important;
	height: 18px !important;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E") no-repeat center !important;
	background-size: contain !important;
}

/* Close Icon indicator */
.alertify-notifier .ajs-message::after {
	content: "×" !important;
	position: absolute !important;
	right: 14px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	font-size: 20px !important;
	font-weight: 400 !important;
	color: currentColor !important;
	opacity: 0.5 !important;
	cursor: pointer !important;
	line-height: 1 !important;
	transition: opacity 0.15s !important;
}

.alertify-notifier .ajs-message:hover::after {
	opacity: 0.9 !important;
}

.effectsPreview {
	cursor: pointer;
	background-color: #FFFFFF;
	width: 30px;
	height: 30px;
}

.effectsPreview:hover {
	background-color: #ade2d4;
}

@media screen and (max-width:550px) {
	.canvas_wrapper {
		margin-left: 0px;
	}
}

@media screen and (max-height: 690px) {
	.sidebar_left {
		width: 40px;
	}
}

@media screen and (max-height:450px) {
	.sidebar_left {
		width: 88px;
	}
}

/* ========== dialogs ======================================================= */

#dialog_color_picker_group {
	width: 60%;
}

#dialog_color_channel_group {
	width: 40%;
	margin-left: 1rem;
}

@media screen and (max-width: 450px) {
	#dialog_color_picker .ui_flex_group {
		flex-wrap: wrap;
	}

	#dialog_color_picker_group {
		width: 100%;
	}

	#dialog_color_channel_group {
		width: 100%;
		margin-left: 0;
		margin-top: 1rem;
	}
}

/* layer group css */
.collapsible-layer {
	background-color: #777;
	color: white;
	cursor: pointer;
	padding: 18px;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 15px;
}

.active,
.collapsible-layer:hover {
	background-color: var(--side-bar-color);
}

.layer-content {
	padding: 0 18px;
	display: none;
	overflow: hidden;
	background-color: #f1f1f1;
}

/*.parent_define_actions_table{
	width:100% !important;
	color: black;
    border: 1px solid black;
    background-color: white;

  }*/
.round {
	border-radius: 0%;
}




#previous,
#next {
	text-decoration: none;
	display: inline-block;
	padding: 15px 16px;
}

#previous:hover {
	background-color: #adecab;
	color: black;
}

#next:hover {
	background-color: #adecab;
	color: black;
}

.previous {
	background-color: #32383c;
	color: white;
	z-index: 999;
}

.next {
	background-color: #32383c;
	color: white;
	z-index: 999;
}

/*.next,
.previous {
padding: 8px 16px;

background:white ;
color:black;
border:0;
outline: none;
cursor: pointer;
width: 100px;
z-index:999;
}
.next.disable,
  .previous.disable{
	cursor: pointer;
	opacity: .5;
  }
.buttons{
	display: inline-block;
	z-index: 999;
}
*/

#previous,
#next {
	text-decoration: none;
	display: inline-block;
	padding: 2px 16px;
}

.pad10T {
	padding-top: 10px;
}

.pad5A {
	padding: 5px;
}

ul.nested {
	list-style-type: none;
	margin-left: 41px !important;
	margin-top: 0px;
}

.next.round#next {
	position: absolute;
	right: 5px;
}

.tabs ul li.active_txt {
	color: #fff !important;
	background: #545754;
}

.activetabs {
	background: #abe1ae;
	color: #000;
}

.switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
}


.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

input:checked+.slider {
	background-color: #a4a8ab;
}

input:focus+.slider {
	box-shadow: 0 0 1px #a3a6a7;
}

input:checked+.slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
	border-radius: 34px;
}

.slider.round:before {
	border-radius: 50%;
}

/* hover on group & layer when page is disabled
  #######################################################################################################*/
.group-disabled-container {
	pointer-events: none;
	opacity: 0.4;
}

.right_scrollbar {
	position: absolute;
	right: 0;
	border-radius: 5px;
	/* border: 1px solid #ccc; */
	z-index: 99;
	cursor: default;
	filter: var(--menu-icons-filter);
}

.bottom_scrollbar {
	position: absolute;
	bottom: 0;
	border-radius: 5px;
	/* border: 1px solid #ccc; */
	z-index: 99;
	cursor: default;
	filter: var(--menu-icons-filter);
}

/* group page css */
.page_two-loader {
	border: 2px solid #ccc;
	border-top: 2px solid var(--brand-color);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	animation: spin 1s linear infinite;
}

.page_two-loader-container {
	width: 100%;
	height: 130px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
}

.group_page_container {
	width: 100%;
}

.group_page_container ul {
	list-style: none;
	display: flex;
	margin: 0;
	padding: 0;
	height: 40px;
	padding: 5px 16px 5px 16px !important;
	justify-content: space-between;
}

.group_page_container ul.group_page_tabs li {
	cursor: pointer;
	transition: 0.2s;
	font-size: 12px;
	height: 100%;
	display: flex;
	align-items: center;
}

.group_page_container ul.group_page_tabs li.active {
	color: black;
	background-color: #f5f5fa;
	border-bottom: none;
	border-top-color: #41a79d;

	border-right-color: #e3e3e3;
	border-left-color: #e3e3e3;
}

.group_page_container .group_page_content .group_page_list_items {
	height: 90px;
	overflow-y: auto;
}

.group_page_container .group_page_content .group_page_list_items::-webkit-scrollbar {
	width: 5px;
}


.group_page_container .group_page_content .group_one,
.group_page_container .group_page_content .page_two {
	display: none;
}

.group_page_container .group_page_content .group_page_active {
	display: block;
}

.group_page_container .group_page_content .page_two .group_page_list_li,
.group_page_container .group_page_content .group_one .group_page_list_li {
	display: flex;
	align-items: center;
	width: 100%;
	justify-content: space-between;
	padding: 5px;
	height: 100%;
}

.group_page_container .group_page_content .group_one .group_page_list_li .group_buttons {
	display: flex;
	align-items: center;
	flex-direction: row;
	height: 100%;
	gap: 5px;
	width: 40px;
}

.group_page_container .group_page_content .group_one .group_page_list_li .group_buttons a {
	font-family: Poppins;
	font-size: 16px;
	font-weight: 500;
	line-height: 19.4px;
	color: #202124;
	text-decoration: none;
	height: 18px;
}

.group_page_container .group_page_content .curr_active_page {
	background: var(--brand-color);
	color: #fff;
}

.group_page_container .group_page_content .curr_active_page .group_page_delete_ic {
	background-color: #fff;
}

.group_page_container .group_page_content .curr_active_page .actionicon {
	background-color: #fff;
}

.group_page_container .group_page_content ul {
	list-style: none;
	font-size: 12px;
	padding: 0px 16px 0px 16px !important;
}

.group_page_container .group_page_add_cls {
	background: url(images/icons/plus_ic.svg) no-repeat center center;
	display: inline-block;
	height: 18px;
	width: 18px;
	cursor: pointer;

}

.group_page_container .group_page_add_cls:hover {
	background: url(images/icons/plus_ic.svg) no-repeat center center #e3e3e3;
	display: inline-block;
	height: 18px;
	width: 18px;
	border-radius: 3px;
}

.group_page_container .group_page_delete_ic {
	-webkit-mask: url(images/icons/del_icon.svg) no-repeat center;
	mask: url(images/icons/del_icon.svg) no-repeat center;
	-webkit-mask-size: contain;
	mask-size: contain;
	display: inline-block;
	height: 18px;
	width: 18px;
	cursor: pointer;
	background-color: #5F6368;
}

.group_page_container .group_page_edit_ic {
	-webkit-mask: url(images/icons/editdatabase.png) no-repeat center;
	mask: url(images/icons/editdatabase.png) no-repeat center;
	-webkit-mask-size: contain;
	mask-size: contain;
	display: inline-block;
	height: 18px;
	width: 18px;
	cursor: pointer;
}

.group_page_container .canvas_page_row_page_title {
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden !important;
	text-overflow: ellipsis;
	width: 180px;
	display: inline-block;
}

.group_page_container .group_page_right_align {
	text-align: right;
}

.gui-page-list-actions {
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: flex-end;
}

.gui-page-list-actions .add_reference_page_button {
	background: url(images/icons/add_docs.svg) no-repeat center center;
	height: 15px !important;
	width: 30px !important;
	box-shadow: none !important;
	border: 0;
	margin: 0px !important;
	border-radius: 0px !important;
	cursor: pointer;

}

.group_page_container .group_page_left {
	float: left;
}

.right {
	float: right;
}

.group_page_container .group_page_left_li {
	border-bottom: 1px solid #e3e3e3;
	font-weight: 600;
	display: flex;
	align-items: center;
}

.group_page_container .group_page_left_li li {
	float: left;
	width: 50%;
}

.group_page_container .group_page_leftli1 li {
	float: left;
	width: 100%;
	position: relative;
}

.disable-page-updating {
	pointer-events: none;
}

.group_page_container .group_page_leftli1 li {
	border-bottom: 1px solid #d7d7d7;
}

.group_page_container .group_page_leftli1 li:hover {
	background: var(--brand-100);
	cursor: pointer;
}

.group_page_container .group_page_tabs .active_page {
	text-align: end;
}

.group_page_container .group_page_tabs .active_group,
.group_page_container .group_page_tabs .active_page {
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-flex;
	align-items: center;

}

.active_page_name {
	display: inline-block;
	width: 55px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.active_group_name {
	display: inline-block;
	width: 50px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.current_active_page {
	display: inline-block;
	width: 110px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.group_page_container .group_page_tabs .active_page .svg path,
.group_page_tabs .active_group .svg path {
	opacity: 0.5;
}

.group_page_container .group_page_tabs li .active_group_name:hover~.group_page_tabs .active_group .svg path {
	opacity: 1;
}

.group_page_container .toggle_icon_up {
	display: inline-block;
	background: url(images/icons/arrow_up.svg) no-repeat center;
	height: 10px;
	width: 10px;
}

.group_page_container .toggle_icon_down {
	display: inline-block;
	background: url(images/icons/arrow_down.svg) no-repeat center;
	height: 10px;
	width: 10px;
}

/* layers tab scrollbar css  */
.layers_tree_struct::-webkit-scrollbar {
	width: 5px;
}

.layers_tree_struct {
	margin: 0;
}

/* search css */
.searchg {
	position: fixed;
	right: 66px;
	top: 0;
	z-index: 100;
	padding: 2px;
}

.search_result_box {
	position: absolute;
	right: 4px;
	top: 30px;
	z-index: 100;
	height: 250px;
	width: 230px;
	display: none;
	overflow: auto;
	background-color: white;
	border: 1px solid #ccc;
}

.search_result_box::-webkit-scrollbar {
	width: 5px;
}

.searchg .search_ic {
	width: 20px !important;
	height: 20px !important;
	position: absolute;
	top: 5px;
	background-image: url(images//icons/search_ic.png);
	right: 8px;
	margin: 0;
	border: 0px;
	background-color: transparent;
	box-shadow: none;
}

.search_input {
	height: 25px !important;
	width: 230px !important;
	;
	font-size: 12px;
	border: 1px solid #bebebe;
	border-radius: 2px;
	padding: 2px 26px 2px 6px;
}

.search_input:hover {
	border: 1px solid #ccc;
}

.search_input:focus {
	border: 1px solid #adbebc;
	box-shadow: none;
	outline: 0;
}

.search_input:active {
	border: 1px solid #adbebc;
	box-shadow: none;
}


.Spool {
	height: 490px !important;
}

/* datamapper */
.data-mapper-title-container {
	height: 28px;
	width: 92%;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	border-bottom: 1px solid #ccc;
	padding: 5px;
}

.data-mapper-title-container .data-mapper-title {
	display: inline-flex;
	align-items: center;
	flex-direction: row;
	width: 100%;
}

.data-mapper-title-container .data-mapper-title-buttons {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
}

#popups .data_mapper_msg {
	max-width: 300px !important;
	height: calc(25vh);
}

#popups .data_mapper_msg .dialog_content {
	min-height: 150px !important;
	max-height: 75px !important;
}

#popups .data_mapper_msg .dialog_content .dm_err_msg {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	background-color: white;
}

.data-mapper-button {
	margin-left: 2px;
	display: inline-block;
	background-color: gray;
	color: white;
	border: none;
	text-align: center;
	text-decoration: none;
	font-size: 12px;
	cursor: pointer;
	border-radius: 4px;
	transition: background-color 0.3s ease;
}

.data-mapper-button :hover {
	background-color: #45a049;
}

.data-mapper-button:active {
	background-color: #3e8e41;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	transform: translateY(1px);
}

/* compound string */
#popups .dm-cmp {
	max-width: 776px !important;
	height: 510px !important;
	max-height: 510px !important;
}

#popups .dm-cmp .dialog_content {
	max-height: 410px !important;
}

#popups .dm-cmp .dm-cmp-container {
	height: 398px;
	width: 750px;
	display: flex;
	flex-direction: column;
}

#popups .dm-cmp .dm-cmp-container .dm-cmp-str-gen {
	height: 87%;
	display: flex;
	flex-direction: column;
}

#popups .dm-cmp .dm-cmp-container .dm-cmp-str-gen .dm-cmp-str-comp {
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

#popups .dm-cmp .dm-cmp-container .dm-cmp-str-gen .dm-cmp-str-comp button {
	height: 25px !important;
}

#popups .dm-cmp .dm-cmp-container .dm-cmp-str-gen .dm-cmp-str-gen-tab {
	background-color: white;
	border: 1px solid #ccc;
	overflow-y: auto;
	height: 100%;
}

#popups .dm-cmp .dm-cmp-container .dm-cmp-str-gen .dm-cmp-str-gen-tab input[type="text"],
#popups .dm-cmp .dm-cmp-container .dm-cmp-str-gen .dm-cmp-str-gen-tab select {
	width: 100%;
	height: 100%;
}

#popups .dm-cmp .dm-cmp-container .dm-cmp-str-result {
	height: 13%;
	width: 100%;
	display: flex;
	flex-direction: column;
}

#popups .dm-cmp .dm-cmp-container .dm-cmp-str-result span {
	padding-top: 5px;
	padding-bottom: 5px;
}

#popups .dm-cmp .dm-cmp-container .dm-cmp-str-result input[type='text'] {
	height: 25px !important;
}

.dm-cmp-str-add-button {
	display: inline-block;
	width: 100%;
	height: 15px;
	border: none;
	box-shadow: none;
	background: url(images/icons/plus_ic.svg) no-repeat center center;
	filter: var(--menu-icons-filter);
	cursor: pointer !important;
}

.dm-cmp-str-delete-button {
	display: inline-block;
	width: 100%;
	height: 15px;
	border: none;
	box-shadow: none;
	background: transparent url(images/icons/del_icon.svg) no-repeat center center;
	filter: var(--menu-icons-filter);
	cursor: pointer !important;
}

.dm-cmp-parameter-input {
	width: 140px !important;
}

.dm-cmp-parameter-button {
	width: 25px !important;
}

.computed-string-btn {
	height: 25px !important;
	width: 30px !important;
	font-size: 12px !important;
	vertical-align: middle;
}

#popups .dm-cmp .dm-cmp-container td {
	border: 1px solid #f1f1f1 !important;
	font-size: 12px !important;
	color: #333;
	white-space: nowrap;
	text-overflow: ellipsis !important;
}

#popups .dm-cmp .dm-cmp-container th {
	background: #fafafa;
	color: black;
	display: table-cell !important;
	font-size: 13px !important;
	border: 1px solid #f1f1f1;
	padding: 5px !important;
	width: 175px;
	position: sticky;
	top: 0;
	font-weight: 500;
}

#popups .dm-cmp .dm-cmp-container select {
	width: 100% !important;
}

#popups>.comp-data-obj>.buttons>button:disabled {
	visibility: visible !important;
	background-color: rgba(239, 239, 239, 0.3) !important;
	color: rgba(16, 16, 16, 0.3) !important;
	border-color: rgba(118, 118, 118, 0.3) !important;
}

/* for layers */
.page_count_title_container {
	width: 95% !important;
	border-bottom: none !important;
}

.page_count_title_container .page_title_actions {
	width: 34px !important;
}

.page_count_title_container .page_title_name {
	width: 232px !important;
}

.layers_container {
	display: inline-flex;
	/* border-left: 1px solid #ccc; */
	border-bottom: 1px solid #ccc;
	height: 40px;
	align-items: center;
	width: 94%;
	padding: 5px;
	justify-content: space-between;

}

.objects_container {
	width: 100%;
}

.layers_container .layers_title {
	width: 80%;
	height: 100%;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
}

.layers_container .layers_active {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 5px;
}

.layers_container .layers_actions {
	width: 15%;
	height: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
}

/*  */
.ignore_msg {
	position: absolute;
	z-index: 1;
	border: 1px solid #cccc;
	width: 50px;
	text-align: center;
}

.ignore_msg:hover {
	cursor: pointer !important;
	background-color: var(--brand-color);
}

.copy_image_box {
	z-index: 100;
	cursor: pointer;
	width: 20px;
	height: 20px;
	display: inline-block;
	position: fixed;
	right: 110px;
	top: 6px;
}

.copy_image {

	background: url(images/camera_ic.svg) no-repeat center;
	height: 18px;
	width: 18px;
	cursor: pointer;
	display: inline-block;
}

/* add variable css */
.add_app_var {
	max-width: 400px !important;
	height: 510px !important;
	max-height: 510px !important;
}

.add_app_var .dialog_content {
	max-height: 410px !important;
}

.add_app_var .add_app_var_container {
	width: 376px;
	height: 397px;
	display: flex;
	flex-direction: column;
	background-color: fafafa;
}

.add_app_var .add_app_var_container .add_app_var_title {
	height: 25px;
	padding: 5px;
}

.add_app_var .add_app_var_container .add_app_var_content {
	height: 371px;
	background-color: white;
	overflow: auto;
}

.add_app_var .add_app_var_container .add_app_var_content .add_app_var_name {
	color: black;
	margin: 0;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden !important;
	text-overflow: ellipsis;
	display: inline-block;
	width: 300px;
}

.add_app_var .add_app_var_container .add_app_var_content td {
	border: 1px solid #f1f1f1 !important;
	font-size: 12px !important;
	color: #333;
	white-space: nowrap;
	text-overflow: ellipsis !important;
	overflow: hidden !important;
	height: 31px !important;
}

.add_app_var .add_app_var_container .add_app_var_content td input[type='checkbox'] {
	margin: 0;
}

.global_simple {
	max-width: 430px !important;
	height: 482px !important;
	max-height: 482px !important;
}

.global_simple .dialog_content {
	max-width: 428px !important;
	height: 390px !important;
	max-height: 390px !important;
}

.global_simple textarea {
	resize: none;
}

/* share icons */
.temp_share_icons {
	display: flex;
	align-items: center;
	flex-direction: row;
	gap: 10px;
	position: absolute;
	right: 10px;
	z-index: 100;
	padding: 6px;
}

.temp_share_icons .temp_share_button {
	position: relative;
	display: flex;
	align-items: center;
	flex-direction: row;
	gap: 3px;
	height: 25px;
	box-shadow: none;
	font-size: 12px;
	font-weight: 500;
	background-color: var(--brand-color);
	border: 1px solid;
	color: #FFFFFF;
}

.temp_share_icon {
	background: url(images/share/share_windowsshare.svg) no-repeat center;
	width: 24px;
	height: 24px;
	cursor: pointer;
}

.temp_collab_icon {
	background: url(images/share/groupscollab.svg) no-repeat center;
	width: 24px;
	height: 24px;
	cursor: pointer;
}

.temp_arrow_down {
	display: inline-block;
	background: url(images/icons/arrow_down.svg) no-repeat center;
	height: 10px;
	width: 10px;
}

.d-none {
	display: none !important;
}

.visibility_hide {
	visibility: hidden;
}


.tmp_share_clb {
	max-width: 450px !important;
	height: 390px !important;
	max-height: 390px;
	min-width: 450px !important;
	min-height: 390px !important;
}

.tmp_share_clb .dialog_content {
	max-height: 298px !important;
}

.tmp_share_clb_container {
	height: 275px;
	width: 425px;
	background-color: white;
	display: flex;
	flex-direction: column;
	padding: 5px;
}

.tmp_share_clb_active {
	border: 1px solid #a3dbf7 !important;
	outline: 1px solid #a3dbf7;
	outline-offset: -2px;
}

.tmp_share_clb_search {
	display: flex;
	align-items: center;
	height: 30px;
	border-radius: 3px;
	padding: 0px 5px 0px 5px;
	border: 1px solid #ccc;
	gap: 15px
}

.tmp_share_clb_dd_container {
	display: flex;
	align-items: center;
	gap: 2px;
	flex-direction: row;
	font-size: 12px;
	width: 55px;
}

.tmp_share_clb_dd {
	height: 100%;
	display: flex;
	align-items: center;
	position: relative;
}

.tmp_share_clb_dd_menu {
	position: absolute;
	top: 0;
	left: 0;
	border: 1px solid #ccc;
	width: 110px;
	background-color: white;
	padding: 2.5px;
	font-size: 12px;
}

.tmp_share_clb_dd_selected {
	cursor: default;
}

.tmp_share_clb_dd_menu .tmp_share_clb_dd_menu_item {
	height: 25px;
	display: flex;
	align-items: center;
	cursor: default;
}

.tmp_share_clb_dd_menu .tmp_share_clb_dd_menu_item:hover {
	background-color: #eee;
	;
}

.tmp_share_clb_tick {
	background: url(images/share/tick_mark.svg) no-repeat center;
	width: 20px;
	height: 20px;
}

.tmp_share_clb_container .tmp_share_clb_input_box {
	height: 100%;
}

.tmp_share_clb_container .tmp_share_clb_input_box input {
	height: 100%;
	width: 335px !important;
	border: none;
	border-radius: 0;
	padding: 0;
	outline: none;
}

.tmp_share_clb_list {
	height: 234px;
	width: 415px;
	overflow: auto;
}

@keyframes spin {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}

	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

.tmp_share_clb-loader {
	border: 4px solid #eee;
	border-top: 4px solid #ccc;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	animation: spin 1s linear infinite;
}

.tmp_share_clb-loader-container {
	width: 414px;
	height: 229px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tmp_share_clb_list_items {
	width: 414px;
	height: 229px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-top: 10px;
	overflow-y: auto;
}

.tmp_share_clb_list_items::-webkit-scrollbar {
	width: 5px;
}

.tmp_share_clb_list_items .tmp_share_clb_list_item {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	background-color: #ffffff;
	padding: 0px 5px 0px 5px;
	height: 30px;
	border-bottom: 1px solid #eee;
}

.tmp_share_clb_list_items .tmp_share_clb_list_item .tmp_share_clb_list_item_title {
	white-space: nowrap;
	overflow: hidden !important;
	text-overflow: ellipsis;
	width: 375px;
}

.tmp_share_clb_list_items .tmp_share_clb_list_item input[type="checkbox"] {
	margin: 0;
}

.dropbtn {
	background-color: #fff;
	color: white;
	padding: 0px;
	border: 0;
	width: 36px;
	border-radius: 4px;
	margin-top: 0;
	height: 34px;
	font-size: 16px;
	cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover,
.dropbtn:focus {
	background-color: #ade2d4;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
	display: none;
	position: fixed;

	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 9999;
}

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

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

/* Show the dropdown menu on hover */
.play:hover .dropdown-content {
	display: block;
}

/**############################################## end #################################################*/

.play_ic {
	background: url(images/play_ic.png) no-repeat left center;
	width: 21px;
	height: 16px;
	display: inline-block;
	vertical-align: middle;
}

.demo_ic {
	background: url(images/demo_ic.png) no-repeat left center;
	width: 21px;
	height: 16px;
	display: inline-block;
	vertical-align: middle;
}

.batch_ic {
	background: url(images/batch_ic.png) no-repeat left center;
	width: 21px;
	height: 16px;
	display: inline-block;
	vertical-align: middle;
}



.relative {
	position: relative;
}

.drop_ic {
	background: url(images/drop_ic1.png) no-repeat center;
	width: 9px;
	height: 4px;
	display: inline-block;
	position: absolute;
	top: 21px;
	right: 2px;
}

/* options layout */
.icon_kerning {
	background: url(images/icons/letter_spacing.svg);
	width: 18px;
	height: 24px;
}

.icon_leading {
	background: url(images/icons/line_spacing.svg);
	width: 16px;
	height: 14px;
}

/* new layout menu css */
.clipboard_container {
	width: 170px;
}

.clipboard_container .actions_group_items_container button {
	width: 59px;
	gap: 8px;
}

.arrange_container {
	width: 100px;
}

.arrange_container .actions_group_items_container button {
	width: 99px;
	gap: 6px;
}

.summary_container {
	width: 260px;
}

.summary_container .actions_group_items_container button {
	width: 125px;
	gap: 6px;
	border: 1px solid #D6D6D6;
	border-radius: 4px;
	padding: 2px 3px 2px 4px;
}

.summary_container .icons_container[data-id="trace_design_container"] {
	width: 600px;
	height: 510px;
	border-radius: 8px;
}

.summary_container .icons_container .icons_container_list {
	height: 100%;
	flex-direction: column;
}

.alignments_container button {
	width: 48px;
	gap: 6px;
	border: 1px solid #D6D6D6 !important;
	border-radius: 4px !important;
	padding: 2px 3px 2px 4px !important;
}

.alignments_container button .group_dropdown_btn_img {
	width: 20px !important;
	height: 20px !important;
}

.alignments_container button .group_dropdown_arrow_btn_img,
.summary_container button .group_dropdown_arrow_btn_img {
	width: 12px !important;
	height: 12px !important;
}


.alignments_container .icons_container {
	width: 186px;
	height: 194px;
	border: 1px solid #0000001A;
	border-radius: 12px;
	box-shadow: 0px 4px 16px 0px #00000014;
	padding: 0px;
}

.alignments_container .icons_container .icons_container_list {
	flex-direction: column;
	padding: 0px;
	flex-flow: column;
	height: 194px;
	overflow-y: auto;
}

.alignments_container .icons_container .icons_container_list::-webkit-scrollbar {
	width: 5px;
}

.alignments_container .ui_button_group .icons_container .icons_container_list button {
	width: 100% !important;
	border: none !important;
	height: 32px !important;
}

.alignments_container .icons_container .icons_container_list button img {
	height: 16px !important;
}

.alignments_container .icons_container .icons_container_list span {
	font-weight: 400;
	font-size: 12px !important;
	line-height: 18.6px;
}

.alignments_container .icons_container .icons_container_list>:first-child button {
	border-radius: 12px 12px 0px 0px !important;
}

.alignments_container .icons_container .icons_container_list>:last-child button {
	border-radius: 0px 0px 12px 12px !important;
}

.alignments_container .icons_container .icons_container_list button:hover {
	background: var(--custom-dropdown-hover-color);
	;
}

.gui_items_container {
	width: 404px;
}

.typography_container {
	width: 404px;
}

.objects_items_container {
	width: 350px;
}

.objects_items_container .ui_toggle_button {
	border: 1px solid #D6D6D6 !important;
	border-radius: 5px !important;
	width: 75px !important;
}

.gui_items_container .item {
	margin: 0 !important;
}

.gui_items_container .actions_group_items_container select {
	width: 96px;
	height: 24px;
	padding: 3px;
	outline: 1px solid #D6D6D6;
	border: none;
}

.gui_items_container .actions_group_items_container input[type='number'] {
	width: 40px;
	height: 24px;
	padding: 3px !important;
	outline: 1px solid #D6D6D6;
	border-radius: 4px !important;
}

.typography_container .multi_dropdown_container button {
	width: 48px;
	gap: 6px;
	border: 1px solid #D6D6D6 !important;
	border-radius: 4px !important;
	padding: 2px 3px 2px 4px !important;
}

.typography_container .actions_group_items_container .multi_dropdown_container button .group_dropdown_btn_img {
	width: 20px !important;
	height: 20px !important;
}

.typography_container .actions_group_items_container .multi_dropdown_container button .group_dropdown_arrow_btn_img {
	width: 12px !important;
	height: 12px !important;
}

.typography_container .actions_group_items_container .icons_container {
	width: 104px;
	height: 136px;
	border: 1px solid #0000001A;
	border-radius: 12px;
	box-shadow: 0px 4px 16px 0px #00000014;
	padding: 0px;
	top: auto;
	left: auto;
}

.typography_container .actions_group_items_container .icons_container .icons_container_list {
	flex-direction: column;
	padding: 0px;
	flex-flow: column;
	height: 136px;
	overflow-y: auto;
}

.typography_container .actions_group_items_container .icons_container .icons_container_list::-webkit-scrollbar {
	width: 5px;
}

.typography_container .actions_group_items_container .icons_container .icons_container_list button {
	width: 100% !important;
	border: none !important;
	height: 32px;
	padding: 4px 8px 4px 8px !important;
}

.typography_container .actions_group_items_container .icons_container .icons_container_list button img {
	height: 16px;
}

.typography_container .actions_group_items_container .icons_container .icons_container_list span {
	font-weight: 400;
	font-size: 12px !important;
	line-height: 18.6px;
}

.typography_container .actions_group_items_container .icons_container .icons_container_list>:first-child button {
	border-radius: 12px 12px 0px 0px !important;
}

.typography_container .actions_group_items_container .icons_container .icons_container_list>:last-child button {
	border-radius: 0px 0px 12px 12px !important;
}

.typography_container .actions_group_items_container .icons_container .icons_container_list button:hover {
	background: var(--custom-dropdown-hover-color);
	;
}

#bullets_container,
.bullets_container {
	height: 224px !important;
	width: 124px !important;
}

.gui_items_container .actions_group_items_container .ui_button_group button {
	width: 40px !important;
	height: 24px !important;
	border: 1px solid #D6D6D6 !important;
}

.gui_items_container .actions_group_items_container .ui_button_group>button:first-child {
	border-radius: 4px 0px 0px 4px !important
}

.gui_items_container .actions_group_items_container .ui_button_group>button:last-child {
	border-radius: 0px 4px 4px 0px !important
}

.gui_items_container .actions_group_items_container .ui_number_input button {
	height: 12px !important;
}

.actions_main_group {
	display: flex;
	flex-direction: row;
	height: 100%;
}

.actions_group {
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.group_separator {
	height: 100%;
	padding-left: 16px;
	padding-right: 16px;
	display: inline-flex;
	align-items: center;
}

.group_separator .group_separator_line {
	height: 100%;
	width: 1px;
	background-color: #ccc;
}

.actions_group .actions_group_title {
	display: flex;
	align-items: center;
	width: 100%;
	justify-content: center;
}

.actions_group .actions_group_title span {
	font-weight: 400;
	font-size: 10px;
	line-height: 15px;
	color: #202124;
	font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

.actions_group .actions_group_act_container {
	display: flex;
	flex-direction: row;
}

.actions_group .actions_group_act_container .actions_group_items_container {
	width: auto;
	display: flex;
	flex-flow: wrap;
	gap: 8px;
}

.actions_group .actions_group_act_container .actions_group_items_container button {
	height: 24px;
	box-shadow: none;
	display: flex;
	align-items: center;
	flex-direction: row;
	border: none;
	padding: 0;
	border-radius: 0;
}

.actions_group .actions_group_act_container .actions_group_items_container button img {
	width: 20px;
	height: 20px;
}

.actions_group .actions_group_act_container .actions_group_items_container button span {
	font-weight: 400;
	font-size: 10px;
	line-height: 15px;
}

.actions_group .actions_group_act_container .actions_group_big_action_container {
	width: auto;
}

.actions_group .actions_group_act_container .actions_group_big_action_container button {
	width: 32px;
	height: 55px;
	box-shadow: none;
	display: flex;
	flex-direction: column;
	border: none;
	gap: 8px;
	padding: 0;
	border-radius: 0;
	justify-content: center;
}

.actions_group .actions_group_act_container .actions_group_big_action_container button img {
	width: 32px;
	height: 32px;
}

.actions_group .actions_group_act_container .actions_group_big_action_container button span {
	font-weight: 400;
	font-size: 10px;
	line-height: 15px;
	text-align: center;
	width: 100%;
}

.option_selected {
	background: var(--active-tag-color) !important;
}

.highlight_layer {
	background-color: var(--active-tag-color) !important;
}

.rephrase_button {
	border: 1px solid #D6D6D6 !important;
	border-radius: 4px !important;
	padding: 2px 3px 2px 4px !important;
	width: 45px;
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: center;
	font-size: 12px;
}

.border_settings {
	display: flex;
	align-items: center;
	flex-direction: row;
	gap: 8px;
	width: 69px !important;
}

.border_settings .border_settings_container {
	width: 221px;
	height: 122px;
	background-color: white;
	position: fixed;
	top: 60px;
	z-index: 100;
	padding: 3px;
	border: 1px solid #EEEEEE;
	border-radius: 6px;
	box-shadow: 0px 4px 16px 0px #00000014;
	padding: 16px !important;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.border_settings .border_settings_container .border_item {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 7px;
	width: 185px;
	height: 24px;
}

.border_settings .border_settings_container .no_border {
	background: url(images/icons/no_border.svg) no-repeat center;
	width: 20px;
	height: 23px !important;
	margin-left: auto;
}

.border_settings .border_settings_container .border {
	background: url(images/icons/border.svg) no-repeat center;
	width: 20px;
	height: 23px !important;
	margin-left: auto;
}

.border_settings a {
	width: 33px;
	font-family: Poppins;
	font-size: 10px;
	font-weight: 400;
	line-height: 15px;
	text-align: left;
	color: #202124;
	height: 15px;
}

.border_settings .border_shape {
	height: 24px;
	width: 24px;
	border-radius: 4px;
	border: 4px solid #202124;
}

.app_interactios_disabled {
	pointer-events: none;
}

.app_interactios_enabled {
	pointer-events: all;
}

/* barcodes_section */
.barcodes_section {
	min-height: 500px !important;
	height: 500px !important;
	max-height: 500px !important;
	max-width: 660px !important;
	min-width: 660px !important;
	width: 660px !important;
}

.barcodes_section .barcodes_container {
	height: 197px;
	/* width: 504px; */
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.barcodes_section .barcodes_container .barcodes_selection {
	/* height: 50%; */
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.barcodes_section .barcodes_container .barcodes_selection .barcodes_select {
	height: 70%;
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 6px;
}

.barcodes_section .barcodes_container .barcodes_selection .barcodes_desc {
	height: 30%;
	display: flex;
	flex-direction: row;
	width: 100%;
	gap: 2px;
}

.barcodes_section .barcodes_container .barcodes_selection .barcodes_select span {
	font-size: 14px;
	font-weight: 500;
	line-height: 16.8px;
}

.barcodes_section .barcodes_container .barcodes_selection .barcodes_select select {
	height: 32px;
	width: 100%;
}

.barcodes_section .barcodes_container .barcodes_value {
	height: 50%;
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 6px;
}

.barcodes_section .dialog_content::-webkit-scrollbar {
	height: 5px;
	width: 5px;
}

.barcodes_section .barcodes_container .barcodes_value span {
	font-size: 14px;
	font-weight: 500;
	line-height: 16.8px;
}

.barcodes_section .barcodes_container .barcodes_value select {
	height: 32px;
	width: 100%;
}

.barcodes_tabs_container {
	/* font-family: Arial, sans-serif; */
	/* padding: 20px; */
}

.barcodes_tabs {
	display: flex;
	border-bottom: 2px solid #ccc;
	justify-content: space-between;
}


.barcodes_tab {
	padding: 5px 49px;
	cursor: pointer;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	/* margin-right: 5px; */
	background-color: #f4f4f4;
	color: #003d73;
	font-weight: 600;
	transition: background-color 0.3s, color 0.3s;
}

.barcodes_tab:hover {
	background-color: #dceeff;
}

.barcodes_tab.barcode_active {
	background-color: #3399ff;
	color: white;
}

.barcodes_tab_content {
	display: none;
	padding: 10px;
	border: 1px solid #ccc;
	border-top: none;
	border-radius: 0 0 8px 8px;
	animation: scFadeIn 0.3s ease-in-out;
	min-height: 360px;
	max-height: 360px;
	height: 360px;
	overflow-y: scroll;
}

.barcodes_tab_content::-webkit-scrollbar {
	height: 5px;
	width: 5px;
}

/* .barcode_symbology_wrapper .barcode_props_table */
.barcodes_tab_content.barcode_active {
	display: block;
}

.barcode_symbology_wrapper .barcode_props_table select {
	width: 100%;
}

.barcode_props_table thead th {
	display: table-cell !important;
}

.barcode_symbology_wrapper .barcode_props_table input {
	width: 100% !important;
	margin: 0px !important;
}

#barcodes_searchTable::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}

#popups .barcodes_section .dialog_content #barcodes_searchTable td .barcodes_action_icon {
	display: inline-block;
	height: 25px;
	width: 25px;
	background-color: #E9EDEE !important;
	border-radius: 6px;
	cursor: pointer;
}

#barcodes_searchTable td .edit_barcodes_action {
	background: url(images/icons/edit_pen_ic.svg) no-repeat center;
}

#barcodes_searchTable td .delete_barcodes_action {
	background: url(images/icons/delete_red_ic.svg) no-repeat center;
}


@keyframes scFadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

#barcodes_addBtn {
	background-color: #003d73;
	color: white;
	padding: 3px 14px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	margin-bottom: 10px;
	margin-left: auto;
	display: flex;
}

#barcodes_addBtn:hover {
	background-color: #002d5c;
}

.barcodes_table_container {
	border: 1px solid #ddd;
	border-radius: 8px;
	overflow: hidden;
	min-height: 170px;
	max-height: 170px;
	overflow-y: auto;
}

.barcodes_table_container::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}

#barcodes_searchTable {
	width: 100%;
	border-collapse: collapse;
	font-family: Arial, sans-serif;
}

#barcodes_searchTable thead {
	background-color: #f4f4f4;
}

#barcodes_searchTable th,
#barcodes_searchTable td {
	padding: 10px;
	border-bottom: 1px solid #eee;
	text-align: left;
}

#barcodes_searchTable th {
	display: table-cell !important;
}

#barcodes_searchTable .barcodes_actions button {
	background: none;
	border: none;
	font-size: 16px;
	cursor: pointer;
	margin-right: 4px;
}

/* #barcodes_searchTable .barcodes_actions .edit {
	color: #007bff;
}

#barcodes_searchTable .barcodes_actions .delete {
	color: #dc3545;
} */

.barcodes_modal_content select,
.barcodes_modal_content input {
	width: 100%;
	height: 32px;
}

.barcodes_modal_content label {
	font-weight: 500;
}

#barcodes_general_footer_block {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#barcodes_general_footer_block input,
#barcodes_general_footer_block select {
	height: 32px;
	width: 100%;
}

.barcode_props_table select,
.barcode_props_table input[type='text'],
.barcode_props_table input[type='number'] {
	width: 100% !important;
	height: 32px;
}

.barcode_props_table tr {
	height: 40px;
}

.barcodes_add_section .dialog_content {
	min-height: 190px !important;
}


/* import document */
/* import documents styles start */
#popups .import_doc_modal {
	--idm-height: 95vh;
	--idm-width: 95vw;
	max-width: var(--idm-width) !important;
	width: var(--idm-width) !important;
	min-width: var(--idm-width) !important;
	height: var(--idm-height) !important;
	min-height: var(--idm-height) !important;
	max-height: var(--idm-height) !important;
	/* height: 600px !important;
	min-height: 600px !important;
	max-height: 600px !important; */

	background-color: #FDFDFD !important;
	top: 10px !important;
	bottom: 10px !important;
}

.import_doc_modal button[data-id=popup_cancel] {
	margin: 0 3px;
	background-color: rgba(255, 255, 255, 0.2);
	background-color: var(--button-background-color);
	min-width: 60px;
	padding: 4px 10px;
	color: var(--brand-color);
	border: none !important;
}

.import_doc_modal button:hover {
	background-color: #eee !important;
}

.import_doc_modal button:active {
	background-color: #ccc !important;
}

.import_doc_modal button[data-id=popup_save] {
	margin: 0 3px;
	background-color: rgba(255, 255, 255, 0.2);
	background-color: var(--button-background-color);
	min-width: 60px;
	border: 1px solid var(--brand-color);
	/* border: 1px solid var(--border-color); */
	padding: 4px 10px;
	color: var(--brand-color);
}

.import_doc_modal button[data-id=popup_ok] {}

.import_doc_modal_header h2 {
	background-color: #FDFDFD !important;
}

.import_doc_modal .buttons {
	background-color: #FDFDFD !important;
	border: none !important;
}

.import_doc_modal_container {
	width: calc(var(--idc-width) - 18px);
	height: calc(var(--idc-height) - 35px);
}


.import_doc_modal_container .import_doc_modal_body {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.import_doc_modal_container .modal_content {
	display: flex;
	gap: 20px;
}

.import_doc_modal_container .pdf_preview_section {
	flex: 1;
	background: #f8f8f8;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 250px;
}

.selected-box {
	border-style: dotted !important;
	box-shadow: 0 0 0 2px rgba(0, 0, 255, 0.5);
	animation: pulse 1s infinite;
}

.import_doc_modal_container .pdf_preview_section img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.import_doc_modal_container .options_section {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.import_doc_modal_container .size_inputs {
	display: flex;
	gap: 10px;
}

.import_doc_modal_container .size_inputs input {
	width: 100px;
}

.import_doc_modal_container .import_doc_modal_footer {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding-top: 10px;
}

.import_doc_modal_container .import_doc_modal_footer button {
	padding: 8px 15px;
	border-radius: 5px;
	border: none;
	cursor: pointer;
}

.import_doc_modal_container .import_btn {
	background: #007bff;
	color: white;
}

.import_doc_modal_container .save_btn {
	background: #6c757d;
	color: white;
}

.import_doc_modal_container .cancel_btn {
	background: #f8f9fa;
	border: 1px solid #ccc;
}

.import_doc_modal .import_document_subtitle {
	position: absolute;
	top: 25px;
	font-size: 12px;
	font-weight: 400;
}


.import_doc_modal_body .form-label {
	font-weight: 500;
	margin: 0px !important;
	height: 3%;
}

.import_doc_modal .import_doc_modal_menu_container {
	height: 6%;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
}

.import_doc_modal .import_doc_modal_menu_container .template-page-selection-container {
	width: 60%;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	height: 100%;
}

.import_doc_modal .import_doc_modal_menu_container .template-page-selection-container select {
	height: 100%;
	width: 35%;
}

.import_doc_modal .import_doc_modal_menu_container .template-page-selection-container label {
	margin: 0 !important;
}

.import_doc_modal .file-upload {
	display: flex;
	align-items: center;

	gap: 10px;
	height: 100%;
	padding: 5px !important;
	border: 1px solid #e2e8f0;
	border-radius: 5px;
	background-color: #f8fafc;
	flex: 1;

}

.import_doc_modal .file-upload input[type="file"] {
	display: none;
}


.import_doc_modal .file-upload label {
	width: 15%;
	margin: 0 !important;
	padding: 5px 5px;
	cursor: pointer;
	background: var(--brand-color);
	color: white;
	border-radius: 4px;
	cursor: pointer;
	font-weight: 500;
	font-size: 12px;
	border: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.import_doc_modal .file-upload .file-name {
	width: 70%;
	color: #64748b;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.import_doc_modal .pdf_list input[type="checkbox"] {
	width: 12px;
	height: 12px;

	background-color: white;

	border-radius: 3px;
	position: relative;
	cursor: pointer;
}

.import_doc_modal .pdf_div {
	display: flex;
	gap: 5px;
	height: 94%;
	width: 100%;
	flex-direction: row;
}

.import_doc_modal .middle_section .loading-spinner-container {
	height: 99%;
	width: 70%;
}

.import_doc_modal .middle_section .loading-spinner-container .loading-spinner {
	border: 4px solid #f3f3f3;
	/* Light grey */
	border-top: 4px solid #3498db;
	/* Blue */
	border-radius: 50%;
	width: 40px;
	height: 40px;
	animation: spin 1s linear infinite;
	position: fixed;
	/* Position the spinner absolutely */
	top: 50%;
	/* Center vertically */
	left: 35%;
	/* Center horizontally */
	transform: translate(-50%, -50%);
	/* Offset to truly center */
	z-index: 10;
	/* Ensure it appears above other content */
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	/* Only rotate */
	100% {
		transform: rotate(360deg);
	}
}

/* @keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
 } */
.import_doc_modal .pdf_div input.form-control,
select.form-control {
	height: 32px;
}

.import_doc_modal .left_section .pdf_list_title {
	height: 5%;
	display: flex;
	align-items: center;
	flex-direction: row;
	cursor: pointer;
	width: 100%;
	gap: 2px;
	padding: 4px;
}

.import_doc_modal .left_section .pdf_list_select_all {
	display: flex;
	align-items: center;
	flex-direction: row;
	cursor: pointer;
	width: 100%;
	gap: 2px;
	padding: 4px;
	margin-top: 5px;
	margin-bottom: 5px;
}

.import_doc_modal .left_section .pdf_list_select_all input[type='checkbox'] {
	width: 20%;
	height: 12px;
	background-color: white;
	border-radius: 3px;
	position: relative;
	cursor: pointer;
}

.import_doc_modal .left_section .pdf_list_select_all label {
	margin: 0 !important;
	display: inline-block;
	width: 80%;
	cursor: pointer;
}

.import_doc_modal .pdf_list {
	padding: 0;
	overflow: auto;
	height: 95%;
}

.import_doc_modal .pdf_list .id_pdf_pages {
	margin-top: 5px;
	margin-bottom: 5px;
}

.import_doc_modal .pdf_list .id_pdf_pages label {
	margin: 0 !important;
	display: inline-block;
	width: 80%;
	cursor: pointer;
}

.import_doc_modal .pdf_list .id_pdf_pages {
	display: flex;
	align-items: center;
	flex-direction: row;
	cursor: pointer;
	width: 100%;
	gap: 2px;
	padding: 4px;
}

.import_doc_modal .pdf_list .id_pdf_pages input[type='checkbox'] {
	width: 20%;
}

.import_doc_modal .pdf_list .id_pdf_pages span {
	display: inline-block;
	width: 80%;
}

.import_doc_modal .pdf_list .id_pdf_pages.id_pdf_page_selected {
	color: black !important;
	background-color: var(--active-tag-color) !important;
}

.import_doc_modal .pdf_list::-webkit-scrollbar {
	width: 5px;
}

.import_doc_modal .pdf_list::-webkit-scrollbar-track {
	background: #fcfcfc !important;
	/* Light background */
	border-radius: 10px;
}

.import_doc_modal .pdf_list::-webkit-scrollbar-thumb {
	background: #888888 !important;
	/* Darker thumb */
	border-radius: 10px;
}

.import_doc_modal .pdf_list::-webkit-scrollbar-thumb:hover {
	background: #666666 !important;
	/* Even darker on hover */
}

.import_doc_modal .pdf_list label {
	display: flex;
	align-items: center;
}


.import_doc_modal .pdf_img {
	width: 100%;
	display: block;
}

.import_doc_modal .right_section .form-group {
	margin-bottom: 5px;
}

.import_doc_modal .right_section .form-group .width,
.import_doc_modal .right_section .form-group .height {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.import_doc_modal .right_section .form-group .layer_obj_X,
.import_doc_modal .right_section .form-group .layer_obj_Y {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.import_doc_modal .right_section .form-group .layer_obj_width,
.import_doc_modal .right_section .form-group .layer_obj_height {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.import_doc_modal .form-control {
	width: 100%;
	padding: 5px;
}

.import_doc_modal .left_section {
	width: 10%;
	border: 1px solid #ccc;
	padding: 5px;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.import_doc_modal .left_section .pdf_list::-webkit-scrollbar {
	width: 5px !important;
	height: 5px !important;
}

.import_doc_modal .left_section .pdf_list::-webkit-scrollbar-track {
	background: #fcfcfc !important;
	/* Light background */
	border-radius: 10px;
}

.import_doc_modal .left_section .pdf_list::-webkit-scrollbar-thumb {
	background: #888888 !important;
	/* Darker thumb */
	border-radius: 10px;
}

.import_doc_modal .left_section .pdf_list::-webkit-scrollbar-thumb:hover {
	background: #666666 !important;
	/* Even darker on hover */
}


.import_doc_modal .left_section .pdf_list::-webkit-scrollbar-track {
	background: #fcfcfc !important;
	border-radius: 10px;
}

.import_doc_modal .left_section .pdf_list::-webkit-scrollbar-thumb {
	background: #888888 !important;
	border-radius: 10px;
}

.import_doc_modal .left_section .pdf_list::-webkit-scrollbar-thumb:hover {
	background: blue;
	/* Darker on hover */
}

.import_doc_modal .middle_section {
	width: 70%;
	overflow: auto;
	height: 100%;
	;
	position: relative;
	border: 1px solid #ccc;
	background: #F5F5FA;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

.import_doc_modal .middle_section::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}

.import_doc_modal .right_section {
	width: 20%;
	overflow-y: auto;
	height: 100%;
	padding: 5px;
	border: 1px solid #ccc;
}

.selection-box {
	position: absolute;
	border: 2px solid green;
	/* background-color: rgba(0, 255, 0, 0.1); */
	/* pointer-events:;
	 */
	pointer-events: auto;
	z-index: 10;
}

.img-wrapper {
	position: relative;
	display: inline-block;
	width: 100%;
}

.img-wrapper canvas {
	-webkit-user-drag: none;
	/* Chrome, Safari */
	-khtml-user-drag: none;
	/* older Konqueror browsers */
	-moz-user-drag: none;
	/* Firefox */
	-o-user-drag: none;
	/* Opera */
	user-drag: none;
}

.import_doc_modal .right_section .form-group label {
	margin-bottom: 3px;
}

.import_doc_modal .middle_section .hideAfterUpload {
	position: absolute;
	top: 50%;
	bottom: 50%;
	left: 50%;
	right: 50%;
}

.import_doc_modal .dialog_content {
	overflow: hidden !important;
	--idc-height: calc(var(--idm-height) - 85px);
	--idc-width: var(--idm-width);
	height: var(--idc-height) !important;
	max-height: var(--idc-height) !important;
	min-height: var(--idc-height) !important;
	width: var(--idc-width) !important;
}

.import_doc_modal .import_doc_loader_container {
	width: 414px;
	height: 229px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.import_doc_modal .import_doc_loader_loader {
	border: 4px solid #eee;
	border-top: 4px solid #ccc;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	animation: spin 1s linear infinite;
}

.import_doc_modal .right_section .sub_headings {
	font-weight: 500 !important;
}

.import_doc_modal .autoMapAIBtn_container {
	min-width: 128px;
	width: 100%;
	position: relative;
	box-shadow: 1px 1px 2px #dfdfdf !important;
	background: #fff !important;
}

.import_doc_modal .autoMapAIBtn {
	text-align: center;
	font-family: 'Poppins', Verdana, Sans-serif !important;
	color: #0F467C !important;
	font-weight: 500;
	cursor: pointer;
	text-shadow: none !important;
	display: inline-block;
	text-decoration: none !important;
	width: 100%;
	border-radius: 5px !important;
	border: 1px solid var(--brand-color) !important;
	padding: 6px 10px !important;
}

.import_doc_modal .template_height_width {
	display: flex;
	gap: 10%;
}

.import_doc_modal .middle_section::-webkit-scrollbar {
	width: 5px !important;
}

.import_doc_modal .middle_section::-webkit-scrollbar-track {
	background: #fcfcfc !important;
	/* Light background */
	border-radius: 10px;
}

.import_doc_modal .middle_section::-webkit-scrollbar-thumb {
	background: #888888 !important;
	/* Darker thumb */
	border-radius: 10px;
}

.import_doc_modal .middle_section::-webkit-scrollbar-thumb:hover {
	background: #666666 !important;
	/* Even darker on hover */
}

.import_doc_modal .right_section::-webkit-scrollbar {
	width: 5px !important;
	height: 5px !important;
}

.import_doc_modal .right_section::-webkit-scrollbar-track {
	background: #fcfcfc !important;
	border-radius: 10px;
}

.import_doc_modal .right_section::-webkit-scrollbar-thumb {
	background: #888888 !important;
	border-radius: 10px;
}

.import_doc_modal .right_section::-webkit-scrollbar-thumb:hover {
	background: blue;
	/* Darker on hover */
}

/* .import_doc_modal_loader {
    border: 6px solid #eee;
    border-top: 6px solid #ccc;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
  } */
.spinner-icon {
	flex-shrink: 0;
	grid-row: 1;
	transition: opacity .25s .1s;
	width: 32px;
}

.spinner-circle-outer {
	animation: rotate-animation .75s linear infinite forwards;
	transform-box: fill-box;
	transform-origin: center;
}

.spinner-circle-dashed {
	stroke-dashoffset: 4px;
	stroke-dasharray: 49px;
	animation: dash-offset-animation 1s ease-in-out infinite alternate forwards;
	transform-box: fill-box;
	transform-origin: center;
}

.spinner-star-outline {
	fill: var(--spinner-secondary-color);
	stroke: var(--spinner-secondary-color);
	stroke-opacity: .95;
	animation: none;
}

.spinner-star-filled {
	animation: star-pulse-animation .5s ease-in-out infinite alternate forwards;
	transform-box: fill-box;
	transform-origin: center;
}

.spinner-star-filled:nth-of-type(4) {
	animation-delay: .25s;
	animation-duration: .3s;
}

@keyframes rotate-animation {
	0% {
		transform: rotate(0);
	}

	to {
		transform: rotate(1turn);
	}
}

@keyframes dash-offset-animation {
	0% {
		stroke-dashoffset: 4px;
	}

	to {
		stroke-dashoffset: 40px;
	}
}

@keyframes star-toggle-animation {

	0%,
	49% {
		opacity: 1;
	}

	50%,
	100% {
		opacity: 0;
	}
}

/* First star is visible first, then hides */
.spinner-star-filled:nth-of-type(3) {
	animation: star-toggle-animation 1s infinite;
}

/* Second star is hidden first, then becomes visible */
.spinner-star-filled:nth-of-type(4) {
	animation: star-toggle-animation 1s infinite;
	animation-delay: 0.5s;
	/* half cycle delay for toggle effect */
}

.import_doc_modal_loader_container {
	width: calc(var(--idc-width) - 18px);
	height: calc(var(--idc-height) - 35px);
	display: flex;
}

.import_doc_modal_d_none {
	display: none !important;
}

.object-popup .simple_complex_div {
	display: flex;
}

.object-popup .simple_complex_div label {
	margin: 0;
	display: flex;
	align-items: end;
	padding: 2px;
}

.object-popup {
	padding: 8px;
	background: #f9f9f9;
	border: 1px solid #ccc;
	border-radius: 4px;
	max-width: 171px;
}

#popups .autoMap_var_AI_div {
	min-height: 370px;
	max-height: 370px;

}

#popups .autoMap_var_AI_div .dialog_content {
	min-height: 265px !important;
	max-height: 265px !important;
	/* margin: 10px; */
}


.autoMap_var_AI_div .checkbox-dropdown {
	display: flex;
	flex-direction: column;
	gap: 10px;

}

.autoMap_var_AI_div .checkbox-dropdown .search-box input {
	width: 100%;
	height: 32px;
}

.autoMap_var_AI_div .checkbox-dropdown .checkbox-list {
	max-height: 200px;
	overflow-y: auto;
	border: 1px solid var(--input-border-color);
	padding-top: 5px;
}

.autoMap_var_AI_div .checkbox-dropdown .checkbox-list::-webkit-scrollbar {
	width: 5px;
}

.autoMap_var_AI_div .checkbox-dropdown .checkbox-item {
	display: flex;
	align-items: center;
	margin-bottom: 6px;
	margin-left: 7px;
}

.autoMap_var_AI_div .checkbox-dropdown .checkbox-item input[type="checkbox"] {
	margin-right: 3px;
}

.autoMap_var_AI_div .checkbox-dropdown .checkbox-item label {
	margin: 0;
	cursor: pointer;
}

.progress-wrapper {
	text-align: center;
	margin-top: 30px;
	font-family: Arial, sans-serif;
}

.progress-bar {
	width: 400px;
	height: 20px;
	background-color: #eee;
	margin: 0 auto;
	border: 1px solid #ccc;
	border-radius: 5px;
	overflow: hidden;
}

.progress-fill {
	height: 100%;
	width: 0%;
	background: linear-gradient(to right, #66b3ff, #3399ff);
	text-align: center;
	color: #000;
	font-size: 12px;
	line-height: 20px;
}



.auto-map-image-container {
	position: relative;
	width: 100%;
}

.auto-map-image-container img {
	width: 100%;
	display: block;
}

.auto-map-selection-box {
	border: 2px solid blue;
	position: absolute;
	pointer-events: none;
}

.custom-tooltip {
	position: absolute;
	background-color: #007bff;
	/* Bootstrap blue */
	color: white;
	padding: 4px 8px;
	font-size: 12px;
	border-radius: 4px;
	pointer-events: none;
	white-space: nowrap;
	z-index: 9999;
	display: none;
}

.selection-box .delete-btn {
	position: absolute;
	top: -8px;
	right: -8px;
	background-color: red;
	color: #ffffff;
	width: 20px;
	height: 20px;
	text-align: center;
	line-height: 16px;
	font-size: 12px;
	border-radius: 50%;
	cursor: pointer;
	z-index: 10;
	display: none;
	/* initially hidden */
}

.selection-box .delete-btn:hover {
	background-color: darkred !important;
}

.selection-box:hover .delete-btn {
	display: block;
}

/* import documnet styles end */

/* lookups styles start */

.query_configuration_container {
	font-family: Arial, sans-serif;
	max-width: 600px;
	/* padding: 20px; */
	height: 285px;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 5px;
	background-color: #fafafa;
}

.query_configuration_tabs {
	position: sticky;
	top: 0;
	z-index: 200;
	overflow: hidden;
	background-color: #eee;
	height: 25px;
	min-height: 25px;
}

.query_configuration_tabs p {
	color: black;
	background-color: inherit;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 4px 10px;
	transition: 0.3s;
	font-size: 13px;
	margin: 0px
}

.query_configuration_tabs p.active {
	background-color: #fafafa;
}

.query_configuration_tabs p:hover {
	background-color: #ddd;
}

.query_configuration_container .row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
}

.query_configuration_container .row select,
.query_configuration_container .row input {
	flex: 1;
	/* padding: 8px; */
	font-size: 14px;
	box-sizing: border-box;
}

.query_configuration_container .row button {
	padding: 5px 15px;
	font-size: 14px;
	background-color: #0F467C;
	color: white;
	border: none;
	cursor: pointer;
}

#popups .query_configuration {
	display: block;
	min-width: 600px;
	max-width: 600px;
	min-height: 400px;
}

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

.query_configuration .dialog_content {
	min-height: 300px !important;
	background: #f5f5f5;
	border-radius: 5px;
}

.query_configuration_container .query_configuration_box {
	padding: 0px 10px;
}

.query_configuration_container textarea {
	width: 100%;
	height: 120px;
	margin-top: 10px;
	padding: 8px;
	font-size: 14px;
	resize: none;
	box-sizing: border-box;
	border: 1px solid black;
}

.query_configuration_container .data-mapping-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 10px;
}

.query_configuration_container .data-mapping-table th,
.query_configuration_container .data-mapping-table td {
	border: 1px solid black;
	padding: 5px;
	text-align: left;
}

.query_configuration_container .data-mapping-table th {
	background-color: #f2f2f2;
}

.query_configuration_container .api-error-handling {
	margin-top: 15px;
	padding: 5px;
	border: 1px solid #ccc;
	background: #f9f9f9;
}

.query_configuration_container .data-mapping-container {
	display: inline-block;
	border: 1px solid #ccc;
	padding: 5px;
	border-radius: 5px;
	margin-top: 10px;
	width: 100%;
}

.query_configuration_container .data-mapping-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 10px;
}

.query_configuration_container .data-mapping-table th,
.query_configuration_container .data-mapping-table td {
	border: 1px solid #aaa;
	padding: 6px;
	text-align: left;
}

.query_configuration_container .data-mapping-table th {
	background-color: #f2f2f2;
	font-weight: bold;
}

.query_configuration_container .data-mapping-table_btns {
	display: flex;
}

.query_configuration_container .data-mapping-container p {
	margin: 0px;
}

.query_configuration_container .button-container {
	display: block;
	justify-content: flex-end;
	/* Align buttons to the right */
	margin-top: 5px;
	gap: 5px;
	margin-left: 10px;
}

#popups .query_configuration .dialog_content table #popup-tr-undefined th {
	display: table-cell !important;
	color: black;
	font-weight: 500;
	font-family: 'Poppins', Arial, Helvetica, sans-serif;
	;
}

;

.query_configuration_container .add-btn,
.query_configuration_container .remove-btn {
	padding: 4px 30px !important;
	font-size: 14px;
	background-color: #ddd;
	color: black;
	border: 1px solid #888;
	cursor: pointer;
	border-radius: 3px;
}

.query_configuration_container .add-btn {
	padding: 1px 20px !important;
}

.query_configuration_container .remove-btn {
	padding: 1px 21px !important;
	margin-top: 5px;
}

.query_configuration_container .add-btn:hover {
	background-color: #c8e6c9;
	/* Light green */
}

.query_configuration_container .remove-btn:hover {
	background-color: #ffcdd2;
	/* Light red */
}

.query_configuration_container label {
	margin-top: 0px !important;
}

.query_configuration_container .api-error-handling p {
	margin: 0px;
}

#lookup_view_contanier ul.nested {
	margin-left: 15px !important;
}

/* add new lookup styles start */
.addnewlookups_container {
	max-width: 300px !important;
	min-width: 350px !important;
	min-height: 225px !important;
}

.addnewlookups_container_div .addlookup_form .row {
	display: flex;
	margin-top: 10px;
}

/* .addnewlookups_container_div .addlookup_form .row input{
	width: auto !important;
} */
.addnewlookups_container_div .addlookup_form .row label {
	width: 45%;
}

.addlookup_form input {
	width: 54% !important;
}

.addlookup_form select {
	width: 54% !important;
}

.addnewlookups_container .dialog_content {
	min-height: 130px !important;
	background: #fafafa;
}

.configure_source_container {
	min-height: 350px !important;
}

.configure_source_container .dialog_content {
	min-height: 250px !important;
	background: #fafafa;
}

.configure_source_form p {
	margin: 0;
}

.configure_source_form .row {
	display: flex;
}

.lookup-page-caret {
	background: url(images/icons/collapse.png) no-repeat center;
	width: 5%;
	height: 40px;
	display: inline-flex;
	align-items: center;
	flex-direction: row;
	margin: 0;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	float: left !important;
	filter: var(--menu-icons-filter);
}

.lookup-page-caret::before {
	background: url(images/icons/collapse.png) no-repeat center;
	width: 5%;
	height: 40px;
	display: inline-flex;
	align-items: center;
	flex-direction: row;
	margin: 0;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	float: left !important;
	filter: var(--menu-icons-filter);
}

.lookup-page-caret-down {
	background: url(images/icons/expand.png) no-repeat center;
	width: 5%;
	height: 40px;
	display: inline-flex;
	align-items: center;
	flex-direction: row;
	margin: 0;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	float: left !important;
	filter: var(--menu-icons-filter);
}

.lookup-nested {
	display: none;
}

.lookup-active {
	display: block;
}

.lookup-page-caret1 {
	background: url(images/icons/collapse.png) no-repeat center;
	width: 5%;
	height: 20px;
	display: inline-flex;
	align-items: center;
	flex-direction: row;
	margin: 0;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	float: left !important;
	filter: var(--menu-icons-filter);
	margin-right: 5px;

}

.lookup-nested {
	padding-left: 0;
	/* Remove any extra indentation */
}

.lookup-item {
	list-style: none;
	/* Remove bullet points */
	/* margin-left	: 0; Align items properly */
	padding: 5px 10px !important;
	/* Adjust spacing */
	/* display: flex;
    flex-direction: column; */
	align-items: center;
	position: relative;
}

.lookup-nested1 .query_li {
	padding: 5px 0px 5px 25px;
}

.lookup-item>.lookup-nested1 {
	padding-left: 20px;
	/* Indent queries only */
}

.lookup-item .actions span {
	cursor: pointer;
}

#popups .confirm_delete_popup_lookup {
	max-height: 130px !important;
	min-height: 130px !important;
	max-width: 350px !important;
}

.lookup-item .lookup-nested1 .actions {
	right: 3px !important;
}

.lookup-page-caret1::before {
	background: url(images/icons/collapse.png) no-repeat center;
	width: 5%;
	height: 20px;
	display: inline-flex;
	align-items: center;
	flex-direction: row;
	margin: 0;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	float: left !important;
	filter: var(--menu-icons-filter);
	/* padding: 5px 15px; */
	margin-right: 5px;
}

.lookup-page-caret-down1 {
	background: url(images/icons/expand.png) no-repeat center;
	width: 5%;
	height: 20px;
	display: inline-flex;
	align-items: center;
	flex-direction: row;
	margin: 0;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	float: left !important;
	filter: var(--menu-icons-filter);
	margin-right: 5px;
	/* padding: 5px 15px; */
}

.lookup-nested1 {
	display: none;
}

.lookup-active1 {
	display: block;
}

#lookups_list {
	padding-left: 0;
	/* Remove unwanted nesting space */
	margin-left: 0;
	list-style: none;
}

.lookup-item .context-menu {
	display: none;
	position: absolute;
	background: white;
	box-shadow: 0px 4px 6px rgb(12 8 8 / 53%);
	border-radius: 5px;
	padding: 5px 0;
	list-style: none;
	min-width: 150px !important;
	width: 150px !important;
	z-index: 1000;
	right: 0 !important;
	top: 20px !important;
	left: 95px !important;
}

.query_li .nested-context-menu {
	display: none;
	position: absolute;
	background: white;
	box-shadow: 0px 4px 6px rgb(12 8 8 / 53%);
	border-radius: 5px;
	padding: 5px 0;
	list-style: none;
	min-width: 150px !important;
	width: 150px !important;
	z-index: 1000;
	right: 0 !important;
	top: 22px !important;
	left: 68px !important;
}

.query_li .nested-context-menu li {
	padding: 8px 12px;
	cursor: pointer;
}

.query_li .nested-context-menu li:hover {
	background: #f0f0f0;
}

.lookup-item .context-menu li {
	padding: 8px 12px;
	cursor: pointer;
}

.lookup-item .context-menu li:hover {
	background: #f0f0f0;
}

.renameLookup_container {
	max-height: 160px !important;
	max-width: 300px !important;
}

.query_configuration_container #delimeter_div {
	width: 48%;
}

.query_configuration_container .row #delimeter_label {
	width: 36%;
}

/* lookup styles end */

/* Gui actions */
.gui_actions {
	position: absolute;
	pointer-events: none;
	left: 0;
	top: 0;
	width: fit-content;
	width: -webkit-fit-content;
	z-index: 6000;
}

.gui_actions .gui_actions_tools {
	display: flex;
	align-items: center;
	flex-direction: row;
	height: 36px;
	border-radius: 36px;
	background-color: var(--actions-background-color);
	padding-left: 2px;
	padding-right: 2px;
	box-sizing: border-box;
	box-shadow: 0px 4px 16px 0px #00000014;
	border: 1px solid #0000001A;
	gap: 5px;
}

.gui_actions .gui_actions_tools .gui_actions_tool .gui_actions_tool_container button:hover {
	background-color: #eee !important;
	border-radius: 36px;
}

.gui_actions .gui_actions_tools .gui_actions_tool .gui_actions_tool_container button.active_action_btn {
	background-color: #eee !important;
	border-radius: 36px;
}

.gui_actions .gui_actions_tools .gui_actions_tool .gui_actions_tool_container button {
	padding: 0px 5px 0px 5px;
	border: none !important;
	box-shadow: none !important;
	height: 32px;
	border-radius: 36px;
	background-color: var(--actions-background-color);
}

/* rename.js css */
.manipulator_container {
	/* width: 430px !important;
    min-height: 235px !important; */
	min-width: 600px !important;
	max-width: 600px !important;
	min-height: 400px !important;
	min-height: 440px !important;
	max-height: 440px !important;
}

#popups .manipulator_container .dialog_content {
	min-height: 365px !important;
	max-height: 75px !important;
}

#popups .manipulator_container .dialog_content table {
	background-color: white;
}

#popups .manipulator_container .dialog_content::-webkit-scrollbar {
	width: 5px !important;
}

#popups .manipulator_container .dialog_content table th {
	color: #333;
	text-align: left !important;
	padding: 5px !important;
	background: #fafafa;
	font-size: 13px !important;
	border: 1px solid #f1f1f1;
	z-index: 100;
	vertical-align: middle;
	font-weight: 500;
	font-family: 'Poppins', Arial, Helvetica, sans-serif;
	;
}


#popups .manipulator_container .dialog_content table td {
	border: 1px solid #f1f1f1 !important;
	font-size: 12px !important;
	color: #333;
	white-space: nowrap;
	text-overflow: ellipsis !important;
	overflow: hidden !important;
	padding: 10px !important;
	text-align: center !important;
}

#popups .manipulator_container .dialog_content table td.checkbox {
	display: inline-flex;
	align-items: center;
	flex-direction: row;
	justify-content: flex-start;
	width: 100%;
	padding: 0px !important;
	padding-left: 10px !important;
}

#popups .manipulator_container .dialog_content table input[type="text"] {
	width: 142px;
	background: white !important;
	border: 1px solid #ccc !important;
	color: black !important;
	height: 25px;
}

#popups .manipulator_container .dialog_content table input[type="number"] {
	width: 142px;
	background: white !important;
	border: 1px solid #ccc !important;
	color: black !important;
	height: 25px;
}

#popups .manipulator_container .dialog_content table select {
	width: 142px;
	background: white !important;
	border: 1px solid #ccc !important;
	color: black !important;
	height: 25px;
}

#popups .manipulator_container .dialog_content .obj_prop_config_icon_container {
	display: flex;
	align-items: center;
	flex-direction: row;
}

/* Root layout */
#popups .manipulator_container .manip-root {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 12px;
	min-height: 280px;
}

/* Left panel */
#popups .manipulator_container .manip-left {
	border: 1px solid #ccc;
	display: flex;
	flex-direction: column;
}

#popups .manipulator_container .manip-list {
	flex: 1;
	overflow-y: auto;
}

#popups .manipulator_container .manip-item {
	padding: 6px;
	cursor: pointer;
	border-bottom: 1px solid #eee;
}

#popups .manipulator_container .manip-item:hover {
	background: #f5f5f5;
}

#popups .manipulator_container .manip-item.selected {
	background: #1976d2;
	color: white;
}

/* Footer buttons */
#popups .manipulator_container .manip-footer {
	padding: 6px;
	border-top: 1px solid #eee;
	display: flex;
	gap: 6px;
	justify-content: flex-end;
}

.popups .manipulator_container .manip-btn {
	padding: 4px 10px;
	border: 1px solid #999;
	background: #f9f9f9;
	cursor: pointer;
}

.popups .manipulator_container .manip-btn:hover {
	background: #e0e0e0;
}

.popups .manipulator_container .manip-btn.danger {
	border-color: #d9534f;
	color: #d9534f;
}

/* Right panel */
.popups .manipulator_container .manip-right {
	border: 1px solid #ccc;
	padding: 8px;
}

.popups .manipulator_container .empty-msg {
	color: #666;
	font-style: italic;
	text-align: center;
	margin-top: 30px;
}

/* Property table */
.popups .manipulator_container .prop-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

#popups .manipulator_container .prop-table th,
#popups .manipulator_container .prop-table td {
	padding: 6px;
	text-align: left;
	border-bottom: 1px solid #eee;
	vertical-align: middle;
}

.popups .manipulator_container .prop-table input,
.popups .manipulator_container .prop-table select {
	width: 95%;
	padding: 4px;
	font-size: 13px;
}

.manip-root #delete-manipulator {
	cursor: pointer;
	padding: 0px 3px 0px 3px;
	width: 10%;
	height: 19px;
	background: transparent url(images/icons/deletedatabase.png) no-repeat center center;
	filter: brightness(0) invert(0.5);
}

.manip-root #delete-manipulator.selected {
	filter: brightness(0) invert(1);
	/* white when row is selected */
}

.sub-row td:first-child {
	padding-left: 25px;
}

.sub-row td .inputField {
	width: 100%;
	border: 1px solid var(--input-border-color) !important;
}

/* Updating Overlay */
.updating-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(33, 150, 243, 0.15);
	backdrop-filter: blur(1px);
	opacity: 0;
	pointer-events: none;
	transition: all 0.3s ease;
	overflow: hidden;
}

.updating-overlay::before {
	content: "";
	position: absolute;
	top: 0;
	left: -50%;
	width: 50%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(33, 150, 243, 0.3), transparent);
	animation: shimmer 1.5s infinite;
}

.updating-overlay span {
	color: var(--brand-color);
	font-size: 12px;
	font-weight: 500;
	z-index: 2;
}

.updating-overlay.active {
	opacity: 1;
}

@keyframes shimmer {
	0% {
		left: -50%;
	}

	100% {
		left: 100%;
	}
}

.json-path-row,
#popup-tr-jsonPath {
	display: none;
}

.add_ref_page_settings {
	max-width: 776px !important;
	min-width: 776px !important;
	height: 510px !important;
	max-height: 510px !important;
	min-height: 510px !important;
}

.add_ref_page_settings .add_ref_page_settings_container {
	width: 750px;
	height: 405px;
	gap: 10px;
}

.add_ref_page_settings .add_ref_page_settings_container .master_template_childs_list,
.add_ref_page_settings .add_ref_page_settings_container .add_ref_page_list {
	width: 50%;
	overflow: auto;
	height: 100%;
	border: 1px solid #ccc;
	padding: 5px;
	border-radius: 5px;
	position: relative;
}

.add_ref_page_settings .add_ref_page_settings_container .master_template_childs_list::-webkit-scrollbar,
.add_ref_page_settings .add_ref_page_settings_container .add_ref_page_list::-webkit-scrollbar {
	width: 5px;
}


.child-template-title-container label {
	margin: 0px !important;
}

#filtering_enabled_row {
	display: none;
}

.pdf_background {
	height: 100%;
	width: 100%;
}

/* Page actions */
.copy_with_options {
	width: 500px !important;
	min-width: 500px !important;
	max-width: 500px !important;
	height: 300px !important;
	min-height: 300px !important;
	max-height: 300px !important;
}

.copy_with_options .cwcop_container {
	height: 188px;
	width: 479px;
	overflow: none;
}

.copy_with_options .cwcop_container::-webkit-scrollbar {
	width: 12px;
}

.copy_with_options .cwcop_container::-webkit-scrollbar-track {
	background: #fbfcfd;
	border-radius: 0;
}

.copy_with_options .cwcop_container::-webkit-scrollbar-thumb {
	background: #fbfcfd;
	border-radius: 10px;
	border: 3px solid #fbfcfd;
	/* Matches track to create padding */
}

.copy_with_options .cwcop_container::-webkit-scrollbar-thumb:hover {
	background: #fbfcfd;
}

.copy_with_options .cwcop_container::-webkit-scrollbar-button:single-button {
	background-color: #fbfcfd;
	display: block;
	height: 14px;
	width: 12px;
}

.copy_with_options .cwcop_container::-webkit-scrollbar-button:single-button:vertical:decrement {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="%2396a8b6"><path d="M12 8l6 8H6z"/></svg>');
	background-repeat: no-repeat;
	background-position: center center;
}

.copy_with_options .cwcop_container::-webkit-scrollbar-button:single-button:vertical:increment {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="%2396a8b6"><path d="M12 16l6-8H6z"/></svg>');
	background-repeat: no-repeat;
	background-position: center center;
}
/* #popup-Header,#popup-Body,#popup-Footer{
margin-top: 32px;} */
/* Thin */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

/* Thin Italic */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

/* Extra Light */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

/* Extra Light Italic */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-ExtraLightItalic.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

/* Light */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Light Italic */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* Regular (Normal.ttf) */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Normal.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Italic */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Medium */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Medium Italic */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* SemiBold */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* SemiBold Italic */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* Bold */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Bold Italic */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Extra Bold */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Extra Bold Italic */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-ExtraBoldItalic.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

/* Black */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Black Italic */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

#mydiv {
  background-color: white;
  height: 310px;
}

.comp_table1 td select {
  width: 100%;
  height: 100%;
}

.comp_table1 .td_flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#popups .popup.compwide {
  max-width: 725px !important;
  min-width: 725px !important;
  width: 725px !important;
  font-size: 1.2rem !important;
  font-family: 'Poppins', sans-serif !important;

  font-weight: normal !important;
}

#popups .popup.nodeview {

  font-size: 1.1rem !important;
  font-family: 'Poppins', sans-serif !important;

  font-weight: normal !important;
}

/* #popups .popup.compwide.h2{

  font-size: 1.6rem !important;
    font-family: 'Poppins', sans-serif; !important;
   
    font-weight: normal !important;
} */
#myxml {
  background-color: white;
  height: 310px;
  width: 704px;
}

#button_Main {

  display: none;

}

.delcolumn {
  background: url(images/icons/del_icon.svg) center center no-repeat !important;
  height: 20px !important;
  width: 30px !important;
  box-shadow: none !important;
  border: 0;
  background-color: transparent !important;
  margin: 0px !important;
  border-left: 1px solid #ccc !important;
  border-radius: 0px !important;

}


#button_Header,
#button_Body,
#button_Footer,
.comp-button {

  background: url(images/icons/plus_ic.svg) center center no-repeat;
  height: 20px;
  width: 30px;
  border: 0;
  box-shadow: none;
  background-color: transparent;
  margin: 0px;
  border-left: 1px solid #ccc;
  border-radius: 0px;


}

#popups .popup.nodeview {
  max-width: 725px !important;
  min-width: 725px !important;
  width: 725px !important;
  max-height: 427px !important;
  min-height: 427px !important;
  height: 427px !important;
}

.comp-context-menu.is-active {
  visibility: visible;
  pointer-events: auto;
}

.node-context-left {

  float: left;
  width: 100%;

}

.comp-context-left {

  float: left;
  width: 50%;

}

.comp-context-right {

  float: left;
  width: 50%;

}

.comp-context-menu {
  position: absolute;
  visibility: hidden;
  text-align: center;
  background: lightgray;
  pointer-events: none;
  z-index: 99;
  /* border: 1px solid black;*/
}

.comp-context-menu ul {
  padding: 0px;
  margin: 0px;
  min-width: 90px;
  list-style: none;
}

.comp-context-menu ul li {
  /* padding-bottom: 7px;
  padding-top: 7px;
  border: 1px solid black;*/
}

.comp-context-menu ul li a {
  text-decoration: none !important;
  color: black !important;
}

.comp-context-menu ul li:hover {
  background: darkgray;
}

#Comp_Header {
  display: none;
}

#Comp_Body {
  display: none;
}

#Comp_Footer {
  display: none;
}

.inputField {
  height: 100%;
  background: transparent !important;
  border: 0 !important;
  width: 90%;
}

.comp_mrg0A {
  margin: 0px;
  /*height: 300px;*/
}

.comp_hdbg {
  background: #003366;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  padding: 10px 20px;
}

.comp_br {
  background: #f9f9f9;
}

.chart_comp_whitebg {
  background: #fff;
  border: 1px solid #ccc;
  color: #000;
  margin: 2px;
  height: 100%;
  overflow: hidden;
}

.comp_whitebg {
  background: #fff;
  border: 1px solid #ccc;
  color: #000;
  margin: 2px;
  height: 100%
    /*250px*/
  ;
  overflow: auto;
}

.comp_whitebg::-webkit-scrollbar {
  width: 5px !important;
  height: 5px;
}

.comp_table1 {
  border: 1px solid #ccc;
  font-size: 16px;
  color: black;
}

.comp_table1 th {
  border: 1px solid #ccc;
  background: #f0f0f0;
  font-weight: bold;
  padding: 6px 12px;
}

.comp_table1 td {
  border: 1px solid #ccc;
  padding: 3px;
  height: 32px !important;
}

.comp_table1 th {
  height: auto !important;
}

.comp_table1 td.dotsbg {
  /*	background: url(dots.png) no-repeat center left;*/
  padding-left: 35px;
}

/* simple tree */
.comp-simple-tree {
  user-select: none;
  -moz-user-select: none;
}

.comp-simple-tree>details>summary {
  display: none;
}

.comp-simple-tree a,
.comp-simple-tree summary {
  display: block;
  width: fit-content;
  width: -moz-fit-content;
  border: solid 1px transparent;
  padding: 0 2px;
  outline: none;
  cursor: pointer;
}

.comp-simple-tree a {
  text-decoration: none;
  color: inherit !important;
}

.comp-simple-tree ::-webkit-details-marker {
  display: none;
}

.comp-simple-tree summary {
  list-style-type: none;
  /* background-color: #eee; */
  outline: none;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  height: 28px;
  border-bottom: 1px solid #ccc;
}

.comp-simple-tree summary .summary_title {
  margin: 0 !important;
  width: 90%;
  height: 100%;
  display: inline-flex;
  align-items: center;
}

.comp-simple-tree summary .line_separator {
  width: 1px;
  height: 100%;
}

.comp-simple-tree.dark summary {
  background-color: #444;
}

.comp-simple-tree details>:not(details),
.comp-simple-tree details {
  position: relative;
}

.comp-simple-tree details :not(summary) {
  margin-left: 18px;
}

.comp-simple-tree.nodots details :not(summary) {
  margin-left: 12px;
}

.comp-simple-tree details::before,
.comp-simple-tree details>:not(details)::before {
  content: '';
  width: 10px;
  display: block;
  position: absolute;
}

.comp-simple-tree details::before,
.comp-simple-tree details>:not(details)::before {
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 2 2" xmlns="http://www.w3.org/2000/svg"><g><rect x="0" y="0" width="1" height="1"/></g></svg>') left top / 2px 2px;
}

.comp-simple-tree.dark details::before,
.comp-simple-tree.dark details>:not(summary)::before {
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 2 2" xmlns="http://www.w3.org/2000/svg"><g><rect x="0" y="0" width="1" height="1" fill="white"/></g></svg>');
}

.comp-simple-tree.nodots details::before,
.comp-simple-tree.nodots details>:not(summary)::before {
  background-image: none;
}

.comp-simple-tree details::before {
  top: 0;
  height: 100%;
  background-repeat: repeat-y;
  left: 5px;
  z-index: -1;
}

/* #popups .popup table  tbody{
  background-color: white;
} */
.comp-simple-tree details>:not(details)::before {
  top: 8px;
  height: calc(100% - 8px);
  background-repeat: repeat-x;
  left: -15px;
}

/* .comp-simple-tree details>a:active {
    background-color: #beebff;
    border-color: #99defd;
    z-index: 1;
    } */
.comp-simple-tree details>a {
  width: 93%;
  display: inline-flex;
  align-items: center;
  height: 28px;
  border-bottom: 1px solid #ccc;
  justify-content: space-between;
}

.comp-simple-tree details>a>.summary_title {
  margin: 0 !important;
  width: 90%;
  height: 100%;
  display: inline-flex;
  align-items: center;
}

.comp-simple-tree details>a::before {
  display: none;
}

.comp-simple-tree details>summary::before {
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><g><rect x="0" y="0" width="12" height="12" fill="white" stroke="gray" stroke-width="1"/><line x1="3" y1="6" x2="9" y2="6" stroke="black" stroke-width="2"/><line x1="6" y1="3" x2="6" y2="9" stroke="black" stroke-width="2"/></g></svg>') center center / 12px 12px no-repeat;
  left: -22px;
  top: 5px;
  width: 16px;
  height: 16px;
}

.comp-simple-tree details[open]>summary::before {
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><title/><g><rect x="0" y="0" width="12" height="12" fill="white" stroke="gray" stroke-width="1"/><line x1="3" y1="6" x2="9" y2="6" stroke="black" stroke-width="2"/></g></svg>');
}

/* async tree */
.async-tree details[open][data-loaded=false] {
  pointer-events: none;
}

.async-tree details[open][data-loaded=false]>summary::before {
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g><animateTransform attributeName="transform" type="rotate" from="0 32 32" to="360 32 32" dur="1s" repeatCount="indefinite"/><circle cx="32" cy="32" r="32" fill="whitesmoke"/><path d="M 62 32 A 30 30 0 0 0 32 2" style="stroke: black; stroke-width:6; fill:none;"/></g></svg>');
}

.async-tree.black details[open][data-loaded=false]>summary::before {
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g><animateTransform attributeName="transform" type="rotate" from="0 32 32" to="360 32 32" dur="1s" repeatCount="indefinite"/><circle cx="32" cy="32" r="32" fill="whitesmoke"/><path d="M 62 32 A 30 30 0 0 0 32 2" style="stroke: white; stroke-width:6; fill:none;"/></g></svg>');
}

/* select tree */
.comp_selected {}

.select-tree .comp_selected>span {
  background-color: var(--active-tag-color) !important;
  z-index: 1;
  color: #ffffff;
}

.select-tree.dark .selected {
  background-color: #3a484e;
  border-color: #99defd;
}

/* function configurations */
.function_format_configurations {
  max-width: 850px !important;
  min-width: 850px !important;
  width: 850px !important;
  height: 510px !important;
  max-height: 510px !important;
  min-height: 510px !important;
}

.function_format_configurations_container {
  width: 830px;
  height: 395px;
}

.function_format_configurations_container .function-mappings-section select,
.function_format_configurations_container .function-mappings-section input[type="text"] {
  height: 32px;
}

.function_format_configurations_container label {
  margin: 0 !important;
}

.function_format_configurations .function-config-container {
  width: 100%;
  height: 100%;
}

.function_format_configurations_container .function-config-section button {
  background-color: var(--brand-color);
  color: #ffffff;
  padding: 4px 10px 4px 10px;
  border-radius: 4px;
  height: 30px;
  width: 50px;
}

.function_format_configurations_container .function-config-section textarea {
  resize: none;
  padding: 5px;
}

.function-mappings {
  width: 100%;
}
/* Thin */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

/* Thin Italic */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

/* Extra Light */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

/* Extra Light Italic */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-ExtraLightItalic.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

/* Light */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Light Italic */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* Regular (Normal.ttf) */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Normal.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Italic */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Medium */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Medium Italic */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* SemiBold */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* SemiBold Italic */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* Bold */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Bold Italic */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Extra Bold */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Extra Bold Italic */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-ExtraBoldItalic.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

/* Black */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Black Italic */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* Function Configurations */
.ct_function {
  max-width: 776px !important;
  min-width: 776px !important;
  width: 776px !important;
  height: 510px !important;
  max-height: 510px !important;
  min-height: 510px !important;
}

.ct_function div[data-id='params_content'] {
  height: 400px;
}

.ct_function div[data-id='params_content'] input {
  width: 100% !important;
}

.ct_function div[data-id='params_content'] textarea {
  height: 240px;
}

/* data mapper's process simple function config css */
.function_composition {
  width: 500px !important;
  max-width: 500px !important;
  min-width: 500px !important;
  height: 495px !important;
  max-height: 495px !important;
  min-height: 495px !important;
}

.function-config-container {
  width: 475px;
  height: 375px;
}

.function-config-body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.function-config-selection-section {
  height: 15%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.function-config-selection-section label {
  margin: 0px;
}

.function-config-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 8px;
  letter-spacing: 0.025em;
}

.function-config-select {
  width: 100%;
  border-radius: 6px;
  color: #374151;
  font-size: 12px;
  outline: none;
  transition: border-color 0.2s;
  height: 32px;
}

.function-config-select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.function-config-mapping-list {
  background-color: #f3f4f6;
  padding: 8px;
  border-radius: 8px;
  height: 154px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.function-config-mapping-list::-webkit-scrollbar {
  width: 5px;
}

.function-config-row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 32px;
}

.function-config-row:last-child {
  margin-bottom: 0;
}

.function-config-var-badge {
  background-color: #e5e7eb;
  color: #4b5563;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  min-width: 70px;
  text-align: center;
}

.function-config-arrow {
  color: #9ca3af;
  font-weight: bold;
}

/* page define actions execute function css */
.execute_function {
  width: 776px !important;
  min-width: 776px !important;
  max-width: 776px !important;
  height: 510px !important;
  max-height: 510px !important;
  min-height: 510px !important;
}

.execute_function .function-config-container {
  height: 395px;
  width: 755px;
}

.function-config-mapping-list-container {
  gap: 5px;
  height: 85%;
}

.function-config-mapping-list-container .function-config-section {
  width: 50%;
}

.function-config-mapping-list-container .function-config-mapping-list {
  height: 240px !important;
  padding: 5px !important;
}

.function-config-mapping-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
}

.global-function-op-list select {
  width: 100%;
  height: 30px;
}

.global-function-op-list th {
  font-size: 12px !important;
}

.function-config-mapping-list-header button {
  box-shadow: 0 1px 2px 0 var(--button-shadow-color), 0 1px 0 0 rgba(255, 255, 255, 0.1) inset;
  cursor: pointer;
  border: 1px solid var(--border-color);
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  background-color: var(--brand-color);
  color: #ffffff;
  padding: 4px 10px 4px 10px;
  border-radius: 4px;
  height: 32px;
  width: 100px;
}

/* ============================================================
   GLOBAL CONFIGURATION POPUP � REVAMPED UI
   All colors/fonts inherit from app CSS variables
   ============================================================ */

.global_config {
  max-width: 860px !important;
  width: 860px !important;
  height: 540px !important;
  max-height: 540px !important;
  min-height: 540px !important;
}

.global_config .dialog_content {
  max-height: 445px !important;
  min-height: 445px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.obj_prop {
  width: 430px !important;
  min-height: 235px !important;
}

.performa {
  min-height: 328px !important;
  max-height: 328px !important;
  max-width: 530px !important;
  min-width: 530px !important;
}

#popups .global_config .dialog_content {
  overflow: hidden !important;
  padding: 0 !important;
}

/* -- Main layout wrapper -- */
.global_config_container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 445px;
  padding: 0 !important;
  gap: 0;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  background: #f4f6fb;
  overflow: hidden;
}

/* -- LEFT SIDEBAR -- */
.gc_leftside {
  width: 210px;
  min-width: 210px;
  max-width: 210px;
  height: 100%;
  background: #ffffff;
  border-right: 1px solid #e8ecf4;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}

.gc_leftside .gc_title {
  display: block;
  width: 100%;
  padding: 14px 16px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a94a6;
  background: #ffffff;
  border-bottom: 1px solid #f0f3f9;
  box-sizing: border-box;
}

.gc_leftside ul {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  flex: 1;
  overflow-y: auto;
}

.gc_leftside ul::-webkit-scrollbar {
  width: 3px;
}

.gc_leftside ul::-webkit-scrollbar-thumb {
  background: #dde3ef;
  border-radius: 3px;
}

.gc_leftside ul li {
  padding: 1px 8px;
}

.gc_leftside ul li .global_items {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-size: 12.5px;
  font-weight: 500;
  color: #4a5568;
  user-select: none;
}

.gc_leftside ul li .global_items .global_items_names span {
  font-size: 12.5px;
  font-weight: 500;
  color: inherit;
  pointer-events: none;
}

.gc_leftside ul li:hover .global_items {
  background: #f0f4ff;
  color: var(--brand-color, #3b5bdb);
}

.gc_leftside ul li .global_items.selected {
  background: var(--brand-color, #3b5bdb);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(59, 91, 219, 0.25);
}

.gc_leftside ul li .global_items.selected .global_items_names span {
  color: #ffffff;
}

/* -- RIGHT CONTENT PANEL -- */
.gc_rightside {
  flex: 1;
  height: 100%;
  background: #f4f6fb;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* -- Module table card -- */
.global_config_table {
  display: none;
  flex-direction: column;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
  gap: 12px;
}

/* Table header bar (title + search + add button) */
.global_config_table>div:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #ffffff;
  border-radius: 10px 10px 0 0;
  padding: 10px 14px !important;
  border: 1px solid #e8ecf4;
  border-bottom: none;
  margin: 0 !important;
  box-sizing: border-box;
}

.global_config_table>div:first-child label {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1a202c !important;
  padding: 0 !important;
  white-space: nowrap;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  margin: 0 !important;
}

/* Table container */
.global_config_table .table-container {
  flex: 1;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #e8ecf4;
  border-radius: 0 0 10px 10px;
}

.global_config_table .table-container::-webkit-scrollbar {
  width: 5px;
}

.global_config_table .table-container::-webkit-scrollbar-thumb {
  background: #dde3ef;
  border-radius: 5px;
}

.global_config_table table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

.global_config_table table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #f8faff !important;
  color: #6b7280 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 12px !important;
  text-align: left !important;
  border-bottom: 1px solid #e8ecf4 !important;
  border-right: none !important;
  border-left: none !important;
  border-top: none !important;
  white-space: nowrap;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

#popups .global_config .global_add {
  background: url(images/icons/plus_ic.svg) no-repeat center center;
  width: 10px;
  height: 10px;
}

.global_config_table table tbody tr:last-child {
  border-bottom: none;
}

.global_config_table table tbody tr:hover {
  background: #f5f8ff;
}

.global_config_table table tbody td {
  padding: 9px 12px !important;
  font-size: 12.5px !important;
  color: #374151 !important;
  border: none !important;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 220px;
  text-align: left !important;
  vertical-align: middle;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

/* -- Action buttons in table rows -- */
.gc_buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  height: 100%;
  width: 100%;
}

.gc_update_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: url(images/icons/edit_icon.svg) no-repeat center center;
  background-size: 14px 14px;
  background-color: #eef2ff;
  cursor: pointer;
  margin: 0;
  transition: background-color 0.15s, transform 0.12s;
  border: 1px solid #dde3f8;
}

.gc_update_button:hover {
  background-color: #dbe4ff;
  transform: scale(1.05);
}

.gc_delete_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: url(images/icons/delete_icon.svg) no-repeat center center;
  background-size: 14px 14px;
  background-color: #fff5f5;
  cursor: pointer;
  margin: 0;
  transition: background-color 0.15s, transform 0.12s;
  border: 1px solid #fecaca;
}

.gc_delete_button:hover {
  background-color: #fee2e2;
  transform: scale(1.05);
}

/* -- Add button (top of table) -- */
.add-connections-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  background: var(--brand-color, #3b5bdb) !important;
  border: none !important;
  border-radius: 7px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  font-family: 'Poppins', Arial, Helvetica, sans-serif !important;
  transition: opacity 0.15s, transform 0.12s !important;
  box-shadow: 0 2px 6px rgba(59, 91, 219, 0.2) !important;
  width: auto !important;
  flex-shrink: 0 !important;
}

.add-connections-btn:hover {
  opacity: 0.88 !important;
  transform: translateY(-1px) !important;
  background: var(--active-tag-color, #2f4ac2) !important;
}

/* -- Search input wrapper -- */
.gc_leftside ul li,
.gc_rightside .global_config_table>div:first-child>div[style] {
  box-sizing: border-box;
}

/* -- DB Info popup -- */
.global_config_db {
  max-width: 780px !important;
  width: 780px !important;
  height: 510px !important;
  max-height: 510px !important;
  min-height: 510px !important;
}

.global_config_db .dialog_content {
  max-height: 415px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.global_config_db .global_config_db_container {
  display: flex;
  flex-direction: column;
  height: 415px;
  width: 100%;
  padding: 20px;
  gap: 0;
  box-sizing: border-box;
  background: #f4f6fb;
}

.global_config_db .global_config_db_container .global_config_db_config {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e8ecf4;
  padding: 18px 20px;
  box-sizing: border-box;
  overflow: hidden;
}

.global_config_db .global_config_db_container .global_config_db_config .global_config_db_fields {
  display: flex;
  flex-direction: column;
  color: #1a202c;
  font-size: 12px;
  flex: 1;
  overflow: hidden;
}

.global_config_db .global_config_db_container .global_config_db_config .global_config_db_data {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
  padding: 0;
  border: none;
  border-radius: 0;
  overflow: hidden;
  align-content: start;
}

.global_config_db .global_config_db_container .global_config_db_config .global_config_db_params {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: auto;
  position: relative;
}

.global_config_db .global_config_db_container .global_config_db_config label {
  margin: 0;
  width: 100%;
  height: auto;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-left: 2px;
  line-height: 1.4;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

.global_config_db .global_config_db_container .global_config_db_config select,
.global_config_db .global_config_db_container .global_config_db_config input[type="text"],
.global_config_db .global_config_db_container .global_config_db_config input[type="password"] {
  background: #ffffff !important;
  width: 100% !important;
  color: #1a202c !important;
  border: 1px solid #d1d9e6 !important;
  border-radius: 7px !important;
  height: 34px !important;
  font-size: 12.5px !important;
  padding: 0 10px !important;
  font-family: 'Poppins', Arial, Helvetica, sans-serif !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  box-sizing: border-box !important;
}

.global_config_db .global_config_db_container .global_config_db_config select:focus,
.global_config_db .global_config_db_container .global_config_db_config input[type="text"]:focus,
.global_config_db .global_config_db_container .global_config_db_config input[type="password"]:focus {
  border-color: var(--brand-color, #3b5bdb) !important;
  box-shadow: 0 0 0 3px rgba(59, 91, 219, 0.1) !important;
  outline: none !important;
}

.global_config_db .global_config_db_container .global_config_db_config .global_config_db_buttons {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 8px;
  height: auto;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #f0f3f9;
}

.global_config_db .global_config_db_container .global_config_db_config .global_config_db_buttons input[type="button"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 34px !important;
  padding: 0 16px !important;
  border-radius: 7px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  font-family: 'Poppins', Arial, Helvetica, sans-serif !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  border: 1px solid #d1d9e6 !important;
  background: #ffffff !important;
  color: #374151 !important;
}

.global_config_db .global_config_db_container .global_config_db_config .global_config_db_buttons input[type="button"]#global_config_db_test {
  background: var(--brand-color, #3b5bdb) !important;
  color: #ffffff !important;
  border-color: var(--brand-color, #3b5bdb) !important;
}

.global_config_db .global_config_db_container .global_config_db_config .global_config_db_buttons input[type="button"]:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

#popups>.global_config_db>.buttons>button:disabled {
  visibility: visible !important;
  background-color: rgba(239, 239, 239, 0.3) !important;
  color: rgba(16, 16, 16, 0.3) !important;
  border-color: rgba(118, 118, 118, 0.3) !important;
}

/* legacy selectors kept for backwards compat */
.gc_leftside .gc_title {
  border-radius: 0;
}

#popups .global_config .global_add {
  background: url(images/icons/plus_ic.png) no-repeat center center;
  width: 10px;
  height: 10px;
}

#popups .global_config .global_add:hover {
  cursor: pointer;
}

/* -- Loader -- */
.global_config_loader-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 445px;
  width: 100%;
  background: #f4f6fb;
}

.global_config_loader {
  width: 40px;
  height: 40px;
  border: 3px solid #e8ecf4;
  border-top-color: var(--brand-color, #3b5bdb);
  border-radius: 50%;
  animation: gcSpin 0.8s linear infinite;
}

@keyframes gcSpin {
  to {
    transform: rotate(360deg);
  }
}


/* dig sig */
.dig_sig {
  max-width: 776px !important;
  height: 510px !important;
  max-height: 510px !important;
}

.dig_sig .dialog_content {
  max-height: 410px !important;
}

.dig_sig_container {
  width: 750px;
  height: 395px;
  padding: 10px !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid #ccc;
}

.dig_sig_name {
  height: 25px;
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
}

.dig_sig_name span {
  width: 170px;
}

.dig_sig_name input {
  height: 100%;
}

.dig_sig_details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.dig_sig_details_box {
  padding: 10px;
  border: 1px solid #ccc;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.dig_sig_data_inputs {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.dig_sig_inputs_data {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  height: 25px;
}

.dig_sig_inputs_data span {
  width: 80px;
}

.dig_sig_inputs_data input[type='text'] {
  height: 100%;
  width: 575px !important;
}

.dig_sig_inputs_data input[type='password'] {
  height: 100%;
  width: 575px !important;
  background: var(--input-background-color);
  border: 1px solid var(--input-border-color);
  border-radius: var(--input-border-radius);
  color: var(--input-text-color);
  padding: 1px 5px;
  font-size: 12px;
}

.dig_sig_inputs_data input[type="checkbox"],
.dig_sig_inputs_data label {
  margin: 0 !important;
}

.dig_sig_inputs_data .dig_sig_inputs_button {
  border: 2px solid #ccc !important;
  height: 25px !important;
  width: 32px !important;
  border-radius: 5px !important;
  font-size: 20px !important;
  text-align: center !important;
  background-color: white !important;
  cursor: pointer !important;
}

.dig_sig_sign {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.dig_sig_sign_box {
  padding: 10px;
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.dig_sig_sign_box .dig_sig_sign_box_inputs {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  height: 25px;
}

.dig_sig_sign_box .dig_sig_sign_box_inputs span {
  width: 80px;
}

.dig_sig_sign_box input[type='text'] {
  height: 100%;
  width: 575px !important;
}

.dig_sig_sign_box input[type="checkbox"],
.dig_sig_sign_box label {
  margin: 0 !important;
}

/* user configuration css */
.user_config {
  display: block;
  max-width: 850px !important;
  min-height: 520px !important;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.user-config-loader {
  border: 8px solid #eee;
  border-top: 8px solid #cccc;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

.user-config-loader-container {
  width: 825px;
  height: 415px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-window-loader {
  border: 8px solid #eee;
  border-top: 8px solid #ccc;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

.chat-window-loader-container {
  width: 825px;
  height: 415px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat_window {
  display: block;
  max-width: 850px !important;
  min-height: 520px !important;
}

#popups .chat_window .dialog_content {
  min-height: 425px !important;
  overflow: hidden !important;
}

#popups .user_config .dialog_content {
  min-height: 415px !important;
  overflow: hidden !important;
  max-height: 415px !important;
  max-width: 848px !important;
  min-width: 848px !important;
}











#popups .global_config .dialog_content table #popup-tr-undefined th {
  display: table-cell !important;
  color: black;
  font-weight: 500;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  ;
}

;

/* Obj properties css */


#popups .obj_prop .dialog_content {
  min-height: 150px !important;
  max-height: 75px !important;
}

#popups .obj_prop .dialog_content table {
  background-color: white;
}

#popups .obj_prop .dialog_content::-webkit-scrollbar {
  width: 5px !important;
}

#popups .obj_prop .dialog_content table th {
  color: #333;
  text-align: left !important;
  padding: 5px !important;
  background: #fafafa;
  font-size: 13px !important;
  border: 1px solid #f1f1f1;
  z-index: 100;
  vertical-align: middle;
  font-weight: 500;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  ;
}


#popups .obj_prop .dialog_content table td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  padding: 10px !important;
}

#popups .obj_prop .dialog_content table td.checkbox {
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  justify-content: flex-start;
  width: 100%;
  padding: 0px !important;
  padding-left: 10px !important;
}

#popups .obj_prop .dialog_content table input[type="text"] {
  width: 260px;
  background: white !important;
  border: 1px solid #ccc !important;
  color: black !important;
  height: 25px;
}

#popups .obj_prop .dialog_content table input[type="number"] {
  width: 260px;
  background: white !important;
  border: 1px solid #ccc !important;
  color: black !important;
  height: 25px;
}

#popups .obj_prop .dialog_content table select {
  width: 260px;
  background: white !important;
  border: 1px solid #ccc !important;
  color: black !important;
  height: 25px;
}

#popups .obj_prop .dialog_content .obj_prop_config_icon_container {
  display: flex;
  align-items: center;
  flex-direction: row;
}

.browse_container {
  display: flex;
  flex-direction: column;
  height: 100px;

}

.browse_container .browse_fields {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  height: 30%;
  width: 100%;
}

.browse_container .dynamic_object_container,
.browse_container .browse_file_container,
.browse_container .dynamic_link_container,
.browse_container .static_link_container {
  height: 70%;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: row;
}

.browse_container .dynamic_object_container select,
.browse_container .dynamic_link_container select,
.browse_container .dynamic_object_container input[type='text'] {
  width: 100% !important;
  height: 30px;
}

.browse_container .static_link_container input[type='text'] {
  width: 100% !important;
}

.browse_container .browse_field {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.browse_container .browse_field label {
  margin: 0px !important;
}

.browse_container .file_hide {
  display: none !important;
}

.browse_container .file_card {
  width: 70%;
  height: 25px;
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 3px;
}

.browse_container .file_card span {
  display: inline-block;
  width: 83%;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
}

.browse_container .file_card_close {
  display: inline-block;
  background: url(images/interactive/close.svg);
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.browse_container .browse_input {
  color: black;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc !important;
  height: 25px !important;
  flex: 1;
  border-radius: 5px !important;
  font-size: 13px !important;
  text-align: center !important;
  background-color: white !important;
  cursor: pointer !important;
}

.image_filter_settings {
  width: 776px !important;
  max-width: 776px !important;
  min-width: 776px !important;
  height: 510px !important;
  max-height: 510px !important;
  min-height: 510px !important;
}

.image_filter_settings .image_filter_settings_container {
  width: 750px;
  height: 400px;
  border: 1px solid #eee;
  border-radius: 12px;
}

.image_filter_settings .image_filter_settings_container .img_filter_list {
  overflow: auto;
  border-right: 1px solid #eee;
}

.image_filter_settings .image_filter_settings_container .img_filter_list::-webkit-scrollbar {
  width: 5px;
}

.image_filter_settings .image_filter_settings_container .img_filter_data {
  border-left: 1px solid #eee;
  padding: 5px;
}

.image_filter_settings .image_filter_settings_container .img_filter_data label {
  margin: 0px !important;
}

.image_filter_settings .image_filter_settings_container .img_filter_data .browse_container {
  height: 100%;
}

.image_filter_settings .image_filter_settings_container .img_filter_data .browse_container .embedFields {
  height: 10%;
}

.image_filter_settings .image_filter_settings_container .img_filter_data .browse_container .browse_fields {
  height: 10%;
}

.image_filter_settings .image_filter_settings_container .img_filter_data .browse_container .browse_file_container {
  height: 10%;
  width: 100%;
}

.image_filter_settings .image_filter_settings_container .img_filter_data .browse_container .dynamic_object_container {
  height: 10%;
  width: 100%;
}

.image_filter_settings .image_filter_settings_container .img_filter_data .browse_container .image_color_settings {
  height: 70%;
}

.image_filter_settings .image_filter_settings_container .img_filter_data .browse_container .image_color_settings .image_color_settings_box label {
  width: 30% !important;
}

.image_filter_settings .image_filter_settings_container .img_filter_data .browse_container .image_color_settings .image_color_settings_box input {
  width: 70% !important;
  height: 30px;
}

/* Table prop css */
.table_prop {
  width: 500px !important;
  height: 500px !important;
  min-height: 500px !important;
  max-height: 500px !important;
  max-width: 500px !important;
  min-width: 500px !important;
}

.table_prop .table_prop_container {
  height: 395px;
  width: 475px;
  overflow: auto;
}

.table_prop .table_prop_container::-webkit-scrollbar {
  width: 5px;
}

#popups .table_prop .dialog_content table .table_prop_header {
  font-weight: bold !important;
}

#popups .table_prop .dialog_content .table_prop_container th {
  position: sticky;
  top: 0;
  background: #fafafa;
  color: black;
  display: table-cell !important;
  font-size: 13px !important;
  border: 1px solid #f1f1f1;
  padding: 5px !important;
  font-weight: 500;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

#popups .table_prop .dialog_content .table_prop_container td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  padding: 4px !important;
}

#popups .table_prop .dialog_content .table_prop_container input[type='text'] {
  width: 100%;
  background: white !important;
  border: 1px solid #ccc !important;
  color: black !important;
  height: 25px;
}

#popups .table_prop .dialog_content .table_prop_container input[type='number'] {
  width: 100%;
  background: white !important;
  border: 1px solid #ccc !important;
  color: black !important;
  height: 25px;

}

#popups .table_prop .dialog_content .table_prop_container input[type='button'] {
  background: url(images/icons/configuration_ic.png) no-repeat center center;
  width: 25px;
  height: 25px;
}

#popups .table_prop .dialog_content .table_prop_container input[type='button']:hover {
  background-color: #eee;
}

#popups .table_prop .dialog_content .table_prop_container input[type='button']:active {
  background-color: #ccc;
}

#popups .table_prop .dialog_content .table_prop_container select {
  width: 100%;
  background: white !important;
  border: 1px solid #ccc !important;
  color: black !important;
  height: 25px;

}

#popups .table_prop .dialog_content .table_prop_container .ui_color_input {
  width: 100% !important;
}

.col_defn {
  width: 500px !important;
  height: 500px !important;
  min-height: 500px !important;
  max-height: 500px !important;
  max-width: 500px !important;
  min-width: 500px !important;
}

.col_defn .col_defn_container {
  height: 395px;
  width: 475px;
  overflow: auto;
}

.col_defn .col_defn_container::-webkit-scrollbar {
  width: 5px;
}

.col_defn .col_defn_container th {
  position: sticky;
  top: 0;
  background: #fafafa;
  color: black;
  display: table-cell !important;
  font-size: 13px !important;
  border: 1px solid #f1f1f1;
  padding: 5px !important;
  font-weight: 500;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

.col_defn .col_defn_container td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  padding: 4px !important;
}

.col_defn .col_defn_container input[type='text'] {
  width: 100%;
  background: white !important;
  border: 1px solid #ccc !important;
  color: black !important;
  height: 25px;
}

.col_defn .col_defn_container input[type='number'] {
  width: 100%;
  background: white !important;
  border: 1px solid #ccc !important;
  color: black !important;
  height: 25px;

}

.col_defn .col_defn_container select {
  width: 100%;
  background: white !important;
  border: 1px solid #ccc !important;
  color: black !important;
  height: 25px;

}

/* table border and background settings */
.bb_settings {
  width: 800px !important;
  height: 500px !important;
  min-height: 500px !important;
  max-height: 500px !important;
  max-width: 800px !important;
  min-width: 800px !important;
}

.bb_settings .dialog_content {
  min-height: 510px !important;
}

.bb_settings .bb_settings_container {
  height: 395px;
  width: 775px;
  overflow: auto;
  display: flex;
  flex-direction: row;
  gap: 5px;
}

.bb_settings .bb_settings_container .bb_settings_tree {
  width: 35%;
  border: 1px solid #eee;
}

.bb_settings .bb_settings_container .bb_settings_tree_properties {
  width: 75%;
  border: 1px solid #eee;
}

.bb_settings .bb_settings_container .bb_settings_tree_properties .bb_settings_tree_properties_container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: auto;
}

.bb_settings_tree_properties_option_flex {
  display: flex;
  flex-direction: row;
  gap: 5px;
}

.bb_settings .bb_settings_container .bb_settings_tree_properties .bb_settings_tree_properties_container::-webkit-scrollbar {
  width: 5px;
}

.bb_settings .bb_settings_container .bb_settings_tree_properties .bb_settings_tree_properties_container .bb_settings_tree_properties_apply_section {
  height: 20%;
  border: 1px solid #eee;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 5px;

}

.bb_settings .bb_settings_container .bb_settings_tree_properties .bb_settings_tree_properties_container .bb_settings_tree_properties_apply_section .bb_settings_tree_properties_options {
  display: flex;
  flex-direction: row;
  gap: 60px;
}

.bb_settings .bb_settings_container .bb_settings_tree_properties .bb_settings_tree_properties_container .bb_settings_tree_properties_bg_section {
  height: 20%;
  border: 1px solid #eee;
  padding: 5px;
}

.bb_settings .bb_settings_container .bb_settings_tree_properties .bb_settings_tree_properties_container .bb_settings_tree_properties_border_section {
  height: 60%;
  border: 1px solid #eee;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bb_settings .bb_settings_container .bb_settings_tree_properties .bb_settings_tree_properties_container .bb_settings_tree_properties_border_section .bb_settings_tree_properties_border_section_title {
  height: 10%;
}

.bb_settings .bb_settings_container .bb_settings_tree_properties .bb_settings_tree_properties_container .bb_settings_tree_properties_border_section .bb_settings_tree_properties_border_section_options {
  height: 10%;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 20px;
}

.bb_settings .bb_settings_container .bb_settings_tree_properties .bb_settings_tree_properties_container .bb_settings_tree_properties_border_section .bb_settings_tree_properties_border_section_content {
  height: 80%;
  border: 1px solid #eee;
}

.bb_settings .bb_settings_container .bb_settings_tree_properties .bb_settings_tree_properties_container .bb_settings_tree_properties_border_section .bb_settings_tree_properties_border_section_content input[type='number'],
.bb_settings .bb_settings_container .bb_settings_tree_properties .bb_settings_tree_properties_container .bb_settings_tree_properties_border_section .bb_settings_tree_properties_border_section_content select {
  height: 100% !important;
  width: 100% !important;
}

.bb_settings_tree_properties_border_section_content_boxes {
  display: flex;
  flex-direction: row;
  gap: 5px;
}

.bb_settings .bb_settings_container th {
  position: sticky;
  top: 0;
  background: #fafafa;
  color: black;
  display: table-cell !important;
  font-size: 13px !important;
  border: 1px solid #f1f1f1;
  padding: 5px !important;
  font-weight: 500;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

/* bb tree for table */

.bb-tree-table-wrap {
  width: 100%;
}

.bb-tree-table {
  border: 1px solid #f1f1f1 !important;
  table-layout: fixed !important;
  width: 100% !important;
  border-collapse: collapse !important;
  background-color: white !important;
}

.bb-tree-table th {
  position: sticky;
  top: 0;
  color: #333;
  text-align: center;
  padding: 10px 0;
  background: #fafafa;
  font-size: 13px;
  border: 1px solid #f1f1f1;
  z-index: 100;
}

.bb-tree-table td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  padding: 0px !important;
  height: 30px !important;
}

.bb-tree-table tr td:first-child {
  overflow: initial !important;
}

.bb-tree-table-space-block {
  border: 1px solid transparent;
  display: inline-block;
  width: 20px !important;
  height: 20px !important;
  line-height: 16px;
  text-align: center;
  vertical-align: top;
  font-size: 19px !important;
  position: relative !important;
  box-sizing: border-box;
  margin-top: 5px;
  border-radius: 50%;
}

.bb-tree-table tr td .bb-tree-table-space-block:first-child {
  margin-left: 7px;
}

.bb-tree-table-space-block.btn-toggle {
  /* border: 1px solid #d9d9d9; */
  position: relative;
  cursor: pointer;
  width: 15px;
  height: 17px;
  z-index: 12;
}

.bb-tree-table-space-block.btn-toggle.is-close {
  background: #f1f1f1;
  border: 1px solid transparent;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.bb-tree-table-space-block:before {
  position: absolute;
  content: "";
  width: 1px;
  height: 36px;
  background: #d9d9d9;
  left: 50%;
  top: -27px;
  z-index: -1;
}

.bb-tree-table-space-block i {
  display: block;
  width: 3px;
  height: 3px;
  margin-left: 8px;
  margin-top: 7px;
  background: #d9d9d9;
  border-radius: 50%;
}

.bb-tree-table-space-block.btn-toggle:before {
  display: none;
}

.bb-tree-table-space-block.last-block:before {
  display: none;
}

.bb-tree-table-space-block.last-block:after {
  position: absolute;
  content: "";
  width: 20px;
  height: 1px;
  background: #d9d9d9;
  top: 50%;
  margin-top: -1px;
  left: -10px;
}

.bb-tree-table-space-block.btn-toggle:after {
  display: none;
}

.bb-tree-table tr td .bb-tree-table-space-block:first-child:after {
  display: none;
}

.bb-tree-table-td-content {
  position: relative !important;
  display: inline-block;
  padding: 5px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
  width: 115px;
  cursor: pointer;
  height: 100%;
}

.bb-tree-table-td-content.bb-level-selected {
  color: black !important;
  background-color: var(--active-object-color) !important;
}

/* table repeat header */
.rep_header {
  width: 600px !important;
  height: 300px !important;
  min-height: 300px !important;
  max-height: 300px !important;
  max-width: 600px !important;
  min-width: 600px !important;
}

.rep_header .rep_header_container {
  width: 575px;
  height: 195px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.rep_header .rep_header_container .rep_header_selection {
  height: 30px;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}

.rep_header .rep_header_container .rep_header_selection button {
  background-color: var(--brand-color);
  color: #ffffff;
  padding: 4px 10px 4px 10px;
  border-radius: 4px;
  height: 30px;
  width: 85px;
}

.rep_header .rep_header_container .rep_header_list {
  height: 165px;
  width: 100%;
  overflow: auto;
  border: 1px solid #eee;
}

.rep_header .rep_header_container .rep_header_list th {
  position: sticky;
  top: 0;
  background: #fafafa;
  color: black;
  display: table-cell !important;
  font-size: 13px !important;
  border: 1px solid #f1f1f1;
  padding: 5px !important;
  font-weight: 500;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

.rep_header .rep_header_container .rep_header_list td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  padding: 4px !important;
}

.rep_header .rep_header_container .rep_header_list td select,
.rep_header .rep_header_container .rep_header_list td input {
  width: 100% !important;
  height: 100% !important;
}

.rep_header .rep_header_container .rep_header_list td button {
  height: 25px;
  width: 25px;
  background: url(images/icons/configuration_ic.png) no-repeat center center;
}

.rep_header .rep_header_container .rep_header_list td .rep_header_delete_ic {
  display: inline-block;
  height: 25px;
  width: 25px;
  background-color: #E9EDEE !important;
  border-radius: 4px;
  cursor: pointer;
  background: url(images/icons/delete_red_ic.svg) no-repeat center;
}

.rep_header .rep_header_container .rep_header_list::-webkit-scrollbar {
  width: 5px;
}

/* performa css */
#popups .performa .dialog_content {
  min-height: 258px !important;
  max-height: 258px !important;
  min-width: 528px !important;
  max-width: 528px !important;
}

#popups .performa .dialog_content .performa_pro {
  height: 224px !important;
  width: 504px !important;
  background-color: #eee;
  display: flex;
  flex-direction: column;
  border-radius: 3px;
}

#popups .performa .dialog_content .performa_pro .performa_div1 label {
  color: black;
  font-size: 13px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#popups .performa .dialog_content .performa_pro .performa_div1 {
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
  padding: 10px 0px 5px 0px;
}

#popups .performa .dialog_content .performa_pro .performa_div2 {
  display: flex;
  flex-direction: row;
  gap: 12px;
}

#popups .performa .dialog_content .performa_pro .performa_div2 input[type="text"] {
  width: 420px;
  height: 25px;
  border: 2px solid #ccc;
  vertical-align: middle;
  background-color: white;
  color: black;
}

#popups .performa .dialog_content .performa_pro .performa_div1 input[type="text"] {
  width: 355px;
  height: 25px;
  border: 2px solid #ccc;
  vertical-align: middle;
  background-color: white;
  color: black;
}

#popups .performa .dialog_content .performa_pro .performa_btn {
  /* height: 25px !important;
    width: 30px !important;
    vertical-align: middle !important;
    background-color: white !important;
    color: black !important;
    border-color: darkgrey !important;
    border: none !important; */
  display: none;
  visibility: hidden;
}

#popups .performa .dialog_content .performa_pro .performa_label_btn {
  border: 2px solid #ccc !important;
  height: 25px !important;
  width: 60px !important;
  border-radius: 5px !important;
  font-size: 13px !important;
  text-align: center !important;
  background-color: white !important;
  cursor: pointer !important;
}

#popups .performa .dialog_content .performa_pro .performa_btn:active {
  background-color: black !important;
  color: white !important;
}

#popups .performa .dialog_content .performa_pro .performa_div3 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 5px;
}

#popups .performa .dialog_content .performa_pro .performa_div3 div {
  display: flex;
  flex-direction: row;
}

#popups .performa .dialog_content .performa_pro .progressbar {
  position: relative;
  width: 100%;
  height: 30px;
}

#popups .performa .dialog_content .performa_pro .progressbar .pp_progress_bar_box {
  position: relative;
  width: 323px;
  height: 12px;
  overflow: hidden;
  background: #e5e5e5;
  border-radius: 6px;
}

#popups .performa .dialog_content .performa_pro .pp_settings {
  padding-top: 10px;
}

#popups .performa .dialog_content .performa_pro .pp_settings details {
  font-size: 13px;
  cursor: pointer;
}

.pp_progress_details {
  display: flex;
  align-items: center;
  gap: 5px;
}

.pp_progress_details label {
  margin: 0;
}

.pp_progress_details .pp_progress_bar {
  position: relative;
  min-width: 0%;
  max-width: 100%;
  height: 100%;
  background: #5fb1dc;
}

#popups .performa .dialog_content .performa_pro .progressbar .pp_progress_bar_box .progress_bar_text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  color: black;
  font-weight: bold;
}

#popups .performa .dialog_content .performa_pro .pp_app_process_tab_container,
#popups .performa .dialog_content .performa_pro .pp_server_process_tab_container {
  background-color: #fafafa;
  height: 120px;
  padding: 10px;
}

#popups .performa .dialog_content .performa_pro .pp_server_process_tab_container .pp_server_box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}

#popups .performa .dialog_content .performa_pro .pp_server_process_tab_container .pp_server_box .pp_server_input_box,
#popups .performa .dialog_content .performa_pro .pp_server_process_tab_container .pp_server_box .pp_server_output_box {
  height: 50%;
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
}

#popups .performa .dialog_content .performa_pro .pp_server_process_tab_container .pp_server_input_title {
  width: 68px;
}

#popups .performa .dialog_content .performa_pro .pp_server_process_tab_container .pp_server_box input[type='text'] {
  width: 380px;
  height: 25px;
  border: 2px solid #ccc;
  vertical-align: middle;
  background-color: white;
  color: black;
}

/* for tabs */
.pp_tabs p {
  color: black;
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 4px 10px;
  transition: 0.3s;
  font-size: 13px;
  margin: 0px
}

.pp_tabs p.active {
  background-color: #fafafa;
}

.pp_tabs p:hover {
  background-color: #ddd;
}

/* About UniServ Popup */
.about_us {
  max-width: 507px !important;
  height: 406px !important;
  max-height: 406px !important;
}

.about_us .dialog_content {
  height: 311px !important;
  max-height: 311px !important;
}



/* for version control */
.check_in_history {
  max-height: 199px !important;
  max-width: 649px !important;
  min-height: 281px !important;
  min-width: 650px;
  width: 650px !important;
}

.check_out {
  max-height: 400px !important;
  max-width: 750px !important;
  min-height: 400px !important;
  min-width: 750px;
  width: 750px !important;
  height: 400px !important;
}

.check_out textarea {
  border: 1px solid #ccc !important;
  resize: none;
  overflow: auto;
}

.check_out .dialog_content {
  max-height: 308px !important;
  max-width: 740px !important;
  min-height: 308px !important;
  min-width: 740px !important;
  width: 740px !important;
  background-color: #fff !important;
  height: 308px !important;
  overflow: auto !important;
  padding: 5px !important;
}

.check_out .dialog_content .comments {
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  width: 150px;
  overflow: hidden;
}

.check_out .dialog_content input[type="text"] {
  width: 100% !important;
  height: 100% !important;
}

.check_out .dialog_content table td {
  padding: 5px !important;
}

.check_out .check_out_text_box {
  display: flex;
  align-items: center;
  flex-direction: row;
  padding: 5px;
}

/* batch configurations */
/* for tabs */
.batch_tabs {
  overflow: hidden;
  /* border: 1px solid #ccc; */
  background-color: #fafafa;
  height: 25px;
}

.batch_tabs p {
  color: black;
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 4px 10px;
  transition: 0.3s;
  font-size: 13px;
  margin: 0px;
  height: 25px
}

.batch_tabs p.active {
  background-color: white;
}

.batch_tabs p:hover {
  background-color: #ddd;
}

/* tabs end */
.batch_config {
  max-width: 776px !important;
  min-width: 776px !important;
  height: 510px !important;
  max-height: 510px !important;
  min-height: 510px !important;
}

.batch_config .dialog_content {
  height: 417px !important;
  max-height: 417px !important;
}

.batch_configuration {
  max-width: 776px !important;
  min-width: 776px !important;
  height: 510px !important;
  max-height: 510px !important;
  min-height: 510px !important;
}


.batch_config_container {
  display: flex;
  flex-direction: column;
  width: 750px;
  height: 392px;
  background-color: #eee
}

.batch_config_box {
  width: 100%;
  height: 366px;
  background-color: white;
  padding-top: 10px;
}

.batch_config_db {
  width: 100%;
  height: 100%;
  border: 1px solid #eee;
}

.batch_config_server {
  width: 100%;
  height: 359px;
  border: 1px solid #eee;
  overflow-y: auto;
}

.batch_config_server::-webkit-scrollbar {
  width: 5px;
}

.batch_config_test_button {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: flex-end;
  padding: 5px;
}

.batch_config_test_button button {
  height: 25px;
  width: 120px;
}

.bc_show {
  display: block;
}

.bc_hide {
  display: none;
}

#popups .batch_config .dialog_content table th {
  background: #fafafa;
  color: black;
  display: table-cell !important;
  font-size: 13px !important;
  border: 1px solid #f1f1f1;
  padding: 3px 5px !important;
  font-weight: 500;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  ;
}

.batch_config_box table tr td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  height: 32px !important;
}

.batch_config_box table tr td .eye_container {
  top: 25% !important;
}

.table_td {
  padding: 3px 5px !important;
}

.batch_config_box table input {
  height: 100%;
  width: 100%;
}

.batch_config_box table select {
  height: 100%;
  width: 100%;
}

.batch_configuration_pop {
  width: 750px;
  height: 395px;
}

.batch_configuration_container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  gap: 5px;
}

.batch_configuration_list_container {
  width: 230px;
  height: 100%;
  background-color: white;
  border: 1px solid #ccc;
}

.batch_configuration_list_data_container {
  border: 1px solid #ccc;
  height: 100%;
  width: 516px;
  background-color: white;

}

.batch_configuration_list_container .bc_list_box {
  width: 100%;
  height: 368px;
  overflow: auto;
}

.batch_configuration_list_container .bc_list_box::-webkit-scrollbar {
  width: 5px;
}

.batch_configuration_list_title {
  background: #fafafa;
  color: black;
  font-size: 13px !important;
  border: 1px solid #f1f1f1;
  padding: 3px 5px !important;
  height: 25px;
  font-weight: bold;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: end;
}

.bc_actions {
  width: 55px;
  border-left: 1px solid #ccc;
  display: flex;
  justify-content: end;
  font-weight: 500;
}

.batch_configuration_list_container .bc_list_box .bc_title {
  height: 28px;
  width: 92%;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  padding: 5px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.batch_configuration_list_container .bc_list_box .bc_items {
  height: 28px;
  width: 99%;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  padding: 5px;
  cursor: pointer;
}

.batch_configuration_list_container .bc_delete {
  background: url(images/deleteicon.svg) no-repeat center;
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.batch_configuration_list_container .bc_edit {
  background: url(images/editicon.svg) no-repeat center;
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.batch_configuration_list_data_container {
  overflow: auto;
}

.batch_configuration_list_data_container::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.batch_configuration_list_data_container table tr td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}

.batch_configuration_list_data_container select {
  width: 100%;
  height: 100%;
}

#popups .batch_configuration .dialog_content table th {
  background: #fafafa;
  color: black;
  display: table-cell !important;
  font-size: 13px !important;
  border: 1px solid #f1f1f1;
  padding: 3px 5px !important;
  position: sticky;
  top: 0;
  z-index: 10;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  ;
}

.bc_addicon {
  width: 24px;
  height: 24px;
  border: none;
  box-shadow: none;
  background: url(images/icons/plusic.svg) no-repeat center center;
  filter: var(--menu-icons-filter);
  cursor: pointer !important;
}

.bc_editicon {
  width: 18px;
  height: 20px;
  border: none;
  box-shadow: none;
  background: url(images/icons/edit_icon.png) no-repeat center center;
  filter: var(--menu-icons-filter);
  cursor: pointer !important;
}

.bc_td_head {
  font-weight: bold;
  background: #fafafa;
}

.bc_td_title {
  font-weight: bold;
  background: #fafafa;
  padding: 5px;
}

.batch_configuration_caret {
  background: url(images/icons/collapse.png) no-repeat center;
  width: 16px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  margin: 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  float: left !important;
}

.batch_configuration_caret::before {
  background: url(images/icons/collapse.png) no-repeat center;
  width: 16px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  margin: 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  float: left !important;
}

.batch_configuration_caret_down {
  background: url(images/icons/expand.png) no-repeat center;
  width: 16px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  margin: 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  float: left !important;
}

.batch_configuration_UL {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.batch_configuration_UL li {
  padding-left: 25px;
}

.batch_configuration_nested {
  display: none;
}

.batch_configuration_active {
  display: block;
}

.batch_config_import_img {
  background: url(images/icons/import_ic.svg) no-repeat center;
  width: 24px;
  height: 24px;
  margin: 0;
  cursor: pointer;

}

.batch_config_export_img {
  background: url(images/icons/exportic.svg) no-repeat center;
  width: 50px;
  height: 24px;
  margin: 0;
  cursor: pointer;
  border: 1px solid #ccc;
  background-color: #fafafa;
  border-radius: 4px;
}

.batch_config_export {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 5px;
  height: 100% !important;
}

.batch_config_action_icons {
  display: flex;
  flex-direction: row;
}

.bc_selected {
  background-color: var(--active-tag-color);
  border-color: var(--active-tag-color);
  z-index: 1;
}

.bp-loader {
  border: 4px solid #eee;
  border-top: 4px solid #ccc;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  animation: spin 1s linear infinite;
}

.bp-loader-container {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* page define actions */
/* page define actions */
.page_def_action {
  width: 776px !important;
  min-width: 776px !important;
  max-width: 776px !important;
  height: 510px !important;
  max-height: 510px !important;
  min-height: 510px !important;
}

.page_def_action .dialog_content {
  max-height: 410px !important;
}

.page_def_action .page_def_act_container {
  display: flex;
  flex-direction: column;
  background-color: white;
  height: 388px;
  width: 751px;
  padding: 8px;
}

.page_def_action .page_def_act_title {
  display: flex;
  flex-direction: row;
  color: black;
  font-size: 13px;
  height: 25px;
  align-items: center;
  padding: 5px 5px 5px 0px;
  font-weight: 500;

}

.page_def_action .page_def_act_container .page_def_act {
  flex: 1;
  background-color: white;
  border: 1px solid #ccc;
  overflow: auto;
}

.page_def_action .page_def_act_container .page_def_act select {
  background: white !important;
  width: 100%;
  color: black !important;
  border: 1px solid #ccc;
}

.page_def_action .dialog_content table #popup-tr-undefined th {
  background: #fafafa;
  color: black;
  display: table-cell !important;
  font-size: 13px !important;
  border: 1px solid #f1f1f1;
  padding: 5px !important;
  font-weight: 500;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  ;
}

#popups>.page_def_action>.buttons>button:disabled {
  visibility: visible !important;
  background-color: rgba(239, 239, 239, 0.3) !important;
  color: rgba(16, 16, 16, 0.3) !important;
  border-color: rgba(118, 118, 118, 0.3) !important;
}

.page_def_action select,
.page_def_action input[type="text"] {
  width: 100%;
  height: 100%;
}

/* page tree css */
/* tree table css for page define actions */
.page-def-act-tree-table-wrap {
  width: 100%;
}

.page-def-act-tree-table {
  border: 1px solid #f1f1f1 !important;
  table-layout: fixed !important;
  width: 100% !important;
  border-collapse: collapse !important;
  background-color: white !important;
}

.page-def-act-tree-table th {
  position: sticky;
  top: 0;
  color: #333;
  text-align: center;
  padding: 10px 0;
  background: #fafafa;
  font-size: 13px;
  border: 1px solid #f1f1f1;
  z-index: 100;
}

.page-def-act-tree-table td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}

.page-def-act-tree-table tr td:first-child {
  overflow: initial !important;
}

.page-def-act-tree-table-space-block {
  border: 1px solid transparent;
  display: inline-block;
  width: 20px !important;
  height: 20px !important;
  line-height: 16px;
  text-align: center;
  vertical-align: top;
  font-size: 19px !important;
  position: relative !important;
  box-sizing: border-box;
  margin-top: 7px;
  border-radius: 50%;
}

.page-def-act-tree-table tr td .page-def-act-tree-table-space-block:first-child {
  margin-left: 7px;
}

.page-def-act-tree-table-space-block.page-def-act-btn-toggle {
  /* border: 1px solid #d9d9d9; */
  position: relative;
  cursor: pointer;
  width: 15px;
  height: 17px;
  z-index: 12;
}

.page-def-act-tree-table-space-block.page-def-act-btn-toggle.is-close {
  background: #f1f1f1;
  border: 1px solid transparent;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.page-def-act-tree-table-space-block:before {
  position: absolute;
  content: "";
  width: 1px;
  height: 36px;
  background: #d9d9d9;
  left: 50%;
  top: -27px;
  z-index: -1;
}

.page-def-act-tree-table-space-block i {
  display: block;
  width: 3px;
  height: 3px;
  margin-left: 8px;
  margin-top: 7px;
  background: #d9d9d9;
  border-radius: 50%;
}

.page-def-act-tree-table-space-block.page-def-act-btn-toggle:before {
  display: none;
}

.page-def-act-tree-table-space-block.page-def-act-last-block:before {
  display: none;
}

.page-def-act-tree-table-space-block.page-def-act-last-block:after {
  position: absolute;
  content: "";
  width: 20px;
  height: 1px;
  background: #d9d9d9;
  top: 50%;
  margin-top: -1px;
  left: -10px;
}

.page-def-act-tree-table-space-block.page-def-act-btn-toggle:after {
  display: none;
}

.page-def-act-tree-table tr td .page-def-act-tree-table-space-block:first-child:after {
  display: none;
}

.page-def-act-tree-table-td-content {
  position: relative !important;
  display: inline-block;
  padding: 7px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
  width: 100px;
}

.page-def-act-hidden {
  display: none !important;
}

.page-def-act-show {
  visibility: visible !important;
}

/* Page define events */
.page_events {
  width: 1000px !important;
  min-width: 1000px !important;
  max-width: 1000px !important;
  height: 510px !important;
  max-height: 510px !important;
  min-height: 510px !important;
}

.page_events .dialog_content {
  max-height: 410px !important;
}

.page_events .page_events_container {
  display: flex;
  flex-direction: row;
  background-color: white;
  height: 388px;
  width: 985px;
  padding: 8px;
  gap: 5px;
}

.page_events .page_events_container .page_events_objects_list_container {
  width: 30%;
  height: 388px;
  display: flex;
  flex-direction: column;
}

.page_events .page_events_container .page_events_growth_list_container {
  width: 70%;
  height: 388px;
  display: flex;
  flex-direction: column;
}

.page_events .page_events_container .page_events_objects_title {
  height: 6%;
}

.page_events .page_events_container .page_events_objects_list_container .page_events_objects_list {
  overflow: auto;
  height: 94%;
  width: 100%;
  border: 1px solid #eee;
  background: #FAFAFA;
}

.page_events .page_events_container .page_events_objects_list_container .page_events_objects_list .page_events_objects_list_item_active {
  border: 2px solid var(--brand-color);
}

.page_events .page_events_container .page_events_growth_list_container .page_events_growth_list {
  overflow: auto;
  height: 94%;
  width: 100%;
  border: 1px solid #eee;
  overflow: auto;
}

.page_events .page_events_container .page_events_growth_list_container .page_events_growth_list::-webkit-scrollbar {
  width: 5px;
}

.page_events .page_events_container .page_events_growth_list_container .page_events_growth_list tr {
  cursor: pointer;
}

.page_events .page_events_container .page_events_growth_list_container .page_events_growth_list tr.page_events_growth_list_tr_active {
  border: 2px solid var(--brand-color);
}

.page_events .page_events_container .page_events_growth_list_container .page_events_growth_list th {
  position: sticky;
  top: 0;
  color: #202124;
  padding: 5px 5px !important;
  background: #EEEEEE;
  font-size: 13px !important;
  /* border: 1px solid #E4E4E4; */
  z-index: 100;
  display: table-cell !important;
  font-weight: 400;
  height: 30px;
  vertical-align: middle;
  line-height: 20px;
  letter-spacing: 0.1px;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

.page_events .page_events_container .page_events_growth_list_container .page_events_growth_list td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #202124;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  padding: 6px !important;
  background: #FAFAFA;
  height: 30px;
  vertical-align: middle;
  line-height: 16px;
}

.page_events .page_events_container .page_events_growth_list_container .page_events_growth_list .page_events_growth_list_item {
  height: 100%;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
  width: 185px;
}

.page_events .page_events_container .page_events_growth_list_container .page_events_growth_list .page_events_growth_list_item_limit {
  height: 100%;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
  width: 185px;
}

.page_events .page_events_container .page_events_growth_list_container .page_events_growth_list .growth_action_icons {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  gap: 5px;
}

.page_events .page_events_container .page_events_growth_list_container .page_events_growth_list .growth_action_icons .growth_action_edit_icon {
  display: inline-block;
  height: 30px;
  width: 30px;
  background-color: #E9EDEE !important;
  border-radius: 6px;
  cursor: pointer;
  background: url(images/icons/edit_pen_ic.svg) no-repeat center;
}

.page_events .page_events_container .page_events_growth_list_container .page_events_growth_list .growth_action_icons .growth_action_delete_icon {
  display: inline-block;
  height: 30px;
  width: 30px;
  background-color: #E9EDEE !important;
  border-radius: 6px;
  cursor: pointer;
  background: url(images/icons/delete_red_ic.svg) no-repeat center;
}

.page_events .page_events_container .page_events_growth_list_container .page_events_growth_list .growth_action_icons .growth_action_publish_icon {
  display: inline-block;
  height: 30px;
  width: 30px;
  background-color: #E9EDEE !important;
  border-radius: 6px;
  cursor: pointer;
  background: url(images/icons/publish.svg) no-repeat center;
}

.page_events .page_events_container .page_events_growth_list_container .page_events_growth_list .growth_action_icons .growth_action_clear_icon {
  display: inline-block;
  height: 30px;
  width: 30px;
  background-color: #E9EDEE !important;
  border-radius: 6px;
  cursor: pointer;
  background: url(images/icons/clear_all.svg) no-repeat center;
}

.page_events .page_events_container .page_events_objects_list_container .page_events_objects_list::-webkit-scrollbar {
  width: 5px;
}

.page_events .page_events_container .page_events_objects_list_container .page_events_objects_caret_title,
.page_events_publisher .pepeo_caret_title {
  width: auto;
  display: flex;
  align-items: center;
  flex-direction: row;
  border-bottom: 1px solid #eee;
  height: 30px;
  cursor: pointer;
  justify-content: space-between;
  padding: 5px;
}

.page_events .page_events_container .page_events_objects_list_container .page_events_objects_caret_title span,
.page_events_publisher .pepeo_caret_title span {
  height: 100%;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
  width: 185px;

}

.page_events .page_events_container .page_events_objects_list_container .page_events_objects_actions {
  display: flex;
  align-items: center;
  flex-direction: row;
}

.page_events .page_events_container .page_events_objects_list_container .page_events_objects_actions .page_events_objects_grow {
  background: url(images/icons/expand.svg) no-repeat center;
  height: 24px;
  width: 24px;
  display: inline-block;
}

.page_events .page_events_container .page_events_objects_list_container .page_events_objects_caret,
.page_events_publisher .pepeo_caret {
  background: url(images/icons/collapse.png) no-repeat center;
  width: 5%;
  height: 28px;
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  margin: 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  float: left !important;
  filter: var(--menu-icons-filter);
}

.page_events .page_events_container .page_events_objects_list_container .page_events_objects_caret,
.page_events_publisher .pepeo_caret {
  background: url(images/icons/collapse.png) no-repeat center;
  width: 5%;
  height: 28px;
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  margin: 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  float: left !important;
  filter: var(--menu-icons-filter);
}

.page_events .page_events_container .page_events_objects_list_container .page_events_objects_caret_down,
.page_events_publisher .pepeo_caret_down {
  background: url(images/icons/expand.png) no-repeat center;
  width: 5%;
  height: 28px;
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  margin: 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  float: left !important;
  filter: var(--menu-icons-filter);
}

.page_events .page_events_container .page_events_objects_list_container ul,
.page_events_publisher ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.page_events .page_events_container .page_events_objects_list_container .page_events_objects_nested,
.page_events_publisher .pepeo_nested {
  display: none;
}

.page_events .page_events_container .page_events_objects_list_container .page_events_objects_active,
.page_events_publisher .pepeo_active {
  display: block;
}

.page_events_publisher {
  width: 1000px !important;
  min-width: 1000px !important;
  max-width: 1000px !important;
  height: 510px !important;
  max-height: 510px !important;
  min-height: 510px !important;
}

.page_events_publisher .dialog_content {
  max-height: 410px !important;
}

.page_events_publisher .page_events_publisher_container {
  display: flex;
  flex-direction: row;
  background-color: white;
  height: 388px;
  width: 985px;
  padding: 8px;
  gap: 5px;
}

.page_events_publisher .page_events_publisher_container .page_events_publisher_objects_list_container {
  width: 30%;
  height: 388px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.page_events_publisher .page_events_publisher_container .page_events_publisher_events_list_container {
  width: 70%;
  height: 388px;
  display: flex;
  flex-direction: column;
}

.page_events_publisher .page_events_publisher_container .page_events_publisher_objects_title {
  height: 6%;
}

.page_events_publisher .page_events_publisher_container .page_events_publisher_objects_list_container .page_events_publisher_objects_list {
  overflow: auto;
  height: 94%;
  width: 100%;
  border: 1px solid #eee;
  background: #FAFAFA;
}

.page_events_publisher .page_events_publisher_container .page_events_publisher_objects_list_container .page_events_publisher_objects_list::-webkit-scrollbar {
  width: 5px;
}

.page_events_publisher .page_events_publisher_container .page_events_publisher_events_list_container .page_events_publisher_events_list {
  overflow: auto;
  height: 94%;
  width: 100%;
  /* border:  1px solid #eee; */
  background: #FAFAFA;
  display: flex;
  flex-direction: row;
  gap: 5px;
}

.page_events_publisher .page_events_publisher_container .page_events_publisher_events_list_container .page_events_publisher_events_list .pepeo_not_source {
  width: 30%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 5px;
  border: 1px solid #eee;
}

.page_events_publisher .page_events_publisher_container .page_events_publisher_events_list_container .page_events_publisher_events_list .pepeo_not_source .pepeo_dest_events {
  padding: 5px;
  border-top: 1px solid #eee;
}

.page_events_publisher .page_events_publisher_container .page_events_publisher_events_list_container .page_events_publisher_events_list .pepeo_not_source .pepeo_button {
  height: 8%;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}

.page_events_publisher .page_events_publisher_container .page_events_publisher_events_list_container .page_events_publisher_events_list .pepeo_not_source .pepeo_button button {
  background-color: var(--brand-color);
  color: #ffffff;
  padding: 4px 10px 4px 10px;
  border-radius: 4px;
  height: 100%;
  width: 70px;
}

.page_events_publisher .page_events_publisher_container .page_events_publisher_events_list_container .page_events_publisher_events_list .pepeo_not_source select {
  height: 30px;
  width: 100%;
}

.page_events_publisher .page_events_publisher_container .page_events_publisher_events_list_container .page_events_publisher_events_list .pepeo_actions {
  width: 70%;
  height: 100%;
  border: 1px solid #eee;
  display: flex;
  flex-direction: column;
}

.page_events_publisher .page_events_publisher_container .page_events_publisher_events_list_container .page_events_publisher_events_list .pepeo_actions .pepeo_actions_headers {
  width: 100%;
  height: 8%;
  border-bottom: 1px solid #eee;
  display: flex;
  flex-direction: row;
  padding: 5px;
  align-items: center;
  gap: 5px;
}

.page_events_publisher .page_events_publisher_container .page_events_publisher_events_list_container .page_events_publisher_events_list .pepeo_actions .pepeo_actions_headers span:first-child {
  flex: 1;
  border-right: 1px solid #eee;
}

.page_events_publisher .page_events_publisher_container .page_events_publisher_events_list_container .page_events_publisher_events_list .pepeo_actions .pepeo_actions_headers span:nth-child(2) {
  flex: 1;
  border-right: 1px solid #eee;
}

.page_events_publisher .page_events_publisher_container .page_events_publisher_events_list_container .page_events_publisher_events_list .pepeo_actions .pepeo_actions_headers span:last-child {
  flex: 1;
}

.page_events_publisher .page_events_publisher_container .page_events_publisher_events_list_container .page_events_publisher_events_list .pepeo_actions .pepeo_actions_body {
  height: 92%;
  overflow: auto;
  width: 100%;
  display: flex;
  flex-direction: column;

}

.page_events_publisher .page_events_publisher_container .page_events_publisher_events_list_container .page_events_publisher_events_list .pepeo_actions .pepeo_actions_body::-webkit-scrollbar {
  width: 5px;
}

.page_events_publisher .page_events_publisher_container .page_events_publisher_events_list_container .page_events_publisher_events_list .pepeo_actions .pepeo_actions_body .pepeo_actions_row {
  background: #eaedf0;
  position: sticky;
  top: 0;
  z-index: 1;
}

.page_events_publisher .page_events_publisher_container .page_events_publisher_events_list_container .page_events_publisher_events_list .pepeo_actions .pepeo_actions_body .pepeo_actions_row,
.page_events_publisher .page_events_publisher_container .page_events_publisher_events_list_container .page_events_publisher_events_list .pepeo_actions .pepeo_actions_body .pepeo_actions_child_row {
  height: 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 5px;
  border-bottom: 1px solid #eee;
  gap: 5px;
}

.page_events_publisher .page_events_publisher_container .page_events_publisher_events_list_container .page_events_publisher_events_list .pepeo_actions .pepeo_actions_body .pepeo_actions_child_row {}

.page_events_publisher .page_events_publisher_container .page_events_publisher_events_list_container .page_events_publisher_events_list .pepeo_actions .pepeo_actions_body .pepeo_actions_child_row span:first-child,
.page_events_publisher .page_events_publisher_container .page_events_publisher_events_list_container .page_events_publisher_events_list .pepeo_actions .pepeo_actions_body .pepeo_actions_row span:first-child {
  flex: 1;
  border-right: 1px solid #eee;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
  width: 185px;
  cursor: pointer;
}

.page_events_publisher .page_events_publisher_container .page_events_publisher_events_list_container .page_events_publisher_events_list .pepeo_actions .pepeo_actions_body .pepeo_actions_child_row span:nth-child(2),
.page_events_publisher .page_events_publisher_container .page_events_publisher_events_list_container .page_events_publisher_events_list .pepeo_actions .pepeo_actions_body .pepeo_actions_row span:nth-child(2) {
  flex: 1;
  border-right: 1px solid #eee;

}

.page_events_publisher .page_events_publisher_container .page_events_publisher_events_list_container .page_events_publisher_events_list .pepeo_actions .pepeo_actions_body .pepeo_actions_btns {
  flex: 1;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  gap: 5px;
}

.page_events_publisher .page_events_publisher_container .page_events_publisher_events_list_container .page_events_publisher_events_list .pepeo_actions .pepeo_actions_body .pepeo_actions_btns .pepeo_actions_delete_icon {
  display: inline-block;
  height: 25px;
  width: 25px;
  background-color: #E9EDEE !important;
  border-radius: 6px;
  cursor: pointer;
  background: url(images/icons/delete_red_ic.svg) no-repeat center;
}

.pepeo_child_active {
  border: 2px solid var(--brand-color) !important;
}

/* batch config icon */
.bt_config_setting {
  height: 20px !important;
  width: 20px !important;
  background: url(images/icons/settings_ic.png) no-repeat center center;
  display: inline-block;
  margin-left: 3px;
  vertical-align: middle;
  cursor: pointer;
}

/* charts */
.chart_data_asc {
  max-width: 850px !important;
  width: 850px !important;
  height: 510px !important;
  max-height: 510px !important;
}

.chart_data_asc .dialog_content {
  max-height: 410px !important;
}

.chart_data_asc .chart_data_association_container {
  display: flex;
  flex-direction: column;
  background-color: white;
  height: 388px;
  width: 825px;
}

.chart_data_asc .chart_data_association_title {
  display: flex;
  flex-direction: row;
  color: black;
  font-size: 13px;
  height: 25px;
  align-items: center;
  padding: 5px 5px 5px 0px;
  font-weight: 500;

}

.chart_data_asc .chart_data_association_container .chart_data_association {
  flex: 1;
  background-color: white;
  border: 1px solid #ccc;
  overflow: auto;
}

.chart_data_asc .chart_data_association_container .chart_data_association::-webkit-scrollbar {
  width: 5px;
}

.chart_data_asc .chart_data_association_container .chart_data_association select {
  background: white !important;
  width: 100%;
  color: black !important;
  border: 1px solid #ccc;
}

.chart_data_asc .dialog_content table #popup-tr-undefined th {
  background: #fafafa;
  color: black;
  display: table-cell !important;
  font-size: 13px !important;
  border: 1px solid #f1f1f1;
  padding: 5px !important;
  font-weight: 500;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  ;
}

#popups>.chart_data_asc>.buttons>button:disabled {
  visibility: visible !important;
  background-color: rgba(239, 239, 239, 0.3) !important;
  color: rgba(16, 16, 16, 0.3) !important;
  border-color: rgba(118, 118, 118, 0.3) !important;
}

.chart_data_asc select,
.chart_data_asc input[type="text"] {
  width: 100%;
  height: 100%;
}

/* chart tree css */
.chart-data-asc-tree-table-wrap {
  width: 100%;
}

.chart-data-asc-tree-table {
  border: 1px solid #f1f1f1 !important;
  table-layout: fixed !important;
  width: 100% !important;
  border-collapse: collapse !important;
  background-color: white !important;
}

.chart-data-asc-tree-table th {
  position: sticky;
  top: 0;
  color: #333;
  text-align: center;
  padding: 10px 0;
  background: #fafafa;
  font-size: 13px;
  border: 1px solid #f1f1f1;
  z-index: 100;
}

.chart-data-asc-tree-table td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}

.chart-data-asc-tree-table tr td:first-child {
  overflow: initial !important;
}

.chart-data-asc-tree-table-space-block {
  border: 1px solid transparent;
  display: inline-block;
  width: 20px !important;
  height: 20px !important;
  line-height: 16px;
  text-align: center;
  vertical-align: top;
  font-size: 19px !important;
  position: relative !important;
  box-sizing: border-box;
  margin-top: 7px;
  border-radius: 50%;
}

.chart-data-asc-tree-table tr td .chart-data-asc-tree-table-space-block:first-child {
  margin-left: 7px;
}

.chart-data-asc-tree-table-space-block.chart-data-asc-btn-toggle {
  /* border: 1px solid #d9d9d9; */
  position: relative;
  cursor: pointer;
  width: 15px;
  height: 17px;
  z-index: 12;
}

.chart-data-asc-tree-table-space-block.chart-data-asc-btn-toggle.is-close {
  background: #f1f1f1;
  border: 1px solid transparent;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.chart-data-asc-tree-table-space-block:before {
  position: absolute;
  content: "";
  width: 1px;
  height: 36px;
  background: #d9d9d9;
  left: 50%;
  top: -27px;
  z-index: -1;
}

.chart-data-asc-tree-table-space-block i {
  display: block;
  width: 3px;
  height: 3px;
  margin-left: 8px;
  margin-top: 7px;
  background: #d9d9d9;
  border-radius: 50%;
}

.chart-data-asc-tree-table-space-block.chart-data-asc-btn-toggle:before {
  display: none;
}

.chart-data-asc-tree-table-space-block.chart-data-asc-last-block:before {
  display: none;
}

.chart-data-asc-tree-table-space-block.chart-data-asc-last-block:after {
  position: absolute;
  content: "";
  width: 20px;
  height: 1px;
  background: #d9d9d9;
  top: 50%;
  margin-top: -1px;
  left: -10px;
}

.chart-data-asc-tree-table-space-block.chart-data-asc-btn-toggle:after {
  display: none;
}

.chart-data-asc-tree-table tr td .chart-data-asc-tree-table-space-block:first-child:after {
  display: none;
}

.chart-data-asc-tree-table-td-content {
  position: relative !important;
  display: inline-block;
  padding: 7px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
  width: 130px;
}

.chart-data-asc-hidden {
  display: none !important;
}

.chart-data-asc-show {
  visibility: visible !important;
}

.charts_config_icon {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  width: 100%;
}

.CHRT_DFN {
  max-width: 430px !important;
  width: 430px !important;
  height: 180px !important;
  max-height: 180px !important;
}

.CHRT_DFN .dialog_content {
  max-height: 150px !important;
  min-height: 150px !important;
  height: 150px !important;
}

.CHRT_DFN .CHRT_DFN_container {
  display: flex;
  flex-direction: column;
  border: 1px solid #eee;
  height: 61px;
}

.CHRT_DFN .CHRT_DFN_container .CHRT_DFN_container_top,
.CHRT_DFN .CHRT_DFN_container .CHRT_DFN_container_bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 30px;
}

.CHRT_DFN .CHRT_DFN_container .CHRT_DFN_container_title {
  background: #fafafa;
  padding: 5px;
}

.CHRT_DFN .CHRT_DFN_container select {
  width: 100%;
  height: 100%;
}

.CHRT_DFN .CHRT_DFN_container .CHRT_DFN_container_title,
.CHRT_DFN .CHRT_DFN_container .CHRT_DFN_container_select_box {
  display: flex;
  width: 50%;
  height: 100%;
  align-items: center;
  flex-direction: row;
  border: 1px solid #eeee;
}

/* data mapper css */
.dm_comp_buttons {
  display: flex;
  align-items: center;
  gap: 5px;
}

.dm_comp_buttons .dm_add_cmp_button {
  text-align: center;
  font-size: 15px;
  font-weight: 500;
}

.add_comp_var {
  max-width: 776px !important;
  height: 510px !important;
  max-height: 510px !important;
  width: 776px !important;
}

.add_comp_var .dialog_content table #popup-tr-undefined th {
  background: #fafafa;
  color: black;
  display: table-cell !important;
  font-size: 13px !important;
  border: 1px solid #f1f1f1;
  padding: 5px !important;
  font-weight: 500;
  position: sticky;
  top: 0;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  ;
}

.add_comp_var .dialog_content {
  max-height: 410px !important;
}

.add_comp_var .add_comp_var_props_box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  height: 25px;
}

.add_comp_var .add_comp_var_props {
  display: flex;
  flex: 50%;
  align-items: center;
  flex-direction: row;
  height: 100%;
}

.add_comp_var .add_comp_var_title {
  width: 30%;
}

.add_comp_var .add_comp_var_val {
  width: 70% !important;
  height: 100%;
}

.add_comp_var .add_comp_var_container {
  display: flex;
  flex-direction: column;
  background-color: white;
  height: 388px;
  width: 751px;
  padding: 8px;
  border: 1px solid #eee;
  gap: 5px;
}

.add_comp_var .add_comp_var_container .add_comp_var_top {
  display: flex;
  flex-direction: column;
  gap: 5px;
  height: 25%;
}

.add_comp_var .add_comp_var_container .add_comp_var_bottom {
  display: flex;
  flex-direction: column;
  gap: 5px;
  height: 75%;
}

.add_comp_var .add_comp_var_container .add_comp_var_bottom .title_text {
  height: 5%
}

.add_comp_var .add_comp_var_container .add_comp_var_bottom .tab_container {
  height: 95%;
  border: 1px solid #eee;
  overflow-y: auto;
}

.add_comp_var .add_comp_var_container .add_comp_var_bottom .tab_container::-webkit-scrollbar {
  width: 5px;
}

.add_comp_var .add_comp_var_container .add_comp_var_bottom .tab_container td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}

.add_comp_var .add_comp_var_container .add_comp_var_bottom .tab_container input[type='text'],
.add_comp_var .add_comp_var_container .add_comp_var_bottom .tab_container select {
  width: 100%;
  height: 25px;
}

.input_and_button_div {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  justify-content: space-evenly;
}

.input_and_button_div input[type='text'] {
  width: 85%;
}

.input_and_button_div button {
  height: 30px;
  width: 15%;
}

.flex_items_end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}


.charts_box {
  max-width: 720px !important;
  width: 720px !important;
  height: 450px !important;
  max-height: 450px !important;
}

.charts_box .dialog_content {
  max-height: 355px !important;
  min-height: 355px !important;
  height: 355px !important;
}

.charts_box .charts_container {
  width: 696px;
  height: 344px;
  display: flex;
  flex-direction: row;
  gap: 5px;
  padding: 5px;
  border: 1px solid #eee;
}

.charts_box .charts_container .charts_container_left,
.charts_box .charts_container .charts_container_right {
  width: 50%;
  border: 1px solid #eee;
  height: 332px;
}

.charts_box .charts_container .charts_container_left {
  overflow: auto;
}

.charts_box .charts_container .charts_container_left::-webkit-scrollbar {
  width: 5px;
}

.charts_box .charts_container .charts_container_left .charts_preview {
  width: 100%;
  height: 100%;
}

.charts_box .charts_container .charts_fields {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 30px;
}

.charts_box .charts_container .charts_fields_title {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  background: #fafafa;
  padding: 5px;
  border: 1px solid #eee;
}

.charts_box .charts_container .charts_fields_value {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  border: 1px solid #eee;
}

.charts_box .charts_container .charts_fields_value .charts_fields_value_item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.charts_box .charts_container .charts_fields_value .charts_fields_value_item input[type='text'] {
  width: 85%;
}

.charts_box .charts_container .charts_fields_value .charts_fields_value_item input[type='checkbox'] {
  width: 85%;
}

.charts_box .charts_container .charts_fields_value .charts_fields_value_item input[type='number'] {
  width: 100% !important;
  height: 100% !important;
}

.charts_box .charts_container .charts_fields_value button {
  width: 20%;
  background: url(images/icons/configuration_ic.png) no-repeat center center;
  width: 25px;
  height: 25px;
}

.charts_box .charts_container .charts_fields_value select,
.charts_box .charts_container .charts_fields_value input[type='text'] {
  width: 100% !important;
  height: 100% !important;
}

/* charts data definition css */

.chart_data_def {
  max-width: 720px !important;
  width: 720px !important;
  height: 450px !important;
  max-height: 450px !important;
}

.chart_data_def_container {
  width: 695px;
  height: 347px;
  border: 1px solid #ccc;
}

#popups .chart_data_def .dialog_content .chart_data_def_container th {
  position: sticky;
  top: 0;
  color: #333;
  text-align: center !important;
  padding: 5px 0 !important;
  background: #fafafa;
  font-size: 13px !important;
  border: 1px solid #f1f1f1;
  z-index: 100;
  display: table-cell;
  font-weight: 500;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  ;
}

#popups .chart_data_def .dialog_content .chart_data_def_container td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  padding: 6px !important;
  text-align: center !important;
}

.charts_add_icon {
  display: inline-block;
  width: 100%;
  height: 15px;
  border: none;
  box-shadow: none;
  background: url(images/icons/plus_ic.svg) no-repeat center center;
  filter: var(--menu-icons-filter);
  cursor: pointer !important;
}

.charts_delete_icon {
  display: inline-block;
  width: 100%;
  height: 15px;
  border: none;
  box-shadow: none;
  background: transparent url(images/icons/del_icon.svg) no-repeat center center;
  filter: var(--menu-icons-filter);
  cursor: pointer !important;
}

/* data mapper css */
.headingBlock {
  background: #fafafa !important;
  color: black !important;
  display: table-cell !important;
  font-size: 13px !important;
  border: 1px solid #f1f1f1 !important;
  padding: 5px !important;
  position: sticky !important;
  top: 0 !important;
  font-weight: 500 !important;
  text-align: left !important;
  width: 45% !important;
}

.dropdown-container-simpleboject {
  height: 322px !important;
  background-color: white !important;
  border: 1px solid #ccc !important;
  overflow-y: auto !important;
  width: 100% !important;
}

.addButton-simpleObject {
  background-color: var(--brand-color) !important;
  padding: 5px 20px !important;
  border-radius: 5px !important;
  border: 1px solid #ccc !important;
  color: white !important;
}

.clearButton-simpleObject {
  background-color: #ccc !important;
  padding: 5px 20px !important;
  border-radius: 5px !important;
  border: 1px solid #ccc !important;
  color: #333 !important;
}

.validateButton-simpleObject {
  background-color: #ccc !important;
  padding: 5px 20px !important;
  border-radius: 5px !important;
  border: 1px solid #ccc !important;
  color: #333 !important;
}

.dataBlocks-dropdown {
  padding: 10px;
  border: 1px solid #f1f1f1 !important;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  width: "45%";
}

.operators-dropdown {
  width: 45%;
  border: 1px solid #f1f1f1 !important;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  padding: 10px;
}

.actions-area {

  border: 1px solid #f1f1f1 !important;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  padding: 10px;
}

.global_config_table table {
  border-radius: 8px;
}

.global_config_table table th:first-child {
  border-radius: 8px 0 0 0;
}

.global_config_table table th:last-child {
  border-radius: 0 8px 0 0;
}

.global_config_table table tr.lastbr_radius td:first-child {
  border-radius: 0 0 0 8px;
}

.global_config_table table tr.lastbr_radius td:last-child {
  border-radius: 0 0 8px 0;
}

.table-container {
  height: 340px;
  overflow-y: auto;
}

.table-container::-webkit-scrollbar {
  width: 5px;
}

/* search configurations */
.search_config {
  max-width: 776px !important;
  min-width: 776px !important;
  min-height: 510px !important;
  max-height: 510px !important;
  height: 510px !important;
  width: 776px !important;
}

.search_config_container {
  height: 397px;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  gap: 5px;
}

.search_config_container .search_config_actions {
  height: 10%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.search_config_container .search_config_actions button {
  background-color: var(--brand-color);
  color: #ffffff;
  padding: 4px 10px 4px 10px;
  border-radius: 4px;
  height: 32px;
  width: 200px;
}

.search_config_container .search_config_content {
  height: 90%;
  border: 1px solid #E4E4E4;
  border-radius: 12px;
  overflow-y: auto;
}

.search_config_container .search_config_content::-webkit-scrollbar {
  width: 5px;
}

#popups .search_config .dialog_content .search_config_container th {
  position: sticky;
  top: 0;
  color: #202124;
  padding: 5px 5px !important;
  background: #EEEEEE;
  font-size: 14px !important;
  /* border: 1px solid #E4E4E4; */
  z-index: 100;
  display: table-cell;
  font-weight: 400;
  height: 48px;
  vertical-align: middle;
  line-height: 20px;
  letter-spacing: 0.1px;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  ;
}

#popups .search_config .dialog_content .search_config_container tr {
  border-bottom: 1px solid #E4E4E4;
}

#popups .search_config .dialog_content .search_config_container th:first-child {
  border-radius: 12px 0px 0px 0px;
}

#popups .search_config .dialog_content .search_config_container th:last-child {
  border-radius: 0px 12px 0px 0px;
}

#popups .search_config .dialog_content .search_config_container td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #202124;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  padding: 6px !important;
  background: #FAFAFA;
  height: 48px;
  vertical-align: middle;
  line-height: 16px;
}

#popups .search_config .dialog_content .search_config_container td .search_config_icons {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  gap: 5px;
}

#popups .search_config .dialog_content .search_config_container td .search_config_icon {
  display: inline-block;
  height: 32px;
  width: 32px;
  background-color: #E9EDEE !important;
  border-radius: 6px;
  cursor: pointer;
}

#popups .search_config .dialog_content .search_config_container td .edit_search_config {
  background: url(images/icons/edit_pen_ic.svg) no-repeat center;
}

#popups .search_config .dialog_content .search_config_container td .delete_search_config,
#popups .dialog_content .remove-row-btn {
  background: url(images/icons/delete_red_ic.svg) no-repeat center;
}

/* search fields */
.search_field {
  max-width: 776px !important;
  min-width: 776px !important;
  min-height: 510px !important;
  max-height: 510px !important;
  height: 510px !important;
  width: 776px !important;
}

.search_field .search_field_container {
  height: 397px;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  gap: 5px;
}

.search_field .search_field_container .search_field_selection {
  height: 15%;
}

.search_field .search_field_container .search_field_content {
  height: 70%;
}

.search_field .search_field_container .search_field_selection .search_field_selection_fields {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  gap: 6px;
}

.search_field .search_field_container .search_field_selection .search_field_selection_fields input[type='text'] {
  height: 32px;
}

.search_field .search_field_container .search_field_selection span {
  font-size: 14px;
  font-weight: 500;
  line-height: 16.8px;
}

.search_field .search_field_container .search_field_selection_db_fields {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 10px;
}

.search_field .search_field_container .search_field_selection_db_fields .search_field_selection_db_field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.search_field .search_field_container .search_field_selection_db_fields .search_field_selection_db_field select {
  height: 32px;
}

.search_field .search_field_container .search_field_content .search_field_tabs {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 6px;
  height: 14%;
}

.search_field .search_field_container .search_field_content .search_field_tabs span {
  height: 33px;
  font-size: 14px;
  line-height: 16.8px;
  color: var(--brand-color);
  font-weight: 500;
  padding: 8px 12px 8px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.search_field .search_field_container .search_field_content .search_field_tabs .search_field_tab_active {
  background-color: var(--active-tag-color);
}

.search_field .search_field_container .search_field_content .search_field_content_box {
  width: 100%;
  height: 86%;
}

.search_field .search_field_container .search_field_content .search_field_content_box_container {
  width: 100%;
  height: 232px;
  overflow-y: auto;
}

.search_field .search_field_container .search_field_content .search_field_content_box_container input[type="checkbox"] {
  height: 15px;
  width: 15px;
}

.search_field .search_field_container .search_field_content .search_field_content_box_container label {
  font-size: 14px;
  font-weight: 400;
  line-height: 18.66px;
  letter-spacing: 2%;
  color: #5F6368;
}

.search_field .search_field_container .search_field_content .search_field_content_box_container::-webkit-scrollbar {
  width: 5px;
}

.search_field .search_field_container .search_field_content .search_field_content_box_table_container {
  width: 100%;
  height: 232px;
  overflow-y: auto;
  border: 1px solid #E4E4E4;
  border-radius: 12px;
}

.search_field .search_field_container .search_field_content .search_field_content_box_table_container .column_text {
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
  width: 130px;
  display: inline-block;
  line-height: 16px;
  font-weight: 400;
  font-size: 12px;
  color: #202124;
}

.search_field .search_field_container .search_field_content .search_field_content_box_table_container input[type="text"] {
  height: 25px;
  width: 100%;
}

.search_field .search_field_container .search_field_content .search_field_content_box_table_container select {
  height: 25px;
  width: 100%;
}

.search_field .search_field_container .search_field_content .search_field_content_box_table_container::-webkit-scrollbar {
  width: 5px;
}

.search_field .search_field_container .search_field_content .search_field_content_box_table_container th {
  position: sticky;
  top: 0;
  color: #202124;
  padding: 5px 5px !important;
  background: #EEEEEE;
  font-size: 14px !important;
  /* border: 1px solid #E4E4E4; */
  z-index: 100;
  display: table-cell !important;
  font-weight: 400;
  height: 48px;
  vertical-align: middle;
  line-height: 20px;
  letter-spacing: 0.1px;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  ;
}

.search_field .search_field_container .search_field_content .search_field_content_box_table_container tr {
  border-bottom: 1px solid #E4E4E4;
}

.search_field .search_field_container .search_field_content .search_field_content_box_table_container th:first-child {
  border-radius: 12px 0px 0px 0px;
}

.search_field .search_field_container .search_field_content .search_field_content_box_table_container th:last-child {
  border-radius: 0px 12px 0px 0px;
}

.search_field .search_field_container .search_field_content .search_field_content_box_table_container td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #202124;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  padding: 6px !important;
  background: #FAFAFA;
  height: 35px !important;
  vertical-align: middle;
  line-height: 16px;
}

.hide_search_field_box {
  display: none !important;
}

.restrict_events {
  opacity: 0.5;
  pointer-events: none;
}

.search-config-loader {
  border: 6px solid #eee;
  border-top: 6px solid #cccc;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
}

.search-config-loader-container {
  width: 100%;
  height: 15%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* document define actions */
.document_def_action {
  max-width: 776px !important;
  height: 510px !important;
  max-height: 510px !important;
}

.document_def_action .dialog_content {
  max-height: 410px !important;
}

.document_def_action .document_def_act_container {
  display: flex;
  flex-direction: column;
  background-color: white;
  height: 388px;
  width: 751px;
  padding: 8px;
}

.document_def_action .document_def_act_title {
  display: flex;
  flex-direction: row;
  color: black;
  font-size: 13px;
  height: 25px;
  align-items: center;
  padding: 5px 5px 5px 0px;
  font-weight: 500;

}

.document_def_action .document_def_act_container .document_def_act {
  flex: 1;
  background-color: white;
  border: 1px solid #ccc;
  overflow: auto;
}

.document_def_action .document_def_act_container .document_def_act select {
  background: white !important;
  width: 100%;
  color: black !important;
  border: 1px solid #ccc;
}

.document_def_action .dialog_content table #popup-tr-undefined th {
  background: #fafafa;
  color: black;
  display: table-cell !important;
  font-size: 13px !important;
  border: 1px solid #f1f1f1;
  padding: 5px !important;
  font-weight: 500;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  ;
}

#popups>.document_def_action>.buttons>button:disabled {
  visibility: visible !important;
  background-color: rgba(239, 239, 239, 0.3) !important;
  color: rgba(16, 16, 16, 0.3) !important;
  border-color: rgba(118, 118, 118, 0.3) !important;
}

.document_def_action select,
.document_def_action input[type="text"] {
  width: 100%;
  height: 100%;
}

/* document tree css */
/* tree table css for document define actions */
.document-def-act-tree-table-wrap {
  width: 100%;
}

.document-def-act-tree-table {
  border: 1px solid #f1f1f1 !important;
  table-layout: fixed !important;
  width: 100% !important;
  border-collapse: collapse !important;
  background-color: white !important;
}

.document-def-act-tree-table th {
  position: sticky;
  top: 0;
  color: #333;
  text-align: center;
  padding: 10px 0;
  background: #fafafa;
  font-size: 13px;
  border: 1px solid #f1f1f1;
  z-index: 100;
}

.document-def-act-tree-table td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}

.document-def-act-tree-table tr td:first-child {
  overflow: initial !important;
}

.document-def-act-tree-table-space-block {
  border: 1px solid transparent;
  display: inline-block;
  width: 20px !important;
  height: 20px !important;
  line-height: 16px;
  text-align: center;
  vertical-align: top;
  font-size: 19px !important;
  position: relative !important;
  box-sizing: border-box;
  margin-top: 7px;
  border-radius: 50%;
}

.document-def-act-tree-table tr td .document-def-act-tree-table-space-block:first-child {
  margin-left: 7px;
}

.document-def-act-tree-table-space-block.document-def-act-btn-toggle {
  /* border: 1px solid #d9d9d9; */
  position: relative;
  cursor: pointer;
  width: 15px;
  height: 17px;
  z-index: 12;
}

.document-def-act-tree-table-space-block.document-def-act-btn-toggle.is-close {
  background: #f1f1f1;
  border: 1px solid transparent;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.document-def-act-tree-table-space-block:before {
  position: absolute;
  content: "";
  width: 1px;
  height: 36px;
  background: #d9d9d9;
  left: 50%;
  top: -27px;
  z-index: -1;
}

.document-def-act-tree-table-space-block i {
  display: block;
  width: 3px;
  height: 3px;
  margin-left: 8px;
  margin-top: 7px;
  background: #d9d9d9;
  border-radius: 50%;
}

.document-def-act-tree-table-space-block.document-def-act-btn-toggle:before {
  display: none;
}

.document-def-act-tree-table-space-block.document-def-act-last-block:before {
  display: none;
}

.document-def-act-tree-table-space-block.document-def-act-last-block:after {
  position: absolute;
  content: "";
  width: 20px;
  height: 1px;
  background: #d9d9d9;
  top: 50%;
  margin-top: -1px;
  left: -10px;
}

.document-def-act-tree-table-space-block.document-def-act-btn-toggle:after {
  display: none;
}

.document-def-act-tree-table tr td .document-def-act-tree-table-space-block:first-child:after {
  display: none;
}

.document-def-act-tree-table-td-content {
  position: relative !important;
  display: inline-block;
  padding: 7px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
  width: 100px;
}

.document-def-act-hidden {
  display: none !important;
}

.document-def-act-show {
  visibility: visible !important;
}

/* execute */
.execute_options {
  width: auto;
  height: 28px;
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

.execute_options button {
  background-color: transparent;
  color: var(--brand-color, #0F467C);
  border: 1px solid var(--brand-color, #0F467C);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  height: 28px;
}

.execute_options button:hover {
  background-color: rgba(15, 70, 124, 0.08);
  transform: translateY(-1px);
}

.execute_options button:active {
  background-color: rgba(15, 70, 124, 0.16);
  transform: translateY(0);
}

.execute_options button span {
  color: #fff !important;
  font-family: 'Poppins', sans-serif;
  letter-spacing: 0.3px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.eye_tracking {
  -webkit-mask: url(images/icons/eye_tracking.svg) no-repeat center;
  mask: url(images/icons/eye_tracking.svg) no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: #fff;
  height: 14px;
  width: 14px;
  transition: transform 0.25s ease;
}

.execute_options button:hover .eye_tracking {
  transform: scale(1.1);
}

/* Compact dropdown styles specific to the Test execution dropdown to avoid affecting others */
.execute_options .mdb_new_dropdown_list {
  min-width: 230px !important;
  margin-top: 6px !important;
  padding: 6px !important;
}

.execute_options .mdb_new_dropdown_list li {
  padding: 8px 12px !important;
}

.execute_options .mdb_new_dropdown_list .mdb_dropdown_icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  margin-right: 10px !important;
  background: #f0f4f8 !important;
  color: var(--brand-color, #0F467C) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.execute_options .mdb_new_dropdown_list .mdb_dropdown_icon svg {
  width: 16px !important;
  height: 16px !important;
}

.execute_options .mdb_new_dropdown_list .mdb_dropdown_icon .eye_tracking {
  width: 15px !important;
  height: 15px !important;
  background-color: currentColor !important;
}

.execute_options .mdb_new_dropdown_list .mdb_dropdown_text .title {
  font-size: 13px !important;
}

.execute_options .mdb_new_dropdown_list .mdb_dropdown_text .desc {
  font-size: 10px !important;
}

/* Hover styles following brand-color only */
.execute_options .mdb_new_dropdown_list li:hover .mdb_dropdown_icon {
  background: var(--brand-color, #0F467C) !important;
  color: #ffffff !important;
}

.green_arrow_down {
  -webkit-mask: url(images/icons/keyboard_arrow_down_green.svg) no-repeat center;
  mask: url(images/icons/keyboard_arrow_down_green.svg) no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--brand-color);
  height: 16px;
  width: 13px;
}

.execute_drop_down_menu {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  min-width: 186px;
  box-shadow: 0px 4px 16px 0px #00000014;
  background: var(--menu-dropdown-background-color);
  border: 1px solid #0000001A;
  z-index: 100;
  border-radius: 6px;
}

.execute_drop_down_menu li {
  list-style: none;
}

.execute_drop_down_menu li.menu_item_disabled {
  pointer-events: none;
  opacity: 0.6;
  background-color: #eee;
}

.execute_drop_down_menu li:hover {
  background-color: var(--custom-dropdown-hover-color);
}

.execute_drop_down_menu li div {
  display: flex;
  align-items: center;
  flex-direction: row;
  width: 128px;
  gap: 6px;
}

.execute_drop_down_menu>li>a>* {
  pointer-events: none;
}

.execute_drop_down_menu>li>a>.name {
  flex-grow: 1;
  overflow: hidden;
  white-space: nowrap;
}

.execute_drop_down_menu li a div {
  text-decoration: none !important;
  color: #202124;
  line-height: 18.8px;
  font-weight: 400;
  font-size: 12px;
}

.execute_drop_down_menu li a div img {
  height: 20px;
  width: 18px;
}

.execute_drop_down_menu li a {
  text-decoration: none !important;
  color: var(--brand-color);
  line-height: 14px;
  font-weight: 500;
  font-size: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 32px;
  padding: 8px 16px 8px 16px;
}

.email_template {
  height: 300px !important;
  max-height: 300px;
  min-height: 300px;
  max-width: 450px !important;
  min-width: 450px !important;
  width: 450px !important;
}

.email_template .email-template-loader {
  height: 193px;
  width: 424px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.email_template_option .select_profile_mail_icon {
  position: absolute;
  /* top: 27px; */
  /* left: 0; */
  right: -4rem;
  height: 30px;
  width: 30px;
}

.email_template_option .disableImg {
  opacity: 0.4;
  pointer-events: none;
}

.email_template .email_template_container {
  height: 140px;
  width: 378px;
}

.email_template .email_template_container .email_template_options {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.email_template .email_template_container .email_template_options .email_template_option {
  height: 50%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.email_template_option {
  position: relative !important;

}

.email_template .email_template_container .email_template_options .email_template_option span {
  font-size: 14px;
  font-weight: 500;
  line-height: 16.8px;
}

.email_template_option select,
.email_template_option input[type='text'] {
  padding: 3px 3px !important;
  height: 32px;
  width: 100%;

}

.email_template .email_template_container .email_template_options .email_template_option input[type='text'] {
  height: 32px;
}

.email_template_container .dropdown-icon {
  position: absolute;
  top: 40px;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 1;
  right: 3px;
}

.email_template_container #subject_dropdownMenu {
  display: none;
  position: fixed;
  width: 380px;
  background: white;
  border: 1px solid #eeee;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  max-height: 112px;
  overflow-y: auto;
  z-index: 100;
}

.email_template_container #subject_dropdownMenu::-webkit-scrollbar {
  width: 5px;
}

.email_template_container #subject_dropdownMenu div {
  padding: 10px;
  cursor: pointer;
}

.email_template_container #subject_dropdownMenu div:hover {
  background-color: #f0f0f0;
}

/* execute loader */
.execute-loader {
  border: 2px solid #ccc;
  border-top: 2px solid var(--brand-color);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  animation: spin 1s linear infinite;
}

.execute-loader-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--brand-color);
  border-radius: 4px;
}

/* for list */
.custom_drop_down_menu {
  display: flex !important;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
  min-width: 205px;
  box-shadow: 0px 4px 16px 0px #00000014;
  background: var(--menu-dropdown-background-color);
  border: 1px solid #0000001A;
  z-index: 200;
  border-radius: 6px;
  height: auto !important;
}

.custom_drop_down_menu.ul {
  padding: 0px !important;
}

.custom_drop_down_menu li {
  list-style: none;
  border: none !important;
}

.custom_drop_down_menu li.menu_item_disabled {
  pointer-events: none;
  opacity: 0.6;
  background-color: #eee;
}

.custom_drop_down_menu li:hover {
  background-color: var(--custom-dropdown-hover-color);
}

.custom_drop_down_menu li div {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 6px;
}

.custom_drop_down_menu>li>a>* {
  pointer-events: none;
}

.custom_drop_down_menu>li>a>.name {
  flex-grow: 1;
  overflow: hidden;
  white-space: nowrap;
}

.custom_drop_down_menu>li>a[aria-haspopup="true"]::after {
  position: relative;
  content: ">";
  right: 9px;
  width: 5px;
  transform: scaleY(2);
  color: #808080;
}

.custom_drop_down_menu li a div {
  text-decoration: none !important;
  color: #202124;
  line-height: 18.8px;
  font-weight: 400;
  font-size: 12px;
}

.custom_drop_down_menu li a div .menu_item_icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  -webkit-mask: var(--icon-url) no-repeat center;
  mask: var(--icon-url) no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--brand-color);
}

.custom_drop_down_menu li a {
  text-decoration: none !important;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 32px !important;
  padding: 8px 16px 8px 16px;
  justify-content: space-between;
}

/* for icons menu */
.custom_icons_drop_down_menu {
  display: flex !important;
  flex-wrap: wrap;
  place-content: flex-start space-evenly;
  gap: 12px 12px;
  justify-content: flex-start;
  position: fixed;
  top: 0;
  left: 0;
  list-style: none !important;
  padding: 16px !important;
  margin: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
  max-width: 400px;
  /* max-height:300px; */
  box-shadow: 0px 1px 3px 0px #0000004D;
  box-shadow: 0px 4px 8px 3px #00000026;
  background: var(--menu-dropdown-background-color);
  border: 2px solid #EEEEEE;
  z-index: 200;
  border-radius: 6px;
  border-radius: 6px;
}

.custom_icons_drop_down_menu.ul {
  padding: 0px !important;
}

.custom_icons_drop_down_menu li {
  list-style: none;
  border: none !important;
}

.custom_icons_drop_down_menu li .custom_icons_drop_down_menu_list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.custom_icons_drop_down_menu li.menu_item_disabled {
  pointer-events: none;
  opacity: 0.6;
  background-color: #eee;
}

.custom_icons_drop_down_menu li:hover {
  background-color: var(--custom-dropdown-hover-color);
  ;
}

.custom_icons_drop_down_menu li div {
  display: flex;
  align-items: center;
  flex-direction: row;
  width: 128px;
  gap: 6px;
}

.custom_icons_drop_down_menu>li>a>* {
  pointer-events: none;
}

.custom_icons_drop_down_menu>li>a>.custom_icons_drop_down_menu_list>.name {
  flex-grow: 1;
  overflow: hidden;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 500;
  font-size: 12px;
  line-height: 100%;
  text-align: center;
}

.custom_icons_drop_down_menu li a div {
  text-decoration: none !important;
  color: #202124;
  line-height: 18.8px;
  font-weight: 400;
  font-size: 12px;
}

.custom_icons_drop_down_menu li a div img {
  /* height: 20px;
  width: 18px; */
}

.custom_icons_drop_down_menu li a {
  text-decoration: none !important;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 111px;
  padding: 8px 16px 8px 16px;
  height: 76px;
}

/* group define actions */
/* group define actions */
.group_def_action {
  max-width: 776px !important;
  height: 510px !important;
  max-height: 510px !important;
}

.group_def_action .dialog_content {
  max-height: 410px !important;
}

.group_def_action .group_def_act_container {
  display: flex;
  flex-direction: column;
  background-color: white;
  height: 388px;
  width: 751px;
  padding: 8px;
}

.group_def_action .group_def_act_title {
  display: flex;
  flex-direction: row;
  color: black;
  font-size: 13px;
  height: 25px;
  align-items: center;
  padding: 5px 5px 5px 0px;
  font-weight: 500;

}

.group_def_action .group_def_act_container .group_def_act {
  flex: 1;
  background-color: white;
  border: 1px solid #ccc;
  overflow: auto;
}

.group_def_action .group_def_act_container .group_def_act::-webkit-scrollbar {
  width: 5px;
}

.group_def_action .group_def_act_container .group_def_act select {
  background: white !important;
  width: 100%;
  color: black !important;
  border: 1px solid #ccc;
}

.group_def_action .dialog_content table #popup-tr-undefined th {
  background: #fafafa;
  color: black;
  display: table-cell !important;
  font-size: 13px !important;
  border: 1px solid #f1f1f1;
  padding: 5px !important;
  font-weight: 500;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  ;
}

#popups>.group_def_action>.buttons>button:disabled {
  visibility: visible !important;
  background-color: rgba(239, 239, 239, 0.3) !important;
  color: rgba(16, 16, 16, 0.3) !important;
  border-color: rgba(118, 118, 118, 0.3) !important;
}

.group_def_action select,
.group_def_action input[type="text"] {
  width: 100%;
  height: 100%;
}

/* group tree css */
/* tree table css for group define actions */
.group-def-act-tree-table-wrap {
  width: 100%;
}

.group-def-act-tree-table {
  border: 1px solid #f1f1f1 !important;
  table-layout: fixed !important;
  width: 100% !important;
  border-collapse: collapse !important;
  background-color: white !important;
}

.group-def-act-tree-table th {
  position: sticky;
  top: 0;
  color: #333;
  text-align: center;
  padding: 10px 0;
  background: #fafafa;
  font-size: 13px;
  border: 1px solid #f1f1f1;
  z-index: 100;
}

.group-def-act-tree-table td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}

.group-def-act-tree-table tr td:first-child {
  overflow: initial !important;
}

.group-def-act-tree-table-space-block {
  border: 1px solid transparent;
  display: inline-block;
  width: 20px !important;
  height: 20px !important;
  line-height: 16px;
  text-align: center;
  vertical-align: top;
  font-size: 19px !important;
  position: relative !important;
  box-sizing: border-box;
  margin-top: 7px;
  border-radius: 50%;
}

.group-def-act-tree-table tr td .group-def-act-tree-table-space-block:first-child {
  margin-left: 7px;
}

.group-def-act-tree-table-space-block.group-def-act-btn-toggle {
  /* border: 1px solid #d9d9d9; */
  position: relative;
  cursor: pointer;
  width: 15px;
  height: 17px;
  z-index: 12;
}

.group-def-act-tree-table-space-block.group-def-act-btn-toggle.is-close {
  background: #f1f1f1;
  border: 1px solid transparent;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.group-def-act-tree-table-space-block:before {
  position: absolute;
  content: "";
  width: 1px;
  height: 36px;
  background: #d9d9d9;
  left: 50%;
  top: -27px;
  z-index: -1;
}

.group-def-act-tree-table-space-block i {
  display: block;
  width: 3px;
  height: 3px;
  margin-left: 8px;
  margin-top: 7px;
  background: #d9d9d9;
  border-radius: 50%;
}

.group-def-act-tree-table-space-block.group-def-act-btn-toggle:before {
  display: none;
}

.group-def-act-tree-table-space-block.group-def-act-last-block:before {
  display: none;
}

.group-def-act-tree-table-space-block.group-def-act-last-block:after {
  position: absolute;
  content: "";
  width: 20px;
  height: 1px;
  background: #d9d9d9;
  top: 50%;
  margin-top: -1px;
  left: -10px;
}

.group-def-act-tree-table-space-block.group-def-act-btn-toggle:after {
  display: none;
}

.group-def-act-tree-table tr td .group-def-act-tree-table-space-block:first-child:after {
  display: none;
}

.group-def-act-tree-table-td-content {
  position: relative !important;
  display: inline-block;
  padding: 7px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
  width: 130px;
}

.group-def-act-hidden {
  display: none !important;
}

.group-def-act-show {
  visibility: visible !important;
}

/* mathematical expression */
.math_exp {
  width: 600px !important;
  min-width: 600px !important;
  max-width: 600px !important;
  max-height: 400px !important;
  min-height: 400px !important;
  height: 400px !important;
}

.math_exp .math_exp_container {
  height: 290px;
  width: 575px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.math_exp .math_exp_container .math_exp_title {
  height: 6%;
  font-size: 14px;
  font-weight: 500;
  line-height: 16.8px;
}

.math_exp .math_exp_container .math_exp_box {
  height: 94%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.math_exp .math_exp_container .math_exp_fields {
  height: 20%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.math_exp .math_exp_container .math_exp_fields .math_exp_fields_block_title {
  font-size: 13px;
  font-weight: 500;
  line-height: 16.8px;
}

.math_exp .math_exp_container .math_exp_editor {
  height: 68%;
  width: 100%;
}

.math_exp .math_exp_container .math_exp_editor textarea {
  height: 100%;
  width: 100%;
  border: 1px solid #ccc !important;
  padding: 5px;
  resize: none;
}

.math_exp .math_exp_container .math_exp_buttons {
  height: 12%;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 5px;
}

.math_exp .math_exp_container .math_exp_buttons button {
  height: 28px;
  width: 100px;
}

.math_exp .math_exp_container .math_exp_buttons .math_exp_validate {
  background-color: var(--brand-color);
  color: #ffffff;
}

.math_exp .math_exp_container .math_exp_fields .math_exp_fields_block {
  height: 28px;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 5px;
}

.math_exp .math_exp_container .math_exp_fields .math_exp_fields_block select {
  width: 90%;
  height: 100%;
}

.math_exp .math_exp_container .math_exp_fields .math_exp_fields_block button {
  width: 10%;
  height: 100%;
  background-color: var(--brand-color);
  color: #ffffff;
}

/* server health */
.server_health_container {
  display: flex;
  align-items: center;
  width: 475px;
  height: 95px;
  justify-content: center;
  gap: 5px;
}

.server_health_container .bold_text {
  font-weight: bold;
}

.no_conn_ic {
  background: url(images/icons/no_connection.svg) no-repeat center;
  height: 20px;
  width: 20px;
}

/*  level settings */
.level_settings {
  max-width: 776px !important;
  height: 510px !important;
  max-height: 510px !important;
  width: 776px !important;
  min-width: 776px !important;
  min-height: 510px !important;
}

.level_settings .level_settings_container {
  display: flex;
  flex-direction: row;
  background-color: #FFFFFF;
  gap: 5px;
  height: 388px;
  width: 751px;
  padding: 8px;
}

.level_settings .level_settings_container .level_settings_list {
  flex: 1;
  border: 1px solid #eee;
}

.level_settings .level_settings_container .level_settings_list .level_settings_title {
  width: 100%;
  padding: 5px;
  font-weight: 500;
  font-size: 13px;
  border-bottom: 1px solid #eee;
  background-color: #fafafa;
  height: 30px;
}

.level_settings .level_settings_container .level_settings_list .level_settings_fgl_list_container li {
  height: 30px;
  border-bottom: 1px solid #eee !important;
  width: 100%;
}

.level_settings .level_settings_container .level_settings_list .level_settings_fgl_list_container li:hover {
  background: linear-gradient(to right, #eef2ff, #f9fafd)
}

.level_settings .level_settings_container .level_settings_list .level_settings_fgl_list_container li span {
  font-size: 12px !important;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 5px;

}

.level_settings .level_settings_container .level_settings_fgt_props {
  flex: 2;
  border: 1px solid #eee;
  overflow: auto;
}

.level_settings .level_settings_container .level_settings_fgt_props::-webkit-scrollbar {
  width: 5px;
}

.level_settings .level_settings_container .level_settings_fgt_props table {
  table-layout: fixed;
}

.level_settings .level_settings_container .level_settings_fgt_props table input[type='checkbox'] {
  margin: 0px !important;
}

.level_settings .level_settings_container .level_settings_fgt_props th {
  background: #fafafa;
  color: black;
  display: table-cell !important;
  font-size: 13px !important;
  border: 1px solid #f1f1f1;
  padding: 5px !important;
  font-weight: 500;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  position: sticky;
  top: 0;
}

.level_settings .level_settings_container .level_settings_fgt_props td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  padding: 0px 5px 0px 5px;
}

/* profile settings � legacy overridden by newer rules below */
.profile_details {
  /* sizing and overflow managed by the later .profile_details block */
}

.profile_details .buttons {
  display: none !important;
}

.profile_details_container {
  /* layout managed by the later .profile_details_container block */
}

/* legacy elements, no longer rendered */
.profile_details_pic {
  display: none;
}

.profile_details_info {
  display: none;
}

.profile_details_info label {
  display: none;
}

.profile_details_info span {
  display: none;
}

/* global template */

.global_temp_map {
  width: 430px !important;
  min-width: 430px !important;
  max-width: 430px !important;
  height: 296px !important;
  max-height: 296px !important;
  min-height: 296px !important;
}

.global_temp_map_container {
  height: 194px;
  width: 405px;
}

.global_temp_map_container .global_temp_map_selection {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  gap: 6px;
}

.global_temp_map_container .global_temp_map_selection_field {
  display: flex;
  flex-direction: column;
  width: 49%;
  gap: 6px;
}

.global_temp_map_container .global_temp_map_selection_field span {
  font-size: 14px;
  font-weight: 500;
  line-height: 16.8px;
}

.global_temp_map_container .global_temp_map_selection_field select {
  height: 32px;
}

.global_temp_map_container .global_temp_map_loader {
  border: 2px solid #ccc;
  border-top: 2px solid var(--brand-color);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
}

.global_temp_map_container .global_temp_map_loader_container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

/* pdf_merge */
.merge_pdf {
  max-width: 776px !important;
  min-width: 776px !important;
  min-height: 510px !important;
  max-height: 510px !important;
  height: 510px !important;
  width: 776px !important;
}

.merge_pdf .merge_pdf_container {
  height: 397px;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  gap: 5px;
}

.merge_pdf_actions_on_empty {
  height: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  width: 100% !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  background-color: #eee !important;
  align-items: center !important;
}

.merge_pdf_container .merge_pdf_actions_on_empty button {
  background-color: var(--brand-color);
  color: #ffffff;
  padding: 4px 10px 4px 10px;
  border-radius: 4px;
  height: 32px;
  width: 200px;
}

.merge_pdf_container .merge_pdf_actions {
  height: 10%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.merge_pdf_container .merge_pdf_actions button {
  background-color: var(--brand-color);
  color: #ffffff;
  padding: 4px 10px 4px 10px;
  border-radius: 4px;
  height: 32px;
  width: 200px;
}

.merge_pdf_container .merge_pdf_content {
  height: 90%;
  border: 1px solid #E4E4E4;
  border-radius: 12px;
  overflow-y: auto;
}

.merge_pdf_container .merge_pdf_content::-webkit-scrollbar {
  width: 5px;
}

#popups .merge_pdf .dialog_content .merge_pdf_container th {
  position: sticky;
  top: 0;
  color: #202124;
  padding: 5px 5px !important;
  background: #EEEEEE;
  font-size: 14px !important;
  /* border: 1px solid #E4E4E4; */
  z-index: 100;
  display: table-cell;
  font-weight: 400;
  height: 48px;
  vertical-align: middle;
  line-height: 20px;
  letter-spacing: 0.1px;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  ;
}

#popups .merge_pdf .dialog_content .merge_pdf_container tr {
  border-bottom: 1px solid #E4E4E4;
}

#popups .merge_pdf .dialog_content .merge_pdf_container th:first-child {
  border-radius: 12px 0px 0px 0px;
}

#popups .merge_pdf .dialog_content .merge_pdf_container th:last-child {
  border-radius: 0px 12px 0px 0px;
}

#popups .merge_pdf .dialog_content .merge_pdf_container td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #202124;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  padding: 6px !important;
  background: #FAFAFA;
  height: 48px;
  vertical-align: middle;
  line-height: 16px;
}

#popups .merge_pdf .dialog_content .merge_pdf_container td .merge_pdf_icons {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  gap: 5px;
}

#popups .merge_pdf .dialog_content .merge_pdf_container td .merge_pdf_icon {
  display: inline-block;
  height: 32px;
  width: 32px;
  background-color: #E9EDEE !important;
  border-radius: 6px;
  cursor: pointer;
}

#popups .merge_pdf .dialog_content .merge_pdf_container td .edit_merge_pdf {
  background: url(images/icons/edit_pen_ic.svg) no-repeat center;
}

#popups .merge_pdf .dialog_content .merge_pdf_container td .delete_merge_pdf {
  background: url(images/icons/delete_red_ic.svg) no-repeat center;
}

#popups .merge_pdf .dialog_content .merge_pdf_container td .merge_pdf_icons {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: flex-start;
  gap: 5px;
}

#popups .merge_pdf .dialog_content .merge_pdf_container td .merge_pdf_icon {
  display: inline-block;
  height: 32px;
  width: 32px;
  background-color: #E9EDEE !important;
  border-radius: 6px;
  cursor: pointer;
}

#popups .merge_pdf .dialog_content .merge_pdf_container td .edit_merge_pdf {
  background: url(images/icons/edit_pen_ic.svg) no-repeat center;
}

#popups .merge_pdf .dialog_content .merge_pdf_container td .delete_merge_pdf {
  background: url(images/icons/delete_red_ic.svg) no-repeat center;
}

.merge_pdf_loader {
  border: 8px solid #eee;
  border-top: 8px solid #cccc;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

.merge_pdf_loader_container {
  height: 397px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*  */
.add-connections-btn {
  width: 30%;
  color: white;
  background-color: var(--brand-color);
  padding: 5px;

}

.add-connections-btn:hover {
  background-color: var(--active-tag-color);
}

/* ADD filter settings */
.variable_filter_settings {
  max-width: 776px !important;
  height: 510px !important;
  max-height: 510px !important;
  min-height: 510px !important;
  width: 776px !important;
  min-width: 776px !important;
}

.variable_filter_settings .variable_filter_settings_container {
  display: flex;
  flex-direction: column;
  background-color: white;
  height: 388px;
  width: 751px;
  padding: 8px;
  gap: 5px;
}

.variable_filter_settings .variable_filter_settings_container .variable_filter_settings_add {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  height: 10%;
}

.variable_filter_settings .variable_filter_settings_container .variable_filter_settings_add button {
  background-color: var(--brand-color);
  color: #ffffff;
  padding: 4px 10px 4px 10px;
  border-radius: 4px;
  height: 32px;
  width: 200px;
}

.variable_filter_settings .variable_filter_settings_container .variable_filter_settings_list {
  height: 90%;
  border: 1px solid #E4E4E4;
  border-radius: 12px;
  overflow-y: auto;
}

.variable_filter_settings .variable_filter_settings_container .variable_filter_settings_list::-webkit-scrollbar {
  width: 5px;
}

.variable_filter_settings .variable_filter_settings_container .variable_filter_settings_list tr {
  border-bottom: 1px solid #E4E4E4;
}

.variable_filter_settings .variable_filter_settings_container .variable_filter_settings_list th {
  position: sticky;
  top: 0;
  color: #202124;
  padding: 5px 5px !important;
  background: #EEEEEE;
  font-size: 14px !important;
  /* border: 1px solid #E4E4E4; */
  z-index: 100;
  display: table-cell !important;
  font-weight: 400;
  height: 48px;
  vertical-align: middle;
  line-height: 20px;
  letter-spacing: 0.1px;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

.variable_filter_settings .variable_filter_settings_container .variable_filter_settings_list th:first-child {
  border-radius: 12px 0px 0px 0px;
}

.variable_filter_settings .variable_filter_settings_container .variable_filter_settings_list th:last-child {
  border-radius: 0px 12px 0px 0px;
}

.variable_filter_settings .variable_filter_settings_container .variable_filter_settings_list td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #202124;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  padding: 6px !important;
  background: #FAFAFA;
  height: 48px;
  vertical-align: middle;
  line-height: 16px;
}

.variable_filter_settings .variable_filter_settings_container .variable_filter_settings_list td select,
.variable_filter_settings .variable_filter_settings_container .variable_filter_settings_list td input {
  width: 100%;
  height: 30px;
}

.variable_filter_settings .variable_filter_settings_container .variable_filter_settings_list td .variable_filter_settings_actions {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  gap: 5px;
}

.variable_filter_settings .variable_filter_settings_container .variable_filter_settings_list td .variable_filter_settings_actions .variable_filter_settings_actions_delete_icon {
  background: url(images/icons/delete_red_ic.svg) no-repeat center;
  display: inline-block;
  height: 32px;
  width: 32px;
  background-color: #E9EDEE !important;
  border-radius: 6px;
  cursor: pointer;
}

/* replace window */
.replace_text {
  width: 550px !important;
  min-width: 550px !important;
  max-width: 550px !important;
  ;
  min-height: 300px !important;
  height: auto !important;
  max-height: 600px !important;
}

.replace_text .dialog_content {
  min-height: 200px !important;
  max-height: 500px !important;
  height: auto;
}

.replace_text .replace_container {
  width: 525px;
  min-height: 150px;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.replace_text .replace_container .replace_search_area {
  display: flex;
  flex-direction: row;
  gap: 10px;
  height: 40%;
  width: 100%;
}

.replace_text .replace_container .replace_search_area .replace_search {
  width: 70%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.replace_text .replace_container .replace_search_area .replace_search .replace_search_box {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.replace_text .replace_container .replace_search_area .replace_search .replace_search_box span {
  font-size: 14px;
  font-weight: 500;
  line-height: 16.8px;
}

.replace_text .replace_container .replace_search_area .replace_search .replace_search_box input[type='text'] {
  height: 32px;
}

.replace_text .replace_container .replace_search_area .replace_buttons {
  width: 30%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
}

.replace_text .replace_container .replace_search_area .replace_buttons button {
  width: 100%;
  min-height: 26px;
  height: auto;
  padding: 0px 8px 0px 8px;
  border-radius: 4px;
  border: 1px solid var(--brand-color);
  color: var(--brand-color);
}

.replace_text .replace_container .replace_results {
  height: auto;
  max-height: 60%;
  width: 100%;
  overflow: auto;
}

.replace_text .replace_container .replace_results::-webkit-scrollbar {
  width: 5px;
}

#raw-string-btn:disabled {
  visibility: visible;
}

.vc-loader {
  border: 5px solid #eee;
  border-top: 5px solid #ccc;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

.vc-loader-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.vc-set-active-container {
  width: 475px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.comment_container {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.page_number_settings {
  --page-number-setting-height: 80vh;
  --page-number-setting-width: 60vw;
  max-width: var() !important;
  width: var(--page-number-setting-width) !important;
  min-width: var(--page-number-setting-width) !important;
  height: var(--page-number-setting-height) !important;
  min-height: var(--page-number-setting-height) !important;
  max-height: var(--page-number-setting-height) !important;
}

.page_number_settings .dialog_content {
  overflow: hidden !important;
  --page-number-setting-dc-height: calc(var(--page-number-setting-height) - 85px);
  --page-number-setting-dc-width: var(--page-number-setting-width);
  height: var(--page-number-setting-dc-height) !important;
  max-height: var(--page-number-setting-dc-height) !important;
  min-height: var(--page-number-setting-dc-height) !important;
  width: var(--page-number-setting-dc-width) !important;
}

.page_num_setting_modal {
  width: calc(var(--page-number-setting-dc-width) - 18px);
  height: calc(var(--page-number-setting-dc-height) - 35px);
  display: flex;
  flex-direction: column;
  gap: 5px;
  background-color: #fafafa;
  overflow: hidden;
}

.page_num_setting_modal_container {
  height: 60%;
  width: 100%;
  display: flex;
}

.page_num_setting_global_options {
  height: 10%;
  width: 100%;
  border-top: 1px solid #e2e8f0;
  padding: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.page_num_setting_preview {
  height: 30%;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.page_num_setting_preview .page_num_setting_preview_text {
  width: 100%;
  height: 100%;
  border: 1px solid #e2e8f0;
  position: relative;
}

.page_num_setting_sidebar {
  width: 25%;
  background: #f9fafb;
  border-right: 1px solid #e2e8f0;
  padding: 10px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.page_num_setting_nav_title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #000;
  font-weight: 700;
  margin-bottom: 16px;
  padding-left: 12px;
}

.page_num_setting_nav_item {
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  color: #000;
  font-weight: 500;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.page_num_setting_nav_item:hover {
  background: #eef2ff;
  color: var(--brand-hover-color);
}

.page_num_setting_nav_item.active {
  background: #e0e7ff;
  color: var(--brand-color);
  font-weight: 600;
}

.page_num_setting_content {
  width: 75%;
  height: 100%;
  padding: 10px;
  position: relative;
}

.page_num_setting_content .page_num_setting_tab_container {
  height: 100%;
}

.page_num_setting_tab_panel_container {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 10px;
}

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

.page_num_setting_section_options_container {
  height: 350px;
  overflow-y: auto;
  padding: 10px;
}

.page_num_setting_section_options_container::-webkit-scrollbar {
  width: 5px;
}

.page_num_setting_section_title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.page_num_setting_section_desc {
  color: #000;
  margin: 0 !important;
  font-size: 12px;
}

.page_num_setting_tab_panel {
  display: none;
}

.page_num_setting_tab_panel.active {
  display: block;
}

.page_num_setting_form_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.page_num_setting_form_group {
  margin-bottom: 10px;
}

.page_num_setting_label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 8px;
  color: #0f172a;
}

.page_num_setting_input[type='text'],
.page_num_setting_input[type='number'],
.page_num_setting_select {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: white;
  height: 30px;
}

.page_num_setting_input:focus,
.page_num_setting_select:focus {
  outline: none;
  border-color: var(--brand-color);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.page_num_setting_toggle_wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
  gap: 10px;
}

.page_num_setting_toggle_label {
  font-size: 12px;
}

.page_num_setting_field_checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.page_num_setting_switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  margin: 0 !important;
}

.page_num_setting_switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.page_num_setting_slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e5e7eb;
  transition: 0.4s;
  border-radius: 34px;
}

.page_num_setting_slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.page_num_setting_switch input:checked+.page_num_setting_slider {
  background-color: var(--brand-color);
}

.page_num_setting_switch input:checked+.page_num_setting_slider:before {
  transform: translateX(20px);
}

.page_num_setting_action_bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 40px;
  background: white;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.page_num_setting_btn {
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s;
  border: none;
}

.page_num_setting_btn_secondary {
  background: white;
  border: 1px solid #e2e8f0;
  color: #0f172a;
}

.page_num_setting_btn_secondary:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.page_num_setting_btn_primary {
  background: var(--brand-color);
  color: white;
}

.page_num_setting_btn_primary:hover {
  background: #4f46e5;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(99, 102, 241, 0.2);
}

.page_number_settings svg {
  width: 18px;
  height: 18px;
}

.page_num_setting_radio_group {
  display: flex;
  gap: 20px;
  margin-top: 8px;
}

.page_num_setting_radio_option {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.page_num_setting_radio_circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  margin-right: 8px;
  position: relative;
  transition: border-color 0.2s;
}

.page_num_setting_radio_option.page_num_setting_selected .page_num_setting_radio_circle {
  border-color: var(--brand-color);
}

.page_num_setting_radio_option.page_num_setting_selected .page_num_setting_radio_circle:after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--brand-color);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.page_num_setting_color_options {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.page_num_setting_color_option {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s;
}

.page_num_setting_color_option:hover {
  transform: scale(1.1);
}

.page_num_setting_color_option.active {
  border-color: var(--brand-color);
}



.page_num_setting_reset_btn button {
  background: var(--brand-color) !important;
  border: 1px solid var(--brand-color) !important;
  color: #ffffff !important;
  font-weight: 500;
  padding: 5px 15px !important;
  cursor: pointer;
  text-shadow: none !important;
  display: inline-block;
  text-align: center;
}

/* template rename */
.temp_rename {
  width: 500px;
  min-width: 500px;
  max-width: 500px;
  height: 228px;
  min-height: 228px;
  max-height: 228px;

}

/* Custom Theming with unique prefix */
.dup-tmp-check-card {
  width: 450px;
  overflow: hidden;
  height: 115px;
}

.dup-tmp-check-card label {
  margin: 0px !important;
}

.dup-tmp-check-card .dup-tmp-check-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  width: 100%;
}

.dup-tmp-check-card .dup-tmp-check-body input[type='text'] {
  height: 32px;
  width: 100%;
}

.dup-tmp-check-label {
  font-size: 13px;
  color: #6c757d;
}

.dup-tmp-check-footer {
  background-color: #f8f9fa;
  border-top: 1px solid #f0f0f0;
}

/* Fix for Bootstrap checkbox alignment with your utility classes */
.form-check-input {
  margin-top: 0 !important;
}

.ref-page-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  color: var(--brand-color);
  border: 1px solid var(--brand-color);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
}

/* Profile Dropdown, Details, and Change Password styles */
.profile_dropdown_menu {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  border: 1.5px solid rgba(226, 232, 240, 0.8) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(15, 70, 124, 0.08) !important;
  overflow: hidden !important;
  padding: 6px 0 !important;
  min-width: 170px !important;
}

.profile_dropdown_menu li {
  margin: 0 6px !important;
  border-radius: 8px !important;
  overflow: hidden;
}

.profile_dropdown_menu li:hover {
  background-color: #f1f5f9 !important;
}

.profile_dropdown_menu li a {
  height: 38px !important;
  padding: 8px 12px !important;
  font-family: 'Inter', sans-serif !important;
  justify-content: flex-start;
}

.profile_dropdown_menu li a div {
  width: 100% !important;
}

.profile_dropdown_menu li a div span {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #334155 !important;
}

/* Profile dialog � no scroll, auto-height to fit content */
.profile_details {
  max-width: 400px !important;
  width: 400px !important;
  min-width: 400px !important;
  height: auto !important;
  min-height: unset !important;
  max-height: 80vh !important;
}

#popups .profile_details .dialog_content {
  overflow: hidden !important;
  min-height: unset !important;
  padding: 0 !important;
  height: auto !important;
  max-height: none !important;
}

.profile_details .buttons {
  display: none !important;
}

.profile_details_container {
  background: #ffffff !important;
  border-top: none !important;
  padding: 28px 24px 24px !important;
  text-align: center !important;
  width: 100% !important;
  height: auto !important;
  box-sizing: border-box !important;
  font-family: 'Inter', sans-serif !important;
}

.profile_avatar_circle {
  width: 68px;
  height: 68px;
  background: linear-gradient(135deg, var(--brand-color, #193497) 0%, #0c1b5e 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  box-shadow: 0 4px 16px rgba(25, 52, 151, 0.22);
}

.profile_avatar_initials {
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.profile_user_name_title {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 14px 0;
  text-transform: capitalize;
}

.profile_details_divider {
  height: 1px;
  background: #e2e8f0;
  margin: 0 0 14px 0;
}

.profile_details_grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.profile_detail_item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f8fafc;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #f1f5f9;
}

.profile_detail_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: #eef2ff;
  border-radius: 8px;
  color: var(--brand-color, #193497);
}

.profile_detail_icon svg {
  display: block;
}

.profile_detail_content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.profile_detail_label {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 2px;
}

.profile_detail_value {
  font-size: 13px;
  color: #334155;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Change password dialog � no scroll, tighter layout */
.change_password_modal {
  max-width: 420px !important;
  width: 420px !important;
  min-width: 420px !important;
  height: auto !important;
  min-height: unset !important;
  max-height: 80vh !important;
}

#popups .change_password_modal .dialog_content {
  overflow: hidden !important;
  min-height: unset !important;
  padding: 0 !important;
  height: auto !important;
  max-height: none !important;
}

.change_password_container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  font-family: 'Inter', sans-serif !important;
  box-sizing: border-box;
  width: 100%;
}

.cp_field_group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cp_input_label {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}

.cp_input_wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  transition: all 0.2s ease;
  height: 38px;
  overflow: hidden;
}

.cp_input_wrapper:focus-within {
  border-color: var(--brand-color, #193497);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(25, 52, 151, 0.1);
}

.cp_field_icon {
  padding-left: 10px;
  padding-right: 6px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.cp_input_field {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  padding: 8px 8px 8px 0;
  color: #1e293b;
  height: 100%;
}

.cp_visibility_toggle {
  background: none;
  border: none;
  padding: 0 12px;
  cursor: pointer;
  color: #94a3b8;
  display: flex;
  align-items: center;
  height: 100%;
  font-size: 14px;
}

.cp_visibility_toggle:hover {
  color: var(--brand-color, #193497);
}

.cp_strength_meter {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
}

.cp_strength_header {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
  margin-bottom: 6px;
}

.cp_strength_status {
  font-weight: 700;
  color: #94a3b8;
}

.cp_visibility_toggle svg {
  display: block;
  pointer-events: none;
}

.cp_strength_bars {
  display: flex;
  gap: 4px;
  height: 4px;
  margin-bottom: 10px;
}

.cp_strength_bar {
  flex: 1;
  height: 100%;
  background: #e2e8f0;
  border-radius: 2px;
  transition: background-color 0.2s;
}

.cp_strength_bar.weak {
  background-color: #ef4444 !important;
}

.cp_strength_bar.medium {
  background-color: #f97316 !important;
}

.cp_strength_bar.strong {
  background-color: #22c55e !important;
}

.cp_requirements_list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}

.cp_req_item {
  font-size: 10.5px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color 0.2s;
}

.cp_req_item.valid {
  color: #16a34a !important;
  font-weight: 500;
}

.cp_req_bullet {
  font-weight: bold;
}

.cp_match_status {
  font-size: 11px;
  margin-top: 4px;
  display: none;
}

.cp_match_status.success {
  display: block;
  color: #16a34a;
}

.cp_match_status.error {
  display: block;
  color: #ef4444;
}

.change_password_modal [data-id="popup_ok"]:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.cp_spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: cp-spin 0.8s linear infinite;
  margin-right: 4px;
}

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

/* ===== PROFILE v2 (pd2) ===== */
#popups .pd2_popup h2[data-id="popup_title"] {
  display: none !important;
}

#popups .pd2_popup {
  padding: 0 !important;
}

#popups .pd2_popup .dialog_content {
  overflow-y: auto !important;
  padding: 0 !important;
  min-height: unset !important;
  height: auto !important;
  max-height: none !important;
}

#popups .pd2_popup .buttons {
  position: relative !important;
  border-top: 1px solid #f1f5f9 !important;
  margin: 0 !important;
  padding: 0.5rem 1rem !important;
}

.pd2_popup {
  width: 350px !important;
  min-width: 350px !important;
  max-width: 350px !important;
  height: auto !important;
  min-height: unset !important;
  max-height: 85vh !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

.pd3_card {
  font-family: 'Inter', 'Poppins', sans-serif;
  color: #1e293b;
}

.pd3_hero {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 24px 20px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
  position: relative;
}

.pd3_avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--brand-color, #193497);
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.2px;
  transition: transform 0.2s ease;
}

.pd3_avatar:hover {
  transform: scale(1.05);
}

.pd3_header_info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.pd3_badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  color: #1e40af;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 9999px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.pd3_badge_dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3b82f6;
  animation: pd3Pulse 2s infinite;
}

@keyframes pd3Pulse {
  0% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(59, 130, 246, 0);
  }

  100% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
}

.pd3_content {
  padding: 20px;
  background: #ffffff;
}

.pd3_details_card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}

.pd3_detail_row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  transition: background-color 0.2s ease;
}

.pd3_detail_row:not(:last-child) {
  border-bottom: 1px solid #e2e8f0;
}

.pd3_detail_row:hover {
  background-color: #f1f5f9;
}

.pd3_detail_meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  flex-shrink: 0;
}

.pd3_icon {
  color: var(--brand-color, #193497);
  opacity: 0.85;
}

.pd3_label {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
}

.pd3_value {
  font-size: 12.5px;
  font-weight: 600;
  color: #0f172a;
  text-align: right;
  max-width: 60%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== CHANGE PASSWORD v2 (cpv2) ===== */
#popups .cpv2_popup h2[data-id="popup_title"] {
  display: none !important;
}

#popups .cpv2_popup {
  padding: 0 !important;
}

#popups .cpv2_popup .dialog_content {
  overflow: hidden !important;
  padding: 0 !important;
  min-height: unset !important;
  height: auto !important;
  max-height: none !important;
}

#popups .cpv2_popup .buttons {
  position: relative !important;
  border-top: 1px solid #f1f5f9 !important;
  margin: 0 !important;
  padding: 0.5rem 1rem !important;
}

.cpv2_popup {
  width: 420px !important;
  min-width: 420px !important;
  max-width: 420px !important;
  height: auto !important;
  min-height: unset !important;
  max-height: 90vh !important;
}

.cpv2_root {
  font-family: 'Inter', 'Poppins', sans-serif;
}

.cpv2_hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px 16px;
  border-bottom: 1px solid #f1f5f9;
}

.cpv2_hero_icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-color, #193497);
}

.cpv2_hero_title {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 2px;
}

.cpv2_hero_sub {
  font-size: 11px;
  color: #6b7280;
  line-height: 1.4;
}

.cpv2_body {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 16px 20px 18px;
}

.cpv2_field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cpv2_label {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}

.cpv2_input_wrap {
  display: flex;
  align-items: center;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  overflow: hidden;
}

.cpv2_input_wrap.cpv2_focused {
  border-color: var(--brand-color, #193497) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(25, 52, 151, 0.1) !important;
}

.cpv2_icon {
  padding: 0 10px 0 12px;
  color: #9ca3af;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.cpv2_icon svg {
  display: block;
}

.cpv2_input {
  flex: 1;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font-size: 13px;
  color: #111827;
  padding: 10px 8px 10px 0;
  height: 40px;
  box-shadow: none !important;
}

.cpv2_input::placeholder {
  color: #d1d5db;
  font-size: 12px;
}

.cpv2_eye {
  background: none;
  border: none;
  padding: 0 12px;
  cursor: pointer;
  color: #9ca3af;
  display: flex;
  align-items: center;
  height: 40px;
  flex-shrink: 0;
  transition: color 0.15s;
}

.cpv2_eye:hover {
  color: var(--brand-color, #193497);
}

.cpv2_eye svg {
  display: block;
  pointer-events: none;
}

.cpv2_strength_wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}

.cpv2_strength_bars {
  display: flex;
  gap: 4px;
  flex: 1;
}

.cpv2_sbar {
  flex: 1;
  height: 4px;
  background: #e5e7eb;
  border-radius: 4px;
  transition: background-color 0.25s ease;
}

.cpv2_sbar_weak {
  background-color: #ef4444 !important;
}

.cpv2_sbar_fair {
  background-color: #f97316 !important;
}

.cpv2_sbar_good {
  background-color: #eab308 !important;
}

.cpv2_sbar_strong {
  background-color: #22c55e !important;
}

.cpv2_strength_label {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  color: #9ca3af;
}

.cpv2_req {
  color: #ef4444 !important;
  margin-left: 2px;
}

.cpv2_pills {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 12px;
  margin-top: 10px;
}

.cpv2_pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 12.5px;
  color: #475569;
  font-weight: 500;
  padding: 0;
  transition: color 0.2s;
}

.cpv2_pill svg {
  display: block;
  color: #cbd5e1;
  transition: color 0.2s;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.cpv2_pill_ok {
  background: transparent !important;
  border-color: transparent !important;
  color: #0f172a !important;
}

.cpv2_pill_ok svg {
  color: var(--brand-color, #193497) !important;
}

.cpv2_match_msg {
  font-size: 11.5px;
  font-weight: 500;
  display: none;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}

.cpv2_match_msg svg {
  display: block;
  flex-shrink: 0;
}

.cpv2_match_ok {
  display: flex !important;
  color: #16a34a;
}

.cpv2_match_err {
  display: flex !important;
  color: #ef4444;
}

.cpv2_input_wrap.cpv2_input_wrap_error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
  background: #fffcfc !important;
}

.cpv2_error_msg {
  font-size: 11.5px;
  font-weight: 500;
  color: #ef4444;
  margin-top: 4px;
  display: none;
  align-items: center;
  gap: 5px;
}

.cpv2_error_msg svg {
  display: block;
  flex-shrink: 0;
}

/* end of profile and change password styles */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.obj_prop_popup {
  height: 550px !important;
  min-height: 550px !important;
  max-height: 550px !important;
  width: 700px !important;
  min-width: 700px !important;
  max-width: 700px !important;

}

/* ============================================================
   Frame / Unit Configuration — properties() dialog
   ============================================================ */

/* Override popup size for this dialog */
/* .obj_prop {
  width: 680px !important;
  min-width: 680px !important;
  max-width: 680px !important;
  min-height: unset !important;
} */

/* .obj_prop .dialog_content {
  padding: 0 !important;
  overflow-y: auto;
  max-height: 78vh;
} */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Normal.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: bold;
}

@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Italic.ttf ') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: italic;
}

.mdb_form-control {
  background: #F8F8F8 !important;
  border: 1px solid #D8D8D8 !important;
  border-radius: 4px !important;
  height: 40px !important;
  font-size: 12px;
}

.mdb_form-group {
  margin-bottom: 10px;
}

.mdb_mrg10T {
  margin-top: 10px;
}

.mdb_mrg20T {
  margin-top: 20px;
}

.mdb_mrg50T {
  margin-top: 50px;
}

.mdb_mrg100T {
  margin-top: 100px;
}

.mdb_mrg10X {
  margin: 0px 10px;
}

.mdb_mrg10R {
  margin-right: 10px !important;
}

ul li {
  list-style-type: none;
}

ul {
  margin: 0px;
  padding: 0px;
}

/* .mdb_brd2{border: 1px solid #5F6368;opacity: 0.mdb_2;} */
.mdb_primaryclr {
  color: var(--brand-color);
}

.mdb_title {
  font-weight: bold;
  font-size: 36px;
  color: #F5F5FA;
}

.mdb_login_title {
  font-size: 22px;
  font-weight: 700;
}

.mdb_subtext {
  font-weight: 400;
  font-size: 24px;
  color: #fff;
}

.mdb_para_text {
  font-weight: 300;
  font-size: 13px;
  width: 60%;
}

.mdb_brd_div {
  width: 500px;
  height: 1px;
  background-color: #5F6368;
  opacity: 0.mdb_2;
}

.mdb_login_left_div {
  background: var(--brand-color);
  height: 1024px;
  color: #fff;
  padding-top: 200px;
  padding-left: 74px;
  width: auto;
}

.mdb_logo {
  background: url(images/Saly-1.png) no-repeat center;
  width: 385px;
  height: 385px;
  display: inline-block;
}

.mdb_div_login {
  width: 45%;
  margin-top: 100px;
}

.mdb_registration_text {
  margin-top: 176px;
  display: flex;
  justify-content: end;
}

.mdb_right_login_div {
  display: flex;
  justify-content: center;
}

.mdb_primarybt {
  background: var(--brand-color);
  color: #fff;
  border: 1px solid #00796B;
  border-radius: 4px;
  height: 45px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 9px 14px;
  text-decoration: none;
  margin-top: 10px;
}

.mdb_primarybt:hover {
  background: #04685e;
  color: #fff;
  border: 1px solid #04685e;
  border-radius: 4px;
  height: 45px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 9px 14px;
  text-decoration: none;
}

.mdb_div_google {
  width: 40px;
  height: 40px;
  background: #FFFFFF;
  border: 1px solid #ECECEC;
  border-radius: 4px;
  padding: 8px;
}

.mdb_google_ic {
  background: url(images/google.png) no-repeat center;
  width: 24px;
  height: 24px;
  display: inline-block;
}

.mdb_div_fb {
  width: 40px;
  height: 40px;
  background: #3580F0;
  border: 1px solid #3580F0;
  border-radius: 4px;
  padding: 8px;
}

.mdb_facebook_ic {
  background: url(images/facebook.png) no-repeat center;
  width: 24px;
  height: 24px;
  display: inline-block;
}

.mdb_div_apple {
  width: 40px;
  height: 40px;
  background: #000000;
  border: 1px solid #000000;
  border-radius: 4px;
  padding: 8px;
}

.mdb_apple_ic {
  background: url(images/apple.png) no-repeat center;
  width: 24px;
  height: 24px;
  display: inline-block;
}

.mdb_login_icons ul li {
  margin-right: 8px;
}

.mdb_login_icons ul {
  display: flex;
}

.mdb_alternative_txt {
  color: #757575;
  margin: 0px 10px;
}

.mdb_light_txt {
  color: #757575 !important;
  font-weight: 400;
}

/* dashboard */
.mdb_topnav {
  height: 32px;
  background: #F9F9F9;
  border-bottom: 1px solid #D7D7D7;
  padding: 5px;
}

.mdb_topnav ul {
  display: flex;
}

.mdb_topnav ul li {
  margin-right: 16px;
  color: #202124;
}

.mdb_topnav ul li a {
  color: #202124 !important;
  text-decoration: none;
  font-size: 12px;
}

.mdb_brdRight {
  border-right: 1px solid #D7D7D7;
}

.mdb_bold {
  font-weight: 700;
}

.mdb_propText {
  font-weight: 600;
  margin-left: 45px;
}

.mdb_leftnav {
  width: 60px;
  border-right: 1px solid #d7d7d7;
  min-height: calc(100vh - 89px);
  padding: 0px;
}

.mdb_leftnav ul {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 10px;
}

.mdb_leftnav ul li {
  margin: 4px 8px;
  padding: 5px;
  display: flex;
}

.mdb_leftnav .mdb_active {
  background: #DEE8E7;
}

.rec_file {
  width: 24px;
  height: 24px;
  background-color: #fff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
}

.rec_file_ic {
  display: inline-block;
  -webkit-mask: url(images/icons/description_ic.svg) no-repeat center;
  mask: url(images/icons/description_ic.svg) no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--brand-color);
  width: 16px;
  height: 20px;
  cursor: pointer;
}

/* dashboard icons */

.mdb_arrow_ic {
  background: url(images/arrow_selector_tool.svg) no-repeat center;
  width: 20px;
  height: 20px;
  display: inline-block;
}

.mdb_rectangle_ic {
  background: url(images/rectangle.svg) no-repeat center;
  width: 20px;
  height: 20px;
  display: inline-block;
}

.mdb_text_ic {
  background: url(images/T.svg) no-repeat center;
  width: 20px;
  height: 20px;
  display: inline-block;
}

.mdb_gallery_ic {
  background: url(images/gallery.svg) no-repeat center;
  width: 20px;
  height: 20px;
  display: inline-block;
}

.mdb_frame_ic {
  background: url(images/Frame.svg) no-repeat center;
  width: 20px;
  height: 20px;
  display: inline-block;
}

.mdb_vector_ic {
  background: url(images/Vector1.svg) no-repeat center;
  width: 20px;
  height: 20px;
  display: inline-block;
}

.mdb_star_ic {
  background: url(images/star.svg) no-repeat center;
  width: 20px;
  height: 20px;
  display: inline-block;
}

.mdb_right_arrow_ic {
  background: url(images/right_arrow.svg) no-repeat center;
  width: 20px;
  height: 20px;
  display: inline-block;
}

.mdb_ellipse_ic {
  background: url(images/Ellipse.svg) no-repeat center;
  width: 20px;
  height: 20px;
  display: inline-block;
}

.mdb_traingle_ic {
  background: url(images/triangle.svg) no-repeat center;
  width: 20px;
  height: 20px;
  display: inline-block;
}

.mdb_hexagon_ic {
  background: url(images/hexagon.svg) no-repeat center;
  width: 20px;
  height: 20px;
  display: inline-block;
}

/* dashboard icons */

.mdb_brdBottom {
  border-bottom: 1px solid #D7D7D7;
  width: 24px;
  margin-top: 10px;
}

.mdb_canvas {
  margin: 0 auto;
  background-color: #fff;
  width: 800px;
  height: calc(100vh - 150px);
  border: 1px solid #D9D9D9;
  margin-top: 40px;
  margin-bottom: 40px;
}

.mdb_dropdown_ic {
  background: url(images/Polygon1.svg) no-repeat center;
  width: 4px;
  height: 4px;
  display: inline-block;
  position: relative;
  top: 20px;
  left: 4px;
}

.mdb_select_shape_div {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 8px 6px;
  position: absolute;
  top: auto;
  left: 50px;
  height: auto;
  background: #F9F9F9;
  box-shadow: 0px 0px 15px rgba(132, 132, 132, 0.mdb_25);
}

.mdb_select_shape_div ul {
  margin: 0px;
}

.mdb_select_shape_div ul li {
  margin: 0px;
  padding: 8px;
}

.mdb_select_shape_div ul li:hover {
  background: #ccc;
  margin: 0px;
}

.mdb_select_shape_div a {
  padding-bottom: 0px;
  height: 20px;
}


/* dashboard css starts */

.mdb_clear {
  clear: both;
}

.mdb_mrg20B {
  margin-bottom: 20px;
}

.mdb_pad5TB {
  padding: 5px 0px;
}

.mdb_main_div {
  grid-area: main;
  display: flex;
  flex-direction: column;
}

.mdb_main_div::-webkit-scrollbar {
  width: 10px;
}

.mdb_main_section {
  padding: 0px 20px;
  flex: 1;
}

.mdb_pagination_container {
  height: 50px;
}

.mdb_title_hd {
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 5px;
}

.mdb_table_div {
  width: 100%;
  top: 200px;
}

.mdb_table_div tr {
  border-bottom: 1px solid #E4E4E4;
}

.mdb_table_div tr:hover {
  background: #F5F5F5;
}

.mdb_table_div th {
  padding: 6px 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: normal;
  text-align: start;
  position: sticky;
  top: 0px;
  z-index: 1;
  background-color: #F9F9F9;
}

.mdb_table_div td {
  padding: 6px 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  vertical-align: middle !important;
  height: 55px;
}

.mdb_menu_ic {
  background: url(images/icons/more_vert.svg) no-repeat center;
  width: 30px;
  height: 30px;
  display: inline-block;
  cursor: pointer;
}

.mdb_teamplate_card {
  background: #fff;
  border: 1px solid #CFD8DC;
  border-radius: 6px;
}

.mdb_card {
  position: relative;
  width: 15%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, .125);
  border-radius: 0.25rem;
  float: left;
  margin: 0px 10px 10px 0;
}

.mdb_teamplate_card img {
  width: 100%;
  height: 170px;
}

.mdb_pad10L {
  padding-left: 10px !important;
}

.mdb_card-title {
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: #202124;
  cursor: default;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
  width: 130px;
  display: inline-block;
}


.mdb_card-content {
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: #5F6368;
  cursor: default;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
  width: 130px;
  display: inline-block;
}

.mdb_left {
  float: left;
}

.mdb_right {
  float: right;
}

.mdb_d-flex {
  display: flex;
}

.mdb_cursor {
  cursor: default;
}

.mdb_card.mdb_teamplate_card:hover {
  border: 1px solid var(--brand-color) !important;
  cursor: pointer;
}

.mdb_card.mdb_teamplate_card:active {
  border: 1px solid #49bbbf !important;
  cursor: pointer;
}

.mdb_card.active {
  border: 1px solid var(--brand-color) !important;
  cursor: pointer;
}

.mdb_dropdown,
.mdb_dropend,
.mdb_dropstart,
.mdb_dropup {
  position: relative;
}

.mdb_dropdown-content1 {
  display: none;
  position: absolute;
  min-width: 80px;
  z-index: 9999;
  right: 0px;
}

ul.mdb_dropdown-content1 {
  background: #F9F9F9;
  border: 1px solid #CFD8DC;
  border-radius: 4px;
  padding: 0px;
  text-align: center;
  margin-top: 0px;
  z-index: 999999;
}

ul.mdb_dropdown-content1 li {
  border-bottom: 1px solid #CFD8DC;
  padding: 5px 15px;
  text-align: left;
  cursor: pointer;
  float: inherit;
}

ul.mdb_dropdown-content1 li:hover {
  background-color: #e7e5e5;
}

ul.mdb_dropdown-content1 li:active {
  background-color: var(--brand-color);
  color: #fff !important;
}

ul.mdb_dropdown-content1 li:active a {
  color: #fff !important;
}

ul.mdb_dropdown-content1 li:last-child {
  border-bottom: none;
}

ul.mdb_dropdown-content1 li a {
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: #202124;
  text-decoration: none;
}

.mdb_slider-container {
  width: 100%;
}

.mdb_right.mdb_dropdown:hover .mdb_dropdown-content1 {
  display: block !important;
}

.mdb_primarybt1 {
  background: var(--brand-color) !important;
  font-family: 'Roboto-Medium', Verdana, Sans-serif !important;
  border: 1px solid var(--brand-color) !important;
  color: #ffffff !important;
  font-weight: 500;
  padding: 8px 20px !important;
  cursor: pointer;
  text-shadow: none !important;
  display: inline-block;
  text-align: center;
  font-size: 12px;
}

.mdb_primarybt1 {
  -moz-border-radius: 5px !important;
  -webkit-border-radius: 5px !important;
  border-radius: 5px !important;
  border: none;
  /*font-size: 16px !important;*/
}

.mdb_primarybt1 {
  text-decoration: none !important;
}

.mdb_primarybt1 a {
  text-decoration: none;
  font-weight: normal;
  text-decoration: none !important;
  border: 1px solid var(--brand-color) !important;
}

.mdb_primarybt1:hover {
  background: var(--brand-color) !important;
  color: #ffffff !important;
  text-decoration: none;
  border: 1px solid var(--brand-color) !important;
}

.mdb_primarybt1:active {
  color: #474646;
  text-decoration: none;
}

.mdb_secondarybt {
  background: #F5F5FA !important;
  font-family: 'Roboto-Medium', Verdana, Sans-serif !important;
  border: 1px solid var(--brand-color) !important;
  color: var(--brand-color) !important;
  font-weight: 500;
  padding: 8px 20px !important;
  cursor: pointer;
  text-shadow: none !important;
  display: inline-block;
  font-size: 12px;
}

.mdb_secondarybt {
  -moz-border-radius: 5px !important;
  -webkit-border-radius: 5px !important;
  border-radius: 5px !important;
  border: none;
  /*font-size: 16px !important;*/
}

.mdb_secondarybt {
  text-decoration: none !important;
}

.mdb_secondarybt a {
  text-decoration: none;
  font-weight: normal;
  text-decoration: none !important;
  border: 1px solid #333 !important;
}

.mdb_secondarybt:hover {
  background: #f6f6f6 !important;
  color: var(--brand-color) !important;
  text-decoration: none;
  border: 1px solid var(--brand-color) !important;
}

.mdb_secondarybt:active {
  color: #333;
  text-decoration: none;
}

.mdb_chevron_left {
  background: url(images/icons/chevron_left.png) no-repeat center #EDEDED;
  border-radius: 50px;
  width: 30px;
  height: 30px;
  display: inline-block;
  cursor: pointer;
}

.mdb_chevron_left:hover {
  background-color: #CCCCCC;
}

.mdb_chevron_right:hover {
  background-color: #CCCCCC;
}

.mdb_chevron_right {
  background: url(images/icons/chevron_right.png) no-repeat center #EDEDED;
  border-radius: 50px;
  width: 30px;
  height: 30px;
  display: inline-block;
  cursor: pointer;
}

.mdbdNone {
  display: none !important;
}

.card_more_vert {
  position: relative;
  float: right;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.mdb-loader {
  border: 5px solid #eee;
  border-top: 5px solid #ccc;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

.mdb-loader-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 500px;
}

.mdbErrorMsg {
  display: flex;
  align-items: center;
  height: 500px;
  justify-content: center;
}



.mdb_sortlinks_div1 {
  border: 2px solid red;
}


.mdb_templates_menu_container {
  /* border: 1px solid black; */
  /* background-color: var(--brand-color); */
  /* margin: 0px 0px 118px 0px; */
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 43px 0 15px 0;
}

.md_left_side,
.md_right_side {
  display: flex;
  height: 32px;
}

.md_left_side button {
  margin: 0 5px;
  background: #fff !important;
  text-align: center;
  font-family: 'Poppins', Verdana, Sans-serif !important;
  border: 1px solid var(--brand-color) !important;
  color: var(--brand-color) !important;
  font-weight: 500;
  padding: 5px 24px 6px 24px !important;
  cursor: pointer;
  text-shadow: none !important;
  display: inline-block;
  -moz-border-radius: 50px !important;
  -webkit-border-radius: 50px !important;
  border-radius: 25px !important;
  border: none;
  text-decoration: none !important;
  height: 100%;
}

.md_left_side .active {
  background: var(--brand-color) !important;
  border: 1px solid var(--brand-color) !important;
  color: #ffffff !important;
}

.md_right_side ul.leftli {
  gap: 0px !important;
  position: relative;
}


ul.leftli .active,
.collapsible-layer:hover {
  background-color: transparent !important;
}

/* .md_right_side .active {
  background: var(--brand-color) !important;
  border: 1px solid var(--brand-color) !important;
  color: #ffffff !important;
} */


.right {
  float: right;
}

.leftli li {
  float: left;
  padding-left: 10px;
}

.sort_ic_container,
.grid_view_ic_container {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0px !important;
}

.grid_view_ic {
  -webkit-mask: url(images/grid_view_ic_hi.svg) no-repeat center center;
  mask: url(images/grid_view_ic_hi.svg) no-repeat center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  width: 17px;
  height: 17px;
  background-color: #5F6368;
}

.active .grid_view_ic {
  -webkit-mask: url(images/grid_view_ic_hi.svg) no-repeat center center;
  mask: url(images/grid_view_ic_hi.svg) no-repeat center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--brand-color);
  width: 17px;
  height: 17px;
}

.sort_ic {
  -webkit-mask: url(images/sort_ic_hi.svg) no-repeat center center;
  mask: url(images/sort_ic_hi.svg) no-repeat center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: #5F6368;
  width: 17px;
  height: 11px;
}

.active .sort_ic {
  -webkit-mask: url(images/sort_ic_hi.svg) no-repeat center center;
  mask: url(images/sort_ic_hi.svg) no-repeat center center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--brand-color);
  width: 17px;
  height: 11px;
}

.search_ic {
  background: url(images/search_ic.png) no-repeat center center;
  width: 30px;
  height: 32px;
  display: inline-block;
  cursor: pointer;
  position: absolute;
}

.search-control {
  background: #FAFAFA;
  border: 1px solid #DDE4ED !important;
  font-weight: 400;
  border-radius: 4px !important;
  height: 32px !important;
  font-size: 12px;
  padding: 5px 5px 5px 40px !important;
  width: 240px !important;
}

.search-control:focus {
  border: 1px solid var(--brand-color) !important;
  outline: 0;
}

.description_ic {
  background: url(images/description_ic.png) no-repeat center center #fff;
  width: 40px;
  height: 40px;
  display: inline-block;
  cursor: pointer;
  border-radius: 6px;
}

.click_popup {
  width: 260px;
  height: 40px;
  margin: auto;
  margin-top: 40%;
}

.click_popup a {
  text-decoration: none;
  color: var(--brand-color);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

.disabled {
  pointer-events: none;
  color: gray;
  cursor: not-allowed;
  opacity: 0.5;
}

.recent-tmp-cards-container {
  height: 500px;
  overflow: auto;
}

.recent-tmp-cards-container::-webkit-scrollbar {
  width: 10px;
}

/* page navigation */
.mdb_nav_buttons {
  height: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  bottom: 0px;
  position: absolute;
  left: 0;
  background: #f9f9f9;
  border-top: 1px solid var(--border-color, #d7d7d7);
}

.mdb_nav_buttons .mdb_nav_button {
  width: 60px;
}

.mdb_nav_buttons .mdb_nav_button.disabled {
  visibility: visible !important;
  background-color: rgba(239, 239, 239, 0.3) !important;
  color: rgba(16, 16, 16, 0.3) !important;
  border-color: rgba(118, 118, 118, 0.3) !important;
}

/* #import-tmp{
  display: none;
} */

/* New Dashboard Dropdown Styles */
.mdb_new_dropdown_wrapper {
  position: relative;
  display: inline-block;
}

.mdb_new_dropdown_list {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.05);
  min-width: 220px;
  z-index: 1000;
  padding: 4px;
  border: 1px solid #eef2f5;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.mdb_new_dropdown_list li {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-bottom: none !important;
}

.mdb_new_dropdown_list li:hover {
  background-color: #f5f7f9;
}

.mdb_new_dropdown_list li:active {
  background-color: #edf0f3;
}

.mdb_dropdown_icon {
  width: 32px;
  height: 32px;
  background: #f0f4f8;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  color: var(--brand-color);
  flex-shrink: 0;
}

.mdb_dropdown_icon svg {
  width: 16px;
  height: 16px;
}

.mdb_new_dropdown_list li:hover .mdb_dropdown_icon {
  background: var(--brand-color);
  color: #ffffff;
}

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

.mdb_dropdown_text .title {
  font-size: 13px;
  font-weight: 600;
  color: #1a1f36;
  margin-bottom: 0px;
}

.mdb_dropdown_text .desc {
  font-size: 10px;
  color: #697386;
  line-height: 1.2;
}

.mdbdNone {
  display: none !important;
}

.mdb-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 20px;
  border-top: 1px solid var(--border-color, #d7d7d7);
  flex-shrink: 0;
  background: var(--section-background-color, #f9f9f9);
}

.mdb-pagination-page-size-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mdb-pagination-label {
  font-size: 13px;
  color: #5f6368;
  font-weight: 500;
}

.mdb-pagination-select {
  padding: 4px 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  outline: none;
  cursor: pointer;
  color: #333;
  background-color: #fff;
}

.mdb-pagination-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mdb-pagination-page-info {
  font-size: 13px;
  color: #5f6368;
  font-weight: 500;
  font-size: 12px;
  color: var(--text-color-muted, #888);
  min-width: 100px;
  text-align: center;
}

.mdb-pagination-buttons {
  display: flex;
  gap: 6px;
}

.mdb-pagination-page-numbers {
  display: flex;
  gap: 4px;
  align-items: center;
  margin: 0 4px;
}

.mdb-pagination-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  min-width: 32px;
  height: 32px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #fff;
  color: #333;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mdb-pagination-btn:hover:not(:disabled) {
  background-color: #f5f7fa;
  border-color: #c0c4cc;
}

.mdb-pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mdb-pagination-btn {
  padding: 5px 16px !important;
  border-radius: 5px !important;
  border: 1px solid var(--border-color, #d7d7d7) !important;
  background: var(--button-background-color, #f9f9fa) !important;
  color: var(--text-color, #202124) !important;
  font-size: 12px !important;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: none !important;
}

.mdb-pagination-btn:hover:not(:disabled) {
  background: var(--brand-color, #0F467C) !important;
  border-color: var(--brand-color, #0F467C) !important;
  color: #fff !important;
}

.mdb-pagination-btn:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed;
  visibility: visible !important;
}

.mdb-shared-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--brand-color);
  user-select: none;
  background: #fafafa;
}

.mdb-shared-badge span {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-color);
  letter-spacing: 0.3px;
  line-height: 1;
}

.mdb-template-info {
  width: 250px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mdb-template-info .mdb_card_title_overflow {
  text-decoration: none;
  white-space: nowrap;
  font-weight: 500;
  color: var(--text-color, #202124);
  overflow: hidden !important;
  text-overflow: ellipsis;
  display: inline-block;
}

.mdb-template-info .mdb-template-meta-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mdb-template-info .mdb-template-meta-info .mdb-template-id-section {
  display: flex;
  flex-direction: row;
  gap: 2px;
  font-size: 12px;
  align-items: center;
}

.mdb-template-info .mdb-template-meta-info .mdb-template-type-section {
  display: flex;
  flex-direction: row;
  gap: 2px;
  font-size: 12px;
}

.mdb-template-info .mdb-template-meta-info .mdb-template-id-section button {
  border: none !important;
  box-shadow: none;
}

.clone-dialog-spinner {
  border: 3px solid rgba(15, 70, 124, 0.1);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border-left-color: #0F467C;
  animation: clone-dialog-spin 1s linear infinite;
}

@keyframes clone-dialog-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
.us_d_flex {
    display: flex;
}

.us_flex_direction_row {
    flex-direction: row;
}

.us_flex_direction_col {
    flex-direction: column;
}

.us_justify_center {
    justify-content: center;
}

.us_justify_between {
    justify-content: space-between;
}

.us_justify_space_around {
    justify-content: space-around;
}

.us_justify_end {
    justify-content: flex-end;
}

.us_justify_start {
    justify-content: start;
}

.us_align_center {
    align-items: center;
}

.us_align_start {
    align-items: flex-start;
}

.us_align_end {
    align-items: flex-end;
}

.us_p_5 {
    padding: 5px;
}

.us_p_10 {
    padding: 10px;
}

.us_p_20 {
    padding: 20px;
}

.us_m_10 {
    margin: 10px;
}

.us_m_20 {
    margin: 20px;
}

.us_px_10 {
    padding-left: 10px;
    padding-right: 10px;
}

.us_py_10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.us_mt_auto {
    margin-top: auto;
}

.us_ml_auto {
    margin-left: auto;
}

.us_w_5 {
    width: 5%;
}

.us_w_10 {
    width: 10%;
}

.us_w_15 {
    width: 15%;
}

.us_w_20 {
    width: 20%;
}

.us_w_30 {
    width: 30%;
}

.us_w_40 {
    width: 40%;
}

.us_w_50 {
    width: 50%;
}

.us_w_60 {
    width: 60%;
}

.us_w_70 {
    width: 70%;
}

.us_w_80 {
    width: 80%;
}

.us_w_85 {
    width: 85%;
}

.us_w_90 {
    width: 90%;
}

.us_w_100 {
    width: 100%;
}

.use_h_5 {
    height: 5%;
}

.us_h_10 {
    height: 10%;
}

.us_h_15 {
    height: 15%;
}

.us_h_20 {
    height: 20%;
}

.us_h_30 {
    height: 30%;
}

.us_h_40 {
    height: 40%;
}

.us_h_50 {
    height: 50%;
}

.us_h_60 {
    height: 60%;
}

.us_h_70 {
    height: 70%;
}

.us_h_80 {
    height: 80%;
}

.us_h_85 {
    height: 85%;
}

.us_h_90 {
    height: 90%;
}

.us_h_100 {
    height: 100%;
}

.us_w_auto {
    width: auto;
}

.us_h_auto {
    height: auto;
}

.us_flex_1 {
    flex: 1;
}

.us_flex_2 {
    flex: 2;
}

.us_flex_3 {
    flex: 3;
}

.us_flex_4 {
    flex: 4;
}


.us_text_center {
    text-align: center;
}

.us_text_right {
    text-align: right;
}

.us_text_left {
    text-align: left;
}

.us_font_bold {
    font-weight: bold;
}

.us_font_light {
    font-weight: 300;
}


.us_d_block {
    display: block;
}

.us_d_inline {
    display: inline;
}

.us_d_inline_block {
    display: inline-block;
}

.us_d_none {
    display: none;
}

.us_gap_1 {
    gap: 1%;
}

.us_gap_2 {
    gap: 2%;
}

.us_gap_3 {
    gap: 3%;
}

.us_gap_4 {
    gap: 4%;
}

.us_gap_5 {
    gap: 5%;
}

.us_gap_6 {
    gap: 6%;
}

.us_gap_7 {
    gap: 7%;
}

.us_gap_8 {
    gap: 8%;
}

.us_gap_9 {
    gap: 9%;
}

.us_gap_10 {
    gap: 10%;
}

.us_relative {
    position: relative;
}

.us_absolute {
    position: absolute;
}

.us_sticky {
    position: sticky;
}

/* tree view caret */
.us-ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.us-ul-tree {
    margin-left: 8px;
}

.us-caret {
    background: url(images/icons/collapse.png) no-repeat center;
    width: 5%;
    height: 32px;
    display: inline-flex;
    align-items: center;
    flex-direction: row;
    margin: 0;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    float: left !important;
    filter: var(--menu-icons-filter);
}

.us-caret::before {
    background: url(images/icons/collapse.png) no-repeat center;
    width: 5%;
    height: 32px;
    display: inline-flex;
    align-items: center;
    flex-direction: row;
    margin: 0;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    float: left !important;
    filter: var(--menu-icons-filter);
}

.us-caret-down {
    background: url(images/icons/expand.png) no-repeat center;
    width: 5%;
    height: 32px;
    display: inline-flex;
    align-items: center;
    flex-direction: row;
    margin: 0;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    float: left !important;
    filter: var(--menu-icons-filter);
}

.us-nested {
    display: none;
}

.us-active {
    display: block;
}

.us-caret-title-container {
    height: 32px;
    width: 95%;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid #ccc;
    padding-left: 5px;
}

.us-caret-title-container .us-caret-title {
    display: inline-flex;
    align-items: center;
    flex-direction: row;
    width: 100%;
    cursor: pointer;
    height: 100%;
    padding: 5px;
    text-decoration: none;
}

.config_icons {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    gap: 5px;
}

.config_icon {
    display: inline-block;
    height: 32px;
    width: 32px;
    background-color: #E9EDEE !important;
    border-radius: 6px;
    cursor: pointer;
}

.delete_config {
    background: url(images/icons/delete_red_ic.svg) no-repeat center;
}

/* custom table css */
.custom-table {
    max-width: 776px !important;
    height: 510px !important;
    max-height: 510px !important;
    width: 776px !important;
    min-width: 776px !important;
    min-height: 510px !important;
}

.custom-table .custom-table-container {
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    gap: 5px;
    height: 388px;
    width: 751px;
    border: 1px solid #E4E4E4;
    border-radius: 12px;
    overflow-y: auto;
}

.custom-table .custom-table-container::-webkit-scrollbar {
    width: 5px;
}

.custom-table .custom-table-container th {
    display: table-cell !important;
    position: sticky;
    top: 0;
    color: #202124;
    padding: 5px 5px !important;
    background: #EEEEEE;
    font-size: 14px !important;
    /* border: 1px solid #E4E4E4; */
    z-index: 100;
    display: table-cell;
    font-weight: 400;
    height: 48px !important;
    vertical-align: middle;
    line-height: 20px;
    letter-spacing: 0.1px;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

.custom-table .custom-table-container th:first-child {
    border-radius: 12px 0px 0px 0px;
}

.custom-table .custom-table-container td {
    border: 1px solid #eee !important;
    font-size: 12px !important;
    color: #202124;
    white-space: nowrap;
    text-overflow: ellipsis !important;
    overflow: visible !important;
    padding: 6px !important;
    background: #FAFAFA;
    height: 48px !important;
    vertical-align: middle;
    line-height: 16px;
}

/* Format functions styles start */
.format-functions-modal {
    width: 75vw !important;
    max-width: 900px !important;
    min-width: 700px !important;
    height: auto !important;
    max-height: 450px !important;
    min-height: 300px !important;
}

.format-functions-modal .popup_content {
    height: auto !important;
    max-height: 400px !important;
    min-height: 250px !important;
    overflow-y: auto !important;
    padding: 15px !important;
}

.format-functions-modal .dialog_content {
    min-height: inherit !important;
}

.format-functions-modal #format-functions-container {
    background: #fff !important;
    padding: 0 !important;
}

.format-functions-modal .format-row select {
    z-index: 1000 !important;
    position: relative !important;
}

#format-functions-container {
    background: #fff !important;
    width: 100% !important;
    height: auto !important;
}

.format-filter-container {
    padding: 5px 0 10px 0 !important;
    border-bottom: none !important;
    margin-bottom: 5px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.format-add-btn {
    background: #f6f6f6 !important;
    color: var(--brand-color);
    border: 1px solid var(--brand-color);
    border-radius: 4px !important;
    padding: 6px 12px !important;
    cursor: pointer !important;
    font-size: 12px !important;
    font-weight: normal !important;
    transition: background-color 0.2s !important;
}

.format-add-btn:hover {
    background: #f3f3f3 !important;
}

.format-filter-checkbox {
    display: flex !important;
    align-items: center !important;
    font-weight: normal !important;
    color: #333 !important;
    cursor: pointer !important;
    font-size: 12px !important;
    margin-top: 0 !important;
}

.format-filter-checkbox input[type="checkbox"] {
    margin-right: 6px !important;
    width: 13px !important;
    height: 13px !important;
    cursor: pointer !important;
}

.format-row {
    display: flex !important;
    align-items: center !important;
    padding: 5px 0 !important;
    margin: 3px 0 !important;
    min-height: 35px !important;
}

.format-row.disabled {
    opacity: 0.5 !important;
    pointer-events: none !important;
}

.format-row .column-container {
    flex: 0 0 140px !important;
    margin-right: 15px !important;
}

.format-row .function-container {
    flex: 0 0 150px !important;
    margin-right: 20px !important;
}

.format-row .param-container {
    flex: 0 0 430px !important;
    margin-right: 10px !important;
}

.format-row .param-fields {
    display: flex !important;
    gap: 20px !important;
}

.format-row .param-field {
    flex: 0 0 130px !important;
}

.format-row .button-container {
    flex: 0 0 40px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.format-row:hover {
    background: #f0f0f0 !important;
}

.format-header {
    display: flex !important;
    align-items: center !important;
    padding: 10px 0 !important;
    border-bottom: 2px solid #ddd !important;
    margin-bottom: 8px !important;
    font-weight: bold !important;
    color: #333 !important;
    font-size: 13px !important;
}

.format-header .header-column {
    flex: 0 0 140px !important;
    margin-right: 15px !important;
}

.format-header .header-function {
    flex: 0 0 150px !important;
    margin-right: 20px !important;
}

.format-header .header-params {
    flex: 0 0 430px !important;
    margin-right: 10px !important;
    display: flex !important;
    gap: 20px !important;
}

.format-header .header-param {
    flex: 0 0 130px !important;
}

.format-header .header-actions {
    flex: 0 0 40px !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.format-row select,
.format-row input {
    width: 100% !important;
    padding: 6px !important;
    border: 1px solid #ccc !important;
    border-radius: 3px !important;
    font-size: 13px !important;
    background: white !important;
    min-height: 28px !important;
}

.format-row select:focus,
.format-row input:focus {
    outline: none !important;
    border-color: #007bff !important;
    box-shadow: 0 0 0 1px rgba(0, 123, 255, 0.25) !important;
}

.format-row .add-row-btn {
    background: #28a745 !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    width: 24px !important;
    height: 24px !important;
    cursor: pointer !important;
    font-size: 16px !important;
    font-weight: bold !important;
    margin: 0 auto !important;
    transition: background-color 0.2s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 !important;
}

.format-row .add-row-btn:hover {
    background: #218838 !important;
}

.format-row .remove-row-btn {
    cursor: pointer !important;
    margin: 0 auto !important;
    width: 16px;
    height: 16px;
    border: none;
}

.param-fields {
    display: flex !important;
    gap: 10px !important;
}

.param-field {
    flex: 1 !important;
}

/* Format functions styles end */

/* Custom Pagination css */
/* page navigation */
.us_nav_buttons {
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    bottom: 0px;
    position: absolute;
    left: 0;
    background: #f9f9f9;
    border-top: 1px solid var(--border-color, #d7d7d7);
}

.us_nav_buttons .us_nav_button {
    width: 60px;
}

.us_nav_buttons .us_nav_button.disabled {
    visibility: visible !important;
    background-color: rgba(239, 239, 239, 0.3) !important;
    color: rgba(16, 16, 16, 0.3) !important;
    border-color: rgba(118, 118, 118, 0.3) !important;
}

.us-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 20px;
    border-top: 1px solid var(--border-color, #d7d7d7);
    border-bottom: 1px solid var(--border-color, #d7d7d7);
    flex-shrink: 0;
    background: var(--section-background-color, #f9f9f9);
}

.us-pagination-page-size-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.us-pagination-label {
    font-size: 13px;
    color: #5f6368;
    font-weight: 500;
}

.us-pagination-select {
    padding: 4px 8px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 13px;
    outline: none;
    cursor: pointer;
    color: #333;
    background-color: #fff;
}

.us-pagination-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}

.us-pagination-page-info {
    font-size: 13px;
    color: #5f6368;
    font-weight: 500;
    font-size: 12px;
    color: var(--text-color-muted, #888);
    min-width: 100px;
    text-align: center;
}

.us-pagination-buttons {
    display: flex;
    gap: 6px;
}

.us-pagination-page-numbers {
    display: flex;
    gap: 4px;
    align-items: center;
    margin: 0 4px;
}

.us-pagination-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    min-width: 32px;
    height: 32px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    transition: all 0.2s ease;
}

.us-pagination-btn:hover:not(:disabled) {
    background-color: #f5f7fa;
    border-color: #c0c4cc;
}

.us-pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.us-pagination-btn {
    padding: 5px 16px !important;
    border-radius: 5px !important;
    border: 1px solid var(--border-color, #d7d7d7) !important;
    background: var(--button-background-color, #f9f9fa) !important;
    color: var(--text-color, #202124) !important;
    font-size: 12px !important;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: none !important;
}

.us-pagination-btn:hover:not(:disabled) {
    background: var(--brand-color, #0F467C) !important;
    border-color: var(--brand-color, #0F467C) !important;
    color: #fff !important;
}

.us-pagination-btn:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed;
    visibility: visible !important;
}

/* Opacity */
.op-0 {
    opacity: 0 !important;
}
.loader-container-overlay{
    position: relative;
}
.loading_overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; 
    height: 100%;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loading_overlay.d-none {
    display: none !important;
}

.loading_overlay .loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 400px;
}

.loading_overlay .loader-spinner {
    border: 6px solid #f3f3f3;
    border-top: 6px solid var(--brand-color);
    border-radius: 50%;
    animation: loading_overlay-spin 1s linear infinite;
}

@keyframes loading_overlay-spin {
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
}

.loading_overlay .loader-gif {
    width: 150px;
    height: 150px;
}

.loading_overlay .loader-bar {
    width: 200px;
    height: 10px;
    background: rgba(255,255,255,0.3);
    border-radius: 5px;
    overflow: hidden;
    margin-top: 10px;
}

.loading_overlay .loader-bar-fill {
    width: 0%;
    height: 100%;
    background: var(--brand-color);
    transition: width 0.3s ease;
}

.loading_overlay .loader-message {
    color: #000;
    font-size: 14px;
    margin-top: 5px;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    max-width:400px;
}

/* Export Progress Toast Styles */
.export-progress-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 320px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 16px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-left: 4px solid var(--brand-color);
    transition: all 0.3s ease;
}

.export-progress-toast.d-none {
    display: none !important;
}

.export-progress-toast .toast-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.export-progress-toast .toast-title {
    font-weight: 600;
    font-size: 14px;
    color: #333;
}

.export-progress-toast .toast-close {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: #999;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
    box-shadow: none;
}

.export-progress-toast .toast-close:hover {
    color: #333;
}

.export-progress-toast .loader-bar {
    width: 100%;
    height: 8px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
    margin: 0;
}

.export-progress-toast .loader-bar-fill {
    width: 0%;
    height: 100%;
    background: var(--brand-color);
    transition: width 0.3s ease;
}

.export-progress-toast .progress-info {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #666;
}

/* Generic App Progress Toast (for imports, etc.) */
.app-progress-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 280px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 16px;
    z-index: 10001;
    display: flex;
    align-items: center;
    gap: 12px;
    border-left: 4px solid var(--brand-color);
    animation: slideInRight 0.3s ease;
}

.app-progress-toast.d-none {
    display: none !important;
}

.app-progress-toast .toast-spinner {
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--brand-color);
    border-radius: 50%;
    animation: loading_overlay-spin 1s linear infinite;
}

.app-progress-toast .toast-message {
    font-weight: 500;
    font-size: 14px;
    color: #333;
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ===================== Skeleton Loading ===================== */

@keyframes skeleton-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.skeleton-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    gap: 16px;
    z-index: 9999;
    background: transparent;
}

/* Base shimmer block */
.skeleton-block {
    border-radius: 6px;
    background: linear-gradient(
        90deg,
        #ececec 25%,
        #f5f5f5 50%,
        #ececec 75%
    );
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

/* Line rows container */
.skeleton-lines {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.skeleton-line {
    border-radius: 6px;
}

/* Avatar row */
.skeleton-avatar-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
}

.skeleton-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    flex-shrink: 0;
}

.skeleton-avatar-lines {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Import design template pages selection */
.imp-template-page-container {
    width: 100%;
    overflow: hidden;
    display: flex;
    height: 180px;
    flex-direction: column;
    gap: 5px;
    border-bottom: 1px solid #ccc;
  }
  .imp-template-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .imp-template-page-header span {
    margin: 0;
    font-size: 12px;
  }
  #imp-template-page-add-btn {
    border: none;
    width: 80px;
    height: 28px;
    font-size: 12px;
    background-color: var(--brand-color) !important;
    color: white !important;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .imp-template-page-list {
    list-style-type: none;
    margin: 0;
    padding: 8px 0;
    max-height: 300px;
    overflow-y: auto;
    border-top: 1px solid #ccc;
  }
  .imp-template-page-list::-webkit-scrollbar {
    width: 5px;
  }
  .imp-template-page-item {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    user-select: none;
  }
  .imp-template-page-item:not(.imp-template-page-active):hover {
    background-color: #f4f5f7;
  }
  .imp-template-page-item.imp-template-page-active {
    background-color: #e9f2ff;
    color: var(--brand-color);
  }
  .imp-template-page-name {
    flex-grow: 1;
    padding: 4px 6px;
    border-radius: 3px;
  }
  .imp-template-page-name[contenteditable="true"] {
    background-color: white;
    outline: 2px solid #4c9aff;
    box-shadow: 0 0 0 1px #4c9aff;
    cursor: text;
  }
  .imp-template-page-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .imp-template-page-item:hover .imp-template-page-actions,
  .imp-template-page-item.imp-template-page-active .imp-template-page-actions {
    opacity: 1;
  }
  .imp-template-page-item input[type="text"] {
height: 24px;
  }
  .imp-template-page-actions button {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .imp-template-page-actions button:hover {
    background-color: #ddd;
  }
  .imp-template-page-actions svg {
    width: 16px;
    height: 16px;
    fill: #5e6c84;
  }

  .imp_doc_pages_mapping{
    
  }
 /* water mark styles */
 #popups .water_mark {
    max-width: 850px !important;
    min-width: 850px !important;
    width: 850px !important;
    height: 510px !important;
    max-height: 510px !important;
    min-height: 510px !important;
 }

 .watermark-container {
    display: flex;
    flex-direction: column;
    height: 390px;
    width: 825px;
    gap: 5px;
 }

 .watermark-body {
     background-color: #f8fafc;
     color: #1e293b;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 20px;
     margin: 0;
 }

 .watermark-app {
     width: 100%;
     max-width: 1000px;
     display: flex;
     flex-direction: column;
     gap: 24px;
 }


 .watermark-main-content {
     display: flex;
     gap: 30px;
     flex-wrap: wrap;
 }

 .watermark-preview-section {
     width: 35%;
     border-radius: 12px;
     display: flex;
     flex-direction: column;
     gap: 10px;
     height: 100%;
 }

 .watermark-preview-title {
     font-size: 18px;
     font-weight: 600;
     display: flex;
     align-items: center;
     gap: 10px;
     height: 10%;
 }

 .watermark-preview-title i {
     color: var(--brand-color);
 }

 .watermark-canvas {
     background-color: #f1f5f9;
     position: relative;
     overflow: hidden;
     border: 1px solid #e2e8f0;
     height: 70%;
 }

  .watermark-canvas::-webkit-scrollbar{
    width: 5px;
    height: 5px;
  }

 .watermark-preview {
     position: absolute;
     padding: 10px;
     background-color: rgba(255, 255, 255, 0.8);
     font-family: 'Arial', sans-serif;
     font-size: 35px;
     color: #000;
     transform: rotate(0deg);
     width: 400px;
     height: 100px;
     display: flex;
     left: 100px;
     top: 100px;
     transition: all 0.2s ease;
 }

 .watermark-canvas-bg {
     opacity: 0.5;
     transform-origin: top left;
     border: 1px solid #000;
 }

 .watermark-properties-section {
     height: 100%;
     width: 65%;
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .watermark-tabs {
     display: flex;
     background-color: #f1f5f9;
     border-radius: 8px;
     padding: 4px;
     height: 10%;
 }

 .watermark-tab {
     flex: 1;
     text-align: center;
     padding: 12px;
     border-radius: 6px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.2s ease;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
 }

 .watermark-tab-active {
     background-color: #ffffff;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
     color: var(--brand-color);
 }

 .watermark-property-group {
     background-color: #ffffff;
     border-radius: 12px;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
     padding: 5px;
     height: 75%;
 }

 .watermark-property-group .watermark-property-group-container {
     display: flex;
     flex-direction: column;
     gap: 5px;
     height: 100%;
     padding: 10px;
     overflow: auto;
 }
  .watermark-property-group .watermark-property-group-container::-webkit-scrollbar{
    width: 5px;
  }

 .watermark-image-container{
    display: flex;
    flex-direction:row ;
 }

 .watermark-property-group-title {
     font-size: 16px;
     font-weight: 600;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .watermark-property-group-title i {
     color: var(--brand-color);
 }

 .watermark-property-row {
     display: flex;
     align-items: center;
     flex-direction: row;
     gap: 15px;
 }
 .watermark-type-row{
         display: flex;
     flex-direction: column;
     gap: 15px;
 }
 .water-mark-image-btn{
    border: 2px solid #ccc !important;
    height: 25px !important;
    width: 60px !important;
    border-radius: 5px !important;
    font-size: 13px !important;
    text-align: center !important;
    background-color: white !important;
    cursor: pointer !important;
    color: black;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
 }

 .watermark-image-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.watermark-image-info {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: #f1f5f9;
    border-radius: 6px;
    max-width: 220px;
}

.watermark-image-name {
    font-size: 13px;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

.watermark-image-remove {
    border: none;
    background: transparent;
    color: #ef4444;
    font-size: 14px;
    cursor: pointer;
    padding: 0;
}

.watermark-image-remove:hover {
    color: #dc2626;
}


 .watermark-property-label {
     width: 50%;
     font-weight: 500;
     color: #64748b;
     font-size: 14px;
 }

 .watermark-property-control {
     width:50%;
 }

 .watermark-type-control{

 }

 .watermark-select,
 .watermark-input-number {
     width: 100%;
     font-size: 14px;
     transition: all 0.2s ease;
     height: 32;
     padding: 5px;
 }
 .watermark-input-text {
     width: 100%;
     font-size: 14px;
     transition: all 0.2s ease;
     height: 100px;
     resize: none;
     padding: 5px;
 }
 .watermark-select:focus,
 .watermark-input-number:focus,
 .watermark-input-text:focus {
     outline: none;
     border-color: var(--brand-color);
     box-shadow: 0 0 0 3px rgba(58, 134, 255, 0.1);
 }

 .watermark-color-picker {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .watermark-color-preview {
     width: 40px;
     height: 40px;
     border-radius: 8px;
     border: 1px solid #e2e8f0;
     cursor: pointer;
 }

 .watermark-color-input {
     flex: 1;
 }

 .watermark-slider-container {
     display: flex;
     align-items: center;
     gap: 15px;
 }

 .watermark-slider {
     flex: 1;
     -webkit-appearance: none;
     height: 6px;
     background: #e2e8f0;
     border-radius: 3px;
     outline: none;
 }

 .watermark-slider::-webkit-slider-thumb {
     -webkit-appearance: none;
     width: 20px;
     height: 20px;
     background: var(--brand-color);
     border-radius: 50%;
     cursor: pointer;
     transition: all 0.2s ease;
 }

 .watermark-slider::-webkit-slider-thumb:hover {
     transform: scale(1.1);
 }

 .watermark-slider-value {
     width: 50px;
     text-align: center;
     font-weight: 600;
     font-size: 14px;
 }

 .watermark-checkbox-group {
     display: flex;
     gap: 30px;
 }

 .watermark-checkbox-item {
     display: flex;
     align-items: center;
     gap: 8px;
     cursor: pointer;
 }

 .watermark-radio {
     cursor: pointer;
 }

 .watermark-radio-label {
     cursor: pointer;
     font-weight: 500;
 }

 .watermark-dimension-controls {
     display: flex;
     gap: 15px;
 }

 .watermark-dimension {
     flex: 1;
 }

 .watermark-dimension-label {
     display: block;
     font-size: 12px;
     color: #64748b;
     font-weight: 500;
 }

 .watermark-action-buttons {
     display: flex;
     gap: 15px;
     justify-content: flex-end;
     height: 10%;
 }

 .watermark-btn {
     padding: 12px 28px;
     border-radius: 8px;
     font-weight: 600;
     font-size: 14px;
     cursor: pointer;
     transition: all 0.2s ease;
     border: none;
     display: flex;
     align-items: center;
     gap: 8px;
 }


 .watermark-btn-secondary {
     background-color: #f1f5f9;
     color: #1e293b;
 }

 .watermark-btn-secondary:hover {
     background-color: #e2e8f0;
     transform: translateY(-2px);
 }

 .watermark-color-palette {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
 }

 .watermark-color-option {
     width: 30px;
     height: 30px;
     border-radius: 6px;
     cursor: pointer;
     transition: all 0.2s ease;
     border: 2px solid transparent;
 }

 .watermark-color-option:hover {
     transform: scale(1.1);
 }

 .watermark-color-option-selected {
     border-color: var(--brand-color);
     transform: scale(1.1);
 }

 .watermark-type-group {
     height: 20%;
 }
 .water-mark-simple-objects{
    height: 32px;
 }
  .water-mark-simple-objects select{
    height: 100%;
    width: 70%;
  }
    .water-mark-simple-objects button{
        height: 100%;
    width: 30%;
  }

/* Container visuals */
.toolbar-overlay {
    position: sticky;
    bottom: 10px;
    min-width: 320px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.toolbar-container {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid #e0e0e0;
    width: fit-content;
    padding: 5px;
}

/* Button styling */
.toolbar-action-btn {
    background: none !important;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    font-size: 12px;
    color: #333;
    width: auto !important;
    height: 100% !important;
     box-shadow: none !important;
}
.toolbar-action-btn:hover{
    background-color: #eee !important;
}

/* Divider */
.toolbar-divider {
    width: 1px;
    height: 20px;
    background-color: #e0e0e0;
    margin: 0 5px;
}

/* Close button */
.toolbar-close-btn {
    background: none !important;
    border: none;
    cursor: pointer;
    padding: 5px;
    font-size: 16px;
    color: #666;
    width: auto !important;
    height: 100% !important;
    box-shadow: none !important;
}
.toolbar-close-btn:hover{
    background-color: #eee !important;

}
    .row-col-map {
      max-width: 1000px !important;
      width: 1000px !important;
      min-width: 1000px !important;
      height: 600px !important;
      max-height: 600px !important;
      min-height: 600px !important;
    }

    .row-col-map-dialog {
      width: 975px;
      height: 450px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .row-col-map-dh {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 20px;
      border-bottom: 1px solid #e2e5ea;
      gap: 12px;
      flex-wrap: wrap;
      flex-shrink: 0;
      background: #ffffff;
    }

    .row-col-map-dh-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .row-col-map-dh-title {
      font-size: 15px;
      font-weight: 600;
      color: #111827;
    }

    .row-col-map-dh-sub {
      font-size: 12px;
      color: #6b7280;
      margin-top: 1px;
    }

    .row-col-map-dh-right {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .row-col-map-icon-btn {
      width: 28px;
      height: 28px;
      border-radius: 4px;
      border: 1px solid #e2e5ea;
      background: #ffffff;
      color: #6b7280;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.12s;
    }

    .row-col-map-icon-btn:hover {
      background: #f5f6f8;
      color: #111827;
    }

    .row-col-map-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #e2e5ea;
      flex-shrink: 0;
      gap: 8px;
      flex-wrap: wrap;
      background: #ffffff;
      height: 9%;
    }

    .row-col-map-toolbar-left,
    .row-col-map-toolbar-right {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .row-col-map-btn {
      display: flex;
      align-items: center;
      gap: 5px;
      border-radius: 4px;
      padding: 6px 12px;
      font-family: inherit;
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.12s;
      border: 1px solid transparent;
      white-space: nowrap;
    }

    .row-col-map-btn-primary {
      background: var(--brand-color);
      color: #fff;
      border-color: var(--brand-color);
    }

    .row-col-map-btn-primary:hover {
      background: #ddd;
      color: #000;
    }

    .row-col-map-btn-ghost {
      background: #ffffff;
      color: #6b7280;
      border-color: #e2e5ea;
    }

    .row-col-map-btn-ghost:hover {
      background: #f5f6f8;
      color: #111827;
    }

    .row-col-map-body {
      height: 91%;
      overflow-y: auto;
    }

    .row-col-map-body::-webkit-scrollbar {
      width: 5px;
    }

    .row-col-map-object-block {
      border-bottom: 1px solid #e2e5ea;
    }

    .row-col-map-object-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 20px;
      background: #ffffff;
      cursor: default;
      transition: background 0.15s;
      position: sticky;
      top: 0;
      z-index: 1000;
      height: 48px;
      border-bottom: 1px solid #ddd;
    }

    .row-col-map-object-row:hover {
      background: #fafbff;
    }

    .row-col-map-object-selected {
      background: #eef2ff;
      outline: 1px solid var(--brand-color);
      outline-offset: -2px;
    }

    .row-col-map-object-row.drag-over {
      background: #eef2ff;
      outline: 2px solid var(--brand-color);
      outline-offset: -2px;
    }

    .row-col-map-object-row.dragging {
      opacity: 0.4;
    }

    .row-col-map-section-indent {
      margin-left: 32px;
      border-left: 2px solid #e2e5ea;
      transition: border-color 0.15s;
    }

    .row-col-map-section-indent.drag-over {
      border-left-color: var(--brand-color);
    }

    .row-col-map-section-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 16px;
      background: #fafbfc;
      border-top: 1px solid #e2e5ea;
      cursor: default;
      transition: background 0.15s;
      position: relative;
    }

    .row-col-map-section-row:hover {
      background: #f3f4f6;
    }

    .row-col-map-section-row.drag-over {
      background: #eef2ff;
      outline: 2px solid var(--brand-color);
      outline-offset: -2px;
    }

    .row-col-map-section-row.dragging {
      opacity: 0.4;
    }

    .row-col-map-section-block {
      position: sticky;
    top: 96;
    z-index: 1000;
    }

    .row-col-map-columns-grid-wrap {
      padding: 10px 16px 14px;
      background: #ffffff;
      border-top: 1px solid #e2e5ea;
      transition: background 0.15s;
    }

    .row-col-map-columns-grid-wrap.drag-over {
      background: #f0f7ff;
    }

    .row-col-map-col-grid-meta {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .row-col-map-col-grid-label {
      font-size: 11px;
      font-weight: 500;
      color: #9ca3af;
    }

    .row-col-map-col-grid-count {
      font-size: 10px;
      color: #9ca3af;
      background: #f5f6f8;
      border: 1px solid #e2e5ea;
      padding: 1px 6px;
      border-radius: 10px;
    }

    .row-col-map-columns-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: flex-start;
      min-height: 40px;
    }

    .row-col-map-col-card {
      display: flex;
      flex-direction: column;
      gap: 6px;
      background: #ffffff;
      border: 1px solid #e2e5ea;
      border-radius: 6px;
      padding: 8px 10px 10px;
      min-width: 220px;
      max-width: 220px;
      flex: 1 1 140px;
      transition: border-color 0.12s, box-shadow 0.12s, opacity 0.15s;
    }

    .row-col-map-col-card input[type="text"] {
      height: 32px;
    }

    .row-col-map-col-card:active {
      cursor: grabbing;
    }

    .row-col-map-col-card:hover {
      border-color: #93c5fd;
      box-shadow: 0 0 0 2px #eff6ff;
    }

    .row-col-map-col-card.dragging {
      opacity: 0.4;
      transform: scale(0.95);
    }

    .row-col-map-col-card.drag-over {
      border-color: var(--brand-color);
      background: #eef2ff;
      box-shadow: 0 0 0 2px #eff6ff;
    }

    .row-col-map-col-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 4px;
      padding-bottom: 6px;
      border-bottom: 1px solid #e2e5ea;
    }

    .row-col-map-col-card-name {
      font-size: 12px;
      font-weight: 500;
      color: #111827;
      cursor: pointer;
      flex: 1;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border-bottom: 1px dashed transparent;
      transition: border-color 0.12s;
      line-height: 1.4;
    }


    .row-col-map-col-card-name input {
      background: transparent;
      border: none;
      outline: none;
      font-family: inherit;
      font-size: 12px;
      font-weight: 500;
      color: #111827;
      border-bottom: 1px solid var(--brand-color);
      width: 100%;
    }

    .row-col-map-col-card-del {
      width: 18px;
      height: 18px;
      border-radius: 3px;
      border: none;
      background: transparent;
      color: #9ca3af;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      padding: 0;
      transition: all 0.12s;
    }

    .row-col-map-col-card-del:hover {
      background: #fef2f2;
      color: #dc2626;
    }

    .row-col-map-col-field-label {
      font-size: 10px;
      font-weight: 500;
      color: #9ca3af;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .row-col-map-col-card-add {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      min-width: 100px;
      max-width: 120px;
      flex: 0 0 100px;
      background: #ffffff;
      border: 1px dashed #e2e5ea;
      border-radius: 6px;
      padding: 14px 10px;
      cursor: pointer;
      color: #9ca3af;
      font-size: 11px;
      font-weight: 500;
      transition: all 0.12s;
    }

    .row-col-map-col-card-add:hover {
      border-color: var(--brand-color);
      color: var(--brand-color);
      background: #eff6ff;
    }

    .row-col-map-badge {
      font-size: 10px;
      font-weight: 600;
      padding: 2px 7px;
      border-radius: 20px;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .row-col-map-badge-obj {
      background: #eff6ff;
      color: #2563eb;
    }

    .row-col-map-badge-sec {
      background: #f5f3ff;
      color: #7c3aed;
    }

    .row-col-map-toggle-btn {
      width: 20px;
      height: 20px;
      border-radius: 4px;
      border: 1px solid #e2e5ea;
      color: #6b7280;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.12s;
      background: url(images/right_arrow.svg) no-repeat center;
    }

    .row-col-map-toggle-btn.open {
      width: 20px;
      height: 20px;
      border-radius: 4px;
      border: 1px solid #e2e5ea;
      color: #6b7280;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.12s;
      background: url(images/down_arrow.svg) no-repeat center;
    }

    .row-col-map-toggle-btn:hover {
      border-color: var(--brand-color);
      color: var(--brand-color);
    }

    .row-col-map-toggle-btn svg {
      transition: transform 0.15s;
    }

    .row-col-map-toggle-btn.open svg {
      transform: rotate(90deg);
    }

    .row-col-map-name-chip {
      font-size: 13px;
      color: #111827;
      cursor: pointer;
      flex: 1;
      border-bottom: 1px dashed transparent;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: border-color 0.12s;
    }

    .row-col-map-name-chip:hover {
      border-color: #9ca3af;
    }

    .row-col-map-name-chip input {
      background: transparent;
      border: none;
      outline: none;
      font-family: inherit;
      font-size: 13px;
      color: #111827;
      border-bottom: 1px solid var(--brand-color);
      min-width: 80px;
      width: 100%;
    }

    .row-col-map-select {
      flex-shrink: 0;
      width: 130px;
    }

    .row-col-map-sel {
      width: 30%;
      padding: 5px 24px 5px 8px;
      background: #ffffff;
      border: 1px solid #e2e5ea;
      border-radius: 4px;
      font-family: inherit;
      font-size: 12px;
      color: #111827;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 7px center;
      cursor: pointer;
      transition: border-color 0.12s;
    }

    .row-col-map-sel:focus {
      outline: none;
      border-color: var(--brand-color);
      box-shadow: 0 0 0 2px #eff6ff;
    }

    .row-col-map-sel.row-col-map-mapped {
      border-color: #bbf7d0;
      color: #16a34a;
      background-color: #f0fdf4;
    }

    .row-col-map-sel.row-col-map-unmapped {
      color: #6b7280;
    }

    .row-col-map-row-actions {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
      margin-left: auto;
    }

    .row-col-map-na-btn {
      width: 26px;
      height: 26px;
      border-radius: 4px;
      border: 1px solid #e2e5ea;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #6b7280;
      transition: all 0.12s;
    }

    .row-col-map-na-btn-add:hover,
    .row-col-map-na-btn-del:hover,
    .row-col-map-na-btn-copy:hover,
    .row-col-map-na-btn-paste:hover,
    .row-col-map-na-btn-paste-container:hover {
      border-color: var(--brand-color);
      color: var(--brand-color);
    }

    .row-col-map-na-btn-add {
      height: 28px;
      width: 28px;
      background: url(images/icons/plus_ic.svg) no-repeat center center;
      cursor: pointer;
      border-radius: 5px;
      display: inline-block;
    }

    .row-col-map-na-btn-del {
      height: 28px;
      width: 28px;
      background: url(images/icons/delete_ic.svg) no-repeat center center;
      cursor: pointer;
      border-radius: 5px;
      display: inline-block;
    }

    .row-col-map-na-btn-copy {
      height: 28px;
      width: 28px;
      background: url(images/content_copy.svg) no-repeat center center;
      cursor: pointer;
      border-radius: 5px;
      display: inline-block;
    }

    .row-col-map-na-btn-paste-container {
      width: 110px;
      justify-content: space-between;
    }

    .row-col-map-na-btn-paste {
      height: 100%;
      width: 26px;
      background: url(images/clipboard/paste.svg) no-repeat center center;
      cursor: pointer;
      display: inline-block;
    }

    .row-col-map-drag-handle {
      cursor: grab;
      display: flex;
      align-items: center;
      color: #9ca3af;
      padding: 2px;
      border-radius: 3px;
      transition: all 0.12s;
      flex-shrink: 0;
    }

    .row-col-map-drag-handle:active {
      cursor: grabbing;
    }

    .row-col-map-drag-handle:hover {
      color: #111827;
      background: #e2e5ea;
    }

    .row-col-map-footer {
      padding: 12px 20px;
      border-top: 1px solid #e2e5ea;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
      background: #f5f6f8;
      gap: 8px;
      flex-wrap: wrap;
    }

    .row-col-map-footer-left {
      font-size: 11px;
      color: #6b7280;
    }

    .row-col-map-footer-right {
      display: flex;
      gap: 8px;
    }

    .row-col-map-btn-cancel {
      padding: 7px 16px;
      border: 1px solid #e2e5ea;
      border-radius: 4px;
      background: #ffffff;
      font-family: inherit;
      font-size: 13px;
      font-weight: 500;
      color: #6b7280;
      cursor: pointer;
      transition: all 0.12s;
    }

    .row-col-map-btn-cancel:hover {
      background: #f5f6f8;
      color: #111827;
    }

    .row-col-map-btn-ok {
      padding: 7px 20px;
      border: none;
      border-radius: 4px;
      background: var(--brand-color);
      color: #fff;
      font-family: inherit;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.12s;
    }

    .row-col-map-btn-ok:hover {
      background: #2563eb;
    }

    .row-col-map-toast {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%) translateY(12px);
      background: #111827;
      color: #fff;
      padding: 7px 16px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 500;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.18s, transform 0.18s;
      z-index: 9999;
    }

    .row-col-map-toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    .row-col-map-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 56px 24px;
      gap: 10px;
      color: #9ca3af;
    }

    .row-col-map-empty p {
      font-size: 13px;
    }

    .row-col-map-drop-target-highlight {
      background-color: #e0e7ff !important;
      outline: 2px solid var(--brand-color);
    }

    .rcm-dragging {
      opacity: 0.4;
    }

    .rcm-drag-over-top {
      border-top: 1px solid var(--brand-color);
    }

    .rcm-drag-over-bottom {
      border-bottom: 1px solid var(--brand-color);
    }

    .row-col-map-tabs-container {
      padding: 8px 16px;
      border-bottom: 1px solid #ddd;
      top: 48px;
      position: sticky;
      z-index: 1000;
      background-color: #ffffff;
    }

    .row-col-map-tabs {
      display: flex;
      gap: 0;
      padding: 0 10px;
    }

    .row-col-map-tab {
      font-size: 12px;
      padding: 6px 14px;
      border: none;
      background: none;
      cursor: pointer;
      color: #000;
      border-bottom: 2px solid transparent;
      margin-bottom: -1px;
    }

    .row-col-map-tab:hover {
      color: var(--brand-color);
    }

    .row-col-map-tab.active {
      color: var(--brand-color);
      border-bottom-color: var(--brand-color);
      font-weight: 500;
    }

    .row-col-map-tab-count {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 16px;
      height: 16px;
      padding: 0 4px;
      border-radius: 8px;
      background: #f5f6f8;
      font-size: 10px;
      margin-left: 4px;
      color: #9ca3af;
    }

    .row-col-map-tab.active .row-col-map-tab-count {
      background: #f5f6f8;
      color: var(--brand-color);
    }

    .row-col-map-tab-empty {
      padding: 16px 12px;
      font-size: 12px;
      color: var(--rcm-text-muted);
      text-align: center;
    }
.share-template {
    --primary: var(--brand-color);
    --primary-dark: var(--brand-hover-color);
    --surface: #FFFFFF;
    --surface-alt: #F9FAFB;
    --border: #D0D5DD;
    --divider: #E5E7EB;
    --text-primary: #111827;
    --text-secondary: #6B7280;
    --chip-bg: rgba(var(--brand-color-rgb, 37, 99, 235), 0.08);
    --chip-text: var(--brand-color);
    --danger: #DC2626;

    position: fixed;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 99000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: ew-fade-in 0.2s ease forwards;
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
}

.share-template-container {
    width: 512px;
    max-height: 472px;
}

.share-template-card {
    background: var(--surface);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    animation: share-template-slideUp 0.5s ease-out;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

@keyframes share-template-slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.share-template-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 56px;
    margin: 16px 8px 0 24px;
    position: relative;
}

.share-template-title {
    font-size: 22px;
    font-weight: 400;
    color: var(--text-primary);
    margin: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 12px;
}

.share-template-close-modal-btn {
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: absolute;
    right: 0;
    top: 0;
    min-width: 0;
    padding: 5px;
    line-height: 0.5;
    font-size: 16px;
    margin-top: 10px;
    margin-right: 10px;
    border: none;
    z-index: 1;
    background: url(images/icons/close.svg) no-repeat center;
    height: 24px;
    width: 24px;
    border-radius: 0;
    box-shadow: none;
}

.share-template-close-modal-btn:hover {
    color: var(--text-primary);
    background-color: #E5E7EB;
}

.share-template-input-wrapper {
    position: relative;
    padding: 0px 24px;
}

.share-template-input-field {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    transition: all 0.2s ease;
    align-items: center;
    min-height: 56px;
    max-height: 160px;
    overflow-y: auto;
}

.share-template-input-field:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.share-template-input-field::-webkit-scrollbar {
    width: 6px;
}

.share-template-input-field::-webkit-scrollbar-track {
    background: transparent;
}

.share-template-input-field::-webkit-scrollbar-thumb {
    background: #D0D5DD;
    border-radius: 3px;
}

.share-template-input-box {
    flex: 1;
    min-width: 180px;
    border: none !important;
    background: transparent !important;
    outline: none;
    font-size: 14px !important;
    color: var(--text-primary);
    font-family: inherit !important;
    padding: 0 !important;
}

.share-template-input-box::placeholder {
    color: #9CA3AF;
}

.share-template-helper-text {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 8px;
    margin-left: 0;
}

.share-template-added-users {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.share-template-user-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--chip-bg);
    color: var(--chip-text);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    animation: share-template-chipEnter 0.3s ease-out;
}

@keyframes share-template-chipEnter {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.share-template-user-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #DBEAFE;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--chip-text);
}

.share-template-remove-btn {
    background: none;
    border: none;
    color: #6B7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s ease;
    padding: 0;
    margin-left: 2px;
}

.share-template-remove-btn:hover {
background-color: transparent;
}

.share-template-add-btn {
    padding: 8px 14px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: none;
    flex-shrink: 0;
}

.share-template-add-btn:hover {
    background: var(--primary-dark);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.share-template-add-btn:active {
    transform: translateY(0);
}

.share-template-add-btn.show {
    display: block;
}

.share-template-suggestions {
    position: absolute;
    top: 100%;
    left: 24px;
    right: 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    max-height: 380px;
    overflow-y: auto;
    z-index: 10;
    display: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-top: 4px;
}

.share-template-suggestions.active {
    display: block;
    animation: share-template-slideDown 0.2s ease-out;
}

@keyframes share-template-slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.share-template-suggestion-item {
    padding: 0px 16px;
    border-bottom: 1px solid var(--divider);
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
    height: 60px;
}

.share-template-suggestion-item:last-child {
    border-bottom: none;
}

.share-template-suggestion-item:hover {
    background: var(--surface-alt);
    padding-left: 20px;
}

.share-template-suggestion-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
    margin: 0 12px 0 8px;
}

.share-template-suggestion-content {
    flex: 1;
    min-width: 0;
}

.share-template-suggestion-email {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.share-template-no-results {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
}

.share-template-suggestions::-webkit-scrollbar {
    width: 6px;
}

.share-template-suggestions::-webkit-scrollbar-track {
    background: transparent;
}

.share-template-suggestions::-webkit-scrollbar-thumb {
    background: #D0D5DD;
    border-radius: 3px;
}

.share-template-suggestions::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

.shared-template-users {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.shared-template-users-footer {
    padding: 12px 24px;
    font-size: 12px;
    color: var(--text-secondary);
    border-top: 1px solid var(--divider);
}

.shared-template-users-text {
    font-size: 12px;
    padding: 12px 24px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    height: fit-content;
}

.shared-template-users-list {
    flex: 1;
    overflow-y: auto;
}

.shared-template-users-list::-webkit-scrollbar {
    width: 6px;
}

.shared-template-users-list::-webkit-scrollbar-track {
    background: transparent;
}

.shared-template-users-list::-webkit-scrollbar-thumb {
    background: #D0D5DD;
    border-radius: 3px;
}

.shared-template-users-list::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

.share-template-access-user-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 24px 8px 16px;
    justify-content: space-between;
    transition: all 0.2s ease;
}

.share-template-access-user-item:last-child {
    border-bottom: none;
}

.share-template-access-user-item:hover {
    background: #f1f1f1;
}

.share-template-suggestion-item-label {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.share-template-role-label {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    flex-shrink: 0;
}

.share-template-dropdown-wrapper {
    position: relative;
    flex-shrink: 0;
}

.share-template-dropdown-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 13px;
    color: var(--text-primary);
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
    font-weight: 500;
}

.share-template-dropdown-btn:hover {
    background: var(--surface-alt);
    border-color: var(--primary);
    color: var(--primary);
}

.share-template-dropdown-btn:active {
    background: var(--chip-bg);
}

.share-template-dropdown-icon {
    font-size: 10px;
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
}

.share-template-dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    z-index: 100;
    min-width: 180px;
    overflow: hidden;
    animation: share-template-dropdownSlideDown 0.2s ease-out;
}

@keyframes share-template-dropdownSlideDown {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.share-template-dropdown-action-remove {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.share-template-dropdown-action-remove:hover {
    background: #FEE2E2;
    color: var(--danger);
    font-weight: 500;
}

.share-template-dropdown-icon-remove {
    font-size: 12px;
    font-weight: bold;
    opacity: 0.6;
}

.share-template-dropdown-action-remove:hover .share-template-dropdown-icon-remove {
    opacity: 1;
}

.share-template-actions {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 16px 24px;
    border-top: 1px solid var(--divider);
}

.share-template-btn {
    padding: 7px 18px !important;
    border-radius: 5px !important;
    font-size: 13px !important;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border-color, #d7d7d7) !important;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

.share-template-btn-primary {
	    background: var(--brand-color, #0F467C) !important;
    color: #fff !important;
    border-color: var(--brand-color, #0F467C) !important;
    box-shadow: 0 2px 8px rgba(15, 70, 124, 0.25) !important;
}

.share-template-btn-primary:hover {
    background: var(--primary-dark);
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.25);
}

.share-template-btn-primary:active {
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
}

.share-template-btn-secondary {
	background: var(--button-background-color, #f9f9fa) !important;
    color: var(--text-color, #202124) !important;
}

.share-template-btn-secondary:hover {
    background: var(--surface-alt);
    border-color: var(--text-secondary) !important;
}

.share-template-btn-secondary:active {
    background: var(--divider);
}

.share-template-btn-ghost {
    background: transparent;
    color: var(--text-secondary);
}

.share-template-btn-ghost:hover {
    background: var(--surface-alt);
    color: var(--text-primary);
}

.d-none {
    display: none !important;
}

/* Utility & Legacy Styles */
.template-acquired-message {
    text-align: center;
    padding: 24px 16px;
}

.template-acquired-icon {
    font-size: 42px;
    margin-bottom: 12px;
}

.template-acquired-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.template-acquired-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 14px;
}

.template-acquired-timer {
    font-size: 14px;
    font-weight: 500;
}

#redirect_timer {
    font-size: 18px;
    font-weight: 700;
}

.lt-status-indicator {
    position: fixed;
    bottom: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: white;
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    font-size: 13px;
    color: var(--text-primary);
    z-index: 999;
    pointer-events: auto;
    user-select: none;
    animation: lt-slideIn 0.3s ease-out;
}

.lt-avatar {
    width: 28px;
    height: 28px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.lt-status-text {
    display: flex;
    align-items: baseline;
    gap: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

.lt-label {
    font-size: 12px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.lt-username {
    font-weight: 600;
    color: var(--primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 175px;
}

.lt-close-btn {
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.lt-close-btn:hover {
    color: var(--text-primary);
}

.lt-close-btn:active {
    color: #111827;
}

@keyframes lt-slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}
:root {
	--menu-dropdown-background-color: #ffffff;
	--menu-dropdown-border-color: rgba(0, 0, 0, 0.1);
	--menu-dropdown-text-color: #2d2b2b;
	--menu-dropdown-text-muted-color: #808080;
	/* --menu-dropdown-hover-background-color: #adecab; */
	--menu-dropdown-hover-text-color: #2d2d2d;
	--menu-dropdown-divider-color: #e5e5e5;
}
@font-face{font-family:'Poppins', sans-serif;;
	src:url("fonts/Poppins_font/Poppins-Regular.ttf"),
	format("truetype");
	font-weight:normal;
	font-style:normal
}

.sr_only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.main_menu {
	height: 100%;
}
.main_menu > ul.menu_bar {
	display: flex;
	flex-direction: row;
	list-style: none;
	padding: 0;
	margin: 0;
	height: 100%;
	padding-left: 10px;
	background: var(--menu-background-color);
}
.main_menu > ul.menu_bar > li {
	padding: 0;
	overflow: hidden;
	height: 100%;
}
.main_menu > ul.menu_bar > li > a {
	display: flex;
	align-items: center;
	font-size: 12px;
	color: var(--menu-text-color);
	text-decoration: none;
	padding: 0 10px;
	height: 100%;
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	line-height: 100%;
}
.main_menu > ul.menu_bar > li > a::-moz-focus-inner {
	border: 0;
}
.main_menu > ul.menu_bar > li > a:focus {
	outline: none;
	box-shadow: 0 -3px var(--menu-dropdown-background-color) inset;
}
.main_menu > ul.menu_bar > li > a:hover {
	background: var(--menu-dropdown-hover-background-color);
	box-shadow: none;
	color: var(--menu-dropdown-hover-text-color);
}
.main_menu > ul.menu_bar > li > a[aria-expanded="true"] {
	background: var(--menu-dropdown-background-color);
	box-shadow: none;
	color: var(--menu-dropdown-text-color);
}
.main_menu > ul.menu_bar > li > a > * {
	pointer-events: none;
}

.main_menu > ul.menu_dropdown {
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0;
	left: 0;
	list-style: none;
	padding: 0;
	margin: 0;
	overflow-x: hidden;
	overflow-y: auto;
	min-width: 150px;
	box-shadow: var(--menu-dropdown-border-color) 0px 4px 8px 0px;
	background: var(--menu-dropdown-background-color);
}
.main_menu > ul.menu_dropdown > li {
	padding: 0;
}
.main_menu > ul.menu_dropdown > li > hr {
	background: none;
	border: 1px solid var(--menu-dropdown-divider-color);
	border-bottom: none;
	margin: 0;
}
.main_menu > ul.menu_dropdown > li > a {
	display: flex;
	flex-direction: row;
	align-items: center;
	position: relative;
	height: 30px;
	padding: 0 10px;
	font-size: 12px;
	line-height: 30px;
	text-decoration: none;
	color: var(--menu-dropdown-text-color);
}
.menu_dropdown > li > a {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	position: relative;
	height: 30px;
	padding: 0 10px;
	font-size: 12px;
	line-height: 30px;
	text-decoration: none;
	color: var(--menu-dropdown-text-color) !important;
	background-color: var(--menu-dropdown-background-color);
}
.menu_dropdown>li{
	list-style-type:none;
}

.main_menu > ul.menu_dropdown > li > ::-moz-focus-inner {
	border: 0;
}
.main_menu > ul.menu_dropdown > li > a:focus {
	outline: none;
	box-shadow: 0 0 0 2px var(--menu-dropdown-hover-background-color) inset;
}
.main_menu > ul.menu_dropdown > li > a:hover {
	background: var(--menu-dropdown-hover-background-color);
	box-shadow: none;
	color: var(--menu-dropdown-hover-text-color);
}
.menu_dropdown > li > a:hover {
	background: var(--menu-dropdown-hover-background-color);
	box-shadow: none;
	color: var(--menu-dropdown-hover-text-color);
}
.main_menu > ul.menu_dropdown > li > a[aria-expanded="true"] {
	background: var(--menu-dropdown-hover-background-color);
	box-shadow: none;
	color: var(--menu-dropdown-hover-text-color);
}
.main_menu > ul.menu_dropdown > li > a[aria-haspopup="true"]::after {
	position: relative;
	content: ">";
	right: 9px;
	width: 5px;
	transform: scaleY(2);
	color: #808080;
}
.main_menu > ul.menu_dropdown > li > a[aria-haspopup="true"] > .name {
	margin-right: 8px;
}
.main_menu > ul.menu_dropdown > li > a[target="_blank"]::after {
	content: "";
	width: 10px;
	height: 10px;
	margin-left: 5px;
	background: url('images/icons/external.png') no-repeat center center;
	background-size: auto 8px;
	opacity: 0.3;
}
.main_menu > ul.menu_dropdown > li > a > * {
	pointer-events: none;
}
.main_menu > ul.menu_dropdown > li > a > .name {
	flex-grow: 1;
	overflow: hidden;
	white-space: nowrap;
}
.main_menu > ul.menu_dropdown > li > a > .shortcut {
	flex-shrink: 1;
	color: var(--menu-dropdown-text-muted-color);
}
.menu_dropdown{
	padding-left: 0%;
	z-index: 100;
	
}

.chart_menu_dropdown{
	padding-left: 0%;
	position: relative;
    border: 1px solid #ccc;
    top: auto !important;
    margin-left: 10% !important;
}
/*ul.chart_menu_dropdown{
	position: absolute;
	top: 0px !important;
}
li.chart_menu_dropdown{
	position: absolute;
	top: 0px !important;
}*/
.main_menu > ul.chart_menu_dropdown {
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0;
	left: 0;
	list-style: none;
	padding: 0;
	margin: 0;
	overflow-x: hidden;
	overflow-y: auto;
	min-width: 150px;
	box-shadow: 0 0 0 1px var(--menu-dropdown-border-color);
	background: var(--menu-dropdown-background-color);
}
.main_menu > ul.chart_menu_dropdown > li {
	padding: 0;
}
.main_menu > ul.chart_menu_dropdown > li > hr {
	background: none;
	border: 1px solid var(--menu-dropdown-divider-color);
	border-bottom: none;
	margin: 0;
}
.main_menu > ul.chart_menu_dropdown > li > a {
	display: flex;
	flex-direction: row;
	align-items: center;
	position: relative;
	height: 30px;
	padding: 0 10px;
	font-size: 12px;
	line-height: 30px;
	text-decoration: none;
	color: var(--menu-dropdown-text-color);
}
.chart_menu_dropdown > li > a {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	position: relative;
	height: 30px;
	padding: 0 10px;
	font-size: 12px;
	line-height: 30px;
	text-decoration: none;
	color: var(--menu-dropdown-text-color);
	background-color: var(--menu-dropdown-background-color);
}
.chart_menu_dropdown>li{
	list-style-type:none;
}

.main_menu > ul.chart_menu_dropdown > li > ::-moz-focus-inner {
	border: 0;
}
.main_menu > ul.chart_menu_dropdown > li > a:focus {
	outline: none;
	box-shadow: 0 0 0 2px var(--menu-dropdown-hover-background-color) inset;
}
.main_menu > ul.chart_menu_dropdown > li > a:hover {
	background: var(--menu-dropdown-hover-background-color);
	box-shadow: none;
	color: var(--menu-dropdown-hover-text-color);
}
.chart_menu_dropdown > li > a:hover {
	background: var(--menu-dropdown-hover-background-color);
	box-shadow: none;
	color: var(--menu-dropdown-hover-text-color);
}
.main_menu > ul.chart_menu_dropdown > li > a[aria-expanded="true"] {
	background: var(--menu-dropdown-hover-background-color);
	box-shadow: none;
	color: var(--menu-dropdown-hover-text-color);
}
.main_menu > ul.chart_menu_dropdown > li > a[aria-haspopup="true"]::after {
	position: relative;
	content: ">";
	right: 9px;
	width: 5px;
	transform: scaleY(2);
	color: #808080;
}
.main_menu > ul.chart_menu_dropdown > li > a[aria-haspopup="true"] > .name {
	margin-right: 8px;
}
.main_menu > ul.chart_menu_dropdown > li > a[target="_blank"]::after {
	content: "";
	width: 10px;
	height: 10px;
	margin-left: 5px;
	background: url('images/icons/external.png') no-repeat center center;
	background-size: auto 8px;
	opacity: 0.3;
}
.main_menu > ul.chart_menu_dropdown > li > a > * {
	pointer-events: none;
}
.main_menu > ul.chart_menu_dropdown > li > a > .name {
	flex-grow: 1;
	overflow: hidden;
	white-space: nowrap;
}
.main_menu > ul.chart_menu_dropdown > li > a > .shortcut {
	flex-shrink: 1;
	color: var(--menu-dropdown-text-muted-color);
}
.chart_menu_dropdown{
	padding-left: 0%;
	
}
.mobile_menu {
	display: none;
	position: absolute;
	width: 100%;
	top: 0;
}
.left_mobile_menu, .right_mobile_menu {
	position: absolute;
	width: 50px;
	height: 50px;
	display: block;
	top: 0;
	z-index: 200;
	border: 0;
	outline: 0;
	cursor: pointer;
	background-color: transparent;
}
.left_mobile_menu:after, .right_mobile_menu:after {
	position: absolute;
	content: '';
	left:0;
	top:0;
	bottom:0;
	right:0;
	filter: var(--mobile-menu-toggle-filter);
	background: url('images/icons/menu.svg') no-repeat center center;
	background-size: auto 26px;
}
.left_mobile_menu { left:0; }
.right_mobile_menu { right:0; }

/* cond-manager css */



#popups .co_man .dialog_content{
	overflow-y: auto;
	padding: 1rem;
	min-width: 650px !important;
    min-height: 410px !important;
max-height: 410px !important;;
  }
  #popups .co_man .dialog_content table #popup-tr-undefined th{display: table-cell !important;
	padding: 5px;
	font-size: 12px !important;
	font-weight: 500
};
  
#popups .cond_add{
	background-color: var(--block-background-color) !important;
	width: 340px !important;
	position:relative !important;
	left: 150px !important;
	top: 150px !important;

  }
  .cond_add{
	width: 400px !important;
  }
  #popups .cond_add .dialog_content table{
	width: 375px !important;
  }
  #popups .cond_add .dialog_content{
	overflow-y: auto;
	padding: 1rem;
	min-width: 650px !important;
	min-height: 75px !important;
  }
  .cond_add table{
	background-color: white !important;
  }
  .cond_add table th{
	color: black !important;
	border:1px solid #f1f1f1 !important;
	width: 100px !important;
	font-weight: normal !important;
  }
  .cond_add table td{
	border:1px solid #f1f1f1 !important;
	font-weight: normal !important;
	position: relative !important;
  }
  .cond_add table td select{
	width: 100% !important;
  }
   .cond_def{
    max-width: 500px !important;
	width: 500px !important;
	min-width: 500px !important;
    height: 450px !important;
    max-height: 450px !important;
	min-height: 450px !important;
  }
  .cond_def .cond_def_container{
	height: 345px;
  }
  .cond_def .cond_def_container .cond_def_simple,  .cond_def .cond_def_container .cond_def_complex{
	height: 100%;
	display: flex;
    flex-direction: column;
	padding: 5px;
	border: 1px solid #eee;
	border-radius: 12px;
	overflow: auto;
  }
  .cond_def .cond_def_container .cond_def_simple::-webkit-scrollbar, .cond_def_container .cond_def_complex::-webkit-scrollbar{
	width: 5px;
  }
  .cond_def .cond_def_container  .cond_def_fields{
	display: flex;
    flex-direction: row;
    align-items: center;
	gap: 5px;
	padding: 5px;
	border-bottom: 1px solid #eee;
  }
  .cond_def .cond_def_container  .cond_def_fields span{
	width: 40%;
	font-size: 14px;
    font-weight: 500;
    line-height: 16.8px;
  }
  .cond_def .cond_def_container  .cond_def_fields input[type='text'],  .cond_def .cond_def_container .cond_def_fields select{
	width: 60% !important;
	height: 32px;
  }
  .cond_def .cond_def_container  .cond_def_fields .cond_def_destination{
	width: 60%;
	display: flex;
	flex-direction: column;
	gap:5px
  }
  .cond_def .cond_def_container  .cond_def_fields .cond_def_destination .cond_def_destination_selection{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	width: 100%;
  }
  .cond_def .cond_def_container .cond_def_fields .cond_def_destination .cond_def_destination_selection .cond_def_destination_selection_field{
	display: flex;
	flex-direction: row;
	align-items: center;
  }
  .cond_def .cond_def_container  .cond_def_fields .cond_def_destination .cond_def_destination_selection label{
	margin: 0 !important;
  }
  .cond_def .cond_def_container .cond_def_fields .cond_def_destination .cond_def_destination_selection_options, .cond_def .cond_def_container .cond_def_fields .cond_def_destination .cond_def_destination_one_selection_options{
	width: 100%;
  }
  .cond_def .cond_def_container .cond_def_fields .cond_def_destination  select,
  .cond_def .cond_def_container .cond_def_fields .cond_def_destination  input[type='text']{
	width: 100% !important;
  }

/* .cond_def .dialog_content div table tbody #popup-tr-undefined{
background-color: #ccc !important;

}
#popups .cond_def .dialog_content table #popup-tr-undefined th{
	display: table-cell !important;
	text-align: center !important;
	font-weight: bold !important;

};
.cond_def .dialog_content div table tbody #popup-tr-undefined th{
	text-align: center !important;
	color: black !important;
	font-weight: bold !important;

} */

/* .cond_def .dialog_content div table tbody #popup-tr-undefined td{
	text-align: center !important;
	color: black !important;
	font-weight: bold !important;
	height: 30px !important;
} */
#cond_spn_val{
	padding: 3px !important;
}
.co_man{
	max-width: 776px !important;
    height: 510px !important;
    max-height: 510px !important;
}
.cond-container{
	display: flex;
    height: 387px;
	gap: 5px;
	width: 754px;
}
.cond-container select{
	width: 100%;
	height: 25px !important;
}
.cond-right-side{
	width: 70%;
    height: 100%;
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.cond-left-side{
	width: 30%;
    height: 100%;
	display: flex;
	flex-direction: column;
}
#cond-div1{
	width: 100%;
    overflow: auto;
	border: 1px solid #ccc;
    background-color: #fff;
    flex: 1;
}
#cond-div1::-webkit-scrollbar{
	width: 5px;
}

#cond-div2{
	border: 1px solid #ccc;
	height: 245px !important;
	width: 100%;
    background-color: #fff;
    overflow: auto;
}
#cond-div3{
	width: 100%;
	height: 140px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	overflow: hidden;
}
#cond-div3 textarea{
	border: 1px solid #ccc !important;
}
#cond-div4{
	display: flex;
    flex-direction: row;
    border: 1px solid #ccc;
    width: 100%;
    height: 46px;
    justify-content: space-between;
    align-items: center;
}

.cond-right-side #cond-div3 textarea{
	height: 87%;
    width: 100%;
    background-color: white;
	color: black !important;
	resize: none;
}
.cond-right-side #cond-div4 input{
	background-color: white;
    height: 35px;
    width: 219px !important;
}
.cond-right-side #cond-div4 a{
	padding: 5px;
    background-color: #f6f7f8;
    color: #666 !important;
    border-radius: 4px;
    text-decoration: none;
}

#popups > .cond_add >.buttons>button:disabled {
	visibility: visible !important;
    background-color:rgba(239, 239, 239, 0.3)!important;
    color: rgba(16, 16, 16, 0.3) !important;
    border-color: rgba(118, 118, 118, 0.3) !important;
}
#popups > .table_prop >.buttons>button:disabled {
	visibility: visible !important;
    background-color:rgba(239, 239, 239, 0.3)!important;
    color: rgba(16, 16, 16, 0.3) !important;
    border-color: rgba(118, 118, 118, 0.3) !important;
}
#popups > .cond_def >.buttons>button:disabled {
	visibility: visible !important;
    background-color:rgba(239, 239, 239, 0.3)!important;
    color: rgba(16, 16, 16, 0.3) !important;
    border-color: rgba(118, 118, 118, 0.3) !important;
}
.cond-container .cond-right-side p{
	color: black !important;
}
/* .cond_group{
	max-width: 350px !important;
    max-height: 150px !important;
}
.cond_group .dialog_content table{
	border: 1px solid;
    background-color: white;
}
.cond_group .dialog_content table th{
	color: black !important;
    font-weight: normal !important;
} */

@media screen and (max-width:700px) {
	.mobile_menu {
		display: block;
	}
	.main_menu > ul.menu_bar {
		height: 50px;
		padding-left: 50px;
		padding-right: 50px;
	}
}

@font-face {
	font-family: 'Poppins';
	src:url('fonts/Poppins-Normal.ttf') format('truetype');
	font-weight: 400;
	font-display: swap;
	font-style: normal;
}
@font-face {
	font-family: 'Poppins';
	src:url('fonts/Poppins-Bold.ttf') format('truetype');
	font-weight: 700;
	font-display: swap;
	font-style: bold;
}
@font-face {
	font-family: 'Poppins';
	src:url('fonts/Poppins-BoldItalic.ttf') format('truetype');
	font-weight: 700;
	font-display: swap;
	font-style: italic;
}
@font-face {
	font-family: 'Poppins';
	src:url('fonts/Poppins-Italic.ttf ') format('truetype');
	font-weight: 400;
	font-display: swap;
	font-style: italic;
}
@media print{
	body{
		background:none !important;
		background: #fff;
		background-color: #fff;
		font-family: 'Poppins', sans-serif;;
		width:auto !important;
		padding:5px !important;
		font-size: 12px;
	}
	progress,
	.menu,
	.sidebar_left,
	.sidebar_right,
	.submenu,
	.main_menu{
		display: none;
		height: 0;
		width: 0;
	}
	.main_wrapper{
		margin:0px;
		padding:0px;
	}
	canvas{
		border:0px;
		position: absolute;
		top:0px;
		left:0px;
	}
	.canvas_wrapper canvas{
		border:0;
	}
}

/**
 * alertifyjs 1.14.0 http://alertifyjs.com
 * AlertifyJS is a javascript framework for developing pretty browser dialogs and notifications.
 * Copyright 2024 Mohammad Younes <Mohammad@alertifyjs.com> (http://alertifyjs.com) 
 * Licensed under GPL 3 <https://opensource.org/licenses/gpl-3.0>*/
.alertify .ajs-dimmer{position:fixed;z-index:1981;top:0;right:0;bottom:0;left:0;padding:0;margin:0;background-color:#252525;opacity:.5}.alertify .ajs-modal{position:fixed;top:0;right:0;left:0;bottom:0;padding:0;overflow-y:auto;z-index:1981}.alertify .ajs-dialog{position:relative;margin:5% auto;min-height:110px;max-width:500px;padding:24px 24px 0 24px;outline:0;background-color:#fff}.alertify .ajs-dialog.ajs-capture:before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;display:block;z-index:1}.alertify .ajs-reset{position:absolute!important;display:inline!important;width:0!important;height:0!important;opacity:0!important}.alertify .ajs-commands{position:absolute;right:4px;margin:-14px 24px 0 0;z-index:2}.alertify .ajs-commands button{display:none;width:10px;height:10px;margin-left:10px;padding:10px;border:0;background-color:transparent;background-repeat:no-repeat;background-position:center;cursor:pointer}.alertify .ajs-commands button.ajs-close{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNy8xMy8xNOrZqugAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAh0lEQVQYlY2QsQ0EIQwEB9cBAR1CJUaI/gigDnwR6NBL/7/xWLNrZ2b8EwGotVpr7eOitWa1VjugiNB7R1UPrKrWe0dEAHBbXUqxMQbeewDmnHjvyTm7C3zDwAUd9c63YQdUVdu6EAJzzquz7HXvTiklt+H9DQFYaxFjvDqllFyMkbXWvfpXHjJrWFgdBq/hAAAAAElFTkSuQmCC)}.alertify .ajs-commands button.ajs-maximize{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNy8xMy8xNOrZqugAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAOUlEQVQYlWP8//8/AzGAhYGBgaG4uBiv6t7eXkYmooxjYGAgWiELsvHYFMCcRX2rSXcjoSBiJDbAAeD+EGu+8BZcAAAAAElFTkSuQmCC)}.alertify .ajs-header{margin:-24px;margin-bottom:0;padding:16px 24px;background-color:#fff}.alertify .ajs-body{min-height:56px}.alertify .ajs-body .ajs-content{padding:16px 24px 16px 16px}.alertify .ajs-footer{padding:4px;margin-left:-24px;margin-right:-24px;min-height:43px;background-color:#fff}.alertify .ajs-footer .ajs-buttons.ajs-primary{text-align:right}.alertify .ajs-footer .ajs-buttons.ajs-primary .ajs-button{margin:4px}.alertify .ajs-footer .ajs-buttons.ajs-auxiliary{float:left;clear:none;text-align:left}.alertify .ajs-footer .ajs-buttons.ajs-auxiliary .ajs-button{margin:4px}.alertify .ajs-footer .ajs-buttons .ajs-button{min-width:88px;min-height:35px}.alertify .ajs-handle{position:absolute;display:none;width:10px;height:10px;right:0;bottom:0;z-index:1;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNy8xMS8xNEDQYmMAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAQ0lEQVQYlaXNMQoAIAxD0dT7H657l0KX3iJuUlBUNOsPPCGJm7VDp6ryeMxMuDsAQH7owW3pyn3RS26iKxERMLN3ugOaAkaL3sWVigAAAABJRU5ErkJggg==);-webkit-transform:scaleX(1);transform:scaleX(1);cursor:se-resize}.alertify.ajs-no-overflow .ajs-body .ajs-content{overflow:hidden!important}.alertify.ajs-no-padding.ajs-maximized .ajs-body .ajs-content{left:0;right:0;padding:0}.alertify.ajs-no-padding:not(.ajs-maximized) .ajs-body{margin-left:-24px;margin-right:-24px}.alertify.ajs-no-padding:not(.ajs-maximized) .ajs-body .ajs-content{padding:0}.alertify.ajs-no-padding.ajs-resizable .ajs-body .ajs-content{left:0;right:0}.alertify.ajs-maximizable .ajs-commands button.ajs-maximize,.alertify.ajs-maximizable .ajs-commands button.ajs-restore{display:inline-block}.alertify.ajs-closable .ajs-commands button.ajs-close{display:inline-block}.alertify.ajs-maximized .ajs-dialog{width:100%!important;height:100%!important;max-width:none!important;margin:0 auto!important;top:0!important;left:0!important}.alertify.ajs-maximized.ajs-modeless .ajs-modal{position:fixed!important;min-height:100%!important;max-height:none!important;margin:0!important}.alertify.ajs-maximized .ajs-commands button.ajs-maximize{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNy8xMy8xNOrZqugAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAASklEQVQYlZWQ0QkAMQhDtXRincOZX78KVtrDCwgqJNEoIB3MPLj7lRUROlpyVXGzby6zWuY+kz6tj5sBMTMAyVV3/595RbOh3cAXsww1raeiOcoAAAAASUVORK5CYII=)}.alertify.ajs-maximized .ajs-dialog,.alertify.ajs-resizable .ajs-dialog{padding:0}.alertify.ajs-maximized .ajs-commands,.alertify.ajs-resizable .ajs-commands{margin:14px 24px 0 0}.alertify.ajs-maximized .ajs-header,.alertify.ajs-resizable .ajs-header{position:absolute;top:0;left:0;right:0;margin:0;padding:16px 24px}.alertify.ajs-maximized .ajs-body,.alertify.ajs-resizable .ajs-body{min-height:224px;display:inline-block}.alertify.ajs-maximized .ajs-body .ajs-content,.alertify.ajs-resizable .ajs-body .ajs-content{position:absolute;top:50px;right:24px;bottom:50px;left:24px;overflow:auto}.alertify.ajs-maximized .ajs-footer,.alertify.ajs-resizable .ajs-footer{position:absolute;left:0;right:0;bottom:0;margin:0}.alertify.ajs-resizable:not(.ajs-maximized) .ajs-dialog{min-width:548px}.alertify.ajs-resizable:not(.ajs-maximized) .ajs-handle{display:block}.alertify.ajs-movable:not(.ajs-maximized) .ajs-header{cursor:move}.alertify.ajs-modeless .ajs-dimmer,.alertify.ajs-modeless .ajs-reset{display:none}.alertify.ajs-modeless .ajs-modal{overflow:visible;max-width:none;max-height:0}.alertify.ajs-modeless.ajs-pinnable .ajs-commands button.ajs-pin{display:inline-block;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNy8xMy8xNOrZqugAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAQklEQVQYlcWPMQ4AIAwCqU9u38GbcbHRWN1MvKQDhQFMEpKImGJA0gCgnYw0V0rwxseg5erT4oSkQVI5d9f+e9+xA0NbLpWfitPXAAAAAElFTkSuQmCC)}.alertify.ajs-modeless.ajs-unpinned .ajs-modal{position:absolute}.alertify.ajs-modeless.ajs-unpinned .ajs-commands button.ajs-pin{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNy8xMy8xNOrZqugAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAAAO0lEQVQYlWP8//8/AzGAiShV6AqLi4txGs+CLoBLMYbC3t5eRmyaWfBZhwwYkX2NTxPRvibKjRhW4wMAhxkYGbLu3pEAAAAASUVORK5CYII=)}.alertify.ajs-modeless:not(.ajs-unpinned) .ajs-body{max-height:500px;overflow:auto}.alertify.ajs-basic .ajs-header{opacity:0}.alertify.ajs-basic .ajs-footer{visibility:hidden}.alertify.ajs-frameless .ajs-header{position:absolute;top:0;left:0;right:0;min-height:60px;margin:0;padding:0;opacity:0;z-index:1}.alertify.ajs-frameless .ajs-footer{display:none}.alertify.ajs-frameless .ajs-body .ajs-content{position:absolute;top:0;right:0;bottom:0;left:0}.alertify.ajs-frameless:not(.ajs-resizable) .ajs-dialog{padding-top:0}.alertify.ajs-frameless:not(.ajs-resizable) .ajs-dialog .ajs-commands{margin-top:0}.ajs-no-overflow{overflow:hidden!important;outline:0}.ajs-no-overflow.ajs-fixed{position:fixed;top:0;right:0;bottom:0;left:0;overflow-y:scroll!important}.ajs-no-selection,.ajs-no-selection *{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media screen and (max-width:568px){.alertify .ajs-dialog{min-width:150px}.alertify:not(.ajs-maximized) .ajs-modal{padding:0 5%}.alertify:not(.ajs-maximized).ajs-resizable .ajs-dialog{min-width:initial;min-width:auto}}@-moz-document url-prefix(){.alertify button:focus{outline:1px dotted #3593D2}}.alertify .ajs-dimmer,.alertify .ajs-modal{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transition-property:opacity,visibility;transition-property:opacity,visibility;-webkit-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-duration:250ms;transition-duration:250ms}.alertify.ajs-hidden .ajs-dimmer,.alertify.ajs-hidden .ajs-modal{visibility:hidden;opacity:0}.alertify.ajs-in:not(.ajs-hidden) .ajs-dialog{-webkit-animation-duration:.5s;animation-duration:.5s}.alertify.ajs-out.ajs-hidden .ajs-dialog{-webkit-animation-duration:250ms;animation-duration:250ms}.alertify .ajs-dialog.ajs-shake{-webkit-animation-name:ajs-shake;animation-name:ajs-shake;-webkit-animation-duration:.1s;animation-duration:.1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes ajs-shake{0%,100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes ajs-shake{0%,100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.alertify.ajs-slide.ajs-in:not(.ajs-hidden) .ajs-dialog{-webkit-animation-name:ajs-slideIn;animation-name:ajs-slideIn;-webkit-animation-timing-function:cubic-bezier(0.175,0.885,0.32,1.275);animation-timing-function:cubic-bezier(0.175,0.885,0.32,1.275)}.alertify.ajs-slide.ajs-out.ajs-hidden .ajs-dialog{-webkit-animation-name:ajs-slideOut;animation-name:ajs-slideOut;-webkit-animation-timing-function:cubic-bezier(0.6,-0.28,0.735,0.045);animation-timing-function:cubic-bezier(0.6,-0.28,0.735,0.045)}.alertify.ajs-zoom.ajs-in:not(.ajs-hidden) .ajs-dialog{-webkit-animation-name:ajs-zoomIn;animation-name:ajs-zoomIn}.alertify.ajs-zoom.ajs-out.ajs-hidden .ajs-dialog{-webkit-animation-name:ajs-zoomOut;animation-name:ajs-zoomOut}.alertify.ajs-fade.ajs-in:not(.ajs-hidden) .ajs-dialog{-webkit-animation-name:ajs-fadeIn;animation-name:ajs-fadeIn}.alertify.ajs-fade.ajs-out.ajs-hidden .ajs-dialog{-webkit-animation-name:ajs-fadeOut;animation-name:ajs-fadeOut}.alertify.ajs-pulse.ajs-in:not(.ajs-hidden) .ajs-dialog{-webkit-animation-name:ajs-pulseIn;animation-name:ajs-pulseIn}.alertify.ajs-pulse.ajs-out.ajs-hidden .ajs-dialog{-webkit-animation-name:ajs-pulseOut;animation-name:ajs-pulseOut}.alertify.ajs-flipx.ajs-in:not(.ajs-hidden) .ajs-dialog{-webkit-animation-name:ajs-flipInX;animation-name:ajs-flipInX}.alertify.ajs-flipx.ajs-out.ajs-hidden .ajs-dialog{-webkit-animation-name:ajs-flipOutX;animation-name:ajs-flipOutX}.alertify.ajs-flipy.ajs-in:not(.ajs-hidden) .ajs-dialog{-webkit-animation-name:ajs-flipInY;animation-name:ajs-flipInY}.alertify.ajs-flipy.ajs-out.ajs-hidden .ajs-dialog{-webkit-animation-name:ajs-flipOutY;animation-name:ajs-flipOutY}@-webkit-keyframes ajs-pulseIn{0%,100%,20%,40%,60%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,0.61,0.355,1);transition-timing-function:cubic-bezier(0.215,0.61,0.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes ajs-pulseIn{0%,100%,20%,40%,60%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,0.61,0.355,1);transition-timing-function:cubic-bezier(0.215,0.61,0.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@-webkit-keyframes ajs-pulseOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes ajs-pulseOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@-webkit-keyframes ajs-zoomIn{0%{opacity:0;-webkit-transform:scale3d(.25,.25,.25);transform:scale3d(.25,.25,.25)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes ajs-zoomIn{0%{opacity:0;-webkit-transform:scale3d(.25,.25,.25);transform:scale3d(.25,.25,.25)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@-webkit-keyframes ajs-zoomOut{0%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}100%{opacity:0;-webkit-transform:scale3d(.25,.25,.25);transform:scale3d(.25,.25,.25)}}@keyframes ajs-zoomOut{0%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}100%{opacity:0;-webkit-transform:scale3d(.25,.25,.25);transform:scale3d(.25,.25,.25)}}@-webkit-keyframes ajs-fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes ajs-fadeIn{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes ajs-fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes ajs-fadeOut{0%{opacity:1}100%{opacity:0}}@-webkit-keyframes ajs-flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes ajs-flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@-webkit-keyframes ajs-flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}@keyframes ajs-flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}@-webkit-keyframes ajs-flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes ajs-flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@-webkit-keyframes ajs-flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}@keyframes ajs-flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}@-webkit-keyframes ajs-slideIn{0%{margin-top:-100%}100%{margin-top:5%}}@keyframes ajs-slideIn{0%{margin-top:-100%}100%{margin-top:5%}}@-webkit-keyframes ajs-slideOut{0%{margin-top:5%}100%{margin-top:-100%}}@keyframes ajs-slideOut{0%{margin-top:5%}100%{margin-top:-100%}}.alertify-notifier{position:fixed;width:0;overflow:visible;z-index:1982;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.alertify-notifier .ajs-message{position:relative;width:260px;max-height:0;padding:0;opacity:0;margin:0;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transition-duration:250ms;transition-duration:250ms;-webkit-transition-timing-function:linear;transition-timing-function:linear}.alertify-notifier .ajs-message.ajs-visible{-webkit-transition-duration:.5s;transition-duration:.5s;-webkit-transition-timing-function:cubic-bezier(0.175,0.885,0.32,1.275);transition-timing-function:cubic-bezier(0.175,0.885,0.32,1.275);opacity:1;max-height:100%;padding:15px;margin-top:10px}.alertify-notifier .ajs-message.ajs-success{background:rgba(91,189,114,.95)}.alertify-notifier .ajs-message.ajs-error{background:rgba(217,92,92,.95)}.alertify-notifier .ajs-message.ajs-warning{background:rgba(252,248,215,.95)}.alertify-notifier .ajs-message .ajs-close{position:absolute;top:0;right:0;width:16px;height:16px;cursor:pointer;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAABGdBTUEAALGPC/xhBQAAAFBJREFUGBl1j0EKADEIA+ve/P9f9bh1hEihNBfjVCO1v7RKVqJK4h8gM5cAPR42AkQEpSXPwMTyoi13n5N9YqJehm3Fnr7nL1D0ZEbD5OubGyC7a9gx+9eNAAAAAElFTkSuQmCC);background-repeat:no-repeat;background-position:center center;background-color:rgba(0,0,0,.5);border-top-right-radius:2px}.alertify-notifier.ajs-top{top:10px}.alertify-notifier.ajs-bottom{bottom:10px}.alertify-notifier.ajs-right{right:10px}.alertify-notifier.ajs-right .ajs-message{right:-320px}.alertify-notifier.ajs-right .ajs-message.ajs-visible{right:290px}.alertify-notifier.ajs-left{left:10px}.alertify-notifier.ajs-left .ajs-message{left:-300px}.alertify-notifier.ajs-left .ajs-message.ajs-visible{left:0}.alertify-notifier.ajs-center{left:50%}.alertify-notifier.ajs-center .ajs-message{-webkit-transform:translateX(-50%);transform:translateX(-50%)}.alertify-notifier.ajs-center .ajs-message.ajs-visible{left:50%;-webkit-transition-timing-function:cubic-bezier(0.57,0.43,0.1,0.65);transition-timing-function:cubic-bezier(0.57,0.43,0.1,0.65)}.alertify-notifier.ajs-center.ajs-top .ajs-message{top:-300px}.alertify-notifier.ajs-center.ajs-top .ajs-message.ajs-visible{top:0}.alertify-notifier.ajs-center.ajs-bottom .ajs-message{bottom:-300px}.alertify-notifier.ajs-center.ajs-bottom .ajs-message.ajs-visible{bottom:0}.ajs-no-transition.alertify .ajs-dialog,.ajs-no-transition.alertify .ajs-dimmer,.ajs-no-transition.alertify .ajs-modal{-webkit-transition:none!important;transition:none!important;-webkit-animation:none!important;animation:none!important}.ajs-no-transition.alertify-notifier .ajs-message{-webkit-transition:none!important;transition:none!important;-webkit-animation:none!important;animation:none!important}@media (prefers-reduced-motion:reduce){.alertify .ajs-dialog,.alertify .ajs-dimmer,.alertify .ajs-modal{-webkit-transition:none!important;transition:none!important;-webkit-animation:none!important;animation:none!important}.alertify-notifier .ajs-message{-webkit-transition:none!important;transition:none!important;-webkit-animation:none!important;animation:none!important}}
/* misc, prep */
/* Thin */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

/* Thin Italic */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

/* Extra Light */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

/* Extra Light Italic */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-ExtraLightItalic.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

/* Light */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Light Italic */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* Regular (Normal.ttf) */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Normal.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Italic */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Medium */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Medium Italic */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* SemiBold */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* SemiBold Italic */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* Bold */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Bold Italic */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Extra Bold */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Extra Bold Italic */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-ExtraBoldItalic.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

/* Black */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Black Italic */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
 
.xmltree { font-family: 'Poppins', sans-serif;; font-size: 1rem; box-sizing: border-box; }
.xmltree a:hover { color: #d00; }
.xmltree .tree_node, .xmltree .attr pre, .xmltree .LIText { display: inline !important;
  position: relative;
    left: 6px;
 }

/* sub-trees */
.xmltree ul { margin: 1rem 0 0 0; padding: 0; border: none; margin-left: 1rem; border-left: solid 1px #ccc !important; }
.xmltree.startExpanded ul { display: block; }
.xmltree li { padding: 0 0 0 1rem; display: block; position: relative; margin-bottom: 1rem; border: none; }
.xmltree ul { display: none; }
.xmltree ul, .xmltree.xmltree li { list-style: none; }

/* node names */
.xmltree .tree_node { margin-right: 8px; background: #e5e5e5; padding: .3rem .6rem; color: #c50; border-radius: 3px; }
.xmltree.hideNodeNames .tree_node { display: none !important; }

/* attributes */
.xmltree .attr { margin: -3px 0 7px 0; }
.xmltree .attr pre { color: #1770e3; }
.xmltree .attrValue { margin-left: 8px; }
.xmltree.hideAttrs .attr { display: none !important; }
.xmltree .currSel { display: none; }

/* expand/collapse buttons */
.xmltree .plusMin { position: absolute; width: 20px; height: 20px; top: -2px; left: calc(1px); background: #666; color: white; text-align: center; line-height: 20px; cursor: pointer; font-size: 1.1rem; font-weight: bold; }
.xmltree .plusMin:hover { background: #777; }
.xmltree .noKids .plusMin { display: none; }
.xmltree.subTreeRequestsOnAllNodes .plusMin, .xmltree .subTreeNode .plusMin { display: block; }

.caret {
  /*  cursor: pointer;*/
    -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none;
  }
  
  .caret::before {
   /* content: "\25B6";*/
    color: black;
    display: inline-block;
    margin-right: 6px;
  }
  
  .caret-down::before {
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Safari */
    transform: rotate(90deg);  
  }
  pre{
    cursor: pointer;
  }

 /* pre::selection {
    background-color: transparent;
  }*/

*[wt-highlight=true] {
    z-index: 10050;
    transition: all 1s ease;
}

.wt-overlay {
    position: absolute;
    background: #000;
    opacity: .5;
    transition: all 1s ease;
    overflow: hidden;
}

.wt-popover {
    position: absolute;
    background: #fff;
    color: #2d2d2d;
    box-shadow: 0 1px 10px rgba(0, 0, 0, .4);
    min-width: 200px;
    transition: all 1s ease;
}

.wt-popover.wt-slides {
    position: fixed;
    top: 50%;
    left: 50%;
    max-height: 100%;
    overflow-y: auto;
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: all 1s ease;
}

.wt-popover-inner {
    margin: 0;
    padding: 15px;
    border-radius: 5px;
    overflow-x: hidden
}

.wt-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700
}

.wt-content {
    padding-bottom: 10px
}

.wt-popover::-webkit-scrollbar {
    width: 6px
}

.wt-popover::-webkit-scrollbar-track {
    -webkit-box-shadow: none
}

.wt-popover::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .2);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .2)
}

.wt-popover::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(68, 23, 23, .2)
}

.wt-btns {
    border: none;
    box-shadow: none;
    border-radius: 3px;
    font-weight: 600;
    padding: .5rem 1rem;
    margin: 0;
    color: #fff;
    cursor: pointer;
    min-width: 80px
}

.wt-btns.wt-btn-back {
    float: right;
    margin-right: 5px
}

.wt-btns.wt-btn-next {
    float: right
}

.wt-arrow,
.wt-arrow::before {
    position: absolute;
    width: 15px;
    height: 15px;
    z-index: -1
}

.wt-arrow::before {
    content: '';
    transform: rotate(45deg);
    background: #fff
}

.wt-popover.top>.wt-arrow {
    bottom: -7px;
    left: 50%;
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.wt-popover.top-start>.wt-arrow {
    bottom: -7px;
    left: 15px
}

.wt-popover.top-end>.wt-arrow {
    bottom: -7px;
    right: 15px
}

.wt-popover.bottom>.wt-arrow {
    top: -7px;
    left: 50%;
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.wt-popover.bottom-start>.wt-arrow {
    top: -7px;
    left: 15px
}

.wt-popover.bottom-end>.wt-arrow {
    top: -7px;
    right: 15px
}

.wt-popover.left>.wt-arrow {
    top: 50%;
    right: -7px;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.wt-popover.left-start>.wt-arrow {
    top: 15px;
    right: -7px
}

.wt-popover.left-end>.wt-arrow {
    bottom: 15px;
    right: -7px
}

.wt-popover.right>.wt-arrow {
    top: 50%;
    left: -7px;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.wt-popover.right-start>.wt-arrow {
    top: 15px;
    left: -7px
}

.wt-popover.right-end>.wt-arrow {
    bottom: 15px;
    left: -7px
}

.wt-loader {
    height: 3px;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: #fff
}

.wt-loader:before {
    display: block;
    position: absolute;
    content: "";
    left: -200px;
    width: 200px;
    height: 3px;
    background-color: #7cd1f9;
    animation: loading 2s linear infinite
}

@keyframes loading {
    from {
        left: -200px;
        width: 30%
    }

    50% {
        width: 30%
    }

    70% {
        width: 70%
    }

    80% {
        left: 50%
    }

    95% {
        left: 120%
    }

    to {
        left: 100%
    }
}
/* css for template settings */
.template_setting {

  display: block;
  max-width: 776px !important;
  height: 510px !important;
  max-height: 510px !important;

}

.template_setting .dialog_content {}

.template_setting_container {
  height: 397px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background-color: #fafafa;
}

.template_setting_tabs {
  position: sticky;
  top: 0;
  z-index: 200;
  overflow: hidden;
  background-color: #eee;
  height: 25px;
}

.template_setting_tabs p {
  color: black;
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 4px 10px;
  transition: 0.3s;
  font-size: 13px;
  margin: 0px
}

.template_setting_tabs p.active {
  background-color: #fafafa;
}

.template_setting_tabs p:hover {
  background-color: #ddd;
}

.template_setting_box {
  padding: 5px;
  height: 366px;
}

.template_setting_process_box {
  height: 100%;
}

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

.template_setting_process_title {
  height: 25px;
}

.template_setting_process_content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.template_setting_process_top {
  height: 50px;
  display: flex;
  flex-direction: row;
  gap: 5px;
}

.template_setting_process_top .template_setting_process_source_option {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.d-none {
  display: none !important;
}

.template_setting_process_top span {
  font-size: 14px;
  font-weight: 500;
  line-height: 16.8px;

}

.template_setting_process_top select {
  height: 90%;
  width: 100%;
}

.template_setting_process_middle {
  height: 50px;
  display: flex;
  /* flex-direction: column;
     */
  align-items: center;
  gap: 10px;
  width: 100%;
}

.content_authorization_div {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
}

.template_setting_process_title {
  display: flex;
  align-items: center;
  flex-direction: row;
  font-size: 14px;
  font-weight: 500;
  line-height: 16.8px;
}

.template_setting_process_title .template_setting_process_title_option_label {
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;
}

.template_setting_process_server {
  display: flex;
  flex-direction: row;
  gap: 5px;
  width: 90%;
}

.template_setting_process_server div select {
  width: 100%;
  height: 29px;
}

.template_setting_process_middle .work_flow_div {
  display: flex;
  flex-direction: row;
  gap: 5px;
  flex: 3;
}

.template_setting_process_middle .work_flow_div span {
  width: 25%;
  display: flex;
  align-items: center;
  flex-direction: row;
  font-size: 14px;
  font-weight: 500;
  line-height: 16.8px;
}

.template_setting_process_middle .work_flow_div select {
  width: 75%;
  height: 29px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.template_setting_process_server .server-config-loader {
  border: 4px solid #eee;
  border-top: 4px solid #cccc;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: spin 1s linear infinite;
}

.template_setting_process_server .server-config-loader-container {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.template_setting_process_server div {
  width: 96%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.template_setting_process_server #server_config {
  width: 4%;
}

.template_setting_process_top span {
  font-size: 14px;
  font-weight: 500;
  line-height: 16.8px;
}

.template_setting_process_top .template_setting_process_source_box {
  height: 60px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.template_setting_process_top .template_setting_process_source_box label {
  margin: 0;
  padding-top: 3px;
  padding-left: 3px;
}

.template_setting_process_top .template_setting_process_source_box input[type="radio"] {
  margin: 0;
  zoom: 1.4 !important;
}

.template_setting_process_top .template_setting_process_source_box .ts_sb_opts {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.template_setting_process_top .template_setting_process_source_box .ts_sb_field {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 5px;
}

.template_setting_process_bottom {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.template_setting_process_bottom span {
  font-size: 14px;
  font-weight: 500;
  line-height: 16.8px;
}

.template_setting_process_bottom .ts_pl {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 5px;
}

.template_setting_process_bottom .ts_pl .ts_pl_div1 {

  border: 1px solid #ccc;
  background-color: white;
  display: flex;
  flex-direction: column;
  width: 50%;
  height: 100%;
  overflow: auto;
}

.template_setting_process_bottom .ts_pl .ts_pl_div1::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.template_setting_process_bottom .ts_pl .ts_pl_div .tse_pl_levels {
  flex: 1;
}

.template_setting_process_bottom .ts_pl .ts_pl_div1 .tse_pl_level_title {
  display: inline-block;
  color: black;
  width: 100%;
  font-size: 12px;
  font-weight: 500;
  background-color: #fafafa;
  padding: 4px;
  border: 1px solid #f1f1f1;
  height: 25px;
}

.template_setting_process_bottom .ts_pl .ts_pl_div2 {
  width: 50%;
  border: 1px solid #ccc;
  background-color: white;
}

.template_setting_process_bottom .ts_pl .ts_pl_div2 td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  padding: 5px 5px !important;
}

.template_setting_process_bottom .ts_pl .ts_pl_div2 td select {
  width: 100%;
  height: 30px;
}

#popups .template_setting .template_setting_container td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}

#popups .template_setting .template_setting_container th {
  background: #fafafa;
  color: black;
  display: table-cell !important;
  font-size: 12px !important;
  border: 1px solid #f1f1f1;
  padding: 5px !important;
  position: sticky;
  top: 0;
  font-weight: 500 !important;
}

/* Extractor css */
.ts_extractor {
  display: block;
  max-width: 776px !important;
  height: 510px !important;
  max-height: 510px !important;
}

.ts_extractor .dialog_content {
  max-height: 410px !important;
}

.ts_extractor .ts_extractor_container {
  height: 397px;
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 5px;
  background-color: #fafafa;
}

.ts_extractor_container .tse_div1 {
  flex: 1;
  border: 1px solid #ccc;
  background-color: white;
  overflow-y: auto;
  overflow-x: hidden;
}

.ts_extractor_container .tse_div1::-webkit-scrollbar {
  width: 5px;
}

.ts_extractor_container .tse_div2 {
  border: 1px solid #ccc;
  background-color: white;
  width: 440px;
  height: 397px;
  overflow: auto;
}

.ts_extractor_container .tse_div2::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.extrator_field_button {
  display: inline-flex;
  align-items: center;
  height: 100%;
  gap: 3px
}

.extrator_addicon {
  padding: 0px 0px 4px 0px;
  width: 18px;
  height: 20px;
  border: none;
  box-shadow: none;
  background: url(images/icons/plus_ic.svg) no-repeat center center;
  filter: var(--menu-icons-filter);
  cursor: pointer !important;
}

.extrator_editicon {
  padding: 0px 0px 4px 0px;
  width: 18px;
  height: 20px;
  border: none;
  box-shadow: none;
  background: url(images/icons/edit_icon.png) no-repeat center center;
  filter: var(--menu-icons-filter);
  cursor: pointer !important;
}

.extrator_delicon {
  background: url(images/icons/del_icon.svg) no-repeat center center;
  display: inline-block;
  height: 18px;
  width: 18px;
  cursor: pointer;
}

.ts_extractor_container .tse_div2 th {
  background: #fafafa;
  color: black;
  display: table-cell !important;
  font-size: 12px !important;
  border: 1px solid #f1f1f1;
  padding: 5px !important;
  position: sticky;
  top: 0;
  font-weight: 500;
}

.ts_extractor_container .tse_div2 td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  padding: 5px 5px !important;
}

.ts_extractor_container .tse_div2 select,
.ts_extractor_container .tse_div2 input[type="text"],
.ts_extractor_container .tse_div2 input[type="number"] {
  width: 100% !important;
  height: 30px;
}

#popups>.extractor-btn-disable>.buttons>button:disabled {
  visibility: visible !important;
  background-color: rgba(239, 239, 239, 0.3) !important;
  color: rgba(16, 16, 16, 0.3) !important;
  border-color: rgba(118, 118, 118, 0.3) !important;
}

/* tree structure css */
.ts-extractor-tree-table-wrap {
  width: 100%;
}

.ts-extractor-tree-table {
  border: 1px solid #f1f1f1 !important;
  table-layout: fixed !important;
  width: 100% !important;
  border-collapse: collapse !important;
  background-color: white !important;
}

.ts-extractor-tree-table th {
  position: sticky;
  top: 0;
  color: #333;
  text-align: center;
  padding: 10px 0;
  background: #fafafa;
  font-size: 13px;
  border: 1px solid #f1f1f1;
  z-index: 100;
  font-weight: 500;
}

.ts-extractor-tree-table td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}

.ts-extractor-tree-table tr td:first-child {
  overflow: initial !important;
}

.ts-extractor-tree-table-space-block {
  border: 1px solid transparent;
  display: inline-block;
  width: 20px !important;
  height: 20px !important;
  line-height: 16px;
  text-align: center;
  vertical-align: top;
  font-size: 19px !important;
  position: relative !important;
  box-sizing: border-box;
  margin-top: 7px;
  border-radius: 50%;
}

.ts-extractor-tree-table tr td .ts-extractor-tree-table-space-block:first-child {
  margin-left: 7px;
}

.ts-extractor-tree-table-space-block.ts-extractor-btn-toggle {
  /* border: 1px solid #d9d9d9; */
  position: relative;
  cursor: pointer;
  width: 15px;
  height: 17px;
  z-index: 12;
}

.ts-extractor-tree-table-space-block.ts-extractor-btn-toggle.is-close {
  background: #f1f1f1;
  border: 1px solid transparent;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.ts-extractor-tree-table-space-block:before {
  position: absolute;
  content: "";
  width: 1px;
  height: 36px;
  background: #d9d9d9;
  left: 50%;
  top: -27px;
  z-index: -1;
}

.ts-extractor-tree-table-space-block i {
  display: block;
  width: 3px;
  height: 3px;
  margin-left: 8px;
  margin-top: 7px;
  background: #d9d9d9;
  border-radius: 50%;
}

.ts-extractor-tree-table-space-block.ts-extractor-btn-toggle:before {
  display: none;
}

.ts-extractor-tree-table-space-block.ts-extractor-last-block:before {
  display: none;
}

.ts-extractor-tree-table-space-block.ts-extractor-last-block:after {
  position: absolute;
  content: "";
  width: 20px;
  height: 1px;
  background: #d9d9d9;
  top: 50%;
  margin-top: -1px;
  left: -10px;
}

.ts-extractor-tree-table-space-block.ts-extractor-btn-toggle:after {
  display: none;
}

.ts-extractor-tree-table tr td .ts-extractor-tree-table-space-block:first-child:after {
  display: none;
}

.ts-extractor-tree-table-td-content {
  position: relative !important;
  display: inline-block;
  padding: 7px;
  cursor: pointer;
  text-overflow: ellipsis !important;
  width: 100px;
  overflow: hidden !important;
  white-space: nowrap;
}

.ts-extractor-hidden {
  display: none !important;
}

.ts-extractor-show {
  visibility: visible !important;
}

/* ts extractor tree end */
/* ts level tree */
.ts-level-tree-table-wrap {
  width: 100%;
}

.ts-level-tree-table {
  border: 1px solid #f1f1f1 !important;
  table-layout: fixed !important;
  width: 100% !important;
  border-collapse: collapse !important;
  background-color: white !important;
}

.ts-level-tree-table th {
  position: sticky;
  top: 0;
  color: #333;
  text-align: center;
  padding: 10px 0;
  background: #fafafa;
  font-size: 13px;
  border: 1px solid #f1f1f1;
  z-index: 100;
  font-weight: 500;
}

.ts-level-tree-table td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}

.ts-level-tree-table tr td:first-child {
  overflow: initial !important;
}

.ts-level-tree-table-space-block {
  border: 1px solid transparent;
  display: inline-block;
  width: 20px !important;
  height: 20px !important;
  line-height: 16px;
  text-align: center;
  vertical-align: top;
  font-size: 19px !important;
  position: relative !important;
  box-sizing: border-box;
  margin-top: 7px;
  border-radius: 50%;
}

.ts-level-tree-table tr td .ts-level-tree-table-space-block:first-child {
  margin-left: 7px;
}

.ts-level-tree-table-space-block.ts-level-btn-toggle {
  /* border: 1px solid #d9d9d9; */
  position: relative;
  cursor: pointer;
  width: 15px;
  height: 17px;
  z-index: 12;
}

.ts-level-tree-table-space-block.ts-level-btn-toggle.is-close {
  background: #f1f1f1;
  border: 1px solid transparent;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.ts-level-tree-table-space-block:before {
  position: absolute;
  content: "";
  width: 1px;
  height: 36px;
  background: #d9d9d9;
  left: 50%;
  top: -27px;
  z-index: -1;
}

.ts-level-tree-table-space-block i {
  display: block;
  width: 3px;
  height: 3px;
  margin-left: 8px;
  margin-top: 7px;
  background: #d9d9d9;
  border-radius: 50%;
}

.ts-level-tree-table-space-block.ts-level-btn-toggle:before {
  display: none;
}

.ts-level-tree-table-space-block.ts-level-last-block:before {
  display: none;
}

.ts-level-tree-table-space-block.ts-level-last-block:after {
  position: absolute;
  content: "";
  width: 20px;
  height: 1px;
  background: #d9d9d9;
  top: 50%;
  margin-top: -1px;
  left: -10px;
}

.ts-level-tree-table-space-block.ts-level-btn-toggle:after {
  display: none;
}

.ts-level-tree-table tr td .ts-level-tree-table-space-block:first-child:after {
  display: none;
}

.ts-level-tree-table-td-content {
  position: relative !important;
  display: inline-block;
  padding: 7px;
  cursor: pointer;
  text-overflow: ellipsis !important;
  width: 100px;
  overflow: hidden !important;
  white-space: nowrap;
}

.ts-level-hidden {
  display: none !important;
}

.ts-level-show {
  visibility: visible !important;
}

/* ts level tree end */

/* ts spool tab csss */
.template_setting_spool_box {
  height: 100%;
}

.template_setting_spool_box .ts_spool {
  height: 100%;
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.template_setting_spool_box .ts_spool_div1 {
  flex: 1;
  border: 1px solid #ccc;
  background-color: white;
  overflow: auto;
  width: 240px;
}

.template_setting_spool_box .ts_spool_div1::-webkit-scrollbar {
  width: 5px;
}

.template_setting_spool_box .ts_spool_div2 {
  flex: 1.5;
  border: 1px solid #ccc;
  background-color: white;
  overflow: auto;
}

.template_setting_spool_box .ts_spool_div2::-webkit-scrollbar {
  width: 5px;
}

.ts_spool_div2 td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  padding: 5px 5px;
}

.ts_spool_div2 input[type="text"],
.ts_spool_div2 input[type="number"],
.ts_spool_div2 select {
  width: 100% !important;
  height: 30px;
}

.ts_spool_div2 input,
.ts_spool_div2 input[type="checkbox"] {
  margin: 0 !important;
}

/* spool tree css */
.ts-spool-tree-table-wrap {
  width: 100%;
}

.ts-spool-tree-table {
  border: 1px solid #f1f1f1 !important;
  table-layout: fixed !important;
  width: 100% !important;
  border-collapse: collapse !important;
  background-color: white !important;
}

.ts-spool-tree-table th {
  position: sticky;
  top: 0;
  color: #333;
  text-align: center;
  padding: 10px 0;
  background: #fafafa;
  font-size: 13px;
  border: 1px solid #f1f1f1;
  z-index: 100;
  font-weight: 500;
}

.ts-spool-tree-table td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}

.ts-spool-tree-table tr td:first-child {
  overflow: initial !important;
}

.ts-spool-tree-table-space-block {
  border: 1px solid transparent;
  display: inline-block;
  width: 20px !important;
  height: 20px !important;
  line-height: 16px;
  text-align: center;
  vertical-align: top;
  font-size: 19px !important;
  position: relative !important;
  box-sizing: border-box;
  margin-top: 7px;
  border-radius: 50%;
}

.ts-spool-tree-table tr td .ts-spool-tree-table-space-block:first-child {
  margin-left: 7px;
}

.ts-spool-tree-table-space-block.ts-spool-btn-toggle {
  /* border: 1px solid #d9d9d9; */
  position: relative;
  cursor: pointer;
  width: 15px;
  height: 17px;
  z-index: 12;
}

.ts-spool-tree-table-space-block.ts-spool-btn-toggle.is-close {
  background: #f1f1f1;
  border: 1px solid transparent;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.ts-spool-tree-table-space-block:before {
  position: absolute;
  content: "";
  width: 1px;
  height: 36px;
  background: #d9d9d9;
  left: 50%;
  top: -27px;
  z-index: -1;
}

.ts-spool-tree-table-space-block i {
  display: block;
  width: 3px;
  height: 3px;
  margin-left: 8px;
  margin-top: 7px;
  background: #d9d9d9;
  border-radius: 50%;
}

.ts-spool-tree-table-space-block.ts-spool-btn-toggle:before {
  display: none;
}

.ts-spool-tree-table-space-block.ts-spool-last-block:before {
  display: none;
}

.ts-spool-tree-table-space-block.ts-spool-last-block:after {
  position: absolute;
  content: "";
  width: 20px;
  height: 1px;
  background: #d9d9d9;
  top: 50%;
  margin-top: -1px;
  left: -10px;
}

.ts-spool-tree-table-space-block.ts-spool-btn-toggle:after {
  display: none;
}

.ts-spool-tree-table tr td .ts-spool-tree-table-space-block:first-child:after {
  display: none;
}

.ts-spool-tree-table-td-content {
  position: relative !important;
  display: inline-block;
  padding: 7px;
  cursor: pointer;
}

.ts-spool-hidden {
  display: none !important;
}

.ts-spool-show {
  visibility: visible !important;
}

/*  */

.ts_extractor .dialog_content table #popup-tr-undefined th {
  background: #fafafa;
  color: black;
  display: table-cell !important;
  font-size: 13px !important;
  border: 1px solid #f1f1f1;
  padding: 5px !important;
  font-weight: 500;
}

.template_setting_output_box {
  height: 100%;
}

.template_setting_global_box {
  height: 100%;
  width: 100%;
}

.template_setting_global_box label {
  margin: 0 !important;
}

.template_setting_global_box .global-template-data,
.template_setting_global_box .global-template-layers {
  border: 1px solid #eee;
  padding: 5px;
  overflow: auto;
}

.template_setting_global_box .global-template-layers::-webkit-scrollbar {
  width: 5px;
}

.template_setting_global_box .global-template-data::-webkit-progress-bar,
.template_setting_global_box .global-template-layers::-webkit-progress-bar {
  width: 5px;
}

.ts_active {
  background-color: #beebff;
  border-color: #99defd;
}

/* Spinner overlay */
.global_config .global_config_loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Spinner animation */
.global_config .global_config_loader {
  border: 6px solid #f3f3f3;
  border-top: 6px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

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

.extrator_copyicon {
  /* background: url(images/icons/del_icon.svg) no-repeat center center; */
  display: inline-block;
  height: 18px;
  width: 18px;
  cursor: pointer;
}

.extrator_pasteicon {
  /* background: url(images/icons/del_icon.svg) no-repeat center center; */
  display: inline-block;
  height: 18px;
  width: 18px;
  cursor: pointer;
}

/* template_setting_child_css , template_setting_master_box */
.template_setting_child_box select,
.template_setting_master_box select {
  height: 29px;
  width: 80%;
}

.template_setting_master_box .child-templates-list {
  position: relative;
  overflow: auto;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
}

.template_setting_master_box .child-templates-list::-webkit-scrollbar {
  width: 5px;
}

.template_setting_master_box .child-templates-list label {
  margin: 0 !important;
}

/* Master Template Change Confirmation Dialog Styles */
.master-template-change-dialog {
  max-width: 600px !important;
  width: 100% !important;
}

.master-template-change-dialog .dialog_content {
  padding: 0 !important;
}

.master-template-confirmation-container {
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.master-template-confirmation-header {
  background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
  color: white;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 4px 4px 0 0;
}

.master-template-warning-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.master-template-warning-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.master-template-confirmation-content {
  padding: 25px;
  background-color: #fafafa;
  max-height: 400px;
  overflow-y: auto;
}

.master-template-confirmation-message {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  margin: 0 0 20px 0;
  padding: 0;
}

.master-template-confirmation-message strong {
  color: #d32f2f;
  font-weight: 600;
}

.master-template-confirmation-info-box {
  background-color: #fff3cd;
  border-left: 4px solid #ffc107;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.master-template-info-title {
  font-size: 13px;
  font-weight: 600;
  color: #856404;
  margin: 0 0 10px 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.master-template-info-title i {
  font-size: 14px;
  color: #ffc107;
}

.master-template-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.master-template-info-list li {
  font-size: 13px;
  color: #333;
  padding: 6px 0 6px 24px;
  position: relative;
  margin: 0;
  line-height: 1.5;
}

.master-template-info-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #ffc107;
  font-weight: bold;
  font-size: 14px;
}

.master-template-confirmation-question {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin: 15px 0 0 0;
  padding: 0;
  text-align: center;
}

.master-template-confirmation-content::-webkit-scrollbar {
  width: 6px;
}

.master-template-confirmation-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.master-template-confirmation-content::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

.master-template-confirmation-content::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Dialog button styles override */
.master-template-change-dialog .modal-footer {
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  padding: 15px 20px;
}

.master-template-change-dialog .modal-footer button {
  font-size: 14px;
  font-weight: 500;
  padding: 8px 20px;
}

.master-template-change-dialog .modal-footer button[data-action="finish"] {
  background-color: #ff6b6b;
  border-color: #ff6b6b;
  color: white;
}

.master-template-change-dialog .modal-footer button[data-action="finish"]:hover {
  background-color: #ff5252;
  border-color: #ff5252;
}

.master-template-change-dialog .modal-footer button[data-action="cancel"] {
  background-color: #e0e0e0;
  border-color: #bdbdbd;
  color: #333;
}

.master-template-change-dialog .modal-footer button[data-action="cancel"]:hover {
  background-color: #d0d0d0;
  border-color: #9e9e9e;
}
@font-face {
	font-family: 'Poppins';
	src:url('fonts/Poppins-Normal.ttf') format('truetype');
	font-weight: 400;
	font-display: swap;
	font-style: normal;
}
@font-face {
	font-family: 'Poppins';
	src:url('fonts/Poppins-Bold.ttf') format('truetype');
	font-weight: 700;
	font-display: swap;
	font-style: bold;
}
@font-face {
	font-family: 'Poppins';
	src:url('fonts/Poppins-BoldItalic.ttf') format('truetype');
	font-weight: 700;
	font-display: swap;
	font-style: italic;
}
@font-face {
	font-family: 'Poppins';
	src:url('fonts/Poppins-Italic.ttf ') format('truetype');
	font-weight: 400;
	font-display: swap;
	font-style: italic;
}
 
.interactive_shape{
    max-width: 650px !important;
    min-width: 650px !important;
    min-height: 380px !important;
    max-height: 380px !important;
    height: 380px !important;
    width: 650px !important;
}
.interactive_shape_box {width:625px; height:275px; padding:10px;background-color: white;}
.interactive_shape_box .left {float:left;}.right {float:right;}
.interactive_shape_box .left_div {float: left;
    width: 50%;
    height: 245px;
    overflow: auto;
}
.interactive_shape_box .left_div::-webkit-scrollbar{
    width: 5px;
}
.interactive_shape_box .right_div {float:right; width:50%;border: 1px solid #C3C3C3; background: #FAFAFA; margin-top:5px; height:240px; overflow:hidden; text-align:center;position: relative;}
.interactive_shape_box .t30p{margin-top:30%;}

.interactive_shape_box .clear {clear:both;}
.interactive_shape_box .mrg20B {margin-bottom:20px;}

.interactive_shape_box .left_div ul{margin:0; padding:0; list-style:none;}
.interactive_shape_box .left_div ul li{margin:5px; padding:10px; list-style:none;border: 1px solid #E4E4E4; color:#000; line-height:26px; text-align:center; width:33%; cursor:pointer; font-size:12px; font-family:'Poppins', sans-serif;; float:left;}
.interactive_shape_box .left_div ul li:hover{background:#bbe6e5;}.left_div ul li:active{background:var(--brand-color); color:#fff;}
.interactive_shape_box .left_div ul li.active{background:var(--brand-color); color:#fff;}

.interactive_shape_box .button_ic { background:url(images/interactive/button_ic.svg) no-repeat center center; height:18px; width:100%; display:inline-block;}
.interactive_shape_box .input_field_ic { background:url(images/interactive/input_field.svg) no-repeat center center; height:18px; width:100%; display:inline-block;}
.interactive_shape_box .dropdown_ic { background:url(images/interactive/drop_down.svg) no-repeat center center; height:18px; width:100%; display:inline-block;}
.interactive_shape_box .checkbox_ic { background:url(images/interactive/checkbox.svg) no-repeat center center; height:18px; width:100%; display:inline-block;}
.interactive_shape_box .radio_ic { background:url(images/interactive/radio_ic.svg) no-repeat center center; height:18px; width:100%; display:inline-block;}
.interactive_shape_box .element_ic { background:url(images/interactive/element.svg) no-repeat center center; height:36px; width:100%; display:inline-block;}

.interactive_shape_box .footer_div {text-align:right; padding:5px 10px;}

.interactive_shape_box .primarybt { background: var(--brand-color) !important; font-family: arial; border:1px solid var(--brand-color) !important; color: #ffffff !important; font-weight:500; padding:8px 15px; cursor: pointer; text-shadow: none !important; display: inline-block;text-align: center;}
.interactive_shape_box .primarybt { -moz-border-radius: 5px !important; -webkit-border-radius: 5px !important; border-radius: 5px !important; border: none; /*font-size: 16px !important;*/ }
.interactive_shape_box .primarybt { -moz-box-shadow: 1px 1px 2px #dfdfdf !important; -webkit-box-shadow: 1px 1px 2px #dfdfdf !important; box-shadow: 1px 1px 2px #dfdfdf !important; text-decoration:none !important; }
.interactive_shape_box .primarybt a { text-decoration:none; font-weight:normal; text-decoration:none !important; border:1px solid var(--brand-color) !important; }
.interactive_shape_box .primarybt:hover { background: var(--brand-color) !important; color: #ffffff !important; text-decoration:none; border:1px solid var(--brand-color) !important; }
.interactive_shape_box .primarybt:active { -moz-box-shadow: inset 1px 1px 1px #12274c; -webkit-box-shadow: inset 1px 1px 1px #12274c; box-shadow: inset 1px 1px 1px #12274c; color: #474646; text-decoration:none; }

.interactive_shape_box .secondarybt { background: #fff !important; font-family: 'Roboto-Medium', Verdana, Sans-serif !important; border:1px solid var(--brand-color) !important; color:var(--brand-color)  !important; font-weight:500; padding:7px 15px; cursor: pointer; text-shadow: none !important; display: inline-block; vertical-align:middle;}
.interactive_shape_box .secondarybt { -moz-border-radius: 5px !important; -webkit-border-radius: 5px !important; border-radius: 5px !important; border: none; /*font-size: 16px !important;*/ }
.interactive_shape_box .secondarybt { -moz-box-shadow: 1px 1px 2px #dfdfdf !important; -webkit-box-shadow: 1px 1px 2px #E2E8EA !important; box-shadow: 1px 1px 2px #dfdfdf !important; text-decoration:none !important; }
.interactive_shape_box .secondarybt a { text-decoration:none; font-weight:normal; text-decoration:none !important; border:1px solid #333 !important; }
.interactive_shape_box .secondarybt:hover { background: #f6f6f6 !important; color: var(--brand-color) !important; text-decoration:none; border:1px solid var(--brand-color) !important; }
.interactive_shape_box .secondarybt:active { -moz-box-shadow: inset 1px 1px 1px #12274c; -webkit-box-shadow: inset 1px 1px 1px #12274c; box-shadow: inset 1px 1px 1px #12274c; color: #333; text-decoration:none; }

.interactive_shape_box select, 
.interactive_shape_box input[type="radio"], 
.interactive_shape_box input[type="checkbox"], 
.interactive_shape_box input[type="text"], 
.interactive_shape_box input[type="email"], 
.interactive_shape_box input[type="password"] {
    position: relative;
    top: 40%;
  background: var(--brand-color) !important;
  font-family: 'Poppins', sans-serif;;
  border: 1px solid var(--brand-color) !important;
  color: #ffffff !important;
  font-weight: 500;
  padding: 8px 15px;
  cursor: pointer;
  text-shadow: none !important;
  display: inline-block;
  text-align: center;
  -moz-border-radius: 5px !important;
  -webkit-border-radius: 5px !important;
  border-radius: 5px !important;
  text-decoration: none !important;
}

.interactive_shape_box input[type="text"], 
.interactive_shape_box input[type="email"], 
.interactive_shape_box input[type="password"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.interactive_shape_box input[type="radio"], 
.interactive_shape_box input[type="checkbox"] {
  background: #ffffff !important; /* Different background for visibility */
  border: 2px solid var(--brand-color) !important;
  width: 20px; /* Custom size */
  height: 20px; /* Custom size */
}
.element_props{
  background: url(images/icons/configuration_ic.png) no-repeat center center;
  width: 25px;
  height: 25px;
  display: block;
}


/* element properties css */
.element_prop{
  max-width: 776px !important;
  min-width: 776px !important;
  min-height: 510px !important;
  max-height: 510px !important;
  height: 510px !important;
  width:776px !important;
}
.element_prop .element_prop_container{
  height: 397px;
    width: 100%;
    display: flex;
    flex-direction: row;
    background-color: #fafafa;
    border: 1px solid #ccc;
}
.element_prop .element_prop_container .element_prop_custom_box{
  height: 100%;
  width: 25%;
  background-color: white;
  overflow-y: auto;
  overflow-x: hidden;
}
.element_prop .element_prop_container .element_prop_custom_box_options{
  height: 86%;
  display: flex;
  flex-direction: column;
}
.element_prop .element_prop_container  .element_prop_custom_box_options .element_prop_custom_box_options_values{
  display: flex;
  align-items: center;
  height: 10%;
  padding: 5px;
  width: 100%;
  gap: 5px;
}
.element_prop .element_prop_container  .element_prop_custom_box_options .element_prop_custom_box_options_values span{
  width: 100px;
}
.element_prop .element_prop_container  .element_prop_custom_box_options .element_prop_custom_box_options_values select{
  width: 427px !important;
  height: 25px;
}
.element_prop .element_prop_container label{
  margin-top: 3px !important;
}
.element_prop .element_prop_container  .element_prop_custom_box_options .element_prop_custom_box_options_area{
  height: 90%;
  border-bottom: 1px solid #eee;
}
.element_prop .element_prop_container .element_prop_custom_box_options .element_prop_custom_box_options_area textarea{
  width: 100% !important;
  height: 100%;
  resize: none;
  border: 1px solid #ccc !important;
  padding: 5px;
  overflow-y: auto;
}
.element_prop .element_prop_container .element_prop_custom_box_options .element_prop_custom_box_options_area textarea::-webkit-scrollbar{
  width: 5px;
}
.element_prop .element_prop_container .element_prop_custom_box_title{
  display: flex;
    align-items: center;
    flex-direction: row;
    height: 7%;
    gap: 5px;
    width: 100%;
    border-bottom: 1px solid #eee;
    padding: 5px;
}
.element_prop .element_prop_container  .element_prop_custom_box_title input[type="text"]{
  width: 427px !important;
  height: 25px;
  }
  .element_prop .element_prop_container .element_prop_custom_box_attr_list{
    height: 68%;
    border-top: 1px solid #ccc;
    display: flex;
    flex-flow: wrap;
  }

  .element_prop .element_prop_container .element_prop_custom_box_attr_list::-webkit-scrollbar{
    width: 5px;
  }
  .element_prop .element_prop_container .element_prop_custom_box_event_list{
    height: 88%;
    border-top: 1px solid #ccc;
  }

  .element_prop .element_prop_container .element_prop_custom_box_attr_event::-webkit-scrollbar{
    width: 5px;
  }
  .element_prop .element_prop_container .element_card{
    width: 105px;
    height: 25px;
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 3px;
  }
  .element_prop .element_prop_container .element_card span{
    display: inline-block;
    width: 77px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
  }
  .element_prop .element_prop_container .element_evnt_card{
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 2px;
  }
  .element_prop .element_prop_container .element_evnt_card_tab{
    width: 150px;
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 3px;
    height: 25px;
  }
  .element_prop .element_prop_container .element_evnt_card_container{
    height: 100%;
  }
  .element_prop .element_prop_container .element_evnt_card_container textarea{
    resize: none;
    border: 1px solid #ccc !important;
    height: 85% !important;
    padding: 5px;
  }
  .element_prop .element_prop_container .element_evnt_card span{
    display: inline-block;
    width: 120px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
  }
  .element_prop .element_prop_container .element_prop_editor .element_prop_custom_box_title{
    display: flex;
      align-items: center;
      flex-direction: row;
      height: 7%;
      gap: 5px;
      width: 100%;
      border-bottom: 1px solid #eee;
      padding: 5px;
  }
  .element_prop .element_prop_container .element_prop_editor .element_prop_custom_box_title span{
  width: 100px;
  }
  .element_prop .element_prop_container .element_prop_editor .element_prop_custom_box_title input[type="text"]{
    width: 427px !important;
    height: 25px;
    }
    .element_prop .element_prop_container   button{
      background-color: var(--brand-color) !important;
      color: white !important;
    }
  .element_prop .element_prop_container .element_prop_editor .element_prop_custom_box_class_list{
    height: 93%;
    display: flex;
    padding: 5px;
    flex-flow: wrap;
    overflow-y: auto;
    gap: 1px;
  }
  .element_prop .element_prop_container .element_prop_editor .element_prop_custom_box_class_list::-webkit-scrollbar{
width: 5px;
  }
.element_prop .element_prop_container .element_prop_editor{
  height: 100%;
  width: 75%;
  background-color: white;
  gap: 3px;
  padding: 5px;
}
.element_prop .element_prop_container .element_prop_editor .element_prop_editor_content{
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.element_prop .element_prop_container .element_prop_editor .element_prop_editor_content .element_prop_editor_container{
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  padding: 5px;
  gap: 3px;
}
.element_prop .element_prop_container .element_prop_editor_title{
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  height: 7%;
  padding: 5px;
  font-weight: 500;
  font-size: 13px;
  background-color: #eee;
  cursor: pointer;
  margin: 0;
}
.element_prop .element_prop_container .element_prop_editor_title_active{
  background-color: #ffffff;
  border-right: 1px solid #FFFFFF;
}
.element_prop .element_prop_container .element_prop_editor .element_prop_editor_area{
  display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    height: 86%;
    padding: 5px;
}
.element_prop .element_prop_container .element_prop_editor .element_prop_editor_area_box{
  display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    height: 100%;
    padding: 5px;
}
.element_prop .element_prop_container .element_prop_editor .element_prop_editor_area_box textarea{
  width: 100%;
  height: 100%;
  border: 1px solid #ccc !important;
  resize: none;
  border-radius: 0;
  padding: 5px !important;
}
.element_prop .element_prop_container .element_prop_editor .element_prop_editor_area textarea{
  width: 100%;
  height: 100%;
  border: 1px solid #ccc !important;
  resize: none;
  border-radius: 0;
  padding: 5px !important;
}
.element_prop .element_prop_container .element_prop_editor .element_prop_editor_bracket{
  display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    height: 7%;
    padding: 5px;
}
.element_container_d_none{
  display: none !important;
}
.custom_box_attr_list_options{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 32%;
  gap: 5px;
}
.custom_box_attr_list_options .custom_box_attr_list_options_field{
display: flex;
align-items: center;
gap: 5px;
}
.custom_box_attr_list_options .custom_box_attr_list_options_field .custom_box_attr_list_options_field_name{
width: 10%;
  }
.custom_box_attr_list_options .custom_box_attr_list_options_field .custom_box_attr_list_options_field_value{
width: 90%;
  }
  .custom_box_attr_list_options .custom_box_attr_list_options_field input[type='text']{
  height: 25px;
   }
.custom_box_attr_list_options .custom_box_attr_list_options_field textarea{
height:60px;
resize: none;
border: 1px solid #ccc !important;
padding: 5px !important;
}
.custom_box_attr_list_options .custom_box_attr_list_options_field button{
  width: 100%;
  margin-left: 10%;
}
.element_card_close{
  display:inline-block;
  background: url(images/interactive/close.svg);
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.custom_box_event_list_options{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 32%;
  gap: 5px;
}
.custom_box_event_list_options .custom_box_event_list_options_field{
display: flex;
align-items: center;
gap: 5px;
}
.custom_box_event_list_options .custom_box_event_list_options_field .custom_box_event_list_options_field_name{
width: 12%;
  }
.custom_box_event_list_options .custom_box_event_list_options_field .custom_box_event_list_options_field_value{
width: 88% !important;
  }
  .custom_box_event_list_options .custom_box_event_list_options_field select{
  height: 25px;
  width: 100%;
   }
.custom_box_event_list_options .custom_box_event_list_options_field textarea{
height:40px;
resize: none;
border: 1px solid #ccc !important;
padding: 5px !important;
}
.custom_box_event_list_options .custom_box_event_list_options_field button{
  width: 100%;
  margin-left: 13%;
}

.global_complex {
  max-width: 776px !important;
  min-width: 776px !important;
  width: 776px !important;
  max-height: 510px !important;
  height: 510px !important;
  min-height: 510px !important;
}

.global_complex .global_complex_container {
  display: flex;
  flex-direction: row;
  width: 750px;
  height: 404px;
  padding: 10px !important;
  gap: 10px;
}

.global_complex .global_complex_container .global_complex_tree {
  flex: 1;
  border: 1px solid #e3e3e3;
  height: 100%;
  background-color: white;
  overflow: auto;
}

.global_complex .global_complex_container .global_complex_tree::-webkit-scrollbar {
  width: 5px;
}

.global_complex .global_complex_container .global_complex_fields {
  flex: 2;
  height: 100%;
  background-color: white;
  border: 1px solid #e3e3e3;
}

.global_complex .global_complex_container .global_complex_fields th {
  background: #fafafa;
  color: black;
  display: table-cell !important;
  font-size: 12px !important;
  border: 1px solid #f1f1f1;
  padding: 5px !important;
  position: sticky;
  top: 0;
  font-weight: 500 !important;
}

.global_complex .global_complex_container .global_complex_fields td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  padding: 5px;
}

.global_complex .global_complex_container .global_complex_fields select,
.global_complex .global_complex_container .global_complex_fields input {
  height: 25px !important;
  width: 100% !important;
}

/* tree */

#global_complex_tree {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#global_complex_tree ul {
  margin-left: 8px;
}

.global_complex_tree_caret {
  background: url(images/icons/collapse.png) no-repeat center;
  width: 5%;
  height: 28px;
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  margin: 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  float: left !important;
  filter: var(--menu-icons-filter);
}

.global_complex_tree_caret::before {
  background: url(images/icons/collapse.png) no-repeat center;
  width: 5%;
  height: 28px;
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  margin: 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  float: left !important;
  filter: var(--menu-icons-filter);
}

.global_complex_tree_caret-down {
  background: url(images/icons/expand.png) no-repeat center;
  width: 5%;
  height: 28px;
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  margin: 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  float: left !important;
  filter: var(--menu-icons-filter);
}

.global_complex_tree_nested {
  display: none;
}

.global_complex_tree_active {
  display: block;
}

.global_complex_tree_title_container {
  height: 28px;
  width: 95%;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 1px solid #ccc;
  padding-left: 5px;
}

.global_complex_tree_title {
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  width: 100%;
  cursor: pointer;
  height: 100%;
  padding: 5px;
}

.global_complex_tree_add_column {
  background: url(images/icons/plus_ic.svg) center center no-repeat !important;
  height: 20px !important;
  width: 30px !important;
  border: 0;
  box-shadow: none !important;
  background-color: transparent;
  margin: 0px !important;
  border-left: 1px solid #ccc !important;
  border-radius: 0px !important;
}

.global_complex_tree_del_column {
  background: url(images/icons/del_icon.svg) center center no-repeat !important;
  height: 20px !important;
  width: 30px !important;
  box-shadow: none !important;
  border: 0;
  background-color: transparent !important;
  margin: 0px !important;
  border-left: 1px solid #ccc !important;
  border-radius: 0px !important;
}

.global_complex_tree_column {
  height: 28px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 5px;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.global_complex_tree_column_title {
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  width: 100%;
  cursor: pointer;
  height: 100%;
  padding: 5px;
}

.active_component {
  background-color: var(--brand-color) !important;
  z-index: 1;
  color: #ffffff;
}

/* simple objects mapping css */
.simobj_mapping {
  width: 500px !important;
  max-width: 500px !important;
  min-width: 500px !important;
  height: 500px !important;
  max-height: 500px !important;
  min-height: 500px !important;
}

.simobj_mapping .dialog_content {
  width: 500px !important;
  height: 417px !important;
}

.simobj_mapping .simobj_mapping_container {
  width: 474px;
  height: 396px;
  overflow: auto;
}

.simobj_mapping .simobj_mapping_container::-webkit-scrollbar {
  width: 5px;
}

.simobj_mapping_container ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.simobj_mapping_container ul li {
  padding-left: 25px;
}

.simobj_mapping_container .simobj_mapping_caret_title {
  width: auto;
  display: flex;
  align-items: center;
  flex-direction: row;
  border: 1px solid #eee;
}

.simobj_mapping_container .simobj_mapping_caret {
  background: url(images/icons/collapse.png) no-repeat center;
  width: 5%;
  height: 28px;
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  margin: 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  float: left !important;
  filter: var(--menu-icons-filter);
}

.simobj_mapping_container .simobj_mapping_caret {
  background: url(images/icons/collapse.png) no-repeat center;
  width: 5%;
  height: 28px;
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  margin: 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  float: left !important;
  filter: var(--menu-icons-filter);
}

.simobj_mapping_container .simobj_mapping_caret_down {
  background: url(images/icons/expand.png) no-repeat center;
  width: 5%;
  height: 28px;
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  margin: 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  float: left !important;
  filter: var(--menu-icons-filter);
}

.simobj_mapping_container .simobj_mapping_nested {
  display: none;
}

.simobj_mapping_container .simobj_mapping_active {
  display: block;
}

/* Compute complex object */
.com_com_obj_settings {
  max-width: 776px !important;
  min-width: 776px !important;
  min-height: 510px !important;
  max-height: 510px !important;
  height: 510px !important;
  width: 776px !important;
}

.com_com_obj_settings .com_com_obj_container {
  height: 397px;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  gap: 5px;
}

.com_com_obj_settings .com_com_obj_container .com_com_obj_actions {
  height: 10%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.com_com_obj_settings .com_com_obj_container .com_com_obj_actions button {
  background-color: var(--brand-color);
  color: #ffffff;
  padding: 4px 10px 4px 10px;
  border-radius: 4px;
  height: 32px;
  width: 200px;
}

.com_com_obj_settings .com_com_obj_container .com_com_obj_list {
  height: 80%;
  border: 1px solid #E4E4E4;
  border-radius: 12px;
  overflow-y: auto;
}

.com_com_obj_settings .com_com_obj_container .com_com_obj_mapping {
  height: 10%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.com_com_obj_settings .com_com_obj_container .com_com_obj_mapping button {
  border-radius: 4px;
  height: 32px;
  width: 200px;
  margin: 0 3px;
  background-color: var(--button-background-color);
  border: 1px solid var(--brand-color);
  padding: 4px 10px;
  color: var(--brand-color);
}

.com_com_obj_settings .com_com_obj_container .com_com_obj_mapping button:hover {
  background-color: #eeeeee;
}

.com_com_obj_settings .com_com_obj_container .com_com_obj_list tr {
  border-bottom: 1px solid #E4E4E4;
}

.com_com_obj_settings .com_com_obj_container .com_com_obj_list td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #202124;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  padding: 6px !important;
  background: #FAFAFA;
  height: 48px;
  vertical-align: middle;
  line-height: 16px;
}

.com_com_obj_settings .com_com_obj_container .com_com_obj_list td select {
  height: 32px;
  width: 100%;
}

.crud_actions {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  gap: 5px;
}

.crud_actions .crud_delete {
  background: url(images/icons/delete_red_ic.svg) no-repeat center;
  display: inline-block;
  height: 32px;
  width: 32px;
  background-color: #E9EDEE !important;
  border-radius: 6px;
  cursor: pointer;

}

.com_com_obj_settings .com_com_obj_container .com_com_obj_list th:first-child {
  border-radius: 12px 0px 0px 0px;
}

.com_com_obj_settings .com_com_obj_container .com_com_obj_list th:last-child {
  border-radius: 0px 12px 0px 0px;
}

.com_com_obj_settings .com_com_obj_container .com_com_obj_list th {
  position: sticky;
  top: 0;
  color: #202124;
  padding: 5px 5px !important;
  background: #EEEEEE;
  font-size: 14px !important;
  /* border: 1px solid #E4E4E4; */
  z-index: 100;
  display: table-cell ! important;
  font-weight: 400;
  height: 48px;
  vertical-align: middle;
  line-height: 20px;
  letter-spacing: 0.1px;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

/*Compute complex object filtering  */
.com_com_obj_filtering {
  max-width: 776px !important;
  min-width: 776px !important;
  min-height: 510px !important;
  max-height: 510px !important;
  height: 510px !important;
  width: 776px !important;
}

.com_com_obj_filtering .com_com_obj_filtering_container {
  height: 397px;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  gap: 5px;
}

.com_com_obj_filtering .com_com_obj_filtering_container .com_com_obj_filtering_toggle {
  height: 10%;
  display: flex;
  align-items: center;
  flex-direction: row;
}

.com_com_obj_filtering .com_com_obj_filtering_container .com_com_obj_filtering_toggle label {
  margin: 0 !important;
}

.com_com_obj_filtering .com_com_obj_filtering_container .com_com_obj_filtering_list {
  height: 90%;
  display: flex;
  flex-direction: row;
  gap: 5px;
}

.com_com_obj_filtering .com_com_obj_filtering_container .com_com_obj_filtering_list .com_com_obj_filtering_list_tree::-webkit-scrollbar {
  width: 5px;
}

.com_com_obj_filtering .com_com_obj_filtering_container .com_com_obj_filtering_list .com_com_obj_filtering_list_tree {
  width: 50%;
  height: 100%;
  overflow: auto;
  border: 1px solid #eeee;
  border-radius: 10px;
  padding: 5px;
}

.com_com_obj_filtering .com_com_obj_filtering_container .com_com_obj_filtering_list .com_com_obj_filtering_list_view {
  width: 50%;
  height: 100%;
  border: 1px solid #eeee;
  border-radius: 10px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cco_filter_list_view_top {
  width: 100%;
  height: 10%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}

.cco_filter_list_view_top label {
  margin: 0 !important;
  width: 20%;
}

.cco_filter_list_view_top select {
  width: 80%;
  height: 30px;
}

.cco_filter_list_view_middle {
  width: 100%;
  height: 10%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.cco_filter_list_view_middle label {
  margin: 0 !important;
}

.cco_filter_list_view_bottom {
  width: 100%;
  height: 80%;
  border: 1px solid #eee;
}

.cco_filter_list_view_bottom td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #202124;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  padding: 6px !important;
  background: #FAFAFA;
  height: 48px;
  vertical-align: middle;
  line-height: 16px;
}

.cco_filter_list_view_bottom th {
  position: sticky;
  top: 0;
  color: #202124;
  padding: 5px 5px !important;
  background: #EEEEEE;
  font-size: 14px !important;
  /* border: 1px solid #E4E4E4; */
  z-index: 100;
  display: table-cell ! important;
  font-weight: 400;
  height: 48px;
  vertical-align: middle;
  line-height: 20px;
  letter-spacing: 0.1px;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

/* tree */
/* tree */

#com_com_obj_tree {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#com_com_obj_tree ul {
  margin-left: 8px;
}

.com_com_obj_tree_caret {
  background: url(images/icons/collapse.png) no-repeat center;
  width: 5%;
  height: 28px;
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  margin: 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  float: left !important;
  filter: var(--menu-icons-filter);
}

.com_com_obj_tree_caret::before {
  background: url(images/icons/collapse.png) no-repeat center;
  width: 5%;
  height: 28px;
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  margin: 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  float: left !important;
  filter: var(--menu-icons-filter);
}

.com_com_obj_tree_caret-down {
  background: url(images/icons/expand.png) no-repeat center;
  width: 5%;
  height: 28px;
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  margin: 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  float: left !important;
  filter: var(--menu-icons-filter);
}

.com_com_obj_tree_nested {
  display: none;
}

.com_com_obj_tree_active {
  display: block;
}

.com_com_obj_tree_title_container {
  height: 30px;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  gap: 5px;
}

.com_com_obj_tree_title_container .com_com_obj_tree_title {
  height: 100%;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  width: auto;
  flex: 1;
  padding: 5px;
}

.com_com_obj_tree_actions {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 4px;
}

.com_com_obj_tree_actions .com_com_obj_tree_delete_entity {
  background: url(images/icons/delete_red_ic.svg) no-repeat center;
  display: inline-block;
  height: 25px;
  width: 25px;
  background-color: #E9EDEE !important;
  border-radius: 6px;
  cursor: pointer;
}

.com_com_obj_tree_actions .com_com_obj_tree_add_entity {
  background: url(images/icons/add_icon_svg.svg) no-repeat center;
  display: inline-block;
  height: 25px;
  width: 25px;
  background-color: #E9EDEE !important;
  border-radius: 6px;
  cursor: pointer;
}

.com_com_obj_tree_actions button:hover {
  background-color: var(--button-background-color-hover) !important;
}

/* Data Mapper Search Component */
.dm_search_input_wrapper {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 6px;
  padding: 6px 12px;
  border: 1px solid #E5E7EB;
  transition: all 0.2s ease;
}

.dm_search_input_wrapper:focus-within {
  border-color: var(--brand-color, #2563EB);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.dm_search_input_wrapper input {
  border: none;
  outline: none;
  width: 100%;
  font-size: 13px;
  background: transparent;
  color: #333;
  padding: 0;
}
.acd_modal {
  max-width: 1000px !important;
  width: 1000px !important;
  min-width: 1000px !important;
  height: 600px !important;
  max-height: 600px !important;
  min-height: 600px !important;
}

.add_row_actions {
  max-width: 776px !important;
  height: 510px !important;
  max-height: 510px !important;
  width: 776px !important;
  min-width: 776px !important;
  min-height: 510px !important;
}

.add_row_actions .add_row_container {
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  gap: 5px;
  height: 388px;
  width: 751px;
  padding: 8px;
}

.add_row_actions .add_row_container .add_row_actions_buttons {
  height: 10%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.add_row_actions .add_row_container .add_row_actions_buttons button {
  background-color: var(--brand-color);
  color: #ffffff;
  padding: 4px 10px 4px 10px;
  border-radius: 4px;
  height: 32px;
  width: 200px;
}

.add_row_actions .add_row_container .add_row_content {
  height: 90%;
  border: 1px solid #E4E4E4;
  border-radius: 12px;
  overflow-y: auto;
}

/* Condition separator ("is" keyword) styling */
.acd__cond-separator {
  font-weight: 600;
  color: var(--acd-primary);
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
}

.add_row_actions .add_row_container .add_row_content::-webkit-scrollbar {
  width: 5px;
}

.add_row_actions .add_row_container th {
  display: table-cell !important;
  position: sticky;
  top: 0;
  color: #202124;
  padding: 5px 5px !important;
  background: #EEEEEE;
  font-size: 14px !important;
  /* border: 1px solid #E4E4E4; */
  z-index: 100;
  display: table-cell;
  font-weight: 400;
  height: 48px !important;
  vertical-align: middle;
  line-height: 20px;
  letter-spacing: 0.1px;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

.add_row_actions .add_row_container th:first-child {
  border-radius: 12px 0px 0px 0px;
}

.add_row_actions .add_row_container td {
  border: 1px solid #f1f1f1 !important;
  font-size: 12px !important;
  color: #202124;
  white-space: nowrap;
  text-overflow: ellipsis !important;
  overflow: visible !important;
  padding: 6px !important;
  background: #FAFAFA;
  height: 48px !important;
  vertical-align: middle;
  line-height: 16px;
}

.add_row_actions .add_row_container select,
.add_row_actions .add_row_container input {
  width: 100%;
  height: 100%;
}

.add_row_actions .add_row_container input {
  background: var(--input-background-color);
  border: 1px solid var(--input-border-color);
  border-radius: var(--input-border-radius);
  color: var(--input-text-color);
  padding: 1px 5px;
  font-size: 12px;
}

.add_row_actions .add_row_container .add_row_icons {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  gap: 5px;
}

.add_row_actions .add_row_container .add_row_icons .add_row_icon {
  display: inline-block;
  height: 32px;
  width: 32px;
  background-color: #E9EDEE !important;
  border-radius: 6px;
  cursor: pointer;
}

.add_row_actions .add_row_container .add_row_icons .edit_add_row {
  background: url(images/icons/edit_pen_ic.svg) no-repeat center;
}

.add_row_actions .add_row_container .add_row_icons .delete_add_row {
  background: url(images/icons/delete_red_ic.svg) no-repeat center;
}


.custom-file-button {
  padding: 6px -1px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.file-name-label {
  font-style: italic;
  color: #333;
}

tr[draggable="true"] {
  cursor: grab;
}

tr[draggable="true"]:active {
  cursor: grabbing;
}

tr.dnd-dragging {
  opacity: 0.4;
  background: #e8f4ff;
}

tr.dnd-over {
  border-top: 2px solid #4a90d9;
  background: #f0f8ff;
}


#acd-mount {
  width: 975px;
  height: 450px;
  overflow: hidden;
}

/* ── Design Tokens scoped to .acd (no :root) ── */
.acd {
  --acd-primary: var(--brand-color);
  --acd-primary-lt: #eef2ff;
  --acd-border: #e4e8ef;
  --acd-bg: #f6f8fb;
  --acd-surface: #ffffff;
  --acd-text: #18213a;
  --acd-muted: #6b7590;
  --acd-ok-bg: #e7f9ed;
  --acd-ok-fg: #1a9e4a;
  --acd-err-bg: #fdeef0;
  --acd-err-fg: #d92e3b;
  --acd-warn-bg: #fff8e1;
  --acd-warn-fg: #b45309;
  --acd-radius: 9px;
  --acd-radius-sm: 5px;
  --acd-shadow: 0 6px 28px rgba(0, 0, 0, 0.10);
  border-radius: 13px;
  box-shadow: var(--acd-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  gap: 5px;
}


.acd__close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--acd-muted);
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.acd__close:hover {
  background: var(--acd-bg);
  color: var(--acd-text);
}

/* ── Tabs ── */
.acd__tabs {
  display: flex;
  padding: 0 26px;
  border-bottom: 1px solid var(--acd-border);
  gap: 2px;
  height: 10%;
}

.acd__tab {
  padding: 12px 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--acd-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s;
  display: flex;
  align-items: center;
  gap: 7px;
  user-select: none;
}

.acd__tab:hover {
  color: var(--acd-text);
}

.acd__tab--active {
  color: var(--acd-primary);
  border-bottom-color: var(--acd-primary);
}

.acd__badge {
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
}

.acd__badge--blue {
  background: var(--acd-primary-lt);
  color: var(--acd-primary);
}

.acd__badge--gray {
  background: #f1f3f5;
  color: #666;
}

/* ── Filter Bar ── */
.acd__filterbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--acd-border);
  gap: 10px;
  flex-wrap: wrap;
  height: 15%;
}

.acd__search {
  position: relative;
}

.acd__search svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #aaa;
  pointer-events: none;
  color: #6b7590;
}

.acd__search input {
  padding: 7px 10px 7px 32px;
  border: 1px solid var(--acd-border);
  border-radius: var(--acd-radius-sm);
  font-size: 13px;
  width: 215px;
  outline: none;
  color: var(--acd-text);
  background: var(--acd-surface);
  transition: border-color 0.15s;
}

.acd__search input:focus {
  border-color: var(--acd-primary);
}

.acd__filter-right {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.acd__select-wrap {
  border: 1px solid var(--acd-border);
  border-radius: var(--acd-radius-sm);
  display: flex;
  align-items: center;
  padding: 0 8px;
  background: var(--acd-surface);
}

.acd__select-wrap svg {
  color: #999;
  flex-shrink: 0;
}

.acd__select-wrap select {
  border: none;
  background: transparent;
  font-size: 13px;
  padding: 7px 6px;
  outline: none;
  color: var(--acd-text);
  cursor: pointer;
}

.acd__btn-add-cond {
  background: var(--brand-color);
  color: white;
  border: none;
  border-radius: var(--acd-radius-sm);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: opacity 0.15s;
}

.acd__btn-add-cond:hover {
  opacity: 0.88;
}

/* ── Body ── */
.acd__body {
  width: 100%;
  height: 75%;
  overflow-y: auto;
}

.acd__body::-webkit-scrollbar {
  width: 5px;
}

/* ── Condition Block ── */
.acd__cond {
  border: 1px solid var(--acd-border);
  border-radius: var(--acd-radius);
  overflow: hidden;
  transition: box-shadow 0.15s;
}

.acd__cond--dragover {
  box-shadow: 0 0 0 2px var(--acd-primary);
}

.acd__cond-head {
  background: #fafbfc;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--acd-border);
  transition: background 0.13s;
  gap: 12px;
}

.acd__cond-head:hover {
  background: #f2f4f8;
}

.acd__cond-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.acd__dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

.acd__dot--true {
  background: var(--acd-ok-bg);
  color: var(--acd-ok-fg);
}

.acd__dot--false {
  background: var(--acd-err-bg);
  color: var(--acd-err-fg);
}

.acd__dot--default {
  background: var(--acd-primary-lt);
  color: var(--acd-primary);
}

.acd__cond-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--acd-text);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.acd__cond-value {
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 3px;
}

.acd__cond-operator {
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
}

.acd__count_label {
  font-size: 11px;
  font-weight: 500;
  color: #9ca3af;
}

.acd__count {
  font-size: 10px;
  color: #9ca3af;
  background: #f5f6f8;
  border: 1px solid #e2e5ea;
  padding: 1px 6px;
  border-radius: 10px;
}

.acd__count--true {
  background: var(--acd-ok-bg);
  color: var(--acd-ok-fg);
}

.acd__count--false {
  background: var(--acd-err-bg);
  color: var(--acd-err-fg);
}

.acd__count--default {
  background: var(--acd-primary-lt);
  color: var(--acd-primary);
}

.acd__cond-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  /* prevent right side from squishing */
}

.acd__cond-btns {
  display: flex;
  align-items: center;
  /* vertically centre all buttons in the row */
  gap: 4px;
}

/* ── Condition Checkbox ── */
.acd__cond-checkbox-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
}

.acd__cond-checkbox {
  cursor: pointer;
  accent-color: var(--acd-primary);
}

.acd__cond-checkbox:hover {
  opacity: 0.8;
}

/* ── Disabled Condition State ── */
.acd__cond--disabled {
  opacity: 0.6;
  background-color: #f5f5f5;
}

.acd__cond--disabled .acd__cond-head {
  background: #efefef;
  color: #999;
}

.acd__cond--disabled .acd__cond-name,
.acd__cond--disabled .acd__count_label,
.acd__cond--disabled .acd__count {
  color: #999;
}

.acd__cond--disabled .acd__cond-value {
  color: #999;
  background: #e5e7eb;
  border-left-color: #9ca3af;
}

.acd__cond--disabled .acd__cond-operator {
  color: #999;
}

.acd__chevron {
  transition: transform 0.25s;
  color: var(--acd-muted);
  width: 18px;
  height: 18px;
}

.acd__cond--collapsed .acd__chevron {
  transform: rotate(-90deg);
}

/* ── Collapsible ── */
.acd__collapsible {
  max-height: 3000px;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.2s ease;
  opacity: 1;
}

.acd__cond--collapsed .acd__collapsible {
  max-height: 0;
  opacity: 0;
}

/* ── Table ── */
.acd__table {
  width: 100%;
  border-collapse: collapse;
}

.acd__table thead tr {
  background: #f8fafc;
}

.acd__table th {
  padding: 5px 14px !important;
  font-size: 10.5px !important;
  font-weight: 600;
  letter-spacing: .05em;
  color: #9aacbe;
  padding: 8px 14px;
  border-bottom: 1px solid var(--acd-border);
}

.acd__table tbody tr {
  transition: background 0.12s;
}

.acd__table tbody tr:hover {
  background: #f9fafd;
}

.acd__table td {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--acd-text);
  border-bottom: 1px solid #f3f5f8;
  vertical-align: middle;
}

.acd__table tbody tr:last-child td {
  border-bottom: none;
}

/* ── Action row editing highlight ── */
.acd__action-row--editing {
  background: linear-gradient(to right, #eef2ff, #f9fafd) !important;
  border-left: 3px solid var(--acd-primary);
  box-shadow: inset 0 0 0 1px var(--acd-primary-lt);
}

.acd__action-row--editing td {
  background: transparent;
}

.acd__action-row--editing td:first-child {
  border-left: none;
}

.acd__drag-handle {
  cursor: grab;
  color: #ccc;
  font-size: 17px;
  display: inline-flex;
  align-items: center;
}

.acd__drag-handle:active {
  cursor: grabbing;
}

.acd__row--dragging {
  opacity: 0.3;
}

.acd__row--dragover td:first-child {
  border-top: 2px solid var(--acd-primary) !important;
}

.acd__type-cell {
  display: flex;
  align-items: center;
  gap: 7px;
}

.acd__type-icon {
  color: #6d3bdb;
  font-size: 15px;
}

.acd__exec-cell {
  display: flex;
  align-items: center;
  gap: 7px;
}

.acd__exec-icon {
  color: var(--acd-primary);
  font-size: 15px;
}

.acd__inline-sel {
  border: 1px solid transparent;
  background: transparent;
  font-size: 13px;
  color: var(--acd-text);
  border-radius: 4px;
  padding: 3px 6px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.12s, background 0.12s;
  max-width: 175px;
}

.acd__inline-sel:hover,
.acd__inline-sel:focus {
  border-color: var(--acd-border);
  background: var(--acd-surface);
}

.acd__row-btns {
  display: flex;
  gap: 5px;
}

/* ── Icon Button ── */
.acd__ibtn {
  width: 28px;
  height: 28px;
  border-radius: 5px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--acd-muted);
  font-size: 14px;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
  vertical-align: middle;
}

.acd__ibtn:hover {
  background: var(--acd-bg);
  color: var(--acd-text);
}

.acd__ibtn--danger:hover {
  background: var(--acd-err-bg);
  color: var(--acd-err-fg);
}

.acd__ibtn--primary:hover {
  background: var(--acd-primary-lt);
  color: var(--acd-primary);
}


.acd__btn-add-action:hover {
  background: var(--acd-primary);
  color: #fff;
}

/* ── Empty ── */
.acd__empty {
  text-align: center;
  padding: 30px;
  color: var(--acd-muted);
  font-size: 13px;
}

/* ── Footer ── */
.acd__footer {
  padding: 16px 26px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid var(--acd-border);
}

.acd__btn-cancel {
  background: var(--acd-surface);
  border: 1px solid var(--acd-border);
  padding: 8px 18px;
  border-radius: var(--acd-radius-sm);
  font-size: 13px;
  color: var(--acd-text);
  cursor: pointer;
  font-weight: 600;
  transition: background 0.12s;
}

.acd__btn-cancel:hover {
  background: var(--acd-bg);
}

.acd__btn-save {
  background: var(--acd-primary);
  border: none;
  color: white;
  padding: 8px 18px;
  border-radius: var(--acd-radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.acd__btn-save:hover {
  opacity: 0.88;
}

/* ── Modal ── */
.acd-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: acd-fadein 0.15s;
}

@keyframes acd-fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.acd-modal {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.14);
  width: 470px;
  max-width: 95vw;
  overflow: hidden;
}

.acd-modal__head {
  padding: 18px 20px 14px;
  border-bottom: 1px solid #e4e8ef;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.acd-modal__head h3 {
  font-size: 15px;
  font-weight: 700;
  color: #18213a;
}

.acd-modal__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.acd-modal__group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.acd-modal__group label {
  font-size: 11px;
  font-weight: 700;
  color: #6b7590;
  letter-spacing: .05em;
}

.acd-modal__group input,
.acd-modal__group select {
  border: 1px solid #e4e8ef;
  border-radius: 5px;
  padding: 8px 10px;
  font-size: 13px;
  color: #18213a;
  outline: none;
  transition: border-color 0.12s;
  background: #fff;
}

.acd-modal__group input:focus,
.acd-modal__group select:focus {
  border-color: #2c52f1;
}

.acd-modal__state-row {
  display: flex;
  gap: 10px;
}

.acd-modal__state-btn {
  flex: 1;
  padding: 9px;
  border-radius: 5px;
  border: 2px solid #e4e8ef;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  background: #f6f8fb;
  color: #6b7590;
  transition: all 0.15s;
}

.acd-modal__state-btn--true.acd-modal__state-btn--sel {
  border-color: #1a9e4a;
  background: #e7f9ed;
  color: #1a9e4a;
}

.acd-modal__state-btn--false.acd-modal__state-btn--sel {
  border-color: #d92e3b;
  background: #fdeef0;
  color: #d92e3b;
}

.acd-modal__state-btn--default.acd-modal__state-btn--sel {
  border-color: #2c52f1;
  background: #eef2ff;
  color: #2c52f1;
}

.acd-modal__foot {
  padding: 14px 20px;
  border-top: 1px solid #e4e8ef;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.acd-modal__cancel {
  background: #fff;
  border: 1px solid #e4e8ef;
  padding: 8px 16px;
  border-radius: 5px;
  font-size: 13px;
  color: #18213a;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.12s;
}

.acd-modal__cancel:hover {
  background: #f6f8fb;
}

.acd-modal__confirm {
  background: #2c52f1;
  border: none;
  color: white;
  padding: 8px 16px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.acd-modal__confirm:hover {
  opacity: 0.88;
}

/* ── Filter Bar — fix vertical alignment and padding ── */
.acd__filterbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  /* ADD padding so content isn't flush to edges */
  border-bottom: 1px solid var(--acd-border);
  gap: 10px;
  flex-wrap: wrap;
  height: auto;
  /* was 15% — use auto so it doesn't clip on small heights */
  min-height: 52px;
}

/* ── Tabs — fix height ── */
.acd__tabs {
  display: flex;
  padding: 0 16px;
  border-bottom: 1px solid var(--acd-border);
  gap: 2px;
  height: auto;
  /* was 10% — causes clipping */
  min-height: 42px;
}

/* ── Body — take remaining space ── */
.acd__body {
  width: 100%;
  flex: 1;
  /* fill remaining height instead of fixed 75% */
  overflow-y: auto;
  padding: 10px 12px;
  /* ADD padding so condition blocks have breathing room */
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* space between condition blocks */
}

/* ── Condition block — add margin between blocks ── */
.acd__cond {
  border: 1px solid var(--acd-border);
  border-radius: var(--acd-radius);
  overflow: hidden;
  transition: box-shadow 0.15s;
  /* removed: no margin needed, gap on parent handles it */
}

/* ── Add Action button — keep inside condition, don't leak outside ── */
.acd__btn-add-action {
  width: 105px;
  padding: 3px 6px;
  background: #fafbfc;
  border: none;
  border-top: 1px solid var(--acd-border);
  color: var(--acd-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  /* ADD: center the + icon and label */
  gap: 5px;
  transition: background 0.12s;
}

/* ── DnD visual feedback on condition blocks ── */
.acd__cond.dnd-dragging {
  opacity: 0.4;
  box-shadow: 0 0 0 2px var(--acd-primary);
}

.acd__cond.dnd-over {
  box-shadow: 0 -3px 0 0 var(--acd-primary);
  /* top border highlight */
}


.acd__settings-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--acd-surface);
  border: 1px solid var(--acd-border);
  border-radius: 6px;
  color: var(--acd-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  min-height: 32px;
}

.acd__settings-btn:hover {
  border-color: var(--acd-primary);
  color: var(--acd-primary);
  background: var(--acd-primary-lt);
}

.acd__settings-btn svg {
  flex-shrink: 0;
  transition: transform 0.3s;
}

.acd__settings-btn:hover svg {
  transform: rotate(60deg);
}

.acd__ibtn--paste {
  width: 105px;

  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px;
  background: #fafbfc;
  font-size: 13px;
  font-weight: 600;
  color: var(--acd-primary);
  border: 1px solid var(--acd-border);
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.15s;
}

.acd__ibtn--paste:hover {
  background: var(--acd-primary);
  color: #fff;
}

.td-content {
  width: 100%;
  display: flex;
  height: 100%;
  align-items: center;
}

.td-content select,
.td-content input[type="text"] {
  height: 100%;
  width: 100%;
}

.acd__badge-master {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: #eef2ff;
  /* purple-100 */
  color: var(--acd-primary);
  /* purple-800 */
  font-size: 11px;
  font-weight: bold;
  line-height: 1;
  margin-left: 6px;
  flex-shrink: 0;
  cursor: default;
  vertical-align: middle;
  pointer-events: all;
  opacity: 1;
}

@keyframes acd-highlight-fade {
  0% {
    border: 2px solid var(--acd-primary);
    background-color: #EEEDFE;
  }

  70% {
    border: 2px solid var(--acd-primary);
    background-color: #EEEDFE;
  }

  100% {
    border: 2px solid transparent;
    background-color: transparent;
  }
}

.acd__highlight {
  animation: acd-highlight-fade 2s ease-out forwards;
}

.conditions-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--acd-border);
  font-size: 13px;
  user-select: none;
}

.conditions-banner .icon {
  flex-shrink: 0;
  opacity: 0.7;
  color: inherit;
}
.dfa_addc{
  max-width: 500px !important;
  width: 500px !important;
  min-width: 500px !important;
  height: 300px !important;
  max-height: 300px !important;
  min-height: 300px !important;
}
.acd-cond-dialog-container {
  padding: 8px 0;
}

.acd-cond-dialog-form-group {
  margin-bottom: 20px;
}

.acd-cond-dialog-form-group:last-child {
  margin-bottom: 0;
}

.acd-cond-dialog-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.acd-cond-dialog-label i {
  font-size: 13px;
  vertical-align: -1px;
  margin-right: 4px;
}

.acd-cond-dialog-input-wrapper {
  display: flex;
  gap: 10px;
}

.acd-cond-dialog-select {
  flex: 1;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid #ddd;
  background: #ffffff;
  color: #1a202c;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231a202c' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  transition: all 0.2s ease;
}

.acd-cond-dialog-select:hover {
  border-color: #bbb;
  background-color: #fafafa;
}

.acd-cond-dialog-select:focus {
  outline: none;
  border-color: #666;
  background-color: #ffffff;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}

.acd-cond-dialog-config-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid #ddd;
  background: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #666;
  transition: all 0.2s ease;
  padding: 0;
}

.acd-cond-dialog-config-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}

.acd-cond-dialog-config-btn:hover {
  border-color: #bbb;
  background: #fafafa;
}

.acd-cond-dialog-config-btn:active {
  background: #f0f0f0;
}

.acd-cond-dialog-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: #666;
  font-weight: 400;
}

.acd-cond-dialog-segmented {
  display: inline-flex;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
  background: white;
}

.acd-cond-dialog-segment-btn {
  flex: 1;
  min-width: 90px;
  padding: 8px 15px;
  border: none;
  background: white;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.2s ease;
  border-right: 1px solid #ddd;
  letter-spacing: 0.5px;
}

.acd-cond-dialog-segment-btn:last-child {
  border-right: none;
}

.acd-cond-dialog-segment-btn:hover {
  background: #f9f9f9;
  color: #333;
}

.acd-cond-dialog-segment-btn.active {
  background: #333;
  color: white;
  font-weight: 600;
}

.acd-cond-dialog-segment-btn:focus {
  outline: none;
}

.acd-cond-dialog-preview {
  background: #f8fafc;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 20px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e2e8f0;
}

.acd-cond-dialog-preview-icon {
  font-size: 14px;
  color: #666;
  flex-shrink: 0;
}

.acd-cond-dialog-preview-text {
  font-size: 12px;
  color: #333;
  font-weight: 500;
}
/* app config form — module-specific styles
   Global config popup layout/nav is in configuration.css
*/
:root {
    --app-config-primary: var(--brand-color);
    --app-config-bg: #f4f6fb;
    --app-config-card-bg: #ffffff;
    --app-config-text-main: #1a202c;
    --app-config-text-muted: #6b7280;
    --app-config-border: #e8ecf4;
    --app-config-radius-md: 10px;
    --app-config-radius-sm: 7px;
    --app-config-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.07);
}

/* ================================================================
   GLOBAL CONFIG GRID — Module Header, Table, Search, Pagination
   All interactive elements use border-radius: 5px
   ================================================================ */

/* Module panel wrapper */
.global_config_table {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 14px 16px 10px;
    box-sizing: border-box;
    gap: 0;
    background: #f4f6fb;
    overflow: hidden;
}

/* ── Module header bar ── */
.gc-module-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid #e8ecf4;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    gap: 10px;
    flex-shrink: 0;
    min-height: 46px;
}

.gc-module-header-right {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 15px !important;
}

.gc-module-title {
    font-size: 13px;
    font-weight: 600;
    color: #1a202c;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    white-space: nowrap;
    flex: 0 0 auto;
}

.gc-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

/* ── Search box ── */
.gc-search-box {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f8faff;
    border: 1px solid #e8ecf4;
    border-radius: 5px;
    padding: 5px 10px;
    transition: border-color 0.15s, box-shadow 0.15s;
    height: 32px;
    box-sizing: border-box;
}

.gc-search-box:focus-within {
    border-color: var(--brand-color, #3b5bdb);
    box-shadow: 0 0 0 2.5px rgba(59, 91, 219, 0.1);
    background: #ffffff;
}

.gc-search-box svg {
    color: #9ca3af;
    flex-shrink: 0;
}

.gc-search-input {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 12px !important;
    color: #374151 !important;
    font-family: 'Poppins', Arial, Helvetica, sans-serif !important;
    width: 140px;
    padding: 0 !important;
    box-shadow: none !important;
}

.gc-search-input::placeholder {
    color: #b0b8c8;
}

/* ── Add button ── */
.gc-add-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    height: 32px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    background: var(--brand-color, #3b5bdb) !important;
    border: none !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    font-family: 'Poppins', Arial, Helvetica, sans-serif !important;
    white-space: nowrap !important;
    transition: opacity 0.15s, transform 0.12s !important;
    box-shadow: 0 1px 4px rgba(59, 91, 219, 0.25) !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

.gc-add-btn:hover {
    opacity: 0.88 !important;
    transform: translateY(-1px) !important;
}

.gc-add-btn svg {
    pointer-events: none;
}

/* ── Table wrapper ── */
.gc-table-wrap {
    flex: 1;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #e8ecf4;
    border-radius: 0;
    position: relative;
}

.gc-table-wrap::-webkit-scrollbar {
    width: 4px;
}

.gc-table-wrap::-webkit-scrollbar-thumb {
    background: #dde3ef;
    border-radius: 4px;
}

/* ── Table ── */
.gc-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    table-layout: auto;
}

.gc-table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #f8faff !important;
    color: #6b7280 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: capitalize !important;
    letter-spacing: 0.05em;
    padding: 9px 12px !important;
    text-align: left !important;
    border-bottom: 1px solid #e8ecf4 !important;
    border-right: none !important;
    border-left: none !important;
    border-top: none !important;
    white-space: nowrap;
    font-family: 'Poppins', Arial, Helvetica, sans-serif !important;
}

.gc-table tbody tr {
    border-bottom: 1px solid #f0f4f9;
    transition: background 0.1s;
}

.gc-table tbody tr:last-child {
    border-bottom: none;
}

.gc-table tbody tr:hover {
    background: #f5f8ff;
}

.gc-table tbody td {
    padding: 8px 12px !important;
    font-size: 12.5px !important;
    color: #374151 !important;
    border: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    text-align: left !important;
    vertical-align: middle;
    font-family: 'Poppins', Arial, Helvetica, sans-serif !important;
}

/* action cell full width for buttons */
.gc-table tbody td:last-child {
    max-width: none;
    width: 80px;
}

/* ── Empty state ── */
.gc-empty-state {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    gap: 8px;
    color: #9ca3af;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    font-size: 12px;
}

.gc-empty-state p {
    margin: 0;
    color: #b0b8c8;
    font-size: 12px;
}

/* ── Pagination bar ── */
.gc-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 14px;
    background: #ffffff;
    border: 1px solid #e8ecf4;
    border-top: 1px solid #f0f4f9;
    border-radius: 0 0 5px 5px;
    flex-shrink: 0;
    gap: 10px;
    min-height: 38px;
}

.gc-pagination-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gc-page-size-label {
    font-size: 11px;
    color: #6b7280;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    white-space: nowrap;
}

.gc-page-size-select {
    border: 1px solid #e8ecf4;
    background-color: #ffffff;
    border-radius: 5px;
    padding: 2px 6px;
    font-size: 11.5px;
    color: #374151;
    cursor: pointer;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    outline: none;
    height: 24px;
    box-sizing: border-box;
}

.gc-page-size-select:focus {
    border-color: var(--brand-color, #3b5bdb);
}

.gc-page-info {
    font-size: 11px;
    color: #9ca3af;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    white-space: nowrap;
    margin-left: 4px;
}

.gc-page-btns {
    display: flex;
    align-items: center;
    gap: 3px;
}

.gc-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 5px;
    border: 1px solid #e8ecf4;
    background: #ffffff;
    color: #374151;
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
    transition: background 0.12s, border-color 0.12s;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    padding: 0;
}

.gc-page-btn:hover:not(:disabled) {
    background: #f0f4ff;
    border-color: var(--brand-color, #3b5bdb);
    color: var(--brand-color, #3b5bdb);
}

.gc-page-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.gc-page-nums {
    display: flex;
    align-items: center;
    gap: 2px;
}

.gc-page-num-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    border-radius: 5px;
    border: 1px solid #e8ecf4;
    background: #ffffff;
    color: #374151;
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    padding: 0 6px;
}

.gc-page-num-btn:hover {
    background: #f0f4ff;
    border-color: var(--brand-color, #3b5bdb);
    color: var(--brand-color, #3b5bdb);
}

.gc-page-num-btn.active {
    background: var(--brand-color, #3b5bdb);
    border-color: var(--brand-color, #3b5bdb);
    color: #ffffff;
}

/* ── Action buttons inside rows ── */
.gc_buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    height: 100%;
    width: 100%;
}

.gc_update_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 5px;
    background: url(images/icons/edit_icon.svg) no-repeat center center;
    background-size: 14px 14px;
    background-color: #eef2ff;
    cursor: pointer;
    margin: 0;
    border: 1px solid #dde3f8;
    transition: background-color 0.12s, transform 0.1s;
    flex-shrink: 0;
}

.gc_update_button:hover {
    background-color: #dbe4ff;
    transform: scale(1.06);
}

.gc_delete_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 5px;
    background: url(images/icons/delete_icon.svg) no-repeat center center;
    background-size: 14px 14px;
    background-color: #fff5f5;
    cursor: pointer;
    margin: 0;
    border: 1px solid #fecaca;
    transition: background-color 0.12s, transform 0.1s;
    flex-shrink: 0;
}

.gc_delete_button:hover {
    background-color: #fee2e2;
    transform: scale(1.06);
}

/* Mount Paths */
.mount_path_container {
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    gap: 5px;
    height: 388px;
    width: 751px;
    overflow-y: auto;
}

.mount_path_container .mount_path_add_btn {
    height: 10%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

.mount_path_container .mount_path_add_btn button {
    box-shadow: 0 1px 2px 0 var(--button-shadow-color), 0 1px 0 0 rgba(255, 255, 255, 0.1) inset;
    cursor: pointer;
    border: 1px solid var(--border-color);
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    background-color: var(--brand-color);
    color: #ffffff;
    padding: 4px 10px 4px 10px;
    border-radius: 4px;
    height: 32px;
    width: 200px;

}

.mount_path_container .mount_path_list {
    height: 80% !important;
}

.mount_path_container .mount_path_name {
    height: 10% !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.mount_path_container .mount_path_name span {
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.1px;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    font-size: 14px !important;
}

.mount_path_container .mount_path_name input[type="text"] {
    width: 80% !important;
    height: 32px;
}

.mount_path_container .mount_path_list input[type='text'] {
    height: 32px;
    width: 100%;
}

/* Modify font */
.modify_font_container {
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    gap: 5px;
    height: 388px;
    width: 751px;
    overflow-y: auto;
}

.modify_font_container .modify_font_add_btn {
    height: 10%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

.modify_font_container .modify_font_add_btn button {
    box-shadow: 0 1px 2px 0 var(--button-shadow-color), 0 1px 0 0 rgba(255, 255, 255, 0.1) inset;
    cursor: pointer;
    border: 1px solid var(--border-color);
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    background-color: var(--brand-color);
    color: #ffffff;
    padding: 4px 10px 4px 10px;
    border-radius: 4px;
    height: 32px;
    width: 200px;

}

.modify_font_container .modify_font_list {
    height: 80% !important;
}

.modify_font_container .modify_font_name {
    height: 10% !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.modify_font_container .modify_font_name span {
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.1px;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    font-size: 14px !important;
}

.modify_font_container .modify_font_name input[type="text"] {
    width: 80% !important;
    height: 32px;
}

.modify_font_container .modify_font_list input[type='text'] {
    height: 32px;
    width: 100%;
}

/* SMPP */
.smpp-config {
    max-width: 776px !important;
    width: 776px !important;
    min-width: 776px !important;
    height: 510px !important;
    max-height: 510px !important;
    min-height: 510px !important;
}

/* Global API */
.global_api,
.api_configurations {
    max-width: 776px !important;
    width: 776px !important;
    min-width: 776px !important;
    height: 510px !important;
    max-height: 510px !important;
    min-height: 510px !important;
}



.app-config-form .app-config-container {
    /* width: 750px; */
    height: 404px;
    overflow: auto;
}

.app-config-form .app-config-container::-webkit-scrollbar {
    width: 5px;
}

.app-config-form .app-config-container h1 {
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

.app-config-form .app-config-container p.subtitle {
    color: var(--app-config-text-muted);
    margin-bottom: 2rem;
    font-size: 0.95rem;
}

.app-config-form .app-config-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 16px !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.app-config-form .app-config-card-header {
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--app-config-text-main);
}

.app-config-form .grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.app-config-form .grid-full {
    grid-column: 1 / -1;
}

.app-config-form .input-group {
    margin-bottom: 1rem;
    position: relative;
}

.app-config-form label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--app-config-text-muted);
    margin-bottom: 0.4rem;
}

.app-config-form .input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    height: 32px;
}

.app-config-form .input-icon {
    position: absolute;
    left: 12px;
    color: var(--app-config-text-muted);
    pointer-events: none;
    width: 18px;
    height: 18px;
}

.app-config-form input[type='text'],
.app-config-form input[type='email'],
.app-config-form input[type='number'],
.app-config-form input[type='password'],
.app-config-form select {
    width: 100%;
    height: 32px;
}

.app-config-form input[type='text'],
.app-config-form input[type='email'],
.app-config-form input[type='number'],
.app-config-form input[type='password'],
.app-config-form select {
    border-radius: var(--app-config-radius-sm);
    font-size: 12px;
    transition: all 0.2s;
    background: #fff;
}


.app-config-form input.no-icon,
.app-config-form select.no-icon {
    padding-left: 1rem;
}

.app-config-form input:focus,
.app-config-form select:focus {
    outline: none;
    border-color: var(--app-config-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.app-config-form .segmented-control {
    display: flex;
    background: #f1f5f9;
    padding: 4px;
    border-radius: var(--app-config-radius-sm);
    border: 1px solid var(--app-config-border);
}

.app-config-form .segmented-control label {
    flex: 1;
    text-align: center;
    padding: 8px;
    margin: 0;
    font-size: 12px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
    color: var(--app-config-text-muted);
    font-weight: 500;
}

.app-config-form .segmented-control input {
    display: none;
}

.app-config-form .segmented-control input:checked+label {
    background: white;
    color: var(--app-config-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    font-weight: 600;
}

.app-config-form details {
    border: 1px solid var(--app-config-border);
    border-radius: var(--app-config-radius-sm);
    background: #fff;
    overflow: hidden;
}

.app-config-form summary {
    padding: 1rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--app-config-text-muted);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.app-config-form summary::after {
    content: '+';
    font-size: 1.2rem;
}

.app-config-form details[open] summary::after {
    content: '-';
}

.app-config-form details[open] summary {
    border-bottom: 1px solid var(--app-config-border);
    background: #f8fafc;
}

.app-config-form .details-content {
    padding: 1.5rem;
    background: #fafafa;
}

.app-config-form .toggle-password {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--app-config-text-muted);
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

/* Generic api */
.generic-api-settings .input-wrapper {
    gap: 10px;
}

.generic-api-settings .input-wrapper .settings_icon {
    width: 25px;
    height: 25px;
}


/* --- LAYOUT & BASE STYLES --- */
.api-config-form {
    color: #111827;
    /* --text-main */
    margin: 0;
    display: flex;
    justify-content: center;
    background-color: #f3f4f6;
    width: 750px;
    height: 404px;
    overflow: hidden;
    /* --bg-app */
}

.api-config-form-wrapper {
    display: flex;
    width: 100%;
    max-width: 1000px;
    background: #ffffff;
    /* --bg-surface */
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    height: 100%;
}

/* Sidebar Navigation */
.api-config-form-sidebar {
    width: 20%;
    background: #f9fafb;
    border-right: 1px solid #e5e7eb;
    /* --border */
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.api-config-form-nav-item {
    padding: 6px 10px;
    border-radius: 6px;
    /* --radius */
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: #202124;
    /* --text-secondary */
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.api-config-form-nav-item:hover {
    background: #e5e7eb;
    color: #111827;
}

.api-config-form-nav-item.active {
    background: #eef2ff;
    color: var(--brand-color);
    /* --primary */
    font-weight: 600;
}

/* Main Content Area */
.api-config-form-main-content {
    width: 80%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Sticky Top Header */
.api-config-form-header-bar {
    padding: 10px;
    border-bottom: 1px solid #e5e7eb;
    /* --border */
    background: #ffffff;
    z-index: 10;
    height: 20%;
}

.api-config-form-url-builder {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Content Scroll Area */
.api-config-form-scroll-area {
    height: 80%;
    padding: 10px 15px 40px 15px;
    overflow: auto;
    background: #fff;
}

.api-config-form-scroll-area::-webkit-scrollbar {
    width: 5px;
}

/* Sections */
.api-config-form-section-panel {
    display: none;
}

.api-config-form-section-panel.active {
    display: block;
}


.api-config-form h2 {
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.api-config-form h3 {
    font-size: 11px;
    font-weight: 600;
    color: #202124;
    text-transform: none;
    letter-spacing: 0.05em;
    margin: 8px 0 6px;
}

.api-config-form-method-select {
    appearance: auto;
    background: #fff;
    color: #1f2937;
    border: 1px solid #d1d5db;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    width: auto !important;
    min-width: 80px;
    transition: border-color 0.15s;
}

.api-config-form-method-select:focus {
    border-color: var(--brand-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Clean Inputs */
.api-config-form input[type="text"],
.api-config-form input[type="password"],
.api-config-form input[type="number"],
.api-config-form select {
    width: 100%;
    border: 1px solid #e5e7eb;
    /* --border */
    border-radius: 6px;
    font-size: 12px;
    transition: border 0.2s, box-shadow 0.2s;
}

.api-config-form input:focus,
.api-config-form select:focus {
    border-color: var(--brand-color);
    /* --primary */
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Grid Utility */
.api-config-form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.api-config-form-auth-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

/* Toggle Switch (UX Improvement over Dropdown) */
.api-config-form-toggle-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    margin-bottom: 8px;
    background: #fafafa;
}

.api-config-form-toggle-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

.api-config-form-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.api-config-form-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.api-config-form-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.api-config-form input:checked+.api-config-form-slider {
    background-color: var(--brand-color);
    ;
}

.api-config-form input:checked+.api-config-form-slider:before {
    transform: translateX(16px);
}

/* Auth Cards (Radio Group) */
.api-config-form-auth-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.api-config-form-auth-option {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    text-align: center;
    font-size: 12px;
    transition: all 0.2s;
}

.api-config-form-auth-option:hover {
    border-color: var(--brand-color);
    ;
    background: #eef2ff;
    color: #202124 !important;
}

.api-config-form-auth-option.selected {
    border-color: var(--brand-color);
    color: var(--brand-color);
    ;
    font-weight: 600;
    box-shadow: 0 0 0 2px #eef2ff;
}

/* Dynamic List (Headers/Mapping) */
.api-config-form-dynamic-list {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.api-config-form-list-header {
    background: #f9fafb;
    padding: 10px 15px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 12px;
    font-weight: 600;
    color: #202124;
    display: flex;
}

.api-config-form-list-row {
    padding: 10px 15px;
    border-bottom: 1px solid #e5e7eb;
    display: grid;
    grid-template-columns: 1fr 1fr 10%;
    gap: 5px;
    align-items: center;
    background: #fff;
}

.api-config-form-list-row:last-child {
    border-bottom: none;
}

.api-config-form-list-row3 {
    padding: 10px 15px;
    border-bottom: 1px solid #e5e7eb;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 10%;
    gap: 5px;
    align-items: center;
    background: #fff;
}

.api-config-form-list-row3:last-child {
    border-bottom: none;
}

.api-config-form-list-row-headers {
    padding: 10px 15px;
    border-bottom: 1px solid #e5e7eb;
    display: grid;
    grid-template-columns: 60px 1fr 1fr 40px;
    gap: 10px;
    align-items: center;
    background: #fff;
}

.api-config-form-list-row-headers:last-child {
    border-bottom: none;
}

.api-config-form-list-row-mapping {
    padding: 10px 15px;
    border-bottom: 1px solid #e5e7eb;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 40px;
    gap: 10px;
    align-items: center;
    background: #fff;
}

.api-config-form-list-row-mapping:last-child {
    border-bottom: none;
}

/* Buttons */
.api-config-form-btn-ghost {
    background: transparent;
    border: none;
    color: #202124;
    cursor: pointer;
}

.api-config-form-btn-ghost:hover {
    color: #ef4444;
}

.api-config-form-btn-add {
    margin-top: 10px;
    background: transparent;
    border: 1px dashed #e5e7eb;
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    color: #202124;
    cursor: pointer;
    font-size: 13px;
}

.api-config-form-btn-add:hover {
    border-color: var(--brand-color);
    ;
    color: var(--brand-color);
    ;
    background: #fdfdfd;
}

.api-config-form-btn-save {
    background: var(--brand-color);
    ;
    color: white;
    padding: 10px 24px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    float: right;
    margin-top: 20px;
}

/* Suppress outer popup scroll — inner .api-config-form-scroll-area handles scrolling */
.api_configurations .dialog_content {
    overflow: hidden !important;
    padding: 0 !important;
}

/* ── Body Tab ──────────────────────────────────────────────── */
/* ── Body tab: type bar ─────────────────────────────────────────── */
.acb-type-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.acb-radio-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.acb-radio-label input[type="radio"] {
    display: none;
}

.acb-radio-label:hover {
    background: #e5e7eb;
    color: #374151;
}

.acb-radio-label.acb-radio-active {
    background: #fff;
    color: var(--brand-color, var(--brand-color));
    border-color: var(--brand-color, var(--brand-color));
    font-weight: 600;
}

.acb-fmt-select {
    margin-left: 4px;
    padding: 3px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 12px;
    background: #fff;
    color: #374151;
    cursor: pointer;
    outline: none;
    width: auto !important;
    /* override global .api-config-form select { width:100% } */
    flex-shrink: 0;
}

/* ── Body panels ─────────────────────────────────────────────────── */
.acb-panel {
    min-height: 140px;
}

/* None panel */
.acb-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 140px;
    border: 1.5px dashed #d1d5db;
    border-radius: 10px;
    background: #f9fafb;
    color: #9ca3af;
    font-size: 13px;
}

/* Form panel */
.acb-grid-header {
    display: grid;
    grid-template-columns: 36px 1fr 1fr 150px 32px;
    gap: 6px;
    align-items: center;
    padding: 6px 10px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 6px 6px 0 0;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: none;
    letter-spacing: 0.04em;
}

.acb-col-state {
    text-align: center;
}

.acb-rows-container {
    border: 1px solid #e5e7eb;
    border-top: none;
    border-radius: 0 0 6px 6px;
    overflow: visible;
}

.acb-form-row {
    display: grid;
    grid-template-columns: 36px 1fr 1fr 150px 32px;
    gap: 6px;
    align-items: center;
    padding: 6px 10px;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.1s;
}

.acb-form-row:last-child {
    border-bottom: none;
    border-radius: 0 0 6px 6px;
}

.acb-form-row:hover {
    background: #f9fafb;
}

.acb-form-actions {
    margin-bottom: 10px;
}

.acb-row-state {
    display: block;
    margin: 0 auto;
    accent-color: var(--brand-color, var(--brand-color));
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.acb-row-input {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    font-size: 12px;
    background: #fff;
    color: #1f2937;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.acb-row-input:focus {
    border-color: var(--brand-color, var(--brand-color));
}

.acb-row-select {
    width: 100%;
    padding: 5px 6px;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    font-size: 12px;
    background: #fff;
    color: #1f2937;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.acb-row-select:focus {
    border-color: var(--brand-color, var(--brand-color));
}

/* ── Combo (value column) ─────────────────────────────────────────── */
.acb-combo-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    background: #fff;
    transition: border-color 0.15s;
    box-sizing: border-box;
    width: 100%;
}

.acb-combo-wrapper:focus-within {
    border-color: var(--brand-color, var(--brand-color));
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .12);
}

.acb-combo-input {
    flex: 1;
    min-width: 0;
    padding: 5px 4px 5px 8px;
    border: none;
    background: transparent;
    font-size: 12px;
    color: #1f2937;
    outline: none;
    box-sizing: border-box;
}

.acb-combo-input::placeholder {
    color: #b0b7c3;
}

.acb-combo-chevron {
    display: flex;
    align-items: center;
    padding: 0 7px;
    cursor: pointer;
    color: #9ca3af;
    flex-shrink: 0;
    transition: color 0.15s;
}

.acb-combo-wrapper:focus-within .acb-combo-chevron,
.acb-combo-chevron:hover {
    color: #6b7280;
}

.acb-combo-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 9999;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .10), 0 2px 6px rgba(0, 0, 0, .06);
    max-height: 210px;
    overflow-y: auto;
    padding: 4px 0;
}

.acb-combo-dropdown.acb-combo-open {
    display: block;
}

.acb-combo-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 12px;
    cursor: pointer;
    gap: 8px;
    transition: background 0.1s;
}

.acb-combo-option:hover {
    background: #eff6ff;
}

.acb-combo-option.acb-combo-selected {
    background: #eff6ff;
}

.acb-combo-opt-name {
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
}

.acb-combo-opt-type {
    font-size: 10px;
    font-weight: 500;
    color: #6b7280;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1px 7px;
    white-space: nowrap;
    flex-shrink: 0;
}

.acb-combo-empty {
    padding: 10px 12px;
    font-size: 12px;
    color: #9ca3af;
    text-align: center;
    font-style: italic;
}

.acb-combo-dropdown::-webkit-scrollbar {
    width: 4px;
}

.acb-combo-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.acb-combo-dropdown::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

.acb-row-del {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    color: #9ca3af;
    transition: color 0.15s, background 0.15s;
}

.acb-row-del:hover {
    color: #ef4444;
    background: #fef2f2;
}

/* Form panel action buttons */
.acb-form-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.acb-btn-add {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--brand-color, var(--brand-color));
    border-radius: 5px;
    background: transparent;
    color: var(--brand-color, var(--brand-color));
    cursor: pointer;
    transition: background 0.15s;
}

.acb-btn-add:hover {
    background: #eff6ff;
}

.acb-btn-del {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #fca5a5;
    border-radius: 5px;
    background: transparent;
    color: #ef4444;
    cursor: pointer;
    transition: background 0.15s;
}

.acb-btn-del:hover {
    background: #fef2f2;
}

/* ── Raw panel ───────────────────────────────────────────────────── */
.acb-raw-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px 8px 0 0;
    flex-wrap: wrap;
}

.acb-metadata-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.acb-label {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
}

.acb-meta-select {
    padding: 5px 8px;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    font-size: 12px;
    background: #fff;
    color: #374151;
    cursor: pointer;
    outline: none;
    min-width: 140px;
    transition: border-color 0.15s;
}

.acb-meta-select:focus {
    border-color: var(--brand-color, var(--brand-color));
}

/* Field type badge in raw toolbar */
.acb-field-type-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    min-width: 16px;
    text-align: center;
}

/* Type badge colour tokens */
.acb-type-text {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

.acb-type-date {
    background: #dbeafe;
    color: var(--brand-color);
    border: 1px solid #bfdbfe;
}

.acb-type-numeric {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.acb-raw-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.acb-btn-insert {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    background: #fff;
    color: #374151;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.acb-btn-insert:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.acb-btn-ai {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    border-radius: 5px;
    background: linear-gradient(135deg, var(--brand-color, var(--brand-color)) 0%, #7c3aed 100%);
    color: #fff;
    cursor: pointer;
    transition: opacity 0.15s;
    white-space: nowrap;
}

.acb-btn-ai:hover {
    opacity: 0.88;
}

.acb-raw-textarea {
    width: 100%;
    min-height: 180px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-top: none;
    border-radius: 0 0 8px 8px;
    font-size: 13px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    resize: vertical;
    background: #fff;
    color: #1f2937;
    box-sizing: border-box;
    line-height: 1.6;
    outline: none;
    transition: border-color 0.2s;
}

.acb-raw-textarea:focus {
    border-color: var(--brand-color, var(--brand-color));
    background: #fff;
}

/* ================================================================
   MODERN FORM STYLES FOR APPLICATION CONFIGURATION POPUPS
   ================================================================ */

/* 1. Database Connection Popup */
.global_config_db_container {
    padding: 16px 20px;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

.global_config_db_data {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.global_config_db_params {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.global_config_db_params label {
    font-size: 11.5px;
    font-weight: 600;
    color: #4a5568;
    margin: 0;
    text-transform: capitalize !important;
}

.global_config_db_param {
    width: 100% !important;
    height: 32px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 5px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    font-family: 'Poppins', Arial, Helvetica, sans-serif !important;
    background-color: #ffffff !important;
    color: #1a202c !important;
    box-sizing: border-box !important;
}

.global_config_db_param:focus {
    border-color: var(--brand-color, #3b5bdb) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(59, 91, 219, 0.12) !important;
}

.global_config_db_buttons {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    justify-content: flex-end;
}

#global_config_db_advanced,
#global_config_db_test {
    height: 32px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    font-family: 'Poppins', Arial, Helvetica, sans-serif !important;
}

#global_config_db_advanced {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
}

#global_config_db_test {
    background: var(--brand-color, #3b5bdb) !important;
    border: none !important;
    color: #ffffff !important;
}

/* 2. Mount Paths Popup */
.mount_path_container {
    padding: 16px 20px;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mount_path_name {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mount_path_name span {
    font-size: 11.5px;
    font-weight: 600;
    color: #4a5568;
}

.mount_path_name input {
    height: 32px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 5px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.mount_path_add_btn button {
    height: 28px !important;
    padding: 0 12px !important;
    background: var(--brand-color, #3b5bdb) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 5px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

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

.mount_path_list table th {
    font-size: 11px;
    font-weight: 600;
    color: #4a5568;
    padding: 6px;
    border-bottom: 1.5px solid #e2e8f0;
    text-align: left;
}

.mount_path_list table td input {
    width: 100% !important;
    height: 28px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 5px !important;
    padding: 4px 8px !important;
}

/* 3. Digital Signatures Popup */
.dig_sig_container {
    padding: 16px 20px;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dig_sig_name,
.dig_sig_inputs_data,
.dig_sig_sign_box_inputs {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 8px;
}

.dig_sig_container span {
    font-size: 11px;
    font-weight: 600;
    color: #4a5568;
}

.sig_field {
    height: 32px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 5px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#choose_pfx_action_btn {
    height: 28px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    border-radius: 5px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

/* Inline Loader Overlay */
.gc-inline-loader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    z-index: 10;
}

.gc-inline-loader {
    width: 26px;
    height: 26px;
    border: 2.5px solid #e2e8f0;
    border-top-color: var(--brand-color, #3b5bdb);
    border-radius: 50%;
    animation: gc-spin 0.6s linear infinite;
}

.gc-inline-loader-overlay p {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

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

/* Tab Dirty Status Indicators */
.global_items {
    position: relative !important;
}

.gc-dirty-marker {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 6px !important;
    height: 6px !important;
    background-color: #ef4444 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 6px #ef4444 !important;
}

/* Overview Dashboard */
.gc-dashboard {
    padding: 24px !important;
    font-family: 'Poppins', sans-serif !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    background: #fafafb !important;
    min-height: 100% !important;
    box-sizing: border-box !important;
}

.gc-dashboard-welcome {
    background: linear-gradient(135deg, #3b5bdb 0%, #4c6ef5 100%) !important;
    color: #ffffff !important;
    padding: 24px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(59, 91, 219, 0.15) !important;
}

.gc-dashboard-welcome h1 {
    margin: 0 0 8px 0 !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
}

.gc-dashboard-welcome p {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    opacity: 0.9 !important;
}

.gc-dashboard-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 16px !important;
}

.gc-dashboard-card {
    background: #ffffff !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    padding: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    position: relative !important;
}

.gc-dashboard-card:hover {
    transform: translateY(-3px) !important;
    border-color: #3b5bdb !important;
    box-shadow: 0 8px 24px rgba(59, 91, 219, 0.08) !important;
}

.gc-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.gc-card-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
    background: #edf2ff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Simple visual mock representation of icons inside cards */
.gc-card-icon::before {
    content: "" !important;
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    background-color: #3b5bdb !important;
    mask-size: contain !important;
    mask-repeat: no-repeat !important;
    mask-position: center !important;
}

.gc-card-icon.smtp::before {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>');
}

.gc-card-icon.db::before {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/><path d="M3 12c0 1.66 4 3 9 3s9-1.34 9-3"/></svg>');
}

.gc-card-icon.ip::before {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"/><rect x="2" y="14" width="20" height="8" rx="2" ry="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/></svg>');
}

.gc-card-icon.mount::before {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>');
}

.gc-card-icon.signature::before {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>');
}

.gc-card-icon.sms::before {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>');
}

.gc-card-icon.api::before {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>');
}

.gc-card-icon.font::before {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" y1="20" x2="15" y2="20"/><line x1="12" y1="4" x2="12" y2="20"/></svg>');
}

.gc-card-icon.function::before {
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>');
}

.gc-card-header h3 {
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #2b303a !important;
    flex-grow: 1 !important;
}

.gc-card-badge {
    background: #fee2e2 !important;
    color: #ef4444 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    text-transform: none !important;
    letter-spacing: 0.5px !important;
}

.gc-dashboard-card p {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: #6b7280 !important;
    flex-grow: 1 !important;
}

.gc-card-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-top: 1px solid #f1f3f5 !important;
    padding-top: 12px !important;
    margin-top: 4px !important;
}

.gc-card-meta span {
    font-size: 11px !important;
    color: #868e96 !important;
}

.gc-card-action {
    border: none !important;
    background: transparent !important;
    color: #3b5bdb !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: color 0.15s !important;
}

.gc-card-action:hover {
    color: #1c7ed6 !important;
}

/* Scroll Containers for Sub-forms and Lists */
.global_config_db_container,
.digital_sig_container,
.ipaddress_container,
.mount_path_container,
.smpp_settings_container,
.smtp_settings_container,
.global_api_container,
.modify_font_container,
.function_config_container {
    max-height: 440px !important;
    overflow-y: auto !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
}

.global_config_db_container::-webkit-scrollbar,
.digital_sig_container::-webkit-scrollbar,
.ipaddress_container::-webkit-scrollbar,
.mount_path_container::-webkit-scrollbar,
.smpp_settings_container::-webkit-scrollbar,
.smtp_settings_container::-webkit-scrollbar,
.global_api_container::-webkit-scrollbar,
.modify_font_container::-webkit-scrollbar,
.function_config_container::-webkit-scrollbar {
    width: 6px !important;
}

.global_config_db_container::-webkit-scrollbar-thumb,
.digital_sig_container::-webkit-scrollbar-thumb,
.ipaddress_container::-webkit-scrollbar-thumb,
.mount_path_container::-webkit-scrollbar-thumb,
.smpp_settings_container::-webkit-scrollbar-thumb,
.smtp_settings_container::-webkit-scrollbar-thumb,
.global_api_container::-webkit-scrollbar-thumb,
.modify_font_container::-webkit-scrollbar-thumb,
.function_config_container::-webkit-scrollbar-thumb {
    background-color: #cbd5e1 !important;
    border-radius: 3px !important;
}

/* ================================================================
   MODERN PREMIUM SIDEBAR & OVERALL DIALOG STYLING
   ================================================================ */

.global_config,
.global_config_container,
.global_config_container *,
.global_config_db,
.global_config_db * {
    font-family: inherit !important;
}

/* Sidebar styles modernization */
.gc_leftside {
    width: 230px !important;
    min-width: 230px !important;
    max-width: 230px !important;
}

.gc_leftside ul li {
    padding: 0 !important;
}

.gc_leftside ul li .global_items {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    border-radius: 6px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    color: #475569 !important;
    transition: all 0.2s ease !important;
    margin: 4px 10px !important;
}

.gc_leftside ul li .global_items:hover {
    background: #f8fafc !important;
    color: #0f172a !important;
}

.gc_leftside ul li .global_items.selected {
    background: #eff6ff !important;
    border-color: var(--brand-color) !important;
    color: var(--brand-color) !important;
    box-shadow: none !important;
}

.gc-tab-icon {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    color: currentColor !important;
}

.global_items_names {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    pointer-events: none !important;
    align-items: flex-start !important;
}

.gc-tab-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: currentColor !important;
    line-height: 1.2 !important;
}

.gc-tab-subtitle {
    font-size: 10px !important;
    font-weight: 400 !important;
    color: #64748b !important;
    line-height: 1.2 !important;
    display: block !important;
}

.global_items.selected .gc-tab-subtitle {
    color: var(--brand-color) !important;
}

/* Active dot style */
.gc_leftside ul li .global_items.selected::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    background-color: var(--brand-color);
    border-radius: 50%;
    margin-left: auto;
    flex-shrink: 0;
}

/* Dirty Marker */
.gc_leftside ul li .global_items .gc-dirty-marker {
    width: 6px !important;
    height: 6px !important;
    background-color: #f97316 !important;
    border-radius: 50% !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.2) !important;
}

/* Sidebar Search Box */
.gc-sidebar-search {
    padding: 12px 14px !important;
    position: relative !important;
}

.gc-sidebar-search-input {
    width: 100% !important;
    height: 32px !important;
    padding: 6px 12px 6px 28px !important;
    font-size: 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    outline: none !important;
    box-sizing: border-box !important;
    background: #f8fafc !important;
    color: #1e293b !important;
    transition: all 0.15s ease !important;
}

.gc-sidebar-search-input:focus {
    background: #ffffff !important;
    border-color: var(--brand-color) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.gc-sidebar-search-icon {
    position: absolute !important;
    left: 22px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 13px !important;
    height: 13px !important;
    color: #94a3b8 !important;
    pointer-events: none !important;
}

.gc-sidebar-search-shortcut {
    position: absolute !important;
    right: 22px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 10px !important;
    color: #94a3b8 !important;
    pointer-events: none !important;
    border: 1px solid #e2e8f0 !important;
    padding: 1px 4px !important;
    border-radius: 3px !important;
    background: #f8fafc !important;
}

/* Guide Box in left sidebar */
.gc-how-it-works {
    margin-top: auto !important;
    padding: 14px 16px !important;
    border-top: 1px solid #f1f5f9 !important;
    display: flex !important;
    gap: 10px !important;
    background: #fafafa !important;
}

.gc-how-icon {
    width: 16px !important;
    height: 16px !important;
    color: #64748b !important;
    flex-shrink: 0 !important;
}

.gc-how-text {
    font-size: 11px !important;
    line-height: 1.4 !important;
    color: #64748b !important;
}

.gc-how-text strong {
    color: #334155 !important;
    display: block !important;
    margin-bottom: 2px !important;
    font-weight: 600 !important;
}

.gc-how-text p {
    margin: 0 !important;
    color: #64748b !important;
}

/* Modern Dialog Overrides */
.global_config {
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid #e2e8f0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.global_config h2 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    padding: 18px 24px 8px 24px !important;
    margin: 0 !important;
    background: #ffffff !important;
    border: none !important;
}

.global_config [data-id="popup_comment"] {
    display: block !important;
    font-size: 12.5px !important;
    color: #64748b !important;
    margin: 0 !important;
    padding: 0 24px 14px 24px !important;
    float: none !important;
    text-align: left !important;
    border-bottom: 1px solid #f1f5f9 !important;
    line-height: 1.5 !important;
}

.global_config .close {
    top: 18px !important;
    right: 20px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 18L18 6M6 6l12 12'/%3E%3C/svg%3E") no-repeat center !important;
    background-size: 16px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    border: none !important;
    transition: background-color 0.15s !important;
}

.global_config .close:hover {
    background-color: #f1f5f9 !important;
}

.global_config .buttons {
    padding: 12px 24px !important;
    background: #f8fafc !important;
    border-top: 1px solid #f1f5f9 !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin: 0 !important;
    border-radius: 0 0 12px 12px !important;
}

.global_config .buttons button {
    height: 36px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
}

.global_config .buttons button[data-id="popup_cancel"] {
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #374151 !important;
}

.global_config .buttons button[data-id="popup_cancel"]:hover {
    background: #f9fafb !important;
    border-color: #c5c9d1 !important;
}

.global_config .buttons button[data-id="popup_ok"] {
    background: var(--brand-color) !important;
    border: 1px solid var(--brand-color) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.global_config .buttons button[data-id="popup_ok"]:hover {
    background: var(--brand-color) !important;
    border-color: var(--brand-color) !important;
}

/* Hide legacy elements & style popup wrap */
#popups .popup.global_config h2[data-id="popup_title"],
#popups .popup.global_config [data-id="popup_comment"],
#popups .popup.global_config .buttons {
    display: none !important;
}

#popups .popup.global_config {
    width: 1100px !important;
    max-width: 95vw !important;
    height: 700px !important;
    max-height: 90vh !important;
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

#popups .popup.global_config .dialog_content {
    padding: 0 !important;
    margin: 0 !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    flex: 1 !important;
}

/* Header style modernization */
#popups .popup.global_config>.title {
    display: none !important;
}

#popups .popup.global_config .close {
    top: 24px !important;
    right: 24px !important;
    margin: 0 !important;
    z-index: 10 !important;
}

.gc-header-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
}

.gc-modern-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 24px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e8ecf4 !important;
    height: 72px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

.gc-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.gc-header-icon-box {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    background: #f4f6fb !important;
    border-radius: 8px !important;
    color: var(--brand-color) !important;
}

.gc-gear-icon {
    width: 20px !important;
    height: 20px !important;
    animation: gc-spin 12s linear infinite;
}

@keyframes gc-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.gc-header-titles h1 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    margin: 0 !important;
}

.gc-header-titles p {
    font-size: 11px !important;
    color: #64748b !important;
    margin: 2px 0 0 0 !important;
}

.gc-header-right-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-right: 48px !important;
}

.gc-unsaved-status-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-right: 12px !important;
    background: #fff8f5 !important;
    border: 1px solid #ffebe3 !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
}

.gc-unsaved-dot {
    width: 6px !important;
    height: 6px !important;
    background-color: #f97316 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.2) !important;
}

.gc-unsaved-text {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #c2410c !important;
    white-space: nowrap !important;
}

.gc-unsaved-header-pills {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    border-left: 1px solid #ffebe3 !important;
    padding-left: 10px !important;
    margin-left: 4px !important;
}

/* Modern Layout Buttons */
.gc-btn-outline {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 36px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.gc-btn-outline:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #1e293b !important;
}

.gc-btn-solid {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 36px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    background: var(--brand-color) !important;
    border: 1px solid var(--brand-color) !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.gc-btn-solid:hover {
    background: var(--brand-color) !important;
    border-color: var(--brand-color) !important;
}

.btn-icon {
    width: 14px !important;
    height: 14px !important;
    color: currentColor !important;
}

/* Sidebar structure details */
.gc-sidebar-search {
    padding: 12px 14px !important;
    position: relative !important;
}

.gc-sidebar-search-input {
    width: 100% !important;
    height: 34px !important;
    padding: 6px 32px 6px 32px !important;
    font-size: 12.5px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    outline: none !important;
    background: #f8fafc !important;
    color: #1e293b !important;
    box-sizing: border-box !important;
}

.gc-sidebar-search-input::-webkit-search-cancel-button,
.gc-sidebar-search-input::-webkit-search-results-button {
    display: none !important;
    -webkit-appearance: none !important;
}

.gc-sidebar-search-icon {
    position: absolute !important;
    left: 24px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 14px !important;
    height: 14px !important;
    pointer-events: none !important;
}

.gc-sidebar-search-clear {
    position: absolute !important;
    right: 22px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 14px !important;
    height: 14px !important;
    cursor: pointer !important;
    color: #94a3b8 !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: all 0.2s !important;
}

.gc-sidebar-search-clear:hover {
    color: #475569 !important;
    background: #e2e8f0 !important;
}

/* Info Tooltip in Header */
.gc-header-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.gc-info-tooltip-wrap {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    cursor: help !important;
}

.gc-info-icon {
    width: 14px !important;
    height: 14px !important;
    color: #94a3b8 !important;
    transition: color 0.15s !important;
}

.gc-info-tooltip-wrap:hover .gc-info-icon {
    color: var(--brand-color) !important;
}

.gc-info-tooltip-content {
    display: none !important;
    position: absolute !important;
    top: 24px !important;
    left: 0 !important;
    width: 260px !important;
    background: #ffffff !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
    padding: 12px !important;
    border-radius: 6px !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1) !important;
    font-size: 11.5px !important;
    line-height: 1.5 !important;
    z-index: 9999 !important;
    text-transform: none !important;
}

.gc-info-tooltip-wrap:hover .gc-info-tooltip-content {
    display: block !important;
}

.gc-info-tooltip-content strong {
    display: block !important;
    color: #0f172a !important;
    margin-bottom: 4px !important;
    font-weight: 600 !important;
}

.gc-info-tooltip-content p {
    margin: 0 !important;
    color: #475569 !important;
}

.gc-tooltip-blue-link {
    color: var(--brand-color) !important;
    font-weight: 600 !important;
}

/* Right Content Area Header & Table layout rules */
.gc-modern-modal {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.global_config_container {
    display: flex !important;
    flex: 1 !important;
    height: auto !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

.gc_rightside {
    flex: 1 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.global_config_table {
    display: flex;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.gc-module-header {
    background: #ffffff !important;
    padding: 18px 24px !important;
    border: none !important;
    border-radius: 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 14px !important;
    flex-shrink: 0 !important;
}

.gc-module-header-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.gc-module-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.gc-module-header-icon-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    background: #eff6ff !important;
    color: var(--brand-color) !important;
    border-radius: 6px !important;
}

.gc-large-module-icon {
    width: 18px !important;
    height: 18px !important;
    color: currentColor !important;
}

.gc-module-header-info h2 {
    display: block !important;
    position: static !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    margin: 0 0 -2px 0 !important;
    padding: 0 !important;
    border: none !important;
    line-height: 1.2 !important;
}

.gc-module-header-info p {
    font-size: 11px !important;
    color: #64748b !important;
    margin: -4px 0 0 0 !important;
    line-height: 1.2 !important;
}

#popups .gc-modern-modal .gc-module-header-info h2 {
    height: 26px;
}

.gc-add-btn-outline {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 32px !important;
    padding: 0 12px !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    color: var(--brand-color) !important;
    background: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.gc-add-btn-outline:hover {
    background: #dbeafe !important;
    border-color: #93c5fd !important;
    color: var(--brand-color) !important;
}

.gc-module-header-bottom {
    display: flex !important;
}

.gc-search-box-modern {
    position: relative !important;
    width: 260px !important;
    margin: 0 !important;
}

.gc-search-input-modern {
    width: 100% !important;
    height: 32px !important;
    padding: 6px 30px 6px 32px !important;
    font-size: 12px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    outline: none !important;
    background: #f8fafc !important;
    color: #1e293b !important;
    box-sizing: border-box !important;
}

.gc-search-input-modern::-webkit-search-cancel-button,
.gc-search-input-modern::-webkit-search-results-button {
    display: none !important;
    -webkit-appearance: none !important;
}

.gc-search-input-modern:focus {
    background: #ffffff !important;
    border-color: var(--brand-color) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.gc-search-box-icon {
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #94a3b8 !important;
    pointer-events: none !important;
}

.gc-search-clear-modern {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 14px !important;
    height: 14px !important;
    cursor: pointer !important;
    color: #94a3b8 !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: all 0.2s !important;
}

.gc-search-clear-modern:hover {
    color: #475569 !important;
    background: #e2e8f0 !important;
}

.gc-table-wrap {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 0 24px !important;
}

.gc-table-wrap::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

.gc-table-wrap::-webkit-scrollbar-thumb {
    background-color: #cbd5e1 !important;
    border-radius: 3px !important;
}



/* =============================================================================
   RESPONSIVENESS, SCROLL & ALIGNMENT OVERRIDES (PREMIUM LIGHT MODERNIZATION)
   ============================================================================= */

/* 1. Centering & Responsive sizing for the main popup modal */
#popups .popup.global_config {
    width: 1100px !important;
    max-width: 95vw !important;
    height: 700px !important;
    max-height: 90vh !important;
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
    padding: 0 !important;
}

/* 2. Remove legacy header conflict spacing & fix close button position */
#popups .popup.global_config .close {
    position: absolute !important;
    top: 22px !important;
    right: 24px !important;
    z-index: 100 !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 18L18 6M6 6l12 12'/%3E%3C/svg%3E") no-repeat center !important;
    background-size: 20px !important;
    border: none !important;
    cursor: pointer !important;
    transition: background-color 0.15s, color 0.15s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#popups .popup.global_config .close:hover {
    background-color: #f1f5f9 !important;
}

/* 3. Allow inner containers to shrink to prevent page/modal scrollbars */
.global_config_container {
    height: auto !important;
    min-height: 0 !important;
    flex: 1 !important;
}

.gc_rightside {
    height: 100% !important;
    min-height: 0 !important;
    flex: 1 !important;
}

.global_config_table {
    height: 100% !important;
    min-height: 0 !important;
    flex: 1 !important;
}

.gc-table-wrap {
    min-height: 0 !important;
    flex: 1 !important;
    border: none !important;
}

/* 4. Sidebar layout robustness & scroll */
.gc_leftside {
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

#gc_types {
    flex: 1 !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

#gc_types ul {
    flex: 1 !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    list-style: none !important;
}

/* 5. Padding Alignment */
.gc-pagination {
    padding: 10px 24px !important;
}

/* 6. Columns Header and Content alignment */
#popups .popup .dialog_content table.gc-table thead tr th:last-child,
#popups .popup .dialog_content table.gc-table tbody tr td:last-child,
.gc-table th:last-child,
.gc-table td:last-child {
    width: 130px !important;
    max-width: 130px !important;
    min-width: 130px !important;
    text-align: left !important;
}

.gc_buttons {
    justify-content: flex-start !important;
}

.global_config [data-id="params_content"] {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.global_config [data-id="preview_content"] {
    display: none !important;
}


/* Modern Footer layout */
.gc-modern-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 14px 24px !important;
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    flex-shrink: 0 !important;
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

.gc-footer-left {
    display: flex !important;
    align-items: center !important;
}

.gc-footer-info-text {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    margin-left: 8px !important;
}

.gc-footer-tooltip {
    bottom: 30px !important;
    top: auto !important;
}

.gc-footer-right-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* ── Unsaved Changes Dropdown ── */
.gc-unsaved-status-header {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    position: relative !important;
    cursor: pointer !important;
    padding: 5px 10px !important;
    border-radius: 20px !important;
    background: #fff5f0 !important;
    border: 1px solid #fed7aa !important;
    user-select: none !important;
    transition: background 0.15s !important;
}

.gc-unsaved-status-header:hover {
    background: #ffedd5 !important;
}

.gc-unsaved-chevron {
    color: #ea580c !important;
    transition: transform 0.2s ease !important;
    flex-shrink: 0 !important;
}

.gc-unsaved-status-header.gc-dropdown-open .gc-unsaved-chevron {
    transform: rotate(180deg) !important;
}

.gc-unsaved-dropdown {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    min-width: 240px !important;
    max-width: 320px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06) !important;
    z-index: 9999 !important;
    overflow: hidden !important;
}

.gc-unsaved-status-header.gc-dropdown-open .gc-unsaved-dropdown {
    display: block !important;
}

.gc-unsaved-dropdown-header {
    padding: 9px 14px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0.08em !important;
    color: #94a3b8 !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.gc-unsaved-dropdown-pills {
    padding: 6px 0 !important;
    max-height: 280px !important;
    overflow-y: auto !important;
}

.gc-unsaved-dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 14px !important;
    transition: background 0.1s !important;
}

.gc-unsaved-dropdown-item:hover {
    background: #f8fafc !important;
}

.gc-unsaved-item-dot {
    width: 7px !important;
    height: 7px !important;
    background: #f97316 !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

.gc-unsaved-item-name {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    flex: 1 !important;
}

.gc-unsaved-item-badge {
    font-size: 10.5px !important;
    font-weight: 600 !important;
    color: #ea580c !important;
    background: #fff7ed !important;
    border: 1px solid #fed7aa !important;
    border-radius: 10px !important;
    padding: 1px 7px !important;
    white-space: nowrap !important;
}

.gc-unsaved-dropdown-pills::-webkit-scrollbar {
    width: 3px !important;
}

.gc-unsaved-dropdown-pills::-webkit-scrollbar-thumb {
    background: #e2e8f0 !important;
    border-radius: 3px !important;
}

/* Unsaved Changes Close / Discard Warning Modal */
.gc-close-warn-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.gc-close-warn-visible {
    opacity: 1;
    visibility: visible;
}

.gc-close-warn-modal {
    background: #ffffff;
    border-radius: 12px;
    width: 400px;
    max-width: 90vw;
    padding: 24px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    transform: scale(0.95) translateY(10px);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.gc-close-warn-visible .gc-close-warn-modal {
    transform: scale(1) translateY(0);
}

.gc-close-warn-icon-wrap {
    width: 48px;
    height: 48px;
    background: #fef2f2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    box-shadow: 0 0 0 6px #fff5f5;
}

.gc-close-warn-icon {
    width: 24px;
    height: 24px;
    color: #ef4444;
}

.gc-close-warn-title {
    margin: 0 0 8px 0;
    color: #111827;
    font-size: 18px;
    font-weight: 600;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

.gc-close-warn-body {
    margin: 0 0 16px 0;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.5;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

.gc-close-warn-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 24px;
    width: 100%;
    max-height: 80px;
    overflow-y: auto;
}

.gc-close-warn-pill {
    background: #f3f4f6;
    color: #374151;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #e5e7eb;
}

.gc-close-warn-actions {
    display: flex;
    gap: 12px;
    width: 100%;
}

.gc-close-warn-btn-keep {
    flex: 1;
    padding: 10px 16px;
    background: #ffffff;
    border: 1px solid #d1d5db;
    color: #374151;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

.gc-close-warn-btn-keep:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

.gc-close-warn-btn-discard {
    flex: 1;
    padding: 10px 16px;
    background: #ef4444;
    border: 1px solid #ef4444;
    color: #ffffff;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.gc-unsaved-dropdown-pills {
    padding: 6px 0 !important;
    max-height: 280px !important;
    overflow-y: auto !important;
}

.gc-unsaved-dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 14px !important;
    transition: background 0.1s !important;
}

.gc-unsaved-dropdown-item:hover {
    background: #f8fafc !important;
}

.gc-unsaved-item-dot {
    width: 7px !important;
    height: 7px !important;
    background: #f97316 !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

.gc-unsaved-item-name {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    flex: 1 !important;
}

.gc-unsaved-item-badge {
    font-size: 10.5px !important;
    font-weight: 600 !important;
    color: #ea580c !important;
    background: #fff7ed !important;
    border: 1px solid #fed7aa !important;
    border-radius: 10px !important;
    padding: 1px 7px !important;
    white-space: nowrap !important;
}

.gc-unsaved-dropdown-pills::-webkit-scrollbar {
    width: 3px !important;
}

.gc-unsaved-dropdown-pills::-webkit-scrollbar-thumb {
    background: #e2e8f0 !important;
    border-radius: 3px !important;
}

/* Unsaved Changes Close / Discard Warning Modal */
.gc-close-warn-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.gc-close-warn-visible {
    opacity: 1;
    visibility: visible;
}

.gc-close-warn-modal {
    background: #ffffff;
    border-radius: 12px;
    width: 400px;
    max-width: 90vw;
    padding: 24px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    transform: scale(0.95) translateY(10px);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.gc-close-warn-visible .gc-close-warn-modal {
    transform: scale(1) translateY(0);
}

.gc-close-warn-icon-wrap {
    width: 48px;
    height: 48px;
    background: #fef2f2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    box-shadow: 0 0 0 6px #fff5f5;
}

.gc-close-warn-icon {
    width: 24px;
    height: 24px;
    color: #ef4444;
}

.gc-close-warn-title {
    margin: 0 0 8px 0;
    color: #111827;
    font-size: 18px;
    font-weight: 600;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

.gc-close-warn-body {
    margin: 0 0 16px 0;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.5;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

.gc-close-warn-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 24px;
    width: 100%;
    max-height: 80px;
    overflow-y: auto;
}

.gc-close-warn-pill {
    background: #f3f4f6;
    color: #374151;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #e5e7eb;
}

.gc-close-warn-actions {
    display: flex;
    gap: 12px;
    width: 100%;
}

.gc-close-warn-btn-keep {
    flex: 1;
    padding: 10px 16px;
    background: #ffffff;
    border: 1px solid #d1d5db;
    color: #374151;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

.gc-close-warn-btn-keep:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

.gc-close-warn-btn-discard {
    flex: 1;
    padding: 10px 16px;
    background: #ef4444;
    border: 1px solid #ef4444;
    color: #ffffff;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    box-shadow: 0 1px 2px rgba(239, 68, 68, 0.2);
}

.gc-close-warn-btn-discard:hover {
    background: #dc2626;
    border-color: #dc2626;
}

/* SUB POPUP PREMIUM STYLES */
/* Sub-popup Base Overrides */
#popups .popup.smpp-config,
#popups .popup.ct_ipaddress_config,
#popups .popup.mount_paths,
#popups .popup.dig_sig,
#popups .popup.modify_font,
#popups .popup.ct_function,
#popups .popup.api_configurations {
    border-radius: 12px !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    overflow: hidden !important;
}

#popups .popup.smpp-config>h2,
#popups .popup.ct_ipaddress_config>h2,
#popups .popup.mount_paths>h2,
#popups .popup.dig_sig>h2,
#popups .popup.modify_font>h2,
#popups .popup.ct_function>h2,
#popups .popup.api_configurations>h2 {
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 16px 24px !important;
    margin: 0 !important;
    height: auto !important;
    line-height: 1.5 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    text-align: left !important;
}

#popups .popup.smpp-config .close,
#popups .popup.ct_ipaddress_config .close,
#popups .popup.mount_paths .close,
#popups .popup.dig_sig .close,
#popups .popup.modify_font .close,
#popups .popup.ct_function .close,
#popups .popup.api_configurations .close {
    top: 14px !important;
    right: 18px !important;
    margin: 0 !important;
    position: absolute !important;
    z-index: 10 !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 18L18 6M6 6l12 12'/%3E%3C/svg%3E") no-repeat center !important;
    background-size: 16px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    border: none !important;
    transition: background-color 0.15s !important;
}

#popups .popup.smpp-config .close:hover,
#popups .popup.ct_ipaddress_config .close:hover,
#popups .popup.mount_paths .close:hover,
#popups .popup.dig_sig .close:hover,
#popups .popup.modify_font .close:hover,
#popups .popup.ct_function .close:hover,
#popups .popup.api_configurations .close:hover {
    background-color: #f1f5f9 !important;
}

#popups .popup.smpp-config .buttons,
#popups .popup.ct_ipaddress_config .buttons,
#popups .popup.mount_paths .buttons,
#popups .popup.dig_sig .buttons,
#popups .popup.modify_font .buttons,
#popups .popup.ct_function .buttons,
#popups .popup.api_configurations .buttons {
    border-top: 1px solid #e2e8f0 !important;
    background-color: #ffffff !important;
    padding: 12px 24px !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 12px !important;
    height: auto !important;
    box-sizing: border-box !important;
}

#popups .popup.smpp-config .buttons button,
#popups .popup.ct_ipaddress_config .buttons button,
#popups .popup.mount_paths .buttons button,
#popups .popup.dig_sig .buttons button,
#popups .popup.modify_font .buttons button,
#popups .popup.ct_function .buttons button,
#popups .popup.api_configurations .buttons button {
    margin: 0 !important;
}

#popups .popup.smpp-config .dialog_content,
#popups .popup.ct_ipaddress_config .dialog_content,
#popups .popup.mount_paths .dialog_content,
#popups .popup.dig_sig .dialog_content,
#popups .popup.modify_font .dialog_content,
#popups .popup.ct_function .dialog_content,
#popups .popup.api_configurations .dialog_content {
    background: #ffffff !important;
    padding: 24px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex: 1 1 auto !important;
    /* Allow it to shrink/grow and scroll within the popup flex container */
    min-height: 0 !important;
    /* Crucial for flex scrolling */
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

/* To allow the popup itself to shrink wrap if possible without breaking the footer */
#popups .popup.smpp-config,
#popups .popup.ct_ipaddress_config,
#popups .popup.mount_paths,
#popups .popup.dig_sig,
#popups .popup.modify_font,
#popups .popup.ct_function,
#popups .popup.api_configurations {
    height: auto !important;
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
}

#popups .popup.smpp-config [data-id="params_content"],
#popups .popup.ct_ipaddress_config [data-id="params_content"],
#popups .popup.mount_paths [data-id="params_content"],
/* #popups .popup.dig_sig [data-id="params_content"], */
#popups .popup.modify_font [data-id="params_content"],
#popups .popup.ct_function [data-id="params_content"],
#popups .popup.api_configurations [data-id="params_content"] {
    flex: 1 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* App Config Form Variables & General */
.app-config-container,
.mount_path_container,
.modify_font_container,
.digital_sig_container {
    padding: 16px 20px !important;
    background-color: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    height: 100% !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
}

.app-config-card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.app-config-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    text-transform: capitalize !important;
    letter-spacing: normal !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.app-config-card-header svg {
    color: var(--brand-color, #3b82f6) !important;
}

.app-config-container .grid-2,
.grid-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px 12px !important;
}

.app-config-container .grid-full,
.grid-full {
    grid-column: 1 / -1 !important;
}

.app-config-container .input-group,
.input-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.app-config-container .input-group label,
.input-group label {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #475569 !important;
}

.app-config-input-field,
.app-config-generic-input-field,
.sig_field {
    width: 100% !important;
    min-width: 0 !important;
    height: 32px !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
    color: #1e293b !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
    outline: none !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.app-config-input-field:focus,
.sig_field:focus {
    border-color: var(--brand-color, #3b82f6) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.app-config-input-field:disabled,
.sig_field:disabled {
    background: #f8fafc !important;
    color: #94a3b8 !important;
    cursor: not-allowed !important;
}

.app-config-container .input-wrapper,
.input-wrapper {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.eye_container {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    color: #94a3b8 !important;
}

/* Custom Table Containers */
.custom-table-container {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin-top: 16px !important;
}

.custom-table-container table {
    width: 100% !important;
    border-collapse: collapse !important;
}

.custom-table-container th {
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.5px !important;
    padding: 12px 16px !important;
    text-align: left !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.custom-table-container td {
    padding: 12px 16px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #1e293b !important;
    font-size: 13px !important;
}

.custom-table-container input[type="text"],
.custom-table-container input[type="number"],
.custom-table-container select {
    width: 100% !important;
    height: 32px !important;
    padding: 4px 10px !important;
    font-size: 13px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
}

/* Delete Icon */
.config_icon.delete_config {
    width: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fee2e2 !important;
    color: #ef4444 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.config_icon.delete_config::before {
    content: '' !important;
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    background-color: currentColor !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'%3E%3C/polyline%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3Cline x1='10' y1='11' x2='10' y2='17'%3E%3C/line%3E%3Cline x1='14' y1='11' x2='14' y2='17'%3E%3C/line%3E%3C/svg%3E") !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'%3E%3C/polyline%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3Cline x1='10' y1='11' x2='10' y2='17'%3E%3C/line%3E%3Cline x1='14' y1='11' x2='14' y2='17'%3E%3C/line%3E%3C/svg%3E") !important;
    mask-size: contain !important;
    -webkit-mask-size: contain !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-position: center !important;
    -webkit-mask-position: center !important;
}

.config_icon.delete_config:hover {
    background: #f87171 !important;
    color: #ffffff !important;
}

/* Specific Mount Path / Modify Font Header */
.mount_path_name,
.modify_font_name {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

.mount_path_name span,
.modify_font_name span {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #475569 !important;
}

.mount_path_name input,
.modify_font_name input {
    flex: 1 !important;
    max-width: 300px !important;
    height: 36px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
}

.mount_path_add_btn,
.modify_font_add_btn {
    text-align: right !important;
}

.mount_path_add_btn button,
.modify_font_add_btn button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 32px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    background: var(--brand-color, #3b82f6) !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.mount_path_add_btn button:hover,
.modify_font_add_btn button:hover {
    background: #2563eb !important;
}

/* Digital Signature modern styling */
.digital_sig_container {
    max-width: 600px;
    margin: 0 auto;
}

.dig_sig_sign_box {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 20px !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.dig_sig_sign_box_inputs {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin-bottom: 16px !important;
}

.dig_sig_sign_box_inputs span,
.dig_sig_sign_box_inputs label {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #475569 !important;
}

.dig_sig_sign_box_inputs:last-child {
    flex-direction: row !important;
    align-items: center !important;
    margin-bottom: 0 !important;
}

.dig_sig_sign_box_inputs input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
}

.sig_upload_btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 32px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.sig_upload_btn:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #1e293b !important;
}

/* Database password eye icon override */
.global_config_db_params .eye_container {
    position: absolute !important;
    right: 8px !important;
    top: auto !important;
    bottom: 0 !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    transform: none !important;
    z-index: 10 !important;
}



/* SMTP/SMPP password eye icon override */
.smpp-config-group {
    position: relative;
}

.smpp-config-group .eye_container {
    position: absolute !important;
    right: 8px !important;
    top: auto !important;
    bottom: 0 !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    transform: none !important;
    z-index: 10 !important;
}



/* Fix textarea height */
.app-config-form textarea.app-config-input-field {
    height: auto !important;
    min-height: 160px !important;
    padding: 10px !important;
    resize: vertical !important;
}

/* ── Popup width for IP / Function / Mount Paths / Modify Font ── */
#popups .popup.ct_ipaddress_config {
    max-width: 440px !important;
    min-width: 380px !important;
}

#popups .popup.ct_function {
    max-width: 580px !important;
    min-width: 520px !important;
}

#popups .popup.dig_sig {
    max-width: 580px !important;
    min-width: 480px !important;
}

#popups .popup.mount_paths {
    max-width: 520px !important;
    min-width: 460px !important;
}

#popups .popup.modify_font {
    max-width: 720px !important;
    min-width: 640px !important;
}

/* ── app-config-table: clean data table inside sub-popups ── */
.app-config-table-wrap {
    overflow-x: auto !important;
    max-height: 260px !important;
    overflow-y: auto !important;
}

.app-config-table-wrap::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.app-config-table-wrap::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 4px;
}

.app-config-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 13px !important;
}

.app-config-table thead {
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
}

.app-config-table th {
    background: #f8fafc !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0.05em !important;
    padding: 9px 14px !important;
    text-align: left !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.app-config-table td {
    padding: 8px 14px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #1e293b !important;
    vertical-align: middle !important;
}

.app-config-table tr:last-child td {
    border-bottom: none !important;
}

.app-config-table tr:hover td {
    background: #f8fafc !important;
}

.app-config-table input[type="text"],
.app-config-table input[type="number"],
.app-config-table select {
    width: 100% !important;
    height: 30px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 5px !important;
    box-sizing: border-box !important;
    background: #fff !important;
    color: #1e293b !important;
    outline: none !important;
    transition: border-color 0.15s !important;
}

.app-config-table input[type="text"]:focus,
.app-config-table input[type="number"]:focus,
.app-config-table select:focus {
    border-color: var(--brand-color, #1a4f8a) !important;
    box-shadow: 0 0 0 2px rgba(26, 79, 138, 0.1) !important;
}

.app-config-table .config_icons {
    display: flex !important;
    justify-content: center !important;
}

/* ── Function Configurations popup – custom layout ── */
#popups .popup.ct_function .dialog_content {
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    max-height: calc(80vh - 11rem) !important;
}

.fn-popup-wrap {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.fn-identity-section {
    padding: 16px 20px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    flex-shrink: 0 !important;
}

.fn-field-row {
    display: flex !important;
    gap: 12px !important;
    align-items: flex-end !important;
}

.fn-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    flex: 1 !important;
}

.fn-field-sm {
    flex: 0 0 110px !important;
}

.fn-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0.05em !important;
    color: #64748b !important;
}

.fn-input {
    height: 34px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
    color: #1e293b !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    outline: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
    font-family: 'Poppins', Arial, sans-serif !important;
}

.fn-input:focus {
    border-color: var(--brand-color, #1a4f8a) !important;
    box-shadow: 0 0 0 3px rgba(26, 79, 138, 0.1) !important;
}

.fn-input:disabled {
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
    cursor: not-allowed !important;
}

.fn-editor-section {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    background: #1e293b !important;
}

.fn-editor-bar {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 14px !important;
    background: #0f172a !important;
    border-bottom: 1px solid #334155 !important;
    flex-shrink: 0 !important;
}

.fn-editor-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

.fn-editor-title {
    font-family: 'Fira Mono', 'Courier New', monospace !important;
    font-size: 11px !important;
    color: #64748b !important;
    margin-left: 8px !important;
}

.fn-code-area {
    flex: 1 !important;
    width: 100% !important;
    min-height: 220px !important;
    padding: 14px 18px !important;
    font-family: 'Fira Mono', 'Courier New', monospace !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
    color: #e2e8f0 !important;
    background: #1e293b !important;
    border: none !important;
    outline: none !important;
    resize: vertical !important;
    box-sizing: border-box !important;
    caret-color: #38bdf8 !important;
}

.fn-code-area::placeholder {
    color: #475569 !important;
}

.fn-code-area:focus {
    background: #162032 !important;
    box-shadow: none !important;
    border: none !important;
}

/* ── app-config-grid-1 ── */
.app-config-grid-1 {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

/* ── Sub-popup: dialog_content scrollbar fix for new templates ── */
#popups .popup.ct_ipaddress_config .dialog_content,
#popups .popup.mount_paths .dialog_content,
#popups .popup.dig_sig .dialog_content,
#popups .popup.modify_font .dialog_content,
#popups .popup.smpp-config .dialog_content,
#popups .popup.api_configurations .dialog_content {
    padding: 0 !important;
    overflow-y: auto !important;
    background: #f8fafc !important;
}

#popups .popup.ct_ipaddress_config .dialog_content::-webkit-scrollbar,
#popups .popup.mount_paths .dialog_content::-webkit-scrollbar,
#popups .popup.dig_sig .dialog_content::-webkit-scrollbar,
#popups .popup.modify_font .dialog_content::-webkit-scrollbar,
#popups .popup.smpp-config .dialog_content::-webkit-scrollbar,
#popups .popup.api_configurations .dialog_content::-webkit-scrollbar {
    width: 5px !important;
}

#popups .popup.ct_ipaddress_config .dialog_content::-webkit-scrollbar-thumb,
#popups .popup.mount_paths .dialog_content::-webkit-scrollbar-thumb,
#popups .popup.dig_sig .dialog_content::-webkit-scrollbar-thumb,
#popups .popup.modify_font .dialog_content::-webkit-scrollbar-thumb,
#popups .popup.smpp-config .dialog_content::-webkit-scrollbar-thumb,
#popups .popup.api_configurations .dialog_content::-webkit-scrollbar-thumb {
    background: #e2e8f0 !important;
    border-radius: 4px !important;
}

/* ── Function Configurations popup – improved layout ── */
#popups .popup.ct_function {
    max-width: 680px !important;
    min-width: 600px !important;
}

#popups .popup.ct_function .dialog_content {
    padding: 0 !important;
    background: #fafafa !important;
}

.fn-code-card {
    background: #1e1e1e !important;
    border-radius: 8px !important;
    border: 1px solid #333 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.1) !important;
}

.fn-code-header {
    background: #2d2d2d !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 16px !important;
    border-bottom: 1px solid #1a1a1a !important;
}

.fn-mac-dots {
    display: flex !important;
    gap: 6px !important;
    flex: 1 !important;
}

.fn-mac-dots span {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    display: inline-block !important;
}

.fn-mac-dots span:nth-child(1) {
    background: #ff5f56 !important;
}

.fn-mac-dots span:nth-child(2) {
    background: #ffbd2e !important;
}

.fn-mac-dots span:nth-child(3) {
    background: #27c93f !important;
}

.fn-code-title {
    font-family: 'Fira Code', 'Fira Mono', 'Courier New', monospace !important;
    font-size: 12px !important;
    color: #9cdafe !important;
    /* VSCode light blue */
    letter-spacing: 0.5px !important;
}

.fn-code-textarea {
    width: 100% !important;
    height: 300px !important;
    padding: 16px !important;
    font-family: 'Fira Code', 'Fira Mono', 'Courier New', monospace !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: #d4d4d4 !important;
    /* VSCode text color */
    background: #1e1e1e !important;
    border: none !important;
    outline: none !important;
    resize: vertical !important;
    box-sizing: border-box !important;
    caret-color: #569cd6 !important;
}

.fn-code-textarea::placeholder {
    color: #6a9955 !important;
    /* VSCode comment color */
}

/* Custom scrollbar for dark textarea */
.fn-code-textarea::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
}

.fn-code-textarea::-webkit-scrollbar-track {
    background: #1e1e1e !important;
}

.fn-code-textarea::-webkit-scrollbar-thumb {
    background: #424242 !important;
    border: 2px solid #1e1e1e !important;
    border-radius: 6px !important;
}

.fn-code-textarea::-webkit-scrollbar-thumb:hover {
    background: #4f4f4f !important;
}

/* Ensure popups can scroll internally */
#popups .popup.ct_function .dialog_content {
    padding: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

#popups .popup.ct_function .app-config-container {
    flex: 1 !important;
    overflow-y: auto !important;
    height: 100% !important;
}

/* Fix the header margin inside cards */
.app-config-card-header {
    margin-bottom: 16px !important;
}

/* Ensure sub-popups have a light gray background so white cards pop */
#popups .popup.mount_paths .dialog_content,
#popups .popup.modify_font .dialog_content,
#popups .popup.dig_sig .dialog_content,
#popups .popup.ct_function .dialog_content {
    background: #f8fafc !important;
}

/* =========================================================
   USER REQUEST: Modals fit based on content + proper spacing
   ========================================================= */

/* Remove forced 100% height from these popups so they wrap content tightly */


/* Ensure the IP Address popup has proper padding without internal cards */
#popups .popup.ct_ipaddress_config .dialog_content {
    padding: 20px !important;
    background: #ffffff !important;
    /* white background instead of gray */
}

/* Ensure the wrapper inside IP Address doesn't add redundant padding */
#popups .popup.ct_ipaddress_config .app-config-container {
    padding: 0 !important;
}

/* Remove the inner card styling for IP Address completely */
#popups .popup.ct_ipaddress_config .app-config-card {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Add proper spacing around other popup contents (Mount Paths, Dig Sig, etc) */
#popups .popup.mount_paths .dialog_content,
#popups .popup.dig_sig .dialog_content,
#popups .popup.modify_font .dialog_content,
#popups .popup.ct_function .dialog_content {
    padding: 20px !important;
}

/* Reset the container padding inside these so padding is handled by dialog_content */
#popups .popup.mount_paths .app-config-container,
#popups .popup.dig_sig .app-config-container,
#popups .popup.modify_font .app-config-container,
#popups .popup.ct_function .app-config-container {
    /* padding: 0 !important; */
    background: transparent !important;
}

/* Give function popup a max height specifically for the textarea flex */
#popups .popup.ct_function .dialog_content {
    max-height: 85vh !important;
    display: flex !important;
    flex-direction: column !important;
}

/* =========================================================
   USER REQUEST: Clean up cards, fix scrolling, add blur
   ========================================================= */



/* Make all dialog_contents handle padding safely and scroll */
#popups .popup .dialog_content {
    box-sizing: border-box !important;
}

#popups .popup.smpp-config .dialog_content,
#popups .popup.ct_ipaddress_config .dialog_content,
#popups .popup.mount_paths .dialog_content,
#popups .popup.dig_sig .dialog_content,
#popups .popup.modify_font .dialog_content,
#popups .popup.ct_function .dialog_content,
#popups .popup.api_configurations .dialog_content {
    background: #ffffff !important;
    /* Pure white background */
    padding: 24px !important;
    /* Clean space around content */
    overflow-y: auto !important;
    /* Enable native vertical scroll */
    overflow-x: hidden !important;
    height: auto !important;
    max-height: calc(90vh - 120px) !important;
    /* Leave room for header and buttons */
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    /* Space between sections */
}

/* Remove the "Card in a Card" look completely - make them seamless sections */
.app-config-card {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
}

/* Simplify the section headers now that they aren't cards */
.app-config-card-header {
    border-bottom: 1px solid #e2e8f0 !important;
    padding-bottom: 8px !important;
    margin-bottom: 12px !important;
    font-size: 14px !important;
    color: #0f172a !important;
}

/* Fix Function Popup Textarea Bleeding */
#popups .popup.ct_function .app-config-container {
    /*  padding: 0 !important; */
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

#popups .popup.ct_function textarea {
    min-height: 250px !important;
}

/* Provide sensible minimum widths so content isn't squished */
#popups .popup.ct_ipaddress_config {
    min-width: 450px !important;
}

#popups .popup.mount_paths {
    min-width: 550px !important;
}

#popups .popup.dig_sig {
    min-width: 600px !important;
}

#popups .popup.ct_function {
    min-width: 650px !important;
    width: 650px !important;
}

#popups .popup.modify_font {
    min-width: 750px !important;
}

/* Ensure buttons bar is anchored correctly */
/* #popups .popup .buttons {
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    position: relative !important;
    z-index: 10 !important;
} */

/* =========================================================
   USER REQUEST: Remove ALL card UI in popups + bigger footer padding
   ========================================================= */

/* Make absolutely sure NO cards show borders or backgrounds in any popup */
#popups .app-config-card {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 24px !important;
    /* Space between sections instead of margin 0 */
}

/* Ensure the header looks like a clean section title */
#popups .app-config-card-header {
    border-bottom: 1px solid #e2e8f0 !important;
    padding-bottom: 8px !important;
    margin-bottom: 16px !important;
    font-size: 14px !important;
    color: #0f172a !important;
    background: transparent !important;
}

/* Fix footer spacing - more space at the bottom */
/* #popups .popup .buttons {
    padding: 16px 24px 24px 24px !important;
    border-top: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
} */

/* =========================================================
   USER REQUEST: 60% - 80% width for popups + background opacity
   ========================================================= */

/* Ensure sub-popups are 60vw minimum and 80vw maximum */
#popups .popup.smpp-config,
#popups .popup.ct_ipaddress_config,
#popups .popup.mount_paths,
#popups .popup.dig_sig,
#popups .popup.modify_font,
#popups .popup.ct_function,
#popups .popup.api_configurations {
    min-width: 50vw !important;
    max-width: 60vw !important;

    /* Box shadow hack to create a dark overlay behind this specific sub-popup */
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1), 0 0 0 9999px rgba(15, 23, 42, 0.6) !important;
}

/* Also ensure the main popup is responsive if needed, but the user likely meant sub-popups based on context. 
   We will apply it to the main global_config too just in case */
#popups .popup.global_config {
    min-width: 60vw !important;
    max-width: 80vw !important;
}

/* =========================================================
   USER REQUEST: Move popup up & fix huge footer space
   ========================================================= */

/* Fix footer spacing - remove the huge extra space at the bottom */
/* #popups .popup .buttons {
    padding: 12px 20px !important;
    border-top: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
} */

/* Ensure the popup itself doesn't have extra bottom padding */
#popups .popup.smpp-config,
#popups .popup.ct_ipaddress_config,
#popups .popup.mount_paths,
#popups .popup.dig_sig,
#popups .popup.modify_font,
#popups .popup.ct_function,
#popups .popup.api_configurations {
    padding-bottom: 0 !important;

    /* Move the popup towards the top instead of perfectly centered */
    top: 5vh !important;
    transform: translateX(-50%) !important;
}

/* =========================================================
   USER REQUEST: Fix Digital Signature Scroll & Button Overlap
   ========================================================= */

/* Ensure the footer buttons are strictly part of the flex flow 
   and NOT absolutely positioned over the content */
/* #popups .popup .buttons {
    position: relative !important;
    bottom: auto !important;
    width: 100% !important;
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    padding: 6px 12px !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
    z-index: 10 !important;
} */

/* Ensure the dialog_content properly scrolls and shrinks */
#popups .popup.smpp-config .dialog_content,
#popups .popup.ct_ipaddress_config .dialog_content,
#popups .popup.mount_paths .dialog_content,
#popups .popup.dig_sig .dialog_content,
#popups .popup.modify_font .dialog_content,
#popups .popup.ct_function .dialog_content,
#popups .popup.api_configurations .dialog_content {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    /* Vital for flexbox scrolling */
    padding-bottom: 24px !important;
    /* Extra padding at the bottom of the scroll area */
}

/* Give the Digital Signature form itself a flex layout to ensure it doesn't break parent constraints */
#popups .popup.dig_sig .app-config-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

/* ── Global Variable Popup Modernization ── */
#popups .popup.ct_global_variable_config {
    max-width: 480px !important;
    min-width: 440px !important;
    min-height: 0 !important;
    height: auto !important;
}

#popups .popup.ct_global_variable_config .dialog_content {
    padding: 20px 24px 20px 24px !important;
    background: #ffffff !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    min-height: 0 !important;
}

#popups .popup.ct_global_variable_config .app-config-container {
    padding: 0 !important;
    height: auto !important;
}

#popups .popup.ct_global_variable_config .app-config-card {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: transparent !important;
}

#popups .popup.ct_global_variable_config .app-config-grid-1 {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

#popups .popup.ct_global_variable_config .input-group {
    margin-bottom: 0 !important;
}

#popups .popup.ct_global_variable_config label {
    margin-bottom: 6px !important;
}

#popups .popup.ct_global_variable_config input:disabled {
    background-color: #f8fafc !important;
    color: #334155 !important;
    border-color: #e2e8f0 !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #334155 !important;
}

/* ── Premium Alertify Dialog Styling ── */
.alertify .ajs-dialog {
    border-radius: 8px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #e8ecf4 !important;
    overflow: hidden !important;
}

.alertify .ajs-header {
    background: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    padding: 14px 20px !important;
}

.alertify .ajs-content {
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    color: #475569 !important;
    padding: 24px 20px !important;
    line-height: 1.5 !important;
}

.alertify .ajs-footer {
    background: #f8fafc !important;
    border-top: 1px solid #f1f5f9 !important;
    padding: 12px 20px !important;
}

.alertify .ajs-buttons {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

.alertify .ajs-buttons .ajs-button {
    height: 32px !important;
    padding: 0 16px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    text-transform: none !important;
    box-sizing: border-box !important;
}

/* Secondary Cancel Button */
.alertify .ajs-buttons .ajs-button.ajs-cancel {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
}

.alertify .ajs-buttons .ajs-button.ajs-cancel:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
}

/* Primary OK Button (using solid brand color) */
.alertify .ajs-buttons .ajs-button.ajs-ok {
    background: var(--brand-color, #3b5bdb) !important;
    border: 1px solid var(--brand-color, #3b5bdb) !important;
    color: #ffffff !important;
}

.alertify .ajs-buttons .ajs-button.ajs-ok:hover {
    opacity: 0.9 !important;
}

/* Danger Confirmation Styles */
.gc-delete-confirm-content {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 10px 0 !important;
}

.gc-delete-confirm-icon-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #fee2e2 !important;
    flex-shrink: 0 !important;
}

.gc-delete-confirm-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.gc-delete-confirm-main {
    margin: 0 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    line-height: 1.5 !important;
}

.gc-delete-confirm-sub {
    margin: 0 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 12px !important;
    color: #64748b !important;
    font-weight: 400 !important;
}

/* Destructive Delete Button styling for Danger confirmations */
.alertify.gc-danger-alertify .ajs-buttons,
.gc-danger-alertify .ajs-buttons,
.alertify .gc-danger-alertify .ajs-buttons {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

.alertify.gc-danger-alertify .ajs-buttons .ajs-button.ajs-cancel,
.gc-danger-alertify .ajs-buttons .ajs-button.ajs-cancel,
.alertify .gc-danger-alertify .ajs-buttons .ajs-button.ajs-cancel {
    order: 1 !important;
}

.alertify.gc-danger-alertify .ajs-buttons .ajs-button.ajs-ok,
.gc-danger-alertify .ajs-buttons .ajs-button.ajs-ok,
.alertify .gc-danger-alertify .ajs-buttons .ajs-button.ajs-ok {
    order: 2 !important;
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
}

.alertify.gc-danger-alertify .ajs-buttons .ajs-button.ajs-ok:hover,
.gc-danger-alertify .ajs-buttons .ajs-button.ajs-ok:hover,
.alertify .gc-danger-alertify .ajs-buttons .ajs-button.ajs-ok:hover {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    opacity: 1 !important;
}
/* =========================================
   Export Templates Wizard — Theme-aware Styles
   Uses the app's CSS custom properties so it
   respects light / dark / custom themes.
   ========================================= */

/* Overlay Backdrop */
.ew-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 99000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ew-fade-in 0.2s ease forwards;
}

@keyframes ew-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Wizard Container */
.ew-wizard {
  width: min(820px, 96vw);
  max-height: 92vh;
  background: var(--block-background-color, #fff);
  border: 1px solid var(--border-color, #d7d7d7);
  border-radius: 10px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: ew-slide-up 0.25s cubic-bezier(0.34, 1.36, 0.64, 1) forwards;
}

@keyframes ew-slide-up {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ---- Header ---- */
.ew-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 12px;
  background: var(--header-background-color, #fff);
  border-bottom: 1px solid var(--border-color, #d7d7d7);
  flex-shrink: 0;
}

.ew-header-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-color, #0F467C);
  display: flex;
  align-items: center;
  gap: 8px;
}

.ew-header-title svg {
  stroke: var(--brand-color, #0F467C);
}

.ew-close-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-color, #d7d7d7) !important;
  background: var(--button-background-color, #f9f9fa) !important;
  border-radius: 5px !important;
  color: var(--text-color, #202124) !important;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  box-shadow: none !important;
  line-height: 1;
  padding: 0;
}

.ew-close-btn:hover {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #dc2626 !important;
}

/* ---- Step Indicator ---- */
.ew-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px 32px 14px;
  gap: 0;
  flex-shrink: 0;
  background: var(--section-background-color, #f9f9f9);
  border-bottom: 1px solid var(--border-color, #d7d7d7);
}

.ew-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  position: relative;
  flex: 1;
}

.ew-step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--border-color, #d7d7d7);
  background: var(--block-background-color, #fff);
  color: var(--text-color-muted, #888);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}

.ew-step.active .ew-step-circle {
  border-color: var(--brand-color, #0F467C);
  background: var(--brand-color, #0F467C);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(15, 70, 124, 0.15);
}

.ew-step.done .ew-step-circle {
  border-color: #16a34a;
  background: #16a34a;
  color: #fff;
}

.ew-step-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-color-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color 0.25s;
}

.ew-step.active .ew-step-label {
  color: var(--brand-color, #0F467C);
}

.ew-step.done .ew-step-label {
  color: #16a34a;
}

/* Step connector line */
.ew-step::before {
  content: '';
  position: absolute;
  top: 16px;
  left: calc(-50% + 16px);
  right: calc(50% + 16px);
  height: 2px;
  background: var(--border-color, #d7d7d7);
  z-index: 1;
  transition: background 0.3s;
}

.ew-step:first-child::before {
  display: none;
}

.ew-step.done::before,
.ew-step.active::before {
  background: var(--brand-color, #0F467C);
}

/* ---- Body ---- */
.ew-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}

/* Each panel is hidden by default; .ew-panel-active shows it */
.ew-panel {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.ew-panel.ew-panel-active {
  display: flex;
  animation: ew-panel-fade 0.22s ease forwards;
}

@keyframes ew-panel-fade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Step 1: Select Templates ---- */
.ew-search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-color, #d7d7d7);
  flex-shrink: 0;
  background: var(--block-background-color, #fff);
}

.ew-search-wrap {
  flex: 1;
  position: relative;
}

.ew-search-ic {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  pointer-events: none;
  stroke: var(--text-color-muted, #888);
  fill: none;
}

.ew-search-input {
  width: 100%;
  padding: 7px 32px 7px 34px !important;
  /* right-pad leaves room for clear btn */
  border-radius: 5px !important;
  border: 1px solid var(--input-border-color, #ccc) !important;
  background: var(--input-background-color, #fff) !important;
  color: var(--input-text-color, #0c0c0d) !important;
  font-size: 12px !important;
  outline: none;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

.ew-search-input:focus {
  border-color: var(--brand-color, #0F467C) !important;
  box-shadow: 0 0 0 2px rgba(15, 70, 124, 0.1);
}

/* Clear (×) button inside search */
.ew-search-clear {
  position: absolute !important;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px !important;
  height: 18px !important;
  border: none !important;
  background: var(--area-background-color, #e5e7eb) !important;
  border-radius: 50% !important;
  color: var(--text-color-muted, #666) !important;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  box-shadow: none !important;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
  visibility: visible !important;
}

.ew-search-clear:hover {
  background: var(--brand-color, #0F467C) !important;
  color: #fff !important;
}


.ew-select-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-color, #0F467C);
  white-space: nowrap;
  min-width: 75px;
  text-align: right;
  background: rgba(15, 70, 124, 0.06);
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(15, 70, 124, 0.15);
}

/* List Column Header */
.ew-list-header {
  display: flex;
  align-items: center;
  padding: 7px 20px;
  background: var(--section-background-color, #f9f9f9);
  border-bottom: 1px solid var(--border-color, #d7d7d7);
  flex-shrink: 0;
}

.ew-list-header .ew-col-name {
  flex: 1;
}

.ew-list-header .ew-col-name label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-color-muted, #666);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  margin: 0;
}

.ew-list-header .ew-col-date {
  width: 150px;
  text-align: right;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-color-muted, #666);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Scrollable template list */
.ew-template-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.ew-template-list::-webkit-scrollbar {
  width: 6px;
}

.ew-template-list::-webkit-scrollbar-track {
  background: var(--section-background-color, #f9f9f9);
}

.ew-template-list::-webkit-scrollbar-thumb {
  background: var(--border-color, #ccc);
  border-radius: 3px;
}

/* Loading */
.ew-list-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 0;
  gap: 10px;
  color: var(--text-color-muted, #888);
  font-size: 13px;
}

.ew-spinner {
  width: 20px;
  height: 20px;
  border: 2.5px solid var(--border-color, #ddd);
  border-top-color: var(--brand-color, #0F467C);
  border-radius: 50%;
  animation: ew-spin 0.7s linear infinite;
}

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

/* Empty state */
.ew-empty {
  text-align: center;
  padding: 40px 24px;
  color: var(--text-color-muted, #888);
  font-size: 13px;
}

.ew-empty svg {
  display: block;
  margin: 0 auto 10px;
  stroke: var(--border-color, #ccc);
}

/* Template Row */
.ew-template-row {
  display: flex;
  align-items: center;
  padding: 13px 20px;
  gap: 12px;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.12s;
  user-select: none;
}

.ew-template-row:hover {
  background: var(--dropdown-hover-color, #e2eefc);
}

.ew-template-row.selected {
  background: rgba(15, 70, 124, 0.06);
}

/* Custom checkbox visual */
.ew-checkbox {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 2px solid var(--border-color, #ccc);
  background: var(--input-background-color, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}

.ew-template-row.selected .ew-checkbox {
  border-color: var(--brand-color, #0F467C);
  background: var(--brand-color, #0F467C);
}

.ew-template-row.selected .ew-checkbox::after {
  content: '';
  width: 4px;
  height: 8px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translateY(-1px);
  display: block;
}

/* ── Dashboard Actions Group ─────────────────────────────────────────── */
.mdb_actions_group {
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
}

.mdb_action_btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid transparent;
  outline: none;
  height: 38px;
  white-space: nowrap;
}

.mdb_action_primary {
  background-color: var(--brand-color) !important;
  color: white !important;
  box-shadow: 0 2px 4px rgba(0, 150, 136, 0.2);
}

.mdb_action_primary:hover {
  background-color: var(--brand-color) !important;
  filter: brightness(0.9);
  /* Subtle darkening for the shade difference */
  transform: translateY(-1px);
}

.mdb_action_secondary {
  background-color: white;
  color: #37474f;
  border-color: #cfd8dc;
}

.mdb_action_secondary:hover {
  border-color: var(--brand-color);
  color: var(--brand-color);
  background-color: #f1f8f7;
  transform: translateY(-1px);
}

.mdb_action_btn svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.mdb_action_btn:hover svg {
  transform: scale(1.1);
}

.mdb_action_btn span {
  line-height: 1;
}

/* Override existing dashboard btn if it exists */
.ew-dashboard-btn {
  display: none !important;
}

/* File icon */
.ew-tmp-icon {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  background: rgba(15, 70, 124, 0.08);
  border: 1px solid rgba(15, 70, 124, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ew-tmp-icon svg {
  stroke: var(--brand-color, #0F467C);
}

.ew-tmp-info {
  flex: 1;
  min-width: 0;
}

.ew-tmp-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-color, #202124);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ew-tmp-meta {
  font-size: 10px;
  color: var(--text-color-muted, #888);
  margin-top: 1px;
  font-family: monospace;
}

.ew-tmp-date {
  font-size: 11px;
  color: var(--text-color-muted, #888);
  width: 140px;
  text-align: right;
  flex-shrink: 0;
}

/* Pagination */
.ew-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 20px;
  border-top: 1px solid var(--border-color, #d7d7d7);
  flex-shrink: 0;
  background: var(--section-background-color, #f9f9f9);
}

.ew-page-btn {
  padding: 5px 16px !important;
  border-radius: 5px !important;
  border: 1px solid var(--border-color, #d7d7d7) !important;
  background: var(--button-background-color, #f9f9fa) !important;
  color: var(--text-color, #202124) !important;
  font-size: 12px !important;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: none !important;
}

.ew-page-btn:hover:not(:disabled) {
  background: var(--brand-color, #0F467C) !important;
  border-color: var(--brand-color, #0F467C) !important;
  color: #fff !important;
}

.ew-page-btn:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed;
  visibility: visible !important;
}

.ew-page-info {
  font-size: 12px;
  color: var(--text-color-muted, #888);
  min-width: 100px;
  text-align: center;
}

/* ---- Step 2: Review ---- */
.ew-review-header {
  padding: 14px 20px 10px;
  flex-shrink: 0;
  background: var(--section-background-color, #f9f9f9);
  border-bottom: 1px solid var(--border-color, #d7d7d7);
}

.ew-review-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-color, #202124);
}

.ew-review-subtitle {
  font-size: 12px;
  color: var(--text-color-muted, #666);
  margin-top: 2px;
}

.ew-review-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.ew-review-list::-webkit-scrollbar {
  width: 6px;
}

.ew-review-list::-webkit-scrollbar-thumb {
  background: var(--border-color, #ccc);
  border-radius: 3px;
}

.ew-review-row {
  display: flex;
  align-items: center;
  padding: 9px 20px;
  gap: 12px;
  border-bottom: 1px solid var(--border-color, #eee);
  animation: ew-row-in 0.18s ease forwards;
}

@keyframes ew-row-in {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.ew-review-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(15, 70, 124, 0.1);
  border: 1px solid rgba(15, 70, 124, 0.2);
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-color, #0F467C);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ew-review-info {
  flex: 1;
  min-width: 0;
}

.ew-review-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-color, #202124);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ew-review-id {
  font-size: 10px;
  color: var(--text-color-muted, #888);
  margin-top: 2px;
  font-family: monospace;
}

.ew-remove-btn {
  width: 24px !important;
  height: 24px !important;
  border: 1px solid #fca5a5 !important;
  background: #fee2e2 !important;
  border-radius: 5px !important;
  color: #dc2626 !important;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
  flex-shrink: 0;
  line-height: 1;
  padding: 0;
  box-shadow: none !important;
  visibility: visible !important;
}

.ew-remove-btn:hover {
  background: #fecaca !important;
}

/* ---- Step 3: Export Progress ---- */
.ew-export-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px 40px;
  gap: 18px;
}

.ew-export-icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(15, 70, 124, 0.08);
  border: 2px solid rgba(15, 70, 124, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ew-pulse 2s ease-in-out infinite;
}

@keyframes ew-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(15, 70, 124, 0.25);
  }

  50% {
    box-shadow: 0 0 0 10px rgba(15, 70, 124, 0);
  }
}

.ew-export-status-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-color, #202124);
  text-align: center;
}

.ew-export-sub-text {
  font-size: 12px;
  color: var(--text-color-muted, #888);
  text-align: center;
  margin-top: -10px;
}

.ew-progress-wrap {
  width: 100%;
  max-width: 420px;
}

.ew-progress-track {
  height: 6px;
  background: var(--border-color, #e5e7eb);
  border-radius: 6px;
  overflow: hidden;
}

.ew-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 6px;
  background: var(--brand-color, #0F467C);
  transition: width 0.3s ease;
  position: relative;
  overflow: hidden;
}

.ew-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: ew-shimmer 1.4s linear infinite;
}

@keyframes ew-shimmer {
  from {
    left: -100%;
  }

  to {
    left: 200%;
  }
}

.ew-progress-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-color-muted, #888);
}

/* Success / Error states */
.ew-export-success .ew-export-icon {
  background: rgba(22, 163, 74, 0.1);
  border-color: #16a34a;
  animation: none;
  box-shadow: 0 0 0 8px rgba(22, 163, 74, 0.08);
}

.ew-export-error .ew-export-icon {
  background: rgba(220, 38, 38, 0.08);
  border-color: #dc2626;
  animation: none;
}

/* ---- Footer ---- */
.ew-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid var(--border-color, #d7d7d7);
  flex-shrink: 0;
  background: var(--section-background-color, #f9f9f9);
  gap: 10px;
}

.ew-footer-left {
  display: flex;
  gap: 8px;
}

.ew-footer-right {
  display: flex;
  gap: 8px;
}

/* Buttons */
.ew-btn {
  padding: 7px 18px !important;
  border-radius: 5px !important;
  font-size: 13px !important;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border-color, #d7d7d7) !important;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

.ew-btn-secondary {
  background: var(--button-background-color, #f9f9fa) !important;
  color: var(--text-color, #202124) !important;
}

.ew-btn-secondary:hover {
  background: var(--button-background-color-hover, #ddd) !important;
}

.ew-btn-primary {
  background: var(--brand-color, #0F467C) !important;
  color: #fff !important;
  border-color: var(--brand-color, #0F467C) !important;
  box-shadow: 0 2px 8px rgba(15, 70, 124, 0.25) !important;
}

.ew-btn-primary:hover:not(:disabled) {
  background: var(--brand-hover-color, #0B355E) !important;
  box-shadow: 0 4px 12px rgba(15, 70, 124, 0.35) !important;
}

.ew-btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  visibility: visible !important;
}

/* Dashboard Header Button */
.ew-dashboard-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: 5px;
  border: 1px solid var(--brand-color, #0F467C);
  background: transparent;
  color: var(--brand-color, #0F467C);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
  font-family: 'Poppins', sans-serif;
  box-shadow: none;
}

.ew-dashboard-btn:hover {
  background: var(--brand-color, #0F467C);
  color: #fff;
}

.ew-dashboard-btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  stroke: currentColor;
}

/* Select-all checkbox */
.ew-select-all-cb {
  width: 14px !important;
  height: 14px !important;
  accent-color: var(--brand-color, #0F467C);
  cursor: pointer;
  flex-shrink: 0;
}

/* Template type badges */
.ew-type-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-left: 8px;
  vertical-align: middle;
}

.ew-type-own-template {
  background: transparent;
  color: var(--brand-color, #0F467C);
  border: 1px solid var(--brand-color, #0F467C);
}

.ew-type-group-template {
  background: transparent;
  color: #15803d;
  border: 1px solid #15803d;
}

.ew-type-shared-template {
  background: transparent;
  color: #b45309;
  border: 1px solid #b45309;
}

.ew-type-library {
  background: transparent;
  color: #7c3aed;
  border: 1px solid #7c3aed;
}

/* fallback for unknown types */
.ew-type-badge:not([class*="ew-type-own"]):not([class*="ew-type-group"]):not([class*="ew-type-shared"]):not([class*="ew-type-library"]) {
  background: transparent;
  color: var(--brand-color, #0F467C);
  border: 1px solid var(--brand-color, #0F467C);
}

/* Meta line layout */
.ew-tmp-meta,
.ew-review-id {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}


/* ---- Floating Progress (Top Right) ---- */
.ew-floating-progress {
  position: fixed;
  top: 24px;
  right: 24px;
  width: 320px;
  background: var(--block-background-color, #fff);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  padding: 16px;
  z-index: 100001;
  border: 1px solid var(--border-color, #d7d7d7);
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: ew-float-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  font-family: 'Poppins', sans-serif;
}

@keyframes ew-float-in {
  from {
    opacity: 0;
    transform: translateX(40px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.ew-floating-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-color, #0F467C);
}

.ew-floating-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-color, #0F467C);
}

.ew-floating-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-color-muted, #888);
  cursor: pointer;
  font-size: 18px;
  padding: 0;
  line-height: 1;
}

.ew-floating-close:hover {
  color: #dc2626;
}

.ew-floating-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ew-floating-status {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-color, #1a1f36);
}

.ew-floating-sub {
  font-size: 11px;
  color: var(--text-color-muted, #697386);
}

.ew-floating-progress-track {
  height: 6px;
  background: #f0f4f8;
  border-radius: 10px;
  overflow: hidden;
}

.ew-floating-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--brand-color, #0F467C);
  border-radius: 10px;
  transition: width 0.3s ease;
}

.ew-floating-footer {
  display: flex;
  justify-content: flex-end;
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-color, #0F467C);
}

/* Premium setting items hover state */
.ew-setting-item {
  transition: all 0.2s ease !important;
}

.ew-setting-item:hover {
  border-color: #cbd5e1 !important;
  background-color: #f8fafc !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.ew-setting-item:active {
  transform: translateY(0);
}

/* Responsive columns for settings list */
@media (max-width: 720px) {
  #ew-settings-list {
    grid-template-columns: 1fr !important;
  }
}
    .autosave-demo-page {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .autosave-card {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
    }

    .autosave-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #ebebeb;
        padding-bottom: 16px;
    }

    .autosave-header__title {
        font-size: 1.05rem;
        font-weight: 600;
        color: #111;
    }

    .autosave-header__filename {
        font-size: 0.8rem;
        color: #555;
        background: #f0f0f0;
        padding: 4px 14px;
        border-radius: 20px;
        font-weight: 500;
    }

    /* ── Indicator pill ── */
    .autosave-indicator {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        width: fit-content;
    }

    .autosave-indicator__icon {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    .autosave-indicator__icon:hover {
        background-color: var(--button-background-color-hover);
    }

    .autosave-indicator__label {
        padding-left: 0px;
        padding-right: 4px;
        text-align: left;
        font-weight: 400;
        font-size: 12px;
    }

    .autosave-indicator__sub {
        font-size: 0.75rem;
        font-weight: 400;
        margin-left: 4px;
        color: #666;
    }

    .autosave-indicator--saved .autosave-indicator__label {
        color: #000;
    }

    @keyframes autosave-pulse {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: .4;
        }
    }

    .autosave-indicator--saving .autosave-indicator__icon svg,
    .autosave-indicator--saving .autosave-indicator__label {
        animation: autosave-pulse 1s ease-in-out infinite;
    }

    /* ── Controls ── */
    .autosave-controls {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
    }

    .autosave-btn {
        padding: 8px 16px;
        border: 1px solid #d0d0d0;
        border-radius: 999px;
        background: #fff;
        font-family: inherit;
        font-size: 0.82rem;
        font-weight: 500;
        color: #222;
        cursor: pointer;
        transition: background .15s, box-shadow .15s;
    }

    .autosave-btn:hover {
        background: #f0f0f0;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
    }

    .autosave-btn:active {
        background: #e4e4e4;
        transform: scale(.97);
    }

    .autosave-btn--primary {
        background: #0b5cff;
        border-color: #0b5cff;
        color: #fff;
        font-weight: 600;
    }

    .autosave-btn--primary:hover {
        background: #094fdd;
        border-color: #094fdd;
    }

    .autosave-divider {
        color: #aaa;
        font-size: 0.75rem;
        margin: 0 4px;
    }

    /* ── Debug panel ── */
    .autosave-debug {
        font-size: 0.78rem;
        font-family: 'SF Mono', 'Fira Code', monospace;
        background: #1e1e2e;
        color: #cdd6f4;
        border-radius: 10px;
        padding: 14px 18px;
        line-height: 1.8;
        white-space: pre;
    }

    .autosave-debug__key {
        color: #89b4fa;
    }

    .autosave-debug__str {
        color: #a6e3a1;
    }

    .autosave-debug__null {
        color: #6c7086;
    }

    .calloutMain {
        background-color: var(--section-background-color);
        overflow: hidden auto;
        padding: 8px 12px;
        font-size: 12px;
        top: 39px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.12);
        border-radius: 4px;
        border-width: 1px;
        border-style: solid;
        border-color: rgb(237, 235, 233);
        outline: transparent;
        width: 199px;
    }

    .statusContainer {
        position: relative;
        left: 0px;
    }
    /* Auto Save Indicator Container */
.autosave-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  position: relative;
}

.autosave-indicator__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.autosave-indicator__label {
  font-size: 13px;
  font-weight: 500;
  color: #5f6368;
  white-space: nowrap;
}

.autosave-indicator__sub {
  font-size: 12px;
  font-weight: normal;
  opacity: 0.75;
  margin-left: 4px;
}


/* Callout/Popover */
.calloutMain {
  position: fixed;
  background: white;
  border: 1px solid #dadce0;
  border-radius: 4px;
  padding: 12px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  min-width: 200px;
  animation: slideDown 150ms ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.statusContainer {
  font-size: 13px;
  color: #202124;
  line-height: 1.4;
}

/* Utility */
.d-none {
  display: none !important;
}
.vh-dialog {
    --vh-primary: var(--brand-color);
    --vh-primary-hover: #eef2ff;
    --vh-primary-lt: rgba(59, 130, 246, 0.1);

    --vh-border: #e4e8ef;
    --vh-bg: #f6f8fb;
    --vh-surface: #ffffff;
    --vh-text: #18213a;
    --vh-muted: #6b7590;

    --vh-active-bg: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    --vh-item-bg: linear-gradient(135deg, rgba(241, 245, 249, 0.4) 0%, rgba(226, 232, 240, 0.2) 100%);
    --vh-item-hover: linear-gradient(135deg, rgba(226, 232, 240, 0.6) 0%, rgba(203, 213, 225, 0.4) 100%);

    --vh-ok-bg: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    --vh-ok-fg: #166534;
    --vh-inactive-bg: linear-gradient(135deg, #f3e8ff 0%, #ede9fe 100%);
    --vh-inactive-fg: #6b21a8;

    --vh-radius: 12px;
    --vh-radius-sm: 8px;
    --vh-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);

    /* Strict Dimension Match matching structural specifications */
    max-width: 800px !important;
    width: 800px !important;
    min-width: 800px !important;
    height: 500px !important;
    max-height: 500px !important;
    min-height: 500px !important;
}

.vh-container {
    background: var(--vh-surface);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 389px;
    width: 780px;
    position: relative;
    gap: 5px;
}

/* ── Header Area (20% Height Allocation) ── */
.vh-header {
    height: 10%;
    padding: 10px 10px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: var(--vh-surface);
}

.vh-header-left {
    flex: 1;
}

.vh-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--vh-text);
    margin-bottom: 2px;
    letter-spacing: -0.5px;
}

.vh-dialog .vh-template-title span {
    font-size: 13px;
    color: var(--vh-muted);
    font-weight: 500;
}

/* ── Controls & Filter Layout ── */
.vh-controls {
    display: flex;
    gap: 12px;
    align-items: center;
}

.vh-search {
    position: relative;
    width: 240px;
}

.vh-search input {
    width: 100%;
    padding: 8px 12px 8px 36px;
    border: 1px solid var(--vh-border);
    border-radius: var(--vh-radius-sm);
    font-size: 13px;
    color: var(--vh-text);
    background: var(--vh-bg);
    outline: none;
    transition: all 0.15s ease;
    font-weight: 500;
}

.vh-search input:focus {
    border-color: var(--vh-primary);
    background: var(--vh-surface);
    box-shadow: 0 0 0 3px var(--vh-primary-lt);
}

.vh-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--vh-muted);
}

/* ── Content Row Body (65% Height Allocation) ── */
.vh-content {
    height: 77%;
    overflow-y: auto;
    padding: 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--vh-surface);
}

/* Individual Content Rows */
.vh-version-group {
    border: 1px solid var(--vh-border);
    border-radius: var(--vh-radius);
    height: 68px;
    transition: all 0.15s ease;
    animation: slideIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.vh-version-item {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 16px;
    padding: 12px 16px;
    background: var(--vh-item-bg);
    align-items: center;
    transition: all 0.15s ease;
    height: 100%;
}

.vh-version-group:hover:not(.active) {
    background: var(--vh-item-hover);
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* Active Row Override Rules */
.vh-version-group.active {
    background: var(--brand-500);
    border-color: transparent;
}

.vh-version-group.active .vh-version-item {
    background: transparent;
}

/* Custom Badge / Counter Indicator */
.vh-version-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: var(--vh-bg);
    border-radius: var(--vh-radius-sm);
    font-weight: 700;
    font-size: 15px;
    color: var(--vh-text);
    border: 1px solid var(--vh-border);
}

.vh-version-group.active .vh-version-badge {
    background: rgba(255, 255, 255, 0.15);
    color: var(--vh-surface);
    border-color: rgba(255, 255, 255, 0.25);
}

.vh-version-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vh-version-name {
    font-weight: 600;
    color: var(--vh-text);
    font-size: 13px;
}

.vh-version-group.active .vh-version-name {
    color: var(--vh-surface);
}

.vh-version-info {
    display: flex;
    gap: 16px;
    font-size: 11px;
    color: var(--vh-muted);
    align-items: center;
}

.vh-version-group.active .vh-version-info {
    color: rgba(255, 255, 255, 0.75);
}

.vh-version-info-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Contextual Status Badges */
.vh-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--vh-ok-bg);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--vh-ok-fg);
}

.vh-status.inactive {
    background: var(--vh-inactive-bg);
    color: var(--vh-inactive-fg);
}

.vh-version-group.active .vh-status {
    background: rgba(255, 255, 255, 0.2);
    color: var(--vh-surface);
    border-color: transparent;
}

.vh-status-icon {
    width: 10px;
    height: 10px;
    display: flex;
    align-items: center;
}

/* Row Functional Buttons */
.vh-version-actions {
    display: flex;
    gap: 6px;
}

.vh-action-btn {
    padding: 6px 12px;
    border: 1px solid var(--vh-border);
    background: var(--vh-surface);
    border-radius: var(--vh-radius-sm);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--vh-text);
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.vh-action-btn:hover:not(:disabled) {
    background: var(--vh-bg);
    border-color: #cbd5e1;
}

.vh-action-btn.primary {
    background: var(--vh-primary);
    color: var(--vh-surface);
    border-color: var(--vh-primary);
}

.vh-action-btn.primary:hover {
    background: var(--brand-400);
    border-color: var(--vh-primary-hover);
}

.vh-version-group.active .vh-action-btn {
    background: rgba(255, 255, 255, 0.15);
    color: var(--vh-surface);
    border-color: rgba(255, 255, 255, 0.2);
}

.vh-version-group.active .vh-action-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.25);
}

.vh-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    visibility: visible;
}

.vh-action-icon {
    width: 12px;
    height: 12px;
}

/* ── Footer Area (15% Height Allocation) ── */
.vh-footer {
    height: 15%;
    padding: 0 32px;
    border-top: 1px solid var(--vh-border);
    background: var(--vh-bg);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

.vh-btn {
    padding: 8px 20px;
    border: 1px solid var(--vh-border);
    background: var(--vh-surface);
    border-radius: var(--vh-radius-sm);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--vh-text);
    transition: all 0.15s ease;
}

.vh-btn:hover {
    background: var(--vh-bg);
    border-color: #cbd5e1;
}

.vh-btn.primary {
    background: var(--vh-primary);
    color: var(--vh-surface);
    border-color: var(--vh-primary);
}

.vh-btn.primary:hover {
    background: var(--vh-primary-hover);
    border-color: var(--vh-primary-hover);
}

.vh-empty {
    padding: 40px 0;
    text-align: center;
    color: var(--vh-muted);
    font-size: 13px;
}

/* ── Scrollbars ── */
.vh-content::-webkit-scrollbar {
    width: 5px;
}

.vh-content::-webkit-scrollbar-track {
    background: transparent;
}

.vh-content::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

.vh-version-comments {
    width: 200px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    display: inline-block;
}

/* -- Compare Versions toolbar -- */
.vh-toolbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.vh-btn--compare {
    height: 29px !important;
    align-items: center;
    padding: 0 10px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    border-radius: 5px !important;
    display: inline-flex !important;
    opacity: 0.55;
    cursor: not-allowed !important;
}

.vh-btn--compare:not(:disabled),
.vh-btn--compare-ready {
    opacity: 1 !important;
    cursor: pointer !important;
}

.vh-btn--compare:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
}

/* ── In-popup compare navigation (20px horizontal rhythm) ── */
#popups .popup.show_history_dashboard .vh-container {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    gap: 0 !important;
    background: #f8fafc;
}

#popups .popup.show_history_dashboard.vh-view--compare .vh-container {
    background: #ffffff;
}

.vh-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 20px 10px;
    background: #ffffff;
    border-bottom: 1px solid #e8edf3;
    flex-shrink: 0;
}

.vh-nav-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.vh-nav-back {
    height: 30px !important;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    padding: 0 12px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    flex-shrink: 0;
}

.vh-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 4px;
    min-width: 0;
}

.vh-crumb {
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 6px;
    border-radius: 4px;
    cursor: default;
    line-height: 1.3;
}

.vh-crumb.is-link {
    color: #0f467c;
    cursor: pointer;
}

.vh-crumb.is-link:hover {
    background: #eef4fa;
    text-decoration: underline;
}

.vh-crumb.is-active {
    color: #0f172a;
    font-weight: 700;
}

.vh-crumb-sep {
    color: #cbd5e1;
    font-size: 12px;
    padding: 0 2px;
}

.vh-nav-subtitle {
    margin: 0;
    padding: 0 2px;
    font-size: 12px;
    color: #64748b;
    line-height: 1.45;
    display: none;
}

.vh-nav-subtitle strong {
    color: #334155;
    font-weight: 600;
}

.vh-compare-wrap {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #f8fafc;
    padding: 12px 20px 16px;
    box-sizing: border-box;
    position: relative;
}

.vh-compare-wrap.is-panel-maximized {
    padding: 0;
}

.vh-cl-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    min-height: 0;
}

.vh-cl-panel.is-detail-maximized {
    gap: 0;
}

.vh-cl-panel .vh-changelog-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 0 0 4px;
}

.vh-cl-panel .vh-changelog-body.vh-changelog-body--detail {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.vh-changelog-overlay {
    display: none !important;
}

.vh-changelog-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 0;
    background: transparent;
    border-bottom: none;
    flex-shrink: 0;
}

.vh-cl-stat {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.vh-cl-stat:hover,
.vh-cl-stat.is-active {
    border-color: #0f467c;
    box-shadow: 0 0 0 2px rgba(15, 70, 124, 0.12);
}

.vh-cl-stat-val {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.vh-cl-stat-lbl {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
}

.vh-cl-stat--added .vh-cl-stat-val { color: #15803d; }
.vh-cl-stat--removed .vh-cl-stat-val { color: #b91c1c; }
.vh-cl-stat--modified .vh-cl-stat-val { color: #c2410c; }

.vh-changelog-toolbar {
    display: flex;
    gap: 10px;
    padding: 0;
    border-bottom: none;
    flex-shrink: 0;
}

.vh-changelog-search,
.vh-changelog-module-filter {
    height: 34px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 12px;
    color: #0f172a;
    outline: none;
    padding: 0 12px;
    background: #ffffff;
    box-sizing: border-box;
}

.vh-changelog-search {
    flex: 1;
    min-width: 0;
}

.vh-changelog-module-filter {
    min-width: 160px;
    flex-shrink: 0;
}

.vh-changelog-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid #0f467c;
    border-radius: 6px;
    background: #0f467c;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
}

.vh-changelog-download-btn:hover:not(:disabled) {
    background: #0c3a66;
    border-color: #0c3a66;
}

.vh-changelog-download-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.vh-changelog-download-btn svg {
    flex-shrink: 0;
}

.vh-changelog-search:focus,
.vh-changelog-module-filter:focus {
    border-color: #0f467c;
    box-shadow: 0 0 0 2px rgba(15, 70, 124, 0.12);
}

.vh-changelog-empty {
    text-align: center;
    color: #64748b;
    padding: 48px 16px;
    font-size: 13px;
    background: #ffffff;
    border: 1px dashed #e2e8f0;
    border-radius: 8px;
}

.vh-changelog-group {
    margin-bottom: 14px;
}

.vh-changelog-group:last-child {
    margin-bottom: 0;
}

.vh-changelog-group-title {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 2px;
}

.vh-changelog-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 8px;
}

.vh-section-json-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 8px;
    border: 1px solid #d0d7e2;
    border-radius: 5px;
    background: #ffffff;
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.vh-section-json-btn:hover {
    border-color: #0f467c;
    color: #0f467c;
    background: #eef4fa;
}

.vh-section-json-btn svg {
    display: block;
    flex-shrink: 0;
}

.vh-changelog-group-count {
    background: #e2e8f0;
    color: #475569;
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 600;
}

.vh-changelog-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vh-changelog-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
    background: #ffffff;
}

.vh-changelog-op {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 7px;
    border-radius: 4px;
    margin-top: 1px;
}

.vh-changelog-item--added .vh-changelog-op {
    background: #dcfce7;
    color: #166534;
}

.vh-changelog-item--removed .vh-changelog-op {
    background: #fee2e2;
    color: #991b1b;
}

.vh-changelog-item--modified .vh-changelog-op {
    background: #ffedd5;
    color: #9a3412;
}

.vh-changelog-main {
    flex: 1;
    min-width: 0;
}

.vh-changelog-label {
    font-size: 13px;
    color: #0f172a;
    line-height: 1.45;
    font-weight: 500;
}

.vh-changelog-values {
    margin-top: 4px;
    font-size: 11px;
    color: #64748b;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.vh-cl-old {
    text-decoration: line-through;
    color: #94a3b8;
}

.vh-cl-new {
    color: #0f467c;
    font-weight: 600;
}

.vh-changelog-item--clickable {
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.vh-changelog-item--clickable:hover,
.vh-changelog-item--clickable:focus {
    outline: none;
    border-color: #0f467c;
    background: #f8fafc;
    box-shadow: 0 0 0 2px rgba(15, 70, 124, 0.1);
}

.vh-changelog-view-hint {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    padding: 0;
    margin-top: 0;
}

.vh-changelog-view-hint svg {
    display: block;
}

.vh-changelog-item--clickable:hover .vh-changelog-view-hint {
    background: #0f467c;
    border-color: #0f467c;
    color: #ffffff;
}

.vh-jsondiff-parent-key {
    display: flex;
    align-items: baseline;
    gap: 2px;
    padding: 0 2px;
    flex-shrink: 0;
    font-size: 13px;
    color: #0f172a;
}

.vh-jsondiff-parent-key code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
    font-weight: 700;
    color: #0f467c;
    background: #eef4fa;
    border: 1px solid #c9daf0;
    border-radius: 4px;
    padding: 2px 8px;
}

.vh-jsondiff-parent-key span {
    font-weight: 700;
    color: #64748b;
}

/* ── JSON Diff detail view ── */
.vh-jsondiff {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    height: 100%;
    flex: 1;
}

/* Always visible — outside chrome so maximize does not hide nav */
.vh-jsondiff-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
}

.vh-jsondiff-chrome {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.vh-jsondiff.is-maximizing .vh-jsondiff-chrome {
    display: none;
}

.vh-jsondiff-sections {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.vh-jsondiff-section {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    overflow: hidden;
}

.vh-jsondiff-section--compare {
    flex: 1 1 auto;
}

.vh-jsondiff-section--leaves {
    flex: 0 0 auto;
}

.vh-jsondiff-section--compare:not(.is-collapsed),
.vh-jsondiff-section--leaves:not(.is-collapsed):not(.is-maximized) {
    flex: 1 1 auto;
    max-height: none;
    min-height: 0;
}

.vh-jsondiff-section.is-collapsed {
    flex: 0 0 auto;
    max-height: none;
    min-height: 0;
}

.vh-jsondiff-section.is-collapsed .vh-jsondiff-section-body {
    display: none;
}

.vh-jsondiff-section.is-collapsed .vh-jsondiff-collapse-icon {
    transform: rotate(-90deg);
}

.vh-jsondiff.is-maximizing .vh-jsondiff-section:not(.is-maximized) {
    display: none;
}

.vh-jsondiff-section.is-maximized {
    flex: 1 1 auto !important;
    max-height: none !important;
    min-height: 0 !important;
    height: 100%;
    border-radius: 0;
    border: none;
}

.vh-compare-wrap.is-panel-maximized .vh-cl-panel,
.vh-compare-wrap.is-panel-maximized .vh-changelog-body--detail,
.vh-compare-wrap.is-panel-maximized .vh-jsondiff,
.vh-compare-wrap.is-panel-maximized .vh-jsondiff-sections {
    height: 100%;
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: 0;
}

.vh-compare-wrap.is-panel-maximized .vh-jsondiff-section.is-maximized {
    border-radius: 0;
    background: #f8fafc;
}

.vh-jsondiff-section-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px 6px 6px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.vh-jsondiff-section.is-collapsed .vh-jsondiff-section-bar {
    border-bottom: none;
}

.vh-jsondiff-collapse-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: transparent;
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
    color: #0f172a;
    min-width: 0;
}

.vh-jsondiff-collapse-btn:hover {
    background: #eef2f7;
}

.vh-jsondiff-collapse-icon {
    display: inline-flex;
    color: #64748b;
    transition: transform 0.15s ease;
}

.vh-jsondiff-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #475569;
}

.vh-jsondiff-section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #334155;
    font-size: 10px;
    font-weight: 700;
}

.vh-jsondiff-section-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.vh-jsondiff-panel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #ffffff;
    color: #475569;
    cursor: pointer;
    padding: 0;
}

.vh-jsondiff-panel-btn:hover:not(:disabled) {
    background: #0f467c;
    border-color: #0f467c;
    color: #ffffff;
}

.vh-jsondiff-panel-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.vh-jsondiff-section-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.vh-jsondiff-leaves-slot {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.vh-jsondiff-leaves-placeholder {
    padding: 16px;
    color: #94a3b8;
    font-size: 12px;
    text-align: center;
}

.vh-jsondiff-meta {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    flex-shrink: 0;
}

.vh-jsondiff-meta .vh-changelog-op {
    margin-top: 2px;
}

.vh-jsondiff-nav {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-left: auto;
}

.vh-jsondiff-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #ffffff;
    color: #0f467c;
    cursor: pointer;
    padding: 0;
}

.vh-jsondiff-nav-btn:hover:not(:disabled) {
    background: #0f467c;
    border-color: #0f467c;
    color: #ffffff;
}

.vh-jsondiff-nav-btn:disabled {
    opacity: 1;
    cursor: not-allowed;
    color: #cbd5e1;
    background: #f8fafc;
    border-color: #e2e8f0;
    pointer-events: none;
}

.vh-jsondiff-nav-btn:disabled svg {
    opacity: 0.55;
}

.vh-jsondiff-split:focus {
    outline: none;
}

.vh-jsondiff-split:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(15, 70, 124, 0.35);
}

.vh-jsondiff-op--added {
    background: #dcfce7 !important;
    color: #166534 !important;
}

.vh-jsondiff-op--removed {
    background: #fee2e2 !important;
    color: #991b1b !important;
}

.vh-jsondiff-op--modified {
    background: #ffedd5 !important;
    color: #9a3412 !important;
}

.vh-jsondiff-meta-text {
    flex: 1;
    min-width: 0;
}

.vh-jsondiff-label {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.4;
}

.vh-jsondiff-meta-bits {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.vh-jsondiff-meta-bits span {
    font-size: 11px;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 2px 8px;
    font-weight: 500;
}

.vh-jsondiff-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    flex: 1;
    min-height: 0;
    height: 100%;
    background: #0b1220;
}

.vh-jsondiff-pane {
    overflow: hidden;
    background: #0b1220;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.vh-jsondiff-pane--left {
    border-right: 1px solid #1f2937;
}

.vh-jsondiff-pane-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    background: #111827;
    border-bottom: 1px solid #1f2937;
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.vh-jsondiff-pane-tag {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    background: #1e293b;
    border-radius: 4px;
    padding: 2px 6px;
}

.vh-jsondiff-pane--left .vh-jsondiff-pane-tag {
    color: #fecaca;
    background: rgba(185, 28, 28, 0.25);
}

.vh-jsondiff-pane--right .vh-jsondiff-pane-tag {
    color: #bbf7d0;
    background: rgba(21, 128, 61, 0.25);
}

.vh-jsondiff-code {
    margin: 0;
    padding: 0;
    overflow: auto;
    flex: 1;
    min-height: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
    line-height: 1.55;
    color: #e2e8f0;
    background: #0b1220;
}

.vh-jsondiff-line {
    display: grid;
    grid-template-columns: 44px 1fr;
    min-height: 1.55em;
}

.vh-jsondiff-gutter {
    text-align: right;
    padding: 0 10px 0 8px;
    color: #64748b;
    user-select: none;
    border-right: 1px solid #1e293b;
    background: #0f172a;
}

.vh-jsondiff-text {
    padding: 0 12px;
    white-space: pre;
}

.vh-jsondiff-line--removed {
    background: rgba(239, 68, 68, 0.18);
}

.vh-jsondiff-line--removed .vh-jsondiff-gutter {
    background: rgba(239, 68, 68, 0.22);
    color: #fca5a5;
}

.vh-jsondiff-line--removed .vh-jsondiff-text {
    color: #fecaca;
}

.vh-jsondiff-line--added {
    background: rgba(34, 197, 94, 0.16);
}

.vh-jsondiff-line--added .vh-jsondiff-gutter {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
}

.vh-jsondiff-line--added .vh-jsondiff-text {
    color: #bbf7d0;
}

.vh-jsondiff-line--empty {
    background: rgba(148, 163, 184, 0.06);
}

.vh-jsondiff-line--empty .vh-jsondiff-text {
    color: transparent;
}

.vh-jsondiff-leaves-wrap {
    border: none;
    border-radius: 0;
    overflow: auto;
    flex: 1;
    min-height: 0;
    max-height: none;
    background: #ffffff;
}

.vh-jsondiff-leaves-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.vh-jsondiff-leaves-table th {
    text-align: left;
    background: #f8fafc;
    color: #475569;
    font-weight: 600;
    padding: 8px 12px;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 1;
}

.vh-jsondiff-leaves-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: top;
    color: #0f172a;
}

.vh-jsondiff-leaves-table code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    word-break: break-word;
}

.vh-jsondiff-leaf--added td { background: #f0fdf4; }
.vh-jsondiff-leaf--removed td { background: #fef2f2; }
.vh-jsondiff-leaf--modified td { background: #fff7ed; }

.vh-jsondiff-leaf-before code {
    color: #94a3b8;
    text-decoration: line-through;
}

.vh-jsondiff-leaf-after code {
    color: #0f467c;
    font-weight: 600;
}

.vh-jsondiff-paths ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vh-jsondiff-paths li code {
    display: block;
    font-size: 11px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 8px 10px;
    color: #334155;
    word-break: break-all;
}

@media (max-width: 900px) {
    .vh-jsondiff-split {
        grid-template-columns: 1fr;
    }

    .vh-jsondiff-pane--left {
        border-right: none;
        border-bottom: 1px solid #1f2937;
    }

    .vh-changelog-summary {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Root container ─────────────────────────────────────── */
.fp-dialog {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-family: 'Poppins', Arial, sans-serif;
    background: #fff;
    color: #1e1b4b;
    height: 435px;
    overflow: auto;
    width: 680px;
}

.fp-dialog::-webkit-scrollbar {
    width: 6px;
}

.fp-dialog::-webkit-scrollbar-track {
    background: var(--section-background-color, #f9f9f9);
}

.fp-dialog::-webkit-scrollbar-thumb {
    background: var(--border-color, #ccc);
    border-radius: 3px;
}

/* ── Dialog header ──────────────────────────────────────── */
.fp-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 24px 14px;
    border-bottom: 1px solid #f0f0f7;
}

.fp-header-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--brand-color) 12%, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fp-header-icon svg {
    width: 20px;
    height: 20px;
    color: var(--brand-color);
}

.fp-header-text h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #1e1b4b;
    line-height: 1.3;
}

.fp-header-text p {
    margin: 2px 0 0;
    font-size: 11.5px;
    color: #8b8bb5;
    line-height: 1.4;
}

/* ── Field rows (Name, Type, Mode) ──────────────────────── */
.fp-fields {
    display: flex;
    flex-direction: column;
    padding: 8px 8px 8px;
    gap: 0;
}

.fp-field-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #f4f4f8;
}

.fp-field-row:last-child {
    border-bottom: none;
}

.fp-field-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--brand-color) 8%, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.fp-field-icon svg {
    width: 16px;
    height: 16px;
    color: var(--brand-color);
}

.fp-field-label {
    flex: 1;
    min-width: 0;
}

.fp-field-label strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1e1b4b;
    line-height: 1.4;
    display: flex;
}

.fp-field-label strong .fp-required {
    color: #e11d48;
    margin-left: 2px;
}

.fp-field-label span {
    display: block;
    font-size: 11px;
    color: #8b8bb5;
    margin-top: 1px;
    line-height: 1.4;
}

.fp-field-control {
    width: 260px;
    flex-shrink: 0;
}

.fp-field-control input[type="text"] {
    width: 100%;
    height: 38px;
    border: 1.5px solid color-mix(in srgb, var(--brand-color) 20%, #e8e8e8);
    border-radius: 8px;
    padding: 0 12px;
    font-size: 13px;
    color: #1e1b4b;
    background: #fafafa;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    font-family: inherit;
    box-sizing: border-box;
}

.fp-field-control input[type="text"]:focus {
    border-color: var(--brand-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-color) 15%, transparent);
    background: #fff;
}

.fp-field-control .fp-select-wrap {
    position: relative;
    width: 100%;
}

.fp-field-control .fp-select-wrap select {
    width: 100%;
    height: 38px;
    border: 1.5px solid color-mix(in srgb, var(--brand-color) 20%, #e8e8e8);
    border-radius: 8px;
    padding: 0 36px 0 12px;
    font-size: 13px;
    color: #1e1b4b;
    background: #fafafa;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
    font-family: inherit;
    box-sizing: border-box;
}

.fp-field-control .fp-select-wrap select:focus {
    border-color: var(--brand-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-color) 15%, transparent);
    background: #fff;
}

.fp-select-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--brand-color);
    display: flex;
    align-items: center;
}

.fp-select-icon svg {
    width: 14px;
    height: 14px;
}

/* ── Mode info hint banner ──────────────────────────────── */
.fp-mode-hint {
    margin: 0 24px 8px;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--brand-color) 8%, #fff);
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--brand-color) 25%, #fff);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
    color: var(--brand-color);
    line-height: 1.5;
    transition: opacity .2s;
}

.fp-mode-hint.d-none {
    display: none;
}

.fp-mode-hint svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Processing sections ────────────────────────────────── */
.fp-section {
    margin: 0 10px 16px;
    border: 1.5px solid color-mix(in srgb, var(--brand-color) 20%, #e8e8e8);
    border-radius: 12px;
}

.fp-section.d-none {
    display: none;
}

/* ── Layers header ──────────────────────────────────────── */
.fp-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--brand-color) 4%, #fff);
    border-bottom: 1px solid color-mix(in srgb, var(--brand-color) 12%, #fff);
}

.fp-section-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--brand-color) 12%, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fp-section-icon svg {
    width: 16px;
    height: 16px;
    color: var(--brand-color);
}

.fp-section-title {
    flex: 1;
}

.fp-section-title strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #1e1b4b;
}

.fp-section-title span {
    font-size: 11px;
    color: #8b8bb5;
}

.fp-add-layer-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: #fff;
    border: 1.5px solid var(--brand-color);
    border-radius: 7px;
    color: var(--brand-color);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s;
    font-family: inherit;
}

.fp-add-layer-btn:hover {
    background: var(--brand-color);
    color: #fff;
}

/* ── Layers table ───────────────────────────────────────── */
.fp-layers-table {
    width: 100%;
    border-collapse: collapse;
}

.fp-layers-table thead tr {
    background: color-mix(in srgb, var(--brand-color) 4%, #fff);
}

.fp-layers-table thead th {
    padding: 8px 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: #8b8bb5;
    text-align: left;
    border-bottom: 1px solid color-mix(in srgb, var(--brand-color) 12%, #fff);
    white-space: nowrap;
}

.fp-layers-table thead th.fp-th-center {
    text-align: center;
}

.fp-layers-table thead th .fp-th-icon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    vertical-align: middle;
}

.fp-layers-table thead th .fp-th-icon svg {
    width: 12px;
    height: 12px;
}

.fp-layers-table tbody tr {
    border-bottom: 1px solid color-mix(in srgb, var(--brand-color) 6%, #fff);
    transition: background .12s;
}

.fp-layers-table tbody tr:last-child {
    border-bottom: none;
}

.fp-layers-table tbody tr:hover {
    background: color-mix(in srgb, var(--brand-color) 4%, #fff);
}

.fp-layers-table tbody td {
    padding: 9px 10px;
    font-size: 12.5px;
    color: #1e1b4b;
    vertical-align: middle;
}

.fp-layer-drag {
    color: #c4c4d8;
    cursor: grab;
    user-select: none;
    font-size: 13px;
    letter-spacing: -2px;
    padding-right: 4px;
}

.fp-layer-expand {
    background: none;
    border: none;
    cursor: pointer;
    color: #8b8bb5;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background .15s;
}

.fp-layer-expand:hover {
    background: color-mix(in srgb, var(--brand-color) 12%, #fff);
}

.fp-layer-expand svg {
    width: 13px;
    height: 13px;
    display: block;
}

.fp-layer-name-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fp-layer-type-icon {
    color: var(--brand-color);
    display: flex;
    align-items: center;
}

.fp-layer-type-icon svg {
    width: 15px;
    height: 15px;
}

.fp-layer-empty-val {
    text-align: center;
    color: #c4c4d8;
    font-size: 16px;
    line-height: 1;
}

.fp-layer-select {
    width: 90px;
    height: 28px;
    border: 1px solid color-mix(in srgb, var(--brand-color) 20%, #e8e8e8);
    border-radius: 6px;
    font-size: 11.5px;
    padding: 0 4px;
    color: #1e1b4b;
    background: #fff;
    outline: none;
    font-family: inherit;
}

.fp-layer-actions-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #8b8bb5;
    padding: 4px 6px;
    border-radius: 5px;
    font-size: 16px;
    line-height: 1;
    transition: background .15s, color .15s;
}

.fp-layer-actions-btn:hover {
    background: color-mix(in srgb, var(--brand-color) 12%, #fff);
    color: var(--brand-color);
}

/* ── Load Options ───────────────────────────────────────── */
.fp-load-options {
    padding: 16px;
    border-top: 1px solid color-mix(in srgb, var(--brand-color) 12%, #fff);
}

.fp-load-options-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.fp-load-options-header .fp-section-icon {
    background: color-mix(in srgb, var(--brand-color) 12%, #fff);
}

.fp-load-options-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.fp-load-left,
.fp-load-right {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fp-load-option-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
}

.fp-load-option-item:hover {
    background: color-mix(in srgb, var(--brand-color) 6%, #fff);
}

.fp-load-option-item input[type="radio"] {
    margin-top: 2px;
    accent-color: var(--brand-color);
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.fp-load-option-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--brand-color) 12%, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fp-load-option-icon svg {
    width: 14px;
    height: 14px;
    color: var(--brand-color);
}

.fp-load-option-text strong {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #1e1b4b;
    line-height: 1.4;
}

.fp-load-option-text span {
    display: block;
    font-size: 11px;
    color: #8b8bb5;
    line-height: 1.4;
}

/* If Space Exists card */
.fp-space-exists-card {
    border: 1.5px solid color-mix(in srgb, var(--brand-color) 20%, #e8e8e8);
    border-radius: 10px;
    overflow: hidden;
}

.fp-space-exists-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: color-mix(in srgb, var(--brand-color) 4%, #fff);
    border-bottom: 1px solid color-mix(in srgb, var(--brand-color) 12%, #fff);
}

.fp-space-exists-header input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--brand-color);
    margin: 0;
    flex-shrink: 0;
}

.fp-space-exists-header label {
    font-size: 12.5px;
    font-weight: 600;
    color: #1e1b4b;
    margin: 0;
    cursor: pointer;
}

.fp-space-exists-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 6px;
}

/* ── Bottom fields: Mandatory / Fixed / Post Process / GT ── */
.fp-bottom-fields {
    margin: 0 24px 16px;
    border: 1.5px solid color-mix(in srgb, var(--brand-color) 20%, #e8e8e8);
    border-radius: 12px;
    overflow: hidden;
}

.fp-checkbox-field {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--brand-color) 6%, #fff);
    transition: background .12s;
}

.fp-checkbox-field:last-child {
    border-bottom: none;
}

.fp-checkbox-field:hover {
    background: color-mix(in srgb, var(--brand-color) 4%, #fff);
}

.fp-checkbox-field .fp-field-icon {
    margin-top: 0;
}

.fp-checkbox-field-text {
    flex: 1;
}

.fp-checkbox-field-text strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1e1b4b;
    line-height: 1.4;
}

.fp-checkbox-field-text span {
    display: block;
    font-size: 11px;
    color: #8b8bb5;
    margin-top: 1px;
}

.fp-checkbox-field input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--brand-color);
    flex-shrink: 0;
    margin: 0;
    cursor: pointer;
}

/* Global Template field — right side button */
.fp-gt-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #fff;
    border: 1.5px solid color-mix(in srgb, var(--brand-color) 20%, #e8e8e8);
    border-radius: 7px;
    color: #1e1b4b;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    font-family: inherit;
}

.fp-gt-btn:hover {
    border-color: var(--brand-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-color) 15%, transparent);
}

.fp-gt-btn svg {
    width: 14px;
    height: 14px;
    color: var(--brand-color);
}

/* ── Global Template Processing section ─────────────────── */
.fp-gt-section {
    margin: 0 24px 16px;
    border: 1.5px solid color-mix(in srgb, var(--brand-color) 20%, #e8e8e8);
    border-radius: 12px;
}

.fp-gt-section.d-none {
    display: none;
}

.fp-gt-section-inner {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fp-gt-field-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fp-gt-field-row label {
    width: 60px;
    font-size: 12.5px;
    font-weight: 600;
    color: #1e1b4b;
    margin: 0;
}

.fp-gt-field-row select {
    flex: 1;
    height: 34px;
    border: 1.5px solid color-mix(in srgb, var(--brand-color) 20%, #e8e8e8);
    border-radius: 7px;
    padding: 0 10px;
    font-size: 12.5px;
    color: #1e1b4b;
    background: #fafafa;
    outline: none;
    font-family: inherit;
}

.fp-gt-field-row select:focus {
    border-color: var(--brand-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-color) 15%, transparent);
}

/* ── Footer buttons ─────────────────────────────────────── */
.fp-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px 20px;
    border-top: 1px solid #f0f0f7;
}

.fp-reset-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 20px;
    background: #fff;
    border: 1.5px solid color-mix(in srgb, var(--brand-color) 20%, #e8e8e8);
    border-radius: 9px;
    color: #6b7280;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s, color .15s;
    font-family: inherit;
}

.fp-reset-btn:hover {
    border-color: var(--brand-color);
    color: var(--brand-color);
}

.fp-reset-btn svg {
    width: 14px;
    height: 14px;
}

.fp-apply-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 24px;
    background: var(--brand-color);
    border: none;
    border-radius: 9px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s, box-shadow .15s;
    font-family: inherit;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-color) 40%, transparent);
}

.fp-apply-btn:hover {
    opacity: 0.88;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--brand-color) 50%, transparent);
}

.fp-apply-btn svg {
    width: 14px;
    height: 14px;
}

/* ── Hide default popup ok/cancel bar for this dialog ───── */
/* .obj_prop [data-id="ok_cancel_btn"] {
  display: none !important;
} */

/* ── Layer context menu ─────────────────────────────────── */
.fp-layer-menu {
    position: fixed;
    background: #fff;
    border: 1.5px solid color-mix(in srgb, var(--brand-color) 20%, #e8e8e8);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 99999;
    min-width: 130px;
    padding: 4px 0;
}

.fp-layer-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 12.5px;
    color: #1e1b4b;
    cursor: pointer;
    transition: background .12s;
    font-family: 'Poppins', Arial, sans-serif;
}

.fp-layer-menu-item:hover {
    background: color-mix(in srgb, var(--brand-color) 6%, #fff);
}

.fp-layer-menu-item.danger {
    color: #e11d48;
}

.fp-layer-menu-item.danger:hover {
    background: #fff1f2;
}

/* ── Scrollbar styling inside dialog content ────────────── */
.obj_prop .dialog_content::-webkit-scrollbar {
    width: 5px;
}

.obj_prop .dialog_content::-webkit-scrollbar-track {
    background: transparent;
}

.obj_prop .dialog_content::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--brand-color) 30%, #fff);
    border-radius: 4px;
}

/* ── Global temp map dialog ─────────────────────────────── */
.global_temp_map {
    width: 380px !important;
    min-width: 380px !important;
}

.global_temp_map_container {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 0;
}

.global_temp_map_selection {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.global_temp_map_selection_field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.global_temp_map_selection_field span {
    font-size: 12px;
    font-weight: 600;
    color: #4b5563;
}

.global_temp_map_selection_field select {
    width: 100%;
    height: 34px;
    border: 1.5px solid color-mix(in srgb, var(--brand-color) 20%, #e8e8e8);
    border-radius: 7px;
    padding: 0 10px;
    font-size: 12.5px;
    color: #1e1b4b;
    outline: none;
    font-family: inherit;
}

.global_temp_map_loader_container {
    display: flex;
    justify-content: center;
    padding: 20px;
}

.global_temp_map_loader {
    width: 28px;
    height: 28px;
    border: 3px solid color-mix(in srgb, var(--brand-color) 15%, #fff);
    border-top: 3px solid var(--brand-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.global_temp_map_message_container {
    text-align: center;
    color: #8b8bb5;
    font-size: 12.5px;
    padding: 16px;
}

/* ============================================================
   end of Frame / Unit Configuration styles
   ============================================================ */


/* ── Toggle Switches ────────────────────────────────────── */
.fp-field-row--toggle {
    align-items: center;
    padding: 12px 0;
}

.fp-toggle-control {
    display: flex;
    justify-content: flex-end;
}

.fp-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.fp-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.fp-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e2e2ea;
    transition: .3s;
    border-radius: 24px;
}

.fp-toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.fp-toggle input:checked+.fp-toggle-slider {
    background-color: var(--brand-color);
}

.fp-toggle input:focus+.fp-toggle-slider {
    box-shadow: 0 0 1px var(--brand-color);
}

.fp-toggle input:checked+.fp-toggle-slider:before {
    transform: translateX(20px);
}

/* ── GT Tree ────────────────────────────────────────────── */
.fp-gt-tree-container {
    border: 1px solid color-mix(in srgb, var(--brand-color) 20%, #e8e8e8);
    border-radius: 8px;
    background: #fafafc;
    margin: 0 24px 20px;
    max-height: 250px;
    overflow-y: auto;
    font-size: 13px;
}

.fp-gt-tree-container::-webkit-scrollbar {
    width: 6px;
}

.fp-gt-tree-container::-webkit-scrollbar-track {
    background: var(--section-background-color, #f9f9f9);
}

.fp-gt-tree-container::-webkit-scrollbar-thumb {
    background: var(--border-color, #ccc);
    border-radius: 3px;
}

.fp-gt-empty,
.fp-gt-empty-child {
    padding: 16px;
    color: #8b8bb5;
    text-align: center;
    font-size: 12.5px;
}

.fp-gt-empty-child {
    padding: 8px 16px 8px 48px;
    font-style: italic;
}

.fp-gt-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    color: #8b8bb5;
}

.fp-gt-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid color-mix(in srgb, var(--brand-color) 20%, #fff);
    border-top-color: var(--brand-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.fp-gt-tree-inner {
    padding: 8px 0;
}

.fp-gt-group-row,
.fp-gt-page-row,
.fp-gt-layer-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.fp-gt-group-row:hover,
.fp-gt-page-row:hover,
.fp-gt-layer-row:hover {
    background: color-mix(in srgb, var(--brand-color) 5%, #fff);
}

.fp-gt-selected {
    background: color-mix(in srgb, var(--brand-color) 8%, #fff) !important;
}

.fp-gt-selected .fp-gt-row-label {
    color: var(--brand-color);
    font-weight: 600;
}

.fp-gt-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: #8b8bb5;
    transition: transform 0.2s;
}

.fp-gt-chevron.open {
    transform: rotate(90deg);
}

.fp-gt-row-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: #a4a4c1;
}

.fp-gt-row-label {
    color: #1e1b4b;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fp-gt-page-row {
    padding-left: 32px;
}

.fp-gt-layer-row {
    padding-left: 48px;
}

.fp-gt-row-spacer {
    width: 16px;
}

/* ============================================================
   end of Frame / Unit Configuration styles
   ============================================================ */
/* Hide utility for fp components */
.fp-hidden {
    display: none !important;
}


/* Segment Control for Toggles */
.fp-segment-control {
    display: flex;
    background: #f1f5f9;
    padding: 3px;
    border-radius: 6px;
    margin-bottom: 12px;
    gap: 2px;
}

.fp-segment-control input {
    display: none;
}

.fp-segment-control label {
    flex: 1;
    text-align: center;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 0 !important;
}

.fp-segment-control input:checked+label {
    background: #fff;
    color: var(--brand-color, #3b5bdb);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* show_result_table_pagination */
/* .pagination_contaniner {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.pagination_contaniner button {
  border: none;
  background-color: var(--brand-color);
  color: white;
  padding: 12px;
  margin: 2px;
  cursor: pointer;
}

.pagination_contaniner button:disabled {
  background-color: #ddd;
  cursor: not-allowed;
}

.pagination_contaniner span {
  display: flex;
  gap: 5px;
}

.pagination_contaniner span button {
  background-color: #f1f1f1;
  color: black;
}

.pagination_contaniner span button.active {
  background-color: var(--brand-color);
  color: white;
}
.pagination_contaniner button:disabled {
  visibility: visible !important;
}
.pagination_contaniner button {
  line-height: 0 !important;
} */
.pagination_contaniner {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-top: 10px !important;
}

.pagination_btn {
  border: none;
  background-color: var(--brand-color);
  color: white;
  padding: 12px;
  margin: 2px;
  cursor: pointer;
  line-height: 0 !important;
}

.pagination_btn:disabled {
  background-color: #ddd;
  cursor: not-allowed;
  visibility: visible !important;
}

#pagination_page_numbers {
  display: flex;
  gap: 5px;
}

#pagination_page_numbers button {
  background-color: #f1f1f1;
  color: black;
  padding: 1px 10px;
}

#pagination_page_numbers button.active {
  background-color: var(--brand-color);
  color: white;
}

/* table styles */
.input_data_search_container_dropdown_tr {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.input_data_search_container_dropdown_td {
  width: 50%;
  height: auto !important;
}

.pagination_table_element th {
  display: table-cell !important;
  border: 1px solid black;
  border-collapse: collapse;
}
.pagination_table_element td {
  border: 1px solid black;
  border-collapse: collapse;
}
.pagination_table_element {
  /* border: 1px solid black; */
  border-collapse: collapse;
}
.pagination_table_element tr {
  border: 1px solid black;
  border-collapse: collapse;
}
/* end */

.input_data_search_container_dropdown_td
  input[type="number"]::-webkit-outer-spin-button,
.input_data_search_container_dropdown_td
  input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.input_data_search_container_dropdown_td input[type="number"] {
  -moz-appearance: textfield;
}
.input_data_search .dialog_content::-webkit-scrollbar{
  height: 5px;
  width: 5px;
}
.noteForType {
  margin: 0;
  font-size: 9px;
}
.select_type_of_search .type_of_data {
  margin-bottom: 0px;
  margin-top: 12px;
  margin-bottom: 4px;
}
.input_type_of_search {
  min-width: 300px !important;
  min-height: 200px;
  max-width: 250px !important;
}
#selectedType {
  font-weight: 500;
  font-size: 14px !important;
}
.input_data_search_container {
  /* height: 275px; */
  /* width: 425px; */
  background-color: white;
  display: flex;
  flex-direction: column;
  padding: 5px;
  min-width: 670px;
  max-width: 670px;
}
.type_of_data_select {
  width: 90%;
}
.input_data_search {
  max-width: 700px !important;
  height: 200px !important;
  max-height: 390px;

  min-width: 700px !important;
  min-height: 450px;
}
.input_data_search_subtitle {
  position: absolute;
  top: 20px;
  font-size: 12px;
  font-weight: 400;
}

.category_select_dropdown {
  width: 75%;
  margin-top: 5px;
  margin-bottom: 5px;
}

.category_text_input {
  width: 75% !important;
  margin-top: 5px;
  /* margin-bottom: 5px; */
  padding: 7px !important;
}
.manError {
  color: red;
}
#show_result_table {
  width: 100%;
  overflow: auto;
  padding-bottom: 6px;
}
.NoSearchData {
  height: 50px;
  width: 100%;
  justify-content: center;
  border: 1px solid gray;
}
.input_data_search .input_data_search_inside_Search_btn {
  display: flex;
  justify-content: end;
  padding: 10px 0px;
}
#popups > .input_data_search > .buttons > button:disabled {
  visibility: visible !important;
  background-color: rgba(239, 239, 239, 0.3) !important;
  color: rgba(16, 16, 16, 0.3) !important;
  border-color: rgba(118, 118, 118, 0.3) !important;
}
/* table styles */
/* .input_data_search_container_dropdown_tr {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.input_data_search_container_dropdown_td {
  width: 50%;
  height: auto !important;
}

.input_data_search_category_result_table th {
  display: table-cell !important;
  border: 1px solid black;
  border-collapse: collapse;
}
.input_data_search_category_result_table td {
  border: 1px solid black;
  border-collapse: collapse;
}
.input_data_search_category_result_table {
  border: 1px solid black;
  border-collapse: collapse;
}
.input_data_search_category_result_table tr {
  border: 1px solid black;
  border-collapse: collapse;
} */

/* end */
/* .show_result_table_pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.show_result_table_pagination button {
  border: none;
  background-color: var(--brand-color);
  color: white;
  padding: 12px;
  margin: 2px;
  cursor: pointer;
}

.show_result_table_pagination button:disabled {
  background-color: #ddd;
  cursor: not-allowed;
}

.show_result_table_pagination span {
  display: flex;
  gap: 5px;
}

.show_result_table_pagination span button {
  background-color: #f1f1f1;
  color: black;
}

.show_result_table_pagination span button.active {
  background-color: var(--brand-color);
  color: white;
}
.show_result_table_pagination button:disabled {
  visibility: visible !important;
}
.show_result_table_pagination button {
  line-height: 0 !important;
} */

/* width: 100%;
display: flex;
flex-wrap: wrap; */
/* commented */

/* .input_data_search .input_data_search_radio_btns {
  display: flex;
  justify-content: space-between;
  width: 400px;
}
.input_data_search .input_data_search_radio_btns label {
  display: flex;
  align-items: center;
} */
/* .input_data_search .input_data_search_category_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
} */

/* .input_data_search .input_data_search_category_select {
  width: 325px;
  padding: 8px;
  font-size: 16px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-repeat: no-repeat;
  background-position: right 10px top 50%;
  background-size: 10px;
  cursor: pointer;
}
.input_data_search .input_data_search_category_select:hover {
  border-color: var(--brand-color);
}

.input_data_search .input_data_search_category_select:focus {
  outline: none;
  border-color: var(--brand-color);
}

.input_data_search_category_select option {
  padding: 10px;
  font-size: 14px;
  background-color: #fff;
  color: #333;
} */
/* .input_data_search .input_data_search_category_list label {
  font-size: 14px;
  font-weight: 500;
  padding-bottom: 5px;
  padding-top: 5px;
} */

/* .input_data_search .input_data_search_radio_btns label span {
  font-size: 14px;
  padding-top: 4px;
  padding-left: 4px;
} */
/* .input_data_search .input_data_search_category_result_table th {
  display: table-cell !important;
  border: 1px solid black;
  border-collapse: collapse;
}
.input_data_search .input_data_search_category_result_table td {
  border: 1px solid black;
  border-collapse: collapse;
}
.input_data_search .input_data_search_category_result_table {
  border: 1px solid black;
  border-collapse: collapse;
}
.input_data_search .input_data_search_category_textarea {
  width: 325px !important;
} */

        .landing-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #121212;
            color: #ffffff;
            font-size: 24px;
        }

        .landing-loading-container {
            display: flex;
            align-items: center;
        }

        .landing-loading-container .dots span {
            opacity: 0;
            animation: blink 1.5s infinite;
        }

        .landing-loading-container .dots span:nth-child(1) {
            animation-delay: 0s;
        }

        .dots span:nth-child(2) {
            animation-delay: 0.3s;
        }

        .landing-loading-container .dots span:nth-child(3) {
            animation-delay: 0.6s;
        }

        @keyframes blink {

            0%,
            100% {
                opacity: 0;
            }

            50% {
                opacity: 1;
            }
        }

/*# sourceMappingURL=main.css.map*/