:root {
    --color-white: #fff;
    --color-primary: #006EC7;
    --color-secondary: #ED6E00;
    --color-grey-10: #F2F2F3;
    --color-grey-20: #DDDEE0;
    --color-grey-100: #191A1A;
    --color-orange-10: #FDF0E7;
    --color-orange-40: #F2994D;
    --color-blue-10: #E7F5FD;
    --color-blue-20: #B4D7F1;
    --color-blue-40: #4D9BD9;
    --color-blue-70: #015495;
    --color-lime-70: #7EB12C;
    --color-gree-10: #EAFDE7;
    --color-gree-70: #3CB12C;
    --color-purple-10: #FBE7FD;
    --color-purple-70: #A12CB1;
    --text-size-h1: 53.4px;
    --text-size-h2: 42.7px;
    --text-size-h3: 34.2px;
    --text-size-h4: 27.3px;
    --text-size-h5: 21.9px;
    --text-size-h6: 17.5px;
    --text-size-body: 14px;
    --text-size-body-sm: 11.2px;
    --text-size-body-xs: 9px;
}

/*#region  Grid System */

.grid-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /*grid-gap: 0.5em;*/
    grid-gap: 16px;
}

@media only screen and (min-width: 601px) {
    .grid-container {
        /*grid-gap: 2em;*/
        grid-gap: 16px;
    }
}

.grid-xs-1 {
    grid-column: span 1;
}

.grid-xs-2 {
    grid-column: span 2;
}

.grid-xs-3 {
    grid-column: span 3;
}

.grid-xs-4 {
    grid-column: span 4;
}

.grid-xs-5 {
    grid-column: span 5;
}

.grid-xs-6 {
    grid-column: span 6;
}

.grid-xs-7 {
    grid-column: span 7;
}

.grid-xs-8 {
    grid-column: span 8;
}

.grid-xs-9 {
    grid-column: span 9;
}

.grid-xs-10 {
    grid-column: span 10;
}

.grid-xs-11 {
    grid-column: span 11;
}

.grid-xs-12 {
    grid-column: span 12;
}

@media only screen and (min-width: 601px) {
    .grid-sm-1 {
        grid-column: span 1;
    }

    .grid-sm-2 {
        grid-column: span 2;
    }

    .grid-sm-3 {
        grid-column: span 3;
    }

    .grid-sm-4 {
        grid-column: span 4;
    }

    .grid-sm-5 {
        grid-column: span 5;
    }

    .grid-sm-6 {
        grid-column: span 6;
    }

    .grid-sm-7 {
        grid-column: span 7;
    }

    .grid-sm-8 {
        grid-column: span 8;
    }

    .grid-sm-9 {
        grid-column: span 9;
    }

    .grid-sm-10 {
        grid-column: span 10;
    }

    .grid-sm-11 {
        grid-column: span 11;
    }

    .grid-sm-12 {
        grid-column: span 12;
    }
}

@media only screen and (min-width: 993px) {
    .grid-md-1 {
        grid-column: span 1;
    }

    .grid-md-2 {
        grid-column: span 2;
    }

    .grid-md-3 {
        grid-column: span 3;
    }

    .grid-md-4 {
        grid-column: span 4;
    }

    .grid-md-5 {
        grid-column: span 5;
    }

    .grid-md-6 {
        grid-column: span 6;
    }

    .grid-md-7 {
        grid-column: span 7;
    }

    .grid-md-8 {
        grid-column: span 8;
    }

    .grid-md-9 {
        grid-column: span 9;
    }

    .grid-md-10 {
        grid-column: span 10;
    }

    .grid-md-11 {
        grid-column: span 11;
    }

    .grid-md-12 {
        grid-column: span 12;
    }
}

@media only screen and (min-width: 1201px) {
    .grid-lg-1 {
        grid-column: span 1;
    }

    .grid-lg-2 {
        grid-column: span 2;
    }

    .grid-lg-3 {
        grid-column: span 3;
    }

    .grid-lg-4 {
        grid-column: span 4;
    }

    .grid-lg-5 {
        grid-column: span 5;
    }

    .grid-lg-6 {
        grid-column: span 6;
    }

    .grid-lg-7 {
        grid-column: span 7;
    }

    .grid-lg-8 {
        grid-column: span 8;
    }

    .grid-lg-9 {
        grid-column: span 9;
    }

    .grid-lg-10 {
        grid-column: span 10;
    }

    .grid-lg-11 {
        grid-column: span 11;
    }

    .grid-lg-12 {
        grid-column: span 12;
    }
}

@media only screen and (min-width: 1600px) {
    .grid-xl-1 {
        grid-column: span 1;
    }

    .grid-xl-2 {
        grid-column: span 2;
    }

    .grid-xl-3 {
        grid-column: span 3;
    }

    .grid-xl-4 {
        grid-column: span 4;
    }

    .grid-xl-5 {
        grid-column: span 5;
    }

    .grid-xl-6 {
        grid-column: span 6;
    }

    .grid-xl-7 {
        grid-column: span 7;
    }

    .grid-xl-8 {
        grid-column: span 8;
    }

    .grid-xl-9 {
        grid-column: span 9;
    }

    .grid-xl-10 {
        grid-column: span 10;
    }

    .grid-xl-11 {
        grid-column: span 11;
    }

    .grid-xl-12 {
        grid-column: span 12;
    }
}
/*#endregion End Grid System*/

.row {
    display: flex;
}

.toggle-view-button {
    background: none;
    border: none;
    color: blue;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    font: inherit;
}

footer .d-flex {
    flex-direction: row !important;
}
/*#endregion*/

/*#region  Utility class to hide any element from the UI while keeping it in the DOM.*/
.hidden-section {
    display: none;
}

/*#region  Custom css */

/*#region AB20250603 page adjustments generated by ChatGPT */
html, body {
    height: 100%;
    margin: 0;
}

/*Nifty class*/
.root {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/*Nifty Id*/
#content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/*Nifty class*/
.content__boxed {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.page-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0px 10px; /*AB20250603 0px cant be done, it makes vertical scroll appear*/
}

.form-container {
    flex: 1;
    display: flex;
    flex-direction: row;
    min-height: 0;
    flex-wrap: wrap; /* Important for small screens */
}

.main-search,
.main-form, .main-side {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* Desktop default */
.main-search {
    width: 250px;
    background-color: #f9f9f9;
}

.main-form, .main-side {
    flex: 1;
    border-left: solid 1px rgba(0, 0, 0, 0.07);
    background-color: #ffffff;
}

.dr-link, .dr-link:focus, .dr-link:hover {
    color: #337ab7 !important;
    text-decoration: none;
}

/* AB2025*/
.main-form-top-hr {
    margin: 0rem 0rem !important;
}

.main-form-hr {
    margin: 1rem 0rem !important;
}

/* AB2025 configuration screen line on the devexpress form layout */
.line-above {
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    opacity: 1;
    padding-top: 10px;
}

.line-below {
    border-bottom: 1.5px solid rgba(0, 0, 0, 0.07);
}

/* Medium screens (tablet) */
@media (max-width: 992px) {
    .form-container {
        flex-direction: column;
    }

    .main-search {
        width: 100%;
        border-bottom: solid 1px rgba(0, 0, 0, 0.07);
    }

    .main-form, .main-side {
        border-left: none;
    }
}

/* Small screens (mobile) */
@media (max-width: 576px) {
    .main-search,
    .main-form {
        width: 100%;
    }

    .main-search {
        order: 1;
    }

    .main-form, .main-side {
        order: 2;
    }

    .main-side {
        order: 3;
    }
}
/*#endregion*/

/*#region General helpers*/
.hiddenHeader thead, hidden {
    display: none;
}

h5 .subtitle-hor-pad {
    padding-left: 10px !important;
}

/* to avoid the borders when the page is initially open*/
h1.page-title:focus-visible {
    outline-width: 0;
}


/*Labels*/
.dxbl-fl .dxbl-fl-cpt {
    font-weight: 600 !important;
    color: #161616 !important;
}

/* truncate the text in column cell*/
.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hide the remove all button in the DxFileInput/DxUpload components */
.file-input-hide-button .dxbl-btn-standalone.dxbl-btn-outline-secondary {
    display: none;
}

/* Removes the top border from any <footer> element with the 'no-border' class */
footer.no-border {
    border-top: none !important;
}

/* 
 * Applies a pointer cursor ("hand" icon) to grid rows.
 * Use this class to visually indicate that a row in the DxGrid is clickable or interactive.
 */
.dxgrid-row-pointer {
    cursor: pointer;
}

/*Custom Fluent Theme Devexpress */
/*DevExp small buttons */
.sm-devex-btn {
    height: 32px !important;
    margin: 0px 2px !important;
    /*padding: 0px 5px !important; changes the size of the button*/
    /*border: red dashed 1px !important;*/
}

/*Buttons */
.dxbl-btn.dxbl-btn-secondary {
    --dxbl-btn-bg: var(--dxbl-btn-secondary-hover-bg) !important;
    --dxbl-btn-hover-bg: var(--dxbl-btn-secondary-active-bg) !important;
}

/*Upload buttons*/
.dxbl-upload {
    padding-top: 0px !important;
}
/*end Custom Fluent Theme Devexpress*/

/*#endregion General helpers*/



/*#region Carousel customization AB20241204*/
.carousel-inner, .carousel-item {
    height: 300px !important;
}

/* Indicators (dots) in medium gray */
.carousel-indicators [data-bs-target] {
    background-color: #888;
    border: 1px solid #888;
    opacity: 1;
}

/* Active indicator in dark grey */
#bulletinMessagesCarousel .carousel-indicators .active {
    background-color: #222;
    border-color: #222;
}

/* Reduces the margin below the carousel indicators */
#bulletinMessagesCarousel .carousel-indicators {
    margin-bottom: 80px;
}

.bulletin-view-more-item {
    padding: 10px 15px;
}

    .bulletin-view-more-item .bulletin-richtext {
        font-family: inherit;
        font-size: inherit;
        word-wrap: break-word;
        width: 100%;
        text-align: justify;
    }

    .bulletin-view-more-item .pull-left {
        float: left !important;
    }

    .bulletin-view-more-item .text-truncate {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .bulletin-view-more-item .d-block {
        display: block !important;
    }

    .bulletin-view-more-item .text-muted {
        color: #6c757d !important;
    }

    .bulletin-view-more-item .text-end {
        text-align: end !important;
    }

    .bulletin-view-more-item .text-start {
        text-align: start !important;
    }

    .bulletin-view-more-item .mb-4 {
        margin-bottom: 2rem !important;
    }

    /* Bootstrap h4 size and weight, for reference */
    .bulletin-view-more-item .h4 {
        font-size: 1.5rem;
        font-weight: 500;
    }

.bulletin-grid-toolbar {
    margin-left: -10px;
    margin-right: -10px;
}

    .bulletin-grid-toolbar .search-box-item {
        width: 1100px;
    }
/*#endregion Carousel customization AB20241204*/

/*#region Bulletin card */

    .bulletin-view-more-item .text-truncate {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .bulletin-view-more-item .d-block {
        display: block !important;
    }

    .bulletin-view-more-item .text-muted {
        color: #6c757d !important;
    }

    .bulletin-view-more-item .text-end {
        text-align: end !important;
    }

    .bulletin-view-more-item .text-start {
        text-align: start !important;
    }

    .bulletin-view-more-item .mb-4 {
        margin-bottom: 2rem !important;
    }

    /* Bootstrap h4 size and weight, for reference */
    .bulletin-view-more-item .h4 {
        font-size: 1.5rem;
        font-weight: 500;
    }

.bulletin-grid-toolbar {
    margin-left: -10px;
    margin-right: -10px;
}

    .bulletin-grid-toolbar .search-box-item {
        width: 1100px;
    }
/*#endregion Carousel customization AB20241204*/

/*#region Bulletin card */

.bulletin-card {
    height: 260px;
    min-height: 260px;
    max-height: 260px;
}

    .bulletin-card .bulletin-image{
        object-fit: cover;
        width: 370px;
        height: 260px;
        min-height: 260px;
        min-width: 370px;
    }

    .bulletin-card .attachments-container {
        max-width: 800px;
    }

        .bulletin-card .attachments-container .btn-link {
            max-width: 160px;
        }

    .bulletin-card .card-body {
        display: flex;
        flex-direction: row;
        height: 100%;
        flex-direction: column;
        justify-content: space-between;
    }

    .bulletin-card .card-body p {
        flex: 1;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        overflow-wrap: break-word;
    }

/*#endregion Preview card to the bulletin */

/*#region Configuration News and Announcements*/

/* Gray text, slightly smaller font - bulletin boad messages grid */
.text-grey-sm {
    color: #888;
    font-size: 0.80rem;
}

/*rounded-circle*/
.bg-grey-custom {
    background-color: #c0c3c7 !important;
}

/*Hide columns that you don't want to display in DxGrid, but you still want to be able to filter them using SearchTextParseMode*/
.hide-column-dxgrid {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    border: none !important;
}
/*#endregion News and Announcements*/

/*#region Menu*/
.mainnav__categoriy {
    margin-right: -10px; /*to avoid space on the rigth when the menu option is selected, blue background*/
}

.mainnav__inner .mainnav__top-content .mainnav__menu > .nav-item > .nav-link {
    font-weight: normal;
}

    .mainnav__inner .mainnav__top-content .mainnav__menu > .nav-item > .nav-link.active {
        background-color: #f9f9f9 !important;
        border-radius: 0 !important;
        box-shadow: none;
        color: #25476a !important;
        font-weight: normal !important;
        box-shadow: inset 3px 0px 0 -1px #0c80df !important;
    }

.nav:not(.nav-pills) .nav-item.active {
    box-shadow: inset 3px 0px 0 -2px #0c80df !important;
    background-color: #f9f9f9 !important;
}


/*.mainnav__inner .mainnav__top-content .nav-item .nav-link:hover {
    font-weight: bold !important;
}*/

/*submenu */
.root .mainnav__menu > .nav-item.has-sub > .mininav-content > .nav-item > .nav-link {
    font-weight: normal;
}

    .root .mainnav__menu > .nav-item.has-sub > .mininav-content > .nav-item > .nav-link.active {
        background-color: #f9f9f9 !important;
        border-radius: 0 !important;
        box-shadow: none;
        color: #25476a !important;
        font-weight: normal !important;
        box-shadow: inset 3px 0px 0 -1px #0c80df !important;
    }

.root .mainnav__menu > .nav-item.has-sub > .nav-link:hover {
    box-shadow: inset 3px 0px 0 -1px #0c80df !important;
}


.root:not(.mn--min) .mainnav__menu > .nav-item.has-sub > .mininav-content {
    border-inline-start: 0px !important;
    margin-inline-start: 1.75em;
}

.vr {
    background-color: white !important;
    opacity: 0.2 !important;
}

.list-group-item-action:focus {
    background-color: #edf1f6 !important;
}
/*#endregion region*/

/*#region Modal styles */
/*Inbox page/Parocess case (correspondence widget)*/
#threadModal .modal-dialog {
    max-width: 80% !important;
    width: 80% !important;
}

#composeModal .modal-dialog {
    height: 98% !important;
    max-height: 98% !important;
    max-width: 80% !important;
    width: 80% !important;
    margin-top: 2vh;
    margin-bottom: 5vh;
}

#composeModal .modal-body {
    overflow-y: auto;
    flex: 1 1 auto;
}

/*  Modal compose message: To fix the dropdowns in DxHmlEditor
  Ensures that the Bootstrap modal dialog (.modal) always appears above the modal backdrop (.modal-backdrop).
  By explicitly setting z-index: 1049 for the backdrop and z-index: 1050 for the modal, 
  we prevent any potential stacking issues, guaranteeing that the modal is always visible and interactive,
  while the backdrop remains behind it. The !important flag enforces these stacking orders,
  even if other styles attempt to override them. 
    TODO: RRR27062025. Must be checked by AB
*/

#composeModal {
    z-index: 1050 !important;
}
/* Para backdrop, aplica a todos los .modal-backdrop, pero si hay dos abiertos, necesitarás JS para distinguirlos */
.modal-backdrop {
    z-index: 1049 !important;
}
/*#endregion Modal styles end*/

/*#region Html tabs */
.tab-container input[type="radio"] {
    display: none;
}

/* tab label*/
.tab-label {
    display: inline-block;
    padding: 10px 20px;
    margin-right: -1px;
    cursor: pointer;
    background-color: #f1f1f1;
    border-bottom: none;
}

/* active tab*/
.tab-container input[type="radio"]:checked + .tab-label {
    color: #212529;
    background-color: #f5f5f5;
    border-bottom-color: #fff;
}

/* display the selected tab content*/
.tab-content {
    display: none;
    border-top: 2px solid #ccc;
    padding: 20px;
}

    .tab-content.active {
        display: block;
    }

#tab1:checked ~ #content1,
#tab2:checked ~ #content2 {
    display: block;
}
/*#endregion Html tabs end*/

/*#region Party Combo box responsiveness*/
.combo-responsive {
    width: 100%;
    max-width: 350px;
}

@media (max-width: 576px) { /* Small devices (phones) */
    .combo-responsive {
        margin-top: 0.25rem;
        margin-left: 0.5rem;
        width: 180px;
    }

    /*in small sizes the sm visible buttons must be visible as indicated by the name*/
    .bulletin-card .bulletin-sm-hidden {
        display: none;
    }

    .bulletin-card .bulletin-sm-visible {
        display: block;
    }

    .bulletin-card .bulletin-image {
        width: 0% !important;
    }


    .bulletin-card .bulletin-text {
        width: 100% !important;
    }
}

@media (min-width: 768px) { /* Medium devices (tablets) */
    .combo-responsive {
        margin-top: 0;
        margin-left: 1rem;
        width: 200px;
    }

    /*in large sizes the sm visible buttons must be hidden*/
    .bulletin-card .bulletin-sm-hidden {
        display: block;
    }

    .bulletin-card .bulletin-sm-visible {
        display: none;
    }

    .bulletin-card .bulletin-image {
        display: block;
    }
}

@media (min-width: 992px) { /* Large devices (desktops) */
    .combo-responsive {
        margin-top: 0;
        margin-left: 1.5rem;
        width: 250px;
    }

    /*in large sizes the sm visible buttons must be hidden*/
    .bulletin-card .bulletin-sm-hidden {
        display: block;
    }

    .bulletin-card .bulletin-sm-visible {
        display: none;
    }

    .bulletin-card .bulletin-image {
        display: block;
    }
}

@media (min-width: 1200px) { /* Extra large devices (large desktops) */
    .combo-responsive {
        margin-top: 0;
        margin-left: 2rem;
        width: 350px;
    }

    /*in large sizes the sm visible buttons must be hidden*/
    .bulletin-card .bulletin-sm-hidden {
        display: block;
    }

    .bulletin-card .bulletin-sm-visible {
        display: none;
    }

    .bulletin-card .bulletin-image {
        display: block;
    }

}
/*#endregion*/

/*#region Home page widgets*/

#process-init-widget .list-group-flush > .list-group-item {
    border-width: 0 0 0 !important;
}

/*#endregion Home page widgets*/


/*#region Case documents grid and upload */
.custom-drop-zone {
    padding: 0 !important;
    border-style: dashed !important;
    border-width: 2px !important;
    height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(183, 183, 183, 0.1);
}

    .custom-drop-zone.custom-drop-zone-hover {
        border-style: solid !important;
    }

    .custom-drop-zone > *:not([id^="area_btn_"]) {
        pointer-events: none !important;
    }

.drop-file-label {
    font-weight: 500;
    font-size: 14px;
}
/*#endregion Case documents grid and upload end */

/*#region CaseStatus*/
.wizard {
    margin-top: 20px;
    padding: 20px;
    border: none; /* Remove the border */
}

.wizard-content .step-content {
    display: none;
}

    .wizard-content .step-content:first-child {
        display: block;
    }

.line {
    flex: 1;
    height: 2px;
    align-self: center;
    background-color: #a9a9a9; /* Darker gray for lines */
}

.steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    position: relative;
}

.step {
    flex: 0 0 auto;
    text-align: center;
    padding: 10px;
    position: relative;
    z-index: 1;
}

    .step::before {
        content: attr(data-step);
        position: absolute;
        top: -20px; /* Position the text above the point */
        left: 50%;
        transform: translateX(-50%);
        font-weight: normal; /* Default to normal weight */
        color: var(--bulletin-textor, #a9a9a9); /* Darker gray for text */
    }

    .step.active-step::before {
        font-size: 1.2em; /* Increase font size for active step */
        font-weight: bold; /* Bold for active step */
    }

    .step::after {
        content: "";
        position: absolute;
        top: 50%; /* Align with the line */
        left: 50%;
        width: 10px;
        height: 10px;
        background-color: var(--step-color, #a9a9a9); /* Darker gray for inactive color */
        border-radius: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
    }
/*#endregion End CaseStatus*/

/*#region FromTemplatePreview*/
.form-table {
    width: 100%;
    background-color: #fdfdfd;
    border-collapse: collapse;
    border-color: transparent;
}

    .form-table th, .form-table td {
        padding: 2px;
        text-align: left;
    }

    .form-table th {
        background-color: #fdfdfd;
        color: inherit;
    }

    .form-table memo-td {
        padding: 10px;
    }

.form-section-header {
    background-color: #f5f5f5;
    color: inherit;
}

.form-require {
    color: #ff0000;
    margin-left: 5px;
}

.form-preview-info {
    background-color: #fdfdfd;
    padding: 10px;
}

.form-template-bubble-size {
    height: 25px;
    width: 25px;
}

.form-cpt {
    font-weight: 600 !important;
    color: #161616 !important;
}

.form-value {
    color: #161616 !important;
    margin-left: 0.25rem;
}

.form-editor.readonly {
    background-color: white;
    border: 0 solid transparent;
}
/*#endregion End formtemplatepreview*/

/*#region Roles button container buttons: left and right*/
.roles-button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
}

/*Customize the search box in Roles page - Allowed Operations grid*/
.search-box-icon {
    margin-top: 3px;
    margin-right: -1px;
    margin-left: 6px;
}
/*#endregion Roles button container */

/* Modal compose message: To fix the dropdowns in DxTagBox
  Ensures that any DevExpress popup cell (.dxbl-popup-cell) containing a custom dropdown (.my-dropdown)
  is rendered above other overlay elements. This addresses z-index stacking issues when custom dropdowns 
  inside popups need to appear above modals or other floating UI components. The :has() selector targets 
  only those popup cells that contain a .my-dropdown, applying a high z-index to avoid stacking conflicts.
  Note: The :has() pseudo-class requires modern browser support. 
*/

.dxbl-popup-cell:has(.my-dropdown) {
    z-index: 3000 !important;
}

/* Modal compose message: To display the attachment documents list */
.compose-attachment-row {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

    .compose-attachment-row span {
        margin-right: 10px;
    }

/* Users detail: Custom styling for 'grid-user' DxGrid:
   - Removes padding from detail cells for full-width content display
   - Hides the main grid header row to simplify the layout
   - Re-enables the header row only for the nested 'grid-user-roles' grid
*/
.grid-user.dxbl-grid .dxbl-grid-table .dxbl-grid-detail-cell {
    padding: 0;
}

.grid-user.dxbl-grid .dxbl-grid-header-row {
    display: none;
}

.grid-user.dxbl-grid .grid-user-roles.dxbl-grid .dxbl-grid-header-row {
    display: table-row;
}
/* Teams detail: Layout for team selector box using row-reverse alignment */
.team-selector-box {
    flex: 1;
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: 5px;
}

/** Case documents grid: Custom styling for the case documents grid */
.grid-case-documents .dxbl-grid-table > tbody > tr > td {
    --dxbl-grid-border-width: 0px;
    border-left-width: var(--dxbl-grid-border-width);
    border-right-width: var(--dxbl-grid-border-width);
}

    .grid-case-documents .dxbl-grid-table > tbody > tr > td > .dxbl-upload {
        --dxbl-upload-padding-top: 0px;
        padding-top: var(--dxbl-upload-padding-top);
    }

/* Custom DxToolbar container for the dxgrid */
.toolbar-container {
    display: flex;
    justify-content: flex-end !important;
    width: 100%;
    height: 20px;
    align-items: center;
}

/* Custom icon selector for the DxComboBox */
.icon-selector-item {
    display: flex;
    align-items: center;
}

.icon-selector-label {
    margin-left: 10px;
}

/* User profile - welcome title */
.welcome-title {
    color: #fff;
    font-weight: bold;
}

/*#region Inbox page */

/* inbox messages grid */
.inbox-grid-toolbar {
    margin-left: -10px;
    margin-right: -10px;
}

    .inbox-grid-toolbar .search-box-item {
        width: 1100px;
    }

    .inbox-grid-toolbar .combo-box-item {
        width: 150px;
    }

/*  messages thread grid */

.message-thread-grid.dxbl-grid .dxbl-grid-table {
    border-collapse: collapse;
}

    .message-thread-grid.dxbl-grid .dxbl-grid-table > tbody > tr {
        border-bottom: 1.5px solid rgba(0, 0, 0, 0.07);
    }

        .message-thread-grid.dxbl-grid .dxbl-grid-table > tbody > tr > td {
            vertical-align: top;
        }

.message-thread-grid .row-background > td {
    background-color: lightgray
}

/* message folder buttons keep their active background color and do not show the default focus highlight */
.message-folders-group .list-group-item-action:focus,
.message-folders-group .list-group-item-action.active:focus {
    background-color: var(--bs-list-group-active-bg) !important; /* Mantiene el azul del activo */
    color: var(--bs-list-group-active-color) !important;
    box-shadow: none !important;
    outline: none !important;
}
/*#endregion Inbox page */


/*#region Correspondence widget */

/*Fullscreen modal grid first row background color*/
.first-row-bg {
    background-color: aliceblue !important;
}
/*#endregion Correspondence widget */

/*#region Process Step Messages Grid */
.spin-short {
    width: 220px;
    min-width: 120px;
}
/*#endregion Process Step Messages Grid */

/*#region Button in Case Review Section */
.form-btn-right {
    display: flex;
    justify-content: flex-end;
    text-align: right;
}

.hide-toolbar-html-editor .dxbl-office-ribbon .dxbl-ribbon-toolbar {
    display: none !important;
}

.no-border-html-editor .dxbl-html-editor {
    --dxbl-html-editor-border-width: 0 !important;
    --dxbl-html-editor-border-style: none !important;
}

#reviewFormModal {
    z-index: 1050 !important;
}
/*#endregion Button in Case Review Section */