*{
  padding:0 ;
  margin:0;
  box-sizing:border-box;
}


/*=====NOTIFICATION Code START====*/
.notification-box {
position: fixed;
top: 20px;
right: 20px;
padding: 15px 20px;
border-radius: 8px;
color: white;
font-size: 15px;
opacity: 0;
visibility: hidden;
transform: translateY(-20px);
transition:
opacity .3s ease,
transform .3s ease,
visibility .3s ease;
z-index: 1002;
}

.notification-box.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

.notification-box.success{
background:#2ecc71;
color:white;
}

.notification-box.error{
background:#e74c3c;
color:white;
}

.notification-box.warning{
background:#f39c12;
color:white;
}

.notification-box.info{
background:#3498db;
color:white;
}
/*=====NOTIFICATION CODE END =======*/




body {
  font-family: Arial, sans-serif;
  background: #efefef;
  margin: 0;
  /*padding: 20px;*/
}

h2 {
  text-align: center;
  margin-bottom: 20px;
  display: none;
}

.table-container {
  width: 100%;
  overflow-x: auto;
}

/* Modal styles */
.modal {                                          
display:flex;                
 /*position: fixed;
 top: 0;
 left: 25%;
 width: 100%;
 height: 100%;*/
 background:#efefef;
 justify-content: center;
 align-items: center;
 z-index: 999;
}

.modal-content {
background: #fff;
padding: 1% 2.5%;
border-radius: 8px;
width: 400px;
max-width: 90%;
}

.modal-content h2 {
 margin-top: 0;
 margin-bottom: 20px;
 text-align: center;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 6px;
  text-align: left;
}

input, select {
 width: 95%;
 padding: 10px;
 border-radius: 6px;
 border: 1px solid #444;
 background: #2a2a2a;
 color:#fff;
}

.btn-group {
 display: flex;
 justify-content: space-between;
}

.btn {
 padding: 10px 16px;
 border: none;
 border-radius: 6px;
 cursor: pointer;
 font-weight: bold;
}

.submit-btn {
background: #28a745;
color: #fff;
}

.cancel-btn {
  background: #dc3545;
  color: #fff;
}