/* 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: center;
}

.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;
!important;
}

.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 */
}
 .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-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;
}

.overflow-visible {
    overflow: visible !important;
}


.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: -2px;
    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;
}

/*v-deep is a vue css selector*/
.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: #76baff29;
    --dcui-calendar-range-text-color: #3891eb;
    --dcui-calendar-range-radius: 100%;
    --dcui-calendar-day-hover-bg-color: #3891eb;
    --dcui-calendar-day-hover-text-color: #edfff9;
    --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 10px 8px;
    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);
    border-radius: 7px;
}

.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);
    color: var(--dcui-calendar-day-hover-text-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;
}
 :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;
}