/*@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
/* General CSS */

:root {
    --kaya-blue: #3786A5;
    --kaya-blue-dark: #3B687F;
    --sidebar: #263238;
    --sidebar-selected: #212b30;

    --kaya-active-status: #BCD8B7;
    --kaya-inactive-status: #F05D5E;
    --kaya-pending-status: #FC8B4A;

    --kaya-problem-row: #F7B5B5;
    --kaya-warning-row: #FFCFAD;
    --kaya-reminder-row: #EFEAA9;
    --kaya-highlight-row: #AA7492;

    --kaya-deleted-status: #cd441a;
    --kaya-success : #44b55f;

    --bs-primary: var(--kaya-blue);
    --dt-row-selected: 55, 134, 165;
    --gray-dark-2: #212529;
    --gray-medium: #99A3AD;
    --bs-font-sans-serif: "Rubik", system-ui, -apple-system, Arial, sans-serif;
    --bs-font-monospace: "Roboto Mono", monospace;
    --bs-body-font-size: 0.8rem;

    --bs-body-color: var(--gray-dark-2);
    --bs-body-bg: #fafafa;
    --sidebar-collapsed-width: 80px;
    --sidebar-expanded-width: 200px;

    --table-last-year-top-width: inherit;
    --table-last-year-bottom-width: inherit;

    --table-last-year-top-color: inherit;
    --table-last-year-bottom-color: inherit;
}

.dropdown-menu {
    --bs-dropdown-font-size: 0.8rem;
}

h6, .h6 {
    font-size: var(--bs-body-font-weight);
}

.btn {
    font-size: var(--bs-body-font-size);
}

.btn-primary {
    --bs-btn-bg: var(--kaya-blue);
    --bs-btn-border-color: var(--kaya-blue);
    --bs-btn-hover-bg: var(--kaya-blue-dark);
    --bs-btn-hover-border-color: var(--kaya-blue-dark);
    --bs-btn-active-bg: var(--kaya-blue-dark);
    --bs-btn-active-border-color: var(--kaya-blue-dark);
    --bs-btn-disabled-bg: var(--kaya-blue);
    --bs-btn-disabled-border-color: var(--kaya-blue);
}

.btn-outline-primary {
    --bs-btn-color: var(--kaya-blue);
    --bs-btn-border-color: var(--kaya-blue);
    --bs-btn-hover-bg: var(--kaya-blue);
    --bs-btn-hover-border-color: var(--kaya-blue);
    --bs-btn-active-bg: var(--kaya-blue);
    --bs-btn-active-border-color: var(--kaya-blue);
    --bs-btn-disabled-color: var(--kaya-blue);
    --bs-btn-disabled-border-color: var(--kaya-blue);
}

tr.selected .btn-outline-secondary {
    --bs-btn-color: white;
    --bs-btn-border-color: white;
}

.form-select, .form-control, .form-check-input {
    font-size: var(--bs-body-font-size);
    background-color: white;
    padding: 0.375rem 0.5rem;
}

.form-control:read-only {
    color: #999;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

.text-center {
    text-align: center !important;
}

.banner-section {
    margin-top: 30px;
    margin-bottom: 30px;
    height: 320px;
    background: url('/static/images/folders.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
}

#profile-icon i {
    color: #ffffff;
    margin-right: 20px;
}

.groups-badge {
    transform: translate(-75%, -50%) !important;
}

.transfer-badge {
    transform: translate(-30%, -50%) !important;
}

.input-group.date input {
    border-radius: var(--bs-border-radius) ! important;
    font-size: var(--bs-body-font-size);
}

.ms-2_5 {
    margin-left: 13px;
}

/* Menu and Body Layout */

body {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* Ensures full width */
    margin: 0;
    /*    height: 100vh;*/
}

.wrapper {
    display: flex;
    height: 100vh;
    align-items: stretch;
    overflow: hidden;
    flex: 1; /* Takes remaining space after header */
}

header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 80px;
    z-index: 1001;
    display: flex;
    align-items: center;
    padding-left: 12px;
    background-color: #333;
    justify-content: space-between;
}

.navbar-brand img {
    height: 50px;
    margin-left: 10px;
}

#toggle-sidebar {
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background-color: transparent;
    color: #fff;
}

#toggle-sidebar .fa.fa-bars {
    font-size: 24px;
}

#datepicker1, #datepicker0 {
    width: 100px;
    margin-right: 20px;
}


main {
    flex: 1;
    transition: margin-left 0.3s, width 0.3s;
    margin: 100px 10px 0 10px;
    max-width: calc(100vw - 90px);
}

#sidebar {
    flex: 0 0 250px;
    overflow-y: auto;
    transition: all 0.3s;
    padding-top: 70px;
    width: 65px;
    /*position: fixed;*/
    top: 0;
    left: 0;
    bottom: 0;
    background-color: var(--sidebar);
    overflow-x: hidden;
    z-index: 1000;
}

#sidebar.expanded {
    width: 250px;
}


#sidebar.expanded + main {
    /*    margin-left: 270px;*/
    max-width: calc(100vw - 270px);
}

#sidebar:not(.expanded) {
    flex: 0 0 70px;
}

#sidebar:not(.expanded) .logo {
    display: none;
}


#sidebar a, .bi {
    font-size: 20px;
}

#sidebar a {
    color: #fff;
    padding: 10px;
    text-decoration: none;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
}

#sidebar a:hover {
    background-color: var(--sidebar);
}

.menu-icon, .submenu-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.submenu-icon {
    color: #979797;
    margin-left: 30px;
}

.submenu-text {
    color: #e4e4e4;
}

#sidebar:not(.expanded) .submenu-icon {
    margin-left: -10px;
    justify-content: center;
}

.menu-text, .submenu a {
    overflow: hidden;
    position: relative;
    flex-grow: 1;
    white-space: nowrap;
}

.menu-text::before, .submenu a::before {
    background-color: #333;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: -100%;
    transition: left 0.5s;
}

#sidebar.expanded .menu-text::before {
    left: 100%;
}

.submenu {
    display: none;
}

#sidebar:not(.expanded) .submenu a {
    visibility: visible;
    display: flex;
    justify-content: center;
    align-items: center;
}

#sidebar:not(.expanded) .submenu a .submenu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

#sidebar:not(.expanded) .submenu a span {
    display: none;
}

#sidebar:not(.expanded) .submenu {
    padding-left: 0;
}

.fa-caret-up {
    display: none;
}

#sidebar:not(.expanded) .fa-caret-down, #sidebar:not(.expanded) .fa-caret-up, #sidebar:not(.expanded) .menu-text {
    display: none;
}

#sidebar .price-link {
    font-size: 12px !important;
    line-height: 5px;
}

#sidebar.expanded .price-link {
    margin-left: 82px;
}

#sidebar li.active {
    background-color: var(--sidebar-selected);
}

#sidebar li.active span {
    color: var(--kaya-blue);
}

#sidebar li.active div.submenu-icon {
    color: var(--kaya-blue);
}

#sidebar li.active div.menu-icon {
    color: var(--kaya-blue);
}

#sidebar li:not(.active) {
    background-color: var(--sidebar);
}

#sidebar .price-link.active {
    background-color: var(--sidebar-selected);
}

#sidebar a:hover span {
    color: var(--kaya-blue);
}

#sidebar a:hover div.submenu-icon {
    color: var(--kaya-blue);
}

#sidebar a:hover div.menu-icon {
    color: var(--kaya-blue);
}

.menu-icon[data-tooltip]:hover::before, .submenu-icon[data-tooltip]:hover::before {
    content: attr(data-tooltip);
    position: fixed;
    left: 65px;
    background-color: var(--sidebar);
    color: #fff;
    padding: 10px 10px;
    height: 60px;
    line-height: 40px;
    white-space: nowrap;
    z-index: 2100;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    top: calc(1em * var(--index));
}

.menu-icon[data-tooltip]:hover::after, .submenu-icon[data-tooltip]:hover::after {
    content: "";
    position: fixed;
    left: 75px;
    border: 5px solid transparent;
    border-left-color: #333;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    top: calc(1em * var(--index) + 20px - 5px);
}

#sidebar:not(.expanded) .menu-icon[data-tooltip]:hover::before, #sidebar:not(.expanded) .submenu-icon[data-tooltip]:hover::before,
#sidebar:not(.expanded) .menu-icon[data-tooltip]:hover::after, #sidebar:not(.expanded) .submenu-icon[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
}

div.dt-button-collection {
    max-height: 70vh;
    overflow-y: scroll !important;
}

div.dt-buttons.btn-group {
    margin-right: .3rem !important;
    margin-bottom: .2rem !important;
}

/*div.datepicker.datepicker-dropdown {*/
/*  z-index: 1051 !important;*/
/*}*/

table.table.dataTable>tbody>tr a {
    color: var(--bs-table-color);
    text-decoration: initial;
}

table.table.dataTable>tbody>tr a:hover {
    text-decoration: underline;
}

table.table.dataTable>tbody>tr.selected a {
    color: rgb(var(--dt-row-selected-text));
}


.pricing-card {
    width: 95%;
}

#table-left-top > div.dt-buttons > div.dropdown-menu.dt-button-collection.dtb-collection-closeable {
    top: 15px !important;
}

.problem-row {
    background-color: var(--kaya-problem-row) ! important;
}

.warning-row {
    background-color: var(--kaya-warning-row) ! important;
}

.reminder-row {
    background-color: var(--kaya-reminder-row) ! important;
}

.highlight-row {
    background-color: var(--kaya-highlight-row) ! important;
}

table .intermediate-day {
    color: var(--gray-medium);
    font-style: italic;
}

table .last-day-of-year {
    /*background-color: rgba(var(--dt-row-stripe), 0.05) ! important;*/
    /*border-bottom-width: 0;*/
    border-top-color: var(--table-last-year-top-color);
    border-bottom-color: var(--table-last-year-bottom-color);
    border-top-width: var(--table-last-year-top-width);
    border-bottom-width: var(--table-last-year-bottom-width);
}

table .last-day-of-month {
    /*border-bottom-width: 0;*/
    /*border-top-color: #1a1d20;*/
    /*border-top-width: 1px;*/
}

#fundDropdown {
    /*font-family: var(--bs-body-font-family);*/
    /*font-size: var(--bs-body-font-size);*/
    /*font-weight: normal;*/
    /*color: black;*/
    /*background-color: white;*/
    /*border: var(--bs-border-width) solid var(--bs-border-color);*/
    /*border-radius: var(--bs-border-radius-sm);*/
    /*padding: 10px;*/
    /*height: 38px;*/
    /*width: 460px;*/
}

#titleDropdownContainer {
    /*width: 450px;*/
}

#titleDropdownContainer .select2-selection__rendered {
    font-weight: 500;
    font-size: 20px;
    margin-top: 3px;
    margin-bottom: 3px;
}

#titleDropdownContainer .select2-selection__arrow {
    margin-top: 3px;
    margin-bottom: 3px;
}

#titleDropdownContainer .select2-container .select2-selection--single {
    height: 34px !important;
}

.loader-indicator {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050;
    display: none
}

.text-red {
    color: red;
}

.button-pressed {
    background-color: #464c50;
    border-color: #464c50;
}

.compliance-card{
    text-decoration: none !important;
}

.compliance-card-number {
    font-size: 2.5rem;
}

.hidden-row {
    display: none;
}

.action-column {
    width: 100px;
}

.green-row {
    background-color: var(--kaya-success) !important;
}

.red-row {
    background-color: var(--kaya-problem-row) !important;
}


#linkModal .select2-selection__rendered {
    line-height: 16px !important;
}
#linkModal .select2-container .select2-selection--single {
    height: 38px !important;
}

/*#linkModal .select2-selection__arrow {*/
/*    height: 56px !important;*/
/*}*/
#linkModal input.form-control {
    line-height: 25px !important;
}

/* Speed up the transitions of modals to make it appear more snappy. */
.show {
    transition: opacity 50ms linear;
}

.fade {
    transition: opacity 50ms linear;
}

#updatesTable_wrapper {
    min-height: 600px;
}