:root {
    --primary: #820303;
    --light-primary: #FFE9E9;
    --light-gray: #F5F5F5;
}
.active-closings-file {
    border-left-style: solid;
    border-top-style: solid;
    border-right-style: solid;
    border-width: 1px;
    border-color: black;
    background-color: #FFE9E9;
    padding-left: 5px;
    border-radius: 5px 5px 0px 0px;
}
.nav-link.active {
    background-color: #820303 !important;
    color: white !important;
}
.hide-on-propertylaw {
    display: none;
}
.u-sidebar-navigation--dark .u-side-nav--top-level-menu-item:hover {
    background-color: #333333;
    border-left: 5px solid #820303;
}
.u-side-nav--second-level-menu-link:hover {
    border-left: 5px solid #820303;
}

.u-side-nav--third-level-menu-item:hover {
    border-left: 5px solid #820303;
}
.u-sidebar-navigation--dark.u-sidebar-navigation-v1--mini .u-side-nav--second-level-menu {
    background-color: #000000;
}

.btn-circle {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1.5;
    border-radius: 100%;
    cursor: pointer;
    transition: all .2s ease-out;
    border: 1px solid #590000;
    background-image: linear-gradient(#820303, #590000);
}

.btn-circle-xl {
    width: 220px;
    height: 220px;
    padding: 10px 16px;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1.33;
    font-weight: 600;
    cursor: pointer;
}
.btn-circle-xl a {
    color: inherit;
    text-decoration: none;
}
.btn-circle-xl:hover {
    transform: scale(1.05);
}

.btn-circular-gradient-one {
    border: 1px solid #590000;
    background-color: #590000;
    background-image: linear-gradient(#820303, #590000);
    color: #fff;
}
.btn-circular-gradient-two {
    border: 1px solid #931D21;
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(223,223,223,1) 100%);
    color: #931D21;
}
.btn-circular-gradient-one:hover, .btn-circular-gradient-two:hover {
    filter: brightness(110%);
}

.modalSearch {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    background-color: rgba(0, 0, 0, 0.7);
}

.modal-contentSearch {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border: 1px solid #000;
    background-image: linear-gradient(#FFFFFF 0, #AFAFAF 50%);
}

.mobile-section {
    display: none;
}

@media (max-width: 575px) {
    .mobile-section {
        display: block;
    }
}

@media (max-width: 1504px) {
    #rightNavBar {
        display: block;
        position: absolute;
        top: 20px;
        right: 5%;
    }
}

#sideNavMenu li:hover {
    background-color: black;
    color: white;
}

#logout:hover {
    background-color: #9C9BD0 !important;
}

.btn-primary {
    background-color: #820303 !important;
    border-color: #820303 !important;
}

.u-btn-primary {
    background-color: #820303 !important;
    border-color: #820303 !important;
}

.skyBlue-gradient-button {
    background-color: white !important;
    color: #820303 !important;
}

.loginBtn {
    background-image: linear-gradient(#AFAFAF, #4E4E4E) !important;
    border: none !important;
}

.bg-blue {
    background-color: black;
    color: #FFFFFF;
}
.bg-black {
    background-color: black;
    color: #FFFFFF;
}
.bg-color-white {
    background-color: white;
}

.bg-color-btn-edit {
    background-color: #820303;
    border-radius: 50%;
    color: white;
}

.btn-dark-color,
.btn-bg-gradient,
.bg-color-tl,
.bg-gradient-dark {
    background-color: #820303 !important;
    color: white;
    border-color: #820303 !important;
}

.btn-light-gradient-color, .bg-gradient-light {
    background-color: #820303 !important;
    color: white;
}

.bg-gradient, .bg-color {
    background-color: black !important;
}

.bg-color-white-border {
    background-color: white;
    color: #820303;
    border: solid 1px #820303;
}

.bg-color-white-border1 {
    background-color: white;
    color: #820303;
    border: solid 1px #820303;
}

.text-color-solid {
    color: #8802FF;
}

.btn-solid-light-color {
    background-color: #590000;
    color: white;
    border: 1px solid purple;
}

.btn-light-gradient {
    background-color: #590000;
    color: white;
}

.tableStyle thead th {
    background-color: #820303;
}

.bg-color-btn-2, .btn-bg-gradient1 {
    background-color: #820303;
}

.text-light-color-solid {
    color: #820303 !important;
}

.text-dark-color-solid, .text-primary-color {
    color: #820303;
}

.bg-primary-color {
    background-color: #820303;
}

.bg-solid-color {
    background-color: #820303 !important;
}

.bg-color-border {
    background-color: #820303;
    border-bottom: 1px solid #820303;
}

.custom-border-bottom {
    border-bottom: 1px solid #820303;
}


.bg-border-primary {
    background-color: #FFE9E9;
    border: 1px solid #820303;
}

.activeClassSigner {
    background-color: #820303 !important;
    border: 0;
    color: white;
}

.uploadImage {
    width: 100%;
    height: 100%;
    border: dashed 1px #000;
    background-color: #820303;
    border-radius: 5px 5px 5px 5px;
}

.solid-bgcolor-light {
    background-color: #820303 !important;
}

.custom-text-color {
    color: #820303;
}

.switchButtonDiv, .bg-color-btn-7 {
    background-color: #820303 !important;
}

.list-group-item {
    background-color: #820303 !important;
    color: white;
}

.solid-bgcolor-dark {
    background-color: #820303 !important;
}

.solid-btncolor-dark {
    background-color: #820303;
}

#NewClientsTable tbody tr {
    color: black;
    background-color: #FFE9E9 !important;
}

.LawyerAndClerk,
.btn-gradien-white {
    border-color: #820303 !important;
}

.table-primary,
.table-primary > th,
.table-primary > td {
    background-color: #FFE9E9 !important;
}

.table-primary th,
.table-primary td,
.table-primary thead th,
.table-primary tbody + tbody {
    border-color: #820303 !important;
}

.textFileClient {
    color: #820303 !important;
}

.otherPartiesStyle .nav-link {
    color: black;
    background-color: white;
    border-radius: 5px;
    border: 1px solid blue;
    transition: background-color 0.3s, color 0.3s;
    margin-right: 5px;
}

    .otherPartiesStyle .nav-link.active {
        background-color: #E0E7FF !important;
        color: black !important;
    }

#sidebar {
    background-color: black !important;
}

    #sidebar:not(.expand) .sidebar-item .sidebar-dropdown {
        background-color: black !important;
    }

#sidebar .sidebar-item:hover {
    background-color: black !important;
    color: #FFF;
}

#sidebar .sidebar-item.active {
    background-color: black !important;
    color: #FFF; 
}

.red-button {
    background-color: red !important;
    color: #FFFFFF !important;
}

/*File Stages - Reminders section*/
.outstanding-reminders {
    background-color: red;
    color: black;
    height: 25px;
    width: 25px;
    border: 1px solid black;
    border-radius: 50%;
    color: black;
    display: inline-block;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0px auto;
    padding: 3%;
    margin-top: 4px;
    font-size: 0.8rem;
}

.total-reminders {
    background-color: #B59A91;
    color: black;
    height: 25px;
    width: 25px;
    border: 1px solid black;
    color: black;
    display: inline-block;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0px auto;
    padding: 3%;
    margin-top: 4px;
    font-size: 0.8rem;
}

.reminder-details-overdue {
    border: 1px solid darkred !important;
    background-color: #FFEDED !important;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.reminder-details {
    border: 1px solid black;
    background-color: #FFECBA;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.reminder-details-icon {
    font-size: 2rem;
    color: var(--primary);
}

.FileInfoBar {
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    outline: black solid 1px;
    width: 100%;
    padding-left: 5px;
    border: 1px solid black;
    border-radius: 5px 5px 5px 5px;
    font-weight: bold;
}

.FileNameLabel {
    margin-bottom: 2px;
    margin-top: 2px;
    color: #075096;
}

.bg-gradient-tab {
    background-image: linear-gradient(#FFFFFF, #FDE5E5) !important;
}

.icon-add {
    color: #820303 !important;
}