:root {
  --as-ink: #101828;
  --as-muted: #5b6475;
  --as-line: #e6eaf0;
  --as-blue: #139fe3;
  --as-blue-dark: #0b72b5;
  --as-navy: #111a2e;
  --as-navy-2: #182844;
  --as-soft: #f5f8fb;
  --as-white: #ffffff;
}

html,
body {
  background: var(--as-soft);
  color: var(--as-ink);
  font-family: "Nunito Sans", "Nunito", Arial, sans-serif;
}

a {
  color: var(--as-blue-dark);
}

a:hover {
  color: var(--as-blue);
}

#container {
  width: min(1120px, calc(100% - 32px));
  margin: 24px auto;
  border: 1px solid var(--as-line);
  border-radius: 8px;
  background: var(--as-white);
  box-shadow: 0 18px 44px rgba(16, 24, 40, 0.08);
  overflow: hidden;
}

#header {
  min-height: 76px;
  padding: 0 26px;
  border: 0;
  background:
    linear-gradient(135deg, rgba(17, 26, 46, 0.98), rgba(24, 40, 68, 0.98)),
    var(--as-navy);
  color: var(--as-white);
}

#header #logo,
#header a#logo {
  position: relative;
  width: 260px;
  height: 76px;
  display: block;
  background: transparent;
}

#header #logo img {
  display: none !important;
}

#header #logo::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: url("../images/artsystem-logo.png") center / contain no-repeat;
}

#header #logo::after {
  content: "ARTSYSTEM Support";
  position: absolute;
  left: 62px;
  top: 22px;
  color: var(--as-white);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
}

#header .pull-right,
#header #info {
  color: rgba(255, 255, 255, 0.82);
  padding-top: 18px;
}

#header .pull-right a,
#header #info a {
  color: var(--as-white);
  font-weight: 700;
}

#nav {
  margin: 0;
  padding: 0 24px;
  border: 0;
  background: #172842;
}

#nav li a,
#nav li a:hover {
  color: rgba(255, 255, 255, 0.94) !important;
  border: 0;
  background: transparent !important;
  font-weight: 700;
  text-shadow: none !important;
}

#nav li.inactive a,
#nav li.inactive a:visited {
  color: rgba(255, 255, 255, 0.92) !important;
}

#nav li.inactive a:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  color: var(--as-white) !important;
}

#nav li a.active,
#nav li.active a,
#nav li a:hover {
  background: var(--as-blue) !important;
  color: var(--as-white) !important;
}

#nav li.active a,
#nav li.active a:hover,
#nav li a.active {
  color: var(--as-white) !important;
  font-weight: 800;
}

#sub_nav {
  background: #eef8fe;
  border-bottom: 1px solid var(--as-line);
}

#content {
  padding: 28px;
}

#content h1,
#content h2,
#content h3,
h1,
h2,
h3 {
  color: var(--as-navy);
  letter-spacing: 0;
}

.button,
.action-button,
.green.button,
input[type="submit"],
input[type="button"],
button,
a.button {
  border: 0 !important;
  border-radius: 6px !important;
  background: var(--as-blue) !important;
  color: var(--as-white) !important;
  font-weight: 800;
  text-shadow: none !important;
  box-shadow: none !important;
}

.button:hover,
.action-button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
button:hover,
a.button:hover {
  background: var(--as-blue-dark) !important;
  color: var(--as-white) !important;
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  border: 1px solid var(--as-line) !important;
  border-radius: 6px;
  box-shadow: none !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--as-blue) !important;
  outline: 2px solid rgba(19, 159, 227, 0.18);
  outline-offset: 0;
}

#landing_page,
.main-content,
.thread-entry,
.ticket_info,
.flush-left.customQ,
#content .dialog {
  border-color: var(--as-line) !important;
  border-radius: 8px;
}

#new_ticket,
#check_status,
.featured-category {
  border-color: var(--as-line) !important;
  border-radius: 8px;
  background: var(--as-white);
}

#new_ticket:hover,
#check_status:hover {
  border-color: var(--as-blue) !important;
}

#footer {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto 24px;
  color: var(--as-muted);
}

#footer #poweredBy {
  opacity: 0.55;
}

body#loginBody {
  min-height: 100vh;
  background:
    linear-gradient(135deg, rgba(17, 26, 46, 0.96), rgba(19, 159, 227, 0.78)),
    var(--as-navy);
}

body#loginBody #brickwall {
  display: none;
}

body#loginBody #loginBox {
  width: min(430px, calc(100% - 32px));
  margin: 7vh auto 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: var(--as-white);
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.28);
}

body#loginBody #blur,
body#loginBody #background {
  display: none;
}

body#loginBody #logo {
  height: 96px;
  margin: 0;
  border-radius: 8px 8px 0 0;
  background: var(--as-navy);
}

body#loginBody #logo a {
  position: relative;
  display: block;
  height: 96px;
}

body#loginBody #logo img {
  display: none;
}

body#loginBody #logo a::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 24px;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: url("../images/artsystem-logo.png") center / contain no-repeat;
}

body#loginBody #logo a::after {
  content: "ARTSYSTEM Support";
  position: absolute;
  left: 90px;
  top: 32px;
  color: var(--as-white);
  font-size: 20px;
  font-weight: 800;
}

body#loginBody #login-message {
  margin: 24px 28px 8px;
  color: var(--as-navy);
  font-size: 20px;
  line-height: 1.3;
}

body#loginBody .banner {
  margin: 0 28px 18px;
  border: 1px solid rgba(19, 159, 227, 0.24);
  border-radius: 6px;
  background: #eef8fe;
  color: var(--as-muted);
}

body#loginBody fieldset {
  margin: 0 28px 24px;
}

body#loginBody input[type="text"],
body#loginBody input[type="password"] {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
  padding: 12px 14px;
  font-size: 15px;
}

body#loginBody #company {
  border-top: 1px solid var(--as-line);
  background: #f8fafc;
  color: var(--as-muted);
}

body#loginBody #poweredBy {
  display: none;
}

#msg_notice,
.notice,
.notice-banner {
  border-color: rgba(19, 159, 227, 0.35) !important;
  background-color: #eef8fe !important;
}

#msg_warning,
.warning,
.warning-banner {
  border-color: #f6c35b !important;
}

#msg_error,
.error,
.error-banner {
  border-color: #d92d20 !important;
}

@media (max-width: 760px) {
  #container,
  #footer {
    width: calc(100% - 16px);
    margin-top: 8px;
  }

  #header {
    min-height: 112px;
    padding: 0 16px;
  }

  #header #logo,
  #header a#logo {
    width: 100%;
  }

  #header .pull-right,
  #header #info {
    float: none;
    clear: both;
    padding: 0 0 14px;
    text-align: left;
  }

  #nav {
    padding: 8px;
  }

  #nav li,
  #nav li a {
    display: block;
    float: none;
  }

  #content {
    padding: 18px;
  }
}