.pre-line,
paper-textarea {
    word-break: break-word
}

.calendars,
.calendars .cel:nth-child(7n+1),
.calendars .days,
.clearfix:after,
[clearfix]:after {
    clear: both
}

.event,
.search-box input,
.viewEvent {
    box-sizing: border-box
}

.day .eventAlt,
.history .editData .editor {
    text-transform: capitalize
}

body {
    background: #fafafa;
    font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #333;
    -webkit-touch-callout: none !important
}

.pre-line {
    white-space: pre-line
}

.clearfix:after,
.clearfix:before,
[clearfix]:after,
[clearfix]:before {
    content: " ";
    display: table
}

[visibHidden] {
    visibility: hidden
}

paper-header-panel {
    background-color: #EBEBEB
}

paper-header-panel #paperToggle {
    margin-right: 5px
}

[drawer] {
    background-color: #fff
}

[drawer] #mainContainer {
    background: #ebebeb
}

[drawer] paper-menu {
    outline: 0;
    background: 0 0
}

[drawer] paper-menu iron-icon {
    margin-right: 10px !important
}

[drawer] paper-menu .userShared {
    margin-left: 35px !important
}
[drawer] paper-menu .userShared .avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    padding: 0;
    margin: 0 0 3px;
    margin-right: 10px!important;
}

.sortWrapper {
    -webkit-user-select: none !important
}

[offline] paper-toolbar {
    background: #484848
}

paper-toolbar iron-icon {
    color: #fff
}

paper-toolbar #scrollerMonth {
    color: #FFF;
    margin-right: 15px
}

.colorful {
    background: #4285f4;
    color: #fff
}

.green {
    background-color: #00C766
}

.red {
    background-color: #f44336
}

.fab-floating {
    position: absolute;
    bottom: 16px;
    right: 31px
}

.calendars .cel,
.event,
.event paper-icon-button {
    position: relative
}

[offline] .fab-floating {
    background: #484848
}

#toastError,
[color="1"] {
    background-color: #ED143D
}

paper-fab {
    box-shadow: 0 8px 25px 0 rgba(0, 0, 0, .3), 0 5px 7px 0 rgba(0, 0, 0, .19)
}

paper-icon-button.add {
    color: #FF6E60
}

paper-toast .toast-hide-button {
    cursor: pointer
}

.toast-hide-button {
    color: #FF0;
    float: right
}

#toastOffline {
    min-width: 135px
}

.past [color] {
    opacity: .5
}

[color="0"],
[color=null] {
    background-color: #6B6B6B
}

[color="2"] {
    background-color: orange
}

[color="3"] {
    background-color: #036CFF
}

[color="4"] {
    background-color: #00AB29
}

[color="10"] {
    background-color: #D703FF
}

.calendars_wrap {
    opacity: 1
}

.calendars_wrap .prevYear {
    text-align: center;
    font-size: 12px;
    padding: 12px 0 16px;
    cursor: pointer
}

.calendars {
    margin: 0 auto;
    color: #5d5d5d;
    width: 211px
}

.calendars h2 {
    margin: 4px 0 8px;
    font-size: 20px
}

.calendars h2.focus {
    color: #000
}

.calendars .cel {
    width: 30px;
    height: 26px;
    text-align: center;
    float: left;
    cursor: default;
    font-size: 12px;
    letter-spacing: 2px
}

#tasks .task .avatar:not([owner]),
.calendars .cel[pointer] {
    cursor: pointer
}

.calendars .cel.focus .day-nr {
    font-weight: 700;
    color: #000;
    font-size: 15px;
    margin-top: -2px;
    margin-bottom: -2px
}

.calendars .cel[today] .day-nr {
    color: #2196F3;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -1px;
    margin: -5px 2px -3px 0;
    line-height: 22px
}

@-moz-document url-prefix() {
    .calendars .cel[today] .day-nr {
        height: 23px
    }
}

.calendars .cel[today] {
    font-weight: 700;
    text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF
}

.calendars .cel[past] {
    opacity: .5
}

.event paper-ripple,
.event[changed],
[past] .day .dayName,
[past] .day .eventAlt {
    opacity: .4
}

.calendars .cel .event-color {
    width: 30px;
    height: 2px;
    top: -1px;
    margin-bottom: 1px
}

.calendars .cel .event-color.color0,
.calendars .cel .event-color.colornull {
    width: 18px;
    margin-left: auto;
    margin-right: auto
}

.calendars .cel:nth-child(7n+5),
.calendars .cel:nth-child(7n+6) {
    color: #000
}

.calendars .cel:nth-child(7n) {
    color: #E91E63
}

.day.monthIndexWrapper {
    padding-bottom: 0;
    padding-top: 80px
}

.futurestart .day,
[today] .day {
    border-top: #07F 2px solid;
    border-bottom: #07F 2px solid;
    background-color: rgba(0, 119, 255, .2)
}

[offline] .futurestart .day,
[offline] [today] .day {
    border-top: #4A4A4A 2px solid;
    border-bottom: #4A4A4A 2px solid;
    background-color: rgba(0, 0, 0, .2)
}

[empty] .day {
    padding-top: 0;
    padding-bottom: 0
}

.day .monthIndex {
    text-align: right;
    color: #6C6C6C;
    font-size: 40px;
    line-height: 38px;
    margin: 0 0 15px
}

.day .dayName {
    margin-bottom: 2px;
    color: #666;
    width: 31px;
    text-align: right;
    margin-right: 20px
}

.today .day .dayName .dayD,
.today .day .dayName h2 {
    color: #07F
}

@media screen and (max-width:801px) {
    .fab-floating {
        right: 16px
    }

    .day .dayName {
        margin-right: 10px
    }
}

.day .dayName .dayM {
    font-size: 90%;
    margin: 2px;
    font-weight: 100
}

.day .dayName .dayD {
    font-size: 90%;
    margin-top: -5px
}

[weekend] .day .dayName {
    font-weight: 500;
    color: #333
}

[sunday] .day .dayName {
    color: #E91E63
}

.day .eventAlt {
    font-size: 16px;
    padding: 6px 0;
    color: #666
}

[weekend] .day .eventAlt {
    font-weight: 500;
    color: #333
}

[sunday] .day .eventAlt {
    color: #E91E63
}

.day h2 {
    margin: 0
}

.eventMaxWidth {
    max-width: 800px
}

.eventInfoWrapper,
.wrapper .viewEvent {
    max-width: 880px
}

paper-material[drag-active] {
    box-shadow: none !important
}

.event {
    background-color: #fff;
    border-bottom: 1px solid #ECECEC;
    min-height: 35px;
    font-size: 14px;
    font-weight: 300;
    top: 0;
    transition: top 0s
}

[offline] .event,
[past] .event {
    background: #F7F7F7
}

.sortable-chosen .event {
    position: relative;
    z-index: 1;
    top: -4px;
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .4);
    opacity: 1
}

.sortable-ghost .event {
    opacity: 0
}

.event .info {
    color: #D6D6D6;
    float: right;
    height: 18px;
    margin-top: 3px
}

.event .content {
    padding: 8px 7px 4px 5px
}

.past .event .content {
    box-shadow: none
}

.event .header {
    margin: 0;
    font-size: 20px
}

.event .place {
    font-weight: 700
}

.event .times b,
.event .title {
    font-weight: 400
}

.event .times {
    margin-bottom: 2px
}

.event .times .time {
    margin-right: 10px
}

.event .users span {
    min-width: 18px;
    display: inline-block;
    background-color: #FFF;
    text-align: center;
    border: 1px solid #F44336;
    padding: 0 4px;
    margin: 2px;
    color: #F44336
}

.event .users span[driver="1"] {
    font-weight: 500;
    margin-left: 5px
}

.event .users span[confirmed="1"] {
    color: inherit;
    border-color: #D7D7D7
}

.event .users span[custom-user] {
    border-style: dashed !important;
    border-color: #BFBFBF
}

.event .users span:first-child {
    margin-left: 0
}

.event .users .visibility {
    color: #C5C5C5;
    margin-left: 4px;
    margin-bottom: -2px
}

.event .company span {
    margin-bottom: 4px
}

.event .company .person {
    font-weight: 400
}

.event .notes {
    border: 1px dashed silver;
    display: inline-block;
    padding: 0 5px;
    margin: 3px 0 5px;
    font-weight: 500
}

.event .status {
    font-weight: 500;
    margin-top: 3px;
    display: inline-block;
    padding: 1px 5px;
    background-color: #e8e8e8
}

[past] .event .status {
    background-color: transparent !important
}

.event .status-date {
    font-weight: 400;
    padding: 1px 3px
}

.event .created {
    padding: 0;
    background-color: transparent;
    font-weight: 600
}

.event .created,
.event .status-date {
    font-size: 10px
}

.event [color] {
    width: 4px
}

.event [color="0"] {
    margin: 7px 0
}

.event .infoIcon [icon=feedback] {
    color: #616161
}

.event .infoIcon [icon=more-vert] {
    color: #404040
}

.viewEvent {
    padding: 20px;
    font-weight: 400
}

.viewEvent .time {
    display: inline-block;
    margin-right: 10px
}

.viewEvent h2 {
    font-weight: 500;
    text-align: center
}

.viewEvent h3,
.viewEvent h4 {
    margin-bottom: 4px
}

.viewEvent .title {
    font-weight: 300
}

.viewEvent .doscLink {
    font-size: 20px;
    text-decoration: none;
    margin-top: 13px;
    display: inline-block;
    color: #00F
}

.card {
    max-width: 500px;
    margin: 10px auto;
    background-color: #FFF
}

@media screen and (max-width:500px) {
    .card {
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        min-height: 100%;
        position: absolute;
        width: 100%
    }
}

.overlay {
    background-color: rgba(0, 0, 0, .3) !important
}

.eventUpdateWrapper {
    max-width: 880px
}

.eventUpdate {
    max-width: 500px;
    margin: 10px auto;
    background-color: #FFF
}

@media screen and (max-width:801px) {
    .eventUpdate .editorActions {
        display: none !important
    }
}

.eventUpdate .eventUpdate-content {
    padding: 14px
}

.eventUpdate h3 {
    margin-bottom: -2px;
    color: #BFBFBF
}

.eventUpdate .colorHeader {
    width: 100%;
    height: 25px;
    font-size: 0;
    box-shadow: inset 0 -4px 9px -7px rgba(0, 0, 0, .57)
}

.eventUpdate #changeColor {
    background-clip: content-box;
    padding: 0 3px 0 0
}

.eventUpdate #changeColor option {
    font-size: 13pt
}

.eventUpdate paper-select paper-item[selected] {
    background: #f5f5f5;
    border: 1px solid #d0d0d0
}

.eventUpdate paper-select .short {
    min-width: 50px;
    display: inline-block;
    font-weight: 700
}

.eventUpdate paper-input input {
    margin: -2px 0 !important
}

.eventUpdate paper-input paper-input-container {
    padding: 5px 0
}

.eventUpdate paper-input[disabled] .underline {
    top: -1px
}

.eventUpdate .html-select {
    border: none;
    border-bottom: 1px #757575 solid;
    width: 100%;
    height: 27px;
    padding: 4px 0 0;
    outline: 0
}

.eventUpdate paper-input[type=date] {
    height: 19px
}

.eventUpdate paper-input[type=date] input {
    height: 24px
}

.eventUpdate .paper-input-label {
    color: #727272;
    font-size: 12px;
    font-weight: 400;
    top: 5px;
    position: relative
}

.eventUpdate .editor-times paper-input {
    width: 25%;
    float: left
}

.eventUpdate .users {
    margin: 0 0 10px
}

.eventUpdate .users .label {
    color: #b1b1b1;
    font-size: 12px;
    padding-bottom: 8px
}

.eventUpdate .users select {
    width: 64px;
    height: 28px;
    margin: 6px 0;
    background-color: #FFF;
    border: 1px solid #D7D7D7;
    font-size: 14px
}

.eventUpdate .users #userVisib {
    color: #757575
}

.eventUpdate .users #userVisib::shadow #icon {
    display: inline-block
}

.search-box {
    padding: 0 11px 0 5px;
    position: relative
}

.search-box:hover input {
    background: rgba(255, 255, 255, .25)
}

.search-box .searchIcon {
    position: absolute
}

.search-box input {
    padding: 11px 12px 8px 40px;
    background: rgba(255, 255, 255, .15);
    border: none;
    color: #FFF;
    font-size: 17px;
    width: 100%;
    border-radius: 2px
}

@media all and (min-width:481px) and (orientation:landscape) {
    .search-box .searchIcon {
        left: 13px;
        opacity: 1;
        top: 1px
    }

    .search-box input {
        padding: 11px 22px 8px 60px
    }
}

#board .cards-wrapper-spacer {
    max-width: 900px
}

#board .cards-wrapper {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto
}

#board paper-card {
    width: 100%;
    margin-bottom: 16px;
    background-color: #fff
}

#board .card-buttons {
    margin: -5px 9px 11px;
    min-height: 41px
}

#board .editInfo {
    opacity: .5;
    padding: 0 0px 16px
}

#board .title-text {
    padding: 16px 16px 0;
    font-size: 24px;
    font-weight: 700;
    color: #1F8EE6
}

.history {
    margin: 15px 0
}

.history .editData {
    margin-left: 50px;
    color: #6B6B6B
}

@media screen and (max-width:801px) {
    .history .editData {
        margin-left: 40px
    }
}

.history .editData span {
    margin-right: 5px
}

.history .editData .action {
    font-weight: 700;
    font-size: 21px
}

.history .editData .changeDetails {
    top: 2px;
    position: relative
}

.history .board {
    max-width: 520px
}

.history .board .content {
    min-height: 25px;
    margin: 11px 16px;
    border-bottom: 1px solid;
    padding-bottom: 3px
}

.history .version .number {
    margin-left: 10px
}

.history .monthIndexHistory {
    font-size: 24px;
    font-weight: 800;
    margin-right: 12px
}

.history .reorderIcons {
    color: #6B6B6B;
    padding: 9px 0
}

paper-menu a>*,
paper-menu paper-icon-item>*,
paper-menu paper-item>* {
    pointer-events: none
}

.order-menu {
    padding: 35px 0 0;
    color: #333
}

.order-menu .icon {
    color: #7F7F7F;
    width: 42px;
    height: 42px;
    cursor: pointer;
    padding: 0 18px
}

#users,
#usersDeleted {
    margin: 20px 0
}

#users .user,
#usersDeleted .user {
    background: #fff
}

#users .user .username,
#usersDeleted .user .username {
    margin-right: 5px
}

#users .user .fullname,
#usersDeleted .user .fullname {
    font-weight: 500
}

#users .user .email,
#usersDeleted .user .email {
    color: inherit;
    text-decoration: inherit
}

#users .user .panel-access,
#usersDeleted .user .panel-access {
    color: #BBB;
    position: relative;
    top: -2px
}

#users .user .short,
#usersDeleted .user .short {
    min-width: 18px;
    display: inline-block;
    background-color: #FFF;
    text-align: center;
    border: 1px solid #D7D7D7;
    padding: 0 4px;
    margin: 2px 2px 2px 5px;
    font-size: 14px;
    line-height: 17px;
    position: relative;
    top: -2px;
    font-weight: 500;
    color: #585858
}

#users .user .avatar .avatar-short,
#usersDeleted .user .avatar .avatar-short {
    font-weight: 500;
    color: #fff;
    text-align: center;
    padding-top: 8px
}

#tasks {
    padding: 20px
}

#tasks emana-task {
    max-width: 500px;
    display: block
}

#tasks h4 {
    margin-bottom: 3px;
    color: #575757;
    font-weight: 500
}

#tasks #pinned-tasks {
    margin-bottom: 50px
}

#tasks .task {
    background: #fff;
    padding: 2px 14px 0;
    margin-bottom: 4px;
    border-radius: 3px;
    min-height: 42px
}

#tasks .task[expand-mode] .avatar {
    margin-top: 8px
}

#tasks .task[creator-mode] {
    margin-bottom: 30px
}

#tasks .task[creator-mode] .content {
    display: block !important
}

#tasks .task:not([expand-mode]) .save,
#tasks .task:not([expand-mode]) [empty],
#tasks .task:not([expand-mode]) paper-icon-button:not([starred]),
#tasks .task:not([expand-mode]) paper-menu-button,
#tasks .task:not([expand-mode])[creator-mode] .actions,
#tasks .task:not([expand-mode])[creator-mode] .title,
#tasks .task[creator-mode] .delete-task {
    display: none
}

#tasks .task paper-icon-button[pinned],
#tasks .task paper-icon-button[starred] {
    color: #2196F3
}

#tasks .task:not([expand-mode]) paper-icon-button[starred] {
    position: absolute;
    bottom: 0;
    right: 2px;
    background: #fff;
    box-shadow: -3px -3px 9px 0 #fff;
    border-radius: 11px
}

#tasks .task:not([expand-mode])[creator-mode] {
    border: 2px solid #a7a7a7;
    border-radius: 3px
}

#tasks .task:not([expand-mode]) .title {
    margin-bottom: -10px
}

#tasks .task paper-button.save {
    background: #2196F3;
    color: #fff;
    padding: 8px;
    margin: 0 0 8px
}

#tasks .task paper-icon-button {
    color: #767676
}

#tasks .task paper-menu-button {
    padding: 0;
    position: relative
}

#tasks .task .updated-at-wrapper {
    font-size: 12px;
    font-weight: 500;
    position: relative;
    top: -4px;
    padding-bottom: 6px;
}

#tasks .task .avatar-wrapper {
    display: inline-block
}

#tasks .task .avatar-wrapper.delete-mode:not([owner]) .avatar:not(.avatar-delete) {
    display: none
}

#tasks .task .avatar,
#tasks .task .avatar-wrapper.delete-mode:not([owner]) .avatar-delete {
    display: inline-block
}

#tasks .task .avatar {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    overflow: hidden;
    background: #2196f3;
    padding: 0;
    margin: 0 0 3px
}

#tasks .task .avatar.avatar-delete {
    display: none;
    background: 0 0;
    color: #767676;
    border-radius: initial;
    padding: 0;
    overflow: auto
}

#tasks .task .avatar.avatar-delete,
#tasks .task .avatar[avatar-short] {
    width: 25px;
    height: 25px;
    border: none
}

#tasks .task .avatar .avatar-short {
    color: #fff;
    font-size: 12px;
    padding: 5px 0;
    text-align: center;
    overflow: hidden
}

.item {
    padding: 4px 4px 8px
}

@media screen and (min-width:801px) {
    .item {
        padding-left: 20px
    }
}

@media screen and (min-width:950px) {
    .item {
        padding-right: 90px
    }
}

#devTools {
    opacity: .5
}