/* =========================================================
   WHOLE PAGE
   ========================================================= */

body {
    font-family: Courier, monospace;
    background-color: #111111;
    color: #dddddd;
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.site-grid {
    max-width: 1200px;
    margin: 0 auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.container-header {
    position: relative;

    background-color: #222222;
    background-image: url("/images/headers/header3.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;

    overflow: hidden;
}


/* =========================================================
   LOGO
   Centered horizontally and vertically in header
   ========================================================= */

.container-header .navbar-brand {
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    margin: 0;
    padding: 0;

    z-index: 2;
}


/* Logo size */

.container-header .navbar-brand img {
    width: 240px;
    height: auto;
    max-height: 140px;
}


/* =========================================================
   MAIN CONTENT
   ========================================================= */

main {
    background-color: #181818;
    padding: 20px;
}


/* =========================================================
   ARTICLE TITLES
   ========================================================= */

.item-title,
.item-title a,
.page-header h1,
.page-header h2 {
    font-family: "Courier New", Courier, monospace;
    color: #00aa55;
}


/* =========================================================
   NORMAL LINKS
   ========================================================= */

a {
    color: #00aa55;
}

a:hover {
    color: #00ff77;
}


/* =========================================================
   MAIN MENU + LOGIN FORM

   IMPORTANT:
   In Cassiopeia the elements have, for example:

       class="sidebar-left card"

   Therefore we use:

       .sidebar-left.card

   NOT:

       .sidebar-left .card

   ========================================================= */


/* Give the external frame enough room */

.sidebar-left.card,
.sidebar-right.card {
    background-color: #000000 !important;
    color: #ffffff;

    /*
       15px frame:

       inner: 5px RED
       middle: 5px WHITE
       outer: 5px RED
    */

    border: 5px solid #d00000 !important;

    box-shadow:
        0 0 0 2px #ffffff,
        0 0 0 5px #d00000 !important;

    border-radius: 18px !important;

    margin: 15px !important;

    overflow: visible !important;
}


/* =========================================================
   MODULE HEADERS
   ========================================================= */

.sidebar-left .card-header,
.sidebar-right .card-header {
    font-family: Courier, monospace;

    background-color: #000000;
    color: #008000;

    border-bottom: 1px solid #008000;

    border-radius: 10px 10px 0 0;
}


/* =========================================================
   MODULE BODY
   ========================================================= */

.sidebar-left .card-body,
.sidebar-right .card-body {
    background-color: #000000;
    color: #ffffff;
}


/* =========================================================
   LINKS INSIDE MAIN MENU / LOGIN FORM
   ========================================================= */

.sidebar-left.card a,
.sidebar-right.card a {
    color: #00aa00;
}

.sidebar-left.card a:hover,
.sidebar-right.card a:hover {
    color: #00ff00;
}


/* =========================================================
   USERNAME / PASSWORD INPUT BOXES
   ========================================================= */

/* Username + password text area */
.sidebar-left.card .input-group input.form-control,
.sidebar-right.card .input-group input.form-control {
    background-color: #111111 !important;
    color: #00ff00 !important;
    border-color: #008000 !important;
}

/* Placeholder text */
.sidebar-left.card .input-group input.form-control::placeholder,
.sidebar-right.card .input-group input.form-control::placeholder {
    color: #008000 !important;
    opacity: 1;
}

/* When focused */
.sidebar-left.card .input-group input.form-control:focus,
.sidebar-right.card .input-group input.form-control:focus {
    background-color: #111111 !important;
    color: #00ff00 !important;
    border-color: #00ff00 !important;
    box-shadow: none !important;
}


/* =========================================================
   USERNAME / PASSWORD ICONS
   ========================================================= */

.sidebar-left .input-group-text,
.sidebar-right .input-group-text,
.sidebar-left .input-password-toggle,
.sidebar-right .input-password-toggle {
    background-color: #111111;
    color: #008000;

    border-color: #008000;
}


/* SVG icons */

.sidebar-left .input-group-text svg,
.sidebar-right .input-group-text svg,
.sidebar-left .input-password-toggle svg,
.sidebar-right .input-password-toggle svg {
    fill: #008000;
    color: #008000;
}


/* =========================================================
   PASSKEY BUTTON
   ========================================================= */

.sidebar-left .btn-secondary,
.sidebar-right .btn-secondary {
    background-color: #000000;
    color: #008000;

    border: 1px solid #008000;
    border-radius: 8px;
}

.sidebar-left .btn-secondary:hover,
.sidebar-right .btn-secondary:hover {
    background-color: #008000;
    color: #ffffff;

    border-color: #008000;
}


/* =========================================================
   LOGIN BUTTON
   ========================================================= */

.sidebar-left .btn-primary,
.sidebar-right .btn-primary {
    background-color: #008000;
    color: #ffffff;

    border-color: #008000;
    border-radius: 8px;
}

.sidebar-left .btn-primary:hover,
.sidebar-right .btn-primary:hover {
    background-color: #00aa00;
    border-color: #00aa00;
}


/* =========================================================
   REMEMBER ME
   ========================================================= */

.sidebar-left .form-check-label,
.sidebar-right .form-check-label {
    color: #008000;
}


/* Unchecked checkbox */

.sidebar-left .form-check-input,
.sidebar-right .form-check-input {
    background-color: #000000;
    border-color: #008000;
}


/* Checked checkbox */

.sidebar-left .form-check-input:checked,
.sidebar-right .form-check-input:checked {
    background-color: #008000;
    border-color: #008000;
}

/* Force username/password fields to dark background */
.sidebar-left.card input[type="text"],
.sidebar-left.card input[type="password"],
.sidebar-right.card input[type="text"],
.sidebar-right.card input[type="password"] {
    background: #111111 !important;
    background-color: #111111 !important;
    color: #00ff00 !important;
    -webkit-text-fill-color: #00ff00 !important;
}

/* Browser autofill */
.sidebar-left.card input[type="text"]:-webkit-autofill,
.sidebar-left.card input[type="password"]:-webkit-autofill,
.sidebar-left.card input[type="text"]:-webkit-autofill:hover,
.sidebar-left.card input[type="password"]:-webkit-autofill:hover,
.sidebar-left.card input[type="text"]:-webkit-autofill:focus,
.sidebar-left.card input[type="password"]:-webkit-autofill:focus {
    -webkit-text-fill-color: #00ff00 !important;
    -webkit-box-shadow: 0 0 0 1000px #111111 inset !important;
    box-shadow: 0 0 0 1000px #111111 inset !important;
    background-color: #111111 !important;
    caret-color: #00ff00 !important;
}