/* MAIN STYLE */

@font-face {
    font-family: MPlusMedium;
    src: url("fonts/MPLUSRounded1c-Medium.ttf");
}

@font-face {
    font-family: MPlusBold;
    src: url("fonts/MPLUSRounded1c-Bold.ttf");
}

:root{
    --col-main: #ad0100;
    --col-second: #fbde03;
    --col-second-light: #ffee93;
    --col-black: black;
    --col-white: white;

    --col-main-disabled: gray;
    --col-second-disabled: black;

    --col-title: #00bab1;
    --col-alixe: #0278a3;
    --col-conscience: #00bab1;

    --font-main: MPlusMedium;
    --font-title: MPlusBold;
    --font-conscience: MPlusMedium;
}


/* LAYER STYLE */

.div-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}

.div-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
}

#screen-layer-config .div-background {
    background-image: url("pics/bg/config.jpg");
    background-size: cover;
    opacity: 0.5;
    /* filter: brightness(150%); */
}


/* SCREEN STYLE */

.div-screen {
    /* height: 50%; */
    /* height: -moz-fit-content; */
    /* height: -webkit-fit-content; */
    /* height: fit-content; */
    /* max-height: 100%; */
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    overflow: hidden;
}


.div-text {
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    overflow: hidden;
}

.div-text-narrower {
    width: 50%;
}

.div-text-wider {
    width: 80%;
}

.div-column {
    float: left;
    width: 48%;
    padding: 10px;
}


/* MENU STYLE */

.div-layer .div-title {
    font-family: var(--font-title);
    background-color: var(--col-main);
    color: var(--col-second-light);
    font-size: 300%;
    font-weight: 800;
    text-transform: uppercase;
    padding: 15px;
    padding-left: 30px;
    padding-right: 30px;
    text-align: left;    
    /* width: fit-content; */
}

.div-layer .div-subtitle {
    font-family: var(--font-title);
    color: var(--col-main);
    text-align: center;
    font-size: 200%;
    font-weight: 800;
    text-transform: uppercase;
    padding: 15px;
    padding-top: 5px;
    padding-left: 30px;
    text-align: left;
}

/* .div-layer .div-subtitle { */
/*     color: var(--ui-main); */
/*     text-align: center; */
/*     font-size: 130%; */
/*     font-weight: 800; */
/*     padding: 5px; */
/* } */

.div-layer .div-version {
    font-family: var(--font-title);
    color: white;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 120%;
    font-weight: 500;
    padding: 10px;
    opacity: 50%;
}


.div-center {
    position: fixed; 
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: fit-content;
}

.div-menu {
    position: fixed; 
    top: 100px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: fit-content;
}

.div-data {
    top: 0;
}

.div-menu hr {
    opacity: 0;
    margin: 50px;
}

.div-menu button {
    font-family: var(--font-main);
    display: block;
    margin: 20px auto;
    width: 350px;
    padding: 15px;
    font-size: 120%;
    text-transform: uppercase;
    color: white;
    background: black;
    border: none;
    border-radius: 5px;
    /* -webkit-border-radius: 3px; */
    /* -moz-border-radius: 3px; */
    cursor: pointer;
}

.div-menu .menu-big-button {
    color: white;
    background: var(--col-main);
    width: 450px;
    font-size: 150%;
}

.div-menu button:disabled {
    background: var(--col-main-disabled);
    color: #aaaaaa;
    cursor: auto;
}

.div-menu button:hover:not(:disabled) {
    opacity: 0.5;
    /* filter: opacity(50%); */
}

#menu-save-nb p {
    font-family: var(--font-main);
    color: black;
    font-size: 150%;
    text-align: center;
}



/* FORM STYLE */

.div-form {
    font-family: var(--font-main);
    font-size: 120%;
    border-radius: 5px;
    /* max-height: 700px; */
    background: var(--col-second-light);
    border: 2px solid var(--col-main);
    width: 380px;
}

#form-problem {
    position: fixed;
    top: unset;
    bottom: 15%;
    width: 420px;
}

#button-credits {
    background: var(--col-main);
    color: white;
}

#button-credits:hover {
    opacity: 0.5;
}

#form-credits {
    /* position: fixed; */
    /* top: unset; */
    /* bottom: 15%; */
    width: 800px;
}

.div-form .div-title {
    font-family: var(--font-title);
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    width: 100%;
    font-size: 140%;
    color: var(--col-second-light);    
    background: var(--col-main);
}

.div-form .span-close {
    font-size: 160%;
    color: var(--col-second-light);    
    position: absolute;
    right: 8px;
    top: -5px;
    cursor: pointer;
}

.div-form form {
    padding: 35px;
    padding-top: 15px;
}

.div-form p {
    color: var(--col-main);
    color: black;
    /* padding-left: 20px; */
    /* padding-right: 20px; */
}

.div-form p:first-child { margin-top: 0px; }
.div-form p:last-child { margin-bottom: 0px; }


/* BUTTON STYLE */

button {
    padding: 10px 40px 10px 40px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

button:focus {
    outline: none;    
}

.div-screen-config .div-block-buttons {
    position: fixed;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 10%;
    text-align: center;
}

.div-screen-config .div-block-buttons button {
    /* padding: 0; */
    padding-top: 5px;
    padding-bottom: 5px;
    /* width: 50px; */
    font-family: var(--font-main);
    font-size: 150%;
    text-transform: uppercase;
    background: var(--col-main);
    color: white;
    border: none;
    /* border-radius: 8px; */
}

.div-screen-config .div-block-buttons button:hover:not(:disabled) {
    opacity: 0.5;
}

.div-screen-config .div-block-buttons button:disabled {
    background: var(--col-main-disabled);
    background-color: var(--col-main-disabled);
    cursor: auto;
    opacity: 70%;
}


/* LOGO STYLE */

.div-logos {
    position: fixed;
    bottom: 10px;
    right: 10px;
    margin: auto;
    text-align: center;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 3px;
}

.div-logos img, .div-logos p {
    display: block;
    margin: 20px;
    width: 150px;
}

.div-logos p {
    font-family: var(--font-main);
    color: var(--col-main);
    font-size: 80%;
    text-align: center;
}

.div-logos img:hover {
    transition: transform .2s;
    transform: scale(1.2);
}


/* WAIT STYLE */

#wait {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.75);
    display: flex;
    justify-content: center;
    z-index: 9999;
}

#wait img {
    max-width: 100px;
    object-fit: contain;
}


/* TABLE STYLE */

#screen-data table {
    /* position: fixed; */
    /* left: 0; */
    /* right: 0; */
    /* top: 0; */
    /* bottom: 0; */
    margin: auto;
    /* text-align: left;     */
}

#screen-data td {
    color: black;
    font-family: var(--font-conscience);
    font-size: 120%;
    line-height: 1.15;
    margin-top: 0;
    margin-bottom: 8px;
}

#screen-data td {
    padding-top: 5px;
    padding-right: 30px;
}

#screen-data td:first-child {
    padding-right: 20px;
}
    
#screen-data td { /* :not(:first-child) { */
    text-align: right;
}

#screen-data thead td {
    text-transform: uppercase;
    color: var(--col-main);
}

#screen-data hr {
    margin: 100px;
}

#screen-data tbody tr:last-child td {
    padding-bottom: 20px;
}

.div-menu .button-csv {
    width: auto;
    padding: 5px 10px;
    margin: 0;
    font-family: var(--font-conscience);
    font-size: 80%;
    background: var(--col-main);
    color: white;
}

.div-menu .button-csv:hover:enabled {
    opacity: 0.5;
}



/* button:focus { color: red; } */