@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    font-family: 'Roboto', sans-serif;
    background: #f4f7fa; /* Assuming this is the background color you want */
    font-size: 12px;
    color: #495057; /* Default text color */
    overflow-x: hidden;
}

a, .btn-link {
    color: #006bb7;
}

.container {
    max-width: 1200px;
    margin: auto;
    padding: 20px;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

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

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.logout-button {
    border: none;
    margin: 0 10px;
    background: transparent;
    color: #006bb7;
}

    .logout-button:hover {
        text-decoration: underline;
    }


/* SPINNER */
.loading-spinner-overlay {
    position: fixed; /* or 'absolute' if 'fixed' doesn't work as expected */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    display: flex;
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    z-index: 1050; /* Make sure it's above other elements */
}

.loading-spinner-container {
    display: flex;
}


/* SIDEBAR */
.sidebar {
    height: auto !important;
}

.nav-item {
    /* This will remove the list bullet and any default margin/padding */
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.nav-link {
    /* General style for your navigation links */
    display: block;
    padding: 0;
    color: #fff; /* Change this to the color you want for text */
    text-decoration: none;
    background-color: #6c757d; /* Dark grey, change to your default background color */
    margin-bottom: 2px; /* Creates a small gap between menu items */
}

    .nav-link:hover, .nav-link.active {
        /* Hover and active state styles */
        color: #fff; /* White text on hover and active state */
        background-color: #495057; /* Slightly darker grey on hover, change to your preference */
    }

    .nav-link::before {
        /* This creates the red accent to the left */
        content: '';
        display: inline-block;
        width: 3px; /* Width of the red line */
        height: 100%;
        background-color: transparent; /* Transparent by default, will change on hover/active */
        float: left;
        margin-right: 10px; /* Space between the red line and text */
        transition: background-color 0.3s; /* Smooth transition for background color change */
    }

    .nav-link:hover::before, .nav-link.active::before {
        /* Change the background color on hover and active state to red */
        background-color: #ff0000;
    }

    /* Additional styles for the active nav-link */
    .nav-link.active {
        font-weight: normal; /* Make the active link bold */
    }

/* MY CSS */

/* LOGIN */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    max-width: 400px; /* Set a max-width */
    margin: auto; /* Centering */
    color: #4e5e78;
}

    .login-container .card-header {
        background-color: white; /* The light blue background */
        text-align: center; /* Center the text */
        border: none;
    }

.login-card {
    /* ... existing styles ... */
    box-shadow: none; /* Updated shadow */
    background: white; /* Ensure the background is white */
    border: none; /* Remove border */
    width: 400px;
}

    .login-card .card-body {
        padding-top: 0;
    }

/* ACCOUNT */
.account-container {
    display: flex;
    justify-content: center;
    align-items: center;
    /*height: 100vh;*/
    max-width: 600px; /* Set a max-width */
    margin: auto; /* Centering */
    color: #4e5e78;
}

    .account-container .card-header {
        background-color: white; /* The light blue background */
        text-align: center; /* Center the text */
        border: none;
    }

.account-card {
    /* ... existing styles ... */
    box-shadow: none; /* Updated shadow */
    background: white; /* Ensure the background is white */
    border: none; /* Remove border */
    width: 600px;
    padding: 20px;
}

    .account-card .card-body {
        padding-top: 0;
    }

        .account-card .card-body .btn {
            margin: auto;
        }

    .account-card .nav-link {
        color: #4e5e78;
    }

        .account-card .nav-link:hover {
            color: white;
            padding: 5px;
            border-radius: 0;
        }

    .account-card .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
        padding: 5px;
        border-radius: 0;
    }


/* Adjust the input fields */
.form-control {
    /*background-color: transparent;*/
    border: none;
    border-bottom: 2px solid #ced4da;
    border-radius: 0;
    box-shadow: none;
}

    /* Focus styles */
    .form-control:focus {
        border-bottom: 2px solid #007bff; /* Match your focus color */
        box-shadow: none;
    }

/* Adjust the primary button */
.login-card .btn-primary {
    background-color: #007bff; /* Match the blue color */
    border-color: #007bff; /* Match the border color */
    width: 100%;
    margin: 0;
}

/* On hover of the primary button */
.btn-primary:hover {
    background-color: #0056b3; /* A shade darker on hover */
    border-color: #0056b3;
}

.login-container .form-check {
    display: flex;
    align-items: center; /* This will vertically center align the items in the .form-check div */
    justify-content: space-between;
    padding: .375rem 0; /* This provides some padding around the items */
    margin: 10px 0;
}

.login-container .login-remember-me {
    margin-top: 0; /* Override Bootstrap's default margin-top for checkboxes */
    margin-right: .5rem; /* Provide some space between the checkbox and the label text */
}

.login-container .form-check-input {
    margin-left: 0; /* Remove default bottom margin from label */
    margin-right: 5px;
}

.login-container .form-check-label {
    margin-bottom: 0; /* Remove default bottom margin from label */
}

.login-container .right {
    color: #007bff; /* Adjust this to the blue color used in the design */
    text-decoration: none;
    align-self: center;
}

.login-footer {
    text-align: center;
    color: #6c757d; /* Adjust to the color you see in the design */
    margin-top: 20px; /* Add space above the footer */
}

    .login-footer a {
        color: #007bff; /* Adjust to the color you see in the design */
        text-decoration: none;
    }

/* External login buttons */
.external-login-button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: .5rem 0;
    padding: .5rem;
    border: none;
    border-radius: 5px;
    background-color: #f6f6f6;
    transition: background-color .2s, border-color .2s;
    padding: 10px 20px;
}

    .external-login-button:hover {
        background-color: #e2e2e2;
        border-color: #adb5bd;
    }

    .external-login-button .icon {
        margin-right: .5rem;
    }

/* Media queries for responsive design */
@media (max-width: 768px) {
    .login-container {
        width: auto;
        padding: 1rem;
    }

    .login-card {
        width: auto;
    }
}

.or-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
}

    .or-divider::before,
    .or-divider::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid #ced4da;
    }

    .or-divider:not(:empty)::before {
        margin-right: .25em;
    }

    .or-divider:not(:empty)::after {
        margin-left: .25em;
    }


/* Form Input Styles */
.form-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem; /* adjust the space between form groups */
}

    .form-group label {
        margin-bottom: 0; /* Remove margin-bottom from label */
    }

.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* Buttons Styling */
.btn {
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
    display: inline-block;
    padding: .375rem .75rem;
    text-align: center;
    vertical-align: middle;
    border: 1px solid transparent;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    margin: 0px 10px;
}

.btn-primary {
    color: #fff;
    background-color: #007bff; /* Adjust the color to match your design */
    border-color: #007bff; /* Adjust the border color to match your design */
}

.btn-outline-primary {
    color: #111; /* Adjust the color to match your design */
    border-color: #c0c0c0; /* Adjust the hover border color to match your design */
}

    .btn-outline-primary:hover {
        color: #000;
        background-color: #c0c0c0; /* Adjust the hover color to match your design */
        border-color: #c0c0c0; /* Adjust the hover border color to match your design */
    }

.file-input-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.file-input-label {
    margin-right: 0.5rem;
}

.actions {
    padding: 0 1rem;
}

/* Media query adjustments for responsiveness */
@media (min-width: 768px) { /* Adjust for your breakpoint as needed */
    .form-group {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-control {
        width: auto; /* Adjust width for mobile */
    }

    .btn-edit, .btn-save {
        width: 100%; /* Full width buttons on smaller screens */
        margin-bottom: 0.5rem; /* Spacing between stacked buttons */
    }

    .form-group, .file-input-group {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-control, .custom-file-input {
        width: 100%;
    }

    .file-input-label {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }
}

.docs-sidebar {
    position: fixed;
    right: -400px; /* Hide the sidebar initially */
    top: 0;
    width: 400px;
    height: 100%;
    background-color: #f7f7f7;
    border-left: 1px solid #ccc;
    box-shadow: -2px 0 5px rgba(0,0,0,0.2);
    padding: 20px;
    z-index: 1040; /* Make sure it's under the button */
    transition: right 0.3s;
    overflow-y: auto;
}

    .docs-sidebar h3 {
        color: #333;
        border-bottom: 1px solid #ddd;
        padding-bottom: 10px;
        margin-bottom: 15px;
    }

.docs-sidebar-visible {
    right: 0; /* Show sidebar */
}

.docs-sidebar .accordion {
    text-overflow: ellipsis;
}

.docs-sidebar .accordion-item {
    margin-top: 10px;
}

/* Add this to your CSS file */
.file-download-link {
    display: block;
    padding: 0.5rem 1rem; /* Adjust padding to match your sidebar button style */
    margin-bottom: 0.5rem; /* Add some margin to the bottom of each button */
    background-color: #007bff; /* Use your sidebar button background color */
    color: #fff; /* Use your sidebar button text color */
    text-align: center;
    border-radius: 0.25rem; /* Match this to your sidebar button border radius */
    text-decoration: none; /* Remove underline from links */
    font-weight: bold; /* Optional: if you want the text to be bold */
}

    .file-download-link:hover {
        background-color: #0056b3; /* Darken the button on hover */
        color: #fff;
        text-decoration: none; /* Remove underline from links on hover */
    }

.docs-sidebar ul {
    padding-left: 0; /* Remove padding from the list */
}

.docs-sidebar li {
    list-style-type: none; /* Remove list bullets */
}


#generatedDocumentsButton {
    position: fixed; /* Fixed position */
    top: 50%; /* Align vertically */
    transform: translateY(-50%) rotate(-90deg); /* Center it vertically and rotate */
    transform-origin: right top; /* Set the origin of transform */
    z-index: 1050; /* Make sure it's above other items and the sidebar */
    background-color: #007bff; /* Example color */
    color: white; /* Example text color */
    right: 1.7rem; /* Stick to the right */
    transition: right 0.3s;
}

.button-sidebar-visible {
    right: 415px !important;
}


/* SEARCH */
.user-cards .card {
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.user-cards .card-title {
    font-size: 1.25rem;
    color: #333;
}

.user-cards .card-text {
    font-size: 1rem;
    color: #666;
}

.user-cards .card-body {
    padding: 1.25rem;
}

.userSearchResult {
    cursor: pointer;
}

#myTab .nav-item {
    margin: 0 5px;
    font-size: 12px;
}

    #myTab .nav-item button {
        padding: 5px;
    }

#myTabContent .card-header {
    background: #6c757d;
    color: #fff;
}

/* NAV */
.nav-tabs .nav-link {
    background-color: #007bff;
}

/* STATUS CONTROL */
.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* This will push the status control container to the right */
    width: 100%; /* Ensure the container spans the full width */
}

.current-status {
    display: flex;
    align-items: baseline; /* Align the text baselines */
    gap: 0.25rem; /* Adjust the space between the labels */
    font-size: 1rem; /* Adjust size as needed */
    /* If you want the status to stay left next to the name, remove margin-left */
}

.status-label {
    font-weight: bold;
}

.status-value,
.status-note {
    font-style: italic;
}

.user-name {
    margin-right: 1rem; /* Add space after the name if needed */
    font-size: 1.5rem; /* Adjust size as needed */
    white-space: nowrap; /* Prevent the name from wrapping */
}


.status-control-container {
    display: flex;
    gap: 0.5rem; /* Adjust the space between the elements */
    /* If needed, you can remove the flex-grow property below */
}


    /* Styles for UserStatusControl inner elements, such as select, input, and button */
    .status-control-container select,
    .status-control-container input,
    .status-control-container button {
        padding: 0.375rem 0.75rem;
        margin: 0; /* Remove any default margins */
        font-size: 1rem;
    }

.mud-input-slot {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

    .mud-input-slot:disabled {
        background: #e9ecef;
    }

.dropdown.culture .dropdown-item {
    margin: 0;
}

.card-body mark {
    color: red;
    background: transparent;
    margin: 0;
    padding: 0;
}

.generate-files-actions {
    margin-top: 10px;
}

.text-success-checkmark {
    font-size: 14px;
    color: red;
    margin-left: 10px;
}

.text-remove-document {
    font-size: 14px;
    color: red;
    margin-left: 10px;
    cursor: pointer;
}

.content-end {
    align-content: end;
}

input[type='file'] {
    color: transparent;
}

/* Family Members pivot sizing */
table.fm-pivot {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto; /* важно: ширина колонок считается по контенту */
}

    /* Левый столбец: ширина ровно по самым длинным названиям полей */
    table.fm-pivot th.fm-pivot__label {
        width: 1%;
        white-space: nowrap;
        vertical-align: top;
    }

    /* Заголовок (ФИО) — не переносим, если длинно: троеточие */
    table.fm-pivot .fm-pivot__head {
        display: block;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Подзаголовок (ID) — тоже не даём расширять колонку */
    table.fm-pivot .fm-pivot__subhead {
        display: block;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Значения в ячейках: разрешаем переносы, чтобы они НЕ расширяли колонку */
    table.fm-pivot td.fm-pivot__cell {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
        vertical-align: top;
    }


.additional-info-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 1rem;
    overflow: hidden;
}

    .additional-info-card .card-header {
        background: #6c757d;
        color: #fff;
        padding: 10px 12px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        user-select: none;
    }

        .additional-info-card .card-header:hover {
            filter: brightness(0.95);
        }

        .additional-info-card .card-header .right {
            font-weight: 700;
            width: 24px;
            text-align: center;
        }