* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


html, body {
    height:100%;
    padding:0;
    margin:0;
    width:100%;
    font-family:suisse;}
body {
    display:flex;
    flex-direction:column;
    font-family:suisse;
    font-size:12pt;
    background-color:#7b678d;
}
.container {
    margin-top:20px;
    width: 100%;
    clear: both;
}

.container input, select{
    width: 100%;
    clear: both;
    margin-bottom:5px;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

.container select {
    margin-bottom:0;
}

.container label {
    display:none;
}

h1 {
    font-size:18pt;
}

h2 {
    font-size:18pt;
}

@font-face {
    font-family: suisse;
    src: url(SuisseNeue-Regular.otf);
}
@font-face {
    font-family: suisseintl;
    src: url(SuisseIntl-Light.otf);
}

@font-face {
    font-family: suisseintl;
    src: url(SuisseIntl-LightItalic.otf);
    font-style:italic;
}

@font-face {
    font-family: suisseintlmedium;
    src: url(SuisseIntl-Regular.otf);
}


.content{display:flex;
         flex-direction:column;
         max-width:700px;
         margin-left:auto;
         margin-right:auto;
         margin-bottom:50px;
         outline:1px solid #393432;
         border-top:0;}

main {
    /*max-width:700px;*/

    background-color:#ffffff;
    padding:50px;
    padding-bottom:20px;
    padding-top:20px;
}

.explanation {
    font-size: 12pt;
    font-family:suisseintl;
    border-radius:0;
}

.allowed_symbols {
    margin-right:1px;
    font-size: 11pt;
    font-family:suisseintl;
    background-color:#e0e0e0;
    padding:7px;
    padding-left:10px;
    margin-left: 20px;
    margin-bottom:5px;
    border:1px solid #b3b3b3;
    border-top:0;
}

.flash {
    margin-top:1em;
    font-size: 12pt;
    font-family:suisseintl;
    color:#bc3765;
}

.result_message {
    text-align:center;
    font-family:suisseintl;
    margin-bottom:40px;

}

.result_span {
    background-color:#e0e0e0;
    padding:10px;
    outline:1px solid #b3b3b3;
}

.result {
    width:100%;
    text-align:center;
    background-color:#ffffff;
    padding-bottom:50px;
}

nav {min-height:60px;
     background-color:#393432;
     color:white;
     padding-left:25px;
     padding-bottom:5px;}

nav a {
    color:white;
}


svg {display:block; margin:auto;
     max-width:100%;}

.render {display:block; margin-bottom:10px;   padding-left:50px;
         padding-right:50px;}

.footer {min-height:20px; background-color:#ffffff;    flex-grow:1;}

.logicsub {
    font-size:10px;
    margin-left:-2px;
}

#svglink {
    font-family:suisseintl;
    font-size:9pt;
}

.svglink {
    margin:auto;
}

a {
    color:#7b678d;
}

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

a:active {
    text-decoration: none;
}
.tex sub, .latex sub, .latex sup {
    text-transform: uppercase;
}

.tex sub, .latex sub {
    vertical-align: -0.5ex;
    margin-left: -0.1667em;
    margin-right: -0.125em;
}

.tex, .latex, .tex sub, .latex sub {
    font-size: 1em;
}

.latex sup {
    font-size: 0.85em;
    vertical-align: 0.15em;
    margin-left: -0.36em;
    margin-right: -0.15em;
}

.subfooter {
    background-color:#393432;
    min-height:50px;
    color:white;
    font-family:suisseintl;
    font-size:10pt;
    text-align:center;
    line-height:50px;
    margin-bottom:auto;
}

.subfooter a {
    color:white;
    text-decoration:underline;
}

.subfooter span {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

.addon {
    color:#bc3765;
}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted #393432; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #393432;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    
    /* Position the tooltip text - see examples below! */
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left:-60px;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>