/*
 * Copyright © 2023-2025 - Omnium Sécurité Incendie.
 * All rights reserved.
 */

@font-face {
    font-family: "icomoon";
    src: url("fonts/icomoon.eot?b2om2p");
    src: url("fonts/icomoon.eot?b2om2p#iefix") format("embedded-opentype"),
    url("fonts/icomoon.ttf?b2om2p") format("truetype"),
    url("fonts/icomoon.woff?b2om2p") format("woff"),
    url("fonts/icomoon.svg?b2om2p#icomoon") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

:root {
    --desdemona-primary: hsl(0, 80%, 40%);
    --desdemona-primary-content: hsl(0, 80%, 140%);
    --desdemona-primary-dark: hsl(0, 80%, 30%);
    --desdemona-primary-light: hsl(0, 80%, 50%);
    --desdemona-secondary: hsl(180, 80%, 40%);
    --desdemona-secondary-content: hsl(180, 80%, -10%);
    --desdemona-secondary-dark: hsl(180, 80%, 30%);
    --desdemona-secondary-light: hsl(180, 80%, 50%);
    --desdemona-background: hsl(0, 7%, 94%);
    --desdemona-background-light: hsl(0, 50%, 98%);
    --desdemona-foreground: #fbfbfb;
    --desdemona-border: #e2dddd;
    --desdemona-copy: #292324;
    --desdemona-copy-light: #6e5e5f;
    --desdemona-copy-lighter: #958484;
    --desdemona-shadow: rgba(41, 35, 36, 0.5);
    --desdemona-success: hsl(124, 70%, 30%);
    --desdemona-success-light: hsl(124, 40%, 80%);
    --desdemona-warning: hsl(50, 90%, 60%);
    --desdemona-warning-light: hsl(50, 50%, 80%);
    --desdemona-error: hsl(0, 70%, 30%);
    --desdemona-error-light: hsl(0, 40%, 80%);
    --desdemona-danger: var(--desdemona-error);
    --desdemona-danger-light: var(--desdemona-error-light);
    --desdemona-success-content: #d2fad2;
    --desdemona-warning-content: #000000;
    --desdemona-error-content: #fad2d2;
    --desdemona-danger-content: var(--desdemona-error-content);
}

.icomoon {
    font-family: "icomoon";
}

.ui-dialog-titlebar-close {
    visibility: hidden;
}

.clearboth {
    width: 100%;
    clear: both;
    display: block;
    float: none;
}

html, body {
    background: #fff;
    background: rgb(248, 249, 250);
}

header {
    width: 100%;
    height: 50px;
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    box-sizing: border-box;
    z-index: 900;
    border-bottom: solid 1px rgb(218, 220, 224);
}

header h1 {
    margin: 0;
    padding: 0;
}

header h1 a,
header h1 a:hover {
    text-decoration: none;
    color: #333;
    margin: 0;
    display: block;
    height: 50px;
    float: left;
    padding: 6px;
}

header h1 a img {
    height: calc(50px - 2 * 6px);
    width: calc(50px - 2 * 6px);
    text-decoration: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.logo { margin-left: 8px; }

.logo--sonorest {
    padding: 8px;
}

header h1 strong {
    margin: 0;
    padding: 0;
    font-size: 0.9em;
    line-height: 50px;
    position: relative;
    left: 10px;
}

header ul.menu {
    position: absolute;
    top: 0;
    right: 0;
    list-style: none;
}

header ul.menu li {
    width: 50px;
    height: 50px;
    float: left;
}

header ul.menu li a {
    display: block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 1.7em;
    text-decoration: none;
    text-align: center;
}

header ul.menu li button {
    display: block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 1.7em;
    text-decoration: none;
    border: none;
}

header ul.drop {
    display: none;
}

header ul.niv2 {
    display: block;
    position: fixed;
    top: 50px;
    right: 0;
    background: rgba(185, 20, 27, 1.0);
    width: 100%;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 50px;
    z-index: 999;
    overflow: auto;
}

header ul.niv2 li {
    height: auto;
    width: 100%;
    margin: 5px 0;
}

header ul.niv2 li a {
    display: block;
    font-size: 1.2em;
    height: 60px;
    line-height: 60px;
    width: 100%;
    color: #fff;
    border: solid 1px #fff;
    text-decoration: none;
    padding: 0 25px;
    position: relative;
}

header ul.niv2 li img {
    width: 60px;
    height: 60px;
    line-height: 60px;
    position: absolute;
    top: 0;
    right: 0;
}

header ul.niv2 li span {
    margin: 0 5px;
}

main {
    width: 100%;
    margin: 50px 0 0 0;
    padding: 0;
}

main#home,
main#login {
    width: 100%;
    height: calc(100% - 50px);
}

main a.plus {
    display: block;
    position: fixed;
    bottom: 30px;
    /* left: 50%; */
    right: 30px;
    background: rgba(185, 20, 27, 1.0);
    color: #fff;
    text-decoration: none;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    text-align: center;
    line-height: 50px;
    font-size: 1.5em;
    box-shadow: 1px 1px 5px 3px rgba(0, 0, 0, 0.3);
    z-index: 500;
}

main a.plus3 {
    position: unset;
    width: 34px;
    height: 34px;
    line-height: 34px;
    font-size: 1.2em;
    border-radius: 17px;
    bottom: 38px;
    right: 95px;
    background: white;
    color: black;
    box-shadow: none;
}

main div.actionContainer {
    display: flex;
    justify-content: flex-end;
    width: 20%;
    float: right;
}

main a.planning {
    bottom: 80px;
}

main a.devis,
main button.devis-toggle,
main a.pv {
    display: block;
    position: fixed;
    bottom: 30px;
    left: 30px;
    background: rgba(185, 20, 27, 1.0);
    background: #dbdbdb;
    color: #fff;
    color: #333;
    text-decoration: none;
    width: 100px;
    height: 50px;
    border-radius: 5px;
    text-align: center;
    box-shadow: 1px 1px 5px 3px rgba(0, 0, 0, 0.3);
    z-index: 500;
    left: 30px;
}

main button.devis-toggle {
    border: none;
    font-size: 12px;
    display: flex; flex-direction: row;
    justify-content: flex-start; align-items: center;
    gap: 0.5rem;
    width: unset;
    left: 140px;
    padding: 8px;
    height: 30px;
}

main button.devis-toggle .toggle {
    position: relative;
    display: block;
    width: 32px; height: 16px;
    background-color: white;
    border: solid 1px black;
    border-radius: 8px;
}

main button.devis-toggle .toggle.checked {
    background-color: rgba(185, 20, 27, 1.0);
}

main button.devis-toggle .toggle::before {
    content: "";
    width: 12px; height: 12px;
    border-radius: 6px;
    background-color: white;
    position: absolute;
    border: solid 1px rgba(0, 0, 0, 0.3);
    top: 1px; left: 1px;
}

main button.devis-toggle .toggle.checked::before {
    left: unset; right: 1px;
}

main a.devis strong,
main a.pv strong {
    width: 100%;
    display: block;
    font-size: 0.9em;
    /* position: absolute; */
    /* top: 10px;  */
    /* left: 0; */
    line-height: 50px;
}

/*
main a.devis em,
main a.pv em {
	width: 100%;
	display: block;
	font-size: 0.7em;
	position: absolute;
	bottom: 10px;
	left: 0;
}
*/
@media screen and (max-width: 1000px) {
    main a.devis,
    main a.pv {
        display: none;
    }
    main a.plus,
    main a.plus2,
    main a.plus3 {
        bottom: 78px;
    }
}

main ul.apps {
    list-style: none;
    margin: 0;
    padding: 0;
    clear: both;
    float: none;
}

main ul.apps li {
    display: block;
    width: 120px;
    float: left;
    text-align: center;
    cursor: pointer;
    margin: 5px;
    padding: 0;
    position: relative;
}

main ul.apps li span {
    display: block;
    width: 120px;
    height: 120px;
    line-height: 100px;
    border-radius: 10px;
    font-size: 3em;
    background: #fff;
}

main ul.apps li a {
    text-decoration: none;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    line-height: 30px;
    height: 30px;
    color: rgba(185, 20, 27, 1.0);
    font-size: 0.8em;
}

@media screen and (max-width: 600px) {
    main ul.apps li {
        width: calc(100% / 3);
        margin: 0;
        padding: 5px;
    }
    main ul.apps li span {
        display: block;
        width: 100%;
        height: 100%;
        vertical-align: middle;
        border-radius: 10px;
        font-size: 3em;
        background: #fff;
    }
}

main form.login {
    background: rgba(185, 20, 27, 1.0);
    width: 500px;
    margin: 0 auto;
    padding: 25px;
    position: relative;
    top: 200px;
}

main form.login p {
    margin: 0;
    padding: 0;
}

main form.login p input[type="text"],
main form.login p input[type="password"] {
    display: block;
    background: #fff;
    width: 100%;
    height: 50px;
    text-align: center;
    border: none;
}

main form.login p input[type="text"] {
    border-radius: 5px 5px 0 0;
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}

main form.login p input[type="password"] {
    border-radius: 0 0 5px 5px;
}

main form.login p input[type="submit"] {
    margin-top: 15px;
    background: #333;
    color: #fff;
    text-align: center;
    width: 100%;
    height: 50px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

@media screen and (max-width: 600px) {
    main form.login {
        background: rgba(185, 20, 27, 1.0);
        width: 90%;
        padding: 30px 25px;
    }
    main form.login p {
        margin: 0;
        padding: 0;
    }
    main form.login p input[type="text"],
    main form.login p input[type="password"] {
        display: block;
        background: #fff;
        width: 100%;
        height: 50px;
        text-align: center;
        border: none;
    }
    main form.login p input[type="text"] {
        border-radius: 5px 5px 0 0;
        border-bottom: solid 1px rgba(0, 0, 0, 0.1);
    }
    main form.login p input[type="password"] {
        border-radius: 0 0 5px 5px;
    }
    main form.login p input[type="submit"] {
        margin-top: 15px;
        background: #333;
        color: #fff;
        text-align: center;
        width: 100%;
        height: 50px;
        border-radius: 5px;
        border: none;
        cursor: pointer;
    }
}

div.content {
    width: 100%;
    overflow: auto;
    float: none;
    clear: both;
}

div#devis01 {
    height: calc(100% - 150px);
}

div#devis02 {
    height: calc(100% - 180px);
}

@media screen and (max-width: 600px) {
    div#devis01 {
        height: calc(100% - 167px);
    }
    div#devis02 {
        height: calc(100% - 197px);
    }
}

main div.pv {
    width: 100%;
    height: calc(100% - 150px);
    overflow: auto;
}

main div.pv article.pv {
    box-sizing: border-box;
    width: 100%;
    height: 80px;
    background: rgba(255, 255, 255, 0.9);
    border-bottom: solid 1px #ccc;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    cursor: pointer;

    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

main div.pv article.pv2 {
    background: rgba(150, 150, 150, 0.3);
}

main div.pv article.pv:hover {
    background: rgba(255, 255, 255, 0.5);
}

main div.pv article.pv div.registre {
    flex: 0 0 auto;
    height: 80px;
    line-height: 80px;
    float: left;
    text-align: center;
}

main p.sub-group {
    text-align: center;
    font-weight: bold;
    border-top: solid 1px;
    border-bottom: solid 1px;
    margin: 0px 0;
}

main div.pv article.pv span.registre {
    width: 80px;
    height: 80px;
    background: url("../images/icons/devis.png") no-repeat;
    display: inline-block;
    background-position: -160 -160;
}

main div.pv article.pv span.extincteurs {
    background-position: 0 0;
}

main div.pv article.pv span.registres {
    background-position: 0 0;
}

main div.pv article.pv span.desenfumages {
    background-position: -160 0;
}

main div.pv article.pv span.baes {
    background-position: -320 0;
}

main div.pv article.pv span.ria {
    background-position: -160 -80;
}

main div.pv article.pv span.formations {
    background-position: -320 -80;
}

main div.pv article.pv span.plans {
    background-position: 0 -160;
}

main div.pv article.pv span.alarmes {
    background-position: 0 -80;
}

main div.pv article.pv span.divers {
    background-position: -160 -160;
}

main div.pv article.pv div.numero {
    flex: 0 0 5%;
    height: 80px;
    line-height: 80px;
    float: left;
    text-align: center;
}

main div.pv article.pv div.infos {
    flex: 1 1 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    height: 80px;
    line-height: 30px;
    float: left;
    overflow: auto;
}

main div.pv article.pv div.infos span {
    flex: 0 0 auto;
    display: block;
    padding: 0.5rem 1rem;
    color: #000;
    background: #ccc;
    font-size: 1em;
    line-height: 1;
    border-radius: 0.5rem;
}

main div.pv article.pv div.infos div.observation {
    flex: 1 1 0;
    font-size: 0.8em;
    font-style: italic;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin-left: 1rem;
}

main div.pv article.pv div.action {
    max-width: 70px;
    flex: 0 0 5%;
    height: 80px;
    line-height: 80px;
    float: left;
    text-align: center;
    flex-grow: 1;
}

main div.pv article.pv div.action a {
    display: block;
    width: 100%;
    height: 80px;
    line-height: 80px;
    text-decoration: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

main div.pv article.pv div.action a.delete {
    color: rgba(185, 20, 27, 1.0);
}

main div.pv article.pv div.action a.delete:hover,
main div.pv article.pv div.action a:hover {
    background: rgba(185, 20, 27, 1.0);
    color: #fff;
}

main div.pv div.clearboth {
    height: 100px;
}

@media screen and (max-width: 1075px) {
    main div.pv article.pv div.registre {
        width: fit-content;
    }
    main div.pv article.pv div.numero {
        width: 10%;
    }
    main div.pv article.pv {
        overflow: hidden;
        height: auto;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
    }
    main div.pv article.pv div.infos {
        width: 45%;
        min-height: 50px;
        overflow: hidden;
        height: auto;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
    }
    main div.pv article.pv div.infos span.option {
        min-height: 10px;
        overflow: hidden;
        height: auto;
    }
    main div.pv article.pv div.action {
        width: 9%;
    }
    main div.pv article.pv div.infos span {
        margin: 3px;
    }
    main div.pv div.clearboth {
        height: 90px;
    }
}

div.bigphoto {
    width: 700px;
    margin: 0 auto;
    height: calc(100% - 80px);
    overflow: auto;
    text-align: center;
}

div.bigphoto img {
    width: 700px;
    height: auto;
    overflow: auto;
    text-align: center;
}

@media screen and (max-width: 700px) {
    div.bigphoto {
        width: 100%;
    }
    div.bigphoto img {
        width: 100%;
    }
}

main article.titres {
    width: 100%;
    height: 30px;
    line-height: 30px;
    background: #333;
    color: #fff;
}

main article.titres div.registre,
main article.titres div.numero,
main article.titres div.infos,
main article.titres div.annee,
main article.titres div.action {
    height: 30px;
    line-height: 30px;
    color: #fff;
}

main article.titres:hover {
    background: #333;
}

@media screen and (max-width: 1080px) {
    main article.pv {
        height: 80px;
    }
    main article.pv div.registre {
        height: 80px;
        line-height: 80px;
        width: 20%;
        font-size: 0.8em;
    }
    main article.pv div.numero {
        width: 20%;
        height: 80px;
        line-height: 80px;
        font-size: 0.8em;
    }
    main article.pv div.infos {
        height: 80px;
        line-height: 80px;
        width: 40%;
    }
    main article.pv div.infos p {
        height: 80px;
        line-height: 80px;
    }
    main article.pv div.action {
        height: 80px;
        line-height: 80px;
        width: 10%;
        text-align: center;
    }

    main article.pvc {
        height: auto;
    }
    main article.pvc div.registre {
        height: auto;
        line-height: auto;
        width: 20%;
        font-size: 0.8em;
    }
    main article.pvc div.numero {
        width: 20%;
        height: auto;
        line-height: auto;
        font-size: 0.8em;
    }
    main article.pvc div.infos {
        height: auto;
        line-height: auto;
        width: 40%;
    }
    main article.pvc div.infos p {
        height: auto;
        line-height: auto;
    }
    main article.pvc div.action {
        height: auto;
        line-height: auto;
        width: 10%;
        text-align: center;
    }

    main article.titres {
        height: 30px;
        line-height: 30px;
    }
    main article.titres div.registre,
    main article.titres div.numero,
    main article.titres div.infos,
    main article.titres div.annee,
    main article.titres div.action {
        height: 30px;
        line-height: 30px;
        color: #fff;
    }
    main article.titres div span {
        display: none;
    }
}

main ul.appmenu {
    width: 100%;
    height: 50px;
    background: #333;
    list-style: none;
    margin: 0;
    padding: 0;
}

main ul.appmenu li {
    display: block;
    margin: 0;
    padding: 0;
    height: 50px;
    float: left;
    overflow: hidden;
}

main ul.appmenu li.home,
main ul.appmenu li.edit {
    width: 50px;
    height: 50px;
    line-height: 50px;
}

main ul.appmenu li.client {
    width: calc(100% - 100px);
    width: calc(100% - 50px);
    height: 50px;
    line-height: 50px;
}

main ul.appmenu li.delete {
    background: rgb(187, 27, 20);;
}

main ul.appmenu li a {
    display: block;
    width: 100%;
    height: 50px;
    color: #fff;
    text-decoration: none;
    text-align: center;
}

main ul.appmenu li a:hover {
    background: rgba(255, 255, 255, 0.3);
}

main ul.appmenu li.client a {
    text-align: left;
    padding: 0 15px;
}

main ul.appmenu li.mode a {
    text-align: center;
    padding: 10px;
    font-size: 0.8em;
}

main ul.appmenu li.search {
    width: calc(100% - 50px);
}

main ul.appmenu li.search form.articles {
    height: 50px;
    line-height: 50px;
    vertical-align: middle;
    padding: 10px 0;
    text-align: center;
}

main ul.appmenu li.search form.articles input[type=text] {
    margin: 0;
    border: none;
    background: #fff;
    height: 30px;
    padding: 5px;
    box-sizing: border-box;
    width: 80%;
}

main ul.appmenu li.search input[type=submit] {
    background: #B9141B;
    width: 30px;
    height: 30px;
    color: #fff;
    margin: 0;
    border: none;
    line-height: 30px;
    cursor: pointer;
}

/* Planning */
main p.date-planning,
main article.week p.date-planning {
    margin: 15px 0 0 0;
    margin: 0;
    padding: 0 10px;
    height: 35px;
    line-height: 35px;
    background: rgba(185, 20, 27, 1.0);
    background: #333;
    color: #fff;
    position: relative;
}

main article.week p.school_holidays {
    margin: 0;
    padding: 0 10px;
    height: 20px;
    line-height: 15px;
    background: rgb(237 240 18);
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    color: #000;
    position: relative;
}

main article.week p.empty_school_holidays {
    margin: 0;
    padding: 0 10px;
    height: 20px;
    line-height: 20px;
    border-top: 1px solid #000;
    color: #fff;
    position: relative;
}

main article.week p.date-planning a.nav {
    background: rgba(187, 20, 27, 1.0);
    color: #fff;
    display: block;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    position: absolute;
    top: 0;
    text-decoration: none;
}

main article.week p.date-planning a.last {
    left: 0;
}

main article.week p.date-planning a.next {
    right: 0;
}

div.planer {
    width: 100%;
    height: calc(100% - 135px);
    overflow-y: auto;
}

main article.mon-planning {
    /* Display the contents in a row. */
    display: flex; flex-direction: row;
    justify-content: flex-start; align-items: stretch;
    margin: 0; padding: 0; overflow: hidden;

    /* Set the style of the box. */
    background: rgba(255, 255, 255, 0.9);
    border-bottom: solid 1px #ccc;

    /* Set the style of the cursor. */
    cursor: pointer;
}

main article.mon-planning div.materiel {
    /* Use all the needed space. */
    flex: 0 0 auto;

    /* Display the contents in a row. */
    display: flex; flex-direction: row;
    justify-content: flex-start; align-items: stretch;
    overflow: hidden;
}

main article.mon-planning span.mini {
    /* Take as much space as needed. */
    flex: 0 0 2rem; width: 2rem;

    /* Display the text in the center. */
    display: flex; flex-direction: row;
    justify-content: center; align-items: center;
    font-size: 0.6em;
}

main article.mon-planning span.stock {
    background: rgb(0, 111, 171);
    color: #fff;
}

main article.mon-planning span.commande {
    background: rgb(171, 0, 111);
    color: #fff;
}

main article.mon-planning span.emplacement {
    background: rgb(0, 171, 111);
}

/* Custom Sonorest */
main article.mon-planning div.om a { color: rgba(50, 50, 150, 1.0); }

main article.mon-planning div.ps a { color: rgba(150, 150, 150, 1.0); }

main article.mon-planning div.cc a { color: rgba(150, 50, 50, 1.0); }

main article.mon-planning div.jb a { color: rgba(150, 150, 50, 1.0); }

main article.mon-planning div.tj a { color: rgba(5, 125, 125, 1.0); }

main article.mon-planning div.sn a, main article.mon-planning div.st a, main article.mon-planning div.sg a { color: rgba(0, 0, 0, 1.0); }

/* Custom omnium */
/*main article.mon-planning div.ah a { color: rgba(50, 50, 150, 1.0); }*/

main article.mon-planning div.db a { color: rgba(150, 150, 150, 1.0); }

main article.mon-planning div.jh a { color: rgba(150, 50, 50, 1.0); }

main article.mon-planning div.sb a { color: rgba(150, 150, 50, 1.0); }

/*main article.mon-planning div.sm a { color: rgba(150, 150, 150, 1.0); }*/

/*main article.mon-planning div.vh a { color: rgba(50, 150, 50, 1.0); } */

main article.mon-planning div.av a { color: rgba(50, 150, 50, 1.0); }

main article.mon-planning div.sm a { color: rgba(215, 83, 162, 1.0); }

main article.mon-planning div.as a { color: rgba(231, 103, 103); }

main article.mon-planning div.ju a { color: rgb(159, 130, 189); }

/** Set the style of the tech initials. */
main article.mon-planning div.tech {
    /* Take as much space as needed. */
    flex: 0 0 auto;

    /* Display the text in the center. */
    display: flex; flex-direction: row;
    justify-content: center; align-items: center;
    margin: 0; padding: 0.25rem 1rem;
}

/** Set the style of the client link. */
main article.mon-planning div.client a {
    /* Clear the decorations. */
    text-decoration: none;
}

main article.mon-planning span.bon {
    font-weight: normal;
    margin-left: 5px;
    color: #000000;
}

main article.mon-planning .horaire,
#planning .technicien .horaire {
    padding: 0.125rem 0.25rem;
    color: #fff;
    background-color: rgba(185, 20, 27, 1.0);
    font-weight: normal;
}

/* Set the style of the client text. */
main article.mon-planning div.client {
    /* Fill the parent. */
    flex: 1 1 0;
}

/* Set the style of the total extinguisher equivalent. */
main article.mon-planning div.total {
    /* Take as much space as needed. */
    flex: 0 0 auto;

    /* Display the text in the center. */
    display: flex; flex-direction: row;
    justify-content: center; align-items: center;
    margin: 0; padding: 0.25rem 1rem;
    width: 5rem;
}

header span#weekNb {
    position: absolute;
    top: 0;
    left: 48%;
    margin-top: 10px;
    font-size: larger;
    font-weight: 500;
}

#Print-JS > div.week > article > div > div > em {
    font-size: 0.8em;
}

main div.multi-day {
    border: solid 1px;
    padding: 5px;
}

main div.multi-day label {
    margin-left: 5px;
    margin-right: 5px;
}

main div.multi-day input {
    width: 8%;
    margin-right: 5px;
}

main span.total-ext {
    margin-left: 5px;
    margin-right: 5px;
    border: solid 1px;
}

main div.multi-l1, div.multi-l2 {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

main div.multi-l2 {
    align-items: center;
}

/* Devis */
main article.clients {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    line-height: 1;
    background: rgba(255, 255, 255, 0.9);
    border-bottom: solid 1px #ccc;
    margin: 0;
    padding: 0;
    overflow: hidden;
    cursor: pointer;

    display: grid;
    grid-template: 60px / 5% 10% 1fr 1fr 20%;
    grid-template-areas: "tech date client registres action-container";
    align-items: center; justify-items: center;
    gap: 0.5rem;
}

main article:hover {
    background: rgba(255, 255, 255, 0.5);
}

main article.clients div.technicien {
    grid-area: tech;
}

main article.clients div.date {
    grid-area: date;
}

main article.clients div.actions-container {
    grid-area: action-container;

    align-self: stretch;

    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
}

main article.clients div.client {
    grid-area: client;
    justify-self: start;
}

main article.clients div.label-registres {
    grid-area: registres;
    justify-self: start;

    display: flex; flex-direction: row;
    justify-content: flex-start; align-items: center;
    gap: 0.5rem; flex-wrap: wrap;
    padding: 0.25rem 0;
}

main article.clients div.label-registres span.registre {
    background-color: #ddd;
    color: #000;
    font-weight: bold;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
}

main article.clients div.client strong {
    display: block;
}

main article.clients div.action a {
    display: grid; align-items: center; justify-items: center;
    justify-self: stretch;
}

main article.clients div.action a {
    text-decoration: none;
    width: 60px; height: 60px;
    display: flex;
    align-items: center; justify-content: center;
    margin: 0;
    padding: 0;
    text-align: center;
}

main article.clients div.action a.delete {
    color: rgba(185, 20, 27, 1.0);
}

main article.clients div.action:hover {
    background: rgba(185, 20, 27, 1.0);
    color: #fff;
}

main article.clients div.action:hover a.delete,
main article.clients div.action:hover a {
    color: #fff;
}

@media screen and (max-width: 1024px) {
    main article.clients {
        grid-template: 40px max-content / 12rem 1fr auto;
        grid-template-areas: "tech client action-container" "date registres action-container";
    }

    main article.clients div.action a {
        width: 40px; height: 100%;
    }

    /*main article.clients div.date {*/
    /*    width: 15%;*/
    /*    font-size: 0.7em;*/
    /*}*/
    /*main article.clients div.client {*/
    /*    width: 50%;*/
    /*    padding: 0px;*/
    /*    overflow: hidden;*/
    /*}*/
    /*main article.clients div.actions-container {*/
    /*    width: unset;*/
    /*    float: none;*/
    /*}*/
    main article.clients div.coords,
    main article.clients div.adresse,
    main article.clients div.no-tech {
        display: none;
    }
}

main form ul.details_client {
    list-style: none;
    display: flex; flex-direction: column;
    justify-content: flex-start; align-items: stretch;
    gap: 4px; padding: 0; margin: 0;
}

main form ul.details_client li {
    flex: 0 0 auto;
    min-height: 50px;
    display: flex; flex-direction: row;
    justify-content: flex-start; align-items: flex-start;
    gap: 1rem; padding: 0; margin: 0;
}

main form ul.details_client li .label {
    flex: 0 0 150px;
}

main form ul.details_client li .value {
    flex: 1 1 0;
    font-weight: bold;
}

main form ul.details_client li .line {
    flex: 1 1 0;
}

main div.observations {
    background: #eee;
    margin: 10px 0;
    padding: 5px 10px;
}

div.registres {
    width: 100%;
    height: 50px;
    overflow-y: hidden;
    overflow-x: auto;
}

div.registres ul {
    width: max-content;
    height: 50px;
    list-style: none;
    margin: 0;
    padding: 0;
}

div.registres ul li {
    width: 125px;
    height: 50px;
    float: left;
}

div.registres ul li a {
    display: block;
    background: rgba(185, 20, 27, 0.7);
    width: 100%;
    height: 50px;
    line-height: 50px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    font-size: 0.8em;
}

div.registres ul li a:hover,
div.registres ul li a.selected {
    display: block;
    background: rgba(185, 20, 27, 1);
    width: 100%;
    height: 50px;
    line-height: 50px;
    color: #fff;
    text-decoration: none;
    text-align: center;
}

div.registres ul li a.empty {
    background: #ccc;
    color: #727272;
}

@media screen and (max-width: 1000px) {
    div.registres {
        position: fixed;
        bottom: 0;
        left: 0;
    }
}

@media screen and (min-width: 1000px) {
    div.registres {
        height: 50px;
    }
    div.registres ul {
        width: 100%;
    }
    div.registres ul li {
        width: calc(100% / 9);
    }
    div.registres ul li a {
        font-size: 1.0em;
    }
}

main#planning form#typeEvent {
    margin-bottom: 0px;
}

form#typeEvent select#type-inter {
    position: absolute;
    top: 90;
    left: 2;
    z-index: 50;
    background: white;
}

div.plan-mode {
    width: 100%;
    height: 50px;
    overflow-y: hidden;
    overflow-x: auto;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
}

div.plan-mode ul.registres {
    width: 100%;
    height: 50px;
    list-style: none;
    display: flex; flex-direction: row;
    justify-content: flex-start; align-items: stretch;
    margin: 0; padding: 0; gap: 0;
}

div.plan-mode ul.registres li {
    flex: 1 1 0;
}

@media screen and (max-width: 980px) {
    div.plan-mode ul.registres li.hidden {
        display: none;
    }
    div.plan-mode ul.registres li {
        width: calc(100% / 3);
    }
}

div.plan-mode ul li a {
    display: block;
    background: rgba(185, 20, 27, 1.0);
    width: 100%;
    height: 50px;
    line-height: 50px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    font-size: 0.8em;
    border-top: solid 1px rgba(185, 20, 27, 1.0);
}

div.plan-mode ul li a:hover,
div.plan-mode ul li a.selected {
    display: block;
    background: rgb(248, 249, 250);
    width: 100%;
    height: 50px;
    line-height: 50px;
    color: rgba(185, 20, 27, 1.0);
    text-decoration: none;
    text-align: center;
}

form label.checkbox,
form a.checkbox {
    display: inline-block;
    background: #ddd;
    margin: 5px 5px 0 0;
    padding: 0 25px;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    height: 40px;
    line-height: 40px;
}

.checkbox__radio { display: none; }

form a.checkbox span {
    margin: 0 5px;
}

form a.checked, form label.checked, form input:checked + label {
    background: rgba(185, 20, 27, 1.0);
    color: #fff;
}

/* Articles */
h3 {
    margin: 0;
    padding: 0;
}

p.boutons a.boutons {
    text-decoration: none;
    margin: 0 10px;
}

p.boutons a.delete {
    color: rgba(185, 20, 27, 1.0);
}

/* Liste des articles */
main div.articles {
    width: 100%;
    height: calc(100% - 130px);
    overflow: auto;
}

main article.articles {
    width: 100%;
    height: 50px;
    line-height: 50px;
    background: rgba(255, 255, 255, 0.9);
    margin: 0 auto;
    padding: 0 5px;
    overflow: hidden;
    cursor: pointer;
    border-bottom: solid 1px #ccc;
}

main article.titre {
    background: #B9141B;
    border: none;
    height: 30px;
    line-height: 30px;
}

main article.titre div a {
    color: #fff;
    height: 30px;
    line-height: 30px;
}

main article.articles div.code {
    width: 10%;
    height: 50px;
    line-height: 50px;
    float: left;
}

main article.articles div.libelle {
    width: 45%;
    height: 50px;
    line-height: 50px;
    float: left;
}

main article.articles div.categorie {
    width: 20%;
    height: 50px;
    line-height: 50px;
    float: left;
}

main article.articles div.action {
    width: 5%;
    height: 50px;
    line-height: 50px;
    float: left;
    text-align: center;
}

main article.articles div.action a {
    text-decoration: none;
}

main article.articles div.action a.delete {
    color: rgba(185, 20, 27, 1.0);
}

@media screen and (max-width: 980px) {
    main article.articles div.code {
        width: 15%;
    }
    main article.articles div.libelle {
        width: 75%;
    }
    main article.articles div.categorie {
        display: none;
    }
    main article.articles div.action {
        width: 10%;
    }
}

main article.chart {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    background: rgba(255, 255, 255, 0.9);
    border: 0;
    /* border-bottom: solid 1px #ccc; */
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    border: dotted 1px rgba(0, 0, 0, 0.1);
}

main article.chart:hover {
    background: rgba(255, 255, 255, 0.5);
}

main article.chart div {
    vertical-align: middle;
}

main article.chart div.code {
    width: 10%;
    height: auto;
    float: left;
    font-weight: bold;
    border: 0;
}

main article.chart div.article {
    width: 60%;
    height: auto;
    float: left;
    padding: 3px 5px;
    border: 0;
}

main article.chart div.article p {
    padding: 0;
    margin: 0;
}

main article.chart div.prix {
    width: 15%;
    height: auto;
    float: left;
    text-align: center;
    text-align: right;
    border: 0;
}

main article.chart div.qte {
    width: 5%;
    height: auto;
    float: left;
    text-align: center;
    border: 0;
}

main article.chart div.action {
    width: 5%;
    height: auto;
    float: left;
    text-align: center;
    font-size: 1.3em;
    vertical-align: top;
}

main article.chart div.action a {
    text-decoration: none;
    display: block;
}

main article.chart div.action a.delete {
    color: rgba(185, 20, 27, 1.0);
}

@media screen and (max-width: 680px) {
    main article.chart div.code {
        width: 20%;
        font-size: 0.8em;
    }
    main article.chart div.article {
        width: 50%;
        font-size: 0.9em;
    }
    main article.chart div.qte {
        width: 10%;
        font-size: 0.8em;
    }
    main article.chart div.action {
        width: 10%;
    }
    main article.chart div.prix {
        display: none;
        font-size: 0.8em;
    }
}

main ul.bandeau {
    width: 100%;
    height: 30px;
    background: rgb(185, 20, 27);
    list-style: none;
    margin: 0;
    padding: 0;
}

main ul.bandeau li {
    width: auto;
    height: 30px;
    line-height: 30px;
    margin: 0;
    padding: 0;
    float: left;
}

main ul.bandeau li a {
    display: block;
    width: 100%;
    height: 30px;
    line-height: 30px;
    margin: 0;
    padding: 0;
    color: #fff;
    text-decoration: none;
    font-weight: bolder;
}

main ul.bandeau li a span {
    margin: 0 5px;
}

main form.form {
    display: block;
    width: 700px;
    height: calc(100% - 101px);
    margin: 0 auto;
    padding: 15px;
    background: #fff;
    overflow: auto;
}

main form.form div.resultats {
    width: 100%;
    height: 140px;
    overflow: auto;
    border: solid 1px #333;
    margin: 0;
}

main form.form div.resultats p {
    margin: 0;
    padding: 5px 10px;
    line-height: 20px;
    cursor: pointer;
    border: dotted 1px #ccc;
}

main form.form div.resultats p.checked {
    background: rgb(185, 20, 27);
    color: #fff;
}

main form div.valid {
    display: block;
    width: 100%;
    margin: 15px 0;
    padding: 10px;
    color: #fff;
    background: rgb(20, 185, 27);
}

main form div.error {
    display: block;
    width: 100%;
    margin: 15px 0;
    padding: 10px;
    color: #fff;
    background: rgb(185, 20, 27);
}

main form div.alert {
    display: block;
    width: 100%;
    margin: 15px 0;
    padding: 10px;
    color: #333;
    background: #fff;
    border: solid 1px rgb(185, 20, 27);
}

main form div.valid span,
main form div.error span,
main form div.alert span {
    display: block;
    width: 30px;
    float: left;
}

main form div.msg div.icomoon {
    display: inline-block;
    width: 80px;
    height: 80px;
    line-height: 80px;
    vertical-align: top;
    padding: 0 15px;
    font-size: 2.5em;
}

main form div.alert div.icomoon {
    color: rgb(185, 20, 27);
}

main form div.msg div.texte {
    display: inline-block;
    width: auto;
    padding: 0 15px;
}

main form p {
    float: none;
    clear: both;
    margin: 15px 0;
    padding: 0;
}

main form p label {
    display: block;
    width: 100%;
    font-size: 1.3em;
    color: #333;
}

main form p input[type="text"],
main form p input[type="number"],
main form p input[type="date"],
main form p select {
    width: 100%;
    border: solid 1px #333;
    padding: 5px;
    font-size: 1.3em;
}

main form p textarea {
    width: 100%;
    height: 150px;
    border: solid 1px #333;
    padding: 5px;
    font-size: 1.2em;
}

main form p input[type="button"],
main form p .submit,
main form p input[type="submit"] {
    width: 100px;
    border: 0;
    background: #333;
    color: #fff;
    display: block;
    margin: 0 auto;
    cursor: pointer;
    float: left;
    text-decoration: none;
    padding: 5px;
    text-align: center;
    font-size: 1.3em;
}

main form p.obligatoire, main form label.obligatoire, main form p.obligatoire label {
    color: rgba(185, 20, 27, 1.0);
}

main form p.obligatoire input {
    border: solid 2px rgba(185, 20, 27, 1.0);
}

main form.form a.format.hidden {
    display: none
}

@media screen and (max-width: 700px) {
    main form,
    main form.form {
        width: 100%;
        padding: 15px;
    }
    main form p label,
    main form p select,
    main form p textarea,
    main form p input[type=text] {
        width: 100%;
        display: block;
    }
}

@media screen and (max-width: 1000px) {
    ul.acces_semaines {
        display: none;
    }
}

/*** USERS  ***/
main article.users {
    box-sizing: border-box;
    width: 100%;
    height: 80px;
    line-height: 80px;
    background: rgba(255, 255, 255, 0.9);
    border-bottom: solid 1px #ccc;
    margin: 0 auto;
    padding: 0 5px;
    overflow: hidden;
    cursor: pointer;
}

main article.users div.user {
    width: calc(100% - 80px);
    height: 80px;
    line-height: 80px;
    float: left;
}

main article.users div.user span.img {
    width: 70px;
    height: 70px;
    line-height: 70px;
    float: left;
    border-radius: 35px;
    overflow: hidden;
    margin: 5px;
    text-align: center;
    font-size: 1.5em;
    font-family: "Courier new";
    background: #dbdbdb;
    font-weight: bolder;
}

main article.users div.nom em {
    color: rgb(185, 20, 27);
    margin: 0 15px;
}

main article.users div.action {
    width: 80px;
    height: 80px;
    line-height: 80px;
    float: left;
    text-align: center;
}

main article.users div.action a {
    text-decoration: none;
    display: block;
    width: 80px;
    height: 80px;
}

main article.users div.action a.tel {
    background: rgb(185, 20, 27);
    color: #fff;
}

main article.users div.action a.delete {
    color: rgb(185, 20, 27);
}

main article.user {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    border-bottom: solid 1px #ccc;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

main article.user div.photo {
    display: flex;
    align-items: center;
    width: 100%;
    height: 150px;
    overflow: hidden;
    background: #dbdbdb;
    text-align: center;
    justify-content: center;
    font-size: 3.5em;
    font-family: "Courier new";
    font-weight: bolder;
}

main article.user div.photo img {
    cursor: pointer;
}

main article.user ul.infos {
    width: 100%;
    height: auto;
    list-style: none;
    margin: 0;
    padding: 0;
}

main article.user ul.infos li {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 10px;
}

main article.user ul.infos li em {
    display: block;
    color: #777;
}

main article.user ul.infos li strong {
    display: block;
    color: #b81218;
}

main article.user ul.infos li a {
    color: #b81218;
    text-decoration: none;
}

main div#canvas-container {
    width: 600px;
    height: 400px;
}

main div#canvas-container canvas {
    border: ridge;
    margin-left: 5%;
}

main form#user-sign button#undo, button#redo {
    float: right;
}

main form#user-sign button#redo {
    margin-right: 5px;
}

main form.intervention {
    display: block;
    width: 700px;
    height: calc(100% - 80px);
    margin: 0 auto;
    padding: 15px;
    background: #fff;
    overflow: auto;
}

main form.intervention a.edit {
    color: rgba(185, 20, 27, 1.0);
    text-decoration: none;
}

main form.intervention p.tech {
    font-size: 2em;
    line-height: 25px;
    text-align: center;
}

main form.intervention p.tech a {
    font-size: 0.5em;
}

main form.intervention p.tech span {
    margin: 0 5px 0 0;
}

main form.intervention p#ah { color: rgba(50, 50, 150, 1.0); }

main form.intervention p#jh { color: rgba(185, 20, 27, 1.0); }

main form.intervention p#vh { color: rgba(50, 150, 50, 1.0); }

main form.intervention p#sb { color: rgba(150, 150, 50, 1.0); }

main form p.client {
    text-align: center;
    border-bottom: solid 1px #333;
    margin: 0;
    padding: 0;
}

main form.intervention p.date {
    text-align: center;
    margin: 0;
    padding: 0;
    background: rgba(50, 150, 50, 0.3);
}

main form.intervention div.intervention div.adresse {
    cursor: pointer;
    height: 100px;
}

main form.intervention div.intervention div.adresse div.gmap {
    width: 100px;
    height: 100px;
    text-align: center;
    float: left;
}

main form.intervention div.intervention div.adresse div.gmap a {
    line-height: 100px;
    text-decoration: none;
    color: rgba(185, 20, 27, 1.0);
    font-size: 1.5em;
}

main form.intervention div.intervention div.adresse div.adresse {
    width: calc(100% - 150px);
    height: 100px;
    float: left;
    padding: 25px 5px;
}

main form.intervention div.intervention div.adresse div.edit {
    width: 50px;
    height: 100px;
    line-height: 100px;
    float: left;
    text-align: center;
}

main form.intervention div.intervention p.contact span,
main form.intervention div.intervention p.contact strong {
    display: inline-block;
    padding: 0 10px 0 0;
    text-align: center;
}

main form.intervention div.intervention p.contact a {
    display: inline-block;
    margin: 2px 5px 2px 0;
    padding: 5px;
    background: rgba(185, 20, 27, 1.0);
    text-decoration: none;
    color: #fff;
}

main form ul.details {
    list-style: none;
    margin: 0;
    padding: 0;
}

main form ul.details li {
    border-bottom: dotted 1px rgba(0, 0, 0, .5);
    height: 35px;
    line-height: 35px;
}

main form ul.details li span {
    display: block;
    width: 50%;
    height: 35px;
    line-height: 35px;
    float: left;
    overflow: hidden;
}

main form ul.details li strong {
    display: block;
    width: 50%;
    height: 35px;
    line-height: 35px;
    text-align: right;
    float: left;
    overflow: hidden;
}

main form.intervention div.intervention ul.details li strong a.icomoon {
    color: rgb(187, 20, 27);
    text-decoration: none;
}

main a.help-icon {
    color: rgb(187, 20, 27);
    text-decoration: none;
}

main article.intervention {
    display: block;
    width: 700px;
    height: calc(100% - 130px);
    margin: 0 auto;
    padding: 15px;
    background: #fff;
    overflow: auto;
}

main article.intervention a.edit {
    color: rgba(185, 20, 27, 1.0);
    text-decoration: none;
}

main article.intervention p.tech {
    font-size: 2em;
    line-height: 25px;
    text-align: center;
}

main article.intervention p.tech a {
    font-size: 0.5em;
}

main article.intervention p.tech span {
    margin: 0 5px 0 0;
}

main article.intervention p#ah { color: rgba(50, 50, 150, 1.0); }

main article.intervention p#jh { color: rgba(185, 20, 27, 1.0); }

main article.intervention p#vh { color: rgba(50, 150, 50, 1.0); }

main article.intervention p#sb { color: rgba(150, 150, 50, 1.0); }

main article.intervention p.client {
    text-align: center;
    border-bottom: solid 1px #333;
    margin: 0;
    padding: 0;
}

main article.intervention p.date {
    text-align: center;
    margin: 0;
    padding: 0;
    background: rgba(50, 150, 50, 0.3);
}

main article.intervention p.edition {
    text-align: left;
    font-size: 13px;
    font-style: oblique;
}

main article.intervention div.intervention div.adresse {
    cursor: pointer;
    height: 100px;
}

main article.intervention div.intervention div.adresse div.gmap {
    width: 100px;
    height: 100px;
    text-align: center;
    float: left;
}

main article.intervention div.intervention div.adresse div.gmap a {
    line-height: 100px;
    text-decoration: none;
    color: rgba(185, 20, 27, 1.0);
    font-size: 1.5em;
}

main article.intervention div.intervention div.adresse div.adresse {
    width: calc(100% - 150px);
    height: 100px;
    float: left;
    padding: 25px 5px;
}

main article.intervention div.intervention div.adresse div.edit {
    width: 50px;
    height: 100px;
    line-height: 100px;
    float: left;
    text-align: center;
}

main article.intervention div.intervention p.contact span,
main article.intervention div.intervention p.contact strong {
    display: inline-block;
    padding: 0 10px 0 0;
    text-align: center;
}

main article.intervention span.text {
    margin-right: 5px;
}

main article.intervention div.intervention p.contact a {
    display: inline-block;
    margin: 2px 5px 2px 0;
    padding: 5px;
    background: rgba(185, 20, 27, 1.0);
    text-decoration: none;
    color: #fff;
}

main article.intervention div.intervention div.switch-div {
    background: rgba(185, 20, 27, 1.0);
    display: flex;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 5;
}

main article.intervention div.intervention span.content {
    margin: 2px 5px 2px 0;
    padding: 5px;
    text-decoration: none;
    color: #fff;
    border: none;
    text-align: start;
    font-weight: bold;
    flex: 1;
}

main article.intervention div.intervention span.arrow {
    float: right;
    margin-right: 10;
    align-self: center;
    color: white;
}

main article.intervention div.intervention span.old {
    color: rgba(185, 20, 27, 1.0);
    cursor: pointer;
}

main article.intervention div.intervention ul.details {
    list-style: none;
    margin: 0;
    padding: 0;
}

main form ul.order-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

main form .grabbable {
    cursor: move;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

main form .grabbable:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

main article.intervention div.intervention ul.list-details {
    list-style: none;
    padding-left: 0;
}

main article.intervention div.intervention li.row-details {
    display: flex;
}

main article.intervention div.intervention span.help-icon {
    width: 4%;
    margin-right: 5px;
}

main article.intervention div.intervention ul.list-details li span.code {
    width: 15%;

}

main article.intervention div.intervention ul.list-details li span.title {
    font-weight: bold;
    width: 70%;
}

main article.intervention div.intervention ul.list-details li span.qty {
    margin-left: auto;
}

main article.intervention div.intervention ul.details li {
    border-bottom: dotted 1px rgba(0, 0, 0, .5);
    height: 35px;
    line-height: 35px;
}

main article.intervention div.intervention ul.details li span {
    display: block;
    width: 50%;
    height: 35px;
    line-height: 35px;
    float: left;
    overflow: hidden;
}

main article.intervention div.intervention ul.details li strong {
    display: block;
    width: 50%;
    height: 35px;
    line-height: 35px;
    text-align: right;
    float: left;
    overflow: hidden;
}

main article.intervention div.intervention ul.details li strong a.icomoon {
    color: rgb(187, 20, 27);
    text-decoration: none;
}

body#global {
    display: flex; flex-direction: column;
    justify-content: flex-start; align-items: stretch;
    gap: 0; padding: 0; margin: 0;
    height: calc(100% - 50px);
}

body#global #planning {
    flex: 1 1 0;
    display: flex; flex-direction: column;
    justify-content: flex-start; align-items: stretch;
}

main div.global {
    flex: 1 1 0;
    overflow: auto;
    display: flex; flex-direction: row;
    justify-content: flex-start; align-items: stretch;
}

main div.dude {
    display: flex; flex-direction: column;
    justify-content: flex-start; align-items: stretch;
    width: 20px;
}

main div.dude .tech {
    flex: 2 2 0;
}

main div.dude .tech.small {
    flex: 1 1 0;
}

main div.dude span {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    border-top: solid 1px #ff0;
    text-align: center;
    background: #333;
    font-weight: bold;
    color: #ff0;
    height: 100px;
}

main div.week {
    width: calc(100% - 20px);
    float: left;
    display: flex; flex-direction: row;
    justify-content: flex-start; align-items: stretch;
}

main div.week article.week {
    display: flex; flex-direction: column;
    justify-content: flex-start; align-items: stretch;
    width: 20%;
    float: left;

}

main div.week article.week div.technicien {
    flex: 2 2 0;
}

main div.week article.week div.technicien.small {
    flex: 1 1 0;
}

main p.date-planning,
main article.week p.date-planning {
    text-align: center;
}

main div.week article.week div {
    border: solid 1px #333;

    height: 100px;
}

main div.week article.week div.ah,
main div.week article.week div.jh,
main div.week article.week div.sb,
main div.week article.week div.vh,
main div.week article.week div.tj {
    border: solid 1px #333;
    overflow: auto;
    position: relative;
}

main div.week article.week div.db,
main div.week article.week div.st,
main div.week article.week div.sm {
    border: solid 1px #333;
    overflow: auto;
    position: relative;
}

main div.week article.week .ju { background: rgba(159, 130, 189, 0.2); }

main div.week article.week .sm { background: rgba(215, 83, 162, 0.3); }

main div.week article.week .as { background: rgba(231, 103, 103, 0.25); }

main div.week article.week .jh { background: rgba(185, 20, 27, 0.3); }

main div.week article.week .sb { background: rgba(150, 150, 50, 0.3); }

main div.week article.week .av { background: rgba(50, 150, 50, 0.3); }

main div.week article.week .tj { background: rgba(123, 250, 250, 0.3); }

main div.week article.week .so, main div.week article.week .db { background: rgba(255, 255, 255); }

main div.week article.week .om { background: rgba(50, 50, 150, 0.3); }

main div.week article.week .ps { background: rgba(185, 20, 27, 0.3); }

main div.week article.week .cc { background: rgba(185, 20, 27, 0.3); }

main div.week article.week .jb { background: rgba(150, 150, 50, 0.3); }

main div.week article.week .cb { background: rgba(50, 150, 50, 0.3); }

main div.week article.week .st { background: rgba(200, 200, 200, 0.4); }

main div.week article.week .sg { background: rgba(200, 200, 200, 0.6); }

main div.week article.week .cf { background: rgba(185, 97, 20, 0.3); }

main div.week article.week .ah a, main div.week article.week .om a { color: rgb(50, 50, 150); }

main div.week article.week .jh a, main div.week article.week .ps a, main div.week article.week .cc a { color: rgb(185, 20, 27); }

main div.week article.week .sb a, main div.week article.week .jb a { color: rgb(150, 150, 50); }

main div.week article.week .vh a { color: rgb(50, 150, 50); }

main div.week article.week .cb a { color: rgb(50, 150, 50); }

main div.week article.week .tj a { color: rgb(5, 125, 125); }

main div.week article.week .ju a { color: rgb(159, 130, 189); }

main div.week article.week .cf a { color: rgb(120, 101, 82); }

main div.week article.week .so a, main div.week article.week .db a, main div.week article.week .st a,
main div.week article.week .sg a { color: rgb(0, 0, 0); }

main div.week article.week div.technicien ul.intervention {
    width: 100%;
    height: calc(100% - 25px);
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    display: block;
    overflow: auto;
    z-index: 10;
}

main div.week article.week div.technicien ul.intervention li {
    border-bottom: dotted 1px rgba(0, 0, 0, .5);
    height: 25px;
    line-height: 25px;
    padding: 2px;
    overflow: hidden;
    cursor: pointer;
    font-size: 0.8em;
}

main div.week article.week div.technicien ul.intervention li a.client {
    display: inline;
    text-decoration: none;
}

main div.week article.week div.technicien ul.intervention li a.code {
    display: none;
}

main div.week article.week div.technicien ul.intervention li strong {
    display: block;
    width: calc(100% - 110px);
    float: left;
}

main div.week article.week div.technicien ul.intervention li span.mini {
    display: block;
    width: 15px;
    height: 25px;
    float: left;
    text-align: center;
    padding: 0;
    margin: 0;
    font-size: 0.6em;
    color: #000;
}

main div.week article.week div.technicien ul.intervention li span.doc {
    background: orange;
}

main div.week article.week div.technicien ul.intervention li span.ap {
    background: yellow;
}

main div.week article.week div.technicien ul.intervention li span.rv {
    background: rgb(70, 230, 240);
}

main div.week article.week div.technicien ul.intervention li span.facturation {
    background: #8efa00;
}

main div.planer span.ap {
    background: yellow;
}

main div.planer span.doc {
    background: orange;
}

main div.planer span.rv {
    background: rgb(70, 230, 240);
}

main div.planer span.facturation {
    background: #8efa00;
}

main div.week article.week div.technicien ul.intervention li span.stock {
    background: rgb(0, 111, 171);
    color: #fff;
}

main div.week article.week div.technicien ul.intervention li span.commande {
    background: rgb(171, 0, 111);
    color: #fff;
}

main div.week article.week div.technicien ul.intervention li span.emplacement {
    background: rgb(0, 171, 111);
}

main div.week article.week div.technicien ul.intervention li span.total {
    display: block;
    width: 35px;
    float: left;
    text-align: right;
    padding: 0 2px;
    background: rgb(255, 255, 255);
}

main div.week article.week div.technicien div.total {
    width: 100%;
    height: 25px;
    background: #333;
    color: #fff;
    left: 0;
    bottom: 0;
    position: relative;
}

main div.week article.week div.technicien div.total span {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    text-align: right;
    padding: 0 2px;
    z-index: 20;
}

@media screen and (max-width: 700px) {
    main article.intervention,
    main form.intervention {
        width: 100%;
        padding: 15px;
    }
}

ul.list-techniciens {
    width: 100%;
    height: 35px;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
}

ul.list-techniciens li {
    flex-grow: 1;
    height: 35px;
    float: left;
}

/* Custom Omniul */
ul.list-techniciens li.all { background: rgb(0, 0, 0);}

ul.list-techniciens li.db { background: rgb(150, 150, 150);}

ul.list-techniciens li.sm { background: rgb(215, 83, 162); }

ul.list-techniciens li.as { background: rgba(231, 103, 103); }

ul.list-techniciens li.jh { background: rgb(150, 50, 50);}

ul.list-techniciens li.sb { background: rgb(150, 150, 50); }

ul.list-techniciens li.vh { background: rgb(50, 150, 50); }

ul.list-techniciens li.tj { background: rgb(5, 125, 125); }

ul.list-techniciens li.so { background: rgb(0, 0, 0); }

ul.list-techniciens li.av { background: rgba(50, 150, 50, 1.0); }

ul.list-techniciens li.ju { background: rgb(159, 130, 189); }

ul.list-techniciens li.cf { background: rgb(120, 101, 82); }

/* Custom sonorest */
ul.list-techniciens li.om { background: rgb(50, 50, 150);}

ul.list-techniciens li.ps { background: rgb(185, 20, 27);}

ul.list-techniciens li.cc { background: rgb(185, 20, 27);}

ul.list-techniciens li.jb { background: rgb(150, 150, 50); }

ul.list-techniciens li.cb { background: rgb(50, 150, 50); }

ul.list-techniciens li.st { background: rgba(200, 200, 200, 0.4); }

ul.list-techniciens li.sg { background: rgba(200, 200, 200, 0.9); }

ul.list-techniciens li a {
    display: block;
    width: 100%;
    height: 35px;
    line-height: 35px;
    text-align: center;
    text-decoration: none;
    color: #fff;
}

ul.list-techniciens li.sn a, ul.list-techniciens li.st a, ul.list-techniciens li.sg a { color: #000;}

div.preview {
    background: #efefef;
    padding: 25px;
}

div.photos div.photo {
    width: 100px;
    height: 100px;
    line-height: 100px;
    vertical-align: middle;
    margin: 5px;
    padding: 5px;
    position: relative;
    float: left;
    text-align: center;
}

div.photos div.photo a.photo {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    border: none;
}

div.photos div.photo a.icomoon {
    text-decoration: none;
    border: none;
    position: absolute;
    line-height: 20px;
    top: 5px;
    right: 7px;
    color: #fff;
    text-shadow: 0 0 2px rgb(187, 20, 27);
}

div.photos div.photo a.icomoon:hover {
    position: absolute;
    top: 5px;
    right: 7px;
    color: rgb(187, 20, 27);
    text-shadow: 0 0 2px rgb(187, 20, 27);
}

/* article.user { */
/* width: 100%; */
/* } */
/* article.user div.id { */
/* width: 10%; */
/* } */
/* article.user div.photo { */
/* width: 30%; */
/* margin: 0; */
/* padding: 0 5px; */
/* } */
/* article.user div.nom { */
/* width: 50%; */
/* } */
/* article.user div.action { */
/* width: 10%; */
/* } */

fieldset {
    border: dotted 1px #aaa;
    border: dotted 1px #A01;
    margin: 10px 0;
}

fieldset legend {
    background: #555;
    background: #a01;
    color: #fff;
    margin: 0;
    padding: 2px 10px;
    font-weight: bold;
}

a.zaqtiv {
    text-decoration: none;
    color: rgb(187, 20, 27);
    font-size: 1.2em;
    margin-right: 5px;
}

.existing_RTT.datepick-selected {
    background-color: rgba(177, 174, 0, 0.479) !important;;
}

/*Rapports*/
article.rapport {
    box-sizing: border-box;
    width: 100%;
    height: 80px;
    line-height: 80px;
    background: rgba(255, 255, 255, 0.9);
    border-bottom: solid 1px #ccc;
    margin: 0;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
}

article.rapport div {
    display: inline-block;
}

article.rapport div.tech {
    width: 80px;
    height: 80px;
    font-style: italic;
    text-align: center;
}

article.rapport div.client {
    width: calc(100% - 482px);
    height: 80px;
}

article.rapport div.client span {
    color: rgba(185, 20, 27, 1.0);
}

article.rapport div.date {
    width: 120px;
    height: 80px;
    font-style: italic;
    text-align: center;
}

article.rapport div.category {
    width: 100px;
    height: 80px;
    text-align: center;
}

article.rapport div.action {
    width: 80px;
    height: 80px;
    text-align: center;
}

article.rapport div.action a {
    display: block;
    width: 80px;
    height: 80px;
    text-decoration: none;
}

article.rapport div.action a.delete {
    background: rgba(185, 20, 27, 1.0);
    color: #fff;
}

main#rapport div.header {
    width: 100%;
    height: 30px;
    background: #333;
    color: #fff;
}

main#rapport div.header a {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-decoration: none;
    text-align: center;
    color: #fff;
}

main#rapport form.form {
    width: 50%;
    height: calc(100% - 80px);
    margin: 0;
    float: left;
}

main#rapport iframe {
    width: 50%;
    height: calc(100% - 80px);
    margin: 0;
    float: left;
}

form.location {
    display: none;
}

article.probleme {
    background: rgb(255, 201, 14) !important;
}

article.amelioration {
    background-color: rgba(200, 150, 250, 0.25) !important;
}

article.wiki {
    background: #359dd1 !important;
}

li.probleme {
    background: rgb(255, 201, 14) !important;
}

li.amelioration {
    background-color: rgba(200, 150, 250, 0.25) !important;
}

li.wiki {
    background: #359dd1 !important;
}

main#rapport div.switch-div {
    display: flex;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 5;
}

main#rapport span#arrow {
    margin-left: auto;
}

main#rapport canvas {
    border: groove;
}

main#rapport div.hidable.disabled {
    cursor: not-allowed;
    pointer-events: none;
}

main article.user ul.infos li div.disabled {
    cursor: not-allowed;
    pointer-events: none;
}

main#rapport div.canvas-control {
    display: flex;
}

main#rapport div#valid-btns {
    margin-left: auto;
}

main#rapport div.canvas-control button {
    border-radius: 5px;
}

main#rapport div#diametre-prises {
    row-gap: 5px;
    display: flex;
    flex-direction: column;
}

main#rapport div.line.norm {
    display: flex;
    flex-directiion: row;
}

main#rapport div.line.norm label {
    flex: 1;
}

main#rapport div.line.norm input {
    flex: 1;
}

main#rapport div.line.norm span.old {
    flex: 1;
}

.slidecontainer {
    width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider {
    -webkit-appearance: none; /* Override default CSS styles */
    appearance: none;
    width: 100%; /* Full-width */
    height: 25px; /* Specified height */
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
    margin-top: 3px;
    margin-bottom: 3px;
}

/* Mouse-over effects */
.slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #04AA6D; /* Green background */
    cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #04AA6D; /* Green background */
    cursor: pointer; /* Cursor on hover */
}

/* PDF  */
main#rapport div#page {
    width: 21cm;
    height: 29.7cm;
    margin-left: auto;
    margin-right: auto;
}

main#rapport div#page div.rapport-info.container#systeme-de-prot {
    text-align: center;
}

main#rapport div#page div.main-info {
    width: 60%
}

main#rapport div#page div#suite-a-options {
    display: flex;
    flex-direction: column;
    padding-left: 0.5cm;
}

main#rapport div#page div.rapport-info.container span:not(.lbl) {
    color: unset;
    font-weight: normal;
    font-style: italic;
}

main#rapport div#page canvas.no-border {
    border: none;
}

main#rapport div#page div#signature-div {
    transform: scale(0.3);
    transform-origin: 0 0;
}

main#rapport div#page div.contact-info p {
    margin: 0;
}

main#rapport div.footer {
    color: #045fb4;
    display: flex;
    flex-direction: column;
    font-size: x-small;
    align-items: center;
    margin-top: 7mm;
}

/*
main#rapport div.header{
	display: flex;
	justify-content: space-between;
}
main#rapport div.header div#foudre-logo{
	display: flex;
	flex-direction: column;
}
main#rapport div.header img{
	height: 2cm;
}
*/

main#rapport div#page div.type-options, div#normes-options, div#sol-options, div#appareil-options, div.chck label.radio-container {
    font-weight: bold;
}

main#rapport div#page div.type-options, div#normes-options, div#sol-options {
    display: flex;
    justify-content: space-between;
}

/* PDF Table*/
.tg {border-collapse: collapse;border-spacing: 0;}

.tg td {border-color: black;border-style: solid;border-width: 1px;font-family: Arial, sans-serif;font-size: 14px;
    overflow: hidden;padding: 1px 20px;word-break: normal;}

.tg th {border-color: black;border-style: solid;border-width: 1px;font-family: Arial, sans-serif;font-size: 14px;
    font-weight: normal;overflow: hidden;padding: 1px 20px;word-break: normal;}

.tg .tg-ybwq {border-color: inherit;text-align: right;vertical-align: top}

.tg .tg-dvpl {border-color: inherit;text-align: right;vertical-align: top;}

.tg .tg-dvpl.narrow {width: 10mm;}

.tg .tg-0lax {text-align: left;vertical-align: top}

.tg .tg-tf2e {text-align: left;vertical-align: top}

main#rapport div#page div.disabled {
    cursor: not-allowed;
    pointer-events: none;
}

main#rapport div#page div.disabled {
    transform: scale(0.5);
    transform-origin: 0 0;
}

/*INtervention v2*/
main#planning div.intervention-main {
    background: #d6d6d6;
    display: flex;
    flex-direction: row;
    margin-top: -15;
    margin-left: -15;
    margin-right: -15;
}

main#planning div.intervention-main span#tech-initiales {
    white-space: nowrap;
    font-size: 2.5em;
    border-radius: 50%;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    color: white;
    display: block;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    margin: 5px auto;
    cursor: pointer;
}

main#planning div.intervention-main span.ah { background: rgba(50, 50, 150, 1.0); }

main#planning div.intervention-main span.OM { background: rgba(50, 50, 150, 1.0); }

main#planning div.intervention-main span.jh { background: rgba(185, 20, 27, 1.0); }

main#planning div.intervention-main span.PS { background: rgba(185, 20, 27, 1.0); }

main#planning div.intervention-main span.CC { background: rgba(185, 20, 27, 1.0); }

main#planning div.intervention-main span.sb { background: rgba(150, 150, 50, 1.0); }

main#planning div.intervention-main span.JB { background: rgba(150, 150, 50, 1.0); }

main#planning div.intervention-main span.vh { background: rgba(50, 150, 50, 1.0); }

main#planning div.intervention-main span.CB { background: rgba(50, 150, 50, 1.0); }

main#planning div.intervention-main span.TJ { background: rgba(50, 150, 50, 1.0); }

main#planning div.intervention-main span.db { background: rgba(150, 150, 50, 1.0); }

main#planning div.intervention-main span.so { background: rgba(150, 150, 50, 1.0); }

main#planning div.intervention-main span.ST { background: rgba(150, 150, 50, 1.0); }

main#planning div.intervention-main span.SG { background: rgba(150, 150, 50, 1.0); }

main#planning div.intervention-main div.icon {
    flex: 1;
    text-align: center;
}

main#planning div.intervention-main div.middle {
    flex: 3;
    padding: 10px;
}

main#planning div.intervention-main div.icon a {
    color: rgb(185, 20, 27);
    font-size: xxx-large;
    text-decoration: none;
}

main#planning div.intervention-main div#date-intervention {
    font-style: italic;
    font-weight: 500;
}

main#planning div.intervention-main div#client-intervention {
    font-size: large;
}

main#planning div.intervention-main div#client-intervention span#cl-title-intervention {
    font-weight: 500;
}

main#planning div.intervention-redirect {
    background-color: rgb(185, 20, 27);
    color: white;
    border-radius: 8px;
    padding: 5;
    margin-bottom: 5;
    cursor: pointer;
}

body#audit5s div.audit5s {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

body#audit5s div.audit5s h2 {
    color: rgb(185, 20, 27);
}

body#audit5s div.audit5s form {
    width: auto;
    height: auto;
    text-align: center;
}

body#audit5s div.audit5s form a.answer {
    display: inline-block;
    width: 150px;
    height: 50px;
    line-height: 50px;
    color: #333;
    border: solid 1px rgba(0, 0, 0, 0.3);
    margin: 0 5px;
    border-radius: 5px;
    text-decoration: none;
}

body#audit5s div.audit5s form a.selected {
    background: rgb(185, 20, 27);
    color: #fff;
}

body#audit5s div.last {
    width: calc(100% - 20px);
    margin: 0 auto;
}

body#audit5s div.last div.audit {
    height: 50px;
}

body#audit5s div.last div.audit div {
    display: inline-block;
    height: 50px;
    vertical-align: top;
}

body#audit5s div.last div.audit div.auteur {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 25px;
    overflow: hidden;
}

body#audit5s div.last div.audit div.date {
    width: auto;
    height: 50px;
    line-height: 50px;
    padding: 0 5px;
}

body#audit5s div.last div.audit div.total {
    height: 50px;
    line-height: 50px;
    padding: 0 5px;
}