/* CSS Document */
table.wz_table_container {
	border: none;
	border-collapse:collapse;
	background-color: #f5f5f5;
}
table.wz_table_container tr td {
	padding: 5px;
	vertical-align:top;
    border: none;
    font-size: 0.9rem;
    line-height: 1.1;
}
td.wz_label_1  {
	color: #ffffff;
	background-color: #C9E1ED;
	font-weight: bold;		
}
td.wz_label_2 {
	color: #ffffff;
	background-color: #A9CFE2;
	font-weight: bold;
}
td.wz_label_3 {
	color: #ffffff;
	background-color: #7EB8D3;
	font-weight: bold;
}
td.wz_label_1, td.wz_label_2, td.wz_label_3 {
	width: 150px;
}
td.feature_label { text-align: right; }
td.wz_value { border: 1px solid #C2D3E2; } 
span.panel_top_tip { display: block; background-color: #fffff9; padding:3px; font-style: italic; }
div.header2 {
	font-weight: bold;
	padding-bottom:7px;
}
td.headerv1 {
	background-color: #f0f0d5;
	font-style: italic;
}
td.headerv2 {
	background-color: #f0f0f0;
	font-weight: bold;
	border-top: 1px solid #a0a0a0;
}
.headerv3 {
	background-color: #c0c0c5;
	font-style: normal;
	font-weight: normal;
}
.headerv4 {
	background-color: #f0f0f5;
	font-style: italic;
}
.commentv1 {
	font-style: italic;
}
input.color_sel1 {
	width: 70px !important;
    display: inline-block !important;
    padding: 2px !important;
}
.textareavalue {
    width:100%;
    height:50px;
}
.textareavalue_larger {
    width:100%;
    min-width:320px;
    height:150px;
}

/* 100% wide plus padding and border came out wider than the box it sits in -
   six pixels past the panel on a phone. Count the padding inside the width. */
.wz_container .textareavalue,
.wz_container .textareavalue_larger {
    box-sizing: border-box;
}
.tip {
    display: block;
    margin: 8px 0;
    padding: 10px 12px;
    font-size: 0.875rem;
    line-height: 1.45;
    color: #5f4b00;
    background: #fff8db;
    border: 1px solid #f0df9a;
    border-radius: 8px;
}
.tip_highlight {
    display: block;
    margin: 8px 0;
    padding: 10px 12px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #4b5563;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-style: normal;
}

/* headers selection */
table.sample_table_headers {
	background-color: #c5c5c5;
	margin-top: 10px;
	width: 100%;
	text-align: center;
    height: 200px;
}
table.sample_table_headers tr td {
	padding: 3px;	
}
table.sample_table_headers tr td.header_cell {
	background-color: #a5a5a5;
}

/* borders selection */
table.sample_table_no_borders {
	border: none;
}
table.sample_table_no_borders tr  {
	border: none;
}
table.sample_table_no_borders tr td {
	border: none;
}

table.sample_table_inside_borders {
	border: none;
}
table.sample_table_inside_borders tr  {
	border: none;
}
table.sample_table_inside_borders tr td {
	border: 1px solid #000000;
}
table.sample_table_inside_borders tr td.row0 {
	border-top: none;
}
table.sample_table_inside_borders tr td.row2 {
	border-bottom: none;
}
table.sample_table_inside_borders tr td.column0 {
	border-left: none;
}
table.sample_table_inside_borders tr td.column2 {
	border-right: none;
}

table.sample_table_outside_borders {
	border: 1px solid #000000;
}
table.sample_table_outside_borders tr  {
	border: none;
}
table.sample_table_outside_borders tr td {
	border: none;
}

table.sample_table_full_borders {
	border: none;
}
table.sample_table_full_borders tr  {
	border: none;
}
table.sample_table_full_borders tr td {
	border: 1px solid #000000;
}

table.sample_table_row_borders {
	border: none;
}
table.sample_table_row_borders tr  {
	border-bottom: 1px solid #000000;
	border-top: 1px solid #000000;	
	border-left: none;
	border-right: none;	
}
table.sample_table_row_borders tr td {
	border: none;
}

table.sample_table_rowc_borders {
	border: 1px solid #000000;
}
table.sample_table_rowc_borders tr  {
	border-bottom: 1px solid #000000;
	border-top: 1px solid #000000;	
	border-left: none;
	border-right: none;	
}
table.sample_table_rowc_borders tr td {
	border: none;
}

table.sample_table_column_borders {
	border: none;
}
table.sample_table_column_borders tr  {
	border: none;	
}
table.sample_table_column_borders tr td {
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	border-top: none;
	border-bottom: none;
}

table.sample_table_columnc_borders {
	border: 1px solid #000000;;
}
table.sample_table_columnc_borders tr  {
	border: none;	
}
table.sample_table_columnc_borders tr td {
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	border-top: none;
	border-bottom: none;
}

/* table style selection */

table.sample_table_zebra_none {
	border: 1px solid #000000;
}
table.sample_table_zebra_none tr  {
	border: 1px solid #000000;
}
table.sample_table_zebra_none tr td {
	border: 1px solid #000000;
}

table.sample_table_zebra_row {
	border: 1px solid #000000;;
}
table.sample_table_zebra_row tr  {
	border: 1px solid #000000;
}
table.sample_table_zebra_row tr td {
	border: 1px solid #000000;
}
table.sample_table_zebra_row tr td.row1, table.sample_table_zebra_row tr td.row3 {
	background-color: #d0d0d0;
}

table.sample_table_zebra_column {
	border: 1px solid #000000;;
}
table.sample_table_zebra_column tr  {
	border: 1px solid #000000;
}
table.sample_table_zebra_column tr td {
	border: 1px solid #000000;
}
table.sample_table_zebra_column tr td.column1, table.sample_table_zebra_column tr td.column3 {
	background-color: #d0d0d0;
}

table.sample_table_hover_none {
	border: 1px solid #000000;
}
table.sample_table_hover_none tr  {
	border: 1px solid #000000;
}
table.sample_table_hover_none tr td {
	border: 1px solid #000000;
}

table.sample_table_hover_row {
	border: 1px solid #000000;;
}
table.sample_table_hover_row tr  {
	border: 1px solid #000000;
}
table.sample_table_hover_row tr td {
	border: 1px solid #000000;
}
table.sample_table_hover_row tr:hover {
	background-color: #d0d0d0;
}

table.sample_table_hover_cell {
	border: 1px solid #000000;;
}
table.sample_table_hover_cell tr  {
	border: 1px solid #000000;
}
table.sample_table_hover_cell tr td {
	border: 1px solid #000000;
}
table.sample_table_hover_cell tr td:hover {
	background-color: #d0d0d0;
}

/* Previews and special controls */
div.slider_handle_s1 a.ui-slider-handle {
	height: 0.8em;
}
div.ui-slider-horizontal {
	height: 0.4em;
}

.radius_preview { 
	display: none;	
	height: 1px;
	min-height: 1px;
	width: 1px;		
}
.radius_slider { 
	margin: 5px; 
	overflow: visible !important;
	height: 5px;
	min-height: 5px;
	width: 70px;		
}
.radius_value {
	width: 30px;
}

.gradient_preview {
	border: 1px solid #f5f5f5;		
	height: 60px;
	min-height: 60px;
	width: 60px;		
}
.gradient_percentage_slider { 
	margin: 5px; 
	overflow: visible !important;
	height: 5px;
	min-height: 5px;
	width: 70px;		
}

.text_shadow_preview {
	border: 1px solid #f5f5f5;		
	height: 60px;
	min-height: 60px;
	width: 120px;
}
.text_shadow_blur_slider,
.text_shadow_opacity_slider,
.text_shadow_distance_slider {
	margin: 5px; 
	overflow: visible !important;
	height: 5px;
	min-height: 5px;
	width: 70px;		
}

.box_shadow_preview {
	border: 3px solid #bcbcbc;		
	height: 60px;
	min-height: 60px;
	width: 120px;
}
.box_shadow_blur_slider,
.box_shadow_opacity_slider,
.box_shadow_distance_slider {
	margin: 5px; 
	overflow: visible !important;
	height: 5px;
	min-height: 5px;
	width: 70px;		
}

.border_preview {	
	background-color: #bcbcbc;	
	height: 60px;
	min-height: 60px;
	width: auto;
}
.border_preview_table {
	border-collapse:collapse;
}
.border_preview_table tr td {
	padding: 3px;
	font-size: 10px;
	color: #909090;
}

td.fieldlabel3 { font-weight: bold;}
table.fieldtable1 {
    border: 1px dotted #9D9D9D;
}

span.form_label_tooltip { color: #92979E; }

div.format_params_div { display: block; margin-top: 10px; }

div.data_type_params { border: 1px solid #d1d5db; border-radius: 6px; overflow: hidden; }
div.data_type_params .twz-field { background-color: #EFF3F8; padding: 4px 6px; }

#replacement_rules,
#format_rules,
#calculation_rules,
#modification_rules,
#remove_rules,
#custom_style_rules
{ width: 100%; }

#replacement_rules tbody tr td,
#format_rules tbody tr td,
#calculation_rules tbody tr td,
#modification_rules tbody tr td,
#remove_rules tbody tr td,
#custom_style_rules tbody tr td
{ padding-bottom: 2px; border: none; }

#replacement_rules tr:nth-child(1) td,
#format_rules tr:nth-child(1) td,
#calculation_rules tr:nth-child(1) td,
#remove_rules tr:nth-child(1) td,
#custom_style_rules tr:nth-child(1) td
{ background-color: #EFF3F8; }

.calculation_function_table { border: 1px dotted #a0a0a0; }
#calculation_rules table.calculation_assign_table tr:nth-child(1) td { background-color: transparent;}

#custom_style_rules table.custom_options,
#custom_style_rules table.custom_options tr td {background-color: #F5F5F5; border-bottom: none; }
#custom_style_rules table.custom_options tr td.headerv3 { background-color: #C0C0C5; }
#custom_style_rules table.border_preview_table { background-color:transparent; }
#custom_style_rules table.border_preview_table tr td { background-color: transparent; }

.range_selector_step { background-color: #808080; color:#ffffff; font-weight: bold; padding: 3px;}
.range_selector_settings { font-weight: normal;padding: 3px; background-color: #F8F8CA; }
.range_selector_tip { font-weight: normal; font-style: italic; font-size:smaller; padding: 3px; background-color: #a0a0a0; color: #5f5f5f;}
.range_options_tip {font-weight: normal; font-style: italic; font-size:smaller; padding: 3px; background-color: #f0f0f5; }
.hidden_span { display: none !important; }

table.numeric_sample_table { font-size: 9px; }
table.numeric_sample_table tr td { background-color: #dddddd; color: #777777; border:1px solid #a0a0a0; padding:2px;}
table.numeric_sample_table tr td.element_header { background-color: transparent; color: #030303; border: none;}

table.column_filter_selector_new { border: 1px solid #707070; margin-bottom: 0px; }
table.column_filter_selector_new tr td { padding: 10px; }

table.column_filter_sample_table {padding: 3px; }
table.column_filter_sample_table tr td { border-bottom: 1px solid #070707;}
table.column_filter_sample_table tr:nth-child(1) td { font-weight: bold;}
table.filter_search_methods tr td { padding: 5px;}
table.filter_search_methods tr:nth-child(odd) td { background-color: #f5f5f5;}
input#column_filter_selector_value {min-width: 65%; }
input#table_column_filter_columns {min-width: 260px; }

div#table_preview_grab_by_index_div,
div#table_preview_grab_by_attr_div {margin-top:10px; padding:10px; background-color:#F5F5E0;}

.round-button, .round-button-selected {
    display:inline-block;
    width:30px;
    height:30px;
    line-height:30px;
    border: 2px solid #f5f5f5;
    border-radius: 30%;
    color:#f5f5f5;
    text-align:center;
    text-decoration:none;
    background: #464646;
    box-shadow: 0 0 3px gray;
    font-size:16px;
    font-weight:bold;
    margin-left: 5px;
}
.round-button-selected {
    background: #67AACB;
}
.round-button:hover {
    background: #262626;
}

span.quick_jump_buttons { padding-left: 30px; }

/* Template specific for Versa */
table.wz_table_container tr td select { width: auto; }


.button.button-default {
    color: #f04353 !important;
    background: #fff !important;
    border: 1px solid #f04353;
}
.button.button-default:hover {
    background: transparent !important;
}
table tr td input[type="radio"] { margin-right: 10px; margin-left: 10px; }

table.border_radius_container { width: 100%; border: none; }
table.border_radius_container tr td { line-height: 0.4 !important; border: none;  }
table.border_preview_table { border: none; width: 100%; }
table.border_preview_table tr td {
    white-space: nowrap;
    padding: 5px;
    vertical-align:top;
    border: none;
    font-size: 0.7rem;
    line-height: 1.1;
}

#lightbox-wrap input[type="text"] { width: auto ; }
#lightbox-wrap select { width: auto; }

table.filter_search_methods { width: 100%; font-size: 0.85rem; }
table.column_filter_sample_table { width: 100%; font-size: 0.85rem; }
table.column_filter_selector_new { border: none; }
table.column_filter_selector_new tr td { border: none; padding:5px; }
table.column_filter_selector_new .button { padding: 7px; }
#column_filter_selector_value { width: 100% !important; }
#lightbox-outer { margin-right: 15px; }
#column_filter_selection_form { margin-right: 18px; }

div.range_selector_settings .button { padding: 7px;  }

#wizardForm { overflow-x: auto; }

div.wz_container_row { margin-bottom: 10px; }
div.wz_container_label { display: block; font-weight: 500; font-size: 1.6em; }

div.wz_container_help {
    border-left: 5px solid rgba(0, 0, 0, 0.1);
    padding: 0 0 0 0.938rem;
    margin: 0 0 1.5rem;
    font-size: 1.1rem;
    color: #999;
}

ul.g-list li { margin-bottom: 10px;  }
ul.g-list li input[type="radio"] { margin-right: 10px; }
div.wz_container_value select { width: auto; }
div.wz_container_btn_row { margin-top: 12px; text-align: center; }

/* NEW IN Tabulizer 7 */

div.range_selector_btns { margin-top: 10px; margin-bottom: 10px; }
div.range_selector_header { font-size: 1.1rem; font-weight: bold; margin-bottom: 5px; }
div.range_selector_tip { padding: 6px; }
div.range_selector_settings { padding: 6px; }
div.radio-item { padding: 3px; }
.radio-tip { font-size: smaller; }
input[type="radio"] { margin: 0px 2px 0px 0px!important; }
.ui-slider .ui-slider-handle { z-index: 0 !important; }
table.operators_tbl { background-color: #e7e5d9; border-collapse: collapse; }
table.operators_tbl tr td { border: none; }
table.operators_tbl select { width: auto; }
table.operators_tbl input[type="text"] { width: auto; max-width: 120px; }

#range_selector_form { width: 60%; max-width: 700px !important; left: calc(50% - 100px); }
.range_selector_link { color: #66AA77; font-weight: bold; }
table.custom-style-header tr td { vertical-align: top; }

span.range_example { color: #AA3300; }

#custom_style_rules select, #custom_style_rules input[type="text"] {height: 40px; margin-bottom: 0px; }
span.req_note { font-size: 0.8em; color: darkgreen;  }
span.opt_note { font-size: 0.8em; color: #006699; }

div.lighbox_info_text { max-width: 500px; }

p.enable_box { background-color: #e9f6e9; margin: 0px; padding: 10px; border: 1px solid #c9e2c9; border-radius: 5px; }
table tr td.fieldlabel2 { width: 25%; }

textarea.custom_type_code { height: 320px; width: 100%; }
textarea.custom_server_function { height: 160px; width: 100%; }
span.column_checkbox { margin: 3px 3px 3px 3px; vertical-align: text-bottom; display: inline-block; border: 1px solid #F0F0F0; padding: 3px; }
button.btn-small { font-size: smaller; padding: 3px 5px 3px 5px;}
html input[type="button"].add-new-btn { color: #3a87ad; background-color: #e2eff5; border-color: #c7e0ec; margin-top: 5px; padding: 5px; border-radius: 3px; }

.dynamic_rules_options { background-color: #d2dbe3; }
table.dynamic_rules_options tr td.optionsheader { background-color: #d2dbe3; }

span.function_name_list { }
span.function_name_tip { color: #A0A0A0; font-style: italic; }
span.function_args_tip { color: #A0A0A0; font-style: italic; }
.function_name input { width: 50%; margin-right: 5px; }
.function_code textarea.textareavalue { height: 250px; }

span.element_addition_types { display: block; background-color: #F2F2E8; padding: 3px; padding-top: 6px; }
span.position_header { font-weight: bold; margin-right: 5px; }
span.addition_values_header { font-weight: bold; margin-right: 5px; }

span.cfp_header { font-weight: bold; margin-top: 7px; margin-bottom: 7px; display: block; }

div.wz_container_value select {	
	color: #666;
    background-color: #f7f7f7;
    border: 2px solid rgba(0, 0, 0, 0.1);
    box-shadow: none;
    box-sizing: border-box !important;
	transition: border 0.2s linear, box-shadow 0.2s linear;
	padding: 0.375rem 0.375rem;
    vertical-align: middle;
    border-radius: 4px;
	width: 100%;    
	height: 2.3rem;
	
}	

div.wz_container_value.autosize select {	
	width: auto;
}

div.wz_container_value select:hover { 
	border-color: #f04353;
} 

#columns_filters_container select { width: auto; }

span.args_example { color: #db5656; }

#modification_rules table.dynamic_rules_options tr td { vertical-align: top; }

.tippy_info_label{
  display:inline-block;
  padding: 8px 0px;
  border-radius:999px;
  font-weight:700;
  font-size:12px;
  line-height:18px;
  background:transparent;
  color:#111827;
  cursor:pointer;
}
.tabulizer-tippy-help{
  background:transparent;
  border:0;
  padding:0;
  margin-left:2px;
}

/* new version */
/* ---------------------------------------------------------------------------
   Field rows

   The label sits beside its control while there is room for it, and above it
   when there is not. No border and no card: these steps carry a lot of fields,
   and a box around each group would cost width the controls need.
   --------------------------------------------------------------------------- */
.twz-field {
    display: grid;
    grid-template-columns: minmax(140px, 22%) minmax(0, 1fr);
    align-items: center;
    gap: 4px 14px;
    padding: 5px 0;
}

/* A field whose control is tall - a textarea - reads better with the label at
   the top of it rather than floating in the middle. */
.twz-field--top {
    align-items: start;
}

/* A field whose text is the point - a title, a description, a block of help -
   takes the whole width of its column. Counted with its padding inside, since
   width: 100% on its own came out wider than the panel. */
.twz-field--wide > .twz-field-control > input[type="text"],
.twz-field--wide > .twz-field-control > textarea {
    width: 100%;
    box-sizing: border-box;
}

.twz-field--wide > .twz-field-control > textarea {
    min-height: 5em;
}

.twz-field > .twz-field-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 14px;
    color: #374151;
    margin: 0;
}

.twz-field > .twz-field-control {
    min-width: 0;
}

.twz-field > .twz-field-control > select,
.twz-field > .twz-field-control > input[type="text"],
.twz-field > .twz-field-control > textarea {
    max-width: 100%;
}

/* A row of choices - radios - reading across while they fit. */
.twz-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.twz-choices label,
.twz-choice {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    cursor: pointer;
}

/* Grouping, for when a set of fields really is one thing and the width is
   there to show it. Everything else stays unboxed. */
.twz-group {
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 10px 12px;
    margin: 0 0 12px;
}

.twz-group > .twz-group-title {
    font-weight: 600;
    font-size: 14px;
    color: #374151;
    margin: 0 0 6px;
}

@media (max-width: 640px) {
    /* No room for two columns: the label goes above its control. */
    .twz-field {
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 6px 0;
    }

    .twz-group {
        border: 0;
        padding: 0;
    }
}

/* ---------------------------------------------------------------------------
   Stacked sections

   A run of sub-headings each followed by its widget. These were tables with one
   cell per row, so the table was doing nothing a block does not do - and most of
   the <tr> tags were never closed.

   No boxes here. A section like Table cells holds a dozen widgets, several of
   them colour pickers and sliders that want the full width, and a border around
   each would cost more room than it explains.
   --------------------------------------------------------------------------- */
.twz-stack {
    display: block;
}

/* Separates the real groups within a section - Top headers from Bottom headers,
   Cells from Zebra from Hover. */
.twz-section-title {
    font-weight: 600;
    font-size: 15px;
    color: #374151;
    margin: 18px 0 4px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}

.twz-stack > .twz-section-title:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.twz-subsection-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 14px;
    color: #4b5563;
    margin: 10px 0 3px;
}

.twz-stack > .twz-subsection-title:first-child {
    margin-top: 0;
}

.twz-subsection-body {
    margin: 0 0 4px;
}

/* The widgets inside carry their own tables of swatches and dials; none of them
   should be able to push the panel wider than the screen. */
.twz-subsection-body > table {
    max-width: 100%;
}

/* An item within a section - Header #1 - above the fields that belong to it. */
.twz-item-title {
    font-weight: 600;
    font-size: 14px;
    color: #1f2937;
    margin: 14px 0 2px;
    padding-bottom: 3px;
    border-bottom: 1px solid #eef0f3;
}

/* ---------------------------------------------------------------------------
   Element and range selector

   The dialog that builds a range. Everything here is scoped to the dialog, so
   the older selector in the column filter keeps the look it had.
   --------------------------------------------------------------------------- */
#range_selector_form {
    max-width: 780px;
    /* It is anchored 20px from the top, so leave as much at the foot. */
    max-height: calc(100vh - 40px);
    padding: 0;
    border-radius: 10px;
    color: #374151;
}

/* The dialog carries its own, in case the page around it does not. */
#range_selector_form .hidden {
    display: none;
}

#range_selector_form .range_selector_panel {
    padding: 18px 20px 16px;
}

#range_selector_form .range_selector_header {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 10px;
}

#range_selector_form .range_selector_tip {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 10px 12px;
    margin: 0 0 14px;
    font-size: 13px;
    font-style: normal;
    line-height: 1.5;
    color: #1e3a5f;
}

#range_selector_form .range_selector_settings {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 4px;
}

#range_selector_form fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

#range_selector_form .radio-item {
    padding: 10px 12px;
    border-radius: 6px;
}

#range_selector_form .radio-item + .radio-item {
    border-top: 1px solid #f1f5f9;
}

/* The whole choice is the label, so the words select it too. */
#range_selector_form .rs-choice {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    color: #1f2937;
}

#range_selector_form .radio-tip {
    display: block;
    margin: 3px 0 0 22px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #6b7280;
}

/* Two things were being cut off. Down: the dialog is opened with an inline
   overflow:hidden, so a panel taller than the window lost its foot - Continue
   and Close with it - and nothing scrolled. Across: a criterion is a row of
   operator, operand and subrange, wider than the dialog, so the last columns
   fell off the side.

   So the panel is capped to the window and scrolls, and the criteria table
   scrolls sideways within it. The buttons are stuck to the foot of the panel
   rather than held out of the scroll: on a short window that would leave the
   settings a few pixels tall, and it is the part being read. */
#range_selector_form .range_selector_panel {
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

#range_selector_form .range_selector_settings {
    overflow-x: auto;
}

/* Sticky, not fixed: where it does not apply the buttons simply scroll into
   view with the rest, which is still an improvement on being unreachable. */
#range_selector_form .range_selector_btns {
    position: sticky;
    bottom: 0;
    background: #fff;
}

#range_selector_form .operators_tbl {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 6px;
    margin: 10px 0 0 22px;
    width: calc(100% - 22px);
    background: transparent;
}

/* One criterion reads as one card. The spacing above already separates
   the rows, so this only needs to tint them. */
#range_selector_form .operators_tbl tr[data-rnum] > td {
    background: #f8f9fb;
    padding-top: 7px;
    padding-bottom: 7px;
}
#range_selector_form .operators_tbl tr[data-rnum] > td:first-child {
    border-radius: 6px 0 0 6px;
    padding-left: 8px;
}
#range_selector_form .operators_tbl tr[data-rnum] > td:last-child {
    border-radius: 0 6px 6px 0;
}

#range_selector_form .operators_tbl td {
    padding: 0 8px 0 0;
    vertical-align: middle;
    background: transparent;
    border: 0;
}

/* The heading row of a criterion table. */
/* :not(.hidden) so a heading the panel has switched off stays off - this
   selector is otherwise more specific than the class that hides it. */
#range_selector_form .operators_tbl tr[data-trnum] > td > span:not(.hidden) {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
}

#range_selector_form .operators_tbl select,
#range_selector_form .operators_tbl input[type="text"] {
    box-sizing: border-box;
    max-width: 100%;
}

#range_selector_form .range_options_tip {
    margin: 8px 0 0 22px;
    padding: 9px 11px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #475569;
}

#range_selector_form .range_options_tip:empty {
    display: none;
}

#range_selector_form .range_add_more {
    margin: 8px 0 2px 22px;
}

#range_selector_form .range_add_more a {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: #1d4ed8;
    text-decoration: none;
}

#range_selector_form .range_add_more a:hover {
    text-decoration: underline;
}

/* Worked examples, folded away until asked for. */
#range_selector_form .rs-examples {
    margin: 0 0 14px;
    padding: 8px 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    font-size: 13px;
}

#range_selector_form .rs-examples summary {
    cursor: pointer;
    font-weight: 600;
    color: #92400e;
}

#range_selector_form .rs-examples ul {
    margin: 8px 0 2px;
    padding-left: 18px;
}

#range_selector_form .rs-examples li {
    margin: 0 0 6px;
    line-height: 1.5;
    color: #5b4708;
}

/* A value the wizard already knows will not work. */
#range_selector_form input.rs-invalid {
    border: 1px solid #dc2626;
    background: #fef2f2;
}

#range_selector_form .rs-field-error {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.4;
    color: #b91c1c;
    max-width: 220px;
}

#range_selector_form .range_selector_btns {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #eef0f3;
}

@media (max-width: 600px) {
    /* At 60% of a phone's width, with the left edge pushed past the
       middle, the panel is about 200px across - too narrow to fill in.
       margin-left is reset because Bootstrap centres this modal with a
       negative one. */
    #range_selector_form {
        width: auto !important;
        left: 8px !important;
        right: 8px !important;
        margin-left: 0 !important;
    }

    #range_selector_form .range_selector_panel { padding: 14px; }

    /* A criterion cannot fold onto a second line without losing which
       heading each field belongs to, so it keeps its width and the
       settings box scrolls, rather than taking the page with it. */
    #range_selector_form .operators_tbl { min-width: 380px; }

    #range_selector_form .operators_tbl,
    #range_selector_form .range_options_tip,
    #range_selector_form .range_add_more { margin-left: 0; width: 100%; }
}

/* ---------------------------------------------------------------------------
   The save panel on the last step

   Three fields and nothing else, so they are stacked full width with their
   labels above them rather than put in the wizard's label-beside-control
   rows - a ruleset description needs the room. Same shape as the panel the
   chart wizard ends on.
   --------------------------------------------------------------------------- */
.twz-save-ruleset {
    max-width: 780px;
}

.twz-save-ruleset-title {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 600;
    color: #111827;
}

.twz-save-ruleset-intro {
    background: #fdf6e7;
    border: 1px solid #f0e2c0;
    border-radius: 8px;
    padding: 12px 14px;
    margin: 0 0 20px;
    font-size: 13px;
    line-height: 1.5;
    color: #7a5b1e;
}

.twz-save-ruleset-field {
    margin: 0 0 18px;
}

/* Block, so the control starts on the line below it. */
.twz-save-ruleset-field > label {
    display: block;
    margin: 0 0 6px;
    font-weight: 600;
    color: #374151;
}

.twz-save-ruleset-required {
    color: #dc2626;
    margin-left: 3px;
}

/* box-sizing so the padding cannot push these outside the panel. */
.twz-save-ruleset-field input[type="text"],
.twz-save-ruleset-field textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d7dbe0;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.4;
    color: #374151;
    background: #fff;
}

.twz-save-ruleset-field textarea {
    min-height: 104px;
    resize: vertical;
}

.twz-save-ruleset-field input[type="text"]:focus,
.twz-save-ruleset-field textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* ---------------------------------------------------------------------------
   Hiding things

   Step 4 switches whole boxes of settings on and off, and marks the ones that
   are off with these two classes. Both happen to be defined by this site's
   template - one by Gantry, one by rt_orion's own CSS - so the wizard has been
   relying on the template to make its own controls behave. On a different
   template it would not.

   No !important: jQuery's show() sets an inline display, and that is how these
   boxes are opened.
   --------------------------------------------------------------------------- */
.wz_container .hidden,
.wz_container .hidden_tr {
    display: none;
}

/* The switch at the top of a feature - "Enable sorting: [x] Yes". */
/* Bootstrap, which the site loads, makes every label a block - so the word
   beside a checkbox dropped onto a line of its own. These labels sit inline
   with the control they name. Written narrowly: the option cards and the
   field labels are labels too, and they are meant to be flex. */
.wz_container .enable_box label,
.wz_container .twz-field-control label,
.wz_container td label {
    display: inline;
    margin-bottom: 0;
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Wide widgets on a narrow screen

   A widget that is a genuine row of related controls - the border settings, the
   custom styling rules - has a width below which it stops making sense. Rather
   than squash it, let it scroll within the panel: the page itself then stays
   put, which is the part that makes a wizard unusable on a phone.
   --------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .wz_container table.border_radious_container,
    .wz_container table.dynamic_range_rules {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---------------------------------------------------------------------------
   Column widths

   One box per column of the table being styled: which column, and how wide.
   How many fit on a line is the browser's business - it used to be worked out
   in PHP from a constant, which could not know the width it was deciding for.
   --------------------------------------------------------------------------- */
.twz-widths {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

@media (max-width: 768px) {
    .twz-widths {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .twz-widths {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.twz-width-entry {
    border: 1px dotted #92979e;
    border-radius: 4px;
    padding: 5px 6px;
    min-width: 0;
}

.twz-width-entry select,
.twz-width-entry input {
    max-width: 100%;
}

/* ---------------------------------------------------------------------------
   Attribute grids

   Small labelled controls that belong together - the seven cell attributes, for
   one. As many across as fit, and no fewer than one.
   --------------------------------------------------------------------------- */
.twz-attrs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px 12px;
}

.twz-attr {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.twz-attr-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    margin: 0;
}

.twz-attr-control > select,
.twz-attr-control > input {
    max-width: 100%;
}

/* ---------------------------------------------------------------------------
   Option cards

   A choice shown as a picture: the radio, its caption and a small table of what
   it does. The grid fits as many across as the width allows rather than a number
   fixed in advance, so nothing is squashed on a narrow screen.
   --------------------------------------------------------------------------- */
.twz-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Wider cards for the header pickers: each carries a select as well. */
.twz-options--wide {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

/* The eight border choices, in rows of four, two, then one. Fixed counts
   rather than as-many-as-fit: eight pictures of a table read better in even
   rows than in whatever number happens to go across. minmax(0, 1fr) lets a
   card shrink instead of pushing the row wider than the panel. */
.twz-options--borders {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 768px) {
    .twz-options--borders {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .twz-options--borders {
        grid-template-columns: minmax(0, 1fr);
    }
}

.twz-option {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    cursor: pointer;
}

.twz-option-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 13px;
    color: #374151;
}

/* The caption of a group of cards - "Zebra striping", "Hover effect". */
.twz-options-title {
    font-weight: 600;
    font-size: 14px;
    color: #374151;
    margin: 14px 0 8px;
}

.twz-options-title:first-child {
    margin-top: 0;
}

/* Step progress.

   The same block the Calendar, Gallery, D3, Pricing Table and Chart wizards
   carry, so the six look like one product. The old rules put 40px under the
   wrapper and another 24px under the list - 64px of nothing before the fields
   started. */
.twz-progress {
    margin-bottom: 24px;
}

.twz-progress-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    overflow: hidden;
}

.twz-progress-step {
    flex: 1 1 140px;
    border-right: 1px solid #d1d5db;
}

.twz-progress-step:last-child {
    border-right: 0;
}

.twz-progress-step > a,
.twz-progress-step > span {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #f3f4f6;
    color: #4b5563;
    text-decoration: none;
    height: 100%;
    box-sizing: border-box;
}

.twz-progress-step > a:hover {
    background: #e5e7eb;
    text-decoration: none;
}

.twz-progress-step.is-current > a,
.twz-progress-step.is-current > span {
    background: #1d4ed8;
    color: #ffffff;
}

.twz-progress-step.is-done > a {
    color: #1d4ed8;
}

.twz-progress-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.12);
    font-weight: 700;
    font-size: 13px;
}

.twz-progress-step.is-current .twz-progress-number {
    background: rgba(255, 255, 255, 0.25);
}

.twz-progress-title {
    font-weight: 600;    
}

/* The list already wraps on its own - flex: 1 1 200px means a step claims a new
   row rather than being squeezed - so narrow screens only need the padding and
   the label to come down a little. */
@media (max-width: 768px) {
    .twz-progress-step > a,
    .twz-progress-step > span {
        padding: 10px 12px;
        gap: 8px;
    }

    .twz-progress-title {
        font-size: 13px;
    }
}

/* On a narrow screen the steps stack one per row, so the divider moves from the
   right edge to the bottom. */
@media (max-width: 600px) {
    .twz-progress-step {
        flex: 1 1 100%;
        border-right: 0;
        border-bottom: 1px solid #d1d5db;
    }

    .twz-progress-step:last-child {
        border-bottom: 0;
    }
}