:root{
  /* --code: #hex; */
  --bs-primary: #fff;
  --bs-secondary: #e1e1e1;/*same with gray : #dddd*/
  --bs-tertiary: #ff0000;
  
  --other-green:#28a745;
  --other-blue:#4D55CC;
  }

html {background-color: #6eff65;background: url("../images/liquid-cheese.png");font-family: "Poppins", sans serif;}
body{font-family: "Poppins"; margin: 11vh 0;background:transparent;}
a{cursor:pointer; text-decoration:underline; color:var(--bs-tertiary); margin-right:4px;}
.container{width: 100%;display: block;margin: 0 auto;max-width: 1000px;position:relative;background-color: #fff;padding: 1rem .5rem;border-radius: 10px;}
.hide{display:none;}

/* FORM */
body > table{ width:100%; display:block; margin:0 auto;}
table{border-collapse: collapse;}

input[type=text], input[type=number], input[type="date"]{width:100%; padding: 12px 20px; margin:8px 0; display: inline-block; border: 1px solid #ccc;border-radius: 4px;}
td,th{border: 1px solid var(--bs-secondary); text-align: left; padding: 8px;}
tr:nth-child(even),table.list thead>tr{background-color:var(--bs-secondary);}

#sampleFile a {float: right;color: var(--other-blue);margin: 1rem;}
#sampleFile a:hover {color: var(--other-green);}

#formSheet{}
.formsheet {width: 30%;padding: 20px;background: #FBF3C1;}
label.validation-error{ color:var(--bs-tertiary); margin-left:5px;}
.formsheet form div.form-action-buttons input[type=submit]{background-color:transparent; color:var(--bs-primary); padding:0; margin:0; border:none; border-radius:none; cursor:pointer;}

#employeeSheet{overflow: hidden;position:relative;padding:0;}
#employeeList {position: absolute;top: 0;width: 100%;display: block;overflow-y: auto;height: 450px;}
form div.form-action-buttons{text-align:center;}
#employeeList th, #employeeList td {width: 25%;}
#employeeList th {   position: relative; }
#employeeList button {border: none;width: 20px;height: 13px;padding: 0px 2px 5px;margin: 0 0 17px;position: absolute;background-color: var(--bs-secondary);}
#employeeList button img {width: 100%;background-color: var(--bs-secondary);padding: 0;margin: 0;}
#employeeList thead tr {position: sticky;top: 0;}
#employeeList thead th {width: 100%;min-width: 125px;overflow: auto;}
#loadDataImg img{width: 100%;width: 100%;max-width: 30px;margin: 0 10px 20px;height: auto;min-height: 30px;}
.hint-alert {position: fixed;top: 10px;left: 50%;transform: translateX(-50%);background-color: var(--other-green);color: var(--bs-primary);padding: 10px 20px;border-radius: 5px;font-size: 16px;display: none; z-index: 1000;max-width: 400px;width: 90%;}
.hint-alert.show {display: block;}
.hint-alert.hide {display: none;}

#employeeList th > * {float: right;right: 1rem;}
#employeeList td {font-size: 14px;}

#footer {position: relative;}
#footer h2 {font-size: 1rem; display: flex;   justify-content: space-between;   gap: 1rem;   line-height: 3; margin:auto 0;}

.references figure {position: absolute;right: 2rem;float: right;bottom: 0;z-index:999;}
#footer .references img {width: 100%;max-width: 100px;}