/* --------------------------------------------------------------------------
    master stylesheet
------------------------------------------------------------------------- */

/*
----------------------------------------------------------------------------------------------------------
    
    generel stuff

----------------------------------------------------------------------------------------------------------
*/

/*
----------------------------------------------------------------------------------------------------------
    all major variables
----------------------------------------------------------------------------------------------------------
*/
:root{
    --background:#f5f5f5;
    --background-highlight: #e9e9e9;
    --background-side: #f5f5f5;
    --red: #d00;
    --green: #00ac00;
    /* nearly all buttons */
    --button:#2424d5;
    --button-hover:#050561;
    /* nearly all buttons */
    --button-secondary:#4a84ff;
    --button-secondary-hover:#0050fa;
    /* buttons like the one to get the PDF formular */
    --button-info: #1aafbd;
    --button-info-hover: #138496;
    /* buttons like the delete profile button */
    --button-danger: #d90000;
    --button-danger-hover: #b90000;
    /* navigation */
    /* old baby blue: ##6fa6ff */
    --mainnav-color: #a1bfff;
    --mainnav-font-color: #000;
    --mainnav-font-color-highlight: #2424d5;
    --footer-color: #a1bfff;
    --footer-font-color: #000;
    --leftmenu-color: #c2c2f3;
}


/*
----------------------------------------------------------------------------------------------------------
    container elements
----------------------------------------------------------------------------------------------------------
*/

body{
    background-color: var(--background-side);
}

/* jumbotron */
.jumbotron{
    border-radius: 0 0 0.4rem 0.4rem;
    padding: 3rem 2.5rem;
    background-color: var(--background);
}

@media (max-width: 566px){
    .jumbotron{
        padding: 1.5rem 1rem;
    }
}

/* container-fluid */
.container-fluid{
    width: auto;
    margin: 0 1.75rem;
    padding: 1rem 2.5rem 3rem 2.5rem;
    background-color: var(--background);
}

@media (max-width: 565px){
    .container-fluid{
        padding: 1rem 0.75rem 3rem 0.75rem;
        margin: 0 5%;
    }
}

/*
----------------------------------------------------------------------------------------------------------
    column and row
----------------------------------------------------------------------------------------------------------
*/


.col {
    margin: 2rem 0;
}

/*
----------------------------------------------------------------------------------------------------------
    headlines
----------------------------------------------------------------------------------------------------------
*/
h1{
    font-size: 2rem;
    margin: 1rem 0;
}

h2{
    font-size: 1.8rem;
    margin: 0.8rem 0;
}

h3{
    font-size: 1.5rem;
    margin: 0.6rem 0;
}

h4{
    font-size: 1.25rem;
    margin: 0.5rem 0;
}

h5{
    font-size: 1.10rem;
    margin: 0.4rem 0;
}

/*
----------------------------------------------------------------------------------------------------------
    links
----------------------------------------------------------------------------------------------------------
*/

a, a:visited{
    color: var(--button);
    text-decoration: none;
    outline: 0;
}

a:hover{
    color: var(--button-hover);
    text-decoration: underline;
    outline: 0;
}

a:focus{
    outline: 0;
}

/* colored fonts */
.red{
    color: var(--red);
}
.green{
    color: var(--green);
}

/*
----------------------------------------------------------------------------------------------------------
    buttons
----------------------------------------------------------------------------------------------------------
*/
.btn.btn-primary, .btn.btn-primary:visited{
    border-color: var(--button);
    background-color: var(--button);
    color:#fff;
}

.btn.btn-primary:hover, .btn.btn-primary:focus{
    border-color: var(--button-hover);
    background-color: var(--button-hover);
    color:#fff;
}

.btn.btn-secondary, .btn.btn-secondary:visited{
    border-color: var(--button-secondary);
    background-color: var(--button-secondary);
    color:#fff;
}

.btn.btn-secondary:hover, .btn.btn-secondary:focus{
    border-color: var(--button-secondary-hover);
    background-color: var(--button-secondary-hover);
    color:#fff;
}

.btn.btn-info, .btn.btn-info:visited{
    border-color: var(--button-info);
    background-color: var(--button-info);
    color:#fff;
}

.btn.btn-info:hover, .btn.btn-info:focus{
    border-color: var(--button-info-hover);
    background-color: var(--button-info-hover);
    color:#fff;
}

.btn.btn-danger, .btn.btn-danger:visited{
    border-color: var(--button-danger);
    background-color: var(--button-danger);
    color:#fff;
}

.btn.btn-danger:hover, .btn.btn-danger:focus{
    border-color: var(--button-danger-hover);
    background-color: var(--button-danger-hover);
    color:#fff;
}

@media (max-width: 700px){
    .btn.float-right, .btn.float-left{
        float: none !important;
        margin: 0.5rem 0.5rem 0.5rem 0;
    }
}

/* go back button */
a#go-back, a#go-back:visited, .go-back, .go-back:visited{
    display: block;

    
    margin-top: 1.5rem;
    padding-left: 1.5rem;

    background-image: url("./icons/arrow-bold-left.png");
    background-repeat: no-repeat;
    background-size: contain;

    color: #444;
    text-decoration: none;
    text-align: left;

    cursor: pointer;
}

a#go-back:hover, a#go-back:focus, .go-back:hover, .go-back:focus{
    color: #000;
}

a#go-back.top, .go-back.top{
    margin-bottom: 1rem;
    margin-top: 0;
}

/*
----------------------------------------------------------------------------------------------------------
    tables 
----------------------------------------------------------------------------------------------------------
*/

/*table tr:nth-of-type(2n+1){
    background-color: var(--background-highlight) !important;
    border-width: 0 !important;
}

table tr:nth-of-type(2n){
    background-color: transparent !important;
    border-width: 0 !important;
}*/

table, table tr, table tr td, table tr th{
    border-color: #000 !important;
}

table.table-striped tr td, table.table-striped tr th{
    border-width: 0 !important;
}

/*
----------------------------------------------------------------------------------------------------------
    
    navigation 

----------------------------------------------------------------------------------------------------------
*/

/*
----------------------------------------------------------------------------------------------------------
    main-navigation
----------------------------------------------------------------------------------------------------------
*/
nav#mainnav{
    position: relative;
    height: auto;
    background-color: var(--mainnav-color);
    color: var(--mainnav-font-color);
}

nav#mainnav ul.navbar-nav > li > a, nav#mainnav ul.navbar-nav > li > a:visited{
    color: var(--mainnav-font-color);
    opacity: 0.8;
    font-size: 1.3rem;
}

nav#mainnav ul.navbar-nav > li.selected > a, nav#mainnav ul.navbar-nav > li.selected > a:visited{
    color: var(--mainnav-font-color-highlight);
    opacity: 1;
}

nav#mainnav ul.navbar-nav > li > a:hover{
    opacity: 1;
}

nav#mainnav button.navbar-toggler{
    position: absolute;
    top: 25px;
    right: 90px;

    height: 40px;
    width: 40px;

    border-width: 0;

    opacity: 0.9;
    background-image: url("./icons/menu-burger.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

nav#mainnav button.navbar-toggler:hover{
    opacity: 1;
}

nav#mainnav button.navbar-toggler.collapsed{
    opacity: 0.7;
}

nav#mainnav button.navbar-toggler:focus{
    outline: 0;
}

nav#mainnav button.navbar-toggler .navbar-toggler-icon{
    display: none;
}

/*
----------------------------------------------------------------------------------------------------------
    user account stuff in mainnav
----------------------------------------------------------------------------------------------------------
*/
nav#mainnav div#user-account{
    position: absolute;
    top: 25px;
    right: 15px;
}

nav#mainnav div#user-account > a{
    width: 40px;
    height: 40px;

    margin: auto 1rem;

    opacity: 0.7;
    background-image: url("./icons/user.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    backface-visibility: 50%;
}

nav#mainnav div#user-account > a::after{
    position: absolute;
    top: 20px;
    right: 5px;
    border-top-color: #000;
    opacity: 0.7;
}

nav#mainnav div#user-account > a:hover, nav#mainnav div#user-account > a:hover::after{
    opacity: 0.9;
}

nav#mainnav div#user-account.loggedin > a{
    background-image: url("./icons/user-loggedin.png");
}

nav#mainnav div#user-account.loggedin > a::after{
    color: #2424d5;
}

nav#mainnav div#user-account div.dropdown-menu{
    position: absolute;
    top: 63px;
    right: 5px;

    border-radius: 0 0 0.2rem 0.2rem;
    border-width: 0;
    box-shadow: 0 1px 15px #999;
    background-color: #fff;
}

nav#mainnav div#user-account div.dropdown-menu > a,  nav#mainnav div#user-account div.dropdown-menu > a:visited{
    padding: 0.3rem 1rem;
    color: #555;
}

nav#mainnav div#user-account div.dropdown-menu > a:hover{
    background-color: #ddd;
    color: #222;
}

/*
----------------------------------------------------------------------------------------------------------
    footer
----------------------------------------------------------------------------------------------------------
*/

body{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* fix problem with toolbar */
html.cms-toolbar-expanded body{
    min-height: calc(100vh - 46px);
}

body > div{
    flex: 1;
}

footer#mainfooter{
    margin-top: auto;

    display: flex;

    padding: 1rem;

    background-color: var(--footer-color);
    color: var(--footer-font-color);
}

@media(min-width: 1000px){
    footer#mainfooter{
        padding: 1rem 5rem;
    }
}

footer#mainfooter .footer-col{
    padding: 0.25rem 2rem;
}

/*-----*/
footer#mainfooter a, footer#mainfooter a:visited {
    color: var(--footer-font-color);
    text-decoration: none;
}

footer#mainfooter a:hover {
    color: var(--button);
    text-decoration: none;
    font-weight: 600;
}

/* add extra space to prevent problems when make item bold */
footer#mainfooter a::after{
    display: block;
    content: attr(title);
    font-weight: 600;
    height: 1px;
    color: transparent;
    overflow: hidden;
    visibility: hidden;
}

footer#mainfooter table tr{
    background-color: transparent !important;
}

footer#mainfooter table tr td{
    padding: 0 0.5rem 0 0 !important;
}

footer#mainfooter table tr > td{
    text-align: left;
}

/*
----------------------------------------------------------------------------------------------------------
    all changes made when bootstrap collapsed the menu
----------------------------------------------------------------------------------------------------------
*/

@media (max-width: 767.98px){
    footer#mainfooter {
        flex-direction: column;
    }

    footer#mainfooter .footer-col{
        width: auto;
    }

    nav#mainnav div#user-account > a::after{
        display: none;
    }
}

/*
----------------------------------------------------------------------------------------------------------
    submenu template
----------------------------------------------------------------------------------------------------------
*/

nav#submenu{
    padding: 0 1rem !important;
    background-color: var(--mainnav-color);
    color: var(--mainnav-font-color);
}

hr#submenu-divider{
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    border-width: 0;
    margin: 0;
    height: 1px;
    width: 100%;
    overflow: hidden;
    background-color: #aaa;
}

nav#submenu ul.navbar-nav > li > a, nav#mainnav ul.navbar-nav > li > a:visited{
    color: var(--mainnav-font-color);
    opacity: 0.8;
    font-size: 1.1rem;
}

nav#submenu ul.navbar-nav > li.selected > a, nav#mainnav ul.navbar-nav > li.selected > a:visited{
    color: var(--mainnav-font-color-highlight);
    opacity: 1;
}

nav#submenu ul.navbar-nav > li > a:hover{
    opacity: 1;
}

/*
----------------------------------------------------------------------------------------------------------
    sidebar-left template 
----------------------------------------------------------------------------------------------------------
*/

div#wrapper-sidebar-left{
    background-color: #fff;
    display: flex;
    flex-direction: row;
}

div.container-fluid.container-sidebar-left{
    margin: 0 1.5rem 0 0;
    flex: 1;
}

nav#sidebar-left{
    box-sizing: border-box;
    width: auto;
    min-width: 220px;

    margin: 2rem 1.5rem;
}

/* put side-menu on top of content-container on small screens */
@media (max-width: 875px){
    div#wrapper-sidebar-left{
        display: flex;
        flex-direction: column;
    }

    div.container-fluid.container-sidebar-left{
        margin: 0 1.5rem 2rem 1.5rem;
        flex: 1;
        height: 100%;
    }
    
    nav#sidebar-left{
        box-sizing: border-box;
        width: auto;
    
        margin: 2rem 1.5rem;
    }
}

/* level 0 */
nav#sidebar-left ul{
    box-sizing: border-box;
    width: auto;
    
    padding: 0.75rem;
    margin: 0;

    list-style-type: none;
    background-color: var(--leftmenu-color);
}

nav#sidebar-left ul li a, nav#sidebar-left ul li a:visited{
    color: #555;
    font-size: 1.1rem;
    padding: 0;
}

/* add extra space to prevent problems when make item bold */
nav#sidebar-left ul li a::after{
    display: block;
    content: attr(title) "PLA";
    font-weight: 600;
    height: 1px;
    color: transparent;
    overflow: hidden;
    visibility: hidden;
}

nav#sidebar-left ul li a:hover{
    color: #000;
    text-decoration: none;
    font-weight: 600;
}

nav#sidebar-left ul li.selected > a, nav#sidebar-left ul li.selected > a:visited{
    color: #333;
    font-weight: 550;
}

/* level 1 */
nav#sidebar-left ul li ul{
    padding: 0 0 0 1rem;
}

nav#sidebar-left ul li ul li a, nav#sidebar-left ul li ul li a:visited{
    font-size: 1.05rem;
}

/*
----------------------------------------------------------------------------------------------------------
    
    forms

----------------------------------------------------------------------------------------------------------
*/

/*
----------------------------------------------------------------------------------------------------------
    CAPTCHA
----------------------------------------------------------------------------------------------------------
*/

img.captcha {
    height: 3rem;
    margin-bottom: 1rem;
}

/*
----------------------------------------------------------------------------------------------------------
    
    other stuff

----------------------------------------------------------------------------------------------------------
*/

.card{
    margin: 0.5rem;
}

.highlight-box{
    display: block;
    padding: 1rem;
    background-color: var(--background-highlight);
    border-radius: 0.5rem;
}

/*
----------------------------------------------------------------------------------------------------------
    card-decks
----------------------------------------------------------------------------------------------------------
*/

div.card-deck {
    display: flex;
    flex-direction: column;
}

div.card-deck .card{
    width: 100%;
    max-width: 700px;
    min-width: 200px;

    margin-bottom: 1rem;

    border-radius: 0.3rem;
    border-width: 0.05rem;
    border-color: #ddd;
}

div.card-deck .card div.card-body{
    display: flex;
    flex-direction: column;
    width: auto;
    flex: 1;
}

div.card-deck .card div.card-img-top{
    width: 100%;
    height: 0;
    padding-bottom: 75%;

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

div.card-deck .card div.card-img-top.aspect-ratio-16-9{
    padding-bottom: 56.25%;
}

div.card-deck .card div.card-img-top.aspect-ratio-3-2{
    padding-bottom: 66.66%;
}

div.card-deck .card div.card-img-top.aspect-ratio-1-1{
    padding-bottom: 100%;
}

div.card-deck .card.placeholder-card{
    height: 0px;
    visibility: hidden;
    margin: 0 0.5rem;
    padding: 0;
    border-width: 0;
}

@media(min-width: 567px){

    div.card-deck{
        flex-direction: row;
        flex-wrap: wrap;
    }

    div.card-deck .card{
        min-width: 400px;
        margin: 0.5rem;
    }

}

/* show more buttons in cards */
.card div.card-more{
    margin-top: auto;
    width: auto;
}

/* perons card deck */
.card-deck.person-card-deck .card{
    max-width: none;
}

@media (min-width: 567px){
    .card-deck.person-card-deck .card{
        min-width: 300px;
    }
}

@media (min-width: 900px){
    .card-deck.person-card-deck .card{
        max-width: 400px;
    }
}

div.card-deck.improved-card-deck.startpage-centred{
    margin: 0;
    justify-content: center;
}

@media (min-width: 1500px){
    div.card-deck.improved-card-deck.startpage-centred .card.placeholder-card{
        display: none;
    }
}

/*
----------------------------------------------------------------------------------------------------------
    accordation views
----------------------------------------------------------------------------------------------------------
*/

div#accordion div.card div.card-body{
    width: auto;
    padding: 0 0.75rem 0.375rem 0.75rem;
}

div#accordion div.card h5{
    width: auto;
}

div#accordion div.card button{
    color: var(--button);
    text-decoration: none;
}

div#accordion div.card button:hover{
    color: var(--button-hover);
    text-decoration: none;
}