/* ==========================================================================
   Legacy Browser Compatibility Polyfills & Vendor Styles
   Targets: Safari 6 (Mac OS X Mountain Lion 10.8), Chrome 49, IE10/11 (Windows 7)
   ========================================================================== */

/* Webkit box layout fallbacks for Safari 6 & older WebKit engines */
.app-header, .brand-wrapper, .machine-pill, .nav-bar, .file-toolbar, 
.station-header, .chat-container, .mail-container, .modal-header {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

/* Ensure flexbox works on older Safari 6 (-webkit-box) */
.flex-box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

/* Clearfix utility for float fallbacks if flexbox fails */
.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}

/* Scrollbar beautifier that degrades cleanly */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #0f172a;
}
::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* Old WebKit input styling fixes */
input[type="text"], input[type="password"], input[type="email"], select, textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Ensure modal displays properly even without flexbox */
.modal-overlay {
  text-align: center;
  white-space: nowrap;
}
.modal-overlay:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}
.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
  white-space: normal;
}