:root {
    --nav-link-active-bg-color: #8ccdff; /*var(--malibu);*/
    --nav-link-active-color: #00344f; /*var(--prussian-blue);*/
    --card-header-bg-color: #007eb8; /*var(--lochmara);*/
    --card-header-color: #ffffff;
    --custom-card-bg-color: #ffffff;
    --custom-card-color: #000000;
    --custom-card-hover-bg-color: #f0ffff;
    --custom-card-hover-color: #000000;
    --client-menu-bg-color: #343a40;
    --client-menu-color: #ffffff;
    --action-btn-bg-color: #28a745;
    --action-btn-color: #ffffff;
    --action-btn-hover-bg-color: #218838;
    --action-btn-hover-color: #ffffff;
    --btn-primary-bg-color: #006493; /*var(--bahama-blue);*/
    --btn-primary-color: #ffffff;
    --btn-primary-hover-bg-color: #007eb8; /*var(--lochmara);*/
    --btn-primary-hover-color: #ffffff;
}

.tag {
    position: relative;
    display: inline-flex;
    align-items: center;
    background-color: #e2e8f0;
    color: #475569;
    padding: 4px 8px 4px 10px; /* left padding for icon */
    margin: 2px 4px 2px 0;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: default;
    gap: 4px;
}

.tag-icon {
    font-size: 0.7rem;
    color: #64748b;
    position: absolute;
    top: 2px;
    left: 4px;
}

.help-text {
    font-size: small;
    font-style: italic;
}

.container-client {
    margin-left: auto;
    margin-right: auto;
    width: 75%;
    /*margin-top: 60px;*/
    height:93%;
}

.container-agent {
    height: 100%;
    overflow: auto;
}

.client-menu {
    background-color: var(--client-menu-bg-color);
    position: fixed;
    width: 100%;
    z-index: 2000;
}
.login-panel {
    border: 2px solid lightgray;
    box-shadow: 10px 10px 5px grey;
}
.page-hot-bar {
    display: flex;
    gap: 35px;
    padding-bottom: 20px;
    padding-left: 13.7%;
    margin: auto;
    background-color: white;
    padding-top: 30px;
    width: 100%;
    box-shadow: 0px 5px 13px -3px rgba(105,105,105,1);
}

.client-main-container .page-hot-bar {
    position: sticky;
    top: 0;
    z-index: 1030 !important;
}
.client-menu-item {
    color: var(--client-menu-color);
    line-height: inherit;
    padding-top: 10px;
    padding-right: 25px !important;
}

.client-menu-item:hover, .client-menu-item:focus {
    /*background-color: var(--client-menu-bg-color);
    color: var(--client-menu-color);*/
    color: #e9ecef;
    /*filter: grayscale(1) invert(1)*/
}

.modal{
    height:90%;
}
.top-page{
    width:100%;
    background-color:white;
    z-index:1;
}
.page-anchor {
    display: block;
    position: relative;
    top: -210px;
    visibility: hidden;
}

.client-dynamic-container {
    padding-right: 0px !important;
    padding-right: 0px !important;
}

.client-main-container{
    border-radius:0px;
    margin-left:0px;
    margin-right:0px;
    box-shadow:0px;

}
.client-dynamic-container{
    padding:0px;
}

.client-add-view-container > #inside-view,
.client-edit-view-container > #inside-view,
.client-display-view-container > #inside-view,
.client-object-inner-view-container > #inside-view {
    height: auto;
    min-height: 100%;
    overflow: visible;
}

.client-edit-view-container > #inside-view:has(> .object-comments-open),
.client-display-view-container > #inside-view:has(> .object-comments-open) {
    height: 100%;
    overflow: auto;
}

.client-dynamic-container.object-comments-open-shell {
    overflow: hidden;
}

.client-dynamic-container.object-comments-open-shell > #inside-view {
    height: 100%;
    overflow: hidden;
}

.client-dynamic-container.object-comments-open-shell > .client-powered-by-footer {
    display: none;
}

.client-edit-view-container .container-client.object-comments-open,
.client-display-view-container .container-client.object-comments-open {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.client-edit-view-container .container-client.object-comments-open .object-view-pane,
.client-display-view-container .container-client.object-comments-open .object-view-pane {
    height: 100%;
    min-height: 0;
}

.client-edit-view-container .container-client.object-comments-open .object-view-content,
.client-display-view-container .container-client.object-comments-open .object-view-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.client-edit-view-container .container-client.object-comments-open .object-view-body,
.client-display-view-container .container-client.object-comments-open .object-view-body {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0;
    overflow: auto !important;
    padding-bottom: 1rem;
}

.client-edit-view-container .container-client.object-comments-open .comments-container,
.client-display-view-container .container-client.object-comments-open .comments-container {
    height: calc(100% - 2rem);
    min-height: 0;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.client-edit-view-container .container-client.object-comments-open .obj-conv,
.client-display-view-container .container-client.object-comments-open .obj-conv {
    height: 100%;
    min-height: 0;
    margin-top: 0;
}

.client-add-view-container .container-client,
.client-edit-view-container .container-client:not(.object-comments-open),
.client-display-view-container .container-client:not(.object-comments-open),
.client-object-inner-view-container .container-client {
    height: auto;
    min-height: 93%;
    overflow: visible;
}

.client-object-inner-view-container .container-client > .d-flex {
    height: auto !important;
    overflow: visible !important;
}

.client-object-inner-view-container .container-client .sticky-bottom {
    position: static;
}

.client-edit-view-container .container-client:not(.object-comments-open) .object-view-body,
.client-display-view-container .container-client:not(.object-comments-open) .object-view-body {
    height: auto !important;
    overflow: visible !important;
}

.client-edit-view-container #top,
.client-display-view-container #top {
    display: contents;
}

.client-edit-view-container .obj-navbar-client,
.client-display-view-container .obj-navbar-client {
    background-color: var(--white);
    top: 0;
    z-index: 1030 !important;
}
.menu-search{
    margin-bottom:10px;
}
.arrow-icon {
    cursor: pointer;
    padding-left:15px;
    
}
.arrow-icon i {
    font-size: 16px; 
    transition: transform 0.3s ease-in-out;
}

.column {
    overflow:hidden;
}

.list-page-container {
    width:100%;
    overflow: hidden;
    height: 100%;
    display:flex;
}


.main-content-list {
    flex: auto;
    overflow: auto;
    padding-left: 20px;
    padding-right: 20px;
}
.filter-border-on {
    border-right: 3px solid #007eb81a;
}
.filter-border-off {
    border-right: none;
}
.btn.filters-applied {
    border: 2px solid orange;
}
.btn.filters-applied:hover {
    border: 2px solid orange;
}
.form-label{
    font-size:12px;
}
.filters-title {
    padding-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.numeric-field-filter {
    display:flex;
    gap:20px;
}
.filter-numeric-start {
    line-height: 3.2em;
}
.filter-numeric-end {
    line-height: 3.2em;
}
.mb-3{
    margin-bottom:4px;
}

.fa-chevron-up, .fa-chevron-down {
    cursor: pointer;
}

.fa-caret-down, .fa-caret-right {
    cursor: pointer;
}

.right-popup {
    flex: initial;
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
    max-height:100%;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    border-left: 2px black;
    min-width: 20%;
}

.client-container{
    width:85%;
    margin-left:auto;
    margin-right:auto;
}

/*
    Begin custom nav styles
*/
.modal{
    top:55px;
}
.nav-tabs-n {
    padding-left: 0px;
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    margin: 0;
}
.nav-item-n {
    border-bottom: 1px solid #08429f;
    min-width: 120px;
    padding: 0.5em 2em;
    cursor: pointer;
}

.nav-item-n:first-of-type {
    border-top-left-radius: 8px
}

.nav-item-n:last-of-type{
    border-top-right-radius: 8px
}

.nav-item-n-active {
    background-color: var(--nav-link-active-bg-color);
}
.nav-item-n:hover:not(.nav-item-n-active) {
    background-color: #e9ecef
}

.nav-link-n {
    text-align: center;
    white-space: nowrap;
    color: var(--nav-link-active-color);
    font-size: var(--font-size-l);
    font-weight: 500;
}
.nav-link-n:hover{
    text-decoration:none!important;
}
.history{
    padding-top:10px;
}
/*
    End custom nav styles
*/

/*
    Begin custom card styles
*/
.card-body-n {
    align-items: flex-start;
    background-color: var(--white);
    border: 1px none;
    border-radius: 4px;
    box-shadow: 1px 3px 9px 3px #007eb81a;
    flex-direction: column;
    width: 100%;
    margin-bottom:15px;
}

.card-header-n {
    align-items: flex-start;
    background-color: var(--card-header-bg-color);
    border: 1px none;
    border-radius: 4px;
    box-shadow: inset 0px -1px 0px #0000001f;
    overflow: hidden;
    padding: 6px 16px;
    width: 100%;
    color: var(--white);
}

.card-header-n-txt {
    color: var(--card-header-color);
    letter-spacing: 0.15px;
    line-height: 24px;
    font-size: var(--font-size-l);
    font-style: normal;
    font-weight: 500;
}
/*
    End custom card styles
*/

.obj-display-instructions{
    overflow:hidden;
}

.inner-object{
    padding-right: 1rem;
    padding-left: 1rem;
    flex: auto;
}

.form-item {
    align-items: flex-start;
    background-color: var(--white);
    border: 1px none;
    box-shadow: inset 0px -1px 0px #0000001f;
    display: flex;
    padding: 9px 16px;
    width: 100%;
}
.form-row {
    align-items: center;
    width:100%;
}
.form-full {
    padding-top: 20px;
}


.button {
    display: inline-block;
    background-color: var(--btn-primary-bg-color);
    border: 0px none;
    border-radius: 100px;
    padding: 12px 16px;
    text-decoration: none !important;
    color: var(--btn-primary-color);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 500;
}
.ie-button{
    padding-right:10px;
}




/* 
    Polyfill Bootstrap Styles
*/

@supports (position: sticky) {
    .sticky-top {
        position: sticky;
        top: 0;
        z-index: 1020;
    }
}

@supports (position: sticky) {
    .sticky-bottom {
        position: sticky;
        bottom: 0;
        z-index: 1020;
    }
}

@supports (position: sticky) {
    .sticky-left {
        position: sticky;
        left: 0;
        z-index: 1020;
    }
}

@supports (position: sticky) {
    .sticky-right {
        position: sticky;
        right: 0;
        z-index: 1020;
    }
}

/* 
    Overide Bootstrap Styles
*/

.pagination {
    margin-bottom: 0;
}

.page-item.active .page-link {
    background-color: var(--bahama-blue);
    border-color: var(--bahama-blue);
}
.page-link {
    color:var(--lochmara);
}
.btn-primary {
    background-color: var(--btn-primary-bg-color);
    border-color: var(--btn-primary-bg-color);
    color: var(--btn-primary-color);
}

.btn-primary > div{
    color: var(--btn-primary-color);
}
.btn-primary:hover{
    background-color:var(--btn-primary-hover-bg-color);
    color: var(--btn-primary-hover-color);
}

.btn-primary:hover > div{
    color: var(--btn-primary-hover-color);
}

.form-control:focus {
    border-color: var(--btn-primary-hover-bg-color);
    box-shadow: 0 0 0 0.2rem rgb(0 126 184 / 25%);
}

.btn-primary:disabled {
    background-color: var(--btn-primary-bg-color);
    border-color: var(--btn-primary-bg-color);
    color: var(--btn-primary-color);
}

.btn-primary:disabled > div{
    color: var(--btn-primary-color);
}

.btn-primary:active {
    background-color: var(--btn-primary-hover-bg-color);
    border-color: var(--btn-primary-hover-bg-color);
    color: var(--btn-primary-hover-color);
}

.btn-primary:active > div{
    color: var(--btn-primary-hover-color);
}

.btn-primary:focus {
    background-color: var(--btn-primary-hover-bg-color);
    border-color: var(--btn-primary-hover-bg-color);
    color: var(--btn-primary-hover-color);
}

.btn-primary:focus > div{
    color: var(--btn-primary-hover-color);
}

.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--btn-primary-hover-bg-color);
    border-color: var(--btn-primary-hover-bg-color);
    color: var(--btn-primary-hover-color);
}

.btn-primary:not(:disabled):not(.disabled):active div{
    color: var(--btn-primary-hover-color);
}

.action-btn, .action-btn:disabled {
    background-color: var(--action-btn-bg-color);
    border-color: var(--action-btn-bg-color);
    color: var(--action-btn-color);
}

.action-btn:hover, .action-btn:active, .action-btn:focus {
    background-color: var(--action-btn-hover-bg-color);
    border-color: var(--action-btn-hover-bg-color);
    color: var(--action-btn-hover-color);
}

.col-sm-6{
    padding:0px;
}

.modal-title{
    color: var(--daintree);
    font-size: var(--font-size-xxl);
    font-style: normal;
    font-weight: 700;
    padding-top: 20px;
    padding-bottom: 20px;
}

.card {
    border: 1px none;
    box-shadow: 1px 3px 9px 3px #007eb81a;
    margin-bottom: 30px;
}
.card-header {
    background-color: var(--lochmara);
    color: var(--white);
    font-size: var(--font-size-l);
    font-style: normal;
    font-weight: 500;
}
.card-header-txt {
    letter-spacing: 0.15px;
    color: var(--white);
    font-size: var(--font-size-l);
    font-style: normal;
    font-weight: 500;
}

/* Dashboards */

.col-lg-3-dash {
    max-width: 23.25%;
    min-width: 150px;
    flex: 0 0 23.25%;
}

.col-lg-4-dash {
    max-width: 30.25%;
    min-width:200px;
    flex: 0 0 30.25%;
}
.col-lg-6-dash {
    flex: 0 0 46.5%;
    max-width: 46.5%;
    min-width: 300px;
}
.col-lg-8-dash {
    flex: 0 0 60.5%;
    max-width: 60.5%;
    min-width: 400px;
}
.col-lg-9-dash {
    flex: 0 0 69.75%;
    max-width: 69.75%;
    min-width: 450px;
}
.col-lg-12-dash {
    flex: 0 0 94.75%;
    max-width: 94.75%;
}


/* End Bootstrap Overwrites */
.container-fluid {
    height: 100%;
    overflow: auto;
}
.container-full {
    height: 100%;
    overflow: hidden;
    padding:0px;
}
.ngview{
    width:97%;
}

small {
    font-family: var(--font-family-lexend);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 400;
    display:block;
    padding:5px;

}

.rightsidebar-link:hover{
    text-decoration: none !important;
    background-color: #e9ecef;
}


/*
    Begin Renewity Object field group styles
*/
.obj-fg-row {
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width:100%;
    height:100%;
}

.obj-fg-full-row {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width:100%;
}

/* Object forms keep fields in paired rows so unlike-height controls still align. */
.object-form-field-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
}

.object-form-field-grid--two-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.object-form-field-grid__item {
    height: 100%;
    min-width: 0;
}

.object-form-field-grid__item > .form-row {
    margin: 0;
}

.object-form-field-grid__item > .form-row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

.field-group-copy-control {
    align-items: center;
    display: flex;
    gap: 0.625rem;
    padding: 14px 16px 8px;
}

.field-group-copy-control__checkbox {
    accent-color: var(--btn-primary-bg-color);
    cursor: pointer;
    flex: 0 0 auto;
    height: 1.375rem;
    margin: 0;
    width: 1.375rem;
}

.field-group-copy-control__checkbox:disabled {
    cursor: not-allowed;
}

.field-group-copy-control__label {
    cursor: pointer;
    line-height: 1.375rem;
    margin: 0;
}

.boolean-field-control {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    gap: 0.5rem;
    margin-bottom: 0;
    min-height: 2.25rem;
    padding: 0.375rem 0;
}

.boolean-field-control__checkbox {
    accent-color: var(--btn-primary-bg-color);
    cursor: pointer;
    flex: 0 0 auto;
    height: 1.125rem;
    margin: 0;
    width: 1.125rem;
}

.boolean-field-control__checkbox:disabled {
    cursor: not-allowed;
}

.boolean-field-control__checkbox.is-invalid {
    outline: 2px solid #dc3545;
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    .object-form-field-grid--two-columns {
        grid-template-columns: minmax(0, 1fr);
    }
}

.obj-fg-table {
    align-items: flex-start;
    background-color: var(--white);
    border: 1px none;
    border-radius: 4px;
    box-shadow: 1px 3px 9px 3px #007eb81a;
    flex-direction: column;
    margin-bottom: 30px;
}

.obj-fg-td {
    align-items: flex-start;
    background-color: var(--white);
    border: 1px none;
    box-shadow: inset 0px -1px 0px #0000001f;
    display: flex;
    padding: 9px 16px;
    width:100%;
    word-break:break-all;
}

.obj-fg-label {
    align-items: center;
}

.obj-fg-label > label {
    line-height: 1.25;
    margin-bottom: 0;
}

.obj-fg-td-lr {
    align-items: flex-start;
    background-color: var(--white);
    border: 1px none;
    display: flex;
    padding: 9px 16px;
    width: 100%;
    word-break: break-all;
}
.form-row {
    align-items: center;
    width:100%;
}
.button-group{
    display:flex;
    gap:20px;
    margin-top:15px;
    padding-bottom:15px;
}
.form-full{
    padding-top:20px;
}

/*Unused, Replaced with card-header-n*/
.obj-fg-table-header {
    background-color: var(--lochmara);
    border: 1px none;
    border-radius: 4px;
    box-shadow: inset 0px -1px 0px #0000001f;
    overflow: hidden;
    padding: 6px 16px;
    width: 100%;
}

/*Unused, Replaced with card-header-n-txt*/
.obj-fg-header-txt {
    color: var(--white);
    font-size: var(--font-size-l);
    font-style: normal;
    font-weight: 500;
}
/*
    End Renewity Object field group styles
*/

/*
    Begin Trumbowyg Overwrites
*/

.trumbowyg-box:not(.trumbowyg-fullscreen) {
    max-height: 20em;
    display: flex;
    flex-direction: column;
}

.trumbowyg-box, .trumbowyg-editor, .trumbowyg-textarea {
    min-height: 6em;
    border-radius: 4px;
}

.trumbowyg-button-pane {
    border-radius: 4px 4px 0 0;
}

.trumbowyg-editor {
    display:block;
    border-radius: 0 0 4px 4px;
}

.trumbowyg-modal {
    top: 40% !important;
}

.trumbowyg-box.reduced-width:not(.trumbowyg-fullscreen) .trumbowyg-button-pane button {
    width: 32px
}

.trumbowyg-box.reduced-width:not(.trumbowyg-fullscreen) .trumbowyg-button-group:nth-child(2) {
    display: none;
}

.obj-conv {
    display: flex;
    flex-direction: column;
    height: 95%;
    margin-top: 1em;
    box-shadow: -1px 3px 9px 3px #007eb81a;
}

.obj-conv .trumbowyg-button-pane {
    background-color: transparent;
}

.obj-conv .trumbowyg-button-pane button:hover {
    background-color: revert-layer;
}

.obj-conv .trumbowyg-box, .obj-conv .trumbowyg-editor, .obj-conv .trumbowyg-textarea {
    min-height: 8em !important;
}

.obj-conv .trumbowyg-box:not(.trumbowyg-fullscreen) {
    max-height: 14em;
}

/*
    End Trumbowyg Overwrites
*/


/* Modal styles */




/*Default Text Styling*/
/*Inner Content - Global*/
.page-title {
    color: var(--daintree);
    font-size: var(--font-size-xxl);
    font-style: normal;
    font-weight: 700;
    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.page-button{
    justify-content:right;
}
.page-title-inner {
    color: var(--daintree);
    font-size: var(--font-size-xxl);
    font-style: normal;
    font-weight: 700;
    padding-bottom:20px;
}
.page-title-admin {
    color: var(--daintree);
    font-size: var(--font-size-xxl);
    font-style: normal;
    font-weight: 700;
    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
    gap:20px;
    align-items: center;
}







.instructions {
    padding-left: 2px;
    padding-right: 2px;
}



/*from figma*/

/* screen - homepage3 */

.navlink{
    text-decoration:none !important;
}
.navlink :hover {
        
}

.obj-title-box {
    align-items: flex-start;
    border: 1px none;
    display: flex;
    flex-direction: column;
    gap: 21px;
    min-height: 84px;
    width: 365px;
}



.state-chip {
    border: 1px solid;
    border-radius: 16px;
    height: 32px;
    overflow: hidden;
    padding: 5px 12px;
}
.state-chip-span0 {
    font-weight: 700;
}
.state-chip-txt {
    font-family: var(--font-family-lato);
    font-size: var(--font-size-m);
    font-weight: 400;
    height: 20px;
    letter-spacing: 0;
    line-height: 20px;
    min-width: 104px;
    text-align: center;
    white-space: nowrap;
}
.obj-navbar {
    margin-bottom: 1rem;
    margin-top: 0.5rem;
    min-height: 2rem;
    padding-top: 20px;
    padding-bottom: 20px;
    position: -webkit-sticky; /* Safari & IE */
    position: sticky;
    top: 0px;
    z-index: 900;
}
.obj-navbar-client {
    margin-bottom: 1rem;
    margin-top: 0.5rem;
    min-height: 2rem;
    padding-top: 20px;
    padding-bottom: 20px;
    position: -webkit-sticky; /* Safari & IE */
    position: sticky;
    z-index: 900;
}

.obj-navbar ul .obj-nav-link:hover {
    color: black;

    text-decoration: none !important;
}

.obj-navbar li:last-child {
    margin-right: 15px;
}

.obj-navbar li .obj-nav-link {
    padding: 12px;
    color: var(--black-2);
    font-family: var(--font-family-lato);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 400;
}

.obj-navbar li {
    padding: 2px;
    color: var(--black-2);
    font-family: var(--font-family-lato);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 400;
}

.obj-navbar li:hover {
    background-color: #f0f0f0;
}


.obj-list-table {
    border-collapse: separate; 
    border-spacing: 0;
    width:auto;
    min-width:100%;
    table-layout:auto;

}
.obj-list-table td {
    align-items: flex-start;
    border: 1px none;
    box-shadow: inset 0px -1px 0px #0000001f;
    height: 48px;
    padding: 16px 16px;
    vertical-align:top;

}
.obj-list-table td:first-of-type {
    border-left: inherit;
}
.auto-increment {
    white-space: nowrap;
}
.obj-list-table th {
    align-items: flex-start;
    background-color: var(--white);
    border: 1px none;
    box-shadow: inset 0px -1px 0px #0000001f;
    height: 48px;
    padding: 16px 16px;
}
.obj-list-table tr {
   background-color: var(--white);
}
.obj-list-table tbody tr:hover {
   background-color: #e9ecef !important;
}
.obj-list-table thead th:hover {
   background-color: #e9ecef !important;
}

.search-row:hover{
    background-color: var(--white) !important;
}

.label-text-1 {
    height: 20px;
    letter-spacing: 0;
    line-height: 20px;
    min-width: 103px;
    text-align: center;
    white-space: nowrap;
}

.mat-table {
    background-color: var(--white);
    border: 1px none;
    border-radius: 4px;
    box-shadow: 1px 3px 9px 3px #007eb81a;
    display: block;
    width: 100%;
    overflow-x: auto;
    margin-top: 16px;
    margin-bottom: 16px;
    
}
.mat-table th {
    color: var(--sonic-silver);
    font-family: var(--font-family-lato);
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 700;
}

.child-table{
    
}
.child-table-field {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 16px;
    padding-bottom:16px;
}

.fg-button-row{
    display:flex;
    width:100%;
    padding:16px;
    gap:10px;
}

.list-pagination {
    display: flex;
    gap: 20px;
    position: sticky;
    bottom: 0;
    left:0;
    background: var(--white);
    z-index: 5;
}

#details{
    padding:20px;
}
#history{
    padding:20px;
}
#tags{
    padding:20px;
}

.comment-body img{
    width: 90%;
}


.text-col {
    /* If you want to let text wrap inside that 75ch box, keep white-space: normal */
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.date-col {
    white-space: nowrap;
}

div[scroll-shadow]:not(.disable-scroll) .obj-list-table th:nth-child(1),
div[scroll-shadow]:not(.disable-scroll) .obj-list-table td:nth-child(1) {
    position: sticky;
    left: 0;
    background: inherit;
}

div[scroll-shadow]:not(.disable-scroll) .obj-list-table.has-select-col th:nth-child(2),
div[scroll-shadow]:not(.disable-scroll) .obj-list-table.has-select-col td:nth-child(2) {
    position: sticky;
    left: 40px;
    background: inherit;
}

.obj-list-table td.text-field-td {
    min-width: 75ch;

    white-space: normal; 
    word-wrap:break-word;
    overflow-wrap: break-word; 

}

div[scroll-shadow].scrolled .obj-list-table:not(.has-select-col) th:nth-child(1),
div[scroll-shadow].scrolled .obj-list-table:not(.has-select-col) td:nth-child(1),
div[scroll-shadow].scrolled .obj-list-table.has-select-col th:nth-child(2),
div[scroll-shadow].scrolled .obj-list-table.has-select-col td:nth-child(2) {
    box-shadow: inset 0 -1px 0 #0000001f, 4px 0 12px -4px rgba(0,0,0,0.25);
}



/* View Nav */



/* CLIENT DISPLAY VIEW STYLES */

/* below 1200px viewport, give it more width */
@media (max-width: 1200px) {
    .container-client {
        width: 85%;
    }
}

/* tablet / small-desktop */
@media (max-width: 992px) {
    .container-client {
        width: 90%;
    }
}

/* phones */
@media (max-width: 600px) {
    .container-client {
        width: 100%;
        padding: 0 1rem; /* a little side-padding instead of full bleed */
    }
}

.comments-container {
        flex: initial;
        max-width: 50%;
        min-width: 50%;
        border-radius: 4px;
        
}

@media (max-width: 768px) {
    .comments-container {
        flex: initial;
        max-width: 100%;
        min-width: 100%;
        border-radius: 4px;
        box-shadow: -1px 3px 9px 3px #007eb81a
    }

}


/* AGENT MEDIA QUERIES */

/* LABEL & CURRENT STATE */

.fixed-label {
    display: inline-block; 
    width: 15ch; 
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis; 
    vertical-align: middle; 
}

/* AGENT DISPLAY VIEW MENU SELECTOR */


.nav-menu-label {
    font-size: 1.1rem;
    margin-right: 0.5rem;
    vertical-align: middle;
}


.nav-menu-select {
    font-size: 1.1rem; 
    padding: 0.5em 0.75em; 
    min-width: 180px;
    line-height: 1.4;
    vertical-align: middle;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.nav-menu-n{
    padding-bottom:20px;
}

@media (max-width: 768px) {
    .brand-text{
        display:none;
    }
    .header-item-list{
        display:none;
    }
    .header-content-btn{
        display:none;
    }
    .user-name{
        display:none;
    }
    .admin-link-text{
        display:none;
    }
}


/* DEFAULT LOGIN PAGE */
.default-login-box{
    width:75%;
    margin-top:100px;
    margin-left:auto;
    margin-right:auto;
}



/* STYLES FROM viwePage.html */

#page-title {
    margin: auto;
    width: 73%;
    padding-top: 25px;
    padding-bottom: 15px;
}

#top-title-search {
    background-color: azure;
}

#title-text {
    text-align: center;
    color: darkslategray;
}

#page-search {
    margin: auto;
    width: 75%;
    padding-top: 35px;
    padding-bottom: 50px;
    text-align: center;
}

#page-search-searchbox {
    min-width: 300px;
    max-width: 500px;
    display: inline-block
}

#page-search-selecter {
    width: 150px;
    display: inline-block;
}

#page-search-button {
    display: inline-block;
}

.body {
    background-color: whitesmoke
}

#main-container {
    margin-left: auto;
    margin-right: auto;
    width: 75%;
    margin-top: 50px;
    padding-top: 10px;
}




#html-block {
    padding: 15px;
    background-color: rgb(253, 253, 253);
}

.p {
}

.action-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 40px;
}

.custom-card {
    background-color: var(--custom-card-bg-color);
    color: var(--custom-card-color);
    padding: 15px;
    margin: 10px;
    text-align: center;
    width: 18em;
}

    .custom-card:hover {
        background-color: var(--custom-card-hover-bg-color);
        color: var(--custom-card-hover-color);
    }

.custom-card-text {
    color: gray;
    font-size: small;
}

.custom-card-icon {
    margin: auto;
}

.feather {
    width: 35px;
    height: 35px;
}

.action-list-link:link {
    text-decoration: none;
    color: black
}

.action-list-link:visited {
    text-decoration: none;
    color: black
}

.action-list-link:hover {
    text-decoration: none;
    color: black
}

.action-list-link:active {
    text-decoration: none;
    color: black
}

.timer-live-display {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.timer-live-display__value {
    display: inline-grid;
    flex: 0 0 auto;
    text-align: left;
    font-family: inherit;
    font-weight: inherit;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.timer-live-display__value-text,
.timer-live-display__value-reserve {
    grid-area: 1 / 1;
}

.timer-live-display__value-reserve {
    visibility: hidden;
    pointer-events: none;
}

.timer-live-display__unit {
    display: inline-block;
    flex: 0 0 auto;
}

.timer-live-display__status {
    display: inline-flex;
    flex: 0 0 1rem;
    width: 1rem;
    justify-content: center;
}

.report-statistics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    padding: 1rem;
}

.report-actions {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}

.report-statistic-card {
    position: relative;
    min-width: 0;
    min-height: 7.5rem;
    padding: 1rem 1.125rem;
    overflow: hidden;
    border: 1px solid #dce7ee;
    border-radius: 0.65rem;
    background: linear-gradient(145deg, #ffffff 0%, #f5fafd 100%);
    box-shadow: 0 0.2rem 0.65rem rgba(0, 52, 79, 0.08);
}

.report-statistic-card::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0.3rem;
    background: var(--card-header-bg-color);
    content: "";
}

.report-statistic-card__title {
    color: #536774;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.report-statistic-card__value {
    margin-top: 0.7rem;
    color: #12384c;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
    .report-statistics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .report-statistics-grid {
        grid-template-columns: 1fr;
    }
}

@media print {
    .report-actions.non-printable {
        display: none !important;
    }

    .report-statistics {
        padding-bottom: 0.35rem !important;
    }

    .report-statistics .card {
        margin-bottom: 0;
        border: 0;
    }

    .report-statistics .card-header-n {
        padding: 0 0 0.2rem;
        border-bottom: 1px solid #c8d4dc;
        border-radius: 0;
        background: transparent !important;
    }

    .report-statistics .card-header-n-txt {
        color: #263943 !important;
        font-size: 0.8rem;
        line-height: 1.2;
    }

    .report-statistics-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 0.2rem 0.65rem;
        padding: 0.3rem 0;
    }

    .report-statistic-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: baseline;
        gap: 0.3rem;
        min-height: 0;
        padding: 0.2rem 0.35rem;
        border: 0;
        border-left: 2px solid #9db2bf;
        border-radius: 0;
        background: transparent !important;
    }

    .report-statistic-card::before {
        display: none;
    }

    .report-statistic-card__title {
        color: #455b67;
        font-size: 0.62rem;
        line-height: 1.15;
    }

    .report-statistic-card__value {
        margin-top: 0;
        color: #132f3e;
        font-size: 0.78rem;
        line-height: 1.15;
        white-space: nowrap;
    }

    .printable .timer-live-display__value,
    .printable .timer-live-display__unit,
    .printable .timer-live-display__status {
        flex-basis: auto;
        width: auto;
    }

    .printable .timer-live-display__value,
    .printable .timer-live-display__unit {
        padding-right: 0.15rem;
    }
}

/* below 1200px viewport, give it more width */
@media (max-width: 1200px) {
    #main-container {
        width: 85%;
    }
    .default-login-box{
        width: 85%;
    }
}

/* tablet / small-desktop */
@media (max-width: 992px) {
    #main-container {
        width: 90%;
    }
    .default-login-box {
        width: 90%;
    }
}

/* phones */
@media (max-width: 600px) {
    #main-container {
        width: 100%;
        padding: 0 1rem; 
    }
    .default-login-box {
        width: 98%;
    }
}