/* CSS for LDAP Tool Box Self Service Password */
/* N4 color scheme */

:root {
  --n4-primary: #5cb8b2;
  --n4-primary-dark: #3f9f99;
  --n4-primary-light: #e8f6f5;

  --n4-dark: #2f3437;
  --n4-text: #33383b;
  --n4-muted: #6f7a7d;

  --n4-bg: #f3f6f7;
  --n4-card: #ffffff;
  --n4-border: #dbe5e6;

  --n4-danger: #c94b4b;
  --n4-success: #4fa36b;
  --n4-focus: rgba(92, 184, 178, 0.35);
}

html, body {
  background:
    radial-gradient(circle at top left, rgba(92, 184, 178, 0.14), transparent 32%),
    linear-gradient(135deg, #f7fafb 0%, var(--n4-bg) 100%);
  color: var(--n4-text);
  padding-top: 20px;
  font-size: 12pt;
  min-height: 100%;
}

.captcha {
  padding-top: 0 !important;
  margin-bottom: 5px !important;
}

a,
a:hover {
  text-decoration: none;
}

a {
  color: var(--n4-primary-dark);
  font-weight: 500;
}

a:hover,
a:focus {
  color: var(--n4-dark);
}

/* Main card/container */
.card {
  background-color: var(--n4-card);
  background-color: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--n4-border);
  border-top: 4px solid var(--n4-primary);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(47, 52, 55, 0.10);
}

/* Optional Bootstrap card header support */
.card-header {
  background-color: var(--n4-dark);
  color: #ffffff;
  border-bottom: 0;
  font-weight: 600;
}

.card-title,
h1, h2, h3, h4, h5 {
  color: var(--n4-dark);
}

/* Logo */
img.menu-logo {
  display: inline;
  height: 30px;
}

/* Tables */
.table {
  margin-bottom: 0;
  color: var(--n4-text);
}

.table th {
  background-color: var(--n4-primary-light);
  color: var(--n4-dark);
  border-color: var(--n4-border);
}

.table td {
  border-color: var(--n4-border);
}

/* Display images */
.display img {
  margin-bottom: 20px;
}

/* Forms */
.form-control,
input,
select,
textarea {
  border-color: var(--n4-border);
  color: var(--n4-text);
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--n4-primary);
  box-shadow: 0 0 0 0.2rem var(--n4-focus);
  outline: none;
}

/* Buttons */
.btn-primary,
input[type="submit"],
button[type="submit"] {
  background-color: var(--n4-primary);
  border-color: var(--n4-primary);
  color: #ffffff;
  font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
button[type="submit"]:hover,
button[type="submit"]:focus {
  background-color: var(--n4-primary-dark);
  border-color: var(--n4-primary-dark);
  color: #ffffff;
}

/* Secondary buttons */
.btn-secondary {
  background-color: var(--n4-dark);
  border-color: var(--n4-dark);
  color: #ffffff;
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: #1f2325;
  border-color: #1f2325;
  color: #ffffff;
}

/* Alerts */
.alert-info {
  background-color: var(--n4-primary-light);
  border-color: var(--n4-primary);
  color: var(--n4-dark);
}

.alert-success {
  background-color: #edf8f1;
  border-color: var(--n4-success);
  color: #255c38;
}

.alert-danger,
.alert-error {
  background-color: #fbefef;
  border-color: var(--n4-danger);
  color: #7a2424;
}

/* Footer */
div#footer {
  position: fixed;
  bottom: 0;
  background-color: var(--n4-dark);
  background-color: rgba(47, 52, 55, 0.96);
  color: #ffffff;
  text-align: center;
  padding: 8px;
  width: 100%;
  border-top: 3px solid var(--n4-primary);
}

div#footer a {
  color: var(--n4-primary);
}

div#footer a:hover {
  color: #ffffff;
}

/* SSH key textarea */
textarea#sshkey {
  font-family: monospace;
  word-break: break-all;
  resize: vertical;
  min-height: 10em;
}

/* Small visual polish */
hr {
  border-top-color: var(--n4-border);
}

label {
  color: var(--n4-dark);
  font-weight: 500;
}

.text-muted {
  color: var(--n4-muted) !important;
}

@media print {

  html, body {
    margin: 0;
    padding: 0;
    background: #ffffff;
    color: #000000;
  }

  .container {
    width: 100%;
  }

  a[href]:after {
    content: none;
  }

  div#footer {
    position: static;
    background: #ffffff;
    color: #000000;
    border-top: 1px solid #cccccc;
  }

}