:root [data-sidebar=colored], [data-bs-theme=light] [data-sidebar=colored]
{
    --bs-sidebar-colored-bg: #092651;
    --bs-sidebar-colored-menu-item-color: #B5CFE1;
    --bs-sidebar-colored-menu-sub-item-color: #B5CFE1;
    --bs-sidebar-colored-menu-item-icon-color: #B5CFE1;
    --bs-sidebar-colored-menu-item-hover-color: #B5CFE1;
    --bs-sidebar-colored-menu-item-active-color: #B5CFE1;
    --bs-sidebar-colored-menu-item-active-bg: #092651;
    --bs-header-item-color: #B5CFE1;
    --bs-primary-bg-subtle : #699AB4;
    --bs-primary-text-emphasis : #092651;
    --bs-body-bg : #B5CFE1;
    --bs-pagination-active-bg :#106098;
    --bs-pagination-active-border-color:#699AB4;
    --bs-primary-rgb: #106098;
    --bs-secondary-bg : #FCF8EF;
    --bs-body-color:#092651;
    --bs-tertiary-bg:#B5CFE1;

    --bs-color-1:#092651; /* color-1*/
    --bs-color-2:#0E3F71; /* color-2*/
    --bs-color-3:#106098; /* color-3*/
    --bs-color-4:#699AB4; /* color-4*/
    --bs-color-5:#B5CFE1; /* color-5*/
}
.pagination{
  --bs-pagination-active-bg :#092651;
  --bs-pagination-active-border-color:var(--bs-color-3);
}
.bg-secondary{
  background-color: rgb(165, 0, 0) !important;;
}
a {
  color: var(--bs-color-1);
}
/* --------------------------------------
  All error list design after click submit
  ----------------------------------------- */
  .submit-error {
    display: block;
    border: solid 1px #e85347;
    background: #B5CFE1;
    padding: 13px;
    border-radius: 4px;
    /* list-style: disc !important;
    list-style-type: disc !important;
    list-style-position : inside !important; */
    margin: 0 auto;
  }
  .submit-error li {
    padding: 4px 0 4px 15px;
    color: #e85347;
    position: relative;
    text-align: left;
    /* display: flex;
    align-items: center; */
  }
  .submit-error li:before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e85347;
    /* margin-right: 10px; */
    position: absolute;
    top: 10px;
    left: 0;
  }

  body.modal-open,
body.offcanvas-open {
  overflow: hidden;
}
.div-right-align{
  display: flex;
    align-items: center;
    justify-content: flex-end;
}
.div-left-align{
  display: flex;
    align-items: center;
    justify-content: flex-start;
}

.dt-buttons .btn-primary {
  background-color: #535EB4 !important;
  border-color: #535EB4 !important;
  color: #fff !important;
}

.dataTables_wrapper .dt-buttons {
  margin-bottom: 10px;
}

.dataTables_wrapper .dataTables_length {
  float: left;
  margin-right: 1em; /* Adjust the space to the right of the length dropdown */
}

.dataTables_wrapper .dt-buttons {
  float: left;
  margin-right: 1em; /* Adjust the space to the right of the buttons */
}

/* Adjust the width of the search input */
.dataTables_wrapper .dataTables_filter input {
  width: 150px !important;; /* Set the width you desire */
  /* Continue with other styling from before */
  margin-left: 0.5em;
  padding: .375rem .75rem;
  border: 1px solid #ced4da;
  border-radius: .25rem;
}

.char-count {
  font-size: 14px;
  color: red;
}

#page-topbar {
  background-color: var(--bs-color-1);
}


.color-bg-1{
  background-color: var(--bs-color-1);
}
.color-bg-2{
  background-color: var(--bs-color-2);
}
.color-bg-3{
  background-color: var(--bs-color-3);
}
.color-bg-4{
  background-color: var(--bs-color-4);
}
.color-bg-5{
  background-color: var(--bs-color-5);
}

.color-1{
  color: var(--bs-color-1);
}
.color-2{
  color: var(--bs-color-2);
}
.color-3{
  color: var(--bs-color-3);
}
.color-4{
  color: var(--bs-color-4);
}
.color-5{
  color: var(--bs-color-5);
}

.card-body{
  background-color: var(--bs-color-5);
}

.btn-primary {
  --bs-btn-color: var(--bs-color-5);
  --bs-btn-bg: var(--bs-color-2);
  --bs-btn-border-color: var(--bs-color-2);
  --bs-btn-hover-color: var(--bs-color-5);
  --bs-btn-hover-bg: var(--bs-color-3);
  --bs-btn-hover-border-color: var(--bs-color-3);
  --bs-btn-focus-shadow-rgb: 122, 132, 218;
  --bs-btn-active-color: var(--bs-color-5);
  --bs-btn-active-bg: var(--bs-color-3);
  --bs-btn-active-border-color: var(--bs-color-3);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-color-5);
  --bs-btn-disabled-bg: var(--bs-color-2);
  --bs-btn-disabled-border-color: var(--bs-color-2);
}

input[switch]:checked+label{
  background-color: var(--bs-color-2);
}

.timeline-content{
  background-color: var(--bs-color-5);
}

.text-bold{
  font-weight: 500;
}