body[data-topbar=dark] #page-topbar {
    background-color: #3AB09E;
}

    body[data-topbar=dark] #page-topbar .page-title-box h4 {
        color: #FFF;
    }

body, .e-grid, .e-control,
.e-wrapper, .e-css {
    font-family: 'Poppins', sans-serif !important;
    color: #333333;
}

.logo img.img-fluid {
    padding: 50px;
}

    /*Apply Roboto font to .e-control and specific child elements, excluding .e-icon */
    .e-control, .e-control [class^='e-']:not(.e-icons), .e-control [class*=' e-']:not(.e-icons) {
        font-family: "Poppins", sans-serif;
        font-size: .8125rem;
        color: #333333;
    }

        /*Reset font-family for .e-icon to inherit or a specific font for icons */
        .e-control .e-icons {
            font-family: "e-icons";
        }



.e-toolbar {
    display: none;
}

.e-grid.no-border {
    border: none;
}

.grecaptcha-badge {
    visibility: hidden !important;
    display: none !important;
}

.bx-user {
    border: solid 1px;
    border-radius: 50%;
    padding: 5px;
}

    .bx-user:before {
        font-size: 18px;
    }

.dropdown-item {
    padding: .35rem 1rem;
}

    .dropdown-item .bx-user {
        border: none;
        border-radius: 0;
        padding: 0;
    }

.bx-home-circle:before {
    font-size: 21px;
}

.accordion {
    position: relative;
}

.action .e-icons.e-eye:before, .action i.bx-trash, .action .bx-cloud-upload {
    font-size: 1rem;
    margin-right: 2px;
    cursor: pointer;
    color: gray;
    position: relative;
    top: -2px;
}

.action i.bx-trash {
    color: red;
}

.action .bx-cloud-upload {
    color: #2a3042;
    font-size: 1.1rem;
}

.action i.bx.bx-check, .action .bx-x, .action .e-eye {
    margin-right: 5px;
}

button.fas.fa-archive, button.fas.fa-undo {
    padding: 10px;
}

.fa-trash-can, .fas.fa-archive, button.fas.fa-undo {
    font-family: 'Font Awesome 6 Free' !important;
    cursor: pointer;
}

button.fa-regular.fa-trash-can {
    padding: 10px 17px;
}

span.d-block.d-sm-none,
span.d-none.d-sm-block {
    min-width: 10px;
    min-height: 18px;
}

.fa-trash-can::before {
    position: relative;
    left: -5px;
}

.uc-f-10 {
    text-transform: uppercase;
    font-size: 10px;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #495057;
    background-color: #f6f6f6;
    border-color: #f6f6f6 #f6f6f6 #f6f6f6;
}

input#Input_RememberMe {
    position: relative;
    margin-right: 6px;
    top: 3px;
}

.img-toolbar {
    background-color: #f8f8f8;
    border: 1px solid #ccc;
    border-radius: 4px 4px 0 0;
    border-width: 1px 1px 0 1px;
    opacity: 0.8;
    padding: 0 10px 10px;
    margin-bottom: 5px;
}

    .img-toolbar .bx {
        border: solid 1px #f8f8f8;
        font-size: 1.3rem;
        color: #000;
        margin-right: 10px;
        padding: 7px;
        position: relative;
        top: 9px;
    }

        .img-toolbar .bx:hover {
            background-color: #ddd;
            border: solid 1px #ccc;
        }

.image-container {
    background-color: #ccc;
    border: solid 1px #ccc;
    width: 100%;
    height: 500px;
    overflow: auto;
}

.zoomable-image {
    transition: transform 0.25s ease;
    display: block;
    width: 100%;
    height: auto;
}

hr {
    width: 100%;
    margin: 10px 0 20px;
}

.client-icon, .contact-icon, .documents-icon, .checks-icon, .ubo-icon {
    float: left;
    margin-right: 15px;
}

body[data-sidebar=dark] #sidebar-menu ul li a i {
    color: #6a7187;
    margin-right: 5px;
}

#sidebar-menu ul li a:hover {
    color: #383c40;
    background-color: rgb(58 176 158 / 10%);
}

    #sidebar-menu ul li a:hover i {
        color: #383c40;
        background-color: rgb(58 176 158 / 10%);
    }

.bg-soft-primary {
    background-color: rgba(58, 176, 158, .25) !important;
}

.client-icon, .contact-icon, .documents-icon, .checks-icon, .ubo-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 25px; /* Adjust the size as needed */
    height: 25px; /* Adjust the size as needed */
    border-radius: 50%;
    border: 3px solid; /* Set the border thickness here */
    border-color: lightgray #317ab9 #317ab9 lightgray; /* Top, Right, Bottom, Left */
    background: white; /* Background color of the circle */
    margin-left: -5px;
    margin-bottom: 10px;
}

.fa-industry {
    color: black;
}

label.label {
    float: left;
    min-width: 70px;
}

label.date {
    position: absolute;
    left: 40px;
    font-weight: 300;
    top: 15px;
    font-style: italic;
    font-size: 85%;
}

.client-icon .fa-industry::before, .contact-icon .bx-phone::before, .documents-icon, .bx bx-file::before, .ubo-icon .bx-sitemap::before, .checks-icon .fa-check-circle::before {
    font-size: 13px;
}

.icon-ubo {
    position: relative;
    top: 2px;
    margin-right: 10px;
}

.block-title {
    float: left;
    margin-right: 5px;
}

    .block-title h3 {
        font-size: 1.1rem;
        font-weight: bold;
        margin-bottom: 0;
        position: relative;
        top: 3px;
    }

    .block-title p {
        margin-bottom: 0;
        color: #000;
    }


.bg-clr-1 {
    padding: 15px 0;
    background-color: #E6E6FA;
    margin-bottom: 10px;
}

.bg-clr-2 {
    padding: 15px 0;
    background-color: #A8D5BA;
    margin-bottom: 10px;
}

.bg-clr-3 {
    padding: 15px 0;
    background-color: #FFFDD0;
    margin-bottom: 10px;
}

#Grid .bx-image-alt:before, #Grid .bxs-file-pdf:before {
    font-size: 25px;
}

.page-content {
    padding: calc(70px + 24px) calc(24px / 2) 20px calc(24px / 2);
}

@media screen and (max-height: 739px) {
    #breadcrumb{
        display:none;
    }    
}




.center-vertically {
    display: flex;
    align-items: center; /* Vertical alignment */
    justify-content: center; /* Horizontal alignment */
}

.btn-add {
    background-color: #FFCC00;
    border: 1px solid #ccc;
    border-radius: 4px !important;
    padding: 0.5em 1.3em;
    font-size: 1.0em !important;
    border: 0 solid #ccc;
    color: #333;
}

    .btn-add:hover {
        background-color: #D4A100 !important;
        color: #000;
    }

/*.btn-primary, a.btn-primary {
    color: #fff;
    background-color: #3AB09E !important;
    border-color: #3AB09E !important;
}

    .btn-primary:hover a.btn-primary:hover {
        color: #fff;
        background-color: #2c7a6b !important;
        border-color: #2c7a6b !important;
    }

    .btn-primary:focus,
    .btn-primary.focus,
    a.btn-primary:focus,
    a.btn-primary.focus {
        box-shadow: 0 0 0 0.2rem rgba(58, 176, 158, 0.5);
    }

    .btn-primary.focus, .btn-primary:focus, .btn-primary.active, .btn-primary:active, a.btn-primary.focus, a.btn-primary:focus, a.btn-primary.active, a.btn-primary:active {
        color: #fff;
        background-color: #2c7a6b !important;
        border-color: #2c7a6b !important;
        -webkit-box-shadow: 0 0 0 .15rem rgba(58,176,158,.5);
        box-shadow: 0 0 0 .15rem rgba(58,176,158,.5)
    }

    .btn-primary.disabled, .btn-primary:disabled, a.btn-primary.disabled, a.btn-primary:disabled {
        color: #fff;
        background-color: #2c7a6b !important;
        border-color: #2c7a6b !important;
    }

    .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle, a.btn-primary:not(:disabled):not(.disabled).active, a.btn-primary:not(:disabled):not(.disabled):active, .show > a.btn-primary.dropdown-toggle {
        color: #fff;
        background-color: #2c7a6b !important;
        border-color: #2c7a6b !important;
    }*/

.btn.btn-block {
    background-color: transparent;
    border-color: transparent;
    text-align: left;
}

    .btn.btn-block:hover, .btn.btn-block a:hover, .btn.btn-block a:focus {
        color: #FFF;
        background-color: #253256;
        border-color: #253256;
    }

    .btn.btn-block.active {
        color: #fff !important;
        background-color: #253256 !important;
        border-color: #253256 !important;
    }

.btn-block:hover a {
    color: #FFF;
}

.btn.btn-block:hover, .btn.btn-block.active a {
    color: #FFF;
}

.btn-primary.btn-save {
    background-color: #286f64 !important;
    border-color: #286f64 !important;
}

.form-control:disabled, .form-control[readonly] {
    background-color: #f6f6f6;
    opacity: 1;
}

.bx-mail-send:before {
    content: "\eab7";
    font-size: 21px;
    top: 3px;
    position: relative;
    color: #317ab9;
}

.bx-check:before {
    font-size: 1.3rem;
    color: green;
}

.bx-x:before {
    font-size: 1.3rem;
    color: red;
}

.navbar-brand-box {
    text-align: left;
    padding-left: 1.5rem;
}

.vertical-menu {
    padding-top: 25px;
}

.block-title {
    color: #317ab9;
}

span.snapshots {
    float: right;
    position: absolute;
    top: 0px;
    right: 11px;
}

.tab-content.text-muted {
    border: solid 1px;
    border-color: #ced4da #ced4da #fff;
}

.e-gridcontent .created-initials {
    width: 35px; /* Set the width of the circle */
    height: 35px; /* Set the height of the circle */
    background-color: #f3f3f3; /* Choose the background color of the circle */
    border-radius: 50%; /* Make the div circular */
    display: flex; /* Use flexbox to center the content */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    font-size: 16px; /* Optional: Adjust the font size of the initials */
    font-weight: bold; /* Optional: Make the initials bold */
    color: #333; /* Set the color of the text/initials */
    border: 2px solid #333; /* Optional: Set a border for the circle */
    float: left;
    margin-right: 10px;
}

.e-gridcontent .fa-industry::before, .e-gridcontent .fa-person::before {
    font-size: 25px;
}

.cursor {
    cursor: pointer;
}

#loadingMsg.loading {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #ffffff url('/assets/images/loading.gif') 50% 50% no-repeat;
    background: rgba( 255, 255, 255, .8 ) url('/assets/images/loading.gif') 50% 50% no-repeat;
}

    #loadingMsg.loading p {
        position: relative;
        z-index: 1000;
        height: 100%;
        width: 100%;
        text-align: center;
        font-weight: bold;
        text-transform: uppercase;
        line-height: 20px;
        top: 50%;
    }
/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;
}

    /* Anytime the body has the loading class, our
   modal element will be visible */
    body.loading .loading {
        display: block !important;
    }

.form-control.check {
    max-width: 100px;
    font-size: 11px;
    color: #FFF;
    height: 25px;
    padding: 0 10px;
}

    .form-control.check option {
        margin: 10px;
    }

.col-12 {
    position: relative;
    overflow: visible; /* Ensure overflow is visible */
}

.custom-dropdown {
    position: relative;
    display: inline-block;
    width: 100px;
    cursor: pointer;
    user-select: none;
}

.dropdown-display {
    background-color: gray;
    padding: 5px 5px;
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #FFF;
}

    .dropdown-display.green {
        background-color: rgb(0, 214, 97, 0.65);
        color: #FFF;
    }

    .dropdown-display.red {
        background-color: rgba(221, 35, 93, 0.65);
        color: #FFF;
    }

    .dropdown-display.gray {
        background-color: #adadad;
        color: #FFF;
    }

    .dropdown-display::after {
        content: '';
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid #f6f6f6;
        pointer-events: none;
    }

.dropdown-options {
    position: absolute; /* Ensure the dropdown options are positioned absolutely */
    top: 100%;
    left: 0;
    width: 100px;
    background: white;
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #ccc;
    border-top: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
    z-index: 1050; /* High z-index to ensure it is on top of other content */
    display: none; /* Start hidden */
}

    .dropdown-options li {
        padding: 5px 10px;
        border-bottom: 1px solid #eee;
    }

        .dropdown-options li:hover {
            background-color: #f0f0f0;
        }

.card {
    overflow: visible !important;
}

    .card.document-card {
        border: solid 1px #3ab09e;
        border-radius: 3px;
    }

/*Switch*/
.switch {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 20px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .switch span.yes {
        position: absolute;
        float: left;
        left: 8px;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    display: flex;
    align-items: center;
    justify-content: space-around; /* Centers Yes and No */
    text-transform: uppercase; /* Optional: Makes text uppercase */
    font-size: 11px; /* Adjusts font size */
}

    .slider:before {
        position: absolute;
        content: "";
        height: 15px;
        width: 15px;
        left: 2px;
        bottom: 3px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #08615f;
}

input:focus + .slider {
    box-shadow: 0 0 1px #08615f;
}

input:checked + .slider:before {
    -webkit-transform: translateX(80px); /* Adjust for the larger size */
    -ms-transform: translateX(80px);
    transform: translateX(80px);
}

.switch3 {
    position: relative;
    width: 100px; /* Total width */
    height: 20px;
    background-color: #ccc; /* Default color */
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s; /* Smooth transition for background color */
}

.switch-handle {
    position: absolute;
    top: 2px;
    width: 15px; /* Width of the handle */
    height: 15px;
    background-color: #fff;
    border-radius: 8px;
    transition: all 0.3s;
}

.switch3[data-state="no"] {
    background-color: #08615f;
}

.switch3[data-state="yes"] {
    background-color: #c42f17;
}

/* Position for "No" */
.switch3[data-state="no"] .switch-handle {
    left: 21px;
}

/* Position for middle (no selection) */
.switch3[data-state=""] .switch-handle {
    left: 41px; /* Adjust to center the handle */
}

/* Position for "Yes" */
.switch3[data-state="yes"] .switch-handle {
    right: 21px;
}

.state-text {
    display: none;
    position: absolute;
    top: -25px;
    font-size: 14px;
}

.no-text {
    right: -28px;
    position: relative;
    top: 1px;
    color: #FFF;
    text-transform: uppercase;
    font-size: 11px;
}

.yes-text {
    position: relative;
    top: 1px;
    left: 9px;
    color: #FFF;
    text-transform: uppercase;
    font-size: 11px;
}

.switch3[data-state="no"] .no-text,
.switch3[data-state="yes"] .yes-text {
    display: block;
}

.table-title {
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 15px;
}

/* Rounded sliders */
.slider.round {
    border-radius: 17px;
}

    .slider.round:before {
        border-radius: 50%;
    }

/* Yes/No text styles */
.slider .yes, .slider .no {
    color: white;
    pointer-events: none; /* Prevents interaction with the text */
}

input:checked + .slider .no,
input:not(:checked) + .slider .yes {
    display: none; /* Hides the opposite text when toggled */
}

.disabled-switch {
    pointer-events: none; /* Prevents clicking and other pointer interactions */
    opacity: 0.5; /* Faded look to indicate disabled state */
}

/*End switch*/
.btn.customer-status {
    display: inline-block;
    padding: 5px 13px 5px 25px;
    background-color: #dbe0e9;
    color: #5b7fb3;
    border: none;
    border-radius: 12px;
    position: relative;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    overflow: hidden;
}

a.btn-primary.btn-preview,
.btn-preview {
    border-radius: 12px !important;
    padding: 0.8em;
    font-size: 1.0em !important;
    background-color: #f8f8f8 !important;
    border-color: #ccc !important;
    color: #8c8c8c;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

    a.btn-primary.btn-preview:hover,
    .btn-preview:hover,
    a.btn-primary.btn-preview:active,
    .btn-preview:active, a.btn-primary.btn-preview:focus,
    .btn-preview:focus {
        background-color: #e0e0e0 !important;
        border-color: #b3b3b3 !important;
        color: #666;
    }

.ubo.card-body .preview-button {
    top: -16px;
}

.np.card-body .preview-button {
    top: -5px;
    right: 0;
}

.card-header span.e-input-group.e-search {
    width: 200px;
    margin-right: 10px;
}

.service.preview-button {
    top: -5px;
    right: 0px;
}

#services .e-toolbar {
    display: none;
}

.breadcrumb, .breadcrumb a {
    color: #999;
    font-size: .8125rem;
}

.breadcrumb-item.active {
    color: #3ab09e;
}

.card-header {
    height: 60px;
}

.card-header-icon {
    float: left;
    margin-right: 10px;
    width: 45px;
}

    .card-header-icon .bx.bx-chat, .card-header-icon .icon-company, .card-header-icon .icon-user, .card-header-icon .icon-id-card, .card-header-icon .icon-ubo, .card-header-icon .icon-services, .card-header-icon .icon-lawyer, .card-header-icon .fas.fa-users, .card-header-icon .bx.bx-cog, .card-header-icon .icon-profile, .card-header-icon .icon-password, .card-header-icon .icon-2fa, .card-header-icon .icon-clients, .card-header-icon .bx.bx-envelope, .card-header-icon .bx.bx-file, .card-header-icon .bx.bx-detail, .card-header-icon .bx.bx-search-alt {
        font-size: 35px;
    }

    .card-header-icon .fas.fa-archive {
        font-size: 30px;
    }

    .card-header-icon .icon-company, .card-header-icon .icon-user, .card-header-icon .icon-id-card, .card-header-icon .icon-ubo {
        color: #43ac8d;
    }

    .card-header-icon .bx.bx-chat {
        color: #3ab09e;
        font-weight: 300;
    }

    .card-header-icon .icon-services, .card-header-icon .fas.fa-users, .card-header-icon .bx.bx-cog, .card-header-icon .icon-profile, .card-header-icon .icon-password, .card-header-icon .icon-2fa, .card-header-icon .bx.bx-envelope, .card-header-icon .bx.bx-file, .card-header-icon .bx.bx-detail, .card-header-icon .bx.bx-search-alt {
        color: #3ab09e;
        font-weight: 600;
    }

    .card-header-icon .icon-clients, .card-header-icon .icon-lawyer, .card-header-icon .fas.fa-archive {
        color: #3ab09e;
        font-weight: 600;
    }

.card-header.chat, #attorneys.card-header, #team.card-header, #account.card-header, #emails.card-header, #documents.card-header, #notes.card-header {
    background-color: rgb(235 247 245) !important;
}

    .card-header.chat .label-title .label, #attorneys.card-header .label-title .label, #team.card-header .label-title .label, #account.card-header .label-title .label, #emails.card-header .label-title .label, #documents.card-header .label-title .label, #notes.card-header .label-title .label {
        color: #3ab09e;
    }

    #services .card-header i.fas.fa-chevron-up.float-right, #services .card-header i.fas.fa-chevron-down.float-right, #emails .card-header .bx.bx-envelope, #documents .card-header .bx.bx-file, #notes .card-header .bx.bx-detail {
        color: #FFF;
    }

#services .card-header {
    background-color: #3ab09e85;
}

.card-header.shareholder {
    background-color: rgba(230, 230, 250, 0.5); /* #E6E6FA at 50% opacity */
}

.card-header.contactperson {
    background-color: rgba(174, 214, 241, 0.5); /* #AED6F1 at 50% opacity */
}

.card-header.client {
    background-color: rgba(161, 232, 175, 0.5) !important; /* #A1E8AF at 50% opacity */
}

.service-status {
    text-transform: uppercase;
    position: relative;
    color: green;
    font-weight: bold;
    top: 10px;
    text-align: right;
    margin-bottom: 0;
}

/* Basic Styling */
.trail .date-column,
.trail .time-column,
.trail .description-column {
    padding: 8px;
}

#trail .trail-day {
    text-transform: uppercase;
    font-weight: bold;
}

#trail .trail-time {
    font-weight: 500;
}

#trail .trail-by-desc {
    padding: 15px;
    background-color: #f8f8fb;
    width: 70%;
    border-left: 3px solid #000;
    max-width: 700px;
}

#trail .event-by {
    margin-bottom: 10px;
}

#trail span.kind-event {
    margin-right: 5px;
}

#trail span.username {
    font-weight: bold;
}

#trail.note {
    max-width: 800px;
}

#notes .row {
    margin: 0;
}

.btn-cancel {
    float: left;
    margin-left: 10px;
    border-left: solid 1px #253256;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #286f64 !important;
}

ul[id^="emailDetails"] {
    padding-left: 5px;
}

    ul[id^="emailDetails"] li {
        list-style: none !important;
        float: left;
        width: 100%;
    }

        ul[id^="emailDetails"] li div {
            margin-right: 15px;
            list-style: none !important;
        }

        ul[id^="emailDetails"] li .kind {
            float: left;
            margin-right: 5px;
            width: auto;
            font-weight: bold;
        }

        ul[id^="emailDetails"] li .status {
            width: 60px;
        }

        ul[id^="emailDetails"] li .date {
            width: 200px;
        }

        ul[id^="emailDetails"] li .email {
            margin-bottom: 10px;
            margin-right: 5px;
        }

        ul[id^="emailDetails"] li hr {
            margin-bottom: 5px;
        }

        ul[id^="emailDetails"] li .attachments li {
            list-style: disc !important;
        }

#refreshGrid {
    text-align: right;
    margin-bottom: 5px;
}

.e-richtexteditor .e-rte-content .e-content {
    min-height: 300px;
}

.e-richtexteditor .e-linkheader {
    display: none;
}

.imgUrl.null {
    display: none;
}

div#_image {
    min-height: 420px !important;
}

div#newNote {
    padding-bottom: 50px;
    border-bottom: 1px solid #ccc;
}

#uploadError {
    font-weight: 500;
    color: red;
}

/* Email form */

#emailForm tags.tagify.form-control, #emailForm input, #attachments-container .tagify {
    height: auto;
    width: calc(100% - 80px);
    border-color: #ced4da;
}

#emailForm label {
    float: left;
    width: 80px;
    position: relative;
    top: 3px;
}

.date-signed {
    color: #3ab09e;
    margin-top: 15px;
}
/* Responsive Design */
@media (min-width: 768px) {
    /* For tablets and larger devices */
    .trail .date-column {
        flex: 0 0 120px;
        max-width: 120px; /* Fixed width for date */
        position: relative;
    }

    .trail .time-column {
        flex: 0 0 75px;
        max-width: 75px; /* Fixed width for time */
    }

    .trail .trail-day {
        width: 100%;
    }

    .trail .description-column {
        flex: 0 0 calc(100% - 195px);
        max-width: calc(100% - 195px);
    }

    .col-10 .row {
        margin-bottom: 15px;
    }    
}

@media (max-width: 767px) {
    /* For phones and smaller devices */
    .trail .date-column,
    .trail .time-column,
    .trail .description-column {
        flex: 0 0 100%;
        max-width: 100%;
        border-right: none;
    }

    .trail-day {
        float: left;
        margin-right: 5px;
    }

    #trail span.kind-event, #noteTrail span.kind-event {
        float: left;
        width: 100%;
    }

    #clientInformation.card-body, .tab-content .card-body, .page-content, .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    #clientInformation.card-body {
        padding-top: 0 !important;
    }

    #services.card-body {
        padding: 0;
    }

    .header-status.show-sm {
        position: relative;
        text-align: center;
        float: none;
        right: 0;
    }

        .header-status.show-sm .badge-pill {
            border-radius: 0 !important;
        }

    ol.breadcrumb {
        padding-left: 15px !important;
    }

    label.label {
        margin-top: 0.5em;
        margin-bottom: 0;
    }

    .col-docs .bar {
        min-height: 0 !important;
    }

    /*.card-body {
        padding: 0;
    }  */  
}

/*Design LEGID*/
.bar {
    border: solid 1px #ddd;
    padding: 10px;
    margin-bottom: 10px;
    min-height: 56px;
}

.badge-pill {
    border-radius: 12px !important;
    padding: 0.8em;
    font-size: 1.0em !important;
}

    .badge-pill.pending {
        background-color: #fd9f4030;
        color: #fd9f40;
    }

.noti-icon .badge {
    top: 12px;
    right: 4px;
    padding-left: .6em !important;
    padding-right: .6em !important;
    font-size: 75% !important;
    border-radius: 10rem !important;
    padding-top: .25em;
    padding-bottom: .25em;
}

.e-toolbar .e-toolbar-items, .e-grid .e-toolbar {
    background: #3AB09E;
}

.e-grid .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-search {
    opacity: 1;
}

.e-pager .e-currentitem, .e-pager .e-currentitem:hover {
    background: #3AB09E;
    color: #FFF !important;
}

.cell-content {
    display: flex;
    align-items: center;
}

.icon-block {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px; /* Adjust the width as needed */
    height: 50px; /* Adjust the height as needed */
    text-align: center;
    border-right: 1px solid #ccc; /* Optional: Add a border between blocks */
}

.text-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 10px; /* Adjust the padding as needed */
}

.grid-900 {
    max-width: 900px;
}

.grid-name {
    display: inline-block;
}

.e-grid .e-fltrtempdiv .grid-name {
    text-align: left;
}

.e-grid .e-filterbarcell.no-filter .e-input-group {
    display: none;
}

.e-dropdownbase .e-list-item .text-block, .e-dropdownbase .e-list-item .icon-block {
    text-indent: 0;
}

    .e-dropdownbase .e-list-item .icon-block .fa-solid {
        font-size: 26px;
    }

.nav-tabs-custom {
    margin-bottom: 1px;
    border-bottom: 0px solid #ddd;
    width: calc(100% - 220px);
}

    .nav-tabs-custom .nav-item {
        max-width: 140px;
        text-transform: uppercase;
    }

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    background-color: #FFF;
    color: #43ac8d;
    font-weight: 600;
}

.nav-tabs-custom .nav-item .nav-link::after {
    background: #43ac8d;
}

.header-status-message {
    background-color: rgb(255, 165, 0, 0.15);
    position: relative;
    height: auto;
    top: 0;
}

    .header-status-message p {
        padding: 10px 235px 10px 15px;
        margin-bottom: 0;
    }

.header-status {
    border-bottom: 0px solid #ddd;
    float: right;
    position: absolute;
    top: 0;
    right: 10px;
}

.header-status-message .header-status {
    top: 18px;
}

.card-body label {
    min-height: 30px;
}

.label-title label {
    font-weight: 500;
    font-size: 16px;
    color: #FFF;
}

#headingServices .label-title label {
    color: #3ab09e;
}

.bar-header {
    padding-left: 2px;
}

    .bar-header .icon-pep, .bar-header .icon-ubo, .bar-header .icon-verified, .bar-header .icon-compliance, .bar-header .bx.bx-file {
        position: relative;
        top: 2px;
        margin-right: 10px;
        font-size: 15px;
        float: left;
    }

    .bar-header .icon-pep {
        font-size: 23px !important;
        left: -4px;
        margin-right: 3px !important;
    }

.bar-title {
    float: left;
    position: relative;
    top: 0px;
    font-weight: 300;
}

.label-info {
    float: left;
    min-width: 20%;
    margin-right: 10px;
    max-width: 260px;
}

    .label-info .label {
        float: left;
        width: 100%;
        margin-bottom: 0;
        min-height: 20px;
    }

.info-value {
    font-weight: 300;
}

.card-header i.fas.fa-chevron-up.float-right, .card-header i.fas.fa-chevron-down.float-right {
    position: relative;
    right: 85px;
}

.card-header-preview {
    position: absolute;
    text-align: right;
    right: 10px;
    cursor: pointer;
    top: 10px;
}

.info.row {
    margin-top: 11px;
}

.document.row .col-7 {
    padding-right: 0;
}

.document.row .bx.bx-file {
    font-size: 1rem;
    float: left;
    width: 30px;
}

.document.row .doc-desc {
    position: relative;
    top: 10px;
}

.document.row label {
    font-size: .8125rem;
    font-weight: 300;
    position: relative;
    top: -3px;
}

.action {
    text-align: right
}

.col-docs .bar {
    min-height: 189px;
}

select.option-yellow {
    background-color: rgb(255,165,0,0.15) !important;
    color: rgb(255,165,0) !important;
    font-weight: 500;
}

select.option-green {
    background-color: rgb(58,176,158,0.15) !important;
    color: rgb(24 113 99) !important;
    font-weight: 500;
}

select.option-red {
    background-color: rgb(221,35,93,0.15) !important;
    color: rgb(221,35,93) !important;
    font-weight: 500;
}

select.option-grey {
    background-color: #eff2f7;
    font-weight: 500;
}

/* Legid icons */
.mm-active > a {
    background-color: rgb(58 176 158 / 10%);
}

.mm-active .active i {
    color: #253256 !important;
    font-weight: 600;
}

.icon-check {
    font-size: 20px;
    margin-right: 10px;
    color: #00D661;
}

.icon-remove {
    font-size: 20px;
    margin-right: 10px;
    color: rgb(221,35,93,0.65);
}

.icon-view {
    font-size: 26px;
    margin-right: 10px;
    position: relative;
    top: 3px;
    color: rgb(255,165,0,0.65) !important;
    cursor: pointer;
}

    .icon-view.hidden {
        visibility: hidden;
    }

.e-control.icon-view {
    font-size: 27px !important;
    margin: 0;
    border: none;
    right: 10px;
}

.icon-upload {
    font-size: 23px;
    position: relative;
    margin-right: 10px;
    line-height: 40px;
    left: 3px;
    top: 3px;
    cursor: pointer;
}

.center-diagram {
    background-color: #f2f2f2;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.modal-dialog.ubo-modal-width {
    max-width: 60%;
}

.shapeContent {
    background-color: #3AB09E;
    border: 1px solid #adadad;
    border-top: none;
    border-radius: 10px;
    min-height: 100px;
    box-shadow: 5px 7px 10px rgba(33, 82, 125, 0.3);
}

    .shapeContent.empty {
        box-shadow: none;
    }

    .shapeContent.NaturalPerson::before {
        content: "\f183";
        font-family: 'Font Awesome 6 Free';
        font-size: 25px;
        color: #3AB09E;
        position: absolute;
        /* opacity: 0.5; */
        right: 9px;
        transform: translateX(-34%);
        z-index: 1;
        top: 7px;
    }

shapeContent.main.Company {
    min-height: 100px;
    text-transform: uppercase;
}

.shapeContent.Company::before {
    content: "\f275";
    font-family: 'Font Awesome 6 Free';
    font-size: 22px;
    color: #3AB09E;
    position: absolute;
    /* opacity: 0.5; */
    right: 6px;
    transform: translateX(-34%);
    z-index: 1;
    top: 7px;
}

.shapeContent.empty {
    background-color: #f2f2f2;
    border: none;
    min-height: 0;
    position: relative;
    top: 2px;
}

.shapeContent:hover {
    cursor: none;
}


.new-shareholder:hover {
    cursor: pointer !important;
}

.ubo-percentage {
    color: #000;
    font-weight: 500;
    height: 100px;
    position: relative;
    z-index: 1;
}

    .ubo-percentage span.perc-1 {
        color: #E7F06C;
        font-style: italic;
        position: absolute;
        left: 5px;
        top: 5px;
        font-size: 16px !important;
    }

    .ubo-percentage span.perc-2 {
        color: #E7F06C;
        font-size: 16px;
        position: absolute;
        top: 5px;
        text-align: right;
        right: 5px;
        width: 45px;
        height: 22px;
        padding-top: 2px;
        font-size: 16px !important;
        font-style: italic;
    }

.shapeContent.main.Company .ubo-item .ubo-percentage .perc-2 {
    display: none;
}

#diagram {
    background-color: #f2f2f2;
}

.ubo-item {
    height: 86px;
}

.ubo-name {
    color: #FFF;
    text-align: center;
    font-size: 18px;
    line-height: 16px;
    font-weight: 500;
    position: relative;
    z-index: 1;
    left: 0;
    top: -65px;
}

.swal2-html-container .icon-company {
    margin-left: 10px;
}

.swal2-html-container .icon-user {
    margin-left: 10px;
}

.ubo-name .name {
    margin-right: 10px;
}

.ubo-item:hover {
    cursor: default;
}

.ubo-name:hover {
    text-decoration: underline;
    cursor: pointer;
}

.shapeContent.main .ubo-name {
    font-size: 20px;
}

    .shapeContent.main .ubo-name:hover {
        text-decoration: none !important;
        cursor: inherit !important;
    }

.ubo-type {
    color: #6b59d3;
    text-align: center;
    font-size: 15px;
    position: relative;
    z-index: 1;
}

.ubo-documents {
    margin: 0 6px;
    margin-top: 3px;
    position: absolute;
    z-index: 1;
    padding: 0 4px;
    text-align: center;
    font-size: 11px;
    color: rgb(221, 35, 93, 1);
    left: 56px;
    top: 5px;
    width: auto;
}

.ubo-status {
    margin: 0;
    margin-top: 3px;
    position: relative;
    top: -63px;
    text-align: center;
    font-size: 11px;
    font-weight: 500;
    color: #FFF;
    height: 25px;
    text-align: center;
}


/*Grid layout */
/* Extra extra large devices (1825px and up) */
@media (min-width: 1825px) {
    .page-content {
        -ms-flex: 0 0 90%;
        flex: 0 0 90%;
        max-width: 90%;
    }

    .col-docs {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-checks {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .card-header {
        -ms-flex: 0 0 calc(100% - 0px);
        flex: 0 0 calc(100% - 0px);
        max-width: calc(100% - 0px);
    }

    .card-header-preview {
        -ms-flex: 0 0 10%;
        flex: 0 0 10%;
        max-width: 10%;
    }
}

/* Extra large devices (1440px - 1824px) */
@media (min-width: 1440px) and (max-width: 1824px) {
    .page-content {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .col-docs {
        -ms-flex: 0 0 33.33333%;
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
    }

    .col-checks {
        -ms-flex: 0 0 33.33333%;
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
    }

    .card-header {
        -ms-flex: 0 0 calc(100% - 0px);
        flex: 0 0 calc(100% - 0px);
        max-width: calc(100% - 0px);
    }

    .card-header-preview {
        -ms-flex: 0 0 10%;
        flex: 0 0 10%;
        max-width: 10%;
    }
}

/* Large devices (1040px - 1439px) */
@media (min-width: 1040px) and (max-width: 1439px) {
    .page-content {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .col-docs {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-checks {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .card-header {
        -ms-flex: 0 0 calc(100% - 0px);
        flex: 0 0 calc(100% - 0px);
        max-width: calc(100% - 0px);
    }

    .card-header-preview {
        -ms-flex: 0 0 10%;
        flex: 0 0 10%;
        max-width: 10%;
    }
}

@media (max-width:1439px) {
    .hide-4 {
        display: none;
    }

    .btn-preview {
        font-size: 0.65rem !important;
    }

    .label-info, .info-value {
        max-width: 175px;
    }

    .card-header i.fas.fa-chevron-up.float-right, .card-header i.fas.fa-chevron-down.float-right {
        display: none;
    }
}

/* Medium devices (720px - 1039px) */
@media (min-width: 720px) and (max-width: 1039px) {
    .hide-md {
        display: none;
    }

    .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }

    .page-content {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .col-docs {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-checks {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .card-header {
        -ms-flex: 0 0 calc(100% - 0px);
        flex: 0 0 calc(100% - 0px);
        max-width: calc(100% - 0px);
    }

    .card-header-preview {
        -ms-flex: 0 0 10%;
        flex: 0 0 10%;
        max-width: 10%;
    }
}

/* Small devices (540px - 719px) */
@media (min-width: 540px) and (max-width: 719px) {
    .hide-sm {
        display: none;
    }

    .page-content {
        -ms-flex: 0 0 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .col-docs {
        -ms-flex: 0 0 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .col-checks {
        -ms-flex: 0 0 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .card-header {
        -ms-flex: 0 0 calc(100% - 0px);
        flex: 0 0 calc(100% - 0px);
        max-width: calc(100% - 0px);
    }

    .card-header-preview {
        -ms-flex: 0 0 10%;
        flex: 0 0 10%;
        max-width: 10%;
    }
}

/* Extra small devices (less than 540px) */
@media (max-width: 539px) {
    .hide-sm {
        display: none !important;
    }

    .nav-tabs-custom {
        width: 100%;
    }

    .bar {
        margin-bottom: 0;
    }

    .page-title-box {
        display: none !important;
    }

    .page-content {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        padding-top: 70px !important;
    }

    .col-docs {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0 10px;
    }

    .col-checks {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0 10px;
    }

    .card-header {
        -ms-flex: 0 0 calc(100% - 0px);
        flex: 0 0 calc(100% - 0px);
        max-width: calc(100% - 0px);
        padding: 0.75rem;
    }
}

/* Notification container */
#notification-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Individual notification */
.notification {
    background-color: #ebf7f5;
    color: #000;
    padding: 15px 20px;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 300px;
    border: solid 1px #3ab09e;
}

    .notification button {
        background: none;
        border: none;
        color: #495057;
        font-size: 16px;
        cursor: pointer;
        position: absolute;
        top: 3px;
        right: 10px;
    }

/*
.e-btn.e-flat:hover, .e-css.e-btn.e-flat:hover, .e-btn.e-flat, .e-css.e-btn.e-flat {
    background: #fff;
    border-color: #fff;
}*/