html { position: relative; height: 100%; }

body { padding: 50px 0 60px 0; height: 100%; }

.footer { position: absolute; bottom: 0; width: 100%; height: 60px; background-color: #363537; display: flex; justify-content: center; align-items: center; }
.footer .ss-close-button { display: none; }

.container { width: 100%; }

#navbar { background-color: #FFBE0B; border-top: none; }

.navbar { height: 50px; }

.navbar-inverse { background-color: #FFBE0B; border-bottom: none; }
.navbar-inverse .navbar-brand { color: white; padding-top: 5px; padding-bottom: 5px; }
.navbar-inverse .navbar-brand img { height: 100%; }
.navbar-inverse .navbar-toggle { border: none; }
.navbar-inverse .navbar-toggle:focus { background-color: #FFBE0B; }
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:active { background-color: #EFAE00; }
.navbar-inverse .navbar-toggle:hover:active { background-color: #FFBE0B; }
.navbar-inverse .navbar-nav li a { color: white; }
.navbar-inverse .navbar-nav li a:hover { background-color: #EFAE00; }
.navbar-inverse .navbar-nav li.active a, .navbar-inverse .navbar-nav li.active a:hover { background-color: #EFAE00; }

.btn-primary { background-color: #EE5622; border-color: #EE5622; }
.btn-primary:hover { background-color: #FE6632; border-color: #FE6632; }
.btn-primary:hover:active { background-color: #DE4612; border-color: #DE4612; }
.btn-primary:focus { background-color: #EE5622; border-color: #EE5622; }

.ss-editor { display: flex; flex-flow: row; flex-wrap: nowrap; height: 100%; }
.ss-editor .row { height: 100%; }
.ss-editor .ss-input { width: 50%; height: 100%; background-color: #E8EEF2; padding: 0; }
.ss-editor .ss-input textarea { background: none; border: none; }
.ss-editor .ss-input div.CodeMirror { height: 100%; background-color: #E8EEF2; }
.ss-editor .ss-input div.CodeMirror div.CodeMirror-gutters { border: none; }
.ss-editor .ss-input div.CodeMirror div.CodeMirror-gutters div.CodeMirror-linenumbers { background-color: #D8DEE2; }
.ss-editor .ss-output { width: 50%; height: 100%; background-color: #6B6D76; padding: 0; }
.ss-editor .ss-output textarea { background: none; border: none; }
.ss-editor .ss-output div.CodeMirror { height: 100%; background-color: #6B6D76; }
.ss-editor .ss-output div.CodeMirror div.CodeMirror-gutters { border: none; }
.ss-editor .ss-output div.CodeMirror div.CodeMirror-gutters div.CodeMirror-linenumbers { background-color: #5B5D66; }

@media screen and (max-width: 767px) { .ss-editor { display: block; }
  .ss-editor .ss-input { width: 100%; -moz-transition: height 0.3s ease-out 0; -webkit-transition: height 0.3s ease-out 0; -ms-transition: height 0.3s ease-out 0; transition: height 0.3s ease-out 0; }
  .ss-editor .ss-output { width: 100%; height: 0; -moz-transition: height 0.3s ease-out 0; -webkit-transition: height 0.3s ease-out 0; -ms-transition: height 0.3s ease-out 0; transition: height 0.3s ease-out 0; }
  .ss-editor.ss-show-output .ss-input { height: 0; -moz-transition: height 0.3s ease-out 0; -webkit-transition: height 0.3s ease-out 0; -ms-transition: height 0.3s ease-out 0; transition: height 0.3s ease-out 0; }
  .ss-editor.ss-show-output .ss-output { height: 100%; -moz-transition: height 0.3s ease-out 0; -webkit-transition: height 0.3s ease-out 0; -ms-transition: height 0.3s ease-out 0; transition: height 0.3s ease-out 0; }
  .footer .ss-try-button.ss-show-output { display: none; }
  .footer .ss-close-button.ss-show-output { display: inline; } }
.cm-s-default .cm-comment { color: #aaaaaa; }