body {
    background: #4f8af7;
    font-family: 'Segoe UI', sans-serif;
}

.card {
    border-radius: 4px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
}

.main-card {
    margin: 30px auto;
    width: 95%;
    max-width: 1000px;
    background: #ffffff;
    border-radius: 6px;
    padding: 20px;
    box-shadow: 0px 10px 30px rgba(0,0,0,0.25);
}

/* Title */
.title {
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 15px;
}



/* Inputs */
.form-group {
    display: flex;
    align-items: center; /* Vertically centers the label with the input */
    gap: 10px;          /* Adds space between the label and input */
    margin-bottom: 15px;
  }
}

.form-group label {
    font-size: 13px;
    font-weight: 600;
}

.form-group input,
.form-group select {
    width: 100%;
    height: 35px;
    padding: 5px 8px;
    border-radius: 2px;
    border: 1px solid #ccc;
}
	

.header-title {
    font-weight: 600;
    color: #2f3c7e;
}

.table thead {
    position: sticky;
    top: 0;
    background: #2f3c7e;
    color: #fff;
    z-index: 2;
}

.table tbody tr:hover {
    background-color: #fff9db;
}

.thmask {
	border:1px solid #d0eff2;
	color: #1c0485;
	text-align:left;
}
/* Rounded header corners */
.table th:first-child{
  border-radius:7px 0 0 0;
}

.table th:last-child{
  border-radius:0 7px 0 0;
}

.th {
	font-size:12px;
	margin-left:-6px;
	position: sticky;		
   }		

.td {
    margin:0px;
	padding:0px;
	white-space: normal !important; 
	word-wrap: break-word;  
	height:25px;
	font-size:12px;
	padding-top:0px;
}

.td:hover{
    background-color: #ffffd4;
}

.input-sm {
    height: 30px;
    font-size: 12px;
    border-radius: 2px;
}

.scroll-table {
    max-height: 480px;
    overflow-y: auto;
}

.form-label {
    font-weight: 600;
    color: #333;
}

.form-control {
    border-radius: 2px;
    border: 1px solid #ddd;
    font-size: 14px;
}

.form-control:focus {
    border-color: #2F3C7E;
    box-shadow: 0 0 5px rgba(47,60,126,0.3);
}

/* Base button enhancements */

.btn {
  font-weight: 500;
  border-radius: 6px;
  padding: 1px 2px;
  border: 1px solid red;
  transition: background-color 0.3s ease;  
  margin:3px;
}

.btn:hover {
  border: 2px solid black; /* Slightly darker shade on hover */
}

.btn-add       { background:#198754; color:#fff; }
.btn-save      { background:#20c997; color:#000; }
.btn-submit    { background:#0d6efd; color:#fff; }
.btn-proceed   { background:#0b5ed7; color:#fff; }
.btn-go        { background:#0dcaf0; color:#000; }

.btn-edit      { background:#ffc107; color:#000; }
.btn-preview   { background:#6f42c1; color:#fff; }
.btn-print     { background:#6610f2; color:#fff; }

.btn-export    { background:#0dcaf0; color:#000; }
.btn-import    { background:#20c997; color:#000; }
.btn-download  { background:#198754; color:#fff; }
.btn-upload    { background:#198754; color:#fff; }

.btn-posting   { background:#fd7e14; color:#000; }

.btn-help      { background:#0dcaf0; color:#000; }

.btn-back      { background:#a6a198; color:#fff; }
.btn-closex    { background:#945937; color:#fff; }
.btn-cancel    { background:#6c757d; color:#fff; }

.btn-revert    { background:#ffc107; color:#000; }

.btn-delete    { background:#dc3545; color:#fff; }
.btn-kill      { background:#a71d2a; color:#fff; }
.btn-exit      { background:#343a40; color:#fff; }