/* dark mode testing  */




a {
    text-decoration: none;
  }
  
  /* navbar background  */
  .bg-light {
    background: var(--bg-light) !important;
  }
  
  .header-font1 {
    color: var(--primary-900, #4584ff);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
  }
  
  svg path:hover {
    fill: yellow;
  }
  
  svg path {
    cursor: pointer;
  }
  
  .map {
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: auto;
  }
  
  .background-sidebar {
    background-color: var(--background-sidebar);
  }
  
  .custom-background {
    background-color: var(--custom-background);
  }
  
  .border {
    border-color: var(--bs-border-color);
  }
  
  .dropdown-toggle::after {
    display: none !important;
  }
  
  .custom-checkbox:checked {
    background-color: #f8f8f8;
    position: relative;
  }
  
  .custom-form-switch input[type="checkbox"] {
    width: 5rem;
    /* Set the width to make it bigger */
    height: 2.5rem;
    /* Set the height to make it bigger */
    border: #4584ff;
  }
  
  .custom-form-switch {
    position: relative;
  }
  
  .menu-icon {
    width: 30px;
    height: 30px;
  }
  
  .custom-checkbox:focus {
    outline: none;
    box-shadow: none;
  }
  
  /* Style for the inactive toggle */
  .form-check-input-nav[type="checkbox"]:not(:checked) {
    background-color: #091731;
    background-image: url(../icons/sun-header.svg);
    background-size: 30px; /* Set the desired size of the background image */
    margin-top: 0;
    background-position: center right 5px; /* Center the image */
  }
  /* Set the white circular background for the moon-header icon */
  .form-check-input-nav[type="checkbox"]:not(:checked)::before {
    content: "";
    position: absolute;
    background-image: url(../icons/moon-header.svg);
    background-size: 30px;
    top: 5px; /* Adjust the vertical position to center the icon */
    left: 5px; /* Adjust the horizontal position to keep it inside the parent */
    width: 30px; /* Set the width of the circular background */
    height: 30px; /* Set the height of the circular background */
    background-color: white;
    transition: background-position 0s;
    border-radius: 50%; /* Make the background circular */
  }
  /* Style for the inactive toggle */
  .form-check-input-nav[type="checkbox"]:checked {
    background-color: var(--background);
    background-image: url(../icons/moon-header.svg);
    background-size: 30px; /* Set the desired size of the background image */
    transition: background-position 0s;
    background-position: center left 4px; /* Center the image */
  }
  /* Set the white background for the sun-header icon */
  .form-check-input-nav[type="checkbox"]:checked::before {
    content: "";
    position: absolute;
    background-image: url(../icons/sun-header.svg);
    background-size: 30px; /* Set the desired size of the background image */
    top: 4px;
    right: 5px;
    width: 30px;
    height: 30px;
    background-color: white;
    border-radius: 50%;
  }
  .form-switch .form-check-input {
    width: 2em;
    margin-left: -2.5em;
    cursor: pointer;
  
    background-position: left center;
    border-radius: 2em;
    transition: background-position 0s;
  }
  
  .outline-search {
    outline: none;
  }
  
  /* reset password  */
  
  .container-reset {
    height: 100vh;
    background: var(--background)
  }
  
  .text {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
  }
  
  .text1 {
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
  }
  
  .text2 {
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
  }
  
  .outline-email {
    outline: none;
    border: 0;
    background: transparent;
  }
  
  .custom-background {
    background: var(--background);
    color:var(--text-color);
  }
  
  .text-button {
    color: var(--white, #fff);
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: capitalize;
  }
  
  .text-link {
    color: var(--primary-900, #4584ff);
  
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: capitalize;
  }
  
  .button {
    background: #4584ff;
  }
  
  /* sign in  */
  .container-sign-in {
    padding: 0px 0px;
    height: calc(100vh);
    background: var(--background)
  }
  
  /* getting started  */
  
  .container-getting-started {
    padding: 50px 0px;
    background: var(--background);
    height: 100vh;
  }
  
  @media (max-width: 500px) {
    .container-getting-started {
      padding: 20px 0px;
      background: var(--background);
      min-height: 100vh;
    }
  
    .f-h1 {
      font-size: 20px;
    }
  }
  
  /* contact page  */
  
  .container-contact {
    padding: 20px 0px;
    background: var(--background);
    height: auto;
  }
  
  @media (min-width: 500px) {
    .container-contact {
      padding: 0px 0px;
      background: var(--background);
      height: calc(100vh - 75px);
    }
  }
  
  .contact-ellipse {
    position: static;
    z-index: 999;
  }
  
  .main-div-contact {
    background: var(--background);
  }
  
  .content-box-contact {
    width: 80%;
  }
  
  .need-help {
    background: var(--need-help);
  }
  
  .custom-z-index {
    z-index: 999;
  }
  
  .heading {
    color: var(--white, --text-color-dark);
  
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
  }
  
  .resize-textarea {
    resize: none;
  }
  
  /* Card page  */
  
  .top-buttons {
    background: #ffffff;
    width: 100%;
  }
  
  .div3 {
    width: 35%;
  }
  
  .warning-cards {
    background: #ffeded;
  }
  
  .warning-cards2 {
    background: #fff9ef;
  }
  
  .warning-cards3 {
    background: #ebf8ec;
  }
  
  .warning-cards4 {
    background: #f0f6ff;
  }
  
  /* email page  */
  
  .container-email {
    background: var(--background);
    padding: 5px 5px;
  }
  
  @media (min-width: 600px) {
    .container-email {
      background: var(--background);
      padding: 50px 50px;
      height: 100vh;
    }
  }
  
  @media (max-width: 600px) {
    .container-email {
      background: var(--background);
      padding: 5px 5px;
      height: 100vh;
    }
  }
  
  .main-div-email {
    height: 100vh;
    background: var(--background);
  }
  
  .email-div {
    background: white;
    width: 80%;
    height: 80%;
  }
  
  .items-div {
    background: white;
    width: 20%;
  }
  
  .button-email {
    background: none;
    color: var(--text-color-light);
  }
  
  .button-email-active {
    background: #f0f6ff;
  }
  
  /* email list  */
  .container-email-list {
    padding: 25px 25px;
    background: var(--background);
  }
  
  @media (min-width: 600px) {
    .container-email-list {
      background: var(--background);
      padding: 20px 20px;
  
      height: calc(100vh - 75px);
    }
  }
  
  /* chat  */
  
  .container-chat {
    padding: 35px 35px;
    background: var(--background);
    height: auto;
  }
  
  @media (max-width: 576px) {
    .container-chat {
      padding: 20px 20px;
      background: var(--background);
    }
  }
  
  /* @media (min-width: 768px) {
  
      .container-chat {
          padding: 20px 20px;
          background: #E7E7E7;
          height: calc(100vh - 75px);
      }
  
  } */
  
  #searchInput {
    background-color: transparent;
    /* Set the background to transparent */
    border: none;
    /* Remove the border */
    outline: none;
    /* Remove the outline */
    box-shadow: none;
  }
  
  /* pagination  */
  .pagination {
    margin-top: 20px;
  }
  
  .pagination .page-item.disabled .page-link {
    background-color: #f8f8f8;
    color: #666666;
    cursor: not-allowed;
  }
  
  .pagination .page-item.disabled .page-link:hover {
    background-color: #f2f2f2;
  } 
  
  .pagination .page-item.active .page-link {
    background-color: rgba(69, 132, 255, 0.08);
    border-color: #007bff;
    color: #000000;
    /* Change this to the desired text color for the active button */
  
    box-shadow: none;
    /* Remove any box shadow */
  }
  
  .pagination .page-link {
    color: #007bff;
    /* Add spacing between page numbers */
    padding: 0.5rem 0.75rem;
    border-radius: 5px;
    /* Set border-radius to 0 for all sides by default */
  }
  
  .pagination .page-link:hover {
    color: #0056b3;
    text-decoration: none;
    background-color: #f2f2f2;
    border-color: #007bff;
  }
  
  .pagination .page-item:first-child .page-link {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
  }
  
  .pagination .page-item:last-child .page-link {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
  }
  
  /* Custom background color for the "Next" button */
  .pagination .page-item[data-page="next"] .page-link {
    background-color: rgba(69, 132, 255, 0.08);
    /* Change this to the desired background color */
    color: #4584ff;
    /* Change this to the desired text color */
  }
  
  /* Custom hover style for the "Next" button */
  .pagination .page-item[data-page="next"] .page-link:hover {
    background-color: #9697aa;
    /* Change this to the desired hover background color */
    border-color: #4584ff;
    /* Change this to the desired hover border color */
  }
  
  /* Add spacing for each page number and button */
  .pagination .page-item {
    margin: 10px;
    /* Adjust this value as needed for the desired separation */
  }
  
  /* task page  */
  
  .container-task {
    background: var(--background);
    height: auto;
  }
  
  /* @media (min-width: 1200px) {
  
      .container-task {
          padding: 20px 20px;
          background: #E7E7E7;
          height: calc(100vh - 75px);
      }
  
  } */
  .top-tags {
    background: #091731;
    color: var(--text-color-light-special-case);
  
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
  }
  
  .meeting {
    background: #fbcdb3;
  }
  
  .wireframe {
    background: #bcabfa;
  }
  
  .wireframe2 {
    background: #e8fa8f;
  }
  
  .ux-design {
    background: #b5d8fe;
  }
  
  .card-content {
    color: var(--secondary-900, --text-color-light);
  
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 19px;
    /* 158.333% */
    text-transform: capitalize;
  }
  
  .position-absolute-task {
    position: absolute;
    left: 38px;
  }
  
  .custom-position {
    position: absolute;
    left: 70px;
  }
  
  /* teams  */
  
  .container-teams {
    padding: 35px 35px;
    background: var(--background);
    height: auto;
  }
  
  /* @media (min-width: 1200px) {
  
      .container-teams {
          padding: 20px 20px;
          background: #E7E7E7;
          height: calc(100vh - 75px);
      }
  
  } */
  
  .call {
    background: var(--call);
    color: #4095f0;
    font-weight: 600;
  }
  
  .call:hover {
    background: #94b5f3;
    color: white;
  }
  
  /* icons page  */
  
  .container-icons {
    height: auto;
    background: var(--background);
  }
  
  @media (min-width: 576px) {
    .container-icons {
      height: calc(100vh - 75px);
      background: var(--background);
    }
  }
  
  /* chats page  */
  .main-div-chats {
    height: auto;
    background: #f5f6f7;
  }
  
  .text-no-underline {
    text-decoration: none !important;
    color: var(--text-color-light);
  }
  
  .scrollable-chat {
    max-height: 400px;
    /* Set the maximum height for the chat area */
    overflow-y: auto;
    /* Enable vertical scrolling */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  
  .sent-message {
    background: var(--background-dark-three);
  }
  
  /* profile admin  */
  .vr {
    height: 600px;
    color: #4584ff;
    width: 4px;
    /* Creating the dashed line effect */
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgb(17, 0, 248) 0%,
      rgb(4, 0, 255) 50%,
      transparent 0%
    );
    background-size: 100% 10px;
    /* Control the dash size here (10px in this example) */
    /* Creating the dashed line effect with bigger dashes */
    box-shadow: 0 0 0 15px rgba(236, 4, 4, 0);
    /* Control the dash size here (15px for bigger dashes) */
  }
  
  .vr-div {
    position: absolute;
    left: 50px;
    top: 50px;
  }
  
  .signout-z {
    z-index: 0;
  }
  
  @media (max-width: 767px) {
    .pill-time {
      font-size: 12px;
    }
  }
  
  @media (max-width: 376px) {
    .pill-time {
      font-size: 8px;
    }
  }
  
  .sticky-top-nav {
    position: sticky;
    top: 0;
    z-index: 999;
    /* Set a higher z-index if needed to ensure it's above other elements */
  }
  
  .container-profile-admin {
    padding: 20px 20px;
    background: var(--background);
    height: auto;
  }
  
  @media (min-width: 1200px) {
    .container-profile-admin {
      padding: 20px 20px;
      background: var(--background);
      height: calc(100vh - 75px);
    }
  }
  
  .main-div-admin {
    height: 100vh;
    background: #f5f6f7;
  }
  
  /* profile customer  */
  .container-profile-customer {
    padding: 20px 20px;
    background: var(--background);
    height: auto;
  }
  
  /* @media (min-width: 768px) {
  
      .container-profile-customer {
          padding: 20px 20px;
          background: #E7E7E7;
          height: calc(100vh - 60px);
      }
  
  } */
  
  @media (min-width: 768px) and (max-width: 1320px) {
    .table-over-profile {
      overflow-x: auto;
      max-width: 100%;
    }
  
    /* Ensure the table takes up all available width and its cells don't wrap text */
    table {
      width: 100%;
  
      white-space: nowrap;
    }
  }
  
  /* FAQ  */
  .container-faq {
    padding: 20px 20px;
    background: var(--background);
    height: auto;
  }
  
  @media (min-width: 768px) {
    .container-faq {
      padding: 20px 20px;
      background: var(--background);
      height: calc(100vh - 75px);
    }
  }
  
  /* add products  */
  
  .container-add-product {
    padding: 20px 20px;
    background: var(--background);
    height: auto;
  }
  
  /* @media (min-width : 768px) {
      .container-add-product {
          padding: 20px 20px;
          background: #E7E7E7;
          height: calc(100vh - 75px);
      }
  
  } */
  
  .drop-here {
    background: var(--background-dark-three);
    outline: dashed;
    color: blue;
  }
  
  /* add products  */
  .main-div-add-products {
    height: auto;
    background: #f5f6f7;
  }
  
  .button-cancel {
    background: #ff151514;
    color: #ff1515;
  }
  .button-cancel:hover {
    background: #ff151557 !important;
    color: #ff1515 !important;
  }
  
  /* add orders  */
  
  .container-add-order {
    padding: 25px 25px;
    background: var(--background);
  }
  
  /* add customer  */
  .container-add-customer {
    padding: 15px 15px;
    background: var(--background);
  }
  
  /* invoice printable  */
  
  .custom-camera {
    position: absolute;
    top: -22px;
    right: -22px;
  }
  
  .table tfoot tr td {
    text-align: right;
  }
  
  .container-invoice {
    padding: 25px 30px;
    background: var(--background);
    height: calc(100vh - 75px);
  }
  
  @media (max-width: 767px) {
    .container-invoice {
      padding: 25px 30px;
      background: var(--background);
      height: auto;
    }
  }
  
  .container-printable {
    padding: 25px 30px;
    background: var(--background);
    height: auto;
  }
  
  @media (min-width: 767px) {
    .container-printable {
      padding: 25px 30px;
      background: var(--background);
      height: calc(100vh - 75px);
    }
  }
  
  /* card page  */
  
  .container-cards {
    padding: 40px 40px;
    background: var(--background);
  }
  
  /* invoice list */
  .complete-badge {
    color: #00a711;
    background: #ebf8ec;
  }
  
  .cancelled-badge {
    color: #ff1515;
    background: #ffeded;
  }
  
  .pending-badge {
    color: #ff9900;
    background: #fff9ef;
  }
  
  /* table  */
  .table {
    color: var(--text-color-light);
    --bs-table-hover-color: var(--text-color-light);
  }
  
  
  
  
  .page-numbers button {
    margin: 5px;
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    background: none;
    color: #667085;
    cursor: pointer;
  }
  
  .page-numbers button.active {
    background-color: var(--call);
    color: #4584ff;
    font-weight: bold;
  }
  
  /* Customize the Next and Previous buttons */
  .custom-btn {
    background-color: var(--background-dark-three);
    color: #007bff;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
  }
  
  .custom-btn:hover {
    background-color: #007bff;
    color: var(--text-color-dark);
    cursor: pointer;
  }
  
  /* Disable Next and Previous buttons when there are no more pages */
  .custom-btn:disabled {
    background-color: var(--custom-background);
    color: #999;
    cursor: pointer;
    border: none;
  }
  
  /* analytics  */
  
  .container-analytics-products {
    padding: 20px 20px;
    background: var(--background);
    height: auto;
  }
  
  .green {
    color: #00a711;
  }
  
  /* pie chart  */
  
  /* CSS to customize the legend layout */
  .apexcharts-legend.apexcharts-align-center {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
  
  .apexcharts-legend.apexcharts-align-center .apexcharts-legend-series {
    flex-basis: 33.33%;
    /* Set the width to one-third to display three items per row */
    max-width: 33.33%;
    text-align: center;
  }
  
  /* Optional: Add some spacing between the legend items */
  .apexcharts-legend.apexcharts-align-center .apexcharts-legend-series {
    padding: 5px;
  }
  .apexcharts-legend-text{
    color: var(--text-color-light) !important;
  }
  
  .apexcharts-yaxis-label{
    fill: var(--text-color-light) !important; 
  }
  .apexcharts-xaxis-label{
    fill: var(--text-color-light) !important;
  }
  
  /* customer list  */
  
  .container-customer-list {
    padding: 20px 20px;
    background: var(--background);
    height: auto;
  }
  
  @media (min-width: 768px) {
    .container-customer-list {
      padding: 20px 20px;
      background: var(--background);
      height: calc(100vh - 75px);
    }
  }
  
  /* Dashboard  */
  
  @media (min-width: 768px) {
    .col-5-dashboard {
      flex: 0 0 20%;
      max-width: 20%;
    }
  }
  
  @media (max-width: 768px) {
    .table-over {
      overflow-x: auto;
      max-width: 100%;
    }
  
    /* Ensure the table takes up all available width and its cells don't wrap text */
    table {
      width: 100%;
  
      white-space: nowrap;
    }
  }
  
  .container-dashboard {
    padding: 20px 20px;
    background: var(--background);
  }
  
  /* side bar  */
  
  .background-sidebar {
    background: var(--background-sidebar);
  }
  
  .accordion-sidebar {
    background: transparent;
    background-image: none;
    border: none;
    /* border-radius: 5px; */
  }
  
  .position-absolute-cross {
    position: absolute;
    right: 10px;
    top: 10px;
  }
  
  /* Customize accordion button style */
  .accordion-button-dash {
    background-color: transparent;
  
    color: var(--text-color-dark);
    font-size: 16px;
  }
  
  /* Customize the active (expanded) accordion button style */
  .accordion-button-dash[aria-expanded="true"] {
    background-color: transparent;
    background: #4584ff;
    border-radius: 0px;
  }
  
  /* CSS code to change the color of the active accordion default icon to white */
  .accordion-button-dash:not(.collapsed)::after {
    color: white;
  }
  
  .accordion-button-dash:not(.collapsed) {
    background: #4584ff;
    color: white;
  }
  
  .accordion-button::before,
  .accordion-button::after {
    content: none;
  }
  
  .accordion-button {
    background-image: none;
    box-shadow: none;
    outline: none;
    color: var(--text-color-light);
  }
  
  /* Custom CSS to rotate the icon on accordion button click */
  .accordion-button .icon {
    /* Apply your custom icon styles here */
    /* For example, you can use an SVG icon or an image */
    display: inline-block;
    /* Ensure the icon doesn't take the full width */
    transition: transform 0.3s ease;
    /* Add a transition for smooth rotation */
  
    /* Set the initial rotation to point the icon down */
    transform: rotate(180deg);
  
    /* Optional: Add any other styles you want for your icon */
  }
  
  .accordion-button.collapsed .icon {
    /* Rotate the icon 180 degrees clockwise when the button is collapsed */
    transform: rotate(0deg);
  }
  
  /* Customize accordion body style */
  .accordion-body {
    background-color: transparent;
    padding: 10px;
    background: #4584ff;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  
  .accordion-body-faq {
    background-color: transparent;
    padding: 10px;
    background: var(--background-dark-two);
    color: var(--text-color-light);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  
  /* Customize the links inside the accordion body */
  .accordion-body a {
    color: white;
    text-decoration: none;
  }
  
  .accordion-body a:hover {
    text-decoration: none;
  }
  
  body {
    margin: 0;
    padding: 0;
  }
  
  .sidebar {
    height: 100vh;
    /* Adjust this value as needed */
    overflow-y: auto;
    background: var(--background-sidebar);
  }
  
  .cross-button {
    background-color: #e7e7e7b9;
    background-image: none;
    padding: 0;
    /* Adjust the padding as needed */
  }
  
  /* Optional: Style your custom icon */
  .cross-button img {
    color: #00a711;
    width: 20px;
    /* Adjust the width and height as needed */
    height: 20px;
    /* Add more styles as required */
  }
  
  .main-content {
    margin-left: 250px;
    /* Set the margin to the same width as the sidebar */
    padding: 0;
    /* Add some padding to separate the content from the sidebar */
  }
  
  .sidebar::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  
  .sidebar::-webkit-scrollbar-thumb {
    background-color: transparent;
  }
  
  .sidebar::-webkit-scrollbar-track {
    background-color: transparent;
  }
  
  .sidebar::-webkit-scrollbar-corner {
    background-color: transparent;
  }
  
  .sidebar::-webkit-scrollbar-button {
    display: none;
  }
  
  .sidebar::-webkit-scrollbar-track-piece {
    background-color: transparent;
  }
  
  .sidebar-item {
    padding: 10px;
    border-bottom: 1px solid #ccc;
  }
  
  /* over all  */
  
  .ul {
    list-style: none;
  }
  
  .active-class {
    background: #4584ff;
  }
  
  .active-class:hover {
    background: #679bff;
  }
  
  .active2 {
    background: #679bff;
  }
  
  .btn {
    border: none;
  }
  
  .btn:hover {
    background: #679bff;
    color: white;
  }
  .reply:hover {
    background: none;
    color: #000000;
  }
  .reply {
    background: none;
    color: #000000;
  }
  
  .btn-nav:hover {
    background: none;
  }
  
  /* maintenance */
  
  .container-maintenance {
    padding: 48px 30px;
    background: var(--background);
    height: auto;
  }
  
  @media (min-width: 576px) {
    .container-maintenance {
      padding: 20px 20px;
      background: var(--background);
      height: calc(100vh - 75px);
    }
  }
  
  .m-font {
    font-size: 32px;
  }
  
  .m-font2 {
    font-size: 16px;
  }
  
  @media (max-width: 767px) {
    .maintenance {
      padding: 45px 50px;
    }
  
    .m-font {
      font-size: 28px;
    }
  
    .m-font2 {
      font-size: 16px;
    }
  }
  
  @media (max-width: 600px) {
    .m-img {
      width: 300px;
      height: 300px;
    }
  }
  
  @media (max-width: 400px) {
    .m-img {
      width: 200px;
      height: 200px;
    }
  }
  
  .container-404 {
    padding: 48px 30px;
    background: var(--background);
    height: calc(100vh - 75px);
  }
  
  .error-404 {
    padding: 85px 0px;
  }
  
  .error {
    width: 792px;
    height: 312px;
  }
  
  .error-card {
    padding: 68px 50px;
  }
  
  @media (max-width: 1200px) {
    .img-error {
      width: 500px;
      height: 200px;
    }
  }
  
  @media (max-width: 650px) {
    .img-error {
      width: 300px;
      height: 100px;
    }
  
    .error-font {
      font-size: 14px;
    }
  
    .error-font2 {
      font-size: 10px;
    }
  }
  
  /* maintenance end  */
  
  .container-calendar {
    padding: 48px 30px;
    background: var(--background);
    height: auto;
  }
  
  @media (max-width: 1200px) {
    .container-calendar {
      padding: 48px 30px;
      background: var(--background);
      height: calc(100vh - 75px);
    }
  }
  
  /* media  */
  @media (min-width: 1200px) and (max-width: 1350px) {
    .sidebar-media {
      font-size: 16px;
    }
  }
  
  /* Remove padding from the .row on larger screens */
  @media (min-width: 992px) {
    .row.no-gutters {
      margin-right: 0;
      margin-left: 0;
    }
  }
  
  /* Remove padding from the .col-lg-3 and .col-xl-2 columns on larger screens */
  @media (min-width: 992px) {
    .col-lg-3,
    .col-xl-2 {
      padding-right: 0;
      padding-left: 0;
    }
  }
  
  /* Define the styles for the offcanvas on small screens (991px or less) */
  @media (max-width: 991px) {
    .offcanvas.offcanvas-start {
      /* Your desired styles for small screens go here */
      /* For example: */
      width: 300px !important;
    }
  }
  
  /* add customer  */
  
  @media (min-width: 1200px) {
    .con-add-customer {
      height: calc(100vh - 75px);
    }
  }
  
  /* cards cards and only cards  */
  .copy-cards-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 25px;
    height: 25px;
    background: #007bff;
    padding: 4px;
    border-radius: 5px;
  }
  
  .popup {
    display: none;
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: var(--text-color-dark);
    padding: 10px 20px;
    border-radius: 5px;
    z-index: 9999;
  }
  
  .hide-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  
  .hide-scroll::-webkit-scrollbar-thumb {
    background-color: transparent;
  }
  
  .hide-scroll::-webkit-scrollbar-track {
    background-color: transparent;
  }
  
  .hide-scroll::-webkit-scrollbar-corner {
    background-color: transparent;
  }
  
  .hide-scroll::-webkit-scrollbar-button {
    display: none;
  }
  
  .hide-scroll::-webkit-scrollbar-track-piece {
    background-color: transparent;
  }
  
  .p .selected {
    background-color: white;
    color: #007bff;
  }
  
  .p.flipped-preview .preview-button {
    background: white;
    color: #007bff;
  }
  
  .p.flipped-code .code-button {
    background-color: white;
    color: #007bff;
  }
  
  .card-container {
    perspective: 1000px;
    width: 300px;
    height: 430px;
  }
  
  .card-container-2 {
    perspective: 1000px;
    width: 300px;
    height: 433px;
  }
  
  .card-container-3 {
    perspective: 1000px;
    width: 300px;
    height: 400px;
  }
  
  .card-container-4 {
    perspective: 1000px;
    width: 300px;
    height: 440px;
  }
  
  .card-container-5 {
    perspective: 1000px;
    width: 600px;
    height: 255px;
  }
  
  .card-container-6 {
    perspective: 1000px;
    width: 600px;
    height: 255px;
  }
  
  .card-container-7 {
    margin-top: 60px;
    perspective: 1000px;
    width: 280px;
    height: 360px;
  }
  
  .card-container-8 {
    margin-top: 60px;
    perspective: 1000px;
    width: 280px;
    height: 360px;
  }
  
  .card-container-9 {
    margin-top: 60px;
    perspective: 1000px;
    width: 280px;
    height: 360px;
  }
  
  .card-container-10 {
    margin-top: 60px;
    perspective: 1000px;
    width: 280px;
    height: 360px;
  }
  
  .card-container-11 {
    margin-top: 60px;
    margin-bottom: 40px;
    perspective: 1000px;
    width: 280px;
    height: 240px;
  }
  
  .card-container-12 {
    margin-top: 60px;
    perspective: 1000px;
    width: 280px;
    height: 240px;
  }
  
  .card-container-13 {
    margin-top: 60px;
    perspective: 1000px;
    width: 280px;
    height: 240px;
  }
  
  .card-container-14 {
    margin-top: 60px;
    perspective: 1000px;
    width: 280px;
    height: 240px;
  }
  
  .card-container-15 {
    margin-top: 30px;
    width: 800px;
    height: 360px;
  }
  
  .card-container-16 {
    margin-top: 55px;
    perspective: 1000px;
    width: 380px;
    height: 360px;
  }
  
  @media (min-width: 1470px) and (max-width: 1600px) {
    .card-container {
      perspective: 1000px;
      width: 280px;
      height: 430px;
    }
  
    .card-container-2 {
      perspective: 1000px;
      width: 280px;
      height: 440px;
    }
  
    .card-container-3 {
      perspective: 1000px;
      width: 280px;
      height: 400px;
    }
  
    .card-container-4 {
      perspective: 1000px;
      width: 280px;
      height: 420px;
    }
  
    .card-container-7 {
      perspective: 1000px;
      width: 280px;
      height: 360px;
    }
  
    .card-container-8 {
      perspective: 1000px;
      width: 280px;
      height: 360px;
    }
  
    .card-container-9 {
      perspective: 1000px;
      width: 280px;
      height: 360px;
    }
  
    .card-container-10 {
      perspective: 1000px;
      width: 280px;
      height: 360px;
    }
  }
  
  @media (min-width: 1340px) and (max-width: 1469px) {
    .card-container {
      perspective: 1000px;
      width: 250px;
      height: 420px;
    }
  
    .card-container-2 {
      perspective: 1000px;
      width: 250px;
      height: 420px;
    }
  
    .card-container-3 {
      perspective: 1000px;
      width: 250px;
      height: 400px;
    }
  
    .card-container-4 {
      perspective: 1000px;
      width: 250px;
      height: 430px;
    }
  
    .card-container-7 {
      perspective: 1000px;
      width: 250px;
      height: 380px;
    }
  
    .card-container-8 {
      perspective: 1000px;
      width: 250px;
      height: 380px;
    }
  
    .card-container-9 {
      perspective: 1000px;
      width: 250px;
      height: 380px;
    }
  
    .card-container-10 {
      perspective: 1000px;
      width: 250px;
      height: 380px;
    }
  
    .card-container-11 {
      margin-top: 60px;
      perspective: 1000px;
      width: 250px;
      height: 240px;
    }
  
    .card-container-12 {
      margin-top: 60px;
      perspective: 1000px;
      width: 250px;
      height: 240px;
    }
  
    .card-container-13 {
      margin-top: 60px;
      perspective: 1000px;
      width: 250px;
      height: 240px;
    }
  
    .card-container-14 {
      margin-top: 60px;
      perspective: 1000px;
      width: 250px;
      height: 240px;
    }
  }
  
  /* @media (min-width: 0px) and (max-width : 1460px) {
      .card-container-5 {
          perspective: 1000px;
          width: 535px;
          height: 255px;
      }
  
      .card-container-6 {
          perspective: 1000px;
          width: 535px;
          height: 250px;
      }
  } */
  
  @media (min-width: 1200px) and (max-width: 1340px) {
    .card-container {
      perspective: 1000px;
      width: 220px;
      height: 400px;
    }
  
    .card-container-2 {
      perspective: 1000px;
      width: 220px;
      height: 420px;
    }
  
    .card-container-3 {
      perspective: 1000px;
      width: 220px;
      height: 380px;
    }
  
    .card-container-4 {
      perspective: 1000px;
      width: 220px;
      height: 400px;
    }
  
    .card-container-5 {
      perspective: 1000px;
      width: 500px;
      height: 265px;
    }
  
    .card-container-6 {
      perspective: 1000px;
      width: 500px;
      height: 250px;
    }
  
    .card-container-7 {
      perspective: 1000px;
      width: 220px;
      height: 450px;
    }
  
    .card-container-8 {
      perspective: 1000px;
      width: 220px;
      height: 380px;
    }
  
    .card-container-9 {
      perspective: 1000px;
      width: 220px;
      height: 380px;
    }
  
    .card-container-10 {
      perspective: 1000px;
      width: 220px;
      height: 380px;
    }
  
    .card-container-11 {
      margin-top: 60px;
      perspective: 1000px;
      width: 350px;
      height: 240px;
    }
  
    .card-container-12 {
      margin-top: 60px;
      perspective: 1000px;
      width: 350px;
      height: 240px;
    }
  
    .card-container-13 {
      margin-top: 60px;
      perspective: 1000px;
      width: 350px;
      height: 240px;
    }
  
    .card-container-14 {
      margin-top: 60px;
      perspective: 1000px;
      width: 350px;
      height: 240px;
    }
  }
  
  @media (min-width: 1140px) and (max-width: 1200px) {
    .card-container {
      perspective: 1000px;
      width: 380px;
      height: 500px;
    }
  
    .card-container-2 {
      perspective: 1000px;
      width: 380px;
      height: 500px;
    }
  
    .card-container-3 {
      margin-top: 60px;
      perspective: 1000px;
      width: 380px;
      height: 440px;
    }
  
    .card-container-4 {
      margin-top: 60px;
      perspective: 1000px;
      width: 380px;
      height: 480px;
    }
  
    .card-container-7 {
      perspective: 1000px;
      width: 380px;
      height: 300px;
    }
  
    .card-container-8 {
      perspective: 1000px;
      width: 380px;
      height: 420px;
    }
  
    .card-container-9 {
      margin-top: 60px;
      perspective: 1000px;
      width: 380px;
      height: 380px;
    }
  
    .card-container-10 {
      margin-top: 60px;
      perspective: 1000px;
      width: 380px;
      height: 280px;
    }
  
    .card-container-11 {
      margin-top: 60px;
      perspective: 1000px;
      width: 280px;
      height: 240px;
    }
  
    .card-container-12 {
      margin-top: 60px;
      perspective: 1000px;
      width: 280px;
      height: 240px;
    }
  
    .card-container-13 {
      margin-top: 60px;
      perspective: 1000px;
      width: 280px;
      height: 240px;
    }
  
    .card-container-14 {
      margin-top: 60px;
      perspective: 1000px;
      width: 280px;
      height: 240px;
    }
  }
  
  @media (min-width: 1050px) and (max-width: 1139px) {
    .card-container {
      perspective: 1000px;
      width: 350px;
      height: 500px;
    }
  
    .card-container-2 {
      perspective: 1000px;
      width: 350px;
      height: 500px;
    }
  
    .card-container-3 {
      margin-top: 60px;
      perspective: 1000px;
      width: 350px;
      height: 440px;
    }
  
    .card-container-4 {
      margin-top: 60px;
      perspective: 1000px;
      width: 350px;
      height: 480px;
    }
  
    .card-container-7 {
      perspective: 1000px;
      width: 380px;
      height: 300px;
    }
  
    .card-container-8 {
      perspective: 1000px;
      width: 380px;
      height: 420px;
    }
  
    .card-container-9 {
      margin-top: 60px;
      perspective: 1000px;
      width: 380px;
      height: 380px;
    }
  
    .card-container-10 {
      margin-top: 60px;
      perspective: 1000px;
      width: 380px;
      height: 280px;
    }
  }
  
  @media (min-width: 992px) and (max-width: 1050px) {
    .card-container {
      perspective: 1000px;
      width: 330px;
      height: 500px;
    }
  
    .card-container-2 {
      perspective: 1000px;
      width: 330px;
      height: 500px;
    }
  
    .card-container-3 {
      margin-top: 60px;
      perspective: 1000px;
      width: 330px;
      height: 440px;
    }
  
    .card-container-4 {
      margin-top: 60px;
      perspective: 1000px;
      width: 330px;
      height: 480px;
    }
  
    .card-container-7 {
      perspective: 1000px;
      width: 380px;
      height: 300px;
    }
  
    .card-container-8 {
      perspective: 1000px;
      width: 380px;
      height: 420px;
    }
  
    .card-container-9 {
      margin-top: 60px;
      perspective: 1000px;
      width: 380px;
      height: 380px;
    }
  
    .card-container-10 {
      margin-top: 60px;
      perspective: 1000px;
      width: 380px;
      height: 280px;
    }
  }
  
  @media (min-width: 890px) and (max-width: 991px) {
    .card-container {
      perspective: 1000px;
      width: 400px;
      height: 500px;
    }
  
    .card-container-2 {
      perspective: 1000px;
      width: 400px;
      height: 490px;
    }
  
    .card-container-3 {
      margin-top: 60px;
      perspective: 1000px;
      width: 400px;
      height: 480px;
    }
  
    .card-container-4 {
      margin-top: 60px;
      perspective: 1000px;
      width: 400px;
      height: 520px;
    }
  
    .card-container-7 {
      perspective: 1000px;
      width: 400px;
      height: 300px;
    }
  
    .card-container-8 {
      perspective: 1000px;
      width: 400px;
      height: 420px;
    }
  
    .card-container-9 {
      margin-top: 70px;
      perspective: 1000px;
      width: 400px;
      height: 380px;
    }
  
    .card-container-10 {
      margin-top: 70px;
      perspective: 1000px;
      width: 400px;
      height: 280px;
    }
  }
  
  @media (min-width: 0px) and (max-width: 767px) {
    .card-container {
      perspective: 1000px;
      width: 350px;
      height: 500px;
    }
  
    .card-container-2 {
      margin-top: 60px;
      perspective: 1000px;
      width: 350px;
      height: 490px;
    }
  
    .card-container-3 {
      margin-top: 60px;
      perspective: 1000px;
      width: 350px;
      height: 480px;
    }
  
    .card-container-4 {
      margin-top: 60px;
      perspective: 1000px;
      width: 350px;
      height: 520px;
    }
  
    .card-container-7 {
      margin-top: 60px;
      perspective: 1000px;
      width: 350px;
      height: 300px;
    }
  
    .card-container-8 {
      margin-top: 60px;
      perspective: 1000px;
      width: 350px;
      height: 420px;
    }
  
    .card-container-9 {
      margin-top: 70px;
      perspective: 1000px;
      width: 350px;
      height: 380px;
    }
  
    .card-container-10 {
      margin-top: 70px;
      perspective: 1000px;
      width: 350px;
      height: 280px;
    }
  }
  
  @media (min-width: 768px) and (max-width: 889px) {
    .card-container {
      perspective: 1000px;
      width: 350px;
      height: 500px;
    }
  
    .card-container-2 {
      perspective: 1000px;
      width: 350px;
      height: 490px;
    }
  
    .card-container-3 {
      margin-top: 60px;
      perspective: 1000px;
      width: 350px;
      height: 480px;
    }
  
    .card-container-4 {
      margin-top: 60px;
      perspective: 1000px;
      width: 350px;
      height: 520px;
    }
  
    .card-container-7 {
      perspective: 1000px;
      width: 400px;
      height: 300px;
    }
  
    .card-container-8 {
      perspective: 1000px;
      width: 400px;
      height: 420px;
    }
  
    .card-container-9 {
      margin-top: 70px;
      perspective: 1000px;
      width: 400px;
      height: 380px;
    }
  
    .card-container-10 {
      margin-top: 70px;
      perspective: 1000px;
      width: 400px;
      height: 280px;
    }
  }
  
  /* second row 2 cards  */
  @media (min-width: 1500px) and (max-width: 1600px) {
    .card-container-5 {
      margin-top: 20px;
      perspective: 1000px;
      width: 580px;
      height: 255px;
    }
  
    .card-container-6 {
      margin-top: 20px;
      perspective: 1000px;
      width: 580px;
      height: 255px;
    }
  }
  
  @media (min-width: 1400px) and (max-width: 1499px) {
    .card-container-5 {
      margin-top: 20px;
      perspective: 1000px;
      width: 540px;
      height: 255px;
    }
  
    .card-container-6 {
      margin-top: 20px;
      perspective: 1000px;
      width: 540px;
      height: 255px;
    }
  }
  
  @media (min-width: 1200px) and (max-width: 1399px) {
    .card-container-5 {
      margin-top: 20px;
      perspective: 1000px;
      width: 600px;
      height: 260px;
    }
  
    .card-container-6 {
      margin-top: 60px;
      perspective: 1000px;
      width: 600px;
      height: 260px;
    }
  }
  
  @media (min-width: 768px) and (max-width: 1199px) {
    .card-container-5 {
      margin-top: 20px;
      perspective: 1000px;
      width: 600px;
      height: 260px;
    }
  
    .card-container-6 {
      margin-top: 60px;
      perspective: 1000px;
      width: 600px;
      height: 260px;
    }
  }
  
  @media (min-width: 552px) and (max-width: 767px) {
    .card-container-5 {
      margin-top: 20px;
      perspective: 1000px;
      width: 500px;
      height: 230px;
    }
  
    .card-container-6 {
      margin-top: 60px;
      perspective: 1000px;
      width: 500px;
      height: 230px;
    }
  
    .card-container-7 {
      margin-top: 60px;
      perspective: 1000px;
      width: 350px;
      height: 400px;
    }
  }
  
  @media (min-width: 0px) and (max-width: 551px) {
    .card-container-5 {
      margin-top: 20px;
      perspective: 1000px;
      width: 450px;
      height: 230px;
    }
  
    .card-container-6 {
      margin-top: 60px;
      perspective: 1000px;
      width: 500px;
      height: 230px;
    }
  
    .card-container-7 {
      margin-top: 30px;
      perspective: 1000px;
      width: 350px;
      height: 400px;
    }
  }
  @media (max-width: 380px) {
    .card-container-16 {
      margin-top: 25px;
      perspective: 1000px;
      width: 380px;
      height: 420px;
    }
  }
  
  .cards {
    width: 100%;
    height: 100%;
    transition: transform 0.5s;
    transform-style: preserve-3d;
  }
  
  .card-inner {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    position: relative;
  }
  
  .card-container.flipped .card {
    transform: rotateY(180deg);
  }
  
  .card-container-2.flipped .card {
    transform: rotateY(180deg);
  }
  
  .card-container-3.flipped .card {
    transform: rotateY(180deg);
  }
  
  .card-container-4.flipped .card {
    transform: rotateY(180deg);
  }
  
  .card-container-5.flipped .card {
    transform: rotateY(180deg);
  }
  
  .card-container-6.flipped .card {
    transform: rotateY(180deg);
  }
  
  .card-container-7.flipped .card {
    transform: rotateY(180deg);
  }
  
  .card-container-8.flipped .card {
    transform: rotateY(180deg);
  }
  
  .card-container-9.flipped .card {
    transform: rotateY(180deg);
  }
  
  .card-container-10.flipped .card {
    transform: rotateY(180deg);
  }
  
  .card-container-11.flipped .card {
    transform: rotateY(180deg);
  }
  
  .card-container-12.flipped .card {
    transform: rotateY(180deg);
  }
  
  .card-container-13.flipped .card {
    transform: rotateY(180deg);
  }
  
  .card-container-14.flipped .card {
    transform: rotateY(180deg);
  }
  
  .card-container-15.flipped .card {
    transform: rotateY(180deg);
  }
  
  .card-container-16.flipped .card {
    transform: rotateY(180deg);
  }
  
  .card-front,
  .card-back {
    position: absolute;
  
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .card-back {
    transform: rotateY(180deg);
    background-color: #f8f9fa;
    border-radius: 5px;
  }
  
  .card-back-message {
    font-size: 18px;
    margin-bottom: 20px;
  }
  
  /* email modal  */
  .modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    color: var(--bs-modal-color);
    pointer-events: auto;
    background-color: var(--bg-light);
    background-clip: padding-box;
    border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
    border-radius: var(--bs-modal-border-radius);
    outline: 0;
  }
  
  input{
    color: var(--text-color-light);
  }
  textarea{
    color: var(--text-color-light);
  }
  
  
  
  
  /* testing dark mode through variables  */
  :root {
    --background: #e7e7e7;
    --bg-light: #ffffff !important;
    --background-dark: #0D1116;
    --background-dark-two: #161c23;
    --background-dark-three: #4584ff14;
    --background-sidebar: #091731 ;
    --need-help: #091731 ;
    --text-color: #000000;
    --text-color-light-special-case: #ffffff;
    --custom-background: #f8f8f8;
    --body:#ffffff ;
    --bs-border-color: #7272728c !important;
    --call: #f0f6ff; 
    --text-color-dark: #fff;
    --pricing: #ffffff !important;
    /* --background-light: #e7e7e7;
    --bg-light-light: #ffffff !important;
    --background-dark: #0D1116;
    --background-dark-two: #161c23;
    --background-dark-three: #4584ff14;
    --background-sidebar-light: #091731 ;
    --need-help-light: #091731 ;
    --text-color-light: #000000;
    --text-color-light-special-case: #ffffff;
    --custom-background-light: #f8f8f8;
    --body-light:#ffffff ;
    --bs-border-color: #7272728c !important;
    --call-light: #f0f6ff; 
    --text-color-dark: #fff; */
  }
  
  @media (prefers-color-scheme: dark) {
    :root {
      .dark-mode{
      --background: var(--background-dark) ;
      --text-color: var(--text-color-light-special-case) ;
      --bg-light: var(--background-dark-two) !important ;
      --text-color-light: var(--text-color-dark) !important ;
      --text-color-light-special-case: #ffffff;
      --background-sidebar: var(--background-dark-two) !important ; 
      --call: var(--background-dark-three) !important ;
      --custom-background: var(--background-dark) ;
      --body: var(--background-dark) ;
      --need-help: var(--background-dark) ;
      --pricing: var(--background-dark-three) !important ;
      }
    }
  
  }
  /* [color-scheme="dark"] {
    --background: var(--background-dark) ;
      --bg-light: var(--background-dark-two) !important ;
      --text-color-light: var(--text-color-dark) !important ;
      --text-color-light-special-case: #ffffff;
      --background-sidebar: var(--background-dark-two) !important ; 
      --call: var(--background-dark-three) !important ;
      --custom-background: var(--background-dark) ;
      --body: var(--background-dark) ;
      --need-help: var(--background-dark) ;
  } */
  /* @media (prefers-color-scheme: light) {
    :root {
      --background: var(--background-light) ;
      --bg-light: var(--bg-light-light) !important ;
      --text-color-light: var(--text-color-light) !important ;
      --text-color-light-special-case: #ffffff;
      --background-sidebar: var(--background-sidebar-light) !important ; 
      --call: var(--call-light) !important ;
      --custom-background: var(--custom-background-light) ;
      --body: var(--body-light) ;
      --need-help: var(--need-help-light) ;
      
    }
  
  } */
  /* [color-scheme="light"]{
    --background: var(--background-light) ;
      --bg-light: var(--bg-light-light) !important ;
      --text-color-light: var(--text-color-light) !important ;
      --text-color-light-special-case: #ffffff;
      --background-sidebar: var(--background-sidebar-light) !important ; 
      --call: var(--call-light) !important ;
      --custom-background: var(--custom-background-light) ;
      --body: var(--body-light) ;
      --need-help: var(--need-help-light) ;
  } */
  body {
    color: var(--text-color-light);
    background: var(--body);
  }
  
  /* price page  */
  #tabs-nav .active {
    border-bottom: 3px solid #4584FF;
  }
  
  
  .pricing {
    background: var(--pricing);
  }
  
  .card3-pricing-position-absolute{
    position: absolute;
    top: -25px;
    right: -60px;
  }
  @media (max-width: 767.98px) {
    .card3-pricing-position-absolute{
      position: absolute;
      top: -25px;
      right: 0px;
    }
    .table-pricing{
      min-width: 1100px;
    }
  }
  
  
  .overflow-pricing{
    overflow-x: auto;
    min-width: 100%;
  }

  /* Bootstrap 4-style alert close button (.close), dipakai di messages.php
     dan messages.blade.php. Bootstrap 5 tidak lagi menyediakan style-nya
     (diganti .btn-close), jadi didefinisikan ulang di sini secara global. */
  .close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }

  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    opacity: .75;
    outline: none;
    box-shadow: none;
  }

  /* Sidebar brand (logo) */
  .sidebar-brand {
    gap: 12px;
  }

  .sidebar-brand-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #4584ff 0%, #2b5fd9 100%);
    color: #ffffff;
    font-size: 18px;
    box-shadow: 0 4px 14px rgba(69, 132, 255, 0.4);
  }

  .fun-quote {
    font-size: .65rem;
    line-height: 1.3;
    max-width: 280px;
    white-space: normal;
    text-align: right;
  }

  .sidebar-brand-text {
    color: var(--text-color-light-special-case);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    white-space: nowrap;
  }