/*----------------------------------------------------------------------
  FILENAME: custom.css
  DESCRIPTION: Rules placed in this file will override all other rules.
  You can use !important to ensure the rules are applied.
----------------------------------------------------------------------*/

:root {
  --color-primary: #234f39;
  --color-accent: #33d283;
  --color-accent-light: #5ddb9c;
  --color-muted: #909090;
  --color-light: #f7f7f7;
  --color-primary-contrast: #fff;

  --shadow: 0px 5px 25px rgba(0, 0, 0, 0.05);
}

body,
#page_login {
  background: var(--color-light);
  font-family: "neuzeit-grotesk", -apple-system, system-ui, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Header + Nav */
#nav {
  background: var(--color-primary);
}

#nav ul li a {
  text-align: center;
}

#nav ul li.selected a {
  background: rgba(0, 0, 0, 0.25);
}

#nav ul li a:hover,
#nav ul li:hover a {
  background: var(--color-accent);
}

/* Buttons */
button,
.button,
input[type="submit"] {
  background: var(--color-accent-light);
  color: var(--color-primary-contrast);
  border-radius: 99vw;
  border: 0;
  text-transform: uppercase;
}

button:hover,
.button:hover,
input[type="submit"]:hover {
  background: var(--color-accent);
}

/* Links */
a,
a:visited {
  color: var(--color-accent-light);
}
a:hover,
a:active {
  color: var(--color-accent);
}

.article .section h1 {
  color: var(--color-primary);
}

/* Login */
.login {
  margin: 80px auto 40px auto;
  padding: 15px;
  background-color: #fff;
  box-shadow: var(--shadow) !important;
  border-radius: 10px;
  max-width: 350px;
  width: 90%;
}
.article .section .login h1 {
  margin: -15px -15px 15px -15px;
  padding: 1.5rem 15px;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}
.login dl,
.login dt,
.login dd,
.login input {
  float: unset;
  width: 100%;
  box-sizing: border-box;
}

/* Signup */
#pageBody,
.article {
  background: var(--color-light);
}
#frmSignup fieldset {
  background: #fff;
  border: 0;
  box-shadow: var(--shadow);
  border-radius: 0.5rem;
  padding: 1rem;
}
#frmSignup fieldset legend {
  background: transparent;
  float: left;
  width: 100%;
  margin-bottom: 20px;
}
/* #accDetailSet_1 {
  display: flex;
  flex-direction: column;
}
#dtl_personcompany {
  order: -1;
} */

/* Sidebar */
#aside {
  background: #fff !important;
  margin: 15px;
  box-shadow: var(--shadow);
  border-radius: 10px;
}
#aside .section h1 {
  color: var(--color-primary);
}

#aside .nav .section .selected a {
  background: var(--color-primary);
}

#aside .section h1,
#aside .section h2 {
  color: var(--color-primary);
}

@media (max-width: 767px) {
  body {
    background: var(--color-light);
  }
  #header {
    height: auto;
  }
  #aside {
    width: auto;
  }
}