/* force to display the toc when the window size is larger than 992px (correspond to col-lg)*/

@media (min-width:992px) {
    .toc {
        display: block !important
    }
}


/* add padding to avoid footer overlapping. the padding should be of the same height or more than the footer */
.content-here {
    padding-bottom: 250px;
}

/* from getc HP */
body {
    position: relative;
    font-family: "Helvetica Neue", Arial, YuGothic, "游ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, sans-serif;
    font-weight: 400;
    line-height: normal;
    color: #282828;
}

/* remove dot when button is on focus */

:focus {
    outline: none !important;
}

.back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 2%;
    right: 2%;
    display: none;
    z-index: 1000;
}

/* LINKS
=============================================================================*/

a {
    /* color: #4183C4; */
    text-decoration: none;
    color: #3787dd
}


/* TODO: see how to uncomment this BUT without having underlined item in navbar*/
/* a:hover {
    text-decoration: underline;
} */


/* CUSTOMIZATIONS */




.doc-title {
    /* float: left; */
    /* display: block; */
    /* padding: 10px 20px 10px; */
    /* margin-left: -20px; */
    font-size: 20px;
    font-weight: 200;
    color: #2a214b;
    /* background-color: rgb(221, 223, 235); */
    border: 2px solid black;
    border-radius: 0px; /* Adjust the value for the desired corner roundness */
    outline: 2px solid black;
    outline-offset:4px;
    padding: 10px; /* Add padding if needed */
    /* border: 5px solid #000000; */
     /* Set the border width and color */
    /* padding: 20px; */
     /* Add padding inside the box */
    /* border-radius: 2px; */
     /* Set the border radius for rounded corners */

    text-align: center;
    max-width: 790px;
    /* text-shadow: 0 1px 0 #ffffff; */
    margin-bottom: 4rem !important; /* Adjust the value as needed to increase the space */
    margin-top: 2rem !important; /* Adjust the value as needed to increase the space */
}

.doc-title p {
    max-width: none;
    margin: 0; /* Remove default margin for paragraphs inside the div */
    margin-bottom: 1rem;
}

.doc-info .navbar-text {
    padding: 0 15px;
}


/* describe the font of the title of the document */
/* the first <p> is the title of the document */
/* the second <p> is the author of the document */
/* the third <p> is the version of the document */

.doc-title p:nth-child(1) {
    font-family: 'Meiryo', sans-serif; /* Replace 'Meiryo' with the font you want for the first <p> */
    font-size: 1.4rem; /* Adjust the font size as needed for the first <p> */
    font-weight: bold; /* Adjust the font weight as needed for the first <p> */
    /* Add other styles as needed for the first <p> */
}

.doc-title p:nth-child(2) {
    font-family: 'Font2', sans-serif; /* Replace 'Font2' with the font you want for the second <p> */
    font-size: 1.2rem; /* Adjust the font size as needed for the second <p> */
    font-weight: normal; /* Adjust the font weight as needed for the second <p> */
    /* Add other styles as needed for the second <p> */
}

.doc-title p:nth-child(3) {
    font-family: 'Font3', sans-serif; /* Replace 'Font3' with the font you want for the third <p> */
    font-size: 0.9rem; /* Adjust the font size as needed for the third <p> */
    font-weight: italic; /* Adjust the font weight as needed for the third <p> */
    padding-bottom: 2rem;
    /* Add other styles as needed for the third <p> */
}


.note {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    max-width: 740px;
    color: #4e4e4e;
    background-color: rgb(223, 223, 223);
}


.note p{
    margin: 0;
}

h1 a {
    color: #333;
}

h2 a {
    color: #333;
}

h3 a {
    color: #333;
}

h4 a {
    color: #333;
}

h5 a {
    color: #333;
}

h6 a {
    color: #333;
}

h1:hover a {
    color: #333;
}

h2:hover a {
    color: #333;
}

h3:hover a {
    color: #333;
}

h4:hover a {
    color: #333;
}

h5:hover a {
    color: #333;
}

h6:hover a {
    color: #333;
}


/* make all img responsive by adding figure-img and img-fluid to img*/

.container-fluid .row img {
    vertical-align: middle;
    border-style: none;
    margin-bottom: 0.5rem;
    line-height: 1;
    max-width: 100%;
    height: auto;
}


/* Numbering heading
=============================================================================*/

body {
    counter-reset: h1
}

h1 {
    counter-reset: h2
}

h2 {
    counter-reset: h3
}

h3 {
    counter-reset: h4
}

h4 {
    counter-reset: h5
}

h5 {
    counter-reset: h6
}

h1:before {
    counter-increment: h1;
    content: counter(h1) ". "
}

h2:before {
    counter-increment: h2;
    content: counter(h1) "."counter(h2) ". "
}

h3:before {
    counter-increment: h3;
    content: counter(h1) "."counter(h2) "."counter(h3) ". "
}


/*
h4:before {counter-increment: h4; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "}
h5:before {counter-increment: h5; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "}
h6:before {counter-increment: h6; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "}
*/

h1.nocount:before,
h2.nocount:before,
h3.nocount:before,
h4.nocount:before,
h5.nocount:before,
h6.nocount:before {
    content: "";
    counter-increment: none
}


/* BLOCKS
=============================================================================*/

/* p, */
/* blockquote, */
/* ul, */
/* ol, */
/* dl { */
/* max-width: 690px; */
/* padding-left: 2%; */
/* padding-left: 4%; */
/* padding-right:5%; */
/* } */



ol,
ul,
dl {
    padding-left: 4%;
}

li p {
    padding-left: 0%;
}

p,
blockquote,
ul,
ol,
dl,
pre {
    /* TODO: see how to uncomment the margin without applying it to the item of the navbar */
    /* margin: 15px 0; */
    max-width: 740px;
    line-height: 1.5;
    /* font-size: 0.95rem; */
}



ul p,
ol p {
    margin: 15px 0;
    /* max-width:740px; */
    /* padding-right:15%; */
}

blockquote,
table,
img,
code {
    /* margin: 15px 0; */
    /* max-width:940px; */
    padding-left: 0px;
    padding-right: 0px;
}


/* HEADERS
=============================================================================*/

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 20px 0 10px;
    padding: 0;
    padding-left: 0%;
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
}

h1 tt,
h1 code,
h2 tt,
h2 code,
h3 tt,
h3 code,
h4 tt,
h4 code,
h5 tt,
h5 code,
h6 tt,
h6 code {
    font-size: inherit;
}

h1 {
    font-size: 28px;
    color: #000;
}

h2 {
    font-size: 24px;
    padding-left: 2%;
    /*  border-bottom: 1px solid #ccc;
  color: #000;*/
}

h3 {
    font-size: 18px;
    padding-left: 4%;
}

h4 {
    font-size: 16px;
    padding-left: 4%;
}

h5 {
    font-size: 14px;
    padding-left: 4%;
}

h6 {
    font-size: 14px;
    padding-left: 4%;
}

body>h2:first-child,
body>h1:first-child,
body>h1:first-child+h2,
body>h3:first-child,
body>h4:first-child,
body>h5:first-child,
body>h6:first-child {
    margin-top: 0;
    padding-top: 0;
}

a:first-child h1,
a:first-child h2,
a:first-child h3,
a:first-child h4,
a:first-child h5,
a:first-child h6 {
    margin-top: 0;
    padding-top: 0;
}

h1+p,
h2+p,
h3+p,
h4+p,
h5+p,
h6+p {
    margin-top: 10px;
}

title {
    display: block;
}

.title {
    margin-top: 6rem;
    text-align: center;
}

figure {
    max-width: 690px;
    text-align: center;
}


/* LISTS
=============================================================================*/

ul,
ol {
    padding-left: 4%;
}

ul li> :first-child,
ol li> :first-child,
ul li ul:first-of-type,
ol li ol:first-of-type,
ul li ol:first-of-type,
ol li ul:first-of-type {
    margin-top: 0px;
}

ul ul,
ul ol,
ol ol,
ol ul {
    margin-bottom: 0;
}

/* ol p { */
/*! padding-left=-1em */
/* } */

dl {
    padding: 0;
}

dl dt {
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
    padding: 0;
    margin: 15px 0 5px;
}

dl dt:first-child {
    padding: 0;
}

dl dt>:first-child {
    margin-top: 0px;
}

dl dt>:last-child {
    margin-bottom: 0px;
}

dl dd {
    margin: 0 0 15px;
    padding: 0 15px;
}

dl dd>:first-child {
    margin-top: 0px;
}

dl dd>:last-child {
    margin-bottom: 0px;
}


/* CODE
=============================================================================*/
/* overwrite the css of sourcecode created by pandoc */
/* see https://stackoverflow.com/questions/62774695/pandoc-where-are-css-files-for-syntax-highlighting-code for more detail on how css is generated */
.sourceCode { overflow-x: auto; }


pre,
code,
tt {
    font-size: 0.85rem;
    font-family: source-code-pro, Consolas, "Liberation Mono", Courier, monospace;
}

code,
tt {
    margin: 0 0px;
    padding: 0px 0px;
    white-space: nowrap;
    /* border: 1px solid #eaeaea; */
    /* background-color: #f8f8f8; */
    border-radius: 3px;
    /*color: #37a9cc;*/
    color: #d35400;
    overflow: scroll;
}

pre>code {
    margin: 0;
    padding: 0;
    white-space: pre;
    border: none;
    background: transparent;
}

pre {
    background-color: #f8f8f8;
    border: 0px solid #ccc;
    /* font-size: 13px; */
    line-height: 19px;
    overflow: auto;
    padding: 6px 10px;
    border-radius: 3px;
}

pre code,
pre tt {
    background-color: transparent;
    border: none;
}

kbd {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #DDDDDD;
    background-image: linear-gradient(#F1F1F1, #DDDDDD);
    background-repeat: repeat-x;
    border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD;
    border-image: none;
    border-radius: 2px 2px 2px 2px;
    border-style: solid;
    border-width: 1px;
    font-family: "Helvetica Neue", Meiryo, Helvetica, Arial, sans-serif;
    line-height: 10px;
    padding: 1px 4px;
}


/* TABLES
=============================================================================*/

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0px;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.85rem;
    line-height: normal;
}

table th {
    font-weight: bold;
    background-color: #fff;
}

table th,
table td {
    border: 1px solid #ccc;
    /* padding: 6px 13px; */
    padding: 1px 4px;
}

table tr {
    border-top: 1px solid #ccc;
    background-color: #fff;
}

table tr:nth-child(2n+1) {
    background-color: #f8f8f8;
}


/* table {
    table-layout: fixed;
    word-wrap: break-word;
} */

table caption {
    padding: 1em;
    /* font-size: 0.95rem; */
}


/* The html output of pandoc include the caption in the <table> marker
I add margin to the bottom to add blank space under the horizontal scroll of responsive table
*/

.table-responsive {
    margin-bottom: 2rem;
}


/* IMAGES
=============================================================================*/


/*
img {
    max-width: 100%;
    overflow: hidden;
        margin-left:auto;
    margin-right:auto;
  text-align:center;
  }


div.figure {
    margin: 0 auto;
    text-align:center;
}

p.caption{
 text-align: center;
  }
}
*/


/*
div.figure {
    display: inline-block;
    border: 1px dotted gray;
    margin: 20px;
    text-align: center;
}
div.figure img {
    vertical-align: top;
    text-align: center;
}
div.figure p.caption {
    border: 1px dotted blue;
    text-align: center;
}
*/

div.figure {
    width: 90%;
    padding: 1em;
    height: auto;
    margin: 5% 0;
    text-align: center;
    /*border: 1px dotted gray;*/
}

div.figure img {
    margin: 0 auto;
    padding: 0em;
    text-align: center;
    clear: left;
    display: inline-block;
    margin: 0 auto;
}

div.figure p.caption {
    margin: 0 auto;
    padding: 1em;
    text-align: center;
    clear: left;
    display: inline-block;
    margin: 0 auto;
    /* border: 1px dotted blue; */
}


/* TOC
=============================================================================*/


/* .toc { margin-top: 10px; } */

.toc,
.toc ul {
    padding: 0;
}

.toc ul {
    margin-left: 0;
    margin-bottom: 20px;
    list-style: none;
}

.toc ul>li>a {
    display: block;
}

.toc ul>li>a:hover,
.toc ul>li>a:focus {
    text-decoration: none;
    background-color: #eeeeee;
}

.toc ul {
    margin-bottom: 0;
}


/* .toc ul > li > a, .toc ul > li > a { padding: 3px 15px; } */

.toc ul>li>a {
    padding: 3px 15px;
}

.toc ul>li>a {
    padding-right: 15px;
}

.toc ul>li>ul>li>a {
    margin-left: 15px;
    line-height: normal;
}

.toc {
    background-color: #f5f5f5;
    /* position: -webkit-sticky; */
    position: sticky;
    top: 5vh;
    /* width: 100%; */
    max-height: 90vh;
    min-height: 200px;
    overflow: hidden;
    /* white-space: nowrap; */
    /* margin-right:30px; */
    /* padding-right: 30px; */
    margin-top: 5vh;
    padding-bottom: 20px;
    padding-right: 16px;
    /*coupled with padding-right: 0px; on hover to avoid text wrap when the scroll bar is displayed*/
    font-size: 0.85rem;
    overflow-y: auto;
    scrollbar-width: thin;
}


/* .toc:hover{
    margin-right: -16px;
    padding-right: 0px;
    overflow-y: auto;
    overflow-x: hidden;
    white-space: nowrap;
} */

.toc-header {
    display: block;
    padding: 3px 15px;
    font-size: 1rem;
    font-weight: normal;
    line-height: 20px;
    color: #999999;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    padding-top: 20px;
    padding-bottom: 20px;
}

/* p {
    margin-left: 1rem;
    margin-right: 1rem;
} */

@media (max-width: 768px) {
    .flex-md-equal>* {
        -ms-flex: 1;
        -webkit-box-flex: 1;
        flex: 1;
    }

    .toc {
        position: static;
        overflow: hidden;
        width: inherit;
        height: inherit;
        overflow: hidden;
    }

    .toc:hover {
        overflow: auto;
    }

    /* .navbar{
    visibility: hidden;
  } */
}