@charset "UTF-8";
@font-face{font-family:Junicode;src:url(fonts/Junicode.woff) format("woff");font-weight:400;font-style:normal}
@font-face{font-family:Junicode-bold;src:url(fonts/Junicode-Bold.woff) format("woff");font-weight:700;font-style:normal}
@font-face{font-family:Junicode-italic;src:url(fonts/Junicode-Italic.woff) format("woff");font-weight:400;font-style:italic}

body {
                    display: flex;
                    flex-direction: column;
                    height: 100vh;
                    margin: 0;
                    font-family: Junicode, Times, serif;
                    
                    }
                    
                    .menu {
                    background-color: #6b0f0c;
                    color: white;
                    }
                    .project-title{
                    display: inline-block;
                    }
                    .columns-container {
                    display: flex;                    
                    overflow-x: auto;
                    flex: 1;
                    background-color: whitesmoke;
                    }
                    .column {
                    position: relative;
                    flex: 0 0 24%;
                    min-width: 250px;
                    /*margin: 0 5px;*/
                    border: 1px solid #ccc;
                    height: 100%;
                    overflow-y: auto;
                    display: flex;
                    flex-direction: column;
                    scroll-behavior: smooth;
                   
                    }
                    .column-title[id='pivot'] {        
                           
                    background: #daaca9;
 
                    }
                    .column-title[id='2FMP'] {
                    background: #a5c4e0;
                    }
                    .column-title[id='2FMPV'] {
                    background: #a5c4e0;
                    }
                    .column-title[id='2FMPB'] {
                    background: #a5c4e0;
                    }
                    .column-title {
                    position: sticky;
                    top: 0;
                    background: #c9ce9d;
                    padding: 5px;
                    font-weight: bold;
                    text-align: center;
                    border-bottom: 1px solid #aaa;
                    z-index: 1;                    
                    }
                    .lg {
                    padding-bottom: 1em;
                    padding-left: 3em;
                    padding-right: 2em;
                    border-bottom: 1px dashed #aaa;
                    padding-bottom: 0.5em;
                    transition: background-color 0.2s;
                    position: relative;
                    /*filter: blur(5px); */
                    }

                    .lg::before {
                    display: none;
                    content: "";
                    position: absolute;
                    inset: 0;
                    background: black;
                    opacity: 0.5;        /* 黒さの濃さ */
                    filter: blur(5px);  /* ぼかし量 */
                    z-index: -1;
                    animation: fadeOut 5s; /*keyframes*/
                    animation-fill-mode: both;
                    }

                    .lg.active { background-color: #a8eeff!important;
                      position: relative;
                    }                    
                    .lg.onactive { background-color: #b7fff3b9; 
                      position: relative;
                    transition: 0.5s;
                    }
                    .lg h4 {
                    margin: 0 0 0.5em 0;
                    font-size: 0.9em;
                    color: #555;
                    }
                    .l[data-rend="br"] { /*margin-left: 1em;*/ display: block; }
                    
                    span[data-rend="br"] { display: block; }
                    .column[id="2FMPV"] .l {display: block; }
                    .column[id="B1"] .l {display: block; }
                    

                    .l[data-n] {
                    position: relative; 
                    display: inline-block; 
                    }
                    .l[data-n]::after {
                    content: attr(data-n);
                    position: absolute;
                    top: 3px;        /* coordonnée popup */
                    left: 80%;        /* coordonnée popup */
                    transform: translate(0, -100%);  /* coordonnée popup */
                    background-color: rgba(0, 0, 0, 0.75);
                    color: white;
                    padding: 3px 6px;
                    border-radius: 4px;
                    white-space: nowrap;
                    opacity: 0;
                    pointer-events: none;
                    transition: opacity 0.3s ease, transform 0.3s ease;
                    z-index: 2;
                    }

                    /* hover */
                    .l[data-n]:hover::after {
                    opacity: 1;
                    transform: translate(5px, -110%); 
                    }

                    .l[data-n]:hover {
                    background-color: #6de0fd !important;
                    transition: background-color 0.5s;
                    }

                    
                    .lg a { color: #555; text-decoration: none; }
                    .lg a:hover { text-decoration: underline; }
                    #search-container {
                    border-top: 1px solid #aaa;
                    background: #eee;
                    padding: 5px;
                    flex-shrink: 0;
                    overflow-y: auto;
                    max-height: 200px;
                    }
                    span.quote{ color: rgb(24, 136, 192);}

                    #search-input { width: 300px; padding: 3px; }
                    table { width: 100%; border-collapse: collapse; margin-top: 5px; }
                    td { padding: 3px 5px; border-bottom: 1px solid #ccc; text-align: left; }
                    th[id="context"] {padding: 3px 5px; border-bottom: 1px solid #ccc; text-align: left; width:75% ; }
                    th[id="number"] {padding: 3px 5px; border-bottom: 1px solid #ccc; text-align: left; width:15% ; }
                    th[id="witness"]{ padding: 3px 5px; border-bottom: 1px solid #ccc; text-align: left;width:10% ; }
                    tr.title-row { cursor: pointer; }
                    .highlight { background-color: yellow; }
                    
                    #selUnit { width: 75px;float:left}
                    
.pb{color:darkred;
font-size: smaller;}                  
.cb{color:darkred;
font-size: smaller;}  

    .italic{font-style:italic;}
    span[data-rend="b"]{font-weight:bold;}
    .closer{color:darkslateblue;
            display:block}
    .del[rend="overstrike"]{
        text-decoration-line:line-through;}
    .del[rend="dot"]{
  text-emphasis: filled;}

    /*span[data-rend="flipped"]{transform: scale(-1, -1);
             display: inline-block;}*/

    span[data-place="above"] {
            vertical-align: super;
            font-size: smaller;
        }

    span[data-place="below"] {
            vertical-align:sub ;
            font-size: smaller;
        }
    span[data-place="inline"]::before {
            content: "\\";
            color: darkgoldenrod;
        }
    span[data-place="inline"]::after {
            content: "\/";
            color: darkgoldenrod;
        }
        
    .catch{display: inline;}

    .damage{
        background-color: darkkhaki;
        position: relative;
        display: inline-block;}

  .damage::after {
    content: "Reason: "attr(agent);
    z-index: 2 ;
    font-size: 16px;
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(0%);
    background-color: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 3px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

  .damage:hover::after {
    opacity: 1;
    visibility: visible;
}

.supplied::before {
  content:"[";
  color: #6b0f0c;
}
.supplied::after {
   content:"]";
   color: #6b0f0c;
}

.space {
    position: relative;
    display: inline-block;
}
.space::before{
    content:"　";
    background-color: rgb(162, 182, 202);
  }
.space::after {
    content: "Space:"attr(quantity)attr(unit);
    font-size: 16px;
    position:absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(0%);
    background-color: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 3px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.space:hover::after {
    opacity: 1;
    visibility: visible;
}

.gap {
    position: relative;
    display: inline-block;
}
.gap::before{
    content:"　";
    background-color: khaki;
  }
 .gap::after {
    content: "Gap:"attr(extent)"/ Reason:"attr(reason);
    font-size: 16px;
    position:absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(0%);
    background-color: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 3px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.gap:hover::after {
    opacity: 1;
    visibility: visible;
}

  span[type="catch"] {
    display: none;/*
    background-color: rgb(233, 65, 146);
    font-size: 16px;
    color:rgb(255, 255, 255);
    display: inline;
    cursor: pointer;
    padding: 3px;
    border-radius: 4px;
    position: relative;*/
}

span[type="sig"] {
    display: none;/*
    background-color: rgb(175, 50, 186);
    font-size: 16px;
    color:rgb(255, 255, 255);
    display: inline;
    cursor: pointer;
    padding: 3px;
    border-radius: 4px;
    position: relative;*/
}

  .fw::after{
    display: none;/*
    content: attr(data-type)"words";
    font-size: 16px;
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(0%);
    background-color: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 3px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;*/
  }

  .fw:hover::after{
    display: none;/*
    opacity: 1;
    visibility: visible;*/
  }

.teiHeaderProject{
  font: 15px!important;
  z-index: 9;
  display: none;
    }

  .info{position: relative;
    }
  .teiHeader{display: none;
    position: absolute;
    bottom: -300%;            /* note height */
    right: -80px;    /* note position */
    height: 30px;
    width: 250px;
    text-align: left;
    font-weight:normal;
    font-size: smaller;
}

.project-info{
  font-size: 40px;
  float:right; 
  font-family:Georgia, 'Times New Roman', Times, serif;
    }
  
  .note[data-place='margin-left']{
    position: absolute;
  left: 3px;             
  top: 2em;           
  width: 40px;
  font-size: smaller;
  pointer-events: auto; 
  }
  .note[data-place='margin-right']{
  position: absolute;
  right: 10px;             
  top: 0.5em;           
  width: 100px;
  font-size: smaller;
  pointer-events: auto; 
  }
  .note[data-place='margin-bottom']{
    font-size: smaller;
  pointer-events: auto; 
  color: #6b0f0c;
  display: block;
  }
  


.note {
  position: relative !important;
  display: inline-block;
  z-index: 10; 
}


.note .tooltip {
  position: absolute;
  bottom: 100%;    
  left: 390%;        
  transform: translateX(-50%) translateY(-8px);
  width: 250px;
  min-width: 150px;
  box-sizing: border-box;
  background-color: rgba(255,255,255,0.8);
  color: #561c0a;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.9rem;
  line-height: 1.45;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

.note.active .tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(-14px);
}



span[scribe="new"]::after{
content:"→Nouveau copiste";
background-color:darkred;
color:white;
font-size: 16px;
padding: 3px;
border-radius: 4px;
}

.reading__text[title*="Unit"]::before{
    display:none;
}

span[rend="lettrin"]{
    color:red;
    font-size: 30px;
}

.langcode{
    color:darkred;
    font-style: normal;
    font-size: smaller;
}

/* checkbox langue default */
.toggle-checkbox {
  display: none;
} 
/* design checkbox */
.toggle-label {
  text-align: left;
  display: inline-block;
  width: 31px;
  height: 15px;
  background-color: #ccc;
  border-radius: 25px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s ease;
} /* slider */
.toggle-label::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  top: 1px;
  left:2px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.3s ease;
} /* design checked */
.toggle-checkbox:checked + .toggle-label {
  background-color: #5394a0;
}
.toggle-checkbox:checked + .toggle-label::after {
  transform: translateX(15px);
}


.choice .reg:after,
.choice .reg:before {
  content:" "
}

 .choice .corr,
 .choice .reg {
  font-size:80%;
  position:absolute;
  line-height:16px;
  display:none;
  border:1.5px solid #000;
  border-radius:3px;
  -o-box-shadow:2px 2px 2px #7e7067;
  -khtml-box-shadow:2px 2px 2px #7e7067;
  -ms-box-shadow:2px 2px 2px #7e7067;
  box-shadow:2px 2px 2px #7e7067;
  padding:5px 8px;
  margin-top:30px
}
 .choice .corr:before,
 .choice .reg:before {
  left:15%;
  position:absolute;
  top:-13px
}
 .choice .corr {
  left:3em!important
}
 .choice .corr,
 .choice .corr * {
  background:#f99069!important
}
 .choice .reg:before {
  content:url(../images/popup_before.png)
}
 .choice .reg,
 .choice .reg * {
  background:#e5dac4!important
}
 .choice .orig.hover,
 .choice .orig:hover {
  color:#561c0a
}
 .choice.hover .corr,
 .choice.hover .reg,
 .choice:hover .corr,
 .choice:hover .reg {
  display:inline;
  min-width:20px;
  text-align:center;
  z-index:9;
  white-space:nowrap;
  left:0
}
 .choice.hover .corr,
 .choice:hover .corr {
  -khtml-transform:translate(-80%,0);
  transform:translate(-80%,0)
}
 .choice .sup {
  line-height:20px;
  vertical-align:20%
}
 .choice .under {
  line-height:20px;
  vertical-align:-20%
}
 .choice .corr:after,
 .choice .corr:before {
  content:""
}
 .choice .corr {
  font-size:80%;
  position:absolute;
  line-height:16px;
  border:1.5px solid #000;
  border-radius:3px;
  -o-box-shadow:2px 2px 2px #7e7067;
  -khtml-box-shadow:2px 2px 2px #7e7067;
  -ms-box-shadow:2px 2px 2px #7e7067;
  box-shadow:2px 2px 2px #7e7067;
  padding:5px 8px;
  margin-top:30px
}
 .choice .corr:before {
  content:url(../images/popup_before_corr.png);
  left:15%;
  position:absolute;
  top:-13px
}
 .choice .sic {
  color:#934d4d
}
 .choice .sic.hover,
 .choice .sic:hover {
  color:#561c0a
}
 .choice.hover .corr,
 .choice:hover .corr {
  display:inline;
  min-width:20px;
  text-align:center
}
 .choice.hover .sic,
 .choice:hover .sic {
  text-decoration:underline
}


  

  .filter-group {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 1rem;
}

.lang-hidden {
  display: none !important;
}
.box-body.Edition:has(evt-reading[data-scope-wit="#B2"]){
    background-color: bisque;
}
.box-body.Edition:has(evt-reading[data-scope-wit="#2FMP"]){
    background-color:aliceblue;
}
span[data-place="left"]::before{
    content:'\\';
    color: darkgoldenrod;
;}
span[data-place="left"]::after{
    content:'\/';
    color: darkgoldenrod;
;}
span[data-place="right"]::before{
    content:'\\';
    color: darkgoldenrod;
;}
span[data-place="right"]::after{
    content:'\/';
    color: darkgoldenrod;
;}
span[data-place="margin"]::before{
    content:'\\';
    color: darkgoldenrod;
;}
span[data-place="margin"]::after{
    content:'\/';
    color: darkgoldenrod;
;}
span[data-place="bottom"]::before{
    content:'\\';
    color: darkgoldenrod;
;}
span[data-place="bottom"]::after{
    content:'\/';
    color: darkgoldenrod;
;}

/*-----------------*/
.l-block.over {
  background-color: rgba(255, 230, 150, 0.5) !important;
  display: inline-block; /* ブロック全体を着色するため */
}

.notarget {
  position: absolute;
  left: 20%;
  top: 150%;
  width: 280px;
  height: 60px;
  /*background-color: rgba(236, 220, 243, 0.897);
  border: 1px solid #ccc;*/
  padding: 5px 5px;
  border-radius: 10px;
  color: rgb(255, 255, 255);
  font-size: 1.1rem;
  font-family:'Times New Roman', Times, serif;
  line-height: 1.45;
  text-align: center;
  font-style: italic;
  z-index: 2;
 /*visibility: hidden; 
  opacity: 0;*/
  animation: fadeOut 6s; /*keyframes*/
  animation-fill-mode: both; 
}
  
@keyframes fadeOut {
    0% {
        opacity: 1; /*start*/
    }
    100% {
        opacity: 0; /*end*/
    }
}

/*
.reading.over{background: rgb(162, 229, 250);
	border-radius: 3pt 3pt;z-index: 100;
}
.reading.over.ng-mouseover{background: rgb(162, 229, 250);
	border-radius: 3pt 3pt;z-index: 100;
}
.reading.selected.expansed{background: rgb(162, 229, 250);
border-radius: 3pt 3pt;}
.reading.selected.expansed.ng-animate.over-add{background: rgb(162, 229, 250);
border-radius: 3pt 3pt;}
.reading.selected.expansed.over.ng-animate.over-remove{background: rgb(162, 229, 250);
border-radius: 3pt 3pt;}
.reading:not(.hidden).over.reading__text{background: rgb(162, 229, 250);
	border-radius: 3pt 3pt;}*/