@import url('./fonts.css');

&:not(:has(.legacy-pos)) {
  &:not(:has(.legacy-commercial)) {
    * {
      box-sizing: border-box;
      font-family: 'Poppins', sans-serif;
    }
  }
}

*:focus-visible {
  outline: none;
}

body,
html {
  height: 100%; /*Compatibility beetween Old and New shell*/
  margin: 0; /*Compatibility beetween Old and New shell*/
  &:not(:has(.legacy-pos)) {
    /*height: 100%; Is disabled due to Compatibility beetween Old and New shell*/
    /*margin: 0; Is disabled due to Compatibility beetween Old and New shell*/
    overflow: hidden;
  }
}

body {
  &:not(:has(.legacy-pos)) {
    height: 100% !important;
    font-family: 'Poppins', sans-serif !important;
    -webkit-font-smoothing: antialiased !important;

    background-image: url('../assets/background.png');
    background-size: cover;
  }
  &:has(.legacy-pos) {
    overflow-y: hidden;
    position: relative;
    padding-top: 50px; /*Compatibility beetween Old and New shell*/
    overflow-x: hidden;
    color: #f7f7f9;
    font-family: 'Poppins', sans-serif;
    /* font-family: open-sans; */
    font-size: 14px;
    line-height: 24px;
    background: no-repeat fixed #f7f7f9;

    h4 {
      font-size: 16px !important;
    }

    h5 {
      font-size: 14px !important;
    }
  }
  &:has(.legacy-commercial),
  &:has(.dashboards) {
    font-size: 14px;
    h4 {
      font-size: 16px !important;
    }

    h5 {
      font-size: 14px !important;
    }
  }
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--editor-surface-default-background) inset !important;
}

button,
input,
optgroup,
select,
textarea {
  outline: 0;
}

a {
  text-decoration: unset !important;
  color: unset !important;
}

::-moz-selection {
  /* Code for Firefox */
  color: var(--click-surface-primary-hover-foreground);
  background: var(--click-surface-primary-default-background);
}

::selection {
  color: var(--click-surface-primary-hover-foreground);
  background: var(--click-surface-primary-default-background);
}

#single-spa-application\:\@wintouch\/admin,
#single-spa-application\:\@wintouch\/schedule,
#single-spa-application\:\@wintouch\/loyalty,
#single-spa-application\:\@wintouch\/hotel,
#single-spa-application\:\@wintouch\/healthcare,
#single-spa-application\:\@wintouch\/franchising,
#single-spa-application\:\@wintouch\/legacy {
  user-select: none;
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}
#single-spa-application\:\@wintouch\/shell > wt-shell-root > wt-neo-datalist,
#single-spa-application\:\@wintouch\/shell > wt-shell-root > wt-shell-dashboards,
#single-spa-application\:\@wintouch\/shell > wt-shell-root > wt-shell-dev-portal,
#single-spa-application\:\@wintouch\/shell > wt-shell-root > wt-shell-overview,
#single-spa-application\:\@wintouch\/shell > wt-shell-root > * > maintenance {
  user-select: none;
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}

:has(.legacy-pos) {
  main {
    height: 100%;
  }

  .legacy-commercial,
  .dashboards {
    height: 100%;
  }

  #single-spa-application\:\@wintouch\/shell {
    wt-neo-navbar,
    #offline-input-element {
      display: none !important;
    }
    color: #212529;
  }
}

.legacy-pos {
  height: 100%;

  > div {
    height: 100%;
    > application > div {
      /*Compatibility beetween Old and New shell*/
      height: 100%; /*Compatibility beetween Old and New shell*/
      > div {
        /*Compatibility beetween Old and New shell*/
        height: 100%; /*Compatibility beetween Old and New shell*/
        > div {
          /*Compatibility beetween Old and New shell*/
          height: 100%; /*Compatibility beetween Old and New shell*/
          > div {
            /*Compatibility beetween Old and New shell*/
            height: 100%; /*Compatibility beetween Old and New shell*/
            > div {
              /*Compatibility beetween Old and New shell*/
              height: 100%; /*Compatibility beetween Old and New shell*/
              > div {
                /*Compatibility beetween Old and New shell*/
                height: 100%; /*Compatibility beetween Old and New shell*/
              }
            }
          }
        }
      }
    }
  }
}

.modal-backdrop.in {
  /*Compatibility beetween Old and New shell*/
  opacity: 0.65; /*Compatibility beetween Old and New shell*/
  background-color: black; /*Compatibility beetween Old and New shell*/
  width: 100vw; /*Compatibility beetween Old and New shell*/
  height: 100vh; /*Compatibility beetween Old and New shell*/
  position: fixed; /*Compatibility beetween Old and New shell*/
  top: 0; /*Compatibility beetween Old and New shell*/
  left: 0; /*Compatibility beetween Old and New shell*/
  z-index: 1040; /*Compatibility beetween Old and New shell*/
  /*+.wj-dropdown-panel{
    display: none;
  }*/
}

#single-spa-application\:\@wintouch\/shell {
  /*Compatibility beetween Old and New shell*/
  /*>wt-shell-root>wt-neo-exception-modal>wt-neo-modal>.wt-modal>.wt-modal-header*/
  /*wt-neo-exception-modal{ /*Compatibility beetween Old and New shell
    .wt-modal-header, /*Compatibility beetween Old and New shell
    .wt-modal-content{ /*Compatibility beetween Old and New shell*/
  * {
    box-sizing: border-box; /*Compatibility beetween Old and New shell*/
  }
  /*}
  }*/
}

.wj-dropdown-panel {
  /*Compatibility beetween Old and New shell*/
  outline: none; /*Compatibility beetween Old and New shell*/
  box-shadow: 0 6px 13px rgba(0, 0, 0, 0.2); /*Compatibility beetween Old and New shell*/
  /* Boostrap modals have zIndex 1050, so go higher */
  z-index: 1500 !important; /*Compatibility beetween Old and New shell*/
}

.wj-content {
  /*Compatibility beetween Old and New shell*/
  display: inline-block; /*Compatibility beetween Old and New shell*/
  border: 1px solid rgba(0, 0, 0, 0.2); /*Compatibility beetween Old and New shell*/
  border-radius: 4px; /*Compatibility beetween Old and New shell*/
  background-color: #fff; /*Compatibility beetween Old and New shell*/
  outline: none; /*Compatibility beetween Old and New shell*/
  box-sizing: border-box; /*Compatibility beetween Old and New shell*/
}

/* set display: inline-table so height:100% works properly even without <!DOCTYPE html> tag */
.wj-content.wj-dropdown, /*Compatibility beetween Old and New shell*/
.wj-content.wj-inputnumber, /*Compatibility beetween Old and New shell*/
.wj-content.wj-inputmask, /*Compatibility beetween Old and New shell*/
.wj-content.wj-calendar-outer, /*Compatibility beetween Old and New shell*/
.wj-content.wj-pager {
  /*Compatibility beetween Old and New shell*/
  display: inline-table; /*Compatibility beetween Old and New shell*/
} /*Compatibility beetween Old and New shell*/

.wj-control {
  /*Compatibility beetween Old and New shell*/
  outline: none; /*Compatibility beetween Old and New shell*/
  -moz-user-select: none; /*Compatibility beetween Old and New shell*/
  -webkit-user-select: none; /*Compatibility beetween Old and New shell*/
  -ms-user-select: none; /*Compatibility beetween Old and New shell*/
  user-select: none; /*Compatibility beetween Old and New shell*/
} /*Compatibility beetween Old and New shell*/

.wj-listbox {
  /*Compatibility beetween Old and New shell*/
  overflow: auto; /*Compatibility beetween Old and New shell*/
  cursor: default; /*Compatibility beetween Old and New shell*/
} /*Compatibility beetween Old and New shell*/

.wj-listbox-item {
  /*Compatibility beetween Old and New shell*/
  box-sizing: border-box; /*Compatibility beetween Old and New shell*/
  padding: 3px 10px; /*Compatibility beetween Old and New shell*/
} /*Compatibility beetween Old and New shell*/

.wj-tooltip {
  /*Compatibility beetween Old and New shell*/
  position: absolute; /*Compatibility beetween Old and New shell*/
  z-index: 1000; /*Compatibility beetween Old and New shell*/
  top: 0px; /*Compatibility beetween Old and New shell*/
  left: 0px; /*Compatibility beetween Old and New shell*/
  pointer-events: none; /*Compatibility beetween Old and New shell*/
  max-width: 400px; /*Compatibility beetween Old and New shell*/
  padding: 6px; /*Compatibility beetween Old and New shell*/
  background-color: #fff; /*Compatibility beetween Old and New shell*/
  border: 1px solid rgba(0, 0, 0, 0.1); /*Compatibility beetween Old and New shell*/
  border-radius: 6px; /*Compatibility beetween Old and New shell*/
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); /*Compatibility beetween Old and New shell*/
  box-sizing: border-box; /*Compatibility beetween Old and New shell*/
} /*Compatibility beetween Old and New shell*/

.hide {
  /*Compatibility beetween Old and New shell*/
  display: none !important; /*Compatibility beetween Old and New shell*/
} /*Compatibility beetween Old and New shell*/

.wj-calendar-outer {
  /*Compatibility beetween Old and New shell*/
  display: block; /*Compatibility beetween Old and New shell*/
  padding: 10px; /*Compatibility beetween Old and New shell*/
  width: 100%; /*Compatibility beetween Old and New shell*/
  height: auto; /*Compatibility beetween Old and New shell*/
  cursor: default; /*Compatibility beetween Old and New shell*/
}

.wj-calendar td {
  /*Compatibility beetween Old and New shell*/
  text-align: center; /*Compatibility beetween Old and New shell*/
}

/* In dropdown, set width to avoid flicker as the user navigates months (in IE only...) */
.wj-dropdown-panel.wj-calendar {
  /*Compatibility beetween Old and New shell*/
  width: 20em; /*Compatibility beetween Old and New shell*/
}

/* In dropdown, remove background and border */
.wj-dropdown-panel .wj-calendar-outer {
  /*Compatibility beetween Old and New shell*/
  border: 0; /*Compatibility beetween Old and New shell*/
  background: none; /*Compatibility beetween Old and New shell*/
}

/*.wj-calendar-header {
  display: block;
  padding: 0 0 15px 0;
  width: 100%;
}

/* Float month selection to the left */
/*.wj-month-select {
  float: left;
  display: inline-block;
  cursor: pointer;
}

/* Float calendar button group to the right */
/*.wj-calendar-header .wj-btn-group {
  float: right;
  display: inline-block;
  margin-bottom: 7px;
}

  /* Size button group in calendar header */
/*.wj-calendar-header .wj-btn-group .wj-btn {
      padding: 0 8px 1px 8px;
      min-height: 25px;
  }

/* -- Days of the month -- */

/*.wj-calendar-month {
  box-sizing: border-box;
  width: 100%;
  border-collapse: collapse;
  font: inherit;
}

  .wj-calendar-month td {
      width: 14.29%;
      padding: 5px 0;
      border: none;
  }

  /* Slightly reduce size of text in calendar header */
/*.wj-calendar-month .wj-header {
      font-size: 90%;
  }

/* -- Months of the year -- */

/*.wj-calendar-year {
  box-sizing: border-box;
  width: 100%;
  border-collapse: collapse;
  font: inherit;
}

  .wj-calendar-year td {
      width: 25%;
      padding: 8px;
      border: none;
  }

  .wj-glyph-up {
    position: relative;
    display: inline-block;
    border-right: .4em solid transparent;
    border-bottom: .5em solid;
    border-left: .4em solid transparent;
    opacity: 0.75;
    cursor: pointer;
}

.wj-glyph-down {
    position: relative;
    display: inline-block;
    border-top: .5em solid;
    border-right: .4em solid transparent;
    border-left: .4em solid transparent;
    opacity: 0.75;
    cursor: pointer;
}

.wj-glyph-left,
.wj-glyph-step-backward {
    position: relative;
    display: inline-block;
    border-top: .4em solid transparent;
    border-right: .5em solid;
    border-bottom: .4em solid transparent;
    opacity: 0.75;
    cursor: pointer;
}

.wj-glyph-step-backward {
    transform: translateX(.12em);
}
    .wj-glyph-step-backward:after {
        position: absolute;
        border-left: .2em solid;
        height: .75em;
        transform: translate(-100%,-50%);
        content: "";
    }

.wj-glyph-right,
.wj-glyph-step-forward {
    position: relative;
    display: inline-block;
    border-top: .4em solid transparent;
    border-bottom: .4em solid transparent;
    border-left: .5em solid;
    opacity: 0.75;
    cursor: pointer;
}
    .wj-glyph-step-forward:after {
        position: absolute;
        border-left: .2em solid;
        height: .75em;
        transform: translateY(-50%);
        content: "";
    }

.wj-glyph-left-rtl,
.wj-glyph-step-backward-rtl {
    position: relative;
    display: inline-block;
    border-top: .4em solid transparent;
    border-bottom: .4em solid transparent;
    border-left: .5em solid;
    opacity: 0.75;
    cursor: pointer;
}
    .wj-glyph-step-backward-rtl:after {
        position: absolute;
        border-left: .2em solid;
        height: .75em;
        transform: translate(100%, -50%);
        content: "";
    }

.wj-glyph-right-rtl,
.wj-glyph-step-forward-rtl {
    position: relative;
    display: inline-block;
    border-top: .4em solid transparent;
    border-right: .5em solid;
    border-bottom: .4em solid transparent;
    opacity: 0.75;
    cursor: pointer;
}

.wj-glyph-step-forward-rtl {
    transform: translateX(.12em);
}
    .wj-glyph-step-forward-rtl:after {
        position: absolute;
        border-left: .2em solid;
        height: .75em;
        transform: translateY(-50%);
        content: "";
    }

.wj-glyph-down-left {
    position: relative;
    display: inline-block;
    border-top: .65em solid transparent;
    border-left: .65em solid;
    opacity: 0.75;
    cursor: pointer;
}

.wj-glyph-down-right {
    position: relative;
    display: inline-block;
    border-bottom: .65em solid;
    border-left: .65em solid transparent;
    opacity: 0.75;
    cursor: pointer;
}

.wj-glyph-up-left {
    position: relative;
    display: inline-block;
    border-bottom: .65em solid transparent;
    border-left: .65em solid;
    opacity: 0.75;
    cursor: pointer;
}

.wj-glyph-up-right {
    position: relative;
    display: inline-block;
    border-top: .65em solid;
    border-left: .65em solid transparent;
    opacity: 0.75;
    cursor: pointer;
}

.wj-glyph-circle {
    position: relative;
    display: inline-block;
    border: .25em solid;
    border-radius: 1em;
    transform: translateY(-.1em);
    opacity: 0.75;
    cursor: pointer;
}

.wj-glyph-square {
    position: relative;
    display: inline-block;
    border: .25em solid;
    opacity: 0.75;
    cursor: pointer;
}

.wj-glyph-diamond {
    position: relative;
    display: inline-block;
    border: .25em solid;
    transform: rotate(45deg);
    transform-origin: 50% 50%;
    opacity: 0.75;
    cursor: pointer;
}

.wj-glyph-check {
    position: relative;
    display: inline-block;
    width: .75em;
    height: .75em;
    border-right: .3em solid;
    border-bottom: .22em solid;
    transform: rotate(35deg) scaleX(.5);
    opacity: 0.75;
    cursor: pointer;
}

.wj-glyph-filter {
    position: relative;
    box-sizing: border-box;
    display: inline-block;
    top: -.1em;
    width: .5em;
    border-top: .5em solid;
    border-right: .4em solid transparent;
    border-left: .4em solid transparent;
    opacity: 0.75;
    cursor: pointer;
}
    .wj-glyph-filter:after {
        position: absolute;
        box-sizing: border-box;
        border-left: .2em solid;
        height: .4em;
        transform: translateX(-50%);
        top: -.2em;
        content: "";
    }

[dir="rtl"] .wj-glyph-filter:after {
    transform: translateX(50%);
}

.wj-glyph-plus,
.wj-glyph-minus {
    position: relative;
    box-sizing: border-box;
    display: inline-block;
    border-top: .25em solid;
    width: .9em;
    top: -.2em;
    opacity: 0.75;
    cursor: pointer;
}
    .wj-glyph-plus:after {
        position: absolute;
        box-sizing: border-box;
        border-left: .25em solid;
        width: .25em;
        height: .85em;
        left: .32em;
        top: -.55em;
        content: "";
    }

.wj-glyph-file {
    position: relative;
    display: inline-block;
    border-left: .7em solid;
    height: .85em;
    opacity: 0.75;
    cursor: pointer;
}
    .wj-glyph-file:after {
        position: absolute;
        transform: translateX(-100%);
        border-top: .3em solid transparent;
        border-left: .3em solid white;
        content: "";
    }

.wj-glyph-calendar {
    position: relative;
    display: inline-block;
    top: .2em;
    width: 1em;
    height: 1em;
    border: .1em solid;
    border-top: .3em solid;
    opacity: 0.75;
    cursor: pointer;
}
    .wj-glyph-calendar:after {
        position: absolute;
        font-size: 50%;
        top: -.15em;
        left: .4em;
        content: '1';
    }

.wj-glyph-clock {
    position: relative;
    display: inline-block;
    top: .2em;
    width: 1em;
    height: 1em;
    border: .13em solid;
    border-radius: 50%;
    opacity: 0.75;
    cursor: pointer;
}
    .wj-glyph-clock:after {
        position: absolute;
        border-left: .1em solid;
        border-bottom: .1em solid;
        width: .3em;
        height: .4em;
        top: .05em;
        left: .32em;
        content: "";
    }

.wj-glyph-pencil {
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em;
    opacity: 0.75;
}
    .wj-glyph-pencil:after {
        position: absolute;
        left: 0;
        content: "\270E";
    }

.wj-glyph-asterisk {
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em;
    opacity: 0.75;
}
    .wj-glyph-asterisk:after {
        position: absolute;
        left: 0;
        content: "\2731";
    }

    /* Remove first button right-side border radius and margin */
/*.wj-btn-group > .wj-btn:first-child:not(:last-child) {
        border-right: none;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

.wj-btn-default {
  border: 1px solid rgba(0,0,0,0.2);
  background-color: transparent;
  color: inherit;
  /*font-weight: bold;*/
/*}

  /* Hover on 'default' button */
/*.wj-btn-default:hover {
      background-color: rgba(0,0,0,0.1);
  }

  .wj-btn-default:focus {
      background-color: rgba(0,0,0,0.1);
  }

button,
html input[type=button],
input[type=reset],
input[type=submit] {
    -webkit-appearance: button;
    overflow: visible;
    border-radius: inherit;
    cursor: pointer;
}*/

/*BUG #74941*/
.wj-listbox {
  max-width: calc(100vw - 2 * var(--margin-lg));
  overflow-x: hidden !important;
}