/* common.css */

[data-parsley-required]{border:1px solid orange!important;}


/* header menu */
.br-header, .br-logo {
  height: 100px;
}

.br-header .header-logo-container{
    height: 100px;
    width:225px;
    margin:0px;
} 

/* do not display logo in header when espace (left menu) */
body.espace .br-header .header-logo-container{
    width:30px;
}
body.espace .br-header .header-logo img{
    display:none;
}

.br-header .header-logo img{
    display: block;
    height: 80px;  
    width:145px;  
    position:relative;
    top:10px;
    left:20px;
}
.br-header .vertical-text{
  height: 100px;
}

.br-sideleft{
    top:100px;
}

.br-mainpanel {
    margin-top: 100px;
}

@media (max-width: 992px){
    .br-mainpanel {
        margin-top: 0px;
    }
}

.menu-gauche .btn-primary, .menu-bas-page .btn-primary, .container-home .btn-primary{background-color:#1EAAF1!important;}
.menu-gauche .btn-primary:hover, .menu-bas-page .btn-primary:hover, .container-home .btn-primary:hover{background-color:#2CB8FF!important;color:white}

.menu-bas-page .container-menu label {font-size:0.8em!important;}
.menu-bas-page .container-menu .btn {font-size:0.9em!important;}
.menu-bas-page .container-menu input {font-size:1em!important;}



.alert button.close{position:relative;top:-10px;right:-10px;}

.color-1{color:#1EAAF1;}
.color-black{color:#000000}

.maj-first-letter::first-letter{
    text-transform: uppercase;
}


/* header menu */


/* sm */
@media (max-width: 576px) { 
    .dropdown-menu.dropdown-menu-header { min-width:350px!important;}        
    .dropdown-menu .tx-center{ text-align:left; padding-left:20px;}
}   

.br-footer{color:#B0B0B0;}
.br-footer .btn-primary{color:white;}

/* for empty select */ 
.warning-empty.empty-list{color:red;background-color:rgba(255,0,0, 0.2);}


.hide{
  display:none!important;
}

.vertical-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
}

.text-capitalize {
    text-transform: capitalize;
}

::placeholder{color:lightgrey!important;}

.cursor-pointer{cursor: pointer!important}

.br-logo span, .br-logo i{color:#1EAAF1!important}

optgroup{background-color:lightblue;}


/* scroll firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #128293 black;
}

/* scroll chrome */
*::-webkit-scrollbar {
  width: 5px;
}

*::-webkit-scrollbar-track {
  background: black;
}
*::-webkit-scrollbar-thumb {
  background-color: #17A2B8;
  border-radius: 20px;
  /* border: 3px solid red; */
}

/* textarea scrollbar */
textarea {
  scrollbar-width: thin;
  scrollbar-color: initial;
}

/* scroll chrome */
textarea::-webkit-scrollbar {
  width: initial;
}

textarea::-webkit-scrollbar-track {
  background: initial;
}
textarea::-webkit-scrollbar-thumb {
  background-color: initial;
  border-radius: initial;
  /* border: 3px solid red; */
}    

    
    

/* preloader page */

body.preloader-site {
    overflow: hidden;
}

.preloader-wrapper, .preloader-wrapper-manual {
    height: 100%;
    width: 100%;
    background: white;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999999;
}

.preloader-wrapper-manual {
    z-index: 100;
}

.preloader-wrapper .preloader, .preloader-wrapper-manual .preloader {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 200px;
}


.preloader-wrapper img, .preloader-wrapper-manual img{position:absolute;top:20px;}

.lds-hourglass {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
  left:120px;  
}
.lds-hourglass:after {
  content: " ";
  display: block;
  border-radius: 50%;
  width: 0;
  height: 0;
  margin: 8px;
  box-sizing: border-box;
  border: 32px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: lds-hourglass 1.2s infinite;
  background-color:silver!important;
}
@keyframes lds-hourglass {
  0% {
    transform: rotate(0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  50% {
    transform: rotate(900deg);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  100% {
    transform: rotate(1800deg);
  }
}

/* loader on ajax asynchronous */
.preloader-wrapper2 {
    height: 100%;
    width: 100%;
    background: rgba(255, 255, 255, 0.4);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}

.preloader-wrapper2 .preloader {
    position: absolute;
    top: 40%;
    left: 60%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 200px;
}

//Spinner
.lds-spinner {
  color: official;
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.lds-spinner div {
  transform-origin: 32px 32px;
  animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 29px;
  width: 5px;
  height: 14px;
  border-radius: 20%;
  background: lightgrey;
}
.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}
@keyframes lds-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* menu */

.sub-item.disabled a, .br-menu-item.disabled a{color:#707070!important;pointer-events: none;}
.sub-item.disabled, .br-menu-item.disabled{cursor: not-allowed!important;}



/* datatable */

table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc{background-image:none!important;}

.vertical-center, .vertical-center td{vertical-align:middle!important}



.three-states label{padding:2px 10px!important}
.three-states label.state-all{padding:2px 20px!important}
.three-states label.state-no.selected{background-color:red!important;color:white!important}
.three-states label.state-yes.selected{background-color:#00CC00!important;color:white!important}
    
.label-comment{color:#17A2B8;font-style:italic;display:inline;font-size:0.8rem;} 


    
/* xl */
@media (min-width: 1200px) { }
/* lg */
@media (min-width: 992px) { }
/* md */
@media (min-width: 768px) { }
/* sm */
@media (min-width: 576px) { }

    
/* align content div in center horizontal and vertical */
.d-flex-align-all {
    display: flex !important;
    align-items: center !important; 
    justify-content: center !important; 
}

.wd-min-100{
    min-width:100px;
}

.w-90{width:90%}
.bg-yellow{background-color:yellow;}
.tx-star{color:#FFDD00;}
.tx-blue {color:#00B0F0;}
.bg-blue {background-color:#00B0F0;}
.tx-orange{color:#ED7D31;}
.bg-orange{background-color:#ED7D31;}



/* xl */
@media (min-width: 1200px) { }
/* lg */
@media (min-width: 992px) { }
/* md */
@media (min-width: 768px) { }
/* sm */
@media (min-width: 576px) { }


@media (min-width: 992px) { 
    .w-lg-30{ width:30%!important;}
    .w-lg-50{ width:50%!important;}
    .w-lg-70{ width:70%!important;}
    .r-lg-10{right:10px!important;}
    .t-lg-10{top:10px!important;}
}
  
.center-div{display: block;margin-right:auto;margin-left:auto}

.btn-outline-primary {
  background-color: white;
}

.btn-outline-danger {
    background-color: white;
}


.hd-150{height:150px}

.t-110{
    top:110px;
}
.t-160{
    top:160px;
}

.mxd-100{max-width:100%}


ol.circled {margin-left:0; padding-left:0; counter-reset:item}
ol.circled>li {padding-left:0; counter-increment:item; list-style:none inside;margin-bottom:10px;}
ol.circled>li:before {
    content:"" counter(item) " ";
    padding:3px 5px;
    padding-left:8px;
    margin-right:0.5em;
    border:1px solid grey;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
    
select.placeholder{color:lightgrey;}
    
.br-toggle-switch::before {
  content: 'OUI'!important;
}
.br-toggle-switch::after {
  content: 'NON'!important;      
}

.br-toggle.bg-redgreen{
  background-color: #DC3545;
} 

.br-toggle.bg-redgreen.on{
  background-color: #23BF08;
}   


.br-toggle.bg-orangegreen{
  background-color: #FFA100;
} 

.br-toggle.bg-orangegreen.on{
  background-color: #23BF08;
}   

.br-toggle.bg-infoorange{
  background-color: #17A2B8;
} 

.br-toggle.bg-infoorange.on{
  background-color: #FFA100;
}   

label.form-control-label{color:black;}
.data-changed{background-color:lightyellow;}


/* header title */

.br-pagetitle {
    display:flex;       
}

.br-pagetitle .icon{
    padding:0;
    margin-right:10px
}

.br-pagetitle div{
    padding:0;
    margin:0;
}

.br-pagetitle h6{
    margin:0!important;
}


/* inactive disabled and readonly div */
div[disabled], div[readonly]
{
  pointer-events: none;
  opacity: 0.7;
}                                          

div[readonly-show] {pointer-events: none;opacity: 0.8}



/* alert */
.media-list .dashboard-alert{border-bottom:1px solid #F0F0F0}
.media-list-link .media-body span.count {color: inherit; }

td.center-icon-cell{margin:0!important;padding:0!important;text-align:center;vertical-align: middle;}
td.center-vertical-top{vertical-align: top;}

/* table */
table.dataTable tr td{color:#4B4B4B;}  
table.dataTable thead tr th{border-bottom:3px double #D0D0D0;}  

/* modal */
.modal-dialog.large {max-width: 90%; }

@media (min-width: 1280px) {
     .modal-dialog.large {max-width: 70% ; }
}




    .pd-xl-col{padding-left:20px;padding-right:10px} 
    
    
    /*
    1920px (125%) : min = 1530px
    1920px (100%) : min = 1920px
    1920px (150%) : min = 1280px
    */
    
    
    .wide-lap{width:100%}
    
    
    @media (min-width: 1920px) {
        .pd-xl-form{padding-left:200px;padding-right:200px;}
        .pd-xl-col{padding-left:30px;padding-right:30px}
        .label-comment{margin-top:3px;}
        .text-right-xl{text-align:right}
         #modal-help-statut div {max-width: 1200px; }
         .wide-lap{width:auto;}
         .text-xxl-right{display:block!important;text-align:right;}
    
    }
    
    
    @media (min-width: 1920px) {
      .col-xxl {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%; }
      .col-xxl-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: none; }
      .col-xxl-1 {
        flex: 0 0 8.33333%;
        max-width: 8.33333%; }
      .col-xxl-2 {
        flex: 0 0 16.66667%;
        max-width: 16.66667%; }
      .col-xxl-3 {
        flex: 0 0 25%;
        max-width: 25%; }
      .col-xxl-4 {
        flex: 0 0 33.33333%;
        max-width: 33.33333%; }
      .col-xxl-5 {
        flex: 0 0 41.66667%;
        max-width: 41.66667%; }
      .col-xxl-6 {
        flex: 0 0 50%;
        max-width: 50%; }
      .col-xxl-7 {
        flex: 0 0 58.33333%;
        max-width: 58.33333%; }
      .col-xxl-8 {
        flex: 0 0 66.66667%;
        max-width: 66.66667%; }
      .col-xxl-9 {
        flex: 0 0 75%;
        max-width: 75%; }
      .col-xxl-10 {
        flex: 0 0 83.33333%;
        max-width: 83.33333%; }
      .col-xxl-11 {
        flex: 0 0 91.66667%;
        max-width: 91.66667%; }
      .col-xxl-12 {
        flex: 0 0 100%;
        max-width: 100%; }
    }

    @media (max-width: 1280px) {
        .wd-xxs-200{width:200px;}
    }
    
    
/* active steps */
.steps ul li.current a {background-color:#3366CC!important; }

    
/* button used generally for filters or options : btn-info => btn-teal */

/* copy from bracket.css btn-teal */
button.btn-info:not(.force) {
  color: #fff;
  background-color: #1CAF9A;
  border-color: #189987; }
  button.btn-info:not(.force):hover {
    color: #fff;
    background-color: #178e7d;
    border-color: #116d60; }
  button.btn-info:not(.force):focus, button.btn-info:not(.force).focus {
    box-shadow: 0 0 0 0.2rem rgba(24, 153, 135, 0.5); }
  button.btn-info:not(.force).disabled, button.btn-info:not(.force):disabled {
    color: #fff;
    background-color: #1CAF9A;
    border-color: #189987; }
  button.btn-info:not(.force):not(:disabled):not(.disabled):active, button.btn-info:not(.force):not(:disabled):not(.disabled).active,
  .show > button.btn-info:not(.force).dropdown-toggle {
    color: #fff;
    background-color: #158373;
    border-color: #106256; }
    button.btn-info:not(.force):not(:disabled):not(.disabled):active:focus, button.btn-info:not(.force):not(:disabled):not(.disabled).active:focus,
    .show > button.btn-info:not(.force).dropdown-toggle:focus {
      box-shadow: 0 0 0 0.2rem rgba(24, 153, 135, 0.5); }
    
button.btn-outline-info {
  color: #1CAF9A;
  background-color: transparent;
  background-image: none;
  border-color: #1CAF9A; }
  button.btn-outline-info:hover {
    color: #fff;
    background-color: #1CAF9A;
    border-color: #1CAF9A; }
  button.btn-outline-info:focus, button.btn-outline-info.focus {
    box-shadow: 0 0 0 0.2rem rgba(28, 175, 154, 0.5); }
  button.btn-outline-info.disabled, button.btn-outline-info:disabled {
    color: #1CAF9A;
    background-color: transparent; }
  button.btn-outline-info:not(:disabled):not(.disabled):active, button.btn-outline-info:not(:disabled):not(.disabled).active,
  .show > button.btn-outline-info.dropdown-toggle {
    color: #fff;
    background-color: #1CAF9A;
    border-color: #1CAF9A; }
    button.btn-outline-info:not(:disabled):not(.disabled):active:focus, button.btn-outline-info:not(:disabled):not(.disabled).active:focus,
    .show > button.btn-outline-info.dropdown-toggle:focus {
      box-shadow: 0 0 0 0.2rem rgba(28, 175, 154, 0.5); }

 /* end copy from bracket.css */

/* customized design */    
button.btn-outline-info{box-shadow: 0 0 0 0.2rem rgba(24, 153, 135, 0.5); }
button.btn-outline-info:hover{background-color:white;color:#1CAF9A;}
button.btn-outline-info:hover, button.btn-info:hover{font-weight:bold;}

button.btn-info.btn-blue, .btn-info.btn-blue{background-color:#1EAAF1;border-color:blue;}
button.btn-info.btn-blue:hover, .btn-info.btn-blue:hover{background-color:#018DD4;border-color:darkblue;}
button.btn-info.btn-blue.active, .btn-info.btn-blue.active{background-color:white!important;color:#1EAAF1!important;border:1px solid #1EAAF1!important; box-shadow: 0 0 0 0.2rem rgba(30, 170, 241, 0.5); }

.button-list button .icon-check{display:none;}
.button-list button.selected .icon-check{display:inline;}


/* scrumb */
.breadcrumb2 {
	/*centering*/
	display: inline-block;
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);
	overflow: hidden;
	border-radius: 5px;
	/*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/
	counter-reset: flag; 
}

.breadcrumb2 a {	
	text-decoration: none;
	outline: none;
	display: block;
	float: left;
	font-size: 12px;
	line-height: 36px;
	color: white;
	/*need more margin on the left of links to accomodate the numbers*/
	padding: 0 10px 0 60px;
	background: #666;
	background: linear-gradient(#666, #333);
	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*/
.breadcrumb2 a:first-child {
	padding-left: 46px;
	border-radius: 5px 0 0 5px; /*to match with the parent's radius*/
}
.breadcrumb2 a:first-child:before {
	left: 14px;
}
.breadcrumb2 a:last-child {
	border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/
	padding-right: 20px;
    pointer-events: none;
}

/*hover/active styles*/
.breadcrumb2 a.active, .breadcrumb2 a:hover{
	background: #333;
	background: linear-gradient(#333, #000);
}
.breadcrumb2 a.active:after, .breadcrumb2 a:hover:after {
	background: #333;
	background: linear-gradient(135deg, #333, #000);
}

/*adding the arrows for the breadcrumb2s using rotated pseudo elements*/
.breadcrumb2 a:after {
	content: '';
	position: absolute;
    top: 0; 
	right: -18px; /*half of square's length*/
	/*same dimension as the line-height of .breadcrumb2 a */
	width: 36px; 
	height: 36px;
	/*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: #666;
	background: linear-gradient(135deg, #666, #333);
	/*stylish arrow design using box shadow*/
	box-shadow: 
		2px -2px 0 2px rgba(0, 0, 0, 0.4), 
		3px -3px 0 2px rgba(255, 255, 255, 0.1);
	/*
		5px - for rounded arrows and 
		50px - to prevent hover glitches on the border created using shadows*/
	border-radius: 0 5px 0 50px;
}
/*we dont need an arrow after the last link*/
.breadcrumb2 a:last-child:after {
	content: none;
}
/*we will use the :before element to show numbers*/
.breadcrumb2 a:before {
    content: counter(flag);
	counter-increment: flag;
	/*some styles now*/
	border-radius: 100%;
	width: 20px;
	height: 20px;
	line-height: 20px;
	margin: 8px 0px;
	position: absolute;
	top: 0;
	left: 30px;
	background: #444;
	background: linear-gradient(#444, #222);
	font-weight: bold;
    padding-left:7px;
}

.breadcrumb2 a.btn-crumb-exercice.only-mobile{padding: 0 10px 0 10px;!important;}
.breadcrumb2 a.btn-crumb-exercice.only-mobile:before {display:none;}

.flat a, .flat a:after {
	background: white;
	color: black;
	transition: all 0.5s;
}
.flat a:before {
	background: white;
	box-shadow: 0 0 0 1px #ccc;
}
.flat a:hover, .flat a.active, 
.flat a:hover:after, .flat a.active:after{
	background: #9EEB62;
} 



.avatar-circle {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    overflow: hidden; 
    display: flex;
    justify-content: center;
    align-items: center; 
    position: relative;
    border:1px solid #E0E0E0;
}

.avatar-circle img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    position: absolute;
    top: 50%;  
    left: 50%;
    transform: translate(-50%, -50%); 
}
   
    
    
    


/*

File : common.css
Description : common css for all application
Creation date 2022/03/15 
Author : @Manuela

Version | Date          | Description
1.0     | 2022/03/15    | creation

*/