/*@import 'https://fonts.googleapis.com/css?family=Indie+Flower|Open+Sans|PT+Mono|Roboto|Ubuntu';*/
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(../material-design-icons/MaterialIcons-Regular.eot);
  /* For IE6-8 */
  src: local("Material Icons"), local("MaterialIcons-Regular"), url(../material-design-icons/MaterialIcons-Regular.woff2) format("woff2"), url(../material-design-icons/MaterialIcons-Regular.woff) format("woff"), url(../material-design-icons/MaterialIcons-Regular.ttf) format("truetype"); }

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga'; }

@font-face {
  font-family: "Precious Sans";
  src: url("../fontStyles/PreciousSans/PRCSM___.TTF") format("truetype");
  font-weight: normal;
  font-style: normal; }

.precious-sans-font {
  font-family: 'Precious Sans'; }

@font-face {
  font-family: "Encode Sans";
  src: url("../fontStyles/EncodeSans-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: "SF";
  src: url("../fontStyles/SF-Pro-Display-Regular.otf") format("truetype");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: "Bliss 2";
  src: url("../fontStyles/Bliss2R.otf") format("truetype");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: "Effra";
  src: url("../fontStyles/Effra_Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: "Poppins";
  src: url("../fontStyles/Poppins-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

/* ---------------------------------------------------------------------- */
/*  Chat
/* ---------------------------------------------------------------------- */
.discussion {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block; }
  .discussion .other {
    float: left; }
    .discussion .other .message:last-child .message-text {
      border-radius: 16px 25px 25px 0;
      float: left; }
    .discussion .other .message:last-child .message-avatar {
      display: block; }
    .discussion .other .message:last-child .message-date {
      clear: both;
      text-align: left; }
    .discussion .other .message {
      float: left; }
    .discussion .other .message:first-child .message-name {
      display: block !important; }
    .discussion .other .message-text {
      background-color: #e5e5ea;
      color: black;
      padding-left: 22px;
      margin: 0 !important; }
    .discussion .other .message-avatar {
      left: 10px;
      bottom: 15px; }
  .discussion .self {
    float: right; }
    .discussion .self .message:last-child .message-text {
      border-radius: 25px 25px 0;
      float: left; }
    .discussion .self .message:last-child .message-avatar {
      display: block; }
    .discussion .self .message:last-child .message-name {
      display: none; }
    .discussion .self .message {
      float: right; }
    .discussion .self .message-type-image {
      max-width: 40%;
      display: block;
      float: right; }
    .discussion .self .message:first-child .message-name {
      display: block !important; }
    .discussion .self .message-text {
      background-color: #e6f0d9;
      color: #343434;
      padding-right: 22px;
      margin: 0 !important; }
    .discussion .self .message-avatar {
      float: right; }
    .discussion .self .message-date {
      clear: both;
      text-align: right; }
    .discussion .self .message-avatar {
      right: 10px;
      bottom: 15px; }
  .discussion li {
    position: relative;
    margin: 0 0 10px 0;
    width: 80%; }
    .discussion li.messages-date {
      display: inline-block;
      color: #696969;
      font-weight: 500;
      line-height: 1;
      margin: 25px 0;
      text-align: center;
      width: 100% !important;
      font-size: 12px; }
    .discussion li.nextSame {
      margin-bottom: 0 !important; }
      .discussion li.nextSame .message-text {
        border-radius: 16px !important; }
      .discussion li.nextSame .message-avatar {
        display: none !important; }
  .discussion .message {
    margin: 1px 55px 5px 55px;
    clear: both; }
  .discussion .cursor-pointer {
    cursor: pointer; }
  .discussion .download-file {
    color: #81b442 !important;
    cursor: pointer; }
  .discussion .message-name {
    color: #8e8e93;
    font-size: 12px;
    line-height: 1;
    margin-bottom: 2px;
    margin-top: 7px;
    margin-left: 48px;
    display: none; }
  .discussion .message-text {
    border-radius: 16px;
    box-sizing: border-box;
    font-size: 15px;
    line-height: 1.2;
    min-height: 30px;
    min-width: 100%;
    padding: 11px 36px 11px; }
  .discussion .message-avatar {
    display: none;
    position: absolute;
    bottom: -5px;
    height: 40px;
    width: 40px; }
    .discussion .message-avatar img {
      border-radius: 100%;
      width: 40px;
      height: 40px; }

.message-bar {
  position: relative;
  height: 50px;
  width: 100%;
  margin: 0;
  display: table;
  background: #f3f3f3;
  border-radius: 10px; }
  .message-bar .message-inner {
    height: 100%;
    padding: 0 8px;
    display: flex;
    align-items: center;
    width: 100%; }
  .message-bar .send-icon {
    cursor: pointer;
    margin: 0 20px; }
  .message-bar .attach-icon {
    cursor: pointer;
    margin: 0 13px; }
  .message-bar #chat-file-upload {
    display: none; }
  .message-bar .message-area {
    flex: 1; }
  .message-bar textarea,
  .message-bar input {
    background: #f3f3f3;
    border: none;
    border-radius: 10px;
    box-shadow: none;
    font-family: inherit;
    height: 50px;
    line-height: 20px;
    margin: 0;
    padding: 3px 23px;
    resize: none;
    width: 100%;
    outline: none !important; }
  .message-bar .link {
    padding: 0 10px;
    line-height: 44px;
    position: relative;
    display: table-cell;
    width: 30px;
    vertical-align: middle; }
  .message-bar a.icon-only {
    color: #8e8e93;
    font-size: 20px;
    margin: 0;
    margin-right: 8px; }

.main-options {
  display: flex;
  align-items: center;
  height: 75px;
  border-bottom: 1px solid #eeeeee; }
  .main-options .main-option {
    font-size: 28px;
    color: #bcc0bd;
    text-transform: uppercase;
    margin-inline-end: 40px; }
    .main-options .main-option.selected {
      color: #5b5b60; }

.form-section-title {
  font-weight: bold;
  font-size: 18px;
  color: #5b5b60;
  margin-bottom: 12px; }
  .form-section-title .optional-section {
    color: #BCC0BD;
    text-transform: lowercase; }

.form-section-part {
  margin-bottom: 40px; }
  .form-section-part .selectize-input {
    height: 34px;
    overflow: unset; }
  .form-section-part input[disabled] {
    border-color: #c8c7cc !important; }

.upload-merchant-logo {
  display: flex; }
  .upload-merchant-logo .upload-text-container {
    margin: 0 11px; }
    .upload-merchant-logo .upload-text-container .upload-text {
      color: #D40000;
      font-weight: bold;
      font-size: 16px; }
    .upload-merchant-logo .upload-text-container .upload-description {
      color: #a7a9ac;
      font-size: 13px; }

.merchant-logo-input {
  display: none !important; }

.add-address {
  color: #D40000;
  font-weight: bold;
  font-size: 16px; }

.add-merchant-btn {
  margin-top: 20px; }

.action-btn {
  margin-left: 10px; }

.merchant-info-container {
  margin-bottom: 20px; }

.info {
  padding: 0 0 18px 0;
  margin-bottom: 18px; }
  .info .info-label {
    font-size: 14px;
    color: #a7a9ac; }
  .info .info-value {
    font-size: 18px;
    color: #5b5b60;
    margin-top: 4px; }

.info:not(:last-child) {
  border-bottom: 1px solid #eeeeee; }

.merchant-actions-container {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-start; }
  .merchant-actions-container button {
    width: 121px;
    margin-inline-end: 14px;
    margin-right: 10px; }

.custom-header {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  border: none; }
  .custom-header::after, .custom-header::before {
    all: unset; }

.custom-title {
  display: flex;
  align-items: center; }

.filter-button-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end; }

.address-input-container {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 24px; }
  .address-input-container input {
    flex: 1; }
  .address-input-container .map-icon {
    margin: 0 11px 0 19px; }

.map-container {
  margin-bottom: 24px; }

.tags-input-container {
  padding: 3px 10px;
  border: 1px solid #c8c7cc; }
  .tags-input-container input {
    border: none !important; }

.tags-container {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px; }
  .tags-container .tag {
    display: flex;
    align-items: center;
    background: #eeeeee;
    border-radius: 18px;
    margin-inline-end: 8px;
    padding: 3px 12px;
    margin-top: 8px; }
    .tags-container .tag input {
      background: transparent !important;
      border: none !important;
      height: 24px;
      width: 60px; }
    .tags-container .tag .delete-icon {
      margin-inline-start: 11px; }

.merchant-address-options {
  display: flex;
  margin-bottom: 12px;
  white-space: nowrap; }
  .merchant-address-options .merchant-address-option {
    display: flex;
    height: 40px;
    margin-inline-end: 8px;
    border-radius: 4px;
    border: 1px solid #c8c7cc;
    padding: 4px 16px 12px 16px; }
    .merchant-address-options .merchant-address-option.selected {
      border: 1px solid #D40000; }
      .merchant-address-options .merchant-address-option.selected .clip-radio label:after {
        border: 2px solid #D40000; }
      .merchant-address-options .merchant-address-option.selected .clip-radio label {
        color: #D40000; }
    .merchant-address-options .merchant-address-option .clip-radio label {
      font-size: 16px;
      color: #5b5b60; }
    .merchant-address-options .merchant-address-option .clip-radio label:after {
      border: 2px solid #807D7D; }

.merchant-image {
  object-fit: contain; }

.see-more-container {
  display: flex;
  justify-content: space-between;
  align-items: center; }

.see-more {
  color: #D40000;
  font-weight: bold;
  font-size: 18px; }

.add-new-category {
  font-weight: bold;
  font-size: 16px;
  color: #D40000;
  margin-top: 10px; }

.add-input-container {
  display: flex;
  width: 100%; }
  .add-input-container.bordered {
    border: 1px solid #c8c7cc; }
  .add-input-container input {
    flex: 1;
    border: none !important; }
  .add-input-container .action-icons {
    display: flex; }
    .add-input-container .action-icons img {
      margin-inline-start: 18px; }

.categories-to-edit {
  margin: 0 -15px; }
  .categories-to-edit .edit-category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eeeeee;
    padding: 13px 16px; }
    .categories-to-edit .edit-category-item input {
      flex: 1;
      border: none !important; }

.campaign-options {
  display: flex;
  margin-bottom: 16px;
  border-bottom: 1px solid #eeeeee;
  width: 100%; }
  .campaign-options .campaign-option {
    color: #7d807e;
    font-size: 16px;
    margin-inline-end: 32px;
    padding-bottom: 16px; }
    .campaign-options .campaign-option.selected {
      border-bottom: 4px solid #D40000;
      color: #191a19; }

.promotion-preview {
  padding: 24px 32px;
  background: #fff;
  width: 100%; }
  .promotion-preview .container-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #5b5b60; }
  .promotion-preview img {
    width: 100%;
    max-height: 150px;
    object-fit: contain;
    border-radius: 8px;
    margin-bottom: 20px; }
  .promotion-preview .promotion-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 22px;
    color: #5b5b60; }
  .promotion-preview .description-label {
    margin-bottom: 4px;
    color: #a7a9ac;
    font-size: 13px; }
  .promotion-preview .description {
    font-size: 16px;
    color: #5b5b60; }

.page-title {
  display: flex;
  align-items: center;
  justify-content: space-between; }
  .page-title .back-button-container {
    display: flex;
    align-items: center;
    color: #5b5b60;
    font-size: 24px;
    font-weight: bold; }
    .page-title .back-button-container img {
      margin-inline-end: 9px; }
  .page-title .step {
    font-size: 14px;
    color: #a7a9ac; }

.and-or-select {
  background-repeat: no-repeat;
  background-position: 3rem;
  background-color: transparent !important;
  border: none !important;
  color: #D40000 !important;
  font-weight: bold;
  font-size: 18px !important;
  padding-inline-end: 20px !important;
  width: 4.6rem; }
  .and-or-select:focus {
    outline: none; }

.min-txn-field {
  padding-left: 0; }

.audience-overview {
  background: #fff; }
  .audience-overview .overview-header {
    border-bottom: 1px solid #c8c7cc;
    color: #5b5b60;
    font-weight: bold;
    font-size: 20px; }
  .audience-overview .overview-header,
  .audience-overview .overview-body {
    padding: 16px 32px; }
  .audience-overview .criteria {
    font-size: 16px;
    font-weight: bold;
    color: #5b5b60;
    margin-bottom: 8px; }
  .audience-overview .description {
    font-size: 16px;
    color: #7b7d82;
    margin-bottom: 24px; }

.green-range-picker .input-group-addon {
  background-color: #D40000;
  border-color: #D40000; }

.clear-all-container {
  display: flex;
  justify-content: space-between;
  align-items: center; }
  .clear-all-container .form-section-title {
    margin-bottom: 0; }

.hoverable:hover {
  background-color: #eee; }

.ng-invalid:not(.ng-pristine), .ng-invalid[ng-dropdown-multiselect] button {
  border-color: #FF3333 !important; }

.error-text {
  color: #FF3333 !important; }

.time-frame-pickers-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start; }
  .time-frame-pickers-wrapper div:not(:first-child) {
    margin-left: 10px; }

.ml-timeframe-options {
  margin-left: 10px; }

.level-spend-field {
  padding-left: 0;
  margin-bottom: 1rem; }

.truncate {
  width: 15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.pos-wrapper .pos-edit-icon {
  margin-left: 1rem;
  font-size: 1.2rem; }

.pos-wrapper .pos-list {
  overflow: hidden; }

.spend-logic-wrapper {
  display: flex;
  flex-direction: column; }
  .spend-logic-wrapper .spend-min-level {
    margin-bottom: 0; }

.add-pos-modal {
  padding: 2rem 3rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start; }
  .add-pos-modal .posid-error {
    margin-top: 5px;
    font-weight: bold; }
  .add-pos-modal .save-button {
    align-self: flex-end;
    margin-top: 1rem; }
  .add-pos-modal .chips-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start; }
    .add-pos-modal .chips-list .chip {
      background-color: #eee;
      border-radius: 18px;
      padding: 5px 10px;
      font-size: 16px;
      color: #5B5B60;
      margin: 10px 10px 0 0; }
      .add-pos-modal .chips-list .chip i {
        margin-left: 5px; }

.merchant-choice {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: start;
  height: 30px; }
  .merchant-choice .merchant-logo-wrapper {
    height: 100%;
    width: 80px; }
    .merchant-choice .merchant-logo-wrapper .merchant-logo {
      height: 20px;
      width: auto; }
  .merchant-choice .merchant-name {
    margin-left: 10px; }

.no-wrap {
  white-space: normal; }

.green {
  color: #8CC349; }

.red {
  color: #D40000; }

.cell-overflow {
  max-width: 350px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap; }
  .cell-overflow div {
    display: inline; }

.reward-container {
  width: 100%;
  display: flex;
  justify-content: space-around;
  padding: 15px 0; }

.reward-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 32px;
  border: 1px solid #EDEBEB;
  box-shadow: 0px 0px 2px rgba(25, 26, 25, 0.1), 0px 5px 10px rgba(25, 26, 25, 0.05);
  margin: 0 20px;
  flex: 1; }
  .reward-card .title {
    font-size: 22px;
    font-weight: bold;
    margin: 16px 0 4px 0;
    line-height: 35.2px;
    color: #807D7D;
    text-align: center; }
  .reward-card .card-description {
    font-size: 14px;
    color: #807D7D;
    text-align: center; }

.reward-header {
  padding: 36px 36px 0 36px;
  border-bottom: 1px solid #EDEBEB; }
  .reward-header .header-title {
    font-size: 24px;
    color: #1A1919;
    margin-bottom: 19px; }
  .reward-header .customer-info {
    display: flex;
    align-items: center;
    margin-bottom: 8px; }
    .reward-header .customer-info .customer-name {
      font-size: 16px;
      color: #1A1919; }
    .reward-header .customer-info .status-container {
      display: flex;
      align-items: center;
      margin: 0 16px;
      color: #1A1919;
      font-size: 14px;
      padding-bottom: 3px; }
      .reward-header .customer-info .status-container .customer-status {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        margin-inline-end: 4px; }
  .reward-header .header-main-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center; }
    .reward-header .header-main-wrapper .header-options {
      display: flex;
      align-items: center; }
      .reward-header .header-main-wrapper .header-options .header-option {
        margin-inline-end: 32px;
        padding: 15px 0;
        font-size: 16px;
        color: #807D7D; }
        .reward-header .header-main-wrapper .header-options .header-option.selected {
          color: #1A1919;
          border-bottom: 4px solid #D40000; }
    .reward-header .header-main-wrapper .total-earned-wrapper {
      display: flex;
      align-items: center; }
      .reward-header .header-main-wrapper .total-earned-wrapper .total-earned {
        font-size: 18px;
        color: #1A1919;
        margin-inline-end: 16px; }

.custom-year-picker {
  padding: 5px 12px;
  background: #EDEBEB;
  font-size: 18px;
  color: #1A1919;
  display: flex;
  align-items: center;
  border-radius: 7px; }

.rewards-content {
  padding: 24px 32px;
  background: white; }
  .rewards-content .offers-list .offer-item {
    padding: 24px;
    border: 1px solid #EDEBEB;
    margin-bottom: 24px; }
    .rewards-content .offers-list .offer-item .upper-section {
      display: flex;
      justify-content: space-between;
      margin-bottom: 24px; }
    .rewards-content .offers-list .offer-item .logo-outer-container {
      display: flex;
      align-items: center; }
      .rewards-content .offers-list .offer-item .logo-outer-container .logo-container {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: 1px solid #EDEBEB;
        flex-shrink: 0; }
        .rewards-content .offers-list .offer-item .logo-outer-container .logo-container img {
          width: 100%;
          border-radius: inherit;
          height: 100%; }
      .rewards-content .offers-list .offer-item .logo-outer-container .name-container {
        margin-inline-start: 17px; }
        .rewards-content .offers-list .offer-item .logo-outer-container .name-container .name {
          font-size: 20px;
          color: #1A1919;
          margin-bottom: 6px;
          font-weight: bold; }
        .rewards-content .offers-list .offer-item .logo-outer-container .name-container .description {
          font-size: 14px;
          color: #807D7D; }
    .rewards-content .offers-list .offer-item .amount-earned {
      font-size: 20px;
      color: #1A1919;
      font-weight: bold; }
    .rewards-content .offers-list .offer-item .offer-buttons {
      display: flex;
      height: max-content; }
      .rewards-content .offers-list .offer-item .offer-buttons .btn:first-child {
        margin-inline-end: 16px; }
    .rewards-content .offers-list .offer-item .progress-bars {
      display: flex;
      justify-content: space-between; }
      .rewards-content .offers-list .offer-item .progress-bars .progress-container {
        width: calc(50% - 24px); }
        .rewards-content .offers-list .offer-item .progress-bars .progress-container .custom-progress-bar {
          background: #EDEBEB; }
          .rewards-content .offers-list .offer-item .progress-bars .progress-container .custom-progress-bar .progress-bar {
            background: #1A1919; }

.progress-info {
  display: flex;
  justify-content: space-between;
  color: #1A1919;
  font-size: 16px;
  margin-bottom: 4px; }

.earned-offer-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }
  .earned-offer-list .earned-offer-item {
    width: calc(50% - 12px); }

.histories-modal .header {
  display: flex;
  align-items: center;
  padding-bottom: 10px; }
  .histories-modal .header .logo-container {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid #EDEBEB; }
    .histories-modal .header .logo-container img {
      width: 100%;
      border-radius: inherit;
      height: 100%; }
  .histories-modal .header .name-container {
    margin-inline-start: 17px; }
    .histories-modal .header .name-container .name {
      font-size: 20px;
      color: #1A1919;
      margin-bottom: 6px;
      font-weight: bold; }
    .histories-modal .header .name-container .description {
      font-size: 14px;
      color: #807D7D; }

.histories-modal .transaction-list {
  border-top: 1px solid #EDEBEB;
  margin-top: 10px; }

.histories-modal .transaction-item {
  display: flex;
  justify-content: space-between;
  padding: 12px 0; }
  .histories-modal .transaction-item .description {
    font-size: 16px;
    color: #1A1919; }
  .histories-modal .transaction-item .date {
    font-size: 14px;
    color: #807D7D; }

.histories-modal .transaction-item:not(:last-child) {
  border-bottom: 1px solid #EDEBEB; }

.histories-modal .progress-bars {
  padding: 22px 0 2px 0; }
  .histories-modal .progress-bars .progress-container .custom-progress-bar {
    background: #EDEBEB; }
    .histories-modal .progress-bars .progress-container .custom-progress-bar .progress-bar {
      background: #1A1919; }
  .histories-modal .progress-bars .offer-logic {
    background: #EDEBEB;
    border-radius: 4px;
    padding: 4px 7px;
    width: fit-content;
    margin-bottom: 20px;
    text-transform: uppercase; }

.upload-file-container {
  display: flex; }
  .upload-file-container .upload-file-dropdown {
    background: #EDEBEB;
    width: 100px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #1A1919; }
  .upload-file-container .actions .dropdown-toggle {
    padding: 0;
    margin-inline-end: 8px; }
  .upload-file-container .actions .dropdown-menu a {
    padding: 0; }
    .upload-file-container .actions .dropdown-menu a label {
      color: #1A1A1A;
      margin-bottom: 0;
      width: 100%;
      padding: 10px 0;
      text-transform: lowercase; }
    .upload-file-container .actions .dropdown-menu a label:first-letter {
      text-transform: uppercase; }
  .upload-file-container .tags-input-container {
    flex: 1; }

.merchant-options-container {
  display: flex;
  margin: 9px 0 16px 0; }

.merchant-option-container {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #1A1919;
  width: max-content;
  margin-bottom: 0;
  font-size: 16px; }

.rewards-number-container {
  display: flex;
  align-items: center; }

.custom-placeholder::placeholder {
  font-size: 20px; }

.large-input-size {
  font-size: 20px; }

.or-section {
  font-size: 18px;
  color: #7B7D82;
  margin-top: 8px;
  margin-bottom: 18px;
  font-weight: bold; }

.loyalty-rewards-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around; }
  .loyalty-rewards-details .header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    width: 100%;
    margin-top: 1rem; }
    .loyalty-rewards-details .header > *:not(:first-child) {
      margin: 0 1.5rem; }
    .loyalty-rewards-details .header .status-text {
      margin-left: auto !important; }
    .loyalty-rewards-details .header .text-button {
      border: none;
      background: none;
      font-size: 16px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center; }
      .loyalty-rewards-details .header .text-button > :first-child {
        margin-left: 5px; }
    .loyalty-rewards-details .header .action-icon {
      margin-right: 5px;
      font-size: 15px !important; }
  .loyalty-rewards-details ng-include {
    width: 100%; }
  .loyalty-rewards-details .truncate {
    width: 15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  .loyalty-rewards-details .no-wrap {
    white-space: normal; }
  .loyalty-rewards-details .section {
    display: flex;
    flex-direction: row;
    align-items: start;
    width: 100%;
    justify-content: start;
    background-color: #FFF;
    margin: 1rem 0;
    padding: 1rem 0 1rem 2.5rem; }
    .loyalty-rewards-details .section .card {
      background: white;
      margin: 10px 0; }
    .loyalty-rewards-details .section > div {
      flex: 1;
      padding: 10px 20px; }
  .loyalty-rewards-details .wrapper-edit {
    display: flex;
    flex-direction: row; }
    .loyalty-rewards-details .wrapper-edit > button {
      margin-left: auto;
      color: #D40000;
      font-weight: bold;
      font-size: 1rem; }
  .loyalty-rewards-details .merchant-name {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    padding-top: 5px; }
    .loyalty-rewards-details .merchant-name img {
      height: auto;
      width: 80px; }
    .loyalty-rewards-details .merchant-name > strong {
      margin-left: 15px; }
  .loyalty-rewards-details .text-button {
    border: none;
    background: none; }
  .loyalty-rewards-details .offer-img {
    width: auto;
    max-height: 200px;
    border-radius: 10px; }
  .loyalty-rewards-details .field-column {
    display: flex;
    flex-direction: column; }
    .loyalty-rewards-details .field-column .header-title {
      font-size: 20px;
      font-weight: bold !important;
      margin-bottom: 1rem; }
    .loyalty-rewards-details .field-column > div {
      margin: 10px 0; }
  .loyalty-rewards-details .field-title {
    font-size: 14px;
    color: #A7A9AC; }
  .loyalty-rewards-details .last-title {
    margin-top: 40px; }
  .loyalty-rewards-details .field-value {
    font-size: 18px;
    color: #5B5B60; }
  .loyalty-rewards-details .green {
    color: #8CC349; }
  .loyalty-rewards-details .yellow {
    color: #FFA928; }
  .loyalty-rewards-details .red {
    color: #FF3333; }

.card-control-tile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  font-size: 14px; }
  .card-control-tile .switch {
    height: 20px;
    width: 42px; }
    .card-control-tile .switch small {
      height: 20px;
      width: 20px; }

.card-control-tile:not(:last-child) {
  border-bottom: thin solid #adadad; }

.login-flex-row {
  height: calc(100vh - 65px) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important; }

.login-logo {
  margin-bottom: 4rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center; }
  .login-logo img {
    transform: scale(1.6); }

#experience-editor .nav-tabs.nav-justified > li {
  background: #dcdcdc; }

#experience-editor .xstudio-container {
  height: calc(100vh - 190px);
  position: relative;
  padding: 0px; }
  #experience-editor .xstudio-container #xstudio-tabs-preview-partition {
    display: flex;
    flex-direction: row;
    height: 100%; }
    #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs {
      flex: 2; }
      #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs .uib-tab.active a {
        color: #D40000;
        font-weight: bold; }
    #experience-editor .xstudio-container #xstudio-tabs-preview-partition #phone-preview {
      flex: 1; }
    #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs {
      margin: 0px 12px;
      background: white;
      height: 100%; }
      #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs .tab-content > .tab-pane {
        padding: 0px; }
      #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab {
        padding: 0px 4px; }
        #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #pages-toggle {
          z-index: 5;
          cursor: pointer;
          transition: all 0.4s;
          position: absolute;
          top: 0px;
          left: 0px;
          padding: 4px 10px;
          background: #D40000;
          color: white;
          border-top-left-radius: 0px;
          border-bottom-left-radius: 0px;
          border-top-right-radius: 4px;
          border-bottom-right-radius: 4px; }
          #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #pages-toggle.open {
            left: 217px;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px; }
          #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #pages-toggle .fa {
            transition: transform 0.4s ease-out;
            transform: rotateZ(0deg); }
            #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #pages-toggle .fa.open {
              transform: rotateZ(180deg); }
        #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction {
          display: flex;
          flex-direction: row; }
          #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #pages-editor-expanding-wrapper {
            flex: 0 0 0px;
            transition: flex-basis 0.4s;
            height: calc(100vh - 250px);
            overflow-x: hidden; }
            #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #pages-editor-expanding-wrapper.open {
              flex-basis: 240px; }
            #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #pages-editor-expanding-wrapper #pages-editor {
              display: flex;
              flex-direction: column;
              align-items: center;
              width: 240px;
              height: 100%;
              background: #f5f5f5; }
              #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #pages-editor-expanding-wrapper #pages-editor .divider {
                width: 100%;
                border-top: 1px solid #ebebeb; }
              #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #pages-editor-expanding-wrapper #pages-editor .add-new-page-button {
                position: relative;
                width: 190px; }
                #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #pages-editor-expanding-wrapper #pages-editor .add-new-page-button i {
                  position: absolute;
                  margin: 0px 10px;
                  left: 0px; }
              #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #pages-editor-expanding-wrapper #pages-editor .pages-wrapper {
                overflow: scroll; }
                #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #pages-editor-expanding-wrapper #pages-editor .pages-wrapper .pages-heading {
                  height: 40px;
                  width: 240px;
                  padding: 4px 8px;
                  display: flex;
                  flex-direction: row;
                  align-items: center;
                  justify-content: space-around;
                  color: #606060;
                  background-color: #e8e8e8; }
                  #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #pages-editor-expanding-wrapper #pages-editor .pages-wrapper .pages-heading .pages-icon-holder {
                    flex: 1; }
                    #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #pages-editor-expanding-wrapper #pages-editor .pages-wrapper .pages-heading .pages-icon-holder i {
                      font-size: 18px; }
                  #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #pages-editor-expanding-wrapper #pages-editor .pages-wrapper .pages-heading .move-icon {
                    cursor: grab;
                    flex: 1;
                    color: #606060;
                    font-size: 14px; }
                  #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #pages-editor-expanding-wrapper #pages-editor .pages-wrapper .pages-heading .pages-title {
                    cursor: pointer;
                    flex: 5;
                    height: 100%;
                    line-height: 32px;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    font-size: 14px; }
                  #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #pages-editor-expanding-wrapper #pages-editor .pages-wrapper .pages-heading .selected-indicator {
                    height: 100%;
                    line-height: 38px; }
                    #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #pages-editor-expanding-wrapper #pages-editor .pages-wrapper .pages-heading .selected-indicator i {
                      transform: rotateZ(0deg);
                      transition: transform 0.3s ease-out; }
                      #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #pages-editor-expanding-wrapper #pages-editor .pages-wrapper .pages-heading .selected-indicator i.open {
                        transform: rotateZ(90deg); }
                #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #pages-editor-expanding-wrapper #pages-editor .pages-wrapper .container-list-area {
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  padding: 15px; }
                  #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #pages-editor-expanding-wrapper #pages-editor .pages-wrapper .container-list-area .container-list {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    justify-content: space-between; }
                    #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #pages-editor-expanding-wrapper #pages-editor .pages-wrapper .container-list-area .container-list .container-list-card {
                      cursor: pointer;
                      display: flex;
                      flex-direction: column;
                      align-items: center;
                      width: 98px;
                      height: 120px;
                      margin-left: 2px;
                      margin-right: 2px;
                      margin-bottom: 16px;
                      justify-content: space-around;
                      background-color: white;
                      box-shadow: 0px 2px 8px #ddd;
                      border-radius: 5px;
                      text-align: center; }
                      #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #pages-editor-expanding-wrapper #pages-editor .pages-wrapper .container-list-area .container-list .container-list-card i {
                        padding-top: 10px;
                        font-size: 36px; }
                      #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #pages-editor-expanding-wrapper #pages-editor .pages-wrapper .container-list-area .container-list .container-list-card img {
                        padding-top: 10px; }
                      #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #pages-editor-expanding-wrapper #pages-editor .pages-wrapper .container-list-area .container-list .container-list-card.highlight {
                        color: white;
                        background-color: #D40000; }
          #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #no-page-selected-placeholder {
            width: 100%;
            min-width: 300px;
            text-align: center;
            margin-top: 80px; }
            #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #no-page-selected-placeholder img {
              margin-bottom: 16px; }
          #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #container-editor-wrapper {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: calc(100vh - 250px);
            overflow-y: scroll; }
            #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #container-editor-wrapper #page-info-header {
              padding: 40px;
              padding-top: 48px;
              height: 93px;
              border-bottom: #ebebeb 1px solid; }
              #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #container-editor-wrapper #page-info-header .edit-text-icon {
                cursor: pointer; }
            #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #container-editor-wrapper #selected-cards-list .selected-card-row {
              min-height: 40px;
              height: 40px;
              background: #f4f4f4;
              display: flex;
              flex-direction: row;
              align-items: center;
              margin-bottom: 2px;
              padding: 0px 40px; }
              #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #container-editor-wrapper #selected-cards-list .selected-card-row .selected-card-title {
                cursor: pointer;
                flex: 8;
                font-weight: bold; }
              #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #container-editor-wrapper #selected-cards-list .selected-card-row .selected-card-move-icon {
                cursor: grab;
                flex: 1;
                color: #606060; }
            #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #container-editor-wrapper #container-editor {
              margin: 40px; }
              #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #container-editor-wrapper #container-editor .container-title {
                margin-bottom: 12px;
                font-weight: bold; }
              #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #container-editor-wrapper #container-editor .side-dashed {
                padding-left: 20px;
                padding-bottom: 40px;
                margin-left: 10px; }
                #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #container-editor-wrapper #container-editor .side-dashed:not(.no-border) {
                  border-left: 1px #8c8c8c dashed; }
              #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #container-editor-wrapper #container-editor .numbered-title {
                display: flex;
                flex-direction: row;
                padding-bottom: 24px;
                transform: translateX(-30px); }
                #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #container-editor-wrapper #container-editor .numbered-title .circular-number {
                  min-width: 20px;
                  width: 20px;
                  height: 20px;
                  border-radius: 100%;
                  color: white;
                  text-align: center;
                  padding-top: 2px;
                  background-color: #8c8c8c; }
                #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #container-editor-wrapper #container-editor .numbered-title .title-text {
                  padding-left: 30px; }
              #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #container-editor-wrapper #container-editor .container-variant-selector {
                width: 90%;
                padding: 12px;
                margin: 12px 20px;
                border-radius: 5px;
                background-color: #f3f3f3;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center; }
                #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #container-editor-wrapper #container-editor .container-variant-selector .container-variant-score-card {
                  cursor: pointer;
                  min-width: 120px;
                  width: 45%;
                  height: 100px;
                  padding: 8px;
                  margin: 6px 4px;
                  border-radius: 5px;
                  background-color: #cbcbcb;
                  transition: background-color 0.2s;
                  color: #606060;
                  display: flex;
                  flex-direction: column;
                  justify-content: flex-end; }
                  #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #container-editor-wrapper #container-editor .container-variant-selector .container-variant-score-card:hover {
                    background-color: #d8d8d8; }
                  #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #container-editor-wrapper #container-editor .container-variant-selector .container-variant-score-card.active {
                    background-color: #ff6e6e; }
            #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #container-editor-wrapper #container-dock-area {
              flex: 1;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center; }
              #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #container-editor-wrapper #container-dock-area .material-icons {
                font-size: 54px;
                color: #D40000; }
              #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #functionalities-tab #page-construction #container-editor-wrapper #container-dock-area .drop-container-here-text {
                font-size: 20px; }
      #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #styles-tab {
        display: flex;
        flex-direction: row;
        padding: 0px 4px;
        height: calc(100vh - 250px); }
        #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #styles-tab #experience-customization-nav {
          max-width: 106px;
          height: 100%;
          background: #f5f5f5; }
          #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #styles-tab #experience-customization-nav #experience-customization-nav-title {
            text-align: center;
            padding: 12px;
            font-size: 14px;
            font-weight: bold;
            border-bottom: 1px solid #ebebeb; }
          #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #styles-tab #experience-customization-nav #experience-nav-buttons-wrapper::-webkit-scrollbar {
            display: none; }
          #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #styles-tab #experience-customization-nav #experience-nav-buttons-wrapper {
            padding-top: 34px;
            overflow-y: auto;
            overflow-x: hidden;
            height: calc(100vh - 300px);
            position: relative;
            width: 135px;
            -ms-overflow-style: none;
            /* IE and Edge */
            scrollbar-width: none;
            /* Firefox */ }
            #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #styles-tab #experience-customization-nav #experience-nav-buttons-wrapper .menu-wrapper {
              position: absolute; }
            #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #styles-tab #experience-customization-nav #experience-nav-buttons-wrapper .experience-nav-button-wrapper {
              position: relative;
              box-shadow: 0px 2px 6px #ddd;
              margin: 8px;
              width: 90px; }
              #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #styles-tab #experience-customization-nav #experience-nav-buttons-wrapper .experience-nav-button-wrapper .selected-indicator {
                font-size: 18px;
                position: absolute;
                background-color: #D40000;
                right: 10px;
                top: 35%;
                height: 30px;
                width: 40px;
                border-radius: 5px;
                text-align: end;
                padding: 6px 10px;
                transition: right 0.25s 0.07s;
                color: white; }
              #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #styles-tab #experience-customization-nav #experience-nav-buttons-wrapper .experience-nav-button-wrapper .experience-nav-button {
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                cursor: pointer;
                position: relative;
                width: 90px;
                height: 110px;
                background: white;
                transition: background-color 0.2s;
                border-radius: 5px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                z-index: 1; }
                #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #styles-tab #experience-customization-nav #experience-nav-buttons-wrapper .experience-nav-button-wrapper .experience-nav-button .material-icons {
                  font-size: 34px;
                  color: #d0d0d0; }
              #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #styles-tab #experience-customization-nav #experience-nav-buttons-wrapper .experience-nav-button-wrapper.active .experience-nav-button {
                color: white;
                background-color: #D40000; }
                #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #styles-tab #experience-customization-nav #experience-nav-buttons-wrapper .experience-nav-button-wrapper.active .experience-nav-button .material-icons {
                  color: white; }
              #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #styles-tab #experience-customization-nav #experience-nav-buttons-wrapper .experience-nav-button-wrapper.active .selected-indicator {
                right: -35px; }
        #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #styles-tab #experience-customization-wrapper {
          flex: 1;
          overflow: hidden;
          padding: 16px 28px;
          border-right: 1px solid #e8e8e8; }
          #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #styles-tab #experience-customization-wrapper #experience-customization-header {
            text-align: center;
            font-size: 14px;
            margin-top: 40px;
            margin-bottom: 20px; }
          #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #styles-tab #experience-customization-wrapper #experience-editing-area {
            overflow: scroll;
            height: calc(100vh - 350px); }
            #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #styles-tab #experience-customization-wrapper #experience-editing-area #menu-list {
              display: flex;
              flex-direction: row;
              flex-wrap: wrap;
              justify-content: center; }
              #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #styles-tab #experience-customization-wrapper #experience-editing-area #menu-list .menu-layout-type {
                cursor: pointer;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                background-color: #ebebeb;
                transition: background-color 0.4s;
                width: 44%;
                min-width: 220px;
                padding: 12px;
                margin: 12px;
                border-radius: 5px; }
                #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #styles-tab #experience-customization-wrapper #experience-editing-area #menu-list .menu-layout-type:hover {
                  background-color: #d8d8d8; }
                #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #styles-tab #experience-customization-wrapper #experience-editing-area #menu-list .menu-layout-type.active {
                  background-color: #ff6e6e; }
                #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #styles-tab #experience-customization-wrapper #experience-editing-area #menu-list .menu-layout-type div {
                  padding: 0px 4px; }
                #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #styles-tab #experience-customization-wrapper #experience-editing-area #menu-list .menu-layout-type img {
                  width: 60px;
                  height: 120px; }
            #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #styles-tab #experience-customization-wrapper #experience-editing-area #colors-list {
              padding: 10px; }
              #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #styles-tab #experience-customization-wrapper #experience-editing-area #colors-list .color-group {
                position: relative;
                border-left: 1px dashed #8c8c8c;
                padding: 0px 16px;
                padding-bottom: 45px; }
                #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #styles-tab #experience-customization-wrapper #experience-editing-area #colors-list .color-group:last-child {
                  border-left: none; }
                #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #styles-tab #experience-customization-wrapper #experience-editing-area #colors-list .color-group > div {
                  padding-bottom: 8px; }
                #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #styles-tab #experience-customization-wrapper #experience-editing-area #colors-list .color-group .circular-number {
                  position: absolute;
                  border-radius: 100%;
                  width: 20px;
                  height: 20px;
                  background-color: #8c8c8c;
                  color: white;
                  text-align: center;
                  line-height: 20px;
                  top: 0px;
                  left: -10px; }
                #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #styles-tab #experience-customization-wrapper #experience-editing-area #colors-list .color-group .color-row {
                  display: flex;
                  flex-direction: row;
                  justify-content: space-between; }
                #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #styles-tab #experience-customization-wrapper #experience-editing-area #colors-list .color-group .titular-color {
                  font-weight: bold;
                  font-size: 16px;
                  color: #2e2e2e; }
                  #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #styles-tab #experience-customization-wrapper #experience-editing-area #colors-list .color-group .titular-color .color-square {
                    margin: 0px;
                    min-width: 25px;
                    height: 25px; }
            #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #styles-tab #experience-customization-wrapper #experience-editing-area #fonts-list .font-type-row {
              display: flex;
              flex-direction: row;
              align-items: center;
              background-color: #ebebeb;
              border-radius: 5px;
              padding: 12px 20px;
              margin: 12px 8px;
              min-height: 80px;
              justify-content: space-between; }
              #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #styles-tab #experience-customization-wrapper #experience-editing-area #fonts-list .font-type-row .trailing-items {
                display: flex;
                flex-direction: row;
                width: 95px;
                justify-content: space-between; }
                #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #styles-tab #experience-customization-wrapper #experience-editing-area #fonts-list .font-type-row .trailing-items input {
                  width: 50px; }
              #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #styles-tab #experience-customization-wrapper #experience-editing-area #fonts-list .font-type-row .edit-icon {
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                cursor: pointer;
                color: #606060; }
                #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #styles-tab #experience-customization-wrapper #experience-editing-area #fonts-list .font-type-row .edit-icon:hover {
                  transform: scale(1.15);
                  color: #7a7a7a; }
                #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #styles-tab #experience-customization-wrapper #experience-editing-area #fonts-list .font-type-row .edit-icon .material-icons {
                  font-size: 18px; }
              #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #styles-tab #experience-customization-wrapper #experience-editing-area #fonts-list .font-type-row input {
                border: 1px solid #ebebeb !important;
                background: #f2f2f2 !important; }
                #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #styles-tab #experience-customization-wrapper #experience-editing-area #fonts-list .font-type-row input:hover {
                  border: 1px solid #ddd !important; }
            #experience-editor .xstudio-container #xstudio-tabs-preview-partition #editor-tabs #styles-tab #experience-customization-wrapper #experience-editing-area #fonts-list .font-select-dropdown {
              margin: 0px 10px;
              position: absolute;
              top: 82px;
              width: 93%; }
    #experience-editor .xstudio-container #xstudio-tabs-preview-partition #phone-preview-wrapper {
      flex: 1;
      min-width: 385px;
      max-width: 385px;
      overflow-y: scroll; }
      #experience-editor .xstudio-container #xstudio-tabs-preview-partition #phone-preview-wrapper .refresh-tooltip {
        position: absolute;
        cursor: pointer;
        padding: 4px 8px;
        color: white;
        text-align: center;
        background: #D40000;
        right: 90px;
        border-radius: 5px;
        transform: translateY(-15px);
        opacity: 0;
        transition: all 0.2s ease-out; }
        #experience-editor .xstudio-container #xstudio-tabs-preview-partition #phone-preview-wrapper .refresh-tooltip.active {
          transform: translateY(-35px);
          opacity: 1; }
      #experience-editor .xstudio-container #xstudio-tabs-preview-partition #phone-preview-wrapper #preview-elements {
        display: flex;
        flex-direction: column;
        align-items: center;
        background: white;
        border-radius: 5px; }
        #experience-editor .xstudio-container #xstudio-tabs-preview-partition #phone-preview-wrapper #preview-elements #emulator-and-icons {
          display: flex;
          flex-direction: row; }
          #experience-editor .xstudio-container #xstudio-tabs-preview-partition #phone-preview-wrapper #preview-elements #emulator-and-icons #no-vnc-emulator-wrapper {
            overflow: hidden;
            max-height: 590px;
            width: 332px;
            max-width: 332px;
            padding: 8px; }
            #experience-editor .xstudio-container #xstudio-tabs-preview-partition #phone-preview-wrapper #preview-elements #emulator-and-icons #no-vnc-emulator-wrapper #reconnect-novnc {
              text-align: center;
              z-index: -1;
              top: 40%;
              left: 40%; }
              #experience-editor .xstudio-container #xstudio-tabs-preview-partition #phone-preview-wrapper #preview-elements #emulator-and-icons #no-vnc-emulator-wrapper #reconnect-novnc .studio-button {
                margin-left: auto;
                margin-right: auto; }
          #experience-editor .xstudio-container #xstudio-tabs-preview-partition #phone-preview-wrapper #preview-elements #emulator-and-icons #emulator-preview-icons {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 4px;
            align-items: center;
            padding-top: 60px; }
            #experience-editor .xstudio-container #xstudio-tabs-preview-partition #phone-preview-wrapper #preview-elements #emulator-and-icons #emulator-preview-icons .emulator-preview-icon {
              padding: 12px 4px;
              -webkit-touch-callout: none;
              -webkit-user-select: none;
              -khtml-user-select: none;
              -moz-user-select: none;
              -ms-user-select: none;
              user-select: none; }
              #experience-editor .xstudio-container #xstudio-tabs-preview-partition #phone-preview-wrapper #preview-elements #emulator-and-icons #emulator-preview-icons .emulator-preview-icon i {
                cursor: pointer;
                transition: color 0.2s; }
                #experience-editor .xstudio-container #xstudio-tabs-preview-partition #phone-preview-wrapper #preview-elements #emulator-and-icons #emulator-preview-icons .emulator-preview-icon i.smartphone, #experience-editor .xstudio-container #xstudio-tabs-preview-partition #phone-preview-wrapper #preview-elements #emulator-and-icons #emulator-preview-icons .emulator-preview-icon i:hover {
                  color: #D40000; }
            #experience-editor .xstudio-container #xstudio-tabs-preview-partition #phone-preview-wrapper #preview-elements #emulator-and-icons #emulator-preview-icons .preview-icon-seperator {
              height: 1px;
              width: 32px;
              border-top: 1px solid #e8e8e8; }
        #experience-editor .xstudio-container #xstudio-tabs-preview-partition #phone-preview-wrapper #preview-elements #next-state-button {
          -webkit-touch-callout: none;
          -webkit-user-select: none;
          -khtml-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
          cursor: pointer;
          display: flex;
          flex-direction: row;
          color: white;
          font-weight: bold;
          background-color: #D40000;
          padding: 12px;
          margin: 4px;
          margin-top: 34px;
          border-radius: 5px; }
          #experience-editor .xstudio-container #xstudio-tabs-preview-partition #phone-preview-wrapper #preview-elements #next-state-button:hover {
            background-color: #ee0000; }
          #experience-editor .xstudio-container #xstudio-tabs-preview-partition #phone-preview-wrapper #preview-elements #next-state-button:active {
            background-color: #bb0000; }

#experience-editor .upload-logo-container {
  width: 416px;
  border: 1px dashed #DCDCDC;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 16px; }
  #experience-editor .upload-logo-container input {
    display: none; }
  #experience-editor .upload-logo-container .title {
    color: #D40000;
    font-size: 16px;
    margin: 8px 0; }
  #experience-editor .upload-logo-container .file-requirements {
    font-size: 14px;
    color: #878787; }

#experience-editor .uploaded-logo-container {
  width: 416px;
  border: 1px solid #EDEDED;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  margin-bottom: 16px; }
  #experience-editor .uploaded-logo-container .logo {
    width: 110px;
    height: 110px;
    border: 1px solid #EDEDED;
    border-radius: 6px;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center; }
    #experience-editor .uploaded-logo-container .logo img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain; }
  #experience-editor .uploaded-logo-container .details {
    margin: 0 16px; }
    #experience-editor .uploaded-logo-container .details .title {
      font-size: 16px;
      color: #1A1A1A; }
    #experience-editor .uploaded-logo-container .details .file-details {
      color: #878787;
      font-size: 14px; }
    #experience-editor .uploaded-logo-container .details .delete-logo {
      display: flex;
      align-items: center;
      margin-top: 45px; }
      #experience-editor .uploaded-logo-container .details .delete-logo .action {
        color: #D40000;
        margin: 0 7px;
        font-size: 14px; }

#color-picker-wrapper {
  padding: 16px;
  padding-bottom: 0px;
  width: 255px;
  max-width: 255px; }
  #color-picker-wrapper .lite-color-wheel {
    margin-left: auto;
    margin-right: auto; }
  #color-picker-wrapper .rzslider {
    margin: 16px 0px; }
  #color-picker-wrapper .rz-bar-wrapper {
    padding-top: 0px; }
  #color-picker-wrapper .value-color-slider {
    margin-top: 16px; }
    #color-picker-wrapper .value-color-slider .rz-bar {
      border-radius: 5px;
      background-image: linear-gradient(to right, #565458, #7991f7) !important; }
    #color-picker-wrapper .value-color-slider .rz-pointer {
      border: 2px solid #d0d0d0;
      background-image: linear-gradient(#f2f2f2, #a1a1a1);
      height: 22px;
      top: -23px;
      width: 8px !important; }
      #color-picker-wrapper .value-color-slider .rz-pointer:focus {
        outline: none; }
  #color-picker-wrapper .alpha-color-slider .rz-bar {
    border-radius: 10px;
    height: 14px !important;
    background: linear-gradient(to right, #ffffff00, #7991f7), url("../images/checkerboard.png") repeat !important; }
  #color-picker-wrapper .alpha-color-slider .rz-pointer {
    height: 20px;
    width: 20px !important;
    border: 4px solid white;
    background-color: #a1a1a1 !important;
    box-shadow: 0px 1px 3px #bbb;
    top: -19px; }
    #color-picker-wrapper .alpha-color-slider .rz-pointer:focus {
      outline: none; }
  #color-picker-wrapper .colors-util-info {
    display: flex;
    flex-direction: row; }
    #color-picker-wrapper .colors-util-info .hex-input-box input {
      width: 78px; }
    #color-picker-wrapper .colors-util-info .rgba-input-box {
      margin-left: 4px; }
      #color-picker-wrapper .colors-util-info .rgba-input-box input {
        width: 35px; }
    #color-picker-wrapper .colors-util-info .color-format-selector {
      flex: 1; }
      #color-picker-wrapper .colors-util-info .color-format-selector .selectize-input {
        padding: 6px 8px;
        border: 1px solid #cbcbcb; }
    #color-picker-wrapper .colors-util-info .color-info {
      flex: 2;
      border: 1px solid #cbcbcb;
      border-radius: 5px;
      height: 34px;
      margin-left: 4px;
      font-size: 14px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center; }
      #color-picker-wrapper .colors-util-info .color-info .formated-selected-color {
        flex: 1;
        padding: 0px 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 0px; }
      #color-picker-wrapper .colors-util-info .color-info .alpha-percentage {
        height: 100%;
        line-height: 34px;
        border-left: 1px solid #cbcbcb;
        padding: 0px 8px; }
  #color-picker-wrapper .color-history-area {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-height: 130px;
    overflow: scroll; }
    #color-picker-wrapper .color-history-area .color-square {
      height: 25px;
      width: 25px;
      margin-bottom: 4px;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none; }
    #color-picker-wrapper .color-history-area .add-color-button .material-icons {
      font-size: 22px;
      padding-top: 1px; }

.color-square {
  cursor: pointer;
  margin: 0px 5px;
  border-radius: 3px;
  min-width: 15px;
  height: 15px;
  border: 1px solid #dcdcdc;
  transition: border 0.2s; }
  .color-square.active {
    border: 4px solid #dcdcdc; }

.studio-button {
  cursor: pointer;
  margin: 8px 0px;
  padding: 4px;
  color: white;
  background: #D40000;
  border-radius: 20px;
  text-align: center; }
  .studio-button:hover {
    background-color: #ee0000; }
  .studio-button:active {
    background-color: #bb0000; }
  .studio-button i {
    font-size: 18px; }

.experience-delete-icon {
  cursor: pointer;
  color: #d43e3a;
  transform-origin: 50% 50%; }
  .experience-delete-icon:hover {
    transform: scale(1.15);
    color: #dd6764; }
  .experience-delete-icon i {
    font-size: 18px; }

.margin-bottom-4 {
  margin-bottom: 4px; }

.top-right-check {
  position: relative; }
  .top-right-check::after {
    content: "\f00c";
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 12px;
    position: absolute;
    top: -4px;
    right: -4px;
    color: white;
    width: 25px;
    height: 25px;
    border-radius: 100%;
    padding: 6px;
    float: right;
    margin: -5px -5px 0px 0px;
    background-color: #40a33c;
    transform: scale(0); }
  .top-right-check.active::after {
    animation: expand_rotate 0.4s ease-in forwards; }

.input-edit-text {
  display: flex;
  flex-direction: row;
  align-items: flex-end; }
  .input-edit-text .edit-text-icon {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 25px;
    height: 25px;
    background-color: #e8e8e8;
    text-align: center;
    padding-top: 6px; }
    .input-edit-text .edit-text-icon i {
      font-size: 14px; }
  .input-edit-text .edit-text-title {
    min-width: 100px;
    font-weight: bold;
    margin: 0px 8px;
    padding-bottom: 2px;
    border-bottom: 1px #e8e8e8 solid; }
  .input-edit-text input {
    max-width: 50%;
    margin: 0px 8px;
    border: none !important;
    border-bottom: 1px solid #e8e8e8 !important; }

#icon-choice-dialog .modal-header {
  padding: 20px 35px; }
  #icon-choice-dialog .modal-header .input-edit-text {
    float: left; }
  #icon-choice-dialog .modal-header .save-icons-button {
    float: right;
    max-width: 80px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 6px 12px;
    margin: 0px; }
    #icon-choice-dialog .modal-header .save-icons-button i {
      margin: 0px 4px; }

#icon-choice-dialog .modal-body {
  position: relative;
  height: 550px;
  padding: 0px 24px; }
  #icon-choice-dialog .modal-body .icon-choices-area {
    margin: 15px;
    overflow: hidden;
    height: 100%; }
    #icon-choice-dialog .modal-body .icon-choices-area .icon-list {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      max-height: calc(100% - 90px);
      overflow: scroll; }
      #icon-choice-dialog .modal-body .icon-choices-area .icon-list .icon-choice {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: pointer;
        text-align: center;
        width: 37px;
        height: 37px;
        transition: all 0.5s;
        padding: 4px;
        padding-top: 6px;
        margin: 4px; }
        #icon-choice-dialog .modal-body .icon-choices-area .icon-list .icon-choice.active {
          border-radius: 100%;
          background-color: #D40000;
          color: white; }

.rounded-search-bar {
  padding-bottom: 20px; }
  .rounded-search-bar input {
    height: 25px;
    border-radius: 15px !important; }
  .rounded-search-bar .ti-search {
    color: #8e8e93 !important;
    font-weight: bold;
    top: -5px; }
  .rounded-search-bar i {
    line-height: 30px; }

@keyframes expand_rotate {
  0% {
    transform: scale(0.01) rotate(90deg); }
  40% {
    transform: scale(1.1) rotate(-20deg); }
  50% {
    transform: scale(1) rotate(-40deg); }
  80% {
    transform: rotate(10deg); }
  100% {
    transform: rotate(0deg); } }

.background-image {
  margin-top: 20px;
  margin-bottom: 40px; }
  .background-image img {
    max-width: 100%; }

.bots-page {
  margin-left: -15px;
  margin-right: -15px; }

.no-padding-left-right {
  padding-right: 0;
  padding-left: 0; }

.bots-list-container {
  background: #f3f3f3;
  padding: 30px 15px;
  color: #222222; }

.bots-list {
  margin-bottom: 34px; }

.bots-list-title {
  font-weight: bold;
  margin-bottom: 14px; }

.bot-item {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  cursor: pointer; }

.bot-name {
  margin: 0 11px; }

.bot-list-item-pic {
  width: 32px;
  height: 32px;
  border-radius: 50%; }

.new-bot-button {
  cursor: pointer;
  color: #81b442;
  font-weight: bold;
  margin-bottom: 16px;
  display: block; }

.new-bot-page {
  padding: 30px 15px;
  color: #222222; }

.new-bot-title {
  margin-bottom: 20px; }

.image-container {
  width: min-content; }

.upload-container {
  width: 80px;
  height: 80px;
  border-radius: 30px;
  border: 1px dashed black;
  margin-bottom: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer; }

.bot-profile {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 15px; }

#profile_pic {
  display: none; }

.profile-pic-text {
  text-align: center;
  display: block;
  cursor: pointer;
  color: #81b442; }

.new-bot-page input {
  border-radius: 5px !important;
  height: 45px;
  padding: 0 15px !important; }

.new-bot-page .selectize-input {
  border-radius: 5px !important;
  height: 45px;
  padding: 0 15px !important;
  line-height: 44px !important; }

.new-bot-page .hobbies .tags {
  margin: 0 !important; }

.new-bot-page .hobbies input {
  width: fit-content !important; }

.create-bot-container {
  clear: left;
  padding-top: 20px; }

.chat-page {
  margin: 0 -15px; }
  .chat-page .chat-left-side {
    background: #f3f3f3;
    border-left: 1px solid #d8d8d8;
    border-right: 1px solid #d8d8d8; }
  .chat-page .chat-list-item {
    display: flex;
    align-items: center;
    height: 79px;
    padding: 0 14px;
    cursor: pointer;
    border-bottom: 1px solid #d8d8d8; }
  .chat-page .active {
    background: white; }
  .chat-page .customer-profile {
    width: 40px;
    height: 40px;
    border-radius: 50%; }
  .chat-page .list-item-middle-section {
    flex: 1;
    max-width: calc(100% - 130px); }
  .chat-page .chat-date {
    margin: 0 10px; }
  .chat-page .first-message {
    color: #696969;
    width: calc(100% - 10px);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap; }
  .chat-page .customer-name {
    color: #222222;
    font-weight: bold;
    font-size: 14px; }
  .chat-page .session-status {
    color: #222222;
    font-size: 14px;
    display: flex;
    align-items: center; }
  .chat-page .customer-profile-container {
    position: relative;
    margin: 0 10px; }
  .chat-page .customer-status {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    position: absolute;
    right: 0px;
    bottom: 2px;
    border: thin solid white; }
  .chat-page .chat-status {
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin: 0 3px; }
  .chat-page .online-status {
    background-color: #81b442; }
  .chat-page .offline-status {
    background-color: red; }
  .chat-page .chat-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #81b442;
    height: 38px;
    width: 100%;
    padding: 0 28px; }
  .chat-page .bar-customer-name {
    color: white;
    font-size: 14px; }
  .chat-page .chat-height {
    height: calc(100% - 38px); }
    .chat-page .chat-height .chat-spinner {
      margin-top: 40px; }
  .chat-page #chatBox {
    height: calc(100% - 100px); }
  .chat-page .no-input-height {
    height: calc(100% - 30px) !important; }
  .chat-page .send-message-container {
    padding: 14px 21px; }
  .chat-page .sort-container {
    padding: 21px 17px 10px 14px;
    border-bottom: 1px solid #d8d8d8; }
    .chat-page .sort-container .btn-group {
      margin-bottom: 15px; }
    .chat-page .sort-container .dropdown-head {
      color: #222222 !important;
      font-size: 14px !important; }
    .chat-page .sort-container .dropdown-menu {
      padding: 10px; }
  .chat-page .search-container {
    width: 100%;
    background: white;
    display: flex;
    align-items: center;
    height: 48px;
    border: thin solid #adadad;
    border-radius: 5px; }
    .chat-page .search-container i {
      color: #656565 !important;
      margin: 0 14px;
      font-size: 16px; }
    .chat-page .search-container input {
      flex: 1;
      border: none !important;
      height: 40px;
      outline: none !important; }
  .chat-page .dropdown-icon {
    color: white; }

.intent-dialog .intent-option {
  cursor: pointer; }

.intent-dialog .selected {
  background: #d8d8d8; }

.chat-customer-details-dialog .profile-pic {
  width: 117px;
  height: 117px;
  border-radius: 50%;
  display: block;
  margin: auto;
  margin-bottom: 20px; }

.chat-customer-details-dialog .info-item {
  padding: 10px; }

.chat-customer-details-dialog .info-item:not(:last-child) {
  border-bottom: 1px solid #ebebeb; }

.chat-customer-details-dialog .item-value {
  color: #494949 !important; }

.chat-customer-details-dialog .close-icon-container {
  display: flex;
  justify-content: flex-end; }
  .chat-customer-details-dialog .close-icon-container i {
    font-size: 20px;
    cursor: pointer; }

.bot-list {
  display: flex;
  margin-bottom: 16px;
  border-bottom: 1px solid #eeeeee;
  width: 100%; }
  .bot-list .bot-list-item {
    color: #878787;
    font-size: 16px;
    margin-inline-end: 32px;
    padding-bottom: 16px; }
    .bot-list .bot-list-item.selected {
      border-bottom: 4px solid #D40000;
      color: #1a1a1a; }
  .bot-list .bot-rating {
    flex: 1;
    text-align: right;
    font-size: 14px;
    font-weight: bold;
    color: #191a19; }
  .bot-list .buttons-container {
    flex: 1; }
    .bot-list .buttons-container button {
      margin-inline-end: 10px; }

.highlighted-text {
  color: #D40000;
  background: #fce6e6; }

.highlighted-grayed-text {
  color: #1a1a1a;
  background: #f5f7f6; }

.feedback-details .details-wrapper {
  font-size: 1rem; }

.feedback-details .title {
  margin-bottom: 1.5rem; }

.feedback-details .d-flex {
  display: flex; }

.feedback-details .flex-row {
  flex-direction: row; }

.feedback-details .flex-column {
  flex-direction: column; }

.feedback-details .ml-auto {
  margin-left: auto; }

.feedback-details .w-30 {
  width: 30%; }

.feedback-details .row {
  margin: 0.5rem 0; }

.feedback-details .dark-text {
  color: #262626; }

.add-phrase-dialog input {
  font-size: 16px !important;
  color: #1a1919 !important; }

.add-phrase-dialog button {
  width: 100%;
  height: 42px; }

.add-phrase-dialog .tags-container .tag {
  font-size: 16px;
  color: #1a1919; }

.add-phrase-dialog .control-label {
  color: #807d7d; }

.highlight-note {
  font-size: 14px;
  color: #807d7d;
  margin-top: 6px; }

.custom-auto-complete md-autocomplete-wrap {
  box-shadow: none; }

.custom-auto-complete input,
.custom-auto-complete input[disabled]:hover {
  background: url(../images/search.svg) !important;
  background-repeat: no-repeat !important;
  background-position: 5px 7px !important;
  padding-inline-start: 35px !important; }

.custom-auto-complete input[disabled] {
  border: 1px solid #c8c7cc !important; }

.md-autocomplete-suggestions-container {
  z-index: 100000 !important; }

.not-found {
  color: #d40000;
  font-size: 14px; }

.expanded-row {
  background: #f7f7f7; }
  .expanded-row td {
    vertical-align: top !important; }

.word-entity-tag {
  display: flex;
  align-items: center;
  background: #eeeeee;
  border-radius: 18px;
  margin-inline-end: 8px;
  padding: 3px 12px;
  margin-top: 8px;
  width: fit-content; }

.highlightable {
  background: #fff;
  border: 1px solid #c8c7cc;
  padding: 5px 4px;
  font-size: 16px;
  height: 40px;
  color: #1a1919; }
  .highlightable:empty:before {
    content: attr(placeholder);
    pointer-events: none;
    display: block;
    /* For Firefox */
    color: gray; }
  .highlightable:focus {
    outline: 1px solid #c8c7cc; }

.color-white {
  color: white; }

.color-gray {
  color: #c0c7d1; }

.container-fluid {
  overflow-y: auto; }

.modal-content {
  background: #ffffff; }

.discussion .other .message:last-child .message-chat {
  border-radius: 16px 16px 16px 0;
  float: left; }

.discussion .self .message:last-child .message-chat {
  border-radius: 16px 16px 0;
  float: left; }

.discussion .self .message-chat {
  background-color: trasnparent;
  color: greys;
  padding-right: 22px;
  margin-right: 32px;
  padding-left: 22px; }

.discussion li.nextSame .message-chat {
  border-radius: 16px !important; }

.discussion .other .message-chat {
  background-color: #e5e5ea;
  color: #2C2F3B;
  padding-left: 22px;
  margin-left: 32px; }

.discussion .message-chat {
  border-radius: 16px;
  box-sizing: border-box;
  font-size: 15px;
  line-height: 1.2;
  min-height: 30px;
  min-width: 48px;
  padding: 6px 16px 9px; }

.text-ubq {
  color: #D40000 !important; }

.btn-chat {
  background-color: #00d449;
  border-color: white;
  color: #ffffff; }

.btn-primary {
  background-color: #D40000;
  border-color: #D40000;
  color: #ffffff; }

.btn-danger {
  background-color: #d43e3a;
  border-color: #d43e3a;
  color: #ffffff; }

.btn-ubq {
  background-color: #D40000;
  border-color: #D40000;
  color: #ffffff; }

.btn-ubq-o {
  background-color: transparent;
  border-color: #D40000;
  color: #D40000; }

.btn-ubq-o:hover {
  background-color: #efeaea;
  border-color: #d2d2d2;
  color: #D40000; }

.btn-ubq-white {
  background-color: transparent;
  border-color: #c9c9c9;
  color: #656565; }

.btn-ubq-white:hover {
  background-color: #efeaea;
  border-color: #d2d2d2;
  color: #D40000; }

.btn-ubq-gray {
  background-color: transparent;
  border-color: #D40000;
  color: #757579; }

.btn-ubq-max-width {
  background-color: transparent;
  border-color: #D40000;
  color: #D40000;
  width: 100%; }

.btn-o-max-width {
  background-color: #ffffff;
  border-color: #d2d2d2;
  color: 656565;
  width: 100%; }

.btn-dpa {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #4280c8; }

.btn-ubq-journey {
  background-color: #ffffff;
  border-color: #c8c8cc;
  color: #D40000;
  width: 100%; }

a {
  color: #D40000; }

a.disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.5; }

::selection {
  background: #D40000; }

.search-bar {
  padding-bottom: 20px; }

/* table action dropdown */
div.actions {
  /*.dropdown ul {
            right: 0px;
            left: auto;
            top: 16px;
        }
        */ }
  div.actions .btn-group:hover > .dropdown-menu {
    display: block; }

input[type="datetime-local"].datetime-from {
  border-radius: 4px 0 0 4px !important; }

input[type="datetime-local"].datetime-to {
  border-radius: 0 4px 4px 0 !important; }

v-pane-content {
  overflow: visible !important; }

tr.no-border-bottom td {
  border-bottom: 0pt !important;
  padding: 4px !important; }

/* loading spinner */
.ubq-spin {
  -webkit-animation: fa-spin 1s infinite linear;
  animation: fa-spin 0.8s infinite linear;
  color: #D40000; }

.spinner {
  text-align: center; }

.breadcrumb {
  background-color: transparent;
  padding-top: 25px;
  font-size: 15px; }

.vAccordion--default v-pane.is-expanded > v-pane-header {
  border-bottom-color: #D40000 !important; }

.vAccordion--default v-pane-header::after,
.vAccordion--default v-pane-header::before {
  background-color: #D40000; }

.navbar-logosm {
  padding-left: 15px;
  float: left; }

.load1:after {
  border-left: 2px solid #D40000 !important; }

.report-spinner::after {
  border-left: 2px solid #D40000 !important;
  width: 80px !important;
  height: 80px !important; }

input[type="number"].input-sm {
  border-bottom-left-radius: 3px !important;
  border-bottom-right-radius: 3px !important;
  border-top-left-radius: 3px !important;
  border-top-right-radius: 3px !important; }

input[type="number"].round {
  border-bottom-left-radius: 3px !important;
  border-bottom-right-radius: 3px !important;
  border-top-left-radius: 3px !important;
  border-top-right-radius: 3px !important; }

input[type="text"].round {
  border-bottom-left-radius: 3px !important;
  border-bottom-right-radius: 3px !important;
  border-top-left-radius: 3px !important;
  border-top-right-radius: 3px !important; }

.form-horizontal .control-label.label-left {
  text-align: left !important; }

/** Customer Details table */
#customer-details-table > thead > tr > th,
#customer-details-table > thead > tr > td,
#customer-details-table > tbody > tr > td,
#customer-details-table > tfoot > tr > td {
  border-top-width: 0px !important;
  border-top-style: none !important; }

#customer-details-table th {
  border-bottom-width: 3px !important;
  border-bottom-style: hidden !important; }

#customer-details-table .no-border td {
  border-bottom-width: 0px !important;
  border-bottom-style: none !important; }

.th-black {
  color: #5b5b60 !important; }

/** password strength checker */
input.ng-pristine + ul#strength {
  display: none; }

ul#strength {
  display: inline;
  list-style: none;
  margin: 0;
  margin-left: 15px;
  padding: 0;
  vertical-align: 2px; }

.point:last {
  margin: 0 !important; }

.point {
  background: #DDD;
  border-radius: 2px;
  display: inline-block;
  height: 5px;
  margin-right: 1px;
  width: 20px; }

#footer {
  position: fixed;
  bottom: 5px; }

/* Support window */
.feedback-screenshot {
  display: none; }

/* Switch Control */
.ubq-switch.switch {
  background: #6D6E76;
  border-color: #6D6E76;
  width: 40px;
  height: 18px; }

.ubq-switch.switch.checked {
  width: 40px;
  height: 18px;
  background: #D40000;
  border-color: #D40000; }

.ubq-switch.switch small {
  width: 18px;
  height: 18px; }

.ubq-dpa.switch {
  background: white;
  border-color: white;
  width: 40px;
  height: 18px; }

.ubq-dpa.switch.checked {
  width: 40px;
  height: 18px;
  background: white;
  border-color: white; }

.ubq-dpa.switch small {
  width: 18px;
  height: 18px;
  background-color: white; }

.small-dpa-img {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 3px;
  left: 5px; }

/* Spinner */
.spinnerx {
  margin: 0 auto 0;
  width: 70px;
  text-align: center; }

.margin-top-20 {
  margin-top: 30px; }

.margin-bottom-60 {
  margin-bottom: 60px; }

.margin-bottom-150 {
  margin-bottom: 150px; }

.spinnerx > div {
  width: 18px;
  height: 18px;
  background-color: #D40000;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both; }

.spinnerx .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s; }

.spinnerx .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s; }

@-webkit-keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0); }
  40% {
    -webkit-transform: scale(1); } }

@keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0); }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

/* Modeling*/
.bjs-powered-by {
  visibility: hidden !important; }

/* JSON Readable library */
.jh-type-string {
  word-break: break-all; }

/* Chat */
#chat-discussion {
  display: inherit; }

.chat-background {
  background-color: #f8f8f8; }

.grey-border {
  border-color: #dddddd; }

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  background-color: #ffffff !important;
  border-color: #dddddd;
  color: black !important; }

.cs-skin-elastic > span::after {
  /*color: #ffffff !important;*/
  color: #D40000 !important; }

li.cs-selected {
  background: #D40000 !important; }

/* ngTable pagination */
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  background-color: #f8f8f8 !important;
  border-color: #b7b7b7 !important; }

.pagination > li > a,
.pagination > li > span {
  color: #a9a9ac !important; }

.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
  color: #5b5b60 !important; }

.panel-grey {
  background-color: #f8f8f8; }

.list-group-item {
  background-color: #e6e8e8 !important; }

.italic {
  font-style: italic; }

.bold {
  font-weight: bold !important; }

.dpa-canvas {
  height: 80vh; }

.bjs-container {
  height: inherit !important; }

.djs-container {
  height: inherit !important; }

.height-chat {
  height: 40px !important; }

.height-chat-convo {
  height: 600px !important; }

.height-700 {
  height: 700px !important; }

.margin-top-2 {
  margin-top: 2px; }

a:hover.cust-list {
  background-color: #D40000 !important; }

.inbox .wrap-list {
  width: 250px !important; }

.inbox .email-list {
  width: 259px !important; }

.messages-search {
  display: inline !important;
  position: absolute !important;
  top: 0 !important; }

.swMain > ul li > a.selected .stepNumber {
  border-color: #D40000; }

.swMain > ul li > a.selected:before,
.swMain li > a.done:before {
  border-color: #D40000; }

.swMain ul li > a.done .stepNumber,
.swMain > ul li:last-child > a.selected .stepNumber {
  background-color: #D40000;
  border-color: #D40000; }

.swMain > ul {
  background: #ffffff !important; }

.tabs-below > .nav-tabs,
.tabs-right > .nav-tabs,
.tabs-left > .nav-tabs {
  border-bottom: 0; }

.tab-content > .tab-pane,
.pill-content > .pill-pane {
  display: none; }

.tab-content > .active,
.pill-content > .active {
  display: block; }

.tabs-below > .nav-tabs {
  border-top: 1px solid #ddd; }

.tabs-below > .nav-tabs > li {
  margin-top: -1px;
  margin-bottom: 0; }

.tabs-below > .nav-tabs > li > a {
  -webkit-border-radius: 0 0 4px 4px;
  -moz-border-radius: 0 0 4px 4px;
  border-radius: 0 0 4px 4px; }

.tabs-below > .nav-tabs > li > a:hover,
.tabs-below > .nav-tabs > li > a:focus {
  border-top-color: #ddd;
  border-bottom-color: transparent; }

.tabs-below > .nav-tabs > .active > a,
.tabs-below > .nav-tabs > .active > a:hover,
.tabs-below > .nav-tabs > .active > a:focus {
  border-color: transparent #ddd #ddd #ddd; }

.tabs-left > .nav-tabs > li,
.tabs-right > .nav-tabs > li {
  float: none;
  text-align: center !important; }

.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a {
  min-width: 74px;
  margin-right: 0;
  margin-bottom: 3px; }

.tabs-left > .nav-tabs {
  float: left; }

.tabs-left > .nav-tabs > li > a {
  margin-right: -1px;
  -webkit-border-radius: 4px 0 0 4px;
  -moz-border-radius: 4px 0 0 4px;
  border-radius: 4px 0 0 4px; }

.tabs-left > .nav-tabs > li > a:hover,
.tabs-left > .nav-tabs > li > a:focus {
  border-color: #eeeeee #dddddd #eeeeee #eeeeee; }

.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus {
  border-color: #ddd transparent #ddd #ddd;
  *border-right-color: #ffffff;
  color: #D40000 !important; }

.tabs-right > .nav-tabs {
  float: right;
  margin-left: 19px;
  border-left: 1px solid #ddd; }

.tabs-right > .nav-tabs > li > a {
  margin-left: -1px;
  -webkit-border-radius: 0 4px 4px 0;
  -moz-border-radius: 0 4px 4px 0;
  border-radius: 0 4px 4px 0; }

.tabs-right > .nav-tabs > li > a:hover,
.tabs-right > .nav-tabs > li > a:focus {
  border-color: #eeeeee #eeeeee #eeeeee #dddddd; }

.tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover,
.tabs-right > .nav-tabs .active > a:focus {
  border-color: #ddd #ddd #ddd transparent;
  *border-left-color: #ffffff; }

.tabs-left .tab-content {
  border-left: 1px solid #EFEFF4; }

.manageBot {
  height: 650px !important; }

.daterangepicker .input-mini {
  padding: 0 6px 0 28px !important; }

.inbox .email-reader {
  margin-left: 0px !important; }

.image_picker_image {
  max-width: 140px;
  max-height: 100px;
  background-color: #FF0000; }

.gallery-image {
  cursor: pointer;
  position: relative;
  display: block; }

.gallery-text {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 40px;
  width: 200px;
  height: 150px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  transition: opacity 0.6s;
  vertical-align: middle;
  line-height: 150px; }

.gallery-check {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 40px;
  width: 200px;
  height: 150px;
  text-align: center;
  opacity: 0.8;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  transition: opacity 0.6s;
  vertical-align: middle;
  line-height: 150px; }

.gallery-text:hover {
  opacity: 0.5; }

.gallery-text h3 {
  color: white;
  display: inline-table;
  vertical-align: middle;
  line-height: 100%; }

.selectize-input > * {
  padding-right: 20px; }

.lightbox-modal {
  z-index: 10000 !important; }

.padding-bottom-150 {
  padding-bottom: 150px; }

.input-group-reporting {
  background-color: #D40000;
  border-color: #D40000; }

.clip-datepicker button.active {
  background-color: #D40000 !important; }

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  background-color: #D40000 !important; }

.borderless.table thead > tr > th,
.borderless.table tbody > tr > th,
.borderless.table tfoot > tr > th,
.borderless.table thead > tr > td,
.borderless.table tbody > tr > td,
.borderless.table tfoot > tr > td {
  border: none; }

.bjs-container {
  background-color: white;
  border: solid;
  border-width: thin;
  border-color: black; }

.send-feedback {
  background-color: #D40000 !important;
  position: static !important;
  border: 1px solid transparent !important;
  border-top-right-radius: 0px !important;
  -webkit-border-top-right-radius: 0px !important;
  border-top-left-radius: 0px !important;
  -webkit-border-top-left-radius: 0px !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  height: 34px;
  width: 100px;
  font-weight: 500; }

.send-feedback.hidden {
  display: inherit !important; }

.send-feedback:hover {
  background-color: #D40000 !important; }

#feedback_Bootstrap > div > div > span {
  display: none !important; }

#feedback_Bootstrap > div > div:before {
  content: "  +  ";
  font-size: 15px; }

.ng-table th.center-header {
  text-align: center !important; }

.shell-wrap {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px; }

.shell-top-bar {
  background-color: white;
  color: #525252;
  padding: 5px 0;
  margin: 0;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
  font-size: 0.85em;
  border: 1px solid #CCCCCC;
  border-bottom: none;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-topright: 3px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  /* W3C */
  /* IE6-9 */ }

.shell-body {
  margin: 0;
  padding: 5px;
  list-style: none;
  background: #141414;
  color: white;
  font: 0.8em 'Andale Mono', Consolas, 'Courier New';
  line-height: 1.6em;
  -webkit-border-bottom-right-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-radius-bottomright: 3px;
  -moz-border-radius-bottomleft: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px; }

.shell-body li:before {
  position: absolute;
  left: 0;
  top: 0; }

.shell-body li {
  overflow: hidden;
  position: relative;
  padding: 0 0 0 15px; }

.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
  background-color: white !important; }

.ps-container.ps-active-x > .ps-scrollbar-x-rail,
.ps-container.ps-active-y > .ps-scrollbar-y-rail {
  background-color: transparent !important; }

.fullScreen {
  z-index: 9999;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0; }

.height-log {
  height: 65vh !important; }

.height-log-full-screen {
  height: 97vh !important; }

.csspiner-backgroundcolor:before {
  background-color: rgba(255, 255, 255, 0.3) !important; }

.payment-type-select button.active {
  /*background-color: white !important;*/
  border: 5px solid #D40000;
  color: #D40000; }

.payment-type-select button.active::before {
  content: '\f00c';
  font-family: 'FontAwesome';
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 20px;
  position: absolute;
  top: -14px;
  right: -14px;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  padding: 10px;
  background: #D40000; }

.fa.circle-border {
  border: 1px solid;
  padding: 7px;
  width: 30px;
  height: 30px;
  text-align: center;
  border-radius: 100%; }

.btn.account-name {
  border: 1px solid #dfdfdf; }

@media (min-width: 435px) and (max-width: 1250px) {
  .account-dropdown .account-name {
    width: 50%; } }

@media (max-width: 435px) {
  .account-dropdown .account-name {
    width: 50%;
    text-align: initial; }
  .account-dropdown .account-name .account-name-text {
    margin-bottom: 5px; }
  .account-dropdown .account-name .account-number-text {
    margin-top: 0px; }
  .account-dropdown .account-chevron {
    width: 30px; }
  .account-dropdown .btn {
    height: 30px; }
  .account-dropdown .btn.btn-account-icon {
    width: 30px;
    padding: 4px; }
  .account-dropdown .btn.btn-account-icon img {
    width: 20px; }
  .account-dropdown .btn.account-chevron {
    font-size: inherit; } }

h5.title-with-add-button {
  max-width: 100%;
  padding-right: 12px; }

body:lang(ar) h5.title-with-add-button {
  max-width: 100%;
  padding-left: 12px;
  padding-right: unset; }

table.bill-form {
  width: 100%; }

table.bill-form tr.bill-form {
  padding: 2px;
  border: 5px solid #ffffff; }

table.bill-form tr.bill-form td.form-label {
  border: none;
  /*border: 5px 0 solid #ffffff;*/ }

table.bill-form tr.bill-form td.form-label h5 {
  margin: 0; }

table.bill-form tr.bill-form td.form-label,
table.bill-form tr.bill-form td.form-input {
  padding: 10px 15px; }

table.bill-form tr.bill-form td.form-label {
  background-color: #ededed;
  text-align: right;
  width: 50%; }

body:lang(ar) table.bill-form tr.bill-form td.form-label {
  text-align: left; }

table.bill-form td.form-data {
  width: 50%;
  padding: 10px 20px !important;
  background-color: #f7f7f7;
  overflow: hidden; }

table.bill-form td:first-child.form-data {
  padding: 15px 30px !important; }

table.bill-form td.form-input {
  width: 50%;
  padding: 2px !important;
  background-color: #e3e3e3; }

table.bill-form tr.bill-form td.form-input input[type="text"],
table.bill-form tr.bill-form td.form-input input[type="text"]:hover,
table.bill-form tr.bill-form td.form-input input[type="text"]:focus {
  border: none !important; }

table.bill-form tr.bill-form td.form-input button.btn {
  border-radius: 0;
  border-color: transparent !important; }

table.bill-form tr.bill-form td.form-input .cs-placeholder {
  border-radius: 0px !important;
  border: none; }

.bill-form-container {
  max-width: 100%;
  overflow-x: hidden; }

.bill-form-container.validated {
  border: 1px solid #eeeeee; }

tr.bill-form-amount h5 {
  margin: 20px auto; }

/* edit button in Benef & Bill dropdown */
.edit {
  width: 50px;
  text-align: center; }

.bottom-border-grey {
  border-bottom: 1px solid #eeeeee; }

.payments-bill-selection,
.payments-account-selection {
  /*margin: 30px 0;*/
  margin-top: 30px;
  margin-bottom: 30px;
  padding: 0 50px; }

.payment-form-footer button {
  margin: 0 10px; }

.modal-body.otp-modal {
  padding: 0; }

.modal-body.otp-modal .container-fluid {
  margin: 0;
  padding: 15px; }

.ui-select-bootstrap > .ui-select-match > .btn {
  border-radius: 0; }

.cs-select ul {
  max-height: 150px !important; }

.progressbar-container {
  background-color: #f7f7f7;
  height: 100px; }

.progressbar {
  counter-reset: step;
  padding-left: 0;
  padding-right: 0;
  padding-top: 15px; }

.progressbar ul {
  display: table;
  width: 100%; }

.progressbar li {
  display: table-cell;
  text-align: center;
  width: 1%;
  list-style-type: none;
  /*width: 33%;*/
  height: 85px;
  /* container heigh (100px) - padding-top (15px) */
  font-size: 12px;
  position: relative;
  text-align: center;
  /*text-transform: uppercase;*/
  font-weight: bold;
  z-index: 40; }

.progressbar li:before {
  width: 40px;
  height: 40px;
  content: counter(step);
  counter-increment: step;
  line-height: 32px;
  border: 4px solid #cccccc;
  color: #cccccc;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color: white; }

.progressbar li:after {
  width: 100%;
  height: 4px;
  content: '';
  position: absolute;
  background-color: #cccccc;
  top: 15px;
  left: 0%;
  z-index: -1; }

body:lang(ar) .progressbar li:after {
  left: unset;
  right: 0%; }

.progressbar li:first-child:after {
  width: 50%;
  left: 50%; }

.progressbar li:last-child:after {
  width: 50%; }

body:lang(ar) .progressbar li:first-child:after {
  right: 50%; }

/* TODO: move to theme */
.progressbar li.done:before {
  content: '\f00c';
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 20px; }

.progressbar li.done:before {
  color: #ffffff;
  border-width: 10px; }

.progressindicator-container {
  height: 15px;
  background-color: #ffffff;
  padding-bottom: 30px; }

.progressindicator {
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  display: table;
  width: 100%;
  text-align: center; }

.progressindicator li {
  display: table-cell;
  list-style-type: none;
  width: 1%;
  height: 15px;
  font-size: 12px;
  text-align: center; }

.progressindicator li.active .indicator {
  border: 15px solid #e6e6e6;
  border-color: #e6e6e6 transparent transparent transparent;
  position: relative;
  top: 10px; }

/* Payment Screen */
.progressbar li {
  color: #D40000; }

.progressbar li.active {
  color: #D40000; }

.progressbar li.active:before {
  color: #D40000;
  border-color: #D40000; }

.progressbar li.active:after {
  background-color: #D40000; }

.progressbar li.done {
  color: #D40000; }

.progressbar li.done:before {
  border-color: #D40000;
  background-color: #D40000; }

.progressbar li.done:after {
  background-color: #D40000; }

td.account-balance-cell,
td.account-balance-cell h5 {
  color: #D40000 !important;
  font-weight: bold; }

.light-main-color-text,
.account-name-text {
  color: #94B9E8 !important; }

.bg-alizz {
  background-image: url("../images/iphone-7.png");
  background-repeat: no-repeat;
  background-size: 232px 400px; }

.item,
.placeholder {
  padding: 2px;
  width: 50px;
  height: 20px;
  border: 1px solid #333;
  background: #EEE; }

.placeholder {
  background: #AEF; }

#sidebar2 {
  position: fixed;
  margin-left: 900px; }

.height-400 {
  height: 400px; }

.height-360 {
  height: 344px; }

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  overflow-x: hidden;
  transition: 0.4s;
  padding-top: 100px; }

.sidenav a {
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s; }

.sidenav a:hover {
  color: #f1f1f1; }

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px; }

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px; }
  .sidenav a {
    font-size: 18px; } }

.padding-bottom-10 {
  padding-bottom: 10px !important; }

.line {
  width: 112px;
  height: 47px;
  border-bottom: 1px solid black;
  position: absolute; }

.containerJourney {
  width: 100em;
  overflow-x: auto;
  white-space: nowrap;
  height: 400px; }

/* adapted from http://maxwells.github.io/bootstrap-tags.html */
.tag {
  font-size: 14px;
  padding: .3em .4em .4em;
  margin: 0 .1em; }

.tag a {
  color: #bbb;
  cursor: pointer;
  opacity: 0.6; }

.tag a:hover {
  opacity: 1.0; }

.tag .remove {
  vertical-align: bottom;
  top: 0; }

.tag a {
  margin: 0 0 0 .3em; }

.tag a .glyphicon-white {
  color: #fff;
  margin-bottom: 2px; }

.saving {
  font-size: 25px;
  font-weight: bold; }

.saving span {
  font-size: 50px;
  animation-name: blink;
  animation-duration: 1.4s;
  animation-iteration-count: infinite;
  animation-fill-mode: both; }

.saving span:nth-child(2) {
  animation-delay: .2s; }

.saving span:nth-child(3) {
  animation-delay: .4s; }

.zindex {
  z-index: 999999 !important; }

.zindex.fade {
  background: rgba(0, 0, 0, 0.4); }

@keyframes blink {
  0% {
    opacity: .2; }
  20% {
    opacity: 1; }
  100% {
    opacity: .2; } }

.dmn-table .dmn-js-powered-by {
  visibility: hidden; }

table.tr-ng-grid > tbody > tr > td,
table.tr-ng-grid > tbody > tr > td > .tr-ng-cell {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important; }

.holiday-calendar {
  margin: 30px;
  width: 230px; }
  .holiday-calendar strong {
    color: black !important; }
  .holiday-calendar .date-header-container {
    background: #D40000; }
    .holiday-calendar .date-header-container .is_editing {
      margin-right: 5px;
      margin-left: 5px;
      text-align: center;
      font-weight: bold;
      font-size: 16px;
      background: #a5d668 !important;
      border-color: #a5d668 !important; }
    .holiday-calendar .date-header-container input {
      text-align: center;
      font-weight: bold;
      font-size: 16px;
      background: #D40000 !important;
      border-color: #D40000 !important;
      color: white !important; }
    .holiday-calendar .date-header-container span {
      color: black !important;
      font-size: 16px !important;
      font-weight: bold !important; }
  .holiday-calendar .date-picker-container {
    background: white; }
    .holiday-calendar .date-picker-container .clip-datepicker td:not(.highlited-date-btn) button.active {
      background-color: #ffffffff !important; }
      .holiday-calendar .date-picker-container .clip-datepicker td:not(.highlited-date-btn) button.active span {
        color: #8e8e93 !important; }
    .holiday-calendar .date-picker-container .clip-datepicker .highlited-date-btn {
      padding: 1px; }
      .holiday-calendar .date-picker-container .clip-datepicker .highlited-date-btn button {
        padding: 2px;
        background-color: #D40000 !important; }
        .holiday-calendar .date-picker-container .clip-datepicker .highlited-date-btn button span {
          color: white !important; }
      .holiday-calendar .date-picker-container .clip-datepicker .highlited-date-btn .btn {
        transition-property: none !important; }

.holiday-calendars-container {
  padding-top: 40px;
  display: flex;
  flex-direction: row; }
  .holiday-calendars-container .locations-list {
    flex-grow: 0.5;
    display: flex;
    flex-direction: column; }
    .holiday-calendars-container .locations-list .locations-title {
      padding: 0px 10px;
      font-weight: bold;
      font-size: 16px; }
  .holiday-calendars-container .holidays-list {
    flex-grow: 7;
    margin: 0px 15px; }
    .holiday-calendars-container .holidays-list .calendar-location-name {
      padding: 0px 10px;
      font-weight: bold;
      font-size: 20px; }

.table-analysis-panel {
  display: flex;
  flex-direction: column;
  margin-top: 30px;
  margin-right: 20px;
  margin-left: 20px;
  position: relative;
  box-shadow: 0px 5px 10px #b8b8b8; }
  .table-analysis-panel.useless::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: rgba(20, 20, 20, 0.2);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px; }
  .table-analysis-panel.useless .table-analysis-panel-header {
    background: grey; }
  .table-analysis-panel .table-analysis-panel-header {
    background: #D40000;
    color: white;
    font-weight: bold;
    padding: 10px 20px;
    font-size: 16px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    transition: background-color 0.1s ease-out; }
    .table-analysis-panel .table-analysis-panel-header .analysis-panel-header-btn {
      display: inline-block;
      padding: 2px;
      cursor: pointer;
      border-radius: 10px;
      user-select: none;
      margin: 0px 5px;
      transform-origin: 50% 50%;
      transition: transform 0.1s ease-out;
      transition: background-color 0.5s ease-out; }
      .table-analysis-panel .table-analysis-panel-header .analysis-panel-header-btn:hover {
        transform: scale(1.1); }
      .table-analysis-panel .table-analysis-panel-header .analysis-panel-header-btn.active {
        transform: scale(1.05);
        transition: transform 0.2s linear;
        background: #6CA339; }
      .table-analysis-panel .table-analysis-panel-header .analysis-panel-header-btn span {
        padding: 0px 3px; }
  .table-analysis-panel .tab-pane {
    background: #fafafa; }
  .table-analysis-panel table {
    width: 100%; }
    .table-analysis-panel table td {
      padding: 3px 10px;
      font-size: 14px; }
      .table-analysis-panel table td .selectize-input {
        width: 140px; }
  .table-analysis-panel .category-selection-section {
    border-left: 1px solid #d2d2d2;
    height: 100%; }
  .table-analysis-panel .selectize-input, .table-analysis-panel .selectize-control.single .selectize-input.input-active {
    background: rgba(255, 255, 255, 0); }

.analytics-models-container .training-params-section {
  width: 100%;
  margin: 10px; }
  .analytics-models-container .training-params-section .model_info_section td {
    padding: 3px; }

.analytics-models-container .training-params-body {
  padding: 20px; }
  .analytics-models-container .training-params-body .hidden-layers-table input[type=number] {
    width: 50px; }

.training-params-header {
  width: 100%;
  background-color: #D40000;
  color: white;
  font-weight: bold;
  padding: 10px;
  font-size: 16px; }

.analytics-training-container .chart-section {
  margin: 0px 20px 30px 20px;
  padding: 0px 0px 30px 0px;
  display: inline-block;
  border-bottom: 1px solid #e8e8e8; }
  .analytics-training-container .chart-section .chart-name {
    margin: 10px 30px;
    font-size: 18px;
    height: 50px; }

.predictions_history_panel {
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 30px; }
  .predictions_history_panel .prediction-table-column {
    width: 100%; }

.rzslider .rz-pointer {
  width: 10px !important;
  background-color: #3395ff !important; }
  .rzslider .rz-pointer::after {
    display: none !important; }

.rzslider .rz-bar {
  background: #D40000 !important;
  height: 8px !important; }

.rzslider .rz-selection {
  background: #8e8e93 !important; }

.app-design .iphone {
  background: url(../images/iphonex.png) no-repeat center top transparent;
  background-size: 377px 745px; }

.app-design .phone-header-strip {
  position: absolute;
  padding: 5px 25px;
  width: 100%;
  height: 20px;
  color: white; }

.app-design .phone-preview {
  height: 745px;
  margin-top: 55px;
  margin-right: 60px;
  padding: 0;
  width: 377px;
  position: relative;
  z-index: 0; }
  .app-design .phone-preview .extra-image-part {
    position: absolute;
    left: 95px;
    width: 200px;
    height: 100px;
    z-index: 20;
    overflow: hidden; }
    .app-design .phone-preview .extra-image-part img {
      left: -415px;
      top: -21px;
      position: absolute; }
  .app-design .phone-preview .phone-screen {
    left: 25px;
    border-radius: 34px;
    top: 22px;
    height: 700px;
    position: absolute;
    width: 328px;
    z-index: 11;
    overflow-y: scroll;
    background-size: 100% 100% !important; }

.app-design .app-design-options-container {
  width: -webkit-calc(100% - 460px);
  width: -moz-calc(100% - 460px);
  width: calc(100% - 460px); }
  .app-design .app-design-options-container .design-title {
    font-size: 20px;
    font-weight: bold;
    border-bottom: 1px solid #cccccc;
    margin-bottom: 15px; }
  .app-design .app-design-options-container .name-and-theme-screen .choose-title-section {
    margin-bottom: 30px; }
  .app-design .app-design-options-container .name-and-theme-screen input {
    width: 70%; }
  .app-design .app-design-options-container .row {
    padding: 5px; }
    .app-design .app-design-options-container .row .color-picker-wrapper .input-group .color-picker-input-swatch {
      width: 100%; }

.app-design .theme-editor-panel {
  width: 100%;
  font-size: 40px;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px; }

.app-design .design-screen-picker {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; }
  .app-design .design-screen-picker .desing-menu-item {
    margin: 0px 10px; }
    .app-design .design-screen-picker .desing-menu-item .circular-design-icon {
      border-radius: 100px;
      font-size: 22px;
      padding-top: 23px;
      width: 70px;
      height: 70px;
      text-align: center;
      color: white;
      transition: 0.5s all;
      box-shadow: 0px 0px 20px 2px #e8e8e8;
      cursor: pointer; }
      .app-design .design-screen-picker .desing-menu-item .circular-design-icon:hover {
        box-shadow: 0px 5px 20px 2px #b3b3b3;
        transform: translate(0, -5px); }
        .app-design .design-screen-picker .desing-menu-item .circular-design-icon:hover::after {
          content: '+';
          position: absolute;
          color: black;
          height: 70px;
          width: 70px;
          left: 0px;
          top: -20px;
          border-radius: 100px;
          font-size: 70px;
          opacity: 0.3; }

.app-design .menu-components-selection {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; }

.app-design .design-section {
  background: #f8f8f8;
  padding: 10px;
  margin-bottom: 20px; }

.app-design .menu-images-selection-section {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; }
  .app-design .menu-images-selection-section .menu-layout-choice {
    display: inline-block;
    padding: 5px;
    border: 5px solid #f8f8f8; }
    .app-design .menu-images-selection-section .menu-layout-choice.active {
      border: 5px solid #D40000; }

.basic-phone-component {
  margin: 10px 10px; }
  .basic-phone-component .heading_6 {
    font-size: 10px; }
  .basic-phone-component .heading_5 {
    font-size: 12px; }
  .basic-phone-component .grow-right-4 {
    flex-grow: 0.4;
    text-align: right; }
  .basic-phone-component .grow-right-2 {
    flex-grow: 0.2;
    text-align: right; }
  .basic-phone-component .basic-phone-component-title {
    font-size: 12px;
    padding: 10px; }
  .basic-phone-component .basic-phone-component-content {
    margin: 10px; }
    .basic-phone-component .basic-phone-component-content .content-header {
      margin-top: 0px;
      padding-bottom: 10px;
      border-bottom: 1px solid; }
    .basic-phone-component .basic-phone-component-content .content-list {
      display: flex;
      flex-direction: row; }
      .basic-phone-component .basic-phone-component-content .content-list .small-rect {
        margin-right: 10px;
        width: 4px;
        height: 80%; }
  .basic-phone-component .basic-phone-component-footer {
    text-align: center;
    padding-bottom: 5px; }
  .basic-phone-component .phone-component-list-item {
    border-bottom: 1px rgba(0, 0, 0, 0.26) solid;
    margin-bottom: 7px; }

.design-component {
  min-width: 330px;
  min-height: 250px;
  padding: 10px;
  margin: 15px;
  border: 1px solid #D40000;
  background: white;
  transition: 0.5s all;
  box-shadow: 0px 0px 20px 2px #e8e8e8; }
  .design-component:hover {
    box-shadow: 0px 5px 20px 2px #b3b3b3; }
  .design-component.active {
    border: 3px solid #D40000; }
  .design-component .component-title {
    position: relative;
    font-size: 18px;
    border-bottom: 1px solid #cccccc;
    margin: 10px 0px; }
    .design-component .component-title::after {
      content: '\f00c';
      font: normal normal normal 14px/1 FontAwesome;
      position: absolute;
      color: white;
      background: #D40000;
      height: 40px;
      width: 40px;
      top: -40px;
      right: -38px;
      padding: 8px 0px 0px 10px;
      border-radius: 100px;
      font-size: 20px;
      transform: scale(0); }
    .design-component .component-title.active::after {
      animation: expand_rotate 0.3s ease-in 1 0s forwards; }
  .design-component .component-description {
    font-size: 16px; }

.circular-design-icon-edit {
  border-radius: 100px;
  font-size: 22px;
  padding-top: 20px;
  width: 70px;
  height: 70px;
  text-align: center;
  color: white;
  transition: 0.5s all;
  box-shadow: 0px 0px 20px 2px #e8e8e8;
  cursor: pointer; }
  .circular-design-icon-edit:hover {
    box-shadow: 0px 5px 20px 2px #b3b3b3;
    transform: translate(0, -5px); }
    .circular-design-icon-edit:hover::after {
      content: 'Edit';
      position: absolute;
      color: white;
      height: 70px;
      width: 70px;
      left: 0px;
      top: 3px;
      border-radius: 100px;
      font-size: 16px;
      opacity: 0.3; }

#preview-phone-screen {
  position: relative;
  display: flex;
  flex-direction: row;
  height: 700px; }
  #preview-phone-screen .side-menu-bar-big-screens {
    flex: 0.1 2;
    display: flex;
    padding: 5px;
    padding-top: 25px;
    flex-direction: column; }
    #preview-phone-screen .side-menu-bar-big-screens p {
      font-size: 10px; }
    #preview-phone-screen .side-menu-bar-big-screens img {
      margin: 10px 20px; }
  #preview-phone-screen .side-menu-bar {
    position: absolute;
    height: 100%;
    min-width: 50%;
    display: flex;
    padding: 5px;
    padding-top: 60px;
    flex-direction: column;
    z-index: 2; }
    #preview-phone-screen .side-menu-bar::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      transform: translateX(95%);
      background-color: rgba(62, 62, 62, 0.8); }
  #preview-phone-screen .content-container {
    flex: 1;
    display: flex;
    flex-direction: column; }
    #preview-phone-screen .content-container .bottom-menu-bar {
      flex: 0.13;
      display: flex;
      flex-direction: row;
      font-size: 5px; }
    #preview-phone-screen .content-container .top-menu-bar {
      flex: 0.13;
      justify-content: space-between;
      max-height: 80px;
      display: flex;
      flex-direction: row; }
      #preview-phone-screen .content-container .top-menu-bar .design-menu-item-top {
        padding: 22px 10px; }
    #preview-phone-screen .content-container .side_menu_top_bar {
      flex: 0.13;
      max-height: 60px;
      z-index: 3; }
      #preview-phone-screen .content-container .side_menu_top_bar .icon-container {
        padding: 25px 20px;
        user-select: none; }
        #preview-phone-screen .content-container .side_menu_top_bar .icon-container .material-icons {
          cursor: pointer; }
    #preview-phone-screen .content-container .phone-content {
      flex: 1;
      overflow-y: scroll; }
      #preview-phone-screen .content-container .phone-content .half-width {
        display: inline-block;
        vertical-align: top;
        width: 50%; }
  #preview-phone-screen .design-menu-item {
    padding: 20px 22px;
    text-align: center;
    color: white;
    flex: 1;
    cursor: pointer; }
  #preview-phone-screen .design-menu-item-side {
    padding: 14px 0px 7px 0px;
    text-align: center;
    color: white;
    cursor: pointer; }

@keyframes expand_rotate {
  0% {
    transform: scale(0.01) rotate(90deg); }
  40% {
    transform: scale(1.1) rotate(-20deg); }
  50% {
    transform: scale(1) rotate(-40deg); }
  80% {
    transform: rotate(10deg); }
  100% {
    transform: rotate(0deg); } }

.ubq-color-picker table {
  float: left; }

.ubq-color-picker tr:nth-child(0) td:nth-child(1) div {
  background-color: white; }

.ubq-color-picker tr:nth-child(0) td:nth-child(2) div {
  background-color: white; }

.ubq-color-picker tr:nth-child(0) td:nth-child(3) div {
  background-color: white; }

.ubq-color-picker tr:nth-child(0) td:nth-child(4) div {
  background-color: white; }

.ubq-color-picker tr:nth-child(0) td:nth-child(5) div {
  background-color: white; }

.ubq-color-picker tr:nth-child(0) td:nth-child(6) div {
  background-color: white; }

.ubq-color-picker tr:nth-child(0) td:nth-child(7) div {
  background-color: white; }

.ubq-color-picker tr:nth-child(0) td:nth-child(8) div {
  background-color: white; }

.ubq-color-picker tr:nth-child(0) td:nth-child(9) div {
  background-color: white; }

.ubq-color-picker tr:nth-child(0) td:nth-child(10) div {
  background-color: white; }

.ubq-color-picker tr:nth-child(1) td:nth-child(1) div {
  background-color: gray; }

.ubq-color-picker tr:nth-child(1) td:nth-child(2) div {
  background-color: #8d8d8d; }

.ubq-color-picker tr:nth-child(1) td:nth-child(3) div {
  background-color: #9a9a9a; }

.ubq-color-picker tr:nth-child(1) td:nth-child(4) div {
  background-color: #a6a6a6; }

.ubq-color-picker tr:nth-child(1) td:nth-child(5) div {
  background-color: #b3b3b3; }

.ubq-color-picker tr:nth-child(1) td:nth-child(6) div {
  background-color: silver; }

.ubq-color-picker tr:nth-child(1) td:nth-child(7) div {
  background-color: #cdcdcd; }

.ubq-color-picker tr:nth-child(1) td:nth-child(8) div {
  background-color: #d9d9d9; }

.ubq-color-picker tr:nth-child(1) td:nth-child(9) div {
  background-color: #e6e6e6; }

.ubq-color-picker tr:nth-child(1) td:nth-child(10) div {
  background-color: #f3f3f3; }

.ubq-color-picker tr:nth-child(2) td:nth-child(1) div {
  background-color: black; }

.ubq-color-picker tr:nth-child(2) td:nth-child(2) div {
  background-color: #0d0d0d; }

.ubq-color-picker tr:nth-child(2) td:nth-child(3) div {
  background-color: #1a1a1a; }

.ubq-color-picker tr:nth-child(2) td:nth-child(4) div {
  background-color: #262626; }

.ubq-color-picker tr:nth-child(2) td:nth-child(5) div {
  background-color: #333333; }

.ubq-color-picker tr:nth-child(2) td:nth-child(6) div {
  background-color: #404040; }

.ubq-color-picker tr:nth-child(2) td:nth-child(7) div {
  background-color: #4d4d4d; }

.ubq-color-picker tr:nth-child(2) td:nth-child(8) div {
  background-color: #595959; }

.ubq-color-picker tr:nth-child(2) td:nth-child(9) div {
  background-color: #666666; }

.ubq-color-picker tr:nth-child(2) td:nth-child(10) div {
  background-color: #737373; }

.ubq-color-picker tr:nth-child(3) td:nth-child(1) div {
  background-color: #b71c1c; }

.ubq-color-picker tr:nth-child(3) td:nth-child(2) div {
  background-color: #cd1f1f; }

.ubq-color-picker tr:nth-child(3) td:nth-child(3) div {
  background-color: #de2828; }

.ubq-color-picker tr:nth-child(3) td:nth-child(4) div {
  background-color: #e13e3e; }

.ubq-color-picker tr:nth-child(3) td:nth-child(5) div {
  background-color: #e55454; }

.ubq-color-picker tr:nth-child(3) td:nth-child(6) div {
  background-color: #e86a6a; }

.ubq-color-picker tr:nth-child(3) td:nth-child(7) div {
  background-color: #ec8080; }

.ubq-color-picker tr:nth-child(3) td:nth-child(8) div {
  background-color: #ef9696; }

.ubq-color-picker tr:nth-child(3) td:nth-child(9) div {
  background-color: #f2adad; }

.ubq-color-picker tr:nth-child(3) td:nth-child(10) div {
  background-color: #f6c3c3; }

.ubq-color-picker tr:nth-child(4) td:nth-child(1) div {
  background-color: #880e4f; }

.ubq-color-picker tr:nth-child(4) td:nth-child(2) div {
  background-color: #9f105c; }

.ubq-color-picker tr:nth-child(4) td:nth-child(3) div {
  background-color: #b6136a; }

.ubq-color-picker tr:nth-child(4) td:nth-child(4) div {
  background-color: #cd1577; }

.ubq-color-picker tr:nth-child(4) td:nth-child(5) div {
  background-color: #e41885; }

.ubq-color-picker tr:nth-child(4) td:nth-child(6) div {
  background-color: #e92c91; }

.ubq-color-picker tr:nth-child(4) td:nth-child(7) div {
  background-color: #ec439d; }

.ubq-color-picker tr:nth-child(4) td:nth-child(8) div {
  background-color: #ee5aa9; }

.ubq-color-picker tr:nth-child(4) td:nth-child(9) div {
  background-color: #f072b5; }

.ubq-color-picker tr:nth-child(4) td:nth-child(10) div {
  background-color: #f389c1; }

.ubq-color-picker tr:nth-child(5) td:nth-child(1) div {
  background-color: #4a148c; }

.ubq-color-picker tr:nth-child(5) td:nth-child(2) div {
  background-color: #5617a2; }

.ubq-color-picker tr:nth-child(5) td:nth-child(3) div {
  background-color: #621ab9; }

.ubq-color-picker tr:nth-child(5) td:nth-child(4) div {
  background-color: #6d1ecf; }

.ubq-color-picker tr:nth-child(5) td:nth-child(5) div {
  background-color: #7a26e0; }

.ubq-color-picker tr:nth-child(5) td:nth-child(6) div {
  background-color: #873ce3; }

.ubq-color-picker tr:nth-child(5) td:nth-child(7) div {
  background-color: #9553e6; }

.ubq-color-picker tr:nth-child(5) td:nth-child(8) div {
  background-color: #a369ea; }

.ubq-color-picker tr:nth-child(5) td:nth-child(9) div {
  background-color: #b17fed; }

.ubq-color-picker tr:nth-child(5) td:nth-child(10) div {
  background-color: #be96f0; }

.ubq-color-picker tr:nth-child(6) td:nth-child(1) div {
  background-color: #311b92; }

.ubq-color-picker tr:nth-child(6) td:nth-child(2) div {
  background-color: #381fa8; }

.ubq-color-picker tr:nth-child(6) td:nth-child(3) div {
  background-color: #3f23bd; }

.ubq-color-picker tr:nth-child(6) td:nth-child(4) div {
  background-color: #4727d3; }

.ubq-color-picker tr:nth-child(6) td:nth-child(5) div {
  background-color: #5739da; }

.ubq-color-picker tr:nth-child(6) td:nth-child(6) div {
  background-color: #694ede; }

.ubq-color-picker tr:nth-child(6) td:nth-child(7) div {
  background-color: #7b64e2; }

.ubq-color-picker tr:nth-child(6) td:nth-child(8) div {
  background-color: #8d79e6; }

.ubq-color-picker tr:nth-child(6) td:nth-child(9) div {
  background-color: #a08fea; }

.ubq-color-picker tr:nth-child(6) td:nth-child(10) div {
  background-color: #b2a4ee; }

.ubq-color-picker tr:nth-child(7) td:nth-child(1) div {
  background-color: #1a237e; }

.ubq-color-picker tr:nth-child(7) td:nth-child(2) div {
  background-color: #1e2993; }

.ubq-color-picker tr:nth-child(7) td:nth-child(3) div {
  background-color: #232fa8; }

.ubq-color-picker tr:nth-child(7) td:nth-child(4) div {
  background-color: #2735bd; }

.ubq-color-picker tr:nth-child(7) td:nth-child(5) div {
  background-color: #2b3ad3; }

.ubq-color-picker tr:nth-child(7) td:nth-child(6) div {
  background-color: #404ed8; }

.ubq-color-picker tr:nth-child(7) td:nth-child(7) div {
  background-color: #5561dc; }

.ubq-color-picker tr:nth-child(7) td:nth-child(8) div {
  background-color: #6a75e0; }

.ubq-color-picker tr:nth-child(7) td:nth-child(9) div {
  background-color: #7f88e5; }

.ubq-color-picker tr:nth-child(7) td:nth-child(10) div {
  background-color: #949ce9; }

.ubq-color-picker tr:nth-child(8) td:nth-child(1) div {
  background-color: #0d47a1; }

.ubq-color-picker tr:nth-child(8) td:nth-child(2) div {
  background-color: #0f51b9; }

.ubq-color-picker tr:nth-child(8) td:nth-child(3) div {
  background-color: #115cd0; }

.ubq-color-picker tr:nth-child(8) td:nth-child(4) div {
  background-color: #1366e8; }

.ubq-color-picker tr:nth-child(8) td:nth-child(5) div {
  background-color: #2674ee; }

.ubq-color-picker tr:nth-child(8) td:nth-child(6) div {
  background-color: #3e84ef; }

.ubq-color-picker tr:nth-child(8) td:nth-child(7) div {
  background-color: #5693f1; }

.ubq-color-picker tr:nth-child(8) td:nth-child(8) div {
  background-color: #6da2f3; }

.ubq-color-picker tr:nth-child(8) td:nth-child(9) div {
  background-color: #85b1f5; }

.ubq-color-picker tr:nth-child(8) td:nth-child(10) div {
  background-color: #9cc0f7; }

.ubq-color-picker tr:nth-child(9) td:nth-child(1) div {
  background-color: #006064; }

.ubq-color-picker tr:nth-child(9) td:nth-child(2) div {
  background-color: #00787e; }

.ubq-color-picker tr:nth-child(9) td:nth-child(3) div {
  background-color: #009197; }

.ubq-color-picker tr:nth-child(9) td:nth-child(4) div {
  background-color: #00a9b1; }

.ubq-color-picker tr:nth-child(9) td:nth-child(5) div {
  background-color: #00c2ca; }

.ubq-color-picker tr:nth-child(9) td:nth-child(6) div {
  background-color: #00dae4; }

.ubq-color-picker tr:nth-child(9) td:nth-child(7) div {
  background-color: #00f3fd; }

.ubq-color-picker tr:nth-child(9) td:nth-child(8) div {
  background-color: #18f6ff; }

.ubq-color-picker tr:nth-child(9) td:nth-child(9) div {
  background-color: #31f7ff; }

.ubq-color-picker tr:nth-child(9) td:nth-child(10) div {
  background-color: #4bf8ff; }

.ubq-color-picker tr:nth-child(10) td:nth-child(1) div {
  background-color: #004d40; }

.ubq-color-picker tr:nth-child(10) td:nth-child(2) div {
  background-color: #006755; }

.ubq-color-picker tr:nth-child(10) td:nth-child(3) div {
  background-color: #00806a; }

.ubq-color-picker tr:nth-child(10) td:nth-child(4) div {
  background-color: #009a80; }

.ubq-color-picker tr:nth-child(10) td:nth-child(5) div {
  background-color: #00b395; }

.ubq-color-picker tr:nth-child(10) td:nth-child(6) div {
  background-color: #00cdaa; }

.ubq-color-picker tr:nth-child(10) td:nth-child(7) div {
  background-color: #00e6bf; }

.ubq-color-picker tr:nth-child(10) td:nth-child(8) div {
  background-color: #01ffd4; }

.ubq-color-picker tr:nth-child(10) td:nth-child(9) div {
  background-color: #1affd8; }

.ubq-color-picker tr:nth-child(10) td:nth-child(10) div {
  background-color: #34ffdd; }

.ubq-color-picker tr:nth-child(11) td:nth-child(1) div {
  background-color: #1b5e20; }

.ubq-color-picker tr:nth-child(11) td:nth-child(2) div {
  background-color: #217227; }

.ubq-color-picker tr:nth-child(11) td:nth-child(3) div {
  background-color: #26862d; }

.ubq-color-picker tr:nth-child(11) td:nth-child(4) div {
  background-color: #2c9934; }

.ubq-color-picker tr:nth-child(11) td:nth-child(5) div {
  background-color: #32ad3b; }

.ubq-color-picker tr:nth-child(11) td:nth-child(6) div {
  background-color: #37c142; }

.ubq-color-picker tr:nth-child(11) td:nth-child(7) div {
  background-color: #48ca51; }

.ubq-color-picker tr:nth-child(11) td:nth-child(8) div {
  background-color: #5bd064; }

.ubq-color-picker tr:nth-child(11) td:nth-child(9) div {
  background-color: #6fd677; }

.ubq-color-picker tr:nth-child(11) td:nth-child(10) div {
  background-color: #83db8a; }

.ubq-color-picker tr:nth-child(12) td:nth-child(1) div {
  background-color: #33691e; }

.ubq-color-picker tr:nth-child(12) td:nth-child(2) div {
  background-color: #3d7d24; }

.ubq-color-picker tr:nth-child(12) td:nth-child(3) div {
  background-color: #469129; }

.ubq-color-picker tr:nth-child(12) td:nth-child(4) div {
  background-color: #50a52f; }

.ubq-color-picker tr:nth-child(12) td:nth-child(5) div {
  background-color: #5ab835; }

.ubq-color-picker tr:nth-child(12) td:nth-child(6) div {
  background-color: #65c83f; }

.ubq-color-picker tr:nth-child(12) td:nth-child(7) div {
  background-color: #75ce52; }

.ubq-color-picker tr:nth-child(12) td:nth-child(8) div {
  background-color: #85d366; }

.ubq-color-picker tr:nth-child(12) td:nth-child(9) div {
  background-color: #95d97a; }

.ubq-color-picker tr:nth-child(12) td:nth-child(10) div {
  background-color: #a4df8e; }

.ubq-color-picker tr:nth-child(13) td:nth-child(1) div {
  background-color: #827717; }

.ubq-color-picker tr:nth-child(13) td:nth-child(2) div {
  background-color: #988b1b; }

.ubq-color-picker tr:nth-child(13) td:nth-child(3) div {
  background-color: #ad9f1f; }

.ubq-color-picker tr:nth-child(13) td:nth-child(4) div {
  background-color: #c3b323; }

.ubq-color-picker tr:nth-child(13) td:nth-child(5) div {
  background-color: #d9c626; }

.ubq-color-picker tr:nth-child(13) td:nth-child(6) div {
  background-color: #ddcc3c; }

.ubq-color-picker tr:nth-child(13) td:nth-child(7) div {
  background-color: #e0d252; }

.ubq-color-picker tr:nth-child(13) td:nth-child(8) div {
  background-color: #e4d767; }

.ubq-color-picker tr:nth-child(13) td:nth-child(9) div {
  background-color: #e8dd7d; }

.ubq-color-picker tr:nth-child(13) td:nth-child(10) div {
  background-color: #ece393; }

.ubq-color-picker tr:nth-child(14) td:nth-child(1) div {
  background-color: #ae9d81; }

.ubq-color-picker tr:nth-child(14) td:nth-child(2) div {
  background-color: #b8a991; }

.ubq-color-picker tr:nth-child(14) td:nth-child(3) div {
  background-color: #c2b5a0; }

.ubq-color-picker tr:nth-child(14) td:nth-child(4) div {
  background-color: #ccc1b0; }

.ubq-color-picker tr:nth-child(14) td:nth-child(5) div {
  background-color: #d6cdbf; }

.ubq-color-picker tr:nth-child(14) td:nth-child(6) div {
  background-color: #e0d9cf; }

.ubq-color-picker tr:nth-child(14) td:nth-child(7) div {
  background-color: #eae5de; }

.ubq-color-picker tr:nth-child(14) td:nth-child(8) div {
  background-color: #f4f2ee; }

.ubq-color-picker tr:nth-child(14) td:nth-child(9) div {
  background-color: #fefefd; }

.ubq-color-picker tr:nth-child(14) td:nth-child(10) div {
  background-color: white; }

.ubq-color-picker tr:nth-child(15) td:nth-child(1) div {
  background-color: #f57f17; }

.ubq-color-picker tr:nth-child(15) td:nth-child(2) div {
  background-color: #f68c2f; }

.ubq-color-picker tr:nth-child(15) td:nth-child(3) div {
  background-color: #f79a48; }

.ubq-color-picker tr:nth-child(15) td:nth-child(4) div {
  background-color: #f8a760; }

.ubq-color-picker tr:nth-child(15) td:nth-child(5) div {
  background-color: #f9b579; }

.ubq-color-picker tr:nth-child(15) td:nth-child(6) div {
  background-color: #fac291; }

.ubq-color-picker tr:nth-child(15) td:nth-child(7) div {
  background-color: #fbd0aa; }

.ubq-color-picker tr:nth-child(15) td:nth-child(8) div {
  background-color: #fcddc2; }

.ubq-color-picker tr:nth-child(15) td:nth-child(9) div {
  background-color: #fdebdb; }

.ubq-color-picker tr:nth-child(15) td:nth-child(10) div {
  background-color: #fef8f3; }

.ubq-color-picker tr:nth-child(16) td:nth-child(1) div {
  background-color: #ff6f00; }

.ubq-color-picker tr:nth-child(16) td:nth-child(2) div {
  background-color: #ff7d1a; }

.ubq-color-picker tr:nth-child(16) td:nth-child(3) div {
  background-color: #ff8c33; }

.ubq-color-picker tr:nth-child(16) td:nth-child(4) div {
  background-color: #ff9a4d; }

.ubq-color-picker tr:nth-child(16) td:nth-child(5) div {
  background-color: #ffa966; }

.ubq-color-picker tr:nth-child(16) td:nth-child(6) div {
  background-color: #ffb780; }

.ubq-color-picker tr:nth-child(16) td:nth-child(7) div {
  background-color: #ffc599; }

.ubq-color-picker tr:nth-child(16) td:nth-child(8) div {
  background-color: #ffd4b3; }

.ubq-color-picker tr:nth-child(16) td:nth-child(9) div {
  background-color: #ffe2cc; }

.ubq-color-picker tr:nth-child(16) td:nth-child(10) div {
  background-color: #fff1e6; }

.ubq-color-picker tr:nth-child(17) td:nth-child(1) div {
  background-color: #e65100; }

.ubq-color-picker tr:nth-child(17) td:nth-child(2) div {
  background-color: #ff5a01; }

.ubq-color-picker tr:nth-child(17) td:nth-child(3) div {
  background-color: #ff6b1a; }

.ubq-color-picker tr:nth-child(17) td:nth-child(4) div {
  background-color: #ff7b34; }

.ubq-color-picker tr:nth-child(17) td:nth-child(5) div {
  background-color: #ff8c4d; }

.ubq-color-picker tr:nth-child(17) td:nth-child(6) div {
  background-color: #ff9c67; }

.ubq-color-picker tr:nth-child(17) td:nth-child(7) div {
  background-color: #ffad80; }

.ubq-color-picker tr:nth-child(17) td:nth-child(8) div {
  background-color: #ffbd9a; }

.ubq-color-picker tr:nth-child(17) td:nth-child(9) div {
  background-color: #ffceb3; }

.ubq-color-picker tr:nth-child(17) td:nth-child(10) div {
  background-color: #ffdecd; }

.ubq-color-picker tr:nth-child(18) td:nth-child(1) div {
  background-color: #bf360c; }

.ubq-color-picker tr:nth-child(18) td:nth-child(2) div {
  background-color: #d73d0e; }

.ubq-color-picker tr:nth-child(18) td:nth-child(3) div {
  background-color: #ef440f; }

.ubq-color-picker tr:nth-child(18) td:nth-child(4) div {
  background-color: #f15626; }

.ubq-color-picker tr:nth-child(18) td:nth-child(5) div {
  background-color: #f3693e; }

.ubq-color-picker tr:nth-child(18) td:nth-child(6) div {
  background-color: #f47b56; }

.ubq-color-picker tr:nth-child(18) td:nth-child(7) div {
  background-color: #f68e6e; }

.ubq-color-picker tr:nth-child(18) td:nth-child(8) div {
  background-color: #f7a186; }

.ubq-color-picker tr:nth-child(18) td:nth-child(9) div {
  background-color: #f9b39e; }

.ubq-color-picker tr:nth-child(18) td:nth-child(10) div {
  background-color: #fac6b6; }

.ubq-color-picker tr:nth-child(19) td:nth-child(1) div {
  background-color: #3e2723; }

.ubq-color-picker tr:nth-child(19) td:nth-child(2) div {
  background-color: #4e312c; }

.ubq-color-picker tr:nth-child(19) td:nth-child(3) div {
  background-color: #5f3c35; }

.ubq-color-picker tr:nth-child(19) td:nth-child(4) div {
  background-color: #6f463f; }

.ubq-color-picker tr:nth-child(19) td:nth-child(5) div {
  background-color: #7f5048; }

.ubq-color-picker tr:nth-child(19) td:nth-child(6) div {
  background-color: #8f5a51; }

.ubq-color-picker tr:nth-child(19) td:nth-child(7) div {
  background-color: #a0655a; }

.ubq-color-picker tr:nth-child(19) td:nth-child(8) div {
  background-color: #aa7369; }

.ubq-color-picker tr:nth-child(19) td:nth-child(9) div {
  background-color: #b48279; }

.ubq-color-picker tr:nth-child(19) td:nth-child(10) div {
  background-color: #bd918a; }

.ubq-color-picker td div {
  height: 33px;
  min-width: 33px;
  width: 100%;
  border: 1px white solid;
  transition: all .2s ease-out;
  border-radius: 2px; }
  .ubq-color-picker td div:hover {
    border-radius: 10px; }
  .ubq-color-picker td div.active {
    border-radius: 20px; }

.ubq-color-picker .color-square {
  display: flex;
  flex-direction: column;
  float: right; }
  .ubq-color-picker .color-square .color-palette-selector {
    position: relative;
    height: 150px;
    background: beige;
    padding: 10px;
    transition: all 0.5s;
    box-shadow: 0px 5px 20px 2px #e8e8e8;
    border: 1px solid black;
    cursor: pointer; }
    .ubq-color-picker .color-square .color-palette-selector:hover {
      box-shadow: 0px 0px 20px 2px #b3b3b3; }
    .ubq-color-picker .color-square .color-palette-selector.active {
      border: 5px solid #e8e8e8; }
    .ubq-color-picker .color-square .color-palette-selector .text-main-color-switcher {
      position: absolute;
      right: 10px;
      bottom: 10px;
      width: 40px;
      height: 40px;
      border-radius: 30px;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      padding: 7px;
      border: 1px solid #e8e8e8;
      transition: all 0.3s; }
      .ubq-color-picker .color-square .color-palette-selector .text-main-color-switcher:hover {
        transform: translate(0px, -5px); }

.design-icon-choice .material-icon-choice-section {
  max-height: 400px;
  overflow-y: scroll; }

.design-icon-choice .material-selection {
  display: inline-block;
  padding: 5px;
  margin: 4px;
  border-radius: 3px;
  border: 1px solid #e8e8e8;
  transition: all 0.3s;
  cursor: pointer; }
  .design-icon-choice .material-selection:hover {
    border: 1px solid #D40000; }
  .design-icon-choice .material-selection.active {
    border: 1px solid #D40000; }

.selected-phone-menu {
  min-width: 100px;
  padding: 20px 1px 20px 10px !important;
  color: white !important; }

.little-icon-view-switch {
  display: inline-block;
  width: 44px;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 3px;
  border: 1px solid #D40000;
  cursor: pointer;
  transition: all 0.3s; }
  .little-icon-view-switch:hover {
    background: #ff6e6e; }

.icon-view-switch {
  position: absolute;
  right: -60px;
  padding-top: 20px;
  display: flex;
  flex-direction: column; }

.tablet-preview {
  margin-top: -90px !important;
  margin-left: 90px; }
  .tablet-preview .phone-screen {
    border-radius: 0px !important;
    top: 160px !important;
    left: -16px !important;
    width: 680px !important;
    height: 511px !important;
    overflow-y: scroll !important; }

.laptop-preview {
  margin-top: 0px !important; }
  .laptop-preview .phone-screen {
    border-radius: 0px !important;
    top: 66px !important;
    left: 172px !important;
    width: 916px !important;
    height: 575px !important;
    overflow-y: scroll !important; }

.laptop-preview-modal-window .modal-dialog {
  width: 1300px; }

.training-progress-bar {
  background: #f9f9f9;
  border: #e8e8e8 1px solid;
  width: 100%;
  height: 30px; }
  .training-progress-bar .training-progress-fill {
    background: #D40000;
    height: 100%;
    transition: all 0.2s; }

.training-info-cards-section {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center; }
  .training-info-cards-section .training-info-card {
    width: 200px;
    padding: 5px;
    margin: 5px 40px;
    box-shadow: 0px 2px 20px #e8e8e8; }

.prediction-card {
  margin: 20px;
  box-shadow: 0px 2px 20px #e8e8e8; }
  .prediction-card .prediction-card-title {
    margin: 7px 30px;
    padding: 5px;
    font-size: 24px;
    font-weight: bold;
    border-bottom: #e8e8e8 solid 1px; }
  .prediction-card .prediction-data-display tr td {
    padding: 6px;
    font-size: 14px; }
  .prediction-card .prediction-data-display tr td:nth-child(1) {
    font-weight: bold; }
  .prediction-card .prediction-data-display .prediction-category-bars {
    width: 100%; }
    .prediction-card .prediction-data-display .prediction-category-bars tr td {
      word-wrap: break-word;
      padding: 5px 10px;
      font-size: 12px; }
      .prediction-card .prediction-data-display .prediction-category-bars tr td .prediction-progress-bar {
        position: relative;
        background: #f9f9f9;
        border: #e8e8e8 1px solid;
        width: 100%;
        height: 15px; }
        .prediction-card .prediction-data-display .prediction-category-bars tr td .prediction-progress-bar .training-progress-fill {
          background: #D40000;
          height: 100%;
          transition: all 0.2s; }
        .prediction-card .prediction-data-display .prediction-category-bars tr td .prediction-progress-bar .prediction-percentage {
          position: absolute;
          top: 0px;
          left: 20%;
          color: black; }

#tabs-app-container {
  display: flex;
  flex-direction: row; }
  #tabs-app-container #experience-editor-tabs {
    flex: 2; }
  #tabs-app-container #no-nvc-emulator-wrapper {
    flex: 1;
    min-width: 350px;
    padding: 4px;
    justify-content: center; }
    #tabs-app-container #no-nvc-emulator-wrapper #sticky-scroller {
      margin: 0px 24px;
      position: fixed;
      top: 170px;
      height: 580px;
      width: 330px;
      overflow: hidden; }
      #tabs-app-container #no-nvc-emulator-wrapper #sticky-scroller #reconnect-nonvc {
        position: absolute;
        text-align: center;
        z-index: -1;
        top: 40%;
        left: 40%; }

#studio-experience-editor .padding-top-8 {
  padding-top: 8px; }

#studio-experience-editor .margin-top-8 {
  margin-top: 8px; }

#studio-experience-editor .noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

#studio-experience-editor .experience-button {
  transition: background-color 0.4s;
  background-color: #D40000;
  cursor: pointer;
  color: white;
  padding: 6px;
  display: inline-block;
  text-align: center;
  width: 105px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }
  #studio-experience-editor .experience-button:hover {
    background-color: #a10000; }
  #studio-experience-editor .experience-button:active {
    background-color: #bb0000; }

#studio-experience-editor .button-remove-item {
  transition: transform 0.3s;
  padding: 2px 2px;
  background-color: #d43e3a;
  color: white;
  cursor: pointer;
  box-shadow: 0px 2px 5px #e8e8e8;
  display: inline-block; }
  #studio-experience-editor .button-remove-item .material-icons {
    vertical-align: sub; }
  #studio-experience-editor .button-remove-item:hover {
    transform: translateY(-2px) !important; }

#studio-experience-editor hr {
  margin-top: 0px; }

#studio-experience-editor #general-experience-editor > div {
  margin-bottom: 16px; }

#studio-experience-editor #general-experience-editor .settings-cell {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 50px; }
  #studio-experience-editor #general-experience-editor .settings-cell .settings-cell-title {
    width: 150px; }
  #studio-experience-editor #general-experience-editor .settings-cell .deactivate-button {
    background-color: #d43e3a; }
  #studio-experience-editor #general-experience-editor .settings-cell .selectize-input {
    min-width: 100px; }

#studio-experience-editor #general-experience-editor #menu-images-list-section .menu-layout-type {
  padding: 4px;
  display: inline-block;
  border: 5px solid white;
  transition: border-color 0.3s; }
  #studio-experience-editor #general-experience-editor #menu-images-list-section .menu-layout-type.active {
    border: 5px solid #D40000; }

#studio-experience-editor #general-experience-editor .pick-color-cell {
  display: flex;
  flex-direction: row;
  margin-bottom: 12px;
  min-height: 55px; }
  #studio-experience-editor #general-experience-editor .pick-color-cell .pick-color-title-details {
    display: flex;
    flex-direction: column;
    width: 150px; }

#studio-experience-editor #general-experience-editor .pick-fonts-cell {
  display: flex;
  flex-direction: row;
  margin-bottom: 12px; }
  #studio-experience-editor #general-experience-editor .pick-fonts-cell .font-type-title {
    width: 150px; }

#studio-experience-editor #page-editor {
  display: flex;
  flex-direction: column; }
  @media screen and (min-width: 1200px) {
    #studio-experience-editor #page-editor {
      flex-direction: row; } }
  #studio-experience-editor #page-editor #page-names {
    flex: 3;
    padding-top: 4px;
    margin-right: 12px; }
    #studio-experience-editor #page-editor #page-names .pages-heading {
      padding: 2px; }
    #studio-experience-editor #page-editor #page-names .page-drag-handle {
      color: #8e8e93 !important;
      height: 38px;
      padding-top: 10px; }
    #studio-experience-editor #page-editor #page-names .editable-page-info {
      padding: 4px;
      display: flex;
      flex-direction: row;
      transition: transform 0.4s; }
      #studio-experience-editor #page-editor #page-names .editable-page-info .delete-page-icon-button {
        color: white;
        margin-left: 5px; }
      #studio-experience-editor #page-editor #page-names .editable-page-info:not(.active):hover {
        transform: translateY(-4px); }
      #studio-experience-editor #page-editor #page-names .editable-page-info.active {
        color: white; }
        #studio-experience-editor #page-editor #page-names .editable-page-info.active .page-symbol, #studio-experience-editor #page-editor #page-names .editable-page-info.active .editable-page-title {
          background-color: #D40000 !important; }
          #studio-experience-editor #page-editor #page-names .editable-page-info.active .page-symbol:hover, #studio-experience-editor #page-editor #page-names .editable-page-info.active .editable-page-title:hover {
            box-shadow: 0px 5px 3px #e8e8e8;
            transform: translateY(-5px);
            background-color: #a10000 !important; }
        #studio-experience-editor #page-editor #page-names .editable-page-info.active .editable-page-title.editing {
          transform: translateY(-5px); }
      #studio-experience-editor #page-editor #page-names .editable-page-info .page-symbol {
        flex: 1;
        transition: all 0.4s;
        padding: 7px 5px;
        text-align: center;
        box-shadow: 0px 2px 5px #e8e8e8;
        cursor: pointer; }
      #studio-experience-editor #page-editor #page-names .editable-page-info .add-new-page {
        flex: 4;
        cursor: pointer;
        box-shadow: 0px 2px 5px #e8e8e8;
        margin-right: 5px;
        cursor: pointer;
        text-align: center;
        padding-top: 10px;
        color: #D40000;
        font-size: 16px; }
      #studio-experience-editor #page-editor #page-names .editable-page-info .new-page-symbol {
        color: white !important;
        background-color: #D40000 !important; }
      #studio-experience-editor #page-editor #page-names .editable-page-info .editable-page-title {
        flex: 3;
        transition: all 0.4s;
        box-shadow: 0px 2px 5px #e8e8e8;
        margin-left: 5px;
        cursor: pointer;
        min-width: 0px;
        position: relative; }
        #studio-experience-editor #page-editor #page-names .editable-page-info .editable-page-title .page-title-text {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          min-width: 0px; }
          #studio-experience-editor #page-editor #page-names .editable-page-info .editable-page-title .page-title-text div:first-child {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden; }
        #studio-experience-editor #page-editor #page-names .editable-page-info .editable-page-title .material-icons {
          font-size: 12px;
          color: white; }
        #studio-experience-editor #page-editor #page-names .editable-page-info .editable-page-title input {
          position: absolute;
          top: 0px;
          height: 38px; }
  #studio-experience-editor #page-editor #page-cards {
    flex: 7;
    background-color: #f8f8f8;
    padding: 8px;
    position: relative; }
    #studio-experience-editor #page-editor #page-cards .spinner {
      margin: 70px 0px; }
    #studio-experience-editor #page-editor #page-cards #cards-in-page-container {
      padding-bottom: 24px; }
      #studio-experience-editor #page-editor #page-cards #cards-in-page-container .empty-page-message {
        text-align: center;
        margin: 70px 0px; }
      #studio-experience-editor #page-editor #page-cards #cards-in-page-container .cards-in-page-list {
        display: flex;
        flex-direction: column; }
        #studio-experience-editor #page-editor #page-cards #cards-in-page-container .cards-in-page-list .cards-in-page-row {
          display: flex;
          flex-direction: row;
          align-items: center;
          background-color: white;
          margin-bottom: 8px;
          padding: 4px;
          box-shadow: 0px 2px 5px #ccc; }
          #studio-experience-editor #page-editor #page-cards #cards-in-page-container .cards-in-page-list .cards-in-page-row .edit-settings-btn {
            margin: 0px 4px; }
    #studio-experience-editor #page-editor #page-cards #all-experience-containers-section .container-score-card {
      width: 25%;
      min-width: 180px; }
    #studio-experience-editor #page-editor #page-cards #all-experience-containers-section .number-in-page-message {
      float: right;
      color: #D40000; }
    #studio-experience-editor #page-editor #page-cards .experience-containers-list {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center; }
      #studio-experience-editor #page-editor #page-cards .experience-containers-list .container-score-card {
        background-color: white;
        width: 20%;
        min-width: 150px;
        box-shadow: 0px 2px 5px #e8e8e8;
        margin: 12px;
        padding: 8px;
        display: flex;
        flex-direction: column; }
        #studio-experience-editor #page-editor #page-cards .experience-containers-list .container-score-card .card-in-page-header {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          margin-bottom: 8px;
          align-items: center; }
          #studio-experience-editor #page-editor #page-cards .experience-containers-list .container-score-card .card-in-page-header .card-title-in-page-header {
            font-size: 16px;
            font-weight: bold; }

#icon-picker-dialog .modal-body {
  padding: 0px 15px; }

#icon-picker-dialog #search-row {
  padding: 8px;
  padding-bottom: 12px;
  margin-bottom: 2px;
  box-shadow: 0px 2px 1px #ddd; }

#icon-picker-dialog #icon-select-grid {
  background-color: #f8f8f8;
  max-height: 400px;
  overflow-y: scroll;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center; }

#icon-picker-dialog .icon-select-cell {
  transition: all 0.3s;
  width: 120px;
  padding: 5px;
  margin: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0px 2px 5px #e8e8e8;
  background-color: white;
  cursor: pointer; }
  #icon-picker-dialog .icon-select-cell:hover {
    box-shadow: 0px 6px 4px #e8e8e8;
    transform: translateY(-4px); }
  #icon-picker-dialog .icon-select-cell.active {
    background-color: #D40000;
    color: white; }

#saving-notification div:first-child {
  z-index: 6; }

#saving-notification .notification-panel {
  position: fixed;
  width: 240px;
  height: 40px;
  left: 50%;
  z-index: 5;
  background-color: white;
  box-shadow: 0px 4px 6px #e8e8e8;
  transition: top 0.2s ease-in;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around; }
  #saving-notification .notification-panel.error-border {
    border: #d43e3a 4px solid; }
  #saving-notification .notification-panel .notification-text {
    flex: 2;
    text-align: center; }
    #saving-notification .notification-panel .notification-text.notification-error-text {
      color: #d43e3a;
      font-weight: bold;
      cursor: pointer;
      height: 40px;
      line-height: 40px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 0px 4px; }
      #saving-notification .notification-panel .notification-text.notification-error-text:hover {
        color: #d9534f;
        text-decoration: underline; }
  #saving-notification .notification-panel .notification-icon {
    padding: 4px; }
    #saving-notification .notification-panel .notification-icon .close-notification-button {
      padding: 0px 2px;
      padding-top: 2px;
      background-color: #d43e3a;
      color: white;
      cursor: pointer;
      display: inline-block; }
      #saving-notification .notification-panel .notification-icon .close-notification-button .material-icons {
        vertical-align: sub;
        font-size: 16px;
        font-weight: bold; }
      #saving-notification .notification-panel .notification-icon .close-notification-button:hover {
        background-color: #d9534f; }

.drag-handle {
  width: 20px;
  height: 30px;
  background-color: #fafafa;
  cursor: grab;
  padding-top: 6px;
  margin-left: 4px;
  margin-right: 4px; }
  .drag-handle:active {
    cursor: grabbing; }
  .drag-handle .material-icons {
    font-size: 18px;
    transform: rotateZ(90deg); }

.droppable-signal {
  border: 1px dashed transparent; }
  .droppable-signal.droppable-signal-active {
    border-color: #ddd; }
  .droppable-signal.foreign-item-hover-over {
    border-color: #D40000;
    border-style: solid; }

.lite-color-wheel {
  position: relative; }
  .lite-color-wheel .wheel-brightness-indicator {
    pointer-events: none;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: black;
    border-radius: 100%; }
  .lite-color-wheel .selection-indicator-canvas {
    position: absolute;
    top: 0px;
    left: 0px; }

.buttonsHorizontal {
  position: fixed;
  bottom: 20px;
  left: 20px;
  padding: 0;
  margin-right: 10px;
  list-style: none; }

.buttonsHorizontal > li {
  display: inline;
  margin-right: 10px; }

.buttonsHorizontal span {
  display: inline !important; }

.buttonsHorizontal a {
  margin-left: 10px; }

.buttonsHorizontal > li > a {
  background: #DDD;
  border: solid 1px #666;
  display: inline;
  padding: 5px; }

.buttonsHorizontal a.active {
  opacity: 1.0; }

.buttonsHorizontal a.adisabled {
  cursor: not-allowed;
  opacity: .65; }

.buttonsHorizontal a.adisabled:hover {
  text-decoration: none; }

.buttonsHorizontal a.adisabled:focus {
  text-decoration: none; }

.buttonsHorizontal a.adisabled:active {
  text-decoration: none; }

.aPanel {
  margin: 1em; }

#upper_section {
  display: flex;
  justify-content: space-evenly;
  border-bottom: 0.25px solid #C4C4C4;
  height: 58px; }

#search_box {
  margin-bottom: 10px;
  padding-bottom: 5px !important;
  height: 35px !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-size: 16px !important;
  line-height: 19px !important;
  color: #000000 !important;
  border: 1px solid #4E82C3 !important;
  box-sizing: border-box !important;
  padding-left: 21px !important;
  padding-right: 40px !important;
  float: left; }

.upper_section_image:hover {
  cursor: pointer; }

#search_icon {
  top: 1px;
  margin-left: 10px;
  margin-right: 10px; }

#all_reports {
  height: calc(100% - 50px);
  overflow-y: auto; }

#reports_list .reports_header_unread {
  background: #D40000; }

#reports_list .reports_header_unread:hover {
  cursor: pointer; }

#reports_list .reports_header_read {
  background: #D40000; }

#reports_list .reports_header_read:hover {
  cursor: pointer; }

#reports_list .reports_header_read, #reports_list .reports_header_unread {
  clear: both;
  height: 26.1px;
  text-align: center;
  font-style: normal;
  font-weight: bold;
  font-size: 12px;
  line-height: 14px;
  color: #fff;
  padding-top: 6px;
  margin-bottom: 0; }

.reports_container {
  display: flex;
  flex-direction: column; }

.single_report {
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  border-bottom: 0.25px solid #C4C4C4;
  transform: rotate(0.01deg); }

.single_report:hover {
  background: #e4e4e9; }

.single_report_active {
  background: #e4e4e9; }

.middle_report_element {
  display: flex;
  flex-direction: column;
  width: 210px; }

.report_category {
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 14px;
  color: #4B4B4B;
  overflow: hidden;
  text-overflow: ellipsis; }

.report_username {
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  line-height: 19px;
  margin-bottom: 0;
  color: rgba(46, 46, 53, 0.93);
  overflow: hidden;
  text-overflow: ellipsis; }

.report_files {
  display: flex;
  flex-direction: row; }

.report_files p {
  background: #AFAFB2;
  border-radius: 10px;
  padding: 2px 4px 2px 4px;
  text-align: center;
  margin-right: 5px;
  font-style: normal;
  font-weight: 300;
  font-size: 9px;
  line-height: 12px;
  color: #FFFFFF; }

.report_time {
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 14px;
  color: #33333C; }
  .report_time p {
    width: max-content; }
  .report_time .customer_id:hover {
    cursor: pointer; }

.rounded-search-barv2 {
  margin-top: 12px;
  width: 80% !important; }

.rounded-search-barv2 input {
  height: 25px !important;
  border-radius: 25px !important; }

.rounded-search-barv2 .ti-search {
  color: #8e8e93 !important;
  font-weight: bold;
  top: -5px; }

.rounded-search-barv2 i {
  line-height: 30px; }

.rounded-search-barv2 .ti-search:hover {
  cursor: pointer; }

.svg_img {
  margin-left: 8px;
  margin-right: 12px; }

.centered_img_div {
  display: flex;
  flex-direction: column;
  justify-content: center; }

#svg_text {
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  line-height: 19px;
  color: #FFFFFF; }

.report_contact_div {
  display: flex;
  flex: 3;
  padding-left: 10px;
  padding-right: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

@media (max-width: 1450px) {
  .report_status, .responsive_img {
    display: none; }
  .report_contact_div {
    flex: 1 !important; }
  .report_contact_div .report_username {
    font-size: 12px; }
  .report_contact_div .report_contact {
    width: 100%; }
  .report_request_div button {
    font-size: 12px !important; }
  .report_status_div {
    flex: 0 !important; }
  .report_request_div {
    max-width: 170px; }
  .report_div {
    flex: 0 !important; }
  .report_actions_div {
    flex: 3 !important;
    max-width: 160px !important; } }

@media (max-width: 1050px) {
  .report_div {
    display: none !important; }
  .report_actions_div {
    justify-content: flex-start !important; }
    .report_actions_div #search_svg {
      margin: 20px 10px !important; }
    .report_actions_div .dropdown_report {
      margin: 8px 10px !important; } }

.report_contact_div:hover {
  cursor: pointer; }

.report_status_div {
  border-right: 0.25px solid #AFAFB2;
  border-left: 0.25px solid #AFAFB2;
  display: flex;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 20px;
  justify-content: center;
  flex: 1; }

.report_div {
  display: flex;
  padding-top: 20px;
  justify-content: center;
  padding-left: 5px;
  padding-right: 5px;
  flex: 1; }

.report_actions_div {
  display: flex;
  justify-content: space-around;
  flex: 2;
  max-width: 180px; }

.report_request_div {
  display: flex;
  padding-left: 5px;
  padding-right: 5px;
  flex: 1; }

.report_request_div button {
  margin: auto;
  padding: 5px;
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
  line-height: 17px;
  vertical-align: middle;
  color: #FFFFFF;
  background: #D40000;
  border-radius: 3px; }

.report_status {
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 17px;
  /* identical to box height */
  color: #3F3E3E;
  margin-right: 6px;
  margin-left: 6px; }

.report_status_value {
  margin-bottom: 18px; }

.report_status_value:hover {
  cursor: pointer; }

.report_id {
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
  line-height: 17px;
  /* identical to box height */
  color: #37373F; }

#search_svg {
  margin-top: 20px; }

#search_svg:hover {
  cursor: pointer; }

#attach_svg {
  margin-top: 20px; }

#attach_svg:hover {
  cursor: pointer; }

#actions_svg {
  margin-top: 10px; }

#actions_svg:hover {
  cursor: pointer; }

.coming_message {
  background: #E7E7E7;
  border-radius: 3px;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 16px;
  text-align: left;
  float: left;
  clear: both;
  /* or 21px */
  color: #37373F;
  clip-path: polygon(100% 0, 100% 100%, 15px 100%, 15px 7px, 0 0);
  max-width: 500px; }

.coming_message .message_text {
  padding: 10px 15px 1% 30px;
  word-wrap: break-word;
  margin-bottom: 0;
  min-width: 120px;
  white-space: pre-line;
  text-align: start; }

.coming_message .message_date {
  font-style: normal;
  font-weight: normal;
  font-size: 10px;
  line-height: 14px;
  color: #33333C;
  margin-bottom: 5px;
  padding-right: 5px;
  padding-left: 20px;
  float: right; }

.my_message {
  text-align: left;
  float: right;
  clear: both;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 16px;
  color: #FFFFFF;
  background: #81B44A;
  clip-path: polygon(100% 0, calc(100% - 15px) 7px, calc(100% - 15px) 100%, 0 100%, 0 0);
  max-width: 500px; }

.my_message .message_date {
  font-style: normal;
  font-weight: normal;
  font-size: 10px;
  line-height: 14px;
  color: #FFFFFF;
  margin-bottom: 5px;
  padding-right: 20px;
  padding-left: 5px;
  float: right; }

.my_message .message_text {
  padding: 10px 30px 1% 15px;
  word-wrap: break-word;
  margin-bottom: 0;
  min-width: 120px;
  white-space: pre-line;
  text-align: start; }

.dropdown_report {
  margin-top: 9px;
  width: 10px; }

.dropdown_report .dropdown-content {
  z-index: 1;
  display: none;
  position: absolute;
  background: #fff !important;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  min-width: 180px;
  max-height: 500px;
  overflow-y: auto; }
  .dropdown_report .dropdown-content .dropdown_element {
    display: flex;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px; }
    .dropdown_report .dropdown-content .dropdown_element input[type="checkbox"]:focus {
      outline: 0; }
    .dropdown_report .dropdown-content .dropdown_element img {
      height: 12px;
      width: 12px;
      margin-left: 10px;
      margin-right: 10px; }
    .dropdown_report .dropdown-content .dropdown_element span {
      padding-left: 0;
      padding-right: 0; }
  .dropdown_report .dropdown-content .dropdown_element:hover {
    background-color: #ddd; }

.dropdown_report .dropdown-content span {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  cursor: pointer; }

.dropdown_report .dropdown-content span:hover {
  background-color: #ddd; }

.dropdown_report:hover .dropdown-content {
  display: block; }

.dropdown_report:hover .dropbtn {
  background-color: #3e8e41; }

#chat_box_container {
  height: 69px;
  background: #EFEFEF; }

#chat_box_container .rounded-search-bar {
  padding: 9px 25px 11px 25px !important; }

#chat_box_container input {
  height: 51px;
  border-radius: 30px !important;
  padding-left: 35px !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-size: 18px !important;
  line-height: 22px !important;
  padding-right: 65px !important;
  color: #37373F !important; }

#chat_box_container textarea {
  height: 51px;
  border-radius: 30px !important;
  padding-left: 35px !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-size: 18px !important;
  line-height: 22px !important;
  padding-right: 65px !important;
  color: #37373F !important;
  padding-top: 13px !important; }

#chat_box_container .files_to_upload {
  display: flex;
  width: 100%; }
  #chat_box_container .files_to_upload .single_file {
    margin-top: 9px;
    background: #C4C4C4;
    color: black;
    height: 34px;
    display: flex;
    justify-content: space-between; }
    #chat_box_container .files_to_upload .single_file p {
      padding-top: 7px;
      font-style: normal;
      font-weight: bold;
      font-size: 18px;
      line-height: 22px;
      text-align: initial;
      margin-left: 10px;
      margin-right: 10px; }
    #chat_box_container .files_to_upload .single_file svg {
      margin-top: 11px;
      margin-left: 10px;
      margin-right: 10px; }
  #chat_box_container .files_to_upload .single_file:nth-child(even) {
    margin-left: 10px;
    margin-right: 10px; }

#chat_box_container #search_icon {
  margin-top: 6px;
  margin-right: 20px; }

.overall_container_flexbox {
  display: flex;
  height: calc(100vh - 64px - 51px);
  position: relative;
  width: calc(100% + 30px); }

.inbox_main {
  display: flex;
  flex-direction: column; }

#inbox_report_container {
  border-right: 0.25px solid #C4C4C4;
  border-left: 0.25px solid #C4C4C4;
  background: white;
  height: calc(100vh - 125px); }

.report_contact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: calc(100% - 60px); }

.inbox_report_main {
  text-align: center;
  height: 100%; }

#report_nav_bar {
  background: #EFEFEF;
  height: 58px;
  display: flex;
  border-right: 0.25px solid #AFAFB2; }
  #report_nav_bar .bordered_report_nav_item:nth-child(even) {
    border-right: 0.25px solid #AFAFB2;
    border-left: 0.25px solid #AFAFB2; }

.hoverable_icon:hover {
  cursor: pointer; }

.customer_info_container {
  display: flex;
  flex-direction: column;
  border-left: 0.25px solid #C4C4C4;
  border-right: 0.25px solid #C4C4C4;
  width: 330px;
  background: #fff; }
  .customer_info_container .upper_section {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #DADADA; }
    .customer_info_container .upper_section .header {
      display: flex;
      justify-content: space-between;
      background: #D40000;
      height: 58px; }
      .customer_info_container .upper_section .header svg {
        margin-top: 18px;
        margin-left: 15px;
        margin-right: 15px; }
      .customer_info_container .upper_section .header svg:hover {
        cursor: pointer; }
      .customer_info_container .upper_section .header p {
        margin-top: 15px;
        margin-left: 15px;
        margin-right: 15px;
        font-style: normal;
        font-weight: bold;
        font-size: 18px;
        line-height: 22px;
        color: #FFFFFF; }
    .customer_info_container .upper_section .profile_picture {
      margin: auto;
      margin-top: 30px;
      font-style: normal;
      font-weight: bold;
      font-size: 18px;
      line-height: 22px;
      color: #3F3E3E; }
    .customer_info_container .upper_section p {
      margin-top: 15px;
      margin-bottom: 15px;
      text-align: center;
      font-style: normal;
      font-weight: bold;
      font-size: 18px;
      line-height: 22px;
      color: #3F3E3E; }
  .customer_info_container .lower_section {
    display: flex;
    flex-direction: column;
    overflow-y: auto; }
    .customer_info_container .lower_section .info_element {
      display: flex;
      font-style: normal;
      font-weight: bold;
      font-size: 14px;
      line-height: 17px;
      text-align: right;
      color: #818386;
      justify-content: space-between;
      border-bottom: 0.25px solid #C4C4C4; }
      .customer_info_container .lower_section .info_element p {
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 15px;
        margin-bottom: 10px; }
      .customer_info_container .lower_section .info_element .log_file {
        display: flex;
        margin-top: 10px; }
        .customer_info_container .lower_section .info_element .log_file svg {
          margin-right: 15px;
          margin-left: 15px; }

.customer_info_container .lower_section .conversation_history_element {
  padding: 10px; }

.conversation_history_container .lower_section {
  height: calc(100vh - 172.5px);
  overflow-y: auto; }

.media_container .middle_section {
  text-align: center;
  margin-top: 45px;
  margin-bottom: 25px; }
  .media_container .middle_section .left {
    transform: rotate(180deg);
    margin-right: 5px;
    margin-left: 5px; }
  .media_container .middle_section .left:hover {
    cursor: pointer; }
  .media_container .middle_section .right {
    margin-right: 5px;
    margin-left: 5px; }
  .media_container .middle_section .right:hover {
    cursor: pointer; }
  .media_container .middle_section img {
    object-fit: contain; }

.media_container .lower_section {
  display: flex;
  flex-direction: row;
  padding-left: 15px;
  overflow-x: scroll;
  height: auto;
  margin-bottom: 40px;
  width: 100%; }
  .media_container .lower_section img {
    margin-right: 15px;
    object-fit: contain; }

.inbox_message_search {
  display: flex;
  background: #fff;
  height: 50px;
  border-bottom: 0.25px solid #C4C4C4;
  box-shadow: 3px 0px 5px  #888888; }
  .inbox_message_search svg {
    margin-top: 12px;
    margin-left: 15px;
    margin-right: 15px; }
  .inbox_message_search svg:hover {
    cursor: pointer; }
  .inbox_message_search input {
    width: 75% !important;
    border: none !important;
    color: black !important;
    font-size: 16px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    font-weight: 400 !important;
    margin-top: 8px !important; }

.categories_modal_header {
  height: 50px;
  background: rgba(196, 196, 196, 0.2);
  text-align: center;
  display: flex;
  align-items: center; }
  .categories_modal_header p {
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 29px;
    color: #000000;
    display: inline;
    margin-left: 155px;
    margin-right: 155px;
    margin-bottom: 0; }
  .categories_modal_header img {
    width: 20px;
    display: inline;
    margin-left: 10px;
    margin-right: 10px; }
  .categories_modal_header img:hover {
    cursor: pointer; }

.categories_container {
  display: flex;
  flex-direction: column; }
  .categories_container .category_element {
    height: 46px;
    display: flex;
    flex-direction: row;
    padding-left: 30px;
    padding-right: 30px; }
    .categories_container .category_element p {
      margin-top: 15px;
      font-style: normal;
      font-weight: normal;
      font-size: 16px;
      line-height: 22px;
      color: rgba(46, 46, 53, 0.93); }
    .categories_container .category_element img {
      width: 18px;
      height: 18px;
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 18px; }
  .categories_container .border_bottom {
    border-bottom: 0.2px solid #e5e5e5; }
  .categories_container .category_element:hover {
    cursor: pointer;
    background: #e4e4e9; }

.categories_modal_footer {
  border-top: 0.2px solid #e5e5e5;
  text-align: center; }
  .categories_modal_footer button {
    height: 44px;
    width: 178px;
    margin-top: 24px !important;
    margin-bottom: 24px !important;
    font-style: normal !important;
    font-weight: bold !important;
    font-size: 18px !important;
    line-height: 29px !important;
    text-align: center !important;
    color: #FFFFFF !important; }
  .categories_modal_footer p {
    width: 100%;
    text-align: center;
    position: absolute;
    margin: auto;
    padding-top: 10px; }

#upper_section_while_searching {
  display: flex;
  background: #fff;
  height: 58px;
  border-bottom: 0.25px solid #C4C4C4; }
  #upper_section_while_searching svg {
    margin-top: 22px;
    margin-left: 14px;
    margin-right: 14px; }
  #upper_section_while_searching svg:hover {
    cursor: pointer; }
  #upper_section_while_searching input {
    width: 75% !important;
    border: none !important;
    color: black !important;
    font-size: 16px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    font-weight: 400 !important;
    margin-top: 13px !important; }

.left_positioning {
  position: relative;
  left: -10px;
  top: -30px; }

.right_positioning {
  position: relative;
  left: -170px;
  top: -30px; }

.search_container .single_searched_message {
  display: flex;
  flex-direction: column;
  border-bottom: 0.25px solid #C4C4C4;
  padding: 20px 15px 20px 15px; }
  .search_container .single_searched_message .message_text {
    font-size: 16px;
    margin-bottom: 0; }
  .search_container .single_searched_message .message_date {
    margin-bottom: 0; }

.search_container .single_searched_message:hover {
  background: #e4e4e9; }

.no_found_messages_notification {
  margin-top: 10px;
  margin-left: 10px;
  font-size: 14px; }

.single_message_active {
  background: #3395ff !important; }

.upload_image_biller input {
  padding-left: 15px; }

.upload_image_biller .biller_image_preview img {
  margin-top: 15px; }

.btn.ng-hide.ng-hide-animate {
  display: none !important; }

.downloadable_files {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px; }
  .downloadable_files span, .downloadable_files i {
    color: #078bf7;
    margin-bottom: 10px; }
  .downloadable_files i, .downloadable_files span:hover {
    cursor: pointer; }

.sweet-alert p.error-code {
  font-size: 14px !important; }

#queue-error-modal {
  text-align: center; }
  #queue-error-modal h2 {
    font-size: 30px;
    font-weight: 600;
    text-transform: none;
    position: relative;
    margin: 25px 0;
    padding: 0;
    line-height: 40px;
    display: block;
    color: #5b5b60 !important;
    font-family: "Raleway", sans-serif !important;
    font-weight: 300 !important; }

.sa-icon {
  width: 80px;
  height: 80px;
  border: 4px solid gray;
  -webkit-border-radius: 40px;
  border-radius: 50%;
  margin: 20px auto;
  padding: 0;
  position: relative;
  box-sizing: content-box; }

.sa-icon.sa-error {
  border-color: #F27474; }

.sa-icon.sa-error .sa-x-mark {
  position: relative;
  display: block; }

.sa-icon.sa-error .sa-line.sa-left {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  left: 17px; }

.sa-icon.sa-error .sa-line.sa-right {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  right: 16px; }

.sa-icon.sa-error .sa-line {
  position: absolute;
  height: 5px;
  width: 47px;
  background-color: #F27474;
  display: block;
  top: 37px;
  border-radius: 2px; }

.download_link {
  color: blue; }

.download_link:hover {
  cursor: pointer; }

.submit_request_shrink {
  font-size: 12px !important; }

.margin-top-8 {
  margin-top: 8px !important; }

.resize-vertical {
  resize: vertical; }

.margin_top_40 {
  margin-top: 40px; }

#dialog_error_message {
  word-wrap: break-word; }

.filter_by_status_header {
  margin-bottom: 0;
  font-size: 14px;
  font-weight: bold;
  color: black;
  padding: 10px 10px 0 10px; }

.coming_messages_container {
  min-width: 120px;
  margin-bottom: 10px;
  width: max-content;
  max-width: 500px;
  margin-left: 2%;
  float: left;
  clear: both; }
  .coming_messages_container .message_files_container {
    width: 100%;
    margin-left: 15px;
    float: left; }
    .coming_messages_container .message_files_container .message_file {
      margin-right: 5px;
      float: left; }

.message_file {
  background: #AFAFB2;
  border-radius: 10px;
  padding: 2px 4px 2px 4px;
  text-align: center;
  font-style: normal;
  font-weight: 300;
  font-size: 9px;
  line-height: 12px;
  margin-top: 5px;
  color: #FFFFFF; }

.message_file:hover {
  cursor: pointer; }

.my_messages_container {
  min-width: 120px;
  margin-bottom: 10px;
  width: auto;
  max-width: 500px;
  margin-right: 2%;
  float: right;
  clear: both; }
  .my_messages_container .message_files_container {
    padding-right: 15px;
    width: 100%;
    float: right; }
    .my_messages_container .message_files_container .message_file {
      float: right;
      margin-left: 5px; }

.circular_empty_image {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: white;
  text-align: center;
  border-radius: 50%;
  width: 33px;
  height: 33px;
  background: #4E82C3;
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  line-height: 19px; }

.grayed_span {
  background: #777; }

.report_details_grow {
  height: calc(100vh - 185px) !important; }

.not-allowed {
  cursor: not-allowed !important; }

.overflow_hidden {
  overflow: hidden !important; }

.normal_cursor {
  cursor: initial !important; }

.bank_logo {
  border-left: 1px solid #5F8295;
  height: 30px;
  margin-top: 20px;
  display: none; }
  .bank_logo img {
    padding: 10px;
    max-height: 65px;
    position: relative;
    top: -17px; }

.bank_logo_v2 {
  margin: auto;
  display: none;
  width: max-content !important; }
  .bank_logo_v2 img {
    padding: 10px;
    max-height: 65px; }

.max_content_width {
  min-width: max-content !important; }

.block_div {
  display: block; }

.inbox-profile-picture {
  border-radius: 50%;
  height: 158px;
  width: 158px; }

.margin-bottom-15 {
  margin-bottom: 15px; }

.mcc-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px; }
  .mcc-container input {
    width: calc(100% - 20px);
    margin-bottom: 0 !important; }

.green-colored {
  color: #D40000; }

.full-height {
  height: 100%; }

.lang-list a {
  padding-left: 20px !important; }

.ui-select-choices .disabled {
  opacity: 0.5; }

.no-appointment {
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  clear: both; }

.custom-multiselect .dropdown-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #333 !important; }

.custom-multiselect[wide-dropdown] .dropdown-toggle {
  height: 45px; }

.custom-multiselect .caret {
  border-top-color: #333 !important;
  border-top: 5px dashed;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  right: 17px;
  position: absolute; }

.category-color {
  cursor: pointer;
  width: 50px;
  height: 20px;
  margin-top: 5px;
  border: 1px solid black;
  text-align: center; }

.modal_code {
  display: block;
  text-overflow: clip;
  overflow: auto;
  color: black;
  border: 1px solid #ccc;
  background-color: #eee;
  min-height: 34px; }

.move_cursor {
  cursor: move; }

.download-bulkfile-container {
  display: flex;
  align-items: center; }

.download-bulkfile-container i {
  cursor: pointer;
  margin: 0 5px; }

.dashboard_box {
  height: 180px; }

.word-break-all {
  word-break: break-all; }

.white-space-break {
  white-space: break-spaces; }

[clickable] {
  cursor: pointer; }

.btn-transparent {
  background: transparent;
  color: #D40000;
  border: 1px solid #c8c7cc;
  border-radius: unset; }

.pac-container {
  z-index: 100000; }

.no-padding-top {
  padding-top: 0 !important; }

.queue-section {
  margin-top: 40px; }
  .queue-section .queue-section-title {
    font-weight: bold;
    font-size: 18px;
    color: #5b5b60;
    margin-bottom: 15px;
    padding: 0 15px; }

.right-modal .modal-dialog {
  margin: 16px;
  margin-inline-start: auto; }

.lower-case {
  text-transform: lowercase; }

.switch.checked {
  background: #D40000 !important;
  border-color: #D40000 !important; }

.ladda-spinner div > div > div {
  background: #D40000 !important; }

.dashboard-step-title {
  color: #D40000;
  font-weight: bold;
  margin-top: 15px;
  margin-bottom: 8px; }

.dpa-file input {
  cursor: pointer !important; }

.no-padding-bottom {
  padding-bottom: 0; }

.space30 {
  margin-bottom: 30px; }

.upload-modal .title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 12px;
  color: #000000; }

.upload-modal .upload-option {
  margin-bottom: 16px;
  font-size: 16px;
  color: #1A1919; }

.upload-modal .download-template {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #1A1919;
  margin-inline-end: 24px;
  width: max-content;
  margin-bottom: 0;
  font-size: 16px; }

.upload-modal .separator {
  width: 100%;
  border: 1px solid #EDEBEB;
  margin: 30px 0 24px 0; }

.upload-modal .uploaded-file {
  border: 1px solid #EDEBEB;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between; }
  .upload-modal .uploaded-file .file-info-container {
    flex: 1;
    margin: 0 16px; }
    .upload-modal .uploaded-file .file-info-container .file-name {
      font-size: 16px;
      color: #1A1A1A; }
    .upload-modal .uploaded-file .file-info-container .file-description {
      font-size: 14px;
      color: #878787; }
  .upload-modal .uploaded-file .action-container {
    display: flex;
    align-items: center; }
    .upload-modal .uploaded-file .action-container img:first-child {
      margin-inline-end: 24px; }

.wide-button {
  width: 130px;
  height: 40px; }

.drag-drop-1 {
  border-radius: 10px;
  border: 1px dashed #BCC0BD;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 19px;
  padding-bottom: 19px;
  padding: 34px; }
  .drag-drop-1 img {
    width: 20px;
    margin-bottom: 12px; }
  .drag-drop-1 input {
    display: none; }
  .drag-drop-1 .add-file {
    font-size: 16px;
    color: #191A19; }

.custom-footer {
  border: none; }

.empty-thread {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px; }

.range-active-date .btn-default {
  background: lightgray;
  border-radius: unset; }

.unread-report .report_category, .unread-report .customer_id, .unread-report .report-date {
  font-weight: bold; }

.audit-dialog .modal-dialog {
  width: max-content;
  max-width: 1100px; }

.red-segmentation {
  color: red; }

.green-segmentation {
  color: green; }

.overflow-x-auto {
  overflow-x: auto; }

.video-player {
  max-width: 100%; }

.grace-period-cell {
  max-width: 165px; }
.redemption-rules-modal {
  padding: 32px;
}

.redemption-rules-modal-title-wrapper {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 20px; padding-left: 2rem;
}

.redemption-rules-modal-title {
  font-size: 24px; font-weight: 700; margin: 0
}

.redemption-rules-modal-close-button {
  position: absolute; right: 20px; top: 10px;
}

.redemption-rules-methodology,
.redemption-rules-max-amount,
.redemption-rules-min-amount {
  width: 355px;
}

.redemption-rules-limit-year {
  max-width: calc(50% - 12px);
}

.redemption-rules-max-amount-title {
  font-size: 14px; font-weight: 700;
}

.redemption-rules-min-amount-title {
  margin-bottom: 12px; font-weight: 700; font-size: 14px;
}

.redemption-rules-select-field {
  width: 100%; height: 48px;
}

.redemption-rules-input-field {
  height: 34px;
}

.redemption-rules-input-field-label {
  margin: auto 12px;
}

.redemption-rules-modal-left-top-offset {
  margin-top: 15px;
}

.flex {
  display: flex;
}

.justify-right {
  justify-content: right;
}

.ml-auto {
  margin-left: auto;
}

.mr-12 {
  margin-right: 12px;
}

.sweet-alert > fieldset {
  display: none;
}

.two-values {
  justify-content: space-between;
  height: 71.56px;
}

.left-right-wrapper {
  justify-content: space-around;
  align-items: start;
}

.redemption-rules-buttons {
  margin-top: 4rem;
}

.white-space-break {
  white-space: break-spaces !important; }

.payment-service-field-value-disclaimer-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  margin-top: 8px;

.service-field-value-disclaimer {
  text-align: left;
}
}