textarea {
width:600px;height:300px
}

body {
background-color: #ffffff;
}

select{
margin-left:24px;
}

textarea#input {
width: 100%;
margin-bottom: 0px;
}

textarea#output {
width: 100%;
}

p {
font-size:12pt;
font-family:"Helvetica";
line-height: 24px;
margin-bottom:0px;
}

label {
font-size:12pt;
font-family:"Helvetica";
line-height: 24px;
margin-bottom:0px;
}

h1 {
font-size:18pt;
font-family:"Helvetica";
margin-bottom:0px;
}

h2 {
font-size:14pt;
line-height: 24pt;
font-family:"Helvetica";
margin-bottom:0px;
}

h4 {
font-size:14pt;
font-family:"Helvetica";
margin-bottom:8px;
}

hr {
margin-top:24px;
margin-bottom:24px;
}

body {
padding:20px;
}

.image_holder{
text-align: center;
width:240px;
height:240px;
margin-left:auto;
margin-right:auto;
}

#maindiv{
position: absolute;
left: 50%;
margin-right: -50%;
transform: translate(-50%, 0%);
text-align: left;
width: 800px;
background-color: white;
}

.inputbox{
	position:absolute;
	left:170px;
}

.recommended{
	position:absolute;
	left:300px;
}

.inputboxglyph{
  position:absolute;
  left:230px;
}

select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%238C98F2'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
background-size: 12px;
background-position: calc(100% - 10px) center;
background-repeat: no-repeat;
background-color: #efefef;
color:black;
}


#layout{
font-size:11pt;
font-family:"Helvetica";
height:32px;
width:85px;
margin-left:0px;
margin-right:24px;
}

#tab_location{
font-size:11pt;
font-family:"Helvetica";
height:32px;
width:130px;
margin-left:0px;
}

.toc{
margin-top:0px;
margin-bottom:12px;
}

.accordion {
font-size:14pt  !important;
font-family:"Helvetica" !important;
background-color: #eee;
color: #000 !important;
cursor: pointer !important;
padding: 14px !important;
width: 100% !important;
text-align: center !important;
border: none !important;
outline: none !important;
margin-bottom:5px;
}

.active {
background-color: #eee;
}

@media not all and (pointer: coarse) {
.accordion:hover {
background-color: #9f9;
}
}

.expandall{
font-size:11pt  !important;
font-family:"Helvetica" !important;
width:120px !important;
height:40px !important;
padding:7px !important;
border-radius:4px !important;
border:0px !important;
color:black !important;
background-color: #eee;
}

@media not all and (pointer: coarse) {
.expandall:hover {
background-color: #9f9;
}
}

.tocpanel {
padding: 12px !important;
padding-left: 60px !important;
background-color: white !important;
display: none;
overflow: hidden !important;
}



.btn {
  --color: #000000;
  --background-color: #d8d8d8;
  --border-color: darken(#d8d8d8, 7.5%);
  color: var(--color);
  font-family: helvetica !important;
  font-size: 11pt !important;
  background-color: var(--background-color);
  padding: 0.7rem 0.7rem;
  padding-top: 0.8rem;
  border: solid 1px var(--border-color);
  outline: none;
  position: relative;
  border-radius: 0.5rem;
  user-select: none;
  box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.25), 0 -0.1rem 0.5rem rgba(0, 0, 0, 0.1) inset;
  transition: box-shadow 64ms ease-out;
  -webkit-appearance:none;
}

.btn:after {
  content: "";
  background-color: #ffffff;
  width: 75%;
  height: 12.5%;
  position: absolute;
  top: 0.15rem;
  left: 12.5%;
  border-radius: 50%;
  filter: blur(0.15rem);
  transition: opacity 64ms ease-out;
}

.btn:active {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.4), 0 0.4rem 1rem rgba(0, 0, 0, 0.3) inset;
}
.btn:active:after {
  opacity: 0;
}

.btn-info {
  --color: #ffffff;
  --background-color: #0091ea;
  --border-color: #0079c4;
}
.btn-info:active {
  --color: #ececec;
}
.btn-success {
  --color: #ffffff;
  --background-color: #00c853;
  --border-color: #00a243;
}
.btn-success:active {
  --color: #ececec;
}
.btn-warning {
  --color: #3e2723;
  --background-color: #ffc400;
  --border-color: #d9a700;
}
.btn-warning:active {
  --color: #261815;
}
.btn-error {
  --color: #ffffff;
  --background-color: #d50000;
  --border-color: #af0000;
}
.btn-error:active {
  --color: #ececec;
}
.btn-dark {
  --color: #ffffff;
  --background-color: #303030;
  --border-color: #1d1d1d;
}
.btn-dark:active {
  --color: #ececec;
}


.btn-controls{
  --color: black;
  --background-color: lavender;
}

.btn-generate{
  --color: black;
  --background-color: #BBFFBB;
}


/* For modal dialog prompt replacement */
.modal_flat_background { background-color: #000; opacity: 0.4; }
.modal_flat_main { border: 1px solid #333; box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);  }

/* font size only */
.modal_flat_main, .modal_flat_main input, .modal_flat_main button {  font-size: 16px; }

.modal_flat_main input, .modal_flat_main button {  padding: 5px; box-sizing: border-box; }
.modal_flat_inner { padding: 30px; background: #fff; color: #000; }
.modal_flat_content { font-family:"Helvetica"; margin: 20px 0px;}
.modal_flat_input { margin: 20px 0px;}
.modal_flat_buttons { text-align:center;margin-top: 40px; }
.modal_flat_main button { background-color: #ccc; color: #000; padding: 10px 20px; border: 0px; cursor: pointer; outline: none; width: 100px;  }
.modal_flat_cancel {margin-left: 5px;}