@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap%27');
body {
  background-color: #F4F4F4;
  margin: 0;
 
    font-family: "Montserrat", sans-serif;
 
}


/* Background */
.login-wrapper {
  min-height: 100vh;
  background-image: url(../images/login-bg.jpg);
  /* background: linear-gradient(135deg, #1a73c7, #2c55d4); */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/* Card */
.login-card {
  background: transparent;
  color: #fff;
  max-width: 420px;
  width: 100%;
}

/* Logo */
.logo {
  font-size: 42px;
  font-weight: 700;
  letter-spacing: 2px;
}

.logo span {
  position: relative;
}

.subtitle {
  font-size: 15px;
  margin-bottom: 30px;
  opacity: 0.9;
}

/* Inputs */
.input-group-text {
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
}

.form-control {
  background: rgba(255, 255, 255, 0.699);
  border: none;
  /* color: #fff; */
  padding: 12px;
}

.form-control::placeholder {
  color: #888888;
}

.form-control:focus {
  box-shadow: none;
  background: rgba(255,255,255,0.25);
}

/* Button */
.login-btn {
  background: #fff;
  color: #1a73c7;
  font-weight: 600;
  padding: 12px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.login-btn:hover {
  background: #e6f0ff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

/* Forgot link */
.forgot-link {
  color: #ffffffcc;
  font-size: 14px;
  text-decoration: none;
}

.forgot-link:hover {
  text-decoration: underline;
  color: #fff;
}

/* Responsive */
@media (max-width: 576px) {
  .logo {
    font-size: 34px;
  }
}

/* trial page css  */

.bg {
  background: #f4f6f9;
  font-family: 'Segoe UI', sans-serif;
}

/* SIDEBAR */
.sidebar {
  width: 240px;
  min-height: 100vh;
  background: #1e73be;
  color: #fff;
}

.logo {
  font-size: 28px;
  font-weight: 700;
  text-align: center;
}

.logo span {
  color: #ffd700;
}

.sidebar .nav-link {
  color: #dce7f5;
  padding: 12px 15px;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

.sidebar .nav-link i {
  margin-right: 10px;
}

.sidebar .nav-link:hover {
  background: rgba(255,255,255,0.15);
  transform: translateX(5px);
}

.sidebar .nav-link.active {
  background: #0d5fa7;
  color: #fff;
}


.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

/* TOPBAR */
.topbar {
  background: #fff;
  padding: 7px 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.topbar i {
     border-radius: 5px;
    border: 1px solid #e7e7e7;
    padding: 2px 7px;
  font-size: 20px;
  cursor: pointer;
}
.profile {
     border-radius: 5px;
    border: 1px solid #e7e7e7;
    padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.profile img {
  border-radius: 15%;
}

/* CARD */
.trial-card {
  border-radius: 14px;
  border: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  animation: fadeUp 0.5s ease;
}

@keyframes fadeUp {
  from {opacity: 0; transform: translateY(20px);}
  to {opacity: 1; transform: translateY(0);}
}

.card-header {
  background: #fff;
  border-bottom: 1px solid #eee;
}

/* ICON BUTTON */
.icon-btn {
  border: 1px solid #ddd;
  background: #fff;
  padding: 5px 10px;
  border-radius: 8px;
  margin-left: 8px;
  transition: all 0.3s ease;
}

.icon-btn:hover {
  background: #f0f6ff;
  transform: scale(1.05);
}

/* FORM */
.form-control, .form-select {
  border-radius: 5px;
  padding: 10px;
}
.form-control{
  border:1px solid #dee2e6;
}
.form-control:focus, .form-select:focus {
  box-shadow: 0 0 0 0.2rem rgba(30,115,190,.25);
}

/* BUTTONS */
.upload-btn {
  background: #0d6efd;
  color: #fff;
  padding: 10px 20px;
  border-radius: 7px;
  transition: all 0.3s ease;
}

.upload-btn:hover {
  background: #084298;
  transform: translateY(-2px);
}

.create-btn {
  border: 2px solid #0d6efd;
  background: transparent;
  color: #0d6efd;
  padding: 10px 30px;
  border-radius: 7px;
  transition: all 0.3s ease;
}

.create-btn:hover {
  background: #0d6efd;
  color: #fff;
  box-shadow: 0 8px 20px rgba(13,110,253,0.3);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}
.c-border{
  border: 1px solid #ededed;
}
.card{
  
    border-radius:5px;
   /* border: 1px solid grey; */
}
.card-header {
  background: #fff;
  border-bottom: 1px solid #eee;
}
.custom-table thead {
  background: #f8f9fb;
}

.custom-table tbody tr {
  transition: all 0.25s ease;
}

.custom-table tbody tr:hover {
  background: #cccccc;
  transform: scale(1.01);
}

.filter-select {
  width: 150px;
}

.search-input {
  width: 220px;
}

.status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}

.completed { background: #28a745; }
.pending { background: #6c757d; }
.rejected { background: #dc3545; }
.approved { background: #28a745; }

.action-icons .btn {
  border-radius: 10px;
  margin-right: 4px;
}

@media (max-width: 768px) {
  .search-input {
    width: 100%;
    margin-top: 10px;
  }
}