:root {
    --layout-header-height: 57px;
    --layout-breadcrumb-height: 59px;
    --layout-toolbar-height: 62px;
}

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src:
        url(../vendor/fonts/MaterialIcons-Regular.woff2) format('woff2'),
        url(../vendor/fonts/MaterialIcons-Regular.woff) format('woff'),
        url(../vendor/fonts/MaterialIcons-Regular.ttf) format('truetype');
}
@font-face {
    font-family: 'Font BZ';
    font-style: normal;
    font-weight: 400;
    src: url(../vendor/fonts/font-bz.eot);
    src:
        local('Font BZ'),
        local('FontBZ-Regular'),
        url(../vendor/fonts/font-bz.ttf) format('truetype');
}
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 12px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}
html.top-full .navbar.main {
    height: var(--layout-header-height);
    background-color: var(--primary-color);
}
[class^='bz-icon-'],
[class*=' bz-icon-'] {
    font-family: 'Font BZ' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 18px;
}

.bz-icon-user-dropdown-admin-panel-settings:before {
    content: '\e900';
}
.bz-icon-user-dropdown-dashboard:before {
    content: '\e901';
}
.bz-icon-user-dropdown-devices:before {
    content: '\e902';
}
.bz-icon-user-dropdown-form-templates:before {
    content: '\e903';
}
.bz-icon-user-dropdown-help-center:before {
    content: '\e904';
}
.bz-icon-user-dropdown-log-out:before {
    content: '\e905';
}
.bz-icon-user-dropdown-my-account:before {
    content: '\e906';
}
.bz-icon-user-dropdown-my-contact:before {
    content: '\e907';
}
.bz-icon-user-dropdown-project-templates:before {
    content: '\e908';
}

.material-icons.clickable {
    cursor: pointer;
}
.material-icons.md-14 {
    font-size: 14px;
}
.material-icons.md-15 {
    font-size: 15px;
}
.material-icons.md-16 {
    font-size: 16px;
}
.material-icons.md-17 {
    font-size: 17px;
}
.material-icons.md-18 {
    font-size: 18px;
}
.material-icons.md-19 {
    font-size: 19px;
}
.material-icons.md-20 {
    font-size: 20px;
}
.material-icons.md-21 {
    font-size: 21px;
}
.material-icons.md-22 {
    font-size: 22px;
}
.material-icons.md-23 {
    font-size: 23px;
}
.material-icons.md-24 {
    font-size: 24px;
}
.material-icons.md-25 {
    font-size: 25px;
}
.material-icons.md-28 {
    font-size: 28px;
}
.material-icons.md-36 {
    font-size: 36px;
}
.material-icons.md-40 {
    font-size: 40px;
}
.material-icons.md-48 {
    font-size: 48px;
}
.material-icons.prio-levelO {
    color: #7c7c7c;
}
.material-icons.prio-level1 {
    color: #339966;
}
.material-icons.prio-level2 {
    color: #669933;
}
.material-icons.prio-level3 {
    color: #ffcc33;
}
.material-icons.prio-level4 {
    color: #ff9900;
}
.material-icons.prio-level5 {
    color: #ff6633;
}
.material-icons.prio-level6 {
    color: #990000;
}
.layout,
.layout-column,
.layout-row {
    display: -ms-flexbox;
}
.material-icons.md-light {
    color: rgba(255, 255, 255, 1);
}
.welcome-title {
    color: #e7e7e7;
    text-transform: uppercase;
}
.welcome-text {
    color: #e7e7e7;
}
.Css-Center-Modal {
    bottom: 10%;
}
@media (min-width: 768px) {
    .Css-Center-Modal {
        width: 80%;
        margin-left: -40%;
        /* position: fixed;
      top: 10%;
      left: 18.5%;
      z-index: 1050;
      width: 80%;
      height: 80%;
      margin-left: -10%;*/
    }
}
.strike-text {
    text-decoration: line-through;
}
.bold-text {
    font-weight: 800;
}
hr {
    margin: 20px 0;
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, #eee, #888, #eee);
}
h5.filter-title {
    color: #333;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 10px;
}

.btn {
    border-radius: 4px;
}
.btn-active {
    background-color: #999 !important;
}
.btn-active:hover {
    background-color: #999 !important;
}
.btn:not(.btn-primary):not(.btn-zone):not(.btn-tag):not(.btn-document):not(.btn-warning):not(.btn-danger):not(
        .btn-success
    ) {
    background-color: #f5f5f5;
    background-image: none;
    border: none;
}
.btn:not(.btn-primary):not(.btn-warning):not(.btn-danger):not(.btn-success):not(.btn-header):hover {
    background-color: #dadada !important;
}
.btn[disabled='disabled'],
.btn:disabled:not(.btn-primary) {
    background-color: #dadada;
}
.done {
    background: #008000;
    border-color: #008000;
    color: #ffffff;
}
.in-progress {
    background: #ab7a4b;
    border-color: #ab7a4b;
    color: #ffffff;
}
.todo {
    background: #ff0000;
    border-color: #ff0000;
    color: #ffffff;
}
.table-bordered th,
.table-bordered td {
    border: none;
    vertical-align: middle;
}

.list-breadcrumb {
    background-color: var(--secondary-color);
    z-index: 10;
    height: var(--layout-breadcrumb-height);
    display: flex;
    align-items: center;
}
.list-breadcrumb .breadcrumb {
    height: auto;
    line-height: normal;
    display: flex;
    align-items: center;
}
.list-breadcrumb .breadcrumb li {
    height: auto;
    line-height: normal;
}

.innerLR.innerLR-head.forms-list-breadcrumb {
    background-color: var(--secondary-color);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    margin: var(--layout-header-height) 0 0 0;
}
.innerLR.innerLR-head.forms-list-breadcrumb .md-button {
    color: white;
}
.myprogress-bar-success {
    background-color: #5cb85c !important;
}
.myprogress-bar-warning {
    background-color: #f0ad4e !important;
}
.myprogress-bar-danger {
    background-color: #d9534f !important;
}
.myprogress {
    height: 20px;
    overflow: hidden;
    background-color: #f5f5f5;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.myprogress-bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    background-color: #337ab7;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    -webkit-transition: width 0.6s ease;
    -o-transition: width 0.6s ease;
    transition: width 0.6s ease;
}
.myprogress-bar.clickable > span {
    cursor: pointer;
}
.myprogress-bar-striped,
.myprogress-striped .myprogress-bar {
    background-image: -webkit-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-image: -o-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    -webkit-background-size: 40px 40px;
    background-size: 40px 40px;
}
.loading-mask:before {
    position: absolute;
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(70, 70, 70, 0.3);
    z-index: 1;
}
.tags-list-search {
    background-color: #f7f7f7 !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    margin: 82px 0 0 0;
    padding: 15px 10px 10px 10px;
}
.navbar.main {
    left: 0 !important;
}
#content {
    margin: 0 !important;
}
.md-datepicker-button {
    display: none;
}
.md-datepicker-input {
}
.project-drawer .md-datepicker-input {
    width: 184px;
}
md-input-container label:not(.md-container-ignore) {
    left: 2px;
    margin-bottom: 0;
}
.list-item-no-hover .md-button:hover {
    background-color: rgba(0, 0, 0, 0);
}
md-input-container label:not(.md-container-ignore) + :not(textarea) {
    bottom: 95%;
}
md-input-container.tag-input input {
    border-radius: 4px;
    background: #aaa;
    padding: 0px;
}
md-input-container input[type='password'].md-input,
md-input-container input[type='text'].md-input,
md-input-container input[type='email'].md-input,
md-input-container input[type='number'].md-input {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    order: 2;
    display: block;
    margin-top: 0;
    padding: 2px 2px 1px;
    border-width: 0 0 1px;
    line-height: 26px;
    height: 30px;
    -ms-flex-preferred-size: 26px;
    border-radius: 0;
    border-style: solid;
    width: 100%;
    box-sizing: border-box;
    float: left;
}
.form-template .contact-book {
    cursor: pointer;
    padding-top: 15px;
    padding-bottom: 15px;
}
.form-template .shared-form {
    opacity: 0.54;
}
.form-template.active {
    background-color: #eee;
}
.contact-book:hover {
    background-color: #dbdbdb;
}
#forms-sidenav {
    width: 520px;
    min-width: 520px;
    z-index: 60;
    overflow: hidden;
}
/* "New template" card in the form-template drawer — groups the type selector,
   title input and actions so they read as one unit (see forms.tpl.html). */
.form-template-create-card {
    margin: 8px 0 4px 0;
    padding: 12px 12px 4px 12px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    background: #fff;
}
.form-template-create-card-title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.72);
    margin-bottom: 4px;
}
.form-template-create-card-input {
    margin-bottom: 0;
}
.form-template-create-card-actions {
    margin-top: 4px;
}
#form-builder-container {
    height: 100%;
}
#contacts-sidenav {
    width: 250px;
    z-index: 10;
}
md-input-container input[type='number'] ~ .md-errors-spacer,
.forms-template-search .md-errors-spacer,
.header-form-inline-mdc .md-errors-spacer,
md-input-container.pb-desc-field .md-errors-spacer,
md-input-container.report-name-input .md-errors-spacer,
.user-edit-modal md-input-container .md-errors-spacer,
#drawer-projects md-input-container .md-errors-spacer,
md-input-container.project-input-search .md-errors-spacer,
.note-titles-text-input .md-errors-spacer,
.resignin-card md-input-container .md-errors-spacer,
.project-drawer md-input-container .md-errors-spacer,
.md-dialog-content md-input-container .md-errors-spacer,
.resignin-card-wrapper md-input-container .md-errors-spacer,
.plan-create-tasks-date-picker md-input-container .md-errors-spacer,
.form-builder-card md-input-container .md-errors-spacer,
md-input-container#account-password-input .md-errors-spacer,
.report-share-email-block md-input-container .md-errors-spacer,
md-input-container.account-input-container .md-errors-spacer,
.block-card md-input-container .md-errors-spacer {
    display: none;
}
.sign-container .signature canvas {
    border: 1px solid #999;
    margin: 0 auto;
    cursor: pointer;
}
.sign-result {
    border: 1px solid blue;
    margin: 30px auto 0 auto;
    width: 500px;
    height: 225px;
}
md-input-container.pb-desc-field label {
}
md-input-container.pb-desc-field {
    margin: 11px;
}
md-input-container.pb-desc-field .md-input {
}
/* When the input is focused */
md-input-container.md-input-focused label {
    color: blue;
}
.note-drawer-obsevation-input .md-errors-spacer {
    display: none;
}
.md-date-range-picker > div > div {
    margin: 0;
}
.note-drawer-obsevation-input {
    height: 100px;
    margin: 0;
    resize: vertical;
    overflow: auto;
    width: 98%;
    border-style: none;
    border-color: Transparent;
    overflow: scroll;
    margin-top: 8px;
}
.note-drawer-obsevation-input:focus + button {
    color: white;
    background-color: var(--secondary-color);
    opacity: 1;
    transition: all 0.3s;
}
.note-drawer-obsevation-input:focus + button:hover {
    color: white !important;
    background-color: #008000 !important;
}
.note-drawer-obsevation-save {
    margin: 0;
    background: rgba(101, 101, 101, 0.5);
    position: absolute;
    bottom: -37px;
    left: 2px;
}
.form-field.form-field-movable {
    border-radius: 4px;
    background-color: rgb(228, 228, 228);
    padding: 4px;
}
.form-field.form-field-multiple-move {
    opacity: 0.2;
}
.form-field.form-field-move-target {
    margin-top: 5px;
    padding: 10px;
    cursor: pointer;
}

.form-field.form-field-movable:hover {
    border: none;
    border-radius: 4px;
    background-color: rgb(214, 214, 214);
    box-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.2),
        0 1px 1px 0 rgba(0, 0, 0, 0.14),
        0 2px 1px -1px rgba(0, 0, 0, 0.12);
}
.form-field.form-field-movable.form-field-separator-break {
    margin-top: 15px !important;
}

.form-field-separator {
    background-color: darkslateblue;
    padding: 15px;
    border-radius: 6px;
}
.formblock-open {
    color: orangered;
    cursor: pointer;
    text-decoration: underline;
}
.form-field-separator h3 {
    color: whitesmoke;
}
.form-field-separator h4 {
    color: whitesmoke;
}
.form-field-separator h5 {
    color: whitesmoke;
}
.form-builder-card hr {
    margin: 10px 0;
}
md-select.md-input-invalid .md-select-value {
    border-bottom-color: rgb(213, 0, 0);
    color: rgb(213, 0, 0) !important;
}
button.md-input-invalid {
    color: rgb(213, 0, 0) !important;
    background: rgba(213, 0, 0, 0.16) !important;
}
.form-builder-card .md-input-invalid md-select md-select-value > span,
.md-input-invalid label {
    color: rgb(213, 0, 0);
}
.form-builder-card .md-input-invalid md-select.md-greyLabelTheme-theme .md-select-value {
    border-bottom-color: rgb(213, 0, 0);
    border-width: 0 0 2px;
}
.dndDraggingSource {
    display: none;
}
.form-input-invalid {
    background-color: rgba(238, 162, 162, 0.39) !important;
}
.dndPlaceholder {
    display: block;
    background-color: #eee;
    border-radius: 4px;
    padding: 10px 15px;
    min-height: 42px;
}
.handle {
    cursor: move;
    position: absolute;
    top: 14px;
}
.btn-accept-invitation {
    width: 49%;
    margin-top: 15px !important;
    margin-bottom: 10px !important;
}
.btn-accept-invitation > span {
    color: white !important;
    background: none !important;
}
.maps-labels {
    color: #333;
    background: mintcream;
    border: 1px #333;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
    opacity: 1;
    pointer-events: none;
    text-align: center;
    width: 60px;
    white-space: nowrap;
}
md-input-container > i {
    top: 8px;
    left: 2px;
    right: auto;
    position: absolute;
}
.md-select-value > span:not(.md-select-icon) .md-text {
    color: #333;
}
.drawer-image-block-container {
    height: 300px;
    overflow: hidden;
    width: 100%;
}
.drawer-image-block-container img {
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: cover;
}
.drawer-observation-input {
    border-radius: 4px !important;
    background: #7480d2 !important;
    width: 300px !important;
    padding: 0px !important;
}
md-sidenav#note-details-drawer {
    max-width: 650px;
    width: 650px;
}
@media (max-width: 510px) {
    .note-drawer-obsevation-input {
        height: 70px;
    }
}
@media (max-width: 980px) {
    .drawer-observation-input {
        width: 175px !important;
    }
    md-sidenav#note-details-drawer {
        max-width: 500px;
        width: 500px;
    }
}
#drawer-tags-block md-chips md-chip {
    height: 30px;
    line-height: 30px;
}
#drawer-tags-block md-chips md-chip .md-chip-content {
    font-size: 13px;
}
.md-chips md-chip .md-chip-remove-container {
    line-height: 30px;
}
.tag-chip {
    position: relative;
    height: 20px;
    width: 20px;
    line-height: 30px;
    text-align: center;
    margin-top: 5px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    border: none;
    box-shadow: none;
    padding: 0;
    top: 5px;
    right: 2px;
    margin: 0;
    transition: background 0.15s linear;
    display: block;
}
.tag-chip i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0) scale(0.7);
    color: white;
    fill: white;
}
.tag-chip:hover {
    background: orangered;
}
@media (max-width: 510px) {
    md-sidenav#note-details-drawer {
        max-width: 400px;
        width: 400px;
    }
    #drawer-tags-block md-chips md-chip {
        height: 24px;
        line-height: 24px;
    }
    #drawer-tags-block md-chips md-chip .md-chip-content {
        font-size: 12px;
    }
}
@media (max-width: 420px) {
    md-sidenav#note-details-drawer {
        max-width: 300px;
        width: 300px;
    }
    #drawer-tags-block md-chips md-chip {
        height: 20px;
        line-height: 20px;
    }
    #drawer-tags-block md-chips md-chip .md-chip-content {
        font-size: 11px;
    }
}
@media (max-width: 310px) {
    md-sidenav#note-details-drawer {
        max-width: 250px;
        width: 250px;
    }
    #drawer-tags-block md-chips md-chip {
        height: 19px;
        line-height: 19px;
    }
    #drawer-tags-block md-chips md-chip .md-chip-content {
        font-size: 10px;
    }
}
#note-details-drawer md-card {
    margin: 0;
}
md-sidenav#note-details-drawer md-content {
    background: #f7f7f7f7;
}
.badge {
    text-shadow: none;
}
md-card md-card-header {
    z-index: 2;
    background: #e2e8ee;
}
md-card.md-default-theme .md-card-image,
md-card .md-card-image {
    z-index: 1;
}
.header-bar .md-nav-bar {
    height: 57px !important;
    display: inline-block !important;
    vertical-align: top;
}
.header-bar.header-bar-tablet .md-button._md-nav-button {
    padding: 9px 4px;
    min-width: 70px;
}
.header-bar .md-nav-bar .md-button._md-nav-button {
    padding: 16px 16px;
}
.md-button._md-nav-button {
    padding: 9px 16px;
}

.header-bar .md-button._md-nav-button.md-unselected {
    color: white !important;
}
.header-bar md-nav-ink-bar {
    color: #e1e4e7 !important;
    background: #e1e4e7 !important;
}
.header-bar > .md-nav-bar .md-button.md-greyLabelTheme-theme.md-accent {
    color: white !important;
}
.jodit-editor-container {
    margin-bottom: 10px;
    -webkit-box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.2);
}
.ql-container {
    height: 150px;
}
.jodit-editor-container.disabled-editor {
    opacity: 0.33;
}
.jodit-wrapper .disabled-editor-title {
    opacity: 0.33 !important;
}
.jodit-editor-container .ql-toolbar.ql-snow {
    border: none !important;
}
.jodit-editor-container .ql-container.ql-snow {
    border: none !important;
}
.project-admin-bar .md-nav-bar {
    margin-top: 25px;
    height: 44px !important;
    display: inline-block !important;
    vertical-align: top;
}
.project-admin-bar .md-button._md-nav-button.md-unselected {
    color: #01111b !important;
}
.project-admin-bar .md-button._md-nav-button {
    color: var(--primary-color) !important;
}
.project-admin-bar md-nav-ink-bar {
    color: var(--primary-color) !important;
    background: var(--primary-color) !important;
}
.project-admin-users-table .md-select-value > span:not(.md-select-icon) {
    text-align: center;
}
.project-admin-users-table tr:nth-child(even) {
    background-color: #f2f2f2;
}
.project-admin-users-table tr:nth-child(even):hover {
    background: #e7e7e7;
}
.project-admin-users-table tr:hover {
    background: #e7e7e7;
}
.project-admin-users-table p {
    margin: 0;
}
.project-admin-users-table-body {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}
.project-admin-users-sticky-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
    /* Span the full scroll viewport (md-content has 15px horizontal padding)
       and own the top breathing room so the band sits flush against the tab
       bar with no gap (md-content's padding-top is reduced to 0 in the tpl). */
    margin: 0 -15px;
    padding: 15px 15px 0;
}
.project-admin-users-actions {
    padding: 4px 36px 8px;
    min-height: 40px;
}
.project-admin-users-search div.md-errors-spacer,
.batch-emails-input div.md-errors-spacer,
.project-admin-users-table md-input-container div.md-errors-spacer {
    display: none;
}
#forgot-password-input div.md-errors-spacer {
    display: none;
}
md-input-container.md-no-error-spacer div.md-errors-spacer {
    display: none;
}
.project-admin-selected-group {
    background: #bbb;

    -webkit-box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.2);
}
.project-admin-selected-group::after {
    content: '';
    position: absolute;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 12px solid #bbb;
    top: 24px;
    right: -12px;
}
.project-admin-users-table .md-icon-button {
    padding: 0;
    margin: 0;
    width: 20px;
    height: 20px;
}
.project-admin-avatar {
    border-radius: 50%;
    display: inline-block;
    background-size: cover;
    height: 32px;
    width: 32px;
    background: #455a64;
    color: #eceff1;
    line-height: 32px;
    vertical-align: middle;
    text-align: center;
}
.project-admin-users-table md-select,
.project-admin-users-table md-input-container {
    margin-top: 5px;
    margin-bottom: 5px;
}
.project-admin-users-table tr:nth-child(even) {
    background-color: #f2f2f2;
}
.menu-zones-open-button,
.demo-menu-open-button {
    padding-right: 8px;
    padding-top: 8px;
    padding-bottom: 9px;
    padding-left: 0;
    border-bottom: 1px solid black;
    cursor: pointer;
    margin: 8px;
    border-color: rgba(0, 0, 0, 0.12);
    position: relative;
    margin-top: 13px;
    font-size: 14px;
}
.project-date-filter {
    padding-right: 8px;
    padding-bottom: 8px;
    padding-left: 3px;
    border-bottom: 1px solid black;
    cursor: pointer;
    margin: 8px;
    border-color: rgba(0, 0, 0, 0.12);
    position: relative;
    margin-top: 30px;
}
.md-select-menu-container {
    z-index: 9999;
}
.md-backdrop-select {
    z-index: 9999;
}
.unstyled::-webkit-inner-spin-button,
.unstyled::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}
.note-filter-select {
    margin: 0;
    font-size: 14px;
}
.note-filter-select input {
    font-size: 14px;
}
.note-filter-select .md-errors-spacer {
    display: none;
}
/* Header (custom task fields) filters: a lightweight section heading above one card per form
   template, so each form reads as its own grouped block (a note carries at most one). */
.notes-filter-header-fields {
    margin: 12px 0;
}
.notes-filter-header-fields-title {
    display: flex;
    align-items: center;
    margin: 4px 2px 8px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-color);
}
.notes-filter-header-fields-info {
    margin-left: 6px;
    color: var(--primary-color);
    opacity: 0.55;
    cursor: help;
}
/* One card per header form template. */
.notes-filter-header-template-card {
    margin-bottom: 12px;
    padding: 8px 12px 12px;
    background: #eef4fc;
    border: 1px solid #d6e4f5;
    border-radius: 8px;
}
.notes-filter-header-template-card:last-child {
    margin-bottom: 0;
}
.notes-filter-header-fields-group-title {
    padding: 2px 0 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--secondary-color);
    margin-bottom: 2px;
}
/* Every header filter (text/number inputs and choice selects) is an md-input-container, so they
   share the same Material layout. The floating label is positioned outside the container's padding
   box, so only margin creates real space for it; top margin keeps it from overlapping the field above. */
.notes-filter-header-fields .header-field-filter {
    margin: 18px 0 4px;
    padding: 0;
}
.notes-filter-header-fields .header-field-filter md-select {
    margin: 0;
}
/* Date header field: a static title above two compact from/to datepickers (md-datepicker has
   no floating label of its own, so the field title is rendered separately). */
.notes-filter-header-fields-field-label {
    margin-bottom: 2px;
    color: rgba(0, 0, 0, 0.54);
    font-size: 12px;
}
.notes-filter-header-fields .header-field-date md-datepicker {
    margin-right: 4px;
    padding: 0;
}
.notes-filter-header-fields .header-field-date .md-datepicker-input-container {
    margin-left: 0;
}
.notes-filter-header-fields .header-field-date .md-datepicker-input {
    max-width: 92px;
}
/* A note carries at most one header template, so once one template's filter is active the others
   can never match: grey them out and block interaction to make the constraint obvious. */
.notes-filter-header-template-locked {
    opacity: 0.4;
}
.notes-filter-header-template-locked .notes-filter-header-fields-group-title {
    cursor: help;
}
/* Header (custom task fields) filter hint: shown on hover of the info badge.
   Allow the long hint to wrap instead of being clipped to a single line. */
.md-tooltip.header-fields-tooltip {
    height: auto;
    max-width: 260px;
    white-space: normal;
    line-height: 1.4;
    padding: 8px 12px;
}
.quick-filter > p {
    color: #01579b;
    text-decoration: underline;
}
.quick-filter > button {
    margin: 0;
}
.quick-filter > p:hover {
    color: rgb(255, 102, 0);
    cursor: pointer;
}
.quick-filter > p:active {
    color: rgb(255, 72, 0);
}
.md-button.md-accent {
    color: #e1e4e7;
}
.notes-list-toolbar {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background-color: #f7f7f7 !important;
    margin: 81px 0 0 0;
    padding: 10px !important;
    -webkit-box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.2);
}
.bz-list-toolbar {
    flex: 0 0 auto;
    position: relative;
    z-index: 58;
    background: white;
}

.bz-list-toolbar-embedded {
    z-index: 58;
    background: white;
}
.empty-loader.form-field-loader {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.8;
    width: 100%;
    height: 100%;
    z-index: 900;
    border-radius: 4px;
}
.empty-loader {
    background: rgb(0, 0, 0, 0.3);
}
.empty-loader svg,
.note-empty-loader svg {
    -webkit-animation: rotation 1.4s linear infinite;
    animation: rotation 1.4s linear infinite;
}

.empty-loader svg:nth-child(1) {
    stroke: var(--primary-color);
}

.note-empty-state {
    z-index: 20;
    padding: 30px;
    border-radius: 4px;
    box-shadow:
        0 1px 8px 0 rgba(0, 0, 0, 0.2),
        0 3px 4px 0 rgba(0, 0, 0, 0.14),
        0 3px 3px -2px rgba(0, 0, 0, 0.12);
}
.empty-state {
    z-index: 20;
    padding: 30px;
    margin: 30px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.64);
    background-color: #ccc;
}
.note-empty-state span i,
.empty-state span i {
    color: white;
    background-color: #7c7c7c;
    border-radius: 50%;
    padding: 15px;
    opacity: 0.5;
    margin-bottom: 10px;
}
.note-empty-state span,
.empty-state span {
    text-align: center;
    display: block;
}

.bz-list-toolbar > div {
    background: white;
    height: var(--layout-toolbar-height);
}
.bz-list-toolbar md-input-container .md-errors-spacer {
    display: none;
}
.bz-list-toolbar .md-button.md-icon-button {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.bz-list-toolbar button span,
.bz-list-toolbar button i {
    vertical-align: middle;
}
.bz-list-toolbar button:not(.md-greyLabelTheme-theme) span,
.bz-list-toolbar button:not(.md-greyLabelTheme-theme) i {
    color: black;
}
.bz-list-toolbar button.btn-tag {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: #ffffff;
}
.bz-list-toolbar button.btn-document {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: #ffffff;
}
.chip-container .chip {
    cursor: pointer;
    margin: 0px;
    border: 1px solid;
    padding: 5px;
    font-size: 16px;
    border-radius: 25px;
    text-transform: uppercase;
}
.chip-container .chip:hover {
    background: #ddd;
}
.chip-container .chip.selected-chip {
    border: 1px solid orangered;
    background: #ff46008a;
    color: white;
}
.chip-container.chip-invalid .chip {
    border: 1px solid rgb(221, 44, 0) !important;
    background: rgb(229, 77, 39) !important;
    color: white;
}
@media (max-width: 979px) {
    .bz-list-toolbar .md-button {
        min-width: 0;
        line-height: 24px;
        padding: 8px;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* .bz-list-toolbar .md-button span { */
    /* display:none; */
    /* } */
}
@media (max-width: 1080px) {
    .bz-list-toolbar .md-button.md-specific-button {
        min-width: 0;
        line-height: 24px;
        padding: 8px;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .bz-list-toolbar .md-specific-button span {
        display: none;
    }
}
@media (max-width: 1280px) {
    .bz-list-toolbar .md-hide-label-button {
        min-width: 0;
        line-height: 24px;
        padding: 8px;
        width: 40px;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .bz-list-toolbar .md-hide-label-button span {
        display: none;
    }
}
.bz-list-toolbar .notes-list-toolbar button i.material-icons {
    vertical-align: top;
    line-height: 20px;
}
@media (max-width: 785px) {
    .notes-list-toolbar span button span {
        display: none !important;
    }
    .notes-list-toolbar span div div span {
        display: none !important;
    }
}
/**
 * Block animation in noteview
 */

.animated-block {
    -webkit-transition: 0.5s linear all;
    -moz-transition: 0.5s linear all;
    -ms-transition: 0.5s linear all;
    -o-transition: 0.5s linear all;
    transition: 0.5s linear all;
}
.animated-block .animated-block-right-part {
    -webkit-animation: fadeInRight 0.5s;
    -moz-animation: fadeInRight 0.5s;
    -ms-animation: fadeInRight 0.5s;
    animation: fadeInRight 0.5s;
}
.animated-block .animated-block-left-part {
    -webkit-animation: rotateInUpRight 0.5s;
    -moz-animation: rotateInUpRight 0.5s;
    -ms-animation: rotateInUpRight 0.5s;
    animation: rotateInUpRight 0.5s;
}
.animated-block.ng-enter .animated-block-right-part,
.animated-block.ng-leave.ng-leave-active .animated-block-right-part {
    -webkit-animation: fadeOutRight 0.5s;
    -moz-animation: fadeOutRight 0.5s;
    -ms-animation: fadeOutRight 0.5s;
    animation: fadeOutRight 0.5s;
}
.animated-block.ng-leave .animated-block-right-part,
.animated-block.ng-enter.ng-enter-active .animated-block-right-part {
    -webkit-animation: fadeInRight 0.5s;
    -moz-animation: fadeInRight 0.5s;
    -ms-animation: fadeInRight 0.5s;
    animation: fadeInRight 0.5s;
}
.animated-block.ng-enter .animated-block-left-part,
.animated-block.ng-leave.ng-leave-active .animated-block-left-part {
    -webkit-animation: rotateOutDownRight 0.5s;
    -moz-animation: rotateOutDownRight 0.5s;
    -ms-animation: rotateOutDownRight 0.5s;
    animation: rotateOutDownRight 0.5s;
}
.animated-block.ng-leave .animated-block-left-part,
.animated-block.ng-enter.ng-enter-active .animated-block-left-part {
    -webkit-animation: rotateInUpRight 0.5s;
    -moz-animation: rotateInUpRight 0.5s;
    -ms-animation: rotateInUpRight 0.5s;
    animation: rotateInUpRight 0.5s;
}
/**
 * End block animation in noteview
 */

/**
 * Range slider
 */

.range {
    display: table;
    position: relative;
    height: 70px;
    margin-top: 20px;
    background-color: #f4f4f4;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}
.range input[type='range'] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    -ms-appearance: none !important;
    -o-appearance: none !important;
    appearance: none !important;
    display: table-cell;
    width: 100%;
    background-color: transparent;
    height: 70px;
    cursor: pointer;
}
.range input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    -ms-appearance: none !important;
    -o-appearance: none !important;
    appearance: none !important;
    width: 70px;
    height: 70px;
    color: rgb(255, 255, 255);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0px;
    background-color: rgb(153, 153, 153);
}
.range input[type='range']::-moz-slider-thumb {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    -ms-appearance: none !important;
    -o-appearance: none !important;
    appearance: none !important;
    width: 70px;
    height: 70px;
    color: rgb(255, 255, 255);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0px;
    background-color: rgb(153, 153, 153);
}
.range output {
    display: table-cell;
    padding: 3px 5px 2px;
    min-width: 70px;
    color: rgb(255, 255, 255);
    background-color: rgb(153, 153, 153);
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}
.range input[type='range'] {
    outline: none;
}
.range.range-primary input[type='range']::-webkit-slider-thumb {
    background-color: rgb(236, 103, 27);
}
.range.range-primary input[type='range']::-moz-slider-thumb {
    background-color: rgb(236, 103, 27);
}
.range.range-primary output {
    background-color: rgb(236, 103, 27);
}
.range.range-primary input[type='range'] {
    outline-color: rgb(236, 103, 27);
}
.range.range-success input[type='range']::-webkit-slider-thumb {
    background-color: rgb(92, 184, 92);
}
.range.range-success input[type='range']::-moz-slider-thumb {
    background-color: rgb(92, 184, 92);
}
.range.range-success output {
    background-color: rgb(92, 184, 92);
}
.range.range-success input[type='range'] {
    outline-color: rgb(92, 184, 92);
}
.range.range-info input[type='range']::-webkit-slider-thumb {
    background-color: rgb(91, 192, 222);
}
.range.range-info input[type='range']::-moz-slider-thumb {
    background-color: rgb(91, 192, 222);
}
.range.range-info output {
    background-color: rgb(91, 192, 222);
}
.range.range-info input[type='range'] {
    outline-color: rgb(91, 192, 222);
}
.range.range-warning input[type='range']::-webkit-slider-thumb {
    background-color: rgb(240, 173, 78);
}
.range.range-warning input[type='range']::-moz-slider-thumb {
    background-color: rgb(240, 173, 78);
}
.range.range-warning output {
    background-color: rgb(240, 173, 78);
}
.range.range-warning input[type='range'] {
    outline-color: rgb(240, 173, 78);
}
.range.range-danger input[type='range']::-webkit-slider-thumb {
    background-color: rgb(217, 83, 79);
}
.range.range-danger input[type='range']::-moz-slider-thumb {
    background-color: rgb(217, 83, 79);
}
.range.range-danger output {
    background-color: rgb(217, 83, 79);
}
.range.range-danger input[type='range'] {
    outline-color: rgb(217, 83, 79);
}
/**
 * End range slider
 */

/**
 * Canvas2D style (menu)
 */

#planCanvas:active {
    cursor: default;
}
.sepparatorMenuBBPlan {
    width: 1px;
    height: 40px;
    border-top: 10px solid #393a3a;
    border-bottom: 10px solid #393a3a;
    background-color: grey;
    float: left;
    position: relative;
}
.menuBBPlan {
    text-align: left;
    display: inline;
    margin: 0;
    list-style: none;
    position: absolute;
    top: 58px;
    left: 42px;
}
.buttonBBPlan {
    width: 70px;
    height: 60px;
    background-color: #393a3a;
    background-position: center;
    background-repeat: no-repeat;
    font: bold 12px/18px sans-serif;
    display: inline-block;
    margin-right: -4px;
    position: relative;
    float: left;
    cursor: pointer;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}
.horizontalSelectedColorBar {
    border-top-width: 4px;
    border-top-style: solid;
    width: 70px;
    position: relative;
    float: left;
    cursor: pointer;
}
.buttonBBPlan:hover {
    background: #949494;
    color: #fff;
    background-position: center;
    background-repeat: no-repeat;
}
.BBPlanToolInUse {
    background: #949494;
    color: #fff;
    background-position: center;
    background-repeat: no-repeat;
}
.subMenuBBPlan {
    padding: 0;
    position: absolute;
    top: 60px;
    left: 0;
    width: 210px;
    display: none;
    opacity: 0;
    visibility: hidden;
    -webkit-transiton: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    -transition: opacity 0.2s;
    margin: 0px;
}
.subButtonBBPlan {
    display: block;
    color: #fff;
}
.subButtonBBPlan:hover {
    background: #949494;
    background-position: center;
    background-repeat: no-repeat;
}
.BBPlanSubToolInUse {
    background: #949494;
    background-position: center;
    background-repeat: no-repeat;
}
.buttonBBPlan:hover ul {
    display: block;
    opacity: 1;
    visibility: visible;
}
.buttonBBPlanThickness {
    width: 134px;
    text-align: center;
    line-height: 60px;
}
.buttonBBPlanColor {
    width: 40px;
    height: 36px;
    border-top: 10px solid #393a3a;
    border-left: 10px solid #393a3a;
}
.buttonBBPlanColor:hover {
    border-top: 10px solid #666;
    border-left: 10px solid #666;
}
.buttonBBPlanColorSelected {
    border-top: 10px solid #666;
    border-left: 10px solid #666;
}
.buttonBBPlanColor:nth-child(4),
.buttonBBPlanColor:last-child {
    border-right: 10px solid #393a3a;
}
.buttonBBPlanColor:nth-child(5),
.buttonBBPlanColor:nth-child(6),
.buttonBBPlanColor:nth-child(7),
.buttonBBPlanColor:nth-child(8) {
    border-bottom: 10px solid #393a3a;
}
.subMenuBBPlanColor {
    width: 200px;
}
/**
 * Canvas2D
 */
/**
 * Canvas3D style
 */
/**
 * Fin canvas 3D
 */
#content {
    position: absolute;
    top: var(--layout-header-height);
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

#content .view-content-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

#content .view-content-wrapper.topbar-forms-breadcrumb {
    margin-top: 48px;
}

/*
 * Drawers using this class are direct children of #content, which is itself
 * positioned at top: var(--layout-header-height) since the layout refactor
 * (commit 966d25e24). Stretching to fill #content is therefore enough to
 * sit right below the header — adding another header-height offset here would
 * stack the offsets and push the drawer below header + breadcrumb.
 */
.bz-sidenav-below-header {
    top: 0;
    bottom: 0;
}

.bz-content-below-toolbar,
.bz-main-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.md-small-avatar {
    width: 20px !important;
    height: 20px !important;
}
.tags-modal {
    border-radius: 5px;
}
.plans-upload-modal {
    border-radius: 5px;
}
.dragging {
    border: 5px dotted #333 !important;
    border-radius: 20px;
    opacity: 0.1;
    color: white;
    /*background: url('../vendor/img/download_icon.png') right top no-repeat;*/
}
/* Really important, this is what's make sidebar/infinit scrolling working in template with mobile size device*/

html,
body,
.container-fluid,
#wrapper {
    height: 100%;
}
.navbar.main .topnav > li.mega-menu .mega-sub-inner ul li {
    width: 400px;
    margin-bottom: 5px;
}
.maps-modal,
.zones-modal {
    margin: 0;
    width: 90%;
    height: 75%;
    left: 5%;
    border-radius: 5px;
}
.maps-modal .ng-scope,
.zones-modal .ng-scope {
    height: 95%;
}
.maps-modal .modal-body,
.zones-modal .modal-body {
    height: 97%;
    max-height: 4000px !important;
}
#intercom-container .intercom-launcher-frame {
    left: 20px !important;
    z-index: 10;
}
@media screen and (min-width: 451px) {
    #intercom-container .intercom-messenger-frame {
        left: 20px !important;
    }
}
#intercom-container .intercom-launcher-discovery-frame {
    left: 20px !important;
}
#intercom-container .intercom-borderless-frame {
    left: 20px !important;
}
#intercom-container .intercom-note {
    left: 20px !important;
}
#intercom-container .intercom-notifications-frame {
    left: 20px !important;
}
#intercom-container .intercom-launcher-badge-frame {
    left: 24px !important;
}
#content.ng-enter {
    -webkit-animation: fadeIn 0.2s both ease;
    -moz-animation: fadeIn 0.2s both ease;
    -ms-animation: fadeIn 0.2s both ease;
    animation: fadeIn 0.2s both ease;
}
.menu-dropdown {
    position: relative;
    display: none;
    vertical-align: top;
    color: white;
    text-transform: uppercase;
    line-height: 24px;
    margin: 0 4px;
    padding: 12px 16px;
}
.contactForm {
    margin: 0;
}
.contacts-modal {
    border-radius: 4px;
}
.contacts-modal .ng-scope {
    height: 95%;
}
.contacts-modal .modal-body {
    height: 97%;
    max-height: 4000px !important;
    overflow-y: auto !important;
}
.md-select-value .md-select-icon:after {
    color: #333;
}
md-input-container:not([md-no-float]) .md-select-placeholder span:first-child {
    color: rgba(0, 0, 0, 0.38);
}
@media (max-width: 979px) {
    .menu-dropdown {
        display: inline-block !important;
    }
}
.menu-dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--secondary-color);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    padding: 12px 16px;
    z-index: 1;
}
.menu-dropdown-content a {
    color: whitesmoke;
}
.menu-dropdown:hover .menu-dropdown-content {
    display: block;
}
.menu-dropdown:focus .menu-dropdown-content {
    display: block;
}
/* Loading spinner */

.global-preloader {
    background: var(--secondary-color);
    background: -moz-linear-gradient(-45deg, var(--secondary-color) 0%, var(--primary-color) 100%);
    background: -webkit-linear-gradient(-45deg, var(--secondary-color) 0%, var(--primary-color) 100%);
    background: -o-linear-gradient(-45deg, var(--secondary-color) 0%, var(--primary-color) 100%);
    background: -ms-linear-gradient(-45deg, var(--secondary-color) 0%, var(--primary-color) 100%);
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: +2000;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0);
}
.global-preloader > .progress-container {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-width: 800px;
}
.global-preloader .progress-circle {
    stroke: white;
    width: 100%;
}
.progress-circle {
    stroke: black;
    width: 100%;
}
.spinner {
    top: 50%;
    left: 50%;
    z-index: 1;
    height: 30px;
    width: 30px;
    margin-left: -17.5px;
    margin-top: -60px;
    position: relative;
}
.widget-thumbnail.building-plan {
    opacity: 0.4;
}
.widget-thumbnail.failed-plan {
    opacity: 0.4;
}
.spinner.select {
    top: 100%;
    left: 100%;
    height: 25px;
    width: 25px;
    position: absolute;
    margin-left: -39px;
    margin-top: -39px;
}
.spinner span {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    display: block;
    position: absolute;
    opacity: 0.9;
}
.details-spinner {
    width: 50px;
    height: 50px;
    z-index: 99999999;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: relative;
    top: 50%;
    left: 50%;
}
body {
    font-family: 'Roboto', sans-serif;
}
.spinner {
    -webkit-animation: rotation 1.4s linear infinite;
    animation: rotation 1.4s linear infinite;
}
.spinnerContainer {
    position: fixed;
    background: rgb(0, 0, 0);
    background: rgb(0, 0, 0, 0.3);
    bottom: 0;
    right: 0%;
    width: 100%;
    height: 50px;
    z-index: 1000;
}

.spinnerContainer.warning {
    background: rgb(255, 140, 0);
    background: rgb(255, 140, 0, 0.8);
}

.spinnerContainer.loader-fullscreen {
    height: calc(100% - 144px);
}

.spinnerBulkActionContainer {
    position: absolute;
    background: rgb(0, 0, 0);
    background: rgb(0, 0, 0, 0.5);
    bottom: 0;
    right: 0%;
    width: 100%;
    height: 100%;
    z-index: 99999999;
}
.spinnerBulkActionContainer .spinner {
    margin-bottom: 10px;
}
.dashboard-table {
    padding: 10px;
    margin: 10px;
    box-shadow:
        0 1px 8px 0 rgba(0, 0, 0, 0.2),
        0 3px 4px 0 rgba(0, 0, 0, 0.14),
        0 3px 3px -2px rgba(0, 0, 0, 0.12);
    position: relative;
    overflow-y: auto;
}
.dashboard-table-header {
    margin-left: 15px;
    margin-right: 15px;
}
.dashboard-table-header .clickable {
    text-decoration: underline;
    cursor: pointer;
}
.dashboard-table > h4 {
    color: #333;
}
.dashboard-table-line {
    max-height: 50px;
}
.dashboard-table-line:hover {
    background-color: #ddd;
}
.md-2-line.dashboard-table-line {
    min-height: 50px;
    max-height: 50px;
}
#leaflet-map {
    z-index: 50;
}
.leaflet-container .leaflet-control-attribution,
.leaflet-container .leaflet-control-scale {
    display: none;
}
.leaflet-marker-icon {
    z-index: 1000 !important;
}
.leaflet-label {
    z-index: 1000 !important;
}
.leaflet-label {
    color: #333;
    background: mintcream;
    border: 1px #333;
    border-radius: 4px;
    display: block;
    font-weight: bold;
    padding: 1px 6px;
    position: absolute;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    white-space: nowrap;
    z-index: 6;
}
.leaflet-label.leaflet-clickable {
    cursor: pointer;
    pointer-events: auto;
}
.leaflet-label-right:before,
.leaflet-label-left:after {
    content: '';
}
.uploadBarContainer {
    position: fixed;
    border: 1px;
    border-radius: 5px;
    background: rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.3);
    width: 500px;
    margin: 5% auto;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999999;
}
@-webkit-keyframes rotation {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }
}
@keyframes rotation {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }
}
.circle {
    stroke-dasharray: 187;
    stroke-dashoffset: 0;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    -webkit-animation: turn 1.4s ease-in-out infinite;
    animation: turn 1.4s ease-in-out infinite;
}
@-webkit-keyframes turn {
    0% {
        stroke-dashoffset: 187;
    }
    50% {
        stroke-dashoffset: 46.75;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }
    100% {
        stroke-dashoffset: 187;
        -webkit-transform: rotate(450deg);
        transform: rotate(450deg);
    }
}
@keyframes turn {
    0% {
        stroke-dashoffset: 187;
    }
    50% {
        stroke-dashoffset: 46.75;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }
    100% {
        stroke-dashoffset: 187;
        -webkit-transform: rotate(450deg);
        transform: rotate(450deg);
    }
}
svg.spinner:nth-child(1) {
    stroke: var(--primary-color);
}
svg.fab-spinner:nth-child(1) {
    stroke: whitesmoke;
}
li.tooltips {
    position: relative;
    display: inline;
}
li.tooltips span {
    position: absolute;
    width: 100px;
    color: #ffffff;
    background: #000000;
    height: 30px;
    font-size: 13px;
    line-height: 30px;
    text-align: center;
    visibility: hidden !important;
    border-radius: 4px;
}
li.tooltips span:after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -2px;
    width: 0;
    height: 0;
    border-bottom: 8px solid #000000;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}
li:hover.tooltips span {
    visibility: visible !important;
    opacity: 0.8;
    top: 30px;
    left: 50%;
    margin-left: -56px;
    z-index: 99999999999;
}
.note-folder {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: #7c7c7c;
    position: relative;
}
@-webkit-keyframes animateSway {
    0% {
        left: -20px;
    }
    50% {
        left: 20px;
    }
    100% {
        left: -20px;
    }
}
@keyframes animateSway {
    0% {
        left: -20px;
    }
    50% {
        left: 20px;
    }
    100% {
        left: -20px;
    }
}
@-webkit-keyframes animateScale {
    0% {
        -webkit-transform: translate(50%, 50%) scale(0.5);
        z-index: -1;
    }
    25% {
        -webkit-transform: translate(50%, 50%) scale(1);
        z-index: +1;
    }
    50% {
        -webkit-transform: translate(50%, 50%) scale(0.5);
        z-index: -1;
    }
    75% {
        -webkit-transform: translate(50%, 50%) scale(0.25);
        z-index: -2;
    }
    100% {
        -webkit-transform: translate(50%, 50%) scale(0.5);
        z-index: -1;
    }
}
@-ms-keyframes animateScale {
    0% {
        -ms-transform: translate(50%, 50%) scale(0.5);
        z-index: -1;
    }
    25% {
        -ms-transform: translate(50%, 50%) scale(1);
        z-index: +1;
    }
    50% {
        -ms-transform: translate(50%, 50%) scale(0.5);
        z-index: -1;
    }
    75% {
        -ms-transform: translate(50%, 50%) scale(0.25);
        z-index: -2;
    }
    100% {
        -ms-transform: translate(50%, 50%) scale(0.5);
        z-index: -1;
    }
}
@-moz-keyframes animateScale {
    0% {
        -moz-transform: translate(50%, 50%) scale(0.5);
        z-index: -1;
    }
    25% {
        -moz-transform: translate(50%, 50%) scale(1);
        z-index: +1;
    }
    50% {
        -moz-transform: translate(50%, 50%) scale(0.5);
        z-index: -1;
    }
    75% {
        -moz-transform: translate(50%, 50%) scale(0.25);
        z-index: -2;
    }
    100% {
        -moz-transform: translate(50%, 50%) scale(0.5);
        z-index: -1;
    }
}
@keyframes animateScale {
    0% {
        transform: translate(50%, 50%) scale(0.5);
        z-index: -1;
    }
    25% {
        transform: translate(50%, 50%) scale(1);
        z-index: +1;
    }
    50% {
        transform: translate(50%, 50%) scale(0.5);
        z-index: -1;
    }
    75% {
        transform: translate(50%, 50%) scale(0.25);
        z-index: -2;
    }
    100% {
        transform: translate(50%, 50%) scale(0.5);
        z-index: -1;
    }
}
/* End loading spinner*/

/* Thumbnails */

.thumbnail {
    transition: none;
    border: solid;
    border-width: 1px;
    border-color: #cccccc;
    user-select: none; /* CSS3 (little to no support) */
    -ms-user-select: none; /* IE 10+ */
    -moz-user-select: none; /* Gecko (Firefox) */
    -webkit-user-select: none; /* Webkit (Safari, Chrome) */
}

/* Origin/provenance badge overlaid on the corner of entity thumbnails
   (documents, plans, projects). The tile is the positioning context. */
.widget-thumbnail {
    position: relative;
}
#notes-table td {
    user-select: none; /* CSS3 (little to no support) */
    -ms-user-select: none; /* IE 10+ */
    -moz-user-select: none; /* Gecko (Firefox) */
    -webkit-user-select: none; /* Webkit (Safari, Chrome) */
}
.note-list-table {
    padding-top: 10px;
    padding-right: 16px;
    padding-bottom: 10px;
    padding-left: 16px;
    width: 100%;
    cursor: pointer;
    background: #fff;
    user-select: none; /* CSS3 (little to no support) */
    -ms-user-select: none; /* IE 10+ */
    -moz-user-select: none; /* Gecko (Firefox) */
    -webkit-user-select: none; /* Webkit (Safari, Chrome) */
}
#note-list-content > div {
    padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
}
#note-list-content div.thumbnailContainer {
    padding-bottom: 150px;
}
@media (max-width: 480px) {
    .note-list-table {
        padding: 10px 10px 0px 10px;
    }
    #note-list-content .md-subheader.category-header .md-subheader-inner {
        padding: 10px;
    }
}
.note-list-table-container {
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 6px 6px 6px 6px !important;
    background: #fff;
    -webkit-box-shadow:
        0 1px 5px 0 rgba(0, 0, 0, 0.2),
        0 2px 2px 0 rgba(0, 0, 0, 0.14),
        0 3px 1px -2px rgba(0, 0, 0, 0.12);
    -moz-box-shadow:
        0 1px 5px 0 rgba(0, 0, 0, 0.2),
        0 2px 2px 0 rgba(0, 0, 0, 0.14),
        0 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow:
        0 1px 5px 0 rgba(0, 0, 0, 0.2),
        0 2px 2px 0 rgba(0, 0, 0, 0.14),
        0 3px 1px -2px rgba(0, 0, 0, 0.12);
}
.caption.unread::before {
    content: '•';
    color: orangered;
    font-size: 32px;
    vertical-align: middle;
}
.note-list-table div.caption {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.caption.note-caption {
    height: auto !important;
    width: 100% !important;
    padding: 5px !important;
    position: absolute !important;
    bottom: 0px !important;
    padding: 0 !important;
}
.note-list-table {
    border-bottom: 1px solid #ccc;
}
.note-list-table:only-child {
    border-bottom: none;
}
.note-list-table:last-child {
    border-bottom: none;
}
.note-list-table.unread {
    font-weight: bold;
}
/* Hover reveal of the row-selection checkbox, replaces the former
   ng-mouseenter="select=true" / ng-mouseleave="select=false" wiring
   which forced an Angular digest on every mouse move across the list. */
.note-list-table__check-hover {
    display: none;
}
.note-list-table:hover .note-list-table__default {
    display: none;
}
.note-list-table:hover .note-list-table__check-hover {
    display: inline-block;
}
@media (hover: none) {
    /* On touch devices there is no hover, so keep the default thumbnail /
       folder icon visible and let the user tap to trigger selection. */
    .note-list-table:hover .note-list-table__default {
        display: inline-block;
    }
    .note-list-table:hover .note-list-table__check-hover {
        display: none;
    }
}
.notes-list-toolbar button {
    margin: 0 0 10px 0;
}
.notes-list-toolbar .i,
.notes-list-toolbar .span {
    vertical-align: middle !important;
}
.notes-list-toolbar .md-classic-button i,
.notes-list-toolbar .md-classic-button span {
    color: black;
    vertical-align: middle !important;
}
.archived {
    opacity: 0.3;
}
.thumbnail .action {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    padding: 2px 0px 0px 0px;
    background: rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.75);
}
.entity-list-actions button,
.thumbnail span.action button {
    background: transparent;
    border: none !important;
    line-height: 0px;
    padding: 0;
}
.entity-list-actions button > i,
.thumbnail i {
    color: #7c7c7c;
    cursor: pointer;
}
.entity-list-actions.notes button > i:hover,
.thumbnail span.action.notes button > i:hover {
    color: var(--secondary-color);
}
.entity-list-actions.plans > button > i:hover,
.thumbnail span.action.plans button > i:hover {
    color: var(--secondary-color);
}
.entity-list-actions.tags > button > i:hover,
.thumbnail span.action.tags button > i:hover {
    color: var(--secondary-color);
}
.entity-list-actions.documents > button > i:hover,
.thumbnail span.action.documents button > i:hover {
    color: var(--secondary-color);
}
.thumbnail .project-actions {
    top: 20px;
}
.thumbnail .action .ng-hide-remove:not(.trigger) {
    animation: 0.5s flipInX ease;
}
.thumbnail .action i {
    cursor: pointer;
    color: #7c7c7c;
}
.thumbnail.highlight {
    -webkit-box-shadow: -1px 5px 13px 0px rgba(50, 50, 50, 0.5);
    -moz-box-shadow: -1px 5px 13px 0px rgba(50, 50, 50, 0.5);
    box-shadow: -1px 5px 13px 0px rgba(50, 50, 50, 0.5);
    -webkit-animation: pulse 0.4s;
    -moz-animation: pulse 0.4s;
    -ms-animation: pulse 0.4s;
    animation: pulse 0.4s;
}
.thumbnail.ng-enter {
    -webkit-animation: flipInX 0.5s;
    -moz-animation: flipInX 0.5s;
    -ms-animation: flipInX 0.5s;
    animation: flipInX 0.5s;
}
.thumbnail.ng-leave {
    -webkit-animation: flipOutX 0.5s;
    -moz-animation: flipOutX 0.5s;
    -ms-animation: flipOutX 0.5s;
    animation: flipOutX 0.5s;
}
.striked {
    text-decoration: line-through;
}
#user-menu:hover #logoutDropdownMenu {
    display: block;
    max-height: 300px;
    overflow-y: auto;
}
#notifications-menu:hover #logoutDropdownMenu {
    display: block;
}
#notifications-menu #logoutDropdownMenu {
    max-height: 300px;
    overflow-y: scroll;
}
#invitations-menu:hover #logoutDropdownMenu {
    display: block;
    max-height: 300px;
    overflow-y: auto;
}
#logoutDropdownMenu {
    width: 330px;
}
.notifications-dropdown {
    width: 530px !important;
}
@media (max-width: 590px) {
    #user-menu .dropdown-menu {
        width: 330px !important;
    }
    #notifications-menu .dropdown-menu {
        width: 330px !important;
    }
    #invitations-menu .dropdown-menu {
        width: 330px !important;
    }
}
@media (max-width: 400px) {
    #user-menu .dropdown-menu {
        width: 200px !important;
    }
    #notifications-menu {
        display: none !important;
    }
    #invitations-menu {
        display: none !important;
    }
}
#logoutDropdownMenu > li:nth-child(2) > span > a {
    padding: 0px 4px 0px 4px;
    margin: 2px;
    background-color: #4b4b4b;
}
#logoutDropdownMenu li {
    padding: 0px 5px 0px 5px;
}
#logoutDropdownMenu li:hover {
    color: #333;
}
#logoutDropdownMenu li.profile {
    border-bottom: none;
    background-color: #393939;
}
#logoutDropdownMenu li:last-child {
    border-bottom: none;
}
#logoutDropdownMenu li div a div {
    overflow: hidden;
    /*padding-bottom:5px;*/
    padding: 5px 0px 5px 0px;
}
#logoutDropdownMenu .notif_author {
    font-weight: bolder;
    font-size: 15px;
    color: var(--secondary-color);
}
#logoutDropdownMenu .notif_title {
    color: var(--secondary-color);
    font-size: 15px;
    font-weight: bolder;
}
#logoutDropdownMenu .invit-author {
    font-weight: bolder;
    font-size: 15px;
    color: var(--secondary-color);
}
#logoutDropdownMenu .invit-title {
    color: var(--secondary-color);
    font-size: 15px;
    font-weight: bolder;
}
#logoutDropdownMenu .invit-text {
    color: whitesmoke;
    font-size: 15px;
    font-weight: bolder;
}
#logoutDropdownMenu .notif-text {
    color: whitesmoke;
    font-size: 15px;
    font-weight: bolder;
}
#logoutDropdownMenu li div a div span span {
    color: white;
}
@media (min-width: 768px) {
    .thumbnail {
        height: 175px;
        cursor: pointer;
        /*padding: 5px;*/
    }
    .thumbnail img {
        height: 60%;
        /*padding: 10px;*/
        width: auto;
        /*display: block;
        width: 100%;
        height:auto;
        max-height: 10%;*/
    }
    .thumbnail .caption {
        height: 30%;
        width: auto;
        text-align: center;
        overflow: hidden;
    }
}
.thumbnail .caption {
    background: rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.75);
}
.clickable {
    cursor: pointer;
}
.img-circle {
    border-radius: 50%;
    height: 50px;
    width: 50px;
}
/*Handle project admin page responsive*/

/* END : Handle project admin page responsive*/

/*Handle note view modal*/

.modal.fade.in {
    top: 1% !important;
}
md-input-container:not(.md-input-invalid).md-input-focused .md-input {
    border-width: 0 0 1px !important;
    border-style: solid !important;
}
md-select:not(.md-input-invalid).md-input-focused .md-input {
    border-width: 0 0 1px !important;
    border-style: solid !important;
}
.custom-date-chooser {
    width: 680px;
}
.custom-zone-chooser {
    width: 420px;
}
input[type='text'],
input[type='password'],
select,
textarea {
    color: #333;
}
.modal .modal-body {
    overflow: visible;
}
.tab-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.tab-content > * {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.tab-content > * > * {
    flex: 1;
    min-height: 0;
}
/*#noteEditionModal .tab-content */

/*.tabContainingModifiedData span:after {
    content: "*";
}*/

/* END : Handle note view modal*/

/* Handle directFileInput */

.directFileInput {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0px;
    padding: 0px;
    cursor: pointer;
    opacity: 0.2;
}
/* END : Handle directFileInput*/

/**
 * Header style
 */

#headerProjectList {
    max-height: 300px;
    overflow: auto;
}
/* Project admin page */

table td.text-center {
    text-align: center;
}
/* Removing the red border on the input field*/

input:required {
    border-color: #cccccc;
}
.icon-large:before {
    cursor: pointer;
}
/* End of Project admin page */

/*
 * This is for managing thumbnail resizing in all thumbnail list (projects, plans, docs, ...)
 */

@media (min-width: 1200px) {
    .container-fluid .row-fluid [class*='stackedSpan']:nth-child(6n + 1) {
        margin-left: 0;
        width: 16.1523%;
    }
}
@media (min-width: 1810px) {
    .container-fluid .row-fluid [class*='stackedSpan']:nth-child(6n + 1) {
        margin-left: 0;
        width: 12.1523%;
    }
}
@media (min-width: 2200px) {
    .container-fluid .row-fluid [class*='stackedSpan']:nth-child(6n + 1) {
        margin-left: 0;
        width: 9.7523%;
    }
}
@media (min-width: 768px) and (max-width: 893px) {
    .row-fluid .span2 {
        width: 32.45%;
    }
}
@media (min-width: 678px) and (max-width: 769px) {
    .row-fluid .span2 {
        width: 49%;
        height: 175px;
        float: left;
    }
}
@media (max-width: 678px) {
    .row-fluid .span2 {
        width: 48%;
        height: 175px;
        float: left;
    }
}
@media (max-width: 300px) {
    .row-fluid .span2 {
        width: 47%;
        height: 135px;
        float: left;
    }
}
@media (min-width: 893px) and (max-width: 979px) {
    .row-fluid .span2 {
        width: 24.3%;
    }
    .container-fluid .row-fluid [class*='stackedSpan']:nth-child(4n + 1) {
        margin-left: 0;
    }
    .container-fluid .row-fluid [class*='stackedSpan']:first-child {
        margin-left: 0;
    }
    .span2 {
        width: 100px;
    }
}
/*@media (min-width: 892px) {
 .row-fluid .span2 {
   width: 
 }}*/

@media (min-width: 979px) and (max-width: 1200px) {
    .row-fluid .span2 {
        width: 19.3%;
        *width: 19.3%;
    }
    .container-fluid .row-fluid [class*='stackedSpan']:nth-child(5n + 1) {
        margin-left: 0;
    }
    .container-fluid .row-fluid [class*='stackedSpan']:first-child {
        margin-left: 0;
    }
    .span2 {
        width: 60px;
    }
}
/* Modal css changed to have modal on top of other modal*/

.modal:nth-of-type(even) {
    z-index: 1052 !important;
}
.modal-backdrop.in:nth-of-type(even) {
    z-index: 1041 !important;
}
.dropdown-menu {
    z-index: 1040;
}
.relative {
    position: relative;
}
.centered-hv {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.over-all {
    width: 100%;
    height: 100%;
}
.fa {
    font-family: FontAwesome;
    -webkit-font-smoothing: antialiased;
    font-size: 12px;
    font-style: normal;
}
.fa-2x {
    font-size: 30px;
}
.fa-half {
    font-size: 20px;
}
.fa-small {
    font-size: 15px;
}
.fa-folder::before {
    content: '\f07b';
}
.fa-back::before {
    content: '\f04a';
}
.fa-file-o::before {
    content: '\f016';
}
.fa-circle-o::before {
    content: '\f10c';
}
.fa-check-circle-o {
    color: orangered;
}
.fa-check-circle-o::before {
    content: '\f05d';
}
.list-only {
    display: none;
}
.list-view .list-only {
    display: block;
}
.list-view .thumbnail {
    width: 100%;
    height: auto;
    padding: 5px;
    margin: 0;
    border: none;
    border-bottom: 1px solid #eee;
    border-radius: 0;
    position: relative;
    z-index: 0;
}
.list-view .thumbnail img {
    height: 50px;
    margin: 0;
    float: left;
}
.list-view .thumbnail .caption {
    width: 50%;
    float: left;
    text-align: left;
    background: #ccc;
    opacity: 0.6;
}
.list-view .thumbnail .action {
    float: right;
    position: absolute;
    top: 50%;
    right: 5px;
    -moz-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
}
.action.ng-hide-add-active {
    transition: 0.5s linear all;
    opacity: 0;
}
.list-view .thumbnail .action li {
    display: inline-block;
    padding: 5px 10px;
    background-color: #eee;
    cursor: pointer;
}
.list-view .thumbnail .action li * {
    cursor: pointer !important;
}
.list-view .thumbnail .action li i::before {
    cursor: pointer !important;
}
.list-view .thumbnail .action li:hover {
    background-color: #ddd;
}
.pin {
    height: 60px;
    width: 90px;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transform: translate(0px, -30px);
    -moz-transform: translate(0px, -30px);
    -ms-transform: translate(0px, -30px);
    transform: translate(0px, -30px);
}
.drawer-pin {
    height: 60px;
    width: 90px;
    position: relative;
    z-index: 10;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transform: translate(0px, 40px);
    -moz-transform: translate(0px, 40px);
    -ms-transform: translate(0px, 40px);
    transform: translate(0px, 40px);
}
.drawer-pin img,
.pin img {
    width: 100%;
}
.drawer-pin span,
.pin span {
    position: absolute;
    left: 50%;
    top: 20px;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 1em;
    font-size: 1.4em;
    font-weight: bold;
    color: #000;
    width: 65px;
    text-align: center;
}
.drawer-pin span.closed,
.pin span.closed {
    background-color: transparent;
}
.div-table {
    display: table;
}
.div-table .div-tr {
    display: table-row;
}
.div-table .div-th,
.div-table .div-td {
    display: table-cell;
}
.div-table .div-th {
    font-weight: bold;
}
.div-table.table-bordered .div-td,
.div-table.table-bordered .div-th {
    border-left: 1px solid #ddd;
    border-color: #efefef;
}
.div-table.table-condensed .div-td,
.div-table.table-condensed .div-th {
    padding: 4px 10px;
}
.div-table.table-striped .div-tr:nth-child(even) .div-td,
.div-table.table-striped .div-tr:nth-child(even) .div-th {
    background-color: #fafafa;
}
.hide {
    display: none !important;
}
.checkbox {
    cursor: pointer;
}
.thumbnail .checkbox {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 100%;
    padding: 5px;
    text-align: right;
}
.checkbox.checked {
    color: var(--secondary-color);
}
input[type='checkbox'].fa {
    position: relative;
}
input[type='checkbox'].fa::before {
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50px;
    font-size: 0.8em;
    color: #7c7c7c;
}
input[type='checkbox']:checked.fa::before {
    color: var(--secondary-color);
}
.thumbnail .caption h4 {
    font-size: 13px;
}
.thumbnail .default-img {
    height: auto !important;
    width: auto !important;
}
.thumbnail .default-img.docs {
    transform: translateY(40%) !important;
}
@media (max-width: 300px) {
    .thumbnail .default-img {
        height: auto !important;
        width: auto !important;
        transform: translateY(25%);
    }
}
.action-bottom-bar-container {
    background: #4a494a;
    font-family: 'Roboto', sans-serif;
}
.bottom-bar {
    position: fixed;
    background: #fff;
    width: 70%;
    line-height: 40px !important;
    left: 0;
    right: 0;
    z-index: 11;
    bottom: 0;
    margin: 10px auto;
    border-radius: 4px;
    padding: 15px 10px;
    box-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.2),
        0 1px 1px 0 rgba(0, 0, 0, 0.14),
        0 2px 1px -1px rgba(0, 0, 0, 0.12);
}

@media (max-width: 400px) {
    .bottom-bar {
        width: 95%;
        padding: 7px 5px;
    }
}
.icon {
    display: inline-block;
    color: #636163;
    font-size: 20px;
    margin-right: 25px;
    cursor: pointer;
}
.part-left {
    float: left;
}
.part-right {
    float: right;
}
.fade-hide,
.fade-show {
    -webkit-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s;
    -moz-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s;
    -o-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s;
    transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s;
}
.fade-hide {
    opacity: 0;
}
.fade-hide.fade-hide-active {
    opacity: 0;
}
.fade-show {
    opacity: 1;
}
.fade-show.fade-show-active {
    opacity: 1;
}
.extra-margin-bottom {
    margin-bottom: 100px;
}
.note-list-table > div,
.note-list-table > div > div {
    margin: auto 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-top: 2px;
    padding-bottom: 2px;
}
.note-list-table .note-title {
    cursor: pointer;
    color: black;
    font-size: 15px;
}
.note-list-table .note-number {
    font-size: 15px;
    color: var(--secondary-color);
}
#note-list-content {
    overflow-y: scroll;
    height: calc(100% - 102px);
}
#note-list-content.note-list-content-template-banner-visible {
    height: calc(100% - 128px);
}
#note-list-content .md-subheader.category-header {
    z-index: 10 !important;
    margin-top: 10px;
    cursor: pointer;
    font-size: 16px;
    overflow: hidden;
    color: black;
    background-color: #f7f7f7;
}
#note-list-content .md-subheader.category-header.categories-header-hidden {
    opacity: 0.55;
    background-color: #ffffff;
}
#note-list-content .md-subheader.category-header .note-count {
    border-radius: 4px;
    padding: 5px;
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 5px;
    opacity: 0.54;
    text-align: center;
}
#note-list-content .md-subheader.category-header .group-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#note-list-content .md-subheader.category-header .note-count {
    padding: 5px;
    margin: 5px;
    opacity: 0.54;
}
@media (max-width: 599px) {
    #note-list-content .md-subheader.category-header .note-count {
        text-align: left;
    }
}
.md-subheader .user-avatar {
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
}
.md-subheader .zone-avatar {
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    background-size: cover;
    background-position: center;
}
.selected-sort-menu {
    color: white;
    background: #333;
}
.pagination {
    display: inline-block;
}
.pagination a {
    color: #333;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 5px;
}
.pagination a.active {
    border-radius: 5px;
}
.pagination a.active {
    background-color: orangered;
    color: white;
}
.pagination a:hover:not(.active) {
    background-color: #ddd;
}
md-toast {
    z-index: 10000000000;
    max-width: 550px;
    padding: 2px;
}
.md-datepicker-calendar-pane.md-pane-open {
    z-index: 2002 !important;
}
.bz-avatar {
    width: 200px;
    height: 200px;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    margin: 0 auto;
}
.archive-button-list md-list-item .md-no-style {
    padding: 0 !important;
}
.project-details-drawer-image {
    position: relative;
    width: 100%;
    height: 150px;
    background-size: cover;
    background-position: center;
    padding: 0;
    margin: 0;
}
.project-cover-details-drawer-image {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 80px;
    right: 30px;
    z-index: 10;
    -webkit-box-shadow: 0px 4px 10px 0px rgba(50, 50, 50, 0.35);
    -moz-box-shadow: 0px 4px 10px 0px rgba(50, 50, 50, 0.35);
    box-shadow: 0px 4px 10px 0px rgba(50, 50, 50, 0.35);
    object-fit: cover;
}
.project-client-details-drawer-image {
    object-fit: cover;
    width: 100%;
    margin: 0 0 30px 0;
    height: 150px;
    background-size: cover;
    background-position: center;
    padding: 0;
}
.md-title {
    color: black;
    opacity: 0.87;
}
.md-subhead {
    color: black;
    opacity: 0.87;
}
.md-body-1 {
    color: black;
    opacity: 0.54;
}
.note-report-thumbnail {
    width: 100px;
    height: 75px;
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
    position: relative;
}
.custom-calendar label {
    width: calc(100% - 40px) !important;
}
.report-radio {
    box-shadow: none;
    transition: box-shadow 0.3s;
    padding: 5px;
    margin-right: 10px;
}
.report-radio.report-radio-full {
    width: 100%;
}
.report-radio-hover:hover {
    background-color: white;
    box-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.2),
        0 1px 1px 0 rgba(0, 0, 0, 0.14),
        0 2px 1px -1px rgba(0, 0, 0, 0.12);
}

.report-radio.selected {
    background-color: white;
    box-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.2),
        0 1px 1px 0 rgba(0, 0, 0, 0.14),
        0 2px 1px -1px rgba(0, 0, 0, 0.12);
}
.report-builder-image {
    border: 2px lightgray solid;
}
md-radio-button[disabled] {
    opacity: 0.3;
}
md-radio-button {
    margin-bottom: 5px;
}
md-radio-button div.md-off {
    margin-left: 10px;
}
md-radio-button .md-label {
    margin-left: 40px;
}
md-radio-button div.md-on {
    margin-left: 10px;
}
md-radio-button.md-align-top-left > div.md-container {
    top: 17px !important;
}
md-input-container div.md-resize-handle {
    display: none;
}
md-checkbox.md-checked .md-icon {
}
md-grid-list md-grid-tile figure {
    align-items: normal !important;
    display: block !important;
    right: auto !important;
}
.md-dialog-content .md-datepicker-input-container {
    width: 90%;
}
md-datepicker {
    margin-right: 0 !important;
    padding: 0 !important;
}
.md-icon-button + .md-datepicker-input-container {
    margin-left: 0;
}
#project-settings-drawer > div > md-content > div.flex-100 > md-list > md-list-item > div {
    padding: 0;
}
#project-settings-drawer > div > md-content > div.flex-100 > md-list > div > div > div > md-list-item {
    padding: 0;
}
.report-preview {
    background-color: white;
    box-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.2),
        0 1px 1px 0 rgba(0, 0, 0, 0.14),
        0 2px 1px -1px rgba(0, 0, 0, 0.12);
    position: fixed;
    bottom: 0;
    width: 100%;
}
.columns-selection md-checkbox .md-icon {
    margin-left: 6px;
}

.columns-selection md-checkbox .md-label span {
    margin-left: 12px;
}
.report-preview.close {
    top: 100%;
    height: 0;
}
.show-preview-button {
    position: absolute;
    top: 0;
    right: 0;
}
.report-builder md-input-container .md-errors-spacer {
    display: none;
}
.report-preview table {
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-top: 1px solid black;
    border-bottom: 1px dashed #333;
}
tr.border_bottom th {
    border-bottom: 1pt solid black;
}
md-select-menu[multiple] md-option.md-select-option-hide-cb .md-container {
    display: none;
}
.wrap-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.md-body-2 {
    opacity: 0.54;
}
.first-login-card {
    background: whitesmoke;
    border-radius: 4px;
    margin-top: 15px;

    -webkit-box-shadow:
        0 1px 5px 0 rgba(0, 0, 0, 0.2),
        0 2px 2px 0 rgba(0, 0, 0, 0.14),
        0 3px 1px -2px rgba(0, 0, 0, 0.12);
    -moz-box-shadow:
        0 1px 5px 0 rgba(0, 0, 0, 0.2),
        0 2px 2px 0 rgba(0, 0, 0, 0.14),
        0 3px 1px -2px rgba(0, 0, 0, 0.12);
    box-shadow:
        0 1px 5px 0 rgba(0, 0, 0, 0.2),
        0 2px 2px 0 rgba(0, 0, 0, 0.14),
        0 3px 1px -2px rgba(0, 0, 0, 0.12);
    padding-bottom: 30px;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 10px;
}

.first-login-card .bulldozair-logo {
    display: block;
    margin: 0 auto;
}
.first-login-card div {
    color: black;
    opacity: 0.72;
}

.first-login-card div.md-caption {
    color: red;
    opacity: 1;
}
.first-login-card md-input-container {
    margin-bottom: 0;
    padding: 0;
}

.first-login-card md-input-container label {
    margin-left: -3px !important;
}

.first-login-card md-input-container input.disabled-field {
    border-width: 0 0 1px !important;
    border-style: dashed !important;
    border-color: #ccc !important;
}

.first-login-card button {
    margin: 0;
    margin-top: 15px;
    font-weight: bold;
    padding-left: 15px;
    padding-right: 15px;
}

.first-login-card md-input-container .md-errors-spacer {
    display: none;
}

.selected-report-setting {
    background-color: white;
    box-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.2),
        0 1px 1px 0 rgba(0, 0, 0, 0.14),
        0 2px 1px -1px rgba(0, 0, 0, 0.12);
}
.report-setting.report-setting-full {
    width: 100%;
    position: relative;
}
.report-setting-delete-button {
    position: absolute;
    right: 0;
    top: 0;
    margin: 0 !important;
}
.report-setting-delete-button i {
    color: black;
    opacity: 0.54;
}
a.custom-report-link {
    color: orangered;
}
a.custom-report-link:hover {
    color: orangered;
    text-decoration: underline;
}
md-dialog.small-dialog {
    max-width: 50%;
}
@media screen and (max-width: 450px) {
    md-dialog.fullscreen-dialog {
        max-width: 100%;
        width: 100%;
        border-radius: 0;
    }
}
@media screen and (max-width: 800px) {
    md-dialog.fullscreen-dialog {
        max-width: 80%;
        width: 80%;
    }
}
@media screen and (max-width: 1280px) {
    md-dialog.fullscreen-dialog {
        max-width: 75%;
        width: 75%;
    }
}
md-dialog.fullscreen-dialog {
    max-width: 75%;
    width: 75%;
}
md-dialog.fullscreen-dialog md-dialog-content {
    overflow-x: hidden;
}

.emphasis-text {
    color: black;
    font-weight: bold;
}
.google-map-label {
    color: black;
    background-color: white;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    border-radius: 4px;
    padding: 2px;
    transform: translateY(-150%);
}

.material-table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 2rem;
    background-color: #fff;
    -webkit-box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.2);
    margin-top: 15px;
}
.material-table.no-shadow {
    box-shadow: none;
}
.material-table > thead > tr,
.material-table > tbody > tr,
.material-table > tfoot > tr {
    -webkit-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    transition: all 0.1s ease;
}
.material-table > thead > tr > th,
.material-table > tbody > tr > th,
.material-table > tfoot > tr > th,
.material-table > thead > tr > td,
.material-table > tbody > tr > td,
.material-table > tfoot > tr > td {
    text-align: left;
    padding: 0.8rem;
    vertical-align: top;
    border-top: 0;
    -webkit-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    transition: all 0.1s ease;
}
.material-table > thead > tr > th {
    font-weight: 400;
    color: #757575;
    vertical-align: bottom;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.material-table > caption + thead > tr:first-child > th,
.material-table > colgroup + thead > tr:first-child > th,
.material-table > thead:first-child > tr:first-child > th,
.material-table > caption + thead > tr:first-child > td,
.material-table > colgroup + thead > tr:first-child > td,
.material-table > thead:first-child > tr:first-child > td {
    border-top: 0;
}
.material-table > tbody + tbody {
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.material-table .material-table {
    background-color: #fff;
}
.material-table .no-border {
    border: 0;
}
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
    padding: 0.8rem;
}
.table-bordered {
    border: 0;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
    border: 0;
    border-bottom: 1px solid #e0e0e0;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
    border-bottom-width: 2px;
}
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
    background-color: #f5f5f5;
}
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
    background-color: rgba(0, 0, 0, 0.12);
}
@media screen and (max-width: 768px) {
    .table-responsive-vertical > .material-table {
        margin-bottom: 0;
        background-color: transparent;
    }
    .table-responsive-vertical > .material-table > thead,
    .table-responsive-vertical > .material-table > tfoot {
        display: none;
    }
    .table-responsive-vertical > .material-table > tbody {
        display: block;
    }
    .table-responsive-vertical > .material-table > tbody > tr {
        display: block;
        border: 1px solid #e0e0e0;
        border-radius: 2px;
        margin-bottom: 0.8rem;
    }
    .table-responsive-vertical > .material-table > tbody > tr > td {
        background-color: #fff;
        display: block;
        vertical-align: middle;
        text-align: right;
    }
    .table-responsive-vertical > .material-table > tbody > tr > td[data-title]:before {
        content: attr(data-title);
        float: left;
        font-size: inherit;
        font-weight: 400;
        color: #757575;
    }
    .table-responsive-vertical.shadow-z-1 {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
    .table-responsive-vertical.shadow-z-1 > .material-table > tbody > tr {
        border: none;
        -webkit-box-shadow:
            0 1px 3px 0 rgba(0, 0, 0, 0.12),
            0 1px 2px 0 rgba(0, 0, 0, 0.24);
        -moz-box-shadow:
            0 1px 3px 0 rgba(0, 0, 0, 0.12),
            0 1px 2px 0 rgba(0, 0, 0, 0.24);
        box-shadow:
            0 1px 3px 0 rgba(0, 0, 0, 0.12),
            0 1px 2px 0 rgba(0, 0, 0, 0.24);
    }
    .table-responsive-vertical > .table-bordered {
        border: 0;
    }
    .table-responsive-vertical > .table-bordered > tbody > tr > td {
        border: 0;
        border-bottom: 1px solid #e0e0e0;
    }
    .table-responsive-vertical > .table-bordered > tbody > tr > td:last-child {
        border-bottom: 0;
    }
    .table-responsive-vertical > .table-striped > tbody > tr > td,
    .table-responsive-vertical > .table-striped > tbody > tr:nth-child(odd) {
        background-color: #fff;
    }
    .table-responsive-vertical > .table-striped > tbody > tr > td:nth-child(odd) {
        background-color: #f5f5f5;
    }
    .table-responsive-vertical > .table-hover > tbody > tr:hover > td,
    .table-responsive-vertical > .table-hover > tbody > tr:hover {
        background-color: #fff;
    }
    .table-responsive-vertical > .table-hover > tbody > tr > td:hover {
        background-color: rgba(0, 0, 0, 0.12);
    }
}
.table-striped.table-mc-red > tbody > tr:nth-child(odd) > td,
.table-striped.table-mc-red > tbody > tr:nth-child(odd) > th {
    background-color: #fde0dc;
}
.table-hover.table-mc-red > tbody > tr:hover > td,
.table-hover.table-mc-red > tbody > tr:hover > th {
    background-color: #f9bdbb;
}
@media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-red > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-red > tbody > tr:nth-child(odd) {
        background-color: #fff;
    }
    .table-responsive-vertical .table-striped.table-mc-red > tbody > tr > td:nth-child(odd) {
        background-color: #fde0dc;
    }
    .table-responsive-vertical .table-hover.table-mc-red > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-red > tbody > tr:hover {
        background-color: #fff;
    }
    .table-responsive-vertical .table-hover.table-mc-red > tbody > tr > td:hover {
        background-color: #f9bdbb;
    }
}
.table-striped.table-mc-pink > tbody > tr:nth-child(odd) > td,
.table-striped.table-mc-pink > tbody > tr:nth-child(odd) > th {
    background-color: #fce4ec;
}
.table-hover.table-mc-pink > tbody > tr:hover > td,
.table-hover.table-mc-pink > tbody > tr:hover > th {
    background-color: #f8bbd0;
}
@media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-pink > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-pink > tbody > tr:nth-child(odd) {
        background-color: #fff;
    }
    .table-responsive-vertical .table-striped.table-mc-pink > tbody > tr > td:nth-child(odd) {
        background-color: #fce4ec;
    }
    .table-responsive-vertical .table-hover.table-mc-pink > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-pink > tbody > tr:hover {
        background-color: #fff;
    }
    .table-responsive-vertical .table-hover.table-mc-pink > tbody > tr > td:hover {
        background-color: #f8bbd0;
    }
}
.table-striped.table-mc-purple > tbody > tr:nth-child(odd) > td,
.table-striped.table-mc-purple > tbody > tr:nth-child(odd) > th {
    background-color: #f3e5f5;
}
.table-hover.table-mc-purple > tbody > tr:hover > td,
.table-hover.table-mc-purple > tbody > tr:hover > th {
    background-color: #e1bee7;
}
@media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-purple > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-purple > tbody > tr:nth-child(odd) {
        background-color: #fff;
    }
    .table-responsive-vertical .table-striped.table-mc-purple > tbody > tr > td:nth-child(odd) {
        background-color: #f3e5f5;
    }
    .table-responsive-vertical .table-hover.table-mc-purple > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-purple > tbody > tr:hover {
        background-color: #fff;
    }
    .table-responsive-vertical .table-hover.table-mc-purple > tbody > tr > td:hover {
        background-color: #e1bee7;
    }
}
.table-striped.table-mc-deep-purple > tbody > tr:nth-child(odd) > td,
.table-striped.table-mc-deep-purple > tbody > tr:nth-child(odd) > th {
    background-color: #ede7f6;
}
.table-hover.table-mc-deep-purple > tbody > tr:hover > td,
.table-hover.table-mc-deep-purple > tbody > tr:hover > th {
    background-color: #d1c4e9;
}
@media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-deep-purple > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-deep-purple > tbody > tr:nth-child(odd) {
        background-color: #fff;
    }
    .table-responsive-vertical .table-striped.table-mc-deep-purple > tbody > tr > td:nth-child(odd) {
        background-color: #ede7f6;
    }
    .table-responsive-vertical .table-hover.table-mc-deep-purple > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-deep-purple > tbody > tr:hover {
        background-color: #fff;
    }
    .table-responsive-vertical .table-hover.table-mc-deep-purple > tbody > tr > td:hover {
        background-color: #d1c4e9;
    }
}
.table-striped.table-mc-indigo > tbody > tr:nth-child(odd) > td,
.table-striped.table-mc-indigo > tbody > tr:nth-child(odd) > th {
    background-color: #e8eaf6;
}
.table-hover.table-mc-indigo > tbody > tr:hover > td,
.table-hover.table-mc-indigo > tbody > tr:hover > th {
    background-color: #c5cae9;
}
@media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-indigo > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-indigo > tbody > tr:nth-child(odd) {
        background-color: #fff;
    }
    .table-responsive-vertical .table-striped.table-mc-indigo > tbody > tr > td:nth-child(odd) {
        background-color: #e8eaf6;
    }
    .table-responsive-vertical .table-hover.table-mc-indigo > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-indigo > tbody > tr:hover {
        background-color: #fff;
    }
    .table-responsive-vertical .table-hover.table-mc-indigo > tbody > tr > td:hover {
        background-color: #c5cae9;
    }
}
.table-striped.table-mc-blue > tbody > tr:nth-child(odd) > td,
.table-striped.table-mc-blue > tbody > tr:nth-child(odd) > th {
    background-color: #e7e9fd;
}
.table-hover.table-mc-blue > tbody > tr:hover > td,
.table-hover.table-mc-blue > tbody > tr:hover > th {
    background-color: #d0d9ff;
}
@media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-blue > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-blue > tbody > tr:nth-child(odd) {
        background-color: #fff;
    }
    .table-responsive-vertical .table-striped.table-mc-blue > tbody > tr > td:nth-child(odd) {
        background-color: #e7e9fd;
    }
    .table-responsive-vertical .table-hover.table-mc-blue > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-blue > tbody > tr:hover {
        background-color: #fff;
    }
    .table-responsive-vertical .table-hover.table-mc-blue > tbody > tr > td:hover {
        background-color: #d0d9ff;
    }
}
.table-striped.table-mc-light-blue > tbody > tr:nth-child(odd) > td,
.table-striped.table-mc-light-blue > tbody > tr:nth-child(odd) > th {
    background-color: #e1f5fe;
}
.table-hover.table-mc-light-blue > tbody > tr:hover > td,
.table-hover.table-mc-light-blue > tbody > tr:hover > th {
    background-color: #eeeeeeee;
}
@media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-light-blue > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-light-blue > tbody > tr:nth-child(odd) {
        background-color: #fff;
    }
    .table-responsive-vertical .table-striped.table-mc-light-blue > tbody > tr > td:nth-child(odd) {
        background-color: #e1f5fe;
    }
    .table-responsive-vertical .table-hover.table-mc-light-blue > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-light-blue > tbody > tr:hover {
        background-color: #fff;
    }
    .table-responsive-vertical .table-hover.table-mc-light-blue > tbody > tr > td:hover {
        background-color: #eeeeeeee;
    }
}
.table-striped.table-mc-cyan > tbody > tr:nth-child(odd) > td,
.table-striped.table-mc-cyan > tbody > tr:nth-child(odd) > th {
    background-color: #e0f7fa;
}
.table-hover.table-mc-cyan > tbody > tr:hover > td,
.table-hover.table-mc-cyan > tbody > tr:hover > th {
    background-color: #b2ebf2;
}
@media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-cyan > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-cyan > tbody > tr:nth-child(odd) {
        background-color: #fff;
    }
    .table-responsive-vertical .table-striped.table-mc-cyan > tbody > tr > td:nth-child(odd) {
        background-color: #e0f7fa;
    }
    .table-responsive-vertical .table-hover.table-mc-cyan > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-cyan > tbody > tr:hover {
        background-color: #fff;
    }
    .table-responsive-vertical .table-hover.table-mc-cyan > tbody > tr > td:hover {
        background-color: #b2ebf2;
    }
}
.table-striped.table-mc-teal > tbody > tr:nth-child(odd) > td,
.table-striped.table-mc-teal > tbody > tr:nth-child(odd) > th {
    background-color: #e0f2f1;
}
.table-hover.table-mc-teal > tbody > tr:hover > td,
.table-hover.table-mc-teal > tbody > tr:hover > th {
    background-color: #b2dfdb;
}
@media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-teal > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-teal > tbody > tr:nth-child(odd) {
        background-color: #fff;
    }
    .table-responsive-vertical .table-striped.table-mc-teal > tbody > tr > td:nth-child(odd) {
        background-color: #e0f2f1;
    }
    .table-responsive-vertical .table-hover.table-mc-teal > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-teal > tbody > tr:hover {
        background-color: #fff;
    }
    .table-responsive-vertical .table-hover.table-mc-teal > tbody > tr > td:hover {
        background-color: #b2dfdb;
    }
}
.table-striped.table-mc-green > tbody > tr:nth-child(odd) > td,
.table-striped.table-mc-green > tbody > tr:nth-child(odd) > th {
    background-color: #d0f8ce;
}
.table-hover.table-mc-green > tbody > tr:hover > td,
.table-hover.table-mc-green > tbody > tr:hover > th {
    background-color: #a3e9a4;
}
@media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-green > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-green > tbody > tr:nth-child(odd) {
        background-color: #fff;
    }
    .table-responsive-vertical .table-striped.table-mc-green > tbody > tr > td:nth-child(odd) {
        background-color: #d0f8ce;
    }
    .table-responsive-vertical .table-hover.table-mc-green > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-green > tbody > tr:hover {
        background-color: #fff;
    }
    .table-responsive-vertical .table-hover.table-mc-green > tbody > tr > td:hover {
        background-color: #a3e9a4;
    }
}
.table-striped.table-mc-light-green > tbody > tr:nth-child(odd) > td,
.table-striped.table-mc-light-green > tbody > tr:nth-child(odd) > th {
    background-color: #f1f8e9;
}
.table-hover.table-mc-light-green > tbody > tr:hover > td,
.table-hover.table-mc-light-green > tbody > tr:hover > th {
    background-color: #dcedc8;
}
@media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-light-green > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-light-green > tbody > tr:nth-child(odd) {
        background-color: #fff;
    }
    .table-responsive-vertical .table-striped.table-mc-light-green > tbody > tr > td:nth-child(odd) {
        background-color: #f1f8e9;
    }
    .table-responsive-vertical .table-hover.table-mc-light-green > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-light-green > tbody > tr:hover {
        background-color: #fff;
    }
    .table-responsive-vertical .table-hover.table-mc-light-green > tbody > tr > td:hover {
        background-color: #dcedc8;
    }
}
.table-striped.table-mc-lime > tbody > tr:nth-child(odd) > td,
.table-striped.table-mc-lime > tbody > tr:nth-child(odd) > th {
    background-color: #f9fbe7;
}
.table-hover.table-mc-lime > tbody > tr:hover > td,
.table-hover.table-mc-lime > tbody > tr:hover > th {
    background-color: #f0f4c3;
}
@media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-lime > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-lime > tbody > tr:nth-child(odd) {
        background-color: #fff;
    }
    .table-responsive-vertical .table-striped.table-mc-lime > tbody > tr > td:nth-child(odd) {
        background-color: #f9fbe7;
    }
    .table-responsive-vertical .table-hover.table-mc-lime > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-lime > tbody > tr:hover {
        background-color: #fff;
    }
    .table-responsive-vertical .table-hover.table-mc-lime > tbody > tr > td:hover {
        background-color: #f0f4c3;
    }
}
.table-striped.table-mc-yellow > tbody > tr:nth-child(odd) > td,
.table-striped.table-mc-yellow > tbody > tr:nth-child(odd) > th {
    background-color: #fffde7;
}
.table-hover.table-mc-yellow > tbody > tr:hover > td,
.table-hover.table-mc-yellow > tbody > tr:hover > th {
    background-color: #fff9c4;
}
@media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-yellow > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-yellow > tbody > tr:nth-child(odd) {
        background-color: #fff;
    }
    .table-responsive-vertical .table-striped.table-mc-yellow > tbody > tr > td:nth-child(odd) {
        background-color: #fffde7;
    }
    .table-responsive-vertical .table-hover.table-mc-yellow > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-yellow > tbody > tr:hover {
        background-color: #fff;
    }
    .table-responsive-vertical .table-hover.table-mc-yellow > tbody > tr > td:hover {
        background-color: #fff9c4;
    }
}
.table-striped.table-mc-amber > tbody > tr:nth-child(odd) > td,
.table-striped.table-mc-amber > tbody > tr:nth-child(odd) > th {
    background-color: #fff8e1;
}
.table-hover.table-mc-amber > tbody > tr:hover > td,
.table-hover.table-mc-amber > tbody > tr:hover > th {
    background-color: #ffecb3;
}
@media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-amber > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-amber > tbody > tr:nth-child(odd) {
        background-color: #fff;
    }
    .table-responsive-vertical .table-striped.table-mc-amber > tbody > tr > td:nth-child(odd) {
        background-color: #fff8e1;
    }
    .table-responsive-vertical .table-hover.table-mc-amber > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-amber > tbody > tr:hover {
        background-color: #fff;
    }
    .table-responsive-vertical .table-hover.table-mc-amber > tbody > tr > td:hover {
        background-color: #ffecb3;
    }
}
.table-striped.table-mc-orange > tbody > tr:nth-child(odd) > td,
.table-striped.table-mc-orange > tbody > tr:nth-child(odd) > th {
    background-color: #fff3e0;
}
.table-hover.table-mc-orange > tbody > tr:hover > td,
.table-hover.table-mc-orange > tbody > tr:hover > th {
    background-color: #ffe0b2;
}
@media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-orange > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-orange > tbody > tr:nth-child(odd) {
        background-color: #fff;
    }
    .table-responsive-vertical .table-striped.table-mc-orange > tbody > tr > td:nth-child(odd) {
        background-color: #fff3e0;
    }
    .table-responsive-vertical .table-hover.table-mc-orange > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-orange > tbody > tr:hover {
        background-color: #fff;
    }
    .table-responsive-vertical .table-hover.table-mc-orange > tbody > tr > td:hover {
        background-color: #ffe0b2;
    }
}
.table-striped.table-mc-deep-orange > tbody > tr:nth-child(odd) > td,
.table-striped.table-mc-deep-orange > tbody > tr:nth-child(odd) > th {
    background-color: #fbe9e7;
}
.table-hover.table-mc-deep-orange > tbody > tr:hover > td,
.table-hover.table-mc-deep-orange > tbody > tr:hover > th {
    background-color: #ffccbc;
}
@media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-deep-orange > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-deep-orange > tbody > tr:nth-child(odd) {
        background-color: #fff;
    }
    .table-responsive-vertical .table-striped.table-mc-deep-orange > tbody > tr > td:nth-child(odd) {
        background-color: #fbe9e7;
    }
    .table-responsive-vertical .table-hover.table-mc-deep-orange > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-deep-orange > tbody > tr:hover {
        background-color: #fff;
    }
    .table-responsive-vertical .table-hover.table-mc-deep-orange > tbody > tr > td:hover {
        background-color: #ffccbc;
    }
}

/* New Note Drawer */
/* Overrides of menu z-indices which will apply across the app */
md-backdrop.md-menu-backdrop {
    z-index: 1300;
}
.md-open-menu-container {
    z-index: 1402;
}
.doc-drawer-wrapper,
.note-drawer-wrapper {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
}
.doc-drawer-wrapper md-backdrop,
.note-drawer-wrapper md-backdrop {
    z-index: 1199;
}

.note-drawer-modal,
.note-drawer-modal.modal:nth-of-type(even) {
    z-index: 1401 !important;
}

#content md-backdrop.md-dialog-backdrop {
    z-index: 1400;
}
div.md-dialog-container.ng-scope {
    z-index: 1401 !important;
}
.note-drawer-draw-dialog {
    width: 100%;
}
#content .innerLR .alert {
    margin: 0 15px;
}

.note-drawer-draw-dialog h2 {
    font-family: 'Work Sans', sans-serif;
    font-size: 16.91px;
    color: rgba(0, 0, 0, 0.87);
    letter-spacing: 0.15px;
    text-align: left;
    line-height: 24px;
}

.note-drawer-wrapper md-progress-linear.note-drawer-loading-file {
    position: absolute;
}
.note-drawer-wrapper md-progress-linear .md-container {
    background-color: #b0bec5;
}
.note-drawer-wrapper md-progress-linear .md-bar {
}

.note-drawer-menu md-menu-item .md-button .material-icons {
    vertical-align: middle;
}
.note-drawer-menu md-menu-item {
    width: 100%;
}
md-menu-item button img {
    width: 18px;
    height: 18px;
}
md-menu-item button.selected-sort-menu img {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(118.6deg) brightness(100%) contrast(103.6%);
}

@keyframes fade-out-content {
    from {
        opacity: 1;
        visibility: visible;
    }

    33% {
        opacity: 0;
        visibility: hidden;
    }

    to {
        opacity: 0;
        visibility: hidden;
    }
}
@keyframes fade-back-in-content {
    from {
        opacity: 0;
        visibility: hidden;
    }

    66% {
        opacity: 0;
        visibility: hidden;
    }

    to {
        opacity: 1;
        visibility: visible;
    }
}

@keyframes fully-expand-note-drawer {
    from {
        transform: translate(-650px, 0);
    }

    33% {
        transform: translate(-650px, 0);
    }

    66% {
        transform: translate(-100%, 0);
    }

    to {
        transform: translate(-100%, 0);
    }
}

@keyframes fully-expand-project-settings-drawer {
    from {
        transform: translate(-400px, 0);
    }

    33% {
        transform: translate(-400px, 0);
    }

    66% {
        transform: translate(-100%, 0);
    }

    to {
        transform: translate(-100%, 0);
    }
}

@keyframes reduce-note-drawer {
    from {
        transform: translate(-100%, 0);
    }

    33% {
        transform: translate(-100%, 0);
    }

    66% {
        transform: translate(-650px, 0);
    }

    to {
        transform: translate(-650px, 0);
    }
}

@keyframes reduce-project-settings-drawer {
    from {
        transform: translate(-100%, 0);
    }

    33% {
        transform: translate(-100%, 0);
    }

    66% {
        transform: translate(-400px, 0);
    }

    to {
        transform: translate(-400px, 0);
    }
}

@keyframes fade-in-expanded-content {
    from {
        opacity: 0;
        visibility: hidden;
    }

    66% {
        opacity: 0;
        visibility: hidden;
    }
    to {
        opacity: 1;
        visibility: visible;
    }
}
@keyframes fade-back-out-expanded-content {
    from {
        visibility: visible;
        opacity: 1;
    }

    33% {
        visibility: hidden;
        opacity: 0;
    }
    to {
        visibility: hidden;
        opacity: 0;
    }
}
/* short version used when no pause needed for movement of the drawer */
@keyframes short-fade-out-content {
    from {
        opacity: 1;
        visibility: visible;
    }

    50% {
        opacity: 0;
        visibility: hidden;
    }

    to {
        opacity: 0;
        visibility: hidden;
    }
}
@keyframes short-fade-back-in-content {
    from {
        opacity: 0;
        visibility: hidden;
    }

    50% {
        opacity: 0;
        visibility: hidden;
    }

    to {
        opacity: 1;
        visibility: visible;
    }
}
@keyframes short-fade-in-expanded-content {
    from {
        opacity: 0;
        visibility: hidden;
    }

    50% {
        opacity: 0;
        visibility: hidden;
    }
    to {
        opacity: 1;
        visibility: visible;
    }
}
@keyframes short-fade-back-out-expanded-content {
    from {
        visibility: visible;
        opacity: 1;
    }

    50% {
        visibility: hidden;
        opacity: 0;
    }
    to {
        visibility: hidden;
        opacity: 0;
    }
}

md-sidenav#doc-drawer,
md-sidenav#drawer-projects,
md-sidenav#note-drawer {
    max-width: 100%;
    width: 100%;
    z-index: 1200;
}
md-sidenav#project-settings-drawer {
    max-width: 100%;
    width: 100%;
    z-index: 1200;
}
@media (min-width: 775px) {
    md-sidenav#note-drawer,
    md-sidenav#drawer-projects {
        max-width: 90%;
        width: 90%;
    }
    md-sidenav#project-settings-drawer {
        max-width: 90%;
        width: 90%;
    }
}
@media (min-width: 750px) {
    md-sidenav#doc-drawer {
        max-width: 100%;
        width: 100%;
    }
}

md-sidenav#note-drawer.md-sidenav-right,
md-sidenav#drawer-projects {
    width: 650px;
    transition: width 0.5s ease-in-out;
    -webkit-transition: width 0.5s ease-in-out;
    -moz-transition: width 0.5s ease-in-out;
    -o-transition: width 0.5s ease-in-out;
    -ms-transition: width 0.5s ease-in-out;
}
md-sidenav#doc-drawer.md-sidenav-right {
    width: 750px;
}
md-sidenav#note-drawer.md-sidenav-right.md-closed {
    transform: translate(0, 0);
}
md-sidenav#note-drawer.md-sidenav-right.note-drawer-closing-expansion,
md-sidenav#note-drawer.md-sidenav-right.note-drawer-fully-exapanded {
    animation-direction: normal;
    width: 100%;
}
md-sidenav#note-drawer.md-sidenav-right.note-drawer-closing-expansion {
    animation: reduce-note-drawer 0.9s both;
}
md-sidenav#note-drawer.md-sidenav-right.note-drawer-fully-exapanded {
    animation: fully-expand-note-drawer 0.9s both;
}
md-sidenav#note-drawer.md-sidenav-right.note-drawer-closing-expansion #note-drawer-scroll,
md-sidenav#note-drawer.md-sidenav-right.note-drawer-fully-exapanded #note-drawer-scroll {
    animation-direction: normal;
}
md-sidenav#note-drawer.md-sidenav-right.note-drawer-closing-expansion #note-drawer-scroll {
    animation: fade-back-in-content 0.9s both;
}
md-sidenav#note-drawer.md-sidenav-right.note-drawer-fully-exapanded #note-drawer-scroll {
    animation: fade-out-content 0.9s both;
}
md-sidenav#note-drawer.md-sidenav-right.note-drawer-closing-expansion .note-drawer-expanded {
    animation: fade-back-out-expanded-content 0.9s both;
}
md-sidenav#note-drawer.md-sidenav-right.note-drawer-fully-exapanded .note-drawer-expanded {
    animation: fade-in-expanded-content 0.9s both;
}

md-sidenav#project-settings-drawer.md-sidenav-right {
    width: 400px;
}
md-sidenav#project-settings-drawer.md-sidenav-right.md-closed {
    transform: translate(0, 0);
}
md-sidenav#project-settings-drawer.md-sidenav-right.note-drawer-closing-expansion,
md-sidenav#project-settings-drawer.md-sidenav-right.note-drawer-fully-exapanded {
    animation-direction: normal;
    width: 70%;
}
md-sidenav#project-settings-drawer.md-sidenav-right.note-drawer-closing-expansion {
    animation: reduce-project-settings-drawer 0.9s both;
}
md-sidenav#project-settings-drawer.md-sidenav-right.note-drawer-fully-exapanded {
    animation: fully-expand-project-settings-drawer 0.9s both;
}
md-sidenav#project-settings-drawer.md-sidenav-right.note-drawer-closing-expansion #project-settings-scroll,
md-sidenav#project-settings-drawer.md-sidenav-right.note-drawer-fully-exapanded #project-settings-scroll {
    animation-direction: normal;
}
md-sidenav#project-settings-drawer.md-sidenav-right.note-drawer-closing-expansion #project-settings-scroll {
    animation: fade-back-in-content 0.9s both;
}
md-sidenav#project-settings-drawer.md-sidenav-right.note-drawer-fully-exapanded #project-settings-scroll {
    animation: fade-out-content 0.9s both;
}
md-sidenav#project-settings-drawer.md-sidenav-right.note-drawer-closing-expansion .note-drawer-expanded {
    animation: fade-back-out-expanded-content 0.9s both;
}
md-sidenav#project-settings-drawer.md-sidenav-right.note-drawer-fully-exapanded .note-drawer-expanded {
    animation: fade-in-expanded-content 0.9s both;
}

#note-drawer-scroll,
#project-settings-scroll {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 650px;
}
#project-settings-scroll {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 400px;
}
@media (max-width: 650px) {
    md-sidenav#note-drawer.md-sidenav-right {
        transform: translate(-100%);
    }

    #note-drawer-scroll {
        width: 100%;
    }
    md-sidenav#note-drawer.md-sidenav-right.note-drawer-closing-expansion {
        animation: none;
    }
    md-sidenav#note-drawer.md-sidenav-right.note-drawer-fully-exapanded {
        animation: none;
    }
    md-sidenav#note-drawer.md-sidenav-right.note-drawer-closing-expansion #note-drawer-scroll {
        animation: short-fade-back-in-content 0.6s both;
    }
    md-sidenav#note-drawer.md-sidenav-right.note-drawer-fully-exapanded #note-drawer-scroll {
        animation: short-fade-out-content 0.6s both;
    }
    md-sidenav#note-drawer.md-sidenav-right.note-drawer-closing-expansion .note-drawer-expanded {
        animation: short-fade-back-out-expanded-content 0.6s both;
    }
    md-sidenav#note-drawer.md-sidenav-right.note-drawer-fully-exapanded .note-drawer-expanded {
        animation: short-fade-in-expanded-content 0.6s both;
    }
}
.note-drawer-expanded {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex;
}
.note-drawer-expanded .note-drawer-expanded-top {
    height: 48px;
    width: 100%;
    display: flex;
}

.note-drawer-expanded-botton {
    width: 100%;
    position: fixed;
    display: flex;
    bottom: 0px;
    z-index: 20000;
    background: white;
}
.note-drawer-toolbar .md-button.note-drawer-open-external {
    margin-left: auto;
    margin-right: 16px;
}
.note-drawer-expanded .note-drawer-expanded-content {
    flex: 1 1 auto;
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative;
}
.note-drawer-expanded .note-drawer-expanded-content svg {
    position: absolute;
    left: 50%;
    margin-left: -50px;
    top: 50%;
    margin-top: -50px;
    -webkit-animation: rotation 1.4s linear infinite;
    animation: rotation 1.4s linear infinite;
    z-index: 900;
}
.note-drawer-expanded .note-drawer-expanded-content img {
    max-width: 86vw;
    max-height: 90vh;
    align-self: center;
    cursor: pointer;
    z-index: 1000;
}
.note-drawer-expanded .note-drawer-expanded-content div {
    height: 20px;
    width: 20px;
    align-self: center;
    cursor: pointer;
}
.note-drawer-expanded .note-drawer-expanded-content .note-drawer-expanded-map {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
}
.note-drawer-top-section,
.note-drawer-properties,
.note-drawer-properties-loading {
    background: #eceff1;
}

.note-drawer-top-section {
    position: relative;
    z-index: 1201;
    box-shadow:
        0 1px 5px 0 rgba(0, 0, 0, 0.2),
        0 2px 2px 0 rgba(0, 0, 0, 0.14),
        0 3px 1px -2px rgba(0, 0, 0, 0.12);
}

.note-drawer-properties,
.note-drawer-properties-loading {
    padding-bottom: 8px;
    padding-top: 8px;
}

.note-drawer-toolbar {
    display: flex;
}
.note-drawer-toolbar .note-drawer-toolbar-main-section {
    flex: 1 1 auto;
    display: flex;
}
.note-drawer-toolbar .md-button {
    margin: 4px;
    flex: 0 0 auto;
}
.note-drawer-toolbar .md-button:last-child {
    margin-right: 8px;
}

.note-drawer-toolbar .note-drawer-close-button {
    /* Margins to align the icon itself with 30px from the left edge and the following content 72px from the left edge.*/
    margin-left: 18px;
    margin-right: 16px;
    flex: 0 0 auto;
}
@media (max-width: 720px) {
    .note-drawer-toolbar .md-button {
        margin: 4px 2px;
    }
    .note-drawer-toolbar .note-drawer-close-button {
        margin-left: 8px;
    }
}
.note-drawer-toolbar .md-button.note-drawer-open-external {
    height: 40px;
}
.note-drawer-last-updated {
    flex: 1 1 auto;
    align-self: center;
    font-family: 'Work Sans', sans-serif;
    font-size: 15px;
    color: rgba(35, 47, 52, 0.7);
    letter-spacing: 0.57px;
}
.note-drawer-last-updated-by {
    border-bottom: 1px rgba(35, 47, 52, 0.7) dashed;
}

.note-drawer-title {
    display: flex;
    align-items: flex-start;
}

.note-drawer-title .note-drawer-number,
.note-drawer-title h1,
.note-drawer-title-edit-menu textarea {
    font-family: 'Work Sans', sans-serif;
    font-weight: 700;
    font-size: 21px;
    letter-spacing: 0.8px;
    line-height: 24px;
}

.note-drawer-title .note-drawer-number {
    display: inline-block;
    padding-left: 30px;
    min-width: 34px;
    margin-right: 4px;
    margin-top: 12px;
    color: var(--secondary-color);
}
@media (max-width: 720px) {
    .note-drawer-title .note-drawer-number {
        padding-left: 16px;
    }
}
.note-drawer-title-edit {
    height: 24px;
    margin: 6px 0;
}

.md-button.note-drawer-title-editable {
    padding-left: 4px;
    margin-left: 0;
    margin-right: 8px;
    display: flex;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0);
    text-transform: none;
    white-space: normal;
    text-align: left;
}
.md-button.note-drawer-title-editable h1 {
    margin: 6px 0;
}
.md-button.note-drawer-title-editable:hover,
.md-button.note-drawer-title-editable.md-focused {
    background: rgba(255, 255, 255, 1);
}
.note-drawer-title-editable .material-icons {
    flex: 0 0 auto;
    margin-left: 12px;
    color: rgba(97, 97, 97, 1);
    opacity: 0.4;
    /* easing curve matches that of the .md-button animation */
    transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.md-button.note-drawer-title-editable:hover .material-icons,
.md-button.note-drawer-title-editable.md-focused .material-icons {
    opacity: 1;
}
.note-drawer-title-edit-menu {
    display: flex;
    width: 100%;
}
.note-rawer-title-edit-menu .note-drawer-text-field {
    flex: 1 1 auto;
    margin-left: 12px;
}
.note-rawer-title-edit-menu .note-drawer-text-field-cancel {
    flex: 0 0 auto;
}

.note-drawer-title h1 {
    color: #232f34;
    margin: 0;
    display: inline-block;
    flex: 1 1 auto;
}

.note-drawer-error-banner {
    background: #fff;
    padding: 4px 12px;
    margin: 0 30px 8px;
    color: rgba(35, 47, 52, 0.87);
    display: flex;
    align-items: center;
    font-family: 'Work Sans', sans-serif;
    font-size: 15px;
    letter-spacing: 0;
}
.note-drawer-error-banner span {
    flex: 1 1 auto;
}

.note-drawer-property-section {
    background: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    min-height: 42px;
    width: 188px;
    margin: 8px 30px;
    color: rgba(0, 0, 0, 0.72);
    font-family: 'Work Sans', sans-serif;
    font-size: 15px;
    letter-spacing: 0.47px;
    line-height: 16px;
    position: relative;
    overflow: hidden;
}
.note-drawer-status-priority-row {
    display: flex;
    margin-left: 30px;
}
.note-drawer-status-priority-row .note-drawer-property-section {
    margin: 8px 16px 8px 0;
}
.note-drawer-property-section-hoverable:hover {
    background: rgba(255, 255, 255, 0.72);
    cursor: pointer;
}
@media (max-width: 720px) {
    .note-drawer-property-section {
        margin: 8px 16px;
    }
    .note-drawer-status-priority-row {
        margin-left: 16px;
    }
}

.note-drawer-property-section > .material-icons {
    color: rgba(0, 0, 0, 0.54);
}

.note-drawer-property-section > span > .material-icons:first-child,
.note-drawer-button-content-wrapper > span > .material-icons:first-child,
.note-drawer-property-section > .material-icons:first-child {
    flex: 0 0 auto;
    text-align: center;
    width: 44px;
}
.md-button.note-drawer-property-section.note-drawer-status-button .note-drawer-status-icon {
    width: 32px;
    height: 42px;
    margin-right: 6px;
}

.note-drawer-property-section:last-child {
    margin-bottom: 0;
}

.note-drawer-property-section-full-width {
    width: calc(100% - 54px);
}
@media (max-width: 720px) {
    .note-drawer-property-section-full-width {
        width: calc(100% - 30px);
    }
}

.md-button.note-drawer-property-section {
    text-align: left;
    text-transform: none;
}
.md-button.note-drawer-property-section:hover,
.md-button.note-drawer-property-section.md-focused {
    background: rgba(255, 255, 255, 1);
}

.md-button.note-drawer-property-section.note-drawer-status-button {
    /*border-left: 6px solid;*/
    padding-left: 0;
}
.md-button.note-drawer-property-section.note-drawer-status-button .material-icons.note-drawer-status-icon {
    display: inline-block;
    min-width: 42px;
    line-height: 42px;
}
.md-button.note-drawer-property-section.note-drawer-status-button.in-progress .note-drawer-status-icon,
md-radio-button .note-drawer-edit-status-icon.in-progress {
    background-color: #ef9a9a;
}
.md-button.note-drawer-property-section.note-drawer-status-button.finished .note-drawer-status-icon,
md-radio-button .note-drawer-edit-status-icon.finished {
    background-color: #aed581;
}
.md-button.note-drawer-property-section.note-drawer-status-button.pending .note-drawer-status-icon,
md-radio-button .note-drawer-edit-status-icon.pending {
    background-color: #ffe082;
}
.note-drawer-status-priority-row .note-drawer-property-section {
    margin-top: 0;
    margin-bottom: 0;
    height: 42px;
}

.note-drawer-edit-status-icon {
    display: inline-block;
    width: 224px;
    padding: 5px;
    line-height: 24px;
    text-align: center;
    vertical-align: middle;
    margin: 2px 8px 2px 0;
    color: white;
    border-radius: 2px;
}

.note-drawer-labelled-item {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.note-drawer-labelled-item .note-drawer-label {
    font-family: 'Work Sans', sans-serif;
    font-size: 12px;
    color: rgba(35, 47, 52, 0.7);
    letter-spacing: 0.46px;
}

.note-drawer-labelled-item .note-drawer-item {
    font-family: 'Work Sans', sans-serif;
    font-size: 15px;
    color: #232f34;
    letter-spacing: 0.57px;
}
md-menu-content.note-drawer-menu {
    align-items: flex-start;
}
.navigation-menu-panel  {
    background: var(--secondary-color);
}
.user-menu-panel,
.notification-menu-panel,
.invitation-menu-panel,
.navigation-menu-panel {
    background: var(--secondary-color);
    width: 430px;
}
.project-menu-panel {
    background: var(--secondary-color);
    width: calc(250px + 100vw - 768px);
    max-width: 600px;
}
@media (max-width: 1000px) {
    .project-menu-panel {
        width: calc(100vw - 150px);
    }
}
@media (max-width: 550px) {
    .project-menu-panel {
        width: calc(100vw - 50px);
    }
}

@media (max-width: 440px) {
    .notification-menu-panel,
    .invitation-menu-panel,
    .project-menu-panel {
        width: 100%;
    }
    .notification-menu-parent-panel-class,
    .invitation-menu-parent-panel-class,
    .project-menu-parent-panel-class,
    .navigation-menu-parent-panel-class {
        left: 0 !important;
        right: 0 !important;
        width: 100%;
    }
}
.user-menu-panel .md-user-avatar,
.notification-menu-panel .md-user-avatar,
.invitation-menu-panel .md-user-avatar,
.project-menu-panel .md-user-avatar {
    width: 44px;
    height: 44px;
    background-size: cover;
    background-position: top center;
    border-radius: 50%;
    margin-right: 5px;
}

.project-menu-panel md-input-container:not(.md-input-invalid).md-input-focused .md-input {
    border-width: 0 0 1px !important;
    border-style: solid !important;
    border-color: white !important;
}

@media (max-width: 440px) {
    .notification-menu-parent-panel-class,
    .invitation-menu-parent-panel-class {
        left: 0 !important;
        width: 100%;
    }
}
#top-menu-sheet {
    position: absolute;
    left: 0;
    right: 0;
    top: 0px;
    bottom: auto;
    padding: 8px 16px 8px;
    z-index: 1500;
    border-top-width: 0px;
    border-top-style: solid;
    -webkit-transform: none;
    transform: none;
    -webkit-transition: none;
    transition: none;
    transition-property: none;
    -webkit-transition-property: none;
    transition-property: none;
    transition-property: none;
    transition-property: none;
    background-color: var(--primary-color);
}
#top-menu-sheet .top-menu-list-entry {
    color: white;
    text-transform: uppercase;
    line-height: 43px;
    height: 100%;
    font-size: 20px;
    cursor: pointer;
    color: white;
    font-family: 'Work Sans', sans-serif;
}

#top-menu-sheet i {
    color: white;
}
.user-menu-panel div,
.navigation-menu-panel div {
    align-items: center;
    cursor: pointer;
    display: flex;
    height: 48px;
    padding: 0 16px;
    position: relative;
    transition: background 0.15s linear;
    width: auto;
    color: white;
}
.navigation-menu-panel div {
    text-transform: uppercase;
    font-size: 16px;
}
.user-menu-panel div.hoverable:hover,
.navigation-menu-panel div.hoverable:hover {
    color: #222;
    background-color: #eee;
    transition: all 0.5s ease-out;
}
.note-drawer-menu .note-drawer-menu-title,
.note-drawer-panel .note-drawer-menu-title {
    font-family: 'Work Sans', sans-serif;
    font-size: 15px;
    color: #000000;
    letter-spacing: 0.47px;
    text-align: left;
    line-height: 16px;
    display: flex;
    align-items: center;
    width: calc(100% - 40px);
}
.note-drawer-menu .note-drawer-menu-title,
.note-drawer-text-field .note-drawer-menu-title {
    margin: 0 0 8px 40px;
}
.note-drawer-menu .note-drawer-menu-title > span,
.note-drawer-panel .note-drawer-menu-title > span {
    flex: 1 1 auto;
}
.note-drawer-menu .note-drawer-menu-label,
.note-drawer-panel .note-drawer-menu-label {
    font-family: 'Work Sans', sans-serif;
    font-size: 17px;
    color: rgba(0, 0, 0, 0.87);
    letter-spacing: 0.5px;
    text-align: left;
    line-height: 28px;
}
.note-drawer-menu .md-button.note-drawer-menu-save,
.note-drawer-panel .md-button.note-drawer-menu-save {
    margin-left: 40px;
}

.note-drawer-timeline {
    padding: 0 24px;
}

@media (max-width: 720px) {
    .note-drawer-timeline {
        padding: 0 8px;
    }
}

.note-drawer-timeline h2 {
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
    font-size: 17px;
    color: rgba(35, 47, 52, 0.87);
    letter-spacing: 0.57px;
    margin: 14px 0 8px 14px;
}

@media (max-width: 720px) {
    .note-drawer-timeline h2 {
        margin-left: 8px;
    }
}

.note-drawer-user-avatar,
.note-drawer-group-avatar {
    border-radius: 50%;
    display: inline-block;
    background-size: cover;
    height: 32px;
    width: 32px;
}
.note-drawer-group-avatar {
    background: #455a64;
    color: #eceff1;
    line-height: 32px;
    vertical-align: middle;
    text-align: center;
}
.note-drawer-user-avatar-default {
    background-color: rgba(22, 50, 71, 0.2);
    background-size: 18px 18px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-image: url('/vendor/img/user_picture_default.png');
}

.note-drawer-timeline-add-new-observation {
    display: flex;
    padding-left: 14px;
    align-items: center;
}
@media (max-width: 720px) {
    .note-drawer-timeline-add-new-observation {
        padding: 0 8px;
    }
}

.note-drawer-timeline-add-new-observation-box {
    border: rgba(0, 0, 0, 0.08) 2px solid;
    border-radius: 4px;
    padding: 8px 12px;
    margin-left: 12px;
    font-family: 'Work Sans', sans-serif;
    font-size: 15px;
    color: rgba(35, 47, 52, 0.87);
    letter-spacing: 0;
    flex: 1 1 auto;
    cursor: pointer;
}
.note-drawer-timeline-add-new-observation-box:hover {
    color: #0288d1;
    border-color: rgba(0, 0, 0, 0.12);
    background-color: rgba(20, 51, 71, 0.06);
}

.note-drawer-timeline-new-block {
    display: flex;
    justify-content: flex-end;
    margin-right: -8px;
    padding-top: 4px;
}
@media (max-width: 720px) {
    .note-drawer-timeline-new-block {
        padding-right: 8px;
    }
}
.note-drawer-timeline-new-block .md-button {
    color: rgba(0, 0, 0, 0.7);
    margin: 0 2px;
}
.note-drawer-timeline h3 {
    margin: 42px 0 10px 14px;
}
.note-drawer-timeline h3.note-drawer-date-group-first {
    margin-top: 0;
}
@media (max-width: 720px) {
    .note-drawer-timeline h3 {
        margin-left: 8px;
    }
}
.note-drawer-timeline h3:not(.form-field-separator),
.note-drawer-timeline h3:not(.form-field-separator) span.ng-scope {
    font-family: 'Work Sans', sans-serif;
    font-size: 12px;
    line-height: 12px;
    font-weight: 300;
    color: #232f34;
    letter-spacing: 0.42px;
    text-transform: uppercase;
}
.note-drawer-timeline h3 .note-drawer-timeline-day-of-week {
    font-weight: 500;
    letter-spacing: 0.46px;
}
.note-drawer-block .md-button.note-drawer-more {
    margin: 0;
    flex: 0 0 auto;
}
.note-drawer-block,
.note-drawer-timeline-new-observation {
    background: #f5f5f5;
    margin: 0 0 18px 0;
    position: relative;
}
.note-drawer-block.block-from-duplication {
    background: #00000015;
}
.note-drawer-block-meta {
    display: flex;
    align-items: center;
}
.note-drawer-block-user {
    margin: 8px 10px 8px 14px;
}
@media (max-width: 720px) {
    .note-drawer-block-user {
        margin-left: 8px;
    }
}
.note-drawer-block-time {
    flex: 1 1 auto;
    font-family: 'Work Sans', sans-serif;
    font-size: 12px;
    color: rgba(35, 47, 52, 0.7);
    letter-spacing: 0;
    margin-left: 24px;
}
.note-drawer-block-time.updated {
    font-style: italic;
    opacity: 0.75;
}
.note-drawer-block-user-name {
    font-family: 'Work Sans', sans-serif;
    font-size: 15px;
    color: #232f34;
    letter-spacing: 0;
}
.note-drawer-block-content {
    margin: 0 0 0 58px;
    padding-bottom: 12px;
    font-family: 'Work Sans', sans-serif;
    font-size: 15px;
    line-height: 18px;
    color: rgba(35, 47, 52, 0.7);
    letter-spacing: 0;
    width: calc(100% - 58px - 16px);
    word-wrap: break-word;
}
@media (max-width: 720px) {
    .note-drawer-block-content {
        margin-left: 8px;
        width: calc(100% - 8px - 8px);
    }
}
.note-drawer-clickable-image {
    cursor: pointer;
}
.note-drawer-block-description {
    margin-top: 12px;
}
.note-drawer-description-button {
    display: block;
    margin: 4px 0 0 0;
}
.note-drawer-block-add-description {
    display: flex;
    padding: 12px;
    background: #fff;
    margin-top: 6px;
}
.note-drawer-block-description .note-drawer-text-field-wrapper {
}
.note-drawer-block-description md-input-container label {
    color: rgba(0, 0, 0, 0.6);
}
.note-drawer-block-content img {
    max-width: 330px;
    max-height: 250px;
}
@media (max-width: 362px) {
    .note-drawer-block-content img {
        max-width: 100%;
    }
}
.note-drawer-timeline-new-observation {
    display: flex;
}
.note-drawer-text-field {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.note-drawer-text-field-wrapper {
    padding-top: 1px;
    border-radius: 4px 4px 0 0;
    margin: 12px 0;
}
.note-drawer-text-field md-input-container {
    padding: 0;
    margin-bottom: 0;
}
.note-drawer-text-field md-input-container label:not(.md-no-float):not(.md-container-ignore),
.note-drawer-text-field md-input-container label {
    padding-left: 12px;
    padding-right: 12px;
}
.note-drawer-text-field md-input-container textarea {
    margin-bottom: 0;
    padding: 0 12px;
}
.note-drawer-text-field md-input-container .md-errors-spacer {
    display: none;
}
md-input-container.no-errors .md-errors-spacer {
    display: none;
}
.project-menu-panel-title-input .md-errors-spacer {
    display: none;
}
.note-drawer-wrapper md-input-container:not(.md-input-invalid).md-input-focused .md-input,
.note-drawer-menu md-input-container:not(.md-input-invalid).md-input-focused .md-input,
.note-drawer-panel md-input-container:not(.md-input-invalid).md-input-focused .md-input {
    border-style: solid;
    border-width: 2px;
}
.note-drawer-timeline-new-observation .note-drawer-block-user {
    padding-top: 12px;
}
.note-drawer-text-field .note-drawer-text-field-post {
    margin: 0 0 16px 0;
    align-self: flex-start;
}
.md-button.note-drawer-text-field-cancel {
    margin: 16px 18px 0 16px;
}
@media (max-width: 550px) {
    .md-button.note-drawer-text-field-cancel {
        margin: 16px 8px 0 8px;
    }
}

.note-drawer-panel-top {
    padding: 1px 0 8px 0;
    display: flex;
    align-items: center;
}
.note-drawer-sharing-panel .note-drawer-panel-top {
    padding-top: 4px;
}
.note-drawer-panel-top .note-drawer-panel-icon {
    width: 44px;
    text-align: center;
    flex: 0 0 auto;
}
.note-drawer-panel-top .note-drawer-menu-title {
    flex: 1 1 auto;
    margin: 0;
}
.note-drawer-panel-no-icon .note-drawer-menu-title {
    margin-left: 16px;
}
.note-drawer-panel {
    margin: 12px 12px 12px 44px;
}
.note-drawer-panel-no-icon .md-button.note-drawer-panel-post {
    margin-left: 16px;
}
.note-drawer-panel .note-drawer-panel-cancel {
    flex: 0 0 auto;
}
.note-drawer-panel md-radio-button .md-ripple-container,
.note-drawer-panel md-radio-button .md-container:before {
    /* This fixes a positioning bug where the focus disk of md-radio-button was being incorrectly placed. */
    transform: translate(10px, 0);
}
.note-drawer-wrapper .md-button.formblock-open-button {
    text-transform: none;
    margin: 0 0 0 -8px;
}
.note-drawer-signature-block p {
    margin: 12px 0;
}
.note-drawer-signature-block p:last-child {
    margin-bottom: 0;
}
.note-drawer-signature-block-name {
    color: rgba(0, 0, 0, 0.87);
}
.note-drawer-signature-warning {
    background: #fff;
    padding: 12px;
    display: flex;
}
.note-drawer-signature-warning-text {
    flex: 1 1 auto;
}
.note-drawer-signature-warning p {
    margin: 0;
}
.note-drawer-signature-warning button {
    margin: 12px 0 0 0;
}
.note-drawer-signature-warning .material-icons {
    color: rgba(255, 69, 0, 0.87);
    margin-right: 8px;
}
.note-drawer-signed-items button {
    margin: 12px 0 0 14px;
}
.note-drawer-signed-items p {
    margin: 4px 0 24px 14px;
    font-family: 'Work Sans', sans-serif;
    font-size: 15px;
    color: rgba(0, 0, 0, 0.87);
    letter-spacing: 0.44px;
    text-align: left;
    line-height: 20px;
}
.note-drawer-plan-wrapper {
    display: inline-block;
    position: relative;
    min-height: 100px;
}
.note-drawer-pin {
    height: 60px;
    width: 90px;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transform: translate(0px, -30px);
    -moz-transform: translate(0px, -30px);
    -ms-transform: translate(0px, -30px);
    transform: translate(0px, -30px);
}

.note-drawer-pin.form-pin {
    -webkit-transform: translate(0px, -20px); /* Safari and Chrome */
    -moz-transform: translate(0px, -20px); /* Firefox */
    -ms-transform: translate(0px, -20px); /* IE 9 */
    -o-transform: translate(0px, -20px); /* Opera */
    transform: translate(0px, -20px);
}
.note-drawer-pin img,
.pin img,
.note-drawer-pin bb-icon-pin {
    width: 35px;
    height: 35px;
    position: absolute;
    left: 30%;
    top: 20px;
}
.note-drawer-pin span,
.pin span {
    position: absolute;
    left: 50%;
    top: 10px;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 1em;
    font-weight: bold;
    color: #000;
    width: 65px;
    text-align: center;
}
.note-drawer-pin span.closed,
.pin span.closed {
    background-color: transparent;
}
.note-drawer-panel {
    background: #fefefe;
    min-height: 32px;
    max-width: 596px;
}
@media (max-width: 720px) {
    .note-drawer-panel {
        max-width: calc(100vw - 32px);
    }
}
.note-drawer-panel .note-drawer-text-field {
    margin-left: 12px;
}
.note-drawer-panel.note-drawer-title-edit-menu {
    min-width: 500px;
    margin-left: 24px;
}
@media (max-width: 550px) {
    .note-drawer-recipients-panel {
        margin-left: 0 !important;
    }
    .note-drawer-panel,
    .note-drawer-recipients-panel {
        max-width: calc(100vw - 32px) !important;
    }
    .note-drawer-panel.note-drawer-title-edit-menu {
        min-width: auto;
        width: calc(100vw - 32px);
    }
}
@media (max-width: 520px) {
    .note-drawer-panel.note-drawer-title-edit-menu {
        min-width: 300px;
    }
}
.note-drawer-panel.note-drawer-status-edit-menu {
    width: 300px;
    transition: ease-out 300ms;
}

.note-drawer-panel.note-drawer-status-edit-menu-history {
    width: 552px;
    transition: ease-in 300ms;
}

.note-drawer-panel.note-drawer-status-edit-menu md-ink-bar {
    right: 50% !important;
}

.note-drawer-panel.note-drawer-status-edit-menu-history md-ink-bar {
    background-color: #e95a0d;
    left: 50% !important;
}

.edit-status-history-list {
    width: 95%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.note-drawer-panel.note-drawer-status-edit-menu-history .history-item {
    max-width: 469px;
    min-width: 469px;
}
.note-leaflet-label {
    position: absolute;
    border-radius: 4px;
}
.note-leaflet-label.striked {
    text-decoration: line-through;
}
.note-drawer-panel.note-drawer-status-edit-menu-history .history-item-label {
    background-color: green;
    border-radius: 3px;
    color: whitesmoke;
    padding: 5px;
    width: auto;
    margin-right: 10px;
    width: 100px;
    text-align: center;
}

.note-drawer-panel.note-drawer-status-edit-menu-history .history-item-label-placeholder {
    width: 110px;
    min-width: 110px;
    height: 34px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    animation: history-placeholder-animation 500ms infinite;
    animation-direction: alternate;
}

.note-drawer-panel.note-drawer-status-edit-menu-history .md-list-item-text-placeholder {
    width: 290px;
    height: 10px;
    margin-left: 5px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    animation: history-placeholder-animation 500ms infinite;
    animation-direction: alternate;
}

@keyframes history-placeholder-animation {
    from {
        background-color: rgba(0, 0, 0, 0.1);
    }
    to {
        background-color: rgba(0, 0, 0, 0.18);
    }
}

.note-drawer-panel.note-drawer-add-assignees-menu,
.note-drawer-panel.note-drawer-add-tags-menu {
    width: 490px;
}
.note-drawer-sharing-panel .note-drawer-panel-help {
    margin-left: 44px;
    margin-bottom: 8px;
}
.note-drawer-panel md-radio-button {
    margin-left: 3px;
}
.note-drawer-panel-help,
.note-drawer-panel-none,
.note-drawer-panel-special-help {
    margin: 0 16px;
    font-family: 'Work Sans', sans-serif;
    font-size: 14.79px;
    color: rgba(0, 0, 0, 0.6);
    letter-spacing: 0.25px;
    text-align: left;
    line-height: 20px;
}
p.note-drawer-panel-special-help {
    margin: 8px 16px 8px 16px;
    display: flex;
    background: #eeeeee;
    color: rgba(0, 0, 0, 0.7);
    padding: 8px;
}
.note-drawer-panel-special-help-icon {
    margin: -2px 8px 0 0;
    color: #0288d1;
}
p.note-drawer-panel-none {
    margin-left: 44px;
}
p.note-drawer-section-label {
    flex: 0 0 auto;
    margin: 0 4px 0 0;
}
@media (max-width: 550px) {
    p.note-drawer-section-label {
        flex: 0 1 auto;
    }
}
.note-drawer-faded-list {
    flex: 1 1 auto;
    overflow: hidden;
    display: flex;
    padding-right: 16px;
    position: relative;
}
.note-drawer-faded-list-with-add {
    flex: 1;
}
.note-drawer-list-fade {
    position: absolute;
    right: -1px;
    top: 0;
    height: 100%;
    width: 20px;
    background: linear-gradient(to right, rgba(244, 245, 247, 0), rgba(244, 245, 247, 1));
}
.note-drawer-property-section-hoverable:hover .note-drawer-list-fade {
    background: linear-gradient(to right, rgba(249, 250, 251, 0), rgba(249, 250, 251, 1));
}
.note-drawer-property-section .md-button {
    flex: 0 0 auto;
}
.note-drawer-add-flexible-position {
    flex: 0 auto;
}
.note-drawer-property-add-wrapper {
    flex: 1 1 auto;
}
.md-button.note-drawer-add {
    background: rgba(22, 50, 71, 0.12);
    border-radius: 50%;
    background-clip: padding-box;
    overflow: hidden;
    height: 30px;
    width: 30px;
    padding: 3px;
    min-height: 30px;
    margin: 0 0 0 16px;
    color: #0288d1;
}
.md-button.note-drawer-add:not([disabled]).md-icon-button:hover {
    background: rgba(22, 50, 71, 0.2);
}
.md-button.note-drawer-add .md-ripple-container {
    border-radius: 50%;
    background-clip: padding-box;
    overflow: hidden;
}
.note-drawer-property-add-wrapper .md-button,
.note-drawer-panel-add-button {
    color: #0288d1;
    margin-left: 0;
}
.note-drawer-property-add-wrapper .md-button {
    margin: 2px 0;
}
.note-drawer-sharing {
    display: flex;
}
.note-drawer-sharing-avatar {
    display: inline-block;
    margin-left: 4px;
}
.md-button.note-drawer-share-button {
    background: #0288d1;
    color: #fff;
    margin-left: 0;
    margin-right: 0;
}
.note-drawer-share-button-wrapper {
    padding-left: 12px;
}
.md-button.note-drawer-share-button.md-raised:not([disabled]):hover {
    background-color: #01579b;
}
.note-drawer-chip {
    display: flex;
    background: rgba(22, 50, 71, 0.06);
    height: 30px;
    border-radius: 15px;
    font-family: 'Work Sans', sans-serif;
    font-size: 15px;
    color: rgba(0, 0, 0, 0.87);
    letter-spacing: 0.44px;
    line-height: 30px;
    padding: 0 12px;
    margin-left: 8px;
    position: relative;
    overflow: hidden;
    flex: 0 0 auto;
    align-items: center;
    cursor: pointer;
}
.task-duplication-wrapper .note-drawer-chip {
    margin: 4px;
}
.note-drawer-chip.note-drawer-chip-selected {
    background: var(--primary-color);
    color: white;
}
.note-drawer-chip-labelled {
    display: block;
    height: 48px;
    margin: 6px 0 6px 4px;
}
.note-drawer-chip.note-drawer-chip-with-avatar {
    padding: 0 12px 0 0;
}
.note-drawer-chip .note-drawer-user-avatar,
.note-drawer-chip .note-drawer-group-avatar {
    border-radius: 13px;
    height: 26px;
    width: 26px;
    line-height: 26px;
    vertical-align: top;
    margin: 2px 6px 0 3px;
}
.note-drawer-chip .note-drawer-user-avatar img {
    max-width: 26px;
    max-height: 26px;
}
.note-drawer-chip-editable {
    height: auto;
    display: flex;
}
.note-drawer-chip-editable-indicator,
.note-drawer-chip-inline-editable-indicator {
    display: inline-block;
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
    font-size: 14.79px;
    color: #0288d1;
    letter-spacing: 1.25px;
    line-height: 16px;
    text-transform: uppercase;
}
.note-drawer-chip-editable-indicator {
    padding: 0 16px 0 24px;
    align-self: center;
}
.note-drawer-chip-editable-content {
    display: inline-block;
}
.note-drawer-chip-editable-content .note-drawer-chip-content {
    margin-bottom: 4px;
}
.note-drawer-chip-label {
    font-family: 'Work Sans', sans-serif;
    font-size: 12.68px;
    color: rgba(0, 0, 0, 0.6);
    letter-spacing: 0.4px;
    text-align: left;
    line-height: 16px;
    display: block;
    margin-top: 7px;
}
.note-drawer-chip-selected .note-drawer-chip-label {
    color: white;
}

.note-drawer-chip.removed {
    font-style: italic;
}
.note-drawer-chip-content {
    display: block;
    line-height: 22px;
}
.note-drawer-panel-chip-editable-list,
.note-drawer-panel-chip-list {
    padding-left: 36px;
    padding-right: 16px;
}
.note-drawer-panel-chip-list {
    display: flex;
    flex-wrap: wrap;
    max-height: 70vh;
    overflow-y: scroll;
}
.note-drawer-panel-chip-editable-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.note-drawer-panel-chip-editable-list .note-drawer-chip,
.note-drawer-panel-chip-list .note-drawer-chip {
    margin-bottom: 8px;
}
.note-drawer-panel-suggestions {
    padding: 8px 16px 4px 36px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: 4px;
}
.note-drawer-panel-suggestions-title {
    font-family: 'Work Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.54);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 8px 0;
}
.note-drawer-panel-suggestions-explanation {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.54);
    font-style: italic;
    margin: 4px 0 0 0;
}
.note-drawer-chip-suggestion {
    cursor: pointer;
    border: 1.5px dashed var(--primary-color, #0288d1);
    background: rgba(2, 136, 209, 0.06);
    color: var(--primary-color, #0288d1);
}
.note-drawer-chip-suggestion:hover {
    background: rgba(2, 136, 209, 0.14);
}
.note-drawer-chip-new .note-drawer-chip-new-badge {
    font-size: 10px;
    font-style: italic;
    color: rgba(0, 0, 0, 0.4);
    margin-left: 4px;
}
.note-drawer-ai-correction-loading {
    padding: 8px 0;
    color: rgba(0, 0, 0, 0.54);
    font-size: 13px;
}
.note-drawer-ai-correction-result {
    margin-top: 8px;
    padding: 10px 12px;
    border-left: 3px solid var(--primary-color, #0288d1);
    background: rgba(2, 136, 209, 0.05);
    border-radius: 4px;
}
.note-drawer-ai-correction-header {
    font-size: 12px;
    font-weight: 500;
    color: var(--primary-color, #0288d1);
    margin-bottom: 6px;
}
.note-drawer-ai-correction-text {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.87);
    padding: 6px 0;
    white-space: pre-wrap;
    word-break: break-word;
}
.note-drawer-ai-correction-explanation {
    font-size: 12px;
    font-style: italic;
    color: rgba(0, 0, 0, 0.5);
    margin-top: 4px;
    margin-bottom: 6px;
}
.note-drawer-ai-correction-actions {
    margin-top: 6px;
}
.note-drawer-ai-correction-actions .md-button {
    min-height: 28px;
    line-height: 28px;
    font-size: 12px;
    min-width: 0;
    padding: 0 10px;
    margin: 0 4px 0 0;
}
.note-drawer-ai-correct-button {
    color: var(--primary-color, #0288d1);
    font-size: 12px;
    margin: 0 0 16px 4px;
    align-self: flex-start;
}
.note-drawer-ai-suggest-button {
    color: var(--primary-color, #0288d1);
}
.note-drawer-ai-suggest-inline-button {
    color: var(--primary-color, #0288d1);
    font-size: 12px;
    margin: 0 0 8px 0;
    align-self: flex-start;
    min-height: 28px;
    line-height: 28px;
    padding: 0 8px;
}
.note-drawer-panel-actions {
    padding: 4px 16px 8px 28px;
}
.note-drawer-panel-suggest-button {
    color: var(--primary-color, #0288d1);
    margin-left: 0;
}
.note-drawer-panel-list .note-drawer-user-avatar,
.note-drawer-panel-list .note-drawer-group-avatar {
    height: 42px;
    width: 42px;
    line-height: 42px;
    margin-right: 12px;
}
.note-drawer-panel-list .note-drawer-user-avatar img {
    max-width: 42px;
    max-height: 42px;
}
.md-button.note-drawer-chip-delete {
    background: rgba(22, 50, 71, 0.32);
    border-radius: 50%;
    overflow: hidden;
    height: 26px;
    width: 26px;
    padding: 3px;
    line-height: 26px;
    min-height: 26px;
    margin: 2px -9px 0px 8px;
    color: #fff;
}
.note-drawer-chip-clickable:hover {
    cursor: pointer;
    background: rgba(22, 50, 71, 0.2);
}
.md-button.note-drawer-chip-delete:not([disabled]).md-icon-button:hover {
    background: rgba(22, 50, 71, 0.5);
}
.md-button.note-drawer-chip-delete .md-ripple-container {
    border-radius: 50%;
    background-clip: padding-box;
    overflow: hidden;
}
.note-drawer-panel-list-name {
    font-family: 'Work Sans', sans-serif;
    font-size: 16.91px;
    color: rgba(0, 0, 0, 0.87);
    letter-spacing: 0.15px;
    line-height: 24px;
    word-wrap: break-word;
}
.note-drawer-panel-list .md-list-item-inner > md-checkbox {
    margin-right: 4px;
}
.note-drawer-panel-list {
    height: 294px;
}
.note-drawer-panel-list-divider-top {
    margin-top: 16px;
}
.note-drawer-panel-list-divider-bottom {
    margin-bottom: 16px;
}

@keyframes show-confirmation-ripple {
    from {
        transform: translate3d(300px, -300px, 0) scale3d(0, 0, 1);
        opacity: 0.35;
    }

    40% {
        opacity: 0.35;
    }

    50% {
        transform: translate3d(300px, -300px, 0) scale3d(2, 2, 1);
    }

    to {
        opacity: 0;
        transform: translate3d(300px, -300px, 0) scale3d(2, 2, 1);
    }
}

.note-drawer-section-edited-badge {
    border-radius: 50%;
    width: 24px;
    height: 24px;
    position: absolute;
    top: 50%;
    right: 14px;
    background: #00c853;
    color: #fff;
    text-align: center;
    line-height: 24px;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.5s ease-in;
    transform: translateY(-12px);
}
.note-drawer-section-edit-confirmed .note-drawer-section-edited-badge {
    transition: opacity 0.2s ease-in;
    opacity: 1;
}
.note-drawer-section-edited-badge i.material-icons {
    line-height: 24px;
}
.note-drawer-section-ripple {
    position: absolute;
    /*display: none;*/
    width: 600px;
    height: 600px;
    background: #81c784;
    border-radius: 50%;
    right: 22px;
    top: 50%;
    pointer-events: none;
    opacity: 0.35;
    transform: translate3d(300px, -300px, 0) scale3d(0, 0, 1);
    transform-origin: 50% 50%;
}
.note-drawer-section-edit-confirmed .note-drawer-section-ripple {
    /*transition: transform 0.4s ease-in;*/
    /*transform: translate3d(300px, -300px, 0) scale3d(1, 1, 1);*/
    animation: 0.5s show-confirmation-ripple ease-in both;
}
.note-drawer-button-content-wrapper {
    display: flex;
    vertical-align: middle;
    align-items: center;
    position: relative;
    width: 100%;
}
.note-drawer-button-content-wrapper > i.material-icons:first-child {
    text-align: center;
}
.note-drawer-button-content-wrapper .note-drawer-section-edited-badge {
    right: 0;
}
.note-drawer-status-button.in-progress .note-drawer-section-ripple {
    background: #e57373;
}
.note-drawer-status-button.pending .note-drawer-section-ripple {
    background: #ffd54f;
}

.note-drawer-recipients-panel {
    min-width: 0 !important;
    width: 522px;
    margin-left: 31px;
}

/* Report Recipients Section */

.recipients-property-section {
    background: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    min-height: 42px;
    width: 188px;
    margin: 8px 30px;
    color: rgba(0, 0, 0, 0.72);
    font-family: 'Work Sans', sans-serif;
    font-size: 15px;
    letter-spacing: 0.47px;
    line-height: 16px;
    position: relative;
    overflow: hidden;
}
.recipients-property-section-hoverable:hover {
    background: rgba(255, 255, 255, 0.72);
    cursor: pointer;
}
@media (max-width: 720px) {
    .recipients-property-section {
        margin: 8px 16px;
    }
}

.recipients-property-section > .material-icons {
    color: rgba(0, 0, 0, 0.54);
}

.recipients-property-section > span > .material-icons:first-child,
.recipients-property-section > .material-icons:first-child {
    flex: 0 0 auto;
    text-align: center;
    width: 44px;
}

.recipients-property-section:last-child {
    margin-bottom: 0;
}

.md-button.recipients-property-section {
    text-align: left;
    text-transform: none;
}
.md-button.recipients-property-section:hover,
.md-button.recipients-property-section.md-focused {
    background: rgba(255, 255, 255, 1);
}

.md-button.recipients-property-section.recipients-status-button {
    /*border-left: 6px solid;*/
    padding-left: 0;
}

.recipients-labelled-item {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.recipients-labelled-item .recipients-label {
    font-family: 'Work Sans', sans-serif;
    font-size: 12px;
    color: rgba(35, 47, 52, 0.7);
    letter-spacing: 0.46px;
}

.recipients-labelled-item .recipients-item {
    font-family: 'Work Sans', sans-serif;
    font-size: 15px;
    color: #232f34;
    letter-spacing: 0.57px;
}

.recipients-panel .md-button.md-primary {
    background-color: rgba(233, 90, 13, 1);
}

.md-button.md-outlined {
    color: var(--primary-color) !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid var(--primary-color) !important;
}
.md-button.md-button-small {
    min-height: 19px;
    line-height: 19px;
    font-weight: 200;
    font-size: 12px;
}
.md-button.md-outlined:hover {
    color: var(--primary-font-color) !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}
.md-button.md-outlined:disabled {
    background-color: #ccc !important;
    color: #fff !important;
    cursor: not-allowed !important;
}

.md-button.md-outlined.md-warn {
    color: darkred !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid darkred !important;
}
.md-button.md-outlined.md-warn:hover {
    color: whitesmoke !important;
    background-color: darkred !important;
    border-color: darkred !important;
}

.recipients-panel .md-button.md-primary.md-raised:hover,
.recipients-panel .md-button.md-primary.md-raised.md-focused {
    background-color: #bf360c;
}
.recipients-panel .md-button.md-primary.md-raised[disabled] {
    background-color: rgba(233, 90, 13, 0.2);
}

.recipients-user-avatar,
.recipients-group-avatar {
    border-radius: 50%;
    display: inline-block;
    background-size: cover;
    height: 32px;
    width: 32px;
}
.recipients-group-avatar {
    background: #455a64;
    color: #eceff1;
    line-height: 32px;
    vertical-align: middle;
    text-align: center;
}
.recipients-user-avatar-default {
    background-color: rgba(22, 50, 71, 0.2);
    background-size: 18px 18px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-image: url('/vendor/img/user_picture_default.png');
}

.recipients-panel .md-button.recipients-panel-post {
    margin: 12px 12px 12px 44px;
}
.recipients-panel {
    background: #fefefe;
    min-height: 32px;
    max-width: 596px;
}
@media (max-width: 720px) {
    .recipients-panel {
        max-width: calc(100vw - 32px);
    }
}
@media (max-width: 550px) {
    .recipients-panel {
        max-width: calc(100vw - 32px);
    }
}
p.recipients-section-label {
    flex: 0 0 auto;
    margin: 0 4px 0 0;
}
@media (max-width: 550px) {
    p.recipients-section-label {
        flex: 0 1 auto;
    }
}
.recipients-faded-list {
    flex: 1 1 auto;
    overflow: hidden;
    display: flex;
    padding-right: 16px;
    position: relative;
}
.recipients-faded-list-with-add {
    flex: 0 1 auto;
}
.recipients-list-fade {
    position: absolute;
    right: -1px;
    top: 0;
    height: 100%;
    width: 20px;
    background: linear-gradient(to right, rgba(244, 245, 247, 0), rgba(244, 245, 247, 1));
}
.recipients-property-section-hoverable:hover .recipients-list-fade {
    background: linear-gradient(to right, rgba(249, 250, 251, 0), rgba(249, 250, 251, 1));
}
.recipients-property-section .md-button {
    flex: 0 0 auto;
}
.recipients-add-flexible-position {
    flex: 1 0 auto;
}
.md-button.recipients-add {
    background: rgba(22, 50, 71, 0.12);
    border-radius: 50%;
    background-clip: padding-box;
    overflow: hidden;
    height: 30px;
    width: 30px;
    padding: 3px;
    min-height: 30px;
    margin: 0 0 0 16px;
    color: #0288d1;
}
.md-button.recipients-add:not([disabled]).md-icon-button:hover {
    background: rgba(22, 50, 71, 0.2);
}
.md-button.recipients-add .md-ripple-container {
    border-radius: 50%;
    background-clip: padding-box;
    overflow: hidden;
}
.recipients-property-add-wrapper .md-button,
.recipients-panel-add-button {
    color: #0288d1;
    margin-left: 0;
}
.recipients-property-add-wrapper .md-button {
    margin: 2px 0;
}
.recipients-sharing {
    display: flex;
}
.recipients-sharing-avatar {
    display: inline-block;
    margin-left: 4px;
}
.md-button.recipients-share-button {
    background: #0288d1;
    color: #fff;
    margin-left: 0;
    margin-right: 0;
}
.recipients-share-button-wrapper {
    padding-left: 12px;
}
.md-button.recipients-share-button.md-raised:not([disabled]):hover {
    background-color: #01579b;
}
.recipients-chip {
    display: flex;
    background: rgba(22, 50, 71, 0.06);
    height: 30px;
    border-radius: 15px;
    font-family: 'Work Sans', sans-serif;
    font-size: 15px;
    color: rgba(0, 0, 0, 0.87);
    letter-spacing: 0.44px;
    line-height: 30px;
    padding: 0 12px;
    margin-left: 8px;
    position: relative;
    overflow: hidden;
    flex: 0 0 auto;
}
.recipients-chip-labelled {
    display: block;
    height: 48px;
    margin: 6px 0 6px 4px;
}
.recipients-chip.recipients-chip-with-avatar {
    padding: 0 12px 0 0;
}
.recipients-chip .recipients-user-avatar,
.recipients-chip .recipients-group-avatar {
    border-radius: 13px;
    height: 26px;
    width: 26px;
    line-height: 26px;
    vertical-align: top;
    margin: 2px 6px 0 3px;
}
.recipients-chip .recipients-user-avatar img {
    max-width: 26px;
    max-height: 26px;
}
.recipients-chip-label {
    font-family: 'Work Sans', sans-serif;
    font-size: 12.68px;
    color: rgba(0, 0, 0, 0.6);
    letter-spacing: 0.4px;
    text-align: left;
    line-height: 16px;
    display: block;
    margin-top: 7px;
}
.recipients-panel-chip-list {
    padding-left: 36px;
    padding-right: 16px;
}
.recipients-panel-chip-list {
    display: flex;
    flex-wrap: wrap;
    max-height: 70vh;
    overflow-y: scroll;
}
.recipients-panel-chip-list .recipients-chip {
    margin-bottom: 8px;
}
.recipients-panel-list .recipients-user-avatar,
.recipients-panel-list .recipients-group-avatar {
    height: 42px;
    width: 42px;
    line-height: 42px;
    margin-right: 12px;
}
.recipients-panel-list .recipients-user-avatar img {
    max-width: 42px;
    max-height: 42px;
}
.recipients-panel-list-name {
    font-family: 'Work Sans', sans-serif;
    font-size: 16.91px;
    color: rgba(0, 0, 0, 0.87);
    letter-spacing: 0.15px;
    line-height: 24px;
}
.recipients-panel-list .md-list-item-inner > md-checkbox {
    margin-right: 4px;
}
.recipients-panel-list {
    height: 294px;
}

.recipients-panel md-input-container:not(.md-input-invalid).md-input-focused label {
    color: #e95a0d;
}

.recipients-panel md-input-container:not(.md-input-invalid).md-input-focused .md-input {
    border-bottom: #e95a0d 2px solid !important;
}

.reminders-wrapper {
    min-width: 300px;
}
.reminders-buttons-wrapper {
    display: flex;
    justify-content: center;
    align-items: middle;
}

/*
 *
 * Custom Statuses Drawer
*/
p.custom-statuses-drawer-help {
    display: flex;
    align-items: center;
    background: #eeeeee;
    padding: 10px 30px;
    font-family: 'Work Sans', sans-serif;
    font-size: 14.79px;
    color: rgba(0, 0, 0, 0.6);
    letter-spacing: 0.25px;
    text-align: left;
    line-height: 20px;
    margin-top: 15px;
    margin-bottom: 15px;
}
div.custom-statuses-drawer-help {
    background: #eeeeee;
    padding: 20px;
    font-family: 'Work Sans', sans-serif;
    font-size: 14.79px;
    color: rgba(0, 0, 0, 0.6);
    letter-spacing: 0.25px;
    text-align: left;
    line-height: 20px;
    margin-top: 15px;
    margin-bottom: 15px;
}

.custom-statuses-drawer .custom-status-item:hover {
    background: rgba(255, 255, 255, 0.72);
    cursor: pointer;
}

.custom-statuses-drawer .custom-status-item {
    padding: 0 14px;
    position: relative;
    overflow: visible;
    background: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    min-height: 42px;
    margin: 8px 30px;
    color: rgba(0, 0, 0, 0.72);
    font-family: 'Work Sans', sans-serif;
    font-size: 15px;
    letter-spacing: 0.47px;
    line-height: 16px;
}

.custom-statuses-drawer .dndDraggingSource {
    display: none !important;
}

.custom-statuses-drawer .dndPlaceholder {
    min-height: 42px;
    height: 42px !important;
    margin: 8px 30px;
    border: 1px dashed rgba(0, 0, 0, 0.3);
    padding: 0;
    border-radius: 2px;
}

.note-filter-custom-status-container .md-text {
    width: 100%;
}
md-select-menu[multiple] md-option.note-filter-custom-status-container.md-checkbox-enabled .md-icon {
    border-color: inherit;
    background-color: inherit;
}
md-select-menu[multiple] md-option.note-filter-custom-status-container .md-container {
    border-color: inherit;
    background-color: inherit;
}
md-select-menu[multiple] md-option.note-filter-custom-status-container.md-checkbox-enabled .md-icon:after {
    border-color: inherit;
}

/* plan caption panel style */
.plan-caption-panel-item-wrapper {
    width: auto;
    height: auto;
    display: inline-block;
    margin: 3px;
    border-radius: 3px;
    position: relative;
    background-color: white;
}

.plan-caption-panel-item-color {
    width: 30px;
    display: inline-block;
    background: white;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 3px 0px 0px 3px;
}

.plan-caption-panel-item-text {
    margin-left: 29px;
    color: rgb(60, 60, 60);
    margin-left: 29px;
    display: block;
    color: rgb(60, 60, 60);
    text-overflow: ellipsis;
    width: -webkit-fill-available;
    overflow: hidden;
}
/* end */

.no-focus-trap {
    width: 0;
    height: 0;
}

/** Custom status management panel styles **/
.custom-statuses-drawer .move-icon {
    flex: 0 0 auto;
    text-align: center;
    color: rgba(0, 0, 0, 0.54);
    margin-right: 8px;
    cursor: pointer;
}

.custom-statuses-drawer .show-assigness-icon {
}

.custom-status-color {
    border-radius: 50%;
    min-height: 22px;
    min-width: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom-status-name-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    min-width: 120px;
    max-width: 120px;
    margin: 0 0 0 8px;
    min-height: 42px;
}

.custom-status-name-wrapper p,
.custom-status-name-wrapper input {
    position: absolute;
}

.custom-status-name-wrapper p {
    flex: 0 0 auto;
    margin: 0 4px 0 0;
    width: 100%;
    word-break: break-word;
}

.custom-statuses-drawer input {
    width: 100%;
    color: rgba(0, 0, 0, 0.72);
    font-family: 'Work Sans', sans-serif;
    font-size: 15px;
    letter-spacing: 0.47px;
    padding: 0;
    border: none;
    padding-bottom: 2px;
    background: transparent;
    top: 11px;
}

.custom-statuses-drawer input.input-error {
    animation: shake 0.52s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    border-bottom: solid 2px #d9534f !important;
}

.custom-statuses-drawer .edit-icon {
    font-size: 16px;
    position: absolute;
    right: 0;
}
.custom-status-item .show-authorizations-button {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.custom-statuses-authorizations-panel {
    position: absolute;
    top: -10px;
    left: -15px;
    width: 100%;
    z-index: 2000;
}

.custom-statuses-add-authorizations-panel {
    position: absolute;
    top: 0;
    right: 10px;
    width: 360px;
    z-index: 2001;
}

.custom-status-item md-progress-circular svg path {
    stroke: orangered;
}

.custom-status-item .custom-statuses-add-authorizations-button {
    background: rgba(22, 50, 71, 0.12);
    border-radius: 50%;
    background-clip: padding-box;
    overflow: hidden;
    height: 30px;
    width: 30px;
    padding: 3px;
    min-height: 30px;
    margin: 0 0 0 16px;
    color: #0288d1;
    opacity: 0;
    display: none;
    transition: opacity 0.2s linear;
}

.custom-status-item:hover .custom-statuses-add-authorizations-button {
    display: inline-block;
    opacity: 1;
}
.custom-status-item:hover .custom-statuses-add-authorizations-button:hover {
    background: rgba(22, 50, 71, 0.1);
    display: inline-block;
    opacity: 1;
}

.fade-animation.ng-enter,
.fade-animation.ng-leave {
    -webkit-transition: opacity cubic-bezier(0, 0, 0.2, 1) 0.3s;
    -moz-transition: opacity cubic-bezier(0, 0, 0.2, 1) 0.3s;
    -ms-transition: opacity cubic-bezier(0, 0, 0.2, 1) 0.3s;
    -o-transition: opacity cubic-bezier(0, 0, 0.2, 1) 0.3s;
    transition: opacity cubic-bezier(0, 0, 0.2, 1) 0.3s;
}
.fade-animation.ng-enter,
.fade-animation.ng-leave.ng-leave-active {
    opacity: 0;
}
.fade-animation.ng-leave,
.fade-animation.ng-enter.ng-enter-active {
    opacity: 1;
}

@keyframes shake {
    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

.custom-statuses-color-picker:before {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #fefefe;
    top: -8px;
    left: 41px;
}
.custom-statuses-color-picker {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 250px;
    position: absolute;
    top: 41px;
    left: 2px;
    z-index: 3002;
    background: #fefefe;
    border-radius: 2px;
    padding: 12px;
}

.custom-statuses-color-picker.color-form-field-picker {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 250px;
    position: relative;
    top: 0;
    left: 0;
    z-index: 3002;
    background: #fefefe;
    border-radius: 2px;
    padding: 12px;
}

.color-picker-color-chip.color-form-field-chip {
    height: 20px;
    width: 20px;
    margin: 5px;
    border-radius: 10px;
    display: inline-block;
}
.color-picker-color-chip {
    height: 50px;
    width: 50px;
    margin: 5px;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.color-picker-color-chip:hover {
    opacity: 0.9;
    box-shadow:
        0 2px 4px -1px rgba(0, 0, 0, 0.2),
        0 4px 5px 0 rgba(0, 0, 0, 0.14),
        0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
.color-picker-color-chip > i {
    color: #fefefe;
}

.status-delete-button {
    position: absolute;
    right: -14px;
    font-size: 10px;
    display: flex;
    visibility: hidden;
}

.custom-status-item:hover .status-delete-button {
    visibility: visible;
    opacity: 1;
    color: grey;
}
#drawer-projects.status-management-drawer,
#drawer-projects.sharing-management-drawer,
#project-settings-drawer.status-management-drawer {
    background-color: #eceff1;
}
#drawer-projects.md-sidenav-left.sharing-management-drawer {
    width: 850px;
    transition: width 0.5s ease-in-out;
    -webkit-transition: width 0.5s ease-in-out;
    -moz-transition: width 0.5s ease-in-out;
    -o-transition: width 0.5s ease-in-out;
    -ms-transition: width 0.5s ease-in-out;
}
#drawer-projects.md-sidenav-left.status-management-drawer {
    width: 750px;
    transition: width 0.5s ease-in-out;
    -webkit-transition: width 0.5s ease-in-out;
    -moz-transition: width 0.5s ease-in-out;
    -o-transition: width 0.5s ease-in-out;
    -ms-transition: width 0.5s ease-in-out;
}

md-backdrop.md-select-backdrop {
    z-index: 2002;
}

@media (min-width: 450px) {
    .compact-md-select-menu-container {
        min-width: 300px !important;
        width: 300px !important;
        margin: auto;
    }
}

.note-status-item-disabled {
    opacity: 0.35 !important;
}

/**
 * New report design
 */

.report-wrapper {
}

.report-wrapper h3,
.report-wrapper h4,
.report-wrapper h5 {
    color: #1f1f1f;
}

.report-sections-margin {
    margin-bottom: 30px;
}

.chevron-back {
    height: 25px;
    width: 25px;
    opacity: 0.65;
    background-color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
}

.report-header {
    display: flex;
}

.report-header > div {
    margin-right: 20px;
}

.report-header .seperator {
    border-left: 1px solid #000000;
    opacity: 0.25;
    height: 25px;
}

.report-header .selected-tasks {
    display: flex;
    align-items: center;
}

.report-header .selected-tasks > i {
    color: #70b62c;
}
.report-header .selected-tasks > span {
    font-weight: 600;
}

.reports-carousel {
    display: flex;
    align-items: center;
    height: 283px;
}

.report-card {
    display: flex;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    margin-right: 20px;
    box-sizing: border-box;
    height: 220px;
    min-width: 220px;
    max-width: 220px;
    border: 1px solid #e4e3e2;
    border-radius: 5px;
    background-color: #ffffff;
    padding: 10px;
    position: relative;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.report-card.report-card-last {
    margin-right: 66px;
}
.report-card.report-card-last:after {
    content: '';
    position: absolute;
    border-left: 1px solid black;
    right: -33px;
    height: 90%;
}
.report-card .report-list-subtitle {
    position: absolute;
    margin-top: -42px;
    margin-left: 100px;
    width: 320px;
}

.container-date-field label {
    width: 86% !important;
}

.note-wrapper {
    margin-left: 5px !important;
    margin-bottom: 5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.note-small-date {
    text-align: right;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 4px 0 0 4px;
    padding: 3px;
}
.report-card-fader {
    position: absolute;
    top: 0;
    right: -30px;
    height: 225px;
    width: 150px;
    background: linear-gradient(to right, rgba(244, 245, 247, 0), rgba(244, 245, 247, 1));
    z-index: 1000;
    pointer-events: none;
}

.report-card.selected {
    border: 1px solid #1deaa4;
    background-color: rgba(29, 234, 164, 0.1);
}

.carousel-arrow-right {
    position: absolute;
    right: 20px;
    height: 20px;
    z-index: 1199;
    top: 42%;
    cursor: pointer;
}
#slider {
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-behavior: smooth;
}
#slider::-webkit-scrollbar {
    display: none;
}
#slider {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.carousel-arrow-left {
    position: absolute;
    left: 20px;
    height: 20px;
    z-index: 1199;
    top: 42%;
    cursor: pointer;
}

.report-font-bold {
    font-weight: 600;
}
.md-button.md-icon-button[disabled] {
    opacity: 0.3;
}
.report-border-bottom {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.report-card .delete-user-template {
    position: absolute;
    top: 7px;
    right: 5px;
    visibility: hidden;
    cursor: pointer;
}

.report-card:hover .delete-user-template {
    visibility: visible;
}

.delete-user-template i {
    opacity: 1;
}

.report-name {
    text-align: center;
    height: 50px;
}

.report-card .report-description {
    text-align: center;
    height: 50px;
    color: #414142;
}

.report-image {
    height: 80px;
}

.report-card md-radio-button {
}

.report-card md-radio-button .md-off,
.report-card md-radio-button .md-on {
    width: 16px;
    height: 16px;
}

.report-configuration-wrapper {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
}

.report-configuration,
.report-settings {
    border-radius: 5px;
    background-color: #ffffff;
    box-shadow:
        0 1px 2px 0 rgba(0, 0, 0, 0.2),
        0 1px 5px 0 rgba(0, 0, 0, 0.13);
}

.report-configuration {
    width: 70%;
}

.report-configuration-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.report-configuration-header h3 {
    margin: 20px 0 20px 20px;
}

.report-configuration-section {
    padding: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.report-section-heading {
    font-size: 16px;
}

.page-header-config button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 82px;
    width: 82px;
    border: 1px dashed rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.02);
}

.page-header-section {
    display: flex;
    flex-direction: column;
}

.page-header-config .center-text {
    padding-left: 20px;
    padding-right: 20px;
}

.page-header-section button i {
    font-size: 40px;
    opacity: 0.4;
}

.page-header-section > span {
    display: block;
    color: #414142;
    font-size: 10px;
    letter-spacing: 0.77px;
    font-weight: bold;
    line-height: 12px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.page-header-section md-input-container {
    margin: 0;
    padding: 0;
}

/**
 * Custom cover
 */

.report-custom-cover md-input-container {
    margin: 0;
    padding: 0;
    width: 213px;
}

.report-configuration-section .add-item-button {
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
}
.report-configuration-section .add-item-button > span {
    text-decoration: underline;
}

/**
 */
.report-options {
    display: flex;
}
.report-options > .page-header-section > span {
    display: block;
    color: #414142;
    font-size: 12px;
    letter-spacing: 0.77px;
    font-weight: bold;
    line-height: 12px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

/**
 * Report settings
 */

.report-settings::before {
    content: '';
    position: absolute;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: 12px solid #1deaa4;
    top: 16px;
    left: -12px;
}

.report-settings {
    top: 0;
    position: sticky;
    position: -webkit-sticky;
    margin-left: 18px;
    border-left: 2px solid #1deaa4;
    width: 450px;
}

.report-format-card {
    display: flex;
    cursor: pointer;
    align-items: center;
    box-sizing: border-box;
    height: 96px;
    border-radius: 5px;
    border: 1px solid #e4e3e2;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}
.report-format-card.selected {
    border: 1px solid #1deaa4;
    background-color: rgba(29, 234, 164, 0.1);
}
.report-format-card.disabled {
    cursor: default;
}

.report-settings md-button {
    height: 36px;
    width: 325px;
    border-radius: 3px;
    box-shadow:
        0 2px 10px 0 rgba(0, 0, 0, 0.16),
        0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

.tns-liveregion.tns-visually-hidden {
    display: none;
}

.custom-report-info {
    height: 40px;
    border: 1px solid #47b1ff;
    background-color: rgba(71, 177, 255, 0.2);
    display: flex;
    width: 100%;
    position: absolute;
    bottom: -60px;
    justify-content: space-between;
    align-items: center;
}
.custom-report-info i {
    vertical-align: center;
}

.custom-report-info i {
    margin-left: 15px;
    font-size: 22px;
    color: #2f80bc;
}
.custom-report-info a {
    margin-right: 15px;
    color: #2f80bc;
}
.custom-report-info span {
    margin-left: 7px;
}

.report-header-logo {
    width: 100px;
    height: 100px;
    background-size: cover;
    background-position: center;
    margin: 0 auto;
}

.breadcrumb .breadcrumb-active {
    color: white !important;
    opacity: 0.84 !important;
}

.breadcrumb .breadcrumb-inactive {
    color: white !important;
    opacity: 0.53 !important;
}

.project-template-banner-overlay {
    font-family: 'Work Sans', sans-serif;
    /* position: fixed; */
    /* top: 57px; */
    width: calc(100%);
    z-index: 100;
    background-color: var(--primary-color);
}
.project-template-banner-overlay .project-template-banner-title {
    text-align: center;
    vertical-align: middle;
    margin-left: 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-font-color);
}
.resignin-card {
    background: #eee;
    border-radius: 4px;
    margin-bottom: 10px;
    -webkit-box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.2);
    padding: 20px;
}
.resignin-card-wrapper img {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 75ch;
    margin-bottom: 45px;
}

#drawer-projects {
    z-index: 10000;
    width: 500px;
}
.project-drawer-toolbar {
    box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 3px 14px 0 rgba(0, 0, 0, 0.2);
}
.report-card.empty-state .report-font-bold {
    width: 150px;
}
.report-card.empty-state .report-font-bold,
.report-card.empty-state .report-font-bold,
.report-card.empty-state .report-description,
.project-drawer-wrapper md-list md-list-item.emtpy-state p,
.form-export-template-wrapper md-list md-list-item.emtpy-state p {
    width: 90%;
    animation-duration: 10s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeholderRipple;
    animation-timing-function: linear;
    background: fff;
    background: linear-gradient(to right, #eeeeeeb4 8%, #ddddddbd 18%, #eeeeee3f 33%);
}
div.note-placeholder span.title {
    animation-duration: 5s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeholderRipple;
    animation-timing-function: linear;
    background: linear-gradient(90deg, var(--secondary-color), #cacaca70, #eaeaeaa6, #cacaca70, var(--secondary-color));
}
div.note-placeholder span.subtitle {
    animation-duration: 5s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeholderRipple;
    animation-timing-function: linear;
    background: linear-gradient(90deg, #cacaca70, #eaeaeaa6, #cacaca70);
}
.project-drawer-wrapper md-list md-list-item button {
    padding-top: 8px;
    padding-bottom: 8px;
}
.project-drawer-wrapper md-list md-list-item.emtpy-state h3 {
    width: 60%;
    animation-duration: 10s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeholderRipple;
    animation-timing-function: linear;
    background: fff;
    background: linear-gradient(to right, #eeeeeeb4 8%, #ddddddbd 18%, #eeeeee3f 33%);
}
@keyframes placeholderRipple {
    0% {
        background-position: 0px 0;
    }
    100% {
        background-position: 100em 0;
    }
}
#drawer-projects md-list md-list-item div.md-button {
    padding-top: 8px;
    padding-bottom: 8px;
}
.project-drawer-wrapper md-backdrop {
    z-index: 1001;
}
#projects-menu-open-button {
    display: flex;
    align-items: center;
    height: 100%;
    font-size: 20px;
    cursor: pointer;
    color: white;
}
#projects-menu-open-button img {
    border-radius: 5px;
    height: 35px;
    width: 35px;
    margin-left: 4px;
}

#projects-menu-open-button .menu-title {
    text-transform: capitalize;
    font-family: 'Work Sans', sans-serif;
    cursor: pointer;
    color: white;
}
#projects-menu-open-button:hover {
    background: rgba(0, 0, 0, 0.5);
}
.project-drawer-content {
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
}
.project-drawer-transition.ng-enter {
    transition: opacity 0.9s;
}

.project-drawer-transition.ng-enter,
.project-drawer-transition.ng-leave.ng-leave-active {
    opacity: 0;
}

.project-drawer-transition.ng-leave,
.project-drawer-transition.ng-enter.ng-enter-active {
    opacity: 1;
}

.report-button-animation.ng-enter {
    transition: opacity 0.5s;
}
.report-button-animation.ng-enter,
.report-button-animation.ng-leave.ng-leave-active {
    opacity: 0;
}

.report-button-animation.ng-leave,
.report-button-animation.ng-enter.ng-enter-active {
    opacity: 1;
}
.select-header {
    box-shadow:
        0 1px 0 0 rgba(0, 0, 0, 0.1),
        0 0 0 0 rgba(0, 0, 0, 0.14),
        0 0 0 0 rgba(0, 0, 0, 0.12);
    padding-left: 16px;
    height: 48px;
    cursor: pointer;
    position: relative;
    display: flex;
    width: auto;
}
.select-header-search-bar {
    border: none !important;
    outline: none !important;
    height: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
md-datepicker {
    display: inline-block;
    padding: 0;
    width: 100%;
}

.md-datepicker-button {
    margin-left: -12px;
}
.md-datepicker-input-container {
    display: flex;
}
.md-datepicker-input {
    max-width: 100%;
    min-width: 100%;
}

.md-datepicker-triangle-button {
    right: 8px;
}
.empty-state-element-list {
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 30px;
    border: 1px #333;
    border-radius: 4px;
    -webkit-box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.2);
    width: 70vw;
}
.project-drawer-wrapper {
    height: 100vh;
}
md-checkbox.semi-checked:not(.md-checked) .md-icon::after {
    box-sizing: border-box;
    -webkit-transform: 90deg;
    transform: rotate(90deg);
    position: absolute;
    left: 4.66667px;
    top: 0.22222px;
    display: table;
    width: 6.66667px;
    height: 13.33333px;
    border-width: 2px;
    border-top-width: 2px;
    border-bottom-width: 2px;
    border-left-width: 2px;
    border-style: solid;
    border-top-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    content: '';
    border-left: 0;
    border-top: 0;
    border-bottom: 0;
}
md-checkbox.semi-checked:not(.md-checked) .md-icon {
    background-color: #333;
    color: white;
}
.form-picture-static-image {
    background-color: #ccc;
    border-radius: 4px;
    height: 100%;
    width: 100%;
    object-fit: cover;
    fill: black;
}
.form-picture-upload-box {
    width: 150px;
    height: 150px;
    background-color: #ccc;
    border-radius: 4px;
    border-width: 4px;
    border-style: dashed;
    border-color: #aaa;
}
.form-picture-upload-box i {
    font-size: 38px;
    color: #aaa;
}
.form-picture-upload-box-small {
    width: 100px;
    height: 100px;
}
.form-picture-upload-box-small i {
    font-size: 28px;
}
.form-multiple-picture-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}
.form-multiple-picture-item {
    position: relative;
    width: 100px;
}
.note-menu-button button {
    text-transform: capitalize;
}
.note-menu-button i {
    vertical-align: middle;
}
.note-menu-button .note-menu-title {
    color: black;
    opacity: 0.54;
    line-height: 22px;
}
.note-menu-button > button {
    margin-left: 0;
    margin-right: 0;
}
.note-menu-button .note-menu-value {
    color: black;
    line-height: 22px;
}
.note-menu-button .note-menu-container {
    margin-left: 2px;
    margin-right: 2px;
}
.note-menu-button svg {
    height: 18px;
    width: 18px;
    vertical-align: middle;
}

.note-menu-button svg,
.note-menu-button img,
.svg-button-icon img,
.svg-button-icon svg {
    height: 18px;
    width: 18px;
    vertical-align: middle;
}

.note-menu-button .caret-down {
    color: black;
    opacity: 0.54;
}
@media (max-width: 959px) {
    .bz-list-toolbar .note-menu-button {
        display: none !important;
    }
}
.note-overflow-section-header {
    padding: 8px 16px 4px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.54);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.note-overflow-menu-content .svg-button-icon img {
    height: 18px;
    width: 18px;
    vertical-align: middle;
}
.report-status-drawer-chip {
    display: flex;
    text-align: center;
    height: 20px;
    border-radius: 5px;
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    letter-spacing: 0.44px;
    line-height: 30px;
    padding: 0 12px;
    margin-left: 8px;
    overflow: hidden;
    flex: 0 0 auto;
    shadow:
        1px 1px 2px black,
        0 0 1em white;
}

.report-status-drawer-chip p {
    width: 100%;
    text-align: center;
    padding-top: 2px;
}
.report-status-color-chip-0 {
    color: white;
    background-color: #7730fd;
    text-shadow:
        1px 1px 2px black,
        0 0 1em white;
    background: linear-gradient(to right, #7730fd, #9d6aff);
    background-size: 10000% 10000%;
    animation: gradient 2s ease-in-out infinite;
}
.report-status-color-chip-1 {
    color: white;
    background-color: #7730fd;
    text-shadow:
        1px 1px 2px black,
        0 0 1em white;
    background: linear-gradient(to right, #7730fd, #9d6aff);
    background-size: 10000% 10000%;
    animation: gradient 2s ease-in-out infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
.report-status-color-chip-2 {
    color: white;
    background-color: green;
    text-shadow:
        1px 1px 2px black,
        0 0 1em white;
}
.report-status-color-chip-3 {
    color: black;
}
.report-failed-icon-warning {
    font-size: 20px;
    color: coral;
}
.report-failed-icon-restart {
    padding-left: 8px;
    font-size: 20px;
    color: white;
    float: left;
    padding-top: 8px;
}
.report-failed-message {
    float: left;
    padding-top: 3px;
}
.gradient-background {
    background: var(--secondary-color);
    background: -moz-linear-gradient(-45deg, var(--secondary-color) 0%, var(--primary-color) 100%);
    background: -webkit-gradient(
        linear,
        left top,
        right bottom,
        color-stop(0%, var(--secondary-color)),
        color-stop(100%, var(--primary-color))
    );
    background: -webkit-linear-gradient(-45deg, var(--secondary-color) 0%, var(--primary-color) 100%);
    background: -o-linear-gradient(-45deg, var(--secondary-color) 0%, var(--primary-color) 100%);
    background: -ms-linear-gradient(-45deg, var(--secondary-color) 0%, var(--primary-color) 100%);
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
}
md-input-container .hint {
    font-size: 12px;
    line-height: 14px;
    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
    color: rgba(0, 0, 0, 0.54);
}
md-input-container.report-filename-input .hint {
    position: absolute;
    left: 2px;
    right: auto;
    bottom: 7px;
}

md-input-container.report-filename-input .hint.error {
    color: rgba(255, 0, 0, 0.54);
}
.md-option-wrapper div.md-text {
    width: 100%;
}
.iti.iti--allow-dropdown {
    width: 100%;
}
md-select-value .md-text .note-folder-back-button {
    display: none;
}

.form-field-preview-transition.ng-enter {
    -webkit-transition: opacity 200ms ease-in-out;
    -moz-transition: opacity 200ms ease-in-out;
    -o-transition: opacity 200ms ease-in-out;
    -ms-transition: opacity 200ms ease-in-out;
    transition: opacity 200ms ease-in-out;
}

.form-field-preview-transition.ng-enter,
.form-field-preview-transition.ng-leave.ng-leave-active {
    opacity: 0;
}

.form-field-preview-transition.ng-leave,
.form-field-preview-transition.ng-enter.ng-enter-active {
    opacity: 1;
}
md-radio-button[disabled] {
    opacity: 0.7;
}
.md-virtual-repeat-container.md-autocomplete-suggestions-container {
    z-index: 999999999;
}
md-toolbar.top-shadow-toolbar {
    box-shadow: 0px -4px 13px 1px rgba(0, 0, 0, 0.45);
    -webkit-box-shadow: 0px -4px 13px 1px rgba(0, 0, 0, 0.45);
    -moz-box-shadow: 0px -4px 13px 1px rgba(0, 0, 0, 0.45);
}
.form-template-title-label {
    color: black;
    opacity: 0.72;
    margin-top: 15px;
}
.form-template-subtitle-label {
    color: black;
    opacity: 0.54;
    margin-top: 10px;
}
/* Type selector ("Standard" / "Custom Task fields template") shown when
 * creating a new form template (see vm.addingFormTemplate in forms.tpl.html).
 * Horizontal radio group, kept tight so it doesn't dominate the small drawer. */
.form-template-type-radio-group {
    margin: 0 0 4px 0;
}
.form-template-type-radio-group md-radio-button {
    margin: 0 16px 0 0;
    font-size: 13px;
}
/* Segmented control acting as tabs at the top of the form-template rail
 * (see <div class="form-template-tab-bar"> in forms.tpl.html). Visually
 * mimics Material tabs: equal-width buttons, primary-colored underline on
 * the active one, count badge on the right.
 * Not using md-tabs because the rail is narrow and md-tabs requires content
 * inside each tab, which would duplicate the 60-line list-item markup. */
.form-template-tab-bar {
    display: flex;
    margin: 12px 0 4px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.form-template-tab {
    flex: 1 1 0;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: rgba(0, 0, 0, 0.54);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    padding: 10px 8px;
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* The label can be longer than the rail in some languages — let the
     * flex item shrink and ellipsis-clip rather than wrap or push the
     * count badge off-screen. */
    min-width: 0;
}
.form-template-tab > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.form-template-tab:hover {
    background: rgba(0, 0, 0, 0.03);
    color: rgba(0, 0, 0, 0.74);
}
.form-template-tab.form-template-tab-active {
    color: rgba(63, 81, 181, 1);
    border-bottom-color: rgba(63, 81, 181, 1);
}
.form-template-tab-count {
    display: inline-block;
    min-width: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.6);
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
    flex-shrink: 0;
}
.form-template-tab-active .form-template-tab-count {
    background: rgba(63, 81, 181, 0.14);
    color: rgba(63, 81, 181, 1);
}
.form-template-empty-tab {
    margin: 16px;
    color: rgba(0, 0, 0, 0.54);
}
/* Badge displayed next to a header template's title in the editor pane. */
.form-template-header-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    background: rgba(63, 81, 181, 0.12);
    color: rgba(63, 81, 181, 1);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    vertical-align: middle;
    line-height: 16px;
}
.forms-tab-subtitle {
    background-color: #33333321;
}
.ng-animate.no-animate {
    transition: 0s none;
    -webkit-transition: 0s none;
    animation: 0s none;
    -webkit-animation: 0s none;
}
#form-template-list .form-template:last-child {
    margin-bottom: 150px;
}
.vl {
    border-left: 1px solid #333;
    height: 18px;
    position: absolute;
    left: 50%;
    margin-left: 3px;
    margin-right: 5px;
    top: 12px;
}
md-toast .md-toast-content {
    color: #155724 !important;
    background-color: #d4edda !important;
    border-color: #c3e6cb !important;
}

md-toast.sharepoint-reconnect-toast .md-toast-content {
    color: #856404 !important;
    background-color: #fff3cd !important;
    border-color: #ffeeba !important;
}
.duplication-subheader-helper {
    line-height: 1.75em;
    font-size: 16px;
    color: #004085 !important;
    background-color: #cce5ff !important;
    border: 1px solid #00408533 !important;
    border-radius: 4px;
}

.subheader-warning {
    line-height: 1.75em;
    font-size: 16px;
    color: #856404 !important;
    background-color: #fff3cd !important;
    border: 1px solid #ffeeba !important;
    border-radius: 4px;
}
.dynamic-list {
    padding: 10px;
    margin-bottom: 5px;
}
.task-import-job.success {
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
}
.dynamic-list.failed,
.task-import-job.failed,
.form-export-template.failed {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
}
.dynamic-list.warning,
.task-import-job.warning,
.form-export-template.warning {
    border: 1px solid #ffeeba;
    border-radius: 4px;
    color: #856404;
    background-color: #fff3cd;
}

.dynamic-list.pending,
.task-import-job.pending,
.form-export-template.pending {
    color: #004085;
    background-color: #cce5ff;
    border: 1px solid #b8daff;
    border-radius: 4px;
}
pre.inline {
    display: inline;
    padding: 1px;
}
.jodit-status-bar {
    display: none;
}
ol.form-export-template-creation-dialog-breadcrumb {
    list-style: none;
    counter-reset: my-awesome-counter;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    min-height: initial !important;
}

ol.form-export-template-creation-dialog-breadcrumb li.step {
    counter-increment: my-awesome-counter;
    color: #ccc;
    cursor: pointer;
    font-size: 14px;
}
ol.form-export-template-creation-dialog-breadcrumb li.step.completed {
    color: var(--primary-color) !important;
}
ol.form-export-template-creation-dialog-breadcrumb li.step::before {
    content: counter(my-awesome-counter);
    color: white;
    background: #ccc;
    border-radius: 50%;
    padding: 4px 8px;
    font-weight: bold;
}

ol.form-export-template-creation-dialog-breadcrumb li.step.current::before {
    content: counter(my-awesome-counter);
    color: white;
    background: var(--primary-color) !important;
}

ol.form-export-template-creation-dialog-breadcrumb li.step.current {
    content: counter(my-awesome-counter);
    color: var(--primary-color) !important;
}

ol.form-export-template-creation-dialog-breadcrumb li.step.completed::before {
    content: '✓';
    color: white;
    background: var(--primary-color) !important;
}

.form-export-template-creation-dialog-breadcrumb {
    color: #333;
    font-size: 12px;
    height: 55px;
    text-align: center;
}
.form-export-template-creation-dialog-content {
    margin: 20px 26px;
    padding: 10px;
    height: 100%;
    overflow-y: scroll;
}

.form-export-template-creation-dialog-content.note-batch-import {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: 30px;
    margin: 0;
}
.form-export-template-creation-dialog-content .selector {
    border: 1px solid rgb(162, 162, 162);
    border-radius: 4px;
    padding: 10px;
    cursor: pointer;
    max-width: 272px;
    color: black;
    opacity: 0.54;
    min-height: 100px;
}

.form-export-template-creation-dialog-content .selector.primary {
    color: black;
}

.form-export-template-creation-dialog-content .selector.selected {
    background-color: #cce5ff;
    border: 1px solid #b8daff;
    color: black;
    opacity: 0.72;
}
.ripple {
    position: relative;
}
.ripple:active > .wave {
    animation: ripple 0.25s;
}
.wave {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, #5797ff 10%, #cce5ff 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 0 0;
    top: 0;
    left: 0;
    transform: scale(0);
    opacity: 0;
}
@keyframes ripple {
    0% {
        transform: scaleX(0);
    }
    50% {
        transform: scaleX(1);
        opacity: 0.3;
    }
    100% {
        transform: scaleX(1);
        opacity: 0;
        background-size: 1000% 1000%;
    }
}
.form-export-creation-panel {
    padding: 20px;
    width: 75vw;
}
.noshadow {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.form-export-template-radio-button {
    padding-top: 4px;
    padding-bottom: 4px;
    cursor: pointer;
}
.form-export-template-radio-button button {
    border: none;
    background-color: transparent;
    border-radius: 4px;
}
.form-export-template-radio-button img:not(.icon) {
    padding: 15px;
    margin-left: -10px;
}

md-checkbox[disabled] {
    cursor: default;
    color: black;
    opacity: 0.54;
}

.note-drawer-panel-sharing-help {
    color: #004085;
    background-color: #cce5ff;
    border: 1px solid #b8daff;
    border-radius: 4px;
    padding: 10px;
    cursor: pointer;
}
.note-drawer-panel-sharing-help md-checkbox {
    margin-bottom: 0px;
    margin-left: 1px;
}
.note-drawer-panel-sharing-help span.note-drawer-panel-sharing-help-text {
    margin-left: 9px;
    font-weight: bold;
    font-size: 14px;
}
.form-builder-card.form-field.large {
    /* padding-left: 30px;
    padding-right: 30px; */
}
.form-field-title-container {
    margin-bottom: 15px;
}
.form-builder-card.form-field .form-field-icon {
    color: var(--primary-color);
    opacity: 1 !important;
}
.form-builder-card.form-field .form-field-icon.field-dirty {
    color: black;
    opacity: 0.38;
}

.form-builder-card.form-field .form-field-icon.field-has-errors {
    color: rgb(213, 0, 0) !important;
    opacity: 1 !important;
}

.form-export-template-creation-dialog-content.ng-enter {
    transition: opacity 0.9s;
}

.form-export-template-creation-dialog-content.ng-enter,
.form-export-template-creation-dialog-content.ng-leave.ng-leave-active {
    opacity: 0;
}

.form-export-template-creation-dialog-content.ng-leave,
.form-export-template-creation-dialog-content.ng-enter.ng-enter-active {
    opacity: 1;
}
.dynamic-list-wrapper {
    position: relative;
    -webkit-transition: height 0.3s ease-out;
    transition: height 0.3s ease-out;
}
.dynamic-list-input-wrapper > input {
    border: none;
    background: transparent;
    height: 40px;
    font-size: 19px;
    padding: 5px;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.dynamic-list-panel {
    height: 300px;
    width: 99%;
    box-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.2),
        0 1px 1px 0 rgba(0, 0, 0, 0.14),
        0 2px 1px -1px rgba(0, 0, 0, 0.12);
    background-color: white;
    position: absolute;
    top: 52px;
    left: 5px;
    z-index: 100000;
    -webkit-transition: top 0.3s ease-out;
    transition: top 0.3s ease-out;
    overflow-y: scroll;
}
.dynamic-list-input-wrapper {
    min-height: 50px;
    width: 100%;
    padding: 4px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
    box-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.2),
        0 1px 1px 0 rgba(0, 0, 0, 0.14),
        0 2px 1px -1px rgba(0, 0, 0, 0.12);
}
.md-input-invalid .dynamic-list-input-wrapper {
    border: 1px solid #d50000;
    background: #f5bfbf;
}

.md-input-invalid .dynamic-list-input-wrapper > input::placeholder {
    color: #d50000;
}
.dynamic-list-value-wrapper {
    padding-left: 5px;
    padding-bottom: 6px;
    padding-top: 6px;
    width: 100%;
}
.dynamic-list-value-wrapper .key {
    color: var(--primary-color);
    font-size: 12px;
}
.dynamic-list-value-wrapper .value {
    color: black;
    opacity: 0.72;
    font-size: 16px;
}
.dynamic-list-actions-panel {
    border-radius: 4px;
    background-color: white;
    box-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.2),
        0 1px 1px 0 rgba(0, 0, 0, 0.14),
        0 2px 1px -1px rgba(0, 0, 0, 0.12);
}
.dynamic-list-example {
    opacity: 1;
}

.dynamic-list-example.ng-enter {
    transition: opacity 0.9s ease-out;
}

.dynamic-list-example.ng-enter,
.dynamic-list-example.ng-leave.ng-leave-active {
    opacity: 0;
}

.dynamic-list-example.ng-leave,
.dynamic-list-example.ng-enter.ng-enter-active {
    opacity: 1;
}

button.md-button.md-link-button {
    color: var(--secondary-color);
    font-size: 15px;
    line-height: 18px;
    text-transform: none;
    text-decoration: underline;
    font-weight: normal !important;
    outline: 0 !important;
}
button.md-button.md-link-button:hover {
    color: var(--primary-color);
    background-color: transparent !important;
}
em.em-title-primary {
    color: var(--primary-color);
    text-decoration: underline;
    cursor: pointer;
}
#geolocate-on-map {
    /* z-index: 1000000; */
}
.search-result {
    color: var(--primary-color);
    font-weight: bold;
}
.form-template .md-list-item-inner {
    width: 80% !important;
}
button:disabled {
    background-color: #ccc !important;
    color: #fff !important;
    cursor: not-allowed !important;
}
label.duplication-count-label.duplication-count-label-invalid {
    color: rgb(213, 0, 0) !important;
}
.note-drawer-property-section .note-drawer-clickable-path-element {
    color: var(--secondary-color);
    font-weight: bold;
    cursor: pointer;
}
.note-drawer-property-section .note-drawer-clickable-path-element:hover {
    text-decoration: underline;
    color: var(--primary-color);
}
md-dialog.note-batch-creation-dialog {
    z-index: 1201 !important;
}

.customSortRemoveLabel {
    float: left;
    margin: 0 0 0 3px;
    font-size: 11px;
}
md-dialog.note-batch-creation-dialog .md-actions,
md-dialog.note-batch-creation-dialog md-dialog-actions {
    padding: 0px 8px;
}
md-dialog.note-batch-creation-dialog .md-actions .md-button,
md-dialog.note-batch-creation-dialog md-dialog-actions .md-button {
    margin: 0;
}

.note-batch-creation-dialog .element-table {
    border: 1px solid #eee;
    border-radius: 4px;
    box-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.2),
        0 1px 1px 0 rgba(0, 0, 0, 0.14),
        0 2px 1px -1px rgba(0, 0, 0, 0.12);
    overflow-x: scroll;
}
.note-batch-creation-dialog .element-table-column {
    margin: 0;
    padding: 10px;
    background-color: #fff;
    min-width: 200px;
    position: relative;
}
.note-batch-creation-dialog .element-table-column.add-column {
    min-width: 40px;
    position: fixed;
    right: 62px;
    height: 112px;
    background-color: rgba(0, 0, 0, 0.36);
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    transition: background-color 0.3s ease-in-out;
}
.note-batch-creation-dialog .element-table-column.add-column:hover {
    background-color: rgba(0, 0, 0, 0.73);
}
.note-batch-creation-dialog .element-table-column .remove-button {
    position: absolute;
    right: -3px;
    top: 0px;
    margin: 0;
    color: darkred;
}

.note-batch-creation-dialog .element-table-column:nth-child(even) {
    background-color: #eee;
}

md-button[disabled] {
    cursor: default;
    color: black;
    opacity: 0.54;
}

button.md-button.md-button-sibling {
    border-radius: 0%;
    height: 36px;
    min-width: 28px;
    transition:
        box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
        background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
button.md-button.md-button-sibling.md-button-sibling-left {
    margin-right: 0 !important;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

button.md-button.md-button-sibling.md-button-sibling-right {
    margin-left: 1px !important;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.sign-container .sign-canvas {
    z-index: 10000;
}
.category-header {
    box-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.2),
        0 1px 1px 0 rgba(0, 0, 0, 0.14),
        0 2px 1px -1px rgba(0, 0, 0, 0.12);
    border-radius: 4px;
}
.md-button-group .md-button-group-member {
    font-size: 12px;
    margin: 5px 0;
    padding: 3px 10px 3px 10px;
    background-color: var(--primary-font-color);
    color: #333;
    text-transform: none;
    font-weight: 400;
    line-height: 28px;
    min-width: 113px;
}

.md-button-group .md-button-group-member.left {
    border-radius: 10px 0 0 10px;
}

.md-button-group .md-button-group-member.middle {
    border-radius: 0;
}

.md-button-group .md-button-group-member.right {
    border-radius: 0 10px 10px 0;
}

.md-button-group .md-button-group-member:not([disabled]):hover {
    color: var(--primary-font-color);
    background-color: var(--secondary-color);
    transition: 0.3s;
}

.md-button-group .md-button-group-member.active {
    color: var(--primary-font-color);
    background-color: var(--primary-color);
}

.sharing-table-header {
    box-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.2),
        0 1px 1px 0 rgba(0, 0, 0, 0.14),
        0 2px 1px -1px rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    border: 1px solid #eee;
    font-size: 18px;
    margin-top: 5px;
}

.project-template-users-onboarding {
    line-height: 1.75em;
    font-size: 16px;
    color: #004085 !important;
    background-color: #cce5ff !important;
    border: 1px solid #00408533 !important;
    border-radius: 4px;
    padding: 15px;
}

.report-template-empty-state {
    height: calc(100vh - 123px);
}
.report-template-sharing-card {
    border-radius: 4px;
    box-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.2),
        0 1px 1px 0 rgba(0, 0, 0, 0.14),
        0 2px 1px -1px rgba(0, 0, 0, 0.12);
    padding: 20px;
    border-left: 2px solid #1deaa4;
    margin-left: 30px;
}
.report-template-sharing-card::before {
    content: '';
    position: absolute;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    top: 16px;
    left: -12px;
}
#project-users-list-fab {
    position: fixed;
    bottom: 0;
    right: 0;
    margin: 2%;
    transition: bottom 0.3s ease-in-out;
    -webkit-transition: bottom 0.3s ease-in-out;
    -moz-transition: bottom 0.3s ease-in-out;
    -o-transition: bottom 0.3s ease-in-out;
    -ms-transition: bottom 0.3s ease-in-out;
}
#project-users-list-fab.transition-hide-down {
    bottom: -550px;
    transition: bottom 0.3s ease-in-out;
    -webkit-transition: bottom 0.3s ease-in-out;
    -moz-transition: bottom 0.3s ease-in-out;
    -o-transition: bottom 0.3s ease-in-out;
    -ms-transition: bottom 0.3s ease-in-out;
}
.dynamic-list-help-button {
    color: var(--primary-color);
}
.dynamic-list-help-panel-content a {
    color: var(--secondary-color);
    padding: 8px;
}
.dynamic-list-help-panel-content p {
    padding: 8px;
    margin: 0;
}
.dynamic-list-help-panel-content table {
    padding: 8px;
    margin: 0;
}
.dynamic-list-help-panel-content tr,
.dynamic-list-help-panel-content td {
    padding: 8px;
    margin: 0;
}

.dynamic-list-help-panel-content td.code {
    font-weight: bold;
}
.cookie-consent-banner {
    background-color: var(--primary-color);
}
.cookie-consent-banner-accept-button {
    background-color: var(--primary-color);
}
.app-switcher-menu-panel {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.app-switcher-menu-panel-container {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 340px;
    padding: 10px;
}

.app-switcher-menu-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e9e9e9;
    cursor: pointer;
    padding: 5px;
    margin: 10px;
    border-radius: 4px;
    font-size: 14px;
}

.app-switcher-menu-panel-header:hover {
    background-color: #e5e5e5;
}

.app-switcher-menu-panel-header div {
    color: #005378;
}
.app-switcher-menu-panel-header .app-switcher-menu-panel-menu-icon {
    font-size: 16px;
}

.app-switcher-menu-panel-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
}
a.app-switcher-menu-panel-item:focus {
    text-decoration: none;
}
.app-switcher-menu-panel-item:hover,
.app-switcher-menu-panel-item.active {
    background-color: #e9e9e9;
}

.app-switcher-menu-panel-item:last-child {
    margin-bottom: 0;
}

.app-switcher-menu-panel-icon {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: 20px;
    margin-right: 15px;
    flex-shrink: 0; /* Prevent shrinking */
}

.app-switcher-menu-panel-eProject-icon {
    background-color: #00bcd4;
}

.app-switcher-menu-panel-mezzoteam-icon {
    background-color: #00acc1;
}

.app-switcher-menu-panel-bulldozair-icon {
    background-color: #00838f;
}

.app-switcher-menu-panel-text {
    flex: 1;
}

.app-switcher-menu-panel-text h2 {
    font-size: 16px;
    font-weight: 900;
    margin: 0 0 5px 0;
    color: #005378;
}

.app-switcher-menu-panel-text p {
    font-size: 14px;
    margin: 0;
    color: black;
    opacity: 0.54;
}

.leaflet-cluster-anim .leaflet-marker-icon,
.leaflet-cluster-anim .leaflet-marker-shadow {
    -webkit-transition:
        -webkit-transform 0.3s ease-out,
        opacity 0.3s ease-in;
    -moz-transition:
        -moz-transform 0.3s ease-out,
        opacity 0.3s ease-in;
    -o-transition:
        -o-transform 0.3s ease-out,
        opacity 0.3s ease-in;
    transition:
        transform 0.3s ease-out,
        opacity 0.3s ease-in;
}

.leaflet-cluster-spider-leg {
    /* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
    -webkit-transition:
        -webkit-stroke-dashoffset 0.3s ease-out,
        -webkit-stroke-opacity 0.3s ease-in;
    -moz-transition:
        -moz-stroke-dashoffset 0.3s ease-out,
        -moz-stroke-opacity 0.3s ease-in;
    -o-transition:
        -o-stroke-dashoffset 0.3s ease-out,
        -o-stroke-opacity 0.3s ease-in;
    transition:
        stroke-dashoffset 0.3s ease-out,
        stroke-opacity 0.3s ease-in;
}
.marker-cluster-small {
    background-color: rgba(181, 226, 140, 0.6);
}
.marker-cluster-small div {
    background-color: rgba(110, 204, 57, 0.6);
}

.marker-cluster-medium {
    background-color: rgba(241, 211, 87, 0.6);
}
.marker-cluster-medium div {
    background-color: rgba(240, 194, 12, 0.6);
}

.marker-cluster-large {
    background-color: rgba(253, 156, 115, 0.6);
}
.marker-cluster-large div {
    background-color: rgba(241, 128, 23, 0.6);
}

/* IE 6-8 fallback colors */
.leaflet-oldie .marker-cluster-small {
    background-color: rgb(181, 226, 140);
}
.leaflet-oldie .marker-cluster-small div {
    background-color: rgb(110, 204, 57);
}

.leaflet-oldie .marker-cluster-medium {
    background-color: rgb(241, 211, 87);
}
.leaflet-oldie .marker-cluster-medium div {
    background-color: rgb(240, 194, 12);
}

.leaflet-oldie .marker-cluster-large {
    background-color: rgb(253, 156, 115);
}
.leaflet-oldie .marker-cluster-large div {
    background-color: rgb(241, 128, 23);
}

.marker-cluster {
    background-clip: padding-box;
    border-radius: 20px;
}
.marker-cluster div {
    width: 30px;
    height: 30px;
    margin-left: 5px;
    margin-top: 5px;

    text-align: center;
    border-radius: 15px;
    font:
        12px 'Helvetica Neue',
        Arial,
        Helvetica,
        sans-serif;
}
.marker-cluster span {
    line-height: 30px;
    color: black;
    font-weight: bold;
}
.form-creation-drawer-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.form-creation-toolbar {
    flex-shrink: 0;
}
.form-content-container {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px;
}
.form-toolbar-container {
    flex-shrink: 0;
}
.sso-authentication-error-container {
    background: var(--secondary-color);
    background: -moz-linear-gradient(-45deg, var(--secondary-color) 0%, var(--primary-color) 100%);
    background: -webkit-linear-gradient(-45deg, var(--secondary-color) 0%, var(--primary-color) 100%);
    background: -o-linear-gradient(-45deg, var(--secondary-color) 0%, var(--primary-color) 100%);
    background: -ms-linear-gradient(-45deg, var(--secondary-color) 0%, var(--primary-color) 100%);
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
}

.sso-authentication-error-centered {
    width: 100%;
    background: #eee;
    border-radius: 4px;
    margin-bottom: 10px;
    -webkit-box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 3px 14px 0px rgba(0, 0, 0, 0.2);
    padding: 20px;
}

@media (min-width: 768px) {
    .sso-authentication-error-centered {
        width: auto;
        min-width: 33vw;
    }
}
.bulldozair-annotation {
    z-index: 9 !important;
}

/* Disabled input container with outlined style */
.md-input-container-disabled {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 0;
    background-color: #f5f5f5;
}

.md-input-container-disabled input {
    color: #666;
    cursor: not-allowed;
    margin-bottom: 0;
    border: none;
    border-bottom: none !important;
}

/* =========================================================================
   Entity thumbnail card (modernized layout)
   Shared card system used by:
     - dev/modules/notes/notesThumbnailTpl.tpl.html (+ EmptyState)
     - dev/modules/plans/plansThumbnail.tpl.html (+ EmptyState)
   Introduced in 2026 to replace the legacy .span2 / .thumbnail overlay stack.
   Entity-specific extensions (e.g. plan build/error states) live in the
   "Plan card extensions" block just below the base classes.
   Legacy classes (.span2, .stackedSpan, .thumbnail, .widget-thumbnail,
   .note-wrapper, .thumbnailContainer) are still used by other modules
   (documents, projects) and must NOT be removed from this file.
   ========================================================================= */

.note-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    padding: 12px;
}
.note-card-grid--paged {
    padding-bottom: 150px;
}

.note-card {
    position: relative;
    display: grid;
    grid-template-rows: auto auto;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-left: 4px solid #bdbdbd;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.15s ease;
    z-index: 0;
}
.note-card:hover {
    overflow: visible;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    /* Lift above sibling cards (z-index: 0) but stay below the sticky
       category header (z-index: 10) so hovering a card near the top of
       a group in the grouped view doesn't paint over its header. */
    z-index: 2;
}
.note-card--selected {
    box-shadow: 0 0 0 2px var(--secondary-color, #ff6d00);
}
.note-card--folder {
    border-left-color: transparent;
}

.note-card--archived {
    background: #fafafa;
}
.note-card--archived .note-card__media img {
    filter: grayscale(100%);
}
.note-card--archived .note-card__title,
.note-card--archived .note-card__number {
    color: #888;
}

.note-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #f3f3f3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}
.note-card__media--folder {
    background: #fafafa;
}
.note-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.note-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.note-card__folder-icon {
    font-size: 72px !important;
    color: #bdbdbd;
}

.note-card__archived-chip {
    position: absolute;
    bottom: 4px;
    left: 4px;
    z-index: 3;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    background: rgba(97, 97, 97, 0.92);
    border-radius: 10px;
    pointer-events: none;
}

.note-card__topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 6;
    height: 32px;
    padding: 0 2px;
    display: none;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.note-card:hover .note-card__topbar,
.note-card--selected .note-card__topbar {
    display: flex;
}
@media (hover: none) {
    .note-card__topbar {
        display: flex;
    }
}

.note-card__topbar-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    cursor: pointer;
    color: #333;
}
.note-card__topbar-action.md-button.md-icon-button {
    margin: 0;
    min-width: 0;
    min-height: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    line-height: 32px;
    border-radius: 0;
    background: transparent;
}
.note-card__topbar-action.md-button.md-icon-button:hover {
    background: rgba(0, 0, 0, 0.05);
}

.note-card__sharing {
    position: absolute;
    bottom: 4px;
    right: 4px;
    z-index: 3;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    color: #555;
}
.note-card__sharing--clickable {
    cursor: pointer;
}

.note-card__body {
    padding: 8px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
}
.note-card:hover .note-card__body {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.note-card__title-wrap {
    position: relative;
    height: calc(13px * 1.3);
}
.note-card__title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}
.note-card:hover .note-card__title {
    left: -10px;
    right: -10px;
    padding: 6px 10px 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    max-height: 80px;
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 -2px 8px -4px rgba(0, 0, 0, 0.15);
    z-index: 5;
}
.note-card--archived:hover .note-card__title {
    background: rgba(250, 250, 250, 0.96);
}
.note-card__title.striked {
    text-decoration: line-through;
    color: #777;
}
.note-card--unread .note-card__title::before {
    content: '•';
    color: orangered;
    font-size: 20px;
    line-height: 0;
    vertical-align: middle;
    margin-right: 2px;
}
.note-card__number {
    color: var(--secondary-color);
    font-weight: 700;
}

.note-card__status {
    display: flex;
    align-items: center;
}
.note-card__status-pill.md-button {
    color: #fff !important;
    line-height: 20px;
    min-width: 0;
    min-height: 0;
    height: 22px;
    padding: 0 10px !important;
    margin: 0 !important;
    border-radius: 11px;
    background-color: #bdbdbd;
    font-size: 11px;
    font-weight: 500;
    text-transform: none;
    box-shadow: none;
}
.note-card__status-pill.md-button:hover {
    filter: brightness(0.95);
}

/* Hover footer (due date + overdue indicator) — overflows below the card */
.note-card__footer {
    position: absolute;
    top: 100%;
    left: -1px;
    right: -1px;
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-top: 1px solid #eee;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    font-size: 11px;
    color: #555;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
    z-index: 11;
}
.note-card:hover .note-card__footer {
    display: flex;
}
.note-card__footer-row {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.note-card__footer-icon {
    color: #888;
    flex: 0 0 auto;
}
.note-card__footer-text {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}
.note-card__footer-text--empty {
    color: #aaa;
}
.note-card__footer-overdue-icon {
    color: #d32f2f;
    margin-left: auto;
    flex: 0 0 auto;
}
.note-card__footer--overdue,
.note-card__footer--overdue .note-card__footer-icon,
.note-card__footer--overdue .note-card__footer-text {
    color: #d32f2f;
}

.note-card__assignees {
    display: flex;
    align-items: center;
    padding-left: 2px;
}
.note-card__assignee {
    position: relative;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    margin-left: -6px;
    border: 2px solid #fff;
    background-color: #eceff1;
    background-size: cover;
    background-position: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    flex: 0 0 auto;
}
.note-card__assignee:first-child {
    margin-left: 0;
}
.note-card__assignee--user.note-card__assignee--placeholder {
    background-color: var(--primary-color, #1976d2);
}
.note-card__assignee--group {
    background-color: #455a64;
}
.note-card__assignee--group.note-card__assignee--placeholder i {
    color: #eceff1;
}
.note-card__assignee--overflow {
    background-color: #eceff1;
    color: #555;
    font-size: 9px;
    font-weight: 600;
    padding: 0 2px;
}
.note-card--archived .note-card__assignee {
    filter: grayscale(100%);
}

.note-card__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.note-card__chip-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    max-width: 100%;
    min-width: 0;
    padding: 2px 6px;
    border-radius: 10px;
    background-color: #eceff1;
    color: #455a64;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.3;
    overflow: hidden;
}
.note-card__chip-pill i {
    font-size: 12px;
    flex: 0 0 auto;
    color: #78909c;
}
.note-card__chip-pill span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.note-card__chip-pill--overflow {
    background-color: transparent;
    padding: 2px 4px;
    color: #555;
    font-size: 9px;
    font-weight: 600;
}
.note-card--archived .note-card__chip-pill {
    filter: grayscale(100%);
}

/* Skeleton / empty-state card */
.note-card--skeleton {
    pointer-events: none;
    border-left-color: #e0e0e0;
}
.note-card__skeleton-shimmer,
.note-card__skeleton-line {
    background: linear-gradient(90deg, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%);
    background-size: 200% 100%;
    animation: note-card-skeleton-shimmer 1.4s infinite linear;
}
.note-card__skeleton-shimmer {
    width: 100%;
    height: 100%;
}
.note-card__skeleton-line {
    height: 12px;
    border-radius: 4px;
}
.note-card__skeleton-line--short {
    width: 40%;
}
@keyframes note-card-skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Header form templates --- inline editor in the note drawer.
 * Each header form field is rendered as its own .note-drawer-property-section row
 * (see notes.new-drawer.headerFormInline.tpl.html). These styles size the input
 * column on the right so it looks consistent with tags / status / assignees rows. */
.header-form-inline-title-row {
    background: transparent;
    min-height: 32px;
    margin-bottom: 0;
}
.header-form-inline-title-row p.note-drawer-section-label {
    font-weight: 500;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
    color: rgba(0, 0, 0, 0.54);
}
/* Row is taller than a regular property row because it stacks the label on
 * top of the input. Top-align so the icon sits next to the label, not in
 * the middle of the (label + input) block. */
.header-form-inline-row {
    overflow: visible;
    align-items: flex-start;
    padding-top: 12px;
}
.header-form-inline-row-invalid {
    background: rgba(229, 57, 53, 0.06);
}
/* Constrain the icon's line-box to match the title's line-height so their
 * visual centers align. The Material glyph (24px font) overflows the 18px
 * line-box by ~3px top/bottom; the row's padding-top + overflow: visible
 * absorbs it without clipping. */
.header-form-inline-row > i.material-icons {
    line-height: 18px;
    height: 18px;
    overflow: visible;
}
/* Vertical stack on the right of the icon: title label on top, control
 * (md-input-container / md-radio-group / md-checkbox group) below.
 * Block layout so md-input-container fills width naturally; if this were
 * `display: flex` md-input-container's flex-basis would collapse to its
 * content width and the input would no longer fill the column. */
.header-form-inline-stack {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 8px;
}
.header-form-inline-stack p.note-drawer-section-label.header-form-inline-field-title {
    margin: 0 0 8px 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    max-width: 100%;
    word-break: break-word;
    line-height: 18px;
}
/* Inputs use <md-input-container> so they get the same Material underline +
 * focus animation as the rest of the app's forms (notably formCreation.tpl.html).
 * In the header row context we drop ALL vertical padding/margin so the row
 * doesn't grow taller than label + input + underline. `!important` because
 * Angular Material sets these with high-specificity rules and a JS-applied
 * `style` attribute on focus/blur that otherwise wins. */
.header-form-inline-mdc {
    display: block;
    width: 100%;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 10px !important;
    margin-top: 14px !important;
}
.header-form-inline-mdc > input,
.header-form-inline-mdc > md-select {
    margin: 0;
    width: 100%;
}
.header-form-inline-radio-group {
    flex: 1 1 auto;
    margin: 0;
}
.header-form-inline-radio {
    margin: 4px 12px 4px 0 !important;
}
.header-form-inline-checkbox-group {
    flex: 1 1 auto;
}
.header-form-inline-checkbox {
    margin: 4px 12px 4px 0 !important;
}
.header-form-inline-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 8px 30px 16px 30px;
}
@media (max-width: 720px) {
    .header-form-inline-actions {
        margin: 8px 16px 16px 16px;
    }
}
/* -------------------------------------------------------------------------
   Plan / document card extensions
   Plans and documents reuse the .note-card base but add: a provenance/origin
   pill, a file-type placeholder icon (no rendered thumbnail / file icon), and
   a processing/error status accent + overlay (plan tiling, Dropbox sync).
   ------------------------------------------------------------------------- */

/* Bottom-left overlay stack: holds the provenance pill (anchored in the
   corner, mirroring the sharing badge on the right) and, when present, the
   archived chip above it. Kept clear of the top action banner so neither is
   covered on hover. column-reverse => first child (origin pill) sits at the
   bottom corner, archived chip stacks on top. */
.note-card__corner-badges {
    position: absolute;
    left: 4px;
    bottom: 4px;
    z-index: 3;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 4px;
    /* leave room for the bottom-right sharing badge */
    max-width: calc(100% - 38px);
}
.note-card__corner-badges .note-card__archived-chip {
    position: static;
}

/* Provenance pill. Positioned by .note-card__corner-badges; the card click
   passes through (only the tooltip reacts to hover). */
.note-card__origin-pill {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: var(--secondary-color, #ff6d00);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 10px;
}

/* File-type icon shown for a plan with no rendered thumbnail yet, or for any
   document (documents always show a file-type icon, never a preview). Higher
   specificity than `.note-card__media img` so it isn't stretched to cover. */
.note-card__placeholder .note-card__placeholder-icon {
    width: 56px;
    height: 56px;
    object-fit: contain;
    opacity: 0.7;
}

/* Processing / error status accent on the left border (reuses the notes
   status-bar slot). Orange while tiling/transferring, red on error. */
.note-card--building {
    border-left-color: #ff9800;
}
.note-card--error {
    border-left-color: #d32f2f;
}

/* Overlay covering the media while an entity is processing or has failed
   (plan tiling, Dropbox transfer). */
.note-card__status-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.55);
}
.note-card__status-overlay--error {
    background: rgba(255, 255, 255, 0.7);
}
.note-card__status-overlay--error i {
    color: #d32f2f;
    font-size: 36px;
}

/* -------------------------------------------------------------------------
   Project card extensions
   Projects reuse the .note-card base but have no single status (no left
   accent), a phase label, and a note-status distribution bar in the body.
   ------------------------------------------------------------------------- */
.note-card--project {
    border-left-color: transparent;
}
.note-card__project-phase {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #90a4ae;
}
/* Note-status distribution bar (segments colored per status, widths summing
   to the project's note total). Empty track shows when a project has 0 notes. */
.note-card__progress {
    display: flex;
    width: 100%;
    height: 22px;
    border-radius: 4px;
    overflow: hidden;
    background: #eceff1;
}
.note-card__progress-segment {
    height: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
/* Each segment shows its share % by default and switches to the task count
   for that status while the project card is hovered. CSS-only swap keeps the
   no-ng-mouseenter perf win of the modernized cards. */
.note-card__progress-count {
    display: none;
}
.note-card--project:hover .note-card__progress-pct {
    display: none;
}
.note-card--project:hover .note-card__progress-count {
    display: inline;
}

/* Destructive dialog confirm button (dialog.confirmDestructive). Angular Material's
   md-warn theming isn't applied when the class is added after render (compounded by
   generateThemesOnDemand), so force a red, unmistakably destructive look here.
   !important is needed to beat the runtime-injected theme <style> tags. */
.md-button.bz-dialog-destructive-button,
.md-button.bz-dialog-destructive-button.md-raised {
    background-color: #d32f2f !important;
    color: #ffffff !important;
}
.md-button.bz-dialog-destructive-button:not([disabled]):hover,
.md-button.bz-dialog-destructive-button.md-raised:not([disabled]):hover {
    background-color: #b71c1c !important;
}