/*
box-shadow:0 0px 1px rgba(7,25,40,0.03), 0 1px 1px rgba(7,25,40,0.03), 0 2px 3px rgba(7,25,40,0.02);
box-shadow:0 1px 5px rgba(7,25,40,0.25), 0 3px 6px rgba(7,25,40,0.25);
box-shadow:0 2px 6px rgba(7,25,40,0.29), 0 3px 9px rgba(7,25,40,0.45);
*/

/*
BLUE
#40A3DD
#1393DF
#048AD9
#036198
#024B76

GREY
#E6EAEF
#BCC7D4
#8C9DB2
#637A96
#3E5A7B


#C9D2DC
#ABB8C8
#8C9DB2
#70859F
#58718E

WHITE
#FFFFFF
*/


:root {
	--headline-height: 46px;
	
	--main-border-radius: 8px;
	--variable-border-radius: 8px;

	--bg-color-grey:rgba(244,245,247,1);
	--bg-color-grey-hover:rgba(210, 219, 228,1);
	
	--border-color-grey:rgba(233, 236, 238, 1);
	--text-color-grey: rgba(98,121,150,1);

	--lvl: 0;
}












input[type=number]::-webkit-inner-spin-button ,
input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type=number] {
	-moz-appearance: textfield;
	margin: 0;
}

::-webkit-input-placeholder{
    font-family:inherit;
	font-size:inherit;
	font-weight:400;
	color:var(--text-color-grey);
}
::-moz-placeholder{
    font-family:inherit;
	font-size:inherit;
	font-weight:400;
	color:var(--text-color-grey);
}
:-moz-placeholder{
    font-family:inherit;
	font-size:inherit;
	font-weight:400;
	color:var(--text-color-grey);
}
:-ms-input-placeholder{
    font-family:inherit;
	font-size:inherit;
	font-weight:400;
	color:var(--text-color-grey);
}

[contenteditable=true]:empty:before{
	content: attr(placeholder);
	color:var(--text-color-grey);
	display:block; /* For Firefox */
	display:none; 
}


[contenteditable=true] *:not(img):not(anchor):not(a) {
	background:none !important;
	font-family:inherit !important;
	font-size:inherit !important;
	font-weight:inherit !important;
	color:inherit !important;
	margin:0px !important;
	padding:0px !important;
	width:auto !important;
	display:inline-block !important;
	word-wrap:break-word !important;
	word-break:break-all !important;
	max-width:100% !important;
	white-space: normal !important; 
}
[contenteditable=true] a {
	
	color:#048ad9 !important;
	background:none !important;
	font-family:inherit !important;
	font-size:inherit !important;
	font-weight:inherit !important;
	margin:0px !important;
	padding:0px !important;
	width:auto !important;
	display:inline-block !important;
	word-wrap:break-word !important;
	max-width:100% !important;
	white-space: normal !important; 
}
/*
[contenteditable=true] span {
	display:inline !important;
	white-space:normal !important; 
	background:none !important;
	font-family:inherit !important;
	font-size:inherit !important;
	font-weight:inherit !important;
	color:inherit !important; 
}
*/
input:-webkit-autofill , 
textarea:-webkit-autofill {
	box-shadow:0 0 0px 1000px rgba(255,255,255,0) inset;
	-webkit-box-shadow:0 0 0px 1000px rgba(255,255,255,0) inset;
	-webkit-text-fill-color:#000000;
}

up {
	text-transform:uppercase;
}
.all {
    width:100%;
}



input:disabled{
	background-color:transparent;
}


/*
#page::-webkit-scrollbar ,
.flex_row_panel::-webkit-scrollbar {
	position:absolute;
	margin-top:-14px;
	
}
#page::-webkit-scrollbar ,
.flex_row_panel::-webkit-scrollbar {
	position:absolute;
	margin-top:-14px;
}
*/


#page::-webkit-scrollbar-thumb ,
.flex_row_panel::-webkit-scrollbar-thumb ,
.flex_row_panel_x::-webkit-scrollbar-thumb ,
.flex_row_panel_y::-webkit-scrollbar-thumb ,
.flex_row_panel_main::-webkit-scrollbar-thumb ,
.center_panel::-webkit-scrollbar-thumb ,
.headline_menu_right::-webkit-scrollbar-thumb ,
.cntnr_profile::-webkit-scrollbar-thumb {
	border-top:4px solid transparent;
	border-bottom:4px solid transparent;
	border-radius:1000px;
}
.cntnr_profile::-webkit-scrollbar {
	display: none;
}

::-webkit-scrollbar {
	height:14px;
	width:14px;
	overflow:visible;
	
	background: transparent;
}
::-webkit-scrollbar-thumb {
	min-height:25px;
    background:rgba(48, 71, 100, 0.20);
	border-radius:0px;
	background-clip: content-box;
	border-left:4px solid transparent;
	border-right:4px solid transparent;
	border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
	background:rgba(48, 71, 100, 0.50);
	/*
	border-left:3px solid transparent;
	border-right:2px solid transparent;
	*/
	background-clip: content-box;
}
::-webkit-scrollbar-track:hover {
	background:rgba(48, 71, 100, 0.0);
	background-clip: content-box;
}


::-webkit-scrollbar-button{
	height: 4px;
    width: 0;
    opacity: 1;
}
::-webkit-scrollbar-track{
	background-clip: padding-box;
	background: transparent;
}
::-webkit-scrollbar-corner {
	background: transparent;
}
.msgs_cntnr::-webkit-scrollbar {
	background:rgba(255,255,255,0);
}
/*
.msgs_cntnr::-webkit-scrollbar-thumb{
}
*/
.headline_menu_left ::-webkit-scrollbar-thumb  {
	 background:rgba(210, 219,228, 0.60);
	 background-clip: content-box;
}
/*
.wrap .cntnr_0 ::-webkit-scrollbar {
	
	border-left:1px solid rgba(233, 236, 238, 1)  ;
}
*/
/*
.cntnr_0 ::-webkit-scrollbar {
	border-left:1px solid rgba(48, 71, 100, 0.075)  ;
}
*/

.flex_row_panel_x::-webkit-scrollbar {
	/*
	background: var(--bg-color-grey);
	*/
	/*
	border-left:1px solid rgba(48, 71, 100, 0.075)  ;
	*/
	/*
	border-top:1px solid rgba(48, 71, 100, 0.075)  ;
	*/
}
/*
.headline_menu_right .headline_menu_ins::-webkit-scrollbar ,
.connection_status .headline_menu_ins::-webkit-scrollbar{
	
	display:none;
	
}
*/
.msgs_cntnr::-webkit-scrollbar {
	display:block;
}

.scroll_menu::-webkit-scrollbar-thumb {
	border-left:4px solid transparent;
	border-right:4px solid transparent;
}

.headline_menu_right .headline_menu_ins::-webkit-scrollbar ,
.connection_status .headline_menu_ins::-webkit-scrollbar ,
.board_col .scroll_menu::-webkit-scrollbar ,
.center_panel::-webkit-scrollbar{
	
	
	/*
	border-left:1px solid rgba(223, 229, 233, 1);
	*/
	/*
	display:none;
	*/
	
	/*test - looks better when there's image in the background*/
	
	background:rgba(255,255,255,1);
	
	background:rgba(255,255,255,0);
	/*
	background: rgba(255,255,255,0.75);
    border-radius: 6px;
	*/
}
.center_panel::-webkit-scrollbar ,
.center_panel::-webkit-scrollbar-track ,
.center_panel::-webkit-scrollbar-button {
	background:rgba(255,255,255,0.5);
}
.center_panel::::-webkit-scrollbar {
	border-top:4px solid rgba(255,255,255,0.5);
	border-bottom:4px solid rgba(255,255,255,0.5);
}



.timeline_overflow::-webkit-scrollbar  {
	display:block;
	height:10px;
}


ul {
    list-style-type: none;
}



html {
	margin:0px;
    position:relative;
	
	/* 
		this should be percents for android 
		https://developers.google.com/web/updates/2016/12/url-bar-resizing
	*/
    height: 100%;
	max-height: 100%;
	min-height: 100%;
	/*
	height: 200px;
	max-height: 200px;
	min-height: 200px;
	*/
	overflow: hidden;

}
body {
	margin:0px;
	text-align:center;
	
	background-color:#ffffff;
	
	background-color:#f4f6fc;
	 background: rgba(224, 228, 231, 1);
	
    font-family:SegoeUILocal, "Segoe UI", Roboto, sans-serif;
	font-size:14px;
	line-height:20px;
	font-weight:400;
	
	color: var(--text-color-grey);
    text-align:left;
	letter-spacing:-0.3px;
	
	
	overflow: hidden;
	/*
		this is required for android webkit 
		to place background-image correctly
	*/
	/*
	min-height:100vh;
    max-height:100vh;
	*/

	
	
}
body {
	/* transform makes it small if there's not enough content, this fixes */
	/* it also messes up site height when there's and address bar on android */
	/*
	min-height:100vh;
	*/

	height: 100%;
	max-height: 100%;
	min-height: 100%;
}




.maintenance_override_btn {
	color: rgba(230, 233, 235, 1);
}
#content {
	position: relative;
	display: flex;
    flex-direction: column;
	height: 100%;
	max-height: 100%;
	min-height: 100%;
}


.flex_row_panel_x ,
.flex_row_panel ,
.j_cp {
	/*
	scroll-behavior: smooth;
	*/
}

a {
	color:inherit;
	text-decoration:none;
}
#dummy {
	display:none;
    background-color:red;
}

#head_line {
    /*
	
	background:#048ad9 url(/icon/bg-head.png) repeat left top;
	background:#048ad9;
	*/
	width:100%;
	margin:0px;
	/*
	position:fixed;
	top:0px;
	*/
	position:relative;
	z-index:100;
	
	box-shadow:0 2px 3px rgba(7,25,40,0.08), 0 3px 10px rgba(7,25,40,0.10);
	box-shadow:0 1px 3px rgba(0,0,0,0.10), 0 2px 5px rgba(0,0,0,0.13);
    box-shadow:none;
	/*
	display:none;
	*/
}
.headline_bg {
   	position: absolute;
    width: 100%;
    height: 100%;
    left:0px;
    right:0px;
	top:0px;
    z-index:105;
	
	/*
	background:#048ad9 url(/icon/bg-head.png) repeat left top;
	background:#048ad9;
	background:#fff;
	*/
	/*
	border-bottom:1px solid rgba(223, 229, 233, 1);
	*/
	/*
	box-shadow: 0 0px 1px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.05);
	*/
}
/*
.nologin .headline_bg {
	box-shadow:none;
}

#head_line.nologin  {
	display:none;
}
*/
/*
.headline_status {
	
}
*/
.headline_status_link {
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	z-index:2;
}

   






#head_loading_wrap {
	display:none;
}
.head_loading {
	width: 34px;
    height: 34px;
    background: white;
    border-radius: 50%;
    padding: 4px;
    box-sizing: border-box;
    border: 1px solid;
	border-color: var(--border-color-grey);

	

	
}
.head_loading_bar_animation {
	position:absolute;
	top:6px; 
	left: calc(50% - 15px);
	
	transition-property:top, right;
    transition-duration:0.4s;
    transition-timing-function:linear;
    transition-delay:0s;
	z-index:330;
	
	display:block !important;
}

.loader {
	border: 4px solid transparent; 
	border-top: 4px solid #3498db; /* Blue */
	border-radius: 50%;
	width: 100%;
	height: 100%;

	box-sizing: border-box;
	animation: loader_spin 1.5s ease-in-out infinite;
}

@keyframes loader_spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}


.window_load_overlap {
	position:absolute;
	top:3px;
	left:0px;
	right:0px;
	z-index:10;
}

.loading_bar_animation {
	transition-property:top, right;
    transition-duration:0.4s;
    transition-timing-function:linear;
    transition-delay:0s;
	z-index:330;
	
	display:block !important;
}
.window_load_overlap.window_loaded {
	animation: window_loaded 0.3s;
	animation-timing-function: linear;
}
@keyframes window_loaded {
	0% {
	}
	100% {
		opacity:0;
	}
}




.real_time_notif {
    height:38px;
    min-height:38px;
    max-height:38px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}



.html_log_el {
	margin:4px;
	word-wrap:break-word;
	font-size: 13px;
    line-height: 13px;
}


.logo {
    font-weight: 500;
    color: #048AD9;
    text-transform: uppercase;
    font-size: 18px;
    margin-top: -2px;
}
#page {
    padding-bottom:0px;
	overflow-y:hidden;
	margin-left:-4px;
	/*
	padding-top:var(--headline-height);
	*/
	/*
	max-height: calc(100vh - var(--headline-height));
	min-height: calc(100vh - var(--headline-height));
	*/
	flex-grow: 1;
	
	margin-left:0px;
	
	display:flex;
	
	flex-direction:row;
	
	overflow:hidden;

	position:relative;
}
/*
#page.nologin {
	padding-top:0px;
	max-height: calc(100vh - 0px);
	min-height: calc(100vh - 0px);
}
*/
.page_end {
    margin:32px 0px 32px 0px;
}




.headline_center_panel {
	min-width:314px;
	
	margin-left:auto !important;   
	margin-right:auto !important;   
	padding-left:0px;
    padding-right:0px;
   
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    transition-property:padding;
    transition-duration:0.2s;
    transition-timing-function:linear;
    transition-delay:0s;


	height:var(--headline-height);
	
	display: flex;
    justify-content: center;
    align-items: center;

	/* this makes left menu placeholder affect the headline_bg */
	position:relative;
}
.headline_center_panel {
	padding:4px 13px;
	flex-grow:1;
}


footer {
	/* margin-top: 0px !important; */
    position: relative;
    bottom: 0px;
    /* margin-left: auto; */
    z-index: 3;
    /* left: auto; */
    width: 100%;
    /* right: auto; */
	display:none;
}
.footer_btn {
    display:inline-block;
    
    cursor:pointer;
}
.footer_btn:hover {
    color:#048ad9;
}
#global_errors_wrap {
    position: absolute;
    top: 0;
    right: 0;
	position: absolute;
    top: var(--headline-height);
    z-index: 500;
    
    margin: 8px;
    box-sizing: border-box;
    

    border-radius: var(--main-border-radius);
	
}
#global_errors ,
.global_errors {
	display: block;
    margin: 4px 0px;
    padding: 12px;
	background-color: rgba(236, 92, 153, 0.5);
	background-color:#d45b8f;
    color: #fff;
    font-size: 14px;
    line-height: 18px;
	font-weight: 500;

	
	margin-left: 120%;
    margin-right: -120%;
	max-width: 400px;

	transition-property: right, margin;
    transition-duration: 0.20s;
    transition-timing-function: linear;
	transition-delay: 0s;

	/*
	box-shadow: 0 2px 6px rgba(7,25,40,0.15), 0 3px 9px rgba(7,25,40,0.15);
	*/
	/*
	border: 1px solid #ffffff;
	*/
    border-radius: var(--main-border-radius);
}
.error_shown {
	right: 0px !important;
	
	margin-left: 0px;
	margin-right: 0px;
}

#quick_faq_wrap {
	position: absolute;
	top: var(--headline-height);
	right: -520px;
	z-index: 400;
	
	
    box-sizing: border-box;
	max-width: calc(100vw - 16px);
	width:400px;
	border-radius: var(--main-border-radius);
	/*
	box-shadow: 0 2px 6px rgba(7,25,40,0.15), 0 3px 9px rgba(7,25,40,0.15);
	*/

	transition-property: right;
    transition-duration: 0.20s;
    transition-timing-function: linear;
	transition-delay: 0s;
}
.quick_faq_wrap_shown {
	right: 0px !important;
}

#quick_faq_wrap .cntnr_20 {
	margin:4px;
	box-shadow: 0 2px 6px rgba(7,25,40,0.15), 0 3px 9px rgba(7,25,40,0.15);
}

/*
.error_num {
    color:#048ad9;
    font-size:50px;
    padding:100px 0px 100px 0px;
}
*/
.container_highlight{
	-moz-animation-name:container_highlight;
	-moz-animation-duration:0.2s;
	-webkit-animation-name:container_highlight;
	-webkit-animation-duration:0.2s;
	-ms-animation-name:container_highlight;
	-ms-animation-duration:0.2s;
	-o-animation-name:container_highlight;
	-o-animation-duration:0.2s;
	animation-name:container_highlight;
	animation-duration:0.2s;
}
@-moz-keyframes container_highlight{
	0%{
		right: -420px;
	}
	100%{
	}
}
@-webkit-keyframes container_highlight{
	0%{
		right: -420px;
	}
	100%{
	}
}
@-ms-keyframes container_highlight{
	0%{
		right: -420px;
	}
	100%{
	}
}
@-o-keyframes container_highlight{
	0%{
		right: -420px;
	}
	100%{
	}
}
@keyframes container_highlight{
	0%{
        right: -420px;
	}
	100%{
	}
}






.tutorial_menu_headline {
	z-index:108;
}
.tutorial_highlight{
	-moz-animation-name:tutorial_highlight;
	-moz-animation-duration:1.5s;
	-webkit-animation-name:tutorial_highlight;
	-webkit-animation-duration:1.5s;
	-ms-animation-name:tutorial_highlight;
	-ms-animation-duration:1.5s;
	-o-animation-name:tutorial_highlight;
	-o-animation-duration:1.5s;
	animation-name:tutorial_highlight;
	animation-duration:1.5s;
	animation-iteration-count: infinite;

	border-radius: var(--main-border-radius);
}
@-moz-keyframes tutorial_highlight{
	0%{
		background:rgba(4, 140, 217, 0.25);
	}
	100%{
	}
}
@-webkit-keyframes tutorial_highlight{
	0%{
		background:rgba(4, 140, 217, 0.25);
	}
	100%{
	}
}
@-ms-keyframes tutorial_highlight{
	0%{
		background:rgba(4, 140, 217, 0.25);
	}
	100%{
	}
}
@-o-keyframes tutorial_highlight{
	0%{
		background:rgba(135, 179, 204, 0.25);
	}
	100%{
	}
}
@keyframes tutorial_highlight{
	0%{
        background:rgba(4, 140, 217, 0.25);
	}
	100%{
	}
}





#notifications {
    position:fixed;
    bottom:0px;
    right:0px;
    z-index:50;
}
.notification {
    background-color:rgba(255,255,255,1);
    min-height:50px;
    box-shadow:0 1px 5px rgba(7,25,40,0.15), 0 3px 6px rgba(7,25,40,0.15);
    min-width:314px;
    max-width:300px;
    position:relative;
    opacity:1;
    margin-bottom:16px;
}
.notification_title {
    font-weight:500;
    color:#048ad9;
    margin-top:4px;
}
.notification_body {
    font-size:13px;
    line-height:16px;
    color:#000000;
    overflow:hidden;
}
.notification_link {
    position:absolute;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
}
.notification_dismiss {
    position:absolute;
    top:0px;
    bottom:0px;
    right:6px;
    width:30px;
    height:30px;
    z-index:2;
}
.notification_highlight{
	-moz-animation-name:notification_highlight;
	-moz-animation-duration:0.3s;
	-webkit-animation-name:notification_highlight;
	-webkit-animation-duration:0.3s;
	-ms-animation-name:notification_highlight;
	-ms-animation-duration:0.3s;
	-o-animation-name:notification_highlight;
	-o-animation-duration:0.3s;
	animation-name:notification_highlight;
	animation-duration:0.3s;
}
@-moz-keyframes notification_highlight{
	0%{
		opacity:0;
	}
	100%{
	}
}
@-webkit-keyframes notification_highlight{
	0%{
        opacity:0;
	}
	100%{
	}
}
@-ms-keyframes notification_highlight{
	0%{
        opacity:0;
	}
	100%{
	}
}
@-o-keyframes notification_highlight{
	0%{
        opacity:0;
	}
	100%{
	}
}
@keyframes notification_highlight{
	0%{
		opacity:0;
	}
	100%{
	}
}

.notification_text {
    max-height:32px;
    overflow:hidden;
    text-align:left;
    font-size:13px;
    line-height:16px;
        margin-top: 2px;
}



.avatar ,
.avatar_med ,
.avatar_sm ,
.avatar_icon ,
.avatar_browser ,
.avatar_chip ,
.avatar36 ,
.avatar_head , 
.avatar_head_2 ,
.avatar_cap , 
.avatar_big_sm ,
.avatar_big,
.msg_avtr ,
.msg_list_avtr ,
.notif_avtr ,
.avatar_inherit {
	display:block;
	width:52px;
	height:52px;
	border-radius:100%;
	/*
	border-radius:  var(--main-border-radius);
	*/
    line-height:52px;
	z-index:3;
}
.avatar {
    width:100px;
	height:100px;
    line-height:100px;
    font-size:32px;
	border:4px solid #fff;
	    box-shadow: 0 0px 1px rgba(7,25,40,0.03), 0 1px 1px rgba(7,25,40,0.03), 0 1px 2px rgba(7,25,40,0.02);
}
.avatar_sm  ,
.window_el .avatar_icon ,
.avatar_chip {
	width: 32px;
    height: 32px;
    min-width: 32px;
    line-height: 32px;
    font-size: 14px;
}
.window_el .avatar_icon {
	margin-left: -1px;
}
 
.item_context_profile .avatar_chip {
	width: 8px;
    height: 8px;
    min-width:  8px;
    line-height: 8px;
    font-size: 0px;
	transition: all 0.2s;
}
.list_item:hover .item_context_profile .avatar_chip {
	width: 20px;
    height: 20px;
    min-width:20px;
    line-height: 20px;
    font-size: 10px;
}
.chip_cntnr_file .avatar_chip {
	border-radius: var(--main-border-radius);
	background-color: var(--bg-color-grey-hover);
	font-weight: 700;
}


.item_context_profile {
	display: none;
	position:absolute;
	left: -8px;
}
.item_context_profile_show .item_context_profile {
	display: flex;
}
.item_context_profile_show .item_context_profile_margin {
	margin-left:8px;
}
.board_list .item_context_profile_margin {
	justify-content: center;
}



.task_fields {
	display: flex;
	flex-wrap: wrap;
}
.board_list .task_fields {
	display: flex;
	flex-wrap:nowrap;
}

.avatar_browser ,
.avatar_icon {	
	width: 24px;
    height: 24px;
    min-width: 24px;
    line-height: 24px;
    font-size: 11px;
	margin-left:-4px;
}
.avatar_browser_icon {
	background: #fff;
    border-radius: var(--main-border-radius);
    bottom: 0px;
    position: absolute;
    left: 0px;
	display:none;
}


/*
.avatar_browser_icon_2 {
	bottom:0px;
}
*/
.avatar36 {
    width:36px;
	height:36px;
    min-width:36px;
    line-height:36px;
}
.avatar_head {
    min-width:28px;
    width:28px;
	height:28px;
    line-height:28px;
}
.avatar_cap {
	min-width:38px;
    width:38px;
	height:38px;
    line-height:38px;
	font-size:18px;
}
.avatar_head_2{
    min-width:32px;
    width:32px;
	height:32px;
    margin-left:8px;
    color:#ffffff;
    border:0px solid #ffffff;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
.avatar_big {
	width:150px;
	height:150px;
	min-width:150px;
    margin:auto;
    line-height:142px;
    font-size:60px;
}

.msg_avtr {
    width:32px;
    min-width:32px;
    flex-grow:1;
    height:32px;
    margin-right:12px;
    line-height:32px;
}
.msg_list_avtr {
    width:44px;
    min-width:44px;
	height:44px;
    line-height:44px;
    margin-right:8px;
}
.notif_avtr {
    width:36px;
    min-width:36px;
	height:36px;
    line-height:36px;
    margin-right:12px;
}
.avatar_inherit {
    width:inherit;
	height:inherit;
    line-height:inherit;
}
.avatar_big_sm {
	width:38px;
	height:38px;
    min-width:38px;
	/*margin-right:16px;*/
	margin-right:0px;
    line-height:38px;
    font-size:16px;
}
.avatar_icon {
	border-radius: var(--main-border-radius);

	background:var(--bg-color-grey);
}




.btn ,
.btn_disabled ,
.btn_ins ,
.btn2 ,
.btn3 ,
.btn4 ,
.btn_dd ,
.task_options_btn ,
.browser_sub_btn ,
.btn_sort , .btn5 ,
.btn6 ,
.btn7 ,
.btn8 ,
.btn9 ,
.btn10 ,
.btn_task ,
.btn_sel , .btn_sel2 ,
.btn_task_disabled ,
.btn_page ,
.btn_param ,
.reply_page_current ,
.cbtn2 ,
.btn_menu ,
.cbtn ,
.cbtn_p {
	display:block;
	cursor:pointer;
	margin:16px 0px 0px 0px;
		margin:0px 0px 0px 0px;
	line-height:20px;
	padding:6px 10px 6px 10px;
	transition-property:all;
    transition-duration:0.2s;
    transition-timing-function:linear;
    transition-delay:0s;
	
	text-align:center;
    

	border-radius: var(--main-border-radius);

	/*
	this messes up drop-downs
    z-index:2;
	*/
	/*
	letter-spacing:-0.6px;
	*/
	margin-top:0px;
	border:1px solid transparent;
	
	/*
	font-weight:500;
	*/
	
	font-size: 13px;
	font-size: 13px;
}

/*
.views_menu_main .h_m_l_color_change .btn_dd ,
.btn9 {
	font-size:13px;
	
	color:#000;
	
	padding-top:6px;
	padding-bottom:6px;
	letter-spacing:0px;
	transition-property:none;
	color:var(--bg-color-grey-hover);
}
*/

.btn9.dark {
	color: rgba(119, 132, 156, 1);
}
.btn9 .btn4 {
	transition-property:none;
}


.btn_menu {
	font-size:13px;
}
.border.btn {
	border-color:rgba(223, 229, 233, 0);
}

.btn_white {
	cursor:pointer;
	line-height:10px;
	background:#fff;
	border-radius:50px;
	padding:4px;
}

.btn4.br_l0 {
	border-radius:0px 6px 6px 0px;
}
.btn4.br_r0 {
	border-radius: var(--main-border-radius) 0px 0px 6px;
}
/*
.btn_new_item {
	    cursor: pointer;
    background: #fff;
    width: 30px;
  
	
	//this messes up drop_downs
	//z-index: 5;
	
	    position: relative;
    border-radius: var(--main-border-radius);
    left: 4px; 
    box-shadow: 0 0px 1px rgba(7,25,40,0.03), 0 1px 1px rgba(7,25,40,0.03), 0 1px 2px rgba(7,25,40,0.02);
	box-shadow: 0 1px 3px rgba(7,25,40,0.07), 0 2px 4px rgba(7,25,40,0.12);
	
    margin: -16px auto -12px auto;
    padding: 4px 0px 4px 0px;
}
*/
.btn_new_item:hover {
	background:var(--bg-color-grey);
	color:rgba(4, 140, 217, 1);
}
/*
.board_list .btn_new_item {
	
	margin-bottom:4px;
	
}
*/
/*
.list_view  .btn_new_item {
	
	margin-bottom:4px;
}
*/
.board_col_head .btn_new_item   {
	top:8px;
}

/*
.headline_menu_right .btn_new_item  {
	
	margin-bottom: 0px;
	
}
*/
.btn_color_pick {
	width: 30px;
    height: 30px;
    margin: 2px;
    border-radius: var(--main-border-radius);
}
.btn_color_pick:hover {
	box-shadow:0 1px 5px rgba(7,25,40,0.25), 0 3px 6px rgba(7,25,40,0.25);
}





.small_inputs input {
	color:var(--text-color-grey);
	border:0px;
	border-bottom:0px solid rgba(223, 229, 233, 1);
	margin-bottom:0px;
	width:24px;
	background:none;
	text-align:center;
	outline-width:0px;
	padding-top:4px;
	padding-bottom:4px;
	background:rgba(223, 229, 233, 1);
	background:none;
	font-size:14px;
	line-height:14px;
	margin-left:0px;
	margin-right:0px;
	font-weight:700;
}


.btn_page ,
.reply_page_current {
	font-size:13px;
	border:0px;
	border-radius:0px;
	padding-top:6px;
	padding-bottom:3px;
	border-bottom:3px solid transparent;
	/*
	margin:-1px 0px -1px 0px;
	*/
}
.btn_page.selected {
	border-color:rgba(4,140,217,0.80);
}

.btn_page:hover  {
	border-color:rgba(4,140,217,0.25);
}
.reply_page_current {
	border-color:rgba(4,140,217,0.8);
	color:#048ad9;
}

/*
.btn {
	
	text-transform:uppercase;
	
}
*/
.btn2 {
    font-size:13px;
    color:var(--text-color-grey);
    padding:8px 0px 8px 0px;
    min-width:36px;
    border-radius:100%;
}
.cbtn2 {
    font-weight:inherit;
    line-height:inherit !important;
    cursor:default;
}
.btn3 {
    padding:6px 10px 6px 10px;
	    padding: 4px 8px 4px 8px;
    display:inline-block;
    color:#048ad9;
}
.btn4 ,
.task_options_btn ,
.btn5 ,
.btn6 ,
.btn_param ,
.btn_task ,
.btn_sel , .btn_sel2 ,
.btn_task_disabled {
    padding: 4px 6px 4px 6px;
    border-radius: var(--main-border-radius);
    padding: 3px;
	
	/*
    border-radius: var(--main-border-radius);
	*/
    margin: 4px;
    border: 0px;
    border: 1px solid;
	border-color: var(--border-color-grey);
	
}

.btn_task ,
.btn_sel , .btn_sel2 ,
.btn_task_disabled ,
.btn_stage {
	margin:1px;
}

.btn_task {
	min-width:34px;
	box-sizing: border-box;
}
.btn_task ,
.btn_sel , .btn_sel2 ,
.btn_task_disabled {
	
    padding: 6px;
    
    border-radius: var(--main-border-radius);
	
	background:var(--bg-color-grey);

	border: 1px solid ;
	border-color: transparent;

	color: var(--text-color-grey);
}
.board_columnext .btn_sel2 {
	display: none;
}


.btn_task.active {
	border-color:#048AD9;
	color:#048AD9;
}
.time_spent_btn {
	min-width:30px;
	box-sizing: border-box;
	justify-content: center;
	font-size:11px;
	color:#000;
	font-weight: 500;
}

.btn_sel , .btn_sel2 {
	background: #fff;
	/*
	border-color: var(--border-color-grey);
	*/
	border-color: transparent;

}
.btn_sel.selected , .btn_sel2.selected {
	background:rgba(4,140,217,1);
	border-color:rgba(4,140,217,1);
	color: #fff;
}
.btn_sel {
	display: none;
}
.list_select_mode .btn_sel  {
	display: block;
    margin-top: 1px;
	margin-bottom: 1px;
    margin: 1px 2px;
}
.board_columnext .btn_sel {
	display: none;
}
.list_select_mode .chip_cntnr .btn_sel {
	/*	this shows btn_sel inside hiearchies when in listview mode */ 
	display: block;
}
/*
.hierarchy_item .btn_sel  {
	
    margin-top: 1px;
	margin-bottom: 1px;
    border: 0px;
}
*/
.btn_task_disabled {
	cursor:default;
}
.btn4  ,
.task_options_btn {
	border: 0px;
}
.btn_param {
	border: 0px;
	font-size: 13px;
	margin: 0px -4px;
    padding: 4px;
}
/*
.btn_stage > .btn4 {
	border:1px solid transparent;
	margin:0px;
	padding:1px 5px;
}
*/










.btn_sort {
	padding:6px 12px;
	border-radius: var(--main-border-radius);
	
}
.btn_sort_border .btn4{
	margin:2px 0px;
	border: 1px solid;
	border-color: var(--border-color-grey);
	padding-left:12px;
}
.btn_sort.btn3 {
	color: var(--text-color-grey) !important;
}
.selected .btn_sort {
	/*
	color: #fff;
	
    background-color:#048ad9;
	*/
	color: var(--text-color-grey);
   
	border-color:#048ad9;
	border-radius: var(--main-border-radius);
}
.selected.btn_sort:hover {
}


.btn5 {
	padding-left: 6px;
	padding-right: 6px;
}
.btn6 {
	background:rgba(255, 255, 255, 1);
	margin:0px;
}
.btn7 {
	display: inline-block;
    border-radius: var(--main-border-radius);
    box-shadow: 0 0px 1px rgba(7,25,40,0.10), 0 1px 1px rgba(7,25,40,0.10), 0 2px 3px rgba(7,25,40,0.08);
}
.btn10 {
	margin:4px;
}

.btn8 {
	display: inline-block;
    padding: 6px;
    border-radius: var(--main-border-radius);
	/*
    margin-left: 4px;
	*/
    border: 1px solid;

	color: var(--text-color-grey);
	/*
	border-color: var(--border-color-grey);
	*/
	border-color: transparent;
}


.param_profile_name .chip {
	background: none;
}


.landing_start_btn:hover ,
.headline_btn:hover ,
.main_search_btn:hover ,
.btn_task:hover ,
.btn_param:hover ,
.btn10:hover ,
.btn8:hover {
	background:var(--bg-color-grey-hover); /* important overrides colors set by inline properties inside task labels btns */
	color:black;

}
.btn_task.btn_label:hover {
	color:black;

	border-color:black !important; /* important overrides colors set by inline properties inside task labels btns */
}

.reload_pending .headline_btn{
	
	color: black;
	border-color: #EC5C99;
}
.reload_pending .drop_down_menu {
	border:1px solid #EC5C99;
}
.reload_pending_info {
	display: none;
}
.reload_pending .reload_pending_info {
	display: block;
}

/*
.alternate.btn8 ,
.alternate.btn4 {
	color: #fff;
    background-color: #048ad9;
}
.alternate.btn4:hover {
	color:#fff;
}
*/
.selected.btn4 {
	/*
	border-color:rgba(223, 229, 233, 1);
	color:#048ad9;
	*/
	color: #fff;
    background-color:#048ad9;
    box-shadow: 0 0px 1px rgba(7,25,40,0.10), 0 1px 1px rgba(7,25,40,0.10), 0 2px 3px rgba(7,25,40,0.08);
	border-color:#048ad9;
	border-radius: var(--main-border-radius);
}
.selected.btn4:hover {
	color: #fff;
}
.selected.btn10 {
	color: #048ad9;
    border:1px solid;
	border-color:#048ad9;
	border-radius: var(--main-border-radius);
}

/*
.selected:hover {
}
*/
.cbtn ,
.cbtn_p {
    text-align:justify;
    font-weight:400;
    border:1px solid #e9eff3;
    cursor:default;
}
.cbtn {
    padding:0px;
}
.btn3:hover {
	color:#000000;
    z-index:2;
    /*
	background:rgba(255, 255, 255, 0.6);
	*/
}

.views_menu_main .btn_dd:hover ,
.btn9:hover {
	color:#000000;
	
	background:var(--bg-color-grey-hover);
	
}

/*
.views_menu_main .views_edit_btn {
	display: none;
}
*/
.btn_menu:hover {
	color:#000000;
	/*
	background-color:rgba(242, 245, 248, 1);
	*/
}


.btn2:hover {
	color:#000000;
}
/*
.btn_r:hover{
	color:#000000;
    z-index:2;
	background:none;
}*/
.btn_disabled:hover {
    color:inherit;
    background:initial;
    z-index:0;
    cursor:default;
}

.btn_input_wrap ,
.btn_input_wrap_l {
    position:absolute;
    top:0px;
    bottom:0px;
}
.btn_input_wrap {
	right:0px;
	display: flex;
    justify-content: center;
    align-items: center;
}
.btn_input_wrap_l {
	left:0px;
}
.btn_input {
    padding-top:0px !important;
    padding-bottom:0px !important;
    max-height:100%;
    width:52px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

.btn:hover .menu_show_btn_bg ,
.btn_ins:hover .menu_show_btn_bg ,
.btn2:hover .menu_show_btn_bg {
    border-color:#000000;
}
.inactive:hover {
	color:#627996 !important;
	background-color:initial !important;
	border-color:#eef0f6 !important;
	cursor:default !important;
    z-index:2;
}
.remove {
	width:20px;
	height:calc(100% + 2px);
    position:absolute;
    top:-1px;
    right:-29px;
    cursor:pointer;
	border:1px solid transparent;
	border-radius:2px;
	transition-property:box-shadow, border-color, color, background-color;
    transition-duration:0.10s;
    transition-timing-function:cubic-bezier(1,1,0.5,0.1);
    transition-delay:0s;
	box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
	background-image:url(../icon/cross.png);
	background-size:16px;
	background-position:center 7px;
	background-repeat:no-repeat;
}
.remove:hover {
	border-color:#c7d8e2;
    background-color:#eef0f6;
}
.quest_highlighted {
    border-color:#048ad9 !important;
}


.checkbox_item_enabled .checkbox_add {
	display:none;
}
.checkbox_item_disabled .checkbox_enabled {
	display:none;
}
.checkbox_item_enabled:hover .checkbox_enabled {
	display:none;
}
.checkbox_remove {
	display:none !important;
}
.checkbox_item_enabled:hover .checkbox_remove {
	display:flex !important;
}




.reply_pages {
	padding: 0 12px;
	/*
	border-bottom: 1px solid rgba(233, 236, 238, 1);
	*/
}
.reply_page_nmbr {
	flex:1;
	cursor:default;
}

.reply_page ,
.reply_page_hold {
	display:block;
	
	margin:16px 0px 0px 0px;
		margin:0px 0px 0px 0px;
	line-height:20px;
	transition-property:border-color, color, background;
    transition-duration:0.1s;
    transition-timing-function:linear;
    transition-delay:0s;
	
	text-align:center;
    font-weight:500;
    z-index:2;
	letter-spacing:-0.6px;
	border:1px solid transparent;
	margin-top:-1px;
	border-radius: var(--main-border-radius);

}
.reply_page {
	cursor:pointer;
}

.reply_page_img {
	padding:0px 0px 0px 0px;
	margin:-1px;
	cursor:pointer;
	line-height:12px;
	width:30px;
}


.align_c {
    text-align:center !important;
}
.align_l {
    text-align:left !important;
}
.align_r {
    text-align:right !important;
}
.align_j {
    text-align:justify !important;
}

.capital {
	text-transform:capitalize;
}

.nothing {
	text-align:center;
	padding:8px 12px;
	background:rgba(255,255,255,1.75);
	border-radius: var(--variable-border-radius);

	/* for list views when there are no items */
	margin-bottom: 1px;

	border: 1px solid transparent;

	font-size: 12px;
}
.cntnr_0 ,
.cntnr_10 ,
.cntnr_20 {
	display:block;
	
	/*
	messes up drop downs 
    z-index: 1;
	*/
	position:relative;
	padding:11px;
	border:1px solid;
	border-color:transparent;
    transition-property:box-shadow, border-color, color, background-color;
    transition-duration:0.10s;
    transition-timing-function:cubic-bezier(1,1,0.5,0.1);
    transition-delay:0s;
    
	
	
	box-shadow: 0 0px 1px rgba(7,25,40,0.03), 0 1px 1px rgba(7,25,40,0.03), 0 1px 2px rgba(7,25,40,0.02);
	
	box-shadow: none;
	
	
	
	
    border-radius: var(--main-border-radius);
	border-radius: var(--main-border-radius);
	
	/* border-box is important for correct width in drag and drop */
    box-sizing:border-box;

	
}
.cntnr_0 {
	padding:0px;
	border-radius: var(--variable-border-radius);
}
.cntnr_views .cntnr_view {
	background:white;
	border-radius: var(--variable-border-radius);
	margin-top:1px;
}
.cntnr_views .cntnr_view .btn_dd {
	
	border-radius: var(--variable-border-radius);
	
}
.cntnr_views .cntnr_view .btn_dd{
	padding:16px 12px;
}
.cntnr_views .cntnr_views_hide {
	display: none;
}


.border {
	border-top:1px solid rgba(223, 229, 233, 1);
}
.cntnr_10 .acrylic ,
.cntnr_20 .acrylic ,
.cntnr_0 .acrylic {
	
	overflow:hidden;
	margin:-1px;
}
.deleted.cntnr_0 {
	border-color:rgba(244, 129, 177, 1);
}
.task_deleted {
	display:none;
}
.deleted .task_deleted {
	display:block;
}

.cntnr_wrap {
	/*
    margin:4px 0px;
	*/
	margin:1px 0px;
    padding-top: 0px;
    padding-bottom: 12px;

	padding: 12px;
    /*
	box-shadow: 0 0px 1px rgba(7,25,40,0.03), 0 1px 1px rgba(7,25,40,0.03), 0 1px 2px rgba(7,25,40,0.02);
	*/
    border-radius: var(--variable-border-radius) var(--variable-border-radius) 0px 0px;
}


.cntnr_addtl {
    margin:4px 0px;
    
    padding-bottom: 4px;
    /*
	box-shadow: 0 0px 1px rgba(7,25,40,0.03), 0 1px 1px rgba(7,25,40,0.03), 0 1px 2px rgba(7,25,40,0.02);
	*/
    border-radius: var(--variable-border-radius) var(--variable-border-radius) 0px 0px;
}
.cntnr_addtl.cntnr_wrap_history {
	border-radius:0px 0px var(--variable-border-radius) var(--variable-border-radius) ;
	padding-bottom: 12px;
}

.middle_item .cntnr_addtl.cntnr_wrap_history {
	border-radius: 0px;
}


/*
.cntnr_wrap > .acrylic {
	background:  rgba(128, 131, 133, 1);
}
*/
.cntnr_wrap .cntnr_0 {
	/*
	box-shadow:none;
	border-top:1px solid rgba(233, 236, 238, 1);
	border-radius: 0px 0px var(--main-border-radius) var(--main-border-radius) ;
	*/
	/* this overrides .headline_menu_right .cntnr_0 margin */
	/*
	margin: 0px 0px -8px 0px !important; 
	*/

	/*
	z-index:0;
	*/
	border-top: 1px solid rgba(233, 236, 238, 1);
	border-bottom: 1px solid rgba(233, 236, 238, 1);
}

.task_minimized {
    display:block;
	font-size: 13px;
	/*
    background: #fff;
	*/
    color: black;
    font-size: 14px;
    line-height: 24px;
	
    
	
    border-radius: var(--main-border-radius) var(--main-border-radius) 0px 0px;
	
	/* this helps not to cut of a few pixels of text on overflow */
	padding: 1px;
    margin: -1px;
	overflow: hidden;

	max-height: 32px; /* this controls how much text is shown on overflow hidden */

    border-bottom: 0px solid rgba(233, 236, 238, 1);
    
    box-sizing: border-box;
}
.elem_plchldr ,
.task_plchldr {
	background: #048AD9;
    /* padding: 8px 10px; */
    height: 2px;
    /* color: black; */
    border-radius: var(--main-border-radius);
    /* line-height: 12px; */
    margin: -1px 0px;
    position: absolute;
    width: 100%;
    /* box-sizing: border-box; */
    /* left: 0px; */
    /* right: 0px; */
}
.elem_plchldr_circle ,
.task_plchldr_circle {
	position: absolute;
    top: -7px;
    left: 0px;
    height: 16px;
    width: 8px;
    background: #048AD9;
    z-index: 300;
    border-radius: 100%;

	border-radius: 4px;
}


.elem_plchldr_wrap {
	line-height: 0;

	/*	
		this works for 0px margin elements 
		if we have different margin elements
		best idea would be to adhjust margins in js
		look for this comment in js:

		//	copy styles into the placeholder

	*/
	/*
    margin: -2px 0px;
	*/
}
/*
.board_hierarchy .task_plchldr {
	margin-top:1px;
	border:1px solid transparent;
}
.hierarchy .task_plchldr {
	border:1px solid transparent;
	background: var(--bg-color-grey);
}
*/
/*
.elem_plchldr {
	background:#048AD9;
	
}
*/

.headline_menu_activity .cntnr_wrap ,
.headline_menu_history .cntnr_wrap {
	margin: 0px 4px 4px 4px;
    border-radius: 1px;
}
.no_shadow {
	box-shadow:none;
}
.cntnr_wrap_btn {
	width: 100%;
    height: 100%;
    position: absolute;
    /*
	background: rgba(255,255,255,0.75);
	*/
    top: 0px;
}

.cntnr_wrap div:not(.acrylic .cntnr_wrap_btn) {
	/* this makes sure cntnr_wrap_btn is not on top of everything */
    /* hmm, it's also on top of the text */
	
	
	/* z-index: 1; */
}
/*
.cntnr_wrap_btn:hover {
	
	background: rgba(255,255,255,0.8);
	
}
*/
.cntnr_wrap_top {
	    padding: 0px 12px 0px 12px;
   
	border-radius: inherit;
}
.cntnr_refresh_btn {
    width: 100%;
    background: rgba(255,255,255,0.98);
    heighT: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(4,140,217,1);
    border-radius: inherit;
}




.cntnr_refresh {
	position:absolute;
	top:1px; /* to account for 1px high divider grey */
	bottom:0px;
	left:0px;
	right:0px;
	z-index:1;
	display:flex;
	justify-content:center;
	align-items:flex-start;
	border-radius: inherit;
}
.refresh_comments {
	position:relative;
	margin-top:12px;
}
.cntnr_t1 {
	display:block;
	z-index:1;
	position:relative;
	border-radius: var(--main-border-radius);
	/*
	box-shadow: 0 0px 1px rgba(7,25,40,0.05), 0 1px 1px rgba(7,25,40,0.07), 0 2px 3px rgba(7,25,40,0.05);
	*/
	/*
	 background: rgba(230, 233, 235, 1);
	*/
	border: 1px solid;
	border-color: var(--border-color-grey);
}
.cntnr_t2 {
	display:block;
	z-index:1;
	position:relative;
	border-radius: var(--main-border-radius);
	/*
	border:1px solid rgba(223, 229, 233, 1.0);
	*/
	border: 1px solid;
	border-color: var(--border-color-grey);
}

.cntnr_10 {
	padding:10px;
}

.divider ,
.list_divider {
    height:1px;
    min-height:1px;
    margin-top:-1px;
	
	
	background:linear-gradient(90deg, rgba(4, 140, 217, 0) 0%,rgba(193, 199, 203, 0.6) 50%,rgba(193, 199, 203, 0.6) 130%);
    background:linear-gradient(90deg, rgba(4, 140, 217, 0) 0%,rgba(255, 255, 255, 0.4) 50%,rgba(255, 255, 255, 0.4) 130%);
    background: rgba(4,140,217,0.05);
	
	background: linear-gradient(90deg, rgba(4, 140, 217, 0) 0%,rgba(240, 243, 245, 0.95) 50%,rgba(193, 199, 203, 0) 100%);
	
	
	background: linear-gradient(90deg, 
		rgba(48, 71, 100, 0) 0%,
		var(--bg-color-grey) 8%,
		var(--bg-color-grey) 50%,
		var(--bg-color-grey) 92%,
		rgba(48, 71, 100, 0) 100%
	);
	z-index:5;
	
	
}
.list_divider {
	margin-top:-16px;
	margin-bottom:16px;
	display: none;
}


.grey_light.divider {
	background: rgba(48, 71, 100, 0.20);
}


.grey.divider ,
.list_divider {
    
	background:rgba(48, 71, 100, 0.075);
}
.grey_light.divider {
    background:rgba(223, 229, 233, 0.5);
}


.dark.divider {
	background:rgba(119, 132, 156, 0.5);
}

.divider_full {
    height:1px;
    background:rgba(255,255,255,0.6);
	background:rgba(223, 229, 233, 1);

	
}
.transparent.divider_full {
	background:transparent;
}


.hidden ,
.hidden_duplicate {
    display:none !important;
}
.hidden_2 {
    display:none !important;
}
.hidden_3 {
    display:none !important;
}


.hide_pick .hide_pick_el {
	display:none !important;
}




.selected .selection_item.hidden {
	display:flex !important;
}




.flex_row ,
.flex_row_chip ,
.flex_row_panel ,
.flex_row_panel_wrapper ,
.flex_row_panel_main ,
.flex_row_start ,
.flex_row_param_name {    
	display:flex;
	flex-direction:row;
}
.flex_row_chip_block .flex_row_chip {
	display: block;
}


.flex_row_panel_wrapper {
	flex-grow:1;
	max-height: 100%;
}
.flex_row_panel_main {
	/*
	overflow-x:auto;
	overflow-y:hidden;
	*/
	flex-grow:1;
	margin-top:-1px;
	padding-top:1px;
	max-height: 100%;

	/* required for columns_scroll */
	/*
	overflow-y:hidden; 
	*/

	width:min-content;
	/*
	min-width: 100%;
	*/
	/*
		add this and when the content is wider than the screen,
		the left divs will go beyond screen
		and you won't be able to scroll there
		
		we can put in some flex_eq divs there
	*/
	
	justify-content:center;
	
}
/*
.flex_row_panel_main::after {
    min-width: 0.1px;
    content: '';
}
*/

/*
.col_resizer_visible .flex_row_param_name {
	display:block;
}
*/
.col_resizer_visible .valign_m2_param_name {
	display:flex;
	justify-content:center;
	align-items:center;
}
/*
.col_cntnr_listview {
	padding-top:2px !important;
}
*/

.columns_scroll .cntnr_20{
    margin: 0px;
    padding: 8px;
}
/*
.board_list .columns_scroll {
	display:none;
}
*/
/*
.current {
	background: var(--bg-color-grey);
	color:#000;
}
*/
.window_scroll_btn {
	height:16px;
	background:rgba(48, 71, 100, 0.20);
	/*
	flex-grow:1;
	*/
	margin:4px;
	border-radius:var(--main-border-radius);
	cursor:pointer;

	height:34px;
	width:34px;
}

.window_scroll_btn2 {
	height:4px;
	background:rgba(48, 71, 100, 0.20);
	flex-grow:1;
	margin:0px 4px 4px 4px;

	
	border-radius: var(--main-border-radius);
}
.window_scroll_btn:hover {
	background:rgba(48, 71, 100, 0.50);
}




.window_el {
	display: flex;
    flex-direction: column;
	justify-content: space-around;

	
	/* this breaks width of board_board window, when there's a board_list next to it */
	/*
	flex-basis: 100%;
	*/

	/* min-width breaks widths of multiple windows */
	min-width:314px;
	width:614px;


	/*
	border-top:1px solid transparent;
	*/
	
	/*
	margin: 8px 4px;
	*/
	margin: 0px;
	

	/*
	padding: 8px 8px;
	*/
	/*
    box-shadow: 0 0px 1px rgba(7,25,40,0.03), 0 0px 4px rgba(7,25,40,0.03), 0 0px 8px rgba(7,25,40,0.02);
	*/
	border-radius: var(--main-border-radius);
	
	/*
	border: 1px solid #fff;
	border: 1px solid rgba(255, 255, 255, 0.36);
	*/
	position:relative;

	/*
	max-width:100%; 
	*/
	/* required for small screen width. It brakes stuff if window content is wider than regular screen */

	overflow:hidden;



	
	
}
/*
:not(.wrap_cntnr ) > .window_el { 
	background: rgba(255,255,255,0.45);
    margin: 2px 0px;
    padding: 2px;
}
.window_el:not(:first-child) {
	margin-left:2px;
}
*/

.window_el_appear {
	animation:window_el_appear_wrap 0.3s;
	animation-timing-function: linear;
}
@keyframes window_el_appear {
	0% {
		transform:translateY(-100%);
	}
	100% {
	}
}

.wrap .window_el_appear {
	animation:window_el_appear_wrap 0.3s;
	animation-timing-function: linear;
}
@keyframes window_el_appear_wrap {
	0% {
		scale:0.5;
		opacity:0.2;
	}
	100% {
	}
}



.wrap .window_el {
	margin: 0px 0px;
	/* this is for item to be fullheight */
	flex-grow:1;
	border-radius: var(--main-border-radius);
}
.window_el.working {
	border-color:rgba(4,138,217,1);
}
.window_el.working_list {
	border-color:rgba(0,255,255,1);
}

.window_el.standalone {
	/*
	width: 800px;
    max-width: calc(100vw - 8px);
	*/
	
	margin-top:0px;
	margin-bottom:0px;
	/*
	margin:0px -4px;
	*/
	border-radius:0px;
	width: -moz-available;          /* WebKit игнор. */
    width: -webkit-fill-available;  /* Mozilla игнор. */
    width: fill-available;
}
.board_col.standalone {
	/*
	width: 600px;
	*/
	width: auto;
    min-width: 314px;
	
    max-width: 600px;
	/* only left and right can be auto, otherwise the landing is messed up */
    margin-left: auto;
	margin-right: auto;
}
.board_col.landing_col {
	min-width: 100%;
}

.wrap .resizer ,
.window_el.standalone .resizer ,
.window_el.standalone .board_cover ,
.window_el.start .resizer ,
.window_el.start .board_cover ,
.window_el.start .cover_board_list_options
{
	display: none;
}


.window_el.standalone > .acrylic {
	display: none;
}


.valign_m {
	height:100%;
	display:flex;
	justify-content:center;
	align-items:center;
}
.valign_m_end {
	height:100%;
	display:flex;
	justify-content:flex-end;
	align-items:flex-end;
}
.valign_m_end2 {
	display:flex;
	justify-content:flex-end;
	align-items:flex-end;
}

.valign_m_start {
	height:100%;
	display:flex;
	justify-content:flex-start;
	align-items:flex-start;
}
.valign_m2  {
	display:flex;
	justify-content:center;
	align-items:center;
}
.valign_m3  {
	display:flex;
	align-items:center;
}
.board_list .valign_m3_bl {
	display:flex;
	align-items:center;
}

.zindex1 {
    z-index:1;
}
.zindex5 {
    z-index:5;
}

.flex_row_start {    
	justify-content:flex-start;
}
.flex_keep_size {    
	flex:0 0 auto;
}
.flex_row_center {    
	display:flex;
	flex-direction:row;
	justify-content:center;
	margin-left:auto;
	margin-right:auto;
}
.flex_row_end {    
	display:flex;
	flex-direction:row;
    justify-content:flex-end;
}
.flex_col {  
	display:flex;    
	flex-direction:column;
	justify-content:space-around;
}
.flex_col_start {  
	display:flex;    
	flex-direction:column;
	justify-content:flex-start;
}
.flex_col2 {  
	display:flex;    
	flex-direction:column;
}
.flex_col_cen {  
	display:flex;    
	flex-direction:column;
	justify-content:center;
}
.cntnr_listview  .task_col_between , 
.flex_col_between {  
	display:flex;    
	flex-direction:column;
	justify-content:space-between;
}




.flex_wrap ,
.flex_wrap_eq_h {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-around;
	align-content:space-around;
}
.flex_wrap {
	align-items:center;
}
.flex_ai_start {
	align-items:flex-start;
}
.flex_ai_center {
	align-items:center;
}
.flex_ai_stretch {
	align-items:stretch;
}
.flex_jc_center {
	justify-content:center;
}
.flex_jc_start {
	justify-content:flex-start;
}
.flex_jc_even {
	justify-content:flex-evenly;
}
.flex_ai_around {
	align-items:center;
}
.flex_jc_around {
	justify-content:space-around;
}
.flex_jc_end {
	justify-content:flex-end;
}
.flex_jc_between {
	justify-content:space-between;
}


.flex_wrap_between {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;
}
.flex_wrap_between_end {
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-end;
	align-items:center;
}
.flex_wrap_left {
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-start;
}
.first {
	margin-top:0px !important;
}
.font_small_18 {
	font-size:18px !important;
    line-height:18px !important;
}
.font_small_13 {
	font-size:13px !important;
    line-height:13px !important;
}
.font_small_12 {
	font-size: 13px !important;
    line-height:12px !important;
}
.font_small_11 {
	font-size:11px !important;
    line-height:11px !important;
}
.font_small_10 {
	font-size:10px !important;
    line-height:10px !important;
}
.f_landing_large {
	font-size: 18px;
    line-height: 26px;
	transition-property: font-size, line-height;
    transition-duration: 0.1s;
    transition-timing-function: linear;
    transition-delay: 0s;
}
.f_landing_large1 {
	font-size: 52px;
    line-height: 52px;
    text-transform: uppercase;
    color: rgba(4, 140, 217, 1);
	font-weight:500;
	transition-property: font-size, line-height;
    transition-duration: 0.1s;
    transition-timing-function: linear;
    transition-delay: 0s;
}
@media screen and (max-width: 400px) {
	.f_landing_large1 {
		font-size: 38px;
		line-height: 38px;
	}
	.f_landing_large {
		font-size: 14px;
		line-height: 24px;
	}

	
}

.f_feature_large {
	font-size: 16px;
    line-height: 24px;
}
.f_feature_large1 {
	font-size: 18px;
    line-height: 18px;
    text-transform: uppercase;
    color: rgba(4, 140, 217, 1);
    font-weight: 500;
}
.cntnr_feature {
	min-width:250px;
	margin: 8px;
	margin-top: 12px;
    margin-bottom: 12px;
	border-radius: var(--main-border-radius);
}


.param_profile_name {
	/*
	
	margin: 4px 0px;
	*/
	
	
	border-radius: var(--main-border-radius) ;
}
.param_name {
	font-weight: 500;
    /* background: var(--bg-color-grey); */
    
	/*
    padding: 4px 6px 4px 0px;
   
    
    margin-right: 4px;
	border: 1px solid transparent;
	*/
	/*
	border-bottom: 1px solid rgba(233, 236, 238, 1);
    border-right: 1px solid rgba(233, 236, 238, 1);
	border-bottom-right-radius: 6px;
	*/
}
.param_page {
	font-weight: 500;
}
.btn_filter .param_name {
	margin:0px;
	 margin-right: 4px;
	padding: 0px;
}
.param_page_hide .param_page ,
.list_item .param_page ,
.profile_content .param_page{
	display:none;
}
.col_cntnr_listview  {
	max-width: 100%;
	box-sizing: border-box;
}
.list_menu_col_files {
	/* 
		this is so drop zone in listview
		takes full height of a cell
		even when cell is empty
	*/

	min-height: 100%;
	position:relative;
}



.task_text_cntnr {
	padding:8px 12px;
	width:max-content;

	width: max-content;
    max-width: 100%;
    box-sizing: border-box;
}
.board_list .task_text_cntnr {
	/*
	min-width:284px;
	max-width:284px;
	*/
	box-sizing: border-box;

	/*
		this centers text vertically 
		and makes sure lists are 34px min high always - no matter if any cols are shown
	*/
	/*
	margin-top:2px;
	margin-bottom:2px;
	*/
}


/* don't do this, there may still be tasks with no parameters and then it just looks weird */
/*
.board_board .task_text_cntnr {
	margin-bottom:4px;
}
*/


.board_list .list_item .task_text_cntnr{
	padding-right:12px;
}


/*
.context_missing {
	opacity:0.3;
}
.context_missing:hover {
	opacity:1;
}
*/

.desc_context .text {
	/* 
		it's important to limit height
		of the text div intself
		otherwise text div is high
		and user only sees first (2) rows
		and then when clicking on it
		the drop down btn appers at the bottom
		of it's full height
		and not at the first 2 rows
		where user would expect it
	*/

	font-size: 11px !important;
    line-height: 15px !important;
    padding: 2px 8px;
    /* min-height: 24px; */
    margin: 1px !important;
    max-height: 34px; 
    overflow: hidden;
    background: var(--bg-color-grey);
	background: var(--bg-color-grey);
    border-radius: var(--main-border-radius);
	box-sizing: border-box;
}
brcustom {
	display: block;
}
brcustom br {
	display:none
}
.desc_fullheight {
	max-height: initial !important;
}
/*
	omit first br as brcustom is a block itself and add one extra line
*/
.desc_fullheight brcustom :not(br:first-child) {
	display:block;
}


.linked_items .task_text_cntnr  {
	font-size:12px;

	
	/*
	padding-top:0px;
	padding-bottom:0px;
	*/
}



.task_options_cntnr {
	
	position: absolute;
    right: 10px;
    top: 8px;
}
.board_list .task_options_cntnr{
	right: initial;
	left: 200px;
	top: -1px;
}



.task_options_cntnr .task_options_btn {
	display:none;
	/*
	background: white;
	border-radius: var(--main-border-radius);
	box-shadow: 0 0px 1px rgba(7,25,40,0.03), 0 1px 1px rgba(7,25,40,0.13), 0 1px 2px rgba(7,25,40,0.12);
	*/
}
.list_item:hover .task_options_cntnr .task_options_btn {
	display:flex;
} 




.task_options_cntnr  {
	display:none;
	
}
.list_item:hover .task_options_cntnr {
	display:flex;
	z-index: 1;
} 
.task_options_cntnr .btn_task{
	background: #fff;
}





.timer_indicator {
	
	display:none;
	
	position:absolute;
	top: -8px;
	right:-8px;
	
	/*
	background:rgba(4, 140, 217, 1);
	border-radius: var(--main-border-radius);
	*/
}
/*
.your .timer_indicator {
	background:rgba(21, 204, 173, 1);
}
.mltpl .timer_indicator {
	background:#EC5C99;
}
*/
.timer_on .timer_indicator {
	display:block;
}



.member_short {
	position:relative;

	border:1px solid transparent;
	margin-right:2px;
	margin-left:2px;
}




.member_short_btn {
	position:absolute;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	
	border-radius:var(--main-border-radius);
	cursor:pointer;
	transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: linear;
    transition-delay: 0s;

	background:rgba(213, 216, 218, 1);
	opacity:0;

	display:none;
}
.start .member_short_btn.start {
	display:block;
}
.stop .member_short_btn.stop {
	display:block;
}

.member_short:hover .member_short_btn {
	opacity:1;
}
.member_short_btn:hover {
	
}

.member_short_clock {
	position:absolute;
	bottom:0px;
	
	right:-4px;

	display:none;
}
.active .member_short_clock ,
.active.member_short_clock {
	display:block;
}
.timer_indicator .clock, 
.member_short_clock .clock {
	margin:0px;
	width:14px;
	height:14px;
	background:rgba(255, 255, 255, 1);

	border:1px solid rgba(213, 216, 218, 1);
}

.timer_indicator .clock .minute ,
.timer_indicator .clock .hour ,
.member_short_clock .clock .minute ,
.member_short_clock .clock .hour 
{
	width:2px;
}
.timer_indicator .clock .center ,
.member_short_clock .clock .center 
{
	width:2px;
	height:2px;

	left:calc(50% - 1px);
	top:calc(50% - 1px);
}

.member_other_clock {
	width:34px;
	height:34px;
	box-sizing: border-box;
}
.member_other_clock .member_short_clock {
	position:relative;
	top:auto;
	right:auto;
}











.font_std {
	font-size:14px;
}
.f_w400 {
    font-weight:400;
}
.f_w500 {
    font-weight:500;
}
.f_w700 {
    font-weight:700;
}
.height100 {
    height:100%;
    min-height:100%;
}
.height100_max {
    height:100%;
	min-height:100%;
	max-height:inherit;
}
.width100 {
    width:100%;
}
.min_width220px {
	min-width: 220px;
    max-width: 100%;
	box-sizing:border-box;
}
.min_width_50 {
    min-width: 50%;
	box-sizing:border-box;
}
.min_width_100 {
    min-width: 100%;
	box-sizing:border-box;
}
.width300 {
    width:300px;
}
.min_width_300px {
	min-width:300px;
}
.max_width_300px {
	max-width:300px;
}
.max_width_250px {
	max-width:250px;
}
.min_width_250px{
	min-width:250px;
}
.max_width80 {
    max-width:80%;
}
.max_width100,
.max_w_100 {
    max-width:100%;
}
.max_width_600px {
    max-width: 600px;
}
.width300
.width_50p {
	width:50%;
	min-width:300px;
}




.landing_cntnr {
	max-width:1000px;
	margin-left:auto;
	margin-right:auto;
}
.landing_start_btn {
	display: block;
    cursor: pointer;
    margin: 0px 0px 0px 0px;
    line-height: 20px;
    transition-property: all;
    transition-duration: 0.1s;
    transition-timing-function: linear;
    transition-delay: 0s;
    text-align: center;
    color: #000;
	/*
    color: rgba(4, 140, 217, 1); 
	*/
    /* border: 1px solid;
	border-color: var(--border-color-grey); */
    /* border: 1px solid rgba(4, 140, 217, 1); */
    margin-top: 0px;
    border-radius: var(--main-border-radius);
    font-weight: 500;
    font-size: 13px;
    padding: 8px 44px;
    /* box-shadow: 0 0px 1px rgb(0 0 0 / 64%), 0 1px 3px rgb(0 0 0 / 15%); */
    width: 120px;
    margin: auto;
    text-transform: uppercase;
    background: rgba(255,255,255,0.75);
}




.bubbles {
	/*
	width: 100vw;
	height: 100vh;
	max-height:min(100vh, 414px);
	max-width: min(100vw, 414px);
	min-width: 314px;
	min-height: 314px;
	*/

	width: 100vw;
	height: calc(100vh - var(--headline-height));
    max-height: min(100vw, 514px);
    max-width: min(calc(100vh - var(--headline-height)), 514px);
	min-width: 314px;
	min-height: 314px;
	/*
	width: 90vw;
	height: calc(90vh - var(--headline-height));
    max-height: 90vw;
    max-width: calc(90vh - var(--headline-height));
	*/
	position:relative;
	margin:auto;

	background:transparent;

	/*
	overflow: hidden;
	*/
	font-size:11px;
}
.bubbles svg {
	/*
	background:blue;
	*/
}
.bubbles svg > path{

	

	fill: rgba(255, 255, 255, 0.5);
    stroke: rgba(255, 255, 255, 0.5);
    stroke-width: 4;
    stroke-linejoin: rgba(255, 255, 255, 0.5);

	
}
.bubble {
	position:absolute;
	
	background:rgba(255,255,255,1);
	/*
	box-shadow:0 0px 4px rgba(255,255,255,0.8), 0 0px 8px rgba(255,255,255,0.75), 0 0px 12px rgba(255,255,255,0.45);
	*/
	color:black;
	font-weight:500;

	border-radius:100%;
	/*
	animation: float 6s infinite linear;
	*/
	transition:all 0.4s;


	cursor:pointer;
}
.bubble.main ,
.bubble.main_temp {
	background:rgba(255,255,255,1);
	animation: unset;

	font-size:14px;
}

.bubble.bubble_first {
    outline: 1px solid rgba(4, 140, 217, 1);
}


.bubble:hover {
	padding:1.5%;
	margin:-1.5%;
	/*
	background:blue;
	*/
}
@keyframes float {
  from {
    transform: rotate(0deg) translate3d(4px, 0, 0) rotate(0deg);
  }

  to {
    transform: rotate(360deg) translate3d(4px, 0, 0) rotate(-360deg);
  }
}


.bubble.text_detail_show .bubble_text , 
.bubble_text_detail {
	display:none;
}
.bubble.text_detail_show .bubble_text_detail {
	display:flex;
	overflow:hidden;
	
}
/*
@keyframes float {
	0% {
		transform: translatey(0px) translatex(0px);
		transform:scale(1);
	}
	20% {
		transform: translatey(-20px) translatex(0px);
	}
	40% {
		transform: translatey(0px) translatex(-20px);
		transform:scale(1.1);
	}
	60% {
		transform: translatey(20px) translatex(0px);
	}
	80% {
		transform: translatey(0px) translatex(20px);
	}
	100% {
		transform: translatey(0px) translatex(0px);
		transform:scale(1);
	}


}
*/


.bubble_1 {
	width: 10%;
	height:10%;

	position:absolute;
	top:10%;
	left:20%;

	border:4px solid #fff;

	border-radius:100%;
}
.bubble_2 {
	--var_width:20%;
	--var_height:20%;
	width:var(--var_width);
	height:var(--var_height);

	position:absolute;
	top:calc(40% - var(--var_width) / 2);
	left:calc(40% - var(--var_height) / 2);

	border:4px solid #fff;

	border-radius:100%;
}



.end {
	display:block;
	position:relative;
	padding:10px;
	margin:38px 20px 0px 20px;
	border-top:1px solid #e9eff3;
	border-bottom:1px solid #e9eff3;
}
.lh_0 {
    line-height:0;
}
.input ,
.text_input {
	display:block;
	word-wrap:break-word;
    min-width:100px;
	outline-width:0px;
	cursor:text;
	margin:0px;
	padding:5px 12px;
	 min-height:32px;
	line-height:inherit;
	border:0px;
	font-size:inherit;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    color:#000000;
    caret-color:#048ad9;
    font-family:inherit;   
	
	
    transition-property:border-color, color, background;
    transition-duration:0.15s;
    transition-timing-function:linear;
    transition-delay:0s;
   
	border-top:1px solid rgba(223, 229, 233, 0);
	border-left:1px solid rgba(223, 229, 233, 0);
	border-right:1px solid rgba(223, 229, 233, 0);
	border-bottom:1px solid rgba(223, 229, 233, 1);
	
	border:2px solid rgba(223, 229, 233, 0.0);
	background:rgba(223, 229, 233, 0);
	border-radius: var(--main-border-radius);
	
	
	
	min-width:100%;
	
	border-radius: var(--main-border-radius);

	text-transform: none;
}
.input {
	border-radius: var(--main-border-radius);
	 font-weight:500;
	background: rgba(233, 236, 238, 0);
	
	border-color: rgba(240, 243, 245, 0.0);
}
.input_cntnr_overflow,
.input_cntnr_3 {
	background: var(--bg-color-grey);

	border-radius: var(--main-border-radius);
}
.input_cntnr_top {
	border-radius: var(--main-border-radius) var(--main-border-radius) 0 0 ;
}
.input_cntnr_btm {
	border-radius:  0 0 var(--main-border-radius) var(--main-border-radius);
}


.text_input {
	/*
	padding-left:8px;
	padding-right:8px;
	    padding: 0px;
    padding-top: 4px;
    padding-bottom: 4px;
	padding: 4px;
	*/

	
	
	background-color: transparent;
	 
	    
	/* inline-block is required so clicking enter does not mess up the text input*/
	display:inline-block;

	/* compensate for inline-block*/
	margin-bottom:-5px;
	
	border-bottom-left-radius:0px;
    border-bottom-right-radius:0px;
	
    text-align: justify;
    word-wrap: break-word;
}
.text_input::before {
	display:none;
}
.input:hover ,
.text_input:hover {
	background-color:var(--bg-color-grey-hover);
}

.input_search {
	border-radius: var(--main-border-radius);
	
}
/*
.search_label_hidden .search_label {
	display:none;
}
*/
.search_label {
	display:none;
}
.search_label_show .search_label {
	display:block;
}
.condition_input_cntnr .input {
	max-width:100px;
}





.quick_add_cover {
	z-index: 99;
    position: absolute;
    /* top: 0px; */
    bottom: 0px;
    left: 0px;
    right: 0px;
}



.quick_add_input_cntnr .input_cntnr_3 {
	border-radius: 0 0 var(--main-border-radius) var(--main-border-radius);
}

.quick_add_input_cntnr .text_input ,
.quick_add_input_cntnr .input_cntnr_top {
	/*
	max-height: 200px;
    overflow-y: auto;
	*/
	border-radius: 0 ;


	
}



.cntnr_confirmation .text_input ,
.quick_add_input_cntnr .text_input {
	padding-top:8px;
	padding-bottom:8px;

	min-height: 40px;
    max-height: 25vh;
    overflow-y: auto;
}


.input_fields_2 {
    margin-left:-8px;
    margin-right:-8px;
}
.msg_input_btn {
    margin:auto 0px 0px 0px;
    padding:7px 8px 7px 8px;
    cursor:pointer;
}
/*
.input1_btn {
	padding:4px;
	cursor:pointer;
}

.input_btn {
    margin:auto -8px auto 0px;
    padding:0px 8px 0px 16px;
    cursor:pointer;
}
*/
.input_fields_1 ,
.input_fields_2 ,
.input_fields_3 {
    position:relative;
    cursor:pointer;
	font-size:1em;
}
.input_fields_3 {
	margin-top:-8px;
	margin-top:0px;
}


.input_filled .text_input_fields ,
.input_active .text_input_fields {
	display:block;
}


anchor {
	display:none;
}

.text_input_btns {
	display: flex;
    /* border-top: 1px solid rgba(233, 236, 238, 1); */
    /* background: #fff; */
    /* border-radius: 20px; */
    /* border: 4px solid rgba(233, 236, 238, 1); */
    /* border: 4px solid var(--bg-color-grey); */
    /* margin-top: -4px; */
    /* border: 4px solid transparent; */
    /* padding: 4px; */
    background: transparent;
}
/*
.text_input_btns .btn4 {
	background-color: rgba(233, 236, 238, 1);
}
*/



/*
.input_filled .text_input_btns ,
.input_active .text_input_btns  {
    display:flex;
}
.input_filled .text_input_link ,
.input_active .text_input_link  {
    display:flex;
}
*/
.text_input_emoji {
	padding:0px 0px 0px 0px;
	max-height:84px;
	overflow-y:scroll;
	border-radius: var(--main-border-radius);
	margin:12px -8px -8px -8px;
}

.input_filled .label_input_3 ,
.input_active .label_input_3  {
    display:none;
}
.label_input_plchldr {
    padding:0px 0px 0px 0px;
	height:20px;
}
.label_input_hlpr {
    margin:8px 0px 0px 0px;
}

.label_input ,
.label_input_3 {
    position:absolute;
	/*
	these are correct values for main search
	*/
    top:11px;
    left:14px;

    color:var(--text-color-grey);
    transition-property:border-color, color, font-size, top, left;
    transition-duration:0.1s;
    transition-timing-function:linear;
    transition-delay:0s;
    line-height:12px;
	pointer-events:none;
	font-size:13px;
}


.label_input {
	padding-bottom:0px;
}


.input_error .input_fields_1 ,
.input_error .input_fields_2 {
	border-bottom:1px solid #EC5C99;
}

.input_active .label_input ,
.input_error .label_input ,
.input_autofilled .label_input ,
.input_filled .label_input {
    position: relative;
    top: 8px;
    font-size: 13px;
    /* height: 18px; */
    left: 4px;
    background: #fff;
    display: inline;
    border-radius: var(--main-border-radius);
    padding: 4px 8px;
    /* border-bottom: 1px solid grey; */
}
.input_fields_1:hover .label_input ,
.input_fields_2:hover .label_input {
    color:#000000;
}

.input_active .label_input {
    color:#048ad9 !important;
}

.input_active .label_input_plchldr ,
.input_autofilled .label_input_plchldr ,
.input_filled .label_input_plchldr {
    display:none;
}

.input_error .label_input ,
.input_error .label_input_hlpr {
    color:#EC5C99;
}
.input_error .label_input_plchldr{
    display:none;
    
}



.input_autofilled .label_input {
    color:rgba(0, 0, 0,1);
    border-color:#ced763;
}

.input_fields_3 ,
.input_fields_msg  {
	/*
	margin: -4px -4px -4px -4px;
	*/
    /* margin: -8px; */
    /* padding: 4px; */
    /* margin: -4px; */
    padding: 0px;
}



.input_fields_msg .text_input {
	max-height: 84px;
    overflow-y: scroll;
    border-color:transparent;
 
    
	
	
}
.input_active .text_input {
	/*
	border-color:#048ad9;
	*/
	/*
	background-color:rgba(233, 236, 238, 1);
	background: var(--bg-color-grey);
	*/
}

.input_fields_msg .cancel {
	display:none;
}


.break-word {
	word-break:break-word;
}

.nowrap {
	white-space:nowrap;
}

.overflow_h {
    overflow:hidden;
}
.overflow_y_auto {
    overflow-y:auto;
}
/*
.scroll_compensate_16 {
	padding-right:16px;
	margin-right:-16px;
}
*/
.scroll_compensate_12 {
	padding-right:12px;
	margin-right:-12px;
}


.label ,
.label_secondary {
    text-align: center;
	text-transform:uppercase;
    color: #048ad9;
    font-weight: 500;
    font-size: 13px;
    line-height: 14px;
    padding-bottom: 6px;
    padding-top: 6px;
    position: relative;
    border-bottom: 1px solid rgba(233, 236, 238, 1);
    /*  background: rgba(230, 233, 235, 1); */
    /* border-radius: var(--main-border-radius); */
    padding: 0px 0px 6px 0px;
    text-align: left;
    /* margin: 0px -12px 0px -12px; */
    padding: 2px 12px 12px 12px;
}
.label .btn_input_wrap  {
	margin-top: -10px;
	right: 8px;
}
.label_secondary {
	border:none;
	padding-bottom: 0px;
}




.r45 {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.r70 {
    -webkit-transform: rotate(70deg);
    -moz-transform: rotate(70deg);
    -ms-transform: rotate(70deg);
    -o-transform: rotate(70deg);
    transform: rotate(70deg);
}
.r90 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.r180 {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
.mirror_horiz {
	-moz-transform:    scaleX(-1); /* Gecko */
	-o-transform:      scaleX(-1); /* Opera */
	-webkit-transform: scaleX(-1); /* Webkit */
	transform:         scaleX(-1);
}

.label_tertiary {
	/*
	display:inline-block;
	*/
	text-align:center;
    color: #048ad9;
    font-size: 13px;
    margin-bottom:4px;
    text-transform:uppercase;
	font-weight: 500;
	line-height:12px;
}
.label_type_4 {
	font-size: 13px ;
    color: #048ad9;
}
/*
.label_tertiary::after {
	content:"";
	display:block;
	height:1px;
	background:rgba(4,140,217,0.10);
	margin:6px 0px 0px 0px;
}
*/
.label_quaternary {
	display:inline-block;
	text-align:center;
    color: #048ad9;
    font-size: 13px;
    margin-bottom:4px;
    text-transform:uppercase;
	font-weight: 500;
	line-height:12px;
}
.label_sm {
    font-size:13px;
    font-weight:400;
}
.label_perm {
    font-size:13px;
	font-weight:400;
    color:#000000;
}
.label_divider {
    height:1px;
	width:100%;
	background:rgba(4,140,217,0.1);
}

.hmin20 {
    min-height:20px;
}
.hmax20 {
    max-height:20px;
}
.h100 {
    max-height:100%;
    min-height:100%;
}
.h_min_100 {
    min-height:100%;
}


.relative {
    position:relative;
}







.unlock ,
.locked {
	padding:1px;
	z-index:5;
	min-width:26px;
	min-height:26px;
	min-width:30px;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
.locked {
	box-shadow:none;
}
.locked:hover {
	z-index:5;
}
.unlock:hover {
	z-index:5;
}
.unlock .unlock_icon {
	display:none;
}
.lock .lock_icon {
	display:none;
}
.lock:hover .lock_icon {
	display:block;
}
.lock:hover .unlock_icon {
	display:none;
}
.unlock:hover .lock_icon {
	display:none;
}
.unlock:hover .unlock_icon {
	display:block;
}


/*
.align_button{
	display:none;
	
	width:24px;
	position:absolute;
	left:-16px;
	top:0px;
	bottom:0px;
	z-index:3;
	opacity:0;
	cursor:pointer;
    overflow:hidden;
    border-radius:38px;
	background-image:url(../images/align.png);
	background-size:20px;
    background-color:rgba(255,255,255,1);
	background-repeat:no-repeat;
	background-position:top center;
	transition-property:box-shadow;
    transition-duration:0.15s;
    transition-timing-function:linear;
    box-shadow:0 1px 5px rgba(7,25,40,0.15), 0 3px 6px rgba(7,25,40,0.15);
}
.align_button:hover{
	opacity:1;
}
.align_button i{
    margin:-7px 0px 0px -10px;
}
.minimized .align_button {
	display:none;
}
*/

.cap ,
.cap_repost {
    position:relative;
	margin-top:16px;
	
	display: flex;
	flex-direction:row;
    max-width:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}
.cap_repost {
	margin-top:2px;
	margin-right:38px;
}

.cap_link {
	color:#048ad9;
	display:inline-block;
}
.cap_link:hover ,
.cap_name:hover {
    color:#000000;
}
.yours {
    color:#048ad9;
    font-weight:500;
}
.cap_name {
	font-weight:500;
    padding-top:0px;
    max-height:16px;
    line-height:13px;
	font-size:14px;
	margin-top:0px;
	
}
.cap_date {
	font-size:11px;
	line-height:11px;
    max-height:11px;
	margin-top:3px;
	font-weight:500;
}
.cap_repost .cap_name ,
.reply .cap_name {
	font-size:13px;
}



.headline_btn ,
.headline_btn2 {
    cursor:pointer;
    z-index:108;
	position:relative;


	
	cursor:pointer;
	margin:16px 0px 0px 0px;
		margin:0px 0px 0px 0px;
	line-height:20px;
	padding:5px 10px 5px 10px;
	transition-property:border-color, border-radius, color, background;
    transition-duration:0.1s;
    transition-timing-function:linear;
    transition-delay:0s;
	
	text-align:center;
    
	/*
	this messes up drop-downs
    z-index:2;
	*/
	/*
	letter-spacing:-0.6px;
	*/
	margin-top:0px;

	
	/*
	font-weight:500;
	*/
	
	font-size: 13px;
	font-size: 13px;

	
    padding: 6px;
    border-radius: var(--main-border-radius);
    margin-left: 4px;
    border: 1px solid;
	/*
	border-color:var(--bg-color-grey);
	*/
	border-color:transparent;
}
.headline_btn:hover  {
	color:#000;
}
.head_menu_show {
	text-align:right;
	cursor:default;
     cursor:pointer;
}
.head_menu_show_btn_bg ,
.head_menu_show_btn_bg_small {
    width:6px;
	height:6px;
	border:1px solid rgba(255,255,255,0.7);
	border-radius:20px;
 
	transition-property:color, border-color, background-color;
	transition-duration:0.10s;
	transition-timing-function:linear;
	transition-delay:0s;
}
.head_menu_show_btn_bg_small {
    width:6px;
	height:6px;
}
.headline_top_menu {
    min-height: var(--headline-height);
	min-height: 46px;
	/*
    margin-right: -3px;
	*/
	/*
    margin-bottom: 1px;
	*/
	border-bottom:1px solid var(--bg-color-grey);
}




#headline_menues {
	position:absolute;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
}


.resizer {
	position:absolute;
	top:0px;
	bottom:0px;
	
	width: 6px;
    cursor: col-resize;

	/*
	background: red;
	*/
	/*
	messes up drop downs 
    z-index: 2;
	*/
}
.resizer.left {
	left:0px;
}
.resizer.right {
	right:0px;
}
.headline_menu_right .resizer.right {
	display: none;
}




.menu , 
.headline_menu_left ,
.headline_menu_right ,
.connection_status  {
	position:absolute;
	top:0px;
    bottom:0px;
	z-index:80;
    width:314px; /* this should match board_col min-width */
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    transition-duration:0.15s;
	transition-timing-function:linear;
	transition-delay:0s;


	/*
	background-color: rgba(255, 255, 255, 1);
	*/
	
   
	/*
	box-shadow: 0 2px 1px rgba(0,0,0,0.05), 0 1px 4px rgba(0,0,0,0.07);
	
	box-shadow: 0 2px 1px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.17);
    */
	/*
	box-shadow:0 1px 5px rgba(7,25,40,0.12), 0 3px 6px rgba(7,25,40,0.12);
	*/
	/*
	border-right:1px solid rgba(223, 229, 233, 1);
	border-left:1px solid rgba(223, 229, 233, 1);
	*/
}
.headline_menu_left {
    position:fixed;
	top:0px;
    z-index:125;
	width:238px;
	border-right:1px solid rgba(223, 229, 233, 0.5);

	
	transition-duration:0s;
	
}
.headline_menu_left_bg {
	position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: rgba(0,0,0,0.3);
    z-index: -5;
	display:none;
	animation:headline_menu_left_bg 0.2s;
	animation-timing-function: linear;
}
@keyframes headline_menu_left_bg {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}



.headline_menu_right {
	
	background: none;
	/*
	box-shadow: 0 2px 1px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.17);
	*/

	border-left:1px solid rgba(223, 229, 233, 0.5);



    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    overflow-y: hidden;
    overflow-x: auto;

	min-width: calc(316px + 0px);
	width: fit-content;

	border-left: 4px solid rgba(255, 255, 255, 0.82);
} 
/*
.headline_menu_right .cntnr_0 .acrylic::before {
	background:#fff;
}
*/


.headline_menu_right.top_fall.hidden {
	bottom:100%;
	transition-property:bottom;
} 
.headline_menu_right.top_fall {
	right: 0px;
    margin: -4px 4px 8px 4px;
    border-radius: var(--main-border-radius);
    bottom: auto;
	    max-height: calc(100vh - 50px);
    transition-property: bottom;
    transition-duration: 0.1s;
    z-index: 106;
    width: 254px;
    /* box-shadow: 0 2px 1px rgba(0,0,0,0.05), 0 8px 4px rgba(0,0,0,0.07); */
    box-shadow: 0 1px 3px rgba(7,25,40,0.20), 0 2px 5px rgba(7,25,40,0.20);
}
.top_fall .height100 ,
.top_fall .headline_menu_ins {
	max-height:inherit;
}
.board_col_setup {
	width:100%;
	max-width:300px;
	margin-left:auto !important;
	box-sizing:border-box;
}
.headline_menu_right .window_el {
	/*
	min-height: 100%;
    max-height: 100%;
	margin-left:0px;
	margin-right:0px;
	*/
	flex-basis:100%;

	/*
	margin-left:0px;
	margin-right:0px;
	*/

	/*
	margin-top:0px;
	*/
}
.headline_menu_right_window_cntnr {
	flex-basis:100%;
	display: flex;
    flex-direction: column;
    justify-content: space-around;
}
/*
.headline_menu_right .window_el.board_columnext {
	margin-left:4px;
	margin-right:4px;
}
*/
/*
.headline_menu_right .window_el > .acrylic {
	display: none;
}
*/

.divider_dark_views_menu_main  {
	display: none;
}
.views_menu_main .divider_dark_views_menu_main  {
	display: flex;
}
.views_menu_main .divider_light_views_menu_main {
	display: none;
}


.views_menu_main .divider_save_view {
	display: flex;
}
.headline_menu_left .h_m_l_hidden {
	display: none;
}

.headline_menu_right .h_m_r_hidden {
	display: none;
}
.headline_menu_left_placeholder ,
.headline_menu_left_placeholder_headline ,
.headline_menu_right_placeholder {
    min-width:0px;
    max-width:238px;
    flex-grow: 1;
}
.headline_menu_right_placeholder {
    max-width:314px;
}
.placeholder_width.headline_menu_left_placeholder , 
.placeholder_width.headline_menu_left_placeholder_headline {
	min-width:238px;
}
.placeholder_width.headline_menu_right_placeholder  {
	min-width:314px;
}




.board_columnext .lw_h100 ,
.board_columnext .j_refresh_cntnr ,
.board_columnext .scroll_menu 
{
	height: 100%;
}
.board_columnext .scroll_menu {
	overflow: hidden;
}
.board_columnext .cntnr_list_fullheight {
	display: flex;
    flex-direction: column;
    justify-content: space-between;
}
/*
.board_columnext .board_col {
	padding-left:0px;
	padding-right:0px;
}
.board_columnext .board_col {
	max-width: initial;
	width: initial;
	padding:0px;
}
*/
/*
	this does not look good
.window_el.board_columnext {
	margin-top:4px;
	margin-bottom:4px;
}
*/
.board_columnext .flex_row_panel_x  {
	margin:1px 0px;
}
.wrap .flex_row_panel_x {
	/* 
		side margin compensates for board_col padding 
	*/
	margin:0px -1px;
}



.board_columnext .board_col {
	max-width: initial;
	width: initial;
}

.board_columnext .board_cover {
	
	display: none;
	
}




/*
.task_close_cntnr {
	position: absolute;
	top:6px;
	right:6px;
	background:	rgba(255,255,255, 1);
	border-radius: var(--main-border-radius);
	opacity:0;
}
.list_item:hover .task_close_cntnr {
	
	opacity:1;
}
*/

@media screen and (max-width: 614px) {
	.headline_menu_list_menu ,
	.placeholder_width.headline_menu_list_menu {
		min-width:100%;
	}


	.headline_menu_left {
		background:rgba(255,255,255,1);
	}
	.headline_menu_left_bg {
		display: block;
	}
	.hidden .headline_menu_left_bg {
		display: none;
	}
}



.headline_menu_ins,
.board_col_setup {
    overflow-y:scroll;
    overflow-x:hidden;
	/*
    max-height:calc(100% - 38px);
	*/
	overflow-y:auto;
	
	
	padding-bottom: 4px;
	/* this is required to see box-shadow of the last task */
}
.connection_status {
    right:0px;
}





.headline_menu_nmbr {
    width:32px;
    text-align:right;
}

.headline_menu_left {
    left:0px;
    transition-property:left;
}
.headline_menu_left_wrapper {
    min-height:100%;
}
.headline_menu_left.hidden {
    left:-300px;
    transition-property:left;
    overflow:hidden;
	display:block !important;
}
.headline_menu_right {
	right:0%;
    transition-property:right;
	max-width: 100%;
}
.headline_menu_right.hidden {
    transition-property:right;
    right:-100%;
    overflow:hidden;
	/*
	display:block !important;*/
}
.headline_menu_list_menu.hidden {
	right:-614px;
}
.headline_menu_connection_status ,
.headline_menu_debug {
	width:314px;

	box-sizing: border-box;
}
.headline_menu_connection_status2 {
	width:100%;
	/*
	max-width:314px;
	*/
}

.connection_status_1 {
    font-weight:500;
    color:#EC5C99;
}
.connection_status_2 {
    font-weight:500;
    color:#048ad9;
}

.connection_status_mark {
    line-height:0px;
}
.connection_status_mark.online {
    color:#66e7a6;
}
.connection_status_mark.offline {
    color:#EC5C99;
}
/*
.connection_status_mark_online ,
.connection_status_mark_offline {
	width:16px;
	height:16px;
	border-radius:50px;
	margin:2px;
	display:none;
	border:2px solid #00E06E;
}
.connection_status_mark_offline {
	border-color:#EC5C99;
}
.online .connection_status_mark_online {
	display:block;
}
.offline .connection_status_mark_offline {
	display:block;
}
*/




/*
.placeholder_width2 { 
    -moz-animation-name:placeholder_width2;
	-moz-animation-duration:0.15s;
	-webkit-animation-name:placeholder_width2;
	-webkit-animation-duration:0.15s;
	-ms-animation-name:placeholder_width2;
	-ms-animation-duration:0.15s;
	-o-animation-name:placeholder_width2;
	-o-animation-duration:0.15s;
	animation-name:placeholder_width2;
	animation-duration:0.15s;

}
@-moz-keyframes placeholder_width2{
	0%{
	}
	100%{
        min-width:0px;
		max-width:0px;
        width:0px;
	}
}
@-webkit-keyframes placeholder_width2{
	0%{
	}
	100%{
        min-width:0px;
		max-width:0px;
        width:0px;
	}
}
@-ms-keyframes placeholder_width2{
	0%{
	}
	100%{
        min-width:0px;
		max-width:0px;
        width:0px;
	}
}
@-o-keyframes placeholder_width2{
	0%{
	}
	100%{
        min-width:0px;
		max-width:0px;
        width:0px;
	}
}
@keyframes placeholder_width2{
	0%{
        
	}
	100%{
        min-width:0px;
		max-width:0px;
        width:0px;
	}
}
*/


.placeholder_width {
	-moz-animation-name:placeholder_width;
	-moz-animation-duration:0.15s;
	-webkit-animation-name:placeholder_width;
	-webkit-animation-duration:0.15s;
	-ms-animation-name:placeholder_width;
	-ms-animation-duration:0.15s;
	-o-animation-name:placeholder_width;
	-o-animation-duration:0.15s;
	animation-name:placeholder_width;
	animation-duration:0.15s;

	animation-duration:0s;
}
@-moz-keyframes placeholder_width{
	0%{
        min-width:0px;
		max-width:0px;
        width:0px;
	}
	100%{
	}
}
@-webkit-keyframes placeholder_width{
	0%{
        min-width:0px;
		max-width:0px;
        width:0px;
	}
	100%{
	}
}
@-ms-keyframes placeholder_width{
	0%{
        min-width:0px;
		max-width:0px;
        width:0px;
	}
	100%{
	}
}
@-o-keyframes placeholder_width{
	0%{
        min-width:0px;
		max-width:0px;
        width:0px;
	}
	100%{
	}
}
@keyframes placeholder_width{
	0%{
        min-width:0px;
		max-width:0px;
        width:0px;
	}
	100%{
	}
}


.headline_menu_left_placeholder div {
     
    transition-property:flex, width, max-width, min-width;
    transition-duration:1.15s;
	transition-timing-function:linear;
	transition-delay:0s;
}

.menu_show_btn {
	height:30px;
	margin:-3px -13px 0px auto;
	position:relative;
	text-align:right;
	cursor:default;
    padding:10px 14px 10px 14px;
}
.menu_show_btn_bg {
    width:6px;
	height:6px;
	display:inline-block;
	border:1px solid rgba(164,182,205,0.5);
	border-radius:20px;
	transition-property:color, border-color, background-color;
	transition-duration:0.10s;
	transition-timing-function:linear;
	transition-delay:0s;
}
.menu_show_btn:hover .menu_show_btn_bg {
	background-color:#048ad9;
	border-color:#048ad9;
}
.headline_btn:hover .headline_menu_left ,
.headline_btn:hover .headline_menu_right {
	display:block;
}



.title {
	margin-left:20%;
	color:#048ad9;
	font-size:16px;
	font-weight:500;
	text-align:right;
	
	color:#000;
	font-size:14px;
}
.text ,
.text_reply {
	margin-bottom:-0px; /*account for line-height*/
	text-align:justify;
	
	/*
	font-size: 1em;
	font-size:14px;
	line-height:20px;
	*/

	color:#000000;
	position:relative;
	
	/*
	this messes up drop-downs
    z-index:1;
	*/
	
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
	
	word-break:break-word;
	
	/* this is for min-height to work */
	display: block;
}
.text.history {
	color:var(--text-color-grey);
	font-size: 12px;

	/*
	this is ok, but doesn't work for timers
	*/
	width: min-content;
	
	/*
    line-height: 22px; /* this value can't be smaller because of board_compacted */
	
}
.timer_cntnr  .text.history {
	width: auto;
}

.text.approved {
    color:var(--text-color-grey);
}
.protected {
	color:var(--text-color-grey);
}
.link ,
.text a {
    color:#048ad9;
	font-weight:500;
}
.text a:hover {
    text-decoration:underline;
}
.text_crossed {
	text-decoration: line-through;
}

.msg_text a:nth-child(1) {
    display:block;
	font-weight:500;
	border-left:2px solid #048ad9;
	padding:2px 0px 2px 4px;
	margin-bottom:4px;
	margin-top:4px;
}
.msg_text a:nth-child(1):hover {
    border-color:#000;
	color:#000;
	text-decoration:none;
}




.list_text {
    min-height:20px;
	/*
	padding:4px 8px;
	padding: 0px 4px 4px;
	*/
}
.text_reply {
	/*
	margin-top:2px;
	margin-bottom:0px;
	overflow:visible;
	margin-left:38px;
	*/
	display:inline-block;
}
.text_reply_input {
	display:block;
	min-width:100%;
	outline-width:0px;
	cursor:pointer;
	margin:-6px 0px -7px 0px;
	padding:5px 0px 5px 0px;
	margin-left:-15px;
	margin-right:-15px;
	padding-left:14px;
	padding-right:14px;
	font-size:14px;
	line-height:20px;
	border:0px;
	background-color:#ffffff;
		/*background-color:#eef0f6;*/
		/*background-color:#fdfdfe;*/
	
	border-top:1px solid #eef0f6;
	border-bottom:1px solid #eef0f6;
		border:1px solid #ffffff;
	border-radius:0px;
		border-radius:2px;
	transition-property:box-shadow, border-color, color, background-color, margin, padding;
    transition-duration:0.10s;
    transition-timing-function:cubic-bezier(1,1,0.5,0.1);
    transition-delay:0s;
	color:#000000;
}
.text_reply_input:hover,
.text_reply_input:focus {
	/*padding:8px 16px 8px 16px;*/
	border:1px solid #c7d8e2;
	
}
.text_reply_input:focus {
	
	
	border:1px solid #048ad9;
	/*
	padding:8px 16px 8px 16px;
	margin:16px 0px 0px 0px;
	padding:8px 0px 7px 0px;
	margin-left:-14px;
	margin-right:-14px;
	padding-left:14px;
	padding-right:14px;
	*/
}

	
.votes ,
.btn_wrap {    
	display: flex;
	flex-direction:row;
	justify-content:flex-end;
	flex-wrap:wrap;
	margin-top:16px;
	border:0px solid #e9eff3;
	border-radius: var(--main-border-radius);	
	transition-property:border-color, color, background-color;
    transition-duration:.15s;
    transition-timing-function:cubic-bezier(1,1,0.5,0.1);
    transition-delay:0s;
}


.btn_wrap {
	margin:0px;
}


.voted {
	color:#000000;
}
.nice_img ,
.nice_imgvote_minus ,
.nice_imgvote_plus ,
.nice_imgvoted ,
.easy_img , 
.easy_imgvote_minus ,
.easy_imgvote_plus ,
.easy_imgvoted,
.stat_posts_img,
.vote_img {
	width:20px;
	height:20px;
	border:1px solid transparent;
	border-radius:100%;
	margin:0px;
    position:relative;
}
.vote {
	margin-left:16px;
	cursor:default;
}
.vote_plus {
	cursor:pointer;
}
.vote_plus:hover {
	color:#fa2a82;
}
.vote_text {
	margin-right:8px;
}
@media screen and (max-width: 400px) {
	.vote_text {
		display:none;
	}

}
.vote:hover .vote_text {
	display:block;
}

.vote_nmbr {
	padding-right:4px;
    
    position:relative;
	font-size:13px;
	line-height:12px;
	font-weight:500;
	display:flex;
	justify-content:center;
	align-items:center;
}
.vote_nmbr_2 {
    z-index:2;
}

.vote_nmbr_ins {
    display:block;
	position:absolute;
    top:-4px;
    left:-4px;
    z-index:1;
}


.stat_diagram{
    display:inline-block;
    margin:0px auto auto auto;
    position:relative;
}
.diagram_container {
    display:block;
    width:20px;
	height:20px;
    background:rgba(0,0,0,0.0);
	border:1px solid #eef0f6;
        border:1px solid transparent;
	border-radius:100%;
    transition-property:border-color, color, background-color;
    transition-duration:.10s;
    transition-timing-function:cubic-bezier(1,1,0.5,0.1);
    transition-delay:0s;
   
}

.diagram {
  width: 100%; 
  height: 100%;
  transform: rotate(-90deg);
  background: transparent;
  border-radius: 50%;
  overflow:visible;
}
.diagram_stroke {
  fill: rgba(0,0,0,0);
  stroke: #eef0f6;
  
  stroke-width:4;
  
  transition-property:fill, stroke, background-color;
    transition-duration:.10s;
    transition-timing-function:cubic-bezier(1,1,0.5,0.1);
    transition-delay:0s;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}
.inline {
    display:inline-block;
}
.stat {
	display:inline-block;
   
	display:flex;
	padding:2px;
    color: var(--text-color-grey);
	text-align:center;
    position:relative;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
	transition-property:border-color, color, background;
    transition-duration:0.1s;
    transition-timing-function:linear;
    transition-delay:0s;
	border:0px solid transparent;
	flex-grow: 1;
    flex-basis: 0;
	
}

.block {
    display:block;
}

.stats_wrap {
	background:rgba(223, 229, 233, 0);
}
.stat_nmbr {
	padding: 0px 4px 0px 4px;
    color: #048ad9;
    color: #000000;
    font-size: 13px;
	font-weight: 500;
}
.stat_name {
	font-size: 13px;
    max-height:20px;
	overflow:hidden;
	white-space:nowrap;
	color: var(--text-color-grey);
	
	/*
	font-weight: 500;
	*/
}

.stat:hover .diagram_stroke ,
.stat:hover .stat_name ,
.stat:hover .stat_nmbr {
    /*
	stroke:#048ad9;
    */
	color:#048ad9;
	
}




.reply  {
	border-spacing:0px;
	border-bottom:0px solid #e9eff3;
	position:relative;
	box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
	
	background:rgba(255,255,255,0.8);
	background:rgba(255,255,255,0);
	
	border-radius: var(--main-border-radius);
	
	padding:0px 0px 0px 0px;
}
.reply .text {
	/* padding: 6px 12px; */
	border-radius: 0px var(--main-border-radius) var(--main-border-radius) var(--main-border-radius);
	border-radius: var(--main-border-radius);
	/* background: var(--bg-color-grey); */
	/* border: 1px solid; */
	border-color: var(--border-color-grey);
	/* background: white; */
	/* min-height: 30px; */
	width: fit-content;
}
.reply_content {
	padding: 6px 12px;
    border-radius: 0px var(--main-border-radius) var(--main-border-radius) var(--main-border-radius);
	border-radius: var(--main-border-radius);
	
   	/*
   
	background: var(--bg-color-grey);
    */
	border: 1px solid;
	border-color: var(--border-color-grey);
	
	background: white;
	
	/*
	width: fit-content;
	*/
	/*
	width:600px;
	*/
	width: max-content;
	max-width: 100%;

	max-width: 100%;
    box-sizing: border-box;
}
.reply_content_width {
	/*
		32px for avatar
	*/
	max-width: calc(100% - 32px);
}

.reply_text_bg {
	position: absolute;
    left: 0px;
    top: -13px;
    width: 20px;
    height: 20px;
    background: #fff;

	border-left: 1px solid rgba(233, 236, 238, 1);
}
/*
.reply_add_div {
	margin:12px 8px 0px 0px;
}
.undivide{
	/*border-bottom:0px;
	margin-bottom:-10px;
}
*/

/*
.j_comments_cntnr_wrap .j_refresh_cntnr {

	display: flex;
	flex-direction: column-reverse;
}
*/


.comments_cntnr {
	margin: 0px -12px -12px -12px;
    padding: 0px 12px 0px 12px;
    
	/*
    border-top: 1px solid rgba(233, 236, 238, 1);
	*/
	/*
	background: rgba(243, 246, 248, 0.50);
    background: rgba(250, 252, 255, 1);
	background:  rgba(233, 236, 238, 1);
	background: rgba(250, 250, 250);
	*/
    border-radius: 0px 0px var(--main-border-radius) var(--main-border-radius) ;
	/*
	background: var(--bg-color-grey);
	*/
}
.comments_cntnr_ins {
	margin-right:-12px;
	padding-right:12px;
	padding-bottom: 12px;
}
/*
.bg_grey {
	background:  rgba(233, 236, 238, 1);
		background:var(--bg-color-grey);
}
*/
.comment_avtr_cntnr {
	position: absolute;
    top: -16px;
    right: 0px;
    left: 0px;
}

.f {
	width:100%;
}
.divide_horiz ,
.divide_horiz_2 ,
.divide_horiz_3 {
	border-bottom:1px solid #e9eff3;
	margin:16px -20px 16px -20px;
}
.divide_horiz_2 {
    margin-top:0px;
    margin-bottom:0px;
}
.divide_horiz_3 {
    margin:0px;
}
/*
.cntnr_f {
    border:1px solid #e9eff3;
    padding: 16px;
    background-color: #fff;
	    max-width: 600px;
    margin: auto;
}
*/
.copyright {
    font-size:10.5px;
    line-height:10.5px;
}
.profile_name {
	font-size:20px;
	color:#000000;
    line-height:normal;
    margin-top:-6px;
	margin-bottom:-2px;
    white-space:nowrap;
}
.about{
	display:block;
	margin:16px 0px 0px 0px;
	line-height:10px;
	padding:8px 8px 8px 8px;
	border:1px solid #eef0f6;
	transition-property:border-color, color, background-color;
    transition-duration:0.10s;
    transition-timing-function:cubic-bezier(1,1,0.5,0.1);
    transition-delay:0s;
	line-height:20px;
	text-align:center;
}
#ask {
	padding:16px;
	font-size:24px;
	font-weight:700;
	cursor:pointer;
	color:#000000;
	transition-property:color, border-color, box-shadow, background-color;
	transition-duration:0.10s;
	transition-timing-function:linear;
	transition-delay:0s;
}
#ask:hover {
	box-shadow:0 1px 5px rgba(7,25,40,0.25), 0 3px 6px rgba(7,25,40,0.25);
	color:#048ad9;
}

















.images_form {
	opacity:0.5;
}
.images_uploaded {
	/*
	max-height: 100px;
	*/

	overflow: hidden;
	
	background-color: var(--bg-color-grey);

	flex-wrap:nowrap;
}

.images_cntnr {
	display: flex;
	flex-wrap:wrap;
	align-items: flex-start;

	
	
	border-radius: var(--main-border-radius);
	
	
}



.reply .images_cntnr {
	display: none;
}
.reply .images_cntnr:not(:empty) {
	display: flex;
	/*
	min-width: min(100%, 300px);
    max-width: min(100%, 300px);
	*/
	min-width: min(100%, 600px);
    max-width: min(100%, 600px);
}



.images_uploaded .images_cntnr:not(:empty) {
	margin:4px;
}

.images_cntnr_padding .images_cntnr:not(:empty) {
	/*
		this should be the same value as post_image_wrap margin
		same value, opposite sign
	*/
	/*
	margin:-1px;
	*/
}



.media {
	margin:20px -25px -6px -25px;
	padding:0px 5px  0px 5px;
}
.post_image_link{
	display: block;
    /* width: 100%; */
    /* height: 100%; */
    overflow: hidden;
   
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}
.post_images{
    display:flex;
    flex-wrap:wrap;
    flex-direction:row;
    justify-content:space-between;
}
.post_image_wrap {
	margin:0px;
	padding:1px;
	border:0px;
	border-radius: var(--main-border-radius);
	overflow: hidden;
	cursor:pointer;
	position:relative;

	box-sizing: border-box;
}
.post_image {
	width:100%;
	height:100%;
	transition-property: box-shadow, border-radius;
    transition-duration:0.10s;
    transition-timing-function: cubic-bezier(1,1,0.5,0.1);
    transition-delay:0s;

	
}
.inside_video, .inside_image, .inside_add{
	position:absolute;
	display:block;
	width:100%;
	height:100%;
	background-size:50px;
	background-position:center;
	background-repeat:no-repeat;
	z-index:1;
	
	transition-property: box-shadow, border-radius;
    transition-duration:0.10s;
    transition-timing-function: cubic-bezier(1,1,0.5,0.1);
    transition-delay:0s;
}
.inside_add_video{
	background-image:url(../icon/video_play.png);
}
.inside_video{
	background-image:url(../icon/video_play.png);
	transition-property: box-shadow, background-image;
    transition-duration:0.10s;
    transition-timing-function: cubic-bezier(1,1,0.5,0.1);
    transition-delay:0s;
}
.inside_video:hover{
	background-image:url(../icon/video_play_hover.png);
}


.post_image_wrap:hover .inside_image {
	transition-property: box-shadow, border-radius;
    transition-duration:0.10s;
    transition-timing-function: cubic-bezier(1,1,0.5,0.1);
    transition-delay: 0s;
}

/*
.make_cover, .post_image_delete{
	display:none;
	z-index:2;
	width:20px;
	height:20px;
	position:absolute;
	top:5px;
	right:5px;
	background-color:#ffffff;
	background-image:url(../images/picture_grey.png);
	background-size:16px;
	background-repeat:no-repeat;
	background-position:center;
	border-radius:20px;
	
	opacity:0.8;
	transition-property:opacity;
    transition-duration:0.10s;
    transition-timing-function: cubic-bezier(1,1,0.5,0.1);
    transition-delay:0s;
	
	box-shadow:0 0px 1px rgba(7,25,40,0.03), 0 1px 1px rgba(7,25,40,0.03), 0 2px 3px rgba(7,25,40,0.02);
}
.post_image_delete{
	box-shadow:none;
}
.post_image_wrap:hover .make_cover {
	display:block;
}
.make_cover:hover{
	opacity:1;
	background-image:url(../images/picture.png);
	box-shadow:0 1px 5px rgba(7,25,40,0.25), 0 3px 6px rgba(7,25,40,0.25);
}
.post_image_delete:hover{
	opacity:1;
	background-image:url(../images/cross.png);
	box-shadow:0 0px 1px rgba(7,25,40,0.03), 0 1px 1px rgba(7,25,40,0.03), 0 2px 3px rgba(7,25,40,0.02);
}
.post_image_wrap:hover .post_image_delete {
	display:block;
}
*/

.post_image:hover{
	box-shadow:0 2px 4px rgba(7,25,40,0.30), 0 1px 5px rgba(7,25,40,0.30);
}
.post_image_wrap:hover .inside_image {
	transition-property: box-shadow, border-radius;
    transition-duration:0.15s;
    transition-timing-function: cubic-bezier(1,1,0.5,0.1);
    transition-delay: 0s;
}
.make_cover, .post_image_delete{
	display:none;
	z-index:2;
	width:18px;
	height:18px;
	position:absolute;
	top:5px;
	right:5px;
	background-color:#ffffff;
	background-image:url(../images/picture.png);
	background-size:11px;
	background-repeat:no-repeat;
	background-position:center;
	border-radius:20px;
	
	opacity:0.8;
	transition-property:opacity;
    transition-duration:0.15s;
    transition-timing-function: cubic-bezier(1,1,0.5,0.1);
    transition-delay:0s;
	
	box-shadow:0 1px 1px rgba(7,25,40,0.01), 0 0px 2px rgba(7,25,40,0.03),  0 1px 2px rgba(7,25,40,0.05);


	
    /* vertical-align: middle; */
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 34px;
    box-sizing: border-box;
    border-radius: var(--main-border-radius);
    background: var(--bg-color-grey);
    top: 2px;
    right: 2px;
}
.post_image_delete{
	box-shadow:none;
}
.post_image_wrap:hover .make_cover {
	display: block;
}
.make_cover:hover{
	opacity:0.8;
	box-shadow:0 1px 5px rgba(7,25,40,0.27), 0 3px 6px rgba(7,25,40,0.28);
}
.post_image_delete:hover{
	opacity:1;
	box-shadow:0 1px 1px rgba(7,25,40,0.01), 0 0px 2px rgba(7,25,40,0.03),  0 1px 2px rgba(7,25,40,0.05);
}
.post_image_wrap:hover .post_image_delete {
	display:flex;
}
.col_cntnr_listview .post_image_delete {
	display:none !important;
}



.input_highlight{
	-moz-animation-name:input_highlight;
	-moz-animation-duration:1s;
	-webkit-animation-name:input_highlight;
	-webkit-animation-duration:1s;
	-ms-animation-name:input_highlight;
	-ms-animation-duration:1s;
	-o-animation-name:input_highlight;
	-o-animation-duration:1s;
	animation-name:input_highlight;
	animation-duration:1s;
}
@-moz-keyframes input_highlight{
	0%{
		background-color:red;
	}
	100%{
	}
}
@-webkit-keyframes input_highlight{
	0%{
		background-color:red;
	}
	100%{
	}
}
@-ms-keyframes input_highlight{
	0%{
		background-color:red;
	}
	100%{
	}
}
@-o-keyframes input_highlight{
	0%{
		background-color:#eef0f6;
	}
	100%{
	}
}
@keyframes input_highlight{
	0%{
		background-color:#eef0f6;
	}
	100%{
	}
}



.login_social {
	/*
	max-width:200px;
	*/
	margin:auto;
	justify-content:space-around !important;

}
.login_cntnr ,
.register_cntnr ,
.reg_validate_1_cntnr ,
.reg_validate_2_cntnr {
	border-radius:inherit;

}
#fbLogin_link ,
#ggLogin_link ,
#vkLogin_link {
	width: 42px;
    height: 42px;
    background-size: 32px;
    background-position: center;
    background-repeat: no-repeat;
    /* background-color: rgba(233, 236, 238, 1); */
    border-radius: 100%;
     border: 1px solid transparent; 
    /* box-shadow: 0 0px 1px rgba(7,25,40,0.05), 0 1px 1px rgba(7,25,40,0.05), 0 2px 3px rgba(7,25,40,0.04); */
    transition-property: border, box-shadow, background-color;
    transition-duration: 0.1s;
    transition-timing-function: cubic-bezier(1,1,0.5,0.1);
    transition-delay: 0s;
}

#fbLogin_link{
	background-image:url(../icon/social/fb_real.png);
}
#fbLogin_link:hover ,
#ggLogin_link:hover ,
#vkLogin_link:hover {
	border-color: var(--border-color-grey);
	
}
#ggLogin_link {
	background-image:url(../icon/social/gg_real.png);
}

#vkLogin_link {
	background-image:url(../icon/social/vk_real.png);
}








.prof_row {
	padding:0px 0px 10px 0px;
	margin:0px 0px 10px 0px;
	border-bottom:1px solid #eef0f6;
}

.rows_panel {
	width:100%; 
	text-align:left;
    overflow:hidden;
	padding:0px 0px 0px 0px;
}
.rows_name {
	display:block;
    font-size:14px;
	font-weight:500;
	color:#048ad9;
    max-height:20px;
    overflow:hidden;
	white-space: nowrap;
	margin-top:-2px;
}
.rows_info {
	padding:8px 16px 8px 16px;
	margin-top:16px;
	line-height:20px;
	
	margin-bottom:0px;
	overflow:hidden;
	
	text-align:justify;
	border:1px solid #eef0f6;
}
.rows_info_text {
	max-height:38px;
	min-height:20px;
	overflow:hidden;
	box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    text-align:justify;
}
.cntnr_20:hover .rows_info_text {
	max-height:none;
}




.rows_stats {
	max-height:38px;
    overflow-y:scroll;
}




.row_stat {
	border:1px solid #eef0f6;
	padding:6px 10px 6px 10px;
	margin:8px 0px 8px 16px;
}






questtree {
	overflow-x:scroll;
    overflow-y:hidden;
	width:calc(100vw - 20px);
	margin-left: calc(-50vw + 50%);
        padding:12px;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
}   
level {
	min-width:614px;
    max-width:614px;
	margin:0px 16px 0px 16px;
}
.paths {
	margin: 20px 0px 0px 0px;
}
.start_quest{
    box-shadow:0 0px 1px rgba(4,138,217,1),0 1px 3px rgba(4,138,217,0.29), 0 1px 3px rgba(7,25,40,0.45);
	border-color:#048ad9;
}





.media_div {
   width:100%;
}
.media_protect {
   width:100%;
   height:100%;
   position:relative;
}
.media_back {
    position:absolute;
	top:0px;
    bottom:0px;  
    left:0px;  
    right:0px; 
	z-index:2;
}
.media_prev ,
.media_next {
    width:80px;
    height:100%;
	/*
    box-shadow:0 1px 5px rgba(7,25,40,0.25), 0 3px 6px rgba(7,25,40,0.25);
	*/
	/*
    cursor:pointer;
	
	display: flex;
    align-items: center;
    justify-content: center;
	*/
}
.media_prev a,
.media_next a {
	width:100%;
    height:100%;

	cursor:pointer;

	display: flex;
    align-items: center;
    justify-content: center;
}



.media_prev .icon,
.media_next .icon {
	width:34px;
	height:34px;
	color:#fff;

	background-color:rgba(255,255,255,0.1);

	display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;

	transition: 0.2s all;
}
.media_prev:hover .icon,
.media_next:hover .icon {
    background-color:rgba(255,255,255,0.3);
}

 
.media_ins img,
.media_el,
.video_el{
    position:absolute;
    top:0px;
    bottom:0px;  
    left:0px;  
    right:0px; 
    margin:auto;
	max-width:95%;
	max-height:95%;
	border-radius:2px;
	box-shadow:0 1px 5px rgba(7,25,40,0.25), 0 3px 6px rgba(7,25,40,0.25);
    box-shadow:0 2px 6px rgba(7,25,40,0.29), 0 3px 9px rgba(7,25,40,0.45);
   
    cursor:pointer;
    z-index:3;
}
.video_el{
	width:800px;
    height:480px;
}




.list_menu_show_btn,
.list_menu_show_btn_nolim {
    /*
	margin:auto;*/
    height:20px;
	min-width:20px
}
.list_menu_time {
    padding-left:6px;
    padding-right:6px;
}



.hidden_reveal ,
.hidden_reveal_hover {
	display: none;
}
.reveal .hidden_reveal ,
.reveal:hover  .hidden_reveal_hover {
	display:block;
}
/*
	this is required so drop down menu does not resize
	every time you hover over a btn
		check views menu in browser for this
*/
.drop_down_menu  .hidden_reveal_hover {
	display:block;
}


.transp_reveal_hover {
	opacity:0;
}
.reveal:hover .transp_reveal_hover {
	opacity:1;
}

.reveal .hidden_in_reveal  {
	display:none;
}



.col_resizer {
	width: 16px;
    height: calc(100% - 2px);
    position: absolute;
    top: 1px;
    right: 1px;
	background:transparent;
	cursor:col-resize;
	border-radius: var(--main-border-radius);

	
}
.board_cover_cntnr .col_resizer {
	display:none;
}
.cover_board_list_options .col_resizer_cntnr:hover  .col_resizer {
	display:flex;
	background:#048ad9;
}
.cover_board_list_options .col_resizer_cntnr {
	/*
		to negate mt1i effect, aplied on each view_field btn
	*/
	/*
	margin-bottom:0px !important;
	*/

	/*
		actually, leave it and make bottom margin -1px
		so cover_board_list_options is the same height as the rest of the divs
	*/
	margin-bottom:-1px !important;
}
.col_resizer_current {
	background:#048ad9;
}
.col_resizer_current::after {
	content:'';
    display:block;
	width:2px;
	height:100vh;
	background:inherit;
	margin-left: auto;
}



.flex_eq {
    flex-grow:1;
    flex-basis:0;
}
.flex_eq_content {
	flex-grow:1;
    flex-basis:content;
}
.flex_300px {
	
	flex-basis:300px;
	/*
	min-width:300px
	this breaks cards in board view
	*/
	
}

.flex_38px {
	flex-basis:38px;
}



.slider_cntnr {
	font-size:12px;
	font-weight:500;
	padding: 20px 0px 0px 0px;
}

.slider_cntnr.solo {
	padding-top: 0px ;
}
.slider {
    height:2px;
   
    position:relative;
    border-radius:10px;
	/*
    border:8px solid rgba(255,255,255,0);
	*/
	padding: 8px 0px;
    cursor:pointer;
    width:100%;

	
}
.slider_handle {
    position:absolute;
    top:-14px;
    left:0px;
    padding:0px;
    border-radius:50px;
    border:0px;
    border:8px solid transparent;
    cursor:pointer;
    margin-left:calc(-8px - 7px);
    margin-right:calc(-8px - 7px);
	display: flex;
    justify-content: center;
}
.slider_ball {
    width:14px;
    height:14px;
    border-radius:50px;
    
	background:rgba(4, 140, 217, 1) ;
}

.slider_active::after{
    
}
.slider:hover::after ,
.slider:active::after {
    background:var(--text-color-grey);
    transition-property:border, margin;
    transition-duration:0.05s;
    transition-timing-function:cubic-bezier(1,1,0.5,0.1);
    transition-delay:0s;
}
.slider_fill_cntnr {
	background:var(--bg-color-grey-hover);
	padding:0px 4px;
	/* this  compensates width of slider_handle */
	/*
	margin-left: 7px;
    margin-right: -7px;
	*/
	
}
.slider_fill{
    height:2px;
    width:100%;
    background:var(--text-color-grey);
	
	background:rgba(4, 140, 217, 1);

	position: relative;
    z-index: 1;
}
.slider_boundary {
	background:var(--bg-color-grey);
	border-radius: var(--main-border-radius);
	padding:4px 8px;
	min-width:28px;
	text-align:center;
	box-sizing: border-box;

	transition-property:all;
    transition-duration:0.1s;
    transition-timing-function:cubic-bezier(1,1,0.5,0.1);
    transition-delay:0s;
}
.slider_boundary.active {
	background:#fff;
	color: rgba(4, 140, 217, 1);
}
.slider_boundary.plchdr {
	background:none;
	min-width:8px;
}

.sliders_input{
    width:32px;
    margin-left:16px;
    margin-top:-10px;
}
.sliders_input .input {
    max-width:100%;
    text-align:center;
}

.slider_value {
	position: absolute;
    top: -28px;
    color: rgba(4, 140, 217, 1);
    background: #fff;
    padding: 4px 8px;
    min-width: 28px;
    text-align: center;
    box-sizing: border-box;
    border-radius: var(--main-border-radius);
	
}


.slider_step_cntnr {
	position: absolute;
	display: flex;
	justify-content: space-between;
	left:-4px;
    right:-4px;
	top:-3px;
	/*
	z-index: -1;
	*/
}
.slider_step {
	width:8px;
	height:8px;
	background:var(--bg-color-grey-hover);
	/*
	background:red;
	*/
	border-radius: var(--main-border-radius);
}
/*
.slider_cntnr_solo .slider_handle {
	display: none;
}
.slider_cntnr_solo .slider_handle ~ .slider_handle {
	display: block;
}
*/



.items {
    margin-left:20px;
}



m-red {
    color:#EC5C99;
}


.j_list_menu_show_btn {
    cursor:pointer;
}


















.switcher_front {
	    width: 14px;
    height: 14px;
    background: red;
    border-radius: 50px;
    position: absolute;
    top: 2px;
    left: 2px;
    background-color: #ffffff;
    cursor: pointer;
    transition-property: all;
    transition-duration: 0.10s;
    transition-timing-function: linear;
    transition-delay: 0s;
	
}
.switcher_back {
	width: 32px;
    height: 18px;
    border-radius: 50px;
    background: var(--bg-color-grey-hover);
    cursor: pointer;
	transition-property: all;
    transition-duration: 0.10s;
    transition-timing-function: linear;
    transition-delay: 0s;
}
.switcher:hover .switcher_back {
	background: rgba(48, 71, 100, 0.550);
}

.enabled .switcher_front {
	    left: auto;
    left: 16px;
    background-color: #048ad9;
    /* box-shadow: 0 1px 3px rgba(7,25,40,0.25), 0 2px 4px rgba(7,25,40,0.25);*/
}
.enabled .switcher_back {
	background-color:#048ad9;
	opacity:0.3;
}
.enabled.switcher:hover  .switcher_back {
	background-color:#048ad9;
	opacity:0.6;
}
.disabled .switcher_front {
	opacity:0.2;
}
.disabled .switcher_back {
	opacity:0.2;
}
.disabled {
	
	color:rgba(60,79,103,.35) !important;
	
	cursor:default !important;
	background: initial !important;
}
.disabled .btn4:hover {
	color:inherit !important;
}

.disabled.selected {
	color:#048ad9 !important;
}

.scrolling {
    position:fixed;
    padding-top:1px;
    top:0px;
    left:0px;
    bottom:0px;
    width:50px;
    background:rgba(255,255,255,0.7);
    color:#000000;
}
.scrolling_hidden {
    display:none;
}
.scroll_to {
    border-top:1px solid #e9eff3;
    border-bottom:1px solid #e9eff3;
    margin-top:-1px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    justify-content: center;
    align-items: center;
    display: flex;
    cursor:pointer;
    transition-property:width;
    transition-duration:0.15s;
	transition-timing-function:linear;
	transition-delay:0s;
}
.scroll_to:hover {
    background:#eef0f6;
}



.scroll_pos {
    position:absolute;
    top:0px;
    width:5px;
    height:30px;
    background:#048ad9;
}

.unread .text {
    font-weight:700;
}

.alias {
    font-size: 13px;
}





.counter_messages_wrap {
	    position: absolute;
    top: 36px;
    min-width: 24px;
    text-align: center;
}
.counter_messages ,
.counter_selected {
	padding: 4px 6px 5px 6px;
	line-height:1;
    bottom: 0px;
    border-radius: 60px;
    color: #048ad9;
    font-size: 13px;
    background: #fff;
	font-weight:500;
	
	
	border: 1px solid rgba(223, 229, 233, 1);
		border:0px;
		box-shadow: 0 2px 0px rgba(0,0,0,0.04), 0 1px 0px rgba(0,0,0,0.10);
}
.counter_activity ,
.counter_history {
	padding: 4px 6px 5px 6px;
	line-height:1;
    border-radius: 60px;
    color: #048ad9;
    font-size: 13px;
    background: #fff;
	font-weight:500;
}
.muted_notifications {
    position:absolute;
    height:20px;
    top:8px;
    left:8px;
    background:rgba(255,255,255,0);
}


.counter {
	background-color: #048ad9;
    /* padding: 4px; */
    position: absolute;
    border-radius: var(--main-border-radius);
    height: 16px;
    min-width: 16px;
    right: -8px;
    /* z-index: 1; */
    color: white;
    font-weight: 500;
    font-size: 10px;
    top: -2px;
    /* display: flex; */
    /* vertical-align: middle; */
    display: flex;
    justify-content: center;
	align-items: center;
	padding: 4px;
    box-sizing: border-box;
}
.counter_send_mltpl {
	top: auto;
    right: 0px;
    bottom: -4px;
}

.j_msgs {
    margin:0px !important;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    
	position:fixed;
    top:38px;
    bottom:0px;
    /* left: 10px; */
    max-width:614px;
    min-width:314px;
    width:100%;
}
.msgs_cntnr {
	padding:6px 4px 0px 4px;
	margin:0px -18px 0px -4px;
    flex: 1 1 auto;
    overflow-y: scroll;
     box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    min-height:0px;
}

.msgs_cntnr_inside {
	min-height:calc(100vh - 38px - 58px);
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
	margin-bottom:6px;
}


.chat {
    display:block;
    padding:8px 0px 8px 14px;
    transition-property:box-shadow, background-color;
    transition-duration:0.1s;
    transition-timing-function:linear;
	position:relative;
}
.chat:hover {
    background-color:rgba(223, 229, 233, 1);
	background-color:rgba(242, 245, 248, 1);
}
.chat_link {
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	z-index:2;
}
.chat_name {
    color:#000000;
    font-weight:500;
    min-height:16px;
    white-space:nowrap;
	font-size:13px;
	margin-top:-2px;
}
.chat_text {
	font-size:13px;
	max-height:20px;
	overflow:hidden;
	color:var(--text-color-grey);
	text-align:left;
}
.chat_text {
	white-space: nowrap;
}
.chat_text a {
	color:inherit;
	font-weight:400;
}
.chat_text .text {
	color:inherit;
	font-weight:400;
}
.chat_you {
    display:none;
	color:#048ad9;
	font-weight:500;
}
.chat_status {
    color:#048ad9;
	margin-top:-1px;
	padding-left:2px;
	margin-right:8px;
}
.chat_current {
    background-color:#048ad9;
}
.chat_current:hover {
    background-color:#048ad9;
}
.chat_current ,
.chat_current .chat_name ,
.chat_current .chat_text ,
.chat_current .chat_you ,
.chat_current .chat_status {
    color:#fff;
}


.chip_ins ,
.chip_side {
    
    margin: 0px 0px 0px 0px;
    max-width: calc(100% - 4px);
		margin: 0px;
		max-width: 100%;
	
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    cursor: default;
    color: #000000;
	border-radius: var(--main-border-radius);
    border: 0px solid rgba(4,140,217,1.0);
	/*
    box-shadow: 0 0px 1px rgba(7,25,40,0.05), 0 1px 1px rgba(7,25,40,0.05), 0 2px 3px rgba(7,25,40,0.04);
	*/
    
    /* font-weight: 500; */
    font-size: 13px;
	line-height:12px;
}



.chip , 
.chip_task {
    padding: 7px;
    border: 1px solid rgba(233, 236, 238, 0);
    
    
	background: var(--bg-color-grey);

	cursor:pointer;
	border-radius: var(--main-border-radius);
	
}
.chip {
	border-top-left-radius:17px;
	border-bottom-left-radius:17px;
}
.chip_cntnr_file .chip {
	border-top-left-radius:var(--main-border-radius);
	border-bottom-left-radius:var(--main-border-radius);

	overflow: hidden;
}



.wsp {
	border-radius:6px;
}
.chip_ins {
	cursor:pointer;

	/*
		this compesates for chip_text padding
	*/
	/*
	margin:-3px;
	*/
}

.chip_task {
    padding: 7px 10px;
}
.chip_cntnr ,
.chip_cntnr_file {
	/*
		should be margin for board setup
	*/
	margin:4px;
	position:relative;
}


.j_chip_item.list_selected  .chip_task {
	background: rgba(4, 138, 217, 0.15) !important;
}


/*
.j_chips_item_accepted_adj .chip_cntnr .chip , 
.j_filter_menu_accepted .chip_cntnr .chip  {
	background: none;
}
*/
.j_chips_item_accepted_adj .chip_cntnr {
	padding: 0px;
}
.j_filter_menu_accepted > .chip_cntnr {
	padding: 4px;
}

.j_filter_menu_accepted > .chip_cntnr {
	/*
	border: 1px solid;
	border-color: var(--border-color-grey);
	*/
	background: var(--bg-color-grey);
    border-radius: var(--main-border-radius);
	
	/*
	margin-top: 8px ;
	margin-bottom: 8px ;
	*/
}

.chip_side ,
.chip_actions {
	display:none;
	border-radius: var(--main-border-radius) 16px 16px 6px;
    background: none;
	
    box-shadow: none;
	/*
	border: 1px solid rgba(223, 229, 233, 1);
	*/
}



.chips_accepted .chip_side ,
.chips_accepted .chip_actions {
	display:block;
}
/*
.chip_cancel {
    margin:0px 0px 0px -2px;
}*/
.chip_text {
    max-width:100%;
    
	
	/*	so overflow hidden in chip_ins won't hide edges or the letters */
	padding:3px; 
    margin:0px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;

	min-height:12px; /* this for items with empty name */
	/*
	font-weight: 500;
	*/
	color: #000000;
}
.chip_task.chip_text {
	/* 
		11px to match text in task text 
		so there's no visual difference
		between hierarchy and compacted views
	*/
	padding:6px 11px; 
}
.chip_btn {
    cursor:pointer;
}
/*
.board_list .list_item .chip_text {
	display: none;
}
.board_list .list_item .chip_initials {
	display: block !important;
}
*/







.chip_parameters_menu ,
.chip_stages ,
.chip_stages_mltpl ,
.chip_defines_perms ,
.chip_hidden_page ,
.chip_cancel ,
.chip_add { 
	display:none;
}


.chip_parameters_menu_show .chip_parameters_menu {
	display:block;
}


.chip_stages_show .chip_stages {
	display:flex;
}
.chip_stages_mltpl_show .chip_stages_mltpl {
	display:flex;
}

.chip_defines_perms_show .chip_defines_perms ,
.chip_hidden_page_show .chip_hidden_page ,

.chip_add_show .chip_add {
	display:block;
}



.chip_cancel {
	display:none;
}

.chip_cancel_right .chip_cancel.right ,
.chip_cancel_left .chip_cancel.left {
	display:block;
}


.chips_disabled .chip_ins {
	background:#ffffff;
}

.chip_cancel_hide .chip_cancel ,
.chip_cancel_hide .chip_cancel.right ,
.chip_cancel_hide .chip_cancel.left ,
.chip_parameters_menu_hide .chip_parameters_menu {
	/*--- this hides menus for chips inside chips */
	display:none;
}








.msg ,
.msg_header {
    padding:0px 0px 0px 0px;
    margin-left:0px;
    margin-right:0px;
	margin-top:8px;
    transition-property:padding;
    transition-duration:0.2s;
    transition-timing-function:linear;
    transition-delay:0s;
}
.msg_header {
	padding:20px 0px 4px 38px;
}
.msg_combined {
	margin-top:2px;
}
.msg_combined .msg_name {
	display:none;
}


.msg_partner_text , 
.msg_your_text {
	display:none;
    
	
	padding:6px 10px 6px 10px;
	box-shadow:0 0px 1px rgba(7,25,40,0.03), 0 1px 1px rgba(7,25,40,0.03), 0 2px 3px rgba(7,25,40,0.02);
	
}
.msg_your_text {
	background-color:rgba(231, 242, 247, 0.95);
	margin-left:6px;
	
	/*
	border-radius: var(--main-border-radius) 16px 6px 16px;
	*/
	border-radius:8px;
}


.msg_partner_text {
	background-color:rgba(233, 236, 238, 1);
	margin-right:6px;
	
	/*
	border-radius: var(--main-border-radius) 16px 16px 6px;
	*/
	border-radius:8px;
}



.msg_your {
    display:flex;
	flex-direction:row;
    justify-content:flex-end;
}
.msg_partner {
    display:flex;
	flex-direction:row;
}
.msg_your .msg_your_text {
    display:block;
}
.msg_partner .msg_partner_text {
    display:block;
}



.msg_partner .msg_status {
    text-align:left;
}
.msg_your .msg_status {
    text-align:right;
}

.msg_status_1_icon ,
.msg_status_2_icon ,
.msg_status_3_icon ,
.msg_status_4_icon ,
.msg_status_sending_icon ,
.msg_status_error_icon {
    display:none !important;
}
.msg_your.msg_status_1 .msg_status_1_icon ,
.msg_your.msg_status_2 .msg_status_2_icon ,
.msg_your.msg_status_3 .msg_status_3_icon ,
.msg_your.msg_status_4 .msg_status_4_icon ,
.chat_your.msg_status_1 .msg_status_1_icon ,
.chat_your.msg_status_2 .msg_status_2_icon ,
.chat_your.msg_status_3 .msg_status_3_icon ,
.chat_your.msg_status_3 .msg_status_1_icon ,
.msg_status_1 .msg_status_4_icon ,
.msg_your.msg_status_sending .msg_status_sending_icon , 
.msg_your.msg_status_error .msg_status_error_icon {
    display:inline-block !important;
}
.chat_your .chat_you {
	display:inline !important;
}
.chat_your .msg_status_4_icon {
	display:none !important;
}
.chat_your .chat_partner_name {
	display:none !important;
}






.msg_status {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}
.msg:hover {
    background-color:rgba(255,255,255,0.0);
}
.msg_name {
    font-size:13px;
    line-height:15px;
    color:#048ad9;
    font-weight:500;
}
.msgs_new_header {
    padding:4px 10px 4px 10px;
    margin:8px auto 8px auto;
    text-align:center;
    color:#ffffff;
    font-size:13px;
    font-weight:500;
    background:rgba(0, 0, 0, 0.4);
	border-radius: var(--main-border-radius);
	display:inline-block;
}
.msg_status_icon {
	margin-top:-1px;
	margin-bottom:-4px;
}
.msg_status_icon  {
	text-shadow: 0px 0px 1px rgba(0,0,0,0.6);
}
.time {
	    background: rgba(0,0,0,0.20);
    color: #fff;
    padding: 4px 6px 4px 6px;
    border-radius: 38px;
    border-radius: var(--main-border-radius);
    text-shadow: 0px 0px 1px rgba(0,0,0,0.6);
    font-weight: 500;
    font-size: 11px;
    line-height: 11px;
}







.unseen ,
.unseen2 {
    width:8px;
    height:8px;
    background-color:#ffffff;
    border-radius:100%;
    box-shadow:0 1px 3px rgba(7,25,40,0.15), 0 2px 4px rgba(7,25,40,0.05);
}
.unseen2 {
    top:14px;
}
.msgs_bottom_wrap {
    z-index:3;
    background:rgba(255,255,255,1);
	background: rgba(255,255,255,.95);
    padding:12px 16px 11px 16px;
    margin:0px 0px 0px 0px;
    /*
	box-shadow:0 0px 1px rgba(7,25,40,0.03), 0 1px 1px rgba(7,25,40,0.03), 0 2px 3px rgba(7,25,40,0.02);
	*/
	border-radius:0px;
	
	padding:14px 16px 13px 16px;
	border-top: 1px solid rgba(223, 229, 233, 1.0);
}
.msgs_top_wrap {
    background:rgba(0,0,0,0.2);
    padding:6px 10px 6px 10px;
    margin:-24px auto 0px auto;
    box-shadow:0 2px 3px rgba(7,25,40,0.03), 0 3px 10px rgba(7,25,40,0.05);
    z-index:2;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
	border-radius: var(--main-border-radius);
	color:#fff;
	transition-property:background;
    transition-duration:0.2s;
    transition-timing-function:linear;
    transition-delay:0s;
}
.msgs_top_wrap:hover {
	background:rgba(0,0,0,0.6);
}
.btnnn .btnnn2 {
    display:none;
}
.btnnn:hover .btnnn1 {
    display:none;
}
.btnnn:hover .btnnn2 ,
.btnnn2:hover { 
    display:block;
}

.btn.dark {
	color:#fff;
	border-radius: var(--main-border-radius);
    overflow: hidden;
}







.acrylic ,
.acrylic_c  {
    position:absolute;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    overflow:hidden;
    z-index:-2;
	
	border-radius:inherit;
	transition-property:background;
    transition-duration:0.2s;
    transition-timing-function:linear;
    transition-delay:0s;
}
.white {
	background:#fff;
}
body , 
.acrylic::before ,
.acrylic_c::before {
	/*
	background-image:url(/icon/bg.jpg);
	*/
	background-position:center top;
	background-attachment:fixed;
	-webkit-background-size:auto;
	-moz-background-size:auto;
	-o-background-size:auto;
	background-size:auto;
	
	
	/* this fixes background image positioning inside the overflow-y:scroll div's */
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	-ms-transform: translateY(0%);
	transform: translateY(0%);
}


/*
.acrylic::before ,
.acrylic_c::before {
    content: "";
	position: absolute;
	left: -30px;
	top: -30px;
	right: -30px;
	bottom: -30px;
	z-index: -1;
    background-blend-mode:exclusion ;
	filter: url(#blur);
	filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='16');
    filter: blur(16px);
	-webkit-filter: blur(16px);
}
*/
.acrylic::after ,
.acrylic_c::after  {
	/*
    background-image: url(http://api.thumbr.it/whitenoise-361x370.png?background=ffffff00&noise=a0a0a0&density=35&opacity=2);
    */
    content: "";
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: -1;    
    background-color:rgba(255, 255, 255,0.96);
}
.medium.acrylic::after ,
.medium.acrylic_c::after {
    background-color:rgba(255, 255, 255,0.86);
}



.light.acrylic::after ,
.light.acrylic_c::after {
     background: rgba(255, 255, 255,0.16);
}

.cover.acrylic::after ,
.cover.acrylic_c::after {
     background: rgba(255, 255, 255, 0.36);
}
.cover_menu.acrylic::after ,
.cover_menu.acrylic_c::after {
     background: rgba(255, 255, 255, 0.95);
}
.profile.acrylic::after ,
.profile.acrylic_c::after {
	background: rgba(247, 248, 249, 1);
	background: rgba(224, 228, 231, 1);
	background: var(--bg-color-grey);
}
/* otherwise headline_menu_right will be transparent! */
/*
.headline_menu_right .cover.acrylic::after ,
.headline_menu_right .cover.acrylic_c::after {
     background: rgba(239, 241, 242, 0.96);
}
*/

.dark.acrylic::after ,
.dark.acrylic_c::after {
    background-color:rgba(0, 0, 0,0.46);
	background-color:rgba(62, 73, 91,1);
}
.half_white.acrylic::after ,
.half_white.acrylic_c::after  {
	background:rgba(255, 255, 255,0.75);
}
.white .acrylic::after ,
.white .acrylic_c::after ,
.minimized .acrylic::after ,
.minimized .acrylic_c::after {
    display:none;
	background:rgba(255, 255, 255,1);
}
.cover.acrylic::before ,
.cover.acrylic_c::before ,
.white.acrylic::before ,
.white.acrylic_c::before ,
.minimized.acrylic::before ,
.minimized.acrylic_c::before {
   display:none;
}


.list_item_selector {
    display:none;
    position:absolute;
    top:0px;
    bottom:0px;
    right:0px;
    width:6px;
    background:rgba(4, 138, 217, 0.8);
}

.list_item.closed .list_text {
   color: rgba(60,79,103,.45);
}

.list_item_active .list_item_selector{
    display:block;
}






.list_view_only {
	display:none;
}

.board_columnext .list_view_only ,
.list_view .list_view_only {
	display:block;
}

.list_view_hide {
	display:block;
}
.board_columnext .list_view_hide {
	display:none;
}


.stage_hidden {
    display:none;
}
.btn:hover .stage_hidden ,
.btn4:hover .stage_hidden ,
.btn5:hover .stage_hidden
{
    display:flex;
}




.list_menu ,
.list_item_menu {
    position:absolute;
    top:6px;
    left:-32px;
    padding:0px;
    border-radius:50px;
    z-index:2;
    opacity:0;
}
.list_menu {
    left:-27px;
}
.list_item:hover .list_item_menu ,
.list_menu_showing:hover .list_menu {
    opacity:1;
}








.main_text_input_wrap {
    position: fixed;
    top: 0px;
    bottom: 0px;
    /* left: 10px; */
    max-width: 600px;
    min-width: 300px;
    width: 100%;
    background-color:white;
    z-index:101;
    padding:20px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
.main_text_input {
    max-height:100%;
    min-height:100%;
    overflow-y:scroll;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    outline-width:0;
	min-width:auto;
}
.main_text_btns {
    min-height:36px;
    min-width:36px;
    display:flex;
    justify-content:center;
}

.main_text_btn {
    width:36px;
    height:36px;
    cursor:pointer;
}
.flex_row .main_text_btns {
    flex-direction:column;
}

.timeline_text_col {
	max-width:300px;
	min-width:300px;
	height:100%;
}
.days_wrap {
    margin-bottom:-5px;
    box-sizing:border-box;
	padding-right:1px;
	padding:0px 16px 0px 16px;
	/*
	min-width:300px;
	*/
}

.timeline_move_to_left {
	margin-left:-300px;
	max-width:284px;
	width:284px;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
}

.calendar_list_item_selector {
	position:absolute;
	top:0px;
	bottom:0px;
	right:-16px;
	left:-500px;
	z-index:-1;
}
.calendar_list_item:hover .calendar_list_item_selector {
	background:rgba(255,255,255,0.8);
	background:var(--bg-color-grey);
}


.calendar_list_item {
	padding:8px 0px 8px 0px;
}
.calendar_list_item_main {
	margin-top:16px;
	margin-bottom:16px;
}
.calendar_item {
    min-height:10px;
	z-index:2;
}
.calendar_item1 {
	padding:12px;
	margin:-12px;
	overflow:hidden;
}
.timeline_move_to_left.text {
	margin-bottom:-32px;
}
.calendar_item_limits {
    width:100%;
    background:white;
    height:20px;
    background:rgba(4, 140, 217, 0.2);
	background:rgba(255,255,255,1);
	border-radius: var(--main-border-radius);
	
	box-shadow:0 0px 1px rgba(7,25,40,0.03), 0 1px 1px rgba(7,25,40,0.03), 0 2px 3px rgba(7,25,40,0.02);
}
.calendar_item_limits.approved {
	background:rgba(233,239,243,1);
}
.calendar_item_limits.overdue {
    box-shadow:0 0px 1px rgba(236, 92, 153,0.23), 0 1px 1px rgba(236, 92, 153,0.23), 0 2px 3px rgba(236, 92, 153,0.02);
}
.calendar_item_limits.overdue2 {
	box-shadow:none;
	background:rgba(236, 92, 153,0.13);
}


.calendar_history_item {
    min-width:8px;
    background:#048ad9;
    border-radius:30px;
    margin-top:4px;
    position:absolute;
   
	height:8px;
	/*
	background:linear-gradient(0deg, rgba(4, 140, 217, 0) 0%,rgba(4, 140, 217, 0.4) 50%,rgba(4, 140, 217, 0) 100%);
	
	background:radial-gradient(ellipse at center, rgba(4, 140, 217, 1) 0%, rgba(4, 140, 217,0.4) 10%,rgba(4, 140, 217,0) 80%,rgba(125,185,232,0) 100%); 
	*/
	
	border:2px solid white;
	z-index:2;
	box-shadow: 0 0px 1px rgba(7,25,40,0.05), 0 1px 1px rgba(7,25,40,0.05), 0 2px 3px rgba(7,25,40,0.04);
}
.history_item {
	background:white;
	box-sizing:border-box;
	border-radius: var(--main-border-radius);
	padding:8px 12px 8px 12px;
	margin-top:-20px;
	box-shadow: 0 0px 1px rgba(7,25,40,0.05), 0 1px 1px rgba(7,25,40,0.05), 0 2px 3px rgba(7,25,40,0.04);
}
.timeline_history .calendar_history_item {
	margin-top:4px;
}



.overdue_div ,
.overdue_div_2 ,
.overdue_div_3 ,
.overdue_div_4 {
    width:16px;
	height:16px;
    background:#048ad9;
    
    margin-top:0px;
    position:absolute;
	background:rgba(244, 129, 177, 0.8);
	border-radius:30px;
	border:2px solid #fff;
}
.overdue_div_2 ,
.overdue_div_3 ,
.overdue_div_4 {
	background: inherit;
    right: -10px;
    border: 0px solid #fff;
	padding: 2px;
	z-index:2;
	color:rgba(203,209,213,1);
	text-align:center;
	display:flex;
	justify-content:center;
	align-items:center;
	box-shadow: 0 0px 1px rgba(7,25,40,0.05), 0 1px 1px rgba(7,25,40,0.05), 0 2px 3px rgba(7,25,40,0.04);
}
.overdue_div_3 {
	background:rgba(255, 255, 255, 1);
}
.overdue_div_4 {
	background:rgba(255, 255, 255, 1);
	right:auto;
	left:-10px;
}

.calendar_item_limits .calendar_history_item ,
.calendar_item_limits .overdue_div ,
.calendar_item_limits .overdue_div_2 ,
.calendar_item_limits .overdue_div_3 ,
.calendar_item_limits .overdue_div_4 {
    top:auto;
}
.overdue ,
.overdue2 {
    color:#EC5C99;
}






.timeline_history {
    
    border-radius:0px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
	
	padding-top:0px;
	border-radius: var(--main-border-radius);
	/*
	background:rgba(255,255,255,1);
		box-shadow:0 1px 2px rgba(7,25,40,0.05), 0 1px 1px rgba(7,25,40,0.05);
		box-shadow:0 0px 1px rgba(7,25,40,0.03), 0 1px 1px rgba(7,25,40,0.03), 0 2px 3px rgba(7,25,40,0.02);
	
	*/
	
}
.timeline_history_s_wrap {
    height:4px;
    overflow:hidden;
    position:relative;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    display:none;
}
.timeline_history_s {
    background:rgba(255,255,255,1);
	background:rgba(4, 140, 217, 0.2);
    width:10px;
    height:10px;
    transform:rotate(45deg);
    position:absolute;
    top:1px;
}
/*
.day_divider {
    width:1;
    background:rgba(255,255,255,0.8);
    position:absolute;
    top:0px;
    bottom:0px;
    z-index:-1;
}*/
.weeks {
	border-left:1px solid rgba(223, 229, 233, 1);
}



.day_bg_2 ,
.day_bg_3 ,
.day_bg_cur {
    width:1px;
    top:0px;
    bottom:0px;
    background:rgba(223, 229, 233, 1);
    position:absolute;
}
.day_bg_3 { 
    width:1px;
    right:0px;
}
.day_bg_cur { 
	width:1px;
	background:rgba(4, 140, 217, 0.4);
}

.hour {
    width:20px;
    min-width:20px; 
    border-left:1px solid rgba(255,255,255,0.6);
    text-align:center;
    border-bottom:1px solid rgba(255,255,255,0.6);
	
	border-left:1px solid rgba(223, 229, 233, 1);
	border-bottom:1px solid rgba(223, 229, 233, 1);
	
	border-left:0px;
	border-bottom:0px;
}
.timeline_day {
    /*width:20px;
    min-width:20px;*/
    cursor:pointer;
    overflow:hidden;
    border-left:1px solid rgba(255,255,255,0.6);
    font-size:13px;
	border-left:1px solid rgba(223, 229, 233, 1);
	border-left:0px;
}


.days_expanded .day {
    width:auto;
    min-width:auto;
}
.days_expanded .day_name ,
.days_expanded .day_name3 {
    display:none;
}
.days_expanded .hour {
    display:none;
}
.day_name {
    min-width:20px;
}
.day_name3 {
	min-width:38px;
	padding-left:4px;
	padding-right:4px;
	white-space:nowrap;
}
.day_name ,
.day_name3 {
    border-bottom:1px solid rgba(223, 229, 233, 1);
	border-bottom:1px solid rgba(223, 229, 233, 1);
}

.today {
    background:rgba(255,255,255,0.6);
    color:#048ad9;
    font-weight:500;
}


.timeline_overflow {
	overflow-x:scroll;
	overflow-y:hidden;
	margin-left:-12px;
	margin-right:-12px;
	padding-left:12px;
	padding-right:12px;
    padding-bottom:10px;
	margin-bottom:8px;
	
	padding-left:0px;
	padding-right:0px;
}
.days_plchldr {
    margin-top:38px;
}

.avatar_initials {
    background-color:blue;
    text-align:center;
    color:#ffffff;
    /*
	font-weight:500;
	*/
	white-space: nowrap;
    overflow: hidden;
}
.avatar_initials::before {
    content: attr(data-initials);
    box-sizing: border-box;
}



.list_select_item {
	display:none;
}
.selected.list_select_item {
	display:flex;
}






.emoji_1 {
    background-image:url(/icon/emoji/emoji_1.png);
}
.emoji {
    display:inline-block;
    height:20px;
    width:20px;
    background-repeat:no-repeat;
    background-size:538px;
    text-indent: -9999px; 
	line-height:inherit;
	margin-bottom:-5px;
	
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none;
}
.emoji_btn {
	cursor:pointer;
	padding:4px;
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none;
}

/*
.down ,
.up ,
.to_end {
	display:none;
}
.list_item_combined.list_item_secondary .down ,
.list_item_combined.list_item_secondary .up ,
.list_item_combined.list_item_secondary .to_end {
    display:flex;
}
*/

.delete_element ,
.cntnr_error {
	position: absolute;
    width: 100%;
    height: 100%;
    background: #fff;
    top: 0px;
    left: 0px;
    border-radius: inherit;
	z-index: 2;
}



.list_item_combined .cntnr_0 {
	margin-top:2px !important;
}





.list_main {
    word-wrap: break-word;
    line-height: 16px;
    margin: -12px -12px 11px -12px;
    padding: 4px 8px 2px 12px;
    position: relative;
    /* border: 1px solid rgba(223, 229, 233, 1); */
    /* border-radius: var(--main-border-radius); */
    background: rgba(243, 246, 248, 0.50);
    border-bottom: 1px solid rgba(233, 236, 238, 1);
    background: rgba(250, 252, 255, 1);
	background:  rgba(233, 236, 238, 1);
    border-radius: var(--main-border-radius) 6px 0px 0px;
}

.list_main_btn {
	margin:-16px 0px 0px 0px;
	padding-bottom:7px;
	line-height:0px;
	overflow:hidden;
	z-index:1;
	position:relative;
}

.list_main_btn2 {
	display:inline-block;
	background-color:#048ad9;
	background-color:rgba(223, 229, 233, 1);
	border:1px solid rgba(223, 229, 233, 1);
	width:14px;
	height:14px;
	margin-top:-9px;
	margin-bottom:2px;
}
.list_main_btn:hover .list_main_btn2{
	background-color:#048ad9;
	border-color:rgba(4,140,217,0.05);
	background:var(--bg-color-grey);
	background:rgba(255, 255, 255, 1);
	border-color:rgba(4,140,217,1.75);
}
.list_item_combined .list_main_btn {
    display:none;
}


#wraps {
	
	display: flex;
    flex-direction: row;
    min-height:calc(100% - var(--headline-height));
	margin-top: var(--headline-height);
	position: absolute;
    top: 0px;
    bottom: 0px;
	width: 100%;
	
	
	
}
.wrap {
	min-height: 100%;
	height: 100%;
	max-height: 100%;
	margin: auto;
	width: 100%;
	background: rgba(0,0,0,0.3);
	z-index: 99;
	

	position: absolute;
    top: 0px;
    bottom: 0px;

}


/*
	this is required for links input
	to be on top of quick add input
*/
.wrap.front {
	z-index: 299;
}

.wraps {
	position:relative;
	width: 100%; 
	height: 100;
	box-sizing: border-box;

	width: 100%;
   
    min-width: 314px;
    
    
    overflow-y: hidden;
	
    box-sizing: border-box;
	

	
}


.wrap.opening {
	animation:wrap_opening 0.3s;
	animation-timing-function: linear;
}
@keyframes wrap_opening {
	0% {
		background: rgba(0,0,0,0.1);
	}
	100% {
		background: rgba(0,0,0,0.3);
	}
}

.wrap.closing {
	animation:wrap_closing 0.2s;
	animation-timing-function: linear;
}
@keyframes wrap_closing {
	0% {
	}
	100% {
		background: rgba(0,0,0,0.1);
	}
}

.window_el.closing {
	animation:window_el_closing 0.2s;
	animation-timing-function: linear;
}
@keyframes window_el_closing {
	0% {
	}
	100% {
		transform:translateY(100%);
	}
}

.wrap_cntnr > .cntnr_0 {
	box-shadow:0 1px 5px rgba(7,25,40,0.25), 0 3px 6px rgba(7,25,40,0.25);
	box-shadow: 0 0px 2px rgb(7 25 40 / 5%), 0 1px 3px rgb(7 25 40 / 15%);
	/*
	margin: 2px;
	*/
	margin-top: auto;
    margin-bottom: auto;
	border-radius: var(--main-border-radius);
}
.wrap_cntnr {
	
    transition-property: margin;
    transition-duration: 0.2s;
    transition-timing-function: linear;
    transition-delay: 0s;
    overflow-y: hidden;
    max-width: 614px;

	/*
	width: 614px;
	*/
    margin: auto;
	/*
    overflow-y: scroll;
	*/
    
    box-sizing: border-box;
	/*
	max-height: calc(100vh - 18px);
	*/
	min-height: 100%;
    max-height: 100%;
	height: 100%;

	padding: 4px 4px;
	padding: 1px;
	/*
	padding: 8px 8px;
	*/

	/*
	animation:appear 0.1s;
	animation-timing-function: linear;
	*/
}
/*
.opening .wrap_cntnr_2  {
	animation:appear 0.3s;
	animation-timing-function: linear;
	border-color:transparent !important;
}
@keyframes appear {
	0% {
		transform: scale(0.8);
		opacity:0.5;
	}
	100% {
		transform: scale(1);
		opacity:1;
	}
}
*/
.wrap.opening.mobile {
	animation: shade_appear 0.3s;
	animation-timing-function: linear;
}
.mobile .window_el_appear {
	animation: mobile_appear 0.3s;
	animation-timing-function: linear;
}


.opening .wrap_cntnr_2:not(.mobile .wrap_cntnr_2) ,
.opening .cntnr_profile:not(.mobile .cntnr_profile) ,
.opening .cntnr_20:not(.mobile .cntnr_20) ,
.opening .cntnr_confirmation:not(.mobile .cntnr_confirmation) {
	animation:window_el_appear_wrap  0.3s;
	animation-timing-function: linear;
}
/*
.opening .cntnr_profile:not(.mobile .cntnr_profile) {
	animation:window_el_appear_wrap  0.3s;
	animation-timing-function: linear;
}
*/


.mobile.opening .wrap_cntnr_2 ,
.mobile.opening .cntnr_profile ,
.mobile.opening .cntnr_20 ,
.mobile.opening .cntnr_confirmation {
	animation:mobile_appear 0.3s;
	animation-timing-function: linear;
	border-color:transparent !important;
}
@keyframes mobile_appear {
	/*
		for some reason translation 
		for wrap children doesn't work in Opera
		unless you put them in the correct spot first and then tranlate
	*/
	0% {
		opacity:0;
	}
	0.01% {
		transform: translateY(100%);
		opacity:1;
	}
	100% {
		transform: translateY(0%);
		
	}
}





.closing .wrap_cntnr {
	animation:disappear 0.2s;
	animation-timing-function: linear;
	border-color:transparent !important;
}
@keyframes disappear {
	0% {
	}
	100% {
		transform: scale(0.8);
		opacity:0.5;
	}
}


.mobile.closing .wrap_cntnr {
	animation:mobile_disappear 0.2s;
	animation-timing-function: linear;
	border-color:transparent !important;
}
@keyframes mobile_disappear {
	0% {
	}
	100% {
		transform: translateY(100%);
		opacity:0.5;
	}
}





.cancel_wrap {
	display:none;
}
.wrap .cancel_wrap ,
.cancel.cancel_wrap {
	display:block;
}
.wrap_cntnr_media {
	max-width: initial;

	/*
		wrap_cntnr has 1px padding
		need to remove it
		so when user move cursor to the edge of screen, he would click on prev/next link
		and not media back btn
	*/
	padding:0px;
}
.wrap_cntnr_media > div {
	height:100%;
}


.wrap_cntnr_profile ,
.wrap_cntnr_listview {
	max-width: 614px;
	overflow-y: hidden;
}
.wrap_cntnr_listview {
	max-width: 614px;
	overflow-y: hidden;
}
.wrap_cntnr_listview .cntnr_0 {
		/*
	margin-top:2vh;
	margin-bottom:2vh;
	*/
	/*
	margin-top:8px;
	*/

	/* this assures task sits at the top of a screen */
	margin-top:0px;
	/* this assures there's no margin between task comments and task cntnr */
	margin-bottom:0px;
}

.wrap_cntnr_2 {
	max-height: calc(100vh - 20vh);
    overflow: hidden;
    overflow-x: auto;
    margin: -12px;
    padding: 12px;
}
.cntnr_confirmation {
	    /* min-width: 400px; */
		text-align: center;
		/* border-radius: var(--main-border-radius); */
		padding: 12px;
		/* text-transform: uppercase; */
		color: black;
		/* font-weight: 500; */
		/* letter-spacing: 0.3px; */
		font-size: 14px;
		position: relative;
		width: 400px;
		max-width: 100%;
		margin: auto;
		border-radius: var(--main-border-radius);
		box-sizing: border-box;

		max-height: min(calc(100vh - var(--headline-height) - 16px), max(50vh, 300px));
}
@media screen and (max-width:438px) {
	.cntnr_confirmation {
		min-width:260px;
	}
}


.btn_yes ,
.btn_no ,
.btn_save {
	/*
	background: rgba(244, 129, 177, 0.1);
	*/
    text-transform: uppercase;
    font-size: 13px;
    text-align: center;
    /* vertical-align: middle; */
    display: flex;
    justify-content: center;
    align-items: center;
	color: rgba(244, 129, 177, 1);
	padding:16px;
	/*
	margin: -12px 0px -12px -12px;
	*/
	cursor:pointer;
	flex-grow:1;
    flex-basis:0;
	font-weight:500;
	border-radius: var(--main-border-radius);

	transition-property: all;
    transition-duration: 0.1s;
    transition-timing-function: linear;
    transition-delay: 0s;
} 
.btn_no,
.btn_save {
	/*
	background-color: rgba(4, 138, 217, 0.1);
	*/
	color: rgba(4, 138, 217, 1);
	/*
	margin: -12px -12px -12px 0px;
	*/
}
.btn_save {
	/*
	background-color: rgba(4, 138, 217, 0.1);
	*/
	border-radius:0px;
	color: rgba(4, 138, 217, 1);
}
.btn_yes:hover {
	background-color: rgba(244, 129, 177, 0.25);
}
.btn_no:hover ,
.btn_save:hover {
	background-color: rgba(4, 138, 217, 0.25);
}


.profile_side {
	min-width:250px;
	/*
	background: var(--bg-color-grey);
	*/
	/*
	margin:-12px;
	*/
	overflow: hidden;
	/*
	box-shadow: 0 2px 1px rgba(0,0,0,0.05), 0 1px 4px rgba(0,0,0,0.07); 
	*/
	/*
    border-right: 1px solid rgba(233, 236, 238, 1);
	*/
	box-sizing: border-box;
	position: relative;

	
}
.profile_side .btn4{
	color:#000;
}
.profile_side .divider {
	background: transparent;
}
.profile_content {
	min-width:250px;
	box-sizing: border-box;
	position: relative;

	/* this helps to make profile_side 250px wide when screen is WIDE */
	flex-basis:50%;

	background: #fff;
	

	
	
}
/*
.profile_content .label {
	margin-left:0px;
	margin-right:0px;
	padding-left:0px;
	padding-right:0px;
}
*/
.profile_info,

.profile_follower {
	border: 1px solid;
    border-color: var(--border-color-grey);
    border-radius: var(--main-border-radius);
    margin-top: 12px;
    margin-bottom: 12px;
    padding: 4px;
    /* background: var(--bg-color-grey);*/
}
.profile_perm_cntnr,
.profile_info_param {
	border-bottom: 1px solid;
    border-color: var(--border-color-grey);
	padding:2px 1px;
}
.profile_perm_cntnr {
	margin:0px;
}
.profile_follower {
    margin-top:8px;
	margin-bottom:8px;
	border-radius: 50px;
	padding:4px;
}

.cntnr_profile {
	height: calc(100% - 10%);
	/*
	overflow: hidden;
    overflow-x: auto;
	*/
    margin: -12px;
	margin: auto 0px;
	/*
    padding: 12px;
	*/

	display: flex;
	overflow-x: auto;
	
	scroll-behavior: smooth;

	border-radius: var(--main-border-radius)  ;
}

.profile_scroll_panel {
	display: none;
}
/*
@media screen and (max-width: calc(238px + 614px)) {
	.cntnr_profile {
		overflow-x: hidden;
		flex-wrap: wrap;
	}
}
*/

@media screen and (max-width: 540px) {
	.profile_side ,
	.profile_content  {
		min-width:100%
	}
	.profile_scroll_panel {
		display: block;
	}
}
@media screen and (max-height: 800px) {
	.cntnr_profile {
		height: calc(100vh - var(--headline-height) - 0px);
	}
}

/*
.cntnr_profile_narrow {
	overflow-x: hidden;
    flex-wrap: wrap;
}
*/

.wrap_cntnr_height_max {
	max-height: calc(100vh - 20vh);
}    
.wrap_cntnr_height {
	height: calc(100vh - var(--headline-height) - 16px - 24px);
}    
.wrap_cntnr_614px {
	width:calc(614px - 12px - 12px);
	/* required for narrow screens */
	max-width:100%;
}
.cntnr_listview {

	max-height: calc(100vh - var(--headline-height) - 16px);
	min-height: calc(100vh - var(--headline-height) - 16px);
	/*
	this doesn't help
	max-height: 100%;
	*/
    overflow: hidden;
    overflow-x: auto;
    margin: -12px -12px -12px -12px;
}
/*
.cntnr_listview .list_item .cntnr_0  {
	
	min-height: calc(100vh - 38px - 16px);
}
*/
.cntnr_listview .cntnr_list_fullheight  {
	
	min-height: calc(100vh - 38px - 16px - 32px);
}



.list_item_side_menu ,
.menu_listview {
	display: none;
}
.board_columnext .list_item_side_menu ,
.board_columnext .menu_listview ,
.list_view .list_item_side_menu  ,
.list_view .menu_listview {
	display: block;
}

/*
	hide this menu inside activities
*/
.board_columnext .board_col .board_col .menu_listview {
	display: none;
}


.board_columnext .task_options_btn  ,
.list_view .task_options_btn   {
	display: flex;
}
/*
.board_columnext .board_cover {
	display: none;
}
*/
/*
.cntnr_listview .task_options_cntnr {
	position:relative;
	display:flex;
	top:0px;
	right:0px;
}
*/

.board_columnext .task_fields  ,
.board_columnext .j_main_btns_menu  ,
.board_columnext .j_list_context_menu  ,
.list_view .board_col_head ,
.list_view .j_main_btns_menu ,
.list_view .j_list_context_menu {
	display:none;
}


.change_bg_wrap {
    display: inline-block;
    overflow: hidden;
    min-width: 100%;
	margin: 0px 8px 0px 16px;
}
.change_bg_img_cntnr {
	cursor: pointer;
	/*
	max-width: 100px;
	min-width: 30%;
	margin: 4px;
	*/
	
	max-width: 33.3%;
	/*
	max-width: 50%;
	*/
    min-width: 100px;
    padding: 4px;
    box-sizing: border-box;
    flex-grow: 1;
}
.change_bg_img {
	width:100%;
	border-radius: var(--main-border-radius);
}



.choose_item .material-icons {
	color:transparent;
}
.material-icons {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none;
	line-height: initial !important;

	font-size:inherit !important;
}

.calendar {
	font-size:13px;
	
	
}
.calendar_days {
	margin:auto;
	/*
	max-width:238px;
	*/
}

.day {
	margin-left:auto;
	margin-right:auto;
    width: 30px;
    height: 30px;
	display: flex;
    justify-content: center;
    align-items: center;
	margin:2px;
	border-radius: var(--main-border-radius);
	text-align:center;
	cursor:pointer;
	border:1px solid transparent;
}
.day.selected {
	background-color:rgba(4,140,217,0.08);
	border: 1px solid rgba(223, 229, 233, .6);
}
.day.this_month {
	font-weight:700;
}
.day.this_day {
	color:#048ad9;
}
.day:hover {
	background:var(--bg-color-grey-hover);
}
.day.std {
	background:initial;
	cursor: default;
}


.selected {
	color:#048ad9;
}
.selected.red {
	color:rgba(244, 129, 177, 1);;
}





.quick_add_save_btn {
	
	border-radius: var(--main-border-radius);
	position: absolute;
    right: 0px;
}
.new_task_btn {
	display: block;
	border-color:transparent;
	color: #048ad9;
    font-weight: 500;
}

.quick_add_cntnr {
	position:absolute;
	bottom:0px;
	right:0px;

	z-index: 85;
}
.quick_add_btn_cntnr {
	margin:16px;
	position:relative;

	display:none;

	animation:quick_add_btn_appear 0.3s;
	animation-timing-function: linear;
}
@keyframes quick_add_btn_appear {
	0% {
		scale:0.5;
	}
	100% {
	}
}


.quick_add_cntnr_scroll_margin {
	bottom:34px;
}






.quick_add_cntnr.active .quick_add_btn_cntnr {
	display:block;
}
.quick_add_btn_cntnr.main {
	display:block;
}
.quick_add_cntnr.active .quick_add_btn_cntnr.main {
	display:none;
}
.quick_add_btn {
	width:50px;
	height:50px;
	border-radius:100%;
	color:#fff;

	display: flex;
    justify-content: center;
    align-items: center;

	cursor: pointer;
	font-size:38px;
	background:rgba(4, 140, 217, 0.8);

	box-shadow:0 1px 5px rgba(7,25,40,0.05), 0 3px 6px rgba(7,25,40,0.05);
	border: 2px solid;
	border-color: rgba(255,255,255,0.8);

	transition-property:all;
    transition-duration:.1s;
    transition-timing-function:linear;
    transition-delay:0s;
}
.quick_add_btn i {
	pointer-events: none;
}
.quick_add_btn:hover {
	background:rgba(4, 140, 217, 1);
}
.quick_add_btn.edit {
	background:#fff;
	color:rgba(4, 140, 217, 1);
	width: 30px;
    height: 30px;
	margin:24px auto;
	
}
.quick_add_btn.edit:hover {
	color:#000;
	
}
/*
.quick_add_btn_main {
	background:Red;
}
*/
.quick_add_avatar ,
.quick_add_lock_btn ,
.quick_add_remove_btn {
	--size: 28px;

	width: var(--size);
	height: var(--size);
	position: absolute;
	top: calc(-1 * var(--size) / 2.5);
	right: calc(-1 * var(--size) / 2.5);

	border-radius:100%;

	cursor: pointer;
}

.quick_add_remove_btn {
	right: auto;
	left: calc(-1 * var(--size) / 2.5);
}
/*
.quick_add_avatar {
	background: green;
}
*/
.quick_add_avatar_cntnr:hover .quick_add_avatar ,
not(.quick_add_btn_cntnr:last-of-type .quick_add_avatar) {
	display:none;
}
.quick_add_lock_btn ,
.quick_add_remove_btn {
	display:none;
	background:#fff;
	justify-content: center;
    align-items: center;
}
.quick_add_avatar_cntnr:hover .quick_add_lock_btn  {
	display:flex;
}
.quick_add_btn_cntnr:hover .quick_add_remove_btn {
	display:flex;
}
/*
.quick_add_btn_cntnr:last-of-type .quick_add_lock_btn ,
.quick_add_btn_cntnr:last-of-type .quick_add_remove_btn {
    display: none;
}
*/

.quick_add_input_cntnr {

	max-height: calc(100vh - var(--headline-height) - 16px);
	max-height: 300px;
	max-height: min(calc(100vh - var(--headline-height) - 16px), max(50vh, 300px));
	
	
	
	position:absolute;
	bottom:0px;
	right:0px;

	margin:8px;

	width:300px;
	
	/*
	padding:12px;
	*/
	box-sizing: border-box;

	background:#fff;
	border-radius:var(--main-border-radius);
	z-index: 106;

	box-shadow: 0 2px 6px rgba(7,25,40,0.15), 0 3px 9px rgba(7,25,40,0.15);
	
	
}

.quick_add_input_cntnr_open {
	animation:quick_add_input_cntnr_open 0.2s;

	animation-timing-function: linear;
	/*
	animation-delay: 2s;
	*/
}
@keyframes quick_add_input_cntnr_open {
	0% {
		transform: translateY(100%);
		opacity: 0;
	}
	100% {
		transform: translateY(0%);
		opacity: 1;
	}
}
.quick_add_input_cntnr_close {
	animation:quick_add_input_cntnr_close 0.2s;
	animation-timing-function: linear;
}
@keyframes quick_add_input_cntnr_close {
	0% {
		transform: translateY(0%)
	}
	100% {
		transform: translateY(100%)
	}
}


/*
.quick_add_input_cntnr .input_height_100_scroll {
	overflow-y:scroll;
    overflow-x:hidden;
    max-height:calc(100% - 38px);
	
	overflow-y:auto;
	
	
	padding-bottom: 4px;
}
*/

/*
.quick_add_input_cntnr .input_cntnr_3 ,
.quick_add_input_cntnr .text_input {
	border-radius: 0px !important;
}
*/




.board {
	margin-left:-4px;
	/*
	overflow-x:scroll; --- in style-mobile.css
	*/
}
.scroll_menu {
	
	/* this alsways shows the scrollbar */
	
	overflow-y:auto;
	
	
	overflow-x: hidden;
	border-bottom-left-radius:inherit;
	border-bottom-right-radius:inherit;
	
	/* this is required for the cntnr box shadow not to be cut off on the sides */
	padding: 0px 4px 4px 4px;
    margin: -4px -4px -4px -4px;
	
	padding: 0px 0px 0px 0px;
	

	
	/* auto margin brings it to the middle when board_list is enabled */
	margin: 0px auto 0px auto;
	
	/*
	border-top: 1px solid rgba(0, 0, 0, 0);
	*/
}
.scroll_menu_fullheight {
	height: calc(100vh - var(--headline-height) - 1px - 1px);
	margin-top:1px !important;
}

/*
.scrolled {
    font-weight:700;
    color:#048dc9;
    border-color:#048dc9;
}
*/
/*
.j_refresh_cntnr .item_wrap:first-of-type {
    border-color: red;

	margin-top:0px ;
}
*/


/*	
	this seem to work
	it may make a top border 0 for cases like
		item_wrap		- 0px
		item_wrap		- whatever was set before
		drag_divider	
		item_wrap		- 0px again (!)
	it doesn't make as the bottom border fixes the issue!
*/



.item_wrap:first-child, :not(.item_wrap) + .item_wrap ,
.item_wrap:first-child .cntnr_0, :not(.item_wrap) + .item_wrap .cntnr_0 ,
.item_wrap:first-child .cntnr_wrap, :not(.item_wrap) + .item_wrap .cntnr_wrap {
	margin-top:0px !important;
}




/*
.j_refresh_cntnr > .item_wrap ~ .item_wrap {
	border-color: transparent;
}


.j_refresh_cntnr > div:first-child ,  
.j_refresh_cntnr > div:first-child .cntnr_0 ,
.j_refresh_cntnr > div:first-child .cntnr_wrap {
	margin-top:0px ;
}

.standalone .j_refresh_cntnr > div:first-child ,  
.standalone .j_refresh_cntnr > div:first-child .cntnr_0 ,
.standalone .j_refresh_cntnr > div:first-child .cntnr_wrap {
	margin-top:1px ;
}
*/

.drag_object_temp_div {
	/*
		when move item via board_col_head btn, 
		a placeholder is added in j_refresh_cntnr. 
		This placeholder is a firstchild and therefore the first list becomes 2nd child and has a 4px margin
		this rectifies that margin
	*/
	/* but it makes it look extremely weird in other spots, like when draggin */
	/*
	margin:-4px ;
	*/
}
/*
.item_wrap .board_compact .activity_mt8 {
	margin-top:6px;
}
*/

/*
.j_refresh_cntnr > div:last-child ,  
.j_refresh_cntnr > div:last-child .cntnr_0 ,
.j_refresh_cntnr > div:last-child .cntnr_wrap {
	margin-bottom:0px !important;
}
*/


/*
.j_refresh_cntnr > div ,
.j_refresh_cntnr > div .cntnr_0 {
	margin-top:0px;
	background-color: red;
}
.j_refresh_cntnr > div ~ div ,
.j_refresh_cntnr > div ~ div .cntnr_0 {
	margin-top:initial;
	background-color: initial;
}
*/
/*
.j_refresh_cntnr:last-child,
.j_refresh_cntnr:last-child .cntnr_0 {
	margin-bottom:0px;
}
*/
/*
.scroll_menu .j_refresh_cntnr {
	margin-top:-4px;
}
*/

.board_col .scroll_menu {
	margin: 0px 0px 0px 0px;
	/*
	border-radius: 0 0 var(--main-border-radius) var(--main-border-radius);
	*/
}
.landing_col .scroll_menu {
	overflow:auto;
}
.login_col .scroll_menu {
	margin-top:auto;
	margin-bottom:auto;
}



.center_panel {
	/*
	min-width:614px;
	min-width:314px;
	min-width:614px;
	*/

    margin-left:4px;
	
    /*
	overflow-x: hidden;
	*/
	
	overflow-y: hidden;
	
	overflow-x: auto;
	/*
	max-height:100%;
	min-height:100%;
	*/
	display:flex;    
	flex-direction:column;
	justify-content:flex-start;
	margin:0px 0px 0px 0px;
	z-index:1;
	position:relative;

	/*
	padding:0px 4px;
	*/
}
.center_panel_fixed_width {
	
	/* this is to override scroll_menu bottom padding
		as it messes up all the landings */
	/*
	padding:0px !important;*/
	margin-top:-8px;
	
	width:614px;
	    max-width: 100%;
}
.fw.center_panel {
	width:auto;
	min-width: auto;
}

.pinned_panel {
	display:flex;

	border-left: 4px solid rgba(255, 255, 255, 0.82);
}




.board_col ,
.board_row_only {
	/*
		this is required so the board takes up full height
		and then swipe left-right functions work on mobile
	*/
	display: block;



	/* setting a min-width makes it behave unpredictably */
	/*
	min-width:314px;
	*/
	min-width:314px;
	width:314px;
	
	/*
	max-width:614px;
	*/
	/*
	max-width:314px;
	*/
	
	padding: 0px 1px;
	
	display:flex;    
	flex-direction:column;
	justify-content:flex-start;
	text-align: left;
	border: 0px;
	box-sizing:border-box;

	border-radius: var(--main-border-radius);

	flex-grow: 1;

	/*
	border-left:1px solid transparent;
	border-right:1px solid transparent;
	margin:0px 0px 0px -1px;  
	*/
	/*
	margin-top:-8px;
	*/
    /*
	overflow: hidden;
	*/
	/*
	max-height:calc(100vh - 38px - 14px);
	min-height:calc(100vh - 38px - 14px);
	
	
	max-height:100%;
	min-height:100%;
	
	max-height: calc(100% - 8px);
    min-height: calc(100% - 8px);
	*/
	
	
	/* this avoids acrylic bg over board_col border */
	/* it also messed up drop downs */
	/*
	z-index:2;
	*/
	
	
	/* this makes it grow larger when necessary (like when there's one col only)*/
	flex-basis: 600px;
	
	
	/* this is not to show board cols on the first load */
	/*
	display: none;
	*/
}

.board_list .board_col {
	/* 
		this is so empty boards inside board_list are not 600px high everytime
	*/
	flex-grow: initial;
	flex-basis:auto;
}
.board_list2 .board_col {
	/* 
		this is so empty boards inside board_list are not 600px high everytime
	*/
	flex-grow: initial;
	flex-basis:auto;
}


.board_col .board_col {
	min-width:auto;
}


.window_el .board_col {
	display: flex;
}

.cntnr_0 .board_col {
	padding:0px;
}
/*
.board_col.solo {
	box-shadow:none;
}
*/
.landing_col {	
	max-width: 1000px !important;
    width: 100% !important;
	margin: 0px auto;
    /* background: #fff; */
    /* height: calc(100vh - 38px - 16px); */
	/*
    min-height: calc(100vh - 38px - 16px);
	*/
    margin-top: 0px;
    padding: 0px;
    box-shadow: none;
    /* margin-top: -38px; */
    /* padding-top: 38px; */
    /* z-index: 300; */
    /* position: absolute; */
    /* left: 0px; */
    /* background: rgba(243, 246, 248, 0.95); */
    /* background: rgba(230, 233, 235, 1); */
}
.login_col {
	min-width:314px;
	margin:auto !important;
}

.landing_col2 {
	display: flex;
    flex-direction: column;
	/*
	min-width: 330px;
*/
	min-width: 100%;
	    height: 100%;
    min-height: 100%;
    overflow-y: auto;
}
@media screen and (max-width: 1000px) {
	.landing_col {
		/*
		width: calc(100vw + 0px) !important;
		max-width: calc(100vw + 0px) !important;
		min-width: calc(100vw + 0px) !important;
		*/

		/* window width based calc works badly when user opens a side menu */
		/*
		width: calc(100% + 0px) !important;
		max-width: calc(100% + 0px) !important;
		min-width: calc(100% + 0px) !important;
		*/
	}
}
@media screen and (max-width: 614px) {
	.landing_col {
		  margin-left: 0px;
	}
}

.board_col.border {
	border-color:rgba(223, 229, 233, 1);
}


.headline_menu_right .board_col ,
not(.board_columnext .board_col)  {
	margin:0px;
	max-height:100%;
	min-height:100%;
	width: 100%;
    max-width: 100%;
	/*
	padding:4px 8px 8px 8px;
*/	
/*
	margin-top:-4px;
	*/


}





@media screen and (max-width: 614px) {
	:root {
		--variable-border-radius: 0px;
	}



	.center_panel {
		/* min-width:auto makes board_cols to be 314 wide */
		/*
		min-width:auto;

		*/
		/* min-width:100% is to make board_cols to be full screen wide */
		/*
		min-width:100%;
		*/
		padding:0px;
	}
	.start .board_col, 
	.board_board .board_col ,
	.board_list2 .board_col ,
	/*
		.select-inside-this :not(.not-inside-this) .select-this
	*/
	.board_compact :not(.list_item) .board_col ,
	.board_hierarchy .board_col ,
	.board_list .board_col {
		/*
		width:calc(100vw - 4px);
		max-width:calc(100vw - 4px);
		min-width:calc(100vw - 4px);
		*/
		width:calc(100% - 8px);
		max-width:calc(100% - 8px);
		/*
		min-width:calc(100% - 8px);
		*/
		width:calc(100vw - 0px);
		max-width:calc(100vw - 0px);
		/* this is required to make board_col the same width as screen*/
		min-width:calc(100vw - 0px);
		
		max-height: calc(100% - 0px);
    	min-height: calc(100% - 0px);
		margin:0px;
		border-radius:0px;
		/*
		padding-left:8px;
		padding-right:8px;
		*/
	}
	.board_board .board_cover ,
	.board_list2 .board_cover   {
		/*
		margin-left:8px;
		margin-right:8px;
		*//*
		min-width:calc(314px - 8px - 8px);
		*/
		/*
		overflow: hidden;
		*/
	}
	 
	.board_board ,
	.board_list2 {
		width:calc(100vw);
		max-width:calc(100vw);
		min-width:calc(100vw );
	}

	
	.board_board.window_el ,
	.board_list2.window_el ,
	.board_compact.window_el {
		/* 
		4px margin each side
		1px border each side
		*/
		
		
		/*
		min-width: 314px;
		*/
		width: calc(100vw - 10px);
		max-width: calc(100vw - 10px);

		/* important overrides any custom window_el width set by the user*/
		width: 100vw !important;
		max-width:100vw ;
		
		
	}
	:not(.wrap_cntnr ) > .window_el ,
	.window_el {
		border-radius: 0px;
		margin:0px;
		max-width:100vw;
		padding:0px;
	}
	.wrap .window_el {
		/*
		border-radius: var(--main-border-radius);
		*/
		border-radius: 0px;
	}
	.wrap_cntnr {
		padding:0px 0px;
		border-radius:0px;
		border-top:1px solid;
		border-color:var(--bg-color-grey);
	}
	.wrap_cntnr .cntnr_20 { 
		border-radius:inherit;
	}
	.wrap_cntnr_listview .cntnr_0 ,
	.cntnr_profile {
		border-radius: 0px;
	}

	.board_list .flex_row_panel_y {
		align-self: auto !important;
	}


	.scroll_menu_fullheight {
		height: calc(100vh - var(--headline-height) - 0px - 0px);
		margin: 0px !important;

		margin-left:-1px !important;
		margin-right:-1px !important;
	}
	.scroll_menu_fullheight .cntnr_20 {
		border-radius:0px;
	}
	
	/*
	.window_el.board_columnext {
		padding:4px;
		box-sizing: border-box;
	}
	.wrap .window_el.board_columnext {
		padding:0px;
	}
	*/
	.headline_menu_right {
		width: calc(100% - 0px) !important; /* overrides the js resize script */
		border:0px;
	}
	.headline_menu_right .board_col  {
		width:calc(100vw + 18px);
	}
	.headline_menu_right .board_columnext .board_col  {
		width:calc(100vw );
	}
	.headline_menu_right.hidden {
		right:-100%;
	}


	.quick_add_input_cntnr {
		width:100vw;
		margin: 0px;
    	border-radius: 0px;
	}
	.quick_add_input_cntnr .input_cntnr_3 {
		border-radius: 0;
	}

	.window_scroll_btn.selected ,
	.window_scroll_btn2.selected {
		background:rgba(4, 140, 217, 1);
	}


	
}
@media screen and (max-width: 450px) {
	.avatar_big {
		width:100px;
		height:100px;
        min-width:100px;
        line-height:100px;
        font-size:38px;
	}

	.board_col_setup ,
	.list_item_side_menu {
		
		max-width:100% !important ;
	}

	#quick_faq_wrap {
		width:100%;
		max-width: 100%;
	}

	
}


@media screen and (max-width:614px) {
	
    .headline_center_panel {
		/*
        padding: 4px;
        padding-right:4px;
		*/
		/*	
		padding-left:10px;
		padding-right:10px;
		*/
    }
	
	/*
	.head_loading_bar_animation {
		right:8px !important;
	}
	*/
	/*
	#head_loading_wrap {
		right:8px ;
	}
	*/
	.msg {
		padding-left:3px;
        padding-right:3px;
	}
	/*
	.wrap_cntnr {
		margin:-8px 0px 0px 0px;
	}
	*/
	
}
@media screen and (max-width:314px) {
	.start .board_col, 
	.board_board .board_col ,
	.board_list2 .board_col ,
	.board_board .center_panel ,
	.board_list2 .center_panel {
		min-width:314px;
	}
}
.board::-webkit-scrollbar{
	display:none;
}
.board_name {
	font-size:13px;
	font-weight:500;
	padding:0px 0px 0px 0px;
	color:#000;
	
	text-align:left;
	overflow: hidden;
	max-height: 22px;
	min-height: 22px;
	margin-bottom: -2px;
	word-break: break-word;

	/*
	white-space: nowrap ;
	makes wider windows than default
	*/
}
.board_list .board_name {
	text-align:left;
}


.board_col:hover .board_name {

}

.board_col_btns {
	/*
	position: absolute;
    top: 6px;
    right: 0px;
	*/
	margin-right: -12px;
	/*
	display: none;
	*/
}
/*
.board_col:hover .board_col_btns {
	display: flex;
}
*/



/*
display: none;
*/
.board_col_filter ,
.board_col_head {
	display: none;
}
.board_col_head {
	

	margin-right: 0px;
    /* z-index: 2; */
	/*
	margin: 0px -4px 0px -4px;
	*/
	/*
	border-bottom: 1px solid rgba(0, 0, 0, 0.0);
	*/
	/*
	border-radius: var(--main-border-radius) 6px 0px 0px;
	border-radius: var(--main-border-radius) ;
	border-radius: var(--main-border-radius) 8px;
	border-radius: var(--main-border-radius) 16px 16px 8px;
	*/
	border-radius: var(--variable-border-radius) ;
    /* z-index: 2; */
	/*
	box-shadow: 0 1px 1px rgba(7,25,40,0.03),  0px 2px 2px rgba(7,25,40,0.02);
	*/
	border-bottom: 1px solid rgba(230, 233, 235, 1);

	border: 0px solid;
	border-color: #fff;
	padding: 6px 12px;
  
    /* background: rgba(255,255,255,0.9); */

	background: rgba(255,255,255,1.75);
	margin:0px 0px 1px 0px;

	border: 1px solid;
    border-color: transparent;

	padding:7px 13px 7px 12px;
}



/*
.task_desc :not(:has(+ .br)) .br { 
	display: none;
}
*/
/*
.task_desc br + br {
	display: none;
}
*/

/*
.board_list .board_col_head {
	margin-bottom:0px;
}
*/
/*
.board_compact .board_cover ,
.board_hierarchy .board_cover {
	margin-bottom:0px;
}
*/
/*
.board_compact .board_col_head ,
.board_hierarchy .board_col_head {
	margin-top:1px;
	margin-bottom:0px;
}
*/

.board_col_head_listview {
	display: none;
}
.list_item .board_col_head_listview {
	display: block;
}






.windows_mltpl_show {
	display: none;
}
.windows_mltpl .windows_mltpl_show {
	display: block;
}









/*
.window_el_mltpl_show {
	display: none;
}
.window_el_mltpl .window_el_mltpl_show {
	display: block;
}
*/
.window_el_mltpl_hide {
	display: block;
}
.window_el_mltpl .window_el_mltpl_hide {
	
	display: none;
	/*
	background:red;
	*/
}
.window_el_mltpl .board_col_head {
	display: block;
}
.window_el_mltpl .board_col_head {
	display: block;
}
.board_list .board_col_head {
	/*
	display: block;
*/

	/*
	margin: 0px 0px -1px 0px;
	box-shadow: none;
	*/
}
/*
.board .align_button {
	display:none;
}
*/
/*
.cntnr_10, .cntnr_0 {
	width:100%;
	box-sizing:border-box;
	min-width:314px;
	max-width:614px;
}
*/
.quick_menu_btn {
	display:none;
}
.headline_menu_right .quick_menu_btn {
	display:block;
}


.board_stage_place_prev ,
.board_stage_place_next {
	width:50px;
	height:100%;
	position:absolute;
	top:0px;
	z-index:-1;
}
.board_stage_place_prev {
	left:0px;
}
.board_stage_place_next {
	right:0px;
}


.cap .divider {
	margin-right:-65px;
	margin-right:-8px;
}

.border_round {
	
	border:1px solid;
	border-color:var(--border-color-grey);
	/*
	background: rgba(223, 229, 233, 0.0);
	*/
    /* margin: 0px 16px 0px 16px; */
    border-radius: var(--main-border-radius);
	/*
	box-shadow: 0 0px 1px rgba(7,25,40,0.10), 0 1px 1px rgba(7,25,40,0.10), 0 2px 3px rgba(7,25,40,0.02);
	*/
}
.border_round_selected {
	border:1px solid;
	border-color:transparent;
}
.elem_selected.border_round_selected {
	border:1px solid;
	border-color:var(--border-color-grey);
	/*
	background: rgba(223, 229, 233, 0.0);
	*/
    /* margin: 0px 16px 0px 16px; */
    border-radius: var(--main-border-radius);
}


.border_radius {
	border-radius: var(--main-border-radius);
}

.text_param_cntnr {
	border:0px solid  rgba(233, 236, 238, 1);
	border-radius: var(--main-border-radius);
}
.board_columnext .text_param_cntnr .text {
	padding:0px 10px;
}
.board_list .text_param_cntnr .text {
	padding:0px 8px 0px 8px;
}

.material-icons-new {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: contain;
}

.icon-white {
    -webkit-filter: contrast(4) invert(1);
    -moz-filter: contrast(4) invert(1);
    -o-filter: contrast(4) invert(1);
    -ms-filter: contrast(4) invert(1);
    filter: contrast(4) invert(1);
}



/* add board_list class to #page */
.board_list .center_panel {
	overflow-y:auto;
	/*
	flex-grow:10000;
	*/
}
.board_list .scroll_menu {
	overflow:visible;

}




.flex_row_panel_x ,
.flex_row_panel_y {
	overflow-x:auto;
	overflow-y:hidden;
	flex-grow:1;
	height:100%;

	

	/* this makes item full-height in list mode */
	display: flex;
    flex-direction: column;

	border-top: 0px solid;
    /* border-bottom: 1px solid; */
    border-color: rgba(48, 71, 100, 0.075);
	/* this allows scrolling all the way down in list mode */
	/*
	display: flex;
    flex-direction: column;
    justify-content: space-around;
	*/
}
.flex_row_panel_y {
	overflow-x:hidden;
	overflow-y:auto;
}
.board_list .flex_row_panel_y {
	min-width:fit-content;


	/*
		this somehow removes
		horizontal scroll at the bottom

		but it has to be overriden on narrow screens
		otherwise
		it removes option to scroll altogether
	*/
	
	align-self:flex-end;
	

	/*
		this doesn't work for taskviews
	width:fit-content;
	*/
}

.flex_row_panel {
	/*
	overflow-x:auto;
	overflow-y:hidden;
	*/
	flex-grow:1;
	
	/*
		should be set to hidden
		for adequate vertical scrolling in board_board
	*/
	overflow-y:hidden;
	/*
	overflow-y:auto;
	*/
	/* when this is visible, bottom scroll shows up because of padding 4px on top and bottom */
	/* and when is hidden, you can't scroll between cols inside windows */
	/*
	overflow-x: hidden;
	*/
	overflow-x: auto;

	/*
	height:100%;
	*/

	
	/*
	margin:0px -8px 0px -8px;
	padding:0px 8px 0px 8px;*/
}
/*
.flex_row_panel::before {
    min-width: 4px;
    content: '';
}
*/

.window_el_mltpl .flex_row_panel_x {
	padding: 0px;
}
.board_list .flex_row_panel_x {
	
	margin:0px;
	/*
	padding-left:4px;
	padding-right:4px;
	*/
	/*
	border-top: 1px solid;
	*/
    border-color: rgba(48, 71, 100, 0.075);
}


.board_list .flex_row_panel ,
.board_list2 .flex_row_panel {
	overflow-y:visible;
	display:flex;
	margin-left:0px;
	margin-right:0px;
	height:auto;
	/*
	border: 0px;
	*/
	/*
	padding: 4px 0px;
	*/

	flex-direction: column;

	/* this is required for correct list items width when window is smaller than content */
	width: fit-content;

	/* this is required so "nothing here" take the width of the whole window */
	min-width:100%;
}
.board_list .flex_row_panel_x ,
.board_compact .flex_row_panel_x ,
.board_board .flex_row_panel_x ,
.board_list2 .flex_row_panel_x ,
.board_hierarchy .flex_row_panel_x {
	/*
	padding: 4px 0px;
	*/
}




.board_list .board_col ,
.board_list2 .board_col {
	max-width: none;
    width: auto;
    border-right: 0px;
    min-height: auto;
    max-height: initial;
    margin: 0px;
	/*
	padding: 0px;
	*/
	/*
    margin-top: 4px;
	*/
	/*
	padding-right: 0px;
	padding-left: 0;
	*/
	box-shadow:none;

	/*
	width: fit-content;
	*/
}
.board_list2 .board_col {
	max-width: none;
    width: auto;
}
.start .board_col {
	/*
		this makes views menu narrower (adequate width)
		in case it appears after a list view window was closed
	*/
	
    width: 314px;


	/*
		this makes views narrow on mobile, when screen is wider than 614px
	max-width: 314px;
	*/
}

/*
.board_cover {
	display:none;
}
*/
.board_list .menu_time_1 ,
.board_list .menu_time_2 {
	display:flex !important;
}




.board_list .center_panel {
	width:auto;
	min-width:auto;
	overflow:visible;
	position:relative;
	margin: 4px 4px;
    border-radius: var(--main-border-radius);
}
.board_list .flex_wrap_board_list {
	display:flex;
	flex-wrap:wrap;
	align-content:space-around;
	align-items:flex-start;
	
	flex-wrap:nowrap;
	align-content:flex-start;
	align-items:flex-start;
	align-self: stretch;
}
.reddish {
	background:var(--bg-color-grey);
}

.board_list .mt5i_bl {
	margin-top:-5px;
}
.board_list .mb5i_bl {
	margin-bottom:-5px;
}



.width30 {
	width:30px;
	max-width:30px;
	min-width:30px;
	box-sizing:border-box;
}
.width80{
    box-sizing: border-box;
    flex-grow: 1;
    /*
	flex-basis: 50%;
	*/
	overflow: hidden;
}
.width200 {
	width:200px;
	max-width:200px;
	min-width:200px;
	box-sizing:border-box;
}
.width276 {
	width:276px;
	max-width:276px;
	min-width:276px;
	box-sizing:border-box;
	
}

.board_list.window_el {
	/* list will not stretch to the full window width, so there's not point allowing it */
	/* it also looks weird when going back to board view - window is resizing */
	/*
	max-width:fit-content; 
	*/
	/*
	padding: 0px 4px;
	*/
}

.window_el {
	width:fit-content;
}
.wrap .window_el {
	width:auto;
}

.cover_board_list_options .width276_br {
	padding:1px;
}
.board_list .width276_br {
	width:200px;
	max-width:200px;
	min-width:200px;
	box-sizing:border-box;
	/*
	padding:0px 2px;
	*/
	border-left:1px solid rgba(48, 71, 100, 0.075);
	
	/* make cntnr full height */
	align-self: stretch;
}
.board_list .col_name {
	border-color:transparent;
	border:0px;
}
.board_list .col_wrap_name {
	
	border:0px;
	/*
	border-right:1px solid;
	*/
	border-color:var(--bg-color-grey);
}
.board_list .col_link_param {
	
	border:0px;
	border-left:1px solid;
	border-right:1px solid;
	
	border-color:var(--bg-color-grey);
}

.board_list .col_solo .col_name {
	min-width:auto !important;
	max-width:none !important;
	width:auto;
}
.board_list .col_solo .cover_board_list_options {
	display: none !important;
}






.visible_be ,
.visible_be_block {
	display:none;
}
.board_columnext .visible_be {
	display:flex;
}
.board_columnext .visible_be_block {
	display:block;
}

.board_list .hidden_bl {
	display:none !important;
}
.board_board .hidden_bb ,
.board_list2 .hidden_bb {
	display:none !important;
}


.main_btns_menu {
	display: none;
}
.board_compact .main_btns_menu ,
.board_board .main_btns_menu ,
.board_list2 .main_btns_menu {
	display:flex;
}



.list_menu_main  {
	padding-right: 12px;
	padding-left: 12px;
  
    padding-bottom: 12px;
    margin-bottom: -12px;
}

.visible_bl {
	display:none;
}
.board_list .visible_bl {
	display:flex;
}
.visible_bb {
	display:none;
}
.board_board .visible_bb ,
.board_list2 .visible_bb {
	display:flex;
}

.board_list .mt4_bl {
	margin-top:4px;
}
.board_list .mt0_bl{
	margin-top:0px;
}
.board_list .c0_bl {
	margin-left:0px;
	margin-right:0px;
}

.item_wrap {
	margin:1px 0px;

	
	
	padding-left:calc(8px * var(--lvl));
	
	
	transition: padding 0.2s;
}
.lvl_border .cntnr_0 {
	border-top-left-radius: var(--main-border-radius);
	border-bottom-left-radius: var(--main-border-radius);
}


.item_wrap .item_wrap {
	margin:0px 0px 4px 0px;
}

.board_columnext .cntnr_0 ,
.board_columnext .item_wrap {
	margin-top:0px;
}
.board_hierarchy .item_wrap {
	margin-top:1px !important;
	margin-bottom:1px !important;
}
.hierarchy_main_cntnr .item_wrap {
	margin-left:0px;
	margin-right:0px;
}

.board_compact .item_wrap ,
.board_list .item_wrap {
	margin-top:1px ;
	margin-bottom:1px ;
}

.board_compact .list_item .cntnr_0   {
	/*
	margin-top:1px !important;
	margin-bottom:1px !important;
	*/
	/*
	padding-top: 6px;
	padding-bottom: 6px;
	*/
}





.hierarchy_badge {
	width:8px;
	height: 8px;
	position:absolute;
	top:1px;
	left:1px;
	border-radius:100%;
}
.hierarchy_matched .hierarchy_badge {
	background:rgba(4, 140, 217, 1);
}
.hierarchy_unmatched .hierarchy_badge {
	background:#EC5C99;
}
.hierarchy_unconnected .hierarchy_badge {
	background:var(--text-color-grey);
}

.hierarchy .item_wrap {
	margin:1px 0px 0px 0px;
}

.middle_item  {
	margin-bottom:0px !important;
}
.stacked_item {
	margin-top:0px !important;
}
/*
activity_mt8 is not always present
.activity_mt8 .cntnr_wrap {
	margin-bottom:0px !important;
}
*/
.item_wrap  .cntnr_wrap {
	margin-bottom:0px !important;
}




/*
	idea of making items disapper 
	did not work out
	as it looks weird and jumpy
	expecially on compact or list views
*/
.item_disappear {
	animation:item_disappear 0.4s;
	animation-timing-function: linear;
}
.board_columnext .item_disappear {
	/*
		minimal time is required for js event handler to fire
	*/
	animation:item_disappear 0.001s;
	animation-timing-function: linear;
}
@keyframes item_disappear {
	0% {
	}
	100% {
		scale:0.5;
		opacity:0.2;
	}
}

/*
.item_appear_mark {
	display: none;
}
*/
.item_appear {
	animation:item_appear 0.4s;
	animation-timing-function: linear;
}
.board_columnext .item_appear {
	animation:none;
}
@keyframes item_appear {
	0% {
		/*
		scale:0.5;
		*/
		opacity:0.2;
	}
	100% {
	}
}







.end_page {
	border:0px ;
	background:rgba(255,255,255,1.75);
	cursor:pointer;
	font-size:12px;
	font-weight:400;
	transition-property:all;
    transition-duration:0.2s;
    transition-timing-function:linear;
    transition-delay:0s;
	border-radius:var(--variable-border-radius);

	
}
.end_page a {
	padding:7px;
}
.end_page:hover {
	background: var(--bg-color-grey-hover);
	background:rgba(255,255,255,1);
    color: black;
}
.list_item .end_page {
	margin:8px 12px;
}

.list_item .end_page a {
	font-weight:400;
	border:1px solid;
	border-color: var(--border-color-grey);
	padding: 6px;
    border-radius: var(--main-border-radius);
	transition: all 0.2s;
}
.list_item .end_page:hover a {
	background-color: var(--bg-color-grey-hover);
}


/*
.board_compact .end_page.cntnr_20,
.board_list .end_page.cntnr_20{
	margin-top:-1px !important;
	margin-bottom:0px !important;
	padding:0px !important;
}
*/
.board_list .cntnr_addtl ,
.board_compact .cntnr_addtl    {
	/*
	padding-top: 5px;
	padding-bottom: 5px;
	*/
	padding-top: 0px;
    padding-bottom: 4px;
}
/*
.reply_avatar_cntnr {
	margin-top:1px;
}
*/
.board_list .reply_avatar_cntnr ,
.board_compact .reply_avatar_cntnr {
	margin-right:4px;

	display: flex;
    justify-content: center;
    align-items: flex-start;

	/*
		this is to align 32px high avatar with 34px high comment (when comment is one line)
	*/
	padding-top:1px;
}
/*
.board_list .task_text_cntnr {
	padding-top: 0px;
	padding-bottom: 0px;
}
*/
/*
.board_compact .task_text_cntnr {
	padding-top: 0px;
	padding-bottom: 0px;
}
*/
.board_list .cntnr_wrap ,
.board_compact .cntnr_wrap   {
	/*
	padding-top: 5px;
	padding-bottom: 5px;
	*/
	margin-top:1px;
	margin-bottom:0px;
	padding-top: 4px;
	padding-bottom: 4px;
}
.board_list .reply_user_info ,
.board_compact .reply_user_info {
	display: none;
}

.board_compact .col_cntnr_listview {
	display: none;
}
.board_compact .col_name {
	display: block;
}
.board_compact .linked_items {
	display: none;
}

.board_list .j_refresh_cntnr > .cntnr_wrap {
	margin-top:1px !important;
}

.board_list .flex_jc_center_bl {
	justify-content:center;
}
/*
.board_list .flex_row_panel {
	overflow-y:auto;
}
*/

#page.board_list {
	overflow-x: auto;
}


.board_cover {
	/*
	margin-bottom: 4px;
	*/
	/*
	max-width: fit-content;
	*/

	/*
	min-content fixes the issue when board cover becomes wider because of window name
	*/
	max-width: min-content;
	/*
	min-width: 100%;
	*/
	margin: 4px 4px 1px 4px;
	min-width: calc(100% - 4px - 4px);
	margin: 1px;
	min-width: calc(100% - 1px - 1px);
	/*
	border-bottom: 1px solid;
	border-color: rgba(48, 71, 100, 0.075);
	*/

	/*
	margin-left:4px;
	margin-right:4px;
	*/
	/*
	border-bottom: 1px solid #fff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.36);
	*/
	/*
	min-width:calc(314px - 4px - 4px);
	*/
	/*
	this can only be at narrow window
	otherwise it makes it incorrect heihgt on listview
	overflow: hidden;
	*/

	border-radius: var(--variable-border-radius) ;
	background: rgba(255,255,255,1.75);
	
	
}
/*
.board_list .board_cover  {
	margin:4px 4px 0px 4px;

	margin:4px 4px 1px 4px;
}
*/


.board_cover_cntnr {
	padding: 13px 11px 13px 11px;
	/*
    margin:2px 0px 2px 0px;
	*/
	/*
    border-radius: var(--variable-border-radius);
	*/
	/*
	box-shadow: 0 1px 1px rgba(7,25,40,0.03),  0px 2px 2px rgba(7,25,40,0.02);
	*/
}

.board_col_btns .btn8 ,
.board_cover_cntnr .btn8 {
	border-color:transparent;
}
.board_compact .scroll_menu ,
.board_list .scroll_menu {
	/*
	this messes up buttons for the very first list
	margin-top: -1px;
	*/
	
	/*
	display: block;
	*/
	/*
    padding-bottom: 1px;
	*/
    /* padding-right: 14px; */
	/*   
	 margin-bottom: 1px;
	*/
    /* margin-bottom: 8px; */
    /* margin: 4px; */
}
.list_item_side_menu {
	margin-left:auto;
	width: 100%;
	max-width:314px;
	box-sizing: border-box;
	margin-bottom:12px;
	/*
	background: var(--bg-color-grey);
	*/
	padding:2px;
	border-radius: var(--main-border-radius) ;
	border: 1px solid;
	border-color:  rgba(233, 236, 238, 1);

	position:relative;
}

.list_item_side_menu > .divider {
	/*
	display: none;
	*/
	margin-top:2px;
	margin-bottom:2px
}
.list_item_side_menu > .divider ~ .divider {
	display: block;
	margin-top:2px;
	margin-bottom:2px
}


/** refer to
https://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class
**/





.cover_board_list_options {
	display:none;
	

	/*
	min-height: 60px;
	*/
    box-sizing: border-box;
	/*
	margin-bottom:-1px;
	*/
	/*
	padding: 0px 16px;

	width: fit-content;
	
	border-top:1px solid;
	
	border-color: rgba(48, 71, 100, 0.075);
	*/

	/*
		this looks bad when window is made wider than content by the user
		without fit-content, it will only be screen-wide
		and if content is wider than screen, going to look weird when scrolled horizontally
		therefore opting for min-width which seems to work in all cases
	width: fit-content;
	*/
	min-width: fit-content;


	/*
	padding: 0px 1px;
	*/
    margin:0px 1px 1px 1px;
	
	border:1px solid transparent;
	
    background: rgba(255,255,255,1.75);
    border-radius: var(--variable-border-radius);
	/*
    margin: 0px 0px;
	*/
	
}
.board_list .cover_board_list_options {
	display:flex;

	
	/*
	width:fit-content;
	*/
}
.cover_board_list_options .switcher_cntnr ,
.cover_board_list_options .hierarchy_btn_cntnr {
	display:none;
}
/*
.cover_board_list_options .btn_dd {
	padding:7px 12px;
}
*/
/*
.window_el_mltpl .cover_board_list_options {
	margin:1px 0px;
}
*/

.cover_board_list_options .param_name {
	color:#000;
}.cover_board_list_options .param_page {
	color:#048ad9;
}

.width10 ,
.width10_3 {
	overflow:hidden;
}

.board_list .width10_3 {
	display:none;
}






.btn_select {
	width: 28px;
    height: 28px;
    background: #fff;
	border-radius: var(--main-border-radius);
    z-index: 2;
	cursor:pointer;
}
.board_list .btn_select {
	right:0px;
    top:-5px;
	display:flex;
}
.list_item:hover .btn_select {
	display:flex;
}
.btn_select.selected {
	background:#048ad9;
	color:#fff;
}



/*
.headline_menu_right .board_col_head {
	 
   
   margin-top: 4px;
   display: none;
}
*/

.headline_menu_right .scroll_menu {
	/*
	this breaks list view inside headline_menu_right
	overflow-y:auto;
	*/
	/*
	margin-bottom: -4px;
	*/
}




.content_activity .list_item {
	
    margin: 8px 8px 0px 8px;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 0px;
    /* box-shadow: 0 0px 1px rgba(7,25,40,0.08), 0 1px 1px rgba(7,25,40,0.05), 0 1px 2px rgba(7,25,40,0.03); */
}



.list_simplified_btn {
	display:none;
}

.headline_menu_ins .list_item:not(:first-child) .list_simplified_btn {
	display:block;
}


.btn_drag {
	cursor:grab;
}
.drop_target ,
.drop_target_hover ,
.drop_target_hover_after ,
.drop_target_hover_top ,
.drop_target_hover_btm ,
.list_move_target_overlay {
	
	display:none;

}
.drop_target_highlight.drop_target_bg ,
.drop_target_highlight > .drop_target_bg {
	display:block;
	background: rgba(4, 140, 217, 0.08);
	border-color: rgba(4, 140, 217, 0.6);
	z-index:10;
}
.drop_target_highlight > .drop_target {
	display:block;
}
/*
.drop_target_highlight {
	border:1px solid red;
}
*/

.reorder .j_item_wrap:hover .drop_target_highlight .drop_target_hover ,
.reorder  .drop_target_highlight.top .drop_target_hover_top ,
.reorder  .drop_target_highlight.btm .drop_target_hover_btm ,
.reorder .j_item_wrap:hover .drop_target_highlight .list_move_target_overlay {
	display:block;
}

.board_hierarchy .list_drop_target {
	display: none;
}
.list_move_target {
	display: none;
	
	width: 100%; 
    height: 4px;
    background: rgba(4, 140, 217, 0.6);
    z-index: 5;
    box-sizing: border-box;
    border-radius: 2px;


}
.quick_menu .list_move_target {
	margin: 0px;
}
.list_move_target_top .list_move_target {
	position: absolute;
	top:-2px;
}
.list_move_target_btm .list_move_target {
	position: absolute;
	bottom:-2px;
}

.list_move_target_top:hover .list_move_target ,
.list_move_target_btm:hover .list_move_target {
	display: block;
}

/*
.list_move_target {
	height:10px !important;
}
*/
.item_wrap_task_drop_target  {
	position: absolute;
	top:0px;
	right: 0px;

	/* 
		can't apply this
		it makes this item extended on the whole task in list mode
		and covers rest on the task btns
	*/
	/*
	bottom:0px;
	*/

	
}
.chip_cntnr .item_wrap_task_drop_target {
	position: absolute;
	top:-1px;
	right: 0px;
}
.browser_task_drop_target {
	position: absolute;
	top:1px;
	right: 0px;
}
.filters_drop_target {
	position: absolute;
	top:2px;
	right: 2px;
}
.field_btn_drop_target {
	position: absolute;
	top:-1px;
	right: 0px;
}

.board_compact .item_wrap_task_drop_target,
.board_list .item_wrap_task_drop_target {
	top:0px;
}
.board_list .item_wrap_task_drop_target {
	
	left:190px;
}

.board_hierarchy .item_wrap > .item_wrap_task_drop_target {
	display: none;
}



.task_drop_target_cntnr {
	/*
	position: absolute;
	top:0px;
	right: 0px;
	*/
	/*
	left: 50%;
    right: 50%;
	*/
    
	/*
    height: 100%;
	*/
    /* 
	height: 30px; 
	*/
	/*
	background: red;
	*/
	display:block;
	/*
	display: none;
	*/
}
.click_target_highlight.task_drop_target_cntnr {
	/*
	display:block;
	*/
}


.board_cover .task_drop_target_cntnr ,
.board_col_head .task_drop_target_cntnr {
	position: absolute;
	top: 1px;
	right: -1px;
}


.task_drop_target_btns {
	
	display: flex;
	/*
    flex-direction: column;
    flex-wrap: wrap;
	*/
    align-items: center;
    justify-content: space-between;
	height:100%;
}

.task_drop_target {
	
	border-radius: var(--main-border-radius);

	
	justify-content: center;
    align-items: center;


	box-sizing: border-box;
	
	display: none;
	
	animation: task_drop_target_appear 0.2s;
	animation-timing-function: linear;
}
@keyframes task_drop_target_appear {
	0% {
		scale:0.5;
	}
	100% {
	}
}

.click_target_highlight.task_drop_target {
	display: flex;
}
.task_drop_target .list_menu_show_btn  {
	border: 1px solid rgba(4, 140, 217, 1);
	background:#fff;
	margin:0px 2px;
	border-radius: var(--main-border-radius);

	width: 34px;
	height:34px;
	box-sizing: border-box;
}
/*
.task_drop_target .list_menu_show_btn_width  {
	border: 1px solid rgba(4, 140, 217, 1);
	background:#fff;
	margin:2px;
	border-radius: var(--main-border-radius);

	padding:4px;
}
*/
/*
.task_drop_target:hover .list_menu_show_btn_width ,
*/
.task_drop_target:hover .list_menu_show_btn {
	background:var(--bg-color-grey-hover);
	background:var(--bg-color-grey-hover);
}
/*
.j_hierarchy > .relative > .drop_target_hover  {
	display:block;
}
*/
.j_hierarchy.drop_target_highlight:hover > .relative > .drop_target_hover  {
	display:block;
}
.drop_target_hover:hover  {
	display:block;
}
.hh:hover .drop_target_highlight.drop_target_hover_after  {
	display:block;
}


.drop_target_hover:hover  .list_move_target {
	
	background: rgba(4, 138, 217, 0.50);
}

.quick_menu .drop_target_highlight:hover .drop_target_hover {
	display:block;
}
.drop_targets .drop_target_highlight:hover .drop_target_hover {
	display:block;
}


.drop_target_bg {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    border-radius: inherit;
	/*
	margin: -1px;
	*/
    border: 1px dashed transparent;
	display:none;
	
	z-index:-1;
	transition-property:background-color, border-color;
    transition-duration:.2s;
    transition-timing-function:linear;
    transition-delay:0s;
}

.drag_elem {
	z-index:200;
	position:absolute;
	
	box-shadow:0 2px 6px rgba(7,25,40,0.29), 0 3px 9px rgba(7,25,40,0.45);
	
	background-color:rgba(4, 140, 217, 1);
	color:white !important;
	font-weight:500;
	width:auto;
	margin:0px;
	padding:12px;
	line-height:13px;
	font-size:13px;
	border-radius: var(--main-border-radius);
	font-weight:500;
}


.drag_elem_text_override {
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
}




.quick_menu_target {
	padding:4px 0px 4px 0px;
	position:relative;
	margin-bottom:8px;
	box-sizing:border-box;
	border-radius: var(--main-border-radius);
}


.btn_dd {
	padding:6px 12px;
}
.selected .btn_dd {
	
	border-color:#048ad9;
}
.views_menu_main .btn_dd {
	padding:8px 12px;
}
/*
.drop_down_menu .btn4 ,
.drop_down_menu .btn_sort ,
.profile_side .btn4 ,
.drop_down_menu .btn {
	margin: 0px;
	padding: 8px 16px 8px 16px;
	text-align:left;
}
*/
.btn_dd:hover ,
.drop_down_menu .btn4:hover ,
.drop_down_menu .btn_sort:hover  ,
.profile_side .btn4:hover ,
.drop_down_menu .btn:hover {
	
	
	color: rgba(0, 0, 0, 1);

	

	background:var(--bg-color-grey-hover);
}
.disabled .btn_dd:hover {
	background: initial;
	color: rgba(60,79,103,.35);
	cursor:default;
}

.tutorial_menu ,
.drop_down_menu {
	z-index:200;
	position:absolute;
	position:fixed;
	
	
	min-width: 250px;
	max-width: 300px;
	/*
    max-width: 100%;
	*/
	
	
	
	
	
	
	box-sizing: border-box;

	
	
	/*
	this makes scroll div appear on top of any childmenu
	overflow-y: auto;
	*/
	
	
	/*
	padding:8px 0px;
	*/
	

	/* 
		1px so there's a border between headline and a menu
		helps border-radiuses to not look weird
	*/
	max-height: calc(var(--vh, 1vh) * 100 - var(--headline-height) - 1px);
	/*
	height: calc(var(--vh, 1vh) * 100);
	*/
}
.mobile.tutorial_menu ,
.mobile.drop_down_menu {
	min-width: 100vw;
	max-width: 100vw;

	bottom:0px;
	left:0px;

	/*
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	*/
	

	margin: 0px;


	
}
.tutorial_menu {
	background:#fff;
	border-radius: var(--main-border-radius);
	box-shadow: 0 1px 3px rgba(7,25,40,0.30), 0 2px 5px rgba(7,25,40,0.20);
}



.mobile .drop_down_shade {
	
	width: 100vw;
	height:100vh;
	
	position: fixed;
	z-index:-1;
	
	background-color: rgba(0, 0, 0, 0.4);

	top:0px;
    left: 0px;
	bottom:0px;

	animation: shade_appear 0.4s;
	animation-timing-function: linear;
}
@keyframes shade_appear {
	0% {
		opacity:0;
	}
	100% {
		
	}
}
.mobile.closing .drop_down_shade {
	animation: shade_disappear 0.4s;
	animation-timing-function: linear;
}
@keyframes shade_disappear {
	0% {
		
	}
	100% {
		opacity:0;
	}
}

.j_drop_down_menu {



	overflow-y:auto;
	overflow-x: hidden;
	max-height:inherit;
	padding: 2px;
    box-sizing: border-box;

	background: rgba(250, 251, 252, 1);
	border-radius: var(--main-border-radius);

	/* we want overflow-y auto for scrolling when menu is larget than screen*/
	/*
	overflow: hidden;
	*/

	box-shadow:0 2px 6px rgba(7,25,40,0.29), 0 3px 9px rgba(7,25,40,0.45);
	box-shadow: 0 1px 3px rgba(7,25,40,0.20), 0 2px 5px rgba(7,25,40,0.20);
	
	box-shadow: 0 1px 3px rgba(7,25,40,0.30), 0 2px 5px rgba(7,25,40,0.20);
}
.mobile .j_drop_down_menu {
	padding-bottom: 8px;

	animation:quick_add_input_cntnr_open 0.4s;
	animation-timing-function: linear;

	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}
.mobile.closing .j_drop_down_menu {
	animation:quick_add_input_cntnr_close 0.4s;
	animation-timing-function: linear;
}


.closing .j_drop_down_menu {
	animation:closing_plchdr 0.01s;
	animation-timing-function: linear;
}
@keyframes closing_plchdr {
	0% {

	}
	100% {

	}
}



.drop_down_search {
	position:absolute;
	top:6px !important;
	right:auto !important;
	width:100%;
	border-radius: var(--main-border-radius);
}
.main_search_btn {
	background: rgba(240, 243, 245, 0.35);
	background-color: var(--bg-color-grey);
	padding: 7px 14px ;
    cursor: pointer;
    z-index: 108;
    position: relative;
	border-radius: var(--main-border-radius);
	font-size:13px;
	margin-left:1px;
	margin-right:1px;
	margin-left:0px;
	margin-right:0px;
}
.j_search_menu_main2  {
	min-width:300px;
    max-width: 614px;
    box-sizing: border-box;
    margin: auto;
}

.secondary_search_btn {
	display:none;
}
@media screen and (max-width: 800px) {
	/*
	value of 800px ensures the search field is never below the left menu
	or if there's a left headline menu placeholder, then this ensures search field 
	gets hidden when the rest of screen is not wide enough to fit 
	*/
	
	.main_search_btn_menu {
		display: none;
	}
	.secondary_search_btn {
		display:flex;
	}
}

.tutorial_menu {
	animation: tutorial_appear 0.1s;
	animation-timing-function: linear;
}
@keyframes tutorial_appear {
	0% {
		transform: scale(0.2);
		opacity:0.5;
	}
	100% {
		transform: scale(1);
		opacity:1;
	}
}




.top_fall2 ,
.search_menu_main {
	/*
		do not set actual width
		just min-width
		otherwise it will be 250px wide on mobile - too narrow
	*/
	min-width:250px;
	max-width:100%;
}
.search_placeholder {
	padding-top:42px;
	padding-bottom:42px;
	text-align: center;
	font-size:13px;
}





.image_drop_zone {
	position: absolute;
	top:0px;
	bottom:0px;
	right:0px;
	left:0px;

	background: white;

	border-radius: var(--main-border-radius);
	padding:4px;

	/*
		should be more than one, so images do not go on top
	*/
	z-index:5;

	display: none;
}
.image_drop_zone::after {
	content: 'Drop files here';
    display: block;
    border-radius: inherit;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    border: 2px dashed rgba(4, 140, 217, 1);
    align-items: center;
    display: flex;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    color: rgba(4, 140, 217, 1);
}
.image_drop_zones_activate .image_drop_zone {
	display: block;
}
.files_param_plchldr {
	display: none;
}
.image_drop_zones_activate .files_param_plchldr {
	display: block;
}


/*
.hourglass {
	font-size: 2em;
  }
  
  
  .hourglass {
	width: 16px;
	height: 20px;
	border-style: solid;
	border-width: 10px 6px;
	border-color: var(--text-color-grey) transparent;
	border-radius: 4px;
	position: relative;
	animation: spin 5s linear infinite;
	box-sizing: border-box;
  }
	
  .hourglass:before {
	content: "";
	height: 24px;
	border-style: solid;
	border-width: 8px 4px;
	border-color: white transparent transparent;
	border-radius: 10%;
	position: absolute;
	top: -8px;
	left: -2px;
	
	box-sizing: border-box;
	
	animation: slideOut 5s linear infinite;
	
  }
  
  .hourglass:after {
	display:none;
	content: "";
	width: 8px;
	height: 24px;
	border-style: solid;
	border-width: 0px 2px;
	border-color: transparent transparent white;
	border-radius: 10%;
	position: absolute;
	top: -16px;
	left: -2px;
	
	box-sizing: border-box;
	
	animation: slideIn 5s linear infinite;
	
  }
  
 
  
  @keyframes slideOut {
	0% {
	  top: -8px;
	  border-width: 8px 4px;
	}
	90% {
	  top: 0px;
	  width: 0px;
	  border-width: 0px 0px;
	  left: 2px;
	}
	100% {
	  top: 0px;
	  width: 0;
	  border-width: 0px 0px;
	  left: 2px;
	}
  }
  @keyframes slideIn {
	0% {
	  border-width: 0px 0px;
	}
	90% {
	  border-width: 8px 4px;
	  left: -2px;
	}
	100% {
	  border-width: 8px 4px;
	  left: -2px;
	}
  }
*/

.hourglass_animate {
	animation: spin 3s linear infinite;
}
@keyframes spin {
	0% {
	  transform: rotate(0deg);
	}
	60% {
	  transform: rotate(0deg);
	}
	100% {
	  transform: rotate(180deg);
	}
  }



.clock {
	position: relative;
	height: 34px;
	width: 34px;
	/*
	background: var(--bg-color-grey);
	*/
	box-sizing: border-box;
	border-radius: 100%;
	/*
	border: 1px solid transparent;
	*/
	margin: -7px;
}
.clock .center {
	height: 3px;
	width: 3px;
	position: absolute;
	left: calc(50% - 1.5px);

	top:calc(50% - 1.5px);

	margin: auto;
	background: var(--text-color-grey);
	border-radius: 100%;
}
.your .clock .center {
	background: rgba(4, 140, 217, 1);
}
.mltpl .clock .center {
	background:#EC5C99;
}

.clock .hour {
	width: 3px;
	height: 100%;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	min-width:auto;

	animation: time 60s infinite linear;
}
.clock .hour:before {
	position: absolute;
	content: "";
	background: var(--text-color-grey);
	height: 33%;
	width: inherit;
	top: 50%;

	border-radius:0 0 100% 100%;

	left: 0px;
}
.your .clock .hour:before {
	background: rgba(4, 140, 217, 1);
}
.mltpl .clock .hour:before {
	background:#EC5C99;
}
.clock .minute {
	width: 3px;
	height: 100%;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;

	/*
	transform: rotate(180deg);
	*/

	animation: time 30s infinite linear;
}
.clock .minute:before {
	position: absolute;
	content: "";
	background: var(--text-color-grey);
	height: 43%;
	width: inherit;
	top: 50%;

	border-radius: 0 0 100% 100%;

	left: 0px;
}
.your .clock .minute:before {
	background: rgba(4, 140, 217, 1);
}
.mltpl .clock .minute:before {
	background:#EC5C99;
}

.your .clock  {
	border-color: rgba(4, 140, 217, 1);
}
.mltpl .clock  {
	border-color:#EC5C99;
}

@keyframes time {
	to {
		transform: rotate(360deg);
	}
}


/*
.clock_alternative {
	display:none;
}
.btn_task.your:hover .clock {
	display:none;
}
.btn_task.your:hover .clock_alternative {
	display:flex;
}
*/



.test_hidden {
	/*
	background:transparent !important;
	*/
	/*
	display:none !important;
	*/
	background:red;
}

.load_wrap {
	background:#fff;
	position:absolute;
	top:0px;
	right:0px;
	left:0px;
	bottom:0px;
	z-index:5;
}
.loading {
	width:24px;
	height:24px;
	
	border: 12px solid transparent; 
	border-top: 12px solid #3498db; /* Blue */
	border-radius: 50%;

	box-sizing: border-box;
	animation: spin 1s linear infinite;
}
.loaded {
	color:#048ad9;
	width:24px;
	height:24px;
	display: flex;
    justify-content: center;
    align-items: center;
	cursor:default;
}
.load , 
.load_cntnr {
	position:relative;
	z-index:5;
}



.icon_2 {
	position: absolute;
    top: 12px;
    left: 12px;
}
.icon_3 {
	position: absolute;
    top: -12px;
    left: 10px;
}

.md-block { 
   display:block !important;
}
.md-20 { 
    font-size:20px  !important; 
}
.md-4 { 
    font-size:4px !important; 
}
.md-8 { 
    font-size:8px !important; 
}
.md-11 { 
    font-size: 12px !important; 
}
.md-12 { 
    font-size: 13px !important; 
}
.md-13 { 
    font-size:13px !important; 
}
.md-14 { 
    font-size:14px !important; 
}
.md-15 { 
    font-size:15px !important; 
}
.md-16 { 
    font-size:16px !important; 
}
.md-17 { 
    font-size:17px !important; 
}
.md-18 { 
    font-size:18px  !important; 
}
.md-24 { 
    font-size:24px  !important; 
}
.md-36 { 
    font-size:36px  !important; 
}
.md-44 { 
    font-size:44px  !important; 
}

/* Rules for using icons as black on a light background. */
.md-blue { 
    color: rgba(4, 140, 217, 1);
}
.md-red { 
    color: rgba(244, 129, 177, 1);
}

.md-blue.md-inactive { 
    color: rgba(4, 140, 217, 0.5); 
}
.md-inherit {
    color:inherit;
}
.md-italic {
	font-style: italic;
}




.md-grey-dark{
	color:rgba(210, 219, 228, 0.75);
}
.md-grey { 
    color: rgba(91,116,147,0.3);
 
    color: var(--text-color-grey);
    transition-property:color;
	transition-duration:0.10s;
	transition-timing-function:linear;
	transition-delay:0s;
}
/*
.md-grey:hover { 
    color: rgba(4, 140, 217, 1); 
   color: rgba(0, 0, 0, 1); 
 
}
.md-grey.md-inactive:hover {
    color: rgba(91,116,147,0.3);
}
*/
.md-white { 
    color: rgba(255, 255, 255, 1); 
}
.md-black { 
    color: rgba(0, 0, 0, 1);
}







/*
.list_view .scroll_menu {
	this messes up the list view
	
	overflow-y:scroll;
}
*/



.list_move_target_overlay {
	position:absolute;
	top:0px;
	bottom:0px;
	width:100%
}
.list_move_target_top {
	position: absolute;
	top:0px;
	bottom:50%;
	width:100%;
	/*
	background:rgba(100, 200, 200, 0.15);
	*/
}
.list_move_target_btm {
	position: absolute;
	top:50%;
	bottom:0px;
	width:100%;
	/*
	background:rgba(200, 100, 200, 0.15);
	*/
}









.hierarchy_move_target {
	position:absolute;
	right:0px;

	
	bottom: 0px;
	margin:auto;
	
    background: rgba(223, 241, 251, 1);
	border: 1px solid;
	border-color: var(--border-color-grey);
	border-radius: var(--main-border-radius);
    z-index: 5;
    box-sizing: border-box;
    /* margin: 4px; */
    border-radius: var(--main-border-radius);

	width:30px;
	height:30px;
	margin-left:auto;
}
.hierarchy_path {
	text-align: right;
}

/*
.j_hierarchy_main  .hierarchy_path {
    display:none;
}

.j_hierarchy_main > .j_hierarchy > .hierarchy_path {
    display:block;
}
*/
.hierarchy_path {
    display:none;
}
/*
.hierarchy_lvl_0 .hierarchy_path {
	display:flex;
}
*/
.hierarchy_path_prev {
	border:1px solid rgba(233, 236, 238, 1);
	
	min-width: 100%;
	box-sizing: border-box;
}

.hierarchy_item .chip_task {
	background:var(--bg-color-grey);
	background:rgba(255, 255, 255, 0.36);

	background:var(--bg-color-grey);
}

/*
.hierarchy_chip_pre .chip_task {
	background:rgba(233, 236, 238, 0.5);
}
*/
.hierarchy_chip_pre .chip_text {
	color: var(--text-color-grey);

}

.hierarchy_chip_cur .chip_task {
	background: var(--bg-color-grey);
	background: rgba(255, 255, 255, 1);


	background: rgba(233, 236, 238, 0);
	/*
    border-color: rgba(255, 255, 255, 1);
	*/
	border-color: var(--border-color-grey);
	/*
	font-weight: 500;
	*/
}
/*
.hierarchy_element_move_plchdr {
	height:30px;
	flex-grow: 1;
	background:grey;
}
*/
.hierarchy_element_move_plchdr .chip_task {
	background-color: #e6e9eb;
}
.hierarchy_element_move_hidden {
	height:0px;
	overflow: hidden;
}


.hierarchy .chip_cntnr   {
	margin:0px;

	
}


.hierarchy_item .chip_cntnr  {
	margin:0px;

	/* 
		margin is bottom because top margin messes up position of target_drop_btns 
	*/
	margin-top: 1px;


	
}
/*
.hierarchy_chip_cur .chip_cntnr{
	margin-top: 0px;
}
*/


.hierarchy_main_cntnr .chip_task {
	background:rgba(255, 255, 255, 0.76);
}
.hierarchy_main_cntnr .hierarchy_chip_cur .chip_task  {
	background:rgba(255, 255, 255, 1);
}

.chip:hover ,
.chip_task:hover  {
	background:var(--bg-color-grey-hover); 
}


.pos_updated {
	background:yellow;
}
/*
.hierarchy_path {
    display:none;
}

 .j_hierarchy > .hierarchy_path {
    display:block;
}

/*
.list_move_target_line {
	width:100%;
	height:2px;
	background:rgba(4, 138, 217, 1);
}*/
/*
.list_drop_target {
	display:none;
	
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
}
.list_view .list_drop_target{
	display:block;
}

.list_drop_target.after {
	left:60%;
	bottom:1px;
	top:auto;
}
.list_item_combined .list_drop_target {
	display:block;
}
*/

.list_item.list_selected .cntnr_0 {
	background:rgba(4, 138, 217, 0.05);
}

.elem_selected {
	background:rgba(4, 138, 217, 0.15) !important;
}


.br_0 {
	border-radius:0px;
}
.br_l0 {
	border-top-left-radius:0px;
	border-bottom-left-radius:0px;
}
.br_r0 {
	border-top-right-radius:0px;
	border-bottom-right-radius:0px;
}
.br_std ,
.br_r6 {
	border-radius: var(--main-border-radius);
}
.br_100px {
	border-radius:100px;
}

.br_t0 {
	border-top-left-radius:0px;
	border-top-right-radius:0px;
}
.br_b0 {
	border-bottom-left-radius:0px;
	border-bottom-right-radius:0px;
}
.br_b6 {
	border-bottom-left-radius:6px;
	border-bottom-right-radius:6px;
}


.text_justify {
	text-align:justify;
}
.border_transp {
	border-color:transparent;
}
.border_transp:hover {
	border-color:transparent !important;
}

.c1i {
    margin-left:-1px;
    margin-right:-1px;
}
.c2i {
    margin-left:-2px;
    margin-right:-2px;
}
.c2 {
    padding-left:2px;
    padding-right:2px;
}
.c4 {
    padding-left:4px;
    padding-right:4px;
}
.c4i {
    margin-left:-4px;
    margin-right:-4px;
}
.c5 {
    padding-left:5px;
    padding-right:5px;
}
.c5itb {
    margin-top:-5px;
    margin-bottom:-5px;
}
.c0 {
    padding-right:0px;
    padding-left:0px;
}
.c0tb {
    padding-top:0px;
    padding-bottom:0px;
}
.c2tb {
    padding-top:2px;
    padding-bottom:2px;
}
.c4tb {
    padding-top:4px;
    padding-bottom:4px;
}

.c5tb {
    padding-top:5px;
    padding-bottom:5px;
}
.c6tb {
    padding-top:6px;
    padding-bottom:6px;
}
.c7tb {
    padding-top:7px;
    padding-bottom:7px;
}
.c8b {
    padding-bottom:8px;
}
.c8tb {
    padding-top:8px;
    padding-bottom:8px;
}
.c8 {
    padding-left:8px !important;
    padding-right:8px !important;
}
.c8l {
    padding-left:8px;
}
.c6 {
    padding-left:6px;
    padding-right:6px;
}
.c6i {
    margin-left:-6px;
    margin-right:-6px;
}
.c7i {
    margin-left:-7px;
    margin-right:-7px;
}
.c8i {
    margin-left:-8px;
    margin-right:-8px;
}
.c9i {
    margin-left:-9px;
    margin-right:-9px;
}

.c8it {
    margin-top:-9px !important;
}
.c10 {
    padding-left:10px;
    padding-right:10px;
}
.c10i {
    margin-left:-10px;
    margin-right:-10px;
}
.c12i {
    margin-left:-12px;
    margin-right:-12px;
}
.c16tb {
    padding-top:16px;
    padding-bottom:16px;
}
.c14 {
    padding-left:14px;
    padding-right:14px;
}
.c16 {
    padding-left:16px;
    padding-right:16px;
}
.c16i {
    margin-left:-16px;
    margin-right:-16px;
}
.c4li {
    margin-left:-4px !important;
}
.c20 {
    padding-left:20px;
    padding-right:20px;
}
.c20i {
    margin-left:-20px;
    margin-right:-20px;
}
.c32i {
    margin-left:-32px;
    margin-right:-32px;
}


.c12 {
	padding-left:12px;
    padding-right:12px;
}
.c12tb {
	padding-top:12px;
    padding-bottom:12px;
}
.c12i {
    margin-left:-12px;
    margin-right:-12px;
}
.mr_auto {
	margin-right:auto;
}
.ml_auto {
	margin-left:auto;
}
.ml82 {
    margin-left:82px;
}
.ml1 {
	margin-left:1px;
}
.ml1i {
	margin-left:-1px;
}
.ml2i {
	margin-left:-2px;
}
.ml3i {
	margin-left:-3px;
}
.ml2 {
    margin-left:2px;
}
.ml4 {
    margin-left:4px;
}
.ml4i {
    margin-left:-4px;
}
.ml5i {
    margin-left:-5px;
}
.ml0 {
    margin-left:0px;
}
.ml6 {
    margin-left:6px;
}
.ml6i {
    margin-left:-6px;
}
.ml7i {
    margin-left:-7px;
}
.ml8 {
    margin-left:8px;
}
.ml8i {
    margin-left:-8px;
}
.ml10 {
    margin-left:10px;
}
.ml10i {
    margin-left:-10px;
}
.ml12 {
    margin-left:12px;
}
.ml11 {
    margin-left:11px;
}
.ml14 {
    margin-left:14px !important;
}
.ml15 {
    margin-left:15px !important;
}
.ml16 {
    margin-left:16px !important;
}
.ml12i {
    margin-left:-12px;
}
.ml16i {
    margin-left:-16px;
}
.ml20 {
    margin-left:20px;
}
.ml20i {
    margin-left:-20px;
}
.ml32 {
    margin-left:32px;
}
.ml36 {
    margin-left:36px;
}
.ml38 {
    margin-left:38px;
}
.ml44 {
    margin-left:42px;
}
.ml40i {
    margin-left:-38px;
}
.mr0 {
    margin-right:0px;
}
.mr1 {
	margin-right:1px;
}
.mr1i {
	margin-right:-1px;
}
.mr2 {
    margin-right:2px;
}
.mr2i {
    margin-right:-2px;
}
.mr3 {
    margin-right:3px;
}
.mr4 {
    margin-right:4px;
}
.mr4i {
    margin-right:-4px;
}
.mr5i {
    margin-right:-5px;
}
.mr6 {
    margin-right:6px;
}
.mr10i {
    margin-right:-10px;
}
.mr_scroll {
    margin-right:0px !important;
}
.mr16 {
    margin-right:16px;
}
.mr18 {
    margin-right:18px;
}
.mr6i {
    margin-right:-6px;
}
.mr8 {
    margin-right:8px;
}
.mr8i {
    margin-right:-8px;
}
.mr11i {
    margin-right:-11px;
}
.mr12 {
    margin-right:12px;
}
.mr12i {
    margin-right:-12px;
}
.mr14i {
    margin-right:-14px;
}
.mr16i {
    margin-right:-16px;
}

.mt-auto {
	margin-top: auto;
}
.mb-auto {
	margin-bottom: auto;
}
.mt0 {
    margin-top:0px;
}
.mb0 {
    margin-bottom:0px;
}
.mt1 {
    margin-top:1px;
}
.mt2 {
    margin-top:2px;
}
.mt3 {
    margin-top:3px;
}
.mt1i {
    margin-top:-1px !important;
}
.mb1 {
	margin-bottom:1px;
}
.mb1i {
	margin-bottom:-1px !important;
}
.mt2i {
    margin-top:-2px !important;
}
.mb2 {
    margin-bottom:2px;
}
.mb2i {
    margin-bottom:-2px !important;
}
.mt6{
    margin-top:6px;
}
.mt3i {
    margin-top:-3px;
}
.mb3i {
    margin-bottom:-3px;
}
.mt4 {
    margin-top:4px ;
}
.mt4i {
    margin-top:-4px !important;
}
.mt5i {
    margin-top:-5px ;
}
.mb4 {
    margin-bottom:4px !important;
}
.mb4i {
    margin-bottom:-4px;
}
.mb5i {
    margin-bottom:-5px;
}
.mt8i {
    margin-top:-8px;
}
.mb6 {
    margin-bottom:6px !important;
}
.mt6i {
    margin-top:-6px !important;
}
.mt7i {
    margin-top:-7px !important;
}
.mb6i {
    margin-bottom:-6px;
}
.mb7i {
    margin-bottom:-7px;
}
.mt7i {
    margin-top:-7px !important;
}
.mb7i {
    margin-bottom:-7px;
}
.mb8 {
    margin-bottom:8px !important;
}
.mb8i {
    margin-bottom:-8px;
}
.mt7 {
    margin-top:7px !important;
}
.mt8 {
    margin-top:8px !important;
}
.mb10 {
    margin-bottom:10px !important;
}
.mt10 {
    margin-top:10px;
}
.mt10i {
    margin-top:-10px;
}
.mb10i {
    margin-bottom:-10px;
}
.mt12 {
    margin-top:12px !important;
}
.mb12 {
    margin-bottom:12px !important;
}
.mb12-m4 {
    margin-bottom:8px !important;
}
.mt12i {
    margin-top:-12px;
}
.mb12i {
    margin-bottom:-12px;
}
.mt9i {
    margin-top:-9px;
}
.mt16 {
    margin-top:16px !important;
}
.mb15i {
    margin-bottom:-15px !important;
}
.mt16i {
    margin-top:-16px;
}
.mb16 {
    margin-bottom:16px !important;
}
.mb16i {
    margin-bottom:-16px;
}
.mt20 {
    margin-top:20px !important;
}
.mb20 {
    margin-bottom:20px !important;
}
.mt24 {
    margin-top:24px !important;
}
.mt32 {
    margin-top:32px;
}
.mt40 {
    margin-top:38px;
}
.mt80 {
    margin-top:80px;
}
.mt20i {
    margin-top:-20px;
}
.mb20 {
    margin-bottom:20px;
}
.mb20i {
    margin-bottom:-20px;
}
.mb24 {
    margin-bottom:24px;
}
.mb24i {
    margin-bottom:-24px;
}
.mr20 {
    margin-right:20px;
}
.mr20i {
    margin-right:-20px;
}
.mt24 {
    margin-top:24px;
}
.mt24i {
    margin-top:-24px;
}
.capitalize {
	text-transform:capitalize;
}
.uppercase {
	text-transform:uppercase;
}
.lowercase {
	text-transform:lowercase;
}
.text_tr_none {
	text-transform:none;
}
.transparent {
	background:transparent;
}

/*
.window_el_mltpl .scrolled {
	border-top: 1px solid;
	border-color: rgba(48, 71, 100, 0.075);
}
*/
.scrolled {
	border-top: 1px solid;
	border-color: rgba(48, 71, 100, 0.075);
	border-color: rgba(255, 255, 255, 0.5);
}
.headline_menu_ins.scrolled ,
.list_item .scrolled {
	border-color: rgba(48, 71, 100, 0.075);
}
.visible_mobile_block {
	display: none !important;
}




.test {
	background:#EC5C99 !important;
	border-color:#EC5C99 !important;
}

.temp {
	opacity:0.5;
}