/* Show it is fixed to the top */

html, body, main {
    height: 100%;
    width: 100%;
}

body {
    min-height: 20rem;
    padding-top: 0.5rem;
    color: var(--dx-color-text) !important;
    font-size: var(--dx-font-size);
    background: var(--dx-color-main-bg) !important;
}

main {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 70px; /*leave room for the navbar */
    padding-bottom: 20px;
}

@media (max-width: 950px) {
    main {
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 5px;
    }
}

@media (max-width: 400px) {
    main {
        padding-left: 2px;
        padding-right: 2px;
        padding-bottom: 2px;
    }
}

li[disabled-link="True"] > a { pointer-events: none; }

#navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000; /* Ensure it is above other elements */
    background: var(--ssa-navbar-background-color); /* Use the new variable */
    padding: 3px 10px;
}

#newBanner {
    position: fixed;
    top: 40px; /* Adjust this value if needed to ensure it is right under the navbar */
    width: 100%; /* Make it full width */
    z-index: 2000;
    padding-left: 5px;
    padding-right: 5px;
    text-align: center; /* Center the text */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    border-bottom: 1px solid var(--dx-color-border); /* Add a bottom border */
    white-space: nowrap; /* Ensure the text stays on one line */
    overflow: hidden; /* Hide overflow text */
    text-overflow: ellipsis; /* Add ellipsis for overflow text */
    display: flex; /* Use flexbox for alignment */
    justify-content: center; /* Center the content */
    align-items: center; /* Center the content vertically */

    background-color: var(--dx-color-warning);
    color: black;
    font-size: 1em; /* Set font size */
    font-weight: 600;
}

#newBanner .close-banner-btn {
    position: absolute;
    right: 5px; /* Position it to the right */
    background: none;
    border: none;
    font-size: 1.2em;
    cursor: pointer;
    color: black;
}

#nav-toolbar {
    background: var(--ssa-navbar-background-color); /* Use the new variable */
}

.ssa-navbar-app-logo {
    padding-right: 1rem !important;
    min-width: 150px;
}

@media (max-width: 600px) {
    .ssa-navbar-app-logo {
        padding-right: 1rem !important;
        min-width: auto;
    }
}

#nav-toolbar .dx-toolbar-items-container {
    background: var(--ssa-navbar-background-color); /* Use the new variable */
}

.dx-group-panel-message { font-weight: 300 !important; }

#nav-toolbar * {
    /* font-size: var(--dx-font-size-sm); */
    /* font-weight: 600; */
}

/*#nav-toolbar .dx-menu-item-text,
.dx-popup-wrapper .dx-menu-item-text {
    font-weight: 600; /* Make the text a bit less bold !1!
    font-size: var(--dx-font-size-sm);
}*/


.tab-content-container {
    height: 100%;
    padding-top: 1rem;
}

.tab-content-container .dx-datagrid-header-panel {
    padding-left: 4px;
    padding-right: 4px;
}

.form-container { padding: 20px 10px; }

.div-center {
    max-width: 400px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    margin-left: -200px;
    max-height: 100%;
    overflow: auto;
    padding: 1em 2em;
    border-bottom: 2px solid #ccc;
    display: table;
}

div.content {
    display: table-cell;
    vertical-align: middle;
}


.shadow { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

.long-title h3 {
    font-family: 'Helvetica Neue Light', 'Helvetica Neue', Verdana;
    font-weight: 200;
    font-size: 28px;
    text-align: center;
    margin-bottom: 20px;
}

.archived-case-form { background: #f6f6f6; }

/* tr.dx-row-focused a { */

/*     color: white; */

/* } */

#caseDetailsForm, #projDetailsForm {
    height: 100%;
    overflow: auto;
}

/* #casesGrid, #projectsGrid { margin-right: 30px; } */

.max-width-200 { max-width: 200px; }

/* the nav bar notification quertion mark */

/*#notificationSign {
    margin-top: 9px;
    margin-right: 15px;
    cursor: pointer;
}*/

#tabPanel, #tabProjPanel {
    /* margin-top: 40px; */
    min-height: 380px;
    height: 100%;
}

/*#caseDetailsToolbar, #projDetailsToolbar {
    /* background-color: rgba(228, 235, 244, 0.6); !1!
    padding: 15px;
}*/

.jteFormToolbar {
    /* background-color: rgba(228, 235, 244, 0.6); */
    padding: 5px;
    margin-bottom: 5px;
}

#templatesGrid .dx-datagrid-header-panel { display: none; }

.dx-datebox { width: 150px; }

/* .dx-datagrid-header-panel { */

/*     background-color: rgba(228, 235, 244, 0.6); */

/*     padding-right: 10px; */

/*     padding-left: 10px; */

/*     min-height: 56px; */

/* } */

.selected-group-row { font-style: italic; }


/* .dx-datagrid-header-panel .dx-toolbar { background-color: transparent; } */

/* .dx-datagrid-header-panel .dx-toolbar-items-container { height: 40px !important; } */


/*.dx-datagrid-header-panel .dx-toolbar-before .dx-toolbar-item:not(:first-child) { background-color: rgba(228, 235, 244, 0.6); }

.dx-datagrid-filter-panel { background-color: rgba(228, 235, 244, 0.6); }*/

/* .dx-datagrid-column-chooser-button { margin-right: 10px !important; } */


/* .dx-datagrid-header-panel .dx-selectbox { margin: 17px 10px; } */

/* .dx-datagrid-header-panel .dx-button { margin: 10px 0; } */

/* .dx-header-row { */

/*     /* background: rgba(244, 246, 249, 0.6); !1! */

/*     font-weight: bold; */

/* } */

/* .dx-row-archived-case { */

/*     background: #fbfbfb; */

/*     /* font-style: italic;  !1! */

/*     color: #aaaaaa; */

/* } */

.dx-row-client-contact {
    font-weight: bold !important;
    font-style: italic;
}

.dx-row-recent-case { font-weight: bold !important; }

.case-row-tooltip {
    font-weight: bold !important;
    color: #382d2d;
}

#caseDetailsPopupTitle {
    font-weight: bold;
    font-size: larger;
}

.dx-popup-title .dx-toolbar-before { width: 100%; }

.case-details-title-inactive-case { color: #aaaaaa; }

.dx-row-done-todo { text-decoration: line-through; }

.dx-row-overdue-todo { color: var(--dx-color-danger) !important; }

.overdue-todo-item-date {
    color: var(--dx-color-danger) !important;
    font-weight: bold;
}

.attachment-item { }

.attachment-name { }

.attachment-delete-icon { cursor: pointer; }

/*.dx-form-group-caption {
    font-size: small !important;
}*/



/* .grid-cell-link { color: var(--dx-color-link); } */

/* .dx-datagrid a { color: var(--dx-color-link); } */

.info-box .row .col-1 {
    padding-right: 0px !important;
    padding-left: 0px !important;
}

.info-box {
    overflow: auto;
    padding-right: 35px !important;
}

.table-scroll {
    width: 100%;
    overflow-x: scroll;
}

#birthdayReminder { display: none; }

#todoReminder { display: none; }

.iframe-container {
    width: 100%;
    height: 100%;
}

.iframe-item { }

.archived-case-select-box-item {
    /* font-style: italic;  */
    color: #aaaaaa;
}

.dx-toolbar-hidden-button .dx-button-mode-contained.dx-button-default { color: #382d2d; }

.dx-toolbar-hidden-button .dx-button-mode-contained.dx-button-danger { color: #382d2d; }

#journal-popup {
    max-height: 70vh;
    max-width: 90vw;
    overflow-y: scroll;
    border: #aaaaaa 1px dashed;
    border-radius: 5px;
    padding: 10px;
}

.dx-box-item-with-background {
    border-block-color: #00c8f0;
    border-bottom: 1px;
    margin-bottom: 20px;
}


#caseSharingAuditGrid .dx-datagrid { font-family: 'Courier New', monospace; }


.validation-summary-errors li {
    color: var(--dx-color-danger);
    font-weight: bold;
}

#casesBanner { display: none; }

.reminder-title {
    font-size: 1.2em;
    margin-bottom: 15px;
    font-weight: bold;
}

.todo-item-card {
    padding: 10px;
    border: var(--dx-border-width) solid var(--dx-color-border);
    border-radius: var(--dx-border-radius);
    margin-bottom: 10px;
    background-color: #f9f9f9;
}

.todo-item-header {
    font-weight: bold;
    margin-bottom: 5px;
}

.todo-item-details { font-size: 0.9em; }

.todo-item-case {
    display: block;
    margin-bottom: 5px;
}

.todo-item-due-date { font-weight: bold; }

.overdue-todo-item-date { color: var(--dx-color-warning); }

.todo-item-link {
    text-decoration: none;
    color: var(--dx-color-link);
}

.todo-item-link:hover { text-decoration: underline; }

.todo-item-author {
    font-style: italic;
    color: #6c757d;
}

.no-todo-items {
    color: var(--dx-color-text);
    font-style: italic;
}

.dx-tab-content { font-weight: 600; }

.truncate-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*div.dx-gridbase-a11y-status-container {
    display: none !important;
}*/

.dx-page-header { }

/* .h2 { color: var(--dx-color-text) !important; } */

/*.ssa-journal-table-html-comment-cell table, 
.ssa-journal-table-html-comment-cell table td {
    border: 1px solid var(--dx-color-border);
    text-align: center;
}*/

.ssa-journal-table-html-comment-cell .dx-htmleditor { border-style: none !important; }


.ssa-journal-comment-container,
#resizable,
#journalEntryCommentEditor { min-height: 300px; }

.resize-icon {
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    cursor: ns-resize;
    background-color: transparent;
    color: var(--dx-color-border);
}