/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 14.06.2019, 22:24:46
    Author     : Jakob Deimbacher
*/
:root {

    --jpColor: #d0122c;
    --colorSuccessGreen: #38ada9;

    --textColor: #2b3e50;
    --textColorHelp: #666675;
    --textColorLight: #f4f4f4;

    /* BUTTON COLORS */

    /* BUTTON COLORS DEFAULT */
    --btnBColor: #f9f9f9;
    --btnHover: #d5e7fe;
    --btnHoverBorder: #d3e1f3;
    --btnHoverText: #027ffe;

    /* BUTTON COLORS LIGHTER */
    --btnLigterColor: #44c1a9;

    /* BUTTON COLORS RED */
    --btnRedColor: #eb2f06;
    --btnHoverRed: #fff3f3;

    /* BUTTON COLORS RED */
    --btnGreenColor: #44c1a9;
    --btnHoverGreen: #f3fefd;

    --inputBackgroundColor: #f2f2f859;
}

body {
    color: var(--textColor);
}

.tooltip {
    position: fixed;
    z-index: 9999999;
}

.label-danger {
    background-color: #ff7675;
}
.label-info {
    background-color: #7ed6df;
}
.label {
    font-size: 85%;
    border-radius: 1em;
}

.point-icon {
    background-image: url('/res/imgs/web_icons-new-gen-12062024.svg');
}
body.darkmode .point-icon {
    background-image: url('/res/imgs/web_icons4-darkmode.svg');
}

button, button.button,
.button{
    border-radius: 0px;
    line-height: 22px;
    font-size: 10pt;
    font-family: 'Montserrat-Light';
    border-radius: 25px;
    margin: 2px;
    padding: 10px 15px;
    border-radius: 28px;
    /*font-weight: bolder;*/
    background-color: var(--btnBColor);
    border: 1px solid #f1f1f1;
    color: var(--textColor);
    text-decoration: none;
    text-shadow: none;
}
.button:hover,
.button:focus,
button:hover,
button.button:hover,
button:focus,
button.button:focus {
    background-color: var(--btnHover);
    border: 1px solid var(--btnHoverBorder);
    color: var(--btnHoverText);
}

.button.small,
button.button.small{
    padding: 8px 15px;
    margin: 0px;
}

.button lord-icon {
    width: 14px;
    height: 14px;
    top: 3px;
    left: 2px;
}
button.bt-success, button.blue {
    color: white;
    background-color: #3498db;
    border: 1px solid #3195D3;
}

button.bt-success:hover,
button.bt-success:focus,
button.blue:hover,
button.blue:focus{
    background-color: #2EB0E8;
}
button .loading-i, button.button .loading-i {
    float: left;
    width: 20px;
    height: 20px;
    background-size: 20px;
    margin: 0;
    margin-right: 10px;
}

.button.light-blue.disable,
body.darkmode .button.light-blue.disable,
.button.btn-primary.light-blue.disable {
    opacity: 0.6;
}

.button.light-blue,
body.darkmode .button.light-blue,
.button.btn-primary.light-blue{
    background-color: var(--btnLigterColor);
    border-color: var(--btnLigterColor);
}
.button.light-blue:hover, .button.light-blue:focus,
.button.btn-primary:hover, .button.btn-primary:focus{
    border: 1px solid var(--btnLigterColor);
    background-color: #44c1a92b;
    color: #079992;
}

.button.small {
    line-height: 22px;
}
.button.btn-primary,
button.button.btn-primary {
    background-image: none;
    text-decoration: none;
}
.button.red {
    color: var(--btnRedColor);
}
.button.red:hover,
.button.red:focus,
button.button.red:hover,
button.button.red:focus {
    color: var(--btnRedColor);
    background-color: var(--btnHoverRed);
    border-color: var(--btnRedColor);
}


.button.green {
    color: #079992;
    background-color: var(--btnBColor)
}
.button.green:hover,
.button.green:focus,
button.button.green:hover,
button.button.green:focus {
    color: var(--btnGreenColor);
    background-color: var(--btnHoverGreen);
    border-color: var(--btnGreenColor);
}
.button.green.btn-primary,
button.button.green.btn-primary {
    background-color: var(--btnGreenColor);
    color: white;
}

/*.button.green {background-color: #44c1a9; border-color: #32a48e}
.button.green:hover,
.button.green:focus {background-color: #32a48e; }*/
.button.btn-submit {
    font-family: 'Montserrat-Regular';
    font-size: 10pt;
    padding-left: 15px;
    padding-right: 10px;
}
.button.btn-cancle {
    font-family: 'Montserrat-Regular';
}

.modal-header .button.btn-cancle {
    border-radius: 28px
}

#fancybox-overlay {
    z-index: 99999999;
}

.fancybox-opened {
    z-index: 999999991;
}

/*.button.active.switchoption {
    background-color: #F06292;
    color: white;
}*/

.editable.info-value-wrapper {
    position: relative;
}

.saved-info,
.editable .saved-info,
.boxlist .saved-info {
    position: relative;
    top: 4px;
    right: 2px;
    ;
    z-index: 2;
    color: #27ae60;
    line-height: 10px;
    /*background-color: white;*/
    padding: 2px 4px;
    border-radius: 50px;
    font-size: 15px;
    opacity: 0.9;
    font-family: 'Montserrat-Light';
}

.editable .saved-info,
.editable .boxlist .saved-info,
.boxlist .boxlist-text-wrapper .saved-info{
    position: absolute;
    top: 4px;
    right: 2px;
    ;
}
.color-select .saved-info {
    top: -4px;
    position: relative;
}
/*.boxlist.user-allocation .boxlist-text-wrapper .saved-info {display: none;}*/
.boxlist.user-allocation .boxlist-text-wrapper .saved-info {
    top: 2px;
}

.saved-info i {
    margin-right: 1px;
}
.saved-info.error {
    color: #eb4d4b
}
#new-status-option .saved-info {
    display: none !important;
}
/*.modal .editable.info-value-wrapper .saved-info {right: 6%;}*/

.jp-form-style label {
    text-align: left;
    padding: 3px 10px 1px 0;
    line-height: 24px
}
.onoffswitch-label,
.jp-form-style label.onoffswitch-label,
#side-options-content .jp-form-style label.onoffswitch-label {
    border-radius: 30px;
    border: 1px solid #e1e5eb;
    background-color: white;
}
.jp-form-style label.onoffswitch-label:before,
#side-options-content .jp-form-style label.onoffswitch-label:before,
.onoffswitch-label:before {
    border-radius: 30px;
    border-color: #e1e5eb;
}


.onoffswitch-checkbox:checked + .onoffswitch-label:before,
.jp-form-style .onoffswitch-checkbox:checked + .onoffswitch-label:before {
    border-color: var(--btnGreenColor);
    background-color: var(--btnGreenColor);
    box-shadow: 0px 0px 4px #414359ba;
}

.option-group .option input + label {
    border-color: #e1e5eb;
    background-color: white;
}
.option-group .option input:checked + label {
    color: #3498db
}
.option-group .option input:focus + label,
.option-group .option input:checked + label {
    border-color: #3498db;
    background-color: white;
}
.option-group .option input + label:hover {
    border-color: #E91E63;
    background-color: white;
}

.option-group .option input:checked + label:hover,
.option-group .option input:checked + label {
    border-color: #3498db;
    background-color: #fafafa
}

.jp-form-style input,
.jp-form-style select,
.jp-form-style .checkbox + label>span,
.jp-form-style textarea,
.jp-form-style .boxlist.asForm input,
.jp-form-style .boxlist.asFormStyle input,
.jp-form-style .input-group-addon {
    /*    border-color: #e1e5eb;*/
    border-color: transparent;
    box-shadow: none;
    padding-left: 10px;
    border-radius: 16px;
    line-height: 20px;
    font-size: 10pt;
    font-family: 'Montserrat-Regular';
    background-color: #f2f2f8a8 /*#f2f2f859*/;
    /*border-radius: 0;*/
    border-top: 0;
    border-left: 0;
    border-right: 0;
}
.jp-form-style textarea {
    line-height: 23px;
}
.jp-form-style select {
    padding: 9px 6px;
}
.jp-form-style .input-group-addon {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.jp-form-style .input-group .input-group-addon + input,
.jp-form-style .input-group .input-group-addon + select,
.jp-form-style .input-group .input-group-addon + .checkbox + label>span,
.jp-form-style .input-group .input-group-addon + .boxlist input{
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    z-index: auto;
    padding-left: 5px;
}
.jp-form-style .input-group .input-group-addon + .boxlist[max="1"] .val {
    background-color: white;
    border-color: #e1e5eb;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin: 0;
}

.jp-form-style input:focus, .jp-form-style select:focus, .jp-form-style textarea:focus,
.boxlist input[type="text"]:focus{
    border-color: #5791ff;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.4);
    border-radius: 30px;
    padding-left: 15px;
    outline: none;
}

.jp-form-style .date-span-input {
    display: inline-block;
    width: calc(50% - 8px);
}

input.required.empty-val {
    border-color: var(--btnLigterColor);
}
.jp-form-style input.required.empty-val,
.jp-form-style select.required.empty-val,
.jp-form-style .checkbox.required.empty-val + label>span,
.jp-form-style textarea.required.empty-val,
.jp-form-style .boxlist.asForm input.required.empty-val,
.jp-form-style .boxlist.asFormStyle input.required.empty-val,
.jp-form-style .input-group-addon.required.empty-val,
.assigned_contact.empty-val {
    border: 1px solid;
    border-color: var(--btnLigterColor);
    background-color: #ffb2b222;
}
.assigned_contact.empty-val {
    border-radius: 16px;
}


.draftMode .jp-form-style input.required {
    border-color: var(--btnLigterColor);
}

.shakeagain {
    animation: shakeInput 0.2s ease-in-out 0s 2;
}

.ajax-form .error-message {
    display: none;
    font-size: 11pt;
    color: var(--btnLigterColor);
    font-family: 'Montserrat-Regular';

}
.ajax-form .error-message.show {
    display: inline-block;
    animation: opacityShow 0.3s ease-in-out 0s;
}

@keyframes opacityShow {
    0% {
        opacity: 0%;
    }
    25% {
        opacity: 25%;
    }
    50% {
        opacity: 50%;
    }
    75% {
        opacity: 75%;
    }
    100% {
        opacity: 100%;
    }
}

@keyframes shakeInput {
    0% {
        margin-left: 0rem;
    }
    25% {
        margin-left: 0.5rem;
    }
    75% {
        margin-left: -0.5rem;
    }
    100% {
        margin-left: 0rem;
    }
}

.input-group-addon {
    background-color: white;
    border-color: #e1e5eb;
}

.boxlist input[type="text"] {
    /*    font-size: 12px;
        border: 1px solid #e1e5eb;
        padding: 8px;
        border-radius: 5px;
        line-height: 1.42857143;
        background-color: white;
        -webkit-transition: all 0.2s ease-out;
        -moz-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out;*/
}
.boxlist .val:hover {
    border-color: #e1e5eb;
    background-color: white;
}
.boxlist .val {
    background-color: #f9f9f9
}
/*.boxlist .val a span {overflow: hidden}
.boxlist .val a span.glyphicon {overflow: visible;}*/
.boxlist-autocomplete.ui-autocomplete {
    border-color: #e1e5eb;
    box-shadow: 0px 4px 18px 0px rgb(149 153 179 / 92%);
    border-radius: 16px;
}


/*.infobox li.ui-menu-item, .boxlist-autocomplete.ui-autocomplete .ui-menu-item {
    border-radius: 0px;
    line-height: 29px;
}*/
.posting .boxlist-autocomplete.ui-autocomplete .ui-menu-item  {
    border-radius: 0px;
}

.boxlist-autocomplete.ui-autocomplete .ui-menu-item .custom-color {
    width: 24px;
    height: 24px;
    border-radius: 30px;
    float: left;
}

.infobox.tabs .infobox-header,
.infobox.tabs .option-content {
    border-color: #e1e5eb
}

.div-boxing-content.bordered,
.boxing.bordered {
    border-radius: 0px;
    border: 1px solid #e1e5eb;
}

.sub-nav-menu {
    border-color: #e1e5eb
}
.dropdown-menu,
.infobox ul.dropdown-menu
{
    border-color: #e1e5eb;
    border-radius: 16px;
    background-color: white;
    width: max-content;
}

.dropdown-menu.pull-top {
    top: auto;
    bottom: 100%;
}

.dropdown-menu>li>a {
    font-family: 'Montserrat-Light';
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.dropdown-menu>li>a>.glyphicon,
.dropdown-menu>li>a>.fas,
.dropdown-menu>li>a>.fa,
.dropdown-menu>li>a>.far {
    padding: 8px;
    background-color: transparent;
    color: #5f6488;
    border-radius: 21px;
    margin-right: 10px;
    min-width: 28px;
    min-height: 28px;
    text-align: center;
}

/*.jp-tabs.nav.nav-tabs.btn-style .dropdown-menu li a {background-color: white; color: #5f6488}*/

.jp-options .btn-group .dropdown-menu a .glyphicon, .jp-options .btn-group .dropdown-menu a .fa, .jp-options .btn-group .dropdown-menu a .far, .jp-options .btn-group .dropdown-menu a .fas
{
    padding-right: 8px;
}

.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.jp-options .btn-group .dropdown-menu a:hover,
.jp-tabs.nav.nav-tabs.btn-style>li:hover>a,
.jp-tabs.nav.nav-tabs.btn-style>li>a:hover,
.nav.nav-tabs.style-jp>li a:hover {
    background-color: var(--btnHover);
    border-color: var(--btnHoverBorder);
    color: var(--btnHoverText);
}

.jp-tabs.nav.nav-tabs.btn-style>li.active>a {
    background-color: var(--btnHover);
    border-color: var(--btnHoverBorder);
    color: var(--btnHoverText);
}

.dropdown-menu>li>a:hover>.glyphicon,
.dropdown-menu>li>a:hover>.fas,
.dropdown-menu>li>a:hover>.fa,
.dropdown-menu>li>a:hover>.far {
    background-color: transparent;
    color: #007bff
}

.dropdown-menu>li.disable,
.dropdown-menu>li.disable:hover,
.dropdown-menu>li.disable:focus,
.dropdown-menu>li.disable>a,
.dropdown-menu>li.disable>a:hover,
.dropdown-menu>li.disable>a:focus {
    pointer-events: none;
    opacity: 0.5;
    cursor: default;
    display: none;
}

body,
.bcolor-jp-back,
#jp-head-info .jp-head-info-wrapper,
#right-side-options .jp-options,
#right-side-options-wrapper,
#side-options-content .main {
    background-color: #f6fafd;
}

.page-content,
.hw-container>.page-content,
#jp-list .table thead,
.jp-pipelines .jp-pipeline .pipeline-segment .segment-info,
.page-content.padding.nav-wrapper.info.jp-info-based {
    border: 1px solid #e1e5eb;
    border-radius: 25px;
}

#right-side-options .shadow,
#right-side-options .box,
#right-side-options .infobox,
#side-options-content .infobox,
.page-content,
.hw-container>.page-content,
#jp-list .table thead,
.jp-pipelines .jp-pipeline .pipeline-segment .segment-info,
.page-content.padding.nav-wrapper.info.jp-info-based {
    border: 1px solid #cfcfe869;
}

.flex .hw-container>.page-content,
.hw-container>.page-content {
    border: 0;
}

#jp-list .table thead,
.label-default {
    background-color: #fafafa
}
.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
    border: 0;
}

#jp-setting-view {
    width: 95%;
}
#global-search .ui-autocomplete,
.global-search .ui-autocomplete{
    overflow-x: hidden;
    overflow-y: auto;
}
#global-search .ui-autocomplete li a,
.global-search .ui-autocomplete li a{
    font-family: 'Montserrat-Light';
}
.page-content,
.hw-container>.page-content,
.jp-pipelines .jp-pipeline .pipeline-segment .segment-info,
#side-options-content .main,
#side-options-content{
    box-shadow: none;
}
.hw-container>.page-content {
    border-top: 0;
    border-left: 0;
    border-right: 0;
}

.page-content.no-left, .page-content.nav-content {
    border-left: 0;
}
.page-content.no-right, .page-content.nav-content {
    border-right: 0;
}
.page-content.nav-content {
    border-top: 0px;
}
.page-content.nav-content .nav.nav-tabs.style-jp {
    border-bottom: 0px;
}

#page-loading .loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 10px;
    background: #3498DB;
    border-radius: 5px;
    animation: pageLoader 1.8s ease-in-out infinite;
    &:before, &:after {
        position: absolute;
        display: block;
        content: "";
        animation: pageLoader 1.8s ease-in-out infinite;
        height: 10px;
        border-radius: 5px;
    }
    &:before {
        top: -20px;
        left: 10px;
        width: 40px;
        background: #EF4836;
    }
    &:after {
        bottom: -20px;
        width: 35px;
        background: #F5AB35;
    }
}

@keyframes pageLoader {
    0% {
        transform: translateX(40px);
    }

    50% {
        transform: translateX(-30px);
    }
    100% {
        transform: translateX(40px);
    }
}

#jp_coll_wrapper {
    padding: 0;
}
#jp_coll_wrapper.fullscreen .coll-entry {
    margin: 5px 0px;
    width: 100%;
    height: auto;
    min-height: 55px;
}
#jp_coll_wrapper.fullscreen .coll-entry div.title {
    padding-top: 11px;
    font-size: 10pt;
}

#jp-list.jp-list-overview .jp-list-row a,
#jp-list.jp-list-overview .jp-list-row a.first-info {
    max-width: 75%;
    width: auto
}
#jp-list.jp-list-overview .jp-list-row .dropdown-menu a {
    width: 100%;
}
#jp-list.jp-list-overview .jp-list-row .task_changer_wrapper {
    width: 45px;
}
#jp-list.jp-list-overview .jp-list-row .task_type_wrapper {
    display: inline-block;
    width: auto;
    height: 25px;
    margin-right: 15px;
    float: right;
}

#jp-list .boxlist.tags .val {
    padding: 1px 6px 1px 6px;
    line-height: 17px;
    zoom: 0.85;
    position: relative;
    z-index: auto;
}
#jp-list.jp-list-overview .jp-list-row .boxlist.tags .val a {
    font-size: 8pt;
    line-height: 17px;
}
#jp-list.jp-list-overview .jp-list-row .boxlist.tags .val .closable {
    font-size: 11px;
    top: 4px;
}
#jp-list.jp-list-overview .jp-list-row .boxlist.tags input[type="text"]:focus {
    width: 95px;
}

#right-side-options .inner-side-options {
    border-left: 1px solid #e1e5eb;
}

#right-side-options .shadow,
#right-side-options .box,
#right-side-options .infobox,
#side-options-content .infobox {
    box-shadow: none;
    border: 0;
}
#side-options-content .tab-content {
    border-right: 1px solid #d8e1ea;
}

.posting .seperation-line,
#side-options-content .seperation-line {
    border-bottom: 1px solid #d8e1ea;
}

#side-options-content .action_phoneCall,
#right-side-options-wrapper .action_phoneCall,
#dynamic-table tr td .action_phoneCall,
#side-options-content .action.action_phoneCall,
#right-side-options-wrapper .action.action_phoneCall,
#dynamic-table tr td .action.action_phoneCall
{
    border-color: #00b894;
    color: #00b894;
}
#side-options-content .action_web,
#right-side-options-wrapper .action_web,
#dynamic-table tr td .action_web,
#side-options-content .action.action_web,
#right-side-options-wrapper .action.action_web,
#dynamic-table tr td .action.action_web{
    border-color: #e84393;
    color: #e84393
}
#side-options-content .action_email,
#right-side-options-wrapper .action_email,
#dynamic-table tr td .action_email,
#side-options-content .action.action_email,
#right-side-options-wrapper .action.action_email,
#dynamic-table tr td .action.action_email {
    border-color: #098ddf;
    color: #098ddf;
}
#side-options-content .action_share,
#right-side-options-wrapper .action_share,
#dynamic-table tr td .action_share,
#side-options-content .action.action_share,
#right-side-options-wrapper .action.action_share,
#dynamic-table tr td .action.action_share {
    border-color: #aa7ee4;
    color: #aa7ee4;
}
/*#side-options-content .action_share:hover,
#right-side-options-wrapper .action_share:hover {
    border-color: #8953d0;
}*/
#side-options-content .action,
#right-side-options-wrapper .action,
#dynamic-table tr td .action{
    display: inline-block;
    padding: 5px;
    border-radius: 30px;
    font-size: 11px;
    color: var(--textColorHelp);
    border: 1px solid var(--textColorHelp);
    width: 23px;
    height: 23px;
    line-height: 17px;
    text-align: center;
    position: absolute;
    top: 1px;
    left: 92%;
    z-index: 5;

    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

.input-group-addon .action,
#side-options-content .input-group-addon .action{
    top: auto;
    position: relative;
    left: auto;
    line-height: 13px;
}

#dynamic-table tr td .action {
    top: 3px;
    left: 5px;
    z-index: 2;
    width: 21px;
    height: 21px;
    line-height: 14px;
}
#dynamic-table tr td .action + .value {
    padding-left: 25px;
}

#dynamic-table .table tbody tr td .round-img.small,
#dynamic-table .table tbody tr td .point-icon {
    float: left;
    position: relative;
    left: 5px;
    top: -2px;
    margin-right: 4px !important;
}

#side-options-content .contact-detail-info-btn,
#right-side-options-wrapper .contact-detail-info-btn {
    position: absolute;
    right: 0px;
    top: 5px;
    font-size: 14pt;
    color: #7b86a1 !important;
}

#side-options-content .contact-detail-info,
#right-side-options-wrapper .contact-detail-info{
    position: relative;
    border: 1px solid #eaeaea;
    background-color: #fafafa;
    padding: 1px 8px;
    border-radius: 5px;
    margin-bottom: 5px;
    line-height: 16px;
}
#side-options-content .contact-detail-info-link,
#right-side-options-wrapper .contact-detail-info-link {
    /*line-height: 25px;*/
    margin-top: 6px;
    margin-bottom: 0px;
    display: inline-block;
}

#side-options-content .contact-detail-info .address-details,
#right-side-options-wrapper .contact-detail-info .address-details {
    line-height: 12px
}

#right-side-options .shadow,
#right-side-options .box,
#right-side-options .infobox {
    border-right: 0;
    border-left: 0;
}

.map_address,
#side-options-content .map_address,
#right-side-options-wrapper .map_address{
    display: block;
    height: 150px;
    margin: 5px 0px;
    margin-bottom: 15px;
}

#side-options-content .google-maps-field {
    display: inline-block;
    width: 100%;
}

#createROOT input[type='file'] {
    position: absolute;
    z-index: -1;
    display: block;
    width: 0;
    height: 0;
    outline: 0;
    border: 0;
    margin: 0;
    padding: 0;
}

#createROOT .preview-img {
    width: auto;
    max-height: 115px;
    max-width: 200px;
    margin: 10px;
}

#createROOT .file-selection {
    display: inline-block;
    min-width: 30px;
    height: 30px;
    text-align: center;
    line-height: 28px;
    border: 1px solid #e1e5eb;
    border-radius: 30px;
    font-size: 10pt;
    background-color: white;
    z-index: 3;
}
#createROOT .file-selection .fas,
#createROOT .file-selection .far {
    width: 30px;
    font-size: 11pt;
    color: #f06292;
}
#createROOT .file-selection span {
    padding-right: 5px;
}

#createROOT .attachment-item {
    display: inline-block;
    background-color: white;
    padding: 6px 10px;
    border: 1px solid #EAEAEA;
    border-radius: 25px;
    text-align: center;
}
#createROOT .attachment-item .attachment-desc {
    display: inline-block;
    font-size: 10pt;
    padding-right: 5px;
    font-family: 'Montserrat-Light';
}
#createROOT .attachment-item .attachment-img {
    max-width: 120px;
    display: inline-block;
}

#mobile-footer {
    display: none;
}

#jp-head-info {
    border: 0;
}
.jp-head-info-wrapper,
#side-options-content .main,
#right-side-options .jp-options {
    border-bottom: 0px solid #d8e1ea
}

#right-side-options .inner-side-options div:first-child {
    border-top: 0px;
}

#jp-head-info.info.page-content {
    border: 0px;
}
.jp-options .btn-group a.option {
    float: right;
    text-align: center;
}
.jp-options a.option {

    color: #525558;
    height: 25px;
    line-height: 25px;
    /*color: #e1e5eb;*/
    background-color: #fafafa;
    text-align: center;
    border-radius: 32px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    margin-top: 10px;
    /*border: 1px solid #e1e5eb;*/

    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.jp-options a .glyphicon {
    background-color: transparent;
}

.jp-options a:hover, .jp-options a:focus, .jp-options a.active, .jp-options a.favourite {
    border-color: transparent;
    color: white;
    background-color: #74b9ff;
}
.jp-options a.active {
    background-color: #fafafa;
    color: #ff9f43
}
.jp-options a.favourite,
.jp-options a.favourite:hover {
    background-color: #fafafa;
    color: #ff9f43
}

/*.jp-list-overview .page-content{border-radius: 0px;}*/
.jp-list-overview .jp-list-row .progress {
    top: 13px;
}

/*.jp-list-overview .custom-image.is-user:after {content: ' '; display: block; background-color: #F06292; width: 15px; height: 15px; border-radius: 20px; position: relative; top: 0px; right: 0px;}*/
.jp-list-overview .custom-image.is-user {
    border-color: #3f9ad4
}
.jp-list-overview .jp-list-row{
    border-radius: 24px;
    border: 1px solid #eaeaea;
    background-color: #fafafa55;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

.jp-list-overview .jp-list-row + .jp-list-row {

    margin-top: 15px;
}

.jp-list-overview.only-user .jp-list-row.is-user {
    border-left: 5px solid #E91E63
}


.jp-pipelines .jp-pipeline .pipeline-header:before {
    border-left-color: white;
}
.jp-pipelines.status-mode .jp-pipeline .pipeline-header:before,
.jp-pipelines.status-mode .jp-pipeline .pipeline-header:after {
    content: '';
    border: 0;
}
.jp-pipelines.status-mode .jp-pipeline .pipeline-header {
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
}

/*.jp-pipelines .jp-pipeline .segment-container {background-color: #f9f9f9;}*/
.jp-pipelines .jp-pipeline .segment-container {
    padding-top: 2px;
    background-color: #e9eff654;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.jp-pipelines .jp-pipeline .pipeline-content {
    border-radius: 16px !important;
}
.jp-pipelines .jp-pipeline:hover .segment-container {
    background-color: #e6edf499;
}
.jp-pipelines.style-2 .jp-pipeline:hover .pipeline-content {
    box-shadow: 0px 0px 3px #cbccd4;
}

.jp-pipelines.status-mode .jp-pipeline.last .pipeline-header,
.jp-pipelines.status-mode .jp-pipeline.last .pipeline-header,
.jp-pipelines.status-mode .jp-pipeline.first .pipeline-header,
.jp-pipelines.status-mode .jp-pipeline.first .pipeline-header
.jp-pipelines .jp-pipeline.last .pipeline-header,
.jp-pipelines .jp-pipeline.first .pipeline-header,
.jp-pipelines .jp-pipeline .pipeline-header,
.jp-pipelines .jp-pipeline .pipeline-header:hover {
    text-align: center;
    background-color: #039BE5;
    border-left-color: #039BE5;
    color: white;
    box-shadow: none;
}
.jp-pipelines .jp-pipeline .pipeline-header .point-icon {
    display: none;
}
.jp-pipelines .jp-pipeline .pipeline-header .title {
    position: relative;
    left: -23px;
    max-width: 255px;
}
.jp-pipelines .jp-pipeline .pipeline-header .phase-sub-menu {
    position: absolute;
    top: 4px;
    right: 15px;
}
.jp-pipelines .jp-pipeline .pipeline-header .phase-sub-menu .fas {
    opacity: 0.7
}
.jp-pipelines .jp-pipeline .pipeline-header:hover .phase-sub-menu .fas {
    opacity: 1
}

.jp-pipelines.status-mode .jp-pipeline.first .pipeline-header {
    border-left-color: inherit;
}
.jp-pipelines .jp-pipeline.first .pipeline-header:after,
.jp-pipelines .jp-pipeline.first .pipeline-header:hover:after {
    border-left-color: inherit;
}

.jp-pipelines.status-mode .jp-pipeline.last .pipeline-header:after,
.jp-pipelines.status-mode .jp-pipeline.last .pipeline-header:after,
.jp-pipelines.status-mode .jp-pipeline.first .pipeline-header:after,
.jp-pipelines.status-mode .jp-pipeline.first .pipeline-header:after,
.jp-pipelines .jp-pipeline.first .pipeline-header:after,
.jp-pipelines .jp-pipeline.first .pipeline-header:hover:after,
.jp-pipelines .jp-pipeline .pipeline-header:after,
.jp-pipelines .jp-pipeline .pipeline-header:hover:after,
.jp-pipelines .jp-pipeline.first .pipeline-header:hover:after,
.jp-pipelines.status-mode .jp-pipeline.first,
.pipeline-header:after,
.jp-pipelines.status-mode {
    border-left-color: inherit !important;
}
.jp-pipelines .label-default {
    border: 1px solid #4CAF50;
    background-color: white;
    color: #4CAF50
}
.jp-pipelines .jp-pipeline .pipeline-content.workon {
    background-color: white;
    border-color: #2196F3;
}

.jp-pipelines.style-2 .pipeline-steps.fixed {
    left: 60px
}
.jp-pipelines.style-2 .jp-pipeline {
    padding: 3px;
}
.jp-pipelines.style-2 .jp-pipeline.first .pipeline-header {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
.jp-pipelines.style-2 .jp-pipeline.last .pipeline-header {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
.jp-pipelines.style-2 .jp-pipeline .pipeline-header {
    height: 24px;
    line-height: 23px;
}
.jp-pipelines.style-2 .jp-pipeline .pipeline-header:after,
.jp-pipelines.style-2 .jp-pipeline .pipeline-header:before {
    top: 3px;
}
.jp-pipelines.style-2 .jp-pipeline .pipeline-header:after {
    border-width: 12px;
    right: -20px;
}
.jp-pipelines.style-2 .jp-pipeline .pipeline-header:before {
    border-width: 16px;
    margin-top: -4px;
    right: -32px;
}
.jp-pipeline.draggable.ui-sortable-helper .pipeline-header {
    border-radius: 25px;
    transform: rotate(-2deg);
    box-shadow: 0px 0px 6px #4b576c;
}
.jp-pipeline.draggable.ui-sortable-helper .pipeline-header .phase-sub-menu {
    display: none
}
.jp-pipeline.draggable.ui-sortable-helper .pipeline-header:after,
.jp-pipeline.draggable.ui-sortable-helper .pipeline-header:before{
    border: 0;
}
.jp-pipelines.status-mode.style-2 .jp-pipeline .pipeline-header {
    border-radius: 20px;
}
.jp-pipelines.style-2 .jp-pipeline .pipeline-content {
    padding-top: 4px;
    margin: 5px;
    position: relative;
}
.jp-pipelines.style-2 .jp-pipeline .pipeline-content.draftMode {
    opacity: 0.5;
}
.jp-pipelines.style-2 .jp-pipeline .pipeline-content .content-header .row:last-child {
    padding-bottom: 0px;
}
.jp-pipelines.style-2 .jp-pipeline .pipeline-content .content-header .title {
    padding-bottom: 8px;
    font-family: 'Montserrat-Regular';
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90%;
}
.jp-pipelines.style-2 .jp-pipeline .content-info {
    padding-top: 0px;
}
.jp-pipelines.style-2 .jp-pipeline .pipeline-content .progress {
    height: 3px;
    margin-top: 0px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.jp-pipelines.style-2 .label {
    margin-bottom: 5px;
    display: inline-block;
}
.jp-pipelines.style-2 .pipeline-content {
    margin-bottom: 5px;
}
.jp-pipelines.style-2 .jp-pipeline .content-info .box.workon {
    border-top: 0px;
}
.jp-pipelines.style-2 .label.label-info {
    font-size: 10px;
}
.jp-pipelines.style-2 .label.label-info.segment-sum {
    color: #374b65;
    background-color: transparent;
}

.jp-pipelines.style-2 .label.label-tag {
    position: relative;
    margin: 0px;
    font-weight: normal;
    font-size: 9px;
    padding: 3px 5px;
    font-family: 'Montserrat-Light';
}
.jp-pipelines.style-2 .label.label-tag.label-img {
    position: relative;
    margin: 1px 0px;
    font-weight: normal;
    font-size: 9px;
    padding: 3px 5px;
    padding-left: 16px;
    font-family: 'Montserrat-Light';
    background-color: white;
    color: #6d8196;
}
.jp-pipelines.style-2 .label.label-tag.label-img img {
    border-radius: 20px;
    position: absolute;
    left: -1px;
    top: -1px;
    margin: 0;
}
/*.jp-pipelines .jp-pipeline.first .pipeline-header,
.jp-pipelines .jp-pipeline.last .pipeline-header{background-color: #f9f9f9; border-left-color: #f9f9f9; color: #039BE5}*/

.process-wrapper {
    border-left: 2px solid #e1e5eb
}
.process-wrapper .phase .phase .sub-phase {
    border-color: #e1e5eb
}

.sub-entries-container {
    padding-bottom: 15px;
    padding-left: 20px;
    padding-top: 15px;
    border-left: 1px solid #87a7c7;
    border-bottom: 1px solid #87a7c7;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-left: 2px;
}
.sub-entries-container.cancel {
    border-left: 2px solid #ff6b6b;
}
.sub-entries-container .sub-entry-line {
    position: absolute;
    left: -20px;
    top: 10px;
    width: 20px;
    height: 2px;
}
.sub-entries-container .sub-entry-line-end {
    position: absolute;
    left: -7px;
    top: 5px;
    width: 16px;
    height: 16px;
    border-radius: 20px;
    z-index: 2;
}
.sub-entries-container .sub-entry-line.cancel {
    background-color: #ff6b6b
}
.sub-entries-container .sub-entry-line-end.cancel {
    background-color: #ff6b6b
}

.sub-entries-container .sub-entry-line-end {
    background-size: 357px 356px;
    zoom: 0.8;
}
.sub-entries-container:hover .sub-entry-line-end,
.sub-entries-container .sub-entry-line-end:hover {
    background-image: url('/res/imgs/web_icons4.svg');
}

.sub-entries-container .sub-entry-line,
.sub-entries-container .sub-entry-line[type="default"],
.sub-entries-container .sub-entry-line-end,
.sub-entries-container .sub-entry-line-end[type="default"] {
    background-color: #95c0e0;
}

.sub-entries-container .sub-entry-line[type="AFTER_FINISH"],
.sub-entries-container .sub-entry-line-end[type="AFTER_FINISH"] {
    background-color: #6bc0ac;
    background-position: -123px -23px
}

.sub-entries-container .sub-entry-line[type="AFTER_START"],
.sub-entries-container .sub-entry-line-end[type="AFTER_START"] {
    background-color: #3997d3;
    background-position: -183px -22px
}

.sub-entries-container .sub-entry-line[type="AFTER_CANCEL"],
.sub-entries-container .sub-entry-line-end[type="AFTER_CANCEL"] {
    background-color: #8acfdf;
    background-position: -223px -23px
}

.sub-entries-container .sub-entry-line[type="AFTER_FAIL"],
.sub-entries-container .sub-entry-line-end[type="AFTER_FAIL"] {
    background-color: #e8453a;
    background-position: -283px -23px
}

.sub-entries-container .sub-entry-line[type="AFTER_HOLD"],
.sub-entries-container .sub-entry-line-end[type="AFTER_HOLD"] {
    background-color: #fccb71;
    background-position: -243px -23px
}

#jp-posting {
    border-radius: 25px;
    background-color: white;
    padding-top: 5px;
}
.posting .content {
    border-bottom: 0;
}
.posting .actions {
    border-left: 1px solid #e1e5eb
}
.posting .file-upload {
    border: 1px solid #e1e5eb;
    border-radius: 5px;
    width: auto;
    max-width: 240px;
}
.posting .file-upload .removable {
    position: absolute;
    display: block;
    top: calc(100% - 20px);
    left: calc(100% - 17px);
    font-size: 18px;
    cursor: pointer;
    padding: 5px;
    background-color: white;
    border-radius: 30px;
    border: 1px solid #e1e5eb;
    color: #e1e5eb;
    height: 30px;
    width: 30px;
}
.posting .file-upload .removable:hover {
    background-color: #3498db;
    border-color: transparent;
    color: white;
}
.posting .special-input {
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}
.posting .saving {
    font-size: 12pt;
    z-index: 9;
    position: absolute;
    left: 30px;
    top: 11px;
    color: #EC407A;
    background-color: white;
    border-radius: 30px;
    padding: 3px;
}
.posting .header {
    margin-left: 0px;
    width: 100%;
    height: auto;
    /*border-bottom: 1px solid #e1e5eb;*/
    padding-bottom: 5px;
}

.posting .posting-option {
    float: right;
    margin-top: -3px;
    margin-left: 10px;
    background-color: white;
    border-radius: 100%;
}
.posting .posting-option a {
    display: inline-block;
    color: #F06292;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 28px;
    border: 1px solid #e1e5eb;
    border-radius: 50px;
    font-size: 11pt;
}
.posting .posting-option a.clear-posting {
    color: #4DD0E1;
}

.posting .special-input, .posting .special-input:focus {
    border-bottom: 1px solid #e1e5eb;
}
.posting .special-input:focus {
    border-bottom: 1px solid #e1e5eb;
    /* border-radius: 10px; */
    margin-left: 10px;
    margin-right: 10px;
    width: calc(100% - 20px);
}
/*.posting .special-input:focus {background-color: #f9f9f9; border-radius: 5px; border-color: transparent}*/
.posting .bt-send-group {
    left: 1%;
}
.posting .bt-send {
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}
.posting .bt-send.disable:hover, .posting .bt-send.disable:focus, .posting .bt-send.disable {
    background-color: #e1e5eb;
}
/*.posting .user-allocation {margin-bottom: 20px;}*/
.posting .user-allocation .boxlist input[type="text"]{
    width: auto;
    min-width: 190px;
    display: inline-block;
    border-radius: 0px;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    text-align: center;
}
.posting .boxlist input[type="text"] {
    margin: 0px;
    text-align: center;
}
.posting .user-allocation .boxlist input[type="text"]:focus {
    border: 1px solid #5791ff;
    border-radius: 30px;
}
.posting .user-allocation .boxlist .val {
    border-color: #e1e5eb;
    background-color: white;
}

.posting .posting-datetime .glyphicon,
.posting .posting-datetime .fa, .posting
.posting-datetime .fas,
.posting .posting-datetime .far {
    margin-top: 0px;
}

.posting .access-details {
    display: block;
    opacity: 0;
    overflow: hidden;
    height: 0;
    width: 100%;
    padding: 0px 15px;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}
.posting .access-details.show {
    opacity: 1;
    height: auto;
    overflow: visible;
    padding: 10px 15px;
    padding-bottom: 0;
}

.markedJP {
    position: relative;
    display: inline-block;
    background-color: var(--btnHover);
    color: var(--btnHoverText);
    display: inline;
    padding: 4px 8px;
    border-radius: 24px;
    font-family: Montserrat-Regular;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.markedJP.iconable {
    padding-left: 25px;
}
.markedJP .btnUnmark {
    display: inline-block;
    margin-left: 5px;
    color: var(--textColorHelp);
    opacity: 0.7;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.markedJP:hover {
    box-shadow: 0px 0px 4px #555d6e4a;
}
.markedJP:hover .btnUnmark {
    opacity: 1;
    color: var(--btnRedColor);
}

.markedJP .custom-image {
    display: inline-block;
    position: absolute;
    width: 21px;
    height: 21px;
    left: 0px;
    top: 0px;
    border-radius: 30px;
    background-position: center;
    background-size: 100% auto;
}

.editableTag {
    display: inline-block;
    min-Width: 50px;
    border: 1px dotted #ddd;
    padding: 2px;
}
.autocomplete-menu .ui-autocomplete {
}

.editor-toolbar .button.small {
    padding: 4px 10px;
}

.editor-toolbar .toolbar-section {
    display: inline-block;
    padding-right: 15px;
}

#jp_posting_sel_wrapper .nav.nav-tabs {
    text-align: center;
}
#jp_posting_sel_wrapper .nav.nav-tabs>li a {
    padding: 8px;
    width: 36px;
    border-radius: 100%;
    /*    height: 36px;
        border-radius: 30px;*/
    margin-left: 10px;
    border: 1px solid #e1e5eb;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}
#jp_posting_sel_wrapper .tab-content {
    height: auto;
}
.nav-tabs>li>a,
.nav-tabs>li>a:focus,
.nav-tabs>li>a:hover {
    border-radius: 24px;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
    border-radius: 24px;
    background-color: var(--btnHover);
    color: var(--btnHoverText);
}

.nav.nav-tabs.style-jp {
    background-color: transparent;
}
/*.nav.nav-tabs.style-jp>li a {color: #2c3e50}
.nav.nav-tabs.style-jp .dropdown-menu li.active a:hover,
.nav.nav-tabs.style-jp .dropdown-menu>li a:hover {color: #2c3e50; background-color: #f9f9f9}*/

.info .pointflow-vl {
    border-color: #e1e5eb
}
.info .creator {
    border-color: #fafafa;
}
.info a:hover {
    color: #E91E63
}
.info .content-row.content-header {
    background-color: transparent;
    border-radius: 15px;
}
.info-options .dropdown-menu li.dropdown-header .glyphicon,
.info-options .dropdown-menu li.dropdown-header .fa,
.info-options .dropdown-menu li.dropdown-header .fas,
.info-options .dropdown-menu li.dropdown-header .far {
    padding-right: 8px;
}

.pointflow .info, .info-based.nav-wrapper,
.pointflow .info .page-content.padding,
.page-content.padding.nav-wrapper.info {
    border-radius: 15px;
}
.pointflow .info .page-content.padding {
    display: inline-block;
    position: relative;
    width: auto;
    margin-top: 0px; /*border-color: #cfcfe869;*/
    border-color: #aeaedc69;
    min-width: 250px;
    max-width: 100%;
}

.pointflow .info:not(.internal-info) .page-content.padding:not(.comment-container-content){
    border: 0;
    box-shadow: 1px 1px 3px #6565857d;
}



/*.pointflow .info {padding-bottom: 10px;}*/
.pointflow .info {
    padding-bottom: 20px;
}

.pointflow .info.internal-info {
    padding-bottom: 5px;
}

.pointflow .info.internal-info {
    opacity: 0.65;
}
.pointflow .info.internal-info .info-content .page-content{
    background-color: transparent;
    border: 0;
    margin-top: 0;
}
.pointflow .info.info-wrapper.internal-info .content-row.content-header + .content-wrapper {
    padding: 0;
    padding-bottom: 0;
    margin: 0;
    height: 0;
    min-height: 0;
}

.info .comment-controls span {
    color: #474f6b;
    font-size: 9pt;
}
.info .social-context {
    border-color: #e1e5eb;
    border: 0;
}
.pointflow .info>.row>.col-sm-11 {
    padding-left: 0;
    padding-right: 10px;
}

.info.info-wrapper .creater-image .simple-type {
    position: absolute;
    z-index: 3;
    right: 28px;
    bottom: 0;
    filter: drop-shadow(1px 1px 2px #b1b1cc88);
}
.info.info-wrapper .info-creation .simple-type .point-icon,
.info.info-wrapper .info-creation .simple-type .round-img,
.info.info-wrapper .info-creation .simple-type .icon,
.info.info-wrapper .info.comment .image-wrapper {
    float: left;
    margin-right: 15px !important;
}
.info.info-wrapper.side-info .info-creation {
    color: #8287a2
}
.info.info-wrapper .info-creation .simple-type .icon {
    line-height: 23px;
    width: 25px;
    height: 25px;
    text-align: center;
    color: #00ACC1;
    border: 1px solid #e1e5eb;
    padding: 1px;
    border-radius: 30px;
    font-size: 14px;
}
.info.info-wrapper .info-creation .desc {
    display: inline-block;
    width: 100%;
    position: relative;
    padding-left: 0px;
    padding-right: 25px;
}
.info.info-wrapper .info-creation .social-context {
    border: 0;
    display: inline-block;
    /*zoom: 0.8;*/
    margin: 0;
    padding: 0;
    /* margin-top: 2px; */
    margin-top: 1px;
    margin-left: 10px;
    float: right;
}
.info.info-wrapper .info-creation .social-context .task-status.rating.btn-group {
    top: 1px;
    margin-right: 10px;
    zoom: 0.8;
}
.info.info-wrapper .info-creation .social-context .comment-controls {
    position: relative;
    top: -1px;
    margin-right: 2px;
}
.info.info-wrapper .comment .info-creation .social-context {
    float: none;
}

.info.info-wrapper .content-row.content-header {
    border: 0;
    margin-bottom: 0;
    padding-bottom: 0px;
}
.info.info-wrapper .content-row.content-header + .content-wrapper {
    padding: 0px;
    padding-bottom: 5px;
}
.info .content-wrapper p.text-content, .info .content-wrapper div.text-content {
    margin-bottom: 0px;
}
/*.info .content-wrapper .task-status.btn-group {top: auto; left: auto; float: none; margin: auto; height: auto; display: inline-block}*/
.info .content-wrapper .task-status.btn-group {
    top: auto;
    left: 12px;
    float: none;
    margin: auto;
    height: auto;
    display: inline-block;
    position: absolute;
}
.info .content-wrapper .share-jp-head {
    line-height: 18px;
}
.info .content-wrapper .share-jp-head .jp-head-link-wrapper {
    margin-left: 35px;
    position: relative;
    top: -2px;
    max-width: calc(100% - 50px);
}
.info .content-wrapper .share-jp-head .working-users {
    display: inline-block;
    top: 2px;
    position: relative;
}
.info .content-wrapper .share-jp-head .working-users a {
    width: 24px;
    height: 24px;
    float: left;
    margin: -3px 2px !important;
}

.info .info-creation,
.info .info-creation a {
    font-style: normal;
    display: inline-block;
    width: auto;
}

.info .info-creation.mailing {
    width: calc(100% - 30px);
}

.info .user-rating-groups {
    margin-top: 0px;
}

.info .action-show-more {
    display: block;
    border-top: 1px solid #e1e5eb;
    padding-top: 5px;
    margin-top: 5px;
}
.info .action-show-more.hide {
    display: none;
}

.info .content-wrapper div.text-content,
.info .user-rating-groups,
.info .action-show-more,
.info .file-att,
.info-wrapper .mail-header {

}

.info .content-wrapper div.text-content {
    padding: 2px 0px;
}

.info-wrapper .mail-header {
    margin-top: 20px;
}

.info.info-wrapper .content-wrapper .content-c {
    padding-bottom: 5px;
}
.info.info-wrapper .content-wrapper.max .content-c {
    max-height: 280px;
    overflow: hidden;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}
.info.info-wrapper .content-wrapper.max.fullsize .content-c {
    max-height: none;
}

.info.info-wrapper .content-wrapper.max + .action-show-more .on-off {
    display: inline-block;
}
.info.info-wrapper .content-wrapper.max + .action-show-more .on-on {
    display: none;
}

.info.info-wrapper .content-wrapper.max.fullsize + .action-show-more .on-on {
    display: inline-block;
}
.info.info-wrapper .content-wrapper.max.fullsize + .action-show-more .on-off {
    display: none;
}

.pointflow .comment-wrapper,
.info .comment-container-content {
    border: 0;
}
.info.info-wrapper .info.comment .cm-b {
    width: 100%;
    display: inline-block;
    max-width: calc(100% - 80px);
}
.info.info-wrapper .info.comment .cm-b .cm-b-inner {
    border-radius: 25px;
    background-color: #d5c8de3b;
    padding: 7px 15px;
    display: inline-block;
    width: auto;
    position: relative;
}
.info.info-wrapper .info.comment .cm-b .comment-creator {
    margin-bottom: 5px;
    display: block;
    width: max-content;
}
.info.comment .info-creation .social-context {
    position: relative;
    top: 3px;
}
.info.comment  .info-options {
    right: -25px;
    top: 0px;
}
.info .info.comment .info-creation {
    width: max-content;
    padding-left: 15px;
}
.comment-wrapper .posting .bt-send-group{
    top: 6px;
}
.comment-wrapper .posting .social-inbox {
    width: 100%;
    border: 1px solid #eaeaea;
    border-radius: 25px;
    padding-left: 25px;
    max-width: 450px;
}
.comment-wrapper .posting .content {
    background-color: transparent;
}
.info .comment-container .user-rating-groups {
    margin-left: 0px;
}
.info.info-wrapper .info.comment .info-creation .social-context {
    margin-left: 0px;
}
.info.info-wrapper .info.comment .info-creation .social-context .task-status.rating.btn-group {
    float: left;
    margin-left: 0p;
    top: 0px;
}

/*.info .comment-container {padding-top: 10px;}*/

.pointflow .info .sub-info-wrapper {
    padding-left: 0px;
}
.pointflow .sub-info-wrapper .info .col-sm-1 {
    display: none;
}
.pointflow .sub-info-wrapper .info .col-sm-11 {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}
.pointflow .sub-info-wrapper .info {
    margin-bottom: 15px;
}
.pointflow .info .info-tags {
    display: inline-block;
    float: right;
    margin: 0px 8px;
}
.pointflow .info .info-tags .boxlist .val {
    font-size: 8pt;
    line-height: 18px;
    padding: 1px 6px 1px 6px;
}
.pointflow .info .info-tags .boxlist .val .closable {
    font-size: 11px;
    top: 4px;
}

.pointflow .info.selected .info-content>.page-content,
.pointflow .info.info-wrapper .info.comment.selected .cm-b .cm-b-inner {
    background-color: #fdf0d561
}


.info-wrapper .mail-header,
.info-based .mail-header,
.activity-item .mail-header {
    display: block;
    background-color: #c8c9ed1c;
    margin-bottom: 15px;
    margin-top: 15px;
    padding: 5px;
    border-bottom: 1px solid #eaeaea;
    border-radius: 5px;
    line-height: 17px;
}
.activity-item .mail-header {
    margin-top: 5px;
}

.info-wrapper .message-type {
    position: absolute;
    left: 27px;
    top: -1px;
    font-size: 12px;
}
.info-wrapper .message-type.type-in {
    color: #1bc989
}
.info-wrapper .message-type.type-out {
    color: #E91E63
}

.info-wrapper .mail-header .mail-header-info,
.info-based .mail-header .mail-header-info {
    color: #aaadc5
}

.info-wrapper .mail-header .col-xs-1,
.info-based .mail-header .col-xs-1 {
    min-width: 75px;
}
.info-wrapper .mail-header .row + .row,
.info-based .mail-header  .row + .row {
    margin-top: 2px;
}

.modal-dialog {
    /*    position: fixed;
        top: 0;
        margin: 0;
        right: 0;
        background: white;
        height: 100%;*/
    box-shadow: -14px 3px 30px #31313185;
    background-color: white;
}
/*.modal-dialog .modal-content {height: 100%; overflow-y: auto;}
.modal-footer {position: fixed; bottom: 0; left: 0; width: 100%; background-color: white; z-index: 99}*/
.modal-footer {
    text-align: center;
}
.modal-backdrop.in, .modal-backdrop {
    background-color: rgba(34, 35, 37, 0.56)
}
.modal-subinfo {
    padding-bottom: 3px;
    border-bottom: 1px solid #e1e5eb;
}

.modal-dialog.size-big {
    width: 60%
}
.modal-dialog.size-small {
    width: 250px;
}
.modal-dialog.size-medium {
    width: 400px;
}
.modal-dialog.size-full {
    width: calc(100% - 40px);
    height: auto;
    min-height: calc(100% - 40px);
    margin: 20px;
}
.modal-dialog.size-full.no-margin {
    width: 100%;
    height: 100%;
    margin: 0;
}

.modal-header-row {
    margin: 0;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    padding: 5px;
    background-color: #fafafa;
}

.modal .modal-header,
.modal-content,
.modal.in .modal-dialog{
    border-radius: 16px;
}

.modal.in .modal-dialog.modal-right {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}
.modal .modal-content {
    background-color: transparent;
}
.modal .modal-dialog {
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 70%, rgba(231,237,244,1) 100%);
}
.modal .modal-header {
    background-color: white;
}
.modal .modal-header h2 {
    margin-top: 12px;
}

.modal .modal-header.sticky-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 75%, rgba(255,255,255,0.3954175420168067) 100%);
}

.modal .modal-body.shadowEnd {
    padding: 35px;
    box-shadow: 0px 3px 3px #d8dee8ba;
    border-radius: 24px;
    background-color: white;
}

.modal .modal-dialog.colorShadow {
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 60%, rgb(47 74 121) 50%, rgb(95 170 185) 90%);
}

.modal .modal-dialog.colorShadow .modal-header {
    background-color: transparent;
    color: white;
}

.modal .modal-dialog.colorShadow .modal-header .button {
    background-color: #ffffffaa
}

.ajax-form .message-container {
    color: #333;
    margin: 0;
    padding: 0;
    position: relative;
    top: 0px;
    width: 400px;
    left: calc(50% - 200px);
}
.ajax-form .message-container[m-status=OK],
.ajax-form .message-container[m-status=FAIL] {
    color: white;
}
.feedback-message ul li {
    border-radius: 24px;
    box-shadow: 3px 4px 7px #aeb0c380;
}


#jp-list.jp-list-overview .jp-list-row .jp-title {
    width: 85%
}
.jp-list-overview.user-list .team-member {
    margin: auto !important
}


.chart-item-wrapper {
    background-color: #fafafa;
    margin: 15px;
    padding: 15px;
    text-align: center;
    float: left;
    width: auto;
}
.chart_item {
    position: relative;
}
.chart_item .percent {
    display: inline-block;
    top: 36%;
    position: absolute;
    left: 41%;
    font-size: 12pt;
}
.chart_item .counter {
    display: inline-block;
    padding: 2px 10px;
    background-color: #f6f6f6;
    border-radius: 20px;
    margin-top: 10px;
    text-align: center;
    position: absolute;
    top: 45px;
    left: 62%;
    font-size: 10pt;
    /*min-width: 40px;*/
}
.chart-group-analysis {
    min-width: 500px;
}
.chart_time_group {
    width: 500px;
}


/* 

-------- JP VERSION 9.2 Update --------

*/

.taskCount {
    display: inline-block;
    position: absolute;
    border-radius: 30px;
    width: 20px;
    height: 20px;
    font-size: 80%;
    line-height: 10px;
    text-align: center;
    right: 10px;
    top: 15px;
    padding: 5px;
    box-shadow: 0px 0px 3px #46464638;
    background-color: #2ecca0;
    color: white;
}
.taskCount.comments {
    background-color: #9f57fe !important;
}
/*.nav.nav-tabs .taskCount {position: relative; top: -2px; right: -5px; float: right;}*/
/*.nav.nav-tabs {background-color: transparent;}*/

.pipeline-content .taskCount {
    top: auto;
    left: auto;
    right: auto;
    position: relative;
}

a.disable-link {
    pointer-events: none;
    color: #D4D4D4;
}

body.flex {
    margin-bottom: 50px;
}

#jp-view,
/*body.flex {background-color: #fafafa;}*/

body.flex #jp-view {
    background-color: transparent;
}




.button.share-via-jp-connect-bt,
.jp-options .option.share-via-jp-connect-bt{
    background-color: #d0112c;
    color: white;
}
.button.share-via-jp-connect-bt:hover,
.jp-options  a.option.share-via-jp-connect-bt:hover {
    background-color: #f94861
}

#hw-line {
    display: none;
}
nav.navbar {
    padding-top: 0px;
}
.hw-container {
    top: auto;
}
#hw {
    background-color: #1e3d52;
}
#hw {
    /*box-shadow: 0px 0px 2px #abababab;*/
    z-index: 30;
}
/*#jp-view {background-color: #fafafa}*/

nav.navbar .navbar-brand, nav.navbar .navbar-header {
    background-color: white;

    /*                                                     border-bottom-right-radius: 3px;
                                                         border-bottom-left-radius: 3px;*/
}

.modal-backdrop.in, .modal-backdrop {
    backdrop-filter: saturate(180%) blur(2px);
}
.modal-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.46);
    z-index: 999999;
}
.modal-loading .loading-i {
    position: absolute;
    width: 100px;
    height: 100px;
    top: calc(25% - 50px);
    left: calc(50% - 50px);
}
.modal-header-style-2 {
    margin: 0px;
    padding: 5px;
    margin-bottom: 0px;
    background-color: #fafafa
}
/*#hw {
    box-shadow: 0px 1px 5px #909090;
    z-index: 30;
    background-color: #fafafa;
}
nav.navbar a {color: #333;}*/


nav.navbar .btn-group,
nav.navbar .btn-group a{
    font-family: 'Montserrat-Light';
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.32s ease-out;
    transition: all 0.2s ease-out;
}
nav.navbar .collapse.navbar-collapse .btn-group:hover,
nav.navbar .collapse.navbar-collapse .btn-group:focus,
nav.navbar .btn-group:hover {
    background-color: #555a7c5e;
    box-shadow: 0px 0px 3px #eaeaea;
}
nav.navbar .collapse.navbar-collapse .btn-group:hover a:not(.active),
nav.navbar .btn-group:hover a:not(.active) {
    color: white
}
nav.navbar .collapse.navbar-collapse .btn-group .dropdown-menu{
    display: block;
    float: none;
    height: auto;
    /* display: none; */
    opacity: 0;
    overflow: hidden;
    min-width: 300px;
    height: 0px;
    min-height: 0px;
    padding: 0px;
    /*top: 50px;*/
    border-radius: 5px;
    border-top-left-radius: 0;
    border-top-right-radius: 0px;

    border: 0px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
nav.navbar .collapse.navbar-collapse .btn-group:hover .dropdown-menu{
    opacity: 1;
    height: auto
}

nav.navbar .collapse.navbar-collapse .btn-group:hover .dropdown-menu a{
    color: white
}
nav.navbar .collapse.navbar-collapse .btn-group.active {
    background-color: #3c5269
}
nav.navbar .taskCount {
    position: relative;
    top: auto;
    left: 2px;
}

#overflow-wrapper .custom-tab.btn-group{
    float: none;
    width: 100%;
    height: auto;
}
#overflow-wrapper .custom-tab.btn-group a {
    width: 100%;
}
#overflow-wrapper .custom-tab.btn-group .dropdown-menu {
    position: relative;
    height: 0;
    opacity: 0;
}

#overflow-wrapper.btn-group:hover .dropdown-menu .custom-tab.hasSub,
#overflow-wrapper.btn-group:hover .dropdown-menu .custom-tab.hasSub>a {
    pointer-events: none;
    background-color: #43596f
}
#overflow-wrapper.btn-group:hover .dropdown-menu .custom-tab .dropdown-menu {
    pointer-events: all
}
#overflow-wrapper.btn-group:hover .dropdown-menu .custom-tab .dropdown-menu,
#overflow-wrapper.btn-group:hover .dropdown-menu .custom-tab.open .dropdown-menu {
    height: auto;
    opacity: 1;
    border-left: 10px solid #1f3042;
    box-shadow: none;
    border-radius: 0;
}


/*.jp-options a.option {color: #525558}*/
/*.jp-options a.option.active,
.jp-options a.option.favourite {color: white;}*/
.jp-options a.option {
    width: auto;
    padding: 0px 8px;
    border: 0;
}
.jp-options a.option:hover {
    background-color: var(--btnHover);
    color: var(--btnHoverText);
}

#jp-follow.active span {
    color: #ff9f43;
}

#jp-head-info {
    /*height: 50px;*/
    width: 100%;
    border-radius: 0; /*background-color: #d8e1ea29*/
    box-shadow: 0px 3px 20px 0px rgb(43 45 61 / 15%);
    position: relative;
    z-index: 33;
}
#jp-head-info .jp-options {
    height: 40px;
    line-height: 44px;
    background-color: transparent;
    font-size: 15px;
    padding: 0px 10px;
    float: right;
    /*position: absolute;*/
    /*    top: 0;
        right: 0;*/
}

#jp-title-setting-icon,
.jp-title-setting-icon{
    font-size: 14pt;
    float: right;
    display: inline-block;
    padding: 5px;
}

/*.mainframe-row .inner-main-row {height: calc(100% - 155px)}*/
#right-side-options .inner-side-options, #side-options-content .inner-side-options {
    height: 100%
}
#right-side-options-wrapper.open .jp-options {
    border: 0;
    height: 0;
}
#right-side-options .jp-options {
    height: 0;
}
#jp-view {
    height: calc(100% - 43px)
}
#jp-head-info .jp-head-info-wrapper {
    overflow: hidden;
}

.jp-head-info-wrapper .simple-header-title {
    display: inline-block;
    float: left;
    margin-left: 25px
}

#dynamic-table .table>tbody>tr>td,
#dynamic-table .table>tbody>tr>th,
#dynamic-table .table>tfoot>tr>td,
#dynamic-table .table>tfoot>tr>th,
#dynamic-table .table>thead>tr>td,
#dynamic-table .table>thead>tr>th {
    border-bottom: 0px;
    border: 1px solid #d6d6e242;
    position: relative;
    text-align: center;
    border-left: 0;
}

#dynamic-table .table>tbody>tr>td[align="0"],
#dynamic-table .table>tbody>tr>th[align="0"],
#dynamic-table .table>tfoot>tr>td[align="0"],
#dynamic-table .table>tfoot>tr>th[align="0"],
#dynamic-table .table>thead>tr>td[align="0"],
#dynamic-table .table>thead>tr>th[align="0"],
#dynamic-table td[align="0"] .process-phase,
#dynamic-table td[align="0"] .dateValue{
    text-align: center;
}

#dynamic-table .table>tbody>tr>td[align="-1"],
#dynamic-table .table>tbody>tr>th[align="-1"],
#dynamic-table .table>tfoot>tr>td[align="-1"],
#dynamic-table .table>tfoot>tr>th[align="-1"],
#dynamic-table .table>thead>tr>td[align="-1"],
#dynamic-table .table>thead>tr>th[align="-1"],
#dynamic-table td[align="-1"] .process-phase,
#dynamic-table td[align="-1"] .dateValue{
    text-align: left;
}

#dynamic-table .table>tbody>tr>td[align="1"],
#dynamic-table .table>tbody>tr>th[align="1"],
#dynamic-table .table>tfoot>tr>td[align="1"],
#dynamic-table .table>tfoot>tr>th[align="1"],
#dynamic-table .table>thead>tr>td[align="1"],
#dynamic-table .table>thead>tr>th[align="1"],
#dynamic-table td[align="1"] .process-phase,
#dynamic-table td[align="1"] .dateValue{
    text-align: right;
}

#dynamic-table .table tr h2 {
    margin: 0;
    padding: 0;
    line-height: 10px;
}

#dynamic-table .table>tbody>tr.draftMode>td,
#dynamic-table .table>tbody>tr[mode="new"].draftMode>td,
#dynamic-table .table>tbody>tr[mode="updated"].draftMode>td{
    opacity: 0.3;
    background-color: var(--textColorLight);
}

#dynamic-table .table>tbody>tr[mode="new"]>td{
    opacity: 0.3;
    background-color: #fccb701a;
}

#dynamic-table .table>tbody>tr[mode="updated"].draftMode>td,
#dynamic-table .table>tbody>tr[mode="updated"]>td{
    background-color: #3997d31a;
}

#dynamic-table .table>tbody>tr.last[mode="updated"].draftMode>td,
#dynamic-table .table>tbody>tr.last[mode="updated"]>td{
    background-color: #fffae3;
}

.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: white
}
.table-striped>tbody>tr {
    background-color: #beceea47
}

#dynamic-table .table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #f8f8f824
}
#dynamic-table .table-striped>tbody>tr {
    background-color: #a7b5da24
}

/*#jp-list .table tbody tr td { border-bottom: 1px solid #eaeaea}*/

#dynamic-table .edit {
    opacity: 0;
    margin-left: 5px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

#dynamic-table tr:hover .edit {
    opacity: 1;
}
#dynamic-table .table thead tr {
    background-color: white;
}
#dynamic-table .process-phase,
#dynamic-table .dateValue{
    position: absolute;
    width: calc(100%);
    height: calc(100% + 2px);
    line-height: 15px;
    top: 0px;
    left: 0px;
    padding: 8px;
    text-align: center;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 8.5pt;
    font-family: 'Montserrat-Regular';
}

#dynamic-table .dateValue,
#dynamic-table .dateValue[mode='default'] {
    color: #333;
    font-family: 'Montserrat-Light';
}
#dynamic-table .dateValue[mode='over'],
#dynamic-table .dateValue[mode='yesterday'],
#dynamic-table .dateValue[mode='over_today'],
#dynamic-table .dateValue[mode='today_warning'],
#dynamic-table .dateValue[mode='over_oneHour']{
    background-color: #e83c5b;
    color: white;
    font-family: 'Montserrat-Regular';
}
#dynamic-table .dateValue[mode='today_warning'] {
    background-color: #f39449;
}
#dynamic-table .dateValue[mode='over_today'] {
    background-color: #eb5d67;
}
#dynamic-table .dateValue[mode='over_oneHour'] {
    background-color: #ed6a82;
}
#dynamic-table .dateValue[mode='yesterday'] {
    background-color: #e94a5b;
}


#dynamic-table .dateValue[mode='today'] {
    background-color: #F8EFBA;
}

#dynamic-table .table>thead>tr>th {
    min-width: 150px;
    border: 0;
    border-right: 1px solid #799abd24;
    border-bottom: 1px solid #d0ddea85;
    background-color: #f4f5f791;
    /*border-bottom: 1px solid #799abd85;*/
}

#dynamic-table .table>thead>tr>th[size="1"] {
    min-width: 70px;
}
#dynamic-table .table>thead>tr>th[size="0"] {
    min-width: 25px;
}
#dynamic-table .table>thead>tr>th[size="0"] .in-table-action text {
    display: none;
}
#dynamic-table .table>td[size="0"]>.round-img.small {
    left: auto;
}
#dynamic-table .table>tr>td[size="0"] .value{
    display: none;
}
#dynamic-table .table>thead>tr>th[size="3"] {
    min-width: 300px;
}

#dynamic-table .table>thead>tr>th.medium {
    min-width: 100px;
}
#dynamic-table .table>thead>tr>th.big {
    min-width: 300px;
}

#dynamic-table .table>tbody>tr>td.text-left,
#dynamic-table .table>thead>tr>th.text-left {
    text-align: left;
}
#dynamic-table .table td[attr="title"] a.default{
    font-family: 'Montserrat-Regular';
}
#dynamic-table .table th {
    text-transform: none
}
/*#dynamic-table .table>tbody>tr>td, 
#dynamic-table .table>tbody>tr>th, 
#dynamic-table .table>tfoot>tr>td, 
#dynamic-table .table>tfoot>tr>th, 
#dynamic-table .table>thead>tr>td, 
#dynamic-table .table>thead>tr>th {border-bottom: 1px solid #e1e5eb;}*/

.bootstrap-datetimepicker-widget.dropdown-menu {
    width: 26em;
}
.bootstrap-datetimepicker-widget li.collapse {
    display: block;
    height: auto;
    padding-left: 0px;
}
.bootstrap-datetimepicker-widget .picker-switch.accordion-toggle {
    display: none;
}

.bootstrap-datetimepicker-widget table td span,
.bootstrap-datetimepicker-widget table td i,
.bootstrap-datetimepicker-widget table td {
    height: 30px;
    line-height: 30px;
}
.bootstrap-datetimepicker-widget .timepicker .table-condensed>tbody>tr>td {
    padding: 0;
}

#jp-list.jp-list-overview .jp-list-row a {
    width: auto;
    max-width: 100%;
}
.jp-list-overview .jp-list-row .jp-title {
    display: initial
}
#jp-list.jp-list-overview .jp-list-row .btn-group.absolute {
    left: -10px;
    position: absolute;
}

#jp-list {
    transition: margin 500ms ease-in-out;
}
#jp-list.openSideModal {
    margin-left: 45%;
}

/*.bootstrap-datetimepicker-widget li.collapse {width: 35%}
.bootstrap-datetimepicker-widget li.collapse.show {width: 65%}*/
/*.bootstrap-datetimepicker-widget li.collapse .datepicker {width: 65%;}
.bootstrap-datetimepicker-widget li.collapse .timepicker {width: 35%;}*/


.construction-element-draft {
    position: relative;
    float: left;
    margin: 10px;
    width: 300px;
    height: 300px;
    padding: 15px;
    border: 1px solid #eaeaea;
    border-radius: 5px;
    background-color: white;
}
.construction-kit-wrapper {
    width: 600px;
    margin: auto;
}
.construction-kit-next-wrapper {
    position: absolute;
    top: 2px;
    right: 15px;
}
.construction-element-draft.hidden {
    opacity: 0.6;
    display: inline-block !important;
}

#structure-group .dropdown-menu {
    padding: 0;
    padding-bottom: 15px;
}
#structure-group .dropdown-menu .no-f .team-member,
#jp-head-info #structure-group .dropdown-menu .team-member {
    float: left;
}


/*#jp-head-info .nav-page-content {position: absolute; width: 510px; left: calc(50% - 230px); border: 0;}*/
#jp-head-info .nav-page-content {
    display: inline-block;
    width: auto;
    float: right;
    position: absolute;
    right: 5px;
}

.jp-head-title {
    float: none;
    margin: 0;
    padding-left: 0;
    width: auto;
    display: inline-block;
    height: 50px;
}
.jp-head-title .root-group {
    display: inline-block;
    line-height: 30px;
    padding: 9px 0px;
}
.jp-head-title .root-group .button.small {
    margin: 0;
    padding: 0px 10px;
    padding-left: 0px;
    height: auto;
    line-height: 0px;
}
/*.jp-head-title .root-group .button.small:not(:hover) {
    background-color: transparent;
    border-color: transparent;
}*/

.jp-head-title .root-group .button.small .image-wrapper {
    top: 1px;
    position: relative
}

#jp-head-info .nav-page-content .nav.nav-tabs.style-jp>li {
    margin-left: 0px;
    margin-right: 5px;
}
#jp-head-info .jp-head-title .jp-options {
    padding: 0px;
    height: 41px;
    line-height: 40px; /* float: none; */
    display: inline-block;
}
#jp-head-info .jp-head-title .jp-options .option {
}
#jp-head-info .jp-head-title .jp-options.fav {
    float: none;
}

#jp-head-info.style-2 .task-status-wrapper {
    display: inline-block;
    float: right;
    height: 20px;
    padding-left: 5px;
}
#jp-head-info.style-2 .task-status.btn-group {
    top: 0px;
}

#current-jp-wrapper.fixed #jp-head-info{
    position: fixed;
    top: 0px;
    left: 60px;
    width: calc(100% - 60px);
    z-index: 99996;
    box-shadow: 0px 4px 7px #eaeaeaa1;
    border-radius: 0;
    background-color: #ffffffed;
}
#current-jp-wrapper.fixed .after-header-div,
#current-jp-wrapper.fixed .inner-main-row{
    margin-top: 44px;
}

#current-jp-wrapper.fixed .after-header-div + .inner-main-row {
    margin-top: 0;
}

#current-jp-wrapper.detail-view #jp-head-info .jp-options.fav {
    position: relative;
    display: inline-block;
    top: -2px;
    right: auto;
    vertical-align: middle;
}

#root-user-allocation {
    display: inline-block;
    float: right;
    position: relative;
    margin-top: 4px;
}

.mainframe-row .inner-main-row.size-2 {
    height: calc(100% - 100px);
}
.mainframe-row .inner-main-row.size-2 #jp-view {
    height: calc(100% - 5px);
}

/*.nav-control-taps:hover .jp-tabs.nav.nav-tabs.btn-style>li>a {
    padding: 10px 15px;
}*/

.jp-tabs.nav.nav-tabs.btn-style>li>a {
    padding: 4px 15px;
    border-radius: 31px;
    background-color: var(--btnBColor);
    color: var(--textColor);
    border: 1px solid transparent;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    font-family: 'Montserrat-Regular';
    font-weight: normal;
}
/*.jp-tabs.nav.nav-tabs.btn-style>li:hover>a,
.jp-tabs.nav.nav-tabs.btn-style>li>a:hover {background-color: #5e6b8a24; border-color: #5e6b8a24}*/

/*.jp-tabs.nav.nav-tabs.btn-style li.active a {background-color: #5e6b8a; border-color: #5e6b8a; color: white;}*/
.jp-tabs.nav.nav-tabs.btn-style .dropdown-menu li.active a {
    background-color: white;
    border: none;
    color: #333
}
/*.jp-tabs.nav.nav-tabs.btn-style .dropdown-menu li a {background-color: white; border: none; color: #333; border-radius: 0;}*/
.nav.nav-tabs.style-jp.btn-style {
    margin-top: 2px;
}

.jp-tabs.nav.nav-tabs.btn-style li a .glyphicon,
.jp-tabs.nav.nav-tabs.btn-style li a .fas,
.jp-tabs.nav.nav-tabs.btn-style li a .fa,
.jp-tabs.nav.nav-tabs.btn-style li a .far {
    padding-right: 2px;
}

.grid-container-entry {
    background-color: #ffffffdd;
    border-radius: 24px;
    box-shadow: 0px 3px 20px 0px rgb(43 45 61 / 15%);
    margin: 15px;
    padding: 20px;
}

.pipeline-detail {
    width: 100%;
    display: table;
    border-collapse: collapse;
    table-layout: fixed;
    margin-bottom: 0;
}

.pipeline-detail li:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.pipeline-detail li:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.pipeline-detail li {
    position: relative;
    display: table-cell;
    background-color: #f9fafb;
    text-align: center;
    padding: 3px;
    font-size: 11px;
    height: 19px;
    line-height: 13px;
    font-family: 'Montserrat-Light';
    overflow: hidden;
}
.pipeline-detail li[status="work_in_progress"] {
    background-color: #d5e7fe;
    font-family: 'Montserrat-Regular';
}
.pipeline-detail li[status="done"] {
    background-color: #d5f4ec;
}
.pipeline-detail li[status="void"] {
    background-color: #ff7675;
}
.pipeline-detail li[status="done"] + li[status="work_in_progress"] .arrow-right:after,
.pipeline-detail li[status="done"] + li[status="void"] .arrow-right:after,
.pipeline-detail li[status="done"] + li[status="defined"] .arrow-right:after {
    /*opacity: 0.55;*/
}


.pipeline-detail li[status="done"] + li[status="defined"] .arrow-right:after {
    /*opacity: 0.55;*/
}

.pipeline-detail li[status="void"] a,
.pipeline-detail li[status="work_in_progress"] a,
.pipeline-detail li[status="done"] a
{
    color: white;
}

.pipeline-detail li[status="work_in_progress"] a {
    color: var(--btnHoverText);
}

.pipeline-detail li[status="done"] a {
    color: #008d65;
}

.pipeline-detail li a:hover {
    color: var(--btnHoverText)
}

.pipeline-detail li a {
    width: 100%;
    display: block;
    color: #575b78;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pipeline-detail .btn-group li a {
    height: auto;
    line-height: auto;
}

.pipeline-detail li .task-status {
    height: 20px;
    margin-top: -5px;
}
.pipeline-detail li .task-status li {
    background-color: white;
}
.pipeline-detail li .task-status.btn-group .dropdown-menu.task-status-options {
    border-color: transparent;
    box-shadow: none;
}
.pipeline-detail li .task-status.btn-group .dropdown-menu.task-status-options li.dropdown-header a:hover {
    transform: scale(1.2);
    top: 0px;
}
.pipeline-detail li .task-status.open {
    position: initial
}
.pipeline-detail li .task-status.open .dropdown-menu {
    width: 90%;
    left: 8%;
    text-align: center;
}
.pipeline-detail li .task-status.btn-group .dropdown-menu.task-status-options li.dropdown-header {
    float: none;
    display: inline-block
}

.pipeline-detail .arrow-right {
    z-index: auto;
    position: absolute;
    top: 1px;
    left: -6px;
    background-color: white;
    border: solid white;
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 9px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.pipeline-detail .arrow-right:after {
    z-index: auto;
    width: 18px;
    height: 18px;
    position: absolute;
    left: -2px;
    top: -2px;
    content: " ";
    cursor: pointer;
    background: #f9fafb;
}

.pipeline-detail li[status="done"] + li .arrow-right:after {
    background: #d5f4ec;
}
.pipeline-detail li[status="work_in_progress"] + li .arrow-right:after {
    background: #d5e7fe;
}
.pipeline-detail li[status="void"] + li .arrow-right:after {
    background: #ff7675;
}

#side-options-content .info-details.style-2 .infobox.boxing,
#side-options-content .info-details.style-2 .infobox.boxing {
    padding: 0px;
    border: 0;
    background-color: white;
    border-radius: 15px;
}
#side-options-content .info-details.style-2 .infobox.boxing .infobox-header {
    background-color: transparent;
    border-bottom: 1px solid #dfdfec;
    border-radius: 0;
    height: 31px;
    line-height: 29px;
    padding-left: 19px;
}
#side-options-content .info-details.style-2 .infobox.boxing .infobox-header,
#side-options-content .info-details.style-2 .infobox.boxing .infobox-header a {
    color: #1e3d52;
    border-radius: 0px;
}

#side-options-content .info-details.style-2 label.attribute-label {
    margin-bottom: 0px;
    line-height: 20px;
    display: inline-block;
    width: auto;
}
#side-options-content .info-details.style-2.form-rows .row {
    margin-bottom: 0px;
}
#side-options-content .boxlist {
    margin: 0;
}
#side-options-content .boxlist input[type="text"] {
    margin-top: 0px;
}

#side-options-content .infobox-header .edit,
#side-options-content .info-details.style-2 .infobox.boxing .infobox-header a.edit {
    color: #4a7eab;
    margin-left: 5px;
}

#side-options-content .info-details.style-2.form-rows .row a.edit {
    margin-left: 5px;
    color: #4a7eab;
    opacity: 0.4;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
#side-options-content .info-details.style-2.form-rows .row a.edit.edit-attribute {
    position: absolute;
    right: 2px;
    top: 3px;
    opacity: 0.15;
}
#side-options-content .info-details.style-2.form-rows .row:hover a.edit {
    opacity: 1;
}

#side-options-content .info-details.style-2.form-rows .row .col-sm-5 {
    padding-right: 0px;
}
#side-options-content .info-details.style-2.form-rows .row .col-sm-7,
#side-options-content .info-details.style-2.form-rows .row .col-sm-4,
#side-options-content .info-details.style-2.form-rows .row .col-sm-5,
#side-options-content .info-details.style-2.form-rows .row .col-sm-6{
    padding-left: 5px;
}

#detail-nav .nav-go-back {
    position: absolute;
    top: 0px;
    left: 10px;
    display: inline-block;
    width: auto;
}
#detail-nav .nav-control-taps {
    display: inline-block;
}
#detail-nav .nav-process {
    float: right;
    position: absolute;
    right: 10px;
    top: 0;
}
#detail-nav .nav-process a {
    display: inline-block;
    float: right;
    margin-top: 6px;
    margin-right: 10px;
    line-height: 18px;
}

#jp_coll_new {
    width: auto;
    margin: 0;
    top: -3px;
}
#jp_coll_new a.button {
    width: auto;
    font-size: 14px;
    padding: 9px 15px;
    margin: 5px;
    /* padding-left: 5px; */
    background-color: white;
    color: var(--textColor);
    border-color: white;
    box-shadow: 1px 1px 4px #5a5970a1;
    font-family: 'Montserrat-Regular';
}
#jp_coll_new a.button:hover {
    border-color: var(--btnHoverBorder);
    color: var(--btnHoverText);
    background-color: var(--btnHover);
}
#btn-new-task-wrapper {
    margin-bottom: 10px;
    line-height: 35px;
    height: 40px;
    border-bottom: 1px solid #eaeaea;
}
#btn-new-task-wrapper .button {
    font-size: 10pt;
    padding: 2px 12px 2px 12px;
}

#side-options-content .blank_value,
#right-side-options-wrapper .blank_value {
    line-height: 25px;
    padding: 1px 2px;
}

#side-options-content .blank_value .rel-image,
#right-side-options-wrapper .blank_value .rel-image {
    width: 22px;
    height: 22px;
    float: left;
    margin-right: 5px;
    border-radius: 30px;
    background-position: center;
    background-size: auto 100%;
}

/*
================================================================================
simple jp view dialog
================================================================================
*/

#modal-simple-jp-view .modal-body {
    padding: 0;
}
/*#modal-simple-jp-view #jp-posting {
    width: 100%; max-width: 100%;
    border-radius: 0;
    margin-bottom: 5px;
    border-bottom: 0;
    border-right: 0;
    border-left: 0;
    padding: 0;
}
#modal-simple-jp-view #jp-posting.posting .header {
    height: 0px;
    padding: 0;
    border: 0;
    position: absolute;
}
#modal-simple-jp-view #jp-posting.posting .actions,
#modal-simple-jp-view #jp-posting.posting .text {display: none;}
#modal-simple-jp-view #jp-posting.posting .bt-send-group {
    position: absolute;
    top: 10px;
    left: 2%;
}
#modal-simple-jp-view #jp-posting.posting .posting-option {
    margin-top: 12px;
    position: absolute;
    right: 5px;
    bottom: -30px;
    float: none;
    z-index: 2;
}
#modal-simple-jp-view #jp-posting.posting .posting-option + .posting-option {
    bottom: -65px;
}
#modal-simple-jp-view #jp-posting .social-inbox {
    width: calc(80% - 40px);
    position: relative;
    right: 0px;
    margin-left: 40px;
    max-height: 250px;
    overflow-x: hidden;
    overflow-y: auto;
}
#modal-simple-jp-view #jp-posting .social-textarea {zoom: 1.05;}
#modal-simple-jp-view #jp-posting .boxlist.tags {
    right: 8px;
    position: fixed;
    bottom: 5px;
    z-index: 333;
}

#modal-simple-jp-view #jp-posting .boxlist.tags .val {
    box-shadow: 0px 0px 8px #6e7798;
}
#modal-simple-jp-view #jp-posting .bt-send-group .dropdown-menu {
    top: auto;
    bottom: 101%;
}
#modal-simple-jp-view #jp-posting .bt-send-group .dropdown-menu:before,
#modal-simple-jp-view #jp-posting .bt-send-group .dropdown-menu:after {content: ''; width: 0; border: 0; height: 0;}*/

#modal-simple-jp-view .select-group {
    margin-left: 40px;
}
#modal-simple-jp-view .simpleType-selector {
    display: none;
}
#modal-simple-jp-view #jp-posting.posting .bt-send-group {
    margin-right: 15px;
}

#modal-simple-jp-view .posting-wrapper {
    padding: 10px;
}
#modal-simple-jp-view #jp-posting {
    box-shadow: 0px 0px 8px #eaeaea;
}
#modal-simple-jp-view .posting .content {
    border-top: 0px;
}
#modal-simple-jp-view .pointflow {
    padding: 5px 10px;
}
#modal-simple-jp-view .pointflow .time-mark {
    max-width: 100%;
    width: 100%;
}
#modal-simple-jp-view .pointflow .info .pointflow-vl {
    display: none;
}
#modal-simple-jp-view .pointflow .info .row {
    margin-bottom: 0px;
}
#modal-simple-jp-view .pointflow .info .row>.col-sm-1,
#modal-simple-jp-view  .info-based.info .row>.col-sm-1 {
    min-width: 80px
}
#modal-simple-jp-view .pointflow .info .row>.col-sm-11,
#modal-simple-jp-view .info-based.info .row>.col-sm-11{
    max-width: 85%
}
/*#modal-simple-jp-view .posting-wrapper {
    position: fixed;
    z-index: 99;
    width: 600px;
    bottom: 0;
    box-shadow: 3px -3px 8px #eaeaea;
}*/
#modal-simple-jp-view .modal-pointflow-wrapper.element-content .info.info-wrapper .info-creation .social-context {
    display: inline-block;
}
#modal-simple-jp-view .relation-info{
    display: inline-block;
    line-height: 24px;
    margin-top: 5px;
}
#modal-simple-jp-view .relation-info .point-icon,
#modal-simple-jp-view .relation-info .round-img {
    float: left;
    margin-right: 5px !important;
}

.modal-side-info,
.modal-side-info:hover,
.modal-side-info:focus {
    outline: none;
    border: 0;
}

.modal-side-info {
    position: fixed;
    width: 700px;
    height: calc(100%);
    top: 0px;
    right: -100%;
    z-index: 999997;
    box-shadow: 0px 2px 10px #959db5c4;
    /*border-left: 1px solid #eaeaea !important;*/
    background-color: white;

    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.5s ease-out;
    opacity: 0;
}
.modal-side-info.right {
    right: auto;
    left: -100%;
}

.modal-side-info.show {
    opacity: 1;
    right: 0;
    border-bottom-left-radius: 24px;
    border-top-left-radius: 24px;
}
.modal-side-info.right.show {
    right: auto;
    left: 0;
}
.modal-side-info.full.show {
    width: 100%;
    z-index: 99999999;
    background-color: #272c3cc9
}
.modal-side-info.full .side-info-inner {
    margin: 5px;
    margin-bottom: 0;
    box-shadow: 3px 3px 30px #31313185;
    border-radius: 24px
}


/*
================================================================================
jp-popover-info
================================================================================
*/

.popover.jp-popup-info {
    border-radius: 20px;
    border-color: #d5d5f1;
    background: none;
    background-color: white;
    padding: 5px;
    width: 350px;
    max-width: none;
    z-index: 999999999 !important;
    /*    -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;*/
}
.popover.jp-popup-info.top>.arrow {
    border-top-color: #d5d5f1;
}
.popover.jp-popup-info.top>.arrow:after {
    border-top-color: white;
}
.popover.jp-popup-info.right>.arrow {
    border-right-color: #d5d5f1
}
.popover.jp-popup-info.right>.arrow:after {
    border-right-color: white;
}
.popover.jp-popup-info.left>.arrow {
    border-left-color: #d5d5f1
}
.popover.jp-popup-info.left>.arrow:after {
    border-left-color: white;
}

.popover.jp-popup-info .popover-content {
    color: #252525;
    padding: 5px;
}

.popover.jp-popup-info .action_phoneCall {
    background-color: #00b894;
}
.popover.jp-popup-info .action_web {
    background-color: #e84393;
}
.popover.jp-popup-info .action_email {
    background-color: #098ddf;
}
.popover.jp-popup-info .action_share {
    background-color: #aa7ee4;
}
.popover.jp-popup-info .action_share:hover {
    background-color: #8953d0;
}
.popover.jp-popup-info .action {
    display: inline-block;
    padding: 4px;
    border-radius: 100%;
    font-size: 9px;
    color: white;
    width: 20px !important;
    height: 20px !important;
    line-height: 14px !important;
    text-align: center;
    z-index: 5;
    position: relative;
    top: -2px;
    float: right;
    margin-right: 5px;
}

.popover.jp-popup-info.send-email-open {
    position: fixed;
    top: 30px !important;
    left: auto !important;
    right: 2% !important;
    width: 27%;
    max-width: 350px;
}
.popover.jp-popup-info.send-email-open .arrow {
    display: none;
}

.popover.tour .popover-header {
    text-align: center;
    font-family: 'Montserrat-Regular';
    font-size: 12pt;
}

.popover.tour .popover-navigation {
    text-align: center;
}

.popover.tour button.button,
.popover.tour[class*="tour-"] .popover-navigation *[data-role="end"]{
    margin: 0;
    float: none;
}

.btn-popover.mobile-in {
    display: none !important;
}

.timeline-filters {
    /*padding: 2px 10px;*/
    margin-bottom: 0px;
    /*padding-right: 5px;*/
    /*background-color: #e1e2ea40;*/
    border-radius: 25px;
    line-height: 20px;
    overflow: visible;
}

.timeline-filters .timeline-filter {
    display: inline-block;
    width: 30px;
    margin-top: 8px;
    float: left;
}

.timeline-filter-checkbox {
    display: block;
    min-width: 120px
}

.timeline-filter-checkbox input + label.button.small {
    opacity: 0.5;
    margin-right: 4px;
    margin-left: 0;
    line-height: 15px;
    padding: 4px 7px;
    border: 1px solid transparent;
    font-weight: normal;
    font-size: 8pt;
}
.timeline-filter-checkbox input:checked + label.button.small {
    opacity: 1;
    background-color: #ffffffad;
    font-family: 'Montserrat-Regular';
    color: #1e1e1e;
}

.timeline-filter-checkbox input + label.button.small:hover {
    background-color: white;
    cursor: pointer;
    border-color: #eaeaea;
}

.timeline-filters {
    position: relative;
}
.timeline-filters #timeline-search-input {
    width: 0;
    opacity: 0;
    /* height: 0; */
    position: absolute;
    top: 1px;
    right: 0;
    z-index: 2;

}
.timeline-filters #timeline-search-input:focus {
    width: 100%;
    opacity: 1;
    background-color: white;
}

.dialog-info-out-of-coins .coins-wrapper{
    padding: 3px 0px;
}

.dialog-info-out-of-coins .coins-wrapper span{
    display: inline-block;
    border-radius: 24px;
    padding: 3px 12px;
    color: var(--btnHoverText);
    background-color: #eaeaea99;
}

#top-system-info {
    position: relative;
    z-index: 9;
    box-shadow: 0px 0px 8px #acb2bf78;
    background-color: #fde8ec;
    width: 100%;
    height: 68px;
    border-bottom: 1px solid #eb2e05
}

/*
================================================================================
Darkmode
================================================================================
*/
body.darkmode #jp-view,
body.flex.darkmoe {
    background-color: #000;
}
body.darkmode #jp-view,
body.darkmode .modal-content {
    background-color: #252525
}

body.darkmode a {
    color: #eaeaea
}
body.darkmode a:focus,
body.darkmode a:hover {
    color: #7399de
}

body.darkmode .button {
    background-color: #4c4c4c;
    color: white;
    border-color: #797979;
}
body.darkmode button:hover,
body.darkmode button:focus,
body.darkmode button.button:hover,
body.dakrmode button.button:focus {
    background-color: #616161;
    border-color: #a8a9ab;
}

body.darkmode .option-group .option input + label {
    background-color: #4a4a4a;
    border-color: #a8a9ab
}

body.darkmode .page-content,
body.darkmode .hw-container>.page-content,
body.darkmode #jp-list .table thead,
body.darkmode .jp-pipelines .jp-pipeline .pipeline-segment .segment-info,
body.darkmode .page-content.padding.nav-wrapper.info.jp-info-based {
    border-color: #5b5f63;
}

body.darkmode .modal .modal-header,
body.darkmode .modal-header-style-2 {
    background-color: #323335;
    color: white;
}
body.darkmdoe .team-member {
    border-color: #5d5d5d;
}

body.darkmode,
body.darkmode a.default {
    color: #eaeaea;
}
body.darkmode a.default {
    color: #eaeaea !important;
}
body.darkmode .seperation-line {
    border-color: #484343;
}

body.darkmode .round-img.small,
body.darkmode .user-img {
    background-color: #3b3f46;
}

body.darkmode .ui-autocomplete .ui-menu-item a {
    color: white;
}

body.darkmode .dropdown-menu>li>a>.glyphicon,
body.darkmode .dropdown-menu>li>a>.fas,
body.darkmode .dropdown-menu>li>a>.fa,
body.darkmode .dropdown-menu>li>a>.far {
    background-color: #3b3f46;
    color: #929292;
}
body.darkmode .ui-autocomplete li.ui-state-hover,
body.darkmode .ui-autocomplete li.ui-state-hover a,
body.darkmode .ui-autocomplete li.ui-state-focus,
body.darkmode .ui-autocomplete li.ui-state-focus a,
body.darkmode #global-search a:hover,
body.darkmode #global-search .ui-menu-item.ui-state-focus a {
    background-color: #52565f
}

body.darkmode nav.navbar .btn-group.open,
body.darkmode nav.navbar .btn-group.open a,
body.darkmode nav.navbar .btn-group .dropdown-menu {
    background-color: #2b2a2a;
    color: white;
    border-color: #4c4444;
}

body.darkmode #inner-main-container,
body.bimage.darkmode #inner-main-container {
    background-color: #252525;
    color: #eaeaea;
}
body.darkmode #left-menu,
body.darkmode .menu-elm,
body.darkmode .nav.nav-tabs,
body.darkmode .seperation-line.menu-section {
    border-color: #404040;
}
body.darkmode a.menu-elm, body.darkmode .menu-elm {
    color: #f7f7f7
}
body.darkmode .menu-elm.active {
    background-color: #404040
}
body.darkmode input,
body.darkmode select,
body.darkmode textarea,
body.darkmode #global-search-input {
    background-color: #505050;
    border-color: #404040;
    color: white;
}
body.darkmode .onoffswitch-label,
body.darkmode .jp-form-style label.onoffswitch-label,
body.darkmode #side-options-content .jp-form-style label.onoffswitch-label {
    background-color: #505050;
    border-color: #707275;
    color: white;
}
body.darkmode .jp-form-style .onoffswitch-checkbox:checked+.onoffswitch-label {
    background-color: #313131;
}
body.darkmode .onoffswitch-label:before {
    background-color: #505050
}
body.darkmode .boxlist.user-allocation input[type="text"],
body.darkmode .boxlist.tags input[type="text"] {
    background-color: #505050;
    color: white;
}
body.darkmode .boxlist .boxlist-text-wrapper .in-text {
    color: white;
}

body.darkmode #global-search a {
    background-color: #3b3f46;
}
body.darkmode #global-search .ui-autocomplete {
    border-color: #4c4444;
}
body.darkmode #global-search .ui-autocomplete li a {
    border-color: #646c73;
    color: white;
}
body.darkmode #global-search .ui-autocomplete li a .short-info {
    color: #ffffffaa;
}
body.darkmode #global-search .ui-menu-item:hover,
body.darkmode #global-search .ui-menu-item.ui-state-focus {
    background-color: #2b2a2a;
}

body.darkmode .empty-list-img-wrapper {
    background-color: #505050;
}
body.darkmode .color-box,
body.darkmode .info-value-group {
    background-color: #4f515299;
}
body.darkmode .jp-list-row + .jp-list-row {
    border-color: #656565;
}
body.darkmode .color-box-title {
    color: #adadad
}
body.darkmode .dropdown-menu,
body.darkmode .editable.info-value-wrapper .btn-group.select-group .dropdown-menu {
    background-color: #2b2b2b;
}
body.darkmode .jp-tabs.nav.nav-tabs.btn-style li a {
    background-color: #505050;
    border-color: #404040;
    color: white;
}
body.darkmode .nav-tabs.style-jp>li>a:hover,
body.darkmode .nav-tabs.style-jp>li.active>a,
body.darkmode .nav-tabs.style-jp>li.active>a:focus,
body.darkmode .nav-tabs.style-jp>li.active>a:hover,
body.darkmode .nav-tabs.style-jp>li.open>a,
body.darkmode .nav-tabs.style-jp>li a + li.active,
body.darkmode .jp-tabs.nav.nav-tabs.btn-style li.active a {
    background-color: #3498db;
    border-color: #3195d3;
}
body.darkmode #side-options-content .info-details.style-2 .infobox.boxing,
body.darkmode .infobox ul{
    background-color: #4f515299;
}
body.darkmode .form-rows .row.info-detail-row label {
    color: white;
}
body.darkmode .rel-box .rel-value {
    background-color: #2b2b2b;
    border-color: #656565;
}
body.darkmode #jp-posting {
    background-color: #4f515299
}

body.darkmode .info .creator {
    border-color: #252525
}
body.darkmode .pointflow .info .time {
    background-color: #252525;
}
body.darkmode .info .pointflow-vl,
body.darkmode .info.info-wrapper .content-row.content-header + .content-wrapper {
    border-color: #656565
}
body.darkmode .page-content,
body.darkmode .info .content-row.content-header,
body.darkmode .pointflow .info.unread .page-content {
    background-color: #2f2f2f;
}
body.darkmode .info a {
    color: #72bcec
}
body.darkmode .pointflow .info .page-content {
    border: 0px;
}
body.darkmode .posting .content {
    background-color: #4c4c4c
}
body.darkmode .pointflow .time-mark {
    background-color: #3131317d;
}
body.darkmode .info .comment-controls span {
    color: #a4a9bbbf;
}

body.darkmode .social-inbox .input,
body.darkmode .social-inbox .input:focus {
    color: white;
}
body.darkmode .posting .bt-send.disable:hover,
body.darkmode .posting .bt-send.disable:focus,
body.darkmode .posting .bt-send.disable,
body.darkmode .posting .saving,
body.darkmode .posting .posting-option,
body.darkmode .posting .file-upload .removable {
    background-color: #4c4c4c
}
body.darkmode .posting .posting-option,
body.darkmode .posting .file-upload {
    border-color: #656565
}
body.darkmode .info .user-rating-groups .user-rating-group {
    border-color: #656565
}
body.darkmode .ui-autocomplete {
    background-color: #191919
}
body.darkmode .seperation-line.menu-section {
    background-color: #636363;
}
body.darkmode .element.linked-jp {
    background-color: #3d8fbf;
}

@media(max-width: 767px) {

    body.darkmode #jp-posting {
        background-color: #4f5152
    }

}



@media(max-width: 1700px) {

    .mainframe-row .inner-main-row.size-2 {
        height: calc(100% - 92px);
    }

    /*    .jp-form-style input, 
        .jp-form-style select, 
        .jp-form-style .checkbox + label>span, 
        .jp-form-style textarea,
        .jp-form-style .boxlist.asForm input, .jp-form-style .boxlist.asFormStyle input {font-size: 12px;}*/

    #jp-list.jp-list-overview .jp-list-row .jp-title {
        width: 82%
    }

    .jp-options a.option {
        line-height: 34px;
        margin-top: 3px;
        margin-right: 0px;
    }

    /*    .boxlist input[type="text"] {
            font-size: 10px;
            padding: 6px;
        }*/

    #jp_posting_sel_wrapper .nav.nav-tabs>li a {
        margin-left: 5px;
    }

    .construction-element-draft {
        width: 250px;
        height: 250px;
        padding: 10px;
    }

    /*    #jp-head-info {
            height: 44px;
        }*/
    /*#jp-head-info .nav-page-content {width: auto; left: calc(50% - 200px);}*/
}

@media(max-width: 1200px) {
    .modal-dialog.size-big {
        width: 80%
    }

    #right-side-options-wrapper.open .jp-options {
        height: 45px;
        border: 1px solid #e1e5eb;
    }


    /*#jp-head-info .nav-page-content {width: auto; display: inline-block; float: left; margin-left: 15px; border: 0;}*/
    .jp-tabs.nav.nav-tabs.btn-style li a .mobile-hidden {
        display: none;
    }
    /*#jp-head-info .nav-page-content {width: 235px; position: relative; float: left; left: auto;}*/
    .nav.nav-tabs.style-jp.btn-style {
        margin-top: 2px;
    }
}

@media(max-width: 1024px) {

    #jp-setting-view {
        width: 100%
    }
    ;
    /*.construction-element-draft {margin: 5px;}*/
    /*.jp-list-overview .jp-list-row .edit {left: 5px; position: absolute;}*/
}

.tablet-in,
.tablet-in-inlineb {
    display: none !important;
}

@media(max-width: 1000px) {

    nav.navbar .navbar-header {
        background-color: transparent;
    }

    .tablet-in {
        display: block !important;
    }
    .tablet-in-inlineb {
        display: inline-block !important;
    }

    .jp-options,
    #detail-nav .nav-process,
    #jp_coll_new,
    #detail-nav .nav-go-back,
    #btn-new-task-wrapper,
    #create-new-task-btn,
    #jp-head-info .time-tracking {
        display: none !important;
    }

    #nav-main-menu {
        padding-bottom: 50px;
    }

    #jp-head-info .jp-head-info-wrapper {
        padding-bottom: 5px;
    }


    /*    #jp-head-info .nav-page-content {
            position: fixed;
            top: auto;
            bottom: 10px;
            z-index: 9999999;
            margin: 0;
            left: 15%;
        }*/
    #jp-head-info .nav-page-content .dropdown-menu {
        top: auto;
        bottom: 100%;
    }
    #jp-head-info .nav-page-content .nav.nav-tabs>li a {
        font-size: 12pt;
    }
    /*    .jp-head-title {
            max-width: 50%
        }*/

    .nav.nav-tabs.style-jp.btn-style {
        margin-top: 0px;
        padding-top: 0;
    }
    /*    .nav-control-taps {
            float: right;
        }*/

    #side-options-content .info-details.style-2.form-rows .row .col-sm-7 {
        padding-left: 15px;
    }

    .modal-side-info {
        z-index: 9999997;
        width: 100%;
    }
    .modal-side-info.show {
        padding-left: 75px;
    }

    .modal-side-info.full.show {
        padding-left: 10%;
    }

    #group-task-relevance-filters,
    .task-grouping-filters {
        overflow-y: auto;
    }
    .group-task-relevance-filters-inner {
        width: 980px; /*line-height: 55px;*/
    }
    .task-grouping-filters-inner {
        display: block;
        height: 30px;
        width: max-content;
        overflow-y: auto;
        max-height: 40px;
    }
    .task-grouping-filters .option input + label {
        font-size: 10pt
    }
    .task-grouping-filters .option-group.small .option input + label .round-img,
    .task-grouping-filters .option-group.small .option input + label .point-icon {
        zoom: 1.2;
        top: -4px;
        left: -5px;
    }
    .task-grouping-filters .option-group.small .option input + label .point-icon {
        top: -4px;
        left: -3px;
    }

    #new-tasktracking-menu-footer {
        left: 0;
        right: auto;
    }

    #mobile-footer {
        display: block;
        position: fixed;
        height: 78px;
        width: 98%;
        left: 1%;
        bottom: 5px;
        border-radius: 45px;
        background-color: #ffffffab;
        z-index: 23;
        padding-left: 15%;
        border: 1px solid #cdced730;
        backdrop-filter: blur(2px);

    }

    #mobile-footer .mobile-footer-inner {
        height: 58px;
        width: max-content;
        margin: auto;
        /*margin-bottom: 34px;*/
    }

    #mobile-footer #mobile-footer-btn-create-root-wrapper {
        display: inline-block;
        position: fixed;
        bottom: 65px;
        width: 65px;
        height: auto;
        line-height: 65px;
        right: 15px;
        text-align: center;
    }

    #mobile-footer .mobile-footer-button {
        display: inline-block;
        float: left;
        width: 75px;
        height: 75px;
        padding: 14px;
        text-align: center;
        font-size: 12px;
        line-height: 24px;
        border-radius: 100%;
        color: #7b8b9c;
        background-color: #ffffff0a;
        backdrop-filter: blur(3px);
        font-family: 'Montserrat-Light';
    }

    #mobile-footer .mobile-footer-button.highlight {
        color: var(--jpColor);
        font-family: 'Montserrat-Regular';
    }

    #mobile-footer .mobile-footer-button.small {
        width: 50px;
        height: 50px;
    }

    #mobile-footer .open>.dropdown-menu {
        /*bottom: 60px !important;*/
        padding-bottom: 10px;
        max-height: 500px;
        min-width: 450px;
        top: auto;
        bottom: 75px;
        position: fixed;
        left: calc(50% - 170px);
    }

    #mobile-footer .open>.dropdown-menu .mobile-dropdown-close {
        position: absolute;
        width: 45px;
        height: 45px;
        text-align: center;
        line-height: 60px;
        top: -55px;
        left: calc(50% - 22.5px);
        border-radius: 100%;
        background-color: #ffffffbd;
        backdrop-filter: blur(4px);
    }

    /*    #home #jp-posting {height: 0; overflow: hidden; padding: 0; border: 0; margin: 0;}
        .portal-layout #home #jp-posting,
        #home #jp-posting.focus {
            width: 100%; max-width: 100%;
            min-height: 80%;
            height: calc(100% - 35px);
            border-radius: 0;
            margin-bottom: 5px;
            border-bottom: 0;
            border-right: 0;
            border-left: 0;
            padding: 0;
            zoom: 1.3;
        }
    
        #home #jp-posting.focus form.push {
            height: calc(100% - 35px);
            display: block;
            padding-top: 5px;
        }
    
        #home #jp-posting.focus.posting .header {
            height: 0px;
            padding: 0;
            border: 0;
            position: absolute;
        }
        #home #jp-posting.focus.posting .header .select-group>a .detail {display: none;}
        #home #jp-posting.focus.posting .text {display: none;}
        #home #jp-posting.focus.posting .actions {
            position: absolute;
            bottom: -35px;
            left: 0;
            z-index: 10;
        }
        #home #jp-posting.focus.posting .bt-send-group {
            position: absolute;
            top: 0px;
            z-index: 10;
            left: 1%;
            box-shadow: 0px -1px 8px #62697b42;
            border-radius: 100%;
        }
        #home #jp-posting.focus.posting .posting-option {
            margin-right: 10px;
                    margin-top: 30px;
                    position: absolute;
                    right: 5px;
                    top: -9px;
                    float: none;
                    z-index: 2;
        }
        #jp-posting.focus .mobilePostingCloseTrigger {
            position: absolute;
            z-index: 99999;
            top: -35px;
            width: 100%;
            background-color: white;
            box-shadow: 0px -6px 8px #6b6c7f47;
            text-align: center;
        }
        #jp-posting.focus .mobilePostingCloseTrigger a {display: inline-block; padding: 5px; margin: 5px;}
        .modal-content #jp-posting .mobilePostingCloseTrigger {display: none;}
            #home #jp-posting.focus.posting .posting-option + .posting-option {
                bottom: -65px;
            }
        #home #jp-posting.focus .social-inbox {
            width: calc(100% - 40px);
            position: relative;
            right: 0px;
            margin-left: 0px;
        }
        #home #jp-posting.focus .social-inbox .ui-autocomplete {
            position: fixed;
            max-width: 100%;
            width: 100%;
            min-width: 100%;
            box-shadow: 0 5px 10px rgb(153 150 187 / 21%);
            border-color: #5352791c;
            border-left: 0px;
            border-right: 0px;
        }
        #home #jp-posting.focus .social-inbox .ui-autocomplete .ui-menu-item {
            border-color: #5352791c;
        }
        #home #jp-posting.focus .boxlist.tags {
            right: 8px;
            position: fixed;
            bottom: 5px;
            z-index: 333;
        }
    
        #home #jp-posting.focus .boxlist.tags .val {
            position: relative;
            top: -35px;
            box-shadow: 0px 0px 8px #6e7798;
        }
        #home #jp-posting.focus .bt-send-group .dropdown-menu {
            top: auto;
            bottom: 101%;
        }
        #home #jp-posting.focus .bt-send-group .dropdown-menu:before,
        #home #jp-posting.focus .bt-send-group .dropdown-menu:after {content: ''; width: 0; border: 0; height: 0;}
        #home #jp-posting.focus #jp_posting_sel_wrapper {
            position: fixed;
            bottom: -100%;
            width: 100%;
            height: auto;
            max-height: 350px;
            background-color: white;
            z-index: 999;
            box-shadow: 0px -4px 8px #868aa5a1;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            padding: 10px;
        }
        #home #jp-posting.focus #jp_posting_sel_wrapper.open {
            bottom: 0;
        }
        #home #jp-posting.focus #jp_posting_sel_wrapper.open .tab-content {height: 300px;}
        #home #jp-posting.focus #jp_posting_sel_wrapper .tab-content {
            overflow: hidden;
            overflow-y: auto;
            height: 0px;
        }
    
        .portal-layout #home #jp-posting {
            min-height: 50px;
        }
        .portal-layout #home #jp-posting .social-inbox .social-textarea {
            padding-left: 25px;
        }
        .portal-layout #home #jp-posting.focus .social-inbox {
            width: calc(100% - 5px);
        }
        .portal-layout #home #jp-posting.focus.posting .posting-option {
            right: 20px;
            margin-top: 20px;
        }
    
        .posting.focus .content {
            max-height: 400px;
            overflow: visible;
            overflow-y: auto;
        }
        .posting.focus .saving {top: -10px;}
    
        .posting.focus .boxlist.tags.dropdown-top .ui-autocomplete {
            bottom: 30px !important;
            right: 10px !important;
            position: absolute !important;
            float: none !important;
            top: auto !important;
            left: auto !important;
        }*/

    /*    #modal-simple-jp-view .posting-wrapper,
        #home #jp-posting.focus,
        .portal-layout #home #jp-posting{
            overflow: visible;
            position: fixed;
            z-index: 999999;
            width: 100%;
            bottom: -5px;
            max-height: 460px;
            left: 0px;
            box-shadow: -3px 0px 12px #7f80a0b3;
        }*/
    /*.mobilePostingCloseTrigger {display: block;}*/

    /*    .simpleType-selector {
            display: none;
        }*/
    /*    #jp-posting .select-group {
            margin-left: 40px;
        }*/

    .jp-tabs.nav.nav-tabs.btn-style>li>a {
        /*        padding: 2px 6px;
                min-width: 40px;
                height: 30px;
                line-height: 23px;
                text-align: center;*/
        position: relative;
        /*font-size: 10pt;*/
    }
    .nav-control-taps .nav.nav-tabs .nav-news {
        position: absolute;
    }

    .popover.jp-popup-info.send-email-open,
    .popover.jp-popup-info.right.send-email-open {
        opacity: 0;
        display: none !important;
    }

    .popover.jp-popup-info,
    .popover.jp-popup-info.right{
        width: 100%;
        max-width: none;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        z-index: 999999999 !important;
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: auto !important;
        max-height: 60%;
        height: auto;
        min-height: 250px;
        overflow-x: hidden;
        overflow-y: auto;
        margin-left: 0;
        box-shadow: 0px -3px 8px #373a48;
        padding-bottom: 50px;
    }
    .popover.jp-popup-info .arrow {
        display: none;
    }
    .popover.jp-popup-info .jp-popup .content{
        padding-bottom: 50px;
        max-width: 480px;
        margin: auto;
    }
    .popover.jp-popup-info .jp-popup .content .row {
        margin-bottom: 5px;
    }
    .popover.jp-popup-info .jp-popup .jp-popup-footer {
        position: fixed;
        bottom: 10px;
        left: 0;
        width: 100%;
        background-color: white;
    }

    #side-options-content .tab-content {
        background-color: white;
    }

    .pipeline-detail .btn-group li {
        display: inline;
        text-align: left;
        height: auto;
        line-height: auto;
    }
}

/* mobile */

@media(max-width: 767px) {

    .btn-popover.mobile-in {
        display: inline-block !important;
    }
    a.default {
        color: #5f6375 !important;
    }

    .modal-side-info.full .side-info-inner {
        margin: 0;
    }

    #jp-head-info .jp-head-info-wrapper {
        padding-bottom: 0;
    }

    .jp-head-title {
        float: none;
        position: relative;
        display: inline-block;
        left: auto;
        margin: auto;
    }

    #jp-head-info .nav-page-content .nav.nav-tabs.style-jp {
        border: 0;
        float: none;
        margin: 0;
        padding-top: 0;
    }

    #jp-head-info .root-group .icon-wrapper {
        float: left;
        position: relative;
        width: 64px;
        height: 58px;
        padding: 7px 10px;
        background-color: white;
        /* border-radius: 24px; */
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        /* border: 1px solid #b1b3c026; */
        /* border-bottom: 0; */
        box-shadow: 0px -2px 4px #dedee780;
    }

    #jp-view-modal #jp-head-info.page-content .jp-head-info-wrapper.account h1 {
        line-height: 53px;
        max-width: 290px;
    }

    #jp-head-info .jp-head-title {
        height: 60px;
        display: block;
        margin-bottom: 5px;
        padding-left: 10px;
        border-bottom: 1px solid #b1b3c026;
    }


    /*    #detail-nav .nav-go-back {
            position: absolute;
            top: auto;
            left: 0;
            display: block;
            width: 100%;
            text-align: left;
        }
        #detail-nav .nav-go-back {display: inline-block; width: auto;}
        #detail-nav .nav-go-back span {font-size: 12pt;}*/

    #jp-head-info .root-group {
        width: 100%;
        text-align: left;
        margin-left: 0px;
    }
    .detail-view #jp-head-info .root-group {
        text-align: left;
        line-height: 50px;
        width: 100%;
        border: 0;
    }
    .detail-view #jp-head-info .root-group span {
        font-size: 12pt;
        text-align: left;
    }
    .jp-head-title .edit {
        margin-left: 15px;
    }
    /*    #jp-head-info .root-group .button {
            width: auto;
            display: inline-block;
        }*/

    /*    #jp-head-info .nav-page-content {
            position: fixed;
            bottom: 9px;
            left: 15px;
            width: fit-content;
            margin: 0;
        }*/

    .nav-control-taps {
        float: none;
    }
    .jp-head-title {
        max-width: 100%
    }

    #current-jp-wrapper.fixed #jp-head-info {
        position: fixed;
        width: 100%;
        min-height: 50px;
        padding-top: 0px;
        left: 0;
    }
    #current-jp-wrapper.fixed #jp-head-info .jp-options {
        display: none;
    }

    #current-jp-wrapper.fixed .after-header-div,
    #current-jp-wrapper.fixed .inner-main-row{
        margin-top: 65px;
    }

    #current-jp-wrapper.fixed .after-header-div + .inner-main-row {
        margin-top: 0;
    }

    #detail-nav .nav-control-taps {
        display: block;
        text-align: center;
        margin-bottom: 0px;
        padding-top: 5px;
    }
    #detail-nav .nav-control-taps ul {
        border: 0;
        width: 100%;
    }
    #detail-nav .nav-process {
        display: none;
    }
    #detail-nav .nav-process a {
        float: none;
        width: auto;
    }

    .construction-kit-wrapper {
        width: 100%;
        margin: auto;
    }
    .construction-kit-next-wrapper {
        position: relative;
        top: auto;
        right: auto;
    }

    nav.navbar .collapse.navbar-collapse .btn-group:hover .dropdown-menu a {
        color: #333;
    }
    nav.navbar .collapse.navbar-collapse .btn-group:hover>a,
    nav.navbar .collapse.navbar-collapse .btn-group:hover .dropdown-menu a:hover {
        background-color: #43596f;
        color: #5a79b5;
    }

    nav.navbar .collapse.navbar-collapse .btn-group:hover .dropdown-menu {
        height: auto;
        opacity: 0;
    }
    nav.navbar .collapse.navbar-collapse .btn-group.open .dropdown-menu,
    nav.navbar .collapse.navbar-collapse .btn-group.open:hover .dropdown-menu {
        opacity: 1;
        height: auto;
    }

    .mainframe-row .inner-main-row.size-2 {
        width: calc(100% - 5px);
    }

    #mobile-footer {
        padding-left: 0px;
    }
    #mobile-footer .open>.dropdown-menu {
        /*bottom: 60px !important;*/
        margin-bottom: 65px !important;
        max-height: 500px;
    }

    #mobile-footer .open>.dropdown-menu .mobile-dropdown-close {
        position: fixed;
        width: 45px;
        height: 45px;
        text-align: center;
        line-height: 60px;
        top: auto;
        bottom: 15px;
        left: calc(50% - 22.5px);
        border-radius: 100%;
        background-color: #ffffffbd;
        backdrop-filter: blur(4px);
    }



    #jp-posting .form-rows .row>div {
        margin-bottom: 10px;
    }
    #jp-list.jp-list-overview .jp-list-row .task_changer_wrapper {
        float: left;
        zoom: 1.2;
        margin: 0;
    }
    #jp-list.jp-list-overview .jp-list-row .task_type_wrapper {
        display: none;
    }

    #jp_posting_sel_wrapper .nav.nav-tabs>li a {
        padding: 6px;
        width: 30px;
        height: 30px;
    }

    .editor-toolbar .toolbar-section {
        display: inline-block;
        padding-bottom: 5px;
        padding-right: 15px;
    }

    #jp-a-1 #jp-filters.button,
    #jp-a-1 #dynamic-table-options,
    #jp-a-1 .button {
        width: 100%;
        margin: 10px auto;
    }

    .info .content-wrapper div.text-content,
    .info .user-rating-groups,
    .info .action-show-more,
    .info .file-att,
    .info-wrapper .mail-header {
        margin-left: 5px;
        width: calc(100% - 10px);
        text-align: left;
    }

    .info .content-wrapper .share-jp-head .jp-head-link-wrapper {
        position: relative;
        top: 0px;
        display: block;
        margin: auto;
    }
    .info.info-wrapper .info-creation .social-context .task-status.rating.btn-group {
        zoom: 1;
    }
    .info.info-wrapper .info-creation .social-context .comment-controls {
        zoom: 1.2;
        margin-left: 5px;
    }

    .pointflow .info>.row>.col-sm-11 {
        padding-right: 0px;
    }
    #jp-posting, .pointflow .info, .page-content.padding.nav-wrapper.info {
        width: 95%;
    }
    .info .content-wrapper .task-status.btn-group {
        position: relative;
    }

    .info.info-wrapper .info-creation .simple-type {
        position: absolute;
        left: 5px;
    }
    .info.info-wrapper .info-creation .desc {
        display: block;
        max-width: 100%;
        text-align: left;
        line-height: 20px;
        margin-left: 0px;
        margin-top: 2px;
        padding-top: 5px;
    }
    .info.info-wrapper .info-creation .social-context {
        width: auto;
        display: block;
        text-align: right;
        float: none;
    }
    .info.info-wrapper .content-wrapper .content-c {
        text-align: left;
    }

    .info-wrapper .message-type {
        position: absolute;
        left: -3px;
        top: -1px;
    }

    .jp-tabs.nav.nav-tabs.btn-style li.active a {
        background-color: transparent;
        border-color: transparent;
        color: #47425a;
    }

    .modal-dialog,
    .modal-dialog.size-big,
    .modal-dialog.size-small,
    .modal-dialog.size-medium {
        width: calc(100%);
        margin: 0;
        height: auto;
        min-height: 100%;
    }

    /*    .modal-dialog .modal-footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            left: 0;
    
        }*/

    /*    .portal-layout #home #jp-posting,
        #home #jp-posting.focus {
            min-height: 180px;
        }*/

    #detail-nav .nav-go-back {
        display: none;
    }


    .modal-side-info {
        position: fixed;
        width: 100%;
        height: calc(100%);
        border: 0;
        /* top: 65px; */
        right: -100%;
        z-index: 9999997;
        /* box-shadow: 0px 2px 4px #b2bad28f; */
        /* border-left: 1px solid #eaeaea !important; */
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.25s ease-out;
        transition: all 0.5s ease-out;
        opacity: 0;
    }

    .modal-side-info.show,
    .modal-side-info.full.show {
        opacity: 1;
        right: 0;
        padding-left: 0;
    }



    #jp-list.jp-list-overview .jp-list-row a {
        width: 100%
    }
    #jp-list.jp-list-overview .jp-list-row .boxlist a,
    #jp-list.jp-list-overview .jp-list-row .boxlist.tags .val a {
        width: auto;
        display: inline-block;
        line-height: 8px;
    }
    #jp-list.jp-list-overview .jp-list-row .boxlist.tags {
        float: none;
        display: inline-block;
        margin-right: 60px;
    }

    #jp-head-info {
        min-height: 55px;
        height: auto;
        z-index: auto;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        box-shadow: none;
    }
    #jp-head-info .jp-options {
        display: none;
    }
    #jp-head-info .jp-options .right-side-options-trigger {
        float: none;
        display: inline-block;
    }
    #current-jp-wrapper.detail-view #jp-head-info .jp-options {
        /*        position: relative;
                top: 2px;
                z-index: 9;*/
        display: none;
    }
    #current-jp-wrapper.detail-view #jp-head-info .jp-options.fav {
        display: none;
    }
    #current-jp-wrapper.detail-view #jp-head-info .jp-options.fav a.option {
        margin-top: 0px;
    }
    #root-user-allocation {
        margin-top: 5px;
        margin-right: 10px;
        zoom: 1.2;
    }

    #jp-head-info .jp-head-info-wrapper h1 {
        text-align: center;
        margin-top: 0px;
    }
    #jp-head-info .jp-head-info-wrapper {
        padding-top: 0px;
        text-align: center;
    }
    #jp-head-info .jp-head-info-wrapper {
        overflow:  visible
    }

    .button.share-via-jp-connect-bt,
    .jp-options .option.share-via-jp-connect-bt {
        width: auto;
        display: inline-block;
        float: left;
        position: relative;
        top: 7px;
    }

    .posting .posting-option {
        margin-top: 0px;
    }

    .timeline-filters {
        overflow: auto;
    }
    .timeline-filters-inner {
        width: max-content;
        display: block;
    }

    .page-content .inner-content {
        overflow: hidden;
    }

    .page-content .inner-content .text-content {
        white-space: normal;
    }

}

/*@media(max-width: 558px) {
    #jp-head-info .nav-page-content {
        top: auto;
    }
}*/

@media (max-width: 350px) {
    nav.navbar .btn-group>a, nav.navbar .collapse.navbar-collapse .btn-group {
        width: 40px;
    }
}
/*
===== Joinpoints 10 ======
*/

/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 16.06.2020, 22:29:01
    Author     : Jakob Deimbacher
*/

#search-menu {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    padding: 0px;
}

#global-menu #global-menu-inner{
    position: absolute;
    bottom: 15px;
    width: 100%;
}

#global-menu .user-accounts {
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
}
#global-menu .user-accounts {
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
}

#global-menu .user-top-info {
    position: absolute;
    top: 10px;
    width: 100%;
    height: auto;
}
#global-menu .user-top-info .user-img {
    width: 80px;
    height: 80px;
}

#default-menu {
    display: block;
    height: 100%;
}

.side-menu-background {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 997;
    background-color: #272c3cc9;
    /*backdrop-filter: saturate(180%) blur(3px);*/
}

#nav-main-menu {
    z-index: 99999;
    background-color: white;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;

    border-right: 1px solid #d8e1ea;
    box-shadow: 1px 2px 4px #8890a4c4;

    width: 10px;

    position: fixed;
    height: 100%;
    left: 65px;
    top: 0;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}

#nav-main-menu .nav-main-menu-inner,
#nav-main-menu #nav-main-menu-header,
#nav-main-menu.closing #nav-main-menu-header {
    opacity: 0;
    padding: 0px;
    width: 0px;
    height: 0px;
    overflow: hidden;
}

#nav-main-menu.open,
#nav-main-menu.open-mobile,
#nav-main-menu:not(.closing):hover,
nav.navbar:not(.closing):hover + #nav-main-menu{
    width: 285px;
    transition-delay: 0.2s;
}
#nav-main-menu.open.search,
#nav-main-menu.open.search:hover,
nav.navbar:hover + #nav-main-menu.open.search {
    width: 50%;
}

#nav-main-menu.open .nav-main-menu-inner,
#nav-main-menu.open-mobile .nav-main-menu-inner,
#nav-main-menu:hover .nav-main-menu-inner,
nav.navbar:hover + #nav-main-menu .nav-main-menu-inner{
    width: 100%;
    padding: 8px;
    padding-bottom: 50px;
    overflow-x: visible;
    overflow-y: auto;
    height: auto;
    position: relative;
    opacity: 1;
    transition-delay: 0.2s;
    z-index: 9998;
    display: block;
    max-height: calc(100% - 30px);
}

#nav-main-menu.open #nav-main-menu-header,
#nav-main-menu.open-mobile,
#nav-main-menu.open-mobile #nav-main-menu-header,
#nav-main-menu:not(.closing):hover #nav-main-menu-header,
nav.navbar:not(.closing):hover + #nav-main-menu:not(.closing) #nav-main-menu-header {
    opacity: 1;
    margin-top: 17px;
    margin-bottom: 12px;
    width: auto;
    height: auto;
    overflow: visible;
    transition-delay: 0.3s;
}

#nav-main-menu + .flex .hw-container,
#nav-main-menu + .hw-container {
    width: calc(100% - 60px);
    left: 60px;
}

#nav-main-menu.open + .flex .hw-container,
#nav-main-menu.open + .hw-container,
#nav-main-menu:hover + .flex .hw-container,
#nav-main-menu:hover + .hw-container,
nav.navbar:hover + .flex .hw-container,
nav.navbar:hover + .hw-container {
    transition-delay: 0.2s;
}

#pin-menu-trigger {
    position: absolute;
    z-index: 99999;
    top: auto;
    bottom: 10px;
    right: -17px;
    width: 26px;
    height: 26px;
    text-align: center;
    line-height: 26px;
    background-color: white;
    border-radius: 30px;
    border: 1px solid #525558;
    color: #525558;

    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

#pin-menu-trigger:hover {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
    width: 40px;
    padding-left: 15px;
}

#nav-main-menu.open #pin-menu-trigger i {
    transform: rotate(-150deg);
}

.mainframe-row .inner-main-row.fullscreen {
    height: calc(100% - 65px);
}

.jp-head-title .edit {
    color: #8289a2;
    margin-left: 5px;
}
.jp-head-title .btn-group:hover .edit {
    color: #007bff
}

@media(min-width: 1280px) {
    #nav-main-menu.open .flex .hw-container,
    #nav-main-menu.open + .hw-container {
        width: calc(100% - 345px);
        left: 345px;
    }

    #nav-main-menu.open + .hw-container #jp-posting,
    #nav-main-menu.open + .hw-container .pointflow .info,
    #nav-main-menu.open + .hw-container .page-content.padding.nav-wrapper.info,
    #nav-main-menu.open + .hw-container .pointflow .time-mark,
    #nav-main-menu.open + .hw-container .timeline-filters {
        width: 100%;
        max-width: 100%;
    }



    #nav-main-menu.open + .hw-container #current-jp-wrapper.fixed #jp-head-info {
        left: 305px;
        width: calc(100% - 305px);
    }
}

@media(max-width: 1279px) {

    #nav-main-menu.default-open{
        width: 10px;
    }

    #nav-main-menu.default-open:not(.closing):hover,
    nav.navbar:not(.closing):hover + #nav-main-menu {
        width: 285px;
    }
}

nav.navbar,
.flex nav.navbar {
    background-color: #1e3052;
    width: 65px;
    height: 100%;
    position: fixed;
    left: 0px;
    z-index: 999999;
    border-radius: 0px;
}

nav.navbar .navbar-brand, nav.navbar .navbar-header,
nav.navbar .navbar-brand {
    background-color: transparent;
    margin: 0px;
}
nav.navbar .navbar-brand, nav.navbar .navbar-header {
    height: 55px;
    margin-bottom: 0px;
}
/*nav.navbar .navbar-brand .image-wrapper {background-color: #ffffff1f}*/

.flex .hw-container,
.hw-container {
    width: calc(100% - 75px);
    left: 75px;
}
nav.navbar .top-menu .image-wrapper .image-wrapper.user-img.round-img {
    border: 2px solid white;
    background-color: white;
    margin: 7px 10px;
    width: 45px;
    height: 45px;
}

#nav-right-side-menu {
    position: absolute;
    bottom: 0px;
    left: 0px;
    margin: 0px;
    width: 100%;
    float: none;
    padding-bottom: 20px;
    padding-top: 8px;
    background-color: ffffff05;
}
#global-menu-trigger,
#nav-right-side-menu .btn-group a {
    padding: 0px;
}

nav.navbar .btn-group {
    width: 100%;
    float: none;
    display: block;
    margin: 0px;
    margin-top: 8px;
    text-align: center;
}
nav.navbar .btn-group>a.active:not(.switchoption),
nav.navbar a.active:not(.switchoption),
nav.navbar .btn-group.open>a.active:not(.switchoption){
    background-color: white;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    color: #52576f;
    font-size: 9px;
    font-family: 'Montserrat-Regular';
}

#my-main-menu a.button {
    margin: 4px 3px;
}

@media(max-width: 1700px) {

    #dynamic-table {
        height: 655px;
    }
}

/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 20.03.2020, 14:25:49
    Author     : Jakob Deimbacher
*/
/*.settings-header {
    background-color: white;
    height: 50px;
}*/
.settings-content-wrapper {
    padding-bottom: 10px;
    margin-top: 0px;
    color: #646f79
}

.store-content .settings-header {
    background-color: transparent;
    height: auto;
}
.store-content h2 {
    font-size: 14pt;
    font-family: 'Montserrat-Regular';
    display: inline-block;
}

.settings-header .btn-group {
    margin-top: 15px;
}

.store-group {
    background-color: #eff4f999;
    border: 0px;
    border-radius: 10px;
    padding: 5px;
}

.mobile-filter {
    display: none;
}

.store-search {
    float: right;
    width: 300px;
    height: 50px;
    margin-top: 10px;
    position: relative;
}
.store-search input {
    background-color: white;
    outline: none;
    font-size: 9pt;
    border: 1px solid #eaeaea;
    border-radius: 40px;
    padding: 3px;
    padding-left: 30px;
    height: 30px;
}
.store-search .search-icon {
    position: absolute;
    z-index: 2;
    font-size: 11pt;
    top: -1px;
    left: 10px;
}
.process-store-item {
    background-color: white;
    position: relative;
    box-shadow: 1px 2px 6px #e2e2e2;
    height: 250px;
    width: 255px;
    float: left;
    border: 1px solid #eaeaea;
    border-radius: 5px;
    margin: 10px;
}

.side-menu-wrapper {
    width: 300px;
    float: left;
}
.store-content {
    width: calc(100% - 300px);
    float: left;
}

.side-menu {
    list-style: none;
    margin: 0px;
    padding: 0px;
    position: relative
}
.side-menu li {
    margin: 0px;
    padding: 0px;
    line-height: 30px;
    position: relative;
}
.side-menu li a {
    display: block;
    position: relative;
    padding-left: 10px;
    color: var(--textColor);
    /*font-weight: bolder;*/
    border: 1px solid transparent;
    border-radius: 40px;
    font-family: 'Montserrat-Light';
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.side-menu li a:hover {
    background-color: var(--btnHover);
    border-color: var(--btnHoverBorder);
    color: var(--btnHoverText);
}

.side-menu li.active>a.title {
    background-color: var(--btnHover);
    border-color: var(--btnHoverBorder);
    pointer-events: none;
    font-family: 'Montserrat-Regular';
}

.side-menu.small li {
    line-height: 25px;
    font-size: 12px;
}

.side-menu li a .color-cycle-wrapper {
    background-color: white;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 40px;
    position: relative;
    top: 5px;
    margin-right: 10px;
    font-size: 13pt
}
.side-menu li a .color-cycle {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 40px;
    line-height: 0px;
}
.side-menu li a .color-cycle-wrapper i {
    top: -4px;
    left: 3px;
    position: relative;
}
.side-menu li a .color-cycle-wrapper i.color-cycle {
    top: auto;
    left: auto;
}
.side-menu li a .color-cycle-wrapper .custom-image {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    display: block;
    background-position: center;
    background-size: 100% auto;
}

.side-menu.small li a .color-cycle-wrapper {
    zoom: 0.85;
    opacity: 0.75;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.side-menu.small li:hover a .color-cycle-wrapper,
.side-menu.small li.active a .color-cycle-wrapper {
    opacity: 1
}

.nav-news,
.nav-news-remote,
.taskCount {
    position: absolute;
    font-size: 12px;
    right: 5px;
    top: 5px;
    line-height: 10px;
    width: auto;
    min-width: 20px;
    height: 20px;
    background-color: #2ecca0;
    border-radius: 40px;
    text-align: center;
    color: white;
}
.side-menu.small li a .taskCount {
    top: 2px;
    right: 3px;
}

.nav-news,
.nav-news-remote,
.side-menu li a .nav-news,
.side-menu li a .nav-news-remote {
    width: auto;
    background-color: transparent;
    right: 6px;
    top: 5px;
    zoom: 0.90;
}
.side-menu li a .nav-news .taskCount,
.side-menu li a .nav-news-remote .taskCount {
    position: relative;
    z-index: 1;
    top: auto;
    right: auto;
}
.side-menu li a .nav-news .taskCount + .taskCount,
.side-menu li a .nav-news-remote .taskCount + .taskCount {
    margin-left: -4px;
    z-index: 0;
}

.nav.nav-tabs .nav-news {
    position: relative;
    top: -2px;
    right: -5px;
    display: inline-block;
    float: right;
    width: auto;
    height: auto;
    min-width: 0;
}
.nav.nav-tabs .nav-news .taskCount {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
}

.side-menu li.sub-navs>a.sub-menu-toggle,
.side-menu li a.sub-menu-toggle {
    display: inline-block;
    text-align: center;
    line-height: 20px;
    width: 20px;
    height: 20px;
    padding: 0px;
    position: absolute;
    top: 0px;
    right: 5px;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.side-menu li.sub-navs>a {
    width: calc(100% - 20px);
}

.side-menu li.sub-navs ul.sub-menu {
    opacity: 0;
    height: 0px;
    overflow: hidden;

    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

.side-menu li.sub-navs.open ul.sub-menu {
    opacity: 1;
    height: auto;
    list-style: none;
    padding-left: 15px;
}
/*.side-menu li.sub-navs ul.sub-menu .color-cycle-wrapper {display: none;}*/
.side-menu li.sub-navs.open a.sub-menu-toggle {
    transform: rotate(180deg);
}
.side-menu li.sub-navs.open a.sub-menu-toggle i {
    position: relative;
    top: -1px;
}

.side-menu-bt {
    float: right;
    display: inline-block;
    margin-right: 1px;
    border: 1px solid transparent;
    background-color: var(--btnBColor);
    color: var(--textColor);
    font-size: 11px;
    width: 23px;
    height: 23px;
    line-height: 23px;
    text-align: center;
    border-radius: 30px;

    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.side-menu-bt:hover {
    color: white;
    background-color: #007fff
}

#dir-nav.deleteable li,
#dir-nav.editable li{
    opacity: 0.4
}
#dir-nav.deleteable.side-menu li.nav-group,
#dir-nav.deleteable.side-menu li.nav-group a.title,
#dir-nav.deleteable.side-menu li.nav-group a.delete-trigger,
#dir-nav.editable.side-menu li.nav-group,
#dir-nav.editable.side-menu li.nav-group a.title,
#dir-nav.editable.side-menu li.nav-group a.edit-trigger{
    opacity: 1;
}

#dir-nav.deleteable.side-menu li.nav-group a.title,
#dir-nav.deleteable.side-menu li.nav-group a.delete-trigger,
#dir-nav.editable.side-menu li.nav-group a.title,
#dir-nav.editable.side-menu li.nav-group a.edit-trigger {
    display: inline-block;
    width: auto;
    padding-right: 10px;
}

#dir-nav.deleteable.side-menu li.nav-group a.delete-trigger,
#dir-nav.editable.side-menu li.nav-group a.edit-trigger{
    padding: 0px;
    text-align: center;
    width: 20px;
    height: 20px;
    line-height: 18px;
    color: #E30613;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
#dir-nav.deleteable.side-menu li.nav-group a.delete-trigger:hover {
    background-color: red;
    color: white;
}

#dir-nav.editable.side-menu li.nav-group a.edit-trigger {
    color: #007fff
}
#dir-nav.editable.side-menu li.nav-group a.edit-trigger:hover {
    background-color: #007fff;
    color: white;
}

/* ---- movable directories ----*/

#dir-nav.movable .taskCount {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
#dir-nav.movable li.draggable.ui-draggable-handle a span {
    color: red;
}
#dir-nav.movable li.draggable.ui-draggable-handle a .color-cycle-wrapper{
    animation: shake 0.8s;
    animation-iteration-count: infinite;
}
#dir-nav.movable li.draggable.ui-draggable-handle a span{
    display: inline-block;
    animation: shake-text 0.8s;
    animation-iteration-count: infinite;
}
#dir-nav.movable .taskCount {
    opacity: 0;
}
#dir-nav.movable ul {
    overflow: visible
}
#dir-nav.movable .ui-draggable-handle.ui-draggable-dragging,
#dir-nav.movable ul.sub-menu .ui-draggable-handle.ui-draggable-dragging.ui-droppable {
    position: absolute;
    z-index: 999;
}
#dir-nav.movable .ui-draggable-handle.ui-draggable-dragging a {
    background-color: white;
    width: auto;
    padding: 2px 5px;
}
#dir-nav.movable .ui-draggable-handle.ui-draggable-dragging {
    list-style: none;
    position: absolute;
    z-index: 999;
}
#dir-nav.movable .ui-draggable-handle.ui-draggable-dragging .sub-menu {
    opacity: 0;
    display: none;
}
#dir-nav.movable .ui-draggable-handle.ui-draggable-dragging span {
    animation-play-state: paused;
}
#dir-nav.movable .ui-sortable-placeholder {
    height: 40px;
    border: 1px dashed #eaeaea;
    padding: 2px;
    margin: 2px;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
;
#dir-nav.movable .ui-sortable-placeholder.ui-state-active,
#dir-nav.movable .ui-sortable-placeholder:hover {
    background-color: #007fff;
    border: 1px dashed #007fff;
}

#dir-nav .finish-moving {
    display: none;
    opacity: 0;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
#dir-nav.movable .finish-moving,
#dir-nav.deleteable .finish-moving,
#dir-nav.editable .finish-moving{
    display: block;
    opacity: 1;
    text-align: center;
    font-size: 10pt;
    font-family: 'Montserrat-Regular';
}

.edit-mode #nav-options,
.edit-mode #add-nav-option{
    opacity: 0;
    display: none;
}

/*drop*/
#dir-nav.movable .ui-droppable {
    z-index: 99
}
#dir-nav.movable .ui-state-active>a {
    background-color: #007fff;
    color: white
}
#dir-nav.movable .ui-state-active>a.sub-menu-toggle {
    background-color: transparent;
    color: #333
}
#dir-nav.movable .ui-draggable-dragging>a.sub-menu-toggle {
    display: none;
}
#dir-nav.movable .ui-draggable-dragging .color-cycle-wrapper {
    display: none;
}


/*time tracking*/
#first-steps-wrapper.closed + #footer-time-tracking,
#footer-time-tracking {
    position: fixed;
    bottom: 30px;
    right: 10px;
}
#first-steps-wrapper.closed + #footer-time-tracking {
    bottom: 50px;
}
#first-steps-wrapper + #footer-time-tracking {
    bottom: 440px;
}

#footer-time-tracking .time-tracking-inner {
    display: inline-block;
    background-color: white;
    border-radius: 25px;
    padding: 0px;
    width: auto;
    box-shadow: 0px 0px 8px #616186;
}
#footer-time-tracking .running-timetrack {
    display: inline-block;
    padding: 8px 15px;
    position: relative;
    top: 3px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0px 0px 12px #61618699;
    text-align: center;
}
#footer-time-tracking .running-timetrack-value {
    background-color: #9ba7c31f;
    border-radius: 25px;
    ;
    padding: 2px 8px;
}

.time-tracking-trigger {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

.button.time-tracking-trigger {
    display: inline-block;
    width: 35px;
    height: 35px;
    border-radius: 100%;
    text-align: center;
    line-height: 35px;
    margin: 0;
    padding: 0;
    top: 0;
}

#footer-time-tracking.time-tracking-trigger .fas:before {
    content: "\f04b";
    position: relative;
    left: 1px;
}
#footer-time-tracking.running .time-tracking-trigger .fas:before {
    content: "\f04d";
    left: 0px;
}

.blink-point {
    font-size: 6px;
    color: red;
    position: relative;
    top: -1px;
    left: -2px;
    animation: blink-animation 1s steps(5, start) infinite;
    -webkit-animation: blink-animation 1s steps(5, start) infinite;
}

#footer-time-tracking .boxlist.tags .val {
    font-size: 8pt;
    padding: 0px 6px 0px 6px;
}

.running-timetrack-value {
    font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
    font-size: 11pt;
    color: #00ACC1;
    display: inline-block;
}

.time-format {
    font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
}
#dynamic-table .time-format {
    display: inline-block;
    font-size: 8pt;
    padding: 0px 8px;
    line-height: 15px;
    background-color: #9aaed02b;
    border-radius: 25px;
}

.jp-pipeline .running-timetrack-value,
.jp-pipeline .pipeline-running-timetrack {
    font-size: 8pt;
    display: inline-block;
}
.jp-pipeline .pipeline-running-timetrack {
    margin: 0px 3px;
}
.jp-pipeline .blink-point {
    left: 0;
}

#jp-head-info .time-tracking {
    display: inline-block;
    float: right;
    margin-right: 25px;
    position: relative;
    top: -5px;
}

@keyframes blink-animation {
    to {
        visibility: hidden;
    }
}
@-webkit-keyframes blink-animation {
    to {
        visibility: hidden;
    }
}


@keyframes shake {
    0% {
        transform: rotate(0deg);
    }
    10% {
        transform: rotate(-6deg);
    }
    20% {
        transform:  rotate(6deg);
    }
    30% {
        transform:  rotate(0deg);
    }
    40% {
        transform:  rotate(6deg);
    }
    50% {
        transform:  rotate(-6deg);
    }
    60% {
        transform:  rotate(0deg);
    }
    70% {
        transform:  rotate(-6deg);
    }
    80% {
        transform:  rotate(6deg);
    }
    90% {
        transform:  rotate(0deg);
    }
    100% {
        transform:  rotate(-6deg);
    }
}

@keyframes shake-text {
    0% {
        transform: rotate(0deg);
    }
    10% {
        transform: rotate(-1deg);
    }
    20% {
        transform:  rotate(1deg);
    }
    30% {
        transform:  rotate(0deg);
    }
    40% {
        transform:  rotate(1deg);
    }
    50% {
        transform:  rotate(-1deg);
    }
    60% {
        transform:  rotate(0deg);
    }
    70% {
        transform:  rotate(-1deg);
    }
    80% {
        transform:  rotate(1deg);
    }
    90% {
        transform:  rotate(0deg);
    }
    100% {
        transform:  rotate(-1deg);
    }
}

.process-cat-header {
    line-height: 25px;
    padding: 5px 10px;
    color: white;
    display: inline-block;
    padding-right: 25px;
    position: relative;
    top: -10px;
    border-bottom-right-radius: 45px;
}

.process-detail-header .header-controls {
    padding-left: 0px;
}
.process-detail-header .process-info {
    display: inline-block;
}

@media(max-width: 1280px) {
    #nav-main-menu.open {
        /*left: 50px;*/
        /*width: 10px;*/
    }
    #nav-main-menu.open:hover {
        width: 255px;
        transition-delay: 0.2s;
    }
    #nav-main-menu.open .nav-main-menu-inner,
    #nav-main-menu.open #nav-main-menu-header {
        opacity: 0;
        padding: 0px;
        width: 0px;
        height: 0px;
        overflow: hidden;
    }
    #nav-main-menu.open:hover .nav-main-menu-inner,
    nav.navbar:hover + #nav-main-menu.open .nav-main-menu-inner {
        width: 100%;
        padding: 8px;
        padding-bottom: 50px;
        overflow-x: visible;
        overflow-y: auto;
        height: auto;
        position: relative;
        opacity: 1;
        transition-delay: 0.2s;
        z-index: 9998;
        display: block;
        max-height: calc(100% - 30px);
    }

    #nav-main-menu.open:hover #nav-main-menu-header,
    nav.navbar:hover + #nav-main-menu.open #nav-main-menu-header {
        opacity: 1;
        margin-top: 20px;
        width: auto;
        height: auto;
        overflow: visible;
        transition-delay: 0.3s;
    }

}

@media(max-width: 1000px) {
    #nav-main-menu {
        z-index: 999999999;
    }

    nav.navbar, .flex nav.navbar {
        z-index: 99999999999;
    }

    #nav-main-menu.open.search,
    #nav-main-menu.open.search:hover,
    nav.navbar:hover + #nav-main-menu.open.search {
        width: calc(85% - 50px);
        padding-left: 25px;
    }

    #search-menu {
        width: calc(100% - 25px);
    }

    /*    .source-entries-button-wrapper {
            display: none;
        }*/
}




@media(max-width: 879px) {
    .process-store-item {
        width: 240px;
        margin: 5px;
    }
}

/* mobile */

@media(max-width: 767px) {

    nav.navbar a,
    nav.navbar .btn-group.open>a {
        color: #52576f;
    }

    .flex .mainframe-row {
        padding-bottom: 75px;
    }

    nav.navbar .btn-group>a.active:not(.switchoption),
    nav.navbar a.active:not(.switchoption),
    nav.navbar .btn-group.open>a.active:not(.switchoption){
        background-color: #fefefe;
        box-shadow: inset 0px 0px 8px #eaeaea;
    }


    /*    .font-size-11, a.default.font-size-11 {font-size: 11pt;}
        .btn-group.select>a {font-size: 10pt;}
        .btn-group.select>a {font-size: 10pt;}
        .jp-form-style input, 
        .jp-form-style select, 
        .jp-form-style .checkbox + label>span, 
        .jp-form-style textarea, 
        .jp-form-style .boxlist.asForm input, 
        .jp-form-style .boxlist.asFormStyle input {font-size: 12pt;}*/

    .button,
    button,
    button.button {
        display: inline-block;
        width: auto;
        padding: 5px 15px;
    }

    .dropdown-menu {
        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }

    .open>.dropdown-menu {
        position: fixed !important;
        bottom: 0 !important;
        top: auto !important;
        left: -1px !important;
        width: calc(100% + 2px) !important;
        min-width: 0 !important;
        right: auto !important;
        padding-bottom: 25px !important;
        max-height: 85%;
        overflow: auto;
        zoom: 1.1;
        box-shadow: 0px -3px 20px 0px rgb(43 45 61 / 15%);
        z-index: 9999999999 !important;
        border-radius: 0px !important;
        border-top-left-radius: 24px !important;
        border-top-right-radius: 24px !important;
        background: none;
        background-color: white !important;
        border: 0;
    }
    .dropdown-backdrop {
        background-color: #ffffff00;
        backdrop-filter: blur(0.4rem);
        z-index: 999999;
    }
    .modal .open>.dropdown-menu {
        border-radius: 15px !important;
        border-bottom-left-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
    }
    /*    .task-status.btn-group .dropdown-menu.task-status-options {
            zoom: 1.8;
        }*/

    .open>.dropdown-menu::-webkit-scrollbar,
    .open>.dropdown-menu *::-webkit-scrollbar,
    .open>.dropdown-menu::-webkit-scrollbar:vertical,
    .open>.dropdown-menu *::-webkit-scrollbar:vertical,
    .open>.dropdown-menu::-webkit-scrollbar-track:vertical,
    .open>.dropdown-menu::-webkit-scrollbar-thumb,
    .open>.dropdown-menu::-webkit-scrollbar-track{
        width: 0px !important;
        background-color: transparent !important; /* Chrome/Safari/Webkit */
        box-shadow: none !important;
        height: 0px !important;
    }

    nav.navbar, .flex nav.navbar {
        display: none;
        width: 100%;
        height: 60px;
        position: fixed;
        left: 0px;
        z-index: 9999999999;
        /*box-shadow: 0px 0px 1px #373a48;*/
        background-color: white;
    }

    nav.navbar .navbar-brand,
    nav.navbar .navbar-header {
        height: 60px;
        width: auto;
        float: right;
    }

    #nav-right-side-menu {
        margin: 0px;
        width: auto;
        float: left;
        position: relative;
        bottom: auto;
        left: auto;
    }

    .flex .hw-container,
    .hw-container,
    #nav-main-menu + .flex .hw-container,
    #nav-main-menu + .hw-container {
        width: 100%;
        left: 0;
    }

    nav.navbar .btn-group {
        width: auto;
        float: right;
        display: inline-block;
        margin-top: 0;
    }
    #global-menu-trigger {
        float: left;
    }

    nav.navbar .collapse.navbar-collapse {
        width: auto;
        height: 60px;
        top: auto;
        position: relative;
        padding-bottom: 0px;
        left: auto;
        display: inline-block;
        background-color: transparent;
        overflow: visible;
        border: 0px;
        box-shadow: none;
    }
    nav.navbar .collapse.navbar-collapse .btn-group.open:hover,
    nav.navbar .collapse.navbar-collapse .btn-group:focus,
    nav.navbar .collapse.navbar-collapse .btn-group.open,
    nav.navbar .collapse.navbar-collapse .btn-group .dropdown-menu,
    nav.navbar .btn-group>a,
    nav.navbar .collapse.navbar-collapse .btn-group {
        height: 60px;
        width: 70px;
        line-height: 65px;
        display: block;
        margin-top: 0;
        background-color: transparent;
    }
    nav.navbar .collapse.navbar-collapse .btn-group:hover>a, nav.navbar .collapse.navbar-collapse .btn-group:hover .dropdown-menu a:hover {
        background-color: transparent;
    }
    nav.navbar .navbar-collapse .btn-group a,
    nav.navbar .navbar-collapse .btn-group.open a {
        color: #37518c;
    }
    #mobile-global-menu-trigger {
        width: auto;
        height: auto;
        line-height: 35px;
        float: none;
        text-align: left;
        padding-left: 10px;
    }
    nav.navbar .top-menu a.dropdown-toggle .user-img {
        /*margin-top: 17px;*/
        float: none;
    }

    .bubble-container {
        top: auto;
        bottom: 40px;
        left: -40%;
    }

    .top-menu a.dropdown-toggle {
        float: left;
    }

    #pin-menu-trigger {
        display: none;
    }

    #nav-main-menu:hover,
    nav.navbar:hover + #nav-main-menu,
    #nav-main-menu,
    #nav-main-menu.open:hover,
    #nav-main-menu.open,
    #nav-main-menu.open-mobile{
        left: -100%;
        width: 0;
        top: 60px;
        overflow: hidden;
        height: calc(100% - 80px);
        -webkit-transition: all 0.2s ease-out;
        -moz-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out;
    }

    nav.navbar:hover + #nav-main-menu.open-mobile,
    #nav-main-menu.open-mobile:hover,
    #nav-main-menu.open-mobile {
        left: 0px;
        width: 100%;
        z-index: 10;
        overflow: visible;
        margin-top: 0px;
        box-shadow: none;
        border-radius: 0;
        border: 0;
        top: 0;
    }

    #nav-main-menu.open.search,
    #nav-main-menu.open.search:hover,
    nav.navbar:hover + #nav-main-menu.open.search {
        width: 100%;
        left: 0;
        z-index: 999999;
    }

    .side-menu.small li {
        line-height: 35px;
    }
    .nav-news, .nav-news-remote,
    .side-menu li a .nav-news,
    .side-menu li a .nav-news-remote,
    .side-menu.small li a .color-cycle-wrapper {
        zoom: 1.25;
    }
    .side-menu li a {
        font-size: 11pt;
    }

    nav.navbar:hover + #nav-main-menu .nav-main-menu-inner{
        max-height: calc(100% - 55px);
    }

    #default-menu .mobile-account-info .image-wrapper{
        float: left;
        margin-left: 5px;
        margin-top: 5px;
    }
    #nav-main-menu-header {
        margin-top: -15px;
        text-align: left;
        position: relative;
        left: 15px;
    }
    #nav-main-menu.open #nav-main-menu-header,
    #nav-main-menu:not(.closing) #nav-main-menu-header,
    #nav-main-menu.open #nav-main-menu-header,
    #nav-main-menu:not(.closing):hover #nav-main-menu-header,
    nav.navbar:not(.closing):hover + #nav-main-menu:not(.closing) #nav-main-menu-header {
        line-height: 70px;
        height: 55px;
        margin-top: 0px;
    }

    #nav-game-points {
        position: absolute;
        right: 15px;
        top: 25px;
    }

    #jp_coll_new,
    #create-new-task-btn,
    #btn-new-task-wrapper {
        display: none;
        /*        position: fixed;
                bottom: 15px;
                right: 15px;
                top: auto;
                z-index: 99;*/
    }
    #jp_coll_new a.button,
    #create-new-task-btn button,
    #btn-new-task-wrapper .button{
        border-radius: 100%;
        width: 50px;
        height: 50px;
        line-height: 48px;
        padding: 0;
        margin: 0;
        font-size: 17pt !important;
        box-shadow: 0px 0px 8px #7587a29e;
    }
    #jp_coll_new a.button i {
        display: inline-block;
    }
    #btn-new-task-wrapper {
        border: 0;
    }


    .jp-tabs.nav.nav-tabs.btn-style li a .fas {
        padding: 0;
    }
    .nav.nav-tabs.style-jp .dropdown-menu {
        left: 0;
        right: auto;
    }

    .jp-pipeline-settings {
        width: 800px;
    }

    .settings-header {
        margin-top: 50px;
        height: auto;
        min-height: 50px;
    }
    .process-store-item {
        float: none;
        margin: 20px auto;
    }
    .process-cat-header {
        top: 0px;
        left: -3%;
    }

    .process-detail-header .header-controls {
        padding-left: 15px;
        margin-top: 15px;
    }
    .process-detail-header .process-cat-header {
        margin-bottom: 10px;
    }

    .edit-process-trigger {
        display: block;
        width: 100px;
        margin: auto;
        margin-bottom: 10px;
    }

    .settings-header {
        text-align: center;
    }
    .store-search {
        width: calc(100% - 70px);
    }
    .side-menu-wrapper {
        position: fixed;
        opacity: 0;
        width: 100%;
        height: auto;
        background-color: white;
        z-index: -1;
        -webkit-transition: all 0.2s ease-out;
        -moz-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out;
    }
    .store-content {
        width: 100%;
        float: none;
        -webkit-transition: all 0.2s ease-out;
        -moz-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out;
    }

    #new_settings_wrapper.open-menu .side-menu-wrapper {
        position: relative;
        opacity: 1;
        z-index: 0;
    }
    #new_settings_wrapper.open-menu .store-content {
        position: fixed;
        left: 100%;
    }

    .settings-header .visible {
        width: 100%;
    }
    .mobile-filter {
        display: inline-block;
        width: 50px;
        height: 50px;
        position: absolute;
        top: 5px;
        left: 0px;
        font-size: 12pt;
        color: #adc6d4;
        margin: 0px 10px;
    }
    .mobile-filter:hover,
    .mobile-filter:focus {
        color: #adc6d4;
        background-color: white;
    }
    .mobile-filter:focus {
        background-color: transparent;
        outline: 0;
    }
    #new_settings_wrapper.open-menu .mobile-filter,
    #new_settings_wrapper.open-menu .mobile-filter:hover,
    #new_settings_wrapper.open-menu .mobile-filter:focus {
        color: #adc6d4;
        background-color: white;
        border-radius: 50px;
    }

    #modal-simple-jp-view .pointflow .info .row>.col-sm-11,
    .pointflow .info .row>.col-sm-11 {
        max-width: 100%;
    }
    .info.info-wrapper .info-creation .social-context {
        height: 30px;
        margin: 0;
        zoom: 1.1;
    }
    #modal-simple-jp-view #jp-posting .social-textarea {
        zoom: 1.05;
    }
    .info.comment .info-creation .social-context {
        top: 15px;
        right: -4px;
    }
    .info.info-wrapper .info-creation .social-context {
        position: relative;
        left: -36px;
        width: calc(100% + 55px);
        margin-top: 10px;
        padding: 4px 35px;
        /*background-color: #f5f5f5;*/
        border-top: 1px solid #eaeaea;
    }
    .info.info-wrapper .info-creation .boxlist {
        margin-top: 1px;
    }
    .info.info-wrapper .info-creation .boxlist .boxlist-text-wrapper .in-text {
        zoom: 1.3;
        left: 5px;
        top: 5px;
    }
    .info-options button {
        right: 5px
    }
    .info .content-wrapper .task-status.btn-group {
        display: none
    }
    .info .content-wrapper .share-jp-head .jp-head-link-wrapper {
        text-align: left;
    }
    .info .info-creation {
        width: 100%;
        border-bottom: 1px solid #eaeaea;
    }

    .pointflow .info .info-tags {
        position: relative;
        top: -4px;
    }

    .task-status.rating.btn-group.open .dropdown-menu.task-status-options {
        position: fixed;
        bottom: 0;
        top: auto;
        left: 0;
        width: 100%;
        height: 300px;
    }
    .info.info-wrapper .info.comment .cm-b {
        text-align: left;
    }

    .info .comment-controls span {
        font-size: 10pt;
        line-height: 13px;
        padding: 4px;
        margin-right: 10px;
        margin-top: 1px;
    }
    .info .comment-controls span.hasComments {
        margin-top: 0px;
    }

    .info.info-wrapper .comment .info-creation .social-context {
        float: none;
        display: inline-block;
        width: auto;
        left: auto;
        margin: 0;
        padding: 0;
        border: 0;
    }


    #jp-list.jp-list-overview .jp-list-row .task_changer_wrapper {
        width: 35px;
    }
    #jp-list.jp-list-overview .jp-list-row a.first-info.default {
        color: #5f6375 !important;
    }
    #modal-side-info .modal-pointflow-wrapper.element-content {
        max-height: 480px;
    }

    .modal-content .jp-form-style label {
        font-size: 10pt;
        margin-bottom: 0px;
        /*padding-bottom: 0px;*/
        line-height: 25px;
    }
    .modal-content .jp-form-style .row {
        margin-bottom: 15px;
    }

    .mobile-bottom-menu-inner {
        position: fixed;
        width: 100%;
        height: auto;
        bottom: 0px;
        top: auto;
        left: 0px;
        padding: 10px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        box-shadow: 0px -4px 15px #858b9e;
        z-index: 999999 !important;
    }
    .mobile-bottom-menu-inner a {
        font-size: 13pt;
    }
    .mobile-bottom-menu-inner .jp-form-style input,
    .mobile-bottom-menu-inner .jp-form-style .input-group-addon span,
    .mobile-bottom-menu-inner .sub-header-title {
        font-size: 12pt;
    }
    .mobile-bottom-menu .dropdown-backdrop {
        background-color: #8e99b347;
        backdrop-filter: saturate(180%) blur(2px);
    }



    #footer-time-tracking {
        bottom: 13px;
        right: 85px;
        z-index: 9999;
    }
    #footer-time-tracking .running-timetrack {
        display: inline-block;
        padding: 8px 15px;
        position: relative;
        top: 3px;
        background-color: white;
        text-align: center;
        position: fixed;
        border: -100%;
        width: 100%;
        height: 30px;
        bottom: 60px;
        box-shadow: none;
        border-radius: 0;
        border-top: 1px solid #eaeaea;
        left: 0;
        top: auto;
        padding: 0;
    }
    #footer-time-tracking .running-timetrack-inner {
        display: inline-block;
    }
    #footer-time-tracking .time-tracking-inner {
        box-shadow: none;
    }
    #jp-head-info .time-tracking {
        display: none
    }
}

@media(max-width: 420px) {
}

@media(max-width: 390px) {
    nav.navbar .btn-group>a,
    nav.navbar .collapse.navbar-collapse .btn-group,
    #global-menu-trigger {
        width: 55px;
    }
}

@media(max-width: 340px) {
    nav.navbar .btn-group>a,
    nav.navbar .collapse.navbar-collapse .btn-group,
    #global-menu-trigger {
        width: 45px;
    }
}

@media(max-height: 560px) {
    .posting .content {
        max-height: 180px;
    }
}

.button.pulseButton,
.btn-group.pulseButton .button{
    animation: pulseButton ease-in-out 2s;
    animation-iteration-count: infinite;
}

@keyframes pulseButton {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(238, 82, 83, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 14px rgba(238, 82, 83, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(238, 82, 83, 0);
    }
}