@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap');

html {
    font-size: 16px;
}

body {
    margin: 0;
    padding: 0;
    background-color: #f8f9fa;
    font-family: 'Montserrat', sans-serif;
    height: 100vh;
    box-sizing: border-box;
}

* {
    margin: 0rem;
    padding: 0rem;
}

.float-right {
    float: right;
}

/* Common styles */

.heading-6 {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.5rem;
    letter-spacing: 0.02em;
    color: #495057;
}

.bodyText-1 {
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1rem;
    color: #1a2121;
    letter-spacing: 0.01em;
    font-style: normal;
    font-weight: 400;
}

.bodyText-2 {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 21px;
    letter-spacing: 0.01em;
    color: #495057;
}

.bodyText-3 {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 18px;
    letter-spacing: 0.01em;
}

.bodyText-4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    line-height: 1rem;
    color: #1a2121;
    letter-spacing: 0.01em;
    font-style: normal;
    font-weight: 400;
}

.bodyText-1-bold {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 1rem;
    line-height: 24px;
    letter-spacing: 0.01em;
    color: #1a2121;
}

.body_text_2_bold {
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    line-height: 0.875rem;
    letter-spacing: 0.01em;
}

.bodyText-3-bold {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 0.75rem;
    line-height: 18px;
}

.mantine-Input-input,
.mantine-Input-input>input {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 1em;
    line-height: 24px;
    letter-spacing: 0.01em;
    color: #212121;
}

.mantine-Select-item {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 1rem;
    line-height: 24px;
    letter-spacing: 0.01em;
    color: #212121;
}

.mantine-Select-item[data-selected] {
    background-color: #e9ecef;
    color: #212121;
}

.mantine-Select-item[data-selected]:hover {
    background-color: #e9ecef;
    color: #212121;
}

.centerText {
    text-align: center;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 0rem;
    height: 0rem;
}

/*  Login Pages Styles. */

/* Login container*/
.auth {
    position: absolute;
    background-color: #ffffff;
    max-width: 350px;
    min-width: 310px;
    border-radius: 12px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
        rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
}

.commonTitle {
    font-size: 1.5rem;
    font-family: 'Open Sans';
    text-align: center;
}

.buttons {
    font-family: 'Montserrat', sans-serif;
    width: 100%;
    background-color: #008390;
    height: 48px;
}

.buttons:hover {
    background-color: #005b64;
}

/* Links */
.forgotPasswordlink {
    text-decoration: none;
    color: #1a2121;
    letter-spacing: 0.01em;
    font-style: normal;
    font-weight: 600;
    font-size: 1rem;
    line-height: 24px;
}

.backToLoginLink {
    text-decoration: none;
    letter-spacing: 0.01em;
    font-weight: 400;
    color: #1a2121;
    font-size: 0.9rem;
    font-family: 'Montserrat', sans-serif;
}

.backToLoginSpan {
    display: inline-block;
    margin-left: 5px;
}

/* Mantine Components */

/* Input Labels */
.mantine-ittua2 {
    letter-spacing: 0.01em;
    font-weight: 400;
    color: #1a2121;
    font-size: 0.9rem;
    font-family: 'Montserrat', sans-serif;
}

.mantine-InputWrapper-label {
    letter-spacing: 0.01em;
    font-weight: 400;
    color: #1a2121;
    font-size: 0.9rem;
    font-family: 'Montserrat', sans-serif;
    white-space: nowrap;
}

.phone-number-input>div>input {
    padding-left: 100px;
    padding-right: 14px;
}

.phone-number-input>div>.mantine-Input-rightSection {
    width: 95px;
    font-size: 0.9rem !important;
    left: 2px !important;
    justify-content: right;
}

.country-code-input>div>div>input {
    padding-right: 0px !important;
    border: transparent;
}

/* div:has(>.country-code-input) {
    height: 38px;
}

.country-code-input {
    height: 38px;
} */

.country-code-input>div>div>div>div>div>div>.mantine-Select-item {
    font-size: 0.8rem;
    white-space: nowrap;
}

.mantine-Checkbox-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    line-height: 24px;
    color: #495057;
    letter-spacing: 0.01em;
    font-style: normal;
    font-weight: 400;
    color: #1a2121;
}

.mantine-Button-label {
    font-size: 1rem;
    font-weight: 400;
}

.mantine-Image-image {
    width: 98px;
    height: 38px;
}

/* HomePage Styles */
.outerContainer {
    padding: 0;
}

/* Header Container */

header {
    background-color: white;
    padding: 0rem 2rem 0rem 2rem;
    width: calc(100% - 4rem);
    height: 5rem;
    position: fixed;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    z-index: 100;
    top: 0;
}

header>div:first-child {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /* gap: 2rem; */
}

header>div>* {
    margin: 0.25rem;
}

#burger-btn {
    height: 1.6rem !important;
    margin-top: 0px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    margin-left: 3rem;
}

#burger-btn>svg {
    padding: 8px;
}

.homeLeftIconsDiv {
    position: absolute;
    right: 0;
    margin-right: 60px;
}

.homeLeftIcons {
    background-color: #e9ecef;
    color: #495057;
    border-radius: 8px;
    padding: 5px;
    margin-right: 5px;
    cursor: pointer;
    margin-bottom: -1px;
}

.iconsRight {
    background-color: #e9ecef;
    color: #495057;
    margin-right: 0 !important;
    border-radius: 8px;
    padding: 4px 5px;
}

.settingIcon {
    display: inline-block;
    background-color: #e9ecef;
    height: 28px;
    border-radius: 8px;
    border: 1px solid #adb5bd;
    cursor: pointer;
}

nav {
    background-color: #ffffff;
    width: 220px !important;
    padding: 20px;
    position: fixed;
    overflow-y: auto;
    margin-top: 80px;
    z-index: 1000;
    top: 0;
    bottom: 0;
    display: block;
    transition: all 0.3s ease;
}

.nav-open {
    transform: translateX(0);
}

.nav-close {
    transform: translateX(-100%);
}

.sidebarTitle {
    margin-top: 20px;
    margin-bottom: 10px;
    margin-left: 5px;
}

.sidebarText {
    display: inline-block;
    margin-left: 10px;
}

.sidebarLinks {
    color: #1a2121;
    text-decoration: none !important;
    letter-spacing: 0.01em;
    display: inline-block;
    padding: 12px 0px;
    font-weight: 400;
    font-size: 0.9rem;
    font-family: 'Montserrat', sans-serif;
}

.sidebarIcons {
    color: #495057;
    vertical-align: text-bottom;
    width: 22px;
    height: 18px;
    margin-left: 5px;
}

/* Sidebar Height */
.mantine-d9i00y {
    height: 230px;
}

.mantine-Navbar-root {
    border-right: none;
    border-bottom: none;
}

/* Mantine Navbar tabs button */
.mantine-Tabs-tabsList>.mantine-UnstyledButton-root,
.mantine-Tabs-tabsList>a>.mantine-UnstyledButton-root,
#sidebar-item-to-hide>a>.mantine-UnstyledButton-root,
#sidebar-item-to-hide2>a>.mantine-UnstyledButton-root,
.mantine-Accordion-item>.mantine-UnstyledButton-root {
    padding-left: 0;
    border-radius: 8px;
    border-color: none;
    width: 100%;
    margin-bottom: 5px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.mantine-UnstyledButton-root:hover {
    border-color: white;
}

.mantine-UnstyledButton-root[data-active] {
    border-color: white;
    background-color: #e9ecef;
}

.mantine-UnstyledButton-root[data-active]:hover {
    border-color: white;
}

/* User Page Styles */

/* Mantine Components */
.mantine-Modal-header {
    display: none;
}

/*Modal paper */
.mantine-qb3vl4 {
    padding: 30px;
}

.modal_title {
    margin-bottom: 20px;
}

.mantine-Modal-root {
    z-index: 1500;
}

/*****************************************/
/* Modal Inputs */

.modal_buttons {
    width: 100px;
    height: 44px;
    border-radius: 8px;
}

.add_user_button {
    background-color: #008390;
    width: 250px;
    height: 44px;
}

.add_user_button:hover {
    background-color: #005b64;
}

.modal_save_button {
    background-color: #008390;
    padding-left: 20px;
}

.modal_save_button:hover {
    background-color: #005b64;
}

.modal_delete_button {
    border: 1px solid #005b64;
    color: #005b64;
    padding-left: 20px;
}

.modal_cancel_button {
    color: #005b64;
    padding-left: 15px;
}

/* Modal passwordInput icons  */
.add_user_grid .mantine-ActionIcon-root {
    margin-bottom: 12px;
}

.add_user_grid .mantine-ActionIcon-root:hover {
    background-color: transparent;
}

/* Account Settings Page  */
/*  Account Settings sidebar */

.account_settings_grid .mantine-o8x4z2 {
    border-bottom: none;
}

/* Modal passwordInput icons  */
.account_settings_grid .mantine-ActionIcon-root {
    margin-bottom: 12px;
}

.account_settings_grid .mantine-ActionIcon-root:hover {
    background-color: transparent;
}

/* Accordion border*/
.mantine-v4lv9f {
    border-bottom: none;
}

.mantine-Accordion-chevron {
    display: block;
    float: right;
}

.ancClientRecords>.mantine-UnstyledButton-root {
    background-color: transparent !important;
}

.accordionItem:hover {
    width: 190px !important;
}

/*   Dashboard Pages Items*/

/*Dashboard youth info table*/

.dashboard-youth-info-table tr {
    border-bottom-style: hidden !important;
}

/* Progress Note Button */

.detailed_notes {
    white-space: pre-line !important;
}

.dashboard_nameDetail_card .mantine-UnstyledButton-root {
    border-bottom: 1px solid rgb(34, 139, 230);
    padding-left: 15px;
}

.dashboard_nameDetail_card .mantine-UnstyledButton-root:hover {
    border-color: white;
}

.dashboard_nameDetail_card .mantine-1f8s9nb {
    color: #1a2121;
    font-weight: 600;
}

.dashboard_nameDetail_card .mantine-qo1k2 {
    height: 120%;
}

.dashboard_nameDetail_card .mantine-186fes1 tbody tr td {
    border-bottom: none;
}

.dashboard_center_cards {
    height: 100%;
    max-height: 100%;
}

.hours_card {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
}

/* Dashboard Badges*/
.dashboard_center_cards .mantine-6mcrly {
    color: #ffffff;
    text-transform: capitalize;
    font-weight: 400;
    font-size: 0.875rem;
}

.dashboard_center_cards .mantine-6mcrly::before {
    background-color: #ffffff;
}

/* Texts in ring progress card */
.dashboard_center_cards .mantine-1smy5f2 {
    gap: 5px !important;
}

/* Detailed Progress Notes */
.mantine-Drawer-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
}

.mantine-Drawer-drawer {
    width: 700px;
    overflow-y: scroll;
}

.mantine-Drawer-root {
    z-index: 9999;
}

.progress-note-cards {
    border-radius: 8px;
    background-color: #f8f9fa;
    margin-top: 10px;
    padding: 20px;
}

/* Eren */

.mantine-Tabs-tabsList {
    border-right: none;
}

.outerContentContainer {
    padding: 0;
    margin: 0;
    max-width: 100vw !important;
}

#content {
    padding: 0;
    margin: 0;
    max-width: 100vw !important;
}

main {
    position: absolute;
    background-color: var(--background1);
    border-radius: 1rem 1rem 0rem 0rem;
    padding: 1rem;
    min-height: 100%;
}

.main-open {
    margin: 5rem 0rem 0rem 16rem;
    width: calc(100% - 18rem);
    transition-property: width, margin-left;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

.main-close {
    margin: 5rem 1rem 0rem 1rem;
    width: calc(100% - 4rem);
    transition-property: width, margin-left;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

.mantine-Tabs-tab:hover {
    background-color: #e9ecef;
}

.sidebar-button>div {
    justify-content: left;
}

.sidebar-button {
    height: auto;
    background: none;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0.75rem 0rem;
    margin-bottom: 0.25rem;
    border-radius: 8px;
}

.sidebar-button:hover {
    background-color: #e9ecef;
}

.selected {
    background-color: #e9ecef;
}

/* Forms */

.mantine-ActionIcon-root {
    width: fit-content !important;
}

/* Datatable */
tr:nth-child(n + 2)>[data-dash-column='edit_user'],
tr:nth-child(n + 2)>[data-dash-column='edit_client'],
tr:nth-child(n + 2)>[data-dash-column='edit_com_rec'],
tr:nth-child(n + 2)>[data-dash-column='edit_ment_rec'],
tr:nth-child(n + 2)>[data-dash-column='edit_teen_rec'],
tr:nth-child(n + 2)>[data-dash-column='edit_voc_rec'],
tr:nth-child(n + 2)>[data-dash-column='edit_well_rec'] {
    cursor: pointer;
}

tr:nth-child(n + 2)>[data-dash-column='edit_user']:hover,
tr:nth-child(n + 2)>[data-dash-column='edit_client']:hover,
tr:nth-child(n + 2)>[data-dash-column='edit_com_rec']:hover,
tr:nth-child(n + 2)>[data-dash-column='edit_ment_rec']:hover,
tr:nth-child(n + 2)>[data-dash-column='edit_teen_rec']:hover,
tr:nth-child(n + 2)>[data-dash-column='edit_voc_rec']:hover,
tr:nth-child(n + 2)>[data-dash-column='edit_well_rec']:hover {
    border-left: 2px solid white !important;
}

tr:first-child>*:nth-child(1) {
    border-top-left-radius: 0.5rem;
}

tr:first-child>*:last-child {
    border-top-right-radius: 0.5rem;
}

tr:last-child>*:last-child {
    border-bottom-right-radius: 0.5rem;
}

tr:last-child>*:nth-child(1) {
    border-bottom-left-radius: 0.5rem;
}

th:last-child .column-actions {
    display: none !important;
}

.previous-next-container>button:last-child,
.previous-next-container>button:first-child {
    display: none !important;
}

.previous-next-container>button:nth-child(2),
.previous-next-container>button:nth-child(4) {
    background-color: #495057;
    width: 1.5rem !important;
    height: 1.7rem !important;
    border-radius: 0.5rem;
}

.previous-next-container>button:nth-child(2):hover,
.previous-next-container>button:nth-child(4):hover {
    background-color: #adb5bd;
}

.previous-next-container path {
    fill: #ffffff;
}

.previous-next-container input {
    padding: 0rem !important;
}

.column-header-name {
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    line-height: 0.875rem;
    letter-spacing: 0.01em;
    padding-left: 10px;
}

.dashboard-tables th {
    padding: 1.25rem !important;
}

.dashboard-tables td {
    padding: 1rem !important;
}

.dash-cell-value {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 21px;
    letter-spacing: 0.01em;
    color: #495057;
    padding-left: 10px !important;
}

.dash-spreadsheet-menu {
    justify-content: end;
}

.export {
    margin-top: -35px;
    margin-left: -70px;
    position: absolute;
    background-color: #008390;
    color: #ffffff;
    border: 0px;
    border-radius: 3px;
    cursor: pointer;
    padding: 0.25rem;
}

.export:hover {
    background-color: #005b64;
}

/* Header */

.mantine-Menu-dropdown {
    margin-left: -38px;
    border-radius: 10px;
    padding-right: 20px;
    padding-left: 20px;
}

/* Account Settings */

.settingsTabs {
    margin-top: 10px;
    border-top: 1px solid #adb5bd !important;
    overflow: auto;
}

.account_settings_nav {
    border-right: 1px solid #adb5bd !important;
    padding: 20px;
    width: 240px;
}

.settingsTabsPanel {
    padding: 20px;
}

/* Searc Input */

.searchInput {
    border: none;
    height: 32px;
    width: 100%;
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 1rem;
    color: #1a2121;
}

.searchInputOuter {
    border: 1px solid #adb5bd;
    border-radius: 8px;
    max-width: 314px;
    height: 32px;
    padding: 5px;
    display: flex;
    align-items: center;
}

/* Timeline */

.dot {
    width: 30px;
    height: 30px;
    background-color: #e9ecef;
    border-radius: 50%;
}

.dot-success {
    width: 30px;
    height: 30px;
    background-color: #14804b;
    border-radius: 50%;
}

.dot-delayed {
    width: 30px;
    height: 30px;
    background-color: #f0ad4e;
    border-radius: 50%;
}

.dot-uncompleted {
    width: 30px;
    height: 30px;
    background-color: #bb2124;
    border-radius: 50%;
}

.line {
    width: 28%;
    height: 5px;
    background-color: #e9ecef;
    margin-top: 12px;
}

.line-success {
    width: 28%;
    height: 5px;
    background-color: #14804b;
    margin-top: 12px;
}

.line-delayed {
    width: 28%;
    height: 5px;
    background-color: #f0ad4e;
    margin-top: 12px;
}

.line-uncompleted {
    width: 28%;
    height: 5px;
    background-color: #bb2124;
    margin-top: 12px;
}

.timeline {
    display: flex;
    padding: 0 10% 15px 12%;
}

.timeline-outer {
    display: flex;
    width: 100%;
}

.timelinetext {
    width: 95% !important;
    display: flex;
    justify-content: space-around;
    padding-left: 1%;
}

.timelinetext-inner {
    line-height: 1.25rem !important;
}

.passive {
    background-color: #e9ecef !important;
}

.stack-gap {
    gap: 5px !important;
}

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

.content-grid {
    flex-wrap: nowrap;
}

.dasboard-badges {
    color: #ffffff;
    text-transform: capitalize;
    font-weight: 400;
    font-size: 0.875rem;
    height: auto;
}

.dasboard-badges>.mantine-h9iq4m {
    word-wrap: break-word;
    white-space: normal;
}

/*change default margin and padding for multiple right cards*/
.set-padding {
    padding: 0 !important;
}

.set-margin {
    margin: 0 !important;
}

.left_card .dasboard-badges {
    background-color: #008390 !important;
}

.right_card .dasboard-badges {
    background-color: #144980 !important;
}

.onet-profiler .dasboard-badges {
    background-color: #005b64 !important;
}

.dashboard_center_cards .dasboard-badges::before {
    background-color: #ffffff;
}

.f2f-card {
    color: #ffffff;
    font-weight: 400;
    border-radius: 8px;
}

.tym-dark-font {
    color: #005b64;
}

.tym-dark-background {
    background-color: #005b64;
}

/* Loading Style */

.dash-sk-circle {
    transform: scale(2.5);
}

.dash-sk-circle .dash-sk-child:before {
    background-color: #008390 !important;
}

/* Remove Loading State at the Beginning */
._dash-loading {
    margin: auto;
    color: transparent;
    width: 0;
    height: 0;
    text-align: center;
}

.dash-spinner-container {
    background-color: #ffffff80 !important;
}

*:has(.dash-spinner-container) {
    visibility: visible !important;
}

.dmc-loader {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #ffffff80;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
}

.dmc-loader svg {
    fill: #008390;
}

.js-plotly-plot .plotly .cursor-pointer {
    cursor: default !important;
}

.dashboard_center_cards .mantine-Group-root {
    justify-content: center !important;
}

@media (min-width: 425px) and (max-width: 570px) {
    .record_modals:nth-child(1)>div {
        justify-content: left !important;
    }
}

@media (min-width: 425px) and (max-width: 768px) {
    .record_modals:nth-child(1)>div>div {
        min-width: 570px;
    }
}

/* Navbar toggle styles */
@media (max-width: 768px) {
    .burgerButton {
        display: block;
        /* show the burger button on small screens */
    }

    .modal_buttons {
        width: 100%;
    }

    /* div.homeSearchInputDiv {
        display: none;
    } */

    .nav-open {
        transform: translateX(-100%) !important;
    }

    .nav-close {
        transform: translateX(0) !important;
    }

    .main-close,
    .main-open {
        margin-left: 1rem;
        width: calc(100% - 4rem);
    }

    nav {
        transform: translateX(-100%) !important;
    }

    /* main {
        margin-left: 0px;
    } */

    .modal_buttons {
        width: 100%;
    }

    .mantine-Modal-modal {
        width: 80%;
    }

    /* div.homeSearchInputDiv {
        display: none;
    } */

    .settingsTabs {
        margin-top: 10px;
        border-top: none !important;
        display: block;
    }

    .account_settings_nav {
        border-right: none !important;
        padding: 20px;
        width: 100%;
        display: flex;
        flex-flow: row;
    }

    .settingsTabsPanel {
        padding: 20px;
    }

    .settingsTitle {
        text-align: center;
    }

    .account-tab-button {
        justify-content: center;
    }
}

@media screen and (max-width: 1023px) {
    .timeline {
        display: inline !important;
    }

    .timeline-outer {
        display: block;
        float: right;
        width: fit-content;
        margin-left: auto;
    }

    .line {
        height: 100px;
        width: 5px;
        background-color: #e9ecef;
        margin-left: 12px;
        margin-top: 0px;
    }

    .line-success {
        height: 100px;
        width: 5px;
        background-color: #14804b;
        margin-left: 12px;
        margin-top: 0px;
    }

    .line-delayed {
        height: 100px;
        width: 5px;
        background-color: #f0ad4e;
        margin-left: 12px;
        margin-top: 0px;
    }

    .line-uncompleted {
        height: 100px;
        width: 5px;
        background-color: #bb2124;
        margin-left: 12px;
        margin-top: 0px;
    }

    .dot {
        margin-top: 0px;
    }

    .dot-success {
        margin-top: 0px;
    }

    .dot-delayed {
        margin-top: 0px;
    }

    .dot-uncompleted {
        margin-top: 0px;
    }

    .timelinetext {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 2% 0 1.5% 0;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .record_modals:nth-child(1)>div>div {
        min-width: 870px;
    }

    .record_modals:nth-child(1)>div {
        justify-content: left !important;
    }

    .settingsTabsPanel {
        min-width: 340px;
    }
}

@media (min-width: 1024px) and (max-width: 1130px) {
    .dashboard_center_cards .mantine-6mcrly {
        font-size: 0.73rem;
    }
}