/* this file is loaded by index.html and styles the page */

html,
body {
  padding: 0;
  margin: 0;
  border: 0;
  height: 100%;
  width: 100%;
  background: #EEEEEE;
  color: #0f1c26;
}

* {
  font-family: Arial,Helvetica,Roboto,sans-serif;
  box-sizing: border-box;
}

h1 {
  text-align: center;
  font-weight: 400;
  font-size: 20pt;
  color: #DCE5E7;
}

.titleLeft {
  display: flex;
  flex-direction: row;
  float:left;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  justify-content: center;
  width:5%;
}

.titleCenter {
  display: flex;
  flex-direction: row;
  float:left;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  justify-content: center;
  font-weight: 400;
  font-size: 20pt;
  color: #DCE5E7;
  width:90%;
}

.titleRight {
  display: flex;
  flex-direction: row;
  float:left;
  padding-top: 10px;
  padding-bottom: 10px;
  justify-content: center;
  text-align: center;
  color: #DCE5E7;
  width:5%;
}

.titleLink:link {  color: #DCE5E7;}
.titleLink:visited {  color: #DCE5E7;}
.titleLink:hover {  color: #DCE5E7;}
.titleLink:active {  color: #DCE5E7;}

body {
  display: flex;
  flex-direction: column;
}
header,
footer {
  flex: 0 0 auto;
  background-color: #162a38;
}
main {
  flex: 1 1 100%;
  display: flex;
  padding:  24px;
}
main section {
  flex: 0 0 50%;

}

main startButton {
  flex: 0 0 4%;
  text-align: center;
  font-size: 13pt;
}

footer {
  color: #C4C5C8;
  padding-top: 14px;
  padding-bottom: 22px;
  font-size: 14px;
}
footer a {
  color: #C4C5C8;
  flex: 0 0 auto;
}
footer .footer {
  text-align: center;
}

#intro {
  text-align: center;
  margin-left: 20pt;
  margin-right: 20pt;
  color: #0f1c26;
  font-size: 13pt;
}

#explanation {
  display: flex;
  text-align: center;
  margin-top: 20pt;
  margin-bottom: 20pt;
  margin-left: 20pt;
  margin-right: 20pt;
  color: #0f1c26;
  font-size: 13pt;
}

#startProcess {
  font-size: 13pt;
  text-align: center;
  background-color: #FFFFFF;
  color:#1FBAEC;
  margin-left: 20pt;
  margin-right: 20pt;
  padding: 7pt;
  border-width: 1pt;
  border-style: solid;
  border-color: #1FBAEC;
}

#startProcess:hover {
  background-color: #1FBAEC;
  color: #FFFFFF;
}

#inputEditor {
  height: 100%;
  margin-right: 6px;
}

#inputEditor.active {
  outline-width: 3pt;
  outline-style: dashed;
  outline-color: #1FBAEC;
}

#outputEditor {
  height: 100%;
  margin-left: 6px;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  font-size: 11pt;
  visibility: hidden;
  width: 180px;
  background-color: #555;
  color: #DCE5E7;
  text-align: left;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: -350%;
  left: 10%;
  margin-left: -40px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 0.95;
}