/*
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 : 18.03.2016, 14:28:23
    Author     : Jakob #2c3e50
*/

*, *:before, *:after {
    -webkit-backface-visibility: hidden;
}

*::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; border-radius: 16px; }
*::-webkit-scrollbar { width: 8px; height: 8px; background-color: #F5F5F5; border-radius: 16px;}
*::-webkit-scrollbar-thumb { background-color: #C1C1C1; border-radius: 16px;}

.nav-main-menu-inner::-webkit-scrollbar-track,
#jp-view::-webkit-scrollbar-track,
.modal-pointflow-wrapper::-webkit-scrollbar-track,
.dragscroll::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.0); background-color: transparent; border-radius: 16px; }
.nav-main-menu-inner::-webkit-scrollbar,
#jp-view::-webkit-scrollbar,
.modal-pointflow-wrapper::-webkit-scrollbar,
.dragscroll::-webkit-scrollbar{ width: 8px; height: 8px; background-color:transparent; border-radius: 16px;}
.nav-main-menu-inner::-webkit-scrollbar-thumb,
#jp-view::-webkit-scrollbar-thumb,
.modal-pointflow-wrapper::-webkit-scrollbar-thumb,
.dragscroll::-webkit-scrollbar-thumb{ background-color: #52576f22; border-radius: 16px;}

.nav-main-menu-inner::-webkit-scrollbar-track, 
.nav-main-menu-inner::-webkit-scrollbar,
.nav-main-menu-inner::-webkit-scrollbar-thumb,
#jp-view::-webkit-scrollbar-track, 
#jp-view::-webkit-scrollbar,
#jp-view::-webkit-scrollbar-thumb,
.modal-pointflow-wrapper::-webkit-scrollbar-track, 
.modal-pointflow-wrapper::-webkit-scrollbar,
.modal-pointflow-wrapper::-webkit-scrollbar-thumb,
.dragscroll::-webkit-scrollbar-track, 
.dragscroll::-webkit-scrollbar,
.dragscroll::-webkit-scrollbar-thumb{
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;
}

.nav-main-menu-inner:hover::-webkit-scrollbar,
#jp-view:hover::-webkit-scrollbar,
.modal-pointflow-wrapper:hover::-webkit-scrollbar,
.dragscroll:hover::-webkit-scrollbar{ width: 8px; height: 8px; background-color:#52576f22; border-radius: 16px;}
.nav-main-menu-inner:hover::-webkit-scrollbar-thumb,
#jp-view:hover::-webkit-scrollbar-thumb,
.modal-pointflow-wrapper:hover::-webkit-scrollbar-thumb,
.dragscroll:hover::-webkit-scrollbar-thumb{ background-color: #52576f55; border-radius: 16px;}

.mobile-in,
.nav>li.mobile-in, .mobile-in-ib {display: none;}

body {background-color: #EDEDED; background-color: #f7f7f7;}
a { color: #4869AD; }
a { color: #2d3f52; color: #1e1e1e;}

lord-icon { width: 26px; height: 26px; }
lord-icon.small { width: 12px; height: 12px; }

.btn-group.small .button {padding: 4px 8px 4px 8px; font-size: 10pt;}
.pro-lable {text-align: center; line-height: 15px; text-transform: uppercase; font-size: 9px; border-radius: 20px; padding: 3px 5px; color: white; background-color: #8e44ad}

.btn-group.select {margin: 0;}
.btn-group.select>a {padding: 5px 10px 5px 10px; margin: 0; font-size: 8pt; width: 100%; background-color: var(--inputBackgroundColor)}
.btn-group.select-group .custom-color {display: inline-block; float: left; margin-top: 2px; margin-right: 10px; width: 20px; height: 20px; border-radius: 30px;}
.btn-group.select-group .current-val .custom-color {position: relative; top: 3px; margin-top: 0px; height: 14px; width: 14px; margin-right: 3px;}
.btn-group.select-group .small-icon,
.btn-group.select-group .point-icon {display: inline-block; float: left; margin-right: 10px !important; width: 22px; height: 22px; border-radius: 30px;}

.btn-group.select-group .dropdown-menu a {padding-right: 40px;}
.btn-group.select-group .dropdown-menu a .small-icon,
.btn-group.select-group .dropdown-menu a .point-icon {position: relative; left: -10px; margin-right: 0px !important;}

.btn-group.select-group .current-val .small-icon {height: 14px; width: 14px; margin-right: 3px !important;}
.btn-group.select-group .current-val .point-icon {zoom: 0.88; margin-right: 3px}

.all-attributes .btn-group.select-group {width: 100%; }
.all-attributes .btn-group.select-group>a {text-align: left;}

.btn-group.select-group .current-val {display: inline-block; font-family: 'Montserrat-Regular'; font-size: 9pt; float: left;}
.editable.info-value-wrapper .btn-group.select-group .dropdown-menu {background-color: white;}
.editable.info-value-wrapper .btn-group.select-group .dropdown-menu li {margin: 0px; padding: 0px;}

.btn-group .dropdown-menu li a .dropdown-description {
    color: var(--textColorHelp);
    max-width: 250px;
    display: block;
    white-space: normal;
    line-height: 17px;
    font-style: italic;
}
.btn-group.select-group .current-val .dropdown-description {display: none;}

.ui-autocomplete {border: 0;}
.pac-container {
    z-index: 999999999 !important;
}

#fancybox-overlay {position: fixed; top: 0px; z-index: 999;}

/*#hw {height: 200px;}*/
#hw {height: 55px;}
#hw-line {height: 4px; background-color: #d0132d; box-shadow: 1px 0px 1px #333}
.hw-container {width: 98.5%; margin: auto auto 10px auto; position: absolute; left: 0.75%; top: 60px; height: calc(100% - 75px); margin-bottom: 0px; left: 0; width: 100%;}
.flex .hw-container { margin: 0; position: relative; top: 0; height: auto;}
.hw-container>.page-content {width: 100%; height: 100%; box-shadow: 0 1px 3px rgba(0,0,0,.3);}
.hw-container.full {height: auto; min-height: calc(100% - 80px); z-index: 3;}
.hw-container.service {width: 60%; left: 20%;}
#hw {position: relative; background-color: #2c3e50}
/*#hw>.hw-container {z-index: 1;}*/

nav.navbar { position: fixed; top: 0; width: 98%; height: 60px; z-index: 6; min-height: 60px; margin-bottom: 0; background-color: transparent; box-shadow: none; border: none;}
nav.navbar .navbar-brand {text-align: left; margin: 0px 10px;}
nav.navbar .navbar-brand, nav.navbar .navbar-header {width: 100%;}
nav.navbar .navbar-brand span {font-size: 12pt;}
nav.navbar .navbar-brand .image-wrapper {padding: 0; line-height: 60px; float: left; text-align: center; width: 100%;}
nav.navbar .dropdown-toggle.user-img-wrapper span.hairline {display: none;}
nav.navbar .navbar-toggle {display: none;}
/*nav.navbar .navbar-toggle {float: left; padding: 9px 10px; margin-left: 0px; margin-right: 0;}
nav.navbar .navbar-toggle:hover,
nav.navbar .navbar-toggle:focus {background-color: transparent; color: #D0132D;}
nav.navbar .navbar-toggle:hover .icon-bar {background-color: #D0132D; }*/
nav.navbar .top-menu a.dropdown-toggle .user-img {margin: 12px; float: left;}
nav.navbar .top-menu .image-wrapper .image-wrapper.user-img.round-img {height: 40px; width: 40px;}

nav.navbar .btn-group.open, 
nav.navbar .btn-group.open a {background-color: transparent; }
nav.navbar .btn-group.notification-top.open .dropdown-menu a {background-color: white; color: #000; padding: 10px}
nav.navbar .btn-group.notification-top.open a:hover {color: #000;}
nav.navbar .btn-group.open>a,
nav.navbar .btn-group.open a,
nav.navbar .btn-group.open a:hover,
nav.navbar .btn-group.open a:focus{color: white;}
nav.navbar .btn-group .dropdown-menu {background-color: #1f3042; width: auto; min-width: 270px;}
nav.navbar .btn-group.notification-top .dropdown-menu {background-color: white;}
nav.navbar .btn-group .dropdown-menu a {-webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}
nav.navbar .btn-group .dropdown-menu a:hover{background-color: #43596f}
nav.navbar .btn-group .dropdown-menu>li>a {line-height: 40px;}
nav.navbar .btn-group { display: block; float: left; height: 44px; line-height: 44px; font-size: 12px; margin-left: 2px;}
nav.navbar .btn-group a {padding: 0px 0px}
#nav-right-side-menu .btn-group a {padding: 0px 7px;}
nav.navbar .btn-group>a {display: inline-block; height: 55px; font-size: 12px;}
nav.navbar .collapse.navbar-collapse {width: auto; float: left; max-width: 100%; padding: 0;}
nav.navbar .collapse.navbar-collapse .btn-group {-webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}
.navbar-collapse {padding: 0px 8px;}

nav.navbar #global-menu a.active {background-color: #2e4b5f; font-family: 'Montserrat-Regular'; pointer-events: none;}
nav.navbar .user-img {background-size: auto 103%; background-image: url('/res/imgs/profilbild.svg');}

nav.navbar {width: 98%; left: 1%; margin: auto; height: 55px; min-height: 55px; padding-top: 4px; overflow: hidden;}
.flex nav.navbar {position: relative; width: 98%; left: auto; margin: auto; height: 55px; min-height: 55px; padding-top: 0px; border-radius: 0px;}
.flex .hw-container>.page-content {box-shadow: none;}
nav.navbar .navbar-brand .image-wrapper {line-height: 55px;}

nav.navbar .user-points-wrapper {padding: 2px 4px; line-height: 16px; font-size: 12px; border-radius: 10px; margin: 2px; background-color: #ffffffe3; text-align: center; color: #2c3e50}

nav.navbar a, nav.navbar .btn-group.open>a {
    color: #f4f4f4;
    padding-bottom: 5px;
}

nav.navbar,
.flex nav.navbar{
    /*background-color: #2b3e50;*/
    background: rgb(43,62,80);
    background: linear-gradient(180deg, rgba(43,62,80,1) 0%, rgba(67,86,123,1) 48%, rgba(30,48,82,1) 100%);
}

#nav-main-menu {
    background-color: #fefefe;
}

#nav-collapse .btn-group a.active:before,
#nav-collapse .btn-group a.active:after {
    content: ' ';
    position: absolute;
    width: 1rem;
    height: 1rem;
    right: 0;
    background:transparent;
    border-radius: 100vw;
}

#nav-collapse .btn-group a.active:before {
    top: -1rem;
    border-radius: 0 0 100vw 0;
    box-shadow: 3px 3px 0px 3px white;
}
#nav-collapse .btn-group a.active:after {
    bottom: -1rem;
    border-radius: 0 100vw 0 0;
    box-shadow: 3px -3px 0px 3px white;
}

.menu-btn {
    border-color: transparent;
    background-color: transparent;
    font-family: 'Montserrat-Regular';
}
.menu-btn.button.small {
    font-family: 'Montserrat-Regular';
}

.after-nav {margin-top: 60px;}
.top-menu {line-height: 60px;}
.top-menu .user-img {width: 40px; height: 40px; margin: 8px 2px;}
.top-menu .user-img-wrapper span.caret {margin-top: 21px;}
.top-menu a.dropdown-toggle {font-size: 13px;}
.top-menu.right {margin-right: 0;}



.notification-top {}
.notification-top,
.notification-top a {width: 44px; height: 44px; margin-right: 0px}
.notification-top a span {padding: 15px 0px;}
/*.notification-top a span {padding: 9px;}*/

.bubble-container {
    box-shadow: 0px 0px 3px #58617d;
    border-radius: 16px;
    line-height: 18px;
    color: #58617d;
    position: absolute;
    z-index: 99;
    top: 0px;
    left: calc(50%);
    width: max-content;
    background-color: white;
}

nav.navbar .btn-group .bubble-container a.newBubble,
nav.navbar .btn-group:hover .bubble-container a.newBubble,
nav.navbar .btn-group .bubble-container a.newBubble:hover,
nav.navbar .collapse.navbar-collapse .btn-group:hover .bubble-container a.newBubble:not(.active), 
nav.navbar .btn-group:hover .bubble-container a.newBubble:not(.active),
.bubble-container a.newBubble:not(.active){
    display: block;
    padding: 6px 4px;
    color: #58617d;
}

.bubble-container .newBubble[type="marked"],
.bubble-container a.newBubble[type="marked"],
nav.nabar .btn-group .bubble-container a.newBubble[type="marked"],
nav.navbar .collapse.navbar-collapse .btn-group:hover .bubble-container a.newBubble[type="marked"]:not(.active), 
nav.navbar .btn-group:hover .bubble-container a.newBubble[type="marked"]:not(.active) {
    color: var(--btnRedColor);
    font-family: 'Montserrat-Regular';
}

.bubble-container .newBubble .bubble-icon {
    display: inline-block;
    padding: 0px 5px;
}


.nav.nav-tabs.style-jp {border: 0; }
.nav-tabs>li {margin-bottom: 0px;}
.nav.nav-tabs.style-jp>li {margin-right: 5px; margin-left: 5px;}
.nav.nav-tabs.style-jp .dropdown-menu {padding: 0; border-top-left-radius: 16px; border-top-right-radius: 16px;}
.nav.nav-tabs.style-jp .dropdown-menu li.active a {background: none; background-color: white; font-family: 'Montserrat-Regular';}
.nav.nav-tabs.style-jp .dropdown-menu li a {padding: 2px 27px; min-width: 180px;}
.nav.nav-tabs.style-jp.jp-tabs .dropdown-menu li a {padding: 2px 10px}
.nav.nav-tabs .dropdown-menu .point-icon {float: left; margin-right: 10px;}
.nav.nav-tabs .dropdown-menu .round-img {margin-right: 10px !important;}
.nav.nav-tabs .dropdown-menu .divider {margin: 0;}

.user-img, 
.round-img.small {margin: 0; float: none; background-size: auto 100%;}
.round-img.small-icon {width: 24px; height: 24px; margin: 0 !important; float: left; margin-right: 5px !important;}



.gamepoint_icon {float: right; margin: 0px 5px; margin-top: 0px; color: #3195D3;}
#nav-game-points .gamepoint_icon {float: none;}
.gamepoint_icon.big {width: 29px; height: 29px; background-size: 29px; margin-top: 3px; margin-right: 0px;}
/*.gamepoint_icon:before {content: "\e133"}*/
.gamepoint_icon {width: 18px; height: 18px; background-position: center; background-size: 18px; background-image: url('/res/imgs/emoji/1f48e.svg')}
.push-m.success .push-m-c .glyphicon.gamepoint_icon { margin: 0; top: 4px; font-size: 10pt; float: none; color: #3195D3;}



#platform-version {position: absolute; top: 1px; left: 11px; font-size: 10px;}
#account-switch-wrapper {float: left; width: auto; height: 100%; color: white;}
#account-switch-wrapper .account-witch-s1 {display: block; float: left; margin-top: 15px; font-size: 13px;}
#account-switch-wrapper .btn-group {font-size: 14px; display: block; float: left; margin-left: 10px; height: 60px; line-height: 60px;}
/*#account-switch-wrapper .btn-group a {color: white;}*/
/*#account-switch-wrapper .btn-group.open a {color: #1e1e1e;}*/
#account-switch-wrapper .btn-group>a {padding: 0px 10px;}
#account-switch-wrapper .btn-group li {margin-bottom: 0;}

.flex #account-switch-wrapper .btn-group {height: 55px; line-height: 55px;}

#global-search-trigger .glyphicon {top: 4px;}
.global-search { cursor: pointer; font-size: 20px; padding-top: 10px;}
.global-search .glyphicon {float: right; color: white;}
.global-search .global-search-input {
    width: calc(100% - 10px);
    height: 40px;
    line-height: 40px;
    padding: 5px 5px;
    margin: 0px 5px;
    color: #333;
    background-color: transparent;
    font-size: 12pt;
    display: block;
    border: 0;
    border: 1px solid #9dafc6bd;
    border-radius: 25px;
}
.global-search.standalone .global-search-input {
    padding: 5px;
    height: auto;
    background-color: white;
    border: 1px solid #eaeaea;
}
.global-search.standalone.onFocus .global-search-input {
    position: relative;
    z-index: 1002;
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.global-search .ui-autocomplete {min-width: 0; height: auto; max-width: calc(100% - 15px); width: 100%; position: absolute; max-height: calc(100% - 90px); overflow-y: auto; background-color: transparent; box-shadow: none; border: 0;}
.global-search.standalone .ui-autocomplete {
    background-color: white; 
    max-height: none; 
    overflow: visible; 
    box-shadow: 1px -20px 18px #545a7991; 
    padding: 15px; 
    border-radius: 24px;
    max-width: calc(100% - 10px);
    width: calc(100% - 10px) !important;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border: 1px solid #eaeaea;
    border-top: 0;
    margin: 0;
}
.global-search .ui-autocomplete li.ui-menu-item {padding: 0; line-height: 35px; }
.global-search .ui-autocomplete li .col-xs-3,
.global-search .ui-autocomplete li .col-xs-2 {text-align: center; padding-right: 0;}
.global-search .ui-autocomplete li a.clickable-result {color: black;
    font-size: 12px;
    padding: 7px 5px;
    display: block;
    border: 1px solid #9da5b33b;
    line-height: 0;
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
    box-shadow: 1px 1px 2px #74788c2e;
    margin-bottom: 5px;
    margin-right: 5px;
    border-radius: 25px;
}
.global-search .ui-autocomplete li a.clickable-result .short-info .parent-jp-info {
    font-style: italic;
}
/*#global-search .ui-autocomplete li a:hover,
#global-search .ui-autocomplete li:focus a {background-color: #2196f3; color: white;}
#global-search .ui-autocomplete li a:hover .l-desc,
#global-search .ui-autocomplete li a:hover .short-info,
#global-search .ui-autocomplete li:focus a .l-desc,
#global-search .ui-autocomplete li:focus a .short-info{color: white;}*/
.global-search .ui-autocomplete li a.clickable-result .point-icon {margin: 0; padding: 0; transform: scale(0.95);}
.global-search .ui-autocomplete li a.clickable-result .short-info .point-icon {transform: scale(0.65); position: relative; top: -3px; float: left;}
.global-search .ui-autocomplete li a.clickable-result .l-desc {line-height: 20px; padding-right: 8px; font-family: Montserrat-Regular;} 
.global-search .ui-autocomplete li a.clickable-result .l-desc.full {display: block}
.global-search .ui-autocomplete li a.clickable-result .l-desc.full.show-details {display: block; line-height: 42px}
.global-search .ui-autocomplete li a.clickable-result .short-info {display: inline-block; color: #4A5E70; font-size: 8pt; line-height: 18px;}
.global-search a.clickable-result {background-color: white;}
.global-search .ui-menu-item:hover,
.global-search .ui-menu-item.ui-state-focus {background-color: white;}
.global-search a.clickable-result:hover,
.global-search .ui-menu-item.ui-state-focus a.clickable-result{background-color: #7277a70f;}
/*#global-search-trigger:hover, #global-search-trigger a:hover, #global-search-trigger.open, #global-search-trigger.open a {
    background-color: white; color: #D0132D;
}*/
.global-search .ui-autocomplete .item-group,
.boxlist .ui-autocomplete .item-group{
    /*text-align: center;*/
    font-size: 10pt;
    margin: 5px;
    padding: 10px;
    font-family: Montserrat-Regular;
    pointer-events: none;
}
.global-search .ui-autocomplete .item-group .group-counter,
.boxlist .ui-autocomplete .item-group .group-counter{
    padding: 3px 5px;
    min-width: 25px;
    text-align: center;
    margin: 0px 4px;
    color: #6f7998;
    display: inline-block;
}

.global-search.standalone .empty-global-search-info {
    background-color: white;
    width: calc(100% - 10px);
    margin: 0px 5px;
    border: 1px solid #eaeaea;
    border-top: 0;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
}

.global-search .clickable-result .custom-image {height: 40px; width: 40px; border-radius: 40px; margin: auto; background-position: center; background-size: 40px; margin-top: 2px;}
.empty-global-search-info {text-align: center; display: block; font-size: 10pt; padding: 15px; font-family: 'Montserrat-Regular';}

.global-search .search-entry-details {
    line-height: 23px;
    padding: 10px;
    margin: 0px 15px;
    background-color: #9092c10f;
    border-radius: 10px;
}

.global-search .search-entry-details a.action {
    display: inline-block;
    padding: 5px;
    border-radius: 30px;
    font-size: 10px;
    color: white;
    width: 24px;
    height: 24px;
    line-height: 17px;
    text-align: center;
    position: absolute;
    top: 1px;
    left: 90%;
    z-index: 5;
    background-color: #098ddf;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.global-search .search-entry-details a.action.action_phoneCall {
    background-color: #00b894;
}
.global-search .search-entry-details a.action.action_email {
    background-color: #098ddf;
}

.global-search .search-entry-details a.action.action_web {
    background-color: #e84393;
}
#search-menu .close-global-menu {
    position: absolute;
    left: -3px;
    z-index: 3;
    top: 6px;
    line-height: 30px;
    margin: 0px 5px;
    border-left: 0;
    border-bottom: 0;
    border-top: 0;
}


#footer {display: block; width: 100%; min-height: 100px; margin: 40px 0px;}
#bottom-info {
    height: auto;
    line-height: 15px;
    box-shadow: 0px -2px 6px #b9b9b994;
    background-color: #ffeca8;
    width: 400px;
    padding: 10px;
    position: fixed;
    bottom: 0;
    left: auto;
    z-index: 10;
    right: calc(50% - 200px);
}


.basic-container { width: 100%; max-width: 1870px; }
/*.top-menu {line-height: 58px;}
.top-menu .user-img {margin: 7px; width: 42px; height: 42px;}
.top-menu .user-img-wrapper span.caret {margin-top: 30px;}
.after-nav {margin-top: 55px;}*/
#navbar.navbar-collapse li { color: white; }
#push-m-gw {position: fixed; /*top: 7%;*/ bottom: 10px; z-index: 999999999; width: 380px; left: calc(50% - 175px); text-align: center;}

#push-m-gw .push-m {
    display: inline-block; 
    width: auto; 
    margin: auto; 
    margin-bottom: 15px; 
    border-radius: 50px;

    margin-bottom: 15px;
    padding: 12px 16px;
    border-radius: 24px;
}
.push-m { box-shadow: 0px 0px 10px #5a5a8373; background-color: #525c77; color: white; padding: 15px 10px;}
.push-m .push-m-c {font-size: 12pt; display: inline-block; font-family: 'Montserrat-Regular'; text-align: center; position: relative; color: white}
.push-m .push-m-c .glyphicon,
.push-m .push-m-c .far,
.push-m .push-m-c .fas {margin-right: 10px; font-size: 11pt; color: white}

.push-m .undo-button {
    display: inline-block;
    font-size: 12pt;
    font-family: 'Montserrat-Regular';
    text-align: center;
    position: relative;
    color: white;
    display: inline-block;
    border-left: 1px solid #eaeaea;
    margin-left: 10px;
    padding-left: 10px;
    float: right;
}
.push-m .undo-button a {color: white}
.push-m .undo-button lord-icon {
    width: 26px;
    height: 23px;
    float: left;
    color: white;
}

.push-m .feedback-message ul li,
.push-m .feedback-message.error ul li,
.push-m .feedback-message {
    background-color: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}

.push-m.default {background-color: #1abc9c;}
.push-m.success {background-color: #1abc9c;}
.push-m.error {background-color: #e74c3c;}
.push-m.send_email {background-color: #2196f3}
.push-m.time_tracking,
.push-m.working {background-color: #2196f3}

.push-m .gamepoint_infos {
    display: inline-block;
    position: absolute;
    padding: 5px;
    min-width: 60px;
    padding: 0px 10px;
    height: 30px;
    border-radius: 25px;
    background-color: white;
    color: #1abc9c;
    top: -30px;
    right: -30px;
    box-shadow: 0px 0px 3px #4e587482;
    font-size: 11pt;
    line-height: 30px;
}

.push-m .icon.rotate {
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}

/*.push-m.success .glyphicon {color: #1abc9c; }
.push-m.default .glyphicon {color: #3997d3; }
.push-m.error .glyphicon {color: #e74c3c; }*/
/*.push-m.default {background-color: #3997d3}*/
/*.push-m.success {background-color: #1abc9c;}*/

.image-wrapper .user-img.user-img-big {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 100%;
    /*background-image: url('/res/imgs/profilbild.svg');*/
}

#userprofile .image-wrapper,
#userprofile .user-img-big,
#userprofile .image-wrapper a.ed-f-t {
    width: 100px;
    height: 100px;
}
#userprofile .image-wrapper a.ed-f-t {
    left: calc(50% - 50px);
    top: calc(50% - 50px);
    line-height: 100px;
}


.hr-line {
    height: 2px;
    border-bottom: 2px solid #eaeaea;
}

.caret.bigger {
    border-top: 5px dashed;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
}

.breadcrumb-wrapper {
    width: 100%;
    height: 24px;
    font-size: 11px;
    /*border-bottom: 1px solid #cecece;*/
    /*background-color: white;*/
    /*    border-bottom: 2px solid #7D7D7D;
        background-color: rgb(123, 123, 123);*/
    /*    border-bottom: 2px solid #eaeaea;
        background-color: rgba(255, 255, 255, 0.5);*/
}

.breadcrumb-wrapper .placeholder {
    display: block;
    float: left;
    height: 100%;
    color: transparent;
    width: auto;
    padding-left: 100px;
    font-size: 14px;
}

.breadcrumb-wrapper .breadcrumb {
    padding: 0;
    margin: 0;
    line-height: 23px;
    font-family: 'Montserrat-Regular';
    background: none;
}
.page-content.breadcrumb-wrapper {height: 24px;}
.page-content.breadcrumb-wrapper .breadcrumb { line-height: 24px;}
.breadcrumb-wrapper .breadcrumb a {color: #2c3e50;}
/*.breadcrumb-wrapper .breadcrumb>.active {color: #CECECE;}*/ 

.breadcrump-wrapper .basic-container { padding-left: 30px; }

.breadcrumb-wrapper .root-jp {
    float: left;
    height: 42px;
    padding: 0px 10px;
    padding-left: 1px;
    margin-right: 20px;
    position: fixed;
    top: 60px;
    z-index: 99999998;
    background-color: white;
    border-radius: 20px;
    /* border-bottom-left-radius: 2px; */
    /* border-top-right-radius: 2px; */
    /* border-bottom-right-radius: 5px; */
    /* border-bottom-right-radius: 0px; */
    box-shadow: 0px 1px 3px #676767;
    opacity: 0.9;
    /* border: 1px solid #A5A5A5; */
}
.breadcrumb-wrapper .root-jp:hover {
    opacity: 1;
}
.breadcrumb-wrapper .root-jp>a{line-height: 41px; font-size: 14px;}
.breadcrumb-wrapper .root-jp .caret, .breadcrumb-wrapper .root-jp .glyphicon {color: #777;}
.breadcrumb-wrapper .root-jp .point-icon{display: block; float: left; margin-right: 5px;}

/*.btn-group .dropdown-menu form { width: 320px; }*/

/*.btn-group .dropdown-menu form button {text-align: center; background-color: #eaeaea; margin-top: 3px; height: 30px;}*/


.ax-f {margin: 10px;}
.ax-f.ax-nv {display: none;}
.ax-f, .ax-f .ax-op { background-color: rgb(247, 247, 247);}
.ax-f .ax-h {background-color: white; font-size: 10pt; font-family: 'Montserrat-Regular';}
.ax-f .ax-r {border:1px solid #E0E0E0}
.ax-f .ax-inner {padding: 7px;}
.ax-f .ax-r + .ax-r {border-top: 0;}
.ax-f input.ax-mi {border-radius: 0;}
.ax-f, .ax-f form input {font-size: 14px;}

.dropdown-menu.ax-f, .dropdown-menu.ax-f form {margin: 0; padding: 0; background-color: white; }

.dropdown-menu.ax-f .ax-h {border-top-right-radius: 4px; border-top-left-radius: 4px;}
.dropdown-menu.ax-f .ax-r {border-left: 0; border-right: 0;}


.settings-content .settings-header h2 {float: left; padding: 0; margin: 0; padding-top: 5px; padding-bottom: 15px; font-size: 15pt; font-family: 'Montserrat-Light'; color: #2c3e50;}
.settings-content .settings-header button {float: right}
.settings-content .settings-header {min-height: 40px;}
/*
================================================================================
JP
================================================================================
*/
.jp-options {height: 55px; line-height: 55px; background-color: var(--btnBColor);; font-size: 15px; padding: 0px 20px;}
.jp-options .btn-group,
.jp-options a {float: right; font-weight: bold; color: var(--textColor); padding: 0px 2px; margin-right: 10px; }
.jp-options a:hover {color: var(--btnHoverText); cursor: pointer;}

.jp-options a{ color: var(--btnBColor); }
.jp-options a:hover,
.jp-options a:focus,
.jp-options a.active,
.jp-options a.favourite{ color: var(--textColor); }
.jp-options a.active {font-family: 'Montserrat-Regular';}

.jp-options .btn-group a {float: none; text-align: left;}
.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: 10px;}
.jp-options .btn-group .dropdown-menu a {margin: 0;}
.jp-options .btn-group .dropdown-menu a:hover {color: var(--btnHoverText);}

#jp-head-info .root-group .icon-wrapper {
    float: left;
    position: relative;
}
#jp-head-info .root-group .icon-wrapper .point-icon {
    position: relative;
    background-color: white;
    border-radius: 100%;
}


#jp-head-info .jp-head-info-wrapper {height: 55px; padding-left: 6px; padding-top: 6px; background-color: #F6F6F6;}
#jp-head-info .jp-head-info-wrapper>.row {margin-right: 0px;}
#jp-head-info .jp-head-info-wrapper .col-sm-11 {padding-left: 0;}
.no-f .team-member,
#jp-head-info .team-member,
.coll-entry .coll-entry-img-wrapper .team-member{margin: 0 !important; float: none;}
#jp-head-info .round-img {margin-left: 10px !important;}
.jp-tabs.nav.nav-tabs li a .glyphicon,
.jp-tabs.nav.nav-tabs li a .fas,
.jp-tabs.nav.nav-tabs li a .fa,
.jp-tabs.nav.nav-tabs li a .far {padding-right: 7px;}
.jp-tabs.nav.nav-tabs li a {padding: 10px 5px;}
.jp-tabs.nav.nav-tabs li a:focus {outline: none;}
#jp-head-info .jp-head-info-wrapper h1 {font-size: 14px; line-height: 14pt; padding: 0;}
#jp-head-info .jp-head-info-wrapper h1 .label{ font-size: 11px; left: 5px; display: inline-block; position: relative; font-family: 'Montserrat-Light';}
#jp-head-info .jp-head-info-wrapper h1.no-bc {margin-top: 13px;}
#jp-head-info .task-status.btn-group {top: -28px;}
#jp-head-info.page-content .jp-head-info-wrapper{background-color: transparent;}
#jp-head-info.page-content .jp-head-info-wrapper.account {text-align: center;}
#jp-head-info.page-content .jp-head-info-wrapper.account h1 {font-size: 11pt; display: inline-block; margin-top: 0px; line-height: 45px;}
#jp-head-info.page-content .jp-head-info-wrapper.account h1 .h1-title {display: inline-block; margin-left: 15px;}
#jp-head-info.page-content .jp-head-info-wrapper.account h1 .round-img.team-member {display: inline-block; float: left; }

#bt_add_team_member.team-member {border: 1px dashed #f1c412}

.jp-list-overview .infobox {margin: 5px 0px;}
.jp-list-overview .infobox .infobox-header {height: auto; min-height: 49px; line-height: 15px; padding-bottom: 10px; border-bottom: 1px solid #eaeaea;}
.jp-list-overview .infobox .infobox-header .label {font-family: 'Montserrat-Light'; position: relative; top: -2px; padding: 0.4em .8em;}
.jp-list-overview .infobox .option-content.show {border: none;}
.jp-list-overview .jp-list-row {margin: 5px 0px; padding: 4px 0px; border-bottom: 2px solid #eaeaea; -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 {margin: 0px; padding: 6px 0px; padding-bottom: 12px; line-height: 0px; /*line-height: 25px; height: 42px;*/}
.user-list.jp-list-overview .jp-list-row {line-height: 20px; padding: 10px 0px;}
.jp-list-overview.big .jp-list-row {height: 65px;}
.jp-list-overview .jp-list-row .jp-title {overflow: hidden; height: 23px; display: inline-block;}
.jp-list-overview .jp-list-row .progress {width: 100%; max-width: 130px; float: right; position: relative; top: 14px; left: 15px;}
.jp-list-overview .jp-list-row .progress, 
.jp-list-overview .jp-list-row .progress .progress-bar {height: 2px; margin: 0;}
.jp-list-overview .jp-list-row .edit {
    opacity: 0;
    -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 .list-row-sub-details {margin-left: 13%;}

.jp-list-overview .jp-list-overview-group-header {padding: 10px; margin-top: 15px;}
.jp-list-overview .jp-list-overview-group-header a {float: left;}

.jp-list-overview .jp-list-overview-group-header a .round-img.small {margin-right: 15px !important; position: relative; top: -3px; }
.jp-list-overview .jp-list-overview-group-header a .point-icon.small {margin-right: 15px; float: left; position: relative; top: -4px;}
.jp-list-overview .jp-list-overview-group-header .option-group.small {float: right; margin-right: 20px; margin-top: -5px;}


#jp-list.jp-list-overview .jp-list-row a {line-height: 25px; width: 80%; display: inline-block; word-break: break-all;}
#jp-list.jp-list-overview .jp-list-row {line-height: 25px; padding: 10px 0px; }
#jp-list.jp-list-overview .jp-list-row .task_changer_wrapper {display: inline-block; width: 60px; height: 25px; /*margin-left: 10px;*/ float: left;}
#jp-list.jp-list-overview .jp-list-row .jp-title {overflow: visible; height: auto;}
/*#jp-list.jp-list-overview .jp-list-row a {line-height: 20px;}*/
#jp-list.jp-list-overview .jp-list-row a.edit {float: right; width: auto; }

#jp-list.jp-list-overview .jp-list-row .relation-info .jp-title{padding-left: 5px;}
#jp-list.jp-list-overview .jp-list-row .relation-info .point-icon {float: left}

#jp-list.jp-list-overview .jp-list-row.new-task-row {background-color: #9d9db614; border-bottom: 0;} 
#jp-list.jp-list-overview .jp-list-row.new-task-row .trigger-add-task,
#jp-list.jp-list-overview .jp-list-row.new-task-row a.trigger-add-task{
    display: inline-block; line-height: 25px; width: 20px; margin-right: 15px; text-align: center;
}
#jp-list.jp-list-overview .jp-list-row.new-task-row .trigger-add-task i{
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
} 
#jp-list.jp-list-overview .jp-list-row.new-task-row .trigger-add-task:hover i{
    transform: scale(1.3);
}

#jp-list.jp-list-overview .jp-list-row.new-task-row .desc_area {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    height: 0;
    overflow: hidden;
}
#jp-list.jp-list-overview .jp-list-row.new-task-row .desc_area.show {
    height: auto;
}

#jp-list.jp-list-overview.all-done .jp-list-row.new-task-row {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

#jp-list.jp-list-overview.all-done .jp-list-row.new-task-row {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
#jp-list.jp-list-overview .new_tasks_container {
    border-bottom: 1px solid #e1e5eb
}
#jp-list.jp-list-overview.all-done .new_tasks_container {
    border-bottom: 0;
}

#task_list #jp-list.jp-list-overview .jp-list-row.new-task-row .trigger-add-task, 
#task_list #jp-list.jp-list-overview .jp-list-row.new-task-row a.trigger-add-task {
    width: 35px;
    margin-right: 10px;
}

.jp-list-overview .jp-list-row:hover {background-color: rgba(241, 233, 225, 0.12)}
.jp-list-overview .jp-list-row:hover .edit {opacity: 1;}
.jp-list-overview.user-list .team-member {margin: 0 !important; float: none;}
.jp-list-overview.sortable-list .jp-list-row.ui-sortable-helper {background-color: white; box-shadow: 3px 3px 8px rgba(0,0,0,0.45); border: 2px dotted #eaeaea; transform: rotate(1deg)}

#today-list-overview {max-height: 550px; overflow-y: auto;}
#today-list-overview .jp-list-row {border-bottom: 2px solid #eaeaea; margin: 15px 10px; padding-bottom: 10px;}
#today-list-overview .jp-list-row .col-sm-1 {height: 25px;}

#today-list-overview .time-stap {width: 100%; padding: 10px 0px; text-align: center;}
#today-list-overview .time-stap span {display: inline-block; padding: 3px 15px; text-align: center; border-radius: 20px; color: white; }
#today-list-overview .time-stap span[status="-1"] {background-color: #d0112c;}
#today-list-overview .time-stap span[status="0"] {background-color: #22a6b3;}
#today-list-overview .time-stap span[status="1"] {background-color: #eaeaea; color: #333}

.jp-list-row.no-margin {margin: 0; padding: 5px 0px;}


.dropToTask.dragover {
}

#dragover-info {
    display: none;
    width: 100%;
    height: 100%;
    background-color: #ffffffbf;

    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    text-align: center;
    opacity: 0;

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

.dropToTask.dragover #dragover-info,
#dragover-info.show{
    display: block;
    opacity: 1;
}
#dragover-info .inner-content {
    display: inline-block;
    width: 225px;
    height: 225px;
    padding: 45px;
    padding-top: 70px;
    font-size: 10pt;
    font-family: 'Montserrat-Regular';
    color: #007fff;
    line-height: 26px;
    border-radius: 100%;
    background-color: white;
    position: fixed;
    left: calc(50% - 122.5px);
    top: calc(50% - 170px);
    box-shadow: 0px 3px 20px 0px rgb(43 45 61 / 15%);
}

#dragover-info .inner-content .fas{
    font-size: 45pt;
    margin-bottom: 10px;
}
.dropToTask.dropped #dragover-info .inner-content .fas,
#dragover-info.show .inner-content .fas{
    animation: rotation 3s infinite linear;
    color: #2ecca0;
}
.dropToTask.dropped #dragover-info .inner-content .fas:before,
#dragover-info.show .inner-content .fas:before{
    content: "\f021";
}

.dropToTask.dragover * {pointer-events: none;}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}


/*
================================================================================
side-menu / controls
================================================================================
 
*/

#dashboard .inner-main-row {width: 98%; margin: auto;}
#dashboard .dashboard-element {margin-bottom: 25px;}
.dashboard-element .element-header {padding: 15px; border-top: 6px solid #2c3e50}
/*.dashboard-element .element-header.green {border-color: #55efc4}
.dashboard-element .element-header.red {border-color: #fab1a0}
.dashboard-element .element-header.blue {border-color: #74b9ff}*/
.dashboard-element .element-content {padding: 15px;}
.dashboard-element #dashboard-newsfeed {height: 600px; overflow-y: auto;}
#dashboard-newsfeed .pointflow .info {max-width: 100%; padding-top: 20px; padding-bottom: 20px;}
#dashboard-newsfeed .pointflow .info .page-content {max-width: 100%; border-bottom: 2px solid #eaeaea; border-radius: 0;}
#dashboard-newsfeed .pointflow .info .pointflow-vl {left: 30px;}

.top-players .top-player {padding: 5px 10px; border-bottom: 1px solid #eaeaea; margin-bottom: 5px; line-height: 28px;}
.top-players .top-player[rank='0'] {font-family: 'Montserrat-Regular';}
.top-players .top-player[rank='1'],
.top-players .top-player[rank='2']{font-family: 'Montserrat-Light';}


.top-players .top-player .image-wrapper{width: 35px; height: 35px; margin: 0 !important; padding: 0; display: inline-block; }
.top-players .top-player .gamepoint_icon {margin-top: 5px;}
.top-players .top-player .top-player-1 {    
    position: absolute;
    z-index: 2;
    top: -10px;
    left: calc(50% + 6px);
    width: 20px;
    height: 20px;
    background-position: center;
    background-size: 20px;
    background-image: url(/res/imgs/emoji/1f451.svg);}

.mainframe-row {margin: 0; display: flex; /*height: 100%;*/}
.flex .mainframe-row {display: block; height: auto;}
.mainframe-row .inner-main-row {margin: 0; display: flex; height: calc(100%);}
.mainframe-row > .col-sm-3 {width: 23%;}
.mainframe-row > .col-sm-9 {width: 77%;}

.mainframe-row .inner-main-row .col-sm-9,
#right-side-options-wrapper,
#side-content-wrapper,
.mainframe-row.fullscreen.t2 > .col-sm-9,
.mainframe-row.fullscreen.t2 .col-side-options,
.mainframe-row.fullscreen.t3 > .col-sm-9,
.mainframe-row.fullscreen.t3 .col-side-options {-webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}

.mainframe-row .inner-main-row.fullscreen {overflow: hidden;}

.mainframe-row .inner-main-row.fullscreen #right-side-options-wrapper,
.mainframe-row.fullscreen.t2 #right-side-options-wrapper,
.mainframe-row.fullscreen.t2 .col-side-options,
.mainframe-row.fullscreen.t3 #right-side-options-wrapper,
.mainframe-row.fullscreen.t3 .col-side-options {width: 0; height: 0; overflow: hidden; padding: 0; min-width: 0;}

.mainframe-row.fullscreen.t3 #process-status-pipeline {display: none;}

.mainframe-row.fullscreen.t2 .col-sm-8.main-column,
.mainframe-row.fullscreen.t3 .col-sm-8.main-column {width: 100%}

.mainframe-row .inner-main-row.fullscreen > .col-sm-9,
.mainframe-row .inner-main-row.fullscreen > .col-sm-8{width: 100%; height: auto;}
.row .padding-no {padding: 0;}
.mainframe-row .inner-main-row>.col-sm-9>.page-content,
.mainframe-row .inner-main-row>.col-sm-8>.page-content {position: relative; z-index: 2;}

@keyframes cx {
    0% {
        opacity: 1;
    }
    99% {
        opacity: 0;
    }
    100% {
        display: none;
    }
}

/*#main-content {width: calc(100% - 495px); margin-left: 465px;}*/
/*#main-content {width: calc(100% - 450px); margin-left: 415px;}*/
#main-content {display: none;}
/*#main-content {width: calc(95% - 450px); margin: auto; max-width: 1440px; margin-left: 450px;}*/
#main-content {width: calc(95% - 355px); margin: auto; max-width: 1440px; margin-left: 423px;}
.collapsed #main-content { width: 80%; margin-left: auto;}
.full #main-content,
.collapsed #main-content {display: block;}
#main-content h1 .label{ font-size: 11px; top: -2px; left: 5px; display: inline-block; position: relative; font-family: 'Montserrat-Light';}

#jp-view {height: calc(100% - 117px); height: calc(100% - 95px); overflow: visible; padding: 15px 10px;}
#jp-view.middle { height: calc(100% - 55px);}

.view-mainframe .view-mainframe-head-info.root {display: none;}

#jp-setting-view {width: 78%; margin: auto;}
.settings-content .settings-header button {margin-right: 15px;}

#side-content-wrapper {height: 100%;}
#side-options {width: 55px; height: 100%; float: left; background-color: #FCFCFC;}

#side-options-content .main .icon-wrapper {padding-top: 7px; padding-left: 0px; padding-right: 10px; float: left; height: 55px;}

#side-options .main {width: 100%; height: 55px; background-color: #F6F6F6 ; padding-top: 6px; padding-left: 6px; }
#side-options .main .user-img.round {margin: auto !important;  width: 40px; height: 40px;}
#side-options .main .point-icon {position: relative; left: -1px;}
#side-options .placeholder,
#side-options .placeholder-c {width: 44px; height: 50px; text-align: center;}
#side-options .placeholder-c {height: 5px; border-top: 5px solid #4a5e70;}

#side-options .nav.nav-tabs,
#side-options .nav.nav-tabs li,
#side-options .nav.nav-tabs li a{ margin: 0; padding: 0; border: 0; background-color: transparent; }
#side-options .nav.nav-tabs li a {width: 55px; height: 44px; padding-left: 6px; text-align: center; }
#side-options .nav.nav-tabs li a .glyphicon { margin: 11px 0px; font-size: 19px;}
#side-options .nav.nav-tabs li.active a {background-color: white;}
#side-options .nav.nav-tabs li.active a .glyphicon {color: #d0132d;}
#side-options .nav.nav-tabs li a:before,
#side-options .nav.nav-tabs li a:after {border: 0; border-color: transparent;}

#side-options-content {width: calc(100% - 55px); margin-left: 55px; height: 100%; background-color: white;}
/*.collapsed #side-options-content {display: none;}*/
.full #side-options-content {display: block;}
.collapsed #side-options-content,
.full #side-options-content {width: 360px;}
#side-options-content .infobox .option-content {border: 0;}
#side-options-content .main {height: 55px; line-height: 55px; padding-left: 10px; background-color: #F6F6F6; box-shadow: 0px 2px 3px #eaeaea; /*border-right: 1px solid #e6e6e6;*/}
#side-options-content>.infobox {height: 100%; background-color: white; border-left: 0;}
#side-options-content .page-content {border: 0px; box-shadow: none;}
#side-options-content>.infobox .page-content {height: calc(100% - 95px); overflow: auto;}
#side-options-content .jp-stat-wrapper {position: absolute; bottom: 90px; width: 100%;}
#side-options-content .tab-content {overflow: auto; overflow-x: hidden; height: calc(100% - 55px);}
#side-options-content .m-side-options-trigger {display: none;}
#side-options-content .main .user-img.round.team-member {margin-top: -2px !important;}
#side-options-content .main .btn-group.task-status {position: absolute; left: 35px; top: 20px;}
#side-options-content .main {position: relative;}
/*#side-options-content .main:after, #side-options-content .main:before {
    top: 10px;
    left: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

#side-options-content .main:before {
    border-color: rgba(136, 183, 213, 0);
    border-top-color: #FFFFFF;
    border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  
  border-left: 30px solid white;
    
}*/

/*#content-bar-top {width: calc(100% - 400px); height: 51px; margin-left: 400px; border-bottom: 1px solid #ccc; margin-top: -1px;}*/
#content-bar-top { height: 55px; line-height: 55px; padding-left: 10px; background-color: #F6F6F6; border-right: 1px solid #e6e6e6;}
.collapsed #content-bar-top {padding-left: 21px;}
.account_overview #content-bar-top {width: 100%; margin-left: 0;}
#content-bar-top h1 {display: inline-block;  float: left; margin: 0; padding: 0 5px; line-height: 53px; font-size: 11pt; font-family: 'Montserrat-Regular';}
#content-bar-top h1 .glyphicon {display: inline-block; float: left; padding-right: 15px; font-size: 16px; line-height: 52px;}
#content-bar-top .nav.nav-tabs {display: inline-block; float: left; margin-left: 20px;}
#content-bar-top .nav.nav-tabs li a {line-height: 26px;}
#content-bar-top .breadcrumb-wrapper {padding-top: 15px;}

/*#jp-info-modal .jp-form-style label {text-align: left; line-height: 10px;}*/
#jp-info-modal .jp-form-style label {line-height: 30px;}
#jp-info-modal .jp-form-style .option-group.small .option input + label {line-height: 19px;}
#jp-info-modal .row-bottom-margin .row, .form-rows .row {margin-bottom: 20px;}
#jp-posting .form-rows .row {margin-bottom: 10px;}
#jp-info-modal .jp-form-style label.onoffswitch-label {line-height: 23px;}
#jp-info-modal .image-wrapper,
#jp-info-modal .image-wrapper a.ed-f-t {width: 80px; height: 80px;}
#jp-info-modal .image-wrapper a.ed-f-t {
    line-height: 80px;
    left: calc(50% - 40px);
    top: calc(50% - 40px);
    font-size: 20px;
}

#jp-info-modal .jp-form-style label{line-height: 15px}
.modal .modal-body, .modal .modal-footer {margin: 0px;}

#dynamic-table {overflow: auto; position: absolute; width: 98.7%; height: 750px; background-color: white;}
#dynamic-table-options {float: right; width: 85px;}
#dynamic-table-header {padding: 10px 2px; margin-top: 5px;}
#dynamic-table-header .point-icon,
#dynamic-table-header .round-img {float: left;}
#dynamic-table-header .type-title {padding: 5px 10px; line-height: 30px;}
#dynamic-table-header .active-filters {display: inline-block;}

#jp-filters.button {float: right; width: 48px;}
/*
================================================================================
infobox
================================================================================
*/


/*.infobox { padding-left: 30px; }*/
/*.infobox .option-toggle { margin-top: 10px; }*/
/*.infobox .option-toggle:before { top: 14%; }*/
.infobox ul { padding-left: 0; background-color: transparent; }
.infobox ul.dropdown-menu,
.infobox ul.dropdown,
.infobox ul.ui-autocomplete,
.autofillable + ul.ui-autocomplete{
    background-color: white;
    border-radius: 16px;
    min-width: 100%;
}
.infobox ul.ui-autocomplete li.ui-menu-item {
    border-radius: 0;
}
.infobox ul.ui-autocomplete li.ui-menu-item + li.ui-menu-item{
    border-radius: 0;
    border-top: 1px solid var(--textColorLight);
}
.infobox ul.ui-autocomplete .ui-menu-item:hover,
.infobox ul.ui-autocomplete .ui-menu-item:focus,
.infobox ul.ui-autocomplete .ui-menu-item.ui-state-focus,
.infobox ul.ui-autocomplete li.ui-menu-item + .ui-menu-item.ui-state-focus,
.infobox ul.ui-autocomplete li.ui-menu-item + .ui-menu-item:focus,
.infobox ul.ui-autocomplete li.ui-menu-item + .ui-menu-item:hover {
    background-color: var(--btnHover);
    color: var(--btnHoverText);
    border-radius: 16px;
    border-color: var(--btnHoverText);
}
.infobox ul.ui-autocomplete .ui-menu-item:hover a,
.infobox ul.ui-autocomplete .ui-menu-item:focus a,
.infobox ul.ui-autocomplete .ui-menu-item.ui-state-focus a{
    color: var(--btnHoverText);
}
.infobox ul.ui-autocomplete .list-header,
.infobox ul.ui-autocomplete .list-header.ui-state-focus,
.autofillable + ul.ui-autocomplete .list-header,
.autofillable + ul.ui-autocomplete .list-header.ui-state-focus{
    padding: 5px 15px;
    font-size: 12pt;
    line-height: 20px;
    background-color: transparent;
    font-family: 'Montserrat-Regular';
    color: var(--btnGreenColor);
    margin-bottom: 0;
    pointer-events: none;
}
.infobox ul li {
    list-style: none;
    padding: 0;
    margin: 0;
    /*padding-left: 20px;*/
    line-height: 40px;
}
.infobox ul li:not(.divider) {
    min-height: 40px;
}

.infobox ul li.hr-line {height: 20px;}
/*.infobox ul li a { display: block; width: 100%; }*/
.infobox ul li img, .infobox ul li .point-icon { margin: auto; margin-top: 8px; }

.infobox>ul>li.hr-line {
    height: 2px;
    line-height: 2px;
    margin-right: 20px;
    margin-left: 20px;
    padding-left: 0;
    border-bottom: 2px solid #eaeaea;
}

.option-content .padding {padding: 0px 20px; }
.option-toggle:hover {
    background-color: var(--btnHover);
    color: var(--btnHoverText);
}

.infobox ul .option-content li+li {
    /*border-top: 2px solid #eaeaea;*/
}

.infobox .option-content { border-top: 0;border: 0;}
.infobox .option-content.lh-min li{
    line-height: 20px;
    height: auto;
    /*padding-top: 15px;*/
    margin-bottom: 10px;
    width: max-content;
}
.infobox .option-content.lh-min .jp-tree li {
    padding-top: 0;
    margin-bottom: 0;
}

.infobox .infobox-header {
    height: auto;
    line-height: 20px;
    font-family: 'Montserrat-Regular';
    font-size: 10pt;
    /* border: 1px solid #dfdfdf; */
    /* border-top: 0; */
}

.infobox.tabs .infobox-header { border: 1px solid #d6dce7; margin-bottom: 10px; border-radius: 5px; margin-top: 30px;}
.infobox.tabs .option-content {border-left: 1px solid #3498db;  padding: 15px; margin-bottom: 15px;}
.infobox.tabs .option-content.show {border-top: 0;}

.infobox .infobox-header.mainheader{
    background-color: #4A5E70;
    background-color: #353535;
    color: white;
    border: 0;
}
#side-options-content .option-toggle-wrapper,
.infobox .option-toggle-wrapper {float: right; margin-top: 0px;}
#side-options-content .option-toggle-wrapper {margin-top: 0px;}
#side-content-wrapper .option-toggle-wrapper .option-toggle.smaller {margin-top: 2px;}
#side-content-wrapper .option-toggle-wrapper .option-toggle.smaller:before {top: 9%}

.infobox.footer-tap {
    position: fixed;
    /* top: 60px; */
    bottom: 0;
    /*left: 50px;*/
    left: 2.5%;
    width: 390px;
    width: 22.89%;
    z-index: 1020;
    box-shadow: 2px 2px 3px #C1C1C1;
    /* height: 100%; */
    /* display: block; */
    /* background-color: white; */
    border: 0;
    /* border-right: 2px solid #DCDCDC; */
    /* display: none; */
}

.infobox.footer-tap ul {
    padding-left: 0;
    background-color: white;
    border-top: 0;
    border: 0;
    box-shadow: none;
    margin-bottom: 0;
}

.infobox.footer-tap ul,
.infobox.footer-tap .infobox-header {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.infobox.footer-tap .option-content {
    padding-bottom: 15px;
}

.infobox.footer-tap .infobox-header .point-icon {
    display: block;
    float: left;
    margin-right: 10px;
}


/* bubble */

.bubble {
    display: inline-block;
    text-align: center;
    line-height: 16px;
    min-width: 16px;
    padding: 1px 8px 1px 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

.bubble.hidden {
    display: none;
}

.bubble.bubble-blue,
.bubble.bubble-red,
.bubble.bubble-orange{
    color: white;
}

.bubble.bubble-orange {background-color: #e87e20}

.bubble.bubble-red {
    background-color: #E30613;
}

.bubble.bubble-blue {
    background-color: #0D639C;
}

.bubble.notification-bubble {
    position: absolute;
    top: 18px;
    right: -13px;
}

table thead {
    /*    background-color: #2a3c4f;
        color: white;*/
    font-family: 'Montserrat-UltraLight'; font-size: 11pt;
}

.table .image-wrapper {display: inline-block; width: 39px; height: 39px;}
.table.user-table td{line-height: 39px;}


/*
================================================================================
pointflow
================================================================================
*/

.info-row { display: block; width: 100%; }
.info-row h1, h1.spec {margin: 0; padding: 5px 0px; font-family: 'Montserrat-Regular'; }
.jp_blank .info-row h1, h1.spec {border: 0; font-size: 15pt; font-size: 18px; padding-right: 10px; padding-top: 5px; margin-bottom: 0; line-height: 23pt; padding-top: 9px; line-height: 18pt; font-size: 20px;}
.info-row.margin-bottom { margin-bottom: 10px; }
.info-row.margin-top, .info .margin-top { margin-top: 2px; }
.info-row .margin-top {margin-top: 8px;}
.info-row .col-dyn-2,
.info-row .col-dyn-3 {
    padding-left: 20px;
}

.info-row .col-dyn-1,
.info-row .col-dyn-2,
.info-row .col-dyn-3,
.info-row .col-dyn-4,
.info-row .col-fix-s,
.info-row .col-fix-m,
.info-row .col-fix-lg { float: left; height: auto; min-height: 1px;}

.info-row .col-dyn-1 {width:  calc(100% - 40px);}
.info-row .col-dyn-2 { width: calc(100% - 100px); height: 100%; }
.info-row .col-dyn-3 {width: calc(100% - 365px); height: 100%;}
.info-row .col-dyn-4 {width: calc(100% - 80px); height: 100%;}
.info-row .col-fix-m + .col-dyn-2,
.info-row .col-fix-s + .col-dyn-2 { width: calc(100% - 100px); }

.info-row .col-fix-s { width: 40px;  position: relative;}
.info-row .col-fix-m { width: 40px;  }
.info-row .col-fix-lg {width: 305px; }

.info-row .image-wrapper { width: 100%; height: 40px; background-color: white; text-align: center; line-height: 30px;}
.info-row .image-wrapper.bcolor-gray {background-color: #eaeaea;}
.info-row .image-wrapper.bordered { border: 2px solid #eaeaea; }
.info-row .image-wrapper.img-include { background-position: top center; background-size: 100% auto; }
.info-row .image-wrapper img {max-width: 36px; max-height: 42px;}

.info .content-row.content-header {padding: 5px 15px;
                                   border-bottom: 1px solid #eaeaea;
                                   background-color: rgb(255, 253, 246);
                                   border-top-left-radius: 5px;
                                   border-top-right-radius: 5px;
                                   margin: -5px -10px;
                                   margin-bottom: 15px;}

.pointflow .info,
.page-content.padding,
.info-based.nav-wrapper {padding: 10px 20px; padding: 5px 10px; /*border-radius: 10px; border-radius: 5px; padding-right: 5px;*/}
.jp_blank.page-content.padding {padding: 4px 9px; margin-bottom: 20px;}
.info {display: block; }
.info.public { border-right: 3px solid #0D639C; }
.info.private { border-right: 3px solid #f1c40f;}
.info.solution { border-right: 3px solid #1abc9c; }
.jp_blank.info.public, .access-mode.public { border-left: 3px solid #0D639C; border-right: 1px solid #DCDCDC; }
.jp_blank.info.private, .access-mode.private { border-left: 3px solid #f1c40f; border-right: 1px solid #DCDCDC;}
.info-based.info div.text-content {margin-top: 0px;} 
.info .single div.text-content {margin-top: 5px; margin-bottom: 0px;}
.pointflow.no-margin .info{margin-bottom: 0px;}
.pointflow.no-margin .info + .info { border-top: 0;}
.pointflow .sub-info-wrapper {padding-left: 20px; padding-top: 0px;}
.pointflow .info>.sub-info-wrapper>.info {margin: 0; max-width: 100%; padding-top: 20px;}
.pointflow .info>.sub-info-wrapper>.info .sub-info-wrapper .info {margin-right: -3px;}
.pointflow .sub-info-wrapper .info {box-shadow: none; padding: 0;}
.pointflow .sub-info-wrapper .info .text-content,
.pointflow .sub-info-wrapper .info div.margin-top {margin-top: 0px;}
.pointflow .sub-info-wrapper .info .col-sm-1,
.pointflow .sub-info-wrapper .info .col-xs-1 {padding-right: 0px; width: 45px;}
.pointflow .sub-info-wrapper .info .info-creation {margin-left: 0;}
/*.pointflow .sub-info-wrapper .info .task-status.btn-group {top: -15px; left: 12px;}*/
.pointflow .info {border-bottom: 1px solid #eaeaea;}
.pointflow .info.unread .page-content{border-color: #9f57fe}
.pointflow .info .round-img.small { width: 24px; height: 24px; margin: 0 !important; padding: 0; margin-right: 5px !important;}
.pointflow .info .round-img.small.custom-icon {width: 26px; height: 26px; margin: auto !important; display: block;}
.pointflow .info,boxlist-text-wrapper
.info-based.nav-wrapper.info,
.page-content.padding.nav-wrapper.info
{
    border: none;
    margin: auto;
    margin-bottom: 10px;
    border-radius: 10px;
    max-width: 90%;
}
.pointflow .info .info {display: inline-block; max-width: 100%;}
.pointflow .info {margin-bottom: 0px; padding-bottom: 10px;}

.time-mark {position: sticky; top: 5px; z-index: 22; margin: 10px auto; padding: 5px; margin-bottom: 10px; background-color: #f9fafb; border-radius: 30px;}
.time-mark span{ padding: 5px 10px; margin-left: -5px; text-align: center; background-color: #e6f0fe; color: #6b7289; border-radius: 30px; font-family: 'Montserrat-Regular';}
.time-mark span.today {background-color: #f9c944; color: white;}
.time-mark span.yesterday {background-color: #00cec9; color: white}
.time-mark span.next {background-color: #2fcca0; color: white;}

.pointflow .info .time {
    color: #373a4a;
    font-family: Montserrat-Light;
    font-size: 8pt;
    background-color: #eaeaea88;
    padding: 3px 5px;
    border-radius: 24px;
    display: inline-block;
    margin-top: -10px;
}

.timeline-filters .timeline-search {position: relative; display: inline-block; width: auto;}
.timeline-filters .timeline-search input {display: inline-block; width: 175px; padding-left: 25px; border-radius: 30px;}

.timeline-filters {margin: auto;}

.modal-pointflow-wrapper.element-content {max-height: 600px; overflow-y: auto; overflow-x: hidden;}
.modal-pointflow-wrapper.element-content .pointflow .info,
.modal .modal-pointflow-wrapper.element-content .info,
.page-content.padding.nav-wrapper.info,
.modal-pointflow-wrapper .info-based {max-width: 100%; width: 100%; margin: auto;}
.modal-pointflow-wrapper.element-content .info .pointflow-vl {left: 3.54%;}
/*.modal-pointflow-wrapper.element-content .info.info-wrapper .info-creation .social-context {display: none;}*/

#right-side-options-wrapper {background-color: #f6f6f6; min-width: 310px;}
#right-side-options {height: 100%}
#right-side-options .padding {padding: 0px 20px;}
#right-side-options .shadow,
#right-side-options .box,
#right-side-options .infobox,
#side-options-content .infobox {box-shadow: 0 1px 2px rgba(0,0,0,.1)}
#right-side-options .infobox,
#side-options-content .infobox {margin: 0; margin-bottom: 5px;}
#right-side-options .infobox .infobox-header,
#side-options-content .infobox .infobox-header {height: 35px; line-height: 32px; font-size: 11pt; cursor: pointer;}
#right-side-options .infobox .option-toggle {margin-top: 5px;}
#right-side-options .infobox .option-toggle:before {top: 8%;}
#right-side-options .infobox .option-content.show {border: 0;}
#right-side-options .box,
#side-options-content .box {padding: 10px 0px; margin-bottom: 5px; background-color: white;}
#right-side-options .box.highlight,
#side-options-content .box.highlight {background-color: rgb(255, 243, 210);}
#right-side-options .inner-side-options,
#side-options-content .inner-side-options{height: calc(100% - 55px); overflow: hidden; overflow-y: auto;}
#right-side-options .chart.progress-pie {width: 120%; margin: auto; -webkit-transform:rotate(-115deg);}
#side-options-content .box,
#side-options-content .infobox{margin: 0px; padding: 0px;}
#side-options-content .infobox.boxing {width: 95%; margin: 10px auto;}
#side-options-content .infobox.boxing.bordered {box-shadow: none; border-bottom: 1px solid #eaeaea; border-right: 1px solid #eaeaea; border-top: 1px solid #eaeaea;}
#side-options-content .infobox.boxing .infobox-header {cursor: default;}
#side-options-content .jp-form-style label,
#right-side-options .jp-form-style label{
    text-align: left;
    line-height: 28px;
    padding: 2px 10px 0px 2px;
    padding-left: 10px;
    color: var(--textColorHelp);
    font-weight: bolder;
    font-family: 'Montserrat-Light';
    margin-bottom: 0;
}

#right-side-options .jp-form-style .col-sm-12 label,
#side-options-content .jp-form-style .col-sm-12 label{
    /*padding-bottom: 0px;*/
    margin-bottom: 0px;
    line-height: 10px;
}

#right-side-options .info-details .padding.jp-form-style {padding-bottom: 10px;}
#side-options-content .nav.nav-tabs>li.active a:before,
#side-options-content .nav.nav-tabs>li.active a:after {border: 0; margin: 0;}

#right-side-options .jp-options {height: 55px; line-height: 55px; background-color: #F8F7F7; font-size: 15px; padding: 0px 20px;}

.disable-attribute {opacity: 0.25;}

.nav.nav-tabs.style-jp>li.right-side-options-trigger,
.right-side-options-trigger, 
.left-side-options-trigger,
.nav.nav-tabs.style-jp>li.left-side-options-trigger,
.navbar .btn-group.left-side-options-trigger {display: none;}


#right-side-options .progress-text-wrapper {line-height: 25px; margin-top: 18px;}

.modal-right {position: absolute; top: 0; margin: 0; right: 0; height: auto; min-height: 100%; background-color: white;}
.modal-left {position: absolute; top: 0; margin: 0; left: 0px; height: auto; min-height: 100%; background-color: white;}
.modal.fade .modal-dialog.modal-left {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.modal .modal-left, .modal .modal-left .modal-header, .modal.in .modal-left.modal-dialog {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    position: sticky;
    top: 0;
    z-index: 2;
    
}

.modal.in .modal-left.modal-dialog,
.modal .modal-left {
    overflow-y: auto;
}

.activity-container {padding: 15px; overflow-y: auto;}
.activity-container .activity-item {margin-bottom: 25px;}
.activity-container .activity-item li{list-style: none;}
.activity-container .activity-item li .notify-header {display: none}
.activity-container .activity-item li .col-xs-2 {text-align: center;}
.activity-container .activity-item .page-content.padding {padding: 10px 15px;}
.activity-container .activity-item .image-wrapper.team-member {width: 32px; height: 32px;}
.activity-container .activity-item .unread {width: 15px; height: 15px; background-color: red; border-radius: 15px; display: none; position: absolute; z-index: 3; top: -4px; right: 12px;}
.activity-container .activity-item .point-icon.emoji {width: 28px; height: 28px; background-size: 28px;}
.activity-container .time-stap { text-align: center; }
.activity-container .time-stap span {margin-bottom: 25px; display: inline-block; padding: 3px 15px; text-align: center; border-radius: 20px; color: white; background-color: #22a6b3;}
.activity-container .time-stap.today span {background-color: #7ed6df;}
.activity-container .activity-item .message {color: #869aaf; margin-top: 5px; padding: 5px 5px; border-left: 1px solid #869aaf44}
.activity-container .activity-item .message i {font-style: normal;}
.activity-container .activity-item .message .point-icon {float: left; position: relative; top: -3px;}
.activity-container .activity-item .content {display: block; overflow: hidden}
.activity-container .activity-item .time {color: #869aafbb; font-size: 11pt; font-family: 'Montserrat-Light'}
.activity-container .activity-item .type-icon {color: #869aaf; font-size: 11pt;}
.activity-container .activity-item .custom-image {
    display: inline-block;
    float: left;
    width: 20px;
    height: 20px;
    margin: -2px;
    margin-right: 7px;
    border-radius: 100%;
    background-position: center;
    background-size: 100% auto;

}
.activity-container .activity-item .custom-image.emoji {border-radius: 0;}
.activity-container .activity-item .custom-image + .content {width: calc(100% - 40px);}
.activity-container .activity-item.favourite .page-content {background-color: #fffaece8}

#activity-filter {display: inline-block;margin: 7px 15px;}
#all-activity-modal .controlls {text-align: center}

.info {margin-bottom: 12px; margin: 0; position: relative;}
.info a.jp-head-link {display: block; display: inline-block; margin-bottom: 20px; color: #1e1e1e; font-size: 11pt;}
.info a.jp-head-link:hover {color: #0C639D}
.info a.jp-head-link .label {font-size: 11px; display: inline-block; position: relative; top: -2px; margin-left: 5px; font-family: 'Montserrat-Light';}
.info p, div.text-content {font-family: 'Montserrat-Light'; font-size: 12pt; font-size: 16px; font-size: 14px;}
.info p.text-content, .info div.text-content {width: 100%; margin: 0; margin-top: 8px; margin-top: 0; margin-bottom: 10px;}
.info.comment p.text-content, .info.comment div.text-content {margin-bottom: 0px; width: 100%;}
/*.info .content { background: linear-gradient(hsla(0,0%,100%,0),#fff); }*/
.info .content .content-row {overflow: hidden;}
.comment-wrapper .info .content {overflow: visible;}
.info .content.collapsed {max-height: 300px; overflow: hidden;}
.info .content .collapse-trigger {margin: 5px 0px; }
.info .content.collapsed .collapse-trigger {position: absolute; z-index: 3; background-color: white;}
.info .img-wrapper {margin: 20px 5px; text-align: center;}
.info .img-wrapper .img-responsive {max-height: 400px;}
.info .info-creation {line-height: 24px; margin-left: -5px; font-size: 10pt; width: 80%;}
.info .info-creation,
.info .info-creation a {font-family: 'Montserrat-Regular';}
.info.comment .info-creation {display: block;}
.info .empty-content {padding: 5px; font-style: italic; background-color: rgba(246, 246, 246, 0.41);}
.info a {color: #0C639D;}
.info a:hover {color: #3195D3}

.info .element,
.info .element.box {font-size: 14px;}

.info .content.shared-c {     
    border-top: 2px solid #eaeaea; 
    padding: 10px;
    margin: 6px 0px;
    padding-left: 15px;}

.info .pointflow-vl {width: 2px; height: 100%; border-right: 2px solid #c2cfdc; position: absolute; top: 0; left: 32px; border-radius: 2px;}
.info.unread .pointflow-vl {border-right: 2px solid #9f57fe;}
.info .creator {width: 41px; height: 41px; border: 6px solid #f1f1f1; margin: 0px !important; background-image: url('/res/imgs/empty_user.svg');}
.info .info .creator {display: none;}
.info .info .pointflow-vl {display: none;}
.info .sub-info-wrapper {padding-top: 15px;}
.dashboard-element .info .creator {border: 6px solid white;}

.info .info-tags .info-tag {display: inline-block; padding: 0px 5px; line-height: 18px; font-size: 10px; border-radius: 30px; color: white;}

.info-options { font-size: 10pt; color: #D6D6D6; position: absolute; right: 20px; top: 5px;}
.info-options button:hover { color: #999; }
.info-options button {display: block; padding: 0; width: 26px; height: 26px; margin-left: 6px;}
.info-options .dropdown-menu li.dropdown-header,
.info-options .dropdown-menu>li>a{ min-width: 200px; line-height: 20px; padding: 3px 10px; font-size: 11pt; }
.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: 10px; }
.info-options .dropdown-menu li.dropdown-header .jp-info-fav .glyphicon { color: #f1c40f; }
.info-options .dropdown-menu li .option-b,
.info-options .dropdown-menu li .option-active .option-a {display: none;}
.info-options .dropdown-menu li .option-a,
.info-options .dropdown-menu li .option-active .option-b{display: inline-block;}

.info .jp-solution { color: transparent; font-size: 20pt; text-align: center;  width: 100%; }
.info:hover .jp-solution, .info.solution:hover .jp-solution:hover {color: #eaeaea; cursor: pointer;}
.info.solution:hover .jp-solution, .solution .jp-solution {color: #1abc9c;}

.info.solution, .info .solution {background-color: #FBFBFB;}
.info .solution {margin-left: 20px; padding: 10px 15px; border-left: 3px solid #1abc9c;}

.info-rating-controls {float: right;}
.info .info-rating-controls .task-status.btn-group,
.pointflow .sub-info-wrapper .info .info-rating-controls .task-status.btn-group {}
/*.info .info-rating-controls .task-status.btn-group .dropdown-menu.task-status-options {width: 280px; padding: 8px; left: -41px; top: -75px; border-radius: 40px;}*/
.info .info-rating-controls .task-status.btn-group .dropdown-menu.task-status-options {width: 195px;
                                                                                       padding: 5px;
                                                                                       border-radius: 20px;
                                                                                       left: -5px;
                                                                                       top: -9px;}
.info .info-rating-controls .info-rating-value {float: right; margin-right: 15px; padding-top: 1px;}
.info .info-rating-controls .info-rating-value.no-rate {color: #eaeaea;}
.info .user-rating {float: left; display: block; position: relative; /*left: 9px;*/ margin-right: -10px; top: -2px;}
.task-status.rating.btn-group .dropdown-menu.task-status-options {width: 335px; left: auto; right: -10px;}

.task-status.rating.btn-group .dropdown-menu.task-status-options li.dropdown-header {
    margin: 5px; width: 30px; height: 30px;
}

.task-status.btn-group .dropdown-menu.task-status-options.question-mode {min-width: 0px; width: 195px;}
.task-status.btn-group .dropdown-menu.task-status-options.question-mode .label{margin-right: 5px; top: -2px; position: relative; font-size: 9pt;}
.task-status.btn-group .dropdown-menu.task-status-options.question-mode .label.label-success {background-color: #6bc0ac;}
.task-status.btn-group .dropdown-menu.task-status-options.question-mode .label.label-danger {background-color: #e8453a;}
.task-status.btn-group .dropdown-menu.task-status-options.question-mode .label.label-primary {background-color: #8acfdf;}

.info .task-status.rating.btn-group {display: inline-block;}
.info .user-rating-groups {float: left; margin-top: 5px;}
.info .user-rating-groups .user-rating-group {padding: 2px 5px; padding-right: 5px; border: 1px solid #eaeaea; border-radius: 25px; float: left; margin-right: 5px; line-height: 24px;}
.info .user-rating-groups .user-rating-group .point-icon {float: left; margin-right: 10px; width: 22px; height: 22px; background-size: 20px;}
.info.comment .user-rating-groups .user-rating-group {margin-top: 5px;}
/*.info .user-rating-groups .user-rating-group.select {border-color: #75a7bd}*/

.info .social-context {margin-top: 5px; padding: 10px; border-top: 1px solid #eaeaea;}

.info .comment-container .task-status.rating.btn-group {float: none; margin-left: 15px; top: -6px}
.info .comment-container .user-rating-groups {float: none; width: 100%;}

.user-rating-group .btn-group button{border: 0; padding: 0; margin: 0; width: auto; height: auto; line-height: 24px;}
.user-rating-group .btn-group .dropdown-menu {background-color: black; padding: 0; margin: 0;}
.user-rating-group .btn-group .dropdown-menu>li>a,
.user-rating-group .btn-group .dropdown-menu>li>a:hover,
.user-rating-group .btn-group .dropdown-menu>li>a:focus {background-color: transparent; color: white; line-height: 20px;}
.user-rating-group .btn-group.open .dropdown-toggle {box-shadow: none}

.info-rating-controls .glyphicon{ font-size: 13pt; line-height: 23px; color: #eaeaea; }
.info-rating-controls .glyphicon:hover { color: #4c4c4c; cursor: pointer; }
.info-rating-controls.small-v .glyphicon{ font-size: 12pt; line-height: 8px; }
.info-rating-controls.vertical {float: none;}
.draggable-jp.ui-draggable-dragging .info-rating-controls {display: none;}


.info .comment-controls {display: block; margin-right: 7px; float: right;}
.info .comment-controls span { display: block; float: left; line-height: 23px; padding-right: 10px; font-size: 15pt; color: #eaeaea;}
.info .comment-controls span.counter {font-size: 11pt; }
.info .comment-controls span.counter.color-black {color: #1e1e1e;}

.info .progress,
.info .progress .progress-bar {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}
.info .progress {
    width: 120px;
    float: left;
    height: 4px;
    margin: 0;
    margin-top: 10px;
}
.info .progress .progress-bar { background: none; }
.info .progress .progress-bar.progress-bar-success { background-color: #2EAB61; }
.info .progress .progress-bar.progress-bar-danger { background-color: #eaeaea; }

.pointflow .comment-wrapper {border-bottom: 2px solid #eaeaea;}
.pointflow .comment-container .comment-container-content.page-content {box-shadow: none; background-color: transparent; padding: 0;}
.comment-wrapper .image-wrapper { border: 1px solid #f1f1f1; margin-top: 7px; width: 24px; height: 24px;}
.comment-wrapper .image-wrapper,
.comment-wrapper .team-member.round-img {display: block; float: none; margin-left: auto !important; margin-right: auto !important;}
.comment-container { width: calc(100%-60px); }
.comment-wrapper .info-rating-controls {margin-top: 5px;}
.comment-wrapper .comment.info,
.info .comment-container .comment.info { margin: 0px 0px; border: 0; padding: 5px 0px; padding-left: 2px; width: 100%;}
.pointflow .info .comment-container .comment.info {box-shadow: none;}
.comment-wrapper .comment .comment-info {color: #878787; font-size: 10pt;}
.comment-wrapper .comment .info-creation {margin-left: 0;}
.comment-wrapper .comment .text-content {font-size: 14px; width: auto; display: inline-block;}

.comment-wrapper .posting {padding: 0px; margin-bottom: 0;}
.comment-wrapper .posting .content {margin-bottom: 0;}
.pointflow .comment-wrapper .posting .highlighter {margin-top: 0px;}

.info .comment-container .comment .social-inbox .input, 
.info .comment-container .comment .social-inbox .input:focus {
    min-height: 0px;
    padding: 2px 6px;
}

.link-options {
    padding: 0;
    margin: 0;
    font-size: 11pt;
    font-family: 'Montserrat-Light';
}

.link-options li {
    float: left;
    padding-left: 0px;
    padding-right: 5px;
    margin-right: 10px;
    list-style: none;
}

.link-options.disable li.enable button {
    pointer-events: auto;
    color: black;
}

.link-options li.disable, .link-options.disable li a, .link-options.disable li button, .link-options.disable li a {pointer-events: none; color: #777;}

.comment .link-options {margin-top: 15px; font-size: 10pt; font-family: 'Montserrat-UltraLight';}
.comment .link-options li {margin-right: 0px;}
.comment .link-options li + li{ margin-top: -6px; }
.comment .link-options li + li:before {
    content: "• ";
    color: #4869AD;
    font-size: 25pt;
    line-height: 16px;
    position: relative;
    top: 5px;
}

.info .comment-container textarea {
    display: block;
    width: 100%;
    height: 20px;
    resize: none;
}
.info .comment-container .posting .posting-option.jp-desc,
.info .comment-container .posting .posting-option.jp-desc .jp-desc {
    border: 0;
    margin: 0;
    background-color: transparent;
}

.info .comment-container .posting .posting-option.jp-desc{
    width: 50px;
    height: 30px;
    position: absolute;
    top: 1.5%;
    z-index: 10;
    left: 91%;
}

.info .jp-desc-title {color: #95a5a6; font-family: 'Montserrat-Regular'; font-size: 12px;}
.info .jp-desc {
    width: 100%; 
    padding: 3px 10px;
    margin: 5px 0px 20px 0px;
    background-color: rgba(216, 216, 216, 0.1); 
    border-left: 2px solid rgb(187, 187, 187);
    border-left: 3px solid rgb(187, 187, 187);

    font-family: 'Montserrat-Light';
}
.info .jp-desc .info-row .col-dyn-1>a .point-icon {float: left; margin-right: 5px;}

.info .jp-desc .desc-solution {
    margin-left: -13px;
    /*margin-bottom: 10px;*/
    padding: 5px;
    padding-left: 17px;
    border-left: 3px solid #1abc9c;
}
.info .jp-desc .desc-solution .text-content {font-size: 11pt;}

/*.task,
.task a{display: block;}
.task a{
    margin-top: 7px;
    margin-left: -6px;
    line-height: 19pt;
}*/
.info .task-status.btn-group {    top: -20px;
                                  left: 25px;
                                  float: left;
                                  display: block;
                                  height: 0; }
.info .jp-desc .task-status.btn-group {top: 0; left: 0;}
.draggable-jp.ui-draggable-dragging .task-status.btn-group {display: none;}

.info .task-status.btn-group.rating button {
    background-color: white;
    box-shadow: 0px 0px 4px #5b5e76b8;
    width: 30px;
    height: 30px;
    line-height: 10px;
}
/*.ft-task-list .point-icon.small + .task-status.btn-group {position: absolute;}*/
.ft-task-list .point-icon.small + .task-status.btn-group { position: absolute; top: 10px; left: 10px;}
.task-status.btn-group button {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.task-status.btn-group button,
.task-status.btn-group button:focus,
.task-status.btn-group button:hover{
    padding: 0;
    outline: 0;
    border: 0;
}

.task-status.btn-group.open button,
.task-status.btn-group button:hover{
    transform: scale(1.3);
} 

.task-status.btn-group .dropdown-menu {z-index: 99999999}

.task-status.btn-group.open button .point-icon { background-position: 0; cursor: pointer; }

.task-status.btn-group .dropdown-menu.task-status-options {
    width: 195px;
    padding: 5px;
    border-radius: 20px;
    left: -5px;
    top: -9px;
}

.task-status.processing {
    pointer-events: none;
    opacity: 0.6;
}

.task-status.processing .point-icon:not(.custom) {
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
    background-position: -232px -27px !important;
    zoom: 1.2;

    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%);
    /*border-radius: 100%;*/
}

.task-status.processing .point-icon.custom .fas {
    color: #007fff;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
    background-position: -232px -27px !important;
}

.task-status.processing .point-icon.custom .fas:before {
    content: "\f013";
}

.task-status.processing .point-icon.custom[type]:before {
    background-color: white;
    border: 0;
}


@media(max-width: 1700px) {
    .task-status.processing .point-icon {
        background-position: -197px -22px !important;
    }
}


@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}


/*.dropdown-menu {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;

    max-height: 0;
    display: block;
    overflow: hidden;
    opacity: 0;
}

.btn-group.open .dropdown-menu {
    opacity: 1;
}*/

.task-status.btn-group .dropdown-menu.task-status-options:before,
.task-status.btn-group .dropdown-menu.task-status-options:after {bottom: -20px;}
.task-status.btn-group .dropdown-menu.task-status-options:before {
    border-bottom-color: transparent;
    border-top-color: rgba(0,0,0,.15);
    bottom: -22px;
}

.task-status.btn-group .dropdown-menu.task-status-options:after {
    border-bottom-color: transparent;
    border-top-color: #fff;
}

.task-status.btn-group .dropdown-menu.task-status-options li.dropdown-header{
    display: block;
    /*float: left;*/
    line-height: 20px;
}
.task-status.btn-group.rating .dropdown-menu.task-status-options li.dropdown-header{
    float: left;
}
.task-status.btn-group .dropdown-menu.task-status-options li.dropdown-header {height: auto;}
.task-status.btn-group .dropdown-menu.task-status-options li.dropdown-header,
.task-status.btn-group .dropdown-menu.task-status-options li.dropdown-header a {margin: 0; padding: 3px 0px; border-radius: 24px;}
.task-status.btn-group .dropdown-menu.task-status-options li.dropdown-header a {line-height: 10px; height: 42px; height: 25px;
                                                                                -webkit-transition: all 0.2s ease-out;
                                                                                -moz-transition: all 0.2s ease-out;
                                                                                transition: transform 0.2s ease-out;
}
.task-status.btn-group .dropdown-menu.task-status-options li.active.dropdown-header a {
    background: none;
    opacity: 0.4;
    color: #333;
    pointer-events: none;
}
.task-status.btn-group .dropdown-menu.task-status-options li.dropdown-header a:hover .point-icon {position: relative; top: -3px; transform: scale(1.3); transform: scale(1.8); background-color: transparent;}
.task-status.btn-group .dropdown-menu.task-status-options li.dropdown-header a .point-icon {
    margin: 0; 
    float: left; 
    margin-right: 15px;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: transform 0.4s ease-out;
}
.task-status.btn-group .dropdown-menu.task-status-options li.dropdown-header a .status-title {
    font-family: 'Montserrat-Regular';
    display: inline-block;
    line-height: 20px;
    font-size: 11pt;
}
.task_changer_wrapper .task-status.btn-group button .status-title,
#dynamic-table .table>tbody>tr>td[size="1"] .task-status.btn-group button .status-title,
#dynamic-table .table>tbody>tr>td[size="0"] .task-status.btn-group button .status-title 
{
    display: none;
}
.task_changer_wrapper.show_title .task-status.btn-group button .status-title {display: inline-block;}

.task_changer_wrapper.show_title .task-status.btn-group button .point-icon{
    float: left;
    margin-right: 5px;
}

.task_changer_wrapper.asLabel .task-status.btn-group button {
    padding: 2px 15px;
    padding-left: 5px;
    background-color: white;
    border: 1px solid #eaeaea;
    border-radius: 24px;
    font-family: 'Montserrat-Regular';
}
.task_changer_wrapper.asLabel .task-status.btn-group[status="WORK_IN_PROGRESS"] button,
#dynamic-table .table tbody tr td .task-status.btn-group[status="WORK_IN_PROGRESS"]{
    background-color: #3997d333;
    border-color: #3997d3;
}
.task_changer_wrapper.asLabel .task-status.btn-group[status="DONE"] button,
#dynamic-table .table tbody tr td .task-status.btn-group[status="DONE"]{
    background-color: #6cc0ac33;
    border-color: #6cc0ac;
}
.task_changer_wrapper.asLabel .task-status.btn-group[status="HOLD"] button,
#dynamic-table .table tbody tr td .task-status.btn-group[status="HOLD"]{
    background-color: #fccb7033;
    border-color: #fccb70;
}
.task_changer_wrapper.asLabel .task-status.btn-group[status="FAIL"] button,
#dynamic-table .table tbody tr td .task-status.btn-group[status="FAIL"]{
    background-color: #e8453a33;
    border-color: #e8453a;
}
.task_changer_wrapper.asLabel .task-status.btn-group[status="VOID"] button,
#dynamic-table .table tbody tr td .task-status.btn-group[status="VOID"]{
    background-color: #8acfdf33;
    border-color: #8acfdf;
}

#dynamic-table .task-status.btn-group,
#dynamic-table .task-status.btn-group button .point-icon{
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: transform 0.4s ease-out;
}
#dynamic-table .task-status.btn-group.open button, 
#dynamic-table .task-status.btn-group button:hover {
    transform: none;
}

#dynamic-table .task-status.btn-group.open button .point-icon, 
#dynamic-table .task-status.btn-group button:hover .point-icon {
    transform: scale(1.3);
}

.infobox ul .task-status .point-icon { margin-top: 0px; }

.info-options .dropdown-menu li.dropdown-header .jp-user-fav .glyphicon,
.jp-user-fav.favourite .glyphicon { color: #d0112c; }
.jp-user-fav.favJP .glyphicon {font-size: 13pt;}
.jp-user-fav:hover {cursor: pointer;}
.jp-user-fav.favourite:hover .glyphicon:before,
.jp-user-fav .glyphicon:before {content: "\e006";}
.jp-user-fav:hover .glyphicon:before,
.jp-user-fav.favourite .glyphicon:before {content: "\e006";}
.jp-user-fav.todo,
.jp-user-fav.workon {cursor: default;}
.jp-user-fav.todo .glyphicon:before {content: "\e137";}
.jp-user-fav.workon .glyphicon:before {content: "\e139";}
.jp-user-fav .marked,
.jp-user-fav.favourite .unmarked {display: none;}
.jp-user-fav.favourite .marked,
.jp-user-fav .unmarked {display: inline-block;}

.jp-info-based .nav.nav-tabs {padding-left: 5px;}
.jp-info-based .nav.nav-tabs li a{padding-bottom: 5px; padding-top: 5px;}
.jp-info-based .info-rating-controls {margin-top: 5px;}
.jp-info-based .info-rating-controls * {margin-left: 2px;}

code,
code.element.box.orange {background-color: #f3f3f3; border-radius: 0;}

.element.box.orange,
.jp-highlightbox {background-color: rgba(230, 224, 142, 0.13); border-left: 2px solid rgb(230, 216, 42);}
.solution .element.box.orange,
.solution .jp-highlightbox {background-color: rgba(236, 226, 82, 0.16);}
.info .element.box,
.jp-highlightbox {margin: 5px 0px; padding: 10px 10px; color: #333 !important;}

.info .hashtag {font-family: 'Montserrat-Light';}

.info .content .responsive-video {position: relative; padding-bottom: 56.25%; margin: 10px 0px; overflow: hidden;}
.info .content .responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.info .file-att object {width: 105%; height: 400px;}
.info .file-att {position: relative;}
.info .file-att .fullscreen {    
    padding: 5px;
    background-color: white;
    position: absolute;
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 30px;
    box-shadow: 4px 4px 4px rgba(0,0,0,0.6);
}

.file-att a.download[type='application/pdf'] .icon,
.file-entry .file-preview[type='application/pdf'] .icon,
.posting .file-upload[type='application/pdf'] .icon {color: #ff1b0e}

.file-att a.download[type='application/vnd.ms-excel'] .icon,
.file-att a.download[type='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'] .icon,
.file-entry .file-preview[type='application/vnd.ms-excel'] .icon,
.file-entry .file-preview[type='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'] .icon,
.posting .file-upload[type='application/vnd.ms-excel'] .icon,
.posting .file-upload[type='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'] .icon {color: #197242}

.file-att a.download[type='application/vnd.ms-word'] .icon,
.file-att a.download[type='application/vnd.openxmlformats-officedocument.wordprocessingml.document'] .icon,
.file-entry .file-preview[type='application/vnd.ms-word'] .icon,
.file-entry .file-preview[type='application/vnd.openxmlformats-officedocument.wordprocessingml.document'] .icon,
.posting .file-upload[type='application/vnd.ms-word'] .icon,
.posting .file-upload[type='application/vnd.openxmlformats-officedocument.wordprocessingml.document'] .icon {color: #2b5797}

.file-att a.download[type='application/vnd.ms-powerpoint'] .icon,
.file-att a.download[type='application/vnd.openxmlformats-officedocument.presentationml.presentation'] .icon,
.file-entry .file-preview[type='application/vnd.ms-powerpoint'] .icon,
.file-entry .file-preview[type='application/vnd.openxmlformats-officedocument.presentationml.presentation'] .icon,
.posting .file-upload[type='application/vnd.ms-powerpoint'] .icon,
.posting .file-upload[type='application/vnd.openxmlformats-officedocument.presentationml.presentation'] .icon {color: #d04525}

.file-att a.download[type='application/x-zip-compressed'] .icon,
.file-entry .file-preview[type='application/x-zip-compressed'] .icon,
.posting .file-upload[type='application/x-zip-compressed'] .icon {color: #ffb100}

.info .file-att audio {width: 300px; margin: 10px 0px;}
.file-att a.download {display: inline-block; line-height: 20px; margin: 5px 0px; overflow: hidden; font-size: 10pt;}
.modal-pointflow-wrapper .file-att a.download {max-width: 85%;}
.file-att a.download .glyphicon {margin-right: 10px; padding: 10px; background-color: #3997d3; color: white; 
                                 -webkit-transition: all 0.1s ease-out;
                                 -moz-transition: all 0.1s ease-out;
                                 all: transform 0.1s ease-out;}
.file-att a.download:hover .glyphicon {background-color: #59a7d8;}
.file-att a.download:hover .glyphicon:before {content: "\e166"; }

#side-options-content .file-att .img-responsive,
#right-side-options-wrapper .file-att .img-responsive {width: auto; max-width: 95%; max-height: 150px; margin: auto;}
#side-options-content .file-att a.download,
#right-side-options-wrapper .file-att a.download {font-size: 8pt;}
#side-options-content .file-att a.download .glyphicon,
#right-side-options-wrapper .file-att a.download .glyphicon {font-size: 10pt;}
#side-options-content .ed-f,
#right-side-options-wrapper .ed-f {
    margin-bottom: 5px;
    background-color: #c5c5d81a;
    border-radius: 20px;
    padding: 5px 10px;
}
#side-options-content .ed-f-t,
#right-side-options-wrapper .ed-f-t,
.detail-infos .ed-f-t {display: inline-block; width: auto; padding-right: 8px; border-radius: 25px; line-height: 22px;}
#side-options-content .ed-f-t .fas,
#right-side-options-wrapper .ed-f-t .fas,
.detail-infos .ed-f-t .fas {display: inline-block; width: 22px; height: 22px; line-height: 25px; border-radius: 100%; webkit-transition: all 0.1s ease-out; -moz-transition: all 0.1s ease-out; transition: all 0.1s ease-out;}
#side-options-content .ed-f-t .glyphicon,
#right-side-options-wrapper .ed-f-t .glyphicon {color: white; webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; all: transform 0.3s ease-out;}
#side-options-content .ed-f-t:hover .glyphicon:before,
#right-side-options-wrapper .ed-f-t:hover .glyphicon:before,
.detail-infos .ed-f-t:hover .glyphicon:before{content: "\e198"}
#side-options-content .file-att +.file-att,
#right-side-options-wrapper .file-att +.file-att,
.detail-infos .file-att +.file-att{border-top: 1px solid #eaeaea; padding-top: 5px; }

#right-side-options-wrapper .remove-file,
#side-options-content .remove-file,
.detail-infos .remove-file{
    display: inline-block; float: right; width: 25px; height: 25px; line-height: 25px; margin-left: 10px; border-radius: 100%; text-align: center; border-radius: 100%;
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    all: transform 0.1s ease-out;
}

#side-options-content .ed-f-t:hover,
#side-options-content .remove-file:hover,
#right-side-options-wrapper .ed-f-t:hover,
#right-side-options-wrapper .remove-file:hover {background-color: #babcda; color: white}
/*
================================================================================
pipelines
================================================================================
*/
#bt-pipeline-filter {font-family: 'Montserrat-Light'; padding: 5px; margin: 5px 0px; font-size: 9pt; background-color: white; box-shadow: 0 1px 2px rgba(0,0,0,.1); border-radius: 5px;}
.jp-pipeline-settings {padding: 10px 5px;}
#jp-pipeline-mode-bt a,
.setting-bt-group a {font-size: 10pt; margin: 0px 2px;}
.setting-bt-group a {font-family: 'Montserrat-Light'; font-size: 9pt;}
.jp-pipelines .pipeline-row{margin: 0;}
.jp-pipelines .jp-pipeline {padding: 5px; width: 350px; min-width: 350px;}
.jp-pipelines .jp-pipeline .pipeline-header {height: 40px; line-height: 38px; width: 100%; padding-left: 25px; color: white; margin-bottom: 10px; background-color: #2c3e50; border: 1px solid transparent; border-bottom-left-radius: 5px; border-top-left-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.1);}
.jp-pipelines .jp-pipeline .pipeline-header .point-icon {float: left; margin: 5px 8px;}
.jp-pipelines .jp-pipeline .pipeline-header:hover {background-color: #0c639d; color: white; cursor: pointer;}

.jp-pipelines .jp-pipeline .pipeline-header:after, 
.jp-pipelines .jp-pipeline .pipeline-header:before {
    right: -35px;
    top: 5px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    z-index: 1;
}
.jp-pipelines .jp-pipeline.last .pipeline-header,
.jp-pipelines .jp-pipeline.last .pipeline-header,
.jp-pipelines .jp-pipeline.first .pipeline-header,
.jp-pipelines .jp-pipeline.first .pipeline-header{border-radius: 5px; background-color: #3997d3;}
.jp-pipelines .jp-pipeline.first .pipeline-header,
.jp-pipelines .jp-pipeline.first .pipeline-header{border-top-right-radius: 0px; border-bottom-right-radius: 0px;}

.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{background-color: #2c3e50;}

.jp-pipelines.status-mode .jp-pipeline.first .pipeline-header:after, 
.jp-pipelines.status-mode .jp-pipeline.first .pipeline-header:hover:after {border-left-color: #2c3e50}


.jp-pipelines .jp-pipeline.last .pipeline-header:after, 
.jp-pipelines .jp-pipeline.last .pipeline-header:before {
    content: none;
}

.jp-pipelines .jp-pipeline.first .pipeline-header:after,
.jp-pipelines .jp-pipeline.first .pipeline-header:hover:after {border-left-color: #3997d3;}

.jp-pipelines .jp-pipeline .pipeline-header:after {
    border-color: rgba(136, 183, 213, 0);
    border-left-color: #2c3e50;
    border-width: 20px;
    margin-top: 0px;
}
.jp-pipelines .jp-pipeline .pipeline-header:hover:after {
    border-left-color: #0c639d;
}
.jp-pipelines .jp-pipeline .pipeline-header:before {
    border-color: rgba(194, 225, 245, 0);
    border-left-color: #f1f1f1;
    border-width: 24px;
    margin-top: -4px;
    right: -48px;
}

.jp-pipelines .jp-pipeline .pipeline-header.highlight,
.jp-pipelines.status-mode .jp-pipeline .pipeline-header.highlight {background-color: #3997d3;}
.jp-pipelines .jp-pipeline .pipeline-header.highlight:after,
.jp-pipelines.status-mode .jp-pipeline .pipeline-header.highlight:after {border-left-color: #3997d3;}

.jp-pipelines .pipeline-header .edit {float: right; color: white;}

.jp-pipelines .jp-pipeline .segment-container {min-height: 100px; padding-bottom: 50px; background-color: #eaeaea; border-radius: 5px; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}
.jp-pipelines .jp-pipeline .segment-container.ui-state-default {background-color: #DCDCDC}
.jp-pipelines .jp-pipeline .segment-container.ui-state-hover {box-shadow: 0 1px 2px rgba(0,0,0,.1); background-color: #FFF3D2}
.jp-pipelines .jp-pipeline .pipeline-segment .segment-info {font-size: 9pt; margin-bottom: 20px; padding: 6px; background-color: #ffffff; box-shadow: 0 1px 2px rgba(0,0,0,.1); border-radius: 5px; font-family: 'Montserrat-Light'; text-align: center; }
.jp-pipelines .jp-pipeline .pipeline-content {padding: 10px 0px; margin-bottom: 5px; margin-bottom: 2px; padding-bottom: 0; border-radius: 0px !important;}
.jp-pipelines .jp-pipeline .pipeline-content.workon {background-color: #fff3cf;}
.jp-pipelines .jp-pipeline .pipeline-content.ui-draggable-dragging,
.jp-pipelines .jp-pipeline .pipeline-content.ui-sortable-helper {z-index: 99999; box-shadow: 2px 2px 6px rgba(0,0,0,.5); transform: rotate(-3deg); }
/*.jp-pipelines .jp-pipeline .pipeline-content.ui-sortable-placeholder {background-color: #1e1e1e; min-height: 150px; visibility: visible;}*/
.jp-pipelines .jp-pipeline .pipeline-content .row {margin: 0;}
.jp-pipelines .jp-pipeline .pipeline-content .content-header {font-family: 'Montserrat-Regular'; font-size: 9pt;}
.jp-pipelines .jp-pipeline .pipeline-content .content-header .row:last-child {padding-bottom: 10px;}
.jp-pipelines .jp-pipeline .pipeline-content .content-header .col-xs-1 {padding: 0; padding-left: 3px;}
.jp-pipelines .jp-pipeline .pipeline-content .content-header .col-xs-10 {padding: 0; padding-left: 8px;}
.jp-pipelines .jp-pipeline .pipeline-content .content-header .row .col-sm-9 {padding: 0;}
.jp-pipelines .jp-pipeline .pipeline-content .content-header .title {padding-top: 4px; display: block;}
.jp-pipelines .jp-pipeline .pipeline-content .content-header .title span.label {margin-left: 3px; display: inline-block}
.jp-pipelines .jp-pipeline .pipeline-content .progress {margin: 5px 15px; margin: 0; margin-top: 5px; height: 4px; border-radius: 0px; background-color: #eaeaea;}
.jp-pipelines .jp-pipeline .content-info {color: #B3B3B3; border-top: 1px solid #eaeaea; padding-top: 3px;}
.jp-pipelines .jp-pipeline .content-info .main-info {color: #333; font-size: 18pt; text-align: center; padding-bottom: 15px; }
.jp-pipelines .jp-pipeline .content-info .box.workon {border-top: 1px solid #eaeaea; padding: 3px; background-color: #fbfbfb;}
.jp-pipelines .jp-pipeline .content-info .box.workon + .progress {margin-top: 0px;}
.jp-pipelines .jp-pipeline .pipeline-content .custom-image {margin: 0px 5px; margin-top: 5px;}
.jp-pipelines .label-default {background-color: rgb(255, 243, 210); background-color: rgba(92, 184, 92, 0.16); color: #404040}
.jp-pipelines .label-default.priority {background-color: #f1f1f1;}

.pipeline-steps.fixed {position: fixed; z-index: 2; top: 68px; background-color: white; padding-left: 8px; left: 0; box-shadow: 3px 8px 14px #ababab; }
.pipeline-steps.fixed .pipeline-header {margin-bottom: 0;}
.pipeline-steps.fixed .pipeline-header:before {border-left-color: white;}

/*
================================================================================
jp_list
================================================================================
*/
/*#jp-list .table {border: 0;}*/
#jp-list .table {margin-top: 7px;}
/*#jp-list .table,
#jp-list .table thead,
#jp-list .table thead tr {border-top-left-radius: 10px; border-top-right-radius: 10px;}
#jp-list .table thead tr th:first-of-type { border-top-left-radius: 10px; }
#jp-list .table thead tr th:last-of-type { border-top-right-radius: 10px;}*/
#jp-list .table>tbody>tr>td:first-of-type,
#jp-list .table>thead>tr>th:first-of-type {text-align: center; }
#jp-list .table>thead>tr>th:first-of-type {border-top-left-radius: 16px;}
#jp-list .table>thead>tr>th:last-of-type {border-top-right-radius: 16px; border-right: 0;}
#jp-list .table>thead>tr>th {min-width: 200px;}
#jp-list .table>thead>tr>th:first-of-type,
#dynamic-table .table>thead>tr>th.small {min-width: 55px; width: 55px; }
#jp-list .table>th { height: 50px; line-height: 30px; font-size: 12px; text-transform: uppercase;}
#jp-list .table>thead {background-color: #2c3e50; color: white; background-color: #f7f7f7; color: #2c3e50;}
#jp-list .table>tbody>tr>td {line-height: 25px; line-height: 23px; padding-bottom: 1px; padding-top: 6px;}
#jp-list .table>tbody>tr>td .point-icon {margin-top: -3px;}
#jp-list .table>tbody>tr>td .round-img.small,
.jp-pipelines .round-img.small,
.round-img.small {width: 26px; height: 26px; margin: 0 !important;}
#jp-list table.table {border-collapse: initial; padding-bottom: 30px;}
.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-bottom: 1px solid #c3c9d0;
    border-top: 0;
}
/*
================================================================================
remember me
================================================================================
*/

.info.remember-me {
    position: relative;
    background-color: rgb(54, 169, 225);
    color: white;
}
.info.remember-me,
.info.remember-me a {color: white;}
/*.info.remember-me .task {background-color: rgba(255, 255, 255, 0.14); border-radius: 40px; padding: 5px 10px;}*/
.info.remember-me .task,
.info.remember-me .task .col-fix-s{height: 30px;}
/*.info.remember-me .task .col-fix-s{height: 40px;}*/
.info.remember-me .task a {margin-left: 0px; margin-bottom: 0px; margin-top: 5px; line-height: 20px;}

.info.remember-me h4 {margin-top: 15px; font-family: 'Montserrat-Regular'; font-size: 13pt;}
.info.remember-me p {font-family: 'Montserrat-UltraLight';}
.info.remember-me button.close,
.info.remember-me button.close:focus {position: absolute; right: 15px; top: 15px; color: white; opacity: 0.7;}
.info.remember-me button.close:hover {opacity: 1;}

.info.remember-me .task-status.btn-group {top: -20px; left: 10px;}


.goal-tree-wrapper {margin: 10px; position: relative;}
.goal-tree .process-wrapper {
    margin-top: 0;
    margin-bottom: 0;
}
.goal-tree {margin-bottom: 10px;}

/*
================================================================================
Posting
================================================================================
*/

#dashboard-newsfeed #jp-posting {width: 100%;}

#jp-posting {background-color: #f9f9f9; 
             -webkit-transition: all 0.2s ease-out;
             -moz-transition: all 0.2s ease-out;
             transition: all 0.2s ease-out;}
#jp-posting {
    border-radius: 10px;
    width: 85%;
    display: block;
    margin: auto;
    margin-bottom: 15px;
}
#jp-posting.focus {box-shadow: 2px 2px 10px rgba(56, 56, 56, 0.29);}
#jp_posting_type {font-family: 'Montserrat-Regular'}
#jp_posting_sel.btn-group .dropdown-menu.open {display: block;}
#jp_posting_sel_wrapper {display: block; height: 0; overflow: hidden; border-radius: 0; padding: 0; }
#jp_posting_sel_wrapper .tab-content {padding: 10px 0px; height: 265px; overflow-y: auto; overflow-x: hidden}
#jp_posting_sel_wrapper .tab-content .tab-pane {padding: 10px 0px;}
#jp_posting_sel_wrapper .nav.nav-tabs,
#jp_posting_sel_wrapper .tab-content,
#jp_posting_sel_wrapper .tab-content .tab-pane * {display: block;}
#jp_posting_sel_wrapper .nav.nav-tabs {border: 0;}
#jp_posting_sel_wrapper .nav.nav-tabs>li a {padding: 9px 15px;}
#jp_posting_sel_wrapper .nav.nav-tabs>li.active a:before,
#jp_posting_sel_wrapper .nav.nav-tabs>li.active a:after{border: 0;}
#jp_posting_sel_wrapper .tab-pane ul {padding: 0; margin: 0;}
#jp_posting_sel_wrapper .tab-content a {display: block; width: 100%; line-height: 30px; padding: 3px 5px; border-left: 2px solid transparent; font-family: 'Montserrat-Light'}
#jp_posting_sel_wrapper .tab-content a:hover {background-color: #f1f1f1; border-left: 2px solid #d0112c;}
#jp_posting_sel_wrapper .tab-content a span {display: inline-block;}
#jp_posting_sel_wrapper .tab-content a .round-img.image-wrapper {float: left; margin: 2px !important; margin-right: 15px !important;}
#jp_posting_sel_wrapper .tab-content a .point-icon {float: left; margin: 2px; margin-right: 15px;}
#jp_posting_sel_wrapper {-webkit-transition: all 0.2s ease-out;
                         -moz-transition: all 0.2s ease-out;
                         transition: all 0.2s ease-out;}
#jp_posting_sel_wrapper.open {/*height: 295px;*/ height: auto;}

/* Posting Textarea */
.posting.page-content {background-color: rgba(255, 255, 255, 0.62);}
.posting .highlighter,
.posting textarea {padding: 4px 6px;}
.posting .posting-title {width: 100%; display: none;}
.posting .special-input,
.posting .special-input:focus{
    display: inline-block;
    width: 100%;
    /*height: 25px;*/
    line-height: 28px;
    margin-top: 2px;
    padding: 4px 15px 4px 15px;
    border: none;
    /*border-left: 2px solid #079FE1;*/
    outline: none;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    font-size: 16px;
    /*font-size: 11pt;*/
    color: #256DA7;
    color: #1e1e1e;
    font-family: 'Montserrat-Light';
    font-size: 11pt;
    border-bottom: 1px dashed #eaeaea;
}

.posting input[type="file"] {position: absolute; z-index: -1; display: block; opacity: 0; width: 0; height: 0; outline: 0; border: 0; margin: 0; padding: 0;}

.posting .file-upload {
    position: relative;
    display: inline-block;
    /*width: auto;*/
    width: 240px;
    max-height: 170px;
    float: left;
    margin: 10px;
    padding: 5px;
    border: 2px solid #eaeaea;
}

.posting .file-upload .img-responsive {
    max-height: 150px;
    margin: auto;
}

.posting .file-upload .removable {
    position: absolute;
    display: block;
    top: -10px;
    left: calc(100% - 10px);
    font-size: 18px;
    cursor: pointer;
}
.posting .file-upload .removable:hover {color: red}

.posting .posting-datetime {
    display: none;
    width: 100%;
    padding: 4px 15px 4px 15px;
    /*border-bottom: 1px dashed #eaeaea;*/
    color: #256DA7;
}

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

.posting .posting-datetime label {
    line-height: 35px;
    margin: 0;
    color: #256DA7;
    /*font-family: 'Montserrat-Regular';*/
}

.posting .posting-datetime label.onoffswitch-label {line-height: 28px; color: #777;}

/*.posting .posting-datetime input {
    color: #757575;
    border: 0;
    background-color: #f9f9f9;
    border-radius: 10px;
    text-align: center;
        border-bottom: 0;
        border-top: 0;
        border-left: 0;
        border-radius: 0;
        background-color: rgba(224, 205, 71, 0.12);
        background-color: white;
}*/

.posting .boxlist {margin: 0; padding: 0px;}
/*.posting .boxlist .val {margin: 0px 2px; }*/
.posting .boxlist input[type="text"] {margin-top: 0px; margin: 5px; text-align: left;}

.posting .header {margin-left: 15px; width: calc(100% - 15px); height: 30px; position: relative; margin-top: 2px;}

.posting .actions {height: 30px;}
.posting .actions button {
    outline: none;
    border: 0;
    /*    -webkit-transition: all 0.2s ease-out;
        -moz-transition: all 0.2s ease-out;
        transition: transform 0.2s ease-out;*/
    padding: 1px 5px;
}
.posting .actions.open button,
.posting .actions button:focus {

    /*transform: scale(1.15);*/
}


.posting .actions .dropdown-menu {width: 325px; margin-top: 0px;}
.posting .actions .dropdown-menu .nav.nav-tabs {border: 0px; border-bottom: 1px solid #D4D4D4; width: 100%;}
.posting .actions .dropdown-menu .nav.nav-tabs>li a{padding: 5px 15px;}
.posting .actions .dropdown-menu .nav.nav-tabs>li.active a:before,
.posting .actions .dropdown-menu .nav.nav-tabs>li.active a:after {border: 0;}
.posting .actions .dropdown-menu .tab-content .tab-pane{display: none;}
.posting .actions .dropdown-menu .tab-content .tab-pane.active{display: block;}

.posting .post-elements .element-type .element,
.posting .actions .action-selection .action-item:hover {
    cursor: pointer;
    color: #72A5D8;
}

.posting .actions .action-selection { width: auto; padding-top: 0; margin-left: 12px; }
.posting .actions .action-selection .action-item {display: block; float: left; padding: 6px; min-height: 30px; border-bottom: 1px solid transparent;}
#fitting .jp-template {font-style: italic}
.posting .actions .action-selection .action-item .point-icon {float: left;}

.posting .actions .action-selection .action-item .title {display: none; line-height: 26px; margin-left: 20px; color: #777; font-family: 'Montserrat-Light';}
.posting .actions .action-selection .action-item:hover {border-bottom: 1px solid #eaeaea;}
.posting .actions .action-selection .action-item:hover .title {font-style: normal; color: #256DA7;}
.posting .actions .action-selection-group { margin: 6px 0px 10px 15px; display: block; font-size: 10pt; color: #757575; cursor: default; font-family: 'Montserrat-Regular';}

.social-inbox textarea,
.highlighter,
.element {font-family: 'Montserrat-UltraLight'; font-size: 12pt;}

.highlighter,
.highlighter .element { white-space: pre-wrap; cursor: text; color: transparent;}

.highlighter{
    position: absolute;
    width: calc(100% - 73px);
    margin-top: 10px;
    padding-left:8px;
    padding-top:5px; 
    line-height:20px;

    overflow: hidden; 


}

.info .element,
.highlighter .element{
    display: inline;
    /*display: inline-table;*/
    /*word-break:break-all;*/
    line-height:20px;
    position: relative;
    /*border: 1px solid transparent;*/
}

.highlighter .element {
    /*z-index: 10;*/
    /*top: -1px;*/
    /*padding-right: 2px;*/
    padding-left: 0px;
    /*margin-left: -3px;*/
}

.info .element {padding: 2px 5px 2px 5px; padding: 0;}

/*.highlighter .element.linked-jp + .element.linked-jp { position: relative; padding-left: 0px; left: auto; }*/

.element.link,
.element.hashtag,
.element.status{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.element.hashtag { background-color: #BED7FD; }
.element.link { background-color: #f3e7ba; }
.element { color: #0D639C; }
.element.status { font-family: 'Montserrat-Regular'; font-family: 'Montserrat-UltraLight'; color: #333; color: #95a5a6; background-color: white; /*color: #fff; background-color: #7EA785;*/ }
/*.element.link {color: #4869AD; cursor: pointer;}*/
.element.linked-jp {background-color: #fbe99f; }
/*.element.linked-jp {background-color: rgba(60, 165, 216, 0.25); z-index: 0; color: transparent;}*/

.element.box {
    z-index: 0;
    display: inline-block;
    /*line-height: 19px;*/
    width: 100%;
    color: transparent;
}
.element.box .element { color: transparent !important; top: 0; }
.element.box.red,
.element.box.gray {background-color: rgba(199, 199, 199, 0.13);}
.posting .element.box {border: 0;}



.element.status {
    /*color: white;*/
    /*    -webkit-border-bottom-right-radius: 0;
        -moz-border-radius-bottomright: 0;
        border-bottom-right-radius: 0;
        -webkit-border-bottom-left-radius: 0;
        -moz-border-radius-bottomleft: 0;
        border-bottom-left-radius: 0;*/
}
.info .element.status {padding: 2px;}
.posting .element.status.orange {background-color: rgb(240, 222, 150); color: transparent; }
.element.status.gray { background-color: #DADADA; }
.element.red { background-color: #e74c3c; color: white;}

.social-inbox .header,
.social-inbox .control,
.social-inbox .social-in-tags,
.social-inbox .social-textarea {
    padding-left: 10px;
}

.social-inbox form {
    margin: 0;
}

.social-inbox .cursor-pos {
/*    position: absolute;
    top: -5px;*/
    width: 100%;
}

.social-inbox .input,
.social-inbox .input:focus{
    position: relative; 
    min-height: 40px;
    height: 40px;
    line-height:20px;
    margin-top: 10px;
    padding: 4px 6px;
    -webkit-transition: height 0.2s;
    direction: ltr; 
    vertical-align:middle;

    background-color: transparent; 
    border: none;
    outline: none;
    font-size: 12pt;
    color: #404040;
    resize: none;
    font-family: 'Montserrat-Light';
}

.posting {
    height: auto;

    padding: 10px;
    padding-bottom: 0;
    margin-bottom: 15px;

    /*background-color: white;*/
}

.modal .posting,
.modal .posting .content {margin-bottom: 0px;}
.modal-backdrop.in, .modal-backdrop {
    background-color: #f1e9e1; 
    background-color: #f1f1f1; 
    background-color: rgba(51, 57, 64, 0.95);
}
.modal button .glyphicon {padding-right: 5px;}

.posting .text {line-height: 22px; position: absolute; left: 105px; top: 4px;}

.posting .dropdown-menu button { display: block;  background: none; background-color: transparent; border: 0; }

.posting .posting-option { float: right; margin-top: -1px; }
.posting .posting-option .point-icon {display: inline-block;}
.posting .posting-option>button,
.posting .posting-option>button:focus {outline: none; padding: 1px 8px 1px 3px;}
.posting .posting-option>button .point-icon{margin-top: 3px;}
.posting .posting-option>button .point-icon.animation{-webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: transform 0.2s ease-out;}
.posting .posting-option.open>button .point-icon.animation{ -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }

.posting .posting-option .dropdown-menu { width: 300px; }
.posting .posting-option .dropdown-menu .dropdown-header {padding: 6px 20px;}
.posting .posting-option .dropdown-menu button,
.posting .posting-option .dropdown-menu button:focus {font-size: 11pt; width: 100%; text-align: left; outline: none;}

.posting .analysed-content .custom-image {
    width: 22px;
    height: 22px;
    background-size: 100% auto;
    background-position: center;
}

.posting .analysed-content .ac-container-wrapper{border-top: 1px dashed #eaeaea; padding: 4px 15px; }
.posting .analysed-content .ac-container-wrapper .ac-container,
.posting .analysed-content .ac-container-wrapper .ac-container .ac-element,
.posting .analysed-content .ac-container-wrapper .ac-container .ac-element .point-icon,
.posting .analysed-content .ac-container-wrapper .ac-container .ac-element .custom-image {display: inline-block;}

.posting .analysed-content .ac-container-wrapper input[type="text"] {outline: none; border: none; width: 200px; max-width: 100%; display: inline-block;}

.posting .jp-desc-line {display: block; border-top: 1px dashed #eaeaea; padding: 2px 0px;}

.posting .analysed-content .ac-headline {line-height: 20px; color: #7f8c8d;}
.posting .analysed-content .ac-headline span {padding: 0px 5px;}
.posting .analysed-content .ac-element {padding: 1px 5px; line-height: 30px;}
.posting .analysed-content .ac-element .point-icon,
.posting .analysed-content .ac-element .custom-image{ float: left; margin-right: 5px; border-radius: 100%;}
.posting .analysed-content .ac-element .removable { margin-top: 2px; margin-left: 2px; font-size: 11px; color: #D4D4D4;}
.posting .analysed-content .ac-element .removable:hover {color: #333; cursor: pointer;}

.posting .jp-desc-line label {
    display: inline-block;
    padding: 2px 10px;
    margin: 0;
    /*background-color: rgba(230,216,42,0.17);*/
    border-right: 1px dashed #D4D4D4;
    color: #777;
}
.posting .jp-desc-line label .glyphicon {margin-right: 8px;}
.posting .jp-desc-line input[type="text"] {outline: none; border: none; width: auto; display: inline-block;}
.posting .jp-desc-line .jp-desc-entry-cache { display: inline-block; width: auto; max-width: 80%;}
.posting .jp-desc-line .jp-desc-entry-cache .jp-cache-entry {
    display: inline-block;
    padding: 1px 12px;
    line-height: 26px;
}
.posting .jp-desc-line .jp-desc-entry-cache .jp-cache-entry .point-icon{ display: inline-block;  float: left; margin-right: 5px; }
.posting .jp-desc-line .jp-desc-entry-cache .jp-cache-entry .removable { margin-top: 2px; margin-left: 2px; font-size: 11px; color: #D4D4D4;}
.posting .jp-desc-line .jp-desc-entry-cache .jp-cache-entry .removable:hover {color: #333; cursor: pointer;}
.posting .jp-desc-line .jp-desc-entry-cache.color .jp-cache-entry {background-color: rgba(230, 216, 42, 0.18); border: 1px solid rgba(230, 216, 42, 0.3); border-radius: 25px;}
.posting .jp-desc-line .jp-desc-entry-cache.color .jp-cache-entry .removable {color: rgb(208, 188, 39);}

.posting .posting-status-change {padding-bottom: 5px;}
.posting .posting-status-change .point-icon {float: left}
.posting .posting-status-change .desc { font-size: 11pt; line-height: 24px; padding-left: 5px; padding-right: 5px;}
.posting .posting-status-change .removable {font-size: 10px; color: #878787; cursor: pointer; float: right; margin: 5px 5px 5px 0px;}

.posting .ui-autocomplete { 
    padding: 0;
    margin-top: -27px;
    width: 100%;
    max-width: none;
    border-radius: 16px;
    border-color: #e1e5eb;
    box-shadow: 0px 4px 18px 0px rgb(149 153 179 / 92%);
}

.posting .ui-autocomplete .ui-menu-item {
    line-height: 28px;
    min-height: 40px;
    width: 100%;
    height: auto;
    border-radius: 0;
    border-bottom: 1px solid var(--textColorLight);
    border-top: 1px solid var(--textColorLight);
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}

.posting .ui-autocomplete .ui-menu-item + .ui-menu-item {
    border-radius: 0;
    border-top: 1px solid var(--textColorLight);
}

.posting .ui-autocomplete .ui-menu-item:last-child {
    border-bottom: 0;
}

.posting .ui-autocomplete .ui-menu-item:hover, 
.posting .ui-autocomplete .ui-menu-item:focus, 
.posting .ui-autocomplete .ui-state-focus, 
.posting .ui-autocomplete .ui-menu-item + .ui-menu-item:hover, 
.posting .ui-autocomplete .ui-menu-item + .ui-menu-item:focus, 
.posting .ui-autocomplete .ui-menu-item + .ui-state-focus, 
.posting .ui-autocomplete .ui-menu-item:first-child:hover, 
.posting .ui-autocomplete .ui-menu-item:first-child:focus, 
.posting .ui-autocomplete .ui-state-focus:first-child {
    background-color: var(--btnHover);
    color: var(--btnHoverText);
    border-radius: 16px;
    border-color: var(--btnHoverText);
    border-bottom-color: var(--btnHoverText);
}


.posting .ui-autocomplete .ui-menu-item .point-icon{
    position: absolute;
    display: inline-block;
    margin-top: 7px;
}

.posting .ui-autocomplete .ui-menu-item .custom-image{
    display: inline-block;
    position: absolute;
    width: 22px;
    height: 22px;
    margin-top: 7px;
    border-radius: 30px;
    background-position: center;
    background-size: 100% auto;
}

.posting .ui-autocomplete .ui-menu-item .info-wrapper {
    width: calc(100% - 15px);
    padding-left: 35px;
    padding-top: 3px;
    text-align: left;
}

.posting .ui-autocomplete .ui-menu-item .info-wrapper .l-desc{
    font-size: 10pt;
    display: block;
    color: var(--textColor);
    font-family: 'Montserrat-Regular';
}

.posting .ui-autocomplete .ui-menu-item .info-wrapper .boxlist-short-description {
    line-height: 20px;
}

.posting .content {
    position: relative;
    margin-bottom: 15px;
    margin-bottom: 5px;
    border: 1px solid #eaeaea;
    background-color: white;
    border: none;
}

.modal .posting .content {
    border: 0;
    border-top: 1px solid #eaeaea;
    margin-top: 0;
    padding-top: 0;
}

/*.posting .content:after, .posting .content:before {
    top: 100%;
    left: 4%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}*/

.posting .content.array-top:after, 
.posting .content.array-top:before {top: -26px;}

.posting .content.array-left:after, 
.posting .content.array-left:before {top: 23px; left: -26px;}

.posting .content:after {
    border-color: rgba(136, 183, 213, 0);
    border-top-color: #FFFFFF;
    border-width: 11px;
    margin-left: -11px;
}

.posting .content.array-top:after {
    border-bottom-color: #FFFFFF;
    border-width: 15px;
    margin-left: -15px;
}

.posting .content.array-left:before {
    border-right-color: #eaeaea;
    border-bottom-color: transparent !important;
    border-top-color: transparent !important;
    border-width: 13px;
    margin-top: -13px;
    margin-left: 0;
}

.posting .content.array-left:after {
    border-right-color: #fff;
    border-bottom-color: transparent !important;
    border-top-color: transparent !important;
    border-width: 15px;
    margin-top: -15px;
    margin-left: 0;
}

.posting .content.array-top:before { border-bottom-color: #eaeaea; }

.posting .content:before {
    border-color: rgba(194, 225, 245, 0);
    border-top-color: #eaeaea;
    border-width: 13px;
    margin-left: -13px;
}

.posting .bt-send:hover,
.posting .bt-send:focus,
.posting .bt-send {
    display: block;
    float: left;
    /*width: 50px;*/
    /*    height: 35px;
        width: 35px;*/
    height: 35px;
    width: 35px;
    padding: 0;
    margin: 0px;
    font-size: 15px;
    outline: none;
    border: 0px !important;

    position: relative;
    z-index: 5;
    background-position-x: 18px;
    cursor: default;

    background-color: var(--btnGreenColor);
    cursor: pointer;

    /*background-color: #60C14C;*/
    color: white;
    -webkit-border-radius: 36px;
    -moz-border-radius: 36px;
    border-radius: 36px;

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

.posting .bt-send.disable:hover,
.posting .bt-send.disable:focus,
.posting .bt-send.disable {
    pointer-events: none;
    background-color: #dcdcdc;
}

.posting .bt-send:hover {
    background-color: #2EB0E8;
}

.posting .bt-send-group {float: right; position: absolute; left: 0%;}
.posting .saving {
    font-size: 12pt; 
    z-index: 9; 
    position: absolute; 
    left: 27px; 
    top: 12px;
    color: #DCDCDC;
}

.posting .saving.process {
    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.posting .saving.success { color: #27ae60; font-size: 13pt;}
.posting .saving.success:before {content: "\e013";}
.posting .saving.error {color: #e74c3c; font-size: 14pt;}
.posting .saving.error:before {content: "\e101";}
.posting .saving.process:before { content: "\e031"; }

@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

.ui-helper-hidden-accessible {display: none;}

.posting .dz-preview.dz-file-preview,
.posting .dz-preview.dz-file-preview.dz-processing{display: none;}

/*
================================================================================
collbox
================================================================================
*/
#jp_coll_wrapper {height: calc(100% - 94px);  padding: 10px; overflow: auto;}
#jp_coll_wrapper.drag {overflow: visible;}

#jp_coll_new { margin: 6px 20px;}
/*#jp_coll_new {position: fixed; z-index: 2; bottom: 25px; right: 25px;}*/
#jp_coll_new button {font-family: 'Montserrat-Regular'; width: 100px;}
/*#jp_coll_new button {
    border-radius: 30px;
    font-size: 20px;
    width: 60px;
    height: 60px;
    text-align: center;
    box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.55);}*/
#jp_coll_new.btn-group .dropdown-menu.open {display: block;}
#jp_coll_new.btn-group .dropdown-menu {border-radius: 0; width: 300px; padding: 0;}
#jp_coll_new.btn-group .dropdown-menu ul {margin: 0; padding: 0; width: 100%; list-style: none;}
#jp_coll_new.btn-group .dropdown-menu a {display: block; width: 100%; line-height: 36px; padding: 3px 15px; border-left: 2px solid transparent;}
#jp_coll_new.btn-group .dropdown-menu a:hover {border-left: 2px solid #d0112c; background-color: #f1f1f1;}
#jp_coll_new.btn-group .dropdown-menu a .point-icon {float: left; margin: 5px; margin-right: 15px;}

#jp_coll_new>a .round-img.small {float: left; border: 0; background-color: transparent; margin-top: 0px !important; margin-right: 5px !important; }

/*#jp_coll {width: 95%; margin: auto;}*/
#jp_coll h1 {display: inline-block;}
#jp_coll h1 span {float: left; line-height: 40px; margin-right: 10px;}

#jp_coll .link-options {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
#jp_coll .link-options.disable {opacity: 0.6;}

.coll-container {margin: 10px 5px;}
.coll-container.collectionBox {border-bottom: 2px solid #eaeaea; border: 0; padding-bottom: 10px;}
.coll-container .coll-entry {padding: 5px; border: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; width: 100%; height: 39px; float: left; margin: 5px 0px; background-color: white; }
.coll-container .coll-entry {width: 320px; width: auto; height: 55px; margin: 0px 20px 20px 0px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.1);}

.coll-container .coll-entry:hover {border: 1px solid #BED7FD; cursor: pointer;}
.coll-container .coll-entry.selected {border: 2px solid #A5BDE0;}
.coll-container .coll-entry div.wrapper {float: left;}
/*.coll-container .coll-entry div.title,
.coll-container .coll-entry div.type{ width: calc(100% - 60px);}*/
.coll-container .coll-entry div.title {padding-top: 9px; padding-right: 10px; overflow: hidden; }
.coll-container .coll-entry .coll-entry-img-wrapper {float: left; width: 42px; height: 42px; margin-right: 15px;}
.coll-entry.ui-state-default {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.coll-entry.ui-state-hover {background-color: #FFF6D4; transform: scale(1.03); }
.coll-entry.ui-draggable.ui-draggable-handle.ui-draggable-dragging,
.coll-entry:hover.ui-draggable.ui-draggable-handle.ui-draggable-dragging,
.coll-entry.selected.ui-draggable.ui-draggable-handle.ui-draggable-dragging {
    z-index: 999999;
    border-top: 2px solid #eaeaea; 
    border-bottom: 2px solid #eaeaea; 
    border-right: 2px solid #eaeaea;
    -webkit-box-shadow: 2px 4px 7px 0px #B3B3B3;
    -moz-box-shadow: 2px 4px 7px 0px #B3B3B3;
    box-shadow: 2px 4px 7px 0px #B3B3B3;
}
.coll-entry.ui-draggable.ui-draggable-handle.ui-draggable-dragging {position: absolute;}
.coll-entry .wrapper {position: relative; display: block; width: 100%;}
.coll-entry .wrapper .counter {
    position: absolute;
    display: block;
    width: 35px;
    height: 35px;
    right: -20px;
    top: -20px;
    background-color: #D0132D;
    border-radius: 35px;
    text-align: center;
    color: white;
    border: 4px solid white;
    line-height: 27px;
    box-shadow: -2px 1px 1px rgba(208, 208, 208, 0.89);
}

.onoffswitch.jp-perm-theme .onoffswitch-checkbox + .onoffswitch-label {background-color: #f1c40f;}
.onoffswitch.jp-perm-theme .onoffswitch-checkbox + .onoffswitch-label, 
.onoffswitch.jp-perm-theme .onoffswitch-checkbox + .onoffswitch-label:before {border-color: #f1c40f;}
.onoffswitch.jp-perm-theme .onoffswitch-checkbox + .onoffswitch-label .onoffswitch-off { color: white; }

.onoffswitch.jp-perm-theme .onoffswitch-checkbox:checked + .onoffswitch-label {background-color: #0D639C;}
.onoffswitch.jp-perm-theme .onoffswitch-checkbox:checked + .onoffswitch-label, 
.onoffswitch.jp-perm-theme .onoffswitch-checkbox:checked + .onoffswitch-label:before {border-color: #0D639C;}
.onoffswitch.jp-perm-theme .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-on { color: white; }

.onoffswitch.small .onoffswitch-label{height: 9px !important;}
.onoffswitch.small {width: 45px;}
.onoffswitch.small label.onoffswitch-label:before {border-radius: 30px; width: 15px; height: 15px; top: -3px; right: 35px; border: 1px solid #3498db;}
.onoffswitch.small .onoffswitch-checkbox:checked + .onoffswitch-label:before {background-color: #3498db; box-shadow: 0px 0px 3px #555555; right: 0px;}

@media (max-width: 767px) {
    
    nav.navbar,
    .flex nav.navbar{
        /*background-color: #2b3e50;*/
        background: white;
    }

    /*    .info-row .col-dyn-1 {width:  calc(100% - 30px);}
        .info-row .col-dyn-2 { width: calc(100% - 60px); height: 100%; }
        .info-row .col-dyn-3 {width: 100%;}*/

    /*    .point-icon { background-size: 457px 456px; width: 26px; height: 28px; }
        .point-icon.jp-status, .point-icon.small[type="default"] { background-position: 0 0; }
        .point-icon.jp-idea, .point-icon.small[type="idea"] { background-position: -27px 0; }
        .point-icon.jp-question, .point-icon.small[type="question"] { background-position: -53px 0; }
        .point-icon.jp-link, .point-icon.small[type="link"] { background-position: -79px 0; }
        .point-icon.jp-bug, .point-icon.small[type="bug"] { background-position: -105px 0; }
        .point-icon.jp-email, .point-icon.small[type="email"] { background-position: -130px 0; }
        .point-icon.jp-file,.point-icon.small[type="file"] { background-position: -156px 0; }
        .point-icon.jp-task, .point-icon.small[type="task"] { background-position: -181px 0; }
        .point-icon.jp-discussion, .point-icon.small[type="discussion"] { background-position: -207px 0; }
        .point-icon.jp-wiki, .point-icon.small[type="wiki"] { background-position: -233px 0; }
        .point-icon.jp-contact, .point-icon.small[type="contact"] { background-position: -258px 0; }
        .point-icon.jp-meeting, .point-icon.small[type="meeting"] { background-position: -284px 0; }
        .point-icon.jp-release {background-position: 0 -27px}
        .point-icon.jp-collbox {background-position: -27px -27px}
        .point-icon.jp-point {background-position: -53px -27px}
        .point-icon.jp-community-coll {background-position: -79px -27px}
        .point-icon.jp-contacts {background-position: -105px -27px}*/

}

/*
================================================================================
structure
================================================================================
*/
#structure-wrapper {width: 99%}

.jp-tree-wrapper {
    display: inline-block;
    /*float: left;*/
    /*position: relative;*/
    /*    left: -25px;
        top: 1px;*/
    padding: 0;
}

.jp-tree-wrapper .options {
    height: 10px;
    background-color: white;
}

.jp-tree-wrapper button,
.jp-tree-wrapper button:focus {padding: 0; margin: 0; outline: none}
/*.jp-tree-wrapper .dropdown-menu {width: 375px; min-height: 450px;}*/

.jp-tree-wrapper .dropdown-menu.arrow_box:after, 
.jp-tree-wrapper .dropdown-menu.arrow_box:before {left: 5.5%;}
/*.jp-tree-wrapper .dropdown-menu.arrow_box:after {border-bottom-color: #EDEDED;}*/
.jp-tree-wrapper .dropdown-menu {padding-top: 0; padding-bottom: 0px; border-radius: 0; border-top: 0; box-shadow: 3px 3px 12px rgb(117, 117, 117);}

.jp-tree .jp-tree-h {position: relative; height: 50px; padding: 2px 5px; background-color: rgba(237, 237, 237, 0.6); /* box-shadow: 0px 1px 3px rgba(156, 156, 156, 0.59); */ }
.jp-tree .jp-tree-h .jp-tree-h-title {padding-left: 10px; line-height: 44px;}
.jp-tree .jp-tree-c {height: 365px; height: auto; padding: 5px 0px; overflow-y: auto;}
.jp-tree ul.jp-tree-entry {list-style: none; margin: 0; padding-left: 10px; padding-left: 0; margin-left: -22px; }
.jp-tree div.jp-tree-entry:hover {background-color: #eaeaea; cursor: pointer;}
.jp-tree div.jp-tree-entry .jp-tree-arrow,
.process-wrapper .jp-tree-arrow{
    display: block; 
    float: left; 
    width: 30px; 
    height: 30px; 
    font-size: 10px; 
    text-align: center; 
    line-height: 30px;
    cursor: pointer;

    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: transform 0.2s ease-out;
}
.jp-tree div.jp-tree-entry .jp-tree-arrow {height: 25px; line-height: 20px;}
.jp-tree li.leaf div.jp-tree-entry .jp-tree-arrow:before {content: "";}
/*.jp-tree div.jp-tree-entry.leaf .jp-tree-arrow {width: 5px;}*/
.process-wrapper .phase.open>.jp-tree-arrow,
.jp-tree li.open>div.jp-tree-entry>.jp-tree-arrow {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.jp-tree li .jp-tree-entry {
    display: none;
}
.jp-tree li.jp-tree-root>.jp-tree-entry {display: block; position: relative;}
/*.jp-tree li.open .jp-tree-entry {display: block;}*/
.jp-tree div.jp-tree-entry .point-icon {display: block; float: left; margin-top: 0px; margin-right: 5px;}
.jp-tree div.jp-tree-entry .round-img {float: left; margin-right: 5px !important;}
.jp-tree div.jp-tree-entry .jp-title {position: relative; display: block; float: left; line-height: 24px; margin-left: 5px; margin-left: 0px; font-size: 13px; width: calc(100% - 65px);}
.jp-tree ul.jp-tree-entry ul.jp-tree-entry {padding-left: 25px; margin-left: 0px;}
.jp-tree ul.jp-tree-entry div.jp-tree-entry {clear: both; display: inline-block; width: 100%;}
.jp-tree ul.jp-tree-entry div.jp-tree-entry .bubble {float: right; margin-top: 6px;}

.jp-tree li div.jp-tree-entry.ui-state-default {
    background-color: #FFF6D4;
}
.jp-tree li div.jp-tree-entry.ui-state-hover{
    background-color: rgb(255, 252, 232);
}

.jp-tree ul.jp-tree-entry .draggable-t {display: none; float: right; line-height: 25px; position: absolute; right: 0;}
.jp-tree ul.jp-tree-entry a:hover .draggable-t{display: inline-block;}

.jp-tree .bottom-wrapper {width: 100%; height: 35px; background-color: rgba(211, 225, 236, 0.31);}
.jp-tree .bottom-wrapper a {display: block; line-height: 35px;}
.infobox .jp-tree .bottom-wrapper {display: none;}

.jp-tree ul.jp-tree-entry li.rootJP {border-top: 1px solid #eaeaea; padding-top: 10px; margin-top: 5px;}

.infobox .jp-tree li {
    padding-left: 0;
    height: auto;
    line-height: 20px;
    line-height: 10px;
}

.infobox .jp-tree ul li a {
    display: inline-block;
    width: auto;
}

@media (min-width: 768px) {
    .jp-tree-wrapper {position: static;}
    .jp-tree-wrapper .dropdown-menu {position: absolute; top: 48px; width: 425px; }
    .jp-tree-wrapper .dropdown-menu .jp-tree-c {}
    .jp-tree-wrapper .dropdown-menu.pull-right {left: -1px;}
}



/*
================================================================================
fav / rel
================================================================================
*/

#bt_add_team_member {
    line-height: 45px;
    border-radius: 50px; 
    text-align: center; 
    font-size: 13pt;
    color: #f1c411;

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

#bt_add_team_member:hover {
    border: 1px solid white;
    background-color: #f1c411;
    color: white;
}

.team-member {
    position: relative;
    display: block; 
    width: 45px; 
    height: 45px; 
    margin: 8px 2px !important; 
    float: left; 
    border: 1px solid #f6f6f6; 
    background-size: auto 100%; 
    background-position: center;

    background-image: url('/res/imgs/finn/finn_emoji_grau.svg');

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

.team-member .online-status {
    position: absolute;
    width: 14px;
    height: 14px;
    top: 80%;
    left: 75%;
    border-radius: 10px;
    border: 3px solid white;
}
.team-member .creator {
    color: #f1c63f;
    position: absolute;
    right: -5px;
    top: -2px;
    font-size: 11pt;
}

.team-member .online-status.online  {background-color: #1abc9c;}
.team-member .online-status.offline  {background-color: #eaeaea;}
.team-member .online-status.stand_by  {background-color: #F1C40F;}
.team-member.ui-droppable.ui-state-hover {
    top: -25px;
    -moz-transform: scale(1.8);
    -webkit-transform: scale(1.8);
    transform: scale(1.8);
    box-shadow: 2px 2px 8px rgba(0,0,0, 0.4);
}
.team-member.ui-droppable.ui-state-hover .online-status,
.team-member.ui-droppable.ui-state-hover .creator {display: none;}

.ft-task-list,
.ft-task-list .ft-task-list-h {
    /*    border-top-left-radius: 4px;
        border-top-right-radius: 4px;*/
}

.ft-task-list {
    /*    display: block;
        position: fixed;
        bottom: -320px;
        z-index: 9999998;
        right: 2.5%;
        width: 335px;
        height: 355px;*/
    width: 100%;
    height: auto;

    background-color: white;
    /*    -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.39);
        -moz-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.39);
        box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.39);
    
        -webkit-transition: all 0.2s ease-out;
        -moz-transition: all 0.2s ease-out;
        transition: transform 0.2s ease-out;*/
}
.ft-task-list .ft-task-list-h,
.ft-task-list .ft-task-list-h a {color: white;}

.ui-state-hover-tip * {
    display: none;
}

.ui-state-default .ui-state-hover-tip *{
    display: block;
    width: 50%;
    margin: auto;
    text-align: center;
}

.ui-state-hover-tip {
    position: relative;
    z-index: 9999998;
    display: block; 
    width: 0;
    height: 0;
    padding: 0px;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: transform 0.2s ease-out;
}
.ui-state-default .ui-state-hover-tip {
    font-size: 12pt;
    z-index: -1;
    width: 50%;
    height: 250px;
    margin: auto;
    margin-top: 50px;
    padding: 10px;

    background-image: url('/res/imgs/drop_it_to_list.svg');
    background-size: 50%;
    background-position: center;
    background-color: transparent;
}

.ui-state-hover .ui-state-hover-tip {
    transform: scale(1.3);
}

.ft-task-list.ui-state-default.show,
.ft-task-list.ui-state-default {
    bottom: 0 !important;
}

.ft-task-list.ui-state-default {
    background-color: transparent;
    transform: scale(1.05);
}

.ft-task-list.ui-state-hover {
    background-color: transparent;
    /*background-color: rgb(255, 252, 232);*/
}

.ft-task-list.ui-state-default .ft-task-list-c,
.ft-task-list.ui-state-hover .ft-task-list-c { display: none; }

.ft-task-list .ft-task-list-h {
    display: inline-block;
    width: 100%;
    line-height: 26pt;
    text-align: center;
    text-transform: uppercase;
    background-color: #2D3F52;
    font-size: 9pt;
    font-family: 'Montserrat-Regular';
    cursor: pointer;
}

/*.ft-task-list .ft-task-list-c { top: -5px; position: relative;  }*/
.ft-task-list .ft-task-list-c .tab-content{ padding: 10px; padding-top: 0;}
.ft-task-list .ft-task-list-c .tab-content .tab-title {margin-bottom: 10px; border-bottom: 1px dashed #eaeaea; color: #909090; font-size: 9pt;}

.ft-task-list .ft-task-list-c a {
    /*    line-height: 40px;
        margin-left: 10px;*/
}

.ft-task-list .ft-task-list-c .nav.nav-tabs {
    border-bottom: 2px solid #eaeaea;
    margin: 5px 0px;
    /*background-color: #2D3F52;*/
}

.ft-task-list .ft-task-list-c .nav.nav-tabs>li a { padding: 5px 15px; color: #2D3F52; font-size: 18px;}
.ft-task-list .ft-task-list-c .nav.nav-tabs>li:hover a {background-color: #5AA7DA;}
.ft-task-list .ft-task-list-c .nav.nav-tabs>li.active:hover a {background-color: transparent;}
.ft-task-list .ft-task-list-c .nav.nav-tabs>li.active a {color: #D4D4D4;} 
.ft-task-list .ft-task-list-c .nav.nav-tabs>li.active a .glyphicon-star{color: #F1C40F;} 
.ft-task-list .ft-task-list-c .nav.nav-tabs>li.active a:before,
.ft-task-list .ft-task-list-c .nav.nav-tabs>li.active a:after { border-top-color: transparent;}
.ft-task-list .ft-task-list-c .tab-pane {overflow-y: auto; padding-bottom: 20px; padding-left: 10px;}


/*
================================================================================
drag & drop
================================================================================
*/

/*.phase.droppable-jp.ui-droppable a{border-bottom: 3px solid transparent;}*/
.droppable-jp.ui-droppable.ui-state-hover,
.phase.droppable-jp.ui-droppable.ui-state-hover a,
.phase.droppable-jp.ui-droppable.ui-state-hover a span {
    font-family: 'Montserrat-Regular';
}
.droppable-jp.ui-droppable.ui-state-hover,
.phase.droppable-jp.ui-droppable.ui-state-hover {background-color: #FFF3D2;}
.draggable-jp.ui-draggable-dragging .round-img {position: relative; top: -9px; left: -3px;}
.draggable-jp.ui-draggable-dragging .point-icon {position: relative; top: 0px;}
.draggable-jp.ui-draggable.ui-draggable-dragging {
    float: none;
    display: block;
    width: 60px;
    height: 60px;
    z-index: 99999999;
    padding: 8px;
    background-color: white;
    border: 1px solid #eaeaea;
    -webkit-box-shadow: 1px 5px 10px 1px rgba(0,0,0,0.55);
    -moz-box-shadow: 1px 5px 10px 1px rgba(0,0,0,0.55);
    box-shadow: 8px 15px 15px 3px rgba(0,0,0,0.35);
    border-radius: 60px;

    /*        -webkit-transform: rotate(-1deg);
            -moz-transform: rotate(-1deg);
            -ms-transform: rotate(-1deg);
            -o-transform: rotate(-1deg);
            transform: rotate(20deg);*/
}

/*.draggable-jp.ui-draggable.ui-draggable-dragging.drag-name {
    width: auto;
    height: 32px;
    padding: 2px 5px;
    line-height: 25px;
}
.draggable-jp.ui-draggable.ui-draggable-dragging.drag-name span,
.draggable-jp.ui-draggable.ui-draggable-dragging.drag-name .point-icon {float: none; display: inline-block; width: calc(100% - 35px);}
.draggable-jp.ui-draggable.ui-draggable-dragging.drag-name .point-icon {float: left; display: block; width: 26px; margin-right: 5px;}

*/.draggable-jp.ui-draggable.ui-draggable-dragging .point-icon {display: block;}
.draggable-jp.ui-draggable.ui-draggable-dragging .drag-cut {display: none;}


/*
================================================================================
Stream
================================================================================
 
*/
.stream-info {border-bottom: 1px solid #eaeaea; padding: 0px 5px; padding-top: 5px; margin: 7px 0px; }
.stream-info .line-height {line-height: 27px;}
.stream-info.private {border-right: 3px solid #f1c40f;}
.stream-info.public {border-right: 3px solid #0D639C;}
.stream-info span.status {margin: 2px; margin-right: 10px;}
.stream-info span.status:before{ display: inline-block; width: 8px; height: 8px; content: ' '; border-radius: 10px; }
.stream-info span.status.active:before {background-color: #0c639d;}
.stream-info span.status.inactive:before {background-color: #f1c40f;}
.stream-info span.status.disturbed:before {background-color: #d0132d;}
.stream-info .option-toggle-wrapper {float: right;}
.stream-info .point-icon {float: left; margin-right: 15px;}

.option-group {margin: 0;}
.option-group .option{padding: 0; height: 50px; border: 1px solid transparent;}
.option-group.auto .option {display: inline-block;}
.option-group .option input {display: none;}
.option-group .option input + label {
    display: block; 
    width: 100%;
    height: 100%; 
    padding: 10px;
    text-align: left; 
    color: #333;
    border: 1px solid #bdc7d8;
    border-radius: 30px;
    font-family: 'Montserrat-Regular';
    font-style: normal;
    font-weight: normal;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;}
.option-group .option input + label .point-icon {float: left; margin-right: 5px;}
.option-group.small .option input + label .point-icon {top: -5px; position: relative;}
.option-group .option input + label .round-img.small {top: -1px;}
.option-group.small .option input + label .round-img {top: -2px;}
.option-group.small .option input + label .round-img,
.option-group .option input + label .round-img.small{position: relative; margin-right: 10px !important;}


.option-group .option input + label .glyphicon {float: left; line-height: 25px; margin-right: 5px; font-size: 16px;}
.option-group .option input:focus + label,
.option-group .option input + label:hover,
.option-group .option input:checked + label{background-color: rgba(245, 245, 245, 0.5); cursor: pointer; border-color: #5791ff;}
.option-group .option input:checked + label{background-color: #edf2fa; background-color: #fbfbfb; color: #5791ff; }

.option-group.small .option {height: 36px;}
.option-group.small .option input + label {padding: 7px 10px; line-height: 19px;}
.option-group.small .option input + label .glyphicon {line-height: 17px;}

.option-group .option input + label.text-center {text-align: center;}

.option-group.page-content.small {margin: 10px 0px; padding: 10px; border-radius: 30px;}

.pipeline {border-radius: 5px; border: 1px solid #eaeaea; padding: 10px !important; margin: 15px; position: relative; margin: 0; margin-bottom: 15px;}
.pipeline .point-icon-wrapper {position: relative; padding: 10px; border-radius: 50px; background-color: #f3f3f3; display: inline-block;}
.pipeline .status {position: absolute; left: 0; top:  0; width: 20px; height: 20px;}
.pipeline .status span {display: block; width: 12px; height: 12px; border-radius: 20px; border: 1px solid #eaeaea;}
.pipeline .status span.active {background-color: #5cb85c}
.pipeline .status span.inactive {background-color: #c1c1c1}
.pipeline .status span.disturbed {background-color: #E30613}
.options {position: absolute; top: 0; right: 0;}
.options a {float: right; width: 30px; height: 30px; line-height: 30px; margin: 3px;  border-radius: 20px; -webkit-transition: all 0.2s ease-out;
            -moz-transition: all 0.2s ease-out;
            transition: all 0.2s ease-out;}
.options a:hover {background-color: #f3f3f3;}
/* 
================================================================================
charts
================================================================================

*/

.chart canvas {
    width: 100%;
    height: auto;
}


/*
================================================================================
Boxlist
================================================================================
 
*/

.boxlist {
    line-height: 15pt;
    padding: 2px 0px;
    margin: 2px;
    /*border: 1px solid #e4e4e4;*/
}

.boxlist .val {
    display: inline-block;
    /*min-width: 90px;*/
    margin: 2px 2px;
    /*padding: 2px 14px 1px 4px;*/
    z-index: 3;
    /*line-height: 28px;*/
    line-height: 20px; 
    padding: 1px 8px 1px 8px;
    border: 1px solid transparent;

    cursor: pointer;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    background-color: #f9f9f9;
    font-family: 'Montserrat-Regular';
    -webkit-transition: all 0.8s ease-out;
    -moz-transition: all 0.8s ease-out;
    transition: all 0.8s ease-out;
}
.boxlist .val .point-icon,
.boxlist .val .custom-image {margin-left: -6px;}
.boxlist .val .point-icon {margin-right: 8px;}
.boxlist .val:hover {background-color: rgba(242, 200, 34, 0.17)}
.boxlist .val:hover a {color: #1e1e1e; outline: none}
.boxlist .val a:focus {outline: none;}

.boxlist .val.default { background-color: #eeeeee; border: 1px solid #e3e3e3; }
.boxlist .val.blue { background-color: #568EEC; }
.boxlist .val.red { background-color: #CB5651; }
.boxlist .val.green { background-color: #68A93B; }

.boxlist .val.blue, .boxlist .val.blue a, 
.boxlist .val.red, .boxlist .val.red a,
.boxlist .val.green, .boxlist .val.green a{ border: 1px solid transparent; color: white;}
.boxlist .val[aria-describedby] {
    -moz-box-shadow:    inset 0 0 10px rgba(255,255,255,0.8);
    -webkit-box-shadow: inset 0 0 10px rgba(255,255,255,0.8);
    box-shadow:         inset 0 0px 100px rgba(255,255,255,0.8);
}

.boxlist .val.ui-state-default {background-color: rgba(242, 200, 34, 0.17); border: 1px dashed #d0132d;
                                -webkit-transition: all 0.3s ease-out;
                                -moz-transition: all 0.3s ease-out;
                                transition: all 0.3s ease-out;
}
.boxlist .val.ui-state-default.ui-state-hover {box-shadow: 2px 2px 8px rgba(60, 60, 60, 0.82); transform: scale(1.05); border: 1px solid transparent;}

.boxlist .val.custom-color a,
.boxlist .val.custom-color .closable {color: white;}

.boxlist.blank .val {background-color: #568EEC; color: white;}
.boxlist.blank .val a {padding-left: 10px; cursor: default; color: white; font-size: 9pt;}
.boxlist.blank .val .closable {color: white;}
.boxlist.blank {border: 1px solid #e4e4e4; padding: 10px; line-height: 25px;}
.boxlist.blank input[type="text"] {border: 0; margin-top: 0px;}

.jp-form-style .boxlist.asForm .val {margin: 0px 2px;}

.boxlist .val .closable{
    top: 6px;
    position: relative;
    float: right;
    display: block;
    width: 18px;
    height: 18px;
    margin: 1px -10px 0px 7px;
    cursor: pointer;
    font-size: 14px;
    color: #6f6f6f;
    -webkit-transition: all 0.8s ease-out;
    -moz-transition: all 0.8s ease-out;
    transition: all 0.8s ease-out;
}
.boxlist .val .closable:hover {color: #ea5252}
.boxlist label {
    margin: 0;
    min-width: 100%;
}
.boxlist .val a span {display: inline-block;}
#right-side-options .boxlist .val a,
#side-content-wrapper .boxlist .val a {max-width: 84%; }
.boxlist .val a span span {font-size: 9pt; font-style: italic}
.jp-list-overview .custom-image,
.pipeline-content .custom-image,
.boxlist .custom-image {width: 26px; height: 26px; float: left; margin-right: 5px; border-radius: 30px; background-position: center; background-size: auto 100%; background-image: url('/res/imgs/finn/finn_emoji_grau.svg');}
.boxlist .ui-menu-item .custom-image {margin-right: 0;}
.jp-list-overview .custom-image {float: right; margin-right: 0; margin-left: -5px; border-radius: 30px; border: 2px solid white;}

.boxlist label,
.boxlist label input[type="text"] {
    position: relative;
    font-weight: normal;
}

.boxlist input[type="text"] {
/*    padding: 3px;
    padding-left: 15px;
    width: 100%;
    margin-top: 5px;
    margin-left: 5px;
    border: none;
    outline: none;
    display: block;
    line-height: 30px;
    border-top: 1px solid #eaeaea;*/
}
.boxlist input[type="text"] {
/*    background-color: #f9f9f9;
    border-radius: 10px;
    border: 0;
    font-size: 10pt;*/
}

.boxlist-autocomplete.ui-autocomplete {
    list-style: none;
    min-width: 300px;
    z-index: 999999;
    padding: 0;
    background-color: white;
    border: 0;
    /*border: 1px solid #eaeaea;*/
    -webkit-box-shadow: 0px 4px 11px 0px rgba(50, 50, 50, 0.46);
    -moz-box-shadow:    0px 4px 11px 0px rgba(50, 50, 50, 0.46);
    box-shadow:         0px 4px 11px 0px rgba(50, 50, 50, 0.46);
}
.boxlist.tags .boxlist-autocomplete.ui-autocomplete {min-width: 200px;}

.infobox li.ui-menu-item,
.boxlist-autocomplete.ui-autocomplete .ui-menu-item {padding: 0; margin: 0; padding: 5px 10px; line-height: 25px;}

.boxlist-autocomplete.ui-autocomplete .ui-state-focus {
    background-color: #F6F6F6;
}

.boxlist-autocomplete.ui-autocomplete .ui-menu-item,
.infobox ul.ui-autocomplete li.ui-menu-item,
.autofillable + ul.ui-autocomplete li.ui-menu-item{
    line-height: 28px; 
    min-height: 40px; 
    width: 100%;
    height: auto; 
    border-radius: 0;
    border-bottom: 1px solid var(--textColorLight);
    border-top: 1px solid var(--textColorLight);
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}

.boxlist-autocomplete.ui-autocomplete .ui-menu-item:first-child,
.infobox ul.ui-autocomplete li.ui-menu-item:first-child,
.autofillable + ul.ui-autocomplete li.ui-menu-item:first-child{
    border-color: transparent;
}

.boxlist-autocomplete.ui-autocomplete .ui-menu-item + .ui-menu-item,
.infobox ul.ui-autocomplete li.ui-menu-item + li.ui-menu-item,
.autofillable + ul.ui-autocomplete li.ui-menu-item + li.ui-menu-item{
    border-bottom-color: transparent;
}

.boxlist-autocomplete.ui-autocomplete .ui-menu-item .boxlist-info-wrapper {
    line-height: 20px;
    padding-left: 15px;
}

.boxlist-autocomplete.ui-autocomplete .ui-menu-item div.custom-image + .boxlist-info-wrapper,
.boxlist-autocomplete.ui-autocomplete .ui-menu-item .point-icon + .boxlist-info-wrapper,
.boxlist-autocomplete.ui-autocomplete .ui-menu-item .custom-color + .boxlist-info-wrapper{
    width: calc(100% - 15px);
    padding-left: 35px;
    padding-top: 3px;
    text-align: left;
}

.boxlist-autocomplete.ui-autocomplete .ui-menu-item span.l-desc {/*padding-left: 35px;*/ font-size: 10pt; display: block; color: var(--textColor); font-family: 'Montserrat-Regular';}
.boxlist-autocomplete.ui-autocomplete .ui-menu-item .boxlist-short-description {
    line-height: 14px;
    font-size: 8pt;
    font-style: italic;
    color: var(--textColorHelp); 
    font-family: 'Montserrat-Light';
}
.infobox .option-content.lh-min li.ui-menu-item span.l-desc {padding-left: 10px;}
.boxlist .val .point-icon,
.boxlist-autocomplete.ui-autocomplete .ui-menu-item .point-icon {float: left; margin: 0; margin-right: 5px;}

.boxlist-autocomplete.ui-autocomplete .ui-menu-item:hover,
.boxlist-autocomplete.ui-autocomplete .ui-menu-item:focus,
.boxlist-autocomplete.ui-autocomplete .ui-state-focus,
.boxlist-autocomplete.ui-autocomplete .ui-menu-item + .ui-menu-item:hover,
.boxlist-autocomplete.ui-autocomplete .ui-menu-item + .ui-menu-item:focus,
.boxlist-autocomplete.ui-autocomplete .ui-menu-item + .ui-state-focus,
.boxlist-autocomplete.ui-autocomplete .ui-menu-item:first-child:hover,
.boxlist-autocomplete.ui-autocomplete .ui-menu-item:first-child:focus,
.boxlist-autocomplete.ui-autocomplete .ui-state-focus:first-child{
    background-color: var(--btnHover);
    color: var(--btnHoverText);
    border-radius: 16px;
    border-color: var(--btnHoverText);
    border-bottom-color: var(--btnHoverText);
}
.boxlist-autocomplete.ui-autocomplete .ui-menu-item:hover span.l-desc,
.boxlist-autocomplete.ui-autocomplete .ui-menu-item:focus span.l-desc,
.boxlist-autocomplete.ui-autocomplete .ui-state-focus span.l-desc{
    color: var(--btnHoverText);
}

.boxlist-autocomplete.ui-autocomplete .empty-value-info {
    padding: 15px;
    color: #007fff;
    font-style: italic;
}
.boxlist-autocomplete.ui-autocomplete .empty-value-info:not(.newable) {
    pointer-events: none;
}

.boxlist-text-wrapper {display: inline-block; float: left; position: relative; cursor: pointer;}

.boxlist.user-allocation,
.boxlist.tags {padding: 0; margin: 0; height: auto; position: relative;}
.boxlist.user-allocation input[type="text"],
.boxlist.tags input[type="text"]{
    display: inline-block;
    width: auto;
    width: 25px;
    height: 25px;
    border-radius: 30px;
    border: 1px dashed transparent;
    background-color: #fafafa;
    margin: 0;
    color: transparent;
    text-shadow: 0 0 0 #2196f3;
    cursor: pointer;
    &:focus {
        outline: none;
    }
}
.jp-head-info-wrapper .boxlist.user-allocation input[type="text"] {width: 30px; height: 30px;}
.jp-head-info-wrapper .boxlist.user-allocation input[type="text"]:focus,
.boxlist.user-allocation input[type="text"]:focus,
.boxlist.tags input[type="text"]:focus {width: 110px; padding-left: 28px; color: black;}
/*.boxlist.user-allocation input[type="text"]:focus {width: 110px}*/
.boxlist .boxlist-text-wrapper:hover input [type="text"],
.boxlist.user-allocation input[type="text"]:hover,
.boxlist.tags input[type="text"]:hover {border: 1px solid #525558; }


.boxlist .boxlist-text-wrapper .in-text {
    position: absolute;
    cursor: pointer;
    z-index: auto;
    left: 8px; top: 8px; color: #DEDEDE;
    -webkit-transition: all 0.8s ease-out;
    -moz-transition: all 0.8s ease-out;
    transition: all 0.8s ease-out;
}
.jp-head-info-wrapper .boxlist.user-allocation .boxlist-text-wrapper .in-text {top: 10px; z-index: 2}
.boxlist .boxlist-text-wrapper:hover .in-text,
.boxlist .boxlist-text-wrapper .in-text:hover {
    color: #3498db
}
.boxlist .boxlist-text-wrapper .in-text {color: #525558}

.boxlist.user-allocation .val,
.boxlist.user-allocation .val:hover,
.boxlist.tags .val,
.boxlist.tags .val:hover {float: left;}

.boxlist.user-allocation .val {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    position: relative;
}

.boxlist.user-allocation .val,
.boxlist.user-allocation .val:hover{height: 21px; width: 25px; background-color: transparent; border: 0; margin-left: 0px; margin-right: 0px;}

.boxlist.user-allocation .val:hover {
    background-color: var(--btnHoverText);
}
.boxlist.user-allocation .val:hover .closable {
    opacity: 1;
    color: red;
}

.boxlist.user-allocation .val .closable {opacity: 0; margin: 0; font-size: 13px; position: absolute; left: 5px; right: auto; z-index: 0;}
.boxlist.user-allocation .val:hover .closable {opacity: 1; right: 0; left: auto; z-index: 2}
.boxlist.user-allocation .val:hover {width: 50px;}
.boxlist.user-allocation .custom-image {z-index: 3; position: relative;}

.jp-list-overview .boxlist.user-allocation .ui-autocomplete li .custom-image { float: left; margin-left: 0px; }
.jp-list-overview .boxlist.user-allocation .ui-autocomplete li a{text-align: left;}

.boxlist.user-allocation .boxlist-autocomplete.ui-autocomplete {min-width: 165px;}
.boxlist.user-allocation .boxlist-autocomplete.ui-autocomplete .ui-menu-item span.l-desc {padding-left: 10px; font-size: 8pt;}

.boxlist.tags .val .closable {top: 3px;}

/*
================================================================================
tutorial / onboarding
================================================================================
 
*/

.popover {
    border-radius: 10px; 
    border-color: transparent; 
    background-color: #147dff; 
    padding: 10px; 
    width: 380px; 
    max-width: max-content; 
    z-index: 999999999 !important;
    background-image: url(/res/imgs/org-forms/3.svg);
    background-position: bottom center;
    background-position-y: calc(100% + 45px);
    background-size: 100% auto;
}
.popover.popover.bottom {margin-top: 25px;}
.popover.popover.right {margin-left: 25px;}
.popover.popover.top {margin-top: -25px;}
.tour-backdrop {opacity: 0.7}

.popover.bottom>.arrow:after {border-bottom-color: #147dff;}
.popover.right>.arrow:after {border-right-color: #147dff;}
.popover.left>.arrow:after {border-left-color: #147dff;}
.popover.top>.arrow:after {border-top-color: #147dff;}

.popover .button.light-blue {background-color: #da3a50; border-color: #da3a50}
.popover .button.light-blue:hover,
.popover .button.light-blue:focus {background-color: #e86375; border-color: #e86375}
.popover .popover-content-title {font-size: 12pt; font-family: 'Montserrat-SemiBold'}
.popover .popover-content{color: #f1f1f1}

#first-steps-wrapper {
    position: fixed;
    bottom: 0;
    right: 100px;
    width: 280px;
    z-index: 12;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-shadow: -2px -2px 10px #737e9ca6;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
#first-steps-wrapper.closed {bottom: -380px;}
#first-steps-wrapper.closed:hover {
    bottom: -350px;
}
#first-steps-wrapper .first-steps-header {
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 16pt;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #2f69b1;
    color: white;
    cursor: pointer;
    background-image: url(/res/imgs/org-forms/3.svg);
    background-position: bottom center;
    background-position-y: calc(100% + 30px);
    background-size: 100% auto;
    box-shadow: -1px 3px 4px #225594c4;
    position: relative;
    z-index: 2;
}
#first-steps-wrapper .first-steps-body {
    padding: 15px;
    padding-bottom: 20px;
    background-color: white;
    border-left: 1px solid #4abf94;
    border-right: 1px solid #4abf94;
    /*    background-image: url('/res/imgs/org-forms/3.svg'); 
        background-position: bottom center; 
        background-position-y: calc(100% + 20px); 
        background-size: 100% auto;*/
    max-height: 380px;
    overflow-y: auto;
}

#first-steps-wrapper .step-row {
    margin-bottom: 25px;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
#first-steps-wrapper .step-row.finished {
    opacity: 0.7;
}
#first-steps-wrapper .step-row .step-headline {
    display: block;
    font-size: 9.5pt;
}
#first-steps-wrapper .step-row .button {
    margin: auto;
}

#first-steps-wrapper .step-check-point {
    position: relative;
    /*top: -5px;*/
    color: #4abf94;
}

#first-steps-wrapper .step-row.finished .step-check-point {color: #4abf94; font-weight: 900;}
#first-steps-wrapper .time-info {
    color: #6e798e;
    font-family: 'Montserrat-Regular';
    padding-top: 5px;
    display: inline-block;
}

.pipeline-content.showTheMove {
    -webkit-transition: all 0.8s ease-out;
    -moz-transition: all 0.8s ease-out;
    transition: all 0.8s ease-out;
    transform: rotate(5deg);
    position: absolute;
    left: 60%;
    top: -10%;
    z-index: 99;
    box-shadow: -3px 6px 12px #6f6b8a73;
}

.color-option-group.small .color-option,
.option-group.color-option-group.small .option.color-option {width: 25px; height: 25px;}
.option-group.color-option-group.small .option.color-option input + label {
    padding: 0; 
    border: 0;
    width: 20px;
    height: 20px;
    display: inline-block;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.option-group.color-option-group.small .option.color-option .color-cycle {
    width: 20px; 
    height: 20px; 
    display: inline-block; 
    border-radius: 20px; 
    border: 0px solid #EAEAEA; 
}
.option-group.color-option-group.small .option.color-option input + label:hover, 
.option-group.color-option-group.small .option.color-option input:checked + label {
    transform: scale(1.2);
    box-shadow: 0px 0px 5px #26273a;
}

.option-group.color-option-group.small .option.color-option input:checked + label {
    transform: scale(1);
    animation: pulse 1.5s infinite;
}

.option-box {
    box-shadow: rgba(115, 127, 146, 0.44) 0px 0px 24px; 
    background-color: white; 
    border-radius: 24px;
}

.option-box .option-box-header {
    padding: 15px;  
    background-color: rgb(249 250 251); 
    border-top-left-radius: 24px; 
    border-top-right-radius: 24px;
} 

.option-box .option-box-content {
    padding: 5px 10px;
}

@keyframes pulse {
    0% {
        transform: scale(1.3);
        box-shadow: 0px 0px 5px #26273a;
    }

    70% {
        transform: scale(1);
        box-shadow: 0px 0px 5px #26273a66;
    }

    100% {
        transform: scale(1.3);
        box-shadow: 0px 0px 5px #26273a;
    }
}




/*
================================================================================
tutorial / onboarding
================================================================================
 
*/