/* Base 
--------------------------------------------------------------------------------------------------------------------- */

* { box-sizing: border-box !important; }

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, del, dfn, em, img, ins, kbd, q, samp, small, strong, b, i, dl, dt, dd, ol, ul, li, fieldset, form, input, textarea, button, label, table, tbody, tfoot, thead, tr, th, td, article, aside, footer, header, nav, section {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
}

/* Set up root rem value 1 rem = 10px */
/* We only set font-size in rem; other font-related measurements in em */

html {
  font-size: 62.5%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
}


/* General 
--------------------------------------------------------------------------------------------------------------------- */

.success      { color: #3ca43e !important; }
.danger       { color: #dc3326 !important; }
.highlight    { color: #d1621b !important; }

.success-bg   { background: #3ca43e !important; }
.danger-bg    { background: #dc3326 !important; }
.highlight-bg { background: #d1621b !important; }
.important-bg { background: #cee0ea !important; }
.chat-bg      { background: #1f8ceb !important; }

.success-bg, .danger-bg, .highlight-bg, .chat-bg { color: rgba(255,255,255,1); }

.success-bg a, .danger-bg a, .highlight-bg a, .chat-bg a, 
.success-bg a:hover, .danger-bg a:hover, .highlight-bg a:hover, .chat-bg a:hover
 { /*color:rgba(255,255,255,1); */ color:inherit !important; text-decoration: underline !important; }

.nowrap     { white-space: nowrap !important; }
.monospace  { font-family:'Courier New', Courier, monospace !important; }
.underlined { text-decoration: underline !important; }
.hidden     { visibility: hidden; }
.block      { display: block !important; }
.bold       { font-weight: bold; }
.centered   { text-align: center; }

.unselectable { user-select: none; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.show-on-mobile, .show-on-mobile-inline-block { display: none !important; }
.visible-on-mobile { visibility: hidden; }

.show-when-loading, .loading .hide-when-loading { opacity: 0; }
.loading .show-when-loading { opacity: 1; }

.show-when-error, .error .hide-when-error { opacity: 0; }
.error .show-when-error { opacity: 1; }

.show-if-chrome, .show-inline-if-chrome       { display: none !important; }
html[is-chrome="true"] .show-inline-if-chrome { display: inline !important; }
html[is-chrome="true"] .show-if-chrome        { display: block !important; }
html[is-chrome="true"] .hide-if-chrome        { display: none !important; }

[disabled=true] { opacity: 0.5 !important; pointer-events: none; cursor: default; }

.spinner {
  position: absolute;
  top: 50%;
  right: 50%;
  margin: -9px 0 0 -9px;
  height:18px;
}


/* Media: Desktop 
--------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width: 769px) {
  .hide-on-desktop              { display: none !important; }
}


/* Media: Tablet
--------------------------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 768px) {
  .hide-on-tablet               { display: none !important; }
  .show-on-tablet               { display: block !important; }
  .show-on-tablet-inline-block  { display: inline-block !important; }
  .visible-on-tablet            { visibility: visible !important; }
}


/* Media: Mobile
--------------------------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 512px) {

  .hide-on-mobile     { display: none !important; }
  .show-on-mobile     { display: block !important; }
  .show-on-mobile-inline-block  { display: inline-block !important; }
  .visible-on-mobile  { visibility: visible !important; }
}