html {
  scroll-behavior: smooth;
}

/* Code colorisation */
.hljs-keyword {
	font-weight: normal !important;
}

.jumbotron.main-bg-color a:hover {
  color: var(--main-danger-color);
}

#styleguide {
  position: fixed;
  z-index: 99;
  bottom: 30px;
  right: 80px
}

.fullscreen {
  background-color: var(--white-color);
  position: fixed;
  max-width: 100%;
  width: 100%;
  height: 100%;
  z-index: 1045;
  top: 50px;
  left: 0;
  overflow-y: auto;
  margin-block-start: 0;
}

.w-95{
  width: 95% !important;
}

/* Menu                                         */
/* Exemple de surcharge CSS pour images de Menu */
#main-menu-sidebar .nav-item.dropdown .nav-link.dropdown-toggle::before {
  content: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2048%2045%22%3E%0A%20%20%3Cpath%20fill%3D%22%23071F32%22%20d%3D%22M47.846%2026.112c-.17-.003-.307.158-.503.584-4.382%209.514-12.457%2014.073-21.011%2014.136-17.033.124-21.046-13.772-21.153-14.15l8.693%201.612c.045.094%203.37%207.676%2012.152%207.676%209.29%200%2015.755-9.189%2015.755-18.69%200-8.55-3.637-13.442-8.917-17.28L9.2%2010.86a.246.246%200%200%200%20.049.464C22.356%2014.334%2024.58%2023.67%2023.96%2028.968c-.093.791.431.659.934-.825%201.786-5.263.502-12.925-6.603-17.238%200%200%2013.151-6.525%2013.153-6.523%201.58%201.213%206.755%204.672%206.755%2012.898%200%208.23-4.793%2015.707-12.175%2015.707-7.33%200-9.884-7.425-9.923-7.528L.463%2022.08a.369.369%200%200%200-.46.393C1.361%2034.303%2010.912%2044%2024.753%2044c11.485%200%2019.282-6.262%2022.603-15.11.765-2.039.732-2.775.489-2.778%22%2F%3E%0A%3C%2Fsvg%3E');
  position: absolute;
  left: -13.5px;
  top: 13.5px
}

#main-menu-sidebar .nav-item.dropdown:nth-child(1) .nav-link.dropdown-toggle::before {
  content: url('data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%20width%3D%2224%22%20%20height%3D%2224%22%20%20viewBox%3D%220%200%2024%2024%22%20%20fill%3D%22none%22%20%20stroke%3D%22currentColor%22%20%20stroke-width%3D%222%22%20%20stroke-linecap%3D%22round%22%20%20stroke-linejoin%3D%22round%22%20%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-info-circle%22%3E%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M3%2012a9%209%200%201%200%2018%200a9%209%200%200%200%20-18%200%22%20%2F%3E%3Cpath%20d%3D%22M12%209h.01%22%20%2F%3E%3Cpath%20d%3D%22M11%2012h1v4h1%22%20%2F%3E%3C%2Fsvg%3E');
}

#main-menu-sidebar .nav-item.dropdown:nth-child(2) .nav-link.dropdown-toggle::before {
  content: url('data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%20width%3D%2224%22%20%20height%3D%2224%22%20%20viewBox%3D%220%200%2024%2024%22%20%20fill%3D%22none%22%20%20stroke%3D%22currentColor%22%20%20stroke-width%3D%222%22%20%20stroke-linecap%3D%22round%22%20%20stroke-linejoin%3D%22round%22%20%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-layout%22%3E%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M4%204m0%202a2%202%200%200%201%202%20-2h2a2%202%200%200%201%202%202v1a2%202%200%200%201%20-2%202h-2a2%202%200%200%201%20-2%20-2z%22%20%2F%3E%3Cpath%20d%3D%22M4%2013m0%202a2%202%200%200%201%202%20-2h2a2%202%200%200%201%202%202v3a2%202%200%200%201%20-2%202h-2a2%202%200%200%201%20-2%20-2z%22%20%2F%3E%3Cpath%20d%3D%22M14%204m0%202a2%202%200%200%201%202%20-2h2a2%202%200%200%201%202%202v12a2%202%200%200%201%20-2%202h-2a2%202%200%200%201%20-2%20-2z%22%20%2F%3E%3C%2Fsvg%3E');
}

/* COMPOSANT */
#main-menu-sidebar .nav-item:nth-child(3){
  position: relative;
}

#main-menu-sidebar .nav-item:not(.dropdown) .nav-link::before {
  content: url('data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%20width%3D%2224%22%20%20height%3D%2224%22%20%20viewBox%3D%220%200%2024%2024%22%20%20fill%3D%22none%22%20%20stroke%3D%22currentColor%22%20%20stroke-width%3D%222%22%20%20stroke-linecap%3D%22round%22%20%20stroke-linejoin%3D%22round%22%20%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-puzzle%22%3E%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M4%207h3a1%201%200%200%200%201%20-1v-1a2%202%200%200%201%204%200v1a1%201%200%200%200%201%201h3a1%201%200%200%201%201%201v3a1%201%200%200%200%201%201h1a2%202%200%200%201%200%204h-1a1%201%200%200%200%20-1%201v3a1%201%200%200%201%20-1%201h-3a1%201%200%200%201%20-1%20-1v-1a2%202%200%200%200%20-4%200v1a1%201%200%200%201%20-1%201h-3a1%201%200%200%201%20-1%20-1v-3a1%201%200%200%201%201%20-1h1a2%202%200%200%200%200%20-4h-1a1%201%200%200%201%20-1%20-1v-3a1%201%200%200%201%201%20-1%22%20%2F%3E%3C%2Fsvg%3E');
  position: absolute;
   left: -13.5px;
  top: 13.5px
}

#main-menu-sidebar .nav-item.dropdown:nth-child(5) .nav-link.dropdown-toggle::before {
  content: url('data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%20width%3D%2224%22%20%20height%3D%2224%22%20%20viewBox%3D%220%200%2024%2024%22%20%20fill%3D%22none%22%20%20stroke%3D%22currentColor%22%20%20stroke-width%3D%222%22%20%20stroke-linecap%3D%22round%22%20%20stroke-linejoin%3D%22round%22%20%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-color-swatch%22%3E%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M19%203h-4a2%202%200%200%200%20-2%202v12a4%204%200%200%200%208%200v-12a2%202%200%200%200%20-2%20-2%22%20%2F%3E%3Cpath%20d%3D%22M13%207.35l-2%20-2a2%202%200%200%200%20-2.828%200l-2.828%202.828a2%202%200%200%200%200%202.828l9%209%22%20%2F%3E%3Cpath%20d%3D%22M7.3%2013h-2.3a2%202%200%200%200%20-2%202v4a2%202%200%200%200%202%202h12%22%20%2F%3E%3Cpath%20d%3D%22M17%2017l0%20.01%22%20%2F%3E%3C%2Fsvg%3E');
}

#main-menu-sidebar .nav-item.active:not(.dropdown):hover .nav-link::before {
  content: url('data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%20width%3D%2224%22%20%20height%3D%2224%22%20%20viewBox%3D%220%200%2024%2024%22%20%20fill%3D%22none%22%20%20stroke%3D%22currentColor%22%20%20stroke-width%3D%222%22%20%20stroke-linecap%3D%22round%22%20%20stroke-linejoin%3D%22round%22%20%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-puzzle%22%3E%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M4%207h3a1%201%200%200%200%201%20-1v-1a2%202%200%200%201%204%200v1a1%201%200%200%200%201%201h3a1%201%200%200%201%201%201v3a1%201%200%200%200%201%201h1a2%202%200%200%201%200%204h-1a1%201%200%200%200%20-1%201v3a1%201%200%200%201%20-1%201h-3a1%201%200%200%201%20-1%20-1v-1a2%202%200%200%200%20-4%200v1a1%201%200%200%201%20-1%201h-3a1%201%200%200%201%20-1%20-1v-3a1%201%200%200%201%201%20-1h1a2%202%200%200%200%200%20-4h-1a1%201%200%200%201%20-1%20-1v-3a1%201%200%200%201%201%20-1%22%20%2F%3E%3C%2Fsvg%3E');
}

#main-menu-sidebar .nav-item.active:not(.dropdown) .nav-link::before {
  content: url('data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%20width%3D%2224%22%20%20height%3D%2224%22%20%20viewBox%3D%220%200%2024%2024%22%20%20fill%3D%22none%22%20%20stroke%3D%22white%22%20%20stroke-width%3D%222%22%20%20stroke-linecap%3D%22round%22%20%20stroke-linejoin%3D%22round%22%3E%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M4%207h3a1%201%200%200%200%201%20-1v-1a2%202%200%200%201%204%200v1a1%201%200%200%200%201%201h3a1%201%200%200%201%201%201v3a1%201%200%200%200%201%201h1a2%202%200%200%201%200%204h-1a1%201%200%200%200%20-1%201v3a1%201%200%200%201%20-1%201h-3a1%201%200%200%201%20-1%20-1v-1a2%202%200%200%200%20-4%200v1a1%201%200%200%201%20-1%201h-3a1%201%200%200%201%20-1%20-1v-3a1%201%200%200%201%201%20-1h1a2%202%200%200%200%200%20-4h-1a1%201%200%200%201%20-1%20-1v-3a1%201%200%200%201%201%20-1%22%20%2F%3E%3C%2Fsvg%3E');
  background-color: var(--main-info-color);
}

#main-menu-sidebar .nav-item.dropdown:nth-child(3) .nav-link.dropdown-toggle::before {
  content: url('data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%20width%3D%2224%22%20%20height%3D%2224%22%20%20viewBox%3D%220%200%2024%2024%22%20%20fill%3D%22none%22%20%20stroke%3D%22currentColor%22%20%20stroke-width%3D%222%22%20%20stroke-linecap%3D%22round%22%20%20stroke-linejoin%3D%22round%22%20%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-tournament%22%3E%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M4%204m-2%200a2%202%200%201%200%204%200a2%202%200%201%200%20-4%200%22%20%2F%3E%3Cpath%20d%3D%22M20%2010m-2%200a2%202%200%201%200%204%200a2%202%200%201%200%20-4%200%22%20%2F%3E%3Cpath%20d%3D%22M4%2012m-2%200a2%202%200%201%200%204%200a2%202%200%201%200%20-4%200%22%20%2F%3E%3Cpath%20d%3D%22M4%2020m-2%200a2%202%200%201%200%204%200a2%202%200%201%200%20-4%200%22%20%2F%3E%3Cpath%20d%3D%22M6%2012h3a1%201%200%200%201%201%201v6a1%201%200%200%201%20-1%201h-3%22%20%2F%3E%3Cpath%20d%3D%22M6%204h7a1%201%200%200%201%201%201v10a1%201%200%200%201%20-1%201h-2%22%20%2F%3E%3Cpath%20d%3D%22M14%2010h4%22%20%2F%3E%3C%2Fsvg%3E');
}
/* End Menu    */ 

.scrollspy-example {
	height: 200px;
	overflow: auto;
}

/* Home page */
#body-page-home	.card .card-body {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
}
	
#body-page-home	.card .card-body p{
		text-align: center;
}
	

/* Components */
#component{
  position: relative;
  margin-block-start: 0;
}

#col-macro .row:has( > .col .section-code.hidden ){
  margin-block-start: 0;
}

#body-page-45  #col-macro{
  padding-block-start: 0;
}

/* Hide scrollbar for Chrome, Safari and Opera */
#navbar-snippet::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#navbar-snippet {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

#btn-toggle-component-sidebar {
    position: absolute;
    z-index: 3;
    right: 5px;
    top: 12.5px;
    width: 20px;
    padding: 0;
    margin: 0;
}

#btn-toggle-component-sidebar-expand {
    position: absolute;
    z-index: 3;
    right: 0;
    top: 17px;
    width: 20px;
    padding: 0;
    margin: 0;
}

#col-snippet {
  position: sticky;
  overflow-y: scroll;
  top: var(--spacing-xxl);
  left: 0;
  height: 100%;
}

#navbar-snippet {
  overflow-y: scroll;
  position: absolute;
  top: var(--spacing-xs);
  width: 100%;
}

#navbar-snippet .nav-pills {
  position: relative;
  top: 0;
  left: var(--spacing-xs);
  padding: var(--spacing-xs) 0;
  height: auto;
  z-index: 2;
}

#navbar-snippet .nav-pills:hover {
  cursor: pointer
}

#navbar-snippet .nav-pills a, 
#navbar-snippet .nav-pills a small {
    color: var(--main-color);
    text-decoration: none;
    font-size: var(--font-sm);
    font-weight: 400;
    padding-inline: var(--spacing-xxs ) 0;
}

#navbar-snippet .nav-pills a:focus {
  width: 95%;
}

#navbar-snippet .nav-pills a:hover {
  color: rgba(7, 31, 50, .8);
  font-weight: 600;
}

#navbar-snippet .nav-pills .nav-link.active,
#navbar-snippet .nav-pills .show>.nav-link {
  color: var(--main-danger-color);
  background-color: transparent;
  font-weight: 600;
}

#navbar-snippet .nav-pills a:hover .bi.bi-circle::before{
  content: "\f134"
}

#navbar-snippet .nav-pills .nav-link.active .bi.bi-circle::before,
#navbar-snippet .nav-pills .show>.nav-link .bi.bi-circle::before{
  content: "\f26a"
}

#navbar-snippet .nav-pills .nav-link.active:before,
#navbar-snippet .nav-pills .show>.nav-link:before {
  font-weight: 700;
  color: var(--main-danger-color);
}

.code.selected {
  padding: 1rem;
  box-shadow: 1px 6px 14px -4px var(--dark-color)
}

.code-title {
  margin: 2rem 0;
  padding: 1rem 0;
  position: relative;
}

.code-title h2 {
  margin: 0
}

.doc-code-card.p-0 > .card-body {
	padding: 0;
}

.doc-code-card.p-0 > .card-body > .accordion {
	margin:  0;
}

.doc-code-card.p-0 > .card-body > .accordion .card-header {
	padding: var(--spacing-xs);
}

.doc-code-card {
	border-color: var(--main-color) !important;
  /* overflow: scroll; */
}

.doc-code-card  pre{
    margin-block-start: 0;
}

.params-list {
	list-style-type: disclosure-closed;
}
/* Tools */
.btn-code,
.btn-copy-macro:not(.btn-page),
.btn-copy-html:not(.btn-page) {
 	padding: .15rem .5rem 0;
}

.btn-copy-macro, .btn-copy-html {
	position: absolute;
  right: 0;
  background-color: white;
}

.btn-codeview-toggle::after {
 	content: 'Vue';
}

.html-code.hljs.javascript .xml,
.html-code.hljs.javascript .xml .hljs-tag {
  display: block;
}

/* Page color */
#card-container.card-body-hide .col .card .card-body .card-text{
  margin-block: 0
}

/* Page code samples */
.section-code{
  margin-inline: 0;
}

.section-code.fullscreen {
  margin-block-start: var(--spacing-xxl);
}

.section-code .card .card-body .border-top.main-info-border-color{
  padding-block-start: var(--spacing-m);
}

.section-code .card .card-body :is( h4, h5, h6){
  font-size: var(--font-m);
  margin-block-start: var(--spacing-xs);
}

.section-code #main{
  margin-block-start: var(--spacing-xs) !important;
}

.page-tools{
  margin-inline-start: auto;
  margin-inline-end: var( --spacing-sm );
}

.btn-fs.btn-page{
  position: relative;
  top: 0;
  right: 0;
  padding: .5rem .5rem 0
}

.section-code.fullscreen #block-toolbar{
  position: fixed;
  top: 9rem;
  right: 80px;
  z-index: 20000;
}

.section-code.fullscreen .btn-fs.btn-page {
  position: fixed;
  top: 10rem;
  right: 0;
  z-index: 20000;
}

.section-code.fullscreen .btn-fs {
  top: 90px;
  right: 20px;
  position: fixed;
}

.section-code #main-banner{
  margin-block-start: 0;
}

/* Utils */
.padX {
  padding: 0 5vw;
}

.table-color td:hover {
  cursor: pointer;
  position: relative;
}

.table-color td:not(:first-of-type):hover:before {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gray" class="bi bi-clipboard" viewBox="0 0 16 16"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/></svg>');
  position: absolute;
  left: -9px;
}

.table-color td:not(:first-of-type):active:before {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="black" class="bi bi-clipboard" viewBox="0 0 16 16"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/></svg>');
}

.code-block {
	margin-bottom: 5rem;
}


/* Small devices (landscape phones, 576px and up) 			    */
/* Extra small devices (portrait phones, less than 576px) 	*/
@media (max-width: 575.98px) {
  #col-snippet {
    top: 100px;
  }

  #navbar-snippet {
    top: 0;
    left: 0;
    width: 100%;
  }

  #navbar-snippet .nav-link {
    padding: 0;
    margin: 0
  }

  #navbar-snippet .nav-pills .nav-link:focus {
    width: 25%;
}

 #navbar-snippet .nav-link>span {
    position: fixed;
    z-index: 6000;
    left: 20px;
    top: 245px;
    color: var(--main-danger-color);
    display: none;
}

  #navbar-snippet .nav-link.active>span {
    display: block;
    writing-mode: vertical-rl;
  }

  .section-code{
    margin-top: 0;
  }

  .btn-fs:not(.btn-page) {
    top: 12px;
    right: 5px;
  }
  
  .btn-code {
    top: 0
  }

  .btn-show-html {
    right: 10rem;
  }

  .btn-copy-macro {
    right: var(--spacing-xs);
  }

  .btn-codeview-toggle {
    display: none;
  }

  .code-block {
    margin-bottom: var(--spacing-xs);
  }
  
  .code-block .nav-tabs .nav-item,
  .code-block .nav-tabs .nav-item:not(:first-child) h4 {
    padding: 0;
    font-size: var(--font-xs)
  }

  .code-block .nav-tabs .nav-item:first-child {
    width: 100%
  }
  
  .anchors.position-fixed{
    display: none;
  }
}

/* Small devices (landscape phones, 576px and 768)          */
@media (min-width: 576px) and (max-width: 767.98px) {
  #navbar-snippet {
    /* width: 35vw; */
    top: 5vh;
    right: .5rem;
  }
 
  #navbar-snippet .nav-pills a, #navbar-snippet .nav-pills a small {
    font-size: var(--font-xs);
  }

  .code-block .nav-tabs .nav-link .h3{
    font-size: var(--font-size-sm);
  }
  
  .code-block .nav-tabs .nav-item,
  .code-block .nav-tabs .nav-item:not(:first-child) h4 {
    padding: 0;
    font-size: var(---font-sm);
  }

  .code-block .nav-tabs .nav-item:first-child {
    width: 100%
  }

  .anchors.position-fixed {
    left: 0 !important;
    width: 20%;
  }
}

/* Small devices (landscape phones, 576px and 768)          */
@media (min-width: 768px) and (max-width: 991.98px) {
  .code-block .nav-tabs .nav-link .h3{
    font-size: var( --font-m );
  }
  
  .code-block .nav-tabs .nav-link{
    padding-inline:var(--spacing-xs);
  }
}