* {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* html, body { */
    /* todo: is this good? */ /* Prevent scroll on narrow devices */
  /* overflow-x: hidden;  */
/* } */

body {
       /* background-color: #FFFFFF; */
       /* margin: 0; */
    /* background-image: url('https://dinfratechsource.wordpress.com/wp-content/uploads/2023/04/website_bgsample-1.png'); */
    background-size: cover;
        /* background-position: center; */
    background-position: 80% 20%;
}
.div {
    /* todo: remove */
    border: #319ca3 1px solid;
}

.navtop {
    background-color: #3f69a8;
    height: 60px;
    width: 100%;
    border: 0;
}
.navtop div {
    display: flex;
    margin: 0 auto;
    width: 1000px;
    height: 100%;
}
.navtop div h1, .navtop div a {
    display: inline-flex;
    align-items: center;
}
.navtop div h1 {
    flex: 1;
    font-size: 24px;
    padding: 0;
    margin: 0;
    color: #ecf0f6;
    font-weight: normal;
}
.navtop div a {
    padding: 0 20px;
    text-decoration: none;
    color: #c5d2e5;
    font-weight: bold;
}
.navtop div a i {
    padding: 2px 8px 0 0;
}
.navtop div a:hover {
    color: #ecf0f6;
}

/* ---------------------------------------------------------------------------------------- */


.read .create-contact {
    display: inline-block;
    text-decoration: none;
    background-color: #38b673;
    font-weight: bold;
    font-size: 14px;
    color: #FFFFFF;
    padding: 10px 15px;
    margin: 15px 0;
}
.read .create-contact:hover {
    background-color: #32a367;
}
.read .pagination {
    display: flex;
    justify-content: flex-end;
}
.read .pagination p {
  padding: 5px 10px;
  margin: 15px 0 15px 5px;
}
.read .pagination a {
    display: inline-block;
    text-decoration: none;
    background-color: #c9caca;
    font-weight: bold;
    color: #FFFFFF;
    padding: 5px 10px;
    margin: 15px 0 15px 5px;
}
.read .pagination a:hover {
    background-color: #999b9d;
}
.read table {
    width: 100%;
    padding-top: 30px;
    border-collapse: collapse;
}
.read table thead {
    background-color: #ebeef1;
    border-bottom: 1px solid #d3dae0;
}
.read table thead td {
    padding: 10px;
    font-weight: bold;
    color: #767779;
    font-size: 14px;
}
.read table tbody tr {
    border-bottom: 1px solid #d3dae0;
}
.read table tbody tr:nth-child(even) {
    background-color: #fbfcfc;
}
.read table tbody tr:hover {
    background-color: #a9e4cd;
}
.read table tbody tr:hover td {
    color: #8d8b83;
}
.read table tbody tr:hover td:nth-child(1) {
    color: #8d8b83;
}
.read table tbody tr td {
    padding: 10px;
}
.read table tbody tr td:nth-child(1) {
    color: #a5a7a9;
}
.read table tbody tr td.actions {
    padding: 8px;
    text-align: right;
}
.read table tbody tr td.actions .edit, .read table tbody tr td.actions .trash {
    display: inline-flex;
    text-align: right;
    text-decoration: none;
    color: #FFFFFF;
    padding: 10px 12px;
}
.read table tbody tr td.actions .trash {
    background-color: #b73737;
}
.read table tbody tr td.actions .trash:hover {
    background-color: #a33131;
}
.read table tbody tr td.actions .edit {
    background-color: #37afb7;
}
.read table tbody tr td.actions .edit:hover {
    background-color: #319ca3;
}
.update form {
    padding: 15px 0;
    display: flex;
    flex-flow: wrap;
}
.update form label {
    display: inline-flex;
    width: 400px;
    padding: 10px 0;
    margin-right: 25px;
}
.update form input {
    padding: 10px;
    width: 400px;
    margin-right: 25px;
    margin-bottom: 15px;
    border: 1px solid #cccccc;
}
.update form input[type="submit"] {
    display: block;
    background-color: #38b673;
    border: 0;
    font-weight: bold;
    font-size: 14px;
    color: #FFFFFF;
    cursor: pointer;
    width: 200px;
    margin-top: 15px;
}
.update form input[type="submit"]:hover {
    background-color: #32a367;
}
.delete .yesno {
    display: flex;
}
.delete .yesno a {
    display: inline-block;
    text-decoration: none;
    background-color: #38b673;
    font-weight: bold;
    color: #FFFFFF;
    padding: 10px 15px;
    margin: 15px 10px 15px 0;
}
.delete .yesno a:hover {
    background-color: #32a367;
}



/* ------------------------------------------------------------------------------------------------------------------------------------ */
/* https://www.w3schools.com/howto/howto_css_tooltip.asp */
/* ------------------------------------------------------------------------------------------------------------------------------------ */

  /* ================================================================================================================================ */





body{
    margin-top:20px;
    background-color: #eee;
}

.search-result-categories>li>a {
    color: #b6b6b6;
    font-weight: 400
}

.search-result-categories>li>a:hover {
    background-color: #ddd;
    color: #555
}

.search-result-categories>li>a>.glyphicon {
    margin-right: 5px
}

.search-result-categories>li>a>.badge {
    float: right
}

.search-results-count {
    margin-top: 10px
}

.search-result-item {
    padding: 1px;
    background-color: #fff;
    border-radius: 4px
}

.search-result-item:after,
.search-result-item:before {
    content: " ";
    display: table
}

.search-result-item:after {
    clear: both
}

.search-result-item .image-link {
    display: block;
    overflow: hidden;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px
}

@media (min-width:768px) {
  .search-result-item .image-link {
      display: inline-block;
      margin: -20px 0 -20px -20px;
      float: left;
      width: 200px
  }
}

@media (max-width:767px) {
  .search-result-item .image-link {
      max-height: 200px
  }
}

.search-result-item .image {
    max-width: 100%
}

.search-result-item .info {
    margin-top: 1px;
    font-size: 12px;
    color: #999
}

.search-result-item .description {
    font-size: 13px
}

.search-result-item+.search-result-item {
    margin-top: 20px
}

@media (min-width:768px) {
    .search-result-item-body {
        margin-left: 200px
    }
}

.search-result-item-heading {
    font-weight: 400
}

.search-result-item-heading>a {
    color: #555
}

@media (min-width:768px) {
    .search-result-item-heading {
        margin: 0
    }
}  


/* ---------------------------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------------------------------- */


.nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
  }
  
  .nav-scroller .nav {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    color: rgba(255, 255, 255, .75);
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  
  .nav-underline .nav-link {
    padding-top: .75rem;
    padding-bottom: .75rem;
    font-size: .875rem;
    color: #6c757d;
  }
  
  .nav-underline .nav-link:hover {
    color: #007bff;
  }
  
  .nav-underline .active {
    font-weight: 500;
    color: #343a40;
  }


.text-orange {
    color: #a8680e !important;
  }

.text-green {
    color: #05700e !important;
  }

.text-lightgreen {
    color: #556457 !important;
  }
  
.text-peach {
    color:  #c59401;
  }

.bg-purple {
    background-color: #6f42c1 !important;
  }

.bg-red {
    background-color: #f00  !important;
  }
.bg-orange {
    background-color: #a8680e !important;
}
.bg-peach {
  background-image: linear-gradient(to right top, #edece5, #f0eee2, #f2f0df, #f5f2dc, #f8f4d9);
}



.bg-yellow {
    /* background-color: #fcb865; */
    /* background-image: linear-gradient(to bottom, #e6b113, #dec451, #dbd580, #dde3ad, #e7eed7); */
    background-image: linear-gradient(to right top, #ffffff, #fefafc, #fef5f5, #fbf1ea, #f1efe2);
  }
  
.badge-sm {
    font-size: 0.85rem !important;
    padding: 0.25em 0.4em;
  }
  
.badge-lg {
    font-size: 1.1rem !important;
    padding: 0.5em 0.8em;
  }
    
/* ---------------------------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------------------------------- */

body {
    padding-top: 56px;
    padding-bottom: 56px;
}
  

/* ---------------------------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------------------------------- */










  
    /* https://bootstrapexamples.com/@mateo/search-section-with-category-filter */
    
    
  /*
      .search-wrapper {
        background: white;
        border-radius: 10px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.08);
        transition: all 0.3s ease;
      }
  
      .search-header {
        padding: 20px;
        border-bottom: 1px solid #eee;
      }
  
      .search-input-group {
        position: relative;
        display: flex;
        align-items: center;
      }
  
      .search-input {
        border: 2px solid #eee;
        border-radius: 30px;
        padding: 15px 25px;
        padding-right: 50px;
        width: 100%;
        transition: all 0.3s ease;
      }
  
      .search-input:focus {
        border-color: #007bff;
        box-shadow: none;
      }
  
      .search-icon {
        position: absolute;
        right: 20px;
        color: #666;
      }
  
      .category-filters {
        padding: 15px 20px;
        background: #f8f9fa;
        border-radius: 0 0 15px 15px;
      }
  
      .filter-chip {
        display: inline-block;
        padding: 4px 8px;
        margin: 5px;
        background: white;
        border: 1px solid #ddd;
        border-radius: 15px;
        cursor: pointer;
        transition: all 0.2s ease;
      }
  
      .filter-chip:hover {
        background: #007bff;
        color: white;
        border-color: #007bff;
      }
  
      .filter-chip.active {
        background: #007bff;
        color: white;
        border-color: #007bff;
      }
  
      .filter-chip i {
        margin-right: 5px;
        font-size: 0.9em;
      }
   */



   /* --------- */

    /* https://bootstrapexamples.com/@mateo/search-section-with-category-filter */
    
  .search-container {
    
    /* max-width: 1100px; */
    margin: 0 auto;
  }

  .search-wrapper {
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
  }

  .search-header {
    padding: 10px;
    border-bottom: 1px solid #eee;
  }

  .search-input-group {
    position: relative;
    display: flex;
    align-items: center;
  }
  
  #search-query {
    border: 2px solid #eee;
    border-radius: 30px;
    /* padding: 15px 25px; */
    /* padding-right: 50px; */
    width: 100%;
    /* transition: all 0.3s ease; */
    /* width: 110px; */
    /* transition: width 0.3s ease; */
  }
  
  #search-query:focus {
    border-color: #007bff;
    box-shadow: none;
    /* width: 100%; */
  }

  .search-icon {
    /* position: absolute; */
    left: 20px;
    /* color: #666; */
    color: #fff;
  }

  .category-filters {
    padding: 5px 20px;
    background: #f8f9fa;
    border-radius: 0 0 15px 15px;
  }

  .filter-chip {
    /* todo: some sizes are shortened for now */
    display: inline-block;
    /* padding: 8px 15px; */
    padding: 2px 8px;
    margin: 2px;
    background: white;
    color: #212529BF !important; /* Lighter gray - you can pick your own color */
    border: 1px solid #ededed;
    /* border-radius: 20px; */
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .filter-chip:hover {
    background: #007bff;
    color: white;
    border-color: #007bff;
  }

  .filter-chip.active {
    background: #007bff;
    color: white;
    border-color: #007bff;
  }

  .filter-chip i {
    margin-right: 5px;
    font-size: 0.9em;
  }

  .quick-filters {
    display: flex;
    gap: 10px;
    /* margin-top: 15px; */ /*  todo */
    /* margin-top: 15px;  */
  }

  .quick-filter {
    padding: 5px 12px;
    background: #e9ecef;
    /* border-radius: 15px; */
    /* border-radius: 25% 10%; */
    border-radius: 8px 8px 8px 8px;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .quick-filter:hover {
    background: #dee2e6;
  }

  .suggestions {
    margin-top: 10px;
    padding: 10px 0;
    border-top: 1px solid #eee;
  }

  .suggestion-item {
    padding: 8px 20px;
    cursor: pointer;
    transition: background 0.2s;
  }

  .suggestion-item:hover {
    background: #f8f9fa;
  }

  .suggestion-category {
    font-size: 0.8em;
    color: #666;
    margin-left: 5px;
  }

/* ----------------------------------------------------------------------------------------------------------------------------------- */
.expand-col {
  transition: all 0.4s ease;
}

.col-auto.shrink {
  flex: 0 0 auto;
  max-width: 100px;
}

.col-auto.expand {
  flex: 1 1 100%;
  max-width: 100%;
}

/* ----------------------------------------------------------------------------------------------------------------------------------- */

.step-card {
    min-height: 200px;
    max-height: 200px;
}

/* ----------------------------------------------------------------------------------------------------------------------------------- */ 
/* ---------------------------------------------------------------------------------------------------------------------------------- */
 
      /* ---- cbn ----- */



/* 
a {

  color: gray !important;
  text-decoration: none !important;
} */

a:hover {
  opacity: 0.8;
}

.mybtn-outline {
  border: #007bff 1px;
}

.mynormallink {
    /* opacity: 0.8; */
    color: gray !important;
    text-decoration: none !important;
    font-weight:regular;
  }

.mylink {
    /* opacity: 0.8; */
    color: gray !important;
    text-decoration: none !important;
    font-weight:bold;
  }
  
.mylink:hover { 
    /* opacity: 0.7; */
    color:  #7d5f05 !important;
    /* text-decoration: underline 1px !important; */
    /* text-shadow: 0px -2px 2px #ece9e2; */
    font-weight:bold;
  }

  
  /* clickable-div */
  
  /* clickable-div { */


/* clickable-div:hover { */
.ajax-update-field:hover {
    opacity: 0.8;
    /* text-decoration: underline; */
  }




/* -------------- */
/* how it works widget : https://bootstrapexamples.com/@ankit/steps-section */
.step-item {
  position: relative;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.step-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.step-icon span {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.step-item::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -15px;
  width: 30px;
  height: 2px;
  background-color: #dee2e6;
  transform: translateY(-50%);
}

.step-item:last-child::after {
  display: none;
}

@media (max-width: 767.98px) {
  .step-item::after {
    display: none;
  }
}

/* -------------- */


/* -------------- */
/* overrides */

 
  .my-navbar-top li {
    float: left;
    /* padding: 12px; */
    color: white;
    text-decoration: none;
    font-size: 17px;
  }
  
  .my-navbar-top a:hover,   .my-navbar-bottom a:hover {
    /* background-color: #111; */
    opacity: 0.8;
  }

  .my-navbar-top {
    /* If you don’t want the page to "jump" when the navbar disappears: Use position: fixed; for the navbar so its disappearance doesn’t affect page layout. */
    position: fixed; 
    transition: top 0.4s ease , opacity 0.2s ease;  /* for smooth hiding when scrolling */

    /* background-color: #0089ba; */
    /* background-color: #008e9b; */
    /* background-color: #1c819e; */
    /* background-color: #28262c; */
    /* background-image: linear-gradient(to right top, #ffffff, #fefafc, #fef5f5, #fbf1ea, #f1efe2); */
    background-image: linear-gradient(to right top, #dfded5, #e3dfc4, #e6e0b2, #eae1a0, #eee28e);
    background-image: linear-gradient(to right top, #edece5, #f0eee2, #f2f0df, #f5f2dc, #f8f4d9);
  }
  
  .my-navbar-bottom {   
  position: fixed;
  max-height: 76px;
  border: 1px rgb(230, 230, 230) solid;
  transition: opacity 0.2s ease;  /* for smooth hiding when scrolling */
  /* color: pink;  */
  /* background-image: linear-gradient(to bottom, #656462, #57534a, #494332, #3a341c, #2b2501); */
  /* background-image: linear-gradient(to bottom, #22211f, #1c1c19, #171614, #11100c, #080702); */
    /* background-image: linear-gradient(to right top, #5d5d5a, #585746, #535031, #4f491c, #4b4201); */
    /* background-image: radial-gradient(circle, #ababab, #969696, #818181, #6d6d6d, #5a5a5a); */
    /* background-image: linear-gradient(to top, #11233e, #152e51, #183a65, #19467a, #1a538f);
    background-image: linear-gradient(to top, #3c3808, #403c07, #454006, #494405, #4e4804);
    background-image: linear-gradient(to top, #101214, #101418, #10161c, #101821, #101925); */
    /* background-color: #11233e; */
  }



.custom-navbar {
  padding: 1px 1px !important; 
  /* background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.7)); */
}

.custom-tooltip {
  --bs-tooltip-bg: #f0d98b !important;
  --bs-tooltip-color: #101112 !important;
  /* --bs-tooltip-font-size: 2.1rem; */
  /* font-size: 18px; */

  /* --bs-tooltip-bg: #d1d6da; */
}

.tooltip-inner {
  /* todo: change font-size specific to media query */
  max-width: none; /* Removes Bootstrap's default 200px max-width */
  padding: 0px;
  /* padding: 10px 15px; */
  font-size: 12px;
  background-color: #333; /* Optional: Customize background */
  color: #fff; /* Optional: Customize text color */
}

/* ------------------------------------------------------------------------ */
#toast-container {
  position: fixed;
  /* position: absolute; */
  top: 5rem;
  /* bottom: 1rem; */
  right: 1rem;
  z-index: 9999;
}

/* ------------------------------------------------------------------------ */
.my-primary {
  
  color: #72602a !important; 
  font-weight: bold;

}/* ------------------------------------------------------------------------ */


/* If the screen size is 601px or more, set the font-size of <div> to 80px */
@media (min-width: 601px) {
  /* .my-navbar-bottom  */
  .nav-link{
  /* .my-navbar-bottom nav-link{    todo: why not working(don't override all nav-link ?) */
  font-size: 18px  !important; 
}
.content {
  /* width: 1000px; */
  width: 90%;
  margin: 0 auto;
}


  .text-x-small {
      font-size: 0.8rem !important;
    }
  .text-xx-small {
      font-size: 0.75rem !important;
    }

  .text-xxx-small {
      font-size: 0.70rem !important;
    }

  .text-xxxx-small {
      font-size: 0.60rem !important;
    }

  .fs-7 {
      font-size: 0.95rem !important; /* or whatever size you prefer */
  }
    
  .fs-8 {
      font-size: 0.85rem !important; /* or whatever size you prefer */
  }  
  .fs-9 {
      font-size: 0.75rem !important; /* or whatever size you prefer */
  }
  .fs-10 {
      font-size: 0.65rem !important; /* or whatever size you prefer */
  }
  .fs-11 {
      font-size: 0.55rem !important; /* or whatever size you prefer */
  }
  .fs-12 {
      font-size: 0.45rem !important; /* or whatever size you prefer */
  }
    

}

/* If the screen size is 600px or less, set the font-size of <div> to 30px */
@media  (max-width: 600px) {
  /* .my-navbar-bottom { */
  .nav-link{
  /* .my-navbar-bottom nav-link{    todo: why not working(don't override all nav-link ?) */
    font-size: 14px  !important; 
  }
  .content {
    /* width: 1000px; */
    width: 99%;
    margin: 0 auto;
  }

  .text-x-small {
      font-size: 0.7rem !important;
    }
  .text-xx-small {
      font-size: 0.65rem !important;
    }
  
  .text-xxx-small {
      font-size: 0.60rem !important;
    }
  
  .text-xxxx-small {
      font-size: 0.50rem !important;
    }
    .fs-7 {
      font-size: 0.85rem !important; /* or whatever size you prefer */
  }
    
  .fs-8 {
      font-size: 0.75rem !important; /* or whatever size you prefer */
  }

  .fs-9 {
      font-size: 0.65rem !important; /* or whatever size you prefer */
  }
     
  .fs-10 {
      font-size: 0.55rem !important; /* or whatever size you prefer */
  }
  .fs-11 {
      font-size: 0.45rem !important; /* or whatever size you prefer */
  }
  .fs-12 {
      font-size: 0.35rem !important; /* or whatever size you prefer */
  }
        
}

.btn-xl {

  /* padding-y: 0.5rem; */
  /* padding-x: 1rem; */
  font-size: 1.5rem;
  
}

.btn-xxl {
  font-size: 2rem;
}
.btn-xxxl {
  font-size: 3rem;
}

.my-6 {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.mt-6 {
  margin-top: 4rem;
}
/* ---------------------------------------------------------------------------------------- */

.text-bold {
  font-weight: 900 !important;
}
.text-muted-light {
  /* color: #b0b0b0 !important; */ /* Lighter gray - you can pick your own color */
  color:rgba(33, 37, 41, 0.70);
}
.text-muted-lighter {
  color: #c0c0c0 !important; /* Lighter gray - you can pick your own color */
}
.text-muted-lightest {
  color: #d0d0d0 !important; /* Lighter gray - you can pick your own color */
}
 
/* ---------------------------------------------------------------------------------------- */

.content h2 {
  margin: 0;
  padding: 25px 0;
  font-size: 22px;
  border-bottom: 1px solid #ebebeb;
  color: #666666;
}


.mylist-item {
  /* default border to prevent readjustment shakiness  */
  border: 2px solid hsla(0, 0%, 100%, 0.41);
  border-radius: 4px;
}



/* ------------------- STICKY FILTER BAR--------------------------------------------------------------------- */


.navbar {
/* .my-navbar-top { */
  z-index: 1040;
}


.filter-bar {
  position: sticky;
  top: 45px; /* Height of the navbar */
  z-index: 1030;
  background: #dfe7ef;
  border-top: 1px solid #dee2e6;
  border-top: 1px solid #dee2e6;
  border-bottom: 1px solid #dee2e6;
  /* min-height: 90px; */
}

.filter-scroll {
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.filter-scroll::-webkit-scrollbar {
  display: none;
}

.filter-fade {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100px;
  background: linear-gradient(to right, transparent, white);
  pointer-events: none;
  z-index: 2;
}

.scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  padding: 0.5rem;
  z-index: 3;
}

.scroll-btn-left {
  left: 0;
}

.scroll-btn-right {
  right: 0;
}

.filter-bar-wrapper {
  position: relative;
}




/* -------------------------------------------------------------------- */


.progress-bar-custom {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.2;
  font-size: 0.9rem;
  white-space: normal;
  text-align: center;
  cursor: pointer;
}




.navbartop-hidden {
  /* top: -96px !important; */ /* move navbar out of view */
  transform: translateY(-100%);
  transition: transform 0.9s ease;
  opacity: 0;
  pointer-events: none;
}

.navbarbottom-hidden {

    /* bottom: -96px !important; */ /* move navbar out of view */
    transform: translateY(100%);
    transition: transform 0.9s ease;
    opacity: 0;
    pointer-events: none;
}


.my-palette-1 {
  /* color: #ffc107 !important; */
  color: #72602a !important;
}
.my-palette-bg-1 {
  color: white !important;
  /* background-color: #72602a !important; */
  background-image: linear-gradient(to right top, #72602a, #79662c, #816c2e, #887331, #907933) !important;
}

/* Font awesome additions to v4 starts here */

.fa-xl {
  font-size: 1.5em !important;
    line-height: .75em;
    vertical-align: -15%;
}
.fa-xxl {
  font-size: 2.5em !important;
  line-height: .75em;
  vertical-align: -15%;
}

.fa-xs {
  font-size: 0.65em !important;
  padding: 0.35em 0.65em;
  vertical-align: middle; 
}

.fa-sm {
  font-size: 0.75em !important;
  vertical-align: middle; /* Use vertical-align: middle (optional), if you're mixing icons with text and want alignment */
}

@keyframes fa-beat-animation {
  0%, 100% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(0.95);
  }
  75% {
    transform: scale(1.1);
  }
}

.fa-beat {
  display: inline-block;
  animation: fa-beat-animation 2s infinite ease-in-out;
  transform-origin: center;
}

/* Font awesome additions to v4 ends here */



  .btn:active {
    outline-color: red;
  }


.op50 {
    opacity: 0.15;
  }
  
.op10 {
    opacity: 0.06;
  }
  
.op05 {
    opacity: 0.04;
  }
  



  .text-left {
    text-align: left !important;
  }


  /* -------------------------------------------------------------- */
  /* add/choose category div using click to toggle buttons  */

.check-label {
  cursor: pointer;
  padding: 0.5rem 1rem;
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  transition: border 0.3s ease;
}

/* .btn-check:checked + .check-label { */
  /* border-color:rgb(7, 119, 42); */
  /* background-color:rgb(237, 235, 235); */
/* } */

.addCategory {
  border: .1px solid rgba(199, 196, 196, 0.48) !important;
  /* border: 1px solid rgba(255, 0, 0, 0.999) !important; */  /* red */
  border-radius: 10px;
}

.addCategory:has(.btn-check:checked) {
  border: 1.3px solid rgba(3, 93, 32, 0.48) !important;
  font-weight: 600;
  /* border-radius: 10px; */
  background-color: rgb(242, 250, 242) !important;
  /* color: #ffffff; */
}


.check-icon {
  margin-left: 0.5rem;
  transition: transform 0.3s ease;
}

.check-label .fa-toggle {
  display: none;
}

.btn-check:checked + .check-label .fa-default {
  display: none;
}

.btn-check:checked + .check-label .fa-toggle {
  display: inline;
}

/* -------------------------------------------------------------- */


.smooth-collapse.collapse,
.smooth-collapse.collapsing {
  transition: height 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}



/* -------------------------------------------------------------- */


.border-light {

  border: .5px solid rgba(3, 93, 32, 0.18) !important;
}


.border-lighter {
  /* todo: it seems border-bottom will not work with this  */
    border: 1px solid #f8f9fb; /* This is lighter than #f1f3f5 */
  }