:root{
--bgcol: #e5e8e8;	/*SETTING css_bgcol color "background_color" (?<REGEX_CSS>(?<NAME>--bgcol)\: (?<VALUE>\#[0-9A-Fa-f]{6});)*/
--bgcol2: #303030; 	/*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)?;)*/
--menutextcol: #bababa; 	/*SETTING css_menutextcol color "menu_text_color" (?<REGEX_CSS>(?<NAME>--menutextcol)\: (?<VALUE>\#[0-9A-Fa-f]{6})(!important)?;)*/
--menutextcol2: #bababa; 	/*SETTING css_menutextcol2 color "menu_text_color2" (?<REGEX_CSS>(?<NAME>--menutextcol2)\: (?<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: 13px;		/*SETTING css_mainfont text "font_size" (?<REGEX_CSS>(?<NAME>--fsize)\: (?<VALUE>[0-9]{1,2})(?<MU>(px|em|rem));)*/
--fsize_menu: 14px;		/*SETTING css_fsize_menu text "fsize_menu" (?<REGEX_CSS>(?<NAME>--fsize_menu)\: (?<VALUE>[0-9]{1,2})(?<MU>(px|em|rem));)*/
--fcolor: #000000; 	/*SETTING css_fcolor color "font_color" (?<REGEX_CSS>(?<NAME>--fcolor)\: (?<VALUE>\#[0-9A-Fa-f]{6})(!important)?;)*/
--fcolor2: #ffffff; 	/*SETTING css_fcolor2 color "font_color_2" (?<REGEX_CSS>(?<NAME>--fcolor2)\: (?<VALUE>\#[0-9A-Fa-f]{6})(!important)?;)*/
--mb_bg: #707070; 	/*SETTING css_mb_bg color "menu_button_background_color" (?<REGEX_CSS>(?<NAME>--mb_bg)\: (?<VALUE>\#[0-9A-Fa-f]{6})(!important)?;)*/
--mb_fg: #ffffff; 	/*SETTING css_mb_fg color "menu_button_font_color" (?<REGEX_CSS>(?<NAME>--mb_fg)\: (?<VALUE>\#[0-9A-Fa-f]{6})(!important)?;)*/
--active_col: #700000; 	/*SETTING css_active_col color "active_color" (?<REGEX_CSS>(?<NAME>--active_col)\: (?<VALUE>\#[0-9A-Fa-f]{6})(!important)?;)*/
--l0_bg: #d0d0d0; 	/*SETTING css_l0_bg color "level_0_color" (?<REGEX_CSS>(?<NAME>--l0_bg)\: (?<VALUE>\#[0-9A-Fa-f]{6})(!important)?;)*/
--l0_bg_btn: #909090; 	/*SETTING css_l0_bg_btn color "level_0_button_color" (?<REGEX_CSS>(?<NAME>--l0_bg_btn)\: (?<VALUE>\#[0-9A-Fa-f]{6})(!important)?;)*/
--l1_bg: #c0c0c0; 	/*SETTING css_l1_bg color "level_1_color" (?<REGEX_CSS>(?<NAME>--l1_bg)\: (?<VALUE>\#[0-9A-Fa-f]{6})(!important)?;)*/
--l2_bg: #b0b0b0; 	/*SETTING css_l2_bg color "level_2_color" (?<REGEX_CSS>(?<NAME>--l2_bg)\: (?<VALUE>\#[0-9A-Fa-f]{6})(!important)?;)*/
--l3_bg: #dedede; 	/*SETTING css_l3_bg color "level_3_color" (?<REGEX_CSS>(?<NAME>--l3_bg)\: (?<VALUE>\#[0-9A-Fa-f]{6})(!important)?;)*/
--treecol: #4a4a4a; 	/*SETTING css_treecol color "tree_color" (?<REGEX_CSS>(?<NAME>--treecol)\: (?<VALUE>\#[0-9A-Fa-f]{6})(!important)?;)*/
}

/* main styles (classes) based on variables */
/* MENU */
.mc_menu{
background-color: var(--menucol);
color: var(--menutextcol);
font-size: var(--fsize_menu);
}
/* DETAIL DIV used for detail row and level0*/
.mc_detail{
background-color: var(--l0_bg);
color: var(--treecol);
}
.mc_detail_button{
color: white;
background-color: var(--l0_bg_btn);
padding: 12px 10px;
border-radius: 5px;
font-size: 13px;
}
.mc_detail_button_hover{
background-color: var(--active_col);
border-radius: 5px;
border: none!important; /* TODO 1 find out why it's solid by def */
}
.mc_detail_button:hover{
}
.mc_detail_input{
border-radius: 5px;
}
.mc_left_round{
border-radius: 10px 0px 0px 10px ! important;
}
.mc_right_round{
border-radius: 0px 10px 10px 0px ! important;
}
.mc_no_round{
border-radius: 0px 0px 0px 0px ! important;
}



/* BASIC STYLES */

.mc_btn{
cursor: pointer;
}
.mc_table_control, .tt_thumbs_header{
background-color: var(--bgcol2);
height: 55px ! important;
}

.mc_table_control{
display: flex;
flex-direction: row;
/*justify-content: space-between;*/
justify-content: start; /* DEF MCR gl wanna move camp cb rite */
padding: 10px 10px;
}
.mc_table_control .lbsp_form{margin-right: 100px;} /*MCR*/

.mc_table_control .mc_btn, .mc_table_control input, .mc_table_control select, .tt_thumbs_header .mc_btn, .tt_thumbs_header input, .tt_thumbs_header select{
height: 35px ! important;
	border-radius: 5px;
}
.lbsp_form .lbsp_input, #mi_camp_div select {border: none;}

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

/* TREE */
.mc_tree_cont{
border-radius: 5px;
color: var(--fcolor);
margin: 5px 0px;
padding: 4px 0px 4px 4px;
/* no effect left: 4px;*/
}
.mc_tree_cb{
float: right;
clear: right; /* otherwise cb on next line is floated not at right but before the prev cb */
position: relative;
top: -2px;
margin-right: 5px!important; /* padding right of the cont is 0 to align all cbs vertically; need this to have rite gap */
}
.mc_tree_cont0{
	border-radius: 5px;
	color: var(--fcolor);	
	margin: 5px 0px;
    padding: 4px 0px 4px 4px;
	/* no effect left: 4px;*/
background-color: var(--l0_bg);
}
.mc_tree_cont1{
	border-radius: 5px;
	color: var(--fcolor);	
	margin: 5px 0px;
    padding: 4px 0px 4px 4px;
	/* no effect left: 4px;*/
background-color: var(--l1_bg);
}
.mc_tree_cont2{
	border-radius: 5px;
	color: var(--fcolor);	
	margin: 5px 0px;
    padding: 4px 0px 4px 4px;
	/* no effect left: 4px;*/
background-color: var(--l2_bg);
}
.mc_tree_cont3{
	border-radius: 5px;
	color: var(--fcolor);	
	margin: 5px 0px;
    padding: 4px 0px 4px 4px;
	/* no effect left: 4px;*/
background-color: var(--l3_bg);
}

.tt_explore_form{
margin: 0px!important;
	border-radius: 5px;
	color: var(--fcolor);	
	margin: 5px 0px;
    padding: 4px 0px 4px 4px;
	/* no effect left: 4px;*/
	background-color: var(--l0_bg);	
}
.mc_dir.tree-cont{
	border-radius: 5px;
	color: var(--fcolor);	
	margin: 5px 0px;
    padding: 4px 0px 4px 4px;
	/* no effect left: 4px;*/
	background-color: var(--l1_bg);	
}
.mc_dir.tree-cont .mc_dir.tree-cont{
	border-radius: 5px;
	color: var(--fcolor);	
	margin: 5px 0px;
    padding: 4px 0px 4px 4px;
	/* no effect left: 4px;*/
	background-color: var(--l2_bg);	
}
.mc_dir.tree-cont .mc_dir.tree-cont .mc_dir.tree-cont{
	border-radius: 5px;
	color: var(--fcolor);	
	margin: 5px 0px;
    padding: 4px 0px 4px 4px;
	/* no effect left: 4px;*/
	background-color: var(--l3_bg);	
}
.tree-elem{
	float: right;
	clear: right; /* otherwise cb on next line is floated not at right but before the prev cb */
	position: relative;
	top: -2px;
	margin-right: 5px!important; /* padding right of the cont is 0 to align all cbs vertically; need this to have rite gap */
}
.tt_explore_root_item{
padding-right: 10px;
border-top: 1px solid var(--l0_bg_btn);
}
LI.tree-item-dir { list-style-image: none;}
LI.tree-item-dir.active{list-style-image: none; }
LI.tree-item-file.active{list-style-image: none; }
LI.tree-item-dir.ttc_folder_opened{ list-style-image: none;}
LI.tree-item-dir.ttc_folder_opened.active{ list-style-image: none;}
LI.tree-item-file { list-style-image: none; }




/* TODO 1: lost comment: DEF REMHEADER move in one line menu left header right header (MS version) */

#heading{
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 10px;
height: 45px; /* TODO: maybe to vars*/
}
#heading_right{
padding-right: 30px;
text-align: right;
display: flex; flex-direction: row; justify-content: center;
margin-left: 10px;
}

#heading_left{
padding: 0px 0px 5px 50px;
text-align:left;
/*float: left;  display: inline; REMHEADER */
font-weight: bold !important;
/*color: var(--bgcol2)!important;*/
font-size: 2em!important;
}
/*FV*/
#heading_right span { padding:0px; margin-left:10px !important; display: inline-block; height:20px; margin-top:2px; border-radius:100px; width:20px; text-align: center; overflow: hidden; }
#heading_right span.mc_user { border-radius:0px !important; width:auto !important; padding-left:2px; height:25px; line-height:25px; margin-top:0px;  }
#heading_right span.mc_user::after { font-size:13px; margin: 0px 5px; padding:0px; }
.mc_set_lang{ height:100%; width:100%; padding:0px; margin:0px; position: relative; } /* bandiera */
#heading_right a i:hover, #heading_right span.mc_user:hover { cursor: pointer; text-shadow:0px 0px 5px #000; color:#FFF; box-shadow:none !important;}
#heading_right span:hover { cursor: pointer; box-shadow:0px 0px 5px #000; }
.ttc_popup_div{
box-shadow: 0px 0px 50px #000 !important;
padding:0px;
border-radius:7px !important;
overflow: hidden;
}
.ttc_popup_div div{
padding: 10px 15px !important;
border-bottom:1px solid #CCC;
}
.ttc_popup_div div:first-letter {text-transform:capitalize;}
.ttc_popup_div div input{
display: inline-block;
margin-right:10px !important;
}
.ttc_popup_div div:last-child{
border-bottom:0px solid #DDD;
}
.ttc_popup_div div:hover{
background-color: #BBB;
color: #000;
}
.ttc_popup_div img, .imgicon{ height:20px; width:20px; border-radius:50px; }

.mc_help_btn{
font-size: 20px;
color: white;
padding: 5px 10px 0px 0px;
}

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

/* another way to center: the css for the inner element to be centered */
.mc_center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.mc_full_screen{
position: fixed;
left: 0px;
top: 0px; /* 6.6.24 */
width: 100%;
height: 100%;
z-index: 1000;
}

.mc_right{
position: absolute;
top: 50%;
right: 0px;
transform: translate(-100%, -50%);
}


.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: 50px;*/
line-height: 30px;
background-color:#E2DE9C;
width:50% !important;
color: #600000;
font-weight: bold;
position:fixed;
bottom:20px;
left:25%;
right:25%;
border-radius:10px;
box-shadow:0px 0px 20px #600000;
z-index: 100;
}
.mc_puh_msg{
text-align: center;
}
.mc_puh_close{
position:relative; top:-10px; right:-10px;
height:25px !important; width:25px !important; border-radius:50px !important; color: #FFF !important; background-color: #600000 !important; line-height: 25px !important; text-align: center !important;
}
.mc_puh_msg:first-letter{
text-transform:uppercase;
}

/* 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;
background-color: var(--bgcol2) !important;
color: var(--fcolor2);
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{
}
#heading_logo img, .heading_logo img{
height: 100%;
padding-left:10px;
/* bigger menu logo*/
height: 42px; top: -10px; position: relative;
}
.heading_logo{
width: 100%;
position: absolute;
top: 0px;
padding-top: 15px;
background-color: var(--menucol);
} /* logo in oz LOZ*/


/*  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{
/* TODO 1 background-color: var(--bgcol2)!important;*/
}
.tt_thumbs_form .fh-header{
background-color: var(--menucol)!important;
}

/* 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_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, .md_ss_body{
background-color: var(--l0_bg);
border-color: var(--bgcol2);
overflow: auto; /* 24.01.22 for LB */
border-radius: 10px;
}
#md_ss_body table, .md_ss_body table{
background-color: inherit;
}
#md_ss_cap_div, .md_ss_cap_div{
background-color: var(--active_col);
color: var(--fcolor2);
padding: 10px;
font-weight: bold;
text-transform:uppercase;
}
#md_ss_content, #md_ss_content_custom, .md_ss_content, .md_ss_content_custom{
padding: 20px;
}
#md_ss_body input[type=text], .md_ss_body input[type=text]{
height: 30px;
	border-radius: 5px;
}
#md_ss_body .mc_btn, .md_ss_body .mc_btn{
    color: white;
	background-color: var(--l0_bg_btn);	
	padding: 12px 10px;
	border-radius: 5px;
	font-size: 13px;
}
#md_ss_content_custom, .md_ss_content_custom{
/* TODO: do it page size dependent */
width: 1100px; /* such precize values used for EVITE to hold 2*2 + 1 evites in mi_sel_text_div */
height: 550px;
overflow: auto;
}
/* class ver */
.md_ss_div{
position: fixed;
left: 0px; top: 0px;
}
.md_ss_content_custom>*{
}

/* 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;
border-bottom: 1px solid var(--l0_bg_btn);
padding-bottom: 5px;
margin-bottom: 10px;
}
.mc_tab_tab{
display: none;
}
.mc_tab_name, .md_ss_btn{
    color: white;
	background-color: var(--l0_bg_btn);	
	padding: 12px 10px;
	border-radius: 5px;
	font-size: 13px;
margin-left: 10px;
font-weight: bold;
}
.mc_tab_name.active, .md_ss_btn{
background-color: var(--active_col);
color: var(--fcolor2);
}

.mc_tab_tab.active{
display: block;
}

.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 */
}

.mc_upload_hr {color: #bf7b7b!important;}

.mc_unset_camp{
padding-left: 5px;
color: var(--menutextcol);
}
.td-orders_all-RES_action>*{ padding-right: 5px;}

#heading *{background: inherit;}


.mc_triple_div img{ max-width: 100px; }
.td-order_lbs-img_id1, .td-order_lbs-img_id2, .td-order_lbs-img_id3, td-order_lbs-path { width: 100px; }


/* ADJUSTMENTS TO STD STYLES */

.mc_search_panel{
	background-color: var(--l0_bg);	
	color: var(--treecol);	
}
.mc_search_panel .mc_btn, .mc_table_control .mc_btn, .lbsp_form .mc_btn, .lbsp_rec_actions .mc_btn, .tt_thumbs_header .mc_btn{
    color: white;
	background-color: var(--l0_bg_btn);	
	padding: 12px 10px;
	border-radius: 5px;
	font-size: 13px;
}
.tt_exp_btn_div > .mc_btn{
color: var(--l0_bg_btn);
font-size: 20px;
}
.mc_search_panel .mc_btn:hover, .mc_table_control .mc_btn:hover, .lbsp_form .mc_btn:hover, .lbsp_rec_actions .mc_btn:hover{
	background-color: var(--active_col);	
	border-radius: 5px;
	border: none!important; /* TODO 1 find out why it's solid by def */
}
.tc_single_table .tt_thumbs_form{
width: 100%;
/*margin: 50px;*/
}

.mc_search_panel{
box-shadow:0px 2px 25px #000 !important;
}
#mi_camp, .lbsp_form .lbsp_search_btn{
	border-radius: 10px 0px 0px 10px ! important;
}
.lbsp_expand, .mc_unset_camp{
	border-radius: 0px 10px 10px 0px ! important;
}
.lbsp_cancel_btn, input[name='FULLTEXT']{
	border-radius: 0px 0px 0px 0px ! important;
}


#fileupload .btn{
    color: white;
	background-color: var(--l0_bg_btn);	
	padding: 12px 10px;
	border-radius: 5px;
	font-size: 13px;
}
#mi_camp_div{
display: flex; /* TODO: otherwise select is one pixel lower then btn*/
}

/* DOTS */
.tc_dots{
/* causes new line */
width: 100%!important;
float: left;
min-height: 50px;
margin-top: 10px;
}
.tc_dots .file_name_div{
display: none;
}
.tc_dots .mc_thumb_image{
display: none;
}
.tc_dots > .thumb:hover, .tc_dots > .thumb{
border: none!important;
padding: 0px!important;
}
.mc_level_up{
background-image: url(../img/backfolder.png);
width: 35px;
height: 35px;
border-radius: 5px;
background-size: contain;
background-color: #aaaaaa;
}

.tt_thumbs_section{
padding: 20px;
background-color: var(--bgcol);
}
#mi_shops{
background-color: var(--l0_bg);
}
.lbsp_crud{
display: flex;
}
.lbsp_crud > *{
margin-left: 5px;
}
.mc_sal{
margin-left: auto ! important; /* TODO: this makes item float right somehow */
}
.tt_more_files_div, .tt_more_thumbs_div{
/*align-self: center;
border-radius: 5px;*/
padding: 5px;
background-color: var(--bgcol);
display: flex;
justify-content: center;
}
.tt_more_files, .tt_more_thumbs{
border-radius: 5px;
padding: 5px 10px;
background-color: var(--active_col);
border-color: var(--active_col);
color: var(--fcolor2);
}

/* side menu same color */
.sidebar-nav li a.active i {
background-color: var(--active_col)!important; /* col of last clicked (def=1st)*/
}
.sidebar-nav li:before {
background-color: var(--active_col)!important; /* donno how it yet works... */
}

.tree-cont:has(> .tree-item.active){ /* TODO: this shi not wors in ff */
background-color: var(--active_col)!important;
}
.tree-item.active{ background-color: var(--active_col)!important; }


div.lb_add, .mc_add_text, .lbs_add {
font-size: 40px;
display: flex;
align-items: center;
border: 2px solid #BBB;
color: var(--l0_bg_btn);
border-radius: 7px !important;
padding: 35px !important;
/*margin: 80px 0px; works for LB list in locations but not good for eg imgs in camps*/
}
.ap_detail_div .thumb{
margin-bottom: 0px!important; /* to cancel that of .thumb m-bot=20px, dono what is it for */
}

/* packs */
.mc_bcr_div{
padding: 10px;
font-size: 20px;
display: flex;
justify-content: center;
background-color: var(--bgcol2);
}

/* tutto maiuscolo*/
.ttc_pu_item, .mc_item, .mc_sf_caption, .mc_tab_name, th, label, .md_ss_btn, .td-orders-order_state_lbs, .td-orders_all-order_state_lbs, .td-order_lbs-order_state_lbs, .td-md-ftype, .td-app_lbs-app_state, .td-camps-camp_state, #mi_rdt_inp, #md_ss_content_input, .ttc_search_table input, .mc_us_cc, .mc_puh_msg, .select2-results__option, #ap_mp_body, .lb_text, #mi_lb_name, .td-events-notes>textarea { text-transform: uppercase;}
#nu_pass{ text-transform: none!important;}

/* counter */
.uc_counter{
border-radius: 10px;
}
.uc_counter button{
background-color: inherit;
}
.mc_red{color: red!important;}

#mi_send_emails{
position: absolute;
right: 50px;
bottom: 50px;
background-color: green;
border-radius: 5px;
width: 50px;
height: 50px;
z-index: 1000000;
opacity: 0.5;
}
#mi_send_emails:hover{
opacity: 1;
}

.mc_dtl i {padding: 10px;}
.mc_dtl .mc_dtc {color: green;}


.ap_detail_row img{
max-height: 1000px!important; /* to deactivate fh-body img max-w 16:*/
}

.mc_root{ text-transform: uppercase;}

/* IMG_CAT */
.mc_cat_list{
display: flex;
}
.mc_cat_txts{
display: flex;
padding: 20px; /* like .tt_thumbs_section */
}
.mc_text{
border: 2px solid #BBB;
border-radius: 7px !important;
padding: 5px;
/* width: 150px; 	height:100px; */
overflow-y: auto;
margin: 5px;
}
.lb_text{
width: 500px; /* to hold all trans; TODO: replace trans list with cb and use 300px here */
height: 200px;
}
.imgicon.active{
outline: 2px solid white;
}
#mi_lb_name{
width: 300px;
}
#mi_sel_text_div{
display: flex;
height: 100%;
}
#mi_text_list{
/* display: flex; problem: if descend and sel a templ - the result mi_lb_text not visible, so avoid scroll of whole form
flex-direction: column;*/
height: 100%;
overflow: auto;
}
#mi_text_list .lb_div{
margin: 5px;
display: inline-block; /* .lb_div is span now and must be inline..., but yet shown as flex for some reason...*/
}
.lb_div.active{
border: 5px solid blue;
}

.td-app_lbs-lb_text textarea{
height: 70px;
}
/* LBS_TEXT */
.lb_text_div{ position: relative;}
.lb_body_text{
display: flex;
}
.lb_text_div .lb_text{
/*margin: 35px 10px 10px 10px;
text-wrap: wrap;*/
width:100%;
height:100%;
padding-top: 35px; /* to not overlap with abs fixed btns*/
resize: none;
text-wrap: nowrap;
}

.mc_reject, .ap_reject{ color: red; }
.mc_approve, .ap_approve{ color: green; }
.mc_revise{ color: orange; }
.mc_sent{ color: orange; }
.mc_formed{ color: orange; }
.mc_req_app, .mc_req_app_pind{ color: green; }
.mc_req_app_pind{
font-size: 30px;
margin-top: 10px; /* TODO: quickfix */
margin-left: 50px;
}


.mc_sc_fs{ background-color: var(--l0_bg_btn);}
.mc_sc_ic{ background-color: var(--menucol); color: white; padding: 20px; margin: 20px; text-align: center; border-radius: 10px;}


/* bigger action icon size */
td[data-fhid='RES_action'], td[data-fhid='RES_detail'] {
padding-top: 5px!important; /* or else i not centered */
font-size: 20px;
}
.mc_menu .mc_item i{
font-size: 30px;
}

.lbsp_del, .lbsp_cancel{background-color: red!important;}
.lbsp_new, .lbsp_nowi{background-color: green!important;}

textarea:read-only{
background-color: #eeeeee;
}

.lb_drop_img, .lb_div .lb_text_div{
background-image: url('../img/gray_plus.png');
background-position: center;
background-repeat: no-repeat;
}

#mi_tdiff{
background-color: #eeeeee;
text-align: left;
padding: 20px;
width: fit-content;
border-radius: 5px;
text-transform:uppercase;
}
/* REPRO */
.repro_span{
padding: 2px;
border-radius: 2px;
width: 20px;
height: 20px;
display: inline-block; /* or else w/h have no effect */
text-align: center;
font-weight: bold;
margin-left: 2px;
color: azure;
}
/* REJEHI */
.rejehi_div{
border: 1px solid black;
padding: 5px;
margin: 10px;
text-align: left;
background-color: white;
border-radius: 5px;
}
.rejehi_title{
font-weight: bold;
}
.rejehi_cont{ overflow: auto;}
.rejehi1 {color: green;}
.rejehi2 {color: blue;}
.rejehi1,.rejehi2 {margin-left: 5px;}

/* hand btn */
.mc_detail_btn, .mc_tab_name, .mc_triple_div, .mc_approve, .mc_reject, .mc_send, .mc_req_app, .mc_approve_selection, .mc_request_confirm_selection, .lbsp_caord, .mc_order_send, .mc_puh_close, .mc_dtr, .mc_open_apap, .mc_action_btn, .rejehi1, .lb_text_div .lb_text, #mi_text_list .lb_text, .mc_level_up{
cursor: hand;
}
/* td content replaced with textarea */
.td-events-notes, .td-order_lbs-lb_text{
padding: 0px!important;
}
.td-order_lbs-lb_text textarea{
height: 200px;
width: 250px;
}

/*CLOP*/
#clop_cont{
display: flex;
}
#clop_cont .mc_btn{
margin-right: 10px;
padding-top: 10px;
}
#clop_cont .mc_btn.active{
background-color: var(--active_col);
outline: 2px solid white;
font-weight: bold;
}
#clop_cont .mc_btn.active:hover{
}

.tela_lang{
width: 40px;
border-radius: 5px;
}
/* LBCTAB */
td.lbctab{
max-width: 1000px!important;
}
.lbs_add{
padding: 5px!important;
display: block!important;
}
th.lbctab{
text-align: center;
}
th.lbctab .imgicon{
width: 40px!important;
height: 40px!important;
}
.lbctab.head, .lbctab.date{
background-color: lightgray;
}
.lbctab.date{
padding: 5px;
font-weight: bold;
}
/* DETFS */
#mi_fullscreen{
background-color: var(--bgcol);
overflow: auto;
}
#mi_detail_fullscreen, #mi_fs_exit{
font-size: 30px;
padding: 10px;
}
#mi_fullscreen .mc_tab_tab{
width: 100%;
height: 100%;
}
/* DELLA */
.lb_del_lang{ font-size: 20px; margin-left: 10px; }

.mc_req_app_pind>*{
margin-left: 10px;
}
.eooz_start{
color: black;
}