@import url('https://fonts.googleapis.com/css2?family=Marcellus&display=swap');



:root {
--font-title: 'Marcellus', serif, system-ui;
--font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--color-bg: #f9f8f6;
--color-text: black;
--color-text-muted: dimgray;
--color-accent: darkblue;
--color-accent-light: aliceblue;
--color-border: lightgray;
--color-code-bg: linen;
--color-toolbar-bg: #d0d2e0;
--color-quote-bg: oldlace;
--max-width: 90rem;
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

html {
font-size: clamp(14px, 0.9rem + 0.5vw, 20px);
-webkit-text-size-adjust: 100%;
}

body {
font-family: var(--font-body);
line-height: 1.6;
color: var(--color-text);
background-color: var(--color-bg);
/*padding: 2rem 5%;
padding: 0rem 2%;*/
display: block;
}





/* ==================================================
   HAMBURGER
================================================== */
#hamburger{
position:fixed;
top:6px;
right:12px;
align-items:center;/



justify-content:center;
font-family:monospace;
margin:0;
padding:4px;
border:1px solid gray;
background:white;
cursor:pointer;
line-height:1;
font-size: 1.5rem;
border-radius:6px;
background-color:beige;
box-shadow:0 4px 8px rgba(0,0,0,0.3);
z-index: 10000;
}

#hamburger:hover{
transform:scale(1.1);
}

.burgerText{
font-size:0.7rem;
}

#hamburger:hover{
transform:scale(1.1);
}


/* ==================================================
   SIDEBAR
================================================== */
aside {
  width: 0;
  padding-top: 14rem;
  height: 76vh;
  background: #3498db;
  color: white;
  padding: 20px;
  padding-left: 0;
  /*box-sizing: border-box;*/
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9000;

  overflow-x: hidden;
  overscroll-behavior: contain;
overflow-y: auto;
  opacity: 0;
  transform: translateX(-10px);
 /* transition: width 0.15s ease, opacity 0.15s ease, transform 0.15s ease;*/
  border: 1px solid blue;

  background: linear-gradient(45deg,
  #85c1e9 0%,
  #a9d6f5 25%,
  #c39bd3 60%,
  #d7bde2 100%);

  box-shadow: 4px 0 8px rgba(0,0,0,0.3);
  border-bottom-right-radius: 40%;

}

aside.show {
  width: 50vw;
  opacity: 1;
  transform: translateX(0);
}

#menu h1{
font-size: 10em;
margin: 2rem auto;
line-height: 1;
display: inline-block;
vertical-align: middle;
}
/* ==================================================
   TOOLBAR
================================================== */
#SiteName {
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    font-family: 'Marcellus', serif;
    font-size: 2.4vw;
}

.custom-toolbar {
display: flex;
width: 100%;
box-sizing: border-box;
background-color: var(--color-toolbar-bg);
color: #000000;
padding: 6px 0;
align-items: stretch;
border-bottom: 1px solid #d9e2ec;
}
.toolbar-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 10%;
box-sizing: border-box;
cursor: pointer;
}
.toolbar-icon {
font-size: 1.4rem;
line-height: 1;
font-style: normal;
font-weight: 300;
color: #000000;
}
.toolbar-title-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 50%;
box-sizing: border-box;
}
.toolbar-title {
margin: 0;
font-size: 1.2rem;
line-height: 1.2;
font-weight: 600;
color: #000000;
}
.item-label {
font-size: 0.75rem;
margin-top: 6px;
color: #486581;
font-weight: 500;
}
.subtitle-placeholder {
visibility: hidden;
}
.empty-space {
display: flex;
flex-direction: column;
width: 10%;
}

/* ==================================================
   IMAGES
================================================== */
#main{
margin:0;
padding: 0rem 2%;
}

#main > h1:first-of-type{
    margin:0;
    padding:0;
    padding-top: 1rem;
    padding-bottom: 0rem;
    display: block;
    text-align:center;
    /*outline: 1px solid red !important;*/
}


#main img {
    display: block;
    width: 98%;
    height: auto;
    margin: 1rem auto;
    border: 1px solid gray;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

#main p:has(img){
    text-align:center;
      margin:0.5rem 0;
}

#main figure{
    text-align:center;
}

/*
#main p img{
    max-width:  84%;
    height:auto;
}

*/
/* ==================================================
   FOOTER
================================================== */
#pageFooter{
background: LightSteelBlue;
padding:1rem;
/*min-height: 100vh;*/
}

#pageFooter ul,#pageFooter ul ul,#pageFooter ul ul ul{
list-style:none;
line-height:1.3;
/*font-size:1.0rem;*/
color:black;
}

#pageFooter a{
color:navy;
text-decoration:none;
/*font-size:1.2rem;*/
}

#pageFooter a:hover{
text-decoration:underline;
}

#pageFooter .icon-row{
display:flex;
justify-content:space-between;
align-items:center;
width:100%;
text-align:center;
}

#pageFooter .icon-block{
display:flex;
flex-direction:column;
align-items:center;
}

#pageFooter .icon{
/*font-size:2rem;*/
cursor:pointer;
}

#pageFooter .icon.red{color:red;}
#pageFooter .icon.black{color:black;}

#pageFooter .icon-text{
/*font-size:1.2rem;*/
margin-top:0.3rem;
}








/* Styles du Treeview */
.treeview-container ul{
list-style-type:none;
padding-left: 0.2rem;
margin-left: 14px !important ;
}

.treeview-container li > details  {
    padding: 0px !important ;
    margin: 0px !important ;
}


.treeview-container li > details > ul {
    
    padding: 0px !important ;
    margin: 0px !important ;
    margin-left: 14px !important ;
        margin-top: 8px  !important ;
}



.treeview-container li{
/*margin:4px 0;*/
background-color:  transparent;
}

.treeview-container details{
/*margin:4px 0;*/
background-color:  transparent;
}



/* Icônes et liens */
.treeview-container li a,
.treeview-container summary{
text-decoration:none;
color:#212529;
display:flex;
align-items:center;
background-color:  transparent;
/*padding:4px 8px;*/
/*border-radius:4px;*/
/*transition:background 0.2s;*/
cursor:pointer;
}


/*
.treeview-container li a:hover,
.treeview-container summary:hover{
background-color:#e9ecef;
color:#007bff;
}
*/

/* Icône Fichier par défaut */
.treeview-container li a::before{
content:"📄";
margin-right:10px;
font-size:1.1em;
}

/* Icône Dossier */
.treeview-container summary::before{
content:"📁";
margin-right:10px;
font-size:1.1em;
}

/* Icône Dossier Ouvert */
.treeview-container details[open] > summary::before{
content:"📂";
}

/* Retrait de la flèche par défaut de HTML5 */
.treeview-container summary{
list-style:none;
}

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

/* Icônes spécifiques par extension */
.treeview-container li a[href$=".pdf"]::before{
content:"📕";
}

.treeview-container li a[href$=".jpg"]::before,
.treeview-container li a[href$=".png"]::before{
content:"🖼️";
}

.treeview-container li a[href$=".php"]::before{
content:"🐘";
}

.treeview-container li a[href$=".html"]::before{
content:"🌐";
}

.treeview-container li a[href$=".md"]::before{
content:"📝";
}





/*
.colonnes2 {
column-count: 2;
column-gap: 20px;
column-fill: balance;
width: 100%;
margin: 0 auto;
}
*/

.colonnes2 {
column-count: 2;
column-gap: 20px;
column-fill: balance;
width: calc(100% - 20px);
margin: 0 auto;
padding: 0;
list-style-position: inside;
overflow-wrap: break-word;
word-break: break-word;
}


#main {
width: 100%;
max-width: var(--max-width);
margin: 0 auto;
display: block;
overflow-wrap: break-word;
word-wrap: break-word;
}

#main p {
margin-top: 0;
margin-bottom: 1.2rem;
white-space: normal;
display: block;
width: 100%;
clear: both;
}

#main > *:last-child {
margin-bottom: 0;
}

h1, h2, h3, h4, h5, h6 {
font-family: var(--font-title);
color: var(--color-accent);
font-weight: bold;
line-height: 1.25;
margin-top: 2rem;
margin-bottom: 1rem;
display: block;
clear: both;
}

h1, h2, h3 {
text-align: center;
}

h1 {
font-size: 1.75rem;
/*border-left: 0.35rem solid var(--color-accent);*/
padding-left: 0.8rem;
border-bottom: none;
padding-bottom: 0;
}

h1, h2, h3 {
    text-shadow: 2px 2px 5px rgba(80, 80, 80, 0.12);
  /* 
background: linear-gradient(
    0deg,
    red 20%,
    violet 30%,
    midnightblue 50%,
    blue 100%
);

background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; 
*/
}






h2 {
font-size: 1.45rem;
/*border-left: 0.25rem solid var(--color-accent);*/
padding-left: 0.6rem;
border-bottom: none;
padding-bottom: 0;
}

h3 {
font-size: 1.25rem;
/*border-left: 0.15rem solid var(--color-accent);*/
padding-left: 0.5rem;
}

h4, h5, h6 {
text-align: left;
}

h4 {
font-size: 1.1rem;
padding-left: 0.4rem;
}

h5 {
font-size: 1rem;
padding-left: 0.4rem;
}

h6 {
font-size: 0.85rem;
color: var(--color-text-muted);
text-transform: uppercase;
padding-left: 0.4rem;
}

a {
color: var(--color-accent);
text-decoration: none;
border-bottom: 0.0625rem solid transparent;
transition: border-color 0.2s ease;
}

a:hover, a:focus {
border-bottom-color: var(--color-accent);
outline: none;
}

strong {
font-weight: bold;
color: black;
}

em {
font-style: italic;
color: var(--color-text-muted);
}

small {
font-size: 0.8rem;
color: var(--color-text-muted);
}

mark {
background-color: moccasin;
color: darkgoldenrod;
padding: 0.1rem 0.2rem;
border-radius: 0.15rem;
}

ins {
background-color: lightgreen;
color: darkgreen;
text-decoration: none;
padding: 0.1rem 0.2rem;
}

del {
color: var(--color-text-muted);
text-decoration: line-through;
}

sub, sup {
font-size: 0.75rem;
line-height: 0;
position: relative;
vertical-align: baseline;
}

sub {
bottom: -0.25em;
}

sup {
top: -0.5em;
}

code {
font-family: monospace, monospace;
font-size: 0.9em;
background-color: var(--color-code-bg);
color: mediumvioletred;
padding: 0.2rem 0.4rem;
border-radius: 0.25rem;
white-space: normal;
overflow-wrap: break-word;
word-break: break-all;
}

kbd {
font-family: monospace, monospace;
font-size: 0.85em;
background-color: white;
color: var(--color-text);
padding: 0.15rem 0.35rem;
border: 0.0625rem solid lightgray;
border-bottom-color: darkgray;
border-radius: 0.2rem;
box-shadow: inset 0 -0.0625rem 0 darkgray, 0 0.0625rem 0.0625rem rgba(0,0,0,0.2);
}

pre {
font-family: monospace, monospace;
font-size: 0.9rem;
background-color: var(--color-code-bg);
padding: 1rem;
border-radius: 0.4rem;
border: 0.0625rem solid var(--color-border);
overflow-x: auto;
max-width: 100%;
white-space: pre-wrap;
word-wrap: break-word;
overflow-wrap: break-word;
display: block;
}

pre code {
background-color: transparent;
color: var(--color-text);
padding: 0;
border-radius: 0;
font-size: inherit;
white-space: pre-wrap;
word-break: normal;
display: block;
}

ul, ol {
padding-left: 1.5rem;
display: block;
}
ul li {
    list-style-type: none;
}

li {
margin-bottom: 0.4rem;
display: list-item;
}

li > ul, li > ol {
margin-top: 0.4rem;
margin-bottom: 0;
}

ul {
list-style-type: disc;
}

ol {
list-style-type: decimal;
}

dl {
margin-bottom: 1.2rem;
display: block;
}

dt {
font-weight: bold;
margin-top: 0.6rem;
color: var(--color-accent);
display: block;
}

dd {
padding-left: 0;
margin-bottom: 0.4rem;
font-style: italic;
display: block;
}

img, video, audio {
max-width: 100%;
height: auto;
display: block;
margin: 1.5rem auto;
border-radius: 0.25rem;
box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.05);
}

figure {
margin: 1.5rem 0;
text-align: center;
display: block;
}

figure img {
margin: 0 auto 0.5rem auto;
}

figcaption {
font-size: 0.85rem;
color: var(--color-text-muted);
font-style: italic;
display: block;
}

hr {
border: none;
height: 0.125rem;
background: linear-gradient(to right, transparent, var(--color-accent), transparent);
margin: clamp(2rem, 1.25rem + 2vw, 4rem) 0;
border-radius: 62.4375rem;
display: block;
}


hr.spacer {
    border: none;
    background: none;
    margin: 0;
    height: 4vh;
}



table {
width: 98%;
border-collapse: separate;
border-spacing: 0;
margin-bottom: 1.2rem;
margin-left: auto;
margin-right: auto;
border: 1px solid #000;
border-radius: 0.4rem;
}

th, td {
padding: 0.3rem 0.4rem;
border-bottom: 0.0625rem solid var(--color-border);
border-right: 0.0625rem solid var(--color-border);
text-align: left;
}

th {
background-color: #80b0ff;
font-family: var(--font-title);
font-weight: bold;
color: var(--color-accent);
}

tr:nth-child(even) {
background-color: #c0daf6;
}

th:first-child {
border-top-left-radius: 0.4rem;
}

th:last-child {
border-top-right-radius: 0.4rem;
border-right: none;
}

tr:last-child td:first-child {
border-bottom-left-radius: 0.4rem;
}

tr:last-child td:last-child {
border-bottom-right-radius: 0.4rem;
border-right: none;
}

tr:last-child td {
border-bottom: none;
}

td:last-child {
border-right: none;
}







details {
background-color: var(--color-quote-bg);
padding: 0.6rem 1rem;
/*border: 0.0625rem solid var(--color-border);
border-radius: 0.25rem;*/
display: block;
}

summary {
font-weight: bold;
cursor: pointer;
font-family: var(--font-title);
color: var(--color-accent);
outline: none;
display: list-item;
}

summary::-webkit-details-marker {
color: var(--color-accent);
}

address {
font-style: normal;
color: var(--color-text-muted);
border-left: 0.125rem solid var(--color-border);
padding-left: 0.8rem;
margin: 1rem 0;
display: block;
}

abbr[title] {
border-bottom: 0.0625rem dotted var(--color-text-muted);
cursor: help;
text-decoration: none;
}



/*
blockquote{max-width:92%!important;margin:20px auto!important;padding:8px 1.4rem;border:2px solid #ccc;border-left-width:6px;border-radius:6px;font-family:sans-serif; for background-color:#f9f9f9;box-shadow:0 2px 16px rgba(0,0,0,.06);}

.callout-title{font-size:1.2em;font-weight:bold;margin-bottom:6px;display:flex;align-items:center;gap:10px;justify-content:center;}
.callout-title::before{font-size:1.4em;vertical-align:middle;text-align:center;}
.callout-text{font-size:1em;margin:0;}
blockquote:not(:has(.callout-title))::before{font-size:1.4em;float:left;margin-right:10px;line-height:1.5;}
blockquote.info{background-color:#e8f4fd;border-color:#2196f3;color:#0d47a1;}
blockquote.info .callout-title::before,blockquote.info:not(:has(.callout-title))::before{content:"ℹ️";}
blockquote.note{background-color:#f5f5f5;border-color:#616161;color:#212121;}
blockquote.note .callout-title::before,blockquote.note:not(:has(.callout-title))::before{content:"📝";}
blockquote.tip{background-color:#e8f8f5;border-color:#1abc9c;color:#117a65;}
blockquote.tip .callout-title::before,blockquote.tip:not(:has(.callout-title))::before{content:"💡";}
blockquote.success{background-color:#e8f5e9;border-color:#4caf50;color:#1b5e20;}
blockquote.success .callout-title::before,blockquote.success:not(:has(.callout-title))::before{content:"✅";}
blockquote.warning{background-color:#fff8e1;border-color:#ffb300;color:#b78103;}
blockquote.warning .callout-title::before,blockquote.warning:not(:has(.callout-title))::before{content:"⚠️";}
blockquote.danger{background-color:#ffebee;border-color:#f44336;color:#c62828;}
blockquote.danger .callout-title::before,blockquote.danger:not(:has(.callout-title))::before{content:"🚨";}
blockquote.example{background-color:#f3e5f5;border-color:#9c27b0;color:#4a148c;}
blockquote.example .callout-title::before,blockquote.example:not(:has(.callout-title))::before{content:"🧪";}
blockquote.code{background-color:#f8f9fa;border-color:#6c757d;color:#333333;font-family:monospace;}
blockquote.code .callout-title::before,blockquote.code:not(:has(.callout-title))::before{content:"💻";}
blockquote.quote{background-color:#fff3e0;border-color:#ff9800;color:#e65100;}
blockquote.quote .callout-title::before,blockquote.quote:not(:has(.callout-title))::before{content:"💬";}
blockquote.bug{background-color:#fce4ec;border-color:#e91e63;color:#880e4f;}
blockquote.bug .callout-title::before,blockquote.bug:not(:has(.callout-title))::before{content:"🪲";}
blockquote.todo{background-color:#f4f6f7;border-color:#95a5a6;color:#34495e;}
blockquote.todo .callout-title::before,blockquote.todo:not(:has(.callout-title))::before{content:"📌";}
blockquote.help{background-color:#f5eef8;border-color:#8e44ad;color:#4a235a;}
blockquote.help .callout-title::before,blockquote.help:not(:has(.callout-title))::before{content:"❓";}
blockquote.large .callout-title{font-size:1.6em;}
blockquote.large .callout-text{font-size:1.2em;}
blockquote.shadow{box-shadow:0 4px 15px rgba(0,0,0,0.1);}
*/





.red {
color: red !important;
}
.blue {
color: blue;
}
.green {
color: green;
}
.white {
color: white;
}
.gray {
color: #888;
}
.orange {
color: orange;
}
.purple {
color: purple;
}
.bg-gray {
background-color: #eee;
padding: 2px 6px;
}
.bg-red {
background-color: #fdd;
padding: 4px 10px;
color: #900;
}
.bg-green {
background-color: #dfd;
padding: 4px 10px;
color: #060;
}
.bg-blue {
background-color: #d1ecf1;
padding: 4px 10px;
color: #006;
}
.bg-yellow {
background-color: #ffd;
padding: 4px 10px;
color: #640;
}
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}
.upper {
text-transform: uppercase;
}
.mono {
font-family: monospace;
}
.big {
font-size: 1.5rem  !important;
}
.big2 {
font-size: 2.0rem !important;
}
.big3 {
font-size: 3.0rem !important;
}

.small {
font-size: 0.85rem;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
.left {
text-align: left;
}
.border1 {
border: 1px solid LightGray !important;
padding: 2px 6px;
}
.border2 {
border: 2px solid #999;
padding: 2px 6px;
}
.border-red {
border: 2px solid red;
padding: 2px 16px;
}
.border-green {
border: 2px solid green;
padding: 2px 6px;
}
.border-blue {
border: 1px solid blue  !important;
}
.rounded {
border-radius: 0.6rem   !important;
}
.height30vh{
height: 30vh;
}

.mark {
background-color: beige;
padding-left: 5px;
padding-right: 5px;
border-radius: 2px;
}

.grad1 {
  height: 150px;
  width: 200px;
  background-image: radial-gradient(red, green, blue);
}
.grad2 {
  background: radial-gradient(circle, lch(79 33 356) 20%, lch(82 28 253) 100%);
}
.grad3 { 
  background: radial-gradient(red, orange, yellow, green, blue, purple);
}
.grad4{
  background:
    linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
    linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
    linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%);
}


/*

blockquote.custom-alert {
    width: 92%;
    margin: 20px auto;
    padding: 18px 22px;
    border-radius: 12px;
    border: 2px solid;
    border-left-width: 7px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    font-size: 1.03em;
  }

  
  blockquote.info      { background: #e0f2fe; border-color: #0ea5e9; }
  blockquote.note      { background: #f0f9ff; border-color: #3b82f6; }
  blockquote.tip       { background: #ecfdf5; border-color: #10b981; }
  blockquote.success   { background: #ecfdf5; border-color: #10b981; }
  blockquote.warning   { background: #fefce8; border-color: #eab308; }
  blockquote.danger    { background: #fef2f2; border-color: #ef4444; }
  blockquote.primary   { background: #f0f9ff; border-color: #3b82f6; }
  blockquote.example   { background: #f3e8ff; border-color: #8b5cf6; }
  blockquote.code      { background: #f1f5f9; border-color: #64748b; }
  blockquote.quote     { background: #fdf4ff; border-color: #c026d3; }
  blockquote.bug       { background: #fef2f2; border-color: #f43f5e; }
  blockquote.todo      { background: #fefce8; border-color: #f59e0b; }
  blockquote.help      { background: #ecfdf5; border-color: #14b8a6; }
  blockquote.question  { background: #f0f9ff; border-color: #6366f1; }
  blockquote.idea      { background: #fefce8; border-color: #f59e0b; }
  blockquote.update    { background: #ecfdf5; border-color: #10b981; }
  blockquote.security  { background: #fef2f2; border-color: #ef4444; }
  blockquote.calendar  { background: #f0f9ff; border-color: #3b82f6; }
  blockquote.money     { background: #ecfdf5; border-color: #10b981; }
  blockquote.time      { background: #f1f5f9; border-color: #64748b; }



  blockquote.large    { padding: 24px 28px; font-size: 1.3em; }
  blockquote.small    { padding: 12px 16px; font-size: 0.80em; }
  blockquote.shadow   { box-shadow: 0 10px 25px rgba(0,0,0,0.18); }
  blockquote.border-thick { border-width: 4px; border-left-width: 10px; }
  blockquote.no-icon  { padding-top: 14px; } 
  blockquote.center   { text-align: center; }


  .callout-title {
    font-family: 'Marcellus', serif;
    font-weight: 700;
    font-size: 1.18em;
    color: #1e2937;
    text-align: center;
    margin-bottom: 14px;
  }

  .callout-text {
    line-height: 1.75;
  }

*/



/* STRUCTURE INTERNE DU COMPOSANT COLORBOX */
.color-box-container {
display: flex;
padding: 15px;
margin: 15px 2rem;
border-radius: 4px;
align-items: center;
}
.color-box-icone {
margin-right: 1.6rem;
font-size: 1.6rem;
flex-shrink: 0;
}
.color-box-contenu {
flex-grow: 1;
font-family: sans-serif;
}


.color-box-titre {
font-weight: bold;
margin-bottom: 4px;
font-size: 1.3rem;
text-align: center;
}

.color-box-texte {
/*font-size: 14px;*/
line-height: 1.4;
}
/* STYLE DES LISTES À PUCHES INTERNES */
.color-box-texte ul {
margin: 5px 0 0 0;
padding-left: 20px;
}
.color-box-texte li {
margin: 2px 0;
}






/* STYLE DES BOÎTES INDIVIDUELLES */

.info{background-color:#e8f4fd;border-color:#2196f3;color:#0d47a1;}
.note{background-color:#f5f5f5;border-color:#616161;color:#212121;}
.tip{background-color:#e8f8f5;border-color:#1abc9c;color:#117a65;}
.success{background-color:#e8f5e9;border-color:#4caf50;color:#1b5e20;}
.warning{background-color:#fff8e1;border-color:#ffb300;color:#b78103;}
.danger{background-color:#ffebee;border-color:#f44336;color:#c62828;}
.example{background-color:#f3e5f5;border-color:#9c27b0;color:#4a148c;}
.code{background-color:#f8f9fa;border-color:#6c757d;color:#333333;font-family:monospace;}
.quote{background-color:#fff3e0;border-color:#ff9800;color:#e65100;}
.bug{background-color:#fce4ec;border-color:#e91e63;color:#880e4f;}
.todo{background-color:#f4f6f7;border-color:#95a5a6;color:#34495e;}
.help{background-color:#f5eef8;border-color:#8e44ad;color:#4a235a;}
.large .callout-title{font-size:1.6em;}
.large .callout-text{font-size:1.2em;}
.shadow{box-shadow:0 4px 15px rgba(0,0,0,0.1);}


.question {
background-color: #f0f7ff;
border-left: 5px solid #0066cc;
padding: 1rem;
margin-bottom: 1.15rem;
border-radius: 0 4px 4px 0;
}
.update {
background-color: #f6f0ff;
border-left: 5px solid #6f42c1;
padding: 1rem;
margin-bottom: 1.15rem;
border-radius: 0 4px 4px 0;
}
.security {
background-color: #fff0f0;
border-left: 5px solid #cc0000;
padding: 1rem;
margin-bottom: 1.15rem;
border-radius: 0 4px 4px 0;
}
.calendar {
background-color: #fdf6e2;
border-left: 5px solid #b58900;
padding: 1rem;
margin-bottom: 1.15rem;
border-radius: 0 4px 4px 0;
}
.money {
background-color: #f0fff4;
border-left: 5px solid #28a745;
padding: 1rem;
margin-bottom: 1.15rem;
border-radius: 0 4px 4px 0;
}
.time {
background-color: #f8f9fa;
border-left: 5px solid #6c757d;
padding: 1rem;
margin-bottom: 1.15rem;
border-radius: 0 4px 4px 0;
}



.info {
background-color: #e0f2fe;
color: #000000;
border-left: 6px solid #0ea5e9 !important;
}
.success {
background-color: #dcfce7;
color: #000000;
border-left: 6px solid #22c55e;
}
.warning {
background-color: #fef3c7;
color: #000000;
border-left: 6px solid #f59e0b;
}
.danger {
background-color: #fee2e2;
color: #000000;
border-left: 6px solid #ef4444;
}
.primary {
background-color: #f1f5f9;
color: #000000;
border-left: 6px solid #64748b;
}
.idea {
background-color: #f3e8ff;
color: #000000;
border-left: 6px solid #a855f7;
}
.todo {
background-color: #f8fafc;
color: #000000;
border-left: 6px solid #94a3b8;
}
.money {
background-color: #ecfdf5;
color: #000000;
border-left: 6px solid #10b981;
}
.large {
padding: 20px;
}
.small {
padding: 10px;
}
.shadow {
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.25), 0 4px 6px -2px rgba(0,0,0,0.15);
}

/*
.shadow {
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)  !important;
}
*/
.border-thick {
border-left-width: 10px !important;
}