.icon{
    width: 48px;
    height: 48px;
}

.clickable
{
    cursor: pointer;
}

.blue-info-box{
	color: #12256f; /* Use a dark blue instead of black because colour perception is relative */
	background-color: #D8FCFF;
	border: 2px solid #B4D8FF;
	padding: 10px;
	border-radius: 5px;
	width: 100%;
}

.blue-info-box h1{
	font-size: 1em;
}

.copy{
    text-align: right;
    background-color: #343541;
    font-family: Söhne,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Helvetica Neue,Arial,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
    font-size: .75rem;
    line-height: 1rem;
    color: #D1D5DA;
    border-top-right-radius: .375rem;
    border-top-left-radius: .375rem;
}
.icon svg{
    background-color: #0BA37F;
    color: white;
    fill: white;
    border-radius: 3px;
    padding: 3px;
}
.text{
    margin-bottom: 1.25em;
    line-height: 1.75;

	/* force it to use up all the space, even in flex */
	width:100%; 
}

.text table {
	font-size: .875em;
	line-height: 1.7142857;
	text-align: left;
	border: 1px solid #d9d9e3;
	border-radius: .375rem;
	width: 100%;
	
	border-collapse: separate; /* Collapse and radius are incompatible */
    border-spacing: 0;
	
	margin-bottom: 2em;
	margin-top: 2em;
}

.text th:first-child {
  border-top-left-radius: .375rem;
}

.text th:last-child {
  border-top-right-radius: .375rem;
}

.text th {
  border-top-width: 0px !important;	
}

.text th:first-child,
.text td:first-child {
	border-left-width: 0px;
}

/* 
	It's okay, there's no such thing as a markdown table with footers. 
	So we don't need to worry about that case.
*/

.text tr:last-child td:first-child {
  border-bottom-left-radius: .375rem;
}

.text tr:last-child td:last-child {
  border-bottom-right-radius: .375rem;
}


.text th, 
.text td {
	border-left-width: 1px;
	border-top-width: 1px;
	padding: .25rem .75rem;
}

.light .text th {
	background-color: #F7F7F8;
}

.dark .text th {
	background-color: #656773;
}

.clipboard{
    color: #D1D5DA;
}
/* Style page content */
#main {
    margin-left: 190px;
    padding: 0;
}
.light .bot {
    background-color: #F7F7F8 !important;
}
.dark .bot{
    background-color: #434654 !important;
    color: #D1D5DA;
}

.dark .human {
    background-color: #343541;
    color: #ECECF1;
}

.light .human {
    background-color: #ffffff;
}
.text svg{
    display:none
}
pre {
    white-space: pre-wrap;
    border-radius: 0.375rem;
    display: block;
    margin-top: 0;
    margin-bottom: .5rem;
    overflow: auto;
    font-size: .875em;
}
code, pre {
    font-family: Söhne Mono,Monaco,Andale Mono,Ubuntu Mono,monospace!important;
}

pre > code {
    display: block;
    overflow-x: auto;
    padding: 1.25rem!important;
    background-color: black;
}

code {
    font-size: .875em;
    font-weight: 600;
}
.dark code {
    color: #F9F9FA
}
pre code {
    color: #F9F9FA!important;
}
.light code {
    color: #111827
}
pre > code::before, pre> code::after{
    content: "" !important;
}
code::before, code::after{
    content: "`";
}
body.dark{
    background-color: #343541;
}
body.light{
    background-color: #FFF;
}
.dark .human, .dark .bot{
    border-bottom: #2A2B31 1px solid;
}
.light .human, .light .bot{
    border-bottom: #E5E5E5 1px solid;
}

.flex.items-center.relative{
    display: none;
}
/* moves the element to be completely 100% to the left of its parent */
.left-of-parent {
	position: absolute;
	transform: translateX(-100%);
	padding-right: 10px;
}
.branch button {
	background: none;
	border: none;
	color: inherit;
}
.branch button:disabled {
	color: grey;
}

.content a {
    position: relative;
    text-decoration: none;
}

#cover {position: fixed; height: 100%; width: 190px; top:0; left: 0; background: #202123; z-index:9999;}

a.tooltip-target[href]:hover {
    text-decoration-line: underline;
    cursor: pointer;
    border-radius: 2px;
}

.light a.tooltip-target[href]:hover {
    background: rgb(226, 233, 255);
    color: #0e2c89;
    text-decoration-color: #174ae4;
}

a.tooltip-target[href], span.tooltip-target {
    /* position: relative; */
    color: inherit;
    border-bottom: 2px solid transparent;
    text-decoration-style: dotted;
    text-decoration-color: rgb(153, 153, 153);
    text-underline-offset: 3px;
}

a:hover {
    color: inherit
}

a {
    position: relative;
    color: inherit;
    text-decoration: none;
}

sup:hover{
    text-decoration: underline;
}

sup {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    vertical-align: top;
    top: -1px;
    margin: 0px 2px;
    min-width: 14px;
    height: 14px;
    border-radius: 3px;
    text-decoration: none;
    color: #123bb6;
    background: #d1dbfa;
    outline: transparent solid 1px;
}


img {
    max-width: 100%;
    height: auto;
}