@charset "UTF-8";
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/**
 * Remove default margin.
 */
body {
  margin: 0; }

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block; }

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none; }

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background: transparent; }

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0; }

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted; }

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold; }

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic; }

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000; }

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0; }

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden; }

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px; }

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0; }

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto; }

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */ }

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible; }

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none; }

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */ }

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default; }

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal; }

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* 2 */
  box-sizing: content-box; }

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto; }

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold; }

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  padding: 0; }

.clearfix {
  zoom: 1; }
  .clearfix:before, .clearfix:after {
    content: "";
    display: table; }
  .clearfix:after {
    clear: both; }

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/material-design/MaterialIcons-Regular.eot);
  /* For IE6-8 */
  src: local("Material Icons"), local("MaterialIcons-Regular"), url(../fonts/material-design/MaterialIcons-Regular.woff2) format("woff2"), url(../fonts/material-design/MaterialIcons-Regular.woff) format("woff"), url(../fonts/material-design/MaterialIcons-Regular.ttf) format("truetype"); }

.material-icons, .custom-check input[type="checkbox"] + label span:before, .custom-check input[type="radio"] + label span:before,
input[type="checkbox"].custom-check + label span:before, input[type="radio"].custom-check + label span:before {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  /* Preferred icon size */
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga'; }
  .material-icons.vertical-middle, .custom-check input[type="checkbox"] + label span.vertical-middle:before, .custom-check input[type="radio"] + label span.vertical-middle:before,
  input[type="checkbox"].custom-check + label span.vertical-middle:before, input[type="radio"].custom-check + label span.vertical-middle:before {
    vertical-align: middle; }

@font-face {
  font-family: 'Directus';
  src: url("../fonts/directus/directus-regular.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/directus/directus-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/directus/directus-regular.woff") format("woff"), url("../fonts/directus/directus-regular.ttf") format("truetype"), url("../fonts/directus/directus-regular.svg#entypo") format("svg");
  /* Legacy iOS */ }

.icon {
  display: inline-block;
  font-family: "Directus";
  font-size: 300%;
  font-style: normal;
  font-weight: 100 !important;
  letter-spacing: normal;
  line-height: 90%;
  text-transform: lowercase !important;
  vertical-align: top;
  -webkit-font-smoothing: antialiased !important; }

.icon-pencil.color:before {
  color: #3fa9f5; }

.icon-plus.color:before {
  color: #7ac943; }

.icon-cross.color:before {
  color: #c1272d; }

.icon-attach.color:before {
  color: #ff7bac; }

.icon-key.color:before {
  color: #5b5b5b; }

.icon-warning.color:before {
  color: #fbb03b; }

.icon-directus:before {
  content: "\1F6C5"; }

.icon-power-button:before {
  content: "\1F6C9"; }

.icon-phone:before {
  content: "\1F4DE"; }

.icon-mobile:before {
  content: "\1F4F1"; }

.icon-mouse:before {
  content: "\E789"; }

.icon-address:before {
  content: "\E723"; }

.icon-mail:before {
  content: "\2709"; }

.icon-paper-plane:before {
  content: "\1F53F"; }

.icon-pencil:before {
  content: "\270F"; }

.icon-feather:before {
  content: "\2712"; }

.icon-attach:before {
  content: "\1F4CE"; }

.icon-inbox:before {
  content: "\E777"; }

.icon-reply:before {
  content: "\E712"; }

.icon-reply-all:before {
  content: "\E713"; }

.icon-forward:before {
  content: "\27A6"; }

.icon-user:before {
  content: "\1F464"; }

.icon-users:before {
  content: "\1F465"; }

.icon-add-user:before {
  content: "\E700"; }

.icon-vcard:before {
  content: "\E722"; }

.icon-export:before {
  content: "\E715"; }

.icon-location:before {
  content: "\E724"; }

.icon-map:before {
  content: "\E727"; }

.icon-compass:before {
  content: "\E728"; }

.icon-direction:before {
  content: "\27A2"; }

.icon-hair-cross:before {
  content: "\1F3AF"; }

.icon-share:before {
  content: "\E73C"; }

.icon-shareable:before {
  content: "\E73E"; }

.icon-heart:before {
  content: "\2665"; }

.icon-heart-empty:before {
  content: "\2661"; }

.icon-star:before {
  content: "\2605"; }

.icon-star-empty:before {
  content: "\2606"; }

.icon-thumbs-up:before {
  content: "\1F44D"; }

.icon-thumbs-down:before {
  content: "\1F44E"; }

.icon-chat:before {
  content: "\E720"; }

.icon-comment:before {
  content: "\E718"; }

.icon-quote:before {
  content: "\275E"; }

.icon-home:before {
  content: "\2302"; }

.icon-popup:before {
  content: "\E74C"; }

.icon-search:before {
  content: "\1F50D"; }

.icon-flashlight:before {
  content: "\1F526"; }

.icon-print:before {
  content: "\E716"; }

.icon-bell:before {
  content: "\1F514"; }

.icon-link:before {
  content: "\1F517"; }

.icon-flag:before {
  content: "\2691"; }

.icon-cog:before {
  content: "\2699"; }

.icon-tools:before {
  content: "\2692"; }

.icon-trophy:before {
  content: "\1F3C6"; }

.icon-tag:before {
  content: "\E70C"; }

.icon-camera:before {
  content: "\1F4F7"; }

.icon-megaphone:before {
  content: "\1F4E3"; }

.icon-moon:before {
  content: "\263D"; }

.icon-palette:before {
  content: "\1F3A8"; }

.icon-leaf:before {
  content: "\1F342"; }

.icon-note:before {
  content: "\266A"; }

.icon-beamed-note:before {
  content: "\266B"; }

.icon-new:before {
  content: "\1F4A5"; }

.icon-graduation-cap:before {
  content: "\1F393"; }

.icon-book:before {
  content: "\1F4D5"; }

.icon-newspaper:before {
  content: "\1F4F0"; }

.icon-bag:before {
  content: "\1F45C"; }

.icon-airplane:before {
  content: "\2708"; }

.icon-lifebuoy:before {
  content: "\E788"; }

.icon-eye:before {
  content: "\E70A"; }

.icon-clock:before {
  content: "\1F554"; }

.icon-mic:before {
  content: "\1F3A4"; }

.icon-calendar:before {
  content: "\1F4C5"; }

.icon-flash:before {
  content: "\26A1"; }

.icon-thunder-cloud:before {
  content: "\26C8"; }

.icon-droplet:before {
  content: "\1F4A7"; }

.icon-cd:before {
  content: "\1F4BF"; }

.icon-briefcase:before {
  content: "\1F4BC"; }

.icon-air:before {
  content: "\1F4A8"; }

.icon-hourglass:before {
  content: "\23F3"; }

.icon-gauge:before {
  content: "\1F6C7"; }

.icon-language:before {
  content: "\1F394"; }

.icon-network:before {
  content: "\E776"; }

.icon-key:before {
  content: "\1F511"; }

.icon-battery:before {
  content: "\1F50B"; }

.icon-bucket:before {
  content: "\1F4FE"; }

.icon-magnet:before {
  content: "\E7A1"; }

.icon-drive:before {
  content: "\1F4FD"; }

.icon-cup:before {
  content: "\2615"; }

.icon-rocket:before {
  content: "\1F680"; }

.icon-brush:before {
  content: "\E79A"; }

.icon-suitcase:before {
  content: "\1F6C6"; }

.icon-traffic-cone:before {
  content: "\1F6C8"; }

.icon-globe:before {
  content: "\1F30E"; }

.icon-keyboard:before {
  content: "\2328"; }

.icon-browser:before {
  content: "\E74E"; }

.icon-publish:before {
  content: "\E74D"; }

.icon-progress-3:before {
  content: "\E76B"; }

.icon-progress-2:before {
  content: "\E76A"; }

.icon-progress-1:before {
  content: "\E769"; }

.icon-progress-0:before {
  content: "\E768"; }

.icon-light-down:before {
  content: "\1F505"; }

.icon-light-up:before {
  content: "\1F506"; }

.icon-adjust:before {
  content: "\25D1"; }

.icon-code:before {
  content: "\E714"; }

.icon-monitor:before {
  content: "\1F4BB"; }

.icon-infinity:before {
  content: "\221E"; }

.icon-light-bulb:before {
  content: "\1F4A1"; }

.icon-credit-card:before {
  content: "\1F4B3"; }

.icon-database:before {
  content: "\1F4F8"; }

.icon-voicemail:before {
  content: "\2707"; }

.icon-clipboard:before {
  content: "\1F4CB"; }

.icon-cart:before {
  content: "\E73D"; }

.icon-box:before {
  content: "\1F4E6"; }

.icon-ticket:before {
  content: "\1F3AB"; }

.icon-rss:before {
  content: "\E73A"; }

.icon-signal:before {
  content: "\1F4F6"; }

.icon-thermometer:before {
  content: "\1F4FF"; }

.icon-water:before {
  content: "\1F4A6"; }

.icon-sweden:before {
  content: "\F601"; }

.icon-line-graph:before {
  content: "\1F4C8"; }

.icon-pie-chart:before {
  content: "\25F4"; }

.icon-bar-graph:before {
  content: "\1F4CA"; }

.icon-area-graph:before {
  content: "\1F53E"; }

.icon-lock:before {
  content: "\1F512"; }

.icon-lock-open:before {
  content: "\1F513"; }

.icon-logout:before {
  content: "\E741"; }

.icon-login:before {
  content: "\E740"; }

.icon-check:before {
  content: "\2713"; }

.icon-cross:before {
  content: "\271D"; }

.icon-squared-minus:before {
  content: "\229F"; }

.icon-squared-plus:before {
  content: "\229E"; }

.icon-squared-cross:before {
  content: "\274E"; }

.icon-circled-minus:before {
  content: "\2296"; }

.icon-circled-plus:before {
  content: "\2295"; }

.icon-circled-cross:before {
  content: "\2716"; }

.icon-minus:before {
  content: "\2796"; }

.icon-plus:before {
  content: "\2795"; }

.icon-erase:before {
  content: "\232B"; }

.icon-block:before {
  content: "\1F6AB"; }

.icon-info:before {
  content: "\2139"; }

.icon-circled-info:before {
  content: "\E705"; }

.icon-help:before {
  content: "\2753"; }

.icon-circled-help:before {
  content: "\E704"; }

.icon-warning:before {
  content: "\26A0"; }

.icon-cycle:before {
  content: "\1F504"; }

.icon-cw:before {
  content: "\27F3"; }

.icon-ccw:before {
  content: "\27F2"; }

.icon-shuffle:before {
  content: "\1F500"; }

.icon-back:before {
  content: "\1F519"; }

.icon-level-down:before {
  content: "\21B3"; }

.icon-retweet:before {
  content: "\E717"; }

.icon-loop:before {
  content: "\1F501"; }

.icon-back-in-time:before {
  content: "\E771"; }

.icon-level-up:before {
  content: "\21B0"; }

.icon-switch:before {
  content: "\21C6"; }

.icon-numbered-list:before {
  content: "\E005"; }

.icon-add-to-list:before {
  content: "\E003"; }

.icon-layout:before {
  content: "\268F"; }

.icon-list:before {
  content: "\2630"; }

.icon-text-doc:before {
  content: "\1F4C4"; }

.icon-text-doc-inverted:before {
  content: "\E731"; }

.icon-doc:before {
  content: "\E730"; }

.icon-docs:before {
  content: "\E736"; }

.icon-landscape-doc:before {
  content: "\E737"; }

.icon-picture:before {
  content: "\1F304"; }

.icon-video:before {
  content: "\1F3AC"; }

.icon-music:before {
  content: "\1F3B5"; }

.icon-folder:before {
  content: "\1F4C1"; }

.icon-archive:before {
  content: "\E800"; }

.icon-trash:before {
  content: "\E729"; }

.icon-upload:before {
  content: "\1F4E4"; }

.icon-download:before {
  content: "\1F4E5"; }

.icon-save:before {
  content: "\1F4BE"; }

.icon-install:before {
  content: "\E778"; }

.icon-cloud:before {
  content: "\2601"; }

.icon-upload-cloud:before {
  content: "\E711"; }

.icon-bookmark:before {
  content: "\1F516"; }

.icon-bookmarks:before {
  content: "\1F4D1"; }

.icon-open-book:before {
  content: "\1F4D6"; }

.icon-play:before {
  content: "\25B6"; }

.icon-paus:before {
  content: "\2016"; }

.icon-record:before {
  content: "\25CF"; }

.icon-stop:before {
  content: "\25A0"; }

.icon-ff:before {
  content: "\23E9"; }

.icon-fb:before {
  content: "\23EA"; }

.icon-to-start:before {
  content: "\23EE"; }

.icon-to-end:before {
  content: "\23ED"; }

.icon-resize-full:before {
  content: "\E744"; }

.icon-resize-small:before {
  content: "\E746"; }

.icon-volume:before {
  content: "\23F7"; }

.icon-sound:before {
  content: "\1F50A"; }

.icon-mute:before {
  content: "\1F507"; }

.icon-flow-cascade:before {
  content: "\1F568"; }

.icon-flow-branch:before {
  content: "\1F569"; }

.icon-flow-tree:before {
  content: "\1F56A"; }

.icon-flow-line:before {
  content: "\1F56B"; }

.icon-flow-parallel:before {
  content: "\1F56C"; }

.icon-left-bold:before {
  content: "\E4AD"; }

.icon-down-bold:before {
  content: "\E4B0"; }

.icon-up-bold:before {
  content: "\E4AF"; }

.icon-right-bold:before {
  content: "\E4AE"; }

.icon-left:before {
  content: "\2B05"; }

.icon-down:before {
  content: "\2B07"; }

.icon-up:before {
  content: "\2B06"; }

.icon-right:before {
  content: "\27A1"; }

.icon-circled-left:before {
  content: "\E759"; }

.icon-circled-down:before {
  content: "\E758"; }

.icon-circled-up:before {
  content: "\E75B"; }

.icon-circled-right:before {
  content: "\E75A"; }

.icon-triangle-left:before {
  content: "\25C2"; }

.icon-triangle-down:before {
  content: "\25BE"; }

.icon-triangle-up:before {
  content: "\25B4"; }

.icon-triangle-right:before {
  content: "\25B8"; }

.icon-chevron-left:before {
  content: "\E75D"; }

.icon-chevron-down:before {
  content: "\E75C"; }

.icon-chevron-up:before {
  content: "\E75F"; }

.icon-chevron-right:before {
  content: "\E75E"; }

.icon-chevron-small-left:before {
  content: "\E761"; }

.icon-chevron-small-down:before {
  content: "\E760"; }

.icon-chevron-small-up:before {
  content: "\E763"; }

.icon-chevron-small-right:before {
  content: "\E762"; }

.icon-chevron-thin-left:before {
  content: "\E765"; }

.icon-chevron-thin-down:before {
  content: "\E764"; }

.icon-chevron-thin-up:before {
  content: "\E767"; }

.icon-chevron-thin-right:before {
  content: "\E766"; }

.icon-left-thin:before {
  content: "\2190"; }

.icon-down-thin:before {
  content: "\2193"; }

.icon-up-thin:before {
  content: "\2191"; }

.icon-right-thin:before {
  content: "\2192"; }

.icon-arrow-combo:before {
  content: "\E74F"; }

.icon-three-dots:before {
  content: "\23F6"; }

.icon-two-dots:before {
  content: "\23F5"; }

.icon-dot:before {
  content: "\23F4"; }

.icon-cc:before {
  content: "\1F545"; }

.icon-cc-by:before {
  content: "\1F546"; }

.icon-cc-nc:before {
  content: "\1F547"; }

.icon-cc-nc-eu:before {
  content: "\1F548"; }

.icon-cc-nc-jp:before {
  content: "\1F549"; }

.icon-cc-sa:before {
  content: "\1F54A"; }

.icon-cc-nd:before {
  content: "\1F54B"; }

.icon-cc-pd:before {
  content: "\1F54C"; }

.icon-cc-zero:before {
  content: "\1F54D"; }

.icon-cc-share:before {
  content: "\1F54E"; }

.icon-cc-remix:before {
  content: "\1F54F"; }

.icon-db-logo:before {
  content: "\1F5F9"; }

.icon-db-shape:before {
  content: "\1F5FA"; }

.icon-github:before {
  content: "\F300"; }

.icon-c-github:before {
  content: "\F301"; }

.icon-flickr:before {
  content: "\F303"; }

.icon-c-flickr:before {
  content: "\F304"; }

.icon-vimeo:before {
  content: "\F306"; }

.icon-c-vimeo:before {
  content: "\F307"; }

.icon-twitter:before {
  content: "\F309"; }

.icon-c-twitter:before {
  content: "\F30A"; }

.icon-facebook:before {
  content: "\F30C"; }

.icon-c-facebook:before {
  content: "\F30D"; }

.icon-s-facebook:before {
  content: "\F30E"; }

.icon-google-plus:before {
  content: "\F30F"; }

.icon-c-google-plus:before {
  content: "\F310"; }

.icon-pinterest:before {
  content: "\F312"; }

.icon-c-pinterest:before {
  content: "\F313"; }

.icon-tumblr:before {
  content: "\F315"; }

.icon-c-tumblr:before {
  content: "\F316"; }

.icon-linkedin:before {
  content: "\F318"; }

.icon-c-linkedin:before {
  content: "\F319"; }

.icon-dribbble:before {
  content: "\F31B"; }

.icon-c-dribbble:before {
  content: "\F31C"; }

.icon-stumbleupon:before {
  content: "\F31E"; }

.icon-c-stumbleupon:before {
  content: "\F31F"; }

.icon-lastfm:before {
  content: "\F321"; }

.icon-c-lastfm:before {
  content: "\F322"; }

.icon-rdio:before {
  content: "\F324"; }

.icon-c-rdio:before {
  content: "\F325"; }

.icon-spotify:before {
  content: "\F327"; }

.icon-c-spotify:before {
  content: "\F328"; }

.icon-qq:before {
  content: "\F32A"; }

.icon-instagram:before {
  content: "\F32D"; }

.icon-dropbox:before {
  content: "\F330"; }

.icon-evernote:before {
  content: "\F333"; }

.icon-flattr:before {
  content: "\F336"; }

.icon-skype:before {
  content: "\F339"; }

.icon-c-skype:before {
  content: "\F33A"; }

.icon-renren:before {
  content: "\F33C"; }

.icon-sina-weibo:before {
  content: "\F33F"; }

.icon-paypal:before {
  content: "\F342"; }

.icon-picasa:before {
  content: "\F345"; }

.icon-soundcloud:before {
  content: "\F348"; }

.icon-mixi:before {
  content: "\F34B"; }

.icon-behance:before {
  content: "\F34E"; }

.icon-google-circles:before {
  content: "\F351"; }

.icon-vk:before {
  content: "\F354"; }

.icon-smashing:before {
  content: "\F357"; }

.row-plain {
  clear: both;
  margin: 0px 0px 0px 0px; }

.row {
  clear: both;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-right: 0px;
  margin-left: -20px; }

.col-1, .col-2, .col-3, .col-4, .col-full {
  float: left;
  margin-left: 20px; }

.col-1 {
  width: 90px; }

.col-2 {
  width: 200px; }

.col-3 {
  width: 310px; }

.col-4 {
  width: 420px; }

.gutter-bottom {
  margin-bottom: 20px; }

.gutter-bottom-big {
  margin-bottom: 40px; }

/*
.fade-in() {
  from {
    zoom: 0%;
  }
  to {
    zoom: 100%;
  }
}
*/
@-webkit-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@-moz-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@-ms-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@-o-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@-webkit-keyframes fadeout {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@-moz-keyframes fadeout {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@-ms-keyframes fadeout {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@-o-keyframes fadeout {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@keyframes fadeout {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg); } }

html, body {
  background-color: #ececec;
  color: #666666;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 500;
  width: 100%; }

body {
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
  margin: 0; }

h1, h2, h3, h4 {
  font-weight: 300;
  margin: 0px;
  font-family: "Roboto", sans-serif !important; }

h1 {
  font-size: 30px; }

h2 {
  font-size: 26px; }

h3 {
  font-size: 18px; }

h4 {
  font-size: 16px; }

p {
  margin: 10px 0px; }

a {
  color: inherit;
  text-decoration: none; }

input, button {
  outline: none; }

#trumbowyg-icons {
  display: none; }

.hidden {
  visibility: hidden; }

.clean-list {
  list-style: none;
  margin: 0px;
  padding: 0px; }

.border-box, .two-column-form .fields .label, .header1 {
  box-sizing: border-box;
  /* css3 rec */
  -moz-box-sizing: border-box;
  /* ff2 */
  -ms-box-sizing: border-box;
  /* ie8 */
  -webkit-box-sizing: border-box;
  /* safari3 */ }

.clear-fix:after, .row-plain:after, .row:after, .main-container:after, .btn-toolbar:after, .two-column-form .fields .label:after, .two-column-form .fields .field:after, .group-list .group-item:after {
  clear: both;
  content: '';
  display: block;
  width: 100%; }

.top-right {
  position: absolute;
  right: 0px;
  top: 0px; }

.left {
  float: left; }

.right {
  float: right; }

.margin-left-small {
  margin-left: 10px; }

.margin-top-small {
  margin-top: 10px; }

.margin-bottom-small {
  margin-bottom: 10px; }

.margin-right-small {
  margin-right: 10px; }

.margin-right {
  margin-right: 20px; }

.margin-top-standard {
  margin-top: 20px; }

.field-note {
  max-width: 420px; }

.show-circle:hover {
  position: relative; }
  .show-circle:hover .white-circle {
    display: block; }

.large-circle {
  -webkit-transition: all 100ms ease-in-out;
  -moz-transition: all 100ms ease-in-out;
  -o-transition: all 100ms ease-in-out;
  -ms-transition: all 100ms ease-in-out;
  transition: all 100ms ease-in-out;
  -webkit-border-top-right-radius: 50px;
  -webkit-border-bottom-right-radius: 50px;
  -webkit-border-bottom-left-radius: 50px;
  -webkit-border-top-left-radius: 50px;
  -moz-border-radius-topright: 50px;
  -moz-border-radius-bottomright: 50px;
  -moz-border-radius-bottomleft: 50px;
  -moz-border-radius-topleft: 50px;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 50px;
  border-top-left-radius: 50px;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background-color: #ffffff;
  color: #aaaaaa;
  display: inline-block;
  height: 32px;
  padding: 0px;
  position: relative;
  text-align: center;
  width: 32px;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05); }
  .large-circle:hover {
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1); }
  .large-circle .material-icons, .large-circle .custom-check input[type="checkbox"] + label span:before, .custom-check input[type="checkbox"] + label .large-circle span:before, .large-circle .custom-check input[type="radio"] + label span:before, .custom-check input[type="radio"] + label .large-circle span:before, .large-circle
  input[type="checkbox"].custom-check + label span:before,
  input[type="checkbox"].custom-check + label .large-circle span:before, .large-circle input[type="radio"].custom-check + label span:before, input[type="radio"].custom-check + label .large-circle span:before {
    display: inline-block;
    margin-top: 3px; }
  .large-circle.white-circle {
    background-color: #ffffff;
    bottom: 10px;
    color: #666666;
    display: none;
    position: absolute;
    right: 10px;
    z-index: 3;
    cursor: pointer; }
    .large-circle.white-circle .icon-pencil {
      margin-top: -6px; }
    .large-circle.white-circle .icon-cross {
      margin-top: -6px; }

.tag {
  -webkit-transition: all 100ms ease-in-out;
  -moz-transition: all 100ms ease-in-out;
  -o-transition: all 100ms ease-in-out;
  -ms-transition: all 100ms ease-in-out;
  transition: all 100ms ease-in-out;
  display: inline-block;
  cursor: pointer;
  font-weight: 500;
  background-color: #666666;
  color: #ffffff;
  margin: 10px 10px 0 0;
  padding: 5px 10px 6px 10px;
  -webkit-border-top-right-radius: 2px;
  -webkit-border-bottom-right-radius: 2px;
  -webkit-border-bottom-left-radius: 2px;
  -webkit-border-top-left-radius: 2px;
  -moz-border-radius-topright: 2px;
  -moz-border-radius-bottomright: 2px;
  -moz-border-radius-bottomleft: 2px;
  -moz-border-radius-topleft: 2px;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;
  border-top-left-radius: 2px;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box; }
  .tag:hover {
    background-color: #c1272d; }

.tag-static {
  display: inline-block;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 0.02em;
  font-weight: 300;
  background-color: #aaaaaa;
  color: #ffffff;
  margin: 0 5px 0 0;
  padding: 4px 8px 3px 8px;
  -webkit-border-top-right-radius: 2px;
  -webkit-border-bottom-right-radius: 2px;
  -webkit-border-bottom-left-radius: 2px;
  -webkit-border-top-left-radius: 2px;
  -moz-border-radius-topright: 2px;
  -moz-border-radius-bottomright: 2px;
  -moz-border-radius-bottomleft: 2px;
  -moz-border-radius-topleft: 2px;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;
  border-top-left-radius: 2px;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  text-transform: uppercase; }

.italic {
  font-style: italic; }

.link-underline {
  border-bottom: 1px dotted #aaaaaa; }
  .link-underline:hover {
    border-bottom: 1px dotted #4ca6de; }

.primary-info {
  color: #666666;
  font-size: 16px;
  font-weight: 500; }

.secondary-info, .history-container ul li .history-follow {
  color: #aaaaaa !important;
  font-size: 12px;
  font-weight: 500; }

a.secondary-info, .history-container ul li a.history-follow {
  cursor: pointer; }
  a.secondary-info:hover, .history-container ul li a.history-follow:hover {
    color: #666666; }

.delete-color, .error-color {
  color: #c1272d; }

.dark-grey-color {
  color: #666666; }

.medium-grey-color {
  color: #aaaaaa; }

.light-grey-color {
  color: #ececec; }

.add-color {
  color: #4ca6de; }

.unread-color {
  color: #4ca6de; }

.yellow-color {
  color: #fdcd30; }

.bold {
  font-weight: 500;
  -webkit-font-smoothing: antialiased; }

.add-color-border {
  border-color: #4ca6de !important; }

.border-top {
  border-top: 1px solid #ececec; }

.big-label-text {
  font-size: 22px;
  font-weight: 100;
  color: #aaaaaa; }

img.grayscale {
  filter: url(filters.svg#grayscale);
  filter: gray;
  -webkit-filter: grayscale(1); }
  img.grayscale:hover {
    filter: none;
    -webkit-filter: grayscale(0); }

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

span.gc-cs-link {
  color: #666666 !important;
  text-decoration: none; }

.main-container {
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  -o-transition: all 400ms ease-in-out;
  -ms-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
  margin-left: 170px;
  padding: 0px 40px;
  position: relative;
  right: 0px; }

.content-body {
  /* flex: 1; display: flex; */
  margin-bottom: 40px;
  margin-top: 68px; }

.overlay h3 {
  display: none; }

.nothing-here {
  text-align: center;
  margin-top: 200px;
  line-height: 35px; }
  .nothing-here h1 {
    color: #d0d0d0;
    font-size: 50px;
    line-height: 60px;
    letter-spacing: -1px; }

.media-thumb .img.portrait {
  height: 50px; }

.media-thumb .img.landscape {
  width: 50px; }

.hide {
  display: none !important; }

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
  color: #aaaaaa !important; }

::-webkit-input-placeholder {
  color: #aaaaaa;
  -webkit-font-smoothing: antialiased !important; }

:-moz-placeholder {
  color: #aaaaaa;
  -webkit-font-smoothing: antialiased !important;
  opacity: 1; }

::-moz-placeholder {
  color: #aaaaaa;
  -webkit-font-smoothing: antialiased !important;
  opacity: 1; }

:-ms-input-placeholder {
  color: #aaaaaa;
  -webkit-font-smoothing: antialiased !important; }

::selection {
  background: #cde6f6; }

::-moz-selection {
  background: #cde6f6; }

.rounded-corners, .avatar, .toggle-switch, .table-shadow, .set-columns, .history-container, .history-container ul li .mention-list, .history-container ul li .mention-choice, .history-container ul li .mention-tag, .feature-cards .feature-card, .directus-alert-modal, .header1 .secondary-row .filters li .filter-background, .login-box p.error, .login-panel, .login-panel input {
  -webkit-border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
  -webkit-border-top-left-radius: 4px;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px;
  -moz-border-radius-bottomleft: 4px;
  -moz-border-radius-topleft: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box; }

.card-shadow, .table-shadow, .history-container, .feature-cards .feature-card, .directus-alert-modal, .header1 .tools .simple-select, .header1 .secondary-row.filter-options .filter-form .simple-select, .header1 .secondary-row .filters li .filter-background, .login-box p.error, .login-panel, ul.general-container {
  -webkit-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1); }

hr {
  border: none;
  color: #ffffff;
  background-color: #ffffff;
  height: 1px; }

ul {
  list-style-type: disc; }

.invisible-blocker {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 109; }

body.initial-load #page-blocker-smoke {
  opacity: 0.75; }

#page-blocker-smoke {
  left: 170px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #ececec;
  z-index: 109;
  cursor: progress;
  -webkit-transition: opacity 400ms ease-in-out;
  -moz-transition: opacity 400ms ease-in-out;
  -o-transition: opacity 400ms ease-in-out;
  transition: opacity 400ms ease-in-out; }

.spinner {
  display: none;
  position: fixed;
  width: 60px;
  height: 60px;
  color: #aaaaaa;
  background-color: #666666;
  bottom: 20px;
  right: 20px;
  -webkit-animation: rotateplane 1.2s infinite ease-in-out;
  animation: rotateplane 1.2s infinite ease-in-out;
  z-index: 110; }

@-webkit-keyframes rotateplane {
  0% {
    -webkit-transform: perspective(120px); }
  50% {
    -webkit-transform: perspective(120px) rotateY(180deg); }
  100% {
    -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); } }

@keyframes rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
  50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
  100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }

.pulsate, .external-drop-indicator, .sortableHeader .material-icons, .sortableHeader .custom-check input[type="checkbox"] + label span:before, .custom-check input[type="checkbox"] + label .sortableHeader span:before, .sortableHeader .custom-check input[type="radio"] + label span:before, .custom-check input[type="radio"] + label .sortableHeader span:before, .sortableHeader
input[type="checkbox"].custom-check + label span:before,
input[type="checkbox"].custom-check + label .sortableHeader span:before, .sortableHeader input[type="radio"].custom-check + label span:before, input[type="radio"].custom-check + label .sortableHeader span:before, .cards .card .header-image .default-loading .icon, #sidebar .unread-color, .login-box p.error .material-icons, .login-box p.error .custom-check input[type="checkbox"] + label span:before, .custom-check input[type="checkbox"] + label .login-box p.error span:before, .login-box p.error .custom-check input[type="radio"] + label span:before, .custom-check input[type="radio"] + label .login-box p.error span:before, .login-box p.error
input[type="checkbox"].custom-check + label span:before,
input[type="checkbox"].custom-check + label .login-box p.error span:before, .login-box p.error input[type="radio"].custom-check + label span:before, input[type="radio"].custom-check + label .login-box p.error span:before {
  -webkit-animation: pulsate 2s ease-out;
  -webkit-animation-iteration-count: infinite;
  opacity: 0.6; }

@-webkit-keyframes pulsate {
  0% {
    opacity: 0.6; }
  50% {
    opacity: 1.0; }
  100% {
    opacity: 0.6; } }

.external-drop-indicator {
  position: fixed;
  background-color: #4ca6de;
  z-index: 1000; }

.external-drop-indicator.top {
  top: 0px;
  left: 176px;
  right: 0;
  height: 6px; }

.external-drop-indicator.bottom {
  bottom: 0px;
  right: 6px;
  left: 176px;
  height: 6px; }

.external-drop-indicator.left {
  bottom: 0;
  top: 0;
  left: 170px;
  height: 100%;
  width: 6px; }

.external-drop-indicator.right {
  top: 6px;
  right: 0px;
  height: 100%;
  width: 6px; }

input[type="date"]::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0; }

.avatar {
  height: 30px;
  float: left;
  margin-right: 10px; }

.avatar-name {
  float: left;
  margin-top: 6px; }

.big-avatar {
  height: 60px;
  float: left;
  margin-right: 15px; }

.big-avatar-name {
  float: left;
  margin-top: 20px;
  font-size: 14px; }

.message-recipients {
  background-color: #ffffff;
  padding: 20px; }

.message-response {
  padding-top: 20px;
  min-height: 50px;
  border-bottom: 1px solid #ececec; }
  .message-response .message-body {
    clear: both;
    margin-top: 20px;
    padding: 20px 0 30px 0;
    max-width: 600px; }

.message-datetime {
  float: right;
  margin-top: 6px; }

.message-reply {
  margin-top: 20px; }

.twitter-typeahead {
  display: block;
  width: 100%; }

.tt-hint {
  color: #bbbbbb !important; }

.tt-suggestions {
  background-color: #ffffff;
  border: 1px solid #4ca6de;
  width: auto;
  padding: 0;
  margin: 4px 0 0 0;
  -webkit-border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
  -webkit-border-top-left-radius: 4px;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px;
  -moz-border-radius-bottomleft: 4px;
  -moz-border-radius-topleft: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box; }
  .tt-suggestions .tt-suggestion {
    display: block;
    height: 100%;
    padding: 1px 10px 0 10px;
    margin: 0;
    cursor: pointer;
    max-height: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-border-top-right-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -webkit-border-top-left-radius: 4px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 4px;
    -moz-border-radius-topleft: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    -moz-background-clip: padding-box;
    -webkit-background-clip: padding-box;
    background-clip: padding-box; }
    .tt-suggestions .tt-suggestion.tt-is-under-cursor, .tt-suggestions .tt-suggestion.tt-cursor {
      background-color: #f8fcfe; }
    .tt-suggestions .tt-suggestion img {
      vertical-align: middle; }
    .tt-suggestions .tt-suggestion .recipient-name {
      display: inline-block;
      top: 6px;
      position: relative;
      margin-right: 10px; }

.message-recipient {
  line-height: 0px;
  overflow: auto;
  display: inline-block;
  border-radius: 2px;
  background-color: #aaaaaa;
  color: #ffffff;
  margin-right: 10px;
  margin-top: 10px;
  font-weight: 500;
  padding-right: 10px;
  cursor: pointer; }
  .message-recipient:hover {
    background-color: #c1272d; }
  .message-recipient img {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    vertical-align: middle; }
  .message-recipient .recipient-name {
    display: inline-block;
    top: 1px;
    position: relative; }

.settings-column-name {
  font-weight: 500;
  -webkit-font-smoothing: antialiased; }

.btn-toolbar {
  clear: both;
  float: none;
  margin-bottom: 10px; }
  .btn-toolbar .btn-group {
    float: left;
    margin-right: 5px; }
    .btn-toolbar .btn-group:last-child {
      margin-right: 0px; }

.btn-group.btn-white .btn {
  border-right-width: 0px; }
  .btn-group.btn-white .btn:first-child {
    -webkit-border-top-right-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;
    -webkit-border-bottom-left-radius: 4px;
    -webkit-border-top-left-radius: 4px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 4px;
    -moz-border-radius-topleft: 4px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    -moz-background-clip: padding-box;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border-left-width: 1px; }
  .btn-group.btn-white .btn:last-child {
    border-right: 1px solid #dddddd; }

.btn-group .btn {
  -webkit-border-top-right-radius: 0px;
  -webkit-border-bottom-right-radius: 0px;
  -webkit-border-bottom-left-radius: 0px;
  -webkit-border-top-left-radius: 0px;
  -moz-border-radius-topright: 0px;
  -moz-border-radius-bottomright: 0px;
  -moz-border-radius-bottomleft: 0px;
  -moz-border-radius-topleft: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-left-radius: 0px;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border-left: solid 1px #dddddd;
  border-right-width: 0px;
  display: block;
  float: left; }
  .btn-group .btn:first-child {
    -webkit-border-top-right-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;
    -webkit-border-bottom-left-radius: 4px;
    -webkit-border-top-left-radius: 4px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 4px;
    -moz-border-radius-topleft: 4px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    -moz-background-clip: padding-box;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border-left-width: 0px; }
  .btn-group .btn:last-child {
    -webkit-border-top-right-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-bottom-left-radius: 0px;
    -webkit-border-top-left-radius: 0px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 0px;
    -moz-border-radius-topleft: 0px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
    -moz-background-clip: padding-box;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border-right-width: 1px; }
  .btn-group .btn.btn-round:first-child {
    -webkit-border-top-right-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;
    -webkit-border-bottom-left-radius: 50%;
    -webkit-border-top-left-radius: 50%;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 50%;
    -moz-border-radius-topleft: 50%;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 50%;
    border-top-left-radius: 50%;
    -moz-background-clip: padding-box;
    -webkit-background-clip: padding-box;
    background-clip: padding-box; }
  .btn-group .btn.btn-round:last-child {
    -webkit-border-top-right-radius: 50%;
    -webkit-border-bottom-right-radius: 50%;
    -webkit-border-bottom-left-radius: 0px;
    -webkit-border-top-left-radius: 0px;
    -moz-border-radius-topright: 50%;
    -moz-border-radius-bottomright: 50%;
    -moz-border-radius-bottomleft: 0px;
    -moz-border-radius-topleft: 0px;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
    -moz-background-clip: padding-box;
    -webkit-background-clip: padding-box;
    background-clip: padding-box; }

.btn-group.wysiwyg-toolbar .btn {
  padding: 5px 6px 5px 6px;
  font-size: 14px;
  min-height: 32px; }

.btn {
  -webkit-transition: background-color 100ms ease-in-out;
  -moz-transition: background-color 100ms ease-in-out;
  -o-transition: background-color 100ms ease-in-out;
  -ms-transition: background-color 100ms ease-in-out;
  transition: background-color 100ms ease-in-out;
  -webkit-border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
  -webkit-border-top-left-radius: 4px;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px;
  -moz-border-radius-bottomleft: 4px;
  -moz-border-radius-topleft: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background-color: #4ca6de;
  border: none;
  color: #ffffff;
  cursor: pointer;
  padding: 15px 25px 15px 25px;
  font-size: 14px;
  font-weight: 500;
  -webkit-font-smoothing: antialiased !important;
  text-transform: uppercase;
  letter-spacing: 0.02em; }
  .btn:hover {
    background-color: #268fd1; }
  .btn:active {
    background-color: #1f72a5; }
  .btn.active {
    background-color: #333333; }
  .btn.btn-white, .btn-group.btn-white .btn {
    color: #666666;
    background-color: #ffffff;
    border-color: #dddddd;
    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd; }
    .btn.btn-white:hover, .btn-group.btn-white .btn:hover {
      background-color: #ececec; }
    .btn.btn-white.active, .btn-group.btn-white .btn.active, .btn.btn-white.wysihtml5-command-active, .btn-group.btn-white .btn.wysihtml5-command-active {
      border-top-color: #4ca6de;
      border-bottom-color: #4ca6de;
      border-left-color: #4ca6de;
      background-color: #4ca6de;
      color: #ffffff; }
  .btn.btn-round {
    -webkit-border-top-right-radius: 50%;
    -webkit-border-bottom-right-radius: 50%;
    -webkit-border-bottom-left-radius: 50%;
    -webkit-border-top-left-radius: 50%;
    -moz-border-radius-topright: 50%;
    -moz-border-radius-bottomright: 50%;
    -moz-border-radius-bottomleft: 50%;
    -moz-border-radius-topleft: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    border-top-left-radius: 50%;
    -moz-background-clip: padding-box;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 0px;
    padding: 10px; }
  .btn.btn-small {
    padding: 7px 14px 7px 14px;
    font-size: 13px;
    letter-spacing: 0.04em; }
  .btn .icon {
    font-size: 400%;
    line-height: 16%; }
  .btn .material-icons, .btn .custom-check input[type="checkbox"] + label span:before, .custom-check input[type="checkbox"] + label .btn span:before, .btn .custom-check input[type="radio"] + label span:before, .custom-check input[type="radio"] + label .btn span:before, .btn
  input[type="checkbox"].custom-check + label span:before,
  input[type="checkbox"].custom-check + label .btn span:before, .btn input[type="radio"].custom-check + label span:before, input[type="radio"].custom-check + label .btn span:before {
    vertical-align: middle;
    font-size: 18px; }

.rounded-button {
  -webkit-border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
  -webkit-border-top-left-radius: 4px;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px;
  -moz-border-radius-bottomleft: 4px;
  -moz-border-radius-topleft: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  padding: 10px 10px 10px 10px;
  background-color: #ffffff; }

#existingFileButton {
  color: #333333; }

.toggle-switch {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
  padding: 2px;
  width: 30px;
  height: 15px;
  background-color: #d0d0d0;
  transition: background 0.4s; }
  .toggle-switch:hover {
    background-color: #aaaaaa; }
  .toggle-switch:before {
    display: block;
    position: absolute;
    content: "";
    top: 2px;
    left: 2px;
    bottom: 2px;
    right: 2px;
    background-color: #fff;
    border-radius: 2px;
    transition: background 0.4s; }
  .toggle-switch:after {
    display: block;
    position: absolute;
    content: "";
    top: 4px;
    left: 4px;
    bottom: 4px;
    width: 13px;
    background-color: #d0d0d0;
    border-radius: 2px;
    transition: margin 0.4s, background 0.4s; }
  .toggle-switch.on {
    background-color: #4ca6de; }
    .toggle-switch.on:hover {
      background-color: #2281bb; }
    .toggle-switch.on:after {
      margin-left: 15px;
      background-color: #4ca6de;
      left: 2px; }

.toggle-switch-input {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden; }

.toggle-switch-input + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none; }

input.toggle-switch-input + label {
  padding: 2px;
  width: 30px;
  height: 15px;
  background-color: #ececec;
  border-radius: 15px;
  transition: background 0.4s; }

input.toggle-switch-input + label:before,
input.toggle-switch-input + label:after {
  display: block;
  position: absolute;
  content: ""; }

input.toggle-switch-input + label:before {
  top: 2px;
  left: 2px;
  bottom: 2px;
  right: 2px;
  background-color: #fff;
  border-radius: 15px;
  transition: background 0.4s; }

input.toggle-switch-input + label:after {
  top: 4px;
  left: 4px;
  bottom: 4px;
  width: 13px;
  background-color: #ececec;
  border-radius: 13px;
  transition: margin 0.4s, background 0.4s; }

input.toggle-switch-input:checked + label {
  background-color: #4ca6de; }

input.toggle-switch-input:checked + label:after {
  margin-left: 15px;
  background-color: #4ca6de; }

select {
  cursor: pointer; }

.icon-select {
  position: relative; }
  .icon-select select {
    background: transparent;
    border: 0px;
    bottom: 0px;
    left: 0px;
    font-size: 12px;
    opacity: 0;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 20px;
    -webkit-appearance: none; }

.char-count-container {
  position: relative;
  display: inline-block;
  max-width: 700px;
  width: 100%; }
  .char-count-container .char-count {
    position: absolute;
    top: 14px;
    right: 14px;
    color: #aaaaaa; }

.standard-select {
  position: relative; }
  .standard-select .icon {
    bottom: 0px;
    line-height: 22px;
    padding: 0px 6px 0px 0px;
    pointer-events: none;
    position: absolute;
    right: 0px;
    top: 0px; }
  .standard-select select {
    -webkit-border-top-right-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;
    -webkit-border-bottom-left-radius: 0px;
    -webkit-border-top-left-radius: 0px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    -moz-border-radius-topleft: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
    -moz-background-clip: padding-box;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    background-color: #ffffff;
    border: solid 1px #ececec;
    color: #666666;
    cursor: pointer;
    padding: 5px 25px 5px 10px;
    -webkit-appearance: none; }

.simple-select {
  display: inline-block;
  position: relative; }
  .simple-select .icon {
    bottom: 0px;
    display: block;
    font-size: 300%;
    line-height: 40%;
    pointer-events: none;
    position: absolute;
    right: 7px;
    top: 0px; }
  .simple-select select {
    background: transparent;
    border: none;
    -webkit-appearance: none;
    -webkit-font-smoothing: antialiased !important;
    font-weight: 500;
    padding: 0 20px 0 0;
    outline: none;
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: ''; }
    .simple-select select:focus {
      border: none; }
    .simple-select select:hover {
      border: none; }

.two-column-form div.custom-check {
  margin-top: 4px; }
  .two-column-form div.custom-check.with-sort {
    padding-left: 0; }

.custom-check input[type="checkbox"], .custom-check input[type="radio"],
input[type="checkbox"].custom-check, input[type="radio"].custom-check {
  display: none; }
  .custom-check input[type="checkbox"] + label, .custom-check input[type="radio"] + label,
  input[type="checkbox"].custom-check + label, input[type="radio"].custom-check + label {
    cursor: pointer;
    display: inline-block;
    font-weight: 500;
    margin-right: 10px;
    position: relative;
    vertical-align: bottom; }
    .custom-check input[type="checkbox"] + label span:before, .custom-check input[type="radio"] + label span:before,
    input[type="checkbox"].custom-check + label span:before, input[type="radio"].custom-check + label span:before {
      content: "check_box_outline_blank"; }
    .custom-check input[type="checkbox"] + label span, .custom-check input[type="radio"] + label span,
    input[type="checkbox"].custom-check + label span, input[type="radio"].custom-check + label span {
      color: #aaaaaa;
      display: inline-block;
      width: 20px;
      height: 22px;
      margin: -2px 5px 0 0;
      vertical-align: middle; }
      .custom-check input[type="checkbox"] + label span:hover, .custom-check input[type="radio"] + label span:hover,
      input[type="checkbox"].custom-check + label span:hover, input[type="radio"].custom-check + label span:hover {
        color: #4ca6de; }
  .custom-check input[type="checkbox"]:checked + label span:before, .custom-check input[type="radio"]:checked + label span:before,
  input[type="checkbox"].custom-check:checked + label span:before, input[type="radio"].custom-check:checked + label span:before {
    content: "check_box";
    color: #4ca6de; }
  .custom-check input[type="checkbox"]:checked + label span:hover, .custom-check input[type="radio"]:checked + label span:hover,
  input[type="checkbox"].custom-check:checked + label span:hover, input[type="radio"].custom-check:checked + label span:hover {
    color: #666666; }

input[type="radio"] {
  display: inline-block;
  width: auto;
  margin-right: 8px;
  cursor: pointer; }

input,
textarea,
select,
.input {
  -webkit-border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
  -webkit-border-top-left-radius: 4px;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px;
  -moz-border-radius-bottomleft: 4px;
  -moz-border-radius-topleft: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-transition: all 100ms ease-in-out;
  -moz-transition: all 100ms ease-in-out;
  -o-transition: all 100ms ease-in-out;
  -ms-transition: all 100ms ease-in-out;
  transition: all 100ms ease-in-out;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  display: block;
  padding: 14px;
  font-size: 14px;
  outline: none;
  resize: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
  input:hover,
  textarea:hover,
  select:hover,
  .input:hover {
    border-color: #aaaaaa; }
    input:hover:disabled,
    textarea:hover:disabled,
    select:hover:disabled,
    .input:hover:disabled {
      border-color: #dddddd; }
  input:disabled,
  textarea:disabled,
  select:disabled,
  .input:disabled {
    color: #aaaaaa;
    cursor: not-allowed; }
  input:focus,
  textarea:focus,
  select:focus,
  .input:focus {
    color: #333333;
    border-color: #4ca6de; }
  input.legacy,
  textarea.legacy,
  select.legacy,
  .input.legacy {
    padding: 10px;
    font-size: 13px; }

.wysiwyg .btn-toolbar {
  margin-bottom: 5px; }

.directus-media-ui {
  border: none;
  padding: 0;
  margin: 0; }
  .directus-media-ui .media-container {
    margin-right: 20px;
    float: left;
    height: auto;
    width: 200px; }
    .directus-media-ui .media-container img {
      width: 100%; }

.status-group label {
  cursor: pointer; }

.select-container {
  position: relative;
  display: inline-block; }
  .select-container select {
    padding-right: 35px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; }

.select-arrow {
  position: absolute;
  top: 8px;
  right: 4px;
  font-size: 29px;
  background-color: #ffffff;
  pointer-events: none; }

.clean-column-name {
  width: 100%;
  display: inline-block;
  margin-top: 10px; }

.table-striped tr td.field-comment-container .field-comment {
  width: 100%; }

.simple-select.simple-gray {
  margin-top: 0; }
  .simple-select.simple-gray .icon {
    top: 8px; }
  .simple-select.simple-gray select {
    -webkit-border-top-right-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -webkit-border-top-left-radius: 4px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 4px;
    -moz-border-radius-topleft: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    -moz-background-clip: padding-box;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    background-color: #ffffff;
    border: 0px;
    padding: 10px; }

.two-column-form .medium {
  width: 300px; }

.two-column-form .small {
  width: 100px; }

.two-column-form h2 {
  margin-bottom: 10px; }

.two-column-form .fields {
  list-style: none;
  margin: 0px;
  padding: 0px;
  width: 100%; }
  .two-column-form .fields li {
    border-top: 1px #f9f9f9 solid;
    position: relative;
    width: 100%; }
  .two-column-form .fields .fieldset-smoke {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(255, 255, 255, 0.75);
    cursor: not-allowed;
    z-index: 1; }
  .two-column-form .fields .table {
    display: table;
    position: relative;
    width: 100%; }
    .two-column-form .fields .table .trow {
      display: table-row; }
      .two-column-form .fields .table .trow .label, .two-column-form .fields .table .trow .field {
        display: table-cell; }
  .two-column-form .fields .label {
    background-color: #ffffff;
    color: #666666;
    font-weight: 500;
    padding: 34px 20px 30px 30px;
    vertical-align: top;
    width: 200px;
    min-width: 200px; }
    .two-column-form .fields .label label {
      position: relative;
      text-transform: capitalize;
      font-size: 14px;
      font-weight: 500; }
      .two-column-form .fields .label label .note {
        display: block;
        color: #aaaaaa;
        font-style: italic;
        text-transform: none;
        font-size: 12px;
        padding-top: 5px;
        max-width: 400px;
        font-weight: 400; }
        .two-column-form .fields .label label .note a {
          border-bottom: dotted 1px #aaaaaa; }
          .two-column-form .fields .label label .note a:hover {
            color: #666666; }
    .two-column-form .fields .label .validation-error {
      margin-top: 4px;
      display: inline-block; }
    .two-column-form .fields .label .batch-edit-on {
      vertical-align: middle;
      font-weight: 500;
      display: block;
      z-index: 2;
      margin-bottom: 10px;
      margin-top: -10px; }
      .two-column-form .fields .label .batch-edit-on input {
        display: inline-block;
        width: auto;
        margin-right: 4px; }
  .two-column-form .fields .field {
    background-color: #ffffff;
    padding: 20px;
    position: relative;
    font-weight: 400; }
    .two-column-form .fields .field input[type="text"], .two-column-form .fields .field textarea, .two-column-form .fields .field .input {
      max-width: 700px;
      display: inline-block;
      width: 100%; }
    .two-column-form .fields .field .force-editable {
      line-height: 20px;
      padding: 10px;
      -webkit-font-smoothing: auto; }
      .two-column-form .fields .field .force-editable a {
        text-decoration: underline;
        color: #4ca6de; }
      .two-column-form .fields .field .force-editable img:hover {
        border: 1px dotted #aaaaaa;
        margin-left: -1px;
        margin-top: -1px;
        margin-right: -1px;
        margin-bottom: -1px; }
    .two-column-form .fields .field textarea {
      min-height: 100px;
      padding: 14px;
      resize: vertical;
      line-height: 20px; }
      .two-column-form .fields .field textarea.wysihtml5-style {
        padding: 0; }
    .two-column-form .fields .field select {
      max-width: 200px;
      width: 100%; }
    .two-column-form .fields .field select[multiple] {
      height: auto; }
    .two-column-form .fields .field input.small {
      max-width: 100px; }
    .two-column-form .fields .field input.medium {
      max-width: 300px; }
    .two-column-form .fields .field .standard-select {
      float: left; }
    .two-column-form .fields .field .file {
      min-height: 100px;
      max-width: 700px;
      position: relative; }
      .two-column-form .fields .field .file .thumbnail {
        left: 0px;
        position: absolute;
        top: 0px; }
      .two-column-form .fields .field .file .content {
        margin-left: 120px; }
        .two-column-form .fields .field .file .content .row {
          border-bottom: solid 1px #aaaaaa;
          margin: 0px;
          padding-bottom: 10px;
          position: relative; }
          .two-column-form .fields .field .file .content .row:last-child {
            border: none;
            padding: 10px 0px 0px 0px; }
          .two-column-form .fields .field .file .content .row .info {
            margin-right: 120px; }
          .two-column-form .fields .field .file .content .row .remove-media:hover {
            color: #c1272d; }
          .two-column-form .fields .field .file .content .row .remove-media .icon {
            display: inline-block;
            line-height: 12px;
            margin-right: 5px;
            vertical-align: top; }

.table-shadow {
  overflow: hidden; }

#directus_columns .input-selector {
  width: 150px;
  display: inline-block; }

#directus_columns .open-ui-options {
  margin-left: 4px;
  vertical-align: inherit;
  margin-bottom: 2px; }
  #directus_columns .open-ui-options:hover {
    color: #000000; }

.table-striped {
  text-align: left;
  width: 100%; }
  .table-striped .visible-columns-cell:hover,
  .table-striped .sortable-column:hover {
    color: #666666;
    cursor: pointer; }
  .table-striped .sortable-column {
    -webkit-transition: all 100ms ease-in-out;
    -moz-transition: all 100ms ease-in-out;
    -o-transition: all 100ms ease-in-out;
    -ms-transition: all 100ms ease-in-out;
    transition: all 100ms ease-in-out;
    min-width: 100px; }
  .table-striped thead tr {
    -webkit-font-smoothing: antialiased;
    background-color: #f7f7f7;
    height: 40px; }
    .table-striped thead tr:hover {
      cursor: default; }
    .table-striped thead tr th {
      color: #aaaaaa;
      text-transform: uppercase;
      font-size: 11px;
      font-weight: 500;
      padding: 12px 10px 8px 10px;
      position: relative; }
      .table-striped thead tr th.asc .sorter, .table-striped thead tr th.desc .sorter {
        display: inline-block;
        padding-right: 20px;
        position: relative; }
        .table-striped thead tr th.asc .sorter:before, .table-striped thead tr th.desc .sorter:before {
          content: '';
          position: absolute;
          right: 0px;
          top: 7px; }
      .table-striped thead tr th.asc .sorter:before {
        border-style: solid;
        height: 0px;
        width: 0px;
        border-width: 6px 6px 0 6px;
        border-color: #aaaaaa transparent transparent transparent; }
      .table-striped thead tr th.desc .sorter:before {
        border-style: solid;
        height: 0px;
        width: 0px;
        border-width: 0 6px 6px 6px;
        border-color: transparent transparent #aaaaaa transparent; }
      .table-striped thead tr th.permissions {
        width: 10%; }
      .table-striped thead tr th.check-box label {
        margin-top: -3px; }
      .table-striped thead tr th .icon {
        display: inline-block;
        height: 0px;
        line-height: 12px;
        vertical-align: top; }
      .table-striped thead tr th.sort .material-icons, .table-striped thead tr th.sort .custom-check input[type="checkbox"] + label span:before, .custom-check input[type="checkbox"] + label .table-striped thead tr th.sort span:before, .table-striped thead tr th.sort .custom-check input[type="radio"] + label span:before, .custom-check input[type="radio"] + label .table-striped thead tr th.sort span:before, .table-striped thead tr th.sort
      input[type="checkbox"].custom-check + label span:before,
      input[type="checkbox"].custom-check + label .table-striped thead tr th.sort span:before, .table-striped thead tr th.sort input[type="radio"].custom-check + label span:before, input[type="radio"].custom-check + label .table-striped thead tr th.sort span:before {
        font-size: 18px;
        vertical-align: middle; }
  .table-striped thead #set-visible-columns {
    position: absolute;
    top: 9px;
    right: 4px;
    display: none;
    color: #aaaaaa; }
    .table-striped thead #set-visible-columns:hover {
      color: #666666; }
  .table-striped thead.force-hover #set-visible-columns,
  .table-striped thead:hover #set-visible-columns {
    display: block;
    background-color: #f7f7f7;
    padding-left: 10px;
    padding-right: 10px; }
  .table-striped .visible-columns-cell {
    width: 0;
    display: table;
    top: 0;
    right: 16px;
    position: absolute; }
  .table-striped tbody {
    background-color: #ffffff; }
    .table-striped tbody .secondary-info, .table-striped tbody .history-container ul li .history-follow, .history-container ul li .table-striped tbody .history-follow {
      -webkit-font-smoothing: antialiased; }
    .table-striped tbody .delete-hover i, .table-striped tbody .add-hover i {
      vertical-align: inherit; }
    .table-striped tbody .delete-hover:hover i {
      color: #c1272d; }
    .table-striped tbody .add-hover:hover i {
      color: #7ac943; }
    .table-striped tbody .sort {
      color: #aaaaaa;
      font-size: 10px;
      width: 5px;
      padding-top: 0;
      padding-bottom: 0;
      padding-right: 0;
      text-align: left; }
      .table-striped tbody .sort:hover {
        color: #666666; }
      .table-striped tbody .sort .material-icons, .table-striped tbody .sort .custom-check input[type="checkbox"] + label span:before, .custom-check input[type="checkbox"] + label .table-striped tbody .sort span:before, .table-striped tbody .sort .custom-check input[type="radio"] + label span:before, .custom-check input[type="radio"] + label .table-striped tbody .sort span:before, .table-striped tbody .sort
      input[type="checkbox"].custom-check + label span:before,
      input[type="checkbox"].custom-check + label .table-striped tbody .sort span:before, .table-striped tbody .sort input[type="radio"].custom-check + label span:before, input[type="radio"].custom-check + label .table-striped tbody .sort span:before {
        font-size: 18px;
        vertical-align: middle; }
  .table-striped tfoot {
    height: 0; }
    .table-striped tfoot tr {
      border-bottom: none;
      height: 0;
      background-color: transparent; }
      .table-striped tfoot tr:hover {
        background-color: initial;
        cursor: auto; }
        .table-striped tfoot tr:hover td {
          background-color: inherit; }
      .table-striped tfoot tr td {
        vertical-align: top;
        position: relative;
        padding: 0;
        height: 0; }
      .table-striped tfoot tr .footer-function {
        color: #aaaaaa;
        background-color: #ffffff;
        text-align: center;
        padding: 10px 10px 8px 10px;
        margin: 10px 0;
        top: 0;
        left: 0;
        display: inline-block;
        -webkit-border-top-right-radius: 3px;
        -webkit-border-bottom-right-radius: 3px;
        -webkit-border-bottom-left-radius: 3px;
        -webkit-border-top-left-radius: 3px;
        -moz-border-radius-topright: 3px;
        -moz-border-radius-bottomright: 3px;
        -moz-border-radius-bottomleft: 3px;
        -moz-border-radius-topleft: 3px;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
        border-top-left-radius: 3px;
        -moz-background-clip: padding-box;
        -webkit-background-clip: padding-box;
        background-clip: padding-box; }
        .table-striped tfoot tr .footer-function:after {
          content: "";
          position: absolute;
          top: -6px;
          left: 50%;
          border-style: solid;
          border-width: 0 12px 6px 12px;
          border-color: #ffffff transparent;
          display: block;
          width: 0;
          z-index: 1;
          margin-left: -12px; }
        .table-striped tfoot tr .footer-function .method {
          font-weight: 500;
          font-size: 11px; }
        .table-striped tfoot tr .footer-function ul {
          padding: 0;
          font-weight: 500;
          font-size: 11px; }
        .table-striped tfoot tr .footer-function span.value {
          display: block;
          margin-bottom: 2px;
          font-size: 14px;
          color: #333333; }
        .table-striped tfoot tr .footer-function li {
          color: #aaaaaa; }
        .table-striped tfoot tr .footer-function li:hover {
          color: #333333; }
  .table-striped tr {
    -webkit-font-smoothing: auto;
    border-bottom: solid 1px #f4f4f4;
    color: #666666;
    font-weight: 400;
    font-size: 13px;
    background-color: #FFFFFF; }
    .table-striped tr.highlight {
      background-color: #f8fcfe; }
    .table-striped tr:hover {
      cursor: pointer; }
      .table-striped tr:hover td {
        background-color: #f8fcfe; }
      .table-striped tr:hover .settings {
        display: block; }
    .table-striped tr.featured {
      font-weight: 500;
      -webkit-font-smoothing: antialiased; }
    .table-striped tr.inactive td {
      opacity: 0.5; }
    .table-striped tr.inactive td.check,
    .table-striped tr.inactive td.sort {
      opacity: 1.0; }
    .table-striped tr.system {
      height: 55px;
      color: #aaaaaa; }
    .table-striped tr th, .table-striped tr td {
      padding-left: 10px;
      padding-right: 10px; }
    .table-striped tr td {
      vertical-align: middle;
      padding-bottom: 12px;
      padding-top: 12px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 400px; }
    .table-striped tr .check-box {
      padding-left: 15px;
      width: 12px; }
      .table-striped tr .check-box.with-sort {
        padding-left: 0; }
      .table-striped tr .check-box label {
        margin-right: 0px; }

.related-table {
  margin-bottom: 20px;
  max-height: 800px;
  overflow: auto; }
  .related-table thead:hover #set-visible-columns {
    background-color: #ececec;
    color: #666666; }
  .related-table thead tr th {
    background-color: #ececec;
    color: #666666; }
    .related-table thead tr th:hover {
      background-color: #ececec; }
  .related-table tbody {
    border-bottom: none; }
  .related-table .table-striped {
    border-bottom: none; }
    .related-table .table-striped tr:hover td {
      background-color: #f8fcfe; }
    .related-table .table-striped tr td {
      background-color: #fafafa; }
      .related-table .table-striped tr td.delete {
        text-align: left;
        width: 15px;
        font-size: 16px; }
        .related-table .table-striped tr td.delete:hover {
          color: #c1272d; }
  .related-table .visible-columns-cell {
    width: 0;
    right: 0;
    display: none; }

.visible-columns-cell {
  position: absolute;
  top: 0;
  right: 24px; }

.set-columns {
  position: fixed;
  top: 181px;
  right: 50px;
  display: block;
  background-color: #f4f4f4;
  color: #666666;
  z-index: 1;
  border: 1px solid lightgray; }
  .set-columns fieldset {
    padding: 15px 20px 15px 20px;
    max-height: 300px;
    overflow: scroll;
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom: 1px solid lightgray; }
    .set-columns fieldset label {
      padding: 5px 0 5px 0;
      cursor: pointer; }
      .set-columns fieldset label:hover {
        color: #333333; }
  .set-columns .btn-row {
    font-size: 12px;
    padding: 20px 20px 15px; }
    .set-columns .btn-row .btn {
      background-color: #aaaaaa; }
      .set-columns .btn-row .btn.btn-primary {
        background-color: #4ca6de;
        margin-right: 10px; }
        .set-columns .btn-row .btn.btn-primary:hover {
          background-color: #268fd1; }
      .set-columns .btn-row .btn:hover {
        background-color: #737373; }
  .set-columns label {
    display: block; }
    .set-columns label input {
      display: inline-block;
      width: auto;
      margin-right: 10px; }

.activity-page li {
  padding-left: 60px !important; }
  .activity-page li:first-child .history-icon {
    top: 24px !important; }

.view-entire-history {
  padding-top: 30px;
  text-align: center; }

.section-header {
  margin: 40px 0 10px 0; }

.section-dropdown {
  float: right;
  height: 30px;
  min-width: 150px;
  margin-top: -4px;
  background-color: #ffffff;
  font-weight: normal; }

.history-container {
  background-color: #ffffff;
  padding: 20px;
  color: #666666; }
  .history-container ul {
    margin: 0 !important;
    padding: 0;
    list-style: none; }
    .history-container ul .history-add-comment {
      padding-right: 180px; }
      .history-container ul .history-add-comment .history-comment {
        width: 90%; }
    .history-container ul li {
      position: relative;
      padding-top: 20px;
      border-top: 1px solid #ececec;
      margin-top: 20px;
      min-height: 40px;
      padding-left: 50px;
      padding-right: 150px; }
      .history-container ul li:first-child {
        padding-top: 0;
        border-top: none;
        margin-top: 0; }
        .history-container ul li:first-child .avatar {
          top: 0; }
        .history-container ul li:first-child .history-datetime {
          top: 10px; }
      .history-container ul li .mention-list {
        width: 100%;
        max-width: 530px;
        background-color: #ffffff;
        display: block;
        margin-top: 7px;
        margin-left: 10px;
        padding: 5px;
        border: 1px solid #dddddd; }
        .history-container ul li .mention-list:empty {
          display: none; }
      .history-container ul li .mention-choice {
        background-color: inherit;
        padding: 5px; }
        .history-container ul li .mention-choice:hover {
          background-color: #f4f4f4;
          cursor: pointer; }
        .history-container ul li .mention-choice img {
          width: 30px;
          vertical-align: middle;
          margin-right: 10px; }
      .history-container ul li .mention-tag {
        -webkit-transition: all 100ms ease-in-out;
        -moz-transition: all 100ms ease-in-out;
        -o-transition: all 100ms ease-in-out;
        -ms-transition: all 100ms ease-in-out;
        transition: all 100ms ease-in-out;
        color: #4ca6de;
        cursor: pointer; }
        .history-container ul li .mention-tag:hover {
          color: #268fd1; }
      .history-container ul li .avatar {
        float: none;
        position: absolute;
        top: 20px;
        left: 0;
        width: 40px;
        height: 40px; }
      .history-container ul li .history-datetime {
        color: #aaaaaa;
        margin-left: 10px;
        margin-top: 4px;
        font-style: italic;
        font-size: 12px; }
      .history-container ul li .history-comment {
        position: relative;
        display: inline-block;
        padding: 20px 20px 18px 20px;
        background-color: #ffffff;
        -webkit-border-top-right-radius: 4px;
        -webkit-border-bottom-right-radius: 4px;
        -webkit-border-bottom-left-radius: 4px;
        -webkit-border-top-left-radius: 4px;
        -moz-border-radius-topright: 4px;
        -moz-border-radius-bottomright: 4px;
        -moz-border-radius-bottomleft: 4px;
        -moz-border-radius-topleft: 4px;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
        border-top-left-radius: 4px;
        -moz-background-clip: padding-box;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        border: 1px solid #dddddd;
        max-width: 500px;
        margin-left: 10px;
        height: auto;
        min-height: 18px;
        font-weight: 400; }
        .history-container ul li .history-comment:after, .history-container ul li .history-comment:before {
          right: 100%;
          top: 20px;
          border: solid transparent;
          content: " ";
          height: 0;
          width: 0;
          position: absolute;
          pointer-events: none; }
        .history-container ul li .history-comment:after {
          border-color: rgba(255, 255, 255, 0);
          border-right-color: #ffffff;
          border-width: 9px;
          margin-top: -9px; }
        .history-container ul li .history-comment:before {
          border-color: rgba(255, 0, 0, 0);
          border-right-color: #dddddd;
          border-width: 10px;
          margin-top: -10px; }
        .history-container ul li .history-comment #messages-response-button {
          position: absolute;
          right: 15px;
          bottom: 15px; }
          .history-container ul li .history-comment #messages-response-button.disabled {
            background-color: #dddddd; }
        .history-container ul li .history-comment textarea {
          border: none;
          width: 100%;
          min-height: 80px;
          padding: 0 0 30px 0;
          -webkit-font-smoothing: antialiased !important; }
          .history-container ul li .history-comment textarea.tall {
            min-height: 140px; }
      .history-container ul li .history-follow {
        margin-left: 10px;
        margin-top: 10px; }
        .history-container ul li .history-follow input {
          display: inline-block;
          margin-right: 10px; }
      .history-container ul li .history-text {
        padding-top: 2px;
        padding-left: 10px; }
        .history-container ul li .history-text a {
          color: #aaaaaa; }
      .history-container ul li .history-icon {
        position: absolute;
        top: 44px;
        left: 24px;
        width: 21px;
        height: 21px;
        color: #ffffff;
        -webkit-border-top-right-radius: 20px;
        -webkit-border-bottom-right-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -webkit-border-top-left-radius: 20px;
        -moz-border-radius-topright: 20px;
        -moz-border-radius-bottomright: 20px;
        -moz-border-radius-bottomleft: 20px;
        -moz-border-radius-topleft: 20px;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border-top-left-radius: 20px;
        -moz-background-clip: padding-box;
        -webkit-background-clip: padding-box;
        background-clip: padding-box; }
        .history-container ul li .history-icon .material-icons, .history-container ul li .history-icon .custom-check input[type="checkbox"] + label span:before, .custom-check input[type="checkbox"] + label .history-container ul li .history-icon span:before, .history-container ul li .history-icon .custom-check input[type="radio"] + label span:before, .custom-check input[type="radio"] + label .history-container ul li .history-icon span:before, .history-container ul li .history-icon
        input[type="checkbox"].custom-check + label span:before,
        input[type="checkbox"].custom-check + label .history-container ul li .history-icon span:before, .history-container ul li .history-icon input[type="radio"].custom-check + label span:before, input[type="radio"].custom-check + label .history-container ul li .history-icon span:before {
          font-size: 100%;
          line-height: 60%;
          position: absolute; }
        .history-container ul li .history-icon.add {
          background-color: #7ac943; }
          .history-container ul li .history-icon.add .material-icons, .history-container ul li .history-icon.add .custom-check input[type="checkbox"] + label span:before, .custom-check input[type="checkbox"] + label .history-container ul li .history-icon.add span:before, .history-container ul li .history-icon.add .custom-check input[type="radio"] + label span:before, .custom-check input[type="radio"] + label .history-container ul li .history-icon.add span:before, .history-container ul li .history-icon.add
          input[type="checkbox"].custom-check + label span:before,
          input[type="checkbox"].custom-check + label .history-container ul li .history-icon.add span:before, .history-container ul li .history-icon.add input[type="radio"].custom-check + label span:before, input[type="radio"].custom-check + label .history-container ul li .history-icon.add span:before {
            top: 6px;
            left: 4px; }
        .history-container ul li .history-icon.edit {
          background-color: #3fa9f5; }
          .history-container ul li .history-icon.edit .material-icons, .history-container ul li .history-icon.edit .custom-check input[type="checkbox"] + label span:before, .custom-check input[type="checkbox"] + label .history-container ul li .history-icon.edit span:before, .history-container ul li .history-icon.edit .custom-check input[type="radio"] + label span:before, .custom-check input[type="radio"] + label .history-container ul li .history-icon.edit span:before, .history-container ul li .history-icon.edit
          input[type="checkbox"].custom-check + label span:before,
          input[type="checkbox"].custom-check + label .history-container ul li .history-icon.edit span:before, .history-container ul li .history-icon.edit input[type="radio"].custom-check + label span:before, input[type="radio"].custom-check + label .history-container ul li .history-icon.edit span:before {
            top: 6px;
            left: 4px; }
        .history-container ul li .history-icon.delete {
          background-color: #c1272d; }
          .history-container ul li .history-icon.delete .material-icons, .history-container ul li .history-icon.delete .custom-check input[type="checkbox"] + label span:before, .custom-check input[type="checkbox"] + label .history-container ul li .history-icon.delete span:before, .history-container ul li .history-icon.delete .custom-check input[type="radio"] + label span:before, .custom-check input[type="radio"] + label .history-container ul li .history-icon.delete span:before, .history-container ul li .history-icon.delete
          input[type="checkbox"].custom-check + label span:before,
          input[type="checkbox"].custom-check + label .history-container ul li .history-icon.delete span:before, .history-container ul li .history-icon.delete input[type="radio"].custom-check + label span:before, input[type="radio"].custom-check + label .history-container ul li .history-icon.delete span:before {
            top: 6px;
            left: 4px; }
        .history-container ul li .history-icon.message {
          background-color: #a63c96; }
          .history-container ul li .history-icon.message .material-icons, .history-container ul li .history-icon.message .custom-check input[type="checkbox"] + label span:before, .custom-check input[type="checkbox"] + label .history-container ul li .history-icon.message span:before, .history-container ul li .history-icon.message .custom-check input[type="radio"] + label span:before, .custom-check input[type="radio"] + label .history-container ul li .history-icon.message span:before, .history-container ul li .history-icon.message
          input[type="checkbox"].custom-check + label span:before,
          input[type="checkbox"].custom-check + label .history-container ul li .history-icon.message span:before, .history-container ul li .history-icon.message input[type="radio"].custom-check + label span:before, input[type="radio"].custom-check + label .history-container ul li .history-icon.message span:before {
            top: 2px;
            left: 4px; }
        .history-container ul li .history-icon.comment {
          background-color: #a63c96; }
          .history-container ul li .history-icon.comment .material-icons, .history-container ul li .history-icon.comment .custom-check input[type="checkbox"] + label span:before, .custom-check input[type="checkbox"] + label .history-container ul li .history-icon.comment span:before, .history-container ul li .history-icon.comment .custom-check input[type="radio"] + label span:before, .custom-check input[type="radio"] + label .history-container ul li .history-icon.comment span:before, .history-container ul li .history-icon.comment
          input[type="checkbox"].custom-check + label span:before,
          input[type="checkbox"].custom-check + label .history-container ul li .history-icon.comment span:before, .history-container ul li .history-icon.comment input[type="radio"].custom-check + label span:before, input[type="radio"].custom-check + label .history-container ul li .history-icon.comment span:before {
            top: 6px;
            left: 4px; }
        .history-container ul li .history-icon.attach {
          background-color: #ff7bac; }
          .history-container ul li .history-icon.attach .material-icons, .history-container ul li .history-icon.attach .custom-check input[type="checkbox"] + label span:before, .custom-check input[type="checkbox"] + label .history-container ul li .history-icon.attach span:before, .history-container ul li .history-icon.attach .custom-check input[type="radio"] + label span:before, .custom-check input[type="radio"] + label .history-container ul li .history-icon.attach span:before, .history-container ul li .history-icon.attach
          input[type="checkbox"].custom-check + label span:before,
          input[type="checkbox"].custom-check + label .history-container ul li .history-icon.attach span:before, .history-container ul li .history-icon.attach input[type="radio"].custom-check + label span:before, input[type="radio"].custom-check + label .history-container ul li .history-icon.attach span:before {
            top: 6px;
            left: 4px; }
        .history-container ul li .history-icon.login {
          background-color: #5b5b5b; }
          .history-container ul li .history-icon.login .material-icons, .history-container ul li .history-icon.login .custom-check input[type="checkbox"] + label span:before, .custom-check input[type="checkbox"] + label .history-container ul li .history-icon.login span:before, .history-container ul li .history-icon.login .custom-check input[type="radio"] + label span:before, .custom-check input[type="radio"] + label .history-container ul li .history-icon.login span:before, .history-container ul li .history-icon.login
          input[type="checkbox"].custom-check + label span:before,
          input[type="checkbox"].custom-check + label .history-container ul li .history-icon.login span:before, .history-container ul li .history-icon.login input[type="radio"].custom-check + label span:before, input[type="radio"].custom-check + label .history-container ul li .history-icon.login span:before {
            top: 6px;
            left: 4px; }
        .history-container ul li .history-icon.system {
          background-color: #fdcd30; }
          .history-container ul li .history-icon.system .material-icons, .history-container ul li .history-icon.system .custom-check input[type="checkbox"] + label span:before, .custom-check input[type="checkbox"] + label .history-container ul li .history-icon.system span:before, .history-container ul li .history-icon.system .custom-check input[type="radio"] + label span:before, .custom-check input[type="radio"] + label .history-container ul li .history-icon.system span:before, .history-container ul li .history-icon.system
          input[type="checkbox"].custom-check + label span:before,
          input[type="checkbox"].custom-check + label .history-container ul li .history-icon.system span:before, .history-container ul li .history-icon.system input[type="radio"].custom-check + label span:before, input[type="radio"].custom-check + label .history-container ul li .history-icon.system span:before {
            top: 6px;
            left: 4px; }

.activity-module {
  position: relative; }
  .activity-module h2 {
    font-family: 'Arvo', serif;
    font-size: 32px;
    font-weight: 400;
    margin: 0 0 -4px 0; }
  .activity-module .black {
    color: #000000; }
  .activity-module .green {
    color: #8bc53f; }
  .activity-module .blue {
    color: #26a9e0; }
  .activity-module .red {
    color: #ee2545; }
  .activity-module .yellow {
    color: #ffc10b; }
  .activity-module .purple {
    color: #7f3f97; }
  .activity-module .bgblack {
    background-color: #000000; }
  .activity-module .bggreen {
    background-color: #8bc53f; }
  .activity-module .bgblue {
    background-color: #26a9e0; }
  .activity-module .bgred {
    background-color: #ee2545; }
  .activity-module .bgyellow {
    background-color: #ffc10b; }
  .activity-module .bgpurple {
    background-color: #7f3f97; }
  .activity-module .chart-key {
    position: absolute;
    top: -2px;
    left: -14px;
    background-color: #ececec;
    color: #aaaaaa;
    text-align: center;
    font-size: 10px;
    padding-right: 5px;
    margin-right: 5px;
    display: none; }
  .activity-module .activity-chart table {
    width: 100%;
    font-style: italic;
    font-size: 12px; }
  .activity-module .activity-chart table td {
    vertical-align: bottom;
    position: relative; }
  .activity-module .bgfiller {
    background-color: #f4f4f4;
    height: 100%;
    width: 50%;
    min-width: 10px;
    margin: 0 auto;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -25%;
    z-index: 0; }
  .activity-module .bars {
    height: 150px; }
  .activity-module .bar {
    width: 50%;
    min-width: 10px;
    margin: 0 auto;
    position: relative;
    z-index: 1; }
  .activity-module .bar-date {
    position: absolute;
    bottom: -18px;
    color: #aaaaaa;
    font-size: 9px;
    text-align: center;
    width: 100%; }
  .activity-module .activity-totals {
    padding: 35px 15px 0 15px;
    overflow: hidden; }
  .activity-module .activity-total {
    width: 14.2%;
    min-width: 80px;
    text-align: center;
    position: relative;
    float: left; }
  .activity-module .center {
    width: 100%;
    min-width: 560px;
    margin: 0 auto; }
  .activity-module .align-center {
    text-align: center; }
  .activity-module .align-right {
    text-align: right; }
  @media (max-width: 900px) {
    .activity-module h2 {
      font-size: 24px; }
    .activity-module .activity-total {
      min-width: 100px; }
    .activity-module .activity-total span {
      font-size: 10px; }
    .activity-module .center {
      min-width: 600px; } }

.sortableHeader {
  color: #333333 !important; }

.disable-sorting .sortableHeader {
  cursor: pointer; }
  .disable-sorting .sortableHeader .material-icons, .disable-sorting .sortableHeader .custom-check input[type="checkbox"] + label span:before, .custom-check input[type="checkbox"] + label .disable-sorting .sortableHeader span:before, .disable-sorting .sortableHeader .custom-check input[type="radio"] + label span:before, .custom-check input[type="radio"] + label .disable-sorting .sortableHeader span:before, .disable-sorting .sortableHeader
  input[type="checkbox"].custom-check + label span:before,
  input[type="checkbox"].custom-check + label .disable-sorting .sortableHeader span:before, .disable-sorting .sortableHeader input[type="radio"].custom-check + label span:before, input[type="radio"].custom-check + label .disable-sorting .sortableHeader span:before {
    color: #aaaaaa; }
  .disable-sorting .sortableHeader:hover .material-icons, .disable-sorting .sortableHeader:hover .custom-check input[type="checkbox"] + label span:before, .custom-check input[type="checkbox"] + label .disable-sorting .sortableHeader:hover span:before, .disable-sorting .sortableHeader:hover .custom-check input[type="radio"] + label span:before, .custom-check input[type="radio"] + label .disable-sorting .sortableHeader:hover span:before, .disable-sorting .sortableHeader:hover
  input[type="checkbox"].custom-check + label span:before,
  input[type="checkbox"].custom-check + label .disable-sorting .sortableHeader:hover span:before, .disable-sorting .sortableHeader:hover input[type="radio"].custom-check + label span:before, input[type="radio"].custom-check + label .disable-sorting .sortableHeader:hover span:before {
    color: #666666; }

.disable-sorting td.sort {
  color: #ececec; }
  .disable-sorting td.sort .material-icons, .disable-sorting td.sort .custom-check input[type="checkbox"] + label span:before, .custom-check input[type="checkbox"] + label .disable-sorting td.sort span:before, .disable-sorting td.sort .custom-check input[type="radio"] + label span:before, .custom-check input[type="radio"] + label .disable-sorting td.sort span:before, .disable-sorting td.sort
  input[type="checkbox"].custom-check + label span:before,
  input[type="checkbox"].custom-check + label .disable-sorting td.sort span:before, .disable-sorting td.sort input[type="radio"].custom-check + label span:before, input[type="radio"].custom-check + label .disable-sorting td.sort span:before {
    font-size: 18px;
    vertical-align: middle;
    -o-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -webkit-transform: none !important;
    transform: none !important;
    /*CSS animations*/
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    -ms-animation: none !important;
    animation: none !important; }
  .disable-sorting td.sort:hover {
    color: #ececec; }

.disable-transform tr {
  transform: none !important; }

tbody.remove-hover-state tr:hover td {
  background-color: #ffffff; }

tbody.remove-hover-state .sort {
  color: #aaaaaa !important; }

.sortable-ghost td {
  background-color: #f8fcfe !important; }

.remove-hover-state {
  cursor: move !important; }

.remove-hover-state .media-slideshow-item {
  opacity: 0.5; }

.sortable-file-ghost {
  opacity: 1.0 !important; }

@-webkit-keyframes buzz {
  50% {
    -webkit-transform: translateX(2px) rotate(2deg);
    transform: translateX(2px) rotate(2deg); }
  100% {
    -webkit-transform: translateX(-2px) rotate(-2deg);
    transform: translateX(-2px) rotate(-2deg); } }

@keyframes buzz {
  50% {
    -webkit-transform: translateX(2px) rotate(2deg);
    transform: translateX(2px) rotate(2deg); }
  100% {
    -webkit-transform: translateX(-2px) rotate(-2deg);
    transform: translateX(-2px) rotate(-2deg); } }

.reorder-effect, tbody.remove-hover-state .sort .material-icons, tbody.remove-hover-state .sort .custom-check input[type="checkbox"] + label span:before, .custom-check input[type="checkbox"] + label tbody.remove-hover-state .sort span:before, tbody.remove-hover-state .sort .custom-check input[type="radio"] + label span:before, .custom-check input[type="radio"] + label tbody.remove-hover-state .sort span:before, tbody.remove-hover-state .sort
input[type="checkbox"].custom-check + label span:before,
input[type="checkbox"].custom-check + label tbody.remove-hover-state .sort span:before, tbody.remove-hover-state .sort input[type="radio"].custom-check + label span:before, input[type="radio"].custom-check + label tbody.remove-hover-state .sort span:before {
  display: inline-block;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-animation-name: buzz;
  animation-name: buzz;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite; }

@-moz-keyframes jiggle {
  0% {
    -moz-transform: rotate(-1deg); }
  50% {
    -moz-transform: rotate(1deg); } }

@-webkit-keyframes jiggle {
  0% {
    -webkit-transform: rotate(-1deg); }
  50% {
    -webkit-transform: rotate(1deg); } }

.jiggly, .ui-file-container.remove-hover-state img {
  -webkit-animation: jiggle 0.2s infinite;
  -moz-animation-duration: 0.2s;
  -moz-animation-name: jiggle;
  -moz-animation-iteration-count: infinite;
  -webkit-transform: rotate(-1deg);
  -moz-transform: rotate(-1deg); }

.cards {
  padding-left: 0px; }
  .cards .card {
    font-size: 12px;
    list-style: none;
    cursor: pointer; }
    .cards .card.inactive {
      opacity: 0.4; }
    .cards .card:hover .info .featured .primary-info {
      color: #1a1a1a; }
    .cards .card .header-image {
      overflow: hidden;
      height: 200px;
      position: relative;
      width: 200px;
      background-color: #ececec;
      text-align: center;
      border-radius: 4px 4px 0 0; }
      .cards .card .header-image:hover {
        cursor: pointer; }
        .cards .card .header-image:hover .tool-item {
          opacity: 1.0; }
      .cards .card .header-image .embed-icon {
        color: #ffffff;
        position: absolute;
        bottom: 12px;
        right: 18px;
        z-index: 2; }
      .cards .card .header-image .default-info {
        position: relative;
        border: solid 1px #ececec;
        border-bottom: 0px;
        font-size: 45px;
        font-weight: 100;
        height: 199px;
        line-height: 190px;
        text-align: center; }
        .cards .card .header-image .default-info img {
          position: absolute;
          top: 0;
          left: 0; }
      .cards .card .header-image .default-loading {
        border: solid 1px #ececec;
        border-bottom: 0px;
        font-size: 45px;
        font-weight: 500;
        height: 199px;
        line-height: 190px;
        text-align: center; }
        .cards .card .header-image .default-loading .icon {
          line-height: 130%; }
      .cards .card .header-image .tool-item {
        background-color: #ffffff;
        bottom: 10px;
        color: #666666;
        position: absolute;
        right: 10px;
        z-index: 3;
        opacity: 0; }
        .cards .card .header-image .tool-item .material-icons, .cards .card .header-image .tool-item .custom-check input[type="checkbox"] + label span:before, .custom-check input[type="checkbox"] + label .cards .card .header-image .tool-item span:before, .cards .card .header-image .tool-item .custom-check input[type="radio"] + label span:before, .custom-check input[type="radio"] + label .cards .card .header-image .tool-item span:before, .cards .card .header-image .tool-item
        input[type="checkbox"].custom-check + label span:before,
        input[type="checkbox"].custom-check + label .cards .card .header-image .tool-item span:before, .cards .card .header-image .tool-item input[type="radio"].custom-check + label span:before, input[type="radio"].custom-check + label .cards .card .header-image .tool-item span:before {
          font-size: 18px;
          margin-top: 6px; }
    .cards .card.active .header-image {
      border-bottom-style: solid;
      border-bottom-width: 3px;
      margin-bottom: -7px; }
    .cards .card .media-card-progress {
      position: absolute;
      background-color: #7ac943;
      z-index: 10;
      bottom: 0px;
      height: 4px;
      width: 100%; }
    .cards .card .info {
      background-color: #ffffff;
      border-top: none;
      min-height: 100px;
      border-radius: 0 0 4px 4px;
      border-top: 1px solid #ececec;
      padding-top: 4px; }
      .cards .card .info .featured, .cards .card .info .extra {
        padding: 14px 0 14px 0;
        margin-left: 14px;
        margin-right: 14px; }
      .cards .card .info .featured {
        margin-top: -4px; }
      .cards .card .info .primary-info {
        -webkit-transition: all 100ms ease-in-out;
        -moz-transition: all 100ms ease-in-out;
        -o-transition: all 100ms ease-in-out;
        -ms-transition: all 100ms ease-in-out;
        transition: all 100ms ease-in-out;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-bottom: 2px; }
        .cards .card .info .primary-info div {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis; }
      .cards .card .info .extra {
        padding-top: 12px;
        border-top: 1px solid #ececec; }
        .cards .card .info .extra li {
          border-bottom: solid 1px #ffffff;
          list-style: none;
          padding: 4px 22px 4px 0px;
          position: relative;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden; }
          .cards .card .info .extra li:last-child {
            border-bottom: none; }
          .cards .card .info .extra li .sub-line {
            font-size: 10px;
            margin-top: -5px; }
          .cards .card .info .extra li .icon {
            float: right;
            font-size: 30px;
            position: absolute;
            right: 0px;
            top: 10px;
            line-height: 1px;
            vertical-align: top; }

.feature-cards {
  padding-left: 0px; }
  .feature-cards .feature-card {
    background-color: #ffffff;
    list-style: none;
    padding: 20px;
    height: 100px;
    overflow: hidden;
    position: relative; }
    .feature-cards .feature-card:hover .material-icons, .feature-cards .feature-card:hover .custom-check input[type="checkbox"] + label span:before, .custom-check input[type="checkbox"] + label .feature-cards .feature-card:hover span:before, .feature-cards .feature-card:hover .custom-check input[type="radio"] + label span:before, .custom-check input[type="radio"] + label .feature-cards .feature-card:hover span:before, .feature-cards .feature-card:hover
    input[type="checkbox"].custom-check + label span:before,
    input[type="checkbox"].custom-check + label .feature-cards .feature-card:hover span:before, .feature-cards .feature-card:hover input[type="radio"].custom-check + label span:before, input[type="radio"].custom-check + label .feature-cards .feature-card:hover span:before {
      color: #268fd1 !important; }
    .feature-cards .feature-card .left-col {
      color: #ececec;
      text-align: center;
      width: 150px;
      position: absolute;
      top: 0;
      left: 0; }
      .feature-cards .feature-card .left-col .material-icons, .feature-cards .feature-card .left-col .custom-check input[type="checkbox"] + label span:before, .custom-check input[type="checkbox"] + label .feature-cards .feature-card .left-col span:before, .feature-cards .feature-card .left-col .custom-check input[type="radio"] + label span:before, .custom-check input[type="radio"] + label .feature-cards .feature-card .left-col span:before, .feature-cards .feature-card .left-col
      input[type="checkbox"].custom-check + label span:before,
      input[type="checkbox"].custom-check + label .feature-cards .feature-card .left-col span:before, .feature-cards .feature-card .left-col input[type="radio"].custom-check + label span:before, input[type="radio"].custom-check + label .feature-cards .feature-card .left-col span:before {
        -webkit-transition: all 100ms ease-in-out;
        -moz-transition: all 100ms ease-in-out;
        -o-transition: all 100ms ease-in-out;
        -ms-transition: all 100ms ease-in-out;
        transition: all 100ms ease-in-out;
        display: inline-block;
        color: #4ca6de;
        font-size: 70px;
        line-height: 140px; }
    .feature-cards .feature-card .right-col {
      max-width: 400px;
      margin-left: 130px;
      font-weight: 400; }

.group-list {
  color: #aaaaaa; }
  .group-list, .group-list ul {
    list-style: none;
    margin: 0px;
    padding: 0px; }
  .group-list ul {
    margin-top: 10px; }
  .group-list .group-item {
    border-bottom: solid 1px #ececec;
    margin: 0px;
    padding: 11px 20px 10px 20px; }
    .group-list .group-item.big-item {
      padding: 20px; }
    .group-list .group-item > .icon {
      font-size: 38px;
      line-height: 5px;
      margin-right: 20px;
      margin-top: 3px; }
    .group-list .group-item .stack {
      color: #666666;
      height: 17px; }
      .group-list .group-item .stack .icon {
        color: #ececec;
        display: inline-block;
        font-size: 32px;
        line-height: 14px;
        margin: 0px 10px;
        vertical-align: top; }
      .group-list .group-item .stack .stack-item {
        color: #aaaaaa; }

.directus-modal-backdrop {
  z-index: 998;
  background-color: #ececec;
  opacity: 0.9;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; }

.directus-alert-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 440px;
  min-height: 90px;
  margin-left: -250px;
  margin-top: -170px;
  padding: 30px 30px 30px 30px;
  background-color: #ffffff;
  color: #333333;
  font-size: 14px;
  font-weight: 500;
  z-index: 110;
  -webkit-font-smoothing: antialiased; }
  .directus-alert-modal .directus-alert-modal-message {
    font-weight: 400;
    line-height: 24px;
    font-size: 16px;
    padding-bottom: 10px;
    word-wrap: break-word; }
  .directus-alert-modal input {
    width: 100%;
    font-weight: normal; }
  .directus-alert-modal .directus-alert-modal-buttons {
    margin-top: 20px;
    text-align: right; }
    .directus-alert-modal .directus-alert-modal-buttons button {
      -webkit-transition: background-color 100ms ease-in-out;
      -moz-transition: background-color 100ms ease-in-out;
      -o-transition: background-color 100ms ease-in-out;
      -ms-transition: background-color 100ms ease-in-out;
      transition: background-color 100ms ease-in-out;
      -webkit-border-top-right-radius: 3px;
      -webkit-border-bottom-right-radius: 3px;
      -webkit-border-bottom-left-radius: 3px;
      -webkit-border-top-left-radius: 3px;
      -moz-border-radius-topright: 3px;
      -moz-border-radius-bottomright: 3px;
      -moz-border-radius-bottomleft: 3px;
      -moz-border-radius-topleft: 3px;
      border-top-right-radius: 3px;
      border-bottom-right-radius: 3px;
      border-bottom-left-radius: 3px;
      border-top-left-radius: 3px;
      -moz-background-clip: padding-box;
      -webkit-background-clip: padding-box;
      background-clip: padding-box;
      padding: 14px 24px 14px 24px;
      text-align: center;
      color: #ffffff;
      background-color: #aaaaaa;
      border-top: none;
      border-left: none;
      border-right: none;
      border-bottom: none;
      margin-left: 20px;
      min-width: 120px;
      font-weight: 500;
      -webkit-font-smoothing: antialiased; }
      .directus-alert-modal .directus-alert-modal-buttons button:hover {
        background-color: #919191; }
      .directus-alert-modal .directus-alert-modal-buttons button.primary {
        background-color: #4ca6de; }
        .directus-alert-modal .directus-alert-modal-buttons button.primary:hover {
          background-color: #1f72a5; }

.noty_box {
  position: relative; }

.noty_bar:before {
  content: "×";
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 22px;
  line-height: 22px; }

.noty_text {
  -ms-word-break: break-all;
  -ms-word-wrap: break-all;
  -webkit-word-break: break-word;
  -webkit-word-wrap: break-word;
  word-break: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto; }
  .noty_text ul {
    padding-left: 20px; }

#tool-tips {
  bottom: 0px;
  pointer-events: none;
  left: 0px;
  position: absolute;
  right: 0px;
  top: 0px;
  display: none; }

[data-tool-tip-for] {
  display: none;
  color: #ffffff;
  position: absolute;
  background-color: #7ac943;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  word-spacing: 1px;
  z-index: 1000; }

.tool-tip-pointer {
  display: block;
  height: 0px;
  position: absolute;
  width: 0px;
  border-style: solid; }

.bottom > .tool-tip-pointer,
.top > .tool-tip-pointer {
  left: 50%;
  margin-left: -6px; }

.bottom > .tool-tip-pointer {
  top: -10px;
  border-width: 0 6px 10px 6px;
  border-color: transparent transparent #7ac943 transparent; }

.top > .tool-tip-pointer {
  bottom: -10px;
  border-width: 10px 6px 0px 6px;
  border-color: #7ac943 transparent transparent transparent; }

.left > .tool-tip-pointer,
.right > .tool-tip-pointer {
  top: 50%;
  margin-top: -6px; }

.left > .tool-tip-pointer {
  right: -10px;
  border-width: 6px 0px 6px 10px;
  border-color: transparent transparent transparent #7ac943; }

.right > .tool-tip-pointer {
  left: -10px;
  border-width: 6px 10px 6px 0px;
  border-color: transparent #7ac943 transparent transparent; }

body.initial-load #sidebar {
  left: 0; }

.responsive-nav-toggle {
  display: none; }

#sidebar {
  background-color: #1a1a1a;
  bottom: 0px;
  color: #aaaaaa;
  float: left;
  height: 100%;
  letter-spacing: 0.4px;
  position: fixed;
  top: 0;
  left: -170px;
  width: 170px;
  z-index: 100;
  -webkit-font-smoothing: antialiased;
  -webkit-transition: left 400ms ease-in-out;
  -moz-transition: left 400ms ease-in-out;
  -o-transition: left 400ms ease-in-out;
  transition: left 400ms ease-in-out; }
  #sidebar ul {
    padding: 0px;
    margin: 0px; }
    #sidebar ul li {
      list-style: none; }
  #sidebar #mainLogoBox {
    background-color: #1a1a1a;
    height: 100px;
    overflow: hidden; }
  #sidebar .logo-container {
    line-height: 90px;
    text-align: center;
    font-size: 40px;
    color: #ffffff;
    border-bottom: 1px solid #272727; }
    #sidebar .logo-container .directus-logo {
      -webkit-transition: all 400ms ease-in-out;
      -moz-transition: all 400ms ease-in-out;
      -o-transition: all 400ms ease-in-out;
      transition: all 400ms ease-in-out;
      margin: 4px auto;
      padding: 20px 0px;
      opacity: 1;
      background-image: url(../img/directus-logo-sprite-small.png);
      width: 80px;
      height: 64px;
      background-repeat: no-repeat;
      background-position: left center;
      animation: logosprite 0.5s steps(15) infinite; }

@keyframes logosprite {
  100% {
    background-position: -1200px; } }
      #sidebar .logo-container .directus-logo.static {
        -moz-animation-name: none;
        -webkit-animation-name: none;
        -ms-animation-name: none;
        animation-name: none; }
      #sidebar .logo-container .directus-logo:hover {
        opacity: 0.5; }
  #sidebar #mainSidebar {
    bottom: 0;
    overflow: auto;
    position: absolute;
    top: 101px;
    width: 100%;
    color: #b7b7b7;
    padding-bottom: 150px; }
    #sidebar #mainSidebar .add-bookmark {
      -webkit-transition: all 100ms ease-in-out;
      -moz-transition: all 100ms ease-in-out;
      -o-transition: all 100ms ease-in-out;
      -ms-transition: all 100ms ease-in-out;
      transition: all 100ms ease-in-out;
      position: absolute;
      top: -4px;
      right: 10px;
      cursor: pointer;
      font-size: 19px;
      color: #666666; }
      #sidebar #mainSidebar .add-bookmark:hover {
        color: #ffffff; }
    #sidebar #mainSidebar .responsive-nav {
      display: none; }
    #sidebar #mainSidebar .sidebar-section, #sidebar #mainSidebar .sidebar-extension {
      margin-bottom: 25px;
      margin-top: 20px;
      position: relative; }
      #sidebar #mainSidebar .sidebar-section .sidebar-group, #sidebar #mainSidebar .sidebar-extension .sidebar-group {
        color: #666666;
        margin-left: 17px;
        margin-bottom: 2px;
        font-size: 11px;
        text-transform: uppercase; }
      #sidebar #mainSidebar .sidebar-section .sidebar-subitem.disabled, #sidebar #mainSidebar .sidebar-extension .sidebar-subitem.disabled {
        cursor: auto;
        font-style: italic; }
        #sidebar #mainSidebar .sidebar-section .sidebar-subitem.disabled:hover, #sidebar #mainSidebar .sidebar-extension .sidebar-subitem.disabled:hover {
          color: #b7b7b7; }
    #sidebar #mainSidebar .sidebar-subitem a,
    #sidebar #mainSidebar .sidebar-subitem .no-link {
      padding-left: 20px;
      padding-right: 20px;
      position: relative; }
    #sidebar #mainSidebar ul {
      margin: 0 0 10px 0; }
    #sidebar #mainSidebar li.hr {
      margin: 10px 0 10px 0;
      border-top: 1px solid #272727;
      display: none; }
    #sidebar #mainSidebar li.group-header {
      text-transform: uppercase;
      color: #666666;
      font-size: 10px;
      padding-left: 25px;
      padding-bottom: 0;
      padding-top: 5px;
      position: relative;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
    #sidebar #mainSidebar li .no-link {
      font-size: 13px; }
    #sidebar #mainSidebar li a {
      -webkit-transition: all 100ms ease-in-out;
      -moz-transition: all 100ms ease-in-out;
      -o-transition: all 100ms ease-in-out;
      -ms-transition: all 100ms ease-in-out;
      transition: all 100ms ease-in-out;
      display: block;
      font-size: 13px;
      font-weight: 500;
      line-height: 13px;
      padding: 6px 12px 6px 10px;
      position: relative;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer; }
      #sidebar #mainSidebar li a .remove-snapshot {
        -webkit-transition: all 100ms ease-in-out;
        -moz-transition: all 100ms ease-in-out;
        -o-transition: all 100ms ease-in-out;
        -ms-transition: all 100ms ease-in-out;
        transition: all 100ms ease-in-out;
        position: absolute;
        top: 3px;
        right: 7px;
        color: #666666;
        opacity: 0;
        -webkit-font-smoothing: antialiased !important;
        font-weight: 400;
        font-size: 19px;
        padding: 0 3px 0 3px; }
        #sidebar #mainSidebar li a .remove-snapshot:hover {
          color: #c1272d; }
      #sidebar #mainSidebar li a:hover {
        color: #ffffff; }
        #sidebar #mainSidebar li a:hover .remove-snapshot {
          opacity: 1.0; }
    #sidebar #mainSidebar li.active {
      border-left-width: 2px;
      border-left-style: solid;
      border-color: #ffffff; }
      #sidebar #mainSidebar li.active a {
        color: #ffffff;
        cursor: auto;
        padding-left: 18px; }
  #sidebar #featureSidebar {
    bottom: 0px;
    position: absolute;
    border-top: 1px solid #272727;
    width: 100%; }
    #sidebar #featureSidebar li {
      text-decoration: center;
      float: left;
      height: 56px;
      position: relative;
      background-color: #1a1a1a; }
      #sidebar #featureSidebar li:hover {
        color: #ffffff; }
        #sidebar #featureSidebar li:hover.has-image .material-design {
          display: block; }
        #sidebar #featureSidebar li:hover.has-image img {
          opacity: .2; }
      #sidebar #featureSidebar li a {
        display: block;
        padding: 16px; }
      #sidebar #featureSidebar li.active {
        color: #ffffff; }
      #sidebar #featureSidebar li.border-left {
        border-left: 1px solid #272727; }
      #sidebar #featureSidebar li.has-image {
        width: 56px; }
        #sidebar #featureSidebar li.has-image .material-design {
          display: none; }
        #sidebar #featureSidebar li.has-image a {
          padding: 15px; }
      #sidebar #featureSidebar li img {
        display: block;
        left: 0px;
        position: absolute;
        top: 0px;
        width: 100%;
        height: 100%; }

#fixedHeader {
  left: 0px;
  position: fixed;
  right: 0px;
  top: 0px;
  z-index: 50;
  background-color: #ececec;
  -webkit-transition: left 400ms ease-in-out;
  -moz-transition: left 400ms ease-in-out;
  -o-transition: left 400ms ease-in-out;
  transition: left 400ms ease-in-out; }

#header-shadow {
  position: absolute;
  bottom: -10px;
  height: 10px;
  width: 100%;
  z-index: 50;
  background: linear-gradient(rgba(51, 51, 51, 0.15), rgba(51, 51, 51, 0));
  opacity: 0.0;
  pointer-events: none; }

.has-toolbar .secondary-row {
  min-height: 34px; }

.has-toolbar .content-body {
  margin-top: 114px; }

.header1 {
  position: relative;
  background-color: #ececec;
  clear: both;
  float: left;
  padding-top: 20px;
  padding-bottom: 5px;
  width: 100%;
  min-height: 80px; }
  .header1 .navigation-back {
    display: none; }
  .header1 .btn-header {
    padding: 10px 15px 10px 10px;
    margin-top: -1px; }
    .header1 .btn-header .material-icons, .header1 .btn-header .custom-check input[type="checkbox"] + label span:before, .custom-check input[type="checkbox"] + label .header1 .btn-header span:before, .header1 .btn-header .custom-check input[type="radio"] + label span:before, .custom-check input[type="radio"] + label .header1 .btn-header span:before, .header1 .btn-header
    input[type="checkbox"].custom-check + label span:before,
    input[type="checkbox"].custom-check + label .header1 .btn-header span:before, .header1 .btn-header input[type="radio"].custom-check + label span:before, input[type="radio"].custom-check + label .header1 .btn-header span:before {
      font-size: 24px;
      margin-top: -6px;
      margin-bottom: -3px; }
  .header1 h1, .header1 ul {
    margin: 0px; }
  .header1 h1 {
    color: #aaaaaa;
    float: left;
    height: 38px;
    text-transform: capitalize;
    font-size: 26px;
    line-height: 38px; }
    .header1 h1 a {
      -webkit-transition: all 100ms ease-in-out;
      -moz-transition: all 100ms ease-in-out;
      -o-transition: all 100ms ease-in-out;
      -ms-transition: all 100ms ease-in-out;
      transition: all 100ms ease-in-out; }
      .header1 h1 a:hover {
        color: #666666; }
    .header1 h1 #removeOverlay {
      margin-top: -3px;
      vertical-align: middle;
      cursor: pointer;
      margin-right: 10px;
      margin-top: -3px; }
      .header1 h1 #removeOverlay:hover {
        color: #666666; }
    .header1 h1 .breadcrumb-delimiter {
      cursor: default;
      color: #d0d0d0;
      vertical-align: middle;
      margin-top: -3px; }
    .header1 h1 .icon {
      color: #aaaaaa;
      display: inline-block;
      font-size: 70px;
      line-height: 25px;
      margin: 0px 10px;
      vertical-align: top;
      cursor: pointer; }
      .header1 h1 .icon.icon-circled-left:hover {
        color: #666666; }
    .header1 h1 .endnode {
      color: #666666; }
    .header1 h1 .focused {
      color: #666666; }
  .header1 li {
    float: left;
    list-style: none; }
  .header1 .input-and-button.point.point .large-circle .icon {
    position: relative;
    z-index: 2; }
  .header1 .input-and-button.point.point .large-circle:before {
    border-style: solid;
    height: 0px;
    width: 0px;
    border-width: 14px 14px 0 14px;
    border-color: #666666 transparent transparent transparent;
    bottom: -5px;
    content: "";
    display: block;
    margin-left: 2px;
    position: absolute;
    z-index: 1; }
  .header1 .tools {
    position: relative; }
    .header1 .tools.left {
      padding: 0px; }
      .header1 .tools.left .tool {
        float: left;
        margin-left: 10px; }
        .header1 .tools.left .tool:first-child {
          margin-left: 0px; }
        .header1 .tools.left .tool .action {
          margin-left: 10px; }
          .header1 .tools.left .tool .action:first-child {
            margin-left: 0px; }
      .header1 .tools.left .tool-separator {
        float: left;
        margin-left: 20px;
        border-left: solid 1px lightgray;
        width: 0px;
        padding: 10px 0 10px 10px; }
      .header1 .tools.left.big-space .tool {
        margin-left: 10px; }
        .header1 .tools.left.big-space .tool:first-child {
          margin-left: 0px; }
        .header1 .tools.left.big-space .tool.div-right {
          padding-right: 20px; }
    .header1 .tools.right .tool {
      margin-right: 10px; }
      .header1 .tools.right .tool:last-child {
        margin-right: 0px; }
    .header1 .tools.right.big-space .tool {
      margin-right: 20px; }
      .header1 .tools.right.big-space .tool:last-child {
        margin-left: 0px; }
    .header1 .tools input {
      border: none;
      color: #aaaaaa;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale; }
    .header1 .tools .tool.div-right {
      border-right: solid 1px #ffffff;
      height: 32px;
      padding-right: 10px; }
    .header1 .tools .simple-select {
      display: inline-block;
      vertical-align: middle;
      font-weight: 500;
      cursor: pointer; }
    .header1 .tools .btn.disabled {
      color: rgba(255, 255, 255, 0.25); }
  .header1 .primary-row .tools {
    margin-top: 2px; }
    .header1 .primary-row .tools.left {
      margin-left: 15px; }
    .header1 .primary-row .tools.right button, .header1 .primary-row .tools.right input {
      display: block;
      float: right; }
    .header1 .primary-row .tools.right .tool {
      float: right; }
    .header1 .primary-row .tools .btn-round {
      padding: 8px; }
    .header1 .primary-row .tools .select-and-circle label.icon {
      line-height: 65%; }
    .header1 .primary-row .tools .select-and-circle label.icon-triangle-down {
      color: #4ca6de; }
    .header1 .primary-row .tools .checkbox {
      padding: 10px 0; }
      .header1 .primary-row .tools .checkbox input {
        margin: 2px 5px; }
    .header1 .primary-row .tools .simple-select {
      margin-bottom: -13px;
      margin-left: 5px;
      font-weight: 500; }
    .header1 .primary-row .tools input {
      margin-right: 10px;
      margin-top: 5px;
      text-align: right;
      width: auto; }
  .header1 .secondary-row {
    color: #aaaaaa;
    font-weight: 500;
    margin: 15px 0 0 0; }
    .header1 .secondary-row.batch-actions.left li {
      margin-left: 20px; }
      .header1 .secondary-row.batch-actions.left li.div-right {
        padding-right: 20px; }
      .header1 .secondary-row.batch-actions.left li.div-left {
        padding-left: 20px; }
    .header1 .secondary-row.filter-options .filter-list {
      padding: 0px; }
    .header1 .secondary-row.filter-options .filter-form {
      float: left;
      height: 33px; }
      .header1 .secondary-row.filter-options .filter-form .simple-select {
        margin-top: 0px;
        max-width: 150px;
        display: block;
        float: left;
        position: relative; }
        .header1 .secondary-row.filter-options .filter-form .simple-select .icon {
          color: #666666;
          line-height: 29px;
          right: 6px; }
        .header1 .secondary-row.filter-options .filter-form .simple-select select {
          padding-right: 30px;
          outline: none;
          max-width: 160px;
          -webkit-border-top-right-radius: 4px;
          -webkit-border-bottom-right-radius: 4px;
          -webkit-border-bottom-left-radius: 4px;
          -webkit-border-top-left-radius: 4px;
          -moz-border-radius-topright: 4px;
          -moz-border-radius-bottomright: 4px;
          -moz-border-radius-bottomleft: 4px;
          -moz-border-radius-topleft: 4px;
          border-top-right-radius: 4px;
          border-bottom-right-radius: 4px;
          border-bottom-left-radius: 4px;
          border-top-left-radius: 4px;
          -moz-background-clip: padding-box;
          -webkit-background-clip: padding-box;
          background-clip: padding-box; }
      .header1 .secondary-row.filter-options .filter-form input {
        display: inline-block;
        max-width: 160px; }
      .header1 .secondary-row.filter-options .filter-form input[type="text"] {
        float: left;
        width: auto; }
      .header1 .secondary-row.filter-options .filter-form .action {
        display: block;
        float: left;
        margin-left: 4px; }
      .header1 .secondary-row.filter-options .filter-form select, .header1 .secondary-row.filter-options .filter-form input[type="text"] {
        -webkit-border-top-right-radius: 4px;
        -webkit-border-bottom-right-radius: 4px;
        -webkit-border-bottom-left-radius: 4px;
        -webkit-border-top-left-radius: 4px;
        -moz-border-radius-topright: 4px;
        -moz-border-radius-bottomright: 4px;
        -moz-border-radius-bottomleft: 4px;
        -moz-border-radius-topleft: 4px;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
        border-top-left-radius: 4px;
        -moz-background-clip: padding-box;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        background-color: #ffffff;
        border: 0px;
        padding: 10px;
        margin: 0; }
      .header1 .secondary-row.filter-options .filter-form input[type="text"] {
        padding-right: 0; }
    .header1 .secondary-row .filters {
      padding: 0px; }
      .header1 .secondary-row .filters li {
        display: inline-block;
        font-weight: 500;
        background-color: #ececec;
        position: relative;
        margin: 0 0 0 10px;
        color: #aaaaaa;
        overflow: visible;
        height: 27px; }
        .header1 .secondary-row .filters li .filter-background {
          background-color: #ffffff;
          height: 36px;
          padding-right: 28px;
          display: inline-block;
          position: relative; }
        .header1 .secondary-row .filters li .filter-name {
          position: absolute;
          top: -11px;
          left: 1px;
          color: #aaaaaa;
          font-size: 9px;
          text-transform: uppercase;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          width: 100%; }
        .header1 .secondary-row .filters li .filter-remove {
          -webkit-transition: color 100ms ease-in-out;
          -moz-transition: color 100ms ease-in-out;
          -o-transition: color 100ms ease-in-out;
          -ms-transition: color 100ms ease-in-out;
          transition: color 100ms ease-in-out;
          color: #aaaaaa;
          position: absolute;
          right: 0px;
          top: 6px;
          margin: 0 2px 0 -25px;
          cursor: pointer; }
          .header1 .secondary-row .filters li .filter-remove:hover {
            color: #c1272d; }
        .header1 .secondary-row .filters li .simple-select {
          -webkit-box-shadow: none !important;
          -moz-box-shadow: none !important;
          box-shadow: none !important; }
        .header1 .secondary-row .filters li input {
          width: 120px;
          background-color: #ffffff;
          color: #666666;
          padding: 7px 0 0 7px; }
          .header1 .secondary-row .filters li input[type="checkbox"] {
            width: 20px;
            margin: 12px 0 0 10px; }
          .header1 .secondary-row .filters li input[type="date"] {
            max-width: 120px;
            width: 120px;
            margin-right: 20px; }
    .header1 .secondary-row li {
      font-size: 14px; }
    .header1 .secondary-row .vertical-center {
      margin-top: 7px; }
    .header1 .secondary-row .pagination-number {
      margin-top: 11px; }
    .header1 .secondary-row .action {
      display: inline-block;
      color: #666666;
      cursor: pointer; }
      .header1 .secondary-row .action.delete {
        color: #c1272d; }
      .header1 .secondary-row .action.inactive {
        color: #aaaaaa; }
    .header1 .secondary-row .text-spacer {
      padding: 0px 10px; }
    .header1 .secondary-row .tools {
      font-size: 14px; }
      .header1 .secondary-row .tools .snapshotOption {
        background-color: #ffffff;
        width: 34px;
        height: 33px;
        color: #666666;
        text-align: center;
        cursor: pointer; }
        .header1 .secondary-row .tools .snapshotOption .icon {
          line-height: 75%; }

@keyframes tox-1-on {
  0% {
    left: 0px;
    top: 0px; }
  50% {
    left: 0px;
    top: 7px;
    transform: rotateZ(0deg); }
  100% {
    left: 0px;
    top: 7px;
    transform: rotateZ(45deg); } }

@keyframes tox-2-on {
  0% {
    left: 0px;
    top: 7px; }
  50% {
    left: 0px;
    top: 7px;
    transform: rotateZ(0deg); }
  100% {
    left: 0px;
    top: 7px;
    transform: rotateZ(45deg); } }

@keyframes tox-3-on {
  0% {
    left: 0px;
    top: 14px; }
  50% {
    left: 0px;
    top: 7px;
    transform: rotateZ(0deg); }
  100% {
    left: 0px;
    top: 7px;
    transform: rotateZ(-45deg); } }

@keyframes tox-1-off {
  0% {
    left: 0px;
    top: 7px;
    transform: rotateZ(45deg); }
  50% {
    left: 0px;
    top: 7px;
    transform: rotateZ(0deg); }
  100% {
    left: 0px;
    top: 0px; } }

@keyframes tox-2-off {
  0% {
    left: 0px;
    top: 7px;
    transform: rotateZ(45deg); }
  50% {
    left: 0px;
    top: 7px;
    transform: rotateZ(0deg); }
  100% {
    left: 0px;
    top: 7px; } }

@keyframes tox-3-off {
  0% {
    left: 0px;
    top: 7px;
    transform: rotateZ(-45deg); }
  50% {
    left: 0px;
    top: 7px;
    transform: rotateZ(0deg); }
  100% {
    left: 0px;
    top: 14px; } }

@media only screen and (max-width: 800px) {
  #main.sidebar-active #sidebar {
    left: 0 !important; }
  #main.sidebar-active .main-container {
    margin-left: 170px; }
  #main.sidebar-active .responsive-nav-toggle .line-1 {
    animation-name: tox-1-on;
    -webkit-animation-name: tox-1-on; }
  #main.sidebar-active .responsive-nav-toggle .line-2 {
    animation-name: tox-2-on;
    -webkit-animation-name: tox-2-on; }
  #main.sidebar-active .responsive-nav-toggle .line-3 {
    animation-name: tox-3-on;
    -webkit-animation-name: tox-3-on; }
  .responsive-nav-toggle {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 21px;
    float: left;
    margin-top: 12px;
    margin-right: 20px;
    cursor: pointer; }
    .responsive-nav-toggle:hover .hamburger-line {
      background-color: #666666; }
    .responsive-nav-toggle .hamburger-line {
      position: absolute;
      background-color: #aaaaaa;
      height: 2px;
      width: 30px;
      animation-duration: 600ms;
      -webkit-animation-duration: 600ms;
      -webkit-animation-iteration-count: 1;
      animation-fill-mode: forwards;
      -webkit-animation-fill-mode: forwards;
      transform: rotateZ(0deg);
      -webkit-transition: 600ms ease-in-out;
      -moz-transition: 600ms ease-in-out;
      -o-transition: 600ms ease-in-out;
      transition: 600ms ease-in-out; }
    .responsive-nav-toggle .line-1 {
      top: 0;
      left: 0px;
      animation-name: tox-1-off;
      -webkit-animation-name: tox-1-off; }
    .responsive-nav-toggle .line-2 {
      top: 5px;
      left: 0px;
      animation-name: tox-2-off;
      -webkit-animation-name: tox-2-off; }
    .responsive-nav-toggle .line-3 {
      top: 10px;
      left: 0px;
      animation-name: tox-3-off;
      -webkit-animation-name: tox-3-off; }
  #sidebar {
    left: -170px !important; }
  .cards .card {
    width: 150px; }
    .cards .card .header-image {
      width: 150px;
      height: 150px; }
      .cards .card .header-image img {
        width: 150px !important;
        height: 150px !important; }
  .set-columns {
    top: 125px !important;
    right: 20px !important; }
  .main-container {
    margin-left: 0px;
    padding: 0px 20px; }
    .main-container .header1 {
      padding-top: 20px;
      padding-bottom: 10px;
      min-height: 60px;
      margin-bottom: 0; }
      .main-container .header1 .navigation-back {
        display: inline-block; }
      .main-container .header1 .navigation-breadcrumb {
        display: none; }
      .main-container .header1 h1 {
        font-size: 24px; }
        .main-container .header1 h1 .breadcrumb-delimiter {
          line-height: 20px;
          margin: 0px 5px; }
        .main-container .header1 h1 .icon {
          line-height: 22px; }
      .main-container .header1 .primary-row .tools {
        margin-top: 0; }
      .main-container .header1 .pagination-number {
        display: none; }
      .main-container .header1 #save .simple-select {
        display: none; }
      .main-container .header1 .secondary-row {
        display: none; }
      .main-container .header1 #tools-right-insert {
        display: none; }
  .content-body {
    margin-top: 70px !important; }
  .two-column-form .fields .table .trow .label, .two-column-form .fields .table .trow .field {
    display: block; }
  .two-column-form .fields .field {
    padding: 10px 30px 30px 30px; }
  .two-column-form .fields .label {
    width: 100%;
    padding: 30px 30px 10px 30px; }
  .bar-date {
    display: none; }
  .history-container ul .history-add-comment {
    padding-right: 20px; }
  .history-container ul li {
    padding-right: 70px; }
  .feature-cards .feature-card {
    height: 60px; }
    .feature-cards .feature-card .left-col {
      width: 100px; }
      .feature-cards .feature-card .left-col .material-icons, .feature-cards .feature-card .left-col .custom-check input[type="checkbox"] + label span:before, .custom-check input[type="checkbox"] + label .feature-cards .feature-card .left-col span:before, .feature-cards .feature-card .left-col .custom-check input[type="radio"] + label span:before, .custom-check input[type="radio"] + label .feature-cards .feature-card .left-col span:before, .feature-cards .feature-card .left-col
      input[type="checkbox"].custom-check + label span:before,
      input[type="checkbox"].custom-check + label .feature-cards .feature-card .left-col span:before, .feature-cards .feature-card .left-col input[type="radio"].custom-check + label span:before, input[type="radio"].custom-check + label .feature-cards .feature-card .left-col span:before {
        font-size: 70px;
        line-height: 100px; }
    .feature-cards .feature-card .right-col {
      margin-left: 80px; }
      .feature-cards .feature-card .right-col h2 {
        margin-top: 15px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden; }
      .feature-cards .feature-card .right-col p {
        display: none; }
  .invisible-blocker.sidebar-active #page-blocker-smoke {
    left: 170px; }
  .invisible-blocker #page-blocker-smoke {
    left: 0; } }

.login-box {
  -webkit-transition: all 100ms ease-in-out;
  -moz-transition: all 100ms ease-in-out;
  -o-transition: all 100ms ease-in-out;
  -ms-transition: all 100ms ease-in-out;
  transition: all 100ms ease-in-out;
  opacity: 1;
  left: 50%;
  margin-left: -175px;
  margin-top: -170px;
  position: absolute;
  top: 50%;
  width: 350px;
  text-align: center; }
  .login-box button[type="submit"] {
    float: right;
    min-width: 150px;
    font-size: 14px;
    background: #4ca6de;
    color: #ffffff; }
    .login-box button[type="submit"]:hover {
      background-color: #1f72a5; }
    .login-box button[type="submit"]:active {
      background-color: #17547a; }
  .login-box p.error {
    background-color: #aaaaaa;
    padding: 10px 10px 7px 10px;
    color: #ffffff;
    font-weight: 500;
    text-align: center;
    display: inline-block;
    margin: 20px auto;
    text-transform: uppercase;
    font-size: 12px; }
    .login-box p.error .material-icons, .login-box p.error .custom-check input[type="checkbox"] + label span:before, .custom-check input[type="checkbox"] + label .login-box p.error span:before, .login-box p.error .custom-check input[type="radio"] + label span:before, .custom-check input[type="radio"] + label .login-box p.error span:before, .login-box p.error
    input[type="checkbox"].custom-check + label span:before,
    input[type="checkbox"].custom-check + label .login-box p.error span:before, .login-box p.error input[type="radio"].custom-check + label span:before, input[type="radio"].custom-check + label .login-box p.error span:before {
      margin-right: 5px;
      font-size: 22px;
      vertical-align: middle;
      margin-top: -4px;
      color: #ffffff; }
  .login-box p.message {
    color: green;
    margin: 0;
    padding: 15px 0 0 10px;
    text-align: center; }
    .login-box p.message .material-icons, .login-box p.message .custom-check input[type="checkbox"] + label span:before, .custom-check input[type="checkbox"] + label .login-box p.message span:before, .login-box p.message .custom-check input[type="radio"] + label span:before, .custom-check input[type="radio"] + label .login-box p.message span:before, .login-box p.message
    input[type="checkbox"].custom-check + label span:before,
    input[type="checkbox"].custom-check + label .login-box p.message span:before, .login-box p.message input[type="radio"].custom-check + label span:before, input[type="radio"].custom-check + label .login-box p.message span:before {
      vertical-align: middle;
      padding-right: 10px; }

.directus-version {
  position: fixed;
  left: 10px;
  bottom: 10px;
  color: #666666;
  cursor: help;
  font-size: 10px;
  font-family: "Lucida Console", Monaco, monospace; }

.login-panel {
  background-color: #ffffff;
  padding: 30px;
  position: relative; }
  .login-panel input {
    -webkit-transition: all 100ms ease-in-out;
    -moz-transition: all 100ms ease-in-out;
    -o-transition: all 100ms ease-in-out;
    -ms-transition: all 100ms ease-in-out;
    transition: all 100ms ease-in-out;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    display: block;
    padding: 14px;
    font-size: 14px;
    outline: none;
    resize: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 16px;
    letter-spacing: 0.02em;
    font-weight: 400;
    width: 100%;
    color: #666666; }
    .login-panel input:focus {
      color: #333333;
      border-color: #4ca6de; }
    .login-panel input:first-child {
      margin-bottom: 20px; }
  .login-panel p {
    position: relative;
    margin: 0 0 10px 0; }
    .login-panel p.no-margin {
      margin: 0; }
    .login-panel p #forgot-password {
      -webkit-transition: all 100ms ease-in-out;
      -moz-transition: all 100ms ease-in-out;
      -o-transition: all 100ms ease-in-out;
      -ms-transition: all 100ms ease-in-out;
      transition: all 100ms ease-in-out;
      background: transparent;
      border: none;
      padding: 0px;
      position: absolute;
      right: 10px;
      top: 12px;
      color: #d0d0d0; }
      .login-panel p #forgot-password .material-icons, .login-panel p #forgot-password .custom-check input[type="checkbox"] + label span:before, .custom-check input[type="checkbox"] + label .login-panel p #forgot-password span:before, .login-panel p #forgot-password .custom-check input[type="radio"] + label span:before, .custom-check input[type="radio"] + label .login-panel p #forgot-password span:before, .login-panel p #forgot-password
      input[type="checkbox"].custom-check + label span:before,
      input[type="checkbox"].custom-check + label .login-panel p #forgot-password span:before, .login-panel p #forgot-password input[type="radio"].custom-check + label span:before, input[type="radio"].custom-check + label .login-panel p #forgot-password span:before {
        font-size: 24px; }
      .login-panel p #forgot-password:hover {
        color: #4ca6de; }

.message .message-content {
  margin-left: 40px; }
  .message .message-content .title {
    font-weight: 400;
    font-size: 16px;
    margin-bottom: 2px; }
  .message .message-content .users {
    font-weight: 400;
    font-size: 14px;
    margin-bottom: 4px; }
  .message .message-content .subject {
    color: #aaaaaa;
    font-size: 14px;
    font-weight: 400; }

.message.unread {
  background-color: #ffffff;
  color: #666666; }
  .message.unread .message-content .title {
    font-weight: 500; }
  .message.unread .message-content .users {
    font-weight: 500; }
  .message.unread .general-datetime {
    font-weight: 500;
    color: #666666; }

.message-recipients .avatar {
  height: 40px;
  float: none;
  margin-left: 10px;
  margin-right: 0;
  vertical-align: middle; }

ul.general-container {
  background-color: whitesmoke;
  color: gray;
  padding: 0; }
  ul.general-container.selectable li:hover {
    background-color: #f8fcfe;
    cursor: pointer; }
  ul.general-container li {
    position: relative;
    padding: 20px;
    border-top: 1px solid #ececec;
    min-height: 40px;
    padding-right: 150px;
    list-style: none; }
    ul.general-container li:first-child {
      border-top: none; }
    ul.general-container li .check-box {
      bottom: 0px;
      position: absolute;
      top: 0px; }
      ul.general-container li .check-box input + label {
        margin-top: -11px;
        position: absolute;
        top: 50%; }
    ul.general-container li .avatar {
      float: none;
      position: absolute;
      top: 20px;
      left: 0;
      width: 40px;
      height: 40px; }
    ul.general-container li .general-datetime {
      color: #aaaaaa;
      position: absolute;
      top: 44px;
      right: 20px; }
    ul.general-container li .general-icon {
      position: absolute;
      top: 20px;
      left: 0;
      width: 40px;
      height: 40px;
      color: #ffffff; }
      ul.general-container li .general-icon.add {
        background-color: #7ac943; }
        ul.general-container li .general-icon.add .icon {
          position: absolute;
          top: 0;
          left: 12px; }
      ul.general-container li .general-icon.edit {
        background-color: #3fa9f5; }
        ul.general-container li .general-icon.edit .icon {
          position: absolute;
          top: 1px;
          left: 12px; }
      ul.general-container li .general-icon.delete {
        background-color: #c1272d; }
        ul.general-container li .general-icon.delete .icon {
          position: absolute;
          top: 0;
          left: 11px; }
      ul.general-container li .general-icon.message {
        background-color: #a63c96; }
        ul.general-container li .general-icon.message .icon {
          position: absolute;
          top: 1px;
          left: 10px; }
      ul.general-container li .general-icon.attach {
        background-color: #ff7bac; }
        ul.general-container li .general-icon.attach .icon {
          position: absolute;
          top: 1px;
          left: 10px; }
      ul.general-container li .general-icon.login {
        background-color: #5b5b5b; }
        ul.general-container li .general-icon.login .icon {
          position: absolute;
          top: 1px;
          left: 12px; }