/* =========================================================
   Grid / Card Layout
   ========================================================= */
.grid-view .card-header {
  display: block;
  padding: 30px 25px;
}

.grid-view .card-header h5 {
  font-size: 1.25rem;
  line-height: 1.25rem;
  font-weight: var(--tblr-font-weight-medium);
}

.grid-view .card-footer .pagination {
  margin: auto !important;
}

.grid-view .card-footer .page-size {
  width: 70px;
}

.grid-view-fullwidth .table-list {
  table-layout: auto !important;
  width: auto !important;
  min-width: 100% !important;
}

.grid-view-fullwidth .table-list thead th,
.grid-view-fullwidth .table-list tbody td,
.grid-view-fullwidth .table-list tfoot th,
.grid-view-fullwidth .table-list tfoot td,
.grid-view-fullwidth .table-list .table-cell {
  width: auto !important;
  max-width: none !important;
}

/* =========================================================
   Kartik Grid / Panels / Headers
   ========================================================= */
.kv-panel-before {
  padding: var(--tblr-card-cap-padding-y) var(--tblr-card-cap-padding-x) !important;
  border-bottom: transparent !important;
}

#user-grid .kv-panel-before,
#role-grid .kv-panel-before,
#permission-grid .kv-panel-before,
#rule-grid .kv-panel-before {
  border-bottom: var(--tblr-card-border-width) solid var(--tblr-card-border-color) !important;
}

.kv-table-header {
  background: transparent !important;
  border-bottom: var(--tblr-card-border-width) solid var(--tblr-card-border-color);
}

.kv-table-header th,
.kv-table-header td {
  background: transparent !important;
}

#user-grid .kv-table-header th,
#user-grid .kv-table-header td,
#role-grid .kv-table-header th,
#role-grid .kv-table-header td,
#permission-grid .kv-table-header th,
#permission-grid .kv-table-header td,
#rule-grid .kv-table-header th,
#rule-grid .kv-table-header td {
  background: var(--tblr-bg-surface-tertiary) !important;
}

.kv-table-header .filters {
  display: none;
}

.table-with-filters .kv-table-header .filters {
  display: table-row !important;
}

.table-with-filters .kv-table-header .filters > td:nth-child(1) {
  padding-left: 0.75rem;
}

.kv-grid-container > table > thead > tr > th > a {
  color: inherit !important;
}

/* =========================================================
   Table State / Warning Highlight
   ========================================================= */
.table > tbody > tr.warning > td,
.table > tbody > tr.warning > th,
.table > tbody > tr > td.warning,
.table > tbody > tr > th.warning,
.table > tfoot > tr.warning > td,
.table > tfoot > tr.warning > th,
.table > tfoot > tr > td.warning,
.table > tfoot > tr > th.warning,
.table > thead > tr.warning > td,
.table > thead > tr.warning > th,
.table > thead > tr > td.warning,
.table > thead > tr > th.warning,
.table > tbody > tr.warning > * {
  background-color: rgba(var(--tblr-primary-rgb), 0.04) !important;
  --tblr-table-accent-bg: transparent !important;
}

.table > :not(caption) > * > * {
  background: #fff0;
}

/* =========================================================
   Side Nav
   ========================================================= */
.kv-sidenav li a {
  border-bottom: none !important;
}

.kv-sidenav li:not(:last-child) a {
  border-bottom: var(--tblr-border-width) solid var(--tblr-border-color-translucent) !important;
}

/* =========================================================
   Forms / Inputs / Helpers
   ========================================================= */
.kv-form-bs4 .hint-block {
  font-size: inherit !important;
}

.form-group,
.form-action {
  margin-bottom: 15px;
}

.form-group .form-hint {
  margin-top: 0.5rem;
}

.form-check-image {
  padding-left: inherit;
  position: relative;
}

.form-check-image .form-check-input {
  z-index: 1;
  margin-left: 0;
  float: none;
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
}

.form-check-image .form-check-label {
  width: 100%;
  max-width: 100%;
  position: relative;
  cursor: pointer;
}

.form-check-image.form-check-inline .form-check-label {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.form-check-figure {
  display: inline-block;
  margin: 0;
  user-select: none;
  border: var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color);
  border-radius: 3px;
}

.form-check-input:checked ~ .form-check-label > .form-check-figure {
  border-color: var(--tblr-primary);
}

.form-check-image.form-check-inline .form-check-text {
  margin-top: 10px;
}

.file-input i {
  margin-right: 5px;
}

.file-caption-icon {
  padding: 0 5px !important;
}

.file-caption-name {
  border: 0;
  font-size: 1em;
  line-height: 1em;
}

.input-group-align-items-start {
  align-items: start;
  margin-top: 12px;
}

/* =========================================================
   Modals / Z-Index
   ========================================================= */
.modal-backdrop + .modal-backdrop {
  z-index: 1080 !important;
}

.modal.type-danger {
  z-index: 1090 !important;
}

/* =========================================================
   Card Actions
   ========================================================= */
.card .card-actions a {
  color: #6c7a91;
}

.card .card-actions a:hover {
  color: #313c52;
}

/* =========================================================
   Toasts
   ========================================================= */
.toast {
  --tblr-toast-zindex: 1090;
  --tblr-toast-padding-x: 0.75rem;
  --tblr-toast-padding-y: 0.5rem;
  --tblr-toast-spacing: calc(var(--tblr-page-padding) * 2);
  --tblr-toast-max-width: 350px;
  --tblr-toast-font-size: 0.875rem;
  --tblr-toast-color: ;
  --tblr-toast-bg: rgba(var(--tblr-body-bg-rgb), 0.85);
  --tblr-toast-border-width: var(--tblr-border-width);
  --tblr-toast-border-color: var(--tblr-border-color);
  --tblr-toast-border-radius: var(--tblr-border-radius);
  --tblr-toast-box-shadow: var(--tblr-box-shadow);
  --tblr-toast-header-color: var(--tblr-gray-500);
  --tblr-toast-header-bg: rgba(var(--tblr-body-bg-rgb), 0.85);
  --tblr-toast-header-border-color: var(--tblr-border-color);

  width: var(--tblr-toast-max-width);
  max-width: 100%;
  font-size: var(--tblr-toast-font-size);
  color: var(--tblr-toast-color);
  pointer-events: auto;
  background-color: var(--tblr-toast-bg);
  background-clip: padding-box;
  border: var(--tblr-toast-border-width) solid var(--tblr-toast-border-color);
  box-shadow: var(--tblr-toast-box-shadow);
  border-radius: var(--tblr-toast-border-radius);
}

.toast.showing {
  opacity: 0;
}

.toast:not(.show) {
  display: none;
}

.toast-container {
  --tblr-toast-zindex: 1090;
  position: absolute;
  z-index: var(--tblr-toast-zindex);
  width: max-content;
  max-width: 100%;
  pointer-events: none;
}

.toast-container > :not(:last-child) {
  margin-bottom: var(--tblr-toast-spacing);
}

.toast-header {
  display: flex;
  align-items: center;
  padding: var(--tblr-toast-padding-y) var(--tblr-toast-padding-x);
  color: var(--tblr-toast-header-color);
  background-color: var(--tblr-toast-header-bg);
  background-clip: padding-box;
  border-bottom: var(--tblr-toast-border-width) solid var(--tblr-toast-header-border-color);
  border-top-left-radius: calc(var(--tblr-toast-border-radius) - var(--tblr-toast-border-width));
  border-top-right-radius: calc(var(--tblr-toast-border-radius) - var(--tblr-toast-border-width));
  user-select: none;
}

.toast-header .btn-close {
  margin-right: calc(-0.5 * var(--tblr-toast-padding-x));
  margin-left: var(--tblr-toast-padding-x);
}

.toast-body {
  padding: var(--tblr-toast-padding-x);
  word-wrap: break-word;
}

/* =========================================================
   Badges / Legacy Bootstrap Bits
   ========================================================= */
.badge {
  color: #fff;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #ecf0f1;
  border: 1px solid #d7e0e2;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.05);
}

.label {
  display: inline;
  padding: 0.2em 0.6em 0.3em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25em;
}

.label-default {
  background-color: #6e8292;
}

/* =========================================================
   Bootstrap Dialog / RTL
   ========================================================= */
.bootstrap-dialog .btn span {
  margin-right: 5px;
  margin-left: 0;
}

[dir="rtl"] .bootstrap-dialog .btn span {
  margin-right: 0;
  margin-left: 5px;
}

/* =========================================================
   Bootstrap Switch
   ========================================================= */
.bootstrap-switch {
  border-color: var(--tblr-border-color) !important;
}

.bootstrap-switch.bootstrap-switch-focused {
  border-color: #83b7e8 !important;
  box-shadow: var(--tblr-shadow-input), 0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.25) !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
  background: var(--tblr-light) !important;
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
  background: var(--tblr-primary) !important;
}

html[data-bs-theme="dark"] .bootstrap-switch .bootstrap-switch-label {
  background: var(--tblr-bg-forms) !important;
  border-color: var(--tblr-border-color);
  color: var(--tblr-secondary-color) !important;
}

html[data-bs-theme="dark"] .bootstrap-switch .bootstrap-switch-default {
  background: var(--tblr-border-color) !important;
  border-color: #243049 !important;
  color: #f8fafc !important;
}

html[data-bs-theme="dark"] .bootstrap-switch input[type="radio"],
html[data-bs-theme="dark"] .bootstrap-switch input[type="checkbox"] {
  box-shadow: none !important;
}

/* =========================================================
   Select2 (Krajee BS5) + Dark Theme Overrides
   ========================================================= */
.select2-container--krajee-bs5.select2-container--open:not(.select2-container--disabled) .select2-selection,
.select2-container--krajee-bs5:not(.select2-container--disabled) .select2-selection:focus,
.select2-container--krajee-bs5:not(.select2-container--disabled) .select2-dropdown {
  box-shadow: none !important;
  border-color: #90b5e2 !important;
  outline: 0 !important;
}

.select2-container--krajee-bs5 .select2-selection--single {
  height: 36px !important;
}

.select2-container--krajee-bs5 .select2-selection--multiple {
  box-shadow: var(--tblr-shadow-input) !important;
  border-color: var(--tblr-border-color) !important;
  min-height: 36px !important;
  padding: 0;
}

.select2-container--krajee-bs5 .select2-selection__clear {
  margin-right: 5px !important;
}

.select2-container--krajee-bs5 .select2-results__option--highlighted[aria-selected] {
  background-color: var(--tblr-primary) !important;
}

.select2-container--krajee-bs5 .select2-selection--multiple .select2-search--inline {
  margin-left: 5px;
  vertical-align: inherit;
}

.select2-container--krajee-bs5 .select2-selection--multiple .select2-search--inline .select2-search__field {
  margin: 0 8px !important;
}

.select2-container--krajee-bs5 .select2-selection--multiple .select2-selection__rendered {
  line-height: 32px !important;
  padding: 0 !important;
  overflow: inherit !important;
}

.select2-container--krajee-bs5 .select2-selection--multiple .select2-selection__choice {
  float: left;
  font-size: 1em !important;
  padding: 0 5px !important;
  margin: 0 2px 2px 0;
}

.select2-container--krajee-bs5 .select2-selection--multiple .select2-selection__choice__remove {
  margin-top: 1px;
}

html[data-bs-theme="dark"] .select2-container .select2-selection {
  background-color: var(--tblr-bg-forms) !important;
  border: 1px solid var(--tblr-border-color);
}

html[data-bs-theme="dark"] .select2-container .select2-selection--single {
  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='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

html[data-bs-theme="dark"] .select2-container .select2-selection--single .select2-selection__rendered,
html[data-bs-theme="dark"] .select2-container .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
  color: #dee2e6 !important;
}

html[data-bs-theme="dark"] .select2-container .select2-dropdown .select2-search .select2-search__field {
  background-color: transparent !important;
  color: #dee2e6 !important;
}

html[data-bs-theme="dark"] .select2-container .select2-dropdown {
  color: #dee2e6 !important;
  border: 1px solid #495057 !important;
}

/* =========================================================
   Date Range Picker + Dark Theme
   ========================================================= */
.daterangepicker {
  border: 1px solid var(--tblr-border-color-translucent) !important;
}

[data-bs-theme="dark"] .daterangepicker {
  background: var(--tblr-bg-surface) !important;
  color: #fff;
}

[data-bs-theme="dark"] .daterangepicker:before {
  border-bottom-color: var(--tblr-border-color-translucent) !important;
}

[data-bs-theme="dark"] .daterangepicker:after {
  border-bottom-color: var(--tblr-bg-surface) !important;
}

.daterangepicker .calendar-table {
  background-color: transparent !important;
  border-color: transparent !important;
}

.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
  background-color: transparent !important;
}

.daterangepicker .calendar-table td:hover,
.daterangepicker .calendar-table th:hover,
.daterangepicker .ranges li:hover,
.daterangepicker td.in-range {
  background-color: rgba(var(--tblr-azure-lt-rgb), 1) !important;
  color: inherit !important;
}

[data-bs-theme="dark"] .daterangepicker .ranges li:hover {
  background-color: var(--tblr-bg-surface-dark) !important;
}

.daterangepicker .ranges li.active,
.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: var(--tblr-primary) !important;
  color: var(--tblr-primary-fg) !important;
}

[data-bs-theme="dark"] .daterangepicker .calendar-table td:hover,
[data-bs-theme="dark"] .daterangepicker .calendar-table th:hover {
  color: var(--tblr-gray-900) !important;
}

[data-bs-theme="dark"] .daterangepicker .calendar-table .next span,
[data-bs-theme="dark"] .daterangepicker .calendar-table .prev span {
  border-color: var(--tblr-white) !important;
}

[data-bs-theme="dark"] .daterangepicker .calendar-table .next:hover span,
[data-bs-theme="dark"] .daterangepicker .calendar-table .prev:hover span {
  border-color: var(--tblr-bg-surface-dark) !important;
}

/* =========================================================
   Alerts
   ========================================================= */
.alert-container .alert {
  margin: var(--tblr-page-padding-y) 0 0 0;
  padding: var(--tblr-alert-padding-y) var(--tblr-alert-padding-x);
  padding-right: 3rem;
  color: var(--tblr-alert-color);
  border-radius: var(--tblr-alert-border-radius);
  border: var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color-translucent);
  border-left: 0.25rem var(--tblr-border-style) var(--tblr-alert-color);
  box-shadow: rgb(24 36 51 / 0.04) 0 2px 4px 0;
  background-color: #fff;
}

[data-bs-theme="dark"] .alert-container .alert {
  background-color: inherit;
}

.alert .alert-title .far {
  font-size: 16px;
}

/* =========================================================
   Navbar / Nav Links
   ========================================================= */
.nav-link {
  justify-content: center;
}

@media only screen and (max-width: 768px) {
  .navbar-expand-md .navbar-collapse .dropdown-toggle:after {
    margin-left: 0.4em;
  }
}

/* =========================================================
   TinyMCE / Autocomplete
   ========================================================= */
.tox .tox-autocompleter {
  overflow: visible !important;
}

.tox .tox-autocompleter .tox-menu {
  max-height: 400px;
  overflow-y: scroll;
  box-shadow: 0 16px 24px 2px rgb(0 0 0 / 0.07),
    0 6px 30px 5px rgb(0 0 0 / 0.06),
    0 8px 10px -5px rgb(0 0 0 / 0.1);
}

.tox .tox-autocompleter .tox-collection__group,
.tox .tox-autocompleter .tox-collection__item {
  padding: 0 !important;
}

.tox .tox-autocompleter .tox-collection__item {
  align-items: normal;
}

.tox .tox-autocompleter .tox-collection__item-icon {
  align-items: center;
  display: inline;
  height: initial;
  width: initial;
  font-size: 12px;
  line-height: 20px;
  font-weight: 700;
  padding: 6px 12px;
}

.tox .tox-autocompleter .tox-collection__item-label {
  font-size: 12px;
  line-height: 20px;
  padding: 6px 12px 6px 0;
  white-space: nowrap;
  margin-left: 0 !important;
}

.main .textcomplete-dropdown .textcomplete-item a:hover,
.tox .tox-autocompleter .tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
  background-color: var(--tblr-primary);
  color: var(--tblr-primary-fg);
}

.main .textcomplete-dropdown {
  padding: 5px 0;
  max-height: 400px;
  overflow-y: scroll;
}

.main .textcomplete-dropdown .textcomplete-item a {
  display: block;
  font-size: 12px;
  line-height: 20px;
  cursor: pointer;
  padding: 6px 12px;
}

.main .textcomplete-dropdown .textcomplete-item a span {
  font-weight: 700;
  display: inline-block;
  margin-right: 10px;
}

/* =========================================================
   Form Grid Hover Helpers
   ========================================================= */
.form-grid .display-on-hover {
  visibility: hidden;
}

.form-grid:hover .display-on-hover {
  visibility: visible;
}

.form-settings .nav-link {
  padding: 12px;
}

/* =========================================================
   jQuery UI Sortable / Rule Builder
   ========================================================= */
.ui-sortable-placeholder {
  border: 1px dashed #d5d8dc;
  border-radius: 4px;
  background: rgb(243 245 247 / 0.2);
  height: 125px;
  margin-bottom: 15px;
}

.rule-builder .ui-sortable-helper {
  cursor: move;
}

.rule-builder .ui-editable-invalid {
  background: red !important;
}

.rule-builder .unsaved-changes {
  vertical-align: middle;
}

.rule-builder .rule-name {
  color: #92a1ad;
  font-size: 16px;
  line-height: 1.42857143;
  padding: 6px 12px;
  margin: -5px 0 10px 0;
  border: 1px solid #fff0;
  border-bottom-color: var(--tblr-card-border-color) !important;
}

.rule-builder .rule-name:empty::after {
  content: attr(data-placeholder);
}

.rule-builder .rule-name:hover,
.rule-builder .rule-name:focus {
  display: block;
  width: 100%;
  font-weight: 400;
  background-color: #fff;
  background-image: none;
  transition: border-color ease-in-out 0.15s;
  border-radius: 4px;
}

.rule-builder .rule-name:hover {
  border-color: var(--tblr-card-border-color) !important;
}

.rule-builder .rule-name:focus {
  border: var(--tblr-card-border-width) solid var(--tblr-card-border-color) !important;
  outline: 0;
}

.rule-builder .rules-group-container {
  padding: 20px;
  border: 1px solid #d5d8dc;
  border-radius: 4px;
  background: rgb(243 245 247 / 0.05);
  margin-bottom: 15px;
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.05);
}

.rule-builder .form-control,
.rule-builder .form-select {
  display: inline;
  width: auto;
  min-width: 70px;
}

.checkbox label:after {
  padding-left: 3px;
  padding-top: 0;
  font-size: 0.875em;
}

.rule-builder-conditions > .conditional > .remove-condition {
  display: none;
}

.rule-builder .conditional {
  padding-left: 70px;
}

.rule-builder .conditional .all-any-none-wrapper {
  margin: 0 20px 0 -70px;
  display: inline-block;
}

.rule-builder .add-rule,
.rule-builder .add-condition,
.rule-builder .remove {
  margin: auto 5px;
}

.rule-builder .conditional .conditional {
  margin-top: 10px;
  padding: 10px 10px 10px 80px;
  border: 1px solid #d5d8dc;
  border-radius: 5px;
  background: rgb(243 245 247 / 0.05);
}

.rule-builder .rule {
  margin-top: 5px;
}

.rule-builder .rule input {
  margin-top: 5px;
  margin-right: 10px;
  width: 250px;
  max-width: 250px;
}

.rule-builder .rule select {
  margin-top: 5px;
  margin-right: 10px;
  max-width: 200px;
}

.rule-builder .action-buttons {
  margin: 20px 0;
}

.rule-builder .action {
  margin: 5px 0;
}

.rule-builder .action .subfields,
.rule-builder .action .subfields .field {
  display: inline;
}

.rule-builder .action .subfields .control-label,
.rule-builder .action .subfields .field .control-label {
  font-weight: 400;
  margin-right: 10px;
}

.rule-builder .action select,
.rule-builder .action input,
.rule-builder .action textarea {
  margin-top: 5px;
  margin-right: 10px;
  max-width: 250px;
}

.rule-builder .action textarea[name="formula"] {
  width: 290px;
  max-width: 480px;
}

.rule-builder .action select[multiple] {
  vertical-align: top;
  overflow: scroll;
}

.rule-builder .action textarea {
  vertical-align: top;
  height: 50px;
}

.rule-builder .settings {
  text-align: right;
}

.rule-builder .rules-group-container {
  background-color: var(--tblr-bg-surface-tertiary) !important;
  border: var(--tblr-card-border-width) solid var(--tblr-card-border-color) !important;
}

.rule-builder .rules-group-container .btn-sm {
  padding: 1px 5px;
}

.rule-builder .rules-group-container .btn-sm .fa {
  margin-right: 3px;
}

/* =========================================================
   Submissions Page
   ========================================================= */
.submissions-page .dropdown-item .form-check:not(.form-switch) {
  margin: 0;
  padding: 0;
}

.submissions-page .btn-for-toggle:first-child {
  display: block;
}

.submissions-page .grid-view-fullwidth .btn-for-toggle:first-child {
  display: none;
}

.submissions-page .btn-for-toggle:last-child {
  display: none;
}

.submissions-page .grid-view-fullwidth .btn-for-toggle:last-child {
  display: block;
}

.submissions-page .table-list th,
.submissions-page .table-list td,
.submissions-page .table-list .table-cell {
  border-left: 0;
  max-width: 120px;
  overflow: hidden;
  white-space: nowrap;
  word-wrap: break-word;
  text-overflow: ellipsis;
  vertical-align: middle;
  display: table-cell;
}

.submissions-page .table-list .table-cell.view {
  cursor: pointer;
}

.submissions-page .table-detail th {
  width: 30% !important;
}

.submissions-page .table-detail tbody td[data-key^="textarea_"] {
  padding-right: 12px;
  white-space: pre-wrap;
}

.submissions-page .table-detail #map {
  height: 300px;
}

.submissions-page .table-detail .card-body {
  white-space: pre-line;
}

.submissions-page #loading {
  display: none;
}

@media only screen and (min-width: 768px) {
  .submissions-page #loading {
    float: left;
    margin-right: 5px;
  }
}

.submissions-page .pagination i {
  font-size: 10px;
  margin-bottom: 2px;
}

.submissions-page .commentBox {
  border: 1px solid var(--tblr-border-color-translucent);
}

.submissions-page .commentBox .titleBox {
  padding: 0.75rem 0.75rem;
  border-bottom: 1px solid var(--tblr-border-color-translucent);
}

.submissions-page .commentBox .actionBox {
  background-color: var(--tblr-table-bg);
}

.submissions-page .commentBox .actionBox .form-group * {
  width: 100%;
}

.submissions-page .commentBox .commentList {
  padding: 0;
  margin: 0;
  list-style: none;
  max-height: 325px;
  overflow: auto;
}

.submissions-page .commentBox .commenterImage {
  width: 30px;
  margin-right: 5px;
  height: 100%;
  float: left;
}

.submissions-page .commentBox .commenterImage img {
  width: 100%;
  border-radius: 50%;
}

.submissions-page .commentBox .commentText {
  color: #494f57;
  font-size: 12px;
}

.submissions-page .commentBox .commentText p {
  margin: 0;
}

.submissions-page .commentBox .commentText .author,
.submissions-page .commentBox .commentText .date {
  color: #aaa;
  font-size: 11px;
}

.submissions-page .commentBox .commentText .deleteComment {
  font-size: 10px;
  color: #8e9aa6;
  cursor: pointer;
}

.submissions-page .commentBox .commentText .deleteComment:hover {
  color: #dc3023;
}

/* =========================================================
   Report Page
   ========================================================= */
.report-page .grid-editable {
  background-color: #fafad2;
}

[data-bs-theme="dark"] .report-page .grid-editable {
  background-color: #1d273b;
}

.report-page .grid-stack-item > .ui-resizable-se {
  bottom: 25px;
}

.report-page .grid-stack-item-content {
  inset: 5px !important;
}

.report-page .grid-stack-item-content .card-body {
  padding: 0 !important;
}

.report-page .chart-title {
  padding: 20px 20px 0 20px;
  margin: 0;
}

.report-page .chart-actions {
  display: none;
  position: absolute;
  top: 20px;
  right: 20px;
}

.report-page .grid-editable .chart-actions {
  display: block;
}

.report-page .chart {
  padding: 10px 0 10px 0 !important;
  min-height: auto;
  text-align: center !important;
}

.report-page svg > g.dc-legend > g > text {
  transform: translateY(5px);
}

.dc-chart g.row rect {
  width: revert-layer;
}

.analytics-page .dc-chart {
  float: none;
  display: inline-block;
}

/* =========================================================
   Conversion Rates Widget
   ========================================================= */
#conversion-rates {
  text-align: center;
  margin-top: 15px;
}

#conversion-rates ul {
  list-style: none;
  display: inline-table;
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: var(--tblr-primary);
  border-radius: 4px;
}

#conversion-rates ul li div {
  display: block;
  float: left;
  width: 25%;
  height: 86px;
  padding: 10px 0;
  position: relative;
  margin: 0;
  color: #fff;
}

#conversion-rates ul li:first-child div {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

#conversion-rates ul li:last-child div {
  background-color: #9b59b6;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

#conversion-rates ul li div h2 {
  margin: 0;
  font-size: 24px;
}

#conversion-rates ul li div span {
  font-size: 11px;
  line-height: 11px;
}

#conversion-rates ul li div span.percentage {
  font-size: 1em;
}

#conversion-rates ul li div span.percentage:after {
  content: "%";
}

#conversion-rates ul li div h2 span {
  font-size: 24px;
}

@media only screen and (min-width: 992px) {
  #conversion-rates ul li {
    display: inline;
  }

  #conversion-rates ul li div {
    height: 80px;
    padding: 10px 0 0 40px;
    border: 0;
  }

  #conversion-rates ul li div h2 {
    font-size: 32px;
  }

  #conversion-rates ul li div span {
    font-size: 14px;
    line-height: 26px;
  }

  #conversion-rates ul li div h2 span {
    font-size: 32px;
  }

  #conversion-rates ul li div:after {
    content: "";
    border-top: 40px solid #fff0;
    border-bottom: 40px solid #fff0;
    border-left: 40px solid var(--tblr-primary);
    position: absolute;
    right: -40px;
    top: 0;
    z-index: 1;
  }

  #conversion-rates ul li div:before {
    content: "";
    border-top: 40px solid #fff0;
    border-bottom: 40px solid #fff0;
    border-left: 40px solid #000;
    position: absolute;
    left: 0;
    top: 0;
  }

  #conversion-rates ul li:first-child div:before {
    display: none;
  }

  #conversion-rates ul li:last-child div {
    background-color: var(--tblr-purple);
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }

  #conversion-rates ul li:last-child div:after {
    display: none;
  }

  #conversion-rates ul li div span.percentage {
    position: absolute;
    z-index: 2;
    top: 25px;
    right: -15px;
  }

  #conversion-rates {
    margin-top: 0;
  }

  .analytics-page .page-body .row {
    margin-bottom: 30px;
  }
}

/* =========================================================
   Steps Component
   ========================================================= */
.steps {
  display: block;
  padding: 5px 0 0;
  overflow: hidden;
  text-align: center;
  border: none;
  margin: 0 0 10px 0;
}

.steps .step {
  display: inline-block;
  position: relative;
  margin-right: -4px;
  text-align: center;
  min-height: 28px;
  line-height: 28px;
}

.steps .step:before,
.steps .step:after {
  position: absolute;
  background-color: #e6e9ed;
  top: 11px;
  width: 50%;
  height: 6px;
  content: "";
}

.steps .step:before {
  left: 0;
}

.steps .step:after {
  right: 0;
}

.steps .step:first-child:before,
.steps .step:last-child:after,
.steps .step.no-stage:before,
.steps .step.no-stage:after {
  content: none;
}

.steps .step.current .stage,
.steps .step.success .stage {
  background-color: #92a1ad;
  color: #fff;
}

.steps .step.current:after,
.steps .step.current:before,
.steps .step.success:after,
.steps .step.success:before {
  background-color: #92a1ad;
}

.steps .step .stage {
  display: inline-block;
  width: 28px;
  height: 28px;
  background-color: #e6e9ed;
  color: #627483;
  text-align: center;
  font-size: 18px;
  position: relative;
  z-index: 1;
  border-radius: 50%;
}

.steps .step .stage .glyphicon {
  font-size: 15px;
}

.steps .step .title {
  padding-right: 5px;
  padding-left: 5px;
}

.steps .step:first-child .title {
  padding-left: 0;
}

.steps .no-title {
  width: 48px;
}

.steps .no-title:first-child {
  width: 38px;
  text-align: left;
}

.steps .no-stage .title {
  padding: 0 10px;
  margin: 0 5px 5px 5px;
  border: 1px solid #6e8292;
  border-radius: 4px;
  text-align: center;
}

.steps .no-stage:first-child .title {
  padding: 0 10px;
}

.steps .no-stage.current .title {
  color: #fff;
  background-color: #6e8292;
  border-color: #637584;
}

/* =========================================================
   NPS Question
   ========================================================= */
.nps-question .table {
  margin-bottom: 10px;
}

.nps-question .table .table {
  margin-bottom: 0;
  background-color: #fff0;
}

.nps-question .table > tbody > tr > td {
  border: 0;
  padding: 0;
}

.nps-question .help-block {
  margin-bottom: 5px;
}

.nps-question .answer-container {
  margin-top: 0;
  min-height: 0.01%;
  overflow-x: auto;
}

@media (max-width: 767px) {
  .nps-question .answer-container {
    width: 100%;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
}

.nps-question .answer-container table {
  width: 100% !important;
}

.nps-question .answer-container table .answer-label .label-visible {
  padding: 0 !important;
  text-align: center !important;
  vertical-align: middle !important;
  width: 100px !important;
}

.nps-question .answer-container.lg {
  width: 100%;
}

.nps-question .answer-container.md {
  width: 75%;
}

.nps-question .answer-container.sm {
  width: 50%;
}

.nps-question .answer-container .answer-label {
  width: 33%;
  padding: 5px 0;
}

.nps-question .answer-container .answer-input {
  width: 9.09090909%;
  text-align: center;
  padding: 5px 1px;
}

.nps-question .answer-container .answer-input:first-child {
  padding-left: 0;
}

.nps-question .answer-container .answer-input:last-child {
  padding-right: 0;
}

.nps-question .answer-container .answer-input label span {
  display: block;
}

.nps-question .answer-container .btn-nps {
  width: 100%;
  border-radius: 4px;
  cursor: pointer;
  transition: all 100ms ease-in-out;
}

.nps-question .answer-container .btn-label {
  background-color: inherit;
  color: inherit;
  border: inherit;
}

.nps-question .answer-container .btn-primary.btn-nps {
  background-color: #f1f2f3;
  color: #434a54;
  border: 1px solid #f1f2f3;
}

.nps-question .answer-container .btn-primary.btn-nps:hover {
  background-color: #6e8292;
  color: #fff;
}

.nps-question .answer-container input[type="radio"]:checked + .btn-primary.btn-nps {
  color: #fff;
  background-color: #586875;
  border-color: #495661;
}

.nps-question .answer-container input[type="radio"]:checked + .btn-warning.btn-nps {
  color: #fff;
  background-color: #eb950c;
  border-color: #c9800a;
}

.nps-question .answer-container input[type="radio"]:checked + .btn-danger.btn-nps {
  color: #fff;
  background-color: #b0261c;
  border-color: #912017;
}

.nps-question .answer-container input[type="radio"]:checked + .btn-info.btn-nps {
  color: #fff;
  background-color: #22b1e3;
  border-color: #199bc8;
}

.nps-question .answer-container input[type="radio"]:checked + .btn-success.btn-nps {
  color: #fff;
  background-color: #338839;
  border-color: #296e2e;
}

.nps-question .answer-container .btn-nps span {
  text-align: center;
  display: block;
  font-weight: 400;
}

.nps-question .answer-container .btn-nps.disabled,
.nps-question .answer-container .btn-nps[disabled],
.nps-question .answer-container .btn-nps.disabled:hover,
.nps-question .answer-container .btn-nps[disabled]:hover {
  background-color: #f1f2f3;
  color: inherit;
  cursor: not-allowed;
  opacity: 0.65;
  box-shadow: none;
}

/* =========================================================
   Misc
   ========================================================= */
.mt-label {
  margin-top: 1.75rem !important;
}

.theme-create #editor,
.theme-update #editor {
  min-height: 350px;
}