:root {
  --bs-primary: #294790;
  --bs-secondary: #5e5e5e;
  --bs-success: #198754;
  --bs-info: #399ffe;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-body-bg: #ffffff;
  --bs-body-color: #212529;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000000;
  --bs-white: #ffffff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-primary-text-emphasis: #570080;
  --bs-secondary-text-emphasis: #2b2f32;
  --bs-success-text-emphasis: #0a3622;
  --bs-info-text-emphasis: #055160;
  --bs-warning-text-emphasis: #664d03;
  --bs-danger-text-emphasis: #58151c;
  --bs-light-text-emphasis: #495057;
  --bs-dark-text-emphasis: #495057;
  --bs-primary-bg-subtle: #cfe2ff;
  --bs-secondary-bg-subtle: #e2e3e5;
  --bs-success-bg-subtle: #d1e7dd;
  --bs-info-bg-subtle: #cff4fc;
  --bs-warning-bg-subtle: #fff3cd;
  --bs-danger-bg-subtle: #f8d7da;
  --bs-light-bg-subtle: #fcfcfd;
  --bs-dark-bg-subtle: #ced4da;
  --bs-primary-border-subtle: #9ec5fe;
  --bs-secondary-border-subtle: #c4c8cb;
  --bs-success-border-subtle: #a3cfbb;
  --bs-info-border-subtle: #9eeaf9;
  --bs-warning-border-subtle: #ffe69c;
  --bs-danger-border-subtle: #f1aeb5;
  --bs-light-border-subtle: #e9ecef;
  --bs-dark-border-subtle: #adb5bd;
--z-pb-text:white;
--z-sb-text:white;
}

.btn-primary {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}
.btn-primary:hover {
  background-color: #0f2d76 !important;
  border-color: #0f2d76 !important;
}
.alert-primary {
  background-color: var(--bs-primary);
  color: #fff;
  border: none;
}
.badge-primary {
  background-color: var(--bs-primary);
}
.text-primary {
  color: var(--bs-primary) !important;
}
.bg-primary {
  background-color: var(--bs-primary) !important;
}
.border-primary {
  border-color: var(--bs-primary) !important;
}
.btn-secondary {
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
  color: #fff !important;
}
.btn-secondary:hover {
  background-color: #444444 !important;
  border-color: #444444 !important;
}
.alert-secondary {
  background-color: var(--bs-secondary);
  color: #fff;
  border: none;
}
.badge-secondary {
  background-color: var(--bs-secondary);
}
.text-secondary {
  color: var(--bs-secondary) !important;
}
.bg-secondary {
  background-color: var(--bs-secondary) !important;
}
.border-secondary {
  border-color: var(--bs-secondary) !important;
}
.btn-success {
  background-color: var(--bs-success) !important;
  border-color: var(--bs-success) !important;
  color: #fff !important;
}
.btn-success:hover {
  background-color: #006d3a !important;
  border-color: #006d3a !important;
}
.alert-success {
  background-color: var(--bs-success);
  color: #fff;
  border: none;
}
.badge-success {
  background-color: var(--bs-success);
}
.text-success {
  color: var(--bs-success) !important;
}
.bg-success {
  background-color: var(--bs-success) !important;
}
.border-success {
  border-color: var(--bs-success) !important;
}
.btn-info {
  background-color: var(--bs-info) !important;
  border-color: var(--bs-info) !important;
  color: #fff !important;
}
.btn-info:hover {
  background-color: #1f85e4 !important;
  border-color: #1f85e4 !important;
}
.alert-info {
  background-color: var(--bs-info);
  color: #fff;
  border: none;
}
.badge-info {
  background-color: var(--bs-info);
}
.text-info {
  color: var(--bs-info) !important;
}
.bg-info {
  background-color: var(--bs-info) !important;
}
.border-info {
  border-color: var(--bs-info) !important;
}
.btn-warning {
  background-color: var(--bs-warning) !important;
  border-color: var(--bs-warning) !important;
  color: #fff !important;
}
.btn-warning:hover {
  background-color: #e5a700 !important;
  border-color: #e5a700 !important;
}
.alert-warning {
  background-color: var(--bs-warning);
  color: #fff;
  border: none;
}
.badge-warning {
  background-color: var(--bs-warning);
}
.text-warning {
  color: var(--bs-warning) !important;
}
.bg-warning {
  background-color: var(--bs-warning) !important;
}
.border-warning {
  border-color: var(--bs-warning) !important;
}
.btn-danger {
  background-color: var(--bs-danger) !important;
  border-color: var(--bs-danger) !important;
  color: #fff !important;
}
.btn-danger:hover {
  background-color: #c21b2b !important;
  border-color: #c21b2b !important;
}
.alert-danger {
  background-color: var(--bs-danger);
  color: #fff;
  border: none;
}
.badge-danger {
  background-color: var(--bs-danger);
}
.text-danger {
  color: var(--bs-danger) !important;
}
.bg-danger {
  background-color: var(--bs-danger) !important;
}
.border-danger {
  border-color: var(--bs-danger) !important;
}
.btn-light {
  background-color: var(--bs-light) !important;
  border-color: var(--bs-light) !important;
  color: #fff !important;
}
.btn-light:hover {
  background-color: #dedfe0 !important;
  border-color: #dedfe0 !important;
}
.alert-light {
  background-color: var(--bs-light);
  color: #fff;
  border: none;
}
.badge-light {
  background-color: var(--bs-light);
}
.text-light {
  color: var(--bs-light) !important;
}
.bg-light {
  background-color: var(--bs-light) !important;
}
.border-light {
  border-color: var(--bs-light) !important;
}
.btn-dark {
  background-color: var(--bs-dark) !important;
  border-color: var(--bs-dark) !important;
  color: #fff !important;
}
.btn-dark:hover {
  background-color: #070b0f !important;
  border-color: #070b0f !important;
}
.alert-dark {
  background-color: var(--bs-dark);
  color: #fff;
  border: none;
}
.badge-dark {
  background-color: var(--bs-dark);
}
.text-dark {
  color: var(--bs-dark) !important;
}
.bg-dark {
  background-color: var(--bs-dark) !important;
}
.border-dark {
  border-color: var(--bs-dark) !important;
}

.nav-pills .nav-link.active {
  background-color: var(--bs-primary);
}
.progress-bar {
  background-color: var(--bs-primary);
}
.btn-light,
.btn-lite {
  color: var(--bs-body-color) !important;
}
.btn-light:hover, 
.btn-lite:hover {
  color: var(--bs-body-color) !important;
}:root {
  --z-cardstyle-border: #cccccc;
  --z-cardstyle-bg: #ffffff;
  --z-cardstyle-text: #000000;
  --z-body-bg: #f5f5f5;
  --z-body-text: #333333;
  --z-header-bg: #f5f5f5;
  --z-header-text: #294790;
  --z-inputs-bg: #e9ecef;
  --z-inputs-text: #495057;
}


.bg-light {
  --bs-bg-opacity: 1;
  background-color: var(--z-body-bg, #fff) !important;
}

body {
  background-color: var(--z-body-bg, #fff);
  color: var(--z-body-text, #212529);
}

.btn-outline-primary {
  border-color: var(--bs-primary) !important;
  background-color: var(--bs-secondary) !important;
  color: var(--z-sb-text) !important;
  height:40px;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  border-color: var(--bs-secondary) !important;
  background-color: var(--bs-primary) !important;
  color: var(--z-pb-text) !important;
  height:40px;
}



.btn-outline-secondary {
  border-color: var(--bs-secondary) !important;
  background-color: var(--bs-primary) !important;
  color: var(--z-pb-text) !important;
  height:40px;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
  border-color: var(--bs-primary) !important;
  background-color: var(--bs-secondary) !important;
  color: var(--z-sb-text) !important;
  height:40px;
}
.z-outline-primary {
  background-color: var(--bs-secondary) !important;
  color: var(--z-sb-text) !important;
}

.z-outline-secondary {
  background-color: var(--bs-primary) !important;
  color: var(--z-pb-text) !important;
}

.z-outline-primary-inverse {
  background-color: var(--z-cardstyle-bg) !important;
  color: var(--bs-primary) !important;
  height:40px;
}

.z-outline-secondary-inverse {
  background-color: var(--z-cardstyle-bg) !important;
  color: var(--bs-secondary) !important;
  height:40px;
}


.z-input-primary {
  background-color: var(--z-inputs-bg) !important;
  color: var(--z-inputs-text) !important;
  height:40px;
}

.z-input-primary:hover {
  background-color: var(--bs-primary) !important;
  color: var(--z-pb-text) !important;
  height:40px;
}



/*Card Color*/
.modal-content {
 border: 1px solid var(--z-cardstyle-border) !important;
 background-color: var(--z-cardstyle-bg) !important;
 color: var(--z-cardstyle-text) !important;
}

/*Card Color*/
.modal-footer {
 align-items: top !important;
}


.card {
 border: 1px solid var(--z-cardstyle-border) !important;
 background-color: var(--z-cardstyle-bg) !important;
 color: var(--z-cardstyle-text) !important;
}

.bodyshape {
 background-color: var(--z-body-bg) !important;
 color: var(--z-body-text) !important;
}

.header {
    background-color: var(--z-header-bg) !important;
    color: var(--z-header-text) !important;
}
.header .search-form input {
    background-color: var(--z-cardstyle-bg) !important;
	color: var(--z-body-text) !important;
}

.sidebar-nav .nav-link:hover {
	background-color: var(--z-inputs-bg) !important;
	color: var(--z-inputs-text) !important;
}
.nav-tabs-bordered .nav-link {
	color: var(--z-cardstyle-text) !important;
}
.form-check-input:checked {
background-color: var(--bs-secondary) !important;
border-color: #b1b1b1;
height:20px;
width:20px;
}
.form-check-input {
background-color: var(--z-cardstyle-bg) !important;
border-color:  #b1b1b1;
height:20px;
width:20px;
}

.form-check-input-blank:checked {
background-color: var(--z-cardstyle-bg) !important;
border-color: #b1b1b1;
height:20px;
width:20px;
}
.form-check-input-blank {
background-color: var(--z-cardstyle-bg) !important;
border-color:  #b1b1b1;
height:20px;
width:20px;
}

.modal-title {
font-family: Open Sans;
font-weight: 400;
font-style: Regular;
font-size: 16px;
leading-trim: NONE;
line-height: 20px;
letter-spacing: 0%;

color: var(--bs-primary) !important;

}
.card-text-color {
	color:var(--z-cardstyle-text);
}

.like-text {
	color:var(--z-cardstyle-text);
	font-size: 12px;
}

.text-muted {
    color: var(--z-cardstyle-text)!important;
}
.modal.fade .modal-dialog {
    transition: none !important;
}

.modal.show .modal-dialog {
    transform: none !important;
}


.img-thumbnail {
	 padding: 0; 
     background-color: var(--z-cardstyle-bg); 
     border: none; 
     border-radius: 0px; 
	 cursor:pointer;
}

:root {
    --bs-border-radius: 10px;
	
}

.list-group-item.active {
    z-index: 2;
    color: var(--z-cardstyle-bg) !important;
    background-color: var(--bs-primary) !important;
    border-color: var(--z-cardstyle-border) !important;
}

  /* Custom styles for invalid select */
        .select-invalid {
            border-color: #f44336; /* Red border */
            background-color: #ffe6e6; /* Light red background */
        }
		
		
.card-body p img {
    max-width: 100%;
    height: auto; /* This ensures the aspect ratio is maintained */
}



.ql-container {
    font-size: 14px !important;
}

.ql-editor p {
           font-size:14px;
    }
    .ql-editor ol {
           font-size:14px;
		   padding-left: 10px;
    }
    .ql-editor ol li {
           font-size:14px;
		   padding-left: 10px;
    }
    .ql-editor ul {
           font-size:14px;
		   padding-left: 10px;
    }
    .ql-editor ul li {
           font-size:14px;
		   padding-left: 10px;
    }
    .ql-editor h1 {
           font-size:18px;
		   font-weight:700;
           margin-bottom: 5px;
    }
    .ql-editor h2 {
           font-size:16px;
		   font-weight:500;
           margin-bottom: 5px;
    }
	.ql-snow .ql-editor p {
           font-size:14px;
    }
    .ql-snow .ql-editor ol {
           font-size:14px;
		   padding-left: 10px;
    }
    .ql-snow .ql-editor ol li {
           font-size:14px;
		   padding-left: 10px;
    }
    .ql-snow .ql-editor ul {
           font-size:14px;
		   padding-left: 10px;
    }
    .ql-snow .ql-editor ul li {
           font-size:14px;
		   padding-left: 10px;
    }
    .ql-snow .ql-editor h1 {
           font-size:18px;
		   font-weight:700;
           margin-bottom: 5px;
    }
    .ql-snow .ql-editor h2 {
           font-size:16px;
		   font-weight:500;
           margin-bottom: 5px;
    }
	
	.modal-header {
    padding-top: 0.5rem !important;    /* pt-2 */
    padding-bottom: 0 !important;      /* pb-0 */
}


	
	.input-border {
 border-top: 1px solid #e5e5e5 !important;
}


.bg-ongoing {
  background-color: #6CD7AB !important;
}






       .border-box-special {
                  min-height: 40px;
                  border-top: 1px solid var(--bs-border-color);
                  display: flex;
                  align-items: center;
                  padding: 0 0.5rem;
                  box-sizing: border-box;
                }
				.border-box-special-2 {
                  min-height: 40px;
                  display: flex;
                  align-items: center;
                  padding: 0 0.5rem;
                  box-sizing: border-box;
                }
			.border-box-special-noflex {
                   min-height: 40px;
                  border-top: 1px solid var(--bs-border-color);
                  align-items: center;
                  padding: 0 0.5rem;
                  box-sizing: border-box;
                }

                .border-box-special input,
                .border-box-special select,
                .border-box-special textarea {
                  border: none;
                  outline: none;
                  padding: 0;
                  margin: 0;
                  height: 100%;
                  width: 100%;
                  background: transparent;
                }
                .border-box-special input::placeholder,
                .border-box-special select::placeholder,
                .border-box-special textarea::placeholder {
                  color: var(--z-fademaster) !important;
                }

                .border-box-special-2 input,
                .border-box-special-2 select,
                .border-box-special-2 textarea {
                  border: none;
                  outline: none;
                  padding: 0;
                  margin: 0;
                  height: 100%;
                  width: 100%;
                  background: transparent;
                }

			
                .border-box-special-2 input::placeholder,
                .border-box-special-2 select::placeholder,
                .border-box-special-2 textarea::placeholder {
                 color: var(--z-fademaster) !important;
                }

			

                .border-box-special label {
                font-weight: 400;
				font-size: 14px;
				line-height: 20px;
				background-color: var(--z-cardstyle-bg);
                }
				 .border-box-special-2 label {
                font-weight: 400;
				font-size: 14px;
				line-height: 20px;
                }
				 .border-box-special-noflex label {
                font-weight: 400;
				font-size: 14px;
				line-height: 20px;
                }
				
				
				
				  .special-event-border {
                  border: 1px solid var(--bs-border-color) !important;
				  margin-bottom: 10px;
				  border: none;
				  border-radius: 18px;
				  overflow: hidden;
                }
				
.btn, btn-primary {
  height: 40px !important;
  font-size:14px;
}

.clearcolor {
	color: var(--z-cardstyle-bg);
}

.bodybg {
	background-color: var(--z-body-bg);
}

.bodybg:hover {
	color: var(--z-cardstyle-bg);
	background-color: var(--bs-primary);
}

.form-control {
    border-radius: 0 !important; /* Use !important to ensure it overrides Bootstrap defaults */
}


 .sparkle {
  position: fixed;
  width: 10px;
  height: 10px;
  color: var(--bs-primary);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.9;
  will-change: transform, opacity;
}

/* Combined animation: move → shrink → fast fade */
@keyframes fly-to-target-and-shrink-and-fade {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.9;
  }
  60% {
    transform: translate(var(--tx), var(--ty)) scale(0.9);
    opacity: 0.9;
  }
  85% {
    transform: translate(var(--tx), var(--ty)) scale(0.35);
    opacity: 0.9;           /* still visible here */
  }
  100% {
    transform: translate(var(--tx), var(--ty)) scale(0.1);
    opacity: 0;              /* fully invisible at end */
  }
}

/* Optional: make sure the target has transform-origin at center */
#target {
  transform-origin: center center;
  will-change: transform;
  transition: transform 0.15s ease-out;   /* fallback / smooth revert */
}

/* The brief "pop" animation */
@keyframes target-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }   /* roughly +5–8px depending on original size */
  100% { transform: scale(1); }
}

.target-pop-active {
  animation: target-pop 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.list-group-item {
  color:var(--z-cardstyle-text) !important;
  background-color:var(--z-body-bg) !important;
  border: none;
  border-top: var(--z-cardstyle-border); /* Color for the bottom border */ 
  border-bottom: var(--z-cardstyle-border); /* Color for the bottom border */
}

.selectable-options .list-group-item {
  transition: all 0.2s ease-in-out;
  background-color: var(--z-body-bg, --bs-primary); /* or whatever your .bodybg uses */
}

.selectable-options .list-group-item:hover,
.selectable-options .list-group-item:focus {
  background-color: transparent !important;
  background-image: none !important;           /* kill any gradients/images */
  box-shadow: inset 0 0 0 2px var(--bs-primary); /* primary outline inside */
  /* Optional: softer/focus-ring style alternative */
  /* box-shadow: inset 0 0 0 3px rgba(var(--bs-primary-rgb), 0.4); */
  transform: translateY(-1px);                 /* tiny lift for "clickable" feel */
  color: var(--bs-body-color);                 /* prevent text color change if unwanted */
}

.selectable-options .list-group-item:active {
  transform: translateY(0);
  box-shadow: inset 0 0 0 2.5px var(--bs-primary);
  background-color: rgba(var(--bs-primary-rgb), 0.06) !important; /* very light bg on click */
}

.nav-link {
    color: var(--bs-primary) !important;
}

.dropdown-menu {

    --bs-dropdown-bg: var(--z-cardstyle-bg);

}


.table {
 
    --bs-table-color: var(--z-cardstyle-text) !important;
    --bs-table-bg: var(--z-cardstyle-bg) !important;
    --bs-table-active-color: var(--z-body-bg) !important;
    --bs-table-hover-color: var(--z-cardstyle-text) !important;
    --bs-table-hover-bg: rgba(var(--z-body-bg), 0.075) !important;
}
.flatpickr-calendar {
 background-color: var(--z-cardstyle-bg, --z-body-bg) !important; /* or whatever your .bodybg uses */
}
.fc-col-header  {
 background-color: var(--z-cardstyle-bg, --z-body-bg) !important; /* or whatever your .bodybg uses */
color: var(--bs-primary) !important; /* or whatever your .bodybg uses */
}


.accordion-item {
    color: var(--bs-accordion-color);
    background-color: var(--z-cardstyle-bg) !important;
    border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
}






.input-group-text {
    background-color: var(--z-cardstyle-bg) !important;
}