﻿.sds-indicators-value-container .indicator-value-wrapper {
    background-color: var(--sds-white, #FFFFFF);
    width: 100%;
    position: relative;
    gap: 16px;
}

.sds-indicators-value-container .indicator-value-wrapper:not(:last-child):after {
    position: absolute;
    bottom: -16px;
    left: 0;
    content: '';
    height: 1px;
    width: 100%;
    border-bottom: 1px solid var(--sds-grey-300, #D3D3D3);
}

.sds-indicators-value-container .indicator-value-wrapper:first-child {
    padding-top: 0px;
    border-top: none;
}

.sds-indicators-value-container .indicator-value-wrapper .title {
    color: var(--sds-grey-900, #020303);
    font-family: 'Inter', Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    margin-bottom: 6px;
}

.sds-indicators-value-container .indicator-value-wrapper .indicator-value-wrapper__description {
    font-family: 'Inter', Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0%;
    color: #5A6161;
}

    .sds-indicators-value-container .indicator-value-wrapper .form-radio-btn-group {
        display: flex;
        gap: 16px;
        flex-flow: wrap;
    }

.sds-indicators-value-container .indicator-value-wrapper .form-checkbox-btn-group {
    column-count: 2;
    column-gap: 12px;
}

.sds-indicators-value-container .indicator-value-wrapper .form-control {
    border-radius: 6px;
    border: 1px solid var(--sds-grey-500, #B6BFBF);
    background: var(--sds-grey-000, #FFF);
    max-width: 90%;
    height: 30px;
    padding: 6px 12px;
    color: #333;
}

.sds-indicators-value-container .indicator-value-wrapper .indicator-value-sdropdown,
.sds-indicators-value-container .indicator-value-wrapper .indicator-value-mdropdown,
.sds-indicators-value-container .indicator-value-wrapper .indicator-value-calendar,
.sds-indicators-value-container .indicator-value-wrapper .form-control.indicator-text-value-input,
.sds-indicators-value-container .indicator-value-wrapper .form-control.indicator-number-value-input {
    max-width: 100%;
    min-width: 296px;
}

.sds-indicators-value-container .indicator-value-wrapper .form-check-input:checked {
    background-color: var(--sds-primary-500, #0B9294);
    border-color: var(--sds-primary-500, #0B9294);
}

.sds-indicators-value-container .indicator-value-wrapper .indicator-value-title-wrapper {
    width: 35%;
    flex-shrink: 0;
}

.sds-indicators-value-container .indicator-value-wrapper .indicator-field-wrapper {
    flex-shrink: 0;
    width: 65%;
}

.indicator-value-wrapper .indicator-value-calendar {
    max-width: 50%;
    border-radius: 6px;
    border: 1px solid var(--sds-grey-500, #B6BFBF);
    background: var(--sds-grey-000, #FFF);
    padding: 0px 8px;
    height: 33px;
}

.indicator-value-calendar .dx-texteditor-input-container {
    padding-left: 0px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #333;
}

.indicator-value-wrapper .indicator-value-sdropdown

/* .indicator-value-wrapper .indicator-value-mdropdown  */
    {
    max-width: 50%;
    border-radius: 6px;
    border: 1px solid var(--sds-grey-500, #B6BFBF);
}

.indicator-value-sdropdown .dx-texteditor-input,
.indicator-value-mdropdown .dx-texteditor-input {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #333;
}

/* Make the indicators container scrollable */
.sds-indicators-value-container {
    overflow-y: auto;
    flex-grow: 1;
    max-width: 704px;
    width: 100%;
    margin: 0 auto;
    gap: 20px;
    display: flex;
    flex-direction: column;
    /* This allows the container to take up the remaining space */
}

.sds-indicators-value-container .sds-indicators-default-added-value-list,
.sds-indicators-value-container .sds-indicators-value-list {
    border-radius: 8px;
    box-shadow: 0px 2px 1px 0px #0203030D;
    border: 1px solid #b3b3b340;
    padding: 24px;
    background-color: var(--sds-white, #FFFFFF);
    gap: 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sds-indicators-value-container .indicator-field-wrapper {
    max-width: 65%;
}

.sds-indicators-value-container .indicator-field-wrapper .type-wrapper {
    width: 90%;
    align-content: center;
}

.sds-indicators-value-container .indicator-field-wrapper .delete-indicator-value.disabled,
.sds-indicators-value-container .indicator-field-wrapper .delete-indicator-value:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: all;
}

.indicator-multidropdown-datagrid .dx-datagrid-rowsview .dx-select-checkboxes-hidden>tbody>tr>td>.dx-select-checkbox {
    display: inline-block !important;
}

.event-indicator-values-btn-add {
    display: flex;
    padding: 6px 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 6px;
    background: var(--primary-500, #0B9294);
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
    color: #FFF;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;
    border: 1px solid #0B9294;
    min-width: 80px;
    z-index: 10;
}

.event-indicator-values-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    max-width: 704px;
    width: 100%;
    margin: 0 auto;
}

.event-indicator-values-btn-add__title {
    font-family: 'Inter', Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0%;
    vertical-align: middle;
}

.editor-popup-wrapper .editor-popup-userdata-metadata-list .dx-popup-content {
    padding: 24px 24px 32px;
}

.editor-popup-wrapper .editor-popup-userdata-metadata-list .dx-box-item-content {
    padding: 0;
}

.editor-popup-wrapper .editor-popup-userdata-metadata-list .dx-item-content .dx-field-item {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.editor-popup-wrapper .editor-popup-userdata-metadata-list .dx-field-item:not(.dx-first-row) {
    padding-top: 16px;
}

.editor-popup-wrapper .editor-popup-userdata-metadata-list .dx-item-content .dx-field-item .dx-checkbox-icon {
    border-radius: 4px;
    border: 1px solid var(--sds-grey-500, #B6BFBF);
    background: var(--sds-grey-000, #FFF);
}

.editor-popup-wrapper .editor-popup-userdata-metadata-list .dx-item-content .dx-field-item .dx-checkbox-checked .dx-checkbox-icon {
    background-color: var(--primary-500, #0B9294);
    border: 1px solid var(--primary-500, #0B9294);
    color: white;
}

.editor-popup-wrapper .editor-popup-userdata-metadata-list .dx-item-content .dx-field-item-label {
    margin: 0;
}

.pull-right {
    float: right;
}

.indicator-multidropdown-datagrid .dx-texteditor.dx-state-active.dx-editor-filled,
.dx-texteditor.dx-state-active.dx-editor-outlined,
.dx-texteditor.dx-state-active.dx-editor-underlined,
.dx-texteditor.dx-state-focused.dx-editor-filled,
.dx-texteditor.dx-state-focused.dx-editor-outlined,
.dx-texteditor.dx-state-focused.dx-editor-underlined {
    border: 1px solid var(--sds-grey-500, #B6BFBF)
}

.indicator-multidropdown-datagrid .dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused)>td {
    background-color: rgba(0, 0, 0, .1);
    font-weight: 500;
    color: var(--sds-grey-900, #020303);
    border: 1px solid rgba(0, 0, 0, .1);
}

.indicator-multidropdown-datagrid .dx-checkbox-indeterminate .dx-checkbox-icon::before {
    background-color: var(--primary-600, #0B9294);
}

.dx-checkbox-checked .dx-checkbox-icon {
    color: var(--primary-500, #0B9294);
}

.indicator-value-wrapper .dx-switch {
    width: 40px !important;
    height: 20px !important;
    background-color: #f0f0f0 !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.indicator-value-wrapper .dx-switch-container {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    background: #bebfbf !important;
    border-radius: 10px;
}

.indicator-value-wrapper .dx-switch-inner {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
}

.indicator-value-wrapper .dx-switch-handle::before {
    background-color: #fff !important;
    border-radius: 20px;
}

.indicator-value-wrapper .dx-switch[aria-pressed="true"] .dx-switch-container {
    background-color: var(--sds-primary-500, #0B9294) !important;
}

.indicator-value-wrapper .dx-switch-handle {
    width: 16px !important;
    height: 16px !important;
    background-color: white !important;
    border-radius: 8px !important;
    position: absolute !important;
    top: 0 !important;
    left: 1px !important;
    transition: 0.1s !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.indicator-value-wrapper .dx-switch[aria-pressed="true"] .dx-switch-handle {
    transform: translateX(20px) !important;
}

.indicator-value-wrapper .dx-switch-on,
.indicator-value-wrapper .dx-switch-off {
    display: none !important;
}

.indicator-value-mdropdown-wrapper .indicator-value-mdropdown-content,
.indicator-value-sdropdown-wrapper .indicator-value-sdropdown-content {
    padding: 0 !important;
}

.indicator-multidropdown-datagrid .dx-datagrid-headers .dx-header-row>td {
    background-color: transparent;
    border-left: 1px solid #e8eaeb;
    border-bottom: 1px solid #e8eaeb;
    padding: 5px;
}