body {
   background: #f5f5f5;
   /*display: flex;*/
   justify-content: center;
   align-items: center;
   height: 100vh;
   margin: 0;
   /*padding: 0px 0px 0px 20px;*/
 }

 html {
   max-width: 100%;
   overflow-x: hidden !important;
 }

 /* -------------------------
   HEADER (TOP BAR)
------------------------- */
 .header-bar {
   background: #fff;
   border-bottom: 1px solid #eee;
   padding: 12px 20px;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }

 .profile-img {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   border: 2px solid #ddd;
   object-fit: cover;
   cursor: pointer;
 }

 /*button*/

 .btn-custom {
   background-color: #6366f1 !important;
   color: #fff !important;
 }

 .btn-custom:hover {
   background-color: #4f46e5 !important;
   color: #fff !important;
 }


 .btn-default {
   background-color: #ffc107 !important;
   color: #fff !important;
 }

 .btn-default:hover {
   background-color: #ffc107 !important;
   color: #fff !important;
 }

 /* -------------------------
   SIDEBAR (LEFT)
------------------------- */


 .sidebar .nav-link {
   color: #555;
   padding: 5px 5px;
   border-radius: 8px;
   display: flex;
   align-items: center;
   margin-bottom: 8px;
   /*font-weight: 500;*/
   cursor: pointer;
 }

 .sidebar .nav-link i {
   margin-right: 12px;
   font-size: 18px;
 }

 /* Only text color changes when active */
 .sidebar .nav-link.active {
   color: #5e2b60 !important;
   background: #cbbebe6b !important;
   font-weight: 600;
 }

 .sidebar .nav-link:hover {
   background: #eee;
 }

 /* CARDS */
 .card-custom {
   border-radius: 12px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
   border: none;
   background: #fff;
 }

 .chart-area {
   height: 250px;
   background: #f3e8f7;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #744276;
 }

 /* TOP BAR (Only mobile) */
 .topbar {
   display: flex;
   align-items: center;
   padding: 12px 15px;
   background: #5e2b60;
   color: white;
 }

 .hamburger {
   font-size: 26px;
   cursor: pointer;
   margin-right: 12px;
 }

 /* MOBILE TOPBAR */
 .topbar {
   background: #5e2b60;
   color: #fff;
   padding: 12px 20px;
   font-size: 18px;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .hamburger {
   font-size: 26px;
   cursor: pointer;
 }

 /* SIDEBAR */
 .sidebar {
   min-width: 280px;
   background: #fff;
   min-height: 100vh;
   border-right: 1px solid #eee;
   padding: 20px;
   transition: left 0.3s ease;
   box-shadow: 0 0 3px #3c485826;
   background-color: #fff;
   transition: all .3s ease;
   width: 300px;
   height: auto;
   /*max-height: 100%;*/

   top: 0;
   left: -300px;
   z-index: 999;
 }

 .page-wapper {
   display: inline-block;
   width: 100%;
   padding-left: 0;
   overflow-x: hidden;
   transition: all .3s ease;
 }

 .sidebar .logo {
   font-weight: 700;
   font-size: 20px;
   color: #5e2b60;
   margin-bottom: 20px;
 }

 .nav-link {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 12px 14px;
   border-radius: 8px;
   cursor: pointer;
 }

 .nav-link:hover {
   background: #f3e8fa;
   color: #5e2b60;
 }

 .nav-link.active {
   background: #e8d8f1;
   color: #5e2b60 !important;
 }

 /* SUBMENU */
 .submenu-header {
   cursor: pointer !important;
 }

 .submenu {
   list-style: none;
   padding-left: 38px;
   margin-top: 5px;
 }

 .submenu li a {
   display: block;
   padding: 8px 0;
   font-size: 16px;
   color: #444;
   text-decoration: none;
   /* font-weight: bold; */
 }

 .submenu li a:hover,
 .submenu li a.active {
   color: #5e2b60;
   font-weight: 600;
 }

 /* MOBILE VIEW */
 @media (max-width: 768px) {
   .sidebar {
     position: fixed;
     left: -260px;
     top: 0;
     z-index: 1000;
   }

   .sidebar.open {
     left: 0;
   }

   .content-area {
     padding-left: 0;
   }
 }

 /* MOBILE RESPONSIVE */
 @media (max-width: 768px) {

   .login-box {
     width: 350px !important;

   }

   .sidebar {
     position: fixed;
     left: 0;
     top: 0;
     height: 100vh;
     transform: translateX(-100%);
     /* hide */
     z-index: 1000;
   }

   .sidebar.open {
     transform: translateX(0);
     /* show */
   }

   .content-area {
     padding-top: 15px;
   }
 }

 /*login pae */



 .login-box {
   background: #fff;
   /*width: 100%;*/
   width: 450px;
   padding: 35px;
   border-radius: 15px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
   text-align: center;
 }

 .logo {
   width: 85px;
   height: auto;
   margin-bottom: 20px;
 }

 .title {
   font-size: 26px;
   font-weight: 700;
   color: #fff;
 }

 .subtitle {
   font-size: 14px;
   color: #777;
   margin-bottom: 25px;
 }

 .input-group label {
   text-align: left;
   width: 100%;
   font-size: 14px;
   margin-bottom: 5px;
   color: #444;
 }

 .input-group input {
   width: 100%;
   padding: 12px;
   border-radius: 8px;
   border: 1px solid #ccc;
   /*margin-bottom: 18px;*/
   font-size: 15px;
 }

 .input-group {
   margin-bottom: 18px;
 }

 .btn-login {
   width: 100%;
   background: #5e2b60;
   color: #fff;
   padding: 12px;
   border-radius: 8px;
   font-size: 16px;
   border: none;
   transition: 0.3s;
 }

 .btn-login:hover {
   background: #4b224d;
 }

 .footer-text {
   margin-top: 20px;
   font-size: 14px;
   color: #666;
 }

 .footer-text a {
   text-decoration: none;
   font-weight: bold;
   color: #5e2b60;
 }

 .error-form-text {
   width: 100%;
   text-align: left;
   color: red;
   font-size: 18px;
   font-style: italic;
 }

 /*loader css*/

 #loader {
   position: fixed;
   inset: 0;
   /* top:0; right:0; bottom:0; left:0 */
   background: rgb(255 255 255 / 67%);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 9999;
   transition: opacity 400ms ease, visibility 400ms ease;
   visibility: visible;
   opacity: 1;
 }

 /* Hidden state after page loads */
 #loader.fade-out {
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
 }

 /* Spinner */
 .spinner {
   width: 78px;
   height: 78px;
   border-radius: 50%;
   border: 8px solid rgba(0, 0, 0, 0.08);
   border-top-color: #5e2b60;
   /* blue top */
   animation: spin 1s linear infinite;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
 }

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

 /* optional small text under spinner */
 .loader-text {
   margin-top: 14px;
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
   font-size: 14px;
   color: #333;
   text-align: center;
 }

 .ngx-pagination {
   margin-left: 0;
   margin-bottom: 1rem;
   margin-top: 10px;
 }

 .ngx-pagination .current {
   padding: .1875rem .625rem;
   background: #5e2b60;
   color: #fefefe;
   cursor: default;
 }

 /*country css*/

 /* --- Hide country name & dial code in dropdown --- */
 .iti__country-name,
 .iti__dial-code {
   /*display: none !important;*/
 }

 /* --- Hide dial code beside input --- */
 .iti--separate-dial-code .iti__selected-dial-code {
   /*display: none !important;*/
 }

 .iti__flag {
   margin-right: 0 !important;
 }

 .iti {
   position: relative;
   display: inline-block;
   width: 100%;
   height: 57px;
 }

 /* Input box fix */

 /*breadcrums*/

 /* Main Container */

 .top-container {
   background: #fff;
   padding: 10px 7px;
   border-radius: 5px;
 }

 .header-container {
   background: #ffffff;
   padding: 18px 20px;
   border-radius: 12px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
   margin-bottom: 25px;
 }

 /* Breadcrumb */
 .breadcrumb {
   font-size: 18px;
   font-weight: 400;
   color: #555;
   margin-bottom: 0px;
   display: flex;
   align-items: center;
   padding-left: 10px;
 }

 .breadcrumb .divider {
   margin: 0 6px;
   color: #aaa;
 }

 .breadcrumb .active {
   color: #555;
   font-weight: 400;
 }

 /* Filters row */
 .filters-row {
   display: flex;
   align-items: center;
   gap: 10px;
   flex-wrap: wrap;
 }

 /* Field container */
 .field {
   position: relative;
 }

 .field input,
 .field select {
   padding: 8px 10px 8px 32px;
   border: 1px solid #ddd;
   border-radius: 8px;
   height: 38px;
   font-size: 14px;
   outline: none;
   width: 160px;
   background: #fff;
 }

 .field input:focus,
 .field select:focus {
   border-color: #6c5ce7;
   box-shadow: 0 0 3px rgba(108, 92, 231, 0.4);
 }

 /* Field Icon */
 .field .icon {
   position: absolute;
   left: 10px;
   top: 50%;
   transform: translateY(-50%);
   color: #888;
   font-size: 13px;
 }

 /* Buttons */
 .btn {
   height: 38px;
   padding: 0 14px;
   display: flex;
   align-items: center;
   gap: 6px;
   border-radius: 8px;
   font-size: 13px;
   cursor: pointer;
   border: none;
   transition: 0.2s;
 }

 /* Button Colors */
 .btn-primary {
   background: #6c5ce7;
   color: #fff;
 }

 .btn-primary:hover {
   background: #5849d8;
 }

 .btn-light {
   background: #f1f1f1;
   color: #444;
 }

 .btn-warning {
   background: #ffbe76;
   color: #fff;
 }

 .btn-success {
   background: #6ab04c;
   color: #fff;
 }

 /* Compact Just Icon Buttons */
 .btn-warning,
 .btn-success {
   padding: 0 12px;
 }

 /* Responsive */
 @media (max-width: 768px) {
   .filters-row {
     flex-direction: column;
     align-items: stretch;
   }

   .field input,
   .field select {
     width: 100%;
   }

   .btn {
     width: 100%;
     justify-content: center;
   }
 }

 /*steps Css*/
 /* Card */
 .church-card {
   background: #fff;
   padding: 30px;
   border-radius: 18px;
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
   overflow: hidden;
   /*display: table-row-group;*/
 }

 /* Stepper */
 .steps-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   margin-bottom: 25px;
 }

 .step {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: #e5e5e5;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
   font-size: 17px;
   transition: 0.3s;
 }

 .step.active {
   background: #5e2b60;
   color: #fff;
   transform: scale(1.1);
   box-shadow: 0 0 10px rgb(106 57 108 / 63%);
 }

 .line {
   width: 50px;
   height: 3px;
   background: #ccc;
   transition: 0.3s;
 }

 .line.active {
   background: #5e2b60;
 }

 /* Floating Input */
 .floating-box {
   position: relative;
 }

 .floating-box input {
   width: 100%;
   height: 55px;
   border-radius: 10px;
   border: 1px solid #cfcfcf;
   padding: 12px;
   transition: 0.2s;
 }

 .floating-box input:focus {
   border-color: #5e2b60;
   box-shadow: 0 0 0 3px rgba(94, 107, 255, 0.14);
 }

 .floating-box select {
   width: 100%;
   height: 55px;
   border-radius: 10px;
   border: 1px solid #cfcfcf;
   padding: 12px;
   transition: 0.2s;
 }

 .floating-box select:focus {
   border-color: #5e2b60;
   box-shadow: 0 0 0 3px rgba(94, 107, 255, 0.14);
 }

 .floating-box label {
   position: absolute;
   top: -10px;
   left: 15px;
   background: #fff;
   padding: 0 6px;
   font-size: 13px;
   color: #666;
   transition: 0.2s;
 }

 /* Image preview */
 .image-preview img {
   width: 110px;
   border-radius: 10px;
   margin-top: 10px;
   border: 2px solid #eee;
 }

 /* Buttons */
 .wizard-buttons {
   margin-top: 25px;
   text-align: right;
 }

 .next-btn,
 .submit-btn {
   padding: 10px 26px;
   font-size: 15px;
   font-weight: 600;
   border-radius: 10px;
 }

 .submit-btn {
   background: #28a745 !important;
   border-color: #28a745 !important;
 }



 .errorMsg {
   padding-top: 3px;
   color: red;
   font-style: italic;
   font-size: 12px;
 }

 .tick-icon::before {
   content: '✔';
   /* tick */
   color: #0c6d0c;
   /* green */
   font-weight: bold;
 }

 .cross-icon::before {
   content: '✖';
   /* cross */
   color: #ff7979;
   /* red */
   font-weight: bold;
 }

 .social-card {
   background: linear-gradient(to bottom, #ffffff, #f2f2f2);
   padding: 30px;
   text-align: center;
   border-radius: 6px;
 }

 .no-links {
   color: #888;
   margin-bottom: 8px;
 }

 .add-link {
   color: #3b6ef5;
   cursor: pointer;
   font-weight: 500;
   text-decoration: none;
 }

 .add-link:hover {
   text-decoration: underline;
 }

 /* Modal */
 .modal {
   display: none;
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.5);
   z-index: 999;
 }

 .modal-content {
   /*background: #fff;*/
   border-radius: 6px;

 }

 .modal-header h5 {
   color: #fff;
   text-align: center;
   width: 100%;
   font-size: 16px;
 }

 .modal-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   background: #5e2b60;
   border-radius: 0px;
 }

 .modal-body {
   padding: 30px 30px !important;
 }

 .close {
   font-size: 22px;
   cursor: pointer;
 }

 .form-group {
   margin-top: 12px;
 }

 .form-group label {
   font-size: 13px;
   color: #555;
 }

 .form-group input {
   width: 100%;
   padding: 8px 10px;
   margin-top: 4px;
   border: 1px solid #ccc;
   border-radius: 4px;
 }

 .modal-footer {
   display: flex;
   justify-content: flex-end;
   gap: 10px;
   margin-top: 18px;
 }

 .btn {
   padding: 8px 14px;
   border-radius: 10px;
   border: none;
   cursor: pointer;
 }

 .btn.cancel {
   background: #ddd;
 }

 .btn.save {
   background: #0c6d0c;
   color: #fff;
 }

 .table_img {
   width: 40px;
   height: 40px;
   border-radius: 50%;
 }

 table {
   width: 100%;
 }

 table th {

   font-size: 13px !important;
   white-space: nowrap !important;
   text-align: center !important;
   background: #68416a !important;
   color: #fff !important;
   border-right: 1px solid #fff !important;
   padding: 5px 15px 5px 15px !important;
 }

 table td {

   font-size: 14px !important;
   /*white-space: nowrap!important;*/
   text-align: center !important;
   /*background: #68416a!important;*/
   color: #555 !important;
   border-right: 1px solid #fff !important;
   padding: 5px 15px 5px 15px !important;
 }

 /*table td {
   
   white-space: nowrap!important;
    
}*/
 .textDark {
   font-weight: 600;
 }

 .ngx-pagination .current {
   background: #5e2b60 !important;

 }

 .linkss1 {
   color: #000;
   text-decoration: none;
   font-weight: bold;
 }

 .active_status {
   color: green;
   font-weight: bold;
 }

 .inactive_status {
   color: red;
   font-weight: bold;
 }

 .table-responsive {
   padding: 15px 15px;
 }

 /*Calender css*/
 .fc {
   font-family: "Inter", sans-serif;
   background: #ffffff;
 }

 .fc-toolbar-title {
   font-size: 18px !important;
   /*font-weight: 600;*/
   color: #555;
 }

 .fc-button {
   margin: 0px 1px !important;
   background: #5e2b60 !important;
   border: none !important;
   padding: 6px 14px !important;
   border-radius: 6px !important;
 }

 /*.fc-button:hover {
  background: #fff !important;
}
.fc-day-today {
  background: #fff !important;
}*/
 .fc-event {
   background: #5e2b60;
   border: none !important;
   border-radius: 6px;
   padding: 4px 6px;
   font-size: 12px;
 }

 .fc-event-title {
   font-weight: 600;
 }

 .fc-timegrid-slot {
   height: 40px;
 }

 :host ::ng-deep .fc-event {
   background: #ef4444 !important;
 }

 .fc {
   border-radius: 12px;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
 }

 .fc .fc-daygrid-event {
   margin-top: 1px;
   color: #fff;
   z-index: 6;
 }

 .fc-scrollgrid {
   border-radius: 12px;
   overflow: hidden;
 }

 .fc .fc-col-header-cell-cushion {
   display: inline-block;
   padding: 10px 4px;
   color: #555;
   font-size: 14px;
   text-decoration: none;
 }

 .fc .fc-daygrid-day-number {
   padding: 4px;
   position: relative;
   z-index: 4;
   color: #555;
   text-decoration: none;
 }

 td.fc-day.fc-day-sun.fc-day-today.fc-daygrid-day .fc-daygrid-day-number {
   color: #fff !important;
 }

 .manual-event {
   background-color: #f39c12 !important;
   border-color: #f39c12 !important;
   color: #fff !important;
 }

 .auto-event {
   background-color: #6366f1 !important;
   border-color: #6366f1 !important;
   color: #fff !important;
 }