/*======= Responsive styles =============*/

.x-datatable-tab-details {
    color: #878787;
    background-color: #f2f4f8;
    border: 0 solid #AB8422;
    border-radius: 4px;
    padding-left: 16px;
    padding-right: 16px;
    box-shadow: 0 4px 8px -2px rgba(35, 43, 55, .16);
}

    .x-datatable-tab-details:hover {
        color: #323232;
        background-color: #ebebeb;
    }

    .x-datatable-tab-details.w--current {
        color: #fcfcfc;
        background-color: #AB8422;
        padding-left: 16px;
        padding-right: 16px;
    }

.x-datatable-tabs {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    padding: 8px 0;
    display: flex;
}

.x-brand-grid-row {
  grid-gap: 12px;
}

.x-imp-legend-col {
  overflow-x: auto;
}

.imp-fullscreen-tooltips-container {
  z-index: 0 !important;
}

.imp-fullscreen-tooltips-container .imp-fullscreen-tooltip.imp-tooltip-visible {
  opacity: 0 !important;
  background: transparent !important;
  visibility: hidden;
}

@media(max-width:991px) {
  .grid-flex,
  .x-dash-grid-card-flex,
  .x-header, .x-datatable-header,
  .x-datatable-right-opt,
  .x-brand-grid-row,
  .x-tc-data-row,
  .x-form-row,
  .x-stepper-list {
    display: grid !important;
    justify-content: stretch !important;
  }

  .x-statsum-group.hide-show {
    display: grid;
  }

  .imp-ui-element.imp-fullscreen-button {
    width: 12px;
    overflow: hidden;
  }

  .x-imp-overlay {
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
  }

  .x-stepper-block {
    display: block !important;
  }

  .x-quick-search-block > input.for-quick-search {
    width: 100%;
  }

  .x-inspect-gal-upload-header {
    padding-left: 0;
    padding-right: 15px;
    align-items: center;
  }

  .ins-photo-item .x-chk-edit-dot {
    display: none;
  }

  .ins-photo-item .x-chk-edit-container {
    display: grid;
    padding: 0;
    margin: 0;
    border: 0;
  }

  .ins-photo-item input.ins-photo-upload {
    max-width: 200px;
  }

  .x-large-dialog-form .x-form-row > .x-form-col {
    display: flex;
  }

  .x-stepper-item:not(:last-child)::before,
  .x-stepper-item:not(:last-child)::after,
  .x-stepper-item:not(:last-child) > a::after,
  .userback-button, /*.hide-mobile,*/
  .x-datatable-opt-group,
  .x-datatable-opt-block > .x-btn-container,
  .x-ti-tab-header > .x-btn-container > .x-btn.w-button {
    display: none !important;
  }

  .x-tenant-brand-logo {
    width: 100% !important;
    height: auto !important;

  }

  .login-announcements, .x-vr-sep.for-reset {
    display: none;
  }

  table.dataTable thead th,
  table.dataTable thead td,
  table.dataTable tbody th,
  table.dataTable tbody td {
    padding-right: 0px;
  }

    .x-btn {
        display: 50px;
    }

    .x-appnav-menu-list{
        display: block;
    }

    .x-appnav-menu-item {
        border-bottom: 1px solid #d1d1d1;
    }

    .hide-mobile {
        display: none !important;
    }

  .show-mobile {
    display: block;
  }

  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before, 
  table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
    display: none !important;
  }

  .x-btn-container {
    margin-top: auto;
  }

  .x-icon-btn.for-mob-primary {
    border-radius: 50px;
    padding: 16px;
    font-size: 28px;
    line-height: 28px;
  }

  .x-icon-btn.for-mob-secondary {
    box-shadow: none;
    color: #b4b4b4;
    background-color: rgba(0, 0, 0, 0);
    background-image: none;
    flex-direction: row;
    font-size: 28px;
    line-height: 28px;
    display: flex;
  }

    .x-icon-btn.for-mob-secondary:hover {
      color: #AB8422;
    }

  .x-input-tac {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }

  .x-close-search-btn {
    display: none;
    right: 3%;
  }

  .x-mob-nav-group {
    display: flex;
    height: 80px;
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    background-color: #fcfcfc;
    border-top: 1px solid #d1d1d1;
    align-items: center;
    padding: 8px 8%;
    position: fixed;
    z-index: 10;
    top: auto;
    bottom: 0%;
    left: 0%;
    right: 0%;
  }

  .x-mob-search-block {
    min-width: 85%;
    border-radius: 24px;
    position: relative;
    top: 0;
    right: 0;
  }

  .x-mob-action-block {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    justify-content: space-between;
    margin: 12px 2% 0;
  }

  .x-mob-search-reco-block {
    display: none;
    top: 40px;
    left: 2%;
    right: 2%;
  }

  .x-mob-workspace-picker-block {
    margin-bottom: 12px;
  }

  .div-block {
    flex-direction: row;
    display: flex;
  }

  .x-mob-page-title {
    margin-bottom: 0;
    padding-left: 8px;
    padding-right: 8px;
    line-height: 28px;
  }

  .x-mob-title-block {
    height: 80px;
    background-color: #fcfcfc;
    border-bottom: 1px solid #d1d1d1;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 8px;
    padding-left: 2%;
    padding-right: 2%;
    display: flex;
  }

  .doc-mob-item-container {
    border-width: 0;
  }

  .x-mob-secondary-nav {
    width: 100%;
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .x-mob-nav-line {
    color: #878787;
    padding-bottom: 0;
    padding-right: 0;
    font-size: 40px;
    line-height: 40px;
    display: block;
  }

  .x-mob-nav-line-img {
    width: 4px;
    height: 40px;
  }

  .x-mob-icon-block {
    width: 20%;
    justify-content: flex-end;
    display: flex;
  }

}

@media(min-width:992px) {
  .grid-flex,
  .x-dash-grid-card-flex,
  .x-header, .x-datatable-header,
  .x-datatable-right-opt,
  .x-brand-grid-row,
  .x-statsum-group,
  .x-tc-data-row,
  .x-form-row,
  .x-stepper-list {
    display: flex !important;
  }

    .x-btn {
        min-width: 80px;
    }

    .x-appnav-menu-list {
        display: flex;
    }


  .hide-mobile {
    display: block;
  }

  .x-form-wrapper.for-access {
    min-width: 320px;
  }

  .x-imp-ov-shopfront.for-details {
    width: 320px;
  }

  .x-ti-control-col {
    max-width: 50%;
  }

  .x-inspect-gal-upload-header {
    grid-template-columns: minmax(0, 160px) 1fr minmax(0, 160px) minmax(0, 240px);
  }

  .show-mobile, .x-mob-nav-group {
    display: none !important;
  }

  .x-large-dialog-form {
    max-width: 1280px;
    min-width: 900px;
  }

  .login-announcements, .x-vr-sep.for-reset {
    display: block;
  }

  .x-datatable-select-op {
    border-color: #d1d1d1
  }

  table.dataTable thead th, table.dataTable thead td, table.dataTable tbody th, table.dataTable tbody td {
    padding-right: 12px;
  }

  .x-tenant-info-block {
    grid-template-columns: 1fr 320px;
  }
}
/*===========================*/


.w-form-formradioinput--inputType-custom {
    width: 12px;
    height: 12px;
    border: 1px solid #ccc;
    border-radius: 50%;
}

    .w-form-formradioinput--inputType-custom.w--redirected-focus {
        box-shadow: 0 0 3px 1px #3898ec;
    }

    .w-form-formradioinput--inputType-custom.w--redirected-checked {
        border-width: 4px;
        border-color: #3898ec;
    }

.w-checkbox {
    margin-bottom: 5px;
    padding-left: 20px;
    display: block;
}

    .w-checkbox:before {
        content: " ";
        grid-area: 1 / 1 / 2 / 2;
        display: table;
    }

    .w-checkbox:after {
        content: " ";
        clear: both;
        grid-area: 1 / 1 / 2 / 2;
        display: table;
    }

.w-checkbox-input {
    float: left;
    margin: 4px 0 0 -20px;
    line-height: normal;
}

.w-checkbox-input--inputType-custom {
    width: 12px;
    height: 12px;
    border: 1px solid #ccc;
    border-radius: 2px;
}

    .w-checkbox-input--inputType-custom.w--redirected-checked {
        background-color: #3898ec;
        background-image: url('https://d3e54v103j8qbb.cloudfront.net/static/custom-checkbox-checkmark.589d534424.svg');
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
        border-color: #3898ec;
    }

    .w-checkbox-input--inputType-custom.w--redirected-focus {
        box-shadow: 0 0 3px 1px #3898ec;
    }

body {
    color: #323232;
    background-color: #f2f4f8;
    font-family: Circularstd, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

h1 {
    margin-top: 16px;
    margin-bottom: 16px;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
}

h2 {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 20px;
    font-weight: 700;
    line-height: 32px;
}

h3 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}

h4 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

h5 {
    color: #878787;
    margin-top: 12px;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    text-decoration: underline;
}

p {
    margin-bottom: 16px;
}

a {
    color: #AB8422;
    text-decoration: none;
}

    a:hover {
        color: #18b4ea;
    }

label {
    color: #878787;
    margin-bottom: 4px;
    font-size: 10px;
    font-weight: 700;
    display: block;
}

.x-full-wrapper {
    height: 100vh;
    justify-content: center;
    align-items: center;
    display: flex;
    overflow: hidden;
}

    .x-full-wrapper.for-side {
        justify-content: flex-start;
        position: relative;
    }

        .x-full-wrapper.for-side.is-full {
            align-items: stretch;
        }

.x-center-container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
}

.x-splash-label {
    margin-top: 12px;
    font-weight: 600;
}

.x-error-wrapper {
    max-width: 480px;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
    display: flex;
}

    .x-error-wrapper.for-system-error {
        text-align: left;
        align-items: flex-start;
    }

.x-message-thumb {
    height: 128px;
}

    .x-message-thumb.for-dialog {
        height: 64px;
        background-color: #f2f4f9;
        border-radius: 12px;
        margin-bottom: 24px;
        padding: 12px;
    }

    .x-message-thumb.for-message {
        margin-bottom: 16px;
    }

.x-btn-container {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    flex: none;
    align-items: center;
    display: flex;
    position: relative;
}

    .x-btn-container.for-center {
        justify-content: center;
    }

    .x-btn-container.for-nav-sidebar {
        position: absolute;
        top: 8px;
        bottom: auto;
        left: auto;
        right: 8px;
    }

.x-btn {
    /*min-width: 80px;*/
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    background-color: #AB8422;
    background-image: linear-gradient(to right, #AB8422, #D4AF37);
    border-radius: 24px;
    justify-content: center;
    align-items: center;
    padding: 8px 12px;
    font-size: 10px;
    font-weight: 600;
    transition: all .2s cubic-bezier(.645, .045, .355, 1);
    display: flex;
    box-shadow: 0 4px 8px -2px #AB8422, inset 0 0 0 1px #AB8422;
}

    .x-btn:hover {
        color: #fff;
        background-color: #323232;
        box-shadow: 0 1px 4px -2px rgba(35, 43, 55, .16), inset 0 0 0 1px #323232;
    }

    .x-btn.for-secondary {
        color: #323232;
        background-color: #ebebeb;
        background-image: none;
        box-shadow: 0 4px 8px -2px rgba(35, 43, 55, .16), inset 0 0 0 1px #d1d1d1;
    }

        .x-btn.for-secondary:hover {
            background-color: #e6e8ee;
            box-shadow: 0 1px 4px -2px rgba(35, 43, 55, .16), inset 0 0 0 1px #d1d1d1;
        }

    .x-btn.for-simple {
        color: #555;
        background-color: rgba(0, 0, 0, 0);
        background-image: none;
        box-shadow: 0 4px 8px -2px rgba(35, 43, 55, .16), inset 0 0 0 1px #e6e8ee;
    }

        .x-btn.for-simple:hover {
            color: #323232;
            background-color: #ebebeb;
            box-shadow: 0 1px 4px -2px rgba(35, 43, 55, .16), inset 0 0 0 1px #e6e8ee;
        }

    .x-btn.for-red {
        color: #fc360c;
        background-color: rgba(0, 0, 0, 0);
        background-image: none;
        box-shadow: inset 0 0 0 1px #fc360c;
    }

        .x-btn.for-red:hover {
            color: #fff;
            background-color: #fc360c;
        }

    .x-btn.for-purple {
        color: #483248;
        background-color: rgba(0, 0, 0, 0);
        background-image: none;
        box-shadow: inset 0 0 0 1px #483248;
    }

        .x-btn.for-purple:hover {
            color: #fff;
            background-color: #483248;
        }

    .x-btn.for-green {
        color: #06b448;
        background-color: rgba(0, 0, 0, 0);
        background-image: none;
        box-shadow: inset 0 0 0 1px #06b448;
    }

        .x-btn.for-green:hover {
            color: #fff;
            background-color: #06b448;
        }

.x-hr-sep {
    width: 100%;
    height: 0;
    border-bottom: 1px solid #d1d1d1;
    margin-top: 16px;
    margin-bottom: 16px;
}

    .x-hr-sep.for-input {
        margin-top: -1px;
        margin-bottom: 0;
    }

    .x-hr-sep.for-large {
        margin-top: 32px;
        margin-bottom: 32px;
    }

    .x-hr-sep.for-menu {
        margin-top: 4px;
        margin-bottom: 4px;
    }

    .x-hr-sep.for-reset {
        margin-top: 0;
        margin-bottom: 0;
    }

    .x-hr-sep.for-mid {
        width: auto;
        flex: 1;
        margin: 0 6px;
    }

.x-icon-btn {
    background-image: linear-gradient(to right, #AB8422, #23b4c3);
    border-radius: 24px;
    padding: 8px;
    font-family: Remix, sans-serif;
    font-size: 16px;
    font-weight: 400;
    transition: all .2s cubic-bezier(.645, .045, .355, 1);
    box-shadow: 0 4px 8px -2px rgba(35, 43, 55, .16), inset 0 0 0 1px #AB8422;
}

    .x-icon-btn:hover {
        color: #fff;
        background-color: #878787;
        box-shadow: 0 1px 4px -2px rgba(35, 43, 55, .16), inset 0 0 0 1px #323232;
    }

    .x-icon-btn.for-secondary {
        color: #323232;
        background-color: #ebebeb;
        background-image: none;
        box-shadow: 0 4px 8px -2px rgba(35, 43, 55, .16), inset 0 0 0 1px #e6e8ee;
    }

        .x-icon-btn.for-secondary:hover {
            color: #323232;
            background-color: #fff;
            box-shadow: 0 1px 4px -2px rgba(35, 43, 55, .16), inset 0 0 0 1px #d1d1d1;
        }

        .x-icon-btn.for-secondary.is-red {
            color: #fc360c;
        }

            .x-icon-btn.for-secondary.is-red:hover {
                color: #fff;
                background-color: #fc360c;
                box-shadow: inset 0 0 0 1px #fc360c;
            }

    .x-icon-btn.for-simple {
        color: #555;
        background-color: rgba(0, 0, 0, 0);
        background-image: none;
        box-shadow: 0 4px 8px -2px rgba(35, 43, 55, .16), inset 0 0 0 1px #e6e8ee;
    }

        .x-icon-btn.for-simple:hover {
            color: #323232;
            background-color: #ebebeb;
            box-shadow: 0 1px 4px -2px rgba(35, 43, 55, .16), inset 0 0 0 1px #e6e8ee;
        }

    .x-icon-btn.for-green {
        color: #06b448;
        background-color: rgba(0, 0, 0, 0);
        box-shadow: inset 0 0 0 1px #06b448;
    }

        .x-icon-btn.for-green:hover {
            color: #fff;
            background-color: #06b448;
        }

    .x-icon-btn.for-red {
        color: #fc360c;
        background-color: rgba(0, 0, 0, 0);
        box-shadow: inset 0 0 0 1px #fc360c;
    }

        .x-icon-btn.for-red:hover {
            color: #fff;
            background-color: #fc360c;
        }

.doc-wrapper {
    padding: 40px;
}

.doc-container {
    border: 1px solid #d1d1d1;
    border-radius: 6px;
    padding: 24px;
}

    .doc-container.for-pages {
        background-color: #f2f4f9;
        align-items: center;
        padding: 8px 12px;
        font-weight: 600;
        display: flex;
    }

        .doc-container.for-pages:hover {
            background-color: #f2f4f8;
        }

.doc-grid {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    display: grid;
}

.x-error-span {
    background-color: #ffb300;
    border-radius: 6px;
    margin-right: 8px;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 60%;
    display: inline-block;
}

.x-error-title, .x-flex {
    align-items: center;
    display: flex;
}

    .x-flex.for-end {
        align-items: flex-end;
    }

    .x-flex.for-between {
        justify-content: space-between;
    }

.x-vr-sep {
    width: 0;
    min-height: 16px;
    background-color: #d1d1d1;
    border-right: 1px solid #d1d1d1;
    flex: none;
    margin-left: 12px;
    margin-right: 12px;
}

    .x-vr-sep.for-reset {
        min-height: 32px;
        margin-left: 0;
        margin-right: 0;
    }

    .x-vr-sep.for-tds {
        border-right-width: 2px;
        margin-left: auto;
        margin-right: auto;
    }

    .x-vr-sep.for-unit {
        min-height: 0;
        margin-left: 0;
        margin-right: 0;
    }

.x-sml-btn {
    min-width: 56px;
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    letter-spacing: 1px;
    text-transform: uppercase;
    background-color: #323232;
    background-image: linear-gradient(to right, #AB8422, #D4AF37);
    border-radius: 16px;
    justify-content: center;
    align-items: center;
    padding: 7px 8px;
    font-size: 8px;
    font-weight: 600;
    line-height: 10px;
    transition: all .2s cubic-bezier(.645, .045, .355, 1);
    display: flex;
    box-shadow: 0 4px 8px -2px rgba(35, 43, 55, .16), inset 0 0 0 1px #AB8422;
}

    .x-sml-btn:hover {
        color: #fff;
        background-color: #555;
        box-shadow: 0 1px 4px -2px rgba(35, 43, 55, .16), inset 0 0 0 1px #323232;
    }

    .x-sml-btn.for-secondary {
        color: #323232;
        background-color: #ebebeb;
        background-image: none;
        box-shadow: 0 4px 8px -2px rgba(35, 43, 55, .16), inset 0 0 0 1px #e6e8ee;
    }

        .x-sml-btn.for-secondary:hover {
            background-color: #e6e8ee;
            box-shadow: 0 1px 4px -2px rgba(35, 43, 55, .16), inset 0 0 0 1px #d1d1d1;
        }

        .x-sml-btn.for-secondary.is-red {
            color: #fff;
            background-color: #fc360c;
            box-shadow: inset 0 0 0 1px #fc360c;
        }

        .x-sml-btn.for-secondary.is-green {
            color: #fff;
            background-color: #06b448;
        }

    .x-sml-btn.for-simple {
        color: #878787;
        background-color: rgba(0, 0, 0, 0);
        background-image: none;
        box-shadow: 0 4px 8px -2px rgba(35, 43, 55, .16), inset 0 0 0 1px #e6e8ee;
    }

        .x-sml-btn.for-simple:hover {
            color: #323232;
            background-color: #ebebeb;
            box-shadow: 0 1px 4px -2px rgba(35, 43, 55, .16), inset 0 0 0 1px #e6e8ee;
        }

    .x-sml-btn.for-active {
        color: #fff;
        background-color: #AB8422;
        box-shadow: inset 0 0 0 1px #AB8422;
    }

    .x-sml-btn.for-remove {
        color: #fc360c;
        background-color: #fff;
        background-image: none;
        box-shadow: inset 0 0 0 1px #fc360c;
    }

        .x-sml-btn.for-remove:hover {
            color: #fff;
            background-color: #fc360c;
        }

.x-icon {
    font-family: Remix, sans-serif;
    font-weight: 400;
}

    .x-icon.for-btn-inline {
        font-size: 150%;
    }

    .x-icon.for-dd-menu {
        margin-right: 12px;
        font-size: 16px;
    }

    .x-icon.for-info-block {
        margin-right: 8px;
        font-size: 150%;
    }

        .x-icon.for-info-block.is-blue {
            color: #0af;
        }

        .x-icon.for-info-block.is-amber {
            color: #fa0;
        }

    .x-icon.for-inline-left {
        margin-right: 8px;
    }

        .x-icon.for-inline-left.is-large {
            font-size: 16px;
        }

        .x-icon.for-inline-left.is-nav {
            background-color: #f2f4f9;
            border-radius: 4px;
            padding: 8px;
            font-size: 16px;
        }

        .x-icon.for-inline-left.is-red {
            color: #fc360c;
        }

        .x-icon.for-inline-left.is-green {
            color: #06b448;
        }

        .x-icon.for-inline-left.is-amber {
            color: #ffb300;
        }

    .x-icon.for-cert-list {
        color: #fff;
        background-color: #323232;
        border-radius: 24px;
        flex: none;
        margin-right: 12px;
        padding: 8px;
        font-size: 16px;
    }

        .x-icon.for-cert-list.is-green {
            background-color: #06b448;
        }

        .x-icon.for-cert-list.is-red {
            background-color: #fc360c;
        }

    .x-icon.for-input-info {
        color: #555;
        cursor: help;
        font-size: 16px;
        position: absolute;
        top: 28px;
        left: 8px;
    }

        .x-icon.for-input-info.for-reset {
            top: 8px;
        }

        .x-icon.for-input-info.is-dt {
            top: 4px;
            left: 4px;
        }

    .x-icon.for-quick-search {
        color: #878787;
        font-size: 16px;
        position: absolute;
        top: 8px;
        left: 8px;
    }

    .x-icon.for-sec-block {
        color: #fff;
        background-color: #06b448;
        border-radius: 24px;
        padding: 8px;
        font-size: 16px;
    }

    .x-icon.for-page-header {
        color: #AB8422;
        background-color: #FEFAEF;
        border-radius: 4px;
        margin-right: 16px;
        padding: 8px;
        font-size: 16px;
    }

        .x-icon.for-page-header.is-create {
            color: #06b448;
            background-color: #d2fcef;
        }

        .x-icon.for-page-header.is-edit {
            color: #23b4c3;
            background-color: #e3f2fd;
        }

    .x-icon.for-shortcode {
        color: #06b448;
        font-size: 16px;
        position: absolute;
        top: 28px;
        left: 80px;
    }

        .x-icon.for-shortcode.is-red {
            color: #fc360c;
        }

    .x-icon.for-sidebar-search {
        color: #b4b4b4;
        background-color: rgba(0, 0, 0, 0);
        padding: 0;
        font-size: 16px;
        display: block;
        position: absolute;
        top: 12px;
        left: 16px;
    }

    .x-icon.for-appnav {
        color: #AB8422;
        margin-right: 8px;
        font-size: 16px;
    }

    .x-icon.for-large {
        font-size: 24px;
        line-height: 24px;
    }

    .x-icon.for-row-remove {
        color: #fc360c;
        background-color: #f2f4f8;
        border: 1px solid #d1d1d1;
        border-left-style: none;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        padding: 6px;
        font-size: 16px;
        display: block;
    }

        .x-icon.for-row-remove:hover {
            background-color: #fff;
        }

    .x-icon.for-inline-right {
        margin-left: 8px;
    }

    .x-icon.for-draggable {
        color: #878787;
        background-color: #fff;
        border: 1px solid #d1d1d1;
        border-radius: 4px;
        padding: 8px;
        font-size: 16px;
    }

    .x-icon.for-accordion {
        font-size: 16px;
        transition: all .25s cubic-bezier(.77, 0, .175, 1);
        transform: rotate(0);
    }

        .x-icon.for-accordion.is-idle {
            transform: rotate(180deg);
        }

    .x-icon.for-cert-list {
        color: #fff;
        background-color: #323232;
        border-radius: 24px;
        flex: none;
        margin-right: 12px;
        padding: 8px;
        font-size: 16px;
    }

        .x-icon.for-cert-list.is-green {
            background-color: #08c18a;
        }

.x-error-emoji {
    color: #ebebeb;
    font-family: Remix, sans-serif;
    font-size: 240px;
    line-height: 240px;
    position: absolute;
    bottom: 64px;
    right: 64px;
}

.x-access-col {
    flex: 1;
    justify-content: center;
    align-items: center;
    padding: 64px;
    display: flex;
    position: relative;
}

    .x-access-col.for-scroll {
        align-items: flex-start;
        padding-top: 80px;
        overflow: auto;
    }

.x-brand-col {
    background-color: #555;
    flex: 1;
}

.x-form-block {
    height: 100%;
    margin-bottom: 16px;
    position: relative;
}

    .x-form-block.for-access {
        height: auto;
        max-width: 360px;
    }

    .x-form-block.for-complete {
        height: auto;
        max-width: 560px;
    }

    .x-form-block.for-master-tracker {
        margin-bottom: 0;
    }

.x-form-row {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    margin-bottom: 16px;
    display: flex;
}

    .x-form-row.for-limit {
        max-width: 364px;
    }

    .x-form-row.for-inline {
        margin-bottom: 0;
    }

.x-form-col {
    flex: 1;
    position: relative;
}

    .x-form-col.for-small {
        width: 64px;
        flex: none;
    }

    .x-form-col.for-med {
        width: 160px;
        flex: none;
    }

    .x-form-col.for-flow {
        flex: none;
    }

.x-input-text {
    height: 32px;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    margin-bottom: 0;
    font-size: 12px;
}

    .x-input-text:hover {
        border-color: #323232;
    }

    .x-input-text:focus {
        border-color: #AB8422;
    }

    .x-input-text.for-tac {
        height: 48px;
        text-align: center;
        margin-bottom: 0;
        padding-left: 8px;
        padding-right: 8px;
        font-size: 24px;
        line-height: 24px;
    }

    .x-input-text.for-search {
        height: 38px;
        border-radius: 24px;
        margin-bottom: 0;
        padding-left: 40px;
        padding-right: 16px;
        box-shadow: 0 4px 8px -3px rgba(35, 43, 55, .16);
    }

    .x-input-text.for-nested {
        margin-bottom: 0;
    }

    .x-input-text.for-limit.is-4-char {
        max-width: 104px;
        text-align: center;
        text-transform: uppercase;
        padding-left: 32px;
        padding-right: 32px;
    }

    .x-input-text.for-limit.is-short-title {
        max-width: 160px;
    }

    .x-input-text.for-quick-search {
        width: 248px;
        padding-left: 32px;
    }

        .x-input-text.for-quick-search.is-dir {
            width: 100%;
        }

    .x-input-text.for-be {
        height: 24px;
        background-color: #f2f4f9;
        border-style: none;
        padding: 6px;
        font-size: 10px;
        font-weight: 600;
    }

    .x-input-text.for-datepicker {
        padding-left: 32px;
    }

        .x-input-text.for-datepicker.is-dt-date {
            height: 24px;
            padding-left: 24px;
            padding-right: 4px;
        }

    .x-input-text.for-timepicker {
        padding-left: 32px;
    }

    .x-input-text.for-right {
        text-align: right;
    }

    .x-input-text.for-prefix {
        z-index: 2;
        position: relative;
    }

    .x-input-text.for-postfix {
        z-index: 10;
        text-align: right;
        position: relative;
    }

    .x-input-text.for-duration {
        z-index: 10;
        text-align: right;
        position: relative;
        height: 36px;
    }

    .x-input-text.for-category {
        max-width: 160px;
    }

    .x-input-text.for-unit {
        padding-left: 48px;
    }

.x-form-opt {
    flex: 1;
    justify-content: space-between;
    align-items: center;
    display: flex;
}

.x-input-chkbox {
    align-items: flex-start;
    margin-bottom: 0;
    padding-left: 24px;
    display: flex;
    position: relative;
}

.x-input-chkbox-btn {
    width: 20px;
    height: 20px;
    box-shadow: none;
    cursor: pointer;
    background-color: #ebebeb;
    border-color: #d1d1d1;
    border-radius: 4px;
    flex: none;
    margin-top: 0;
    margin-left: 0;
    margin-right: 8px;
}

    .x-input-chkbox-btn:hover {
        background-color: #fff;
        border-color: #323232;
    }

    .x-input-chkbox-btn.w--redirected-checked {
        background-color: #AB8422;
        background-image: url('../images/check-line.svg');
        border-color: #AB8422;
        border-radius: 4px;
        margin-top: 0;
    }

    .x-input-chkbox-btn.w--redirected-focus {
        box-shadow: none;
    }

    .x-input-chkbox-btn.for-toggle {
        width: 24px;
        height: 24px;
        border-radius: 24px;
        margin-right: 0;
    }

.x-input-chkbox-label {
    color: #555;
    margin-bottom: 0;
    margin-left: 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
}

    .x-input-chkbox-label.for-hide {
        display: none;
    }

    .x-input-chkbox-label.for-simple {
        font-weight: 400;
    }

.x-form-action {
    margin-top: 24px;
}

    .x-form-action.for-dialog {
        margin-top: 0;
    }

.x-sso-opt-block {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    margin-top: 24px;
    display: flex;
}

.x-sso-opt-btn {
    color: #323232;
    background-color: #ebebeb;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    flex: 1;
    justify-content: center;
    align-items: center;
    padding: 12px;
    display: flex;
}

    .x-sso-opt-btn:hover {
        background-color: #fff;
        border-color: #b4b4b4;
    }

.x-sso-opt-icon {
    height: 24px;
}

.x-access-sep-block {
    justify-content: center;
    align-items: center;
    margin-top: 12px;
    margin-bottom: 12px;
    display: flex;
}

.x-access-sep-label {
    z-index: 10;
    background-color: #f2f4f8;
    padding-left: 8px;
    padding-right: 8px;
    position: absolute;
}

.x-input-tac {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    flex: 1;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
}

.x-input-helper {
    color: #878787;
    align-items: center;
    margin-top: 4px;
    padding-left: 12px;
    font-size: 10px;
    line-height: 14px;
    display: flex;
    position: relative;
}

    .x-input-helper.for-error {
        color: #fc360c;
    }

.x-emp-span {
    color: #fc360c;
    text-decoration: underline;
}

    .x-emp-span.for-black {
        color: #323232;
        font-weight: 700;
        text-decoration: none;
    }

.x-avatar-picker-block {
    border-radius: 4px;
    align-items: flex-end;
    display: flex;
}

.x-avatar-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border: 1px solid #d1d1d1;
    border-radius: 24px;
    margin-right: 8px;
}

    .x-avatar-thumb.for-nav {
        width: 32px;
        height: 32px;
        border-radius: 24px;
    }

    .x-avatar-thumb.for-profile {
        width: 64px;
        height: 64px;
        border-radius: 40px;
        margin-right: 16px;
    }

        .x-avatar-thumb.for-profile.is-logo {
            border-radius: 8px;
        }

    .x-avatar-thumb.for-user-preview {
        border-color: #b4b4b4;
    }

    .x-avatar-thumb.for-list {
        width: 32px;
        height: 32px;
        flex: none;
        margin-right: 0;
    }

    .x-avatar-thumb.for-member {
        width: 24px;
        height: 24px;
        display: block;
    }

    .x-avatar-thumb.for-logo {
        width: 32px;
        height: 32px;
        background-color: #fff;
        border-radius: 8px;
    }

    .x-avatar-thumb.for-people-list {
        width: 20px;
        height: 20px;
        margin-right: 0;
    }

.x-avatar-picker-container {
    flex: 1;
}

.x-small-text {
    color: #878787;
    margin-top: 8px;
    font-size: 10px;
}

    .x-small-text.for-no-margin {
        color: #555;
        margin-top: 0;
    }

    .x-small-text.for-timestamp {
        margin-top: 4px;
    }

    .x-small-text.for-message {
        white-space: nowrap;
        overflow: hidden;
    }

    .x-small-text.for-val-label {
        color : #fff;
        margin-top: 4px;
        font-weight: 600;
    }

    .x-small-text.for-tds-card {
        margin-top: -2px;
        margin-bottom: 8px;
        font-weight: 600;
    }

.x-workspace-picker-block {
    margin-bottom: 24px;
}

.x-workspace-picker-list {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    margin-bottom: 0;
    display: grid;
}

.x-workspace-picker-item {
    color: #b4b4b4;
    cursor: pointer;
    background-color: #f2f4f9;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px 8px 8px;
    display: flex;
}

    .x-workspace-picker-item:hover {
        color: #323232;
        border-color: #323232;
    }

    .x-workspace-picker-item.for-active {
        color: #AB8422;
        background-color: #def6fc;
        border-color: #AB8422;
    }

.x-workspace-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    flex: none;
    margin-right: 12px;
    display: block;
}

.x-emp-text {
    color: #555;
    font-weight: 700;
}

    .x-emp-text.for-title {
        flex: none;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .x-emp-text.for-subtitle {
        color: #878787;
        letter-spacing: 1px;
        text-transform: uppercase;
        flex: 1;
        margin-bottom: 2px;
        font-size: 9px;
    }

    .x-emp-text.for-lval {
        color: #fff;
        font-size: 32px;
        line-height: 40px;
    }

    .x-emp-text.for-mval {
        font-size: 16px;
        line-height: 24px;
    }

    .x-emp-text.for-tds {
        margin-bottom: 0;
    }

    .x-emp-text.for-green {
        color: #06b448;
    }

    .x-emp-text.for-red {
        color: #fc360c;
    }

.x-picker-toggle {
    display: none;
}

.x-picker-btn.w--redirected-checked {
    width: 24px;
    height: 24px;
}

.x-workspace-picker-btn {
    background-color: #ebebeb;
    border-radius: 4px;
    padding: 4px 12px;
}

    .x-workspace-picker-btn.for-active {
        color: #fff;
        background-color: #AB8422;
    }

.x-form-message {
    text-align: center;
    background-color: #ebebeb;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    padding: 24px;
}

.x-message-text {
    margin-top: 16px;
    margin-bottom: 16px;
}

.x-input-opt-btn {
    color: #878787;
    text-transform: uppercase;
    background-color: #ebebeb;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    position: absolute;
    top: 26px;
    right: 8px;
}

    .x-input-opt-btn.for-active {
        color: #ebebeb;
        background-color: #AB8422;
        font-size: 10px;
    }

.x-appnav {
    z-index: 8000;
    height: 60px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    box-shadow: 0 3px 8px -3px rgba(35, 43, 55, .16);
}

    .x-appnav.for-fixed {
        position: fixed;
        top: 0%;
        bottom: auto;
        left: 0%;
        right: 0%;
    }

.x-appnav-wrapper {
    z-index: 1000;
    height: 60px;
    background-color: #fff;
    border-bottom: 1px solid #d1d1d1;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    display: flex;
    position: relative;
}

.x-nav-group, .x-nav-user-block {
    align-items: center;
    display: flex;
}

.x-brand-logo {
    height: 40px;
    display: block;
}

    .x-brand-logo.for-navbar {
        height: 32px;
    }

    .x-brand-logo.for-datatable {
        height: 32px;
        border: 1px solid #d1d1d1;
        border-radius: 4px;
    }

.x-nav-user-item {
    margin-left: 12px;
    position: relative;
}

.x-nav-user-link {
    color: #555;
    background-color: #f2f4f9;
    border-radius: 24px;
    padding: 8px;
    font-family: Remix, sans-serif;
    font-size: 16px;
    display: block;
}

    .x-nav-user-link:hover {
        color: #323232;
        background-color: #e6e8ee;
    }

    .x-nav-user-link.for-active {
        color: #fff;
        background-color: #323232;
    }

.x-nav-user-profile {
    color: #878787;
    align-items: center;
    margin-left: 12px;
    padding-right: 8px;
    display: flex;
}

    .x-nav-user-profile:hover {
        color: #323232;
    }

.x-nav-user-profile-name {
    white-space: nowrap;
    font-weight: 600;
    overflow: hidden;
}

.x-appnav-dd-menu-list {
    margin-bottom: 0;
}

.x-appnav-dd-menu-link {
    color: #878787;
    white-space: nowrap;
    border-radius: 4px;
    align-items: center;
    padding: 8px 12px 8px 8px;
    font-weight: 600;
    display: flex;
}

    .x-appnav-dd-menu-link:hover {
        color: #323232;
        background-color: #f2f4f9;
    }

    .x-appnav-dd-menu-link.w--current, .x-appnav-dd-menu-link.for-active {
        color: #AB8422;
    }

    .x-appnav-dd-menu-link.for-remove {
        color: #fc360c;
    }

    .x-appnav-dd-menu-link.for-green {
        color: #06b448;
    }

.utility-page-wrap {
    width: 100vw;
    height: 100vh;
    max-height: 100%;
    max-width: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
}

.utility-page-content {
    width: 260px;
    text-align: center;
    flex-direction: column;
    display: flex;
}

.utility-page-form {
    flex-direction: column;
    align-items: stretch;
    display: flex;
}

.x-search-block {
    z-index: 100;
    min-width: 320px;
    background-color: #fff;
    display: none;
    position: absolute;
    top: -3px;
    right: -3px;
}

.x-search-btn {
    color: #323232;
    background-color: rgba(0, 0, 0, 0);
    padding: 8px;
    font-family: Remix, sans-serif;
    font-size: 16px;
    display: block;
    position: absolute;
    top: 3px;
    left: 3px;
}

.x-close-search-btn {
    color: #fc360c;
    cursor: pointer;
    border-radius: 24px;
    padding: 8px;
    font-family: Remix, sans-serif;
    font-size: 16px;
    display: block;
    position: absolute;
    top: 3px;
    right: 3px;
}

    .x-close-search-btn:hover {
        color: #323232;
        background-color: #ebebeb;
    }

.x-alert-bubble {
    z-index: 10;
    width: 8px;
    height: 8px;
    background-color: #fc360c;
    border-radius: 8px;
    position: absolute;
    top: 0%;
    bottom: auto;
    left: auto;
    right: 0%;
}

.x-nav-sidebar {
    z-index: 800;
    width: 320px;
    background-color: #fff;
    border-left: 1px solid #d1d1d1;
    flex-direction: column;
    padding-top: 56px;
    transition: all .35s cubic-bezier(.645, .045, .355, 1);
    display: flex;
    position: fixed;
    top: 0%;
    bottom: 0%;
    left: auto;
    right: 0%;
    overflow: hidden;
}

    .x-nav-sidebar.for-hide {
        transform: translate(100%);
    }

.x-nav-sidebar-header {
    border-bottom: 1px solid #d1d1d1;
    flex: none;
    justify-content: space-between;
    align-items: center;
    padding: 8px 8px 8px 16px;
    display: flex;
}

.x-nav-sidebar-scroller {
    height: 100%;
    flex: 1;
    overflow: auto;
}

.x-area-title {
    font-size: 13px;
    font-weight: 600;
}

.x-nav-sidebar-list {
    margin-bottom: 0;
}

.x-nav-sidebar-item {
    position: relative;
}

.x-nav-sidebar-link {
    color: #555;
    padding: 12px 40px 12px 16px;
    display: flex;
}

    .x-nav-sidebar-link:hover {
        color: #323232;
        background-color: #ebebeb;
    }

    .x-nav-sidebar-link.for-read {
        color: #b4b4b4;
    }

.x-noti-thumb {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    display: block;
}

    .x-noti-thumb.for-read {
        filter: grayscale();
    }

.x-noti-container {
    flex: 1;
    margin-left: 12px;
    overflow: hidden;
}

.x-nav-sidebar-title {
    font-weight: 600;
}

.x-nav-sidebar-group {
    border-bottom: 1px solid #d1d1d1;
}

.x-nav-sidebar-group-title {
    padding: 6px 16px;
    font-size: 10px;
    font-weight: 600;
}

.x-nav-sidebar-empty {
    padding: 16px;
}

.x-empty-placeholder {
    min-height: 240px;
    color: #b4b4b4;
    text-align: center;
    border: 1px dashed #d1d1d1;
    border-radius: 4px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 32px;
    display: flex;
}

    .x-empty-placeholder.for-list {
        border-style: none;
        border-radius: 0;
        padding: 56px;
    }

    .x-empty-placeholder.for-inline {
        min-height: 80px;
        background-color: #fcfcfc;
        background-image: url('../images/stripe-light-grey_1stripe-light-grey.png');
        background-position: 0 0;
        background-size: auto;
        margin-bottom: 12px;
    }

    .x-empty-placeholder.for-gallery {
        min-height: 0;
        padding: 16px;
    }

    .x-empty-placeholder.for-search {
        min-height: 24px;
        background-image: url('../images/stripe-light-grey_1stripe-light-grey.png');
        background-position: 0 0;
        background-size: auto;
        border-style: none;
        border-radius: 0;
        padding: 12px;
        font-weight: 500;
    }

.x-empty-thumb {
    height: 128px;
    margin-bottom: 12px;
    display: block;
}

.x-brand-block {
    position: fixed;
    top: 24px;
    bottom: auto;
    left: 24px;
    right: auto;
}

.doc-item-container {
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    margin-bottom: 16px;
    padding: 12px;
}

    .doc-item-container.for-small-dialog {
        grid-column-gap: 16px;
        grid-row-gap: 16px;
        border-style: none;
        grid-template-rows: auto;
        grid-template-columns: 1fr 1fr;
        grid-auto-columns: 1fr;
        justify-content: center;
        align-items: stretch;
        justify-items: stretch;
        padding: 0;
        display: grid;
    }

    .doc-item-container.for-large-dialog {
        grid-column-gap: 16px;
        grid-row-gap: 16px;
        border-style: none;
        grid-template-rows: auto auto;
        grid-template-columns: 1fr;
        grid-auto-columns: 1fr;
        padding: 0;
        display: grid;
    }

.x-master {
    z-index: 1;
    min-height: 90vh;
    padding: 24px 32px 80px;
    position: relative;
}

    .x-master.for-doc-viewer {
        height: 100vh;
        padding: 60px 0 0;
        position: fixed;
        top: 0%;
        bottom: 0%;
        left: 0%;
        right: 0%;
    }

    .x-master.for-master-tracker {
        height: 100vh;
        min-height: 0;
        padding: 60px 0 0;
        overflow: hidden;
    }

.x-wrapper {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}

    .x-wrapper.for-880 {
        max-width: 880px;
    }

    .x-wrapper.for-project {
        align-items: flex-start;
        display: flex;
    }

.x-header {
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 24px;
    display: flex;
}

.x-header-intro {
    max-width: 640px;
    margin-right: 80px;
}

.x-profile-widget-block {
    align-items: center;
    display: flex;
}

.x-profile-widget-data {
    margin-left: 8px;
}

.x-profile-widget-name {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

.x-main {
    flex: 1;
}

    .x-main.for-proj {
        padding: 24px;
        transition: all .25s cubic-bezier(.77, 0, .175, 1);
    }

.x-profile-wrapper {
    align-items: flex-start;
    display: flex;
    position: relative;
}

.x-anchor-opt {
    width: 220px;
    background-color: #f2f4f9;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    flex: none;
    margin-left: 24px;
    position: -webkit-sticky;
    position: sticky;
    top: 80px;
    overflow: hidden;
}

.x-profile-container {
    flex: 1;
}

.x-anchor-header {
    padding: 12px;
}

.x-anchor-list {
    margin-bottom: 0;
}

.x-anchor-item {
    border-top: 1px solid #d1d1d1;
}

.x-anchor-link {
    color: #878787;
    padding: 8px 12px;
    font-weight: 400;
    display: block;
}

    .x-anchor-link:hover {
        color: #323232;
        background-color: rgba(255, 255, 255, .48);
    }

    .x-anchor-link.w--current {
        color: #AB8422;
    }

.x-input-textarea {
    height: auto;
    min-height: 88px;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    margin-bottom: 4px;
    font-size: 12px;
}

    .x-input-textarea:hover {
        border-color: #323232;
    }

    .x-input-textarea:focus {
        border-color: #AB8422;
    }

    .x-input-textarea.for-editor {
        min-height: 240px;
    }

    .x-input-textarea.for-message {
        min-height: 128px;
    }

    .x-input-textarea.for-small {
        min-height: 64px;
    }

.x-profile-section {
    border-bottom: 1px solid #d1d1d1;
    margin-bottom: 24px;
    padding-bottom: 24px;
    position: relative;
}

.x-input-toggle-block {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    flex-wrap: wrap;
    display: flex;
}

    .x-input-toggle-block.for-multi {
        margin-bottom: 0;
    }

.x-input-toggle {
    min-width: 64px;
    cursor: pointer;
    flex: none;
    margin-bottom: 0;
    padding-left: 0;
    position: relative;
}

    .x-input-toggle.for-icon {
        min-width: 24px;
        font-family: Remix, sans-serif;
    }

.x-input-toggle-btn {
    width: 100%;
    height: 100%;
    box-shadow: none;
    border-color: #d1d1d1;
    border-radius: 4px;
    margin-top: 0;
    margin-left: 0;
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
}

    .x-input-toggle-btn:hover {
        border-color: #AB8422;
        border-radius: 4px;
    }

    .x-input-toggle-btn.w--redirected-checked {
        background-color: rgba(0, 0, 0, 0);
        background-image: none;
        border-width: 1px;
        border-color: #AB8422;
        border-radius: 4px;
    }

    .x-input-toggle-btn.w--redirected-focus {
        box-shadow: none;
    }

.x-input-toggle-label {
    width: 100%;
    height: 100%;
    color: #878787;
    text-align: center;
    background-color: #f2f4f8;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
    padding: 8px 12px;
    font-weight: 700;
    display: flex;
}

    .x-input-toggle-label.for-icon {
        font-size: 16px;
        font-weight: 400;
    }

.x-btn-timestamp {
    color: #b4b4b4;
    margin-left: 8px;
    margin-right: 8px;
    font-size: 10px;
}

.x-info-block {
    background-color: #e4f2ff;
    border-radius: 4px;
    align-items: flex-start;
    margin-top: 16px;
    margin-bottom: 16px;
    padding: 12px;
    display: flex;
}

    .x-info-block.for-amber {
        background-color: #fff2d9;
    }

.x-input-req-bubble {
    z-index: 10;
    width: 5px;
    height: 5px;
    cursor: help;
    background-color: #ef9a9a;
    border-radius: 4px;
    position: absolute;
    top: 5px;
    left: -8px;
}

.x-input-select {
    height: 32px;
    background-color: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    margin-bottom: 0;
    padding: 0;
    font-size: 12px;
}

    .x-input-select:hover {
        border-color: #323232;
    }

    .x-input-select:focus {
        border-color: #AB8422;
    }

    .x-input-select.for-sl-single {
        min-width: 96px;
    }

        .x-input-select.for-sl-single.is-filter {
            width: 128px;
            flex: none;
        }

        .x-input-select.for-sl-single.is-option {
            width: 160px;
        }

        .x-input-select.for-sl-single.is-small {
            width: 64px;
            min-width: 0;
        }

        .x-input-select.for-sl-single.is-user {
            width: 128px;
            flex: none;
        }

    .x-input-select.for-sl-search {
        min-width: 160px;
    }

        .x-input-select.for-sl-search.is-filter {
            min-width: 224px;
        }

.x-chkbox-row {
    margin-top: 8px;
    padding-bottom: 8px;
}

.x-setup-list {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    margin-bottom: 0;
    display: grid;
}

.x-setup-item {
    background-color: #ebebeb;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px 8px 8px;
    display: flex;
}

.x-item-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    margin-right: 12px;
}

.x-anchor-status {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 12px;
    display: flex;
}

.x-anchor-sec-score {
    width: 96px;
    height: 96px;
    background-color: #ebebeb;
    border-radius: 80px;
    justify-content: center;
    align-items: center;
    font-size: 64px;
    font-weight: 700;
    line-height: 64px;
    display: flex;
}

    .x-anchor-sec-score.for-green {
        color: #fff;
        background-color: #06b448;
    }

.x-anchor-sec-badge {
    color: #fff;
    background-color: #323232;
    border-radius: 16px;
    margin-top: -12px;
    margin-bottom: 12px;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 600;
    display: flex;
}

.x-step-item {
    align-items: flex-start;
    margin-top: 8px;
    display: flex;
}

.x-session-list {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    margin-bottom: 0;
    display: grid;
}

.x-session-item {
    background-color: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 12px;
    display: flex;
}

.x-session-time {
    width: 96px;
    flex: none;
    margin-right: 16px;
    font-size: 10px;
    font-weight: 600;
}

.x-user-id-block {
    background-color: #def6fc;
    border-radius: 4px;
    align-items: center;
    padding: 8px;
    display: flex;
}

.x-empty-text {
    color: #b4b4b4;
    font-style: italic;
}

.x-file-list-block {
    background-color: #f2f4f9;
}

.x-file-list {
    margin-bottom: 0;
}

.x-file-item {
    border-bottom: 1px solid #d1d1d1;
    align-items: center;
    padding: 8px 12px;
    display: flex;
}

    .x-file-item:hover {
        background-color: #fcfcfc;
    }

.x-file-info {
    flex: 1;
    margin-right: 16px;
}

.x-add-new-btn {
    color: #878787;
    background-color: #ebebeb;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    justify-content: center;
    align-items: center;
    padding: 12px;
    font-weight: 600;
    display: flex;
}

    .x-add-new-btn:hover {
        color: #fff;
        background-color: #AB8422;
    }

.x-team-list-block {
    background-color: #f2f4f9;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
}

.x-team-list {
    margin-bottom: 0;
}

.x-team-item {
    border-bottom: 1px solid #d1d1d1;
    align-items: flex-start;
    padding: 12px;
    display: flex;
}

    .x-team-item:hover {
        background-color: rgba(255, 255, 255, .48);
    }

    .x-team-item.for-center {
        align-items: center;
    }

        .x-team-item.for-center.is-current {
            background-color: #fce1d5;
        }

.x-multirow-input-group {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    display: grid;
}

.x-team-data-input {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    flex: 1;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    align-items: center;
    margin-left: 12px;
    margin-right: 12px;
    display: grid;
}

    .x-team-data-input.for-admin {
        grid-column-gap: 16px;
        grid-row-gap: 16px;
        grid-template-rows: auto;
        grid-template-columns: 1fr 160px;
        align-items: start;
    }

.x-team-data {
    flex: 1;
    margin-left: 12px;
    margin-right: 12px;
}

    .x-team-data.for-member {
        grid-column-gap: 16px;
        grid-row-gap: 0px;
        grid-template-rows: auto;
        grid-template-columns: 1fr 80px 80px 64px;
        grid-auto-columns: 1fr;
        align-items: center;
        display: grid;
    }

    .x-team-data.for-project {
        grid-column-gap: 16px;
        grid-row-gap: 16px;
        grid-template-rows: auto;
        grid-template-columns: 1fr 128px 128px 128px;
        grid-auto-columns: 1fr;
        display: grid;
    }

.x-team-role {
    color: #fff;
    text-align: center;
    background-color: #06b448;
    border-radius: 4px;
    margin-left: 8px;
    margin-right: 8px;
    padding: 8px 12px;
    font-size: 10px;
    font-weight: 600;
}

.x-tabnav-sep {
    color: #878787;
    font-family: Remix, sans-serif;
    font-size: 16px;
}

.x-heading-reset {
    margin-top: 0;
    margin-bottom: 0;
}

.x-quick-search-block {
    position: relative;
}

    .x-quick-search-block.for-dir {
        border-right-style: none;
        flex: 1;
        margin-bottom: 8px;
        margin-left: 0;
        margin-right: 0;
        padding-right: 0;
    }

.x-perm-editor-block {
    display: flex;
    overflow: hidden;
}

.x-perm-editor-sidebar {
    width: 260px;
    border-right: 1px solid #d1d1d1;
    flex: none;
    padding-top: 108px;
}

.x-perm-editor-view {
    flex: 1;
    overflow: auto;
}

.x-perm-type-list {
    grid-column-gap: 16px;
    grid-row-gap: 0px;
    grid-template-rows: auto;
    grid-template-columns: 160px;
    grid-auto-columns: 160px;
    grid-auto-flow: column;
    margin-bottom: 0;
    padding-left: 16px;
    display: grid;
}

.x-perm-type-item {
    width: 160px;
}

.x-perm-type-header {
    height: 108px;
    background-color: #fff;
    border-radius: 4px;
    padding: 12px;
    position: relative;
}

.x-perm-type-opt-list {
    margin-bottom: 0;
}

.x-perm-type-opt-item {
    justify-content: center;
    align-items: center;
    padding: 8px;
    display: flex;
    position: relative;
}

.x-perm-label-group {
    border-bottom: 1px solid #d1d1d1;
    padding-top: 16px;
    padding-bottom: 16px;
}

.x-perm-type-group {
    border-bottom: 1px solid #d1d1d1;
    padding-top: 36px;
    padding-bottom: 16px;
    position: relative;
}

.x-perm-lable-list {
    margin-bottom: 0;
}

.x-perm-label-item {
    white-space: nowrap;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    padding: 12px 16px 12px 12px;
    font-weight: 600;
}

.x-team-status {
    color: #fff;
    background-color: #06b448;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 10px;
    font-weight: 600;
    display: flex;
}

    .x-team-status.for-amber {
        background-color: #ffb300;
    }

    .x-team-status.for-red {
        background-color: #fc360c;
    }

.x-bottom-sheet-block {
    z-index: 5000;
    width: 100%;
    height: 100vh;
    opacity: 1;
    background-color: #f2f4f8;
    flex-direction: column;
    padding-top: 59px;
    transition: transform .35s cubic-bezier(.645, .045, .355, 1), opacity .1s cubic-bezier(.645, .045, .355, 1);
    display: flex;
    position: fixed;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
    overflow: hidden;
    transform: translate(0);
}

    .x-bottom-sheet-block.for-hide {
        opacity: 0;
        transform: translate(0, 100%);
    }

.x-bs-header {
    border-bottom: 1px solid #d1d1d1;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    display: flex;
}

.x-bs-content {
    flex: 1;
    overflow: auto;
}

    .x-bs-content.for-list {
        overflow: hidden;
    }

.x-bottom-sheet-h3 {
    margin-bottom: 0;
    margin-left: 12px;
}

.x-bs-container {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
    padding: 24px 24px 40px;
}

    .x-bs-container.for-mfa {
        max-width: 400px;
    }

    .x-bs-container.for-list {
        height: 100%;
        max-width: none;
        padding: 0;
    }

.x-opt-dd-menu {
    z-index: 8000;
    perspective-origin: 100% 0;
    transform-origin: 100% 0;
    background-color: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    padding: 4px;
    transition: all .35s cubic-bezier(.645, .045, .355, 1);
    position: absolute;
    top: 0%;
    bottom: auto;
    left: auto;
    right: 0%;
    box-shadow: 0 8px 16px -4px rgba(35, 43, 55, .16);
}

    .x-opt-dd-menu.for-hide {
        transform: scale(0);
    }

.x-opt-dd-overlay {
    z-index: 7000;
    display: none;
    position: fixed;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
}

.x-tab-menu {
    z-index: 1000;
    align-items: center;
    margin-bottom: 16px;
    margin-left: -2px;
    margin-right: -2px;
    display: flex;
    position: -webkit-sticky;
    position: sticky;
    top: 64px;
}

.x-tab-link {
    color: #878787;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 4px;
    margin-left: 2px;
    margin-right: 2px;
    padding: 6px 12px;
    font-weight: 600;
}

    .x-tab-link:hover {
        color: #323232;
        background-color: #ebebeb;
    }

    .x-tab-link.w--current {
        color: #fff;
        background-color: #AB8422;
    }

.x-tab-content {
    z-index: 10;
    overflow: visible;
}

.x-avatar-block {
    flex: none;
    position: relative;
}

    .x-avatar-block.for-padded {
        width: 32px;
        height: 32px;
        object-fit: cover;
        margin-right: 12px;
    }

.x-avatar-badge {
    width: 16px;
    height: 16px;
    color: #fff;
    background-color: #323232;
    border-radius: 24px;
    justify-content: center;
    align-items: center;
    font-size: 8px;
    font-weight: 700;
    display: flex;
    position: absolute;
    top: auto;
    bottom: -2px;
    left: -2px;
    right: auto;
}

    .x-avatar-badge.for-admin {
        background-color: #06b448;
    }

    .x-avatar-badge.for-staff {
        background-color: #AB8422;
    }

    .x-avatar-badge.for-manager {
        background-color: #fc360c;
    }

    .x-avatar-badge.for-collaborator {
        background-color: #1e88e5;
    }

.x-input-switch {
    letter-spacing: normal;
    text-transform: none;
    margin-bottom: 0;
    padding-left: 0;
    font-weight: 400;
    position: relative;
}

.x-input-switch-button {
    display: none;
}

.x-input-switch-label {
    width: 48px;
    height: 24px;
    background-color: #e6e8ee;
    border: 1px solid #d7dae1;
    border-radius: 24px;
    margin-bottom: 0;
    transition: all .35s cubic-bezier(.86, 0, .07, 1);
    display: block;
    position: relative;
}

.x-perm-type-edit-btn {
    color: #878787;
    background-color: #f2f4f9;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 10px;
    display: block;
    position: absolute;
    top: 4px;
    bottom: auto;
    left: auto;
    right: 4px;
}

    .x-perm-type-edit-btn:hover {
        color: #fff;
        background-color: #AB8422;
    }

.x-sec-status-block {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    color: #06b448;
    background-color: #e6fff2;
    border: 1px solid #06b448;
    border-radius: 4px;
    grid-template-rows: auto;
    grid-template-columns: 32px 1fr;
    grid-auto-columns: 1fr;
    align-items: start;
    margin-bottom: 16px;
    padding: 8px;
    display: grid;
}

.x-page-h1 {
    margin-top: 0;
    margin-bottom: 0;
}

.x-page-option-block {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    display: flex;
}

    .x-page-option-block.for-list {
        margin-bottom: 0;
        padding: 16px;
    }

.x-quick-filter-menu {
    align-items: center;
    display: flex;
}

.x-quick-filter-link {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
    color: #878787;
    background-color: #f2f4f9;
    border-radius: 4px;
    align-items: center;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 600;
    display: flex;
}

    .x-quick-filter-link:hover {
        color: #323232;
        background-color: #e6e8ee;
    }

    .x-quick-filter-link.w--current {
        color: #fff;
        background-color: #323232;
    }

    .x-quick-filter-link.for-current {
        color: #fff;
        background-color: #AB8422;
    }

.x-page-option-group {
    align-items: center;
    display: flex;
}

.x-page-option-special {
    border-left: 1px solid #d1d1d1;
    margin-left: 4px;
    padding-left: 4px;
    display: none;
}

.x-datatable-counter {
    flex: none;
    justify-content: center;
    align-items: center;
    margin-right: 8px;
    font-weight: 600;
    display: flex;
}

    .x-datatable-counter.for-counter {
        width: auto;
    }

.x-datatable-block {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 8px -2px rgba(35, 43, 55, .16);
}

    .x-datatable-block.for-v2 {
        height: 100%;
        flex-direction: column;
        display: flex;
    }

.x-dt-header {
    z-index: 100;
    background-color: #f2f4f9;
    border-top: 1px solid #d1d1d1;
    border-bottom: 1px solid #d1d1d1;
    align-items: center;
    padding-left: 8px;
    padding-right: 8px;
    display: flex;
    position: -webkit-sticky;
    position: sticky;
    top: 57px;
}

    .x-dt-header.for-list {
        padding-left: 16px;
        padding-right: 16px;
        position: -webkit-sticky;
        position: sticky;
        top: 0%;
        bottom: auto;
        left: 0%;
        right: 0%;
    }

.x-dt-list {
    margin-bottom: 16px;
}

.x-dt-item {
    border-bottom: 1px solid #d1d1d1;
    align-items: stretch;
    padding-left: 8px;
    padding-right: 8px;
    display: flex;
}

    .x-dt-item:hover {
        background-color: #f2f4f9;
    }

    .x-dt-item.for-list {
        padding-left: 16px;
        padding-right: 16px;
    }

.x-dt-check-col {
    width: 32px;
    align-items: center;
    margin-right: 8px;
    display: flex;
}

.x-dt-header-label {
    text-transform: uppercase;
    margin-bottom: 0;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 12px;
    font-weight: 600;
}

    .x-dt-header-label.for-reset {
        color: #b4b4b4;
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 0;
        font-size: 10px;
    }

.x-dt-name-col {
    border-left: 1px solid #d1d1d1;
    flex: 1;
}

.x-dt-base-col {
    max-width: 160px;
    border-left: 1px solid #d1d1d1;
    flex: 1;
    align-items: center;
    display: flex;
}

.x-dt-sort-toggle {
    color: #b4b4b4;
    margin-left: 4px;
    padding: 4px;
    font-family: Remix, sans-serif;
}

.x-dt-opt-col {
    width: 32px;
    flex: none;
    align-items: center;
    display: flex;
}

.x-dt-item-link {
    color: #323232;
    align-items: center;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 12px;
    display: flex;
}

    .x-dt-item-link:hover {
        color: #AB8422;
        background-color: rgba(255, 255, 255, .32);
    }

.x-user-link-block {
    height: 100%;
    color: #878787;
    flex: 1;
    align-items: center;
    padding-left: 12px;
    padding-right: 12px;
    display: flex;
    position: relative;
    overflow: hidden;
}

    .x-user-link-block:hover {
        color: #AB8422;
        background-color: rgba(255, 255, 255, .32);
    }

.x-dt-small-col {
    max-width: 96px;
    flex: 1;
    align-items: center;
    padding-right: 16px;
    display: flex;
}

.x-dialog {
    z-index: 9900;
    background-color: rgba(35, 43, 55, .16);
    position: fixed;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
}

    .x-dialog.for-hide {
        display: none;
    }

.x-dialog-overlay {
    z-index: 10;
    display: none;
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
}

.x-dialog-form {
    z-index: 100;
    max-width: 480px;
    min-width: 424px;
    background-color: #fff;
    border-radius: 4px;
    transition: all .25s cubic-bezier(.645, .045, .355, 1);
    position: relative;
    transform: translate(0);
    box-shadow: 0 8px 16px -4px rgba(35, 43, 55, .16);
}

    .x-dialog-form.for-hide {
        opacity: 0;
        transform: translate(0, -64px);
    }

.x-dialog-header {
    justify-content: space-between;
    align-items: center;
    padding: 8px 8px 8px 16px;
    display: flex;
}

.x-dialog-body {
    max-height: 70vh;
    flex: 1;
    padding: 16px;
    overflow: auto;
}

    .x-dialog-body.for-nopad {
        padding: 0;
    }

    .x-dialog-body.for-viewer {
        max-height: none;
        padding: 0;
    }

.x-dialog-title {
    font-size: 16px;
    font-weight: 600;
}

    .x-dialog-title.for-action-icon {
        color: #d1d1d1;
        font-family: Remix, sans-serif;
        font-weight: 400;
    }

    .x-dialog-title.for-action {
        margin-bottom: 16px;
    }

.x-dialog-wrapper {
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
}

.x-val-emp {
    white-space: nowrap;
    flex: none;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    overflow: hidden;
}

    .x-val-emp.for-status {
        color: #fff;
        background-color: #AB8422;
        border-radius: 4px;
        padding-left: 16px;
        padding-right: 16px;
        font-size: 16px;
        display: inline-block;
    }

.doc-item {
    flex-wrap: wrap;
    align-items: center;
    margin-top: 8px;
    display: flex;
}

.doc-pages-col {
    margin-bottom: 0;
}

.doc-pages-grid {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    border-bottom: 1px solid #d1d1d1;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    margin-bottom: 16px;
    padding-bottom: 16px;
    display: grid;
}

.doc-sublist {
    width: 100%;
    padding-left: 24px;
}

.doc-subitem {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 8px;
    display: flex;
}

.x-dt-item-val {
    padding-left: 12px;
}

.x-input-shortcode {
    max-width: 306px;
    align-items: center;
    display: flex;
    position: relative;
}

.x-shortcode-check {
    flex: 1;
    margin-left: 8px;
    margin-right: -4px;
}

.x-sidebar-scroller {
    height: 100%;
    flex: 1;
    overflow: auto;
}

.x-empty-list {
    display: none;
}

.x-empty-list-container {
    min-height: 96px;
    flex-direction: column;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: center;
    align-items: center;
    padding: 32px;
    display: flex;
}

.x-form {
    height: 100%;
}

.x-bs-list-container {
    height: 100%;
    display: flex;
}

.x-bs-list-body {
    flex-direction: column;
    flex: 1;
    display: flex;
    overflow: hidden;
}

.x-bs-list-header {
    flex: none;
}

.x-bs-list-scroller {
    flex: 1;
    position: relative;
    overflow: auto;
}

.x-empty-action {
    margin-top: 16px;
}

.x-form-error {
    color: #fff;
    background-color: #fc360c;
    border-radius: 4px;
    padding: 2px;
    font-family: Remix, sans-serif;
    font-size: 12px;
    line-height: 12px;
    position: absolute;
    top: 16px;
    right: -4px;
}

.x-simple-list {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 8px;
    padding-left: 20px;
    display: flex;
}

.x-simple-list-item {
    background-color: #ebebeb;
    border: 1px solid #e6e8ee;
    border-radius: 4px;
    margin-bottom: 6px;
    padding: 4px 8px;
}

.x-simple-list-more {
    color: #b4b4b4;
    padding-left: 20px;
}

.x-input-cat-type-wrapper {
    background-color: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    flex-wrap: wrap;
    flex: 1;
    display: flex;
}

.x-input-cat-type-col {
    border-right: 1px solid #d1d1d1;
    flex: 1;
    padding: 8px;
}

    .x-input-cat-type-col.for-last {
        border-right-style: none;
    }

.x-large-dialog-form {
    z-index: 100;
    max-width: 100%;
    background-color: #fff;
    border-radius: 4px;
    transition: all .25s cubic-bezier(.645, .045, .355, 1);
    position: relative;
    box-shadow: 0 8px 16px -4px rgba(35, 43, 55, .16);
    margin: 0px 10px;
}

    .x-large-dialog-form.for-hide {
        opacity: 0;
        transform: translate(0, -64px);
    }

.x-dialog-action {
    border-top: 1px solid #d1d1d1;
    padding: 12px 16px 16px;
}

.x-icon-sml-btn {
    background-image: linear-gradient(to right, #AB8422, #23b4c3);
    border-radius: 16px;
    padding: 7px 8px;
    font-family: Remix, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 10px;
    transition: all .2s cubic-bezier(.645, .045, .355, 1);
    box-shadow: 0 4px 8px -2px rgba(35, 43, 55, .16), inset 0 0 0 1px #AB8422;
}

    .x-icon-sml-btn:hover {
        color: #fff;
        background-color: #878787;
        box-shadow: 0 1px 4px -2px rgba(35, 43, 55, .16), inset 0 0 0 1px #323232;
    }

    .x-icon-sml-btn.for-secondary {
        color: #AB8422;
        background-color: #ebebeb;
        background-image: none;
        box-shadow: 0 4px 8px -2px rgba(35, 43, 55, .16), inset 0 0 0 1px #e6e8ee;
    }

        .x-icon-sml-btn.for-secondary:hover {
            color: #323232;
            background-color: #fff;
            box-shadow: 0 1px 4px -2px rgba(35, 43, 55, .16), inset 0 0 0 1px #d1d1d1;
        }

    .x-icon-sml-btn.for-simple {
        color: #555;
        background-color: #fff;
        background-image: none;
        box-shadow: 0 4px 8px -2px rgba(35, 43, 55, .16), inset 0 0 0 1px #e6e8ee;
    }

        .x-icon-sml-btn.for-simple:hover {
            color: #323232;
            background-color: #ebebeb;
            box-shadow: 0 1px 4px -2px rgba(35, 43, 55, .16), inset 0 0 0 1px #e6e8ee;
        }

    .x-icon-sml-btn.for-green {
        color: #fff;
        background-color: #06b448;
        box-shadow: 0 4px 8px -2px rgba(35, 43, 55, .16), inset 0 0 0 1px #06b448;
    }

        .x-icon-sml-btn.for-green:hover {
            background-color: #323232;
            box-shadow: 0 4px 8px -2px rgba(35, 43, 55, .16), inset 0 0 0 1px #323232;
        }

.x-inline-sep {
    color: #d1d1d1;
    margin-left: 2px;
    margin-right: 2px;
}

.x-loader-overlay {
    z-index: 9000;
    background-color: rgba(35, 43, 55, .16);
    display: none;
    position: fixed;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
}

.x-loader-wrapper {
    z-index: 2;
    background-image: url('../images/stripe-light-grey_1stripe-light-grey.png');
    background-position: 0 0;
    background-size: auto;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
    overflow: hidden;
}

.x-team-opt {
    flex: none;
    margin-left: 12px;
}

.x-webix-sml-btn {
    width: 20px;
    height: 20px;
    color: #323232;
    background-color: #e6e8ee;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    padding: 0;
    font-family: Remix, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 14px;
    transition: all .2s cubic-bezier(.645, .045, .355, 1);
    display: flex;
}

    .x-webix-sml-btn:hover {
        color: #fff;
        background-color: #323232;
    }

    .x-webix-sml-btn.for-secondary {
        color: #b4b4b4;
        background-color: #ebebeb;
    }

        .x-webix-sml-btn.for-secondary:hover {
            color: #323232;
            background-color: #fff;
        }

    .x-webix-sml-btn.for-simple {
        color: #878787;
        background-color: rgba(0, 0, 0, 0);
    }

        .x-webix-sml-btn.for-simple:hover {
            color: #323232;
            background-color: #f2f4f8;
        }

.x-filter-list {
    margin-bottom: 0;
}

.x-filter-list-item {
    border-top: 1px solid #f2f4f8;
    padding-top: 4px;
    padding-bottom: 4px;
}

.x-cat-type-block {
    background-color: #f2f4f9;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    padding: 12px;
}

.x-cat-type-list {
    margin-bottom: 0;
}

.x-cat-type-item {
    align-items: flex-start;
    margin-bottom: 12px;
    display: flex;
}

.x-dt-med-col {
    max-width: 112px;
    border-left: 1px solid #d1d1d1;
    flex: 1;
    align-items: center;
    padding-right: 16px;
    display: flex;
}

.x-input-list {
    background-color: #f2f4f9;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
}

.x-input-list-header {
    background-color: #fff;
    border-bottom: 1px solid #d1d1d1;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    display: flex;
}

.x-input-list-wrapper {
    margin-bottom: 0;
}

.x-input-list-row {
    border-bottom: 1px solid #d1d1d1;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    display: flex;
}

.x-dt-thumb-col {
    width: 40px;
    max-width: none;
    flex: none;
    align-items: center;
    padding-right: 16px;
    display: flex;
}

.x-dt-thumb-img {
    width: 24px;
    height: 24px;
    flex: none;
    display: block;
}

    .x-dt-thumb-img.for-large {
        width: 64px;
        height: 64px;
        object-fit: cover;
    }

.x-quick-breadcrumb {
    align-items: center;
    display: flex;
}

.x-quick-breadcrumb-link {
    color: #b4b4b4;
    padding: 6px 4px;
}

.x-val-span {
    color: #d1d1d1;
    font-size: 16px;
    line-height: 16px;
}

.x-uppy-embed {
    height: 480px;
    background-color: #f2f4f9;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

    .x-uppy-embed.for-mid {
        height: 320px;
    }

    .x-uppy-embed.for-dialog {
        height: 48vh;
        min-height: 400px;
    }

.x-input-list-option {
    background-color: #f2f4f8;
    border-bottom: 1px solid #d1d1d1;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    display: flex;
    box-shadow: 0 3px 3px rgba(35, 43, 55, .16);
}

.x-form-twin-grid {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
}

.doc-overlay {
    background-color: rgba(35, 43, 55, .16);
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    padding: 40px;
    display: flex;
}

.x-slider-block {
    width: 100%;
    height: 100%;
}

.x-slider-mask.for-announcement {
    border: 1px solid #d1d1d1;
    border-radius: 4px;
}

.x-slider-nav {
    height: 16px;
    flex-direction: row;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 24px;
    display: flex;
    bottom: 24px;
}

    .x-slider-nav.for-announcement {
        padding-left: 16px;
        bottom: 16px;
    }

.x-slider-arrow {
    width: 40px;
    height: 40px;
    background-color: #323232;
    border: 1px solid #323232;
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
    margin-top: auto;
    margin-bottom: auto;
    top: auto;
    bottom: 24px;
    left: auto;
    right: 24px;
}

    .x-slider-arrow:hover {
        background-color: #555;
    }

    .x-slider-arrow.for-left {
        border-right-style: none;
        border-radius: 24px 0 0 24px;
        right: 64px;
    }

.x-slider-icon {
    color: #fff;
    font-size: 16px;
}

.x-slider-pane-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.x-slider-pane-content {
    z-index: 10;
    max-width: 64%;
    min-width: 400px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background-color: rgba(255, 255, 255, .64);
    border-radius: 4px;
    padding: 24px;
    position: absolute;
    bottom: 88px;
    right: 24px;
    box-shadow: 0 8px 24px -4px rgba(35, 43, 55, .16);
}

    .x-slider-pane-content.for-announcement {
        width: 100%;
        max-width: none;
        min-width: 0;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background-color: rgba(255, 255, 255, .8);
        border-radius: 0;
        padding: 16px 112px 48px 16px;
        bottom: 0;
        left: 0;
        right: 0;
    }

.x-breadcrumb {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    flex: none;
    align-items: center;
    display: flex;
}

.x-breadcrumb-link {
    color: #878787;
    align-items: center;
    padding: 4px;
    font-weight: 600;
    display: flex;
    position: relative;
}

    .x-breadcrumb-link:hover {
        color: #AB8422;
    }

    .x-breadcrumb-link.w--current {
        color: #323232;
    }

.x-nav-menu-toggle {
    flex: none;
    margin-left: 16px;
    margin-right: 16px;
    display: flex;
}

.x-nav-menu-btn {
    color: #fff;
    background-color: #AB8422;
    border-radius: 24px;
    flex: none;
    align-items: center;
    padding: 8px 12px 8px 8px;
    font-weight: 600;
    display: flex;
}

    .x-nav-menu-btn:hover {
        color: #fff;
    }

    .x-nav-menu-btn.for-idle {
        color: #555;
        background-color: #f2f4f9;
    }

        .x-nav-menu-btn.for-idle:hover {
            color: #fff;
            background-color: #323232;
        }

.x-nav-menu-label {
    margin-left: 8px;
}

.x-breadcrumb-home-btn {
    color: #555;
    background-color: #f2f4f9;
    border-radius: 24px;
    margin-right: 8px;
    padding: 8px;
    font-family: Remix, sans-serif;
    font-size: 16px;
}

    .x-breadcrumb-home-btn:hover {
        color: #fff;
        background-color: #323232;
    }

.x-bookmark-btn {
    color: #b4b4b4;
    background-color: #f2f4f9;
    border: 1px solid #d1d1d1;
    border-radius: 24px;
    margin-left: -4px;
    margin-right: 8px;
    padding: 4px;
    font-family: Remix, sans-serif;
    font-size: 10px;
    line-height: 10px;
}

    .x-bookmark-btn.for-active {
        color: #fff;
        background-color: #AB8422;
        border-color: #AB8422;
    }

.x-appnav-menu {
    z-index: 5010;
    background-color: #fff;
    border-bottom: 1px solid #d1d1d1;
    padding: 16px;
    display: none;
    position: relative;
    top: -1px;
    overflow: auto;
    box-shadow: 0 4px 8px -4px rgba(35, 43, 55, .16);
}

    .x-appnav-menu.for-active {
        display: block;
    }

.x-appnav-menu-base-col {
    flex: none;
}

.x-appnav-menu-list {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    margin-bottom: 0;
    /*display: flex;*/
}

.x-appnav-menu-item {
    border-right: 1px solid #d1d1d1;
    flex: none;
    margin-right: 8px;
    padding-right: 8px;
    position: relative;
}

.x-appnav-menu-link {
    color: #878787;
    border-radius: 4px;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    font-weight: 600;
    display: flex;
}

    .x-appnav-menu-link:hover {
        color: #323232;
        background-color: #f2f4f8;
    }

    .x-appnav-menu-link.w--current {
        color: #323232;
    }

.x-appnav-menu-label {
    margin-right: 24px;
}

.x-appnav-menu-container {
    display: flex;
}

.x-appnav-submenu-list {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    margin-bottom: 0;
    padding-left: 24px;
    display: block;
}

.x-appnav-submenu-item {
    flex: none;
    position: relative;
}

.x-appnav-copy {
    flex: none;
    margin-left: 8px;
    padding-right: 24px;
}

.x-setting-opt-block {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    display: grid;
}

.x-setting-opt-link {
    color: #555;
    background-color: #f2f4f9;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    justify-content: space-between;
    align-items: flex-end;
    padding: 16px;
    display: flex;
}

    .x-setting-opt-link:hover {
        color: #323232;
        background-color: #fff;
    }

.x-setting-opt-thumb {
    height: 96px;
}

.x-setting-opt-info {
    max-width: 320px;
    margin-left: 16px;
}

.x-setting-opt-h2 {
    margin-bottom: 8px;
}

.x-title-tab-block {
    align-items: center;
    margin-bottom: 24px;
    margin-left: -12px;
    margin-right: -12px;
    display: flex;
}

    .x-title-tab-block.for-reset {
        margin-bottom: 0;
    }

.x-title-tab-link {
    color: #878787;
    flex: none;
    margin-left: 12px;
    margin-right: 12px;
}

    .x-title-tab-link:hover {
        color: #AB8422;
    }

    .x-title-tab-link.w--current {
        color: #323232;
    }

.x-title-tab-heading {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
}

.x-prem-switch-btn {
    color: #fff;
    background-color: #AB8422;
    border: 1px solid #AB8422;
    border-radius: 40px;
    align-items: center;
    padding: 4px;
    display: flex;
    position: relative;
}

    .x-prem-switch-btn:hover {
        color: #323232;
        background-color: #f2f4f9;
    }

    .x-prem-switch-btn.for-idle {
        z-index: 100;
        color: #878787;
        background-color: #fff;
        border-color: #d1d1d1;
    }

        .x-prem-switch-btn.for-idle:hover {
            color: #323232;
            background-color: #f2f4f9;
        }

.x-prem-switch-thumb {
    width: 32px;
    height: 32px;
    border-radius: 24px;
}

.x-prem-switch-data {
    margin-left: 8px;
}

.x-prem-switch-icon {
    margin-left: 8px;
    padding: 8px;
    font-family: Remix, sans-serif;
    font-size: 16px;
}

.x-prem-switch-brand {
    font-weight: 600;
}

.x-prem-menu {
    z-index: 100;
    width: 560px;
    background-color: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    padding-bottom: 8px;
    display: none;
    position: absolute;
    top: 40px;
    right: 0;
    box-shadow: 0 4px 12px -4px rgba(35, 43, 55, .16);
}

.x-prem-menu-list {
    background-color: #fff;
    margin-bottom: 0;
}

.x-prem-menu-item {
    align-items: center;
    display: flex;
    position: relative;
}

    .x-prem-menu-item:hover {
        background-color: #f2f4f9;
    }

    .x-prem-menu-item.for-current {
        background-color: #def6fc;
    }

        .x-prem-menu-item.for-current:hover {
            background-color: #fcddd0;
        }

.x-prem-switch-toggle {
    position: relative;
}

.x-prem-menu-link {
    width: 160px;
    height: 48px;
    color: #878787;
    flex: none;
    align-items: center;
    padding: 8px 12px;
    display: flex;
}

    .x-prem-menu-link:hover {
        color: #323232;
    }

    .x-prem-menu-link.for-brand {
        width: 228px;
        white-space: nowrap;
        position: relative;
        overflow: hidden;
    }

.x-prem-menu-status {
    flex: 1;
    align-items: center;
    display: flex;
}

.x-prem-menu-status-icon {
    margin-right: 4px;
    font-family: Remix, sans-serif;
    font-size: 16px;
}

    .x-prem-menu-status-icon.for-green {
        color: #06b448;
    }

    .x-prem-menu-status-icon.for-amber {
        color: #ffb300;
    }

    .x-prem-menu-status-icon.for-red {
        color: #fc360c;
    }

.x-prem-menu-opt {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    display: flex;
    position: absolute;
    top: 12px;
    right: 8px;
}

.x-prem-menu-header {
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px 8px 16px;
    display: flex;
}

.x-prem-menu-scroller {
    max-height: 320px;
    overflow: auto;
}

.x-prem-switch-status-icon {
    font-family: Remix, sans-serif;
    font-size: 16px;
    position: absolute;
    top: auto;
    bottom: 0%;
    left: auto;
    right: -4px;
}

    .x-prem-switch-status-icon.for-green {
        color: #06b448;
    }

    .x-prem-switch-status-icon.for-amber {
        color: #ffb300;
    }

    .x-prem-switch-status-icon.for-red {
        color: #fc360c;
    }

.x-prem-switch-overlay {
    z-index: 10;
    background-color: rgba(35, 43, 55, .16);
    display: none;
    position: fixed;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
}

.x-prem-block {
    background-color: #f2f4f9;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    overflow: hidden;
}

.x-subdomain-block {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    background-color: #f2f4f9;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    align-items: center;
    padding: 4px;
    display: flex;
}

.x-subdomain-input {
    flex: 1;
    position: relative;
}

.x-subdomain-label {
    color: #555;
    margin-right: 8px;
    font-weight: 600;
}

.x-subdomain-check {
    background-color: #f2f4f9;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 600;
    position: absolute;
    top: 4px;
    left: 4px;
}

    .x-subdomain-check.for-green {
        color: #fff;
        background-color: #06b448;
    }

    .x-subdomain-check.for-red {
        color: #fff;
        background-color: #fc360c;
    }

.x-team-type {
    width: 160px;
    flex: none;
    margin-left: 8px;
    margin-right: 8px;
}

.x-input-prem-switcher {
    background-color: #f2f4f9;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    overflow: hidden;
}

.x-input-prem-toggle {
    z-index: 5000;
    color: #323232;
    background-color: #f2f4f9;
    align-items: center;
    padding: 12px;
    display: flex;
    position: relative;
}

    .x-input-prem-toggle:hover {
        background-color: rgba(255, 255, 255, .48);
    }

.x-input-prem-menu {
    z-index: 5100;
    background-color: #f2f4f9;
    display: none;
    position: relative;
}

.x-input-prem-col {
    flex: 1;
    margin-left: 12px;
}

.x-input-prem-menu-list {
    margin-bottom: 0;
}

.x-input-prem-menu-item {
    border-top: 1px solid #d1d1d1;
    align-items: center;
    padding: 12px;
    display: flex;
}

    .x-input-prem-menu-item:hover {
        background-color: rgba(255, 255, 255, .48);
    }

.x-input-prem-opt {
    width: 96px;
    flex: none;
    justify-content: flex-end;
    align-items: center;
    display: flex;
}

.x-input-prem-menu-title {
    padding: 12px;
    font-weight: 600;
}

.x-input-prem-overlay {
    z-index: 4000;
    background-color: rgba(35, 43, 55, .16);
    display: none;
    position: fixed;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
}

.x-input-prem-toggle-icon {
    font-family: Remix, sans-serif;
    font-size: 16px;
    transition: all .2s cubic-bezier(.77, 0, .175, 1);
    transform: rotate(0);
}

    .x-input-prem-toggle-icon.for-idle {
        transform: rotate(180deg);
    }

.x-team-list-header.for-brands {
    border-bottom: 1px solid #d1d1d1;
    padding: 8px 132px 8px 44px;
}

.x-tenant-brand-logo {
    height: 88px;
    background-color: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    margin-bottom: 8px;
    padding: 16px;
}

    .x-tenant-brand-logo.for-square, .x-tenant-brand-logo.for-favicon {
        width: 88px;
        padding: 8px;
    }

.x-tenant-brand-col {
    background-color: #f2f4f9;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    flex-direction: column;
    padding: 8px;
    display: flex;
}

.x-footer {
    border-top: 1px solid #d1d1d1;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    display: flex;
}

.x-footer-menu-list {
    align-items: center;
    margin-bottom: 0;
    margin-left: -6px;
    margin-right: -6px;
    display: flex;
}

.x-footer-menu-item {
    padding-left: 6px;
    padding-right: 6px;
}

.x-footer-menu-link {
    color: #878787;
    display: block;
}

.x-input-flex {
    min-width: 128px;
    display: flex;
}

.x-input-prefix {
    z-index: 0;
    color: #555;
    background-color: #ebebeb;
    border: 1px solid #d1d1d1;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    flex: none;
    align-items: center;
    margin-right: -6px;
    padding-left: 12px;
    padding-right: 16px;
    font-weight: 600;
    display: flex;
    position: relative;
}

.x-input-postfix {
    color: #555;
    white-space: nowrap;
    background-color: #ebebeb;
    border: 1px solid #d1d1d1;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    align-items: center;
    margin-left: -6px;
    padding-left: 16px;
    padding-right: 12px;
    font-weight: 600;
    display: flex;
}

.x-input-user-picker {
    position: relative;
}

.x-input-user-picker-toggle {
    z-index: 10;
    background-color: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    align-items: center;
    padding: 8px;
    display: flex;
    position: relative;
}

.x-avatar-info {
    flex: 1;
    margin-left: 8px;
}

.x-dir-list-block {
    z-index: 20;
    background-color: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    display: none;
    position: absolute;
    top: 48px;
    bottom: auto;
    left: 0%;
    right: 0%;
    overflow: hidden;
    box-shadow: 0 4px 12px -4px rgba(35, 43, 55, .16);
}

.x-dir-list {
    max-height: 32vh;
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    margin-bottom: 0;
    padding-bottom: 12px;
    padding-left: 12px;
    padding-right: 12px;
    display: grid;
    overflow: auto;
}

.x-dir-item {
    cursor: pointer;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px 8px 8px;
    display: flex;
}

    .x-dir-item.for-active {
        background-color: #fde6dc;
        border-color: #AB8422;
    }

.x-dir-search {
    z-index: 10;
    padding: 12px 12px 8px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.x-input-user-picker-overlay {
    z-index: 8;
    display: none;
    position: fixed;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
}

.x-tenant-brand-block {
    width: 320px;
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
}

.x-cat-type-opt {
    flex: none;
}

.x-tab-body {
    background-color: #fff;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 6px 12px -4px rgba(35, 43, 55, .16);
}

.x-small-span {
    color: #555;
    background-color: #f2f4f8;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    margin-left: 4px;
    padding: 2px 6px;
    font-weight: 600;
    display: inline-block;
}

.x-brand-grid-block {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    display: grid;
}

.x-brand-grid-row {
    margin-left: -8px;
    margin-right: -8px;
    display: flex;
}

.x-brand-grid-col {
    flex: 1;
    padding-left: 8px;
    padding-right: 8px;
}

    @media(min-width:992px) {
      .x-brand-grid-col.for-sml {
        width: 25%;
        flex: none;
      }

      .x-brand-grid-col.for-mid {
        width: 33.333%;
        flex: none;
      }
    }

.x-brand-grid-card {
    height: 100%;
    background-color: #fff;
    border-radius: 8px;
    padding: 16px;
    position: relative;
    box-shadow: 0 4px 12px -6px rgba(35, 43, 55, .16);
}

    .x-brand-grid-card.for-center {
        justify-content: center;
        align-items: center;
        display: flex;
    }

    .x-brand-grid-card.for-id {
        flex-direction: column;
        justify-content: space-between;
        display: flex;
    }

.x-brand-grid-wide-thumb {
    width: 100%;
    display: block;
}

.x-diagram-block {
    width: 100%;
    min-height: 240px;
    background-image: url('../images/10x10-gridline.png');
    background-position: 50%;
    background-size: auto;
}

.x-tag-block {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    white-space: nowrap;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: -4px;
    display: flex;
}

.x-tag-link {
    background-color: #e3f2fd;
    border-radius: 4px;
    margin-bottom: 4px;
    padding: 4px 6px;
    font-weight: 600;
}

    .x-tag-link:hover {
        color: #fff;
        background-color: #18b4ea;
    }

.x-tag-group-block {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    margin-bottom: 8px;
    display: grid;
}

.x-tag-group-col {
    margin-left: 8px;
    margin-right: 8px;
}

    .x-tag-group-col.for-sub {
        width: 60%;
        flex: none;
    }

.x-tag-group-row {
    margin-left: -8px;
    margin-right: -8px;
    display: flex;
}

.x-tag-group-sep {
    height: 0;
    border-top: 1px solid #d1d1d1;
    flex: 1;
    margin-top: 12px;
}

.x-pic-block {
    background-color: #ebebeb;
    border-radius: 4px;
    align-items: center;
    padding: 6px;
    display: flex;
}

    .x-pic-block:hover {
        background-color: #f2f4f9;
    }

.x-brand-grid-pic {
    margin-top: 24px;
}

.x-val-stack-list {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    flex: 1;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    margin-bottom: 0;
    display: grid;
}

.x-val-stack-item {
    background-color: #f2f4f8;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    display: flex;
}

    .x-val-stack-item.for-active {
        background-color: rgba(8, 193, 138, .16);
    }

.x-val-stack-link {
    color: #b4b4b4;
    background-color: #f2f4f9;
    border-radius: 4px;
    align-items: center;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 600;
    display: flex;
}

    .x-val-stack-link.for-active {
        color: #fff;
        background-color: #06b448;
        font-size: 11px;
        box-shadow: 0 3px 4px -1px rgba(8, 193, 138, .64);
    }

.x-val-stack-sep {
    flex: none;
    margin-left: 4px;
    margin-right: 4px;
}

.x-val-stack-group-list {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    margin-bottom: 0;
    display: grid;
}

.x-val-stack-group-item {
    display: flex;
}

.x-val-stack-group-label {
    width: 80px;
    color: #b4b4b4;
    border-right: 2px solid #ebebeb;
    flex: none;
    margin-right: 8px;
    font-weight: 600;
}

    .x-val-stack-group-label.for-active {
        color: #06b448;
        border-right-color: #06b448;
    }

.x-type-stack-list {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    align-items: center;
    margin-bottom: 0;
    display: grid;
}

.x-type-stack-item {
    background-color: #f2f4f8;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    justify-content: space-between;
    align-items: center;
    display: flex;
    overflow: hidden;
}

.x-type-stack-link {
    color: #b4b4b4;
    background-color: #f2f4f9;
    border-radius: 4px;
    align-items: center;
    padding-right: 12px;
    font-weight: 600;
    display: flex;
    overflow: hidden;
}

    .x-type-stack-link.for-1 {
        width: 25%;
        flex: none;
    }

    .x-type-stack-link.for-2 {
        width: 30%;
    }

    .x-type-stack-link.for-3 {
        width: 40%;
    }

        .x-type-stack-link.for-3.is-active {
            color: #fff;
            background-color: #06b448;
        }

    .x-type-stack-link.for-4 {
        width: 50%;
    }

        .x-type-stack-link.for-4.is-active {
            color: #fff;
            background-color: #06b448;
        }

    .x-type-stack-link.for-5 {
        width: 60%;
    }

        .x-type-stack-link.for-5.is-active {
            color: #fff;
            background-color: #06b448;
        }

    .x-type-stack-link.for-6 {
        width: 70%;
    }

    .x-type-stack-link.for-7 {
        width: 80%;
    }

.x-type-stack-thumb {
    width: 32px;
    height: 32px;
    background-color: rgba(255, 255, 255, .48);
    margin-right: 8px;
}

.x-type-stack-badge {
    color: #06b448;
    align-items: center;
    margin-right: 12px;
    font-weight: 600;
    display: flex;
}

.x-file-uploader-block {
    background-color: #fff;
    border-bottom: 1px solid #d1d1d1;
    padding-top: 12px;
    padding-left: 12px;
    padding-right: 12px;
}

.x-file-manager-block {
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    overflow: hidden;
}

    .x-file-manager-block.for-tc {
        background-color: #fff;
        box-shadow: 0 4px 12px -4px rgba(35, 43, 55, .16);
    }

.x-file-list-header {
    background-color: #f2f4f9;
    justify-content: space-between;
    align-items: center;
    padding: 12px 12px 4px;
    display: flex;
}

.x-legend-list {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    margin-bottom: 12px;
    display: grid;
}

.x-legend-item {
    background-color: #f2f4f8;
    border-radius: 4px;
    padding: 8px 12px;
    display: flex;
}

.x-legend-list-title {
    width: 160px;
    flex: none;
    margin-right: 12px;
    font-weight: 600;
}

.x-ownership-transfer-block {
    background-color: #fde6dc;
    border: 1px solid #AB8422;
    border-radius: 4px;
    justify-content: space-between;
    align-items: flex-end;
    padding: 16px;
    display: flex;
}

.x-ownership-info {
    max-width: 400px;
}

.x-statsum-block {
    background-color: #AB8422;
    border-radius: 4px;
    margin-bottom: 24px;
    display: flex;
    overflow: hidden;
    box-shadow: 0 4px 8px -2px rgba(35, 43, 55, .16);
}

.x-statsum-col {
    width: 144px;
    border-left: 1px solid #d1d1d1;
    flex: none;
    padding: 16px 24px 16px 16px;
    position: relative;
}

.x-statsum-group {
    display: flex;
}

.x-statsum-total {
    flex: 1;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    display: flex;
}

.x-statsum-link {
    z-index: 10;
    border-radius: 24px;
    padding: 4px;
    font-family: Remix, sans-serif;
    font-size: 16px;
    display: block;
    position: absolute;
    top: 4px;
    bottom: auto;
    left: auto;
    right: 4px;
}

    .x-statsum-link:hover {
        color: #323232;
        background-color: #f2f4f9;
    }

.x-statsum-filler {
    height: 8%;
    background-color: #f2f4f9;
    position: absolute;
    bottom: 0%;
    left: 0%;
    right: 0%;
}

.x-statsum-val {
    z-index: 10;
    position: relative;
}

.x-statsum-label {
    color: #fff;
}

.x-datatable-header {
    z-index: 1000;
    flex: none;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    display: flex;
    position: relative;
    grid-gap: 6px;
}

    .x-datatable-header.for-dialog {
        background-color: #f2f4f8;
    }

.x-datatable-webix-embed {
    z-index: 10;
    width: 100%;
    min-height: 240px;
    position: relative;
}

.x-datatable-row-format {
    display: flex;
}

.x-datatable-cell {
    height: 100%;
    flex: 1;
    align-items: center;
    line-height: 16px;
    display: flex;
}

.x-datatable-unit {
    max-width: 128px;
    color: #555;
    white-space: nowrap;
    background-color: #f2f4f8;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    flex: none;
    padding: 4px 6px;
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    position: relative;
    overflow: hidden;
}

    .x-datatable-unit:hover {
        color: #323232;
        background-color: #f2f4f9;
        border-color: #d1d1d1;
    }

.x-datatable-row-col {
    padding: 8px;
}

.x-datatable-badge {
    color: #878787;
    background-color: #f2f4f9;
    border-radius: 4px;
    align-items: center;
    padding: 4px 8px 4px 4px;
    display: flex;
}

    .x-datatable-badge.for-invited {
        color: #fff;
        background-color: #23b4c3;
    }

    .x-datatable-badge.for-cd {
        color: #fff;
        background-color: #8e24aa;
    }

    .x-datatable-badge.for-fd {
        color: #fff;
        background-color: #0097a7;
    }

    .x-datatable-badge.for-pc {
        color: #8e24aa;
        background-color: #e1bee7;
    }

    .x-datatable-badge.for-inspect {
        color: #fff;
        background-color: #fc6c0c;
    }

    .x-datatable-badge.for-trade {
        color: #fff;
        background-color: #06b448;
    }

    .x-datatable-badge.for-suspend {
        color: #ffb300;
        background-color: #323232;
    }

    .x-datatable-badge.for-ceased {
        color: #fc360c;
        background-color: #ffebee;
    }

    .x-datatable-badge.for-vacant {
        color: #878787;
        background-color: #cfd8dc;
    }

    .x-datatable-badge.for-type-tenant {
        color: #AB8422;
        background-color: #FEFAEF;
    }

    .x-datatable-badge.for-type-admin {
        color: #FEFAEF;
        background-color: #AB8422;
    }

    .x-datatable-badge.for-type-contact {
        color: #fff;
        background-color: #06b448;
    }

    .x-datatable-badge.for-type-authority {
        color: #323232;
        background-color: #ffb300;
    }

    .x-datatable-badge.for-files {
        border: 1px solid #d1d1d1;
    }

    .x-datatable-badge.for-type-custom {
        background-color: #e6e8ee;
    }

    .x-datatable-badge.for-kom {
        color: #fff;
        background-color: #6d4c41;
    }

    .x-datatable-badge.for-init {
        color: #fff;
        background-color: #AB8422;
    }

    .x-datatable-badge.for-tc-inactive {
        color: #26a69a;
        background-color: #b2dfdb;
    }

    .x-datatable-badge.for-tc-active {
        color: #fff;
        background-color: #26a69a;
    }

    .x-datatable-badge.for-tc-reset {
        padding-left: 8px;
    }

        .x-datatable-badge.for-tc-reset.is-1 {
            color: #fff;
            background-color: #ffccbc;
        }

        .x-datatable-badge.for-tc-reset.is-2 {
            color: #fff;
            background-color: #ffab91;
        }

        .x-datatable-badge.for-tc-reset.is-3 {
            color: #fff;
            background-color: #ff8a65;
        }

        .x-datatable-badge.for-tc-reset.is-4 {
            color: #fff;
            background-color: #ff5722;
        }

        .x-datatable-badge.for-tc-reset.is-5 {
            color: #fff;
            background-color: #f4511e;
        }

        .x-datatable-badge.for-tc-reset.is-6 {
            color: #fff;
            background-color: #e64a19;
        }

        .x-datatable-badge.for-tc-reset.is-fnb {
            color: #fff;
            background-color: #ebad93;
        }

        .x-datatable-badge.for-tc-reset.is-other {
            color: #fff;
            background-color: #00bcd4;
        }

        .x-datatable-badge.for-tc-reset.is-anchor {
            color: #fff;
            background-color: #d6805b;
        }

        .x-datatable-badge.for-tc-reset.is-manchor {
            color: #fff;
            background-color: #009688;
        }

        .x-datatable-badge.for-tc-reset.is-specialty {
            color: #fff;
            background-color: #9c27b0;
        }

        .x-datatable-badge.for-tc-reset.is-os {
            color: #fff;
            background-color: #039be5;
        }

        .x-datatable-badge.for-tc-reset.is-trade {
            color: #fff;
            background-color: #06b448;
        }

        .x-datatable-badge.for-tc-reset.is-trade-month1 {
            color: #fff;
            background-color: #ffb300;
        }

        .x-datatable-badge.for-tc-reset.is-trade-month2 {
            color: #fff;
            background-color: #fc6c0c;
        }

        .x-datatable-badge.for-tc-reset.is-trade-month3 {
            color: #fff;
            background-color: #6d4c41;
        }

        .x-datatable-badge.for-tc-reset.is-trade-onhold {
            color: #fff;
            background-color: #cfd8dc;
        }

.x-datatable-chkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    background-color: #f2f4f8;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    flex: none;
}

    .x-datatable-chkbox.checked {
        background-color: #AB8422;
        background-image: url('../images/check-line.svg');
        background-position: 50%;
        background-size: 16px 16px;
        border-color: #AB8422;
    }

.x-datatable-left-opt {
    align-items: center;
    display: flex;
}

.x-datatable-right-opt {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    align-items: center;
    display: flex;
}

.x-datatable-view-toggle {
    border-left: 1px solid #d1d1d1;
    border-right: 1px solid #d1d1d1;
    align-items: center;
    margin-right: 8px;
    padding-left: 8px;
    padding-right: 8px;
    display: flex;
}

.x-datatable-body {
    min-height: 160px;
    position: relative;
}

    .x-datatable-body.for-v2 {
        min-height: 0;
        flex-direction: column;
        flex: 1;
        display: flex;
    }

.x-imp-embed {
    z-index: 10;
    min-height: 400px;
    position: relative;
    overflow: hidden;
    box-shadow: -1px 0 #d1d1d1, 1px 0 #d1d1d1;
}

.x-imp-legend-block {
    z-index: 10;
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    background-color: #fff;
    border-top: 1px solid #d1d1d1;
    border-bottom: 1px solid #d1d1d1;
    flex-wrap: wrap;
    flex: none;
    justify-content: flex-start;
    align-items: center;
    padding: 8px 12px;
    display: flex;
    position: relative;
}

.x-imp-legend-label {
    color: #878787;
    margin-right: 8px;
    font-weight: 600;
}

.x-imp-legend-col {
    align-items: center;
    font-size: 11px;
    display: flex;
}

.x-imp-block {
    position: relative;
}

.x-imp-footer {
    border-top: 1px solid #d1d1d1;
    flex: none;
    padding: 8px 12px;
}

.x-tenant-info-block {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    grid-template-rows: auto;
    grid-auto-columns: 1fr;
    align-items: start;
    display: grid;
}

.x-tenant-info-block.for-create {
    display: block;
}

.x-tenant-info-container {
    border-radius: 4px;
    box-shadow: 0 4px 8px -2px rgba(35, 43, 55, .16);
}

.x-tenant-history-sidebar {
    max-height: 80vh;
    background-color: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    flex-direction: column;
    display: flex;
    position: -webkit-sticky;
    position: sticky;
    top: 80px;
    overflow: hidden;
}

.x-stepper-block {
    background-color: #f2f4f9;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    align-items: center;
    display: flex;
    overflow: auto;
}

.x-stepper-list {
    flex: none;
    margin-bottom: 0;
    display: flex;
}

.x-stepper-item {
    background-color: #f2f4f9;
    flex: none;
    position: relative;
}

.x-stepper-link {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    color: #878787;
    align-items: center;
    padding: 12px 12px 12px 16px;
    font-weight: 600;
    display: flex;
    position: relative;
}

    .x-stepper-link:hover {
        color: #555;
    }

    .x-stepper-link.w--current {
        z-index: 10;
        color: #323232;
        background-color: #fff;
        align-items: center;
        display: flex;
    }

    .x-stepper-link.for-done {
        color: #06b448;
    }

    .x-stepper-link.for-disabled {
        color: #b4b4b4;
    }

.x-tenant-info-body {
    background-color: #fff;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

.x-ti-tab-menu {
    background-color: #fff;
    border-bottom: 1px solid #d1d1d1;
    display: flex;
}

.x-ti-tab-content {
    overflow: visible;
}

.x-ti-tab-link {
    color: #878787;
    background-color: rgba(0, 0, 0, 0);
    padding: 12px 16px;
    font-weight: 600;
    display: flex;
}

    .x-ti-tab-link.w--current {
        color: #AB8422;
        background-color: rgba(0, 0, 0, 0);
    }

.x-ti-tab-pane {
    overflow: visible;
}

.x-ti-tab-header {
    z-index: 1000;
    background-color: #fff;
    border-bottom: 1px solid #d1d1d1;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    display: flex;
    position: -webkit-sticky;
    position: sticky;
    top: 59px;
}

.x-timeline-block {
    max-width: 880px;
}

.x-timeline-list {
    margin-bottom: 0;
}

.x-timeline-item {
    position: relative;
}

    .x-timeline-item.for-sub {
        align-items: flex-start;
        padding-top: 24px;
        padding-left: 24px;
        padding-right: 24px;
        display: flex;
    }

.x-timeline-item-header {
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px 24px 16px;
    display: flex;
    position: relative;
}

.x-timeline-list.for-sub {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    display: grid;
}

.x-timeline-item-icon-node {
    z-index: 10;
    color: #fff;
    background-color: #323232;
    border-radius: 24px;
    margin-right: 16px;
    padding: 8px;
    font-family: Remix, sans-serif;
    font-size: 16px;
    position: relative;
    box-shadow: 0 0 0 8px #fff;
}

    .x-timeline-item-icon-node.for-sub {
        z-index: 4;
        color: #323232;
        background-color: #ebebeb;
        margin-right: 20px;
        padding: 8px;
    }

    .x-timeline-item-icon-node.for-end {
        z-index: 10;
        background-color: #AB8422;
    }

.x-timeline-item-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 32px;
}

.x-timeline-subitem-container {
    flex: 1;
}

.x-timeline-subitem-header {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 12px;
    display: flex;
    position: relative;
}

.x-timeline-item-opt {
    margin-top: 4px;
}

.x-timeline-subitem-title {
    margin-top: 4px;
    font-size: 14px;
    font-weight: 600;
}

.x-timeline-subitem-opt {
    position: absolute;
    top: 0%;
    bottom: auto;
    left: auto;
    right: 0%;
}

.x-timeline-item-line {
    height: 0;
    border-bottom: 1px dashed #b4b4b4;
    flex: 1;
    margin-top: 16px;
    margin-left: 12px;
    margin-right: 12px;
}

.x-timeline-item-prog-label {
    color: #555;
    background-color: #f2f4f9;
    border-radius: 24px;
    align-items: center;
    margin-left: 12px;
    padding: 8px 12px 8px 8px;
    font-weight: 600;
    display: flex;
}

    .x-timeline-item-prog-label.for-green {
        color: #06b448;
        background-color: #c9faeb;
    }

    .x-timeline-item-prog-label.for-blue {
        color: #23b4c3;
        background-color: #e3f2fd;
    }

    .x-timeline-item-prog-label.for-amber {
        color: #AB8422;
        background-color: #fde6dc;
    }

    .x-timeline-item-prog-label.for-red {
        color: #fc360c;
        background-color: #ffc8bc;
    }

.x-rsc-list-block {
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    margin-bottom: 16px;
    padding: 16px;
    box-shadow: 0 4px 12px -4px rgba(35, 43, 55, .16);
}

.x-rsc-list {
    margin-bottom: 0;
    padding-top: 8px;
}

.x-rsc-item {
    border-bottom: 1px solid #d1d1d1;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    display: flex;
}

    .x-rsc-item:hover {
        border-bottom-color: #AB8422;
    }

.x-rsc-item-thumb {
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

.x-rsc-item-opt {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    flex: none;
    align-items: center;
    display: flex;
}

.x-rsc-item-type {
    color: #878787;
}

.x-chk-list-block {
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    margin-bottom: 16px;
    padding: 16px;
    box-shadow: 0 4px 12px -4px rgba(35, 43, 55, .16);
}

.x-chk-list {
    margin-bottom: 0;
    padding-top: 8px;
}

.x-chk-item {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    border-bottom: 1px solid #d1d1d1;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    display: flex;
}

    .x-chk-item:hover {
        border-bottom-color: #AB8422;
    }

.x-chk-item-opt {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    flex: none;
    align-items: center;
    display: flex;
}

.x-comment-block {
    margin-top: 24px;
}

.x-comment-list {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    margin-bottom: 12px;
    display: grid;
}

.x-comment-item-container {
    align-items: flex-start;
    display: flex;
    word-break: break-word;
}

.x-comment-item-body {
    background-color: #f2f4f8;
    border-radius: 8px;
    flex: 1;
    margin-left: 8px;
    margin-right: 8px;
    padding: 8px;
}

.x-comment-item-user {
    font-weight: 600;
    display: inline-block;
}

    .x-comment-item-user:hover {
        text-decoration: underline;
    }

.x-comment-action {
    align-items: flex-start;
    display: flex;
}

.x-rsc-item-link {
    font-weight: 600;
}

    .x-rsc-item-link:hover {
        text-decoration: underline;
    }

.x-file-manager-opt {
    padding: 16px;
}

.x-meeting-info-block {
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    margin-bottom: 16px;
    padding: 16px;
    box-shadow: 0 4px 12px -4px rgba(35, 43, 55, .16);
}

.x-meeting-info-row {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    grid-template-rows: auto;
    grid-template-columns: 160px 1fr;
    grid-auto-columns: 1fr;
    margin-bottom: 12px;
    display: grid;
}

.x-meeting-info-minutes {
    background-color: #f2f4f8;
    border-radius: 8px;
    padding: 12px;
}

.x-people-list-block {
    flex-wrap: wrap;
    display: flex;
}

.x-people-item {
    align-items: center;
    margin-bottom: 4px;
    margin-right: 4px;
    display: flex;
}

.x-people-item-link {
    color: #fff;
    background-color: #AB8422;
    border-radius: 40px;
    align-items: center;
    padding: 2px;
    display: flex;
}

    .x-people-item-link:hover {
        color: #fff;
    }

.x-people-item-id {
    margin-left: 8px;
    margin-right: 8px;
}

.x-tenant-history-header {
    border-bottom: 1px solid #d1d1d1;
    flex: none;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    display: flex;
}

.x-tenant-history-body {
    height: 100%;
    flex: 1;
    overflow: auto;
}

.x-history-list {
    margin-bottom: 0;
}

.x-history-item {
    align-items: flex-start;
    padding: 12px 16px;
    display: flex;
    position: relative;
}

    .x-history-item:hover {
        background-color: #f2f4f8;
    }

.x-history-item-node {
    z-index: 10;
    width: 16px;
    height: 16px;
    background-color: #fff;
    border: 4px solid #b4b4b4;
    border-radius: 8px;
    margin-left: 12px;
    margin-right: 12px;
    position: relative;
}

    .x-history-item-node.for-start {
        border-width: 1px;
        border-color: #AB8422;
    }

    .x-history-item-node.for-end {
        border-width: 1px;
        border-color: #06b448;
    }

    .x-history-item-node.for-incident {
        border-color: #ffb300;
    }

.x-history-item-info {
    flex: 1;
}

.x-history-item-timestamp {
    width: 72px;
    text-align: right;
    flex: none;
}

.x-history-list-start {
    align-items: flex-start;
    padding: 24px 16px;
    display: flex;
    position: relative;
}

.x-history-list-end {
    align-items: flex-start;
    padding: 16px 16px 24px;
    display: flex;
    position: relative;
}

.x-tc-data-row {
    border-bottom: 1px solid #d1d1d1;
    align-items: flex-start;
    display: flex;
}

.x-tc-data-col {
    width: 228px;
    flex: none;
    padding-top: 24px;
    padding-bottom: 24px;
    padding-left: 24px;
}

.x-tc-data-content-col {
    max-width: 800px;
    flex: 1;
    padding: 24px;
}

.x-timeline-end {
    padding: 24px;
}

.x-input-stack-opt {
    margin-top: 8px;
}

.x-data-val {
    font-size: 14px;
    line-height: 24px;
    display: inline-block;
}

.x-brand-logo-view-block {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    align-items: flex-start;
    margin-left: -8px;
    margin-right: -8px;
    display: flex;
}

.x-brand-logo-col {
    padding-left: 8px;
    padding-right: 8px;
}

.x-um-view-block {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    background-color: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    margin-bottom: 8px;
    padding: 16px;
    display: grid;
}

.x-um-view-row {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto;
    grid-template-columns: 48px 80px 1fr;
    grid-auto-columns: 1fr;
    display: grid;
}

.x-user-update-opt {
    margin-left: 12px;
}

.x-ti-tab-wrapper {
    padding: 24px;
}

.x-opt-action-group {
    border-left: 1px solid #d1d1d1;
    padding-left: 8px;
}

.x-item-review-opt {
    margin-left: 16px;
}

.x-item-badge {
    color: #555;
    background-color: #e6e8ee;
    border-radius: 16px;
    margin-left: 12px;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 600;
}

    .x-item-badge.for-red {
        color: #fff;
        background-color: #fc360c;
    }

    .x-item-badge.for-green {
        color: #fff;
        background-color: #06b448;
    }

.x-file-review-block {
    padding: 16px;
}

.x-input-number {
    flex: 1;
    position: relative;
}

.x-input-number-btn-container {
    z-index: 10;
    flex-direction: column;
    display: flex;
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: auto;
    right: 0%;
}

.x-input-number-btn {
    color: #878787;
    border-left: 1px solid #d1d1d1;
    flex: 1;
    justify-content: center;
    align-items: center;
    padding-left: 8px;
    padding-right: 8px;
    font-family: Remix, sans-serif;
    line-height: 12px;
    transition: all .15s cubic-bezier(.77, 0, .175, 1);
    display: flex;
}

    .x-input-number-btn:hover {
        color: #323232;
        background-color: #f2f4f9;
        padding-top: 3px;
        padding-bottom: 3px;
    }

    .x-input-number-btn.for-up {
        background-color: #fff;
        border-top-right-radius: 4px;
        box-shadow: inset -1px 1px #d1d1d1;
    }

        .x-input-number-btn.for-up:hover {
            background-color: #f2f4f9;
        }

    .x-input-number-btn.for-down {
        border-bottom-right-radius: 4px;
        box-shadow: inset -1px -1px #d1d1d1;
    }

.x-um-input {
    background-color: #f2f4f8;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: -6px;
    padding: 12px 16px 16px;
    display: flex;
}

.x-um-input-units {
    width: 50%;
    flex: none;
}

.x-create-opt-grid {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    grid-auto-flow: row;
    display: grid;
}

    .x-create-opt-grid.for-process {
        grid-template-rows: auto;
        grid-template-columns: 1fr 1fr 1fr;
    }

    .x-create-opt-grid.for-2col {
        grid-template-columns: 1fr 1fr;
    }

    .x-create-opt-grid.for-4col {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

.x-create-opt-item {
    min-height: 280px;
    color: #555;
    text-align: center;
    border: 1px dashed #d1d1d1;
    border-radius: 4px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 32px;
    transition: all .25s cubic-bezier(.645, .045, .355, 1);
    display: flex;
}

    .x-create-opt-item:hover {
        color: #AB8422;
        background-color: #def6fc;
        border-color: #AB8422;
    }

    .x-create-opt-item.for-bulk {
        min-height: 0;
        flex-direction: row;
        justify-content: space-between;
        padding: 12px;
    }

.x-create-opt-thumb {
    width: 80px;
    height: 80px;
    background-color: #f2f4f9;
    border-radius: 12px;
    padding: 12px;
    transition: all .25s cubic-bezier(.645, .045, .355, 1);
}

.x-create-opt-label {
    text-align: center;
    margin-top: 16px;
    font-size: 16px;
    font-weight: 600;
}

.x-create-opt-figure {
    transition: all 2.5s cubic-bezier(.645, .045, .355, 1);
    position: relative;
}

.x-create-opt-icon {
    color: #fff;
    background-color: #AB8422;
    border-radius: 24px;
    padding: 8px;
    font-family: Remix, sans-serif;
    font-size: 16px;
    position: absolute;
    top: -12px;
    bottom: auto;
    left: -12px;
    right: auto;
    box-shadow: 0 8px 12px -4px rgba(214, 128, 91, .64);
}

.x-datatable-nav {
    z-index: 100;
    background-color: #fff2d9;
    padding: 8px 12px;
    position: relative;
}

.x-bulk-uploader-block {
    background-color: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 8px -2px rgba(35, 43, 55, .16);
}

.x-bulk-uploader-container {
    min-height: 64vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 32px;
    display: flex;
}

.x-msf-slider {
    width: 640px;
    height: auto;
    background-color: #fff;
    transition: all .25s cubic-bezier(.645, .045, .355, 1);
}

.x-msf-mask {
    height: 100%;
    border: 1px solid #d1d1d1;
    border-radius: 8px;
    display: flex;
    overflow: hidden;
}

.x-msf-slide-pane {
    width: 100%;
    height: 100%;
    background-color: #fff;
    flex: none;
    transition: all .5s cubic-bezier(.645, .045, .355, 1);
}

    .x-msf-slide-pane.for-hide {
        margin-left: -100%;
    }

.x-msf-custom-nav {
    align-items: center;
    margin-bottom: 12px;
    display: flex;
}

.x-msf-custom-nav-link {
    color: #878787;
    border-radius: 4px;
    align-items: center;
    margin-right: 8px;
    padding-right: 12px;
    font-weight: 600;
    display: flex;
}

    .x-msf-custom-nav-link.for-current {
        color: #AB8422;
    }

.x-msf-slide-container {
    padding: 32px;
}

.x-msf-slider-thumb {
    width: 100%;
    height: 240px;
    object-fit: cover;
    object-position: 50% 0%;
    margin-bottom: 12px;
    display: block;
}

.x-tds-grid-block {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    display: grid;
}

.x-tds-6-col-grid {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
}

.x-tds-card {
    background-color: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    padding: 12px;
    transition: all .25s cubic-bezier(.645, .045, .355, 1);
    position: relative;
    box-shadow: 0 0 rgba(35, 43, 55, .16);
}

    .x-tds-card:hover {
        box-shadow: 0 12px 16px -4px rgba(35, 43, 55, .16);
    }

.x-tds-card-val-row {
    color: #878787;
    align-items: center;
    margin-top: 4px;
    font-size: 10px;
    display: flex;
}

.x-tds-card-val-label {
    width: 40px;
    flex: none;
    margin-right: 12px;
    font-weight: 600;
}

    .x-tds-card-val-label.for-wide {
        width: 80px;
    }

.x-unit-span {
    margin-left: 4px;
    font-size: 10px;
    font-weight: 600;
}

.x-tds-card-opt {
    position: absolute;
    top: 8px;
    right: 8px;
}

.x-tds-pie-chart-embed {
    flex: none;
    margin-bottom: 4px;
    margin-right: 12px;
}

    .x-tds-pie-chart-embed.for-right {
        width: 24px;
        height: 24px;
        background-color: #e6e8ee;
        border-radius: 24px;
        margin-bottom: 0;
        margin-right: 0;
    }

.x-tds-row.for-overflow {
    overflow: hidden;
}

.x-tds-header {
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    display: flex;
}

.x-tds-header-h2 {
    margin-bottom: 0;
}

.x-tds-3-col-grid {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
}

.x-tds-type-blob {
    width: 16px;
    height: 16px;
    background-color: #e6e8ee;
    border-radius: 4px;
}

    .x-tds-type-blob.for-anchor {
        background-color: #AB8422;
    }

    .x-tds-type-blob.for-mini {
        background-color: #ebad93;
    }

    .x-tds-type-blob.for-specialty {
        background-color: #009688;
    }

    .x-tds-type-blob.for-wet {
        background-color: #039be5;
    }

    .x-tds-type-blob.for-fnb {
        background-color: #00bcd4;
    }

    .x-tds-type-blob.for-open {
        background-color: #9c27b0;
    }

    .x-tds-type-blob.for-red {
        background-color: #b4b4b4;
    }

    .x-tds-type-blob.for-amber {
        background-color: #ffb300;
    }

    .x-tds-type-blob.for-yellow {
        background-color: #fdd835;
    }

    .x-tds-type-blob.for-green {
        background-color: #06b448;
    }

.x-tds-card-header {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    align-items: flex-start;
    margin-bottom: 12px;
    display: flex;
}

.x-tds-phase-block {
    background-color: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    display: flex;
}

.x-tds-phase-sidebar {
    width: 160px;
    flex-direction: column;
    flex: none;
    justify-content: space-between;
    padding: 12px;
    display: flex;
}

.x-tds-phase-type-list {
    margin-bottom: 0;
}

.x-tds-phase-type-item {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    align-items: center;
    margin-top: 8px;
    display: flex;
}

    .x-tds-phase-type-item.for-breakdown {
        justify-content: space-between;
    }

.x-tds-phase-col-list {
    flex: 1;
    margin-bottom: 0;
    display: flex;
}

.x-tds-phase-col-item {
    width: 128px;
    border-left: 1px solid #d1d1d1;
    flex: 1;
    padding: 12px;
}

.x-tds-phase-col-header {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
    color: #878787;
    flex-direction: column;
    margin-bottom: 6px;
    font-weight: 600;
    display: flex;
}

.x-tds-phase-scroller {
    flex: 1;
    overflow: auto;
}

.x-tds-retail-plan-block {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    display: flex;
}

.x-tds-retail-plan-sidebar {
    width: 280px;
    border-right: 1px solid #d1d1d1;
    flex-direction: column;
    flex: none;
    transition: all .25s cubic-bezier(.645, .045, .355, 1);
    display: flex;
}

    .x-tds-retail-plan-sidebar.for-hide {
        margin-left: -281px;
    }

.x-tds-retail-plan-embed {
    flex: 1;
}

    .x-tds-retail-plan-embed.for-td-reset {
        min-height: 64px;
        display: block;
    }

.x-tds-retail-plan-dt {
    flex-direction: column;
    flex: 1;
    display: flex;
    overflow: hidden;
}

.x-tds-retail-plan-sidebar-header {
    border-bottom: 1px solid #d1d1d1;
    flex: none;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    display: flex;
}

.x-chkbox-span {
    position: relative;
}

.x-tds-retail-plan-filter {
    flex: 1;
    overflow: auto;
}

.x-filter-list-toggle {
    color: #b4b4b4;
    flex: none;
    padding: 2px;
    font-family: Remix, sans-serif;
    font-size: 16px;
    transition: all .2s cubic-bezier(.645, .045, .355, 1);
    transform: rotate(0);
}

    .x-filter-list-toggle.for-idle {
        transform: rotate(180deg);
    }

.x-filter-list-item-container {
    justify-content: space-between;
    align-items: center;
    display: flex;
}

.x-filter-sublist {
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 16px;
    display: none;
}

.x-tds-retail-plan-filter-opt {
    flex: none;
    align-items: center;
    padding: 8px 12px;
    display: flex;
}

.x-filter-group {
    border-bottom: 1px solid #d1d1d1;
    padding: 12px;
}

.x-filter-group-title {
    margin-bottom: 8px;
    font-weight: 700;
}

.x-tds-phase-label-header {
    height: 16px;
    color: #878787;
    text-transform: uppercase;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
    display: flex;
}

.x-tds-phase-type-spacer {
    height: 12px;
}

.x-tds-retail-plan-dt-header {
    border-bottom: 1px solid #d1d1d1;
    flex: none;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    display: flex;
}

.x-tds-scroller {
    flex: 1;
    overflow: auto;
}

.x-tds-grid-header {
    justify-content: space-between;
    align-items: center;
    display: flex;
}

.x-datatable-embed {
    z-index: 10;
    width: 100%;
    min-height: 160px;
    border-top: 1px solid #d1d1d1;
    position: relative;
}

    .x-datatable-embed.for-simple-list {
        min-height: 0;
        border: 1px solid #d1d1d1;
        border-radius: 4px;
        margin-bottom: 16px;
    }

.x-dialog-focus {
    border-bottom: 1px solid #d1d1d1;
    padding: 8px 16px 12px;
    position: relative;
}

.x-role-perm-block {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    flex-direction: column;
    display: flex;
}

.x-role-perm-group {
    background-color: #f2f4f8;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    padding: 8px;
}

.x-role-perm-span {
    font-weight: 400;
}

.x-datatable-select-opt {
    border-left: 1px solid transparent;
    padding-left: 8px;
}

.x-datatable-opt-block {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    align-items: center;
    display: flex;
}

.x-datatable-opt-group {
    align-items: center;
    display: flex;
}

.x-inline-text {
    margin-right: 8px;
    font-weight: 600;
}

.x-chk-edit-dot {
    width: 8px;
    height: 8px;
    background-color: #d1d1d1;
    border-radius: 8px;
    flex: none;
    margin-left: 8px;
}

.x-chk-edit-date {
    width: 148px;
    flex: none;
    align-items: center;
    display: flex;
}

.x-chk-edit-container {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    flex: 1;
    align-items: center;
    display: flex;
}

.x-tds-card-grid {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    flex-direction: column;
    margin-top: 28px;
    display: flex;
}

.x-tds-card-grid-row {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    flex: 1;
    display: flex;
}

.x-tds-card-grid-container {
    background-color: #f2f4f9;
    flex: 1;
    padding: 8px;
}

.x-tds-5-col-grid {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
}

.x-tds-retail-plan-dt-group {
    flex: 1;
}

.x-tds-retail-plan-total {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    background-color: #def6fc;
    border-bottom: 2px dashed #d1d1d1;
    align-items: center;
    padding: 8px 12px;
    display: flex;
}

.x-summary-bar {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    background-color: #f2f4f9;
    align-items: center;
    padding: 12px;
    display: flex;
}

.x-val-block {
    justify-content: space-between;
    align-items: center;
    display: flex;
    position: relative;
}

.x-copy-btn {
    color: #ebebeb;
    text-transform: uppercase;
    background-color: #b4b4b4;
    border-radius: 2px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 700;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
}

    .x-copy-btn:hover {
        color: #ebebeb;
        background-color: #878787;
    }

    .x-copy-btn:active {
        background-color: #18b4ea;
    }

.x-multi-row-val {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    flex-direction: column;
    display: flex;
}

.x-info-grid-block {
    grid-column-gap: 16px;
    grid-row-gap: 8px;
    grid-template-rows: auto;
    grid-template-columns: 168px 1fr;
    grid-auto-columns: 1fr;
    align-items: center;
    margin-top: 8px;
    display: grid;
}

.x-log-list {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex-direction: column;
    margin-bottom: 0;
    padding-bottom: 16px;
    padding-left: 16px;
    padding-right: 16px;
    display: flex;
}

.x-log-list-item {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    align-items: flex-start;
    display: flex;
}

.x-log-title {
    background-color: #fff;
    margin-bottom: 4px;
    padding: 8px 16px;
    font-weight: 700;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.x-log-timestamp {
    width: 140px;
    color: #878787;
    flex: none;
}

.x-card-body {
    background-color: #fff;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 6px 12px -4px rgba(35, 43, 55, .16);
}

.x-floor-list {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    flex-direction: column;
    margin-bottom: 12px;
    display: flex;
}

.x-floor-item {
    background-color: #f2f4f9;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    padding: 12px;
}

.x-floor-item-container {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    align-items: flex-start;
    display: flex;
}

.x-floor-item-col {
    flex: 1;
}

    .x-floor-item-col.for-sml {
        width: 80px;
        flex: none;
    }

    .x-floor-item-col.for-btn {
        flex: none;
    }

    .x-floor-item-col.for-unit {
        width: 360px;
        flex: none;
    }

    .x-floor-item-col.for-sticky {
        position: -webkit-sticky;
        position: sticky;
        top: 72px;
    }

.x-floor-lot-counter {
    color: #fff;
    background-color: #AB8422;
    align-items: center;
    padding: 8px;
    display: flex;
}

.x-avatar-link-block {
    display: flex;
}

.x-avatar-link {
    background-color: #f2f4f8;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    flex: 1;
    align-items: center;
    padding: 8px 12px 8px 8px;
    display: flex;
}

.x-val-list-header {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 700;
    display: flex;
}

.x-val-list-row {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    border-top: 1px solid #b4b4b4;
    display: flex;
}

.x-val-list-col {
    flex: 1;
    padding-top: 12px;
    padding-bottom: 12px;
}

    .x-val-list-col.for-sml {
        width: 128px;
        flex: none;
    }

.x-val-list-span {
    background-color: #f2f4f9;
    margin-top: -2px;
    margin-bottom: -2px;
    padding: 2px 6px;
    display: inline-block;
}

    .x-val-list-span.for-red {
        background-color: #fcddd0;
    }

    .x-val-list-span.for-green {
        background-color: #a7f8e0;
    }

    .x-val-list-span.for-amber {
        background-color: #fff2d9;
    }

.x-req-info-block {
    margin-bottom: 16px;
}

.x-req-data-block {
    background-color: #f2f4f9;
    border: 1px solid #d1d1d1;
    border-radius: 8px;
    padding: 16px;
}

.x-img-gallery-block {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    margin-bottom: 24px;
    display: grid;
}

.x-img-gallery-thumb {
    width: 100%;
    height: 168px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}

.x-input-char-counter {
    color: #878787;
    font-size: 10px;
}

.x-upload-thumb {
    height: 64px;
    margin-right: 12px;
}

.x-compare-grid-block {
    margin-bottom: 16px;
}

.x-compare-grid-container {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    display: flex;
}

.x-compare-grid-list {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    flex-direction: column;
    margin-top: 8px;
    margin-bottom: 0;
    display: flex;
}

.x-compare-grid-col {
    border-left: 2px solid #d1d1d1;
    flex: 1;
    padding-left: 8px;
}

    .x-compare-grid-col.for-current {
        border-left-color: rgba(249, 90, 78, .5);
    }

    .x-compare-grid-col.for-change {
        border-left-color: rgba(8, 193, 138, .5);
    }

.x-compare-grid-header {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    display: flex;
}

.x-input-uploader {
    background-color: #f2f4f8;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    padding: 8px;
}

.x-dash-grid-container {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    flex-direction: column;
    display: flex;
}

.x-dash-grid-row {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    display: flex;
}

.x-dash-grid-slider {
    width: 560px;
    height: 360px;
    flex: none;
}

.x-dash-action-block {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    flex-direction: column;
    flex: 1;
    display: flex;
}

.x-dash-action-list {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    flex-direction: column;
    flex: 1;
    margin-bottom: 0;
    display: flex;
}

.x-dash-action-list-item {
    background-color: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    padding-left: 40px;
    position: relative;
}

.x-dash-action-container {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 8px;
    display: flex;
}

.x-dash-action-info {
    flex: 1;
}

.x-announcement-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.x-announcement-badge {
    color: #fff;
    text-transform: uppercase;
    background-color: #555;
    padding: 4px 6px;
    font-size: 10px;
    font-weight: 700;
    line-height: 10px;
    position: absolute;
    top: -10px;
    bottom: auto;
    left: 16px;
    right: auto;
}

.x-dash-timeline-block {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    background-color: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    flex-direction: column;
    flex: 1;
    padding: 16px;
    display: flex;
}

.x-dash-timeline-list {
    margin-bottom: 0;
}

.x-dash-timeline-list-item {
    position: relative;
}

.x-dash-timeline-link {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    color: #555;
    align-items: center;
    padding: 8px;
    display: flex;
}

    .x-dash-timeline-link:hover {
        color: #323232;
        background-color: #f2f4f8;
    }

.x-dash-timeline-label {
    flex: 1;
}

.x-dash-timeline-val {
    text-align: right;
    flex: none;
}

.x-dash-timeline-status {
    width: 96px;
    color: #878787;
    text-align: right;
    flex: none;
    justify-content: flex-end;
    align-items: center;
    font-weight: 600;
    display: flex;
}

    .x-dash-timeline-status.for-amber {
        color: #ffb300;
    }

    .x-dash-timeline-status.for-green {
        color: #06b448;
    }

.x-dash-list-block {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    background-color: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    flex-direction: column;
    flex: 1;
    padding: 16px;
    /*display: flex;*/
    box-shadow: 0 3px 6px -2px rgba(35, 43, 55, .16);
}

.x-dash-list {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    flex-direction: column;
    flex: 1;
    margin-bottom: 0;
    /*display: flex;*/
}

.x-dash-list-link {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    align-items: center;
    display: flex;
}

.x-dash-list-icon {
    width: 32px;
    height: 32px;
    color: #878787;
    background-color: #f2f4f9;
    border-radius: 40px;
    justify-content: center;
    align-items: center;
    font-family: Remix, sans-serif;
    font-size: 16px;
    display: flex;
}

    .x-dash-list-icon.for-request {
        color: #23b4c3;
        background-color: #e3f2fd;
    }

    .x-dash-list-icon.for-report {
        color: #fc360c;
        background-color: #def6fc;
    }

.x-dash-list-info {
    flex: 1;
}

.x-dash-list-status {
    color: #555;
    background-color: #e6e8ee;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 10px;
    font-weight: 600;
}

.x-dash-grid-card {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
    background-color: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    flex-direction: column;
    flex: 1;
    padding: 12px;
    display: flex;
    position: relative;
    box-shadow: 0 3px 6px -2px rgba(35, 43, 55, .16);
}

    .x-dash-grid-card.for-group {
        grid-column-gap: 12px;
        grid-row-gap: 12px;
        overflow: hidden;
    }

.x-dash-grid-card-flex {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    display: flex;
}

    .x-dash-grid-card-flex.for-overflow {
        overflow: auto;
    }

.x-dash-grid-card-col {
    min-width: 88px;
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    flex-direction: column;
    flex: 1;
    display: flex;
}

.x-dash-grid-card-opt {
    position: absolute;
    top: 12px;
    right: 12px;
}

.x-dash-timeline-blob {
    width: 16px;
    height: 16px;
    background-color: #d1d1d1;
    border-radius: 4px;
}

  .x-dash-timeline-blob.for-0 {
    display: none;
  }

  .x-dash-timeline-blob.for-1 {
    background-color: #e91e63;
  }

  .x-dash-timeline-blob.for-2 {
    background-color: #8e24aa;
  }

  .x-dash-timeline-blob.for-3,
  .x-dash-timeline-blob.for-4 {
    background-color: #5e35b1;
  }

  .x-dash-timeline-blob.for-5,
  .x-dash-timeline-blob.for-6 {
    background-color: #1e88e5;
  }

  .x-dash-timeline-blob.for-7 {
    background-color: #26a69a;
  }

  .x-dash-timeline-blob.for-8 {
    background-color: #ff9800;
  }

  .x-dash-timeline-blob.for-9,
  .x-dash-timeline-blob.for-10 {
    background-color: #795548;
  }

  .x-dash-timeline-blob.for-11 {
    background-color: #4caf50;
  }

.x-dash-breakdown-block {
    height: 24px;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    display: flex;
    overflow: hidden;
}

.x-dash-breakdown-bar {
    min-width: 4px;
    background-color: #ebebeb;
    flex: 0 auto;
}

    .x-dash-breakdown-bar.for-1 {
        background-color: #e91e63;
    }

    .x-dash-breakdown-bar.for-2 {
        background-color: #8e24aa;
    }

    .x-dash-breakdown-bar.for-3 {
        background-color: #5e35b1;
    }

    .x-dash-breakdown-bar.for-4 {
        background-color: #1e88e5;
    }

    .x-dash-breakdown-bar.for-5 {
        background-color: #26a69a;
    }

    .x-dash-breakdown-bar.for-6 {
        background-color: #ff9800;
    }

    .x-dash-breakdown-bar.for-7 {
        background-color: #795548;
    }

    .x-dash-breakdown-bar.for-8 {
        background-color: #4caf50;
        flex: 1;
    }

.x-blob-bg {
    z-index: 0;
    position: fixed;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
}
.x-blob-pastel-grey {
    width: 160px;
    height: 160px;
    filter: blur(128px);
    background-color: #EBEBEB;
    position: absolute;
    bottom: 8%;
    left: 6%;
}

.x-blob-lime {
    width: 160px;
    height: 160px;
    filter: blur(128px);
    background-color: #d4e157;
    position: absolute;
    bottom: 8%;
    left: 6%;
}

.x-blob-teal {
    width: 240px;
    height: 240px;
    filter: blur(240px);
    background-color: #00bcd4;
    position: absolute;
    bottom: 24%;
    left: 30%;
}

.x-blob-green {
    width: 160px;
    height: 160px;
    filter: blur(128px);
    background-color: #4caf50;
    position: absolute;
    bottom: 10%;
    left: 64%;
}

.x-imp-overlay {
    z-index: 9800;
    max-width: 360px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background-color: rgba(255, 255, 255, .8);
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    flex-direction: column;
    transition: all .25s cubic-bezier(.645, .045, .355, 1);
    display: flex;
    position: fixed;
    top: 80px;
    bottom: 16px;
    right: 16px;
    transform: translate(0);
    box-shadow: 0 4px 12px rgba(35, 43, 55, .16);
}

    .x-imp-overlay.for-hide {
        transform: translate(120%);
    }

.x-imp-wrapper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.x-imp-ov-grid {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    flex-direction: column;
    display: flex;
}

.x-imp-ov-row {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    align-items: flex-start;
    display: flex;
}

    .x-imp-ov-row.for-badge {
        align-items: center;
    }

.x-imp-ov-label {
    width: 96px;
    flex: none;
    font-weight: 600;
}

.x-imp-ov-close-btn {
    color: #878787;
    background-color: #f2f4f9;
    border-bottom: 1px solid #d1d1d1;
    border-left: 1px solid #d1d1d1;
    border-top-right-radius: 4px;
    padding: 12px;
    font-family: Remix, sans-serif;
    font-size: 16px;
    display: block;
    position: absolute;
    top: 0%;
    bottom: auto;
    left: auto;
    right: 0%;
}

    .x-imp-ov-close-btn:hover {
        color: #fc360c;
        background-color: #fff;
    }

.x-imp-ov-header {
    border-bottom: 1px solid #d1d1d1;
    flex: none;
    align-items: center;
    padding: 12px;
    font-weight: 700;
    display: flex;
}

.x-imp-ov-scroller {
    flex: 1;
    padding: 12px;
    overflow: auto;
}

.x-imp-ov-shopfront {
    margin-bottom: 16px;
    position: relative;
}

.x-imp-ov-shopfront-img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
    position: relative;
}

.x-imp-ov-shopfront-opt {
    position: absolute;
    bottom: 8px;
    left: 8px;
}

.x-imp-ov-opt {
    border-bottom: 1px solid #d1d1d1;
    flex: none;
    padding: 12px;
}

.x-inspect-gal-list {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    flex-direction: column;
    margin-bottom: 12px;
    display: flex;
}

    .x-inspect-gal-list.for-siteprog {
        grid-column-gap: 2px;
        grid-row-gap: 2px;
        border-radius: 4px;
        flex-flow: wrap;
        margin-bottom: 0;
        overflow: hidden;
    }

.x-inspect-gal-list-item {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    background-color: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    align-items: flex-start;
    display: flex;
    overflow: hidden;
}

    .x-inspect-gal-list-item.for-siteprog {
        width: 48px;
        height: 48px;
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        border-style: none;
        border-radius: 0;
        flex: none;
    }

    .x-inspect-gal-list-item.for-siteprog-edit {
        width: 32px;
        height: 32px;
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        border-style: none;
        border-radius: 0;
        flex: none;
        position: relative;
    }

.x-inspect-gal-link {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    flex: 1;
    align-items: center;
    display: flex;
}

.x-inspect-gal-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    flex: none;
    display: block;
}

    .x-inspect-gal-thumb.for-edit {
        width: 320px;
        height: 260px;
    }

    .x-inspect-gal-thumb.for-siteprog {
        width: 100%;
        height: 100%;
    }

.x-inspect-gal-title {
    color: #555;
}

.x-imp-ov-footer {
    border-top: 1px solid #d1d1d1;
    flex: none;
    padding: 8px 12px;
    font-size: 10px;
}

.x-inspect-gal-opt {
    flex: none;
    padding-top: 4px;
    padding-right: 4px;
    display: flex;
}

.x-trade-date-block {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    align-items: center;
    display: flex;
}

.x-input-single-uploader {
    max-width: 240px;
    background-color: #f2f4f9;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    padding: 6px;
}

.x-risk-status-block {
    border: 1px solid #d1d1d1;
    border-radius: 24px;
    align-items: center;
    margin-left: 16px;
    font-size: 10px;
    display: flex;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(35, 43, 55, .16);
}

.x-risk-status-label {
    background-color: #e6e8ee;
    border-right: 1px solid #d1d1d1;
    padding: 8px 8px 8px 12px;
    font-weight: 600;
}

.x-risk-status-val {
    background-color: #fff;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    font-weight: 700;
}

.x-risk-status-btn {
    color: #878787;
    background-color: #fff;
    padding: 8px;
    font-family: Remix, sans-serif;
    font-size: 16px;
}

    .x-risk-status-btn:hover {
        color: #323232;
    }

.x-accordion-container {
    display: none;
}

.x-accordion-toggle {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    color: #555;
    align-items: center;
    display: flex;
}

    .x-accordion-toggle.for-appnav {
        color: #b4b4b4;
        border-radius: 4px;
        margin-left: 24px;
        padding: 8px;
        font-weight: 600;
    }

        .x-accordion-toggle.for-appnav:hover {
            color: #323232;
            background-color: #f2f4f8;
        }

.x-datatable-input {
    width: 96px;
    position: relative;
}

    .x-datatable-input.for-reset {
        width: auto;
    }

.x-file-preview-block {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    background-color: #f2f4f9;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    align-items: center;
    padding: 8px;
    display: flex;
}

.x-file-preview-container {
    flex: 1;
}

.x-file-uploader-container {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex-direction: column;
    display: flex;
}

.x-faq-block {
    background-color: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    box-shadow: 0 3px 8px -2px rgba(35, 43, 55, .16);
}

.x-faq-list {
    margin-bottom: 0;
}

.x-faq-list-item {
    border-top: 1px solid #d1d1d1;
    padding: 16px;
}

.x-faq-question {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
}

.x-faq-answer {
    margin-bottom: 0;
    padding: 16px;
}

.x-faq-cat {
    text-align: center;
    background-color: #d1d1d1;
    border-radius: 4px;
    padding: 6px;
    font-size: 10px;
    font-weight: 600;
    line-height: 12px;
}

.x-faq-list-item-container {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    flex-direction: column;
    flex: 1;
    align-items: flex-start;
    display: flex;
}

.x-faq-info {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    align-items: center;
    display: flex;
}

.x-file-list-action {
    background-color: #fff2d9;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    display: flex;
}

.x-progress-bar {
    height: 6px;
    background-color: #e6e8ee;
    border-radius: 4px;
    flex: none;
    margin-top: 6px;
    margin-bottom: 6px;
}

    .x-progress-bar.for-reset {
        margin-top: 0;
        margin-bottom: 0;
    }

.x-progress-bar-filler {
    width: 2.5%;
    height: 100%;
    min-width: 8px;
    background-image: linear-gradient(to right, #AB8422, #23b4c3);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(35, 180, 195, .64);
}

    .x-progress-bar-filler:hover {
        background-color: #18b4ea;
    }

.x-dash-grid-data {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
    align-items: center;
    display: flex;
}

.x-dash-grid-data-span {
    width: 28px;
    color: #fff;
    text-align: center;
    background-color: #06b448;
    border-radius: 4px;
    flex: none;
    padding-left: 6px;
    padding-right: 6px;
    font-size: 10px;
    font-weight: 600;
}

    .x-dash-grid-data-span.for-red {
        background-color: #fc360c;
    }

.x-dash-grid-chart {
    width: 28px;
    height: 28px;
    background-color: #e6e8ee;
    border-radius: 24px;
    flex: none;
}

.x-upload-progbar {
    background-color: #ffb300;
    padding: 12px;
    display: none;
}

.x-upload-progbar-line {
    width: 40px;
    height: 1px;
    background-color: #323232;
    flex: none;
}

.x-upload-progbar-labe {
    align-items: center;
    display: flex;
}

.x-upload-progbar-container {
    justify-content: center;
    align-items: center;
    display: flex;
}

.x-inspect-gal-upload-header {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    grid-template-rows: auto;
    grid-auto-columns: 1fr;
    padding-left: 28px;
    padding-right: 40px;
    display: grid;
}

.x-inspect-gal-edit {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    align-items: flex-start;
    display: flex;
}

.x-inspect-gal-edit-info {
    flex: 1;
}

.x-phase-status-block {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    align-items: center;
    display: flex;
}

.x-phase-status-icon {
    flex: none;
    font-family: Remix, sans-serif;
    font-size: 16px;
}

    .x-phase-status-icon.is-idle {
        color: #fc360c;
    }

    .x-phase-status-icon.is-started {
        color: #23b4c3;
    }

    .x-phase-status-icon.is-done {
        color: #06b448;
    }

.x-tenancy-plan-opt {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    flex: 1;
    display: flex;
}

.x-tenancy-plan-input-row {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    align-items: center;
    display: flex;
}

.x-doc-viewer-block {
    background-color: #fcfcfc;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    display: flex;
}

.x-doc-viewer-zone {
    width: 100%;
    flex: 1;
}

.x-dash-grid-h2 {
    margin-bottom: 0;
    font-size: 16px;
    line-height: 24px;
}

.x-dash-grid-group {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
    background-color: #f2f4f8;
    border-radius: 4px;
    flex-direction: column;
    flex: 1;
    padding: 12px;
    display: flex;
    overflow: hidden;
}

.x-dash-grid-group-flex {
  grid-gap: 12px;
  display: grid;
}

@media(min-width:768px) {
  .x-dash-grid-group-flex {
    display: flex;
  }
}

.x-tds-forecast-block {
    background-color: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    overflow: hidden;
}

.x-tds-forecast-header {
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    display: flex;
}

.x-tds-forecast-scroller {
    overflow: auto;
}

.x-tds-forecast-container {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    padding: 16px;
    display: flex;
}

.x-tds-forecast-col {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    flex-direction: column;
    flex: 1;
    align-items: center;
    display: flex;
}

.x-tds-forecast-prog-col {
    width: 32px;
    height: 160px;
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    text-align: center;
    flex-direction: column;
    display: flex;
}

.x-tds-forecast-progbar {
    width: 100%;
    background-color: #f2f4f8;
    border-radius: 8px;
    flex-direction: column;
    flex: 1;
    justify-content: flex-end;
    display: flex;
    overflow: hidden;
}

.x-tds-forecast-prog-val {
    color: #fff;
    background-color: #878787;
    border-radius: 8px;
    flex: none;
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 10px;
    font-weight: 600;
}

    .x-tds-forecast-prog-val.for-actual {
        background-color: #06b448;
    }

    .x-tds-forecast-prog-val.for-forecast {
        background-color: #ffb300;
    }

    .x-tds-forecast-prog-val.for-progress {
        background-color: #18b4ea;
    }

.x-tds-forecast-progfill {
    width: 100%;
    min-height: 4%;
    background-color: #b4b4b4;
    flex: none;
}

    .x-tds-forecast-progfill.for-actual {
        background-color: #06b448;
    }

    .x-tds-forecast-progfill.for-progress {
        background-color: #18b4ea;
    }

    .x-tds-forecast-progfill.for-forecast {
        background-color: #ffb300;
    }

.x-tds-forecast-col-group {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    flex: 1;
    display: flex;
}

.x-tds-forecast-col-title {
    text-align: center;
    flex: none;
    font-weight: 700;
}

.x-legend-info-block {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    align-items: center;
    display: flex;
}

.x-legend-info-item {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
    flex: none;
    align-items: center;
    display: flex;
}

.x-legend-info-marker {
    width: 16px;
    height: 16px;
    background-color: #d1d1d1;
    border-radius: 4px;
}

    .x-legend-info-marker.for-actual {
        background-color: #06b448;
    }

    .x-legend-info-marker.for-progress {
        background-color: #18b4ea;
    }

    .x-legend-info-marker.for-forecast {
        background-color: #ffb300;
    }

.x-tds-fc-stack {
    width: 296px;
    flex-direction: column;
    flex: 1;
    display: flex;
}

.x-tds-fc-stack-progbar {
    height: 96px;
    background-color: #f2f4f8;
    border-radius: 4px;
    flex-direction: column;
    flex: none;
    justify-content: flex-end;
    display: flex;
    position: relative;
    overflow: hidden;
}

.x-tds-fc-stack-progfill {
    height: 8%;
    min-height: 8px;
    background-color: #def6fc;
    flex-direction: column;
    flex: none;
    justify-content: flex-end;
    display: flex;
}

.x-tds-fc-stack-progact {
    height: 8%;
    min-height: 4px;
    background-image: linear-gradient(to right, #AB8422, #23b4c3);
    flex: none;
}

.x-tds-fc-stack-label {
    color: #fff;
    text-shadow: 0 1px 4px rgba(35, 43, 55, .64);
    font-size: 16px;
    font-weight: 700;
    position: absolute;
    bottom: 12px;
    left: 12px;
}

.x-tds-fc-stack-card {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    flex-direction: column;
    flex: 1;
    padding: 12px;
    display: flex;
}

.x-tds-fc-stack-container {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    display: flex;
}

.x-tds-fc-stack-chart {
    background-color: #f2f4f9;
    border-radius: 80px;
    position: relative;
}

.x-tds-fc-stack-info {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    flex-direction: column;
    flex: 1;
    display: flex;
}

.x-tds-fc-stack-info-row {
    justify-content: space-between;
    align-items: center;
    display: flex;
}

.x-tds-fc-stack-embed {
    z-index: 0;
    position: relative;
}

.x-tds-fc-stack-chart-val {
    z-index: 10;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
}

.x-status-span {
    color: #878787;
}

    .x-status-span.for-green {
        color: #06b448;
    }

    .x-status-span.for-red {
        color: #fc360c;
    }

.x-ho-date-grid {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    background-color: #f2f4f9;
    border: 1px solid #d1d1d1;
    border-radius: 8px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    padding: 8px;
    display: grid;
}

.x-ti-control-block {
    border-bottom: 1px solid #d1d1d1;
}

.x-ti-control-header {
    align-items: center;
    padding: 12px 16px;
    display: flex;
}

.x-ti-control-flex {
    display: flex;
}

.x-ti-control-col {
    flex: 1;
    padding: 16px 24px;
}

.x-sprog-list {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    flex-direction: column;
    margin-bottom: 12px;
    display: flex;
}

.x-sprog-item {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    flex-direction: column;
    padding-left: 16px;
    display: flex;
    position: relative;
}

.x-sprog-header {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    align-items: center;
    display: flex;
}

.x-sprog-info {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    padding-left: 88px;
    display: flex;
}

.x-sprog-label {
    width: 80px;
    color: #878787;
    flex: none;
}

.x-sprog-progress {
    flex: 1;
}

.x-sprog-copy-col {
    background-color: #f2f4f9;
    border-radius: 4px;
    flex: 1;
    padding: 8px;
}

.x-sprog-gal-col {
    max-width: 248px;
    flex: 0 auto;
}

.x-sprog-val {
    width: 32px;
    text-align: right;
    flex: none;
}

.x-tc-assign-block {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    white-space: nowrap;
    background-color: #f2f4f8;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    align-items: center;
    margin-bottom: 16px;
    padding: 8px 8px 8px 12px;
    display: flex;
}

.x-tc-assign-setting {
    flex: 1;
}

.x-tc-assign-cat, .x-tc-assign-fitout {
    display: none;
}

.x-tc-assign-container {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    align-items: center;
    display: flex;
}

.x-form-tc-setting {
    height: 32px;
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    background-color: #f2f4f9;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    justify-content: space-between;
    align-items: center;
    padding: 4px;
    display: flex;
}

.x-form-tc-group {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    align-items: center;
    display: flex;
}

.x-input-dt-select {
    height: 24px;
    background-color: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    margin-bottom: 0;
    padding: 0;
    font-size: 12px;
}

    .x-input-dt-select:hover {
        border-color: #323232;
    }

    .x-input-dt-select:focus {
        border-color: #AB8422;
    }

    .x-input-dt-select.for-sl-single {
        min-width: 96px;
    }

        .x-input-dt-select.for-sl-single.is-filter {
            width: 128px;
            flex: none;
        }

        .x-input-dt-select.for-sl-single.is-option {
            width: 160px;
        }

        .x-input-dt-select.for-sl-single.is-small {
            width: 64px;
            min-width: 0;
        }

        .x-input-dt-select.for-sl-single.is-user {
            width: 128px;
            flex: none;
        }

    .x-input-dt-select.for-sl-search {
        min-width: 160px;
    }

        .x-input-dt-select.for-sl-search.is-filter {
            min-width: 224px;
        }

.x-form-tc-no-block {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    color: #06b448;
    background-color: #fff;
    border: 1px solid #06b448;
    border-radius: 4px;
    align-items: center;
    padding: 8px;
    display: flex;
}

.x-ti-req-check-block {
    border-bottom: 1px solid #d1d1d1;
    padding: 16px;
}

.x-ti-req-check-list {
    flex-direction: column;
    margin-bottom: 0;
    display: flex;
}

.x-ti-req-check-item {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    align-items: center;
    padding: 8px 8px 8px 32px;
    display: flex;
    position: relative;
}

.x-inspect-review-block {
    border-left: 2px solid #ffb300;
    margin-bottom: 12px;
    padding-left: 12px;
}

.x-inspect-review-info {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    display: flex;
}

.x-inspect-review-info-col {
    flex: 1;
}

.x-inspect-review-gal-col {
    width: 248px;
    flex: none;
}

.x-inspect-review-header {
    align-items: center;
    margin-bottom: 12px;
    display: flex;
}

    .x-inspect-review-header.for-edit {
        grid-column-gap: 8px;
        grid-row-gap: 8px;
        justify-content: space-between;
    }

.x-assign-info-block {
    background-color: #f2f4f8;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    margin-bottom: 16px;
    padding: 12px;
}

.x-assign-info-flex {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    display: flex;
}

.x-doc-viewer-container {
    height: 100%;
    flex-direction: column;
    display: flex;
}

.x-search-reco-block {
    background-color: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    display: none;
    position: absolute;
    top: 36px;
    left: 0%;
    right: 0%;
    overflow: hidden;
    box-shadow: 0 4px 12px -2px rgba(35, 43, 55, .16);
}

.x-search-reco-header {
    flex: none;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    display: flex;
}

.x-search-reco-content {
    flex: 1;
    overflow: auto;
}

.x-search-reco-group {
    border-top: 1px solid #d1d1d1;
}

.x-search-reco-group-list {
    margin-bottom: 0;
}

.x-search-reco-group-container {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    align-items: flex-start;
    padding: 12px;
    display: flex;
}

    .x-search-reco-group-container:hover {
        background-color: #f2f4f8;
    }

.x-search-reco-group-link {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    align-items: flex-start;
    padding: 12px;
    display: flex;
}

    .x-search-reco-group-link:hover {
        background-color: #f2f4f8;
    }

.x-search-reco-group-thumb {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 2px 3px rgba(35, 43, 55, .16);
}

.x-search-reco-group-info {
    flex: 1;
}

.x-search-reco-simple-link {
    justify-content: space-between;
    align-items: center;
    display: flex;
}

.x-search-reco-group-header {
    justify-content: space-between;
    align-items: center;
    padding-top: 6px;
    padding-left: 12px;
    padding-right: 12px;
    display: flex;
}

.x-search-reco-wrapper {
    max-height: 50vh;
    flex-direction: column;
    display: flex;
}

.x-history-item-btn {
    color: #b4b4b4;
    font-family: Remix, sans-serif;
    font-size: 16px;
    position: absolute;
    top: 12px;
    right: 8px;
}

    .x-history-item-btn:hover {
        color: #fc360c;
    }

.x-var-list {
    flex-direction: column;
    margin-bottom: 0;
    display: flex;
}

.x-var-list-item {
    border-bottom: 1px solid #d1d1d1;
    margin-bottom: 12px;
    padding-bottom: 12px;
}

.x-var-list-container {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    align-items: flex-start;
    display: flex;
}

.x-var-list-timestamp {
    width: 128px;
    flex: none;
}

.x-var-list-info {
    flex: 1;
    position: relative;
}

.x-var-list-opt {
    position: absolute;
    top: 0%;
    bottom: auto;
    left: auto;
    right: 0%;
}

.x-map-block {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.x-map-embed {
    flex: 1;
}

.x-map-dir-sidebar {
    width: 280px;
    border-right: 1px solid #d1d1d1;
    flex-direction: column;
    flex: none;
    display: flex;
}

.x-map-dir-header {
    border-bottom: 1px solid #d1d1d1;
    flex: none;
    padding: 12px;
}

.x-map-dir-body {
    flex: 1;
    overflow: auto;
}

.x-map-dir-search {
    display: flex;
    position: relative;
}

.x-map-dir-floor-list, .x-map-dir-unit-list {
    margin-bottom: 0;
}

.x-map-dir-unit-item {
    border-bottom: 1px solid #d1d1d1;
}

.x-map-dir-floor-container {
    z-index: 10;
    background-color: #fff;
    border-bottom: 1px solid #d1d1d1;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    display: flex;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.x-map-dir-unit-link {
    color: #878787;
    background-color: #f2f4f9;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    display: flex;
}

    .x-map-dir-unit-link:hover {
        color: #323232;
        background-color: #fcfcfc;
    }

    .x-map-dir-unit-link.for-active {
        color: #AB8422;
        background-color: #fff;
    }

.x-map-dir-floor-opt {
    color: #878787;
    display: flex;
}

.x-map-dir-unit-name {
    max-width: 88px;
    white-space: nowrap;
    flex: none;
    overflow: hidden;
}

.x-ms-form {
    width: 100%;
    height: 100%;
}

.x-input-site-prog-gal {
    width: 240px;
    flex: none;
    align-items: stretch;
    display: flex;
}

.x-input-site-prog-gal-btn {
    width: 32px;
    color: #878787;
    background-color: #f2f4f8;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    flex: none;
    justify-content: center;
    align-items: center;
    margin-left: 2px;
    font-family: Remix, sans-serif;
    font-size: 16px;
    display: flex;
}

    .x-input-site-prog-gal-btn:hover {
        color: #323232;
        background-color: #f2f4f9;
        border-color: #323232;
    }

.x-inspect-gal-delete {
    z-index: 10;
    width: 16px;
    height: 16px;
    color: #fc360c;
    background-color: rgba(255, 255, 255, .8);
    justify-content: center;
    align-items: center;
    font-family: Remix, sans-serif;
    line-height: 12px;
    display: flex;
    position: absolute;
    top: 0;
    bottom: auto;
    left: auto;
    right: 0%;
}

    .x-inspect-gal-delete:hover {
        color: #fff;
        background-color: #fc360c;
    }

.x-tds-phase-total {
    border-top: 1px solid #d1d1d1;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding-top: 8px;
    display: flex;
}

.x-dash-timeline-group {
    width: 400px;
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    flex: none;
    grid-template-rows: auto;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-columns: 1fr;
    display: grid;
}

.x-dash-timeline-header {
    color: #878787;
    justify-content: space-between;
    margin-bottom: -8px;
    padding-left: 8px;
    padding-right: 8px;
    display: flex;
}

.x-dash-timeline-icon {
    color: #06b448;
    margin-right: 4px;
}

    .x-dash-timeline-icon.for-red, .x-dash-grid-card-val.for-red {
        color: #fc360c;
    }

.x-dash-grid-card-val.for-green {
    color: #06b448;
}

.x-rsc-item-stage-block {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    background-color: #f2f4f9;
    border-radius: 24px;
    align-items: center;
    padding: 4px 8px 4px 4px;
    display: flex;
}

    .x-rsc-item-stage-block.for-legend {
        background-color: rgba(0, 0, 0, 0);
        padding: 0;
    }

.x-rsc-item-stage-phase {
    width: 14px;
    height: 14px;
    color: #fff;
    text-align: center;
    cursor: help;
    background-color: #d1d1d1;
    border-radius: 24px;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    line-height: 10px;
    display: flex;
}

    .x-rsc-item-stage-phase.for-green {
        background-color: #06b448;
    }

    .x-rsc-item-stage-phase.for-red {
        background-color: #fc360c;
    }

.x-rsc-item-stage-val {
    margin-left: 4px;
}

.x-rsc-sub-block {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    flex-direction: column;
    display: flex;
}

.x-rsc-sub-list {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    flex-direction: column;
    margin-bottom: 0;
    display: flex;
}

.x-rsc-sub-item {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    flex-direction: column;
    padding: 13px 12px;
    display: flex;
    position: relative;
}

.x-rsc-sub-header, .x-rsc-sub-item-header, .x-rsc-sub-item-action {
    justify-content: space-between;
    align-items: center;
    display: flex;
}

.x-rsc-sub-item-group-title {
    color: #878787;
}

.x-tds-line-chart {
    min-height: 168px;
    flex: 1;
}

.x-file-ver-badge {
    color: #AB8422;
    background-color: #def6fc;
    border-radius: 24px;
    margin-left: 6px;
    padding-left: 6px;
    padding-right: 6px;
    font-size: 10px;
}

    .x-file-ver-badge.for-green {
        color: #06b448;
        background-color: #ebfcde;
    }

.x-unit-list-block {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    flex-direction: column;
    display: flex;
}

.x-unit-list {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    flex-direction: column;
    margin-bottom: 0;
    display: flex;
}

.x-unit-item {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    align-items: center;
    display: flex;
    position: relative;
}

.x-unit-item-opt {
    border: 1px solid #d1d1d1;
    border-radius: 2px;
    flex: none;
    align-items: stretch;
    display: flex;
    position: absolute;
    top: 4px;
    right: 4px;
    overflow: hidden;
}

.x-unit-item-opt-btn {
    color: #878787;
    background-color: #fcfcfc;
    justify-content: center;
    align-items: center;
    padding: 3px 4px;
    font-family: Remix, sans-serif;
    display: flex;
}

    .x-unit-item-opt-btn:hover {
        color: #323232;
        background-color: #f2f4f8;
    }

.x-unit-item-add-btn {
    color: #878787;
    background-color: #fcfcfc;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    flex-direction: row;
    flex: 1;
    justify-content: center;
    align-items: center;
    padding-top: 4px;
    padding-bottom: 4px;
    font-family: Remix, sans-serif;
    font-size: 16px;
    display: flex;
}

    .x-unit-item-add-btn:hover {
        color: #323232;
        background-color: #f2f4f8;
    }

.x-broken-list {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    flex-direction: column;
    margin-bottom: 0;
    display: flex;
}

.x-broken-item {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    background-color: #f2f4f9;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    align-items: center;
    padding: 4px 4px 4px 12px;
    display: flex;
}

.x-broken-item-opt {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    align-items: center;
    display: flex;
}

.x-broken-item-opt-label {
    flex: none;
    margin-bottom: 0;
}

.x-unit-item-col {
    flex: 1;
    position: relative;
}

    .x-unit-item-col.for-size {
        max-width: 128px;
    }

@media screen and (max-width: 991px) {
    .x-full-wrapper.for-side.is-full {
        flex-direction: column;
    }

    .x-access-col {
        padding: 24px;
    }

    .x-brand-col {
        height: 32%;
        flex: none;
    }

    .x-input-text.for-quick-search {
        width: 160px;
    }

    .x-emp-text.for-lval {
        font-size: 24px;
        line-height: 32px;
    }

    .x-brand-logo {
        height: 24px;
    }

    .x-brand-block {
        top: 16px;
        left: 16px;
    }

    .x-master {
        padding-top: 16px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .x-header {
        margin-bottom: 16px;
    }

    .x-input-select.for-sl-search.is-filter {
        min-width: 180px;
    }

    .x-quick-filter-menu {
        display: none;
    }

    .x-slider-arrow {
        bottom: 16px;
        right: 16px;
    }

        .x-slider-arrow.for-left {
            right: 56px;
        }

    .x-slider-pane-content {
        padding: 16px;
        bottom: 72px;
        right: 16px;
    }

    .x-breadcrumb {
        display: none;
    }

    .x-statsum-block {
        flex-direction: column;
        margin-bottom: 16px;
    }

    .x-statsum-col {
        width: auto;
        flex: 1;
        padding: 8px;
    }

    .x-statsum-total {
        border-bottom: 1px solid #d1d1d1;
        padding: 8px;
    }

    .x-datatable-view-toggle {
        display: none;
    }

    .x-imp-legend-col {
        width: 100%;
        flex-wrap: wrap;
    }

    .x-tds-6-col-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .x-tds-3-col-grid {
        grid-template-columns: 1fr;
    }

    .x-tds-phase-col-item {
        flex: none;
    }

    .x-dash-grid-row {
        flex-direction: column;
    }

    .x-dash-grid-slider {
        width: 100%;
    }

    .x-dash-grid-card-flex {
        flex-wrap: wrap;
    }

    .x-dash-grid-card-col {
        min-width: 128px;
    }

    .x-imp-overlay {
        top: 8px;
        bottom: 8px;
        right: 8px;
    }

    .x-imp-ov-footer {
        display: none;
    }
}

@media screen and (max-width: 479px) {
    .x-input-tac {
        grid-column-gap: 8px;
        grid-row-gap: 8px;
    }
}

#w-node-_68fb068a-4348-c5bc-75d2-b9fb79434edf-08bd6d2e, #w-node-c28e7f74-e80d-8444-fd71-5240278ec85a-40bd6d62, #w-node-_09de774b-b0f3-611a-ac33-25d134724b8d-40bd6d62, #w-node-_7d4980ba-6d9b-07f3-5c77-900f61c09ad2-40bd6d62, #w-node-_3890ab6c-5f3f-0475-0533-2c69e72df8d1-40bd6d62, #w-node-_87f00d22-e878-f5e6-e1b5-87873f9f74f3-40bd6d62, #w-node-c5f8ff8d-11f4-feb6-b796-2e48af0b1704-40bd6d62, #w-node-_2db48ccd-7925-fae2-c08d-3403873a7fcf-83bd6d79, #w-node-_55fd86b7-d0de-758b-aae5-b1b457831c95-83bd6d79, #w-node-_0901ee09-47f6-43f2-d087-e4588108ead0-83bd6d79, #w-node-_0901ee09-47f6-43f2-d087-e4588108ead2-83bd6d79, #w-node-_123fe0a4-0456-ad13-ff93-bba75ac0f967-83bd6d79, #w-node-_123fe0a4-0456-ad13-ff93-bba75ac0f969-83bd6d79, #w-node-_72a3231f-0343-5673-e04f-8f129f62d2f8-83bd6d79, #w-node-_72a3231f-0343-5673-e04f-8f129f62d2fa-83bd6d79, #Email.w-node-_89b01313-4cfd-0b53-1462-83bbbb7f75dd-9fbd6d83, #w-node-_2873129b-7454-ace9-ed01-47ed055f4d53-7cbd6d8c, #w-node-d2c39a72-dde6-85d9-c6f1-220498a0589c-7cbd6d8c, #w-node-_794dc132-8d2c-ef23-eed4-71335784a547-7cbd6d8c, #w-node-e5c1fe2f-86d1-37cf-8c70-7fe71bdfd21e-7cbd6d8c, #w-node-beaea165-7ea2-1f5c-f0df-77066cd5c733-7cbd6d8c, #w-node-_7c54e151-eb12-985f-dacd-edf5ad96bd63-7cbd6d8c, #w-node-_719d2b9b-fd00-9660-ce4e-3cd24de9297d-7cbd6d8c, #w-node-_11d807b4-998c-ee8f-b657-b5119d0499fd-7cbd6d8c, #w-node-_9144d7f9-6493-9c2f-c245-6f3732ee0407-b4bd6d96, #w-node-_81b9323f-34ff-16c8-cf77-01cd1df69ab8-b4bd6d96, #w-node-ed365e70-6006-174b-6839-fde5c417f00f-b4bd6d96, #w-node-_91734b50-f596-fa2e-aa04-32650baaacf4-b4bd6d96, #w-node-_5555f76b-36c3-9ec2-b489-17c4ee6d3dac-b4bd6d96, #w-node-_07637e30-d06a-fadf-0b29-7431b051b427-b4bd6d96, #w-node-_0cb5d4b7-482b-64ce-3386-06a3cf655147-b4bd6d96, #w-node-cf64bb93-de76-8b29-7f53-afd79114c604-b4bd6d96, #w-node-_0cb5d4b7-482b-64ce-3386-06a3cf65514d-b4bd6d96, #w-node-_26fde062-9deb-e8ed-0f15-e736b497be3f-60bd6d97, #w-node-_26fde062-9deb-e8ed-0f15-e736b497be41-60bd6d97, #w-node-_26fde062-9deb-e8ed-0f15-e736b497be45-60bd6d97, #w-node-_26fde062-9deb-e8ed-0f15-e736b497be48-60bd6d97, #w-node-_26fde062-9deb-e8ed-0f15-e736b497be4a-60bd6d97, #w-node-_26fde062-9deb-e8ed-0f15-e736b497be4e-60bd6d97, #w-node-_26fde062-9deb-e8ed-0f15-e736b497be51-60bd6d97, #w-node-_26fde062-9deb-e8ed-0f15-e736b497be53-60bd6d97, #w-node-_26fde062-9deb-e8ed-0f15-e736b497be57-60bd6d97, #w-node-_2873129b-7454-ace9-ed01-47ed055f4d53-3855199a, #w-node-d2c39a72-dde6-85d9-c6f1-220498a0589c-3855199a, #w-node-_794dc132-8d2c-ef23-eed4-71335784a547-3855199a, #w-node-e5c1fe2f-86d1-37cf-8c70-7fe71bdfd21e-3855199a, #w-node-beaea165-7ea2-1f5c-f0df-77066cd5c733-3855199a, #w-node-_7c54e151-eb12-985f-dacd-edf5ad96bd63-3855199a, #w-node-_719d2b9b-fd00-9660-ce4e-3cd24de9297d-3855199a, #w-node-_11d807b4-998c-ee8f-b657-b5119d0499fd-3855199a {
    grid-area: span 1 / span 1 / span 1 / span 1;
}


@font-face {
    font-family: 'Circularstd';
    src: url('../fonts/CircularStd-Black.woff2') format('woff2'), url('../fonts/CircularStd-Black.woff') format('woff'), url('../fonts/CircularStd-Black.ttf') format('truetype'), url('../fonts/CircularStd-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Circularstd';
    src: url('../fonts/CircularStd-BlackItalic.woff2') format('woff2'), url('../fonts/CircularStd-BlackItalic.woff') format('woff'), url('../fonts/CircularStd-BlackItalic.ttf') format('truetype'), url('../fonts/CircularStd-BlackItalic.otf') format('opentype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Circularstd';
    src: url('../fonts/CircularStd-Bold.woff2') format('woff2'), url('../fonts/CircularStd-Bold.woff') format('woff'), url('../fonts/CircularStd-Bold.ttf') format('truetype'), url('../fonts/CircularStd-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Circularstd';
    src: url('../fonts/CircularStd-BoldItalic.woff2') format('woff2'), url('../fonts/CircularStd-BoldItalic.woff') format('woff'), url('../fonts/CircularStd-BoldItalic.ttf') format('truetype'), url('../fonts/CircularStd-BoldItalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Circularstd book';
    src: url('../fonts/CircularStd-Book.woff2') format('woff2'), url('../fonts/CircularStd-Book.woff') format('woff'), url('../fonts/CircularStd-Book.ttf') format('truetype'), url('../fonts/CircularStd-Book.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Circularstd';
    src: url('../fonts/CircularStd-BookItalic.woff2') format('woff2'), url('../fonts/CircularStd-BookItalic.woff') format('woff'), url('../fonts/CircularStd-BookItalic.ttf') format('truetype'), url('../fonts/CircularStd-BookItalic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Circularstd';
    src: url('../fonts/CircularStd-Medium.woff2') format('woff2'), url('../fonts/CircularStd-Medium.woff') format('woff'), url('../fonts/CircularStd-Medium.ttf') format('truetype'), url('../fonts/CircularStd-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Circularstd';
    src: url('../fonts/CircularStd-MediumItalic.woff2') format('woff2'), url('../fonts/CircularStd-MediumItalic.woff') format('woff'), url('../fonts/CircularStd-MediumItalic.ttf') format('truetype'), url('../fonts/CircularStd-MediumItalic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Remix';
    src: url('../fonts/remix.eot') format('embedded-opentype'), url('../fonts/remix.woff') format('woff'), url('../fonts/remix.ttf') format('truetype'), url('../fonts/remix.svg') format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}