html {
  scroll-behavior: smooth;
}

.whm-login-message {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 15px;
    margin: 100px 0 300px;
    border-radius: 5px;
    font-size: 16px;
    text-align: center;
    max-width: 500px;
}

.admin-container {
    display: flex;
    min-height: calc(100vh - 32px);
    font-family: Arial, sans-serif;
    width: 100%;
}

.admin-container * {
    transition: 0.2s;
}

.admin-container a {
    text-decoration: none;
}

.admin-container .sidebar {
    width: 250px;
    background: #0c2d50;
    padding: 20px;
}

.admin-container .sidebar ul {
    list-style: none;
    padding: 0;
    position: sticky;
    top: 30px;
    margin: unset;
}

.admin-container .sidebar ul li {
    margin: 10px 0;
}

.admin-container .sidebar ul li a {
    text-decoration: none;
    color: #ffffff;
    display: block;
    padding: 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.admin-container .sidebar ul li a.active {
    background: #113d6c;
    color: #ffffff;
}

.admin-container .sidebar ul li a:hover {
    background: #007bff;
    color: #ffffff;
}

.admin-container .sidebar ul li a span.wphk-icon {
    width:20px;
    height:20px;
}

.admin-container .sidebar ul li a span.wphk-icon svg {
    width:20px;
    height:20px;
}

.admin-container .sidebar ul li:nth-child(1) a span.wphk-icon svg path {
    stroke:#ffffff !important;
}

.admin-container .sidebar ul li:nth-child(2) a span.wphk-icon svg path {
    fill:#ffffff !important;
}

.admin-container .sidebar ul li:nth-child(3) a span.wphk-icon svg g polygon:nth-child(1) {
    fill:#000000 !important;
}

.admin-container .sidebar ul li:nth-child(3) a span.wphk-icon svg g polygon:nth-child(2) {
    stroke:#ffffff !important;
}

.admin-container .sidebar ul li:nth-child(3) a span.wphk-icon svg line {
    stroke:#ffffff !important;
}

.admin-container .sidebar ul li:nth-child(4) a span.wphk-icon svg path {
    fill:#ffffff !important;
}

.admin-container .sidebar ul li:nth-child(5) a span.wphk-icon svg path {
    fill:#ffffff !important;
}

.admin-container .content {
    flex: 1;
    padding: 20px;
    background-color: #fafbff;
}

.admin-container .content h1 {
    color: #000000;
    font-weight: 400;
}

.admin-container .whm-nav {
    margin-bottom: 10px;
}

.admin-container .whm-nav .back.button {
    border-radius: 50px;
}

.admin-container .header {
    display: flex;
}

.admin-container .info {
    width: 70%;
}

.admin-container .action {
    width: 30%;
    text-align: right;
    padding-top: 10px;
}

.admin-container .content .searchable-dropdown {
    position: relative;
    width: 100%;
}

.admin-container .content .searchable-dropdown .dropdown-trigger {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    min-height: 40px;
}

.admin-container .content .searchable-dropdown .dropdown-display {
    flex: 1;
    border: none;
    outline: none;
    padding: 8px 12px;
    font-size: 14px;
    background: transparent;
    cursor: pointer;
}

.admin-container .content .searchable-dropdown input.dropdown-display {
    border: none !important;
}

.admin-container .content .searchable-dropdown .dropdown-search-container {
    padding: 8px;
    border-bottom: 1px solid #f0f0f0;
    background: #f9f9f9;
}

.admin-container .content .searchable-dropdown .dropdown-search {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 14px;
    outline: none;
    background: #fff;
}

.admin-container .content .searchable-dropdown .dropdown-arrow {
    padding: 8px 12px;
    color: #666;
    font-size: 12px;
    transition: transform 0.2s ease;
    pointer-events: none;
}

.admin-container .content .searchable-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}

.admin-container .content .searchable-dropdown .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    display: none;
}

.admin-container .content .searchable-dropdown.open .dropdown-menu {
    display: block;
}

.admin-container .content .searchable-dropdown .dropdown-option {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;
}

.admin-container .content .searchable-dropdown .dropdown-option:hover {
    background-color: #f5f5f5;
}

.admin-container .content .searchable-dropdown .dropdown-option.selected {
    background-color: #007cba;
    color: #fff;
}

.admin-container .content .searchable-dropdown .dropdown-option:last-child {
    border-bottom: none;
}

.admin-container .content .searchable-dropdown .dropdown-no-results {
    padding: 12px;
    text-align: center;
    color: #666;
    font-style: italic;
}

/* Focus states */
.admin-container .content .searchable-dropdown .dropdown-trigger:focus-within {
    border-color: #007cba;
    box-shadow: 0 0 0 1px #007cba;
}

.admin-container .content .searchable-dropdown .dropdown-display:focus {
    outline: none;
}

.admin-container .content button, .admin-container .content .button {
  appearance: none;
  background-color: #FAFBFC;
  border: 1px solid rgba(27, 31, 35, 0.15);
  border-radius: 6px;
  box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
  box-sizing: border-box;
  color: #24292E;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  list-style: none;
  padding: 6px 16px;
  position: relative;
  transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
  white-space: nowrap;
  word-wrap: break-word;
}

.admin-container .content button:hover, .admin-container .content .button:hover {
  background-color: #F3F4F6;
  text-decoration: none;
  transition-duration: 0.1s;
}

.admin-container .content button:disabled, .admin-container .content .button:disabled {
  background-color: #FAFBFC;
  border-color: rgba(27, 31, 35, 0.15);
  color: #959DA5;
  cursor: default;
}

.admin-container .content button:active, .admin-container .content .button:active {
  background-color: #EDEFF2;
  box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 inset;
  transition: none 0s;
}

.admin-container .content button:focus, .admin-container .content .button:focus {
  outline: 1px transparent;
}

.admin-container .content button:before, .admin-container .content .button:before {
  display: none;
}

.admin-container .content button:-webkit-details-marker, .admin-container .content .button:-webkit-details-marker {
  display: none;
}

.admin-container .content table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.admin-container .content table thead tr {
    background-color: #113d6c;
    color: #ffffff;
    text-align: left;
    border: unset;
}

.admin-container .content table th, .admin-container .content table td {
    padding: 20px 5px;
    border: unset;
}

.admin-container .content table td button.save-mapping {
    margin-right: 10px;
}

.admin-container .content table tbody tr {
    border-bottom: 1px solid #f1f1f1;
    border: unset;
}

.admin-container .content tr th:first-child {
    padding: 20px 5px 20px 20px;
}

.admin-container .content tr th:last-child {
    padding: 20px 15px 20px 5px;
}

.admin-container .content tr td:first-child {
    padding: 20px 5px 20px 15px;
  font-weight:700;
}

.admin-container .content tr td:last-child {
    padding: 20px 15px 20px 5px;
  text-align: right;
}

.admin-container .content table tbody tr {
    border-left: 2px solid #ffffff;
}

.admin-container .content table tbody tr:nth-of-type(even) {
    background-color: #ffffff;
}

.admin-container .content button.suspend-account {
    background-color: #ed6b6b;
    color: #ffffff;
    border-color: #e95959;
}

.admin-container .content button.reactivate-account {
    background-color: #57cd91;
    color: #ffffff;
    border-color: #4bbb82;
}

.admin-container .content button.login-to-cpanel:hover {
    background-color: #ff6c2c;
    color: #ffffff;
    border-color: #ff6c2c;
}

.admin-container .status {
    background: #f0f0f0;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 14px;
}

.admin-container .status-active .status {
    background-color: #009879;
    color: #ffffff;
}

.admin-container .status-completed .status {
    background-color: #009879;
    color: #ffffff;
}

.admin-container .status-suspended .status {
    background-color: #d75e2e;
    color: #ffffff;
}

.admin-container .status-pending .status {
    background-color: #d75e2e;
    color: #ffffff;
}

.admin-container .status-on-hold .status {
    background-color: #d75e2e;
    color: #ffffff;
}

.admin-container .status-cancelled .status {
    background-color: #df4343;
    color: #ffffff;
}

.admin-container .status-online .status {
    background-color: #009879;
    color: #ffffff;
}

.admin-container .status-offline .status {
    background-color: #df4343;
    color: #ffffff;
}

.admin-container .status-wc-pending .status {
    background-color: #d75e2e;
    color: #ffffff;
}

.admin-container .status-wc-on-hold .status {
    background-color: #d75e2e;
    color: #ffffff;
}

.admin-container .status-wc-completed .status {
    background-color: #009879;
    color: #ffffff;
}

.admin-container span.status-active {
    background-color: #009879 !important;
    color: #ffffff;
}

.admin-container span.status-suspended {
    background-color: #d75e2e !important;
    color: #ffffff;
}

.admin-container span.status-cancelled {
    background-color: #df4343 !important;
    color: #ffffff;
}

.admin-container span.status-offline {
    background-color: #df4343 !important;
    color: #ffffff;
}

.admin-container span.status-not-on-server {
    background-color: #df4343 !important;
    color: #ffffff;
}

.admin-container span.status-api-down {
    background-color: #6a6a6a !important;
    color: #ffffff;
}

.admin-container span.status-pending {
    background-color: #d75e2e !important;
    color: #ffffff;
}

.admin-container span.status-on-hold {
    background-color: #d75e2e !important;
    color: #ffffff;
}

.admin-container span.status-on.hold {
    background-color: #d75e2e !important;
    color: #ffffff;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 14px;
}

.admin-container span.status-completed {
    background-color: #009879 !important;
    color: #ffffff;
}

.admin-container #form-message .error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 0px 5px;
    border-radius: 5px;
    text-align: center;
}

.admin-container #form-message .success {
    background-color: #d7f8ed;
    color: #1c725e;
    border: 1px solid #c6f5d7;
    padding: 0px 5px;
    border-radius: 5px;
    text-align: center;
}


/* ================ DASHBOARD =============== */


#dashboard .system-status {
    margin-top: 20px;
}

#dashboard .status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

#dashboard .status-card {
    background-color: #ffffff;
    border-radius: 16px;
    font-size: 16px;
    box-shadow: 0px 5px 15px -2px rgb(0 0 0 / 15%);
}

#dashboard .status-card:hover {
    transform: translateY(-5px);
}

#dashboard .status-card:hover span {
    color:#ffffff;
}

#dashboard .card-info {
    padding: 25px;
}

#dashboard .status-card p {
    font-size: 20px;
    font-weight: bold;
    color:#ffffff;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    font-family: monospace;
    display: flex;
    align-items: center;
    justify-content: center;
}

#dashboard .status-card h3 {
    margin-bottom: 10px;
    font-size: 18px;
    text-align: left;
    color: #000000;
}

#dashboard .status-card span {
    display: block;
    max-width: 100%;
    background-color: #113d6c;
    padding: 15px 25px;
    border-radius: 0px 0px 15px 15px;
    font-size: 12px;
    color: rgb(255 255 255 / 70%);
}

#dashboard .subscriptions p {
    background-color: #007bff;
}

#dashboard .products p {
    background-color: #d19562;
}

#dashboard .orders p {
    background-color: #4cc3b2;
}

#dashboard .servers p {
    background-color: #8584cd;
}

#dashboard .content section.subscriptions, #dashboard .content section.products, #dashboard .content section.orders, #dashboard .content section.servers {
    background-color: #ffffff;
    padding: 25px;
    box-shadow: 0px 5px 15px -2px rgb(0 0 0 / 15%);
    border-radius: 16px;
    margin-top: 30px;
}

#dashboard .content section h2 {
    font-size: 14px;
    font-weight: 400;
    color: #9b9b9b;
    margin: 0px;
    position: relative;
    padding-left: 17px;
}

#dashboard .content section h2:before {
    content: "";
    width: 12px;
    height: 12px;
    position: absolute;
    border-radius: 3px;
    top: 3px;
    left: 0px;
}

#dashboard .content .subscriptions h2:before {
    background-color: #007bff;
}

#dashboard .content .products h2:before {
    background-color: #d19562;
}

#dashboard .content .orders h2:before {
    background-color: #4cc3b2;
}

#dashboard .content .servers h2:before {
    background-color: #8584cd;
}

#dashboard .content section .cards-container {
    display: flex;
    gap: 20px;
    margin-top: 15px;
}

#dashboard .content section .cards-container .card {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#dashboard .content section .subscriptions-content .card {
    width: calc(33.33% - 10px);
    background-color: #f3f6fd;
    border-radius: 12px;
    padding: 25px;
}

#dashboard .content section .products-content .card {
    width: calc(25% - 10px);
    background-color: #f3f6fd;
    border-radius: 12px;
    padding: 25px;
}

#dashboard .content section .orders-content .card {
    width: calc(25% - 10px);
    background-color: #f3f6fd;
    border-radius: 12px;
    padding: 25px;
}

#dashboard .content section .servers-content .card {
    width: calc(50% - 10px);
    background-color: #f3f6fd;
    border-radius: 12px;
    padding: 25px;
}

#dashboard .content section .servers-content .card .server {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

#dashboard .content section .subscriptions-content .card div:last-child, #dashboard .content section .products-content .card div:last-child, #dashboard .content section .orders-content .card div:last-child {
    font-size: 20px;
    font-weight: bold;
    color: #000000;
    width: 40px;
    height: 40px;
    border-radius: 50px;
    font-family: monospace;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #dfe5f5;
}


/* ================ SUBSCRIPTIONS =============== */

#manage-subscriptions .filters-bar {
    display: flex;
    background-color: #fafbff;
    gap: 20px;
    margin-top: 20px;
    border-radius: 8px;
}

#manage-subscriptions select {
    -webkit-appearance: none;
    border: 1px solid #d9dbdb;
    border-radius: 6px;
    background-color: #ffffff;
    width: 100%;
    max-width: 200px;
    line-height: 40px;
    outline: none;
    padding: 0 12px;
    box-shadow: none;
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, gray 0), linear-gradient(135deg, gray 50%, transparent 0);
    background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
    background-repeat: no-repeat;
    background-size: 4px 4px, 4px 4px;
}

#manage-subscriptions input {
    -webkit-appearance: none;
    border: 1px solid #d9dbdb;
    border-radius: 6px;
    background-color: #ffffff;
    width: 100%;
    max-width: 200px;
    line-height: 40px;
    outline: none;
    padding: 0 12px;
    box-shadow: none;
}

#manage-subscriptions .filters-bar .filters {
    width: calc(100% - 270px);
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: flex-end;
}

#manage-subscriptions .filters-bar .search {
    width: 250px;
    display: flex;
    gap: 5px;
    align-items: center;
}

#manage-subscriptions .filters-bar .search input {
    max-width: 100%;
    -webkit-appearance: none;
    border: 1px solid #d9dbdb;
    border-radius: 6px;
    background-color: #ffffff;
    width: 100%;
    max-width: 300px;
    line-height: 40px;
    outline: none;
    padding: 0 12px;
    box-shadow: none;
}

#manage-subscriptions .filters-bar .filter-form {
    display: flex;
    gap: 5px;
    width: 100%;
    max-width: 300px;
}

#manage-subscriptions .subscriptions-list .subscription {
    background-color: #ffffff;
    padding: 25px;
    box-shadow: 0px 5px 15px -2px rgb(0 0 0 / 15%);
    border-radius: 16px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#manage-subscriptions .subscriptions-list .subscription label {
    height: unset;
    padding: unset;
    margin: unset;
}

#manage-subscriptions .subscription-info {
    width: 30%;
}

#manage-subscriptions .sub-product,
#manage-subscriptions .sub-cycle,
#manage-subscriptions .sub-status {
    width: 10%;
}

#manage-subscriptions .sub-date {
    width: 15%;
}

#manage-subscriptions .actions-dropdown {
    width: 25%;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

#manage-subscriptions .subscriptions-header {
    display: flex;
    justify-content: space-between;
    padding: 10px 25px;
    margin-top: 10px;
    color: #ffffff;
    font-size: 14px;
    background-color: #113d6c;
    border-radius: 8px;
}

#manage-subscriptions .subscription .sub-user {
    font-size: 20px;
    color: #000000;
    display: flex;
    flex-direction: column;
    line-height: 1.4;
}

#manage-subscriptions .subscription .sub-user span {
    font-size: 14px;
    color: #7c7c7c;
}

#manage-subscriptions .subscription .sub-user .renewal-tag {
    background-color: #ea5e2b;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 4px;
    border-radius: 4px;
}


/* ================ ADD NEW SUBSCRIPTION =============== */

#add-new-subscription .new-subscription {
    background-color: #ffffff;
    padding: 25px;
    box-shadow: 0px 5px 15px -2px rgb(0 0 0 / 15%);
    border-radius: 16px;
    margin-top: 30px;
    width: 100%;
    max-width: 600px;
}

#add-new-subscription select {
    -webkit-appearance: none;
    border: 1px solid #d9dbdb;
    border-radius: 6px;
    background-color: #ffffff;
    width: 100%;
    line-height: 40px;
    outline: none;
    padding: 0 12px;
    box-shadow: none;
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, gray 0), linear-gradient(135deg, gray 50%, transparent 0);
    background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
    background-repeat: no-repeat;
    background-size: 4px 4px, 4px 4px;
}

#add-new-subscription input {
    border: 1px solid #d9dbdb;
    border-radius: 6px;
    background-color: #ffffff;
    width: 100%;
    line-height: 40px;
    outline: none;
    padding: 0 12px;
    box-shadow: none;
}

#add-new-subscription .new-subscription h2 {
    font-size: 14px;
    font-weight: 400;
    color: #9b9b9b;
    margin: 20px 0px 10px;
    position: relative;
}

#add-new-subscription .inline-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

#add-new-subscription .form-group {
    margin-top: 10px;
}

#add-new-subscription .user {
    margin-top: 0px;
}

#add-new-subscription .billing-cycle .cycle-options {
    display: flex;
    gap: 10px;
}

#add-new-subscription .billing-cycle label {
    width: calc(50% - 10px);
    display: flex;
    align-items: center;
    background-color: #dfe5f5;
    padding: 10px 20px;
    border-radius: 8px;
    color: #000000;
    gap: 10px;
}

#add-new-subscription .billing-cycle label input[type=radio] {
    width: 13px;
}

#add-new-subscription .recurring {
    margin-top: 0px;
}

#add-new-subscription .recurring label {
    display: flex;
    align-items: center;
    padding: 10px 0px;
    border-radius: 8px;
    color: #000000;
    gap: 10px;
}

#add-new-subscription .recurring label input[type=checkbox] {
    width: 20px;
    height: 20px;
}

#add-new-subscription .submit button{
    width: 100%;
    text-align: center;
    height: 50px;
}


/* ================ EDIT SUBSCRIPTION =============== */

#edit-subscription .edit-subscription {
    background-color: #ffffff;
    padding: 25px;
    box-shadow: 0px 5px 15px -2px rgb(0 0 0 / 15%);
    border-radius: 16px;
    margin-top: 30px;
    width: 100%;
    max-width: 600px;
}

#edit-subscription select {
    -webkit-appearance: none;
    border: 1px solid #d9dbdb;
    border-radius: 6px;
    background-color: #ffffff;
    width: 100%;
    line-height: 40px;
    outline: none;
    padding: 0 12px;
    box-shadow: none;
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, gray 0), linear-gradient(135deg, gray 50%, transparent 0);
    background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
    background-repeat: no-repeat;
    background-size: 4px 4px, 4px 4px;
}

#edit-subscription input {
    border: 1px solid #d9dbdb;
    border-radius: 6px;
    background-color: #ffffff;
    width: 100%;
    line-height: 40px;
    outline: none;
    padding: 0 12px;
    box-shadow: none;
}

#edit-subscription .edit-subscription h2 {
    font-size: 14px;
    font-weight: 400;
    color: #9b9b9b;
    margin: 20px 0px 10px;
    position: relative;
}

#edit-subscription .inline-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

#edit-subscription .form-group {
    margin-top: 10px;
}

#edit-subscription .user {
    margin-top: 0px;
}

#edit-subscription .whm-account-details input#whm-pass {
    margin-top: 10px;
}

#edit-subscription .billing-cycle .cycle-options {
    display: flex;
    gap: 10px;
}

#edit-subscription .billing-cycle label {
    width: calc(50% - 10px);
    display: flex;
    align-items: center;
    background-color: #dfe5f5;
    padding: 10px 20px;
    border-radius: 8px;
    color: #000000;
    gap: 10px;
}

#edit-subscription .billing-cycle label input[type=radio] {
    width: 13px;
}

#edit-subscription .recurring {
    margin-top: 0px;
}

#edit-subscription .recurring label {
    display: flex;
    align-items: center;
    padding: 10px 0px;
    border-radius: 8px;
    color: #000000;
    gap: 10px;
}

#edit-subscription .recurring label input[type=checkbox] {
    width: 20px;
    height: 20px;
}

#edit-subscription .submit button{
    width: 100%;
    text-align: center;
    height: 50px;
}


/* ================ ADD EXISTING SUBSCRIPTION =============== */

#add-existing-subscription .existing-subscription {
    background-color: #ffffff;
    padding: 25px;
    box-shadow: 0px 5px 15px -2px rgb(0 0 0 / 15%);
    border-radius: 16px;
    margin-top: 30px;
    width: 100%;
    max-width: 600px;
}

#add-existing-subscription select {
    -webkit-appearance: none;
    border: 1px solid #d9dbdb;
    border-radius: 6px;
    background-color: #ffffff;
    width: 100%;
    line-height: 40px;
    outline: none;
    padding: 0 12px;
    box-shadow: none;
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, gray 0), linear-gradient(135deg, gray 50%, transparent 0);
    background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
    background-repeat: no-repeat;
    background-size: 4px 4px, 4px 4px;
}

#add-existing-subscription input {
    border: 1px solid #d9dbdb;
    border-radius: 6px;
    background-color: #ffffff;
    width: 100%;
    line-height: 40px;
    outline: none;
    padding: 0 12px;
    box-shadow: none;
}

#add-existing-subscription .existing-subscription h2 {
    font-size: 14px;
    font-weight: 400;
    color: #9b9b9b;
    margin: 20px 0px 10px;
    position: relative;
}

#add-existing-subscription .inline-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

#add-existing-subscription .form-group {
    margin-top: 10px;
}

#add-existing-subscription .user {
    margin-top: 0px;
}

#add-existing-subscription .billing-cycle .cycle-options {
    display: flex;
    gap: 10px;
}

#add-existing-subscription .billing-cycle label {
    width: calc(50% - 10px);
    display: flex;
    align-items: center;
    background-color: #dfe5f5;
    padding: 10px 20px;
    border-radius: 8px;
    color: #000000;
    gap: 10px;
}

#add-existing-subscription .billing-cycle label input[type=radio] {
    width: 13px;
}

#add-existing-subscription .recurring {
    margin-top: 0px;
}

#add-existing-subscription .recurring label {
    display: flex;
    align-items: center;
    padding: 10px 0px;
    border-radius: 8px;
    color: #000000;
    gap: 10px;
}

#add-existing-subscription .recurring label input[type=checkbox] {
    width: 20px;
    height: 20px;
}

#add-existing-subscription .submit button{
    width: 100%;
    text-align: center;
    height: 50px;
}

/* ================ FLATPICKR CUSTOM STYLING =============== */

/* Flatpickr input field styling */
#add-existing-subscription input#start_date,
#edit-subscription input#start_date {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
    padding-right: 40px;
    cursor: pointer;
}

#add-existing-subscription input#start_date:focus,
#edit-subscription input#start_date:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
    outline: none;
}

/* Flatpickr calendar customization */
.flatpickr-calendar {
    font-family: Arial, sans-serif;
    box-shadow: 0px 5px 15px -2px rgba(0, 0, 0, 0.15);
    border: 1px solid #e6e6e6;
    border-radius: 8px;
}

.flatpickr-calendar .flatpickr-months {
    background-color: #f8f9fa;
    border-radius: 8px 8px 0 0;
}

.flatpickr-calendar .flatpickr-current-month {
    font-weight: 600;
    color: #333;
}

.flatpickr-calendar .flatpickr-day {
    border-radius: 4px;
    transition: all 0.2s ease;
}

.flatpickr-calendar .flatpickr-day:hover {
    background-color: #e9ecef;
    border-color: #e9ecef;
}

.flatpickr-calendar .flatpickr-day.selected {
    background-color: #007bff;
    border-color: #007bff;
    color: white !important;
}

.flatpickr-calendar .flatpickr-day.today {
    border-color: #007bff;
    color: #007bff;
    font-weight: 600;
}

.flatpickr-calendar .flatpickr-day.today:hover {
    background-color: #007bff;
    color: white;
}

.flatpickr-calendar .flatpickr-prev-month:hover svg,
.flatpickr-calendar .flatpickr-next-month:hover svg {
    fill: #007bff;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .flatpickr-calendar {
        width: 280px;
        left: 50% !important;
        transform: translateX(-50%);
    }
}


/* ================ SINGLE SUBSCRIPTION DETAILS =============== */


#subscription-details .subscription-header {
  margin-bottom: 1.5rem;
}

#subscription-details .header {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
}

#subscription-details .subscription-info {
    width: calc(100% - 220px);
}

#subscription-details .action {
    width: 200px;
}

#subscription-details .info {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

#subscription-details .error {
    background-color: #f5e0e0;
    padding: 2px 20px;
    border-radius: 8px;
    color: #b51515;
    margin-top: -40px;
    margin-bottom: 40px;
}

#subscription-details .notice {
    background-color: #f5e9e0;
    padding: 2px 20px;
    border-radius: 8px;
    color: #b55b15;
    margin-top: -40px;
    margin-bottom: 40px;
}

#subscription-details .notice .notice-message {
    font-size: 14px;
    line-height: 1.4;
}

#subscription-details .notice strong {
    font-weight: 600;
}

#subscription-details .info .sub-status {
    display: flex;
    gap: 10px;
    align-items: center;
}

#subscription-details .action {
    padding-top: 0px;
}

#subscription-details .meta {
    width: 100%;
}

#subscription-details .subscription-header .sub-user-name {
  font-size: 2rem;
  margin: 0;
}

#subscription-details .subscription-header .sub-status {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

#subscription-details .status-label {
    background: #f0f0f0;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 14px;
    line-height: 1.2;
}

#subscription-details .next-payment-date {
    font-size: 14px;
    color: #555;
}

#subscription-details .meta .meta-list {
    list-style: none;
    display: flex;
    gap: 20px;
    background-color: #0c2d50;
    padding: 10px 20px;
    border-radius: 8px;
    margin-top: 10px;
    margin-bottom: 0px;
}

#subscription-details .meta {
    margin-bottom: 60px;
}

#subscription-details .meta-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

#subscription-details .meta-item .meta-label {
    color: #ffffff;
    font-weight: 700;
}

#subscription-details .meta-item .meta-value {
    color: rgb(255 255 255 / 80%);
}

#subscription-details .account-credentials {
    position: relative;
    margin-top: -20px;
    margin-bottom: 40px;
}

#subscription-details h2 {
    font-size: 14px;
    font-weight: 400;
    color: #9b9b9b;
    margin-bottom: 10px;
    position: relative;
}

#subscription-details .creds-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 7px 10px;
    align-items: center;
    margin-top: 20px;
}

#subscription-details .creds-list dt {
  font-weight: bold;
}

#subscription-details .creds-list .masked {
  letter-spacing: 0.15em;
}

#subscription-details .send-creds {
    font-size: 12px;
    position: absolute;
    left: 180px;
    top: -10px;
}

#subscription-details .renewal-history {
    margin-top: 0px;
}

#subscription-details .renewals-list {
  list-style: none;
  padding: 0;
}

#subscription-details .renewal-item {
    background-color: #ffffff;
    padding: 25px;
    box-shadow: 0px 5px 15px -2px rgb(0 0 0 / 15%);
    border-radius: 16px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

#subscription-details .renewal-item .button {
    width: 100px;
    text-align: center;
}

#subscription-details .sub-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#subscription-details .sub-actions .action-btn {
  width: 100%;
  padding: 0.75rem 1rem;
  text-align: center;
}

#subscription-details .renewal-order {
    width: 25%;
    font-size: 20px;
    color: #000000;
}

#subscription-details .renewal-status, #subscription-details .renewal-label, #subscription-details .renewal-product {
    width: 15%;
}

#subscription-details .renewal-date {
    width: 20%;
}

#subscription-details .actions {
    width: 10%;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ================ PRODUCTS =============== */

#manage-products .products-list .product {
    background-color: #ffffff;
    padding: 25px;
    box-shadow: 0px 5px 15px -2px rgb(0 0 0 / 15%);
    border-radius: 16px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#manage-products .products-list .product .product-image {
    width: 50px;
    height: auto;
}

#manage-products .product-name {
    width: 40%;
}

#manage-products .product-price,
#manage-products .product-date {
    width: 15%;
}

#manage-products .actions {
    width: 15%;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

#manage-products .products-header {
    display: flex;
    justify-content: space-between;
    padding: 10px 25px;
    margin-top: 10px;
    color: #ffffff;
    font-size: 14px;
    background-color: #113d6c;
    border-radius: 8px;
}

#manage-products .product .product-name {
    font-size: 20px;
    color: #000000;
}



/* ================ ADD EDIT PRODUCTS =============== */

#add-edit-product .add-edit-product-section {
    background-color: #ffffff;
    padding: 25px;
    box-shadow: 0px 5px 15px -2px rgb(0 0 0 / 15%);
    border-radius: 16px;
    margin-top: 30px;
    width: 100%;
    max-width: 600px;
}

#add-edit-product select {
    -webkit-appearance: none;
    border: 1px solid #d9dbdb;
    border-radius: 6px;
    background-color: #ffffff;
    width: 100%;
    line-height: 40px;
    outline: none;
    padding: 0 12px;
    box-shadow: none;
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, gray 0), linear-gradient(135deg, gray 50%, transparent 0);
    background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
    background-repeat: no-repeat;
    background-size: 4px 4px, 4px 4px;
}

#add-edit-product input {
    border: 1px solid #d9dbdb;
    border-radius: 6px;
    background-color: #ffffff;
    width: 100%;
    line-height: 40px;
    outline: none;
    padding: 0 12px;
    box-shadow: none;
}

#add-edit-product .form-group {
    margin-top: 10px;
}

#add-edit-product ::file-selector-button{
    border-radius: 500px;
    max-height: 40px;
    border: 1px solid rgba(27, 31, 35, 0.15);
    padding: 0px 10px;
}

#add-edit-product #image-preview {
    margin-bottom: 5px;
}

#add-edit-product #image-preview img {
    width: 100px;
    height: 100px;
    border-radius: 4px;
}

#add-edit-product .image {
    margin-top: 0px;
}

#add-edit-product .submit {
    margin-top: 20px;
}

#add-edit-product .submit button {
    width: 100%;
    text-align: center;
    height: 50px;
}


/* ================ SERVERS =============== */

#manage-servers .servers-header {
    display: flex;
    justify-content: space-between;
    padding: 10px 25px;
    margin-top: 10px;
    color: #ffffff;
    font-size: 14px;
    background-color: #113d6c;
    border-radius: 8px;
}

#manage-servers .servers-list .server {
    background-color: #ffffff;
    padding: 25px;
    box-shadow: 0px 5px 15px -2px rgb(0 0 0 / 15%);
    border-radius: 16px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#manage-servers .server-name {
    width: 30%;
}

#manage-servers .server-status,
#manage-servers .server-usage {
    width: 15%;
}

#manage-servers .actions {
    width: 40%;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

#manage-servers .server .server-name {
    font-size: 20px;
    color: #000000;
}

#manage-servers .server .server-usage .usage {
    max-width: 200px;
    display: flex;
    align-items: center;
    gap: 10px;
}


/* ================ ADD EDIT SERVERS =============== */

#add-edit-server .add-edit-product-section {
    background-color: #ffffff;
    padding: 25px;
    box-shadow: 0px 5px 15px -2px rgb(0 0 0 / 15%);
    border-radius: 16px;
    margin-top: 30px;
    width: 100%;
    max-width: 600px;
}

#add-edit-server select {
    -webkit-appearance: none;
    border: 1px solid #d9dbdb;
    border-radius: 6px;
    background-color: #ffffff;
    width: 100%;
    line-height: 40px;
    outline: none;
    padding: 0 12px;
    box-shadow: none;
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, gray 0), linear-gradient(135deg, gray 50%, transparent 0);
    background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
    background-repeat: no-repeat;
    background-size: 4px 4px, 4px 4px;
}

#add-edit-server input {
    border: 1px solid #d9dbdb;
    border-radius: 6px;
    background-color: #ffffff;
    width: 100%;
    line-height: 40px;
    outline: none;
    padding: 0 12px;
    box-shadow: none;
}

#add-edit-server .form-group {
    margin-top: 10px;
}

#add-edit-server .name {
    margin-top: 0px;
}

#add-edit-server .submit {
    margin-top: 20px;
}

#add-edit-server .submit button {
    width: 100%;
    text-align: center;
    height: 50px;
}


/* ================ MAP SERVER PLANS =============== */
#map-server-plans select {
    -webkit-appearance: none;
    border: 1px solid #d9dbdb;
    border-radius: 6px;
    background-color: #ffffff;
    width: 100%;
    max-width: 250px;
    line-height: 40px;
    outline: none;
    padding: 0 12px;
    box-shadow: none;
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, gray 0), linear-gradient(135deg, gray 50%, transparent 0);
    background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
    background-repeat: no-repeat;
    background-size: 4px 4px, 4px 4px;
}


/* ================ SINGLE SERVER DETAILS =============== */

#server-details .server-info .status-online {
    background-color: #009879 !important;
    color: #ffffff;
}

#server-details .header {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 20px;
}

#server-details .server-info {
    width: calc(100% - 220px);
    display: flex;
}

#server-details .server-info .info {
    width: 60%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#server-details .server-info .info .usage-container {
    width: 100%;
}

#server-details .server-info .info .usage-container .usage {
    max-width: 200px;
    display: flex;
    align-items: center;
    gap: 10px;
}

#server-details .server-info .info .server-status {
    margin-left: 10px;
}

#server-details .server-info .info .status-label {
    background: #f0f0f0;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 15px;
}

#server-details .server-info .meta {
    width: 40%;
    background-color: #e9eef9;
    padding: 25px;
    border-radius: 12px;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#server-details .server-info .meta span {
    display: flex;
    gap: 10px;
}

#server-details .action {
    width: 200px;
    padding-top: 0px;
}

#server-details .server-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#server-details .server-actions .action-btn {
    width: 100%;
    padding: 0.75rem 1rem;
    text-align: center;
}

#server-details .accounts-summary {
    display: flex;
    gap: 20px;
    margin-top: 50px;
}

#server-details .accounts-summary a {
    width: calc(33.33% - 10px);
}

#server-details .accounts-summary .card {
    width: 100%;
    background-color: #ffffff;
    border-radius: 12px;
    padding: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0px 5px 15px -2px rgb(0 0 0 / 15%);
}

#server-details .accounts-summary .card .summary-label {
    display: flex;
    flex-direction: column;
    color: #9b9b9b;
    font-size: 12px;
}

#server-details .accounts-summary .card .summary-label span {
    color: #000000;
    font-size: 18px;
}

#server-details .accounts-summary a:hover .card .summary-label span {
    color: #1336ff;
}

#server-details .accounts-summary .card .summary-count {
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
    width: 40px;
    height: 40px;
    border-radius: 50px;
    font-family: monospace;
    display: flex;
    align-items: center;
    justify-content: center;
}

#server-details .accounts-list .account {
    background-color: #ffffff;
    padding: 25px;
    box-shadow: 0px 5px 15px -2px rgb(0 0 0 / 15%);
    border-radius: 16px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#server-details .account .acc-username {
    font-size: 20px;
    color: #000000;
    display: flex;
    flex-direction: column;
    line-height: 1.4;
}

#server-details .account .acc-username span {
    font-size: 14px;
    color: #7c7c7c;
}

#server-details h2 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

#server-details .acc-username {
    width: 20%;
}

#server-details .acc-creation-date, #server-details .acc-linked-sub, #server-details .acc-plan {
    width: 15%;
}

#server-details .acc-status {
    width: 10%;
}

#server-details .acc-email {
    width: 20%;
    word-wrap: break-word;
    padding-right: 20px;
    line-height: 1.4;
}

#server-details .acc-linked-sub a {
    text-decoration: underline;
}

#server-details .acc-linked-sub a:hover {
    color: #1336ff;
}

#server-details .actions-dropdown {
    width: 20%;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

#server-details select {
    -webkit-appearance: none;
    border: 1px solid #d9dbdb;
    border-radius: 6px;
    background-color: #ffffff;
    width: 100%;
    line-height: 40px;
    outline: none;
    padding: 0 12px;
    box-shadow: none;
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, gray 0), linear-gradient(135deg, gray 50%, transparent 0);
    background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
    background-repeat: no-repeat;
    background-size: 4px 4px, 4px 4px;
}

#server-details input {
    border: 1px solid #d9dbdb;
    border-radius: 6px;
    background-color: #ffffff;
    width: 100%;
    line-height: 40px;
    outline: none;
    padding: 0 12px;
    box-shadow: none;
}

#server-details .filters-bar {
    margin-top: 50px;
}

#server-details .accounts-header {
    display: flex;
    justify-content: space-between;
    padding: 10px 25px;
    margin-top: 10px;
    color: #ffffff;
    font-size: 14px;
    background-color: #113d6c;
    border-radius: 8px;
}

/* ================ ORDERS =============== */


#manage-orders .filters-bar {
    display: flex;
    background-color: #fafbff;
    gap: 20px;
    margin-top: 20px;
    border-radius: 8px;
}

#manage-orders select {
    -webkit-appearance: none;
    border: 1px solid #d9dbdb;
    border-radius: 6px;
    background-color: #ffffff;
    width: 100%;
    max-width: 200px;
    line-height: 40px;
    outline: none;
    padding: 0 12px;
    box-shadow: none;
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, gray 0), linear-gradient(135deg, gray 50%, transparent 0);
    background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
    background-repeat: no-repeat;
    background-size: 4px 4px, 4px 4px;
}

#manage-orders input {
    border: 1px solid #d9dbdb;
    border-radius: 6px;
    background-color: #ffffff;
    width: 100%;
    line-height: 40px;
    outline: none;
    padding: 0 12px;
    box-shadow: none;
}

#manage-orders .filters-bar .filters {
    width: calc(100% - 270px);
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: flex-end;
}

#manage-orders .filters-bar .search {
    width: 250px;
    display: flex;
    gap: 5px;
    align-items: center;
}

#manage-orders .filters-bar .search input {
    max-width: 100%;
    -webkit-appearance: none;
    border: 1px solid #d9dbdb;
    border-radius: 6px;
    background-color: #ffffff;
    width: 100%;
    max-width: 300px;
    line-height: 40px;
    outline: none;
    padding: 0 12px;
    box-shadow: none;
}

#manage-orders .filters-bar .filter-form {
    display: flex;
    gap: 5px;
    width: 100%;
    max-width: 300px;
}

#manage-orders .orders-list .order {
    background-color: #ffffff;
    padding: 25px;
    box-shadow: 0px 5px 15px -2px rgb(0 0 0 / 15%);
    border-radius: 16px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#manage-orders .order-id {
    width: 20%;
}

#manage-orders .order-product,
#manage-orders .order-date,
#manage-orders .order-status {
    width: 15%;
}

#manage-orders .order-user {
    width: 25%;
    display: flex;
    flex-direction: column;
    line-height: 1.4;
    word-wrap: break-word;
    padding: 0px 20px;
}

#manage-orders .order-user a {
    text-decoration: underline;
}

#manage-orders .order-user a:hover {
    color: #1336ff;
}

#manage-orders .order-user span {
    font-size: 14px;
    color: #7c7c7c;
}

#manage-orders .actions {
    width: 10%;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

#manage-orders .orders-header {
    display: flex;
    justify-content: space-between;
    padding: 10px 25px;
    margin-top: 10px;
    color: #ffffff;
    font-size: 14px;
    background-color: #113d6c;
    border-radius: 8px;
}

#manage-orders .order .order-id {
    font-size: 20px;
    color: #000000;
}

/* ================ SUBSCRIPTION BUBBLES STYLING =============== */

#manage-orders .subscription-bubbles {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

#manage-orders .subscription-bubble {
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0px 5px 15px -2px rgb(0 0 0 / 15%);
    overflow: hidden;
    margin-bottom: 0;
}

#manage-orders .subscription-header {
    background-color: #ffffff;
    padding: 10px 25px;
    border-bottom: 1px solid #e9ecef;
}

#manage-orders .subscription-header .subscription-link {
    font-size: 15px;
    font-weight: 600;
    color: #404040;
    text-decoration: none;
    display: block;
}

#manage-orders .subscription-header .subscription-link:hover {
    color: #1336ff;
}

#manage-orders .subscription-header .subscription-name {
    font-size: 15px;
    font-weight: 600;
    color: #404040;
    display: block;
}

/* Separate styling for user name and domain */
#manage-orders .subscription-header .user-name {
    font-weight: 600;
    color: #404040;
}

#manage-orders .subscription-header .domain-name {
    font-weight: 400;
    color: #666666;
    margin-left: 5px;
}

#manage-orders .subscription-header .subscription-link:hover .user-name {
    color: #1336ff;
}

#manage-orders .subscription-header .subscription-link:hover .domain-name {
    color: #1336ff;
}

#manage-orders .orders-in-bubble {
    padding: 0;
}

#manage-orders .orders-in-bubble .order {
    margin-top: 0;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid #f0f0f0;
    background-color: #ffffff;
}

#manage-orders .orders-in-bubble .order:last-child {
    border-bottom: none;
}

#manage-orders .orders-in-bubble .order:hover {
    background-color: #f8f9fa;
}

/* Adjust column widths for orders within bubbles (no subscription column) */
#manage-orders .orders-in-bubble .order-id {
    width: 25%;
}

#manage-orders .orders-in-bubble .order-product,
#manage-orders .orders-in-bubble .order-date,
#manage-orders .orders-in-bubble .order-status {
    width: 18%;
}

#manage-orders .orders-in-bubble .actions {
    width: 21%;
}


/* ================ SINGLE ORDER DETAILS =============== */

#order-details .order-header {
    display: flex;
    gap: 20px;
}

#order-details .order-content {
    width: calc(100% - 320px);
}

#order-details .order-actions {
    width: 300px;
}

#order-details .order-info {
    width: 100%;
}

#order-details .info {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

#order-details .order-status {
    background: #f0f0f0;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 14px;
}

#order-details .meta {
    width: 100%;
}

#order-details .meta .meta-list {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    background-color: #0c2d50;
    padding: 10px 20px;
    border-radius: 8px;
}

#order-details .meta-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

#order-details .meta-item .meta-label {
    color: #ffffff;
    font-weight: 700;
}

#order-details .meta-item .meta-value {
    color: rgb(255 255 255 / 80%);
}

#order-details h2 {
    font-size: 14px;
    font-weight: 400;
    color: #9b9b9b;
    margin: 20px 0px 10px;
    position: relative;
}

#order-details .billing-info {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

#order-details .billing-row {
    display: flex;
    width: 100%;
}

#order-details .billing-label {
    width: 100px;
    font-weight: 700;
}

#order-details .billing-value {
    width: calc(100% - 100px);
    display: ruby;
}

#order-details .invoice-actions {
    margin-top: 30px;
}

#order-details .details-container {
    background-color: #ffffff;
    box-shadow: 0px 5px 15px -2px rgb(0 0 0 / 15%);
    border-radius: 16px;
    margin-top: 20px;
}

#order-details .totals-row {
    padding: 20px;
    background-color: #edf1fd;
    border-top: 1px solid #ced6eb;
    border-right: 1px solid #ced6eb;
    border-left: 1px solid #ced6eb;
    display: flex;
}

#order-details .totals-row:last-child {
    border-radius: 0px 0px 16px 16px;
    font-weight: 700;
    border-bottom: 1px solid #ced6eb;
}

#order-details .totals-row span {
    width: 50%;
}

#order-details .order-items {
    padding: 25px;
    min-height: 150px;
}

#order-details .order-item {
    display: flex;
}

#order-details .order-item>span {
    width: 50%;
}

#order-details .quantity-badge {
    font-size: 15px;
    font-weight: bold;
    color: #000000;
    width: 25px;
    height: 25px;
    border-radius: 50px;
    font-family: monospace;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #dfe5f5;
}

#order-details .item-product-name {
    display: flex;
    align-items: center;
    gap: 10px;
}

#order-details .pay-offline-container {
    margin-top: 20px;
}

#order-details .recent-notes {
    background-color: #ffffff;
    border: 1px solid #dddedf;
    padding: 10px;
    border-radius: 8px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#order-details .single-note {
    background-color: #eff3fd;
    border-radius: 6px;
}

#order-details .note-meta {
    background-color: #cad2e5;
    font-size: 12px;
    color: #000000;
    padding: 5px;
    border-radius: 6px 6px 0px 0px;
}

#order-details .note-content {
    font-size: 14px;
    padding: 5px;
    line-height: 1.3;
    color: #6f7a91;
}

/* ================ USERS =============== */

#manage-users .users-header {
    display: flex;
    justify-content: space-between;
    padding: 10px 25px;
    margin-top: 10px;
    color: #ffffff;
    font-size: 14px;
    background-color: #113d6c;
    border-radius: 8px;
}

#manage-users .user.card {
    background-color: #ffffff;
    padding: 25px;
    box-shadow: 0px 5px 15px -2px rgb(0 0 0 / 15%);
    border-radius: 16px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#manage-users .user-info {
    width: calc(100% - 200px);
    display: flex;
    align-items: center;
}

#manage-users .user .user-name {
    font-size: 20px;
    color: #000000;
}

#manage-users .user div {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #818181;
}

#manage-users .user .count {
    font-size: 20px;
    font-weight: bold;
    color: #000000;
    width: 40px;
    height: 40px;
    border-radius: 50px;
    font-family: monospace;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #dfe5f5;
}

#manage-users .user-name {
    width: 40%;
}

#manage-users .user-subs,
#manage-users .user-orders {
    width: 20%;
}

#manage-users .actions {
    width: 20%;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

#manage-users .filters-bar {
    display: flex;
    background-color: #fafbff;
    gap: 20px;
    margin-top: 20px;
    border-radius: 8px;
}

#manage-users .filters-bar .filters {
    width: calc(100% - 270px);
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: flex-end;
}

#manage-users .filters-bar .search {
    width: 250px;
    display: flex;
    gap: 5px;
    align-items: center;
}

#manage-users .filters-bar .search input,
#server-details .filters-bar .search input {
    max-width: 100%;
    -webkit-appearance: none;
    border: 1px solid #d9dbdb;
    border-radius: 6px;
    background-color: #ffffff;
    width: 100%;
    max-width: 300px;
    line-height: 40px;
    outline: none;
    padding: 0 12px;
    box-shadow: none;
}

#manage-users select {
    -webkit-appearance: none;
    border: 1px solid #d9dbdb;
    border-radius: 6px;
    background-color: #ffffff;
    width: 100%;
    max-width: 200px;
    line-height: 40px;
    outline: none;
    padding: 0 12px;
    box-shadow: none;
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, gray 0), linear-gradient(135deg, gray 50%, transparent 0);
    background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
    background-repeat: no-repeat;
    background-size: 4px 4px, 4px 4px;
}

#manage-users input {
    border: 1px solid #d9dbdb;
    border-radius: 6px;
    background-color: #ffffff;
    width: 100%;
    line-height: 40px;
    outline: none;
    padding: 0 12px;
    box-shadow: none;
}


/* ================ ADD NEW USERS =============== */

#add-new-user .add-user-section {
    background-color: #ffffff;
    padding: 25px;
    box-shadow: 0px 5px 15px -2px rgb(0 0 0 / 15%);
    border-radius: 16px;
    margin-top: 30px;
    width: 100%;
    max-width: 600px;
}

#add-new-user select {
    -webkit-appearance: none;
    border: 1px solid #d9dbdb;
    border-radius: 6px;
    background-color: #ffffff;
    width: 100%;
    line-height: 40px;
    outline: none;
    padding: 0 12px;
    box-shadow: none;
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, gray 0), linear-gradient(135deg, gray 50%, transparent 0);
    background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
    background-repeat: no-repeat;
    background-size: 4px 4px, 4px 4px;
}

#add-new-user input {
    border: 1px solid #d9dbdb;
    border-radius: 6px;
    background-color: #ffffff;
    width: 100%;
    line-height: 40px;
    outline: none;
    padding: 0 12px;
    box-shadow: none;
}

#add-new-user .form-group {
    margin-top: 10px;
}

#add-new-user .submit {
    margin-top: 20px;
}

#add-new-user .submit button {
    width: 100%;
    text-align: center;
    height: 50px;
}


/* ================ SINGLE USER DETAILS =============== */

#user-details .member-since {
    font-size: 20px;
}

#user-details .subscriptions-list .subscription {
    background-color: #ffffff;
    padding: 25px;
    box-shadow: 0px 5px 15px -2px rgb(0 0 0 / 15%);
    border-radius: 16px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#user-details .subscriptions-list h2 {
    font-size: 14px;
    font-weight: 400;
    color: #9b9b9b;
    margin: 20px 0px 10px;
    position: relative;
}

#user-details .subscription .sub-user {
    font-size: 20px;
    color: #000000;
    display: flex;
    flex-direction: column;
    line-height: 1.4;
}

#user-details .subscription .sub-user span {
    font-size: 14px;
    color: #7c7c7c;
}

#user-details .subscription-info {
    width: 30%;
}

#user-details .sub-product, #user-details .sub-cycle, #user-details .sub-status {
    width: 10%;
}

#user-details .sub-date {
    width: 15%;
}

#user-details .actions-dropdown {
    width: 25%;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

#user-details select {
    -webkit-appearance: none;
    border: 1px solid #d9dbdb;
    border-radius: 6px;
    background-color: #ffffff;
    width: 100%;
    max-width: 200px;
    line-height: 40px;
    outline: none;
    padding: 0 12px;
    box-shadow: none;
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, gray 0), linear-gradient(135deg, gray 50%, transparent 0);
    background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
    background-repeat: no-repeat;
    background-size: 4px 4px, 4px 4px;
}

#user-details input {
    border: 1px solid #d9dbdb;
    border-radius: 6px;
    background-color: #ffffff;
    width: 100%;
    line-height: 40px;
    outline: none;
    padding: 0 12px;
    box-shadow: none;
}

#user-details .subscriptions-header {
    display: flex;
    justify-content: space-between;
    padding: 10px 25px;
    margin-top: 10px;
    color: #ffffff;
    font-size: 14px;
    background-color: #113d6c;
    border-radius: 8px;
}