:root {
    --secp-color-primary: #e95d0f;
    --secp-color-primary-hover: #d6601d;
    --secp-color-primary-dark: #521c00;
    --secp-color-primary-dark-hover: #762900;
    --secp-color-secondary: #521c00;
    --secp-color-secondary-hover: #762900;
    --secp-color-on-primary: #ffffff;
    --secp-color-background: #F5F6F8;
    --secp-color-background-light: #f7f9fb;
    --secp-color-background-lighter: #fefeff;
    --secp-color-background-white: #ffffff;
    --secp-color-text: #000000;
    --secp-color-text-secondary: #695b52;
    --secp-color-text-muted: #938075;
    --secp-color-border-form: #818798;
    --secp-color-border: #d7dde7;
    --secp-color-border-light: #e6ebf0;
    --secp-color-error: #c3290e;
    --secp-color-error-bg: #fff6f5;
    --secp-color-error-bg-lighter: #fffcfc;
    --secp-color-error-text: #4d0c00;
    --secp-color-warning-border: #dd7c15;
    --secp-color-warning-bg: #fffaf0;
    --secp-color-warning-bg-lighter: #fffdfa;
    --secp-color-success: #5cb85c;
    --secp-color-success-bg: #edf7ed;
    --secp-color-success-bg-lighter: #f6faf6;
    --secp-color-success-text: #1e4d1e;
    --secp-color-info: #0e72c2;
    --secp-color-info-bg: #f4f9ff;
    --secp-color-info-bg-lighter: #fafcff;
    --secp-color-info-border: #02579a;
    --secp-color-text-orange: #e95d0f;
    --secp-color-text-blue: #2c73ad;
    --secp-color-text-dark: #521c00;
    --secp-color-text-slate: #5a7a9a;
    --secp-color-text-green: #4a7c59;
    --secp-color-focus-ring: #e95d0f;
    --secp-color-toolbar-surface: #f7f9fb;
    --secp-color-shadow-soft: rgba(0, 0, 0, 0.2);
    --secp-color-accent-hover: #e6ebf0;
    --secp-border-radius: 4px;
    --secp-font-family: Arial, sans-serif;
    --secp-font-size: 14px;
    --secp-spacing-xs: 4px;
    --secp-spacing-sm: 8px;
    --secp-spacing-md: 12px;
    --secp-spacing-lg: 16px;
    --secp-spacing-xl: 20px;
}


/***************************************************/
/**** COMON *****/


*:not(.glyphicon),
body:not(.glyphicon) {
    font-family: var(--secp-font-family) !important;
}

*:focus {
    outline: none !important;
}

html {
    font-size: var(--secp-font-size) !important;
}

body {
    background-color: var(--secp-color-background);
}

/************ TEXT COLORS ************/

text-primary {
    color: var(--secp-color-primary);
}

.text-secondary {
    color: var(--secp-color-text-secondary, #6c757d);
}

.text-orange {
    color: var(--secp-color-text-orange);
}

.text-blue {
    color: var(--secp-color-text-blue);
}

.text-dark {
    color: var(--secp-color-text-dark);
}

.text-slate {
    color: var(--secp-color-text-slate);
}

.text-green {
    color: var(--secp-color-text-green);
}



.text-info {
    color: var(--secp-color-info);
}

.text-success {
    color: var(--secp-color-success);
}

.text-warning {
    color: var(--secp-color-warning-border);
}

/***************************************************/
/**** TEXT STYLES ************/

.text-small {
    font-size: 0.85em;
}

.text-bold {
    font-weight: bold;
}

.text-normal {
    font-weight: normal;
}

.text-pre {
    white-space: pre-wrap;
}

.flex-1 {
    flex: 1;
}

.mb-0 {
    margin-bottom: 0px;
}

.mb-1 {
    margin-bottom: 10px;
}

.mb-2 {
    margin-bottom: 20px;
}

.mt-0 {
    margin-top: 0px;
}

.mt-1 {
    margin-top: 10px;
}

.mt-2 {
    margin-top: 20px;
}

.mt-3 {
    margin-top: 30px;
}

.mt-4 {
    margin-top: 40px;
}

/* SIGNIN FORM */

.form-signin .login-header {
    margin: 25px 0 55px 0;
}

.form-signin .login-header .login-logo svg {
    display: none !important;
}

.form-signin .login-header .login-logo {
    /* Image */
    background-image: url(/camunda/assets/logo-v.png) !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    /* Ajuste la taille */
    background-position: center center !important;

    /* Dimensions forcées */
    width: 100% !important;
    height: 120px !important;
    /* Ajustez selon la hauteur de votre logo */
    margin-bottom: 0px;
}

.form-signin .login-header .app-name {
    display: none;
}

/* APP*/
.navbar-brand .brand-logo {
    text-indent: -999em;
    background-image: url(/camunda/assets/logo.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 180px;
    height: 36px !important;
}

.navbar-brand .brand-logo.ng-binding svg {
    display: none;

}

.navbar-brand .brand-name {
    display: none;
}

[cam-widget-header] {
    border-top: 3px solid var(--secp-color-primary);
    box-shadow: none;
    border-bottom: 1px solid var(--secp-color-border);
}

[cam-widget-header] [ng-transclude] :not(.dropdown-menu) > li > view a {
    padding: 0 12px !important;
    line-height: 44px;
}

[cam-widget-header] [ng-transclude] :not(.dropdown-menu) > li > view a:hover {
    background-color: var(--secp-color-background);
}

[cam-widget-header] [ng-transclude] :not(.dropdown-menu) > li > view a .glyphicon {
    font-size: 12px;
    margin-right: 4px;
}


[cam-widget-header] a {
    color: black;
}

[cam-widget-header] .ce-eol-banner {
    background-color: var(--secp-color-primary);
    font-size: 0;
}


.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    border-bottom: 3px solid var(--secp-color-primary);
}

.dropdown-menu > .active a,
.dropdown-menu > li:hover a {
    border-color: var(--secp-color-primary);
}


a.text-primary:hover,
a.text-primary:focus {
    color: var(--secp-color-primary-hover);
}


.bg-primary {
    color: #fff;
    background-color: var(--secp-color-primary);
}

a.bg-primary:hover,
a.bg-primary:focus {
    background-color: var(--secp-color-primary-hover);
}


.btn-primary {
    color: #fff;
    background-color: var(--secp-color-primary);
    border-color: var(--secp-color-primary-dark);
}

.btn-primary:focus,
.btn-primary.focus {
    color: #fff;
    background-color: var(--secp-color-primary-hover);
    border-color: var(--secp-color-primary-dark);
}

.btn-primary:hover {
    color: #fff;
    background-color: var(--secp-color-primary-hover);
    border-color: var(--secp-color-primary-dark);
}

/* Forms */

input.form-control {
    height: 46px;
    padding: 22px 12px;
}

input.form-control::placeholder {
    font-style: normal;
    font-size: 0.95em;
}

input.form-control:focus {
    border-color: #000;
}


/* Task */
.task-details {
    background-color: var(--secp-color-background);
}

.task-details header,
.task-filters header {
    height: 36px !important;
}

.task-filters header,
.tasks-list header,
.task-details header.top {
    background-color: #f3f4f5 !important;
    box-shadow: 0 2px 3px -4px #555555 !important;
    border-bottom: 1px solid #d7dde7 !important;
}

.task-filters.column,
.tasks-list.column {
    box-shadow: 0 2px 4px -2px #555555;
    border-right: 1px solid #dbdfe7 !important;
}

.task-filters .three-cols-layout-cell.content {
    padding-bottom:30px;
}

.task-details .task-card .names .task {
    color: black;
}

.task-details .task-card .names .definition-name .instance-link {
    color: var(--secp-color-primary-dark);
    margin-left: 5px;
}

.task-details .task-card .names .definition-name .instance-link:hover {
    color: var(--secp-color-primary-dark-hover);
}

[cam-tasklist-task] .names {
    margin-left: 20px;
}


[cam-tasklist-task] h2 {
    margin-top: 0;
    padding: 25px 20px 5px 0px;
    margin-bottom: 0;
}

[cam-tasklist-form] .form-actions {
    margin-top: 15px;
    margin-bottom: 40px;
    margin-right: 32px;
}

[cam-tasklist-form] .form-actions .btn-primary {
    min-width: 120px;
    margin-left: 5px;
    font-weight: 600;
}

[cam-tasklist-form] .form-actions .btn-default {
    min-width: 90px;
    font-weight: 600;
    color: black;
    border-color: black;
}


[cam-tasklist-task-meta] {
    padding: 0 20px;
}

[cam-tasklist-task-meta] .task-card .nav-tabs {
    padding-left: 35px;
    padding-right: 15px;
    margin-left: -15px;
    margin-right: -15px;
}


[cam-tasklist-task] .row.tabbed-content {
    background-color: var(--secp-color-background-light);
}

[cam-tasklist-task] ul.nav.nav-tabs {
    background-color: var(--secp-color-background-white);
    margin-top: 2px;
    padding-left: 35px;
}

[cam-tasklist-task] .tab-content {
    margin-right: 25px;
    margin-left: 25px;
    margin-top: 45px;
    margin-bottom: 40px;
    padding: var(--secp-spacing-xl);
    padding-bottom: 5px;
    padding-top: 30px;
    background-color: var(--secp-color-background-white);
    border-radius: var(--secp-border-radius);
}

[cam-widget-inline-field] > .view-value,
[cam-widget-inline-field] > .preview,
[cam-widget-inline-field] > .view-value a,
[cam-widget-inline-field] > .preview a {
    color: var(--secp-color-primary-dark);
}


[cam-widget-inline-field] > .view-value:hover,
[cam-widget-inline-field] > .preview:hover,
[cam-widget-inline-field] > .view-value:hover a,
[cam-widget-inline-field] > .preview:hover a {
    color: var(--secp-color-primary-dark-hover);
}

[cam-tasklist-task-meta] .groups .glyphicon,
[cam-tasklist-task-meta] .groups > span a {
    color: var(--secp-color-primary-dark);
}

[cam-tasklist-task-meta] .groups .glyphicon:hover,
[cam-tasklist-task-meta] .groups > span a:hover {
    color: var(--secp-color-primary-dark-hover);
}

[cam-tasklist-task-meta] .meta .unclaim {
    color: var(--secp-color-primary-dark);
}

[cam-tasklist-task-meta] .meta .unclaim:hover {
    color: var(--secp-color-primary-dark-hover);
}

[cam-tasklist-task-meta] .meta .unclaim .glyphicon {
    color: var(--secp-color-primary-dark);
}

[cam-tasklist-task-meta] .meta .unclaim .glyphicon:hover {
    color: var(--secp-color-primary-dark-hover);
}

/* TASK LIST */

.tasks-list .three-cols-layout-cell.content {
    background-color: var(--secp-color-background-light) !important;
}


.tasks-list.list-unstyled > li.task {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px 15px;
    background: var(--secp-color-background-white);
    color: var(--secp-color-text) !important;
    border-width: 1px;
    border-radius: var(--secp-border-radius);
    border-color: var(--secp-color-border-light);
}

.three-cols-layout .column-center .list-unstyled > li.active {
    border-color: unset;
}

.three-cols-layout .column-center .list-unstyled > li.active:hover {
    border-color: unset;
}

/* .tasks-list .three-cols-layout .column-left .list-unstyled > .item.active, .three-cols-layout .column-center .list-unstyled > li.active, .three-cols-layout .column-left .list-unstyled > .item.active:hover, .three-cols-layout .column-center .list-unstyled > li.active:hover { */
.tasks-list.list-unstyled li.task.active {
    border-color: black;

    box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.2);
}

.tasks-list.list-unstyled > li.task:hover {
    border-color: black;
}

.tasks-list .task .names h4.task {
    font-size: 16px;
}

.tasks-list .task .names h4.task a {
    outline: 0 !important;
}

.tasks-list .task .names h6.process-definition {
    color: var(--secp-color-text-secondary);
    font-size: 12px;
}

.tasks-list .task .names h5.assignee {
    color: var(--secp-color-primary);
}

.tasks-list .task .dates {
    color: var(--secp-color-text-muted);
}


.tasks-list .task .priority {
    font-size: 10px;
    color: var(--secp-color-primary-dark);
}

.pagination {
    margin-bottom: 40px;
}

/*Task List Header*/


/*[ng-controller=camTasklistAppCtrl] .three-cols-layout-cell.top {*/
/*    min-height: 36px;*/
/*    background-color: black !important;*/
/*    color: white;*/
/*}*/

/*[ng-controller=camTasklistAppCtrl]  .three-cols-layout-cell.top > a,*/
/*[ng-controller=camTasklistAppCtrl] .three-cols-layout-cell.top > button,*/
/*[ng-controller=camTasklistAppCtrl] .three-cols-layout-cell.top > .btn-link,*/
/*[ng-controller=camTasklistAppCtrl] .three-cols-layout-cell.top .task-actions view > a,*/
/*[ng-controller=camTasklistAppCtrl] .three-cols-layout-cell.top .sorting-choice > li > a {*/
/*    color: white;*/
/*    outline:none;*/
/*}*/


/*[ng-controller=camTasklistAppCtrl] .three-cols-layout-cell.top > a:hover,*/
/*[ng-controller=camTasklistAppCtrl] .three-cols-layout-cell.top > button:hover,*/
/*[ng-controller=camTasklistAppCtrl] .three-cols-layout-cell.top > .btn-link:hover,*/
/*[ng-controller=camTasklistAppCtrl] .three-cols-layout-cell.top .task-actions view > a:hover,*/
/*[ng-controller=camTasklistAppCtrl] .three-cols-layout-cell.top .sorting-choice > li > a:hover,*/
/*[ng-controller=camTasklistAppCtrl] .three-cols-layout-cell.top > a:focus,*/
/*[ng-controller=camTasklistAppCtrl] .three-cols-layout-cell.top > button:focus,*/
/*[ng-controller=camTasklistAppCtrl] .three-cols-layout-cell.top > .btn-link:focus,*/
/*[ng-controller=camTasklistAppCtrl] .three-cols-layout-cell.top .task-actions view > a:focus,*/
/*[ng-controller=camTasklistAppCtrl] .three-cols-layout-cell.top .sorting-choice > li > a:focus {*/
/*    color: #c1c1c1;*/
/*    outline:none;*/
/*}*/

/* FILTERS */

.task-filters {
    background-color: var(--secp-color-background);
}

.task-filters [cam-tasklist-filters] {
    padding-right: 2px;
    padding-left: 5px;
}

.task-filters [cam-tasklist-filters] .item.task-filter {
    border: 1px solid var(--secp-color-border-light);
    border-top-right-radius: var(--secp-border-radius);
    border-bottom-right-radius: var(--secp-border-radius);
    background-color: var(--secp-color-background-white);
    margin-left: -6px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 5px;
}

.task-filters [cam-tasklist-filters] .item.task-filter.active {
    border-color: black;
    box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.2);
}


.task-filters [cam-tasklist-filters] .item.task-filter:hover {
    border-color: black;
}

.task-filters [cam-tasklist-filters] .item.task-filter h4 {
    font-size: 13.5px;
    line-height: 16px;
    vertical-align: middle;
}

.task-filters [cam-tasklist-filters] .item.task-filter.active h4 {
    font-weight: 500;
}

.task-filters [cam-tasklist-filters] .item.task-filter .actions {
    height: 20px;
    width: 20px;
    display: flex;
    margin: 0;
    align-items: center;
    justify-content: center;
    float: right;
}

.task-filters [cam-tasklist-filters] .item.task-filter .actions:hover {
    background-color: var(--secp-color-background);
}

.task-filters [cam-tasklist-filters] .item.task-filter .actions a {
    color: var(--secp-color-primary-dark);
}

.task-filters [cam-tasklist-filters] .item.task-filter .actions a .glyphicon {
    font-size: 12px;
    display: none;
}

.task-filters [cam-tasklist-filters] .item.task-filter:hover .actions a .glyphicon {
    display: inline;
}


/********************************************************/
/* Form JS */
/********************************************************/
.fjs-container {
    --color-text: var(--secp-color-text);
}

.fjs-container .fjs-children {
    min-width: 100%;
}

.fjs-container .fjs-repeat-row-container .fjs-repeat-row-remove {
    height: fit-content;
    align-self: center;
}

.fjs-container .fjs-repeat-row-container .fjs-repeat-row-remove .fjs-repeat-row-remove-icon-container {
    border: 1px solid;
    border-radius: 50%;
}

.fjs-container .fjs-iframe {
    border-radius: var(--secp-border-radius);
    border-color: gray;
}

.fjs-form-field.fjs-form-field-group.fjs-form-field-grouplike.fjs-outlined {
    margin-right: 10px !important;
    margin-left: 10px !important;
    border-radius: var(--secp-border-radius);
    outline-width: 1px;
    outline-color: gray;
    padding: 30px;
}

.fjs-form-field.fjs-form-field-dynamiclist.fjs-form-field-grouplike.fjs-outlined {
    margin-right: 10px !important;
    margin-left: 10px !important;
    border-radius: var(--secp-border-radius);
    outline-width: 1px;
    outline-color: gray;
    padding: 30px;
    padding-right: 20px;
}


.fjs-form-field.fjs-form-field-dynamiclist.fjs-form-field-grouplike.fjs-outlined .fjs-form-field-label {
    margin-left: 0;
}

.fjs-form-field.fjs-form-field-checkbox label {
    white-space: break-spaces;
}


.fjs-form-field.fjs-form-field-dynamiclist.fjs-form-field-grouplike.fjs-outlined .fjs-vertical-layout.fjs-children {
    padding: 4px 0 !important;
}

.fjs-form-field.fjs-form-field-dynamiclist.fjs-form-field-grouplike.fjs-outlined .fjs-vertical-layout.fjs-children .fjs-repeat-row-rows {
    border: 1px solid gray;
    border-radius: var(--secp-border-radius);
    padding: 10px 30px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.fjs-form-field.fjs-form-field-dynamiclist.fjs-form-field-grouplike.fjs-outlined .fjs-repeat-render-footer.fjs-remove-allowed .fjs-repeat-render-add {
    min-width: 90px;
    font-weight: 600;
    color: black;
    border: 1px solid black;
    border-radius: 2px;
    padding-left: 10px;
    padding-right: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.fjs-form-field.fjs-form-field-dynamiclist.fjs-form-field-grouplike.fjs-outlined .fjs-repeat-render-footer.fjs-remove-allowed .fjs-repeat-render-add:hover {
    background-color: #e6e6e6;
}

.fjs-form-field:has(> * > [id*="input_hidden"]) {
    display: none;
}

/********************************************************/
/* COMPONENTS SPECIFIC */
/********************************************************/

/************ ALERT BOX  ************/
.alert-box {
    padding: 15px 20px;
    border-radius: 4px;
    margin-bottom: 16px;
    font-size: 13px;
    display: flex;
}

.alert-box-icon {
    font-family: "Glyphicons Halflings" !important;
    position: relative;
    top: 1px;
    display: inline-block;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    margin-right: 8px;
    margin-top: 1px;
    font-size: 17px;
}

.alert-box-content {
    flex: 1;
}

/* INFO */
.alert-box-info {
    background-color: var(--secp-color-info-bg);
    border: 1px solid var(--secp-color-info-border);
}

.alert-box-info .alert-box-icon::before {
    content: "\e086";
    color: var(--secp-color-info);
}

/* ERROR */
.alert-box-error {
    background-color: var(--secp-color-error-bg);
    border: 1px solid var(--secp-color-error);
}

.alert-box-error .alert-box-icon::before {
    content: "\e083";
    color: var(--secp-color-error);
}

/* WARNING */
.alert-box-warning {
    background-color: var(--secp-color-warning-bg);
    border: 1px solid var(--secp-color-warning-border);
}

.alert-box-warning .alert-box-icon::before {
    content: "\e086";
    color: var(--secp-color-warning-border);
}

/* SUCCESS */
.alert-box-success {
    background-color: var(--secp-color-success-bg);
    border: 1px solid var(--secp-color-success);
}

.alert-box-success .alert-box-icon::before {
    content: "\e089";
    color: var(--secp-color-success);
}

.alert-box-more {
    background-color: #fffcfc;
    border-radius: 4px;
    padding: 12px;
    margin-top: 12px;
}

.alert-box-info .alert-box-more {
    background-color: var(--secp-color-info-bg-lighter);
}

.alert-box-error .alert-box-more {
    background-color: var(--secp-color-error-bg-lighter);
}

.alert-box-warning .alert-box-more {
    background-color: var(--secp-color-warning-bg-lighter);
}

.alert-box-success .alert-box-more {
    background-color: var(--secp-color-success-bg-lighter);
}

/************ DATA CARD  ************/

.data-card {
    background: var(--secp-color-background-white);
    border: 1px solid var(--secp-color-text);
    border-radius: 4px;
    padding: 30px;
    margin-bottom: 20px;
    box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .2);
}

.data-card-title {
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: 600;
    border-bottom: 2px solid var(--secp-color-primary);
    padding-bottom: 12px !important;
    margin-bottom: 20px !important;
}

.data-card-title-icon {
    font-size: 15px;
    color: var(--secp-color-text);
    margin-right: 5px;
}

.data-card-field {
    margin-bottom: 20px;
    margin-top: 10px;
}

.data-card-field-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.data-card-field-row .data-card-field {
    flex: 1;
}

.data-card-field-label {
    font-size: 12px;
    color: var(--secp-color-text-secondary);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 4px;
    font-weight: 600;
}

.data-card-field-value {
    background: var(--secp-color-background-light);
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.5;
    min-height: 45px;
}

.data-card-field-pre {
    white-space: pre-wrap;
}

.data-card-field-value-tag {
    display: inline-block;
    background-color: var(--secp-color-background);
    padding: 5px 10px;
    margin-right: 1px;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: normal;
    border-radius: var(--secp-border-radius);
}

.data-card-field-value.empty-value {
    color: #9e9e9e;
    font-style: italic;
}

.data-card-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--secp-color-text);
    margin-top: 20px;
    text-transform: uppercase;
    margin-bottom: 20px;
    margin-top: 20px;
    padding-bottom: 8px;
    position: relative;
    padding-left: 14px;

}

.data-card-section-title::before {
    content: "•";
    position: absolute;
    font-size: 20px;

    left: 0;
    top: 0;
}

.data-card-hr {
    border: 0;
    border-top: 1px solid var(--secp-color-border-light);
    margin: 30px 0 40px;
}

.data-card-dynamiclist-item {
}

.data-card-field-value-nested {
    background: var(--secp-color-background-white);
    padding: 8px 12px;
    border-radius: 4px;
    margin-top: 4px;
    font-size: 13px;
}

.data-card-dynamiclist-item-field-label {
    font-size: 12px;
    color: #666;
    font-weight: bold;
    margin-top: 10px;
}

/************ DIFF FIELDS  ************/

.data-card-field-value-diff-old {
    padding: 12px 16px;
    border-radius: var(--secp-border-radius);
    background-color: var(--secp-color-background-light);
    font-size: 14px;
    line-height: 1.5;
    min-height: 20px;
}

.data-card-field-value-diff-old.modified {
    color: var(--secp-color-text-muted);
    text-decoration: line-through;
    font-size: 12px;
    background-color: var(--secp-color-error-bg);
}

.data-card-field-value-diff-new {
    padding: 12px 16px;
    border-radius: var(--secp-border-radius);
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.5;
    min-height: 20px;
}

.data-card-field-value-diff-new.modified {

    background-color: var(--secp-color-success-bg);
}

.data-card-field-value-diff-old.empty-value,
.data-card-field-value-diff-new.empty-value {
    color: var(--secp-color-text-muted);
    font-style: italic;
}

.data-card-field-value-diff-inline {
    display: inline-block;
    font-size: 13px;
    padding: 4px 10px;
    min-width: 60px;
}

/************ FEEDBACK ITEM  ************/

.feedback-item {
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 12px;
    border: 1px solid;

}

/* ERROR */
.feedback-item-error {
    background-color: var(--secp-color-error-bg);
    border-color: var(--secp-color-error);
}

/* SUCCESS */
.feedback-item-success {
    background-color: var(--secp-color-success-bg);
    border-color: var(--secp-color-success);
}

/* WARNING */
.feedback-item-warning {
    background-color: var(--secp-color-warning-bg);
    border-color: var(--secp-color-warning-border);
}

/* INFO */
.feedback-item-info {
    background-color: var(--secp-color-info-bg);
    border-color: var(--secp-color-info-border);
}

.feedback-item-toggle {
    display: none;
}

.feedback-item-label {
    font-weight: 600;
    cursor: pointer;
    display: block;
    margin-bottom: 0px;
    color: var(--secp-color-text);
}

.feedback-item-text {
    font-weight: 600;
}

.feedback-item-text-error {
    color: var(--secp-color-error);
}

.feedback-item-text-success {
    color: var(--secp-color-success);
}

.feedback-item-text-warning {
    color: var(--secp-color-warning-border);
}

.feedback-item-text-info {
    color: var(--secp-color-info);
}

.feedback-item-arrow {
    font-size: 0.8em;
    color: var(--secp-color-text);
    float: right;
}

.feedback-item-content {
    background-color: #fffcfc;
    border-radius: 4px;
    padding: 12px;
    display: none;
    margin-top: 12px;
}

.feedback-item-info .feedback-item-content {
    background-color: var(--secp-color-info-bg-lighter);
}

.feedback-item-error .feedback-item-content {
    background-color: var(--secp-color-error-bg-lighter);
}

.feedback-item-warning .feedback-item-content {
    background-color: var(--secp-color-warning-bg-lighter);
}

.feedback-item-success .feedback-item-content {
    background-color: var(--secp-color-success-bg-lighter);
}


.feedback-item-content-pre {
    white-space: pre-wrap;
}

.feedback-item-toggle:checked + .feedback-item-label + .feedback-item-content {
    display: block;
}

.feedback-item-toggle:checked + .feedback-item-label .feedback-item-arrow {
    display: none;
}

.feedback-item-toggle:checked + .feedback-item-label::after {
    content: ' ▲';
    font-size: 0.8em;
    color: var(--secp-color-text);
    float: right;
}

/************ COLLAPSIBLE PANEL  ************/

.collapsible-panel {
    border: 1px solid var(--secp-color-text);
    border-radius: var(--secp-border-radius);
    background: var(--secp-color-background-white);
}

.collapsible-panel-toggle {
    display: none;
}

.collapsible-panel-label {
    display: block;
    padding: var(--secp-spacing-sm) var(--secp-spacing-lg);
    cursor: pointer;
    font-weight: 500;
    color: var(--secp-color-text);
    border-bottom: 1px solid var(--secp-color-border-light);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 45px;
    font-size: 14px !important;
}

.collapsible-panel-label-tag {
    display: inline-block;
    background-color: var(--secp-color-background);
    padding: 5px 10px;
    margin-right: 1px;
    /* margin-bottom: 6px; */
    font-size: 13px;
    font-weight: normal;
    border-radius: var(--secp-border-radius);
}

.collapsible-panel-label-tag-warning {
    background-color: var(--secp-color-warning-bg);
    color: var(--secp-color-primary-dark);
}

.collapsible-panel-label-tag-error {
    background-color: var(--secp-color-error-bg);
    color: var(--secp-color-error-text);
}

.collapsible-panel-label-tag-success {
    background-color: var(--secp-color-success-bg);
    color: var(--secp-color-success-text);
}


.collapsible-panel-label-title {
    flex: 1;
}

.collapsible-panel-label:hover {
    background-color: var(--secp-color-background-light);
}

.collapsible-panel-arrow {
    float: right;
    font-size: 0.8em;
    color: var(--secp-color-text);
}

.collapsible-panel-content {
    display: none;
    padding: var(--secp-spacing-lg);
}

.collapsible-panel-toggle:checked + .collapsible-panel-label + .collapsible-panel-content {
    display: block;
}

.collapsible-panel-toggle:checked + .collapsible-panel-label .collapsible-panel-arrow::before {
    content: '▲';
}

.collapsible-panel-toggle:not(:checked) + .collapsible-panel-label .collapsible-panel-arrow::before {
    content: '▼';
}