/* =============================================================
   STYLE.CSS — base reset, form primitives, components
   NO hardcoded colors — all colors via CSS custom properties
   Login styles absorbed (login.css is now an empty stub)
   ============================================================= */

/* --- Box sizing reset --- */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 10px; width: 100%; height: 100%;}

body {
  height: 100%; width: 100%;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  overflow: hidden;
  font-size: 1.3rem;
  background-color: #999999;
  background-image: url(../images/lightbg.jpg);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: cover;
  color: var(--color-text);
}

body, html, div, p, span, ul, li, ol, a, img, iframe, i,
h1, h2, h3, h4, h5, h6 {
  margin: 0; padding: 0; outline: 0; border: 0;
  text-decoration: none; list-style-type: none;
}

a { color: var(--color-text); transition: color 0.4s ease; }
a:hover { color: var(--color-accent); }
a img { border: 0; }
em { color: #FF0000; }

/* --- Headings --- */
h1, h2, h3, h4, h5, h6 { float: left; width: 100%; font-weight: 300; }
h1 { font-size: 2.6rem; }
h2 { font-size: 2.4rem; }
h3 { font-size: 2.2rem; }
h4 { font-size: 2.0rem; }
h5 { font-size: 1.8rem; }
h6 { font-size: 1.6rem; }
p  { float: left; width: 100%; margin: 0 0 15px; line-height: 1.6rem; }

/* --- Utility sizes --- */
.txt-1 { font-size: 2.4rem; }
.txt-2 { font-size: 2.0rem; }
.txt-3 { font-size: 1.5rem; }
.txt-4 { font-size: 1.5rem; }
.txt-5 { font-size: 1.3rem; }
.txt-6 { font-size: 1.1rem; }

.w-3  { width: 30px !important; }
.w-4  { width: 40px !important; }
.w-5  { width: 50px !important; }
.w-6  { width: 60px !important; }
.w-7  { width: 70px !important; }
.w-8  { width: 80px !important; }
.w-9  { width: 90px !important; }
.w-10 { width: 100px !important; }
.w-11 { width: 110px !important; }
.w-12 { width: 120px !important; }
.w-13 { width: 130px !important; }
.w-14 { width: 140px !important; }
.w-15 { width: 150px !important; }
.w-16 { width: 160px !important; }
.w-17 { width: 170px !important; }
.fs    { font-size: 1.1rem !important; }

/* --- Form elements base --- */
input, textarea, select, form, label, button, i.chk, i.rdo {
  margin: 0; padding: 0; outline: none;
  font-size: 1.3rem; font-weight: 400;
  font-family: 'Roboto', sans-serif;
}

input[type=text],
input[type=password],
input[type=number],
textarea {
  float: left; width: 100%; padding: 10px;
  border-width: 1px; border-style: solid;
  border-color: var(--color-border-input);
  resize: none;
  transition: all 0.3s ease;
  appearance: none;
  background-color: var(--color-input-bg);
  color: var(--color-text-input);
}

textarea { height: 100px; overflow: auto; overflow-y: auto; scrollbar-width: thin; }

input[xtype=date],
input[xtype=time],
input[xtype=datetime] {
  background-repeat: no-repeat;
  background-position: calc(100% - 21px) center;
  background-size: 15px;
  min-width: 110px;
  padding-right: 32px;
}
body.compact input[xtype=date],
body.compact input[xtype=time],
body.compact input[xtype=datetime] { background-position: calc(100% - 10px) center; }
input[xtype=date]     { background-image: url(../images/ico-date.png); }
input[xtype=time]     { background-image: url(../images/ico-time.png); }
input[xtype=datetime] { background-image: url(../images/ico-date-time.png); background-size: 18px; }

label {
  float: left; width: 100%; min-height: 20px;
  font-weight: 500; text-transform: uppercase;
  color: var(--color-text);
}

/* --- Select --- */
select {
  appearance: none;
  height: 38px;
  padding: 0 30px 0 10px;
  font-size: 1.3rem; font-weight: 400;
  font-family: 'Roboto', sans-serif;
  width: 100%; cursor: pointer; outline: none; border-radius: unset;
  background-color: var(--color-input-bg);
  color: var(--color-text-input);
  border: 1px solid var(--color-border-input);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 6px;
}
option { border: 0; font-size: 1.3rem; font-family: 'Roboto', sans-serif; }
option:checked { background-color: var(--color-accent) !important; color: #ffffff; }

/* Per-theme select overrides */
body.dark          select { background-color: #4d4d4d; border-color: transparent; color: #cccccc; }
body.moderate      select { background-color: #f5f5f5; border-color: #cccccc; color: #222222; }
body.light         select { background-color: #fff; border-color: #eaeaea; color: #222222; }
body.dark-classic  select { background-color: rgba(0,0,0,0.3); border-color: transparent; color: #cccccc; }
body.light-classic select { background-color: rgba(255,255,255,0.6); border-color: #cccccc; color: #222222; }

/* --- Placeholder --- */
::placeholder { color: var(--color-text-placeholder); }

/* --- Error states --- */
p.e {
  margin: 1px 0; padding: 0;
  font-size: 1.1rem; line-height: 1.2rem;
  color: var(--color-accent); font-weight: normal;
}
.err input[type=text],
.err input[type=password],
.err input[type=number],
.err textarea,
.err .mx-list,
.err select { border: 1px solid var(--color-accent) !important; }

/* --- Autofill --- */
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--color-input-bg, #ffffff) inset !important;
  box-shadow: 0 0 0 1000px var(--color-input-bg, #ffffff) inset !important;
  -webkit-text-fill-color: var(--color-text-muted, #646464);
}
input[type=text]:focus,
input[type=password]:focus,
input[type=number]:focus {
  box-shadow: 0 0 3px var(--color-border-input, #f3f3f3);
}

/* --- Buttons --- */
.btn {
  display: inline-block; height: 28px; min-width: auto;
  line-height: 28px; padding: 0 8px; border: 0;
  cursor: pointer; text-transform: uppercase;
  transition: all ease-in-out 0.3s; vertical-align: top; text-align: center;
  background-color: var(--color-btn);
  color: var(--color-btn-text);
}

body.normal .btn-large{ height: 38px; padding: 0 16px;}

.btn i, .btn.fa { font-size: 1.4rem; }
.btn::before    { font-family: 'FontAwesome'; }
.btn.ico        { min-width: 1px; height: auto; font-size: 22px; line-height: 1; background-color: transparent; }
.btn.ico:hover  { background-color: transparent !important; }
.btn.b, .btn.l.b { padding: 12px; }
.btn.l          { background-color: var(--color-btn-light); }
.btn:hover, .btn.l:hover {
  background: var(--color-accent) !important;
  background: linear-gradient(104deg, var(--color-accent) 0%, var(--color-accent-2) 100%) !important;
  color: var(--color-btn-text);
}
.tbl-list .btn.ico,
ul.dragsort-list .btn.ico { color: #444444; }
.tbl-list .btn.ico:not(:last-child) { margin-right: 5px; }
.tbl-list .btn.ico:hover,
.tbl-list .btn.ico.active { color: var(--color-accent) !important; }

/* .btn-large { height: 36px; line-height: 36px; padding: 0 20px; } */

/* --- Add/Del icon buttons --- */
a.del, a.add {
  display: inline-block; width: 25px; height: 25px;
  position: relative; vertical-align: middle;
  background-color: var(--color-btn);
}
a.del::before, a.del::after,
a.add::before, a.add::after {
  content: ""; position: absolute;
  left: 50%; top: 50%;
  transition: all ease-in-out 0.3s;
  background-color: #ffffff;
}
a.del::before, a.del::after { width: 1px; height: 15px; margin-left: -0.5px; margin-top: -7.5px; }
a.del::before { transform: rotate(45deg); }
a.del::after  { transform: rotate(-45deg); }
a.del:hover::before { transform: rotate(-45deg); }
a.del:hover::after  { transform: rotate(45deg); }
a.del:hover, a.add:hover {
  background: var(--color-accent) !important;
  background: linear-gradient(104deg, var(--color-accent) 0%, var(--color-accent-2) 100%) !important;
}
a.del.rl, a.del.rs {
  border-radius: 100%; position: absolute;
  background: var(--color-accent);
}
a.del.rl { right: -12px !important; top: -13px !important; }
a.del.rs { width: 15px; height: 15px; right: -7px; top: -7px; }
a.del.rs::before, a.del.rs::after { height: 9px; margin-left: -0.5px; margin-top: -4.5px; }
a.add::after  { width: 1px; height: 15px; margin-top: -7.5px; margin-left: -1px; }
a.add::before { width: 15px; height: 1px; margin-top: -1px; margin-left: -7.5px; }
a.add:hover::after, a.add:hover::before { transform: rotate(180deg); }

/* --- Scrollbar base --- */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner { background: var(--color-scrollbar-track); }
::-webkit-scrollbar-thumb  { background: var(--color-scrollbar-thumb); padding: 0; }

/* Firefox scrollbars */
textarea,
div.mxdialog,
div.mxdialog div.content,
div.wrap-left,
.wrap-data,
div.wrap-right form {
  scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
}

/* --- Fieldset --- */
fieldset { float: left; width: calc(100% - 20px); margin-left: 10px; padding: 10px; border: 1px solid #7a7a7a; }
fieldset legend    { font-size: 1.8rem; }
fieldset legend h3 { font-size: 100%; }

/* --- Progress / Loader --- */
div#mxloader {
  display: flex; position: fixed;
  width: 100%; height: 100%; overflow: auto; overflow-y: auto; scrollbar-width: thin;
  left: 0; top: 0;
  justify-content: center; align-items: center;
  z-index: 10020;
  background-color: rgba(255,255,255,0.85);
}
body.dark div#mxloader,
body.light div#mxloader,
body.moderate div#mxloader { background-color: rgba(0,0,0,0.5); }

div#mxmsg {
  display: none; min-height: 30px; min-width: 100%; padding: 10px;
  text-align: center; font-size: 2.0rem;
  background-color: #222222; color: var(--color-accent);
}

div.progress {
  display: block; width: 100%; height: 1px; margin: 0; padding: 0;
  position: absolute; top: 50%;
  background: var(--color-accent);
}
div.progress span { float: left; height: 1px; width: 0%; background-color: var(--color-accent); }

.spinner div {
  position: absolute; width: 100px; height: 100px;
  background-size: cover; background-repeat: no-repeat;
  font-size: 1.8rem; line-height: 1.8rem;
  text-align: right; vertical-align: top; padding: 3px;
  background-color: rgba(0,0,0,0.9);
  box-shadow: inset 0 0 20px rgba(220,0,0,0.4);
  color: var(--color-accent);
}
.spinner .f1 { transform: translateZ(50px); }
.spinner .f2 { transform: rotateY(90deg) translateZ(50px); }
.spinner .f3 { transform: rotateY(90deg) rotateX(90deg) translateZ(50px); }
.spinner .f4 { transform: rotateY(180deg) rotateZ(90deg) translateZ(50px); }
.spinner .f5 { transform: rotateY(-90deg) rotateZ(90deg) translateZ(50px); }
.spinner .f6 { transform: rotateX(-90deg) translateZ(50px); }
.spinner {
  animation: spincube 8s ease-in-out infinite;
  transform-style: preserve-3d;
  transform-origin: 50px 50px 0;
  position: absolute; left: 50%; top: 50%;
  margin-top: -150px; margin-left: -50px;
}
@keyframes spincube {
  16% { transform: rotateY(-90deg); }
  33% { transform: rotateY(-90deg) rotateZ(90deg); }
  50% { transform: rotateY(180deg) rotateZ(90deg); }
  66% { transform: rotateY(90deg) rotateX(90deg); }
  83% { transform: rotateX(90deg); }
}

/* --- mxDialog z-index ladder ---
   mxpopup  (no extra class)  → 10011  base
   mxconfirm (.confirm-popup) → 10013  above popup
   mxalert  (.alert-popup)    → 10015  above confirm
   mxloader (#mxloader)       → 10020  always topmost
*/
div.mxdialog {
  display: none; position: fixed;
  width: 100%; height: 100%; overflow: auto; overflow-y: auto; scrollbar-width: thin;
  left: 0; top: 0;
  display: flex; justify-content: center; align-items: center;
  z-index: 10011;
  background-color: var(--color-overlay);
}
div.mxdialog.confirm-popup { z-index: 10013; }
div.mxdialog.alert-popup   { z-index: 10015; }
div.mxdialog div.body {
  display: flex; flex-flow: row wrap;
  justify-content: flex-start; align-items: flex-start;
  max-height: 90%; padding: 0; position: relative;
  min-width: 300px; max-width: 60%;
  background-color: var(--color-dialog-body);
}
div.mxdialog div.content {
  float: left; width: 100%; margin: 0; padding: 16px;
  max-height: 75vh; overflow: auto; overflow-y: auto; scrollbar-width: thin;
  font-size: 1.4rem; line-height: 1.8rem;
  color: var(--color-text);
}
div.mxdialog div.mx-btn { float: left; width: 100%; text-align: center; padding-top: 16px; }
div.mxdialog .btn       { margin: 0 2px; }
div.mxdialog h2 {
  margin: 0; padding: 8px;
  font-size: 1.6rem; font-weight: 500; text-transform: uppercase;
  background-color: var(--color-dialog-header);
  color: var(--color-accent);
}
div.mxdialog ul           { display: flex; flex-flow: row wrap; }
div.mxdialog ul li.cta    { text-align: center; }
div.mxdialog ul li        { width: calc(100% - 5px); margin-bottom: 10px; }
div.mxdialog ul li.c2     { width: calc(50% - 5px); }
div.mxdialog ul li.c3     { width: calc(33.3333% - 5px); }
div.mxdialog ul li.c4     { width: calc(25% - 5px); }
div.mxdialog ul li.c2,
div.mxdialog ul li.c3,
div.mxdialog ul li.c4     { margin-right: 5px; }
div.mxdialog.mx-file-browser div.body { max-width: 90%; padding: 10px; }
div.mxdialog form.wrap-data { overflow: auto; }
div.mxdialog a.del        { right: 5px; top: 5px; position: absolute; }

/* --- jQuery UI base --- */
body .ui-widget-content { max-height: 192px; overflow-y: auto; overflow-x: hidden; }
body .ui-widget-content.ui-datepicker { max-height: unset; }
.ui-datepicker.ui-datepicker-multi { z-index: 10012 !important; }
.ui-autocomplete { z-index: 10010 !important; }
.ui-datepicker-multi .ui-datepicker-group { vertical-align: top; }
.ui-datepicker-multi .ui-datepicker-header { min-height: auto; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; } /* SHAHID: Change min-height: 100px; */
body .ui-datepicker .ui-datepicker-title{ display: flex; justify-content: center; align-items: center; gap: 5px; } /* SHAHID: Added New Styling */
body .ui-widget-content { padding-top: 9px; } /* SHAHID: Added New Styling */

body .ui-state-active,
body .ui-widget-content .ui-state-active,
body .ui-widget-header .ui-state-active,
body a.ui-button:active,
body .ui-button:active,
body .ui-button.ui-state-active:hover {
  background-color: #f6f6f6;
  border: 1px solid var(--color-accent) !important;
  color: var(--color-accent);
}
body .ui-state-highlight,
body .ui-widget-content .ui-state-highlight,
body .ui-widget-header .ui-state-highlight {
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: #ffffff;
}
body .ui-state-highlight.ui-state-active,
body .ui-widget-content .ui-state-highlight.ui-state-active { background-color: #f6f6f6 !important; }

.ui-widget-content .ui-state-default,
.ui-widget-header,
.ui-datepicker th,
.ui-datepicker .ui-datepicker-title select { border-color: transparent !important; height: 24px !important; padding: 2px 4px !important; font-size: 12px !important; }
.ui-widget-content .ui-state-default.ui-slider-handle { background: #777777 !important; }

/* --- File upload --- */
div.mx-file-upload {
  float: left; min-width: 100px; width: 100%; padding: 4px;
  background-color: var(--color-fileupload-bg, var(--color-mx-list-bg));
  border: 1px solid var(--color-border);
}
div.mx-file-upload div.drop {
  float: right; width: 60px; height: 60px;
  text-align: center; vertical-align: middle;
  transition: all ease-in-out 0.3s;
  background-color: var(--color-btn);
  color: var(--color-btn-text);
}
div.mx-file-upload div.drop a {
  float: left; width: 100%; height: 100%; color: transparent;
  line-height: 14px; padding: 4px; cursor: pointer;
  background-image: url(../images/ico-upload-file.png);
  background-repeat: no-repeat; background-size: 26px; background-position: center;
  transition: all 0.1s ease;
}
div.mx-file-upload div.drop:hover,
div.mx-file-upload div.drop a:hover { background-color: var(--color-accent) !important; }
div.mx-file-upload div.drop input { display: none; }
div.mx-file-upload ul { float: left; height: 100%; width: calc(100% - 64px); }
div.mx-file-upload ul li {
  float: left; width: 60px; height: 60px; margin: 0 6px 8px 0; padding: 0;
  position: relative; border: 1px solid var(--color-border);
}
div.mx-file-upload ul li:last-child { margin-bottom: 0; }
div.mx-file-upload ul li a {
  float: left; width: 100%; height: 58px; overflow: hidden;
  text-align: center;
  display: flex; justify-content: center; align-items: center;
  background-repeat: no-repeat; background-position: center;
  background-image: url(../images/ico-default.png); background-size: 65%;
}
div.mx-file-upload ul li a[ext="xlsx"] { background-image: url(../images/ico-excel.png); }
div.mx-file-upload ul li a[ext="docx"] { background-image: url(../images/ico-doc.png); }
div.mx-file-upload ul li a[ext="pdf"]  { background-image: url(../images/ico-pdf.png); }
div.mx-file-upload ul li a[ext="pptx"] { background-image: url(../images/ico-ppt.png); }
div.mx-file-upload ul li a[ext="csv"]  { background-image: url(../images/ico-csv.png); }
div.mx-file-upload ul li a[ext="zip"]  { background-image: url(../images/ico-zip.png); }
div.mx-file-upload ul li a[ext="rar"]  { background-image: url(../images/ico-rar.png); }
div.mx-file-upload ul li a[ext="xlsx"] img,
div.mx-file-upload ul li a[ext="docx"] img,
div.mx-file-upload ul li a[ext="pdf"]  img,
div.mx-file-upload ul li a[ext="pptx"] img,
div.mx-file-upload ul li a[ext="csv"]  img,
div.mx-file-upload ul li a[ext="zip"]  img,
div.mx-file-upload ul li a[ext="rar"]  img { display: none; }
div.mx-file-upload ul li a[ext="jpg"],
div.mx-file-upload ul li a[ext="jpeg"],
div.mx-file-upload ul li a[ext="png"]  { background-image: none; padding: 3px; }
div.mx-file-upload ul li img {
  max-width: 100%; max-height: 100%;
  background-color: var(--color-input-bg);
}
div.mx-file-upload ul li a.no-img {
  height: 100%; background-image: url(../images/no-file.png);
  background-size: cover; line-height: 200px; overflow: hidden;
}
div.mx-file-upload ul li:hover a.del { display: block; }
div.mx-file-upload ul li a.del { background-image: none; }
table td div.mx-file-upload ul li        { width: 40px; height: 40px; }
table td div.mx-file-upload ul li a      { width: 100%; height: 38px; }
table td div.mx-file-upload div.drop     { width: 40px; height: 40px; }
table td div.mx-file-upload div.drop a  { background-size: 20px; }

/* --- Custom radio + checkbox --- */
i.rdo, i.chk {
  display: inline-block; width: auto; vertical-align: top;
  min-width: 14px; min-height: 14px; position: relative;
  margin-bottom: 0; font-style: normal; z-index: 1;
  cursor: pointer; user-select: none;
  text-transform: none !important; line-height: 1.4rem;
}
i.rdo input, i.chk input {
  position: absolute; opacity: 0; cursor: pointer;
  height: 100%; width: 100%; top: 0; left: 0; z-index: 2;
}
i.rdo em, i.chk em {
  position: absolute; top: -1px; left: 0;
  height: 14px; width: 14px; z-index: 0; font-style: normal;
  background-color: var(--color-input-bg);
  border: 1px solid var(--color-grp-border, #aaaaaa);
}
i.rdo em::after, i.chk em::after { content: ""; position: absolute; display: none; }
i.rdo input:checked ~ em::after,
i.chk input:checked ~ em::after { display: block; }
i.rdo em::after, i.chk em::after {
  left: 4px; top: 1px; width: 4px; height: 8px;
  border-width: 0 2px 2px 0; border-style: solid;
  border-color: var(--color-checkbox-mark, #ffffff);
  transform: rotate(45deg);
}
i.rdo input[type=radio] ~ em { border-radius: 100%; }
i.rdo input[type=radio] ~ em::after {
  top: 3px; left: 3px; width: 6px; height: 6px;
  border-radius: 50%;
  background-color: var(--color-checkbox-mark, #ffffff);
  border: none;
}
/* Cancel browser UA opacity on disabled form elements — visual state uses color/bg not opacity */
input:disabled,
select:disabled,
textarea:disabled { opacity: 1 !important; }
i.rdo input[type=radio]:disabled ~ em,
i.chk input[type=checkbox]:disabled ~ em,
i.rdo:hover input[type=radio]:disabled ~ em,
i.chk:hover input[type=checkbox]:disabled ~ em { background-color: #999999; }
i.rdo input:checked ~ em,
i.chk input:checked ~ em {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}
i.chk input:checked ~ em::after { border-color: #ffffff; }
.mx-list i.rdo, i.chk { padding-left: 17px; }

/* --- CKEditor base wrappers --- */
.cke_reset  { float: left; min-width: 260px; width: 100% !important; scrollbar-width: thin; }
.cke_inner  { background: transparent !important; scrollbar-width: thin; }
.cke_chrome,
.cke_top    { border: 0 !important; scrollbar-width: thin; }
.cke_bottom { border-top: 0 !important; }
body .cke_combo_text { width: 40px; }

/* --- Disable state --- */
.disable { cursor: not-allowed !important; opacity: 0.60; }

/* --- Status indicator dot --- */
.mxcon            { width: 10px; height: 10px; float: right; margin-top: 21px; margin-right: 10px; }
.mxcon.live_      { border: 1px solid green; opacity: 0.7; }
.mxcon.dev_,
.mxcon.demo_      { opacity: 0.5; border: 1px solid var(--color-accent); }

/* --- Checkbox list search --- */
.chkall-serach {
  float: right; display: inline-flex; align-items: center;
  justify-content: flex-end; margin-bottom: 10px;
  opacity: 0; width: 1px; height: 30px; visibility: hidden;
  transition: all ease-in-out 0.6s; overflow: hidden;
  position: absolute; right: 12px; top: -7px;
  padding: 0 5px; z-index: 2;
  background-color: rgba(102,102,102,0.6);
}
.chkall-serach i.chk        { margin-left: 15px; }
.chkall-serach input[type=text] { padding: 5px 10px; width: 200px; }
body.dark .chkall-serach    { background-color: rgba(255,255,255,0.1); }

/* --- Misc utility --- */
a.fa-close::before, a.del-row::before { font-family: 'FontAwesome'; }
a.add[href$="/outstanding-add/"]      { display: none !important; }

/* =====================================================================
   LOGIN STYLES (absorbed from login.css — that file is now an empty stub)
   ===================================================================== */
.login-container {
  display: flex; justify-content: center; align-items: center;
  width: 100%; height: calc(100vh + 4px);
}
.login-box {
  display: flex; width: 600px; flex-flow: row wrap;
  align-items: stretch; justify-content: center;
  box-shadow: 0 0 90px rgba(0,0,0,0.05);
}
.login-box img { max-width: 100%; }
.login-box .welcome {
  display: flex; align-items: center; justify-content: center;
  width: 40%; padding: 20px 40px; background: #ffffff;
}
.login-box .login-wrap {
  display: flex; align-items: center; justify-content: center;
  width: 60%; padding: 40px; background: rgba(255,255,255,0.5);
}
.login-box form          { float: left; width: 100%; margin: 0; padding: 0; position: relative; }
.login-box ul            { float: left; width: 100%; margin: 0; padding: 0; list-style-type: none; }
.login-box li            { float: left; width: 100%; margin: 0 0 15px; padding: 0; }
.login-box li:last-child { margin-bottom: 0; }
.login-box li label      { display: none; }

/* Password show/hide */
li[title="Login Password"] { position: relative; }
#userPass   { width: 100%; padding-right: 40px; }
#showPass   { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); font-size: 18px; cursor: pointer; }
#showPass:hover { color: #000; }

/* Login theme overrides */
body.moderate .login-box .welcome   { background: #444444; }
body.dark .login-box .login-wrap    { background: rgba(255,255,255,0.1); }
body.dark .login-box .welcome       { background: rgba(255,255,255,0.15); }

body.normal .login-container {
  background: rgb(231,61,117) !important;
  background: linear-gradient(0deg, rgba(231,61,117,0.85) 0%, rgba(252,107,110,0.85) 100%) !important;
}
body.normal .login-box .login-wrap  { background: #fafafa; }
body.normal .login-box input[type="text"],
body.normal .login-box input[type="password"],
body.normal .login-box input[type="number"] {
  background-color: #f2f2f2 !important; border-color: #eaeaea !important;
  height: 50px; color: #111111;
}
body.normal .login-box input[type="submit"] {
  height: 50px;
  background: linear-gradient(104deg, var(--color-accent) 0%, var(--color-accent-2) 100%) !important;
  width: 100%; color: #ffffff;
}
body.normal .login-box input:-webkit-autofill {
  background-color: #f2f2f2 !important; border-color: #eaeaea !important;
  -webkit-box-shadow: 0 0 0 1000px #f2f2f2 inset !important;
  box-shadow: 0 0 0 1000px #f2f2f2 inset !important;
  -webkit-text-fill-color: #5a5a5a;
}
body.dark .login-box         { background-color: #3a3a3a; }
body.dark .login-box .login-wrap { background: #444444; }
body.dark input[type="text"],
body.dark input[type="password"],
body.dark input[type="number"] {
  background-color: #4d4d4d !important; border-color: #3e3e3e !important; color: #eeeeee;
}
body.dark input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #3e3e3e inset !important;
  box-shadow: 0 0 0 1000px #3e3e3e inset !important;
  -webkit-text-fill-color: #aaaaaa; border-color: #4d4d4d !important;
}
body.dark .login-box .welcome { background-color: #4d4d4d; }

@media screen and (max-width: 767px) {
  .login-container { height: calc(100vh - 56px); }
  .login-box       { flex-flow: column wrap; width: 320px; }
  .login-box .login-wrap,
  .login-box .welcome { width: 100%; }
  .login-box img   { max-width: 120px; }
  .login-box .welcome  { padding: 10px; }
  .login-box .login-wrap { padding: 20px; }
  body.normal input[type="text"],
  body.normal input[type="password"],
  body.normal input[type="number"],
  body.normal .login-box input[type="submit"] { height: 40px; }
}