@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

html, body {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.button-link {
    text-decoration: unset;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.title {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-bottom: 0.625rem;
}

.title.title-secondary {
    padding-top: 0.313rem;
    padding-bottom: 0;
    color: var(--bs-secondary-color, var(--DS-color-content-neutral-default-rest));
}

.title-header-text {
    font-size: 2.5rem;
    line-height: 3rem;
    font-weight: 600;
    letter-spacing: 0rem;
    padding: 0.3125rem 0;
}

.title-content-text {
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 2.5rem;
    letter-spacing: 0rem;
}

.main-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.block-content {
    width: 31.25rem;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    max-width: 100%;
}

.icon {
    width: var(--icon-width);
    height: var(--icon-height);
    background-color: currentcolor;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: var(--icon-mask-image);
    mask-image: var(--icon-mask-image);
}

.or {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.3125rem 0;
}

.or .or-line {
    border-bottom: 1px solid var(--bs-body-color, var(--DS-color-content-neutral-default-rest));
    width: 100%;
    opacity: 0.2;
}

.or .or-text {
    padding: 0 0.625rem 0px 0.625rem;
    font-size: 0.75rem;
    line-height: 1.125rem;
    color: var(--bs-body-color, var(--DS-color-content-neutral-default-rest));
    opacity: 0.7;
}

.links-area {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding-top: 0.625rem;
}

.links-container {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    align-items: center;
}

.links-container .dot {
    height: 0.3125rem;
    width: 0.3125rem;
    margin: 0 0.1875rem;
    border-radius: 50%;
    background-color: var(--bs-body-color, var(--DS-color-content-neutral-default-rest));
    opacity: 0.7;
}

.manage-layout {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.info-message::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.15;
    background: var(--bs-primary, var(--DS-primary-90));
    z-index: -1;
}

.info-message {
    padding: 0.625rem 1rem 0.625rem 1rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.info-message.info-panel {
    margin-bottom: 0.625rem;
}

.manage-content {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.large-input {
    height: 4.3125rem;
    font-size: 1.875rem;
}

.title-content-text-secondary {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.button-group {
    display: flex;
    flex-direction: row;
    gap: 0.625rem;
}

.confirm-button {
    margin-top: 0.3125rem;
}

.display-desktop {
    display: block;
}

.display-mobile {
    display: none;
}

.icon-external-provider {
    width: var(--icon-provider-width);
    height: var(--icon-provider-height);
    background-image: var(--icon-provider-background-image);
    background-position: center;
    background-repeat: no-repeat;
}

@media (max-width: 768px) {
    .display-desktop {
        display: none;
    }

    .display-mobile {
        display: block;
    }
}
.combo-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap; /* remove wrap if you always want a single line */
}

    .combo-row label {
        margin-right: 0.25rem;
    }

    .combo-row select,
    .combo-row .and-or-selector {
        min-width: 10rem;
    }
/* Brand palette (from client site) */
:root {
    --hcs-navy: #183a66;
    --hcs-navy-2: #1f4477;
    --hcs-green: #67b54b;
    --hcs-green-2: #5aa542;
    --hcs-bg: #f5f5f5;
    --hcs-text: #2b2b2b;
    --hcs-muted: #6c757d;
}
/* App shell */
body {
    background: var(--hcs-bg);
    color: var(--hcs-text);
    font-family: "Montserrat","Segoe UI",Arial,sans-serif;
}

.hcs-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.hcs-header {
    background: #fff;
    border-bottom: 1px solid #eaeaea;
    position: sticky;
    top: 0;
    z-index: 10;
}

.hcs-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.hcs-brand {
    height: 48px;
}

.hcs-nav {
    flex: 1;
}

.hcs-actions {
    display: flex;
    gap: .5rem;
}

.hcs-content {
    max-width: 1200px;
    margin: 1rem auto;
    padding: 0 1rem;
}

.hcs-footer {
    background: var(--hcs-navy);
    color: #fff;
    margin-top: auto;
    padding: .75rem 1rem;
    text-align: center;
}
/* CTA buttons */
.dx-button.btn-primary, .btn-primary {
    background: var(--hcs-green);
    color: #fff;
    border: none;
    font-weight: 700;
    padding: .6rem 1rem;
    border-radius: .25rem;
}

    .dx-button.btn-primary:hover, .btn-primary:hover {
        background: var(--hcs-green-2);
    }
/* Grid theming */
.dxbl-grid {
    background: #fff;
    border-radius: .5rem;
    box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

    .dxbl-grid .dxbl-grid-header {
        background: var(--hcs-navy);
        color: #fff;
    }

    .dxbl-grid .dxbl-grid-row:hover {
        background: rgba(24,58,102,.06);
    }
/* Subtle banner for page titles */
.section-banner {
    background: #ffffff;
    border: 1px solid #e6e9ef;
    border-radius: .5rem;
    padding: .75rem 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.04);
}

    .section-banner h3 {
        margin: 0;
        font-size: 1.75rem;
        font-weight: 700;
        color: var(--hcs-navy);
        position: relative;
    }

        /* understated accent underline in brand green */
        .section-banner h3::after {
            content: "";
            display: block;
            width: 64px;
            height: 4px;
            margin-top: .35rem;
            background: var(--hcs-green);
            border-radius: 2px;
        }

.new-btn {
    margin-left: 1rem;
}
.command-center {
    text-align: center;
}
/* Make header/footer stick and leave space for scrollbars */
.my-style .dxbl-popup-header,
.my-style .dxbl-popup-footer {
    position: sticky;
    top: 0;
    bottom: 0;
    background: #fff;
    z-index: 1;
}
.hideweek .dxbl-calendar-week-number,
.hideweek .dxbl-calendar-days-of-week th:first-child {
    visibility: hidden;
}


    /* Title styling */
    .my-style .dxbl-popup-header .dxbl-popup-title,
    .my-style .dxbl-popup-header .dxbl-popup-caption {
        font-size: 1.25rem;
        font-weight: 600;
        color: #fff;
        letter-spacing: .01em;
        margin: 0;
    }

    /* Green accent bar at bottom of header */
    .my-style .dxbl-popup-header::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--hcs-green), var(--hcs-green-2));
    }

    /* Style the close button */
    .my-style .dxbl-popup-header .dxbl-popup-header-button,
    .my-style .dxbl-popup-header .dxbl-btn-close {
        color: #fff;
        opacity: .8;
        transition: opacity .15s;
    }

        .my-style .dxbl-popup-header .dxbl-popup-header-button:hover,
        .my-style .dxbl-popup-header .dxbl-btn-close:hover {
            opacity: 1;
            background: rgba(255,255,255,.15);
            border-radius: .25rem;
        }
/* Darken the backdrop behind the modal */
.my-style.dxbl-modal::before,
.dxbl-modal-back {
  background: rgba(24, 58, 102, .5); /* navy-tinted overlay */
  backdrop-filter: blur(2px);
}

/* Style FormLayoutGroups as cards inside the popup edit form */
.my-style .dxbl-formlayout-group,
.my-style dxbl-form-layout-group {
    background: #F8F8F8; /* Subtle off-white/light gray background */
    border: 1px solid #e6e9ef;
    border-left: 5px solid var(--hcs-green); /* Brand color accent on left */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(24, 58, 102, 0.06);
    padding: .75rem .75rem !important;
    box-sizing: border-box;
}

/* Add top margin to the first card for spacing from header */
.my-style .dxbl-formlayout-group:first-of-type,
.my-style dxbl-form-layout-group:first-of-type {
  margin-top: 2rem !important;
}

/* Add subtle hover effect */
.my-style .dxbl-formlayout-group:hover,
.my-style dxbl-form-layout-group:hover {
  box-shadow: 0 4px 12px rgba(24, 58, 102, 0.1);
  transform: translateY(-1px);
  transition: all 0.2s ease;
}

/* Ensure the group body doesn't add extra padding */
.my-style .dxbl-formlayout-group .dxbl-group-body-content,
.my-style dxbl-form-layout-group .dxbl-group-body-content {
  padding: 0 !important;
}

/* Add spacing between form items inside cards */
.my-style .dxbl-formlayout-group .dxbl-fl-item,
.my-style dxbl-form-layout-group dxbl-form-layout-item {
  margin-bottom: 1rem; /* Increased spacing between items */
}

.my-style .dxbl-formlayout-group .dxbl-fl-item:last-child,
.my-style dxbl-form-layout-group dxbl-form-layout-item:last-child {
  margin-bottom: 0;
}

/* Override DevExpress popup max-width to allow wider edit form */
/* Target the dxbl-modal-dialog element directly */
.my-style.dxbl-popup,
.my-style dxbl-modal-dialog.dxbl-popup {
  --dxbl-popup-max-width: 1000px !important;
}

/* Ensure the modal dialog and content expand to use the available width */
.my-style dxbl-modal-dialog,
.my-style dxbl-modal-dialog .dxbl-modal-content {
  width: 1000px !important;
  max-width: min(1400px, calc(100vw - 56px)) !important;
}

/* Responsive: adjust for smaller screens */
@media (max-width: 1000px) {
  .my-style.dxbl-popup,
  .my-style dxbl-modal-dialog.dxbl-popup {
    --dxbl-popup-max-width: calc(100vw - 56px) !important;
  }
  
  .my-style dxbl-modal-dialog,
  .my-style dxbl-modal-dialog .dxbl-modal-content {
    width: calc(100vw - 56px) !important;
    max-width: calc(100vw - 56px) !important;
  }
}

/* Add margin to the outer dxbl-row that contains form layout groups */
.my-style.dxbl-formlayout > .dxbl-row,
.my-style.dxbl-fl > .dxbl-row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  gap: 1rem; /* Restore spacing between cards */
}

/* Add margin to inner dxbl-row elements inside each form layout group */
.my-style.dxbl-formlayout-group > .dxbl-row,
.my-style dxbl-form-layout-group > .dxbl-row {
  margin-bottom: 0;
  margin-right: 0 !important;
}

/* Reduce the column spans slightly to accommodate the gap */
.my-style .dxbl-formlayout-group.dxbl-col-lg-6,
.my-style dxbl-form-layout-group.dxbl-col-lg-6 {
  flex: 0 0 calc(50% - 0.5rem) !important;
  max-width: calc(50% - 0.5rem) !important;
}
.logged-out-page {
    max-width: 600px;
}

    /* Optional: align with main layout spacing if you use something similar elsewhere */
    .logged-out-page .card {
        border-radius: 0.5rem;
    }