/*
======== Iris Default CSS ======== 

/var/www/iris/v2/default.css       

Brisch                               

2025-03-07                         

*/  

/* tempo for debug :  */
/* header, nav { background-color: rgba(255, 255, 255, 0.9); } */


* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}


:root {

/* My own color var name */
--blue-bic-pen:        #405e9d; /* Blue bic pen color    */

--gh-blue:             #004586; /* GH blue  : #004586    */
--gh-orange:           #ee7d0c; /* GH Orange: #ee7d0c    */
--gh-green:            #a4c408; /* GH green : #a4c408    */

--jdb-blue:            #06C1FF; /* Jeff de Bruges Blue   */ 

--light-bristol:       #fcfbf6; /* Light bristol paper   */
--bristol:             #f1f0eb; /* Bristol paper color   */
--dark-bristol:        #b4b4ad; /* Dark bristol paper    */
--very-dark-bristol:   #787876; /* Dark bristol paper    */

--light-anthracite:    #404040; /* Anthracite Gray color */
--anthracite:          #303030; /* Anthracite Gray color */
--dark-anthracite:     #202020; /* Anthracite Gray color */ 

           --midnightblue: midnightblue; /* #191970 */ 
     --light-midnightblue: #2f2882;
--very-light-midnightblue: #5345b4;

--light-chocolate:     #ab8e6d; 
--chocolate:           #806546; /* #7f6546 */
--dark-chocolate:      #644b2d; 
--very-dark-chocolate: #4d371a;

/* New normalization */

/* Reference colors  */
--paper:   white;
--paper-2: var(--bristol);
--paper-3: var(--light-bristol);
--paper-4: white;
--paper-5: var(--dark-bristol);
--paper-6: var(--dark-bristol);
--dark-ink-pen: var(--dark-anthracite); /* Very dark ink pen, often for main title     */
--pen:     var(--anthracite);     /* Stylo,  main writing  --blue-bic-pen , --anthracite */
--pencil:  #71706b;               /* Crayon, sec. writing color - gray, most of the time */
--marker:  blue;                  /* Marqueur, red or blue                               */
--hover:   red;                   /* For link-hover and other mouse-hover in general     */
--fill:    #55f8f4;               /* To be tested and just keep one --fill               */
--blue:    var(--gh-blue);     
--orange:  var(--gh-orange);    
--green:   var(--gh-green);   
--red:     red;                   /* juste for tests dev                                    */ 


/* The only colors that should be in my differents css */ 
/* Name - Value - Description (Default value) */

--bg:             var(--paper);   /* Main Background color (--paper) */
--inset-bg:       var(--paper-2); 
--stat-bg:        var(--paper-2); 
--input-bg:       var(--paper-3); 
--input-focus-bg: var(--paper-4); 
--table-head-bg:  var(--paper-5);
--admin-bg:       var(--paper-6); 
--admin-dark-bg:  var(--blue-bic-pen); 

--title: var(--dark-ink-pen);     /* Main web site Title color   --pen */
--font: var(--pen);               /* Main Font color             --pen */
--link: var(--pen);     
--link-hover: var(--hover);       /* Links mouse-hover color (--hover) */
--warning: darkred;
--error: red;

--line:           var(--pencil); /* Most of lines color (pen ou pencil en general) */
--dark-line:      var(--pen);    /* admin box border lines color (pen) */

--footer-height: 10rem;
--img-thumbnail-height: 30rem; /* (18) */
--stat-fill: var(--fill); 
}




html {font-size: 62.5%;}

body {
font-family: 'Ubuntu', 'Open Sans', sans-serif;
font-size: 3.5rem; 
color: var(--font);   
}

.hidden  {visibility: hidden;}
.warning {color: var(--warning);}
.error   {color: var(--error);}
.test    {border: 1px dashed red;}

body, header, nav, footer {
  background-color: var(--bg); 
  }



header {
  position: fixed;
  top: 0px;
  width: 100%;
  height: 10rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  }

#main_title {
  font-family: 'Lato', sans-serif;
  text-decoration: none;
  color: var(--title);
  text-align: center;
  cursor: pointer;

  font-size: 6rem; 
  font-weight: lighter; 
  letter-spacing: 1rem;
  }



nav {
position: fixed;
top: 10rem;
margin: 0px;
padding: 0px;
width:100%;
_z-index: 10;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
border-bottom: 1px solid var(--line);
}

nav a { 
display: inline-block; 
margin: 0px; 
padding: 1rem 1.8rem 1rem 1.8rem; 
font-weight: 400; 
color: var(--font);
font-size: 3.5rem;
font-size: 4rem;
}

nav a:hover {color: var(--font);}

p {padding: 1vw 2vw 2vw 2vw;}

a {color: var(--link); text-decoration: none; font-weight: bold;}

p.byline {
  text-align: end;
  font-weight: bold;
  margin-bottom: 5rem;
  }

.debug {
  position: fixed;
  bottom: 0px;
  z-index: 20;
  margin: 1rem;
  padding: 1rem;
  border: 1px solid var(--line); 
  background-color: var(--inset-bg); 
  border-radius: 1rem; 
  font-size: 50%;
  justify-self: center;
  justify-self: anchor-center;
  font-family: monospace;
  /* left: 0; */
  /* color: var(--blue-bic-pen); */
  }





article {
  margin: auto;
  margin-bottom: 11rem;
  margin-top: 27rem; /* to be optimized */
  max-width: 100%;
  /* border: 1px dashed red; */
  }

article h1 {
  padding: .5vw 2vw .2vw 2vw; 
  text-align: center; 
  font-weight: 600;
  letter-spacing: .8rem;
  }

article h2 {
  padding: .5vw 2vw .2vw 2vw; 
  text-align: left; 
  font-weight: 500;
  letter-spacing: .3rem;
  }

article h3 {
  padding: .5vw 2vw .2vw 2vw; 
  text-align: left; 
  font-weight: 400;
  letter-spacing: none;
  }

article p { text-align: justify; }

article ul li { 
  margin: .2vw 2vw .5vw 4vw;
  text-align: justify;
  } 

.gallery {
  margin:  0;
  padding: 0;  
  text-align: center;
  /* border: 4px dashed pink;*/
  }



/* Style pour aérer */
.wrapper_1 {padding: 1rem 0rem;} 
.wrapper_2 {padding: 2rem 0rem;} 
.wrapper_3 {padding: 2rem 0rem;} 

/* Style pour centrer un .sub_wrapper */
.wrapper {
display: flex;
justify-content: center;
align-items: center;
}


footer {
position: fixed;
width: 100%;
bottom: 0px;
z-index: 10;
height: var(--footer-height);
display: flex; justify-content: center; align-items: center; 
border-top: 1px solid var(--line);
}


.clear {display: block; clear: both;}



/* Style pour aligner les éléments à gauche */
.sub_wrapper { text-align: left; }


.main_photo { border: 1px solid black; width: 100%;}

.imglnk {
margin: 2rem;
position: relative;
display: inline-block;
width: 40%;
}

.imglnk img {
width: 100%;
border: 1px solid black;
}

.imglnk .titre {
_font-size: 3rem;
width: 100%;
position: absolute;
bottom: 20px;
text-transform: uppercase;
font-weight: bold;
background: rgba(0,0,0,60%);
color: white;
}

img.thumbnail {
  margin: 10px;
  padding: 10px;
  position: relative;
  border: 1px solid var(--line);
  height: var(--img-thumbnail-height);
  }


#wiki_syntax_tab {margin: auto;}

#wiki_syntax_tab td {
  padding-left: 3rem;
  vertical-align: top; 
  }



/* __________ admin (gestion du site) (old)__________ */






.admin {
margin: 1rem;
padding: 0;
border-radius: 1rem;
border: 1px solid var(--dark-line);
background-color: var(--admin-bg);
position: relative;
border: 1px solid red;
}

.admin h1 { 
text-align: center; 
font-weight: normal; 
letter-spacing: 0.1em;
font-size: 1.1em; 
}

.admin h2 { 
text-align: left; 
font-weight: normal; 
letter-spacing: 0.2em; 
font-size: 1.3em; 
}

.admin p {
padding: 0rem;
margin: 3rem 2rem; 
display: block;
}


.admin_textarea { 
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}



.legende_input {
text-align: center;
margin-left: -16px;
padding: 4px 6px 2px 6px;
border-radius: 3rem;
}

#account {
Position : fixed; 
top: 1rem; 
right: .7rem; 
z-index: 10; 
font-size: 9rem; 
opacity: 0.3;
}

#account:hover {
opacity: 1;
}

#add_photo, #legendes_form {text-align: center;} 
#add_photo h1 { margin-bottom: 5rem; }

.admin_legendes , .admin_photo_ordering { padding-left: 5rem; } 

.admin form label {margin: 3rem 2rem; display: block;}






/* __________ hr __________ */

hr {
border: 0px;
height: 1px;
margin-top: 1rem;
margin-bottom: 1rem;
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#FFF), color-stop(50%,#888), color-stop(100%,white));
background: -webkit-linear-gradient(left, #FFF 0%,#888 50%,white 100%);
background: -moz-linear-gradient(left, #FFF 0%, #888 50%, white 100%);
background: -ms-linear-gradient(left, #FFF 0%,#888 50%,white 100%);
background: -o-linear-gradient(left, #FFF 0%,#888 50%,white 100%);
background: linear-gradient(left, #FFF 0%,#888 50%,white 100%);
width:100%;
}



/* __________ videos __________ */

.videos {text-align: center;}
.videos p {text-align: center;}
.videos iframe {background-color: black;}












/* ____ Img like ____ */

.img_like {
  /* float: left;  */
  display: inline-flex;
  background-repeat: no-repeat;
  border: 1px solid black;
  margin: 20px;
  }

.img_like.one_icon {
/*display: flex;*/
align-items: center;
justify-content: center;
transition: opacity .25s, background .25s;
}

.img_like.two_icons {
/*display: flex;*/
align-items: center;
justify-content: space-between;
transition: opacity .25s, background .25s;
}

/* __________ old and new size photo __________ */

.old_size {border: 2px solid #F00 !important;}
.new_size {border: 2px solid #000 !important;}



/* __________ fancybox __________ */



.fancybox__container {
--fancybox-bg: rgba(0, 0, 0, 1) !important; 
} 

.fancybox__toolbar {
animation: none !important; 
--f-button-width: 100px !important;
--f-button-svg-stroke-width: 2 !important;
--f-button-svg-width: 40px !important;
--f-button-svg-height: 40px !important;
--f-button-bg: rgba(0, 0, 0, 1) !important;
margin-top: 1rem !important;
}

.fancybox__nav {
--f-button-svg-stroke-width: 2 !important;
--f-button-svg-width: 40px !important;
--f-button-svg-height: 40px !important;
}

.fancybox__infobar { _font-size: 2.5rem !important; }
.fancybox__caption { _font-size: 3rem; } 







/* _________ Graph & Histogram __________ */

.svg_stats {
background-color: var(--stat-bg);
border: 1px solid var(--line);
border-radius: 1rem;
}

.svg_stats_axe {
stroke: black;
stroke-width: 2;
}

.svg_stats_line {
stroke: black;
stroke-width: 2;
}

.svg_stats_point {
fill: var(--stat-fill);
stroke: black;
stroke-width: 2;
}

.historam_bar {
stroke: var(--font);
fill: var(--stat-fill);
stroke-width: 2px;
}




/* __________ Livre d'or __________ */

#guestbook {
  margin: 1rem; 
  padding: 1rem;
  }

#guestbook table tbody tr td {
  vertical-align : top;
  }

#guestbook .gb_article { 
width: 45rem;
margin:  2rem 1rem; 
padding: 2rem 1rem; 
border: 1px solid var(--line); 
background-color: var(--inset-bg); 
border-radius: 1rem; 
font-size: 90%;
}

#guestbook .gb_article .message_delete {
  display: block; 
  text-align: center; 
  margin-top: 1rem;
  }

#guestbook .gb_article .message {
  display: block; 
  text-align: left; 
  padding: 0;
  }

#guestbook .gb_article .name {
  display: block; 
  text-align: right; 
  font-weight: bold; 
  padding-top: 2rem;
  }

#guestbook .gb_article a {
font-weight: normal; 
}

#guestbook .gb_article .mail {
  display: block; 
  text-align: right;
  font-size: 95%;
  font-weight: normal; 
  }

#guestbook .gb_article form {text-align: left; padding: .7rem; margin: .7rem; border-color: transparent;}

#guestbook .gb_article form textarea, 
#guestbook .gb_article form input[type="text"] {
  outline: none;
  border: 1px solid var(--line);
  margin: .7rem 0rem;
  padding: .5rem 1rem;
  cursor: pointer;
  background-color: var(--input-bg);
  border-radius: 1rem;
  font-size: 2.8rem;
  }

#guestbook .gb_article form input:focus[type="text"], 
#guestbook .gb_article form input:hover[type="text"], 
#guestbook .gb_article form textarea:focus, 
#guestbook .gb_article form textarea:hover { 
  background-color: var(--input-focus-bg);
  border: 1px solid black;
  }



/* __________ Article Form (like contact form) __________ */

.management_old {
    margin: 1rem;
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid var(--dark-line);
    background-color: var(--admin-bg);
    position: relative;
}

.edit_old { margin-top: 20rem; padding-left: 2rem;}

.edit_old form {    margin-bottom: 5rem;    }

article form { 
margin: 1rem 2rem 3rem 2rem; padding: 2rem 3rem 1rem 3rem; border: 1px solid var(--line); border-radius: 1rem; background-color: var(--inset-bg);
}

article form textarea, 
article form input[type="text"] {
outline: none;
border: 1px solid var(--line);
margin: .7rem 0rem;
padding: .5rem 1rem;
cursor: pointer;
background-color: var(--input-bg);
border-radius: 1rem;
font-size: 2rem;
}

article form input:focus[type="text"],
article form input:hover[type="text"],
article form textarea:focus,
article form textarea:hover {
background-color: var(--input-focus-bg);
border: 1px solid black;
}





















/* ____ copyright ____ */

#copyright {
  position: fixed;
  bottom: 0;
  right: 0;
  padding-right: 2rem;
  z-index: 20;
  height: var(--footer-height);
  display: flex; align-items: center; 
  }


/* ____ display information label ____ */

#display_info{
  Position: fixed;
  bottom: 0rem; left: 0rem;
  padding-left: 2rem;
  z-index: 20;
  height: var(--footer-height);
  display: flex; align-items: center; 
  }

#display_info #label {
/* perfect red circle */
border: 4px solid red; width: 5rem; height: 5rem; border-radius: 50%; 
/* V. & H. perfect centering: */
display: inline-flex; justify-content: center; align-items: center; 
/* épaisseur de la police à 600, c.a.d juste en dessous de bold (bold=700) */
font-weight: 600; 
margin-right: 1.5rem;
}



/* __________ Google icon and picto __________ */

.picto { vertical-align: bottom; }  

.icon { 
  font-family: 'Material Icons Outlined'; 
  font-size: 6rem; 
  font-weight: normal; 
  vertical-align: bottom;  
  opacity: 0.5; 
  cursor: pointer; 
  transition-property: opacity, transform, background, color; 
  transition-timing-function: ease; 
  transition-duration: .5s; 
  }

.icon:hover { opacity: 1; }


input.icon { background-color: transparent;border-color: transparent;color: var(--font);}

footer .icon { padding: 0 2rem; }





/* ____ Hover Effect ____ */

.hover-effect {opacity: 0.5; cursor: pointer; transition-property: opacity, transform; transition-timing-function: ease; transition-duration: .5s;}
.hover-effect:hover {opacity: 1;}





/* ____ Login (2025-03) ____ */

#login_button {
  Position : fixed;
  top: 1rem;
  right: .7rem;
  z-index: 30;
  font-size: 9rem;
  opacity: 0.3;
  }

#login_button:hover {opacity: 1;}

#login_box {
  visibility: hidden;
  border: 1px solid var(--dark-line);
  background-color: var(--admin-bg);
  Position : fixed; 
  top: 0px; 
  right: 0px; 
  z-index: 30;
  }
  

#login_box form {margin: 0; padding: 1.2rem 1rem 1.2rem 5.5rem;}

#login_box form input.icon {
  font-size: 7rem; 
  margin-bottom: 1.2rem; 
  margin-right: 1rem;
  }

#login_box form #login,
#login_box form #password {
  margin: 1rem;
  padding: .5rem 2rem;     
  border: 1px solid var(--dark-line);
  border-radius: 1rem;
  font-size: 4rem; 
  letter-spacing: 0.05em; 
  }

#login_box form #login:autofill, 
#login_box form #password:autofill 
{box-shadow: inset 0 0 0 100px white;}







/* ____ Admin menu (2025) ____ */

#admin_menu {
  visibility: hidden; 
  Position : fixed; 
  top: 0; 
  right: 0; 
  margin: 1rem;
  padding: 0;
  /* font-size: 4rem;*/
  font-size: 120%;
  border: 1px solid var(--dark-line);
  background-color: var(--admin-bg);
  border-radius: 20px; /* 1px more than #toggle_label border-radius */
  z-index: 40;
  }

#admin_menu #connected_user {
  color: var(--title);
  text-align: center; 
  font-weight: bold;
  padding: 1rem;
  border-bottom: 1px solid var(--dark-line); 
  }

#admin_menu ul { margin: 1rem 1.2rem 2rem 1.2rem; }

#admin_menu li { 
  display: block; 
  border: 1px solid transparent;
  }

#admin_menu li a {
  display: flex;
  padding: 1rem;
  width: 100%;
  font-weight: 400;
  justify-content: space-between;
  align-items: center;
  }

#admin_menu li a .icon {
  font-size: 5rem;
  margin-left: auto;
  transition-duration: 0s; 
  }

#admin_menu li:hover {
  border: 1px solid var(--dark-line); 
  border-radius: 1rem;
  background-color: white;
  }

#admin_menu li:hover a .icon { opacity: 1; }
#admin_menu li a.actif       { font-weight: bold; }
#admin_menu li a.actif .icon { opacity: 1; }





/* ____ Admin Menu expand and collapse ____ */

#toggle_label {
  display: flex;
  height: 9rem;
  background-color: var(--admin-dark-bg);
  color: white;
  cursor: pointer;
  font-size: 125%;
  text-align: right;
  border-radius: 19px; /* 1 px less than #admin_menu border-radius */
  border: none;
  transition: border-radius 1s ease;
  align-items: center;    /* Center vertically */
  justify-content: right; /* Aligns text to the right */
  padding-right: 1rem;    /* Prevents text from sticking to the edge */
  }

#toggle_checkbox:checked + #toggle_label { border-radius: 19px 19px 0 0; }

#toggle_content {
  max-height: 0rem; 
  overflow: hidden;
  transition: max-height 1s ease;
  margin-right: 5px;
  }

#toggle_checkbox:checked + #toggle_label + #toggle_content {
  max-height: 100rem;
  }

#toggle_label::after {
  content: "\ead0";
  font-family: 'Material Icons Outlined';
  font-size: 150%;
  margin-left: 2rem;
  }


#toggle_checkbox:checked + #toggle_label::after {
  content: "\eacf";
  }


/* _____ hack char Size on cel phone ___        */
/* Hack 2025 for the bug concerning the size of */
/* characters on cell phones in "article p"     */

article,
article p,
#more_info,
video,
video p,
ul, 
li {
text-size-adjust: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
text-align: justify;
}



/* ____ management zone ____ */

.management { 
  position: relative;
  border: 1px solid var(--dark-line);
  background-color: var(--admin-bg);
  width: 100%;
  padding: 6rem 2rem 2rem 2rem; 
  margin-bottom: 3rem;
  }

.management .page_name {
  position: absolute;
  top: 10px;
  left: 10px;
  padding-left: 8rem;
  font-size: 115%;
  }

.management .box_title {
  position: absolute;
  top: 10px;
  font-size: 115%;
  justify-self: anchor-center;
  }

.management .box_name {
  position: absolute;
  top: 10px;
  right: 10px;
  padding-right: 8rem;
  font-size: 115%;
  }

.management .message {
  display: block;
  text-align: center;
  margin-top: 5rem;
  margin-bottom: 5rem;
  }
.management .message p {
  text-align: center;
  }

.management form {
  margin: 0;
  padding: 0;
  padding-left: 5rem;
  padding-right: 5rem;
  border: none;
  background-color: transparent; 
/*   display: flex;  
   flex-direction: column; 
   gap: 1rem; */
  width: inherit;
  text-align: center;
  align-items: center;
  }

.management form textarea {
  letter-spacing: 0.1em;
  padding: 1rem;
  width: -webkit-fill-available;
  }

.management form .textarea_description {
  float: right;
  opacity: 0.25;
  margin-top: -6.5rem;
  margin-right: 3rem;
  }



.management form input[type="text"] {
  letter-spacing: 0.1em;
  width: 50rem;
  padding: 1rem;
  }



.management .gallery {
  margin-bottom: 4rem;
  /* border: 2px dashed red; */ 
  }


.management .icon { 
  /* display: block; */   /* modif du 11 avril 2025 pour bug du centrage du bouton validé */ 
  justify-self: center;  
  }


.img_like .icon_over_image { 
  display: flex !important; 
  border-radius: 50%; 
  width: 4rem; 
  height: 4rem; 
  justify-content: center;
  align-items: center;
  margin: 1rem;
  background: white; 
  opacity: 0;
  }

.img_like:hover .icon_over_image {opacity: .6;}

.img_like .icon_over_image:hover {opacity: 1}




/* ____ specificity of photo add-on management ____ */

.management_add_photo form { margin-top: 3rem;}
.management_add_photo form #photo_select_label .icon { font-size: 300%;}
.management_add_photo form input[type="text"]{ margin-bottom: 2.5rem;}
.management_add_photo form #photo_select[type=file]::file-selector-button {display: none;}
.management_add_photo form #photo_select {
  font-size: 3rem; 
  text-align-last: center; 
  margin-bottom: 2rem;
  }





/* __________ more info __________ */

#more_info_checkbox {
position: absolute;
cursor: pointer;
margin-left: 1rem;
margin-top: -2.4rem;
display: flex;
}

#more_info_checkbox_label {
position: absolute;
font-size: 75%;
margin-left: 4.8rem;
margin-top: -3.1rem;
display: flex;
}

#more_info_checkbox:before , #show_wiki_syntax:before {
content: "";
display: block;
position: absolute;
width: 2rem;
height: 2rem;
top: -.5rem;
left: 0;
border: 2px solid #555555;
border-radius: 3px;
background-color: white;
}

#more_info_checkbox:checked:after , #show_wiki_syntax:checked:after {
content: "";
display: block;
width: 5px;
height: 10px;
border: solid black;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 0;
left: .8rem;
font-weight: bold;
}

#more_info {
display: none;
margin: 3rem;
font-size: 80%;
justify-items: center;
} 

#more_info_checkbox:checked ~ #more_info { display: block; }

#more_info td {padding: 1.5rem 3rem;}







/* __________ Responsive design __________ */

/* ____ Styles pour [A] les smartphones en mode portrait ____ */
@media screen and (max-width: 600px) {
#display_info #label:before {content: 'A';}
_header {_font-size: clamp(3rem, 7vw, 99rem);}
nav { height: 14rem; }
nav a { _font-size: clamp(0rem, 4vw, 99rem); padding: 1rem 1.5rem 1rem 1.5rem; }
.main_photo { width: 100%;}
img.thumbnail { padding: 0rem; }
form[name="contact"] {margin-top: 60rem;}
}

/* ____ Styles [B] pour les écrans de taille moyenne ____ */
@media screen and (min-width: 601px) and (max-width: 1199px) {
#display_info #label:before {content: 'B';}
form[name="contact"] {margin-top: 60rem;}
img.thumbnail { padding: 0rem; }
}




/* ____ Styles [c] pour les PC (2025-03) ____ */

@media screen and (min-width: 1200px) {

#display_info #label:before {content: 'C';}
p.column_layout { column-count: 2; column-gap: 6rem; }

:root       { --footer-height: 6rem; }
body        { font-size: 2.5rem;     }
article     { max-width: 90rem;      }
article     { margin-top: 20rem;     }
article p   { text-align: justify;   }
nav a       { font-size: 2.8rem;     }
#login_box  { margin: 1rem; border-radius: 2rem;     }
#toggle_content      { max-height: 100rem;           }
#toggle_label        { border-radius: 19px 19px 0 0; }
#toggle_label::after { visibility: hidden;           }
.management          { border-radius: 1rem;          }
.management form .textarea_description { opacity: 0.2; font-size: .75em; margin-top: -4.5rem; }
}