#main-container {
     text-align: center;
     height: 100%;
 }

 #home-section {
     display: flex;
     justify-content: center;
     align-items: center;
     margin-top: -50px;
     height: 100%;
 }

 .pulse-circle {
     width: 200px;
     height: 200px;
     background-color: #e23f2d;
     border: 1px solid #aeaead;
     color: white;
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
     font-family: 'Poppins', sans-serif;
     font-weight: 700;
     font-size: 18px;
     position: relative;
     cursor: pointer;
     z-index: 1;
 }

 .pulse-circle::before {
     content: "";
     position: absolute;
     width: 100%;
     height: 100%;
     background-color: #EB4E3E;
     border-radius: 50%;
     z-index: -1;
     animation: pulse-out 0.8s infinite;
 }

 @keyframes pulse-out {
     0% {
         transform: scale(0.5);
         opacity: 1;
     }

     100% {
         transform: scale(1.6);
         opacity: 0;
     }
 }

 .report-slogan {
     margin-top: 40px;
 }

 .slogan-title {
     font-family: 'Poppins', sans-serif;
     font-size: 13px;
 }

 .slogan-subtitle {
     font-family: 'Poppins', sans-serif;
     font-size: 13px;
 }

 .navigation-main {
     position: fixed;
     bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
     justify-content: center;
     text-align: center;
     width: 200px;
 }

 .navigation-area {
     width: 100%;
     display: flex;
     justify-content: center;
     background-color: #4f4f4f;
     border-radius: 30px;

 }

 .navigation-container {
     justify-content: space-evenly;
     align-items: center;
     display: flex;
     width: 100%;
 }

 .navigation-btn i {
     color: #7f7f7f;
 }

 .navigation-btn i.active {
     color: #EB4E3E;
 }

 .nav-home {
     font-size: 35px;
 }

 .nav-reports {
     font-size: 32px;
 }

 .app-version {
     font-size: 8px;
     color: var(--text-main);
     font-family: 'Poppins', sans-serif;
     width: 100%;
 }

 .image-container {
     margin-bottom: 10px;
 }

 .image-container img {
     width: 150px;
     height: 100%;
     margin-left: -5px;
 }

 .header-island {
     position: absolute;
     top: 10px;
     left: 50%;
     transform: translateX(-50%);
 }

 .connection-info {
     border-radius: 30px;
     background-color: #4f4f4f;
     width: 32px;
     height: 32px;
     display: flex;
     align-items: center;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     font-family: 'Poppins', sans-serif;
     z-index: 1000;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .connection-dot {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background-color: green;
     transition: background-color 0.3s;
     display: flex;
     justify-content: center;
     align-items: center;
     border: 1px solid white;
 }

 .connection-text {
     font-size: 10px;
     color: #fff;
 }

 .sync-info {
     border-radius: 30px;
     background-color: #4f4f4f;
     padding: 5px 10px;
     display: flex;
     align-items: center;
     gap: 6px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     font-family: 'Poppins', sans-serif;
     z-index: 1000;
 }

 .sync-text {
     font-size: 10px;
     color: #fff;
 }

 /* Loading spinner */
 .sync-loading {
     width: 12px;
     height: 12px;
     border: 2px solid #ccc;
     border-top: 2px solid #007bff;
     border-radius: 50%;
     animation: spin 0.7s linear infinite;
 }

 @keyframes spin {
     to {
         transform: rotate(360deg);
     }
 }

 /* Success check */
 .sync-success {
     font-size: 12px;
     color: green;
 }

 /* Error */
 .sync-error {
     font-size: 12px;
     color: red;
 }

 /* Animated Checkmark */
 .checkmark {
     width: 14px;
     height: 14px;
 }

 .check-path {
     fill: none;
     stroke: green;
     stroke-width: 3;
     stroke-linecap: round;
     stroke-linejoin: round;
     stroke-dasharray: 30;
     stroke-dashoffset: 30;
     animation: drawCheck 0.4s ease forwards;
 }

 @keyframes drawCheck {
     to {
         stroke-dashoffset: 0;
     }
 }


 .swal2-modal {
     border-radius: 18px !important;
 }

 /* Change the Title font size and weight */
 .my-swal-title {
     font-size: 15px !important;
     font-weight: 700 !important;
     font-family: 'Poppins', sans-serif;
 }

 /* Change the Body Text size */
 .my-swal-text {
     font-size: 12px !important;
     color: #cccccc !important;
     font-family: 'Poppins', sans-serif;
 }

 /* Change the Button size and padding */
 .my-swal-button {
     font-size: 12px !important;
     padding: 10px 30px !important;
     border-radius: 30px !important;
     text-transform: uppercase;
     font-weight: bold;
     font-family: 'Poppins', sans-serif;
 }

 .swal2-cancel {
     font-size: 12px !important;
     padding: 10px 30px !important;
     border-radius: 30px !important;
     text-transform: uppercase;
     font-weight: bold;
     font-family: 'Poppins', sans-serif;
 }

 body.swal2-height-auto {
     height: 100dvh !important;
 }