/*
 * Copyright 2017 Hoy App
 * Created by Thomas Schoffelen
 */

/* --- General --- */

@font-face {
    font-family: hoy;
    font-weight: normal;
    font-style: normal;
    src: url("/static/fonts/hoy-bold.woff") format("woff");
}

html,
body {
    font-family: Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    line-height: 1.5;
}

body {
    padding-top: 0 !important;
    background: #fff url("/static/ui/background.svg") no-repeat fixed 100% 100%;
    color: #000;
}

hr {
    border-top-color: #e5e5e5;
    border-bottom: 0;
}

h1,
h2,
.sidebar h3,
.back-button,
.euclid,
.big-button,
.box-header,
input.header-input[type="text"],
.box.article .overlay .container .link,
span.subject-field-name,
a.btn.btn-bigger.btn-iconned,
div#driver-popover-item .driver-popover-title,
.question-answer .parents .user-image.combined,
.user-image,
.images-stack > *,
.question-header,
.tabs-bar a {
    font-weight: normal !important;
    font-family: hoy, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

h3 {
    font-weight: bold;
}

.site_i .f {
    display: none;
}

a {
    color: #3eadf9;
}

a.disabled {
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: none;
}

button {
    font-family: Avenir, sans-serif;
    font-size: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

button:disabled {
    cursor: auto;
}

/* --- Layout --- */

.app-navigation {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 260px;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    user-select: none;
    z-index: 50;
    transition: 0.5s ease;
}

.app-content-container {
    margin-left: 260px;
    margin-top: 40px;
}

.app-header {
    height: 40px;
    position: absolute;
    left: 260px;
    top: 0;
    right: 0;
    background: #d4d4d4;
    padding: 0 48px;
    line-height: 40px;
    color: #fff;
    z-index: 100;
    user-select: none;
    transition: 0.5s ease left, 0.2s linear background-image, 0.2s linear background-color, 0.5s linear background-position;
    -webkit-transition: 0.5s ease left, 0.2s linear background-image, 0.2s linear background-color, 0.5s linear background-position;
}

/* --- Header internals--- */

.app-header.has-toast {
    background-position: 0 -100%;
}

.app-toast {
    transition: 0.5s ease height;
    height: 0;
    overflow: hidden;
}

.has-toast .app-toast {
    height: 40px;
}

.app-updates {
    transition: 0.5s ease height;
    height: 40px;
    overflow: hidden;
}

.has-toast .app-updates {
    height: 0;
}

.app-updates .updates {
    float: right;
}

.app-updates .updates a {
    display: inline-block;
    height: 40px;
    color: #fff;
}

.app-updates .updates i {
    float: left;
    font-size: 22px;
    line-height: 40px;
    padding-right: 10px;
    padding-left: 25px;
}

.app-updates .updates p {
    float: right;
    font-family: Avenir, sans-serif;
    font-size: 12px;
    line-height: 40px;
}

.app-loading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 7999;
    background-color: #2bcd75;
    background-image: linear-gradient(90deg, #2bcd75 19%, #25c17d 96%) !important;
}

.app-loading h1 {
    font-size: 40px;
    font-weight: 100;
    line-height: 1.4;
    color: #fff;
}

/* --- Navigation --- */

nav ul,
nav ul li {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav ul li a {
    display: block;
    text-decoration: none !important;
}

.nav-main li a,
.nav-bottom li a,
.driver-current-item {
    line-height: 60px;
    color: #6a7074;
    font-size: 16px;
    font-weight: 500;
}

.nav-main li a i,
.nav-bottom li a i,
.driver-current-item i {
    float: left;
    margin: 18px 32px 0 36px;
    color: #bfc4c8;
}

.nav-main li a.active {
    background-color: #edf1f1;
    color: #96a5a5;
    font-weight: 600;
}

.nav-main li a.active i {
    color: #96a5a5;
}

.nav-bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #edf1f1;
}

.logo {
    display: flex;
    padding: 31px 14px 31px 27px;
}

.logo-circle {
    width: 42px;
    height: 42px;
    border-radius: 21px;
    background: #fff no-repeat center;
    background-size: contain;
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    float: left;
}

.logo-name {
    padding: 0;
    margin: 0 0 0 18px;
    line-height: 42px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 42px;
    font-size: 17px;
}

.news-hidden {
    opacity: 0.5;
}

/* --- Content --- */

.app-content {
    position: relative;
    padding: 48px;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: calc(100vh - 136px);
}

.app-content-inner {
    max-width: 960px;
    margin: 0 auto;
}

.app-content header {
    padding: 48px 48px 24px;
    margin: -48px -48px 24px;
    border-bottom: 1px solid #e5e5e5;
    position: relative;
    user-select: none;
}

.app-content header.has-sidebar {
    margin-right: 320px;
}

.app-content header.style-large .header-background {
    position: absolute;
    left: -1024px;
    right: -1024px;
    top: 0;
    bottom: 0;
    z-index: 1;
}

.app-content-container .app-header .app-content-inner {
    padding-bottom: 0;
}

.header-pattern header.style-large .header-background {
    transform: scaleY(-1);
}

.header-pattern header.style-large.has-image .header-background {
    transform: none;
}

.app-content header.style-large.has-image .header-background {
    background-color: #333 !important;
}

.app-content header.style-large .header-background .header-image {
    height: 100%;
    width: 100%;
    opacity: 0.6;
    background: transparent no-repeat center;
    -webkit-background-size: cover;
    background-size: cover;
}

header.has-image .back-button,
.window .back-button {
    padding: 10px;
    top: -34px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    margin-left: -10px;
}

.app-content header > * {
    position: relative;
    z-index: 3;
}

.app-content header > h1 {
    z-index: 2;
}

.app-content header:after {
    content: "";
    position: absolute;
    height: 0;
    left: -500px;
    right: -500px;
    background: #fff;
    bottom: -1px;
    border-bottom: 1px solid #e5e5e5;
    z-index: 1;
}

.app-content .box {
    margin-top: 8px;
    padding: 20px 30px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    margin-bottom: 20px;
    border-radius: 4px;
    background-color: #fff;
}

/* --- Typography --- */

.app-content h1 {
    font-size: 40px;
    line-height: 52px;
    padding: 0;
    margin: 0;
    color: #000;
}

.app-content h2,
.box .title {
    font-size: 26px;
    line-height: 34px;
    letter-spacing: -0.7px;
    margin: 0 0 10px;
}

.app-content .timestamp,
.checkbox {
    text-transform: uppercase;
    font-size: 12px;
    line-height: 16px;
    font-weight: 900;
    text-align: left;
    color: #9e9e9e;
}

.app-content .timestamp {
    margin-bottom: 16px;
}

.app-content .box.article .label {
    background-color: rgba(0, 0, 0, 0.6);
    font-weight: normal;
}

.app-content .box.article .label.right {
    margin-top: 5px;
    float: right;
    display: flex;
    vertical-align: middle;
}

.app-content .box.article .label.right i {
    margin-left: 2px;
}

.box .title,
.box .excerpt {
    display: block;
}

.box.article {
    background: #ff9800 url("/static/ui/background.svg") no-repeat 100% 100%;
    background-size: 320px;
    text-decoration: none !important;
    cursor: pointer;
    position: relative;
}

.box.article .pinned-icon {
    color: #fdd834;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 10;
}

.box.article .overlay {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 3px;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(1px);
}

.box.article:hover .overlay {
    display: inline;
}

.box.article .overlay .container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.box.article .overlay .container .link {
    font-size: 18px;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.56;
    letter-spacing: -0.3px;
    text-align: center;
    color: #fff;
}

.box.article .overlay .options {
    width: 100%;
    position: absolute;
    bottom: 0;
}

.box.article .overlay .options a, .hover-items .options a {
    height: 19px;
    width: 100%;
    position: relative;
    display: block;
}

.box.article .overlay .options div, .hover-items .options div {
    font-size: 9px;
    font-weight: 900;
    line-height: 19px;
    height: 19px;
    text-transform: uppercase;
    color: #000;
    float: right;
    padding-left: 2px;
    padding-right: 4px;
}

.box.article .overlay .options .icon, .hover-items .options .icon {
    font-size: 14px;
    line-height: 19px;
    height: 19px;
    display: inline-block;
    padding-left: 4px;
}

.box.article .overlay .options .btnpin .icon {
    color: #ff9800;
}

.box.article .overlay .options .btnhide .icon {
    color: #e24935;
}

.hover-items .options .btnfollow .icon {
    color: #ff9800;
}

.hover-items .options .btnarchive .icon {
    color: #bfc4c8;
}

.hover-items .options .btndelete .icon {
    color: #e24935;
}

.hover-items .options .btnexport .icon {
    color: #f49814;
}

.hover-items .options .btnclose .icon {
    color: #39a4ed;
}

.hover-items .options .btnreuse .icon {
    color: #f49814;
}

.item .hover-items {
    visibility: hidden;
}

.item:hover .hover-items {
    visibility: visible;
}

.being-sent {
    opacity: 0.4;
}

.box.article .overlay .options span, .hover-items .options span {
    float: right;
    height: 19px;
    border-radius: 3px;
    background-color: #edf1f1;
    margin-bottom: 12px;
}

.box.article .overlay .options .btnpin {
    margin-right: 5px;
}

.box.article .overlay .options .btnhide {
    margin-right: 12px;
}

.hover-items .options .btnfollow {
    margin-right: 8px;
}

.hover-items .options .btnarchive {
    margin-right: 10px;
}

.hover-items .options .btndelete {
    margin-right: 5px;
}

.hover-items .options .btnexport {
    margin-right: 5px;
}

.hover-items .options .btnclose {
    margin-right: 5px;
}

.hover-items .options .btnreuse {
    margin-right: 5px;
}

.box.article .title,
.box.article .excerpt {
    color: #fff;
    margin-bottom: 0;
    padding-top: 5px;
}

.box.article .title {
    font-family: hoy, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.box.article.source-facebook:after {
    position: absolute;
    right: 14px;
    top: 14px;
    height: 12px;
    width: 100px;
    content: "";
    background: transparent no-repeat url("../ui/feeds/mark/facebook.svg") top right;
    background-size: contain;
}

.box.article .excerpt {
    font-size: 18px;
    line-height: 23px;
    letter-spacing: -0.2px;
}

.box.article--small {
    background: none;
    padding: 0;
    display: flex;
    flex-direction: row;
    box-shadow: none;
}

.article__content {
    position: relative;
    z-index: 100;
}

.article .overlay {
    z-index: 200;
}

.box.article::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .25) 40%, transparent 100%);
    border-radius: 10px;
}

.box.article--small::after {
    display: none;
}

.box.article--small .title {
    font-size: 1.25rem;
}

.box .box-header {
    display: block;
    margin: -20px -30px 20px;
    padding: 14px 24px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    color: inherit;
    text-decoration: none !important;
}

.box .box-header i {
    float: right;
    margin-top: 6px;
}

.box .box-header .title {
    margin: 0;
    font-size: 24px;
}

.box .box-header .legend-bullet {
    float: right;
    color: #8e8e8e;
    font-weight: 400;
    font-family: Avenir, sans-serif;
    line-height: 16px;
    padding-top: 10px;
}

.box .box-header .legend-bullet:before {
    content: '';
    display: inline-block;
    float: left;
    margin-right: 8px;
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background: #bfc4c7;
}

.box .box-header.green,
.box .box-header.orange,
.box .box-header.blue,
.box .box-header.gray {
    background: no-repeat url("../ui/background.svg") 100% 100%;
    background-size: 320px;
    color: #fff;
}

.box .box-header.green {
    background-color: #2bcd75;
}

.box .box-header.orange {
    background-color: #ff9800;
}

.box .box-header.blue {
    background-color: #35bbfc;
}

.box .box-header.gray {
    background-color: #c5c5c5;
}

.items .item {
    display: block;
    text-decoration: none;
    cursor: pointer;
    color: #000;
    min-height: 24px;
    padding: 16px 0;
    border-bottom: 1px solid #e5e5e5;
}

.items .item:first-child {
    padding-top: 8px;
}

.items .item:last-child {
    padding-bottom: 8px;
    border-bottom: 0;
}

.items .item.more {
    text-align: center;
    color: #bfc4c8;
    font-weight: bold;
    line-height: 24px;
    padding: 20px;
}

.items .item.more i {
    font-size: 16px;
    line-height: 16px;
    position: relative;
    font-weight: bold;
    top: 3px;
}

.items .item a {
    color: #000;
}

.items .item .title {
    font-size: 18px;
    font-weight: bold;
    line-height: 24px;
    margin-bottom: 3px;
}

.items .item .title,
.items .item .details {
    display: block;
}

.items .item .title i {
    float: left;
    margin-right: 7px;
    font-size: 18px;
    margin-top: 3px;
}

.items .item .details i {
    font-size: 12px;
}

.task-progress-mini {
    line-height: 20px;
    font-size: 14px;
    font-weight: 500;
}

.task-progress-check {
    width: 20px;
    height: 20px;
    line-height: 20px;
    background-color: #bfc4c8;
    border-radius: 10px;
    text-align: center;
    display: inline-block;
    position: relative;
    overflow: hidden;
    margin-left: 12px;
    margin-right: 6px;
    top: 4px;
}

.task-progress-check i {
    font-size: 16px;
    margin-top: 2px;
    color: #fff;
    font-weight: 900;
    position: relative;
    z-index: 4;
}

.task-progress-check .fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 3;
    background: #2dc222;
}

.items .item .details .label {
    margin-left: 7px;
    font-size: 10px;
    padding: 2px 5px;
    line-height: 12px;
    position: relative;
    top: -2px;
}

.items .item .user-image {
    float: left;
    margin-right: 10px;
    position: relative;
    top: -1px;
}

.inbox-row-content {
    display: flex;
    align-items: center;
}

.inbox-row-content .user-image {
    width: 44px;
    height: 44px;
    min-width: 44px;
    flex-basis: 44px;
    border-radius: 22px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.inbox-row-meta {
    margin-left: 8px;
}

.inbox-row-meta .title {
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.inbox-row-meta .title .material-icons {
    float: inherit !important;
    display: inline-block !important;
}

.messages-group-sidebar .items .item.active .title .material-icons {
    color: #fff !important;
}

/* --- Tabs --- */

.tabs {
    margin: -48px;
    position: relative;
    z-index: 5;
}

.tabs-bar {
    padding: 0 48px;
    height: 32px;
    border-bottom: 1px solid #e5e5e5;
    position: relative;
    z-index: 6;
}

.tabs-bar a {
    display: inline-block;
    color: #aaa;
    text-decoration: none !important;
    line-height: 24px;
    height: 31px;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 2px solid transparent;
    margin-right: 23px;
    margin-left: 2px;
    cursor: pointer;
}

.tabs-bar a.active {
    border-bottom-color: #aaa;
    color: #293344;
}

.tab-content {
    padding: 24px 48px 48px;
    overflow: visible;
}

header + .tabs {
    margin-top: -38px;
}

.tabs:after {
    content: "";
    position: absolute;
    height: 32px;
    left: -500px;
    right: -500px;
    background: #fff;
    top: 0;
    border-bottom: 1px solid #e5e5e5;
    z-index: 2;
}

/* --- User image --- */

.user-image,
.images-stack > * {
    height: 26px;
    width: 26px;
    border-radius: 20px;
    background: #e5e5e5 no-repeat center;
    background-size: cover;
    overflow: hidden;
    text-align: center;
    color: #fff;
}

.avatar {
    width: 44px;
    height: 44px;
    border-radius: 22px;
    background: #e5e5e5 no-repeat center;
    background-size: cover;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.progress-parents {
    height: 6px;
    width: 100px;
    float: left;
    margin: 10px 10px 0 0;
    background: #dce2e6;
}

.progress.progress-parents .bar {
    background: #3fc97c;
}

.images-stack {
    height: 30px;
}

.images-stack.pull-right {
    margin-left: 16px;
    margin-top: 12px;
}

.images-stack > * {
    margin: 0 0 0 -6px;
    border: 2px solid #fff;
    float: left;
}

.images-stack > *:first-child {
    margin-left: 0;
}

/* --- Modal windows --- */

.window {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

.window .backdrop {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 1001;
}

.window .back-button {
    position: static;
    top: 0;
    margin-left: 0;
    margin-bottom: 16px;
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.5);
}

.window .content-inner {
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
    padding: 48px 0;
    position: relative;
    z-index: 1002;
    -webkit-overflow-scrolling: touch;
}

.window .content-inner .inner {
    background: #fff;
    min-height: 320px;
    border-radius: 4px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
    overflow: hidden;
    padding: 24px;
}

.window.recipient-selector-modal .content-inner .inner {
    overflow: auto;
}

.window.recipient-selector-modal .content-inner {
    width: 643px;
}

.window .conversation-info {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    width: 300px;
    padding: 24px;
    box-sizing: border-box;
    background-color: #fafafa;
}

.conversation-info .user-image {
    float: left;
    margin-right: 16px;
    position: relative;
    top: -1px;
    width: 44px;
    height: 44px;
    border-radius: 22px;
}

.conversation-info .conversation-user {
    font-size: 18px;
    font-weight: bold;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    line-height: 22px;
    max-height: 44px;
    overflow: hidden;
}

.conversation-info .conversation-user-profile {
    text-decoration: none;
    color: #ccc;
    line-height: 20px;
    text-align: center;
    user-select: none;
    font-weight: bold;
}

.conversation-info .conversation-user-profile i {
    font-size: 14px;
    line-height: 14px;
    position: relative;
    top: 1px;
}

.conversation-info .user-info div h5 {
    color: #8e8e8e;
    font-weight: 400;
    font-size: 14px;
    margin-bottom: 0;
}

.conversation-info .user-info div span {
    color: #000;
    font-weight: normal;
    font-size: 14px;
    margin-bottom: 0;
}

.conversation-info .recent-conversations a {
    display: flex;
    text-decoration: none;
    color: #000;
    margin-bottom: 5px;
}

.conversation-info .recent-conversations h5 {
    width: 230px;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    margin: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.conversation-info .recent-conversations i {
    font-size: 16px;
    line-height: 20px;
    margin: 0;
}

.window .conversation {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 300px;
    box-shadow: 2px 0 3px 0 rgba(0, 0, 0, 0.05);
    z-index: 1004;
}

.conversation.group {
    right: 0;
    box-shadow: none;
}

.window .conversation-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    padding: 24px;
}

.window .conversation-header h2 {
    height: 28px;
    line-height: 28px;
    margin-top: -2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 12px;
    color: #000;
}

.window .conversation-header .button {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 4px;
    background-color: #edf1f1;
    line-height: 13px;
    font-size: 11px;
    height: 12px;
    overflow: hidden;
    text-transform: uppercase;
    color: #000 !important;
    font-weight: 900;
    margin-right: 8px;
    cursor: pointer;
    text-decoration: none !important;
}

.window .conversation-header .button .material-icons {
    font-size: 12px;
    float: left;
    margin-right: 8px;
}

.window .conversation-inner {
    position: absolute;
    top: 108px;
    left: 0;
    right: 0;
    bottom: 70px;
    padding: 0 24px 24px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.window .inner {
    position: relative;
    height: 75%;
    background-color: #fafafa;
}

.conversation-composer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    min-height: 70px;
    background-color: #edf1f1;
    z-index: 1010;
    box-sizing: border-box;
    padding: 16px 24px;
}

.textarea--ghost {
    opacity: 0;
    display: block;
    white-space: pre-wrap;
    padding: 0 44px 0 16px !important;
    line-height: 20px;
    word-wrap: break-word;
    visibility: hidden;
    position: absolute;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    top: -1000px;
    pointer-events: none;
}

.conversation-input-container {
    display: block;
    float: right;
    position: relative;
    width: calc(100% - 40px);
}

.conversation-input {
    display: block;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    min-height: 38px;
    max-height: 120px;
    line-height: 20px;
    border: solid 1px #d5dbdb !important;
    transition: height 0.2s ease;
    border-radius: 20px !important;
    padding: 9px 44px 9px 16px !important;
    margin-bottom: 0 !important;
}

.conversation-send {
    position: absolute;
    bottom: 21px;
    right: 30px;
    border-radius: 14px;
    background: #2bb7fc;
    width: 28px;
    height: 28px;
}

.conversation-send .material-icons {
    font-size: 16px;
    margin-left: 7px;
    margin-top: 6px;
    color: #fff;
}

/* --- Utility --- */

.block {
    display: block;
}

.relative {
    position: relative;
}

.align-bottom {
    display: block;
    padding-top: 32px;
}

/* --- Sidebar --- */

.sidebar {
    float: right;
    margin-top: -88px;
    position: relative;
    z-index: 10;
    width: 265px;
    user-select: none;
}

.sidebar-block {
    margin-top: 20px;
    width: 265px;
    padding: 16px 24px 24px;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
}

.sidebar-block > h3:first-child {
    margin-top: 0;
    display: inline-block;
}

.sidebar-dropdown.sidebar-open {
    position: absolute;
    left: 0;
    top: 0;
}

.sidebar-dropdown > i.material-icons:first-of-type {
    float: right;
    font-size: 30px;
    line-height: 40px;
    user-select: none;
    cursor: pointer;
}

.sidebar .option {
    padding: 12px 0;
    border-bottom: 1px solid #ddd;
    line-height: 24px;
    font-weight: 500;
    text-decoration: none !important;
    color: #000;
    display: block;
    cursor: pointer;
}

.option .date-option {
    cursor: pointer;
}

.option .newsgroup-option {
    cursor: pointer;
}

.newsgroup-option .newsgroups {
    margin-top: 4px;
    padding-left: 36px;
}

.newsgroup-option .newsgroups .newsgroup {
    width: 100%;
    color: black;
}

.newsgroup-option .newsgroups .newsgroup div {
    display: table;
    padding: 5px;
    border-radius: 5px;
}

.newsgroup-option .newsgroups .newsgroup.active div {
    color: white;
    background-color: #f4991a;
}

.newsgroup-option .newsgroups .newsgroup:hover:not(.active) div {
    padding: 5px;
    border-radius: 5px;
    background-color: rgba(244, 153, 26, 0.3);
}

.sidebar .option label {
    font-size: 15px;
    font-weight: 500;
}

.sidebar .option.last {
    border-bottom: 0;
}

.sidebar div.option {
    cursor: default;
}

.sidebar .option.last + h3 {
    margin-top: 24px;
}

.sidebar .option .material-icons {
    float: left;
    margin-right: 12px;
}

.sidebar .option .subtext {
    display: block;
    padding-left: 36px;
    color: #f4991a;
    font-size: 13px;
    font-weight: normal;
    line-height: 20px;
}

/* --- Checkboxes --- */

.checkbox {
    cursor: pointer;
    display: inline-block;
    margin-right: 14px;
    padding-left: 20px;
    min-height: 16px;
    background: transparent url("../ui/checkbox-default.svg") no-repeat left;
    background-size: 14px 14px;
    user-select: none;
}

.checkbox.checked {
    background-image: url("../ui/checkbox-checked.svg");
}

.pull-right .checkbox {
    margin-right: 0;
    margin-left: 14px;
}

/* --- Switches --- */

.switch {
    width: 36px;
    height: 20px;
    line-height: 20px;
    cursor: pointer;
    display: inline-block;
    position: relative;
}

.switch:after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    top: 4.5px;
    height: 11px;
    width: 36px;
    border-radius: 6px;
    background-color: #9e9e9e;
    transition: background-color 0.2s ease-in-out;
}

.switch-toggle {
    width: 20px;
    height: 20px;
    left: 0;
    border-radius: 12px;
    background-color: #fafafa;
    position: relative;
    z-index: 3;
    transition: left 0.2s ease-in-out, background-color 0.2s ease-in-out;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);
}

.switch.green.on:after {
    background-color: rgba(42, 202, 121, 0.5);

}

.switch.green.on .switch-toggle {
    background-color: #2aca79;
}

.switch.on:after {
    background-color: rgba(244, 153, 26, 0.5);
}

.switch.on .switch-toggle {
    left: 16px;
    background-color: #f4991a;
}

.switch.disabled {
    cursor: not-allowed;
}

/* --- Inputs --- */

input.header-input[type="text"] {
    border: 0;
    -webkit-appearance: none;
    border-bottom: 2px solid #fff;
    width: 100%;
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;
    border-radius: 0;
    letter-spacing: -0.5px;
    background-color: transparent;
    font-size: 40px;
    height: 54px;
    line-height: normal;
    outline: 0 !important;
    box-shadow: none !important;
    color: #fff;
}

input.header-input::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.5);
}

input.search-bar {
    background-color: #f4f4f4;
    border-radius: 50px;
    border: 0;
    width: 400px;
    height: 36px;
    padding-left: 16px;
    padding-right: 32px;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
    margin-bottom: 0;
}

.search-bar-wrapper {
    position: relative;
}

.search-bar-wrapper i {
    position: absolute;
    top: 5px;
    right: 10px;
    z-index: 10;
}

input.search-bar-parents {
    float: right;
}

.recipient-selector-input-container {
    position: relative;
}

.recipient-selector-inner {
    margin-top: 16px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
    background: #fff;
    border-radius: 18px;
}

input.recipient-selector-input {
    background-color: #f4f4f4;
    border-radius: 18px;
    border: 0;
    width: 100%;
    height: 36px;
    padding-left: 16px;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
    margin-bottom: 0;
}

.recipient-selector-clear {
    font-size: 28px;
    cursor: pointer;
    position: absolute;
    opacity: 0.5;
    transition: all 0.2s ease;
    top: 5px;
    right: 7px;
    z-index: 15;
}

.recipient-selector-clear:hover {
    opacity: 1;
}

.recipient-selector-groups a {
    display: inline-block;
    border-radius: 50px;
    height: 32px;
    line-height: 32px;
    background-color: #f2f2f2;
    color: #8e8e8e;
    font-size: 14px;
    padding: 0 20px;
    margin-right: 6px;
    text-decoration: none;
    cursor: pointer;
}

.recipient-selector-groups a span {
    background: #fff;
    float: right;
    margin-right: -11px;
    margin-top: 8px;
    font-size: 10px;
    line-height: 16px;
    height: 16px;
    border-radius: 8px;
    padding: 0 6px;
    margin-left: 10px;
    color: #333;
}

.recipient-selector-groups a i {
    font-size: 18px;
    margin-top: 7px;
    color: #b2b2b2;
    margin-left: -11px;
    float: left;
    margin-right: 11px;
}

.recipient-selector-groups a.active {
    background-color: #35bbfc;
    color: #fff;
}

.recipient-selector-groups a.active i {
    color: #fff;
}

.recipient-selector-results {
    box-sizing: border-box;
    padding: 8px 20px 14px;
    user-select: none;
}

.recipient-selector-results > div > div {
    display: flex;
    margin-top: 12px;
}

.recipient-selector-results .title {
    font-size: 14px;
    line-height: 24px;
    text-align: left;
    color: #727272;
    width: 90px;
    flex-basis: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recipient-selector-results .options {
    flex: 1;
    border-left: 1px solid #f2f2f2;
    padding-left: 10px;
    margin-left: 10px;
}

.recipient-selector-results .options .option {
    line-height: 18px;
    margin-bottom: 8px;
}

.recipient-selector-results .options .option:last-child {
    margin-bottom: 0;
}

.recipient-selector-results .options .option i {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.recipient-selector-results .options .option a {
    line-height: 18px;
    display: block;
    color: #000 !important;
    cursor: pointer;
    text-decoration: none !important;
}

.recipient-selector-results .options .option a i {
    float: right;
    color: #000;
}

.recipient-selector-results .options .option .plus i {
    float: left;
    color: #bfc4c8;
    margin-right: 8px;
}

.recipient-selector-results .options .option.option-selected .plus i {
    color: #2aca79;
}

.recipient-selector-results .options .option.option-partial-selected .plus i {
    color: #f3c235;
}

.recipient-selector-results .back {
    display: block;
    color: #000 !important;
    cursor: pointer;
    text-decoration: none !important;
    line-height: 18px;
    margin-bottom: 14px;
}

.recipient-selector-results .back i {
    font-size: 18px;
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 7px;
}

.recipient-selector-autosize .recipient-selector-results,
.recipient-selector-autosize input.recipient-selector-input {
    width: 100%;
}

.subject-field {
    margin-bottom: 64px;
}

span.subject-field-name {
    line-height: 28px;
    font-size: 14px;
    text-align: left;
    color: #fff;
}

span.subject-field-value {
    border-radius: 4px;
    background-color: #fff;
    line-height: 28px;
    display: inline-block;
    padding: 0 9px;
    font-size: 14px;
    margin-right: 7px;
    margin-bottom: 7px;
    position: relative;
}

span.subject-field-values-small {
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
}

span.subject-field-toggle {
    padding-left: 50px;
    padding-right: 5px;
    position: absolute;
    right: 0;
    margin-right: -1px;
    height: 100%;
}

span.subject-field-toggle span.subject-field-value {
    cursor: pointer;
}

.tint-green span.subject-field-toggle {
    background: linear-gradient(to right, rgba(42, 202, 121, 0) 0%, rgba(42, 202, 121, 1) 35px, rgba(42, 202, 121, 1) 100%);
    color: #2aca79;
}

.tint-blue span.subject-field-toggle {
    background: linear-gradient(to right, rgba(53, 187, 252, 0) 0%, rgba(53, 187, 252, 1) 35px, rgba(53, 187, 252, 1) 100%);
    color: #35bbfc;
}

.composer {
    max-width: 595px;
    border-radius: 4px;
    background-color: #fff;
    border-top: 6px solid #000;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

.sidebar-content {
    max-width: 595px;
}

.sidebar-content .row-fluid:after {
    display: none;
}

.composer textarea {
    width: 100%;
    height: 211px;
    border-radius: 4px;
    background-color: #fff;
    border: 0;
    padding: 16px;
    box-sizing: border-box;
}

.composer.composer-small textarea {
    height: 120px;
}

a.btn.btn-bigger.btn-iconned {
    font-size: 18px;
    font-weight: bold;
    text-align: left;
    color: #fff;
    line-height: 40px;
    padding: 0 16px;
    border: 0 !important;
    border-radius: 5px;
    background-color: #35bbfc !important;
    margin-top: 24px;
}

a.btn.btn-bigger.btn-iconned.green {
    background-color: #2aca79 !important;
}

a.btn.btn-bigger.btn-iconned i {
    float: right;
    margin-top: 8px;
    margin-left: 8px;
}

.xxx {
    width: 1107px;
    height: 1450px;
    max-width: none;
    margin-left: -554px;
    position: relative;
    left: 50%;
    top: -216px;
    z-index: 20;
}

.task-details {
    color: #fff;
    font-size: 14px;
}

.task-details p {
    display: inline;
    color: #fff;
    font-size: 14px;
}

.task-details i {
    font-size: 16px;
}

.question-header {
    border-radius: 4px;
    background-color: #f6f6f6;
    line-height: 34px;
    padding: 0 8px;
    font-size: 16px;
    font-weight: bold;
    color: #000;
    margin-top: 20px;
    margin-bottom: 10px;
    user-select: none;
    cursor: pointer;
    transition: margin 0.3s ease;
    display: flex;
    align-items: center;
}

.question-header span {
    flex: 1;
}

.question-header.question-collapsed {
    margin-top: 5px;
    margin-bottom: 0;
}

.question-header.always-open {
    cursor: initial;
    margin-top: 5px;
    margin-bottom: 0;
    background-color: white;
}

.question-header.always-open .question-arrow {
    visibility: hidden;
}

.question-arrow {
    transition: 0.3s ease;
}

.question-collapsed .question-arrow {
    transform: rotate(-180deg);
}

.question-collapsed ~ .question-answer {
    height: 0;
    margin-top: 0;
    overflow: hidden;
}

.question-answer {
    margin-top: 10px;
}

img.user-signature {
    max-width: 100%;
    max-height: 100%;
    margin-top: 0;
    border-radius: 5px;
    background-color: #edf1f1;
}

.question-answer .user-answer.type-signature {
    width: 200px;
    height: 100px;
    overflow: hidden;
}

.question-answer .bar {
    height: 30px;
    border-radius: 5px;
    border: solid 3px #ededed;
    margin-top: 6px;
    margin-bottom: 16px;
    width: 75%;
}

.question-answer .bar .progress {
    height: 30px;
    background-color: #2dcc71;
    padding-left: 7px;
    min-width: 40px;
    font-size: 15px;
    font-weight: 900;
    line-height: 30px;
    box-sizing: border-box;
    color: #fff;
    display: inline-block;
}

.question-answer .parents {
    height: 30px;
    display: inline-block;
    width: 25%;
    margin-top: 9px;
    margin-bottom: 19px;
}

.question-answer .parents .user-image:first-child {
    margin-left: 10px;
}

.question-answer .parents .user-image {
    position: relative;
    display: inline-block;
    width: 26px;
    height: 26px;
    border: solid #fff 1px;
    margin-top: 1px;
    margin-right: -12px;
    cursor: pointer;
}

.question-answer .parents .user-image.combined {
    margin-right: 15px;
    float: right;
    background-color: #2dcc71;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    line-height: 26px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.task-users-table {
    min-width: 60%;
}

.task-users-table th {
    font-weight: bold;
    text-align: left;
    font-size: 14px;
    color: #8e8e8e;
    padding: 2px 16px 2px 0;
}

.task-users-table td {
    padding: 2px 16px 2px 0;
}

.task-users-table td:nth-child(2) {
    color: #8e8e8e;
}

.task-users-table td:nth-child(2) div {
    height: 26px;
    line-height: 26px;
    text-align: center;
    float: left;
}

.task-user-icon {
    float: left;
    border-radius: 15px;
    height: 30px;
    width: 30px;
    background-repeat: no-repeat;
    background-size: cover;
    margin-right: 10px;
}

.task-users-table .subtitle {
    font-size: 12px;
    color: gray;
}

.task-userlist-body {
    display: flex;
    align-items: center;
}

.task-picker-userlist-body {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.task-picker-userlist-body:hover {
    background-color: #f0f0f0;
}

/* --- Buttons --- */

.back-button {
    display: inline-block;
    line-height: 18px;
    opacity: 0.7;
    color: #fff !important;
    text-decoration: none !important;
    top: -24px;
    font-size: 18px;
    font-weight: bold;
    position: relative;
}

.back-button i {
    float: left;
    margin-right: 3px;
    width: 18px;
    height: 18px;
    line-height: 1;
    font-size: 18px;
}

.big-button {
    padding: 0 16px 0 10px;
    line-height: 40px;
    margin-top: 6px;
    margin-left: 6px;
    font-size: 21px;
    font-weight: bold;
    opacity: 0.64;
    border-radius: 40px;
    text-decoration: none !important;
    color: #fff !important;
    background-color: #edf1f1;
    transition: 0.2s ease opacity;
}

.big-button .material-icons {
    margin-top: 8px;
    margin-right: 6px;
    float: left;
}

.big-button:hover {
    opacity: 1;
}

header .big-button {
    float: right;
}

a.large-tab {
    display: block;
    border: solid 1px #bfc4c8;
    padding: 17px 17px 17px 75px;
    border-radius: 5px;
    color: #8e8e8e;
    font-weight: 500;
    line-height: 20px;
    position: relative;
    background: #fff;
    user-select: none;
    cursor: pointer;
    text-decoration: none !important;
}

a.large-tab .description {
    font-size: 13px;
    font-weight: 400;
    padding-top: 2px;
    line-height: 17px;
    display: block;
    color: #8e8e8e;
}

a.large-tab .label {
    font-size: 10px;
    padding-bottom: 0;
    background-color: #aaa;
    position: relative;
    top: -1px;
    margin-left: 2px;
}

a.large-tab.selected {
    border: solid 2px #2aca79;
    padding: 16px 16px 16px 74px;
    color: #2aca79;
}

a.large-tab.blue.selected {
    border: solid 2px #35bbfc;
    color: #35bbfc;
}

a.large-tab .material-icons {
    position: absolute;
    left: 18px;
    top: 50%;
    margin-top: -20px;
    font-size: 40px;
}

.field-adder {
    padding: 0 24px;
    border-radius: 5px;
    border: dashed 2px #bfc4c8;
    min-height: 130px;
    display: flex;
    align-content: space-evenly;
}

.field-adder .add-field {
    flex: 1;
    cursor: pointer;
    text-decoration: none !important;
    display: block;
    float: left;
    width: 16.66666%;
    color: #000;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 10px;
    text-align: center;
    position: relative;
    padding-top: 80px;
    height: 50px;
}

.field-adder .add-field .material-icons {
    color: #bfc4c8;
    font-size: 30px;
    clear: both;
    position: absolute;
    left: 50%;
    margin-left: -15px;
    top: 38px;
}

.question {
    border-radius: 5px;
    border: 2px solid #bfc4c8;
    margin-bottom: 16px;
    position: relative;
    border-left: 140px solid #bfc4c8;
    min-height: 100px;
    padding: 24px;
    /*Needed to prevent incorrect preview image in chrome caused by repaint issues. This forces gpu
    acceleration to be used which solves the issue*/
    transform: translate3d(0, 0, 0);
}

.question.dragged > * {
    pointer-events: none;
}

.question.drop-target > * {
    pointer-events: none;
}

.question.drop-target {
    border-color: grey;
}

.question-info {
    position: absolute;
    left: -140px;
    top: 50%;
    margin-top: -41px;
    width: 140px;
    text-align: center;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 900;
    color: #fff;
}

.question-info .material-icons {
    font-size: 30px;
}

.question-buttons {
    margin-top: 16px;
}

.question-buttons .material-icons {
    font-size: 16px;
    color: #fff;
    margin: 0 3px;
}

.question-buttons a:nth-last-child(2) .material-icons {
    color: #f4991a;
}

.question-buttons a:last-child .material-icons {
    color: #e24935;
}

.question-fields .option {
    display: block;
    margin-top: 10px;
}

.question-fields .option {
    text-decoration: none !important;
    color: #000 !important;
    cursor: pointer;
}

.question-fields .option .switch {
    float: left !important;
    margin-left: 0 !important;
    margin-right: 12px;
}

.question-fields label {
    font-weight: bold;
    margin-top: 20px;
    font-size: 18px;
}

.question-fields label:first-child {
    margin-top: 0;
}

.question-fields input[type="text"] {
    border: 0;
    border-radius: 0;
    border-bottom: 2px solid #f1f1f1;
    box-shadow: none !important;
    padding-left: 0;
    padding-right: 0;
}

.question-fields input[type="text"]:focus {
    border-bottom-color: #bfc4c8;
}

.question-fields .option-field:last-child {
    margin-bottom: 0;
}

.question-fields .option-field {
    line-height: 28px;
    display: block;
    margin-bottom: 10px;
}

.question-fields .option-field .material-icons {
    float: left;
    font-size: 20px;
    margin-right: 6px;
    margin-top: 4px;
}

.question-fields .option-field input[type="text"] {
    height: 28px;
    padding: 0;
    margin: 0;
}

.question-fields .option-field.add {
    color: #000;
    text-decoration: none !important;
    cursor: pointer;
}

.question-fields .option-field.add .material-icons {
    color: #36c97b;
}

/* --- Tint colors --- */

.label.orange {
    background-color: #f49814;
}

.nav-main li a.active,
.nav-main li a.active i {
    transition: 0.2s ease color;
}

.tint-orange .app-header,
.tint-orange .big-button {
    background-color: #f49d12;
}

.tint-orange .app-header {
    background-size: 100% 200%;
    background-image: linear-gradient(90deg, #ff9800, #ff7a00);
}

.tint-orange header.style-large .header-background {
    background-color: #ff9800;
}

.tint-orange .header-pattern header.style-large .header-background {
    background: #ff9800 url("/static/ui/background.svg") no-repeat bottom right;
}

.tint-orange .nav-main li a.active,
.tint-orange .nav-main li a.active i {
    color: #f49d12;
}

.tint-green .app-header,
.tint-green .big-button {
    background-color: #2aca79;
}

.tint-green header.style-large {
    min-height: 120px;
}

.tint-green header.style-large .header-background {
    background-color: #2aca79;
}

.tint-green .header-pattern header.style-large .header-background {
    background: #2aca79 url("/static/ui/background.svg") no-repeat bottom right;
}

.tint-green .app-header {
    background-size: 100% 200%;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, #2fcc71 50%), linear-gradient(90deg, #2bcd75, #25c17d);
}

.tint-green .nav-main li a.active,
.tint-green .nav-main li a.active i {
    color: #2aca79;
}

.tint-blue .app-header,
.tint-blue .big-button {
    background-color: #35bbfc;
}

.tint-blue .app-header {
    background-size: 100% 200%;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, #2fcc71 50%), linear-gradient(90deg, #36adfe, #2e9ae3);
}

.tint-blue header.style-large .header-background {
    background-color: #35bbfc;
}

.tint-blue .header-pattern header.style-large .header-background {
    background: #35bbfc url("/static/ui/background.svg") no-repeat bottom right;
}

.tint-blue .nav-main li a.active,
.tint-blue .nav-main li a.active i {
    color: #35bbfc;
}

.tint-red .app-header,
.tint-red .big-button {
    background-color: #dd521d;
}

.tint-red .app-header {
    background-size: 100% 200%;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, #2fcc71 50%), linear-gradient(90deg, #e84e3d, #d35500);
}

.tint-red .nav-main li a.active,
.tint-red .nav-main li a.active i {
    color: #dd521d;
}

.tint-darkblue .app-header,
.tint-darkblue .big-button {
    background-color: #394e63;
}

.tint-transparent .app-header,
.tint-transparent .big-button {
    color: #000 !important;
    background-color: transparent !important;
}

.tint-darkblue .app-header {
    background-size: 100% 200%;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, #2fcc71 50%), linear-gradient(90deg, #465f76, #2d3e51);
}

.tint-darkblue .nav-main li a.active,
.tint-darkblue .nav-main li a.active i {
    color: #3c5166;
}

.tint-gray .app-header {
    background-size: 100% 200%;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, #2fcc71 50%), linear-gradient(90deg, #cecece, #a4a4a4);
}

/* --- Conversation bubbles --- */

.bubble {
    margin-top: 20px;
}

.bubble:after,
.bubble:before {
    content: "";
    display: table;
    width: 100%;
    clear: both;
    height: 0;
}

.bubble .meta {
    font-size: 11px;
    color: #9e9e9e;
    padding-bottom: 6px;
}

.bubble .meta:empty {
    padding-bottom: 0;
}

.conversation-inner .bubble:first-child {
    margin-top: 0;
}

.details.single-line {
    max-height: 24px;
    overflow: hidden;
    white-space: nowrap;
    max-width: 750px;
    text-overflow: ellipsis;
}

.bubble .message {
    display: inline-block;
    max-width: 64%;
    background: #edf1f1;
    padding: 9px 12px;
    line-height: 22px;
    font-size: 16px;
    margin-right: 12px;
    position: relative;
    border-radius: 0 10px 10px;
    white-space: pre-wrap;
    z-index: 4;
}

.bubble .message * {
    position: relative;
    z-index: 5;
}

.bubble .message a {
    color: inherit;
    text-decoration: underline;
}

.bubble .message.message-image {
    padding: 0;
    overflow: hidden;
}

.bubble .message.message-image img {
    height: 200px;
}

.bubble .message:after {
    content: "";
    border: 12px solid transparent;
    height: 0;
    width: 0;
    position: absolute;
    top: 0;
    left: -12px;
    border-right-color: #edf1f1;
    border-top-color: #edf1f1;
    z-index: 1;
}

.bubble.mine .message:after {
    left: auto;
    right: -12px;
    border-right-color: transparent;
    border-left-color: #2bb7fc;
    border-top-color: #2bb7fc;
}

.bubble.mine .meta {
    text-align: right;
}

.bubble.mine .message {
    background: #2bb7fc;
    color: #fff;
    border-top-right-radius: 0;
    border-top-left-radius: 10px;
    float: right;
}

.bubble.mine + .bubble.mine {
    margin-top: 10px;
}

.bubble.mine + .bubble.mine .meta {
    display: none;
}

.bubble.mine + .bubble.mine .meta.special {
    display: block !important;
}

.bubble.mine + .bubble.mine .message {
    border-top-right-radius: 3px;
}

.bubble.mine + .bubble.mine .message:after {
    display: none;
}

.bubble.theirs + .bubble.theirs {
    margin-top: 10px;
}

.bubble.theirs + .bubble.theirs .meta {
    display: none;
}

.bubble.theirs + .bubble.theirs .meta.special {
    display: block !important;
}

.bubble.theirs + .bubble.theirs .message {
    border-top-left-radius: 3px;
}

.bubble.theirs + .bubble.theirs .message:after {
    display: none;
}

.system-message {
    padding: 32px;
    font-size: 13px;
    max-width: 400px;
    margin: 0 auto;
    color: #7a7a7a;
    text-align: center;
}

.bubble .message.message-file a {
    display: block;
    font-size: 14px;
    text-decoration: none;
    font-weight: bold;
}

.bubble .message.message-file .material-icons {
    float: left;
    font-size: 16px;
    margin-top: 2px;
    margin-right: 6px;
}

.bubble .message-file-preview {
    height: 90px;
    min-width: 200px;
    opacity: 0.8;
    margin: -12px;
    margin-top: -9px;
    margin-bottom: 9px;
    background: #fff url('/static/ui/chat/file-preview.png') no-repeat center;
    background-size: cover;
}

.bubble .message-file-preview div {
    width: 100%;
    height: 100%;
    background: transparent no-repeat top;
    background-size: cover;
}

/* --- Help/onboarding modals --- */

.window-welcome iframe {
    margin-left: -24px;
    margin-bottom: -30px;
    margin-top: 14px;
}

.window-welcome .back-button {
    display: none;
}

.window-welcome .content-inner {
    max-width: 560px;
    position: relative;
}

.window-welcome .content-inner .inner {
    height: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    margin-top: -240px;
}

.window-welcome a {
    color: #f49d12;
    text-decoration: underline;
}

.window-welcome p {
    color: #646464;
}

.window-welcome .big-button,
.window-two-factor .big-button {
    background-color: #35bbfc;
    opacity: 1;
    border-radius: 4px;
    height: 40px;
    display: inline-block;
    line-height: 40px;
    font-size: 19px !important;
    padding: 0 20px;
    margin: 16px 0 0;
    cursor: pointer;
}

.window-two-factor .big-button {
    background-color: #ff9800;
}

.window-two-factor .content-inner {
    max-width: 400px;
}

.window-two-factor .content-inner .inner {
    height: 200px;
    min-height: 267px;
    margin-top: 180px;
}

.window-welcome .app-store {
    float: right;
    width: 136px;
    height: 40px;
    text-indent: -1000px;
    overflow: hidden;
    display: block;
    background: transparent url("/static/ui/appstore.svg") no-repeat right;
    background-size: auto 40px;
    margin-top: 16px;
}

.window-welcome .google-play {
    float: right;
    width: 150px;
    height: 40px;
    text-indent: -1000px;
    overflow: hidden;
    display: block;
    margin-left: 6px;
    background: transparent url("https://play.google.com/intl/en_us/badges/images/generic/nl_badge_web_generic.png") no-repeat right;
    background-size: auto 59px;
    margin-right: -10px;
    margin-top: 16px;
}

.window-welcome .close {
    color: #000;
    text-decoration: none;
    font-size: 24px;
    line-height: 34px;
}

.soon {
    opacity: 0.5;
    cursor: not-allowed !important;
}

.demo {
    height: 30px;
    float: left;
    margin-top: 5px;
    color: #fff;
    text-decoration: none;
}

a.demo {
    color: #000;
}

.demo h1 {
    padding: 0 15px;
    margin: 0;
    float: left;
    border-radius: 15px;
    background-color: #fff;
    color: #818181;
    font-family: Avenir, sans-serif;
    font-size: 12px;
    font-weight: bolder !important;
    line-height: 30px;
    letter-spacing: normal;

    text-align: center;
}

.demo i {
    padding-left: 10px;
    float: left;
    line-height: 30px;
}

.demo p {
    padding-left: 5px;
    width: 300px;
    height: 30px;
    margin: 0;
    font-size: 12px;
    line-height: 30px;
    vertical-align: top;
    float: left;
}

.mobile-compat-overlay {
    display: none;
}

@media (max-width: 767px) {
    .mobile-compat-overlay {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        background: #34c77a;
        color: #fff;
        text-align: center;
        padding: 32px;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        z-index: 11000;
    }
}

.demo-signup {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: #34c77a;
    color: #fff;
    text-align: center;
    padding: 300px;
}

.demo-signup input {
    width: 300px;
    display: block;
    margin: 30px auto;
    border-radius: 50px;
    border: 0;
    background: #fff;
    height: 50px;
    padding: 0 24px;
    font-size: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.demo-signup input:focus {
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
}

.demo-signup button {
    border-radius: 50px;
    border: 0;
    background: #ef9000;
    color: #fff;
    height: 50px;
    padding: 0 24px;
    margin-top: 24px;
    font-size: 15px;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.demo-signup iframe {
    width: 0;
    height: 0;
    border: 0;
    opacity: 0;
}

.question-answer .user-value .user-image {
    display: block;
    float: left;
    margin-right: 10px;
}

.question-answer .user-name {
    line-height: 16px;
    white-space: nowrap;
    overflow: hidden;
    height: 32px;
    color: #8e8e8e;
    text-overflow: ellipsis;
    margin: 0 0 3px;
    position: relative;
    z-index: 80;
}

.question-answer .user-answer {
    margin-left: 36px;
    display: block;
}

.question-answer .user-value {
    margin-bottom: 10px;
}

dl.list {
    border-top: 1px solid #e5e5e5;
    margin: 16px 0 0;
}

dl.list dt {
    float: left;
    width: 158px;
    font-weight: 500;
    padding: 16px 0;
    clear: left;
}

dl.list .help {
    display: block;
    color: #777;
    font-size: 12px;
    line-height: 1.3;
}

dl.list dd {
    margin: 0;
    padding: 16px 16px 16px 164px;
    border-bottom: 1px solid #e5e5e5;
    display: block;
    color: #8b8b8b;
    clear: right;
}

dl.list dd:after {
    content: "";
    width: 100%;
    clear: both;
    display: block;
    height: 0;
    margin-bottom: -16px;
}

dl.list dt:last-child {
    padding-bottom: 0;
}

dl.list dd:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.dashboard .box canvas {
    height: 200px !important;
}

.dashboard .box .pie-chart canvas {
    width: 200px !important;
}

.dashboard .news,
.dashboard .tasks,
.dashboard .messages {
    height: 206px;
}

.box-content {
    height: 206px;
    overflow-y: auto;
    overflow-x: hidden;
}

.dashboard .news .item,
.dashboard .tasks .task,
.dashboard .messages .message {
    height: 50%;
    width: 100%;
    position: relative;
}

.dashboard .news .item a,
.dashboard .tasks .task a,
.dashboard .messages .message a {
    text-decoration: none;
}

.dashboard .news .item:not(:last-child),
.dashboard .tasks .task:not(:last-child),
.dashboard .messages .message:not(:last-child) {
    border-bottom: 2px solid #e5e5e5;
}

.dashboard .news .item .info {
    width: 80%;
    height: 100%;
    float: left;
}

.dashboard .news .item h3 {
    margin: 5px 0;
    font-size: 18px;
    line-height: 23px;
    color: #000;
}

.dashboard .news .item .info p {
    height: calc(100% - 45px);
    overflow: hidden;
    text-overflow: ellipsis;
    color: #8e8e8e;
    font-size: 14px;
    line-height: 19px;
}

.dashboard .news .item .meta {
    width: 20%;
    height: 100%;
    float: right;
    text-align: right;
}

.dashboard .news .item .meta .time {
    margin-top: 10px;
    font-size: 14px;
    color: #000;
}

.dashboard .news .item .meta h3 {
    line-height: 22px;
    height: 22px;
}

.dashboard .news .item .meta .view-icon {
    padding-right: 5px;
    font-size: 22px;
    color: #bfc4c8;
    line-height: 22px;
    height: 22px;
    position: relative;
    top: 5px;
}

.dashboard .tasks .task h3,
.dashboard .messages .message h3 {
    margin: 15px 0 3px;
    font-size: 18px;
    line-height: 23px;
    color: #000;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.dashboard .tasks .task.open > span:not(.task-progress-mini) {
    position: absolute;
    font-size: 14px;
    right: 0;
    top: 0;
}

.dashboard .tasks .task span {
    color: #000;
}

.dashboard .tasks .task h5 {
    margin: 0;
    font-weight: 500;
    font-size: 15px;
    line-height: 18px;
    color: #000;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dashboard .tasks .task.open h5 i,
.dashboard .tasks .task.closed h5 i {
    display: inline-block;
    font-size: 18px;
    line-height: 13px;
    top: 3px;
    position: relative;
}

.dashboard .tasks .task p,
.dashboard .messages .message p {
    padding-top: 5px;
    height: calc(100% - 50px);
    overflow: hidden;
    text-overflow: ellipsis;
    color: #8e8e8e;
    font-size: 14px;
    line-height: 19px;
}

.dashboard .tasks .task .task-progress-mini {
    float: right;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.5px;
    zoom: 0.8;
}

.dashboard .messages .message h5 {
    margin: 0;
    font-weight: 500;
    font-size: 15px;
    line-height: 18px;
    color: #000;
}

.dashboard .messages .message span {
    margin: 0;
    font-size: 14px;
    color: #000;
    position: absolute;
    right: 0;
}

.dashboard.insights header h4 {
    font-size: 15px;
    line-height: 10px;
    font-weight: 500;
}

.dashboard.insights header span {
    font-size: 14px;
}

.dashboard.insights header i {
    font-size: 22px;
}

.beta-dialog {
    border: 0;
    margin-bottom: 32px;
    padding: 12px 14px;
}

.beta-dialog .material-icons {
    float: left;
    margin-right: 10px;
}

/* --- Group messages --- */

.messages-group-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 250px;
    background: #fff;
    z-index: 1003;
    padding: 24px;
    overflow: auto;
}

.messages-group-content > .window {
    left: 298px;
    width: auto;
}

.messages-group-content > .window .content-inner {
    max-width: 800px;
}

.messages-group-sidebar .item {
    padding: 12px 2px;
    margin: 0 -2px;
}

.messages-group-sidebar h3 {
    line-height: 23px;
    font-size: 18px;
    padding-top: 16px;
}

.messages-group-sidebar .item .title {
    font-size: 15px;
    line-height: 20px;
    margin-bottom: 1px;
}

.messages-group-sidebar .item .details {
    font-size: 14px;
    line-height: 19px;
}

.messages-group-sidebar .item .user-image {
    margin-top: 8px;
}

.messages-group-sidebar a.item.active {
    background-color: #36b8f9;
    margin: 0 -24px;
    padding: 12px 26px;
    color: #fff;
    border-bottom-color: transparent;
}

.messages-group-sidebar a.item.active .muted {
    color: #fff;
}

.image-attachments {
    display: flex;
    flex-wrap: wrap;
}

.image-attachments img {
    height: 145px;
    padding: 5px;
}

.attachment-bar {

}

.attachment-bar .attachment {
    display: inline-block;
    position: relative;
    margin: 5px;
}

.attachment-bar .attachment img {
    border-radius: 3px;
    height: 150px;
}

.attachment-bar .attachment:hover .attachment-overlay {
    visibility: visible;
}

.attachment-bar .attachment .attachment-overlay {
    visibility: hidden;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    display: flex;
    flex-direction: column;
}

.attachment-bar .attachment .attachment-overlay div {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.attachment-bar .attachment .attachment-overlay div a {
    text-decoration: none;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.attachment-bar .attachment .attachment-overlay div i {
    font-size: 18px;
    color: white;
}

.attachment-bar .attachment .attachment-overlay div span {
    text-align: center;
    vertical-align: middle;
    color: white;
    font-size: 13px;
}

.attachment-bar .attachment .attachment-overlay div:first-child {
    border-bottom: solid 0.5px rgba(255, 255, 255, 0.2);
}

.attachment-bar .attachment .attachment-overlay div:last-child {
    border-top: solid 0.5px rgba(255, 255, 255, 0.2);
}

/* --- Driver.js --- */

div#driver-popover-item {
    display: none;
    position: absolute;
    background: #fff;
    padding: 20px !important;
    border-radius: 5px;
    min-width: 250px;
    max-width: 300px;
    margin: -48px 0 0 -36px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    z-index: 1000000000;
}

div#driver-popover-item .driver-popover-tip {
    content: "";
    position: absolute;
    left: -20px;
    top: 50%;
    margin-top: -20px;
    border: 10px solid transparent;
    border-right-color: #fff;
}

div#driver-popover-item .driver-popover-footer {
    display: block;
    clear: both;
    margin-top: 5px;
}

div#driver-popover-item .driver-popover-footer button {
    display: inline-block;
    border: 0;
    text-decoration: none;
    text-shadow: none;
    color: #36b0ff;
    font-size: 16px;
    cursor: pointer;
    outline: 0;
    background-color: transparent;
    border-radius: 2px;
    zoom: 1;
    margin: 10px 0 0;
    padding: 0;
}

div#driver-popover-item .driver-popover-footer button.driver-disabled {
    display: none;
}

div#driver-popover-item .driver-popover-footer button.driver-prev-btn {
    display: none !important;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
}

div#driver-popover-item .driver-popover-footer .driver-close-btn {
    float: right;
    color: #777;
}

div#driver-popover-item .driver-popover-footer .driver-btn-group {
    float: left;
}

div#driver-popover-item .driver-popover-title {
    font-size: 22px;
    margin: 0 0 12px;
    display: block;
    position: relative;
    line-height: 1;
    zoom: 1;
}

div#driver-popover-item .driver-popover-description {
    margin-bottom: 0;
    line-height: 1.5;
    font-size: 14px;
    color: #777;
    zoom: 1;
}

div#driver-page-overlay {
    background: #000;
    position: fixed;
    bottom: 0;
    right: 0;
    display: block;
    width: 100%;
    height: 100%;
    zoom: 1;
    filter: alpha(opacity=75);
    opacity: 0.75;
    z-index: 100002 !important;
}

div#driver-highlighted-element-stage,
div#driver-page-overlay {
    top: 0;
    left: 0;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

div#driver-highlighted-element-stage {
    position: absolute;
    height: 60px !important;
    margin-top: 10px;
    background: #fff;
    z-index: 100003 !important;
    display: none;
    margin-left: 18px;
    border-radius: 50px;
    margin-right: -18px;
    width: 200px !important;
}

.driver-highlighted-element {
    z-index: 100004 !important;
}

.driver-position-relative {
    position: relative !important;
}

.driver-fix-stacking {
    z-index: auto !important;
    opacity: 1 !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    transform: none !important;
    -webkit-filter: none !important;
    -ms-filter: none !important;
    filter: none !important;
    -webkit-perspective: none !important;
    -moz-perspective: none !important;
    perspective: none !important;
}

/* --- Help section --- */

.help-section-container {
    margin: -24px -400px 32px;
    background-color: #f9fafa;
    border-bottom: 1px solid #e5e5e5;
}

.help-section {
    margin: 0 400px;
    padding: 24px 0;
}

.help-video {
    float: left;
    height: 90px;
    width: 160px;
    background: #ddd no-repeat center;
    background-size: cover;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    margin-right: 24px;
}

.help-video-overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.6);
    text-align: center;
    line-height: 90px;
}

.has-video .help-info {
    margin-left: 184px;
}

.help-info h3 {
    font-size: 18px;
    line-height: 24px;
    margin: 0 0 4px;
}

.help-info h3 i {
    float: left;
}

.help-info p {
    font-size: 15px;
    line-height: 20px;
    margin-top: 3px;
    margin-bottom: 0;
    color: #8e8e8e;
}

.help-hide {
    float: right;
    color: #bfc4c8;
    font-size: 13px;
    padding-right: 22px;
    background: transparent url("/static/ui/onboarding/close.svg") no-repeat right;
    background-size: 16px 16px;
    display: inline-block;
}

.help-hide:hover {
    color: #666;
    text-decoration: none;
    cursor: pointer;
}

.selected-options-container {
    position: fixed;

    /* Make our container display next to the menu, so we can center the options within */
    left: 260px;
    width: calc(100% - 260px);
    bottom: 0;
    z-index: 100;

    text-align: center;
    pointer-events: none;
}

.selected-options {
    display: inline-block;
    background-color: rgb(240, 240, 240);
    background-color: rgba(240, 240, 240, 0.9);
    border-radius: 30px 30px 0 0;
    padding: 4px 4px 14px;
    pointer-events: auto;
}

.selected-options-button {
    display: block;
    padding: 0 16px;
    line-height: 40px;
    margin: 6px;
    font-size: 21px;
    font-weight: bold;
    border-radius: 40px;
    text-decoration: none !important;
    color: #fff !important;
    transition: 0.2s ease opacity;
    cursor: pointer;
}

.selected-options-button .material-icons {
    margin-top: 8px;
    margin-right: 6px;
    float: left;
}

/* --- Date picker --- */

.option .react-datepicker-wrapper {
    display: inline-block;
}

.react-datepicker {
    background-color: #fff;
    color: #000;
    font-size: 14px;
    margin-top: 16px;
    margin-left: 16px;
    border: 1px solid #c5c5c5;
    border-radius: 0.3rem;
    display: inline-block;
    position: relative;
}

.option .react-datepicker-popper {
    position: static !important;
    transform: none !important;
}

.react-datepicker--time-only .react-datepicker__time-container {
    border-left: 0;
}

.react-datepicker--time-only .react-datepicker__time {
    border-radius: 0.3rem;
}

.react-datepicker--time-only .react-datepicker__time-box {
    border-radius: 0.3rem;
}

.react-datepicker__header {
    text-align: center;
    background-color: #f4f4f4;
    border-bottom: 1px solid #c5c5c5;
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;
    padding-top: 8px;
    position: relative;
}

.react-datepicker__header--time {
    padding-bottom: 8px;
    padding-left: 5px;
    padding-right: 5px;
}

.react-datepicker__year-dropdown-container--select,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__month-year-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--scroll,
.react-datepicker__month-year-dropdown-container--scroll {
    display: inline-block;
    margin: 0 2px;
}

.react-datepicker__current-month,
.react-datepicker-time__header {
    margin-top: 0;
    color: #000;
    font-weight: bold;
    font-size: 0.944rem;
}

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

.react-datepicker__navigation {
    background: none;
    line-height: 1.7rem;
    text-align: center;
    cursor: pointer;
    position: absolute;
    top: 10px;
    width: 0;
    padding: 0;
    border: 0.45rem solid transparent;
    z-index: 1;
}

.react-datepicker__navigation--previous {
    left: 10px;
    border-right-color: #ccc;
}

.react-datepicker__navigation--previous:hover {
    border-right-color: #b3b3b3;
}

.react-datepicker__navigation--previous--disabled,
.react-datepicker__navigation--previous--disabled:hover {
    border-right-color: #e6e6e6;
    cursor: default;
}

.react-datepicker__navigation--next {
    right: 10px;
    border-left-color: #ccc;
}

.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
    right: 80px;
}

.react-datepicker__navigation--next:hover {
    border-left-color: #b3b3b3;
}

.react-datepicker__navigation--next--disabled,
.react-datepicker__navigation--next--disabled:hover {
    border-left-color: #e6e6e6;
    cursor: default;
}

.react-datepicker__navigation--years {
    position: relative;
    top: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.react-datepicker__navigation--years-previous {
    top: 4px;
    border-top-color: #ccc;
}

.react-datepicker__navigation--years-previous:hover {
    border-top-color: #b3b3b3;
}

.react-datepicker__navigation--years-upcoming {
    top: -4px;
    border-bottom-color: #ccc;
}

.react-datepicker__navigation--years-upcoming:hover {
    border-bottom-color: #b3b3b3;
}

.react-datepicker__month-container {
    float: left;
}

.react-datepicker__month {
    margin: 0.4rem;
    text-align: center;
}

.react-datepicker__time-container {
    float: right;
    border-left: 1px solid #aeaeae;
    width: 70px;
}

.react-datepicker__time-container--with-today-button {
    display: inline;
    border: 1px solid #aeaeae;
    border-radius: 0.3rem;
    position: absolute;
    right: -72px;
    top: 0;
}

.react-datepicker__time-container .react-datepicker__time {
    position: relative;
    background: #fff;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
    width: 70px;
    overflow-x: hidden;
    margin: 0 auto;
    text-align: center;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
    list-style: none;
    margin: 0;
    height: calc(195px + (1.7rem / 2));
    overflow-y: scroll;
    padding-right: 30px;
    width: 100%;
    box-sizing: content-box;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
    padding: 5px 10px;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
    cursor: pointer;
    background-color: #f0f0f0;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
    background-color: #f29830;
    color: #fff;
    font-weight: bold;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
    background-color: #f29830;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
    color: #ccc;
}

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
    cursor: default;
    background-color: transparent;
}

.react-datepicker__week-number {
    color: #ccc;
    display: inline-block;
    width: 1.7rem;
    line-height: 1.7rem;
    text-align: center;
    margin: 0.166rem;
}

.react-datepicker__week-number.react-datepicker__week-number--clickable {
    cursor: pointer;
}

.react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
    border-radius: 0.3rem;
    background-color: #f0f0f0;
}

.react-datepicker__day-names,
.react-datepicker__week {
    white-space: nowrap;
}

.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
    color: #000;
    display: inline-block;
    width: 1.7rem;
    line-height: 1.7rem;
    text-align: center;
    margin: 0.166rem;
}

.react-datepicker__day {
    cursor: pointer;
}

.react-datepicker__day:hover {
    border-radius: 0.3rem;
    background-color: #f0f0f0;
}

.react-datepicker__day--today {
    font-weight: bold;
}

.react-datepicker__day--highlighted {
    border-radius: 0.3rem;
    background-color: #3dcc4a;
    color: #fff;
}

.react-datepicker__day--highlighted:hover {
    background-color: #32be3f;
}

.react-datepicker__day--selected,
.react-datepicker__day--in-selecting-range,
.react-datepicker__day--in-range {
    border-radius: 0.3rem;
    background-color: #f29830;
    color: #fff;
}

.react-datepicker__day--selected:hover,
.react-datepicker__day--in-selecting-range:hover,
.react-datepicker__day--in-range:hover {
    background-color: #f29830;
}

.react-datepicker__day--keyboard-selected {
    border-radius: 0.3rem;
    background-color: #3ebcf9;
    color: #fff;
}

.react-datepicker__day--keyboard-selected:hover {
    background-color: #3ebcf9;
}

.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) {
    background-color: rgba(33, 107, 165, 0.5);
}

.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range) {
    background-color: #f0f0f0;
    color: #000;
}

.react-datepicker__day--disabled {
    cursor: default;
    color: #ccc;
}

.react-datepicker__day--disabled:hover {
    background-color: transparent;
}

.react-datepicker__input-container {
    position: relative;
    display: inline-block;
}

.react-datepicker__year-read-view,
.react-datepicker__month-read-view,
.react-datepicker__month-year-read-view {
    border: 1px solid transparent;
    border-radius: 0.3rem;
}

.react-datepicker__year-read-view:hover,
.react-datepicker__month-read-view:hover,
.react-datepicker__month-year-read-view:hover {
    cursor: pointer;
}

.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
    border-top-color: #b3b3b3;
}

.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
    border-top-color: #ccc;
    float: right;
    margin-left: 20px;
    top: 8px;
    position: relative;
    border-width: 0.45rem;
}

.react-datepicker__year-dropdown,
.react-datepicker__month-dropdown,
.react-datepicker__month-year-dropdown {
    background-color: #f0f0f0;
    position: absolute;
    width: 50%;
    left: 25%;
    top: 30px;
    z-index: 1;
    text-align: center;
    border-radius: 0.3rem;
    border: 1px solid #aeaeae;
}

.react-datepicker__year-dropdown:hover,
.react-datepicker__month-dropdown:hover,
.react-datepicker__month-year-dropdown:hover {
    cursor: pointer;
}

.react-datepicker__year-dropdown--scrollable,
.react-datepicker__month-dropdown--scrollable,
.react-datepicker__month-year-dropdown--scrollable {
    height: 150px;
    overflow-y: scroll;
}

.react-datepicker__year-option,
.react-datepicker__month-option,
.react-datepicker__month-year-option {
    line-height: 20px;
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.react-datepicker__year-option:first-of-type,
.react-datepicker__month-option:first-of-type,
.react-datepicker__month-year-option:first-of-type {
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;
}

.react-datepicker__year-option:last-of-type,
.react-datepicker__month-option:last-of-type,
.react-datepicker__month-year-option:last-of-type {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-bottom-left-radius: 0.3rem;
    border-bottom-right-radius: 0.3rem;
}

.react-datepicker__year-option:hover,
.react-datepicker__month-option:hover,
.react-datepicker__month-year-option:hover {
    background-color: #ccc;
}

.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
    border-bottom-color: #b3b3b3;
}

.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
    border-top-color: #b3b3b3;
}

.react-datepicker__year-option--selected,
.react-datepicker__month-option--selected,
.react-datepicker__month-year-option--selected {
    position: absolute;
    left: 15px;
}

.react-datepicker__close-icon {
    background-color: transparent;
    border: 0;
    cursor: pointer;
    display: inline-block;
    height: 0;
    outline: 0;
    padding: 0;
    vertical-align: middle;
}

.react-datepicker__close-icon:after {
    background-color: #216ba5;
    border-radius: 50%;
    bottom: 0;
    box-sizing: border-box;
    color: #fff;
    content: "\D7";
    cursor: pointer;
    font-size: 12px;
    height: 16px;
    width: 16px;
    line-height: 1;
    margin: -8px auto 0;
    padding: 2px;
    position: absolute;
    right: 7px;
    text-align: center;
    top: 50%;
}

.react-datepicker__today-button {
    background: #f0f0f0;
    border-top: 1px solid #aeaeae;
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    padding: 5px 0;
    clear: left;
}

.option .react-datepicker__input-container input {
    border: 0;
    color: #f4991a;
    box-shadow: none !important;
    margin: -4px 0 0;
    padding: 8px 0 0 36px;
    cursor: pointer;
    background-color: transparent;
}

.window.task-results .content-inner {
    width: 420px;
}

.integration-icon {
    width: 50px;
    height: 50px;
    margin-right: 5px;
    border-radius: 10px;
    display: block;
    background: #bbb;
}

.integration-icon.small {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    margin: 5px;
}

.integration-icon-select {
    width: 250px;
    height: 100px;
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    position: absolute;
    right: 0;
    bottom: -25px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.integration-icon:before {
    width: 50px;
    height: 50px;
    display: block;
    content: "";
    background: no-repeat center;
    background-size: 60%;
}

.integration-icon.small:before {
    width: 40px;
    height: 40px;
}

.integration-icon.calendar:before {
    background-image: url("/static/ui/icons-links/calendar.png");
}

.integration-icon.facebook:before {
    background-image: url("/static/ui/icons-links/facebook.png");
}

.integration-icon.info:before {
    background-image: url("/static/ui/icons-links/info.png");
}

.integration-icon.infowijs:before {
    background-image: url("/static/ui/icons-links/infowijs.png");
}

.integration-icon.key:before {
    background-image: url("/static/ui/icons-links/key.png");
}

.integration-icon.magister:before {
    background-image: url("/static/ui/icons-links/magister.png");
}

.integration-icon.school:before {
    background-image: url("/static/ui/icons-links/school.png");
}

.integration-icon.somtoday:before {
    background-image: url("/static/ui/icons-links/somtoday.png");
}

.integration-icon.twitter:before {
    background-image: url("/static/ui/icons-links/twitter.png");
}

.integration-icon.web:before {
    background-image: url("/static/ui/icons-links/web.png");
}

.add-date {
    border: 2px dashed #cbcbcb;
    border-radius: 5px;
    line-height: 24px;
    color: #cbcbcb;
    padding: 16px;
    user-select: none;
    cursor: pointer;
    margin-bottom: 10px;
}

.add-date i {
    float: left;
    font-size: 16px;
    line-height: 24px;
    margin-right: 10px;
}

.timeslot-warning {
    font-size: 12px;
    color: #bebebe;
    user-select: none;
}

.date {
    margin-bottom: 10px;
}

.date .settings {
    background-color: #f4f4f4;
    user-select: none;

    height: 50px;
    line-height: 50px;
}

.date .settings h3 {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    width: 100px;
    font-size: 18px;
    left: 13px;
    position: relative;
}

.date .settings input {
    margin: 0;
}

.date .settings i {
    font-size: 16px;
    cursor: pointer;
    position: relative;
    top: 4px;
}

.date .settings .react-datepicker-popper {
    position: absolute;
    z-index: 10;
}

.date .settings .day,
.date .settings .time,
.date .settings .timeslot {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

.date .settings .day > div,
.date .settings .time > div {
    display: inline-block;
}

.date .settings .day {
    background-color: #b3b3b3;
    line-height: 33px;
    border-radius: 3px;
}

.date .settings .day input {
    width: 80px;
    border-radius: 3px 0 0 3px;
}

.date .settings .day i {
    color: #fff;
    font-size: 20px;
    vertical-align: middle;
    line-height: normal;
    top: 0;
    padding: 0 5px;
}

.date .settings .time {
    margin-left: 10px;
    margin-right: 10px;
}

.date .settings .time input {
    width: 50px;
    margin-left: 5px;
}

.date .settings .timeslot span {
    margin-right: 5px;
}

.date .settings .timeslot input {
    width: 50px;
    margin-right: 5px;
}

.date .timeslots .timeslot.disabled {
    color: #bebebe;
}

.date .timeslots .timeslot {
    height: 49px;
    border-bottom: 1px solid #f4f4f4;
    line-height: 49px;
}

.date .timeslots .timeslot span {
    vertical-align: middle;
    line-height: normal;
}

.date .timeslots .timeslot .name {
    display: inline-block;
    width: 110px;
    padding: 5px;
}

.date .timeslots .timeslot .delete {
    display: inline-block;
    float: right;
    height: 49px;
    line-height: 49px;
}

.date .timeslots .timeslot .delete i {
    vertical-align: middle;
    line-height: normal;
    cursor: pointer;
}

.date-slot {
    padding-left: 10px;
}

.date-slot:hover {
    background-color: #f0f0f0;
}

.date-slot .user-image {
    display: inline-block;
    margin-right: 20px;
    line-height: 42px;
    vertical-align: center;
}

.date-slot .user {
    display: inline-block;
}

.date-slot .user .title {
    color: #8e8e8e;
    font-size: 12px;
}

.date-slot .options {
    visibility: hidden;
    float: right;
    height: 40px;
    display: flex;
    align-items: center;
    margin-right: 4px;
}

.date-slot .options i {
    cursor: pointer;
    color: #f4991a;
}

.date-slot:hover .options {
    visibility: visible;
}

.box .table:not(.parents-table) {
    margin: -50px 0 -8px;
}

.box .table.parents-table thead th {
    padding-top: 0;
}

.box .table:not(.parents-table) th,
.box .table:not(.parents-table) td {
    padding: 12px 8px;
}

.box .table:not(.parents-table) tr > th {
    padding-top: 0;
    padding-bottom: 14px;
    border-bottom: 0;
    color: #aaa;
}

.box .table:not(.parents-table) tbody tr:first-child > td {
    border-top: 0;
}

/* --- Bar charts --- */

.bar-chart {
    height: 206px;
    padding-top: 30px;
    position: relative;
    box-sizing: border-box;
}

.bar-groups {
    height: 100%;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
}

.bar-group {
    display: inline-block;
    padding: 0 4px;
    height: 100%;
}

.bar-bars {
    height: 88%;
    text-align: center;
}

.bar-bar {
    height: 85%;
    margin-top: 15%;
    display: inline-block;
    position: relative;
    min-width: 24px;
}

.bar-bar-inner {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    bottom: 0;
    height: 3px;
    min-height: 3px;
}

.bar-bar-fill {
    width: 100%;
    height: 100%;
    text-align: center;
}

.bar-bar-fill .material-icons {
    position: absolute;
    bottom: 12px;
    left: 50%;
    margin-left: -12px;
}

.bar-bar-label {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    z-index: 5;
}

.bar-label {
    color: #b2b8bd;
    font-size: 12px;
    padding-top: 6px;
    text-transform: uppercase;
    font-weight: bold;
}

/* --- Rotating icons --- */

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

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

.rotating {
    -webkit-animation: rotating 1s linear infinite;
    -moz-animation: rotating 1s linear infinite;
    -ms-animation: rotating 1s linear infinite;
    -o-animation: rotating 1s linear infinite;
    animation: rotating 1s linear infinite;
}

/* --- Matrix charts --- */

.matrix-chart {
    height: 206px;
}

.matrix-chart .matrix-row {
    clear: both;
    height: 12.5%;
}

.matrix-chart .matrix-row .x,
.matrix-chart .matrix-row .lb {
    width: 7.692307692%;
    height: 100%;
    float: left;
    border: 2px solid #fff;
    background-color: #47bdf6;
    box-sizing: border-box;
}

.matrix-chart .matrix-row .x .tooltip-wrapper {
    width: 100%;
    height: 100%;
}

.matrix-chart .matrix-row .lb {
    background-color: transparent;
    font-weight: bold;
    color: #c2c7cb;
    font-size: 12px;
    text-align: right;
    line-height: 25px;
    padding-right: 8px;
}

.matrix-chart .matrix-row.ft .lb {
    text-align: center;
    padding-right: 0;
}

/* --- Settings --- */

.settings-header {
    user-select: none;
}

.settings-header h3 {
    display: inline-block;
    margin: 0;
}

.settings-header i {
    float: right;
    margin-top: 10px;
    color: #aaa;
    cursor: pointer;
}

.add-newsservice {
    display: flex;
    padding-top: 15px;
    justify-content: center;
}

.add-newsservice > .dropdown-container {
    margin-right: 12px;
}

.add-newsservice .dropdown {
    height: 40px;
    border: 1px solid #b3b3b3;
    border-radius: 5px;
    background-color: #f4f4f4;
    cursor: pointer;

    display: flex;
    align-items: center;
    user-select: none;
}

.add-newsservice .dropdown-expanded {
    cursor: default;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    border: 1px solid #b3b3b3;
    border-radius: 5px;
    background-color: #f4f4f4;
    z-index: 100;
}

.add-newsservice .dropdown-expanded .item {
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    user-select: none;
}

.modal-submitting {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Loading icon --- */

.flex-all {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

/* --- Parent list --- */

.parents-table .width-50 {
    min-width: 50%;
}

.parents-table .width-40 {
    min-width: 40%;
}

.parents-table .width-30 {
    min-width: 30%;
}

.parents-table .width-20 {
    min-width: 20%;
}

.parents-table .width-10 {
    min-width: 10%;
}

.parents-table .width-0 {
    width: 60px;
}

.parents-table thead th {
    white-space: nowrap;
    padding-top: 32px;
}

.parents-table th,
.parents-table td {
    border-top-color: #e5e5e5;
}

.parents-table tbody tr:first-child td {
    border-top-width: 2px;
}

.parents-table {
    margin-top: 10px;
}

.parents-table th a {
    color: #e2503a;
}

.parents-table td a {
    color: #000;
    font-weight: 600;
}

.parents-table .label {
    font-size: 10px;
    margin-left: 4px;
    padding: 1px 3px;
}

.parents-table td {
    vertical-align: middle;
    height: 32px;
}

/* BETTER */

.better-table-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}

.better-search {
    background-color: #f4f4f4;
    border-radius: 50px;
    border: 0;
    padding-left: 6px;
    padding-right: 12px;
    box-sizing: border-box;
    z-index: 10;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    box-shadow: none !important;
}

input.better-search-input {
    flex: 1;
    background-color: transparent;
    border: none;
    outline: none;
    padding: 14px 0;
    margin: 0;
}

.material-icons.better-search-icon {
    line-height: inherit;
    margin-left: 10px;
    flex: 0;
    position: relative;
    left: initial;
    right: initial;
    top: initial;
    bottom: initial;
}

.better-notification-filter {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}


/* END - BETTER */

.parents-filter {
    z-index: 100;
    position: relative;
    font-size: 14px;
    font-family: Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    user-select: none;
    margin-right: 10px;
    white-space: nowrap;
}

.parents-filter-field-container {
    position: relative;
    height: 36px;
    line-height: 36px;
    color: #a3a3a3;
    z-index: 100;
    pointer-events: none;
}

.parents-filter.active .parents-filter-field-container {
    color: #2aca79;
}

.parents-filter-field {
    background-color: #f4f4f4;
    border-radius: 18px;
    padding-left: 20px;
    padding-right: 20px;
    pointer-events: auto;
    cursor: pointer;
}

.parents-filter-field .material-icons {
    float: right;
    margin-top: 10px;
    margin-right: -5px;
    margin-left: 10px;
    font-size: 15px;
}

.parents-filter .list-container {
    position: absolute;
    min-width: 80px;
    top: 0;
    padding: 45px 15px 10px;
    background-color: white;
    border-radius: 18px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
}

.parents-filter ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.parents-filter li {
    align-items: center;
    display: flex;
    margin-bottom: 2px;
}

.parents-filter a {
    color: black;
    text-decoration: none;
    cursor: pointer;
    line-height: 1;
}

.parents-filter a i {
    color: #bfc4c8;
    margin-right: 6px;
}

.parents-filter a.selected i {
    color: #2aca79;
}

.parents-filter-field.in-search-input {
    display: flex;
    white-space: nowrap;
    background-color: #d8d9db;
    color: #1a1b1f;
}

.parents-filter-field.highlight {
    color: #2aca79;
}

input.tfa-input {
    float: left;
    height: 40px;
    margin-top: 14px;
    box-sizing: border-box;
    margin-right: 14px;
    border-radius: 5px;
    background: #edf1f1;
    border: 0;
    padding: 0 12px;
    font-size: 16px;
    font-family: Avenir, sans-serif;
}

.parents-filter-option {
    height: 28px;
}

.parents-filter-option-active {
    font-weight: bold;
}

/* --- Parent details --- */

.parents-details .back-button {
    color: #9b9b9b !important;
}

.user-image.x-large {
    width: 72px;
    height: 72px;
    float: left;
    border-radius: 36px;
    margin-right: 24px;
}

.parents-details .user-info-left {
    margin-left: 96px;
}

.parents-details .user-info-dl {
    margin-top: 0;
    margin-bottom: 16px;
}

.parents-details .user-info-dl .user-info-block {
    display: flex;
}

.parents-details .user-info-dl .user-info-dt,
.parents-details .user-info-dl .user-info-dd {
    line-height: 28px;
    font-weight: normal;
    font-size: 14px;
}

.parents-details .user-info-dl .user-info-dd {
    align-items: center;
}

.parents-details .user-info-dl .user-info-dt {
    color: #9b9b9b;
    width: 116px;
}

.parents-details .user-info-dl a b {
    background-color: #e2502a;
    border-radius: 50px;
    padding: 10px;
    color: white;
    position: relative;
    top: 5px;
    cursor: pointer;
}

.parents-details .user-info-dl a b:hover {
    background-color: #af3e21;
}

.parents-details h3 {
    font-family: hoy, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 18px;
    margin-top: 0;
    padding-top: 0;
    line-height: 1;
    margin-bottom: 15px;
    font-weight: normal;
}

.parents-details .user-info-dd .material-icons {
    float: left;
    margin-right: 5px;
    margin-left: -2px;
}

.badges > * {
    margin: 3px;
}

.badges {
    margin-bottom: 10px;
    margin-left: 15px;
}

/* --- Tags input --- */

.react-tags {
    position: relative;
    padding: 0;
    border: 0;
    font-size: 14px;
    line-height: 1.4;
}

.react-tags.is-focused {
    border-color: #b1b1b1;
}

.react-tags__selected {
    display: inline;
}

.react-tags__selected-tag, .lozenges .badge {
    display: inline-block;
    box-sizing: border-box;
    margin: 0 6px 6px 0;
    padding: 6px 10px;
    border: 0;
    border-radius: 18px;
    background: #00cf70;
    color: #fff;

    /* match the font styles */
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
}

.lozenges .badge {
    background: #bec4c8;
}

.react-tags__selected-tag:after {
    content: '\2715';
    color: #fff;
    margin-left: 8px;
}

.react-tags__search {
    display: inline-block;

    /* match tag layout */
    padding: 7px 2px;
    margin-bottom: 6px;

    /* prevent autoresize overflowing the container */
    max-width: 100%;
}

/* --- Not invited tabs --- */

.group-tabs {
    display: flex;
    margin-bottom: 32px;
}

.group-tab {
    display: flex;
    flex-direction: column;
    flex: 1;
    flex-basis: 30%;
    margin-right: 20px;
    height: 90px;
    border: 2px solid #ededed;
    color: #4c4c4c;
    border-radius: 5px;
    justify-content: center;
    background: transparent no-repeat left;
    background-size: contain;
    padding-left: 114px;
    cursor: pointer;
}

.group-tab.active,
.group-tab:hover {
    color: #000;
    border-color: #e5e5e5;
    text-decoration: none;
}

.group-tab.active {
    border-color: #e2503a;
}

.group-tab.parents {
    background-image: url('/static/ui/groups/parents.svg');
}

.group-tab.students {
    background-image: url('/static/ui/groups/students.svg');
}

.group-tab.teachers {
    background-image: url('/static/ui/groups/teachers.svg');
}

.group-tab:last-child {
    margin-right: 0;
}

@media screen and (min-width: 30em) {

    .react-tags__search {
        /* this will become the offsetParent for suggestions */
        position: relative;
    }

}

.react-tags__search input {
    max-width: 100%;
    width: 400px;
    display: block;
    box-sizing: border-box;
    margin: 0;
    padding: 0 12px;
    border: 0;
    outline: none;
    background: #f6f6f6;
    height: 36px;
    border-radius: 18px;
    font-size: 14px;
}

.react-tags__search input::-ms-clear {
    display: none;
}

.react-tags__suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 20;
}

@media screen and (min-width: 30em) {

    .react-tags__suggestions {
        width: 240px;
    }

}

.react-tags__suggestions ul {
    margin: 4px -1px;
    padding: 0;
    list-style: none;
    background: white;
    border: 1px solid #d1d1d1;
    border-radius: 2px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.react-tags__suggestions li {
    border-bottom: 1px solid #ddd;
    padding: 6px 8px;
}

.react-tags__suggestions li mark {
    text-decoration: underline;
    background: none;
    font-weight: 600;
}

.react-tags__suggestions li:hover {
    cursor: pointer;
    background: #eee;
}

.react-tags__suggestions li.is-active {
    background: #b7cfe0;
}

.react-tags__suggestions li.is-disabled {
    opacity: 0.5;
    cursor: auto;
}

/* --- Responsiveness --- */

@media (max-width: 1266px) {
    .app-navigation {
        width: 80px;
    }

    .app-content-container {
        margin-left: 80px;
    }

    .app-header {
        left: 80px;
    }

    .nav-main li a,
    .nav-bottom li a,
    .driver-current-item {
        height: 60px;
        overflow: hidden;
        color: transparent !important;
    }

    .nav-main li a i,
    .nav-bottom li a i,
    .driver-current-item i {
        margin: 18px 29px;
    }

    .app-navigation .logo {
        padding-left: 18px;
        padding-right: 18px;
        clear: both;
        margin-bottom: 1px;
    }

    .app-navigation .logo * {
        float: none;
    }

    .app-navigation .logo h1 {
        display: none;
    }
}

.social-tile, .social-tile:hover {
    display: block;
    position: relative;
    box-sizing: border-box;
    padding: 0 !important;
    margin: 0 20px 20px 0 !important;
    width: calc((100% - 40px) / 3);
    background-size: cover;
    color: #000;
    transition: 80ms;
}

.social-tile:nth-child(3n) {
    margin-right: 0 !important;
}

.social-tile:hover {
    transform: scale(1.025);
}

.social-tile--instagram:after {
    display: none;
}

.social-tile__content {
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
    overflow: hidden;
}

.social-tile__content__icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 16px;
}

.social-tile__content__excerpt {
    padding-top: 20px;
    line-height: 20px;
    height: 100px;
    overflow: hidden;
}

.social-tile__content__excerpt:after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 125px;
    height: 20px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 100%);
}

.news-feed {
    margin-bottom: 20px;
}

.news-feed__meta {
    display: flex;
    flex-direction: row;
    text-transform: uppercase;
    font-size: .75rem;
    opacity: 0.5;
}

.news-feed__meta__count {
    margin-right: 10px;
    font-weight: bold;
}

.news-feed__meta__subtitle {
    font-weight: lighter;
}

.news-feed__social-tile-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.box--news, .box--news .overlay {
    border-radius: 10px !important;
}