/* Normalize */
html { line-height: 1.15;-webkit-text-size-adjust: 100%;}
body { margin: 0; }
main { display: block; }
h1 { font-size: 2em;margin: 0.67em 0; }
hr { box-sizing: content-box;height: 0;overflow: visible; }
pre { font-family: monospace, monospace;font-size: 1em; }
a { background-color: transparent; }
abbr[title] { border-bottom: none;text-decoration: underline;text-decoration: underline dotted; }
b, strong { font-weight: bolder; }
code, kbd, samp { font-family: monospace, monospace;font-size: 1em;}
small { font-size: 80%; }
sub, sup { font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;}
sub { bottom: -0.25em; }
sup { top: -0.5em; }
img {  border-style: none; }
button, input, optgroup, select, textarea { font-family: inherit;font-size: 100%;line-height: 1.15;margin: 0; }
button, input { overflow: visible; }
button, select { text-transform: none; }
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none;padding: 0; }
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }
fieldset { padding: 0.35em 0.75em 0.625em; }
legend { box-sizing: border-box;color: inherit;display: table;max-width: 100%;padding: 0;white-space: normal; }
progress { vertical-align: baseline; }
textarea { overflow: auto; }
[type="checkbox"], [type="radio"] { box-sizing: border-box;padding: 0; }
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }
[type="search"] { -webkit-appearance: textfield;outline-offset: -2px; }
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button;font: inherit; }
details { display: block; }
summary { display: list-item; }
template { display: none; }
[hidden] { display: none; }

/* End of Normalize */

body {
  font-size: 15px;
  color: #333;
  background: #f8f8f8;
  font-family: Helvetica, Arial, sans-serif;
  padding:30px;
  min-width: 300px;
}

a {color:#6f00ff;text-decoration: none}
a.link-btn {font-weight:500;letter-spacing: 1px;border: 2px solid #6f00ff;padding:12px 25px;font-size:14px;text-align:center;border-radius:15px}
button {
  background: #6f00ff;background: linear-gradient(90deg, rgba(111,0,255,1) 0%, rgba(136,6,206,1) 100%);
  color:#fff;border:none;padding:12px 20px;border-radius:5px;
  font-size:14px;letter-spacing: 2px;
}
a.gradient-button {
  background: #6f00ff;background: linear-gradient(90deg, rgba(111,0,255,1) 0%, rgba(136,6,206,1) 100%);
  color:#fff;border:none;padding:12px 20px;border-radius:5px;
  font-size:14px;letter-spacing: 2px;
}
a.pagelink {margin:3px 3px;min-width:35px;border:1px solid #6f00ff;border-radius:3px;text-align:center}
span.pagelink {margin:3px 3px;min-width:35px;font-weight:700;text-align:center}
span.pagedot {margin:3px 3px;min-width:30px;color:#555}

input, textarea, select {
  padding: 12px 15px;border:1px solid #fff;border-radius:3px;font-size: 16px;color:#555;
  max-width: 100%;
  font-family: Arial,-apple-system-font,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",sans-serif;
}
input:focus, textarea:focus {
  outline: none; border: 1px solid #6f00ff; background: #fff;
}
select {
  padding: 10px 5px;border:1px solid #ccc;border-radius:3px;font-size: 16px;color:#555;
  background: #fff; box-shadow: none;
  max-width: 100%;
}
input::placeholder {opacity:0.5}

table {position:relative}
table, th, td {
  border: 1px solid #ddd;
  border-collapse: collapse;
  height:20px;max-height:20px;min-height:20px;
}
td {padding:6px 8px;background:#fff;}
table td.fixed-cell {
  /* position:absolute;width:100px; */
}

.text-center {text-align:center}
.flex {display: flex} .flex-grow {flex-grow:1} .justify-center {justify-content: center}
.py-10 {padding-top:10px;padding-bottom:10px} .py-20 {padding-top:20px;padding-bottom:20px}
.mt-10 {margin-top:10px}

.xl-font {font-size:50px;font-weight:600}
.tiny-font {font-size:12px}

.standart-page-pageout {max-width:700px;margin:auto}
.lg-page-pageout {max-width:1400px;margin:auto}
.sm-page-pageout {max-width:550px;margin:auto}
.match-form-width-layout {max-width:475px;margin:auto;}
.page-title {text-align: center;font-weight:400;font-size:18px;color:#323232}
.log-card {background: #fff;border-radius:15px;margin-bottom:12px;padding:15px 5px;box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;}
.primary-color-card {min-width:40%;margin:5px 10px;background:#6f00ff;color:#fff;padding:20px;border-radius:10px;box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;}
.white-card {min-width:16.5%;margin:5px 1%;background:#fff;padding:20px;border-radius:10px;box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;}

.stats-card {min-width:40%;flex-grow:1;background: #fff;border-radius:10px;padding:20px;margin:3px 1.5%;box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;}
.stats-card .card-title {font-size:14px;font-weight:300}
.stats-card .big-num .xl-font {display: inline-block;}
.stats-card .big-num .unit {display: inline-block;margin-left:5px;color:#555}
.stats-card .department-info-list {margin-top:5px;display: flex;position:relative}
.stats-card .department-info-list .department-data {background:#f3f9fe;padding:10px}
.stats-card .department-info-list .department-data .dname {font-size:13px}
.stats-card .department-info-list .department-data .dname b {color:#0088dc}

.short-form {max-width:475px;margin:auto;background: #fff;padding:20px;border-radius:20px;box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;}
.short-form form {display: flex;flex-direction: column;}
.short-form form .flex {margin-top:10px;}
.short-form form input {background:#f9f4ff;flex-grow:1;border:none;border-radius:0 5px 5px 0}
.short-form form #form-err {color:red;font-size:13px}
.short-form form button {margin-top:20px}


.admin-ctrl-raw-1 {padding:10px 0}
.admin-ctrl-raw-1 .flex-partial {display: flex;width:50%;justify-content: center;}
.admin-ctrl-raw-1 .bordered-card {height:24px;border:2px solid #6f00ff;width:48%;margin:5px 1%;background:#fff;padding:20px;text-align:center;border-radius:10px;box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;}
.admin-ctrl-raw-1 .primary-color-card {height:30px;flex-grow:1;margin:1%;text-align:center;padding:20px;}
.admin-ctrl-raw-1 .white-card {height:30px;width:20%;background:#eee;text-align:center;margin:1%;color:#555;padding:20px;}

@media screen and (max-width: 600px) {
  .flex {flex-wrap:wrap;}
  .admin-ctrl-raw-1 .flex-partial {width:100%}
}

.table-liked-form .sm-label {min-width:80px}
.table-liked-form .md-label {min-width:150px}
.table-liked-form .one-third-width {min-width:33%;width:33%;max-width:33%}
.table-liked-form input {border-radius:0;padding:8px 12px;}
.table-liked-form input::placeholder {color:#aaa;font-size:13px}

.file-upload-container {position:relative}
.file-upload-container .drag-n-drop-box {position: relative;background:#fff;border:2px dotted #6f00ff;border-radius: 10px;width:100%;min-height:40px;text-align: center;padding:30px 10px;font-size:15px;font-weight:500;color:#6f00ff;}
.file-upload-container .drag-n-drop-box .uploadfileinput {position: absolute;left:0;top:0;width:100%;bottom:0;opacity:0;cursor:pointer;}
.file-upload-container .drag-n-drop-box #newfileul {position: absolute;left:0;top:0;width:100%;bottom:0;opacity:0;cursor:pointer;}
.file-upload-container .drag-n-drop-box p.expl {font-size:13px;font-weight:300;color:#777;margin-top:10px}
.file-to-be-uploaded {padding: 40px 40px;background:#fff;border-radius:20px;color:#6f00ff;box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 8px;}
.file-to-be-uploaded .fname{color:#333;font-weight:500;font-size:16px;color:#555}
.file-to-be-uploaded button {padding:15px 25px;font-size:13px;font-weight:400;border-radius:3px;margin-right:10px}


.modal {position: absolute;display: none;}
.modal.active {position: fixed;display:block;z-index:999;left:0;right:0;top:0;bottom:0;background:rgba(255,255,255,0.9)}
.modal .m-outline {position:relative;top:20vh;width:80%;max-width:500px;margin:auto;padding:25px;background: #fff;border-radius: 10px;box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
.modal .cancel-button {position: absolute; top:10px; right:15px}
.modal .cancel-button  button {padding: 0;background: transparent;cursor:pointer;}
.modal .cancel-button img {width:20px}