.hootdown-toolbar
{
cursor: pointer;
width: 100%;
overflow: hidden;
border: 1px solid #bbb;
border-bottom: 0;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
color:var(--black);
padding:3px;
background-color:#e8e8e8;
}

.hootdown-toolbar SPAN
{
padding: 1px 5px;
font-size: 15px;
display: inline-block;
width:32px;
text-align: center;
}

.hootdown-toolbar SPAN *
{
pointer-events:none;
}

.hootdown-toolbar SPAN:hover,
.hootdown-toolbar SPAN:focus
{
background-color:#cfcfcf;
}

.hootdown-toolbar SPAN:active
{
}

.hootdown-toolbar SPAN IMG
{
height:12px;
height:clamp(12px,0.9vw,14px);
}

.hootdown-toolbar-heading1 IMG,
.hootdown-toolbar-heading2 IMG,
.hootdown-toolbar-heading3 IMG
{
height:18px !important;
height:clamp(18px,2.1vw,23px) !important;
}



.hootdown-toolbar-image IMG,
.hootdown-toolbar-link IMG
{
height:16px !important;
}


.hootdown-preview-link
{
text-decoration:underline;
}

.hootdown-prev-editor
{
font-weight: normal;
text-decoration: underline;
margin-left: 20px;
}

.hootdown-bullet
{
margin-left:20px;
margin-bottom:3px;
}

.hootdown-bullet::before
{
content: '\25A0';
width: 13px;
display: inline-block;
margin-left: -20px;
}

.hootdown-bullet-sub
{
margin-left:40px;
margin-bottom:3px;
}

.hootdown-bullet-sub::before
{
content: '\25FE';
width: 12px;
display: inline-block;
margin-left: -20px;
color:#656565;
}

#hootdown-prompt
{
display:none;
position: fixed;
top: 90px;
z-index: 9999;
background:var(--white);
padding: 15px;
width: 35vw;
width:clamp(430px,40vw,800px);
left: 50%;
transform: translateX(-50%);
border-radius: 5px;
box-shadow: 0px 0px 0px 5000px rgba(0,0,0,0.4);
font-family: "Roboto Condensed",Arial,sans-serif;
font-size:17px;
font-size: clamp(17px,1.7vw,19px);
color: #444444;
}

#hootdown-prompt-buttons
{
margin-top:10px;
}

.hootdown-prompt-link
{
text-decoration: underline;
margin-top: 10px;
font-size:16px;
font-size:clamp(16px,1.5vw,19px);
}

TEXTAREA.hootdown
{
font-family: Hack, Menlo, Monaco, Consolas, "Courier New", monospace;
font-size:12px;
font-size:clamp(12px,1.5vw,15px);
resize: none;
overflow-y: scroll;
line-height: 1.3em;
color:var(--black);
}

#preview.hootdown
{
min-height: 20em;
line-height: 1.3em;
border: 1px solid #DDD;
padding: 10px;
border-radius: 4px;
word-break: break-word;
}

#preview.hootdown A,
#preview.hootdown A:visited
{
color: #48C !important;
text-decoration: underline !important;
}

#preview.hootdown A:hover,
#preview.hootdown A:focus
{
color:#06D !important;
}

#preview.hootdown CODE
{
font-family:Hack,Menlo,Monaco,Consolas,"Courier New",monospace;
font-size:12px;
font-size: clamp(12px,1.35vw,15px);
background-color:var(--code-blocks);
color:var(--black);
line-height:initial;
}

#preview.hootdown PRE
{
font-family:Hack,Menlo,Monaco,Consolas,"Courier New",monospace;
padding:3px 7px;
padding-bottom:2px;
line-height:1.2em;
border:0;
font-size:12px;
background-color:var(--code-blocks);
color:var(--black);
white-space: pre;
overflow-wrap: normal;
overflow-x: auto;
word-break: keep-all;
overflow-y:auto;
max-height:30em;
position:relative;
}

#preview.hootdown PRE CODE
{
overflow-wrap:normal;
white-space:pre;
}

#preview.hootdown PRE:hover::before
{
font-size:11px;
font-family:Arial,sans-serif;
content:'Copy Code';
background:var(--black);
color:var(--white);
border: 1px solid rgba(0,0,0,0.2);
text-align:center;
line-height:1.5em;
width:11em;
height:2em;
padding:1px;
position:absolute;
left:86.5vw;
top:5px;
z-index:9999;
pointer-events:none;
border-radius:3px;
}

#preview.hootdown IMG
{
max-width:34vw;
display:block;
cursor:pointer;
border: 1px solid rgba(0,0,0,0.2);
border-radius: 5px;
}

/* up to tablets */
@media (max-width:767px) 
{

	#hootdown-prompt
	{
	width:98%;
	}
	
	#preview.hootdown IMG
	{
	max-width:92vw;
	}

}

/* widescreens */
@media (min-width:1500px)
{
	#preview.hootdown IMG
	{
	max-width:20vw;
	}
}