@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
:root {
    --primary: #2777ae;  /* Blue */ 
    --danger: #ff9a01;
    --secondary: #555555;
    --success: #008000;
    --info: #17a2b8;
    --warning: #ff9a01;
    --white:#ffff;
    --second-color:#25305a;
    --third-color:#1642df;
    --breadcrumb:#eff8ff;
    --sidebar-menu:#5772d3;
    --sidebar-submenu:#96aaf3;
}
*{
    font-family: 'poppins';
}
/* Search panel that slides in from the right */
.search-panel {
    position: fixed;
    top: 0;
    right: -250px; /* Hidden off-screen initially */
    width: 250px;
    height: 100%;
    background-color: #fff;
    padding: 100px 20px 20px 20px; /* 100px top padding */
    box-shadow: -2px 0px 10px rgba(0, 0, 0, 0.5);
    transition: right 0.3s ease; /* Slide-in effect */
    z-index: 998;
}
/* Show the search panel by setting right to 0 */
.search-panel.show {
    right: 0;
}
/* Toggle container that moves along with the search panel */
.toggle-container {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh; /* Full viewport height */
    z-index: 999; /* Make sure container is visible */
    transition: right 0.3s ease; /* Sync with panel slide */
}
/* Move toggle-container when panel is visible */
.search-panel.show ~ .toggle-container {
    right: 250px; /* Moves left to align with panel */
}
/* Full-height line with a 10px white space to the right */
.vertical-line {
    position: absolute;
    top: 0;
    right: 0; /* Positioned flush with the right edge */
    height: 100vh; /* Full viewport height */
    width: 11px; /* Width for line and white space */
    background-color: white; /* White background */
    box-shadow: -1px 0 0 #ccc; /* 1px gray line on the left */
    pointer-events: none; /* Prevents interaction interference */
}
/* Toggle icon positioned within the container */
.toggle-icon {
    position: absolute;
    right: 11px; /* Positioned to the left of the line */
    top: 50%; /* Center vertically */
    transform: translateY(-50%);
    background-color: #007bff;
    color: white;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    border-radius: 5px 0 0 5px;
    cursor: pointer;
}
/* Full-height vertical line and 10px white space to the right of the icon */
.toggle-icon::after {
    content: '';
    position: fixed; /* Fixes the line to the viewport */
    top: 0;
    right: -11px; /* Places the line 1px left of the 10px gap */
    height: 100vh; /* Full viewport height */
    width: 11px; /* Total width for line and background */
    background-color: white; /* White background */
    box-shadow: -1px 0 0 #ccc; /* Adds 1px gray line on the left */
    z-index: 1000;
    pointer-events: none; /* Ensures it does not interfere with clicks */
}

#changelist-search .form-group {
    width: 13rem;
}
#searchbar{
    width: 12.7rem; 
}
#changelist-search #search_group .btn{
    margin-left:0.4rem;
}
.toggle-icon{
    background-color: var(--second-color);
}   
a {
    color: var(--primary);
}
.alert-success a{
    color: var(--white) !important;
}
.navbar-primary{
    background-color: var(--white);
}
[class*=sidebar-light-] {
    background-color: var(--second-color);
}
[class*=sidebar-light-] .sidebar a {
    color: var(--white);
}
[class*=sidebar-light-] .nav-header {
    color: var(--white);   
}
[class*=sidebar-light-] .nav-treeview>.nav-item>.nav-link.active, [class*=sidebar-light-] .nav-treeview>.nav-item>.nav-link.active:hover {
color: var(--white);
background-color: var(--sidebar-submenu)!important ;
}
[class*=sidebar-light-] .nav-sidebar>.nav-item.menu-open>.nav-link{
color: var(--white);
background-color: var(--second-color);
}
[class*=sidebar-light-] .nav-treeview>.nav-item>.nav-link {
    color: var(--white);
}
.border-bottom{
    background-color: var(--breadcrumb);
}
.border-bottom .row .border-right{
    color: var(--second-color);
    font-weight: 500;
}
.info a{
    color: var(--white) !important;
}
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--white);
}
.breadcrumb .breadcrumb-item, .breadcrumb .breadcrumb-item a{
    color: var(--third-color) !important;
}
.accent-primary .btn-link, .accent-primary .nav-tabs .nav-link, .accent-primary a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):not(.page-link):not(.btn) {
    color: var(--second-color);
}
.accent-primary .dropdown-item.active, .accent-primary .dropdown-item:active {
    background-color: var(--primary);
    color: var(--white);
}
.accent-primary .nav-tabs .nav-link:hover{
    color: var(--second-color);
}
.breadcrumb-item.active {
    color: var(--white);
}
.breadcrumb-item+.breadcrumb-item::before {
    color: var(--third-color);
} 

.selector-chosen h2 {
    background-color: var(--third-color);
}
[class*=sidebar-light] .brand-link{
    color: var(--white);
}
/*buttons */
.btn-success ,.btn-success:hover, .btn-success:active, btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, .show>.btn-success.dropdown-toggle {
    color: var(--white);
    background-color: var(--second-color);
    border: none;
}
.btn-info,.btn-info:hover, .btn-info:not(:disabled):not(.disabled).active, .btn-info:not(:disabled):not(.disabled):active, .show>.btn-info.dropdown-toggle {
    color: var(--white);
    background-color: var(--second-color);
    border: none;
}
.btn-primary,.btn-primary:hover, .btn-success.focus, .btn-success:focus , .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
    background-color: var(--second-color);
    border: none;
}
.btn-danger,.btn-danger:hover,.btn-danger:not(:disabled):not(.disabled):active{
    background-color: var(--second-color);
    border: none;
}
/*buttons close*/

.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active, .sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active ,[class*=sidebar-light-] .nav-treeview>.nav-item>.nav-link:focus,[class*=sidebar-light-] .nav-treeview>.nav-item>.nav-link:hover,[class*=sidebar-light-] .nav-sidebar>.nav-item>.nav-link:focus{
    background-color:var(--sidebar-menu);
    color: var(--white);
}

#jazzy-sidebar .nav-sidebar > .nav-item a:hover {
    background-color: var(--sidebar-menu);
    color: var(--white);
}
.card-success.card-outline {
    border-top: 3px solid var(--primary);
}
a.inline-deletelink,a.inline-deletelink:hover {
    background-color: var(--primary);
    border: none;
}
.alert-danger {
    background-color: var(--warning);
    border: none;
}
.alert-success{
    background-color: var(--success);
    border: none;
    }
.vTextField, .vLargeTextField, .vURLField, .vIntegerField, .vBigIntegerField, .vForeignKeyRawIdAdminField, .vDateField, .vTimeField, input[type="number"], input[type="text"] {
    border-left: 5px solid var(--third-color);
}
#user_form input[type="password"]{
    border-left: 5px solid var(--third-color);
    padding: .375rem .75rem;
    border-top: 1px solid #ced4da;
    border-right: 1px solid #ced4da;
    border-bottom: 1px solid #ced4da;
} 
.accent-primary tbody tr th a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):not(.page-link):not(.btn)
,.accent-primary tbody tr td a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):not(.page-link):not(.btn)
,.accent-primary tbody tr td, thead tr,.accent-primary tbody tr td,.accent-primary tbody tr th a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):not(.page-link):not(.btn)
{
    color: black ;
    font-size: 0.75rem ;
    font-weight: 100 ;   
}
.accent-primary a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):not(.page-link):not(.btn) {
    color: #45484b;
}
label:not(.form-check-label):not(.custom-file-label){
    font-weight: 600;
    color: #666666;
}
.selector .selector-available h2,.list-footer-display,.selector-available select option{
    color: #666666;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    font-weight: 600;
}
.table thead th{
    color: var(--primary-color);
}
.card-danger.card-outline {
    border-top: 3px solid var(--primary);
}
.vCheckboxLabel.inline {
    color: var(--primary);
}
.bg-danger {
    background-color: var(--danger) !important;
}
#jazzy-actions, #jazzy-actions > div {
    display: flex;
}
#jazzy-actions .col-sm-7 {
    margin-left: 20px;
}
.col-sm-3{
    margin-top: 5px;
}
.form-control {
    width: auto;
    margin-left: 5px;
}
#jazzy-actions .object-tools .btn-group-sm>.btn, .btn-sm {
    height: calc(2.25rem + 2px);
    margin-left: 5px;
    padding: 6px 12px;
}
.custom-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
}
.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050;
}
.btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active, .show>.btn-danger.dropdown-toggle {
    background-color: var(--primary);
}

ul.navbar-nav.ml-auto li:nth-child(3) {
    vertical-align: bottom;
    align-items: center;
    display: flex;
}
ul.navbar-nav li:nth-child(3) {
    display: none;
}
.text-sm .select2-container--default .select2-selection--single .select2-selection__rendered{
    margin-top: 1px;
}
#toggleIcon{
    color: var(--white);
    background-color: var(--second-color);
    border-radius: 50%;
    padding: 4px 5px 4px 5px;
}
[class*=accent-] a.btn-danger,[class*=accent-] a.btn-secondary  {
    display: flex;
    align-items: center;
}
.btn-secondary:hover{
    background-color: var(--second-color);
}
.small{
    margin-left: 10px;
    margin-top: 0.8rem;
}
.col-sm-7.field-avatar{
    display: flex; /* Align items vertically (default is row) */
    align-items: center; /* Center elements horizontally */
}
@media screen and (max-width:1490px){
    .selector ul.selector-chooser li a{
        margin-left: 1px;
     } 
}
@media screen and (max-width:1200px){
    .selector ul.selector-chooser li a{
        margin-left: -1px;
     } 
}
@media screen and (max-width:1100px){
    .selector ul.selector-chooser li a{
        margin-left: -2px;
     } 
     div.inline-related {
        width: 100%;
    }
}
@media screen and (max-width:1040px){
    .selector ul.selector-chooser li a{
        margin-left: -2px;
     } 
     div.inline-related {
        width: 100%;
    }
    .card-body{
        padding: 0.5rem;
    }
}
@media screen and (max-width:810px){
    .selector ul.selector-chooser li a{
        margin-left: -4px;
        padding: 1.5px;
     } 
    
}
.col-sm-7.field-avatar,.col-sm-7:has(.readonly):has(.red){
    display: flex; /* Align items vertically (default is row) */ 
    align-items: center; /* Center elements horizontally */
}
.login-box-main-div{
    display: flex;
    width: 80%;
}
.login-text{
    font-weight: bold;
}
.login-logo img{
    width: 10rem;
    margin-left: -10rem;
}
.col-sm-7.field-avatar,.col-sm-7:has(.readonly):has(.red){
    display: flex; /* Align items vertically (default is row) */ 
    align-items: center;
}
.col-sm-7.field-avatar:has(#avatar-clear_id){
    display:block;
}
.col-sm-7.field-avatar,.col-sm-7:has(.readonly):has(.red){
    display: flex; 
}
.wide .p-5{
    padding: 0 !important;
}
.tab-pane{
    overflow-x: hidden;
}
.container-buttons{
    display: flex;
}
.col-sm-7.field-avatar{
    display: block;
}
.no-records{
    display: flex;
    justify-content: center;
    background-color: var(--white);
    padding-top: 80px;
    padding-bottom: 80px;
    font-size: 1.4rem;
}
ul.nav-sidebar .nav-link.active {
    background-color: var(--second-color) !important; 
}
.nav-treeview {
    margin-left: 10px; /* Sub-menu ko parent menu se left side se space dene ke liye */
}
[class*=sidebar-light-] .nav-treeview>.nav-item>.nav-link:hover{
   background-color: var(--sidebar-submenu) !important;
}
.company-logo-place img {
    width: 95px; /* Adjusted width */
    height: 22px; /* Original height of the logo */
    transform: scale(1.5); /* Make the logo larger */
    transform-origin: center; /* Ensure scaling happens from the center */
    margin-top: 5px; /* Remove any default margins */
    margin-right: 15px;
}
.sidebar{
    overflow-x: hidden !important;
}
#company_form .submit-row{
    margin-left: -5px;
}
.submit-row{
    margin-left: 250px;
}
.current{
    color: #008000;
}
.restored{
    color: red;
}
.text-sm .brand-link .brand-image{
    height: 29px; /* Original height of the logo */
    transform: scale(1.5); /* Scale the logo to make it appear larger */
    transform-origin: center; /* Ensure scaling happens from the center */
  }
.main-sidebar .brand-text{
    font-weight: bold !important;
}
#result_list thead{
    background-color: var(--third-color);
}
#result_list thead tr th,#result_list thead tr th .text a{
    color: var(--white);
}
.extra-bold {
    font-weight: 700 !important;
}
.ml {
    margin-left: -15px;
}
.field-display_avatar img{
    width: auto;
}
#id_name {
    width: 50%;
    height:calc(1.8125rem + 10px);
}
#id_additional_info{
    width: 50%;
}
.select2:has(span) {
    width: 50% !important;
}
.form-group div input[type="text"]{
    width: 50%;
}
.form-group div .vLargeTextField,.form-group div .vTextField{
    width: 50%;
}
#id_authoritative_document_id{
    width: 50%;
}
.very-low {
    background-color: #355F2E;
    color: white;
}

.low {
    background-color: #9EDF9C;
    color: black;
}
.initial{
background-color: gray;
color: white;
}

.medium {
    background-color: #FFD2A0;
    color: black;
}

.high {
    background-color: #FF7F3E;
    color: white;
}

.very-high {
    background-color: #FF2929;
    color: white;
}

.unknown {
    background-color: #CCCCCC;
    color: black;
}
.very-low, .low, .medium, .high, .very-high, .unknown,.initial {
    /* Shared styles for all classes */
    width: auto; /* Fixed width for consistent size */
    height: 50px; /* Fixed height */
    line-height: 50px; /* Align text vertically */
    text-align: center; /* Center-align text horizontally */
    border-radius: 4px; /* Rounded corners */
    white-space: nowrap; /* Prevent text from wrapping */
    overflow: hidden; /* Hide overflow text */
    text-overflow: ellipsis; /* Add '...' for overflowing text */
    font-size: 14px; /* Consistent font size */
    font-weight: 500;
    padding-left: 10px;
    padding-right: 10px;
}
.compliant {
    background-color: #4db8ff; /* Blue */
    color: white;
    text-align: center;
    border-radius: 4px;
    padding: 10px;
}

.not-compliant {
    background-color: #ff6666; /* Red */
    color: white;
    text-align: center;
    border-radius: 4px;
    padding: 10px;
}
.partially-compliant {
    background-color: #ffcc66; /* Orange */
    color: black;
    text-align: center;
    border-radius: 4px;
    padding: 10px;
}
.pol-approved {
    background-color: #ffcc66; /* Orange */
    color: black;
    text-align: center;
    font-weight: 400;
    border-radius: 4px;
    padding: 2px;
}
.reject-policy {
    background-color: red; /* Orange */
    color: white;
    text-align: center;
    font-weight: 400;
    border-radius: 4px;
    padding: 2px;
}
.approved-policies  {
    background-color: #355F2E; /* Green */
    color: white;
    text-align: center;
    font-weight: 400;
    border-radius: 4px;
    padding: 10px;
}
.fully-compliant {
    background-color: #33ffad; /* Green */
    color: black;
    text-align: center;
    border-radius: 4px;
    padding: 10px;
}

.not-tested {
    background-color: gray; /* Gray */
    color: white;
    text-align: center;
    border-radius: 4px;
    padding: 10px;
    font-weight: 400;
}
/* static/css/styles.css */
.applicable-yes {
    background-color: #80ffaa;
    color: black;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
}
.applicable-no {
    background-color: #ff6666;
    color: white;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
}

.select2-selection__choice__display{
    color: black;
}
/* Prevent parent menu item background color change when hovering over submenu */
#jazzy-sidebar .nav-item.has-treeview:hover > a{
    color: white; /* Keep the parent item text color unchanged */
}
    /* Styling for the help icon */
    .help-icon {
        padding: 1px 8px 2px 7px;
        background-color:var(--third-color);
        color: var(--white);
        font-size: 15px;
        cursor: pointer;
        margin-left: 1rem;
        font-weight: bold;
        border-radius: 50%;
    }
    .tooltip2 {
        display: none;
        position: absolute;
        background-color: var(--secondary);
        color: var(--white);
        padding: 10px;
        border-radius: 5px;
        max-width: 800px; /* Limit the tooltip width for better positioning */
        font-size: 14px;
        z-index: 100000;
        white-space: normal;
        top: 10%; /* Center tooltip vertically relative to icon */
        transform: translateY(2%); /* Adjust for perfect centering */
        right: -29%; /* Position tooltip to the right of the icon */
    }
    /* Show tooltip when hovering over the help icon */
    .help-icon:hover .tooltip2 {
        display: block;
    }
    .help-icon:hover {
        background-color: var(--secondary); /* Slightly darker on hover */
    }
    .is-invalid {
        border: 1px solid red;
    }
    .not-tested,.applicable-yes,.fully-compliant,.partially-compliant,.not-compliant{
        line-height: 0.9;
    }
    .high,.low,.very-low,.medium,.very-high,.unknown,.initial{
        line-height: 1.8;
        height: 1.5rem;
    }
    .col-6.container-fluid h1 {
       font-size: 19px;
       color: var(--primary);
    }
 /* Main container styling */
    .main-container {
        background-color: white; /* White background for the entire container */
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect */
        border-radius: 8px; /* Rounded corners */
        padding: 30px; /* Inner spacing */
        width: 1200px; /* Set width for central alignment */
        margin: 20px auto; /* Center the container */
        font-family: Arial, sans-serif; /* Cleaner font */
    }
    /* Section styling */
    .section {
        margin-bottom: 30px; /* Space between sections */
    }
    /* Section headings */
    .section-heading {
        font-size: 20px;
        font-weight: bold;
        text-align: start;
        margin-bottom: 20px;
        color: var(--primary);
    }
    .restore{
        margin-left: 4px;
    }
    /* Form group styling */
    .form-group {
        margin-bottom: 20px;
        margin-left: -3px;
    }
    /* Label styling */
    label {
        display: block;
        font-size: 16px;
        margin-bottom: 8px;
        margin-left: 5px;
        color: #555;
    }
    /* Input and select styling */
    .form-backup{
        padding: 10px;
        font-size: 14px;
        border: 1px solid #ddd;
        border-radius: 4px;
        box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.1);
    }
    /* Button styling */
    button.btn, a#takeBackup {
        /* Full-width buttons */
        padding: 6.6px 12px;
        font-size: 16px;
        text-align: center;
        border: none;
        border-radius: 4px;
        transition: all 0.3s ease;
    }
   
    /* Restore button */
    button.btn-primary,button.btn-primary:hover  {
        background-color: var(--second-color);
        color: white;
    }
    /* Backup button */
    a#takeBackup {
        background-color: var(--second-color);
        color: white;
        text-decoration: none;
        display: inline-block;
    }
    a#takeBackup:hover {
        background-color:var(--primary);
    }
    .dropdown .nav-link.btn img{
        width: 32px !important;
        height: 32px !important;
        border-radius: 50%;
        object-fit: cover;
        margin-top: -7px;
        margin-right: -25px;
    }
    .text-sm .main-header .nav-link>.far{
        font-size: 1rem;
        margin-right: -25px;
    }
    /* Styling for each row */
    .detail-row {
        display: flex; /* Align heading and value side by side */
        justify-content: flex-start; /* Align items to the left */
        margin-bottom: 10px; /* Spacing between rows */
    }
    
    /* Headings styling */
    .detail-heading {
        font-weight: bold; /* Make headings bold */
        width: 150px; /* Fixed width for proper alignment */
        text-align: right; /* Align headings to the left */
    }
    
    /* Values styling */
    .detail-value {
        font-weight: normal; /* Values should not be bold */
        color: #555; /* Slightly lighter color for readability */ 
    }
    .btn-success-green, .btn-success-green:hover{
        background-color: var(--second-color);
        color: var(--white);
    }
    .btn-warning{
        background-color: var(--warning);
    }
    .btn-primary:focus {
        background-color: var(--second-color);
    }
    .field-send_for_approval_button a, .field-restore_policy a{
        width: max-content;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        display: block !important;
    }
    .value{
        margin-top: 7px;
    }
    .bg-primary{
        background-color: var(--third-color) !important;
    }
    .btn-secondary {
        background-color: var(--second-color);
    }
    [class*=accent-] a.btn-secondary {
        background-color: var(--second-color);
    }
    .bell-icon{
        font-size: 1.2rem;
        margin-left: 20px;
        margin-right: 5px;
        margin-top: 2px;
    }
    #bellIcon,#nav-user {
        /* Icon ke fill ko transparent banayein */
        -webkit-text-fill-color: transparent;
        /* Outline (stroke) ki width aur color define karein */
        -webkit-text-stroke-width: 1px; /* Apni requirement ke mutabiq adjust karein */
        -webkit-text-stroke-color: var(--third-color); /* Jo color aap chahte hain */
      }
      
/* Dropdown Styles */
#bell-dropdown {
    display: none;
    width: 300px;
    position: absolute;
    top: 30px;
    right: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 10px; 
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); 
    z-index: 989;
}

#bell-dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
    color: black;
}

/* Dropdown Header */
.bell-dropdown-header {
    background-color: var(--third-color);
    color: var(--white);
    height: 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
}

.dropdown-heading {
    font-weight: bold;
    font-size: 19px;
}

.mark-all-btn {
    font-size: 0.875rem;
    background: none;
    border: none;
    color: var(--white);
    cursor: pointer;
}

/* List Item Card */
.card-item {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 10px;
    margin: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

/* Icon and Text Styling */
.card-icon-text {
    display: flex;
    align-items: center;
}

.card-icon {
    font-size: 20px;
    color: var(--third-color);
    margin-right: 10px;
}

.card-text {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

/* Tooltip Container */
.checkbox-container {
    position: relative;
    display: flex;
    align-items: center;
}

.bell-tooltip {
    display: none;
    position: absolute;
    top: -30px;
    right: 0;
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 4px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    z-index: 1000;
}

/* Show Tooltip on Hover */
.checkbox-container:hover .bell-tooltip {
    display: block;
}

/* Checkbox Styling */
.checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid #555;
    border-radius: 50%;
    position: relative;
    display: inline-block;
    background-color: #fff;
    cursor: pointer;
}

.notification-checkbox:checked + .checkmark {
    background-color: #007bff;
    border-color: #007bff;
}

.checkmark:after {
    content: '';
    position: absolute;
    display: none;
}

.notification-checkbox:checked + .checkmark:after {
    display: block;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.timeline>div>.timeline-item>.timeline-header {
    font-size: 12px !important;
}
.bg-blue{
    background-color: var(--primary) !important;
}
.accent-primary .page-item.active .page-link, .accent-primary .page-item.active a {
    background-color: var(--third-color) !important;
    border: none;
}
.accent-primary .page-item .page-link {
    color: var(--primary);
}
label {
    font-size: 14px;
}
.approval{
    margin-left: -8px !important;
}
.no-records-image {
    width: 50%;
    position: relative;
    left: 23%;

}
.unread-message{
    text-align: center;
    margin-top: -18px;
    color: var(--third-color);
}
.pending-user-list{
    margin-left: -22px;
}
.notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: red;
    color: white;
    font-size: 10px;
    font-weight: bold;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.acknowledge-policy{
    font-size: 20px;
    color: var(--primary);
    text-align: start;
    font-weight: bold;
    margin-bottom: 1rem;
}
.dataTables_info{
    display: flex;
    align-items: baseline;
}
.pagination{
    float: right;
}
#id_user_permissions_to option[value="78"] {
    display: none;
}
#id_permissions_to option[value="78"] {
    display: none;
}
.listing-icon{
    font-size: 0.8125rem !important;
}
.notification-container {
    max-height: 700px; /* Set a height for the scrollable area */
    overflow-y: auto; /* Enable vertical scrolling */
    border: 1px solid #ccc; /* Optional: Add a border for clarity */
    padding: 10px; /* Optional: Add padding inside the container */
    background-color: #f9f9f9; /* Optional: Set background color */
}

.notification-container::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
}

.notification-container::-webkit-scrollbar-thumb {
    background: #888; /* Scrollbar color */
    border-radius: 4px; /* Rounded corners for scrollbar */
}

.notification-container::-webkit-scrollbar-thumb:hover {
    background: #555; /* Darker color when hovered */
}
.show-all{
    background-color: #f4f6f9 !important;
    color: var(--primary) !important;
}
/* Common styling for all divs with .listing-icon */
.listing-icon {
    position: relative;
    padding: 5px 10px;
    cursor: pointer;
    color: var(--third-color)!important;
}

/* Tooltip styling */
.listing-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 75%;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    background-color: black;
    color: white;
    padding: 5px;
    border-radius: 5px;
    font-size: 12px;
}


/* Tooltip for .view class */
.view:hover::after {
    content: "View";
    opacity: 1;
    visibility: visible;
}

/* Tooltip for .send-approval class */
.send-approval:hover::after {
    content: "Send Approval";
    opacity: 1;
    visibility: visible;
}

/* Tooltip for .pending-approval class */
.pending-approval:hover::after {
    content: "Pending Approval";
    opacity: 1;
    visibility: visible;
}

/* Tooltip for .restore-policy class */
.restore-policy:hover::after {
    content: "Restore Policy";
    opacity: 1;
    visibility: visible;
}

/* Tooltip for .acknowledge class */
.acknowledge:hover::after {
    content: "Acknowledge";
    opacity: 1;
    visibility: visible;
}
.already-acknowledge:hover::after {
    content: "Already Acknowledge";
    opacity: 1;
    visibility: visible;
}
.pending-acknowledge:hover::after {
    content: "Pending Acknowledge Status";
    opacity: 1;
    visibility: visible;
}
.sent:hover::after {
    content: "Sent";
    opacity: 1;
    visibility: visible;
}
.rejected:hover::after {
    content: "Rejected";
    opacity: 1;
    visibility: visible;
}
.delete:hover::after {
    content: "Delete";
    opacity: 1;
    visibility: visible;
}
.mark-as-complete:hover::after {
    content: "Mark as Completed";
    opacity: 1;
    visibility: visible;
}
.completed:hover::after {
    content: "Completed";
    opacity: 1;
    visibility: visible;
}
.report-non-compliance:hover::after {
    content: "Report Non-Compliance";
    opacity: 1;
    visibility: visible;
}

.view-non-compliances:hover::after {
    content: "View Non-Compliances";
    opacity: 1;
    visibility: visible;
}
.field-audit_actions{
    display: flex;
    align-items: center;
    justify-content: space-around;
}
#policy_version{
    width: 50%;
}
#risk-analysis,#Scope,#Plan-New-Audit,#issue-response,#risk-response,#risk-identification,#issue-detail,#control-compliance,.mappings-heading,#policy-details-heading,.revisions-heading,.mappings-heading,#risk-acceptance-level-heading,#assets-ratings-heading,#information-assets-heading,#add-controls-heading{
    margin-top: 20px;
    margin-left: 30px;
    font-size : 19px;
    font-weight: bold;
    color: var(--primary) ;
}
.field-actions_column{
    display: flex;
    align-items: baseline;
}
.fa-check-circle:before{
    font-size: 1rem;
}
.selection{
    width:40%;
}
.view-file{
    margin-left: 5px;
}
.action{
    margin-left: 5px;
}
.calendar caption, .calendarbox h2, .clockbox h2{
    background: var(--primary);
    color: white;
}    
.send-app,.view-penidng{
    margin-left: 7px;
}
.already-acknowledged{
    margin-top: -10px;
    margin-bottom: 15px;
}
#approval_rejection_comments{
    width: 50%;
    border-left: 5px solid var(--third-color);
    padding: 6px 12px;
    margin-left:-4px;
}
.app-rej{
    margin-left: -12px;
}
.select2-container .select2-selection--multiple .select2-selection__rendered {
    display: block !important;
}
.btn-primary.disabled, .btn-primary:disabled {
    background-color: var(--second-color);
}
#overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}
.description__icontains{
    margin-left: -1px;
    width: 97% !important;
}
#search_group{
    margin-left: -9px;
}
.field-actions_column a:nth-last-of-type(2) {
    margin-right: 9px;
  }
.selector-filter input{
    width: 100% !important;
    height: 32px;
}
.selector .selector-filter{
    padding-top: 0px;   
}
.selector .selector-filter label{
    height: 10px;
}
.selector-available h2, .selector-chosen h2 {
    font-size: 14px;
}
.help.help-tooltip.help-icon{
    display: none;
}
.readonly-field{
    margin-left: 0;
}
/* 'Choose' button ke liye custom background image */
/* 'Choose' button ke liye (Left Arrow) */

/* 'Remove' button ke liye (Right Arrow - Flipped) */

/* body .active.selector-add:focus, body .active.selector-add:hover,.active.selector-remove:focus, .active.selector-remove:hover  {
    background-position: 0 0 !important;
} */
.selector-add, .selector-remove {
    opacity: 1;
}
.selector ul.selector-chooser {
  background-color: white;    width: 6%;
}
.selector-available, .selector-chosen{width: 47%;}
.card{
    margin-bottom: 0 !important;
}
.p-5 {
    padding: 3rem 3rem 0 3rem !important; /* Top Right Bottom Left */
}
#issuecategory_form #jazzy-actions .col-sm-7,#assetcategories_form #jazzy-actions .col-sm-7,#risklevel_form #jazzy-actions .col-sm-7,#auditcategories_form #jazzy-actions .col-sm-7,#authoritydocument_form #jazzy-actions .col-sm-7, #compliance_form #jazzy-actions .col-sm-7,
#customuser_form #jazzy-actions .col-sm-7,#company_form #jazzy-actions .col-sm-7,#businessunit_form #jazzy-actions .col-sm-7,#productandservice_form #jazzy-actions .col-sm-7,#thirdpartyproduct_form #jazzy-actions .col-sm-7{
    margin-left: 0 !important;
}
#compliance_form .card-body{
    margin-top: 3rem;
}
.vTextField, .vLargeTextField, .vURLField, .vIntegerField, .vBigIntegerField, .vForeignKeyRawIdAdminField, .vDateField, .vTimeField, input[type="number"], input[type="text"] {
   font-size: 14px;
}

.rectangle {
    padding-left: 20px; /* Add right padding */
}
/* Maintain consistent padding and default border color */
#id_impact, #id_probability, #id_risk_rating_inherent, #id_risk_level, #id_risk_response, #id_risk_rating, #id_owner {
    padding: 10px; /* Adjust based on your design */
    box-sizing: border-box; /* Ensure padding is included in the width */
    width: 50%; /* Optional: Maintain full width */
    background-color:#fff;
    border: 1px solid #ced4da;
    border-radius: .25rem;
}

/* Specific styles for validation error states */
.error #id_impact, .error #id_probability, .error #id_risk_rating_inherent, .error #id_risk_level, .error #id_risk_response, .error #id_risk_rating, .error #id_owner {
    border-color: red; /* Highlight error */
    padding: 10px; /* Keep padding consistent */
    box-sizing: border-box;
    width: 100%; /* Optional: Ensure size consistency */
}


#id_issue_type, .gerenric_field, #id_status, #id_issue_priority, #id_audit_category, #id_user_id, #id_audit_team, #id_audit_employees, #id_category, #id_asset_owner, #id_control_owner, #id_control_type, #id_type {
    padding: 10px; /* Adjust based on your design */
    box-sizing: border-box; /* Ensure padding is included in the width */
    width: 50%; /* Optional: Maintain full width */
    border: 1px solid #ced4da; /* Default border color */
    background-color:#fff;
    border: 1px solid #ced4da;
    border-radius: .25rem;
}

/* Specific styles for validation error states for #id_issue_type */
.error #id_issue_type, .error #id_issue_priority, .error #id_audit_category .error #id_user_id, .error #id_audit_team, .error #id_audit_employees, .error #id_category, .error #id_asset_owner, .error #id_control_owner, .error #id_control_type, .error #id_type {
    border-color: red; /* Highlight error */
    padding: 10px; /* Keep padding consistent */
    box-sizing: border-box;
    width: 100%; /* Optional: Ensure size consistency */
}

.form-group .row {
    align-items: flex-start; /* Align all content to the top */
}
.form-group label {
    text-align: right;
    align-self: flex-start; /* Ensure labels start at the top */
}
.mapped-list {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none; /* Removes the default bullet points */
}

.mapped-list li {
    line-height: 1.5; /* Ensures consistent vertical spacing */
    margin: 5px 0; /* Adds some space between items */
    padding-left: 0; /* Aligns the text flush with the label */
}

.form-group .row.align-items-center > div {
    display: flex;
    align-items: center;
}
.form-group label {
    margin-bottom: 0; /* Ensures labels align properly */
}

.form-group div ul {
    margin-left: 0; /* Ensures no unintended indentation */
}
.ready, .inprogress, .notready {
    padding: 5px;
    font-size: 16px;
}
.ready {
    color: #355F2E;
}
.inprogress {
    color:  #FF7F3E;;
}
.notready {
    color: #FFD2A0; 
}
.permission-heading{
    background-color: var(--third-color);
    color: var(--white);
}
#permissions-form table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
.content #content #permissions-form table .permission-heading th, #permissions-table-body td {
    border: 1px solid #ddd;
    padding: 8px;
}
#permissions-form th {
    text-align: left;
}
#permissions-form button {
    padding: 10px 15px;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
select#group{
    padding: 8px;
    margin-bottom: 20px;
}

 .draft-class{
    color: gray; /* Gray */
}
.pending-class {
    color: #ffcc66; /* Orange */
    
}
.reject-class {
    color: red; /* Orange */
    
}
.approved-class  {
    color: #355F2E; /* Green */
    
}
.complete-event {
    color : #9EDF9C
}
.inprogress-event {
    color:  #FF7F3E
}
.planned-event{
    color: #FFD2A0;
}
#heatmap {
    display: grid;
    grid-template-columns: repeat(5, 50px); /* 5 columns for Probability */
    grid-template-rows: repeat(5, 50px); /* 5 rows for Impact */
    gap: 2px;
}

#heatmap div {
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 14px;
    color: white;
    border: 1px solid #ccc;
}
.col-md-4{
    padding: 0;
    margin-top: 20px;
}

/* Optional: Make sure the cards don't break into new rows */
#compliance-container {
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between; */
    column-gap: 10px;
}

#compliance-container .col-md-4 {
    flex: 1 1 30%; /* Adjusts each card to take up roughly 30% of the row */
}
#compliance-container .card{height: 100% !important; min-height: 350px !important;}
#compliance-container .card.col-md-4{height: 100% !important;min-height: 350px !important;}
.circle-container {
    background-color: #ffffff;
    border-radius: 10px;
    text-align: center;
}
.iso-logo {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
}
.progress-circle {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 auto;
}
.progress-circle svg {
    transform: rotate(135deg);
}
.progress-circle circle {
    fill: none;
    stroke-width: 10;
}
.progress-circle .progress-circle {
    stroke: url(#gradient);
    stroke-dasharray: 440;
    stroke-dashoffset: 110;
}
.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    font-weight: bold;
}
.progress-subtext {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    color: #666;
}
.badge-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 75px;
}

.badge {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #50a6e4 30%, #1a6ba5 90%); /* Gradient from top-left to bottom-right */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: Arial, sans-serif;
    font-size: 12px;
    text-align: center;
    font-weight: bold;
    padding: 5px 10px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    border: none;
    outline: none;

   
}
    .justify-content-evenly {
        -webkit-justify-content: space-evenly !important;
        -ms-flex-pack: justify !important;
        justify-content: space-evenly !important;
    }

#controlcategories_form #jazzy-actions{
    margin-left: -30px;
}
.res{
    margin-top: -1rem;
}
@media (max-width: 992px) { /* Tablet mode */
    .res{
        margin-top: 0rem;
    }
}
.list-unstyled{
    line-height: 2; margin: 0; padding: 0;text-align:start;
}
.card-body .probability{
    position: absolute ; top: 42%; font-size: 12px; left: -24px; transform: translateY(-50%) rotate(-90deg); font-weight: bold; text-align: center;
}
.card-body .impact{
    margin-top: 7px; font-weight: bold; font-size: 12px; position: absolute; bottom:-35px;  text-align: center;left:0%; right:0%; margin: auto; margin-left: 50px;
}
#heatmap-container{
    position: relative; top: -10px; margin-bottom: -10px;
}
.display-vertical-center{display: flex; align-items: center; justify-content: center;}
.cursor-pointer{cursor: pointer;}
.drop_menu{min-width: 280px; max-width: 100%; white-space: nowrap;}
img.profile-picture{width: 25px; height: 20px; border-radius: 50%; object-fit: cover;}
#heatmap{
     background-color: #f0f0f0;
}
#compliance-container .card-body:has(canvas){
    height: 350px;
}
#compliance-container #controlTypeChart{
    max-height: 350px !important;
}
#compliance-container #control_categoryChart{
    max-height: 350px !important;
}
@media (max-width: 1024px) {
    #heatmap-container {
        bottom: 2.5rem;
    }
    
}
#heatmap-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.heatmap-wrapper {
    display: grid;
    grid-template-columns: auto repeat(5, 1fr);
    grid-template-rows: repeat(6, 30px) !important; /* Default box size */
    text-align: center;
    width: 230px !important;
    max-width: 100%;
    margin: auto; padding-left: 20px;
}

/* Default cell size */
.heatmap-cell {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;  border-bottom: 0px; border-left: 0px;
}
/* Probability and Impact Labels */
.probability-label,
.impact-label {
    background-color: #fff;
    text-align: right;
    line-height: 100% !important;
    font-size: 8px !important;
}
#group_form #jazzy-actions .col-sm-7{margin-left: 0px;}
.heatmap_cnt{position: relative;}
#heatmap-container .probability-label{ border-bottom: 0px;  padding-right: 5px; justify-content: flex-start;}
#heatmap-container .impact-label{ border-right: 0px; padding-right: 2px; text-align: right; line-height: 45px !important;}
.res_postn.res{position: absolute; width: 100%; padding: 0px 10px !important; bottom: 10px; left: 0px;}
.circle-container{padding-bottom: 55px;}
.navbar-expand .navbar-nav .dropdown-menu{max-width: inherit;}
.retore_form .form-group label{text-align: left;}
/* Heatmap links */
.heatmap-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Heatmap counts */
.heatmap-count {
    color: black;
    font-size: 12px;
    text-align: center;
}

/* 🌟 Tablet Responsive (max-width: 1024px) */
@media (max-width: 1024px) {
    #heatmap-container {
        margin-top: 8%;
    }
    .heatmap-wrapper {
        grid-template-rows: repeat(6, 35px); /* Reduce row height */
        width: 90%; /* Adjust width */
    }
    .card-body .probability{
       
        top: 45%;
   }
    .heatmap-cell {
        height: 30px; /* Reduce box size */
    }

    .probability-label,
    .impact-label {
        font-size: 10px;
        line-height: 35px;
    }

    .heatmap-count {
        font-size: 10px;
    }
    
}

/* 📱 Smaller Tablets (max-width: 768px) */
@media (max-width:820px) {
    .heatmap-wrapper {
        grid-template-rows: repeat(6, 25px); /* Further reduce row height */
        width: 100%;
    }
    #heatmap-container {
        bottom: 1rem;
    }
    .heatmap-cell {
        height: 30px;
    }

    .probability-label,
    .impact-label {
        font-size: 9px;
        line-height: 30px;
    }
    .card-body .probability{
        
        top: 45%;
   }
   .card-body .impact{
    top:11rem; 
   }
    .heatmap-count {
        font-size: 9px;
    }
}
@media (max-width:912px) {
   .res{
    padding: 0;
    margin-top: -1rem;
   }
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #666666;
}
.form-group div .vTextField, .form-group div .vLargeTextField, .form-group div .vURLField, .form-group div .vBigIntegerField, .form-group div input[type="text"]{
    color: #666666;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--third-color) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[aria-selected]:hover{
    background-color: var(--third-color);
}
.accent-primary a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):not(.page-link):not(.btn):hover {
    color: var(--third-color);
}
.form-control:focus {
    border-color: var(--third-color);
}
.login-box-main-div a{
    color: var(--third-color);
}
.circle-img{
    margin-top: -1rem;
    width: 11rem;
    margin-left: -1rem;
}
.badge-data{
    position: relative;
    z-index: 1000;
    color: white;
    font-weight: bolder;
    font-size: 16px;
}
.accent-primary .dropdown-item.active{
    background-color: var(--third-color);
}
body.jazzmin-login-page{
    overflow: hidden;
    min-height: auto !important;
}

.custom-video {
    width: 100%;
  }
  .login-box-main{
    display: flex;
    width: 100%;
  }
  .login-box{
    padding: 0;
  }
  .login-box1{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: -9rem;
  }
  .login-box1 .cart{
    width: 23rem;
  }
  .login-box-msg{
    text-align: start;
    font-size: 20px;
    color: #b6c0d3;
    padding: 0 10px 20px;
  }
  .btn-block{
    width: auto;
    background-color: var(--third-color)!important;
    border-radius: 22px !important;
  } 
  #jazzy-actions .btn-block{ border-radius: .25rem !important; background-color: var(--second-color)!important;}
  .selector-add{ background-position:0px -119px; width: 20px;
    height: 20px;margin: auto;
    background-size: 20px;}
   .selector-remove{ background-position:0px -80px; width: 20px;margin: auto;
        height: 20px;
        background-size: 20px;}
        .active.selector-add:focus, .active.selector-add:hover{ background-position:0px -119px;}
  .input-group:not(.has-validation)>.form-control:not(:last-child){
    border-radius: 20px;
    border: 2px solid #b6c0d3;
  }
  .input-group>.input-group-append>.input-group-text{
    display:none !important;
  }

#compliance-container .card{ height: 100%;}

  .badge-container {
    position: relative;
    display: block; margin: auto;width: 200px; margin-bottom: 10px;
}

.badge-img {
    display: block;
    width: 90%;
    height: auto;
}

.badge-data {
    position: absolute;
    top: 45%;
    left: 45%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 15px;
    pointer-events: none;
}
.sidebar-collapse .first_logo{display: none; }
.sec_logo{display: none;}
.sidebar-collapse .sec_logo{display: block; width: 60px; margin: auto;}
.main-sidebar:hover .sec_logo{display: none ;}
.main-sidebar:hover .first_logo{display: block;}

.sidebar-collapse #toggleIcon-left{display: block;}
#toggleIcon-left{display: none;}
#toggleIcon-right{display: block;}
.sidebar-collapse  #toggleIcon-right{display: none;}
#toggleIcon-left, #toggleIcon-right{ width: 22px; height: 22px;  color: #fff;
background-color: #25305a;
border-radius: 50%;padding: 2px 5px;}

.forgot-link,.forgot-link:hover{
    color: var(--third-color);
}
.col-md-8{
    margin-top: 20px;
}
#permissions-form{
width: 50%;
}
.form-inline .form-group label, #customuser_form .form-group label{
    margin-top: 8px;
}
.field-profile_picture{
margin-top: 6px;
}
#total_assets_count a, #assetOwnersCount a, #TotalRisk a, #CriticalRisk a, #ImportantRisk a, #OwnerRisk a, #AuditTeam a, #AuditEmployee, #AuditOverview a, #TotalControlCount a, #CurrentUserCountControl a, #PolicyOverview a, #AcknowledgePolicy, #PolicyOwner a, #ExpirePolicy, #IssueOverview, #CurrentIssueOverview a, #CriticalOwnersCount h1, #ComplianceOverview h1{
    color: #1642df !important;  /* Keeps the text blue */
    text-decoration: none;  /* Removes underline */
}
[class*=sidebar-light-] .nav-sidebar>.nav-item>.nav-link:active, [class*=sidebar-light-] .nav-sidebar>.nav-item>.nav-link:focus{
    color: var(--white);
}
[class*=sidebar-light-] .nav-sidebar>.nav-item.menu-open>.nav-link, [class*=sidebar-light-] .nav-sidebar>.nav-item:hover>.nav-link{
    color: var(--white);
}
@media screen and (max-width: 7600px) and (min-width: 1200px){
    .heatmap-wrapper {
        grid-template-rows: repeat(6, 45px) !important; width: 290px !important;}
        .card-body .impact{bottom: -14px;}
        .card-body .probability{left: -32px;}
}