@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai');
@import url('https://fonts.googleapis.com/css2?family=Trirong');
@import url('https://fonts.googleapis.com/css2?family=Sarabun');
  body {
      padding: 20px 5px;
      margin: 0;
      height: 100vh;
      background: #d6ae7b;
      background: -webkit-linear-gradient(to bottom,#eacda3, #d6ae7b);
      background: linear-gradient(to bottom,#eacda3, #d6ae7b);
      background-attachment: fixed;
      animation: gradient 15s ease infinite;
      display: flex;
      justify-content: center;
      font-family: 'Sarabun', serif;
    }

    @keyframes gradient {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
  }
  
----------------------------------------------
  .loading {
      display: none;
      margin-left: 10px;
  }
  .nav-pills .nav-link.active {
      background-color: #0d6efd;
  }
  .dashboard-card {
      transition: transform 0.3s;
  }
  .dashboard-card:hover {
      transform: translateY(-5px);
  }
.responsive-font {
font-size: 0.7rem; /* Default for small screens */

}
-------------------------------------------
@media (min-width: 768px) {
.responsive-font {
font-size: 1rem; /* Larger font on wider screens */
}
}
:root {
--bs-primary: #795548; /* Brown */
--bs-primary-rgb: 121, 85, 72;
--bs-primary-hover: #6d4c41;
--bs-primary-text: #fff;
}

/* Solid primary buttons */
.btn-primary {
background-color: var(--bs-primary);
border-color: var(--bs-primary);
color: var(--bs-primary-text);
}

.btn-primary:hover {
background-color: var(--bs-primary-hover);
border-color: var(--bs-primary-hover);
color: var(--bs-primary-text);
}

/* Outline primary buttons */
.btn-outline-primary {
color: var(--bs-primary);
border-color: var(--bs-primary);
}

.btn-outline-primary:hover {
background-color: var(--bs-primary);
color: var(--bs-primary-text);
border-color: var(--bs-primary);
}

/* Text and background */
.text-primary {
color: var(--bs-primary) !important;
}

.bg-primary {
background-color: var(--bs-primary) !important;
color: var(--bs-primary-text);
}

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

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

.link-primary:hover {
color: var(--bs-primary-hover);
}

.nav-dropup:hover {
color: black !important;
}