:root{/*variables with global scope*/

	--menuBg:						#202020;
	--labelColor:				#666666;
	--inputBorder:			#999999;
	--btnBorder:				#222222;
	--btnColor:					#222222;
	--btnBg:						#DDDDDD;
	--modalHeadBg:			#ffbb66;
	--loginBg:					#ff8e00;
	--txtColored01:			brown;
	--clearBg1:					#efe4bc;
	--clearBg2:					#fbf7ea;
	--infoBorder:				#a52a2a;/*#804040;*/
	--errorBorder:			#4a4a4a;/*#804040;*/
	--errorBg:					#4a4a4a;/*#804040;*/
	--errorColor:				white;/*#804040;*/
	
	--beeBtnBgActif:		brown;
	--beeBtnBgHover:		#d75e5e;
	--beeBtnBgDisabled:	#e69797;
	--beeBtnColActif:		white;
	--beeBtnColHover:		white;
	--beeBtnColDisabled:var(--beeBtnBgDisabled);
	
	--myUiActifBg:		var(--modalHeadBg);
	--myUiDisabledBg:	#bbafce;
	--myUiHoverBg:		var(--loginBg);
	--myUiTitleBg:		var(--loginBg);
	--myUiFilterBg:		#c9bddb;
	--myUiModalBg:		#e4dfec;
	--myUiOk:					green;
	--myUiOkBg:				lightgreen;
	--myUiOkBrd:			green;
	--myUiKo:					red;
	--myUiKoBg:				pink;
	--myUiKoBrd:			red;
	--myUiMsg:				white;
	--myUiMsgBg:			darkgray;
	--myUiMsgBrd:			gray;

	/* items in lists */
	--listTopHead:		black;
	--listTopHeadBg:	white;
	--listHead:				black;
	--listHeadBg:			var(--clearBg1); /*white; /*var(--loginBg);*/
	--listItem:				black;
	--listItemBg:			white;
	--listAction:			black;	
	--listActionBg:		white; /*var(--clearBg2);*/
	--listBord:				var(--btnBorder);
	--listBordAction:	white;

	/* override Connections module color */
	--connListHead:				var(--listHead);
	--connListHeadBg:			var(--listHeadBg);
	--connListItem:				var(--listItem);
	--connListItemBg:			var(--listItemBg);
	--connListAction:			var(--listAction);
	--connListActionBg:		var(--listActionBg);
	--connListBord:				var(--listBord);
	--connListBordAction:	var(--listBordAction);
	
	}


a.disabled {pointer-events: none;}
/** {margin:0;padding:0;}*/
html {box-sizing:border-box;width:100%;margin-left:0;margin-right:0;padding:0;background-color:#FFFFFF;font-family:arial, sans-serif;position:relative;}
body {box-sizing:border-box;width:calc(100%);padding: 0 ;margin:auto;background-color:#FFFFFF;position:relative;}
body.page {padding:0 10px;}

.txMain{font-size:110%}
.txNota{font-size:80%;font-style:italic}
.txCoul01{color:var(--txtColored01)}
.txAppName01{color:var(--txtColored01);font-weight:bold;}
.txIco{max-height:18px;margin-bottom:-5px;}
.txJustify { text-align:justify }
.txLeft{ text-align:left }
.txRight{ text-align:right }
.txLink{ color:var(--txtColored01); font-weight:bold; font-style:italic; text-decoration:none; }
[class^="hidInfo"]{background-color:var(--clearBg1);border:dashed 2px var(--infoBorder);border-radius:8px;padding:5px 10px;margin:0 10px;}
[class^="hidInfo"].error{background-color:var(--errorBg);border:solid 2px var(--errorBorder);color:var(--errorColor);padding:20px}
.hidInfoFixed{position:fixed;bottom:20px;right:20px;left:20px;z-index:310;margin:0;}
.transpLayer{position:fixed;background-color:transparent;top:0;left:0;width:100%;height:100%;z-index:120}
.textDiv{ padding:20px}
.negIndent2{text-indent:-2em;margin-left:2em;}
.beeButton{color:var(--beeBtnColActif); background-color:var(--beeBtnBgActif); border-radius:4px; 
	display: inline-block; padding:10px;
	text-decoration:none; text-align:center;
	margin-top:2px;}
.beeButton:hover{color:var(--beeBtnColHover);background-color:var(--beeBtnBgHover);}
.beeButton[disabled]{color:var(--beeBtnColDisables); background-color:var(--beeBtnBgDisabled); cursor:default;}
.buttonLarge{ padding:10px 50px; border-radius:4px;}
.buttonFullWidth{ box-sizing: border-box; width:100%; padding:10px 50px; border-radius:4px; }

.clickableDiv{position:relative;}
.clickableDivAnchor{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;}



.margAuto{margin:auto;}
.margLeft{margin-left:10px;}
.margTop{margin-top:10px;}
.margTopL{margin-top:30px;}
.margTopXL{margin-top:50px;}
.margTopXXL{margin-top:100px;}
.verticalCenter{ display: flex; align-items:center; } /*apply to container, to vcenter contained elements*/
.horizontalCenter{ display: flex; justify-content: center; flex-wrap: wrap;} /*apply to container, to vcenter contained elements*/
.flexBreak{ flex-basis: 100%; height: 0; }
.fitWidth{ width: fit-content; }

/*vertical or square icon, sized by width*/
img.icoXS{width:15px;margin-bottom:-2px;}
img.icoS{width:25px;margin-bottom:-2px;}
img.icoM{width:45px;margin-bottom:-2px;}
img.icoL{width:70px;margin-bottom:-2px;}
/*horizontal ico, sized by height*/
img.hicoS{height:25px;margin-bottom:-2px;}
img.hicoM{height:45px;margin-bottom:-2px;}
img.blink01{margin-left:-17px;vertical-align:1px;}
img.blinkBg01{margin-right:-24px;vertical-align:2px;}

/*.listcontainer {width:30%;}*/
.textPage {padding-left:10px;padding-right:10px;}
.listcontainer, .listcontainer * {margin:0;padding:0;}
.listcontainer ul.listlevel1 li{ background-color:yellow;}
.listcontainer ul.listlevel2 li{ background-color:white;}
.listitem {border-top:solid 1px gray;}
.listitem a {text-decoration:none;display:block;overflow:auto;color:black;display:flex;align-items:center;min-height:30px;}
.listitem a>div{float:left;position:relative;}
.listitem a>div:first-of-type {margin-left:10px;}
.listitem a>div:first-of-type img /*left icon*/ {width:100px;margin-right:10px;}
.listitem a>div.picto  /*right picto*/ {clear:both;margin-left:auto;/*margin-left auto in flexbos aligns to the right*/}
.listitem a>div.picto img {width:10px;margin-right:10px;;/*margin-left auto in flexbos aligns to the right*/}
.listitem .txt1 {display:block; font-weight:bold;}
.listitem .txt2 {display:block; font-style:italic; font-size:90%;}
.listitem .txt3 {display:block; font-size:90%; color:gray;}
.listitem .txt4 {display:block; font-size:90%; }
.listitem .padleft {padding-left:10px;}

.listitem.l2  .txt1 {display:inline-block; font-weight:bold;margin-left:40px;}
.listitem.l2  .txt2 {display:inline-block; font-style:italic;margin-left:20px;}

.listitem.l3 a>div:first-of-type {width:8em;}


/*top button bar in modal windows. Also in home page. In any page where needed, in fact...*/
.fix{position:absolute;top:0px;left:0px;right:0px;height:30px;border:none;margin:0;padding:10px;}
.modalTopBtn{float:right;padding:0}
.icoWithTag{position:relative;top:0px;width:50px;height:100%;z-index:50; }
.icoWithTag a {position:absolute;display:inline-block;width:100%;height:100%;z-index:70; }
.icoWithTag .ico{position:absolute;bottom:0;height:100%;max-height:100%;}
.icoWithTag .ico.greyed{opacity:0.7 }
.icoWithTag .tag{position:absolute;bottom:-5px;z-index:60; }
.icoWithTag .tag.caution{right:-5px;width:25px; }
.icoWithTag .tag.smallNb{right:2px;width:18px; }
.icoWithTag .tag.medal{right:2px;width:22px;bottom:-15px; }

/*top button bar in modal windows. Also in home page. In any page where neede, in fact...
.fix{position:absolute;top:0px;left:0px;right:0px;height:30px;border:none;margin:0;padding:10px;}
.modalTopBtn{float:right;padding:0}
.langIncomplete{position:relative;top:0px;width:50px;height:100%;z-index:50; }
.langIncomplete .flag{position:absolute;bottom:0;height:100%;max-height:100%;}
.langIncomplete .caution{position:absolute;bottom:-5px;right:5px;width:25px;z-index:60; }
.langIncomplete a {position:absolute;display:inline-block;width:100%;height:100%;z-index:70; }
.smallNb{position:absolute;bottom:-5px;right:10px;width:20px;z-index:60; }*/

#ongletsContainer { z-index:200;position:fixed;top:0;left:0;right:0;background-color:black;color:white;height:40px;;display:flex;padding-top:10px;}
#ongletsContainer,#ongletsContainer * {box-sizing: border-box;white-space: nowrap;}
#ongletsContainer div {display:flex;margin:0;border:none;}
#ongletsContainer a {font-weight:bold;text-decoration:none;color:white;}
#ongletsContainer .menuTrigger{width:35px;justify-content: center;}
#ongletsContainer .menuTrigger img{height:30px;margin-top:-5px;}
#ongletsContainer .tabsContainer{position:relative;width:calc(100% - 35px);}
#ongletsContainer .tabsContainer>a{
		display:inline-block;position:relative;
		margin:0;width:33.3%;height:20px;
		font-weight:bold;text-align:center;text-decoration:none;color:white;}
#ongletsContainer .tabsContainer>a:not(:first-of-type){
		border-left:solid 1px gray;}
.pageAvecOnglets {margin-top:40px;}

.menu img{height:18px;}
/*.menu{line-height:25px;}*/


#menuContainer{
	position:fixed;top:40px;bottom:0;left:0;right:0;
	z-index:300;
	background-color:rgba(0,0,0,0.2);
	overflow:auto;
}
#menuContainer>ul{
	max-width:80%;
}
#menuContainer>ul, #menuContainer>ul li, #menuContainer>ul a, #menuContainer>ul *{ margin:0; padding:0;}
#menuContainer>ul>li{ border-top:solid 1px gray; }
#menuContainer>ul>li>a{
	text-decoration:none; 
	overflow:auto;
	color:white;display:-webkit-flex;align-items: center;min-height:40px;
	background-color:var(--menuBg);
	
}
#menuContainer>ul>li>a>img{margin-right:10px}
#menuContainer>ul>li>a>img.menuRightIco{margin-left:auto;/*pushes an item in a flex element parent to the right*/
	
}
#menuContainer>ul>li>a>span{
	display:inline-block;
}


#topPanel { position:fixed; display:block;height:50px; top:0; width:200px; right:5%; z-index:100; text-align:right;}
.topBtn {position:relative;display:inline-block;height:100%;}
.topBtn img {height:100%;}
.topBtn .mask {position:absolute;top:0;right:0;height:100%;width:100%}
.topBtn .mask div {position:relative;top:0;right:0;z-index:110;background-color:white;filter:alpha(opacity=70);-moz-opacity: 0.7; opacity: 0.7;height:100%;width:100%;}
.topBtn .mask img {display:block;position:absolute;top:50%;right:50%;z-index:120;width:34%;height:34%;}


#container { box-sizing:border-box;margin:0; margin-bottom:30px; overflow:auto; padding:0em 0 0em 0; width:100%; height:100%;position:relative;}
#container.withTopPanel { margin-top:35px;}
#footer {position:fixed;left:0;bottom:0;width:100%;text-align:center;font-size:x-small;padding-top:5px;z-index:100;border-top:solid 1px #EEEEEE;color:#dddddd;background-color:#FFFFFF;height:15px;}

h1 {margin-top:0.5em;font-size:20px;font-weight:normal;}
#profileEdit h1 {font-weight:bold;font-size:30px;margin-top:50px;}

#addhive label, #addhive input, #addhive textarea, #addhive select {display:block;width:100%;}
#addhive textarea {min-height:5em;}
#addhive label {margin-top:2em;}
#addhive input[type="submit"] {margin-top:2em;padding:10px;}


#filter form {display:block;width:100%;text-align:center;margin:0;padding:0}
#filter input[type=submit] {width:90%;height:3em;margin:10px 0;display:inline;}
#filter .normal input[type=submit] {background-color:#dacb76;}
#filter .selected input[type=submit] {background-color:yellow;}
#filter .disabled input[type=submit] {background-color:yellow;}



#editDiv label {display:block;margin-top:0.8em;font-size:small;color:var(--labelColor);}
#editDiv textarea {width:98%;margin:0;padding:0;border:solid 1px var(--inputBorder) !important;}
#editDiv input:not([type="checkbox"]) {width:98%;margin:0;padding:0;border:solid 1px var(--inputBorder) !important;}
#editDiv select {width:98%;margin:0;padding:0;}
#editDiv option {margin:0;padding:0;border:solid 1px var(--inputBorder) !important;}
#editDiv ul {display:table;width:98%;margin:0;padding:0;border-spacing: 0px; border:none;border-collapse: collapse;}
#editDiv li {display:table-row;}
#editDiv li>span {display:table-cell;padding-left:1em;}
#editDiv li span .Btn {display:block;position:relative;right:0;margin-right:0;}
#editDiv details {padding-left: 30px; margin-top: 20px; margin-bottom: 30px;}
#editDiv details summary{margin-left: -30px; font-weight: bold; font-size: 120%}
#editDiv details details summary{ font-size: 100%}

/*#topBtns {position:fixed;top:0;left:0;display:block;margin:0;border-bottom:solid 3px #A8983D;width:100%;background-color:#dacb76;text-align:center;z-index:100;}*/
.Btn, .LargeBtn {background-color:var(--btnBg);position:relative; text-align:center;border:solid 1px var(--btnBorder);color:var(--btncolor);margin:4px 0px;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;}
.Btn {display:inline-block;position:relative;right:0;padding:2px 1em;} 
.LargeBtn {display:inline-block ;width:98%;padding:2px 0;margin-top:0.8em;} 
/*.Btn.selected {background-color:yellow;color:black;font-weight:bold;}*/
.Btn.active {background-color:var(--btnBg);color:black;}
.Btn.hidden {display:none !important;}
.Lnk, .LnkLeft, .LnkRight {display:inline-block;padding:0;margin:0;width:100%;font-size:small;color:#444444;border-bottom:1px solid #666666}
.Lnk:first-of-type, .LnkLeft:first-of-type, .LnkRight:first-of-type {border-top:1px solid #666666}
.LnkLeft {text-align:left;padding:10px 0} 
.LnkRight {text-align:right;} 
.LnkLeft span {margin:0 10px}
.lighter {font-style:italic;color:#666666}
.darker {color:#222222;}
.border {border: solid 1px black;}
.eventDiv{border-top: solid 1px black;padding-left:10px;padding-top:10px;}
.eventDiv textarea{width:100%;}
.full {position:fixed;top:0px;bottom:0px;left:0px;right:0px;z-index:200;padding:0;overflow:auto;background-color:white}
.bold{font-weight:bold;}
.noBold{font-weight:normal;}
.itq{font-style:italic;font-family:Times New Roman, Times, serif;}
.ico, .transpIco{height:1.5em;margin-left:10px;vertical-align:-3px;}
.transpIco{opacity: 0.5;filter: alpha(opacity=50)/*IE<8*/;}
.label{font-size:small;color:#666666;}
.leftPadd{padding-left:20px;}
.left {float:left}
.topPadd{padding-top:20px;}
tr.topPadd>td{padding-top:20px;}
.breakLongWords { word-wrap:break-word;}
.right {text-align:right;margin-top:5px}
.right span {margin:0 10px 0 20px;font-style:italic;}
/*#pageApiary .permBtn {margin-left:10px;}*/
input, textarea, button, select, label, a, img, div, span {
/*    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
/*    -moz-user-select: none; /* mozilla browsers */
/*    -khtml-user-select: none; /* webkit (konqueror) browsers */
/*    -ms-user-select: none; /* IE10+ */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
input:disabled, select:disabled , textarea:disabled {pointer-events:none; /* https://stackoverflow.com/a/32925830/3872061 */}
.noselect { /*to avoid browser text selection 
	-webkit-user-select: none; -khtml-user-select: none;  -moz-user-select: none; -o-user-select: none;*/ user-select: none;
}

.triState .checkbox{ display:inline-block; height:16px; width:16px; margin:2px 2px -2px;
	background-repeat: no-repeat; background-size: contain; background-position: center;}
.triState[data-state="checked"      ] .checkbox{ background-image: url('../pic/tristate-box-checked.png'); }
.triState[data-state="unchecked"    ] .checkbox{ background-image: url('../pic/tristate-box-unchecked.png'); }
.triState[data-state="indeterminate"] .checkbox{ background-image: url('../pic/tristate-box-indeterminate.png'); }



#pageHome #container {margin-top:90px;padding:10px 0;}

.newsHeader{ color:var(--beeBtnBgActif); }
.newsContainer{ position:relative;  }
.newsContainer.newsShortDisplay{ max-height:245px; overflow:hidden;}
.newsContainer.newsShortDisplay + .newsMore{  color:var(--beeBtnBgActif); font-style:italic; text-align:center; cursor:pointer; }
.newsContainer:not(.newsShortDisplay) + .newsMore{ display:none; }
.news{ margin-top:10px; }
.news:first-of-type{ padding-top:10px;border-top:dotted 1px var(--beeBtnBgActif); }
.news{ padding-bottom:10px;border-bottom:dotted 1px var(--beeBtnBgActif); }
.newsDate{display:inline-block; float:right; padding:2px 10px; 
	color:white; background-color:var(--beeBtnBgActif); border-radius:5px;
	font-size:70%; }
.news ul{ padding-left: 13px; }

.brown{color:#613709;}
.smaller {font-size:90%;}
.schmaler {margin-left:20%;}

#loginDiv {/*general container, contains only <script>, <style> and #loginAjaxContent*/
	z-index:200;
	font-size:small;
	position:fixed;top:40px;right:0;left:0;
	background-color:var(--loginBg)/*dacb76*/;
	padding:2px 15px 4px 15px;  margin:0;
	border-radius:0 0 15px 15px;
	}
#loginAjaxContent {/*container refreshed by ajax calls, where everything happens*/
	width:100%;
	margin:0;padding:0;border:none;
	}
#loginDiv #loginMessage {
	margin-bottom:2px;
	width:100%;
	}
#loginDiv #loginMessage .bold{
	font-weight:bold;
	}
#loginDiv #uname, #loginDiv #pword {/*one div for each block label+input*/
	display:inline-block;width:49%;min-width:100px; padding:0;margin:0;border:none;text-align:right;
	}
#loginDiv label{
	display:block;
	width:100%;
	}
#loginDiv input[type='text'], #loginDiv input[type='password'] {
	display:inline-block;
	width:98%;
	margin-bottom:2px;
	background-color:#EEE8AF;
	}
#loginDiv #controls {/*one div for login/logout buttons, register link*/
	margin-top:2px;
	display:inline-block;
	/*clear:both;*/
	width:98%;margin:auto;
	text-align:right;
	}
#loginDiv #controls input, #loginDiv #logoutForm input {
	display:inline-block;  /*float:left;*/ background-color:#EEE8AF; 
	}
#loginDiv #controls input.justForKbdInput {/*nothing on screen but keybord "enter" interaction*/
		width:0;height:0;border:0;margin:0;padding:0;
	}
#loginDiv #controls a {
	display:inline-block; /* float:right;*/ font-size:small; 
	margin:0px; margin-top:4px;margin-right:2em;padding:0;text-decoration:none; color:black;
}
#loginDiv #controls a.default { font-weight:bold; }
#loginDiv #controls a.option { font-style:italic; }
#loginDiv #selectAutologFormDiv {text-align:center}
#loginDiv #selectAutologFormDiv>div {display:inline-block;width:100%;margin-bottom:10px}
#loginDiv #selectAutologFormDiv>div>select {display:inline-block;width:90%;padding:5px 4%;/*background:#EEE8AF;margin:2px 1%;cursor: pointer;border:none;*/}
#loginDiv #selectAutologFormDiv>div>select>option {background-color:gray;background:gray;color:white;}
#loginDiv .loginIco {height:14px;margin-bottom:-2px;margin-right:1px}
#loginDiv img.chkbx {height:14px;}
/*#loginDiv #selectAutologFormDiv>div>span {display:inline-block;width:90%;padding:5px 4%;background-color:#EEE8AF;margin:2px 1%;cursor: pointer;}*/

#pagePassReset {width:100%;height:100%;margin:auto;padding:0;border:none}
#pagePassReset #container {
	width:95%;max-width:320px;height:400px;
	/*position: absolute;top:0;bottom:0;left:0;right:0;*/margin:auto}
/*#pagePassReset .center{text-align:center}*/
#pagePassReset .logo {width:30%;margin:50px 0;}
#pagePassReset h1 {width:95%;margin:2em auto 0.7em}
#passResetDiv #loginMessage {display:block;width:95%;margin:auto;margin-top:0.5em;color:red;font-weight:bold;}
#passResetDiv form {margin-top:1em;width:100%}
#passResetDiv label, #passResetDiv input {display:block;width:95%;margin:auto}
#passResetDiv label {margin-top:0.5em}
#passResetDiv p {width:95%;margin:auto;}
#passResetDiv #controls {width:95%;margin:auto;text-align:right;margin-top:0.5em}
#passResetDiv #controls input.justForKbdInput {/*nothing on screen but keybord "enter" interaction*/
		width:0;height:0;border:0;margin:0;padding:0;	}
#passResetDiv #controls a {font-weight:bold;padding:0 2em 0;text-decoration:none; color:black;}
.hidden {display:none!important;}
.block {display:inline-block;}
p, .p {margin-top:10px;margin-bottom:0px;}
.ok {color:green;background-color:lightgreen;border:solid 1px green;padding:20px 10px;text-align:center;position:fixed;z-index:100;bottom:50px;left:30px;right:30px;}
.fail {color:red;background-color:pink;border:solid 2px red;padding:20px 10px;text-align:center;position:fixed;z-index:100;top:55px;left:40px;right:40px;}
.info {color:white;background-color:darkgray;border:solid 2px gray;padding:20px 10px;text-align:center;position:fixed;z-index:100;top:55px;left:40px;right:40px;}
.info a {color:white;text-decoration:none; font-family:serif; font-style:italic; }
.dialog {position:fixed;z-index:102;bottom:50px;left:30px;right:30px;background-color:white;border:1px solid black;padding:30px;}
.mask {position:fixed;z-index:101;top:0;bottom:0;left:0;right:0;}
.noPerm {color:red;}
.invalidInput{color:red}
/* table display*/


/* GENERIC RULES for all tbTable tables - do NOT modify for specific nééds */
.tbTable{ display:table; width:100%; margin:0; padding:0; border-collapse:collapse; } /* put the table in a container and you'll have the width of the container */
.tbHead{ display: table-header-group; }
.tbBody, .tbRowsGroup{ display: table-row-group; }/* might be multiple (like tbody in HTML, doesn't have to be unique) */
.tbRow{ display:table-row; }
.tbCell{ display:table-cell; margin:0; }
.tbCell:not(.tbFiller){ width: 1px; }/* 1px: will adjust to content*/
.tbCell.tbFill100{ width: calc(100% - 1px); } /* 100%: applied to ONE cell, will fill all remaining space in the parent */
.tbCell.tbFill50{ width: 50%; } /* 50%: applied to TWO cells, will share the remaining space equally for these two */
.tbCell.tbFill33{ width: calc(100% / 3); } /* 33%: applied to 3 cells, will share the remaining space equally for these 3 */
.tbCell.tbFill66{ width: calc(200% / 3); } /* 66%: apply to 1 cell, apply 33% to another cell, to have 2/3 + 1/3 of the remaining cell*/
.tbHead .tbCell{ font-weight:bold; text-align:center; }
/* apply borders on table with top (of table), bottom(of table), middle(inner borders) */
.tbTable.tbBordTop>.tbRow:first-child>.tbCell{ border-top:solid 1px var(--listBord); }
.tbTable.tbBordBottom>.tbRow:last-child>.tbCell{ border-bottom:solid 1px var(--listBord); }
.tbTable.tbBordMiddle>.tbRow:not(last-child)>.tbCell{ border-bottom:solid 1px var(--listBord); }
.tbTable.tbBordAll>.tbRow>.tbCell{ border-top:solid 1px var(--listBord); border-bottom:solid 1px var(--listBord); }
/* OR apply borders on a row for all cells, or on a cell directly*/
.tbRow.tbBordTop>.tbCell, .tbCell.tbBordTop {	border-top:solid 1px var(--listBord); }
.tbRow.tbBordBottom>.tbCell, .tbCell.tbBordBottom {	border-bottom:solid 1px var(--listBord); }

/*
	--listHead:				black;
	--listHeadBg:			var(--loginBg);
	--listItem:				black;
	--listItemBg:			white;
	--listAction:			black;	
	--listActionBg:		var(--listActionnable);
	--listBord:				var(--listBorder);
	--listBordAction:	white;
*/
/* SPECIFIC RULES for SOME tbTable tables: add specific rules only applicable to specifis sections of the application */
#pageApiaryShare .tbRow .tbCell{ padding: 2px 10px; height:30px; vertical-align:middle; }/*default cell format*/
#pageApiaryShare .tbRow.stylPageHeader>.tbCell{ color:var(--listTopHead); background-color:var(--listTopHeadBg);}
#pageApiaryShare .tbRow.stylPageHeader>.tbCell>img{ width:100px;}
#pageApiaryShare .tbRow.stylSectionHeader>.tbCell{ color:var(--listHead); background-color:var(--listHeadBg);}
#pageApiaryShare .tbRow.stylSubTableContainer>.tbCell{ padding: 0px; }
#pageApiaryShare .tbRow.stylActionnable>.tbCell{ color:var(--listAction);background-color:var(--listActionBg); }
#pageApiaryShare .tbRow.stylIntro>.tbCell, #pageApiaryShare .tbCell.stylIntro{ padding-top:20px; padding-bottom:20px; }
#pageApiaryShare .tbRow.stylError>.tbCell, #pageApiaryShare .tbCell.stylError{
	padding-top:20px; padding-bottom:20px; color:var(--errorColor); background-color:var(--errorBg);
	/*border:solid 2px var(--errorBorder); box-sizing: border-box; width: calc(100% - 14px);
	 border makes width larger than parent, display moves in phone screen, and width does nothing to help*/ }
#pageApiaryShare .tbRow.stylError>.tbCell ul, #pageApiaryShare .tbCell.stylError ul{ margin:0 0 15px; padding-left:15px; }
#pageApiaryShare .tbRow.stylSeparBig>.tbCell{ padding-top:30px; padding-bottom:30px; }
/*
#pageApiaryShare #selectedContactsList>span:not(:last-child):after{ content:",";}
#pageApiaryShare #selectedContactsList>span:last-child:after{ content:"";}
*/
#pageApiaryShare #selectedContactsList>span:before{ content:"- ";}
#pageApiaryShare .hidInfoFixed table{ border-collapse:collapse; margin: 10px 0; }
#pageApiaryShare .hidInfoFixed td, #pageApiaryShare .hidInfoFixed th{ padding: 0 5px; border: solid 1px gray; }

#deleteDiv tr, #deleteDiv td {vertical-align:top;}

body#visitApiary {width:100%;}
#visitApiary  td:first-of-type {padding-right:1em;}
#visitApiary  form:nth-child(2n+2) {background-color:rgba(255,187,102,0.8);margin:0;}/*#d9d9d9*/
/*#visitApiary  form:nth-child(2n+2) textarea {background-color:#EEEEEE;}*/
#visitApiary  form:nth-child(2n+3) {background-color:rgba(255,187,102,0.4);margin:0;}
/*#visitApiary  form:nth-child(2n+3) textarea {background-color:#EEEEEE;}*/
#visitApiary  form textarea:focus {background-color:lightyellow}
/*#visitApiary  .full label {height:30px;width:100%;margin-right:10px;margin-left:10px;}
#visitApiary .fix{background-color:#ffbb66;}
#visitApiary  .list {position:absolute;top:50px;bottom:10px;left:0;right:0;border:none;margin:0;padding:0;overflow:auto;}*/
/*#visitApiary*/ .full label {height:30px;width:100%;margin-right:10px;margin-left:10px;}
/*#visitApiary*/ .full .fix{background-color:#ffbb66;}
/*#visitApiary*/ .full .list {position:absolute;top:50px;bottom:10px;left:0;right:0;border:none;margin:0;padding:0;overflow:auto;}
#evaluateContainer{
	/*
	position:fixed;top:0;bottom:0;left:0;right:0;z-index:100;padding:5px 5px 0 5px;
	background-color:white;
	overflow:auto;
	margin-bottom:26px;/*21 used by footer + 5 real margin*/
}
/*#evaluateContainer #evaluateModal {position:fixed;top:0;left:0;right:0;height:10px;padding:5px 5px 20px 5px;background-color:white;}*/
#evaluateContainer form {float:left;}
#evaluateContainer .submitDiv {float:right;}
#evaluateContainer .submitDiv img {width:30px;margin-left:15px}
/*#evaluateContainer .submitDiv span{font-weight:bold;color:white;background-color:#6c5353;padding:3px 15px;border-radius:5px;margin-right:5px}*/
#evaluateContainer  #selectModal .list img{height:15px;margin-right:10px;vertical-align:middle;margin-top:-4px}
#evaluateContainer .evaluate{margin-top:10px;padding:0 10px 10px 10px;border-bottom:solid 1px lightgray }
#evaluateContainer h1{padding:0 10px;}
#evaluateContainer .evaluate div {display:table-cell;background-size:contain;background-position:center;background-repeat:no-repeat;height:30px;width:33px;text-align:center;vertical-align:middle;color:white;font-size:15px;font-weight:bold;}
#evaluateContainer .evaluate div:not(.discard){padding:0;margin:0}
#evaluateContainer .evaluate br{display:block;line-height:1px;margin-top:3px;padding:0}
#evaluateContainer .evaluate div.discard{width:40px;background-size:20px;background-position: left center;}
#evaluateContainer h1{font-size:medium;font-weight:bold;margin-bottom:10px;margin-top:20px;}
#evaluateContainer .invis{visibility:hidden}


#todoListContainer .list {margin:0!important}
#todoListContainer .list img {margin-right:10px;margin-left:10px;vertical-align:middle;margin-top:-4px}
#todoListContainer .isDone img {height:15px;}
#todoListContainer .actions{margin-top:10px;}
#todoListContainer .actions>div{display:inline-block;}
#todoListContainer .actions img {height:30px;}
#todoListContainer .list {display:table;width:100%;/*min-width:95%;max-width:100%;*/margin-top:30px}
#todoListContainer .event {display:table-row;width:100%;}
#todoListContainer .event[data-done="1"] {color:gray;}
#todoListContainer .event[data-done="1"] .isDone img {opacity:0.4;}
#todoListContainer .event[data-done="0"][data-expired="1"] .date {color:red;}
#todoListContainer .isDone,
#todoListContainer .date,
#todoListContainer .details,
#todoListContainer .plusSign {display:table-cell;border-top:1px solid grey;padding-top:10px;padding-bottom:10px}
#todoListContainer .isDone {width:30px;;/*min-width:80px*/}
#todoListContainer .date {width:80px;padding-left:10px;/*min-width:80px*/}
#todoListContainer .details {width:calc(100% - 110px);/*max-width:calc(100% - 100px);min-width:calc(100% - 100px);*/}
#todoListContainer .plusSign {width:20px;/*min-width:20px;max-width:20px*/}
#todoListContainer .plusSign img {width:12px;opacity: 0.3;/*min-width:20px;max-width:20px*/}
#todoListContainer .name {display:block;width:100%;font-weight:bold;margin:0}
#todoListContainer .commentEv {width:100%;margin:0;padding:0}
#todoListContainer .apName {color:darkgrey;font-weight:bold;font-style:italic;font-family:Times New Roman, Times, serif;}
#todoListContainer  #todoChooseApiaryModal img {height:40px;}

#pageHiveHistory #container {width:100%;/*max-width:100%*/}
#pageHiveHistory #eventsContainer {display:table;width:100%;/*min-width:95%;max-width:100%;*/margin-top:30px}
#pageHiveHistory .event {display:table-row;width:100%;}
#pageHiveHistory .date,#pageHiveHistory .details,#pageHiveHistory .plusSign {display:table-cell;border-top:1px solid grey;padding-top:10px;padding-bottom:10px}
#pageHiveHistory .date {width:80px;padding-left:10px;/*min-width:80px*/}
#pageHiveHistory .details {width:calc(100% - 110px);/*max-width:calc(100% - 100px);min-width:calc(100% - 100px);*/}
#pageHiveHistory .plusSign {width:20px;/*min-width:20px;max-width:20px*/}
#pageHiveHistory .plusSign img {width:12px;opacity: 0.3;/*min-width:20px;max-width:20px*/}
#pageHiveHistory #eventsContainer .name {display:block;width:100%;font-weight:bold;margin:0}
#pageHiveHistory .commentEv {width:100%;margin:0;padding:0}


#pageHiveHistory .fix{background-color:#ffbb66;}
/*#pageHiveHistory .fix{position:absolute;top:0px;left:0px;right:0px;height:30px;border:none;margin:0;padding:10px;background-color:#ffbb66;}*/
#pageHiveHistory  .list {position:absolute;top:50px;bottom:10px;left:0;right:0;border:none;margin:0;padding:0;overflow:auto;}
#pageHiveHistory  #eventsContainer {position:absolute;top:50px;bottom:10px;left:0;right:0;border:none;margin:0;padding:0;overflow:auto;}
#pageHiveHistory  #selectModal .list img{height:30px;margin-right:10px;vertical-align:middle;margin-top:-4px}
/*#pageHiveHistory  .modalTopBtn{float:right;padding:0}*/

#errorMessage #msg{width:100%;}
#errorMessage table{width:100%;}
#errorMessage td.col1 img{width:80px;}

#pageExport1 table {border-collapse:collapse;width:100%}
#pageExport1 td, #pageExport1 th {padding:2px 6px;vertical-align:top;text-align:left;}
#pageExport1 td.noPad {padding:0;}
#pageExport1 h1 {
		width:100%;padding-top:15px;
		text-align:center;
		font-weight:bold;
	}
.note {font-family:"Times New Roman", Times, serif !important;font-style:italic !important;}
#pageExport1 table.outer>tbody>tr>td {border:solid 1px black;}
#pageExport1 table.nested2 {width:100%}
#pageExport1 tr:not(:last-child)>td.nested {border-bottom:dotted 1px lightgray;}
#pageExport1 tr.thead>td {background-color:#D3D3D3/*lightgray*/;}
#pageExport1 tr:not(:first-child)>td.nested {border-top:dotted 1px lightgray;}
#pageExport1 .presa td:first-child{padding-right:50px;width:30%;text-align:right;}
#pageExport1 .topPadd td{padding-top:20px !important;}
.comment {min-width:200px;}
.genComment{min-width:200px;max-width:200px;}
.bordNoTop {border-top:solid 1px transparent !important;}
.bordTop {border-top:solid 1px black !important;}
.bordNoBottom {border-bottom:solid 1px transparent !important;}
.bordBottom {border-bottom:solid 1px black !important;}
.bordBottomDouble {border-bottom:solid 3px black !important;}
.bordTopBottomDot {border-bottom:dotted 1px lightgray !important;border-top:dotted 1px lightgray !important;}
.bordDouble {border:solid 3px black !important;}
.center {text-align:center !important;}
.rotate {position:absolute;top:50%;left:50%;
	transform:  translateX(-50%) translateY(-50%) rotate(-90deg);
	-webkit-transform:  translateX(-50%) translateY(-50%) rotate(-90deg);
	-moz-transform:  translateX(-50%) translateY(-50%) rotate(-90deg);
	-o-transform:  translateX(-50%) translateY(-50%) rotate(-90deg);
}
.rotateContainer {position:relative;max-width:2em;height:7em;}
.narrow {width:2em !important;}
/*.outer {width:100%;}*/
.sanitRepr {min-height:50px;width:100%;margin:0;}
.sanitAgent {min-height:50px;width:100%;margin:0;}
.sanitComment {min-height:170px;width:100%;margin:0;}
.pagebreak { page-break-before: always; }
.sandhour {width:20px}

input[disabled] {background-color:lightgray;border-color:gray;}
#exportLinkPage, #contactPage, #contactPage td, #profileEdit{ padding:5px 10px; }

#contactPage textarea{display:block;width:90%;min-height:10em}


.myUiDialog {position:fixed;z-index:1000;top:0;left:0;right:0;bottom:0;}
.myUiDialog .myUiSemiTranspScreen {position:absolute;z-index:1001;top:0;left:0;right:0;bottom:0;background-color:black;opacity:0.3}
.myUiDialog .myUiDialogBox {
	position:absolute;top: 50%; left: 50%;transform: translate(-50%,-50%);z-index:1002;
	display:inline-block;max-width:90%;max-height:80%;overflow:auto;background-color:white;
	min-width:200px;/*added 221108*/
}
.myUiDialog .myUiDialogBox .myUiTitle {padding:5px 10px;margin:0 0 10px 0;background-color:var(--myUiTitleBg);color:white;font-weight:bold;font-size:120%}
.myUiDialog .myUiDialogBox .myUiContent {margin:10px;max-height:20em;overflow:auto;}
.myUiDialog .myUiDialogBox .myUiText {padding:0 10px 20px}
.myUiDialog .myUiDialogBox .myUiFields {display:table;width:calc(100% - 20px);padding:0 10px}
.myUiDialog .myUiDialogBox .myUiFieldLine {display:table-row;}
.myUiDialog .myUiDialogBox .myUiFieldLine label, 
.myUiDialog .myUiDialogBox .myUiFieldLine input { display:table-cell;margin:3px 5px;width:auto; }
.myUiDialog .myUiDialogBox .myUiButtons {text-align:center;margin:20px;}
.myUiButton {display:inline-block;padding:3px 20px;margin:5px 10px 5px 0;background-color:var(--myUiActifBg);color:white}
.myUiButtonFullWidth {display:inline-block;padding:3px 20px;margin:5px 0px 5px 0;width:calc(100% - 40px );background-color:var(--myUiActifBg);color:white}
.myUiButton.myUiDisabled, .myUiButtonFullWidth.myUiDisabled {background-color:var(--myUiDisabledBg);cursor: not-allowed;}
.myUiButton:not(.myUiDisabled):hover, .myUiButtonFullWidth:not(.myUiDisabled):hover {background-color:var(--myUiHoverBg);cursor:pointer;}

#licencePage {padding:0;margin:0}
#licencePage #errorDiv {position:relative;padding:10px 0;width:100%;
top:0;left:0;text-align:center;background-color:black;color:white;}
#licencePage img.xsmall { width:40px }
#licencePage img.small  { width:50px }
#licencePage img.medium { width:60px }
#licencePage img.large  { width:70px }
#licencePage table { box-sizing:border-box; margin:10px auto 0; border-collapse:collapse; }
#licencePage td { width:25%; vertical-align:top; text-align:center; }
#licencePage tr.pic>td { padding-top:10px; }
#licencePage tr.bottom>td { vertical-align:bottom }
#licencePage tr.licence td { font-weight:bold }
#licencePage tr.price td { font-style:italic; font-size:80%}
/*#licencePage td.malicence { border:solid 3px brown!important;}*/
#licencePage ul { margin: 0; padding-left: 20px; }
#licencePage a {text-decoration:none; }
#licencePage .textDiv a {color:var(--txtColored01); }

#licencePage .scrollable {overflow:auto;}
#licencePage #currentLicence  table { width:calc(100% - 40px);}
#licencePage #compareLicences td { width:100px; min-width:100px; }
#licencePage #compareLicences td:first-of-type { text-align:left; }
#licencePage #compareLicences td:nth-of-type(2n) { background-color:var(--clearBg1); }
#licencePage #compareLicences td:nth-of-type(2n+1):not(:first-of-type) { background-color:var(--clearBg2); }
/*#licencePage #compareLicences tr:nth-of-type(3) td:not(:first-of-type){ border-bottom:solid 1px black; }/*starting after 3rd row*/
#licencePage #compareLicences tr:nth-of-type(n+3) td{ padding:10px 0; border-bottom:dotted 1px white; }/*starting at 3rd row*/
#licencePage #compareLicences img.yesNo{width:15px;margin-bottom:-2px;}

#licencePage #compareLicences tr:first-of-type td:not(:first-of-type){border-top:solid 1px black;}
#licencePage #compareLicences tr:last-of-type td:not(:first-of-type){border-bottom:solid 1px black;}
#licencePage #compareLicences td:last-of-type{border-right:solid 1px black;}
#licencePage #compareLicences td:nth-of-type(2){border-left:solid 1px black;}
#licencePage col.malicence { border:solid 4px var(--infoBorder)!important;}

.payButton {
	padding:6px 0px; 
	background-color:var(--beeBtnBgActif); 
	}
.payButton>div {
	padding:8px 0 12px; text-align:center;
	color:white;border-top:solid 2px white;border-bottom:solid 2px white;
	font-family:"arial black", "arial", "sans serif"; font-weight:bold; font-size:18px;
	}
.payButton img { display:inline-block; width:40px; margin-bottom:-10px;padding-left:5px;}
.bottomBanner{position:fixed;bottom:0;left:0;right:0;}