@font-face {
  font-family: 'ttf_light';
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url('/DATA/light.ttf');
  font-display: swap;
}


@font-face {
  font-family: 'ttf_bold';
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url('/DATA/bold.ttf') ;
  font-display: swap;
}


h1,h2,#logo2{
  font-family: 'ttf_bold';
  filter: drop-shadow(5px 5px 2px var(--shadow-color));
}

body,#search_cloud{
  background: var(--background-color);
  color: var(--on-background-color);
  font-family: 'ttf_light';
}

.h1_head p,svg>path{
  fill: var(--on-surface-color);
}

.h1 svg>path,.h2 svg>path{
  fill: var(--accent-color);
}

.svg_alert>path{
  fill: var(--error-color)!important;
}

#nav_bottom{
  background: var(--on-accent-color);
  color: var(--on-surface-secondary-color);
  box-shadow: 0 -3px 5px var(--shadow-color);

}

h1 {
    color: var(--on-primary-color);
}

.nav_b_tab>svg>path{
  fill: var(--on-surface-secondary-color);
}

#nav_top{
background: var(--surface-color);
border-bottom: solid 1px var(--accent-color);
box-shadow: 0px 5px 10px var(--shadow-color);
}
#nav_top .tab {
  color: var(--on-surface-color);
}
#nav_top .tab.down,.h1_tool .down {
  color: var(--on-primary-color);
  font-weight: bolder;
  text-decoration: underline;
}

.nav_b_tab.down{
  text-decoration: underline;
}



#nav_top .tab:hover,div.ic:hover,div.ic:hover>svg>path,#search_cloud  .idea:hover,.accent,#nav_top .ic:hover,#nav_top
.ic:hover>svg>path,a:hover>svg>path,.h1_tool .ic:hover>svg>path,.line_result
.ic:hover>svg>path,.h1_tool .ic:hover,a:hover,#nav_top select,.el.right
.ic:hover svg>path,.el.right .ic:hover svg  {
  fill: var(--on-primary-variant-color);
  color: var(--on-primary-variant-color);
  background: var(--primary-variant-color);
  border: none;
}

.dial,.small_dial,.h2_div,.tickets,.ticket,.small_dial_head,#search_cloud{
  border: solid 1px var(--accent-color);
}
.alert{
  background: var(--error-color);
  color: var(--on-error-color);
}
#alert{
  background: var(--shadow-color);
  color: var(--on-surface-color);
}
#alert_head {
  background: var(--accent-color);
  color: var(--on-accent-color);
}
#alert_body {
    background: var(--surface-color);
    color: var(--on-surface-color);
}


.infos_alert {
  background: var(--error-color);
  color: var(--on-error-color);
    text-align: center;
}
.infos_alert a {
  background: var(--error-color)!important;
  color: var(--on-error-color)!important;
    text-align: center;
}

#rgpd{
  background: var(--error-color);
  color: var(--on-error-color);
}

.line {
    border-top: solid 1px ;
}

button.accent{
  background: var(--accent-color);
  color: var(--on-accent-color);
  height: 34px;
  padding: 0 14px;
}

a{
  color: var(--accent-variant-color);
}


#search_cloud .idea:hover{
  color: var(--on-primary-color);
  background: var(--primary-color);
}

.idea .soustitre {
    color: var(--on-surface-secondary-color);
}
.infos a ,.infos .txtlink{
    color: var(--accent-variant-color);
}

.datelink,.mapslink {
    background: var(--accent-variant-color);
    color: var(--on-accent-variant-color);
}
.datelink svg>path,.mapslink svg>path{
fill: var(--on-accent-color);
}
.datelink:hover svg>path,.mapslink:hover svg>path{
fill: var(--accent-color);
}
.datelink:hover,.mapslink:hover
{
    display: flex;
    background: var(--primary-variant-color);
    color: var(--accent-variant-color);
    border: solid 1px  var(--accent-variant-color);
}


.infos a:hover ,.infos .txtlink:hover{
    background: var(--primary-variant-color);
    color: var(--on-primary-variant-color);
}
.shadow,.slid_result_div,.dial,.small_dial,.h2_div,.tickets,.ticket,.fab,.small_dial_head{
  box-shadow: 5px 5px 5px var(--shadow-color);
  background: var(--surface-color);
  border: solid 1px var(--on-surface-secondary-color);
}

.slid_result_div:hover {
box-shadow: 0px 0px 5px var(--primary-variant-color);
}



svg {
    filter: drop-shadow( 5px 5px 2px  var(--shadow-color));
}
.bottom_infos .grad,.bottom_infos .lvl{
  color: var(--on-surface-secondary-color);
}

.stat_div svg,.edit_div svg,.infos a{
    background: var(--surface-color);
}

.infos a svg, .infos svg{
  background: var(--surface-color);
  filter: none;
}

.infos a svg>path,.infos svg>path{
  fill: var(--accent-color);
}

.infos a:hover svg{
  background: var(--on-accent-color);
}

.infos a:hover svg>path{
  fill: var(--accent-color);
}

.fab {
  background: var(--accent-color);
  color: var(--on-accent-color);
}
.fab>svg>path {
fill:var(--on-accent-color);
}
.tag{
  color: var(--on-surface-secondary-color);
}
.h2 a>svg {
    border: solid var(--accent-color);
    border-radius: 100%;
}
.h2 a:hover>svg {
    background: var(--accent-color);

}
.h2 a:hover>svg>path {
    fill: var(--on--accent-color);


}
.h2 a:hover {
    background: none;
    color: var(--accent-variant-color);

}


::-webkit-scrollbar{
  height: 12px;              /* height of horizontal scrollbar ← You're missing this */
  width: 12px;            /* width of vertical scrollbar */
  border-top: 1px solid var(--accent-variant-color);
  background: var(--background-color);

}
::-webkit-scrollbar:vertical{
  border-left: 1px solid var(--on-primary-color);
}
::-webkit-scrollbar-thumb{
  background: var(--on-primary-color);

    }
::-webkit-scrollbar-thumb:horizontal{
        border-bottom-left-radius: 12px;
        border-bottom-right-radius:12px;
    }
html.s ::-webkit-scrollbar:horizontal{
height: 4px;
    }

::-webkit-scrollbar-button:single-button {
display: none;
}


.idea_words{
  color:var(--accent-color);
}
.idea .titre{
  color:var(--on-primary-color);
}
.seemore{
  color: var(--accent-color)!important;
  font-size: 18px !important;
  margin-bottom: 2px !important;
}


input[type="submit" i] {
    color:var(--on-accent-color);
    background: var(--accent-color);
}

.odjs{
	border: solid 1px var(--error-color);
	box-shadow: 5px 5px 5px var(--shadow-color);
    background: var(--surface-color);
}