.body {
  color: #414141 !important; }

#FormPreview {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  color: #414141 !important;
  display: flex;
  justify-content: center;
  height: 100%; }
  #FormPreview .form-logo-box {
    display: block !important; }
  #FormPreview .react-datepicker-popper {
    z-index: 10000000; }
  #FormPreview .model-error {
    margin: auto;
    padding: 10px;
    border: 2px solid #ccc;
    border-radius: 10px; }
    #FormPreview .model-error img {
      width: 200px; }
  #FormPreview .btn-open-rowlist.right {
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 100;
    box-shadow: 0px 0px 2px 2px #797474; }
  #FormPreview .btn-open-rowlist.left {
    position: fixed;
    top: 12px;
    left: 20px;
    z-index: 100;
    box-shadow: 0px 0px 2px 2px #797474; }
  #FormPreview .loading {
    position: absolute;
    top: 48%;
    left: 48%; }
  #FormPreview .formView {
    width: -webkit-fill-available;
    width: -moz-available;
    position: fixed;
    bottom: 0px;
    top: 0px;
    overflow: auto;
    right: 0px;
    left: 0px; }
    #FormPreview .formView .form-view-root .name,
    #FormPreview .formView .form-view-root .addlogotext,
    #FormPreview .formView .form-view-root .lable-form-name,
    #FormPreview .formView .form-view-root .form-desc-preview,
    #FormPreview .formView .form-view-root .form-desc-preview .ql-editor p,
    #FormPreview .formView .form-view-root .description div,
    #FormPreview .formView .form-view-root .description div p,
    #FormPreview .formView .form-view-root .css-1wa3eu0-placeholder,
    #FormPreview .formView .form-view-root .add,
    #FormPreview .formView .form-view-root select,
    #FormPreview .formView .form-view-root .checkbox-css label,
    #FormPreview .formView .form-view-root .preview-top-box .preview-switch-account,
    #FormPreview .formView .form-view-root .preview-info-text {
      font-family: var(--form-font-family);
      color: var(--form-font-color, #000000); }
    #FormPreview .formView .form-view-root .input-component input,
    #FormPreview .formView .form-view-root textarea,
    #FormPreview .formView .form-view-root .checkbox-css,
    #FormPreview .formView .form-view-root .form-action-button button {
      font-family: var(--form-font-family); }
    #FormPreview .formView .form-view-root .input-component input,
    #FormPreview .formView .form-view-root .css-bm819o-control,
    #FormPreview .formView .form-view-root textarea {
      background-color: var(--form-font-backgroung); }
    #FormPreview .formView .form-view-root {
      max-width: 700px;
      margin: 20px auto 20px auto;
      box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 4px 0px;
      border-radius: 10px;
      background: white;
      background-repeat: no-repeat;
      background-size: cover;
      background-attachment: scroll;
      background-position: center; }
      #FormPreview .formView .form-view-root .input-component input {
        width: 100%;
        line-height: 0; }
      #FormPreview .formView .form-view-root .disable-submit-modal {
        z-index: 1000;
        position: fixed;
        background: #fff;
        border: 5px solid #ddd;
        padding: 20px;
        width: 26%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 8px;
        font-size: 16px;
        height: 20%; }
        #FormPreview .formView .form-view-root .disable-submit-modal .content {
          margin-bottom: 10px;
          font-weight: 500;
          line-height: 20px; }
    #FormPreview .formView .form-success {
      padding: 20px; }
      #FormPreview .formView .form-success p {
        font-weight: bold;
        font-weight: bold;
        font-size: 18px; }
      #FormPreview .formView .form-success .form-login {
        justify-content: center; }
        #FormPreview .formView .form-success .form-login .input-component {
          margin-bottom: 10px;
          margin-top: 10px;
          font-size: 14px;
          width: 100% !important; }
        #FormPreview .formView .form-success .form-login .error-message {
          color: red;
          margin-bottom: 6px;
          font-size: 14px; }
  #FormPreview .content {
    max-width: 600px;
    margin: auto; }
    #FormPreview .content .column-layout {
      width: 100%; }
    #FormPreview .content .two-column-layout {
      width: 50%; }
    @media only screen and (max-width: 768px) {
      #FormPreview .content .two-column-layout {
        width: 100%;
        /* Full-width for mobile */ } }
    #FormPreview .content .css-1okebmr-indicatorSeparator {
      display: none; }
    #FormPreview .content .select-tag-wrapper {
      display: block;
      height: fit-content;
      border-radius: 8px;
      margin: 5px 2px;
      max-width: inherit; }
    #FormPreview .content .select-tag {
      display: inline-flex !important;
      height: 23px !important;
      padding: 0px 10px;
      margin: 0;
      text-align: center;
      font-size: 13px;
      line-height: 21px;
      border-radius: 99px;
      background: #fff;
      color: #2f2f2f;
      text-overflow: ellipsis;
      overflow: hidden;
      max-width: 100%;
      white-space: nowrap; }
      #FormPreview .content .select-tag .Select-aria-only {
        position: relative !important; }
    #FormPreview .content .collaborator-tag {
      display: inline-flex !important;
      align-items: center;
      height: 23px !important;
      border: 1px solid #eee;
      background-color: #eee;
      margin: 5px 2px;
      min-width: 40px;
      border-radius: 99px; }
      #FormPreview .content .collaborator-tag img {
        width: 20px !important;
        height: 20px !important;
        margin: 0 !important; }
      #FormPreview .content .collaborator-tag p {
        font-size: 13px;
        line-height: 18px !important;
        padding: 0 4px;
        overflow: hidden;
        margin: 0;
        white-space: nowrap;
        text-overflow: ellipsis; }
    #FormPreview .content .form-password-footer {
      margin: 0 20px;
      opacity: 0.5;
      font-size: 11px; }
  #FormPreview .message-root .form-error {
    color: red;
    padding: 0px 20px; }
  #FormPreview .info-notice {
    margin: 20px;
    padding: 10px;
    border-radius: 5px;
    /* border: 1px solid #ccc; */
    /* color: #c5626f; */
    background: #f5eeb7;
    display: flex;
    justify-content: space-between; }
    #FormPreview .info-notice p {
      margin-bottom: 0px; }
    #FormPreview .info-notice i {
      cursor: pointer; }
  @media (max-width: 576px) {
    #FormPreview .formView {
      padding: 0px; }
      #FormPreview .formView .form-view-root {
        border-radius: 0; } }

.Toastify__toast--info {
  background: #31353e !important; }

#SortModel, #FilterModel {
  border: 1px solid #e7e7e7;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  position: absolute;
  z-index: 1;
  padding: 10;
  background: #f5f5f5;
  margin-top: 30px; }
  #SortModel .asc-desc-box, #FilterModel .asc-desc-box {
    padding-top: 5px; }
    #SortModel .asc-desc-box .checkbox, #FilterModel .asc-desc-box .checkbox {
      margin: 0 10px; }
    #SortModel .asc-desc-box #RadioToggle, #FilterModel .asc-desc-box #RadioToggle {
      padding-top: 3px; }
  #SortModel .checkbox-filter, #FilterModel .checkbox-filter {
    padding-top: 5px;
    background: #fff;
    border: 1px solid #ddd;
    padding: 7px 10px;
    border-radius: 4px;
    width: 100px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    height: 30px; }
  #SortModel .react-datepicker-wrapper, #FilterModel .react-datepicker-wrapper {
    padding-top: 5px;
    background: #fff;
    border: 1px solid #ddd;
    padding: 4px 10px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    height: 30px; }
    #SortModel .react-datepicker-wrapper input, #FilterModel .react-datepicker-wrapper input {
      border: none;
      margin-top: 2px;
      outline: none; }
      #SortModel .react-datepicker-wrapper input:focus, #FilterModel .react-datepicker-wrapper input:focus {
        outline: none; }
  #SortModel .sort-bx-limit .sort-by-bx, #FilterModel .sort-bx-limit .sort-by-bx {
    max-width: 70px; }
  #SortModel .sort-box, #FilterModel .sort-box {
    padding: 6px 0; }
    #SortModel .sort-box i.close, #FilterModel .sort-box i.close {
      cursor: pointer;
      font-size: 13px;
      position: relative;
      margin-top: 6px; }
    #SortModel .sort-box .Sort-text, #FilterModel .sort-box .Sort-text {
      width: 90px;
      font-weight: 400;
      margin-top: 5px; }
    #SortModel .sort-box .sort-bx, #FilterModel .sort-box .sort-bx {
      position: relative;
      margin-right: 6px; }
    #SortModel .sort-box .sort-by-bx, #FilterModel .sort-box .sort-by-bx {
      background: #fff;
      border: 1px solid #ddd;
      padding: 4px 10px;
      border-radius: 4px;
      width: 100px;
      overflow: hidden;
      cursor: pointer;
      position: relative;
      height: 30px; }
      #SortModel .sort-box .sort-by-bx span, #FilterModel .sort-box .sort-by-bx span {
        white-space: nowrap;
        width: -webkit-fill-available;
        width: -moz-available;
        overflow: hidden;
        font-weight: 400; }
      #SortModel .sort-box .sort-by-bx:hover, #FilterModel .sort-box .sort-by-bx:hover {
        background: #e7e7e7; }
      #SortModel .sort-box .sort-by-bx i, #FilterModel .sort-box .sort-by-bx i {
        position: relative;
        float: right;
        font-size: 10px;
        right: -3px; }
    #SortModel .sort-box .checkbox, #FilterModel .sort-box .checkbox {
      font-size: 12px; }
  #SortModel .select-box, #FilterModel .select-box {
    position: absolute;
    list-style: none;
    border: 1px solid #ddd;
    width: auto;
    z-index: 1000;
    left: 7px;
    border-radius: 4px;
    background: #fff;
    max-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12);
    padding: 5px; }
    #SortModel .select-box li, #FilterModel .select-box li {
      width: 120px;
      overflow: hidden;
      padding: 4px;
      border-radius: 3px; }
      #SortModel .select-box li:hover, #FilterModel .select-box li:hover {
        background: #e7e7e7; }
  #SortModel .link-sort, #FilterModel .link-sort {
    margin: 10px;
    color: #3384f7; }
  #SortModel .empty-bx, #FilterModel .empty-bx {
    padding: 10px;
    color: #ccc; }
  #SortModel .Select, #FilterModel .Select {
    /* margin-top: 10px; */
    min-height: 30px;
    min-width: 150px; }
    #SortModel .Select .Select-menu-outer, #FilterModel .Select .Select-menu-outer {
      z-index: 2 !important; }
    #SortModel .Select .Select-control, #FilterModel .Select .Select-control {
      position: relative;
      border-radius: 4px;
      z-index: 1 !important; }
      #SortModel .Select .Select-control .Select-placeholder, #FilterModel .Select .Select-control .Select-placeholder {
        padding: 0 12px !important; }
      #SortModel .Select .Select-control .Select-multi-value-wrapper, #FilterModel .Select .Select-control .Select-multi-value-wrapper {
        display: inline-flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        padding-left: 5px;
        padding-top: 3px;
        min-height: 30px; }
      #SortModel .Select .Select-control .Select-arrow-zone, #FilterModel .Select .Select-control .Select-arrow-zone {
        cursor: pointer;
        display: table-cell !important;
        position: relative;
        text-align: center;
        vertical-align: middle !important;
        width: 25px;
        padding: 5px; }
      #SortModel .Select .Select-control .Select-input, #FilterModel .Select .Select-control .Select-input {
        height: 18px;
        padding: 0px !important;
        vertical-align: middle;
        margin: auto 0; }
      #SortModel .Select .Select-control .Select-input > input, #FilterModel .Select .Select-control .Select-input > input {
        box-sizing: border-box !important;
        padding: 0 !important; }
      #SortModel .Select .Select-control:hover, #FilterModel .Select .Select-control:hover {
        box-shadow: none; }
      #SortModel .Select .Select-control .select-tag-wrapper, #FilterModel .Select .Select-control .select-tag-wrapper {
        display: block;
        height: fit-content;
        border-radius: 8px;
        margin: 5px 2px;
        max-width: inherit; }
    #SortModel .Select .tab-select-bx, #FilterModel .Select .tab-select-bx {
      margin: 0 2px; }
    #SortModel .Select .collaborator-tag, #FilterModel .Select .collaborator-tag {
      display: inline-flex !important;
      align-items: center;
      height: 18px !important;
      border: 1px solid #eee;
      background-color: #eee;
      margin: 5px 2px;
      min-width: 40px;
      border-radius: 10px; }
      #SortModel .Select .collaborator-tag img, #FilterModel .Select .collaborator-tag img {
        width: 20px !important;
        height: 20px !important;
        margin: 0 !important; }
      #SortModel .Select .collaborator-tag p, #FilterModel .Select .collaborator-tag p {
        font-size: 13px;
        line-height: 18px !important;
        padding: 0 4px;
        overflow: hidden;
        margin: 0;
        white-space: nowrap;
        text-overflow: ellipsis; }
    #SortModel .Select .select-tag, #FilterModel .Select .select-tag {
      display: inline-flex !important;
      height: 23px !important;
      padding: 2px 8px;
      margin: 0;
      text-align: center;
      font-size: 12px;
      line-height: 13px;
      border-radius: 8px;
      background: #fff;
      color: #0096FF;
      text-overflow: ellipsis;
      overflow: hidden;
      max-width: 100%;
      white-space: nowrap; }
      #SortModel .Select .select-tag .Select-aria-only, #FilterModel .Select .select-tag .Select-aria-only {
        position: relative !important; }

#FilterModel {
  position: absolute;
  background: #f5f5f5;
  margin-top: 30px;
  padding: 10;
  z-index: 1;
  left: 10px; }
  #FilterModel .sort-box .Sort-text {
    width: 60px;
    display: block;
    margin-top: 5px;
    margin-left: 10px; }
  #FilterModel .filter-select {
    height: 30px; }
    #FilterModel .filter-select .Select-control {
      height: inherit; }
  #FilterModel .input-filter {
    height: 30px; }
  #FilterModel .Select .collaborator-tag {
    margin: 3px 2px !important; }
  #FilterModel .Select .Select-multi-value-wrapper {
    padding-top: 1px !important; }

.flex {
  display: flex; }

@media (max-width: 576px) {
  .sort-box {
    flex-direction: column; }
    .sort-box .sort-bx {
      margin-top: 5px;
      margin-right: 0px !important; }
    .sort-box .sort-by-bx {
      width: 200px !important; }
  .input-filter {
    margin-top: 5px; }
  .filter-select {
    margin-top: 5px; }
  .checkbox-filter {
    margin-top: 5px;
    width: -webkit-fill-available !important;
    width: -moz-available; }
  .asc-desc-box {
    margin-top: 5px; }
  .react-datepicker-wrapper {
    margin-top: 5px !important;
    width: 100% !important; } }

.row-list-root {
  position: fixed;
  background: #fff;
  bottom: 0;
  top: 0;
  left: 0;
  box-shadow: 2px 2px 2px #ccc;
  z-index: 2;
  height: 100%; }
  .row-list-root .toolbar {
    display: flex;
    padding-left: 10px; }
    .row-list-root .toolbar .toolbar-items {
      display: flex;
      margin: 12px 5px;
      padding: 5px;
      border-radius: 5px; }
      .row-list-root .toolbar .toolbar-items svg {
        margin: 2px 5px; }
      .row-list-root .toolbar .toolbar-items:hover {
        background: #e7e7e7; }
    .row-list-root .toolbar .btn-close-rowlist {
      float: right;
      margin: 10px;
      margin-left: auto; }
    .row-list-root .toolbar .tooltip-close {
      position: relative;
      display: inline-block; }
    .row-list-root .toolbar .tooltip-close .tooltiptext {
      visibility: hidden;
      width: max-content;
      background-color: #303b47;
      color: white;
      text-align: center;
      text-transform: none;
      border-radius: 4px;
      font-size: 12px !important;
      padding: 4px 8px;
      position: absolute;
      z-index: 6;
      left: -50px;
      padding-left: 7px;
      padding-right: 7px;
      bottom: 5%; }
    .row-list-root .toolbar .tooltip-close:hover .tooltiptext {
      visibility: visible; }
  .row-list-root .input-search {
    margin: 10px;
    width: -webkit-fill-available;
    width: -moz-available; }
  .row-list-root .row-list {
    overflow: auto;
    padding: 10px;
    height: calc(100% - 111px); }
    .row-list-root .row-list > div {
      margin-bottom: 5px; }
    .row-list-root .row-list .row-selected .card {
      border: 2px solid #989898 !important;
      box-shadow: #cccccc 3px 3px 6px; }
    .row-list-root .row-list #RowCard {
      margin: 0px !important; }
    .row-list-root .row-list::-webkit-scrollbar {
      -webkit-appearance: none;
      width: 5px; }
    .row-list-root .row-list .no-serach {
      text-align: center; }
    .row-list-root .row-list .add-new-row-btn {
      position: absolute;
      right: 5px;
      bottom: 5px;
      width: 96%; }