@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);

:root {
    /* Base font size */
    font-size: 1em;

    /* Heading height variable*/
    --heading-height: 10em;

    /*--color-body:#192e5b;*/
    /*--color-aside:#1d65a6;*/
    /*--color-li:#f2a104;*/
    /*--color-active-li:#00743F;*/
    /*--background-color-active-li:#72A2C0;*/
    /*--primary-color:#00743F;*/
    /*--secondary-color:#f2a104;*/

    --color-body: #040C0E;
    --color-aside: #132226;
    --color-li: #BE9063;
    --color-active-li: #040C0E;
    --background-color-active-li: #A4978E;
    --primary-color: #525B56;
    --secondary-color: #BE9063;
    --url-header: url(https://visme.co/blog/wp-content/uploads/2016/01/73.jpg)
    /*url(https://images.unsplash.com/photo-1495464101292-552d0b52fe41?auto=format&fit=crop&w=1350&q=80)*/
}

body {
    font-family: "Roboto", Arial, sans-serif;
    min-height: 100vh;
    margin: 0;
    /*background-color: #101010;*/
    /*font-family: Arial, Helvetica, sans-serif;*/
    font-family: "Roboto", Arial, sans-serif;
    min-height: 100vh;
    background-color: var(--color-body);
    color: #e7e7e7;
    line-height: 1.2em;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;

}

h1 {
    color: #e7e7e7;
    width: 100vw;
    text-align: center;
}


input[type=text], input[type=date], select {
    border-radius: 20px;
    height: 42px;
    padding: 0px 10px;
    margin: 10px 0;
    border: none;
    box-shadow: 0 0 1px 1px var(--color-aside);
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;

}

select {
    background-image: url(/img/arrow.png); /* Standard syntax; must be last */
    background-position: right 15px center;
    background-repeat: no-repeat;
    background-size: 1.5em;
}

label {
    padding-left: 15px;
    margin-top: 10px;
}

h2 {
    color: #FF0000;
}

button.del-person {
    color: white;
    background-color: red;
    border: none;
    border-radius: 50%;
    font-size: 1em;
    font-weight: bold;
    height: 20px;
    width: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    cursor: pointer;
}

button.del-person:hover {
    background-color: #c33535;
    box-shadow: 0 0 8px 1px #DEDEDE;
}

main {
    z-index: 1;
    position: fixed;
    top: calc(var(--heading-height) - 4em);
    left: 15em;
    height: calc(100vh - var(--heading-height) - 3em);
    width: calc(100vw - 15em);
    display: flex;
    flex-direction: column;
    /*justify-content: flex-start;*/
    align-items: center;
    justify-content: center;
}

div.list-person {
    margin: 0 50px 20px;
    display: flex;
    overflow: auto;
    border-bottom: 2px solid #2980b9;
    border-radius: 0 0 10px 10px;
}

a.add-person {
    padding: 5px 9px;
    background: #213f56d1;
    border-radius: 5px;
    text-decoration: none;
    text-transform: uppercase;
    color: white;
    font-weight: bold;
}

a.add-person:hover {
    background: rgba(147, 201, 243, 0.82);
    box-shadow: 0 0 8px 1px #DEDEDE;
}

/*header{*/
/*    z-index: 1;*/
/*    position: fixed;*/
/*    top: 0;*/
/*    left: 0;*/
/*    !*padding:5px 10px;*!*/
/*    display: flex;*/
/*    align-items: flex-start;*/
/*    width: 100vw;*/
/*    !*background-color: #0b1a72;*!*/
/*    font-size: 25px;*/
/*    text-transform: uppercase;*/
/*    !*box-shadow: 0px 0.5px 10px 0px #a2a2a2;*!*/
/*    height: calc(var(--heading-height) - 3em);*/
/*}*/

header {
    z-index: 3;
    position: fixed;
    width: 100%;
    height: var(--heading-height);
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}


header > div > a {
    margin: 0.8em;
    display: flex;
    align-items: center;
}

header::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 6em;
    width: 100%;
    height: calc(var(--heading-height) + 10em);
    z-index: -1;
    transform: skewY(-3.5deg);
    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)),
    var(--url-header) no-repeat center,
    linear-gradient(#4e4376, #2b5876);
    background-size: cover;
    border-bottom: .2em solid #fff;
}


header a {
    text-decoration: none;
    color: #f1f0f0;
    font-size: xx-large;
}

header img.icon {
    margin-right: 20px;
    width: 32px;
    filter: invert(1);
}


div.menu {
    z-index: 2;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 15em;
    background-color: var(--color-aside);
    box-shadow: 0.5px 0 3px 2px #fefefe;
    padding-top: calc(var(--heading-height) + 2em);
}

div.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

i.fas {
    margin-right: 5px;
}

div.menu ul ul li {
    padding-left: 30px;
}

div.menu li {
    padding: 10px;
    color: var(--color-li);
}

div.menu li a {
    text-decoration: none;
    color: var(--color-li);
}

div.menu li.active {
    /*background-color: #dedede;*/
    /*color: #444;*/
    background-color: var(--background-color-active-li);
    color: var(--color-active-li);
}

div.menu li.active a {
    color: var(--color-active-li);
}

footer {
    position: fixed;
    bottom: 0;
    left: calc(10em + 30px);
    right: 30px;
    padding: 5px 10px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* background-color: #434; */
    border-top: 5px solid #fff;
    font-size: 25px;
    color: #e7e7e7;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 15%;
}

footer img {
    margin-top: 10px;
    height: 50px;
    filter: invert(0.1);
}

.styled-table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    color: #444;
    width: -webkit-fill-available;
    margin: 0 50px
}

.styled-table thead tr {
    background-color: #2980b9;
    color: #ffffff;
    text-align: left;
}

.styled-table th,
.styled-table td {
    width: calc(50vw - 50px);
    padding: 12px 15px;
}

.styled-table tbody tr {
    border-bottom: thin solid #dddddd;
    background-color: #fff;
}

.styled-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

/*.styled-table tbody tr:last-of-type {*/
/*    border-bottom: 2px solid #009879;*/
/*}*/

.styled-table tbody tr.active-row {
    font-weight: bold;
    color: #009879;
}

.form-ajout {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: calc(100% - 100px);;

}

.valider-ajout, .annuler-ajout {
    padding: 10px 25px;
    background-color: var(--primary-color);
    border: none;
    border-radius: 5px;
    color: white;
    cursor: pointer;
    font-size: 1em;
    text-transform: uppercase;
    margin: 10px 0px 0 10px;
}

.valider-ajout:hover, .annuler-ajout:hover {
    background-color: #2a772a;
    box-shadow: 0 0 8px 1px #DEDEDE;
}

.annuler-ajout {
    background-color: var(--secondary-color);
    text-decoration: none;
}

.annuler-ajout:hover {
    background-color: #72552a;
}

div.action {
    display: flex;
    justify-content: flex-end;
}

div.event-name {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 20px;
}

img.logo-accueil {
    border-radius: 25px;
    box-shadow: 1px 1px 12px 1px #fefefe;
    border: 1px solid #1c1b20;
}

.tp {
    align-items: flex-start;
    justify-content: flex-start;
}

.tp > div {
    overflow: auto;
    margin: 0 20px;
    padding: 20px;
    color: black;
    background-color: white;
    border-radius: 5px;
    box-shadow: inset 0 0 5px 1px black;
}

.tp ul li {
    margin-bottom: 10px;
}

a.link-tp {
    cursor:pointer;
}

a.link-tp button{
    cursor:pointer;
    display: flex;
    align-items: center;
    font-size:1.5em;
    background-color: white;
    color:#444;
    border-radius: 5px;
    border:none;
    padding:0 10px 0 0;
}

a.link-tp button span {
    margin-left: 10px;

}

a.link-tp button img {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    padding:5px;
    border-right:1px inset #dedede;
}

.schema {
    display:flex;
    justify-content: space-between;
}

.schema table {
    border:1px solid #444
}
.schema table thead th {
    border-bottom: 1px solid #444;
    padding-bottom: 5px;
    margin-bottom: 5px;
}
.schema table tbody td {
    border-bottom:1px solid #dedede;
}

code {
    color:#087a85;
}