:root{
	--bgcol: #e5e8e8;	/*SETTING css_bgcol color "colore sfondo" (?<REGEX_CSS>(?<NAME>--bgcol)\: (?<VALUE>\#[0-9A-Fa-f]{6});)*/
	--bgcol2: #2c5f90; 	/*SETTING css_bgcol2 color "colore sfondo 2" (?<REGEX_CSS>(?<NAME>--bgcol2)\: (?<VALUE>\#[0-9A-Fa-f]{6})(!important)?;)*/
	--menucol: #4a4a4a; 	/*SETTING css_menucol color "colore menu" (?<REGEX_CSS>(?<NAME>--menucol)\: (?<VALUE>\#[0-9A-Fa-f]{6})(!important)?;)*/
	--fsize: 12px;		/*SETTING css_mainfont text "dimensione font" (?<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;
}


.active 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;
}
#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;
}

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;
}


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

/* FIXHEAD */
.fh-table{
	display: flex;
	flex-flow: column;
	align-items: flex-start;
}
.fh-body{
	width: 100%;
}
/*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 i{
	cursor: pointer;
	margin-left: 0.5em;
	margin-right: 0.5em;
}
#tt_pager{
	padding: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #001a4d;
}
#tt_pager .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;
}
#tt_thumbs_form .fh-header{
	background-color: var(--bgcol2)!important;
}

/* SPACE */
#tt_ws_users{
	width: 100%;
	padding: 20px 5px 70px 5px; /* padding bottom is to render visible autocomplete list */
}
#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-left: 15px;
}
/* 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;
}

#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_subj, #mi_mp_body, #mi_mp_div .mc_email_input, #mi_mp_users .mc_group_list{
	margin-bottom: 10px;
	padding: 5px;
	border-radius: 3px;
	width: 200px;
	background-color: buttonface ! important;
}
#mi_mp_users span{
	display: block;
	padding: 3px;
	color: darkblue;
	font-weight: bold;
}
#mi_mp_users{
	overflow-y: auto;
	text-align: left;
}

#mi_mp_div div{
	text-align: left; /* to move sub/body to left; or else they inherit center from center-flex */
}
/* 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: Cornsilk;
        color: navy;
        border-radius: 5px;
        border-color: SteelBlue;
        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; }
.mc_can_upload.active{color: green;}
.mc_ai{margin: 5px 0px 0px 5px;}
.mc_role_worker{ color: green; }
.mc_role_client{ color: blue; }

/* PAGER */
#ws_pager_cont{
	flex: 0 1 auto;
	display: flex;
    justify-content: space-evenly;
}

/* 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: #337ab7;
    padding: 5px 10px;
    color: white;
    border-radius: 4px;
    font-size: 14px;
    color: #eee;
    border: 4px solid var(--bgcol);
	text-transform: uppercase;
}
.mc_tab_name.active{
	color: white;
    border: 4px solid var(--bgcol2);
    font-weight: bold;
}
.mc_tab_tab{
	display: none;
}
.mc_tab_tab.active{
	display: block;
}
/* DIRZIP */
.mc_dir_icon img{height: 20px; padding-right: 10px;}

.mc_btn_dl{ color: white!important; }

#mi_start_upload{
	position: absolute;
    right: 200px;
    bottom: 200px;
    font-size: 30px;
    font-weight: bold;
    padding: 20;
    border-radius: 20px;
}

.mc_out_up{
	background-color: #5cb85c!important;
}
.mc_out_up.active{
    border: 4px solid green!important;
}
/* after new tab btns format they overlap with form */
.tt_thumbs_section{
	margin-top: 10px;
}

/* tutto maiuscolo! */
th, .mc_sf_caption, label, .fileupload-buttonbar button, .fileupload-buttonbar span{ text-transform: uppercase; }

.fileupload-buttonbar button, .fileupload-buttonbar span{
	background-color: var(--menucol)!important;
	border: none;
}
.fileupload-buttonbar button:hover, .fileupload-buttonbar span:hover{
	background-color: var(--menucol)!important;
	border: none;
}
.mc_ds>*{padding: 20px;}

.mc_lili td{padding: 2px 5px 2px 5px;}
.mc_lili .fa-times{color: red;}
.mc_lili .fa-copy{color: blue;}
.mc_lili .fa-plus{color: green;}
.mc_lili button{ margin: 5px; }