*:focus {
    outline: none !important;
    outline-style: none !important;
}

body {
    overflow-y: scroll;
    overflow-x: hidden;
    font-size: 1rem;
    line-height: 1.5;
}

/* .text-muted {
    color: #868e96 !important;
} */

.text-accent {
    color: #f6a821 !important;
}

.taskDataOfTheTime .over-link {
    color: #f6a821 !important;
}

.navigation {
    width: 25%;
    overflow-y: scroll;
}

.navigation:before {
    width: 25%;
}

body.nav-toggle .navigation:before {
    left: -25%;
}

.nav-tabs {
    flex-wrap: nowrap;
}

/* .tabs-container {
    overflow: hidden;
} */

.nav-tabs .nav-link {
    height: 100%;
}

.pull-right {
    float: right;
}

.content {
    margin-left: 25%;
    padding: 30px 0 100px 0;
}

.content.content-fluid {
    margin: 0;
    padding: 0;
}

body.requesting {
    pointer-events: none;
}

body.nav-toggle .navigation {
    left: -25%;
}

.toolbox-kanban {
    position: absolute;
    right: 1rem;
    z-index: 99;
}

.toolbox-kanban .btn {
    display: flex;
    align-items: center;
}

.range-progress.disable {
    pointer-events: none;
    mix-blend-mode: screen;
    -webkit-filter: grayscale(100%) contrast(100%);
    filter: grayscale(100%) contrast(100%);
    /* opacity: 0.75; */
}

.transition-opacity {
    -webkit-transition: opacity 250ms ease-in-out;
    -moz-transition: opacity 250ms ease-in-out;
    -o-transition: opacity 250ms ease-in-out;
    -ms-transition: opacity 250ms ease-in-out;
    transition: opacity 250ms ease-in-out;
}

.cursor-pointer {
    cursor: pointer;
}

.font-inherit {
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
}

.nav.luna-nav .nav-category {
    color: #FFFFFF;
    margin-top: 15px;
}

.nav.luna-nav li a {
    border-width: 0;
    cursor: pointer;
}

.nav.luna-nav li.activated .nav-second li>a {
    /* padding-left: 40px; */
    border-left: none;
    color: #979ea4;
}

.v-timeline .panel-footer,
.panel .panel-footer {
    background-color: transparent;
    border: none;
}

.footer-toggle {
    overflow: hidden;
    max-height: 200px;
    -webkit-transition: max-height 300ms ease-in-out;
    -moz-transition: max-height 300ms ease-in-out;
    -o-transition: max-height 300ms ease-in-out;
    -ms-transition: max-height 300ms ease-in-out;
    transition: max-height 300ms ease-in-out;
}

.footer-toggle.toggle-hide {
    padding-top: 0;
    padding-bottom: 0;
    max-height: 0;
}

.form-file {
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

.form-file label {
    color: #eee;
}

.modal-header.ui-draggable-handle {
    cursor: move;
}

.modal-dialog {
    pointer-events: all;
}
/* .modal.modal-draggable .modal-dialog {
    position: absolute;
} */

.modal .form-file .form-control {
    background-color: rgba(68, 70, 79, 0.5);
}

.modal .form-file .form-control:focus {
    background-color: rgba(68, 70, 79, 1);
}

.panel .form-file .form-control {
    background-color: rgba(78, 80, 90, 0.5);
}

.panel .form-file .form-control:focus {
    background-color: rgba(78, 80, 90, 1);
}

.ld-loading .panel-body>* {
    transition: inherit;
    opacity: inherit;
}

.ui-sortable .drag-handler {
    cursor: move;
}

.ui-sortable .drag-handler[type]:not([type=kanban]) {
    cursor: default;
}

.ui-sortable .drag-handler:hover {
    background-color: #24262d;
}

.nav.luna-nav li.activated .nav-second li.activated>a {
    border-width: 0 0 0 6px;
    border-style: solid;
    color: #e5e7e8;
}

.nav.luna-nav li.activated .nav-second li.activated .nav-second li.activated>a {
    border-width: 0 0 0 6px;
    border-style: solid;
    color: #e5e7e7;
}

.nav.luna-nav li.activated .nav-second li>a:hover {
    color: #e5e7e7;
}

.nav.luna-nav li.activated>a {
    border-left-color: #f6a821;
    border-width: 0 0 0 6px;
    border-style: solid;
    color: #e5e7e7;
}

.nav.luna-nav li.activated>a.sub-nav-selectable {
    border-left-color: #f6a821;
    border-width: 1px 1px 1px 6px !important;
    border-style: solid;
    color: #e5e7e7;
}

.nav.luna-nav .sub-nav-chevron {
    position: absolute;
    right: 0;
    top: -2px;
    float: none;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);

    -webkit-transition: -webkit-transform 300ms ease-in-out;
    -moz-transition: -moz-transform 300ms ease-in-out;
    -o-transition: -o-transform 300ms ease-in-out;
    -ms-transition: -ms-transform 300ms ease-in-out;
    transition: transform 300ms ease-in-out;
}

.nav.luna-nav .collapsed .sub-nav-chevron {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
}

.flexible-container {
    display: flex;
}

.nav.luna-nav li.activated>a .flexible-container {
    margin-left: -6px;
}

.nav.luna-nav li.activated>a.sub-nav-selectable {
    padding-top: 7px;
    padding-bottom: 7px;
    padding-right: 14px;
}

.nav.luna-nav .sub-nav-status,
.nav.luna-nav .sub-nav-gravity {
    margin-right: 5px;
    min-width: 20px;
}

.navbar-header {
    position: relative;
}

.navbar-header .loader {
    top: inherit;
    left: inherit;
    right: 10px;
    bottom: 3px;
}


.loader-modal {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9999999;
}

.loader-modal.loader-show,
.ld-loading .loader-modal {
    display: flex;
}

@media (min-width: 768px) {
    .navbar-header .loader {
        top: inherit;
        left: inherit;
        right: 10px;
        bottom: 3px;
    }
}

#mobile-menu .left-nav-toggle {
    padding-top: 10px;
}

.navbar-header .loader-spin {
    border-width: 0.7em;
}

.navbar-header .loader-spin,
.navbar-header .loader-spin:after {
    border-radius: 50%;
    width: 2em;
    height: 2em;
}

.navbar-nav.navbar-login {
    display: flex;
    align-items: end;
    flex-direction: column;
    flex-basis: fit-content;
    margin-right: 20px;
}

.navbar-nav.navbar-login>li>a {
    padding-right: 0;
}

.navbar-nav.navbar-login>li>a:hover {
    color: #fff;
}

.navbar-default .navbar-brand,
.navbar-default .navbar-brand:active,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:hover {
    background-color: #24262d;
    padding: 16px 20px;
}

.navbar-default .navbar-brand:hover {
    opacity: 0.90;
}

.navbar-default .navbar-brand img {
    width: 100px;
    height: 26px;
}

.navbar-default .navbar-brand span {
    letter-spacing: 1px;
    color: #fff;
}

@media (max-width: 767px) {
    .content {
        margin-left: 0;
        padding: 30px 0 10px 0;
    }

    .navigation {
        width: 80%;
        left: -80%;
        z-index: 10;
    }

    .navigation:before {
        width: 80%;
        left: -80%;
    }

    body.nav-toggle .content {
        margin-left: 0;
    }

    body.nav-toggle .navigation {
        left: 0;
        z-index: 10;
    }

    body.nav-toggle .navigation:before {
        left: 0;
    }
}

/* .nav.luna-nav .sub-nav-percent {
    float: right;
    margin-right: 10px;
    font-size: 0.81rem;
} */

.nav.luna-nav .sub-nav-right {
    position: relative;
    float: none;
    flex: 1;
    margin-left: 5px;
    white-space: nowrap;
    text-align: right;
    font-weight: normal;
    /* font-size: 0.81rem; */
}

.nav.luna-nav .sub-nav-right .sub-nav-percent {
    margin-right: 20px;
}

.view-header .header-icon {
    font-size: 48px;
}

.form-text {
    font-size: 0.81rem;
    margin-bottom: 0;
}

/* select2  */
.btn-group .select2-container--default .select2-selection--single,
.btn-group .select2-container--default .select2-selection--multiple {
    margin-left: -1px;
    border-radius: 0;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: none;
    border-radius: 0.25rem;
    background-color: #606370;
    color: #fff;
}

.select2-container--default .select2-search--inline .select2-search__field,
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    color: #aaa;
}

.select2-container--default.select2-container--disabled .select2-selection--multiple,
.select2-container--default.select2-container--disabled .select2-selection--single {
    pointer-events: none;
    color: #aaaeb3;
    border-color: #3d404c;
    background-color: #494b54;
    cursor: default;
    opacity: 0.5;
}

.out-of-form .select2-container--default .select2-selection--single,
.out-of-form .select2-container--default .select2-selection--multiple {
    border-color: #616779;
    background-color: #363842;
}

.out-of-form .select2-container--default .select2-selection--single,
.out-of-form .select2-container--default .select2-selection--multiple,
.out-of-form .select2-container--default:hover .select2-selection--single .select2-selection__rendered,
.out-of-form .select2-container--default:hover .select2-selection--multiple .select2-selection__rendered {
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.out-of-form .select2-container--default:hover .select2-selection--single,
.out-of-form .select2-container--default:hover .select2-selection--multiple,
.out-of-form .select2-container--default.select2-container--focus .select2-selection--single,
.out-of-form .select2-container--default.select2-container--focus .select2-selection--multiple {
    background-color: #3d404c;
}

.out-of-form .select2-container--default:hover .select2-selection--single .select2-selection__rendered,
.out-of-form .select2-container--default:hover .select2-selection--multiple .select2-selection__rendered,
.out-of-form .select2-container--default.select2-container--focus .select2-selection--single .select2-selection__rendered,
.out-of-form .select2-container--default.select2-container--focus .select2-selection--multiple .select2-selection__rendered {
    color: #fff
}

.select2-container .select2-selection--single {
    height: 38px;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding-top: 4px;
}

.select2-container .select2-selection--multiple {
    min-height: 38px;
}

.select2-container--default .select2-results__option[aria-disabled=true] {
    color: #999;
    opacity: 0.5;
}

/*
* Hamburger lines reset animation, i.e. menu closed
*/
.hamburger {
    stroke: #999;
    width: 40px;
    height: 40px;
    cursor: pointer;
}

.hamburger:hover,
.hamburger.is-open {
    stroke: #f6a821;
}

.hamburger path {
    transform-origin: 50% 8px;
    transition: stroke 0.3s ease-in-out, fill 0.3s ease-in-out;
}

.hamburger path:nth-of-type(1) {
    animation: hamburgerTopReset 300ms ease-in-out forwards;
}

.hamburger path:nth-of-type(2) {
    transform-origin: 50% 15px;
    animation: hamburgerMiddleReset 300ms ease-in-out forwards;
}

.hamburger path:nth-of-type(3) {
    transform-origin: 50% 22px;
    animation: hamburgerBottomReset 300ms ease-in-out forwards;
}

.hamburger.is-open path:nth-of-type(1) {
    animation: hamburgerTopDeform 300ms ease-in-out forwards;
}

.hamburger.is-open path:nth-of-type(2) {
    animation: hamburgerMiddleDeform 300ms ease-in-out forwards;
}

.hamburger.is-open path:nth-of-type(3) {
    animation: hamburgerBottomDeform 300ms ease-in-out forwards;
}

@keyframes hamburgerTopReset {
    0% {
        transform: translateY(7px) rotate(45deg);
    }

    50% {
        transform: translateY(7px) rotate(0deg);
    }

    100% {
        transform: translateY(0) rotate(0deg);
    }
}

@keyframes hamburgerMiddleReset {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes hamburgerBottomReset {
    0% {
        transform: translateY(-7px) rotate(-45deg);
    }

    50% {
        transform: translateY(-7px) rotate(0deg);
    }

    100% {
        transform: translateY(0) rotate(0deg);
    }
}

@keyframes hamburgerTopDeform {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(7px) rotate(0deg);
    }

    100% {
        transform: translateY(7px) rotate(45deg);
    }
}

@keyframes hamburgerMiddleDeform {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes hamburgerBottomDeform {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-7px) rotate(0deg);
    }

    100% {
        transform: translateY(-7px) rotate(-45deg);
    }
}

.v-timeline {
    margin-top: 1em;
    margin-bottom: 1em;
}

.panel .v-timeline::before {
    background: #44464f;
}

.panel .vertical-timeline-icon {
    border-color: #44464f;
    background: #30333c;
}

.panel .vertical-timeline-content {
    background-color: #44464f;
    border: 1px solid #44464f;
}

.panel .vertical-timeline-content:before {
    border-right-color: #44464f;
}

.panel .vertical-timeline-content:after {
    border-right-color: #44464f;
}

.panel .vertical-timeline-block {
    margin: 1em 0;
}

.panel .vertical-timeline-content {
    background-color: #44464f;
    border: 1px solid #44464f;
}

.panel .vertical-timeline-content:before {
    border-right-color: #44464f;
}

.panel .vertical-timeline-content:after {
    border-right-color: #44464f;
}

.panel .panel-tools {
    position: initial;
}

.panel .panel-heading {
    position: relative;
}

.panel .drag-handler .dropdown-toggle {
    justify-content: center;
}

.panel-heading .panel-toggle {
    padding: 0;
}

.panel.drag-card.panel-collapse .panel-heading {
    -webkit-transition: color 300ms ease-in-out;
    -moz-transition: color 300ms ease-in-out;
    -o-transition: color 300ms ease-in-out;
    -ms-transition: color 300ms ease-in-out;
    transition: color 300ms ease-in-out;
    color: #aaaeb3;
}

.panel.drag-card .panel-heading {
    color: #ddd;
}

.panel .drag-handler .dropdown-toggle,
.panel .border-counter,
.panel .panel-toggle,
.panel .panel-reload,
.panel .panel-close {
    display: flex;
    align-items: center;

    position: absolute;
    right: 8px;
    top: 50%;
    width: 30px;
    height: 30px;

    color: #aaaeb3 !important;
    background-color: transparent !important;

    text-align: center;
    vertical-align: middle;
    margin: 0;

    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);

    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

.panel .panel-toggle .fa {
    position: absolute;
    top: 50%;
    left: 50%;

    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;

    transform: translate(-50%, -50%) rotate(180deg);
    -webkit-transform: translate(-50%, -50%) rotate(180deg);
    -moz-transform: translate(-50%, -50%) rotate(180deg);
    -o-transform: translate(-50%, -50%) rotate(180deg);
    -ms-transform: translate(-50%, -50%) rotate(180deg);
}

.panel.panel-collapse>.panel-heading .panel-toggle .fa {
    transform: translate(-50%, -50%) rotate(0deg);
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    -moz-transform: translate(-50%, -50%) rotate(0deg);
    -o-transform: translate(-50%, -50%) rotate(0deg);
    -ms-transform: translate(-50%, -50%) rotate(0deg);
}

.panel .panel-toggle .fa,
.panel .panel-reload .fa,
.panel .panel-close .fa {
    display: inline-block;
    flex-grow: 1;
}

.panel .panel-toggle:hover,
.panel .panel-reload:hover,
.panel .panel-close:hover {
    color: #fff !important;
}

.drag-border .drag-handler .border-counter {
    pointer-events: none;
    opacity: 0.75;
}

.drag-border .drag-handler:hover .border-counter {
    pointer-events: none;
    opacity: 0;
}

.panel .drag-handler .dropdown-toggle,
.panel .drag-handler .panel-toggle,
.panel .drag-handler .panel-close {
    opacity: 0;
}

.panel .drag-handler:hover .dropdown-toggle,
.panel .drag-handler:hover .panel-toggle,
.panel .drag-handler:hover .panel-close {
    opacity: 0.75;
}

.panel .drag-handler .dropdown-toggle[aria-expanded="true"],
.panel .drag-handler .dropdown-toggle:hover,
.panel .drag-handler .panel-toggle:hover,
.panel .drag-handler .panel-close:hover {
    background-color: transparent;
    color: #fff !important;
    opacity: 1;
}

.btn-default:not(.btn-xs):not(.btn-sm):not(.btn-lg) {
    min-height: 35.61px;
}

[data-color].constrast .fa {
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgba(255, 255, 255, 0.5);
}

[data-color="white"].constrast .fa,
[data-color="yellow"].constrast .fa {
    -webkit-text-stroke-color: rgba(0, 0, 0, 0.5);
}

[data-color].constrast:hover .fa {
    -webkit-text-stroke-color: rgba(255, 255, 255, 0.35);
}

[data-color="white"].constrast:hover .fa,
[data-color="yellow"].constrast:hover .fa {
    -webkit-text-stroke-color: rgba(0, 0, 0, 0.35);
}

[data-color="white"].constrast .fa {
    color: white
}
[data-color="gray"].constrast .fa {
    color: gray
}
[data-color="black"].constrast .fa {
    color: black
}
[data-color="purple"].constrast .fa {
    color: purple
}
[data-color="red"].constrast .fa {
    color: red
}
[data-color="blue"].constrast .fa {
    color: blue
}
[data-color="green"].constrast .fa {
    color: green
}
[data-color="yellow"].constrast .fa {
    color: yellow
}

canvas[data-color="white"] {
    cursor: url(../../res/svg/brush/brush-white.svg) 0 48, auto;
}
canvas[data-color="gray"] {
    cursor: url(../../res/svg/brush/brush-gray.svg) 0 48, auto;
}
canvas[data-color="black"] {
    cursor: url(../../res/svg/brush/brush-black.svg) 0 48, auto;
}
canvas[data-color="purple"] {
    cursor: url(../../res/svg/brush/brush-purple.svg) 0 48, auto;
}
canvas[data-color="red"] {
    cursor: url(../../res/svg/brush/brush-red.svg) 0 48, auto;
}
canvas[data-color="blue"] {
    cursor: url(../../res/svg/brush/brush-blue.svg) 0 48, auto;
}
canvas[data-color="green"] {
    cursor: url(../../res/svg/brush/brush-green.svg) 0 48, auto;
}
canvas[data-color="yellow"] {
    cursor: url(../../res/svg/brush/brush-yellow.svg) 0 48, auto;
}

.panel[data-luminosity] .panel-heading,
.panel[data-luminosity] .panel-body,
.panel[data-luminosity] .panel-footer {
    -webkit-transition: background 300ms ease-in-out;
    -moz-transition: background 300ms ease-in-out;
    -o-transition: background 300ms ease-in-out;
    -ms-transition: background 300ms ease-in-out;
    transition: background 300ms ease-in-out;
    border-radius: 0;
}

.panel[data-luminosity="light"]>.drag-handler,
.panel[data-luminosity="light"]>.drag-handler :not(.dropdown-item) .fa,
.panel[data-luminosity="light"]>.drag-handler :not(.dropdown-item) .fa:hover {
    color: #24262d;
}

.panel[data-luminosity="dark"]>.drag-handler,
.panel[data-luminosity="dark"]>.drag-handler :not(.dropdown-item) .fa,
.panel[data-luminosity="dark"]>.drag-handler :not(.dropdown-item) .fa:hover {
    color: #fff;
}

.panel[data-luminosity="light"] .dropdown-menu,
.panel[data-luminosity="dark"] .dropdown-menu,
.panel[data-luminosity="light"] .dropdown-menu:hover,
.panel[data-luminosity="dark"] .dropdown-menu:hover,
.panel[data-luminosity="light"] .dropdown-menu .fa,
.panel[data-luminosity="dark"] .dropdown-menu .fa,
.panel[data-luminosity="light"] .dropdown-menu:hover .fa,
.panel[data-luminosity="dark"] .dropdown-menu:hover .fa,
.panel[data-luminosity="light"] .dropdown-menu:hover .fa:hover,
.panel[data-luminosity="dark"] .dropdown-menu:hover .fa:hover {
    color: inherit !important;
}

.drag-planner {
    display: flex;
    flex-wrap: nowrap;
    margin: 0;

    /* position: -webkit-sticky; 
    position:sticky; 
    top: 10rem;
    z-index: 999; */
}

.drag-planner .panel.drag-border:not(.without-transitions) {
    margin-bottom: 0;
    -webkit-transition: width 300ms ease-in-out !important;
    -moz-transition: width 300ms ease-in-out !important;
    -o-transition: width 300ms ease-in-out !important;
    -ms-transition: width 300ms ease-in-out !important;
    transition: width 300ms ease-in-out !important;
}

.drag-planner .panel.drag-border>.panel-body,
.drag-planner .panel.drag-border>.panel-footer {
    padding: 5px !important;
}

.drag-planner .panel.drag-border.removing {
    width: 0 !important;
    overflow: hidden !important;
}

.drag-planner .panel.drag-border.removing>.panel-body,
.drag-planner .panel.drag-border.removing>.panel-footer {
    overflow: hidden !important;
}

.drag-planner .panel.drag-card.removing {
    height: 0 !important;
    overflow: hidden !important;
}

.drag-planner .panel.drag-card.removing>.panel-body,
.drag-planner .panel.drag-card.removing>.panel-footer {
    overflow: hidden !important;
}

.drag-planner .panel.drag-border.remove {
    opacity: 0.25 !important;
}

.drag-planner .panel.drag-card {
    margin-bottom: 0;
    -webkit-transition: background 300ms ease-in-out, height 300ms ease-in-out;
    -moz-transition: background 300ms ease-in-out, height 300ms ease-in-out;
    -o-transition: background 300ms ease-in-out, height 300ms ease-in-out;
    -ms-transition: background 300ms ease-in-out, height 300ms ease-in-out;
    transition: background 300ms ease-in-out, height 300ms ease-in-out;
}

.drag-planner .panel.drag-card .panel-body {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0.25rem;
    /* border-style: solid;
    border-width: 0 0 0 3px;
    border-color: rgba(255,255,255, 0.25);

    -webkit-transition: border-color 3000ms ease-in-out;
    -moz-transition: border-color 3000ms ease-in-out;
    -o-transition: border-color 3000ms ease-in-out;
    -ms-transition: border-color 3000ms ease-in-out;
    transition: border-color 3000ms ease-in-out; */
}

:root {
    --card-border-color: rgba(255, 255, 255, 0.25);
}

.drag-planner .panel.drag-card .panel-body::before {
    content: "";
    border-radius: 0.25rem;
    background-color: var(--card-border-color);
    height: 100%;
    display: block;
    width: 3px;
    position: absolute;
    top: 0;
    left: 0;

    -webkit-transition: background 300ms ease-in-out;
    -moz-transition: background 300ms ease-in-out;
    -o-transition: background 300ms ease-in-out;
    -ms-transition: background 300ms ease-in-out;
    transition: background 300ms ease-in-out;
  }

.card-body .note-editor.note-frame .note-editing-area .note-editable {
    padding-left: 0;
    padding-right: 0;
}

.card-body .note-editor.note-frame .note-status-output,
.card-body .note-editor.note-frame .note-statusbar {
    height: auto;
    border-top: none;
}

.drag-border .card-add.disabled {
    opacity: 0;
}

.drag-border .card-add:not(.disabled) {
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    font-size: 1.6rem;
    opacity: 0.35;
    cursor: pointer;
}

.drag-border .card-add:not(.disabled):hover {
    opacity: 1;
}

.drag-border>.panel-tools {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
}

.drag-border .panel.card-on-append {
    animation: card-on-append 300ms cubic-bezier(.23, 1, .32, 1);
}

@keyframes card-on-append {
    from {
        margin-top: -3rem;
        opacity: 0.5;
    }

    to {
        margin-top: 0rem;
        opacity: 1;
    }
}

.drag-border .panel .panel-heading {
    padding-top: 8px;
    padding-bottom: 8px;
}

.drag-planner .panel.drag-border .border-body {
    display: flex;
    flex-direction: column;
    min-height: 2rem;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* .drag-card {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
} */

.editable-title {
    overflow: hidden;
    text-overflow: ellipsis;
}

.editable-description {
    min-height: 1rem;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* cursor: text; */
}

.editable-description:hover {
    background-color: burlywood;
    color: #000;
}

.editable-description *,
.note-editing-area * {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.panel[data-luminosity="light"]>.editable-title[contentEditable="true"] {
    color: #000;
}

.panel[data-luminosity="dark"]>.editable-title[contentEditable="true"] {
    color: #fff;
}

[contentEditable="true"][placeholder]:empty:before {
    content: attr(placeholder);
    color: #fff;
    opacity: 0.35;
    font-weight: 300;
}

.editable-title[contentEditable="true"] {
    white-space: nowrap;
    font-weight: 500;
    letter-spacing: 1px;
}

.drag-border .panel-heading .panel-toggle {
    right: 31px;
}

.drag-border .panel-heading .dropdown-toggle {
    right: 5px !important;
}

.drag-border .panel-heading .panel-toggle,
.drag-border .panel-heading .dropdown-toggle {
    width: 26px !important;
}

.drag-border .panel-heading .border-counter:hover,
.drag-border .panel-heading .panel-toggle:hover,
.drag-border .panel-heading .dropdown-toggle:hover {
    background-color: rgba(0, 0, 0, 0.1) !important;
}

.btn.only-icon .fa {
    font-size: 1rem;
}

.fa-hidden {
    visibility: hidden;
    pointer-events: none;
}

.fa[data-overnumber] {
    position: relative;
    color: #e4fdc0;
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.fa[data-overnumber]::after {
    content: attr(data-overnumber);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    color: #000;
}

/* button chat center */
.btn-chat-center {
    position: relative;
    z-index: 999999;
}

.btn-chat-center .btn {
    font-size: 48px;
    color: #aaa;
    background-color: #494b54;
    /* box-shadow: 0 0 12px 0 rgba(255, 255, 255, 0.25); */
    border-radius: 50%;
    height: 80px;
    width: 80px;
    margin: 10px;
}

.btn-chat-center .btn:hover,
.btn-chat-center .btn:focus {
    color: #fff;
    background-color: #3b3d44 !important;
}

.btn-chat-center .dropdown-menu {
    background-color: #494b54;
}

.btn-chat-center .dropdown-item {
    color: #aaa;
    padding: .5rem 1.5rem .5rem .82rem;
}

.btn-chat-center .dropdown-item h4,
.btn-chat-center .dropdown-item h5 {
    color: #aaa;
}

.btn-chat-center .dropdown-item:hover h4,
.btn-chat-center .dropdown-item:hover h5 {
    color: #fff;
}

.btn-chat-center .dropdown-divider {
    border-top: 1px solid hsla(0, 0%, 0%, 0.15);
}

.btn-chat-center .dropdown-item-group {
    display: flex;
    flex-direction: row;
}

.btn-chat-center .dropdown-item:active {
    background-color: #24262d;
}

.btn-chat-center .dropdown-item .fa {
    margin: auto .6rem auto 0;
}

.btn-chat-center .dropdown-item-name h4 {
    font-weight: 600;
    font-size: 1.15rem;
    margin: 0 0 .25rem 0;
}

.btn-chat-center .dropdown-item-name h5 {
    font-weight: 300;
    font-size: 0.82rem;
    margin: 0;
}

.btn-chat-pulse {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.btn-chat-pulse::before,
.btn-chat-pulse::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    border-radius: 50%;
    background-color: #f6a821;
    opacity: .8;
}

.btn-chat-pulse::before {
    animation: pulse-circle 2s ease-out infinite;
}

.btn-chat-pulse::after {
    animation: pulse-circle 2s 1s ease-out infinite;
}

.btn-chat-pulse-icon {
    animation: pulse-icon 1s ease-in-out infinite;
}

.btn-chat-pulse .btn {
    color: #f6a821;
    background-color: #494b54;
}

.menu-nav-maintenances-over {
    background-color: #f6a821;
}

.menu-nav-maintenances-over * {
    color: #24262d
}

.user-online {
    color: #93c54b
}

/* pulse animation of heartbeat */
@keyframes pulse-icon {
    0% {
        transform: scale(0.8);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(0.8);
    }
}

/* pulse animation of circle */
@keyframes pulse-circle {
    0% {
        transform: scale(0.8);
    }

    100% {
        opacity: 0;
        transform: scale(1.6);
    }
}


/* colors */
.medium_delay {
    color: #f6a821;
}

.big_delay {
    color: #db524b;
}

/* STATES */

.is-dragover {
    background-color: rgba(68, 70, 79, 0.5);
}

.in-working.cog {
    text-align: center;
    width: 100%;
}

.unassigned-task .flexible-container {
    opacity: 0.4;
}

/* .unassigned-task a,
.unassigned-task .task-name,
.unassigned-task .task-date {
    pointer-events: none !important;
    background-color: inherit !important;
    color: inherit !important;
} */

.form-control[disabled], 
.form-control[readonly]:not(.do_not_overshadow), 
fieldset[disabled] .form-control {
    background-color: #494b54;
    opacity: 0.35;
}

.form-control:focus {
    color: #eee;
}

.navbar-default {
    background-color: #3a3d45;
    box-shadow: 0px 0px 12px #161616;
}

.dropdown-item {
    padding: 3px 25px 3px 15px;
    cursor: pointer;
}

.dropdown-item .fa {
    width: 20px;
}

label.disabled,
.dropdown-item.disabled,
.dropdown-item:disabled {
    color: #999;
    pointer-events: none;
    background-color: transparent;
}

button:disabled {
    pointer-events: none;
}

label.disabled {
    color: #494b54;
}

.btn.disabled {
    pointer-events: none;
    box-shadow: none
}

.nav-tabs .nav-link.disabled {
    opacity: 0.5;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus,
.jc-box .jc-yes:hover,
.jc-box .jc-no:hover {
    text-decoration: none;
    background-color: #30323b !important;
    color: #fff !important;
}

.typeahead.dropdown-menu li.active a strong {
    color: inherit;
}

.dropdown-toggle.background-off,
.dropdown-toggle.background-off:hover,
.dropdown-toggle.background-off:focus,
.dropdown-toggle.background-off:active {
    background-color: transparent;
}

.dropdown-toggle.caret-off::before,
.dropdown-toggle.caret-off::after {
    display: none;
}

.breadcrumb {
    overflow: hidden;
    text-overflow: ellipsis;
}

.breadcrumb .breadcrumb-item {
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-item:last-child {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.dropdown-item:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.navbar-form input.form-control,
.navbar-form input.form-control:focus {
    background-color: #494b54;
    color: #aaaeb3;
}

.navbar-form .dropdown-menu {
    background-color: #494b54;
}

.navbar-form .dropdown-item {
    color: #aaaeb3;
    background-color: #494b54;
}

.navbar-form .dropdown-item.selected {
    color: #aaaeb3;
    background-color: #606370;
}

.hourSelectable {
    border: 1px solid rgba(0, 0, 0, 0);
    padding: 0.25rem 0;
    margin: 0;
}

.hourSelected {
    border-radius: 0.25rem;
    border: 1px solid rgba(0, 0, 0, 0.5);
    background-color: #f6a821;
    color: #000
}

.modal-footer .btn-group{
    margin-right: .25rem;
}

.btn-group .btn i {
    min-width: 20px;
    margin-right: 0.25rem;
}

.btn-group > .btn {
    display: inline-flex;
    align-content: center;
    align-items: center;
}
.btn-group .dropdown-menu {
    width: fit-content;
}

.dropdown-menu {
    z-index: 9999999;
}

.navbar-form .typeahead.dropdown-menu li a strong {
    color: #ddd !important;
}

.navbar-form .dropdown-item:hover,
.navbar-form .dropdown-item:focus,
.navbar-form .dropdown-menu>.active>a,
.navbar-form .dropdown-menu.typeahead>.active>a>strong,
.navbar-form .dropdown-menu>.active>a:hover,
.navbar-form .dropdown-menu>.active>a:focus {
    color: #fff !important;
    background-color: #f6a821 !important;
}

.thead-border {
    box-shadow: inset 0px -1px #3d404c;
}

.table.table-td-relative td {
    position: relative;
}

.table.table-td-relative td .foater {
    position: absolute;
    height: calc(100% - 4px);
    margin: 2px 0;
}

.table-sm th .form-control,
.table-sm td .form-control {
    padding: 0.3rem !important;
}

.table-sm .btn {
    padding: 0.375rem 0.5rem;
}

table tr[data-status=lock] td:not(.no-through):not(.over-link) {
    color: #aaaeb3 !important;
    text-decoration: line-through !important;
}

.modal-content .modal-body {
    max-height: 80vh;
    overflow-y: auto;
    padding: 20px;
}

.modal-backdrop.show {
    opacity: 0.25;
}

.modal-content .modal-header .close {
    position: absolute;
    margin: inherit;
    padding: 0.25rem;
    right: 6px;
    top: 50%;
    width: 40px;
    height: 100%;
    transform: translateY(-50%);
}

.modal-content .modal-header {
    position: relative;
    padding: 15px 20px;
    display: block;
}

.modal-content .modal-footer {
    padding: 10px 20px;
}

.modal-content {
    border: 1px solid #454855;
    box-shadow: 0px 0px 12px 6px hsl(0deg 0% 0% / 20%);
}

.modal-title {
    margin-top: 0;
}

label {
    margin-bottom: 0.15rem;
}

[data-status=STATUS_ACTIVE] .btn-status {
    color: #000;
    background-color: #79c680;
    border-color: #79c680;
}

[data-status=STATUS_DONE] .btn-status {
    color: #fff;
    background-color: #6ebef4;
    border-color: #6ebef4;
}

[data-status=STATUS_ACTIVE]>a .sub-nav-status .fa,
[data-status=STATUS_ACTIVE]>.task-status .fa,
tr[data-status=STATUS_ACTIVE] .task-status .fa {
    color: #79c680;
}

[data-status=STATUS_DONE]>a .sub-nav-status .fa,
[data-status=STATUS_DONE]>.task-status .fa,
tr[data-status=STATUS_DONE] .task-status .fa {
    color: #6ebef4;
}

tr[data-status=STATUS_DONE] td:not([data-working=WORKING_PLAY_MAINTENANCE]):not([data-working=WORKING_PLAY]):not(.no-through):not(.over-link),
tr[data-status=STATUS_DONE] td:not([data-working=WORKING_PLAY_MAINTENANCE]):not([data-working=WORKING_PLAY]):not(.no-through):not(.over-link) *:not(.no-through):not(.over-link) {
    color: #aaaeb3 !important;
    text-decoration: line-through !important;
}

[data-status=STATUS_FAILED]>a .sub-nav-status .fa,
[data-status=STATUS_FAILED]>.task-status .fa,
tr[data-status=STATUS_FAILED] .task-status .fa {
    color: #9f58c6;
}

[data-status=STATUS_PENDING]>a .sub-nav-status .fa,
[data-status=STATUS_PENDING]>.task-status .fa,
tr[data-status=STATUS_PENDING] .task-status .fa {
    color: #ff9900;
}

[data-status=STATUS_SUSPENDED]>a .sub-nav-status .fa,
[data-status=STATUS_SUSPENDED]>.task-status .fa,
tr[data-status=STATUS_SUSPENDED] .task-status .fa {
    color: #ffd900;
}

[data-status=STATUS_REDO] .color-response-status,
[data-status=STATUS_REDO]>a .sub-nav-status .fa,
[data-status=STATUS_REDO]>.task-status .fa,
tr[data-status=STATUS_REDO] .task-status .fa {
    color: red
}

[data-status=STATUS_UNDEFINED]>a .sub-nav-status .fa,
[data-status=STATUS_UNDEFINED]>.task-status .fa,
tr[data-status=STATUS_UNDEFINED] .task-status .fa {
    color: #bbb;
}

/* status background */
tr[data-status=STATUS_ACTIVE] .task-status-label {
    background-color: #79c680;
    color: #24262d
}

tr[data-status=STATUS_DONE] .task-status-label {
    background-color: #6ebef4;
    color: #24262d
}

tr[data-status=STATUS_FAILED] .task-status-label {
    background-color: #9f58c6;
    color: #24262d
}

tr[data-status=STATUS_PENDING] .task-status-label {
    background-color: #ff9900;
    color: #24262d
}

tr[data-status=STATUS_SUSPENDED] .task-status-label {
    background-color: #ffd900;
    color: #24262d
}

tr[data-status=STATUS_REDO] .task-status-label {
    background-color: red;
    color: #24262d
}

tr[data-status=STATUS_UNDEFINED] .task-status-label {
    background-color: #bbb;
    color: #24262d
}

[data-working=WORKING_PLAY] .btn-working {
    color: #000;
    background-color: #f6a821;
    border-color: #f6a821;
}

[data-working=WORKING_PLAY] .in-working,
.working_normal {
    color: #f6a821 !important;
}

[data-working=WORKING_PLAY_MAINTENANCE] .btn-working {
    color: #fff;
    background-color: #8a2be2;
    border-color: #8a2be2;
}

[data-working=WORKING_PLAY_MAINTENANCE] .in-working,
.working_maintenance {
    color: #ac53ff !important;
}

[data-perform="task"][data-working=WORKING_PLAY] .sub-nav-selectable,
[data-perform="task"][data-working=WORKING_PLAY] .sub-nav-selectable:hover {
    background-color: #f6a821;
}

[data-perform="task"][data-working=WORKING_PLAY] .task-name,
[data-perform="task"][data-working=WORKING_PLAY] .task-date {
    color: #343640;
}

[data-perform="task"][data-working=WORKING_PLAY_MAINTENANCE] .sub-nav-selectable,
[data-perform="task"][data-working=WORKING_PLAY_MAINTENANCE] .sub-nav-selectable:hover {
    background-color: #8a2be2;
}

[data-perform="task"][data-working=WORKING_PLAY_MAINTENANCE] .task-name,
[data-perform="task"][data-working=WORKING_PLAY_MAINTENANCE] .task-date {
    color: #fff;
}

[data-working=WORKING_PLAY] .navbar-brand,
[data-working=WORKING_PLAY] .navbar-brand:active,
[data-working=WORKING_PLAY] .navbar-brand:focus,
[data-working=WORKING_PLAY] .navbar-brand:hover {
    background-color: #f6a821 !important;
}

[data-working=WORKING_PLAY_MAINTENANCE] .navbar-brand,
[data-working=WORKING_PLAY_MAINTENANCE] .navbar-brand:active,
[data-working=WORKING_PLAY_MAINTENANCE] .navbar-brand:focus,
[data-working=WORKING_PLAY_MAINTENANCE] .navbar-brand:hover {
    background-color: #8a2be2 !important;
}
/*  */
.progress-meter {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    overflow: hidden;
}

.progress-meter div {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
}

.progress-meter .done {
    background-color: #6ebef4;
}

.progress-meter .done-overdue {
    background-color: #5490b9;
}

.progress-meter .overdue {
    background-color: darkorange;
}

.progress-meter .overdue-suspended {
    background-color: orangered;
}

.cols-users {
    background-color: hsl(225, 11%, 21%);
    white-space: nowrap;
}

.cols-projects {
    background-color: hsl(225, 11%, 19.5%);
}

.cols-maintenances {
    background-color: hsl(225, 11%, 18%);
}

.cols-progress {
    background-color: hsl(225, 11%, 16.5%);
}
/*  */
tr .label {
    padding: .2em .6em;
    font-weight: normal;
}
/*  */

[data-status=STATUS_DONE]>a .task-name,
[data-status=STATUS_DONE]>a .task-date,
[data-status=STATUS_DONE]>.header-title .task-name {
    text-decoration: line-through;
}

[data-status=STATUS_DONE] .panel-heading h3,
[data-status=STATUS_DONE] .task-name {
    text-decoration: line-through;
    /* opacity: 0.6; */
}

/* GRAVITY */
[data-gravity="GRAVITY_CRITICAL"]:not([data-status=STATUS_DONE])>a .sub-nav-gravity .fa,
[data-gravity="GRAVITY_CRITICAL"] .task-gravity .fa {
    color: #C10626;
}

[data-gravity="GRAVITY_HIGH"]:not([data-status=STATUS_DONE])>a .sub-nav-gravity .fa,
[data-gravity="GRAVITY_HIGH"] .task-gravity .fa {
    color: #FC573B;
}

[data-gravity="GRAVITY_MEDIUM"]:not([data-status=STATUS_DONE])>a .sub-nav-gravity .fa,
[data-gravity="GRAVITY_MEDIUM"] .task-gravity .fa {
    color: #ff9900;
}

[data-gravity="GRAVITY_LOW"]:not([data-status=STATUS_DONE])>a .sub-nav-gravity .fa,
[data-gravity="GRAVITY_LOW"] .task-gravity .fa {
    color: #ffd900;
}

textarea {
    resize: none;
    field-sizing: content;
    min-height: 38px;
    max-height: 200px;
    width: 100%;
    padding: 10px;
}

/* confirm */
.jc-small {
    font-size: 0.9rem;
    line-height: 1.5;
    padding: 0;
}

.jc-question {
    font-weight: 400;
}

.jc-white-theme .jc-button,
.jc-white-theme .jc-button:link,
.jc-white-theme .jc-button:visited {
    margin: 0 5px 0 0;
    font-size: 0.9rem;
    line-height: 1rem;
    padding: .45em .8em;
    color: #3c3e48;
    background-color: transparent;
    border: none;
    border-radius: 0.25rem;
    -webkit-transition: background-color 250ms ease-in-out, color 250ms ease-in-out;
    -moz-transition: background-color 250ms ease-in-out, color 250ms ease-in-out;
    -o-transition: background-color 250ms ease-in-out, color 250ms ease-in-out;
    -ms-transition: background-color 250ms ease-in-out, color 250ms ease-in-out;
    transition: background-color 250ms ease-in-out, color 250ms ease-in-out;
}

.jc-white-theme .jc-button.jc-button-confirm {
    background-color: rgba(60, 62, 72, 0.15);
}

.jc-white-theme .jc-button:hover,
.jc-white-theme .jc-button:active,
.jc-white-theme .jc-button:focus {
    color: #fff;
    background-color: #3c3e48;
    border: none
}

.jc-white-theme {
    background-color: #fff;
    border: none;
    filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, .75));
}

.jc-white-theme .jc-arrow-top {
    border-bottom-color: #fff;
}

.jc-white-theme .jc-arrow-bottom {
    border-top-color: #fff;
}

.jc-white-theme .jc-arrow-left {
    border-right-color: #fff;
}

.jc-white-theme .jc-arrow-right {
    border-left-color: #fff;
}

.jc-preview-theme {
    background: #24262d;
    filter: drop-shadow(0px 0px 1px rgba(255, 255, 255, .25));
}

.jc-preview-theme .jc-arrow-top {
    border-bottom-color: #24262d;
}

.jc-preview-theme .jc-arrow-bottom {
    border-top-color: #24262d;
}

.jc-preview-theme .jc-arrow-left {
    border-right-color: #24262d;
}

.jc-preview-theme .jc-arrow-right {
    border-left-color: #24262d;
}

.jc-arrow-left {
    margin-top: auto;
    margin-bottom: auto;
    transform: translateY(-50%);
}

.jc-arrow-right {
    margin-top: auto;
    margin-bottom: auto;
    transform: translateY(-50%);
}

.jc-arrow-top {
    margin-left: auto;
    margin-right: auto;
    transform: translateX(-50%);
}

.jc-arrow-bottom {
    margin-left: auto;
    margin-right: auto;
    transform: translateX(-50%);
}

/*  */

.table th,
.table td {
    vertical-align: middle;
    text-overflow: ellipsis;
    overflow: hidden;
}

.table th.no-overflow,
.table td.no-overflow {
    text-overflow: inherit;
    overflow: inherit;
}

/* .table.responsive {
    width: 100%;
    display: grid;
} */

@media screen and (max-width: 762px) {
    .table.responsive thead {
        visibility: hidden;
        position: absolute;
        height: 0;
    }

    .table.responsive tr {
        display: block;
        margin-bottom: 0.625em;
    }

    .table.responsive .breadcrumb {
        display: block;
    }

    .table.responsive td {
        border: 1px solid #494b54 !important;
        display: block;
        font-size: 0.8em;
        text-align: right;
    }

    .table.responsive td:not(:last-child) {
        border-bottom: none !important;
    }

    .table.responsive td::before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
        text-transform: uppercase;
    }

    .table.responsive td:last-child {
        border-bottom: 1px solid;
    }
}

.no-border {
    border: none !important;
}

.btn:not(.note-btn):hover {
    color: #fff !important;
}

.btn-group-td {
    display: flex;
}

.btn-group-td .btn {
    padding: 6px;
    width: 26px;
    align-content: center;
    vertical-align: middle;
}

.btn-group-td .btn .fa {
    align-content: center;
    vertical-align: middle;
}

.header-title .task-name {
    color: #fff !important;
}

.btn.btn-vr {
    pointer-events: none;
    padding-left: 0;
    padding-right: 0;
    width: 1px;
    margin: 0 0.5rem 0 0.25rem;
}
  
/* TADA */
@-webkit-keyframes tada {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    10%,
    20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    }

    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }

    40%,
    60%,
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes tada {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    10%,
    20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        -ms-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    }

    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }

    40%,
    60%,
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.tada {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: tada;
    animation-name: tada;
}

.jc-box {
    font-size: 0.91rem;
}

/* style datalist */
datalist {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

option {
    display: flex;
    justify-content: center;
    align-items: start;
    /* width: 2ex;
    height: 4ex; */
    z-index: -1;
}

input[type="range"] {
    --c: orange;
    /* active color */
    --g: 5px;
    /* the gap */
    --l: 5px;
    /* line thickness*/
    --s: 30px;
    /* thumb size*/
    --r: 50%;
    /* border-radius */
    --w: 100%;
    /* width bar */
    --h: 30px;
    /* height bar */
    --th: 30px;
    /* thumb height */
    --tw: 15px;
    /* thumb width */

    width: var(--w);
    height: var(--h);
    --_c: color-mix(in srgb, var(--c), #000 var(--p, 0%));
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    cursor: pointer;
    overflow: hidden;
}

input[type="range"]:not(:disabled):focus-visible,
input[type="range"]:not(:disabled):hover {
    --p: 25%;
}

input[type="range"]:not(:disabled):active,
input[type="range"]:not(:disabled):focus-visible {
    --_b: var(--s);
}

input[type="range"]:disabled {
    opacity: 0.5;
    cursor: default;
}

/* chromium */
input[type="range" i]::-webkit-slider-thumb {
    height: var(--th);
    width: var(--tw);
    aspect-ratio: 1;
    border-radius: var(--r);
    box-shadow: 0 0 0 var(--_b, var(--l)) inset var(--_c);
    border-image: linear-gradient(90deg, var(--_c) 50%, #ababab 0) 0 1/calc(50% - var(--l)/2) 100vw/0 calc(100vw + var(--g));
    background-color: var(--_c);
    -webkit-appearance: none;
    appearance: none;
    transition: .3s;
}

/* Firefox */
input[type="range"]::-moz-range-thumb {
    height: var(--th);
    width: var(--tw);
    background: none;
    border-radius: var(--r);
    box-shadow: 0 0 0 var(--_b, var(--l)) inset var(--_c);
    border-image: linear-gradient(90deg, var(--_c) 50%, #ababab 0) 0 1/calc(50% - var(--l)/2) 100vw/0 calc(100vw + var(--g));
    background-color: var(--_c);
    -moz-appearance: none;
    appearance: none;
    transition: .3s;
}

@supports not (color: color-mix(in srgb, red, red)) {
    input[type="range"] {
        --_c: var(--c);
    }
}

.abc-checkbox label {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding-left: 5px;
}

.abc-checkbox input[type="checkbox"]:focus+label::before,
.abc-checkbox input[type="radio"]:focus+label::before {
    outline: none;
    outline-offset: 0;
}

.container-progress {
    display: flex;
    position: absolute;
    height: calc(100% - 10px);
    width: calc(100% - 10px);
    top: 0;
    left: 0;
    margin: 5px;
}

.container-progress .progress-completation,
.container-progress .progress-overdue {
    display: flex;
    justify-content: center;
    align-items: center;
}

.container-progress .progress-completation {
    background-color: #6ebef4;
    color: #fff;
}
.container-progress .progress-overdue {
    background-color: #f6a821;
    color: #000;
}

/* progress bar
.progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    width: 100%;
    background-color: rgba(246, 168, 33, 0.3);
    overflow: hidden;
    z-index: 999999999999;
}

table .progress-bar {
    position: relative;
    z-index: inherit;
} */

.progress-bar-value {
    width: 100%;
    height: 100%;
    background-color: #f6a821;
    animation: indeterminateAnimation 1s infinite linear;
    transform-origin: 0% 50%;
}

.progress-simple {
    width: 100%;
    height: 0.82rem;
    padding: 0;
    margin: 0;
}

.progress-simple .progress-bar-warning {
    background-color: #f6a821;
    border: none;
    padding: 0;
    margin: 0;
}

@keyframes indeterminateAnimation {
    0% {
        transform: translateX(0) scaleX(0);
    }

    40% {
        transform: translateX(0) scaleX(0.4);
    }

    100% {
        transform: translateX(100%) scaleX(0.5);
    }
}

/* online / offline  */
.online-indicator {
    display: inline-block;
    border-radius: 50%;
    position: relative;
}

.blink-line {
    display: block;
    width: 15px;
    height: 15px;
    background-color: #24262d;
    opacity: 0.7;
    border-radius: 50%;
}

[data-userstatus="online"].online-indicator {
    background-color: #0fcc45;
}

[data-userstatus="online"] .blink-line {
    background-color: #0fcc45;
    animation: blink-line 1s linear infinite;
}

[data-userstatus="absent"].online-indicator {
    background-color: #ffe350;
}

[data-userstatus="absent"] .blink-line {
    background-color: #ffe350;
    animation: blink-line 3s linear infinite;
}

/* cropper */
.img-container > img {
    visibility: hidden;
    max-width: 100%;
}
.cropper-hidden {
    display: none !important;
}

/* summernote */
.note-editor .note-toolbar .note-color .dropdown-toggle, 
.note-popover .popover-content .note-color .dropdown-toggle {
    width: 20px !important;
    right: inherit !important;
}

.note-editor .note-toolbar .note-color .dropdown-toggle::after, 
.note-popover .popover-content .note-color .dropdown-toggle::after {
    display: none !important;
}

.note-editor .note-toolbar .note-color-all .note-dropdown-menu,
.note-editor .note-toolbar .note-color-all .note-dropdown-menu .btn,
.note-editor .note-toolbar .note-color-all .note-dropdown-menu .btn:hover, 
.note-popover .popover-content .note-color-all .note-dropdown-menu,
.note-popover .popover-content .note-color-all .note-dropdown-menu .btn,
.note-popover .popover-content .note-color-all .note-dropdown-menu .btn:hover {
    color: #000 !important;
}

.note-editor .note-toolbar .note-color-all .note-dropdown-menu .btn,
.note-popover .popover-content .note-color-all .note-dropdown-menu .btn {
    min-height: auto;
    border-color: rgb(72 76 90 / 20%);
}

/* overlink */
.over-link {
    cursor: pointer;
}

.over-link:not(.in-working):not(.c-accent) {
    color: #aaaeb3;
}

.over-link:hover {
    text-decoration: underline !important;
}

.over-link.over-link-white:hover {
    color: #fff !important;
}

.over-link.over-link-accent:hover {
    color: #f6a821 !important;
}

.iziToast .over-link {
    color: #31343c !important;
    font-weight: 600;
}

/*Animations*/

@keyframes blink-line {
    100% {
        transform: scale(2, 2);
        opacity: 0;
    }
}

/* Scrollbar */
::-webkit-scrollbar {
    display: none;
    width: 14px;
    height: 14px;
    background-color: transparent;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    border: 4px solid rgba(0, 0, 0, 0);
    border-width: 4px;
    background-clip: padding-box;
    background-color: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.65);
}

*::-webkit-scrollbar {
    display: block;
    width: 4px;
    height: 4px;
    background-color: transparent;
}

*::-webkit-scrollbar-track {
    background-color: transparent;
}

*::-webkit-scrollbar-thumb {
    border: 0px solid rgba(0, 0, 0, 0);
    border-width: 0;
    background-clip: padding-box;
    background-color: rgba(255, 255, 255, 0.5);
}

*::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.75);
}