body { font-family: 'Segoe UI', sans-serif; margin: 0; padding: 20px; background-color: #F8F9FA; }
.container { max-width: 1200px; margin: 0 auto 0 -5px; background: white; border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); padding: 30px 9px 30px 12px; }
h2 { color: #2C3E50; margin-bottom: 7px; text-align: center; }
.filter { background: #F1F3F5; padding: 20px 20px 8px 20px; border-radius: 8px; margin-bottom: 14px; display: flex; align-items: flex-end; flex-wrap: wrap; }
.form-group { display: inline-block; margin-right: 15px; margin-bottom: 10px; width: 132px; height: 38px; }
.form-groupx { display: inline-block; margin-right: 15px; margin-bottom: 10px; width: 115px; height: 36px; margin-left: 2px; padding-left: 0px; /*+placement: 39px -1px;*/ position: relative; left: 39px; top: -1px; }
label { display: block; margin-bottom: 4px; font-weight: 600; }
input[type="date"], select, .btn { border-radius: 6px; border: 1px solid #CED4DA; font-size: 14px; width: 126px; padding-top: 4px; padding-bottom: 3px; padding-left: 0px; margin-left: 8px; }
select { min-width: 180px; }
.btn { background-color: #007BFF; color: white; cursor: pointer; border: none; transition: background-color 0.3s; }
.btn:hover { background-color: #0056B3; }
.btn:disabled { background-color: #6C757D; cursor: not-allowed; }
.toggle-btn { background-color: #6C757D; }
.toggle-btn:hover { background-color: #5A6268; }
.load-btn { background-color: #28A745; }
.load-btn:hover { background-color: #1E7E34; }
.info-box, .error-message, .no-data { padding: 15px; border-radius: 8px; margin-bottom: 30px; }
.info-box { background-color: #E7F5FF; color: #0056B3; border-left: 5px solid #007BFF; display: none; }
.error-message { background-color: #FFF0F1; color: #D90429; border-left: 5px solid #D90429; }
.no-data { background-color: #FFF9E6; color: #FF8C00; border-left: 5px solid #FF8C00; }
#loading { text-align: center; padding: 50px; font-size: 18px; color: #666; }
