/*
* demo.css
* File include item demo only specific css only
******************************************************************************/

.light-style .menu .app-brand.demo {
  height: 64px;
}

.dark-style .menu .app-brand.demo {
  height: 64px;
}

.app-brand-logo.demo {
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  display: -ms-flexbox;
  display: flex;
  /* width: 34px;
  height: 24px; */
}

.app-brand-logo.demo svg {
  width: 35px;
  height: 24px;
}

.app-brand-text.demo {
  font-size: 1.375rem;
}

/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 64px !important;
}
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
  padding-top: 78px !important;
}
/* Navbar page z-index issue solution */
.content-wrapper .navbar {
  z-index: auto;
}

/*
* Content
******************************************************************************/

.demo-blocks > * {
  display: block !important;
}

.demo-inline-spacing > * {
  margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing > * {
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-lg > * {
  margin-top: 1.875rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-lg.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-xl > * {
  margin-top: 5rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-xl.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.rtl-only {
  display: none !important;
  text-align: left !important;
  direction: ltr !important;
}

[dir='rtl'] .rtl-only {
  display: block !important;
}

/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 1rem;
}
.layout-demo-placeholder img {
  width: 900px;
}
.layout-demo-info {
  text-align: center;
  margin-top: 1rem;
}


/* Back Button css */

/* .back-button {
  background: linear-gradient(72.47deg, #7367f0 22.16%, rgba(115, 103, 240, .7) 76.47%);
  box-shadow: 0 2px 6px 0 rgba(115, 103, 240, .48);
  color: #fff !important;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  text-decoration: none;
  font-size: 1rem;
  display: inline-block;
}

.back-button:hover {
  background: linear-gradient(72.47deg, #5f4af3 22.16%, rgba(95, 74, 243, .7) 76.47%);
  box-shadow: 0 2px 6px 0 rgba(95, 74, 243, .48);
  color: #fff;
} */


.mandatory {
  border-radius: 5px !important;
  background: #fdd2d9 !important;
}

/* Append border on hover */
.mandatory:hover {
  border: 2px solid #e08492 !important;
  cursor: pointer; /* Change cursor to pointer for better UX */
}

.mandatory:focus {
  border: 2px solid #e08492 !important; /* Border color on focus */
  outline: none; /* Remove default browser outline */
}

 /* Base styles for all buttons */
 .action-button {
  padding: 0.5rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
}

/* Green buttons for Save and Update */
.btn-save,
.btn-update {
  background-color: #7367f0; /* Green */
  color: #fff; /* White text */
}

.btn-save:hover,
.btn-update:hover {
  background-color: #6001cf ; /* Darker green */
  color: #fff; /* White text */
}

/* Gray buttons for Back and Cancel */
.btn-cancel,
.btn-back {
  background-color: #6c757d; /* Gray */
  color: #fff; /* White text */
}

.btn-cancel:hover,
.btn-back:hover {
  background-color: #101111; /* Darker gray */
  color: #fff; /* White text */
}

/* Optional: Spacing between buttons */
.action-button + .action-button {
  margin-left: 0.5rem;
}

.btn-save:disabled {
  background-color: #7367f0;
  cursor: not-allowed;
}



/* Switch style */
.switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  border-radius: 50%;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #7367f0;
}

input:checked + .slider:before {
  transform: translateX(14px);
}


/* Base Badge Styling */
.badge {
  display: inline-block;
  padding: 8px 10px !important;
  font-size: 12px !important;
  font-weight: 600;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
}

/* Darker Badge Colors */
.badge.bg-warning {
  background-color: #ffbf00 !important; /* Darker Yellow */
}

.badge.bg-success {
  background-color: #007603 !important; /* Darker Green */
}

.badge.bg-danger {
  background-color: #de2a14 !important; /* Darker Red */
}

.badge.bg-secondary {
  background-color: #5a6268 !important; /* Darker Grey */
}

.badge.bg-dark {
  background-color: #1d2124 !important; /* Very Dark Grey */
}

/* Optional: Add Hover Effect */
.badge:hover {
  opacity: 0.85;
}


/* Action Box Styles */
.action-box {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px; /* Slightly round corners */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer; /* Indicates that it's clickable */
}

/* View Button Icon Color */
.btn-view i {
  color: #7367f0; /* View icon color to match your theme's blue */
}

/* Edit Button Icon Color */
.btn-edit i {
  color: #ff9f43; /* Edit icon color to match your theme's orange */
}

/* Delete Button Icon Color */
.btn-delete i {
  color: #ff3e4d; /* Delete icon color to match your theme's red */
}

/* Hover Effects for Icon Buttons */
.action-box:hover {
  transform: scale(1.1); /* Slightly scale up the icon on hover */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Full shadow around the button on hover */
}

/* Hover Icon Colors */
.btn-view:hover i {
  color: #5f4bc7; /* Darker blue on hover */
}

.btn-edit:hover i {
  color: #e88d3c; /* Darker orange on hover */
}

.btn-delete:hover i {
  color: #e1293f; /* Darker red on hover */
}


.breadcrumb-item+.breadcrumb-item:before {
  color: var(--bs-breadcrumb-divider-color);
  content: var(--bs-breadcrumb-divider, url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-right' width='16' height='24' viewBox='0 0 24 24' stroke-width='1.75' stroke='%234b465c' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 0h24v24H0z' stroke='none'/%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E"));
  float: left;
  padding-right: var(--bs-breadcrumb-item-padding-x);
  padding-left: 0.4rem;
}

.breadcrumb {
  font-size: 1rem;
  font-family: 'Montserrat', Helvetica, Arial, serif;
  background-color: transparent;
  padding: 0.5rem 0 0.5rem 1rem !important;
  border-left: 1px solid #D6DCE1;
  border-radius: 0;
}

.breadcrumb {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  list-style: none;
  background-color: #EDEDED;
  border-radius: 0.5rem;
}

.breadcrumb {
  font-size: 1rem;
  background-color: transparent;
  padding: 0.5rem 0 0.5rem 1rem !important;
  border-left: 1px solid #D6DCE1;
  border-radius: 0;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  list-style: none;
  background-color: #EDEDED;
  border-radius: 0.5rem;
}

.breadcrumb .breadcrumb-item.active {
  color: #626262;
}

.breadcrumb .breadcrumb-item+.breadcrumb-item {
  padding-left: 0;
}

.content-header-title {
  float: left;
  margin-right: 1rem;
}

.alert-success {
  background-color: #ddf6e8;
  border-color: #ddf6e8;
  color: #28c76f;
  opacity: 29.9;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
  filter: alpha(opacity=90);
  max-width: 400px !important;
  float: right !important;
}

.alert {
  position: fixed !important;
  top: 16px;
  right: 24px;
  z-index: 999999;
  max-width: 400px !important;
  margin: 0 !important;
  opacity: 1;
  padding: 10px !important;
  border-radius: 5px !important;
  display: block;
}

.breadcrumbs-top .breadcrumb {
  margin: 0;
  padding: 0;
}

.required-label {
  color: #EA5455;
}

.form-validation-error-text {
  width: 100%;
  margin-top: 0.25rem;
  font-size: smaller;
  color: #EA5455;
}

.card-content {
  display: flex;
  justify-content: flex-start; /* Align content to the left */
}

.form-container {
  width: 100%; /* Full width of the parent */
}

.form-row {
  display: flex;
  justify-content: start;
  align-items: center;
  margin-bottom: 1rem;
}

.form-label {
  flex: 0 0 25%; /* Label takes 25% of the row */
  margin-bottom: 0; /* Remove margin below label */
  padding-right: 1rem;
}

.form-input {
  flex: 1; /* Input takes the remaining width */
}


body {
  background-color: #f4f7fc;
}

.card {
  /* margin-bottom: 2rem; */
  border-radius: 1rem;
}


.card-header {
  background-color: #6c757d;
  color: white;
  padding: 1rem;
  border-radius: 1rem 1rem 0 0;
  font-size: 1.25rem;
}


.card-body {
  background-color: white;
  border-radius: 0 0 1rem 1rem;
  padding: 2rem;
}


.section-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #343a40;
}


.category-info {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2rem;
}


.category-info div {
  flex: 1;
}


.category-info img {
  border-radius: 50%;
  width: 80px;
  height: 80px;
}


.status {
  padding: 0.5rem;
  border-radius: 0.5rem;
  color: white;
  text-align: center;
  font-weight: 600;
}

.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 80%;
  color: #e3342f;
}
.invalid-feedback {
  font-size: 0.8rem;
  opacity: 0.85;
  margin-top: 2px;
  font-weight: 400;
  width: auto;
}

input[type="text"].form-control.is-invalid{
  padding-right: 0.5rem;
}




.bg-teal {
  background-color: #20c997 !important; /* Bootstrap's teal */
}
.bg-orange {
  background-color: #fd7e14 !important; /* Bootstrap's orange */
}

table td,
.table th,
.table tr {
    vertical-align: middle;
}

.table td:first-child,
.table th:first-child,
.table tr:first-child {
    padding-left: 30px !important;
}

.table td:last-child,
.table th:last-child,
.table tr:last-child {
    padding-right: 30px !important;
}
table.dataTable{
    margin-top: 0 !important;
}
table.dataTable thead th,
table.dataTable thead td,
table.dataTable tbody td {
    font-weight: normal !important;
    padding: 15px 10px !important;
    border-bottom-color: var(--bs-gray-200) !important;
    vertical-align: top;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
    background: none !important;
}

table.dataTable>thead .sorting:after,
table.dataTable>thead .sorting_asc:after,
table.dataTable>thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
    content: "" !important;
    opacity: 1 !important;
    right: 0 !important;
}


.w-unset {
	width: unset !important
}

.w-5 {
	width: 5% !important
}
.w-10 {
	width: 10% !important
}
.w-15 {
	width: 15% !important
}
.w-20 {
	width: 20% !important
}
.w-25 {
	width: 25% !important
}
.w-30 {
	width: 30% !important
}
.w-35 {
	width: 35% !important
}
.w-40 {
	width: 50% !important
}
.w-45 {
	width: 45% !important
}
.w-50 {
	width: 50% !important
}
.w-55 {
	width: 55% !important
}
.w-60 {
	width: 60% !important
}
.w-65 {
	width: 65% !important
}
.w-70 {
	width: 70% !important
}
.w-75 {
	width: 75% !important
}
.w-80 {
	width: 80% !important
}
.w-85 {
	width: 85% !important
}
.w-90 {
	width: 90% !important
}
.w-95 {
	width: 95% !important
}
.w-100 {
	width: 100% !important
}
.w-auto {
	width: auto !important
}

.w-1px {
	width: 1px !important
}

.w-2px {
	width: 2px !important
}

.w-3px {
	width: 3px !important
}

.w-4px {
	width: 4px !important
}

.w-5px {
	width: 5px !important
}

.w-6px {
	width: 6px !important
}

.w-7px {
	width: 7px !important
}

.w-8px {
	width: 8px !important
}

.w-9px {
	width: 9px !important
}

.w-10px {
	width: 10px !important
}

.w-15px {
	width: 15px !important
}

.w-20px {
	width: 20px !important
}

.w-25px {
	width: 25px !important
}

.w-30px {
	width: 30px !important
}

.w-35px {
	width: 35px !important
}

.w-40px {
	width: 40px !important
}

.w-45px {
	width: 45px !important
}

.w-50px {
	width: 50px !important
}

.w-55px {
	width: 55px !important
}

.w-60px {
	width: 60px !important
}

.w-65px {
	width: 65px !important
}

.w-70px {
	width: 70px !important
}

.w-75px {
	width: 75px !important
}

.w-80px {
	width: 80px !important
}

.w-85px {
	width: 85px !important
}

.w-90px {
	width: 90px !important
}

.w-95px {
	width: 95px !important
}

.w-100px {
	width: 100px !important
}

.w-125px {
	width: 125px !important
}

.w-150px {
	width: 150px !important
}

.w-175px {
	width: 175px !important
}

.w-200px {
	width: 200px !important
}

.w-225px {
	width: 225px !important
}

.w-250px {
	width: 250px !important
}

.w-275px {
	width: 275px !important
}

.w-300px {
	width: 300px !important
}

.w-325px {
	width: 325px !important
}

.w-350px {
	width: 350px !important
}

.w-375px {
	width: 375px !important
}

.w-400px {
	width: 400px !important
}

.w-425px {
	width: 425px !important
}

.w-450px {
	width: 450px !important
}

.w-475px {
	width: 475px !important
}

.w-500px {
	width: 500px !important
}

.w-550px {
	width: 550px !important
}

.w-600px {
	width: 600px !important
}

.w-650px {
	width: 650px !important
}

.w-700px {
	width: 700px !important
}

.w-750px {
	width: 750px !important
}

.w-800px {
	width: 800px !important
}

.w-850px {
	width: 850px !important
}

.w-900px {
	width: 900px !important
}

.w-950px {
	width: 950px !important
}

.w-1000px {
	width: 1000px !important
}

.w-1200px {
	width: 1200px !important
}

.w-1300px {
	width: 1300px !important
}

.w-1400px {
	width: 100px !important
}

.w-1500px {
	width: 1500px !important
}