@charset "utf-8";

.webbpm [id="page"] > div > div > [page-object] {
    padding: 0 40px;
}

.webbpm #dashboard {
    padding: 15px 40px 0 40px;
}

.webbpm .title {
    font-size: 24px;
    font-family: 'SegoeSB';
    padding: 10px 0 0 0;
}

.webbpm .sub-header {
    color: #fff;
    font-weight: normal;
    padding: 0 20px;
    margin-top: 10px;
    border-radius: 20px;
    background: #4c5969;
}

.webbpm .sub-header > .form-group {
    padding: 10px 0;
    margin-bottom: 0;
}

.webbpm .sub-header>div > div:last-of-type {
    font-size: 18px;
    padding: 0;
}

.webbpm .form-signup input.ng-invalid.ng-touched,
.webbpm .form-signup input.ng-invalid.ng-touched ~ .input-group-append > .input-group-text,
.webbpm .form-signup input.ng-invalid.ng-dirty,
.webbpm .form-signup input.ng-invalid.ng-dirty ~ .input-group-append > .input-group-text {
    border-color: #1c92ea !important;
}

.webbpm .form-signup .msg-alert {
    color: #1c92ea;
}

.webbpm input[type="text"],
.webbpm input[type="date"],
.webbpm input[type="email"],
.webbpm input[type="password"],
.webbpm input[type="number"],
.webbpm input.form-control,
.webbpm textarea,
.webbpm select,
.webbpm .selectize-control.single .selectize-input,
.webbpm .multi.plugin-remove_button .selectize-input {
    color: #404954;
    font-size: 16px;
    min-height: 38px;
    padding: 6px 8px;
    border: 1px solid #e3e6ed;
    border-radius: 8px;
    background-color: #fff;
    background-image: none;
    box-shadow: none;
}

.webbpm .wb-touched.wb-invalid .form-control,
.webbpm .wb-touched.wb-invalid .form-control:focus,
.webbpm .wb-touched.wb-invalid input.form-control,
.webbpm .wb-touched.wb-invalid input.form-control:focus,
.webbpm .wb-touched.wb-invalid .input-group-addon,
.webbpm .wb-touched.wb-invalid .input-group-addon:focus,
.webbpm .wb-touched.wb-invalid .selectize-input,
.webbpm .wb-touched.wb-invalid .selectize-input:focus {
    border-color: #1c92ea !important;
    box-shadow: none !important;
}

.webbpm select option:checked {
    color: #1c92ea;
}

.webbpm .input-group input[name="password"],
.webbpm .input-group input[name="confirmPassword"],
.webbpm .date input[type="text"] {
    border-right: 0 ;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0 ;
}

.webbpm .input-group input[name="password"] ~ .input-group-append > .input-group-text,
.webbpm .input-group input[name="confirmPassword"] ~ .input-group-append > .input-group-text,
.webbpm .date input ~ .input-group-addon {
    color: #404954;
    border-color: #e3e6ed;
    border-radius: 8px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;    
    background-color: transparent;
}

.webbpm .input-group input[name="password"] ~ .input-group-append > .input-group-text,
.webbpm .input-group input[name="confirmPassword"] ~ .input-group-append > .input-group-text,
.webbpm .date input ~ .input-group-addon {
    color: #404954;
    border-color: #e3e6ed;
    border-radius: 8px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;    
    background-color: transparent;
}

.webbpm international-phone-number .input-group-addon.flagInput {
    border: 0;
    background-color: transparent;
}

.webbpm international-phone-number .input-group-addon.flagInput .btn {
    border: 1px solid #e3e6ed;
    border-right: 0;
    border-radius: 10px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;      
}

.webbpm international-phone-number .input-group-addon.flagInput ~ input {
    border-right: 1px solid #e3e6ed;
    border-radius: 10px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;    
}

.webbpm .selectize-dropdown {
    box-shadow: none;
}

.webbpm .selectize-dropdown-content {
    border: 1px solid #e3e6ed;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 8px 12px rgb(77 72 91 / 5%), 0 6px 10px rgb(77 72 91 / 0%);
}

.webbpm .selectize-dropdown .active {
    color: #1c92ea;
    background-color: transparent;
}

.webbpm .form-group > label,
.webbpm .form-group > div {
    display: inline-block;
    vertical-align: top;
}
.webbpm .width-full .form-group > label, 
.webbpm .width-full .form-group > div {
    display: table-cell;
}

.webbpm .form-control {
    background-color: inherit;
}

.webbpm .form-control[disabled],
.webbpm .form-control[readonly],
.webbpm .date .form-control[disabled] ~ .input-group-addon,
.webbpm .date .form-control[readonly] ~ .input-group-addon,
.webbpm fieldset[disabled] .form-control,
.webbpm .selectize-control .selectize-input.disabled {
    background-color: #f5f7fa;  
}

.webbpm .selectize-control.form-control {
    min-height: 38px;
}

.webbpm .selectize-control.single .selectize-input > .item {
    line-height: normal;
}

.webbpm .selectize-control.single .selectize-input input {
    line-height: normal !important;
    border-radius: 0;
}

.webbpm drop-down-button .dropdown-menu.show {
    border: 1px solid #e3e6ed;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 8px 12px rgb(77 72 91 / 5%), 0 6px 10px rgb(77 72 91 / 0%);
}

.webbpm drop-down-button .dropdown-menu.show .btn {
    padding-top: 4px;
    padding-bottom: 4px;
    border: 0;
    box-shadow: none;
}

.webbpm .selectize-dropdown-content {
    font-size: 16px;
}

.webbpm .selectize-dropdown .more_values {
    color: #404954;
    background-color: #f0f7fd;
}

/*----------------- Button ---------------- */
.webbpm .btn {
    font-size: 16px;
    font-family: 'SegoeSB';
    padding: 6px 14px;
    margin-bottom: 0;
    border-radius: 20px;
}

.webbpm .btn:focus,
.webbpm .btn:active:focus {
    box-shadow: none !important;
}

.webbpm .btn-main {
    border-color: transparent !important;
    background: transparent !important;
}

.webbpm .btn-main > * > .btn,
.webbpm .btn-primary {
    color: #fff !important;
    border-color: #1c92ea;
    background: #1c92ea;
    box-shadow: 0px 0px 6px 2px rgb(77 72 91 / 6%);
}
.webbpm .btn-main > * > .btn:not(:disabled):not(.disabled):hover,
.webbpm .btn-main > * > .btn:not(:disabled):not(.disabled):active,
.webbpm .btn-primary:hover,
.webbpm .btn-primary:active {
    border-color: #1b84d2;
    background: #1b84d2;
}
.webbpm .btn-main > * > .btn:not(:disabled):not(.disabled):focus,
.webbpm .btn-primary:focus {
    border-color: #1b84d2;
    background: #1b84d2;
    box-shadow: none;
}

.webbpm .btn-secondary,
.webbpm .btn-default {
    color: #404954;
    border: 1px solid #e3e6ed;
    background: #fff;
    box-shadow: 0px 0px 6px 2px rgb(77 72 91 / 6%);
}
.webbpm .btn-secondary:not(:disabled):not(.disabled):hover,
.webbpm .btn-secondary:not(:disabled):not(.disabled):active,
.webbpm .btn-default:not(:disabled):not(.disabled):hover,
.webbpm .btn-default:not(:disabled):not(.disabled):active {
    color: #1c92ea;
    border-color: #e3e6ed;
    background-color: #fff;
}
.webbpm .btn-secondary:not(:disabled):not(.disabled):focus,
.webbpm .btn-default:not(:disabled):not(.disabled):focus {
    border-color: #e3e6ed;
    background-color: #fff;
    box-shadow: none;
}

.webbpm .btn.disabled,
.webbpm .btn:disabled {
    color: #666;
    border-color: #f3f3f3;
    background-color: #f3f3f3;
    box-shadow: none;
}

.webbpm .btn.btn-primary.disabled,
.webbpm .btn.btn-primary:disabled,
.webbpm .btn-main .btn.disabled,
.webbpm .btn-main .btn:disabled {
    color: rgba(255, 255, 255, 0.8) !important;
    border-color: #1c92ea;
    background-color: #1c92ea;
    box-shadow: none;
}

.webbpm ag-grid-angular .state-btn-edit,
.webbpm ag-grid-angular .state-btn-delete {
    color: #1c92ea !important;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.webbpm button.close {
    outline: none;
}
/*---------------- end - Button -------------- */

/*----------------- Bread-crumb -------------- */
.webbpm bread-crumb {
    display: flex;
    flex-direction: column;
    max-width: 800px;
    margin-top: 20px;
}

.webbpm bread-crumb .status_bar {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: stretch;
}

.webbpm bread-crumb .status_bar .crumb-element {
    color: #fff;
    font-size: 14px;
    padding: 4px 15px;
    background-color: #4c5969;
    border-radius: 20px;
    z-index: 1;
}

.webbpm bread-crumb .status_bar > div + div {
    position: relative;
    display: flex;
    justify-content: end;
    flex: 1;
}
.webbpm bread-crumb .status_bar > div + div::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    background-color: #4c5969;
}

.webbpm bread-crumb .status_bar > div.active ~ div::before {
    background-color: #e3e6ed;
}

.webbpm bread-crumb .status_bar > div.active .crumb-element {
    background-color: #1c92ea;
}

.webbpm bread-crumb .status_bar > div.active ~ div .crumb-element {
    color: #989fa8;
    background-color: #e3e6ed;
}
/*--------------- end Bread-crumb ------------ */

.webbpm grid-v2-with-project-defined-sidebar,
.webbpm in-memory-route-param-filter-grid {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.webbpm .container-inside > div > div > grid,
.webbpm .container-inside > div > div > grid-v2-with-project-defined-sidebar{
    height: auto !important;
    flex: 1 1 auto;
    overflow: hidden;
}

.webbpm ag-grid-angular .ag-body-viewport,
.webbpm ag-grid-angular .ag-row-odd,
.webbpm ag-grid-angular .ag-row-even {
    background-color: transparent;
}

.webbpm ag-grid-angular .ag-side-bar {
    border: 0;
    background-color: transparent;
}

.webbpm ag-grid-angular .ag-header-cell {
    line-height: 40px;
    padding: 0 10px;
    border: 0;
}
.webbpm ag-grid-angular .ag-header-cell::after,
.webbpm ag-grid-angular .ag-header-group-cell::after {
    border-color: transparent;
}

.webbpm ag-grid-angular {
    font-family: 'Segoe';
    font-weight: normal;
}

.webbpm ag-grid-angular .ag-header {
    border: 0;
    border-radius: 12px;
    background: #f5f7fa;
}

.webbpm ag-grid-angular .ag-header-row {
    color: #404954;
    font-family: 'SegoeSB';
    font-size: 14px;
    font-weight: normal;
}

.webbpm ag-grid-angular .grid-filter-hide .ag-floating-filter-body,
.webbpm ag-grid-angular .grid-filter-hide .ag-floating-filter-button {
    display: none;
}

.webbpm ag-grid-angular .ag-header-group-cell {
    font-family: 'SegoeB';
    font-size: 16px;
}

.webbpm ag-grid-angular .ag-header-cell>.ag-cell-label-container>.ag-header-cell-label>.ag-header-cell-text {
    white-space: nowrap;
}

.webbpm ag-grid-angular .ag-header .ag-floating-filter-body input {
    font-family: 'Segoe';
    font-size: 14px;
    min-height: 20px;
    padding: 2px;
    border: 1px solid #e3e6ed;
    border-radius: 4px;
    background: transparent;
}

.webbpm ag-grid-angular .ag-root,
.webbpm ag-grid-angular .ag-header-row {
    border: 0;
}

.webbpm ag-grid-angular .ag-root {
    position: static;
}

.webbpm ag-grid-angular .ag-row {
    border-color: #e3e6ed;
}
.webbpm ag-grid-angular .ag-row::before {
    display: none;
}

.webbpm ag-grid-angular .ag-row:not(.ag-row-first) {
    border-width: 1px 0 0;
    border-style: solid;
}
.webbpm ag-grid-angular .ag-row-last:not(.ag-row-first) {
    border-width: 1px 0;
}

.webbpm ag-grid-angular .ag-row.ag-row-odd,
.webbpm ag-grid-angular .ag-row.ag-row-selected {
    background-color: inherit !important;
}

.webbpm ag-grid-angular .ag-row.ag-row-selected .ag-cell {
    color: #1c92ea;
}

.webbpm ag-grid-angular .ag-body-viewport .ag-row.ag-row-hover {
    border-radius: 10px;
}
.webbpm ag-grid-angular .ag-body-viewport .ag-row.ag-row-hover,
.webbpm ag-grid-angular .ag-body-viewport .ag-row.ag-row-hover .ag-cell {
    background-color: #f9f9f9 !important;
}

.webbpm ag-grid-angular .ag-body-viewport .ag-row.ag-row-hover:not(.ag-full-width-row)::before,
.webbpm ag-grid-angular .ag-body-viewport .ag-row.ag-row-hover.ag-full-width-row.ag-row-group::before {
    background-color: transparent;
}

.webbpm ag-grid-angular .ag-row.ag-row-hover,
.webbpm ag-grid-angular .ag-row.ag-row-hover + .ag-row {
    border-color: transparent;
}

.webbpm ag-grid-angular .ag-row .ag-cell {
    display: inline-flex;
    color: #404954;
    font-size: 16px;
    padding: 0 10px;
    border: 1px solid transparent;
}

.webbpm ag-grid-angular .ag-row .ag-cell.webbpm-checkbox-grid-column {
    justify-content: center;
}

.webbpm ag-grid-angular .ag-row .ag-cell .ag-cell-wrapper {
    flex: 1 1 auto;
    overflow: hidden;
}

.webbpm ag-grid-angular .ag-row .ag-cell.ag-cell-last-left-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell) {
    border-right: 0;
}

.webbpm ag-grid-angular .ag-pinned-left-floating-bottom:not(.ag-hidden) .ag-row,
.webbpm ag-grid-angular .ag-pinned-left-floating-bottom:not(.ag-hidden) ~ .ag-floating-bottom-viewport {
    border: 0;
    border-radius: 12px;
    background: #f0f7fd;
    overflow-y: auto !important;
}

.webbpm ag-grid-angular .ag-pinned-left-floating-bottom:not(.ag-hidden) .ag-row {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.webbpm ag-grid-angular .ag-pinned-left-floating-bottom:not(.ag-hidden) ~ .ag-floating-bottom-viewport {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.webbpm ag-grid-angular .ag-floating-bottom-container .ag-row {
    border: 0;
    border-radius: 12px;
    background: #f0f7fd;
    overflow-y: auto !important;
}

.webbpm ag-grid-angular .ag-cell.ag-cell-focus.ag-cell-inline-editing {
    height: 100%;
}

.webbpm ag-grid-angular .ag-cell.ag-cell-focus.ag-cell-inline-editing input {
    font-size: 16px; 
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.webbpm ag-grid-angular .ag-paging-panel {
    color: #404954;
    font-size: 14px;
    border: 0;
    border-radius: 12px;
    background: #f5f7fa;
}

.webbpm ag-grid-angular .ag-paging-panel .ag-paging-button {
    display: flex;
    width: 32px;
    height: 32px;
    border: 1px solid #e3e6ed;
    border-radius: 16px;
    box-shadow: 0px 0px 6px 2px rgb(77 72 91 / 6%);
}
.webbpm ag-grid-angular .ag-paging-panel .ag-paging-button:not(:disabled) {
    opacity: 1;
}

.webbpm ag-grid-angular .ag-paging-panel .ag-paging-button > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.webbpm ag-grid-angular .ag-paging-panel .ag-paging-button + .ag-paging-button {
    margin-left: 8px;
}

.webbpm ag-grid-angular .ag-paging-panel .ag-paging-button[ref="btPrevious"] {
    margin-right: 16px;
}
.webbpm ag-grid-angular .ag-paging-panel .ag-paging-button[ref="btNext"]{
    margin-left: 16px;
}

.webbpm ag-grid-angular .ag-floating-bottom {
    border-top: 0;
    overflow-y: auto !important;
}

.webbpm ag-grid-angular .ag-floating-bottom-container .ag-cell {
    display: flex;
    align-items: center;
}

.webbpm ag-grid-angular .ag-floating-bottom-container input {
    color: #404954;
    font-family: 'SegoeSB';
    font-size: 16px;
    height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.webbpm ag-grid-angular .ag-header-cell-menu-button .ag-icon-menu {
    height: 25px;
}

.webbpm .grid-setting-icon {
    width: 16px;
    height: 25px;
    right: 12px;
    padding: 0;
    background-position: center;
}

.webbpm .grid-mtm {
    width: 46%;
}
.webbpm .grid-mtm + .many-to-many-move-buttons {
    width: 8%;
}
.webbpm .grid-mtm + .many-to-many-move-buttons button.btn {
    width: 100%;
}

.webbpm ag-grid-angular .ag-overlay-loading-center {
    border: 1px solid #e3e6ed;
    box-shadow: 0px 0px 6px 2px rgb(77 72 91 / 6%);
}

.webbpm editable-grid ag-grid-angular .ag-pinned-left-cols-container:not(.ag-hidden) > .ag-row.ag-row-selected,
.webbpm editable-grid ag-grid-angular .ag-pinned-left-cols-container:not(.ag-hidden) > .ag-row.ag-row-hover {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.webbpm editable-grid ag-grid-angular .ag-pinned-left-cols-container:not(.ag-hidden) + .ag-center-cols-clipper > div > div > .ag-row.ag-row-selected,
.webbpm editable-grid ag-grid-angular .ag-pinned-left-cols-container:not(.ag-hidden) + .ag-center-cols-clipper > div > div > .ag-row.ag-row-hover {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.webbpm editable-grid ag-grid-angular .ag-pinned-left-cols-container:not(.ag-hidden) > .ag-row.ag-row-first,
.webbpm editable-grid ag-grid-angular .ag-pinned-left-cols-container:not(.ag-hidden) + .ag-center-cols-clipper > div > div > .ag-row.ag-row-first {
    border-width:  1px 0 0 0;
}


.webbpm editable-grid ag-grid-angular .ag-pinned-left-cols-container:not(.ag-hidden) > .ag-row:not(.ag-row-first),
.webbpm editable-grid ag-grid-angular .ag-pinned-left-cols-container:not(.ag-hidden) + .ag-center-cols-clipper > div > div > .ag-row:not(.ag-row-first) {
    border-width:  1px 0 0 0;
}

.webbpm editable-grid ag-grid-angular .ag-floating-bottom .ag-row,
.webbpm editable-grid ag-grid-angular .ag-pinned-left-cols-container:not(.ag-hidden) > .ag-row-hover,
.webbpm editable-grid ag-grid-angular .ag-pinned-left-cols-container:not(.ag-hidden) + .ag-center-cols-clipper > div > div > .ag-row-hover {
    border-color: transparent;
}

.webbpm editable-grid ag-grid-angular .ag-floating-bottom {
    margin-top: 2px;
    border: 0;
    border-radius: 10px;
    background-color: #f0f7fd;
}

.webbpm editable-grid ag-grid-angular .ag-cell-wrapper {
    height: 100%;
}

.webbpm editable-grid ag-grid-angular .ag-row.ag-row-first {
    border-style: solid;
    border-width: 0;
    border-color: transparent;
}

.webbpm editable-grid ag-grid-angular .ag-cell input {
    padding: 0;
    border-color: transparent !important;
    background-color: transparent;
    box-shadow: none;
}
.webbpm editable-grid ag-grid-angular .ag-cell input:focus {
    border-color: transparent !important;
    box-shadow: none !important;
}
.webbpm editable-grid ag-grid-angular .ag-cell.ag-cell-value.wb-invalid {
    border-color: transparent;
}

.webbpm editable-grid ag-grid-angular .ag-cell-inline-editing {
    background-color: transparent;
}

.webbpm editable-grid ag-grid-angular check-box-grid-editor .form-group {
    margin-bottom: 0;
}

.webbpm editable-grid ag-grid-angular check-box-grid-editor .form-group > label {
    display: flex;
    align-items: center;
    padding-top: 0;
}

.webbpm editable-grid  ag-grid-angular .ag-body-viewport .ag-row .ag-cell.ag-cell-inline-editing {
    border: 0 !important;
    background-color: #f0f7fd !important;
}

.webbpm editable-grid ag-grid-angular .ag-popup-editor {    
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent;
    box-shadow: none !important;
}

.webbpm editable-grid ag-grid-angular .ag-popup-editor .form-group,
.webbpm editable-grid ag-grid-angular number-field-grid-editor .form-group,
.webbpm editable-grid ag-grid-angular text-field-grid-editor .form-group {
    margin-bottom: 0;
}

.webbpm editable-grid ag-grid-angular text-area-grid-editor .form-control {
    font-size: 16px;
    min-height: 100px;
    border: 0;
    background-color: #f0f7fd;
}
.webbpm editable-grid ag-grid-angular text-area-grid-editor .form-control:focus {
    box-shadow: none;
}

.webbpm editable-grid ag-grid-angular .ag-popup-editor one-to-many-grid-editor > div,
.webbpm editable-grid ag-grid-angular .ag-popup-editor auto-complete-grid-editor > div,
.webbpm editable-grid ag-grid-angular .ag-popup-editor combo-box-grid-editor > div,
.webbpm editable-grid ag-grid-angular .ag-popup-editor static-combo-box-grid-editor > div {
    align-items: center;
    margin-top: -1px;
}

.webbpm editable-grid ag-grid-angular .ag-header .alarm,
.webbpm editable-grid ag-grid-angular .ag-overlay-loading-center,
.webbpm editable-grid ag-grid-angular .ag-popup-editor one-to-may-auto-complete-grid-editor label,
.webbpm editable-grid ag-grid-angular number-field-grid-editor label {
    display: none;
}

.webbpm editable-grid ag-grid-angular .ag-popup-editor one-to-may-auto-complete-grid-editor {
    flex: 1;
    height: 100%;
    padding: 0;
}

.webbpm editable-grid ag-grid-angular .ag-popup-editor one-to-may-auto-complete-grid-editor .form-group {
    display: flex;
    height: 100%;
}

.webbpm editable-grid ag-grid-angular .ag-popup-editor one-to-may-auto-complete-grid-editor .component-float {
    flex: 1;
    width: auto;
}

.webbpm editable-grid ag-grid-angular .ag-popup-editor one-to-may-auto-complete-grid-editor .selectize-control,
.webbpm editable-grid ag-grid-angular .ag-popup-editor auto-complete-grid-editor .selectize-control,
.webbpm editable-grid ag-grid-angular .ag-popup-editor combo-box-grid-editor .selectize-control,
.webbpm editable-grid ag-grid-angular .ag-popup-editor static-combo-box-grid-editor .selectize-control,
.webbpm editable-grid ag-grid-angular .ag-popup-editor .date > div,
.webbpm editable-grid ag-grid-angular .ag-popup-editor .date .input-group {
    height: 100%;
    min-height: auto;
    width: 100%;
}

.webbpm editable-grid ag-grid-angular .ag-popup-editor one-to-may-auto-complete-grid-editor .selectize-control.single .selectize-input,
.webbpm editable-grid ag-grid-angular .ag-popup-editor auto-complete-grid-editor .selectize-control.single .selectize-input,
.webbpm editable-grid ag-grid-angular .ag-popup-editor combo-box-grid-editor .selectize-control.single .selectize-input,
.webbpm editable-grid ag-grid-angular .ag-popup-editor static-combo-box-grid-editor .selectize-control.single .selectize-input,
.webbpm editable-grid ag-grid-angular .ag-popup-editor .date input,
.webbpm editable-grid ag-grid-angular .ag-popup-editor .date .input-group-addon {
    display: inline-flex;
    align-items: center;    
    height: 100%;
    min-height: auto;
    padding: 0 10px 1px 11px;
    border: 0;
    border-radius: 0;
    background: #f0f7fd;
    box-shadow: none;
}
.webbpm editable-grid ag-grid-angular .ag-popup-editor .date input {
    padding-right: 0;
}

.webbpm editable-grid ag-grid-angular .ag-popup-editor one-to-may-auto-complete-grid-editor .selectize-control.single .selectize-input.dropdown-active {
    padding-right: 3px;
}
.webbpm editable-grid ag-grid-angular .ag-popup-editor one-to-may-auto-complete-grid-editor .selectize-control.single .selectize-input.dropdown-active::before,
.webbpm editable-grid ag-grid-angular .ag-popup-editor one-to-may-auto-complete-grid-editor .selectize-control.single .selectize-input::after {
    display: none;
}

.webbpm editable-grid ag-grid-angular .ag-popup-editor one-to-may-auto-complete-grid-editor input {
    padding-left: 5px !important;
}

.webbpm editable-grid ag-grid-angular .ag-popup-editor one-to-may-auto-complete-grid-editor + button-component {
    height: 100%;
    background: #f0f7fd;
}

.webbpm editable-grid ag-grid-angular .ag-popup-editor one-to-may-auto-complete-grid-editor + button-component .btn {
    color: #404954 !important;
    white-space: nowrap;
    padding: 0;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/*---------------- Table Header Menu --------------- */
.webbpm ag-grid-angular .ag-menu {
    padding: 6px;
    border: 1px solid #f5f5f5;
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0px 100px 80px rgb(0 0 0 / 7%), 0px 40px 30px rgb(0 0 0 / 5%), 0px 22px 18px rgb(0 0 0 / 4%), 0px 12.5px 10px rgb(0 0 0 / 4%), 0px 6.5px 5px rgb(0 0 0 / 3%), 0px 2.5px 2px rgb(0 0 0 / 2%);
}

.webbpm ag-grid-angular .ag-tab-header {
    border: 0;
    background-color: #fff;
}

.webbpm ag-grid-angular .ag-tab-header .ag-tab {
    margin: 0 6px 6px 0;
}

.webbpm ag-grid-angular .ag-tab-header .ag-tab.ag-tab-selected {
    border-color: transparent;
    border-radius: 6px;
    background-color: #f2f2f2;
}

.webbpm ag-grid-angular .ag-pinned-left-header {
    border-right: 0;
}

.webbpm ag-grid-angular .ag-header-checkbox-container .ag-icon-checkbox-checked,
.webbpm ag-grid-angular .ag-header-checkbox-container .ag-icon-checkbox-unchecked {
    margin-top: 5px;
}

.webbpm ag-grid-angular .ag-tab-body {
    color: #404954;
    font-size: 14px;
    padding: 0;
}

.webbpm ag-grid-angular .ag-menu > .ag-menu-list {
    margin: 0px;
}

.webbpm ag-grid-angular .ag-menu .ag-menu-option {
    color: #404954;
    font-size: 14px;
}

.webbpm ag-grid-angular .ag-menu .ag-menu-option-active {
    background-color: #f5f5f5;
}
.webbpm ag-grid-angular .ag-menu .ag-menu-option-active > *:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
.webbpm ag-grid-angular .ag-menu .ag-menu-option-active > *:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.webbpm ag-grid-angular .ag-menu .ag-menu-separator > span {
    height: 9px;
    background-image: url("data:image/svg+xml;utf8,<svg width='1' height='5px' viewBox='0 0 1 5px' xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='5px' x2='1' y2='5px' stroke-width='1' stroke='%23dddddd'/></svg>");
}

/*---------------- Side-bar --------------- */
.webbpm ag-grid-angular .ag-status-bar,
.webbpm ag-grid-angular .ag-side-bar,
.webbpm ag-grid-angular .ag-side-bar .ag-side-buttons,
.webbpm ag-grid-angular .ag-tool-panel-wrapper .ag-column-select-panel {
    border: 0;
}
.webbpm ag-grid-angular .ag-side-bar {
    background: transparent;
}

.webbpm ag-grid-angular .ag-side-bar .ag-tool-panel-wrapper {
    width: 300px;
    border: 1px solid #efefef;
    border-radius: 12px 0 0 12px;
    background: #fff;
    box-shadow: -2px 0px 12px -6px rgb(0 0 0 / 20%);
}

.webbpm ag-grid-angular .ag-side-bar .ag-tool-panel-wrapper,
.webbpm ag-grid-angular .ag-side-bar .ag-tool-panel-wrapper .ag-filter-toolpanel-header {    
    color: #404954;
    font-size: 16px;
    font-weight: normal;
    background: transparent;
}

.webbpm ag-grid-angular .ag-side-bar .ag-tool-panel-wrapper .ag-filter-panel .ag-filter-air {
    padding: 0;
    border: 0;
}

.webbpm ag-grid-angular .ag-side-bar .ag-side-buttons {
    width: 30px;
    padding-top: 0;
}

.webbpm ag-grid-angular .ag-side-bar .ag-side-buttons .ag-side-button {
    padding-left: 4px;

}

.webbpm ag-grid-angular .ag-side-bar .ag-side-buttons .ag-side-button button {
    color: #404954;
    font-family: 'Segoe';
    font-size: 14px;
    border: 0;
    border-radius: 10px;
}
.webbpm ag-grid-angular .ag-side-bar .ag-side-buttons .ag-side-button button:hover {
    color: #eb5757;
}

.webbpm ag-grid-angular .ag-side-bar .ag-side-buttons .ag-side-button.ag-selected button {
    color: #eb5757;
    background: #f2f2f2;
}

.webbpm ag-grid-angular .ag-primary-cols-header-panel,
.webbpm ag-grid-angular .ag-filter-toolpanel-search {
    align-items: center;
    height: 50px;
    padding-top: 0;
    border-bottom: 1px solid #efefef;
}

.webbpm ag-grid-angular .ag-tool-panel-wrapper .ag-column-panel-column-select {
    border: 0;
}

.webbpm ag-grid-angular .ag-tool-panel-wrapper .ag-column-select-panel .ag-column-tool-panel-column-group,
.webbpm ag-grid-angular .ag-tool-panel-wrapper .ag-column-select-panel .ag-column-tool-panel-column {
    height: 30px;
    line-height: 30px;
    margin-left: 6px;
    margin-right: 6px;
    border-radius: 8px;
}
.webbpm ag-grid-angular .ag-tool-panel-wrapper .ag-column-select-panel .ag-column-tool-panel-column-group:hover,
.webbpm ag-grid-angular .ag-tool-panel-wrapper .ag-column-select-panel .ag-column-tool-panel-column:hover {
    background: #f5f5f5;
    cursor: pointer;
}

.webbpm ag-grid-angular .ag-tool-panel-wrapper .ag-column-select-panel .ag-column-tool-panel-column-group {
    font-family: 'SegoeSB';
}

.webbpm ag-grid-angular .ag-column-select-panel .ag-column-tool-panel-column.ag-toolpanel-add-group-indent {
    padding-left: 44px;
}

.webbpm ag-grid-angular .ag-icon-settings {
    height: 10px;
    width: 10px;
    background: url('../img/icons/settings-sm.svg') center no-repeat;
    opacity: 0.7;
}

.webbpm ag-grid-angular .ag-side-bar .card {
    border: 0;
}

.webbpm ag-grid-angular .ag-side-bar .card-header {
    text-align: left;
    padding: 6px;
    border: 0;
    background: transparent;
}

.webbpm ag-grid-angular .ag-side-bar .card-header i {
    float: none;
    font-size: 14px;
    text-align: center;
    width: 16px;
    margin: 0;
}
.webbpm ag-grid-angular .ag-side-bar .card-header i.fa-chevron-right::before {
    content: "\f105";
}
.webbpm ag-grid-angular .ag-side-bar .card-header i.fa-chevron-down::before {
    content: "\f107";
}

.webbpm ag-grid-angular .ag-side-bar .card-block,
.webbpm ag-grid-angular.ag-side-bar .ag-filter-toolpanel-body {
    margin: 0px 6px;
}

.webbpm ag-grid-angular .ag-side-bar .card-block button {
    color: #404954;
    min-height: 35px;
    margin-bottom: 6px;
    border: 1px solid #e3e6ed;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0px 2px 3px -2px rgb(0 0 0 / 20%);
}

.webbpm ag-grid-angular .ag-side-bar .ag-filter-body-wrapper > *,
.webbpm ag-grid-angular .ag-filter .ag-filter-body-wrapper > * {
    margin-bottom: 6px;
}

.webbpm ag-grid-angular .ag-side-bar .ag-filter-toolpanel .ag-group,
.webbpm ag-grid-angular .ag-side-bar .ag-filter-toolpanel .ag-group .ag-filter-toolpanel-instance-filter {
    margin: 0;
    border: 0;
}

.webbpm ag-grid-angular .ag-column-drop-horizontal.ag-column-drop {
    padding: 0;
    border: 0;
    background-color: transparent;
}

.webbpm ag-grid-angular .ag-column-drop-horizontal.ag-column-drop > div:not(.ag-column-drop-list) {
    display: none;
}

.webbpm ag-grid-angular .ag-popup .ag-select-list-item {
    font-size: 16px;
    background: transparent;
}
.webbpm ag-grid-angular .ag-popup .ag-select-list-item.ag-active-item {
    color: #1c92ea;
}

.webbpm ag-grid-angular .ag-popup .ag-popup-child:not(.ag-tooltip-custom) {    
  padding: 6px 4px;
  border: 0;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0px 0px 6px 2px rgb(77 72 91 / 12%);
}

.webbpm ag-grid-angular .ag-column-drag {
    margin: 0 0 0 6px;
    background: url('../img/icons/dots-six-vertical.svg') 0 0 no-repeat;
}

.webbpm sales-grid .grid {
    display: flex;
    flex-direction: column;
}

.webbpm sales-grid .grid > ag-grid-angular {
    flex: 1;
    overflow: hidden;
}

.webbpm sales-grid .grid .ag-paging-panel {
    display: flex;
    flex-direction: row;
}

.webbpm sales-grid .grid .table-panel-legend {
    display: flex;
    flex: 1;
    justify-content: right;
    margin: 0 80px 0 0;
}

.webbpm sales-grid .grid .table-panel-legend > span {
    position: relative;
    margin-left: 48px;
}
.webbpm sales-grid .grid .table-panel-legend > span::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    left: -24px;
    top: 0;
    border: 1px solid #fff;
    border-radius: 8px;
    box-shadow: 0px 1px 2px -1px rgb(0 0 0 / 45%);
}
.webbpm sales-grid .grid .table-panel-legend > .order-reject::before {
    background: #feffee;
}
.webbpm sales-grid .grid .table-panel-legend > .order-return::before {
    background: #fff1f1;
}
.webbpm sales-grid .grid .table-panel-legend > .order-self-redemption::before {
    background: #edfcf8;
}

.webbpm ag-grid-angular .ag-overlay-loading-center {
    color: #404954;
    font-size: 14px;
    padding: 20px;
    border: 1px solid #f5f5f5;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0px 100px 80px rgb(0 0 0 / 7%), 0px 40px 30px rgb(0 0 0 / 5%), 0px 22px 18px rgb(0 0 0 / 4%), 0px 12.5px 10px rgb(0 0 0 / 4%), 0px 6.5px 5px rgb(0 0 0 / 3%), 0px 2.5px 2px rgb(0 0 0 / 2%);
}

.webbpm ag-grid-angular .ag-filter .ag-filter-header-container {
    height: 32px;
}

.webbpm ag-grid-angular .ag-filter .ag-filter-header-container:nth-child(2) {
    margin-top: 8px;
    border-bottom: 1px solid #e2e2e2;
}

.webbpm ag-grid-angular .ag-virtual-list-item:hover {
    border-radius: 8px;
    background: #f5f5f5;
}

.webbpm ag-grid-angular .ag-virtual-list-item:hover > label {
    cursor: pointer;
}

.webbpm ag-grid-angular .ag-filter label {
    font-size: 16px;
    width: auto;
    margin: 0;
}

.webbpm ag-grid-angular .ag-filter .ag-filter-checkbox {
    margin-right: 6px;
}

.webbpm .modal-content {
    border: 0;
    border-radius: 15px;
    box-shadow: 0px 0px 30px 2px rgb(77 72 91 / 12%);
    background-color: #fff;
}

.webbpm .modal-header {
    border-bottom: 1px solid #e3e6ed;
}

/*-------------- Containers --------------- */
.webbpm .block-content {
    margin: 0;
    border: 0;
}

.webbpm .block-content,
.webbpm .block-content > div {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.webbpm .nav-tabs {
    width: max-content;
    margin-bottom: 30px;
    border: 0;
    border-radius: 20px;
    background-color: #e3e6ed;
}

.webbpm .nav-tabs .nav-item {
  margin-bottom: 0;
}

.webbpm .nav-tabs .nav-link {
    color: #404954;
    padding: 6px 14px;
    border: 0;
    background-color: transparent;
}

.webbpm .nav-tabs .nav-link:hover,
.webbpm .nav-tabs .nav-link:focus,
.webbpm .nav-tabs .nav-link:active {
    background-color: transparent;
}

.webbpm .nav-tabs .active .nav-link {
    color: #fff;
    border: 0;
    border-radius: 20px;
    background-color: #1c92ea;
    box-shadow: 0px 0px 6px 2px rgb(77 72 91 / 24%);
}

.webbpm tab-container .nav-tabs ~ .tab-active > .active {
    flex-direction: column;
    display: flex;    
    padding: 0;
    border: 0;
}   
/*------------- end Containers ------------ */

/*----------------- Filters ---------------- */
.webbpm collapsible-panel:not(.grid-setting-panel):not(.column-states-panel):not(.filter-states-panel) .card,
.webbpm .fieldset {
    border: 0;
    border-radius: 8px;
    background-color: #f5f7fa;
}

.webbpm collapsible-panel:not(.grid-setting-panel):not(.column-states-panel):not(.filter-states-panel) .card-header,
.webbpm .fieldset > legend {
    font-family: 'SegoeSB';
    font-size: 18px;
    padding: 15px 20px;
    border: 0;
    background: transparent;
}

.webbpm collapsible-panel:not(.grid-setting-panel):not(.column-states-panel):not(.filter-states-panel) .card-header .font-bold {
    margin-top: 10px;
}

.webbpm collapsible-panel:not(.grid-setting-panel):not(.column-states-panel):not(.filter-states-panel) .card-block {
    padding: 0 20px 15px 20px;
} 

.webbpm .fieldset > .legend + div {
    padding: 55px 20px 15px 20px;
} 

.webbpm collapsible-panel:not(.grid-setting-panel):not(.column-states-panel):not(.filter-states-panel) .card i {
    float: none;
    font-size: 14px;
    margin-right: 6px;
    margin-left: 0;
}
/*-------------- end Filters -------------- */

/*-------------- Admin-pages -------------- */
.webbpm [page-processinstance],
.webbpm #process-instance,
.webbpm #process-instance > vbox,
.webbpm #process-instance > vbox > div {
    height: 100%;
}

.webbpm [page-processinstance] #process-instance tab-container > div,
.webbpm [page-processinstance] #process-instance tab-container .tab-active {
    display: flex !important;
}

.webbpm [id^="user-management-"],
.webbpm #process-instance-list,
.webbpm #process-instance {
    padding: 0 40px;
}

.webbpm [id^="user-management-"] > vbox > div > *:not(.title),
.webbpm #process-instance-list > vbox > div > *:not(.title) {
    margin-bottom: 20px;
}

.webbpm [id^="user-management-"] .card label,
.webbpm #process-instance-list .card label {
    display: inline-flex;
}

.webbpm [id^="user-management-"] .card .width-full>div > label,
.webbpm #process-instance-list .card .width-full>div > label {
    display: table-cell;
    padding-top: 5px;
}

.webbpm #user-management-authorities {
    margin-top: 40px;
}

.webbpm #process-instance-list static-column-grid {
    margin-top: 20px;
}

.webbpm #process-instance-list .radio-block .radio-content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.webbpm #process-instance-list .radio-block .radio-content label.control-label {
    padding-top: 0;
}

.webbpm #process-instance bpmn-back-button {
    margin: 20px 0;
}    
/*----------- end Admin-pages ------------- */

/*---------------- Calendar --------------- */
.webbpm .calendar .months-container {
    display: flex !important;
    flex-wrap: wrap;
    width: 100%;
}

.webbpm .calendar .month-container {
    float: none;
    height: max-content;
    margin-bottom: 20px;
}

.webbpm .calendar .month .day {
    font-size: 14px;
}

.webbpm .calendar .month .day.day-start {
    color: #fff;
    border-radius: 4px;
    background-color: #1c92ea !important;
}
.webbpm .calendar .month .day.day-start .day-content:hover {
    color: #fff;
}

.webbpm .calendar .month .day .day-content:hover {
    color: #1c92ea;
    background-color: transparent;   
}

.webbpm .date .bootstrap-datetimepicker-widget {
    color: #404954;
    width: min-content;
    padding: 10px;
    margin: 0;    
    border: 1px solid #e3e6ed;

    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 8px 12px rgb(77 72 91 / 5%), 0 6px 10px rgb(77 72 91 / 0%);
}
.webbpm .date .bootstrap-datetimepicker-widget.dropdown-menu.bottom:before,
.webbpm .date .bootstrap-datetimepicker-widget.dropdown-menu.bottom:after,
.webbpm .date .bootstrap-datetimepicker-widget table td.today:before {
    display: none;
}

.webbpm .date .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    color: #1c92ea;
    background-color: transparent;
}

.webbpm .bootstrap-datetimepicker-widget table td.day:hover,
.webbpm .bootstrap-datetimepicker-widget table td.hour:hover,
.webbpm .bootstrap-datetimepicker-widget table td.minute:hover,
.webbpm .bootstrap-datetimepicker-widget table td.second:hover {
    color: #1c92ea;
    background-color: transparent;
}

.webbpm .date .bootstrap-datetimepicker-widget table td.today,
.webbpm .date .bootstrap-datetimepicker-widget table td.today:hover {
    color: #fff !important;
    background-color: #1c92ea;  
}

.webbpm .date .bootstrap-datetimepicker-widget table td.active {
    color: #404954 !important;
    text-shadow: none;
    background-color: #f9f9f9;  
}

.webbpm .btn-group-viewdate.btn-group .btn {
    width: 38px;
    height: 38px;
    border-radius: 19px;
    cursor: pointer;
}

.webbpm .btn-group-viewperiod.btn-group .btn {
    border-radius: 20px;
    cursor: pointer;
}

.webbpm .btn-group-viewperiod.btn-group .btn.active {
    color: #fff !important;
    border-color: #1c92ea !important;
    background: #1c92ea !important;
    box-shadow: 0px 0px 6px 2px rgb(77 72 91 / 6%);
}
.webbpm .btn-group-viewperiod.btn-group .btn.active:hover,
.webbpm .btn-group-viewperiod.btn-group .btn.active:active {
    border-color: #1b84d2 !important;
    background: #1b84d2 !important;
}
.webbpm .btn-group-viewperiod.btn-group .btn.active:focus {
    border-color: #1b84d2 !important;
    background: #1b84d2 !important;
    box-shadow: none;
}

.webbpm .btn-group-viewdate.btn-group .btn + .btn,
.webbpm .btn-group-viewperiod.btn-group .btn + .btn {
    margin-left: 10px;
}

.webbpm .cal-week-view .cal-header.cal-weekend span {
    color: #1c92ea;
    opacity: 0.7;
}

.webbpm .cal-month-view .cal-day-badge {
    height: 20px;
    background-color: #1c92ea;
}

.webbpm .cal-month-view .cal-open-day-events {
    color: #404954;
    background-color: #e6ebee;
    box-shadow: none;
}    

.webbpm .cal-week-view .cal-event {
    color: #1c92ea;  
}
/*------------- Calendar - end ------------ */

/*---------- Block-dialog - end ----------- */
.webbpm .block-dialog {
    position: relative;
    max-width: 800px;
    padding: 60px 60px 50px 110px !important;
    margin: 30px auto;
    border: 0;
    border-radius: 15px;
    background-color: #fff;
    box-shadow: 0px 0px 30px 2px rgb(77 72 91 / 12%);
}
.webbpm .block-dialog::before {
    content: "\f332";
    position: absolute;
    color: #1c92ea;
    font-family: bootstrap-icons !important;
    font-size: 30px;
    top: 60px;
    left: 60px;
}

.webbpm .block-dialog .title,
.webbpm .block-dialog .title > div > div:last-of-type{
    padding: 0;
}
/*---------- Block-dialog - end ----------- */

/*------------------  Левое меню  -------------------*/
/*
.webbpm .task-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}

.webbpm .task-left-menu {
    float: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 240px;
    padding: 0;
    margin: 0;
    background: #eef2f4;
    z-index: 1;
    overflow: auto;    
}

.webbpm .task-right-content {
    float: none;
    position: absolute;
    top: 0;    
    bottom: 0;    
    left: 240px;
    right: 0;
    padding: 0;
    margin: 0;
    overflow: auto;
}

.webbpm .task-left-menu > div {
    padding: 15px 10px 15px 15px;
}

.webbpm .task-left-menu auto-complete .component-float {
    width: 100%;
}

.webbpm .task-right-content > div {
    padding: 0 15px 15px;
}

.webbpm .menu-group-title {
    font-weight: normal;
}

.webbpm .menu-element > li > div:first-child {
    font-size: 15px;
    width: 100%;
}

.webbpm .menu-element > li > div:last-child {
    padding: 2px 6px;
    border-radius: 6px;
}

.webbpm .menu-group-title + menu {
    padding-left: 0;
}

.webbpm .menu-group .menu-group {
    padding-left: 15px;
}
*/
/*-----------------  end - Левое меню  -----------------*/

/*--------------------  Диаграмма Ганта  --------------------*/
.webbpm .gmajorheading {
    background-color: #e0e5e9;
}
.webbpm .gminorheading {
    background-color: #f1f5f7;
}
.webbpm .gminorheadingwkend {
    background-color: #cce9f4;
}
.webbpm .gtaskcellwkend {
    background-color: #f9fafb;
}

.webbpm .gitemhighlight td {
    background-color: #bcedfc !important;
}
/*-----------------  end - Диаграмма Ганта  -----------------*/

.webbpm .modal-backdrop.show {
    filter: alpha(opacity=25);    
    opacity: 0.25;
    background-color: #000;
}

/*------------------  FilePreview  ------------------*/
.webbpm .files-view {
    width: auto;
}
/*---------------  end - FilePreview  ---------------*/