body {
     padding: .3rem;
     margin: 0;
     background: white;

 }

 * {
     font-family: 'Noto Sans';
 }

 .alert {
     margin-bottom: 0 !important;
 }

 .alert ul {
     margin-bottom: 0 !important;
 }


 .sidebar {
     width: 250px;
     padding: 49px 23px;
     background: white !important;
 }

 .sidebar a {
     font-size: 16px;
     display: block;
     margin-bottom: 20px;
     padding: .8rem 1.4rem;
     border-radius: 10px;
     text-decoration: none;
     width: 100% !important;
     display: flex;
     justify-content: flex-start;
     align-items: center;
 }

 .dashboard-header {
     padding: 20px;
 }

 .announcement,
 .overview-card {
     background-color: #FFFFFF;
     border-radius: 8px;
     padding: 20px;
     box-shadow: 0px 0px 20px rgb(244 244 244) !important;
     border: none !important;
 }




 .overview-card h3 {
     font-size: 20px;
     color: #E94E4E;
 }

 .metric {
     font-size: 24px;
     font-weight: bold;
     color: #333;
 }

 .metric-change {
     color: #4CAF50;
     font-size: 14px;
 }

 .main-content {
      background: #fcfcfc;
     padding: 49px 107px;
     width: 100%;
     border-radius: 5px;
     min-height: 100vh;
 }

 .sidebar a:hover {
     background-color: var(--bs-primary);
     color: white !important;
     fill: white !important;
 }

 .sidebar a:hover svg path {
     color: white !important;
     fill: white !important;
 }

 .sidebar a svg {
     width: 20px;
     height: 20px;
     margin-right: 6px;
 }


 .announcement-card {
     position: relative;
     padding: 3rem;
     background-color: #fff;
     border-radius: 10px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }


 .announcement-card .icon-container {
     position: absolute;
     top: 50%;
     right: 20px;
     transform: translateY(-50%);
 }

 .announcement-card .icon-container img {
     width: 140px;
 }

 .header {
     display: flex;
     flex-wrap: wrap;
     /* Enables stacking for small screens */
     justify-content: space-between;
     align-items: center;
     padding: 10px 20px;
     background:white !important;
     border-bottom: 1px solid #eaeaea;
 }

 .header .logo {
     display: flex;
     align-items: center;
     color: var(--bs-primary);
     font-size: 1.5rem;
     font-weight: 600;
 }

 .header .logo img {
     width: 50px;
     margin-right: 8px;
 }

 .header .info {
     display: flex;
     align-items: center;
     /* Aligns items to the right */
     gap: 0.5rem;
 }

 .header .revenue {
     font-size: 1rem;
     color: #333;
     margin-right: 2vw;
 }

 .header .user-info {
     display: flex;
     align-items: center;
     gap: 0.5rem;
 }

 .header .dropdown-toggle::after {
     margin-left: 0.5rem;
 }


 .sidebar-active {
     color: white;
     background-color: var(--bs-primary);
 }

 .sidebar-active svg path {
     color: white;
     fill: white;
 }

 .overview-card {
     border: 1px solid #eaeaea;
     border-radius: 8px;
     background-color: #fff;
     padding: 0px;
 }

 .overview-header {
     padding: 19px;
 }

 .overview-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 66px;
     border-bottom: 1px solid #c5c5c5;
     padding-bottom: 12px;
     padding-top: 12px;
 }

 .stat {
     text-align: left;
     padding: 78px 5px;
     padding-top: 29px;
 }


 #stats-overview {
     padding-right: 66px;
     padding-left: 66px;
 }

 .stat h4 {
     color: #1d1e2c;
     font-size: 1.5rem;
     font-weight: 600;
     margin: 0;
 }

 .stat small {
     color: #55da73;
     font-weight: bold;
 }

 .revenue-card {
     border: 1px solid #eaeaea;
     border-radius: 8px;
     padding: 20px;
     background-color: #fff;
 }


 .stat h4 {
     font-size: 2.2rem;
 }

 .revenue-card h5 {
     font-size: 1rem;
     font-weight: 400;
     margin-bottom: 10px;
 }

 .revenue-card h4 {
     font-size: 1.5rem;
     font-weight: 600;
 }


 .date-picker-container {
     display: inline-flex;
     align-items: center;
     border: 1px solid #ccc;
     border-radius: 5px;
     padding: 5px 10px;
     font-family: Arial, sans-serif;
     width: fit-content;
 }

 /* Hide default date picker icon */
 .date-picker-input::-webkit-calendar-picker-indicator {
     opacity: 0;
     position: absolute;
     right: 10px;
     cursor: pointer;
 }

 /* Calendar icon styling */
 .date-picker-icon {
     width: 16px;
     height: 16px;
     margin-right: 8px;
     color: #333;
 }

 /* Date input styling */
 .date-picker-input {
     border: none;
     outline: none;
     font-size: 16px;
     color: #333;
     cursor: pointer;
     appearance: none;
     /* Removes default appearance */
 }

 /* Dropdown arrow styling */
 .date-picker-arrow {
     margin-left: 8px;
     font-size: 12px;
     color: #333;
 }



 /* Sidebar visibility on larger screens */
 @media (min-width: 768px) {
     .sidebar {
         transform: translateX(0);
     }
 }

 /* Sidebar collapsible on small screens */
 @media (max-width: 767px) {
     .sidebar {
         width: 250px;
         position: fixed;
         top: 0;
         left: -250px;
         height: 100%;
         z-index: 1050;
         transition: transform 0.3s ease;
         background: white;
     }

     .sidebar.show {
         transform: translateX(250px);
         /* Sidebar slides in */
     }

     .main-content {
         margin-left: 0;
         padding: 20px;
     }
 }

 /* Hamburger menu button */
 .hamburger {
     display: none;
     font-size: 1.5rem;
     cursor: pointer;
     position: fixed;
     top: 20px;
     left: 20px;
 }


 .info-card {
     background-color: var(--bs-primary);
     color: white;
     border-radius: 10px;
     padding: 1.5rem;
     margin-top: 2rem;
     margin-bottom: 2rem;

 }

 .balance-table {
     border-radius: 10px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     overflow: hidden;
 }

 .balance-table th {
     color: #6c757d;
     font-weight: 500;
     padding: 1rem;
 }

 .balance-table td {
     font-size: 2rem;
     color: #0d1530;
     font-weight: bold;
 }

 .payment-method {
     display: flex;
     align-items: center;
 }

 .payment-method p {
     font-weight: bold;
     margin-top: 15px;
 }


 @media only screen and (max-width: 888px) {
     .paymentMethodCont {
         display: flex;
         flex-direction: column;
     }

     .payment-method {
         width: 100%;
     }
 }


 .form-label {
     color: var(--bs-secondary);
     font-weight: 600;
 }

 .form-section {
     background: white;
     padding: 20px;
     border-radius: 10px;
     box-shadow: 0px 0px 20px rgb(244 244 244) !important;
 }

 .section-title {
     color: var(--bs-primary);
     font-weight: bold;
 }

 .billing-table th,
 .billing-table td {
     border: none;
 }

 .billing-section {
     background: #f8f9fa;
     padding: 20px;
     border-radius: 10px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }

 .table th {
     border-top: none;
     color: #6c757d;
     font-weight: bold;
 }

 .table td {
     border-top: none;
 }

 .balance-info {
     font-weight: bold;
     color: #000;
 }

 .btn-unpaid {
     background-color: #d9534f;
     color: white;
     border: none;
     padding: 5px 15px;
     border-radius: 5px;
     font-weight: bold;
 }

 .section-title {
     color: #d9534f;
     font-weight: bold;
     margin-bottom: 10px;
 }

 .accordion-header {
     background: white !important;
     border: none;
 }

 input {
     border: 2px solid gray;
     background: white !important;
 }




 textarea {
     background: white !important;
 }

 .copy-btn {
     color: #1481ff;
     font-weight: bold;
     display: flex;
     align-items: center;
 }

 .copy-btn svg {
     margin-right: 3px;
 }



 .revenue-card {
     padding: 38px;

     border-radius: 8px;
     box-shadow: 0px 0px 20px rgb(244 244 244) !important;
     border: none !important;
 }

 .announcement-card {
     padding: 38px;
     border-radius: 8px;
     box-shadow: 0px 0px 20px rgb(244 244 244) !important;
     border: none !important;
 }

 .balance-table {
     border-radius: 8px;
     box-shadow: 0px 0px 20px rgb(244 244 244) !important;
     border: none !important;
 }

 .balance-table * {
     background: white !important;
 }



 .flex-grow-1 {
     width: 70%;
     display: flex;
     justify-content: space-between;
 }

 .notification-dropdown {
     width: 300px;
 }

 .notification-item {
     padding: 10px;
     border-bottom: 1px solid #ddd;
 }

 .notification-item:last-child {
     border-bottom: none;
 }

 .notification-dropdown {
     right: auto;
     left: 0;
 }


 .drp-img {
     width: 39px;
     margin-right: 8px;

 }

 .bg-light2 {
     display: flex;
     flex-direction: column;
     padding: 2px 15px;

 }

 .form-select {
     padding: .75rem 2.25rem 0.7rem 0.75rem !important;
 }


 .notification-dot {
     position: absolute;
     top: 7px;
     right: 13px;
     width: 13px;
     height: 13px;
     background-color: green;
     border-radius: 50%;
     border: 2px solid white;
     transform: translate(50%, -50%);
 }

 .dropdown.show .notification-dot {
     display: block;
 }


 /* Default: show full text, hide short text */
 .full-text {
     display: inline;
 }

 .short-text {
     display: none;
 }

 @media only screen and (max-width: 888px) {

     .hamburger {
         display: block;
     }

     .header {
         justify-content: center !important;
     }

     .logo {
         margin-bottom: 5vh;
         font-size: 1.3rem !important;
     }

     .logo img {
         width: 40px !important;
     }

     .revenue {
         font-size: .8rem !important;
     }


     .sidebar {
         position: fixed;
         left: -250px;
         width: 250px;
         height: 100%;
         background-color: #fff;
         transition: left 0.3s ease;
         overflow-y: auto;
     }

     .sidebar.active {
         left: 0;
     }

     .userName {
         font-size: .8rem !important;
     }

     .full-text {
         display: none;
     }

     .short-text {
         display: inline !important;
     }

     .payment-method {
         align-items: center !important;
     }

     .overview-header {
         padding: 10px;
         display: flex;
         flex-direction: column;
     }

     .overview-header h5 {
         margin-bottom: 3vh !important;
     }


 }