@import "colors.css";
@import "variables.css";

* {
    box-sizing: border-box;
    /* outline: 1px dashed #f00; */
}

html, body {
    margin: 0;
    /*width: 100vw;*/
    height: 100vh;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--main-bg-color) !important;
    color: var(--main-fg-color)
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.spinner-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading_speen {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
}

.my-tooltip:hover {
    cursor: help !important;
}

canvas {
    width: 100%;
    height: 100%;
}

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

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#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;
    }

pre,
div.error {
    background-color: #e5e5e5;
    padding: 1rem;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    margin: 1rem 0;
    max-height: 250px;
}

    pre.fixed,
    div.error.fixed {
        height: 200px;
    }

code {
    background-color: #e5e5e5;
    display: inline-block;
    padding: 0px 6px;
    border-radius: 3px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
}

.nav-item:hover, li {
    cursor: pointer !important;
}

.card {
    background-color: var(--datagrid-bg) !important;
    border: 1px solid var(--card-border-color) !important;
    box-shadow: 4px 6px 12px 0 rgba(0, 0, 0, 0.3) !important;
}

.card,
.card-text,
.card-body {
    color: var(--main-fg-color) !important;
}


.mt-6 {
    margin-top: 5rem !important;
}

.header {
    color: var(--header-color);
}



[data-theme="dark"] .sub-table tr td,
[data-theme="dark"] .sub-table tr th {
    background-color: transparent !important;
    color: var(--main-fg-color) !important;
}


/* Bootstrap 5 Ovverides */
[data-theme="light"] .text-warning {
    color: var(--bs-danger) !important;
}

[data-theme="dark"] .text-warning {
    color: var(--bs-danger) !important;
}
/* | Bootstrap 5 Ovverides */








/* DateRange Picker */
.calendar-table .table-condensed thead tr,
.calendar-table .table-condensed tbody tr {
    color: black !important;
}
/* | DateRange Picker */







/* Budge Button */
.btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    line-height: 1;
    background-color: var(--primary-accent-color) !important;
}

    .btn-icon i {
        font-size: 24px;
        color: white !important;
    }

.badge {
    font-size: 10px;
    padding: 5px !important;
}
/* | Budge Button */




.nav-link.active {
    background-color: var(--primary-bg-color) !important;
    border-bottom-color: var(--primary-bg-color) !important;
    color: white !important;
}
.nav-link {
    color: white !important;
}


/* Side Navbar */
.side-nav {
    position: fixed;
    top: 60px;
    left: -242px;
    padding: 10px;
    border-radius: 8px;
    height: auto;
    width: auto;
    background: var(--side-nav-bg) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
    z-index: 999;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
}

    .side-nav.open {
        transform: translateX(250px);
    }

.fluent-nav.open {
    background-color: var(--main-bg-color) !important;
    background: var(--main-bg-color) !important;
}

.fluent-nav-item {
}

.fluent-nav-link {
    transition: transform 0.2s ease-in-out, background 0.2s ease-in-out;
    stroke: var(--side-nav-fill-color) !important;
    fill: var(--side-nav-fill-color) !important;
    &:hover

{
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.1);
}

&:active {
    transform: scale(0.95);
}

}

.fluent-nav-icon {
    fill: var(--side-nav-icon-fill-color) !important;
}

.active-nav-link {
    font-size: medium !important;
    font-weight: bolder !important;
    text-decoration: none !important;
    /*border: 1px solid var(--primary-bg-solid-color);
    background-color: var(--primary-bg-solid-color);
    border-radius: 4px;*/
    margin: 4px;
    padding: 4px;
    /*text-align: center !important;*/
    z-index: 1 !important;
    min-width: 200px !important;
    max-width: 280px !important;
    color: var(--side-nav-color) !important;
}

    .active-nav-link > .positioning-region,
    .active-nav-link > .positioning-region > .content-region,
    .active-nav-link > .positioning-region > .content-region > .fluent-nav-link,
    .active-nav-link > * {
    }

.positioning-region {
    background-color: var(--main-bg-color) !important;
}
/* .side-nav[b-yjrej4b8ib] {
    background: var(--side-nav-bg) !important;
} */

.nav-link-text {
    color: var(--admin-nav-bar-color);
}

    .nav-link-text:hover {
        color: var(--admin-nav-bar-hover-color);
    }
/* | Side Navbar */







/* Fluents Tabs */
fluent-tab {
    color: var(--header-color) !important;
}
/* | Fluents Tabs */







/* Scrollbar */
::-webkit-scrollbar {
    width: 20px; /* Set 0px to hide or 20px to display */
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-color);
}

::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-color);
    border-radius: 20px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-color);
    border-radius: 20px;
    border: 6px solid transparent;
    background-clip: content-box;
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: #a8bbbf;
    }
/* | Scrollbar */











/* Accordion */
.accordion {
    border: none !important;
    border-radius: 4px !important;
}

.accordion-header {
    color: var(--accordion-header-color) !important;
    background-color: var(--accordion-header-bg) !important;
}

.accordion-button {
    color: var(--accordion-bt-color) !important;
    background-color: var(--accordion-bt-bg) !important;
    height: 48px;
}

    .accordion-button:not(.collapsed) {
        color: var(--accordion-bt-color) !important;
        background-color: var(--accordion-bt-bg) !important;
    }

[data-theme="dark"] .accordion-button:not(.collapsed) fluent-button {
    color: var(--main-fg-color) !important;
}

.accordion-collapse {
    background: var(--accordion-body-color) !important;
    background-color: var(--accordion-body-bg) !important;
    border-radius: 4px !important;
}

.accordion-body {
    background: var(--accordion-body-color) !important;
    background-color: var(--accordion-body-bg) !important;
    border-radius: 4px !important;
}

.accordion-item {
    border: var(--accordion-bt-bg) 1px solid !important;
    border-radius: 4px !important;
}

/* Arrow */
.accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var(--main-fg-color)'%3E%3Cpath fill-rule='evenodd' d='M1.646 5.646a.5.5 0 0 1 .708 0L8 11.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var(--main-fg-color)'%3E%3Cpath fill-rule='evenodd' d='M1.646 5.646a.5.5 0 0 1 .708 0L8 11.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
}

/* Custom Accordion Button */
.accordion-button-custom {
    background: var(--main-bg-color, #fff);
    border: none;
    color: var(--main-fg-color, #333);
    font-size: 1.2rem;
    font-weight: bold;
    padding: 10px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
}

    .accordion-button-custom:focus {
        outline: none;
        box-shadow: none;
    }
/* Custom Arrow Button */
.accordion-arrow {
    width: 20px;
    height: 20px;
    margin-left: auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var(--main-fg-color)'%3E%3Cpath fill-rule='evenodd' d='M1.646 5.646a.5.5 0 0 1 .708 0L8 11.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
    background-size: cover;
    background-repeat: no-repeat;
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
}
/* Rotate arrow when expanded (button loses 'collapsed' class when expanded) */
.accordion-button:not(.collapsed) + .accordion-arrow {
    transform: rotate(180deg);
}
/* | Accordion */






/* Bootstrap Ovverides */
.border {
    border: var(--bs-border-width) var(--bs-border-style) var(--fluent-datagrid-border-bg) !important;
}
/* | Bootstrap Ovverides */





/* DataGrid */
fluent-data-grid-row: not([row-type="header"]) {
    transition: background-color 0.2s ease-in-out;
}

    fluent-data-grid-row:not([row-type="header"]):hover {
        background-color: var(--primary-tables-hover-bg-color);
    }

    fluent-data-grid-row:not([row-type="header"]):focus-within {
        background-color: var(--primary-tables-selected-bg-color) !important;
        color: var(--fluent-datagrid-border-bg);
        font-weight: bold;
    }

/*fluent-data-grid-cell {
    border: 1px solid var(--fluent-datagrid-border-bg);
}*/


fluent-data-grid-row {
    border-bottom: 1px solid var(--fluent-datagrid-border-bg);
}


/*fluent-data-grid-cell {
    border-right: 1px solid var(--fluent-datagrid-border-bg);*/
/*}*/

.col-width-draghandle {
    border-left: calc(var(--stroke-width) * 1px) solid var(--fluent-datagrid-border-bg) !important;
}



fluent-data-grid-cell fluent-button::part(control) {
    background: var(--main-bg-color) !important;
    background-color: var(--main-bg-color) !important;
    color: var(--main-fg-color) !important;
}

.col-sort-button {
    background-color: transparent !important;
}

    .col-sort-button::part(control) {
        background-color: transparent !important;
    }

.col-options-button::part(control) {
    background-color: transparent !important;
    color: var(--main-fg-color) !important;
}

fluent-data-grid::part(table) {
    background-color: transparent !important;
}

fluent-data-grid-row:nth-child(even)::part(row) {
    background-color: transparent !important;
}

fluent-data-grid-row:nth-child(odd)::part(row) {
    background-color: transparent !important;
}

fluent-data-grid-header-cell::part(cell) {
    background-color: transparent !important;
    color: var(--main-fg-color) !important;
}

.template-column {
    color: var(--main-fg-color) !important;
}

    .template-column fluent-button {
        color: var(--main-fg-color) !important;
    }

.admin-table {
    height: 62vh;
    overflow: auto;
}

.paginator-nav {
    background-color: transparent !important;
    color: var(--main-fg-color) !important;
}

.table-cell-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
/* | DataGrid */





/* Selected Table Row */
[data-theme="dark"] .selected_table_projects_row {
    background-color: rgba(209,231,221, 0.3) !important;
}

[data-theme="dark"] .selected_table_disciplines_row {
    background-color: rgba(248,215,218, 0.5) !important;
}

[data-theme="dark"] .selected_table_deliverables_row {
    background-color: rgba(207,226,255,0.5) !important;
}

[data-theme="dark"] .selected_table_supportiveworks_row {
    background-color: rgba(255,243,205, 0.5) !important;
}

[data-theme="light"] .selected_table_projects_row {
    background-color: rgba(72, 119, 199,0.5) !important;
}

[data-theme="light"] .selected_table_disciplines_row {
    background-color: rgba(72, 119, 199,0.5) !important;
}

[data-theme="light"] .selected_table_deliverables_row {
    background-color: rgba(72, 119, 199,0.5) !important;
}

[data-theme="light"] .selected_table_supportiveworks_row {
    background-color: rgba(72, 119, 199,0.5) !important;
}

.selected_table_row {
    background-color: var(--selected-table-row-bg-color) !important;
    color: var(--selected-table-row-color) !important;
}

    .selected_table_row > .default-color.btn-outline-info {
        color: white !important;
        border-color: white !important;
    }

    .selected_table_row > .majesticons--chat-2-text { /* Coplain */
        display: inline-block;
        width: 2.0em;
        height: 2.0em;
        --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M1 11c0-5.167 5.145-9 11-9s11 3.833 11 9s-5.145 9-11 9c-1.198 0-2.354-.156-3.437-.447c-.785.662-1.59 1.244-2.54 1.672C4.894 21.735 3.617 22 2 22a1 1 0 0 1-.707-1.707c.876-.876 1.843-1.914 2.368-3.416C2.029 15.327 1 13.28 1 11m7-5a1 1 0 0 0 0 2h8a1 1 0 1 0 0-2zm0 4a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2zm0 4a1 1 0 1 0 0 2h3a1 1 0 1 0 0-2z' clip-rule='evenodd'/%3E%3C/svg%3E");
        background-color: var(--tables-bg-color);
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
    }

    .selected_table_row > .clarity--assign-user-line { /* Assign Icon */
        display: inline-block;
        width: 2em;
        height: 2em;
        --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath fill='%23000' d='M18 17a7.46 7.46 0 1 0-7.45-7.46A7.46 7.46 0 0 0 18 17m0-12.93a5.46 5.46 0 1 1-5.45 5.45A5.46 5.46 0 0 1 18 4.07' class='clr-i-outline clr-i-outline-path-1'/%3E%3Cpath fill='%23000' d='M6 31.89v-6.12a16.13 16.13 0 0 1 12-5a16.61 16.61 0 0 1 8.71 2.33l1.35-1.51A18.53 18.53 0 0 0 18 18.74A17.7 17.7 0 0 0 4.21 24.8a1 1 0 0 0-.21.6v6.49A2.06 2.06 0 0 0 6 34h12.39l-1.9-2Z' class='clr-i-outline clr-i-outline-path-2'/%3E%3Cpath fill='%23000' d='M30 31.89V32h-3.15l-1.8 2H30a2.06 2.06 0 0 0 2-2.07V26.2l-2 2.23Z' class='clr-i-outline clr-i-outline-path-3'/%3E%3Cpath fill='%23000' d='M34.76 18.62a1 1 0 0 0-1.41.08l-11.62 13l-5.2-5.59a1 1 0 0 0-1.41-.11a1 1 0 0 0-.06 1.42l6.69 7.2L34.84 20a1 1 0 0 0-.08-1.38' class='clr-i-outline clr-i-outline-path-4'/%3E%3Cpath fill='none' d='M0 0h36v36H0z'/%3E%3C/svg%3E");
        background-color: white;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
    }
/* | Selected Table Row */






/* Table Header */
/*thead th {
background: var(--dashboard-tables-header-color) !important;
}
*/
.default-background {
    background-color: var(--main-bg-color) !important;
    border-color: var(--main-bg-color) !important;
}

.primary-bg-color {
    background-color: var(--primary-bg-color) !important;
    border-color: var(--primary-bg-color) !important;
}

.sticky-header {
    position: sticky;
    top: 0;
    z-index: 1;
    margin-top: -4px !important;
}

.table-container {
    min-height: 11vh;
    max-height: 50vh;
    overflow-x: hidden;
    overflow-y: auto;
}

@media (max-width: 960px) {
    .table-container {
        min-height: 11vh;
        max-height: 80vh;
        overflow-x: hidden;
        overflow-y: auto;
    }
}
/* | Table Header */





/* CheckBox */
.big-checkbox {
    width: 24px !important;
    height: 24px !important;
    accent-color: var(--primary-accent-color) !important;
    border-radius: 4px !important;
}

fluent-checkbox::part(label) {
    color: var(--main-fg-color);
}
/* | CheckBox */







/* Fluent Button */
.custom-icon-buttons {
    stroke: var(--side-nav-fill-color);
    fill: var(--side-nav-fill-color);
}

.default-color.btn-outline-info {
    color: var(--primary-accent-color) !important;
    border-color: var(--primary-accent-color) !important;
}

    .default-color.btn-outline-info:hover {
        background-color: var(--primary-hover-bg-color) !important;
    }

[data-theme="dark"] fluent-button {
    color: var(--main-fg-color) !important;
    /* background-color: var(--primary-bg-color) !important; */
}

    [data-theme="dark"] fluent-button.neutral {
        color: var(--neutral-button-color) !important;
    }

.toggle-btn-browser.outline::part(control) {
    border: 2px var(--toggle-btn-browser-color) solid !important;
}

.toggle-btn-browser svg {
    fill: var(--toggle-btn-browser-color) !important;
}

.toggle-btn-browser:hover {
    transform: scale(1.05);
}

[data-theme="dark"] fluent-button:not(.toggle-btn-browser).outline {
    color: var(--outline-button-color) !important;
}

    [data-theme="dark"] fluent-button:not(.toggle-btn-browser).outline::part(control) {
        color: var(--outline-button-color) !important;
        border: 1px var(--outline-button-color) solid !important;
    }

    [data-theme="dark"] fluent-button:not(.toggle-btn-browser).outline svg {
        fill: var(--outline-button-color) !important;
    }

fluent-button:not(.toggle-btn-browser).outline::part(control) {
    color: var(--outline-button-color) !important;
    border: 1px var(--outline-button-color) solid !important;
}

[data-theme="dark"] fluent-button.lightweight {
    color: var(--lightweight-button-color) !important;
    background: var(--lightweight-button-bg) !important;
}

    [data-theme="dark"] fluent-button.lightweight::part(control) {
        color: var(--lightweight-button-color) !important;
        background: var(--lightweight-button-bg) !important;
    }

    [data-theme="dark"] fluent-button.lightweight svg {
        fill: var(--lightweight-button-color) !important;
    }

[data-theme="dark"] fluent-button.filled {
    color: var(--filled-button-color) !important;
}
/* | Fluent Button */








/* Lists */

.drag-drop-list {
    border: 1px solid gray;
    border-radius: 4px;
    margin: 4px;
    height: 200px;
    overflow-y: auto;
}

/* | Lists */






/* Login */
.login_text {
    color: var(--primary-accent-color);
}
/* | Login */




/* Fluent Dialog */
fluent-dialog::part(control) {
    background: var(--dialog-bg) !important;
    border: calc(var(--stroke-width)* 1px) solid transparent;
    color: var(--dialog-color) !important;
}

[data-theme="dark"] fluent-dialog fluent-button.accent {
    color: var(--dialog-bg) !important;
}

[data-theme="dark"] fluent-dialog fluent-button.outline {
    color: var(--dialog-color) !important;
}
/* Fluent Dialog */




/* Fluent Inputs */
[data-theme="dark"] .fluent-typography {
    color: var(--dialog-color) !important;
}

[data-theme="dark"] fluent-text-field::part(label),
[data-theme="dark"] fluent-text-area::part(label),
[data-theme="dark"] fluent-number-field::part(label),
[data-theme="dark"] fluent-switch::part(label),
[data-theme="dark"] .fluent-input-label {
    color: var(--dialog-color) !important;
}

[data-theme="dark"] fluent-combobox {
    color: var(--main-fg-color) !important;
}

    [data-theme="dark"] fluent-combobox .listbox {
        background: var(--combo-bg) !important;
    }

::deep(fluent-combobox .listbox) {
}

[data-theme="dark"] fluent-combobox::part(control) {
    background: var(--combo-bg) !important;
}

[data-theme="dark"] fluent-combobox::part(indicator) svg path {
    fill: red !important;
}

/* | Fluent Inputs */





/* Switch Box */
.big-primary-switch {
    width: 200px;
}

    .big-primary-switch.form-check.form-switch .form-check-input {
        width: 3rem !important;
        height: 1.6rem !important;
        cursor: pointer;
    }

        .big-primary-switch.form-check.form-switch .form-check-input:checked {
            background-color: var(--primary-bg-color);
            border-color: var(--primary-bg-color);
        }

    .big-primary-switch .form-check-label {
        margin-left: 12px;
        margin-top: 6px;
        cursor: pointer;
    }

/* | Switch Box */




/* Select Not Used */
.form-select {
    background-color: var(--combo-bg) !important;
    color: var(--main-fg-color) !important;
}

    .form-select option {
        padding: 4px;
        font-size: clamp(0.4rem, calc(1vw + 0.6rem), 0.8rem);
        border-radius: 4px;
    }

        .form-select option:checked {
            background: var(--primary-bg-color) !important;
            color: black !important;
        }

        .form-select option:hover {
            background: var(--primary-bg-color) !important;
            color: black !important;
        }
/* | Select Not Used */


/* Stepper Wizard */
.selected_step {
    background-color: var(--primary-bg-color) !important;
    color: var(--primary-accent-color) !important;
}
/* | Stepper Wizard */


/* Fluent Combo */
fluent-option {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.4;
    min-height: auto !important;
    height: auto !important;
    padding-top: 4px;
    padding-bottom: 4px;
}
/* | Fluent Combo */