dd-contenere {
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 2px 2px 10px #bebebe;
    background-color: white;
    margin: 5px;
    padding: 10px;
    display: block;
}

/*////////////////////////////////////////////////////////////////////*/

 dd-groupe {
    display: block;
    padding: var(--padding-2);
    border-width: 2px;
    border-style: solid;
    margin: var(--margin-2);
    box-sizing: border-box;
    border-radius: var(--border-radius-lg);
}


/*////////////////////////////////////////////////////////////////////*/

 tld-article-h .tld-article-h-titel {
    font-size: 20pt;
    color: var(--gray-800);
    margin: var(--margin-10);
    margin-left: var(--margin-5);
    font-weight: 700;
    border-bottom: 3px solid var(--purple-200);
    padding-bottom: var(--margin-2);
} 


/*////////////////////////////////////////////////////////////////////*/

 tld-article-bouton > div {
    display: flex;
    justify-content: center;
}

tld-article-bouton > div > a {
    background-image: radial-gradient(circle farthest-side at bottom right, #E8B4F4 0%, #d986ed 25%, #CB70E1 50%, #AB5EBE 75%, #9050A0 100%);
    padding: 10px 25px;
    text-align: center;
    transition: .5s;
    background-size: 200% auto;
    color: white;
    border-radius: 5px;
    display: inline-block;
    text-decoration: none;
}

tld-article-bouton > div > a:hover {
    background-position: right center;
    color: white;
    text-decoration: none;
}

/*////////////////////////////////////////////////////////////////////*/

 tld-article-cmd > div  {
    padding: var(--padding-5);
}
tld-article-cmd > div > div {

    border-radius: var(--border-radius-sm);
    background-color: #272822;
}

tld-article-cmd > div > div > div {
    border-bottom: 1px solid #999;
    margin-left:  var(--margin-3);
    margin-right:  var(--margin-3);
    margin-bottom: var(--margin-2);
} 

tld-article-cmd pre {
    margin: unset !important;
    padding-top: unset !important;
}

tld-article-cmd p {
    font-family: Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;
    color: white;
    padding-top: var(--margin-3);
    padding-bottom: var(--margin-3);
    margin-left: var(--margin-5);


}

tld-article-cmd code {
    z-index: 1;
}

tld-article-cmd ::-webkit-scrollbar {
    background-color: #3f3f3f;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

tld-article-cmd ::-webkit-scrollbar-thumb {
    background-color: #5a5a5a;
    border-radius: 3px;
}

tld-article-cmd ::-webkit-scrollbar-thumb:hover {
    background-color:#646464;
}

tld-article-cmd ::-webkit-scrollbar-track-piece:start {
    background: transparent;
}

tld-article-cmd ::-webkit-scrollbar-track-piece:end {
    background: transparent;
} 


tld-article-cmd code span::selection , tld-article-cmd code::selection{
    background-color: rgba(255, 255, 255, 0.151);
    
}

/*////////////////////////////////////////////////////////////////////*/

 tld-article-code > div  {
    padding: var(--padding-5);
}
tld-article-code > div > div {

    border-radius: var(--border-radius-sm);
    background-color: #272822;
}

tld-article-code > div > div > div {
    border-bottom: 1px solid #999;
    margin-left:  var(--margin-3);
    margin-right:  var(--margin-3);
} 

tld-article-code pre {
    margin: unset !important;
    padding-top: unset !important;
}

tld-article-code p {
    font-family: Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;
    color: white;
    padding-top: var(--margin-3);
    padding-bottom: var(--margin-3);
    margin-left: var(--margin-5);


}

tld-article-code  .line-highlight {
    margin: unset !important;
}


tld-article-code  .line-highlight.good {
    background: linear-gradient(to right,hsl(114.06deg 100% 50% / 19%) 70%,hsla(24,20%,50%,0)) ;
}

tld-article-code  .line-highlight.bad {
    background:  linear-gradient(to right,hsl(0deg 100% 60.6% / 24%) 70%,hsla(24,20%,50%,0))
}

tld-article-code code {
    z-index: 1;
}

tld-article-code ::-webkit-scrollbar {
    background-color: #3f3f3f;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

tld-article-code ::-webkit-scrollbar-thumb {
    background-color: #5a5a5a;
    border-radius: 3px;
}

tld-article-code ::-webkit-scrollbar-thumb:hover {
    background-color:#646464;
}

tld-article-code ::-webkit-scrollbar-track-piece:start {
    background: transparent;
}

tld-article-code ::-webkit-scrollbar-track-piece:end {
    background: transparent;
} 

tld-article-code[language="language-treeview"] .line-numbers-rows>span {
    height: 26.95px;
}

tld-article-code code span::selection , tld-article-code code::selection{
    background-color: rgba(255, 255, 255, 0.151);
    
}

/*////////////////////////////////////////////////////////////////////*/

 tld-article-footer {
    display: block;
    margin-top: 40px;
    margin-bottom: 15px;
}

tld-article-footer .tld-footer-article-speparator {
    margin: var(--margin-5);
    border-bottom: 1px solid var(--gray-300) ;
}

tld-article-footer p  , tld-article-footer a  {
    display: inline-block;
    cursor: pointer;
}

/*////////////////////////////////////////////////////////////////////*/

 tld-article-h2  p {
    color: var(--gray-800);
    margin: var(--margin-5);
    margin-left: var(--margin-7);
    margin-right: var(--margin-10);
    font-size: 17pt;
    font-weight: 600;
}

/*////////////////////////////////////////////////////////////////////*/

 tld-article-img {
    display: block;
}

tld-article-img > div {
    display: flex;
    justify-content: center;
 
}

tld-article-img  img {
    padding: var(--padding-5);
    margin:  var(--margin-5);
    border-radius: var(--border-radius-sm);
    background-color: #272822;
    max-width: 90% ;
}

/*////////////////////////////////////////////////////////////////////*/

 
tld-article-infobulle > div {
    padding: var(--padding-5);
}

tld-article-infobulle[type="info"] > div > div {
    border: 3px solid var(--bleu-200);
    padding: 10px;
    background-color: var(--bleu-100);
    border-radius: var(--border-radius-lg);
    display: flex;
    justify-content:flex-start;
    align-items: center;
   
    
}

tld-article-infobulle[type="info"] img {
    content: url(/img/icon/info.svg);
    filter: invert(31%) sepia(11%) saturate(2607%) hue-rotate(196deg) brightness(98%) contrast(93%);
    width: 30px;
    height: 30px;
    margin: var(--margin-3);
}

tld-article-infobulle[type="info"] p {
    color: var(--bleu-700) ;
    line-height: 1.3em;
}



tld-article-infobulle[type="alert"] > div > div {
    border: 3px solid var(--red-200);
    padding: 10px;
    background-color: var(--red-100);
    border-radius: var(--border-radius-lg);
    display: flex;
    justify-content:flex-start;
    align-items: center;
    
}

tld-article-infobulle[type="alert"] img {
    content: url(/img/icon/alert-triangle.svg);
    filter: invert(26%) sepia(52%) saturate(2315%) hue-rotate(337deg) brightness(78%) contrast(93%);
    width: 30px;
    height: 30px;
    margin: var(--margin-3);
}

tld-article-infobulle[type="alert"] p {
    color: var(--red-700) ;
    line-height: 1.3em;
}

/*////////////////////////////////////////////////////////////////////*/

 tld-article-p .tld-article-p-p {
    color: var(--gray-800);
    margin: var(--margin-3);
    margin-left: var(--margin-10);
    margin-right: var(--margin-10);
    text-align: justify;
    line-height: 1.3em;
    
} 

/*////////////////////////////////////////////////////////////////////*/

 
tld-article-title > div{
    padding: var(--padding-5);
}

tld-article-title .tld-article-title-titel {
    font-size: 30pt;
    font-weight: 700;
    margin-bottom: var(--margin-3);
    color: var(--purple-700);
    

}

tld-article-title .tld-article-title-date {
 
    font-size: 10pt;
    color: var(--gray-400);
    margin-bottom: var(--margin-3);

}

tld-article-title .tld-article-title-separator{
    border: 1px solid var(--gray-200);
}

/*////////////////////////////////////////////////////////////////////*/

 tld-blueprint-viewer p {
    font-family: Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;
    color: white;
    padding-top: var(--margin-3);
    padding-bottom: var(--margin-3);
    margin-left: var(--margin-5);
}

tld-blueprint-viewer > div  {
    display: block;
    border-radius: var(--border-radius-sm);
    background-color: #272822;
    padding-bottom: var(--padding-3) ;

}

tld-blueprint-viewer {
    display: block;
    padding: var(--padding-5);
}

.tld-blueprint-viewer-cepa {
    border-bottom: 1px solid #999;
    margin-left: var(--margin-3);
    margin-right: var(--margin-3);
}


.tld-blueprint-viewer-con {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-top: 53.19%; /* 16:9 Aspect Ratio */
}


.tld-blueprint-viewer-con iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none;
  }

/*////////////////////////////////////////////////////////////////////*/

 .tld-bouton-btn-grad {
    background-image: linear-gradient(to right, #252525 0%, #363636 51%, #252525 100%);
    padding: 10px 25px;
    text-align: center;
    transition: .5s;
    background-size: 200% auto;
    color: white;
    border-radius: 5px;
    display: inline-block;
    text-decoration: none
}

.tld-bouton-btn-grad:hover {
    background-position: right center;
    color: white;
    text-decoration: none
}


/*////////////////////////////////////////////////////////////////////*/

 
tld-checkbox {
    margin: 5px;
    padding: 5px;
    display: block;

}

tld-checkbox .checkbox_etat {
    position: relative;
    min-width: 15px;
    min-height: 15px;
    cursor: pointer;
    margin: 0.5rem;

    transition: content 1s ease-out;
    border: 1px solid var(--gray-500) ; 
    border-radius: var(--border-radius-full);
    box-sizing: border-box;
   
}

tld-checkbox[multiple] .checkbox_etat {
    border-radius: var(--border-radius-sm);
}

tld-checkbox .checkbox_etat::before  {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius-full);
    outline-offset: 3px ;
    
}

tld-checkbox[multiple] .checkbox_etat::before {
    border-radius: 1px;
}

tld-checkbox .checkbox_etat:focus::before {
    outline: 2px solid var(--purple-200);
}

tld-checkbox .active {
    background-color: var(--purple-200);
    display: flex;
    align-items: center;
    justify-content: center;
}

tld-checkbox .checkbox_etat.active::after {
    content: "";
    width: 7px;
    height: 7px;
    background-color: white;
    border-radius: var(--border-radius-full)
}

tld-checkbox[multiple] .checkbox_etat.active::after {
    border-radius: 2px;
}


tld-checkbox .checkbox_option {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    flex-direction: row;
}

/*////////////////////////////////////////////////////////////////////*/

 tld-chosen {
    display: block;
}


/*////////////////////////////////////////////////////////////////////*/

 tld-collapsed {
    display: block;
    overflow: hidden;
    transition: max-height .5s linear;
}


/*////////////////////////////////////////////////////////////////////*/

 
tld-little-bar {

    position: absolute;
    box-sizing: border-box;
    width: 100vw;
    top: 0px;
    left: 0px;
    z-index: 2;
    opacity: 1;
    transition: top 1s cubic-bezier(0.075, 0.82, 0.165, 1), opacity 1s ease-in-out;
    box-shadow: var(--shadow-lg);
    
}


/*////////////////////////////////////////////////////////////////////*/

 
tld-modal-box {
    background-color: rgba(60, 35, 64, 0.6);
    position:fixed;
    top: 0px;
    left: 0px;
    display: none;
    height: 100vh;
    width: 100vw;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

tld-modal-box > div {
    padding: 10px;
    position: relative;
    min-height: 100px;
    width: auto;
    border-radius: 8px;
    background-color: white;
    font-family: 'Albert Sans';
    min-width: 100px;
    min-height: 100px;
}

tld-modal-box > div > img {
    content: url(/img/icon/x.svg);
    position:absolute;
    top: 5px;
    right: 5px;
    height: 15px;
    width: 15px;
    margin-left: 5px;
    cursor: pointer;
}


/*////////////////////////////////////////////////////////////////////*/

 
tld-notification {
    z-index: 1;
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: unset;
    left: unset;
}

tld-notification[type="top-left"] {
    top: 0px;
    left: 0px;
    right: unset;
    bottom: unset;
}

tld-notification[type="top-right"] {
    top: 0px;
    right: 0px;
    bottom: unset;
    left: unset;
}

tld-notification[type="bottom-left"]{
    bottom: 0px;
    left: 0px;
    right: unset;
    top: unset;
}

tld-notification[type="bottom-right"]{
    bottom: 0px;
    left:  unset;
    right: 0px;
    top: unset;
}

tld-notification[type="bottom"]{
    bottom: 0px;
    left:  50%;
    transform: translate(-50%,0px);
    right: unset;
    top: unset;
}

tld-notification[type="top"]{

    transform: translate(-50%,0px);
    bottom: unset;
    left:  50%;
    right: unset;
    top: 0px;
}


tld-notification > div {
    background-color: white;
    border: 1px solid var(--gray-300);
    box-shadow: var(--shadow-xl);
    border-radius: var(--border-radius-sm);
    width: 300px;
    min-height: 40px;
    padding: var(--margin-2);
    margin: var(--margin-8);
    border-left: 7px solid var(--purple-500);
    position: relative;
    box-sizing: border-box;

    animation: 0.5s linear tld-notification;
    display: none;
    opacity: 1;
   
}

tld-notification > div.close {
    animation: 0.5s linear tld-notification-close;
    display: none;
}

tld-notification .notification_bar {
    position: absolute;
    bottom: 0px;
    left: 0px;
    
}

tld-notification .notification_bar.anim {
    animation-name: tld-notification_bar;
    animation-timing-function: linear;
    height: 2px;
    background-color: var(--gray-400);
    width: 100%;
    opacity: 0;
}



@keyframes tld-notification_bar {
    0% {
        opacity: 1;
        width: 0%;
    }
    90% { 
        opacity: 1;
        width: 100%;
    }
    100%{
        width: 100%;
        opacity: 0;
    }
}


@keyframes tld-notification {
    0% {
        opacity: 0;
    }
    90% { 
        opacity: 1;
    }
    
}

@keyframes tld-notification-close {
    0% {
        opacity: 1;
        display: block;
    }
    90% { 
        opacity: 0;
        display: block;
    }
    100% {
        display: none;
        opacity: 0;
    }
    
}

/*////////////////////////////////////////////////////////////////////*/

 tld-signature-pad {
    display: block;
    position: relative;
    width: 400px;
    height: 200px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid var(--gray-200);
}

tld-signature-pad > canvas {
    position: absolute;
    left: 0;
    top: 0;
    width:100%;
    height:100%;
    background-color: white;
}

/*////////////////////////////////////////////////////////////////////*/

 
tld-slide-overs {
    position: absolute;
    
    height: 100vh;
    opacity: 0;
    z-index: 1;
    transition: left 1s cubic-bezier(.075, .82, .165, 1), right 1s cubic-bezier(.075, .82, .165, 1), opacity 1s ease-in-out;
    box-sizing: border-box;
}


/*////////////////////////////////////////////////////////////////////*/

 tld-timeline-scroll-bar {
    height: 5px;
    background-color: var(--gray-200);
    display: block;
}

tld-timeline-scroll-bar > div {
    background-color: var(--gray-500);
    height: 100%;
    transition: width .5s ease-out;
}

/*////////////////////////////////////////////////////////////////////*/

 
tld-tooltip {
    display: inline-block;
    position: relative;
}

tld-tooltip > img {
    width: 100%;
    height: 100%;
    cursor: pointer;

}

tld-tooltip > .tooltip_conteneur {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50% ,-50%);
    width: 0px;
    height: 0px;
    z-index: 1;

    
}

tld-tooltip > .tooltip_conteneur.bottom { 
    top: 100%;
}

tld-tooltip > .tooltip_conteneur.bottom .tooltip_conteneur_message { 
    transform: translate(-50% ,0);
}

tld-tooltip > .tooltip_conteneur.top { 
    top: -5px;
}

tld-tooltip > .tooltip_conteneur.top .tooltip_conteneur_message { 
    transform: translate(-50% , calc(-100% - 10px));
}

tld-tooltip > img:hover +  div .tooltip_conteneur_message {

    display: block;
    animation: 0.5s tld-tooltip ;
    opacity: 1;
    
}


tld-tooltip > .tooltip_conteneur.right { 
    left: 100%;
}

tld-tooltip > .tooltip_conteneur.right .tooltip_conteneur_message { 
    transform: translate(0 ,-50%);
}

tld-tooltip > .tooltip_conteneur.left { 
    left: -5px;
}

tld-tooltip > .tooltip_conteneur.left .tooltip_conteneur_message { 
    transform: translate(calc(-100% - 10px) , -50%);
}

tld-tooltip .tooltip_conteneur_message {
    margin: 5px;
    padding: 5px;
    box-sizing: border-box;
    border: 1px solid var(--gray-300);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-md);
    background-color: var(--gray-50);
    width :max-content;
    height :max-content;
    min-height: 30px;
    max-width: 300px;
    display: none;

    
}

@keyframes tld-tooltip {
    0% { opacity: 0;}
    100% {  opacity: 1;}
}

/*////////////////////////////////////////////////////////////////////*/