:root {
     --sidebar-width: 260px;
     --sidebar-collapsed-width: 0px;
     --transition-duration: 0.4s;
    /* --min: 1rem;
    --pref: 2.5vw;
    --max: 1.5rem; */
    }

/* p { font-size: clamp(var(--min), var(--pref), var(--max));}

p { font-size: clamp(1rem, 2.5vw, 1.5rem);}
 
html { font-size: calc(15px + 0.390625vw);}
 */





 @font-face {
     font-family: 'Roboto';
     font-stretch: PERCENTAGE_RANGE_LOW_TO_HIGH;
    /* Note that font-stretch is a % of normal width */
     font-style: NORMAL_OR_ITALIC;
    /* See note below */
     font-weight: 100 1000;
     src: url('https://web-staging.in/grievance2/fonts/Roboto.woff2') format('woff2');
}
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}
 body {
     font-family: 'Roboto'!important;
     display: flex;
     font-size: 14px !important;
     flex-direction: column;
     height: 100vh;
}
 header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     background: #fff;
     border-bottom: 1px solid #ddd;
     padding: 10px 20px;
     height: 90px;;
     position: sticky;
     top: 0;
     z-index: 10;
}
 header .logo {
     height: 70px;
}
 .Compaint_blg {
     display: block;
     padding:0 0 20px 0;
}
 .Compaint_blg h2 {
     font-size: 28px;
     font-weight: bold;
     color: #24252D;
}
 .Compaint_blg .subheading {
     font-weight: 500;
     color: #474B5D;
     font-size: 15px;
}
 .profile {
     position: relative;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 14px;
}
 .profile img {
     width: 36px;
     height: 36px;
     border-radius: 50%;
     border: 1px solid #ccc;
}
 .profile-menu {
     position: absolute;
     top: 50px;
     right: 0;
     background: #fff;
     border: 0px solid #ddd;
     border-radius: 4px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
     display: none;
     flex-direction: column;
     min-width: 100px;
     padding: 5px 20px;
}
 .profile-menu a {
     padding: 10px;
     text-decoration: none;
     color: #D30004;
     transition: background 0.2s;
     font-size: 15px;
     font-weight: bold;
}
/* .profile-menu a:hover {
     background: #f5f5f5;
}


 */

#arrow img {width: 13px; border: 0;}

 .container {
     max-width: 100% !important;
     display: flex;
     transition: all var(--transition-duration);
     min-height: auto;
     flex-wrap: nowrap;
}
 aside.sidebar {
     background: #EDEDED;
     left: 0;
     top: 0;
     width: 100%;
     transition: all var(--transition-duration);
     position: absolute;
     height: auto;
     z-index: 100;
     /* overflow: hidden; */
     display: flex;
     flex-direction: column;
     transform: translateY(-100%);
}
 .b-primary {
    background: #007DD4 !important;
}
 aside.sidebar.collapsed {
     transform: translateY(0);
}
/* .dataTables_wrapper {
    max-width: 2500px;
     min-width: 2000px;
}
 */
 .toggle-button {
    position: absolute;
    bottom: -30px;
    right: 50%;
    z-index: 101;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: 1px solid #aaa;
    background: #007DD4;
    color: #fff;
    transform: rotate(90deg);
}
 /* aside.sidebar.collapsed .content {
    
} */

.content div {width: 180px;}

.grievance-text {min-width: auto;
    max-width: 250px}

 aside.sidebar .content {
  padding: 20px;
    display: flex;
    border-bottom: 1px solid #ddd;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
}
 aside.sidebar h2 {
     margin: 0 0 8px;
     font-size: 1.2em;
}
 aside.sidebar .subheading {
     font-size: 0.9em;
     color: #666;
     margin-bottom: 20px;
}
 aside.sidebar label {
     font-size: 14px;
     margin-top: 20px;
     display: block;
     color: #666666;
     font-weight: 700;
}
 aside.sidebar input, aside.sidebar select {
     width: 100%;
     padding: 10px;
     margin-top: 5px;
     outline: none;
     border: 0px solid #ccc;
     border-radius: 5px;
     background: #fff;
     color: #1C2C3C;
     font-weight: 500;
     
}

.dataTables_length label {padding-bottom: 10px;}


aside.sidebar select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fff url(https://web-staging.in/grievance2/images/downarrow.svg) right 10px center / 12px no-repeat;
}
 button.get-details {
  width: 20%;
    background: #007DD4;
    border: none;
    color: #fff;
    padding: 10px 16px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 400;
    margin: 0 auto;
}
 main.main {
     flex: 1;
     height: 75dvh;
     background: #fff;
     padding: 10px;
     overflow-x: auto;
     position: relative;
     transition: all var(--transition-duration);
     display: flex;
     flex-direction: column;
}
 .toggle-buttons {
     display: flex;
     justify-content: space-between;
     gap: 10px;
     margin-bottom: 25px;
}
 .search-icon {
     position: absolute;
     left: 10px;
     top: 44%;
     transform: translateY(-50%);
     font-size: 18px;
     color: #888;
}
 .toggle-button-status {
    /*flex: 1;
     */
     text-align: center;
     padding: 8px 15px;
     border-radius: 4px;
     cursor: pointer;
     font-weight: bold;
     border: 0px solid #ccc;
     background: #f9f9f9;
     font-weight: 500;
     color: #fff;
     transition: background 0.3s;
     background: #136405;
}
 .toggle-button-status.active.in-progress {
     background: #f1b800;
     color: #000;
     border-color: #f1b800;
}
 .toggle-button-status.active.resolve {
     background: #2e7d32;
     color: #fff;
     border-color: #2e7d32;
}
 .top-controls {
     display: flex;
     justify-content: space-between;
     position: relative;
     align-items: center;
     flex-wrap: wrap;
     gap: 10px;
}
 .top-controls .search-input {
     padding: 8px;
     border: 1px solid #D7D9E0;
     border-radius: 9px;
     padding-left: 33px;
     outline: none;
     flex: 1;
     width: 300px;
}
/* Hide the default checkbox */
 input[type="checkbox"] {
     display: none;
}
/* Style the custom checkbox */
 input[type="checkbox"] + label {
     position: relative;
     display: inline-block;
     width: 22px;
     height: 22px;
     border-radius: 3px;
     background-color: #fff;
     border: 2px solid #000;
     cursor: pointer;
    /* transition: background-color 0.3s, border-color 0.3s;
     */
}
/* Add the checkmark */
 input[type="checkbox"]:checked + label::after {
     content: "✔";
     position: absolute;
     top: 0px;
     left: 4px;
     width: 12px;
     height: 12px;
     border-radius: 3px;
     color: #ffff;
}
/* Change background and border color when checkbox is checked */
 input[type="checkbox"]:checked + label {
     background-color: green;
     border-color: green;
}
/* Hover effect */
/* input[type="checkbox"]:hover + label {
     border-color: #4CAF50;
}
 */
 .top-controls .excel-button {
     background: none;
     border: none;
     color: #fff;
     padding:8px 12px;
     border-radius: 4px;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 6px;
     font-weight: 600;
     color: #000;
}
/* Add these styles for fixed header */
 thead th {
     position: sticky;
     top: 0;
     background: #f9f9f9;
     z-index: 2;
}
 .container {
    height: 100%;
}
 footer.footer {
     background: #fff;
     justify-content: end;
     align-items: center;
     padding: 20px 30px;
     display: flex;
     width: 100%;
     text-align: right;
     border-top: 1px solid #ddd;
    /* background: #fff;
     border-top: 1px solid #ddd;
     padding: 10px 20px;
     display: flex;
     justify-content: center;
     */
}
/* .footer-content {
     max-width: 1200px;
     width: 100%;
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: 0.9em;
     color: #555;
}
 .footer-left, .footer-center, .footer-right {
     display: flex;
     align-items: center;
     gap: 8px;
}
 .footer-center .page-link {
     padding: 4px 8px;
     border: 1px solid #ccc;
     border-radius: 4px;
     cursor: pointer;
}
 .footer-center .page-link:hover {
     background: #eee;
}
 */



 
.read-more, .read-less {
    color: #007bff;
    cursor: pointer;
    display: block;
}
 @media (max-width: 768px) {
     .container {
         flex-direction: column;
    }
     aside.sidebar {
         position: absolute;
         z-index: 20;
         height: 100%;
         transform: translateX(-100%);
    }
     aside.sidebar.show {
         transform: translateX(0);
    }
     main.main {
         flex: none;
    }
}