.color-green {
	color: #689d12;
}

.color-green-light {
	color: #d3e9af;
}

.back-green-light {
	background: #d3e9af !important;
}

.color-red {
	color: #f94c5c;
}

.color-red-light {
	color: #facfd3;
}

.back-red-light {
	background: #facfd3 !important;
}

.color-orange {
	color: #f1a026;
}

.color-blue {
	color: #6f9fb4;
}

.color-black {
	color: #000000;
}

.color-white {
	color: #ffffff;
}

.color-gray {
	color: #aaaaaa;
}

.color-gray-light {
	color: #f3f3f3;
}

.back-gray-light {
	background: #f3f3f3 !important;
}


.isi-row-color1 {
	background: #ffffff;
}

.isi-row-color2 {
	background: #d7dbe1;
}

.tag-business {
	border-radius: 50%;
	width: 20px; 
	height: 20px;
	font-weight: 700;
	color: #ffffff;
	background: #6e9ecf;
}

.isi-text-code {
	font-size: 16px;
	line-height: 20px;
	letter-spacing: .2px;
	padding: 12px;
	text-align: center;
	width: 50px;
	height: 54px;
	border-radius: 0px;
}

.OPCO-font {
	font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; 
	color: var(--color-primary) !important;	
}

p {
	font-family: unset !important;
}

label > ul {
	color: var(--color-primary) !important;	
}


.isi-box-report {
	display: flex;
	width: 100%;
	flex-direction: column;
	height: 140px;
}

.isi-report-title {
	justify-content: flex-start;
	font-size: 140%;
	color: #fff;
	text-transform: uppercase;
}

.isi-report-value {
	font-size: 300%;
	color: #ffffff;
	display: flex;
	justify-content: center;
}

.not-available {
	display:none !important;
}

.editable {
	overflow-y: auto;
}

.k-thumbnail.thumb-small {
	font-size: 0.95rem;
	width: 130px;
}

.pageActivity {
	position: absolute; 
	top: -60px;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 1000;
	background: #ffffff;
	overflow-y:auto;
}

.openLeftMenu {
	position: fixed; 
	height: 42px; 
	width:32px; 
	top:150px; 
	left: 0px; 
	background: #fafafa;
	z-index: 100;
	text-align:center;
	line-height: 42px;
	border: 1px solid #c9c9c9; 
	border-radius: 0px 5px 5px 0px;
}

.openRightMenu {
	position: fixed; 
	height: 42px; 
	width:32px; 
	top:150px; 
	right: 0px; 
	background: #fafafa;
	z-index: 100;
	text-align:center;
	line-height: 42px;
	border: 1px solid #c9c9c9; 
	border-radius: 5px 0px 0px 5px;
}


.leftMenu {
	z-index: 250 !important;
	left: 0px;
	top: 40px !important;
	border-left: 1px solid #e6e6e6 !important;
	background:#fafafa !important;
	width: 170px !important;
}

.leftMenuLarge {
	width: 300px !important;
}

.rightMenu {
	z-index: 250 !important;
	right: 0px;
	top: 40px !important;
	border-left: 1px solid #e6e6e6 !important;
	background:#fafafa !important;
	width: 240px !important;
}

.isi-chat {
	z-index: 300 !important;
	right: 0px;
	top: 40px !important;
	border-left: 1px solid #e6e6e6 !important;
	background:#fafafa !important;
	width: 340px !important;
	
}


.isi-chat-history {
	height: inherit; 
	display: flex;
	padding: 10px;
    border-bottom: 2px solid white;
    overflow-y: auto;
}

.isi-chat-history .message-data {
	margin-bottom: 2px;
	font-size: 85%;
}

.isi-chat-history .message-data-time {
  color: #a8aab1;
  padding-left: 6px;
}

.isi-chat-history .message {
  color: white;
  padding: 10px;
  line-height: 26px;
  font-size: 90%;
  border-radius: 7px;
  margin-bottom: 20px;
  width: 90%;
  position: relative;
}

.img-round {
	border-radius: 50%;
}
 
/*
.isi-chat-history .message:after {
  bottom: 100%;
  left: 7%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-bottom-color: #86BB71;
  border-width: 10px;
  margin-left: -10px;
}
*/
.isi-chat-history .my-message {
  background: #86BB71;
}
.isi-chat-history .other-message {
  background: #94C2ED;
}
.isi-chat-history .other-message:after {
  border-bottom-color: #94C2ED;
  left: 93%;
}
.isi-chat-message {
  padding: 10px;
}

.isi-chat-msg-reply {
	border: 1px solid #cccccc; 
	background: #f1f1f1;
	margin: 5px;
	color: #333333;
	padding: 3px;
}


.titleLeftMenu {
	height: 4vh;
	background: #eeeeee;
	text-align: center;
}

.contentMenu {
	overflow-y: scroll;
	height: 80vh;
	overflow-x: hidden;	
	background: #fafafa;
}

.newOptMenu {
	height: 6vh;
	line-height: 6vh;
	border-top: 1px #dddddd solid;
	text-align: center; 
	vertical-align: middle;
	cursor: pointer;
}

.toolBarMenu {
	position:relative;
	width: 28px;
	height:auto;

	z-index:1000;
	right: 14px;
}


.buttonToolBarMenu {
	border: 0px;
	padding-left:0px;
	padding-right: 0px;
	padding-top: 5px; 
	padding-bottom: 0px;
	background: transparent;
}

.topBar {
	width: 100%;
	border-bottom: 1px solid #cccccc;
	height: 40px;	
}

.topBarButton {
	border: 0px;
	margin-right: 8px;
	margin-top: -6px;
	background: transparent;
}

.pan {
	width: 80%;
	height: 88vh; 
	border: 1px solid #cccccc; 
	box-shadow: 5px 5px 15px 5px #dddddd; 
	margin-top: 20px;
	margin-right: 20px; 
	margin-left: auto;	
	overflow-y: auto;
	border-radius: 6px;
}

.panActivity {
	width: 75%;
	min-height: 90vh; 
	border: 1px solid #cccccc; 
	box-shadow: 5px 5px 15px 5px #dddddd; 
	margin-top: 6px;
	margin-right: auto; 
	margin-left: auto;	
	overflow-y: auto;
	border-radius: 6px;
	overflow-x: hidden;
	margin-bottom: 15px;
}

.panActivityVideo {
	min-height: 75vh; 
}

.panActivitySlide {
	min-height: 90vh; 
}


.panTitle {
	text-align: left;
	border-bottom: 1px solid #cccccc;
	height: 30px;
}

.panTitleAct {
	height: 36px;
	line-height: 36px;
	margin-top: 0px;
	z-index: 10;
	background: #ffffff;
}

.panTitleText {
	font-size: 120%; 
	color: #ffffff;
	font-weight: 700;
}

.panTitleConsigne {
	font-size: 120%; 
	color: #aaaaaa;
	font-weight: 700;
}


.panSubTitle {
	font-size: 110%;
	color: #aaaaaa;
	margin-top: 5px;
}

.panSubTitle2 {
	font-size: 110%;
	color: #aaaaaa;
	font-weight: 600;
	margin-top: 5px;
	margin-bottom: 10px;
	padding-left: 15px;
}

.subTitle-activity {
	font-weight: 700;
	font-size: 110%;
}


.panTitleButton {
	border: 0px;
	margin-right: 8px;
	margin-top: -6px;
	background: transparent;
	color:#ffffff;
	font-size:90%;
}

.butActivity {
	float: left; 
	width: 180px;
	height: 142px;
	border: 1px solid #cccccc; 
	border-radius: 5px; margin: 10px;
	cursor: pointer;
}

.butSmallActivity {
	height: 110px;
}

.butCenter {
	float: unset;
	margin-left: auto;
	margin-right: auto;
}

.butActivityImg {
	text-align: center;
	min-height:55px;
	margin-top: 10px;
	color:#aaaaaa;
}

.butActivityTitle {
	text-align: center;
	font-weight:700;
	font-size: 95%;	
}

.butActivityComment {
	text-align: center;
	font-style:italic;
	font-size: 80%
}

.labActivity {
	color: #666666;
	font-weight: 300;
}

.panFooter {
	border-top: 1px solid #cccccc;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 10px;
}

.ToolBarObject {
	text-align: center;
	height: 85px;
}

.TB_Vertical {
	float: right; 
	margin-right: -45px;
	width: 45px;	
}

.TB_Vertical_Elem {
	height: 45px; 
	display: flex;
	background: #eeeeee;
	border: 1px solid #ffffff;
}

.circleButton {
	width: 35px;
	height: 35px;
	padding-left: 0px;
	padding-right: 0px;
    border-radius: 50%;
}

.butColor {
	border: 1px solid #cccccc;
}

.panMiniSlide {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
	width: 100%;
	height: 100%;	
}

.ImgMinSlide {
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
	color: #aaaaaa;
}

.ImgMinSlide_h {
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
	color: #aaaaaa;
	display: flex;
	align-items: center;
	width: 80%;
}

.PanLiActivity {
	cursor: pointer; 
	overflow:hidden;
	height: 90px;
	border: 1px solid #dddddd;
	border-radius: 5px;
    height: 100%;
    margin-bottom: 0px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
	background: #ffffff;
}



.butStart {
	background: #a4d555;
    color: #ffffff;
    border-color: #a4d555;
	border-radius: 0px;
}

.butStop {
	background: #fc7155;
    color: #ffffff;
    border-color: #fc7155;
	border-radius: 0px;
}

.butRestart {
	background: #5586a4;
    color: #ffffff;
    border-color: #5586a4;
	border-radius: 0px;
}

.queryCheck {
	color : #a9d340;
}

.queryUncheck {
	color : #828282;
}

.butRadioUncheck {
	padding: 0px;
    border-radius: 25px;
    width: 25px;
    height: 25px;
    background: #ffffff;
    border: 1px solid #aaaaaa;	
}

.butRadioCheck {
	padding: 0px;
    border-radius: 25px;
    width: 25px;
    height: 25px;
    background: #ffffff;
    border: 1px solid #a9d340;	
}

.flexBrain {
	display: flex; 
	flex-flow: row wrap; 
	justify-content: space-around; 
	margin-top: 10px; 
	margin-bottom: 10px;
}

.elemBrain {
	display: flex;
	flex-direction: row;
	justify-content:space-between;
	padding: 5px; 
	width: 200px !important; 
	height: 40px;
	color: #000000;
	text-align: left;	
}

.footerActivity {
	display: flex; 
	margin-top: auto; 
	justify-content: space-around; 
	/*border-top: 1px solid #cccccc;*/
	padding: 5px;
	max-width: 900px;
}

.lst-brain {
	border: 1px dotted #cccccc;
	padding: 5px;
	width: 200px !important;
	min-width: 200px;
}

.initial-user {
	margin-top: -17px;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 9pt;
    text-align: center;	
	padding-top: 2px;
	color: #000000;
}

.brain-Text {
	display: flex; 
	justify-content: space-between; 
	background: #eeeeee;
	margin-top: 5px;
	padding: 10px;
	width: 100%;
	font-size: 10pt;
	min-height: 55px;
}

.rigth-Brain {
	display: flex; 
	flex-direction: column;
}

.btn-small {
	min-width: unset;
	padding-left: 5px;
	padding-right: 5px;
}

.input-brain {
	width: 145px;
	color: #000000;
}

.lst-elem-brain {
	width: 190px !important;
}

.ui-state-disabled {
	opacity: unset;
	box-shadow: unset;
}

.ui-state-hover li {
	box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;;
	transition: all 200ms ease-out;
}


/* Gestion des propositions de questions */
.inputGroup {
	 background-color: #fff;
	 display: block;
	 margin: 10px 0;
	 position: relative;
	 border: 1px solid #dddddd;
	 box-shadow: 2px 2px 10px 2px #dddddd; 
}
 .inputGroup label {
	 padding: 12px 30px;
	 width: 100%;
	 display: block;
	 text-align: left;
	 color: #3c454c;
	 cursor: pointer;
	 position: relative;
	 z-index: 2;
	 transition: color 200ms ease-in;
	 overflow: hidden;
	 margin-bottom: 0px;
}
 .inputGroup label:before {
	 width: 100%;
	 height: 10px;
/*	 border-radius: 50%;*/
	 content: '';
	 background-color: #6f9fb4;
	 position: absolute;
	 left: 34%;
	 top: 50%;
	 transform: translate(-50%, -50%) scale3d(1, 1, 1);
	 transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
	 opacity: 0;
	 z-index: -1;
}
 .inputGroup label:after {
	 width: 32px;
	 height: 32px;
	 content: '';
	 border: 2px solid #d1d7dc;
	 background-color: #fff;
	 background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
	 background-repeat: no-repeat;
	 background-position: 2px 3px;
	 border-radius: 50%;
	 z-index: 2;
	 position: absolute;
	 right: 30px;
	 top: 50%;
	 transform: translateY(-50%);
	 cursor: pointer;
	 transition: all 200ms ease-in;
}
 .inputGroup input:checked ~ label {
	 color: #fff;
}
 .inputGroup input:checked ~ label:before {
	 transform: translate(-50%, -50%) scale3d(125, 56, 1);
	 opacity: 1;
}
 .inputGroup input:checked ~ label:after {
	 background-color: #a9d340;
	 border-color: #a9d340;
}
.inputGroup:after {
	border: none;
}

 .inputGroup input {
	 width: 32px;
	 height: 32px;
	 order: 1;
	 z-index: 2;
	 position: absolute;
	 right: 30px;
	 top: 50%;
	 transform: translateY(-50%);
	 cursor: pointer;
	 visibility: hidden;
}
/* Fin Gestion des propositions de questions */

/* Style des étoiles */
.br-widget {
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
}

.br-theme-css-stars .br-widget a {
    height: 65px;
    width: 65px;
    font-size: 65px;
}

.br-theme-fontawesome-stars-o .br-widget a {
    font-size: 65px;
	height: 65px;
	
}

.br-theme-fontawesome-stars-o .br-widget a.br-selected:after {
	color: #EDB867;
}
/* Fin Style des étoiles */

/* Style des barres de progression */
.bar-container {
	width: 100%;
	background-color: #f1f1f1;
	text-align: center;
	color: white;	
}

.bar-unselect {
	height: 9px; 
	background-color: #fc7155;
}

.bar-select {
	height: 9px; 
	background-color: #a9d340;
}

.bar-undefined {
	height: 9px; 
	background-color: #6f9fb4;
}

/* Fin Style des barres de progression */

/* Style Msg bonne/mauvaise réponse */
.panMsg {
	position: absolute; 
	left: 50%;
	top: 50%;
	background: #ffffff; 
	width: 500px; 
	height: 280px;
	margin-left: -250px;
	margin-top: -140px;
	font-size: 300%;
	color: #ffffff;
}

.msgGood {
	background: #a9d340;
}

.msgBad {
	background: #DC143C;
}

.contentMsg {
	line-height: 280px;
	margin-left: 45px; 
}

/* fin Style Msg bonne/mauvaise réponse */

.msgGoogAnswer {
	font-size: 300%;
}

.butInsert {
	display: inherit;
	padding: 0px;
	margin-left:auto; 
	margin-right:auto;
	color: #a9d340;
}


.titleQuery {
	margin-top: 20px;
}

.reportDiv{
	padding-bottom: 20px;
	border-bottom: 1px dashed #cccccc;
}

.propalQuery {
/*	background: #f1f1f1; */
}

.btnQuery {
	background: #a9d340;
    color: #ffffff;
    border-radius: 0px;
    font-size: 120%;
	border: 2px solid #a9d340;
}

.divLeft {
	border-top: 1px solid #cccccc;
	height: 79vh;
	padding-top: 20px;
}

.divRight {
	border-top: 1px solid #cccccc;
	border-left: 1px solid #cccccc;
	height: 79vh;
}

.statTitleQuery {
	border-top: 1px dashed #cccccc;;
}

.numQuery {
	margin-right: 5px;
    width: 39px;
    height: 39px;
    background: #6f9fb4;
    float: left;
    text-align: center;
    margin-top: 1px;
    border-radius: 4px;
    color: #fff;
	font-size: 175%;
}

.panInfo {
	font-style:italic;
	background: #e2f1fb;
	padding: 5px;
	color: #255172;
}

.goodAnswer {
	color : #a9d340;
}

.badAnswer {
	color : #f94c5c;
}

.ptAnswer {
	width: 45px;
	height: 45px;
	background: #f9f9f9;
	border-radius: 4px;
	text-align: center;
	font-size:110%;
}
.gold {
	color: #ffd700;
}

.panFeedback {
	background: #fafafa;
	margin-top: 10px;
	border: 1px solid #bbbbbb;
}

/* Gestion des checks, radios graphiques pour le cloud word */


:root {
	--white: #ffffff;
	--light: #f0eff3;
	--black: #000000;
	--dark-blue: #1f2029;
	--dark-light: #6f9fb4;
	--red: #a9d340;
	--yellow: #a9d340;
	--grey: #ecedf3;
}

/* #Primary
================================================== */


::selection {
	color: var(--white);
	background-color: var(--black);
}
::-moz-selection {
	color: var(--white);
	background-color: var(--black);
}
mark{
	color: var(--white);
	background-color: var(--black);
}
.section {
    position: relative;
	width: 100%;
	display: block;
	text-align: center;
	margin: 0 auto;
}
.over-hide {
    overflow: hidden;
}
.z-bigger {
    z-index: 100 !important;
}


.background-color{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--dark-blue);
	z-index: 1;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.checkbox:checked ~ .background-color{
	background-color: var(--white);
}


.specificChk:checked,
.specificChk:not(:checked),
.specificChk:checked,
.specificChk:not(:checked){
	position: absolute;
	left: -9999px;
	width: 0;
	height: 0;
	visibility: hidden;
}
.checkbox:checked + label,
.checkbox:not(:checked) + label{
	position: relative;
	width: 70px;
	display: inline-block;
	padding: 0;
	margin: 0 auto;
	text-align: center;
	margin: 17px 0;
	margin-top: 100px;
	height: 6px;
	border-radius: 4px;
	background-image: linear-gradient(298deg, var(--red), var(--yellow));
	z-index: 100 !important;
}
.checkbox:checked + label:before,
.checkbox:not(:checked) + label:before {
	position: absolute;
	font-family: 'unicons';
	cursor: pointer;
	top: -17px;
	z-index: 2;
	font-size: 20px;
	line-height: 40px;
	text-align: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.checkbox:not(:checked) + label:before {
	content: '\eac1';
	left: 0;
	color: var(--grey);
	background-color: var(--dark-light);
	box-shadow: 0 4px 4px rgba(0,0,0,0.15), 0 0 0 1px rgba(26,53,71,0.07);
}
.checkbox:checked + label:before {
	content: '\eb8f';
	left: 30px;
	color: var(--yellow);
	background-color: var(--dark-blue);
	box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);
}

.checkbox:checked ~ .section .container .row .col-12 p{
	color: var(--dark-blue);
}


.checkbox-tools:checked + label,
.checkbox-tools:not(:checked) + label{
	position: relative;
	display: inline-block;
	padding: 20px;
	width: 110px;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 1px;
	margin: 0 auto;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 10px;
	text-align: center;
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
	text-transform: uppercase;
	color: var(--white);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.checkbox-tools:not(:checked) + label{
	background-color: var(--dark-light);
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.checkbox-tools:checked + label{
	background-color: transparent;
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-tools:not(:checked) + label:hover{
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-tools:checked + label::before,
.checkbox-tools:not(:checked) + label::before{
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 4px;
	background-image: linear-gradient(298deg, var(--red), var(--yellow));
	z-index: -1;
}
.checkbox-tools:checked + label .uil,
.checkbox-tools:not(:checked) + label .uil{
	font-size: 24px;
	line-height: 24px;
	display: block;
	padding-bottom: 10px;
}

.checkbox:checked ~ .section .container .row .col-12 .checkbox-tools:not(:checked) + label{
	background-color: var(--light);
	color: var(--dark-blue);
	box-shadow: 0 1x 4px 0 rgba(0, 0, 0, 0.05);
}

.checkbox-budget:checked + label,
.checkbox-budget:not(:checked) + label{
	position: relative;
	display: inline-block;
	padding: 0;
	padding-top: 20px;
	padding-bottom: 20px;
	width: 260px;
	font-size: 52px;
	line-height: 52px;
	font-weight: 700;
	letter-spacing: 1px;
	margin: 0 auto;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 10px;
	text-align: center;
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
	text-transform: uppercase;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
	-webkit-text-stroke: 1px var(--white);
    text-stroke: 1px var(--white);
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    color: transparent;
}
.checkbox-budget:not(:checked) + label{
	background-color: var(--dark-light);
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.checkbox-budget:checked + label{
	background-color: transparent;
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-budget:not(:checked) + label:hover{
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-budget:checked + label::before,
.checkbox-budget:not(:checked) + label::before{
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 4px;
	background-image: linear-gradient(138deg, var(--red), var(--yellow));
	z-index: -1;
}
.checkbox-budget:checked + label span,
.checkbox-budget:not(:checked) + label span{
	position: relative;
	display: block;
}
.checkbox-budget:checked + label span::before,
.checkbox-budget:not(:checked) + label span::before{
	position: absolute;
	content: attr(data-hover);
	top: 0;
	left: 0;
	width: 100%;
	overflow: hidden;
	-webkit-text-stroke: transparent;
    text-stroke: transparent;
    -webkit-text-fill-color: var(--white);
    text-fill-color: var(--white);
    color: var(--white);
	-webkit-transition: max-height 0.3s;
	-moz-transition: max-height 0.3s;
	transition: max-height 0.3s;
}
.checkbox-budget:not(:checked) + label span::before{
	max-height: 0;
}
.checkbox-budget:checked + label span::before{
	max-height: 100%;
}

.checkbox:checked ~ .section .container .row .col-xl-10 .checkbox-budget:not(:checked) + label{
	background-color: var(--light);
	-webkit-text-stroke: 1px var(--dark-blue);
    text-stroke: 1px var(--dark-blue);
	box-shadow: 0 1x 4px 0 rgba(0, 0, 0, 0.05);
}

.checkbox-booking:checked + label,
.checkbox-booking:not(:checked) + label{
	position: relative;
	display: -webkit-inline-flex;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-align-items: center;
	-moz-align-items: center;
	-ms-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	-moz-justify-content: center;
	-ms-justify-content: center;
	justify-content: center;
	-ms-flex-pack: center;
	text-align: center;
	padding: 0;
	padding: 6px 25px;
	font-size: 14px;
	line-height: 30px;
	letter-spacing: 1px;
	margin: 0 auto;
	margin-left: 6px;
	margin-right: 6px;
	margin-bottom: 16px;
	text-align: center;
	border-radius: 4px;
	cursor: pointer;
    color: var(--white);
	text-transform: uppercase;
	background-color: var(--dark-light);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.checkbox-booking:not(:checked) + label::before{
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.checkbox-booking:checked + label::before{
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-booking:not(:checked) + label:hover::before{
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-booking:checked + label::before,
.checkbox-booking:not(:checked) + label::before{
	position: absolute;
	content: '';
	top: -2px;
	left: -2px;
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	border-radius: 4px;
	z-index: -2;
	background-image: linear-gradient(138deg, var(--red), var(--yellow));
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.checkbox-booking:not(:checked) + label::before{
	top: -1px;
	left: -1px;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
}
.checkbox-booking:checked + label::after,
.checkbox-booking:not(:checked) + label::after{
	position: absolute;
	content: '';
	top: -2px;
	left: -2px;
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	border-radius: 4px;
	z-index: -2;
	background-color: var(--dark-light);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.checkbox-booking:checked + label::after{
	opacity: 0;
}
.checkbox-booking:checked + label .uil,
.checkbox-booking:not(:checked) + label .uil{
	font-size: 20px;
}
.checkbox-booking:checked + label .text,
.checkbox-booking:not(:checked) + label .text{
	position: relative;
	display: inline-block;
	-webkit-transition: opacity 300ms linear;
	transition: opacity 300ms linear;
}
.checkbox-booking:checked + label .text{
	opacity: 0.6;
}
.checkbox-booking:checked + label .text::after,
.checkbox-booking:not(:checked) + label .text::after{
	position: absolute;
	content: '';
	width: 0;
	left: 0;
	top: 50%;
	margin-top: -1px;
	height: 2px;
	background-image: linear-gradient(138deg, var(--red), var(--yellow));
	z-index: 1;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.checkbox-booking:not(:checked) + label .text::after{
	width: 0;
}
.checkbox-booking:checked + label .text::after{
	width: 100%;
}

.checkbox:checked ~ .section .container .row .col-12 .checkbox-booking:not(:checked) + label,
.checkbox:checked ~ .section .container .row .col-12 .checkbox-booking:checked + label{
	background-color: var(--light);
    color: var(--dark-blue);
}
.checkbox:checked ~ .section .container .row .col-12 .checkbox-booking:checked + label::after,
.checkbox:checked ~ .section .container .row .col-12 .checkbox-booking:not(:checked) + label::after{
	background-color: var(--light);
}




.link-to-page {
	position: fixed;
    top: 30px;
    right: 30px;
    z-index: 20000;
    cursor: pointer;
    width: 50px;
}
.link-to-page img{
	width: 100%;
	height: auto;
	display: block;
}
/* Fin Gestion des checks, radios graphiques pour le cloud word */

/* Table CSS */
.div-table {
	margin: 5px;
	width: 100%;
}

.div-table-row {
	width: auto;
	clear: both;
}

.div-table-col {
	width: 200px;        	
}

.col-table-stat {
	border-left: 2px solid #eeeeee;
	height: 70px;
}

.row-table-stat {
	background: #ffffff;
	height: 70px;
	border-bottom: 2px solid #eeeeee;
	border-left:3px solid #cccccc;
	padding: 0px;
}

/* Fin Table css */

.isi-box-training-one-img {
	width: 250px;
	height: 200px;
}

.li-Activity {
	padding: 0px;
}

.nb-activity {
	font-size: 130%;
	font-weight: 700;
}

.panElement {
	padding: 0px;
}

.pan-frame-elearning {
	position: absolute; 
	top:45px;
	width: 75%;
	min-height:90vh;
	background:#ffffff;
}

.frame-elearning {
	height:85vh; 
	width: 74vw;
}

.pull-elearning {
	margin: 0 80px;
}

.panCloud {
	width: 48vw; 
	height: 78vh;
}

.panCloudResult {
	width: 73vw; 
	height: 78vh;
}

.panButTitle {
	text-align: right;
	line-height: 35px;
	padding-right: 40px;
}

.graph-canvas {

}

.btnTopbar {
	color: #999999;
	margin-left: 10px;
}

/***************************************************
 Classes pour les tableaux
***************************************************/
.isi-table {
	display:table;
	width: 100%;
	padding:0px; 
	background: #ffffff;
	height: 30px;
	border-bottom: 2px solid #ffffff;
	margin-top: 10px;	
}

.isi-row {
	display:table-row;
	font-size:90%;
}
.isi-row-header { 
	display:table-row;
	font-size:90%;
}



.isi-cell-header {
	display:table-cell;
	border: 1px solid var(--color-primary-light);
	padding: 3px;
	background: var(--color-primary);
}

div.isi-cell-header > label {
	color: #ffffff;
}

.isi-cell {
	display:table-cell;
	border: 1px solid var(--color-primary-light-2);
	padding: 3px;
}


.isi-text-center {
	text-align: center;
	vertical-align: middle;
}	
.isi-text-left {
	text-align:left;
	vertical-align: middle;	
}	
.isi-text-right {
	text-align:right;
	vertical-align: middle;	
}

.isi-dropzone {
	background: #fafafa; 
	border: 1px solid #eeeeee;
}

/***************************************************
 Classes pour les notifs
***************************************************/
.isi-block-notif {
	background: var(--color-primary);
	align-items: flex-start;
}

.isi-block-notif .h1 {
	color: #ffffff;
	text-transform: uppercase;
	padding-left: 10px;
}

.isi-elem-notif {
	background: var(--color-primary-light-2);
	min-height: 30px;
	display: flex;
	justify-content: space-between;
	margin: 10px;
	width: -webkit-fill-available;
	padding: 10px;
}

.isi-elem-notif button {
	font-size: 230%;
}

.isi-block-report {
	background: #ffffff;
	margin-bottom: 20px;
}

.isi-block-report .h1 {
	color: var(--color-primary);
	text-transform: uppercase;
	padding-left: 10px;
}

.isi-block {
	background: #ffffff;
	margin-bottom: 20px;
}

.isi-block .h1 {
	color: var(--color-primary);
	text-transform: uppercase;
	padding-left: 10px;
}


/***************************************************
 classes pour les slides
***************************************************/
.container-slide {
	display: flex;
	width: 100%;
	height: 100%;
}

.backSlideImg {
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.backSlide {
	height:100%; 
	width: 100%;
	display:flex;
	min-height: 86vh;
}

.titleImgSlide {
	height: 60vh;
	margin:40px;
	width: 80%; 
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;	
/*	top: 0px;
	position: relative;
	transition-duration:1s;
	transition-property:top;
*/
}

.titleImgSlide7 {
	height: 60vh;
	margin: 40px 0px 0px 40px;
	width: 40%; 
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;	
/*	top: 0px;
	position: relative;
	transition-duration:1s;
	transition-property:top;
*/
}


.titleSlide1 {
	height: 20vh;
	width: 100%;
	display: flex; 
	justify-content: space-between;
}

.titleSlide2 {
	height: 60vh;
	width: 60%;
	display: flex; 
	flex-direction: row;
}

.titleSlide7 {
	height: 60vh;
	width: 60%;
	display: flex; 
	flex-direction: column;
	margin: 10px;
}

.titleSlideImg1 {
	margin-left: 31%; 
	height: 100%; 
	margin-top: 14%;
	align-items: center;
}

.titleSlideImg2 {
	margin-left: 0%; 
	height: 100%; 
	margin-top: 14%;
	align-items: center;
}


.boxTitleSlide {
	width: 10%;
	height: 100%;
}

.butSlide {
	float: left;
	margin-left: 10px;
}

.titleSlide {
	height: auto;
	border:none !important;
	text-align: left;
	display: flex; 
	flex-direction: column;
	margin: 10px;
	min-height: 60px;
}

.titleSlide2 {
	height: inherit;
	margin-left: 40px;
	width: 80%;
}

.backtitleSlide {
	float: right;
	
}

.numSlide {
	float: left;
	font-size:110%; 
	font-style: italic;	
}

.textSlide {
	height: auto;
	border:none !important;
	font-size: 12pt !important;
	font-family: arial !important;
	text-align: left;
}

.numMiniSlide {
	position: absolute;
	font-size:100%; 
	font-style: italic;
	left: 12px;	
}

.colSlideLeft {
	float:left; 
	width: 44%;
	border:none !important;
	margin:40px 20px 40px 40px;

}

.colSlideRight {
	float:right; 
	width: 44%;
	border:none !important;
	margin:40px 40px 40px 20px;
}

.startAnim {
	top: -200px;

}

.elemSort {
	background: #dddddd;
	padding: 10px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	border: 1px solid #dddddd;
}

.elemSort:hover{
    background-color: #5d6d7e;
	color: #ffffff;
}

.elemSort:hover button{
    background-color: #5d6d7e;
	color: #ffffff;
}

.elemGood {
	background: #e5f2c5;
	border: 1px solid #a9d340;
	padding: 10px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.elemBad {
	background: #fdbfc5;
	border: 1px solid #f94c5c;
	padding: 10px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

h1 {
	font-size: 300%;
	color: #2b2852;
	margin: 0px;
}

p {
	font-size: 110%;
	color: var(--color-primary);
	margin: 0px;
}

.video-responsive { 
	overflow:hidden; 
	padding-bottom:56.25%; 
	position:relative; 
	height:0;
}

.video-responsive iframe {
	left:0; 
	top:0; 
	height:100%;
	width:100%;
	position:absolute;
}

/***************************************************
 Fin classes pour les slides
***************************************************/

/**************************************************
 Classes pour l'animation des points
**************************************************/
.congrats {
    position: absolute;
    top: 160px;
    width: 550px;
    height: 100px;
    padding: 20px 10px;
    text-align: center;
    margin: 0 auto;
    left: 0;
    right: 0;
	display: flex;
	align-items: center;
}

.congrats>h1 {
    transform-origin: 50% 50%;
    font-size: 50px;
    font-family: 'Sigmar One', cursive;
    cursor: pointer;
    z-index: 2;
    position: absolute;
    top: 0;
    text-align: center;
    width: 100%;
	color: #3da1d1;
}

star {
    z-index: 1;
    position: absolute;
    top: 45%;
    left: 45%;
    transform: translate(0, -50%);
    height: 24px;
    width: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffcc00' d='M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z' /%3E%3C/svg%3E%0A");
}
/**************************************************
 Fin classes pour l'animation des points
**************************************************/

/*************************************************
 Classes pour le classement 
*************************************************/

.leaderboard {
	 max-width: 490px;
	 width: 100%;
	 border-radius: 12px;
	 margin-left: auto;
	 margin-right: auto;
}
 .leaderboard header {
	 --start: 15%;
	 height: 130px;
	 background-image: repeating-radial-gradient(circle at var(--start), transparent 0%, transparent 10%, rgba(54, 89, 219, 0.33) 10%, rgba(54, 89, 219, 0.33) 17%), linear-gradient(to right, #5b7cfa, #3659db);
	 color: #fff;
	 position: relative;
	 border-radius: 12px 12px 0 0;
	 overflow: hidden;
}
 .leaderboard header .leaderboard__title {
	 position: absolute;
	 z-index: 2;
	 top: 50%;
	 right: calc(var(--start) * 0.75);
	 transform: translateY(-50%);
	 text-transform: uppercase;
	 margin: 0;
}
 .leaderboard header .leaderboard__title span {
	 display: block;
}
 .leaderboard header .leaderboard__title--top {
	 font-size: 24px;
	 font-weight: 700;
	 letter-spacing: 6.5px;
	 color: #ffffff;
}
 .leaderboard header .leaderboard__title--bottom {
	 font-size: 13px;
	 font-weight: 500;
	 letter-spacing: 3.55px;
	 opacity: 0.65;
	 transform: translateY(-2px);
}
 .leaderboard header .leaderboard__icon {
	 fill: #fff;
	 opacity: 0.35;
	 width: 50px;
	 position: absolute;
	 top: 50%;
	 left: var(--start);
	 transform: translate(-50%, -50%);
}
 .leaderboard__profiles {
	 background-color: #fff;
	 border-radius: 0 0 12px 12px;
	 padding: 15px 15px 20px;
	 display: grid;
	 row-gap: 8px;
}
 .leaderboard__profile {
	 display: grid;
	 grid-template-columns: 1fr 3fr 1fr;
	 align-items: center;
	 padding: 10px 30px 10px 10px;
	 overflow: hidden;
	 border-radius: 10px;
	 box-shadow: 0 5px 7px -1px rgba(51, 51, 51, 0.23);
	 cursor: pointer;
	 transition: transform 0.25s cubic-bezier(0.7, 0.98, 0.86, 0.98), box-shadow 0.25s cubic-bezier(0.7, 0.98, 0.86, 0.98);
	 background-color: #fff;
}
 .leaderboard__profile:hover {
	 transform: scale(1.2);
	 box-shadow: 0 9px 47px 11px rgba(51, 51, 51, 0.18);
}
 .leaderboard__picture {
	 max-width: 100%;
	 width: 60px;
	 border-radius: 50%;
	 box-shadow: 0 0 0 10px #ebeef3, 0 0 0 22px #f3f4f6;
}
 .leaderboard__name {
	 color: #979cb0;
	 font-weight: 600;
	 font-size: 20px;
	 letter-spacing: 0.64px;
	 margin-left: 12px;
}
 .leaderboard__value {
	 color: #35d8ac;
	 font-weight: 700;
	 font-size: 34px;
	 text-align: right;
}
 .leaderboard__value > span {
	 opacity: 0.8;
	 font-weight: 600;
	 font-size: 13px;
	 margin-left: 3px;
}
 
 .leaderboard {
	 box-shadow: 0 0 40px -10px rgba(0, 0, 0, 0.4);
}
 


/*************************************************
 Fin Classes pour le classement 
*************************************************/


#slider-Zoom .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
	height: 14px;
	background: #cccccc;
}

.lst-lang-act {
	display: flex; 
	flex-direction: column; 
	background: #ffffff; 
	border: 1px solid #cccccc;
	min-height: 100px;
	position: absolute;
	z-index: 100;
}

.lst-lang-act-2 {
	display: flex; 
	flex-direction: column; 
	background: #ffffff; 
	border: 1px solid #cccccc;
	min-height: 100px;
	position: absolute;
	z-index: 100;
}


@media screen and (max-width: 700px) {	
	.panActivity {
		width: 100%;
	}
}

@media screen and (max-width: 400px) {
	.panTitleText {
		font-size: 80%; 
	}
	

	h1 {
		font-size: 150%;
	}	
	
	p {
		font-size: 60%;
	}
	
	h5 {
		font-size: 90%;
	}
	
	.h5 {
		font-size: 90%;
	}
	
	p {
		font-size: 100%;
	}
	
	
	.panTitleConsigne {
		font-size: 90%;		
	}
	
	.panel-title {
		font-size: 90%;		
	}
	
	.panActivity {
		width: 100%;
	}
	
	.butStart {
		font-size:80%;
	}	
	.butStop {
		font-size:80%;
	}
	
	.nb-activity {
		font-size: 95%;
	}
	
	
	.topBarButton {
		margin-right: 0px;
	}
	
	.li-Activity {
		height: unset;
	}
	
	.col-table-stat {
		height: unset;
	}
	
	.row-table-stat {
		height: unset;
		font-size: 90%;
	}
	
	#label {
		font-size: 95%;
	}
	
	.numQuery {
		font-size: 120%;
		width: 26px;
		height: 26px;
	}
	
	.panElement {
		padding: 0px;
	}
	
	.statTitleQuery {
		font-size: 100%;
	}
	
	.inputGroup label {	
		padding-left: 10px;
	}
	
	.br-theme-css-stars .br-widget a {
		height: 40px;
		width: 40px;
		font-size: 40px;
	}

	.pan-frame-elearning {
		width: 100%;
	}
	
	.pull-elearning {
		margin: 0 35px;
	}
	
	.frame-elearning { 
		width: 100%;
	}
	.panCloudResult {
		width: 98vw; 
	}
	
	.panButTitle {
		padding-right: 5px;
	}
	
	.graph-canvas {
		max-height: 300px; 
		width: auto;
	}
	
	.btnTopbar {
		margin-left: 0px;
	}
	
	.colSlideRight {
		width: 100%;
		margin:20px 20px 20px 20px;
	}
	
	.colSlideLeft {
		width: 100%;
		margin:20px 20px 20px 20px;
	}

}

@media screen and (min-width: 401px)  and (max-width: 767px) {
	.panTitleText {
		font-size: 90%; 
	}
	
	h1 {
		font-size: 170%;
	}	
	
	p {
		font-size: 75%;
	}
	
	h5 {
		font-size: 100%;
	}
	
	
	
	.h5 {
		font-size: 100%;
	}

	.panTitleConsigne {
		font-size: 100%;		
	}
	
	.panel-title {
		font-size: 100%;		
	}
	
	
	.panActivity {
		width: 100%;
	}
	.butStart {
		font-size:80%;
	}	
	
	.butStop {
		font-size:80%;
	}
	
	.nb-activity {
		font-size: 100%;
	}
	
	.topBarButton {
		margin-right: 0px;
	}
	
	.li-Activity {
		height: unset;
	}
	
	.col-table-stat {
		height: unset;
	}
	
	.row-table-stat {
		height: unset;
		font-size: 90%;
	}
	
	#label {
		font-size: 95%;
	}
	
	.numQuery {
		font-size: 120%;
		width: 26px;
		height: 26px;
	}
	
	
	.statTitleQuery {
		font-size: 100%;
	}
	
	.inputGroup label {	
		padding-left: 10px;
	}
	
	.br-theme-css-stars .br-widget a {
		height: 40px;
		width: 40px;
		font-size: 40px;
	}
	
	.pan-frame-elearning {
		width: 100%;
	}
	
	.pull-elearning {
		margin: 0 35px;
	}
	
	.frame-elearning {
		width: 100%;
	}
	
	.panCloudResult {
		width: 98vw; 
	}
	
	.panButTitle {
		padding-right: 5px;
	}

	.graph-canvas {
		max-height: 200px; 
		width: auto;
	}
	
	.btnTopbar {
		margin-left: 0px;
	}
	
	.colSlideRight {
		margin:40px 40px 40px 0px;
	}
	
}

@media (min-width: 768px) and (max-width: 991px) {
	.panTitleText {
		font-size: 90%; 
	}
	
	h1 {
		font-size: 250%;
	}	
	
	p {
		font-size: 90%;
	}
	
	h5 {
		font-size: 100%;
	}	
	
	.h5 {
		font-size: 100%;
	}

	.panTitleConsigne {
		font-size: 100%;		
	}
	
	.panel-title {
		font-size: 100%;		
	}
	
	
	.panActivity {
		width: 100%;
	}
	.butStart {
		font-size:80%;
	}	
	
	.butStop {
		font-size:80%;
	}
	
	.nb-activity {
		font-size: 100%;
	}
	
	.topBarButton {
		margin-right: 0px;
	}
	
	.li-Activity {
		height: unset;
	}
	
	.col-table-stat {
		height: unset;
	}
	
	.row-table-stat {
		height: unset;
		font-size: 90%;
	}
	
	#label {
		font-size: 95%;
	}
	
	.numQuery {
		font-size: 120%;
		width: 26px;
		height: 26px;
	}
	
	
	.statTitleQuery {
		font-size: 100%;
	}
	
	.inputGroup label {	
		padding-left: 10px;
	}
	
	.br-theme-css-stars .br-widget a {
		height: 40px;
		width: 40px;
		font-size: 40px;
	}
	
	.pan-frame-elearning {
		width: 100%;
	}
	
	.pull-elearning {
		margin: 0 35px;
	}
	
	.frame-elearning {
		width: 100%;
	}
	
	.panCloudResult {
		width: 98vw; 
	}
	
	.panButTitle {
		padding-right: 5px;
	}

	.graph-canvas {
		max-height: 200px; 
		width: auto;
	}
	
	.btnTopbar {
		margin-left: 0px;
	}
	
	.colSlideRight {
		margin:40px 40px 40px 0px;
	}
	
}

/*
@media screen and (min-width : 760px) {
	.panTitleText {
		font-size: 100%; 
	}
	
	h5 {
		font-size: 100%;
	}
	
	.h5 {
		font-size: 100%;
	}	
	
	.panTitleConsigne {
		font-size: 100%;		
	}
	
	.panel-title {
		font-size: 100%;		
	}
	
	.nb-activity {
		font-size: 110%;
	}
	
	
	
	.topBarButton {
		margin-right: 0px;
	}
	
	.li-Activity {
		height: unset;
	}

	.col-table-stat {
		height: unset;
	}
	
	.row-table-stat {
		height: unset;
	}
	
	.numQuery {
		font-size: 120%;
		width: 26px;
		height: 26px;
	}
	
	.panElement {
		padding: 0px;
	}
	
	
}
*/
@media screen and (min-width : 992px) {
	.panTitleText {
		font-size: 110%; 
	}
/*	
	h1 {
		font-size: 160%;
	}	
*/	
	h5 {
		font-size: 110%;
	}
	
	
	p {
		font-size: 120%;
	}
	
}
/****************************************
	Toolbar button
****************************************/
.radio-toolbar input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
  text-align: center;
}

.radio-toolbar label {
    display: inline-block;
    background-color: #ddd;
    padding: 10px 20px;
    font-family: sans-serif, Arial;
    font-size: 16px;
	font-weight: 200;
    border: 1px solid #aaa;
    border-radius: 0px;
}

.radio-toolbar label:hover {
  background-color: #fff;
}

.radio-toolbar input[type="radio"]:focus + label {
    border: 1px solid #aaa;
}

.radio-toolbar input[type="radio"]:checked + label {
    background-color: #fff;
    border-color: #aaa;
}

/****************************************
	Formulaire
****************************************/
input[type=text] {
	border-radius: 0px;
	border: 1px solid #cccccc;
}

input[type=number] {
	border-radius: 0px;
	border: 1px solid #cccccc;
}

select {
	border-radius: 0px;
	border: 1px solid #cccccc;
}

.isi-txt-search-training {
	height: 35px;
	border: 1px solid #cccccc;
}

.isi-txt-search:focus {
	border: 1px solid #cccccc;
	background-color: #f1f1f1;
}

.isi-lst-search {
	height: 35px;
}

.isi-lst-search:focus {
	border: 1px solid #cccccc;
	background-color: #f1f1f1;
}

.c-datepicker-date-editor{
	height: 35px;	
}

.weight-100 {
	font-weight: 100;
}

.isi-lab-italic {
	color:#aaaaaa;
	font-size: 97%;
	font-style: italic;
}

.isi-readonly{
	background: #ccc;
}

.sublabel2 {
	font-weight: 300;
}

.active-menu {
	text-decoration: underline;
}

.fa-plus, .fa-plus-circle {
	color: #689d12;
	font-size: 160%;
}

.fa-edit, .fa-eye {
	font-size: 140%;
}

.fa-trash-alt {
	color: #ff0000;
}

/****************************************
 toolbar
****************************************/
.isi-toolbar {
	border: 1px solid #cccccc;
}

.isi-toolbar > button {
	border-right: 1px solid #cccccc;
}

/****************************************
 Flex
****************************************/

.isi-footer {
    bottom: 0;
    min-height: 45px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.isi-primary-pan {
	padding: 20px;
}

.isi-flex {
	display: flex; 
	justify-content: space-between;
	align-items: center;
	padding: 5px;
}

.isi-flex-wrap {
	flex-wrap: wrap;
}

.isi-col {
	flex-direction: column;
}

.isi-row {
	flex-direction: row;
}

.isi-active-line {
	background: #d5effc !important;
}

.isi-left-col {
	align-items: flex-start;
}

.isi-flex-right {
	display: flex;
	justify-content: end;
}


.isi-left {
	justify-content: left;
}

.isi-gap-10 {
	gap: 10px;
}

.isi-btn-tb {
	background: #fff;
	padding: 0px;
	width: 30px;
	height: 30px;
	border: 1px solid #ccc;
}

.isi-small-tb {
    background: #ffffff;
    border-bottom: 1px solid #aaaaaa;	
}

.isi-box-new-bottom {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background: #ffffff;
	padding: 20px;
}

.isi-box-new {
	border: 2px solid var(--color-primary-light-2);
	display: flex;
	flex-direction: column;
	margin-top: 15px;
}

.isi-box-new-top {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 20px;
	background: var(--color-primary-light-2);
	align-items: center;
}

.isi-box-new-top i {
	color: var(--color-primary) !important;
}

.isi-box-top-small {
	padding: 2px 10px 2px 10px;
}

.isi-box-elem-top {
	display: flex; 
	width: 100%; 
	justify-content: space-between;
	align-items: center;
}

/*div.isi-box-elem-top > h4 {
	color: #ea513c;
}*/

.isi-box-10 {
	width: 10%;	
}

.isi-box-15 {
	width: 15%;
}

.isi-box-20 {
	width: 20%;
}

.isi-box-25 {
	width: 25%;
}

.isi-box-30 {
	width: 30%;
}

.isi-box-33 {
	width: 33%;
}

.isi-box-40 {
	width: 40%;
}

.isi-box-45 {
	width: 45%;
}

.isi-box-50 {
	width: 49%;
}

.isi-box-60 {
	width: 60%;
}

.isi-box-66 {
	width: 66%;
}

.isi-box-70 {
	width: 70%;
}

.isi-box-80 {
	width: 80%;
}

.isi-box-90 {
	width: 90%;
}

.isi-box-95 {
	width: 95%;
}

.isi-box-100 {
	width: 100%;
}

.isi-box-filter {
	border: 1px solid #cccccc;
	padding: 10px;
	margin-bottom: 15px;
	width: 100%;
}

.isi-box-result-search {
	display: flex;
	flex-direction: column;
	padding: 10px;
	margin: 20px;
	width: 100%;
}

.isi-box-training-domain {
	display: flex;
	flex-direction: column;
	padding: 10px;
	margin: 5px;
	width: 100%;
}

.isi-lst-box-training-one{
	display: flex;
	justify-content: center;
	/*width: 960px;*/
	width: 100%;
	max-width: 100%;
	margin: auto;
	align-items: normal;
}
.isi-elem-box-training-one{	
	display: flex;
	flex-direction: column; 
	flex: 1 1 300px; 
	margin: 0.5em;
	border: 1px solid #bbbbbb;
}


.isi-pane {
	display: flex;
	background: #f1f1f1;
	color: #000000;
	height: 50px;
	width: 100%;
	font-size: 120%;
}

.isi-pane-active {
	background: #1c9ec6;
	color: #ffffff;
}

.isi-border-select {
	border: 2px solid rgb(70, 157, 213)
}


.isi-cell-table-1 {
	display: table-cell; 
	padding: 3px 10px;
	border-bottom: 1px solid #eee;
}

.isi-form {
	border: 1px solid #ccc; 
	padding: 10px 10px 10px 10px;
}

.isi-lst {
	border: 1px solid #ccc;
	margin: 5px 20px 0px 20px;
	padding: 10px;
	width: 100%;
}

h4 {
	font-style: unset;
	font-weight: unset;
	font-size: 140%;
	color: var(--color-h4) !important;
}

.btn-2{
	background: var(--color-h4) !important;
	color: #ffffff;
}

.btn-yellow {
	background: #ffc20f !important;
	color: #ffffff;
	border-radius: 0px;
	font-size: 16px;
}

.isi-tb {
	background: #f9f9f9;
	border: 1px solid #cccccc;
	margin-left: 10px;
}

.isi-tb-btn {
	border-right: 1px solid #cccccc;
}

.ft-size-a {
	font-size: 33px;
}

.a-social {
	margin: 5px;
}

.isi-pad-0 {
	padding: unset;
}

.isi-edit-1 {
	width: 100%;
	border: unset;
}

.isi-title-actu {
	color: rgb(235, 54, 95);
}

.isi-content-actu {
	margin-top: 20px;
}

.menu-elem-search {
	position: absolute;
	background: #ffffff;
	border: 1px solid #cccccc;
	margin-top: 60px;
	z-index: 1000;
	min-width: 200px;
}

.menu-elem-connect {
	position: absolute;
	background: #ffffff;
	border: 1px solid #cccccc;
	margin-top: 0px;
	z-index: 1000;
	min-width: 300px;
	right: 10px;
	line-height: 25px;
}

.isi-elem-selection {
	border-top: 1px solid #cccccc;
	height: 60px;
}

.isi-badge-caddie {
	position: relative;
	top: -14px !important;
	left: -10px !important;
	background: #ff0000 !important;	
}

.isi-lab-check {
	margin-bottom: unset;
	margin-left: 5px;
}

.isi-grid-domain {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: max-content;	
}

.isi-list-domain {
	display: flex;
	flex-direction: column;
	/*gap: 0.8rem;*/
	list-style-type: none;
	padding-left: 0px;
}

.isi-li2-list-domain {
	padding-left: 15px;
	margin-top: -10px;
}

.isi-lab-normal {
	font-weight: 300;
}

.isi-color-label {
	color: #666666;
}

.isi-box-article-one {
	padding-bottom: 25px;
	flex: 1;
	max-width: 370px;
	justify-content: flex-start;
}

.training-satis {
    /* color: green; */
    /* position: absolute; */
    /* top: -10px; */
    /* left: -69px; */
    border-radius: 50%;
    height: 138px;
    width: 138px;
    background: #e73265;
	color: #ffffff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075), 0 2px 2px rgba(0, 0, 0, 0.075), 0 4px 4px rgba(0, 0, 0, 0.075), 0 8px 8px rgba(0, 0, 0, 0.075), 0 16px 16px rgba(0, 0, 0, 0.075), inset 0 0 10px #e73265, 0 0 10px #e73265;
    display: flex;
    justify-content: center;
    align-items: center;
	z-index: 100;
}
.training-satis-detail {
	background: #3f2782;
	width: 300px;
	height: 100px;
	margin-left: -22px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-top-right-radius: 50px;
	border-bottom-right-radius: 50px;
	
}

.ui-auto-1 {
	font-family: arial !important;
	font-size: 100%;
	font-weight: 600;
}

.ui-auto-2 {
	font-family: arial !important;
	font-size: 85%;
	font-weight: 200;
	margin-left: 30px;
}

.satis-domain {
	margin: -35px auto 0;
	width: fit-content;
	background: #f4f4f4;
	border-radius: 10px;
	position: relative;
	padding: 15px;
}

@media screen and (max-width: 1000px) {
	.satis-domain {
		margin: 0;
		font-size: 1em;
		width: 100%;
	}
}

.isi-tag {
	padding: 3px 12px;
    color: #fff;
	font-size: .75rem;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 8px;
}

.isi-tag-new {
	background: #d92b87;
}

/***********************************
 Accordion
***********************************/
.isi-accordion {
	width: 100%;
	text-align: left;
}

.isi-accordion-article {
	border: 1px solid #ccc;
	padding: 1em;
	margin: 1em auto;
}

.isi-accordion-article > input[type="radio"] {
  appearance: none;
  position: fixed;
  top: -100vh;
  left: -100vh;

  & ~ div {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s;
  }

  &:checked ~ div {
    max-height: fit-content;
  }
}

/******************************
  Timeline
******************************/
.isi-time-line {
	font-size: 120%;
	background: #f1f1f1;
	padding: 10px;
	align-items: flex-start;
}

.isi-ico-time-line {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	background: #999999;
	color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
}

.isi-ico-time-line.select {
	background: #e73265;
}

.isi-lab-time-line {
	color: #999999;
	margin-left: 5px;
}

.isi-lab-time-line.select {
	color: #e73265;
}

.logo-of {
	max-width: 300px;
	max-height: 150px;
}

.menu-static-page {
	border-bottom: 1px solid #cccccc;
}

.training-box {
	background: #3f2782;
    width: 210px;
    height: 200px;
    float: right;
    padding: 0 7px 0 7px;
    position: relative;
    opacity: 0.9;
}

.training-box h1 {
	font-size: 1em;
    color: #ffffff;
    font-family: 'Raleway', sans-serif;
    font-weight: 100;
    margin-top: 10px;
    text-align: left;
	-webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
}

.training-box-duration {
	display: flex;	
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
    color: #ffffff;	
}

.training-box p {
	background: rgba(255, 255, 255, .2);
    margin: 35px 0 0 7px;
    width: 170px;
    color: #ffffff;
    font-family: sans-serif;
    font-weight: 100;
    font-size: .85em;
    padding: 8px 0px 8px 24px;
    border-radius: 50px 0 0 0px;
    position: absolute;
    bottom: 0;
    cursor: pointer;
	right:0;
}

@media screen and (max-width: 800px) {

	.isi-flex {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: fit-content;
		box-sizing: border-box;
	}

	.isi-box-60, .isi-box-50, .isi-box-40 {
		width: 100%;
	}

	.isi-box-40 {
		box-sizing: border-box;
		padding: 50px 10px;
	}

	.isi-col {
		width: 100%;
	}

	.c-datepicker-date-editor, .J-datepicker-range-day {
		width: 100%;
	}

	.isi-lst-search {
		width: 100%;
	}

	div[id^="OBJ_COL_CONTENT_"] {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		align-items: center;
		text-align: center;
	}

	.animated {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		align-items: center;
		text-align: center;
	}

	div[data-type="engine-search-training"] {
		width: 80%;
	}

	/* header */
	.fehap-header-size {
		height: 100% !important;
	}

/*	div[id^="PanBody_"] > div[data-type="grid"] {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 100%;
	}

	div[id^="PanBody_"] > div[data-type="grid"] > div[data-col="1"]{
		width: fit-content;
		height: 100%;
	}

	div[id^="PanBody_"] > div[data-type="grid"] > div[data-col="2"]{
		width: fit-content;
		height: 100%;
	}

	div[id^="OBJ_COL_CONTENT_"] > div[data-type="title-3"] {
		margin: 0px !important;
	}*/
	.fehap-top-grid-qsn, .fehap-top-grid-me,
	.fehap-top-grid-agses, .fehap-top-grid-formjoin {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 100%;
	}

	.fehap-top-grid-qsn > div[data-col="1"], .fehap-top-grid-me > div[data-col="1"],
	.fehap-top-grid-agses > div[data-col="1"], .fehap-top-grid-formjoin > div[data-col="1"] {
		width: fit-content;
		height: 100%;
	}

	.fehap-top-grid-qsn > div[data-col="2"], .fehap-top-grid-me > div[data-col="2"],
	.fehap-top-grid-agses > div[data-col="2"], .fehap-top-grid-formjoin > div[data-col="2"]{
		width: fit-content;
		height: 100%;
	}

	div[id^="OBJ_COL_CONTENT_"] > div[data-type="title-3"] {
		margin: 0px !important;
		align-self: center;
	}

}

.training-title2 div {
	flex-direction: row;
	/*font-size: 100% !important;*/
	width: fit-content;
	height: 100%;
}



span[class="h2"] {
	font-size: 2em;
}
.fehap-txtpage div{
	box-sizing: border-box;
	padding: 10px 50px 10px 50px;
}
@media screen and (max-width: 950px) {
	.fehap-txtpage div {
		display: flex;
		flex-direction: column;
		width: 100%;
	}
}

.content-btn-sheet {
	display: flex;
	flex-direction: row;
}

.isi-text-line {
	width: 100%; 
	text-align: center; 
	border-bottom: 1px solid #000; 
	line-height: 0.1em;
	margin: 10px 0 20px; 
}

.isi-text-line span {
	background:#fff; 
	padding:0 10px;
	font-size: 130%;	
}