html,
* {
    scrollbar-width: medium;
    scrollbar-color: #0a2a21 #687e79;
}

html::-webkit-scrollbar,
*::-webkit-scrollbar {
    width: 0.9vw;
}

html::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
    background-color: #0a2a21;
}

html::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
    background-color: #0a2a21;
}

html::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
    background-color: #687e79;
}

html::-webkit-scrollbar-track:hover,
*::-webkit-scrollbar-track:hover {
    background-color: #687e79;
}

body,
html {
    height: 100%
}

body {
    background-image     : linear-gradient(37deg, rgb(26, 54, 71), rgb(39, 82, 100));
    background-size      : cover;
    background-attachment: fixed;
    color                : white;
    font-size            : 1rem;
}

::selection {
    background-color: hsl(120, 47%, 15%);
    color           : #fff;
}

form label {
    color: white !important;
}

a {
    outline        : none;
    text-decoration: none;
    padding        : 2px 1px 0;
}

a:link {
    color: #ffffff;
}

a:visited {
    color: #ffffff;
}

a:focus {
    border-bottom: 1px solid;
    background   : #BAE498;
}

a:hover {
    border-bottom: 1px solid;
}

a:active {
    background: #265301;
    color     : #CDFEAA;
}

h1,
h2,
h3 {
    font-family  : 'Architects Daughter', cursive;
    text-align   : center;
    color        : #FFFF33;
    /*font-weight: 700;*/
}

h4 {
    font-family  : 'Architects Daughter', cursive;
    text-align   : left;
    color        : #FFFF33;
    /*font-weight: 700;*/
}

p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 200;
}

nav ul {
    display         : flex;
    flex-wrap       : wrap;
    padding         : 0;
    background-color: rgba(204, 204, 204, 0);
    justify-content : center;
}

nav li {
    list-style-type: none;
}

nav a {
    display         : block;
    margin          : 0.5rem;
    padding         : 0.4rem 0.7rem;
    text-align      : center;
    background-color: hsl(164, 60%, 20%);
    color           : #fff;
    text-decoration : none;
    border          : 1px solid #fff;
    border-radius   : 4px;
    min-width       : 20%;
}

nav a:hover,
nav a:focus {
    background-color: #7A0000;
}

.heroe {
    padding: 0 2%;
}

ul {
    list-style-type: none;
    color          : rgb(255, 255, 255);
}

td {
    color: white
}

.boutons {
    display         : block;
    width           : 20%;
    margin          : 0.5rem;
    padding         : 0.4rem 0.7rem;
    text-align      : center;
    background-color: #1a6ebc;
    color           : #fff;
    text-decoration : none;
    border          : 1px solid #fff;
    border-radius   : 4px;
}

#loginform {
    width    : 100%;
    max-width: 500px;
    margin   : 20px auto;
}

.paginate_button.page-item a {
    color: #666;
}

.paginate_button.page-item a:hover {
    background  : hsl(209, 40%, 60%);
    border-color: hsl(209, 40%, 60%);
    color       : #fff;
}

.paginate_button.page-item.active a {
    background  : hsl(209, 65%, 35%);
    border-color: hsl(209, 65%, 35%);
}


.paginate_button.page-item.disabled a {
    color: #aaa;
}

.np {
    display        : flex;
    justify-content: start;
}

.coord {
    width        : 500px;
    margin       : 0 auto;
    padding-block: 30px;
}

.coord h3 {
    letter-spacing: 1px;
    font-size     : 2.1rem;
}

#topcoord {
    padding: 0;
    margin : 25px 0 0 0;
}

#topcoord li {
    list-style   : none;
    position     : relative;
    margin-bottom: 3px;
    padding-left : 20px;
}

#topcoord li::before {
    position   : absolute;
    left       : 0;
    top        : 0;
    content    : '\01F5F8';
    font-weight: 700;
}

table tr td {
    color: white !important
}

table tr th {
    color      : #ffff70 !important;
    font-family: 'Architects Daughter', cursive;
    font-size  : x-large;
}

table tbody tr:hover {
    background: linear-gradient(to right, hsl(194, 56%, 15%), hsl(193, 58%, 15%));
}

.box {
    display              : grid;
    grid-template-columns: 1fr;
    width                : 100%;
    max-width            : 1400px;
}

@media (min-width: 768px) {
    .box {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1200px) {
    .box {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.box h2 {
    text-align: left;
}

h1 a {
    border: none !important;
    color : #FFFF33 !important;
}

#circo {
    display  : flex;
    flex-wrap: wrap;
    padding  : 20px;
}

.bloc {
    padding: 20px;
}

#ien {
    text-align : center;
    padding-top: 30px;
}

#login_form {
    width        : 100%;
    max-width    : 600px;
    padding      : 50px;
    margin       : 50px auto;
    border       : 1px solid yellow;
    border-radius: 5px;
}

@media screen and (max-width: 770px) {
    .dataTables_length {
        margin-bottom: 15px;
    }
}

tfoot th input {
    width: 90% !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1rem !important;
    padding: 2px 5px !important;
    border-radius: 5px !important;
}