/* General utilities */
div.version { font-size: .8em; color: #888; float: right; }

.btn { display: inline-block; line-height: 30px; padding: 0 10px; border-radius: 4px; border: none; background-color: #eee; margin: 3px; font-size: 14px; font-weight: bold; font-family: inherit; cursor: pointer; color: #333333; transition: background-color .2s; white-space: nowrap; }

header #synoptic-logo { display: block; float: left; height: 60px; padding: 10px 5px; line-height: 20px; color: #000; font-weight: 400; font-size: 10px; font-style: italic; text-align: center; }

header #synoptic-logo svg { height: 25px; margin: 0; padding: 0; top: 0; }

input { border: none; background-color: #eee; border-radius: 3px; padding: 3px; margin: 2px; }

body.devmode { border: 3px solid #FC0; }

body.devmode #dm-flag { position: fixed; top: 3px; left: calc(50% - 150px); width: 150px; text-align: center; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; color: #000; background-color: #FC0; cursor: pointer; }

.btn:hover { background-color: #BDBDBD; color: #333; text-decoration: none; }

.btn.red { background-color: #C62828; color: #FFF; }

body { color: #555; }

header .nmp, header a.nmp:hover { display: block; float: left; font-weight: normal; background-color: #fff; border-radius: 4px; color: #2180af; line-height: 34px; height: 60px; padding: 10px; top: 10px; overflow: hidden; font-size: 20px; /*text-transform: lowercase;*/ }

header .nmp img { position: relative; float: left; top: 0; left: 0; height: 34px; padding: 0 10px; }

h1, h2, h3, h4 { color: #222; }

table { border-collapse: collapse; border-spacing: 0; width: 100%; }

table td, table th { padding: 4px; text-align: left; }

table th { word-wrap: none; vertical-align: top; }

table thead th { border-bottom: 2px solid #222; }

table tbody td { border-bottom: 1px solid #eee; }

.emph { /*emphasize*/ color: #000; /*font-weight:bold;*/ font-size: 1.2em; }

#info { float: right; }

.col-cover { clear: both; overflow: hidden; }

.half { width: 46%; padding: 5px 2%; float: left; }

.has_tooltip { cursor: pointer; }

.tooltip { z-index: 999999; position: fixed; background-color: #333; border-radius: 3px; text-align: center; color: #FFF; padding: 5px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4); font-size: 12px; max-width: 250px; line-height: 1.3em; animation: fadeIn ease .2s; }

.tooltip:before { background-color: #333; display: block; content: ""; position: absolute; left: calc(50% - 6px); transform: rotate(45deg); height: 12px; width: 12px; top: -6px; z-index: -1; }

.tooltip.right { text-align: left; }

.tooltip.right:before { left: -6px; top: calc(50% - 6px); }

.tooltip ul { margin: 0; padding: 3px; text-align: left; list-style-position: inside; }

.tooltip ul li { /*list-style:square;*/ /*padding:3px;*/ }

.noscrollbox, .cover { position: fixed; top: 0; left: 0px; height: calc(100%); width: calc(100%); }

.cover { z-index: 923434; background-color: transparent; transition: background-color .3s; position: fixed; }

.cover.colored { background-color: rgba(0, 0, 0, 0.6); }

.modal { /* expects to be positioned over cover */ position: absolute; top: 20px; left: 50%; width: 500px; margin-left: -250px; background-color: #FFF; border-radius: 6px; padding: 6px; max-height: calc(100% - 25px); overflow: Auto; }

.modal h1, .modal h2, .modal h3, .modal h4, .modal h5, .modal h6 { margin: 3px 0; padding: 0; }

.modal .close { position: absolute; top: 10px; right: 10px; font-size: 10px; font-weight: 600; cursor: pointer; }

.modal textarea { width: 100%; min-height: 5em; font-family: inherit; border: none; background-color: rgba(0, 0, 0, 0.05); padding: 5px; }

div.boxed { border: 1px solid #ccc; display: inline-block; padding: 2px 4px; margin: 2px 5px; border-radius: 3px; }

.warn { color: #c00; }

.badge { font-size: .8em; font-weight: bold; display: inline-block; padding: 2px; margin: .1em 0; line-height: 1em; border: 1px solid #CCC; border-radius: 3px; background-color: #dfdede; }

#email-mismatch-email { font-weight: bold; }

footer svg { width: 120px; display: block; }