:root {
    /* cl = kleur, fs=fontsize */
    --nn-cl-deeporange: rgb(194, 91, 44);
    --nn-cl-orange: rgb(248, 127, 48); /* oranje uit logo */
    --nn-cl-orange2: rgba(194, 91, 44, 0.2);
    --nn-cl-green: rgb(85, 171, 38); /* groen uit logo */
    --nn-cl-gray-dimmed: rgba(0,0,0,0.4);
    --nn-cl-gray-xtrdimmed: rgba(0,0,0,0.2);
    --nn-cl-white: rgb(255,255,255);
    --nn-cl-white-dimmed: rgba(255,255,255,0.2);
    --nn-cl-black: rgb(42, 42, 42);
    --nn-cl-black-dimmed: rgba(42, 42, 42, 0.7);
    --nn-cl-black-xtrdimmed: rgba(42, 42, 42, 0.5);
    --nn-cl-blue: rgb(27, 110, 194);
    --nn-cl-blue-dimmed: rgba(27, 110, 194, 0.7);
    --nn-cl-blue-xtrdimmed: rgba(27, 110, 194, 0.5);
    --nn-cl-darkblue: rgb(28, 58, 115);
    --nn-cl-darkblue-dimmed: rgba(28, 58, 115, 0.7);
    --nn-cl-darkblue-xtrdimmed: rgba(28, 58, 115, 0.5);
    --nn-cl-blue2: rgb(21, 107, 148);
    --nn-cl-blue2-dimmed: rgba(21, 107, 148, 0.5);
    /* FRS kleuren */
    --nn-cl-groen-standaard: #498535;               /* nieuwe groen kleur (voorheen: rgb(74, 125, 61)) */
    --nn-cl-groen-standaard-licht: #5eac45;         /* nieuwe groen kleur, lichter (voorheen: #696) */
    --nn-cl-groen-standaard-lichter: #79b479;       /* nieuwe groen kleur, nog lichter */
    --nn-cl-lichtgroen: rgb(200, 216, 196);         /* lichtgroen uit voor achtergrond: #c8d8c4 */
    --nn-cl-groen2: rgb(112, 152, 101);             /* 2e groen kleur, o.a. voor panel achtergrond */
    --nn-cl--blauw2: #05e;                          /* anchors */
    --nn-cl--blauw2-licht: rgba(0, 85, 238, 0.7);   /* anchor hover/select */

    --nn-fs-standard: 0.875rem; /* 14px */
    --nn-fs-big: 1rem; /* 16px */
    --nn-fs-bigger: 1.125rem; /* 18px */
    --nn-fs-small: 0.75rem; /* 12px */
    --nn-fs-smaller: 0.625rem; /* 10px */
}


.loggedout-info {
    margin-top: 24px;
    background-color: var(--nn-cl-deeporange);
    color: white;
    padding: 12px;
}

#btn-logoutbyinacitivit {
    background-color: var(--nn-cl-deeporange);
    border-color: white;
    color: white;
}

.info {
    color: var(--nn-cl-groen-standaard);
    font-size: 18px;
}

h1 {
    color: var(--nn-cl-groen-standaard);
}

/*login section*/
.mainpanel {
    margin-top: 150px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0px 5px 10px 0px var(--nn-cl-black-xtrdimmed);
    background-color: white;
    color: black;
}

.subpanel {
    margin-top: 20px;
    max-width: 500px;
    min-height: 50px;
    margin-left: auto;
    margin-right: auto;
    /*box-shadow: 0px 5px 10px 0px var(--nn-cl-black-xtrdimmed);*/
    background-color: white;
    color: black;
}

.panel-content {
    border-width: 0;
    overflow: visible;
    overflow-x: hidden;
    padding: 1em;
}
.content-container {
    border-radius: 4px;
    padding: .5em 1.143em;
    font-size: var(--nn-fs-standard);
    font-weight: bold;
    cursor: default;
    outline: 0;
    display: flex;
    flex-direction: column;
    row-gap: 0.5em;
}

.content-container-title {
    background-color: white;
    color: black;
    padding-top: 0.5em;
    padding-right: 1.143em;
    padding-bottom: 0.5em;
    padding-left: 1.143em;
}
.content-container-title img {
    height: 30px;
}
.content-container-title .titel {
    margin-top:12px;
    font-weight:bold;
    font-size: var(--nn-fs-bigger);
}

#login-submit, #logout-submit {
    background-color: var(--nn-cl-darkblue);
    border-color: white;
    color: white;
}
#login-submit:hover, 
#logout-submit:hover {
    background-color: var(--nn-cl-darkblue-dimmed);
    border-color: var(--nn-cl-darkblue-dimmed);
    color: white;
}
    #login-submit:active,
    #login-submit:focus,
    #logout-submit:active,
    #logout-submit:focus {
        background-color: var(--nn-cl-darkblue-dimmed);
        border-color: var(--nn-cl-darkblue-dimmed);
        color: white;
    }

.subpanel a {
    line-height:40px;
    width:100%;
    text-decoration:none;
    color:var(--nn-cl-antraciet);
}
.subpanel a:hover {
    text-decoration: underline;
}

/*einde login section*/