.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.justify-center {
    justify-content: center;
    width: 100%;
}

.align-center {
    display: flex;
    align-items: center;
}

.space-between {
    justify-content: space-between;
    width: 100%;
}

.ddk-container .control .control--item {
    padding: 2px;
    display: contents !important;
    justify-content: flex-start;
    align-items: center;
}

.ddk-container .ddk-container .textarea {
    width: 100%;
}

.ddk-container .control label {
    padding: 2px;
    display: inline-flex !important;
}

.app-body {
    /* background-image: url("https://images.unsplash.com/photo-1557682250-33bd709cbe85?q=80&w=1658&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") !important; */
    /* background-image: url("2025_gradient.png"); - moved to inline style in Python */
    background-size: cover;
}

.mantine-pildck {
    font-weight: 500;
    font-size: 16pt;
}

.mantine-pildck:hover {
    background-color: transparent;
}

/* login modal color */
.mantine-114bj9h {
    background-color: #000000 !important;
    border: #000000 solid 1px;
}

/* Force login card background to be black */
#login-card .mantine-Card-root {
    background-color: #000000 !important;
}

/* Also target any card that might be the login modal */
.mantine-Card-root {
    background-color: #000000 !important;
}

.mantine-UnstyledButton-root.mantine-Accordion-control.mantine-xizyzk:hover {
    background-color: #333333 !important;
    transition: background-color .3s;
}

/* Fix accordion control hover to be readable */
.mantine-Accordion-control:hover {
    background-color: #333333 !important;
    color: white !important;
}

.mantine-Accordion-control:hover .mantine-Accordion-label {
    color: white !important;
}

/* Fix accordion control hover for contained variant */
.mantine-Accordion-root[data-variant="contained"] .mantine-Accordion-control:hover {
    background-color: #333333 !important;
    color: white !important;
}

/* Fix accordion control active/selected state */
.mantine-Accordion-control[data-active="true"] {
    background-color: #333333 !important;
    color: white !important;
}

.mantine-Accordion-control[data-active="true"] .mantine-Accordion-label {
    color: white !important;
}

/* Fix accordion and modal borders to match dark theme */
.mantine-Accordion-item {
    border-bottom: 1px solid #333333 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

.mantine-Accordion-root {
    border: 1px solid #333333 !important;
}

.mantine-Modal-content {
    border: 1px solid #333333 !important;
    background-color: #000000 !important;
}

.mantine-Modal-header {
    background-color: #000000 !important;
    color: white !important;
    border-bottom: 1px solid #333333 !important;
}

.mantine-Modal-title {
    color: white !important;
}

.mantine-Card-root {
    border: 1px solid #333333 !important;
}

/* .mantine-Card-root {
    background-color: rgb(74, 74, 79);
} *
.mantine-Card-root {
    background-color: rgb(0, 0, 0);
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 13%), 0 6px 20px 0 rgba(0, 0, 0, 0.5) !important;
    border: transparent;
}

.layout-header {
    background-color: rgb(0, 0, 0) !important;
}

.ddk-container .layout-header[data-contentalignment="spread"]>div:not(.layout-logo):not(.layout-title),
.ddk-container .layout-header[data-contentalignment="spread"]>input {
    flex: 0 !important;
}

.mantine-Timeline-itemTitle {
    color: white;
}

.mantine-Accordion-label {
    color: white;
    font-size: 16pt !important;
}

/* Fix accordion control hover to be readable */
.mantine-Accordion-control:hover {
    background-color: #333333 !important;
    color: white !important;
}

.mantine-Accordion-control:hover .mantine-Accordion-label {
    color: white !important;
}

/* Fix accordion control hover for contained variant */
.mantine-Accordion-root[data-variant="contained"] .mantine-Accordion-control:hover {
    background-color: #333333 !important;
    color: white !important;
}

/* Fix accordion control active/selected state */
.mantine-Accordion-control[data-active="true"] {
    background-color: #333333 !important;
    color: white !important;
}

.mantine-Accordion-control[data-active="true"] .mantine-Accordion-label {
    color: white !important;
}

/* Fix accordion and modal borders to match dark theme */
.mantine-Accordion-item {
    border-bottom: 1px solid #333333 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

.mantine-Accordion-root {
    border: 1px solid #333333 !important;
}

.mantine-Modal-content {
    border: 1px solid #333333 !important;
    background-color: #000000 !important;
}

.mantine-Modal-header {
    background-color: #000000 !important;
    color: white !important;
    border-bottom: 1px solid #333333 !important;
}

.mantine-Modal-title {
    color: white !important;
}

.mantine-Card-root {
    border: 1px solid #333333 !important;
}

/* Remove top padding/margin from accordion panel content */
.mantine-Accordion-panel {
    padding-top: 5px !important;
    background-color: #000000 !important;
}

/* Target the first child in accordion panels to remove top spacing */
.mantine-Accordion-panel > *:first-child {
    margin-top: 0px !important;
    padding-top: 0px !important;
}

/* Make Alert components visible with proper styling */
.mantine-Accordion-panel .mantine-Alert-root {
    background-color: #4a3b5a !important;
    border: 1px solid #6b4c7d !important;
    color: #ffffff !important;
    padding: 12px !important;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    border-radius: 6px !important;
    opacity: 1 !important;
    font-weight: 500 !important;
}

.submit-button {
    width: 100%;
    transition: left 0.2s ease 0s;
    color: white !important;
    text-transform: capitalize !important;
    font-size: smaller !important;
    font-weight: 500 !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: linear-gradient(to right, rgb(255, 44, 109) 0%, rgb(255, 44, 109) 50%, rgb(127, 228, 255) 100%) !important;
    /* top: 0px;
    left: -100%; */

}

/* submission modal background color */
.mantine-nm3406 {
    background-color: #000000 !important;
}

/* submission modal title color */
.mantine-1o492w4 {
    color: white !important;
}

.login-button {
    transition: left 0.2s ease 0s;
    color: white !important;
    text-transform: capitalize !important;
    font-size: smaller !important;
    font-weight: 500 !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: linear-gradient(to right, rgb(255, 44, 109) 0%, rgb(255, 44, 109) 50%, rgb(127, 228, 255) 100%) !important;
    width: 132px !important;
    /* top: 0px;
    left: -100%; */

}

.logout-button {
    transition: left 0.2s ease 0s;
    margin-right: 20px;
    height: 70%;
    color: white !important;
    text-transform: capitalize !important;
    font-size: 10pt !important;
    font-weight: 500 !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: linear-gradient(to right, rgb(255, 44, 109) 0%, rgb(255, 44, 109) 50%, rgb(127, 228, 255) 100%) !important;
    /* top: 0px;
    left: -100%; */

}

.logout-button-container {
    display: contents !important;
}

.confirm-button {
    width: 150px;
    transition: left 0.2s ease 0s;
    color: white !important;
    text-transform: capitalize !important;
    font-size: medium !important;
    font-weight: 500 !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: linear-gradient(to right, rgb(255, 44, 109) 0%, rgb(255, 44, 109) 50%, rgb(127, 228, 255) 100%) !important;
    /* top: 0px;
    left: -100%; */

}

.change-button {
    width: 150px;
    transition: left 0.2s ease 0s;
    color: white !important;
    text-transform: capitalize !important;
    font-size: medium !important;
    font-weight: 500 !important;
    border: 0 !important;
    opacity: 60% !important;
    border-radius: 7px !important;
    background: linear-gradient(to right, rgb(255, 44, 109) 0%, rgb(255, 44, 109) 50%, rgb(127, 228, 255) 100%) !important;
    /* top: 0px;
    left: -100%; */

}

.input:invalid {
    outline: solid rgb(255, 44, 109) !important;
}

/* control item label text size */
.mantine-txyyrj {
    font-size: 13pt;
}

/* styles the mantine alert  */
.mantine-1eb2v51 {
    background-color: rgb(197, 183, 251) !important;
}

#selections_modal-body {
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
}

#selections_modal-title {
    font-weight: 500;
    font-size: 14pt;
}

input[type="checkbox"]:checked {
    border: none;
    outline: deeppink !important;
}

.mantine-anq6vi[data-active] {
    border-width: 3px;
}

.username {
    color: white;
}

.mantine-Accordion-chevron {
    color: white;
}

.mantine-Card-root {
    margin: 10px;
}

.stepper-circle-active {
    width: 15px;
    height: 15px;
    background-color: #ffffff;
    border-radius: 50%;
    border: 3px solid #ff2c6d;
}

.stepper-circle-inactive {
    width: 15px;
    height: 15px;
    background-color: #ffffff;
    border-radius: 50%;
    border: 3px solid #dee2e6;
}

.stepper-line-active {
    /* width: 100px; */
    height: 4px;
    background-color: #ff2c6d;
}

.stepper-line-inactive {
    /* width: 100px; */
    height: 4px;
    background-color: #999999;
}

.mantine-xoj88x {
    color: white;
}

.mantine-Accordion-item {
    border-bottom: 1px solid #6a6a6a;
}

.mantine-Input-input {
    color: white !important;
}

.non_default_configs {
    width: 100% !important;
}


.ddk-container .layout-header[data-contentalignment="spread"]>div:not(.layout-logo):not(.layout-title),
.ddk-container .layout-header[data-contentalignment="spread"]>input {
    flex: unset !important;
    border: #000000;
}

.mantine-Accordion-label {
    color: white;
    font-size: 16pt !important;
}

.mantine-17yq1a2 {
    border: #000000 solid 1px;
}

/* Fix form input visibility */
.mantine-Input-input {
    background-color: #2a2a2a !important;
    border: 1px solid #555555 !important;
    color: white !important;
}

.mantine-Input-input:focus {
    border-color: #ff2c6d !important;
    box-shadow: 0 0 0 2px rgba(255, 44, 109, 0.2) !important;
}

.mantine-NumberInput-input {
    background-color: #2a2a2a !important;
    border: 1px solid #555555 !important;
    color: white !important;
}

.mantine-NumberInput-input:focus {
    border-color: #ff2c6d !important;
    box-shadow: 0 0 0 2px rgba(255, 44, 109, 0.2) !important;
}

.mantine-Select-input {
    background-color: #2a2a2a !important;
    border: 1px solid #555555 !important;
    color: white !important;
}

.mantine-Select-input:focus {
    border-color: #ff2c6d !important;
    box-shadow: 0 0 0 2px rgba(255, 44, 109, 0.2) !important;
}

.mantine-Radio-label {
    color: white !important;
    padding-left: 8px !important;
}

/* Reduce spacing in form controls */
.ddk-container .control .control--item {
    padding: 2px;
    display: contents !important;
    justify-content: flex-start;
    align-items: center;
}

/* Target the Space components that are creating huge gaps */
.mantine-Accordion-panel .mantine-Space-root {
    height: 5px !important;
    min-height: 5px !important;
}

/* Target the specific spacing between form question groups */
.mantine-Accordion-panel .ddk-container {
    margin-bottom: 10px !important;
}

/* Fix line-height that's causing huge vertical spacing */
.mantine-Accordion-panel * {
    line-height: 1.5 !important;
}

/* Specifically target text elements */
.mantine-Accordion-panel .mantine-Text-root {
    line-height: 1.4 !important;
}

/* Fix any global line-height issues */
body, html {
    line-height: 1.5 !important;
}

/* Remove top padding/margin from accordion panel content */
.mantine-Accordion-panel {
    padding-top: 5px !important;
    background-color: #000000 !important;
}

/* Target the first child in accordion panels to remove top spacing */
.mantine-Accordion-panel > *:first-child {
    margin-top: 0px !important;
    padding-top: 0px !important;
}

/* Make Alert components visible with proper styling */
.mantine-Accordion-panel .mantine-Alert-root {
    background-color: #4a3b5a !important;
    border: 1px solid #6b4c7d !important;
    color: #ffffff !important;
    padding: 12px !important;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    border-radius: 6px !important;
    opacity: 1 !important;
    font-weight: 500 !important;
}

/* Target any blue info boxes specifically */
.mantine-Accordion-panel [style*="background-color: rgb(197, 183, 251)"],
.mantine-Accordion-panel .mantine-1eb2v51 {
    margin-bottom: 10px !important;
}