@charset "UTF-8";
.vq-icon {
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.vq-icon::before {
  font-family: "Material Icons";
  font-size: 1.5rem;
  color: var(--control-content-font-color);
  font-weight: initial;
}
.vq-icon.outlined::before {
  font-family: "Material Icons Outlined";
}
.vq-icon.big::before {
  font-size: 2rem;
}
.vq-icon.primary::before {
  color: var(--primary-color);
}
.vq-icon.secondary::before {
  color: var(--secondary-text-color);
}
.vq-icon.download::before {
  content: var(--icon-download);
}
.vq-icon.visibility-off::before {
  content: var(--icon-visibility-off);
}
.vq-icon.view-column::before {
  content: var(--icon-view-column);
}
.vq-icon.calendar-view-day::before {
  content: var(--icon-calendar-view-day);
}
.vq-icon.highlight-off::before {
  content: var(--icon-highlight-off);
}
.vq-icon.table-view::before {
  content: var(--icon-table-view);
}
.vq-icon.edit::before {
  content: var(--icon-edit);
}
.vq-icon.delete::before {
  content: var(--icon-delete);
}
.vq-icon.save::before {
  content: var(--icon-save);
}
.vq-icon.close::before {
  content: var(--icon-close);
}
.vq-icon.fullscreen-exit::before {
  content: var(--icon-fullscreen-exit);
}
.vq-icon.fullscreen::before {
  content: var(--icon-fullscreen);
}
.vq-icon.cast::before {
  content: var(--icon-cast);
}
.vq-icon.undo::before {
  content: var(--icon-undo);
}
.vq-icon.attach-file::before {
  content: var(--icon-attach-file);
}
.vq-icon.arrow-up::before {
  content: var(--icon-arrow-up);
}
.vq-icon.arrow-down::before {
  content: var(--icon-arrow-down);
}
.vq-icon.more-horiz::before {
  content: "more_horiz";
}
.vq-icon.queue::before {
  content: "queue";
}
.vq-icon.arrow-forward::before {
  content: "arrow_forward_ios";
}
.vq-icon.arrow-back::before {
  content: "arrow_back_ios";
}
.vq-icon.file::before {
  content: "note";
}
.vq-icon.play::before {
  content: "play_circle";
}
.vq-icon.pause::before {
  content: "pause_circle";
}
.vq-icon.stop::before {
  content: "stop_circle";
}
.vq-icon.autorenew::before {
  content: "autorenew";
}
.vq-icon.minimize::before {
  content: "minimize";
}

:root {
  --menu-width-non-expanded: 0.5rem;
  /* Colors */
  --primary-dark-color: #001064;
  --primary-color: #283593;
  --primary-light-color: #ECF3FF;
  --contrast-color: #FFFFFF;
  --primary-text-color: #323232;
  --secondary-text-color: #757575;
  --secondary-light-text-color: #cecece;
  --text-icons-color: #FFFFFF;
  --hover-not-selected-color: #F3F3F3;
  --error-color: #ff0000;
  --close-color: #330066;
  --open-color: #00b157;
  /* Filters */
  --primary-color-filter: invert(20%) sepia(15%) saturate(7332%) hue-rotate( 217deg ) brightness(99%) contrast(101%);
  --primary-text-color-filter: invert(15%) sepia(0%) saturate(977%) hue-rotate(193deg) brightness(96%) contrast(85%);
  --secondary-text-color-filter: invert(50%) sepia(1%) saturate(2459%) hue-rotate(338deg) brightness(91%) contrast(87%);
  --secondary-light-text-color-filter: invert(69%) sepia(97%) saturate(1%) hue-rotate(5deg) brightness(98%) contrast(97%);
  --text-icons-color-filter: invert(100%) sepia(0%) saturate(7492%) hue-rotate(65deg) brightness(97%) contrast(108%);
  /* Color de fondo del botón de login */
  --login-button-background-color: #166fe5;
  /* Color del texto del botón de login */
  --login-font-color: #fff;
  /* Color del texto del mensaje de error de la pantalla de login */
  --login-error-font-color: #e61142;
  /* Color del texto del mensaje de éxito al restablecer la contraseña */
  --login-sucess-font-color: #008000;
  /* Color del texto del link en la pantalla de login */
  --login-link-font-color: #7a62da;
  /* Color del título de la pantalla de login */
  --login-title-font-color: #333333;
  /* Color de fondo de la card de login */
  --login-card-background-color: #fff;
  /* Color de fondo de la pantalla de login */
  --login-background-color: #f8f8f8;
  /* Color de fondo de la pantalla principal de la aplicación (sin contar el menú y el header) */
  /*    --app-background-color: #f5f9fc;*/
  --m-app-background-color: #FFFFFF;
  --app-background-color: #f5f5f5;
  /* Color de fondo del header de la pantalla principal de la aplicación */
  --m-header-background-color: #283593;
  --header-background-color: #fff;
  /* PENDIENTE DE CORRECCIONES */
  --icons-font-color: #a9a9a9;
  /* Color del texto del header (por ejemplo nombre de usuario) y de la mayoría de los íconos del header (por ejemplo, el ícono de home, la campana de notificaciones) */
  --header-font-color: rgba(0, 0, 0, 0.55);
  --m-header-font-color: #FFFFFF;
  /* Color de sombras de componentes de la pantalla, por ejemplo, sombra que divide el header de parte principal de la pantalla y el menú */
  --box-shadow-color: rgba(0, 0, 0, 0.132);
  /* Color de sombras más oscuras de componentes de la pantalla, por ejemplo, sombra del cuadro de tipo de teléfonos */
  --dark-box-shadow-color: rgba(0, 0, 0, 0.298039);
  /* Color de borde de algunos componentes, por ejemplo, de celdas de grillas, */
  --border-color: #d4dde4;
  /* Color de borde oscuro, es el borde utilizado para encerrar cada dato cuando se imprimen los formularios */
  --dark-border-color: black;
  /* Color de fondo de la sección del menú */
  --menu-background-color: #fff;
  /* Color de fondo del icono de la sección del menú cuando está expandido */
  --menu-fixed-background-color: transparent;
  /* Color de fondo del icono de la sección del menú cuando está minimizado */
  --menu-minimized-background-color: transparent;
  /* Color de fondo del icono de la sección del menú cuando está fijo */
  --menu-pin-background-color: transparent;
  /* Color de texto del menú de todos los items (los items son todos los textos que se ven en el menú cuando se ingresa a la aplicación, por ejemplo Case, Searches, Cremation, etc.*/
  --menu-font-color: rgba(0, 0, 0, 0.87);
  /* Color de fondo de los items del menú cuando tiene el puntero del mouse sobre él, por ejemplo, cuando el puntero del mouse está sobre Case */
  --menu-hover-background-color: #f5f5f5;
  /* Color de fondo de los subitems del menú (un subitem es el texto que aparece cuando se abre un item, por ejemplo Case Log y Case Intake Information son subitems y Case es el item)*/
  --submenu-background-color: #f4f5f7;
  /* Color del texto de los subitems (un subitem es el texto que aparece cuando se abre un item, por ejemplo Case Log y Case Intake Information son subitems y Case es el item)*/
  --submenu-font-color: rgba(0, 0, 0, 0.87);
  /* Color de los íconos de los items del menú (los items son todos los textos que se ven en el menú cuando se ingresa a la aplicación, por ejemplo Case, Searches, Cremation, etc.*/
  --icon-menu-color: #166fe5;
  /* Color de los íconos de los subitems del menú (un subitem es el texto que aparece cuando se abre un item, por ejemplo Case Log y Case Intake Information son subitems y Case es el item)*/
  --icon-submenu-color: rgba(0, 0, 0, 0.34);
  /* Color del texto de los subitems cuando están seleccionados */
  --menu-selected-font-color: #665282;
  /* Color de fondo de los */
  --menu-selected-background-color: #cfcfcf;
  /* Color de fondo del texto del menú cuando un subitem tiene el puntero del mouse sobre él y es el formulario que se está visualizando en ese momento, por ejemplo, cuando el puntero del mouse está sobre Case Intake Information y se está visualizando dicho formulario */
  --menu-hover-background-color: #f5f5f5;
  --menu-hover-font-color: #b00020;
  /* Color de fondo del texto del menú cuando un subitem tiene el puntero del mouse sobre él pero no es el formulario que se está visualizando en ese momento, por ejemplo, cuando el puntero del mouse está sobre Case Intake Information pero se está visualizando el formulario de Case Log*/
  --submenu-hover-background-color: #fcfcfd;
  /* Color claro de fondo de botones, por ejemplo, los que aparecen en los popups de confirmación de eliminación de entidades */
  --button-light-background-color: #cbcfd2;
  /* Color de letra de los botones con fondo claro, por ejemplo, los que aparecen en los popups de confirmación de eliminación de entidades */
  --button-light-font-color: #000;
  /* Color oscuro de fondo de botones, por ejemplo, el botón SAVE de las cards que se abren como popup (Chain of custody, etc) */
  --button-dark-background-color: #166fe5;
  /* Color de letra de los botonces con fondo oscuro, por ejemplo, el botón SAVE de las cards que se abren como popup (Chain of custody, etc) */
  --button-dark-font-color: #fff;
  /* Color del texto del título de los forms */
  --form-title-font-color: #060000;
  /* Color de fondo del título de los forms */
  --form-title-background-color: transparent;
  /* Color del ícono que se encuentra junto al título de los forms */
  --form-title-icon-color: rgba(0, 0, 0, 0.34);
  /* Color del ícono que se encuentra junto al título de los forms para cerrar todos las cards de un form */
  --form-card-open-icon-color: #615e8e;
  /* Color del ícono que se encuentra junto al título de los forms para abrir todos las cards de un form */
  --form-card-close-icon-color: #615e8e;
  /* Color de fondo de las cards */
  --card-background-color: #fff;
  /* Color del texto del título de las cards */
  --card-title-font-color: #060000;
  /* Color de texto de los íconos que identifican a las card y tienen fondo rojo */
  --acronym-name-red-color: #ffffff;
  /* Color rojo de fondo de los íconos que identifican a las cards*/
  --acronym-name-red-background: #bd052b;
  /* Color de texto de los íconos que identifican a las card y tienen fondo negro (actualmente no se está empleando) */
  --acronym-name-black-color: #ffffff;
  /* Color negro de fondo de los íconos que identifican a las cards (actualmente no se está empleando) */
  --acronym-name-black-background: #0c0c0c;
  /* Color de texto de los íconos que identifican a las card y tienen fondo azul (actualmente no se está empleando) */
  --acronym-name-blue-color: #ffffff;
  /* Color azul de fondo de los íconos que identifican a las cards (actualmente no se está empleando) */
  --acronym-name-blue-background: #0d05bd;
  /* Color de texto de los íconos que identifican a las card y tienen fondo amarillo (actualmente no se está empleando) */
  --acronym-name-yellow-color: #101010;
  /* Color amarillo de fondo de los íconos que identifican a las cards (actualmente no se está empleando) */
  --acronym-name-yellow-background: #fffe5f;
  /* Color de texto de los íconos que identifican a las card y tienen fondo verde (actualmente no se está empleando) */
  --acronym-name-green-color: #ffffff;
  /* Color verde de fondo de los íconos que identifican a las cards (actualmente no se está empleando) */
  --acronym-name-green-background: #52b758;
  /* Color de texto de los íconos que identifican a las card y tienen fondo naranja (actualmente no se está empleando) */
  --acronym-name-orange-color: #101010;
  /* Color naranja de fondo de los íconos que identifican a las cards (actualmente no se está empleando) */
  --acronym-name-orange-background: #ff9540;
  /* Color de texto de los íconos que identifican a las card y tienen fondo gris (actualmente no se está empleando) */
  --acronym-name-grey-color: #101010;
  /* Color gris de fondo de los íconos que identifican a las cards (actualmente no se está empleando) */
  --acronym-name-grey-background: #cbcece;
  /* Color de texto de los íconos que identifican a las card y tienen fondo marrón (actualmente no se está empleando) */
  --acronym-name-brown-color: #ffffff;
  /* Color marrón de fondo de los íconos que identifican a las cards (actualmente no se está empleando) */
  --acronym-name-brown-background: #900000;
  /* Color de fondo de la pantalla cuando se abre un popup, por ejemplo, color del fondo cuando se abre la card Decedent Identification, o el color que toma la pantalla cuando se está cargando un formulario */
  --div-modal-background-color: rgba(0,0,0,0.08);
  /* Color de fondo de un popup, por ejemplo, color del popup que se abre cuando se edita los datos de la card: Decedent Identification */
  --div-modal-popup-background-color: #f5f9fc;
  /* Color de borde de los controles (input text, combo box, etc) cuando no tienen el foco */
  --control-border-color: #c8c8c8;
  /* Color de borde de los controles (input text, combo box, etc) cuando si tienen el foco */
  --focus-border-color: #0078d4;
  /* Color de fondo de los controles (input text, combo box, etc) */
  --control-background-color: #fff;
  /* Color de fondo oscuro, que se utiliza en el campo de búsqueda de los dropdowns*/
  --control-dark-background-color: #a9a9a91f;
  /* Color de texto de los controles (input text, combo box, ect) */
  --control-content-font-color: rgba(0, 0, 0, 0.87);
  /* Color de borde de los controles cuando tienen un error, por ejemplo, cuando se ingresa una fecha inválida: a/a */
  --control-error-line-color: #b00020;
  /* Color de fondo del header de las grillas */
  --grid-header-background-color: #f5f9fc;
  /* Color del texto del header de las grillas */
  --grid-header-font-color: #616161;
  /* Color del texto de las celdas de las grillas */
  --grid-item-font-color: #616161;
  /* Color de fondo de las celdas de las grillas */
  --grid-item-background-color: #fff;
  /* Color de fondo de los filtros en modo mobile */
  --grid-mobile-filter-background-color: #d4dde4;
  /* Color del botón del switch que se emplea para el ordenado de las grillas en modo mobile, cuando no está seleccionado (en el medio) */
  --grid-filter-switch-none-background-color: #eee;
  /* Color del botón del switch que se emplea para el ordenado de las grillas en modo mobile, cuando está seleccionado (en asc o desc) */
  --grid-filter-switch-option-background-color: #158e15;
  /* Color del borde del botón del switch que se emplea para el ordenado de las grillas en modo mobile */
  --grid-filter-switch-border-color: #808080;
  /* Color del ícono de filtro cuando está seleccionado, por ejemplo, cuando se ingresa a Case Log desde Home seleccionando el case type Coroner */
  --grid-filter-button-selected-color: #7c85b4;
  /* Color de fondo de las filas cuando tienen asociadas grillas y se ha seleccionado verlas. NO ESTA BIEN IMPLEMENTADO, HAY QUE CORREGIR */
  --row-grid-nested-background-color: #f0f4f7;
  /* Color del ícono que permite abrir las grillas asociadas a otras, por ejemplo, en chain of custody */
  --icon-grid-option-selected-color: #438c42;
  --grid-filter-background-color: #ECF3FF;
  --grid-filter-border-color: #B5B5B5;
  --green-color: #70ff81;
  --dark-green-color: #27AE60;
  --red-color: #EB5757;
  --grey-color: #101010;
  --light-grey-color: #c7cac0;
  --black-color: #060000;
  --link-font-color: #7a62da;
  --disabled-link-font-color: #aaaba6;
  --light-disabled-link-font-color: #dbdcd8;
  --messages-pending-color: #8d9c07;
  --messages-pending-offline-color: #8d9c07;
  --messages-server-exception-color: #564798;
  --room-online-background-color: #00ff21;
  --room-offline-background-color: #808080;
  --room-list-background-color: #f9f9f9;
  --notification-warning-icon-color: #ff0000;
  --notification-warning-new-icon-color: #ff0000;
  --notification-list-border-bottom-color: #c2c8d0;
  --notification-list-background-color: #f9f9f9;
  --notification-alert-task-color: #191a1b;
  --notification-alert-information-color: rgba(23, 53, 196, 0.87);
  --notification-alert-warning-color: rgba(197, 208, 0, 0.87);
  --notification-alert-error-color: rgba(228, 6, 59, 0.87);
  --notification-button-go-color: rgba(61, 71, 185, 0.87);
  --notification-button-done-color: rgba(50, 228, 6, 0.86);
  --notification-button-delete-color: rgba(0, 0, 0, 0.6);
  --tooltip-background-color: black;
  --tooltip-font-color: #fff;
  --banner-background-color: #f0f4f7;
  --m-banner-background-color: #ECF3FF;
  --m-icon-dark: #283593;
  --item-font-color: rgba(0, 0, 0, 0.87);
  --product-name-color: #0078d4;
  --control-caption-font-color: #6200ee;
  --control-empty-caption-font-color: rgba(0, 0, 0, 0.6);
  --control-detail-font-color: rgba(0, 0, 0, 0.87);
  --control-warning-font-color: rgba(253, 16, 52, 0.99);
  --control-message-font-color: #b00020;
  --line-color: rgba(0, 0, 0, 0.1);
  --shadow-color: rgba(0, 0, 0, 0.42);
  --otheruser-edition-warning-background-color: #e29292;
  --otheruser-edition-warning-font-color: #000000;
  --item-dropdown-list-background-color: #fff;
  --item-groupheader-font-color: #141414;
  --item-groupheader-hover-color: #141414;
  --item-hover-color: #474747;
  --item-hover-background-color: #f5f5f5;
  --item-current-color: #665282;
  --item-current-background-color: #cfcfcf;
  --item-hover-current-color: #b00020;
  --item-not-found-font-color: #9fcee2;
  --menu-hover-color: orange;
  --control-summary-caption-font-color: #000000;
  --paginator-arrow-disabled: #a29e9e99;
  --online-icon-color: #24e682;
  --banner-icon-color: black;
  --phone-type-selected-icon-color: #eff190;
  --phone-type-list-background-color: #f5f9fc;
  --phone-type-list-border-color: #dfe2e4;
  --phone-icon-phone-color: rgb(244, 67, 54);
  --phone-icon-office-color: rgb(21, 66, 266);
  --phone-icon-cel-color: rgb(90, 150, 80);
  --phone-icon-fax-color: rgb(121, 85,72);
  --phone-icon-day-color: #DAA520;
  --phone-icon-night-color: #696969;
  --multiselect-item-text-color: #fff;
  --multiselect-item-background-color: #6c757d;
  --version-icon-color: #0d05bd;
  --detalis-summary-color: #092bb9;
  --done-icon-color: #16e013;
  --error-icon-color: #ff0000;
  --warning-priority-high-color: #ff0000;
  --warning-priority-low-color: #756403;
  --warning-priority-medium-color: #ceb214;
  --focus-line-width: 0.15rem;
  --other-user-on-focus-color: #c7ad1a;
  --icon-arrow-down: "keyboard_arrow_down";
  --icon-arrow-up: "keyboard_arrow_up";
  --icon-arrow-left: "keyboard_arrow_left";
  --icon-arrow-right: "keyboard_arrow_right";
  --icon-close: "close";
  --icon-arrow-drop-down: "arrow_drop_down";
  --icon-arrow-drop-up: "arrow_drop_up";
  --icon-add-box: "add_box";
  --icon-next-box: "arrow_right";
  --icon-previous-box: "arrow_left";
  --icon-filter: "filter_alt";
  --icon-edit: "edit";
  --icon-remove-circle: "remove_circle";
  --icon-add-circle: "add_circle";
  --icon-push-pin: "push_pin";
  --icon-arrow-upward: "arrow_upward";
  --icon-arrow-downward: "arrow_downward";
  --icon-delete: "delete";
  --icon-check: "check";
  --icon-play-circle: "play_circle_filled";
  --icon-room: "room";
  --icon-info: "info";
  --icon-warning: "warning";
  --icon-error: "error";
  --icon-task: "settings";
  --icon-view-aditional-information: "play_arrow";
  --icon-banner-info: "I";
  --icon-card-open: "more_horiz";
  --icon-card-close: "more_horiz";
  --border-radius-px: 4px;
  --min-width-components: 20rem;
  --icon-logged-user: "people";
  --icon-person: "person";
  --icon-search: "search";
  --icon-new-version: "refresh";
  --icon-filter: "filter_alt";
  --icon-home: "home";
  --icon-printer: "print";
  --icon-next-plan: "next_plan";
  --icon-modal-close: "close";
  --expand-less: "expand_less";
  --expand-more: "expand_more";
  --icon-clear: "clear";
  --icon-delete-forever: "delete_forever";
  --icon-attach-file: "attach_file";
  --icon-refresh: "refresh";
  --icon-nested: "backup_table";
  --icon-radio-button-checked: "radio_button_checked";
  --icon-radio-button-unchecked: "radio_button_unchecked";
  --icon-download: "cloud_download";
  --icon-arrow-first-page: "first_page";
  --icon-arrow-last-page: "last_page";
  --icon-swap-vert: "swap_vert";
  --icon-done: "done";
  --icon-canbedone: "circle";
  --icon-error: "close";
  --icon-export-excel: "download";
  --icon-print-barcode: "print";
  --icon-print-group-barcode: "print";
  --icon-todo-list: "sort";
  --icon-todo-pending: "error";
  --icon-todo-done: "check_circle";
  --icon-todo-pending-item: "history";
  --icon-todo-disabled-item: "block";
  --icon-todo-deleted-item: "toggle_off";
  --icon-todo-active-item: "toggle_on";
  --icon-todo-radio-button-checked: "radio_button_checked";
  --icon-todo-radio-button-unchecked: "radio_button_unchecked";
  --icon-help-center: "help_outline";
  --icon-person: "person_outline";
  --icon-organization: "location_city";
  --icon-calendar: "calendar_today";
  --icon-construction: "construction";
  --icon-save: "save";
  --icon-visibility-off: "visibility_off";
  --icon-view-column: "view_column";
  --icon-calendar-view-day: "calendar_view_day";
  --icon-highlight-off: "highlight_off";
  --icon-table-view: "table_view";
  --icon-fullscreen-exit: "fullscreen_exit";
  --icon-fullscreen: "fullscreen";
  --icon-cast: "cast";
  --icon-undo: "undo";
  --icon-groups: "groups";
}

body, html {
  font-family: Roboto, "Helvetica Neue", Helvetica, Ubuntu, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 12px;
}

* {
  outline: none;
}

.vq-input-warning-error-high, .vq-component-container.warning-error-high .vq-input-border {
  border: 2px solid var(--warning-priority-high-color) !important;
}

.vq-input-warning-error-medium, .vq-component-container.warning-error-medium .vq-input-border {
  border: 2px solid var(--warning-priority-medium-color) !important;
}

.vq-input-warning-error-low, .vq-component-container.warning-error-low .vq-input-border {
  border: 2px solid var(--warning-priority-low-color) !important;
}

.vq-component-hide-screen {
  display: none;
}

.vq-input-container-editable {
  /*
      Set the position relative so the children can
      be set to absolute
      (for the child it's actually relative to its parent)
  */
  position: relative;
  height: 3rem;
  background-color: transparent;
  margin: 1rem 1rem 1rem 0;
  display: inline-block;
  max-width: inherit;
  min-width: var(--min-width-components);
  color: var(--control-content-font-color);
}
.vq-input-container-editable * {
  outline: none; /*no highlite box on focus*/
  box-shadow: none;
  position: absolute;
}

.vq-generic-input {
  margin: 1rem 0 1rem 0;
}

.vq-input-container-summary {
  background-color: transparent;
  margin: 0.5rem 1rem 0.5rem 0;
  display: inline-block;
  vertical-align: top;
  font-size: 1rem;
  word-break: break-word;
}
.vq-input-container-summary .vq-caption {
  font-weight: 600;
  position: relative;
}
.vq-input-container-summary .vq-caption-normal {
  color: var(--control-summary-caption-font-color);
}
.vq-input-container-summary .vq-value {
  position: relative;
}

.vq-input-container-summary.vq-caption-normal {
  color: var(--control-summary-caption-font-color);
}

.vq-pending-to-save-field-value-summary {
  color: var(--messages-pending-color);
}

.vq-pending-to-save-offline-summary {
  color: var(--messages-pending-offline-color);
}

.vq-pending-to-save-offline-summary {
  color: var(--messages-pending-offline-color);
}

.vq-pending-server-exception-value-summary {
  color: var(--messages-server-exception-color);
}

.vq-floating-label {
  padding-top: 1.2rem;
  padding-right: 0.2rem;
  padding-bottom: 0.7rem;
  padding-left: 1rem;
  pointer-events: none;
  color: var(--control-empty-caption-font-color);
}

.vq-input {
  background-color: var(--control-background-color);
  width: 100%;
  height: inherit;
  font-size: 1rem;
  letter-spacing: 0.009375em;
  resize: none;
  max-width: inherit;
  min-width: var(--min-width-components);
  border-radius: var(--border-radius-px);
}

/*
    Move the caption from input location to the top
    when input has the focus or input has a value
*/
.vq-dropdown-span-not-empty:disabled ~ .vq-floating-label,
.vq-input:focus ~ .vq-floating-label,
.vq-input-readonly ~ .vq-floating-label,
.vq-dropdown-span-not-empty ~ .vq-floating-label,
.vq-input-not-empty ~ .vq-floating-label {
  top: -0.5rem;
  left: 0.5rem;
  color: var(--control-caption-font-color);
  background-color: var(--control-background-color);
  padding: 0.14rem 0.42rem 0 0.42rem !important;
  font-size: 0.85rem;
  display: inline-block;
  pointer-events: none;
}

.vq-input:not(focus) {
  border: solid var(--control-border-color) 0.1rem;
  padding-top: 1.1rem;
  padding-right: 0.5rem;
  padding-bottom: 0.7rem;
  padding-left: 1rem;
}

.vq-input:focus,
.vq-dropdown-span:focus {
  border: solid var(--focus-border-color) var(--focus-line-width);
  box-shadow: 0 0 0 3px var(--box-shadow-color);
  animation: ms-focus-shadow-pulse 4s ease-in-out infinite;
  padding-top: 1.1rem;
  padding-right: 0.5rem;
  padding-bottom: 0.7rem;
  padding-left: 1rem;
}

/*
    Change font color and background color when another user 
    edits input content.
*/
.vq-input-other-user-on-focus, .vq-component-container.other-user-on-focus .vq-input-border {
  border: 2px solid var(--other-user-on-focus-color) !important;
}

.vq-input-other-user-on-focus-names {
  justify-content: space-between;
  margin-top: 0.2rem;
}

.vq-input-other-user-on-focus-names-text {
  color: rgb(199, 173, 26);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.0333333em;
  font-size: 1rem;
  display: block;
  width: 100%;
}

.vq-component-additional-information {
  font-size: 0.8rem;
  display: block;
  color: #e77400;
  font-weight: 600;
  letter-spacing: 0.0333333333em;
  margin-top: 1rem;
  position: relative;
  width: inherit;
  min-width: inherit;
  max-width: inherit;
}

.vq-inner-component-footer-container .vq-component-additional-information {
  padding-left: 1rem;
  padding-right: 2rem;
}

.vq-grid-columns > .vq-grid-item > .vq-component-container .vq-checkbox-container + .vq-inner-component-footer-container {
  margin-top: 0.75rem;
}

.vq-grid-item > .vq-component-container-summary .vq-inner-component-footer-container,
.vq-grid-item > .vq-component-container .vq-inner-component-footer-container {
  top: 0;
  max-width: 100%;
}

.vq-grid-editable-row-modal .vq-component-container-summary > .vq-inner-component-footer-container,
.vq-grid-editable-row-modal .vq-component-container .vq-inner-component-footer-container {
  top: -1rem;
}

.vq-component-container-summary .vq-inner-component-footer-container,
.vq-component-container .vq-inner-component-footer-container {
  min-width: min(100%, var(--min-width-components));
}

.vq-component-container-summary .vq-inner-component-footer-container:empty,
.vq-component-container .vq-inner-component-footer-container:empty {
  min-width: 0;
}

.vq-inner-component-footer-container {
  position: relative;
  top: -1rem;
}

.vq-component-container-summary .vq-component-additional-information,
.vq-banner-content .vq-component-additional-information {
  padding-left: 0;
}

.vq-component-container,
.vq-component-container-summary {
  display: inline-block;
  width: auto;
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

.vq-input-warning-message-text {
  justify-content: space-between;
  opacity: 1;
  padding-left: 16px;
  top: calc(100% + 0.2rem);
  font-size: 0.8rem;
  display: block;
  width: inherit;
}

.vq-message-text {
  color: #ff0000;
  letter-spacing: 0.0333333333em;
  display: block;
  line-height: 1.2rem;
  margin-top: 0.2rem;
  margin-bottom: -0.2rem;
  font-size: 0.9rem;
}

.vq-input-warning-message-text-high {
  color: var(--warning-priority-high-color);
}

.vq-input-warning-message-text-medium {
  color: var(--warning-priority-medium-color);
}

.vq-input-warning-message-text-low {
  color: var(--warning-priority-low-color);
}

.vq-summary {
  display: inline-block;
}

.vq-input-warning-selected {
  border: 2px solid #756403 !important;
}

.vq-pending-to-save-field-value, .vq-component-container.pending-to-save-field-value .vq-input-border {
  border: 2px solid var(--messages-pending-color) !important;
}

.vq-pending-to-save-offline, .vq-component-container.pending-to-save-offline .vq-input-border {
  border: 2px solid var(--messages-pending-offline-color) !important;
}

.vq-pending-to-save-server-exception, .vq-component-container.pending-to-save-server-exception .vq-input-border {
  border: 2px solid var(--messages-server-exception-color) !important;
}

.vq-input-search-result-message {
  justify-content: space-between;
  opacity: 1;
  top: calc(100% + 0.2rem);
  font-size: 0.8rem;
  font-weight: 500;
}

.vq-input-search-result-message-text {
  color: #22b348;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.0333333333em;
  display: block;
  width: 100%;
  padding: 0;
}

.vq-icon-disabled {
  background-color: var(--light-grey-color);
}

.vq-icon-normal {
  color: var(--detalis-summary-color);
}

.vq-input-error {
  border: solid var(--error-color) var(--focus-line-width);
}

.vq-input-error:not(focus) {
  border: solid var(--error-color) var(--focus-line-width);
}

.vq-input-error-summary {
  color: var(--error-color);
}

.vq-input-hidden-text {
  visibility: hidden;
  position: absolute;
  white-space: nowrap;
}

.vq-grid-columns > .vq-grid-item > .vq-input-container-editable > .vq-input {
  margin-top: -1rem;
}

.vq-grid-columns > .vq-grid-item > .vq-input-container-editable > .vq-floating-label {
  display: none;
}

/*start icon calendar*/
.vq-calendar-icon {
  position: relative;
  top: 0.6rem;
  padding-left: 0.2rem;
}

.vq-grid-item .vq-calendar-icon {
  top: 1rem;
}

.vq-calendar-icon:before {
  content: var(--icon-calendar);
  font-family: "Material Icons";
  font-size: 2rem;
  color: var(--header-font-color);
}

.vq-calendar-padding-left {
  padding-left: 2.5rem !important;
}

/*end icon calendar*/
/*@import "../wwwroot/globals";
@import "../wwwroot/inputs-commons";*/
.vq-dropdown-container-summary {
  display: inline-block;
  width: auto;
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

.vq-dropdown-open {
  border: solid var(--focus-border-color) var(--focus-line-width);
  box-shadow: 0 0 0 3px var(--box-shadow-color);
  animation: ms-focus-shadow-pulse 4s ease-in-out infinite;
}

.vq-dropdown-closed {
  border: solid var(--control-border-color) 0.1rem;
}

.vq-dropdown-container-list {
  top: 3rem;
  left: 0;
  position: absolute;
  width: inherit;
  max-height: 35rem;
  background-color: var(--item-dropdown-list-background-color);
  border-radius: var(--border-radius-px);
  padding: 0;
  list-style-type: none;
  color: rgba(0, 0, 0, 0.87);
  box-shadow: 0 0.4rem 0.4rem -0.4rem var(--box-shadow-color), 0 0.4rem 0.4rem 0.1rem var(--box-shadow-color), 0 0.4rem 0.4rem 0.15rem var(--box-shadow-color);
  z-index: 20;
  min-width: var(--min-width-components);
}

.vq-dropdown-options-list-ul {
  left: 0;
  position: relative;
  width: 100%;
  height: inherit;
  max-height: 9.6rem;
  line-height: 2rem;
  overflow: auto;
  background-color: var(--item-dropdown-list-background-color);
  padding: 0;
  list-style-type: none;
  color: var(--item-font-color);
}

.vq-dropdown-input-search {
  position: relative;
  font-size: 0.9rem;
  height: 2rem;
  width: calc(100% - 1rem);
  background-color: var(--control-dark-background-color);
  color: var(--control-content-font-color);
  margin: 0.5rem 0.5rem 0 0.5rem;
  display: inline-block;
  cursor: text;
  padding: 0.5rem;
  border: 0.1rem solid var(--icons-font-color);
}

.vq-dropdown-input-search:focus {
  color: var(--control-content-font-color);
}

.vq-dropdown-options-list-li-div {
  cursor: pointer;
  pointer-events: auto;
  display: list-item;
  position: relative;
  padding: 0 1rem;
  overflow: hidden;
  align-items: center;
  color: var(--item-font-color);
  width: 100%;
  height: 2rem;
}

.vq-dropdown-options-list-li-div.active {
  color: var(--item-current-color);
  background-color: var(--item-current-background-color);
}

.vq-dropdown-span {
  background-color: var(--control-background-color);
  width: 100%;
  height: inherit;
  text-align: left;
  font-size: 1rem;
  letter-spacing: 0.009375em;
  resize: none;
  padding-top: 1.1rem;
  padding-right: 3rem;
  padding-bottom: 0.7rem;
  padding-left: 1rem;
  cursor: pointer;
  border-radius: var(--border-radius-px);
  min-width: var(--min-width-components);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vq-dropdonw-on-focus {
  border: solid var(--control-border-color) 0.15rem;
}

.vq-dropdown-visible {
  visibility: visible;
}

.vq-dropdown-hidden {
  visibility: hidden;
}

.vq-body-intake-container > .vq-card {
  width: 35%;
  max-width: 100%;
  min-width: 30rem;
  margin: 0 auto;
  margin-top: 11rem;
  padding-bottom: 2.5rem;
}

.vq-dropdown-case-type-modal-container > .vq-card {
  width: 50%;
  max-width: 100%;
  min-width: 30rem;
  margin: 0 auto;
  margin-top: 11rem;
  padding-bottom: 2.5rem;
}

.vq-body-intake-container,
.vq-dropdown-case-type-modal-container {
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--div-modal-background-color);
  z-index: 1000;
  position: fixed;
}

.vq-dropdown-case-type-button {
  background-color: var(--m-header-background-color);
  border: none;
  border-radius: var(--border-radius-px);
  font-size: 1rem;
  height: 3rem;
  padding: 0 2rem;
  cursor: pointer;
  color: var(--button-dark-font-color);
  font-weight: 600;
  float: right;
  margin-left: 0.5rem;
}

/* start icon contact*/
.vq-contact-icon {
  position: relative;
  top: 0.6rem;
  padding-left: 0.2rem;
}

.vq-grid-item .vq-contact-icon {
  top: 1rem;
}

.vq-contact-icon:before {
  content: var(--icon-person);
  font-family: "Material Icons";
  font-size: 2rem;
  color: var(--header-font-color);
}

.vq-contact-padding-left {
  padding-left: 2.3rem !important;
}

/* end icon contact */
/* start icon organization*/
.vq-organization-icon {
  margin-left: 0.1rem;
  width: 2rem;
  height: 2.5rem;
  background-color: var(--header-font-color);
  mask: url(/organization.svg) no-repeat 100% 100%;
  -webkit-mask: url(/icons/organization.svg) no-repeat 100% 100%;
}

.vq-organization-padding-left {
  padding-left: 2rem !important;
}

/* end icon organization*/
.vq-checkbox-label {
  color: var(--control-caption-font-color);
  left: 0;
  background-color: var(--control-background-color);
  padding-left: 0.5rem;
  position: absolute;
  width: max-content;
  font-size: 0.85rem;
  margin-top: -0.5rem;
}

.vq-checkbox-label-center {
  padding-left: 0;
  text-align: center;
  width: 100%;
}

.vq-checkbox {
  width: inherit;
}

.vq-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.vq-checkbox-span {
  position: relative;
  margin: 0 auto;
  display: block;
  top: 1rem;
  height: 1.25rem;
  width: 1.25rem;
  background-color: transparent;
  border: 0.15rem solid var(--control-border-color);
  border-radius: 25%;
}

.vq-grid-item .vq-checkbox > .vq-checkbox-span {
  top: -0.2rem;
}

.vq-grid-item .vq-checkbox > .vq-checkbox-span {
  top: -0.2rem;
}

.vq-grid-editable-row-modal .vq-checkbox > .vq-checkbox-span {
  top: 1rem;
}

.vq-checkbox:hover input ~ .vq-checkbox-span {
  background-color: var(--control-border-color);
}

.vq-checkbox input:checked ~ .vq-checkbox-span-normal,
.vq-checkbox input:checked ~ .vq-input-other-user-on-focus,
.vq-checkbox input:checked ~ .vq-input-warning-error-high,
.vq-checkbox input:checked ~ .vq-input-warning-error-medium,
.vq-checkbox input:checked ~ .vq-input-warning-error-low,
.vq-checkbox input:checked ~ .vq-input-search-result-selected,
.vq-checkbox input:checked ~ .vq-pending-to-save-field-value,
.vq-checkbox input:checked ~ .vq-pending-to-save-offline,
.vq-checkbox input:checked ~ .vq-pending-to-save-server-exception {
  border-radius: 25%;
}

.vq-checkbox input:checked ~ .vq-checkbox-span-normal,
.vq-checkbox input:checked ~ .vq-input-search-result-selected {
  background-color: var(--m-header-background-color);
  border: 2px solid var(--m-header-background-color);
}

.vq-checkbox input:checked ~ .vq-input-other-user-on-focus {
  background-color: var(--other-user-on-focus-color);
  border: 2px solid var(--other-user-on-focus-color);
}

.vq-checkbox input:checked ~ .vq-input-warning-error-high {
  background-color: var(--warning-priority-high-color);
  border: 2px solid var(--warning-priority-high-color);
}

.vq-checkbox input:checked ~ .vq-input-warning-error-medium {
  background-color: var(--warning-priority-medium-color);
  border: 2px solid var(--warning-priority-medium-color);
}

.vq-checkbox input:checked ~ .vq-input-warning-error-low {
  background-color: var(--warning-priority-low-color);
  border: 2px solid var(--warning-priority-low-color);
}

.vq-checkbox input:checked ~ .vq-pending-to-save-field-value {
  background-color: var(--messages-pending-color);
  border: 2px solid var(--messages-pending-color);
}

.vq-checkbox input:checked ~ .vq-pending-to-save-offline {
  background-color: var(--messages-pending-offline-color);
  border: 2px solid var(--messages-pending-offline-color);
}

.vq-checkbox input:checked ~ .vq-pending-to-save-server-exception {
  background-color: var(--messages-server-exception-color);
  border: 2px solid var(--messages-server-exception-color);
}

.vq-checkbox-span:after {
  content: "";
  position: absolute;
  display: none;
}

.vq-checkbox input:checked ~ .vq-checkbox-span:after {
  display: block;
}

.vq-checkbox .vq-checkbox-span:after {
  left: 0.25rem;
  top: -0.1rem;
  width: 0.4rem;
  height: 0.8rem;
  border: solid var(--header-background-color);
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.vq-checkbox input:focus ~ .vq-checkbox-span {
  box-shadow: 0 0 0.5rem 0.2rem var(--box-shadow-color);
}

.vq-checkbox-container {
  max-width: min(100%, var(--min-width-components));
  min-width: 0;
}

.vq-checkbox-span .vq-input-other-user-on-focus {
  background-color: #c7ad1a;
  border: 2px solid #c7ad1a;
}

.vq-grid-item .vq-readonly-checkbox .vq-checkbox-label-container {
  top: 0;
}

/*@import "../wwwroot/globals";
@import "../wwwroot/inputs-commons";*/
.vq-select-icon {
  display: inline-block;
  position: absolute;
  height: 3rem;
  z-index: 8;
  cursor: pointer;
  top: 0.8rem;
  font-size: 1.5rem;
  font-weight: 700;
  right: 0.5rem;
}

.vq-grid-item .vq-select-icon {
  top: 1rem;
}

.vq-select-icon:before {
  content: var(--icon-arrow-up);
  font-family: "Material Icons";
}

.vq-button-select-icon {
  display: inline-block;
  position: absolute;
  height: 3rem;
  z-index: 8;
  cursor: pointer;
  /* top: 0.3rem; */
  font-size: 1.5rem;
  font-weight: 700;
  /* right: 0.5rem; */
  background-color: transparent;
  border: none;
  width: 100%;
  text-align: right;
  padding-right: 0.5rem;
  padding-top: 0.3rem;
}

.vq-button-select-icon:before {
  content: var(--icon-arrow-up);
  font-family: "Material Icons";
}

.vq-select-icon-not-selected {
  color: var(--font-icons-color);
}

.vq-select-icon-selected:before {
  color: var(--control-border-color);
  content: var(--icon-arrow-down);
  font-family: "Material Icons";
}

.vq-combobox-width {
  padding-right: 1.5rem !important;
}

.vq-select-options-list-ul {
  width: 100%;
  height: auto;
  background-color: var(--item-dropdown-list-background-color);
  padding: 0;
  margin-top: 0.1rem;
  color: var(--item-font-color);
  top: 3rem;
  left: 0;
  position: absolute;
  max-height: 12rem;
  line-height: 2rem;
  overflow: hidden;
  overflow-y: auto;
  border-radius: 0.25rem;
  z-index: 1000;
  list-style-type: none;
  box-shadow: 0 0.4rem 0.4rem -0.4rem var(--box-shadow-color), 0 0.4rem 0.4rem 0.1rem var(--box-shadow-color), 0 0.4rem 0.4rem 0.15rem var(--box-shadow-color);
}

.vq-select-options-list-ul-timespan {
  max-height: 14rem;
}

.vq-select-options-list-li:first-child {
  width: 100%;
}

.vq-select-options-list-li {
  cursor: pointer;
  pointer-events: auto;
  display: list-item;
  position: relative;
  padding: 0 1rem;
  overflow: hidden;
  align-items: center;
  color: var(--item-font-color);
  width: 100%;
}

li.vq-select-options-list-li.active {
  color: var(--item-current-color);
  background-color: var(--item-current-background-color);
}

.vq-select-options-list-li:hover {
  background-color: var(--item-hover-background-color);
  color: var(--item-hover-color);
}

.vq-select-options-list-li-current:hover {
  background-color: var(--item-hover-background-color);
  color: var(--item-hover-current-color);
}

.vq-select-options-list-li-item-not-found {
  cursor: pointer;
  pointer-events: none;
  display: flex;
  position: relative;
  padding: 0 1rem;
  overflow: hidden;
  align-items: center;
  text-align: center;
  height: 3rem;
  color: var(--item-font-color);
  color: var(--item-not-found-font-color);
  font-weight: 600;
  width: 100%;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.vq-icons {
  border: none;
  cursor: pointer;
}

.vq-button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  margin-right: 0.5rem;
}

.vq-button-top-left-tooltip {
  visibility: hidden;
  width: 10rem;
  background-color: var(--tooltip-background-color);
  color: var(--tooltip-font-color);
  text-align: center;
  border-radius: var(--border-radius-px);
  padding: 0.5rem 0;
  position: absolute;
  z-index: 15;
  margin-left: -8rem;
  margin-top: -5.5rem;
  font-weight: 700;
  font-size: 1.1rem;
}

.vq-button-bottom-right-long-tooltip {
  visibility: hidden;
  width: 10rem;
  background-color: var(--tooltip-background-color);
  color: var(--tooltip-font-color);
  text-align: center;
  border-radius: var(--border-radius-px);
  padding: 0.5rem 0;
  position: absolute;
  z-index: 15;
  left: 0;
  font-weight: 700;
  top: 3.5rem;
  font-size: 1.1rem;
}

.vq-button-bottom-right-short-tooltip {
  visibility: hidden;
  width: 10rem;
  background-color: var(--tooltip-background-color);
  color: var(--tooltip-font-color);
  text-align: center;
  border-radius: var(--border-radius-px);
  padding: 0.5rem 0;
  position: absolute;
  z-index: 15;
  left: 0;
  font-weight: 700;
  top: 2rem;
  font-size: 1.1rem;
}

.vq-button-bottom-center-short-tooltip {
  visibility: hidden;
  min-width: 10rem;
  background-color: var(--tooltip-background-color);
  color: var(--tooltip-font-color);
  text-align: center;
  border-radius: var(--border-radius-px);
  padding: 0.5rem 0.3rem;
  position: absolute;
  z-index: 15;
  margin-left: -6rem;
  font-weight: 700;
  top: 3rem;
  font-size: 1.1rem;
}

.vq-button-bottom-center-long-tooltip {
  visibility: hidden;
  min-width: 10rem;
  background-color: var(--tooltip-background-color);
  color: var(--tooltip-font-color);
  text-align: center;
  border-radius: var(--border-radius-px);
  padding: 0.5rem 0.3rem;
  position: absolute;
  z-index: 15;
  margin-left: -6rem;
  font-weight: 700;
  top: 3.5rem;
  font-size: 1.1rem;
}

.vq-button-bottom-left-long-tooltip {
  visibility: hidden;
  width: 15rem;
  background-color: var(--tooltip-background-color);
  color: var(--tooltip-font-color);
  text-align: center;
  border-radius: var(--border-radius-px);
  padding: 0.5rem 0;
  position: absolute;
  z-index: 15;
  right: 0;
  font-weight: 700;
  top: 2.7rem;
  font-size: 1.1rem;
}

.vq-button-bottom-left-short-tooltip {
  visibility: hidden;
  width: 10rem;
  background-color: var(--tooltip-background-color);
  color: var(--tooltip-font-color);
  text-align: center;
  border-radius: var(--border-radius-px);
  padding: 0.5rem 0;
  position: absolute;
  z-index: 15;
  right: 0;
  font-weight: 700;
  top: 2rem;
  font-size: 1.1rem;
}

.vq-icons:hover .vq-button-top-left-tooltip,
.vq-icons:hover .vq-button-bottom-right-long-tooltip,
.vq-icons:hover .vq-button-bottom-right-short-tooltip,
.vq-icons:hover .vq-button-bottom-left-long-tooltip,
.vq-icons:hover .vq-button-bottom-left-short-tooltip,
.vq-icons:hover .vq-button-bottom-center-long-tooltip,
.vq-icons:hover .vq-button-bottom-center-short-tooltip,
.vq-button:hover .vq-button-top-left-tooltip,
.vq-button:hover .vq-button-bottom-right-short-tooltip,
.vq-button:hover .vq-button-bottom-right-long-tooltip,
.vq-button:hover .vq-button-bottom-left-short-tooltip,
.vq-button:hover .vq-button-bottom-left-long-tooltip,
.vq-button:hover .vq-button-bottom-center-long-tooltip,
.vq-button:hover .vq-button-bottom-center-short-tooltip {
  visibility: visible;
}

.vq-modal-close-edit-button {
  border: none;
  background-color: transparent;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  float: right;
}

.vq-modal-close-edit-button::before {
  font-family: "Material Icons";
  content: var(--icon-modal-close);
  color: var(--icon-grid-option-selected-color);
}

.vq-button-focus:focus {
  box-shadow: 0 0 0.5rem 0.2rem var(--box-shadow-color);
}

.vq-button-text-focus:focus {
  text-shadow: 0px 0.2rem 0 var(--box-shadow-color);
}

.vq-button-text-focus:focus + .vq-card-open-label {
  text-shadow: 0px 0.2rem 0 var(--box-shadow-color);
}

.vq-card {
  height: auto;
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: var(--card-background-color);
  padding: 1rem 1.5rem;
  border-radius: var(--border-radius-px);
  box-shadow: 0 3.2px 7.2px 0 var(--box-shadow-color), 0 0.6px 1.8px 0 var(--box-shadow-color);
  margin: 1rem 0.5rem;
}

.vq-card-full-width {
  max-width: calc(100% - 1rem);
  width: calc(100% - 1rem);
}

.vq-card-result {
  animation-name: vq-card-result-animation;
  animation-duration: 5s;
  animation-delay: 0;
}

@keyframes vq-card-result-animation {
  0% {
    box-shadow: 0px 0px 0px;
  }
  50% {
    box-shadow: 0px 0px 0.8rem;
  }
  100% {
    box-shadow: 0px 0px 0.1rem;
  }
}
@media screen and (min-width: 991.1px) {
  .vq-card-editable-modal .vq-card {
    width: 50%;
    min-width: 30rem;
    height: auto;
    margin: 0 auto;
    margin-top: 10rem;
    padding: 1.5rem;
  }
  .vq-card-non-full-width {
    width: calc(50% - 1rem);
    max-width: 100%;
    display: inline-block;
    vertical-align: top;
    margin: 1rem 0.5rem;
  }
  .vq-card-full-width {
    max-width: calc(100% - 1rem);
    width: 100%;
  }
}
@media screen and (max-width: 991px) {
  .vq-card-non-full-width {
    max-width: 100%;
    width: 100%;
    /*overflow: hidden;*/
  }
  .vq-card-editable-modal .vq-card {
    width: 90%;
    min-width: 30rem;
    height: auto;
    margin: 0 auto;
    margin-top: 1rem;
  }
}
.vq-card-content {
  display: inline-block;
  width: 100%;
  max-width: inherit;
}

.vq-header-panel-right {
  height: inherit;
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
}

.vq-header-panel-save-all-right {
  height: inherit;
  position: absolute;
  top: 1.5rem;
  right: 0;
}

.vq-card-collapsed {
  cursor: pointer;
}

.vq-card-collapsed::before {
  font-family: "Material Icons";
  font-size: 1rem;
  content: var(--icon-push-pin);
  color: var(--icons-font-color);
}

.vq-card-open-label {
  cursor: pointer;
  margin-top: -0.5rem;
  margin-left: -1rem;
  position: absolute;
}

.vq-card-open-label::after {
  content: var(--icon-arrow-down);
  color: var(--form-card-open-icon-color);
  font-family: "Material Icons";
  font-size: 2rem;
}

.vq-card-close-label {
  cursor: pointer;
  margin-top: -0.5rem;
  margin-left: -1rem;
  position: absolute;
}

.vq-card-close-label::after {
  content: var(--icon-card-close);
  font-family: "Material Icons";
  font-size: 2rem;
  color: var(--form-card-open-icon-color);
}

.vq-card-open:checked ~ .vq-card-open-label::after {
  content: var(--icon-arrow-right);
  color: var(--form-card-open-icon-color);
}

.vq-card-open-save-all-label::after {
  font-family: "Material Icons";
  font-size: 2rem;
  content: var(--icon-arrow-right);
  color: var(--form-card-open-icon-color);
}

.vq-visually-hidden {
  position: absolute;
  opacity: 0;
}

.vq-card-caption {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--card-title-font-color);
  position: relative;
  vertical-align: unset;
}

.vq-card-header {
  margin-bottom: 1rem;
  /*margin-top: 0.5rem;*/
}

.vq-acronym-name-container {
  padding: 0.5rem 1rem;
  margin-right: 0.5rem;
  height: 3rem;
  font-weight: bold;
  border-radius: var(--border-radius-px);
  border: none;
  position: relative;
}

.vq-acronym-name-color {
  color: var(--m-header-font-color);
  background-color: var(--m-header-background-color);
}

.vq-acronym-name-color-red {
  color: var(--acronym-name-red-color);
  background-color: var(--acronym-name-red-background);
}

.vq-acronym-name-color-blue {
  color: var(--acronym-name-blue-color);
  background-color: var(--acronym-name-blue-background);
}

.vq-acronym-name-color-orange {
  color: var(--acronym-name-orange-color);
  background-color: var(--acronym-name-orange-background);
}

.vq-acronym-name-color-black {
  color: var(--acronym-name-black-color);
  background-color: var(--acronym-name-black-background);
}

.vq-acronym-name-color-brown {
  color: var(--acronym-name-brown-color);
  background-color: var(--acronym-name-brown-background);
}

.vq-acronym-name-color-yellow {
  color: var(--acronym-name-yellow-color);
  background-color: var(--acronym-name-yellow-background);
}

.vq-acronym-name-color-grey {
  color: var(--acronym-name-grey-color);
  background-color: var(--acronym-name-grey-background);
}

.vq-acronym-name-color-green {
  color: var(--acronym-name-green-color);
  background-color: var(--acronym-name-green-background);
}

.vq-card-editable-modal {
  top: 0;
  /*  TODO CELE  padding-top: 5rem;*/
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--div-modal-background-color);
  z-index: 1000;
  position: fixed;
  overflow: scroll;
}

.vq-card-save-button-container {
  position: absolute;
  bottom: 1rem;
  width: calc(100% - 4rem);
}

.vq-card-message {
  float: left;
  left: 0;
  color: var(--messages-pending-color);
  margin-top: 1rem;
}

.vq-card-save-discard-update {
  border: none;
  background-color: transparent;
  margin-left: 0.1rem;
  margin-top: -1rem;
  color: var(--link-font-color);
  font-size: 1rem;
  cursor: pointer;
}

.vq-card-popup-content {
  margin-bottom: 4rem;
}

.vq-card-save-button {
  background-color: var(--m-header-background-color);
  border: none;
  border-radius: var(--border-radius-px);
  font-size: 1rem;
  height: 3rem;
  padding: 0 2rem;
  cursor: pointer;
  color: var(--button-dark-font-color);
  font-weight: 600;
  float: right;
  margin-left: 1rem;
}

.vq-row-save-button .vq-card-save-button {
  margin-bottom: 1rem;
}

.vq-card-demo-addrule {
  content: var(--icon-add-box);
  color: var(--form-card-open-icon-color);
  font-family: "Material Icons";
  font-size: 2rem;
}

.vq-menu-li-hide {
  display: none;
}

.vq-menu-expanded-true {
  cursor: pointer;
  border: none;
  background: var(--menu-fixed-background-color);
  float: right;
  margin-right: 0.2rem;
  margin-top: -0.6rem;
  margin-bottom: 0;
  position: absolute;
  left: 18rem;
}

.vq-menu-expanded-true::before {
  font-family: "Material Icons";
  font-size: 1.3rem;
  content: "keyboard_arrow_left";
  color: var(--icons-font-color);
}

.vq-menu-show-as-checked {
  float: right;
  margin-right: 0.2rem;
  margin-top: -0.5rem;
  transform: translateY(0.5rem);
}

.vq-menu-show-as-checked::before {
  font-family: "Material Icons";
  font-size: 2rem;
  font-weight: 600;
  content: var(--icon-done);
  color: var(--dark-green-color);
}

.vq-menu-expanded-false {
  cursor: pointer;
  border: none;
  background: var(--menu-minimized-background-color);
  float: right;
  position: absolute;
  left: 2.3rem;
  margin-top: -0.5rem;
}

.vq-menu-expanded-false::before {
  font-family: "Material Icons";
  font-size: 1.3rem;
  content: "keyboard_arrow_right";
  color: var(--icons-font-color);
}

.vq-menu-pin-container {
  display: inline-block;
  vertical-align: top;
}

.vq-menu-ul {
  text-decoration: none;
  list-style: none;
  line-height: 1.5rem;
  margin-top: 1rem;
}

.vq-menu-li {
  margin: 0.2rem;
  padding-top: 0.25rem;
  padding-left: 0.15rem;
  cursor: pointer;
  color: var(--menu-font-color);
  font-weight: 600;
  font-size: 1.075rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}

.vq-menu-item {
  text-decoration: none;
  color: var(--submenu-font-color);
  cursor: pointer;
}

.vq-menu-nested-li:hover {
  background-color: var(--submenu-hover-background-color);
}

.vq-menu-nested {
  list-style: none;
}

.vq-menu-form-selected,
.vq-menu-nested-li {
  padding: 0.3rem 0;
  cursor: pointer;
  vertical-align: middle;
  margin: 0.2rem 0;
}

.vq-menu-form-selected div,
.vq-menu-nested-li div {
  display: inline-block;
  margin-left: 0.5rem;
  width: calc(100% - 3rem);
}

.vq-menu-form-selected {
  color: var(--menu-selected-font-color);
  background-color: var(--menu-selected-background-color);
}

.vq-menu-form-selected:hover,
.vq-menu-form-selected:active,
.vq-menu-form-selected:visited {
  color: var(--menu-hover-font-color);
  background-color: var(--menu-hover-background-color);
}

.vq-menu-product-name {
  display: none;
}

.vq-case-selector-menu {
  width: 31rem;
  margin-top: -0.5rem;
  flex: initial;
}

.vq-case-selector-new-case-button-container {
  display: inline-block;
  vertical-align: top;
  margin-top: 1.5rem;
  top: 0;
  /*    margin-left: 0.5rem;*/
}

.vq-case-selector-new-case-button {
  display: inline-block;
  border: none;
  color: var(--m-header-font-color);
  background-color: transparent;
}

.vq-case-selector-new-case-button::before {
  font-family: "Material Icons";
  font-size: 2rem;
  content: var(--icon-add-box);
  color: var(--m-header-font-color);
}

@media screen and (max-width: 360px) {
  .vq-menu-nav {
    overflow: auto;
    height: 100%;
  }
  .vq-main-layout-left-fixed-non-mobile {
    visibility: hidden;
  }
  .vq-case-selector-new-case-button-container {
    margin-left: -0.3rem;
  }
  .vq-case-selector-menu {
    position: absolute;
    margin-left: 2.2rem;
    left: 0;
    width: calc(100% - 14rem);
    white-space: nowrap;
  }
  .vq-case-selector-menu .vq-button {
    margin-right: 0;
  }
  .vq-menu-expanded-true,
  .vq-menu-expanded-false {
    display: none;
  }
}
@media screen and (min-width: 991.1px) {
  .vq-menu-nav {
    overflow: auto;
  }
  .vq-menu-nav-expanded {
    height: calc(100% - 5rem);
  }
  .vq-menu-nav-non-expanded {
    height: calc(100% - 8rem);
  }
}
@media screen and (max-width: 991px) {
  .vq-menu-nav {
    overflow: auto;
    height: 100%;
  }
  .vq-main-layout-left-fixed-non-mobile {
    visibility: hidden;
  }
  .vq-case-selector-new-case-button-container {
    margin-left: 0.1rem;
  }
  .vq-case-selector-menu {
    position: absolute;
    margin-left: 2.2rem;
    left: 0;
    width: calc(100% - 12rem);
    white-space: nowrap;
  }
  .vq-case-selector-menu .vq-button {
    margin-right: 0.3rem;
    margin-left: -0.2rem;
  }
  .vq-menu-expanded-true,
  .vq-menu-expanded-false {
    display: none;
  }
}
.vq-case-selector-content-editable {
  min-width: 0;
}
.vq-case-selector-content-editable .vq-input {
  min-width: 0;
}

.vq-menu-nav-container {
  overflow: auto;
  height: calc(100% - 3.5rem);
}

.vq-menu-li-img {
  background-size: 2rem 2rem;
  width: 2rem;
  height: 2rem;
  display: inline-block;
  cursor: pointer;
  background-color: transparent;
  filter: var(--secondary-text-color-filter);
}

.vq-menu-li-img-menu {
  background-size: 2rem 2rem;
  width: 2rem;
  height: 2rem;
  display: inline-block;
  cursor: pointer;
  background-color: transparent;
  filter: var(--primary-text-color-filter);
}

.vq-menu-li-container-color {
  background-color: var(--m-banner-background-color);
}

.vq-menu-pin-panel-li-menu {
  margin: 0.2rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  color: var(--menu-font-color);
  font-weight: 600;
  font-size: 1.075rem;
  display: block;
}

.vq-menu-pin-panel-ul {
  visibility: hidden;
  position: absolute;
  display: inline-block;
  left: 4rem;
  background-color: var(--submenu-background-color);
  -webkit-box-shadow: 0.1rem 0.1rem 0.1rem 0 var(--box-shadow-color);
  box-shadow: 0.1rem 0.1rem 0.1rem 0 var(--box-shadow-color);
  border: 0.1rem solid var(--border-color);
  border-radius: var(--border-radius-px);
  width: 300px;
}

.vq-menu-pin-panel-li-sub-menu-container {
  position: absolute;
  display: block;
}

.vq-menu-pin-panel-li {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  color: var(--menu-font-color);
  display: block;
}

.vq-menu-li-container:hover .vq-menu-pin-panel-ul {
  visibility: visible;
}

.vq-menu-li-container {
  position: relative;
  padding-left: 0.75rem;
}

.vq-menu-nav-pin-panel {
  overflow: visible !important;
}

.vq-menu-li-img-left {
  padding-left: 0.2rem;
}

.vq-case-selector-content-editable .vq-input::placeholder {
  color: var(--m-header-font-color);
}

.vq-case-selector-content-editable .vq-input {
  background-color: transparent;
  color: var(--m-header-font-color);
  border: solid var(--m-header-font-color) 0.1rem;
}

.vq-case-selector-content-editable .vq-select-icon-selected::before,
.vq-case-selector-content-editable .vq-select-icon-not-selected::before {
  color: var(--m-header-font-color);
}

.vq-moon-menu-li-container-non-expanded {
  position: relative;
  border-left: 3px solid transparent;
  height: 3rem;
  z-index: 1;
  cursor: pointer;
  margin-top: -3rem;
}

.vq-moon-menu-non-expanded-li-selected {
  background-color: var(--primary-light-color);
}

.vq-moon-menu-li-container:hover,
.vq-moon-menu-non-expanded-li-non-selected:hover {
  background-color: var(--primary-light-color);
}

.vq-moon-menu-non-expanded-li-selected .vq-moon-menu-li-img-non-expanded {
  filter: var(--primary-color-filter);
}

.vq-moon-li-container-non-expanded-over {
  width: 100%;
  height: 3rem;
  z-index: 10;
  background-color: transparent;
  position: relative;
  cursor: pointer;
}

.vq-moon-li-container-non-expanded-over-hover + .vq-moon-menu-li-container-non-expanded,
.vq-moon-li-container-non-expanded-over:hover .vq-moon-menu-li-container-non-expanded {
  background-color: var(--primary-light-color);
}

.vq-moon-show-sub-menu {
  visibility: visible;
  height: auto;
  position: absolute;
  z-index: 100;
}

.vq-moon-show-sub-menu-ul {
  position: absolute;
  display: inline-block;
  left: 4rem;
  background-color: var(--text-icons-color);
  -webkit-box-shadow: 0.1rem 0.1rem 0.1rem 0 var(--secondary-light-text-color);
  box-shadow: 0.1rem 0.1rem 0.1rem 0 var(--secondary-light-text-color);
  border: 0.1rem solid var(--secondary-light-text-color);
  border-radius: 0 0 1rem 1rem;
  width: 25rem;
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.vq-moon-show-sub-menu-title {
  margin: 0.2rem;
  padding-top: 0.75rem;
  padding-bottom: 0.25rem;
  padding-left: 1rem;
  color: var(--primary-text-color);
  font-weight: 600;
  font-size: 1.075rem;
  display: block;
}

.vq-moon-show-sub-menu-li {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  color: var(--menu-font-color);
  display: block;
}

.vq-moon-sub-menu-li-item {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 1rem;
  cursor: pointer;
  white-space: nowrap;
}

.vq-moon-sub-menu-li-item:hover {
  background-color: var(--hover-not-selected-color);
}

.vq-moon-menu-li-img-non-expanded {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 2rem;
  height: 2rem;
  filter: var(--primary-text-color-filter);
  display: inline-block;
  margin-top: 0.5rem;
  cursor: pointer;
  background-color: transparent;
  margin-left: 0.5rem;
}

.vq-moon-menu-li-img {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 2rem;
  height: 2rem;
  vertical-align: top;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  display: inline-block;
  cursor: pointer;
  background-color: transparent;
  filter: var(--secondary-text-color-filter);
}

.vq-moon-menu-item-text {
  text-decoration: none;
  margin: 1rem 0.5rem 0 0.5rem;
  vertical-align: top;
  cursor: pointer;
  color: var(--primary-text-color);
  font-weight: 500;
  font-size: 1.075rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  width: calc(100% - 3rem);
}

.vq-form-layout-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  max-width: calc(100% - 1rem);
  width: 100%;
  margin-left: 1rem;
}

.vq-form-layout-title {
  margin: 0.5rem 0 0 1rem;
  background-color: var(--form-title-background-color);
  padding: 1.2rem 0 1rem 1rem;
  height: auto;
  margin-top: 6rem;
}

.vq-form-layout-pending-offline {
  margin-top: 1.5rem;
  margin-left: 2rem;
  color: var(--messages-pending-offline-color);
}

.vq-form-layout-pending-server-exception {
  margin-top: 1.5rem;
  margin-left: 2rem;
  color: #b200ff;
}

.vq-form-layout-header-cards {
  background-color: transparent;
  border-radius: var(--border-radius-px);
  text-align: left;
  display: inline-block;
  position: absolute;
  margin-top: -0.2rem;
  margin-left: 1rem;
}

.form-print-header {
  display: none;
}

.vq-form-layout-next-card-container {
  float: right;
  margin-top: -0.5rem;
}

.vq-form-under-construction-icon::before {
  font-family: "Material Icons";
  font-size: 2.5rem;
  content: var(--icon-construction);
  color: var(--red-color);
}

.vq-form-under-construction-text {
  color: var(--red-color);
  font-weight: 700;
  font-size: 2rem;
  vertical-align: super;
}

.vq-form-under-construction-container {
  display: inline-block;
  margin: 0 2rem;
}

@media screen and (max-width: 991px) {
  .vq-form-layout-header-cards {
    display: block;
    position: relative;
    margin-left: -1rem;
    padding-left: 1rem;
    margin-top: 0;
  }
  .vq-form-layout-title {
    margin-left: 0;
  }
  .vq-form-layout-container {
    max-width: 100%;
    width: 100%;
  }
  .vq-form-layout-container {
    margin-left: 0;
  }
}
.vq-form-title {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--form-title-font-color);
  position: relative;
  margin-top: 1rem;
  margin-left: 0.5rem;
  bottom: 0.5rem;
}

.vq-form-subtitle {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--form-title-font-color);
  margin: 2rem 0 1rem 3rem;
}

.vq-form-layout-next-card {
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
}

.vq-form-layout-next-card::before {
  font-family: "Material Icons";
  font-size: 2.5rem;
  content: "play_circle";
  color: var(--m-header-background-color);
}

.vq-card-not-collapsed {
  transform: rotate(45deg);
  background: transparent;
  border: none;
}

.vq-card-not-collapsed::before {
  font-family: "Material Icons";
  font-size: 0.9rem;
  content: var(--icon-push-pin);
  color: var(--icons-font-color);
}

.vq-card-not-collapsed-text {
  font-size: 0.8rem;
  color: var(--icons-font-color);
}

.vq-button-printer {
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  margin-left: 0.5rem;
}

.vq-button-printer::before {
  font-family: "Material Icons";
  font-size: 1.9rem;
  content: var(--icon-printer);
  color: var(--form-title-font-color);
}

.vq-button-printer-card {
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  top: 0.6rem;
  margin-left: 0.5rem;
}

.vq-button-printer-card::before {
  font-family: "Material Icons";
  font-size: 1.9rem;
  content: var(--icon-printer);
  color: var(--form-title-font-color);
}

.vq-button-printer-barcode {
  display: inline-block;
  position: absolute;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-top: -0.7rem;
  vertical-align: top;
  width: 1.5rem;
  height: 2.5rem;
  background-color: var(--header-font-color);
  mask: url(/printbarcode.svg) no-repeat 100% 100%;
  -webkit-mask: url(/icons/printbarcode.svg) no-repeat 100% 100%;
}

.vq-table-button-print-printer {
  border: none;
  cursor: pointer;
  padding: 0;
  background-color: transparent;
}

.vq-table-print-button-printer ::before {
  font-family: "Material Icons";
  font-size: 1.9rem;
  content: var(--icon-printer);
  color: var(--form-title-font-color);
}

.vq-table-print-button-barcode {
  display: inline-block;
  position: absolute;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-top: -0.7rem;
  vertical-align: top;
  width: 1.5rem;
  height: 2.5rem;
  background-color: var(--header-font-color);
  mask: url(/printbarcode.svg) no-repeat 100% 100%;
  -webkit-mask: url(/icons/printbarcode.svg) no-repeat 100% 100%;
}

.barcode-printer {
  display: none;
}

.vq-form-img {
  cursor: initial;
  background-size: 2rem 2rem;
  width: 2rem;
  height: 2rem;
  display: inline-block;
  cursor: pointer;
  background-color: var(--form-title-icon-color);
}

.vq-form-modal-container {
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--div-modal-background-color);
  z-index: 1000;
  position: fixed;
}

.vq-form-modal-container > .vq-card {
  width: 25%;
  max-width: 100%;
  min-width: 30rem;
  margin: 0 auto;
  margin-top: 11rem;
  padding-bottom: 2.5rem;
}

.vq-card-caption-form-not-allowed {
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--card-title-font-color);
  position: relative;
  vertical-align: unset;
}

.vq-form-layout-open-label {
  border: none;
  cursor: pointer;
  position: relative;
  margin-left: 0.5rem;
}

/*@import "../wwwroot/globals";
@import "../wwwroot/inputs-commons";*/
.vq-input-text-parsed {
  display: contents;
}

.vq-input-text-parsed-text {
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75rem;
  letter-spacing: 0.0333333333em;
  display: block;
  margin-top: -0.75rem;
  padding-left: 1.3rem;
  padding-bottom: 0.5rem;
}

.vq-input-text-parsed-text + .vq-inner-component-footer-container:not(empty) {
  margin-top: 1.2rem;
}

.vq-input-text-parsed-text + .vq-inner-component-footer-container:empty {
  margin-top: -1rem;
}

.vq-input-text-parsed {
  display: contents;
}

.vq-input-text-parsed-text {
  justify-content: space-between;
  opacity: 1;
  color: rgba(0, 0, 0, 0.6);
  padding-left: 16px;
  padding-right: 16px;
  top: 3rem;
  font-size: 0.75rem;
  letter-spacing: 0.0333333333em;
  text-decoration: inherit;
  text-transform: inherit;
  display: block;
  margin-top: 0;
  line-height: normal;
  margin: 0;
}

.vq-phone-container-summary {
  position: relative;
  background-color: var(--control-background-color);
  margin: 0.5rem 1rem 0.5rem 0;
  display: inline-flex;
  font-size: 1rem;
}
.vq-phone-container-summary .vq-phone-caption {
  font-weight: 600;
  position: relative;
  color: var(--control-summary-caption-font-color);
}
.vq-phone-container-summary .vq-phone-summary {
  display: inline-block;
}
.vq-phone-container-summary .vq-phone-summary .vq-phone-value-cel {
  position: relative;
  display: inline-block;
}
.vq-phone-container-summary .vq-phone-summary .vq-phone-value-phone {
  position: relative;
  display: inline-block;
}
.vq-phone-container-summary .vq-phone-summary .vq-phone-value-fax {
  position: relative;
  display: inline-block;
}
.vq-phone-container-summary .vq-phone-summary .vq-phone-value-day {
  position: relative;
  display: inline-block;
}
.vq-phone-container-summary .vq-phone-summary .vq-phone-value-night {
  position: relative;
  display: inline-block;
}
.vq-phone-container-summary .vq-phone-summary .vq-phone-value-office {
  position: relative;
  display: inline-block;
}
.vq-phone-container-summary .vq-phone-summary .vq-money-value {
  position: relative;
  display: inline-block;
  /*bottom: 0.8rem;*/
  margin-right: 0.2rem;
}
.vq-phone-container-summary .vq-phone-summary .vq-phone-icon-summary {
  display: inline-block;
  margin-top: -0.25rem;
  color: var(--control-content-font-color);
}
.vq-phone-container-summary .vq-phone-summary .vq-money-icon-summary {
  display: inline-block;
  margin-top: -0.25rem;
  margin-right: 0.2rem;
  margin-left: 0.1rem;
  bottom: 0.2rem;
  position: relative;
  color: var(--control-content-font-color);
}

.vq-phone-container-editable {
  /*
      Set the position relative so the children can
      be set to absolute
      (for the child it's actually relative to its parent)
  */
  position: relative;
  background-color: var(--control-background-color);
  margin: 1rem 1rem 1rem 0;
  display: inline-block;
  height: auto;
  vertical-align: top;
  max-width: inherit;
  color: var(--control-content-font-color);
}
.vq-phone-container-editable * {
  outline: none; /*no highlite box on focus*/
  box-shadow: none;
  position: absolute;
  border-radius: var(--border-radius-px);
}

.vq-phone-container {
  border: solid var(--control-border-color) 0.1rem;
  position: inherit;
  max-width: inherit;
}
.vq-phone-container .vq-phone {
  position: relative;
}

.vq-phone-floating-label,
.vq-phone-hard-floating-label {
  left: 0;
  padding-top: 0.9rem;
  padding-right: 0.2rem;
  padding-bottom: 0.8rem;
  padding-left: 1rem;
  pointer-events: none;
  color: var(--control-empty-caption-font-color);
}

.vq-phone-input {
  background-color: transparent;
  width: calc(100% - 5rem);
  height: inherit;
  font-size: 1rem;
  letter-spacing: 0.009375em;
  resize: none;
  position: inherit;
}

.vq-phone-input-readonly {
  background-color: transparent;
  width: calc(100% - 3rem);
  height: inherit;
  font-size: 1rem;
  letter-spacing: 0.009375em;
  resize: none;
  position: inherit;
}

.vq-phone-input:not(focus),
.vq-phone-input-readonly:not(focus) {
  border: none;
  padding-top: 0.9rem;
  padding-right: 0.2rem;
  padding-bottom: 0.8rem;
  padding-left: 1rem;
  border-right-color: transparent;
  position: inherit;
}

.vq-phone-input:focus {
  padding-top: 0.9rem;
  padding-right: 0.2rem;
  padding-bottom: 0.8rem;
  padding-left: 1rem;
  position: relative;
}

.vq-phone-in-list {
  opacity: 0.54;
}

.vq-phone-icon-phone::before {
  font-family: "Material Icons";
  font-size: 1.75rem;
  content: "home";
  color: var(--phone-icon-phone-color);
  font-weight: 600;
}

.vq-phone-icon-phone-summary::before {
  font-family: "Material Icons";
  font-size: 1.4rem;
  padding-left: 0.3rem;
  content: "home";
  font-weight: 600;
}

.vq-phone-icon-office::before {
  font-family: "Material Icons";
  font-size: 1.5rem;
  content: "phone";
  color: var(--phone-icon-office-color);
  font-weight: 600;
}

.vq-phone-icon-office-summary::before {
  font-family: "Material Icons";
  font-size: 1.4rem;
  content: "phone";
  padding-left: 0.3rem;
  font-weight: 600;
}

.vq-phone-icon-cel::before {
  font-family: "Material Icons";
  font-size: 1.5rem;
  content: "smartphone";
  color: var(--phone-icon-cel-color);
}

.vq-phone-icon-cel-summary::before {
  font-family: "Material Icons";
  font-size: 1.4rem;
  padding-left: 0.3rem;
  content: "smartphone";
}

.vq-phone-icon-fax::before {
  font-family: "Material Icons";
  font-size: 1.5rem;
  content: "print";
  color: var(--phone-icon-fax-color);
  font-weight: 400;
}

.vq-phone-icon-fax-summary::before {
  font-family: "Material Icons";
  font-size: 1.4rem;
  padding-left: 0.3rem;
  content: "print";
  font-weight: 400;
}

.vq-phone-icon-day::before {
  font-family: "Material Icons";
  font-size: 1.5rem;
  content: "light_mode";
  color: var(--phone-icon-day-color);
  font-weight: 400;
}

.vq-phone-icon-day-summary::before {
  font-family: "Material Icons";
  font-size: 1.4rem;
  padding-left: 0.3rem;
  content: "light_mode";
  font-weight: 400;
}

.vq-phone-icon-night::before {
  font-family: "Material Icons";
  font-size: 1.5rem;
  content: "dark_mode";
  color: var(--phone-icon-night-color);
  font-weight: 400;
}

.vq-phone-icon-night-summary::before {
  font-family: "Material Icons";
  font-size: 1.4rem;
  padding-left: 0.3rem;
  content: "dark_mode";
  font-weight: 400;
}

.vq-phone-icon-closed {
  display: inline-block;
  border: none;
  background-color: transparent;
  color: var(--header-font-color);
}

.vq-phone-icon-closed-fax {
  margin-left: 0.2rem;
  padding-top: 0.6rem;
}

.vq-phone-icon-closed-day {
  margin-left: 0.2rem;
  padding-top: 0.6rem;
}

.vq-phone-icon-closed-night {
  margin-left: 0.2rem;
  padding-top: 0.6rem;
}

.vq-phone-icon-closed-cel {
  margin-left: 0.2rem;
  padding-top: 0.6rem;
}

.vq-phone-icon-closed-office {
  margin-left: 0.2rem;
  padding-top: 0.6rem;
}

.vq-phone-icon-closed-phone {
  margin-left: 0.2rem;
  padding-top: 0.45rem;
}

.vq-phone-list {
  display: inline;
  width: 4rem;
  right: -1.2rem;
  height: 12rem;
  top: 0;
  padding-top: 0.45rem;
  padding-left: 0;
  background-color: var(--phone-type-list-background-color);
  z-index: 10;
  box-shadow: 1px 1px var(--dark-box-shadow-color);
  border: 0.1px solid var(--phone-type-list-border-color);
}

.vq-phone-icon {
  display: inline-block;
  position: relative;
  border: none;
  background-color: transparent;
  color: var(--header-font-color);
}

.vq-phone-icon-phone:hover,
.vq-phone-icon-cel:hover,
.vq-phone-icon-fax:hover,
.vq-phone-icon-day:hover,
.vq-phone-icon-night:hover,
.vq-phone-icon-office:hover {
  background-color: var(--item-current-background-color);
  opacity: 1;
}

.vq-phone-icon-close {
  margin-left: 0.2rem;
  margin-right: 0.2rem;
  margin-top: 0.2rem;
  font-weight: 800;
}

.vq-phone-list-options {
  display: inline;
  width: 2rem;
}

.vq-phone-icon-close::before {
  font-family: "Material Icons";
  font-size: 1.3rem;
  content: "close";
  color: var(--item-font-color);
}

.vq-phone-select-icon {
  top: 0.5rem;
}

.vq-phone-remove-icon {
  position: relative;
  right: -1.8rem;
  top: 0.3rem;
  cursor: pointer;
  bottom: 0;
  background-color: transparent;
  border: none;
}

.vq-phone-remove-icon:before {
  content: var(--icon-delete);
  font-size: 1.6rem;
  font-family: "Material Icons";
}

.vq-phone-input:focus ~ .vq-phone-floating-label,
.vq-phone-input:not(focus):valid ~ .vq-phone-floating-label,
.vq-phone-input-readonly:not(focus):valid ~ .vq-phone-floating-label,
.vq-phone-input:read-only ~ .vq-phone-floating-label,
.vq-phone-input-readonly:read-only ~ .vq-phone-floating-label,
.vq-input-readonly ~ .vq-phone-floating-label,
.vq-phone-hard-floating-label {
  left: 0.5rem;
  top: -0.7rem;
  color: var(--control-caption-font-color);
  background-color: var(--control-background-color);
  padding: 0.14rem 0.42rem 0 0.42rem;
  font-size: 0.85rem;
  display: inline-block;
  pointer-events: none;
}

.vq-phone-icon-add {
  position: relative;
  cursor: pointer;
  top: 0.1rem;
  right: -1.6rem;
  border: none;
  background-color: transparent;
}

.vq-phone-icon-add:before {
  content: var(--icon-add-circle);
  font-size: 1.1rem;
  font-family: "Material Icons";
}

.vq-phone-summary-icon {
  text-align: center;
  padding-bottom: 0.5rem;
  width: 30px;
}

/*@import "../wwwroot/globals";
@import "../wwwroot/inputs-commons";*/
@media screen and (min-width: 991.1px) {
  .vq-case-selector-content-editable {
    width: 55%;
    margin-right: 0;
  }
}
@media screen and (max-width: 991px) {
  .vq-case-selector-content-editable {
    width: 50%;
    margin-right: 0;
    margin-left: -0.3rem;
  }
}
.vq-case-selector-error {
  border: solid var(--control-error-line-color) var(--focus-line-width) !important;
}

.vq-case-selector-options-list {
  z-index: 200;
}

.vq-organization-edit-icon {
  display: inline-block;
  position: absolute;
  height: 3rem;
  z-index: 8;
  cursor: pointer;
  top: 0.8rem;
  font-size: 1.4rem;
  right: 1rem;
}

.vq-organization-edit-icon:before {
  content: var(--icon-edit);
  font-family: "Material Icons";
  color: var(--control-content-font-color);
}

.vq-organization-edit-icon-summary-mode {
  display: inline-block;
  cursor: pointer;
}

.vq-organization-edit-icon-summary-mode:before {
  content: var(--icon-edit);
  font-family: "Material Icons";
  color: var(--control-content-font-color);
}

.vq-organization-icon-pin-active {
  display: inline;
  cursor: pointer;
  font-size: 1rem;
  vertical-align: top;
  width: 1rem;
  padding-top: 0.1rem;
  position: relative;
  top: 0.5rem;
  left: -1rem;
}

.vq-organization-icon-pin-active:before {
  content: var(--icon-push-pin);
  font-family: "Material Icons";
}

.vq-organization-icon-pin-rotate {
  transform: rotate(45deg);
  display: inline-block;
  font-size: 1.05rem;
  top: 0.3rem;
  color: var(--control-content-font-color) !important;
}

.vq-organization-modal-container {
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--div-modal-background-color);
  z-index: 1000;
  position: fixed;
  overflow: scroll;
}

.vq-organization-modal-container > .vq-card {
  width: 50%;
  max-width: 100%;
  min-width: 30rem;
  margin: 0 auto;
  margin-top: 11rem;
  padding-bottom: 2.5rem;
}

.vq-organization-detail-container-summary-mode {
  transform: scale(0.8);
  display: inline;
}

.vq-organization-detail-content-summary-mode {
  width: calc(100% - 2rem);
  display: inline;
  top: 0.5rem;
}

.vq-organization-detail-container-summary-mode .vq-input-container-summary,
.vq-organization-detail-container-summary-mode .vq-phone-container-summary {
  height: 100%;
  margin-bottom: 0.7rem;
}

.vq-organization-detail-container .vq-input-container-editable {
  position: relative;
  margin-bottom: 0.1rem;
  vertical-align: top;
  background-color: var(--card-background-color);
}

.display-inline-block {
  display: inline-block;
  vertical-align: top;
  height: 100%;
  margin-bottom: 0;
  margin-right: 0;
}

.vq-organization-width {
  padding-right: 3rem !important;
}

.vq-component-organization-flex {
  display: flex;
  flex-wrap: wrap;
}

.vq-address-icon {
  display: inline-block;
  font-size: 1.4rem;
}

.vq-address-icon:before {
  content: var(--icon-room);
  font-family: "Material Icons";
  color: var(--control-content-font-color);
}

.vq-address-edit-icon {
  display: inline-block;
  position: absolute;
  height: 3rem;
  z-index: 8;
  cursor: pointer;
  top: 0.8rem;
  font-size: 1.4rem;
  right: 0.5rem;
}

.vq-address-edit-icon:before {
  content: var(--icon-edit);
  font-family: "Material Icons";
  color: var(--control-content-font-color);
}

.display-inline-block {
  display: inline-block;
  vertical-align: top;
  height: 100%;
  margin-bottom: 0;
  margin-right: 0;
}

.vq-address-modal-container > .vq-card {
  width: 50% !important;
  max-width: 100%;
  min-width: 30rem;
  margin: 0 auto;
  margin-top: 15rem;
  padding-bottom: 2.5rem;
}

.vq-address-modal-container {
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--div-modal-background-color);
  z-index: 1000;
  position: fixed;
  overflow: scroll;
}

.vq-grid-editable-row-modal > .vq-card > .vq-grid-item > .vq-organization-modal-container > .vq-card,
.vq-grid-editable-row-modal > .vq-card > .vq-grid-item > .vq-address-modal-container > .vq-card,
.vq-grid-editable-row-modal > .vq-card > .vq-grid-item > .vq-contact-modal-container > .vq-card {
  margin-top: 15rem;
  margin-left: calc(25% + 1.5rem);
}

.vq-organization-modal-container > .vq-card > .vq-card-content > .vq-address-modal-container > .vq-card,
.vq-contact-modal-container > .vq-card > .vq-card-content > .vq-address-modal-container > .vq-card,
.vq-contact-modal-container > .vq-card > .vq-card-content > .vq-organization-modal-container > .vq-card {
  margin-top: 14.5rem;
  margin-left: calc(25% + 1.5rem);
}

.vq-grid-editable-row-modal > .vq-card > .vq-grid-item > .vq-organization-modal-container > .vq-card > .vq-card-content > .vq-address-modal-container > .vq-card,
.vq-grid-editable-row-modal > .vq-card > .vq-grid-item > .vq-contact-modal-container > .vq-card > .vq-card-content > .vq-address-modal-container > .vq-card,
.vq-grid-editable-row-modal > .vq-card > .vq-grid-item > .vq-contact-modal-container > .vq-card > .vq-card-content > .vq-organization-modal-container > .vq-card {
  margin-top: 18.5rem;
  margin-left: calc(25% + 3rem);
}

.vq-contact-modal-container > .vq-card > .vq-card-content > .vq-organization-modal-container > .vq-card > .vq-card-content > .vq-address-modal-container > .vq-card {
  margin-top: 18rem;
  margin-left: calc(25% + 3rem);
}

.vq-grid-editable-row-modal > .vq-card > .vq-grid-item > .vq-contact-modal-container > .vq-card > .vq-card-content > .vq-organization-modal-container > .vq-card > .vq-card-content > .vq-address-modal-container > .vq-card {
  margin-top: 22rem;
  margin-left: calc(25% + 4.5rem);
}

.vq-address-detail-container-summary-mode .vq-input-container-summary,
.vq-address-detail-container-summary-mode .vq-phone-container-summary {
  height: 100%;
  margin-top: 0;
  margin-bottom: 0.7rem;
}

.vq-address-detail-container .vq-input-container-editable {
  position: relative;
  margin-bottom: 0.1rem;
  vertical-align: top;
}

.vq-address-with {
  padding-right: 2rem !important;
}

.vq-switch {
  font-size: 0.6rem;
  height: 1rem;
  margin-bottom: 0.625em;
  position: relative;
  top: 0.3rem;
}
.vq-switch .vq-switch-value {
  height: 0;
  font-size: 1em;
  left: 10%;
  line-height: 0;
  outline: none;
  position: absolute;
  top: 0;
  width: 0;
}
.vq-switch .vq-switch-value:before, .vq-switch .vq-switch-value:after {
  content: "";
  font-size: 1em;
  position: absolute;
}
.vq-switch .vq-switch-value:before {
  border-radius: 1.25em;
  background: #bdc3c7;
  height: 1.5rem;
  transition: background-color 0.25s ease-out 0.1s;
  width: 40px;
}
.vq-switch .vq-switch-value:after {
  box-shadow: 0 0.0625em 0.375em 0 #666;
  border-radius: 50%;
  background: #fefefe;
  height: 1.5rem;
  transform: translate(0, 0);
  transition: transform 0.25s ease-out 0.1s;
  width: 1.5rem;
}
.vq-switch .vq-switch-value:checked:after {
  transform: translate(2.5em, 0);
}
.vq-switch .vq-switch-value#switch-blue:checked:before {
  background: #3498db;
}

.vq-switch-label {
  color: var(--control-caption-font-color);
  left: 0;
  background-color: var(--control-background-color);
  padding-left: 0.5rem;
  position: relative;
}

.vq-switch-comments {
  font-size: 0.8rem;
  position: relative;
  top: 1.2rem;
}
.vq-switch-comments .vq-switch-value {
  height: 0;
  font-size: 1em;
  left: 10%;
  line-height: 0;
  outline: none;
  position: absolute;
  top: 0;
  text-align: center;
  cursor: pointer;
  /*        width: calc(100% - 7rem) !important;*/
}
.vq-switch-comments .vq-switch-value:before, .vq-switch-comments .vq-switch-value:after {
  content: "";
  font-size: 1em;
  position: absolute;
}
.vq-switch-comments .vq-switch-value:before {
  border-radius: 1.25em;
  background: #bdc3c7;
  height: 1.5rem;
  transition: background-color 0.25s ease-out 0.1s;
  width: 40px;
}
.vq-switch-comments .vq-switch-value:after {
  box-shadow: 0 0.0625em 0.375em 0 #666;
  border-radius: 50%;
  background: #fefefe;
  height: 1.5rem;
  transform: translate(0, 0);
  transition: transform 0.25s ease-out 0.1s;
  width: 1.5rem;
}
.vq-switch-comments .vq-switch-value:checked:after {
  transform: translate(2.5em, 0);
}
.vq-switch-comments .vq-switch-value#switch-blue:checked:before {
  background: #3498db;
}

.vq-switch-component {
  position: relative;
  display: inline-block;
  width: 3rem;
  height: 1.5rem;
  margin: 0 auto;
  display: block;
}

.vq-switch-component input {
  opacity: 0;
  width: 0;
  height: 0;
}

.vq-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--light-grey-color);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.vq-slider:before {
  position: absolute;
  content: "";
  height: 1.1rem;
  width: 1.1rem;
  left: 0.2rem;
  top: 0.2rem;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .vq-slider {
  background-color: var(--m-header-background-color);
}

.vq-switch-component input:focus + .vq-slider {
  box-shadow: 0 0 0.5rem 0.2rem var(--box-shadow-color);
}

input:checked + .vq-slider:before {
  -webkit-transform: translateX(1.5rem);
  -ms-transform: translateX(1.5rem);
  transform: translateX(1.5rem);
}

/* Rounded sliders */
.vq-slider.vq-round {
  border-radius: 1rem;
}

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

/* Icon Edit Label*/
.vq-swicth-label-container {
  position: relative;
  display: inline-block;
  top: 0.4rem;
}

.vq-switch-edit-icon {
  display: inline-block;
  position: relative;
  height: 3rem;
  z-index: 8;
  cursor: pointer;
  font-size: 1.4rem;
}

.vq-switch-edit-icon:before {
  content: var(--icon-edit);
  font-family: "Material Icons";
  color: var(--control-content-font-color);
}

.vq-switch-text {
  font-size: 0.8rem;
  position: relative;
  top: 1.2rem;
}

.vq-switch-text-component {
  position: relative;
  display: inline-block;
  width: 4rem;
  height: 1.5rem;
  margin: 0 auto;
  display: block;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  cursor: pointer;
}

.vq-switch-text-component input {
  opacity: 0;
  width: 0;
  height: 0;
}

.vq-slider-text {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--button-dark-background-color);
}

.vq-slider-text:before {
  position: absolute;
  content: "";
  height: 1.1rem;
  width: 1.1rem;
  left: 0.2rem;
  top: 0.19rem;
  background-color: white;
  transition: 0.4s;
}

input:checked + .vq-slider-text {
  background-color: var(--m-header-background-color);
}

input:checked + .vq-slider-text + .vq-switch-text-value {
  text-align: left;
  padding-top: 0.4rem;
  color: var(--app-background-color);
  font-weight: 600;
  transition: 0.4s;
}

input:not(checked) + .vq-slider-text + .vq-switch-text-value {
  text-align: right;
  width: 3rem;
  padding-top: 0.4rem;
  color: var(--app-background-color);
  font-weight: 600;
}

.vq-switch-text-component input:focus + .vq-slider-text {
  box-shadow: 0 0 0.5rem 0.2rem var(--box-shadow-color);
}

input:checked + .vq-slider-text:before {
  transform: translateX(2.5rem);
}

/* Rounded sliders */
.vq-slider-text.vq-round {
  border-radius: 1rem;
}

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

/* Icon Edit Label*/
.vq-swicth-label-container {
  position: relative;
  display: inline-block;
  top: 0.4rem;
}

.vq-switch-edit-icon {
  display: inline-block;
  position: relative;
  height: 3rem;
  z-index: 8;
  cursor: pointer;
  font-size: 1.4rem;
}

.vq-switch-edit-icon:before {
  content: var(--icon-edit);
  font-family: "Material Icons";
  color: var(--control-content-font-color);
}

.vq-place {
  position: relative;
  display: inline-block;
}

.vq-place-organization {
  top: 3rem;
}

.vq-place-address {
  top: 3rem;
}

.vq-place-same-address-as {
  position: relative;
  top: 3rem;
}

.vq-style-place {
  font-style: italic;
  color: var(--detalis-summary-color) !important;
}

.vq-multiselect-container-editable {
  /*
      Set the position relative so the children can
      be set to absolute
      (for the child it's actually relative to its parent)
  */
  vertical-align: top;
  position: relative;
  background-color: transparent;
  margin: 1rem 1rem 1rem 0;
  display: inline-block;
  max-width: inherit;
  color: var(--control-content-font-color);
}
.vq-multiselect-container-editable * {
  outline: none; /*no highlite box on focus*/
  box-shadow: none;
  position: absolute;
}

.vq-multiselect-container-editable-width {
  height: fit-content;
  min-width: var(--min-width-components);
}

.vq-multiselect-container-list {
  background-clip: padding-box;
  padding: 0 calc(1.4285714286em + 8px) 0 0;
  box-sizing: border-box;
  position: relative;
  transition: all 0.1s ease;
  cursor: text;
  border: 0.1rem solid var(--control-border-color);
  outline: 0;
  letter-spacing: 0.009375em;
  width: 100%;
  display: block;
  max-width: inherit;
  padding-left: 0.5rem;
  padding-top: 0.7rem;
  height: inherit;
  min-height: 3rem;
  margin-right: 1rem;
  border-radius: var(--border-radius-px);
  background-color: var(--control-background-color);
}

.vq-multiselect-list {
  letter-spacing: 0.009375em;
  width: 100%;
  min-height: 1.5rem;
  display: block;
  max-width: inherit;
  padding-left: 0.5rem;
  padding-top: 0.5rem;
}

.vq-multiselect-item {
  cursor: default;
  display: inline-block;
  align-items: center;
  line-height: inherit;
  white-space: normal;
  position: relative;
}

.vq-multiselect-container-item {
  position: relative;
  cursor: default;
  display: inline-block;
  align-items: center;
  line-height: inherit;
  white-space: normal;
  border: 1px solid transparent;
  margin: 0 0.2rem 0.1rem 0;
  padding: 0.2rem 0.7rem 0.2rem 0.7rem;
  background-color: var(--multiselect-item-background-color);
  border-radius: var(--border-radius-px);
  color: var(--multiselect-item-text-color);
}

.vq-multiselect-close-icon {
  display: inline-block;
  z-index: 8;
  cursor: pointer;
  top: 0;
  position: inherit;
  left: 0%;
}

.vq-multiselect-close-icon:before {
  content: var(--icon-close);
  font-family: "Material Icons";
  font-size: 0.7rem;
  font-weight: 700;
}

.vq-multiselect-item-value {
  position: inherit;
}

.vq-multiselect-input-container {
  display: inline-block;
  position: relative;
  max-width: inherit;
}

.vq-multiselect-floating-label {
  padding-top: 0.9rem;
  padding-right: 0.2rem;
  padding-bottom: 0.8rem;
  padding-left: 1rem;
  pointer-events: none;
  color: var(--control-empty-caption-font-color);
  top: 0.2rem;
}

.vq-multiselect-input {
  background-color: transparent;
  height: inherit;
  font-size: 1rem;
  letter-spacing: 0.009375em;
  resize: none;
  /*    margin: 0.5rem 0rem;
  */
  position: relative;
  min-width: 3rem;
  max-width: inherit;
}

/*.vq-multiselect-input:not(focus) {
    padding-top: 0.9rem;
    padding-right: 0.2rem;
    padding-bottom: 0.8rem;
    padding-left: 1rem;
}*/
.vq-multiselect-on-focus {
  border: solid var(--control-border-color) var(--focus-line-width);
}

/*.vq-multiselect-input:focus {
    border: solid var(--border-color) var(--focus-line-width);
    padding-top: 0.9rem;
    padding-right: 0.2rem;
    padding-bottom: 0.8rem;
    padding-left: 1rem;
}*/
/*
    Move the caption from input location to the top
    when input has the focus or input has a value
*/
.vq-multiselect-container-item ~ .vq-multiselect-floating-label,
.vq-multiselect-container-item ~ .vq-multiselect-floating-label,
.vq-multiselect-input:focus ~ .vq-multiselect-floating-label,
.vq-multiselect-input:not(focus):valid ~ .vq-multiselect-floating-label,
.vq-multiselect-input:read-only ~ .vq-multiselect-floating-label,
.vq-multiselect-floating-label-nop-empty ~ .vq-multiselect-floating-label {
  top: -0.5rem;
  left: 0.5rem;
  color: var(--control-caption-font-color);
  background-color: var(--control-background-color);
  padding: 0.14rem 0.42rem 0 0.42rem;
  font-size: 0.85rem;
  display: inline-block;
  pointer-events: none;
}

.vq-multiselect-width {
  position: relative;
  height: 1rem;
  margin: 0.5rem 0rem;
  padding-left: 0.2rem !important;
  border: none !important;
}

.vq-multiselect-icon {
  display: inline-block;
  position: absolute;
  height: 3rem;
  z-index: 8;
  cursor: pointer;
  top: 0.8rem;
  font-size: 1.5rem;
  font-weight: 700;
  right: 0.5rem;
}

.vq-grid-item .vq-multiselect-icon {
  top: 1rem;
}

.vq-multiselect-icon:before {
  content: var(--icon-arrow-up);
  font-family: "Material Icons";
}

.vq-multiselect-icon-not-selected {
  color: var(--icons-font-color);
}

.vq-multiselect-icon-not-selected:before {
  color: var(--control-border-color);
  content: var(--icon-arrow-up);
  font-family: "Material Icons";
}

.vq-multiselect-icon-selected:before {
  color: var(--control-border-color);
  content: var(--icon-arrow-down);
  font-family: "Material Icons";
}

.vq-multiselect-options-list-ul {
  width: calc(100% - 1rem);
  min-width: var(--min-width-components);
  height: auto;
  background-color: var(--item-dropdown-list-background-color);
  padding: 0;
  margin-top: 0.1rem;
  color: var(--item-font-color);
  left: 0;
  position: absolute;
  display: block;
  max-height: 12rem;
  line-height: 2rem;
  overflow: hidden;
  overflow-y: auto;
  border-radius: var(--border-radius-px);
  z-index: 198;
  list-style-type: none;
  box-shadow: 0 0.4rem 0.4rem -0.4rem var(--box-shadow-color), 0 0.4rem 0.4rem 0.1rem var(--box-shadow-color), 0 0.4rem 0.4rem 0.15rem var(--box-shadow-color);
}

.vq-multiselect-options-list-li {
  cursor: pointer;
  pointer-events: auto;
  display: list-item;
  position: relative;
  padding: 0 1rem;
  overflow: hidden;
  align-items: center;
  color: var(--item-font-color);
}

li.vq-multiselect-options-list-li.active {
  color: var(--item-current-color);
  background-color: var(--item-current-background-color);
}

.vq-multiselect-options-list-li:hover {
  background-color: var(--item-hover-background-color);
  color: var(--item-hover-color);
}

.vq-multiselect-options-list-li-current:hover {
  background-color: var(--item-hover-background-color);
  color: var(--item-hover-current-color);
}

.vq-multiselect-options-list-li-item-not-found {
  cursor: pointer;
  pointer-events: none;
  display: flex;
  position: relative;
  padding: 0 1rem;
  overflow: hidden;
  align-items: center;
  text-align: center;
  height: 3rem;
  color: var(--item-font-color);
  color: var(--item-not-found-font-color);
  font-weight: 600;
  width: inherit;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.vq-grid-root {
  position: relative;
}
.vq-grid-root .loading {
  top: 0;
  left: 0;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background-color: var(--div-modal-background-color);
  opacity: 0.4;
  display: flex;
}
.vq-grid-root .loading .waiting-img {
  background-size: 5rem 5rem;
  width: 5rem;
  height: 5rem;
  background-image: url(/icons/waiting.gif);
  margin: auto;
}

.vq-grid-items-not-found {
  cursor: pointer;
  display: inline-flex;
  height: 1.5rem;
  color: var(--item-not-found-font-color);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 1rem;
  flex-direction: row;
  align-content: center;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: -0.5rem;
}

.vq-grid-table-container {
  overflow-x: auto;
  width: calc(100% - 1rem);
  margin-left: 0;
}

.vq-grid-table-super-container {
  display: flex;
  width: calc(100% - 1rem);
}

.vq-grid-actions-table-container {
  margin-left: 1.5rem;
}

@media screen and (min-width: 991.1px) {
  .vq-only-mobile {
    display: none;
  }
  .vq-grid-container, .vq-grid-container-filter {
    overflow: auto;
    width: 100%;
    border: 1px solid var(--border-color);
  }
  .vq-grid-scrollable {
    overflow: auto;
    max-height: calc(100vh - 10rem);
  }
  .vq-grid-scrollable .vq-grid-scrollable {
    overflow: visible;
    max-height: 100%;
  }
  .vq-grid-scrollable::-webkit-scrollbar-track {
    border-radius: var(--border-radius-px);
    -webkit-box-shadow: inset 0 0 0.5rem #babac2;
    box-shadow: inset 0 0 0.5rem #babac2;
  }
  .vq-grid-scrollable::-webkit-scrollbar-thumb {
    border-radius: var(--border-radius-px);
    background-color: var(--border-color);
  }
  .vq-grid-scrollable::-webkit-scrollbar-corner {
    background-color: #babac2;
  }
  .vq-grid-scrollable::-webkit-scrollbar {
    width: 1rem;
    height: 1rem;
  }
  .vq-grid {
    width: 100%;
    display: table;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
  }
  .vq-grid-thead-non-show-filter {
    display: table-header-group;
  }
  .vq-grid-item-detail-td > .vq-card > .vq-card-header {
    display: none;
  }
  .vq-grid .vq-grid-tbody-non-show-filter {
    display: table-row-group;
  }
  .vq-grid-headers {
    width: 100%;
    display: table-row;
    height: 100%;
  }
  .vq-grid-item .vq-button-component {
    margin-bottom: 0.2rem;
  }
  .vq-grid-header-item {
    text-align: left;
    display: table-cell;
    color: var(--grid-header-font-color);
    background-color: var(--grid-header-background-color);
    font-weight: 600;
    padding: 0.1rem 0.2rem 0.1rem 0.5rem;
    letter-spacing: normal;
    border: 1px solid var(--border-color);
    text-overflow: ellipsis;
    font-size: 1rem;
    overflow: hidden;
    vertical-align: middle;
    height: 2.5rem;
    position: sticky;
    top: 0;
    z-index: 10;
    resize: horizontal;
  }
  .vq-grid tbody th {
    position: sticky;
    left: 0;
    z-index: 9;
  }
  .vq-grid-header-item-empty-cell {
    padding: 0;
  }
  .vq-grid-header-item-label-CaseNum,
  .vq-grid-header-item-label-Time,
  .vq-grid-header-item-label-Age,
  .vq-grid-header-item-label-Date {
    min-width: 10rem;
  }
  .vq-grid-header-item-label-CaseType {
    min-width: 17rem;
  }
  .vq-grid-header-item-label-DateTime {
    min-width: 13rem;
  }
  .vq-grid-header-item-label-Integer,
  .vq-grid-header-item-label-Boolean {
    min-width: 5rem;
  }
  /*
  .vq-grid-header-item-label {
      min-width: 15rem;
  }*/
  .vq-grid-header-item-label-Label,
  .vq-grid-header-item-label-Text,
  .vq-grid-header-item-label-Contact,
  .vq-grid-header-item-label-Organization,
  .vq-grid-header-item-label-Name,
  .vq-grid-header-item-label-Place,
  .vq-grid-header-item-label-Phone,
  .vq-grid-header-item-label-Temperature,
  .vq-grid-header-item-label-LargeText,
  .vq-grid-header-item-label-MultiOption,
  .vq-grid-header-item-label-MultiOptionItem,
  .vq-grid-header-item-label-MannerOfDeath,
  .vq-grid-header-item-label-ExamType,
  .vq-grid-header-item-label-Speed,
  .vq-grid-header-item-label-SuggestedText,
  .vq-grid-header-item-label-Length,
  .vq-grid-header-item-label-PredefinedText,
  .vq-grid-header-item-label-Mass,
  .vq-grid-header-item-label-Volume,
  .vq-grid-header-item-label-Money,
  .vq-grid-header-item-label-CauseOfDeath,
  .vq-grid-header-item-label-Area,
  .vq-grid-header-item-label-Barcode,
  .vq-grid-header-item-label-Storage {
    min-width: 15rem;
  }
  .vq-grid-header-item-actions {
    display: table-cell;
    color: var(--grid-header-font-color);
    background-color: var(--grid-header-background-color);
    font-weight: 600;
    /*padding: 0.1rem 0.2rem 0.1rem 0.5rem;*/
    letter-spacing: normal;
    border: 1px solid var(--border-color);
    text-overflow: ellipsis;
    font-size: 1rem;
    overflow: hidden;
    vertical-align: middle;
    height: 2.5rem;
    position: sticky;
    left: 0;
    top: 0;
    z-index: 19;
    text-align: center;
  }
  .vq-grid-paginator-container span {
    margin-right: 0.5rem;
    margin-left: 1.5rem;
  }
  .vq-grid-columns {
    display: table-row;
    width: 100%;
  }
  .vq-grid-row-bottom-border {
    border-bottom: 1px solid var(--border-color);
  }
  .vq-grid-item {
    display: table-cell;
    vertical-align: top;
    text-align: left;
    font-size: 1rem;
    /*        color: var(--grid-item-font-color);
    background-color: var(--grid-item-background-color);*/
    padding: 1rem 0.5rem 0 1.5rem;
    letter-spacing: normal;
    border: 1px solid var(--border-color);
    /*        text-overflow: ellipsis;
    overflow: hidden;*/
    height: 1.5rem;
    /*max-height: 3.7rem;
    min-height: 3.7rem;*/
  }
  .vq-grid-item-action {
    padding: 0 0.2rem 0 0;
    vertical-align: top;
  }
  .vq-grid-item-data {
    padding: 0.2rem 0.2rem 0rem 0.5rem;
    line-height: 2rem;
  }
  .vq-grid-item-action-status {
    width: 0.5rem;
    display: inline-block;
    height: 100%;
  }
  .vq-tr-status-none .vq-grid-item-action div {
    width: calc(100% - 0.5rem);
  }
  .vq-tr-status-caseclosed .vq-grid-item-action div,
  .vq-tr-status-caseopened .vq-grid-item-action div {
    width: calc(100% - 1rem);
  }
  .vq-tr-status-none .vq-grid-item-action-status {
    background-color: transparent;
    width: 0;
  }
  .vq-tr-status-caseclosed .vq-grid-item-action-status {
    background-color: var(--close-color);
  }
  .vq-tr-status-caseopened .vq-grid-item-action-status {
    background-color: var(--open-color);
  }
  .vq-tr-backgroundcolor-none {
    background-color: transparent;
  }
  .vq-tr-backgroundcolor-yellow {
    background-color: #FFEBBC;
  }
  .vq-tr-backgroundcolor-red {
    background-color: #FFDADA;
  }
  .vq-tr-backgroundcolor-green {
    background-color: #DEF0D4;
  }
  .vq-grid-columns .vq-grid-item .vq-checkbox-container {
    height: 1rem;
    top: 1rem;
  }
  .vq-grid-columns .vq-grid-item .vq-component-container .vq-radiobutton-container .vq-checkbox-label {
    display: none;
  }
  .vq-grid-columns .vq-grid-item .vq-component-container .vq-radiobutton-container {
    line-height: 1rem;
    height: auto;
    top: 0.5rem;
  }
  .vq-grid-columns > .vq-grid-item .vq-component-container .vq-radiobutton-container .vq-radiobutton-group {
    line-height: normal;
  }
  /*.vq-grid-columns > .vq-grid-item-data .vq-component-container-summary,*/
  .vq-grid-columns > .vq-grid-item-data .vq-component-container {
    width: 100%;
  }
  .vq-grid-columns > .vq-grid-item-data .vq-button-component-container .vq-button-component {
    height: 100%;
  }
  .vq-grid-item-data .vq-component-container-summary,
  .vq-grid-item-data .vq-component-container {
    line-height: 1rem;
  }
  .vq-grid-item-action-button {
    padding: 0.5rem 0 0;
  }
  .vq-grid-item .vq-button-component-icon {
    line-height: 1rem;
    height: 1rem;
    vertical-align: middle;
  }
  .vq-grid-selectable-container {
    border: 1px solid var(--border-color);
    position: absolute;
    right: 1rem;
    top: -1.5rem;
    padding: 2rem;
    max-height: 60%;
    height: auto;
    width: 45rem;
    overflow: auto;
    background-color: var(--submenu-background-color);
    box-shadow: 5px 5px 7.2px 0 var(--box-shadow-color), 1px 5px 1.8px 0 var(--box-shadow-color);
    user-select: none;
    z-index: 30;
  }
  .vq-grid-selectable-container-li .vq-grid-item {
    width: auto;
  }
  .vq-grid-item-detail > td {
    overflow: visible;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    width: 100%;
  }
  .vq-grid .vq-grid-columns .vq-input-container-summary .vq-caption,
  .vq-grid .vq-grid-columns .vq-checkbox-container .vq-checkbox-label,
  .vq-grid .vq-grid-columns .vq-component-container .vq-input-container-editable .vq-floating-label,
  .vq-grid .vq-grid-columns .vq-component-container .vq-multiselect-container-editable .vq-multiselect-floating-label {
    display: none;
  }
  .vq-grid .vq-grid-columns .vq-component-container .vq-input-container-editable,
  .vq-grid-columns > .vq-grid-item .vq-component-container .vq-multiselect-container-editable {
    margin-top: 0;
    margin-bottom: 0.2rem;
    min-width: 100%;
  }
  /* acá se debería usar solo: min(100%, var(--min-width-components)) pero no compila */
  .vq-grid-columns > .vq-grid-item .vq-component-container .vq-input-container-editable .vq-dropdown-span,
  .vq-grid-columns > .vq-grid-item .vq-component-container .vq-input-container-editable .vq-input,
  .vq-grid-columns > .vq-grid-item .vq-component-container .vq-dropdown-container-list,
  .vq-grid-columns > .vq-grid-item .vq-component-container .vq-multiselect-options-list-ul {
    min-width: min(100%, var(--min-width-components));
  }
  .vq-grid-item-detail-td > .vq-button-component-container {
    padding-left: 1rem;
    margin-top: 1rem;
  }
  .vq-grid .vq-grid-columns .vq-checkbox-container .vq-checkbox {
    margin-top: -0.5rem;
    padding-top: 0;
    min-width: 100%;
  }
  .vq-grid-item .vq-button-component-container {
    height: 100%;
  }
  .vq-grid .vq-grid-columns .vq-phone-container-summary .vq-phone-caption {
    display: none;
  }
  .vq-grid .vq-grid-columns .vq-grid-item-detail .vq-input-container-summary .vq-caption {
    display: inline-block;
  }
  .vq-grid .vq-grid-columns .vq-card .vq-input-container-summary .vq-caption {
    display: inline-block;
  }
  .vq-grid .vq-grid-columns .vq-grid-item-detail .vq-input-container-summary {
    border: none;
  }
  .vq-grid-editable-row-modal .vq-card .vq-grid-item-data {
    border: none;
    padding-left: 0;
  }
  .vq-grid-item-detail .vq-card {
    box-shadow: none;
    margin-bottom: 0;
    margin-top: 0;
    padding-bottom: 0;
    /*        padding-top: 0;
    padding-left: 0.1rem;*/
  }
  .vq-card-editable-modal .vq-card .vq-card {
    /*width: 100%;*/
  }
  .vq-grid-filter-button {
    display: none;
  }
  .vq-grid-th-caption-mobile {
    display: none;
  }
  .vq-grid-empty-tr {
    display: none;
  }
}
.vq-grid-add-button {
  background-color: transparent;
  border: none;
  color: var(--control-content-font-color);
  font-size: 1.5rem;
  display: inline-block;
  cursor: pointer;
  margin: 0 auto;
  padding-top: 0.5rem;
}

.vq-grid-add-button:disabled {
  color: var(--secondary-text-color);
}

.vq-grid-add-many-button {
  background-color: transparent;
  border: none;
  color: var(--control-content-font-color);
  font-size: 1.5rem;
  cursor: pointer;
  margin: 0 auto;
  padding-top: 0.5rem;
}

.vq-grid-add-many-button:disabled {
  color: var(--secondary-text-color);
}

.vq-grid-buttons-container {
  height: 2rem;
}

.vq-grid-add-many-button::before {
  font-family: "Material Icons";
  content: "library_add";
}

.vq-grid-add-button::before {
  font-family: "Material Icons";
  content: var(--icon-add-box);
}

.vq-grid-mobile-add-button::before {
  font-family: "Material Icons";
  content: var(--icon-add-box);
}

.vq-grid-item-action div {
  display: inline-flex;
  margin-top: 0.4rem;
  justify-content: center;
}

@media screen and (max-width: 991px) {
  .div-headers-right > .vq-grid-mobile-add-button {
    background-color: transparent;
    border: none;
    font-size: 1.5rem;
    height: 3rem;
    cursor: pointer;
    padding-top: 0.4rem;
  }
  .vq-grid-columns .vq-grid-item .vq-component-container .vq-radiobutton-container .vq-checkbox-label {
    display: block;
  }
  .vq-grid-columns .vq-grid-item .vq-component-container .vq-radiobutton-container {
    margin-left: 1.5rem;
  }
  .vq-grid-headers-show-filters,
  .vq-grid-headers-show-filters .vq-grid-header-item .vq-grid-th-container .vq-grid-th-caption,
  .vq-grid-headers-show-filters .vq-grid-header-item .vq-grid-th-container .vq-grid-th-filter-button,
  .vq-grid-headers-show-filters .vq-grid-header-item .vq-filter-non-visible .vq-filter-grid-buttons-container,
  .vq-grid-content-show-filter, .vq-filter-visible,
  .vq-grid thead {
    display: none;
  }
  .vq-grid-columns .vq-input-container-summary,
  .vq-grid-columns .vq-phone-container-summary {
    background-color: transparent;
    margin: 1rem 1rem 1rem 2rem;
    display: inline-block;
    vertical-align: top;
    font-size: 1rem;
  }
  .vq-grid-item-detail-td .vq-input-container-summary {
    background-color: transparent;
    margin: 0.5rem 1rem 2rem 1rem;
    display: block;
    vertical-align: top;
    font-size: 1rem;
  }
  .vq-grid-actions-table-container {
    z-index: 10;
  }
  .vq-grid-actions-table-container table tr {
    margin: 0.1rem;
    position: relative;
    margin-bottom: -0.1rem;
  }
  .vq-grid-actions-table-container .vq-grid-empty-tr {
    border: none;
  }
  .vq-grid-container-filter {
    overflow-x: auto;
    margin: 0;
    position: relative;
  }
  .vq-grid-item-action-status {
    display: inline-block;
    height: 0.9rem;
    width: calc(100% + 2.2rem);
    margin-top: -0.1rem;
    border-top-right-radius: 1rem;
    border-top-left-radius: 1rem;
    margin-left: -0.1rem;
  }
  .vq-tr-status-none .vq-grid-item-action-status {
    background-color: transparent;
  }
  .vq-tr-status-caseclosed .vq-grid-item-action-status {
    background-color: var(--close-color);
  }
  .vq-tr-status-caseopened .vq-grid-item-action-status {
    background-color: var(--open-color);
  }
  .vq-grid-container-filter .vq-grid-table-container {
    overflow-x: auto;
    width: 100%;
    margin: 0;
    position: relative;
  }
  .vq-grid-container-filter .vq-grid-actions-table-container .vq-grid-headers-show-filters {
    display: none;
  }
  .vq-grid-table-container {
    overflow-x: auto;
    width: calc(100% - 3rem);
    margin: 0;
    position: absolute;
  }
  .vq-grid {
    display: block;
  }
  .vq-grid-thead-show-filter {
    display: block;
  }
  .vq-grid-thead-non-show-filter {
    display: none;
  }
  .vq-grid-tbody-non-show-filter, .vq-grid-item {
    display: inline-block;
    width: 100%;
  }
  .vq-grid-columns {
    border: 1px solid var(--border-color);
    border-bottom: none;
    display: inline-block;
    border-radius: var(--border-radius-px);
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    padding-top: 0;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    width: calc(100% - 1rem);
    margin-bottom: -0.1rem;
    padding-bottom: 1rem;
  }
  .vq-grid-item {
    margin-left: 0;
  }
  .vq-grid-item-action {
    text-align: right;
    padding-right: 2rem;
  }
  .vq-grid-item-data:last-child {
    margin-bottom: 0.5rem;
  }
  .vq-grid-editable-row-modal .vq-grid-item-detail {
    border: 0;
  }
  .vq-grid-item-detail {
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    padding-bottom: 0.1rem;
    display: block;
    margin-top: -0.5rem;
    width: calc(100% - 1rem);
    margin-bottom: 0.5rem;
  }
  .vq-grid-item-detail-td {
    display: table;
    margin-top: -1rem;
    margin-left: -0.5rem;
  }
  .vq-grid-item-detail .vq-card {
    background-color: transparent;
    box-shadow: none;
    padding: 0.1rem 1.5rem 0.1rem 1rem;
    margin: 0.1rem 0.5rem;
  }
  .vq-grid-add-button {
    background-color: transparent;
    border: none;
    color: var(--control-content-font-color);
    font-size: 1.5rem;
    display: inline-block;
    cursor: pointer;
    margin-left: 1rem;
  }
  .vq-grid-selectable-container {
    display: none;
    border: 1px solid var(--border-color);
    position: absolute;
    left: 25%;
    bottom: 1rem;
    padding: 2rem;
    max-height: 40%;
    height: auto;
    min-width: 20rem;
    width: 50%;
    overflow: auto;
    background-color: var(--submenu-background-color);
    box-shadow: 5px 5px 7.2px 0 var(--box-shadow-color), 1px 5px 1.8px 0 var(--box-shadow-color);
  }
  .vq-grid-tbody-show-filter {
    display: none;
  }
  .vq-grid-headers-show-filters {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-px);
    padding-top: 1rem;
    background-color: var(--grid-mobile-filter-background-color);
    display: grid;
    width: 100%;
  }
  .vq-grid-filter-button {
    background-color: transparent;
    border: none;
    color: var(--control-content-font-color);
    font-size: 1.5rem;
    display: inline-block;
    cursor: pointer;
    float: right;
    margin-right: 1rem;
  }
  .vq-grid-filter-button::before {
    font-family: "Material Icons";
    content: var(--icon-filter);
  }
  .vq-grid-headers-show-filters .vq-grid-header-item .vq-filter-non-visible {
    position: relative;
    visibility: visible;
    box-shadow: none;
    border: none;
    margin-left: 1rem;
    border-radius: 0;
    width: 90%;
    height: 7rem;
    background-color: var(--grid-mobile-filter-background-color);
  }
  .vq-grid-th-caption-mobile-container {
    margin-left: 2rem;
    padding-top: 1rem;
    float: left;
  }
  .vq-grid-th-caption-mobile {
    display: inline-block;
    font-weight: inherit;
    font-weight: 600;
  }
  .vq-grid-filter-container {
    position: relative;
    display: inline-block;
    width: 100%;
    text-align: right;
    right: 1rem;
  }
  .vq-grid-filter-container .vq-filter-grid-button {
    position: relative;
    right: 0;
  }
  .vq-grid-empty-tr {
    display: block;
    height: 1.3rem;
    border-bottom: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    width: calc(100% - 1rem);
    border-bottom-left-radius: var(--border-radius-px);
    border-bottom-right-radius: var(--border-radius-px);
    margin-bottom: 1rem;
    margin-top: -1rem;
  }
}
.vq-grid-selectable-maximized-panel {
  cursor: move;
}

.vq-grid-paginator-container {
  width: 100%;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.vq-grid-paginator-right {
  float: right;
  margin-right: 1rem;
}

.vq-grid-paginator-left {
  margin-left: 1.5rem;
  float: left;
}

.vq-grid-paginator-arrow-left {
  background-color: transparent;
  border: none;
  color: var(--control-content-font-color);
  font-size: 1.5rem;
  display: inline-block;
  cursor: pointer;
  vertical-align: middle;
  font-weight: 700;
}

.vq-grid-paginator-arrow-left::before {
  font-family: "Material Icons";
  content: var(--icon-arrow-left);
}

.vq-grid-paginator-arrow-right {
  background-color: transparent;
  border: none;
  color: var(--control-content-font-color);
  font-size: 1.5rem;
  display: inline-block;
  cursor: pointer;
  vertical-align: middle;
  font-weight: 700;
}

.vq-grid-paginator-arrow-right::before {
  font-family: "Material Icons";
  content: var(--icon-arrow-right);
}

.vq-grid-paginator-arrow-last-page {
  background-color: transparent;
  border: none;
  color: var(--control-content-font-color);
  font-size: 1.5rem;
  display: inline-block;
  cursor: pointer;
  vertical-align: middle;
  font-weight: 700;
}

.vq-grid-paginator-arrow-last-page::before {
  font-family: "Material Icons";
  content: var(--icon-arrow-last-page);
}

.vq-grid-paginator-arrow-first-page {
  background-color: transparent;
  border: none;
  color: var(--control-content-font-color);
  font-size: 1.5rem;
  display: inline-block;
  cursor: pointer;
  vertical-align: middle;
  font-weight: 700;
}

.vq-grid-paginator-arrow-first-page::before {
  font-family: "Material Icons";
  content: var(--icon-arrow-first-page);
}

.vq-grid-paginator-arrow-disabled {
  color: var(--paginator-arrow-disabled);
}

.vq-grid-selectable-container-li {
  padding: 0;
  font-weight: 700;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.vq-grid-selectable-title {
  font-size: 1.1rem;
  font-weight: 700;
  padding: 1rem;
  line-height: 3rem;
}

.vq-grid-selectable-remove-button {
  background-color: transparent;
  border: none;
  font-size: 1.5rem;
  color: var(--control-content-font-color);
  cursor: pointer;
  padding: 0;
  vertical-align: middle;
}

.vq-grid-selectable-remove-button::before {
  font-family: "Material Icons";
  content: var(--icon-clear);
}

.vq-grid-selectable-expand-less-button,
.vq-grid-selectable-expand-more-button,
.vq-grid-selectable-move-button {
  background-color: transparent;
  border: none;
  font-size: 1.5rem;
  color: var(--control-content-font-color);
  cursor: pointer;
  padding: 0;
  float: right;
  margin-top: 1rem;
}

.vq-grid-selectable-expand-more-button::before {
  font-family: "Material Icons";
  content: var(--expand-more);
}

.vq-grid-selectable-expand-less-button::before {
  font-family: "Material Icons";
  content: var(--expand-less);
}

.vq-grid-selectable-move-button::before {
  font-family: "Material Icons";
  content: var(--move);
}

.vq-grid-selectable-minimized-panel {
  padding: 0.5rem 2rem;
}

.vq-grid-center-item {
  padding: 0;
  margin: 0;
}

/*@import '../Components/VQGridVirtualizate.razor.scss';*/
.vq-table-view-aditional-information {
  border: none;
  background-color: transparent;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
}

.vq-table-view-aditional-information::before {
  font-family: "Material Icons";
  content: var(--icon-arrow-right);
  color: var(--control-content-font-color);
}

.vq-table-edit-button {
  border: none;
  background-color: transparent;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
}

.vq-table-edit-button::before {
  font-family: "Material Icons";
  content: var(--icon-edit);
  color: var(--control-content-font-color);
}

.vq-table-nested-button,
.vq-table-nested-close-button {
  border: none;
  background-color: transparent;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
}

.vq-table-nested-button::before {
  font-family: "Material Icons";
  content: var(--icon-nested);
  color: var(--control-content-font-color);
}

.vq-table-nested-close-button::before {
  font-family: "Material Icons";
  content: var(--icon-nested);
  color: var(--icon-grid-option-selected-color);
}

.vq-table-remove-button {
  background-color: transparent;
  border: none;
  font-size: 1.5rem;
  color: var(--control-content-font-color);
  cursor: pointer;
  padding: 0;
}

.vq-table-remove-button::before {
  font-family: "Material Icons";
  content: var(--icon-delete);
}

.vq-grid-item.vq-grid-item-action button {
  vertical-align: text-top;
}

.vq-table-button-print-printer {
  border: none;
  cursor: pointer;
  padding: 0;
}

.vq-table-button-print-printer::before {
  font-family: "Material Icons";
  font-size: 1.5rem;
  content: var(--icon-printer);
  color: var(--form-title-font-color);
}

.vq-table-button-print-barcode {
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  background-image: url(/icons/printbarcodeicon.svg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 1.5rem;
  width: 2rem;
}

.vq-table-print-group-barcode-button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  background-image: url(/icons/printgroupbarcode.svg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 1.5rem;
  width: 1.5rem;
}

.vq-table-go-button {
  background-color: transparent;
  border: none;
  font-size: 1.5rem;
  color: var(--control-content-font-color);
  cursor: pointer;
  padding: 0;
}

.vq-table-go-button::before {
  font-family: "Material Icons";
  content: var(--icon-search);
}

.vq-table-done-button {
  background-color: transparent;
  border: none;
  font-size: 1.5rem;
  color: var(--control-content-font-color);
  cursor: pointer;
  padding: 0;
}

.vq-table-done-button::before {
  font-family: "Material Icons";
  content: var(--icon-check_circle);
}

.vq-table-skip-button {
  background-color: transparent;
  border: none;
  font-size: 1.5rem;
  color: var(--control-content-font-color);
  cursor: pointer;
  padding: 0;
}

.vq-table-skip-button::before {
  font-family: "Material Icons";
  content: var(--icon-skip-next);
}

.vq-table-close-edit-button {
  border: none;
  background-color: transparent;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  float: right;
}

.vq-table-close-edit-button::before {
  font-family: "Material Icons";
  content: var(--icon-modal-close);
  color: var(--icon-grid-option-selected-color);
}

.vq-grid-add-copy-button {
  border: none;
  background-color: transparent;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  float: right;
}

.vq-grid-add-copy-button::before {
  font-family: "Material Icons";
  content: "content_copy";
  color: var(--icon-grid-option-selected-color);
}

.vq-table-view-close-aditional-information {
  border: none;
  background-color: transparent;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
}

.vq-table-view-close-aditional-information::before {
  font-family: "Material Icons";
  content: var(--icon-arrow-down);
  color: var(--icon-grid-option-selected-color);
}

.vq-grid-editable-row-modal {
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--div-modal-background-color);
  z-index: 1000;
  position: fixed;
  overflow: scroll;
}

.vq-grid-editable-row-modal .vq-card {
  width: 70%;
  min-width: 30rem;
  /*  TODO CELE  max-width: 90%;
  min-width: 30rem;
  width: fit-content;*/
  height: auto;
  margin: 0 auto;
  margin-top: 1rem;
  display: block;
  padding: 1rem 1.5rem;
}

.vq-grid-editable-row-modal > .vq-card > .vq-grid-item {
  display: inline;
}

/*.vq-grid-editable-row-modal > .vq-card > .vq-grid-item-detail {
    margin-top: 2rem;
}*/
.vq-grid-select-checkbox {
  vertical-align: 0.15rem;
  margin-top: 0.2rem;
  margin-right: 0.3rem;
  margin-bottom: auto;
}

.vq-grid-columns-nested {
  background-color: var(--row-grid-nested-background-color);
}

.vq-grid-radio-button-checked,
.vq-grid-radio-button-unchecked {
  border: none;
  background-color: transparent;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
}

.vq-grid-radio-button-checked::before {
  font-family: "Material Icons";
  content: var(--icon-radio-button-checked);
  color: var(--control-content-font-color);
}

.vq-grid-radio-button-unchecked::before {
  font-family: "Material Icons";
  content: var(--icon-radio-button-unchecked);
  color: var(--icon-grid-option-selected-color);
}

.vq-row-save-button {
  display: inline-block;
  width: 100%;
}

.vq-table-attach-button {
  border: none;
  background-color: transparent;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
}

.vq-table-attach-button::before {
  font-family: "Material Icons";
  content: var(--icon-attach-file);
  color: var(--control-content-font-color);
}

.vq-confirmation-title {
  font-weight: 700;
}

.vq-confirmation-captcha .vq-confirmation-required-text {
  display: block;
  margin-bottom: 2rem;
  text-align: center;
}

.vq-confirmation-subtitle {
  display: block;
  margin-bottom: 1rem;
  text-align: left;
}

.vq-confirmation-required-text-error {
  display: block;
  color: var(--red-color);
  margin-left: 0.5rem;
  font-weight: 700;
  text-align: center;
}

.vq-confirmation-captcha .vq-component-container .vq-input:focus ~ .vq-floating-label,
.vq-confirmation-captcha .vq-component-container .vq-input-not-empty ~ .vq-floating-label {
  display: none;
}

.vq-confirmation-captcha .vq-component-container {
  margin-top: -1rem;
}

.vq-grid-selectable-container-li > .vq-grid-item {
  padding: 0;
  margin: 0;
  vertical-align: bottom;
  display: inline;
  border: none;
}

.vq-grid-selectable-container-li .vq-grid-item {
  background-color: transparent;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  min-height: 0;
  height: 2.5rem;
}

.vq-grid-selectable-container-li > .vq-grid-item-color-red {
  color: var(--red-color);
  font-weight: 700;
}

.vq-grid-selectable-container-li .vq-grid-item-hide-selectable-panel {
  display: none;
}

.vq-grid-th-container {
  width: calc(100% - 1.5rem);
  display: inline-block;
}

.vq-grid-th-caption {
  background-color: transparent;
  border: none;
  font-weight: inherit;
  margin-right: 1rem;
  margin-top: 0;
  vertical-align: top;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--primary-text-color);
  font-size: 1rem;
  /*  white-space: nowrap;*/
}

button.vq-grid-th-caption:disabled {
  cursor: default;
}

.vq-grid-header-container {
  display: inline-block;
}

.vq-grid-th-sort-asc {
  background-color: transparent;
  border: none;
  color: var(--control-content-font-color);
}

.vq-grid-th-sort-asc::before {
  font-family: "Material Icons";
  content: var(--icon-arrow-upward);
  color: red;
}

.vq-grid-th-sort-desc {
  background-color: transparent;
  border: none;
  color: var(--control-content-font-color);
}

.vq-grid-th-sort-desc::before {
  font-family: "Material Icons";
  content: var(--icon-arrow-downward);
  color: red;
}

.vq-grid-th-sort-,
.vq-grid-th-sort-none {
  display: none;
}

.vq-grid-th-filter-button {
  background-color: transparent;
  border: none;
  color: var(--control-content-font-color);
  font-size: 1rem;
  cursor: pointer;
  margin-left: -1rem;
  float: right;
}

.vq-grid-th-filter-button::before {
  font-family: "Material Icons";
  content: var(--icon-filter);
}

.vq-filter-grid-container {
  position: absolute;
  margin-top: 1.5rem;
  margin-left: -0.5rem;
  width: 14rem;
  height: 14.5rem;
  z-index: 40;
  -webkit-box-shadow: 0.1rem 0.1rem 0.1rem 0 var(--box-shadow-color);
  box-shadow: 0.1rem 0.1rem 0.1rem 0 var(--box-shadow-color);
  border-radius: var(--border-radius-px);
  border: 0.1rem solid var(--border-color);
  background-color: var(--item-dropdown-list-background-color);
  color: rgba(0, 0, 0, 0.87);
}

.vq-filter-grid-sub-container {
  display: block;
  top: 6rem;
  left: 3rem;
  position: absolute;
  width: inherit;
  height: 11rem;
  background-color: var(--item-dropdown-list-background-color);
  border-radius: var(--border-radius-px);
  padding: 0;
  list-style-type: none;
  color: rgba(0, 0, 0, 0.87);
  -webkit-box-shadow: 0.1rem 0.1rem 0.1rem 0 var(--box-shadow-color);
  box-shadow: 0.1rem 0.1rem 0.1rem 0 var(--box-shadow-color);
  border: 0.1rem solid var(--border-color);
  z-index: 20;
}

.vq-filter-grid-options-container {
  display: block;
}

.vq-filter-grid-input {
  margin: 0 1rem;
  display: block;
  width: calc(100% - 2rem);
  height: 2rem;
  border-radius: var(--border-radius-px);
  border: 1px solid var(--border-color);
  padding-left: 0.5rem;
}

.vq-filter-grid-button {
  margin: 1rem 0;
  font-weight: 700;
  padding: 0.5rem 1rem;
  background-color: var(--app-background-color);
  border: 1px solid var(--border-color);
}

.vq-filter-grid-button-apply {
  background-color: var(--header-background-color);
  color: var(--control-content-font-color);
  position: absolute;
  right: 6rem;
  border-radius: var(--border-radius-px);
  margin-right: 1rem;
}

.vq-filter-grid-button-clear {
  background-color: var(--app-background-color);
  color: var(--control-content-font-color);
  position: absolute;
  right: 1rem;
  border-radius: var(--border-radius-px);
}

.vq-filter-grid-buttons-container {
  margin-bottom: 1rem;
  border-top: 1px solid var(--border-color);
  position: absolute;
  width: 100%;
}

.vq-filter-visible {
  visibility: visible;
}

.vq-filter-non-visible {
  visibility: hidden;
  left: 0;
}

.vq-order-switch-container {
  width: 7rem;
  height: 2.3rem;
  background-color: var(--control-background-color);
  border: solid 1px var(--grid-filter-switch-border-color);
  border-radius: var(--border-radius-px);
  padding-top: 0.55rem;
  margin-top: -2rem;
}

.vq-order-switch-container::after {
  position: relative;
  display: block;
  content: "";
  width: 2.3rem;
  height: 2.1rem;
  top: -0.65rem;
  left: 0;
  background-color: var(--grid-filter-switch-none-background-color);
  border: solid 0.1rem var(--grid-filter-switch-border-color);
  border-radius: var(--border-radius-px);
  transition: left 200ms ease-in-out;
}

.vq-order-switch-desc:checked ~ .vq-order-switch-container {
  background-color: var(--control-background-color);
  transition: background-color 200ms ease-in-out;
}

.vq-order-switch-desc:checked ~ .vq-order-switch-container::after {
  left: -0.1rem;
  transition: left 200ms ease-in-out;
  background-color: var(--grid-filter-switch-option-background-color);
  border-top-left-radius: var(--border-radius-px);
  border-bottom-left-radius: var(--border-radius-px);
}

.vq-order-switch-none:checked ~ .vq-order-switch-container {
  background-color: var(--control-background-color);
  transition: background-color 200ms ease-in-out;
}

.vq-order-switch-none:checked ~ .vq-order-switch-container::after {
  left: 2.4rem;
  transition: left 200ms ease-in-out;
}

.vq-order-switch-asc:checked ~ .vq-order-switch-container {
  background-color: var(--control-background-color);
  transition: background-color 200ms ease-in-out;
}

.vq-order-switch-asc:checked ~ .vq-order-switch-container::after {
  left: 4.45rem;
  transition: left 200ms ease-in-out;
  background-color: var(--grid-filter-switch-option-background-color);
  border-top-right-radius: var(--border-radius-px);
  border-bottom-right-radius: var(--border-radius-px);
}

.vq-order-switch-desc-text {
  font-size: 0.8rem;
  font-weight: 700;
  float: left;
  padding-top: 0.25rem;
  margin-left: 0.3rem;
}

.vq-order-switch-asc-text {
  font-size: 0.8rem;
  font-weight: 700;
  float: right;
  margin-right: 0.4rem;
  padding-top: 0.25rem;
}

.vq-visually-switch-hidden {
  position: relative;
  opacity: 0;
  width: 2.2rem;
  height: 2rem;
  z-index: 4;
}

.vq-grid-th-filter-button-selected {
  color: var(--grid-filter-button-selected-color);
}

.vq-grid-th-sort-asc span,
.vq-grid-th-sort-desc span {
  font-size: 0.9rem;
  vertical-align: text-top;
}

.vq-grid-th-sort-none span {
  display: none;
}

.vq-grid-filter-title {
  padding: 1rem 0.2rem 1rem 0.5rem;
  font-weight: 700;
  background: var(--grid-header-background-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media screen and (max-width: 991px) {
  .vq-grid-th-switch-mobile {
    display: inline-block;
    margin-left: 1rem;
  }
  .vq-grid-filter-title,
  .vq-grid-th-filter-button,
  .vq-grid-th-sort-desc,
  .vq-grid-th-sort-asc,
  .vq-grid-th-sort- {
    display: none;
  }
}
@media screen and (min-width: 991.1px) {
  .vq-grid-th-switch-mobile {
    display: none;
  }
}
.vq-name-container .vq-name-summary {
  height: 3.3rem;
  display: block;
  margin: 1rem 1rem 1rem 0;
}
.vq-name-container .vq-name-summary .vq-caption {
  font-weight: bold;
  position: relative;
  color: var(--control-summary-caption-font-color);
}
.vq-name-container .vq-name-summary .vq-value {
  position: relative;
}

.vq-notifications-empty {
  cursor: pointer;
  border: none;
  background: transparent;
}

.vq-notifications-show {
  color: white;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  border-radius: 100%;
  background-color: #ef6978;
  z-index: 50;
  margin-left: -0.9rem;
  top: 0.5rem;
  position: absolute;
  min-width: 1.4rem;
  height: 1.4rem;
  padding-top: 0.2rem;
  padding-left: 0.1rem;
  padding-right: 0.1rem;
}

.vq-notifications-news::before {
  font-family: "Material Icons";
  font-weight: 400;
  font-size: 1rem;
  margin-left: -0.75rem;
  margin-right: 0.5rem;
  color: var(--notification-warning-new-icon-color);
  content: "stop_circle";
  position: relative;
  float: right;
}

.vq-notification-empty-list {
  font-size: 0.95rem;
  color: var(--control-empty-caption-font-color);
  font-weight: 700;
}

.vq-notifications-empty:before {
  font-family: "Material Icons";
  font-size: 2rem;
  content: "notifications_none";
  color: var(--m-header-font-color);
}

.vq-main-layout-header-notifications-container {
  display: inline-block;
  padding-top: 1.1rem;
  flex: initial;
}

@media screen and (max-width: 991px) {
  .vq-main-layout-header-notifications-container {
    margin-right: 0;
  }
}
.vq-notifications-list {
  width: 25rem;
  margin: 0.5rem 0 0 1rem;
  max-height: calc(100vh - 10rem);
  overflow: auto;
}

.vq-notifications-new {
  font-weight: 700;
}

.vq-notifications-list-ul {
  list-style-type: none;
  margin-right: 0.5rem;
}

.vq-notifications-list-li {
  padding: 1rem 0;
  border-bottom: 1px solid var(--notification-list-border-bottom-color);
  display: inline-block;
  width: 100%;
}

.vq-notifications-list-li:last-child {
  border: none;
}

.vq-notification-detail-text {
  display: inline-block;
  width: calc(100% - 4rem);
  font-size: 1rem;
  line-height: 1.5rem;
  vertical-align: top;
  background-color: transparent;
  border: none;
  text-align: left;
}

.vq-notification-detail-cursor {
  cursor: pointer;
}

.vq-notification-detail-description {
  display: inline-block;
  width: 100%;
  line-height: 1.5rem;
  vertical-align: top;
  font-size: 0.9rem;
  color: var(--control-empty-caption-font-color);
}

.vq-notifications-list-container {
  position: absolute;
  right: 3rem;
  top: 3.7rem;
  background-color: var(--notification-list-background-color);
  -webkit-box-shadow: 0.1rem 0.1rem 0.1rem 0 var(--dark-box-shadow-color);
  box-shadow: 0.1rem 0.1rem 0.1rem 0 var(--dark-box-shadow-color);
  border: 0.1rem solid var(--border-color);
  border-radius: var(--border-radius-px);
}

.vq-notification-alert-task:before {
  font-family: "Material Icons";
  content: var(--icon-task);
  color: var(--notification-alert-task-color);
  font-size: 2rem;
  margin-right: 0.5rem;
}

.vq-notification-alert-information:before {
  font-family: "Material Icons";
  content: var(--icon-info);
  color: var(--notification-alert-information-color);
  font-size: 2rem;
  margin-right: 0.5rem;
}

.vq-notification-alert-warning:before {
  font-family: "Material Icons";
  content: var(--icon-warning);
  color: var(--notification-alert-warning-color);
  font-size: 2rem;
  margin-right: 0.5rem;
}

.vq-notification-alert-error:before {
  font-family: "Material Icons";
  content: var(--icon-error);
  color: var(--notification-alert-error-color);
  font-size: 2rem;
  margin-right: 0.5rem;
}

.vq-notifications-actions {
  float: right;
}

.vq-notifications-action {
  background-color: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

.vq-notifications-go:before {
  font-family: "Material Icons";
  content: var(--icon-play-circle);
  color: var(--notification-button-go-color);
}

.vq-notifications-done:before {
  font-family: "Material Icons";
  content: var(--icon-done);
  width: 18px;
  display: block;
  font-weight: 800;
}

.vq-notifications-discard::before {
  font-family: "Material Icons";
  content: var(--icon-delete-forever);
  color: var(--notification-button-delete-color);
  margin-right: 0.5rem;
}

.vq-notifications-remove:before {
  font-family: "Material Icons";
  content: var(--icon-delete);
  color: var(--notification-button-delete-color);
  margin-right: 0.5rem;
}

.vq-banner-status {
  min-width: 1.5rem;
  display: inline-block;
  height: 100%;
}

.vq-banner-show-open-none {
  background-color: transparent;
}

.vq-banner-show-open-true {
  background-color: var(--open-color);
}

.vq-banner-show-open-false {
  background-color: var(--close-color);
}

.vq-card-banner-content {
  position: sticky;
  top: 4rem;
  margin-top: -2rem;
  margin-bottom: 1.5rem;
  z-index: 100;
  width: calc(100% + 0.5rem);
  max-width: calc(100% + 0.5rem);
  box-shadow: 0 1px 0 var(--box-shadow-color);
  background-color: var(--banner-background-color);
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
}

.vq-banner-content .vq-legend {
  font-weight: 500;
  font-size: 1.1rem;
  margin-left: 3rem;
  margin-top: 0.5rem;
  color: var(--red-color);
}

@media screen and (max-width: 991px) {
  .vq-banner-content .vq-legend {
    text-align: center;
  }
}
.vq-banner-next-case-button::before {
  font-family: "Material Icons";
  font-size: 2rem;
  content: var(--icon-arrow-right);
  color: var(--item-font-color);
}

.vq-banner-previous-case-button {
  right: 0;
  position: absolute;
}

.vq-banner-previous-case-button::before {
  font-family: "Material Icons";
  font-size: 2rem;
  content: var(--icon-arrow-left);
  color: var(--item-font-color);
}

.vq-banner-content {
  width: calc(100% - 3.5rem);
  padding: 1.5rem 1rem 1rem 1rem;
  vertical-align: top;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
}

.vq-banner {
  display: inline-block;
  width: calc(100% - 8rem);
  max-width: inherit;
}

.vq-card-collapsed-banner {
  padding-right: 1rem;
  margin-top: -0.7rem;
  z-index: 10;
}

.vq-card-collapsed-banner::before {
  font-family: "VQIcons";
  font-size: 3rem;
  content: var(--icon-banner-info);
  color: black;
}

.vq-banner-button {
  top: -1rem;
  position: relative;
}

.vq-button.vq-banner-next-case-button {
  right: -2rem;
  position: absolute;
}

.vq-confirmation-required-modal {
  background-color: var(--div-modal-background-color);
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1001;
  width: 100%;
  height: 100%;
  border: none;
  cursor: default;
  align-items: center;
}

.vq-confirmation-required-container {
  margin: 0 auto;
  padding: 4rem;
  background: var(--m-app-background-color);
  width: auto;
  max-width: 45rem;
  border-radius: var(--border-radius-px);
  border: 1px solid var(--control-border-color);
  box-shadow: 3px 2px var(--dark-box-shadow-color);
  max-height: 90vh;
  overflow-y: scroll;
}

.vq-confirmation-required-container-versionspopup {
  overflow-x: hidden;
}

.vq-confirmation-required-text {
  font-size: 1.2rem;
  padding-right: 1rem;
}

.vq-confirmation-required-buttons-container {
  padding-top: 2rem;
  text-align: center;
}

.vq-confirmation-required-button {
  margin-right: 1rem;
  margin-top: 1rem;
  padding: 1rem 1.5rem;
  background-color: var(--button-light-background-color);
  color: var(--button-light-font-color);
  border-radius: var(--border-radius-px);
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
}

.vq-confirmation-required-button-cancel, .vq-confirmation-required-button-ok, .vq-confirmation-required-button-yes, .vq-confirmation-required-button-no, .vq-confirmation-required-button-continue {
  margin-right: 1rem;
  margin-top: 1rem;
  padding: 1rem 1.5rem;
  width: 8rem;
  border-radius: var(--border-radius-px);
  border: 1px solid var(--m-header-background-color);
  cursor: pointer;
  font-size: 1.1rem;
  text-align: center;
}

.vq-confirmation-required-button-cancel, .vq-confirmation-required-button-no {
  background-color: transparent;
  color: var(--m-header-background-color);
}

.vq-confirmation-required-button-ok, .vq-confirmation-required-button-yes, .vq-confirmation-required-button-continue {
  background-color: var(--m-header-background-color);
  color: var(--m-header-font-color);
}
.vq-confirmation-required-button-ok:disabled, .vq-confirmation-required-button-yes:disabled, .vq-confirmation-required-button-continue:disabled {
  background-color: var(--button-light-background-color);
  color: var(--button-light-font-color);
  border: 1px solid var(--button-light-background-color);
  cursor: not-allowed;
}

.vq-confirmation-captcha .vq-component-container {
  width: 100%;
}

.vq-confirmation-captcha .vq-component-container .vq-input-container-editable {
  width: 100% !important;
  margin-left: 10%;
}

.vq-confirmation-captcha .vq-component-container .vq-input {
  width: 80% !important;
}

.vq-multiselect-same-as-icon {
  display: inline-block;
  position: absolute;
  height: 3rem;
  z-index: 8;
  cursor: pointer;
  top: 0.8rem;
  font-size: 1.5rem;
  font-weight: 700;
  right: 1rem;
}

.vq-input-hidden {
  z-index: -1;
}

.vq-setting-more {
  background: transparent;
  margin-top: 1rem;
  float: right;
  margin-right: 0.5rem;
}

@media screen and (max-width: 420px) {
  .vq-setting-more {
    margin-right: 0;
    margin-left: -0.5rem;
  }
  .vq-barcode-button {
    width: 2rem;
    height: 2.4rem;
  }
  .vq-upload-files-button {
    margin-left: -0.2rem;
  }
}
.vq-setting-more::before {
  font-family: "Material Icons";
  font-size: 2rem;
  content: "more_vert";
  color: var(--m-header-font-color);
}

.vq-setting-more-summary-mode {
  padding-top: 0.5rem;
  position: relative;
  display: inline-block;
}

.vq-setting-close {
  background: transparent;
  margin-top: 0.5rem;
  float: right;
  margin-right: 0.5rem;
}

.vq-setting-close::before {
  font-family: "Material Icons";
  font-size: 1.3rem;
  font-weight: 700;
  content: var(--icon-modal-close);
  color: var(--header-font-color);
}

.vq-settings-container {
  display: block;
  position: absolute;
  top: 3rem;
  right: 1rem;
  margin-top: 0.5rem;
  width: 25rem;
  background-color: var(--notification-list-background-color);
  -webkit-box-shadow: 0.1rem 0.1rem 0.1rem 0 var(--dark-box-shadow-color);
  box-shadow: 0.1rem 0.1rem 0.1rem 0 var(--dark-box-shadow-color);
  border: 0.1rem solid var(--border-color);
}

.vq-setting-more-container {
  position: relative;
  min-height: 2rem;
  width: 22rem;
  padding: 0.5rem;
  height: 8rem;
  margin: 0.5rem;
  font-weight: 700;
  background-color: var(--header-background-color);
  -webkit-box-shadow: 0.1rem 0.1rem 0.1rem 0 var(--dark-box-shadow-color);
  box-shadow: 0.1rem 0.1rem 0.1rem 0 var(--dark-box-shadow-color);
  border: 0.1rem solid var(--border-color);
}

/* start switch none */
.vq-setting-switch-container {
  vertical-align: top;
  padding: 0.8rem;
}

.vq-setting-switch {
  position: relative;
  display: block;
}

.vq-setting-switch input {
  position: relative;
}

.vq-setting-switch input + label {
  padding: 0.2rem;
  cursor: pointer;
  font-size: 1rem;
  width: 4rem;
  text-align: center;
  color: var(--header-font-color);
}

.vq-setting-radio {
  position: relative;
  display: inline-block;
  padding: 0.2rem;
}

/* end switch none*/
/*@import "../wwwroot/globals";
@import "../wwwroot/inputs-commons";*/
.vq-value-textarea-summary {
  white-space: pre-line;
  word-break: break-word;
}

.vq-value-textarea-input-not-empty {
  font-family: Roboto, "Helvetica Neue", Helvetica, Ubuntu, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 12px;
  word-break: break-word;
}

/*@import "../wwwroot/globals";
@import "../wwwroot/inputs-commons";*/
.vq-searcher-content-editable {
  width: 98%;
  min-width: 10rem;
}

.vq-searcher-content-editable .vq-input {
  padding-right: 3rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vq-searcher-container {
  display: inline-block;
  /* min-width: 24rem;*/
  margin-top: -0.5rem;
  flex: auto;
}

.vq-searcher-content-editable .vq-input::placeholder {
  color: var(--m-header-font-color);
}

.vq-searcher-content-editable .vq-input {
  background-color: transparent;
  color: var(--m-header-font-color);
  border: solid var(--m-header-font-color) 0.1rem;
  min-width: 0;
}

@media screen and (max-width: 991.1px) {
  .vq-searcher-container {
    display: none;
  }
}
.vq-select-search-icon {
  display: inline-block;
  position: absolute;
  z-index: 8;
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: 500;
  right: 0.7rem;
  color: var(--m-header-font-color);
  border-left: 1px solid var(--m-header-font-color);
  padding-left: 0.5rem;
  padding-top: 0.3rem;
  margin-top: 0.5rem;
  height: 2rem;
}

.vq-select-search-icon:before {
  content: var(--icon-search);
  font-family: "Material Icons";
}

.vq-select-clear-icon {
  display: inline-block;
  position: absolute;
  z-index: 8;
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: 500;
  right: 0.7rem;
  color: var(--m-header-font-color);
  border-left: 1px solid var(--m-header-font-color);
  padding-left: 0.5rem;
  padding-top: 0.3rem;
  margin-top: 0.5rem;
  height: 2rem;
}

.vq-select-clear-icon:before {
  content: var(--icon-clear);
  font-family: "Material Icons";
}

.vq-searcher-options-list {
  max-height: calc(100vh - 4rem - 5rem);
}

.vq-searcher-options-title {
  color: #666;
  font-weight: 300;
  cursor: default;
  position: relative;
  padding: 1.5rem 1rem 0 1rem;
  overflow: hidden;
}

.vq-searcher-options-title:first-child {
  padding-top: 0.5rem;
}

.vq-searcher-options-list-separator-top {
  border-top: 1px solid #ebe7e7;
  margin-left: 1rem;
  width: calc(100% - 2rem);
  margin-top: 1rem;
}

.vq-searcher-options-list-li-item-not-found {
  cursor: default;
  position: relative;
  padding: 0.5rem 1rem 1rem 2rem;
  overflow: hidden;
  height: 3rem;
  color: #568598;
  font-weight: 600;
  width: 100%;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.vq-searcher-options-list-li {
  cursor: pointer;
  pointer-events: auto;
  display: list-item;
  position: relative;
  padding: 0 1rem 0 2rem;
  overflow: hidden;
  color: #867878;
  width: 100%;
}

.vq-searcher-options-list-li.active {
  background-color: var(--item-current-background-color);
}

.vq-searcher-options-list-li:hover {
  background-color: var(--item-hover-background-color);
}

.vq-searcher-options-list-li p {
  color: #3b13dc;
  font-weight: 500;
  display: inline-block;
  position: relative;
  white-space: pre-wrap;
}

.vq-searcher-options-list-text-non-selected {
  display: inline-block;
  position: relative;
  white-space: pre-wrap;
}

.vq-checkbox-value-three-state {
  visibility: hidden;
}

.vq-checkbox-three-states {
  margin-top: inherit;
}

.vq-readonly-checkbox {
  text-align: center;
}

.vq-checkbox-value-label-true {
  cursor: pointer;
  position: absolute;
  /*    margin-top: 0.5rem;*/
}

.vq-checkbox-three-states + .vq-inner-component-footer-container {
  margin-top: 4rem;
}

.vq-checkbox-value-label-null {
  cursor: pointer;
  position: absolute;
}

.vq-checkbox-value-label-false {
  cursor: pointer;
  position: absolute;
  /*    margin-top: 0.5rem;*/
}

.vq-grid-item-detail .vq-checkbox-value-label-false,
.vq-grid-item-detail .vq-checkbox-value-label-true,
.vq-grid-item-detail .vq-checkbox-value-label-null {
  margin-top: 0.1rem;
}

.vq-checkbox-value-label-false::after {
  content: "check_box_outline_blank";
  color: var(--control-border-color);
  font-family: "Material Icons";
  font-size: 1.5rem;
}

.vq-checkbox-value-label-null::after {
  content: "indeterminate_check_box";
  color: var(--control-border-color);
  font-family: "Material Icons";
  font-size: 1.5rem;
}

.vq-checkbox-value-label-true::after {
  content: "check_box";
  color: var(--focus-border-color);
  font-family: "Material Icons";
  font-size: 1.5rem;
}

.vq-grid-columns > .vq-grid-item > .vq-checkbox-container > .vq-checkbox {
  margin-top: -2rem;
}

.vq-grid-columns > .vq-grid-item > .vq-checkbox-container > .vq-checkbox-label {
  display: none;
}

@media screen and (max-width: 991px) {
  .vq-room {
    display: none;
  }
}
.vq-room {
  position: absolute;
  bottom: 1rem;
  height: 4rem;
  background-color: var(--m-header-background-color);
  width: 100%;
}

.vq-room-logged-users {
  margin-left: 2rem;
  background-color: transparent;
  margin-top: 0.7rem;
  vertical-align: top;
}

.vq-room-logged-users::before {
  font-family: "Material Icons";
  font-size: 3rem;
  content: "account_circle";
  color: var(--m-header-font-color);
}

.vq-room-logged-users-li {
  padding: 1rem 0;
  display: inline-block;
  width: 100%;
  position: absolute;
  font-weight: bold;
}

.vq-room-pin-panel .vq-room-logged-users {
  margin-left: 0.4rem;
}

.vq-room-logged-users-container {
  position: fixed;
  bottom: 1.5rem;
  left: 2rem;
  background-color: var(--room-list-background-color);
  -webkit-box-shadow: 0.1rem 0.1rem 0.1rem 0 var(--dark-box-shadow-color);
  box-shadow: 0.1rem 0.1rem 0.1rem 0 var(--dark-box-shadow-color);
  border: 0.1rem solid var(--border-color);
  border-radius: var(--border-radius-px);
  margin: 0.5rem 0 0 1rem;
  min-height: 3rem;
  max-height: calc(100vh - 10rem);
}

.vq-room-notifications-show {
  font-size: 0.7rem;
  font-weight: 400;
  text-align: center;
  border-radius: 100%;
  z-index: 10000;
  padding: 0.1rem 0.4rem;
  margin-left: -1rem;
  margin-top: -0.7rem;
  position: absolute;
  box-shadow: 1px 1px var(--room-offline-box-shadow-color);
}

.vq-room-online {
  margin-top: 2.5rem;
  background-color: var(--room-online-background-color);
}

.vq-room-offline {
  margin-top: 2.5rem;
  background-color: var(--room-offline-background-color);
}

.vq-room-person-icon {
  display: inline-block;
  padding-top: 0.5rem;
  padding-right: 0.5rem;
}

.vq-room-person-icon::before {
  font-family: "Material Icons";
  font-size: 2rem;
  content: var(--icon-person);
  color: var(--header-font-color);
}

.vq-room-input-hidden-text {
  padding-right: 1rem;
  display: inline-block;
  visibility: hidden;
  white-space: pre;
  position: absolute;
}

.vq-room-logged-users-li-single {
  padding-left: 1rem;
}

.vq-room-pin-panel {
  position: relative !important;
  bottom: -0.5rem;
}

.vq-contact-modal-container > .vq-card {
  width: 50%;
  max-width: 100%;
  min-width: 30rem;
  margin: 0 auto;
  margin-top: 11rem;
  padding-bottom: 2.5rem;
}

.vq-contact-modal-container {
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--div-modal-background-color);
  z-index: 1000;
  position: fixed;
}

.vq-contact-edit-icon {
  display: inline-block;
  position: absolute;
  height: 3rem;
  z-index: 8;
  cursor: pointer;
  top: 0.8rem;
  font-size: 1.4rem;
  right: 2rem;
}

.vq-contact-edit-icon:before {
  content: var(--icon-edit);
  font-family: "Material Icons";
  color: var(--control-content-font-color);
}

.vq-file-upload-button {
  background-color: var(--m-header-background-color);
  border: none;
  border-radius: var(--border-radius-px);
  font-size: 1rem;
  height: 3rem;
  padding: 0 2rem;
  cursor: pointer;
  color: var(--button-dark-font-color);
  font-weight: 600;
  margin-left: 0.5rem;
  width: 6rem;
  padding: 0 5px;
}

.vq-file-upload-choose-file {
  padding-right: 0.2rem;
  padding-bottom: 0.7rem;
  color: var(--control-empty-caption-font-color);
  font-weight: 700;
  height: 3rem;
  display: inline-block;
}

.vq-file-upload-container {
  width: 100%;
  margin-top: 1rem;
}

.vq-file-upload-item-container + .vq-file-upload-item-container {
  border-top: 0;
}

.vq-file-upload-item-container {
  width: 100%;
  border-bottom: 0.2rem solid #d4dde4;
  border-top: 0.2rem solid #d4dde4;
  display: inline-block;
  height: 100%;
  padding-top: 0.5rem;
  min-height: 3rem;
}

.vq-file-upload-item {
  width: 100%;
  margin: 0;
  overflow-y: hidden;
  padding: 0.2rem 0.5rem;
  line-height: 1.5rem;
}

.vq-file-upload-item-label {
  display: inline;
  font-size: 1.125rem;
}

.vq-file-upload-button-container {
  margin-top: 1.5rem;
}

.vq-file-upload-icon-waiting {
  display: inline;
  background-size: 3rem 3rem;
  width: 3rem;
  height: 3rem;
  margin-left: 1rem;
  margin-right: auto;
  position: absolute;
}

.vq-file-upload-icon-waiting-on-hide {
  display: inline;
  background-size: 2rem 2rem;
  width: 2rem;
  height: 2rem;
  margin-left: -1.5rem;
  margin-top: -2.2rem;
  margin-right: auto;
  position: absolute;
}

.vq-file-upload-label {
  padding-top: 1.2rem;
  padding-right: 0.2rem;
  padding-bottom: 0.7rem;
  pointer-events: none;
  color: var(--control-empty-caption-font-color);
  position: relative;
  top: 0.3rem;
  font-weight: 700;
}

.vq-file-upload-message {
  display: inline;
}

.vq-file-upload-button-close {
  display: inline;
  float: right;
}

.vq-file-upload-button-close::before {
  font-family: "Material Icons";
  font-size: 1.5rem;
  content: var(--icon-close);
  color: var(--header-font-color);
}

.vq-file-upload-result {
  font-size: 1.125rem;
  font-weight: 600;
  position: relative;
  vertical-align: unset;
  margin-left: 1rem;
}

.vq-file-upload-result-success {
  color: var(--done-icon-color);
  margin-left: 0;
}

.vq-file-upload-item-label-success {
  color: var(--done-icon-color);
}

.vq-file-upload-item-label-error {
  color: var(--error-icon-color);
}

.vq-file-upload-result-error {
  color: var(--error-icon-color);
  line-height: 2rem;
  margin-left: 0;
}

.vq-file-upload-button-disabled {
  background-color: gray;
  cursor: initial;
}

.vq-file-upload-label-upload {
  height: 3rem;
  padding-top: 0.5rem;
}

.vq-file-upload-button-close-disabled {
  cursor: initial;
}

.vq-file-upload-container-fields {
  display: inline-block;
  width: 100%;
  max-width: inherit;
  background-color: var(--card-background-color);
  padding: 1rem 1.5rem;
  box-shadow: 0 3.2px 7.2px 0 var(--box-shadow-color), 0 0.6px 1.8px 0 var(--box-shadow-color);
  margin: 1rem 0.5rem;
  border-radius: var(--border-radius-px);
}

.vq-button-component {
  background-color: var(--m-header-background-color);
  border: none;
  border-radius: var(--border-radius-px);
  font-size: 1rem;
  height: 3rem;
  padding: 0 2rem;
  cursor: pointer;
  color: var(--button-dark-font-color);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.vq-button-component-icon {
  background-color: transparent;
  border: none;
  height: 3rem;
  cursor: pointer;
  color: var(--m-header-background-color);
  width: 1rem;
}

.vq-button-component-done::before {
  font-family: "Material Icons";
  font-size: 1.5rem;
  content: "check_circle";
}

.vq-button-component-doneRevert::before {
  font-family: "Material Icons";
  font-size: 1.5rem;
  content: "undo";
}

.vq-button-component-edit::before {
  font-family: "Material Icons";
  font-size: 1.5rem;
  content: "edit";
}

.vq-button-component-skip::before {
  font-family: "Material Icons";
  font-size: 2rem;
  margin-left: -0.5rem;
  content: "skip_next";
}

.vq-button-component-skipRevert::before {
  font-family: "Material Icons";
  font-size: 2rem;
  margin-left: -0.5rem;
  content: "skip_previous";
}

.vq-button-component-disable {
  background-color: gray;
  cursor: initial;
}

.vq-button-component-left {
  float: left;
  margin-right: 1rem;
  margin-left: 0.5rem;
}

.vq-button-component-right {
  float: right;
  margin-left: 1rem;
}

.vq-button-component-container {
  width: 100%;
  margin-right: 0.5rem;
  padding-bottom: 0.1rem;
}

.vq-button-component-container-inline {
  position: relative;
  background-color: transparent;
  margin: 0 0.5rem 0 0.5rem;
  display: inline-block;
  color: var(--control-content-font-color);
}
.vq-button-component-container-inline * {
  outline: none; /*no highlite box on focus*/
  box-shadow: none;
}

.vq-button-container-editable {
  /*
      Set the position relative so the children can
      be set to absolute
      (for the child it's actually relative to its parent)
  */
  position: relative;
  height: 3rem;
  background-color: transparent;
  margin: 1rem 1rem 1rem 0;
  display: inline-block;
  max-width: inherit;
  min-width: 5rem;
  color: var(--control-content-font-color);
}

.vq-button-container-editable * {
  outline: none;
  /*no highlite box on focus*/
  box-shadow: none;
  position: absolute;
}

.vq-button-component-container-inline .vq-button-component-disable {
  background-color: transparent;
  color: var(--secondary-text-color);
}

.vq-separator {
  width: 100%;
  margin-right: 0.5rem;
  margin-left: 0.5rem;
  height: 0.5rem;
  border-top: 3px solid var(--border-color);
  margin-top: 0.5rem;
  margin-bottom: 0.2rem;
}

.vq-empty-separator {
  width: 100%;
}

.vq-money-icon-size {
  width: 2rem;
  height: 2rem;
}

.vq-money-icon-closed-style {
  padding-top: 0.6rem;
  margin-top: 0.4rem;
}

.vq-money-list {
  height: 28rem;
}

.vq-clothe-list {
  height: 41rem;
}

.vq-clothes-container {
  min-width: 30rem;
}

.vq-card-signature-container {
  overflow: auto;
}

.vq-signature-footer-button {
  display: flex;
  padding: 2rem 0rem 0rem 0rem;
  float: right;
}

.vq-signature-label {
  top: 1rem;
  position: relative;
}

.vq-card-signature {
  width: 40% !important;
}

.vq-signature-img {
  width: 600px;
  height: 350px;
  max-width: inherit;
  max-height: inherit;
}

.vq-signature-img-summary {
  height: 50px;
  width: 100px;
  transition: transform 0.4s; /* Animation */
  background-color: transparent;
}

.vq-signature-img-summary:hover {
  transform: scale(4);
  -ms-transform: scale(4);
  -moz-transform: scale(4);
  -webkit-transform: scale(4);
  -o-transform: scale(4);
  z-index: 999;
  margin-right: -10vw;
  position: absolute;
  background-color: rgba(245, 249, 252, 0.5);
}

.vq-signature-img-edit {
  height: 90px;
  position: relative;
}

.vq-signature-remove-icon {
  position: relative;
  cursor: pointer;
  top: 1rem;
  background-color: transparent;
  border: none;
}

.vq-signature-remove-icon:before {
  content: var(--icon-delete);
  font-size: 1.6rem;
  font-family: "Material Icons";
}

.vq-caption-signature {
  font-weight: 600;
  top: 1.5rem;
  position: relative;
  color: var(--control-summary-caption-font-color);
}

.vq-input-warning-error-high-signature .vq-button-component {
  background-color: var(--warning-priority-high-color);
}

.vq-input-warning-error-medium-signature .vq-button-component {
  background-color: var(--warning-priority-medium-color);
}

.vq-input-warning-error-low-signature .vq-button-component {
  background-color: var(--warning-priority-low-color);
}

.vq-pending-to-save-field-value-signature .vq-button-component {
  background-color: var(--messages-pending-color);
}

.vq-input-warning-selected-signature .vq-button-component {
  background-color: #756403;
}

.vq-pending-to-save-field-value-signature .vq-button-component {
  background-color: var(--messages-pending-color);
}

.vq-pending-to-save-offline-signature .vq-button-component {
  background-color: var(--messages-pending-offline-color);
}

.vq-pending-to-save-server-exception-signature .vq-button-component {
  background-color: var(--messages-server-exception-color);
}

.vq-signature-card-caption {
  color: midnightblue;
  font-style: italic;
}

.vq-signature-no-margin {
  margin: 0;
}

.vq-signature-file {
  width: 2.5rem;
}

.vq-file-viewer-thumbnail {
  height: 5rem;
  cursor: pointer;
  width: 100%;
  max-width: 13rem;
}

.vq-file-viewer-thumbnail-no-image {
  width: 6rem;
  height: 6rem;
  cursor: pointer;
}

.vq-filters-container {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  margin-bottom: 1rem;
}

.vq-filter-container-editable {
  display: inline-block;
  background: var(--grid-filter-background-color);
  margin-right: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.4rem;
  border: 0.1rem solid var(--grid-filter-border-color);
  height: 4rem;
}

.vq-filters-saved-container .vq-filter-container,
.vq-filter-container-editable .vq-filter-container {
  margin-bottom: 1rem;
}

.vq-filter-container {
  display: inline-block;
  background: transparent;
  margin-right: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.4rem;
  border: 0.1rem solid var(--m-header-background-color);
}

.vq-filters-buttons-container {
  display: inline-block;
  height: 4rem;
}

.vq-filters-buttons-container-empty {
  display: inline-block;
  vertical-align: bottom;
  width: 100%;
}

.vq-filters-new-filter-button {
  background-color: var(--m-header-background-color);
  border: none;
  border-radius: var(--border-radius-px);
  font-size: 1.1rem;
  height: 2.5rem;
  padding: 0 2rem;
  cursor: pointer;
  color: var(--button-dark-font-color);
  font-weight: 600;
  margin-left: 0.5rem;
  margin-top: 0.7rem;
}

.vq-filters-add-filter-button {
  background-color: transparent;
  border: 0.1rem solid var(--m-header-background-color);
  border-radius: var(--border-radius-px);
  font-size: 2rem;
  padding: 0 1.5rem;
  cursor: pointer;
  color: var(--m-header-background-color);
  margin-left: 0.5rem;
  vertical-align: bottom;
  height: 2.5rem;
}

.vq-filters-clear-all-filter-button {
  background-color: transparent;
  border: none;
  font-size: 1.1rem;
  padding: 0 0.5rem;
  cursor: pointer;
  color: var(--m-header-background-color);
  text-decoration: underline;
  font-weight: 600;
  margin-left: 0.5rem;
  margin-bottom: 0.5rem;
}

.vq-filters-saved-container {
  cursor: pointer;
}

.vq-filters-new-filter-button-save {
  background-color: transparent;
  border: none;
  height: 3rem;
  cursor: pointer;
  color: var(--m-header-background-color);
  vertical-align: top;
}

.vq-filters-new-filter-button-save::before {
  font-family: "Material Icons";
  content: var(--icon-save);
  font-size: 2rem;
}

.vq-filters-new-filter-link {
  background-color: transparent;
  border: none;
  font-size: 2rem;
  /* height: 3rem; */
  padding: 0.5rem 0;
  cursor: pointer;
  color: var(--m-header-background-color);
  float: right;
}

.vq-filters-new-filter-link::before {
  font-family: "Material Icons";
  content: var(--icon-filter);
}

.vq-filter-grid-select {
  margin: 1rem 0.5rem;
  height: 1rem;
  border-radius: var(--border-radius-px);
  border: 1px solid var(--border-color);
  padding-left: 0.5rem;
  display: inline-block;
}

.vq-filter-grid-value {
  margin: 1rem 1rem 1rem 0.5rem;
  height: 1rem;
  border-radius: var(--border-radius-px);
  border: 1px solid var(--border-color);
  padding-left: 0.5rem;
  display: inline-block;
  vertical-align: middle;
}

.vq-filter-grid-ids {
  width: 20rem;
}

.vq-filter-grid-operators {
  width: 10rem;
}

.vq-filter-container .vq-grid-item-action-button,
.vq-filter-container-editable .vq-grid-item-action-button {
  font-size: 2rem;
  vertical-align: bottom;
}

.vq-filter-summary-bold {
  margin: 1rem 0rem 1rem 0rem;
  line-height: 1rem;
  display: inline-block;
  font-weight: 700;
}

.vq-filter-summary {
  margin: 1rem 0rem 1rem 0;
  line-height: 1rem;
  display: inline-block;
}

.vq-filter-summary-value {
  margin: 1rem 1rem 1rem 0;
  line-height: 2rem;
  display: inline-block;
}

.vq-filter-container > .vq-input-container-editable,
.vq-filter-container-editable > .vq-input-container-editable {
  vertical-align: middle;
  margin: 0.5rem 1rem 0.5rem 0;
  height: 2rem;
}

.vq-filter-container .vq-select-icon-selected,
.vq-filter-container-editable .vq-select-icon-selected {
  top: 0.3rem;
}

.vq-filter-container .vq-select-icon-not-selected,
.vq-filter-container-editable .vq-select-icon-not-selected {
  top: 0.3rem;
}

.vq-filter-container > .vq-input-container-editable .vq-floating-label,
.vq-filter-container-editable > .vq-input-container-editable .vq-floating-label {
  display: none;
}

.vq-filter-container > .vq-input-container-editable .vq-select-options-list-ul,
.vq-filter-container-editable > .vq-input-container-editable .vq-select-options-list-ul {
  top: 2rem;
}

.vq-filter-container > .vq-input-container-editable,
.vq-filter-container-editable > .vq-input-container-editable,
.vq-filter-container > .vq-input-container-editable .vq-input,
.vq-filter-container-editable > .vq-input-container-editable .vq-input {
  min-width: 15rem;
}

.vq-filters-saved-filter-container {
  margin-bottom: 1rem;
}

.vq-filters-saved-container {
  margin-bottom: 1.5rem;
  margin-top: 1rem;
  margin-left: 0.2rem;
}

.vq-filters-saved-filter-container .vq-table-remove-button {
  vertical-align: middle;
}

.vq-filters-saved-filter {
  display: inline-block;
}

.vq-filters-saved-filter-container {
  cursor: pointer;
  color: var(--link-font-color);
}

.vq-filters-saved-filter span {
  margin-right: 0.5rem;
}

/*.vq-filters-saved-filter ~ .vq-filters-saved-filter {
    border-left: 1px solid var(--m-header-background-color);
    padding-left: 1rem;
}*/
.vq-filters-saved-title-button-open {
  background-color: transparent;
  border: none;
  font-size: 2rem;
  height: 3rem;
  padding: 0.5rem 0rem;
  cursor: pointer;
  color: var(--m-header-background-color);
}

.vq-filters-saved-title-button-open::before {
  font-family: "Material Icons";
  content: var(--icon-arrow-down);
}

.vq-filters-saved-title-button-closed {
  background-color: transparent;
  border: none;
  font-size: 2rem;
  height: 3rem;
  padding: 0.5rem 0rem;
  cursor: pointer;
  color: var(--m-header-background-color);
}

.vq-filters-saved-title-button-closed::before {
  font-family: "Material Icons";
  content: var(--icon-arrow-right);
}

.vq-filters-saved-title-text {
  font-weight: 700;
  line-height: 3rem;
}

.vq-filters-saved-title-show,
.vq-filters-saved-title-hidden {
  margin-bottom: 1rem;
  vertical-align: top;
}

.vq-filters-edit-button {
  border: none;
  background-color: transparent;
  cursor: pointer;
  padding: 0;
}

.vq-filters-edit-button::before {
  font-family: "Material Icons";
  content: var(--icon-edit);
  color: var(--control-content-font-color);
}

.vq-filters-container .vq-dropdown-span {
  min-width: unset;
}

.vq-checkbox-label-container {
  width: inherit;
  top: 1.3rem;
}

.vq-checkbox-readonly-value-label-true {
  background-color: var(--m-header-background-color);
  border: 2px solid var(--m-header-background-color);
  position: relative;
  margin: 0 auto;
  display: block;
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 25%;
}

.vq-checkbox-readonly-value-label-true-tilde {
  margin: 0 auto;
  top: 0.1rem;
  width: 0.4rem;
  height: 0.8rem;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-0.1rem, 0.15rem);
}

.vq-checkbox-readonly-value-label-null {
  background-color: var(--control-border-color);
  border: 2px solid var(--control-border-color);
  position: relative;
  margin: 0 auto;
  display: block;
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 25%;
}

.vq-checkbox-readonly-value-label-false {
  position: relative;
  margin: 0 auto;
  display: block;
  height: 1.25rem;
  width: 1.25rem;
  background-color: transparent;
  border: 0.15rem solid var(--control-border-color);
  border-radius: 25%;
}

.vq-checkbox-readonly-value-label-null-tilde {
  width: 0.7rem;
  border-bottom: 3px solid var(--header-background-color);
  transform: translate(-0.35rem, -0.7rem);
}

.vq-link-container {
  height: auto;
  background-color: var(--card-background-color);
}

.vq-link-label {
  color: var(--button-dark-background-color);
  cursor: pointer;
  line-height: 3.05rem;
}

.vq-link-label-disabled {
  cursor: default;
  color: var(--secondary-text-color);
}

.vq-link-button-style {
  background-color: var(--m-header-background-color);
  border: none;
  border-radius: var(--border-radius-px);
  padding: 0 2rem;
  margin-top: -0.1rem;
  vertical-align: bottom;
}

.vq-link-left {
  float: left;
  margin-right: 1rem;
}

.vq-link-right {
  float: right;
  margin-left: 1rem;
}

.vq-link-button-style a:link,
.vq-link-button-style a:visited,
.vq-link-button-style a:hover,
.vq-link-button-style a:active {
  line-height: 3rem;
  cursor: pointer;
  color: var(--button-dark-font-color);
  font-weight: 500;
  text-decoration: none;
}

.vq-link-button-style-disabled {
  background-color: var(--secondary-text-color);
  cursor: default;
  border: none;
  border-radius: var(--border-radius-px);
  font-size: 1rem;
  height: 3rem;
  color: var(--button-dark-font-color);
  font-weight: 500;
  margin-bottom: 0.5rem;
  display: inline-block;
  padding: 0 2rem;
}

.vq-table-datetime-buttons {
  background-color: transparent;
  width: 3rem;
  right: 0.6rem;
  top: 0.3rem;
}

.vq-datetime-icon-previous-date {
  position: relative;
  bottom: 0.8rem;
  background-color: transparent;
  border: none;
  display: inline;
  margin: 0.2rem;
  cursor: pointer;
  font-weight: 700;
  height: 3rem;
  font-size: 1.5rem;
}

.vq-datetime-icon-next-date {
  bottom: 1rem;
  background-color: transparent;
  border: none;
  display: inline;
  height: 3rem;
  font-weight: 700;
  cursor: pointer;
  font-size: 1.5rem;
}

.vq-datetime-icon-previous-date:before {
  content: var(--icon-arrow-down);
  font-family: "Material Icons";
  color: var(--control-border-color);
}

.vq-datetime-icon-next-date:before {
  content: var(--icon-arrow-up);
  font-family: "Material Icons";
  color: var(--control-border-color);
}

.vq-title-container {
  margin-bottom: 0.5rem;
}

.vq-title-label {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--card-title-font-color);
  position: relative;
  vertical-align: unset;
}

.vq-title-in-new-line {
  clear: both;
  padding-top: 1.5rem;
}

.vq-combobox-case-associations-container {
  margin-left: 1.5rem;
  margin-bottom: 2rem;
}

.vq-card-footer {
  min-width: 100%;
  height: 3rem;
  display: inline-block;
  margin-top: 1rem;
}

.div-hearders-container {
  width: 100%;
  display: flex;
}

.div-headers-left {
  width: 100%;
}

.div-headers-right {
  width: auto;
  white-space: nowrap;
  float: right;
  height: 3rem;
  margin-right: 1rem;
  display: inline-flex;
  align-items: center;
}

.vq-grid-toolbar-button {
  background-color: transparent;
  border: none;
  font-size: 2rem;
  height: 3rem;
  padding: 0.5rem 0rem;
  cursor: pointer;
  color: var(--m-header-background-color);
}

.vq-grid-clear-sort {
  font-weight: 600;
}

.vq-grid-clear-sort::before {
  font-family: "Material Icons";
  content: var(--icon-swap-vert);
}

.vq-grid-column-config::before {
  font-family: "Material Icons";
  content: var(--icon-table-view);
}

.vq-grid-export-excel::before {
  font-family: "Material Icons";
  content: var(--icon-export-excel);
}

.vq-grid-print-barcode {
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  background-image: url(/icons/printbarcodeicon.svg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 1.7rem;
  width: 1.8rem;
  filter: invert(22%) sepia(18%) saturate(5562%) hue-rotate(211deg) brightness(94%) contrast(97%);
  margin-right: 0.4rem;
  margin-left: 0.4rem;
}

.vq-grid-print-group-barcode {
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  background-image: url(/icons/printgroupbarcode.svg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 1.8rem;
  width: 1.8rem;
  filter: invert(22%) sepia(18%) saturate(5562%) hue-rotate(211deg) brightness(94%) contrast(97%);
}

.vq-grid-refresh-info::before {
  font-family: "Material Icons";
  content: var(--icon-refresh);
}

.vq-grid-expand-addinf::before {
  font-family: "Material Icons";
  content: var(--icon-arrow-right);
}

.vq-grid-collapse-addinf::before {
  font-family: "Material Icons";
  content: var(--icon-arrow-down);
}

.vq-grid-clear-sort-disabled {
  color: var(--disabled-link-font-color);
}

.vq-button-container {
  position: relative;
  display: inline;
}

.vq-icons.vq-todolist-show {
  margin-top: -0.4rem;
  margin-left: -0.5rem;
  font-size: 2.5rem;
  background-color: transparent;
}

.vq-todolist-show::before {
  font-family: "Material Icons";
  color: var(--header-font-color);
  content: var(--icon-todo-list);
}

.vq-todolist-show-pending {
  font-size: 2rem;
  margin-left: -2rem;
  vertical-align: bottom;
}

.vq-todolist-show-pending::before {
  font-family: "Material Icons";
  color: var(--red-color);
  content: var(--icon-todo-pending);
}

.vq-todolist-show-done {
  font-size: 2rem;
  margin-left: -2rem;
  vertical-align: bottom;
}

.vq-todolist-show-done::before {
  font-family: "Material Icons";
  color: var(--dark-green-color);
  content: var(--icon-todo-done);
}

.vq-todolist-show-no-loading {
  font-size: 2rem;
  margin-left: -2rem;
  vertical-align: bottom;
}

.vq-todolist-show-no-loading::before {
  font-family: "Material Icons";
  color: var(--grey-color);
  content: var(--icon-todo-pending);
}

.vq-todolist-empty {
  width: 2rem;
  height: 2rem;
  background-image: url(/icons/list.svg);
  background-size: 2rem 2rem;
  background-color: transparent;
}

.vq-todolist-empty-list {
  font-size: 0.95rem;
  color: var(--control-empty-caption-font-color);
  font-weight: 700;
}

.vq-main-layout-header-todolist-container {
  display: inline-block;
  margin-left: 2.5rem;
}

@media screen and (max-width: 991px) {
  .vq-main-layout-header-todolist-container {
    margin-right: 0;
  }
}
.vq-todolist-list {
  width: 25rem;
  margin: 0.5rem 0 0 1rem;
  max-height: calc(100vh - 10rem);
  overflow: auto;
}

.vq-todolist-new {
  font-weight: 700;
}

.vq-todolist-list-ul {
  list-style-type: none;
  margin-right: 0.5rem;
}

.vq-todolist-list-li {
  padding: 1rem 0;
  border-bottom: 1px solid var(--notification-list-border-bottom-color);
  display: inline-block;
  width: 100%;
}

.vq-todolist-list-li:last-child {
  border: none;
}

.vq-todolist-detail-text {
  display: inline-block;
  width: calc(100% - 4rem);
  font-size: 1rem;
  line-height: 1.5rem;
  vertical-align: top;
  background-color: transparent;
  border: none;
  text-align: left;
}

.vq-todolist-cursor {
  cursor: pointer;
}

.vq-todolist-detail-cursor {
  cursor: pointer;
}

.vq-todolist-detail-description {
  display: inline-block;
  width: 100%;
  line-height: 1.5rem;
  vertical-align: top;
  font-size: 0.9rem;
  color: var(--control-empty-caption-font-color);
}

.vq-todolist-list-container {
  position: absolute;
  background-color: var(--notification-list-background-color);
  -webkit-box-shadow: 0.1rem 0.1rem 0.1rem 0 var(--dark-box-shadow-color);
  box-shadow: 0.1rem 0.1rem 0.1rem 0 var(--dark-box-shadow-color);
  border: 0.1rem solid var(--border-color);
  border-radius: var(--border-radius-px);
}

.vq-todolist-canbedone {
  line-height: 1.5rem;
  margin-right: 1rem;
  margin-left: 0.5rem;
}

.vq-todolist-done {
  font-size: 1.5rem;
  margin-right: 0.5rem;
}

.vq-todolist-done::before {
  font-family: "Material Icons";
  content: var(--icon-todo-done);
  color: var(--dark-green-color);
}

.vq-todolist-pending {
  font-size: 1.5rem;
  margin-right: 0.5rem;
}

.vq-todolist-pending::before {
  font-family: "Material Icons";
  content: var(--icon-todo-pending-item);
  color: var(--black-color);
}

.vq-todolist-disabled {
  font-size: 1.5rem;
  margin-right: 0.5rem;
}

.vq-todolist-disabled::before {
  font-family: "Material Icons";
  content: var(--icon-todo-disabled-item);
  color: var(--light-grey-color);
}

.vq-text-disabled {
  color: var(--light-grey-color);
}

.vq-text-done {
  font-weight: 700;
}

.vq-todolist-deleted {
  border: none;
  background-color: transparent;
  font-size: 2rem;
  font-weight: 700;
}

.vq-todolist-deleted::before {
  font-family: "Material Icons";
  content: "skip_next";
  color: var(--grey-color);
}

.vq-todolist-active {
  border: none;
  background-color: transparent;
  font-size: 2rem;
  font-weight: 700;
  line-height: 2.5rem;
}

.vq-todolist-no-cursor {
  cursor: auto;
}

.vq-todolist-active::before {
  font-family: "Material Icons";
  content: "skip_next";
  color: var(--grey-color);
}

.vq-todolist-actions {
  float: right;
  margin-top: -0.3rem;
  width: 5rem;
}

.vq-todolist-data-container {
  width: calc(100% - 5rem);
  display: inline-block;
}

.vq-todolist-action {
  background-color: transparent;
  border: none;
  font-size: 1.2rem;
}

.vq-todolist-task-done {
  margin-left: 0.5rem;
  vertical-align: top;
  line-height: 2.5rem;
}

.vq-todolist-task-done::before {
  font-family: "Material Icons";
  content: var(--icon-todo-radio-button-checked);
  color: var(--black-color);
}

.vq-todolist-task-pending {
  margin-left: 0.5rem;
  vertical-align: top;
  line-height: 2.3rem;
}

.vq-todolist-task-pending::before {
  font-family: "Material Icons";
  content: "check_circle";
  color: var(--black-color);
}

.vq-todolist-task-disabled {
  margin-left: 0.5rem;
  line-height: 2.3rem;
}

.vq-todolist-task-disabled::before {
  font-family: "Material Icons";
  content: var(--icon-todo-radio-button-unchecked);
  color: var(--light-grey-color);
}

.vq-todolist-more-container {
  position: relative;
  min-height: 2rem;
  width: 20rem;
  padding: 0.5rem;
  margin: 0 auto;
  margin-bottom: 1rem;
  font-weight: 700;
  background-color: var(--header-background-color);
  -webkit-box-shadow: 0.1rem 0.1rem 0.1rem 0 var(--dark-box-shadow-color);
  box-shadow: 0.1rem 0.1rem 0.1rem 0 var(--dark-box-shadow-color);
  border: 0.1rem solid var(--border-color);
}

.vq-todo-more-summary-mode {
  padding-top: 0.3rem;
  position: relative;
  display: inline-block;
  height: 1.5rem;
}

.vq-todo-switch-container {
  vertical-align: top;
  float: right;
}

.vq-todo-switch {
  float: left;
  border-radius: var(--border-radius-px);
  border: solid var(--control-border-color) 0.1rem;
}

.vq-todo-switch input {
  position: absolute;
  opacity: 0;
  visibility: hidden;
}

.vq-todo-switch input + label {
  padding: 0.2rem;
  float: left;
  cursor: pointer;
  font-size: 1rem;
  width: 5rem;
  text-align: center;
  color: var(--header-font-color);
}

.vq-todo-switch input:checked + label {
  background: gray;
  color: white;
}

.vq-helpcenter {
  cursor: pointer;
  border: none;
  background: transparent;
}

.vq-helpcenter:before {
  font-family: "Material Icons";
  font-size: 2rem;
  content: var(--icon-help-center);
  color: var(--m-header-font-color);
}

.vq-main-layout-header-helpcenter-container {
  display: inline-block;
  padding-top: 1.1rem;
  flex: initial;
}

@media screen and (max-width: 991px) {
  .vq-main-layout-header-helpcenter-container {
    margin-right: 0;
  }
}
.vq-helpcenter-list-container {
  position: absolute;
  right: 3rem;
  top: 3.7rem;
  background-color: var(--notification-list-background-color);
  -webkit-box-shadow: 0.1rem 0.1rem 0.1rem 0 var(--dark-box-shadow-color);
  box-shadow: 0.1rem 0.1rem 0.1rem 0 var(--dark-box-shadow-color);
  border: 0.1rem solid var(--border-color);
  border-radius: var(--border-radius-px);
}

.vq-helpcenter-list {
  margin: 0.5rem 0 0 1rem;
  max-height: calc(100vh - 10rem);
  overflow: auto;
  width: 22rem;
}

.vq-helpcenter-list-ul {
  list-style-type: none;
  margin-right: 0.5rem;
}

.vq-helpcenter-list-li {
  padding: 1rem 0;
  border-bottom: 1px solid var(--notification-list-border-bottom-color);
  display: inline-block;
  width: 100%;
}

.vq-helpcenter-list-li:last-child {
  border: none;
}

.vq-helpcenter-ref {
  text-decoration: none;
  width: 100%;
  display: block;
  color: blue;
}

.vq-helpcenter-summary {
  display: block;
  color: black;
  margin-top: 4px;
}

.vq-multiselect-field-options {
  position: relative !important;
}

.vq-multiselect-search {
  position: relative;
}

.vq-multiselect-search-container {
  border-radius: var(--border-radius-px);
  max-height: 15rem;
  box-shadow: 0 0.4rem 0.4rem -0.4rem var(--box-shadow-color), 0 0.4rem 0.4rem 0.1rem var(--box-shadow-color), 0 0.4rem 0.4rem 0.15rem var(--box-shadow-color);
}

.vq-multiselect-contact-ul {
  width: calc(100% - 1rem);
  min-width: var(--min-width-components);
  height: inherit;
  background-color: var(--item-dropdown-list-background-color);
  padding: 0;
  margin-top: 0.1rem;
  color: var(--item-font-color);
  left: 0;
  position: relative;
  display: block;
  max-height: 9.6rem;
  line-height: 2rem;
  overflow: hidden;
  overflow-y: auto;
  z-index: 198;
  list-style-type: none;
}

.vq-multiselect-field-options-margin-top {
  margin-top: 0rem !important;
}

.vq-legend {
  margin-bottom: 0.8rem;
  text-align: left;
  width: 100%;
  font-size: 1.2rem;
  float: left;
  color: var(--m-header-background-color);
}

.vq-legend-error {
  margin-bottom: 0.8rem;
  text-align: left;
  width: 100%;
  font-size: 1.2rem;
  float: left;
  color: var(--warning-priority-high-color);
}

.vq-legend-reduced {
  font-size: 1.15rem !important;
}

.vq-combobox-groupbarcode-container {
  position: relative;
  top: 1rem;
}

.vq-combobox-groupbarcode-icon-add {
  position: relative;
  cursor: pointer;
  top: 0.9rem;
  right: 2rem;
  border: none;
  float: right;
  background-color: transparent;
  color: var(--header-font-color);
}

.vq-combobox-groupbarcode-icon-add:before {
  content: var(--icon-add-circle);
  font-size: 1.1rem;
  font-family: "Material Icons";
}

.vq-action-selector-dropdown-container {
  clear: both;
  margin-top: 2rem;
}

@media screen and (max-width: 991px) {
  .vq-action-selector-dropdown-container {
    margin-top: 0.5rem;
  }
}
.vq-radiobutton-container {
  min-width: 0;
}

.vq-radiobutton-item {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  margin-right: 1rem;
}

.vq-radiobutton-item .vq-radiobutton-item-value {
  display: inline-block;
  position: relative;
  font-size: 1rem;
}

.vq-radio-button-unchecked input,
.vq-radio-button-checked input {
  opacity: 0;
  width: 0;
  height: 0;
}

.vq-radiobutton-group {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  height: auto;
  line-height: 3rem;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.vq-radiobutton-item input:focus + .vq-radiobutton-item-value {
  color: var(--focus-border-color);
}

.vq-radiobutton-group button {
  display: block;
  position: relative;
  font-size: 1rem;
  margin-right: 1rem;
}

.vq-radio-button-unchecked::before {
  font-family: "Material Icons";
  content: var(--icon-radio-button-unchecked);
  color: var(--icon-grid-option-selected-color);
}

.vq-radio-button-checked::before {
  font-family: "Material Icons";
  content: var(--icon-radio-button-checked);
  color: var(--control-content-font-color);
}

.vq-radiobutton-label-maxsize {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.vq-grid-column-list {
  position: absolute;
  right: 0;
  background-color: var(--card-background-color);
  -webkit-box-shadow: 0.1rem 0.1rem 0.1rem 0 var(--dark-box-shadow-color);
  box-shadow: 0.1rem 0.1rem 0.1rem 0 var(--dark-box-shadow-color);
  border: 0.1rem solid var(--border-color);
  border-radius: var(--border-radius-px);
  z-index: 1002;
  width: 25rem;
  padding: 2rem;
  max-height: calc(100vh - 10rem);
  display: flex;
  flex-direction: column;
  cursor: default;
}
.vq-grid-column-list header > * {
  border-bottom: 1px solid var(--notification-list-border-bottom-color);
}
.vq-grid-column-list header .title {
  font-weight: bold;
  padding: 1rem 0 1rem 0;
  display: flex;
  justify-content: space-between;
}
.vq-grid-column-list main {
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.vq-grid-column-list main > * {
  padding: 1rem 0;
  border-bottom: 1px solid var(--notification-list-border-bottom-color);
  display: flex;
  align-items: center;
}
.vq-grid-column-list main .commands {
  margin-left: auto;
  display: flex;
}
.vq-grid-column-list main .label {
  overflow: hidden;
  margin: 0 0.3rem 0 0.3rem;
}
.vq-grid-column-list footer {
  padding: 1rem 0 0 0;
}

.vq-button-container {
  position: relative;
  display: inline;
}

.full_width {
  width: 100%;
}

.vq-grid-editable-row-modal .vq-card-list {
  width: 40%;
  top: 3rem;
}

.vq-table-row-modal {
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--div-modal-background-color);
  z-index: 1000;
  position: fixed;
  overflow: scroll;
}

.vq-card-list .vq-grid-container {
  margin: 2rem 0;
}

.vq-card-list .vq-card-header {
  margin: 1.5rem 0;
}

.vq-table-row-modal .vq-card .vq-grid-item-data {
  border: 1px solid var(--border-color);
  padding-left: 0.2rem;
}

.vq-card-list .vq-grid-header-item {
  font-weight: 500;
}

.vq-multiple-container {
  width: 100%;
}

.vq-multiple-item-container {
  height: auto;
  width: 100%;
}

.vq-multiple-item-list {
  position: relative;
  width: inherit;
  height: auto;
  display: grid;
  justify-content: space-evenly;
  justify-items: stretch;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1rem 1.5rem;
}

.vq-multiple-label {
  padding-top: 1.2rem;
  padding-right: 0.2rem;
  padding-bottom: 0.7rem;
  padding-left: 1rem;
  pointer-events: none;
  position: relative;
  color: var(--control-caption-font-color);
}

.vq-multiple-item {
  position: relative;
  border: 1px solid var(--control-border-color);
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  margin: 0;
  width: 100%;
}

.vq-multiple-item-completed {
  background-color: #F3F3F3;
}

.vq-multiple-item-name {
  width: 100%;
  position: relative;
  line-height: 1.7rem;
}

.vq-multiple-item-name-input {
  border: none;
  background-color: transparent;
  font-size: 1rem;
  margin-top: -0.5rem;
  width: 100%;
}

.vq-multiple-item-name-input-show-description {
  margin-top: 0.5rem;
}

.vq-multiple-show-description-new-input {
  margin-top: 1rem;
}

.vq-multiple-item-quantity {
  width: 10rem;
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}

.vq-multiple-item-quantity input {
  display: inline-block;
  position: relative;
  border-radius: 5px;
  line-height: 2rem;
  width: 4rem;
  background-color: #F3F3F3;
  border: none;
  text-align: center;
}

.vq-multiple-item-quantity .vq-multiple-item-completed {
  background-color: #D0D0D0;
}

.vq-multiple-item-quantity input[type=number]::-webkit-inner-spin-button,
.vq-multiple-item-quantity input[type=number]::-webkit-outer-spin-button,
.vq-multiple-item-name input[type=number]::-webkit-inner-spin-button,
.vq-multiple-item-name input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.vq-multiple-item input[type=number] {
  -moz-appearance: textfield;
}

.vq-multiple-item label {
  display: inline-block;
  position: relative;
  margin-right: 0.8rem;
  vertical-align: sub;
}

.vq-multiple-button {
  font-size: 1.5rem;
  color: black;
  background-color: transparent;
  margin: 0 0.1rem;
  top: 0.2rem;
  position: relative;
  border: none;
  cursor: pointer;
}

.vq-multiple-button-disable {
  color: var(--secondary-light-text-color);
}

.vq-multiple-item-button-up::after {
  font-family: "Material Icons";
  content: "add_circle";
}

.vq-multiple-item-button-down::after {
  font-family: "Material Icons";
  content: "remove_circle";
}

.vq-multiple-item-button-description::after {
  font-family: "Material Icons";
  content: "edit";
}

.vq-multiple-item-name-quantity {
  display: inline-flex;
  flex-direction: row;
  position: relative;
  width: 100%;
  align-items: center;
}

.vq-multiple-item-description {
  display: block;
  width: calc(100% - 4rem);
  position: absolute;
  left: 5rem;
  top: -0.7rem;
}

.vq-multiple-item-description input {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.4rem;
}

.vq-multiple-button-new-item {
  position: relative;
  width: fit-content;
  margin-bottom: 0;
}

.vq-multiple-label-container {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  width: 100%;
  align-content: stretch;
}

.vq-multiple-show-descriptions-button {
  position: relative;
  background-color: transparent;
  border: none;
  font-size: 1.5rem;
  color: var(--primary-text-color);
  cursor: pointer;
}

.vq-multiple-show-descriptions-button::after {
  font-family: "Material Icons";
  content: "search";
}

.vq-multiple-show-description-input-container {
  position: relative;
  width: calc(100% - 1rem);
  z-index: 10;
  margin-top: -0.95rem;
  padding-right: 2rem;
}

.vq-multiple-show-description-input {
  border: none;
  font-size: 1rem;
  width: 100%;
}

.vq-input-warning-error-high .vq-multiple-show-description-input {
  top: -0.7rem;
  height: 3.3rem;
}

.vq-multiple-item-input-description {
  background-color: white;
  border: 1px solid #a3a3a3;
  vertical-align: top;
  line-height: 2rem;
  width: calc(100% + 0.75rem);
}

.vq-multiple-item-input-description .vq-multiple-item-name label,
.vq-multiple-item-input-description .vq-multiple-item-name {
  opacity: 0.5;
}

.vq-multiple-error-container {
  border: 2px solid var(--warning-priority-high-color);
  height: calc(3rem + 2px);
}

.vq-message-multiple {
  position: absolute;
  bottom: -1.2rem;
  left: 0;
}

.vq-multiple-item-list-currency {
  margin-bottom: 1.5rem;
}

.vq-message-multiple-currency {
  position: absolute;
  bottom: -2.5rem;
  left: 0;
}

.vq-image-editor {
  background-color: gainsboro;
  z-index: 1000;
}
.vq-image-editor .close {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
}

.vq-container-text-editor {
  margin: 1rem 1rem 1rem 0;
  vertical-align: top;
}

.ql-snow .ql-editor pre {
  background-color: white !important;
}

.ql-toolbar.ql-snow {
  min-height: 2em !important;
  box-sizing: content-box !important;
}

.ql-editor strong {
  font-weight: 700;
}

.ql-editor em {
  font-style: italic;
}

button.btn.btn-primary.vq-button-component {
  margin: 1rem 1rem 1rem 0;
}

.vq-template-view {
  display: inline-block;
  margin-left: 1rem;
  width: 50%;
  left: 1rem;
  position: relative;
}

.vq-template-edit {
  display: inline-block;
  width: 49%;
}

.generic-drop {
  overflow-y: scroll;
}

/*
.vq-dropdown-icon:before {
    text-align: right;
    font-size: 1.5rem;
    font-weight: 700;
    font-family: "Material Icons";
    top: 55%;
    right: 0.5rem;
    position: absolute;
    transform: translateY(-50%);
}

.vq-dropdown.edit:after {
    text-align: right;
    font-size: 1.5rem;
    font-weight: 700;
    font-family: "Material Icons";
    top: 55%;
    right: 0.5rem;
    position: absolute;
    transform: translateY(-100%) translateY(-50%);
    content: var(--icon-edit);
}

.vq-dropdown-open.vq-dropdown-icon:before {
    content: var(--icon-arrow-up);
}

.vq-dropdown-closed.vq-dropdown-icon:before {
    content: var(--icon-arrow-down);
}
    */
.vq-dropdown-icon-not-selected {
  color: var(--font-icons-color);
}

.vq-generic-input.dropdown {
  user-select: none;
}
.vq-generic-input.dropdown .open-close-button {
  right: 0.5rem;
  top: 25%;
}
.vq-generic-input.dropdown .edit-button {
  right: 2.1rem;
  top: 25%;
}
.vq-generic-input.dropdown .new-button {
  height: 3rem;
  cursor: pointer;
  display: flex;
  position: relative;
  padding: 0 1rem;
  overflow: hidden;
  align-items: center;
  flex-direction: row-reverse;
  border-top: 0.1rem solid var(--icons-font-color);
}
.vq-generic-input.dropdown.clearable {
  height: auto;
}
.vq-generic-input.dropdown.clearable .vq-dropdown-span {
  padding-top: 0.7rem;
  padding-right: 3.8rem;
  padding-bottom: 0.5rem;
  min-height: 3rem;
}
.vq-generic-input.dropdown.clearable .vq-multiselect-item {
  display: inline-flex;
}
.vq-generic-input.dropdown.clearable .vq-multiselect-close-icon {
  padding-left: 0.5rem;
}
.vq-generic-input.dropdown .vq-dropdown-input-search {
  user-select: auto;
}
.vq-generic-input > .vq-dropdown-span {
  margin-top: 0;
  margin-bottom: 0;
  width: 100%;
  display: inline-block;
  position: relative;
}
.vq-generic-input > .vq-dropdown-span:focus {
  padding-right: 3rem;
}
.vq-generic-input > .vq-dropdown-span > span {
  /*width: calc(100% - 3.5rem);
  overflow: hidden;*/
  position: relative;
  top: 50%;
  transform: translateY(-55%);
  display: inline-block;
}

.vq-floating-label {
  left: 0;
}

.vq-similar-contact-list > li {
  margin-bottom: 0.8rem;
}
.vq-similar-contact-list > li > label {
  display: flex;
  justify-content: center;
  align-items: center;
}
.vq-similar-contact-list > li > label:hover {
  background-color: var(--item-hover-background-color);
  color: var(--item-hover-color);
}
.vq-similar-contact-list > li > label.selected {
  background-color: var(--item-current-background-color);
}
.vq-similar-contact-list > li > label > div {
  flex: 0 0 calc(100% - 2rem);
  width: calc(100% - 2rem);
}
.vq-similar-contact-list > li > label > input[type=radio] {
  appearance: none;
  margin: 0.5rem;
}
.vq-similar-contact-list > li > label > input[type=radio]::before {
  font-family: "Material Icons";
  content: var(--icon-radio-button-unchecked);
  color: var(--control-content-font-color);
}
.vq-similar-contact-list > li > label > input[type=radio]:checked::before {
  content: var(--icon-radio-button-checked);
}

.vq-similar-case-list {
  max-height: 50vh;
  overflow: scroll;
}

.vq-similar-case-list .vq-similar-case-item {
  border-bottom: 1px solid grey;
  padding-bottom: 7px;
  margin-bottom: 7px;
}

/*Main case room styles*/
.vq-main-layout-header-caseroom-container {
  display: inline-block;
  margin-left: 1rem;
}

.vq-main-layout-header-caseroom-container-lite {
  margin-left: 2.5rem;
}

@media screen and (max-width: 991px) {
  .vq-main-layout-header-caseroom-container {
    margin-right: 0;
  }
}
.vq-icons.vq-caseroom {
  margin-top: -0.4rem;
  margin-left: -0.5rem;
  font-size: 2.5rem;
  background-color: transparent;
}

.vq-caseroom::before {
  font-family: "Material Icons";
  content: var(--icon-groups);
}

.vq-caseroom-black::before {
  color: var(--header-font-color);
}

.vq-caseroom-red::before {
  color: var(--red-color);
}

/*User-working list styles*/
.vq-caseroom-list-container {
  position: absolute;
  background-color: var(--notification-list-background-color);
  -webkit-box-shadow: 0.1rem 0.1rem 0.1rem 0 var(--dark-box-shadow-color);
  box-shadow: 0.1rem 0.1rem 0.1rem 0 var(--dark-box-shadow-color);
  border: 0.1rem solid var(--border-color);
  border-radius: var(--border-radius-px);
}

.vq-caseroom-list {
  width: 25rem;
  margin: 0.5rem 0 0 1rem;
  max-height: calc(100vh - 10rem);
  overflow: auto;
}

.vq-caseroom-list-ul {
  list-style-type: none;
  margin-right: 0.5rem;
}

.vq-caseroom-list-li {
  padding: 1rem 0;
  border-bottom: 1px solid var(--notification-list-border-bottom-color);
  display: inline-block;
  width: 100%;
}

.vq-caseroom-list-li:last-child {
  border: none;
}

.vq-caseroom-data-container {
  width: calc(100% - 5rem);
  display: inline-block;
}

.vq-caseroom-detail-person-icon {
  display: inline-block;
  padding-right: 0.5rem;
}

.vq-caseroom-detail-person-icon::before {
  font-family: "Material Icons";
  font-size: 2rem;
  content: var(--icon-person);
  color: var(--header-font-color);
}

.vq-caseroom-detail-text {
  display: inline-block;
  width: calc(100% - 4rem);
  font-size: 1rem;
  line-height: 1.5rem;
  vertical-align: middle;
}

.vq-caseroom-detail-description {
  display: inline-block;
  width: 100%;
  font-size: 0.9rem;
  line-height: 1.5rem;
  vertical-align: top;
}

.vq-confirmation-required-container-upgradepopup {
  background: var(--m-header-background-color);
  max-width: unset;
  padding: 0rem 0rem 0rem 0rem;
  width: 50%;
}

.vq-confirmation-required-text-upgradepopup {
  color: white;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  margin-top: 1rem;
}

.vq-confirmation-required-iframe-newsletter {
  position: relative;
  padding-bottom: 56.25%;
}

.vq-confirmation-required-iframe-newsletter iframe {
  position: absolute;
  width: 100%;
  height: 100%;
}

.vq-confirmation-required-buttons-container-upgradepopup {
  background: white;
  padding: 0rem 0rem 1rem 0rem;
}

.vq-confirmation-required-buttons-container-upgradepopup button {
  width: 14rem;
}

.vq-confirmation-required-container-similarcaseoncreate {
  overflow-x: hidden;
  padding: 2rem !important;
}

.vq-confirmation-title-similarcaseoncreate {
  font-weight: bold;
  margin-bottom: 1rem !important;
  padding-right: unset !important;
}

.vq-similarcaseoncreate-subtitle1 {
  margin-bottom: unset !important;
  padding-right: unset !important;
  text-align: justify !important;
}

.vq-similarcaseoncreate-subtitle2 {
  margin-bottom: 1rem !important;
  padding-right: unset !important;
  text-align: justify !important;
}

.vq-similarcaseoncreate-list {
  display: grid;
  list-style-type: circle;
  margin-left: 1.5rem;
}

.vq-similarcaseoncreate-list-item {
  margin-bottom: 2rem !important;
}

.vq-similarcaseoncreate-container {
  border-bottom: 1px solid var(--line-color);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr; /* 4 columns */
  font-size: 1.5rem;
  font-weight: bold;
  margin-top: 1rem !important;
  width: 100%;
}

.vq-similarcaseoncreate-item {
  margin-bottom: unset !important;
  padding-right: unset !important;
  text-align: justify !important;
}

.vq-similarcaseoncreate-item-link-style strong {
  cursor: pointer;
  color: blue;
  text-decoration: underline;
}

.vq-similarcaseoncreate-text {
  color: var(--grey-color);
}

.vq-similarcaseoncreate-left {
  cursor: pointer;
  color: blue;
  justify-self: start;
  text-decoration: underline;
}

.vq-similarcaseoncreate-center {
  justify-self: stretch;
  margin-left: 1rem;
}

.vq-similarcaseoncreate-right {
  justify-self: end;
  margin-left: 1rem;
}

strong {
  font-weight: bold;
}