/*PANEL*/
div.panel-shell {
  position: relative;
  margin: .5rem;
  display: block;
  background-color: transparent !important; }
  div.panel-shell > .panel {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    color: #333333;
    min-width: 15rem;
    height: 100%;
    outline: none; }
    div.panel-shell > .panel.contentHidden {
      height: auto; }
    div.panel-shell > .panel > .head {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      background-color: #555555;
      color: #FFFFFF;
      overflow: unset;
      max-width: inherit; }
      div.panel-shell > .panel > .head > .title {
        display: flex;
        align-items: center;
        min-height: 3rem;
        padding: 0rem 0.5rem 0rem 2.5rem;
        background-position: 0.625rem 50%;
        text-overflow: ellipsis;
        white-space: nowrap;
        background-size: 1.38889rem; }
        div.panel-shell > .panel > .head > .title:not(.icn) {
          padding: 0rem .5rem 0rem .5rem; }
      div.panel-shell > .panel > .head > .controls, div.panel-shell > .panel > .head > .buttons {
        display: flex;
        background-color: transparent;
        align-content: center;
        align-items: center;
        flex-wrap: wrap;
        padding-left: .5rem; }
        div.panel-shell > .panel > .head > .controls > *, div.panel-shell > .panel > .head > .buttons > * {
          margin: .2rem .2rem .2rem 0rem; }
        div.panel-shell > .panel > .head > .controls:empty, div.panel-shell > .panel > .head > .buttons:empty {
          width: 0rem;
          padding: 0rem;
          margin: 0rem; }
      div.panel-shell > .panel > .head > .tabs {
        display: flex;
        flex-wrap: wrap;
        align-items: center; }
        div.panel-shell > .panel > .head > .tabs > div {
          height: auto;
          line-height: 3.3rem;
          padding: 0rem .5rem 0rem .5rem;
          background-position: 0.625rem 50%;
          text-overflow: ellipsis;
          white-space: nowrap; }
          div.panel-shell > .panel > .head > .tabs > div.icn {
            padding-left: 2.5rem;
            background-size: 1.4rem; }
          div.panel-shell > .panel > .head > .tabs > div:disabled, div.panel-shell > .panel > .head > .tabs > div.disabled {
            cursor: default; }
          div.panel-shell > .panel > .head > .tabs > div:not([class*="swatch"]) {
            background-color: #555555;
            color: #FFFFFF; }
          div.panel-shell > .panel > .head > .tabs > div:hover:not(.selected):not([class*="swatch"]):not(:disabled):not(.disabled) {
            cursor: pointer;
            background-color: #3ba3db; }
          div.panel-shell > .panel > .head > .tabs > div[class*="swatch"]:hover:not(.selected):not(:disabled):not(.disabled) {
            cursor: pointer;
            opacity: 0.8; }
        div.panel-shell > .panel > .head > .tabs:empty {
          width: 0rem;
          padding: 0rem;
          margin: 0rem; }
      div.panel-shell > .panel > .head > .tabs.tabsFillSpace > div {
        flex-grow: 1; }
      div.panel-shell > .panel > .head > .buttons {
        flex-grow: 1;
        justify-content: flex-end; }
        div.panel-shell > .panel > .head > .buttons > .expandCollapse {
          align-self: flex-start;
          border: 1px solid #FFFFFF;
          background-position: center; }
          div.panel-shell > .panel > .head > .buttons > .expandCollapse > * {
            border: none;
            margin: -1px;
            padding: 0rem; }
          div.panel-shell > .panel > .head > .buttons > .expandCollapse > .panelExpand {
            animation: panelExpand 200ms forwards; }
          div.panel-shell > .panel > .head > .buttons > .expandCollapse > .panelCollapse {
            animation: panelCollapse 200ms reverse; }
      div.panel-shell > .panel > .head > .title, div.panel-shell > .panel > .head > .tabs, div.panel-shell > .panel > .head > .controls, div.panel-shell > .panel > .head > .buttons {
        order: 1; }
      div.panel-shell > .panel > .head.tabsSecondRow > .tabs {
        width: 100%;
        order: 2; }
      div.panel-shell > .panel > .head.tabsSecondRow > .controls {
        flex-grow: 1; }
      div.panel-shell > .panel > .head.tabsSecondRow > .buttons {
        flex-grow: 0; }
    div.panel-shell > .panel > .content {
      flex-grow: 1;
      position: relative;
      max-height: inherit;
      overflow: visible;
      background-color: #FFFFFF; }
      div.panel-shell > .panel > .content .form {
        margin: 1rem; }
    div.panel-shell > .panel > .foot {
      background-color: #eeeeee;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap; }
      div.panel-shell > .panel > .foot > div {
        padding: .5rem; }
        div.panel-shell > .panel > .foot > div > * + * {
          margin-left: .5rem; }
      div.panel-shell > .panel > .foot > div:empty {
        display: none; }
  div.panel-shell.popup {
    display: flex;
    justify-content: center;
    align-items: stretch;
    align-items: center;
    position: fixed;
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0rem !important;
    top: 0;
    left: 0;
    z-index: 100;
    /**Background blur*/
    backdrop-filter: blur(4px); }
    div.panel-shell.popup > .panel {
      width: 90vw;
      height: auto;
      max-height: 95vh;
      min-height: 20vh; }
      div.panel-shell.popup > .panel .popupClose {
        margin-right: 0.25rem; }
      div.panel-shell.popup > .panel > .content {
        min-height: initial;
        max-height: initial;
        overflow-y: auto;
        overflow-x: visible; }
    div.panel-shell.popup > .popup-background {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0px;
      left: 0px;
      z-index: -1;
      background-color: #AAAAAA;
      opacity: 0.6; }
  div.panel-shell.popup-large > .panel {
    width: 95vw;
    min-width: 50rem; }
  div.panel-shell.popup-mediumlarge > .panel {
    width: 70vw;
    min-width: 50rem; }
  div.panel-shell.popup-medium > .panel {
    width: 50vw;
    min-width: 50rem; }
  div.panel-shell.popup-small > .panel {
    width: 30vw;
    min-width: 30rem; }
  div.panel-shell.popup-smallest > .panel {
    width: 20vw; }
  div.panel-shell.popup-fullscreen > .panel {
    width: 95vw;
    min-width: 50rem;
    max-height: 95vh;
    min-height: 95vh; }
  div.panel-shell.popup-top {
    align-items: start;
    padding-top: 2.5vh; }
  div.panel-shell.fill {
    width: 100%; }
  div.panel-shell.form > .panel > .content {
    padding: 1rem; }
  div.panel-shell.scroll > .panel > .content {
    overflow: auto; }
  div.panel-shell.transparent > .panel > .content {
    background-color: rgba(44, 48, 59, 0.5); }
  div.panel-shell.transparent > .panel > .foot {
    background-color: rgba(44, 48, 59, 0.5); }
  div.panel-shell.content-inherit-height > .panel > .content {
    display: flex;
    flex-direction: column; }
  div.panel-shell.swatchA1BG > div.panel > div.head {
    background-color: #13638f;
    color: #FFFFFF; }
  div.panel-shell.swatchA2BG > div.panel > div.head {
    background-color: #1d82b9;
    color: #FFFFFF; }
  div.panel-shell.swatchA3BG > div.panel > div.head {
    background-color: #3ba3db;
    color: #FFFFFF; }
  div.panel-shell.swatchA4BG > div.panel > div.head {
    background-color: #6bb5dd;
    color: #FFFFFF; }
  div.panel-shell.swatchA5BG > div.panel > div.head {
    background-color: #9bc9e1;
    color: #FFFFFF; }
  div.panel-shell.swatchA6BG > div.panel > div.head {
    background-color: #c9e1ed;
    color: #333333; }
  div.panel-shell.swatchA7BG > div.panel > div.head {
    background-color: #dbebf2;
    color: #333333; }
  div.panel-shell.swatchB1BG > div.panel > div.head {
    background-color: #58b91d;
    color: #FFFFFF; }
  div.panel-shell.swatchB2BG > div.panel > div.head {
    background-color: #77db39;
    color: #FFFFFF; }
  div.panel-shell.swatchB3BG > div.panel > div.head {
    background-color: #9add71;
    color: #FFFFFF; }
  div.panel-shell.swatchB4BG > div.panel > div.head {
    background-color: #d7edc9;
    color: #333333; }
  div.panel-shell.swatchB5BG > div.panel > div.head {
    background-color: #F3FAEF;
    color: #333333; }
  div.panel-shell.swatchGRNBG > div.panel > div.head {
    background-color: #58b91d;
    color: #FFFFFF; }
  div.panel-shell.swatchORGBG > div.panel > div.head {
    background-color: #FF8B06;
    color: #FFFFFF; }
  div.panel-shell.swatchERRBG > div.panel > div.head {
    background-color: #e4cd36;
    color: #FFFFFF; }
  div.panel-shell.swatchREDBG > div.panel > div.head {
    background-color: #DE3716;
    color: #FFFFFF; }
  div.panel-shell.swatchYELBG > div.panel > div.head {
    background-color: #e4cd36;
    color: #FFFFFF; }
  div.panel-shell.swatchC1BG > div.panel > div.head {
    background-color: #71dd94;
    color: #FFFFFF; }
  div.panel-shell.swatchC2BG > div.panel > div.head {
    background-color: #71dedd;
    color: #FFFFFF; }
  div.panel-shell.swatchC3BG > div.panel > div.head {
    background-color: #7093de;
    color: #FFFFFF; }
  div.panel-shell.swatchC4BG > div.panel > div.head {
    background-color: #9870de;
    color: #FFFFFF; }
  div.panel-shell.swatchC5BG > div.panel > div.head {
    background-color: #de70da;
    color: #FFFFFF; }
  div.panel-shell.swatchC6BG > div.panel > div.head {
    background-color: #de708c;
    color: #FFFFFF; }
  div.panel-shell.swatchC7BG > div.panel > div.head {
    background-color: #ddd471;
    color: #FFFFFF; }
  div.panel-shell.swatchG1BG > div.panel > div.head {
    background-color: #333333;
    color: #FFFFFF; }
  div.panel-shell.swatchG2BG > div.panel > div.head {
    background-color: #555555;
    color: #FFFFFF; }
  div.panel-shell.swatchG3BG > div.panel > div.head {
    background-color: #888888;
    color: #FFFFFF; }
  div.panel-shell.swatchG4BG > div.panel > div.head {
    background-color: #AAAAAA;
    color: #FFFFFF; }
  div.panel-shell.swatchG5BG > div.panel > div.head {
    background-color: #BFBFBF;
    color: #FFFFFF; }
  div.panel-shell.swatchG6BG > div.panel > div.head {
    background-color: #CCCCCC;
    color: #FFFFFF; }
  div.panel-shell.swatchG7BG > div.panel > div.head {
    background-color: #DDDDDD;
    color: #333333; }
  div.panel-shell.swatchG8BG > div.panel > div.head {
    background-color: #e5e5e5;
    color: #333333; }
  div.panel-shell.swatchG9BG > div.panel > div.head {
    background-color: #eeeeee;
    color: #333333; }
  div.panel-shell.swatchGABG > div.panel > div.head {
    background-color: #f5f5f5;
    color: #333333; }
  div.panel-shell.swatchGBBG > div.panel > div.head {
    background-color: #fdfdfd;
    color: #333333; }
  div.panel-shell.swatchBLKBG > div.panel > div.head {
    background-color: #111111;
    color: #FFFFFF; }
  div.panel-shell.swatchWHTBG > div.panel > div.head {
    background-color: #FFFFFF;
    color: #333333; }
  div.panel-shell.swatchBGBG > div.panel > div.head {
    background-color: #f7f7f3;
    color: #333333; }
  div.panel-shell.swatchPBGBG > div.panel > div.head {
    background-color: #FFFFFF;
    color: #333333; }

@media screen and (max-width: 1000px) {
  .panel-shell.popup {
    width: 95% !important;
    max-width: 95% !important; }
    .panel-shell.popup > .panel {
      width: 95% !important; } }

.panel-fade-enter-active, .panel-fade-leave-active {
  transition: opacity 200ms; }

.panel-fade-enter, .panel-fade-leave-to {
  opacity: 0; }

.printer div.panel-shell {
  position: initial;
  padding-top: 1rem;
  vertical-align: top; }
  .printer div.panel-shell .panel {
    min-height: 10vh;
    align-self: flex-start; }
    .printer div.panel-shell .panel .head .controls, .printer div.panel-shell .panel .head .buttons {
      display: none; }
    .printer div.panel-shell .panel .foot {
      display: none; }
  .printer div.panel-shell .popup-background {
    display: none; }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE10+ CSS styles go here */
  div.panel-shell {
    max-width: 97vw; } }

@keyframes panelExpand {
  100% {
    transform: rotate(-180deg); } }

@keyframes panelCollapse {
  100% {
    transform: rotate(-180deg); } }

@keyframes panelExpandBorder {
  100% {
    border-color: #FFFFFF; } }

@keyframes panelCollapseBorder {
  100% {
    border-color: #FFFFFF; } }