@charset "UTF-8";

@font-face {
  font-family: 'Wix Madefor Text';
  src: url('/fonts/wixmadefortext/WixMadeforText-Italic-VariableFont_wght.ttf') format('truetype');
  font-style: italic;
}

@font-face {
  font-family: 'Wix Madefor Text';
  src: url('/fonts/wixmadefortext/WixMadeforText-VariableFont_wght.ttf') format('truetype');
  font-style: normal;
}

/**
 * style_franchise.css
 * Extends style_theme.css
 * base_theme: voxelcare
 * namespace: .com-
 * written by: Alexis
 */

/* variables */
:root {
  /* theme colors */
  --color-base: #ffffff;
  --color-text: #45484f;
  --color-primary: #133e8f;
  --color-primary-active: #4c7ab2;
  --color-secondary: #20b9d6;
  --color-accent: #fbba00;
  --color-danger: #e11900;
  --color-disabled: #999;
  --color-link: #337ab7;
  --color-link-hover: #23527c;
  --color-gray: #c2c2c2;
  --color-gray-dark: #4c5466;
  --color-gray-light: #e6e6e6;
  --color-gray-lighter: #f6f6f6;
  /* New guidelines */
  --color-plugin-btn: #435e91;
  --color-correct: #05944f;
  --color-correct-light: #b4dfca;
  --color-incorrect: #e11900;
  --color-incorrect-light: #f5bab4;
  --color-blue: #133e8f;
  --color-blue-light: #e5ecf4;
  --color-blue-dark: #02263d;
  --color-cyan: #20b9d6;
  --color-cyan-dark: #1eadc8;
  --color-cyan-light: #68cee2;
  --color-cyan-light-background: #d7ebf5;
  --color-yellow: #fbba00;
  --color-yellow-light: #fcce59;
  --color-yellow-dark: #e5aa00;
  --color-yellow-light-background: #fff3d7;
  --color-grey-blue-light: #dce1e5;
  --color-grey-blue: #b3bec5;
  --color-grey-blue-dark: #586974;
  --color-neon-green-light: #cffc7a;
  --color-neon-green: #b9fd33;
  --color-neon-green-dark: #72ac00;
  --color-modal-background: rgba(25, 55, 110, 0.7);
  --color-border-range: rgba(19, 62, 143, 0.5);
}

/* ---------------------------------------------------------- */
/*              Base & Bootstrap Overrides                    */
/* ---------------------------------------------------------- */
html {
  font-family: 'Wix Madefor Text';
}

body {
  background-color: var(--color-base);
  color: var(--color-text);
}

a {
  color: var(--color-link);
  text-decoration: none;
}

a:focus,
a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

svg {
  fill: var(--color-primary) !important;
}

/* Range inputs crossbrowser styling */
input[type='range']::-webkit-slider-runnable-track {
  background-color: var(--color-blue-light);
}

input[type='range']::-webkit-slider-thumb {
  background-color: var(--color-primary);
}

input[type='range']:focus {
  outline-color: transparent !important;
}

input[type='range']:focus::-webkit-slider-runnable-track {
  opacity: 1;
  background-color: var(--color-blue-light);
  outline: 1px solid var(--color-border-range);
  border-color: var(--color-border-range);
}

/* Responsive styles */
@media (min-width: 576px) {
  .intake-plugins-container,
  .plugin-downloader {
    width: 540px;
  }
}
@media (min-width: 768px) {
  .intake-plugins-container,
  .plugin-downloader {
    width: 720px;
  }
}
@media (min-width: 992px) {
  .intake-plugins-container,
  .plugin-downloader {
    width: 960px;
  }
}
@media (min-width: 1200px) {
  .intake-plugins-container,
  .plugin-downloader {
    width: 1140px;
  }
}
@media (min-width: 1280px) {
  .intake-plugins-container,
  .plugin-downloader {
    width: 1250px;
  }
}
@media (min-width: 1440px) {
  .intake-plugins-container,
  .plugin-downloader {
    width: 1410px;
  }
}

/* ---------------------------------------------------------- */
/*                         Theme                              */
/* ---------------------------------------------------------- */

/* theme */
.page-header {
 border-color: transparent;
}

.page-header > h1 {
  color: var(--color-primary);
  font-weight: 700;
}

.page-title {
  color: var(--color-primary);
  font-weight: 700;
}

.btn {
  border-radius: 12px !important;
  font-weight: 700;
}

.theme-primary,
.theme-primary a,
.theme-primary a:hover {
  border-radius: 12px !important;
  background: var(--color-primary) !important;
  color: var(--color-base) !important;
}

.bg-light {
  background-color: var(--color-gray-lighter);
}

.dark-orange {
  background: #f87e0c !important;
  text-decoration: none !important;
  color: var(--color-base) !important;
}

.alert {
  border-radius: 12px !important;
}

.mandatoryNotFilled {
  border-color: transparent;
}

.mandatoryNotFilled input {
  border: 2px solid var(--color-danger);
}

/* tables */
.page-content hr {
  visibility: hidden;
  margin: 1rem;
}

thead tr {
  background-color: var(--color-gray-light) !important;
}

thead th {
  padding: 12px !important;
}

tbody td {
  padding: 12px !important;
}

thead span,
thead div {
  text-transform: capitalize !important;
  font-weight: 700;
  color: var(--color-text);
}

/* buttons */
.btn-container {
  background-color: transparent !important;
}

.vc_next,
.vc_next:active,
.vc_next.active,
.vc_ok,
.vc_ok:active,
.vc_ok.active,
.vc_okWarning,
.vc_okWarning:active,
.vc_okWarning.active,
.vc_ignore,
.vc_ignore:active,
.vc_ignore.active {
  background-image: url('/images/material_design/next.png');
}

.vc_good,
.vc_good:active,
.vc_good.active {
  background-image: url('/images/material_design/good.png');
}

.vc_bad,
.vc_bad:active,
.vc_bad.active {
  background-image: url('/images/material_design/close.png');
}

.vc_close,
.vc_close:active,
.vc_close.active,
.vc_cancel,
.vc_cancel:active,
.vc_cancel.active {
  background-image: url('/images/material_design/blue/close.png');
}

.vc_save,
.vc_save:active,
.vc_save.active {
  background-image: url('/images/material_design/save.png');
}

.vc_search,
.vc_search:active,
.vc_search.active {
  background-image: url('/images/material_design/blue/search.png');
}

.vc_filtersremove,
.vc_filtersremove:active,
.vc_filtersremove.active {
  background-image: url('/images/material_design/blue/filter_off.png');
}

.vc_generatereport,
.vc_generatereport:disabled,
.vc_generatereport.disabled,
.vc_generatereport[disabled],
.vc_generatereport[disabled]:hover {
  background-image: url('/images/material_design/report.png');
}

.vc_generatereport,
.vc_generatereport:active,
.vc_generatereport.active {
  background-image: url('/images/material_design/blue/report.png');
}

.vc_adduser,
.vc_adduser:active,
.vc_adduser.active {
  background-image: url('/images/material_design/user_add.png');
}

.vc_orderlist,
.vc_orderlist:active,
.vc_orderlist.active {
  background-image: url('/images/material_design/blue/overview.png');
}

.vc_newinsole,
.vc_newinsole:active,
.vc_newinsole.active {
  background-image: url('/images/material_design/blue/orderinsole.png');
}

.vc_milling,
.vc_milling:active,
.vc_milling.active {
  background-image: url('/images/material_design/factory.png');
}

.vc_archive:disabled,
.vc_archive.disabled,
.vc_archive[disabled],
.vc_archive[disabled]:hover {
  background-image: url('/images/material_design/archive.png');
}

.vc_archive,
.vc_archive:active,
.vc_archive.active {
  background-image: url('/images/material_design/blue/archive.png');
}

.vc_generatedymolabels:disabled,
.vc_generatedymolabels.disabled,
.vc_generatedymolabels[disabled],
.vc_generatedymolabels[disabled]:hover {
  background-image: url('/images/material_design/print.png');
}

.vc_generatedymolabels,
.vc_generatedymolabels:active,
.vc_generatedymolabels.active {
  background-image: url('/images/material_design/blue/print.png');
}

.vc_generatelabels:disabled,
.vc_generatelabels.disabled,
.vc_generatelabels[disabled],
.vc_generatelabels[disabled]:hover {
  background-image: url('/images/material_design/label.png');
}

.vc_generatelabels,
.vc_generatelabels:active,
.vc_generatelabels.active {
  background-image: url('/images/material_design/blue/label.png');
}

.vc_startmanufacturing:disabled,
.vc_startmanufacturing.disabled,
.vc_startmanufacturing[disabled],
.vc_startmanufacturing[disabled]:hover {
  background-image: url('/images/material_design/start.png');
}

.vc_startmanufacturing,
.vc_startmanufacturing:active,
.vc_startmanufacturing.active {
  background-image: url('/images/material_design/blue/start.png');
}

.vc_stopmanufacturing:disabled,
.vc_stopmanufacturing.disabled,
.vc_stopmanufacturing[disabled],
.vc_stopmanufacturing[disabled]:hover {
  background-image: url('/images/material_design/cancel.png');
}

.vc_stopmanufacturing,
.vc_stopmanufacturing:active,
.vc_stopmanufacturing.active {
  background-image: url('/images/material_design/blue/cancel.png');
}

.vc_filepicture,
.vc_filepicture:active,
.vc_filepicture.active {
  background-image: url('/images/material_design/blue/add_photo.png');
}

.vc_pass,
.vc_pass:active,
.vc_pass.active {
  background-image: url('/images/material_design/key.png') !important;
}

.btn.edit div,
.btn.edit-action div,
.btn.open-action div {
  background-image: url('/images/material_design/blue/pen-300.png') !important;
}

.btn.delete-action div {
  background-image: url('/images/material_design/blue/delete-300.png') !important;
}

.btn.duplicate-action div {
  background-image: url('/images/material_design/blue/duplicate-300.png') !important;
}

.btn.detail-action div,
.btn.orderDetail-action div {
  background-image: url('/images/material_design/blue/order_detail-300.png') !important;
}

.btn.downloadLabel-action div {
  background-image: url('/images/material_design/blue/label-300.png') !important;
}

.btn.preview div,
.btn.preview-action div {
  background-image: url('/images/blue/insole.png') !important;
}

.btn.change-password div {
  background-image: url('/images/material_design/blue/key-300.png') !important;
}

.btn.deactivate div {
  background-image: url('/images/material_design/blue/close-300.png') !important;
}

.btn-default,
.btn-gray,
.btn-dark {
  border: 1px solid var(--color-primary) !important;
  border-radius: 50px !important;
  background-color: var(--color-base) !important;
  color: var(--color-primary) !important;
}

.btn-default:focus,
.btn-default:hover,
.btn-default:active,
.btn-default.active,
.btn-gray:focus,
.btn-dark:focus,
.btn-gray:hover,
.btn-dark:hover {
  color: var(--color-secondary) !important;
  border-color: var(--color-secondary) !important;
  background-color: var(--color-base) !important;
}

.btn-dark:active,
.btn-dark.active,
.btn-gray:active,
.btn-gray.active {
  color: var(--color-base) !important;
  background-color: var(--color-secondary) !important;
  border-color: var(--color-secondary) !important;
}

.btn-default:focus svg,
.btn-default:hover svg,
.btn-default:active svg,
.btn-default.active svg,
.btn-gray:focus svg,
.btn-dark:focus svg,
.btn-gray:hover svg,
.btn-dark:hover svg {
  fill: var(--color-secondary) !important;
}

.btn-dark:active svg,
.btn-dark.active svg,
.btn-gray:active svg,
.btn-gray.active svg {
  fill: var(--color-base) !important;
}

.btn-theme {
  height: 9.40541667rem;
  border-radius: 12px !important;
  background-color: var(--color-blue-light) !important;
  color: var(--color-primary) !important;
  overflow-wrap: anywhere;
  text-transform: capitalize !important;
  font-weight: 700;
}

.page-content .btn-theme {
  background-size: 4rem;
  background-position: center 1.714rem;
  padding-bottom: 1.714rem;
  align-items: end;
}

.page-content .modal .btn-theme {
  background-size: 3rem;
  background-position: center 0.95rem;
  padding-bottom: 6px;
  align-items: center;
}

.btn-theme.disabled,
.btn-theme[disabled],
.btn-theme[disabled]:hover {
  background-color: var(--color-disabled) !important;
  color: var(--color-base) !important;
}

.btn.green,
.btn-theme.vc_next,
.btn-theme.vc_ok,
.btn-theme.vc_okWarning,
.btn-theme.vc_good,
.btn-theme.vc_bad,
.btn-theme.vc_adduser,
.btn-theme.vc_save,
.btn-theme.vc_pass,
.btn-theme.vc_addplugin,
.btn-theme.vc_milling,
.btn-theme.vc_milling2,
.btn-theme.vc_millingmachinecontroller,
.btn-theme.vc_webCAM {
  background-color: var(--color-primary) !important;
  color: var(--color-base) !important;
}

[ng-controller=reportCtrl] .vc_generatereport {
  background-image: url('/images/material_design/report.png');
  background-color: var(--color-primary) !important;
  color: var(--color-base) !important;
}

.btn.pink,
.red,
.red a,
.red a:hover {
  background-color: var(--color-blue-light) !important;
}

.btn.intakePlugin {
  background-color: var(--color-primary) !important;
  width: 9.40541667rem;
  height: 9.40541667rem;
}

.btn.intakePlugin > div {
  height: 100%;
  width: 100%;
  padding-top: 1.714rem;
  padding-bottom: 1.714rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.btn.intakePlugin > div > img {
  width: 4rem;
  height: 4rem;
}

.btn.intakePlugin > div > .intakePlugin-title {
  margin: 0.6rem 0 0 0;
  font-size: 0.8rem;
  font-weight: 700;
}

.intake-plugins-container,
.plugin-downloader {
  margin-left: auto !important;
  padding-right: 15px !important;
  padding-left: 15px !important;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.intakePlugin.active,
.intakePlugin:active {
  background: var(--color-primary-active) !important;
}

.btn-primary.anamnesis-pill:hover, 
.btn-primary.anamnesis-pill.active,
.btn-primary.anamnesis-pill.active:hover,
.btn-primary.anamnesis-pill.active:focus {
  background-color: var(--color-base) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

.vx-range-btn {
  border-color: var(--color-gray) !important;
  border-radius: 12px !important;
}

.btn[class*='-action'],
.btn.edit,
.btn.preview,
.btn.change-password,
.btn.deactivate {
  background-color: transparent !important;
}

.btn[class*='-action']:hover,
.btn.edit:hover,
.btn.preview:hover,
.btn.change-password:hover,
.btn.deactivate:hover {
  background-color: var(--color-blue-light) !important;
}

/* dropdown */
.vx-dropdown-menu {
  background-color: var(--color-base);
  border-color: var(--color-gray-light);
}

.vx-dropdown-menu > li > a {
  color: var(--color-text);
}

.vx-dropdown-menu > li > a:focus,
.vx-dropdown-menu > li > a:hover {
  color: var(--color-base);
  background-color: var(--color-primary-active);
}

/* User options */
.page-useroptions .input-group-btn > .btn {
  border-radius: 0 12px 12px 0 !important;
}

/* Product Management */
.page-product-management .vc_search {
  color: var(--color-base) !important;
  background-color: var(--color-primary) !important;
  background-image: url('/images/material_design/search.png');
}

/* Printer */
.vx-fieldset {
  border-radius: 12px;
}

/* APD plugin*/
.nvc_play,
.nvc_stop,
.nvc_pause,
.nvc_step,
.nvc_upload,
.nvc_mirror,
.nvc_swap,
.nvc_copyrl,
.nvc_copylr,
.nvc_loop {
  background-color: rgba(0, 66, 146, 0.8);
  color: var(--color-base) !important;
}

.nvc_play.active,
.nvc_play:active,
.nvc_stop.active,
.nvc_stop:active,
.nvc_pause.active,
.nvc_pause:active,
.nvc_step.active,
.nvc_step:active,
.nvc_upload.active,
.nvc_upload:active,
.nvc_swap.active,
.nvc_swap:active,
.nvc_copyrl.active,
.nvc_copyrl:active,
.nvc_copylr.active,
.nvc_copylr:active,
.nvc_mirror.active,
.nvc_mirror:active,
.nvc_loop.active,
.nvc_loop:active {
  background-color: var(--color-secondary);
}

/* page */
.page-content {
  padding-bottom: 4.5rem;
}

@media (min-width: 768px) {
  .page-content {
    padding-bottom: 1.5rem;
  }
}

/* navbar */
.navbar-brand {
  padding-top: 23px !important;
  padding-bottom: 23px !important;
}

.navbar-brand-logo {
  align-items: center;
  height: 100%;
}

.navbar .header-icon.mypanel-icon {
  --mypanel-icon-image: url('/images/vx_icons/material_design/home.svg');
  mask-image: var(--mypanel-icon-image);
  -webkit-mask-image: var(--mypanel-icon-image);
}

.navbar .header-icon.orderlist-icon {
  --orderlist-icon-image: url('/images/vx_icons/material_design/list.svg');
  mask-image: var(--orderlist-icon-image);
  -webkit-mask-image: var(--orderlist-icon-image);
}

.navbar .header-icon.checking-icon {
  --checking-icon-image: url('/images/vx_icons/material_design/checkbox.svg');
  mask-image: var(--checking-icon-image);
  -webkit-mask-image: var(--checking-icon-image);
}

.navbar .header-icon.language-icon {
  --language-icon-image: url('/images/vx_icons/material_design/language.svg');
  mask-image: var(--language-icon-image);
  -webkit-mask-image: var(--language-icon-image);
}

.navbar .header-icon.help-icon {
  --help-icon-image: url('/images/vx_icons/material_design/help.svg');
  mask-image: var(--help-icon-image);
  -webkit-mask-image: var(--help-icon-image);
}

.navbar .caret {
  display: none;
}

.navbar.navbar-theme {
  background-color: var(--color-base);
  box-shadow: 0 1px 0 var(--color-gray-light);
}

.navbar-btn {
  border-radius: 50px !important;
}

.navbar-theme .navbar-nav > .disabled > a,
.navbar-theme .navbar-nav > .disabled > a:hover,
.navbar-theme .navbar-nav > .disabled > a:focus {
  color: var(--color-disabled);
  background-color: transparent;
}

.navbar.navbar-theme div.icon {
  background-color: var(--color-primary);
}

.navbar.navbar-theme svg.icon {
  fill: var(--color-primary) !important;
}

.navbar-theme .navbar-nav.navbar-right .navbar-md-icon {
  transform: scale(0.4);
  background-color: var(--color-primary);
}

.navbar-theme .dropdown-menu > li > a,
.navbar-theme .navbar-nav > li > a {
  color: var(--color-text);
}

.navbar-theme .dropdown-menu {
  background-color: var(--color-base);
  border-color: var(--color-gray-light);
  border-radius: 12px !important;
}

.navbar-theme .dropdown-menu .divider {
  background-color: var(--color-gray-light);
}

.navbar-theme .navbar-nav > li > a:focus,
.navbar-theme .navbar-nav > .open > a:focus,
.navbar-theme .dropdown-menu > li > a:focus,
.navbar-theme .navbar-nav > .active > a:focus,
.navbar-theme .navbar-nav > .open > a,
.navbar-theme .navbar-nav > .active > a {
  background-color: var(--color-blue-light);
  color: var(--color-primary);
}

.navbar-theme .navbar-nav > li > a:hover,
.navbar-theme .navbar-nav > .open > a:hover,
.navbar-theme .dropdown-menu > li > a:hover,
.navbar-theme .navbar-nav > .active > a:hover,
.navbar-theme .navbar-nav > .active.not > a:hover {
  background-color: var(--color-primary);
  color: var(--color-base);
}

.navbar-theme .navbar-nav > li > a:hover div.icon,
.navbar-theme .navbar-nav > .open > a:hover div.icon,
.navbar-theme .dropdown-menu > li > a:hover div.icon,
.navbar-theme .navbar-nav > .active > a:hover div.icon {
  background-color: var(--color-base);
}

.navbar-theme .navbar-nav > li > a:hover svg.icon,
.navbar-theme .navbar-nav > .open > a:hover svg.icon,
.navbar-theme .dropdown-menu > li > a:hover svg.icon,
.navbar-theme .navbar-nav > .active > a:hover svg.icon {
  fill: var(--color-base) !important;
}

.navbar-theme.navbar-fixed-bottom {
  border-top: 1px solid var(--color-gray-light);
}

.navbar-theme .navbar-collapse {
  border-color: var(--color-gray-light);
  align-items: center;
}

.navbar-theme .navbar-text {
  color: var(--color-text);
}

.navbar-theme .navbar-toggle {
  border-color: var(--color-primary);
}

.navbar-theme .navbar-toggle .icon-bar {
  background-color: var(--color-primary);
}

.navbar-theme .navbar-toggle:hover,
.navbar-theme .navbar-toggle:focus {
  background-color: var(--color-primary);
}

.navbar-theme .navbar-toggle:hover .icon-bar,
.navbar-theme .navbar-toggle:focus .icon-bar {
  background-color: var(--color-base);
}

.navbar-theme .navbar-separator-bottom {
  border-bottom-color: var(--color-gray-light);
  box-shadow: none;
}

.navbar-theme .navbar-separator {
  border-top-color: var(--color-gray-light);
  box-shadow: none;
}

.navbar-steps li {
  display: flex;
  align-items: center;
}

.navbar-steps a {
  border-radius: 50px;
  padding: 6px 12px !important;
  line-height: normal !important;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
}

.navbar-steps svg {
  margin: 4px;
}

@media (min-width: 768px) {
  .navbar-theme .navbar-nav > .active > a,
  .navbar-theme .navbar-nav > .active > a:hover,
  .navbar-theme .navbar-nav > .active > a:focus {
    box-shadow: none;
  }
  .navbar-theme .navbar-nav.navbar-right > li {
    border-left-color: var(--color-gray-light);
  }
}

/* status bar */

.vx-status-bar {
  background-color: var(--color-base);
  border-top: 1px solid var(--color-gray);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.vx-status-bar-order,
.vx-status-bar-user {
  background-color: var(--color-base);
  color: var(--color-text);
  float: none;
  justify-content: center;
}

/* modal */
.modal-theme .modal-content {
  border-radius: 12px;
  color: var(--color-text);
  background: var(--color-base);
}

.modal-theme .modal-footer,
.modal-theme .modal-header,
.modal-theme .modal-content {
  border: 0;
}

.modal-theme hr {
  border-color: var(--color-gray);
}

.modal-theme .modal-header .close {
  color: var(--color-gray);
  text-shadow: none;
  opacity: 1;
}

.modal-header > img {
  max-width: 210px;
}

.modal-header h4 {
  font-weight: 700;
}

/* tabs */
.tabs-light.nav-tabs {
  border-bottom-color: var(--color-blue-light);
}

.tabs-light.nav-tabs > li > a {
  color: var(--color-primary);
  border-color: var(--color-blue-light);
  border-bottom-color: var(--color-blue-light);
}

.tabs-light.nav-tabs > li > a:hover,
.tabs-light.nav-tabs > li > a:focus {
  background-color: var(--color-blue-light);
  border-color: var(--color-primary);
  border-bottom-color: transparent;
  color: var(--color-primary);
}

.tabs-light.nav-tabs > li.active > a,
.tabs-light.nav-tabs > li.active > a:hover,
.tabs-light.nav-tabs > li.active > a:focus {
  background-color: var(--color-blue-light);
  border-color: var(--color-primary);
  border-bottom-color: transparent;
  color: var(--color-primary);
}

/* product */
.btn.product {
  background-color: var(--color-blue-light) !important;
  border-color: transparent !important;
  border-radius: 12px !important;
  color: var(--color-primary) !important;
}

.btn.product:hover {
  background-color: var(--color-primary) !important;
  color: var(--color-base) !important;
}

/* .btn.product span {
  font-weight: 700;
  text-transform: capitalize;
} */

.product-img {
  max-width: 100%;
  border-radius: 12px;
}

/* editor */
.editor .form-control {
  border-radius: 12px !important;
}

.editor .vx-range-btn {
  font-size: 8px !important;
}

.editor-header {
  background-color: var(--color-primary);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.editor-header svg {
  color: var(--color-base);
  fill: var(--color-base) !important;
}

.editor-body {
  background-color: var(--color-base);
}

.editor-body .editor-btn {
  background-color: var(--color-grey-blue-dark);
  border-color: var(--color-grey-blue-dark);
  color: var(--color-base);
}

.editor-body .editor-btn:hover,
.editor-body .editor-btn:focus,
.editor-body .editor-btn.focus {
  background-color: var(--color-grey-blue);
  border-color: var(--color-grey-blue);
}

.editor-body .editor-btn.active {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.editor-footer {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  padding: 8px !important;
  border-color: transparent !important;
}

.editor-footer .btn-success,
.editor-footer .btn-success:active,
.editor-footer .btn-success:focus {
  background-color: var(--color-accent);
}

.editor-btn {
  background-color: var(--color-gray);
  border-color: var(--color-gray);
  color: var(--color-base);
}

.editor-btn:hover,
.editor-btn:focus,
.editor-btn.focus {
  background-color: var(--color-gray-light);
  border-color: var(--color-gray-light);
}

.editor-btn.active {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

/* design modal */
.design-modal {
  background-color: var(--color-modal-background);
}

.design-modal .modal-header {
  background-color: var(--color-blue-light);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.design-modal .modal-title {
  color: var(--color-primary);
}

.design-modal .modal-content {
  border-radius: 12px;
  background-color: var(--color-base);
}

.design-modal .modal-body {
  color: var(--color-primary);
}

.design-modal .modal-body label {
  text-align: start;
}

.design-modal .modal-footer {
  padding: 20px;
}

.modal-body .design-options-centered {
  display: flex;
  flex-wrap: wrap;
}

.design-option-btn,
.design-option-btn:active {
  background-color: rgba(2, 38, 61, 0.4);
  color: var(--color-base) !important;
  font-weight: 700;
  height: 96% !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.design-option-btn:hover {
  background-color: rgba(2, 38, 61, 0.4);
  opacity: 0.75;
}

.design-option-btn > span {
  white-space: pre-wrap !important;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex-grow: 1;
}

/* cad */
.cad-canvas-container {
  height: calc(100vh - 100px);
}

.module-btn:hover {
  background-color: var(--color-gray) !important;
}

.design-option-btn.active,
.cad-toolbar .btn.active,
.cad-tools .btn.active,
.cad-op-btn.active,
.module-btn.active,
.subproduct-btn.active,
.product.active {
  background-color: var(--color-secondary) !important;
  border-color: transparent !important;
  color: var(--color-base) !important;
}

.design-option-btn.active:hover,
.cad-toolbar .btn.active:hover,
.cad-tools .btn.active:hover,
.cad-op-btn.active:hover,
.module-btn.active:hover,
.subproduct-btn.active:hover,
.product.active:hover {
  background-color: var(--color-cyan-light) !important;
}

.cad-tools .btn.active {
  -webkit-filter: contrast(1);
  filter: contrast(1);
}

.cad-btn.btn-success,
.cad-btn.btn-success.active,
.cad-btn.btn-success:active,
.cad-btn.btn-success.focus,
.cad-btn.btn-success:focus,
.cad-btn.btn-success.active.focus,
.cad-btn.btn-success.active:focus,
.cad-btn.btn-success:active.focus,
.cad-btn.btn-success:active:focus {
  border-radius: 12px !important;
  background-color: var(--color-accent) !important;
  border-color: transparent!important;
}

.cad-btn.btn-success:hover,
.cad-btn.btn-success.focus:hover,
.cad-btn.btn-success:focus:hover,
.cad-btn.btn-success.active:hover,
.cad-btn.btn-success:active:hover {
  background-color: var(--color-yellow-light) !important;
  border-color: transparent!important;
}

/* stepper */

.vx-steps li.current > * {
  color: var(--color-primary) !important;
}

@media only screen and (min-width: 768px) {
  .vx-steps li::after,
  .vx-steps.text-top li > *::before,
  .vx-steps.text-bottom li > *::before {
    background-color: var(--color-gray-light);
  }

  .vx-steps.text-center li.current > *,
  .vx-steps.text-center li.visited > *,
  .vx-steps.text-top li.visited > *::before,
  .vx-steps.text-top li.current > *::before,
  .vx-steps.text-bottom li.visited > *::before,
  .vx-steps.text-bottom li.current > *::before,
  .vx-steps li.visited::after {
    background-color: var(--color-primary) !important;
  }

  .vx-steps.text-top a:hover,
  .vx-steps.text-bottom a:hover {
    color: var(--color-primary) !important;
  }

  .vx-steps.text-top a:hover::before,
  .vx-steps.text-bottom a:hover::before {
    box-shadow: 0 0 0 3px rgba(0, 172, 233, 0.3);
  }
}

/* webplugin */
.webplugin-sidebar-footer,
.webplugin-sidebar {
  background-color: var(--color-base);
}

.webplugin-sidebar-footer {
  border-color: var(--color-gray-light);
}

.webplugin-help {
  background-color: var(--color-base);
}

.webplugin-sidebar .webplugin-logo {
  margin-bottom: 38px !important;
}

/* APD fix */
.webplugin .rm-theme-dark {
  border-color: var(--color-gray-light);
  background-color: var(--color-base);
}

.webplugin .rm-theme-dark .rm-list-item {
  border-bottom-color: var(--color-gray-light);
}

.webplugin .rm-icon svg {
  fill: var(--color-primary) !important;
}

/* treatment form */
.tf-panel {
  border-color: var(--color-gray-light);
}

.tf-panel > .tf-panel-heading {
  background-color: var(--color-base);
}

.tf-panel-title {
  color: var(--color-primary);
}

/* ---------------------------------------------------------- */
/*                        Inputs                              */
/* ---------------------------------------------------------- */
input[type='checkbox']:after,
.checkbox input[type='checkbox']:after,
.checkbox-inline input[type='checkbox']:after {
  border-radius: 35%;
  background-color: var(--color-base);
  border: 1px solid var(--color-gray);
}

input[type='checkbox']:checked:before,
.checkbox input[type='checkbox']:checked:before,
.checkbox-inline input[type='checkbox']:checked:before {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}

input[type='checkbox']:checked:after,
.checkbox input[type='checkbox']:checked:after,
.checkbox-inline input[type='checkbox']:checked:after {
  border-radius: 35%;
  background-color: var(--color-base);
  border-color: var(--color-primary);
}

.form-control {
  border-radius: 12px;
  border-color: var(--color-gray-light);
  background-color: var(--color-base);
  color: var(--color-text);
}

.form-control:focus {
  border-color: var(--color-primary);
  background-color: var(--color-base);
  box-shadow: none;
}

.control-label {
  color: var(--color-primary);
}

.page-content:not(.page-useroptions) .form-control {
  min-height: 52px !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  padding-left: 16px !important;
}

.page-content:not(.page-useroptions) input.form-control,
.page-content:not(.page-useroptions) textarea.form-control {
  padding-right: 16px !important;
}

.page-content:not(.page-useroptions) :not(.radio) .form-group {
  display: flex;
  flex-direction: column;
  justify-content: flex-start !important;
}

.page-content:not(.page-useroptions) :not(.radio) .form-group div,
.page-content:not(.page-useroptions) :not(.radio) .form-group .control-label {
  width: 100% !important;
}

.page-product-management .form-group {
  margin-bottom: 20px;
}

.page-product-management .control-label {
  margin-top: 0px;
}

/* ---------------------------------------------------------- */
/*                       Buttons                              */
/* ---------------------------------------------------------- */
.btn-success,
.btn-primary {
  color: var(--color-base) !important;
  border-radius: 50px !important;
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.btn-success.active,
.btn-success.focus,
.btn-success:active,
.btn-success:focus,
.btn-success:hover,
.btn-success.active.focus,
.btn-success.active:focus,
.btn-success.active:hover,
.btn-success:active.focus,
.btn-success:active:focus,
.btn-success:active:hover,
.open > .dropdown-toggle.btn-success.focus,
.open > .dropdown-toggle.btn-success:focus,
.open > .dropdown-toggle.btn-success:hover .open > .dropdown-toggle.btn-success,
.btn-primary.active,
.btn-primary.focus,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover,
.btn-primary.active.focus,
.btn-primary.active:focus,
.btn-primary.active:hover,
.btn-primary:active.focus,
.btn-primary:active:focus,
.btn-primary:active:hover,
.open > .dropdown-toggle.btn-primary.focus,
.open > .dropdown-toggle.btn-primary:focus,
.open > .dropdown-toggle.btn-primary:hover .open > .dropdown-toggle.btn-primary {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.btn-info {
  background-color: var(--color-base);
  border-radius: 50px !important;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* .btn-default.active,
.btn-default.focus,
.btn-default:active,
.btn-default:focus,
.btn-default:hover,
.btn-default.active.focus,
.btn-default.active:focus,
.btn-default.active:hover,
.btn-default:active.focus,
.btn-default:active:focus,
.btn-default:active:hover,
.open > .dropdown-toggle.btn-default.focus,
.open > .dropdown-toggle.btn-default:focus,
.open > .dropdown-toggle.btn-default, */
.btn-info.active,
.btn-info.focus,
.btn-info:active,
.btn-info:focus,
.btn-info:hover,
.btn-info.active.focus,
.btn-info.active:focus,
.btn-info.active:hover,
.btn-info:active.focus,
.btn-info:active:focus,
.btn-info:active:hover,
.open > .dropdown-toggle.btn-info.focus,
.open > .dropdown-toggle.btn-info:focus,
.open > .dropdown-toggle.btn-info {
  background-color: var(--color-primary);
  color: var(--color-base);
}

/* My Panel */
.mypanel-item {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  background: var(--color-blue-light) !important;
  color: var(--color-primary) !important;
}

.mypanel-item:hover,
.mypanel-item.orderpatient,
.mypanel-item.patientlist,
.mypanel-item.orderlist,
.mypanel-item.shoppingcart {
  background: var(--color-primary) !important;
  color: var(--color-base) !important;
}

.mypanel-item.orderpatient:hover,
.mypanel-item.patientlist:hover,
.mypanel-item.orderlist:hover,
.mypanel-item.shoppingcart:hover {
  background: var(--color-blue-light) !important;
  color: var(--color-primary) !important;
}

.mypanel-img {
  min-width: 25px;
  min-height: 25px;
}

.mypanel-item.orderpatient .mypanel-img{
  background-image: url('/images/material_design/orderinsole.png') !important;
}

.mypanel-item.orderpatient:hover .mypanel-img{
  background-image: url('/images/material_design/blue/orderinsole.png') !important;
}

.mypanel-item.patientlist .mypanel-img {
  background-image: url('/images/material_design/patient_data.png') !important;
}

.mypanel-item.patientlist:hover .mypanel-img {
  background-image: url('/images/material_design/blue/patient_data.png') !important;
}

.mypanel-item.orderlist .mypanel-img {
  background-image: url('/images/material_design/overview.png') !important;
}

.mypanel-item.orderlist:hover .mypanel-img {
  background-image: url('/images/material_design/blue/overview.png') !important;
}

.mypanel-item.shoppingcart .mypanel-img {
  background-image: url('/images/material_design/shopping_basket.png') !important;
}

.mypanel-item.shoppingcart:hover .mypanel-img {
  background-image: url('/images/material_design/blue/shopping_basket.png') !important;
}

.mypanel-item.products .mypanel-img {
  background-image: url('/images/blue/general.png') !important;
}

.mypanel-item.products:hover .mypanel-img {
  background-image: url('/images/general/general.png') !important;
}

.mypanel-item.useroptions .mypanel-img {
  background-image: url('/images/material_design/blue/user.png') !important;
}

.mypanel-item.useroptions:hover .mypanel-img {
  background-image: url('/images/material_design/user.png') !important;
}

.mypanel-item.users .mypanel-img {
  background-image: url('/images/material_design/blue/group.png') !important;
}

.mypanel-item.users:hover .mypanel-img {
  background-image: url('/images/material_design/group.png') !important;
}

.mypanel-item.groups .mypanel-img {
  background-image: url('/images/material_design/blue/groups.png') !important;
}

.mypanel-item.groups:hover .mypanel-img {
  background-image: url('/images/material_design/groups.png') !important;
}

.mypanel-item.checking .mypanel-img {
  background-image: url('/images/material_design/blue/checking.png') !important;
}

.mypanel-item.checking:hover .mypanel-img {
  background-image: url('/images/material_design/checking.png') !important;
}

.mypanel-item.manufacturing .mypanel-img {
  background-image: url('/images/material_design/blue/manufacturing.png') !important;
}

.mypanel-item.manufacturing:hover .mypanel-img {
  background-image: url('/images/material_design/manufacturing.png') !important;
}

.mypanel-item.batches .mypanel-img {
  background-image: url('/images/material_design/blue/batches.png') !important;
}

.mypanel-item.batches:hover .mypanel-img {
  background-image: url('/images/material_design/batches.png') !important;
}

.mypanel-item.reports .mypanel-img {
  background-image: url('/images/material_design/blue/report.png') !important;
}

.mypanel-item.reports:hover .mypanel-img {
  background-image: url('/images/material_design/report.png') !important;
}

.mypanel-item.tutorials .mypanel-img {
  background-image: url('/images/material_design/blue/videos.png') !important;
}

.mypanel-item.tutorials:hover .mypanel-img {
  background-image: url('/images/material_design/videos.png') !important;
}

.mypanel-item.downloads .mypanel-img {
  background-image: url('/images/material_design/blue/download.png') !important;
}

.mypanel-item.downloads:hover .mypanel-img {
  background-image: url('/images/material_design/download.png') !important;
}

.mypanel-title {
  text-transform: lowercase;
  display: inline-block;

  margin: 0 !important;
  letter-spacing: normal !important;
  font-weight: bold !important;
  font-weight: 700 !important;
}

.mypanel-title::first-letter {
  text-transform: uppercase !important;
}

.mypanel-banner {
  background: var(--color-base) !important;
  color: var(--color-text) !important;
  text-align: center !important;
  font-size: 16px !important;
}

/* Overrides  panel */
.panel-success {
  border-color: var(--color-gray-light);
}

.panel-success > .panel-heading {
  color: var(--color-text);
  background-color: var(--color-gray-light);
  border-color: var(--color-gray-light);
}

.panel {
  border-radius: 12px;
}

.panel .panel-heading {
  border-radius: 12px 12px 0 0;
  background-color: var(--color-blue-light);
  color: var(--color-primary);
  font-weight: 700;
}

.panel .btn-default:hover,
.panel .btn-dark:hover {
  border-color: transparent !important;
  background-color: var(--color-primary) !important;
  color: var(--color-base) !important;
}

.panel .form-control:disabled,
.panel .form-control.disabled,
.panel .form-control[disabled],
.panel .form-control[disabled]:hover {
  background-color: var(--color-disabled);
}

.panel > table td {
  padding-left: 15px !important;
}

.panel .panel-heading > h4{
  color: var(--color-primary) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}

/* pagination */

.pagination * {
  border-color: transparent !important;
  border-radius: 50px !important;
}

.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.rows-per-page {
  width: fit-content;
  display: inline-flex;
  gap: 4px;
}

/* ---------------------------------------------------------- */
/*                   Commercial Styles                        */
/* ---------------------------------------------------------- */

/* ---------------------------------------------------------- */
/*                         Login                              */
/* ---------------------------------------------------------- */
.com-login-form {
  border-radius: 12px;
  background-color: var(--color-gray-lighter);
  border: 1px solid var(--color-gray);
  max-width: 320px;
}

.com-login-title {
  border-bottom: 0;
  color: var(--color-primary);
}

.com-login-btn,
.com-login-input {
  height: 45px;
}

.com-login-btn {
  color: var(--color-base);
  border-radius: 50px !important;
  background-color: var(--color-primary);
  font-weight: 700;
}

.com-login-btn:hover {
  background-color: #0f3273 !important;
}

a.com-login-btn {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 43px;
  border: 1px solid var(--color-primary) !important;
  border-radius: 50px !important;
  background-color: var(--color-base) !important;
  color: var(--color-primary) !important;
  font-weight: 700;
}

a.com-login-btn.active,
a.com-login-btn.focus,
a.com-login-btn:active,
a.com-login-btn:focus,
a.com-login-btn:hover,
a.com-login-btn.active.focus,
a.com-login-btn.active:focus,
a.com-login-btn.active:hover,
a.com-login-btn:active.focus,
a.com-login-btn:active:focus,
a.com-login-btn:active:hover {
  color: var(--color-secondary) !important;
  border-color: var(--color-secondary) !important;
  background-color: var(--color-base) !important;
}

.home-login-container {
  border-radius: 12px;
  margin-bottom: 30px;
}

.home-info {
  border-radius: 12px;
  background-color: var(--color-blue-light);
}

.home-info p {
  color: var(--color-text);
}

.home-info .row {
  display: flex;
  flex-wrap: wrap;
}

.home-info-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.home-info-text {
  flex: 1 1 auto;
}

.home-info-footnote {
  margin-top: auto;
  align-self: flex-end;
}

/* ---------------------------------------------------------- */
/*                          lang                              */
/* ---------------------------------------------------------- */
.com-lang-link {
  padding: 4px 6px;
  line-height: 1;
  color: var(--color-primary);
  border-radius: 50px !important;
}

.com-lang-link.active,
.com-lang-link:hover {
  background: var(--color-primary);
  color: var(--color-base);
  text-decoration: none;
}


/* ---------------------------------------------------------- */
/*              ionicapp styles & Overides                    */
/* ---------------------------------------------------------- */

.positive,
a.positive,
.button.button-positive.button-clear,
.tab-item.activated.tab-item-positive,
.tab-item.active.tab-item-positive,
.tab-item.tab-item-active.tab-item-positive {
  color: #133e8f;
}

.ionic .checkbox input:checked + .checkbox-icon:before,
.ionic .checkbox input:checked:before {
  background: #133e8f;
  border-color: #133e8f;
}

.button.button-positive {
  background-color: #133e8f;
}

.button.button-positive.activated,
.button.button-positive.active {
  background-color: #133e8f;
}

.button.button-positive.button-clear.activated,
.button.button-positive.button-clear.active {
  color: white;
  opacity: 1;
}

.ionic .vx-steps li.current > * {
  color: #133e8f;
}

.ionic .vx-steps.text-top li.visited > *::before,
.ionic .vx-steps.text-top li.current > *::before,
.ionic .vx-steps.text-bottom li.visited > *::before,
.ionic .vx-steps.text-bottom li.current > *::before {
  background-color: #133e8f;
}

.ionic .vx-steps li.visited::after {
  background-color: #133e8f;
}

.tf-item-icn.positive-bg {
  background: #133e8f;
}

.vx-ion-login .dark-bg {
  background-color: white;
}