body {
  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;  
  padding: 0;
  margin: 0;
  background-color: #5368ad;
  color: #222;
}

.center {
	margin: auto;
	max-width:  960px;
	text-align: center;
	background: white;
  padding: 50px;
  margin-top: 50px;
  margin-bottom: 50px;
  border-radius: 5px;
}

.header {
  text-align: left;
  margin-bottom: 20px;  
}

.footer {
  text-align: left;
  font-size: small;
  margin-top: 40px;
  margin-bottom: -40px;
}

.header h1 {
  color: #485c91;  
}

i.icon {
  margin: 1px;
  cursor: pointer;
  vertical-align: middle;
}

.depict_icon_button:hover {
  color: #66aaff;
}

#depict_main_opts {
	padding:    2px;
	text-align: left;
	font-size:  15pt;
}

#result {
  text-align: left;
  padding: 5px 0 0 0;
}

.chemdiv {
  display:          inline-block;
  margin:           0;
  text-align:       center;
  vertical-align:   middle;
  background:       #fff;
  padding:          2px;
  box-sizing:       border-box;
  transition: 600ms ease-in-out;
}

.chemdiv:hover {
  background: #eeeeff;
  transition: 600ms ease-in-out;
}

.chemdiv:hover .links {
  opacity: 100%;
}

.chemdiv.molecule {
  width:      240px;
  max-width:  240px;
  height:     200px;
  max-height: 200px;
}

.chemdiv.reaction {
  width:      480px;
  max-width:  480px;
  height:     200px;
  max-height: 200px;
}

.chemdiv.scheme {
  width:      480px;
  max-width:  480px;
}

.chemdiv .grid {
  display: grid;
  grid-template-rows: minmax(0, auto) max-content;
  grid-template-columns: minmax(0, auto);
  grid-template-areas: "main"
                       "bottom";
  width: 100%;
  height: 100%
}

.img {
    justify-self: justify;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    text-align: center;
    grid-area: main;
    position: relative;
}

.img .valign-helper {
    height: 100%;
    vertical-align: middle;
    display: inline-block;
}

.img img {
    vertical-align: middle;
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
}

.title {
  width: 100%;
  font-size: smaller;
  grid-area: bottom;
}

.links {
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.links a {
  color: inherit;
  font-size: 16pt;
  padding: 1px;
}

.links a:hover {
  color: steelblue;
  text-shadow: 0 0 3px steelblue;
}

/* styles */

.chemdiv {
  background: white;  
}

.wob .chemdiv,
.cob .chemdiv,
.wot .chemdiv {
  background: black;
  color: #eee;
}

.nob .chemdiv {
  background: black;
  color: #00FF0E;
}

.nob .links a:hover {
  color: yellow;
  text-shadow: 0 0 3px yellow;
}

.error img {
  display: none;
}

.error-mesg {
  color: red;
  font-size: 9pt;
  text-align: left;
  overflow: hidden;
}

..error-mesg h1 {
  font-size: 1.1em;
  margin: 0;
}

..error-mesg pre {
  font-size: 6pt;
  font-family: Courier, 'Fixed Width';
}

#depict_extra_opts {
  display: none;
}

#depict_extra_opts th,
#depict_extra_opts input,
#depict_extra_opts select {
  font-family: Futura;
  font-size:   10pt;
}

#depict_extra_opts input,
#depict_extra_opts select {
  border: 1px solid #444;
  border-radius: 2px;
  font-size:   8pt;
}

#depict_extra_opts {
	margin: auto;
}

.textin {
	background-color: #333;
	color: #00ee00;
	font-family: "Courier", Monospace;
	font-size: 10pt;
	padding: 5px;
	border: none;
}

textarea#input {
	width:  100%;
	min-height: 40px;
	height: 125px;
	resize: vertical;
}

#sma {
	width:  249px;
	resize: none;
}

input,
textarea {
  border-radius: 3px;
  border: 1px solid #444;
}

textarea {
  padding: 5px;
}