@CHARSET "UTF-8";

:root {
  --color-green: #009E00; /* #0CA900 */
  --color-blue: #2b669e; /* #306496 */
  --color-orange: #e98000;
  --color-gray: #f2f2f2;
  --color-red: firebrick;
  
  --color-ia-one: #6e8fd3;
  --color-ia-two: #b270e7;
  
  --color-highlight: #d6efffff;
  
  --width-page-margin: 40px;
  --width-menu: 230px;
  --width-menu-folded: 40px; 
  
  --button-radius: .35em;
  --box-radius: .35em;
  
  --font-base: "open sans", "Segoe UI", sans-serif;
  --font-hx: 'Montserrat', sans-serif;
  --font-hx-stretch: 95%;
  
  --header-background: #000;
  --header-color: #ffffffe5; /* #ffffffe5 000000c3*/
  
  --logo-url: url('../img/label/alyze-dark.svg');
}

html{font-size: 14px; }
body{background-color: #fff; font-family: var(--font-base); margin: 0; color: #000;}


header{height: 64px;}

header nav{position: fixed; top: 0; width: 100%; z-index: 999; padding: 7px 0 7px 0; height: 50px; display: flex; justify-content: space-between; background-color: var(--header-background); /*box-shadow: 3px 2px 5px #ddd;*/ transition: all .2s ease-in-out;}

/*header:has(nav + #headline) nav{box-shadow: none;}*/

header.shrink nav{font-size: 0.8rem; padding: 2px 0 2px 0; height: 42px;}
header.shrink nav .logo{ height: 42px;;}
header.shrink nav .rightmenu li{display: inline-block; margin-top: .85em; transition: all .4s ease-in-out;}
header.shrink nav .rightmenu li:first-child{padding-right: 1em; border-right: 1px solid var(--header-color);}
header.shrink #headline{top: 42px; height: 0px; overflow: hidden; transition: height 1.5s;}
header.shrink #headline-perm{height: 0px; display: none; overflow: hidden; transition: height 1.5s;}

#headline, #headline-perm{position: fixed; top: 64px; width: 100%; height: 34px; line-height: 34px; z-index: 900; font-size: 14px;background: var(--color-blue);color: white; text-align: center;}
#headline + #headline-perm{top: calc(64px + 34px);}
#headline-perm{background: var(--color-gray); color: #000; box-shadow: 3px 2px 5px #ddd;}
#headline-perm a{text-decoration: underline;}

#headline .in_close{float: right; margin-right: 2em;}
#headline a{color: inherit; text-decoration: underline;}

header:has(#headline){height: calc(64px + 34px);}
header:has(#headline-perm){height: calc(64px + 34px);}
header:has(#headline):has(#headline-perm){height: calc(64px + 34px + 34px);}

.logo{ margin: 0; padding-left: var(--width-page-margin); height: 50px; display: inline-block; text-align: center; line-height: 1.3em; transition: all .2s ease-in-out; font-size: 2em; width: var(--width-menu); background: var(--logo-url); background-repeat: no-repeat; background-size: auto 65%; background-position: calc(50% + 10px) center;}
.logo:hover{background-size: auto 70%;}
.logo a{display: inline-block; width: 180px; color: transparent; padding-right: 10px; height: 100%; user-select: none;}
.logo a:hover{color: transparent; text-decoration: none;}


._display{display: initial;}
._hide{display: none;}



.rightmenu{flex: 1; list-style-type: none; padding: 0; padding-right: var(--width-page-margin); z-index: 20; text-align: right; float: right; font-size: 1rem; margin: 0; transition: all .4s ease-out;}
.rightmenu .ph, .rightmenu .ph-fill, .rightmenu .ph-bold{margin-right: .4em; margin-left: .7em; color: #777;}
.rightmenu > li a{color: var(--header-color); }
.rightmenu > li a:hover{text-decoration: none; color: var(--color-orange); transition: all 0.4s  ease-in-out;}
.rightmenu > li a:hover strong{color: var(--color-orange);  transition: all 0.4s  ease-in-out;}
.rightmenu > li a:hover .ph, .rightmenu > li a:hover .ph-fill, .rightmenu > li a:hover .ph-bold{color: var(--color-green);}

.rightmenu .ph.active, .rightmenu .ph-fill.active{color: var(--color-green);}

.topmenu{flex: 1; list-style-type: none; margin: 5px 0; padding-left: 20px; clear: both; font-weight: 700; font-size: 1.15em; } 
.topmenu li{display: inline-block; line-height: 38px;  margin: 0 1em 0 0; padding: 0;}
.topmenu li a, .topmenu li span{padding: 0 0.5em;  display: block; color: var(--header-color); border-bottom: 3px solid transparent; line-height: 2.3em; cursor: pointer;}
.topmenu li a:hover, .topmenu li span:hover{text-decoration: none; border-color: var(--color-orange); transition: all 0.8s; }
.topmenu li strong a, .topmenu li strong span{border-bottom: 3px solid var(--color-orange); transition: all 0.6s ease-in-out; font-weight: 700;}


.main-container{min-height: 100vh;  display: grid;grid-template-columns: auto 1fr;transition: grid-template-columns 0.3s ease-in-out;}

#menu-tools{width: var(--width-menu); min-width: var(--width-menu); margin-right: 3em; margin-top: 3em; border-right: 1px dotted #bbb; margin-left: var(--width-page-margin);  transition: width 0.3s ease-in-out; z-index: 200; position: relative;}

#menu-tools div{position: fixed; width: var(--width-menu); transition: width 0.3s ease-in-out; position: relative;}

.tools-list{list-style: none; margin: 0px; padding: 0; /*background-color: var(--color-gray);*/  }
.tools-list li{ margin: 0 0 2px 0; font-weight: 500; white-space: nowrap;}
.tools-list li a .ph{margin-right: .8em;}
.tools-list li a{display: block; padding: .7em 1em; color: #666; }
.tools-list li .ph{ opacity: 0.8;
    border-radius: 15%;
    text-align: center;
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    line-height: 1.2em;
    padding: .2em;}
.tools-list li strong .ph{ opacity: 1; background: var(--color-orange);
    color: white;}
.tools-list li a:hover{text-decoration: none; color: inherit;}
.tools-list li a:hover .ph{ opacity: 1;  }
.tools-list li strong a{ color: #222;  font-weight: 700;}
.tools-list li.separated{border-top: 1px dotted #bbb; margin-top: 1em; padding-top: 1em;}


.lang_menu{list-style-type: none; padding: 0; margin: 1em 0; cursor: default; z-index: 0; height: 1.5em; overflow: hidden; text-align: center; margin-top: auto; display: flex; flex-direction: column-reverse; transition: height 0.3s ease-in-out; position: fixed; bottom: 0; min-width: var(--width-menu); }
.lang_menu:hover{height:5em;}
.lang_menu a{color: inherit; }
.lang_menu a:hover{text-decoration: none; color: inherit; font-weight: 600;}
.lang_menu li{line-height: 1.75em; padding: 0; margin: 0; display: block; width: var(--width-menu);}
.lang_menu strong{font-weight: 500; http://localhost/alyze/}
.lang_menu strong::after{content: '+'; color: #222; display: inline-block; transform: rotate(-0.25turn); margin-left: .5em;}
.lang_menu:hover strong::after{}
.lang_menu .ph-fill{margin-right: .3em;  color: var(--color-blue);}

main{min-width: 0; margin: 40px 80px 40px 0; }




.fold-button{transition: transform .7s ease-in-out; display: inline-block; margin-right: .5em;}
#menu-tools .fold-button{float: right; font-size: 1.25em; color: #888; margin: 20px 15px; z-index: 100; position: relative;}
#menu-tools .fold-button:hover{color: var(--color-orange);}

body[data-fold='true'] #menu-tools{width: var(--width-menu-folded); min-width: var(--width-menu-folded); border: none;}
body[data-fold='true'] #menu-tools div{width: var(--width-menu-folded);}
body[data-fold='true'] .lang_menu{min-width: var(--width-menu-folded);width: var(--width-menu-folded);}


#menu-tools .tools-link{font-style: italic; white-space: nowrap; color: #444;}
#menu-tools .tools-link a{color: inherit;}

body[data-fold='true'] #menu-tools  .tools-link{width: 0px; overflow: hidden;}

body[data-fold='true'] .tools-list li{overflow: hidden; }
body[data-fold='true'] .tools-list li a{z-index: 999;}
body[data-fold='true'] .tools-list li .w_warning{display: none;}
body[data-fold='true'] .tools-list li.light .text{display: none}
body[data-fold='true'] .tools-list li.light .ph{margin-left: 0;}
body[data-fold='true'] .tools-list li.light:hover .text{display: initial;}
body[data-fold='true'] .tools-list li.light:hover .ph{margin-left: 1em;}
body[data-fold='true'] .tools-list li:hover{overflow: visible; width: 200px; background: var(--color-gray); }


body[data-fold='true'] .fold-button{transform: rotate(180deg);}



form, #form{line-height: 22px; text-align: left; padding: 0.45em; /*background-color: #ededed;*/ /*box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.05);*/}

form.white, .blog form.white{border: none; box-shadow : none !important; padding: 0; background-color: white !important;}

fieldset{border: 1px solid #aaa; margin: 1em 0; text-align: left;}
fieldset .button{line-height: inherit; }

#nav_bar{z-index: 15; border-radius: var(--box-radius); background: var(--color-gray); border: 1px solid #ddd; text-align: center;}
.exhibition #nav_bar{margin-left: 0; background: none; border: none;}
#nav_bar fieldset{display: inline-block; text-align: left; border: none; padding: 0; margin: 0;}
#nav_bar fieldset a{color: inherit;}

form nav{cursor: pointer; background-color: #eee; color: #444; padding: .4em; border-radius: var(--button-radius); border: 2px solid #ccc;  background-color: #fff; color: #222;  font-size: 1.05em; /*font-weight: bold;*/  border: 0; padding: 0px 8px 0px 12px;/*  box-shadow: 2px 3px 5px -1px rgba(0,0,0,0.4); */  border: 1px solid #bbb; display: inline-block;  user-select: none; line-height: 1.95em;
 font-stretch: 90%;}
form nav.inactive{color: #999 !important;}
form nav span{color: var(--color-green); margin-left: 3px;}
form nav.inactive span{color: #999;}


input, select, textarea, button{font-size: 1.05em; color: #222; display: inline-block; font-family: "open sans", "Segoe UI", sans-serif;  padding: 0px 0.6em; margin-bottom: 0.3em; border-radius: var(--button-radius); border: 1px solid #bbb; background-color: #fff; line-height: 1.95em;}
/*input, select, button{line-height: 29px; height: 29px;}*/
input.small, select.small, button.small, .button.small{line-height: 19px;padding: 2.5px 6px;font-size: 13px;}
input.small{height: 19px;}


.presentation select, .presentation input, .options select, .options input, #form_dyn select, #form_dyn input{height: auto;}

textarea{font-family: monospace;}

[role="button"]{cursor: pointer; user-select: none;}
[contenteditable="true"] {cursor: text;outline: none;}

input[type="submit"], button, .button{cursor: pointer; font-size: 1.05em; background-color: #fff; color: #444; border: 1px solid #bbb; border-radius: var(--button-radius); user-select: none; font-stretch: 90%; padding: 0 .6em;}

.button{padding: 0.3em 1em; margin: 0.3em 0; display: inline-block;}
.highlight,input[type="submit"].highlight{background-color: var(--color-green); color: #fff; border-color: var(--color-green);}

.highlight-blue,input[type="submit"].highlight-blue{background-color: var(--color-blue); color: #fff; border-color: var(--color-blue);}
.highlight-blue:hover,input[type="submit"].highlight-blue:hover{background-color: #222 !important; border-color: #222 !important;}

.highlight-orange,input[type="submit"].highlight-blue{background-color: var(--color-orange); color: #fff; border-color: var(--color-orange);}
.highlight-orange:hover,input[type="submit"].highlight-blue:hover{background-color: #222 !important; border-color: #222 !important;}

.highlight-dark,input[type="submit"].highlight-dark{background-color: #333; color: #fff; border-color: #333;}
.highlight-dark:hover,input[type="submit"].highlight-dark:hover{background-color: #000 !important;  border-color: #000 !important;}
.highlight-dark.sign_wait:before, .highlight-dark .sign_wait:before{color: white;}

.highlight-gray,input[type="submit"].highlight-blue{background-color: #ededed; color: #000; border-color: #ededed !important;}
.highlight-gray:hover,input[type="submit"].highlight-blue:hover{background-color: #222 !important;}


.highlight-light{background-color: var(--color-highlight); color: #111; border-color: var(--color-highlight);}
.highlight-light:hover,input[type="submit"].highlight-light:hover{background-color: var(--color-blue); border-color: var(--color-blue) !important; color: white;}

.button.highlight svg, button.highlight svg{fill: white;}
.button.highlight:hover,button.highlight:hover,input[type="submit"].highlight:hover{background-color: var(--color-blue); border-color: var(--color-blue);}
button a{color: inherit;}
.inactive, .button.inactive{color: #999; background-color: #fff; border-color: #bbb; cursor: default;}
input[type="submit"][disabled="disabled"], .button.inactive:hover, button[disabled]{color: #aaa !important; border-color: #ccc !important; cursor: default; background-color: white  !important;}
.inactive:hover{border-color: #bbb; color: #999; background-color: #FFF;}
.button.warning{background-color: var(--color-orange); color: #fff; border-color: var(--color-orange);}
.button.warning:hover{background-color: darkred;}


.light-text, button.inline.light-text, button_inline.light-text{color: #666;}





.button span{color: var(--color-green);}

button.icon-only i, .button.icon-only i{line-height: 1.8em;}

.ph-question[data-over]{color: #aaa;} 

/*button.ia{font-size: .9em; float: right; background: linear-gradient(317deg, #6e8fd3 0%, #b270e7 99%); color: #fff; border: none;}*/
button.ia{margin-top: .8em;}
button.ia .ph, button.ia .ph-fill{color: var(--color-blue) !important; margin-right: .6em;}
button.ia:hover .ph, button.ia:hover .ph-fill{color: inherit !important;}

button.inline, .button_inline{border: none; padding: 0; margin: 0; line-height: inherit; color: #222; font-stretch: 100%; background: none;}
button.inline:hover, .button_inline:hover{background: none; color: #000; text-decoration: underline;}
/*button.ia:hover{background: #9b119b;}
button.ia i{color: #fff; font-size: 1.2em;vertical-align: middle;margin-right: .5em;}*/

a:hover:has(i.ph-arrow-square-out){text-decoration: none;}

.ph.ia, .ph-fill.ia{color: var(--color-blue) !important; font-size: 1.15em;}



.list_emphasis{list-style-type: none; padding: 0;}
.list_emphasis li{background: #e5f5ff; margin: 1px 0 0 0; padding: .6em; font-size: .95em; cursor: default;}
.list_emphasis li:hover{background: #e5e9ff;}


.list_emphasis .ph[role=button]:hover{color: var(--color-orange);}

.text_emphasis{background-color: var(--color-highlight); padding: 0.6em;}
.text_emphasis p{line-height: 1.5;}
.text_emphasis h1{color: #222; font-stretch: normal;font-weight: bold;/*border-bottom: 1px dotted #222;*/}
.text_emphasis h2{color: #222; font-stretch: normal;font-weight: bold;/*border-bottom: 1px dotted #222;*/}
.text_emphasis h3{color: #222; font-stretch: normal;font-weight: bold;}
.text_emphasis .i{background-color: #eff8ff; font-weight: 500; line-height: 1.7;}

input.emphasis[type=text]{background: #e5f5ff; padding: 6px 8px; border: none; width: 95%; font-size: inherit; margin-top: -2px; margin-bottom: -2px; font-weight: 600;}
input.emphasis[type=text]:hover{background: #e5e9ff;}
input.emphasis[type=text]::placeholder {color: #00000088;}

/*.text_emphasis:hover{background: #e5e9ff;}*/
.copy_box{float: right; font-size: 1.35em;  padding-left: 0.4em; position: relative; z-index: 10; /*background: var(--color-highlight);*/}
.copy_box .ph{color: var(--color-blue);}

span[data-over=tooltip]:not(.no-highlight), strong[data-over=tooltip]:not(.no-highlight){border-bottom: 1px dotted #00000044;}
span[data-over=tooltip]:not(.no-highlight):hover, strong[data-over=tooltip]:not(.no-highlight):hover{border-bottom-color: #000000bb;}
.analyze_table_action span[data-over=tooltip]{border-bottom: none;}

span.contrast-emphase[data-over=tooltip]{border-bottom: none; color: #222;}
span.contrast-emphase[data-over=tooltip]:hover{border-bottom: 1px dotted #000000bb; color: #000;}

.inline_img{height: 1em;}


.info_title{font-size: 1.75em;font-weight: 500; font-family: inherit; font-stretch: 95%; margin-bottom: 0.3em; margin-top: 1.5em;}
.info_title a:hover{color:inherit;}
.info_bar{font-size: 0.97em; color: #666; cursor: pointer;}

.nav_page{text-align: right; float: right; margin-bottom: 10px; margin-top: 0px; font-size: 13px; }

.nav_page span{color: #aaa; background-color: #ddd; padding: 2px 5px; border-radius: 4px;  cursor: default;}
.nav_page a, .nav_page span[role=button]{color: #fff; background-color: var(--color-green); padding: 2px 5px; border-radius: 4px;  text-shadow: 1px 1px 0px #003d4f; cursor: pointer;}
.nav_page a:hover, .nav_page span:hover[role=button]{text-decoration: none !important; cursor: pointer;}

.error:before{content : "\2716"; color: firebrick; border: 2px solid #ccc; border-radius: 50%; line-height: 1.3em; width: 1.3em; display: inline-block; text-align: center;  margin-right: 0.6em;}


.analyse_error, .analyse_warning, .analyse_info, .analyse_error_info, .analyse_valid, .analyse_valid_info{}

.analyse_error:before, .analyse_warning:before, .analyse_info:before, .analyse_error_info:before, .analyse_valid:before, .analyse_valid_info:before, .analyse_idea:before{line-height: 1em; width: 1em; font-size: 1em; display: inline-block; text-align: center;  margin-right: 0.5em; border-radius: 50%;}

.analyse_error:before{content : "×"; background: firebrick; color: white;  text-shadow: 1px 1px 0px #444; box-shadow: 1px 1px 0px rgba(0,0,0,0.35);}
.analyse_warning:before{content : "×"; background: var(--color-orange); color: white;  text-shadow: 1px 1px 0px #444; box-shadow: 1px 1px 0px rgba(0,0,0,0.35);}
.analyse_info:before{content : "ℹ"; background: #fff; color: #888; border: 1px solid #aaa;}
.analyse_error_info:before{content : "ℹ"; background: var(--color-orange); color: white; text-shadow: 1px 1px 0px #444; box-shadow: 1px 1px 0px rgba(0,0,0,0.35);}
.analyse_valid:before{content : "✓"; background: #fff; color: var(--color-green); border-radius: 3px; }
/*.analyse_valid:before{content : "+"; background: #fff; color: var(--color-green); border-radius: 3px; }*/
.analyse_valid_info:before{content : "ℹ"; background: #fff; color: var(--color-green); border: 1px solid #aaa;}
.analyse_idea:before{content : "💡"; background: #fff; color: var(--color-green); border: 1px solid #aaa;}


.analyse_help{border-radius: 5.5px; padding: 5px 8px; /*background: #e5f5ff;*/ background: #f3f3f3; color: #000000dd; margin-top: 1em !important; margin-bottom: 1em !important;}
.analyse_help .ph:not(button *):not(.button *){font-size: 1.4em; vertical-align: middle; margin-right: .4em; color: #000000aa;}
.analyse_help a:not(.button){color: #000000ee;}

.analyse_help .sign_wait{padding: .15em;height: 1.45em;}

input[type="submit"]:hover, button:hover, .button:hover{text-decoration: none; background-color: var(--color-green); color: #fff; border-color: var(--color-green);}
.button:hover span{color: #fff;}

/* #sbody input, .blog input{margin-bottom: 5px;} */
/* #sbody form,  */.blog form, #popin form, .formlike{text-align: left; padding: 8px; border: 1px solid #ccc; background-color: #f6f6f6; box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.15); border-radius: 5px;}

div .table:not(:first-child){display: none;}

/* #illus{background-image: url("IMG_0552.JPG"); background-position: 0 -250px; margin-top: 10px; padding-bottom: 0px; }
#illus h1, #illus li{color: #fff}
 */
 
 

.options{margin: 6px auto auto auto; text-align: left; display: none; position: absolute; z-index: 5; font-size: 0.93em;}
.options > div{margin: 0.5em 0 0 0; text-align: left; background-color: #fff; padding: .75em; border: 1px solid #bbb; border-radius: var(--box-radius);}

.options textarea{font-size: 12px; width: 90%; background-color: #F0F0F0;}
.options p input{font-size: 14px;}
.options select{font-size: 14px;}
.options .alyze_proxies_list label{padding-right: 5px; border-radius: 0.5em; display: inline-block;}
.options .alyze_proxies_list label:hover{background: rgba(0,0,0,0.2);}

.option_saved_pages{ margin: 0 5px; line-height: 29px;}
.option_saved_pages span{cursor: pointer; color: #777; font-size: 1.5em; margin: 0 2px;}
.option_saved_pages span:nth-child(1):hover{color: var(--color-orange);}
.option_saved_pages span:nth-child(2):hover{color: var(--color-green);}

.presentation .option_saved_pages span{color: #eee !important;}

#suggest_form{position: absolute; border: 1px solid #ccc; background-color: #fff; text-align: left; font-size: 14px; padding: 3px; display: none; z-index: 7;}
#suggest_form div{padding: 2px 10px; }

.suggest{text-align: center; margin-bottom: 20px;}
.suggest .coll{display: inline-block; vertical-align: top; margin-right: 20px; text-align: left; margin-right: 20px; width: 30%;}
.suggest .coll:first-child{width: 200px;}
.suggest h1{margin-top: 0; color: #444; font-size: 22px;}
.suggest table{width: 100% !important; display: block !important;}
.suggest tbody td:first-child{ font-size: 14px; padding: 5px; width: 90%; }
.suggest tbody td:first-child a{color: #444;}

.jauge{background-color: #ddd; width: 100%; margin: 0 0 15px 0;  padding: 0 !important;}
.jauge div{background-color: var(--color-green); margin: 0; height: 8px; padding: 0 !important;}


.suggest2{display: grid; grid-template-columns: 1fr 180px; gap: 25px;}
.suggest2_cols{columns: 340px auto; column-gap: 15px; }
.suggest2_cols div{break-inside: avoid;}

table .jauge{width: 80px; margin: 9px 0 0 0;}
table .jauge div{margin: 0; height: 6px;}

a, .link{color: #0000e0; text-decoration: none; cursor: pointer; background: none; padding: 0; border: none; font-family: inherit; font-size: inherit;}
a:hover, .link:hover{text-decoration: underline;background: none;color: #0000e0;}

img{border: 0;}

h1{font-size: 2.2em; color: #222; font-family: var(--font-hx); font-stretch: var(--font-hx-stretch); font-weight: 600;}
h1 a{color: #222;}


h2{margin: 1em 0 1em 0; padding: 0; color: #222; font-size: 1.7em; border-bottom: 0px solid #ccc; padding-bottom: 3px; font-weight: 600; font-family: var(--font-hx); font-stretch: var(--font-hx-stretch);}
/* h2::first-letter{color: var(--color-green);} */

h3{margin: .5em 0 .5em 0; padding: 0; color: #222; font-size: 1.3em; border-bottom: 0px solid #ccc; padding-bottom: 0px; font-weight: 600; font-family: var(--font-hx); font-stretch: var(--font-hx-stretch);}

h4{margin: .65em 0 0.5em 0; padding: 0; color: #222; font-size: 1.1em; padding-bottom: 0px; font-weight: 700; font-family: var(--font-hx); font-stretch: var(--font-hx-stretch);}
/*h3::first-letter{color: var(--color-green);}*/

.page h2:first-child{margin-top: 5px;}

/*strong{color: #222;}*/

pre{overflow: auto; display: block;}

abbr{border-bottom: 2px dotted #aaa; text-decoration: none !important; }

hr{border: 0; border-bottom: 1px dotted #bbb;}

ul li{margin-top: 4px; margin-bottom: 4px;}



.fixed-nav{position: fixed; width: 100%; top: 0; margin: 0 !important; z-index: 99;}

p{text-align: justify; margin-block-start: 1em; margin-block-end: 1em;}
p.condensed{margin-block-start: .5em; margin-block-end: .5em;}

*:not(.wp-block-code) > code, .code{border-left: 4px solid var(--color-orange); padding: 5px 10px 5px 10px; background-color: #ededed; margin: 5px 5px 15px 5px; display: block; color: #555; }
.code{display: block;}
figure code, figure .code{margin: 0; text-align: left;}



.exhibition{text-align: center; padding-top: 1em; font-size: 16px; line-height: 1.65em;}

.exhibition + form{text-align: center; margin-bottom: 0 !important;}
.exhibition h1{font-size: 3.1em; line-height: 1em; color: #222; margin-top: 1em; margin-bottom: .4em; color: #000000dd;}
.exhibition p{text-align: center;  font-family: var(--font-hx); font-size: 18px; font-weight: 500;}
.exhibition.show_options *[data-click='display_options']{display: none;}
.exhibition.show_options .options{display: unset; position: unset;}

#turnstile-container {margin-top: .5em;}

.comp{}
.serp{background: linear-gradient(-45deg,#133981 0%,#546495 55%,#4c0554 99%); animation: AnimateBG 5s ease infinite; background-size: 100% 100%; background-position: center center;}
.crawl{background: linear-gradient(-45deg,#307991,#054a61,#307991);}
.urlchecker{background: linear-gradient(-45deg,#123e57,#237182,#195a69);}
.suggest{}



.anim {
  list-style: none;
  position: relative;
  height: 2em;
  overflow: hidden;
}

.anim li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.anim li:nth-child(1) {
  animation: fade 6s infinite;
}

.anim li:nth-child(2) {
  animation: fade 6s infinite 2s;
}

.anim li:nth-child(3) {
  animation: fade 6s infinite 4s;
}

@keyframes fade {
  0% { opacity: 0; }
  11.11% { opacity: 1; }
  33.33% { opacity: 1; }
  44.44% { opacity: 0; }
  100% { opacity: 0; }
}


.suboptions .suboption_cat{margin: 0 1em 0 0; padding: 0; border: none; width: 20%; display: inline-block; vertical-align: top;}
.suboptions .suboption_cat ul{list-style: none; margin: 0; padding: 0;}
.suboptions .suboption_cat ul li{display: block; cursor: pointer; background-color: #eee; padding: 0.5em 0.55em; border-radius: 0.5em; font-size: 14px;}
.suboptions .suboptions_content{margin: 0;  border: none; width: 75%; display: inline-block;font-size: 13px;}
.suboptions .suboptions_content ul{list-style: none; margin: 0; padding: 0;}
.suboptions .suboptions_content ul li{display: block; border-bottom: 1px dashed #aaa; padding: 0.3em; cursor: default;}
.suboptions .suboptions_content ul li:hover{background-color: #eee;}

.suboptions input{font-size: inherit}


.help summary, .help_button{display: block; font-size: 1em; width: 1.5em; height: 1.5em; line-height: 1.5em; text-align: center; font-weight: bold; border-radius: 
1em;  cursor: pointer; background-color: #aaa; color: #fff;  text-shadow: 1px 1px 0px #666;  user-select: none;}



.help_mark{background: #ddd; color: #777; font-weight: bold; border-radius: 50%; width: 1.2em; line-height: 1.2em; display: inline-block; text-align: center; font-size: 0.7em; padding: 0.15em; float: right; margin-left:1em; cursor: pointer;}

.help summary:hover{background-color: var(--color-orange); color: white;}


details.help {
    display: inline-block;
    margin: 0 0.5em;
}
details.help div{position: absolute; width: 380px; font-size: 0.9em; line-height: 1.33em; background-color: white; color: black; padding: 0.5em; margin-top: 0.5em; border-radius: 0.5em; box-shadow: 1px 1px 4px 1px rgba(0,0,0,0.3); z-index: 10;}

.help summary::-webkit-details-marker{
 display: none;
}



#form_dyn{font-size: 1em; margin-top: 0em;}
#form_dyn label{ font-size: .95em; font-stretch: 90%;}
#form_dyn label[for="analyse_classic"] span{color: #999; font-size: 0.9em; position: relative; top: -0.1em; font-weight: bold; }
#form_dyn label[for="analyse_dyn"] span{color: var(--color-orange);  font-size: 0.9em; position: relative; top: -0.1em; font-weight: bold;}

.presentation #form_dyn label{}
.presentation #form_dyn label span{}
.presentation #form_dyn label[for="analyse_classic"] span{color: #777;  }
.presentation #form_dyn label[for="analyse_dyn"] span{color: var(--color-orange); }





.w{clear: both; float: right; width: 170px; font-size: 0.95em; text-align: center; padding-top: 18px;}

.w .partners strong{font-size: 13px; color: #666;}
.w .partners li{padding: 12px 6px 12px 6px; background-color: #fff; border: 1px solid #ccc; margin: 8px 0px; text-align: center; font-size: 1.17em; font-weight: bold;}
.w .partners li img{max-height: 55px; max-width: 100%;}

#freeblockinfos{/*position: absolute; top: 1; left: 0; width: 100%;*/}

.g_ads_responsive{margin-right: 0px; margin-left: 0px; width: 160px; height: 900px; text-align: center;}

 /*.g_ads_responsive{margin-right: 0px; margin-left: 0px; width: 100%; height: 100px; text-align: center;}*/

.w p{margin: 0.55em 0;}
.w div, .w p, .w ul{}
.w div{margin-bottom: 10px;}
.w ul{list-style: none; margin: 0; padding: 0;}
.w ul li{background-color: #f0f0f0; padding: 5px; margin-top: 1px; margin-bottom: 1px; text-align: left;}

.box{font-stretch: 90%;padding: 4px;border: 1px solid #ccc;border-radius: var(--box-radius);}
.box input[type=text]{font-size: inherit; text-align: center; width: 100%; width: -moz-available; width: -webkit-fill-available; width: fill-available;}
.box + .box {margin-left: .5em;}
    
 .i .box:not(.highlight-light):not(.highlight){background: white;}

*[class^="ico_"] svg{width: 1.2em; height: auto; vertical-align: middle; margin: 0 8px 0 8px; fill: #555;}
*[class^="ico_"].light svg{fill: #fff;}

*[class^="ico_"][onclick], *[class^="ico_"][data-click]{cursor: pointer;}
*[class^="ico_"][onclick]:hover svg, *[class^="ico_"][data-click]:hover svg, a[class^="ico_"]:hover svg{fill: var(--color-green);}

button svg, .button svg{width: 1.2em; height: auto; vertical-align: middle; margin: 0 8px 0 0; fill: #555;}
button:hover svg, .button:hover svg{fill: #fff !important;}
.ico_csv svg{fill: #888;}
.ico_csv svg:hover{fill: var(--color-orange);}
.w .ico_twitter svg, .w .ico_facebook svg, .w .ico_link svg{width: 1.4em;  margin: 8px;}
.ico_twitter svg{fill: #76A9EA;}
.ico_facebook svg{fill: #3b5998;}
.ico_link svg{fill: #888;}
.ico_twitter svg:hover,.ico_facebook svg:hover,.ico_link svg:hover,.ico_pdf svg:hover{fill: var(--color-orange);}


.analyze_table_action{font-size: 1.4em; color: #555;}
.analyze_table_action a:hover{text-decoration: none;}
.button_link{color: #555; cursor: pointer; margin-left: 5px; margin-right: 5px;}
.button_link:hover{cursor: pointer;}
.button_link:hover{ color: var(--color-orange);}



.a, .hinfo{padding: 12px; border: 2px solid orange; border-radius: var(--box-radius); margin: 0 0 20px 0px;}
.i{padding: 12px; /*border: 2px solid var(--color-blue);*/ border-radius: var(--box-radius); background-color: var(--color-gray);}

.dymenu_right{display: inline-block; float: right; margin-top: 1px;}

.let_ranking{color: #fff !important; background: #aaa; height: 1.9em; line-height: 1.9em; width: 1.9em; display:inline-block; text-align: center; border-radius: 50%; font-weight: bold; overflow: hidden; text-shadow: 1px 1px 0px #666; cursor: pointer; font-stretch: 100%;}
.let_ranking > span{color: #fff !important; font-size: 0.7em; position: relative; top: -.1em;}
.let_ranking[data-rating='A+'],.let_ranking[data-rating='A']{background: var(--color-green)}
.let_ranking[data-rating='B+'],.let_ranking[data-rating='B']{background: #38c400}
.let_ranking[data-rating='C']{background: #acc700}
.let_ranking[data-rating='D']{background: #e87f00}
.let_ranking[data-rating='E']{background: #e86100}
.let_ranking[data-rating='F']{background: #e86100}
.let_ranking[data-rating='E']{background: #db4900}
.let_ranking[data-rating='G']{background: #db4900}
.let_ranking[data-rating='N/A']{font-size: 0.75em !important;
    height: 2.78em;
    width: 2.78em;
    line-height: 2.78em;}



.dymenu{margin: 28px 0 20px 0; padding: 0; font-size: 13px; z-index: 1;  /*text-align: center; text-transform: uppercase;  */ margin-left: 82px;}
.dymenu svg{width: 16px; height: 15px; vertical-align: bottom; margin-left: -2px; margin-right: 10px; display: inline-block; fill: #444;}

.dymenu li{list-style-type: none; display: inline-block; padding: 0; margin: 5px 8px 0 0; padding: 0; position: relative; /*border-top: 2px solid #555; border-left: 2px solid #555;  border-right: 2px solid #555;*/  }

.dymenu .ph, .dymenu .ph-bold, .dymenu .ph-fill, .dymenu .ph-duotone {margin-right: 8px;}

.dymenu li a, .dymenu li > span, .a_display > span{cursor: pointer; padding: 8px 12px 8px 12px; display: block; /*text-shadow: 1px 1px 0px #666; font-weight: bold;*/ color: #444; border-radius: var(--button-radius); background-color: #ededed;  box-shadow: 0px; transition: all 0.3s; font-stretch: 90%; font-size: 15px;}

.dymenu li:not(.sel) a:hover{text-decoration: none !important; background-color: #ddd; color: #000; /*background: linear-gradient(0deg, #ededed 93%, var(--color-green) 93%);*/}
.dymenu .sel a:hover{color: #fff; }

.dymenu .sel svg{fill: #fff !important;}
.dymenu .sel a:hover{background-color: var(--color-green); text-decoration: none;}
.dymenu .sel a, .dymenu .sel span{color: #fff; cursor: default; background-color: var(--color-green); }

.a_display{float: right; position: relative; top: 2px; float: none; z-index: 100;}
.dymenu .a_display > a, .dymenu .a_display > span, .a_display > span{padding: 4px; display: inline-block; white-space: nowrap; max-width: 20px; overflow: hidden; background-color: #fff; }
.a_display > span:has(i){border: 1px solid #ccc;}
.a_display i.ph, .a_display i.ph-light{font-size: 21px;}
.a_display #page_rate{border: none;}
.a_display > a svg, .a_display > span svg{fill: #444; width: 20px; height: 20px; margin: 0 10px 0 0;}
.a_display > a:hover, .a_display > span:hover{background: #ddd; color: #000; max-width: 250px; transition: all 1.6s; }
.a_display > a:hover svg, .a_display > span:hover svg{}
.a_display.sel > a{background-color: #fff;}
.a_display.sel > a svg{fill: var(--color-green); background-color: #fff;}

.minimenu{float: left; width: 36px; margin-top: 0; margin-left: 32px;}


.w_warning{position: absolute; padding: 2px 6px; border-radius: 10px; font-size: 9px !important; line-height: 10px; height: 10px; background-color: var(--color-orange); width: auto; font-weight: bold; margin: -15px -1px; box-shadow: 2px 2px 1px 0px #00000044; color: #fff  !important; text-shadow: 1px 1px 0px #00000088; z-index: 3; word-break: keep-all;}
.bouton .w_warning{position: relative; margin: 0 0 0 5px; font-size: 8px; box-shadow: 2px 2px 1px 0px rgba(0,0,0,0.25); font-stretch: 100%;}

.aer .bouton .w_warning{background-color: #e00000;}
.w_warning.valid{background: var(--color-green);}
.w_warning img{height: inherit;}

.w_information{position: absolute; padding: 2px 6px; border-radius: 10px; font-size: 9px; line-height: 10px; height: 10px;  background-color: var(--color-green); width: auto; font-weight: bold; margin: -10px -10px;  color: #fff; z-index: 3;}

.lMenu{margin: -10px 0 5px 70px; text-transform: initial; font-size: 12px;}
.lMenu a, .lMenu span{color: #444;}
.lMenu span{background-color: var(--color-orange);}


#pages{border-left: 0px solid #aaa; margin-bottom: 3%; padding: 15px; box-shadow: -3px -3px 3px 0px rgba(0,0,0,0.10); }
#pages .page:not(:first-child){display: none;}
#pages .page{position: relative; font-size: 13px; }
#pages h2{margin-bottom: 6px; font-size: 1.4em; font-weight: bold; font-family: inherit; font-stretch: 90%;}


#pages ul li .wn{color: red; font-style: normal !important; font-size: 10px; font-weight: 600;}

footer{font-size: 13px; line-height: 1.8; clear: both; text-align: center; border-top: 1px solid #ccc; margin-top: 40px; padding-top: 15px; padding-bottom: 15px; color: #888;}

td{vertical-align: top;}

.order_by, .text_tooltip{border-bottom: 1px dashed #ccc; cursor: pointer;}

.keywords_top_menu{height: 2.7em;}
.keywords_top_menu .search_menu{float: right;}

table#analyse, table.d{font-size: 13px; border-spacing: 0px; border-left: 1px solid #ddd; border-bottom: 1px solid #ccc; position: relative; border-collapse: collapse; /*display: block;*/}


table#analyse strong, table.d strong{color: #444;font-size: 1.09em;}
table#analyse tbody tr td:nth-of-type(2){padding: 5px;}
table#analyse tbody tr.explore:hover strong{color: var(--color-orange);}


table#analyse thead, table.d thead{font-size: 13px; background-color: #eee; color: #222; font-stretch: 90%;}
table#analyse thead td, table.d thead td{border-left: 1px solid #f3f3f3; border-right: 1px solid #bbb;}

table#analyse:not(:has(thead)), table.d:not(:has(thead)){border-top: 1px solid #ddd;}

table#analyse tbody, table.d tbody{ position: relative;}
table#analyse tbody tr td, table.d tbody tr td{word-break: break-all;}
table#analyse td, table.d td{padding: 2px 3px; border-right: 1px dotted #ccc; overflow: auto; border-bottom: 1px solid #ddd; position: relative;}
table#analyse td.dtag, table.d td.dtag{color: #888; font-size: 12.5px; font-stretch: 90%;}

table#analyse td.dtag span, table.d td.dtag span{color: #444; border:none;}
table#analyse td.dtag em, table.d td.dtag sup, .sup_x{font-size: 0.8em; font-style: normal; color: #999; margin: 0 0 0 2px;}

.d tbody tr:hover{background-color: #e5f5ff;}

#suggest tbody td{color: #aaa; padding: 5px;}
#suggest tbody td:first-child{width: 18%; font-size: 14px;  font-weight: bold; color: #444;}
#suggest tbody td:first-child div{font-size:11px; font-family: "open sans"; font-weight: normal; color: #000;}

#suggest tbody td span{color: #444;}

/* span.pos{color: green !important;}
span.neg{color: #C80A00 !important;}
span.med{color: #555 !important;} */

/*table#analyse .info, table.d .info{display: none;}
table#analyse .info div, table.d .info div{margin-left: 11px;}
table#analyse .info p, table.d .info p{ text-align: left; font-family: "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Lucida Console", monospace; line-height: 12px; background-color: #f0f0f0; margin: 2px; margin-left: 6px; padding: 3px; border-left: 1px solid #ccc; display: none; width: 580px; overflow: auto;}
table#analyse .info span, table.d .info span{border: 0; color: #098A00; cursor: pointer;}*/

/*table#analyse .display_http_info, table.d .display_http_info{color: #098A00; cursor: pointer; font-weight: bold; width: 15px; text-align: center;}
table#a{position: relative; width: 640px;}
table.d td.url{width: 390px !important; height: 22px; overflow: auto;}
table.d td.url a{text-decoration: none; width: 390px !important;}
table.d td.url a:hover{color: orange;}*/

.mcSmenu{margin-bottom: .8em;}
.mcSmenu .dymenu{font-size: 0.88em; margin-top: 0.1em; margin-bottom: 1.2em; margin-left: 0;}
.mcSmenu .dymenu li{margin-right: 12px;}
.mcSmenu .dymenu li span, .mcSmenu .dymenu li a{text-transform: initial; /*font-size: 13.3px;*/ padding: 7px 9px 7px 9px;  }
.mcSmenu .dymenu li.sel span, .mcSmenu .dymenu li.sel  a{background-color: var(--color-blue);}

.thirdMenu{color: #aaa;}
.thirdMenu strong, .thirdMenu a{color: #222; margin-right: 1em;}
.thirdMenu strong i, .thirdMenu a i{color: #666;}

.blog{}


/*.blog div:not(.st-btn) + img, */.img:not(.nude), figure{box-shadow: 1px 1px 4px 2px rgba(0,0,0,0.18); margin: 20px; width: 100%;}
figure figcaption{padding: 0.5em; border-top: 1px solid #ddd; background-color: #fff; font-size: 1em; text-align: justify;}
figure img{box-shadow: none !important; margin: 0 !important; padding: 0;}

figure{max-width: 100%; width: auto; text-align: center; background-color: #f0f0f0; }
figure img{max-width: 78%;}
	
span.img{display: block; padding: 6px; font-size: 13px; margin: 15px 0 6px 0;}


.blog p{margin-bottom: 1em; line-height: 1.75;}
.blog li{line-height: 1.75;}
.blog p code, .blog aside code, .blog li code, code.inline{color: var(--color-green); display: inline; border: 0; padding: 0; margin: 0; background-color: transparent;}
.blog aside{background-color: var(--color-gray); padding: 12px; font-size: 13px; border-radius: 6px;}
.blog aside ul{font-size: inherit; line-height: 1.2; margin: 0.5em 0 0 0;}
.blog ul{margin-bottom: 20px; line-height: 1.75;}
.blog ul ul{margin: 0;}
.blog table{display: table; width: auto;}

.blog figure table{background-color: #fff; text-align: left;}
.blog figure table tr td{border: 1px solid #ccc;}

.post_info{font-size: .95em;}
.blog_home{margin: 2em 0;}
.post_list{margin-top: 25px; margin-bottom: 45px;}
.post_list h2{margin-top: 0;}
.sticky{box-shadow: 1px 1px 5px 2px #ddd; padding: 15px; border-radius: 5px;}

.blog .info_box{display: block; margin: 0;}


.summary{font-size: 16px; margin-bottom: 16px; line-height: 1.7;  text-align: justify;}}
.address{font-size: 13px; padding-top: 3px; color: #444; padding-bottom: 14px;}

#sbody, .sbody{margin-top: 30px; margin-right: 195px;}
#sbody h2 a, .blog h2 a{color: #222; text-decoration: none;}
#sbody > h3{margin-top: 30px;}
#sbody > h3 a{color: #0f4591; text-decoration: underline;}
/* #sbody.blog ul{margin: 5px 0; padding: 0;}
#sbody.blog li{margin: 2px 0 2px 26px;} */
.contener{background-color: #f3f3f3; padding: 0.45em; border: 2px solid #ddd; border-radius: 0.4em;}
/* #sbody .info,  */.blog .info{color: #444; text-align: right; margin: 10px 0 0 0; padding: 0; line-height: 22px;}
.contener a{color: var(--color-green); font-weight: bold;}
.blog .info strong{color: #444;}

/* #co .info{margin-top: 10px; text-align: left; margin: 10px 0 5px 0; font-size: 11px;}
#co .info strong{font-size: 13px;}
#co .info a{color: green; text-decoration: underline;}*/

/* #sbody a{text-decoration: none;}
#sbody a:hover{text-decoration: underline;}
#sbody input, .blog textarea{font-size: 13px;} */

.blog .page{padding: 1em 0 1em 0; text-align: right;}
.blog .page a, .blog .page span{display: inline-block; width: 18px; line-height: 18px; border: 1px solid #aaa; font-weight: bold; text-align: center; margin: 5px 5px 5px 0; font-style: normal;}
/*#sbody .page br{clear: left;}*/

.mce-toc{background-color: #f0f0f0; padding: 0.5em;}
.mce-toc ul{margin: 0;}
.mce-toc *{font-size: 0.92em; line-height: 1.2em;}




.text-excerpt, .text-excerpt-div{
	padding: .15em 0;
	line-height: 1.5;
	max-height: 1.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: height 0.3s ease;
 }

.text-excerpt-div{
	padding: .15em 0;
	max-height: 1.5em;
    overflow: hidden;
    cursor: pointer;
    transition: height 0.3s ease;
 }
 
.text-excerpt-div div{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
 }
 
.text-excerpt:hover, .text-excerpt-div:hover{color: black;}
 
 .text-excerpt:before, .text-excerpt-div:before {
    /*content: "\25BC";*/
	content: "+";
    float: right;
    color: #000000cc;
    display: inline-block;
    /* font-weight: bold; */
    width: 2em;
    text-align: center;
}
 
 .text-excerpt.show,  .text-excerpt-div.show{
	max-height: 100%;
	white-space: normal;
	/*overflow: visible;*/
	text-overflow: unset;
}

.text-excerpt-div.show div{
	max-height: 100%;
	white-space: normal;
	/*overflow: visible;*/
	text-overflow: unset;
}

.text-excerpt.show:before, .text-excerpt-div.show:before{
	content: "-";
}


.aanalyse{margin: 0 0 1px 0; padding: 5px 5px 0px 5px;}
.aanalyse > div{height: 0px; overflow: hidden; position: relative; transition: max-height 2s ease-in;}
.aanalyse > div.show{height: auto; transition: max-height 2s ease-in;}
.aanalyse > div > ul{list-style: none; padding: 0; margin-left: 12px;}
.aanalyse > div ul li{padding: 0;}


.aanalyse > div ul .aok:before, .sign_ok:before{content : "\2713"; font-size: 16px; width: 20px; color: var(--color-green); margin-right: 5px; display: inline-block; float: left;}
.aanalyse > div ul .ain:before, .sign_info:before, .sign_info_simple:before{content : "\26A0"; font-size: 16px; width: 20px; color: var(--color-orange); margin-right: 5px; display: inline-block; float: left;}
.sign_info_simple:before{color: #444;}
.aanalyse > div ul .aer:before, .sign_error:before{content : "\2716"; font-size: 16px; width: 20px; color: #e00000; margin-right: 5px; display: inline-block; float: left;}
.aanalyse > div ul .anotif:before, .sign_notif:before{content : "\1F6C8"; font-size: 16px; width: 20px; color: var(--color-blue); margin-right: 5px; display: inline-block; float: left;}
.sign_notif_simple:before{content : "\1F6C8"; font-size: 16px; width: 20px; color: #777; margin-right: 5px; display: inline-block; float: left;}


.aanalyse > div ul .ana:before, .sign_na:before{content : "N/A"; font-size: 9px; font-weight: bold; width: 20px; text-align: center; color: white; background: var(--color-blue); margin-right: 5px; display: inline-block; float: left;}



.aanalyse > div ul .await:before, .sign_wait:before{content: "\21BB"; text-align: center; font-size: 16px; font-weight: normal; width: 15px; color: #444; margin-right: 10px; display: inline-block; float: left;  animation: spin 1s linear infinite; 

}

/* 
 * animation: spin 1s cubic-bezier(0.29, 0.47, 0.43, 0.65) infinite
content: ""; 
    border: .2em solid transparent;
    border-radius: 50%;
    border-top-color: var(--color-blue);
    border-bottom-color: var(--color-blue);
    height: .5em;
    width: .5em;*/



.highlight.sign_wait:before{color: white;}

.sign_ballot:before{content : "\2610"; font-size: 16px; width: 20px; color: #444; margin-right: 5px; display: inline-block; float: left;}
.sign_ballot_x:before{content : "\2612"; font-size: 16px; width: 20px; color: #444; margin-right: 5px; display: inline-block; float: left;}

.aanalyse > div ul li div{font-style: normal; margin-left: 25px; margin-top: 8px; margin-bottom: 8px; font-size: 13px;}
.aanalyse > div ul li div.adde:before{content : "\27A4"; margin-right: 6px; color: var(--color-green); font-size: 13px;}

.aanalyse h3{font-size: 14px; padding: 0; color: #222; margin: 5px 0  0 0 !important; border: 0; font-family: inherit; font-weight: normal;}

.bouton{font-size: 13px; cursor: pointer; margin: 0; padding: 3px 2px; margin-right: 5px; font-weight: bold; display: inline-block; border-bottom: 2px solid transparent; user-select: none; font-stretch: 90%;}

.aanalyse p.bouton:hover{border-bottom: 2px solid #999;}

.aanalyse p:before{content : "\25BC"; margin-right: 5px;}

.aanalyse + button{margin-top: 8px; margin-bottom: 13px;}

.aanalyse .sign_wait{margin-left: .7em;}

.aer p{color: #e00000;}
.ain p{color: var(--color-orange);}
.aok p{ color: var(--color-green);}
.anotif p{ color: var(--color-blue);}
.ana p{ color: var(--color-blue);}
.anotif .w_warning, .ana .w_warning{ background-color: var(--color-blue);}

.tooLongPart{color: rgba(34, 34, 34, 0.533);
    background: -webkit-linear-gradient(0deg, #222 0px, #bbb 120px);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border-bottom: 2px dotted var(--color-orange);}

.asidemin{font-size: 0.85em; margin: 0.3em 0;}
.asidemin:before{font-size: 0.85em; margin-right: 0; font-weight: bold;}


.headline{/*padding: 1.8em; box-shadow: 0px 1px 5px #bbb;*/}

.alyze-ico-orange, .alyze-ico-green, .alyze-ico-gray, .alyze-ico-blue{border-radius: 50%; padding: 4px; margin-right: 7px;}

.alyze-ico-orange{background: var(--color-orange); color: white;  border: 1px solid var(--color-orange);}
.alyze-ico-green{background: var(--color-green); color: white; border: 1px solid var(--color-green);}
.alyze-ico-gray{background: #fff; color: #555; border: 1px solid #aaa;}
.alyze-ico-blue{background: var(--color-blue); color: white; border: 1px solid var(--color-blue);}

/*
.ico div{
      transition: transform 0.3s ease;
      animation: zoomIn linear both;
      animation-timeline: view();
      animation-range: contain 0% contain 55%;
    }

    @keyframes zoomIn {
      0% {
        transform: scale(.9);
        
      }
      50% {
        transform: scale(1);
      }
    }*/

h2 + .ico{margin-top: -0.5em;}
#ico, .ico{margin: 3em 0 1em 0; line-height: 1.75em;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 4em; 
	grid-row-gap: 2em; border-radius: .5em;
}
.ico h3 svg{fill: #fff; background: var(--color-orange); padding: 0.2em; height: .85em; width: auto; vertical-align: middle; margin: 0 10px 0 2px; border-radius: 50%; border: 2px solid var(--color-orange);}
#ico > div, .ico > div{ margin : 0; /*line-height: 20px;*/}
.ico > .double{grid-column: 1 / 3; position: relative;}
.double::after{content: ""; display: block; width: 0px; height: 100%; position: absolute; top: 0; right: -2em; border-right: 1px dashed #ccc;}

#ico br, .ico br{clear: both;}
.ico > div.double h2{font-size: 1.5em; padding: 0 0 2px 0; margin: 0;  }
.ico .img{padding: 6px; font-size: 13px;}
#ico p, .ico p{margin-top: 10px;}
#ico ul, .ico ul{margin: 0px; padding-left: 12px; list-style: none;}
#ico ul li, .ico ul li{margin: 3px;}
.ico ul li::before {
  content: "\2022";
  color: var(--color-green);
  font-weight: bold;
  display: inline-block; 
  width: 1em;
  margin-left: -1em;
}

.fr_flag{background: linear-gradient(90deg, #001e96 33%, #eee 33%, #eee 67%, #EF4135 67%); color: transparent; display: inline-block; width: 1em; height: .8em; vertical-align: middle; margin-top: -2px;}

.analyze_align, .analyse_align{margin-left: 80px; margin-right: 80px;}

.max{width: 100%;}
.offer_box, .info_box{border: 1px solid #ccc; margin-top: 1em; margin-bottom: 1em; border-radius: var(--box-radius); padding: 1em 0.8em 0.8em 0.8em;}
.info_box div:not(.nav_page){margin-top: 0.10em; margin-bottom: 0.10em;}
.offer_box ul, .info_box ul{font-size: inherit; margin: 0.2em 0 0.2em 0;}
.offer_box ul li, .info_box ul li{margin: 0;}
.offer_box strong, .info_box strong{color: var(--color-green); }
.strongblue{color: var(--color-blue)}


.offer_period {
  background: var(--color-gray);
  color: #555;
  border: 0px solid #ccc;
  border-radius: var(--box-radius);
  padding: .5em 1em;
  text-align: center;
  cursor: pointer;
  transition: 0.3s;
  display: inline-block;
  margin-right: 1.5em;
  position: relative;
  margin-bottom: 1em;
  font-stretch: 90%;
}

.offer_period:hover {
  border-color: var(--color-green);
}
.offer_period input[type="radio"] {
  display: none;
}

.offer_period:has(input:checked) {
  color: #000;
  background: white;
  border-color: var(--color-green);
  box-shadow: 0 0 0 3px var(--color-green);
}

.offer_period_price {
  margin: 0;
  font-weight: bold;
}

.offer_period_desc {

}

.info_box{margin-top: 1.5em; display: inline-block; vertical-align: top; margin-right: 1em;}
.info_box ul{padding-left: 1.5em; margin: 0;}
.info_box > h3{font-size: 1.2em; position: relative; top: -2em; float: left; margin-bottom: -2em; padding: 0 0.5em; font-weight: bold; background-color: #fff; color: #444; display: inline-block; font-stretch: 90%; font-family: inherit;}

 .info_box.cols{columns: 2;}
 .info_box.full_length{display: block;}
 
 
 .flex_box_info{columns: 430px auto; column-gap: 10px; }
.flex_box_info > *{width: 90%; float: none; -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
          page-break-inside: avoid; /* Firefox */
               break-inside: avoid; /* IE 10+ */
               break-inside: avoid-column; /* W3C */ }

.billfix{margin-top: 0.2em;}
.billfix strong{color: var(--color-blue)}
.billright{float: right; font-weight: bold;}



.colls-container>div{width: 48%; float: left; margin-right: 2%;}
.colls-container h3{font-size: 16px; margin: 0 0 5px 0 !important; border-width: 1px;}
.colls-container div div{padding: 4px 0 8px 0; border-bottom: 1px dotted #ccc;}
.colls-container div div+h3{padding-top: 30px;}

.colls-container input[type="text"]{width: 90%;}
.colls-container input[type="password"]{width: 90%;}

.colls-container .coll_title{text-align: center; font-size: 16px; padding-top: 8px; padding-bottom: 8px;}


.two-cols, .three-cols{display: flex;}
.col{flex: 1; padding-right: 1em; margin-right: 1em; border-right: 1px dotted #ccc; width: 50%;}
.two-cols .col{width: 50%;}
.three-cols .col{width: 33.3%;}
.two-cols .col:last-of-type; .two-three .col:last-of-type{padding-right: 0; border: none;}


blockquote{font-size: 15px; font-style: italic; display: block; margin: 20px 70px; color: #444; text-align: justify; position: relative;}
blockquote span{display: block; font-style: normal; text-align: right; font-size: 12px; margin-top: 4px;}
blockquote:before{content: open-quote; font-size: 62px; font-style: normal; color: #ddd; position: absolute; left: -40px; top: -30px;}

.hyxt_cache{font-size: 10px !important; color: #555; margin: -2px 0 -15px 0;}

.comp_highlight{background-color: #e5f5ff; cursor: default;}
.comp_highlight_div strong{background-color: #e5f5ff;}
.comp_highlight_sel{ cursor: pointer; background-color: var(--color-orange); color: #fff;}
.comp_highlight_sel strong{color: #fff !important;}
.comp_highlight.comp_highlight_div strong{background-color: yellow;}

#infob{display: none; border-radius: 0.5em; padding: 0.5em; max-width: 300px; font-size: 0.9em; line-height: 1.55em; font-family: var(--font-hx);
background-color: #000; color: #fff; position: absolute !important;  box-shadow: 2px 2px 5px 2px rgba(0,0,0,0.2); z-index: 100; overflow-wrap: break-word;}
#infob ol, #infob ul{margin: 0; padding: 2px 0 2px 30px;}

#popin, .popin{position: fixed;  top: 0;  right: 0;  bottom: 0;  left: 0;  background: rgba(0,0,0,0.3); backdrop-filter: blur(2px); z-index: 1000; opacity: 0; transition: opacity 0.3s ease; text-align: initial; font-size: 14px; display: flex;  align-items: center;  justify-content: center;}
#popin.show, .popin.show{opacity: 1; visibility: visible;}
#popin>div, .popin>div{width: 85%; max-width: 1280px; position: relative; margin: 0;  padding: 18px;  border-radius: .35em; background: #fff; color: #000; box-shadow: 2px 2px 10px rgba(0,0,0,0.3); }
#popin>div>div, .popin>div>div{max-height: 78vh; overflow: auto;}
.close{background-color: var(--color-orange); color: #fff; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; border-radius: 12px; box-shadow: 1px 1px 3px #000; cursor: pointer;}
#popin h2, .popin h2{margin-top: 2px;}
#popin > h3, #popin > div > h3, #popin > div > div > h3, .popin > h3, .popin > div > h3, .popin > div > div > h3{font-weight: bold; font-family: inherit; font-stretch: 95%; margin-top: 0;}
#popin p, .popin p{padding-right: 0.5em;}
#popin_message{font-weight: bold; padding: 5px;}

.webnodisplay{display: none;}

#cookie_box{position: fixed; z-index: 500; bottom: 0; left: 80px; padding: 1em; background-color: #fff; margin: 0 80px 1em 1em; box-shadow: 0px 0px 4px #777; max-width: 800px; max-height: 90%;}
#cookie_parameter{overflow: auto; max-height: 300px; display: none;}

/*#headline{max-width: 340px; position: fixed; bottom: 30px; left: 75px; background: var(--color-green); color: white; border-radius: 0.5em; font-size: 0.95em; padding: 0.5em; box-shadow: 2px 2px 4px #aaa; z-index: 4;}
#headline:hover{background: var(--color-green);}
#headline *{color: inherit;}
#headline .in_close{float: right; cursor: pointer; margin-left: 1em;}*/


/* elements spécifiques */
.stars_rating{display: inline-block; position: relative; word-break: keep-all; line-height: 1em;}
.stars_rating span{width: 1.5em; display: inline; padding: 0 0.1em; text-align: center;}
.stars_rating > span{color: rgb(204, 204, 204) !important;}
.stars_rating > span:last-child{padding: 0; margin-top: -1em; display: block; position: relative; overflow: hidden;}
.stars_rating > span:last-child > span:nth-child(1){color: red;}
.stars_rating > span:last-child > span:nth-child(2){color: var(--color-orange);}
.stars_rating > span:last-child > span:nth-child(3){color: #f1b01b;}
.stars_rating > span:last-child > span:nth-child(4){color: #57aa5b;}
.stars_rating > span:last-child > span:nth-child(5){color: #00ac1a;}

.big_rating{

  display: flex;
  align-items: center;

text-align: center; display: table; z-index: 10; padding: 12px 8px; background: #f3f3f3; border: 0px solid var(--color-green); border-radius: 8px; font-size: 10px; box-shadow: 2px 2px 2px #ccc;

}
.big_rating div{
	display: table-cell;
	vertical-align: middle;}
.big_rating strong{font-size: 16px; color: inherit;}




.keywords-tab-info{display: block;  max-width: 530px; text-align: right; float: right;}
.keywords-tab-info .main{color: #000; display: block; text-decoration: none; border: 1px solid #ddd; border-radius: 0.5em; padding: 0.5em; text-align: left;}
.keywords-tab-info .about{font-size: 0.9em;}
.keywords-tab-info .main:hover{background-color: #e5f5ff;}

.serp-form-on-analyze{}


@media screen and (max-width: 520px){
	.keywords-tab-info2{float: none; width: 100%;}
	.keywords-tab-info2 form{width: auto;}
}

#plugin_link{position: absolute;right:  0;width: 20em;height:auto;font-size: .9em;font-family: open sans, Segoe UI, sans-serif;font-weight: normal;text-align: left;margin-right: 80px;text-shadow: none;color: #222;line-height: normal;}
#plugin_link .a_download{background: var(--color-gray); display: block; border-radius: 5px; padding: 6px; color: #222;}
#plugin_link .a_info{display: block; margin-top: 4px; margin-right: 5px; text-align: right; color: transparent;}
#plugin_link:hover .a_info{color: #000; text-decoration: underline;}
#plugin_link .a_download:hover{text-decoration: none; background: var(--color-highlight);}


@media print{
	.blog{margin-right: 10mm; margin-left: 10mm;}
}

@media screen and (max-width: 520px){
	body{margin: 0; width: 100%;}

	p{ text-align: justify;}
	#sbody h3{font-size: 13px;}

	.blog{overflow: hidden;}

	header{padding: 0; text-align: center;}
	main{border: 0;margin: 20px;}
	
	

	header{overflow: hidden; position: unset; height: unset; }
	header nav{position: unset;}
	header nav, header nav.shrink{height: auto; padding: 0; font-size: unset; flex-direction: column; text-align: center;}
	
	header:has(#headline) {height: unset;}
	header:has(#headline-perm) {height: unset;}
	header:has(#headline):has(#headline-perm){height: unset;}

	/*header nav.shrink{font-size: unset; padding: unset; height: unset;}
	header nav.shrink .logo{ height: unset;;}
	header nav.shrink .rightmenu li{display: unset; margin-top: unset; }
	header nav.shrink .rightmenu li:first-child{padding-right: unset; border-right: unset;}*/
	
	.logo, header nav.shrink .logo{order: 1;width: auto;padding:0; height: 60px;}

	.rightmenu{order: 2;  padding: 0; list-style-type: none; margin-top: 8px;}
	.rightmenu li, header nav.shrink  .rightmenu li{display: block; padding-bottom: 5px; text-align: center;}

	.topmenu{order: 3; padding: 0.5em; margin: 5px 0; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 5px; font-size: 1em;}
	.topmenu li{text-align: center; display: table; margin: 0;}
	.topmenu li a, .topmenu li strong{overflow: hidden; padding: 0px 5px; display: table-cell; vertical-align: middle; width: 100%;}
	.topmenu li a, .topmenu li span{line-height: 1.65em;}
	.topmenu li strong a{border-color: var(--color-orange);}
	
	.lang_menu{position: unset; padding: unset; margin: unset; text-align: right;}
	.lang_menu li{width: 100%;}
	
	#headline{position: unset; height: unset; line-height: normal; padding: 10px; width: unset;}
	#headline-perm{position: unset; height: unset; line-height: normal; padding: 10px; width: unset;}
	
	#headline .in_close{float: none; margin: 2em;}
    


	.main-container{display: unset;}

	#menu-tools{position: unset; width: auto; min-width: unset; margin: 0; overflow: hidden; transition: height 1.5s ease-out; margin-top: 20px;}
	
	#menu-tools div{position: unset; width: auto; padding: 0 1em 1em 1em; display: grid; }
	
	
	#menu-tools div .tools-link{ margin-top: 60px;}
	#menu-tools div .tools-list{order: 2;}
	#menu-tools div .fold-menu{order: 1; position: absolute; left: 50%; transform: translateX(-50%); width: 150px !important; height: 50px;}
	#menu-tools div .fold-menu .active{color: var(--color-orange);}
	
	#menu-tools div .lang_menu{order: 3;}
	
	#menu-tools .fold-button {transform: rotate(90deg); width: 1em; font-size: 1.75em; color: #222; z-index: 1000; }

	body[data-fold="true"] #menu-tools{height: 0px; margin-bottom: 70px;}
	body[data-fold='true'] #menu-tools  .fold-button {transform: rotate(270deg);}

	.presentation{clear: both; background-size: auto 100%;}
	.presentation h1{margin: 0; font-size: 30px;}
	.presentation ul{height: 50px; font-size: 14px;}
	.presentation fieldset{text-align: center !important; }
	
	.presentation.robots form fieldset{width: auto; }

	#ico, .ico{margin: 10px; grid-template-columns: repeat(1, 1fr);}
	.double::after{border: 0;}
	#ico + h2, .ico + h2{margin-left: 10px;}

	.colls-container div{width: 100%; margin: 0; float: none;}

	form{line-height: 22px; padding: 4px;}

	input{font-size: 16px;}
	input[type="text"]{width: 89%;}

	.suggest .coll{width: 100%;}
	
	
	.suggest2{display: grid; grid-template-columns: 1fr; gap: 14px;}
	.suggest2 :nth-child(1) { order: 2; }
	.suggest2 :nth-child(2) { order: 1; } 
	
	.suggest2_cols{columns: unset;}

	.w{float: none; font-size: 12px; width: 92%;}
	.w p{border: none; text-align: center; font-style: italic; margin: 0; padding: 5px;}
	.w div{padding: 0px 8px 8px 8px; color: #000;}
	.w div a{font-weight: normal;}

	#sbody, .blog{margin: 8px !important; display: block; font-size: 14px;}
	#sbody p.info{font-size: 13px;}
	.apercu{font-style: italic; font-size: 13px; margin-top: 8px;}

	
	.dymenu_right{float: none; text-align: center; display: block;}
	
	.dymenu{margin: 0; padding: 0; font-size: 13px; right: 0; height: auto; border: 0; text-align: center;}

	.dymenu li{display: block; padding: 0; margin: 10px 5px; padding: 0; line-height: 28px; border: 0; text-align: center;}
	
	.minimenu{width: auto; height: auto; float: none;}
	
	.dymenu .a_display{float: none; display: inline-block; }
	
	.analyze_align, .analyse_align{margin-left: 10px; margin-right: 10px;}

	#form_menu .dymenu li{margin: 0;}

	#pages{border-left: 0; font-size: 12px;}

	.mcSmenu{border:0; clear: all;}
	.mcSmenu .dymenu .sel span{}

	.blog{margin: 0;}
	h1.blog{margin-right: 0px; font-size: 16px;}

	#cookie_box{margin: 1em; left: 0; bottom: 1px;}
	
	.keywords-tab-info{float: none;}
	
	#plugin_link{display: none;}
	
		
	.keywords_top_menu{height: auto; text-align: center; margin-top: 1em; margin-bottom: 1em;}
	.keywords_top_menu .search_menu{float: none;}
	
	.two-cols, .three-cols{display: block;}
	.col{flex: none; width: 100% !important;}
	.two-cols .col:last-of-type, .three-cols .col:last-of-type{margin-top: 1em; padding-top: 1em; border-top: 1px dotted #ccc;}
}


@media screen and (max-width: 360px){
	.submenu{grid-template-columns: repeat(2, 1fr);}
}


/* serp */

.branding-google span:nth-child(1) {color: #4285F4; }
.branding-google span:nth-child(2) {color: #EA4335; }
.branding-google span:nth-child(3) {color: #FBBC05;}
.branding-google span:nth-child(4) {color: #4285F4;}
.branding-google span:nth-child(5) {color: #34A853;}
.branding-google span:nth-child(6) {color: #EA4335;}

.branding-bing span:nth-child(1) {color: #0078D4;}
.branding-bing span:nth-child(2) {color: #0E94EC;}
.branding-bing span:nth-child(3) {color: #38C3F0;}
.branding-bing span:nth-child(4) {color: #0E94EC;}

.percent_gradient{
	background: linear-gradient(0deg, rgba(231,92,0,1) 14%, rgba(0,158,31,1) 35%, rgba(73,91,180,1) 70%, rgba(149,149,149,1) 95%, rgba(255,255,255,1) 100%);
	background-size: 10000% 10000%;
	color: white;
	background-clip: text;
	text-fill-color: transparent;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent; 
	-moz-background-clip: text;
	-moz-text-fill-color: transparent;
}


.percent_gradient[role=button]:hover{border-bottom: 1px dashed #aaa;}

.micro_label{display: inline-block; font-size: 0.8em; color: white; background: #ccc; border-radius: .3em; padding: 2px; margin-bottom: 4px; margin-right: 4px;}
.micro_label.equal{background: rgba(0,158,31,1) ;}
.micro_label.high{background: var(--color-orange) ;}
.micro_label.higher{background: red;}
.micro_label.notequal{background: #ccc;}
.micro_label.special{background: #eee; color: #000;}
.micro_label.special2{background: var(--color-blue);}
.micro_label.special3{background: var(--color-highlight); color: #000;}
.micro_label.special3:hover{background: #fff; color: #000;}

.label{font-size: .90rem; font-weight: normal; font-family: var(--font-base); white-space: nowrap; color: #111; border: 1px solid #ccc; border-radius: var(--box-radius); padding: 2px 3px; margin-right: .5rem;}
.label.no-border{border-color: transparent;}
.label.low{border-color: var(--color-red); color: var(--color-red);}
.label.medium{border-color: var(--color-orange); color: var(--color-orange);}
.label.elevated{border-color: var(--color-blue); color: var(--color-blue);}
.label.high{border-color: var(--color-green); color: var(--color-green);}




.optimize_bar{background: linear-gradient(90deg, #eee 5%, lightblue 20%, var(--color-green) 60%, var(--color-orange) 80%, red 100%);
    height: 9px;
    line-height: 9px;
    border-radius: 0.2em;
    margin-top: 6px !important;
    /*border: 1px solid #ccc;*/}
.optimize_bar span{
	height: 12px;
    display: inline-block;
    background: linear-gradient(90deg, transparent 50%, #ccc 50%,  #fff 52%);
    width: 100%;}

.blur_text{color: transparent !important; text-shadow: 0 0 7px #000000bb; user-select: none;}


table.d tbody tr td { word-break: break-word;}

.toggle-display-box{float: right;}
.toggle-display-box *[role=button]{margin-left: .5em; font-size: 1.33em; color: #aaa;}
.toggle-display-box *[role=button].selected{color: #000;}


.serp_content{display: grid; grid-template-columns: 20% 20% 20% auto; gap: 1.4em; grid-auto-rows: minmax(100px, auto);}
.serp_content.analyze_align, .serp_content .analyse_align{margin-right: 0;}
.serp_box1{grid-column: 1; grid-row: 1;}
.serp_box2{grid-column: 2; grid-row: 1;}
.serp_box3{grid-column: 3; grid-row: 1;}
.serp_box_keywords{grid-column: 4; grid-row: 1 / 5;}
.serp_box_results{grid-column: 1/4; grid-row: 2;}

.serp_box_related_search{grid-column: 1; grid-row: 3;}
.serp_box_questions{grid-column: 2; grid-row: 3;}
.serp_box_complementary_keywords{grid-column: 3; grid-row: 3;}

.serp_label_container{display: flex; gap: 5px; flex-wrap: wrap;}
.serp_label_bloc{width: 60px; height: 60px; display: flex; box-sizing: border-box; align-items: center; justify-content: center; text-align: center; padding: 3px; font-size: .8em; background: #eee;}
.serp_label_bloc strong{font-weight: bold !important; color: #222 !important; word-break: break-all;}
.serp_label_bloc.serp_label_bloc_rated{background-color: var(--color-green); color: white !important; }
.serp_label_bloc.serp_label_bloc_rated strong{font-weight: bold !important; color: white !important;}

.optimize_content{display: grid; grid-template-columns: 70% auto; gap: 0.1em 1.4em; grid-auto-rows: minmax(100px, auto);}

.serp_content .info_box{display: block; margin-right: 0;}
.optimize_content .info_box{display: block; margin-right: 0; margin-bottom: 2.8em;}
.serp_content .info_box strong{color: #444; font-weight: 600;}
.optimize_content .info_box strong{color: #444; font-weight: 600;}

.optimize_content box_keys{grid-column: 1; grid-row: 1 / 6;}
.optimize_content box_audit{grid-column: 2; grid-row: 1;}

.mea{font-weight: 600;}
.fake svg{filter: blur(2px);}

/* serp comp */

.serp_comp_highlight{background: var(--color-gray); cursor: pointer;}
.serp_comp_highlight .highlight-light{background: var(--color-green); color: white;}
.serp_comp_highlight .special{background: #ddd;}

.serp-similarity-circle {
  width: 32px; height: 32px; 
  border-radius: 50%;
  display: inline-flex; 
  align-items: center;
  justify-content: center;
  position: relative;
  background: #ddd;
  transition: background 1.5s ease-out;
  overflow: hidden;
  user-select: none; 
  border: none !important;
  
  background: conic-gradient(var(--color-green) var(--progress, 0%), #ddd var(--progress, 0%));
}

.serp-similarity-circle:hover{ background: conic-gradient(var(--color-orange) var(--progress, 0%), #ddd var(--progress, 0%));}

.serp-similarity-circle.blue{background: conic-gradient(var(--color-blue) var(--progress, 0%), #ddd var(--progress, 0%));}
.serp-similarity-circle.blue:hover{background: conic-gradient(var(--color-orange) var(--progress, 0%), #ddd var(--progress, 0%));}

.serp-similarity-circle.small{width: 14px; height: 14px; margin-left: 3px;}



.serp-similarity-center {
  box-sizing: border-box;
  width: calc(100% - 9px);
  height: calc(100% - 9px);
  background: white; 
  border-radius: 50%; 
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  word-break: normal;
  font-weight: 600;
  color: #222;
  padding: 2px;
  font-stretch: 90%;
  white-space: nowrap;
}

.serp-similarity-circle.small .serp-similarity-center{  width: calc(100% - 6px); height: calc(100% - 6px);color: transparent; font-size: 0;}

.serp_engine {
  background: var(--color-gray);
  opacity: .95; 
  color: #555;
  border: 0px solid #ccc;
  border-radius: var(--box-radius);
  padding: .5em 1em;
  text-align: center;
  cursor: pointer;
  transition: 0.3s;
  display: inline-block;
  margin-right: 1.5em;
  position: relative;
  margin-bottom: 1em;
  font-stretch: 90%;
}

.serp_engine input[type="radio"] {
  display: none;
}

.serp_engine:has(input:checked) {
  opacity: 1; 
  color: #000;
  background: white;
  border-color: var(--color-green);
  box-shadow: 0 0 0 3px var(--color-green);
}

/* writing */

.writing-author{padding: 10px; border: 1px solid #000000ee;}

.writing fieldset legend{font-weight: 700;}
.writing fieldset strong{font-weight: 600;}


.writing-define-item{padding: .2em 0em;width: fit-content; line-height: 2em; word-break: break-word;}

.writing-define-item p{font-size: .9em; margin: .4em 0; color: #555;}
.writing-define-item .delete, .writing-define-item .plus, .writing-define-item .min, .writing-define-item .set, .writing-define-item .add{ border-radius: 50%; font-size: .88em; display: inline-block; padding: 3px; text-align: center; width: 1.2em; height: 1.2em; line-height: normal;}
.writing-define-item .delete{margin-left: .5em;  padding: 2px; border: 1px solid #ccc;}
.writing-define-item .plus{margin-left: .5em; background-color: var(--color-blue); color: white;}
.writing-define-item .min{margin-left: .5em; border: 1px solid #aaa; color: #777; padding: 2px;}
.writing-define-item .add{margin-left: .5em; width: auto; border-radius: 0.5em;  border: 1px solid #bbb; padding: 4px;}
.writing-define-item .set{margin-left: .5em; width: auto; border-radius: 0.5em; background-color: var(--color-green); color: white; padding: 5px;}

.writing-define-item .sub-choise, writing-define-item .sub-proposal{word-wrap: break-word; display: inline-block;}
.writing-define-item .sub-choise > span, .writing-define-item .sub-proposal > span{margin-right: .5em; background-color: var(--color-highlight); border-radius: .5em; padding: 3px 5px; font-size: .9em; white-space: nowrap;}
.writing-define-item .sub-choise > span{background-color: var(--color-highlight);}
.writing-define-item .sub-proposal > span{background-color: #f6f6f6; color: #444;}
.writing-define-item .sub-proposal{display: inline-block;}

.writing-define-item .sub-choise > span{margin-right: .5em; background-color: var(--color-highlight); border-radius: .5em; padding: 3px 5px; font-size: .9em; white-space: nowrap;}
.writing-define-item .sub-choise > span{margin-right: .5em; background-color: var(--color-highlight); border-radius: .5em; padding: 3px 5px; font-size: .9em; white-space: nowrap;}
.writing-define-item  .sub-delete, .writing-define-item .sub-set{margin-left: .2em; font-size: .85em; color: #777;  border: none !important;}



.keywords-note-circle {
  width: 22px; height: 22px; 
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: #ddd;
  transition: background 1.5s ease-out;
  overflow: hidden;
  float: right;
  user-select: none; 
  
}

table#analyse .keywords-note-circle{float: right;}


.keywords-note-10{background: conic-gradient(var(--color-green) 100%, #ccc 100%)}
.keywords-note-9{background: conic-gradient(var(--color-green) 90%, #ccc 90%)}
.keywords-note-8{background: conic-gradient(var(--color-green) 80%, #ccc 80%)}
.keywords-note-7{background: conic-gradient(var(--color-green) 70%, #ccc 70%)}
.keywords-note-6{background: conic-gradient(var(--color-green) 60%, #ccc 60%)}
.keywords-note-5{background: conic-gradient(var(--color-green) 50%, #ccc 50%)}
.keywords-note-4{background: conic-gradient(var(--color-green) 40%, #ccc 40%)}
.keywords-note-3{background: conic-gradient(var(--color-green) 30%, #ccc 30%)}
.keywords-note-2{background: conic-gradient(var(--color-green) 20%, #ccc 20%)}
.keywords-note-1{background: conic-gradient(var(--color-green) 10%, #ccc 10%)}
.keywords-note-0{background: conic-gradient(var(--color-green) 0%, #ccc 0%)}



.keywords-note-center {
  box-sizing: border-box;
  width: 17px; 
  height: 17px;
  background: white; 
  border-radius: 50%; 
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  word-break: normal;
  font-weight: 600;
  color: #222;
  padding: 2px;
  font-stretch: 90%;
  white-space: nowrap;
}

.keywords-note-pending {
  background: conic-gradient(#ddd 0%, #ddd 50%, #555 50%, #555 65%, #ddd 65%);
  will-change: transform;
  animation: spin 1.5s linear infinite; /* Animation fluide et infinie */
}

@keyframes spin {
  from {
    transform: rotate(0deg); 
  }
  to {
    transform: rotate(360deg); 
  }
}

.typewriter::after {content: ''; display: inline-block; width: 8px; height: 1em; background: var(--color-blue); animation: blink 1s step-start infinite; margin-left: 2px;}
@keyframes blink {50% { opacity: 0; }}


[draggable="true"] {
  -webkit-user-drag: element;
}

body.dragging .ph-dots-six-vertical {
    cursor: grabbing !important;
}

.ph-dots-six-vertical {
  cursor: grab; 
}

.ph-dots-six-vertical:active {
  cursor: grabbing; 
}

.list_emphasis li.hovered {
  background: #e5e9ff;
}


.list-enter-active,
.list-move {
  transition: transform 0.5s, opacity 0.5s;
}

.list-leave-active {
  opacity: 0;
  transform: translateY(20px);
}

.list-enter {
  opacity: 0;
  transform: translateY(-20px);
}

.list-move {
  transition: transform 0.5s;
}


/* from analyse inline : */
.sd_col{
	margin-top: 1em;
	columns: 350px auto;
    column-gap: 2.5em;
    

   }

.sd_box{border: 1px solid #ccc; margin-bottom: 2.5em; border-top-left-radius: 0.5em; border-top-right-radius: 0.5em; border-bottom-right-radius: 0.5em; border-bottom-left-radius: 0.5em;  line-height: 1.5em; overflow: hidden; break-inside: avoid; box-sizing: border-box; padding: 1.2em .8em .6em .8em;
box-shadow: 1px 1px 3px #eee;}

.sd_content{break-inside: avoid-column; 
page-break-inside: avoid;
  
box-sizing: border-box;

}
@-moz-document url-prefix() {
	/* for ff */
	.sd_content{page-break-inside:avoid; display: inline-block; width: 99%;}
}
.sd_content:hover > .sd_box{border-color: var(--color-orange);}
.sd_content:hover > .sd_type .material-icons-outlined{color: var(--color-orange);}


.sd_standard_button, .sd_adapted_button{ user-select: none;}
.sd_adapted_button{font-weight: bold; }
.sd_standard_button{cursor: pointer;}
.sd_standard{/*height: 1px; overflow: hidden; transition: all 1s;*/ display: none;}

/*.sd_type{position: relative; top: .7em; background: #fff; color: #333; padding: 0 0.5em; font-weight: bold; font-size: 1.1em; margin-left: 1.2em; margin-right: 1.2em;}*/

.sd_type{position: relative; top: .7em; display: inline-block; line-height: 1.65em; background: #fff; color: #333; border-radius: 0.35em; padding: 0 0.5em; font-weight: normal; font-size: 1.25em;  margin-left: 1.2em; margin-right: 1.2em;}
.sd_type[data-click]{cursor: pointer !important;}

.material-icons-outlined{font-size: 1em; margin-right: .8em; color: var(--color-green); line-height: inherit; cursor: inherit;}
.sd_type .help_mark{position: relative; top: -.2em; margin-left: 1.2em; float: none;}

.sd_box .material-icons-outlined{color: #666;}
.sd_box .sd_box{font-size: 0.95em; box-shadow: none; margin-bottom: 1em;}
.sd_box .sd_type{font-size: 0.95em; }



.sd_box .sd_box .sd_ico{width: 60px;}
.sd_box img{max-width: 100%;}

.sd_content [data-over]:hover{background-color: #e5f5ff;}

.sd_src{font-family: monospace; font-size: 0.8em; float: right; color: #333; border-radius: 2px; border: 1px solid #ccc; padding: .2em; margin-left: .5em; line-height: 1.15em;}

.desc_object{display: block; margin-top: 1em;}
.sd_link span > .content, .sd_link > .content{color: blue; text-decoration: underline; cursor: pointer;}

.sd_default{margin-bottom: .5em;}
:not(li).sd_default{display: block;}

.sd_p{text-align: justify; margin-bottom: .5em;}
:not(li).sd_p{display: block;}

.sd_h1{font-size: 1.4em; margin-top: .4em; margin-bottom: .4em; color: #333; }
:not(li).sd_h1{display: block; }

.sd_address{font-family: monospace;}
:not(li).sd_address{display: block;}

:not(li).sd_italic{display: block;}
:not(li).sd_strong{display: block;}


.sd_img{ }
.sd_img .content{display: block; background: #f0f0f0; padding: 0; text-align: center;}
.sd_ico .content img{width: auto !important; height: 130px !important; margin: 0;}
.sd_address .content{}
.sd_strong .content{font-weight: bold;}
.sd_italic .content{font-style: italic;}




@media screen and (max-width: 1024px){
	.serp_content{display: grid; grid-template-columns: 33% 33% 33%; gap: 1.4em;}
	.serp_box1{grid-column: 1; grid-row: 1;}
	.serp_box2{grid-column: 2; grid-row: 1;}
	.serp_box3{grid-column: 3; grid-row: 1;}
	.serp_box_keywords{grid-column: 1/4; grid-row: 3;}
	.serp_box_results{grid-column: 1/4; grid-row: 2;}
	
	.serp_box_related_search{grid-column: 1/2; grid-row: 4;}
	.serp_box_questions{grid-column: 2/3; grid-row: 4;}
	.serp_box_complementary_keywords{grid-column: 3/4; grid-row: 4;}
}


#alyze-vue[data-device='tablet'] .serp_content{display: grid; grid-template-columns: 33% 33% 33%; gap: 1.4em;}
#alyze-vue[data-device='tablet'] .serp_box1{grid-column: 1; grid-row: 1;}
#alyze-vue[data-device='tablet'] .serp_box2{grid-column: 2; grid-row: 1;}
#alyze-vue[data-device='tablet'] .serp_box3{grid-column: 3; grid-row: 1;}
#alyze-vue[data-device='tablet'] .serp_box_keywords{grid-column: 1/4; grid-row: 3;}
#alyze-vue[data-device='tablet'] .serp_box_results{grid-column: 1/4; grid-row: 2;}
	
#alyze-vue[data-device='tablet'] .serp_box_related_search{grid-column: 1/2; grid-row: 4;}
#alyze-vue[data-device='tablet'] .serp_box_questions{grid-column: 2/3; grid-row: 4;}
#alyze-vue[data-device='tablet'] .serp_box_complementary_keywords{grid-column: 3/4; grid-row: 4;}

@media screen and (max-width: 450px){
	.toggle-display-box{display: none;}
	
	.serp_content{grid-template-columns: 100%; gap: 1.4em;}
	.serp_box1{grid-column: 1; grid-row: auto;}
	.serp_box2{grid-column: 1; grid-row: auto;}
	.serp_box3{grid-column: 1; grid-row: auto;}
	.serp_box_keywords{grid-column: 1; grid-row: auto;}
	.serp_box_results{grid-column: 1; grid-row: auto;}
	.serp_box_complementary_keywords{grid-column: 1; grid-row: auto;}
	
	.serp_box_related_search{grid-column: 1; grid-row: auto;}
	.serp_box_questions{grid-column: 1; grid-row: auto;}

	
	.optimize_content{grid-template-columns: 100%; gap: 1.4em;}
	.optimize_content box_keys{grid-column: 1; grid-row: auto;}
	.optimize_content box_audit{grid-column: 1; grid-row: auto;}
}


#alyze-vue[data-device='mobil'] .serp_content{grid-template-columns: 100%; gap: 1.4em;}
#alyze-vue[data-device='mobil'] .serp_box1{grid-column: 1; grid-row: auto;}
#alyze-vue[data-device='mobil'] .serp_box2{grid-column: 1; grid-row: auto;}
#alyze-vue[data-device='mobil'] .serp_box3{grid-column: 1; grid-row: auto;}
#alyze-vue[data-device='mobil'] .serp_box_keywords{grid-column: 1; grid-row: auto;}
#alyze-vue[data-device='mobil'] .serp_box_results{grid-column: 1; grid-row: auto;}
#alyze-vue[data-device='mobil'] .serp_box_complementary_keywords{grid-column: 1; grid-row: auto;}
	
#alyze-vue[data-device='mobil'] .serp_box_related_search{grid-column: 1; grid-row: auto;}
#alyze-vue[data-device='mobil'] .serp_box_questions{grid-column: 1; grid-row: auto;}

	
#alyze-vue[data-device='mobil'] .optimize_content{grid-template-columns: 100%; gap: 1.4em;}
#alyze-vue[data-device='mobil'] .optimize_content box_keys{grid-column: 1; grid-row: auto;}
#alyze-vue[data-device='mobil'] .optimize_content box_audit{grid-column: 1; grid-row: auto;}