body {
  font-family: 'Kanit', sans-serif;
  width: 100%;
  height: 100vh;
  background-image: url('img/bg.jpg');
  background:
    linear-gradient(180deg, rgba(12, 10, 12, 0.4), rgba(12, 10, 12, 0.4)),
    url('img/bg.jpg') center center / cover no-repeat fixed;
  background-size: cover;
}

.form-check {
    position: relative;
    display: block;
    padding-left: 0rem !important;
}

.navbhar {
  cursor: pointer !important;
}

.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
  cursor: pointer !important;
}

.dropdown-toggle {
  cursor: pointer !important;
}

.dropdown-item {
  cursor: pointer !important;
}

.offline {
  color: red;
}

.online {
  color: green;
}

.card {
  background: rgba(255, 248, 238, 0.92);
  border: 1px solid rgba(201, 160, 88, 0.42);
  box-shadow: 0 24px 48px rgba(135, 96, 40, 0.18);
  color: #5a3d24;
}

.card-header,
.card-footer {
  background: rgba(255, 244, 228, 0.96);
  border-color: rgba(201, 160, 88, 0.28);
}

.card-header h5,
.card-header h6,
.card-body,
.card-footer {
  color: #5a3d24;
}

.input-group-text {
  background: rgba(255, 240, 220, 0.98);
  border-color: rgba(201, 160, 88, 0.32);
  color: #8a6434;
}

.form-control {
  background: #fffaf2;
  border-color: rgba(201, 160, 88, 0.35);
  color: #4c3522;
}

.form-control::placeholder {
  color: rgba(112, 85, 52, 0.58);
}

.form-control:focus {
  background: #fffdf8;
  border-color: rgba(214, 175, 95, 0.58);
  box-shadow: 0 0 0 0.2rem rgba(201, 160, 88, 0.18);
  color: #4c3522;
}

.btn-success {
  background: linear-gradient(180deg, #df3d34, #a91516);
  border-color: rgba(163, 21, 22, 0.9);
  box-shadow: 0 14px 28px rgba(130, 16, 17, 0.26);
  color: #fff7ec;
}

.btn-success:hover,
.btn-success:focus {
  background: linear-gradient(180deg, #ea4a3d, #b91d1f);
  border-color: rgba(185, 29, 31, 0.95);
}