* { box-sizing: border-box; }
ul { padding-left: 20px ; }
html, body {  font-family: sans-serif; font-family: var(--lnb-font-text); font-size: 14px; }
a { color: inherit;}

/***********************************************************************************/
/* STRUCTURE GLOBALE DES PAGES --------------------------------------------------- */

#wrapper-content {
	box-sizing: border-box;
	position: relative;
	padding: 70px 15px 0;
	min-height: 100%;
}

#page-alerts {
	min-width: 40vw;
	max-width: 80vw;
	position: fixed; 
}
	
/***********************************************************************************/
/* CLASSES GENERIQUES ------------------------------------------------------------ */

.read { -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -o-user-select: none; -ms-user-select: none;}
.lba_write { -webkit-user-select: text; -moz-user-select: text; user-select: text; -webkit-touch-callout: default; -khtml-user-select: text; -o-user-select: text; -ms-user-select: text;}
.hide { display: none;}
.hide-important { display: none !important; }
.hide-safari { visibility:hidden; width: 1px;} /* use to allow works on input hidden on safari */
.align-right { float: right;}
.text-right { text-align: right; }
.hack-align { opacity: 0;}
.clear { clear: both;}
.ligne { padding: 5px 10px 5px 10px;}
.bordure { border: 1px solid #999;}
.label_small { font-size: 12px; color: #5a5e6b; }
i.disabled { color: #ddd; cursor: default !important}

/***********************************************************************************/
/* Menu bar ---------------------------------------------------- */

#authoring_menu {
	position: fixed;
	display: flex;
	top: 0; z-index: 200;
	width: 100%; min-width: 1100px; height: 40px; border-bottom: 1px solid #ccc; background-color: #ededed;
}
.authoring_menu_div {
	line-height: 39px;
	display: inline-block;
	font-size: 16px;
	border-left: 1px solid #bababa;
}
#authoring_menu a {
	text-decoration: none;
}

#authoring_menu .on { color: #eee; background-color: var(--lnb-blue-color); }
#authoring_menu .off { color : #666; cursor: pointer; }
#authoring_menu .off:hover { background-color: #fff; }
#authoring_menu + * { margin-top: 40px; }
.authoring_menu_item { padding: 0 12px; }
.authoring_menu_item > img { vertical-align: middle; border-radius: var(--lnb-xlight-border-radius); }
.authoring_menu_item .fa-file { padding: 0 9px;  }
.authoring_menu_item .fa, .authoring_menu_item .far  { font-size: 20px; cursor: pointer; padding-bottom: 8px; }
.authoring_menu_item .fa-envelope {
	color: var(--lnb-green-color);
	font-size: 50%;
	position: absolute;
	left: 0;
	right: 0;
	top: 15%;
}
.authoring_menu_item .fa-layers-counter {
	display: none;
	top: 40%;
	right: 5%;
	background-color: var(--lnb-orange-color);
}
#authoring_menu ul.breadcrumb { padding-left: 0px; list-style-type: none; }

/*
 * Breadcrumb inspired from https://codepen.io/Aidewebmaster/pen/JoNYOG
 */
.breadcrumb li {
	text-decoration: none;
	outline: none;
	display: block;
	float: left;
	font-size: 16px;
	line-height: 39px;
	padding: 0 10px 0 20px;
	position: relative;
}
/*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
.breadcrumb li:first-child {
	border-left: 1px solid #bababa;
	padding: 0 10px 0 0;
}

/*hover/active styles*/
.breadcrumb li.off:hover{
	background: #fff;
}
.breadcrumb li.off:hover:after {
	background: #fff;
}

/*adding the arrows for the breadcrumbs using rotated pseudo elements*/
.breadcrumb li:after {
	content: '';
	position: absolute;
	top: 0; 
	right: -19px; /*half of square's length*/
	/*same dimension as the line-height of .breadcrumb a */
	width: 39px; 
	height: 39px;
	/*as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's: 
	length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem)
	if diagonal required = 1; length = 1/1.414 = 0.707*/
	transform: scale(0.707) rotate(45deg);
	/*we need to prevent the arrows from getting buried under the next link*/
	z-index: 1;
	/*background same as links but the gradient will be rotated to compensate with the transform applied*/
	background: #ededed;
	/*stylish arrow design using box shadow*/
	box-shadow: 1px -1px 0 0 #8e8e8e;
}
.breadcrumb li.on:after {
	background: var(--lnb-blue-color);
}

/*we dont need an arrow after the last link*/
.breadcrumb li:last-child:after {
	content: none;
}

/***********************************************************************************/
/* COMMUN - TABLEAUX  NOUVEAU ---------------------------------------------------- */

/**
 * table-base default values
 */
.table-base tr[role] > th, .table-base .description-row > th, .table-base tr[role] > td, .table-base .description-row > td {
	text-align: center; border-right: 1px solid #bababa; box-sizing: content-box;
}
.table-base tr[role] td { padding: 5px 7px; }
.table-base tr[role] > *:first-child, .table-base .description-row > *:first-child { border-left : 1px solid #bababa; }

/**
 * table-base body
 */
.table-base tbody select{width : 80%;}
.table-base tbody td {
	word-wrap: break-word;
}
.table-base tbody tr.odd { color: #4b4b4b; background-color: #EEF4F5; }
.table-base tbody tr.even { color: #4b4b4b; background-color: #fff; }
.table-base tbody tr.description-row > td,
.table-base tbody tr.description-row:hover > td {
	border-bottom: 1px solid #909090;
	background-color: #f9f9f9;
	color: #3b3b3b;
	font-size: 13px;
}

/* pour la recherche dans un tableau dynamique */
.table-base tbody tr.tr-type-1 {background-color: #f2f2f2;}
.table-base tbody tr.tr-type-2 {background-color: #fff;}

/**
 * table-base headers
 */
.table-base thead th, .table-base thead td {border-bottom: thin solid #bababa;}
.table-base tfoot th {border-top: thin solid #bababa; 	text-align: center;}
.table-base thead > *,
.table-base tfoot > * {
	background-color: var(--lnb-light-grey-color);
	font-size: 16px;
	color: var(--lnb-charcoal-grey-color);
}
.table-base thead i {display : inline-block; margin : 0 6px 0 3px; cursor : pointer; }
.table-base thead select {width: 100%;height: 100%;overflow: hidden;font-size: 12px;cursor: pointer;padding: 1px;}
.lba-context-icons { color: var(--lnb-blue-color); }

.table-base th {
	font-weight: normal;
	text-align: left;
}

.table-base th > div {
	font-weight: normal;
	display: inline-block;
}

/**
 * table-base default content style
 */
.table-base .tb-triable{cursor : pointer;}
.table-base td .bold{	font-weight : bold;}
.table-base td .align-left{text-align : left;}

/**
 * champs de recherche
 */
.tb-search {
	margin-left: 10px;
}
.tb-search .search-input {
	min-width: 14ex;
	max-width: 18ex;
	padding: 2px;
}
/**
 * extention des lignes du tableau (en bleu)
 */
.expanded td{text-align : justify;}
.expanded p { padding: 3px 0 ; }
.table-base tbody tr[role] {
	cursor: pointer;
}
.table-base tbody tr[role="row"]:hover td,
.table-base tbody tr[role="row"]:hover span,
.table-base tbody tr.highlighted td,
.table-base tbody tr.highlighted span{
	background-color: var(--lnb-blue-color);
	color: #fff;
	cursor: pointer;
}

.table-base tbody tr.expanded {background-color : #f9f9f9; color: #4b4b4b ; font-size: 12px; }
.table-base tbody tr.expanded td { border: thin solid #bababa; padding: 8px; }

th.actions {
	text-align: right;
}

/**
 * popups spécifiques
 */
#te-popup { min-width: 520px; font-size: 13px; overflow: visible; }
.subsection { padding-left: 24px; }
.subsection tr td:first-of-type { white-space: nowrap; }
#te-learners-list { margin-bottom: 4px ; }
#te-add-learner { margin-right: 7px;  }
#te-add-learner-temp { display: none; }
#te-add-learner { width: 300px; }
#te-send-mail { margin-top: 8px; }
#te-student-addition-deletion-danger { 
	display: none;
	color: var(--lnb-danger-color);
}
.te-icon { display: inline-block; width: 13px; color: #888; }



/* entête du tableau */
.table-caption {
	margin: 1ex 0 0 0;
	background-color: var(--lnb-light-grey-color);
	color : var(--lnb-charcoal-grey-color);
	border: 1px solid #bababa;
	line-height: 34px;
	width: 100%;
}

section.width-small {
	width: 400px;
	display: inline-block;
}
section.width-medium {
	width: 650px;
	display: inline-block;
}
section.width-full {
	width: 1060px;
}

.table-caption strong {
	font-size: 16px;
	line-height: 24px;
	vertical-align: baseline;
	padding:5px 10px 5px 10px;
	display: inline-block;
}
.table-caption .actions {
	float: right;
	height: 34px;
	display: flex;
	align-items: center;
}
.table-caption > span  {
	white-space: nowrap;
}
.pagination-size  {
	padding: 2px;
}
.dataTables_length {
	margin-left: 10px;
	margin-right: 5px;
}
.table-captionselect {
	width: 100%;
	height: 100%;
	overflow: hidden;
	font-size: 12px;
	cursor: pointer;
	padding: 1px;
}
table.dataTable tfoot th {
	border-bottom: 1px solid #bababa;
	border-top: 1px solid #bababa !important;
	border-right: 1px solid #bababa;
	font-weight: normal !important;
}
.table-base tfoot tr > :first-child {
	border-left: 1px solid #bababa;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
	cursor: pointer;
}

table.dataTable thead tr th {
	border-bottom: 1px solid #bababa;
}

.dataTables_wrapper .dataTables_paginate {
	background-color: var(--lnb-light-grey-color);
	padding-bottom: 3px;
	border: 1px solid #bababa;
	border-top: none;
}

.table-caption .dataTables_length {
	display: inline-block;
	font-size: 14px;
}

.table-caption a {
	font-size: 16px;
	cursor: pointer;
    margin-right: 7px;
}

.display-archives {
	margin-left: 10px;
	margin-right: 5px;
}

.mission-list-teacher {
	padding-top: 12px !important;
}
.mission-list-teacher label {
	font-weight: bold;
}

#reports thead td {
	border-bottom: 1px solid #bababa;
}

#reports tfoot td {
	text-align: left;
	border-bottom: 1px solid #bababa;
	border-top: 1px solid #bababa;
}

/* entrées spécifiques */
#mi-popup input {
	margin: 4px 12px 0 0;
	padding: 2px 4px;
}
#mi-add-code{
	width: 130px;
}
#mi-add-name {
	width : 440px;
}

.dataTables_paginate {
	font-size: small;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
	padding: 0.5ex 1ex;
}

section.width-full + section {
	margin-top: 1.5em;
}


#le-add-studentnumbers-popup p {
	margin-bottom: 0.7ex;
}

dl dt{
	float: left;
	clear: left;
	width: 3ex;
	text-align: right;
	padding-right: 1ex;
}

#reports .lba-context-actions {
	color: var(--lnb-blue-color);
}

#reports-table th:nth-child(6) {
	text-align: center;
}

.actions-inactive > .single-action,
.actions-inactive > .batch-action,
a.actions-inactive,
.actions-inactive.batch-action,
.single-action--inactive,
a#ra-see.action-inactive
{
	color: #808080;
	opacity: .4;
    cursor: default;
}

.status-archive {
    font-style: italic;
	color: var(--lnb-strong-green-color);
}

#t-popup {
	min-width : 400px;
	max-width: 400px;
}
#t-popup label, .t-fieldset label {
	display: inline-block;
	text-align: right;
	padding-right: 3px;
}
.t-fieldset label { width: 180px; }
#t-add-send-email-div { text-align: center; }
.t-add-ldap button {
	padding: 0 5px;
	margin: 8px 5px 3px 0;;
	cursor: pointer;
}
#t-popup-method div { padding: 2px 0; }

/** Teacher messagerie **/
#teacher-messagerie {
	border: 1px solid #bababa;
}
#teacher-messagerie #title-messagerie{
	font-weight: bold;
	padding: 5px 10px;
	color: var(--lnb-strong-green-color);
	font-size: 16px;
	background-color: #e5e8e1;
}

#teacher-messagerie #messagerie{
	width: auto;
	min-height: 250px; 
}


.edit-user-fieldset {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.edit-user-label {
	display: flex;
	align-items: center;
	gap: 5px;
}
.edit-user-label span {
	flex-shrink: 0;
	min-width: 190px;
	flex-basis: 40%;
	text-align: right;
}
.edit-user-radio-div {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.add-user-homonymes-wrapper {
	padding: 5px;
	background-color: var(--lnb-white-color);
	outline: 1px solid var(--lnb-charcoal-grey-color);
	margin: 5px 0;
}	
.add-user-homonyme-title {
	display: flex;
	align-items: center;
	gap: 5px;
	justify-content: space-between;
	font-weight: bold;
	margin-bottom: 5px;
}
.add-user-homonyme-item {
	display: flex;
	align-items: center;
	gap: 5px;
}
.add-user-homonymes-list {
	margin-top: 5px;
	max-height: 100px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 5px;
}