html {
    font-size: 14px;
}

body {
    padding-top:60px;
}

#top-nav {
    transition: box-shadow 500ms;
}

#top-nav.--not-top {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

#mobile-navbar .navbar-nav {
    padding: 0.5rem 0;
}

.navbar-collapse {
    position: fixed;
    top: 60px;
    right: 0;
    left: 0;
    z-index: 100;
}

.dropdown.show:before {
    position: fixed;
    top: 64px;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(21, 21, 21, 0.5);
    content: '';
    z-index: 1;
}

.bucket-card {
    min-height: 138px;
    transition: box-shadow .2s ease;
}

.bucket-card:hover {
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

@media (min-width: 576px) {
    .bucket-card {
        min-height: 160px;
    }
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
    body {
        padding-top:64px;
    }
}

@media (min-width: 992px) {
    #brand-header, .navbar-avatar {
        width: 220px;
    }
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}

.navbar-avatar {
    padding: 0 1rem;
    min-width: 3.5rem;
    color: #fff;
    border-left: 1px solid rgba(34,34,48,.12);
}

.navbar-avatar:hover {
    color: #fff;
}

.navbar-avatar .account-summary {
    max-width: 10rem
}

.navbar-avatar .account-summary {
    margin-right: .75rem;
    display: block;
    text-align: left;
    flex: 1;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap
}

.navbar-avatar .account-description,.navbar-avatar .account-name {
    margin: auto 0;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    line-height: 1rem
}

.navbar-avatar .account-description {
    font-size: .75rem;
    font-weight: 400;
    opacity: .7
}

.nav-item-avatar .dropdown-menu {
    top: 14px !important;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top:none;
}

.page-title-header {
    max-width: 700px;
}

.alert-error {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

 .user-avatar {
     position: relative;
     margin-bottom: 0;
     display: inline-block;
     width: 2rem;
     height: 2rem;
     font-size: 2rem;
     vertical-align: middle;
     border-radius: 4rem;
     z-index: 2;
 }

.user-avatar-xxl {
    width: 8rem;
    height: 8rem;
    font-size: 8rem
}

.user-avatar-xl {
    width: 5rem;
    height: 5rem;
    font-size: 3.1rem;
}

.user-avatar-lg {
    width: 3rem;
    height: 3rem;
    font-size: 1.5rem;
    line-height: 2.9rem;
}

.user-avatar-md {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 2.25rem
}

.user-avatar-sm {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1.5rem
}

.user-avatar-xs {
    width: 1.25rem;
    height: 1.25rem;
    font-size: 1.25rem
}

.user-avatar-sm .text-avatar {
    font-size: 0.85rem;
    line-height: 1.4rem;
}

.user-avatar-md .text-avatar {
    font-size: 1rem;
    line-height: 2.1rem;
}

.user-avatar.dropdown .dropdown-menu {
    min-width: 6rem
}

.user-avatar.dropdown.focus .avatar-badge>.oi:before,.user-avatar.dropdown.show .avatar-badge>.oi:before,.user-avatar.dropdown:focus .avatar-badge>.oi:before,.user-avatar.dropdown:hover .avatar-badge>.oi:before {
    content: "\e02d"
}

.user-avatar.dropdown.focus .avatar-badge>.fa:before,.user-avatar.dropdown.show .avatar-badge>.fa:before,.user-avatar.dropdown:focus .avatar-badge>.fa:before,.user-avatar.dropdown:hover .avatar-badge>.fa:before {
    content: "\f0d7"
}

.user-avatar.dropdown.focus .offline,.user-avatar.dropdown.show .offline,.user-avatar.dropdown:focus .offline,.user-avatar.dropdown:hover .offline {
    color: #fff
}

.user-avatar>a {
    color: inherit;
    outline: 0;
    z-index: 2;
}

.user-avatar>a:focus,.user-avatar>a:hover {
    color: inherit;
    text-decoration: none
}

.user-avatar img {
    background: #dee2e6;
}

.user-avatar audio,.user-avatar canvas,.user-avatar img,.user-avatar video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 4rem;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: top;
    object-position: top
}

a.user-avatar:focus,a.user-avatar:hover {
    outline: 0
}

a.user-avatar:focus {
    box-shadow: 0 0 0 3px #346cb0
}

.user-avatar-lg .avatar-badge {
    right: 5px
}

.user-avatar-sm .avatar-badge,.user-avatar-xs .avatar-badge {
    right: -2px
}

.user-avatar-floated {
    margin-top: -50%;
    box-shadow: 0 0 0 2px #fff;
    z-index: 3;
}

.user-avatar-floated.user-avatar-xl {
    box-shadow: 0 0 0 3px #fff
}

.user-avatar-floated.user-avatar-xxl {
    box-shadow: 0 0 0 4px #fff
}

.avatar-group {
    display: inline-block;
}

.avatar-group .user-avatar {
    box-shadow: 0 0 0 2px #fff
}

.avatar-group .user-avatar:focus,.avatar-group .user-avatar:hover {
    z-index: 3
}

.avatar-group .user-avatar+.user-avatar {
    display: inline-block;
    margin-left: -0.25em
}

.avatar-group-animated .user-avatar:first-child {
    -webkit-animation: avatarAnimatedStart 1s;
    animation: avatarAnimatedStart 1s
}

.avatar-group-animated .user-avatar:nth-child(2) {
    -webkit-animation: avatarAnimated .75s;
    animation: avatarAnimated .75s
}

.avatar-group-animated .user-avatar:nth-child(3) {
    -webkit-animation: avatarAnimated 1s;
    animation: avatarAnimated 1s
}

.avatar-group-animated .user-avatar:nth-child(4) {
    -webkit-animation: avatarAnimated 1.25s;
    animation: avatarAnimated 1.25s
}

.avatar-group-animated .user-avatar:nth-child(5) {
    -webkit-animation: avatarAnimated 1.5s;
    animation: avatarAnimated 1.5s
}

.avatar-group-animated .tile {
    -webkit-animation: avatarAnimatedEnd 1.5s;
    animation: avatarAnimatedEnd 1.5s
}

@-webkit-keyframes avatarAnimatedStart {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes avatarAnimatedStart {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@-webkit-keyframes avatarAnimated {
    0% {
        opacity: 0;
        transform: translateX(-100%)
    }

    25% {
        opacity: 0;
        transform: translateX(-75%)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes avatarAnimated {
    0% {
        opacity: 0;
        transform: translateX(-100%)
    }

    25% {
        opacity: 0;
        transform: translateX(-75%)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

@-webkit-keyframes avatarAnimatedEnd {
    0% {
        opacity: 0;
        transform: translateX(100%)
    }

    25% {
        opacity: 0;
        transform: translateX(75%)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes avatarAnimatedEnd {
    0% {
        opacity: 0;
        transform: translateX(100%)
    }

    25% {
        opacity: 0;
        transform: translateX(75%)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

.has-notification {
    position: relative;
}

.has-notification:before {
    content: " ";
    background-color: #FF9800;
    width: 7px;
    height: 7px;
    border-radius: 4px;
    position: absolute;
    top: 6px;
    right: 0;
    -webkit-animation: pulse 3s ease-in-out infinite;
    animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
    0% {
        opacity: 0
    }

    50% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.line-heading {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    padding: 2em 0;
    margin-top: 4rem;
}

.line-heading .hr {
    display: block;
    flex: 1;
    margin: 0 1.75rem;
    height: 3px;
    background: #e5e5e5;
}

.comment-spacer {
    margin-left:4rem;
    height: 32px;
    border-left: 2px solid rgba(0,0,0,.125);
}

.comment-card .card-header:before {
    position: absolute;
    top: 16px;
    right: 100%;
    left: -17px;
    display: block;
    width: 0;
    height: 0;
    pointer-events: none;
    content: " ";
    border-color: transparent;
    border-style: solid solid outset;
    border-width: 8px;
    border-right-color: rgba(0,0,0,.125);
}

.alert-error {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

trix-editor {
    min-height: 12rem;
}

.trix-content ul, .trix-content ol {
    padding-left: 1.5rem;
}

trix-toolbar {
    position: sticky;
    top: 85px;
    z-index: 1;
    background: rgba(255,255,255,0.95);
}

blockquote {
    margin: 0 0 0 0.3em;
    padding: 0 0 0 0.6em;
    border-left: 0.3em solid #ccc;
}

.handle {
    cursor: pointer;
}

.sortable {
    min-height: 40px;
}

#sortable-items > li > span,
.sortable > li > span{
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    margin-right: .75rem;

}

.sortable:empty::after, #unassigned-sortable-items:empty::after {
    padding: 6px 10px;
    opacity: 0.5;
}

.sortable:empty::after {
    content: "No items have been assigned to this set yet. Drag and drop an unassigned item into this space to add it to this set.";
}

#unassigned-sortable-items:empty::after {
    content: "No unassigned items available to associate with a set. Add a new item using the button below.";
}

.select2-container--bootstrap4 .select2-selection--single,
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered {
    padding: .429rem 1.072rem;
    line-height: 1.57142857;
}
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    margin: 0 0 0 .1875rem;
    padding: .13rem .75rem;
}

.line-through { text-decoration: line-through !important; }
input[type=checkbox].big-checkbox {
    width: 18px;
    height: 18px;
    margin: 0;
    line-height: 23.5px;
    vertical-align: middle;
}
.btn-task-edit {
    position: absolute;
    left: 10px;
    top: 10px;
}
#stack > li {
    border: 1px solid;
    border-color: #e5e6e9 #dfe0e4 #d0d1d5;
    border-radius: 3px;
    background-color: #fff;
    padding: 12px 12px 0 12px;
    margin-bottom: 10px;
}
.comment h4 a.you { color: crimson; }
.btn-default {
    background: #dee2e6;
    white-space: nowrap;
    overflow: hidden;
}
.grey-500 {
    color: #9e9e9e !important;
}

.tasks-sidebar-panel dd.blur-mask {
    filter: blur(4px);
    -webkit-filter: blur(4px);
    opacity: 0.25;
    transition: opacity 0.3s ease;
}

.tasks-sidebar-panel .panel-body:hover dd {
    filter: none;
    -webkit-filter: none;
    opacity: 1;
}

.checklist-item {
    margin-bottom: -1px;
    border: 1px solid #dee2e6;
    border-left-width: 8px;
}

@media (min-width: 768px) {
    .list-group-sidebar {
        border-right: 1px solid rgba(0,0,0,.1);
    }
    .list-group-sidebar .list-group {
        margin-right: -15px;
        margin-left: -15px;
    }

    .tasks-sidebar-panel, .task-settings-panel {
        position: sticky;
        top: 6rem;
        height: calc(100vh - 6rem);
        right: 0;
        z-index: 2;
        overflow-y: auto;
        overflow-x: hidden;
    }
}

.modal-body .tasks-sidebar-panel, .modal-body .task-settings-panel {
    top: 0;
    height: auto;
}

@media (max-width: 767.98px) {
    .checklist-item i.fa-5x {
        font-size: 4rem;
    }
}

@media (max-width: 575.98px) {
    .checklist-item i.fa-5x {
        font-size: 3rem;
    }
    .list-group-item {
        padding: .75rem .25rem;
    }
}

@media (min-width: 768px) {
    .sticky-panel {
        position: sticky;
        top: 6rem;
        height: calc(100vh - 6rem);
        right: 0;
        z-index: 2;
        overflow-y: auto;
        overflow-x: hidden;
    }
}

[data-toggle="collapse"] .fa:before {
    content: "\f139";
}

[data-toggle="collapse"].collapsed .fa:before {
    content: "\f13a";
}

.progress-circle {
     position: relative;
     padding: 0;
     background-color: #dee2e6;
     line-height: 6em;
 }

.progress-circle, .progress-circle:after, .left-half-clipper, .value-bar, .progress-circle.over50 .first50-bar {
    border-radius: 50%;
}

.progress-circle, .left-half-clipper, .value-bar, .progress-circle.over50 .first50-bar {
    width: 6em;
    height: 6em;
}

.progress-circle:after, .progress-circle span, .left-half-clipper, .value-bar, .progress-circle.over50 .first50-bar {
    position: absolute;
    text-align: center;
}

.progress-circle:after{
    border: none;
    top: 0.35em;
    left: 0.35em;
    display: block;
    width: 5.3em;
    height: 5.3em;
    background-color: #fff;
    content: " ";
}

.progress-circle span {
    display: block;
    color: #53777A;
    z-index: 2;
    margin: 0.5rem;
}

.left-half-clipper {
    clip: rect(0, 6em, 6em, 3em);
}

/* when p>50, don't clip left half*/
.progress-circle.over50 .left-half-clipper {
    clip: rect(auto,auto,auto,auto);
}

.value-bar {
    clip: rect(0, 3em, 6em, 0);
    border: 0.45em solid #007bff;
    box-sizing: border-box;
}

/* Progress bar filling the whole right half for values above 50% */
.progress-circle.over50 .first50-bar {
    clip: rect(0, 6em, 6em, 3em);
    background-color: #007bff;
}

.progress-circle:not(.over50) .first50-bar { display: none; }

.progress-text {
    line-height: initial;
    top: 6rem;
    font-size: 85%;
}

@media (max-width: 767.98px) {
    .progress-circle, .left-half-clipper, .value-bar, .progress-circle.over50 .first50-bar {
        width: 5em;
        height: 5em;
    }

    .progress-circle {
        line-height: 4em;
    }

    .progress-circle:after{
        top: 0.35em;
        left: 0.35em;
        width: 4.3em;
        height: 4.3em;
    }

    .left-half-clipper, .progress-circle.over50 .first50-bar {
        clip: rect(0, 5em, 5em, 2.5em);
    }

    .value-bar {
        clip: rect(0, 2.5em, 5em, 0);
    }

    .progress-text {
        top: 5rem;
    }
}

@media (max-width: 575.98px) {
    .progress-circle, .left-half-clipper, .value-bar, .progress-circle.over50 .first50-bar {
        width: 4em;
        height: 4em;
    }

    .progress-circle {
        line-height: 4em;
    }

    .progress-circle:after{
        top: 0.35em;
        left: 0.35em;
        width: 3.3em;
        height: 3.3em;
    }

    .left-half-clipper, .progress-circle.over50 .first50-bar {
        clip: rect(0, 4em, 4em, 2em);
    }

    .value-bar {
        clip: rect(0, 2em, 4em, 0);
    }

    .progress-text {
        top: 4rem;
    }
}

.progress-circle.p0 .value-bar { display: none; }
.progress-circle.p1 .value-bar { transform: rotate(4deg); }
.progress-circle.p2 .value-bar { transform: rotate(7deg); }
.progress-circle.p3 .value-bar { transform: rotate(11deg); }
.progress-circle.p4 .value-bar { transform: rotate(14deg); }
.progress-circle.p5 .value-bar { transform: rotate(18deg); }
.progress-circle.p6 .value-bar { transform: rotate(22deg); }
.progress-circle.p7 .value-bar { transform: rotate(25deg); }
.progress-circle.p8 .value-bar { transform: rotate(29deg); }
.progress-circle.p9 .value-bar { transform: rotate(32deg); }
.progress-circle.p10 .value-bar { transform: rotate(36deg); }
.progress-circle.p11 .value-bar { transform: rotate(40deg); }
.progress-circle.p12 .value-bar { transform: rotate(43deg); }
.progress-circle.p13 .value-bar { transform: rotate(47deg); }
.progress-circle.p14 .value-bar { transform: rotate(50deg); }
.progress-circle.p15 .value-bar { transform: rotate(54deg); }
.progress-circle.p16 .value-bar { transform: rotate(58deg); }
.progress-circle.p17 .value-bar { transform: rotate(61deg); }
.progress-circle.p18 .value-bar { transform: rotate(65deg); }
.progress-circle.p19 .value-bar { transform: rotate(68deg); }
.progress-circle.p20 .value-bar { transform: rotate(72deg); }
.progress-circle.p21 .value-bar { transform: rotate(76deg); }
.progress-circle.p22 .value-bar { transform: rotate(79deg); }
.progress-circle.p23 .value-bar { transform: rotate(83deg); }
.progress-circle.p24 .value-bar { transform: rotate(86deg); }
.progress-circle.p25 .value-bar { transform: rotate(90deg); }
.progress-circle.p26 .value-bar { transform: rotate(94deg); }
.progress-circle.p27 .value-bar { transform: rotate(97deg); }
.progress-circle.p28 .value-bar { transform: rotate(101deg); }
.progress-circle.p29 .value-bar { transform: rotate(104deg); }
.progress-circle.p30 .value-bar { transform: rotate(108deg); }
.progress-circle.p31 .value-bar { transform: rotate(112deg); }
.progress-circle.p32 .value-bar { transform: rotate(115deg); }
.progress-circle.p33 .value-bar { transform: rotate(119deg); }
.progress-circle.p34 .value-bar { transform: rotate(122deg); }
.progress-circle.p35 .value-bar { transform: rotate(126deg); }
.progress-circle.p36 .value-bar { transform: rotate(130deg); }
.progress-circle.p37 .value-bar { transform: rotate(133deg); }
.progress-circle.p38 .value-bar { transform: rotate(137deg); }
.progress-circle.p39 .value-bar { transform: rotate(140deg); }
.progress-circle.p40 .value-bar { transform: rotate(144deg); }
.progress-circle.p41 .value-bar { transform: rotate(148deg); }
.progress-circle.p42 .value-bar { transform: rotate(151deg); }
.progress-circle.p43 .value-bar { transform: rotate(155deg); }
.progress-circle.p44 .value-bar { transform: rotate(158deg); }
.progress-circle.p45 .value-bar { transform: rotate(162deg); }
.progress-circle.p46 .value-bar { transform: rotate(166deg); }
.progress-circle.p47 .value-bar { transform: rotate(169deg); }
.progress-circle.p48 .value-bar { transform: rotate(173deg); }
.progress-circle.p49 .value-bar { transform: rotate(176deg); }
.progress-circle.p50 .value-bar { transform: rotate(180deg); }
.progress-circle.p51 .value-bar { transform: rotate(184deg); }
.progress-circle.p52 .value-bar { transform: rotate(187deg); }
.progress-circle.p53 .value-bar { transform: rotate(191deg); }
.progress-circle.p54 .value-bar { transform: rotate(194deg); }
.progress-circle.p55 .value-bar { transform: rotate(198deg); }
.progress-circle.p56 .value-bar { transform: rotate(202deg); }
.progress-circle.p57 .value-bar { transform: rotate(205deg); }
.progress-circle.p58 .value-bar { transform: rotate(209deg); }
.progress-circle.p59 .value-bar { transform: rotate(212deg); }
.progress-circle.p60 .value-bar { transform: rotate(216deg); }
.progress-circle.p61 .value-bar { transform: rotate(220deg); }
.progress-circle.p62 .value-bar { transform: rotate(223deg); }
.progress-circle.p63 .value-bar { transform: rotate(227deg); }
.progress-circle.p64 .value-bar { transform: rotate(230deg); }
.progress-circle.p65 .value-bar { transform: rotate(234deg); }
.progress-circle.p66 .value-bar { transform: rotate(238deg); }
.progress-circle.p67 .value-bar { transform: rotate(241deg); }
.progress-circle.p68 .value-bar { transform: rotate(245deg); }
.progress-circle.p69 .value-bar { transform: rotate(248deg); }
.progress-circle.p70 .value-bar { transform: rotate(252deg); }
.progress-circle.p71 .value-bar { transform: rotate(256deg); }
.progress-circle.p72 .value-bar { transform: rotate(259deg); }
.progress-circle.p73 .value-bar { transform: rotate(263deg); }
.progress-circle.p74 .value-bar { transform: rotate(266deg); }
.progress-circle.p75 .value-bar { transform: rotate(270deg); }
.progress-circle.p76 .value-bar { transform: rotate(274deg); }
.progress-circle.p77 .value-bar { transform: rotate(277deg); }
.progress-circle.p78 .value-bar { transform: rotate(281deg); }
.progress-circle.p79 .value-bar { transform: rotate(284deg); }
.progress-circle.p80 .value-bar { transform: rotate(288deg); }
.progress-circle.p81 .value-bar { transform: rotate(292deg); }
.progress-circle.p82 .value-bar { transform: rotate(295deg); }
.progress-circle.p83 .value-bar { transform: rotate(299deg); }
.progress-circle.p84 .value-bar { transform: rotate(302deg); }
.progress-circle.p85 .value-bar { transform: rotate(306deg); }
.progress-circle.p86 .value-bar { transform: rotate(310deg); }
.progress-circle.p87 .value-bar { transform: rotate(313deg); }
.progress-circle.p88 .value-bar { transform: rotate(317deg); }
.progress-circle.p89 .value-bar { transform: rotate(320deg); }
.progress-circle.p90 .value-bar { transform: rotate(324deg); }
.progress-circle.p91 .value-bar { transform: rotate(328deg); }
.progress-circle.p92 .value-bar { transform: rotate(331deg); }
.progress-circle.p93 .value-bar { transform: rotate(335deg); }
.progress-circle.p94 .value-bar { transform: rotate(338deg); }
.progress-circle.p95 .value-bar { transform: rotate(342deg); }
.progress-circle.p96 .value-bar { transform: rotate(346deg); }
.progress-circle.p97 .value-bar { transform: rotate(349deg); }
.progress-circle.p98 .value-bar { transform: rotate(353deg); }
.progress-circle.p99 .value-bar { transform: rotate(356deg); }
.progress-circle.p100 .value-bar { transform: rotate(360deg); }

.stack-task-list > div {
    scroll-margin-top: 64px;
}

.time-frame-title {
    position: sticky;
    top: 65px;
    z-index: 1;
    background: rgba(255,255,255,0.9);
    padding-top: 1.3rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0;
}

#overdue .time-frame-title {
    color: #F44336;
}

.modal-xl.modal-dialog {
    max-width: 1140px;
}

@media print {
    form button[type=submit] {
        display: none;
    }
}