:root{
	--bgcol: #e5e8e8;	/*SETTING css_bgcol color "background_color" (?<REGEX_CSS>(?<NAME>--bgcol)\: (?<VALUE>\#[0-9A-Fa-f]{6});)*/
	--bgcol2: #4a4a4a; 	/*SETTING css_bgcol2 color "background_color_2" (?<REGEX_CSS>(?<NAME>--bgcol2)\: (?<VALUE>\#[0-9A-Fa-f]{6})(!important)?;)*/
	--menucol: #4a4a4a; 	/*SETTING css_menucol color "menu_color" (?<REGEX_CSS>(?<NAME>--menucol)\: (?<VALUE>\#[0-9A-Fa-f]{6})(!important)?;)*/
	--selcol: #0000cd; 	/*SETTING css_selcol color "selection_color" (?<REGEX_CSS>(?<NAME>--selcol)\: (?<VALUE>\#[0-9A-Fa-f]{6})(!important)?;)*/
	--fsize: 14px;		/*SETTING css_mainfont text "font_size" (?<REGEX_CSS>(?<NAME>--fsize)\: (?<VALUE>[0-9]{1,2})(?<MU>(px|em|rem));)*/
}
/* the top level container of the page */
.mc_top_cont{
	height: 100%;
}

.mc_elem_sel{
	font-weight: bold;
}

/* TABLE */
table{
	background-color: var(--bgcol);	
	font-size: var(--fsize);
}

td, th{
	padding-top: 2px; /* TODO: check if nec */
	padding-bottom: 2px;
}


/* 14.12.21 had to disactivate while affects filter fields in active tab; need detailize this somehow */
.activeXXX td{
	color: white;
	background-color: #C0CEDA !important;
}

.td-image{
	//padding-top: 2 !important;
	//padding-bottom: 2 !important;
}
/*  PAGE */
/* DEF REMHEADER move in one line menu left header right header (MS version) */
#heading{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background-color: var(--menucol);	
	padding: 5px;
}
#heading div{
	color: white;   
	font: 16px arial, sans-serif;
	background-color: var(--menucol);	
}
#heading_right{
	padding: 5px 50px 5px 0px;
	text-align: right;
	display: flex; flex-direction: row; justify-content: center;
	margin-left: 10px;
}

#heading_left{
	padding: 5px 0px 5px 50px;
	text-align:left;
	/*float: left;  display: inline; REMHEADER */
	font-weight: bold !important;
	/*color: var(--bgcol2)!important;*/
	font-size: 2.5em!important;
}
.mc_help_btn{
	font-size: 20px;
    color: white;
    padding: 5px 10px 0px 0px;
	text-transform: uppercase;
	text-decoration: underline;
}
.mc_table_control{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding-bottom: 15px;
}

body {
	background-color: var(--bgcol);	
	font-size: var(--fsize);
}
.mc_bg_logo{
	background-color: var(--bgcol);	
	/*background-image: url(../img/logo_bg.png);  TODO: remains visible in mail */
	background-position: center;
	background-repeat: no-repeat;
}
.well{
	padding: 8px !important;
}
.ttc_outer_div{
	margin-top:15;
	margin-left:15;
	margin-right:15;
	//height: 100%;
	overflow: auto;
	max-width:1000;
}

/*it's clearfix instead of "overflow: auto"; kind of works better, relovels problem with scrollbars/margins; donno how it works*/
.ttc_manage_div::after{ 
	content: "";
	clear: both;
	display: table;
}
.ttc_manage_div{
	border-style: solid;
	border-width: 0px;
	padding: 10px !important;
	background-color: MediumAquaMarine;
	display: flex;  /* new 8.02.19 */
}
.ttc_manage_div > div{
	margin-bottom: 0px;
	margin-left: 20px;
}
.ttc_manage_div > label{
	width: 100px;
	margin-right: 20px;
}
.ttc_section_title{
	font: 20px arial, sans-serif;
	font-weight: bold;
	color: navy;
}

/*.fa-user, .fa-sign-out-alt { font-size: 23px; }   donno what it was for*/

.st_caption{ /* TODO: check */
	padding-right: 5px;
	color: steelblue;
	font-weight: bolder !important;
}


/*  UTILS */

/* css to center inner elements
 NOTE: to show a div in center of screen - need have an outer (invisible) div which occupies whole screen (and has .center-screen-flex); the div to be centered is inside
*/
.center-screen-flex {
  display: flex;
  flex-direction: column;
  justify-content: center; /* flex: pack items around the center */
  align-items: center;
  text-align: center;
}
.mc_full_screen{
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 1000;
}

.overlay_div{
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 100;
	display: none;
	background-color: inherit;
	padding: 20px;
}

.bg_cover {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(105,105,105,.8);
    z-index: -1;
}

.mc_puh_div{
	height: 20px;
	background-color: yellow;
	color: red;
	font-weight: bold;
	padding-right: 10px;
}
.mc_puh_msg{
	text-align: center;
}
.mc_puh_close{
	margin: 4px;
}

/* FIXHEAD */
.fh-table{
	display: flex;
	flex-flow: column;
	align-items: flex-start;
}
.fh-body{
	width: 100%;
	margin-bottom: 0px!important; /* to cancel 20px margin from table.less which causes gap under table */
}
/*prevent wrapping of header*/
.fh-header th span{
	white-space: nowrap;
/*	white-space: -moz-pre-wrap; /* Firefox */
/*	white-space: -o-pre-wrap; /* Opera */
/*	white-space: pre-wrap; /* Chrome */ 
}
/* could be better to wrap also table data in a span, but need make some corrections to make existing code keep working (insert_images) */
.fh-header th span{
	padding-left: 5px;
}
.fh-body td{
	padding-left: 5px;
	padding-bottom: 0px ! important;
}

/*  PAGER  */
.uc_counter input{
	width: 2.5em;
	text-align: center;
	border: none;
	background-color: inherit;
	border-radius: 0.2em;
}
.uc_counter select{	background-color: inherit; }
.uc_counter option{	background-color: /*inherit TODO: not works*/ var(--bgcol2); }

.uc_counter i{
	cursor: pointer;
	margin-left: 0.5em;
	margin-right: 0.5em;
}
.uc_counter{
	padding: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white; /* TODO: use same var here and in mc_section_header*/
	font-size: var(--fsize);
}
.uc_counter.uc_value:hover{ background-color: #a0a0a0! important;}

/* DIVIN */
#tt_info_div{
	left: 50%;
	top: 100px;
	width: 200px;
	height: 50px;
	position: absolute;
	z-index: 10000;
	background-color: yellow;
	padding: 10px;
	border-radius: 10px;
}



/*  QUICKFIX TODO: */
#cssmenu{
	margin: 0px ! important;
}


/*  TODO: scarecly used, mostly of archive */
/* to make sms look like link */
.ttc_link{
	cursor:pointer;
	color:blue;
	text-decoration:underline;
}
.ttc_link:hover {
	text-decoration:none;
	text-shadow: 1px 1px 1px #555;
}
.ttc_info{
	font: 18px arial, sans-serif;
	font-weight: bold;
	padding: 5px 0px 15px 0px;
}
.ttc_bottom{
	position: fixed;
	bottom: 50;
	right: 50;
}
.ttc_panel{
	background-color: #E8F0f5;
	margin-bottom: 20px;
}

/* used also in tt */
.mc_bg_second{
	background-color: var(--bgcol2)!important;
}
.tc_thumbs_form .fh-header{
	background-color: var(--bgcol2)!important;
}

/* SPACE */
#tt_ws_users{
	width: 100%;
	padding: 20px 5px 5px 5px;
}
#tt_ws_users > div{
	padding: 5px;
}
.mc_ws_user{
	font-size: inherit;
	margin-left: 20px;
	margin-right: 20px;
}
.mc_ws_user_email{
	width: 100%; /* TODO: quickfix to stretch to full width*/
}

/* LISTS */
#tt_ok_btn_div{
	text-align: center;
	padding: 20px;
}

.mc_email{
	display: flex; /* TODO: a quickfix; otherwise shown on several lines*/
}
.mc_inner{
	margin-left: 15px;
}
.mc_email{
	padding-bottom: 5px;
}
.mc_email > *{
	margin-right: 5px;
}
#tt_thumbs_section{
	padding: 20px;
}
#tt_preview_body{
	text-align: center;
	padding-top: 20px;
}
/* REDI */
#mi_all_ws_users_div, #mi_ws_owner_div{
	display: inline;
}
#mi_ws_header{ min-width: 300px;}
#mi_all_ws_users, #mi_ws_owner{
	padding: 3px;
	border-radius: 3px;
	color: black;
	width: 150px;
}
.mc_left{
	padding-left: 15px;
}
/* commented in LB
#mi_news input, textarea, select, .ttc_search_radio, .ttc_cb_div{
	background-color: buttonface ! important;
	border: 1px solid #ccc ! important;
}*/

/* MAIL_PARAMS TODO: mostly reapeated */
#mi_mp_div input, #mi_mp_div textarea{
	margin-bottom: 10px;
	padding: 5px;
	border-radius: 3px;
	width: 250px;
	background-color: buttonface ! important;
}
#mi_mp_users span{
	display: block;
	padding: 3px;
	color: darkblue;
	font-weight: bold;
}
#mi_mp_users{
	max-height: 200px;
	overflow-y: auto;
	text-align: left;
}

/* inbox */
#tt_ws_inbox_detail {
	background-color: inherit!important;
}
#tt_ws_inbox_detail *{
	width: 100%;
}
.mc_error{
	color: red;
}

#mi_new_ws_start_div{
	align-self: center;
	min-width: 300px;
	min-height: 500px;
}
#mi_new_ws_start_btn{
	background-color: var(--bgcol2);	
	border-radius: 10px;
	padding: 20px;
}
.tt_file_params{
	width: 100%;
}
.tt_file_params th{
	text-align: right;
}
.tt_file_params td,.tt_file_params th{
	padding: 2px 15px 2px 0px;
}
#tt_news_form {
	padding-bottom: 20px;
}
#tt_news_form td{
	padding: 2px 2px 2px 0px!important;
}
#tt_news_form textarea{ /* otherwise it has marin 0 10 10 0, donno whoe adds it, maybe select2 */
	margin: 0px;
}
.mc_exp{
	background-color: pink;
}
.mc_exp1{
	background-color: papayawhip;
}
	
/* CON_HELP */
.mc_helping *{
	cursor: help;
}
	

/* POPUPALERT */
#tt_alerts_control_div{
        position: fixed;
        right: 0;
        bottom: 0;
        z-index: 10000;
        width: 200px;
        padding: 0px 0px 0px 5px;
        height:20px;
}
#tt_alerts_div{
        position: fixed;
        right: 0px;
        bottom: 20px;
        z-index: 10000;
        width: 200px;
        max-height:70%;
        overflow: auto;
}
.ttc_alert_div{
        background-color: var(--menucol);
        color: var(--bgcol);
        /*border-radius: 5px;*/
        border-color: var(--bgcol2);
        border-width: 1px;
        border-style: solid;
        overflow-wrap: break-word;
	padding-left: 5px;
}
.ttc_alert_time{
        border-radius: 5px;
        /*background-color: BurlyWood;*/
        /*color: IndianRed;*/
        display: inline-block;
        margin: 5px;
}
.ttc_alert_msg{
	margin-right: 5px; 
}
.mc_cd{
	float: right;
	margin-left: 5px;
	margin-right: 5px;
	/*border: 1px solid black;*/
	cursor: pointer;
	/*height: 80%;*/
}

#mi_show_all_ws.active{
        border-radius: 5px;
        border-width: 1px;
        border-style: solid;
	padding: 2px;
}
/* THUMB5 */
#tt_ws_form td{white-space: nowrap;}	

#nws_name, #nws_notes{ text-transform: uppercase; } /* depe bzik */

.mc_dl_count{
	background-color: white;
	padding-left: 2px;
	padding-right: 2px;
	border-radius: 3px;
}

/*CAN_UPLOAD*/
.mc_can_upload{color: gray; margin: 5px 0px 0px 5px; }
.mc_can_upload.active{color: green;}

.mc_counter_cont{
	background-color: var(--bgcol2);	
}
.btn-primary{
	background-color: var(--bgcol2);	
}

/* MDSS */
#md_ss_body{
	background-color: var(--bgcol);	
	border-width: 15px;
	border-style: solid;
	border-color: var(--bgcol2);
	overflow: auto; /* 24.01.22 for LB */
}
/* RADIO */
.rb_item.selected{
	/*box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);*/
	background-color: blue;
}

/* TABGEN */
.mc_tab_cont{
	display: flex;
	flex-direction: column;
}
.mc_tab_header{
	display: flex;
	flex-direction: row;
	flex: 0 1 auto;
}
.mc_tab_name{
	background-color: var(--bgcol2);
    margin: 1px;
    padding: 5px;
    color: white;
}
.mc_tab_name.active{
	color: black;
	background-color: white;
	border: 1px solid #000
}
.mc_tab_tab{
	display: none;
}
.mc_tab_tab.active{
	display: block;
}

#md_ss_content_custom .mc_tab_tab{
	/* TODO: do it page size dependent */
	width: 1000px;
	height: 500px;
}

/* otherwise treeview elems shown md_ss are centered */
.mc_float_left{
	height: 100%;
    overflow: auto;
    text-align: left;
}

tr.active{
	/*border: 2px solid var(--selcol);*/
	/* box-sizing: border-box!important; or else tr gets wider and appears scrollbox .. but NOT WORKS TODO*/
	-webkit-filter: brightness(70%);
}	

/* CASS uses def mechanism of select2? to disable elems but hides them instead of disable */
.select2-container--default .select2-results__option[aria-disabled=true] {
    display: none;
}

#ms_headers_ul{
	padding: 1em;
}

/* attachments */
#ms_attachments_ul{
	padding: 1em;
}
#ms_attachments_ul > *{
	margin-top: 5px;
}
#ms_attachments_ul li{
	font-size: 1.2em;
	font-weight: bold;
	color: #641e16;
	cursor: pointer;
	background-color: #fdf2e9;
	border: 1px solid #edbb99;
	border-radius: 0.5em;
	padding: 0.2em;
}
#ms_attachments_ul li::after{
	font-family: 'Font Awesome 5 Free';
	content: "\f019";
	margin-left: 0.5em;
}
	
#mi_segr_new_user, .mc_segr_user, #mi_segr_name{ width: 250px; }
#mi_segr_edit .radio{ margin-left: 0px; } /* or else only first item has 0 margin when aligned vertically */
.mc_bold label{ font-weight: bold; }


/* DLTHUMB should correspond to similar stuff for .thumb .RES_checked in tt/styles.css */
.thumb .mc_dl_thumb{
    position: absolute;
    top: 0;
    right: 0;
    padding: 0px 5px;
    font-size: 25px;
    text-align: center;
    background-color: black;
    border-radius: 5px;
	opacity: 0.7;
}
.thumb .mc_dl_thumb::before{
	content: "\f019"; /* square not checked */
	font-weight: 900; /* NOTE: makes solid*/
	font-family: 'Font Awesome 5 Free';
	color: #aaaaaa;
	opacity: 100; /* not selected - not wisible, need it just for size */
}