@import url("colors.css");
@import url("fonts.css");

* {
    outline: none;
    border: none;
    padding: 0px;
    margin: 0px;
}

.spin_loader {
    width: 40px;
    height: 40px;
    animation: spin_loader 1s infinite ease-in-out, spin_fade 1s ease-in;
}

@keyframes spin_loader {
  from {rotate: 0deg;}
  to {rotate: 720deg;}
}

@keyframes spin_fade {
  0% {opacity: 0;}
  50% {opacity: 0;}
  100% {opacity: 1;}
}

p {
    font-size: 3em;
}

a {
    text-decoration: none;
}

body {
    margin: 0px;
    padding: 0px;
    width: calc(100% - 1.5px);
    height: 100%;
    /*overflow: hidden;*/
}

button {
    background-color: #EEE;
    color: #000;
    width: min(10em, 100%);
    height: 2em;
    /*box-shadow: #CCC 2px 2px 5px;*/
    transition: 0.1s ease;
}

button:hover {
    background-color: #555;
    color: #FFF;
}

div.DynamicTable {
    border: solid black 1px;
}

div.DynamicTable table {
    /* border: solid black 1px; */
    width: 100%;
    /* height: 100%; */
    white-space: nowrap;
    color: black;
    background-color: #FFF;
    border-spacing: unset;
}

div.DynamicTable thead {
    border-top: solid black 1px;
}

div.DynamicTable table tr {

}

div.DynamicTable table tr:hover {
    outline: thin solid #000;
}

div.DynamicTable table thead {
    position: sticky;
    top: 1.5em;
}

div.DynamicTable table thead th {
    background-color: #CCC;
    height: 2em;
}

div.DynamicTable table thead th:nth-child(odd) {
    background-color: #EEE;
}

div.DynamicTable table td {
    background-color: #DDD;
    text-align: center;
    height: 1.5em;
}

div.DynamicTable table td:nth-child(odd) {
    background-color: #F8F8F8;
}

div.DynamicTable table td input[type="text"] {
    background-color: unset;
    text-align: center;
    width: 100%;
    height: 100%;
}

div.DynamicTable table td input[type="text"]:hover, table td input[type="text"]:focus {
    background-color: #0002;
}

div.DynamicTable table td select {
    background-color: unset;
    text-align: center;
    width: 100%;
    height: 100%;
}

div.DynamicTable table td select:hover, table td select:focus {
    background-color: #0002;
}

div.DynamicTable table td select.edited {
    background-color: #F002;
}

div.DynamicTable table td div {
    background-color: unset;
    text-align: center;
    align-content: center;
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
}

div.DynamicTable table td div:hover {
    background-color: #0002;
}

div.DynamicTable table td button {
    background-color: unset;
    text-align: center;
    width: 100%;
    height: 100%;
}

div.DynamicTable table td button:hover {
    background-color: #0002;
}

div.DynamicTable div.DynamicTable-Title {
    text-align: center;
    align-content: center;
    width: 100%;
    height: 1.5em;
}

div.DynamicTable input[type="text"].DynamicTable-Title {
    background-color: #0002;
    text-align: center;
    width: 100%;
    height: 1.5em;
}

div.DynamicTable input[type="text"].DynamicTable-Title:hover, div.DynamicTable input[type="text"].DynamicTable-Title:focus {
    background-color: #0004;
    text-align: center;
    width: 100%;
    height: 1.5em;
}

div.DynamicTable div.DynamicTable-Top {
    position: sticky;
    top: 0em;
    background-color: #FFF;
}


div.DynamicTable div.DynamicTable-Search {

}


div.DynamicTable table.DynamicTable-Table {

}



#login-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    align-content: center;
}

#login-user, #login-password {
    background-color: #FFF;
    color: #333;
    border-bottom: solid black 2px;
    width: min(50em, 100%);
    height: 2em;
    transition: linear 0.1s;
    margin: 10px;
}

#login-user:hover, #login-password:hover {
    background-color: var(--primary_color);
}

#login-user:focus, #login-password:focus {
    background-color: #DDD;
    border: none;
    box-shadow: #0003 2px 2px 8px 3px;
}

#login-submit {
    background-color: #AAA;
    color: #000;
    width: min(20em, 50%);
    height: 2em;
    transition: linear 0.1s;
}

#login-submit:hover, #login-submit:focus {
    background-color: #333;
    color: #FFF;
    scale: 105%;
}

#login-submit.login_error {
    background-color: #F00;
    color: #000;
}

#login-submit.login_ok {
    background-color: #0B0;
    color: #000;
}

header {
    position: sticky;
    top: 0;
    background-color: #CCC;
    color: #000;
    /*padding: 5px;*/
    display: flex;
}

#header-navigator {
    list-style-type: none;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#header-navigator li {
    display: block;
    /*padding: 5px;*/
    height: 100%;
    box-sizing: border-box;
}

#header-navigator li.left {
    float: left;
}

#header-navigator li.right {
    float: right;
}

.header-logo {
    font-family: MrEaves;
    font-size: 2em;
    margin: 5px;
    color: #000;
    text-wrap: nowrap;
}

div.vertical-separator {
    width: 2px;
    height: 100%;
    background-color: #000;
}

div#privileged-div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

div#tab-menu {
    overflow: hidden;
    border: 1px solid #CCC;
    background-color: #F1F1F1;
}


div#tab-menu button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    width: auto;
    height: auto;
}

div#tab-menu button:hover {
  background-color: #DDD;
  color: #000;
}

/* Create an active/current tablink class */
div#tab-menu button.active {
  background-color: #CCC;
}

div.tab-content {
    display: none;
    padding: 6px 12px;
    border: 1px solid #CCC;
    border-top: none;
}

div.tab-content.tab-active {
    display: block;
}














/* Affichage page */

#content {
    /*width: 100%;*/
    /*height: 90%;*/
    padding: 0px;
    margin: 0px;

    padding-left: 100px;
    padding-right: 100px;
}


@media screen and (max-width: 600px) {
    div#content {
        padding-left: 10px;
        padding-right: 10px;
    }
}