ul.resp-tabs-list, p {
  margin: 0px;
  padding: 0px; }

.resp-tabs-list li {
  cursor: pointer;
  display: inline-block;
  float: left;
  font-size: 17px;
  padding: 53px 0 6px;
  width: 25%;
  color: #9f9fa1;
  border-top: 2px solid;
  text-align: center;
  border-radius: 2px; }

.resp-tabs-container {
  padding: 0px;
  background-color: #fff;
  clear: left; }

h2.resp-accordion {
  cursor: pointer;
  padding: 5px;
  display: none; }

.resp-tab-content {
  display: none; }

.resp-tab-active {
  border-bottom: none;
  background-color: #fff;
  color: white !important; }

.resp-content-active, .resp-accordion-active {
  display: block; }

h2.resp-accordion {
  font-size: 13px;
  border: 1px solid #c1c1c1;
  border-top: 0px solid #c1c1c1;
  margin: 0px;
  padding: 10px 15px; }

h2.resp-tab-active {
  border-bottom: 0px solid #c1c1c1 !important;
  margin-bottom: 0px !important;
  padding: 10px 15px !important; }

h2.resp-tab-title:last-child {
  border-bottom: 12px solid #c1c1c1 !important;
  background: blue; }

/*-----------Vertical tabs-----------*/
.resp-vtabs ul.resp-tabs-list {
  float: left;
  width: 30%; }

.resp-vtabs .resp-tabs-list li {
  display: block;
  padding: 15px 15px !important;
  margin: 0 0 4px;
  cursor: pointer;
  float: none; }

.resp-vtabs .resp-tabs-container {
  padding: 0px;
  background-color: #fff;
  border: 1px solid #c1c1c1;
  float: left;
  width: 68%;
  min-height: 250px;
  border-radius: 4px;
  clear: none; }

.resp-vtabs .resp-tab-content {
  border: none;
  word-wrap: break-word; }

.resp-vtabs li.resp-tab-active {
  position: relative;
  z-index: 1;
  margin-right: -1px !important;
  padding: 14px 15px 15px 14px !important;
  border-top: 1px solid;
  border: 1px solid #5AB1D0 !important;
  border-left: 4px solid #5AB1D0 !important;
  margin-bottom: 4px !important;
  border-right: 1px #FFF solid !important; }

.resp-arrow {
  width: 0;
  height: 0;
  float: right;
  margin-top: 3px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 12px solid #c1c1c1; }

h2.resp-tab-active span.resp-arrow {
  border: none;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 12px solid #9B9797; }

/*-----------Accordion styles-----------*/
h2.resp-tab-active {
  background: #DBDBDB;
  /* !important;*/ }

.resp-easy-accordion h2.resp-accordion {
  display: block; }

.resp-easy-accordion .resp-tab-content {
  border: 1px solid #c1c1c1; }

.resp-easy-accordion .resp-tab-content:last-child {
  border-bottom: 1px solid #c1c1c1;
  /* !important;*/ }

.resp-jfit {
  width: 100%;
  margin: 0px; }

.resp-tab-content-active {
  display: block; }

h2.resp-accordion:first-child {
  border-top: 1px solid #c1c1c1;
  /* !important;*/ }

/*Here your can change the breakpoint to set the accordion, when screen resolution changed*/
@media only screen and (max-width: 768px) {
  ul.resp-tabs-list {
    display: none; }
  h2.resp-accordion {
    display: block; }
  .resp-vtabs .resp-tab-content {
    border: 1px solid #C1C1C1; }
  .resp-vtabs .resp-tabs-container {
    border: none;
    float: none;
    width: 100%;
    min-height: 100px;
    clear: none; }
  .resp-accordion-closed {
    display: none !important; }
  .resp-vtabs .resp-tab-content:last-child {
    border-bottom: 1px solid #c1c1c1 !important; } }

/* ============================================================
  COMMON
============================================================ */
#wrapper {
  min-width: 600px; }

.settings {
  display: table;
  width: 100%; }

.settings .row {
  display: table-row; }

.settings .question,
.settings .switch {
  display: table-cell;
  vertical-align: middle;
  padding: 10px; }

.settings .question {
  width: 600px;
  font-family: "Roboto Slab", serif;
  font-size: 20px; }

/* ============================================================
  COMMON
============================================================ */
.cmn-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden; }

.cmn-toggle + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

/* ============================================================
  SWITCH 1 - ROUND
============================================================ */
input.cmn-toggle-round + label {
  background-color: #dddddd;
  border-radius: 62px;
  height: 38px;
  padding: 19px;
  width: 117px;
  float: left;
  margin: 0 15px; }

input.cmn-toggle-round + label:before,
input.cmn-toggle-round + label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: ""; }

input.cmn-toggle-round + label:before {
  right: 1px;
  background-color: #f1f1f1;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  -ms-border-radius: 60px;
  -o-border-radius: 60px;
  border-radius: 60px;
  -webkit-transition: background 0.4s;
  -moz-transition: background 0.4s;
  -o-transition: background 0.4s;
  transition: background 0.4s; }

input.cmn-toggle-round + label:after {
  width: 35px;
  background-color: #fff;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  -webkit-transition: margin 0.4s;
  -moz-transition: margin 0.4s;
  -o-transition: margin 0.4s;
  transition: margin 0.4s; }

input.cmn-toggle-round:checked + label:before {
  background-color: limegreen; }

input.cmn-toggle-round:checked + label:after {
  margin-left: 79px; }

/* ============================================================
  SWITCH 2 - ROUND FLAT
============================================================ */
input.cmn-toggle-round-flat + label {
  padding: 2px;
  width: 120px;
  height: 60px;
  background-color: #dddddd;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  -ms-border-radius: 60px;
  -o-border-radius: 60px;
  border-radius: 60px;
  -webkit-transition: background 0.4s;
  -moz-transition: background 0.4s;
  -o-transition: background 0.4s;
  transition: background 0.4s; }

input.cmn-toggle-round-flat + label:before,
input.cmn-toggle-round-flat + label:after {
  display: block;
  position: absolute;
  content: ""; }

input.cmn-toggle-round-flat + label:before {
  top: 2px;
  left: 2px;
  bottom: 2px;
  right: 2px;
  background-color: #fff;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  -ms-border-radius: 60px;
  -o-border-radius: 60px;
  border-radius: 60px;
  -webkit-transition: background 0.4s;
  -moz-transition: background 0.4s;
  -o-transition: background 0.4s;
  transition: background 0.4s; }

input.cmn-toggle-round-flat + label:after {
  top: 4px;
  left: 4px;
  bottom: 4px;
  width: 52px;
  background-color: #dddddd;
  -webkit-border-radius: 52px;
  -moz-border-radius: 52px;
  -ms-border-radius: 52px;
  -o-border-radius: 52px;
  border-radius: 52px;
  -webkit-transition: margin 0.4s, background 0.4s;
  -moz-transition: margin 0.4s, background 0.4s;
  -o-transition: margin 0.4s, background 0.4s;
  transition: margin 0.4s, background 0.4s; }

input.cmn-toggle-round-flat:checked + label {
  background-color: #8ce196; }

input.cmn-toggle-round-flat:checked + label:after {
  margin-left: 60px;
  background-color: #8ce196; }

/* ============================================================
  SWITCH 3 - YES NO
============================================================ */
input.cmn-toggle-yes-no + label {
  padding: 2px;
  width: 120px;
  height: 60px; }

input.cmn-toggle-yes-no + label:before,
input.cmn-toggle-yes-no + label:after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  color: #fff;
  font-family: "Roboto Slab", serif;
  font-size: 20px;
  text-align: center;
  line-height: 60px; }

input.cmn-toggle-yes-no + label:before {
  background-color: #dddddd;
  content: attr(data-off);
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  -o-transition: -o-transform 0.5s;
  transition: transform 0.5s;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden; }

input.cmn-toggle-yes-no + label:after {
  background-color: #8ce196;
  content: attr(data-on);
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  -o-transition: -o-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden; }

input.cmn-toggle-yes-no:checked + label:before {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg); }

input.cmn-toggle-yes-no:checked + label:after {
  -webkit-transform: rotateY(0);
  -moz-transform: rotateY(0);
  -ms-transform: rotateY(0);
  -o-transform: rotateY(0);
  transform: rotateY(0); }

/* Main component css*/
.barcode-input-wrapper {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  display: inline-block;
  padding: 4px 6px;
  color: #555;
  vertical-align: middle;
  line-height: 11px;
  border-radius: 4px;
  width: 26em; }

.barcode-input-wrapper input {
  border: none;
  box-shadow: none;
  outline: none;
  background-color: transparent;
  position: relative;
  font-size: 350%;
  padding: 1px 3px;
  align-self: center;
  vertical-align: top;
  width: 1.2em;
  height: 1.1em;
  max-width: inherit; }

.error-label {
  font-size: 90%;
  color: red; }

/* Custom input component */
.barcode-input-wrapper input.prefix {
  text-align: right; }

.barcode-input-wrapper input.reduce-input {
  width: 10% !important; }

/* Button panel */
.button-panel {
  padding-top: .2em; }

.button-panel .dropdown-trigger {
  font-weight: normal; }

.button-panel .dropdown-trigger:hover {
  color: #DC6432;
  cursor: pointer; }

.button-panel .custom-button:hover {
  background-color: #DC6432;
  cursor: pointer; }

/* Special character component */
.custom-button {
  position: relative;
  display: inline-block;
  padding: 0.2em 0.6em 0.3em;
  height: 2em;
  width: 4em;
  font-size: 200%;
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: normal;
  white-space: nowrap;
  border-radius: 0.25em;
  background-color: #929598;
  border-right: transparent 1px solid;
  border-top: transparent 1px solid;
  border-left: transparent 1px solid;
  border-bottom: transparent 1px solid; }

.custom-button.suffix {
  position: relative;
  vertical-align: top; }

.custom-button.prefix {
  position: relative;
  vertical-align: top; }

.custom-button.placeholder {
  background-color: #ededed;
  color: #ccc;
  border-color: #ccc;
  border-style: dashed;
  line-height: normal; }

.custom-button.has-value {
  width: 15%; }

.custom-button.input-box {
  cursor: text; }

.custom-button .text-content {
  font-size: 135%;
  line-height: normal;
  margin-left: -0.1em; }

.custom-button .placeholder-text {
  line-height: 1.7em;
  margin-left: -0.1em; }

.custom-button:hover.removable {
  border-color: #DC6432; }

.custom-button .remove {
  display: none; }

.custom-button:hover .remove {
  cursor: pointer;
  background-color: #DC6432;
  border-radius: 50%;
  font-size: 50%;
  margin-left: -.85em;
  margin-top: -.25em;
  padding: .5em;
  position: absolute;
  display: block; }

/* Specific button styles */
.custom-button .barcode {
  color: white;
  margin-top: -0.1em; }

.custom-button .backspace {
  color: white;
  margin-top: -3.1em;
  margin-left: -0.1em; }

.custom-button .backspace .fa-long-arrow-left {
  margin-top: -3em; }

.custom-button .backspace-text {
  font-size: 45%; }

.custom-button .tab {
  color: white;
  margin-top: -.7em;
  margin-left: .1em; }

.custom-button .tab .fa-long-arrow-left {
  margin-top: 0.4em; }

.custom-button .tab-text {
  font-size: 50%; }

.custom-button .vertical-tab {
  color: white;
  margin-top: -.9em;
  margin-left: 1.4em; }

.custom-button .vertical-tab .fa-long-arrow-left {
  margin-top: 1.6em;
  margin-left: .4em; }

.custom-button .vertical-tab .fa-long-arrow-right {
  margin-top: 1.2em;
  margin-left: .4em; }

.custom-button .vertical-tab-text {
  font-size: 50%; }

.custom-button .enter {
  color: white;
  font-size: 50%; }

.custom-button .line-feed {
  color: white;
  font-size: 50%; }

.ember-modal-overlay {
  height: 100vh;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 50; }

.ember-modal-dialog {
  z-index: 50;
  position: fixed; }
  .ember-modal-dialog.ember-modal-dialog-in-place {
    position: relative; }

.ember-modal-dialog {
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 0 10px #222;
  padding: 10px; }

.ember-modal-overlay.translucent {
  background-color: rgba(128, 128, 128, 0.77); }

.advanced-formatting-table .only-mobile {
  display: none; }

.advanced-formatting-table .error {
  color: #ed2f2f; }

.advanced-formatting-table .error-message {
  color: #ff9c73; }

.advanced-formatting-table .action:hover {
  color: #DC6432;
  cursor: pointer; }

.advanced-formatting-table .inactive {
  color: lightgrey; }

.advanced-formatting-table .order-column-header {
  width: 8%; }

.advanced-formatting-table .conditions-column-header {
  width: 50%; }

.advanced-formatting-table .actions-column-header {
  width: 40%; }

.advanced-formatting-table td {
  vertical-align: top !important; }

.advanced-formatting-table .remove-rule-column {
  vertical-align: inherit !important;
  border-left: 1px solid lightgrey !important; }

.advanced-formatting-table .add-rule-row {
  border-top: 1px solid lightgrey !important; }

.advanced-formatting-table .remove-rule-column .fa-trash {
  font-size: 150%; }

.advanced-formatting-table .disabled {
  color: lightgrey; }

.action-input .action-value, .condition-input .action-value {
  color: white; }
  .action-input .action-value span, .condition-input .action-value span {
    background-color: #a4a6aa;
    color: white;
    padding: 2px;
    border-radius: 3px;
    border: 1px solid white;
    font-size: 10px;
    font-weight: bold;
    margin: 0 3px; }

.action-input .arrows {
  margin-left: -15px; }

.action-input .actions .fa-trash {
  margin-left: 5px; }

.btn-success,
.condition-input .form-control,
.ember-power-select-trigger {
  margin-top: 0.5em; }
  .btn-success.mobile,
  .condition-input .form-control.mobile,
  .ember-power-select-trigger.mobile {
    margin-top: 0;
    margin-left: 5px; }

.edit-mode-icon {
  padding: 1em; }

.condition-input .fa-edit {
  font-size: 85%; }

.conditions-table .condition-column {
  display: flex; }

.conditions-table {
  margin-bottom: 0; }

.conditions-table tr {
  border: 1px solid grey;
  background-color: #929499;
  border-radius: 10px;
  display: inline-flex;
  width: 100%;
  margin-bottom: 1em; }

.conditions-table .condition-container {
  width: 90%;
  margin: 0 auto; }

.rule-table-row {
  border-top: 1px solid lightgrey; }

.rule-table-row .add-condition {
  background-color: white;
  color: #DC6432; }

.rule-table-row .add-condition.disabled {
  background-color: white;
  color: #aaaaaa; }

.rule-table-row .add-condition.action:hover {
  background-color: #DC6432;
  color: white; }

/* Keyboard component*/
.screen-keyboard-container {
  width: 350px;
  height: 250px; }

@media only screen and (max-width: 350px) {
  .screen-keyboard-container {
    width: 100%;
    height: 250px; } }

.screen-keyboard input {
  margin-left: 0; }

@media only screen and (max-width: 760px) {
  .advanced-formatting-table .only-desktop {
    display: none; }
  .advanced-formatting-table .only-mobile {
    display: flex; }
  .advanced-formatting-table table,
  .advanced-formatting-table tbody,
  .advanced-formatting-table td,
  .advanced-formatting-table th,
  .advanced-formatting-table thead,
  .advanced-formatting-table tr {
    display: block; }
  .advanced-formatting-table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px; }
  .advanced-formatting-table tr {
    border: 1px solid #ccc; }
  .advanced-formatting-table td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%; }
  .advanced-formatting-table td:before {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap; } }

.ui-keyboard {
  position: relative !important; }

.ember-basic-dropdown {
  position: relative; }

.ember-basic-dropdown, .ember-basic-dropdown-content, .ember-basic-dropdown-content * {
  box-sizing: border-box; }

.ember-basic-dropdown-content {
  position: absolute;
  width: auto;
  z-index: 1000;
  background-color: #ffffff; }

.ember-basic-dropdown-content--left {
  left: 0; }

.ember-basic-dropdown-content--right {
  right: 0; }

.ember-basic-dropdown-overlay {
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 10;
  top: 0;
  left: 0;
  pointer-events: none; }

.ember-power-select {
  position: relative; }

.ember-power-select *, .ember-power-select-dropdown * {
  box-sizing: border-box; }

.ember-power-select-trigger {
  position: relative;
  border-top: 1px solid #aaaaaa;
  border-bottom: 1px solid #aaaaaa;
  border-right: 1px solid #aaaaaa;
  border-left: 1px solid #aaaaaa;
  border-radius: 4px;
  background-color: #ffffff;
  line-height: 1.75;
  overflow-x: hidden;
  text-overflow: ellipsis;
  min-height: 1.75em;
  user-select: none;
  -webkit-user-select: none;
  color: inherit;
  /* Minimum clearfix for modern browsers */ }
  .ember-power-select-trigger:after {
    content: "";
    display: table;
    clear: both; }

.ember-power-select-trigger:focus,
.ember-power-select-trigger--active {
  border-top: 1px solid #aaaaaa;
  border-bottom: 1px solid #aaaaaa;
  border-right: 1px solid #aaaaaa;
  border-left: 1px solid #aaaaaa;
  box-shadow: none; }

.ember-basic-dropdown-trigger--below.ember-power-select-trigger[aria-expanded="true"],
.ember-basic-dropdown-trigger--in-place.ember-power-select-trigger[aria-expanded="true"] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0; }

.ember-basic-dropdown-trigger--above.ember-power-select-trigger[aria-expanded="true"] {
  border-top-left-radius: 0;
  border-top-right-radius: 0; }

.ember-power-select-placeholder {
  color: #999999;
  display: block;
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; }

.ember-power-select-status-icon {
  position: absolute;
  display: inline-block;
  width: 0;
  height: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border-style: solid;
  border-width: 7px 4px 0 4px;
  border-color: #aaaaaa transparent transparent transparent; }
  .ember-basic-dropdown-trigger[aria-expanded="true"] .ember-power-select-status-icon {
    transform: rotate(180deg); }

.ember-power-select-clear-btn {
  position: absolute;
  cursor: pointer; }

.ember-power-select-trigger-multiple-input {
  font-family: inherit;
  font-size: inherit;
  border: none;
  display: inline-block;
  line-height: inherit;
  -webkit-appearance: none;
  outline: none;
  padding: 0;
  float: left;
  background-color: transparent;
  text-indent: 2px;
  /* There's a browser bug where this selectos cannot be chained with commas */ }
  .ember-power-select-trigger-multiple-input:disabled {
    background-color: #eeeeee; }
  .ember-power-select-trigger-multiple-input::placeholder {
    opacity: 1;
    color: #999999; }
  .ember-power-select-trigger-multiple-input::-webkit-input-placeholder {
    opacity: 1;
    color: #999999; }
  .ember-power-select-trigger-multiple-input::-moz-placeholder {
    opacity: 1;
    color: #999999; }
  .ember-power-select-trigger-multiple-input::-ms-input-placeholder {
    opacity: 1;
    color: #999999; }

.ember-power-select-multiple-options {
  padding: 0;
  margin: 0; }

.ember-power-select-multiple-option {
  border: 1px solid gray;
  border-radius: 4px;
  color: #333333;
  background-color: #e4e4e4;
  padding: 0 4px;
  display: inline-block;
  line-height: 1.45;
  float: left;
  margin: 2px 0 2px 3px; }

.ember-power-select-multiple-remove-btn {
  cursor: pointer; }
  .ember-power-select-multiple-remove-btn:not(:hover) {
    opacity: 0.5; }

.ember-power-select-search {
  padding: 4px; }

.ember-power-select-search-input {
  border: 1px solid #aaaaaa;
  border-radius: 0;
  width: 100%;
  font-size: inherit;
  line-height: inherit;
  padding: 0 5px; }
  .ember-power-select-search-input:focus {
    border: 1px solid #aaaaaa;
    box-shadow: none; }

.ember-power-select-dropdown {
  border-left: 1px solid #aaaaaa;
  border-right: 1px solid #aaaaaa;
  line-height: 1.75;
  border-radius: 4px;
  box-shadow: none;
  overflow: hidden;
  color: inherit; }

.ember-power-select-dropdown.ember-basic-dropdown-content--above {
  border-top: 1px solid #aaaaaa;
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0; }

.ember-power-select-dropdown.ember-basic-dropdown-content--below, .ember-power-select-dropdown.ember-basic-dropdown-content--in-place {
  border-top: none;
  border-bottom: 1px solid #aaaaaa;
  border-top-left-radius: 0;
  border-top-right-radius: 0; }

.ember-power-select-dropdown.ember-basic-dropdown-content--in-place {
  width: 100%; }

.ember-power-select-options {
  list-style: none;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none; }
  .ember-power-select-options[role="listbox"] {
    overflow-y: auto;
    max-height: 12.25em; }

.ember-power-select-option {
  cursor: pointer;
  padding: 0 8px; }

.ember-power-select-group[aria-disabled="true"] {
  color: #999999;
  cursor: not-allowed; }

.ember-power-select-group[aria-disabled="true"] .ember-power-select-option,
.ember-power-select-option[aria-disabled="true"] {
  color: #999999;
  pointer-events: none;
  cursor: not-allowed; }

.ember-power-select-option[aria-selected="true"] {
  background-color: #dddddd; }

.ember-power-select-option[aria-current="true"] {
  background-color: #5897fb;
  color: #ffffff; }

.ember-power-select-group-name {
  cursor: default;
  font-weight: bold; }

.ember-power-select-trigger[aria-disabled=true] {
  background-color: #eeeeee; }

.ember-power-select-trigger {
  padding: 0 16px 0 0; }

.ember-power-select-selected-item, .ember-power-select-placeholder {
  margin-left: 8px; }

.ember-power-select-status-icon {
  right: 5px; }

.ember-power-select-clear-btn {
  right: 25px; }

.ember-power-select-group .ember-power-select-group .ember-power-select-group-name {
  padding-left: 24px; }

.ember-power-select-group .ember-power-select-group .ember-power-select-option {
  padding-left: 40px; }

.ember-power-select-group .ember-power-select-option {
  padding-left: 24px; }

.ember-power-select-group .ember-power-select-group-name {
  padding-left: 8px; }

.ember-power-select-trigger[dir=rtl] {
  padding: 0 0 0 16px; }
  .ember-power-select-trigger[dir=rtl] .ember-power-select-selected-item, .ember-power-select-trigger[dir=rtl] .ember-power-select-placeholder {
    margin-right: 8px; }
  .ember-power-select-trigger[dir=rtl] .ember-power-select-multiple-option {
    float: right; }
  .ember-power-select-trigger[dir=rtl] .ember-power-select-trigger-multiple-input {
    float: right; }
  .ember-power-select-trigger[dir=rtl] .ember-power-select-status-icon {
    left: 5px;
    right: initial; }
  .ember-power-select-trigger[dir=rtl] .ember-power-select-clear-btn {
    left: 25px;
    right: initial; }

.ember-power-select-dropdown[dir=rtl] .ember-power-select-group .ember-power-select-group .ember-power-select-group-name {
  padding-right: 24px; }

.ember-power-select-dropdown[dir=rtl] .ember-power-select-group .ember-power-select-group .ember-power-select-option {
  padding-right: 40px; }

.ember-power-select-dropdown[dir=rtl] .ember-power-select-group .ember-power-select-option {
  padding-right: 24px; }

.ember-power-select-dropdown[dir=rtl] .ember-power-select-group .ember-power-select-group-name {
  padding-right: 8px; }

/* CSS Document */
body {
  background-color: #FFF !important; }

@font-face {
  font-family: "MyriadPro-Regular";
  src: url(/assets/fonts/myriadpro-regular.woff2) format("woff2"), url(/assets/fonts/myriadpro-regular.woff) format("woff"); }

@font-face {
  font-family: "MyriadPro-Light";
  src: url(/assets/fonts/myriadpro-light.woff2) format("woff2"), url(/assets/fonts/myriadpro-light.woff) format("woff"); }

@font-face {
  font-family: "MyriadPro-BoldCondensed";
  src: url(/assets/fonts/myriadpro-boldcond.woff2) format("woff2"), url(/assets/fonts/myriadpro-boldcond.woff) format("woff"); }

/*
@font-face {
    font-family:"myriad-pro";
}
@font-face
*/
.-white {
  color: white !important; }

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

a, a:hover {
  text-decoration: none;
  cursor: pointer;
  color: black; }

a, a:hover, a:active, a:visited {
  text-decoration: none !important; }

.language-select .ember-power-select-trigger {
  margin: 0; }

.language-select__dropdown {
  z-index: 10002; }

.ui-keyboard-input {
  text-align: left;
  margin-left: 100px; }

.download-page {
  display: inline-block; }

.download-wrapper {
  text-align: center;
  margin-top: 30px; }

.data-formatting input.cmn-toggle-round + label {
  margin-left: -85px; }

.data-formatting .connectivity-toggle {
  font-family: "MyriadPro-Light";
  background: #ededed;
  margin-top: 1.5em;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 1em; }
  .data-formatting .connectivity-toggle__title {
    width: 100%;
    text-align: center;
    padding: .75em;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center; }
    .data-formatting .connectivity-toggle__title .info {
      align-items: center;
      justify-content: center;
      display: flex;
      padding-left: .25em; }
  .data-formatting .connectivity-toggle__actions {
    display: flex;
    padding-bottom: 2em; }
    .data-formatting .connectivity-toggle__actions .tooltipstered {
      display: flex; }
  .data-formatting .connectivity-toggle__button {
    cursor: pointer;
    padding: .55em 1.5em;
    margin: 0 .5em;
    font-size: 20px;
    background: #fff;
    border: 1px solid #939598;
    border-radius: 10px;
    width: 8em;
    text-align: center;
    position: relative; }
    .data-formatting .connectivity-toggle__button--active, .data-formatting .connectivity-toggle__button:hover {
      color: #fff;
      border-color: #DC6432;
      background: #DC6432; }
      .data-formatting .connectivity-toggle__button--active i, .data-formatting .connectivity-toggle__button:hover i {
        color: #fff; }
    .data-formatting .connectivity-toggle__button--disabled {
      cursor: not-allowed;
      opacity: .35;
      color: #333 !important;
      background: #fff !important;
      border-color: #939598 !important; }
    .data-formatting .connectivity-toggle__button .tooltipstered {
      position: absolute;
      top: .25em;
      right: .25em; }

.data-formatting .info {
  margin-left: 5px;
  cursor: pointer;
  color: #939598; }
  .data-formatting .info:hover {
    color: #DC6432; }

.data-formatting .error-message {
  color: red;
  text-align: center;
  width: 100%;
  font-size: 120%; }

.data-formatting .sub-header {
  display: flex;
  justify-content: center; }
  .data-formatting .sub-header__separator {
    padding: 0 10px; }
  .data-formatting .sub-header .inactive {
    color: lightgrey; }
    .data-formatting .sub-header .inactive:hover {
      color: #DC6432;
      cursor: pointer; }
      .data-formatting .sub-header .inactive:hover.disabled {
        color: lightgrey;
        cursor: default; }

.ember-checkbox {
  margin-left: 25px !important; }

.config-format .ember-text-field {
  margin-left: 10px !important; }

.errorpage {
  text-align: center; }

.errorpage h1 {
  font-family: "MyriadPro-Light";
  text-align: center; }

.errorpage a {
  display: inline-block;
  background-color: #939598;
  margin-bottom: 5px;
  color: white;
  padding: 15px;
  border-radius: 10px;
  cursor: pointer;
  position: relative; }

.errorpage a:hover {
  background-color: #DC6432; }

.warning {
  color: red;
  padding-top: 10px; }

#navbar {
  background-color: #fff;
  height: 70px;
  width: 100%;
  vertical-align: middle;
  z-index: 10001;
  position: fixed;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); }

#navbar .container {
  height: 70px;
  padding: 0 2%; }

#navbar .container .nav-left {
  vertical-align: middle;
  float: left;
  line-height: 70px; }

#navbar .container .nav-left em {
  position: relative;
  top: 5px;
  color: #DC6432;
  font-size: 18px; }

#navbar .container .nav-right {
  float: right;
  height: 100%;
  display: flex;
  align-items: center; }
  #navbar .container .nav-right .select-container {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center; }

#navbar .container .nav-right a {
  padding: 0 10px;
  font-family: "MyriadPro-Light";
  font-size: 18px;
  color: #939598; }

#navbar .container .nav-right a:hover {
  color: #DC6432; }

.nav-right .active a {
  color: #DC6432 !important; }

#page {
  padding-top: 100px; }

#sidebar {
  text-align: center;
  font-family: "MyriadPro-Light";
  font-size: 16px; }

#sidebar .dropdown {
  margin-bottom: 25px; }

#sidebar .dropdown .btn {
  font-size: 16px; }

#sidebar .dropdown-toggle {
  height: 70px;
  width: 100%;
  background-color: #DC6432;
  border: none;
  border-radius: 0; }

#sidebar .dropdown-menu {
  width: 100%;
  text-align: center;
  font-size: 16px; }

#sidebar .tabs a {
  display: block;
  background-color: #939598;
  margin-bottom: 5px;
  color: white;
  padding: 15px;
  border-radius: 10px;
  cursor: pointer;
  position: relative; }

#sidebar .tabs li {
  list-style: none; }

#sidebar .tabs a:hover,
#sidebar .tabs a.sidebar-link-active {
  background-color: #DC6432; }

.progressbar1 {
  margin-left: 55px;
  text-align: center;
  padding-bottom: 17px;
  font-family: "MyriadPro-Light";
  cursor: pointer; }

.progressbar1 .block {
  position: relative;
  height: 70px;
  width: 20%;
  background-color: #939598;
  display: inline-block;
  margin-left: -55px; }

.progressbar1 .block.active {
  background-color: #DC6432; }

.progressbar1 .triangle.active {
  border-left: 50px solid #DC6432; }

.progressbar1 .block span {
  position: absolute;
  top: 25px;
  left: 45%;
  font-size: 16px;
  z-index: 101;
  color: white; }

.progressbar1 .block span.long {
  top: 15px; }

.progressbar1 .triangle {
  position: relative;
  display: inline-block;
  z-index: 100;
  width: 0;
  height: 0;
  border-top: 35px solid transparent;
  border-left: 50px solid #939598;
  border-bottom: 35px solid transparent; }

.progressbar1 .border {
  position: relative;
  display: inline-block;
  z-index: 99;
  width: 0;
  height: 0;
  border-top: 35px solid transparent;
  border-left: 50px solid white;
  border-bottom: 35px solid transparent;
  margin-left: -48px; }

.progressbar1 > a {
  display: none; }

.progressbar1 > a.active + .block {
  background-color: #DC6432; }

.progressbar1 > a.active + .block + .triangle {
  border-left-color: #DC6432; }

#configuration .content {
  padding: 0 75px; }

.progressbar11 {
  text-align: center; }

.progressbar11 a {
  position: relative;
  text-align: center;
  width: 35%;
  display: inline-block;
  background-color: #DC6432;
  margin: 15px;
  color: white;
  padding: 15px;
  border-radius: 10px;
  cursor: pointer;
  font-family: "MyriadPro-Light";
  font-size: 16px; }

.progressbar11 a a {
  width: 100%;
  padding: 0;
  margin: 0; }

.progressbar11 iframe {
  margin: 25px; }

#configuration {
  padding: 0px !important; }

.configuration-2 {
  border: 1px solid #ccc;
  position: relative;
  margin-top: 30px; }

.footer {
  margin: 0 auto;
  text-align: center; }

.footer-content {
  margin: auto;
  display: block; }

.barcode-header {
  width: 100%;
  height: auto;
  margin: 0px;
  float: left; }

#logo {
  float: left;
  margin-top: 82px; }

.device {
  background-color: #dc632d;
  width: 100%;
  float: left;
  text-align: center;
  color: #FFF; }

.device h4 {
  font-size: 21px; }

.img-place-holder {
  width: 100%;
  height: 188px;
  float: left; }

.generate-button {
  background-color: #929499;
  color: #666;
  border: 1px solid !important;
  margin-top: 23px;
  width: 90%;
  font-size: 16px !important;
  padding: 12px 0 !important;
  border-radius: 0 !important; }

.reset-button {
  background-color: #929499;
  color: #666;
  border: 1px solid !important;
  margin-top: 23px;
  width: 90%;
  font-size: 16px !important;
  padding: 12px 0 !important;
  background-image: url(/assets/images/image2.png) !important;
  background-position: 6px center;
  background-repeat: no-repeat;
  background-size: 40px auto;
  border-radius: 0 !important; }

.open-button {
  background-color: #929499;
  color: #666;
  border: 1px solid !important;
  margin-top: 23px;
  width: 90%;
  font-size: 16px !important;
  padding: 12px 0 !important;
  background-image: url(/assets/images/image3.png) !important;
  background-position: 6px center;
  background-repeat: no-repeat;
  background-size: 40px auto;
  border-radius: 0 !important; }

.save-button {
  background-color: #929499;
  color: #666;
  border: 1px solid !important;
  margin-top: 23px;
  width: 90%;
  font-size: 16px !important;
  padding: 12px 0 !important;
  background-image: url(/assets/images/img3.png) !important;
  background-position: 6px center;
  background-repeat: no-repeat;
  background-size: 40px auto;
  border-radius: 0 !important; }

.invisible-button {
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 10; }

.upload-container {
  position: relative; }

.inline-container {
  display: inline-block; }

.prefix-suffix {
  width: 100%;
  background-color: #DC632D;
  padding-left: 58px; }

.btn.prifix {
  border-radius: 0px !important;
  background-color: #929499; }

.bg-color-prefix {
  width: 100%;
  background-color: #929499;
  height: 34px; }

.symbology-divider {
  width: 80%;
  background-color: #9f9fa1;
  height: 2px;
  margin: 15px auto; }

.overview-divider {
  width: 100%;
  background-color: #9f9fa1;
  height: 2px; }

.prefix-container {
  width: 100%;
  height: auto;
  float: left;
  border-left: 1px solid #929499;
  border-bottom: 1px solid #929499;
  padding-bottom: 162px;
  border: 1px solid #929499;
  background-color: #f5f5f5; }

.prifix {
  color: #900; }

.bg-color-upload {
  width: 100%;
  background-color: #929499;
  height: auto;
  margin-top: 30px; }

.upload-button {
  background-color: #DC632D;
  color: #FFF;
  font-size: 16px !important;
  border-radius: 0px;
  border-radius: 0 !important; }

.padding-left {
  padding-left: 14px; }

.browse-para {
  font-size: 15px;
  margin-top: 5px; }

.create-button {
  background-color: #DC632D;
  color: #FFF;
  font-size: 16px !important;
  border-radius: 0px;
  padding-left: 32px !important;
  padding-right: 32px !important; }

.new-button {
  background-color: #929499;
  font-size: 16px !important;
  margin-top: 16px;
  padding: 0 23px !important;
  width: 99px;
  height: 37px; }

.start {
  background-image: url(/assets/images/img4.png);
  background-repeat: no-repeat;
  background-position: 79px 2px;
  background-size: 47px auto; }

.symbologies {
  background-image: url(/assets/images/img5.png);
  background-repeat: no-repeat;
  background-position: 79px 2px;
  background-size: 47px auto; }

.data-formating {
  background-image: url(/assets/images/img6.png);
  background-repeat: no-repeat;
  background-position: 79px 2px;
  background-size: 47px auto; }

.scan-data {
  background-image: url(/assets/images/img7.png);
  background-repeat: no-repeat;
  background-position: 79px 2px;
  background-size: 47px auto; }

.symbologies-part {
  width: 100%;
  height: auto;
  padding-bottom: 105px; }

.nextprev {
  margin-left: 1%;
  position: fixed;
  width: 100%;
  z-index: 1000;
  max-width: 825px;
  height: 0px; }

.red-on-print {
  color: red !important; }

.next {
  position: relative;
  float: right;
  display: block;
  background-color: #939598;
  margin-bottom: 5px;
  color: white;
  padding: 15px;
  border-radius: 10px;
  cursor: pointer; }

.prev {
  position: relative;
  float: left;
  margin-left: -1em;
  display: block;
  background-color: #939598;
  margin-bottom: 5px;
  color: white;
  padding: 15px;
  border-radius: 10px;
  cursor: pointer; }

.next:hover, .prev:hover {
  background-color: #DC6432;
  color: #ffffff; }

.barcode-list {
  width: 16% !important;
  text-align: center !important;
  font-size: 18px; }

.nav-part {
  background-color: #dc632d; }

.code-table {
  width: 47%;
  height: auto; }

td {
  border: none !important;
  vertical-align: inherit !important; }

.table-off {
  float: left;
  margin-top: 12px; }

.nav > li > a:hover, .nav > li > a:focus {
  background-color: inherit !important;
  color: #000000; }

.nav-tabs > li > a {
  color: #f5f5f5; }

.nav-tabs > li > a:hover {
  border: none !important; }

.config-format {
  display: inline-block;
  min-width: 260px;
  text-align: left;
  margin-left: 100px;
  margin-bottom: 20px;
  height: 20px;
  font-family: "MyriadPro-Light"; }

.labeled-setting-component {
  width: 80%; }

.labeled-setting-container {
  display: flex; }

.labeled-setting .warning {
  margin-left: 5px;
  position: relative; }

.setting-element {
  display: inline-block;
  min-width: 260px;
  margin-left: 100px;
  padding-bottom: 20px;
  font-family: "MyriadPro-Light"; }

.config-format-barcodes {
  display: inline-block; }

.print-barcodes {
  background-color: #939598;
  display: block;
  position: relative;
  cursor: pointer;
  color: white;
  min-width: 160px;
  height: 20px;
  margin-top: 40px;
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  width: 90px;
  height: 40px; }

.print-barcodes:hover {
  background-color: #DC6432; }

.config-format-input {
  display: inline-block;
  min-width: 260px;
  height: 20px;
  margin-top: 20px; }

.config-headline {
  text-align: center;
  padding-bottom: 10px;
  font-family: "MyriadPro-Light"; }

.help-headline, .main-config-headline {
  text-align: left;
  font-family: "MyriadPro-Light";
  margin-left: 25px; }

.config-content, .help-content {
  text-align: left;
  margin-left: 25px;
  margin-top: 50px;
  font-family: "MyriadPro-Light"; }
  .config-content p, .help-content p {
    margin-bottom: 25px; }

.config-content {
  font-size: 1.25em; }
  .config-content a {
    color: #DC6432; }

.help-content label {
  width: 100%;
  font-size: 1.25em; }
  .help-content label.subtitle {
    margin-top: 3em; }

.help-content .links label {
  cursor: pointer; }
  .help-content .links label:hover {
    color: #DC6432; }

.help-content .faqs-container {
  font-size: 1.45em;
  list-style-type: none; }
  .help-content .faqs-container li {
    border: 0.5px solid #939598;
    border-radius: 10px;
    margin-bottom: .5em; }
    .help-content .faqs-container li .title {
      font-size: 1.1em;
      background: rgba(147, 149, 152, 0.25);
      border-bottom: 0.5px solid #939598;
      border-radius: 10px;
      padding: .5em;
      cursor: pointer; }
      .help-content .faqs-container li .title:hover {
        color: #DC6432; }
      .help-content .faqs-container li .title.open {
        font-weight: 600;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        border-bottom: 0.5px solid #939598; }
    .help-content .faqs-container li .faq-list-item-questions {
      padding: 1em; }
      .help-content .faqs-container li .faq-list-item-questions .faq-answer-table {
        border: .5px solid gray;
        margin-top: .5em; }
        .help-content .faqs-container li .faq-list-item-questions .faq-answer-table .faq-answer-table-header {
          font-weight: 600;
          background: lightgrey;
          font-size: 1.25em; }
        .help-content .faqs-container li .faq-list-item-questions .faq-answer-table td {
          border: .5px solid gray !important;
          padding: .75em; }
    .help-content .faqs-container li .faqs-question {
      margin-bottom: .25em; }
      .help-content .faqs-container li .faqs-question .indent {
        margin-left: 1.5em; }
      .help-content .faqs-container li .faqs-question i {
        cursor: pointer; }
      .help-content .faqs-container li .faqs-question .question {
        margin-left: .25em;
        display: inline-flex;
        width: 95%; }
        .help-content .faqs-container li .faqs-question .question.open {
          font-weight: 600; }
        .help-content .faqs-container li .faqs-question .question .question-content {
          margin-left: .25em; }
      .help-content .faqs-container li .faqs-question .answer {
        font-style: italic;
        margin-top: .25em;
        margin-bottom: 1em; }
      .help-content .faqs-container li .faqs-question table {
        border: .5px solid gray;
        margin-top: .5em; }
        .help-content .faqs-container li .faqs-question table td {
          border: .5px solid gray !important;
          padding: .75em; }

.help-content .tutorials-container {
  display: flex;
  flex-wrap: wrap; }
  .help-content .tutorials-container .video-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-top: 15px;
    width: 48%;
    height: auto; }
    @media only screen and (max-width: 450px) {
      .help-content .tutorials-container .video-wrapper {
        width: auto; } }
  .help-content .tutorials-container .video-wrapper iframe {
    padding: 5px 10px;
    top: 0;
    left: 0;
    box-shadow: 5px 5px 20px lightgrey; }

.help-content .documents-container {
  margin-top: 1em;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }
  .help-content .documents-container .document {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center; }
    .help-content .documents-container .document .fa-file-o {
      color: #DC6432;
      font-size: 5em; }
    .help-content .documents-container .document .title {
      padding: .5em;
      white-space: nowrap; }
    .help-content .documents-container .document:hover .title {
      color: #DC6432;
      text-decoration: underline; }

.help-content .contact-container {
  display: flex;
  align-items: flex-start;
  align-content: space-between; }
  .help-content .contact-container .icon-wrapper {
    font-size: 1.25em;
    padding: 1em;
    display: flex;
    flex-direction: column; }
    .help-content .contact-container .icon-wrapper i {
      align-self: center;
      color: #DC6432; }
    .help-content .contact-container .icon-wrapper h1 {
      text-align: center; }
    .help-content .contact-container .icon-wrapper .text {
      text-align: center; }
    @media only screen and (max-width: 1300px) {
      .help-content .contact-container .icon-wrapper {
        padding: 2.5em; } }
    @media only screen and (max-width: 980px) {
      .help-content .contact-container .icon-wrapper {
        padding: 2em; } }
    @media only screen and (max-width: 768px) {
      .help-content .contact-container .icon-wrapper {
        padding: 1.5em;
        font-size: 80%; }
        .help-content .contact-container .icon-wrapper h1 {
          font-size: 2em; } }

.overview-part {
  margin-left: 70px;
  text-align: left; }

.barcode-preview {
  width: 70%;
  display: block;
  margin: auto;
  max-width: 170px; }

.barcode-container {
  width: 100%; }

.barcodepep {
  margin-bottom: 1em;
  vertical-align: baseline; }

.next-btn {
  float: right;
  position: relative;
  margin-right: 70px;
  background-color: #dc632d;
  margin-top: 40px; }

#menu-icon {
  display: none; }

.nextprev-footer {
  display: none; }

@media only screen and (max-width: 1200px) {
  .nextprev {
    margin-left: 1%;
    position: fixed;
    width: 100%;
    z-index: 1000;
    max-width: 675px; } }

.responsive-actions-menu {
  display: none; }

@media only screen and (max-width: 980px) {
  /* Quick actions menu setup */
  .responsive-actions-menu {
    display: block; }
  .actions-menu {
    display: none; }
  .qucik-actions-header {
    display: inline-flex;
    margin-bottom: .2em;
    cursor: pointer; }
  .qucik-actions-header i {
    margin: 0.7em;
    margin-top: 0.2em;
    background-color: #DC6432;
    color: white;
    border-radius: 50%;
    padding: .4em;
    width: 1.8em; }
  #navbar .container .nav-right {
    display: none; }
  #menu-icon {
    display: inline;
    position: relative;
    vertical-align: middle;
    float: right;
    padding: 1.6em 1.6em 1.6em 2.5em; }
  #menu-icon i {
    border: 1px solid;
    border-color: #dc632d;
    padding: 0.3em;
    color: #929499;
    border-radius: 0.3em; }
  #menu-icon i:active {
    background-color: #dc632d; }
  #menu-icon i.open {
    background-color: #dc632d; }
  .navbar-menu-dropdown {
    z-index: 100000; }
  .navbar-menu-dropdown .drop-container {
    background-color: white;
    border: 1px solid;
    border-color: #929499; }
  .navbar-menu-dropdown .drop-container div {
    padding: 1em; }
  .navbar-menu-dropdown a {
    padding: 0 10px;
    font-family: "MyriadPro-Light";
    font-size: 18px;
    color: #939598; }
  #configuration {
    padding-left: 0; }
  .nextprev {
    position: absolute;
    width: 90%;
    z-index: 1000;
    margin-top: -2em; }
  .barcode-list {
    width: 31% !important; }
  .code-table {
    height: auto;
    width: 100%; }
  input.cmn-toggle-round + label {
    width: 63px !important; }
  input.cmn-toggle-round:checked + label::after {
    margin-left: 26px !important; }
  .symbologies-part {
    padding-bottom: 0px; }
  #barcodes .config-headline {
    margin-left: 1.2em; }
  #barcodes .config-headline.main-headline {
    margin-left: 3em; } }

@media only screen and (max-width: 768px) {
  #barcodes .config-headline:nth-child(1) {
    margin-left: 1.2em; }
  .mark-scanner {
    padding-top: 0em !important; }
  .responsive-headline em {
    position: relative;
    font-size: 14px !important; }
  .labeled-setting-container {
    display: block; }
  /* Floating buttons */
  .nextprev-footer {
    display: block;
    position: relative;
    margin-top: 2em;
    margin-bottom: 2em;
    padding-bottom: 1em;
    margin-left: 1em; }
  .prev {
    padding: .3em;
    margin-left: 1em; }
  .next {
    padding: .3em;
    margin-right: -.3em; }
  /* Barcode input component*/
  .barcode-input-container {
    margin-left: 1em; }
  .button-panel .custom-button {
    font-size: 120%; }
  /* Responsive progressbar items */
  .progressbar1 {
    padding: 15px; }
  .progressbar1 .block {
    width: 11%; }
  .progressbar1 .block:nth-child(2) {
    z-index: 108; }
  .progressbar1 .triangle:nth-child(3) {
    z-index: 108; }
  .progressbar1 .border:nth-child(4) {
    z-index: 107; }
  .progressbar1 .triangle:nth-child(7) {
    z-index: 106; }
  .progressbar1 .border:nth-child(8) {
    z-index: 105; }
  .progressbar1 .triangle:nth-child(11) {
    z-index: 104; }
  .progressbar1 .border:nth-child(12) {
    z-index: 103; }
  .progressbar1 .triangle:nth-child(15) {
    z-index: 102; }
  .progressbar1 .border:nth-child(16) {
    z-index: 101; }
  .progressbar1 .block > a > span {
    display: none; }
  .progressbar1 .block > a.active > span {
    display: block;
    z-index: 110; }
  .progressbar1 .block > span {
    visibility: hidden; }
  .progressbar1 > a.active + .block {
    background-color: #DC6432;
    width: 56%; }
    .progressbar1 > a.active + .block > span {
      visibility: visible; }
  .progressbar1 > a.active + .block + .triangle {
    border-left-color: #DC6432; }
  iframe {
    width: 80%; } }

.responsive-navbar {
  white-space: nowrap;
  min-width: 100%; }

@media only screen and (max-width: 460px) {
  .container-fluid {
    margin-left: 0px; }
  .container-fluid .print-text {
    margin-right: 0em; }
  .config-headline {
    margin-left: 2em; }
  h2.config-headline {
    padding-top: 1em;
    font-size: 24px; }
  h2.config-headline.hidden-print {
    margin-left: .1em; }
  h3.config-headline {
    font-size: 18px;
    margin-left: 3em;
    margin-top: 5px;
    margin-bottom: 5px; }
  /* Headline and navbar responsive updates */
  .responsive-headline {
    width: 70%; }
  .responsive-headline img {
    width: 60%; }
  .responsive-headline em {
    position: absolute !important;
    font-size: 12px !important; }
  input.cmn-toggle-round + label {
    margin: 0 7px !important;
    padding: 0px !important; }
  /* Barcode input component*/
  .barcode-input-wrapper {
    width: 20em; }
  .barcode-input-wrapper .custom-button {
    font-size: 150%; }
  .button-panel .custom-button {
    font-size: 90%; } }

@media only screen and (max-width: 320px) {
  /* Headline and navbar responsive updates */
  .responsive-headline img {
    width: 50%; }
  .responsive-headline em {
    position: absolute !important;
    font-size: 11px !important; }
  /* Barcode input component*/
  .barcode-input-wrapper input {
    font-size: 300%; }
  .button-panel .custom-button {
    font-size: 70%; } }

@media print {
  #page {
    padding-top: 0; }
  #sidebar {
    display: none; }
  #navbar .container .nav-right {
    display: none; }
  #navbar .container .nav-left {
    position: absolute;
    top: -290px;
    left: 0; }
  #dongle-barcode {
    margin-top: 570px; }
  .nextprev {
    display: none; }
  .progressbar1 {
    display: none; }
  #barcodes .config-headline.main-headline {
    margin-top: 1em; }
  #barcodes .print-logo {
    margin-top: 1em; }
  #barcodes * {
    text-align: left; }
  #barcodes > .container-fluid {
    margin: 0;
    padding: 0; }
  #barcodes > .container-fluid > .col-sm-6 {
    width: auto;
    margin: 0;
    padding: 0;
    overflow: hidden; }
  #dongle-overview {
    float: right;
    width: auto; }
  #scanner-overview {
    margin-right: 0;
    float: left; }
  #barcodes img {
    max-width: 100%;
    height: auto; }
  #barcodes button {
    display: none; }
  #barcodes .print-in-one-line * {
    /*display: inline;*/ }
  #barcodes br,
  #barcodes .print-in-one-line br {
    display: none; }
  #barcodes > .container-fluid > .print-text {
    margin-top: 3em;
    padding-bottom: 30%; }
  #barcodes > .container-fluid > .print-image {
    page-break-after: always;
    /*text-align: center;*/ }
  #barcodes .config-headline {
    margin-left: 0; }
  #barcodes .print-image-column {
    float: left;
    width: 49%;
    padding-right: 5%; }
  #barcodes .print-m-b-2 {
    margin-bottom: 0em; } }

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

.help-icon {
  color: #939598;
  vertical-align: sub; }
  .help-icon:hover {
    cursor: pointer;
    color: #DC6432; }
  .help-icon.mobile {
    margin-left: 40%; }

.predefined-rules-modal {
  width: 65vw;
  height: 40vh;
  display: flex;
  justify-content: center;
  align-content: space-between;
  font-size: 1.2em; }
  @media only screen and (max-width: 980px) {
    .predefined-rules-modal {
      width: 95vw;
      height: 80vh; } }
  .predefined-rules-modal th:nth-child(1) {
    width: 20%; }
  .predefined-rules-modal th:nth-child(2) {
    width: 70%; }
  .predefined-rules-modal th:nth-child(3) {
    width: 10%; }
  .predefined-rules-modal .add-button {
    float: right;
    background: #939598;
    padding: 5px 15px;
    border-radius: 10px;
    color: white; }
    .predefined-rules-modal .add-button:hover {
      cursor: pointer;
      background: #DC6432; }

.help-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: space-between; }
  .help-modal .close-button {
    position: absolute;
    right: 1em;
    top: .5em;
    align-self: flex-start;
    display: flex;
    align-content: flex-end; }
    .help-modal .close-button i {
      font-size: 2em;
      color: #939598; }
      .help-modal .close-button i:hover {
        cursor: pointer;
        color: #DC6432; }
  .help-modal .content-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    align-content: space-between; }
  @media only screen and (max-width: 980px) {
    .help-modal .content-wrapper {
      flex-direction: column;
      align-items: center; } }
  @media only screen and (max-width: 480px) {
    .help-modal {
      flex-direction: column;
      padding-top: 0;
      align-items: center; } }
  .help-modal .icon-wrapper {
    font-size: 140%;
    padding: 1em;
    display: flex;
    flex-direction: column; }
    .help-modal .icon-wrapper i {
      align-self: center;
      color: #DC6432; }
    .help-modal .icon-wrapper h1 {
      text-align: center; }
    .help-modal .icon-wrapper .text {
      text-align: center; }
    @media only screen and (max-width: 768px) {
      .help-modal .icon-wrapper {
        font-size: 80%; }
        .help-modal .icon-wrapper h1 {
          font-size: 28px; } }

.help-modal-overlay {
  z-index: 100000; }

.driver-link {
  margin-left: 10px;
  color: blue;
  text-decoration: underline; }
  .driver-link:hover {
    cursor: pointer;
    color: #1164b0; }

.pairing-link {
  color: blue;
  text-decoration: underline; }
  .pairing-link:hover {
    cursor: pointer;
    color: #1164b0; }

.driver-download-dialog {
  width: 40%;
  padding: 2em 3em; }
  .driver-download-dialog .row {
    margin-bottom: 2em; }
  .driver-download-dialog .close-button {
    font-size: 150%; }
    .driver-download-dialog .close-button:hover {
      cursor: pointer;
      color: #DC6432; }
  .driver-download-dialog input {
    width: 35%; }
  .driver-download-dialog select {
    width: 35%; }
  @media only screen and (max-width: 900px) {
    .driver-download-dialog {
      width: 90%; }
      .driver-download-dialog input {
        width: 90%; }
      .driver-download-dialog select {
        width: 90%; } }

.connectLink {
  position: relative; }
  .connectLink__beta {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    position: absolute;
    top: -2.2em;
    right: 0;
    font-weight: 600;
    background: #DC6432;
    color: #fff;
    font-size: .8rem;
    height: 2rem;
    display: flex;
    align-items: center;
    padding: 0 .5rem;
    line-height: 1.5;
    border-radius: 4px; }

.privacy-policy-text h1, .privacy-policy-text h2 {
  font-weight: bold;
  color: #333; }

.privacy-policy-text h1 {
  margin: 0.67em 0; }

.privacy-policy-text h2 {
  margin-bottom: .7em; }

.privacy-policy-text h3 {
  font-weight: 300;
  font-size: 18px;
  margin: 1em 0; }

.privacy-policy-text h4 {
  font-weight: 300;
  font-size: 16px;
  margin: 1.33em 0; }

.privacy-policy-text p {
  margin-bottom: 20px; }