@import url('themes.css');

/* général */
*{
    font-family: 'Affogato Regular';
	color:var(--primary-color);
}

img {
    max-width: 100%;
    max-height: fit-content;
    height: auto;
    width: auto;
    overflow: hidden;
}

table {
    max-width: 100%;
    max-height: fit-content;
    height: auto;
    width: auto;
    overflow: hidden;
}

html{
    overflow: hidden !important;
    margin:0px;
    padding:0px;
    max-width: 100dvw;
    max-height: 100dvh; 
}

#divAppliPedago {background: var(--primary-color);}

div.size1, div.size1 table { font-size:16px; }
div.size2, div.size2 table { font-size:13px; } 
div.size3, div.size3 table { font-size:10px; }
div#divAppliPedago, div#divAppliPedago table, div#divAppliPedago input, div#divAppliPedago select , div#divAppliPedago th, div#divAppliPedago td {
	text-align:center; position: relative; border-collapse:collapse;
	cursor: default;padding-left: 0;
    padding-right: 0;
}
table { table-layout: fixed; } 
div img.edit { position:absolute; top:0px; right:0px; cursor:pointer; }
div.size1 img.edit { width:32px; }
div.size2 img.edit { width:28px; }
div.size3 img.edit { width:24px; }
.show_online { visibility:hidden; }
.online .show_online { visibility:visible; }
.online .show_offline { visibility:hidden; }
.hide_offline { display:none; }
.online .hide_offline {    display: flex; }
.online .hide_online { display:none; }
/* bandeau TITRE */
div.titre {
   position: relative;
    font-size: 16px;
    height: 80px;
    overflow: auto;
    width: 100%;
}

div.titre table td { height: 70px; overflow:auto;  /* display: inline-block; */ }
div.titre table, div.titre table td { padding:0px; color: #eeeeee; table-layout:auto; }
div.size1 div.titre div, div.size1 div.titre table, div.size1 div.titre table td {
	font-size: 3rem;
    font-family: 'Frontage Condensed Inline TheFontsMaster com';
    font-weight: lighter;
	height:100%;
    color: #FFF;
	vertical-align: top;
}



div.size2 div.titre div, div.size2 div.titre table, div.size2 div.titre table td { font-size: 2.5rem;
    font-family: 'Frontage Condensed Inline TheFontsMaster com';
    font-weight: lighter;
	height:100%;
    color: #FFF;}
div.size3 div.titre div, div.size3 div.titre table, div.size3 div.titre table td { font-size: 2rem;
    font-family: 'Frontage Condensed Inline TheFontsMaster com';
    font-weight: lighter;	
	height:100%;
    color: #FFF;
}

div.titre table td span{
    color:#FFF;
    font-size: 1rem;
}

div.size1 div.titre div, div.size1 div.titre table{
	cursor: pointer;
    color: #fff;
    font-size: 2rem;
}
	
div.size2 div.titre div, div.size2 div.titre table{
	cursor: pointer;
    color: #fff;
    font-size: 1.5rem;
}

div.size3 div.titre div, div.size3 div.titre table{
	cursor: pointer;
    color: #fff;
    font-size: 2rem;
}
#conect{
    margin: 5px 0 0 0;
    font-size: 1rem;
    font-weight: 100;
	color:#FFF;
}
/* div.size1 div.titre table img { width:32px; }
div.size2 div.titre table img { width:27px; }
div.size3 div.titre table img { width:22px; } */
div.titre div a { color: lightgreen;  font-size: 12px;}
div#divAppliPedago div.titre img.imgRetour {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    /*height: 35px; width:35px;*/
    padding: 5px;
    z-index: 1;
}

div.titre .titre-table {
  width: 100%;
}

div.titre .titre-cell {
  font-size: 1.5rem;
}

div.titre .header-section {
  display: flex;
  justify-content: center;
  align-items: center;
}

div.titre .logo-ecf {
  height: 1rem;
}

div.titre .section-divider {
  margin: 0;
  height: 1rem;
  display: none;
}

@media screen and (min-width: 400px) {
    div.titre .section-divider {
        display: block;
    }
    div.titre .header-section {
        gap: 1rem;
    }
}

@media screen and (min-width: 700px) {
    div.titre section.header-section span {
        font-size: 1.5rem;
    }

    div.titre .header-section {
        gap: 1.2rem;
        margin-top: 0.5rem;

    }

    div.titre .logo-ecf {
        height: 1.5rem;
    }
    
}

/* .theme2 div#divAppliPedago div.titre img.imgRetour { background-color: #fdfdfd; } */
div#divAppliPedago div.titre img.imgOK		 	{ position: absolute; right: 5px; top:    5px;  height: 35px; width:35px; padding:5px; }
div#divAppliPedago div.titre img.imgConnect  	{ position: absolute; right: 5px; top:    15px;  height: 30px; padding:5px; }
div#divAppliPedago div.titre img.imgstatus   	{ position: absolute; right: 20px;top:   24px; height: 60px; padding:5px;}
div#divAppliPedago div.titre img.imgMessagerie	{ position: absolute; left : calc(70% + 22px); top:    5px; height: 25px; padding:5px; cursor:pointer; display:none !important}
div#divAppliPedago div.titre img.ImgDeconnexion	{ position: absolute; left : 70%; top:    5px; height: 25px; padding:5px; cursor:pointer; }
div#divAppliPedago div.titre img.imgPhotos   	{ position: absolute; right: 5px; top:    5px; height: 16px; padding:5px; display:none;}
div#divAppliPedago div.titre img.imgEmarg    	{ position: absolute; right:28px; top:    5px; height: 16px; padding:5px; display:none;}
div#divAppliPedago div.titre img.imgNotes	 	{ position: absolute; right:46px; top:    5px; height: 16px; padding:5px; display:none;}
div#divAppliPedago div.titre img.imgAppliAac 	{ position: absolute; right:64px; top:    5px; height: 16px; padding:5px; display:none;}
div#divAppliPedago div.titre img.imgAppliTGD 	{ position: absolute; right:82px; top:    5px; height: 16px; padding:5px; display:none;}


div#divAppliPedago div.titre img.ImgGeoChronoStatus { position: absolute; right: 0px; padding: 5px; top: 20px; height:24px; cursor:pointer; display:none; }
div#divAppliPedago.geoChronoRecording div.titre img.ImgGeoChronoStatus { display:block; }

/* CORPS */
div#divAppliPedago div.corps { height: calc(100% - 80px);
    overflow: auto;
    background: #FFF;
    border-radius: 10px 10px 0 0; }
/* page CONNEXION */
/* div#divAppliPedago div.connexion table { text-align:center; }
div#divAppliPedago div.connexion input {
	width: 100%;
	max-width : 300px;
    border: solid 1px var(--primary-color);
    border-radius: 25px;
    height: 30px;
    background: #f0f0f0;
	
} div#divAppliPedago div.connexion button[name="user"] { width:150px; border:solid 1px #666666; border-radius:2px; height:30px; } */
div.winMenu table { width:150px; }
/* popup Edit*/
form[name="formPopupEdit"] textarea[name="text"] { /*width:250px; height:200px;*/
    width: calc(100% - 15px);
    height: calc(100% - 90px);
    margin: 5px;
}
div.popup.edit {  top: 100px; left: 50px; right: 50px; bottom: 50px; }
div.popup.edit #attention { color:red; display:none; }
.attention_obs_plg div.popup.edit #attention.obs_plg,
.attention_obs_pedago div.popup.edit #attention.obs_pedago 
{ display:block; }
/* */
div.popup {
	border-radius:4px;
	background-color:#fdfdfd ; 
	position:absolute;
	border:solid 1px #666666;
	font: 12px  Segoe UI, Segoe, Tahoma, Helvetica, Arial, sans-serif ;
	-webkit-box-shadow: 0px 0px 10px #2b2b2b;
	box-shadow: 0px 0px 10px #2b2b2b;
	z-index:200;
	overflow:auto;
}

.connexion button:not(.input-container button):not(.login-button) {
    display: none;
}

.connexion th{
	padding-right: 50;
	padding-top: 30;
}

.connexion td{
	padding-top: 30;
}

form[name="formConnexion"] {
  max-width: 400px;
  margin: 2rem auto;
  padding: 2rem;
  background: white;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(18, 68, 131, 0.1);
  transition: all 0.3s ease;
}

.form-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-weight: 600;
  color: var(--primary-color);
  font-size: 1rem;
  text-align: start;
}

.input-container {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  width: 100%;
}

.input-container input {
  flex: 1;
  padding: 0.8rem 1rem;
  border: 2px solid #e0e6f0;
  border-radius: 10px;
  background: #f8f9fc;
  font-size: 1rem;
  color: var(--primary-color);
  transition: all 0.3s ease;
  box-shadow: none;
}

.input-container input:focus {
  border-color: var(--primary-color);
  outline: none;
  background: #fff;
  box-shadow: 0 3px 10px rgba(18, 68, 131, 0.1);
}

.input-container input:disabled {
  background: #f0f0f0;
  opacity: 0.8;
  cursor: not-allowed;
}

.input-container button {
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 0.5rem;
  height: 42px;
  width: 42px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.input-container button:hover {
  background: #1a5daa;
  transform: translateY(-2px);
}

.login-button {
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 0.8rem 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 1rem;
  gap: 0.5rem;
}

.login-button:hover {
  background: #1a5daa;
  transform: translateY(-2px);
}

form[name="formConnexion"] button img,
form[name="formConnexion"] td img {
width: 20px;
height: auto;
filter: brightness(0) invert(1);
}

.formateur-item:hover {
    background-color: #f5f5f5;
}

.formateur-item:active {
    background-color: #e0e0e0;
}

.formateur-menu {
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.form-group {
  animation: fadeIn 0.5s ease forwards;
}

button {
    background:transparent; border: none;   margin: 1px; font-size: 18px;
    /* background-image: linear-gradient(to bottom, #3DA8DA 19%, #8BD5F7 92%); */
}
.sw_loading{
	float:left; left:5px; top:5px; width:43px;height:11px;z-index:999999999;
	background-image:url("js/loading.gif");
	background-repeat:no-repeat;
}
div.divPrint img.sig { width:200px; height:80px; border-radius:3px; }
div.divPrint a img { display:none; }
div.divPrint {
	position:absolute;
	left:0px;
	top:0px;
	/*min-height:297mm;
	width:210mm;*/
	padding:8mm;
	background-color: white;
	font-family: Segoe UI, Segoe, Tahoma, Helvetica, Arial, sans-serif ;
}
div.divPrint table { table-layout: auto; } 
table#formDefPEdago { color:#333333; }
table#formDefPEdago th { color:black; }
table#formDefPEdago td { border:solid 1px  #666666; }

/* planning semaine (surcharge de js/planning.css) */
table.planning_mainTable div.enrPlg { font-size:11px; }
table.planning_mainTable div.enrPlg div.titre_etiquette { padding:1px; border-bottom:solid 1px #888888; width:100%; white-space: nowrap; overflow-x:auto; }
table.planning_mainTable div.enrPlg div.titre_etiquette span.produit { color:blue; }
table.planning_mainTable div.enrPlg div.corps_etiquette   { overflow:auto; width: 100%; height: calc(100% - 18px); }
table.planning_mainTable div.enrPlg span.pedago { color:red; font-style:italic; }
table.planning_mainTable div.enrPlg span.comment { color:blue; font-style:italic; }

/* themes */
._obs_ { color: green; font-style: italic; }
table td.selection, img.selection, tr.selection, tr.selection table  {
 background-image: linear-gradient(to bottom, #E69731 0%, #FFD399 100%); 
} 

body.theme0 { background-color: #e0e0e0; }
body.theme0 div.titre { background-image: linear-gradient(to top,#525252 0%, #6b6b6b 78%); color: #eeeeee; }
body.theme0 div.Lecon div.onglets { background-color:#eeeeee; }
body.theme0 table.OTreeView tr.level_1 td { background-image:linear-gradient(to top,#525252 0%, #6b6b6b 78%); }
body.theme0 table.OTreeView tr.level_2 td { background-image:linear-gradient(to bottom, #aaaaaa 10%, #c1c1c1 94%, #aaaaaa 100%); }


body.theme1 { background-color: #e0e0e0; }
body.theme1 div.titre { background-image: linear-gradient(to top,#1A1A1A 0%, #575757 78%); color: #eeeeee; }
body.theme1 div.Lecon div.onglets { background-color:#eeeeee; }
body.theme1 table.OTreeView tr.level_1 td { background-image:linear-gradient(to bottom, #9bc7c4 0%, #3daaa2 50%, #2ba299 51%, #238c84 100%); }
body.theme1 table.OTreeView tr.level_2 td { background-image:linear-gradient(to bottom, #aaaaaa 10%, #c1c1c1 94%, #aaaaaa 100%); }


/* body.theme2 {     background: var(--primary-color); } */

body.theme2 div.Lecon div.onglets { background-color:#c9dbf6; }
body.theme2 table.OTreeView tr.level_2 td { background-image:linear-gradient(to bottom, #aaaaaa 10%, #c1c1c1 94%, #aaaaaa 100%); }
body.theme2 table.OTreeView tr.level_1 td { background: var(--primary-color);
	color:#FFF; }
body.theme2 table.OTreeView tr.level_1 td .nom div[name="nom"]{ 
	color:#FFF; }
body.theme2 div#divAppliPedago table.TV_seance tr.level_1 td.date_heure div  { color:#92aaf3; }
body.theme2 table.OTreeView table.impaire { background-color: #c9dbf6; }
body.theme2 table td.selection, body.theme2 img.selection,  body.theme2 tr.selection, body.theme2 tr.selection table  {
	background-image: linear-gradient(to bottom, rgba(253, 247, 73, 0.77) 0%, rgba(255, 248, 134, 0.88) 100%);
}
body.theme3 { background-color: #bef6a7; }
body.theme3 div.titre { background-image: linear-gradient(to top,#2ed31e 0%, #26d015 78%); color: #eeeeee; }
body.theme3 div.Lecon div.onglets { background-color:#bef6a7; }
body.theme3 table.OTreeView tr.level_1 td { background-image:linear-gradient(to top,#2ed31e 0%, #26d015 78%); }
body.theme3 table.OTreeView table.impaire { background-color: #bef6a7; }

body.theme4 { background-color: #ffd5b4; }
body.theme4 div.titre { background-image: linear-gradient(to top,#f18037 0%, #fd9747 78%); color: #eeeeee; }
body.theme4 div.Lecon div.onglets { background-color:#ffd5b4; }
body.theme4 table.OTreeView tr.level_1 td { background-image:linear-gradient(to top,#f18037 0%, #fd9747 78%); }
body.theme4 table.OTreeView table.impaire { background-color: #ffd5b4; }
body.theme4 table td.selection, body.theme4 img.selection,  body.theme4 tr.selection, body.theme4 tr.selection table  {
    background-image: linear-gradient(to bottom, rgba(66, 182, 250, 0.61) 0%, #cef0ff 100%);
}

body.theme5 { background-color: #f69cd2; }
body.theme5 div.titre { background-image: linear-gradient(to top,#f137b4 0%, #f373c0 78%); color: #eeeeee; }
body.theme5 div.Lecon div.onglets { background-color:#f69cd2; }
body.theme5 table.OTreeView tr.level_1 td { background-image:linear-gradient(to top,#f137b4 0%, #f373c0 78%); }
body.theme5 table.OTreeView table.impaire { background-color: #f69cd2; }
body.theme5 table td.selection, body.theme5 img.selection,  body.theme5 tr.selection, body.theme5 tr.selection table  {
    background-image: linear-gradient(to bottom, rgba(66, 182, 250, 0.61) 0%, #cef0ff 100%);
}

body.theme6 { background-color: #d8a9f5; }
body.theme6 div.titre { background-image: linear-gradient(to top,#9f3ade 0%, #8b21c1 78%); color: #eeeeee; }
body.theme6 div.Lecon div.onglets { background-color:#d8a9f5; }
body.theme6 table.OTreeView tr.level_1 td { background-image:linear-gradient(to top,#9f3ade 0%, #8b21c1 78%); }
body.theme6 table.OTreeView table.impaire { background-color: #d8a9f5; }
body.theme6 table td.selection, body.theme6 img.selection,  body.theme6 tr.selection, body.theme6 tr.selection table {
    background-image: linear-gradient(to bottom, rgba(66, 182, 250, 0.61) 0%, #cef0ff 100%);
}
body.theme6 table.TV_seance  button[name="eval"] {
    background-image: linear-gradient(to top,#9f3ade 0%, #8b21c1 78%);
    color: white;
}

body.theme7 { background-color: #ebd8ce; }
body.theme7 div.titre { background-image: linear-gradient(to top,#a2683c 0%, #ce9a7f 78%); color: #eeeeee; }
body.theme7 div.Lecon div.onglets { background-color:#ebd8ce; }
body.theme7 table.OTreeView tr.level_1 td { background-image:linear-gradient(to top,#a2683c 0%, #ce9a7f 78%); }
body.theme7 table.OTreeView table.impaire { background-color: #ebd8ce; }
body.theme7 table td.selection, body.theme7 img.selection,  body.theme7 tr.selection, body.theme7 tr.selection table {
    background-image: linear-gradient(to bottom, rgba(66, 182, 250, 0.61) 0%, #cef0ff 100%);
}
body.theme7 table.TV_seance  button[name="eval"] {
    background-image: linear-gradient(to top,#a2683c 0%, #ce9a7f 78%);
    color: white;
}

/*
body.theme8, table, input , button { background-color: #8d8d8d; color:white; }
body.theme8 div.titre, body.theme8 div.titre table { background-image: linear-gradient(to top,#f2f2f2 0%, #fdfdfd 78%); color: #919191; }
body.theme8 div.Lecon div.onglets { background-color:#8d8d8d; }
body.theme8 table.OTreeView tr.level_1 td { background-image: linear-gradient(to top,#f2f2f2 0%, #fdfdfd 78%); }
body.theme8 table td.selection, body.theme8 img.selection,  body.theme8 tr.selection, body.theme8 tr.selection table {
    background-image: linear-gradient(to bottom, rgba(66, 182, 250, 0.61) 0%, #cef0ff 100%);
}
body.theme8 table.OTreeView table.impaire , body.theme8 table.OTreeView table.impaire td,	body.theme8 table.OTreeView table.impaire th	{ background-color: #8d8d8d; color:white; }
body.theme8 table.OTreeView table.paire	  , body.theme8 table.OTreeView table.paire	td,	body.theme8 table.OTreeView table.paire	th	{ background-color: #b5b4b4; color:white; }
body.theme8 table.TV_seance  button[name="eval"] {
    background-image: linear-gradient(to top,#f2f2f2 0%, #fdfdfd 78%);
    color: white;
}
*/

body.version_a_jour table.liens_applis { display:none; }
div#divAppliPedago div.liens_applis table.liens_applis {
	margin:5px; 
	position:absolute; 
	right:10px; 
	bottom:10px; 
	max-width:200px; 
}
div#divAppliPedago table.liens_applis button { background-image: linear-gradient(to bottom, #3DA8DA 19%, #8BD5F7 92%); 
    width: 165px; height: 65px; padding:5px;
    overflow: hidden;  position: relative;
    color:white; 
	font-size:inherit;
	border-radius:2px;
}
#DTech_Version { font-size:12px; }
.OTreeViewTitle { display:none; }

#popupNotif input{
    height: 10% !important;
    width: 60% !important;
}

#non-notif {
    background: #DA1F26;
    border-radius: 25px;
    color: #FFF;
    font-size: 1rem;
    padding: 25px;
}   

#whois{
    position: absolute;
    top: 25px;
    left: 75px;
    background-color: #f0f0f0;
    border-radius: 10px;
    padding: 5px;
    border: 1px solid var(--primary-color);
    pointer-events: none;
}


div#divAppliPedago .titre td{
    width: 100%;
    height: 100%;
}

#Menu_burger{
	display:none;
	height: 20%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 45;
	
}

#Calendrier {
	display:none;
    position: absolute;
    top: 20px;
    right: 45px;
    height: 30px;
}

#FeuTricolore {
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 15px;
    height: 40px;
}

#online_info.online {
    color: #2ed31e;
    font-weight: bold;
}

#online_info.offline {
    color: #ff6f74;
    font-weight: bold;
}


@media screen and (min-width: 500px){
    #whois{
     left: 100px;   
    }

    #Menu_burger{
	    height: 40%;
    }
	#Calendrier{
		height: 55;
		top: 12;
		right: 80; 
	}
    #FeuTricolore {
        position: absolute;
        top: 15px;
        right: 35px;
        height: 55px;
    }
    
	div#divAppliPedago div.titre img.imgConnect{
		position: absolute;
		right: 5px;
		top: 5px;
		height: 65px;
		padding: 5px;
	}
	div#divAppliPedago div.titre img.ImgGeoChronoStatus { top: 30px; height:36px; }
}

div#divAppliPedago table.OTreeView .hor_produit {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: space-around;
    height: 100%;
	width:100%;
}

div#divAppliPedago table.OTreeView .hor_produit div {
    color: black !important;
}


form[name="formPopupTech"] h1{
	text-transform: uppercase;  
	font-family: 'Frontage Condensed Inline TheFontsMaster com';
	font-weight: lighter;
	font-size:1.5rem;
	margin:5px;
}

#tblPopupTech tbody{
	display:flex;
	flex-flow: column;
	align-items:center;
}


#tblPopupTech tbody tr{
	width:100%;
	display: flex;
    align-items: center;
    justify-content: center;
}

#tblPopupTech tbody td{
	width:50%;
}

@media screen and (min-width: 500px){
	form[name="formPopupTech"] h1{
		font-size:2rem;
	}
}

input[type='radio']:checked:after {
    width: 15px;
    height: 15px;
    border-radius: 15px;
    top: -2px;
    left: -1px;
    position: relative;
    background: rgb(2,0,36);
	background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(255,255,255,1) 0%, rgba(18,68,131,1) 50%);
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid #FFF;
}

.popup input{
	width: 100%;
}

#divAppliPedago .ongletEleve div.nom img { position: absolute; right: 2px; width: 15%; cursor: pointer; }

/* mode sombre*/

/* #divAppliPedago.sombre div.connexion table tbody th,
#divAppliPedago.sombre div.connexion input, */
#divAppliPedago.sombre #Menu,
#divAppliPedago.sombre #Menu div,
#divAppliPedago.sombre .corps,
#divAppliPedago.sombre .popup,
#divAppliPedago.sombre .popup td,
#divAppliPedago.sombre .jourFormateur,
#divAppliPedago.sombre table.OTreeView table.paire,
#divAppliPedago.sombre table .level_3,
#divAppliPedago.sombre table.TV_seance tr.level_4 td,
#divAppliPedago.sombre .abs_pres,
#divAppliPedago.sombre .Lecon_Eleves .ongletEleve .nom,
#divAppliPedago.sombre #divLecon_contenant_div,
#divAppliPedago.sombre form[name="form_fiche"] ,
#divAppliPedago.sombre #divMessages ,
#divAppliPedago.sombre #divMessages #Messages,
#divAppliPedago.sombre #divRecherche,
#divAppliPedago.sombre .divPlanning .impaire,
#divAppliPedago.sombre #whois{
    background-color: #000 ;
    color:#FFF;
    border-color: #FFF !important;
}

#divAppliPedago.sombre .Lecon_Eleves .ongletEleve.selection .nom,
#divAppliPedago.sombre #divMessages #MessageRedac button{
    background: #53bbae;
    border: 1px solid #53bbae;
}


#divAppliPedago.sombre table.OTreeView table.impaire{
    background-color: #525252;
    color: #FFF;
}


#divAppliPedago.sombre table.OTreeView div, 
#divAppliPedago.sombre .abs_pres div,
#divAppliPedago.sombre .abs_pres td,
#divAppliPedago.sombre .Lecon_Eleves .ongletEleve .nom span,
#divAppliPedago.sombre .Lecon_Eleves .ongletEleve .nom small,
#divAppliPedago.sombre table.TV_parcours .date,
#divAppliPedago.sombre .verif_ext_new button,
#divAppliPedago.sombre .question td,
#divAppliPedago.sombre .ongletEleve .nom td,
#divAppliPedago.sombre table.TV_parcours .date span,
#divAppliPedago.sombre #popup_divTitre h1,
#divAppliPedago.sombre #popup_divTitre span,
#divAppliPedago.sombre .popup span,
#divAppliPedago.sombre div.fiche form[name="form_fiche"]  td, 
#divAppliPedago.sombre form[name="form_fiche"]  span ,
#divAppliPedago.sombre #datesExams div b,
#divAppliPedago.sombre #datesExams div ,
#divAppliPedago.sombre .divPlanning .impaire td div{
    color:#FFF
}

 

#divAppliPedago.sombre table.TV_parcours .pedago a,
#divAppliPedago.sombre table.OTreeView td a,
#divAppliPedago.sombre table.OTreeView td a small{
    text-decoration: none;
    color: #FFF;
}

#divAppliPedago.sombre .divPlanning .h_inner td{
    border-right: 1px solid #FFF;
    color:#FFF;
}

#divAppliPedago.sombre div.Lecon div.onglets{
    background-color: #c9dbf6 !important;
}

#divAppliPedago.status-message {
    position: absolute;
    top:10px;
    right: 10px;
    z-index:1000;
    padding:10px;
    border-radius: 5px;
    background-color:#c9dbf6 ;
    color: #7c0b0f;
}
/* notifsvc */
#Installation_pwa {
    flex-flow: column nowrap;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 10%;
    background: #FFF;
    border: 1px solid var(--primary-color);
    border-radius: 25px;
    width: 80%;
    right: 10%;
    height: 80%;
    font-family: 'Affogato Regular';
}

#Installation_pwa h3{
    font-family: 'Frontage Condensed Inline TheFontsMaster com';
    font-size: 1.3rem;
    font-weight: 100;
}

#stop_alert_pwa {
    background: var(--primary-color);
    padding: 5px 15px;
    border-radius: 10px;
    color: #FFF;
    font-family: 'Affogato Regular';
    font-size: 1.5rem;
}

.change-password-popup {
    position:fixed; z-index:999999; background:linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border:none; border-radius:16px; padding:0; width:480px; max-width:90vw;
    left:50%; top:50%; transform:translate(-50%, -50%);
    box-shadow:0 20px 40px rgba(0,0,0,0.15), 0 8px 16px rgba(0,0,0,0.1);
    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.change-password-header {
    background:var(--primary-color); color:white; padding:24px; border-radius:16px 16px 0 0; 
    text-align:center; position:relative;
}
.change-password-title {
    margin:0; font-size:20px; font-weight:600; letter-spacing:-0.025em; color:white;
}
.change-password-content {
    padding:32px;
}
.change-password-group {
    margin-bottom:24px;
}
.change-password-group:last-child {
    margin-bottom:32px;
}
.change-password-label {
    display:block; margin-bottom:8px; font-weight:500; color:#374151; font-size:14px; width: fit-content;
}
.change-password-input {
    width:100%; padding:12px 16px !important; border:2px solid #e5e7eb; border-radius:10px; 
    font-size:14px; transition:all 0.2s ease; background:#ffffff; box-sizing:border-box; text-align:left !important;
}
.change-password-input:focus {
    border-color:var(--primary-color); outline:none; box-shadow:0 0 0 3px rgba(9,39,77,0.1);
}
.change-password-buttons {
    display:flex; gap:12px; margin-bottom:20px;
}
.change-password-btn-primary {
    flex:1; color:white; padding:14px 20px; border:none; border-radius:10px; 
    font-weight:600; font-size:14px; cursor:pointer; background:var(--primary-color); 
    transition:all 0.2s ease;
}
.change-password-btn-primary:hover {
    background:#0a2e5a; transform:translateY(-1px); 
    box-shadow:0 6px 16px rgba(9,39,77,0.3);
}
.change-password-btn-secondary {
    flex:0.4; background:#f8fafc; color:#6b7280; padding:14px 20px; 
    border:2px solid #e5e7eb; border-radius:10px; font-weight:500; 
    font-size:14px; cursor:pointer; transition:all 0.2s ease;
}
.change-password-btn-secondary:hover {
    background:#f1f5f9; border-color:#d1d5db;
}
.change-password-message {
    padding:12px; border-radius:8px; text-align:center; 
    font-size:14px; font-weight:500; display:none;
}
.change-password-message.error {
    background:#fef2f2;
    color:#b91c1c;
}
.change-password-message.success {
    background:#f0fdf4;
    color:#166534;
}
.change-password-message.loading {
    background:#eff6ff;
    color:#1e40af;
}