/*
 *
 *  Feuille de style CSS de DOTELEC
 *  
 */

 /* Déclarations des constantes globales CSS */
:root{
    /* colors */

    /* icon */
    --warn-icon-rounded : url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjRweCIgZmlsbD0iIzAwMDAwMCI+PHBhdGggZD0iTTQuNDcgMjFoMTUuMDZjMS41NCAwIDIuNS0xLjY3IDEuNzMtM0wxMy43MyA0Ljk5Yy0uNzctMS4zMy0yLjY5LTEuMzMtMy40NiAwTDIuNzQgMThjLS43NyAxLjMzLjE5IDMgMS43MyAzek0xMiAxNGMtLjU1IDAtMS0uNDUtMS0xdi0yYzAtLjU1LjQ1LTEgMS0xczEgLjQ1IDEgMXYyYzAgLjU1LS40NSAxLTEgMXptMSA0aC0ydi0yaDJ2MnoiLz48L3N2Zz4=);
    --info-icon-rounded : url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjRweCIgZmlsbD0iIzAwMDAwMCI+PHBhdGggZD0iTTAgMGgyNHYyNEgwVjB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bTAgMTVjLS41NSAwLTEtLjQ1LTEtMXYtNGMwLS41NS40NS0xIDEtMXMxIC40NSAxIDF2NGMwIC41NS0uNDUgMS0xIDF6bTEtOGgtMlY3aDJ2MnoiLz48L3N2Zz4=);
}



/* ------- GLOBAL ------- */

body{
    overflow: hidden;
    counter-reset: step;
}

.flex{
    display: flex !important;
}

.flex-center{
    justify-content: center;
    align-items: center;
}

.font-fam-roboto-condensed, .font-fam-roboto-condensed :is(span, label){
    font-family: 'Roboto Condensed', Helvetica, Arial;
}
.champ-grise, .champ-grise :is(span, label){
    color: #909090 !important;
    cursor: default;
}

.h-100-important{
    height: 100% !important
}

.overflow-x-hidde, #dzA270{
    overflow-x: hidden;
}

/* Pour les bulles d'aide (ex : remarques) */
.ui-tooltip.ui-corner-all.ui-widget-shadow.ui-widget.ui-widget-content.wbTooltip{
    white-space: break-spaces;
}

/* Permet de faire en sorte que le champ de saisie d'une combo prenne la pleine largeur et non au le libellé et le champ de saisie se partangent la pleine largeur... */
td:has(> table > tbody > tr > td > select.combo-pleine-largeur){
    width: 100% !important
}


.tag-fonctionnalite-experimentale::after{
    content: 'BETA';
    font-size: 10px;
    text-indent: 0px;
    position: absolute;
    margin-inline: 5px;
    color: #0069c2;
    background-color: #d5e2ff;
    font-weight: bold;
    padding: 1px 3px 1px 4px;
    border-radius: 4px;
    letter-spacing: 1px;
}



div:has(>span[data-title-avis-assemblee]){
    overflow: visible !important;
}

span[data-title-avis-assemblee]{
    position: relative;
}

span[data-title-avis-assemblee]::after{
    position: absolute;
    content: attr(data-title-avis-assemblee);
    display: none;
    z-index: 9;
    background-color: white;
    border: 1px solid #0064c8;
    border-radius: 4px;
    font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif;
    padding: 3px;
    font-size: 13px;
	width:fit-content;
}

span[data-title-avis-assemblee]:has(+i>img:hover)::after{
    display: block;
}

span[data-title-avis-assemblee]:has(+i>img)::after{
    top: -4px;
    left: 26px;
    width: 190px;
}


span[data-title-avis-assemblee]:has(+img:hover)::after{
    display: block;
}

/* 
span[data-title-avis-assemblee]:has(+img)::after{
    top: -4px;
    left: 26px;
    width: 190px;
}
*/



/* ------- Début - TIMELINE - Génération états - Module "représentation" ------- */
.timeline.etape{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 3px solid #ddd;
    border-radius: 50%;
    counter-increment: step;
    position: relative;
    transition: .20s ease;
}
.timeline.etape::before{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto Condensed', Helvetica, Arial;
    font-weight: bold;
    /* font-style: italic; */
    content: "" counter(step);
    transition: .20s ease;
}
.timeline.etape.with-delay, .timeline.etape.with-delay::before{
    transition-delay: .5s;
}
.timeline.etape.a-venir{
    border-color: #DDD;
}
.timeline.etape.a-venir::before{
    color: #ddd;
}
.timeline.etape.en-cours{
    border-color: rgb(83, 169, 63);
}
.timeline.etape.en-cours::before{
    color: rgb(83, 169, 63);
}
.timeline.etape.terminee{
    border-color: rgb(83, 169, 63);
    background-color: rgb(83, 169, 63);
}
.timeline.etape.terminee::before{
    color: white;
}
.timeline.transition{
    border-radius: 2px;
    background-position: right;
    background: linear-gradient(to left, #DDD 50%, rgb(83, 169, 63) 50%) right;
    background-size: 200%;
    transition: .5s ease-out;
}
.timeline.transition.a-venir{
    /* background-color: #DDD; */
    background-position: right;
}
.timeline.transition.terminee{
    /* background-color: rgb(83, 169, 63); */
    background-position: left;
}
/* -------  Fin  - TIMELINE - Génération états - Module "représentation" ------- */



/* ------- Début - SPLITTER BAR CSS ------- */

.leftSide,.rightSide,.splitter{position:absolute;height:100%;overflow:hidden}
.splitter{width:10px;z-index:501;cursor:col-resize}
.leftSide>div,.rightSide>div{height:100%;width:100%;position:relative}
.div-1-content, .div-2-content{height:100%;width:100%;}
#splitter-dotelec{
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
}

[id^=splitter-dotelec-]{
    /* Sans ça, la hauteur est au minimum par défaut et ça fait un saut d'affichage */
    height: 100%; 
}

#splitter-dotelec-gauche{ 
    /* Ajout du scroll horizontal si splitter trop à gauche */
    overflow-x: auto;
    overflow-y: hidden;
}

.splitter{
    width: 8px;
    top:0;
    cursor: ew-resize;
    background-color: #c9c9c9 !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.splitter .circle{
    width: 4px;
    height: 4px;
    border-radius: 2px;
    margin: 2px 0;
    background-color: #7c7c7c;
}

/* -------- Fin - SPLITTER BAR CSS -------- */



/* ------- Début - Notyf ------- */
.notyf{
    font-family: 'Roboto Condensed', 'Roboto', sans-serif;
}
/* -------  Fin - Notyf  ------- */



/* ------- Début - Traçage Arborescence pour champ ARBRE ------- */
.div-branches{
    position: relative;
}

.div-branches .trait:last-child{
    position: absolute;
    content: " ";
    height: calc(100% + 4px - 20px);
    border-left: 1px solid grey;
    top: -2px;
    /* left: 34px; */
    width: 6px;
}

.branche{
    position: relative;
    height: 100%
}

.branche.milieu:before, .branche.fin:before{
    position: absolute;
    content: " ";
    height: calc(50% + 2px);
    top: -2px;
    border-left: 1px solid grey;
    border-bottom: 1px solid grey;
    border-radius: 0 0 0 3px;
    left: calc(100% - 24px);
    width: 6px;
}
.branche.milieu:after{
    position: absolute;
    content: " ";
    height: calc(50% + 6px);
    border-left: 1px solid grey;
    top: calc(50% - 4px);
    left: calc(100% - 6px);
    width: 6px;
}
/* -------  Fin - Traçage Arborescence pour champ ARBRE  ------- */




/* ------- Début - Style Onglets convocation ------- */
.onglet-convocation.actif{
    background-color: #F0F0F0;
    position: relative;
}
.onglet-convocation.actif:before {
    border-bottom-right-radius: 10px;
    box-shadow: 8px 0 0 0 #f0f0f0;
    right: 0;
    top: -10px;
    background-color: transparent;
    content: "";
    height: 10px;
    position: absolute;
    width: 20px;
}
.onglet-convocation.actif:after {
    border-top-right-radius: 10px;
    box-shadow: 8px 0 0 0 #f0f0f0;
    right: 0;
    bottom: -10px;
    background-color: transparent;
    content: "";
    height: 10px;
    position: absolute;
    width: 20px;
}
.onglet-convocation.actif:hover{
    background-color: #F0F0F0 !important;
}
/* -------- Fin - Style Onglets convocation -------- */






/* -------- Début - Style chevron sous-menus contextuels -------- */
.sous-menu-disponible{
    position: relative;
}

.sous-menu-disponible:after{
    position: absolute;
    content: " ";
    background-color: currentColor;
    /* background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjRweCIgZmlsbD0iIzAwMDAwMCI+PHBhdGggZD0iTTAgMGgyNHYyNEgwVjB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTExLjcxIDE1LjI5bDIuNTktMi41OWMuMzktLjM5LjM5LTEuMDIgMC0xLjQxTDExLjcxIDguN2MtLjYzLS42Mi0xLjcxLS4xOC0xLjcxLjcxdjUuMTdjMCAuOSAxLjA4IDEuMzQgMS43MS43MXoiLz48L3N2Zz4='); */
    -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iOHB4IiB2aWV3Qm94PSI4IDggOCA4IiB3aWR0aD0iOHB4IiBmaWxsPSIjMDAwMDAwIj4NCjxwYXRoIGQ9Ik0xMS43MSAxNS4yOWwyLjU5LTIuNTljLjM5LS4zOS4zOS0xLjAyIDAtMS40MUwxMS43MSA4LjdjLS42My0uNjItMS43MS0uMTgtMS43MS43MXY1LjE3YzAgLjkgMS4wOCAxLjM0IDEuNzEuNzF6Ii8+DQo8L3N2Zz4=');
    mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iOHB4IiB2aWV3Qm94PSI4IDggOCA4IiB3aWR0aD0iOHB4IiBmaWxsPSIjMDAwMDAwIj4NCjxwYXRoIGQ9Ik0xMS43MSAxNS4yOWwyLjU5LTIuNTljLjM5LS4zOS4zOS0xLjAyIDAtMS40MUwxMS43MSA4LjdjLS42My0uNjItMS43MS0uMTgtMS43MS43MXY1LjE3YzAgLjkgMS4wOCAxLjM0IDEuNzEuNzF6Ii8+DQo8L3N2Zz4=');
    right: 8px; 
    top: calc(50% - 4px);
    width: 8px;
    height: 8px;
    background-repeat: no-repeat;
}

/* -------- Fin - Style chevron sous-menus contextuels -------- */
 





/* -------- Début - Styles des jetons pièce jointes -------- */
.champs-jetons-pj.wbSaisieJetonsWrap {
    display: flex;
    align-items: center;
    min-height: 40px !important;
    cursor: auto;
    position: relative;
}

.champs-jetons-pj .wbSaisieJetonsInnerWrap{
    position: absolute;
    min-height: 100%; 
    top: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.champs-jetons-pj :is(.wbJeton, .wbJeton:focus){
    background-color: #fff;
    color: #373a3c;
    border: 1px solid #808080;
    border-radius: 2px;
    max-width: 250px;
    position: relative;
    display: flex !important;
    align-items: center;
    padding-right: 22px !important;
    gap: 3px;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    transition: ease 0.2s all;
}

.champs-jetons-pj .wbJeton:hover{
    border-color: #0064c8;
}

.champs-jetons-pj .wbJeton .titre-pj{
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.champs-jetons-pj .wbJeton img.type-fichier{
    height: 16px;
}

.champs-jetons-pj .wbJeton .taille-fichier{
    font-style: italic;
    color: #8f8f8f;
}

.champs-jetons-pj .wbJeton [data-role=remove]{
    position: absolute;
    right: 0;
    /* top: calc(50% - 6px); */
    top: 0;
    height: 100%;
    margin-right: 0 !important;
    padding-right: .333rem;
    display: flex;
    align-items: center;
    transition: ease .2s all;
}

.jeton-envoyer-mail .wbJeton [data-role=remove]{
    position: relative !important;
    display: flex !important;
}

.champs-jetons-pj .wbJeton [data-role=remove]:hover{
    color: black;
    text-shadow: 0 0 3px #474747;
}

.champs-jetons-pj .wbJeton .lecture-seule + span[data-role=remove]{
    display: none;
}

.champs-jetons-pj .wbJeton:has(.lecture-seule){
    padding-right: 4px !important;
}
/* --------  Fin  - Styles des jetons pièce jointes -------- */





/* -------- Début - Styles des messages d'avertissement/info de la page de connexion -------- */
.info-page-connexion{
    border-radius: 10px;
    border-left: 10px solid;
    position: relative;
    width: 900px;
    padding: 1px 0;
    font-family: Roboto, Arial, sans-serif;
}

.info-page-connexion :is(.info-titre, .info-message){
    margin-left: 50px;
    margin-right: 10px;
}

.info-page-connexion .info-titre{
    position: relative;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
}

.info-page-connexion .info-titre::before{
    content: ' ';
    position: absolute;
    top: calc(50% - 12px);
    left: -34px;
    height: 24px;
    width: 24px;
    background-color: currentColor;
}

.info-page-connexion .info-message{
    white-space: break-spaces;
    margin-bottom: 20px;
}

/* Couleur du texte */
.info-page-connexion.warn{
    color: #DE521D;
    border-color: #DE521D;
    background-color: #FFE0CA;
}

.info-page-connexion.error{
    color: #fff;
    border-color: #D42525;
    background-color: #D42525;
}

.info-page-connexion.info{
    color: #2881d3;
    border-color: #509BE0;
    background-color: #C8E2FA;
}


/* Icone */
.info-page-connexion:is(.warn, .error) .info-titre::before{
    /* background-image: var(--warn-icon-rounded);  */
    -webkit-mask-image: var(--warn-icon-rounded);
    mask-image: var(--warn-icon-rounded);
    background-repeat: no-repeat;
}

.info-page-connexion.info .info-titre::before{
    /* background-image: var(--warn-icon-rounded);  */
    -webkit-mask-image: var(--info-icon-rounded);
    mask-image: var(--info-icon-rounded);
    background-repeat: no-repeat;
}

/* --------  Fin  - Styles des messages d'avertissement/info de la page de connexion -------- */





/* -------- Début - Style pour le changmeent de filtre lors de la préparation des états du CD74 -------- */
.btn-croissant-decroissant-egal{
    height: 20px;
    width: 20px;
    position: relative;
}

.btn-croissant-decroissant-egal :is(.barre-haut, .barre-bas){
    position: absolute;
    width: 4px;
    height: 60%;
    background-color: currentColor;
    top: calc(50% - calc(60% / 2));
    border-radius: 2px;
    transition: all 0.3s ease
}

.btn-croissant-decroissant-egal .barre-haut{
    right: 60%;
}

.btn-croissant-decroissant-egal .barre-bas{
    left: 60%;
}

.btn-croissant-decroissant-egal.croissant .barre-haut{
    right: 50%;
    height: 50%;
    top: calc(50% - calc(70% / 2) + 2px);
    transform: rotate(45deg);
}

.btn-croissant-decroissant-egal.croissant .barre-bas{
    left: 50%;
    height: 50%;
    top: calc(50% - calc(70% / 2) + 2px);
    transform: rotate(-45deg);
}

.btn-croissant-decroissant-egal.decroissant .barre-haut{
    right: 50%;
    height: 50%;
    top: calc(50% - calc(70% / 2) + 2px);
    transform: rotate(-45deg);
}

.btn-croissant-decroissant-egal.decroissant .barre-bas{
    left: 50%;
    height: 50%;
    top: calc(50% - calc(70% / 2) + 2px);
    transform: rotate(45deg);
}
/* --------  Fin  - Style pour le changmeent de filtre lors de la préparation des états du CD74 -------- */





/* --------- Début - Style du petit badge rouge sur les boutons d'action de bas de page -------- */
.badge-rouge-notification{
    position: relative;
}

.badge-rouge-notification:after{
    content: ' ';
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: #DD4B39;
    position: absolute;
    top: 5px;
    right: 7px;
}
/* ---------  Fin  - Style du petit badge rouge sur les boutons d'action de bas de page -------- */





/* Correction Bug pleine largeur Zone Répétéées */
/* On sélectionne les id qui terminent par '_POS' */
.ZR-pleine-largeur [id$="_POS"]{ 
    width: 100% !important;
} 




.zone-de-drop/*::before*/{
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(1px);
}

.zone-de-drop::after{
    position: absolute;
    top: 0;
    left: 0;
    height: calc(100% - 40px);
    width: calc(100% - 40px);
    margin: 20px;
    border: 4px dashed grey;
    box-sizing: border-box;
    border-radius: 15px;

    /* texte */
    content: ' ';
    /* content: 'Déposez votre fichier ici'; */
    line-height: 320px;
    text-align: center;
    font-family: Roboto, Arial, sans-serif;

    /*icon*/
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik00NTAuMDAxLTQwMi4wMDN2MTQ3LjM4N3EwIDEyLjc2OCA4LjYxNSAyMS4zODQgOC42MTUgOC42MTUgMjEuMzg0IDguNjE1dDIxLjM4NC04LjYxNXE4LjYxNS04LjYxNiA4LjYxNS0yMS4zODR2LTE0Ny4zODdsNTIuOTI1IDUyLjkyNXE0LjQ2MSA0LjQ2MSAxMC4wMzggNi42OTJ0MTEuMTUzIDEuOTIzcTUuNTc3LS4zMDggMTEuMDM5LTIuNTM4IDUuNDYxLTIuMjMxIDkuOTIyLTYuNjkzIDguNjkzLTkuMzA3IDktMjEuMDc2LjMwOC0xMS43NjktOS0yMS4wNzZsLTk5Ljc2OS05OS43NjlxLTUuNjE1LTUuNjE2LTExLjg0Ni03LjkyMy02LjIzLTIuMzA4LTEzLjQ2MS0yLjMwOHQtMTMuNDYxIDIuMzA4cS02LjIzMSAyLjMwNy0xMS44NDYgNy45MjNsLTk5Ljc2OSA5OS43NjlxLTguOTIzIDguOTIyLTguODA4IDIwLjg4NC4xMTUgMTEuOTYxIDkuNDIzIDIxLjI2OCA5LjMwNyA4LjY5MyAyMS4wNzYgOSAxMS43NjkuMzA4IDIxLjA3Ny05bDUyLjMwOS01Mi4zMDlaTTI1Mi4zMDktMTAwLjAwMXEtMzAuMzA4IDAtNTEuMzA4LTIxdC0yMS01MS4zMDh2LTYxNS4zODJxMC0zMC4zMDggMjEtNTEuMzA4dDUxLjMwOC0yMWgyODcuNzY5cTE0LjQ2MSAwIDI3LjgwNyA1LjYxNiAxMy4zNDYgNS42MTUgMjMuMTkzIDE1LjQ2MWwxNjcuODQ0IDE2Ny44NDRxOS44NDYgOS44NDcgMTUuNDYxIDIzLjE5MyA1LjYxNiAxMy4zNDYgNS42MTYgMjcuODA3djQ0Ny43NjlxMCAzMC4zMDgtMjEgNTEuMzA4dC01MS4zMDggMjFIMjUyLjMwOVptMjg3LjY5Mi01NTYuMTU0Vi04MDBIMjUyLjMwOXEtNC42MTYgMC04LjQ2MyAzLjg0Ni0zLjg0NiAzLjg0Ny0zLjg0NiA4LjQ2M3Y2MTUuMzgycTAgNC42MTYgMy44NDYgOC40NjMgMy44NDcgMy44NDYgOC40NjMgMy44NDZoNDU1LjM4MnE0LjYxNiAwIDguNDYzLTMuODQ2IDMuODQ2LTMuODQ3IDMuODQ2LTguNDYzdi00NDcuNjkySDU3Ni4xNTVxLTE1LjQ2MSAwLTI1LjgwNy0xMC4zNDctMTAuMzQ3LTEwLjM0Ni0xMC4zNDctMjUuODA3Wk0yNDAtODAwdjE3OS45OTlWLTgwMHY2NDBWLTgwMFoiLz48L3N2Zz4=');
    background-repeat: no-repeat;
    background-position: center;
    /* background-position: center calc(50% - 30px); */
    background-size: 100px
}

/* --------- Style Jeton Envoi Email-------- */

.jeton-destinataire-email .wbJeton {
    /* border: 1px solid #797979; */
    border: none;
    background: #e1e1e1;
    border-radius: 16px;
    transition: 0.3s;
}

.jeton-destinataire-email .wbJeton:hover {
    background: #d1d1d1; 
}

.jeton-destinataire-email .wbJeton span:hover {
    color: black;
}

td>div:has(>.bulle-droite){
float: right;

}


.text-align-right{
    text-align: right;
}
 
.text-align-left{
    text-align: left;
}

.color-ztr-old{
   color: #373A3C;
}

.color-ztr-new{
    color: #FFFFFF;
}

/* #redaction-mail-convocation {
    margin-left: 15px;
    margin-top: 15px;
} */

/* #redaction-mail-convocation p {
    padding: 15px;
    word-break: break-all;
    overflow: scroll;
    max-height: 150px;
    overflow-x: hidden;

} */