.header {
    background-color: #fff;
    border-radius: 10px;
    padding: 15px 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header h1 {
    margin: 0;
    font-size: 18px;
    color: #333;
}
.header .date {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
}
.header .profile-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #ddd; /* Placeholder for profile image */
    overflow: hidden;
}
.header .profile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.welcome-header {
    padding: 10px 20px;
    border-radius: 5px;
}

.welcome-header h1 {
    margin: 0;
    font-size: 24px;
    color: #00b4d8; /* Cyan color for "Welcome, John" */
}

.welcome-header p {
    margin: 5px 0 0;
    font-size: 14px;
    color: #666; /* Gray color for the date */
}

.profile-card {
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 5px;
}

.profile-image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 15px;
}

.profile-info {
    flex-grow: 1;
}

.profile-info h2 {
    margin: 0;
    font-size: 18px;
    color: #333;
}

.profile-info p {
    margin: 0;
    font-size: 14px;
    color: #666;
}

.dropdown-arrow {
    font-size: 12px;
    color: #666;
}

.content {
    margin-left: 250px;
    flex-grow: 1;
    padding: 20px;
}
.profile-section {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.profile-section img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #ddd;
    margin-bottom: 10px;
}
.profile-section p {
    margin: 5px 0;
    color: #666;
    font-size: 14px;
}
.nav-tabs .nav-link {
    color: #666;
    font-size: 14px;
}
.nav-tabs .nav-link.active {
    color: #007bff;
    border-bottom: 2px solid #007bff;
    background-color: transparent;
}
.tab-content {
    margin-top: 20px;
}
.add-rate-btn {
    background: none;
    border: none;
    color: #007bff;
    cursor: pointer;
    padding: 0;
    font-size: 14px;
}



.table-header {
    background-color: #fff;
    border-radius: 10px 10px 0 0;
    padding: 15px 20px;
    margin-bottom: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.table-container {
    background-color: #fff;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 20px;
}
.table th {
    background-color: #f8f9fa;
    color: #666;
    font-size: 14px;
    border: none;
}
.table td {
    vertical-align: middle;
    border: none;
    font-size: 14px;
    color: #333;
}
.table tr {
    background-color: #fff;
}
.table tr:nth-child(even) {
    background-color: #f8f9fa;
}
.action-btn {
    border-radius: 20px;
    padding: 5px 15px;
    font-size: 12px;
    border: none;
    cursor: pointer;
    display: inline-block;
}
.manage-btn {
    background-color: #00b4d8;
    color: white;
}
.manage-btn:hover {
    background-color: #0096c7;
}
.archive-btn {
    background-color: #f4a261;
    color: white;
}
.archive-btn:hover {
    background-color: #e76f51;
}
.dropdown-toggle::after {
    display: none;
}
/* Custom styling for search and add button */
.search-container {
    display: flex;
    align-items: center;
}
.search-container label {
    margin:0 10px 0 0;
    font-size: 14px;
    color: #333;
}
.search-container input {
    border-radius: 20px;
    border: 1px solid #ccc;
    padding: 5px 10px;
    font-size: 14px;
    width: 200px; /* Adjust as needed */
}
.add-customer-btn {
    background-color: #00b4d8;
    border: none;
    border-radius: 20px;
    padding: 5px 15px;
    color: white;
    font-size: 14px;
    cursor: pointer;
}
.add-customer-btn:hover {
    background-color: #0096c7;
}
/* DataTables custom styling */
.dataTables_filter {
    display: none; /* Hide default DataTables search box */
}

.company-image {
    width: 30px; /* Adjust size as needed */
    height: 30px; /* Adjust size as needed */
    border-radius: 50%; /* Makes the image circular */
    margin-right: 10px; /* Space between image and text */
    vertical-align: middle; /* Aligns image with text */
}

.sidebar {
    width: 250px;
    background-color: #fff;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    padding: 20px 0;
    position: fixed;
    height: 100vh;
    z-index: 1;
}
.sidebar .logo {
    /* font-size: 24px; */
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 20px;
}
.sidebar .nav-item {
    /* padding: 15px 20px; */
    color: #666;
    font-size: 14px;
}
.sidebar .nav-item.active {
    background-color: #e3f2fd;
    color: #007bff;
}
.sidebar .nav-item i {
    margin-right: 10px;
    color: #00b4d8;
}
.sidebar .nav-item:hover {
    background-color: #f0f8ff;
    color: #007bff;
    cursor: pointer;
}






.form-control {
    border-radius: 4px;
    border: 1px solid #ddd;
}

.form-label {
    font-weight: 600;
    color: #333;
}

.btn-primary {
    background-color: #00b4d8; 
    border-color: #00b4d8;
    color: #fff;
}

.btn-primary:hover {
    background-color: #00a1c2;
    border-color: #00a1c2;
}

.invalid-feedback {
    display: none;
}

.needs-validation .invalid-feedback {
    display: block;
}

.needs-validation .form-control:invalid {
    border-color: #dc3545;
    background-image: none;
}



.c-login-box { border-radius: 20px; box-shadow: 0 0 30px 0 rgba(0,0,0,0.08); max-width: 460px;}
.c-login-box .login-box-header img { max-width: max-content; width: 50%; align-self:center; }
.c-login-box .login-box-header .form-title { color: #333539; font-weight: 800 !important; margin: 40px 0 0; text-align: left !important; }
.c-login-box .login-box-header p { text-align: left; color: #333539; margin-top: 20px; font-weight: 600;}
.c-login-box .login-box-header p a { color: #5DE2EC; }
.c-form-default label { color: #BDBCBC !important; font-size: 11px !important; }
.c-login-box__inner .c-form-default .form-control { border:0; border-radius:0; border-bottom:1px solid #D6D6D6;padding-top: 5px;padding-left: 0;color: #333539;}
.c-login-box .forgot-link a { color: #5DE2EC; text-decoration: none !important; }
.c-login-box .btn-submit { background: linear-gradient(to right,  rgba(93,193,236,1) 0%,rgba(93,225,236,1) 99%); border-radius: 35px; }

.content { padding: 0; position: relative; height: 100vh; background: #fafafa; }
.header { border-radius: 0; box-shadow: 0 0 0 rgba(0, 0, 0, 0); background:#fafafa ; }
.profile-card { background-color: transparent; }
.profile-card .profile-image { border: 2px solid #5DE2EC; }
.welcome-header h1 { color: #5DE2EC; font-weight: 600; }
.welcome-header p { color: #999999; font-size: 18px; }
.sidebar { padding: 25px 35px; box-shadow: 0 0 6px rgba(0, 0, 0, 0.04); }
.sidebar .logo { text-align: left; padding-left: 20px; }
.sidebar .nav-item:hover { background: transparent; }
.sidebar .nav-item.active, .sidebar .nav-item.active:hover, .sidebar .nav-item:hover { background: linear-gradient(to right,  rgba(93,193,236,1) 0%,rgba(93,225,236,1) 99%); border-radius: 35px; }
.sidebar .nav-item.active a, .sidebar .nav-item.active:hover a, .sidebar .nav-item:hover a {  color: #ffffff !important;filter: brightness(500%); }
.sidebar .nav-item a img { margin-right: 10px; }
.sidebar .nav-item a { color: #5DE2EC; display: block; padding: 15px 20px; }
.sidebar .nav-item { margin-bottom: 7px; }
.sidebar .bottomSideNav { position: absolute; bottom: 0; }

.table-header, .table-container { padding: 15px 15px; }
.table.dataTable { border-radius: 20px;box-shadow: 0 0 22px 3px rgba(0, 0, 0, 0.1); }
.table.dataTable thead, .table.dataTable thead tr { border-radius: 20px 20px 0 0; }
.table.dataTable thead tr th { background: #fff; }
.table.dataTable thead tr th:first-child { border-radius: 20px 0 0 0; }
.table.dataTable thead tr th:last-child { border-radius: 0 20px 0 0; }
.table.dataTable thead tr td:hover { background: #ebebeb !important; }
.table.dataTable tbody td { font-size: 17px; }
.table tr { padding: 8px 0; }
.table tr td { border-bottom: 1px solid #BBBBBB; }
.table tr:last-child td { border-bottom: 0; }
.table tr:nth-child(even) { background: #ffffff; }
.manage-btn { padding: 10px 25px; background: transparent; border: 1px solid #5DC1EC; color: #5DC1EC; }
.manage-btn:hover { background: #5DC1EC; color: #fff; }
.archive-btn { padding: 10px 25px; background: transparent; border: 1px solid #D96500; color: #D96500; }
.archive-btn:hover { background: #D96500; color: #fff; }
.add-customer-btn { border-radius: 50px;padding: 12px 35px;background: linear-gradient(to right, rgba(93, 193, 236, 1) 0%, rgba(93, 225, 236, 1) 99%); font-size: 18px;}
.table.dataTable .dropdown-toggle {float: right;transform: rotate(90deg);background: transparent; border: 0; }

.profile-section { text-align: center; }
.profile-section img { margin: 50px 0; }
.profile-section h2 { font-size: 18px; color: #444; }
.profile-section .subhead { padding-bottom: 22px; }
.profile-section p { display: flex; justify-content: space-between; margin: 15px 0; }
.profile-section .add-rate-btn { color: #c5c5c5; }
.profile-section-right { text-align: left; }


.formarae { background: #fff; box-shadow: 0 0 15px 0 rgba(0,0,0,0.3); padding: 40px; border-radius: 25px; margin-bottom: 50px; }
.formarae h2 { font-size: 20px; }
.needs-validation .form-control { border: 1px solid #9e9e9e; border-radius: 12px;}
.needs-validation .form-control:invalid { border: 1px solid #9e9e9e; border-radius: 12px;}
form.needs-validation .col-md-6, form.needs-validation .col-md-4, form.needs-validation .col-md-12{margin-bottom: 25px;}
.formarae button[type="submit"] { color: #fff; padding: 12px 35px; background: linear-gradient(to right, rgba(93, 193, 236, 1) 0%, rgba(93, 225, 236, 1) 99%); border-radius: 25px; }

/*Payment Page CSS Starts */

.leftPaymentInfo {
    float: left;
    width: 48%;
    /* max-width: 500px; */
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background-color: #f9f9f9;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}

.rightPaymentInfo{
    float: right;
    /* max-width:400px; */
    width: 49%;
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background-color: #f9f9f9;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}

.StripeElement {
    box-sizing: border-box;
    height: 48px;
    padding: 12px 16px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: white;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    font-size: 16px;
}

.StripeElement--focus {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.StripeElement--invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

.payButton{
   margin-top: 20px;
   /* background-color: #007bff; */
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    background: linear-gradient(to right, rgba(93, 193, 236, 1) 0%, rgba(93, 225, 236, 1) 99%);
    transition: 0.3s ease;
}  



.payButton:hover {
    /* background-color: #0056b3; */
    background: linear-gradient(to right, rgba(93, 225, 236, 1) 99%, rgba(93, 193, 236, 1) 0%);
}

#card-errors {
    margin-top: 8px;
    color: #dc3545;
    font-size: 14px;
}

input[type="email"] {
    height: 44px;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 16px;
    width: 100%;
    margin-bottom: 15px;
}

.stripe-input {
  margin-bottom: 16px;
}

.stripe-input .StripeElement {
  box-sizing: border-box;
  height: 48px;
  padding: 12px 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: white;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  font-size: 16px;
}

.stripe-input .StripeElement--focus {
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.stripe-input .StripeElement--invalid {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

#loader {
  display: none;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7) url('https://i.imgur.com/LLF5iyg.gif') center center no-repeat;
}

/*Payment Page CSS Ends */


.user-status-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between links and separator */
    padding: 10px;
    font-family: Arial, sans-serif;
}

.user-status-container a {
    text-decoration: none;
    color: #333;
    font-size: 16px;
    padding: 10px 15px;
    transition: color 0.3s ease;
}

/* .user-status-container a.active {
    color: #007bff; /* Highlight color for active link 
    font-weight: bold;
} */


/* .user-status-container a:hover {
    color: #0056b3; /* Hover color 
} */

/* Create the vertical bar partition */
/* .user-status-container a:not(:last-child)::after {
    content: "|";
    margin-left: 10px;
    color: #666; /* Color of the separator 
    font-weight: normal;
} */

.user-status-container a.active, .user-status-container a:hover {
    color: #fff;
    background: linear-gradient(to right,  rgba(93,193,236,1) 0%,rgba(93,225,236,1) 99%);
    border-radius: 30px;
    padding: 10px 15px;
}
/* ========== 20-04 ========== */

.pagination .paginate_button.page-item.active a.page-link {
    background: #5DE2EC;
    color: #fff;
    border-color: #5DE2EC;
}
.pagination .page-item.disabled a.page-link {
    border: 1px solid rgba(93, 226, 236, 0.20);
    color: #5DE2EC;
}
.btn {
    font-size: 14px;
    border-radius: 30px;
    font-weight: 600;
    border-color: transparent;
    padding: 10px 15px;
}
.btn-outline-primary:not(:disabled):not(.disabled).active, 
.btn-outline-primary:not(:disabled):not(.disabled):active, 
.show>.btn-outline-primary.dropdown-toggle, 
.btn-outline-primary:hover {
    color: #fff;
    background-color: #5de0ec;
    border-color: #5de0ec;
}
.btn-outline-primary {
    color: #007bff;
    border-color: #5DE2EC;
}
.btn-secondary{
    background: linear-gradient(to right,  rgba(93,193,236,1) 0%,rgba(93,225,236,1) 99%);
}
.btn-outline-danger {
    color: #dc3545;
    border-color: #dc3545;
}

#add-rate-btn {
    width: 150px;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {
    top: 50%;
    left: 5px;
    height: 1em;
    width: 1em;
    margin-top: -9px;
    display: block;
    position: absolute;
    color: white;
    border: .15em solid white;
    border-radius: 1em;
    box-shadow: 0 0 .2em #444;
    box-sizing: content-box;
    text-align: center;
    text-indent: 0 !important;
    font-family: "Courier New",Courier,monospace;
    line-height: 1em;
    content: "+";
    background-color: #5DE2EC;
}
div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm) {
    border: 0;
    border-radius: .25em;
    background: initial;
    background-color: #5DE2EC !important;
    color: #fff;
    font-size: 1em;
}
div:where(.swal2-container) h2:where(.swal2-title) {
    position: relative;
    max-width: 100%;
    margin: 0;
    padding: .8em 1em 0;
    color: inherit;
    font-size: 1.5em;
    font-weight: 600;
    text-align: center;
    text-transform: none;
    word-wrap: break-word;
    cursor: initial;
}
.sidebar-top {
    height: calc(100% - 115px);
    overflow-y: auto;
}