.fbsetup {

  .btn-close,
  .btn-add,
  .btn-save,
  .btn-edit,
  .btn-cancel,
  .btn-deletecell,
  .btn-hand,
  .btn-plus,
  .btn-popupclose,
  .btn-delete,
  .btn-collupse {
    height: $icon-large;
    width: $icon-large;
    display: block;
    cursor: pointer;
  }
  .btn-deletecell,
  .btn-hand {
    height: 26px;
  }
  .btn-close {
    i {
      position: relative;
    }
  }
  input[type="text"] {
    padding: 2px 10px;
    height: 26px;
    background: color('cumulus');
    color: color('black2');
    font-size: $medium;
    font-family: $base-font;
    border: 1px solid color('manatee');
    @include placeholder();
    &:focus {
      border: 1px solid color('manatee');
      outline: 0;
      -webkit-box-shadow: none;
      box-shadow: none;
    }
    &.form-control {
      @include border-radius(0);
      border: 1px solid color('manatee');
      background: color('cumulus');
    }
  }
  input[type="text"]:disabled {
    background: #ffffff !important;
  }
  .input-read-only {
    background: color('white') !important;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  .disabled {
    pointer-events: none;
    .mars-checkbox {
      height: 26px;
      padding: 3px 0 0 24px;
      position: relative;
      input ~ .checkmark {
        background-color: color('whisper');
      }
    }
  }
  .inputbox {
    position: relative;
    height: 26px;
    width: 154px;
    float: left;
    .btn-deletecell {
      height: 26px;
      border: 1px solid color('manatee');
      border-left: none;
    }
    label {
      font-weight: normal;
    }
  }
  .inputbox span,
  .data {
    height: 26px;
    display: block;
    border: 1px solid color('manatee');
    font-size: $medium;
    background: color('white');
    padding: 2px 10px;
    @include text-with-ellipsis();
  }
  a.data {
    text-align: center;
    color: color('black2');
    text-decoration: underline;
    @include transition(color .4s);
    &:hover {
      color: color('chetwode-blue');
    }
  }
  .caret {
    border-top: 6px solid color('black') !important;
    border-right: 3px solid transparent !important;
    border-left: 3px solid transparent !important;
  }
  .mars-radio {
    float: left;
    cursor: pointer;
    label {
      margin-bottom: 0;
      padding: 3px 5px;
    }
  }
  .content {
    padding: 20px 15px 0 15px;
  }

  /* setupAttributes */
  .setupAttributes {
    padding-bottom: 20px;
    .setup-wrap {
      overflow: auto;
      width: 656px;
      max-width: 100%;
      @media (max-width: 767px) {
        width: 438px;
      }
    }
    .setup-bar {
      position: relative;
      @include linear-gradient(#dde0ec, #9da8ce);
      min-height: 30px;
      padding-right: 100px;
      margin-bottom: 10px;
      h2 {
        font-family: $base-font-semibold;
        font-size: $medium;
        font-weight: normal;
        padding: 7px 10px;
        margin: 0;
      }
      .btn-edit,
      .btn-save,
      .btn-close {
        position: absolute;
        right: 0;
        top: 0;
      }
      .btn-edit {
        right: 5px;
      }

      .btn-save {
          right: 30px;
      }
    }
    .setup-section {
      margin-top: 20px;
      &:after {
        content: '';
        display: table;
        clear: both;
      }
      &:first-child {
        margin-top: 0;
      }
      .setup-section-inner {
        float: left;
      }
      .setup-title {
        background-color: color('tropical-blue');
        min-height: 26px;
        padding: 5px 10px;
        margin: 0;
        font-family: $base-font-semibold;
        font-size: $medium;
        font-weight: normal;
      }
      .setup-content {
        .setup-row {
          display: -ms-grid;
          display: grid;
          -ms-grid-template-columns: 174px 262px;
          grid-template-columns: 174px 262px;
          grid-column-gap: 2px;
          margin-top: 2px;
          .title {
            background-color: color('pattens-blue-2');
            min-height: 26px;
            padding: 3px 10px;
          }
          &.setup-row-title {
            .title {
              background-color: color('link-water');
              font-family: $base-font-semibold;
            }
          }
          .setup-column {
            &.setup-box {
              @include flexbox();
              .btn-plus {
                width: 26px;
                height: 26px;
                margin: 0;
              }
              .form-control {
                width: 50px;
                height: 26px;
                text-align: center;
                display: block;
                margin: 0 0 0 10px;
              }
            }
          }
        }
      }
    }
    .fb-settings {
      .setup-row {
        width: 540px;
      }
      .setup-column.contentarea {
        width: 385px;
      }
      .mars-checkbox {
        margin-left:3px;
        margin-bottom: 0px;
        padding: 3px 22px;
      }
    }
    .setuparea {
      width: 100%;
      .setup-outlet {
        margin-top: 15px;
        display: -ms-grid;
        display: grid;
        -ms-grid-template-columns: 212px 212px 212px;
        grid-template-columns: 212px 212px 212px;
        grid-column-gap: 10px;
        @media (max-width: 767px) {
          -ms-grid-template-columns: 214px 214px;
          grid-template-columns: 214px 214px;
        }
        @media (max-width: 480px) {
          -ms-grid-template-columns: auto;
          grid-template-columns: auto;
        }
        .setup-column {
          margin: 0 0 10px 0;
          @media (max-width: 479px) {
            margin-right: 0;
            width: 100%;
          }
          .btn-hand {
            position: absolute;
            left: 0;
            top: 0;
          }
          .btn-deletecell {
            right: 0;
            top: 0;
          }
          .setup-column-head {
            background: color('tropical-blue');
            height: 26px;
            position: relative;
            padding: 0 30px 0 30px;
            .form-control {
              height: 26px;
            }
            .btn-deletecell {
              left: 0;
              height: 26px;
            }

            .data {
              background: color('tropical-blue') !important;
              white-space: nowrap !important;
              text-overflow: ellipsis;
              overflow: hidden;
            }
            .btn-add {
              height: 26px;
              position: absolute;
              top: 0;
              right: 0;
              @include transition(background-color .4s);
              background-color: color('tropical-blue');
              &:hover {
                background-color: color('dodger-blue');
              }
              i {
                margin: 1px auto;
              }
            }
          }
          ul {
            padding: 0;
            margin: 0;
            position: relative;
            li {
              margin-top: 2px;
              position: relative;
              padding: 0 30px;
              &.ui-sortable-helper {
                width: 212px !important;
              }
              .btn-deletecell {
                border: 1px solid color('manatee');
                border-left: none;
              }
              .form-control {
                height: 26px;
                border-right: none;
              }
              @media (max-width: 480px) {
                float: none;
              }
            }
          }
        }
      }
    }
    .setup-save .setuparea {
      .setup-column-head {
        color: color('black2');
        padding: 0 !important;
        text-align: center;
        span {
          font-family: $base-font-semibold;
          display: block;
          padding: 5px 10px;
        }
      }
      .setup-column {
        &.setup-box .form-control {
          margin: 0 !important;
        }
        ul li {
          padding: 0;
          span {
            display: block;
            height: 26px;
            padding: 2px 10px;
            border: 1px solid color('manatee');
          }
        }
      }
    }
  }

  /*  tab3 */
  .tab3 {
    overflow: hidden;
    margin: 0;
    padding: 0;
    ul {
      @include flexbox();
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      li {
        width: 100%;
        padding: 0;
        cursor: pointer;
        &.current a {
          background: color('bermuda');
        }
        &.current.deactive a {
          background: color('hint-green');
        }
        @media (min-width: 481px) {
          width: 50%;
          padding: 0 2px;
        }
        @media (min-width: 567px) {
          width: 190px;
        }
      }
    }
    .btn-banquet {
      height: 30px;
      line-height: 30px;
      background: color('deluge');
      color: color('white');
      &:hover,
      &.active {
        background: color('strikemaster');
      }
    }
  }
  .item-title {
    height: 26px;
    padding: 2px 10px;
    background: color('deluge');
    color: color('white');
    text-decoration: none;
    width: 184px;
    position: relative;
    @include transition(.4s);
    @include border-radius(5px);
    &.meal-item-title {
      background: color('pattens-blue');
      color: color('black2');
      @include border-radius(0);
    }
    .btn-add {
      height: 100%;
      right: 0;
      i {
        height: 100%;
        width: 100%;
      }
    }
  }
  .inputbox-area {
    .inputbox {
      margin: 0 5px 5px 0;
      &:last-child {
        margin-left: 0;
      }
      .form-control {
        border-right: none;
      }
      &:first-child {
        padding-right: 0;
        border-right: 1px solid color('manatee');
      }
    }
  }
  /* tab container */
  .tab-container {
    margin-top: 5px;
    position: relative;
    &:after {
      content: '';
      display: table;
      clear: both;
    }
    .btn-close,
    .btn-deletecell,
    .btn-add,
    .btn-delete,
    .btn-hand,
    .btn-collupse {
      position: absolute;
      top: 0;
    }
    .btn-close,
    .btn-deletecell {
      right: 0;
    }
    .btn-delete {
      right: 0;
      height: 26px;
    }
    .btn-popupclose {
      margin-right: 5px;
    }
    .btn-hand {
      left: 0;
    }
    .btn-collupse {
      right: 0;
      height: 26px;
      i {
        width: 100%;
        height: 100%;
      }
    }
    .tab-section {
      &.current {
        display: block;
        &.is-sidebar {
          @media (min-width: 641px) {
            display: -ms-grid;
            display: grid;
            grid-template-columns: 153px auto;
            grid-column-gap: 10px;
          }
        }
      }
    }
    .sidebar {
      display: none;
      position: relative;
      z-index: 100;
      @media (min-width: 641px) {
        display: block;
      }
      .sidetabs {
        margin: 0;
        padding: 0;
        li {
          margin: 10px 0 0 0;
          padding: 0;
          &:first-child {
            margin-top: 0;
          }
          a {
            height: 26px;
            line-height: inherit;
            padding: 3px 10px;
            background: color('deluge');
            color: color('white');
            margin: 0;
            display: block;
            text-decoration: none;
            @include border-radius(5px);
            @include transition(.4s);
            &:hover {
              background: color('strikemaster');
            }
          }
          &.current a {
            background: color('strikemaster');
          }
        }
      }
    }
    .maincontent {
      overflow: hidden;
      .tab-link {
        margin-bottom: 10px;
        a {
          padding: 3px 10px;
          background: color('deluge');
          color: color('white');
          display: block;
          text-decoration: none;
          @include border-radius(5px);
          @include transition(.4s);
          &:hover {
            background: color('strikemaster');
          }
        }
        &.current a {
          background: color('strikemaster');
        }
        @media (min-width: 641px) {
          display: none;
        }
      }
    }
  }
  .section-container {
    .btn-save,
    .btn-edit {
      position: absolute;
      right: 0;
    }
    .title {
      height: 30px;
      margin-bottom: 2px;
      padding: 0;
      overflow: hidden;
      background: color('echo-blue');
      @include linear-gradient(#dde0ec, #9da8ce);
      font-family: $base-font-semibold;
      text-align: center;
      position: relative;
      ul {
        margin: 0;
        padding: 0;
        li {
          float: left;
          h2 {
            margin: 0;
            padding: 5px 10px;
            height: 30px;
            line-height: unset;
            font-size: $medium;
            cursor: pointer;
          }
          &.current h2 {
            background: color('alice-blue');
          }
        }
      }
    }
    .section-content {
      margin: 0;
      position: relative;
      overflow: scroll;
      scroll-behavior: smooth;
      padding-bottom: 30px;
      .fixrow-one {
        padding: 30px 0 30px 0;
      }
      .fixrow-two {
        padding: 58px 0 30px 0;
      }
      .stickyHeader {
        position: absolute;
        top: 0;
        z-index: 1;
        background: color('white');
        .sortable-item {
          margin-top: 0;
        }
        @media (min-width: 1231px) {
          width: 100%;
        }
      }
    }
    .grossNet{
      margin-top: 5px;
      padding-left: 10px;
    }
    .section-row {
      margin-top: 2px;
      position: relative;
      z-index: auto;
      &:after {
        content: '';
        display: table;
        clear: both;
      }
      &.section-row-title {
        margin-top: 0;
        .section-group {
          margin-top: 0;
        }
        .section-group .section-column div {
          height: 30px;
        }
      }

      &.new-section-row,
      &.section-edit-row {
        .columnName div {
          padding: 0 30px;
        }
      }
      &.new-section-row {
        background: color('pattens-blue');
        min-height: 26px;
      }
      &.section-row-view {
        .section-column div,
        .columnName div {
          padding: 0 10;
        }
      }
    }
    .section-group {
      margin-top: 2px;
      &:first-child {
        margin-top: 0;
      }
      display: -ms-grid;
      display: grid;
      grid-column-gap: 2px;
      .section-column-title {
        padding: 5px 10px;
      }
    }
    .section-column {
      position: relative;
      .select-time {
        .form-group {
          width: 78px;
          .form-control {
            background: color('white') !important;
          }
        }
      }
      .dropdown {
        width: 100%;
        position: relative;
        button {
          width: 100%;
          height: 26px;
          padding: 0 15px 0 10px;
          margin: 0;
          text-align-last: left;
          border-radius: 0;
          position: relative;
          font-size: $medium;
          color: color('black2');
          border: 1px solid color('manatee');
          background: color('white');
          @include text-with-ellipsis();
          &:before {
            content: '';
            position: absolute;
            z-index: 100;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            right: 5px;
            width: 0;
            height: 0;
            border-top: 5px solid color('black') !important;
            border-right: 3px solid transparent !important;
            border-left: 3px solid transparent !important;
          }
        }
        &.open {
          .dropdown-menu {
            display: block;
          }
        }
        .dropdown-menu {
          position: absolute;
          left: 0;
          padding: 2px 0 5px 0;
          margin: -1px 0 0 0;
          border-radius: 0;
          overflow: auto;
          max-height: 140px;
          width: 178px;
          min-width: inherit;
          display: none;
          li {
            margin: 0;
            padding: 0;
            border: none;
            height: auto;
            a {
              padding: 0 18px 0 10px;
              text-decoration: none;
              display: block;
              color: color('black2') !important;
              font-family: $base-font;
              @include text-with-ellipsis();
              &:hover {
                text-decoration: none;
                background-color: color('white');
                color: color('black2') !important;
              }
            }
            &.active > a {
              background: color('white') url(../images/chi-tic.svg) no-repeat 98% center !important;
              -webkit-background-size: 12px auto !important;
              background-size: 12px auto !important;
            }
            ul {
              margin: 0;
              padding: 0;
              display: none;
              li a {
                padding: 0 18px 0 20px;
              }
              &.opendropdown {
                display: block;
              }
            }
          }
        }
      }
      .form-group {
        margin-bottom: 0;
      }
    }
    .section-column-title {
      height: 30px;
      position: relative;
      background-color: color('tropical-blue');
      font-family: $base-font-semibold;
      font-weight: normal;
      font-size: $medium;
      color: color('black2');
      text-align: center;
      padding: 7px 10px;
      margin: 0;
      .btn-add {
        border: none;
        height: 30px;
        left: inherit;
        right: 0;
        padding: 0 !important;
        margin: 2px;
        background: none !important;
      }
    }
    .inputbox {
      .readonlyinput {
        background: color('white') !important;
        -webkit-box-shadow: none;
        box-shadow: none;
      }
    }
  }
  .sidetab-section {
    display: none;
    max-width: 100%;
    padding-bottom: 10px;
    position: relative;
    z-index: 0;
    @media (min-width: 641px) {
      max-width: 710px;
      -webkit-animation-duration: 1s;
      animation-duration: 1s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-animation-name: slideOutLeft;
      animation-name: slideOutLeft;
    }
    &.current {
      @media (min-width: 641px) {
        -webkit-animation-name: slideInLeft;
        animation-name: slideInLeft;
      }
    }
    .title {
      height: 30px;
      padding: 0 15px;
      @include linear-gradient(#dde0ec, #9da8ce);
      position: relative;
      h2 {
        font-family: $base-font-semibold;
        font-size: $medium;
        color: color('sapphire');
        line-height: 30px;
        margin: 0;
        padding-right: 60px;
        @include text-with-ellipsis();
      }
      .btn-save,
      .btn-edit,
      .btn-close {
        position: absolute;
        top: 0;
        right: 40px;
        display: none;
        &.active {
          display: block;
        }
      }
      .btn-close {
        right: 10px;
        display: block;
      }
    }
    .section-content {
      background: color('white-smoke');
      padding: 20px 10px;
      overflow: visible;
      &:after {
        content: '';
        display: table;
        clear: both;
      }
    }
    .item-group {
      margin-top: 10px;
      &:first-child {
        margin-top: 0;
      }
    }
    .item {
      margin-top: 10px;
      &:first-child {
        margin-top: 0;
      }
      display: -ms-grid;
      display: grid;
      -ms-grid-template-columns: 194px auto;
      grid-template-columns: 194px auto;
      grid-template-rows: auto;
      &:after {
        content: '';
        display: table;
        clear: both;
      }
      .right {
        label {
          margin: 0;
        }
        &:after {
          content: '';
          display: table;
          clear: both;
        }
      }
      .item-column-group {
        display: -ms-grid;
        display: grid;
        grid-column-gap: 5px;
      }
      .item-column .dropdown-menu {
        min-width: 154px !important;
      }
      .scharge,
      .tcharge,
      .item-column-sc,
      .item-column-charge {
        display: none;
        &.active {
          display: block;
        }
      }
      .item-column-title {
        background: color('tropical-blue');
        height: 26px;
        text-align: center;
        font-size: $medium;
        color: color('black2');
        padding: 3px 10px;
        font-family: $base-font-semibold;
      }
      .inputbox-area .inputbox {
        padding-right: 30px;
      }
      .form-rangecalendar {
        margin: 0;
        .col-item {
          overflow: visible;
        }
        .timeselect {
          width: 100%;
          display: block;
          height: 26px;
          line-height: 24px;
          font-family: "SourceSansProRegular";
          font-size: $medium;
          font-weight: normal;
          color: color('black2');
          margin: 0;
          padding: 0;
          border: 1px solid color('manatee');
          background: color('white');
          -webkit-background-size: 24px auto !important;
          background-size: 24px auto !important;
          float: left;
          width: 195px;
          .btn-calendar {
            margin-right: 5px;
          }
          p {
            margin: 0;
          }
        }
        .comparerangepopup {
          width: 460px;
          bottom: inherit;
          right: inherit;
          left: 50%;
          margin: 0 auto;
          top: 50%;
          -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          position: absolute;
          z-index: 10000 !important;
          margin: 0;
        }
        .input-sm {
          height: 26px;
          line-height: 24px;
          border-radius: 0px;
          border: 1px solid color('manatee');
          font-size: $medium;
          font-family: $base-font;
          font-weight: normal;
          color: color('black2');
          padding: 0px 10px;
          margin-bottom: 4px;
          background: color('white');
        }
      }
    }
  }
  .group-seasonality {
    display: -ms-grid;
    display: grid;
    margin-top: 10px;
    .item{
      .item-title {
        background-color:#B3C6E8 !important;
      }
      .meal-item-title {
        background: color('pattens-blue') !important;
      }
    }

    .group-availability {
      margin-top: 10px;
    }
    .btn-add-group {
      display: none;
      &.active {
        display: block;
      }
    }

    .right {
      label {
        float: left;
        font-weight: normal;
      }
      .year-select-group {
        margin-right: 10px;
        float: left;
        .label-text {
          padding: 3px 10px 3px 0;
        }
        &:first-child {
          display: block;
        }
        .data {
          width: 100px;
        }
      }
      .yearselect {
        float: left;
        width: 100px;
      }
      .form-rangecalendar {
        float: left;
      }
      .apply-group {
        .select-area {
          float: left;
          strong {
            display: block;
            font-weight: normal;
            float: left;
            padding: 3px 5px;
          }

          .yearselect2 {
            width: 160px;
          }
        }
        span.copy{
          float: left;
          background: url(../images/icon-copy.png) no-repeat center center;
          height: 30px;
          width: 25px;
          margin-left: 5px;
          cursor:pointer;
        }
      }
    }
    .select-time {
      @include flexbox();
      justify-content: space-between;
      .form-control {
        width: 76px !important;
      }
      .data {
        width: 76px !important;
      }
    }
  }
  .roomservice-view,
  .banquethouse-view,
  .outlet-view {
    .group-seasonality {
      .btn-add-group,
      .group-availability {
        display: block;
      }
    }
  }

  .vertical-tabs-container {
    display: none;
    &.active{
      @media (min-width: 641px) {
        display: -ms-grid !important;
        display: grid !important;
        grid-template-columns: 175px auto;
        grid-column-gap: 10px;
      }
    }
    .vertical-nav-tabs {
      display: none;
      position: relative;
      margin: 0;
      padding: 0;
      border: none;
      @media (min-width: 641px) { display: block; }
      li {
        float: none;
        margin: 0 0 10px 0;
        padding: 0;
        a {
          height: 26px;
          line-height: inherit;
          padding: 3px 10px;
          background: #E1E5F2 !important;
          color: color('black') !important;
          margin: 0;
          display: block;
          text-decoration: none;
          cursor: pointer;
          border-radius: unset;
          @include transition(.4s);
          border: none !important;
          &:hover { background: #B3C6E8 !important; }
        }
        &.active a { background: #B3C6E8 !important; }
      }
    }
    .tab-pane {
      padding-bottom: 10px;
      position: relative;
      .title {
        height: 30px;
        padding: 0 15px;
        @include linear-gradient(#dde0ec, #9da8ce);
        position: relative;
        h2 {
          font-family: $base-font-semibold;
          font-size: $medium;
          color: color('sapphire');
          line-height: 30px;
          margin: 0;
          padding-right: 60px;
          @include text-with-ellipsis();
        }
        .btn-save,
        .btn-edit,
        .btn-close {
          position: absolute;
          top: 0;
          right: 40px;

        }
        .btn-close { right: 10px; display: block; }
      }
      .item-title {
        width: 184px;
        height: 26px;
        display: block;
        padding: 2px 10px;
        text-decoration: none;
        position: relative;
        background: color('pattens-blue');
        color: color('black2');
        @include border-radius(0);
        &.nobgcolor { background: none; }
        .btn-delete,
        .btn-add { height: 26px; width: 26px; display: block; position: absolute; right: 0; top: 0; padding: 1px; }
      }
      .btn-popupclose { margin-right: 5px; }
      .section-content {
        background: color('white-smoke');
        padding: 20px 10px;
        overflow: visible;
        &:after {
          content: '';
          display: table;
          clear: both;
        }
        .active .group-availability { display: block; }
      }
      .item-group {
        margin-top: 10px;
        &:first-child { margin-top: 0; }
      }
      .mars-select {.multiselect-container{ max-height: 100px; overflow: auto; }}
      .item {
        margin-top: 10px;
        &:first-child { margin-top: 0; }
        display: -ms-grid;
        display: grid;
        -ms-grid-template-columns: 194px auto;
        grid-template-columns: 194px auto;
        grid-template-rows: auto;
        &:after { content: ''; display: table; clear: both; }
        .right {
          label { margin: 0; }
          &:after { content: ''; display: table; clear: both; }
        }
        .item-column-group {
          display: -ms-grid;
          display: grid;
          grid-column-gap: 5px;
        }
        .item-column .dropdown-menu { min-width: 154px !important; }
        .scharge,
        .item-column-sc {
          display: none;
          &.active { display: block; }
        }
        .item-column-title {
          background: color('tropical-blue');
          height: 26px;
          text-align: center;
          color: color('black2');
          padding: 3px 10px;
          font-family: $base-font-semibold;
        }
        .inputbox-area .inputbox { padding-right: 30px; }
        .form-rangecalendar {
          margin: 0;
          .col-item { overflow: visible; }
          .timeselect {
            width: 100%;
            display: block;
            height: 26px;
            line-height: 24px;
            font-weight: normal;
            color: color('black2');
            margin: 0;
            padding: 0;
            border: 1px solid color('manatee');
            background: color('white') ;
            -webkit-background-size: 24px auto !important;
            background-size: 24px auto !important;
            float: left;
            width: 195px;
            .btn-calendar { margin-right:5px; }
            p { margin: 0; }
          }
          .comparerangepopup {
            bottom: inherit;
            right: inherit;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
            position: fixed;
            z-index: 10000 !important;
            margin: 0;
          }
          .input-sm {
            height: 26px;
            line-height: 24px;
            border-radius: 0px;
            border: 1px solid color('manatee');
            color: color('black2');
            padding: 0px 10px;
            margin-bottom: 4px;
            background: color('white');
          }
        }
      }
      .group-seasonality {
        display: -ms-grid;
        display: grid;
        margin-top: 10px;
        .group-availability {
          margin-top: 10px;
        }
        .right {
          label { float: left; font-weight: normal; }
          .year-select-group {
            margin-right: 10px;
            float: left;
            .label-text { padding: 3px 10px 3px 0; }
            &:first-child { display: block; }
            .data { width: 100px; }
          }
          .yearselect  {
            float: left;
            width: 100px;
          }
          .form-rangecalendar { float: left;}
          .apply-group {
            .select-area {
              float: left;
              strong { display: block; font-weight: normal; float: left; padding: 3px 5px; }
            }
          }
        }
        .select-time {
          @include flexbox();
          justify-content:space-between;
          .form-control { width: 76px !important; }
          .data { width: 76px !important; }
        }
      }

      /* tab height set */
      .height-set {
        min-height: 332px;
        overflow: scroll;
        max-height: 700px;
        @media (min-width: 768px) { max-height: 575px; }
        @media (min-width: 1024px) { max-height: 332px; }
        @media (min-width: 1280px) { max-height: 675px; }
        @media (min-width: 1366px) { max-height: 419px; }
        @media (min-width: 1400px) { max-height: 701px; }
        @media (min-width: 1440px) { max-height: 551px; }
        @media (min-width: 1600px) { max-height: 551px; }
        @media (min-width: 1680px) { max-height: 701px; }
        @media (min-width: 1920px) { max-height: 731px; }
      }
    }
    .tab-link {
      margin-bottom: 10px;
      a {
        padding: 3px 10px;
        background: color('deluge');
        color: color('white');
        display: block;
        text-decoration: none;
        @include border-radius(5px);
        @include transition(.4s);
      }
      a:hover,
      &.current a { background: color('strikemaster'); }
      @media (min-width: 641px) { display: none; }
    }
  }

  /* vtab-banquet-house */
  .vtabBanquet {
    .tab-banquet {
      @media (min-width: 641px) {
        max-width: 1000px;
      }
      .item-column-group {
        grid-template-columns: 154px 154px;
      }
      .item {
        width: 885px;

        .right {
          width: 800px;
        }
      }
      .item-res-tracking,
      .item-nr-tracking {
        display: none;
        &.active {
          display: -ms-grid;
          display: grid;
        }
      }
      .item-nr-tracking {
        .tracking-code {
          float: left;
          .btn-add i {
            margin: 2px 0 0 1px;
          }
        }
        .inputbox-area {
          float: left;
          width: 178px;
          .inputbox {
            width: 178px;
            border: none;
            margin: 5px 0 0 0;
            &:first-child {
              padding-right: 0;
              margin: 0;
              .data,
              .form-control {
                border: 1px solid color('manatee');
                width: 113px;
              }
            }
            .data,
            .form-control {
              float: left;
              width: 83px;
              &:first-child {
                width: 60px;
                margin-right: 5px;
                border: 1px solid color('manatee');
              }
            }
          }
        }
      }
      .banquethouse-edit,
      .banquethouse-view {
        display: none;
        &.active {
          display: block;
        }
      }
      .banquethouse-edit {
        padding-bottom: 120px;
      }
    }
    .tracking-market,
    .tracking-booking {
      /* width: 50%;*/
      float: left;
      position: relative;
      .btn-add {
        width: 26px;
        height: 26px;
        float: left;
        position: relative;
        display: block;
        margin: 0;
      }
      .mars-radio {
        min-width: 140px;
        height: 26px;
      }
      .data {
        width: 202px;
      }
      .mars-select,
      .mars-select {
        width: 202px;
        float: left;
      }

      //overriding this
      .mars-select select {
        display: block;
        background: #FFFFFF;
      }
    }

    .tracking-booking,
    .tracking-market {
      .segment-dropdown {

        float: left;
        position: relative;
        .dropdown.open,
        .dropdown {
          .btn {
            background: color('white') !important;
            height: 26px;
            border-radius: 0;
            color: color('black2');
            width: 202px;
            text-align: left;
            border: 1px solid color('manatee');
            position: relative;
            .caret {
              position: absolute;
              top: 10px;
              right: 5px;
            }
          }
          .dropdown-menu {
            border-radius: 0;
            width: 202px;
            min-width: inherit;
            margin-top: 0;
            max-height: 90px;
            overflow-y: scroll;
            border: 1px solid color('manatee');
            li {
              padding: 0 10px;
            }
          }
        }
      }
    }
  }

  /* Tab Mini Bar */
  .tab-minibar {
    @media (min-width: 641px) {
      max-width: 420px;
    }
    .data {
      width: 100%;
    }
  }

  /* Tab Room Service */
  .tab-roomservice {
    @media (min-width: 641px) {
      max-width: 922px;
    }
    .room-service-content {
      .mars-select .multiselect-native-select .btn-group {
        .multiselect-selected-text {
          padding: 0px 15px 0 10px !important;
        }
        .caret{
          top:10px;
        }
      }
    }
    .right .full-width {
      width: 313px;
    }
    .item {
      width: 885px;
    }
    .item-column-group {
      grid-template-columns: 154px 154px;
    }
    .roomservice-edit {
      padding-bottom: 100px;
    }
  }

  /* Tab Outlet */
  .tab-outlet {
    @media (min-width: 641px) {
      max-width: 1182px;
    }
    .outlet-content {
      .mars-select .multiselect-native-select .btn-group {
        .multiselect-selected-text {
          padding: 0px 15px 0 10px !important;
        }
        .caret{
          top:10px;
        }
      }
    }
    .top-gap {
      margin-top: 5px;
    }
    .item {
      width: 1145px;
    }
    .item-column-group {
      grid-template-columns: 154px 154px 154px 154px 154px 154px;
    }
    .outlet-edit {
      padding-bottom: 100px;
      .top-gap.forecast-method-container.showErrorBox, .top-gap.outlet-attribute.showErrorBox{
        button.multiselect.dropdown-toggle {
          border: 2px solid red;
        }
      }
    }
  }

  /* SC Mapping */
  .vtabSCMapping {
    max-width: 542px;
    .btn-hand {
      left: 0;
      z-index: 100;
      background-color: color('pattens-blue');
      &:hover {
        background-color: color('hint-green');
      }
    }
    .section-container {
      .title {
        .btn-close {
          right: 10px;
        }
        .btn-edit,
        .btn-save {
          right: 40px;
          top: 0;
        }
        .btn-edit {
          display: none;
        }
      }
      .section-content {
        @media (min-width: 768px) {
          height: 578px;
        }
        @media (min-width: 1024px) {
          height: 452px;
        }
        @media (min-width: 1280px) {
          height: 710px;
        }
        @media (min-width: 1366px) {
          height: 454px;
        }
        @media (min-width: 1400px) {
          height: 736px;
        }
        @media (min-width: 1440px) {
          height: 586px;
        }
        @media (min-width: 1600px) {
          height: 586px;
        }
        @media (min-width: 1680px) {
          height: 736px;
        }
        @media (min-width: 1920px) {
          height: 766px;
        }
        position: relative;
      }
      .section-group {
        grid-template-columns: 160px auto;
      }
      .section-column {
        div {
          position: relative;
          z-index: 10;
          padding: 3px 10px;
          min-height: 24px;
          &.predefineData {
            padding: 3px 10px;
          }
          div {
            border: 1px solid color('manatee');
          }
        }
        position: relative;
        &.columnName {
          .btn-add {
            height: 24px;
            width: 24px;
            left: inherit;
            right: 0;
            top: 1px;
          }
        }
      }
      .columnName {
        width: 160px;
      }
      .columnCode {
        width: 160px;
      }
      .section-group-wrap {
        display: -ms-grid;
        display: grid;
        min-height: 26px;
        position: relative;
      }
      .section-row.section-edit-row,
      .section-row.section-row-view {
        .columnName {
          &:after {
            content: '';
            position: absolute;
            display: block;
            height: 100%;
            width: 100%;
            left: 0;
            top: 0;
            @include linear-gradient(#e2e2e2, #f3f2f2);
            border: none;
          }
        }
      }
      #sctab-3 {
        .section-row.new-section-row,
        .section-row.section-edit-row {
          .columnCode {
            padding: 0 30px;
          }
        }
      }
      .section-row.section-edit-row {
        .columnCode {
          padding: 0 30px 0 0;
        }
        .columnDescription {
          padding: 0;
        }
      }
      .section-row.section-row-view {
        .columnCode,
        .columnDescription {
          border: 1px solid color('manatee');
        }
      }
      .sctab-section {
        display: none;
        &.current {
          display: block;
        }
      }
      .mappingEdit {
        display: block;
      }
      .mappingView {
        display: none;
      }
    }
  }

  /* vtabFunctionSpace */
  .vtabFunctionSpace {
    max-width: 1170px;
    .btn-save,
    .btn-edit {
      right: 10px !important;
      display: none;
      &.active {
        display: block;
      }
    }
    .section-container {
      display: none;
      margin-top: 0px;
      .fixrow-two {
        padding: 58px 0 100px 0;
      }
    }
    .section-content {
      @media (min-width: 768px) {
        height: 578px;
      }
      @media (min-width: 1024px) {
        height: 396px;
      }
      @media (min-width: 1280px) {
        height: 654px;
      }
      @media (min-width: 1366px) {
        height: 398px;
      }
      @media (min-width: 1400px) {
        height: 680px;
      }
      @media (min-width: 1440px) {
        height: 530px;
      }
      @media (min-width: 1600px) {
        height: 530px;
      }
      @media (min-width: 1680px) {
        height: 680px;
      }
      @media (min-width: 1920px) {
        height: 710px;
      }
    }
    .spaceCategorySection {
      background: color('white-smoke');
      min-height: 45px;
      padding: 10px 40px 5px 10px;
      overflow: hidden;
      margin-bottom: 10px;
      position: relative;
      .item-row {
        display: -ms-grid;
        display: grid;
        grid-template-columns: 184px auto;
      }
      .spaceCategoryEdit {
        .inputbox-area {
          .inputbox {
            padding-right: 30px;
          }
          .first-inputbox {
            padding-right: 0;
          }
        }
      }
      .item-title {
        width: 174px;
      }
      .btn-save,
      .btn-edit {
        position: absolute;
        top: 8px;
      }
      .spaceCategoryView {
        .first-inputbox {
          border-right: none;
        }
      }
      .spaceCategoryEdit,
      .spaceCategoryView {
        display: none;
        &.active {
          display: block;
        }
      }
    }
    .section-row {
      min-height: 26px;
    }
    .section-group {
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }
    .section-column {
      width: 140px;
      &.columnName {
        width: 240px;
      }
      &.columnType {
        width: 180px;
        .data-combination {
          padding: 0;
          border: none;
        }
        ul {
          padding: 0;
          margin: 0;
          display: none;
          li {
            height: 26px;
            border: 1px solid color('manatee');
            padding: 2px 10px;
            margin-top: 2px;
            @include text-with-ellipsis();
          }
        }
      }
      &.columnTime {
        width: 160px;
        @include flexbox();
        justify-content: space-between;
        .form-control,
        div {
          width: 79px;
          height: 26px;
        }
        .section-column-title {
          width: 100%;
        }
      }
    }
    .fstab-section {
      display: none;
      &.current {
        display: block;
      }
    }
    .functionSpaceEdit,
    .functionSpaceView {
      display: none;
      &.active {
        display: block;
      }
    }
    .functionSpaceEdit {
      .section-edit-row,
      .new-section-row {
        .columnName {
          padding: 0 30px;
        }
      }
      .section-column .form-control {
        padding: 3px 10px;
        border: 1px solid color('manatee');
      }
    }
    .functionSpaceView {
      .section-row-title .section-column div {
        border: none;
      }
      .section-column div {
        padding: 2px 10px;
        border: 1px solid color('manatee');
      }
      .inputbox-area .first-inputbox .form-control {
        border-right: none;
      }
    }
  }

  /* vtabBanquetPricing */
  .vtabBanquetPricing {
    max-width: 1160px;
    .section-row {
      width: 526px;
      min-height: 26px;
      position: relative;
    }
    .section-content {
      float: left;
      max-width: 100%;
      @media (min-width: 768px) {
        height: 578px;
      }
      @media (min-width: 1024px) {
        height: 444px;
      }
      @media (min-width: 1280px) {
        height: 702px;
      }
      @media (min-width: 1366px) {
        height: 446px;
      }
      @media (min-width: 1400px) {
        height: 728px;
      }
      @media (min-width: 1440px) {
        height: 578px;
      }
      @media (min-width: 1600px) {
        height: 578px;
      }
      @media (min-width: 1680px) {
        height: 728px;
      }
      @media (min-width: 1920px) {
        height: 758px;
      }
    }
    .section-content .fixrow-one {
      padding: 30px 0 30px 0;
    }
    .btn-save,
    .btn-edit {
      position: relative;
      margin-left: 10px;
      right: initial;
      float: left;
      display: none;
      &.active {
        display: block;
      }
    }
    .btn-addpackage {
      background: color('strikemaster');
      height: 30px;
      padding: 5px 10px;
      color: color('white') !important;
      float: left;
      display: block;
    }
    .banquet-pricing-top {
      overflow: hidden;
      margin-bottom: 10px;
    }
    .section-row-title {
      margin-top: 0;
      height: 30px;
      .section-column {
        &.add-column .section-column-title {
          padding: 2px 2px 2px 2px;
        }
        &.addNewColumn .section-column-title {
          padding: 2px 30px 2px 2px;
        }
      }
      .section-column-title {
        width: 100%;
        height: 30px;
        &:after {
          content: '';
          display: table;
          clear: both;
        }
        position: relative;
        .form-control {
          width: 100%;
        }
        .btn-deletecell {
          top: 2px;
          right: 2px;
          border: 1px solid color('manatee');
          border-left: none;
        }
      }
    }
    .new-section-row {
      height: 26px;
      .section-column {
        padding: 0 !important;
      }
      .blankCell {
        background: color('white') !important;
        opacity: 0;
        height: 26px;
      }
      .section-column div {
        span.multiselect-native-select {
          overflow: visible;
          padding: 0 !important;
          border: none;
          .multiselect-container {
            min-width: auto;
            li a {
              padding: 0;
            }
          }
        }
      }
    }
    .section-group {
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
      .section-column {
        width: 140px;
      }
      .columnName {
        width: 240px;
      }
    }
    .banquetPricingView {
      display: none;
      &.active {
        display: block;
      }
      .section-row {
        width: 952px; /* this width value changed respect to edit view */
      }
      .new-section-row,
      .section-row-view {
        .section-column {
          div {
            background-color: color('white');
            padding: 2px 10px;
            border: 1px solid color('manatee');
          }
          &.blankCell div {
            background-color: transparent;
            border: none;
          }
        }
      }
    }
    .banquetPricingEdit {
      display: none;
      &.active {
        display: block;
      }
      .section-edit-row {
        .columnName {
          padding: 0 30px 0 0;
        }
        .columnPerson div {
          background-color: color('white');
          padding: 2px 10px;
          border: 1px solid color('manatee');
        }
      }
    }
  }

  .sc-mapping {
  }

  //booking types
  #sc-mapping-booking {
    .section-edit-row .section-column.columnCode {
      padding: 0 30px;
    }
  }

  //market segments
  #sc-mapping-market-segment {
    .section-edit-row .section-column.columnCode {
      padding: 0 30px;
    }
  }

  #tab-sc-mapping {
    .btn-hand {
      z-index: 0; //override 100 that's in button.scss
    }

    .section-container {
      max-width: 700px;
    }

    .btn-edit {
      right: 10px;
    }
  }

  #tab-sc-operation-parameters {
      .btn-edit {
        /*right: 10px;*/
          display: block;
      }
    .item {
      padding-top: 10px;
      grid-template-columns: 215px auto;

        .item-title {
            width: 205px;
            background: #cce5ff;
            color: #131111;
            border-radius: 0px;
            height: auto;
        }

    }

    .item-group .item:not(:first-child) .item-title {
      background: #F5F5F5;
      margin-left: 3px;
    }

    .year-select-group .multiselect-selected-text {
      padding: 0px 15px 0px 10px;
    }

    /* .seasonal-group {
       padding-top: 10px;
     }*/
  }

  /* Banquet/Catering Setup -> S&C Mapping -> Meal Period View */
  .sc-mapping-meal-period {
    .section-group {
      grid-template-columns: 185px repeat(auto-fit,minmax(100px,1fr));
    }
    .section-content {
      padding: 0px !important;
    }
    .btn-add {
      height: 24px !important;
      width: 24px !important;
      left: inherit;
      right: 0;
      top: 1px;
    }
    .predefineData {
      padding: 3px 10px !important;
    }

    .non-editable-field {
      border: 1px solid #8f91a2;
      padding: 2px 10px;
      display: block;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      height: 26px;
      background: white;
      max-width: 370px;
    }

    .disabled .non-editable-field {
      background: #f5f5f5;
    }
  }

  .tab-function-space {
    .mars-nav-tabs li.active a {
      background-color: rgba(0, 0, 0, 0) !important;
    }
    .mars-nav-tabs li.active-tab a {
      background-color: color('alice-blue') !important;
    }
    max-width: 1170px;
    .disable-pointer {
      pointer-events: none;
    }
    .disable-pointer-hover {
      li:hover {
        cursor: not-allowed;
      }
    }
    .shorten-text {
      max-width: 140px;
      float: left;
      overflow: hidden;
      white-space: nowrap !important;
      text-overflow: ellipsis;
    }
    .shorten-text-input {
      max-width: 240px;
      float: left;
      overflow: hidden;
      white-space: nowrap !important;
      text-overflow: ellipsis;
    }
    .btn-save {
      position: absolute;
      display: none;
      right: 32px !important;
      top: 0;
      &.active { display: block; }
    }
    .btn-edit {
      position: absolute;
      display: none;
      right: 10px !important;
      top: 0;
      &.active { display: block; }
    }
    .btn-close {
      position: absolute;
      display: block;
      top: 0;
    }
    .section-container {
      display: block;
    }
    .section-content {
      @media (min-width: 768px) { height: 578px; }
      @media (min-width: 1024px) { height: 396px; }
      @media (min-width: 1280px) { height: 654px; }
      @media (min-width: 1366px) { height: 398px; }
      @media (min-width: 1400px) { height: 680px; }
      @media (min-width: 1440px) { height: 530px; }
      @media (min-width: 1600px) { height: 530px; }
      @media (min-width: 1680px) { height: 680px; }
      @media (min-width: 1920px) { height: 710px; }
    }
    .spaceCategorySection {
      background: color('white-smoke');
      min-height: 45px;
      padding: 10px 40px 5px 10px;
      overflow: hidden;
      margin-bottom: 10px;
      position: relative;
      .item-row {
        display: -ms-grid;
        display: grid;
        grid-template-columns: 184px auto;
      }
      .spaceCategoryEdit {
        .inputbox-area {
          .inputbox {
            padding-right: 30px;
            border: none;
            .form-control { border-right: none; }
          }
          .first-inputbox { padding-right: 0; .form-control { border-right: 1px solid color('manatee'); } }
        }
      }
      .item-title {
        height: 26px;
        padding: 2px 10px;
        position: relative;
        width: 174px;
        background-color: #DCECFF !important;
        color: color('black');
        border-radius: unset !important;
        .btn-add { right: 0; padding: 1px 2px; }
      }
      .btn-save, .btn-edit { position: absolute; top: 8px; }
      .btn-close { position: absolute; top: 8px; }
      .spaceCategoryView .first-inputbox { border-right:none; }
      .spaceCategoryEdit,
      .spaceCategoryView { display: none; &.active{ display: block; } }
    }
    .section-group { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
    .section-column {
      width: 140px;
      &.columnName { width: 240px; }
      &.columnType {
        width: 180px;
        .data-combination {
          padding: 0; border: none;
          div {
            padding: 2px 10px;
            border: 1px solid #8f91a2;
          }
        }
      }
      &.columnTime {
        width: 160px;
        @include flexbox();
        justify-content: space-between;
        .form-control, div { width: 79px; }
        .section-column-title { width: 100%; }
      }
    }
    .functionSpaceEdit,
    .functionSpaceView {
      &.show{ display: block; }
    }
    .functionSpaceEdit {
      .section-edit-row,
      .new-section-row { .columnName { padding: 0 30px; } }
      .section-column .form-control { padding: 3px 10px; }
      .multiselect-container {
         width: 100% !important;
        .multiselect-native-select {
          position: relative;
          display: block;
          float: left;
          margin: 0 9px 0 0px;
        }
        button {
          width: 100%;
          height: 26px;
          padding: 0 15px 0 10px;
          margin: 0;
          text-align-last: left;
          border-radius: 0;
          position: relative;
          color: color('black2');
          background: color('white');
          border: 1px solid color('manatee');
        }
        li {
          width: 100% !important;
          a label{
            width:150px !important;
            float: left;
          }
          &.active{
            a label{
              background: url(../images/icon-tick.png) no-repeat 90% center !important;
            }
          }
        }
        .dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover {
          color: black !important;
          text-decoration: none;
          background-color: none !important;
          outline: 0;
        }
      }
    }
    .functionSpaceView {
      .section-row-title .section-column div { border: none; }
      .inputbox-area .first-inputbox .form-control { border-right: none; }
      .columnType {
        ul {
          padding: 0;
          margin: 0;
          display: block;
          li {
            height: 26px;
            border: 1px solid color('manatee');
            padding: 2px 10px;
            margin-top: 2px;
            background-color: #f5f5f5;
            @include text-with-ellipsis();
          }
        }
      }
    }
  }
}

/* ie fixing */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .fbsetup {
    .tab-container {
      .sidebar {
        margin-right: 10px;
        -ms-grid-row: 1;
        grid-row: 1;
        -ms-grid-column: 1;
        grid-column: 1;
      }
      .maincontent {
        -ms-grid-row: 1;
        grid-row: 1;
        -ms-grid-column: 2;
        grid-column: 2;
      }
    }
    .sidetab-section {
      .item {
        display: block;
        .item-title {
          float: left;
        }
        .right {
          margin-left: 194px;
          @include flexbox();
          flex-wrap: nowrap;
          &.item-column-group {
            margin-right: -5px;
            .item-column {
              float: left;
              width: 154px;
              margin: 0 5px 5px 0;
            }
          }
        }
      }
      .group-seasonality {
        display: block;
        margin-top: 10px;
        .select-time .form-control {
          width: 75px !important;
        }
      }
    }
    .section-container {
      .section-row {
        display: block;
        .section-group {
          @include flexbox();
          .section-column {
            float: left;
            margin-left: 2px;
            &:first-child {
              margin-left: 0;
            }
          }
        }
      }
    }
    .tab-banquet {
      .inputbox-area {
        width: 216px;
      }
    }
    .vtabSCMapping {
      .section-container {
        .section-group {
          display: block;
          .section-column {
            float: left;
            display: block;
          }
        }
        .section-group-wrap {
          @include flexbox();
          flex-wrap: wrap;
          .section-group {
            .section-column {
              margin-left: 2px;
              &.first-child {
                margin-left: 0;
              }
            }
          }
        }
      }
    }
    .vtabFunctionSpace {
      .spaceCategorySection {
        .item-row {
          .item-title {
            float: left;
          }
          .inputbox-area {
            margin-left: 184px;
          }
          .inputbox {
            float: left;
          }
        }
      }
    }
  }
}