/* Font-face declarations for e-Ukraine fonts — .otf only (no woff/woff2 available) */
@font-face {
    font-family: "e-Ukraine-Regular";
    src: url("/fonts/e-Ukraine/e-Ukraine-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "e-Ukraine-Bold";
    src: url("/fonts/e-Ukraine/e-Ukraine-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "e-Ukraine-Light";
    src: url("/fonts/e-Ukraine/e-Ukraine-Light.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Bootstrap Form Styles */
.bootstrapFormStyles .form-group {
    margin-bottom: 1rem;
}

/* Disable animation for ALL Formio modal dialogs globally */
.formio-dialog .formio-dialog-content,
.formio-dialog .formio-modaledit-content {
    animation: none !important;
}

/* Стилизация модального окна edit-grid */

.formio-dialog.formio-dialog-theme-default.component-settings {
    background: rgba(0, 0, 0, 0.3);
    padding: 0;
    z-index: 9999;
}

.formio-dialog.formio-dialog-theme-default.component-settings .formio-dialog-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 0;
    padding: 40px 48px 60px 48px;
    max-width: 600px;
    width: 100%;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,0.24);
    animation: none;
}

/* Disable animation only for the very first-open editgrid modal. JS will add
   the `no-anim` class to the dialog element when needed. */
.formio-dialog.formio-dialog-theme-default.component-settings.no-anim .formio-dialog-content {
    animation: none !important;
}

.formio-dialog.formio-dialog-theme-default.component-settings .formio-dialog-content h3,
.formio-dialog.formio-dialog-theme-default.component-settings .formio-dialog-content .card-header {
    font-family: 'e-Ukraine-Regular', Arial, sans-serif;
    font-size: 32px;
    font-weight: 400;
    margin-bottom: 32px;
    color: #222;
    border: none;
    background: none;
}

.formio-dialog.formio-dialog-theme-default.component-settings .formio-dialog-content .form-group label {
    font-family: 'e-Ukraine-Light', Arial, sans-serif;
    font-size: 16px;
    color: #222;
    margin-bottom: 8px;
}

.formio-dialog.formio-dialog-theme-default.component-settings .formio-dialog-content .form-control {
    border: none;
    border-bottom: 2px solid #000;
    border-radius: 0;
    font-size: 16px;
    font-family: 'e-Ukraine-Regular', Arial, sans-serif;
    background-color: #fff;
    color: #222;
    margin-bottom: 0;
    padding: 8px 0;
    box-shadow: none;
}

.formio-dialog.formio-dialog-theme-default.component-settings .formio-dialog-content .form-control:focus:not(:disabled, [readonly]) {
    border-bottom-color: transparent !important;
    background-color: #fff !important;
    background-image: linear-gradient(88deg, #C3AAB2 0.66%, #9EC 57.2%, #80C0C8 75.87%, #4B8BFA 98.72%) !important;
    background-size: 100% 2px !important;
    background-position: bottom left !important;
    background-repeat: no-repeat !important;
    outline: none !important;
    box-shadow: none !important;
}

.formio-dialog.formio-dialog-theme-default.component-settings .formio-dialog-content .btn-primary {
    background: #000;
    color: #fff;
    border: none;
    border-radius: 20px;
    font-family: 'e-Ukraine-Bold', 'e-Ukraine-Regular', Arial, sans-serif;
    font-size: 20px;
    padding: 12px 32px;
    margin-right: 16px;
    box-shadow: none;
    transition: background 0.2s;
}

.formio-dialog.formio-dialog-theme-default.component-settings .formio-dialog-content .btn-primary:hover {
    background: #222;
}

.formio-dialog.formio-dialog-theme-default.component-settings .formio-dialog-content .btn-default {
    background: #fff;
    color: #000;
    border: 2px solid #000;
    border-radius: 20px;
    font-family: 'e-Ukraine-Bold', 'e-Ukraine-Regular', Arial, sans-serif;
    font-size: 20px;
    padding: 12px 32px;
    box-shadow: none;
    transition: background 0.2s, color 0.2s;
}

.formio-dialog.formio-dialog-theme-default.component-settings .formio-dialog-content .btn-default:hover {
    background: #f5f5f5;
    color: #222;
}

/* (duplicate block removed — rules already defined above) */

.formio-dialog.formio-dialog-theme-default.component-settings .formio-dialog-content .close {
    position: absolute;
    top: 24px;
    right: 32px;
    font-size: 32px;
    color: #222;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10001;
}



.bootstrapFormStyles *, 
.bootstrapFormStyles :after, 
.bootstrapFormStyles :before {
    box-sizing: border-box;
}

.bootstrapFormStyles .col-form-label {
    font-size: inherit;
    line-height: 1.5;
    margin-bottom: 0;
    padding-bottom: calc(.375rem + 1px);
    padding-top: calc(.375rem + 1px);
}

.bootstrapFormStyles label {
    display: inline-block;
    margin-bottom: .5rem;
}

.MuiTypography-body1{
    font-weight: 400;
}

.MuiPaper-root{
    color: #000000;
    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    background-color: #fff;
}

/* Text Field Styles */
.mdtuddm-textfield label.col-form-label, 
.mdtuddm-textfield span.col-form-label,
.col-form-label {
    color: #222 !important;
    height: auto;
    padding: 0;
    font-size: 12px;
    font-family: 'e-Ukraine-Light';
    line-height: 1.25;
    letter-spacing: normal;
}

/* .btn.mdtuddm-button-primary{
    color: #FFFFFF;
    background-color: #000000 !important;
    border: none;
    padding: 16px 40px;
    font-size: 16px;
    box-shadow: none !important;
    font-family: e-Ukraine-Regular;
    line-height: 24px;
    border-color: initial;
    border-radius: 40px;
    letter-spacing: normal;
    text-transform: none;
} */

/* Material UI Styles */
.MuiFormControl-root {
    border: 0;
    margin: 0;
    display: inline-flex;
    padding: 0;
    position: relative;
    min-width: 0;
    flex-direction: column;
    vertical-align: top;
}

.jss486 {
    width: 100%;
}

/* Form Group Component Classes */
.form-group.has-feedback.formio-component {
    position: relative;
    margin-bottom: 18px;
}

/* File upload components — proper styling */
.formio-component-fileLatest,
.formio-component-file {
    margin-bottom: 20px;
}

/* Hide file processing loader by default — formio toggles it via JS */
.fileSelector .loader-wrapper {
    display: none !important;
}

/* File drop zone styling */
.formio-component-fileLatest .fileSelector,
.formio-component-file .fileSelector {
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    background: #fafafa;
    cursor: pointer;
    transition: border-color 0.2s;
    margin-top: 8px;
}
.formio-component-fileLatest .fileSelector:hover,
.formio-component-file .fileSelector:hover {
    border-color: #999;
}
.formio-component-fileLatest .fileSelector .fa-cloud-upload,
.formio-component-file .fileSelector .fa-cloud-upload {
    font-size: 24px;
    color: #999;
    margin-right: 8px;
}

/* File list table */
.formio-component-fileLatest .list-group,
.formio-component-file .list-group {
    margin-top: 8px;
}
.formio-component-fileLatest .list-group-header,
.formio-component-file .list-group-header {
    background: #f8f8f8;
    border-bottom: 1px solid #ddd;
}

/* File progress bar during upload */
.formio-component-fileLatest .progress,
.formio-component-file .progress {
    height: 6px;
    margin-top: 4px;
    border-radius: 3px;
}

/* Checkbox / Radio — no underlines, proper spacing */
.formio-component-checkboxLatest,
.formio-component-checkbox,
.formio-component-radioLatest,
.formio-component-radio {
    margin-bottom: 16px;
}

/* Remove any stray borders/underlines from radio and checkbox */
.formio-component-radioLatest .form-radio,
.formio-component-radio .form-radio,
.formio-component-checkboxLatest .form-check,
.formio-component-checkbox .form-check {
    border: none !important;
}

/* Radio — один ряд за можливості */
.formio-component-radioLatest .form-radio,
.formio-component-radio .form-radio {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 28px;
}

.formio-component-radioLatest .form-radio .form-check,
.formio-component-radio .form-radio .form-check {
    margin-bottom: 0;
}

/* Radio options — proper spacing between each option */
.formio-component-radioLatest .form-check-inline,
.formio-component-radio .form-check-inline {
    margin-right: 24px;
    margin-bottom: 8px;
    padding-left: 0;
}

/* Radio and checkbox labels — ensure text is not cut off by native input */
.formio-component-radioLatest .form-check-label,
.formio-component-radio .form-check-label {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    font-size: 16px;
    line-height: 24px;
    color: #000;
    display: inline-block;
}

/* Position the native radio/checkbox input to the left, not overlapping text */
.formio-component-radioLatest .form-check-input,
.formio-component-radio .form-check-input {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    width: 20px;
    height: 20px;
}

/* Checkbox label padding — prevent text clipping */
.formio-component-checkboxLatest > .form-check-label,
.formio-component-checkboxLatest label.form-check-label,
.formio-component-checkbox > .form-check-label,
.formio-component-checkbox label.form-check-label {
    padding-left: 32px;
    position: relative;
    cursor: pointer;
    font-size: 16px;
    line-height: 24px;
    color: #000;
}

.formio-component-checkboxLatest .form-check-input,
.formio-component-checkbox .form-check-input {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    width: 24px;
    height: 24px;
}

/* Fieldset — legend без нижньої межі Bootstrap */
.formio-form fieldset > legend {
    border-bottom: none !important;
}

/* Description (form-text) — менший шрифт, e-Ukraine-Light, чорний на #fffbe6 */
.formio-form .form-text.text-muted {
    font-family: 'e-Ukraine-Light', Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    color: #000 !important;
    background-color: #fffbe6;
    padding: 10px 14px;
    margin-top: 4px;
    margin-bottom: 0;
    box-sizing: border-box;
}

/* Fieldset / columns — proper spacing */
.formio-component-fieldsetLatest,
.formio-component-fieldset,
.formio-component-columnsLatest,
.formio-component-columns {
    margin-bottom: 16px;
}

/* EditGrid — no extra underlines */
.formio-component-editgridLatest,
.formio-component-editgrid {
    margin-bottom: 16px;
}

/* EditGrid per-row dots button + dropdown */
.dots-wrapper { position: relative; display: inline-block; }
.dots-btn {
    background: #fff;
    border: none;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    color: #222;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.dots-btn:hover { background: #f2f2f2; }
.dots-btn:active { background: #e0e0e0; }
.dots-btn .fa { font-size: 14px; }

.editgrid-actions-dropdown {
    position: absolute;
    right: 0;
    top: 36px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    display: none;
    width: 140px;
    z-index: 10002;
    /* padding: 6px 6px; */
}
.dots-wrapper .editgrid-actions-dropdown { display: none; }
.dots-wrapper.open .editgrid-actions-dropdown { display: block; }
/* EditGrid custom table styles */
.editgrid-scroll {
    overflow-x: auto;
    width: 100%;
}
.editgrid-row {
    display: flex;
    flex-direction: row;
    min-width: 900px;
    width: max-content;
}
.editgrid-header {
    border-bottom: 2px solid #222;
    width: 100%;
}

.editgrid-cell, .editgrid-header-cell {
    flex: 0 0 1;
    min-width: 180px;
    width: 1.5em;
    padding: 12px 18px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    white-space: nowrap;
}

.editgrid-header-cell {
    color: #888;
    font-family: 'e-Ukraine-Light', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
}
.editgrid-cell-value {
    color: #111;
    font-family: 'e-Ukraine-Light', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    display: flex;
    align-items: center;
    height: 100%;
}
.editgrid-cell-actions {
    min-width: 60px;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Vertically center all cell content */
.editgrid-row .editgrid-cell, .editgrid-row .editgrid-header-cell {
    align-items: center;
    height: 48px;
}

.editgrid-actions-dropdown .btn-action {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    background: #fff;
    border: none;
    font-family: 'e-Ukraine-Light', Arial, sans-serif;
    font-size: 16px;
    color: #222;
    cursor: pointer;
}
.editgrid-actions-dropdown .btn-action:hover { background: #f5f5f5; }
.editgrid-actions-dropdown .btn-action:active { background: #e9e9e9; }
.editgrid-actions-dropdown .btn-action-danger { color: #d32f2f; }

/* EditGrid footer / pagination area */
.editgrid-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 8px 8px 8px;
    /* border-top: 1px solid rgba(0,0,0,0.08); */
    border: none;
    margin-top: 12px;
}

.editgrid-footer-left { display: flex; align-items: center; gap: 12px; }
.editgrid-footer-left label { font-family: 'e-Ukraine-Light'; font-size: 14px; color: #222; margin-right: 6px; }
.editgrid-page-size { padding: 6px 10px; border: none; border-bottom: 2px solid #222; background: transparent; font-size: 14px; }
.editgrid-page-info { font-family: 'e-Ukraine-Light'; font-size: 14px; color: #222; margin-left: 12px; }

.editgrid-footer-right { display: flex; gap: 8px; align-items: center; }
.pager-btn { background: transparent; border: none; color: rgba(0,0,0,0.5); padding: 0 8px; cursor: pointer; border-radius: 6px; font-size: 28px; font: 'e-Ukraine-Light'}
.pager-btn:hover { background: #f2f2f2; color: #222; }
.pager-btn:active { background: #e0e0e0; }

/* Empty state */
.editgrid-empty { padding: 10px; margin: 0; background: #fff; border-radius: 8px; }
.editgrid-empty p { font-family: 'e-Ukraine-Regular', Arial, sans-serif; font-size: 18px; color: #666; margin: 0; }



/* Make the heavy underline style apply inside builder preview, live preview and dialogs
#builder .formio-component-underline,
.formio-form .formio-component-underline,
.formio-dialog .formio-component-underline,
.formio-component-underline {
    width: 100%;
    border-bottom: 2px solid #000 !important;
} */

/* Gradient underline when an inner control is focused. Use :focus-within so the
   underline becomes a gradient when any child (input/select/textarea) has focus.
   We render the gradient using a ::after pseudo-element positioned at the bottom
   because border-image on only the bottom edge is not consistently supported,
   and to avoid interfering with existing border properties. */
/* Gradient underline when an inner control is focused. Apply across contexts */
/* #builder .formio-component-underline:focus-within,
.formio-form .formio-component-underline:focus-within,
.formio-dialog .formio-component-underline:focus-within,
.formio-component-underline:focus-within {
    
    border-bottom: 2px solid transparent !important;
} */

/* #builder .formio-component-textfieldLatest:focus-within::after,
.formio-form .formio-component-textfieldLatest:focus-within::after,
.formio-dialog .formio-component-textfieldLatest:focus-within::after,
.formio-component-textfieldLatest:focus-within::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    height: 2px; 
    pointer-events: none;
    background: linear-gradient(88deg, #C3AAB2 0.66%, #9EC 57.2%, #80C0C8 75.87%, #4B8BFA 98.72%);
    z-index: 2;
}

#builder .form-group.formio-component:has(input, textarea, select)::after,
.formio-form .form-group.formio-component:has(input, textarea, select)::after,
.formio-dialog .form-group.formio-component:has(input, textarea, select)::after, 
.form-group.formio-component:has(input, textarea, select)::after
{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: #000;
    pointer-events: none;
    z-index: 2;
}


#builder .form-group.formio-component:focus-within::after,
.formio-form .form-group.formio-component:focus-within::after,
.formio-dialog .form-group.formio-component:focus-within::after,
.form-group.formio-component:focus-within::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    height: 2px; 
    pointer-events: none;
    background: linear-gradient(88deg, #C3AAB2 0.66%, #9EC 57.2%, #80C0C8 75.87%, #4B8BFA 98.72%);
    z-index: 2;
} */

/* *Latest underlines: border on .form-control / .choices__inner / .input-group — see src/shared/styles/formio-ddm.css */

/* Date / Datetime calendar icon alignment
   The calendar icon sits at the right edge of the input row. */
.formio-component-dateLatest,
.formio-component-datetimeLatest,
.formio-component-date,
.formio-component-datetime,
.formio-component-dateTime {
    /* add bottom padding so the underline (pseudo-element) is below the input area */
    /* padding-bottom: 10px; */
    position: relative;
}

/* Make input group relative so the addon (calendar button) can be positioned */
.formio-component-datetimeLatest .input-group,
.formio-component-dateLatest .input-group,
.formio-component-date .input-group,
.formio-component-datetime .input-group {
    position: relative;
    width: 100%;
}

/* Position the addon (calendar icon/button) to the right and vertically center it */
.formio-component-datetimeLatest .input-group-addon,
.formio-component-datetimeLatest .input-group-append,
.formio-component-dateLatest .input-group-addon,
.formio-component-dateLatest .input-group-append,
.formio-component-date .input-group-addon,
.formio-component-date .input-group-append,
.formio-component-datetime .input-group-addon,
.formio-component-datetime .input-group-append {
    position: absolute !important;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3; /* above the input but below the underline if needed */
    background: transparent;
    border: none;
    padding: 0 6px;
}

/* Give the input extra right padding so its text doesn't run under the icon */
.formio-component-datetimeLatest .form-control,
.formio-component-dateLatest .form-control,
.formio-component-date .form-control,
.formio-component-datetime .form-control {
    padding-right: 44px !important; /* room for a ~28-36px icon area */
    background: transparent !important;
    z-index: 1;
}

.jss-checkbox-label {
    font-size: 16px;
    line-height: 24px;
    font-family: "e-Ukraine-Regular", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color: #000000;
}


/* Custom checkbox overrides for Formio-generated checkboxes */
/* Keep the native input present but make it invisible and clickable. Visual box is drawn on the label (::before). */
.jss-checkbox-label .form-check-input,
.jss-checkbox-label input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    opacity: 0; /* invisible but still receives clicks */
    cursor: pointer;
    z-index: 2;
}

/* Скрыть визуальный input, но сохранить семантику: */
.jss-checkbox-label .form-check-input {
    /* keep for any inputs that don't match the input[type] selector above */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

/* Рисовать коробку в label: */
.jss-checkbox-label .form-check-label {
position: relative;
padding-left: 32px; /* 24px box + 8px gap */
cursor: pointer;
font-size: 16px;
line-height: 24px;
/* font-family: "e-Ukraine-Regular", sans-serif; */
color: #000;
}

.jss-checkbox-label .form-check-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: 2px solid #000;
  border-radius: 0;
  background: #fff;
  box-sizing: border-box;
  z-index: 1; /* коробка под всем */
  pointer-events: none;
}

/* Тонка чорна галочка — той самий origin, що й квадрат (не % від висоти лейбла) */
.jss-checkbox-label .form-check-input:checked + .form-check-label::after,
.jss-checkbox-label .form-check-label:has(.form-check-input:checked)::after {
  content: "";
  position: absolute;
  left: 8px;
  top: calc(50% - 8px);
  width: 6px;
  height: 12px;
  margin: 0;
  border: solid #000;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  box-sizing: border-box;
  pointer-events: none;
  z-index: 1;
  font-size: 0;
  line-height: 0;
}

/* ------------------------------------------------------------------ */
/* Scoped focus rules for Formio forms only (variant 4)               */
/* Add class `formio-no-focus` to the Formio mount elements to apply */
/* These rules remove the mouse-click glow but preserve keyboard focus */
/* using :focus-visible. This will NOT affect inputs outside Formio.  */
/* ------------------------------------------------------------------ */

/* Fallback: some older browsers don't support :focus-visible. If you need
consistent keyboard-only focus detection, consider including the
https://github.com/WICG/focus-visible polyfill. */

.builder-sidebar_search{
    color: #495057;
    border-color: #ced4da;
    
}

input {
    font-family: "e-Ukraine-Regular", "Helvetica", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

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

.formio-form input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.formio-form textarea.form-control,
.formio-form select.form-control {
    padding-left: 12px;
}

/* .col-form-label {
 font-family: "e-Ukraine-Light";   
} */

.jss315 {
        color: rgba(0, 0, 0, 0.6);
}

.jss97 {
    font-size: 12px;
    line-height: 16px;
}

.jss445 {
    /* display: flex; */
    padding: 8px 16px;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
    margin-top: 16px;
    min-height: 64px;
    align-items: center;
    border-radius: 4px;
    margin-bottom: 48px;
}

.jss454{
    padding: 0;
    min-width: auto;
    min-height: auto;
    margin-right: 32px;
    font-size: 18px;
    font-family: e-Ukraine-Regular;
    line-height: 24px;
    letter-spacing: normal;
}

.jss454:hover {
    color: #000000 !important;
    opacity: 1;
    border-bottom: 2px solid #000000 !important;
}

.formio-dialog .card-header {
    background-color: rgba(0, 0, 0, .03);
    border-bottom: 1px solid rgba(0, 0, 0, .125);
    margin-bottom: 0;
    padding: 12px 10px 0;
}

.formio-dialog .float-right {
    float: right !important;
}

/* Dialog / modal form overrides so component editing panel looks like the
   expected Bootstrap-style form (white inputs with borders, proper focus). */
.formio-dialog .card,
.formio-dialog .modal-content {
    background: #fff;
}

.formio-dialog .card-body,
.formio-dialog .modal-body,
.formio-dialog .form-group {
    background: transparent;
}

/* Small gap under the dialog header so the internal Preview area starts lower
   (matches the main Preview tab spacing). Applies to component edit dialogs
   such as the Button component. */
.formio-dialog .card-body {
    padding-top: 12px;
}

/* Hide the component "type" field in the component edit dialog.
   Use :has() to hide the whole form-group reliably; provide fallbacks
   that hide the input and related label if :has() is not supported. */
.formio-dialog .form-group:has(input[name="data[type]"], select[name="data[type]"], textarea[name="data[type]"]) {
    display: none !important;
}

/* Fallbacks for browsers that don't support :has() */
.formio-dialog input[name="data[type]"],
.formio-dialog select[name="data[type]"],
.formio-dialog textarea[name="data[type]"] {
    display: none !important;
}
.formio-dialog label[for$="-type"] {
    display: none !important;
}

/* .formio-dialog .form-control {
    
    /* border-bottom: 2px solid #000 !important; */
    
    
    /* box-shadow: none !important; */
    /* color: #000 !important; */
*/

/* .component-edit-container .form-control {
    background-clip: padding-box;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    color: #495057 !important;
    display: block;
    font-size: 1rem;
    font-weight: 400;
    height: calc(1.5em + .75rem + 2px);
    line-height: 1.5;
    padding: .375rem .75rem;
    transition: border-color .15s 
    ease-in-out, box-shadow .15s 
    ease-in-out;
    width: 100%;
} */

.formio-dialog .form-control:focus {
    border-color: #80bdff !important;
    box-shadow: 0 0 0 .2rem rgba(0,123,255,.25) !important;
    outline: none !important;
}

.formio-dialog .btn {
    box-shadow: none !important;
}

.formio-dialog .card-body {
    flex: 1 1 auto;
    min-height: 1px;
    padding: 1.25rem;
}

div.mdtuddm-button-primary .btn.btn:not(.editRow):not(.removeRow):hover:not([disabled]) {
    color: #000000;
    background: linear-gradient(69deg, #C3AAB2 -4.77%, #9EC 46.72%, #80C0C8 90.23%, #4B8BFA 134.46%) !important;
    transition: background-color 1000ms 
ease-in;
}

.btn-open-json{
    padding: 8px 20px;
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: 40px;
    cursor: pointer;
    font-size: 16px;
}

.btn-open-json:not(.editRow):not(.removeRow):hover:not([disabled]) {
    color: #000000 !important;
    background: linear-gradient(69deg, #C3AAB2 -4.77%, #9EC 46.72%, #80C0C8 90.23%, #4B8BFA 134.46%) !important;
    transition: background-color 1000ms 
ease-in;
}

.no-drop{
    background-color: rgba(0, 0, 0, .03);
    border: rgba(0, 0, 0, .125) 1px solid ;
}

/* Ensure sidebar group buttons wrap long words and don't overflow their box.
   This forces multi-line wrapping for long group titles like "Компоненти" on
   narrow screens. Also ensure the button height can grow to fit wrapped text. */
.builder-group-button,
.builder-sidebar .btn,
.builder-sidebar .btn.builder-group-button {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    line-height: 1.5 !important;
    height: auto !important;
    width: 100%;
    /* padding-top: .6rem !important;
    padding-bottom: .6rem !important; */
}

/* Make sure the text is centered on multiple lines */
.builder-group-button {
    display: block;
    text-align: center;
}

/* Underline style for the General tab inputs to match Formio-style inputs */


/* Per-field wrapper that combines label + input and draws the underline */
.general-field {
    position: relative;
    /* give spacing after the field wrapper instead of on the input */
    margin-top: 10px;
    padding-top: 20px; /* no internal bottom padding, underline sits at the bottom */
    font-family: E-Ukraine-Light;
}

.general-field label {
    font-size: 14px;
    color: #222 !important;
    opacity: 1 !important;
}

/* Floating label behavior for business title field */
.general-field .floating-label {
    position: absolute;
    left: 4px;
    top: 15px; /* default overlaps top half of input */
    font-size: 14px; /* large when inactive and empty */
    color: #222;
    opacity: 1;
    pointer-events: none;
    z-index: 4;
    transition: all 240ms cubic-bezier(.2,.8,.2,1);
    background: rgba(255,255,255,0.95); /* slight background to read over input */
    padding: 0 6px;
    line-height: 1;
}

/* When input is focused or has a value, move label up and reduce size */
.general-field:focus-within .floating-label,
.general-field.has-value .floating-label {
    top: 5px; /* move above input */
    font-size: 11px;
    background: transparent;
    color: #222;
    opacity: 1;
}

.general-field .form-control {
    background: transparent;
    border: none;
    border-radius: 0;
    /* extra top padding to make room for the floating label when it overlays the input */
    padding: 6px 10px 6px 12px;
    box-shadow: none;
    color: #000;
    margin-bottom: 0 !important; /* remove bottom margin from inputs (override inline) */
}

.general-field::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0; /* sit at the very bottom of the wrapper */
    height: 2px;
    background: #000;
    pointer-events: none;
    z-index: 1;
}

.general-field:focus-within::before {
    background: linear-gradient(88deg, #C3AAB2 0.66%, #9EC 57.2%, #80C0C8 75.87%, #4B8BFA 98.72%);
}

/* If Title is empty, show the field underline as red and in the active state (always) */
.general-field.general-field--invalid::before {
    background: linear-gradient(90deg, #FF6B6B 0%, #FF3B3B 100%);
}

.general-field.general-field--invalid:focus-within::before {
    /* keep the red active style when focused */
    background: linear-gradient(90deg, #FF6B6B 0%, #FF3B3B 100%);
}

/* Error message shown under required fields when empty and touched */
.field-error {
    /* Use inline-flex so icon+text stay on the same line and flow with surrounding content */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    color: #FF3B3B;
    margin-top: 8px;
    font-family: 'e-Ukraine-Light';
    font-size: 13px;
    vertical-align: middle;
}
.field-error svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}
.field-error span {
    line-height: 1;
}

.formio-component-editgrid .col-form-label{
    color: #222;
}

.formio-component-editgrid .btn-primary{
    background-color: #fff;
    color: #000;
    border: none;
    border-radius: 30px;
    font-family: 'e-Ukraine-Light';
    font-size: 14px;
    padding: 5px 16px;
    transition: background-color 0.2s ease;
}

.formio-component-editgrid .btn-primary:hover {
    background-color: #E8E8E8;
    color: #000;
}

.formio-component-editgrid .btn-primary:active {
    background-color: #D1D1D1;
    color: #000;
}

.formio-component-editgrid .list-group-item {
    border: none;
    border-bottom: 2px solid rgb(0, 0, 0);
    padding: 0;
}

.formio-component-editgrid .list-group-footer{
    border: none !important;
}

.formio-component-editgrid .list-group-header{
    border: none !important;
}

.btn-secondary {
    background-color: #999;
    color: #fff;
    border: #999;
}

.btn-secondary:hover {
    background-color: #777;
    color: #fff;
}

.bi-terminal{
    content: "\f002"
}

/* === DDM underline input style ===
   Text-like *Latest fields use a bottom rule on the control (formio-ddm.css), not a box border.
   Strip side/top borders here so Bootstrap does not draw a full frame; bottom border comes from formio-ddm. */
.formio-component-textfieldLatest .form-control,
.formio-component-numberLatest .form-control,
.formio-component-emailLatest .form-control,
.formio-component-selectLatest .form-control,
.formio-component-textareaLatest .form-control,
.formio-component-datetimeLatest .form-control,
.formio-component-dateLatest .form-control,
.formio-component-phoneNumberdLatest .form-control,
.formio-component-addressLatest .form-control,
.formio-component-passwordLatest .form-control,
.formio-component-timeLatest .form-control,
.formio-component-currencyLatest .form-control,
.formio-component-signatureLatest .form-control {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

/* Select — Choices outer chrome; bottom rule is on control in formio-ddm */
.formio-component-selectLatest .choices__inner,
.formio-component-selectLatest .form-control.ui.selection.dropdown {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    padding-left: 12px !important;
    min-height: auto !important;
    box-shadow: none !important;
}

/* Open dropdown panel — DDM rules live in formio-ddm.css (no box on outer panel) */

/* === Latest component aliases ===
   Our custom formio components register as "selectLatest", "editgridLatest", etc.
   The DDM CSS targets "formio-component-editgrid", "formio-component-select", etc.
   These rules ensure Latest variants get the same styles.
*/
[class*="formio-component-editgridLatest"] .btn-primary {
    background-color: #fff !important;
    color: #000 !important;
    border: none;
    border-radius: 30px;
    font-family: 'e-Ukraine-Light';
    font-size: 14px;
    padding: 5px 16px;
}
[class*="formio-component-editgridLatest"] .btn-primary:hover {
    background-color: #E8E8E8 !important;
    color: #000 !important;
}
[class*="formio-component-editgridLatest"] .btn-primary:active {
    background-color: #D1D1D1 !important;
    color: #000 !important;
}
[class*="formio-component-editgridLatest"] .col-form-label {
    color: #222;
}
[class*="formio-component-editgridLatest"] .list-group-item {
    border: none;
    border-bottom: 2px solid rgb(0, 0, 0);
    padding: 0;
}
[class*="formio-component-editgridLatest"] .list-group-footer {
    border: none;
}
[class*="formio-component-editgridLatest"] .list-group-header {
    border: none !important;
}
[class*="formio-component-datetimeLatest"] .input-group {
    border: none;
    border-bottom: 2px solid #000;
    border-radius: 0;
    background: transparent;
}
[class*="formio-component-datetimeLatest"] .form-control {
    border: none;
    box-shadow: none;
    background: transparent;
}
[class*="formio-component-datetimeLatest"] .input-group-addon,
[class*="formio-component-datetimeLatest"] .input-group-append {
    border: none;
    background: transparent;
}

/* === Flatpickr calendar popup — DDM style === */
.flatpickr-calendar {
    font-family: 'e-Ukraine-Regular', Arial, sans-serif !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
    border: none !important;
    padding: 8px !important;
}

.flatpickr-months {
    padding: 8px 4px !important;
}

.flatpickr-months .flatpickr-month {
    height: 36px !important;
}

.flatpickr-current-month {
    font-family: 'e-Ukraine-Regular', Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
}

.flatpickr-current-month select.flatpickr-monthDropdown-months {
    font-family: 'e-Ukraine-Regular', Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
}

.flatpickr-weekdays {
    padding: 0 4px !important;
}

.flatpickr-weekday {
    font-family: 'e-Ukraine-Light', Arial, sans-serif !important;
    font-size: 13px !important;
    color: #888 !important;
    font-weight: 400 !important;
}

.flatpickr-day {
    font-family: 'e-Ukraine-Regular', Arial, sans-serif !important;
    font-size: 14px !important;
    border-radius: 50% !important;
    height: 36px !important;
    line-height: 36px !important;
    max-width: 36px !important;
    margin: 2px !important;
}

.flatpickr-day:hover {
    background: #f0f0f0 !important;
    border-color: transparent !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
}

.flatpickr-day.today {
    border-color: #000 !important;
}

.flatpickr-day.today:hover {
    background: #000 !important;
    color: #fff !important;
}

/* Flatpickr navigation arrows */
.flatpickr-prev-month,
.flatpickr-next-month {
    padding: 8px !important;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
    width: 14px !important;
    height: 14px !important;
}

/* === EditGrid modal (component-settings dialog) — DDM style === */
/* Formio uses .component-settings class for editgrid modal dialogs */
.formio-dialog.formio-dialog-theme-default.component-settings {
    background: rgba(0, 0, 0, 0.3) !important;
    padding: 0 !important;
}

.formio-dialog.formio-dialog-theme-default.component-settings > .formio-dialog-content {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: #fff !important;
    border-radius: 0 !important;
    padding: 40px 48px 60px 48px !important;
    max-width: 700px !important;
    width: 90% !important;
    max-height: 85vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.24) !important;
    animation: none !important;
}

/* Modal title — outside scroll area */
.formio-dialog.component-settings > .formio-dialog-content > .editgrid-row-modal-title {
    flex-shrink: 0 !important;
    font-family: 'e-Ukraine-Light', Arial, sans-serif !important;
    font-size: 38px !important;
    font-weight: 300 !important;
    line-height: 48px !important;
    letter-spacing: -0.00833em !important;
    color: #222 !important;
    margin: 0 48px 32px 0 !important;
    padding: 0 !important;
}

/* Form fields scroll inside the inner wrapper div, not on .formio-dialog-content */
.formio-dialog.component-settings > .formio-dialog-content > .formio-dialog-body-scroll,
.formio-dialog.component-settings > .formio-dialog-content > div:not(.editgrid-row-modal-title) {
    overflow-y: auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch;
}

.formio-dialog.component-settings > .formio-dialog-content > button.btn.btn-primary {
    flex-shrink: 0 !important;
    margin-top: 16px !important;
    align-self: flex-start !important;
}

/* Close button in modal */
.formio-dialog.component-settings > .formio-dialog-content > .btn-close,
.formio-dialog.component-settings > .formio-dialog-content > .formio-dialog-close,
.formio-dialog.component-settings .formio-dialog-close {
    position: absolute !important;
    top: 16px !important;
    right: 24px !important;
    float: none !important;
    font-size: 28px !important;
    color: #222 !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    z-index: 20 !important;
}

/* Save button in editgrid modal */
.formio-dialog.component-settings .btn-primary {
    background: #000 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 40px !important;
    font-family: 'e-Ukraine-Regular', Arial, sans-serif !important;
    font-size: 16px !important;
    padding: 12px 32px !important;
    text-transform: none !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

.formio-dialog.component-settings .btn-primary:hover {
    background: #222 !important;
}

/* Cancel / danger button in editgrid modal */
.formio-dialog.component-settings .btn-danger,
.formio-dialog.component-settings .btn-default {
    background: #fff !important;
    color: #000 !important;
    border: 2px solid #000 !important;
    border-radius: 40px !important;
    font-family: 'e-Ukraine-Regular', Arial, sans-serif !important;
    font-size: 16px !important;
    padding: 10px 32px !important;
    text-transform: none !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

.formio-dialog.component-settings .btn-danger:hover,
.formio-dialog.component-settings .btn-default:hover {
    background: #f5f5f5 !important;
}

/* Labels in editgrid modal */
.formio-dialog.component-settings .form-group label,
.formio-dialog.component-settings .col-form-label {
    font-family: 'e-Ukraine-Light', Arial, sans-serif !important;
    font-size: 14px !important;
    color: #222 !important;
}

/* Inputs in editgrid modal */
.formio-dialog.component-settings .form-control {
    border: none !important;
    border-bottom: 2px solid #000 !important;
    border-radius: 0 !important;
    font-family: 'e-Ukraine-Regular', Arial, sans-serif !important;
    font-size: 16px !important;
    background-color: #fff !important;
    color: #222 !important;
    margin-bottom: 0 !important;
    padding: 8px 0 !important;
    box-shadow: none !important;
}

.formio-dialog.component-settings .form-control:focus:not(:disabled, [readonly]) {
    border-bottom-color: transparent !important;
    background-color: #fff !important;
    background-image: linear-gradient(88deg, #C3AAB2 0.66%, #9EC 57.2%, #80C0C8 75.87%, #4B8BFA 98.72%) !important;
    background-size: 100% 2px !important;
    background-position: bottom left !important;
    background-repeat: no-repeat !important;
    outline: none !important;
    box-shadow: none !important;
}

.formio-dialog.component-settings .form-control:is([disabled], [readonly]) {
    border-bottom-color: rgba(0, 0, 0, 0.22) !important;
}

/* Select (Choices) in editgrid modal */
.formio-dialog.component-settings .choices__inner {
    border: none !important;
    border-bottom: 2px solid #000 !important;
    border-radius: 0 !important;
    background-color: #fff !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-position: bottom left !important;
    background-size: 100% 2px !important;
}

.formio-dialog.component-settings .choices:focus-within:not(.is-disabled) .choices__inner {
    border-bottom-color: transparent !important;
    background-color: #fff !important;
    background-image: linear-gradient(88deg, #C3AAB2 0.66%, #9EC 57.2%, #80C0C8 75.87%, #4B8BFA 98.72%) !important;
    background-size: 100% 2px !important;
    background-position: bottom left !important;
    background-repeat: no-repeat !important;
}

.formio-dialog.component-settings .choices.is-disabled .choices__inner {
    border-bottom-color: rgba(0, 0, 0, 0.22) !important;
}

/* Date/datetime row — single line on .input-group */
.formio-dialog.component-settings .input-group {
    border: none !important;
    border-bottom: 2px solid #000 !important;
    border-radius: 0 !important;
    background-color: #fff !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-position: bottom left !important;
    background-size: 100% 2px !important;
}

.formio-dialog.component-settings .input-group:focus-within:not(:has(.form-control:is([disabled], [readonly]))) {
    border-bottom-color: transparent !important;
    background-color: #fff !important;
    background-image: linear-gradient(88deg, #C3AAB2 0.66%, #9EC 57.2%, #80C0C8 75.87%, #4B8BFA 98.72%) !important;
    background-size: 100% 2px !important;
    background-position: bottom left !important;
    background-repeat: no-repeat !important;
    box-shadow: none !important;
}

.formio-dialog.component-settings .input-group .form-control {
    border-bottom: none !important;
}

.formio-dialog.component-settings .input-group:has(.form-control:is([disabled], [readonly])) {
    border-bottom-color: rgba(0, 0, 0, 0.22) !important;
}

/* === EditGrid inline Save/Cancel buttons — DDM style === */
.formio-component-editgridLatest .editgrid-actions button,
.formio-component-editgrid .editgrid-actions button,
.list-group-item .btn.btn-primary:not(.editRow):not(.removeRow),
.list-group-item button[ref="editgrid-editgridLatest-saveRow"],
.list-group-item button[class*="saveRow"] {
    background: #000 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 40px !important;
    font-family: 'e-Ukraine-Regular', Arial, sans-serif !important;
    font-size: 16px !important;
    padding: 12px 32px !important;
    text-transform: none !important;
    cursor: pointer !important;
}

.list-group-item button[class*="cancelRow"],
.formio-component-editgridLatest .btn-danger:not(.removeRow),
.formio-component-editgrid .list-group-item .btn-danger:not(.removeRow) {
    background: #fff !important;
    color: #000 !important;
    border: 2px solid #000 !important;
    border-radius: 40px !important;
    font-family: 'e-Ukraine-Regular', Arial, sans-serif !important;
    font-size: 16px !important;
    padding: 10px 32px !important;
    text-transform: none !important;
    cursor: pointer !important;
}

/* "Add Another" / "Додати" button — DDM style */
.formio-component-editgridLatest > button.btn,
.formio-component-editgrid > button.btn,
[class*="formio-component-editgridLatest"] > button.btn {
    background: #fff !important;
    color: #000 !important;
    border: 2px solid #000 !important;
    border-radius: 40px !important;
    font-family: 'e-Ukraine-Regular', Arial, sans-serif !important;
    font-size: 14px !important;
    padding: 8px 24px !important;
    text-transform: none !important;
    margin-top: 12px !important;
    margin-bottom: 1rem !important;
}

.formio-component-editgridLatest > button.btn:hover,
.formio-component-editgrid > button.btn:hover,
[class*="formio-component-editgridLatest"] > button.btn:hover {
    background: #f5f5f5 !important;
}