/* Styles Here */

.hl-heading{
    font-size: 30px;
    color: #00b6ff;
    font-weight: 600;
}

/* Widget styles Here */

.hl-widget-background{
    background-color: #cfcfcf;
    color: red;
} :root {
    --lv-primary-color: rgb(88, 71, 174);
    --lv-secondary-color: rgb(135, 45, 145);
    --lv-heading-color: rgb(63, 63, 63);
    --lv-border-container-border-color: rgb(226, 226, 226);
}

/* Styles Here */

.dcui-checkbox.docld-checkbox-no-label {
    margin-top: 0;
}

.dcui-checkbox.docld-checkbox-no-label label {
    padding-left: 0;
    line-height: inherit;
}

.dcui-checkbox.docld-checkbox-no-label label:before {
    position: relative;
    top: 3px;
}

.dcui-checkbox.docld-checkbox-no-label label:after {
    top: 6.5px;
}

.docld-pms-dash-wrapper {
    width: 60%;
    max-width: 100%;
    margin: 5% auto;
    z-index: 1;
}

.docld-pms-dash__bg-box {
    z-index: -99;
    top: 50%;
    left: 10%;
    position: fixed;
    transform-origin: top left;
    transform: rotate(296deg);
    width: 825px;
    height: 785px;
    border-radius: 77px;
    background: linear-gradient(138.9deg, rgba(135, 45, 145, 0.3) 5.85%, rgba(135, 45, 145, 0.036) 79.44%);
}

.docld-pms-dash-content__welcome__greeting-msg {
    color: rgb(88, 71, 174);
    font-size: 30px;
    font-weight: 700;
}

.docld-pms-dash-content__activity-container {
    padding-top: 25px;
}

.docld-pms-dash-avatar-border {
    border: 2px solid rgba(135, 45, 145, 1)
}

.dcui-photo-bubble.dcui-xl {
    width: calc(var(--dcui-photo-bubble-size) + 15px);
    height: calc(var(--dcui-photo-bubble-size) + 15px);
    min-width: calc(var(--dcui-photo-bubble-size) + 15px);
    min-height: calc(var(--dcui-photo-bubble-size) + 15px);
}

.dcui-photo-bubble.dcui-xsmall {
    width: calc(var(--dcui-photo-bubble-size) - 10px);
    height: calc(var(--dcui-photo-bubble-size) - 10px);
    min-width: calc(var(--dcui-photo-bubble-size) - 10px);
    min-height: calc(var(--dcui-photo-bubble-size) - 10px);
}

.docld-pms-widget__heading {
    color: var(--lv-heading-color);
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
}

.docld-pms-dash-available-apps {
    padding-top: 25px;
}

.docld-pms-dash-available-apps__container {
    display: flex;
    width: 223px;
    flex-wrap: wrap;
}

.docld-pms-dash-available-apps__container__item {
    display: flex;
    margin-right: 10px;
    width: 60px;
}

.docld-pms-dash-available-apps__container__item__icon {
    display: block;
    width: 50px;
    height: 46px;
    padding: 11px;
    border-radius: 8px;
}

.docld-pms-dash-available-apps__container__item__icon > img {
    width: 26px;
    height: auto;
    max-height: 30px;
    display: block;
    margin: 0 auto;
    filter: brightness(0) invert(1) grayscale(100%);
}

.docld-pms-dash-available-apps__container__item__link {
    text-align: center;
    display: block;
    padding: 12px 5px 10px;
    position: relative;
}

.docld-pms-dash-available-apps__container__item__icon.purple {
    background-color: #544fac;
}

.docld-pms-dash-available-apps__container__item__icon.blue {
    background-color: #4686ac;
}

.docld-pms-dash-available-apps__container__item__icon.green {
    background-color: #4dae84;
}

.docld-pms-dash-available-apps__container__item__label {
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    text-transform: capitalize;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #1e1e1e;
    margin-top: 5px;
}

.docld-pms-widget-style-overview__container {

}

.docld-pms-widget-style-overview__container__content {
    position: relative;
    min-height: 70px;
}

.docld-pms-widget-style-overview__container__item {
    display: flex;
    flex-direction: column;
}

.docld-pms-widget-style-overview__container__item__number {
    font-weight: 700;
    font-size: 30px;
    color: var(--lv-heading-color);
}

.docld-pms-widget-style-overview__container__item__label {

}

.docld-pms-widget-recent-activities__container__no-recent-activity {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.docld-pms-widget-recent-activities__container__no-recent-activity__text {
    text-align: center;
    max-width: 100%;
    font-weight: bold;
    font-size: 20px;
    color: rgba(0, 0, 0, 0.2);
}

.docld-pms-widget-recent-activities__container {
    position: relative;
    height: 100%;
    min-height: 450px;
}

.docld-pms-widget-recent-activities__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    margin-top: 25px;
}

.docld-pms-widget-recent-activities__content::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 4px;
    height: calc(100% - 38px);
    width: 2px;
    border-left: 2px dotted #d9d9d9;
    z-index: 0;
}

.docld-pms-widget-recent-activities__content .docld-pms-widget-recent-activities__item {
    margin-bottom: 25px;
    display: flex;
    align-items: center;
}

.docld-pms-widget-recent-activities__content .docld-pms-widget-recent-activities__item::before {
    position: relative;
    left: 1px;
    top: 1px;
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    -moz-border-radius: 7.5px;
    -webkit-border-radius: 7.5px;
    border-radius: 7.5px;
    background-color: #d9d9d9;
    margin-right: 10px;
    z-index: 1;
    padding: 4px;
}

.docld-pms-widget-recent-activities__content .docld-pms-widget-recent-activities__item .docld-pms-widget-recent-activities__item__text-content {
    font-size: 15px;
}

.docld-pms-widget-recent-activities__content .docld-pms-widget-recent-activities__item .docld-pms-widget-recent-activities__item__text-content > span {

}

.docld-pms-widget-recent-activities__item__text--bold {
    font-weight: 700;
}

.docld-pms-widget-quick-links-widget__container {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    min-height: 80px;
    height: 100%;
}

.docld-pms-widget-quick-links-widget__container .docld-pms-widget-quick-links-widget__container__item {
    width: 100%;
    max-width: 150px;
    display: flex;
    height: 35px;
    align-items: center;
}

.docld-pms-widget-quick-links-widget__container .docld-pms-widget-quick-links-widget__container__item:hover {
    cursor: pointer;
}

.docld-pms-widget-quick-links-widget__container .docld-pms-widget-quick-links-widget__container__item .docld-pms-widget-quick-links-widget__container__item__btn {
    padding: 15px 0;
}

.docld-pms-widget-quick-links-widget__container__text-name {
    font-weight: 600;
}

.docld-pms-prod__container {
    position: relative;
}

.docld-pms-prod__container__main__middle-container__content__prod__icon_section {
    gap: 5px
}

.docld-pms-create__new-style__container {
    display: flex;
}

.docld-pms-create__new-style__container__style-form {

}

.docld-pms-create__new-style__container__style-upload {
    margin-left: 25px;
}

.docld-pms-prod__container__nav-bar-container {
    z-index: 2;
}

.lv-process-navigator {
    height: 100%;
}

.lv-process-stage-navigator {
    height: calc(100vh - 155px);
}

.lv-process-navigator-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--lv-heading-color);
}

.lv-process-name-container {
    padding: 20px;
}

.lv-process-name-container.lv-style-single {
    height: 70vh;
}

.lv-process-name-container .lv-process-stage-nav-dropdown.lv-dropdown .dcui-dropdown-panel {
    width: 250px;
}

.lv-process-navigator-container {
    position: relative;
}

.lv-production-container {
    height: calc(100vh - 60px);
    overflow: hidden;
}

.lv-single-style-stage-nav {
    height: calc(100vh - 260px);
    padding-bottom: 15px;
}

.lv-process-navigator-container::after {
    content: "";
    position: absolute;
    top: 33px;
    left: 20px;
    height: calc(100% - 53px);
    width: 2px;
    border-left: 2px dotted #ededed;
    z-index: 0;
}

.lv-process-navigator-container .item {
    display: flex;
    align-items: baseline;
    padding: 15px;
    height: 55px;
}

.lv-process-navigator-container .item::before {
    position: relative;
    left: 2px;
    top: 1px;
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    -moz-border-radius: 7.5px;
    -webkit-border-radius: 7.5px;
    border-radius: 7.5px;
    background-color: #d9d9d9;
    margin-right: 10px;
    z-index: 1;
}

.lv-process-navigator-container .item:hover {
    background-color: #e6f5ff;
    cursor: pointer;
}

.lv-process-navigator-container .item .icon {
    font-size: 20px;
    margin-right: 5px;
    width: 25px;
}

.lv-process-navigator-container .item.selected {
    background-color: #e6f5ff;
    color: #0096fd;
    position: relative;
}

.lv-process-navigator-container .item.selected::after {
    content: '';
    position: absolute;
    top: 17px;
    right: 10px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #00a0fa;
}

.lv-process-navigator-container .item::before {
    font-family: "Font Awesome 6 Pro";
    position: relative;
    left: 2px;
    top: 1px;
    color: white;
    font-weight: 900;
    display: flex; /* Change from block to flex */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    width: 8px;
    height: 8px;
    font-size: 7px;
    line-height: 9px;
    text-align: center;
    -moz-border-radius: 7.5px;
    -webkit-border-radius: 7.5px;
    border-radius: 7.5px;
    margin-right: 10px;
    z-index: 1;
}

.lv-process-navigator-container .item.success::before {
    content: "\f00c";
    background-color: #98db87;
    width: 13px;
    height: 13px;
    left: 0;
}

.lv-process-navigator-container .item.skipped::before {
    content: "\f04e";
    background-color: #a3a3a3;
    width: 13px;
    height: 13px;
}

.lv-process-navigator-container .item.current_completed::before {
    content: "\f005";
    background-color: #16b10b;
    width: 13px;
    height: 13px;
}

.lv-process-navigator-container .item.current::before {
    content: "\f141";
    background-color: #5fa8f1;
    width: 13px;
    height: 13px;
    left: 0;
}

.lv-process-navigator-container .item.current_rejected {
    color: #f15f5f;
}

.lv-process-navigator-container .item.current_rejected::before {
    content: "\f1f8";
    background-color: #f15f5f;
    width: 13px;
    height: 13px;
}

.lv-process-navigator-container .item.where_rejected::before {
    content: "\f00d";
    background-color: #f15f5f;
    width: 13px;
    height: 13px;
}

.lv-process-navigator-container .lv-process-navigator-text-container {
    display: flex;
    justify-content: space-between;
    flex: 1;
}

.lv-process-navigator-container .lv-value-addition {
    margin-right: 15px;
}

.lv-process-navigator-container .lv-value-addition.lv-value-addition-completed {
    color: #6eb35c;
}

.lv-process-navigator-container .lv-value-addition.lv-value-addition-in_progress {
    color: #f18600;
}

/*.lv-process-name-container .item.selected .icon {*/
/*    color: #0096fd;*/
/*}*/
.lv-process-main-single .top-bar, .lv-process-main .top-bar {
    padding: 30px;
    background-color: #d6ecf8;
}

.lv-process-main .top-bar .stage-container {
    display: flex;
    justify-content: space-between;
}

.lv-process-main .top-bar .stage-container .left-container {
    display: flex;
}

.lv-process-main .top-bar .stage-container .left-container .stage-icon {
    font-size: 40px;
    margin-right: 15px;
    display: flex;
    align-items: center;
}

.lv-process-main .top-bar .stage-container .left-container .stage-name-container {
    display: flex;
    flex-direction: column;
}


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

.lv-process-main .middle-container {
    min-height: 750px;
    padding-top: 30px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 0;
}

.lv-pro-grid-style {
    min-height: 135px;
}

.lv-pro-grid-style .style-id-label {
    font-weight: 600;
    font-size: 18px;
}

.lv-pro-grid-style .style-quantity {
    font-size: 18px;
    font-weight: 300;
}

.lv-pro-grid-style .model-container {

}


.lv-pro-grid-style .small-text {
    font-size: 13px;
    font-weight: 300;
}

.lv-pro-grid-style .small-text-title {
    font-size: 10px;
    font-weight: 300;
}

.lv-pro-grid-style .small-text.dress-type-text {
    font-size: 14px;
    font-weight: 400;
}

.lv-process-main .lv-typo-bold-700-f-30 {
    color: black;
}


.lv-process-main .semi-bold-text-f-16 {
    font-size: 16px;
    color: black;
    font-weight: 500;
}

.lv-process-main .stat-panel .stat-item {
    margin-right: 25px;
}

.lv-process-main .stat-panel .stat-item:last-child {
    margin-right: 0;
}

.lv-process-main-action-panel div {
    margin-right: 10px;
}

.lv-process-main-action-panel div:last-child {
    margin-right: 0;
}

.lv-tabs .dcui-bt-nav .dcui-bt-n-item {
    font-size: 20px;
    font-weight: 500;
}

.lv-tabs .dcui-bt-nav .dcui-bt-n-item.active:after {
    background-color: #98ceed;
}

.lv-border-container {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--lv-border-container-border-color);
    border-radius: 5px;
    flex: 1;
    margin-right: 25px;
}

.lv-border-container .right {
    width: 30%;
    border-right: 1px solid var(--lv-border-container-border-color);
}

.lv-border-container .left {
    width: 70%;
}

.lv-border-container-row .dcui-form-group {
    margin: 0;
}

.lv-border-container-row .dcui-select-dropdown,
.lv-border-container-row .dcui-select-dropdown .dcui-dt-label {
    width: 100%;
}

.lv-border-container .lv-border-container-row {
    padding: 10px 15px;
    display: flex;
    min-height: 56px;
    align-items: center;
}

.lv-style-stage-move-popup {
    min-height: 400px;
    width: 550px;
    min-width: 550px;
}

.lv-style-stage-move-popup.all_completed {
    min-height: 210px;
    width: 550px;
    min-width: 550px;
}

.lv-style-stage-move-popup.all_completed .lv-style-move-custom-container {
    height: 100px;
}

.lv-style-stage-move-popup .button-container {
    gap: 10px;
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
}

.lv-style-move-custom-popup {
    width: 600px;
    height: 350px;
}

.lv-style-move-custom-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 290px;
}

.lv-style-move-custom-container .lv-dropdown-stage-item {
    display: flex;
}

.lv-style-move-custom-container .lv-dropdown-stage-item::before {
    font-family: "Font Awesome 6 Pro";
    position: relative;
    left: 2px;
    top: 1px;
    color: white;
    font-weight: 900;
    display: flex; /* Change from block to flex */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    width: 8px;
    height: 8px;
    font-size: 7px;
    line-height: 9px;
    text-align: center;
    -moz-border-radius: 7.5px;
    -webkit-border-radius: 7.5px;
    border-radius: 7.5px;
    margin-right: 10px;
    z-index: 1;
}

.lv-style-move-custom-container .lv-dropdown-stage-item.success::before {
    content: "\f00c";
    background-color: #98db87;
    width: 13px;
    height: 13px;
}

.lv-style-move-custom-container .lv-dropdown-stage-item.skipped::before {
    content: "\f04e";
    background-color: #a3a3a3;
    width: 13px;
    height: 13px;
}

.lv-style-move-custom-container .lv-dropdown-stage-item.current::before {
    content: "\f141";
    background-color: #5fa8f1;
    width: 13px;
    height: 13px;
}

.lv-style-move-custom-container .lv-dropdown-stage-item.pending::before {
    content: "\f111";
    background-color: #5fa8f1;
    width: 13px;
    height: 13px;
}

.lv-style-move-custom-container .lv-dropdown-stage-item.current_rejected::before {
    content: "\f1f8";
    background-color: #888282;
    width: 13px;
    height: 13px;
}


.lv-move-custom-stage-dropdown {

}

.lv-move-custom-stage-dropdown {
    width: 100%;
    border: 1px solid var(--lv-border-container-border-color);
    border-radius: 5px;
}

.lv-move-custom-stage-dropdown .dcui-dropdown-toggle {
    width: 100%;
}

.lv-border-container .lv-form-container-row {
    display: flex;
    border-bottom: 1px solid var(--lv-border-container-border-color);
}

.lv-border-container .lv-form-container-row:last-child {
    border-bottom: 0;
}

.left .lv-border-container-row {
    padding: 0 15px;
}

.lv-border-container.separator-right {
    position: relative;
}

.lv-border-container.separator-right::after {
    content: '';
    position: absolute;
    top: 0;
    right: -25px;
    height: 100%;
    width: 1px;
    background-color: #f4f4f4;
}

.lv-temp-upload-container {
    display: flex;
    align-items: center;
    width: 350px;
    min-height: 130px;
    padding: 10px;
    max-height: 100%;
    border: 1px solid gainsboro;
    border-radius: 5px;
    justify-content: space-around;
}

.lv-create-new-style-popup {
    width: 985px;
    min-width: 650px;
}

.dcui-icon-control.lv-input-filed-no-outline, .dcui-form-control.lv-input-filed-no-outline {
    border: 0 !important;
}

.dcui-icon-control.lv-input-filed-no-outline, .dcui-form-control.lv-input-filed-no-outline:focus {
    border: 0 !important;
    box-shadow: none;
}

.lv-border-container-row.lv-style-form-text-area, .lv-style-form-text-area {
    padding: 10px;
}

.lv-pro-style-image {
    border-radius: 5px;
    object-fit: cover;
    width: 100%;
    height: 100%;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}

.lv-avatar-cover {
    display: flex;

}

.lv-style-card-avatar-section {
    gap: 12px;
    flex-wrap: wrap;
}

.lv-style-card-avatar-section__text-section {
    display: flex;
    flex-direction: column;
}

.lv-avatar-cover > img {
    object-fit: cover;
    object-position: top center;
}

.lv-user-icon {
    object-position: top;
}

.lv-style-card {
    padding: 10px;
}

.lv-pro-style-card-right-section {
    display: flex;
    align-items: center;
}

.lv-pro-style-card-right-section .lv-icon-container .lv-custom-tag{
    width: 17px;
    height: 17px;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    padding-top: 2.5px;
    margin-bottom: 4px;
}

.styles-table .lv-icon-container, .lv-style-card .lv-icon-container {
    display: flex;
    gap: 5px;
    align-items: center;
}

.styles-table .lv-icon-container .lv-style-suspended, .lv-style-card .lv-icon-container .lv-style-suspended {
    color: #cb2e2e;
}

.lv-style-single-suspended {
    font-size: 20px;
    color: #cb2e2e;
}

.styles-table .lv-icon-container .lv-style-active, .lv-style-card .lv-icon-container .lv-style-active {
    color: #6dbd6a;
}

.lv-style-card-info {
    padding:5px 0;
}

.lv-style-card-select-check-box-container {
    position: absolute;
    top: 3px;
    left: 5px;
}

.lv-style-card-info .lv-style-card-top-section {
    height: 22px;
    display: flex;
    align-items: center;
}

.lv-style-card-top-section__name-section {
    display: flex;
    align-items: center;
    padding-right: 10px;
}

.styles-table .lv-style-card-value-addition.in_progress,
.lv-style-card-info .lv-style-card-value-addition.in_progress {
    color: #fdb04f;
}

.styles-table .lv-style-card-value-addition.completed,
.lv-style-card-info .lv-style-card-value-addition.completed {
    color: #6dbd6a;
}

.lv-style-card-image-container {
    min-width: 110px;
    width: 110px;
    max-width: 110px;
    max-height: 160px;
    height: 160px;
    min-height: 160px;
    padding: 0;
    padding-right: 10px;
}

.lv-style-card-icon {
    max-width: 25px;
    max-height: 25px;
    min-width: 25px;
    min-height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}


.lv-style-table-container {
    min-height: 180px;
    position: relative;
    height: calc(100vh - 330px);
    padding-right: 15px;
}

.lv-style-model-filter-dropdown {
    width: 200px;
}

.lv-style-model-filter-dropdown .dcui-dropdown-toggle {
    width: 100%;
}

.lv-grid-container {
    position: relative;
    height: calc(100vh - 330px);
    padding: 0 15px;
}

.lv-bubble-avatar-square-img {
    border: 0;
    border-radius: 5px !important;
}

.lv-pro-table-style-name {

}

.lv-pro-welcome-container {
    height: calc(100vh - 280px);
    padding-bottom: 15px;
    padding-right: 15px;
}

.lv-pro-welcome-dash-stats-container {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.lv-pro-welcome-dash-large-container {
    margin-top: 20px;
}

.lv-pro-welcome-dash-large-container.large-container-item {
    width: 50%;
    margin-right: 25px;
}

.lv-pro-welcome-dash-large-container.large-container-item:last-child {
    margin-right: 0;
}

.lv-pro-welcome-dash-stats-container .stats-item {
    width: 32.4%;
    height: 20%;
}

.lv-pro-welcome-dash-stats-container .stats-item:last-child {
    margin-right: 0;
}

.lv-pro-welcome-dash-stats-container .stats-item .stat-card {
    height: 90px;
    max-height: 90px;
}

.lv-pro-welcome-dash-stats-container .stats-item .stat-card .text {
    color: rgba(100, 100, 100);
}

.lv-stat-bubble {
    font-size: 12px;
    border-radius: 25px;
    display: flex;
    padding: 5px 10px;
    align-items: baseline;
}

.lv-stat-bubble .icon {
    margin-right: 5px;
}

.lv-stat-bubble.green {
    color: rgba(92, 206, 131, 1);
    background-color: rgba(92, 206, 131, 0.2)
}

.lv-stat-bubble.red {
    color: rgba(206, 92, 92, 1);
    background-color: rgba(206, 92, 92, 0.2);

}

.lv-inout-summary {
    height: 100%;
    min-height: 650px;
}

.lv-inout-summary .in {
    color: rgba(243, 159, 98, 1);
}

.lv-inout-summary .icon {
    color: rgba(172, 179, 187, 1);
    width: 20px;
}

.lv-inout-summary .stage-name {
    color: rgba(95, 99, 104, 1);
}

.lv-inout-summary .out {
    color: rgba(50, 199, 83, 1);

}

.lv-style-overview .head, .lv-inout-summary .head {
    color: rgba(0, 0, 0, 1);
}

.lv-style-overview {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lv-grid-container a:hover {
    color: inherit;
}

.lv-single-icon {
    width: 82px;
    height: 82px;
    object-fit: cover;
    border-radius: 8px;
    object-position: top;
    min-width: 82px;
}

/*.lv-single-icon.lv-default-image {*/
/*    width: 82px;*/
/*    height: 82px;*/
/*    object-fit: cover;*/
/*    border-radius: 8px;*/
/*    object-position: top;*/
/*}*/

.lv-single-top-bar-left-container .container-item {
    margin-left: 25px;
}

.lv-single-top-bar-left-container .container-item div:last-child {
    margin-left: 0;
}

.lv-single-top-bar-left-container .container-item div {
    margin-bottom: 10px;
}

.lv-single-top-bar-left-container .container-item div:last-child {
    margin-bottom: 0;
}

.docld-pms-single__top-bar__container__status-tag{
    padding: 6px 8px;
    font-weight: 700;
    border-radius: 7px;
    line-height: 19px;
    color: #fff;
}

.lv-style-single-container {
    height: calc(100vh - 190px);
    overflow: hidden;
}

.lv-process-single-main-container {
    height: 100%;
}

.lv-style-single-info-panel {
    width: 60%;
    height: calc(100vh - 266px);
    position: relative;
}

.lv-style-single-info-panel::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 1px;
    background-color: #f4f4f4;
}

.lv-style-single-task-panel {
    width: 40%;
    margin-left: 25px;
}

.lv-style-single-upload-container {
    display: flex;
    align-items: center;
    min-height: 130px;
    padding: 10px;
    max-height: 100%;
    border-radius: 5px;
}

.lv-style-single-middle-container {
    height: calc(100vh - 190px);
    overflow: hidden;
    position: relative;
}

.lv-style-single-middle-container-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.lv-style-single-style-name-section {
    width: 60%;
}

.lv-style-single-stage-info-container {
    display: flex;
    justify-content: space-between;
    flex: 1;
    margin-left: 15px;
    align-items: center;
}

.docld-pms-single__show-hide__stages-nav {
    display: none;
    font-size: 20px;
    padding-bottom: 5px;
    color: #4891e0;
}

/*****************************
 **          Tabs           *
 *****************************/

.lv-tabs.dcui-basic-tabs .dcui-bt-nav {
    border-bottom: 1px solid #dbdbdb;
    padding-bottom: 5px;
}

.dcui-select-dropdown.disabled .dcui-dt-label {
    background-color: #eeeeee;
}

/*.lv-tabs.dcui-basic-tabs .dcui-bt-tab {*/
/*    position: absolute;*/
/*    flex-basis: 100%;*/
/*    left: 0;*/
/*    right: 0;*/
/*    background-color: #fff;*/
/*    visibility: hidden;*/
/*    transform: scale(0.95); !* Initially scaled down *!*/
/*    transition: visibility 0s, transform 0.4s ease-in-out;*/
/*}*/

/*.lv-tabs.dcui-basic-tabs .dcui-bt-tab.active {*/
/*    position: relative;*/
/*    visibility: visible;*/
/*    transform: scale(1); !* Scale back to normal *!*/
/*}*/

/*****************************
 **    Progress bar classes    *
 *****************************/

.lv-progressbar .dc-container {
    background-color: rgb(255 219 198);
    width: 80%;
    border-radius: 15px;
    flex: 1;
}

.lv-progressbar.small .dc-container {
    height: 5px;
}

.lv-progressbar .dc-progress {
    background-color: rgb(246 131 66);
    color: white;
    text-align: right;
    border-radius: 15px;
    height: 100%;
}


.lv-progressbar .dc-container.completed, .lv-progressbar .dc-container.completed .dc-progress {
    background-color: rgb(74 74 74)
}

.lv-progressbar .dc-container.no-progress, .lv-progressbar .dc-container.no-progress .dc-progress {
    background-color: rgb(186, 186, 186);
}

.lv-progressbar .dc-progress-text {
    color: rgb(247 128 62)
}

.lv-progressbar .dc-progress-text.completed {
    color: rgb(74 74 74)
}

.lv-progressbar .dc-progress-text.no-progress {
    color: rgb(186, 186, 186);
}

/*****************************
 **       Stage Task         *
 *****************************/


.lv-stage-task-container {
    height: calc(100vh - 281px);
    margin-top: 15px;
    background-color: #fafafa;
    padding: 15px;
    border-radius: 5px;
}

.lv-style-single-tab {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.lv-stage-task-container .task-table-container .dcui-table {
    background-color: #fafafa;
}

.lv-stage-task-container .lv-tabs.dcui-basic-tabs .dcui-bt-tab {
    background-color: #fafafa;
}

.lv-stage-task-container .dcui-bt-nav {
    margin-bottom: 15px;
}


/*****************************
 **       Task Comment       *
 *****************************/

.lv-style-single-comment-avatar img {
    object-position: top;
}

.lv-task-comment-commenting-container {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    background-color: white;
    padding: 15px;
    border-radius: 7px;
    border: 1px solid #efefef;
}

.lv-task-comment-container-parent {
    position: relative;
    height: 100%;
    padding-right: 10px;
}

.lv-task-comment-container {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    min-height: 50px;
    position: relative;
}

.lv-task-comment-container:after {
    content: "";
    position: absolute;
    top: 28px;
    left: 10px;
    height: calc(100% - 100px);
    width: 2px;
    border-left: 2px dotted #dbdbdb;
    z-index: 0;
}

.lv-task-comment-container .comment-section {
    flex: 1;
}

.lv-task-comment-container .comment-section:last-child {
    margin-bottom: 0;
}

.lv-task-comment-container .comment {
    background-color: white;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #efefef;
    flex: 1;
}


/*****************************
 **      Task Activity       *
 *****************************/

.lv-task-activity-container-parent {
    position: relative;
    height: 100%;
}

.lv-task-activity-container {
    margin-top: 20px;
    position: relative;
}

.lv-task-activity-container.loaded::after {
    content: "";
    position: absolute;
    top: 10px;
    left: 6px;
    height: calc(100% - 40px);
    width: 2px;
    border-left: 2px dotted #ededed;
    z-index: 0;
}

.lv-task-activity-container .lv-task-activity-item {
    margin-bottom: 15px;
    line-height: 20px;
    display: flex;
    align-items: flex-start;
}

.lv-task-activity-container .lv-task-activity-item:last-child {
    margin-bottom: 0;
}

.lv-task-activity-container .lv-task-activity-item::before {
    position: relative;
    left: 2px;
    top: 4px;
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    padding: 5px;
    -moz-border-radius: 7.5px;
    -webkit-border-radius: 7.5px;
    border-radius: 7.5px;
    background-color: #d9d9d9;
    margin-right: 10px;
    z-index: 1;
}

/*****************************
 **       Style Single       *
 *****************************/
.dcui-button.lv-button-red-no-fill {
    border-color: var(--dcui-danger-color);
    color: var(--dcui-danger-color);
}

.dcui-button.lv-button-red-no-fill:hover {
    background-color: var(--dcui-danger-color);
}

/*****************************
 **   Style Priority Status  *
 *****************************/

.lv-style-single-style-priority {
    font-size: 17px;
    margin-right: 10px;
}

.lv-style-priority.lv-priority-low {
    color: #656f7d;
}

.lv-style-priority.lv-priority-normal {
    color: #879dff;
}

.lv-style-priority.lv-priority-high {
    color: #fbcb5c;
}

.lv-style-priority.lv-priority-urgent {
    color: #e38388;
}

/*****************************
 **      Task Activity       *
 *****************************/

.task-table tbody tr td {
    padding: 10px 0 !important;
}

.styles-table, .task-table tbody tr:hover {
    cursor: pointer;
}

.lv-task-table-priority-icon-container {

}

.lv-task-table-priority-icon-container .priority-icon-red {
    color: #CD3B3B;
}

.lv-task-table-priority-icon-container .priority-icon-black {
    color: black;
}

.lv-task-table-priority-icon-container .priority-icon-grey {
    color: #ABA9A9;
}

.lv-status-container {
    font-size: 15px;
    font-weight: 400;
}

.lv-dropdown li.selected {
    background-color: #d7efff;
}

.lv-dropdown .lv-dropdown-scrollable {
    max-height: 140px;
}

.lv-dropdown .dcui-dropdown-panel {
    width: 100%;
}

.lv-dropdown.disabled.dcui-select-dropdown .dcui-dt-label {
    cursor: inherit;
}

.lv-dropdown .has-search-field {
    padding: 5px 7px 5px;
}

.lv-status-container.-lv-dropdown {
    font-size: var(--dc-regular-font-size);
}

.lv-status-container .status-color-ash {
    color: #646464;
}

.lv-status-container .status-color-orange {
    color: #F39F62;
}

.lv-status-container .status-color-green {
    color: #32C753;
}

ul.lv-breadcrumbs-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

ul.lv-breadcrumbs-list li.lv-breadcrumb-item {
    display: inline;
}

ul.lv-breadcrumbs-list li.lv-breadcrumb-item .lv-breadcrumb-icon {
    padding: 8px;
    color: #5b5e63;
}

.lv-file-uploader-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 130px;
}

.lv-file-uploader-container.mini {
    flex: none;
    margin: 5px;
}

.lv-file-uploader-container.mini .mini-container {
    flex-grow: 1;
    border: 1px solid #d1d1d1;
    border-radius: 7px;
    margin: 5px;
}

.lv-file-uploader-container .center-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lv-file-uploader-container .text-container {
    color: #5f6368;
    margin-top: 5px;
}

.lv-file-uploader-container .text-browse {
    color: #00a0fc;
}

.lv-file-uploader-container.disable, .lv-file-uploader-container.mini.disable .text-browse {
    color: #a6a8a9;
}

.lv-file-uploader-container .upload-icon {
    font-size: 25px;
    color: #cfd1d2;
}

.lv-file-uploader-container .hidden-input {
    opacity: 0;
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
}

.lv-file-uploader-container .file-label {
    display: block;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.lv-file-uploader-container.disable .file-label {
    cursor: inherit;
}

.lv-file-uploader-container .preview-card {
    display: flex;
    position: relative;
}

.lv-style-single-media-viewer-container {
    display: flex;
    align-items: flex-start;
}

.lv-model-upload-container .lv-media-viewer-container .lv-media-viewer-item:hover,
.lv-style-single-media-viewer-container .lv-media-viewer-container .lv-media-viewer-item:hover {
    cursor: pointer;
}

.lv-model-upload-container .lv-media-viewer-container .lv-media-viewer-item.lv-selected:hover::before,
.lv-style-single-media-viewer-container .lv-media-viewer-container .lv-media-viewer-item.lv-selected:hover::before {
    position: absolute;
    z-index: 1;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    content: '';
    border: 2px solid #0097ff;
    pointer-events: none;
}

.lv-model-upload-container .lv-media-viewer-container .lv-media-viewer-item.lv-selected:hover::after,
.lv-style-single-media-viewer-container .lv-media-viewer-container .lv-media-viewer-item.lv-selected:hover::after {
    font-family: "Font Awesome 6 Pro";
    position: absolute;
    top: -9px;
    left: -10px;
    color: #ffef00;
    font-weight: 900;
    content: "\f005";
    font-size: 15px;
    line-height: 14px;
    text-align: center;
    margin-right: 10px;
    z-index: 1;
    -webkit-text-stroke: 1px #ff3d00;
}

.lv-style-single .lv-file-uploader-container .preview-card:hover {
    cursor: pointer;
}

.lv-style-single .lv-file-uploader-container .preview-card.selected::before {
    display: block;
    position: absolute;
    z-index: -1;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    content: '';
    border: 2px solid #0097ff;
}

.lv-style-single .lv-file-uploader-container .preview-card.selected::after {
    font-family: "Font Awesome 6 Pro";
    position: absolute;
    top: -6px;
    left: -8px;
    color: #ffef00;
    font-weight: 900;
    content: "\f005";
    font-size: 15px;
    line-height: 14px;
    text-align: center;
    margin-right: 10px;
    z-index: 1;
    -webkit-text-stroke: 1px #ff3d00;
}

.lv-file-uploader-container .preview-img {
    object-fit: cover;
    object-position: top;
    width: 106px;
    height: 92px;
    border-bottom: 1px solid #a2a2a2;
    background-color: #a2a2a2;
}

.lv-file-uploader-container .add-media-container {
    width: 112px;
    height: 109px;
    display: flex;
    align-items: center;
}

.lv-file-uploader-container .add-media-content {
    flex: 1;
    min-height: 105px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.lv-file-uploader-container .preview-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
}

.lv-file-uploader-container .preview-container .file-name-text {
    text-align: center;
}

.lv-file-uploader-container .preview-container .image-container {
    border: 1px solid #a2a2a2;
    border-radius: 5px;
}

.preview-container .preview-card .file-remove-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    display: none;
}

.preview-container .preview-card:hover .file-remove-btn {
    display: block;
}


.lv-file-uploader-remove-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 3px;
}

.dcui-button.lv-file-uploader-remove-btn {
    width: 15px;
    height: 15px;
    padding: 5px;
    border-radius: 50px;
}

.lv-file-uploader-featured-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 3px;
}

.dcui-button.lv-file-uploader-featured-btn {
    width: 15px;
    height: 15px;
    padding: 5px;
    border-radius: unset;
    color: #ffef00;
    background-color: transparent;
    border: 0;
    -webkit-text-stroke: 1px #ff3d00;
}


.lv-task-edit-popup-container {
    min-height: 600px;;
    max-height: 600px;
}

.lv-task-activity-panel {
    position: relative;
    background-color: #fafafa;
    padding: 15px;
    border-radius: 5px;
}

.lv-task-info-container {
    width: 50%;
}

/********************
   Coming soon Container
 ********************/

.lv-coming-soon-container {

}

/********************
    Media Viewer
 ********************/

.lv-media-viewer-container {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 5px;
    position: relative;
    width: 100%;
    min-height: 124px;
}

.lv-media-viewer-item {
    border: 1px solid #a2a2a2;
    border-radius: 5px;
    width: 108px;
    height: 112px;
    margin: 5px;
    position: relative;
}

.lv-media-viewer-text {
    line-height: 13px;
    padding: 0 5px;
    text-align: center;
}

.lv-media-viewer-image {
    width: 106px;
    height: 92px;
    object-fit: cover;
    object-position: top;
    border-bottom: 1px solid #a2a2a2;
    background-color: #a2a2a2;
}

.lv-media-viewer-item .file-remove-btn {
    position: absolute;
    top: 3px;
    right: 5px;
    display: none;
}

.lv-media-viewer-item:hover .file-remove-btn {
    display: block;
}

.lv-media-viewer-item .file-featured-btn {
    position: absolute;
    top: 3px;
    left: 5px;
    display: none;
}

.lv-media-viewer-item:hover .file-featured-btn {
    display: block;
}

.lv-task-activity-panel-container {
    min-height: 400px;
    max-height: 400px;
    width: 400px;
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}

.lv-task-activity-panel-container .lv-task-activities {
    position: relative;
}

.lv-task-activity-panel-container .lv-task-activities:after {
    content: "";
    position: absolute;
    top: 3px;
    left: 11px;
    height: calc(100% - 10px);
    width: 2px;
    border-left: 2px dotted #dbdbdb;
    z-index: 0;
}

.lv-task-activity-panel-container .lv-task-activities .activity-item {
    display: flex;
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
}

.lv-task-activity-panel-container .lv-task-activities .activity-item .comment-section {
    flex: 1;
}

.lv-task-activity-panel-container .lv-task-activities .activity-item:last-child {
    margin-bottom: 0;
}

.lv-task-activity-panel-container .lv-task-activities .activity-item .activity-section {
    display: flex;
    align-items: baseline;
}

.lv-task-activity-panel-container .lv-task-activities .activity-item .activity-section::before {
    position: relative;
    left: 7px;
    top: 0px;
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    padding: 5px;
    -moz-border-radius: 7.5px;
    -webkit-border-radius: 7.5px;
    border-radius: 7.5px;
    background-color: #d9d9d9;
    z-index: 1;
}

.lv-task-activity-panel-container .lv-task-activities .comment {
    background-color: white;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #efefef;
    flex: 1;
}

.lv-comment-commenting-container {
    margin-top: 15px;
    background-color: white;
    padding: 5px;
    border-radius: 7px;
    border: 1px solid #efefef;
}

.lv-comment-form {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.lv-comment-commenting-container .dcui-form-group {
    margin: 0;
}

.lv-comment-commenting-container .comment-input-container {
    flex: 1;
}

.lv-comment-commenting-container .comment-icon-container {
    display: flex;
    margin-right: 5px;
    width: 45px;
}

.lv-comment-commenting-container .comment-icon-container div {
    margin: 0 5px;
}

.lv-comment-box-loader-container {
    width: 33px;
    height: 23px;
}


.lv-comment-attachment-container {
    display: flex;
    padding: 5px;
    flex-wrap: wrap;
}

.lv-comment-attachment-remove-chip {
    display: flex;
    padding: 5px 8px;
    border: 1px solid #20a4ff;
    background-color: #ffffff;
    border-radius: 5px;
    margin-right: 10px;
    align-items: center;
}

.lv-comment-attachment-remove-chip .remove-btn {
    width: 15px;
    height: 15px;
    padding: 5px;
    color: #0097ff;
    background: transparent;
    border: 0;
}

.lv-comment-attachment-container .lv-comment-attachment-remove-chip:last-child {
    margin-right: 0;
}

/*****************************
 **  LV Data Loader Styles  **
 *****************************/

.data-loader-wrap.data-loader-transparent.lv-data-loader .data-loader div {
    background: #0096fd;
}

.data-loader-wrap.data-loader-transparent.lv-data-loader {
    background: transparent;
}


/*****************************
 **         Model            *
 *****************************/

.lv-model-tab-container {
    padding-bottom: 15px;
    padding-right: 15px;
    height: calc(100vh - 330px);
}

.lv-model-upload-container {
    display: flex;
    align-items: flex-start;
    max-width: 100%;
    min-height: 130px;
    padding: 10px;
    max-height: 100%;
    border: 1px solid gainsboro;
    border-radius: 5px;
}

.lv-add-new-model-popup {
    width: 650px;
}

.lv-styles-manage-bar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    align-items: center;
}

/*****************************
 **     Factory Manage       *
 *****************************/

.lv-add-new-factory-popup {
    width: 650px;
}

/*****************************
 **        Button            *
 *****************************/

.lv-icon-btn {
    cursor: pointer;
    background-color: transparent;
    padding: 10px;
    border: 0;
    color: black;
}

.lv-icon-btn:hover {
    color: var(--dcui-primary-color);
    background-color: transparent;
}

.lv-btn-no-fill {
    padding: 6px 15px 5px;
}

.lv-btn-no-border-no-fill {
    padding: 5px 15px;
    border: 0;
    color: #3F3F3F;
    background-color: transparent;
}

.lv-btn-no-border-no-fill:hover {
    background-color: transparent;
    color: var(--dcui-primary-color);
}

/*****************************
 **    text field styles     *
 *****************************/

.dc-text-field-container textarea.no-resize {
    resize: none;
}

/*****************************
 **    error styles     *
 *****************************/

.lv-error-msg-text {
    color: #d30505;
    font-size: 12px;
}

.lv-style-comment-item {
    display: flex;
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
}

/*****************************
 **    Typography classes    *
 *****************************/

.lv-text-black {
    color: rgba(0, 0, 0, 1);
}

.lv-text-dark-brown {
    color: rgba(60, 60, 60, 1);
}

.lv-typo-bold-700-f-30 {
    font-size: 30px;
    font-weight: 700;
}

.lv-typo-bold-700-f-24 {
    font-size: 24px;
    font-weight: 700;
}

.lv-typo-bold-700-f-20 {
    font-size: 20px;
    font-weight: 700;
}

.lv-typo-bold-600-f-16 {
    font-size: 16px;
    font-weight: 600;
}

.lv-typo-bold-600-f-24 {
    font-size: 24px;
    font-weight: 600;
}

.lv-typo-bold-600-f-20 {
    font-size: 20px;
    font-weight: 600;
}

.lv-typo-bold-500-f-15 {
    font-size: 15px;
    font-weight: 500;
}

.lv-typo-bold-500-f-16 {
    font-size: 16px;
    font-weight: 500;
}

.lv-typo-bold-500-f-17 {
    font-size: 17px;
    font-weight: 500;
}

.lv-typo-bold-500-f-20 {
    font-size: 20px;
    font-weight: 500;
}

.lv-typo-bold-500-f-26 {
    font-size: 26px;
    font-weight: 500;
}

.lv-typo-bold-400-f-24 {
    font-size: 24px;
    font-weight: 400;
}

.lv-typo-bold-500-f-24 {
    font-size: 24px;
    font-weight: 500;
}

.lv-typo-normal-300-f-12 {
    font-size: 12px;
    font-weight: 300;
}

.lv-typo-normal-400-f-12 {
    font-size: 12px;
    font-weight: 400;
}

.lv-typo-normal-400-f-14 {
    font-size: 14px;
    font-weight: 400;
}

.lv-typo-normal-300-f-14 {
    font-size: 14px;
    font-weight: 300;
}

/***********************/
/** logout ajax loader **/
/***********************/


#auth-login-container-anchor.doing-ajax {
    pointer-events: none;
}

#auth-login-container-anchor.doing-ajax .ajax-ellipsis-wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--dcui-secondary-color);
}

/***********************/
/** Date range picker **/
/***********************/

.lv-cal-no-border {
    border: 0;
}

.lv-cal-picker_div {
    /*display: table;*/
}

.lv-cal-no-border .lv-cal-triggerbutton {
    background-color: transparent;
    border: 0;
}

.lv-cal-no-border .lv-cal-triggerbutton.lv-cal-calender-opened {
    background-color: #eeeeee;
    border: 0;
}

.lv-cal-triggerbutton {
    padding: 3px;
    display: flex;
    min-width: 18em;
    border: 1px solid #d3d3d3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    background-color: transparent;
    width: 100%;
}

.lv-cal-calender-opened {
    border: 1px solid #0097ff;
}

.lv-cal-triggerbutton-text {
    flex-grow: 1;
    text-align: left;
    padding: 0.4em 1em;
    color: #555;
}

.lv-cal-triggerbutton-icon {
    margin-top: 5pt;
    padding: 0 5px;
}

.lv-cal-daterangepicker {
    font-family: Verdana, Arial, sans-serif;
    padding: 5px;
    border: 1px solid #aaa;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    background-color: #fff;
}

.lv-cal-button-panel {
    border-top: 1px solid #aaa;
}

.lv-cal-button-text {
    /* Placeholder for button text styles */
}

.lv-cal-button-primary,
.lv-cal-button-secondary {
    margin-top: 6px;
    margin-right: 6px;
}

.lv-cal-button-primary {
    font-weight: bold;
    padding: 5px 12px 5px;
    height: 30px;
}

.lv-cal-button-secondary {
    padding: 5px 12px 5px;
    height: 30px;
}

.lv-cal-flex-row {
    display: flex;
}

.lv-cal-calendar {
    padding: 2pt 4pt;
}

.lv-cal-cal_left,
.lv-cal-cal_right,
.lv-cal-cal_center {
    /* placeholders for CSS-rules in MonthCalendar.vue */
}

/**
    lv month calendar
 */
.lv-cal-calendar-header {
    display: flex;
    border: 1px solid #aaa;
    background-color: #DEDEDE;
    padding: .2em 0;
}

.lv-cal-cal_left > .lv-cal-calendar-header {
    -webkit-border-top-left-radius: 4px;
    -moz-border-top-left-radius: 4px;
    -ms-border-top-left-radius: 4px;
    border-top-left-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-bottom-left-radius: 4px;
    -ms-border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.lv-cal-cal_right > .lv-cal-calendar-header {
    -webkit-border-top-right-radius: 4px;
    -moz-border-top-right-radius: 4px;
    -ms-border-top-right-radius: 4px;
    border-top-right-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -moz-border-bottom-right-radius: 4px;
    -ms-border-bottom-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.lv-cal-calendar-title {
    margin: 0 0.65em;
    line-height: 1.8em;
    text-align: center;
    color: #222;
    font-weight: bold;
    flex-grow: 1;
    white-space: nowrap;
}

.lv-cal-prev-box,
.lv-cal-next-box {
    display: none;
    padding: 1pt 4pt;
    margin: 0 2px;
    border: 1px solid transparent;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
}

.lv-cal-cal_left .lv-cal-prev-box {
    display: table-cell;
}

.lv-cal-cal_right .lv-cal-next-box {
    display: table-cell;
}

.lv-cal-prev-box:hover,
.lv-cal-next-box:hover {
    border: 1px solid #999;
}

.lv-cal-arrow-active,
.lv-cal-arrow-disabled {
    vertical-align: middle;
    margin: auto;
}

.lv-cal-arrow-disabled {
    opacity: .35;
    filter: Alpha(Opacity=35);
}

.lv-cal-calendar-table {
    margin: 0 auto .4em;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: .9em;
}

.lv-cal-calendar-table th {
    padding: .7em .3em;
    text-align: center;
    font-weight: 700;
}

.lv-cal-calendar-table td {
    text-align: right;
    padding: 1px;
}

.lv-cal-calendar-weekend {
    color: red;
}

td.lv-cal-calendar-weeks {
    text-align: center;
}

.lv-cal-date-cell {
    border: 1px solid #D3D3D3;
    color: #555;
    display: block;
    padding: .2em;
}

.lv-cal-any-cell {
    background-color: #EEE;
    cursor: pointer;
}

.lv-cal-any-cell:hover {
    background-color: #DADADA;
}

.lv-cal-today-cell {
    background-color: #FCEFA1;
    cursor: pointer;
}

.lv-cal-any-cell:hover,
.lv-cal-today-cell:hover {
    border: 1px solid #999;
    color: #212121;
}

.lv-cal-disabled-cell {
    cursor: default;
    background-color: #E6E6E6;
    opacity: .35;
    filter: Alpha(Opacity=35);
}

.lv-cal-cell-weekend {
    color: red;
}

.lv-cal-period {
    color: #fff;
    background-color: #B0C4DE;
    cursor: pointer;
}

.lv-cal-period:hover {
    border: 1px solid #999;
}

/*****
 Present ranges
 */

/* CSS styles */
.lv-cal-presets {
    border-right: 1px solid #aaa;
    display: table-cell;
    vertical-align: top;
    padding: 2px 7px 7px 2px;
}

.lv-cal-ui-menu {
    white-space: nowrap;
    list-style: none;
    padding: 2px;
    margin: 0;
    display: block;
    outline: 0;
}

.lv-cal-ui-menu-item {
    cursor: pointer;
    margin: 0;
    padding: 0;
    width: 100%;
    list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}

.lv-cal-ui-menu-item:hover {
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    background: transparent;
    border: 1px solid #0097ff;
    margin: -1px;
    color: #212121;
}

.lv-cal-menu-item-text {
    display: block;
    padding: 2px .4em;
    line-height: 1.5;
    min-height: 0;
    font-weight: 400;
}

.lv-file-uploader-mini-load-container {
    width: 66px;
    height: 66px;
    position: absolute;
}

.lv-checkbox-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    flex-direction: row;
    gap: 5px;
}

.lv-checkbox-box .dcui-checkbox {
    width: 60px;
}


/***********************/
/**  No Styles found  **/
/***********************/

.lv-not-found-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lv-not-found-container img {
    width: 90px;
    margin-bottom: 15px;
    opacity: 0.8;
}

.lv-not-found-container .text-container {
    font-size: medium;
    font-weight: 600;
}


/***********************/
/**   Bar loader  **/
/***********************/

.lv-loading-bar-container {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
}

.lv-loading-bar {
    background-color: #3498db;
}

.lv-loading-bar-container .lv-loading-bar.hidden {
    display: none;
}

/***********************/
/**   Spinner loader  **/
/***********************/

.lv-spinner-loader-container {
    background-color: white;
    position: absolute;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lv-spinner-loader {
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(farthest-side, #16a8fc 94%, #0000) top/8px 8px no-repeat,
    conic-gradient(#0000 30%, #16a8fc);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
    animation: l13 1s infinite linear;
}

@keyframes l13 {
    100% {
        transform: rotate(1turn)
    }
}

/***********************/
/**   Global Search  **/
/***********************/

.lv-global-search-close-popup {
    position: absolute;
    background-color: transparent;
    top: 100px;
    left: 50%;
    z-index: 999 !important;
}

.lv-global-search-close-popup .close-text a i {
    transform: rotate(0deg);
    transition: all 0.5s ease-in-out;
}

.lv-global-search-close-popup .close-text a i:hover {
    transform: rotate(180deg);
}

.lv-global-search-close-popup .close-text {
    font-size: 25px;
    color: rgba(129, 129, 129, 1);
}

.lv-global-search-close-popup .close-text {
    font-size: 25px;
    color: rgba(129, 129, 129, 1);
}

.lv-global-search-container {
    position: absolute;
    background-color: #fff;
    min-width: 780px;
    max-width: 780px;
    top: 150px;
    left: 50%;
    transform: translate(-50%, 0);
    padding: 8px;
    box-shadow: 0px 1px 16px -7px rgba(66, 66, 66, 0.25);
    border-radius: var(--dcui-field-radius);
    overflow: hidden;
    z-index: 999 !important;
}

.lv-global-search-control.dcui-icon-control .dcui-ic-icon,
.lv-global-search-control .dcui-form-control,
.lv-global-search-control .dcui-form-control:focus {
    background-color: transparent;
    font-size: 20px;
}

.lv-global-search-icon-container img {
    opacity: 0.3;
}

.lv-global-search-app-icon {
    display: flex;
}

.lv-global-search-result-text-container {
    margin-left: 15px;
    flex: 1;
}

.lv-global-search-app-icon.large img {
    width: 60px;
}

.lv-global-search-app-icon.small img {
    width: 35px;
}

.lv-global-search-app-name {
    font-size: 20px;
    color: black;
}

.lv-global-search-nav-app-name {

}

.lv-global-search-nav-item {
    margin-bottom: 5px;
    padding: 5px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.lv-global-search-nav-item.selected {
    background-color: #d7efff;
}

.lv-global-search-nav-app-name-container {
    flex: 1;
    margin-left: 10px;
}

.lv-search-result-container .lv-search-result-content {
    display: flex;
    height: 500px;
}

.lv-search-result-container .lv-global-search-nav-container {
    width: 225px;
    padding-right: 12px;
    border-right: 1px solid #f5f3f3;
}

.lv-search-result-container .lv-global-search-results {
    flex: 1;
    padding: 20px;
}

.lv-search-result-container .lv-search-result-title {
    font-size: 15px;
    font-weight: 500;
    line-height: 18px;
    text-align: left;
}

.lv-search-result-container .lv-search-result-text {
    font-size: 26px;
    font-weight: 500;
    line-height: 31.2px;
    text-align: left;
    color: rgba(0, 0, 0, 1);
}

.lv-global-search-container .lv-search-container {
    height: 45px;
    background-color: rgba(242, 242, 242, 0.5);
    display: flex;
    align-items: center;
    padding-right: 5px;
}

.lv-global-search-container .lv-search-result-container {
    margin-top: 10px;
}

.lv-search-no-result-container-data-loader-container {
    height: 500px;
    position: relative;
}

.lv-global-search-container .lv-search-no-result-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 450px;
    margin: auto;
}

.lv-global-search-no-results-container {
    flex: 1;
    display: flex;
    max-width: 450px;
    flex-wrap: wrap;
    flex-direction: column;
}

.lv-global-search-no-results-container .lv-no-result-title {
    font-size: 30px;
    font-weight: 700;
    line-height: 36px;
    text-align: left;
}

.lv-global-search-no-results-container .lv-no-result-text {
    font-size: 14px;
    font-weight: 400;
    line-height: 16.8px;
    text-align: left;
    flex: 1;
    white-space: normal; /* Allow text to wrap */
    word-wrap: break-word; /* Break long words */
    overflow-wrap: break-word; /* Ensures compatibility with all browsers */
}

.lv-global-search-icon-container {
    min-width: 135px;
}

.lv-search-results-table {
    max-height: 400px;
}


/***********************/
/**     Load More     **/
/***********************/

.lv-load-more-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.lv-loading {
    position: relative;
    left: 65px;
}

.lv-no-more-items {
    text-align: center;
    padding: 10px;
}


/****************************/
/**    navigation drawer   **/
/***************************/

.dcui-navigation-drawer-card {
    padding: 0;
    height: 100%;
}

.dcui-navigation-drawer-name-container {
    padding: 20px;
    align-items: center;
}

.dcui-navigation-drawer-title {
    font-size: 24px;
    font-weight: 700;
    color: #3f3f3f;
}

.dcui-navigation-drawer-nav-items-container {
    height: calc(100vh - 155px);
}

.dcui-navigation-content {
    position: relative;
}

.dcui-navigation-content .dcui-navigator-text-container {
    display: flex;
    justify-content: space-between;
    flex: 1;
}

.dcui-navigation-content::after {
    content: "";
    position: absolute;
    top: 33px;
    left: 20px;
    height: calc(100% - 53px);
    width: 2px;
    border-left: 2px dotted #ededed;
    z-index: 0;
}

.dcui-navigation-content .item {
    display: flex;
    align-items: center;
    padding: 15px;
    height: 55px;
}

.dcui-navigation-content .item::before {
    position: relative;
    left: 2px;
    top: 1px;
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    -moz-border-radius: 7.5px;
    -webkit-border-radius: 7.5px;
    border-radius: 7.5px;
    background-color: #d9d9d9;
    margin-right: 10px;
    z-index: 1;
}

.dcui-navigation-content .item:hover {
    background-color: #e6f5ff;
    cursor: pointer;
}

.dcui-navigation-content .item .icon {
    font-size: 20px;
    margin-right: 5px;
    width: 25px;
}

.dcui-navigation-content .item.selected {
    background-color: #e6f5ff;
    color: #0096fd;
    position: relative;
}

.dcui-navigation-content .item.selected::after {
    content: '';
    position: absolute;
    top: 17px;
    right: 10px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #00a0fa;
}

.dcui-navigation-content .item::before {
    font-family: "Font Awesome 6 Pro";
    position: relative;
    left: 2px;
    top: 1px;
    color: white;
    font-weight: 900;
    display: flex; /* Change from block to flex */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    width: 8px;
    height: 8px;
    font-size: 7px;
    line-height: 9px;
    text-align: center;
    -moz-border-radius: 7.5px;
    -webkit-border-radius: 7.5px;
    border-radius: 7.5px;
    margin-right: 10px;
    z-index: 1;
}

/*****************************
 **  dcui Loader Styles  **
 *****************************/

.data-loader-wrap.data-loader-transparent.dcui-data-loader .data-loader div {
    background: #0096fd;
}

.data-loader-wrap.data-loader-transparent.dcui-data-loader {
    background: transparent;
}


/**************
 *   Layout   *
 **************/


.dc-ui-layout-report {
    height: calc(100vh - 60px);
}

.dcui-plain-comp-card {
    padding: 0;
    height: 100%;
}

.dcui-plain-top-section {
    padding: 30px;
    background-color: #d6ecf8;
}

.dcui-plain-top-container {
    display: flex;
    justify-content: space-between;
}

.dcui-plain-top-left-container {
    display: flex;
}

.dcui-plain-top-right-container {
    display: flex;
}

.dcui-plain-middle-container {
    padding: 30px;
    padding-bottom: 0;
}

.docld-pms-process-task-card-link:hover {
    color: inherit;
}

.docld-plain-middle-container {
    position: relative;
    height: calc(100vh - 250px);
    padding-right: 15px;
}

/****************************
 * Target Collection Report *
 ****************************/

.docld-pms__target-collection-report__nav-bar__dropdown .dcui-dropdown-panel {
    min-width: 230px;
}

.docld-pms__target-collection-report__nav-bar__dropdown__btn {

}

/****************************
 * Mention box css *
 ****************************/

.docld-mention-box-container {
    position: relative;
    color: #abb2ba;
}

.docld-mention-box-container__mention-popup {
    position: absolute;
    bottom: 50px;
    width: calc(100% + 45px);
    background-color: #fff;
    border: 1px solid rgba(191, 191, 191, 0.3);
    border-radius: var(--dcui-field-radius);
    box-shadow: 0px 1px 16px -7px rgba(66, 66, 66, 0.25);
    z-index: 1;
}

.docld-mention-box-container__mention-popup__tab-section {
    border-bottom: 1px solid #dbdbdb;
    padding: 15px 15px;
}

.docld-mention-box-container__mention-popup__tab-section__tab-item {

}

.docld-mention-box-container__mention-popup__tab-section__tab-item__text {

}

.docld-mention-box-container__user-container {

}

.docld-mention-box-container__user-container__title {
    padding: 8px 15px 8px;
}

.docld-mention-box-container__user-container__item-container {
    max-height: 170px;
}

.docld-mention-box-container__user-container__item {
    display: flex;
    align-items: center;
    padding: 10px 0px 10px 15px;
    gap: 5px;
}

.docld-mention-box-container__user-container__item:hover {
    background-color: #d6ecf8;
    cursor: pointer;
}

.docld-mention-box-container__user-container__item-avatar {

}

.docld-mention-box-container__user-container__item__full-name {

}

.docld-mention-box-container__mention-info-container {
    border-top: 1px solid #dbdbdb;
    height: 20px;
}

.docld-mention-box-container__mentioned-users__container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.docld-mention-box-container__mentioned-users__container__item {
    display: flex;
    padding: 5px;
    border: 1px solid #d6ecf8;
    border-radius: 8px;
    gap: 5px;
}

.docld-mention-box-container__mentioned-users__container__item__text {
    color: rgb(125 201 251);
}

.docld-mention-box-container__mentioned-users__container__item__close-container {
    color: rgb(0 150 253 / 50%);
}

.docld-mention-box-container__mentioned-users__container__item__close-container:hover {
    cursor: pointer;
}

.docld-mention-box-container__user-container__no-users {
    text-align: center;
    padding-bottom: 15px;
    display: flex;
    justify-content: center;
    gap: 5px;
}

.docld-mention-box-container__user-container__no-users__icon {
}

.docld-mention-box-container__user-container__no-users__text {
}

.lv-style-due-date {
    color: var(--dcui-success-color);
    text-wrap: nowrap;
}

.lv-style-due-date.lv-style-due {
    color: var(--dcui-danger-color);
}

.lv-process-task-table-load_more .lv-load-more-container {
    padding-top: 10px;
}

.dcui-photo-bubble.dcui-large.docld-pms-single__top-bar__container__left-section__assignee__container__image {
    width: 25px;
    height: 25px;
    min-width: 25px;
    min-height: 25px;
    margin-bottom: 0;
}

/* Custom CSS - lv_pms_test */
.justify-space-between {
    justify-content: space-between;
}

.min-w-half {
    min-width: 50%;
}

.w-half {
    width: 50%;
}

.lv-task-card-featured_status {
    overflow: hidden;
    white-space: nowrap;
} @media screen and (max-width: 1600px) {

    .lv-process-single-nav {
        padding-right: 0;
    }

    .lv-process-name-container .lv-process-stage-nav-dropdown.lv-dropdown .dcui-dropdown-panel {
        width: 200px;
    }

}

@media screen and (max-width: 1440px) {

    .lv-process-navigator-title {
        font-size: 22px;
    }

    .lv-process-single-nav {
        padding-right: 0;
    }

    .lv-process-name-container .lv-process-stage-nav-dropdown.lv-dropdown .dcui-dropdown-panel {
        width: 190px;
    }

}

@media screen and (max-width: 1366px) {

    .lv-process-navigator-title {
        font-size: 22px;
    }

    .lv-process-single-nav {
        padding-right: 0;
    }

    .docld-pms-dash-wrapper {
        width: 80%;
    }

    .lv-process-name-container .lv-process-stage-nav-dropdown.lv-dropdown .dcui-dropdown-panel {
        width: 240px;
    }

}

@media screen and (max-width: 1366px) and (orientation: portrait) {

    .docld-pms-dash-wrapper {
        width: 90%;
    }

    .lv-style-single-middle-container {
        display: flex;
        flex-direction: column-reverse;
        height: 100%;
        overflow: auto;

    }

    .lv-process-single {
        width: 100%;
    }

    .docld-pms-single__show-hide__stages-nav {
        display: block;
    }

    .lv-process-single-nav {
        position: absolute;
        display: none;
        z-index: 2;
        top: 0;
    }

    .lv-process-single-nav.show {
        display: block;
    }

    .lv-pro-welcome-dash-stats-container .stats-item {
        width: 160px;
    }

    .lv-temp-upload-container {
        width: 150px;
    }

    .lv-temp-upload-container .lv-file-uploader-container .text-container {
        text-align: center;
    }

    .lv-style-overview {
        margin-top: 10px;
    }

    .lv-tabs .dcui-bt-tab.active {
        width: 100%;
    }

}

@media screen and (max-width: 1281px) {
    /* hi-res laptops and desktops */
}

@media screen and (max-width: 1025px) {
    /* big landscape tablets, laptops, and desktops */
    .lv-process-name-container .lv-process-stage-nav-dropdown.lv-dropdown .dcui-dropdown-panel {
        width: 170px;
    }

    .docld-pms-widget-quick-links-widget__container {
        min-height: 40px;
    }

    .docld-pms-widget-style-overview__container__content {
        min-height: 55px;
    }

    .docld-pms-widget-recent-activities__container {
        min-height: 430px;
    }

    .docld-pms-dash-content__middle-content__right {
        padding-top: 15px;
    }

    .docld-pms-dash-available-apps {
        padding-top: 15px;
    }

    .lv-pro-welcome-dash-stats-container .stats-item {
        width: 31.4%;
    }
    .docld-pms-single__top-bar__container__content{

    }
    .docld-pms-single__top-bar__container__text_container__name{
        font-size: 23px;
    }
    .docld-pms-single__top-bar__container__left-section{
        display: flex;
        justify-content: flex-end;
        margin-top: 15px;
    }
    .docld-pms-single__top-bar__container__left-section__target-collection__container__value{
        font-size: 16px;
    }
    .lv-style-single-style-name-section__style-id,
    .lv-style-single-style-name-section__style-name,
    .lv-style-single-style-name-section__stage-name{
        font-size: 23px;
    }

    .lv-single-btn{
        padding: 9px 20px 8px;
    }

    .lv-style-single-middle-container-top{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .lv-style-single-style-name-section{
        width: 100%;
    }
    .lv-style-single-stage-info-container{
        width: 100%;
        margin-top: 15px;
        margin-left: 0;
        padding-bottom: 5px;
    }

    .docld-pms-single__middle-container__middle-container{
        flex-direction: column;
    }

    .docld-pms-single__middle-container__middle-container__form-container{
        width: 100%;
    }

    .docld-pms-single__middle-container__middle-container__task-container{
        width: 100%;
        margin-left: 0;
        margin-top: 15px;
    }


}

@media screen and (max-width: 961px) {

    .popup{
        min-width: auto !important;
    }

    .lv-temp-upload-container{
        width: 100%;
    }

    /* tablet, landscape iPad, lo-res laptops ands desktops */
    .lv-pro-welcome-dash-stats-container .stats-item {
        width: 30%;
    }

    .lv-style-single-info-panel{
        height: calc(100vh - 408px);
        position: relative;
    }

    .lv-style-single-stage-info-container{
        margin-bottom: 15px;
    }

    .docld-pms-create__new-style__container {
        flex-direction: column;
    }

    .docld-pms-create__new-style__container__style-upload {
        margin-left: 0;
        margin-top: 25px;
    }

    .docld-pms-create__new-style__container__style-form {
        width: 100%;
    }

    .docld-pms-prod__container__main__top-bar__content__left-container__name-container__welcome-text,
    .docld-pms-prod__container__main__top-bar__content__right-container__sections__value{
        font-size: 23px;
    }
}

@media only screen and (max-width: 800px) and (orientation: portrait) {
    /* PORTRAIT:
    Acer Iconia Tab A100
    Acer Iconia Tab A200
    Acer Iconia Tab A502
    Arnova 8C G3
    ASUS Padfone
    ASUS Transformer Pad TF300T
    ASUS Transformer TF101
    Motorola Xoom
    Motorola Xoom 2
    Samsung Galaxy Note 10.1
    Samsung Galaxy Tab 8.9
    Samsung Galaxy Tab 10.1
    Samsung Galaxy Tab 10.1*/
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
    /* PORTRAIT:
    Apple iPad
    Apple iPad 2
    Apple iPad 3 (and 4)
    Apple iPad Mini
    Archos 80G9
    BAUHN AMID-972XS
    HP Touchpad
    LG Optimus Pad
    Microsoft Surface (RT)
    Panasonic Toughpad A1
    Kindle Paperwhite*/
}

@media screen and (max-width: 641px) {
    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
}

@media only screen and (max-width: 640px) and (orientation: portrait) {
    /* PORTRAIT:
    Acer Iconia Tab A500
    Arnova 7FG3
    Nexus 7*/
}

@media only screen and (max-width: 600px) and (orientation: portrait) {
    /* PORTRAIT:
    Acer Iconia Tab A101
    Archos 70b (it2)
    Arnova 10b G3
    BlackBerry PlayBook
    Kindle 3
    Kobo eReader Touch
    Samsung Galaxy Tab 2 7.0
    Samsung Galaxy Tab 7*/
}

@media only screen and (max-width: 540px) and (orientation: portrait) {
    /* PORTRAIT:
    HTC Evo 3D
    Kindle Fire HD 7
    Kindle Fire HD 8.9
    Ainol Novo 7 Elf 2*/
}

@media screen and (max-width: 481px) {
    /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
}

@media only screen and (max-width: 480px) and (orientation: portrait) {
    /* PORTRAIT:
    Arnova 7 G2
    BlackBerry Bold 9780
    HTC Desire Z
    Nokia N900
    Samsung Galaxy Grand*/

    .docld-pms-prod__container__main__top-bar__content__right-container{
        flex-direction: column;
    }
}

@media only screen and (max-width: 400px) and (orientation: portrait) {
    /* PORTRAIT:
    Samsung Galaxy Note
    Nexus 4
    HTC One S
    HTC One XL
    HTC Sensation XL
    HTC Velocity 4G
    Motorola Droid3
    Motorola Droid Razr
    Motorola Razr HD 4G
    Motorola Razr M 4G
    Nokia 500
    Samsung Galaxy Note 2
    Samsung Galaxy S3
    BlackBerry Bold 9900
    BlackBerry 9520
    BlackBerry Z10*/
}


@media only screen and (max-width: 360px) and (orientation: portrait) {
    /* PORTRAIT:
    Apple iPhone 3G
    Apple iPhone 3GS
    Apple iPhone 4
    Apple iPhone 4S
    Apple iPhone 5
    Apple iPod Touch
    BlackBerry Bold 9360
    BlackBerry Bold 9790
    BlackBerry Curve 9320
    BlackBerry Curve 9380
    BlackBerry Torch 9800
    BlackBerry Torch 9810
    HP Veer
    HTC 7 Mozart
    HTC 7 Trophy
    HTC Desire
    HTC Desire C
    HTC Desire HD
    HTC Legend
    HTC One V
    HTC Titan 4G
    HTC Wildfire S
    HTC Windows Phone 8X
    Huawei U8650
    LG Optimus 2X
    LG Optimus L3
    Motorola Defy
    Motorola Milestone
    Nexus S
    Nokia Lumia 610
    Nokia Lumia 710
    Nokia Lumia 800
    Nokia Lumia 820
    Nokia Lumia 900
    Nokia Lumia 920
    Samsung Galaxy Ace
    Samsung Galaxy Ace 2
    Samsung Galaxy S2
    Sony Xperia E Dual
    BlackBerry Curve 9300*/
}

@media screen and (max-width: 320px) {
    /* smartphones, iPhone, portrait 480x320 phones */
}
 /* La Vivente Inventory — app-specific layout glue.
 * Mirrors la_vivente_pms's two-column production layout: a full-height row with
 * a no-padding nav card and a no-padding main card whose header is an in-card
 * light-blue top bar. Shared look (cards, tables, buttons) comes from DC UI Kit.
 *
 * IMPORTANT: this stylesheet is concatenated into the sitewide app-styles bundle
 * together with every other installed app's CSS. Any rule that targets a shared
 * class (dcui-*, lv-*, popup, …) MUST be scoped under .lvi-app (the SPA root,
 * see lv_inventory.js) or another lvi-* ancestor, or it will restyle the other
 * apps (this bit la_vivente_pms dropdowns once — bordered, full-width toggles). */

/* Mirrors la_vivente_pms's identical global so this app stands alone. Kept
   deliberately UNscoped: at (0,1,0) the later .lvi-module-sidebar / .lvi-main-card
   padding rules override it by source order; an .lvi-app prefix would out-rank
   them and strip the sidebar/main-card padding. Identical to the pms rule, so it
   cannot restyle other apps. */
.lv-no-padding { padding: 0; }

/* Portrait nav toggle + backdrop: desktop hides both (nav is always visible). */
.lvi-show-hide-nav { display: none; margin-bottom: 12px; }
.lvi-nav-overlay { display: none; }

/* Full-height two-column shell */
.lvi-shell {
    height: calc(100vh - 60px);
    overflow: hidden;
    position: relative;
}

.lvi-nav-col,
.lvi-main-col {
    height: 100%;
    position: relative; /* bounds root-level Data_Loaders to the main column, not the nav */
}

/* Module sidebar (nav) card */
.lvi-module-sidebar {
    height: 100%;
    padding: 20px 12px;
    /* Lay the card out as a column so the storage tree takes the remaining
       height and scrolls instead of overflowing the card. */
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.lvi-ms-warehouse {
    margin-bottom: 16px;
}

/* Taller options panel than the 140px dropdown default: the warehouse list is
   the app's main navigation switch, so show more of it before scrolling.
   (The uncapped panel + single scroller this used to also set is now the generic
   behaviour for every create-footer dropdown — see the .lvi-dropdown-create block.) */
.lvi-ms-warehouse .lv-dropdown .lv-dropdown-scrollable {
    max-height: 240px;
}

.lvi-ms-warehouse-label {
    font-size: 24px;
    font-weight: 700;
}

.lvi-ms-nav,
.lvi-module-sidebar .dcui-navigation-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* These top links sit beside the storage-level tree and must read at the same
   weight as those rows. Drop the dc_ui_kit stepper bullet (.item::before) and
   the global 55px row height so spacing/size matches .lvi-tree-row. */
.lvi-module-sidebar .dcui-navigation-content .item::before {
    content: none;
    display: none;
}

/* Suppress the global dc_ui_kit selected-item triangle; this sidebar renders
   its own caret (.lvi-ms-caret), so the global ::after is a duplicate arrow. */
.lvi-module-sidebar .dcui-navigation-content .item.selected::after {
    content: none;
    display: none;
}

/* Drop the dc_ui_kit stepper connector line (the dotted vertical rule the
   global .dcui-navigation-content::after draws down the icon column). These
   top links aren't a stepper, so the leftover line is just visual noise. */
.lvi-module-sidebar .dcui-navigation-content::after {
    content: none;
    display: none;
}

/* Selectors include .dcui-navigation-content so they out-specify the global
   dc_ui_kit rules (.dcui-navigation-content .item{height:55px}, icon 20px),
   which are concatenated after this file in assets/app-styles.css. */
.lvi-module-sidebar .dcui-navigation-content .item {
    display: flex;
    align-items: center;
    gap: 9px;
    height: auto;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    color: #5a6472;
    font-size: 14px;
}

.lvi-module-sidebar .item:hover {
    background-color: #e6f5ff;
}

.lvi-module-sidebar .item.selected {
    background-color: #e6f5ff;
    color: #0096fd;
    font-weight: 600;
}

.lvi-module-sidebar .dcui-navigation-content .item .icon {
    width: 22px;
    text-align: center;
    font-size: 15px;
}

.lvi-ms-caret {
    margin-left: auto;
    color: #0096fd;
}

.lvi-ms-tree {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-top: 1px solid #ededed;
    padding-top: 14px;
    /* Fill the leftover sidebar height; the head stays put and the tree scrolls. */
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.lvi-ms-tree .lvi-storage-tree {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Slim scrollbar to match the list-table scroller. */
    scrollbar-width: thin;
    scrollbar-color: #c5ccd6 transparent;
}
.lvi-ms-tree .lvi-storage-tree::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.lvi-ms-tree .lvi-storage-tree::-webkit-scrollbar-thumb {
    background: #c5ccd6;
    border-radius: 8px;
}
.lvi-ms-tree .lvi-storage-tree::-webkit-scrollbar-track {
    background: transparent;
}

.lvi-ms-tree-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    color: #5a6472;
    font-size: 14px;
    cursor: pointer;
}

.lvi-ms-tree-item:hover {
    color: #0096fd;
}

/* Main content card */
.lvi-main-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* In-card top bar (title banner) */
.lvi-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px;
    background-color: #d6ecf8;
}

.lvi-top-bar-left {
    display: flex;
    align-items: center;
}

.lvi-top-bar-icon {
    font-size: 40px;
    margin-right: 15px;
    display: flex;
    align-items: center;
    color: #1f2a37;
}

.lvi-top-bar-titles {
    display: flex;
    flex-direction: column;
}

.lvi-top-bar-title {
    font-size: 30px;
    font-weight: 700;
    color: #000;
}

.lvi-top-bar-sub {
    font-size: 16px;
    font-weight: 500;
    color: #1f2a37;
}

.lvi-top-bar-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* Outline buttons stay outline on hover (the kit default fills them solid). */
.lvi-app .dcui-button.dcui-button-no-fill.lv-btn-no-fill:hover {
    background-color: rgba(0, 150, 253, 0.08);
    color: var(--dcui-primary-color);
}

/* Header "Quick Actions" block (label above the action buttons) */
.lvi-quick-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.lvi-quick-actions-label {
    font-size: 13px;
    font-weight: 600;
    color: #1f2a37;
}

/* Filter row under a section's sub-title (e.g. the overview Active/All-time toggle) */
.lvi-overview-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

/* Middle (content below the top bar) */
.lvi-middle {
    flex: 1 1 auto;
    min-height: 0;
    padding: 30px 15px;
    overflow: auto;
    /* Positioning context for the absolute Data_Loader overlay: without one it
       climbs to .lvi-shell and whites out the whole page (header, filters, nav)
       instead of just the loading region. Same reason on .lvi-table-scroll,
       .lvi-detail-main, .lvi-main-col and the activity-sidebar scroll parents. */
    position: relative;
}

.lvi-table-scroll {
    max-height: calc(100vh - 280px);
    position: relative; /* bounds the Data_Loader overlay to the list */
}

/* Manage bar (subtitle + search) */
.lvi-manage-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.lvi-sub-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

/* Detail / create modals (LviShipmentDetail, LviOrderDetail, *CreateForm) */
.lvi-detail,
.lvi-form {
    min-width: 520px;
    max-width: 760px;
}

.lvi-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px;
    margin-bottom: 8px;
}

.lvi-detail-grid > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lvi-activity-feed {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lvi-activity-feed li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid #eef0f4;
    font-size: 14px;
}

.lvi-activity-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.lvi-activity-chip {
    border: 1px solid #d7dbe3;
    background: #fff;
    color: #4a5160;
    border-radius: 999px;
    padding: 4px 14px;
    font-size: 14px;
    cursor: pointer;
}

.lvi-activity-chip.active {
    background: #2f6df6;
    border-color: #2f6df6;
    color: #fff;
}

.lvi-activity-day {
    margin-top: 28px;
    margin-bottom: 18px;
}
/* No leading gap on the first group (it sits right under the filter header). */
.lvi-activity-day:first-child {
    margin-top: 0;
}

.lvi-activity-day-header {
    font-size: 16px;
    font-weight: 700;
    color: #1f2430;
    margin: 4px 0 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e6e8ec;
}

.lvi-activity-loadmore {
    border: 1px solid #d7dbe3;
    background: #fff;
    color: #2f6df6;
    border-radius: 6px;
    padding: 6px 18px;
    font-size: 13px;
    cursor: pointer;
}

.lvi-activity-loadmore:disabled {
    opacity: 0.6;
    cursor: default;
}

.lvi-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lvi-line-row {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.lvi-app .lv-dropdown,
.lvi-app .lv-dropdown .dcui-dt-label {
    width: 100%;
}
.lvi-line-row .lv-dropdown .dcui-dt-label {
    border: 1px solid var(--dcui-line-color);
    background-color: #fff;
}
.lvi-line-row .dcui-form-group {
    margin: 0;
}

.lvi-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Inventory create forms adopt the pms bordered label/input row layout
   (lv-border-container + <lvi-form-row>). Size the card to the form column and
   strip the inner control chrome so lvi-dropdown / dc-input-field sit flush in each
   row — like the pms Create-Style form — and drop the now-redundant per-control
   labels (the row's left cell supplies the label). */
.lvi-form .lv-border-container {
    flex: none;
    margin-right: 0;
}
.lvi-form .lv-border-container .dcui-fld-label {
    display: none;
}
.lvi-form .lv-border-container .dcui-form-control,
.lvi-detail-formrow .dcui-form-control {
    border: 0 !important;
    box-shadow: none !important;
    background-color: transparent;
    /* Keep the framework's default 10px left padding so the input value lines up
       with the dropdown label (which is also inset 10px) in the same row. */
}
.lvi-form .lv-border-container .dcui-form-group,
.lvi-detail-formrow .dcui-form-group {
    width: 100%;
    margin: 0;
}
/* The datepicker input ships its own border/fill (--dcui-calendar-input-*);
   inside a bordered row it sits flush like every other control. */
.lvi-form .lv-border-container .dcui-calendar .input-field input,
.lvi-detail-formrow .dcui-calendar .input-field input {
    border: 0;
    background-color: transparent;
    box-shadow: none;
}
.lvi-form .lv-border-container .dcui-calendar,
.lvi-detail-formrow .dcui-calendar {
    width: 100%;
}

/* Textareas never resize horizontally (it breaks the fixed form column); inside
   the bordered create-form rows the row supplies the height, so no resizing at
   all there. */
.lvi-app textarea {
    resize: vertical;
}
.lvi-form .lv-border-container textarea,
.lvi-detail-formrow textarea {
    resize: none;
}
/* Single-line inputs are vertically centered in a taller min-height row, so their
   fill gains ~10px of breathing room above and below. A textarea instead sizes its
   own value cell to its height, leaving its fill flush against the row's top and
   bottom edges. Give it matching vertical margin so it reads consistently inset. */
.lvi-detail-formrow textarea {
    margin: 10px 0;
}

/* Constrain the create popups to the form width — the default .popup is
   block-level and stretches to max-width:95%, leaving the form card stranded in
   a huge empty modal. We have no second (gallery) column, so size to the form. */
.popup.lvi-create-popup {
    width: 760px;
    /* The framework .popup sets overflow:hidden (for its rounded corners), which
       clips the dropdown panel when it opens near the modal's bottom edge. Allow
       it to extend past the modal instead of being cut off; the popup-container
       remains the scroll-container for tall forms. */
    overflow: visible;
}

/* Top-anchor the create popups (like la_vivente_pms and the framework default,
   margin: 50px auto) rather than vertically centering them. The .popup-container
   is overflow-y:auto, so tall forms still scroll without clipping the top. */
.popup.lvi-create-popup {
    margin: 50px auto;
}
.lvi-create-popup .lvi-form {
    max-width: none;
    min-width: 0;
}

/* Confirmation popup (Change Stage). Same centering treatment as the create
   popups, but sized down to a compact confirm dialog instead of full width. */
.popup.lvi-confirm-popup {
    width: 440px;
    margin: 50px auto;
}

/* Put Away dialog: the only confirm popup that hosts a bordered <lvi-form> + a
   searchable dropdown (the rest are text-only). Two fixes vs the plain confirm
   popup: (1) .lvi-form defaults to min-width:520px, wider than the 440px dialog,
   so its bordered card overflowed and the framework .popup{overflow:hidden}
   clipped the right border — size the form to the dialog instead; (2) allow the
   open dropdown panel to extend past the modal edge rather than being clipped
   (mirrors .lvi-create-popup / .lvi-warehouse-popup). */
.popup.lvi-putaway-popup {
    overflow: visible;
}
.lvi-putaway-popup .lvi-form {
    min-width: 0;
    max-width: none;
}

/* Put Away manage dialog (LviShipmentPutawayPopup): move-request history + a
   variable number of allocation rows can make this taller than the viewport.
   Left to the framework, .popup-container scrolls the *whole card* (title, body
   and footer as one unit) inside the page — so the "Create Putaway" footer scrolls
   off-screen. Cap the card to the viewport instead and scroll only its body, so the
   title stays a fixed header and the actions stay pinned. The dropdown panel is a
   fixed-position popper (LviDropdown.positionPanel) so overflow:hidden here never
   clips it. */
.popup.lvi-putaway-manage-popup {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 100px); /* .lvi-confirm-popup margin: 50px top+bottom */
    overflow: hidden;
}
/* The unclassed DcPopup wrapper around the content slot must pass the height
   constraint down to .lvi-form so the inner scroll region can bound itself. */
.lvi-putaway-manage-popup > div:has(> .lvi-form) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.lvi-putaway-manage-popup .lvi-form {
    min-width: 0;
    max-width: none;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.lvi-putaway-manage-popup .lvi-putaway-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Room so a scrollbar doesn't overlap the tables' right edge. */
    margin-right: -4px;
    padding-right: 4px;
}
.lvi-putaway-manage-popup .lvi-form-actions {
    flex: 0 0 auto;
}

/* Full detail page (LviShipmentDetailPage / LviOrderDetailPage) */
.lvi-detail-page {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.lvi-detail-page-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    border-bottom: 1px solid #eef0f4;
    font-size: 13px;
}

.lvi-back-link { color: #0096fd; cursor: pointer; font-weight: 600; }
.lvi-breadcrumb-sep { color: #c4ccd6; }
.lvi-breadcrumb-current { color: #6b7585; }

.lvi-detail-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    background: #f3f9ff;
    border-bottom: 1px solid #e6eef6;
}

.lvi-detail-topbar-left { display: flex; align-items: center; gap: 14px; }
.lvi-detail-topbar-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0096fd;
    color: #fff;
    font-size: 20px;
}
.lvi-detail-topbar-title { font-size: 22px; font-weight: 700; }
.lvi-detail-topbar-sub { font-size: 13px; color: #8a94a6; }
/* Resource status label, stacked directly under the detail title. */
.lvi-detail-topbar-status { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 600; }
/* Resource action buttons (+ optional stage-change select) in the title band. */
.lvi-detail-topbar-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.lvi-stage-select { width: 190px; }

.lvi-section-title { display: block; margin: 0 0 12px; }

.lvi-detail-body {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 320px;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
}

.lvi-detail-main {
    min-width: 0;
    padding: 20px;
    overflow: auto;
    /* Reserve the scrollbar's width on both edges so the 20px padding reads the
       same left and right, and so content doesn't shift when the pane grows past
       one screen and the scrollbar appears. */
    scrollbar-gutter: stable both-edges;
    position: relative; /* bounds the Data_Loader overlay to the detail pane */
}
/* The pms stylesheet (which loads sitewide) gives every .lv-border-container a
   25px right margin for its two-column forms. Detail-page cards are full width,
   so that margin only pushes their right edge 25px inside the pane's padding —
   the create forms already drop it the same way. */
.lvi-detail-main .lv-border-container { margin-right: 0; }

/* Read-only stage stepper (LviStageGraph) — adapted from pms ProcessStageNavigation */
.lvi-stage-graph {
    border-right: 1px solid #eef0f4;
    padding: 20px;
}

.lvi-stage-graph-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #8a94a6;
    margin-bottom: 14px;
}

.lvi-stage-list {
    position: relative;
}

.lvi-stage-list::before {
    content: "";
    position: absolute;
    top: 18px;
    bottom: 18px;
    left: 13px;
    width: 0;
    border-left: 2px dotted #d9dee6;
    z-index: 0;
}

.lvi-stage-list .item {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
}

.lvi-stage-node {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 2px solid #e2e6ec;
    color: #c4ccd6;
    font-size: 12px;
}

.lvi-stage-label {
    font-size: 14px;
    color: #6b7585;
}

/* Stage node states — vocabulary + colors mirror the pms process-navigator
   (success / current / skipped / current_completed / current_rejected /
   where_rejected) so statuses read at a glance. The shipment flow uses a subset
   (success/current/upcoming/terminal); the rest are styled for reuse. */
.lvi-stage-list.busy { opacity: 0.6; pointer-events: none; }

.lvi-stage-list .item.clickable {
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.12s ease;
}
.lvi-stage-list .item.clickable:hover { background-color: #e6f5ff; }
.lvi-stage-list .item.clickable:hover .lvi-stage-label { color: #0096fd; }

.lvi-stage-list .item.success .lvi-stage-node {
    border-color: #21a83c;
    background-color: #21a83c;
    color: #fff;
}
.lvi-stage-list .item.success .lvi-stage-label { color: #3a4452; }

.lvi-stage-list .item.current .lvi-stage-node {
    border-color: #0096fd;
    background-color: #0096fd;
    color: #fff;
}
.lvi-stage-list .item.current .lvi-stage-label { color: #0096fd; font-weight: 600; }

.lvi-stage-list .item.skipped .lvi-stage-node {
    border-color: #a3a3a3;
    background-color: #a3a3a3;
    color: #fff;
}
.lvi-stage-list .item.skipped .lvi-stage-label { color: #6b7585; }

.lvi-stage-list .item.current_completed .lvi-stage-node {
    border-color: #16b10b;
    background-color: #16b10b;
    color: #fff;
}
.lvi-stage-list .item.current_completed .lvi-stage-label { color: #16b10b; font-weight: 600; }

.lvi-stage-list .item.current_rejected .lvi-stage-node,
.lvi-stage-list .item.where_rejected .lvi-stage-node,
.lvi-stage-list .item.terminal .lvi-stage-node {
    border-color: #f15f5f;
    background-color: #f15f5f;
    color: #fff;
}
.lvi-stage-list .item.current_rejected .lvi-stage-label,
.lvi-stage-list .item.where_rejected .lvi-stage-label,
.lvi-stage-list .item.terminal .lvi-stage-label { color: #f15f5f; }

.lvi-confirm-text { font-size: 14px; color: #3a4452; }

/* Tabbed activity/comments sidebar — reuses pms .lv-tabs + comment/activity
   classes (global styles); these rules lay it out in the page's 3rd column. */
.lvi-activity-sidebar {
    display: flex;
    flex-direction: column;
    /* Fill the column-flex .dcui-csp-body so the comment list can grow and the
       input stays pinned to the bottom even with few/no comments. */
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    border-left: 1px solid #eef0f4;
    background: #fff;
    padding: 16px;
}
.lvi-sidebar-header { margin-bottom: 8px; }
.lvi-activity-sidebar .lvi-sidebar-tabs { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
/* Make the tab panel + scroll containers fill the column height */
.lvi-activity-sidebar .dcui-bt-panel { flex: 1 1 auto; min-height: 0; display: flex; }
.lvi-activity-sidebar .dcui-bt-tab.active { flex: 1 1 auto; min-height: 0; width: 100%; }
.lvi-activity-sidebar .full-height { height: 100%; }
.lvi-activity-sidebar .lv-task-comment-container-parent,
.lvi-activity-sidebar .lv-task-activity-container-parent {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
    position: relative; /* bounds the tab's Data_Loader to the sidebar panel */
}

@media (max-width: 900px) {
    .lvi-detail-body { grid-template-columns: 1fr; }
    .lvi-stage-graph { border-right: none; border-bottom: 1px solid #eef0f4; }
    .lvi-detail-main { border-bottom: 1px solid #eef0f4; }
    .lvi-activity-sidebar { border-left: none; min-height: 380px; }
}

@media (max-width: 600px) {
    .lvi-detail,
    .lvi-form { min-width: 0; }
    .lvi-detail-grid { grid-template-columns: 1fr; }
    .lvi-line-row { grid-template-columns: 1fr 1fr; }
}

/* Overview stat cards */
.lvi-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

/* 3-card variant (e.g. item detail Stocks tab): wider columns so values like
   "Rs. 2,600.00" stay on one line instead of wrapping in a narrow 1/4 column. */
.lvi-stat-grid--3up {
    grid-template-columns: repeat(3, 1fr);
}
.lvi-stat-grid--3up .lvi-stat-value {
    white-space: nowrap;
}

.lvi-stat-icon {
    color: #0096fd;
    margin-bottom: 8px;
}

.lvi-stat-value {
    font-size: 30px;
    font-weight: 700;
    color: #000;
}

.lvi-stat-label {
    color: #8a94a3;
    font-size: 14px;
}

.lvi-segmented-toggle { display: inline-flex; gap: 4px; font-size: 13px; line-height: 1.2; cursor: pointer; user-select: none; }
.lvi-segmented-toggle span { padding: 3px 10px; border-radius: 999px; color: #8a94a6; background: #f1f3f7; }
.lvi-segmented-toggle span.is-on { color: #fff; background: #0096fd; }

.lvi-util-row { display: grid; grid-template-columns: 160px 1fr; gap: 12px; align-items: center; padding: 8px 5px; }
.lvi-util-name { font-size: 14px; color: #3a4452; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Overview lower panels: utilization + recent movements side by side, each with
   its own scroll region capped to a matching height so the page itself stays put
   and the user scrolls the rows instead. */
.lvi-overview-panels {
    display: grid;
    /* Utilization is the primary column; the Coming-Soon movements panel is narrower. */
    grid-template-columns: 6fr 4fr;
    gap: 18px;
    align-items: start;
}
.lvi-overview-panel { min-width: 0; }
.lvi-overview-card { overflow: hidden; }
.lvi-overview-scroll {
    max-height: clamp(260px, calc(100vh - 430px), 560px);
    overflow-y: auto;
    /* Let a wide movements table scroll sideways instead of wrapping its cells. */
    overflow-x: auto;
    /* Slim scrollbar to match the list-table / storage-tree scrollers. */
    scrollbar-width: thin;
    scrollbar-color: #c5ccd6 transparent;
}
.lvi-overview-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.lvi-overview-scroll::-webkit-scrollbar-thumb { background: #c5ccd6; border-radius: 8px; }
.lvi-overview-scroll::-webkit-scrollbar-track { background: transparent; }
/* Pin the movements header against its own scroll region. */
.lvi-overview-scroll .lvi-movements-table thead th { top: 0; }

/* Keep every movement cell on one line; the container scrolls horizontally when
   the columns don't fit. Overrides the .lvi-requested-items 60%-first-column rule
   (meant for order forms) which otherwise crushes these columns and wraps them. */
.lvi-movements-table th,
.lvi-movements-table td { white-space: nowrap; }
.lvi-movements-table th:first-child,
.lvi-movements-table td:first-child { width: auto; }
/* This raw table isn't wrapped in the DcTable `.dcui-table` element, so it never
   inherits the framework row rule. Add the same hairline row separator (and hover)
   the app's list tables get, so the rows read as distinct. */
.lvi-movements-table tbody td { border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.lvi-movements-table tbody tr:last-child td { border-bottom: 0; }
.lvi-movements-table tbody tr:hover { background: #f6f9fc; }

/* Tablet: three stat columns, slightly tighter banner. */
@media (max-width: 1200px) {
    .lvi-stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet & below: stack the two overview panels and let each size to content
   (a capped scroll region per panel still applies, but they no longer compete
   for half the width). */
@media (max-width: 1024px) {
    .lvi-overview-panels { grid-template-columns: 1fr; gap: 22px; }
    .lvi-overview-scroll { max-height: clamp(220px, 50vh, 420px); }
}

/* Tablet & portrait: nav collapses into a slide-in overlay toggled by a button.
 * (matches la_vivente_pms, which switches to the "Show Stages" toggle on
 * portrait/tablet widths rather than squeezing the nav into a column.) */
@media (max-width: 1024px) {
    .lvi-show-hide-nav { display: block; }

    .lvi-shell { height: auto; overflow: visible; }
    .lvi-main-col { height: auto; width: 100%; }
    .lvi-main-card { height: auto; }
    .lvi-table-scroll { max-height: none; }

    /* Off-canvas nav: hidden to the left, slides in when .show is set. */
    .lvi-nav-col {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1001;
        height: 100%;
        width: 280px;
        max-width: 85%;
        padding: 12px;
        background: #fff;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
        transform: translateX(-105%);
        transition: transform 0.25s ease;
        overflow-y: auto;
    }
    .lvi-nav-col.show { transform: translateX(0); }

    .lvi-nav-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1000;
        background: rgba(0, 0, 0, 0.4);
    }
}

/* Phones: stack the banner + manage bar, tighten padding. */
@media (max-width: 768px) {
    .lvi-middle { padding: 20px 12px; }

    .lvi-top-bar { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px; }
    .lvi-top-bar-icon { font-size: 30px; }
    .lvi-top-bar-title { font-size: 24px; }
    .lvi-top-bar-actions { width: 100%; flex-wrap: wrap; }

    .lvi-manage-bar { flex-direction: column; align-items: stretch; gap: 10px; }
    .lvi-stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Small phones: single-column stats. */
@media (max-width: 480px) {
    .lvi-stat-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
 * Ported from la_vivente_pms so lv_inventory is self-contained (does not depend
 * on pms's globally-loaded stylesheet). Form-layout classes used by LviFormRow,
 * and the LviDropdown (DcDropdown) cosmetics. Generic class names are scoped
 * under .lvi-form to avoid colliding with pms's global copies.
 * ------------------------------------------------------------------------- */

/* Bordered label/input form (lv-border-container + <lvi-form-row>). */
.lvi-form .lv-border-container {
    border: 1px solid var(--dcui-line-color);
    border-radius: var(--dcui-field-radius);
}
.lvi-form .lv-form-container-row {
    display: flex;
    border-bottom: 1px solid var(--dcui-line-color);
}
.lvi-form .lv-form-container-row:last-child {
    border-bottom: 0;
}
.lvi-form .lv-form-container-row .right {
    width: 30%;
    display: flex;
    align-items: center;
    border-right: 1px solid var(--dcui-line-color);
    /* No fill — pms label cells are unfilled, and every inventory form (pages
       and popups) shares this look. */
}
.lvi-form .lv-form-container-row .left {
    width: 70%;
}
.lvi-form .lv-border-container .lv-border-container-row {
    padding: 10px 15px;
    display: flex;
    min-height: 56px;
    align-items: center;
}
.lvi-form .lv-error-msg-text {
    color: #d30505;
    font-size: 12px;
}

/* LviDropdown (.lv-dropdown wraps DcDropdown). */
/* Show the panel flat — no open animation. Two dc-ui-kit sources animate it and
   both must go now that we JS-position it as a fixed popper:
   1. `animation: dcuiAnimateSubMenu` (scale .95→1 / fade) — read as a jump.
   2. `transition: all .2s` on the panel — our inline position/size writes would
      otherwise tween, so the panel visibly slides/resizes into place.
   The base panel is opacity:0 (the animation's `forwards` used to hold it at 1),
   so pin opacity:1 or it would be invisible without the animation. */
.lvi-app .lv-dropdown .dcui-dropdown-panel {
    animation: none;
    transition: none;
    opacity: 1;
}
/* Fallback cap so no inventory dropdown menu is ever unbounded in contexts
   without a more specific rule (activity filters, inline item bars, …). The
   scoped .lvi-form / .lvi-ms-warehouse / .lvi-detail-* rules below win by
   specificity where a different height is intended. */
.lvi-app .lv-dropdown .lv-dropdown-scrollable {
    max-height: 260px;
}
.lvi-form .lv-dropdown li.selected {
    background-color: #d7efff;
}
/* Two-line dropdown option (LviDropdown `subKey`): the label with a muted second
   line beneath — e.g. a putaway destination bin under its "Zone > Rack" parent
   path. Only rendered for options carrying a subKey value, so single-line
   dropdowns are unaffected. Scoped to the shared dropdown. */
.lvi-app .lv-dropdown .lvi-dropdown-option-sub {
    color: var(--lvi-muted, #8a8f98);
    font-size: 12px;
    margin-top: 2px;
}
.lvi-form .lv-dropdown .lv-dropdown-scrollable {
    max-height: 140px;
}
/* Detail-page dropdowns live under .lvi-detail-* (not .lvi-form), so their scroll
   pane would otherwise inherit the page's tall .scroll-container cap
   (calc(100vh - 320px)) — far too long for a menu. Give them a compact cap; the
   fixed-popper JS shrinks it further only when near a viewport edge. */
.lvi-detail-main .lv-dropdown .lv-dropdown-scrollable,
.lvi-detail-page .lv-dropdown .lv-dropdown-scrollable {
    max-height: 260px;
}
.lvi-form .lv-dropdown .dcui-dropdown-panel {
    width: 100%;
}
.lvi-form .lv-dropdown.disabled.dcui-select-dropdown .dcui-dt-label {
    cursor: inherit;
}
.lvi-form .lv-dropdown .has-search-field {
    padding: 5px 7px 5px;
}
/* Opt-in "Create New" footer (createLabel): the option list scrolls while the footer
   stays pinned to its bottom. Scoped to panels that have it.

   The footer sticks to its nearest scrolling ancestor, which is the INNER list
   (LviDropdown passes panel_class="scroll-container lv-dropdown-scrollable", and
   .scroll-container carries overflow-y: auto). So the inner list must be the only
   scroller: capping the outer panel too made it clip the footer — pinned correctly
   at the inner list's bottom — right out of view. Uncapping the panel also drops the
   second scrollbar, and detaches the list height from the page-level
   `.lvi-detail-page .scroll-container { max-height: calc(100vh - 320px) }` rule that
   otherwise leaks in via the shared .scroll-container class. */
.lv-dropdown .dcui-dropdown-panel:has(.lvi-dropdown-create) {
    max-height: none;
}
.lv-dropdown .dcui-dropdown-panel:has(.lvi-dropdown-create) .lv-dropdown-scrollable {
    max-height: 240px;
}
.lv-dropdown .lvi-dropdown-create {
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid #e5e7eb;
}
.lv-dropdown .lvi-dropdown-create a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    color: #2563eb;
    cursor: pointer;
}
.lv-dropdown .lvi-dropdown-create:hover {
    background: #f3f4f6;
}
.lvi-form .lv-border-container-row .dcui-select-dropdown,
.lvi-form .lv-border-container-row .dcui-select-dropdown .dcui-dt-label {
    width: 100%;
}
.lvi-form .dcui-form-control.lv-input-filed-no-outline,
.lvi-form .dcui-icon-control.lv-input-filed-no-outline {
    border: 0 !important;
}
.lvi-form .dcui-form-control.lv-input-filed-no-outline:focus {
    border: 0 !important;
    box-shadow: none;
}

/* Autofilled inputs: the browser overrides `color` with its own (near-black)
   -webkit-text-fill-color, so autocompleted values render darker than typed text
   and dropdown labels. Pin the fill colour to the muted body colour so an
   autocompleted value reads the same grey as everything else. (The framework
   already forces a white autofill background via box-shadow.) */
.lvi-app .dcui-form-control:-webkit-autofill,
.lvi-app .dcui-form-control:-webkit-autofill:hover,
.lvi-app .dcui-form-control:-webkit-autofill:focus,
.lvi-app .dcui-form-control:-webkit-autofill:active {
    -webkit-text-fill-color: var(--dcui-body-color);
    caret-color: var(--dcui-body-color);
}

/* Standalone dropdowns (filters, pickers, popup selects) render the closed
   .dcui-dt-label with no border or background by default — so at rest they read as
   plain text and are hard to spot as a control. Give them the same outlined,
   white-fill chrome as a text input (matching the pms select look). */
.lvi-app .lv-dropdown .dcui-dt-label {
    border: 1px solid var(--dcui-line-color);
    background-color: #fff;
}
/* Inside a bordered form row the dropdown stays flush — the row card supplies the
   border, so a per-control outline would double it up. */
.lvi-form .lv-border-container .lv-dropdown .dcui-dt-label,
.lvi-detail-formrow .lv-dropdown .dcui-dt-label {
    border: 0;
    background-color: transparent;
}

/* Interaction fills, matching pms (which just inherits the dc_ui_kit defaults):
   hovered/open dropdown labels and hovered datepicker inputs fill #eee, disabled
   controls keep their gray. The outline/flush overrides above out-rank the kit's
   own rules in the concatenated bundle, so re-assert each fill here. */
.lvi-app .lv-dropdown .dcui-dt-label:hover,
.lvi-app .lv-dropdown.dcui-select-dropdown.open .dcui-dt-label,
.lvi-form .lv-border-container .lv-dropdown .dcui-dt-label:hover,
.lvi-form .lv-border-container .lv-dropdown.dcui-select-dropdown.open .dcui-dt-label {
    background-color: #eeeeee;
}
.lvi-form .lv-border-container .dcui-calendar .input-field:hover input {
    background-color: #eeeeee;
}
.lvi-app .dcui-form-control:disabled,
.lvi-form .lv-border-container .dcui-form-control:disabled,
.lvi-detail-formrow .dcui-form-control:disabled {
    background-color: #ebebeb;
}
.lvi-app .lv-dropdown.disabled .dcui-dt-label,
.lvi-app .lv-dropdown.disabled .dcui-dt-label:hover,
.lvi-form .lv-border-container .lv-dropdown.disabled .dcui-dt-label,
.lvi-detail-formrow .lv-dropdown.disabled .dcui-dt-label {
    background-color: #ebebeb;
}
.lvi-form .lv-border-container .dcui-calendar .input-field input:disabled,
.lvi-detail-formrow .dcui-calendar .input-field input:disabled {
    background-color: #ebebeb;
}
/* Custom-chrome dropdowns opt out: the sidebar warehouse selector reads as a
   heading, and the split "create request" menu button carries its own styling. */
.lvi-ms-warehouse .lv-dropdown .dcui-dt-label,
.lvi-app .lvi-create-menu .dcui-dt-label {
    border: 0;
    background-color: transparent;
}

/* ==========================================================================
   Add Warehouse popup (LviWarehouseCreatePopup) — a compact, self-contained modal
   with plain left labels + outlined inputs. Sized explicitly so it renders the same
   regardless of where it is opened from (shipment create form vs sidebar selector);
   the framework .popup otherwise stretches to max-width:95% and varies by context.
   ========================================================================== */
.popup.lvi-warehouse-popup {
    width: 520px;
    max-width: 95%;
    margin: 50px auto;
    /* let the manager dropdown panel extend past the modal instead of clipping */
    overflow: visible;
}
/* The popup body hosts the shared bordered form (lv-border-container +
   <lvi-form-row>, styled via the .lvi-form scope like the create pages); only
   size it to the popup — .lvi-form's page min-width would overflow the modal. */
.lvi-warehouse-popup .lvi-form {
    min-width: 0;
    margin-top: 6px;
}
.lvi-warehouse-popup .lvi-wh-error {
    color: #d30505;
    font-size: 13px;
    margin: -6px 0 12px;
}
.lvi-warehouse-popup .lvi-wh-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}
/* Back link above a popup's title, shown when the popup was opened as a detour from
   another popup (item form ← placement / picker). The flow is sibling popups, never
   a stack, so nothing is visible underneath — this link is the only cue that there is
   somewhere to return to. Sits left of the absolutely-positioned ✕, so they don't
   collide. */
.lvi-warehouse-popup .lvi-popup-back {
    display: inline-flex;
    align-items: center;
    margin-bottom: 6px;
    color: var(--dcui-primary-color);
    font-size: 13px;
    cursor: pointer;
}
.lvi-warehouse-popup .lvi-popup-back:hover {
    text-decoration: underline;
}
/* Edit-mode Delete sits alone at the bottom-left of the action row, in the
   danger tone (mirrors the tree rows' old trash hover colour). */
.lvi-app .dcui-button.dcui-button-no-fill.lvi-popup-delete {
    margin-right: auto;
    color: #e5484d;
    border-color: #e5484d;
}
.lvi-app .dcui-button.dcui-button-no-fill.lvi-popup-delete:hover {
    background-color: #fdf1f1;
    color: #e5484d;
}
/* Item popup: the body scrolls, so give the action footer a clear separator and
   breathing room instead of crowding the last content row. */
.lvi-item-popup .lvi-wh-actions {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--dcui-line-color, #e5e7eb);
}
/* The small single-field create popups (unit of measure, category) don't scroll,
   so the footer separator reads as a stray extra border — drop it there. */
.lvi-uom-popup .lvi-wh-actions,
.lvi-cat-popup .lvi-wh-actions {
    margin-top: 4px;
    padding-top: 0;
    border-top: 0;
}
/* Item picker (first Add Item step): it isn't scoped to .lvi-storage-popup, so it
   inherited no subtitle/control spacing and the dropdown crowded the action row.
   Mirror the storage popup's subtitle styling and give the control breathing room. */
.lvi-item-picker-popup .lvi-sl-subtitle {
    color: #6b7280;
    font-size: 14px;
    margin: 0 0 16px;
    line-height: 1.45;
}
.lvi-item-picker-popup .lv-border-container {
    margin-bottom: 18px;
}

/* Small helper text under a popup control (e.g. the Move Stock quantity max). */
.lvi-warehouse-popup .lvi-wh-hint {
    display: block;
    margin-top: 6px;
    color: #6b7280;
    font-size: 12px;
    /* The bordered rows strip control padding, so keep the hint aligned with
       the input text's 10px inset. */
    padding-left: 10px;
}

/* Move Stock popup — read-only source/available summary card above the form. */
.lvi-move-stock-popup .lvi-move-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid #eef0f4;
    border-radius: 10px;
    padding: 14px 16px;
    background: #fafafa;
    margin-bottom: 20px;
}
.lvi-move-stock-popup .lvi-move-summary-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--dcui-primary-color, #2563eb);
    color: #fff;
    font-size: 15px;
}
.lvi-move-stock-popup .lvi-move-summary-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.lvi-move-stock-popup .lvi-move-summary-avail {
    margin-left: auto;
    text-align: right;
}
.lvi-move-stock-popup .lvi-move-summary-label {
    color: #6b7280;
    font-size: 12px;
}
.lvi-move-stock-popup .lvi-move-summary-value {
    color: #1f2a37;
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Add/Edit Item popup — wider, two-column body (form left, image gallery right)
   mirroring the approved mockup.
   -------------------------------------------------------------------------- */
.popup.lvi-item-popup {
    width: 880px;
}
/* The small single-field create popups (unit of measure, category) reuse the
   item popup's form styling but not its two-column layout — undo the 880px
   width (this must come after the rule above; same specificity). */
.popup.lvi-uom-popup,
.popup.lvi-cat-popup {
    width: 520px;
}
/* Subtitle under the popup title — kept tight to the title and the first section
   (the default <p> margins left too large a gap before "Details"). */
.lvi-item-popup .lvi-item-subtitle {
    color: #6b7280;
    font-size: 14px;
    line-height: 1.45;
    margin: 0 0 16px;
}
.lvi-item-popup .lvi-item-subtitle + .lvi-item-section {
    margin-top: 0;
}
/* The body (both columns) is the single scroll region so long forms stay within
   the modal and the action footer never gets crowded. The generous bottom padding
   keeps the last section — and any dropdown panel opening from it — clear of the
   scroll edge. */
.lvi-item-cols {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin-top: 6px;
    max-height: 62vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 4px 24px 2px;
}
.lvi-item-main {
    flex: 1 1 58%;
    min-width: 0;
}
.lvi-item-aside {
    flex: 0 0 36%;
    border-left: 1px solid var(--dcui-line-color, #e5e7eb);
    padding-left: 24px;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Section = heading sitting ABOVE its bordered box (not inside the border). */
.lvi-item-section {
    margin-top: 20px;
}
.lvi-item-section:first-child {
    margin-top: 0;
}
.lvi-item-section > .lvi-sub-title {
    margin-bottom: 10px;
}

/* Custom fields */
.lvi-item-custom-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.lvi-item-custom-head .lvi-sub-title {
    margin-bottom: 0;
}
.lvi-item-custom {
    padding: 14px 15px;
}
.lvi-item-custom-row:first-child {
    margin-top: 0;
}
.lvi-item-custom-add {
    cursor: pointer;
    color: var(--dcui-primary-color, #2563eb);
    font-size: 13px;
}
.lvi-item-custom-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}
.lvi-item-custom-row > .dcui-form-group { flex: 1 1 0; margin: 0; min-width: 0; }
.lvi-item-custom-remove {
    cursor: pointer;
    color: #8a94a6;
    flex: 0 0 auto;
}
.lvi-item-custom-remove:hover { color: #d30505; }

/* Upload gallery — featured image on top, thumbnail strip below. */
.lvi-gallery {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

/* Featured image: the large primary image (or the empty upload prompt). Also a
   drop target for uploading files (which one is featured is set per-thumbnail). */
.lvi-featured {
    position: relative;
    border: 1px solid var(--dcui-line-color, #e5e7eb);
    border-radius: 8px;
    background: #fafbfc;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 14px;
    overflow: hidden;
    transition: border-color .15s ease, background .15s ease;
}
.lvi-featured.is-empty {
    border-style: dashed;
    border-color: var(--dcui-line-color, #cbd5e1);
    cursor: pointer;
}
.lvi-featured.is-dragging { border-color: var(--dcui-primary-color, #2563eb); background: #f3f7ff; }
.lvi-featured.is-disabled { opacity: .7; }
.lvi-featured-img {
    max-width: 100%;
    max-height: 240px;
    object-fit: contain;
    border-radius: 6px;
}
.lvi-featured-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #fff;
    background: var(--dcui-primary-color, #2563eb);
    padding: 3px 8px;
    border-radius: 999px;
}
.lvi-featured-badge i { color: #ffd56b; }
.lvi-featured-remove {
    position: absolute;
    bottom: 8px;
    right: 10px;
    color: #d30505;
    font-size: 13px;
    cursor: pointer;
    background: rgba(255, 255, 255, .85);
    padding: 2px 8px;
    border-radius: 4px;
}
.lvi-upload-icon { font-size: 26px; color: #9aa3b2; margin-bottom: 8px; }
.lvi-upload-text { color: #6b7280; font-size: 14px; }
.lvi-upload-link { color: var(--dcui-primary-color, #2563eb); }
.lvi-upload-input { display: none; }
/* Touch-device only: explicit Browse media / Take photo buttons in the empty
   upload spot (desktop keeps the plain drag/browse text). */
.lvi-upload-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.lvi-upload-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    font-size: 14px;
    color: var(--dcui-primary-color, #2563eb);
    background: #fff;
    border: 1px solid var(--dcui-primary-color, #2563eb);
    border-radius: 6px;
    cursor: pointer;
}
.lvi-upload-btn:hover { background: #f3f7ff; }

/* Thumbnail strip: every image (the featured one flagged). Flows with the body
   scroll rather than scrolling on its own. */
.lvi-gallery-grid {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 8px;
    align-content: start;
}
.lvi-gallery-thumb,
.lvi-gallery-add {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
}
.lvi-gallery-thumb {
    border: 2px solid var(--dcui-line-color, #e5e7eb);
}
.lvi-gallery-thumb.is-featured {
    border-color: var(--dcui-primary-color, #2563eb);
}
/* The featured thumbnail's solid badge (top-left) and the "set as featured" star
   button shown on every other thumbnail share a slot/size. The button is muted
   until hovered so the featured one reads as the active state. */
.lvi-thumb-featured-badge,
.lvi-thumb-feature-btn {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    border-radius: 50%;
    z-index: 1;
}
.lvi-thumb-featured-badge {
    color: #ffd56b;
    background: var(--dcui-primary-color, #2563eb);
}
.lvi-thumb-feature-btn {
    padding: 0;
    border: 0;
    cursor: pointer;
    color: #fff;
    background: rgba(17, 24, 39, .55);
    opacity: 0;
    transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.lvi-gallery-thumb:hover .lvi-thumb-feature-btn { opacity: 1; }
.lvi-thumb-feature-btn:hover { background: var(--dcui-primary-color, #2563eb); color: #ffd56b; }
.lvi-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.lvi-gallery-thumb-remove {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #fff;
    background: rgba(17, 24, 39, .65);
    border-radius: 50%;
}
.lvi-gallery-thumb-remove:hover { background: #d30505; }
.lvi-gallery-add {
    border: 1px dashed var(--dcui-line-color, #cbd5e1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9aa3b2;
    font-size: 18px;
    background: #fafbfc;
}
.lvi-gallery-add:hover {
    border-color: var(--dcui-primary-color, #2563eb);
    color: var(--dcui-primary-color, #2563eb);
}

@media (max-width: 640px) {
    .lvi-item-cols { flex-direction: column; }
    .lvi-item-aside {
        border-left: 0;
        padding-left: 0;
        border-top: 1px solid var(--dcui-line-color, #e5e7eb);
        padding-top: 16px;
    }
}

/* ==========================================================================
   Incoming Shipments redesign — list filters, supplier groups, create editor,
   registry field renderer, horizontal stage graph, collapsible side panel.
   ========================================================================== */

/* List sub-bar: date range + search side by side */
.lvi-manage-bar-filters { display: flex; align-items: center; gap: 16px; }
.lvi-date-range-filter { display: flex; align-items: center; gap: 8px; }
.lvi-date-label { font-size: 13px; color: #8a94a6; white-space: nowrap; }
.lvi-date-label i { margin-right: 4px; }
.lvi-date-field { min-width: 130px; }
.lvi-date-sep { color: #8a94a6; }
/* The datepicker (dc-calendar) ships its own lighter border, 6px radius, paler
   text and a 40px height, so the From/To fields don't match the dropdown + search
   sitting beside them in the filter bar. Pin them to the shared field chrome. */
.lvi-date-field.dcui-calendar .input-field input {
    height: 35px;
    border: 1px solid var(--dcui-line-color);
    border-radius: var(--dcui-field-radius);
    color: var(--dcui-body-color);
    font-size: 14px;
}
.lvi-date-field.dcui-calendar .input-field:hover input { background-color: #eee; }

/* The create page reuses .lvi-form for the bordered form rows but must not inherit
   the modal width constraints. */
.lvi-detail-page .lvi-form { min-width: 0; max-width: none; }
.lvi-detail-page .lvi-middle { padding: 20px; }

/* Registry field renderer */
.lvi-field-renderer { width: 100%; }
.lvi-field-readonly { font-size: 14px; color: #3a4452; }
.lvi-user-cell { display: inline-flex; align-items: center; gap: 8px; }
.lvi-user-name { font-size: 14px; color: #3a4452; }

/* Detail: stacked body (horizontal stages live above; body = main + side panel) */
.lvi-detail-body--stacked { display: flex; grid-template-columns: none; }
.lvi-detail-body--stacked .lvi-detail-main { flex: 1 1 auto; }
.lvi-detail-formrow { margin-bottom: 8px; }

/* Item detail: page-level Overview/Stocks tabs inside the main column */
.lvi-detail-tabs .dcui-bt-nav { margin-bottom: 18px; }

/* Supplier-grouped read tables (detail) */
.lvi-supplier-groups { display: flex; flex-direction: column; gap: 18px; }
.lvi-supplier-group { border: 1px solid #eef0f4; border-radius: 8px; overflow: hidden; }
.lvi-supplier-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; cursor: pointer; background: #f8fafc;
    font-weight: 600; color: #3a4452;
}
.lvi-supplier-head i { color: #8a94a6; }
.lvi-supplier-name { font-size: 15px; }
.lvi-supplier-body { padding: 4px 8px 8px; }

/* Item cell (thumbnail + code), shared by read + edit */
.lvi-item-cell { display: flex; align-items: center; gap: 10px; }
.lvi-item-thumb {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 6px;
    background: #f1f3f7; display: flex; align-items: center; justify-content: center;
    overflow: hidden; color: #b6becb;
}
.lvi-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lvi-item-code { font-size: 14px; color: #3a4452; }
.lvi-app .lvi-clickable { cursor: pointer; }

/* Shared empty-state remark (LviEmptyState). Block = panels/tables/tree;
   .is-inline = typeahead dropdowns and command-bar lists. */
.lvi-app .lvi-empty { text-align: center; padding: 24px 4px; font-size: 14px; color: #8a94a6; }
.lvi-app .lvi-empty > i { margin-right: 6px; }
.lvi-app .lvi-empty.is-inline { text-align: left; padding: 8px 12px; font-size: 13px; }
/* When a block empty state sits in a data-table cell, drop the cell border the
   kit gives every td — otherwise a stray horizontal line draws under the "No …"
   remark (the empty row is the only row). Non-table empty states (plain <div>)
   have no such line, so this makes tables match them. The .dcui-t-table in the
   selector is needed to outrank the kit's own `.dcui-table table.dcui-t-table td`
   border rule; every lv_inventory data table carries that class. */
.lvi-app .dcui-t-table td:has(.lvi-empty) { border: 0; }

/* Create editor (supplier blocks + item grid) */
.lvi-supplier-editor { display: flex; flex-direction: column; gap: 20px; }
.lvi-supplier-editor-block { padding: 16px; }
.lvi-supplier-editor-head { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.lvi-supplier-editor-title { font-weight: 700; color: #3a4452; white-space: nowrap; }
.lvi-supplier-editor-supplier { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; }
.lvi-inline-label { font-size: 13px; color: #8a94a6; white-space: nowrap; }
.lvi-supplier-editor-actions { margin-top: 4px; }

/* Collapse caret: the same muted caret the storage tree uses, sized to the head
   row so the supplier name keeps its position whether open or closed. A closed
   block is just its header, so the head's bottom margin goes with the rows, and
   the item count stands in for what's hidden. */
.lvi-supplier-editor-toggle {
    border: 0;
    background: transparent;
    cursor: pointer;
    color: #8a94a6;
    width: 14px;
    flex: 0 0 14px;
    padding: 0;
    text-align: center;
    line-height: 1;
}
.lvi-supplier-editor-toggle:hover { color: #3a4452; }
.lvi-supplier-editor-count { font-size: 13px; color: #8a94a6; white-space: nowrap; }
.lvi-supplier-editor-block.is-collapsed .lvi-supplier-editor-head { margin-bottom: 0; }

/* Shipment total: a right-aligned footer under the supplier blocks, sitting over
   the Line Total column it sums. Label muted like the other inline captions, the
   figure carried by weight alone; tabular figures keep it aligned with the
   column above as digits change. */
.lvi-app .lvi-shipment-total {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 12px;
    margin-top: 12px;
    padding-right: 16px;
}
.lvi-app .lvi-shipment-total-label { font-size: 13px; color: #8a94a6; white-space: nowrap; }
.lvi-app .lvi-shipment-total-value {
    font-size: 15px;
    font-weight: 600;
    color: #1f2a37;
    font-variant-numeric: tabular-nums;
}

.lvi-editor-table { width: 100%; }
.lvi-editor-table th { font-weight: 600; color: #8a94a6; font-size: 13px; }
.lvi-editor-table td { vertical-align: middle; padding: 6px 8px; }
.lvi-qty-cell { display: flex; align-items: center; gap: 6px; }
.lvi-qty-cell > * { min-width: 0; }
.lvi-muted { color: #8a94a6; }

.lvi-add-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: #0096fd; cursor: pointer; font-size: 14px; }
.lvi-add-link i { font-size: 12px; }
.lvi-icon-btn { border: 0; background: transparent; cursor: pointer; color: #8a94a6; padding: 4px; }
.lvi-icon-btn:hover { color: #f15f5f; }
.lvi-icon-btn:disabled { opacity: 0.4; cursor: default; pointer-events: none; }
/* Put-away moves stock, it doesn't destroy anything — it keeps the primary blue
   it had as an outline button rather than the red the row's edit/remove share. */
.lvi-icon-btn.lvi-putaway-btn:hover { color: var(--dcui-primary-color); }

/* ── Slash-command inline item editor ─────────────────────────────────────── */

/* Supplier header: caption + constrained picker, trash pushed to the far right.
   DcDropdown does not inherit a class attr onto its root, so the picker is scoped
   via the head container. The block card's flush-dropdown rule (border: 0 inside
   .lv-border-container) is undone here — the picker should read as a control. */
.lvi-supplier-editor-head .lv-dropdown { flex: 0 1 340px; min-width: 0; }
.lvi-form .lv-border-container .lvi-supplier-editor-head .lv-dropdown .dcui-dt-label {
    border: 1px solid var(--dcui-line-color);
    background-color: #fff;
    border-radius: var(--dcui-field-radius);
    width: 100%;
    box-sizing: border-box;
}
/* …but it still hover/open-fills like every other field (pms behaviour). */
.lvi-form .lv-border-container .lvi-supplier-editor-head .lv-dropdown .dcui-dt-label:hover,
.lvi-form .lv-border-container .lvi-supplier-editor-head .lv-dropdown.dcui-select-dropdown.open .dcui-dt-label {
    background-color: #eeeeee;
}
.lvi-supplier-editor-head .lvi-supplier-remove { margin-left: auto; }

/* Small thumbnail variant used in rows and the item search results. */
.lvi-item-thumb.sm { width: 28px; height: 28px; }

/* Read rows + header aligned on one grid. */
.lvi-cmd-table { display: flex; flex-direction: column; }
.lvi-cmd-head,
.lvi-cmd-row {
    display: grid;
    /* LviItemLineList sets --lvi-line-cols per instance from its `columns` prop;
       the fallback is the original shipment template, so any consumer that
       passes no widths renders exactly as before. */
    grid-template-columns: var(--lvi-line-cols, minmax(180px, 1.6fr) 110px 100px minmax(130px, 1.2fr) minmax(130px, 1.2fr) 64px);
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
}
.lvi-cmd-head { color: #8a94a6; font-size: 13px; font-weight: 600; border-bottom: 1px solid #eef0f4; }
/* No cursor:pointer — a row is not a button. Editing runs through the row's
   pencil; the hover fill only marks which row those controls belong to. */
.lvi-cmd-row { border-bottom: 1px solid #f2f4f7; font-size: 14px; color: #3a4452; }
.lvi-cmd-row:hover { background: #f8fafc; }
.lvi-cmd-row-name { font-weight: 600; }
.lvi-cmd-row-actions { display: inline-flex; align-items: center; gap: 2px; justify-content: flex-end; }

/* A wide column set scrolls inside the list itself rather than pushing the
   overflow onto the page, where the scrollbar lands at an arbitrary point and
   the rows run past the card's border. min-width:min-content makes each row
   stretch to the full scrolled width so its bottom border and hover fill span
   it; min-content (not max-content) leaves the fr tracks distributing normally
   whenever there IS room, so nothing changes on a wide viewport. */
.lvi-app .lvi-cmd-table {
    overflow-x: auto;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #c5ccd6 transparent;
}
.lvi-app .lvi-cmd-table::-webkit-scrollbar { width: 8px; height: 8px; }
.lvi-app .lvi-cmd-table::-webkit-scrollbar-thumb { background: #c5ccd6; border-radius: 8px; }
.lvi-app .lvi-cmd-table::-webkit-scrollbar-track { background: transparent; }
.lvi-app .lvi-cmd-head,
.lvi-app .lvi-cmd-row { min-width: min-content; }
/* The list keeps its scrollport while a line is being edited. It used to give it
   up (overflow:visible) so the open bar's panels weren't clipped, but that also
   unpinned the sticky row actions below and let every row spill past the card.
   The bar's panels are fixed-position poppers instead (see .lvi-cmd-panel), so
   nothing inside it needs the scrollport gone. */

/* The per-row controls stay pinned to the right edge of the scrollport rather
   than scrolling away with the columns — edit/remove/Put Away must stay reachable
   at any scroll offset. They need an opaque fill so cells pass underneath, and
   they match the row's hover fill so the pin is invisible until it matters. */
.lvi-app .lvi-cmd-head > span:last-child,
.lvi-app .lvi-cmd-row-actions {
    position: sticky;
    /* right:8px used to match the row's own side padding, but that left an 8px
       strip of scrollport past the pin where the columns underneath showed
       through. Pin flush instead and re-create the inset with padding, so the
       opaque fill runs all the way to the edge while the controls sit where they
       did. The negative margin lets the border box overhang the row's padding box
       (which bounds a sticky element's margin box) — without it the pin would sit
       flush at rest but 8px in at full scroll, and visibly shift as you scroll. */
    right: 0;
    margin-right: -8px;
    padding-right: 8px;
    z-index: 1;
    background: #fff;
    height: 100%;
}
.lvi-app .lvi-cmd-row:hover .lvi-cmd-row-actions { background: #f8fafc; }
/* Only once something is actually hidden behind it does the pin earn a separator. */
.lvi-app .lvi-cmd-table.is-scrolled .lvi-cmd-head > span:last-child,
.lvi-app .lvi-cmd-table.is-scrolled .lvi-cmd-row-actions {
    box-shadow: -8px 0 8px -8px rgba(16, 24, 40, 0.22);
}

/* --- LviItemLineList: locked rows, selection and the row-detail expander --- */
/* A locked list is read-only, so drop the affordances that imply an editable row.
   Unless the host acts on a row click (is-row-clickable — the unloading shipment
   opens its put-away manager that way), in which case the row IS a target and
   gets the pointer and hover fill back. */
.lvi-app .lvi-cmd-table.is-locked:not(.is-row-clickable) .lvi-cmd-row:hover { background: transparent; }
/* The action pin carries its own opaque fill (cells scroll under it), so it has
   to be told the row went unfilled too — otherwise hovering a locked row paints
   a lone grey block where the pin is, with no row fill behind it to belong to. */
.lvi-app .lvi-cmd-table.is-locked:not(.is-row-clickable) .lvi-cmd-row:hover .lvi-cmd-row-actions { background: #fff; }
.lvi-app .lvi-cmd-table.is-row-clickable .lvi-cmd-row { cursor: pointer; }
.lvi-app .lvi-line-select { display: inline-flex; align-items: center; justify-content: center; }
.lvi-app .lvi-line-caret {
    background: none; border: 0; padding: 0; color: #8a94a6; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.lvi-app .lvi-line-caret:hover { color: #3a4452; }
/* The detail panel spans the whole row, so it sits outside the column grid. */
.lvi-app .lvi-line-detail {
    padding: 8px 8px 12px 36px;
    border-bottom: 1px solid #f2f4f7;
    background: #fbfcfe;
}

/* Move source-picks panel (the #row-detail expander on move lines). Two modes:
   an editable Source/Available/Take grid with an allocation footer, and a plain
   read-only "picked from" summary once the line is locked. */
.lvi-app .lvi-picks { font-size: 13px; color: #3a4452; }
.lvi-app .lvi-picks-caption {
    margin: 0 0 8px; font-size: 11px; font-weight: 600;
    letter-spacing: .03em; text-transform: uppercase; color: #8a94a6;
}

/* Read-only summary: location -> quantity taken. */
.lvi-app .lvi-picks-summary { list-style: none; margin: 0; padding: 0; }
.lvi-app .lvi-picks-summary li {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding: 6px 0; border-bottom: 1px solid #eef1f5;
}
.lvi-app .lvi-picks-summary li:last-child { border-bottom: 0; }
.lvi-app .lvi-picks-qty { font-weight: 600; white-space: nowrap; }
.lvi-app .lvi-picks-qty .lvi-unit { font-weight: 400; color: #8a94a6; margin-left: 2px; }

/* Editing grid — spans the full width of the row detail. */
.lvi-app table.lvi-picks-grid { width: 100%; border-collapse: collapse; }
/* Keep the numeric columns a steady width so Take/Available line up while the
   Source column absorbs the remaining width. */
.lvi-app .lvi-picks-grid th.lvi-picks-num, .lvi-app .lvi-picks-grid td.lvi-picks-num { width: 160px; }
.lvi-app .lvi-picks-grid th {
    text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .03em; color: #8a94a6; padding: 0 12px 6px 0; border-bottom: 1px solid #e7ebf0;
}
.lvi-app .lvi-picks-grid td { padding: 8px 12px 8px 0; border-bottom: 1px solid #f2f4f7; vertical-align: middle; }
.lvi-app .lvi-picks-grid tr:last-child td { border-bottom: 0; }
.lvi-app .lvi-picks-grid th:last-child, .lvi-app .lvi-picks-grid td:last-child { padding-right: 0; }
.lvi-app .lvi-picks-num { text-align: right; white-space: nowrap; }
.lvi-app .lvi-picks-grid td.lvi-picks-num { color: #616a78; }

/* The Take input + its unit suffix. */
.lvi-app .lvi-picks-take { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.lvi-app .lvi-picks-take .dcui-form-control { width: 84px; text-align: right; }
.lvi-app .lvi-picks-take .lvi-unit { color: #8a94a6; }
.lvi-app .lvi-picks-empty-row td { text-align: left; }

/* Allocation footer — matched / short / over feedback. */
.lvi-app .lvi-picks-alloc {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin: 12px 0 0; font-size: 13px; font-weight: 600;
}
.lvi-app .lvi-picks-alloc.is-match { color: #21a83c; }
.lvi-app .lvi-picks-alloc.is-over  { color: #d64545; }
.lvi-app .lvi-picks-alloc.is-short { color: #8a94a6; }
.lvi-app .lvi-picks-alloc-note { font-weight: 400; }

/* The inline command bar. position:relative anchors its panels/popovers, which
   render outside the bar and must NOT be clipped (this section uses no
   .scroll-container, so nothing caps or hides them). */
.lvi-cmd-bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid #dbe0e7;
    border-radius: 8px;
    background: #fff;
}
.lvi-cmd-main { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.lvi-cmd-item { display: inline-flex; align-items: center; gap: 8px; }
.lvi-cmd-item-name { font-weight: 600; color: #3a4452; }
.lvi-cmd-input {
    flex: 1 1 160px; min-width: 120px;
    border: 0; outline: none; background: transparent;
    font-size: 14px; padding: 6px 4px; color: #3a4452;
}
.lvi-cmd-chip {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid #dbe0e7; background: #f8fafc; border-radius: 14px;
    padding: 3px 10px; font-size: 13px; color: #3a4452; cursor: pointer;
}
.lvi-cmd-chip-static { cursor: default; }

.lvi-cmd-toolbar { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.lvi-cmd-tool {
    border: 0; background: transparent; color: #6b7585; cursor: pointer;
    width: 30px; height: 30px; border-radius: 6px; font-size: 15px;
}
.lvi-cmd-tool:hover,
.lvi-cmd-tool.active { background: #eef2f7; color: #0096fd; }
/* Bar actions. Both share one height and center their contents on the cross axis,
   so the label sits on the button's optical middle rather than its text baseline —
   a fixed-height button with inline content otherwise rides high. */
.lvi-cmd-save,
.lvi-cmd-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    line-height: 1;
    border-radius: 6px;
    cursor: pointer;
}
.lvi-cmd-save {
    border: 1px solid #0096fd; color: #0096fd; background: #fff;
    padding: 0 12px; font-size: 13px;
}
.lvi-cmd-save:disabled { opacity: .5; cursor: not-allowed; }

/* Floating panels: item results + slash palette. These are dropdown panels in all
   but name, so they take the kit's panel chrome and row metrics (dc-ui-kit's
   .dcui-dropdown-panel / .dcui-dropdown-menu > li > a) — a bespoke radius, shadow
   and row padding made them read as a different control from every other
   dropdown in the app. Rows stay flex: they carry a thumbnail beside the label,
   as the kit's own option rows do via .dcui-flex-item.

   position/top/left/width come from placeFloat(), which anchors the panel to the
   bar's input row as a fixed popper — the same treatment LviDropdown gives the
   kit's dropdown panels, and for the same two reasons. Absolute positioning
   anchors to the BAR, which in inline mode is three wrapped rows tall, so the
   panel opened ~145px below the input it belongs to; and it left the panel
   inside the item list's scrollport, which clipped it. */
.lvi-cmd-panel {
    position: fixed; z-index: 40;
    margin: 0; padding: 0; list-style: none;
    background-color: #fff;
    border: 1px solid var(--dcui-line-color);
    border-radius: var(--dcui-field-radius);
    box-shadow: 0px 1px 14px -5px rgba(66, 66, 66, 0.25);
    max-height: 260px; overflow-y: auto;
}
.lvi-cmd-result-list { list-style: none; margin: 5px 0; padding: 0; }
.lvi-cmd-panel li {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 15px 9px; cursor: pointer;
    color: inherit;
}
.lvi-cmd-panel li:hover { background-color: #eee; }
/* The palette is the panel itself (a <ul>), so it carries the menu inset that the
   results list gets from its own margin. */
.lvi-cmd-palette { padding: 5px 0; }
/* Item rows carry a thumbnail, which at 28px made them 47px tall against a plain
   dropdown row's ~35px. Shrink the thumb and trim the vertical padding to land on
   the same height, so the list reads as one control with the app's dropdowns. */
.lvi-cmd-result-list li { padding: 8px 15px 7px; }
.lvi-cmd-result-list .lvi-item-thumb.sm { width: 20px; height: 20px; border-radius: 4px; }
/* The create row's link owns its padding (as LviDropdown's does), so the row
   itself must not add any — this selector has to out-rank the rule above. */
.lvi-cmd-result-list li.lvi-cmd-create { padding: 0; }
.lvi-cmd-noresult { cursor: default; }
.lvi-cmd-noresult:hover { background: transparent; }
.lvi-cmd-item-sub { margin-left: auto; font-size: 12px; }
/* Names what a results pick will do when the line already holds an item: the row
   replaces it rather than joining it. Sticky because placeFloat() scrolls the
   panel itself, which would otherwise carry the header out of view exactly when
   the list is long enough to need it. Horizontal padding matches
   .lvi-cmd-result-list li so the header and the rows share one left edge. */
.lvi-cmd-panel-head {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0;
    padding: 8px 15px 6px;
    background-color: #fff;
    border-bottom: 1px solid #eef2f7;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8a94a6;
}

/* Attribute popovers (quantity / location) — popover-mode bars only. Positioned
   by placeFloat() for the same reason as .lvi-cmd-panel: these bars also render
   inside the item list's scrollport. */
.lvi-cmd-popover {
    position: fixed; z-index: 40;
    width: 320px; padding: 12px;
    background: #fff; border: 1px solid #e2e6ec; border-radius: 8px;
    box-shadow: 0 8px 24px rgba(20, 30, 50, .12);
}
.lvi-cmd-popover-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.lvi-cmd-popover-title { font-size: 13px; font-weight: 600; color: #8a94a6; }

/* Inline-fields mode: field editors render in the bar instead of popovers. */
.lvi-cmd-bar.is-inline { flex-wrap: wrap; }
/* Field groups sit well apart; inside a group the label hugs its control, so the
   pairing reads as label+field rather than an evenly spaced row of parts. */
.lvi-cmd-fields { display: flex; align-items: center; gap: 22px; flex: 1 1 100%; flex-wrap: wrap; row-gap: 12px; }
.lvi-cmd-field { display: inline-flex; align-items: center; gap: 8px; }
.lvi-cmd-field:focus { outline: none; }
.lvi-cmd-field-label { font-size: 12px; color: #8a94a6; white-space: nowrap; }
/* Save-time refusal. flex-basis 100% puts it on its own row inside the wrapped
   inline bar, under the fields it is talking about. */
.lvi-cmd-error {
    flex: 1 1 100%;
    margin: 2px 0 0;
    font-size: 12px;
    color: #d64550;
    display: flex;
    align-items: center;
    gap: 6px;
}
/* Advisory counterpart to .lvi-cmd-error, sharing its row geometry so the two
   swap without moving the bar. Muted, and marked by fa-circle-info against the
   error's fa-triangle-exclamation, so the two never read as the same weight. */
.lvi-cmd-hint {
    flex: 1 1 100%;
    margin: 2px 0 0;
    font-size: 12px;
    color: #8a94a6;
    display: flex;
    align-items: center;
    gap: 6px;
}
.lvi-cmd-field.has-error .dcui-form-control,
.lvi-cmd-field.has-error .lv-dropdown .dcui-dt-label {
    border-color: #d64550;
}
.lvi-cmd-qty { width: 90px; }
/* DcInputField wraps its input in .dcui-form-group, which carries a 20px bottom
   margin meant for stacked form rows. Inside the bar that margin inflates the
   field box to 55px, and align-items:center then sits the input 10px higher than
   the dropdown toggles beside it. These are inline editors, not form rows. */
.lvi-cmd-field .dcui-form-group { margin-bottom: 0; }
.lvi-cmd-field .lv-dropdown { min-width: 170px; }

/* The bar's editors must read as inputs. Two things flatten them by default: the
   kit renders a closed .dcui-dt-label with no chrome, and the supplier block is a
   .lv-border-container, whose "flush" rules strip control borders so form rows
   don't double up. These are inline editors, not form rows — restore the outlined
   white-fill box (same treatment as .lvi-bulk-dest-col-qty). The longer selectors
   are what it takes to out-rank those flush rules. Target the quantity input by its
   own class (DcInputField sets inheritAttrs:false, so .lvi-cmd-qty lands on the
   input itself) rather than every .dcui-form-control in the group — a dropdown's
   panel carries a search input that must stay chromeless. */
.lvi-cmd-bar.is-inline .lvi-cmd-input,
.lvi-cmd-field .lvi-cmd-qty,
.lvi-cmd-field .lv-dropdown .dcui-dt-label,
.lvi-form .lv-border-container .lvi-cmd-field .lv-dropdown .dcui-dt-label {
    border: 1px solid var(--dcui-line-color, #d7dae0);
    border-radius: var(--dcui-field-radius);
    background-color: #fff;
}
/* Take the kit's field height so the inputs line up with the dropdown toggles
   beside them (those are exactly --dcui-field-height). An auto height with a
   padding+line-height pair left them ~1.5px short and sat their text a hair off
   the toggles' — `line-height: normal` lets the input centre its own value. */
.lvi-cmd-bar.is-inline .lvi-cmd-input,
.lvi-cmd-field .lvi-cmd-qty,
.lvi-form .lv-border-container .lvi-cmd-field .lvi-cmd-qty {
    box-sizing: border-box;
    height: var(--dcui-field-height);
    line-height: normal;
    padding: 0 10px;
}
.lvi-form .lv-border-container .lvi-cmd-field .lvi-cmd-qty {
    border: 1px solid var(--dcui-line-color, #d7dae0) !important;
    border-radius: var(--dcui-field-radius);
    background-color: #fff;
}
/* The unit-cost inline field mirrors the quantity field's sizing and chrome, but
   keeps its own class so selectors that target the quantity field (and e2e locators)
   stay unambiguous — the two must never share .lvi-cmd-qty. */
.lvi-cmd-field .lvi-cmd-cost,
.lvi-form .lv-border-container .lvi-cmd-field .lvi-cmd-cost {
    width: 90px;
    box-sizing: border-box;
    height: var(--dcui-field-height);
    line-height: normal;
    padding: 0 10px;
    border: 1px solid var(--dcui-line-color, #d7dae0) !important;
    border-radius: var(--dcui-field-radius);
    background-color: #fff;
}
.lvi-cmd-cancel {
    border: 1px solid #dbe0e7; color: #6b7585; background: #fff;
    width: 30px; padding: 0;
}
.lvi-cmd-cancel:hover { background: #eef2f7; }

/* Horizontal stage graph (detail page, under the title) */
.lvi-stage-graph--horizontal { border-right: none; border-bottom: 1px solid #eef0f4; padding: 18px 20px; }
.lvi-stage-graph--horizontal .lvi-stage-list { display: flex; align-items: flex-start; justify-content: space-between; }
.lvi-stage-graph--horizontal .lvi-stage-list::before {
    top: 13px; bottom: auto; left: 28px; right: 28px; width: auto;
    border-left: none; border-top: 2px dotted #d9dee6;
}
.lvi-stage-graph--horizontal .lvi-stage-list .item {
    flex: 1 1 0; flex-direction: column; gap: 8px; padding: 0; text-align: center;
}
.lvi-stage-graph--horizontal .lvi-stage-label { font-size: 13px; }

/* DcCollapsibleSidePanel (global component; styled here only for this app) */
.lvi-app .dcui-collapsible-side-panel {
    position: relative; flex: 0 0 auto; width: 320px;
    border-left: 1px solid #eef0f4; transition: width 0.15s ease;
}
.lvi-app .dcui-collapsible-side-panel.dcui-csp-collapsed { width: 40px; }
.lvi-app .dcui-csp-toggle {
    position: absolute; top: 12px; left: -13px; z-index: 3;
    width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid #e2e6ec; background: #fff; cursor: pointer; color: #6b7585;
    display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.lvi-app .dcui-csp-body { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.lvi-app .dcui-csp-rail { display: flex; align-items: center; justify-content: center; height: 100%; cursor: pointer; }
.lvi-app .dcui-csp-rail-title {
    writing-mode: vertical-rl; transform: rotate(180deg);
    text-transform: uppercase; letter-spacing: 0.4px; font-size: 12px; color: #8a94a6;
}

/* All Requests — split create menu + type filter */
.lvi-create-menu { display: inline-block; }
.lvi-create-menu-btn { display: inline-flex; align-items: center; cursor: pointer; }
/* The button carries its own chevron; strip the DcDropdown toggle's padding +
   default :after caret so we don't get a second dropdown icon beside it. */
.lvi-create-menu .dcui-dt-label { padding: 0; }
.lvi-create-menu .dcui-dt-label::after { display: none; }
.lvi-type-filter { min-width: 170px; }

/* Request detail — summary header actions + requested items */
.lvi-summary-head, .lvi-items-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.lvi-summary-actions { display: flex; align-items: center; gap: 10px; }
.lvi-requested-items { width: 100%; }
.lvi-requested-items th, .lvi-requested-items td { text-align: left; vertical-align: middle; padding: 8px; }
.lvi-requested-items th { font-weight: 600; color: #8a94a6; font-size: 13px; }
.lvi-requested-items th:first-child, .lvi-requested-items td:first-child { width: 60%; }
.lvi-item-name-cell { display: inline-flex; align-items: center; gap: 10px; }
.lvi-line-actions { white-space: nowrap; display: flex; align-items: center; gap: 6px; }

/* Complete Order popup — wider so the per-line table reads as columns, not a
   cramped wrap. Roomy rows with a light row separator keep it scannable. */
.popup.lvi-complete-popup {
    width: 720px;
    max-width: calc(100vw - 48px);
    /* Framework .popup is overflow:hidden (rounded corners); that clips the
       resolution dropdown panel when it opens on the last row. Let it extend past
       the modal like the create/warehouse popups do. */
    overflow: visible;
}
.lvi-complete-items { width: 100%; border-collapse: collapse; margin-top: 4px; }
.lvi-complete-items th, .lvi-complete-items td {
    text-align: left;
    vertical-align: middle;
    padding: 10px 12px;
}
.lvi-complete-items th {
    font-weight: 600;
    color: #8a94a6;
    font-size: 13px;
    border-bottom: 1px solid #e2e6ec;
}
.lvi-complete-items tbody tr + tr td { border-top: 1px solid #eef1f5; }
.lvi-complete-items .lvi-cc-item { font-weight: 600; color: #2a3340; }
.lvi-complete-items .lvi-cc-res { width: 200px; }

/* Dispatch Items popup — a per-line qty table like Complete Order. Without an
   explicit width it falls back to the default .popup (min 650px, max 95%) and
   stretches across the screen, blowing out the qty inputs. Size it to its columns
   and cap the Remaining / Dispatch Qty columns so the item name takes the slack. */
.popup.lvi-dispatch-popup {
    width: 560px;
    max-width: calc(100vw - 48px);
}
.lvi-dispatch-popup .lvi-requested-items th:first-child,
.lvi-dispatch-popup .lvi-requested-items td:first-child { width: auto; }
.lvi-dispatch-popup .lvi-requested-items th:nth-child(2),
.lvi-dispatch-popup .lvi-requested-items td:nth-child(2) { width: 110px; }
.lvi-dispatch-popup .lvi-requested-items th:last-child,
.lvi-dispatch-popup .lvi-requested-items td:last-child { width: 170px; }

@media (max-width: 900px) {
    .lvi-detail-body--stacked { flex-direction: column; }
    .lvi-app .dcui-collapsible-side-panel,
    .lvi-app .dcui-collapsible-side-panel.dcui-csp-collapsed { width: 100%; border-left: none; border-top: 1px solid #eef0f4; }
    .lvi-manage-bar-filters { flex-direction: column; align-items: stretch; gap: 10px; }
    .lvi-summary-head, .lvi-items-head { flex-direction: column; align-items: stretch; }
    /* Let the title band's action buttons + stage select drop onto their own row. */
    .lvi-detail-topbar { flex-wrap: wrap; }
    .lvi-detail-topbar-actions { flex-wrap: wrap; width: 100%; }
    .lvi-stage-select { width: 100%; }
}

/* Master-status "Draft" chip color (the dcui kit ships only success/warning/danger). */
.lvi-app .dcui-text-dark { color: #1f2a37; }

/* ==========================================================================
   Storage level create popup (Add Storage Level) + reusable toggle.
   ========================================================================== */
/* Single-column form — override the item popup's 880px (two-column gallery) width
   so the body fills the content box instead of leaving a right-side gap. */
.popup.lvi-storage-popup { width: 640px; }
.lvi-storage-popup .lvi-form { max-width: none; }
.lvi-storage-popup .lvi-sl-subtitle {
    color: #6b7280;
    font-size: 14px;
    margin: 0 0 16px;
    line-height: 1.45;
}
/* Vertical rhythm. .lvi-form is a flex column with a 14px gap, so nothing here
   collapses — a box's bottom margin and the next section's top margin both stack
   on top of that gap (18 + 20 + 14 = 52px between blocks). Let the gap carry the
   spacing and keep just a small step for the section break. */
/* The subtitle belongs to the title — .lvi-form's own 6px top margin is the whole gap. */
.lvi-storage-popup .tb-mmi-label h1 { margin-bottom: 0; }
.lvi-storage-popup .lvi-item-subtitle { margin-bottom: 0; }
.lvi-storage-popup .lvi-item-section { margin-top: 6px; }
.lvi-storage-popup .lv-border-container { margin-bottom: 0; }
.lvi-storage-popup .lvi-item-custom { padding: 12px 14px; }
.lvi-storage-popup .lvi-wh-error { margin: 0; }
.lvi-storage-popup .lvi-wh-actions { margin-top: 4px; padding-top: 14px; }

/* On/off slider switch (LviToggle). */
.lvi-toggle {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    flex: 0 0 auto;
}
.lvi-toggle input { opacity: 0; width: 0; height: 0; }
.lvi-toggle .lvi-toggle-slider {
    position: absolute;
    inset: 0;
    background: #cbd5e1;
    border-radius: 999px;
    transition: 0.2s;
    cursor: pointer;
}
.lvi-toggle .lvi-toggle-slider::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: 0.2s;
    box-shadow: 0 1px 4px rgba(17, 24, 39, 0.25);
}
.lvi-toggle input:checked + .lvi-toggle-slider { background: var(--dcui-primary-color, #2563eb); }
.lvi-toggle input:checked + .lvi-toggle-slider::before { transform: translateX(20px); }
.lvi-toggle.is-disabled { opacity: 0.5; }

/* "Is this level storable?" switch card. */
.lvi-sl-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid #eef0f4;
    border-radius: 10px;
    padding: 14px 16px;
    background: #fafafa;
}
.lvi-sl-switch strong { display: block; font-size: 14px; margin-bottom: 3px; }
.lvi-sl-switch span { color: #6b7280; font-size: 12px; line-height: 1.4; }

/* Capacity section — dims when the level isn't storable. */
.lvi-sl-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
}
.lvi-sl-status.is-ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; }
.lvi-sl-status.is-warn { background: #fffbeb; border: 1px solid #fde68a; color: #b45309; }

/* ==========================================================================
   Sidebar storage hierarchy tree (LviStorageTree).
   ========================================================================== */
.lvi-ms-tree-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 14px 10px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8a94a6;
}
.lvi-ms-tree-add { cursor: pointer; color: #0096fd; }
.lvi-ms-tree-add:hover { color: #007ad6; }
/* Zero-height probe the IntersectionObserver watches to page in the next group. */
.lvi-tree-sentinel { height: 1px; }

.lvi-tree-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
}
.lvi-tree-row:hover { background: #f4f7fb; }
.lvi-tree-row.selected { background: #e8f3ff; color: #0a6cd1; }
.lvi-tree-caret { width: 14px; flex: 0 0 14px; text-align: center; color: #8a94a6; }
.lvi-tree-icon { color: #8a94a6; font-size: 15px; }
.lvi-tree-row.selected .lvi-tree-icon { color: #0a6cd1; }
.lvi-tree-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}
.lvi-tree-actions { display: none; gap: 10px; flex: 0 0 auto; color: #8a94a6; }
.lvi-tree-row:hover .lvi-tree-actions { display: flex; }
.lvi-tree-actions i { cursor: pointer; }
.lvi-tree-actions i:hover { color: #0a6cd1; }
.lvi-tree-actions i.is-disabled,
.lvi-tree-actions i.is-disabled:hover { color: #c4cad4; cursor: not-allowed; }
.lvi-tree-children { margin-left: 16px; border-left: 1px solid #eef0f4; padding-left: 4px; }

/* Add Storage Level — capacity mapping rows + helpers. Mirrors the item popup's
   Custom Fields pattern: repeating rows inside a bordered container, with an
   "+ Add" link in the section head. */
.lvi-storage-popup .lvi-sl-help { display: block; font-size: 12px; color: #8a94a6; margin-top: 4px; }
.lvi-sl-cap-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}
.lvi-sl-cap-row:first-child { margin-top: 0; }
.lvi-sl-cap-row > * { flex: 1 1 0; min-width: 0; margin: 0; }
.lvi-sl-cap-remove {
    flex: 0 0 auto;
    cursor: pointer;
    color: #8a94a6;
}
.lvi-sl-cap-remove:hover { color: #d30505; }
/* The status banner reads as part of the mapping box above it — keep it close. */
.lvi-sl-capacity .lvi-sl-status { margin-top: 10px; }
.lvi-sl-status-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    font-size: 11px;
    cursor: help;
}

/* Warehouse wrapper rows in the "All" tree grouping: grouping headers, not
   selectable — icon in the same grey as the other tree icons, and the label a
   shade lighter than the selectable rows so they read as non-interactive. */
.lvi-tree-node.is-warehouse > .lvi-tree-row { font-weight: 600; color: #6b7585; }

/* ==========================================================================
   Storage level detail views (Overview dashboard + Rack item-list).
   ========================================================================== */
.lvi-sl-overview-cols {
    display: grid;
    /* Utilization is the primary column; the Coming-Soon movements panel is narrower. */
    grid-template-columns: 1.4fr 1fr;
    gap: 18px;
    align-items: start;
}
.lvi-util-list { display: flex; flex-direction: column; gap: 16px; }
.lvi-util-head { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
.lvi-util-label { color: #374151; }
.lvi-util-pct { text-align: right; font-size: 13px; color: #6b7280; font-weight: 600; }
.lvi-util-track { height: 8px; border-radius: 999px; background: #eef0f4; position: relative; }
.lvi-util-fill { height: 100%; border-radius: 999px; background: var(--dcui-primary-color, #2563eb); transition: width 0.3s; }

@media (max-width: 900px) {
    .lvi-sl-overview-cols { grid-template-columns: 1fr; }
}

/* ───────── Table polish: sticky headers (lv_inventory-scoped) ───────── */

/* List views: <div class="scroll-container lvi-table-scroll"><dc-table>.
   DcTable wraps the <table> in <div class="dcui-table dcui-horizontal-scrollable">,
   which has overflow-x:auto — that makes it (not .lvi-table-scroll) the sticky
   header's scroll context. Make THAT wrapper the single scroll container (cap +
   vertical scroll) so the header pins against it, and hand off the height cap
   from the outer .lvi-table-scroll so the two don't both scroll (double scrollbar). */
.lvi-table-scroll:has(.dcui-horizontal-scrollable) {
    max-height: none;
    overflow: visible;
}
.lvi-table-scroll .dcui-horizontal-scrollable {
    max-height: calc(100vh - 280px);
    overflow-y: auto;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #c5ccd6 transparent;
}
/* Slim the native scrollbar on the list scroller (default ~15px reads as bulky). */
.lvi-table-scroll .dcui-horizontal-scrollable::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.lvi-table-scroll .dcui-horizontal-scrollable::-webkit-scrollbar-thumb {
    background: #c5ccd6;
    border-radius: 8px;
}
.lvi-table-scroll .dcui-horizontal-scrollable::-webkit-scrollbar-track {
    background: transparent;
}
.lvi-table-scroll .dcui-t-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    box-shadow: inset 0 -1px 0 #e2e6ec; /* bottom rule that survives sticky */
}

/* List pages (a .lvi-table-scroll directly under .lvi-middle): the list must be
   the ONLY scroller. The 100vh-280px cap above is an estimate that never quite
   matches the chrome above the table, so the few leftover pixels made
   .lvi-middle scroll too (double scrollbar, page chrome creeping under the
   header). Flex the list region to the exact leftover height instead. Desktop
   only — below 1024px the shell switches to natural height and the page itself
   is the scroller. */
@media (min-width: 1025px) {
    .lvi-middle:has(> .lvi-table-scroll) {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .lvi-middle > .lvi-table-scroll {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
    }
    .lvi-middle > .lvi-table-scroll .dcui-horizontal-scrollable {
        max-height: 100%;
    }
    /* Bulk-selection lists (rack/bin detail): the scroll region already fills the
       middle via flex, but a short table hugs its rows and leaves the sticky
       selection bar floating just beneath them (mid-page). Lay the region out as a
       column and let the bar's top margin collapse the gap so it pins to the bottom
       of the visible area. The table keeps its natural height (flex: 0 1 auto) and
       still shrinks to scroll internally when tall. */
    .lvi-middle > .lvi-table-scroll:has(> .lvi-bulk-bar) {
        display: flex;
        flex-direction: column;
    }
    .lvi-middle > .lvi-table-scroll:has(> .lvi-bulk-bar) > .dcui-horizontal-scrollable {
        flex: 0 1 auto;
        min-height: 0;
    }
    .lvi-middle > .lvi-table-scroll:has(> .lvi-bulk-bar) > .lvi-bulk-bar {
        margin-top: auto;
    }
}

/* Detail item tables (move/order/request "Requested Items") and the
   Complete Order popup table. Cap the detail scroll region so the header
   has something to pin against.
   Exclude DcPopup's outer `.popup-container` (a full-screen fixed overlay that
   also carries `.scroll-container`): a popup rendered inside a `.lvi-detail-page`
   would otherwise inherit this cap, shrinking the modal's scroll region to
   100vh - 320px and making the whole popup card scroll within the page. Popups
   own their own height (see .lvi-putaway-manage-popup); only inner table
   scroll regions should be capped here.
   Exclude LviDropdown's option list too (it also carries `.scroll-container`):
   its own 260px cap above has the same specificity as this rule but comes
   earlier, so without this the menu would stretch to the full page height. */
.lvi-detail-main .scroll-container:not(.popup-container):not(.lv-dropdown-scrollable),
.lvi-detail-page .scroll-container:not(.popup-container):not(.lv-dropdown-scrollable) {
    max-height: calc(100vh - 320px);
}
.lvi-requested-items thead th,
.lvi-complete-items thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    box-shadow: inset 0 -1px 0 #e2e6ec;
}

/* ───────── Table polish: row hover + cursor ───────── */

/* Hover background on every lv_inventory data-table body row. */
.lvi-table-scroll .dcui-t-table tbody tr:hover,
.lvi-requested-items tbody tr:hover {
    background: #f6f9fc;
}

/* Pointer only where the row actually navigates (list views open a detail
   page on click). Detail item rows are not clickable → keep the default cursor. */
.lvi-table-scroll .dcui-t-table tbody tr {
    cursor: pointer;
}

/* Inline inputs in a data-table cell: dc-input-field wraps its <input> in a
   .dcui-form-group that carries a default 20px bottom margin. In a
   vertical-align:middle cell that margin drops below the field, so the browser
   centres field+margin and the input floats up out of line with the plain-text
   cells beside it (seen first in the Dispatch qty column, but the same wherever an
   input shares a row with text — order-detail edit table, Move picks "Take", …).
   Zero the margin so inline fields sit centred with their row. */
.lvi-app .dcui-t-table td .dcui-form-group { margin: 0; }


/* Numbered server-pagination pager (LviPager). The pager only renders when there
   is more than one page, so `:has(.lvi-pager)` below also gates the height handoff. */
.lvi-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding: 14px 2px 4px;
}
.lvi-pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--dcui-line-color, #e5e7eb);
    background: #fff;
    border-radius: var(--dcui-field-radius, 8px);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--dcui-text-color, #475467);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.lvi-pager-btn:hover:not(:disabled):not(.active) {
    background: #f4f7fb;
    border-color: #cbd5e1;
    color: var(--dcui-primary-color, #2563eb);
}
.lvi-pager-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .2);
}
.lvi-pager-btn.active {
    background: var(--dcui-primary-color, #2563eb);
    color: #fff;
    border-color: var(--dcui-primary-color, #2563eb);
    box-shadow: 0 1px 2px rgba(37, 99, 235, .35);
    cursor: default;
}
.lvi-pager-btn:disabled {
    opacity: .4;
    cursor: default;
}
.lvi-pager-gap {
    min-width: 22px;
    text-align: center;
    color: #98a2b3;
    user-select: none;
}
/* The pager sits below the capped table scroller inside .lvi-table-scroll. Hand a
   bit of the scroller's height to the pager so .lvi-middle doesn't also scroll
   (avoids a second, outer scrollbar). Only applies when the pager is shown. */
.lvi-table-scroll:has(.lvi-pager) .dcui-horizontal-scrollable {
    max-height: calc(100vh - 340px);
}

/* Inline "loading more" indicator (component: LviInlineLoader) shared by every
   infinite-scroll view — activities feed, list tables, storage tree. A small
   in-flow spinner under the last row, unlike the full-size Data_Loader overlay
   that covers existing rows on every scroll-to-end. */
.lvi-inline-loader {
    padding: 12px 14px;
    color: #667085;
    font-size: 13px;
    text-align: center;
}

/* Activities — row layout: avatar · text (grows) · right-aligned timestamp */
.lvi-activity-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 4px;
    border-bottom: 1px solid #f0f1f3;
    color: #344054;
    cursor: pointer;
}
.lvi-activity-row:hover { background: #f9fafb; }
.lvi-activity-row:focus-visible {
    outline: 2px solid #1570ef;
    outline-offset: -2px;
}
/* Connector words ("created", "to") sit a shade lighter than the bold
   actor/entity names, matching the design's dark-grey-on-grey hierarchy. */
.lvi-activity-text .lv-typo-normal-300-f-14 { color: #667085; }
.lvi-activity-user {
    flex: 0 0 200px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.lvi-activity-avatar {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
}
.lvi-activity-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* The sentence occupies one line and ellipsises: the feed is for scanning, and the
   full text (plus a structured breakdown of any field diff) lives in the row's
   detail popup. min-width:0 is what lets this flex child shrink below its content. */
.lvi-activity-text {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lvi-activity-time { flex: 0 0 auto; white-space: nowrap; color: #475467; font-weight: 500; }

/* Activities — the outer middle does not scroll; the card fills it and only the
   activity list inside scrolls, so the filter header stays fixed (mirrors the
   "fixed filter bar + inner scroll" pattern used by the All Requests list). */
.lvi-activity-middle {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* The activity pane is a plain column (no card chrome) so it doesn't read as a
   second card stacked inside the main content card — it just fills the middle and
   hosts the fixed filter header + inner scroll. */
.lvi-activity-pane {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.lvi-activity-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding-right: 12px;
}

/* Activities — fixed filter header (date + search + category chips) */
.lvi-activity-header {
    flex: 0 0 auto;
    background: #fff;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f1f3;
    margin-bottom: 6px;
}
.lvi-activity-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 4px 0 12px;
}
/* Date + user pickers cluster on the left; the search field stays right. */
.lvi-activity-filter-group {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.lvi-activity-date,
.lvi-activity-user-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
/* The dropdowns' .lv-dropdown is width:100% by default, which would push them
   below their label in this flex row — constrain so label + control stay inline. */
.lvi-activity-date .lv-dropdown,
.lvi-activity-user-filter .lv-dropdown {
    width: auto;
    min-width: 160px;
    flex: 0 0 auto;
}
/* Keep every control in the filter header at one size (13px) so the date label,
   preset dropdown, search field and category chips read as one consistent row. */
.lvi-activity-header .dcui-dt-label,
.lvi-activity-header .dcui-form-control {
    font-size: 13px;
}
/* Responsive filter bar. The From/To pickers carry a 130px min-width that, paired
   with the preset + user dropdowns, forced the row wider than the pane and pushed
   the User picker over the category chips. Let the date fields shrink so the row
   always fits, then stack progressively as the pane narrows. */
.lvi-activity-date .lvi-date-range-filter { flex-wrap: wrap; }
.lvi-activity-date .lvi-date-field { min-width: 0; flex: 1 1 120px; }
@media (max-width: 1024px) {
    /* Search drops below the pickers and spans the full pane width. */
    .lvi-activity-controls { flex-direction: column; align-items: stretch; }
    .lvi-activity-controls > * { width: 100%; }
}
@media (max-width: 640px) {
    /* Each picker (label + control) takes its own full-width row. */
    .lvi-activity-filter-group { flex-direction: column; align-items: stretch; gap: 10px; }
    .lvi-activity-date,
    .lvi-activity-user-filter { width: 100%; }
    .lvi-activity-date .lv-dropdown,
    .lvi-activity-user-filter .lv-dropdown { width: 100%; min-width: 0; flex: 1 1 auto; }
}
/* In range mode the known fill and the uncertainty band abut at `min`; square
   their shared inner corners so the two segments read as one continuous bar. */
.lvi-util-fill--lead { border-radius: 999px 0 0 999px; }
.lvi-util-band { position: absolute; top: 0; bottom: 0; background: #b4bcc8; border-radius: 0 999px 999px 0; }

/* ── Command bar rollout: keyboard highlight, create row, transfer rows ─────── */

/* Keyboard-highlighted entry reads the same as hover. */
.lvi-cmd-panel li.is-active,
.lvi-cmd-palette li.is-active { background-color: #eee; }

/* "Create a new item" footer row in the item type-ahead. Mirrors LviDropdown's
   .lvi-dropdown-create so every create-new affordance reads the same: a sticky,
   rule-topped footer whose link owns the padding. */
.lvi-cmd-create {
    position: sticky;
    bottom: 0;
    padding: 0;
    background: #fff;
    border-top: 1px solid #e5e7eb;
}
.lvi-cmd-create a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    color: #2563eb;
    cursor: pointer;
}
.lvi-cmd-create:hover { background: #f3f4f6; }

/* ───────── Floating "back to top" button on long lists ───────── */

/* Pinned to the bottom-right of the list's position:relative wrapper
   (.lvi-table-scroll on the table lists, .lvi-activity-pane on the feed);
   LviScrollTopButton shows it only after the list has scrolled a bit. */
.lvi-scroll-top {
    position: absolute;
    right: 22px;
    bottom: 16px;
    z-index: 5;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #dfe3e8;
    background: #fff;
    color: #5b6779;
    box-shadow: 0 2px 8px rgba(20, 30, 50, 0.12);
    cursor: pointer;
}
.lvi-scroll-top:hover { color: #0a6cd1; border-color: #0a6cd1; }
/* The feed's scroll element is a child, so the pane anchors the overlay. */
.lvi-activity-pane { position: relative; }

/* Activity detail popup — the full record behind a clamped feed row.
   Pin a width: the base .popup only sets min-width/max-width, so the 100%-wide
   changes table would otherwise stretch the modal to 95% of the viewport. 650px
   is the framework's .popup min-width, so this is as narrow as the modal goes. */
.popup.lvi-activity-detail { width: 650px; }
.lvi-activity-detail .lvi-activity-detail-actor {
    display: flex;
    align-items: center;
    gap: 10px;
}
.lvi-activity-detail .lvi-activity-detail-time { color: #667085; }
.lvi-activity-detail .lvi-activity-detail-summary {
    margin: 14px 0;
    color: #344054;
    line-height: 1.5;
}
.lvi-activity-detail .lvi-activity-detail-summary .lv-typo-normal-300-f-14 { color: #667085; }
.lvi-activity-detail .lvi-activity-detail-meta {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 14px;
}
.lvi-activity-detail .lvi-activity-detail-meta-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 10px;
    align-items: baseline;
}
.lvi-activity-detail .lvi-activity-detail-meta dt { color: #667085; }
.lvi-activity-detail .lvi-activity-detail-meta dd { margin: 0; color: #344054; }
.lvi-activity-detail .lvi-activity-detail-section { margin-top: 18px; }
.lvi-activity-detail .lvi-activity-detail-heading {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: #344054;
}
.lvi-activity-detail .lvi-activity-detail-transition {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #667085;
}
.lvi-activity-detail .lvi-activity-detail-changes table {
    width: 100%;
    border-collapse: collapse;
}
.lvi-activity-detail .lvi-activity-detail-changes th,
.lvi-activity-detail .lvi-activity-detail-changes td {
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #f0f1f3;
    /* Diff values are free text and can be long; wrap rather than overflow. */
    overflow-wrap: anywhere;
}
.lvi-activity-detail .lvi-activity-detail-changes th { color: #667085; font-weight: 500; }
.lvi-activity-detail .lvi-activity-detail-changes td:first-child { white-space: nowrap; }
.lvi-activity-detail .lvi-activity-detail-raw {
    margin: 0;
    color: #667085;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.lvi-activity-detail .lvi-activity-detail-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

/* Coming-soon placeholder ------------------------------------------------ */
.lvi-app .lvi-coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    color: var(--lvi-muted, #8a94a6);
    gap: 6px;
}
.lvi-app .lvi-coming-soon-icon { font-size: 26px; opacity: 0.6; }
.lvi-app .lvi-coming-soon-title { font-size: 15px; font-weight: 600; }
.lvi-app .lvi-coming-soon-sub { font-size: 13px; opacity: 0.85; }

/* Unified line-remove control ------------------------------------------- */
.lvi-app .lvi-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: var(--lvi-muted, #8a94a6);
    cursor: pointer;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease;
}
.lvi-app .lvi-remove-btn:hover:not(:disabled) { background: rgba(220, 53, 69, 0.1); color: #dc3545; }
.lvi-app .lvi-remove-btn:disabled { opacity: 0.5; cursor: default; }

/* Move detail items table ------------------------------------------------ */
.lvi-app .lvi-requested-items .lvi-move-qty-input { min-width: 80px; }
.lvi-app .lvi-requested-items th:nth-child(4),
.lvi-app .lvi-requested-items td:nth-child(4) { min-width: 96px; }
/* The move table has 6 columns (Item/From/To/Qty/Stage/actions), not the request
   table's 4, so the shared 60%-first-column rule starves From/To until a bin name
   like "Bin P1-01" wraps to three lines. Trim the Item column and give the two
   location columns real width, keeping their values (and qty+unit) on one line. */
.lvi-app .lvi-move-items th:first-child,
.lvi-app .lvi-move-items td:first-child { width: 32%; }
.lvi-app .lvi-move-items th:nth-child(2),
.lvi-app .lvi-move-items td:nth-child(2),
.lvi-app .lvi-move-items th:nth-child(3),
.lvi-app .lvi-move-items td:nth-child(3) { width: 17%; white-space: nowrap; }
.lvi-app .lvi-move-items .lvi-move-qty-cell { white-space: nowrap; }
.lvi-app .lvi-move-items .lvi-unit { color: #8a94a6; }
/* The 6 nowrap columns outgrow a phone viewport, so this table must own its
   horizontal scroll. The framework's .scroll-container is overflow-x:hidden, which
   would clip From/To instead — and letting the overflow escape to .lvi-detail-main
   (overflow:auto) is worse still: that box runs past the viewport, so its scrollbar
   paints mid-page, underneath the fixed bottom nav. Scroll on both axes here, like
   the .dcui-horizontal-scrollable list scroller above. The From/To dropdown panels
   are not clipped by it — LviDropdown renders them as a fixed popper, outside every
   scroll ancestor. */
/* Kept as a selector hook only — the horizontal scroll now lives on the list's
   own .lvi-cmd-table, so every item list scrolls the same way. */

/* Unify the in-dropdown search field spacing across all dropdowns --------- */
/* dc-search-field renders `.has-search-field.lv-input-filed-no-outline` as the
   first child of the panel. Different contexts (form vs. sidebar vs. inline)
   otherwise inherit different paddings; pin them all to the densest existing
   value so loose ones tighten rather than every one inflating. */
.lvi-app .lv-dropdown .dcui-dropdown-panel .has-search-field {
    padding: 5px 7px;
    margin: 0;
    box-sizing: border-box;
}
.lvi-app .lv-dropdown .dcui-dropdown-panel .has-search-field .lv-input-filed-no-outline {
    width: 100%;
    margin: 0;
}

/* --- Floating bulk-action bar (selection pill) --- */
.lvi-bulk-bar {
    position: sticky;
    bottom: 20px;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 26px;
    width: fit-content;
    max-width: calc(100% - 40px);
    margin: 14px auto 6px;
    padding: 9px 12px 9px 20px;
    border-radius: 10px;
    background: #3f4550;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}
.lvi-bulk-bar-count {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    white-space: nowrap;
}
.lvi-bulk-bar-clear {
    background: none;
    border: 0;
    color: #fff;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    font-size: 14px;
}
.lvi-bulk-bar-clear:hover { opacity: 0.75; }
.lvi-bulk-bar-actions { display: flex; align-items: center; gap: 4px; }
.lvi-bulk-bar-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 0;
    color: #fff;
    font-size: 14px;
    padding: 7px 12px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}
.lvi-bulk-bar-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); }
.lvi-bulk-bar-btn:disabled { opacity: 0.5; cursor: default; }
.lvi-bulk-bar-btn.is-danger:hover:not(:disabled) { background: rgba(255, 99, 99, 0.25); }

/* --- Bulk destination popup (per-row quantity table) --- */
.lvi-bulk-dest-table { width: 100%; margin-top: 12px; border-collapse: collapse; }
.lvi-bulk-dest-table thead th {
    padding: 6px 8px 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--lvi-muted, #8a8f98);
    text-align: left;
    border-bottom: 1px solid var(--dcui-line-color, #e8e8e8);
    white-space: nowrap;
}
.lvi-bulk-dest-table tbody td {
    padding: 9px 8px;
    font-size: 14px;
    vertical-align: middle;
    border-top: 1px solid var(--dcui-line-color, #e8e8e8);
}
.lvi-bulk-dest-table tbody tr:first-child td { border-top: 0; }
/* Item column takes the slack; the qty/available columns stay compact. */
.lvi-bulk-dest-col-item { width: 100%; }
.lvi-app .lvi-bulk-dest-col-dest { min-width: 180px; }
.lvi-bulk-dest-col-qty { width: 96px; }
.lvi-bulk-dest-col-avail { width: 1%; white-space: nowrap; text-align: right; color: var(--lvi-muted, #8a8f98); }
.lvi-bulk-dest-name { font-weight: 600; }
.lvi-bulk-dest-sub { margin-left: 8px; color: var(--lvi-muted, #8a8f98); font-size: 12px; }
.lvi-bulk-dest-muted { color: var(--lvi-muted, #8a8f98); }
.lvi-bulk-dest-note { display: block; margin-top: 2px; color: var(--lvi-muted, #8a8f98); font-size: 12px; }
.lvi-bulk-dest-blocked .lvi-bulk-dest-name { color: var(--lvi-muted, #8a8f98); }
/* The table sits inside .lv-border-container, whose create-form styling hides
   labels, strips the input border, and forces .dcui-form-group to 100% width.
   That's wrong for this per-row quantity table — pin a compact width and restore
   a visible, clearly-editable bordered box (DcInputField's root is
   .dcui-form-group; a .dcui-input-field selector would match nothing). */
.lvi-form .lv-border-container .lvi-bulk-dest-col-qty .dcui-form-group { width: 88px; padding: 0; margin: 0; }
.lvi-form .lv-border-container .lvi-bulk-dest-col-qty .dcui-form-control {
    width: 100%;
    box-sizing: border-box;
    height: auto;
    line-height: 1.4;
    border: 1px solid var(--dcui-line-color, #d7dae0) !important;
    border-radius: 6px;
    background: #fff;
    padding: 6px 10px;
    text-align: right;
}

/* --- Shipment putaway popup (history + remaining allocation) ---
   Both tables (Move requests, Allocate remaining) share the bulk-destination
   popup's column conventions so the two blocks read as one consistent layout:
   the label/reference/destination columns take the slack, Qty stays compact and
   right-aligned, and the allocate row's Qty input is the same compact bordered
   box as the bulk popup (its DcInputField would otherwise render full width). */
.lvi-app .lvi-putaway-totals {
    display: flex;
    align-items: baseline;
    gap: 16px 20px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--lvi-muted, #8a8f98);
}
.lvi-app .lvi-putaway-totals strong { color: #1f2a37; font-weight: 600; }
.lvi-app .lvi-putaway-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.lvi-app .lvi-putaway-table th {
    padding: 6px 8px 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--lvi-muted, #8a8f98);
    text-align: left;
    border-bottom: 1px solid var(--dcui-line-color, #e8e8e8);
    white-space: nowrap;
}
.lvi-app .lvi-putaway-table td {
    padding: 9px 8px;
    font-size: 14px;
    vertical-align: middle;
    border-top: 1px solid var(--dcui-line-color, #e8e8e8);
    word-break: break-word;
}
.lvi-app .lvi-putaway-table tbody tr:first-child td { border-top: 0; }
/* Shared columns: ref/dest take the slack; qty compact + right-aligned; the
   stage/actions columns hug their content. */
.lvi-app .lvi-putaway-col-ref { width: auto; }
.lvi-app .lvi-putaway-col-dest { width: auto; }
.lvi-app .lvi-putaway-col-qty { width: 96px; text-align: right; white-space: nowrap; }
.lvi-app .lvi-putaway-col-stage { width: 120px; }
.lvi-app .lvi-putaway-col-actions { width: 40px; text-align: right; }
/* A move row is a link to its request detail page — same pointer + hover fill the
   command tables use, with the reference reading as the link itself. */
.lvi-app .lvi-putaway-move-row { cursor: pointer; }
.lvi-app .lvi-putaway-move-row:hover { background: #f8fafc; }
.lvi-app .lvi-putaway-move-row .lvi-putaway-col-ref { color: #0096fd; }
/* The allocate row's Destination dropdown needs real room; keep it aligned with
   the Qty box beside it. */
.lvi-app .lvi-putaway-alloc-table .lvi-putaway-col-dest { min-width: 180px; }
.lvi-app .lvi-putaway-alloc-table th.lvi-putaway-col-qty { text-align: left; }
/* Restore a compact, clearly-editable bordered Qty box (DcInputField's root is
   .dcui-form-group; it otherwise fills the cell width). Mirrors the bulk popup. */
.lvi-form .lvi-putaway-alloc-table .lvi-putaway-col-qty .dcui-form-group { width: 100%; padding: 0; margin: 0; }
.lvi-form .lvi-putaway-alloc-table .lvi-putaway-col-qty .dcui-form-control {
    width: 100%;
    box-sizing: border-box;
    height: auto;
    line-height: 1.4;
    border: 1px solid var(--dcui-line-color, #d7dae0) !important;
    border-radius: 6px;
    background: #fff;
    padding: 6px 10px;
    text-align: right;
}
.lvi-app .lvi-putaway-add-btn { margin-top: 10px; }

/* --------------------------------------------------------------------------
   Stock placement popup — a compact single-column modal (the item form lives in
   its own popup). The header strip identifies the item being placed.
   -------------------------------------------------------------------------- */
.popup.lvi-placement-popup {
    width: 520px;
}
.lvi-placement-popup .lvi-placement-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 14px;
    border: 1px solid var(--dcui-line-color, #e5e7eb);
    border-radius: 6px;
}
.lvi-placement-popup .lvi-placement-item-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}
.lvi-placement-popup .lvi-placement-item-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lvi-placement-popup .lvi-placement-item-sku {
    font-size: 12px;
}
.lvi-placement-popup .lvi-placement-edit {
    flex: 0 0 auto;
}

/* Lot code cell on the item Stocks tab. The code is an identifier, so it reads
   as one rather than as prose. */
.lvi-lot-cell {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The lot a global-search deep link named (?lot=CODE). dc_ui_kit renders the
   <tr> itself and takes only a uniform row class, so the call-out lives on this
   first cell — the left border reads as marking the start of its row. */
.lvi-lot-highlight {
    font-weight: 600;
    box-shadow: inset 3px 0 0 0 var(--dcui-primary, #2f6fed);
    background: color-mix(in srgb, var(--dcui-primary, #2f6fed) 8%, transparent);
}
 .docld-notification-container {
    position: relative;
    min-height: 500px;
}

.docld-notification-section {
    padding-top: 30px;
}

.docld-notification-section__section-title {
    font-weight: 500;
    font-size: 15px;
}

.docld-notification-section__section-item__container {
    margin-top: 15px;
    border: 1px solid rgb(226, 226, 226);
    border-radius: 7px;
}

.docld-notification-section__section-item {
    background-color: white;
    border-bottom: 1px solid rgb(226, 226, 226);
    color: #5C5C5C;
}

.docld-notification-section__section-item__content {
    display: flex;
    justify-content: space-between;
    padding: 13px 15px;
    align-items: center;
    height: 45px;
}

.docld-notification-section__section-item__container__icon-container {
    display: flex;
    gap: 10px;
    flex: 0 0 30%;
    padding-left: 3px;
    align-items: center;
}

.docld-notification-section__section-item__container__mark_as_read_btn {
    padding: 8px 10px 9px;
    height: 30px;
    font-size: 14px;
}

.docld-notification-section__section-item__container__icon-container__icon {
    color: var(--dcui-secondary-color);
}

.docld-notification-section__section-item__container__icon-container__title {

}

.docld-notification-section__section-item__container__description-container {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 5px;
}

.docld-notification-section__section-item__container__description-container__user-icon {

}

.docld-notification-section__section-item__container__description-container__description {

}

.docld-notification-section__section-item__container__date-container {

}

.docld-notification-section__section-item__container__date-container__created_date {

}

.docld-notification-section__section-item__container .docld-notification-section__section-item:first-child {
    border-radius: 7px 7px 0 0;
}

.docld-notification-section__section-item__container .docld-notification-section__section-item:last-child {
    border-radius: 0 0 7px 7px;
    border-bottom: 0;
}

.docld-notification-section__section-item__container .docld-notification-section__section-item:only-child {
    border-radius: 7px 7px 7px 7px;
    border-bottom: 0;
}

.docld-notification-section__section-item:hover {
    background-color: color-mix(in srgb, var(--dcui-primary-color) 20%, white 80%);
    cursor: pointer;
}

.docld-notification-section__section-item__container__date-container__unread {
    color: var(--dcui-primary-color);
    width: 15px;
}

.docld-notification-section__section-item__container__date-container__unread__symbol {

}

.docld-notification-section__section-item.unread {
    color: black;
    font-weight: 500;
}

.docld-notification-section__no-notification__container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    gap: 15px;
    flex-direction: column;
}

.docld-notification-section__no-notification__container__image {
    width: 90px;
}

.docld-notification-section__no-notification__container__text {
    font-weight: 700;
    font-size: 26px;
}

@media screen and (max-width: 1025px) {
    .docld-notification-section__section-item__content {
        height: 70px;
    }
}

@media only screen and (max-width: 767px) and (orientation: portrait) {

    .docld-notification-section__section-item__content{
        height: 90px;
        display: grid;
        align-items: center;
    }
    .docld-notification-section__section-item__container__date-container__unread{
        grid-column: 5 / 5;
        grid-row: 2 / 2;
    }
    .docld-notification-section__section-item__container__icon-container{
        grid-column: 1 / 3;
        grid-row: 1 / 2;
    }
    .docld-notification-section__section-item__container__description-container{
        grid-column: 1 / 5;
        grid-row: 2 / 2;
    }
    .docld-notification-section__section-item__container__date-container{
        grid-column: 4 / 6;
        grid-row: 1 / 2;
        display: flex;
        justify-content: flex-end;
    }
    .docld-notification-section__section-item__container__description-container__description{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 270px;
    }
}
 /**
 * Declarations
 */
:root {
    
    --dark-primary-color: #181818;
    --dark-secondary-color: #242424;
    --dark-tertiary-color: #424242;
    --dark-quaternary-color: #ffffff;
    --dark-quinary-color:#000000;
    --dark-senary-color: #7b7b7b;
    --dark-seven-color: #c7c7c7;
    --dark-eight-color:#3e3e3f;
    --dark-color-text: #ffffff;
    --dark-headings-color: #ffffff;
    --dark-background-color: #515151;
    
    --light-primary-color: #181818;
    --light-secondary-color: #000000;
    --light-tertiary-color: #ffffff;
    --light-quaternary-color: #ffffff;
    --light-quinary-color:#dbdbdb;
    --light-senary-color: #7b7b7b;
    --light-color-text: #000000;
    --body-color: #000000;
    --light-headings-color: #000000;
    --success-color: #06c349;
    --error-color: #dd0707;
    --warning-color: #dd6007;
    --menu-selected-color:  rgba(0, 0, 0, 1);
}

/**
 * Normalization
 */

a {
    color: inherit;
    text-decoration: none;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

p {
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--dc-headings-color);
}


/**
 * Helpers
 */

.validation_errors {
    background-color: rgb(131, 0, 0);
    border-radius: 3px;
    height: auto;
    color: #ffffff;
    font-size: 13px;
    line-height: 1.4;
    max-width: 285px;
    position: absolute;
    text-align: left;
    bottom: 70px;
    width: auto;
    z-index: 99993;
    padding: 10px 0px;
}

.validation_errors:after {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #700202;
    top: 100%;
    left: 50%;
}

.validation_errors ul {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 15px;
    list-style-type: none;
}

.validation_errors li {
    padding-right: 12px;
    word-wrap: break-word;
}

.relative {
    position: relative !important;
}

.initial {
    position: initial !important;
}

.center-div {
    margin: 0 auto;
}

.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

.text-justify {
    text-align: justify !important;
}

.f-w-300 {
    font-weight: 300;
}

.f-w-400 {
    font-weight: 400;
}

.f-w-500 {
    font-weight: 500;
}

.f-w-600 {
    font-weight: 600;
}

.f-w-700 {
    font-weight: 700;
}

.f-s-20 {
    font-size: 20px;
}

.f-s-18 {
    font-size: 18px;
}

.f-s-22 {
    font-size: 22px;
}

.f-s-25 {
    font-size: 25px;
}

.f-s-30 {
    font-size: 30px;
}

.f-s-35 {
    font-size: 35px;
}
.l-h-1 {
    line-height: 1;
}

.line-height-1 {
    line-height: 1;
}

.full-width {
    width: 100%;
}

.full-height {
    height: 100%;
}

.m-10 {
    margin: 10px !important;
}

.m-t-0 {
    margin-top: 0 !important;
}

.m-t-5 {
    margin-top: 5px !important;
}

.m-t-10 {
    margin-top: 10px !important;
}

.m-t-15 {
    margin-top: 15px !important;
}

.m-t-20 {
    margin-top: 20px !important;
}

.m-t-25 {
    margin-top: 25px !important;
}

.m-t-40 {
    margin-top: 40px !important;
}

.m-t-50 {
    margin-top: 50px !important;
}

.m-b-0 {
    margin-bottom: 0 !important;
}

.m-b-5 {
    margin-bottom: 5px !important;
}

.m-b-10 {
    margin-bottom: 10px !important;
}

.m-b-15 {
    margin-bottom: 15px !important;
}

.m-b-20 {
    margin-bottom: 20px !important;
}

.m-b-25 {
    margin-bottom: 25px !important;
}

.m-b-30 {
    margin-bottom: 30px !important;
}

.m-r-auto {
    margin-right: auto !important;
}

.m-r-0 {
    margin-right: 0px !important;
}

.m-r-5 {
    margin-right: 5px !important;
}

.m-r-10 {
    margin-right: 10px !important;
}

.m-r-15 {
    margin-right: 15px !important;
}

.m-r-20 {
    margin-right: 20px !important;
}

.m-r-30 {
    margin-right: 30px !important;
}

.m-r-50 {
    margin-right: 50px !important;
}

.m-l-auto {
    margin-left: auto !important;
}

.m-l-0 {
    margin-left: 0px !important;
}

.m-l-5 {
    margin-left: 5px !important;
}

.m-l-10 {
    margin-left: 10px !important;
}

.m-l-15 {
    margin-left: 15px !important;
}

.m-l-20 {
    margin-left: 20px !important;
}

.m-l-30 {
    margin-left: 30px !important;
}

.m-lr-0 {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.p-5 {
    padding: 5px !important;
}

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

.p-15 {
    padding: 15px !important;
}

.p-20 {
    padding: 20px !important;
}

.p-25 {
    padding: 25px !important;
}

.p-30 {
    padding: 30px !important;
}

.p-t-0 {
    padding-top: 0px !important;
}

.p-t-5 {
    padding-top: 5px !important;
}

.p-t-10 {
    padding-top: 10px !important;
}

.p-t-15 {
    padding-top: 15px !important;
}

.p-t-35 {
    padding-top: 35px !important;
}

.p-b-0 {
    padding-bottom: 0px !important;
}

.p-b-2 {
    padding-bottom: 2px !important;
}

.p-b-5 {
    padding-bottom: 5px !important;
}

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

.p-b-15 {
    padding-bottom: 15px !important;
}

.p-b-20 {
    padding-bottom: 20px !important;
}

.p-b-35 {
    padding-bottom: 35px !important;
}

.p-r-0 {
    padding-right: 0px !important;
}

.p-r-5 {
    padding-right: 5px !important;
}

.p-r-10 {
    padding-right: 10px !important;
}

.p-r-15 {
    padding-right: 15px !important;
}

.p-r-20 {
    padding-right: 20px !important;
}

.p-r-35 {
    padding-right: 35px !important;
}

.p-l-0 {
    padding-left: 0px !important;
}

.p-l-5 {
    padding-left: 5px !important;
}

.p-l-10 {
    padding-left: 10px !important;
}

.p-l-15 {
    padding-left: 15px !important;
}

.p-l-20 {
    padding-left: 20px !important;
}

.p-l-35 {
    padding-left: 35px !important;
}

.p-lr-0 {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.color-inherit {
    color: inherit;
}

.text-success {
    color: #69bb67 !important;
}

.text-warning {
    color: #dd992d !important;
}

.text-danger {
    color: #ed1010 !important;
}

.text-notice {
    color: #4e4e4e !important;
}

.text-grey {
    color: #b3b3b3 !important;
}


.line-clamp-8 {
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-7 {
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-6 {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-5 {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.overflow-wrap-anywhere{
    overflow-wrap: anywhere;
}
.float-right{
    float: right;
}
.float-left{
    float: left;
}
.vertical-align-sub{
    vertical-align: sub
}
.w-20 {
    width: 20px;
}

.w-30 {
    width: 30px;
}

.w-40 {
    width: 40px;
}

.w-50 {
    width: 50px;
}

.w-70 {
    width: 70px;
}

.w-100 {
    width: 100px;
}

.w-150 {
    width: 150px;
}

.w-200 {
    width: 200px;
}

.w-250 {
    width: 250px;
}

.w-300 {
    width: 300px;
}

.w-400 {
    width: 400px;
}

.w-450 {
    width: 450px;
  }
  
.w-500 {
    width: 500px;
}

.w-550 {
    width: 550px;
}


.w-600 {
    width: 600px;
}

.w-10p {
    width: 10%;
}

.w-50p {
    width: 50%;
}

.w-60p {
    width: 60%;
}

.w-70p {
    width: 70%;
}

.min-w-50p {
    min-width: 50%;
}

.max-w-50 {
    max-width: 50px !important;
}

.max-w-100 {
    max-width: 100px !important;
}

.max-w-145 {
    max-width: 145px !important;
}

.max-w-200 {
    max-width: 200px !important;
}

.max-w-250 {
    max-width: 250px !important;
}

.max-w-300 {
    max-width: 300px !important;
}

.max-w-360 {
    max-width: 360px !important;
}

.max-w-400 {
    max-width: 400px !important;
}

.max-w-500 {
    max-width: 500px !important;
}

.max-w-600 {
    max-width: 600px !important;
}

.max-w-900 {
    max-width: 900px !important;
}

.max-h-100 {
    max-height: 100px !important;
}

.max-h-150 {
    max-height: 150px !important;
}

.max-h-200 {
    max-height: 200px !important;
}

.max-h-250 {
    max-height: 250px !important;
}

.max-h-270 {
    max-height: 270px !important;
}

.max-h-300 {
    max-height: 300px !important;
}

.max-h-350 {
    max-height: 350px !important;
}

.max-h-400 {
    max-height: 400px !important;
}

.max-h-500 {
    max-height: 500px !important;
}

.max-h-600 {
    max-height: 600px !important;
}

.h-0{
    height: 0 !important;
}

.h-75{
    height: 75px !important;
}

.h-150 {
    height: 150px !important;
}
.h-170 {
    height: 170px !important;
}
.h-200 {
    height: 200px !important;
}

.h-300 {
    height: 300px !important;
}

.h-500 {
    height: 500px !important;
}

.min-w-40 {
    min-width: 40px !important;
}

.min-w-50 {
    min-width: 50px !important;
}

.min-w-70{
    min-width: 70px !important;
}

.min-w-100 {
    min-width: 100px !important;
}

.min-w-200 {
    min-width: 200px !important;
}

.min-w-300 {
    min-width: 300px !important;
}

.min-w-360 {
    min-width: 360px !important;
}

.min-w-400 {
    min-width: 400px !important;
}

.min-w-450{
    min-width: 450px !important;
}

.min-w-500 {
    min-width: 500px !important;
}

.min-w-550 {
    min-width: 550px !important;
}

.min-w-600 {
    min-width: 600px !important;
}

.min-h-50 {
    min-height: 50px !important;
}

.min-h-100 {
    min-height: 100px !important;
}

.min-h-150 {
    min-height: 150px !important;
}

.min-h-200 {
    min-height: 200px !important;
}

.min-h-250 {
    min-height: 250px !important;
}

.min-h-270 {
    min-height: 270px !important;
}

.min-h-300 {
    min-height: 300px !important;
}

.min-h-350 {
    min-height: 350px !important;
}

.min-h-450 {
    min-height: 450px !important;
}

.min-h-500 {
    min-height: 500px !important;
}

.min-h-600 {
    min-height: 600px !important;
}

.min-h-650 {
    min-height: 650px !important;
}

.display-none {
    display: none;
}

.flex-item {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.display-flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-grow-1 {
    flex-grow: 1;
}

.flex-directions-column {
    flex-direction: column;
}

.flex-directions-row {
    flex-direction: row;
}

.gap-5{
    gap: 5px;
}

.gap-10{
    gap: 10px;
}

.gap-15{
    gap: 15px;
}

.inline-block {
    display: inline-block;
}

.inline-flex {
    display: inline-flex;
}

.align-center {
    align-items: center;
}

.align-start {
    align-items: flex-start;
}

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

.align-baseline {
    align-items: baseline;
}

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

.justify-end {
    justify-content: flex-end;
}

.justify-space-between {
    justify-content: space-between;
}

.justify-space-around {
    justify-content: space-around;
}

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

.red-border {
    border: 1px solid red !important;
}

.box-shadow-none {
    box-shadow: none;
}

.ellipsis {
    text-overflow: ellipsis;
    /* enables ellipsis */
    white-space: nowrap;
    /* keeps the text in a single line */
    overflow: hidden;
    /* keeps the element from overflowing its parent */
}

.text-overflow-ellipsis {
    text-overflow: ellipsis;
}

.white-space-nowrap {
    white-space: nowrap;
}

.overflow-hidden {
    overflow: hidden;
}

.no-border {
    border: none;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
}

.r-45 {
    -ms-transform: rotate(45deg);
    /* IE 9 */
    transform: rotate(45deg);
}

.r-222 {
    -ms-transform: rotate(222deg);
    /* IE 9 */
    transform: rotate(222deg);
}


/*
* Image
*/
.object-fit_cover {
    object-fit: cover;
}

/**
 * Form elements
 */

.form-group {
    margin-bottom: 20px;
}

.form-group.horizontal {
    display: table;
    width: 100%;
}

.form-group.horizontal>* {
    display: table-cell;
}

.form-group.horizontal>.fld-label {
    width: 33%;
}

.form-group.horizontal>.fld-label.with-colon {
    position: relative;
}

.form-group.horizontal>.fld-label.with-colon:after {
    content: ':';
    position: absolute;
    right: 5px;
}

.fld-label {
    font-weight: 500;
    margin-bottom: 5px;
    display: block;
    font-size: 15px;
    color: var(--color-text);
}

.form-control {
    display: block;
    width: 100%;
    height: 40px;
    padding: 8px 10px 10px;
    font-size: 15px;
    color: #555555;
    outline: 0;
    border-radius: 3px;
    background-color: #fff;
    border: 1px solid #939393;
    -webkit-transition: border-color ease-in-out 0.15s;
    -moz-transition: border-color ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s;
}

.dark-mode .form-control {
    color: #fdfdfd;
    background-color: var(--dark-secondary-color);
}

textarea.form-control {
    min-height: 110px;
    max-width: 100%;
    max-height: 200px;
    min-width: 100%;
    line-height: 1;
}

textarea.form-control.no-resize {
    resize: none;
}

.form-control:focus {
    border-color: var(--dark-primary-color);
    background-color: #fff;
    outline: 0 !important;

}

.dark-mode .form-control:focus {
    border-color: var(--dark-primary-color);
    border: 1px solid #939393;
    background-color:  var(--dark-secondary-color);
}

.form-control:disabled {
    background-color: #606060;
}

.form-control::-webkit-input-placeholder {
    color: #c8c8c8;
    /* Chrome/Opera/Safari */
    font-weight: 300;
}

.form-control::-moz-placeholder {
    color: #c8c8c8;
    /* Firefox 19+ */
    font-weight: 300;
}

.form-control:-ms-input-placeholder {
    color: #c8c8c8;
    /* IE 10+ */
    font-weight: 300;
}

.form-control:-moz-placeholder {
    color: #c8c8c8;
    /* Firefox 18- */
    font-weight: 300;
}

.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset;
}

.dark-mode .form-control:-webkit-autofill,
.dark-mode .form-control:-webkit-autofill:hover,
.dark-mode .form-control:-webkit-autofill:focus,
.dark-mode .form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px rgb(77, 77, 77) inset;
    -webkit-text-fill-color: #ffffff;
}

.form-control.has-error {
    border-color: var(--error-color);
}

.icon-control {
    position: relative;
}

.icon-control .ic-icon {
    position: absolute;
    top: 1px;
    right: 1px;
    display: inline-block;
    width: 38px;
    height: 38px;
    line-height: 41px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    -webkit-transition: color ease-in-out 0.15s;
    -moz-transition: color ease-in-out 0.15s;
    transition: color ease-in-out 0.15s;
}

.icon-control .ic-icon:hover {
    color: var(--dark-secondary-color);
}

.dark-mode .icon-control input{
    background-color:var(--dark-secondary-color)
}

.dark-mode .icon-control .ic-icon:hover {
    color: var(--dark-Senary-color);
}

.radio,
.checkbox {
    position: relative;
    display: block;
    margin-top: 10px;
}

.radio input[type="radio"],
.checkbox input[type="checkbox"] {
    position: absolute;
    margin-left: -20px;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 4px 0 0;
    line-height: normal;
    cursor: pointer;
    box-sizing: border-box;
}

.radio label,
.checkbox label {
    display: inline-block;
    min-height: 20px;
    cursor: pointer;
    position: relative;
    padding-left: 25px !important;
    margin-right: 15px;
    margin-bottom: 6px;
    font-size: 15px;
    line-height: 20px;
}

.radio label:before,
.checkbox label:before {
    content: "";
    display: inline-block;
    width: 17px;
    height: 17px;
    margin-right: 10px;
    position: absolute;
    left: 0;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.07);
}

.radio label:before {
    bottom: 2.5px;
    border-radius: 99px;
    border-color: #c2c2c2;
    -webkit-transition: border 0.3s 0s cubic-bezier(0.455, 0.03, 0.215, 1.33);
    transition: border 0.3s 0s cubic-bezier(0.455, 0.03, 0.215, 1.33);
}

.checkbox label:before {
    top: -0.6px;
    border-radius: 3px;
    border-color: #c2c2c2;
    -webkit-transition: border 0.2s linear 0s, color 0.2s linear 0s;
    transition: border 0.2s linear 0s, color 0.2s linear 0s;
}

.radio input[type=radio]:checked+label:before {
    border-width: 5px;
    border-color: var(--light-primary-color);
}

.checkbox input[type=checkbox]:checked+label:before {
    border-width: 8.5px;
    border-color: var(--light-primary-color);
}

.checkbox label {
    -webkit-transition: border 0.2s linear 0s, color 0.2s linear 0s;
    transition: border 0.2s linear 0s, color 0.2s linear 0s;
}

.checkbox label:after {
    display: inline-block;
    width: 16px;
    height: 16px;
    position: absolute;
    left: 3px;
    top: -2px;
    font-size: 11px;
    -webkit-transition: border 0.2s linear 0s, color 0.2s linear 0s;
    transition: border 0.2s linear 0s, color 0.2s linear 0s;
    border-radius: 3px;
}

.checkbox input[type=checkbox]:checked+label:after {
    font-family: 'Font Awesome 5 Pro';
    content: "\f00c";
    color: #fff;
    font-weight: 700;
}

.radio input[type="radio"]:disabled+label,
.checkbox input[type="checkbox"]:disabled+label {
    cursor: not-allowed;
}

.button {
    font-family: inherit;
    font-size: 15px;
    font-weight: normal;
    display: inline-block;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    margin-bottom: 0;
    height: 40px;
    border: 1px solid var(--quaternary-color);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    color: var(--primary-color);
    border-radius: 3px;
    outline: 0;
    white-space: nowrap;
    background-color: var(--quaternary-color);
    text-shadow: none;
    box-shadow: none;
    line-height: 0;
    padding: 9px 20px 8px;
    position: relative;
    -webkit-transition: all ease-in-out 0.15s;
    -moz-transition: all ease-in-out 0.15s;
    transition: all ease-in-out 0.15s;
}

.dark-mode .button.login {
    background-color: var(--dark-primary-color);
    border: 1px solid #939393 !important;
}

.dark-mode .button {
    background-color: var(--dark-primary-color);
    border: 1px solid #939393 !important;
}

.light-mode .button.login {
    background-color: var(--light-quaternary-color);
    border: 1px solid #939393 !important;
    color: black;
}

.light-mode .button {
    background-color: var(--light-primary-color);
    border: 1px solid #939393 !important;
    color: white;
}

/*
VS Button Style
 */
.button.button-blue {
     border:1px solid #025281 !important;
     color: #fff;
     background-color: #025281 !important;
 }
.button.button-blue:hover {
    background-color: #0079c0 !important;
}
.button.button-white-blue {
    border:1px solid transparent !important;
    color: #0079c0;
    background-color: #fff !important;
}
.button.button-white-blue:hover {
    background-color: #0079c0 !important;
}
.button.button-flat-transparent {
    background-color: transparent !important;
    border-color: transparent !important;
    color: #757575;
}
.button.button-flat-transparent.red-text {
    color: rgb(207 4 4);
}
.button.button-flat-transparent:hover {
    background-color: transparent !important;
    color: inherit;
}
.button.button-flat-transparent:hover.red-text {
    color: rgb(105, 9, 9);
}
.button-negative {
    background-color: #c8c8c8;
    border-color: #c8c8c8;
}

.button-transparent {
    background-color: transparent;
    border-color: #ffffff;
    color: #757575;
}

.button-flat-light {
    background-color: #0079C0;
    border-color: #0079C0;
    border-radius: 0;
}

.button-flat-transparent {
    background-color: transparent;
    border-color: transparent;
    color: #757575;
}

.button-flat-transparent.red-text {
    color: rgb(207 4 4);
}

.button.action-btn {
    padding: 3px 11px 22px 11px !important;
    height: 20px !important;
    text-align: center !important;
}

.button.action-btn:hover {
    background-color: #efefef !important;
}

.button:hover {
    background-color: var(--primary-color) !important;
    color: var(--quaternary-color);
    border-color: var(--primary-color);
}
.dark-mode .button:hover {
    background-color: var(--dark-quinary-color) !important;
    color: var(--dark-quaternary-color);
    border: 1px solid #939393 !important;
}

.light-mode .button:hover {
    background-color: var(--light-secondary-color) !important;
    color: var(--light-quaternary-color);
    border: 1px solid #939393 !important;
}

.button:active {
    -webkit-transform: translateY(2px);
    -moz-transform: translateY(2px);
    transform: translateY(2px);
}

.button-transparent:hover {
    background-color: #ededed;
    color: white;
}

.button-flat-transparent:hover {
    background-color: transparent !important;
    color: inherit;
}

.button-flat-transparent:hover.red-text {
    color: rgb(105, 9, 9);
}

.button:disabled {
    opacity: 0.5;
    pointer-events: none;
}

.button.doing-ajax {
    pointer-events: none;
    border: 1px solid var(--dark-primary-color);
}

.dark-mode .button.doing-ajax ,
.light-mode .button.doing-ajax {
    pointer-events: none;
    border: 1px solid var(--dark-primary-color);
}

.button-minwidth {
    min-width: 100px;
}

.mini-button {
    min-width: 23px;
    max-width: 23px;
    font-size: 12px !important;
    letter-spacing: 0 !important;
    height: 15px !important;
    line-height: 1 !important;
    padding: 5px 1px 15px !important;
}

.mini-button i {
    background-color: transparent !important;
}

.button .ajax-ellipsis-wrap {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--dark-primary-color);
    border:  var(--dark-primary-color);
}

.ajax-ellipsis {
    display: inline-block;
    position: absolute;
    width: 54px;
    height: 9px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ajax-ellipsis div {
    position: absolute;
    top: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.ajax-ellipsis div:nth-child(1) {
    left: 5px;
    animation: ajax-ellipsis1 0.6s infinite;
}

.ajax-ellipsis div:nth-child(2) {
    left: 5px;
    animation: ajax-ellipsis2 0.6s infinite;
}

.ajax-ellipsis div:nth-child(3) {
    left: 23px;
    animation: ajax-ellipsis2 0.6s infinite;
}

.ajax-ellipsis div:nth-child(4) {
    left: 41px;
    animation: ajax-ellipsis3 0.6s infinite;
}

.button.doing-ajax .ajax-ellipsis-wrap {
    display: block;
}

.dark-mode .button.doing-ajax .ajax-ellipsis-wrap,
.light-mode .button.doing-ajax .ajax-ellipsis-wrap {
    display: block;
}

@keyframes ajax-ellipsis1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes ajax-ellipsis3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes ajax-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(18px, 0);
    }
}

/**
Data loader
**/
.data-loader {
    display: inline-block;
    height: 9px;
    width: 54px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    
}

.data-loader div {
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
    background: var(--dark-secondary-color);
    border-radius: 50%;
    height: 8px;
    position: absolute;
    top: 0;
    width: 8px;
}

.data-loader div:nth-child(1) {
    animation: data-loader1 0.6s infinite;
    left: 5px;
}

.data-loader div:nth-child(2) {
    animation: data-loader2 0.6s infinite;
    left: 5px;
}

.data-loader div:nth-child(3) {
    animation: data-loader2 0.6s infinite;
    left: 23px;
}

.data-loader div:nth-child(4) {
    animation: data-loader3 0.6s infinite;
    left: 41px;
}

.data-loader-wrap {
    border-radius: 5px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgb(255, 255, 255);

}

@keyframes data-loader1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes data-loader3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes data-loader2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(18px, 0);
    }
}

/* Select wrapper */
.select-wrapper {
    position: relative;
}

.select-wrapper select {
    min-width: 100px;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.select-wrapper:after,
.search-selection:after {
    position: absolute;
    content: '\f107';
    font-family: 'Font Awesome 5 Pro';
    font-size: 18px;
    font-weight: 400;
    z-index: 1;
    top: 2px;
    right: 2px;
    bottom: 2px;
    color: #999999;
    width: 30px;
    text-align: center;
    padding: 6px 2px;
    pointer-events: none;
    background-color: #fff;
}

.dark-mode .select-wrapper:after,
.dark-mode .search-selection:after {
    position: absolute;
    content: '\f107';
    font-family: 'Font Awesome 5 Pro';
    font-size: 18px;
    font-weight: 400;
    z-index: 1;
    top: 2px;
    right: 2px;
    bottom: 2px;
    color: #999999;
    width: 30px;
    text-align: center;
    padding: 6px 2px;
    pointer-events: none;
    background-color: var(--secondary-color);
}
.dark-mode .select-wrapper::before,
.dark-mode .search-selection:before {
    position: absolute;
    content: '\f107';
    font-family: 'Font Awesome 5 Pro';
    font-size: 18px;
    font-weight: 400;
    z-index: 1;
    top: 2px;
    right: 2px;
    bottom: 2px;
    color: #999999;
    width: 30px;
    text-align: center;
    padding: 6px 2px;
    pointer-events: none;
    background-color:  var(--secondary-color);
}

/*.select-wrapper select:invalid {
    color: #c2c3c5;
}*/
.select-wrapper.with-icon:after {
    width: 25px;
    top: 0;
    bottom: 0;
    border-left: 1px solid #c8c8c8;
    background-color: transparent;
}

.select-wrapper.with-icon select {
    padding-right: 40px;
}

/*.select-wrapper select option,
.select-wrapper select optgroup {
    color: initial;
}*/
.select-wrapper option[value='?'],
.select-wrapper option[value='? undefined:undefined ?'] {
    display: none;
}

/**
 * Media Library
 */
.ml-popup {
    top: 500px !important;
}

/**
 * UI Components
 */
.ajax-notice {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 999;
    background-color: var(--secondary-color);
    border-radius: 3px;
    text-align: left;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.10);
    padding: 15px 15px 13px;
    width: 300px;
    max-width: 320px;
    border-left: 5px solid transparent;
    cursor: default;
    color: var(--color-text);
}

.dark-mode .ajax-notice {
    background-color: var(--dark-secondary-color);
    color: var(--dark-color-text);
}


.light-mode .ajax-notice {
    background-color: var(--light-primary-color);
    color: var(--light-quaternary-color);
}

.ajax-notice .an-message {
    padding-right: 30px;
    font-size: 14px;
}

.ajax-notice .an-dismisser {
    position: absolute;
    top: 11px;
    right: 9px;
    width: 22px;
    height: 22px;
    line-height: 26px;
    text-align: center;
    cursor: pointer;
    background-color: var(--tertiary-color);
    border-radius: 100%;
    font-size: 16px;
    font-weight: 600;
}

.ajax-notice .an-dismisser:hover {
    background-color: #c9c5c5;
}

.ajax-notice.success {
    border-left-color: var(--success-color);
}

.ajax-notice.error {
    border-left-color: var(--error-color);
}

.ajax-notice.warning {
    border-left-color: var(--warning-color);
}

/* Dropdown */
.dropdown {
    position: relative;
}

.dropdown-toggle {
    cursor: pointer;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 180px;
    padding: 5px 0;
    margin: 0;
    list-style: none;
    text-align: left;
    background-color: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    background-clip: padding-box;
}

.dropdown-menu.right {
    left: auto;
    right: 0;
}
.dark-mode .dropdown-menu{
    background-color: #5d5d5d;
}

.dropdown-menu.table-action-left {
    left: 50px !important;
}

.dropdown .dropdown-menu.notification {
    cursor: auto;
    min-width: 410px;
    left: -340px;
    top: 71px;
    bottom: auto;
    padding: 0;
    padding-bottom: 5px;
}

.dropdown-menu.megaSearch {
    cursor: auto;
    min-width: 410px;
    left: -2x;
    top: 51px;
    bottom: auto;
    padding: 0;
    padding-bottom: 5px;
}

.dropdown-menu.bottom-left {
    left: 80px;
    top: auto;
    bottom: 0;
}

.dropdown.open .dropdown-menu {
    display: block;
}

.dropdown-menu>li {
    display: block;
    position: relative;
}

.dropdown-menu>li>a {
    display: block;
    padding: 13px 20px;
    text-align: left;
    white-space: nowrap;
    line-height: 1;
    color: inherit;
    position: relative;
}

.dropdown-menu>li>a>i {
    width: 16px;
    margin-right: 3px;
}

.dropdown-menu>li>a:hover {
    color: #fff;
    background-color: var(--secondary-color);
}

.dropdown-menu>li>a:hover .notification-icon {
    color: #fff;

}

.dark-mode .dropdown-menu>li>a:hover {
    color: #fff;
    background-color: var(--dark-quinary-color);
}

.dark-mode .dropdown-menu>li>a:hover .notification-icon {
    color: #fff;

}

.light-mode .dropdown-menu>li>a:hover {
    color: var(--light-quaternary-color);
    background-color: var(--light-secondary-color);
}

.light-mode .dropdown-menu>li>a:hover .notification-icon {
    color: var(--light-quaternary-color);
}

.dropdown-menu.light>li>a:hover {
    color: var(--secondary-color);
    background-color: rgba(0, 121, 192, 0.15);
}


.dropdown-menu>li>a.doing-ajax {
    pointer-events: none;
}

.dropdown-menu>li>a.doing-ajax .ajax-ellipsis-wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--dark-quinary-color);
}

.dropdown-menu.rounded{
    border-radius: 5px;
}


/* Dropdown search */
.search-selection {
    position: relative;
}

.search-selection .output {
    cursor: default;
    padding-right: 30px;
}

.search-selection .search-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 99;
    padding: 5px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.175);
    background-clip: padding-box;
    min-width: 160px;
    margin-bottom: 35px;
}

.search-selection.open .search-dropdown {
    display: block;
}

.search-selection .search-filter {
    padding-left: 6px;
    padding-right: 6px;
    height: 30px;
    font-size: 13px;
}

.search-selection .result-list {
    padding: 0;
    margin: 5px 0 0;
    list-style-type: none;
    max-height: 210px;
}

.search-selection .result-list li label {
    padding: 5px 10px;
    cursor: pointer;
    background-color: #fff;
    font-size: 13px;
    color: inherit;
    display: block;
    width: 100%;
    margin-bottom: 0;
    font-weight: normal;
    position: relative;
    border-bottom: 1px solid #f3f3f3;
    text-align: left;
}

.search-selection .result-list li label .rl-item-additional {
    display: block;
    font-size: 12px;
    color: #b3b3b3;
    margin-top: 2px;
}

.search-selection .result-list li:last-child label {
    border-bottom: none;
}

.search-selection .result-list li label input[type="radio"] {
    visibility: hidden;
    position: absolute;
}

.search-selection .result-list li label:hover,
.search-selection .result-list li label:focus,
.search-selection .result-list li.active label {
    background-color: #e5e5e5;
}

.flip-horizontal {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

/**
 * UI Transitions
 */
.fade-up-enter-active,
.fade-up-leave-active {
    transition: all 0.2s ease-out;
}

.fade-up-enter-from,
.fade-up-leave-to {
    transform: translateY(100px);
    opacity: 0;
}

/**
 * Layout
 */
.scroll-container {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.scroll-container::-webkit-scrollbar-track {
    background-color: transparent;
}

.scroll-container::-webkit-scrollbar {
    width: 5px;
}

.scroll-container::-webkit-scrollbar-thumb {
    background-color: #c0bdbd;
    border-radius: 10px;
}

@media screen and (min-width: 768px) {
    .row.mini-gap {
        margin-left: -7.5px;
        margin-right: -7.5px;
    }

    .row.mini-gap [class*="col-"] {
        padding-left: 7.5px;
        padding-right: 7.5px;
    }
} /************************
 *    XP LINK STYLES    *
 ************************/

/*********************************
 *    XP FileUploader STYLES     *
 *********************************/


.xp-file-uploader.inputfile{
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.xp-file-uploader.inputfile + label{
    max-width: 80%;
    font-size: 17px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 0.625rem 1.25rem;
}

.xp-file-uploader.style-1.inputfile + label {
    color: white;
    background-color: var(--dcui-primary-color);
}

.xp-file-uploader.style-2.inputfile + label {
    border: 1px solid var(--dcui-primary-color);
    background-color: #f1e5e6;
    padding: 0;

}

.xp-file-uploader.style-2.inputfile + label span {
    width: 200px;
    min-height: 2em;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: top;
    color: var(--dcui-primary-color);
}

.xp-file-uploader.style-2.inputfile + label strong {
    height: 100%;
    color: #f1e5e6;
    background-color: var(--dcui-primary-color);
    display: inline-block;
}

.xp-file-uploader.style-2.inputfile + label span, .xp-file-uploader.style-2.inputfile + label strong {
    padding: 0.625rem 1.25rem;
}

.xp-file-uploader.style-1.inputfile:focus + label,
.xp-file-uploader.style-1.inputfile + label:hover {
    background-color: var(--dcui-secondary-color);
}

.xp-file-uploader.style-1.inputfile + label {
    cursor: pointer; /* "hand" cursor */
}

.xp-file-uploader.style-1.inputfile:focus + label {
    outline: 1px dotted var(--dcui-primary-color);
    outline: -webkit-focus-ring-color auto 5px;
}

.xp-file-uploader.style-2.inputfile:focus + label, .xp-file-uploader.style-2.inputfile.has-focus + label, .xp-file-uploader.style-2.inputfile + label:hover {
    border-color: var(--dcui-primary-color);
}

.xp-file-uploader.inputfile + label svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -0.25em;
    margin-right: 0.25em;
}

.xp-file-uploader.inputfile + label.doing-ajax {
    pointer-events: none;
}

.xp-file-uploader.inputfile + label.doing-ajax .ajax-ellipsis-wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--dcui-primary-color);
}


.dcui-file-uploader-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.dcui-file-uploader-container.mini {
    flex: none;
    margin: 5px;
}

.dcui-file-uploader-mini-load-container {
    width: 66px;
    height: 66px;
    position: absolute;
}

.dcui-file-uploader-container.mini .mini-container {
    flex-grow: 1;
    border: 1px solid #d1d1d1;
    border-radius: 7px;
    margin: 5px;
}

.dcui-file-uploader-container .center-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dcui-file-uploader-container .text-container {
    color: #5f6368;
    margin-top: 5px;
}

.dcui-file-uploader-container .text-browse {
    color: var(--dcui-primary-color);
}

.dcui-file-uploader-container.disable, .dcui-file-uploader-container.mini.disable .text-browse {
    color: #a6a8a9;
}

.dcui-file-uploader-container .upload-icon {
    font-size: 25px;
    color: #cfd1d2;
}

.dcui-file-uploader-container .hidden-input {
    opacity: 0;
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
}

.dcui-file-uploader-container .file-label {
    display: block;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.dcui-file-uploader-container.disable .file-label {
    cursor: inherit;
}

.dcui-file-uploader-container .preview-card {
    display: flex;
    position: relative;
}

.dcui-file-uploader-container .preview-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
}

.dcui-file-uploader-container .add-media-container{
    width: 112px;
    height: 109px;
    display: flex;
    align-items: center;
}

.dcui-file-uploader-container .hidden-input {
    opacity: 0;
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
}

.dcui-file-uploader-container .file-label {
    display: block;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.dcui-file-uploader-container .add-media-content {
    flex: 1;
    min-height: 105px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.dcui-file-uploader-container .upload-icon {
    font-size: 25px;
    color: #cfd1d2;
}

.dcui-file-uploader-container .text-container {
    color: #5f6368;
    margin-top: 5px;
}

.dcui-file-uploader-container .preview-container .image-container {
    border: 1px solid #a2a2a2;
    border-radius: 5px;
}

.dcui-file-uploader-container .preview-img {
    object-fit: cover;
    object-position: top;
    width: 106px;
    height: 92px;
    border-bottom: 1px solid #a2a2a2;
    background-color: #a2a2a2;
}

.dcui-file-uploader-container .preview-container .file-name-text {
    text-align: center;
}

.preview-container .preview-card .file-remove-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    display: none;
}

.dcui-button.dcui-file-uploader-remove-btn {
    width: 15px;
    height: 15px;
    padding: 5px;
    border-radius: 50px;
}

.dcui-file-uploader-remove-icon-container{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 3px;
}


/**********************
 *   DC Components    *
 **********************/

.dcui-load-more-container__container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/***********************************
 *   DC Font Awesome Icon Picker   *
 ***********************************/

.dcui-font-awesome-icon-picker__container {
    width: 100%;
    height: 100%;
    min-height: 450px;
    padding-top: 10px;
}

.dcui-font-awesome-icon-picker__container__search-container{
    margin-bottom: 25px;
}

.dcui-font-awesome-icon-picker__container__search-container__input{
    background-color: transparent;
    color: #0F0F0F;
}

.dcui-font-awesome-icon-picker__container__search-container__input.dark{
    color: white;
}

.dcui-font-awesome-icon-picker__container__search-container__input.dark.dcui-form-control:focus{
    background-color: transparent;
}

.dcui-font-awesome-icon-picker__container__search-container .dcui-font-awesome-icon-picker__container__search-container__input--icon{
    background-color: transparent;
}

.dcui-font-awesome-icon-picker__container_icon-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-height: 370px;
    margin-top: 15px;
    justify-content: flex-start;
}

.dcui-font-awesome-icon-picker__container_icon-container__wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: space-evenly;
}

.dcui-font-awesome-icon-picker__container_icon-container__icon-btn {
    width: 80px;
    height: 79px;
    font-family: inherit;
    font-size: 18px;
    font-weight: normal;
    display: inline-block;
    letter-spacing: 0.01em;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid var(--dcui-primary-color);
    border-radius: var(--dcui-field-radius);
    outline: 0;
    white-space: nowrap;
    color: var(--dcui-primary-color);
    background-color: transparent;
    text-shadow: none;
    box-shadow: none;
    line-height: calc(var(--dcui-field-height) - 20px);
    padding: 9px 10px;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-transition: all ease-in-out 0.15s;
    -moz-transition: all ease-in-out 0.15s;
    transition: all ease-in-out 0.15s;
}

.dcui-font-awesome-picker-popup{
    min-height: 400px;
    width: 890px;
    min-width: 890px;
}

ul.dc-breadcrumbs-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

ul.dc-breadcrumbs-list li.dc-breadcrumb-item {
    display: inline;
}

ul.dc-breadcrumbs-list li.dc-breadcrumb-item .dc-breadcrumb-icon {
    padding: 8px;
    color: #5b5e63;
}

.dcui-icon-btn-img{
    width: 21px;
    height: auto;
    max-height: 18px;
    display: block;
    margin: 0 auto;
}

.dcui-icon-btn-img-container{
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    text-align: center;
    justify-content: center;
}

.dcui-blue-container{
    padding: 15px;
    background-color: #d6ecf8;
}

.dcui-info-panel-main-container{
    height: 100%;
}

.dcui-info-panel-main-container__middle-container{
    min-height: 750px;
    display: flex;
}

.dcui-info-panel-main-container__middle-container__left{
    width: 60%;
    height: calc(100vh - 266px);
    position: relative;
}

.dcui-info-panel-main-container__middle-container__left::after{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 1px;
    background-color: #f4f4f4;
}

.dcui-info-panel-main-container__middle-container__right{
    width: 40%;
    margin-left: 25px;
}

.dcui-info-panel-main-container__middle-container__right-container{
    height: calc(100vh - 281px);
    background-color: #fafafa;
    padding: 15px;
    border-radius: 5px;
}

.docld-native-date-picker{
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    font-size: var(--dcui-regular-font-size);
    color: var(--dcui-body-color);
    border: 0;
    background: transparent;
    display: inline-block !important;
    visibility: visible !important;
    padding: 8px 10px;
    border-radius: 4px;
}

.docld-native-date-picker::-webkit-calendar-picker-indicator {
    filter: invert(40%) sepia(10%) saturate(250%) hue-rotate(173deg) brightness(91%) contrast(87%);
}

.docld-native-date-picker:hover{
    background-color: #eeeeee;
    cursor: pointer;
}

.docld-native-date-picker:focus,
.docld-native-date-picker:focus-visible {
    outline: 0 !important;
    box-shadow: none;
}

/***********************/
/**   Bar loader  **/
/***********************/

.docld-loading-bar-container {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
}

.docld-loading-bar {
    background-color: #3498db;
}

.docld-loading-bar-container .docld-loading-bar.hidden {
    display: none;
}

.docld-required-text{
    color: #c10808;
    padding-left: 5px;
}

/***********************/
/**   Icon Button     **/
/***********************/

.dcui-icon-actions .docld-icon-button-loading-container.docld-spinner-loader-container{
    width: 35px !important;
}

.dcui-icon-actions .docld-icon-button-loading-container.docld-spinner-loader-container .docld-spinner-loader {
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(farthest-side, var(--dcui-primary-color) 94%, #0000) top/8px 8px no-repeat,
    conic-gradient(#0000 30%, var(--dcui-primary-color));
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 0);
    animation: l13 1s infinite linear;
}

/***********************/
/**   Spinner loader  **/
/***********************/

.docld-spinner-loader-container {
    background-color: white;
    position: absolute;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.docld-spinner-loader {
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(farthest-side, var(--dcui-primary-color) 94%, #0000) top/8px 8px no-repeat,
    conic-gradient(#0000 30%, var(--dcui-primary-color));
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
    animation: l13 1s infinite linear;
}

@keyframes l13 {
    100% {
        transform: rotate(1turn)
    }
}


/*****************************/
/**  Auto complete field   **/
/****************************/
.autocomplete-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

.autocomplete-input-wrapper {
    position: relative;
}

.autocomplete-input-wrapper > ::v-deep(.autocomplete-label) {
    display: block;
    font-size: var(--dcui-regular-font-size);
    color: var(--dcui-body-color);
    margin-bottom: 5px;
}

.autocomplete-input {

}

.autocomplete-input.focused{
    background-color: #eeeeee;
}

.autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    background-color: #fff;
    border: 1px solid var(--dcui-line-color);
    border-radius: var(--dcui-field-radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    max-height: 200px;
    overflow-y: auto;
    z-index: 999;
}


.autocomplete-dropdown ul {
    list-style: none;
    padding: 0;
    margin: 5px 0;
}

.autocomplete-dropdown li {
    cursor: pointer;
    display: block;
    padding: 10px 15px 9px;
    text-align: left;
    color: inherit;
    position: relative;
}

.autocomplete-dropdown li.selected {
    background-color: #eee;
}

.autocomplete-dropdown li:hover {
    background-color: #f0f0f0;
}

.dcui-select-dropdown-close{
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translate(-50%, -50%);
}


/****************************
 *   Dcui Styles Calendar   *
 ****************************/

:root {
    --dcui-calendar-picker-color: #fff;
    --dcui-calendar-input-bg-color: #fff;
    --dcui-calendar-input-bg-disable-color: rgb(245, 245, 245);
    --dcui-calendar-input-text-disable-color: #b8b8b9;
    --dcui-calendar-select-bg-color: #fff;
    --dcui-calendar-border-color: #eaeaeb;
    --dcui-calendar-triangle-color: #eaeaeb;
    --dcui-calendar-shadow: 5px 34px 80px 0px rgba(0, 0, 0, 0.15);
    --dcui-calendar-top-shadow: 5px 34px 80px 0px rgba(0, 0, 0, 0.15);
    --dcui-calendar-text-color: #000000;
    --dcui-calendar-action-color: #7b8187;
    --dcui-calendar-text-disabled-color: #b3b3b3;
    --dcui-calendar-view-button-color: #000000;
    --dcui-calendar-view-button-font-weight: 600;
    --dcui-calendar-view-button-font-size: 1rem;
    --dcui-calendar-datepicker-icon-color: #b2b3b3;
    --dcui-calendar-datepicker-icon-size: 1.1rem;
    --dcui-calendar-active-bg-color: transparent;
    --dcui-calendar-active-text-color: #657ff5;
    --dcui-calendar-active-hover-color:#657ff5;
    --dcui-calendar-active-hover-text-color:#edfff9;
    --dcui-calendar-range-bg-color: #edfff9;
    --dcui-calendar-range-text-color: #7b8187;
    --dcui-calendar-range-radius: 100%;
    --dcui-calendar-day-hover-bg-color: #eaeaeb;
    --dcui-calendar-day-width: 25px;
    --dcui-calendar-day-height: 25px;
    --dcui-calendar-day-font-size: 0.9rem;
    --dcui-calendar-day-font-weight: 650;
    --dcui-calendar-day-name-font-size: 0.9rem;
    --dcui-calendar-day-name-font-weight: 900;
    --dcui-calendar-day-name-color: #b3b3b3;
    --dcui-calendar-input-border: 1px solid #eaeaeb;
    --dcui-calendar-input-text-color: #7b8187;
    --dcui-calendar-input-font-size: 0.9rem;
    --dcui-calendar-input-font-weight: 400;
    --dcui-calendar-content-radius: 20px;
    --dcui-calendar-year-font-size: 1rem;
    --dcui-calendar-year-color: #000000;
    --dcui-calendar-year-font-weight: 450;
    --dcui-calendar-year-disabled-color: #b8b8b9;
    --dcui-calendar-year-disabled-bg-color: transparent;
    --dcui-calendar-year-padding: 10px;
    --dcui-calendar-year-border: none;
    --dcui-calendar-year-border-radius: none;
    --dcui-calendar-month-font-size: 1.1rem;
    --dcui-calendar-month-color: #000000;
    --dcui-calendar-month-font-weight: 450;
    --dcui-calendar-month-disabled-color: #b8b8b9;
    --dcui-calendar-month-disabled-bg-color: transparent;
    --dcui-calendar-month-padding: 8px;
    --dcui-calendar-month-border: none;
    --dcui-calendar-month-border-radius: none;
    --dcui-calendar-year-hover-bg-color:#eaeaeb;
    --dcui-calendar-month-hover-bg-color:#eaeaeb;
}

.dcui-calendar *:focus {
    outline: none;
}

.dcui-calendar * {
    outline: none;
}

.dcui-calendar {
    position: relative;
    width: 100% !important;
    min-width: max-content;
}

.dcui-calendar .content {
    display: flex;
    background: var(--dcui-calendar-picker-color);
    box-shadow: var(--dcui-calendar-shadow);
    position: absolute;
    top: 45px;
    z-index: 99999;
}

.dcui-calendar .input-field {
    display: flex;
    position: relative;
    min-width: 140px;
    font-weight: var(--dcui-calendar-input-font-weight);
}

.dcui-calendar .input-field .clearButton {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    color: var(--dcui-calendar-text-color);
    padding: 0;
    cursor: pointer;
    border: none;
    background: transparent;
    display: flex;
}

.dcui-calendar .input-field .clearButton i {
    fill: currentColor;
}

.dcui-calendar .input-field .clearButton,
.dcui-calendar .input-field .clearButton i {
    font-size: 16px;
}

.dcui-calendar .input-field input:disabled ~ i {
    fill: var(--dcui-calendar-text-color);
}

.dcui-calendar .input-field.long {
    min-width: 290px;
}

.dcui-calendar .input-field input {
    padding-left: 35px;
    padding-right: 20px;
    font-size: var(--dcui-calendar-input-font-size);
    min-width: inherit;
    height: 40px;
    border-radius: 6px;
    border: var(--dcui-calendar-input-border);
    background-color: var(--dcui-calendar-input-bg-color);
    color: var(--dcui-calendar-input-text-color);
    font-weight: inherit;
    cursor: pointer;
    width: 100%;
}

.dcui-calendar .input-field:hover input{
    background-color: #eeeeee;
}


.dcui-calendar .input-field input:disabled {
    background-color: var(--dcui-calendar-input-bg-disable-color);
    color: var(--dcui-calendar-input-text-disable-color);
    cursor: not-allowed;
}

.dcui-calendar .input-field i {
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
}

.dcui-calendar .input-field i.datepicker {
    left: 10px;
    width: var(--dcui-calendar-datepicker-icon-size);
    height: var(--dcui-calendar-datepicker-icon-size);
    text-align: center;
    cursor: pointer;
}

.dcui-calendar .calendar {
    width: 270px;
    min-height: 240px;
}

.dcui-calendar .calendar.range:first-child {
    border-right: 1px solid var(--dcui-calendar-border-color);
}

.dcui-calendar .calendar:first-child::before {
    content: "";
    position: absolute;
    bottom: 100%;
    top: -20px;
}

.dcui-calendar .calendar .selected-field {
    padding-top: 15px;
    background-color: var(--dcui-calendar-select-bg-color);
    border-radius: 20px;
}

.dcui-calendar .calendar .selected-field .selected-date {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    padding-bottom: 7px;
    border-bottom: 1px solid rgb(228 228 229);
}

.dcui-calendar .calendar .selected-field .viewButton {
    border: 0;
    width: 100%;
    padding: 10px;
    color: var(--dcui-calendar-view-button-color);
    font-size: var(--dcui-calendar-view-button-font-size);
    font-weight: var(--dcui-calendar-view-button-font-weight);
    margin-right: 10px;
    margin-left: 10px;
    background: transparent;
    cursor: pointer;
    border-radius: 8px;
}

.dcui-calendar .calendar .selected-field .viewButton:hover {
    background: #ededed;
}

.dcui-calendar .calendar .selected-field .prevDateButton,
.dcui-calendar .calendar .selected-field .nextDateButton {
    position: relative;
    border: 0;
    background: transparent;
}

.dcui-calendar .calendar .selected-field .prevDateButton::after,
.dcui-calendar .calendar .selected-field .nextDateButton::after {
    display: inline-block;
    cursor: pointer;
    padding: 5px;
    width: 28px;
    border-radius: 10px;
    border: 2px solid #e9e9e9;
    font-family: "Font Awesome 5 Pro";
    text-align: center;
    color: #b3b3b3;
}

.dcui-calendar .calendar .selected-field .prevDateButton::after {
    content: "\f053";
}

.dcui-calendar .calendar .selected-field .nextDateButton::after {
    content: "\f054";
}

.dcui-calendar .calendar .selected-field .prevDateButton:hover::after,
.dcui-calendar .calendar .selected-field .nextDateButton:hover::after {
    border: 2px solid #cdcdcd;
    color:  #adacac;
}

.dcui-calendar .calendar .days {
    display: grid;
    grid-template-columns: repeat(7, minmax(max-content, 1fr));
    gap: 5px;
    padding-bottom: 7px;
}

.dcui-calendar .calendar .years,
.dcui-calendar .calendar .months {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    max-width: calc((var(--dcui-calendar-day-width) * 7) + 20px);
}

.dcui-calendar .calendar .years {
    min-height: 180px;
    display: flex;
    flex-wrap: wrap;
    max-width: calc((var(--dcui-calendar-day-width)* 7) + 70px);
    gap: 15px;
    justify-content: center;
    align-content: flex-start;
    align-items: center;
    padding-bottom: 10px;
}

.dcui-calendar .calendar .months {
    min-height: 170px;
    max-width: calc((var(--dcui-calendar-day-width)* 7) + 70px);
    padding-bottom: 10px;
    display: flex;
    justify-content: space-around;
}

.dcui-calendar .calendar .selected-field,
.dcui-calendar .calendar .days-selection {
    padding-left: 15px;
    padding-right: 15px;
}

.dcui-calendar .calendar .days-selection .days {
    padding-bottom: 15px;
}

.dcui-calendar .calendar .days .day,
.dcui-calendar .calendar .years .year,
.dcui-calendar .calendar .months .month {
    background: transparent;
    border: 0;
    text-align: center;
    cursor: pointer;
}

.dcui-calendar .calendar .years .year,
.dcui-calendar .calendar .months .month {
    width: max-content;
    height: max-content;
}

.dcui-calendar .calendar .months .month {
    font-size: var(--dcui-calendar-month-font-size);
    font-weight: var(--dcui-calendar-month-font-weight);
    color: var(--dcui-calendar-month-color);
    padding: var(--dcui-calendar-month-padding);
    border: var(--dcui-calendar-month-border);
    width: 70px;
}

.dcui-calendar .calendar .months .month:disabled {
    pointer-events: none;
    color: var(--dcui-calendar-month-disabled-color);
    background-color: var(--dcui-calendar-month-disabled-bg-color);
}

.dcui-calendar .calendar .days .day {
    padding: 0;
    font-size: var(--dcui-calendar-day-font-size);
    font-weight: var(--dcui-calendar-day-font-weight);
    color: var(--dcui-calendar-text-color);
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: left;
}

.dcui-calendar .calendar .days .day .number {
    display: flex;
    width: var(--dcui-calendar-day-width);
    height: var(--dcui-calendar-day-height);
    align-items: center;
    justify-content: center;
    padding: 10px;
    font-size: inherit;
    border-radius: 7px;
    line-height: normal;
}

.dcui-calendar .calendar .days .day.name {
    pointer-events: none;
    font-size: var(--dcui-calendar-day-name-font-size);
    font-weight: var(--dcui-calendar-day-name-font-weight);
    color: var(--dcui-calendar-day-name-color);
    width: auto;
}

.dcui-calendar .calendar .days .day.selectedDate .number {
    background: var(--dcui-calendar-active-bg-color);
    color: var(--dcui-calendar-active-text-color);
    border: 2px solid #657ff5;
}

.dcui-calendar .calendar .days .day.circle .number {
    border-radius: 100%;
}

.dcui-calendar .calendar .days .day.selectedRange {
    background: var(--dcui-calendar-range-bg-color);
    color: var(--dcui-calendar-range-text-color);
}

.dcui-calendar .calendar:first-child .days .day.selectedDate {
    border-top-left-radius: var(--dcui-calendar-range-radius);
    border-bottom-left-radius: var(--dcui-calendar-range-radius);
}

.dcui-calendar .calendar .days .day.selectedDate:hover .number{
    background: var(--dcui-calendar-active-hover-color);
    color: var(--dcui-calendar-active-hover-text-color);
}

.dcui-calendar .calendar:last-child .days .day.selectedDate {
    border-top-right-radius: var(--dcui-calendar-range-radius);
    border-bottom-right-radius: var(--dcui-calendar-range-radius);
}

.dcui-calendar .calendar .days .day.disabledDate {
    pointer-events: none;
    color: var(--dcui-calendar-text-disabled-color);
    font-weight: 500;
}

.dcui-calendar .calendar .days .day.disabledDate.selectedRange {
    background: var(--dcui-calendar-range-bg-color);
}

.dcui-calendar .calendar .days .day:hover .number{
    background: var(--dcui-calendar-day-hover-bg-color);
}

.dcui-calendar .calendar .years .year {
    font-size: var(--dcui-calendar-year-font-size);
    font-weight: var(--dcui-calendar-year-font-weight);
    color: var(--dcui-calendar-year-color);
    padding: var(--dcui-calendar-year-padding);
    border: var(--dcui-calendar-year-border);
    border-radius: var(--dcui-calendar-year-border-radius);
}

.dcui-calendar .calendar .years .year:hover,
.dcui-calendar .calendar .months .month:hover{
    background-color: var(--dcui-calendar-month-hover-bg-color);
    border-radius: 7px;
}

.dcui-calendar .calendar .years .year:disabled {
    pointer-events: none;
    color: var(--dcui-calendar-year-disabled-color);
    background-color: var(--dcui-calendar-year-disabled-bg-color);
}

.dcui-calendar.left .content {
    left: 0;
    transform: translateY(5px);
    border-bottom-left-radius: var(--dcui-calendar-content-radius);
    border-bottom-right-radius: var(--dcui-calendar-content-radius);
    border-top-right-radius: var(--dcui-calendar-content-radius);
}

.dcui-calendar.left .calendar:first-child::before {
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent var(--dcui-calendar-triangle-color) transparent;
    left: 0;
}

.dcui-calendar.right .content {
    right: 0;
    transform: translateY(5px);
    border-bottom-left-radius: var(--dcui-calendar-content-radius);
    border-bottom-right-radius: var(--dcui-calendar-content-radius);
    border-top-left-radius: var(--dcui-calendar-content-radius);
}

.dcui-calendar.right .calendar:first-child::before {
    right: 0;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent var(--dcui-calendar-triangle-color) transparent;
}

.dcui-calendar.top .content {
    top: 100%;
    transform: translateY(calc(-100% - 66px));
    box-shadow: var(--dcui-calendar-top-shadow);
    border-top-left-radius: var(--dcui-calendar-content-radius);
    border-top-right-radius: var(--dcui-calendar-content-radius);
    border-bottom-right-radius: var(--dcui-calendar-content-radius);
}

.dcui-calendar.top .content .calendar:first-child::before {
    border-width: 5px;
    border-style: solid;
    border-color: var(--dcui-calendar-triangle-color) transparent transparent transparent;
    top: 100%;
    left: 0;
}

.dcui-calendar.bottom .content {
    transform: translateY(5px);
    border-bottom-left-radius: var(--dcui-calendar-content-radius);
    border-bottom-right-radius: var(--dcui-calendar-content-radius);
    border-top-right-radius: var(--dcui-calendar-content-radius);
}

.dcui-calendar.bottom .content .calendar:first-child::before {
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent var(--dcui-calendar-triangle-color) transparent;
    left: 0;
}

.dcui-calendar.center .calendar:first-child::before {
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent var(--dcui-calendar-triangle-color) transparent;
    left: 50%;
    transform: translateX(-50%);
}

.dcui-calendar.center .content {
    transform: translateY(5px) translateX(-50%);
    left: 50%;
    border-bottom-left-radius: var(--dcui-calendar-content-radius);
    border-bottom-right-radius: var(--dcui-calendar-content-radius);
    border-top-right-radius: var(--dcui-calendar-content-radius);
}

.dc-datepicker-filed-no-outline.dcui-calendar .input-field input{
    border: transparent;
}

/********************
    Media Viewer
 ********************/

.dcui-media-viewer-container {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 5px;
    position: relative;
    width: 100%;
    min-height: 124px;
}

.dcui-media-viewer-item {
    border: 1px solid #a2a2a2;
    border-radius: 5px;
    width: 108px;
    height: 112px;
    margin: 5px;
    position: relative;
}

.dcui-media-viewer-text {
    line-height: 13px;
    padding: 0 5px;
    text-align: center;
}

.dcui-media-viewer-image {
    width: 106px;
    height: 92px;
    object-fit: cover;
    object-position: top;
    border-bottom: 1px solid #a2a2a2;
    background-color: #a2a2a2;
}

.dcui-media-viewer-item .file-remove-btn {
    position: absolute;
    top: 3px;
    right: 5px;
    display: none;
}

.dcui-media-viewer-item:hover .file-remove-btn {
    display: block;
}

.dcui-media-viewer-item .file-featured-btn {
    position: absolute;
    top: 3px;
    left: 5px;
    display: none;
}

.dcui-media-viewer-item:hover .file-featured-btn {
    display: block;
}

.dcui-media-viewer-container .dcui-media-viewer-item.dcui-media-viewer-icon-selected:hover::after {
    font-family: "Font Awesome 6 Pro";
    position: absolute;
    top: -9px;
    left: -10px;
    color: #ffef00;
    font-weight: 900;
    content: "\f005";
    font-size: 15px;
    line-height: 14px;
    text-align: center;
    margin-right: 10px;
    z-index: 1;
    -webkit-text-stroke: 1px #ff3d00;
}

.dcui-button.dcui-file-uploader-featured-btn {
    width: 15px;
    height: 15px;
    padding: 5px;
    border-radius: unset;
    color: #ffef00;
    background-color: transparent;
    border: 0;
    -webkit-text-stroke: 1px #ff3d00;
}

.dcui-file-uploader-featured-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 3px;
}

/***********************/
/**  No Styles found  **/
/***********************/

.dcui-media-viewer-no-media-found-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dcui-media-viewer-no-media-found-container img {
    width: 90px;
    margin-bottom: 15px;
    opacity: 0.8;
}

.dcui-media-viewer-no-media-found-container .text-container {
    font-size: medium;
    font-weight: 600;
}


/************************/
/**    Plain Layout     */
/************************/

.dcui-plain-comp-card {
    padding: 0;
    height: 100%;
}

.dcui-plain-top-section {
    padding: 30px;
    background-color: #d6ecf8;
}

.dcui-plain-top-container {
    display: flex;
    justify-content: space-between;
}

.dcui-plain-top-left-container {
    display: flex;
}

.dcui-plain-top-right-container {
    display: flex;
}

.dcui-plain-middle-container {
    padding: 30px;
    padding-bottom: 0;
}

.docld-plain-middle-container {
    position: relative;
    height: calc(100vh - 250px);
    padding-right: 15px;
}

/****************************/
/**    navigation drawer   **/
/***************************/

.dcui-navigation-drawer-card {
    padding: 0;
    height: 100%;
}

.dcui-navigation-drawer-name-container {
    padding: 20px;
    align-items: center;
}

.dcui-navigation-drawer-title {
    font-size: 24px;
    font-weight: 700;
    color: #3f3f3f;
}

.dcui-navigation-drawer-nav-items-container {
    height: calc(100vh - 155px);
}

.dcui-navigation-content {
    position: relative;
}

.dcui-navigation-content .dcui-navigator-text-container {
    display: flex;
    justify-content: space-between;
    flex: 1;
}

.dcui-navigation-content.show-line::after {
    content: "";
    position: absolute;
    top: 33px;
    left: 20px;
    height: calc(100% - 53px);
    width: 2px;
    border-left: 2px dotted #ededed;
    z-index: 0;
}

.dcui-navigation-content .item {
    display: flex;
    align-items: center;
    padding: 15px;
    height: 55px;
}

.dcui-navigation-content.show-bullets .item::before {
    position: relative;
    left: 2px;
    top: 1px;
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    -moz-border-radius: 7.5px;
    -webkit-border-radius: 7.5px;
    border-radius: 7.5px;
    background-color: #d9d9d9;
    margin-right: 10px;
    z-index: 1;
}

.dcui-navigation-content .item:hover {
    background-color: #f3f3f3;
    /*background-color: #e6f5ff;*/
    cursor: pointer;
}

.dcui-navigation-content .item .icon {
    font-size: 20px;
    margin-right: 5px;
    width: 25px;
}

.dcui-navigation-content .item.selected {
    background-color: #f7f7f7;
    /*background-color: #e6f5ff;*/
    color: var(--dcui-primary-color);
    position: relative;
}

.dcui-navigation-content .item.selected::after {
    content: '';
    position: absolute;
    top: 17px;
    right: 10px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid var(--dcui-primary-color);
}

.dcui-navigation-content .item::before {
    font-family: "Font Awesome 6 Pro";
    position: relative;
    left: 2px;
    top: 1px;
    color: white;
    font-weight: 900;
    display: flex; /* Change from block to flex */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    width: 8px;
    height: 8px;
    font-size: 7px;
    line-height: 9px;
    text-align: center;
    -moz-border-radius: 7.5px;
    -webkit-border-radius: 7.5px;
    border-radius: 7.5px;
    margin-right: 10px;
    z-index: 1;
}

/**********************/
/**    Point list   **/
/*********************/

.dc-point-list-container-parent {
    position: relative;
    height: 100%;
}

.dc-point-list-container {
    margin-top: 20px;
    position: relative;
}

.dc-point-list-container.loaded::after {
    content: "";
    position: absolute;
    top: 10px;
    left: 6px;
    height: calc(100% - 40px);
    width: 2px;
    border-left: 2px dotted #ededed;
    z-index: 0;
}

.dc-point-list-container .dc-point-list-item {
    margin-bottom: 15px;
    line-height: 20px;
    display: flex;
    align-items: flex-start;
}

.dc-point-list-container .dc-point-list-item:last-child {
    margin-bottom: 0;
}

.dc-point-list-container .dc-point-list-item::before {
    position: relative;
    left: 2px;
    top: 4px;
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    padding: 5px;
    -moz-border-radius: 7.5px;
    -webkit-border-radius: 7.5px;
    border-radius: 7.5px;
    background-color: #d9d9d9;
    margin-right: 10px;
    z-index: 1;
} :root {
    --content-guard: 1920px;
    --topbar-height: 70px;
    --sidebar-width: 90px;
}

html,
body,
#app,
.xp-content-guard {
    height: 100%;
    /* overflow-y: auto !important; */
}

.dark-mode .xp-content-guard {
    max-width: var(--content-guard);
    margin: 0 auto;
    background-color: #FBFBFD;
    overflow: hidden;
    position: relative;
}

.light-mode .xp-content-guard {
    max-width: var(--content-guard);
    margin: 0 auto;
    background-color: var(--light-tertiary-color);
    overflow: hidden;
    position: relative;
}

#xp-default-banner {
    text-align: center;
    margin: 10% auto;
    max-width: 992px;
}

#xp-default-banner .xp-db-text-head {
    margin-bottom: 0;
    font-weight: 300;
    font-size: 35px;
}

#xp-default-banner .xp-db-icon {
    width: 70px;
    height: 70px;
    line-height: 70px;
    font-size: 25px;
    display: inline-block;
    border-radius: 100%;
    background-color: #eee;
    color: #959595;
}

.bg-gradient-blue {
    background: linear-gradient(261.96deg, #00578c 29.34%, #001a30 121.48%);
}

.bg-full-image {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

.bg-full-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(270deg, rgba(0, 29, 53, 0) 29.44%, #001d35 94.6%);
}

.bg-full-image .graphic-circuit-lines {
    position: absolute;
    width: 200px;
    top: calc(50% - 140px);
    left: 0;
    pointer-events: none;
}

.atc-contianer {
    display: grid;
    margin-top: 0.5rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.atc-content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.atc-label {
    display: flex;
    padding: 2.5rem;
    flex-direction: column;
    border-radius: 0.5rem;
    border-width: 4px;
    border-style: dashed;
    width: 100%;
    text-align: center;
}

.atc-space {
    display: flex;
    margin-top: -2.5rem;
    flex: 1 1 auto;
    width: 40%;
    max-height: 12rem;
    justify-content: center;
    height: 30px;
}

.atc-img {
    object-position: center;
    font-size: 5rem;
}

.atc-select-file {
    color: #2563EB;
}

.atc-text-p {
    color: #6B7280;
}

.atc-txt {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.atc-select-file:hover {
    text-decoration: underline;
}

.atc-img-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-align: center;

}

.atc-title {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    color: #6B7280;
}


.ve-circle-avatar {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 100%;
    overflow: hidden;
}

.cp-v-card {
    border-bottom: 1px solid #4b4b4b;
    padding: 10px 0;
}

/*
* Loris
*/
.hide-input-file {
    visibility: hidden !important;
    position: absolute !important;
    height: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
}

.hide-element {
    visibility: hidden !important;
    opacity: 0 !important;
}

select.form-control {
    cursor: pointer;
}

/**
 * Authentication
 */
.ve-full-page-knife-cut {
    height: 100%;
}

.ve-full-page-knife-cut .kc-columns {
    width: 100%;
    height: 100%;
    position: relative;
}

.ve-full-page-knife-cut .kc-columns::after {
    content: "";
    clear: both;
    display: table;
}

.kc-columns .kc-col-left,
.kc-columns .kc-col-right {
    float: left;
    width: calc(50% + 150px);
    height: 100%;
    display: flex;
    align-items: center;
}

.kc-columns .kc-col-left {
    justify-content: flex-start;
    padding-left: 12%;
}

.kc-columns .kc-col-right {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    justify-content: flex-end;
    padding-right: 12%;
}

.kc-columns .kc-col-right .kc-skew {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    z-index: -1;
    overflow: hidden;
}

.kc-columns .kc-col-right .kc-skew::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(261.96deg, #00578c 29.34%, #001a30 121.48%);
    -ms-transform: skew(14deg, 0deg);
    -webkit-transform: skew(14deg, 0deg);
    transform: skew(14deg, 0deg);
    transform-origin: left top;
}

#ve-page-auth .pa-left-content {
    position: inherit;
    max-width: 480px;
    text-align: justify;
}

.pa-left-content .pa-lc-logo {
    max-width: 100%;
    height: auto;
}

.pa-left-content .pa-lc-text {
    color: #fff;
    margin-top: 10px;
}

.auth-logo {
    text-align: center;
    margin-bottom: 25px;
    height: 100%;
}

.auth-logo img {
    width: 100px;
    height: 100px;
}

.auth-card-panel {
    width: 440px;
}

.dark-mode .auth-card-panel .acp-boxer {
    background-color: var(--dark-secondary-color);
    padding: 40px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
    color: var(--dark-color-text);
}

.dark-mode .auth-card-panel .acp-boxer a {
    color: #faf7f7;
}

.dark-mode .auth-card-panel .acp-boxer a:hover {
    color: #808080;
}

.light-mode .auth-card-panel .acp-boxer a {
    color: #020202;
}

.light-mode .auth-card-panel .acp-boxer a:hover {
    color: #808080;
}

.light-mode .auth-card-panel .acp-boxer {
    padding: 40px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
    color: var(--light-color-text);
}

.auth-card-panel .acp-heading {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

.dark-mode .auth-card-panel .acp-heading {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: var(--dark-color-text);
}

.light-mode .auth-card-panel .acp-heading {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    color: var(--light-color-text);
}

.auth-card-panel .acp-description {
    line-height: 1.3;
    color: #8d8d8d;
    font-size: 14px;
}

.dark-mode .auth-card-panel .acp-footer {
    color: var(--dark-quaternary-color);
    font-weight: 200;
    font-size: 14px;
    padding-top: 20px;
    line-height: 1;
}

.light-mode .auth-card-panel .acp-footer {
    color: var(--light-secondary-color);
    font-weight: 200;
    font-size: 14px;
    padding-top: 20px;
    line-height: 1;
}

.auth-card-panel .acp-boxer.head-tail-gapped {
    padding-top: 150px;
    padding-bottom: 150px;
}

.text-separator {
    position: relative;
    text-align: center;
    line-height: 1;
}

.text-separator span {
    display: inline-block;
    background-color: #fff;
    padding: 0 15px;
    position: relative;
}

.text-separator::before {
    position: absolute;
    content: "";
    height: 1px;
    background-color: #dedede;
    left: 10px;
    right: 10px;
    top: 48%;
}

/**
 * Top bar
 */
#app-topbar {
    width: 100%;
    height: var(--topbar-height);
    position: fixed;
    max-width: var(--content-guard);
    top: 0;
    left: 50%;
    z-index: 90;
    padding: 0 15px;
    padding-left: calc(var(--sidebar-width) + 15px);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #424242;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
}

.dark-mode #app-topbar {
    background-color: var(--dark-tertiary-color);
}

.light-mode #app-topbar {
    background-color: #c1c1c1;
}

#app-topbar .at-content {
    height: 100%;
    width: 100%;
}

.at-content .at-logo {
    max-width: 280px;
    min-width: 194px;
    height: 30px;
    display: inline-block;
}

.at-content .at-logo img {
    max-height: 100%;
    max-width: 100%;
    min-height: 30px;
}

.at-lu-content > div:not(:last-child) {
    margin-right: 13px;
}

.at-lu-content .at-lu-details span {
    display: block;
    line-height: 1;
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.at-lu-content .at-lu-details .at-lud-sub {
    font-size: 12px;
    font-weight: 200;
}

.dark-mode .at-lu-content .at-lu-details,
.dark-mode .at-lu-content .at-icon-dropdown {
    color: #fff;
}

.light-mode .at-lu-content .at-lu-details,
.light-mode .at-lu-content .at-icon-dropdown {
    color: #000000;
}

.at-content .at-elem-separator {
    width: 1px;
    height: calc(100% - 20px);
    margin: 0 25px;
    background-color: var(--dark-seven-color);
}

.light-mode .at-content .at-elem-separator {
    background-color: #999999;
}


.at-content .at-icon-item {
    position: relative;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 70px;
    text-align: center;
    cursor: pointer;
}

.at-icon-item .at-ii-icon {
    display: inline-block;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    position: relative;
}

.light-mode .at-icon-item .at-ii-icon {
    color: #313131;
}

.light-mode .at-content .at-icon-item:hover {
    color: #d3d3d3;
    background-color: var(--light-senary-color);
}


.at-content .at-icon-item:hover {
    background-color: var(--dark-senary-color);
}

.at-content .at-icon-item:hover .at-ii-icon {
    color: var(--quaternary-color);
}

.icon-bubble {
    position: absolute;
    display: inline-block;
    min-width: 20px;
    height: 20px;
    line-height: 16px;
    border-radius: 100px;
    color: #fff;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    z-index: 1;
    padding: 3px;
    top: -5px;
    left: 50%;
    background-color: #fff;
    white-space: nowrap;
}

.icon-bubble.bubble-red {
    background-color: #f00;
}

.at-content .at-search {
    width: 412px;
}

.at-search .form-control {
    background-color: transparent;
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-right: none;
    box-shadow: none;
    color: #fff;
    padding-right: 50px;
}

.light-mode .at-search .form-control {
    color: #000000;
}

.at-search .icon-control .ic-icon {
    background-color: transparent;
    color: #fff;
    font-size: 20px;
    width: 40px;
}

.light-mode .at-search .icon-control .ic-icon {
    background-color: transparent;
    color: #000000;
    font-size: 20px;
    width: 40px;
}

.light-mode #megaSearch::placeholder {
    color: #000;
}

#tb-mega-menu1 {
    min-height: 265px;
    position: absolute;
    background-color: #fff;
    left: 0;
    right: 0;
    padding: 40px 8%;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

#tb-mega-menu1 .tb-mm-wrap {
    flex-wrap: wrap;
}

#tb-mega-menu {
    position: absolute;
    background-color: #fff;
    left: 0;
    right: 0;
    padding: 40px 8%;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

#tb-mega-menu .tb-mm-wrap {
    flex-wrap: wrap;
}

.tb-mm-wrap .tb-mm-item {
    width: 20%;
    padding-right: 30px;
    margin-bottom: 20px;
}

.tb-mm-item > a {
    padding: 13px 13px;
}

.tb-mm-item .tb-mmi-icon {
    width: 35px;
    min-width: 35px;
    font-size: 18px;
}

.tb-mm-item .tb-mmi-text {
    color: var(--body-color);
    flex: 1;
}

.tb-mmi-text .tb-mmi-label {
    margin-bottom: 5px;
    line-height: 1;
}

.tb-mmi-text .tb-mmi-desc {
    font-size: 12px;
}

.tb-mm-item > a:hover {
    background-color: rgba(0, 121, 192, 0.15);
}

/**
* View as company top bar
*/
.viewASCompany-container {
    display: flex;
    align-items: center;
    height: 100%;
}

.viewASCompany-container .viewASCompany-logo {
    filter: drop-shadow(1px 2px 9px rgba(0, 121, 192, 0.15));
    border: 0.001em solid #3f3f3f;
    border-radius: 50px;
    height: 2.2rem;
    justify-content: center;
    overflow: hidden;
    margin-right: 10px;
    width: 2.2rem;
    min-width: 2.2rem;
}

.viewASCompany-container .viewASCompany-logo img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.viewASCompany-container .viewAsCompany-text {
    font-size: 15px;
    color: white;
    margin-right: 10px;
}

.light-mode .viewASCompany-container .viewAsCompany-text {
    font-size: 15px;
    color: inherit;
    margin-right: 10px;
}

.viewASCompany-container .viewASCompany-downArrow {
    font-size: 15px;
    color: white;
    margin-right: 10px;
}

.light-mode .viewASCompany-container .viewASCompany-downArrow {
    font-size: 15px;
    color: rgb(0, 0, 0);
    margin-right: 10px;
}

.vw-company-list {
    width: 240px;
}

.vw-container > li > a.doing-ajax {
    pointer-events: none;
}

.vw-container > li > a.doing-ajax .ajax-ellipsis-wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--dark-quinary-color);
}

.dark-mode .vw-search-input {
    background-color: #5d5d5d !important;
}

.vwbar.signout {
    cursor: pointer;
    height: 44px;
    line-height: 30px;
    border-top: 1px black solid;
    text-align: center;
    margin-top: 5px;
    font-weight: 300;
}

.vwbar.signout:hover {
    background-color: black;
}

.light-mode .vwbar.signout:hover {
    background-color: #dddddd;
}

.vw-view-container {
    width: 240px;
    padding: 0;
}

.vw-company-list:hover {
    cursor: pointer;
    background-color: var(--dark-quinary-color);
}

.light-mode .vw-company-list:hover {
    cursor: pointer;
    background-color: var(--light-secondary-color);
    color: var(--light-tertiary-color);
}

.vw-search-container {
    padding: 10px 15px;
    border-bottom: 1px solid black;
}

.megasearch {
    height: 35px;
}

#tb-search .ic-icon {
    height: 35px;
    line-height: 36px;
    font-size: 15px;
}

/**
* Field set
*/
.fl-fieldset {
    border-color: #d3d3d3;
    border-width: 1px;
    padding-bottom: 5px;
}

/**
 * Side bar
 */
#app-sidebar {
    width: var(--sidebar-width);
    position: fixed;
    background-color: var(--secondary-color);
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 99;
    color: var(--color-text);
}

.dark-mode #app-sidebar {
    background-color: var(--dark-secondary-color);
    color: var(--dark-color-text);
}

.light-mode #app-sidebar {
    background-color: #999999;
    color: var(--light-color-text);
}

.as-do-logo {
    text-align: center;
    height: var(--topbar-height);
    display: flex;
    justify-content: center;
    align-items: center;
}

.as-nav .as-nav-item {
    text-align: center;
}

.dark-mode .as-nav .as-nav-item.active,
.dark-mode .as-nav .as-nav-item:hover {
    background-color: var(--menu-selected-color);
    color: var(--dark-quaternary-color) !important;
}

.light-mode .as-nav .as-nav-item.active,
.light-mode .as-nav .as-nav-item:hover {
    background-color: var(--menu-selected-color);
    color: var(--light-tertiary-color) !important;
}

.light-mode .as-nav .as-nav-item.active a,
.light-mode .as-nav .as-nav-item:hover a {
    color: var(--light-tertiary-color) !important;
}

.as-nav .as-nav-item > a {
    display: block;
    padding: 13px 5px;
}

.as-nav-item .as-ni-icon {
    font-size: 22px;
    line-height: 1;
    margin-bottom: 1px;
}

.as-nav-item .as-ni-label {
    font-size: 12px;
    line-height: 1;
    /*white-space: nowrap;*/
}

/**
*Nuwan
*/
.app-qb-thumb {
    width: 250px;
}

.app-qb-thumb.btn:hover {
    cursor: pointer;
}

.ss-app-container {
    width: 280px;
    height: 160px;
    padding: 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 5px;
    border: 1px solid #ffffff;
}

.dark-mode .ss-app-container {
    background-color: var(--dark-tertiary-color);
    border: 1px solid var(--dark-tertiary-color);
}

.light-mode .ss-app-container {
    background-color: #e5e5e5;
    border: 1px solid #e5e5e5;
}

.side-box {
    width: auto;
    margin-left: 100px;
    margin-top: 20px;
    margin-right: 6px;
    border: 1px solid #d3cfcf;
    padding: 24px;
}

.no-notification-icon {
    font-size: 100px;
    padding-top: 65px;
    color: var(--secondary-color);
}

/*
*Radio button
*/
/* input[type=radio].vs-Radio {
  padding: 5px;
  margin-right: 5px;
  -webkit-appearance: none;
  outline: 0.1em solid black;
  outline-offset: 0.1rem;
}

input[type=radio]:checked.vs-Radio {
  display: inline-block;
  background-color: var(--secondary-color);
} */

.two-fa {
    border: 1px solid #c8c8c8;
    padding: 10px;
}

.xp_under_construction {
    text-align: center;
}

.text-under-logo {
    display: none;
}

.text-under-logo.show {
    display: block;
    position: absolute;
    right: 0px;
    color: white;
    line-height: 1px;
    font-size: 11px;
    bottom: -7px;
}

.fa-icon {
    font-size: 25px;
    color: var(--secondary-color);
}

/*
*Assign Employees
*/
.ase_no_results {
    position: absolute;
    top: 248px;
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
    flex-direction: column;
    left: 7px;
}

.ase_no_results-container {
    width: 100px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ase_no_results-icon {
    font-size: 35px;
    color: #cbcbcb;
}

.ase_no_results-header {
    font-size: 20px;
    margin-top: 5px;
    font-weight: 500;
}

/*
*Mega Search
*/
.mega_search_no_results {
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
    flex-direction: column;
}

.mega_search_no_results-container {
    width: 100px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mega_search_no_results-icon {
    font-size: 35px;
    color: #cbcbcb;
}

.mega_search_no_results-header {
    font-size: 20px;
    margin-top: 5px;
    font-weight: 500;
}

.megaSearch .megaSearch-main-title {
    padding: 0px 15px;
    font-size: 20px;
    font-weight: 600;
    border-bottom: 1px solid #d2d5d7;
    min-height: 60px;
}

.megaSearch .megaSearch-main-item {
    padding-top: 14px;
    padding-bottom: 9px;
}

.megaSearch-bar-ul li.megaSearch-main-item {
    border-bottom: 1px solid #d2d5d7;
}

.megaSearch-bar-ul li:last-child.megaSearch-main-item {
    border-bottom: 0;
}

.megaSearch-bar-ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.megaSearch-description ul {
    list-style: none;
    padding-left: 0;
}

.megaSearch-sub-list {
    border-bottom: 1px solid #d7d7d7;
    font-size: 15px;
    font-weight: 400;
    margin: 0;
    list-style: inside;
}

.megaSearch-sub-list li {
    padding-left: 0 !important;
}

/* .notification-sub-list :hover {
  background-color:#e9f7ff;;
} */
.megaSearch-sub-list li::marker {
    font-size: 20px !important;
}

.sub-megaSearch-title {
    font-size: 15px;
}

.sub-megaSearch-date {
    font-size: 12px;
}

.megaSearch-no-results-text {
    position: absolute;
    left: 120px;
    top: 60px;
    font-size: 20px;
    font-weight: 600;
    list-style: none;
}

.megaSearch-sub-list .unread {
    color: var(--secondary-color);
    font-weight: 600;
    background-color: #f2faff;
    cursor: pointer;
}

.megaSearch-container {
    max-width: 775px;
    margin: 0 auto;
}

.megaSearch-main-date {
    font-size: 12px;
    color: #8d8d8d;
}

.megaSearch-icon-main {
    font-size: 18px;
    max-width: 18px;
    min-width: 18px;
    color: var(--secondary-color);
}

.megaSearch-main-container {
    padding-top: 15px;
    padding-bottom: 5px;
    padding-left: 30px;
}

.megaSearch-main-title {
    font-size: 20px;
    padding-left: 25px;
}

.megaSearch-icon {
    max-width: 18px;
    min-width: 18px;
    font-size: 18px;
    color: black;
}

.dark-mode .megaSearch-icon {
    color: #f7f7f7;
}

.dark-mode .megaSearch-title {
    color: #f7f7f7;
    font-size: 13px;
}

.dark-mode .megaSearch-title:hover {
    color: #8d8d8d;
}

.megaSearch-title {
    color: #000;
    font-size: 13px;
}

.megaSearch-title:hover {
    color: var(--dark-senary-color);
}

.megaSearch-description {
    font-size: small;
}

.megaSearch-description ul {
    list-style: none;
    padding-left: 0;
}

.megaSearch-description ul :last-child {
    padding-bottom: 0;
}

.megaSearch-description ul li {
    padding-left: 85px !important;
    margin-bottom: 5px;
    cursor: pointer;
}

.megaSearch-description ul li span {
    color: #8d8d8d;
}

.megaSearch-description ul li.highlight {
    color: var(--secondary-color);
    font-weight: 600;
    padding-top: 5px;
}

.dark-mode .megaSearch-description ul li.highlight {
    color: white;
}

.dark-mode .megaSearch-description ul li a {
    color: rgb(226, 226, 226);
}

.megaSearch-description ul li a {
    color: black;
}

.megaSearch-description .megaSearch-bar-ul li {
    padding-left: 15px !important;
}

.megaSearch-description ul li a:hover {
    color: #a8a8a8;
}

.dark-mode .megaSearch-description ul li a:hover {
    color: #c3c3c3;
}

/*
*Registration
*/
.registrations-action-btn {
    font-size: 20px !important;
}

/*
*Notification bar and Notifications
*/

.notification {
    list-style: none;
    padding: 0;
    margin: 5px 0;
}

.notification .notification-main-title {
    padding: 0px 15px;
    font-size: 20px;
    font-weight: 600;
    border-bottom: 1px solid #d2d5d7;
}

.notification .notification-main-item {
    padding-top: 11px;
}

.notification-bar-ul li.notification-main-item {
    border-bottom: 1px solid #d2d5d7;
}

.notification-bar-ul li:last-child.notification-main-item {
    border-bottom: 0;
}

.notification-bar-ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.notification-bar-ul li:nth-of-type(1n + 4) {
    display: none;
}

.notification-description ul {
    list-style: none;
    padding-left: 0;
}

.notification-sub-list {
    border-bottom: 1px solid #d7d7d7;
    font-size: 15px;
    font-weight: 400;
    margin: 0;
    list-style: inside;
}

.notification-sub-list li {
    padding-left: 0 !important;
}

/* .notification-sub-list :hover {
  background-color:#e9f7ff;;
} */
.notification-sub-list li::marker {
    font-size: 20px !important;
}

.sub-notification-title {
    font-size: 14px;
}

.sub-notification-date {
    font-size: 12px;
}

.notification-sub-list .unread {
    color: var(--secondary-color);
    font-weight: 600;
    background-color: #f2faff;
    cursor: pointer;
}

.notification-container {
    max-width: 775px;
    margin: 0 auto;
}

.notification-main-date {
    font-size: 12px;
    color: #8d8d8d;
}

.notification-icon-main {
    font-size: 24px;
    width: 70px;
    min-width: 70px;
    text-align: center;
    color: var(--secondary-color);
}

.notification-main-container {
    padding-top: 15px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
}

.notification-main-title {
    font-size: 20px;
}

.notification-icon {
    max-width: 35px;
    min-width: 20px;
    font-size: 20px;
    color: var(--secondary-color);
    text-align: center;
}

.notification-description {
    font-size: small;
}

.notification-description ul {
    list-style: none;
    padding-left: 0;
}

.notification-description ul :last-child {
    padding-bottom: 0;
}

.notification-description ul li {
    padding-left: 5px !important;
    margin-bottom: 5px;
    padding-right: 5px;
    cursor: pointer;
}

.notification-description ul li span {
    color: #8d8d8d;
}

.notification-description ul li.unread {
    background-color: #f2faff;
    color: var(--secondary-color);
    font-weight: 600;
    padding-top: 10px;
}

.notification-description ul li a {
    color: black;
}

.notification-description .notification-bar-ul li {
    padding-left: 5px !important;
    padding-right: 5px;
}

.notification-description ul li a:hover {
    color: rgb(187, 187, 187);
}

.notification .mark-as-read {
    font-size: 15px;
    font-weight: 400;
    color: #2491c7;
    cursor: pointer;
}

.mark-as-read-icon {
    letter-spacing: -5px;
}

.view-all-notifcations {
    text-decoration: none;
}

.image-icon-text:hover {
    color: #e1dede;
}

.viewall-ul {
    padding: 0;
    margin: 0;
    border-top: 1px solid #d3d2d2;
    list-style: none;
}

.dark-mode .action-btns {
    color: var(--dark-quaternary-color);
}

.dark-mode .action-btns:hover {
    color: #9d9c9c;
}

.light-mode .action-btns {
    color: var(--light-primary-color);
}

.light-mode .action-btns:hover {
    color: var(--light-senary-color);
}

#xp-loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}

.xp-loader {
    background-color: var(--dcui-primary-color);
    transition: width 0.5s ease;
    height: 3px;
    display: none;
}

.xp-loader.show {
    width: 0%;
    display: block;
}

.data-loader-container {
    position: relative;
    min-height: 300px;
}

.link-box {
    margin: 0 15px 15px 15px;
    padding: 22px 22px 22px 22px;
    border: 1px solid #d5d5d5;
    width: 96.6%;
}

.link-box-remove {
    position: absolute;
    right: 6px;
    top: 3px;
    font-size: 20px;
}

.link-box-remove.edit-service-link {
    right: 0 !important;
    top: -5px !important;
}

.sub-text {
    color: #8d8d8d;
    font-size: 13px;
}

.bgcolor-light-gray {
    background-color: #f1f1f1;
}

.light-gray {
    color: #787878;
}


.user-image-placeholder {
    position: relative;
    background-color: #fdfdfd;
}

.user-image-placeholder::before {
    display: inherit;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: "\f007";
    font-size: 50px;
    color: #c5c5c5;
    text-align: center;
}

.sph-container {
    background-color: #f5f5f5;
}

/*
*No result
*/
.no-results {
    display: flex;
    justify-content: center;
    height: 500px;
    width: 100%;
    align-items: center;
    flex-direction: column;
    padding-bottom: 165px;
}

.no-results .no-results-header {
    font-size: 22px;
    margin-top: 10px;
    font-weight: 500;
}

.no-results .no-results-icon {
    font-size: 50px;
    color: #cbcbcb;
}

.no-results-icon-container {
    background: #ebebeb;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    border: 1px solid #efefef;
}

/*
*No permissions
*/
.no-permission {
    display: flex;
    justify-content: center;
    height: 500px;
    width: 100%;
    align-items: center;
    flex-direction: column;
    padding-bottom: 165px;
}

.no-permission-icon-container {
    background: #ebebeb;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    border: 1px solid #efefef;
}

.no-permission-header {
    font-size: 22px;
    margin-top: 10px;
    font-weight: 500;
}

.no-permission-icon {
    font-size: 50px;
    color: #cbcbcb;
}

/*
*Scroll bar
*/
.side-bar-scroll {
    height: calc(100% - 104px);
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#show_scroll_up_down_btn {
    display: none;
}

/* .side-bar-scroll::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
} */

.side-bar-scroll::-webkit-scrollbar {
    display: none;
    /* width: 6px;
      background-color: #F5F5F5; */
}

/* .side-bar-scroll::-webkit-scrollbar-thumb
{
	background-color: #1881c6;
} */
.sidebar-bottom {
    height: 65px;
    bottom: 0;
    position: absolute;
    width: 100%;
}

.sidebar-company-logo {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 100%;
    display: inline-block;
    height: 40px;
    overflow: hidden;
    width: 41px;
}

.sidebar-bottom-arrows {
    font-size: 20px;
}

.sidebar-up {
    color: #00578c;
    transition: 0.25s ease;
    transform: rotate(0deg);
}

.sidebar-arrow-animate {
    transform: rotate(180deg);
}

.sb-mega-menu-icon {
    height: 100%;
    font-size: 25px;
    text-align: center;
    line-height: 70px;
}

.sb-mega-menu-icon:hover {
    cursor: pointer;
    background-color: var(--quinary-color);
}

.side-mega-menu {
    background-color: var(--dark-tertiary-color);
    height: 100%;
    width: 100%;
    z-index: 9999999;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
}

.side-mega-container {
    width: 100%;
    height: 100%;
    padding: 60px 100px 0;
}

.side-mega-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.dark-mode .side-mega-top .close-icon {
    font-size: 30px;
    color: var(--dark-quaternary-color);
}

.dark-mode .side-mega-top .close-icon :hover {
    cursor: pointer;
    color: var(--dark-quinary-color);
}

.light-mode .side-mega-top .close-icon {
    font-size: 30px;
    color: var(--light-secondary-color);
}

.light-mode .side-mega-top .close-icon :hover {
    cursor: pointer;
    color: var(--light-quinary-color);
}

.mode .side-mega-top .close-icon {
    font-size: 30px;
    color: var(--quaternary-color);
}

.mode .side-mega-top .close-icon :hover {
    cursor: pointer;
    color: var(--quinary-color);
}

.side-mega-middle-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
}

.side-mega-middle-boxes {
    background-color: #3e3e3f;
    width: 300px;
    height: 100px;
    flex: 0 0 19%;
    margin-right: 0.85%;
    box-sizing: border-box;
    margin-top: 15px;
}

.dark-mode .side-mega-middle-boxes {
    background-color: var(--dark-eight-color);
    color: white;
}

.light-mode .side-mega-middle-boxes {
    background-color: #e3e3e3;
    color: rgb(0, 0, 0);
}

.side-mega-middle-boxes:hover {
    background-color: var(--dark-quinary-color);
    cursor: pointer;
}

.light-mode .side-mega-middle-boxes:hover {
    background-color: var(--light-secondary-color);
    color: var(--light-tertiary-color);
}

.dark-mode .side-mega-middle-boxes:hover {
    background-color: var(--dark-quinary-color);
    color: var(--dark-color-text);
}

.smm-content {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 15px;
}

.smm-icon {
    font-size: 40px;
}

.slide-fade-right-enter-active {
    transition: all 0.1s ease-out;
}

.slide-fade-right-leave-active {
    transition: all 0.2s ease-out;
}

.slide-fade-right-enter-from,
.slide-fade-right-leave-to {
    transform: translateX(-50px);
    opacity: 0;
}

.slide-fade-top-enter-active {
    transition: all 0.1s ease-out;
}

.slide-fade-top-leave-active {
    transition: all 0.2s ease-out;
}

.slide-fade-top-enter-from,
.slide-fade-top-leave-to {
    transform: translateY(-50px);
    opacity: 0;
}

/*
*Table
*/
.th-40 {
    width: 40%;
}

.th-50 {
    width: 50%;
}

.th-60 {
    width: 60%;
}

/*
company icon
*/
.image-icon-container {
    flex-direction: row;
}

.image-icon {
    filter: drop-shadow(1px 2px 9px rgba(0, 121, 192, 0.15));
    border: 0.001em solid #e4dfdf;
    border-radius: 50px;
    height: 2.2rem;
    justify-content: center;
    overflow: hidden;
    margin-right: 5px;
    width: 2.2rem;
}

.image-icon .company-icon {
    max-width: 100%;
    object-fit: cover;
    height: 100%;
}

.image-icon-nav {
    border: 0.15em solid #e4dfdf;
    border-radius: 50px;
    height: 40px;
    justify-content: center;
    overflow: hidden;
    margin-right: 5px;
    width: 40px;
    min-width: 40px;
    min-height: 40px;
}

.image-icon-nav img {
    max-width: 100%;
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: cover;
}

/**
* table-menu
*/
.table-menu-bar {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    text-align: left;
}

.table-menu-bar a {
    margin: 25px;
}

/**
*popup open
*/
.pop-card-panel {
    background-color: #fff;
    box-shadow: 1px 2px 9px rgba(0, 121, 192, 0.15);
}

.popup {
    position: relative;
    background-color: #fff;
    min-width: 650px;
    border-radius: var(--dcui-field-radius);
    overflow: hidden;
    z-index: 1000 !important;
    padding: 30px;
    box-shadow: 0px 1px 16px -7px rgba(66, 66, 66, 0.25);
    margin: 50px auto;
    max-width: 95%;
}

.popup-blur-overlay {
    background-color: rgb(65 65 65 / 30%);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);
}

.popup-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;

}


.popup-overlay {
    bottom: 0;
    height: 100%;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 999 !important;
}

.popup-close-container {
    right: 11px;
    position: absolute;
    top: 7px;
    color: #d8d8d8;
    font-size: 23px;
    cursor: pointer;
}


.popup-close-container a {
    color: inherit;
}

.popup-close-container a i {
    transform: rotate(0deg);
    transition: all 0.5s ease-in-out;
}

.popup-close-container a i:hover {
    transform: rotate(180deg);
}

/**
*Accordion
*/

.accordion {
    box-shadow: 1px 2px 9px rgb(0 121 192 / 15%);
    position: relative;
}

.accordion .head {
    align-items: center;
    background-color: #ffffff;
    color: #4d5156;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    padding: 0px 20px;
    transition: 0.2s ease-in-out;
}

.accordion .arrow {
    color: #4d5156;
    font-size: 20px;
    opacity: 1;
    transition: 0.25s ease;
    transform: rotate(-180deg);
}

.accordion .arrow-animate {
    opacity: 1;
    transform: rotate(0deg);
}

.accordion .content {
    /* opacity: 0; */
    background-color: #ffffff;
    border-top: 0.001em solid #dcdcdc;
    color: #333333;
    /* max-height: 0; */
    /* padding: 0 20px; */
    padding: 5px 20px;
    /* transition: 0.5s ease-in-out;; */
}

.accordion .content p {
    /* opacity: 0; */
    /* transition: 0.4s ease-in-out;; */
}

.accordion .content.show p {
    opacity: 1;
}

.accordion .show {
    opacity: 1;
    max-height: 10000px;
    /* height: auto; */
    padding: 5px 20px;
}

/*
* Contacts
 */
.cc-as-image-icon {
    background-size: cover;
    background-position: center;
}

.cc-as-image-icon {
    filter: drop-shadow(1px 2px 9px rgba(0, 121, 192, 0.15));
    border: 0.001em solid #e4dfdf;
    border-radius: 50px;
    height: 40px;
    justify-content: center;
    overflow: hidden;
    margin-right: 5px;
    width: 40px;
}

/*
*test
*/
.v-enter-active,
.v-leave-active {
    transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
}

/*
*Company avatar group
*/
.avatar-group-container {
    display: flex;
    justify-content: flex-start;
}

.avatar-group {
    display: flex;
    overflow: hidden;
    margin-left: -0.5rem;
}

.avatar-group-image {
    border-radius: 9999px;
    width: 2rem;
    height: 2rem;
}

/* ********************************* */

.p-avatar {
    align-items: center;
    display: inline-flex;
    font-size: 1rem;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

.p-avatar.p-avatar-image {
    background-color: transparent;
}

.p-avatar-circle img,
.p-avatar.p-avatar-circle {
    border-radius: 50%;
}

.p-avatar .p-avatar-icon {
    font-size: 1rem;
}

.p-avatar img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.p-avatar-group .p-avatar + .p-avatar {
    margin-left: -0.5rem;
}

.p-avatar-group {
    align-items: center;
    display: flex;
}

.p-avatar {
    background-color: #dee2e6;
    border-radius: 6px;
}

.p-avatar.p-avatar-lg {
    width: 2.2rem;
    height: 2.2rem;
    font-size: 0.8rem;
    margin-left: 0;
    cursor: auto;
}

.p-avatar.p-avatar-lg .p-avatar-icon {
    font-size: 0.8rem;
}

.p-avatar-group .p-avatar {
    border: 2px solid #ffffff;
}

/*
* App version
*/
.app-version {
    position: absolute;
    right: 5px;
    top: -25px;
    font-size: 15px;
    color: #8b8b8b;
}

/*
*view as customers
*/
.viewAsCustomers > li > a.doing-ajax {
    pointer-events: none;
}

.viewAsCustomers > li > a.doing-ajax .ajax-ellipsis-wrap {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--primary-color);
}

.viewAsCustomers {
    max-height: 300px;
    overflow-x: auto;
    list-style: none;
    padding: 0;
}

.viewAsCustomers li a {
    display: block;
    padding: 5px 10px;
    text-align: left;
    white-space: nowrap;
    line-height: 1;
    color: inherit;
    position: relative;
}

.viewAsCustomers-selected {
    background-color: #e7e7e7;
    pointer-events: none;
    cursor: default;
}

.viewAsCustomers li a:hover {
    color: var(--secondary-color);
    background-color: rgba(0, 121, 192, 0.15);
}

.viewAsCustomer-Btn {
    font-family: inherit;
    font-size: 12px;
    font-weight: normal;
    display: inline-block;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    margin-bottom: 0;
    height: 35px;
    border: 1px solid var(--primary-color);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    color: #fff;
    border-radius: 3px;
    outline: 0;
    white-space: nowrap;
    background-color: var(--primary-color);
    text-shadow: none;
    box-shadow: none;
    line-height: 1.6;
    padding: 3.5px 4px 4px;
    position: relative;
    -webkit-transition: all ease-in-out 0.15s;
    -moz-transition: all ease-in-out 0.15s;
    transition: all ease-in-out 0.15s;
}

.viewAsCustomer-Btn .close {
    font-size: 20px;
}

.viewAsCustomer-Btn .close:hover {
    color: red;
}

.viewAsCustomer-Btn.rounded-long-button {
    border-radius: 50px 50px;
    color: var(--secondary-color);
    background-color: #ffffff;
    font-size: 12px;
}

.viewAsCustomer-logo {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 100%;
    overflow: hidden;
}

.viewAsCustomers.scroll-container::-webkit-scrollbar {
    position: relative;
    margin-right: 20px;
}

.dashboard-heading .dashboard-edit-dashboard-wrapper {
    opacity: 0;
    font-size: 20px;
    visibility: hidden;
    pointer-events: none;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.dashboard-heading:hover .dashboard-edit-dashboard-wrapper {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

/**
*Chips
*/
.basic-chip {
    border-radius: 3px;
    display: inline-block;
    padding: 7px 6px 5px;
}

.chip_red {
    background: #f48fb1;
    color: #000000;
}

.chip_yellow {
    background: #fff176;
    color: #000000;
}

.chip_green {
    /* background: #69bb67; */
    background: #81c784;
    color: #000000;
}

.chip_blue {
    background: #4fc3f7;
    color: #000000;
}

.chip_gray {
    background: #f3f3f3;
    color: #000000;
}

/*
* Bar color
*/

.app-theme-employee #app-topbar {
    background: rgb(0, 24, 44);
    background: linear-gradient(0deg,
    rgba(0, 24, 44, 1) 0%,
    rgba(3, 91, 163, 1) 100%);
}

.app-theme-client #app-topbar {
    background: rgb(0, 24, 44);
    background: linear-gradient(0deg,
    rgba(0, 24, 44, 1) 0%,
    rgba(3, 91, 163, 1) 100%);
}

.app-theme-system-admin #app-topbar {
    background-color: #000;
}

/**
*Under maintenance
*/
.under-maintenance {
    height: 530px;
    max-width: 100%;
    overflow: hidden;
    position: relative;
}

.under-maintenance img {
    display: inline-block;
    height: 100%;
    width: auto;
    overflow: hidden;
    position: relative;
}

/* ---------------------------------
    Toggle Button
   --------------------------------- */

.tgl {
    display: none;
}

.tgl,
.tgl:after,
.tgl:before,
.tgl *,
.tgl *:after,
.tgl *:before,
.tgl + .tgl-btn {
    box-sizing: border-box;
}

.tgl::selection,
.tgl:after::selection,
.tgl:before::selection,
.tgl *::selection,
.tgl *:after::selection,
.tgl *:before::selection,
.tgl + .tgl-btn::selection {
    background: none;
}

.tgl + .tgl-btn {
    outline: 0;
    display: block;
    width: 3em;
    height: 1.6em;
    position: relative;
    cursor: pointer;
    user-select: none;
}

.tgl + .tgl-btn:after,
.tgl + .tgl-btn:before {
    position: relative;
    display: block;
    content: "";
    width: 50%;
    height: 100%;
}

.tgl + .tgl-btn:after {
    left: 0;
}

.tgl + .tgl-btn:before {
    display: none;
}

.tgl:checked + .tgl-btn:after {
    left: 50%;
}

.tgl-vario + .tgl-btn {
    background: #fbfbfb;
    border-radius: 2em;
    padding: 2px;
    transition: all 0.4s ease;
    border: 1px solid #e8eae9;
}

.tgl-vario + .tgl-btn:after {
    border-radius: 2em;
    background: #fbfbfb;
    transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    padding 0.3s ease, margin 0.3s ease;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);
}

.tgl-vario + .tgl-btn:hover:after {
    will-change: padding;
}

.tgl-vario + .tgl-btn:active {
    box-shadow: inset 0 0 0 2em #e8eae9;
}

.tgl-vario + .tgl-btn:active:after {
    padding-right: 0.8em;
}

.tgl-vario:checked + .tgl-btn {
    background: var(--secondary-color);
}

.tgl-vario:checked + .tgl-btn:active {
    box-shadow: none;
}

.tgl-vario:checked + .tgl-btn:active:after {
    margin-left: -0.8em;
}

/* ---------------------------------
    Info Tips
   --------------------------------- */
.info-tip {
    display: inline-block;
    font-size: inherit;
    color: inherit;
    cursor: pointer;
    pointer-events: all;
}

.info-tip:hover {
}

.info-tip-message {
    position: absolute;
    background-color: var(--dark-primary-color);
    color: #fff;
    font-size: 13px;
    line-height: 1.4;
    padding: 10px 15px;
    border-radius: 3px;
    text-align: left;
    z-index: 99993;
    width: auto;
    height: auto;
    max-width: 300px;
}

.info-tip-message:after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid rgb(0, 0, 0);
    top: 100%;
    left: 15px;
}

.info-tip-message.from-bottom:after {
    top: -8px;
    border-top: none;
    border-bottom: 8px solid rgb(0, 0, 0);
}

/* 
Table Dropdown
*/
.table-icon-dropdown {
    color: #000000;
}

/*
*Three Dots
*/
.three-dots:before {
    content: "\22EF";
    color: var(--secondary-color);
    font-size: 20px;
}

/*
*Overlay 
*/
.overlay-styles {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0);
    opacity: 1;
    overflow-x: hidden;
    transition: 2s;
}

.overlay-content-styles {
    position: absolute;
    top: 40%;
    left: 25%;
    text-align: center;
    width: 50%;
    transition: 0.2s;
    z-index: 1001;
}

.overlay-content-styles > h1 {
    color: #ccc;
    border: 2px solid #ccc;
    margin: 0;
    border-radius: 20px;
    padding: 0;
}

/*
*Data exchange
*/
.dx-box-m-l {
    margin-left: -10px;
}

/*
right arrow list
*/
.arrow-list {
    color: #0b79c0;
}

/*
*Settings
*/
.settings-border {
    margin-left: -15px;
    margin-right: -35px;
    padding-right: 15px;
    margin-bottom: -30px;
    padding-bottom: 15px;
    padding-top: 15px;
}

.settings-profile-pic {
    width: 12%;
}

/*
*Settings External Apps
*/
.ss-disc-quickbooks {
    background-color: #389e2a;
    height: 40px;
    line-height: 42px;
    cursor: pointer;
    font-weight: 600;
    font-size: 17px;
    border-radius: 5px;
}

/*
*Settings Nav
*/
.se-header {
    font-size: 25px;
    font-weight: 600;
}

.se-nav .se-nav-item {
    text-align: left;
    min-width: 130px;
}

.se-nav .se-nav-item.active,
.se-nav .se-nav-item:hover {
    background-color: color-mix(in srgb, var(--dcui-primary-color) 20%, white 80%);;
    color: var(--dcui-primary-color);
}

.se-nav a{
    color: unset;
}

.se-nav .se-nav-item > a {
    display: flex;
    padding: 13px 5px;
    text-align: center;
}

.se-nav-item .se-ni-icon {
    font-size: 20px;
    line-height: 1;
    margin-bottom: 1px;
}

.se-nav-item .se-ni-label {
    font-size: 15px;
    line-height: 1;
}

/*
*Image Uploader
*/
/* Photo uploader */
.app-photo-uploader {
    position: relative;
    width: 90px;
    height: 90px;
    display: block;
    text-align: center;
}

.app-photo-uploader .apu-prev {
    width: 100%;
    height: 100%;
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    opacity: 0.6;
    overflow: hidden;
}

.app-photo-uploader input[type="file"] {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.app-photo-uploader .apu-icon {
    position: absolute;
    font-size: 25px;
    color: var(--dark-secondary-color);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    cursor: pointer;
    text-align: center;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.3);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    text-shadow: 0 0 11px rgba(255, 255, 255, 0.5),
    0 0 2px rgba(255, 255, 255, 0.5);
}

.app-photo-uploader.has-error .apu-icon i:before {
    content: "\f071";
}

.app-photo-uploader .apu-remove {
    position: absolute;
    width: 16px;
    height: 16px;
    z-index: 2;
    color: #fff;
    background-color: #e30c0c;
    border-radius: 100%;
    top: 0;
    right: 0;
    font-size: 12px;
    display: flex;
    visibility: hidden;
    opacity: 0;
    align-items: center;
    justify-content: center;
}

.app-photo-uploader .apu-remove:hover {
    background-color: #0097ff;
}

.app-photo-uploader:not(.loaded) .apu-icon:hover {
    background-color: rgba(255, 255, 255, 0.6);
}

.app-photo-uploader.loaded .apu-prev {
    opacity: 1;
}

.app-photo-uploader.loaded .apu-icon {
    visibility: hidden;
    opacity: 0;
}

.app-photo-uploader.loaded:hover .apu-icon,
.app-photo-uploader.loaded:hover .apu-remove {
    visibility: visible;
    opacity: 1;
}

.app-photo-uploader.boxed {
    width: 100%;
    border-radius: 3px;
    border-width: 1px;
    border-color: #c8c8c8;
}

.app-photo-uploader.boxed .apu-prev {
    border-radius: 0;
    background-size: contain;
    background-position: center;
    width: 95%;
    height: 95%;
    max-width: 95%;
    max-height: 95%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.app-photo-uploader.boxed .apu-icon {
    border-radius: 0;
}

.app-photo-uploader.boxed .apu-remove {
    top: -10px;
    right: -10px;
}

.go-to-parent-arrow {
    display: flex;
    align-items: center;
    flex-direction: row;
}

.go-to-parent-arrow:hover {
    color: var(--dark-senary-color);
}

.go-to-parent-arrow i {
    font-size: 25px;
    margin-right: 10px;
}

/* File selector directive */
.fus1-label {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    padding: 8px 10px 5px;
    font-size: 15px;
    line-height: normal;
    color: #555555;
    outline: 0;
    border-radius: 3px;
    background-color: #fff;
    border: 1px solid #c8c8c8;
    -webkit-transition: border-color ease-in-out 0.15s;
    -moz-transition: border-color ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s;
    cursor: pointer;
}

.fus1-label .fus1-l-icon {
    margin-right: 5px;
    font-size: 16px;
}

.fus1-label .fus1-l-file-remover {
    position: absolute;
    z-index: 1;
    width: 20px;
    height: 20px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: #e30c0c;
    border-radius: 100%;
    top: -10px;
    right: -10px;
    font-size: 16px;
    line-height: 1.6;
    visibility: hidden;
    opacity: 0;
}

.fus1-label:hover .fus1-l-file-remover {
    visibility: visible;
    opacity: 1;
}

.fus1-label .fus1-l-file-remover:hover {
    background-color: var(--secondary-color);
}

.fus1-label .fus1-l-text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/*
*button dashboard
*/
.dashboard_menu_btn {
    margin: 0;
    padding: 0;
}

.button-long:hover .dashboard_menu_btn {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(133deg) brightness(110%) contrast(101%);
}

.dash_chart_no_results {
    position: absolute;
    top: 130px;
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
    flex-direction: column;
}

.dash_chart_no_results-container {
    width: 100px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dash_chart_no_results-header {
    font-size: 20px;
    margin-top: 5px;
    font-weight: 500;
}

.dash_chart_no_results-icon {
    font-size: 35px;
    color: #cbcbcb;
}

/*
*button long
*/
.button-long {
    background-color: #fff;
    border: 1px solid transparent;
    box-shadow: none;
    cursor: pointer;
    color: var(--dark-secondary-color);
    display: inline-block;
    font-family: inherit;
    font-size: 15px;
    font-weight: normal;
    height: 40px;
    letter-spacing: 0.01em;
    line-height: 1.6;
    margin-bottom: 0;
    min-width: 160px;
    outline: 0;
    padding: 9px 14px 22px;
    position: relative;
    text-shadow: none;
    text-align: center;
    transition: all ease-in-out 0.15s;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-transition: all ease-in-out 0.15s;
    -moz-transition: all ease-in-out 0.15s;
}

.button-long:hover {
    background-color: var(--secondary-color);
    color: #fff;
}

.button-long:active {
    transform: translateY(2px);
    -webkit-transform: translateY(2px);
    -moz-transform: translateY(2px);
}

.dark-mode .button-long {
    background-color: var(--dark-secondary-color);
    color: #fff;
}

.light-mode .button-long {
    background-color: var(--light-secondary-color);
    color: #fff;
}

/**
*border left
*/
.border-right {
    border-right: 2px solid #d3d4d5;
    height: 70%;
    right: 0px;
    top: 15%;
}

/**
*Color
*/
.text-color-blue {
    color: #0079c0;
}

/**
  *pagination
  */
.pagination {
    display: flex;
    flex-wrap: wrap;
}

.pb-button {
    align-items: center;
    background: #ffffff;
    border: 1px solid transparent;
    color: #00578c;
    cursor: pointer;
    display: inline-flex;
    font-size: 1rem;
    height: 2.2rem;
    justify-content: center;
    line-height: 1;
    margin-left: 0.2rem;
    width: 2.2rem;
}

.pb-button:hover {
    background: #cfcfcf;
    color: #1881c6;
}

.pb-button:disabled {
    background-color: #ebebeb;
    opacity: 1;
    cursor: auto;
}

.pagination-item {
    display: inline-block;
}

.pagination-item .active {
    background-color: #1881c6;
    color: #ffffff;
}

.pagination .pagination-item .icons {
    font-size: 1.3rem;
}

/**
 * App elements
 */
.app-card-panel {
    border-radius: 5px;
    position: relative;
    background-color: #fff;
    box-shadow: 1px 2px 9px rgba(0, 121, 192, 0.15);
}

.dark-mode .app-card-panel {
    position: relative;
    background-color: var(--dark-secondary-color);
    box-shadow: 1px 2px 9px rgba(0, 26, 41, 0.15);
}

.light-mode .app-card-panel {
    position: relative;
    background-color: transparent;
    box-shadow: 1px 2px 9px rgba(0, 26, 41, 0.15);
}

.app-table {
    border-radius: 5px;
}

.app-table .at-table {
    width: 100%;
}

.dark-mode .app-table {
    background-color: #242424;
}

.dark-mode .at-table {
    background-color: #242424;
    color: white;
}

.app-table .at-table th,
.app-table .at-table td {
    text-align: left;
    padding: 15px 20px;
    border-bottom: 1px solid #242424;
    font-size: 14px;
}

.light-mode .app-table .at-table th,
.light-mode .app-table .at-table td {
    text-align: left;
    padding: 10px 20px;
    border-bottom: 1px solid #ffffff;
    font-size: 14px;
}

.app-table .at-table th {
    position: relative;
    color: #ffffff;
}

.app-table .at-table th div div i {
    cursor: pointer;
    color: #9d9b9b;
}

.app-table .at-table th div div i:hover {
    cursor: pointer;
    color: #696868;
}

.dark-mode .app-table .at-table th {
    position: relative;
    color: #ffffff;
}

.light-mode .app-table .at-table th {
    position: relative;
    color: var(--light-color-text);
}

.app-table .at-table th:not(:first-child):before {
    position: absolute;
    content: "";
    width: 2px;
    top: 4px;
    bottom: 4px;
    left: 3px;
    background-color: var(--dark-tertiary-color);
}

.light-mode .app-table .at-table th:not(:first-child):before {
    background-color: #dddddd;
}

.dark-mode .at-table tr:nth-child(even) {
    background-color: #2c2c2c;
}

.light-mode .at-table tr:nth-child(even) {
    background-color: #f3f3f3;
}

.dark-mode .at-table tr:not(.at-heading):not(.at-no-results):hover {
    background-color: #494949;
    color: white;
}

.light-mode .at-table tr:not(.at-heading):not(.at-no-results):hover {
    background-color: #d9d9d9;
    color: black;
}

/*
* Styles KD
*/
/* Content Tabs */
.content-tabs .ct-nav {
    margin-bottom: 25px;
    border-bottom: 1px solid var(--dark-senary-color);
}

.ct-nav .ct-nav-item {
    padding: 10px 15px;
    line-height: 1;
    color: inherit;
    position: relative;
    display: inline-block;
    cursor: pointer;
    color: #858585;
}

.ct-nav .ct-nav-item:first-child {
    padding-left: 0;
}

.ct-nav .ct-nav-item:not(:last-child):after {
    content: "";
    position: absolute;
    top: 5px;
    bottom: 5px;
    right: 0;
    width: 1px;
    background-color: #ddd;
}

.ct-nav .ct-nav-item:before {
    content: "";
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: -1px;
    height: 3px;
    background-color: transparent;
}

.ct-nav .ct-nav-item:first-child:before {
    left: 0;
}

.ct-nav .ct-nav-item.active {
    color: var(--dark-quaternary-color);
}

.light-mode .ct-nav .ct-nav-item.active {
    color: var(--dark-quinary-color);
}

.dark-mode .ct-nav .ct-nav-item:hover:before,
.dark-mode .ct-nav .ct-nav-item.active:before {
    background-color: var(--dark-quaternary-color);
}

.light-mode .ct-nav .ct-nav-item:hover:before,
.light-mode .ct-nav .ct-nav-item.active:before {
    background-color: var(--light-secondary-color);
}

.ct-nav-ellipsis {
    display: inline-block;
    width: 145px;
}

.content-tabs .ct-tab {
    display: none;
}

.content-tabs .ct-tab.active {
    display: block;
}

/* Popup Modifications */
.popup .pop-action-bottom {
    margin: 10px -25px -25px;
    padding: 15px 25px;
}

.popup .app-photo-uploader {
    width: 75px;
    height: 75px;
}

.pop-advanced .popup-close-container {
    top: 25px;
    right: 25px;
    font-size: initial;
}

.popup .popup-close-container a:hover,
.popup .popup-close-container a:focus {
    color: var(--primary-color);
}

.dark-mode .popup .popup-close-container a:hover,
.dark-mode .popup .popup-close-container a:focus {
    color: var(--dark-primary-color);
}

.light-mode .popup .popup-close-container a:hover,
.light-mode .popup .popup-close-container a:focus {
    color: var(--dark-primary-color);
}

.pop-advanced .popup-close-container .button {
    width: 25px;
    height: 25px;
    line-height: 1;
    padding: 0;
    font-size: 25px;
}

.pop-action-bottom .button-transparent {
    border-color: transparent;
}

.pop-advanced .popup-close-container .button:hover {
    background-color: transparent !important;
    color: inherit;
}

/* Photo Uploader */
.app-photo-uploader.full-boxed {
    width: 100%;
    height: 200px;
    border-radius: 2px;
    border: 1px solid #c8c8c8;
}

.app-photo-uploader.full-boxed .apu-icon {
    border-radius: 0;
}

.app-photo-uploader.full-boxed .apu-prev {
    opacity: 1;
    background-position: center;
    border-radius: 0;
}

.app-photo-uploader.full-boxed .apu-remove {
    top: -5px;
    right: -5px;
}

/* Editor view card infos */
.card-info-list > div {
    margin-bottom: 10px;
    position: relative;
    padding-left: 25px;
}

.card-info-list .cil-label {
    font-weight: 600;
}

.card-info-list .cil-icon {
    display: inline-block;
    position: absolute;
    left: 0;
    width: 20px;
    text-align: center;
}

/* Quill Editor Overwrites */
.no-padding .ql-editor {
    padding: 0;
}

/* Static Page Layout */
.static-page-layout {
    max-width: 900px;
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}

.static-page-header {
    position: relative;
    /* margin-bottom: 30px; */
}

.static-page-header .sph-col-left,
.static-page-header .sph-col-right {
    width: 50%;
    position: relative;
}

.static-page-header .sph-col-left {
    z-index: 1;
    padding: 25px;
}

.static-page-header .sph-col-right:before {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    left: -50%;
    right: 0;
    width: 50%;
    background-color: #f5f5f5;
    z-index: 0;
    box-sizing: border-box;
    transform-origin: bottom left;
    transform: skew(-20deg) !important;
    pointer-events: none;
}

.static-page-header .sph-col-left h1 {
    font-size: 35px;
    line-height: 1.1;
}

.static-page-header .sph-col-left .sub-heading {
    font-size: 14px;
    color: #8d8d8d;
}

.static-page-header .sph-image {
    width: 100%;
    height: 340px;
    overflow: hidden;
}

.static-page-header .sph-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* General Helpers */
.w-500 {
    width: 500px !important;
}

.min-w-90 {
    min-width: 90px !important;
}

.min-w-650 {
    min-width: 650px !important;
}

.min-w-360 {
    min-width: 360px !important;
}

.hori-center {
    margin: 0 auto !important;
}

.no-pointers,
.no-pointers * {
    pointer-events: none !important;
}

.button-negative-actions {
    background-color: #e7e7e7;
    border-color: #e7e7e7;
}

.button-negative-actions:hover {
    color: #fff !important;
}

.top-mega-bar {
    display: none;
}

.app-menus {
    margin-bottom: 10px;
    text-align: right;
}

.light-mode .app-menus a:hover {
    color: var(--light-senary-color);
}

.dark-mode .app-menus a:hover {
    color: #d7d7d7;
}

.ac-title-container {
    justify-content: space-between;
    display: flex;
}

.at-logged-user-logo-only {
    display: none;
}

.at-logged-details {
    display: flex;
    flex-direction: row-reverse;
    color: white;
    margin-top: 25px;
    align-items: center;
}

.light-mode .at-logged-details {
    color: black;
}

.at-logged-details .at-lu-content .at-lu-details span {
    display: block;
    line-height: 1;
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.at-logged-details > div:not(:last-child) {
    margin-left: 13px;
}

.at-logged-details .at-lu-details span {
    display: block;
    line-height: 1;
    max-width: 200px;
    overflow: hidden;
    font-size: 18px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.at-logged-details .at-lu-details .at-lud-sub {
    font-size: 13px;
    font-weight: 200;
}

.at-logged-details .ve-circle-avatar {
    display: inline-block;
    width: 53px;
    height: 53px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 100%;
    overflow: hidden;
}

.cp-single-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.cp-single-details {
    margin-top: 5px;
    margin-bottom: 0;
    line-height: 1;
}

.cp-single-details-margin {
    margin-left: 15px;
}

.sc-container {
    display: flex;
    min-height: 650px;
    position: relative;
}

/*
* Error messages
*/
.ep-error-container-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60vh;
    margin: 0 auto;
    padding: 20px;
}

.ep-status-code-text {
    font-weight: bolder;
    font-size: 180px;
    color: #acacac;
}

.ep-error-page-background-container {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}

.ep-error-page-background-img {
    width: 100%;
    object-fit: cover;
}

.ep-error-container {
    flex: 1;
    margin-left: 25px;
}

.ep-error-message {
    font-size: 25px;
    font-weight: 700;
    color: #000000;
}

.ep-error-description {
    margin-top: 15px;
    color: #5c5c5c;
}

@media screen and (max-width: 480px) {
    .ep-status-code-text {
        font-size: 80px;
    }

    .ep-error-message {
        font-size: 18px;
    }

    .ep-error-description {
        font-size: 14px;
    }

    .ep-error-parent-container{
        flex-direction: column;
    }

    .ep-error-page-background-img {
        object-fit: cover;
        height: 250px;
    }

    .ep-error-page-background-container{
        bottom: 55px;
    }

    .ep-error-container-wrapper{
        height: 40vh;
    }
}

@media screen and (min-width: 481px) and (max-width: 768px) {
    .ep-status-code-text {
        font-size: 120px;
    }

    .ep-error-container-wrapper {
        flex-direction: column;
        text-align: center;
        height: auto;
    }

    .ep-error-container {
        margin: 0;
        margin-top: 15px;
    }

    .ep-error-message {
        font-size: 20px;
    }

    .ep-error-description {
        font-size: 16px;
    }

    .ep-error-page-background-img {
        object-fit: cover;
        height: 250px;
    }

    .ep-error-page-background-container{
        bottom: 55px;
    }
}

@media screen and (min-width: 481px) and (max-width: 768px) and (orientation: landscape) {
    .ep-error-container-wrapper{
        top: -70px;
        position: relative;
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px){

}


.sc-sub-container {
    min-height: 650px;
}

.sc-nav {
    margin-top: 10px;
}

.viewAsCompany-select-text {
    font-size: 15px;
    color: white;
    margin-right: 10px;
}

.light-mode .viewAsCompany-select-text {
    color: var(--light-color-text);
}

.view_as_company_mobile_view {
    display: none;
}

.left-top-bar-container {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: center;
}

.mobile-search-icon-container {
    display: none;
}


/***********************/
/**     Load More     **/
/***********************/

.dc-load-more-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.dc-loading {
    position: relative;
    left: 65px;
}

.dc-no-more-items {
    text-align: center;
    padding: 10px;
}

.dc-avatar-cover {
    display: flex;

}

.dc-avatar-cover > img {
    object-fit: cover;
    object-position: top center;
}

/*****************************
 **  LV Data Loader Styles  **
 *****************************/

.data-loader-wrap.data-loader-transparent.dc-data-loader .data-loader div {
    background: var(--dcui-primary-color);
}

.data-loader-wrap.data-loader-transparent.dc-data-loader {
    background: transparent;
}

.data-loader-wrap.dc-data-loader .data-loader div {
    background: var(--dcui-primary-color);
}

.data-loader-wrap.dc-data-loader {
    background: inherit;
}


/*****************************
**     MIsc      **
*******************************/

.dcui-icon-control.xp-input-filed-no-outline, .dcui-form-control.xp-input-filed-no-outline {
    border: 0 !important;
}

.dcui-icon-control.xp-input-filed-no-outline, .dcui-form-control.xp-input-filed-no-outline:focus {
    border: 0 !important;
    box-shadow: none;
}

/***********************/
/**   Global Search  **/
/***********************/

.dc-global-search-close-popup {
    position: absolute;
    background-color: transparent;
    top: 100px;
    left: 50%;
    z-index: 999 !important;
}

.dc-global-search-close-popup .close-text a i {
    transform: rotate(0deg);
    transition: all 0.5s ease-in-out;
}

.dc-global-search-close-popup .close-text a i:hover {
    transform: rotate(180deg);
}

.dc-global-search-close-popup .close-text {
    font-size: 25px;
    color: rgba(129, 129, 129, 1);
}

.dc-global-search-close-popup .close-text {
    font-size: 25px;
    color: rgba(129, 129, 129, 1);
}

.dc-global-search-container {
    position: absolute;
    background-color: #fff;
    min-width: 780px;
    max-width: 95%;
    top: 150px;
    left: 50%;
    transform: translate(-50%, 0);
    padding: 8px;
    box-shadow: 0px 1px 16px -7px rgba(66, 66, 66, 0.25);
    border-radius: var(--dcui-field-radius);
    overflow: hidden;
    z-index: 999 !important;
}

.dc-global-search-control.dcui-icon-control .dcui-ic-icon,
.dc-global-search-control .dcui-form-control,
.dc-global-search-control .dcui-form-control:focus {
    background-color: transparent;
    font-size: 20px;
}

.dc-global-search-icon-container img {
    opacity: 0.3;
}

.dc-global-search-app-icon {
    display: flex;
}

.dc-global-search-result-text-container {
    margin-left: 15px;
    flex: 1;
}

.dc-global-search-app-icon.large img {
    width: 60px;
}

.dc-global-search-app-icon.small img {
    width: 35px;
}

.dc-global-search-app-name {
    font-size: 20px;
    color: black;
}

.dc-global-search-nav-app-name {

}

.dc-global-search-nav-item {
    margin-bottom: 5px;
    padding: 5px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.dc-global-search-nav-item.selected {
    background-color: #d7efff;
}

.dc-global-search-nav-app-name-container {
    flex: 1;
    margin-left: 10px;
}

.dc-search-result-container .dc-search-result-content {
    display: flex;
    height: 500px;
}

.dc-search-result-container .dc-global-search-nav-container {
    width: 225px;
    padding-right: 12px;
    border-right: 1px solid #f5f3f3;
}

.dc-search-result-container .dc-global-search-results {
    flex: 1;
    padding: 20px;
}

.dc-search-result-container .dc-search-result-title {
    font-size: 15px;
    font-weight: 500;
    line-height: 18px;
    text-align: left;
}

.dc-search-result-container .dc-search-result-text {
    font-size: 26px;
    font-weight: 500;
    line-height: 31.2px;
    text-align: left;
    color: rgba(0, 0, 0, 1);
}

.dc-global-search-container .dc-search-container {
    height: 45px;
    background-color: rgba(242, 242, 242, 0.5);
    display: flex;
    align-items: center;
    padding-right: 5px;
}

.dc-global-search-container .dc-search-result-container {
    margin-top: 10px;
}

.dc-search-no-result-container-data-loader-container {
    height: 500px;
    position: relative;
}

.dc-global-search-container .dc-search-no-result-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 450px;
    margin: auto;
}

.dc-global-search-no-results-container {
    flex: 1;
    display: flex;
    max-width: 450px;
    flex-wrap: wrap;
    flex-direction: column;
}

.dc-global-search-no-results-container .dc-no-result-title {
    font-size: 30px;
    font-weight: 700;
    line-height: 36px;
    text-align: left;
}

.dc-global-search-no-results-container .dc-no-result-text {
    font-size: 14px;
    font-weight: 400;
    line-height: 16.8px;
    text-align: left;
    flex: 1;
    white-space: normal; /* Allow text to wrap */
    word-wrap: break-word; /* Break long words */
    overflow-wrap: break-word; /* Ensures compatibility with all browsers */
}

.dc-global-search-icon-container {
    min-width: 135px;
}

.dc-search-results-table {
    max-height: 400px;
}

/*
* Media Queries
*/
@media screen and (min-width: 1921px) {
    .ve-full-page-knife-cut {
        max-height: 1200px;
    }

    #app-sidebar {
        left: calc((100% - var(--content-guard)) / 2);
    }
}

@media screen and (max-width: 1679px) {
    .kc-columns .kc-col-left {
        padding-left: 8.5%;
    }

    .kc-columns .kc-col-right {
        padding-right: 8.5%;
    }

    #ve-page-auth .pa-left-content {
        max-width: 400px;
    }

    .bg-full-image .graphic-circuit-lines {
        width: 140px;
        top: calc(50% - 160px);
    }

    .auth-card-panel {
        width: 460px;
    }

    .auth-card-panel .acp-boxer {
        padding: 30px;
    }

    #app-container {
        padding: 50px 75px 20px;
    }

    #app-container::before {
        top: 40px;
        left: -150px;
        width: 218px;
        height: 100px;
    }
}

@media screen and (max-width: 1441px) {
    #app-container::before {
        top: 40px;
        left: -150px;
        width: 217px;
        height: 100px;
    }
}

@media screen and (max-width: 1025px) {
    #app-container::before {
        top: 40px;
        left: -150px;
        width: 200px;
        height: 100px;
    }
}

@media screen and (max-width: 991px) {

    .kc-columns .kc-col-left,
    .kc-columns .kc-col-right {
        width: 100%;
    }

    .kc-columns .kc-col-right .kc-skew {
        display: none;
    }

    .dc-global-search-container {
        min-width: 85%;
    }
}


/*
* Mobile View
*/

@media screen and (min-width: 320px) and (max-width: 766px) and (orientation: portrait) {
    .auth-card-panel {
        width: 100%;
    }

    .auth-card-panel .auth-logo {
        text-align: center;
        margin-bottom: 16px;
        height: 100px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .dark-mode .auth-card-panel .acp-boxer,
    .light-mode .auth-card-panel .acp-boxer {
        background-color: transparent;
        padding: 40px;
        border-radius: 5px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
        color: var(--color-text);
    }

    .light-mode .auth-card-panel .acp-boxer {
        box-shadow: none;
    }

    .dark-mode .auth-card-panel .acp-boxer .form-group {
        background-color: transparent;
    }

    .side-mega-menu {
    }

    .side-mega-menu .side-mega-container {
        padding: 30px 20px 0;
    }

    .side-mega-menu .side-mega-container .side-mega-top {
    }

    .side-mega-menu .side-mega-container .side-mega-middle-container {
        flex-direction: column;
        align-items: center;
        height: 80%;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }

    .side-mega-menu .side-mega-container .side-mega-middle-container .side-mega-middle-boxes {
        margin-right: 0;
        flex: 0 0 15%;
        width: 100%;
        height: 100px;
    }

    .side-mega-menu .side-mega-container .side-mega-top {
        align-items: flex-start;
    }

    #app-sidebar {
        display: none;
    }

    #app-container {
        position: relative;
        margin-left: 0;
        margin-top: var(--topbar-height);
        display: block;
        min-height: 100%;
        padding: 25px 25px;
    }

    #app-topbar {
        padding-left: 15px;
        background-color: #181818 !important;
    }

    .top-mega-bar {
        display: block;
        color: white;
        height: 50px;
        width: 50px;
    }

    .tb-mega-menu-icon {
        height: 100%;
        font-size: 30px;
        text-align: center;
        line-height: 58px;
    }

    .app-card-panel .app-table {
        overflow-x: auto;
    }

    .app-menus {
        text-align: left;
    }

    .ac-title-container {
        flex-direction: column;
    }

    .app-menus div {
        margin-top: 10px;
        width: 100%;
    }

    /*.popup {*/
    /*  width: 100%;*/
    /*  height: 100%;*/
    /*  min-width: 0;*/
    /*  top: 50%;*/
    /*  transform: translate(-50%, -50%);*/
    /*}*/
    .at-logged-user {
        display: none;
    }

    .at-logged-user-logo-only {
        display: block;
    }

    .at-profile_menu {
        display: flex;
        flex-direction: column;
        height: 80%;
        color: white;
    }

    .at-profile_sub_menu {
        flex: 1;
    }

    .at-profile_box {
        background-color: #4d4d4d;
        padding: 25px;
        color: white;
        flex-wrap: nowrap;
        display: flex;
        justify-content: space-between;
        font-size: 17px;
        position: relative;
    }

    .at-profile_box:hover {
        background-color: black;
    }

    .app-table .at-table th,
    .app-table .at-table td {
        white-space: nowrap;
    }

    .cp-single-container {
        flex-direction: column;
    }

    .cp-single-details {
        display: flex;
        flex-direction: column;
    }

    .cp-single-status {
        width: fit-content;
    }

    .cp-menu-container {
        margin-top: 15px;
        display: flex;
    }

    .cp-menu-tabs {
        margin-top: 15px;
        overflow-y: hidden;
        overflow-x: auto;
    }

    .cp-single-details-margin {
        margin-top: 10px;
    }

    .cp-single-details-margin h2 {
        overflow-wrap: anywhere;
    }

    .cp-single-wrap .app-photo-uploader {
        width: 70px;
        height: 70px;
        min-width: 70px !important;
    }

    .cp-single-userlist-container {
        height: 278px;
        overflow-y: auto;
    }

    #useraddform {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    #useraddform .content-tabs {
        height: 80%;
    }

    #useraddform .pop-action-bottom {
        flex: 0 0 130px;
    }

    #useraddform .content-tabs .ct-tab.active {
        display: block;
        height: 80%;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    #usereditform {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    #usereditform .content-tabs {
        height: 80%;
    }

    #usereditform .pop-action-bottom {
        flex: 0 0 130px;
    }

    #usereditform .content-tabs .ct-tab.active {
        display: block;
        height: 80%;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .app-version {
        position: absolute;
        right: 5px;
        top: -25px;
        font-size: 15px;
        color: #8b8b8b;
    }

    .sc-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .se-nav {
        display: flex;
        width: 100%;
        overflow-y: hidden;
        overflow-x: auto;
    }

    .sc-sub-container {
        min-height: 650px;
        width: 100%;
    }

    .sc-nav {
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 0 5px;
    }

    .sc-nav-container {
        margin-bottom: 15px;
    }

    .ss-app-container {
        width: 100%;
    }

    .view_as_company_mobile_view {
        display: flex;
    }

    .view_as_company_desktop_view {
        display: none;
    }

    .mobile-drop-down-close {
        display: flex;
        justify-content: flex-end;
    }

    .mobile-drop-down-close .close-icon {
        font-size: 30px;
        color: var(--quaternary-color);
    }

    .mobile-drop-down-close .close-icon :hover {
        cursor: pointer;
        color: var(--quinary-color);
    }

    .mobile-vw-search-container {
        margin-top: 15px;
    }

    .mb-vw-title {
        font-size: 25px;
        font-weight: 400;
        color: white;
    }

    .mobile-vw-container {
        width: 100%;
    }

    .mobile-view-container {
        background-color: #4d4d4d;
        padding: 0 15px;
        margin-top: 10px;
        display: flex;
        height: 60px !important;
        justify-content: space-between;
    }

    .mobile-vw-icon {
        color: white;
    }

    .mb-p-container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 90%;
    }

    .mb-switch-container {
        cursor: pointer;
        height: 38px;
        line-height: 30px;
        padding: 5px 15px;
        text-align: center;
        margin-top: 5px;
        font-weight: 300;
        color: white;
        background: #454545;
    }

    .mobile-view-container:hover {
        background-color: #000;
    }

    .sc-nav-container {
        max-width: none !important;
        width: 100% !important;
    }

    .se-nav .se-nav-item > a {
        display: flex;
        padding: 13px 5px;
        text-align: center;
        width: 110px;
        height: 50px;
    }

    .left-top-bar-container {
        flex: 1;
        width: 100%;
        display: flex;
        justify-content: flex-start;
    }

    .search-container {
        display: none;
    }

    .mobile-search-icon-container {
        display: flex;
        font-size: 23px;
        line-height: 3.2;
        position: relative;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 50px;
        text-align: center;
        cursor: pointer;
    }

    .megaSearch-no-results-text {
        left: 88px;
    }

    .megaSearch-main-item {
        margin-bottom: 15px;
        margin-top: 15px;
    }

    .megaSearch-description {
        margin-top: 5px;
        margin-bottom: 15px;
    }

    .at-elem-separator {
        display: none;
    }

    #notification-icon {
        display: none;
    }

    .mark-as-red {
        font-size: 15px;
    }

    .no-notification {
        position: relative;
        top: 15px;
        height: 5vh;
    }

    .notification-container-mobile {
        max-height: 65vh;
    }

    .viewall-ul {
        position: relative;
        top: 10px;
    }

    .view-all-notifcations {
        margin-top: 10px;
        text-decoration: none;
    }
} .hsy-tooltip {
    position: relative;
    font-family: inherit;
    font-size: 10px;
  }
  .hsy-tooltip>.outlet,
  .hsy-tooltip>.tooltip {
    font-size: 1.4em;
  }
  .hsy-tooltip>.tooltip {
    display: none;
    position: absolute;
    background-color: var(--dcui-secondary-color);
    color: #fff;
    border-radius: 3px;
    border: 0px;
    outline: none;
    padding: 10px 15px;
    z-index: 100;
  }
  .hsy-tooltip .arrow {
    position: absolute;
    width: 0px;
    height: 0px;
    border-style: solid;
  } 
.user-discard-btn{
    width: 42%;
}
.user-save-btn{
    width: 55%;
}

.popup.pop-card-panel.user-popup{
   width: 450px;
}
.user-info-container{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.user-icon{
    object-position: top;
}

.popup-overlay.user-remove-overlay{
    z-index: 1000 !important;
}