.error {
    color: #c74040 !important; /* Original red, keeping as it's an error color */
    font-weight: normal !important;
}

* {
    font-family: "Poppins", sans-serif;
}

body {
    font-family: Gilroy;
    color: #212529;
}

.brand-logo {
    width: 100px;
    height: auto;
}

.brand-img {
    width: 450px;
    height: auto;
}

@media screen and (max-width: 600px) {
    .brand-logo {
        width: 27px;
        height: 40px;
    }
}

.shortcut-icon {
    border-radius: 50%;
}

.btn-primary {
    background-color: #355d98 !important; /* Kept original blue */
    border-color: #355d98;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-primary:hover,
.btn-primary:checked,
.btn-primaty.active,
.btn-primaty:active,
.btn-primaty:focus,
.btn-primaty:focus-visible {
    background: #355d98; /* Kept original blue */
    border-color: #355d98;
}

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

.btn-danger {
    background-color: #355d98; /* Kept original red, as danger implies red */
    border-color: #355d98;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-danger:hover,
.btn-danger.active,
.btn-danger:active,
.btn-danger:focus,
.btn-danger:focus-visible {
    background-color: #355d98; /* Kept original darker red */
    border-color: #355d98;
}

.btn-info {
    color: #5d32bd; /* Changed from red to purple */
    background-color: #fff;
    border-color: #5d32bd; /* Changed from red to purple */
    box-shadow: none;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-info:hover,
.btn-info.active,
.btn-info:active,
.btn-info:focus,
.btn-info:focus-visible {
    background-color: #5d32bd !important; /* Changed from red to purple */
    border-color: #FFF !important;
    color: #FFF !important;
}

.btn-info.disabled,
.btn-info:disabled {
    color: #FFF;
    background-color: #5d32bd; /* Changed from red to purple */
    border-color: #5d32bd; /* Changed from red to purple */
}

.btn-new {
    color: #fff;
    background-color: #5d32bd; /* Changed from red to purple */
    border-color: #5d32bd; /* Changed from red to purple */
    box-shadow: none;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-new:hover,
.btn-new.active,
.btn-new:active,
.btn-new:focus,
.btn-new:focus-visible {
    background-color: #FFF !important;
    border-color: #5d32bd !important; /* Changed from red to purple */
    color: #5d32bd !important; /* Changed from red to purple */
}

.btn-outline-secondary {
    color: #5d32bd; /* Changed from red to purple */
    border-color: #5d32bd; /* Changed from red to purple */
}

.btn-outline-secondary:hover,
.btn-outline-secondary.active,
.btn-outline-secondary:active,
.btn-outline-secondary:focus,
.btn-outline-secondary:focus-visible {
    color: #FFF;
    border-color: transparent;
    background-color: #5d32bd !important; /* Changed from red to purple */
}

/* ========================================= Sidebar Starts ============================================ */

.main-sidebar {
    background: linear-gradient(180deg, #5d32bd 10%, #060101 90%); /* Changed from red to purple */
    position: fixed !important;
}

.sidebar {
    height: 100vh;
    overflow-y: scroll;
}

[class*=sidebar-dark-] .sidebar a,
[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link {
    color: #FFF;
}

.nav-sidebar>.nav-item {
    text-transform: uppercase;
}

.nav-sidebar>.nav-item>.nav-link {
    font-weight: 500;
}

.nav-sidebar>.nav-item>.nav-link.active {
    background-color: #FFF !important;
    color: #5d32bd !important; /* Changed from red to purple */
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(255, 255, 255, 0.12), 0 1px 2px rgb(255 255 255 / 24%) !important;
}

.user-panel {
    border-color: #fff !important;
}

[class*=sidebar-dark-] .nav-sidebar>.nav-item.menu-open>.nav-link,
[class*=sidebar-dark-] .nav-sidebar>.nav-item:hover>.nav-link,
[class*=sidebar-dark-] .nav-sidebar>.nav-item>.nav-link:focus {
    background-color: rgb(0 0 0 / 50%) !important;
}

[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active,
[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active:focus,
[class*=sidebar-dark-] .nav-treeview>.nav-item>.nav-link.active:hover {
    background-color: rgb(255 255 255 / 21%) !important;
    color: #fff !important;
}

.nav-sidebar>.nav-item>.nav-link.active:hover {
    color: #FFF !important;
}

/* ========================================= Top header Starts ============================================ */

.navbar-light .navbar-nav .nav-link {
    color: rgb(0 0 0);
}

.main-header {
    padding-left: 30px;
}

/* ========================================= Content-Wrapper Starts ============================================ */

.content-wrapper {
    /* background-color: rgb(201 201 201 / 10%); */
}

.content-header {
    padding: 15px 20px !important;
}

.content-wrapper .content {
    padding: 0px 30px 40px;
}

.content-header h1 {
    font-size: 28px;
    text-transform: uppercase;
    font-weight: 600;
}

a {
    color: rgb(38 38 38 / 100%);
}

a:hover {
    color: #7b7b7b;
}

.card {
    border: 1px solid #dbdbdb;
    border-radius: 8px;
    box-shadow: 0 0.15rem 1.75rem #21283226 !important;
}

.card-header {
    background-color: #5d32bd; /* Changed from red to purple */
    color: #FFF;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.card-footer {
    background-color: #5d32bd; /* Changed from red to purple */
    color: #FFF;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.content-wrapper .content .container-fluid .row .col-12 .card {
    margin-bottom: 0px;
}

.card-title {
    font-weight: 600;
}

.card-footer {
    background-color: transparent !important;
    padding: 16px 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.form-control {
    border-color: #5d32bd3b !important; /* Changed from red to purple */
    background-color: #FFF !important;
}

.form-control[readonly] {
    border-color: #5d32bd3b !important; /* Changed from red to purple */
    background-color: #5d32bd0d !important; /* Changed from red to purple */
}

.form-control:focus {
    border-color: #5d32bd; /* Changed from red to purple */
    background-color: #5d32bd0f !important; /* Changed from red to purple */
}

select option:checked {
    background-color: #5d32bd; /* Changed from red to purple */
    color: white;
    border: 1px solid white;
}

select option {
    background-color: #5d32bd0f; /* Changed from red to purple */
}

select option:hover {
    background-color: #5d32bd; /* Changed from red to purple */
    color: white;
}

.form-control-sm:focus {
    border-color: #5d32bd; /* Changed from red to purple */
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #5d32bd; /* Changed from red to purple */
    border-color: #5d32bd; /* Changed from red to purple */
}

.page-link {
    color: #212529;
}

.page-link:hover {
    color: #212529;
}

.page-link:focus {
    box-shadow: none !important;
}

.table-bordered thead td,
.table-bordered thead th {
    border-bottom-width: 1px !important;
}

.table td {
    padding: 4px 0.75rem;
}

.table td,
.table th {
    vertical-align: middle !important;
}

.modal-content {
    border: none !important;
    border-radius: 8px !important;
}

input[type=checkbox] {
    width: 20px;
    height: 20px;
    border-radius: 5px !important;
    border: 1px solid rgb(0, 0, 0) !important;
    opacity: 0.4;
    accent-color: #EAEAEA;
    margin-right: 10px;
    position: relative;
}

input[type=checkbox]::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid rgb(0, 0, 0) !important;
    opacity: 0.4;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    border-radius: 5px !important;
}

.checkbox label {
    display: flex;
    align-items: center;
}

.dropdown-menu {
    border: none;
}

[class*=sidebar-dark] .list-group-item {
    background-color: #000;
    border-color: #000;
}

div.dt-button-collection {
    padding: 0.5rem 10px;
}

div.dt-button-collection .dt-button {
    min-width: 100%;
}

div.dt-button-collection div.dropdown-menu .dropdown-item.active,
div.dt-button-collection div.dropdown-menu .dropdown-item:active {
    background-color: #00000000;
    color: #000;
}

div.dt-button-collection div.dropdown-menu .dropdown-item.active:hover,
div.dt-button-collection div.dropdown-menu .dropdown-item:active:hover {
    background-color: #000;
    color: #FFF;
}

#table_listing .btn-info {
    margin: 2px 5px 0px 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: none;
    font-weight: 500;
}

#table_listing .btn-danger {
    box-shadow: none;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 2px 5px 0px 0px;
}

#table_listing .btn-success {
    color: #fff;
    background-color: #29CC97;
    border-color: #29CC97;
    box-shadow: none;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 2px 5px 0px 0px;
}

#table_listing .btn-danger:hover,
#table_listing .btn-success:hover {
    background-color: #F18F8F !important; /* Original red, keeping as it's for danger hover */
    border-color: #F18F8F !important; /* Original red, keeping as it's for danger hover */
    color: #262626 !important;
}

.dt-buttons {
    gap: 5px;
}

.dt-buttons .btn {
    border-radius: 5px !important;
}

.buttons-colvis {
    width: 100% !important;
}

.progress {
    border-radius: 10px;
}

.card input {
    border-radius: 6px;
    border: 1px solid rgba(19, 37, 51, 0.20);
    background: #FFF;
}

.input-group-text {
    border-radius: 6px 0px 0px 6px;
    height: 44px;
}

#stage_2_form_2 .form-check .checkbox label {
    flex-wrap: wrap;
}

.btn.rounded-circle,
.plus-form.btn-add4 {
    border-radius: 5px !important;
}

table#exampledone .form-group,
table#example .form-group {
    margin-bottom: 0px;
}

table#exampledone td {
    padding: 5px;
}

h4 input,
h5 input {
    margin-top: 10px;
}

@media (max-width: 480px) {
    .content-wrapper .content {
        padding: 0px 10px 20px;
    }

    .content-wrapper .content .container-fluid .row .col-12 .card .card-header .btn {
        width: 100%;
        margin-top: 10px;
    }
}

/* Time line Dashboard */

.timeline-main {
    background-color: #f5f5f5 !important;
}

.timeline-div {
    padding: 50px 0px;
}

.timeline-left .timeline-content,
.timeline-right .timeline-content {
    padding: 0px;
}

.timeline-container::after {
    top: 35px !important;
}

.timeline-left.timeline-container::after {
    border: 4px solid #2294d5;
}

.timeline-left .timeline-content {
    padding: 20px 10px;
    text-align: center;
    color: #FFF;
    border-radius: 5px 5px 0 0;
    margin-bottom: 0px;
    position: relative;
    z-index: 1;
    display: block;
    text-align: center;
    border-radius: 20px;
    border: 10px solid #FFF;
    box-shadow: 0px 0px 20px #0000006e;
}

.timeline-content p {
    margin-bottom: 0px !important;
}

.timeline-left::before {
    top: 27px !important;
    z-index: 2 !important;
    right: 20px !important;
    border-width: 20px 0 20px 30px !important;
}

.timeline-right::before {
    top: 27px !important;
    z-index: 2 !important;
    left: 20px !important;
    border: medium solid white;
    border-width: 20px 30px 20px 0 !important;
}

.timeline-container:nth-child(1n+0) .timeline-content {
    background: linear-gradient(180deg, #01B2B8 0%, #5d32bd 100%); /* Changed from original dark red to purple */
}

.timeline-container:nth-child(1n+0) .timeline-content:before {
    border-top-color: #26779d;
    border-bottom-color: transparent;
}

.timeline-container:nth-child(2n+0) .timeline-content {
    background: linear-gradient(180deg, #ff9b69bd 0%, #d6711de0 100%); /* Kept original, not red */
}

.timeline-container:nth-child(2n+0) .timeline-content:before {
    border-top-color: #c97c08;
    border-bottom-color: transparent;
}

.timeline-left .timeline-content h5,
.timeline-right .timeline-content h5 {
    padding: 10px 30px;
    box-shadow: 0px 0px 0px 0px rgba(13, 114, 186, 0.05);
}

.timeline-right .timeline-content {
    padding: 20px 10px;
    text-align: center;
    color: #FFF;
    border-radius: 5px 5px 0 0;
    margin-bottom: 0px;
    position: relative;
    z-index: 1;
    display: block;
    text-align: center;
    border-radius: 20px;
    border: 10px solid #FFF;
    box-shadow: 0px 0px 20px #0000006e;
}

@media (max-width: 600px) {
    .timeline-div::after {
        left: 29px !important;
    }

    .timeline-right::before {
        left: 50px !important;
    }

    .timeline-left::before {
        left: 50px !important;
        border-width: 20px 30px 20px 0 !important;
    }
}

@media (max-width: 576px) {
    #page_links a {
        width: 100%;
        min-width: 100% !important;
    }

    .list-inline {
        margin-left: 0px !important;
    }
}

.dataTables_wrapper .btn-secondary {
    background-color: #5d32bd !important; /* Changed from red to purple */
    border-color: #5d32bd; /* Changed from red to purple */
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dataTables_wrapper .btn-secondary:hover,
.dataTables_wrapper .btn-secondary.active,
.dataTables_wrapper .btn-secondary:active,
.dataTables_wrapper .btn-secondary:focus,
.dataTables_wrapper .btn-secondary:focus-visible {
    color: #5d32bd; /* Changed from red to purple */
    border-color: #5d32bd; /* Changed from red to purple */
    background-color: transparent !important;
}

.form-group label:not(.form-check-label):not(.custom-file-label) {
    font-size: 14px;
    margin-bottom: 5px;
    font-weight: 500;
}

.form-control {
    height: 44px;
}

.save-next-btn {
    background-color: #5d32bd !important; /* Changed from red to purple */
    border-color: #5d32bd; /* Changed from red to purple */
    color: #FFF;
}

.save-next-btn:hover {
    background-color: #fff !important;
    border-color: #5d32bd; /* Changed from red to purple */
    color: #5d32bd; /* Changed from red to purple */
}

.plus-form,
.details_of_other_concerns {
    background-color: #5d32bd !important; /* Changed from red to purple */
    border-color: #5d32bd; /* Changed from red to purple */
    color: #FFF;
}

.plus-form:hover,
.details_of_other_concerns:hover {
    background: #5d32bd !important; /* Changed from red to purple */
    border-color: #5d32bd; /* Changed from red to purple */
    color: #FFF;
}

input[type=radio] {
    appearance: none;
    background: #FFF;
    border: 1px solid #594781; /* Changed from red to purple */
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    cursor: pointer;
}

input[type=radio]:checked {
    background: #5d32bd; /* Changed from red to purple */
    border-color: #a284e2; /* Changed from red to purple */
}

/* Default Checkbox Styling */
input[type="checkbox"] {
    appearance: none;
    width: 25px;
    height: 25px;
    border: 2px solid #5d32bd; /* Changed from red to purple */
    background-color: white;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
}

input[type="checkbox"]:checked {
    background-color: #5d32bd; /* Changed from red to purple */
    border-color: #5d32bd; /* Changed from red to purple */
}

input[type="checkbox"]:checked::before {
    content: '\2714';
    font-size: 18px;
    color: #FFF;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.plus-form.btn-danger {
    color: #5d32bd; /* Changed from red to purple */
    background-color: #FFF !important;
    border-color: #5d32bd !important; /* Changed from red to purple */
    box-shadow: none;
}

.dt-buttons .buttons-copy,
.dt-buttons .buttons-csv,
.dt-buttons .buttons-excel,
.dt-buttons .buttons-pdf,
.dt-buttons .buttons-print {
    position: relative;
    padding-right: 30px;
}

.dt-buttons .buttons-copy::after {
    content: '';
    position: absolute;
    background: url('../img/copy-icon.png') no-repeat;
    background-position: 90%;
    background-size: 14px;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.dt-buttons .buttons-csv::after {
    content: '';
    position: absolute;
    background: url('../img/csv-icon.png') no-repeat;
    background-position: 90%;
    background-size: 14px;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.dt-buttons .buttons-pdf::after {
    content: '';
    position: absolute;
    background: url('../img/pdf-icon.png') no-repeat;
    background-position: 90%;
    background-size: 14px;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.dt-buttons .buttons-print::after {
    content: '';
    position: absolute;
    background: url('../img/print-icon.png') no-repeat;
    background-position: 90%;
    background-size: 14px;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.dt-buttons .buttons-excel::after {
    content: '';
    position: absolute;
    background: url('../img/excel-icon.png') no-repeat;
    background-position: 90%;
    background-size: 14px;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.dt-buttons button:hover::after {
    filter: invert(1);
}

#table_listing .btn-primary {
    background-color: #05C46B !important; /* Kept original green */
    width: 100%;
}

#table_listing .btn-primary:hover {
    background-color: #29CC97 !important; /* Kept original green */
}

.custom-switch input[type=checkbox] {
    opacity: 0;
    width: 25px;
}

.custom-switch input[type=checkbox]::before {
    display: none;
}

.custom-control-input:checked~.custom-control-label::before {
    border-color: #05C46B !important; /* Kept original green */
    background-color: #05C46B !important; /* Kept original green */
}

.custom-switch .custom-control-input:checked~.custom-control-label::after {
    background-color: #fff !important;
}

.manage-role-table table {
    border: 1px solid #dee2e6;
}

th.heading {
    background: #00000014;
}

.checkbox-wrapper label {
    margin-bottom: 0px !important;
}

.checkbox-wrapper input[type=checkbox] {
    accent-color: #5d32bd !important; /* Changed from red to purple */
    opacity: 1 !important;
    color-scheme: light;
}

.checkbox-wrapper input[type=checkbox]::before {
    border-radius: 3px !important;
}

.checkbox-wrapper input[type=checkbox]:checked {
    border-right: 2px solid #5d32bd; /* Changed from red to purple */
    border-bottom: 2px solid #5d32bd; /* Changed from red to purple */
}

.scrollable-container {
    max-height: 500px;
    overflow-y: auto;
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 10px;
}

.tableWrapper {
    margin-bottom: 10px;
}

.nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    height: 70px;
    -webkit-overflow-scrolling: touch;
}

/* Optional: Hide scrollbar in WebKit browsers */
.nav-tabs::-webkit-scrollbar {
    display: none;
}

.nav-tabs .nav-item .nav-link {
    background-color: #FFF;
    color: #5d32bd; /* Changed from red to purple */
    border-radius: 5px;
}

.nav-tabs .nav-item .active {
    background-color: #5d32bd; /* Changed from red to purple */
    color: #FFF;
    border-radius: 5px;
    border-color: #5d32bd; /* Changed from red to purple */
}

.nav-tabs .nav-item .nav-link:hover {
    background-color: #FFF;
    color: #5d32bd; /* Changed from red to purple */
    border: 1px solid #5d32bd; /* Changed from red to purple */
}

.thead-new {
    background-color: #5d32bd0f; /* Changed from red to purple */
    color: #000;
    border-radius: 5px;
    border-color: #5d32bd0f; /* Changed from red to purple */
}

.modal-content .modal-header {
    background-color: #FFF;
    color: #5d32bd; /* Changed from red to purple */
}

.list-group-item-action {
    color: #5d32bd; /* Kept original red, as it appears to be a specific action color */
    background-color: #FFF !important;
    border-color: #5d32bd !important; /* Kept original red */
}

.list-group-item-action.active {
    color: #FFF;
    background-color: #5d32bd !important; /* Kept original red */
    border-color: #5d32bd !important; /* Kept original red */
}

.chart-container {
    width: 100%;
    height: 400px;
}