table#userTable.dataTable tbody tr:hover {
  background-color: #d5f5e3 !important;
}
 
table#userTable.dataTable tbody tr:hover > .sorting_1 {
  background-color: #d5f5e3 !important;
}

table#userTable.dataTable tbody tr.selected {
    background-color: #acbad4 !important; 
}

table.dataTable tbody tr.selected>* {
 color:black;
 box-shadow: inset 0 0 0 9999px #b0bed9 !important;
}

/* *************** */

table.dataTable thead th, table.dataTable thead td, table.dataTable tfoot th, table.dataTable tfoot td {
  background-color: #7fb3d5; 
 /* background-color:linear-gradient(to right, #ffffff ,  #2874a6);*/
}

table.dataTable tbody tr  {
  background-color: #ffffff;
}
/* table.dataTable.table-striped tbody tr.odd  {
  background-color: #f9f9f9; 
} */

table.dataTable th.dtfc-fixed-left,
table.dataTable th.dtfc-fixed-right,
table.dataTable td.dtfc-fixed-left,
table.dataTable td.dtfc-fixed-right {
  z-index: 1;
}

div.dtfc-right-top-blocker,
div.dtfc-left-top-blocker {
  margin-top: 6px;
  border-bottom: 1px solid #ddd !important;
}

table.dataTable.table-bordered.dtfc-has-left {
  border-left: none;
}

div.dataTables_scroll.dtfc-has-left table.table-bordered {
  border-left: none;
}

div.dataTables_scrollBody {
  border-left: 0px solid #ddd !important;
}

div.dataTables_scrollFootInner table.table-bordered tr th:first-child,
div.dataTables_scrollHeadInner table.table-bordered tr th:first-child {
  border-left: 1px solid #ddd !important;
}

tr.dt-rowReorder-moving td.dtfc-fixed-left,
tr.dt-rowReorder-moving td.dtfc-fixed-right {
  border-top: 2px solid #888 !important;
  border-bottom: 2px solid #888 !important;
}
tr.dt-rowReorder-moving td.dtfc-fixed-left:first-child {
  border-left: 2px solid #888 !important;
}
tr.dt-rowReorder-moving td.dtfc-fixed-right:last-child {
  border-right: 2px solid #888 !important;
}

table.dataTable.table-striped.DTFC_Cloned tbody {
  background-color: white;
 }

table.dataTable th {
  border-bottom-color: #DEE2E6;
 /*  background-color:linear-gradient(to right, #ffffff ,  #2874a6); */
  background-color:  #aed6f1 ;
}

table.dataTable.table-bordered.dtfc-has-left tr td {
  border-left: none;
}
table.dataTable  td { 
	padding: 2px 2px 2px 2px;
	vertical-align: middle;
}

div.dataTables_scrollBody thead tr,
div.DTFC_LeftBodyLiner thead tr,
div.DTFC_RightBodyLiner thead tr {
  height: 0px !important;
}

.table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: var(--bs-table-hover-bg);
  color: var(--bs-table-hover-color);
}

/* Fin datatable fixed colonne */

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  vertical-align: middle;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color:  #5dade2;
  color: black;
  text-align: left; 
  vertical-align: middle;
  white-space:pre-wrap;
  border-radius: 6px;
  padding: 5px 0;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  right: 115%;
 }
 .tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 10%;
  left: 102%;
  text-align: left; 
  vertical-align: middle;
  white-space:pre-wrap;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent black  ;
   /* the arrow */
  border:8px solid #000;
  border-color: transparent transparent transparent red;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
 }
/*****/
.EASA {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.EASA .EASAtext {
  visibility: hidden;
  width: 200px;
  background-color: #58d68d ;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
   /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  right: 115%;
 }
 .EASA .EASAtext::after {
  content: "";
  position: absolute;
  top: 10%;
  left: 102%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent black ;
   /* the arrow */
  border:8px solid #000;
  border-color: transparent transparent transparent red;
}

.EASA:hover .EASAtext {
  visibility: visible;
}
/*
.ITEMA {display:none;}
.ITEMB {display:none;}
.ITEMC {display:none;}
.ITEMDE {display:none;}*/

.tdsaisie{
	white-space: pre-line;
	border:1px solid black;
	background: #D0D3D4; /* #FFCCAA ;*/
}
.tdsaisieval{
	border:1px solid black;
	background: #f44336 ;
}
.champ-rempli {
    background-color:  #dcf0e4 ;
}
.classic { padding: 0.8em 1em; }

.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html a:hover { background: transparent; }
.classic {background: #FFFFAA; border: 1px solid #FFAD33; }
.critical { background: #FFCCAA; border: 1px solid #FF3334;	}
.help { background: #9FDAEE; border: 1px solid #2BB0D7;	}
.info { background: #9FDAEE; border: 1px solid #2BB0D7;	}
.warning { background: #FFFFAA; border: 1px solid #FFAD33; }

.heure  { text-align:right; padding-right: 15px !important;} 
.type  { width: 6px;text-align:center;} 
.cienom  {
	display: block;
	text-align: start; 
	white-space: nowrap; 
	min-width: 60px;
	 margin:0;
    padding:0;
	} 
.QUOTATYPE {width: 6px;text-align:center;text-align: center;}
.CIELPE {width: 3px;text-align:center;text-align: center;}
.criticite{width: 3px;text-align:center;text-align: center;}
.debtab { padding: 0em 0em;  
	border: 1px solid  #f2f3f4  ; 
 /*	width:3px;*/
	border:1px solid  #f2f3f4 ;
	grid-row-gap: 0;
	white-space: normal;
	gap: 0;
	} 
.immat {
  cursor: pointer;
  width: 4px;
  text-decoration : underline;
}	
.immatrouge {
  cursor: pointer;
  text-decoration : underline;
  color : red;
  text-align: center;
     }
.numvol { white-space: nowrap; 
  width: 10px; 
  overflow: hidden;
  font-weight: bold;
  text-overflow: ellipsis;
  text-decoration : underline;
  cursor: pointer;
  text-align:center;
  } 

.rouge {  background-color : #f1948a;}
.jaune {  background-color : #FFFF00  ;}
.bleu  {  background-color : #7fb3d5;}
.blanc  {  background-color :  #ffffff ;}
.centre  {text-align: center;  } 
.vert   {  background-color : green ;}
.majuscule { text-transform: uppercase; }
.minuscule {text-transform: inherit ;}

.TPI {
  background-color: YELLOW;
  color: red;
  float:right;
   direction: rtl;
  }

  
.debth { padding: 0em 0em; 
	background: linear-gradient(to right, #ffffff ,  #2874a6);
	/*border: 2px solid #FFAD33; */
	width:10px; 
	border : 1px solid #000000;
	text-align:center;
	grid-row-gap: 0;
	gap: 0;} 


.tooltip2 {
  position: relative;
  display: inline-block;
  white-space:normal;
  border-bottom: 1px dotted black;
  text-align:center;
  vertical-align: middle;
}

.tooltip2 .tooltiptext {
  visibility: hidden;
  width: auto;
  white-space:pre; 
  background-color:   #5dade2   ; /* #555;*/
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 5px 2px 1px 1px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 20%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
  text-align:center;
}

.tooltip2 .tooltiptext::after {
  content: "";
  text-align: left;
  vertical-align: middle;
  position: absolute;
  top: 100%;
  left: 20%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: red transparent transparent transparent;
}

.tooltip2:hover .tooltiptext {
  visibility: visible;
  text-align: left;
  vertical-align: middle;
  font-size: 11px;
  opacity: 1;
}

.boutonQT:hover {background-color: #b92b56 ;}
.Fdsac:hover {background-color: #e74c3c  ;}
.apropos:hover {background-color: #e74c3c  ;}
.madsac:hover {background-color: #e74c3c  ;}

.Fdsac {
display:inline-flex;
border-radius:0em;
border: 0px solid  #2980b9 ;/* #f2f3f4;*/ 
box-sizing: border-box;
text-decoration: none;
text-align:left;
font-family:'Heveltica',sans-serif;
font-size: 11px;
font-weight:600;
background-color:  #aed6f1;/* #a9cce3; */
color:#2980b9   ;
text-shadow: 0 0.04em 0.04em rgba( 165, 105, 189);
transition: all 0.2s;
 min-width: 80%
}
.apropos {
display:inline-flex;
border-radius:0em;
border: 0px solid  #2980b9 ;/* #f2f3f4;*/ 
box-sizing: border-box;
text-decoration: none;
text-align:left;
font-family:'Heveltica',sans-serif;
font-size: 12px;
font-weight:600;
background-color:  #77add9;/* #a9cce3; */
color:#ffffff;
text-shadow: 0 0.04em 0.04em rgba( 165, 105, 189);
transition: all 0.2s;
width: 100%;
min-width: 80%
}
.madsac {
display:inline-flex;
border-radius:0em;
border: 0px solid  #2980b9 ;/* #f2f3f4;*/ 
box-sizing: border-box;
text-decoration: none;
text-align:left;
font-family:'Heveltica',sans-serif;
font-size: 12px;
font-weight:600;
background-color:  #2471A3;/* #a9cce3; */
color:#ffffff;
text-shadow: 0 0.04em 0.04em rgba( 165, 105, 189);
transition: all 0.2s;
width: 100%;
min-width: 80%
}

.boutonQT{
display:inline-block;
border-radius:0em;
border: 1px solid  #2980b9; 
box-sizing: border-box;
text-decoration:none;
font-family:'Heveltica',sans-serif;
font-size: 12px;
font-weight:300;
background-color: #a9cce3; 
color:#2980b9   ;
text-shadow: 0 0.04em 0.04em rgba( 165, 105, 189);
text-align:left;
transition: all 0.2s;
width: 100%;
font-weight: bold;
}

.lignes{
	display:block;
	border:  1px double   #2e86c1 ; /* #32a1ce; */
}

.encadrer{ border: 2px solid orange; padding: 5px; } 
.national{
	color:white;
	background-color:red;
	padding:5px;
}
.BTRI{
  float: right;
  font-size: 8x;
  font-weight: bold;
  color:white;
  background-color:red;
  padding:5px;
}

 /* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: absolute;
  top: 55%;
  left: 43%;
  resize: both;
  transform: translate(-50%, -50%);
  z-index: 1; /* Sit on top */
  width: auto;/*375px; /* Full width */
   height: auto; /* Full height */
  overflow: auto; /* Enable scroll if needed */
}

/* Modal Content/Box */
.modal-content {
  background-color:  #aed6f1   ;
  opacity: 0.9;
  margin: 0; /* 15% from the top and centered */
  padding: 10px;
  border: 1px solid #888;
  width: auto; /* Could be more or less, depending on screen size */
  animation-name: plandevol;
  animation-iteration-count: infinite;
  animation-duration: 30s;
   overflow: auto; /* Enable scroll if needed */
}
.plan-de-vol{
  animation-name: plandevol;
  animation-duration: 30s;
}
@keyframes plandevol {
  from {background-color: #aed6f1   ;}
  to {background-color:   #ffffff   ;}  /*c8e6c9*/
}

/*header déplacable */
#mydivheader {
  padding: 0px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}
.modalalert {
  display: none; /* Hidden by default */
  position: absolute; 
  top: 50%;
  left: 50%;
  resize: both;
  transform: translate(-50%, -50%);
  z-index: 1; /* Sit on top */
  width: 980px;
  overflow: auto; /* Enable scroll if needed */
}

/* Modal Content/Box */
.modalalert-content {
  background-color:  #f5b7b1;
  opacity: 0.9;
  margin: 0; /* 15% from the top and centered */
  padding: 10px;
  border: 1px solid #888;
  width: auto; /* Could be more or less, depending on screen size */
}
/*header déplacable */
#mydivheaderalert {
  padding: 0px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}
/*modal archive prepa*/
.modalarchi {
  display: none; /* Hidden by default */
  position: absolute; 
  top: 50%;
  left: 50%;
  resize: both;
  transform: translate(-50%, -50%);
  z-index: 1; /* Sit on top */
  width: 980px;
 /* width: 900px ;*/
 /* height: 400px; */
 /*Full: height ;*/
  overflow: auto; /* Enable scroll if needed */
}

/* Modal Content/Box */
.modalarchi-content {
  background-color: #d6eaf8 ;
  opacity: 0.9;
  margin: 0; /* 15% from the top and centered */
  padding: 10px;
  border: 1px solid #888;
  width: auto; /* Could be more or less, depending on screen size */
}
/*header déplacable */
#mydivheaderarchi {
  padding: 0px;
  cursor: move;
  z-index: 10;
  background-color: green;
  color: #fff;
}
/* The Close Button */
.close {
  color:  #f4511e ;
  float: right;
  font-size: 18px;
  font-weight: bold;
}
/* The Close Button */
.close1 {
  color:  #f4511e ;
  float: right;
  font-size: 18px;
  font-weight: bold;
}
[draggable=true] {
	cursor: move;
}
.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
} 
.Tabalerte {display:  inline-table;
			width: auto;  
			border:1px solid black;
			border-collapse:collapse;
			font-size: 10px;
			vertical-align:top;
			margin-top:0px;
			margin-left:10px;
			margin-right:0px;
			}

/******************************/
/* menu sel vol */

.dropbtn {
  background-color:  #5499c7 ;
  color: white;
  padding: 16px;
  font-size: 12px;
  border: none;
  border-radius: 8px;
}

.textesel{
/*	color: #e74c3c ; /* #f9a825   ; */
	background-color:  #e74c3c ;
/*	font-weight:bold; */
}
.dropdown {
  position: relative;
  display: block; /*inline-flex;*/
  float: right;
  margin-top: 10px;
}
.dropdown2 {
  position: relative;
  display: inline-flex;
  margin-top: 10px;
  margin-right:0px; /* largeur de la colonne gauche */
  margin-left:5px; /* largeur de la colonne gauche */
}
.dropdown3 {
  position: relative;
  display: inline-flex; 
  align-content:stretch;
 float: right;
 width:auto;
  margin-right: 20px; /* largeur de la colonne gauche */
  margin-left:0px; /* largeur de la colonne gauche */
}

.dropdown-content {
  display: none;
  position: absolute;
  font-size: 12px;  
  background-color: #d6eaf8;
  min-width: 200px; 
  box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
  z-index: 1;
  margin: -40px;
  top: 85px;
  float: right;
  border-radius: 8px;
  overflow: hidden;
}
.version-box,
.connected-box {
  border-radius: 8px;
}
.btexcel {
  display: none;
  border-radius:0em;
  border: 0px solid  #f2f3f4; 
  position: absolute;
  font-size: 12px;  
  background-color: #d6eaf8;
  color: blue;
  box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
 }
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  z-index: 1;
    margin: -105px;
 }
.dropdown-content a:hover {background-color: #b92b56;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #b92b56 ;}
/********************/
/* Texte défilant */
.messagedefilant {
  position: relative;
  display: block; /*inline-flex;*/
  float: right;	
  margin: 40px auto;
  padding: 0;
  overflow: hidden;
  position: relative;
  width: 40%;
 /* max-width: 840px;*/
  height: 20px;
}
.messagedefilant div {
  position: absolute;
  min-width: 75%; /* au minimum la largeur du conteneur */
}
.messagedefilant div span, 
.messagedefilant div:after {
  position: relative;
  display: inline-block;
  font-size: 1rem;
  white-space: nowrap;
  top:0;
}
.messagedefilant div span {
  animation: defilement 30s infinite linear;
  background: #cde;
}
.messagedefilant div:after {
  position: absolute;
  top:0; left:0;
  content:attr(data-text);
  animation: defilement2 30s infinite linear;
  background: #edc;
}
.suppligne {color:red;text-decoration:line-through;}
.colorbtreg {
border:1px solid black;
height:30px;
width:100px;
margin-top:8px;
background-color: #d7dbdd ;
color:red;
margin-bottom:8px;
}
.colorbtvert {
border:1px solid black;
height:30px;
width:100px;
margin-top:8px;
background-color: #d7dbdd ;
color:green;
margin-bottom:8px;
}
.volanim {background-color:  #ffffff ;}
.volanim:before {
	content: attr(data-time);
    display: inline-block;
    font-size: 10px;
    line-height: 1.5em;
    text-align: center;
    border-radius: 40%;
    vertical-align: middle;
    color: #287A2B;
	font-weight:bold;
	padding-right: 5px !important;
	padding-left: 5px !important;
	width: auto;
    height: auto;
    background-color: #DFF0D8;
 }
.volanimR {background-color:  #ffffff ;}
.volanimR:before {
	content: attr(data-time);
    display: inline-block;
    font-size: 10px;
    line-height: 1.5em;
    text-align: center;
    border-radius: 40%;
    vertical-align: middle;
	color: #F44336;
	font-weight:bold;
	padding-right: 5px !important;
	padding-left: 5px !important;
	width: auto;
    height: auto;
    background-color: #fadbd8 ;
 }
.volanimN {background-color:  #ffffff ;}
.volanimN:before {
	content: "►";
	float:center;
	vertical-align : middle;
	color:#03a9f4;
	font-size: 12px;  
	font-weight: bold;
    animation-duration: 1s;
	animation-name: clignoter;
	animation-iteration-count: 20;
	transition: none;
	padding-right: 10px !important;
	padding-left: 10px !important;
}
.volbiffure {background-color:  #ffffff ;}
.volbiffure:before {
 	content: "⚠"; /*"✖";*/
	font-size: 12px;
	color: #F44336;
	float:center;
	vertical-align : middle;
	font-weight: bold;
    animation-duration: 1s;
	animation-name: clignoter;
	animation-iteration-count: 20;
	transition: none;
	padding-right: 10px !important;
	padding-left: 10px !important;
 /*   display: inline-block;
    font-size: 14px;
    line-height: 1.5em;
    text-align: center;
    border-radius: 40%;
    vertical-align: middle;
	color: #F44336;
	font-weight:bold;
	padding-right: 5px !important;
	padding-left: 5px !important;
	width: auto;
    height: auto;
 /*   background-color: #fadbd8 ;*/
}
@keyframes clignoter {
  0%   { opacity:1; }
  40%   {opacity:0; }
  100% { opacity:1; }
}
.progress {	
color: #e74c3c !important;
font-size: 10px; 
font-weight: bold;
animation: clignoter 1s infinite;}
/********************/
/* Texte défilant */
/* le block conteneur */
.marquee-rtl {
  max-width: 35em;                      /* largeur de la fenêtre */
  margin: 1em auto 2em;
  border: 10px solid #F0F0FF;
  overflow: hidden;                     /* masque tout ce qui dépasse */
  box-shadow: 0 .25em .5em #CCC,inset 0 0 1em .25em #CCC;
}
/* le bloc défilant */
.marquee-rtl > :first-child {
  display: inline-block;                /* modèle de boîte en ligne */
  padding-right: 2em;                   /* un peu d'espace pour la transition */
  padding-left: 100%;                   /* placement à droite du conteneur */
  white-space: nowrap;                  /* pas de passage à la ligne */
  animation: defilement-rtl 15s infinite linear;
}
@keyframes defilement-rtl {
  0% {    transform: translate3d(0,0,0);   }   /* position initiale à droite */  
  100% {    transform: translate3d(-100%,0,0); } /* position finale à gauche */  
}
/**********************/
.tab {
  border-radius: 15px;
  overflow: hidden;
  border: 0px solid #ccc;
  background-color: #f3f7fb;
}
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 12px 14px;
  border-radius: 15px;
  transition: 0.3s;
}
.tab button:hover {
  background-color:rgb(52, 219, 155) ;
}
.tab button.active {
   background-color:   #7fb3d5 ;
   font-weight: bold;
}
.tab button:disabled,
.tab button[aria-disabled="true"] {
  color: #89939b;
  cursor: not-allowed;
  opacity: .7;
}
.tab button:disabled:hover,
.tab button[aria-disabled="true"]:hover { background-color: inherit; }

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 5px 10px;
  border: 0px solid #ccc;
  border-top: none;
}
.competencesTH {
  background-color: #7fb3d5;
  color: black;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
}
.detailsOJT {
	cursor: pointer; 
	width: 80%;   
	border:none;
	border-collapse:collapse;
	font-family:'Helvetica',sans-serif;
	font-size:14px;
	vertical-align:top;
	text-align: left;
	margin-top:5px;
	margin-left:10px;
	margin-right:0px;
	border-radius: 8px;
  }
.summaryOJT {
	cursor: pointer; 
	width: 80%;  
	border:0px solid grey;
	cursor: pointer; 
	font-weight: bold;
	font-size: 14px;
	background-color: #7fb3d5; 
	color: #070707;
	padding: 8px;
	font-family:'Helvetica',sans-serif;
	border-radius: 8px;
}
.summaryOJT:hover {
	cursor: pointer; 
	background-color: #ebeeeb ;
	color: #ec6f1b;
}
.rougeOJT {
  background-color: #f44336 ;
}
.orangeOJT {
  background-color: #f4a836 ;
}
.vertOJT {
  background-color: #47e777 ;
}
.vertexOJT {
  background-color: #0cb83f !important;
}
.Tabcompetence {display: block;
			width: 100%;  
		/*	border:2px solid black;*/
			border-collapse:collapse;
			font-size: 10px;
			margin-top:0px;
			margin-left:10px;
			margin-right:0px;
      font-family:Helvetica,sans serif;
      font-size:14px;
      max-height:600px;
      overflow:auto;
}
.Tabcompetence thead th {
    position: sticky;
    top: -1px; /* Colle au sommet du parent scrollable */
    background-color: #7fb3d5;
    color: black; /* OBLIGATOIRE : sinon le header est transparent */
    z-index: 10;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}
.acquis-center {
 text-align: center;
}
/* On force une bordure plus épaisse sur le haut des cellules de la ligne de tête */
tr.border-top-groupe td {
    border-top: 8px double #180ae7 !important; /* Couleur grise foncée ou noire */
}

/* Optionnel : Pour bien fermer le tableau en bas */
/*#ojtcompetence {
    border-collapse: collapse;
    border-bottom: 5px solid #ed0a0a;
}*/
/* Conteneur avec hauteur fixe et scroll */
.table-container {
    max-height: 500px; /* Ajustez la hauteur selon votre besoin */
    overflow-y: auto;
    border: 1px solid #ddd;
    margin-bottom: 10px;
}

.ojt-table {
    width: 80%;
    border-collapse: collapse;
    font-family: Helvetica, sans-serif;
    font-size: 12px;
}

/* Entête fixe (Sticky) */
.ojt-table thead th {
    position: sticky;
    top: 0;
    background-color: #7fb3d5;
    z-index: 10;
    padding: 12px 8px;
    border-bottom: 2px solid #ccc;
    text-align: middle;
    vertical-align: middle;
}

.ojt-table td {
    padding: 3px 3px;
    border-bottom: 1px solid #eee;
}

/* Effet Hover sur la ligne */
.ojt-table tbody tr:hover {
    background-color: #7fb3d5; /* Couleur légère au survol */
    cursor: default;
}
.ojt-table tbody td {
    cursor: pointer;
    text-align: center;      /* Centre horizontalement */
    vertical-align: middle;
}
/* Style du bouton dans la cellule */
.btnAfficherOJT {
    padding: 5px 10px;
    border: 1px solid green;
    background-color: rgb(171, 236, 171) !important  ;
    
    border-radius: 4px;
    transition: 0.3s;
}

.btnAfficherOJT:hover {
    background-color: green;
    color: white !important;
}
.ojt-table thead th {
    cursor: pointer;
    position: sticky;
    top: 0;
    background-color: #7fb3d5;
    /* ... vos autres styles ... */
}

.ojt-table thead th:hover {
    background-color: #e2e2e2;
}
/* Optionnel : ajouter un petit symbole de tri */
/*.ojt-table thead th:not(:last-child)::after {  */
.ojt-table thead th::after {
    content: ' ↕';
    font-size: 0.8em;
    color: #0a0a0a;
    float: right;
}
/* On cible toutes vos tables dynamiques */
table[id^="ojt"] td[data-empty="false"] {
    background-color: #d4edda !important;
    font-weight: bold;
}

/* On cible toutes vos tables dynamiques */
table[id^="ojtA"] td:not(:empty) {
    background-color: #d4edda;
}
/* On cible toutes vos tables dynamiques */
table[id^="ojtB"] td:not(:empty) {
    background-color: #d4edda;
}
/* On cible toutes vos tables dynamiques */
table[id^="ojtC"] td:not(:empty) {
    background-color: #d4edda;
}
/* On cible toutes vos tables dynamiques */
table[id^="ojtD"] td:not(:empty) {
    background-color: #d4edda;
}
.rougePale {
  border-radius: 10px;
  padding: 5px;
  background-color: #f8d7da;
}
.orange {
  border-radius: 10px;
  padding: 5px;
  background-color: #ffe5b4;
}
.vert {
  border-radius: 10px;
  padding: 5px;
  background-color: #6eed7a !important;
}
/* Liste des OJT : toute la largeur, palette bleue du site. */
#Tab1 .table-container {
    width: 100%;
    box-sizing: border-box;
    overflow: auto;
    margin-top: 12px;
    border: 1px solid #b6d3e5;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(36, 91, 120, .08);
}
#tableListeOJT {
    width: 100%;
    table-layout: auto;
    font-size: 11px;
}
#tableListeOJT thead th {
    background: #7fb3d5;
    color: #153e56;
    padding: 7px 7px;
    text-align: center;
    border-bottom: 2px solid #5499c7;
    white-space: nowrap;
}
#tableListeOJT thead th[onclick]:hover { background: #aed6f1; }
#tableListeOJT thead th:not([onclick]) { cursor: default; }
#tableListeOJT thead th:not([onclick])::after { content: none; }
#tableListeOJT tbody td {
    padding: 5px 6px;
    border-bottom: 1px solid #dce9f0;
    color: #243c4b;
    line-height: 1.3;
}
#tableListeOJT tbody tr { background: #fff; }
#tableListeOJT tbody tr:nth-child(even) { background: #f0f7fb; }
#tableListeOJT tbody tr:hover { background: #d6eaf8; }
#tableListeOJT tbody td:first-child { font-weight: bold; color: #2471a3; }
#tableListeOJT tbody td:nth-child(2),
#tableListeOJT tbody td:last-child { white-space: nowrap; }
#tableListeOJT .supprimer-ojt {
    padding: 3px 7px;
    border: 1px solid #e6b5b5;
    border-radius: 5px;
    background: #fff5f5;
    font-size: 11px;
    cursor: pointer;
}
#tableListeOJT .supprimer-ojt:hover { background: #f8d7da; border-color: #c97878; }
#tableListeOJT .supprimer-ojt:focus-visible { outline: 2px solid #2471a3; outline-offset: 2px; }
#tableListeOJT .supprimer-ojt:disabled { opacity: .5; cursor: wait; }

/* Notifications de génération PDF et Excel, non bloquantes. */
.alertify-notifier .ajs-message.ajs-ojt-export {
    background: #12476b;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    text-shadow: none;
    border: 2px solid #78c9ff;
    border-radius: 8px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .3);
}
.alertify-notifier .ajs-message.ajs-ojt-export.ajs-visible {
    animation: ojt-export-apparition .4s ease-out;
}
@keyframes ojt-export-apparition {
    from { opacity: 0; transform: translateY(16px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .alertify-notifier .ajs-message.ajs-ojt-export.ajs-visible { animation: none; }
}

.ajs-ojt-export .ojt-export-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    vertical-align: middle;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ojt-export-rotation .8s linear infinite;
}
@keyframes ojt-export-rotation {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .ajs-ojt-export .ojt-export-spinner { animation: none; }
}

/* Une même couleur identifie le formateur, quel que soit son rôle FIN/SIN/TIN. */
td.ojt-formateur,
#tableListeOJT tbody td.ojt-formateur,
.ojt-legende-formateur {
    background: #eadcf8 !important;
    color: #542681 !important;
    font-weight: bold;
    box-shadow: inset 3px 0 #8854b5;
}
.ojt-legende-formateur { display: inline-block; padding: 4px 8px; font-size: 12px; }
.ojt-choix-formateur { padding: 5px 8px; }
.ojt-choix-formateur label { font-weight: bold; }
.ojt-choix-formateur select { padding: 4px; margin-right: 8px; max-width: 100%; }
.ojt-choix-formateur select:focus-visible { outline: 2px solid #8854b5; outline-offset: 2px; }

/* Pastilles des types dans la liste des OJT. */
#tableListeOJT .ojt-liste-caption { caption-side: top; text-align: left; padding: 5px 0 7px; position: sticky; top: 0; z-index: 12; background: #fff; }
#tableListeOJT thead th { top: var(--ojt-liste-hauteur-barre, 0px); }
.ojt-liste-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 12px; background: #f3f7fb; border: 1px solid #d6e2ed; border-radius: 12px; }
.ojt-liste-titre { display: flex; flex-direction: column; gap: 2px; margin-right: auto; color: #193d5b; }
.ojt-liste-titre > strong { font-size: 16px; }
.ojt-liste-titre > span { font-size: 11px; color: #526779; }
.ojt-liste-total { display: flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: #193d5b; color: #fff; font-size: 12px; font-weight: 700; }
.ojt-liste-total strong { font-size: 20px; line-height: 1.2; }
.ojt-liste-repartition { display: flex; max-width: 100%; overflow-x: auto; border-radius: 999px; border: 1px solid #cbd2da; }
#tableListeOJT .ojt-liste-repartition .ojt-type-pastille { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 0; padding: 6px 10px; }
#tableListeOJT .ojt-liste-repartition .ojt-type-pastille + .ojt-type-pastille { border-left: 1px solid rgba(0, 0, 0, .12); }
.ojt-liste-nombre { font-size: 14px; font-variant-numeric: tabular-nums; }
#tableListeOJT .ojt-type-pastille {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    border: 1px solid transparent;
}
#tableListeOJT .ojt-type-observation { background: #dceefa; color: #17547c; border-color: #a9d1ec; }
#tableListeOJT .ojt-type-supervision { background: #dff3e6; color: #205b37; border-color: #aed8bc; }
#tableListeOJT .ojt-type-training { background: #fff0d2; color: #805000; border-color: #ebcf95; }
#tableListeOJT .ojt-type-autoevaluation { background: #fce3ec; color: #8a3054; border-color: #e9b5c9; }
#tableListeOJT .ojt-type-autre { background: #edf0f3; color: #465361; border-color: #cbd2da; }

/* Référentiel affiché à côté du type d’OJT. */
#tableListeOJT .ojt-referentiel-safa { background: #e3e8fc; color: #354782; border-color: #b9c5ef; }
#tableListeOJT .ojt-referentiel-saca { background: #d7f2ef; color: #17645c; border-color: #a0d8d0; }
#tableListeOJT .ojt-referentiel-sana { background: #fce6d8; color: #874420; border-color: #edbea1; }
#tableListeOJT .ojt-referentiel-autre { background: #edf0f3; color: #465361; border-color: #cbd2da; }

/* Dans la liste, seule la pastille du formateur est colorée, pas toute la cellule. */
#tableListeOJT tbody td.ojt-formateur {
    background: transparent !important;
    color: inherit !important;
    box-shadow: none;
}
#tableListeOJT .ojt-participant-formateur { background: #eadcf8; color: #542681; border-color: #c6a5e2; }
#tableListeOJT .ojt-participant-autre { background: #e5e7eb; color: #000; border-color: #cbd0d7; }

/* État et guidage vers la sélection du formateur. */
.ojt-choix-formateur {
    background-color: #eadcf8;
    color: #542681;
    border-radius: 8px;
}
.ojt-choix-formateur:not([data-formateur=""]):not([data-role=""]) {
    background-color: #dff3e6;
    color: #205b37;
}
.ojt-choix-formateur.ojt-formateur-attention {
    animation: ojt-formateur-signal .9s ease-in-out 3;
}
@keyframes ojt-formateur-signal {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    50% { box-shadow: 0 0 0 4px #8854b5, 0 0 14px 5px rgba(136, 84, 181, .35); }
}
@media (prefers-reduced-motion: reduce) {
    .ojt-choix-formateur.ojt-formateur-attention {
        animation: none;
        outline: 3px solid #8854b5;
        outline-offset: 2px;
    }
}

/* Même arrondi pour Date, Type OJT et Formateur. */
.ojt-ligne-informations {
    border-collapse: separate;
    border-spacing: 4px;
}
.ojt-ligne-informations td[id^="Odate"],
.ojt-ligne-informations td[id^="typeojt"] {
    border-radius: 8px;
    padding: 5px 8px;
}

/* Une formation clôturée reste consultable et exportable. */
body.formation-cloturee #addTabButton,
body.formation-cloturee .action-suppression-ojt,
body.formation-cloturee .validation-formation-action,
body.formation-cloturee #Tab0 .droit-management,
body.formation-cloturee #Tab2 button { display: none !important; }

/* Checklist de délivrance dans la synthèse. */
.detailsOJT.checklist-delivrance { box-sizing: border-box; width: min(calc(64% + 16px), calc(100% - 470px)); margin: 18px 10px; border: none; border-radius: 8px; background: #fff; color: #243c4b; overflow: hidden; }
.checklist-delivrance > .summaryOJT { box-sizing: border-box; width: 100%; padding: 8px; border-radius: 8px; background: #7fb3d5; color: #070707; }
.checklist-delivrance > .summaryOJT:hover { background: #ebeeeb; color: #ec6f1b; }
.checklist-content { padding: 16px 0; cursor: default; }
.checklist-help { margin: 0 0 12px; font-size: 12px; color: #526779; line-height: 1.5; }
.checklist-scroll { box-sizing: border-box; width: 100%; margin-right: 0; overflow-x: auto; border: 1px solid #b6d3e5; border-radius: 8px; }
#checklist-delivrance-table { width: 100%; border-collapse: collapse; table-layout: fixed; font: 12px Helvetica, Arial, sans-serif; overflow-wrap: anywhere; }
#checklist-delivrance-table th, #checklist-delivrance-table td { padding: 11px 12px; border: 0; border-bottom: 1px solid #dce9f0; vertical-align: middle; line-height: 1.5; text-align: left; }
#checklist-delivrance-table thead th { background: #7fb3d5; color: #153e56; font-weight: 600; }
#checklist-delivrance-table tbody th { background: #edf6fc; color: #193d5b; font-weight: 600; }
#checklist-delivrance-table tbody td { background: #fff; color: #243c4b; }
#checklist-delivrance-table tbody tr:nth-child(even):not(.checklist-zone) td { background: #f0f7fb; }
#checklist-delivrance-table .checklist-value { cursor: pointer; box-shadow: inset 0 0 0 1px #b6d3e5; white-space: pre-wrap; }
#checklist-delivrance-table .checklist-value:hover { background: #d6eaf8; }
#checklist-delivrance-table .checklist-indication { display: block; margin-top: 5px; font-size: 11px; color: #526779; }


#checklist-delivrance-table .checklist-zone td,
#checklist-delivrance-table .checklist-zone th { background: #d6eaf8; color: #193d5b; border-top: 2px solid #5499c7; border-bottom: 1px solid #b6d3e5; padding: 8px 12px; font-weight: 600; }

/* L’encart de synthèse flottant à droite occupe 440 px : conserver son espace. */
@media (max-width: 760px) {
    .detailsOJT.checklist-delivrance { clear: both; width: calc(100% - 20px); }
}

/* Compétences de la synthèse et du détail OJT : mêmes styles, couleurs métier conservées. */
:is(#synthese-competences-ojt, .ojt-detail-competences) > table {
    border-collapse: collapse;
    margin-top: 14px;
    font: 12px Helvetica, Arial, sans-serif;
    border: 1px solid #b6d3e5;
}
:is(#synthese-competences-ojt, .ojt-detail-competences) > table th {
    padding: 9px 12px;
    background: #7fb3d5;
    color: #153e56;
    border: 1px solid #b6d3e5;
    text-align: left;
}
:is(#synthese-competences-ojt, .ojt-detail-competences) > table td {
    padding: 9px 12px;
    border: 1px solid #dce9f0;
    text-align: center;
}
:is(#synthese-competences-ojt, .ojt-detail-competences) > table tr:nth-child(even) { background: #f0f7fb; }
:is(#synthese-competences-ojt, .ojt-detail-competences) > details { margin-top: 16px; }
:is(#synthese-competences-ojt, .ojt-detail-competences) .Tabcompetence {
    box-sizing: border-box;
    border: 1px solid #b6d3e5;
    border-radius: 8px;
    font: 12px Helvetica, Arial, sans-serif;
    background: #fff;
}
:is(#synthese-competences-ojt, .ojt-detail-competences) .Tabcompetence thead th {
    padding: 11px 12px;
    background: #7fb3d5;
    color: #153e56;
    border: 1px solid #b6d3e5;
    box-shadow: none;
    line-height: 1.5;
}
:is(#synthese-competences-ojt, .ojt-detail-competences) .Tabcompetence tbody td {
    padding: 10px 12px;
    border: 1px solid #dce9f0;
    vertical-align: middle;
    line-height: 1.5;
}
/* Les fonds restent sur les lignes : vertOJT, vertexOJT, rougeOJT et orangeOJT
   gardent ainsi la priorité sur chaque cellule, y compris après un clic. */
:is(#synthese-competences-ojt, .ojt-detail-competences) .Tabcompetence tbody tr:nth-child(even) { background: #f0f7fb; }
:is(#synthese-competences-ojt, .ojt-detail-competences) .Tabcompetence .cell-verte-label { font-weight: 600; color: #193d5b; }
:is(#synthese-competences-ojt, .ojt-detail-competences) .Tabcompetence tr.border-top-groupe td { border-top: 3px solid #5499c7 !important; }
:is(#synthese-competences-ojt, .ojt-detail-competences) .Tabcompetence td[onclick] { cursor: pointer; }

/* Détail OJT : identification, checklist et validation de l’inspection.
   Aucun fond de cellule de saisie n’est remplacé : les états métier restent prioritaires. */
.ojt-inspection-panel { margin-top: 16px; margin-bottom: 16px; }
.ojt-inspection-panel > table {
    box-sizing: border-box;
    margin-top: 12px;
    margin-bottom: 8px;
    border: 1px solid #b6d3e5 !important;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 8px;
    overflow: hidden;
    font: 12px Helvetica, Arial, sans-serif !important;
}
.ojt-inspection-panel > table tr { border: 0 !important; }
.ojt-inspection-panel > table th {
    padding: 10px 12px;
    border: 0 !important;
    border-bottom: 2px solid #5499c7 !important;
    background: #7fb3d5;
    color: #153e56;
    font-weight: 600;
    line-height: 1.5;
    text-align: left;
}
.ojt-inspection-panel > table td {
    padding: 9px 10px;
    border: 0 !important;
    border-right: 1px solid #dce9f0 !important;
    border-bottom: 1px solid #dce9f0 !important;
    vertical-align: middle;
    line-height: 1.5;
}
.ojt-inspection-panel > table td.tdsaisie,
.ojt-inspection-panel > table td.tdsaisieval { cursor: pointer; }
.ojt-identification > table,
.ojt-validation-inspection > table { width: calc(80% + 16px); max-width: 100%; }
.ojt-identification > table td,
.ojt-validation-inspection > table td { overflow-wrap: anywhere; }
.ojt-validation-inspection > table td { float: none !important; }
.ojt-validation-inspection > table td:not([id]) { font-weight: 600; color: #193d5b; }
.ojt-checklist-inspection { overflow-x: auto; }
.ojt-checklist-inspection > table {
    float: none !important;
    display: inline-table;
    vertical-align: top;
    margin-right: 12px;
}
.ojt-checklist-inspection > table td[id^="c"] { min-width: 100px; max-width: 250px; overflow-wrap: anywhere; }
.ojt-checklist-inspection > table td[id^="O"],
.ojt-checklist-inspection > table td[id^="U"] { min-width: 28px; text-align: center; }
.ojt-inspection-panel > summary:focus-visible { outline: 3px solid #2471a3; outline-offset: 2px; }
@media (max-width: 760px) {
    .ojt-inspection-panel { width: calc(100% - 20px); }
    .ojt-identification > table,
    .ojt-validation-inspection > table { width: 100%; }
    .ojt-inspection-panel > table td { padding: 8px 6px; }
}

/* Résumé de synthèse maintenu sous le bandeau du menu. */
#Tab0::after { content: ""; display: block; clear: both; }
.synthese-resume-fixe {
    float: right;
    width: 440px;
    max-width: 100%;
    position: sticky;
    top: calc(var(--ojt-header-height, 90px) + 12px);
    max-height: calc(100dvh - var(--ojt-header-height, 90px) - 24px);
    overflow-y: auto;
    z-index: 20;
    background: #fff;
    border-radius: 10px;
}
.synthese-resume-fixe:focus-visible { outline: 2px solid #2471a3; outline-offset: 2px; }
@media (max-width: 760px) {
    .synthese-resume-fixe { position: static; max-height: none; }
}
@media print {
    .synthese-resume-fixe { position: static; max-height: none; overflow: visible; }
}

/* Libellés et valeurs distincts, sans modifier le texte des cellules de saisie. */
:is(.ojt-identification, .ojt-validation-inspection) td.inspection-champ {
    background-color: #dcf0e4;
    text-align: left;
}
:is(.ojt-identification, .ojt-validation-inspection) .inspection-libelle {
    display: block;
    color: #476175;
    font-size: 11px;
    font-weight: 400;
    margin-bottom: 4px;
    pointer-events: none;
}
:is(.ojt-identification, .ojt-validation-inspection) .inspection-valeur {
    display: block;
    min-height: 1.5em;
    font-weight: 600;
    white-space: pre-line;
    pointer-events: none;
}
:is(.ojt-identification, .ojt-validation-inspection) td.inspection-champ-vide {
    background-color: #fff7e8;
}
:is(.ojt-identification, .ojt-validation-inspection) .inspection-champ-vide .inspection-valeur::before {
    content: "À renseigner";
    color: #80643e;
    font-style: italic;
    font-weight: 400;
}
:is(.ojt-identification, .ojt-validation-inspection) td.inspection-champ:hover {
    outline: 1px solid #5499c7;
    outline-offset: -2px;
}

/* Informations de la fiche visibles à droite pendant la consultation. */
.ojt-disposition {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 430px;
    gap: 18px;
    align-items: start;
}
.ojt-panneau-fixe {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: calc(var(--ojt-header-height, 90px) + 12px);
    max-height: calc(100dvh - var(--ojt-header-height, 90px) - 24px);
    overflow-y: auto;
    padding: 10px;
    border: 2px solid #38a2ea;
    border-radius: 12px;
    background: white;
    box-sizing: border-box;
}
.ojt-contenu-principal { grid-column: 1; grid-row: 1; min-width: 0; overflow-x: auto; }
.ojt-panneau-fixe table { width: 100%; border-spacing: 4px 6px; }
.ojt-panneau-fixe .ojt-ligne-informations tr:not(:first-child) td { width: 100%; }
.ojt-panneau-fixe .ojt-choix-formateur { box-sizing: border-box; }
.ojt-panneau-fixe .ojt-legende-formateur { display: block; margin-top: 6px; }
.ojt-panneau-fixe .ojt-ligne-signatures td { padding: 8px; border-radius: 6px; }
.ojt-panneau-fixe .ojt-ligne-signatures td[id] { min-width: 110px; background: #fff7e8; }
@media (max-width: 1000px) {
    .ojt-disposition { grid-template-columns: minmax(0, 1fr); }
    .ojt-panneau-fixe { grid-column: 1; grid-row: 1; top: 70px; max-height: 45vh; z-index: 5; }
    .ojt-contenu-principal { grid-column: 1; grid-row: 2; }
}
@media print {
    .ojt-disposition { display: block; }
    .ojt-panneau-fixe { position: static; max-height: none; overflow: visible; }
    .ojt-contenu-principal { overflow: visible; }
}
.ojt-memos { margin-top: 12px; border-top: 2px solid #38a2ea; }
.ojt-memos h3 { margin: 10px 0; }
.ojt-memo-zone { padding: 10px 0; border-top: 1px solid #d5e4ed; }
.ojt-memo-zone h4 { margin: 0 0 8px; font-size: 14px; }
.ojt-memo-zone p { overflow-wrap: anywhere; }
.ojt-memo-form label { display: block; font-size: 13px; }
.ojt-memo-form textarea { display: block; width: 100%; box-sizing: border-box; margin: 6px 0; resize: vertical; font: inherit; }
.ojt-memo-compteur, .ojt-memo-statut { font-size: 12px; }
/* Boîte dédiée au circuit de validation OJT. */
.ojt-validation-modal { position:fixed; z-index:10050; inset:0; display:flex; align-items:center; justify-content:center; padding:12px; background:#0006; }
.ojt-validation-dialog { width:760px; max-width:calc(100vw - 24px); max-height:calc(100vh - 24px); overflow:auto; background:#fff; border-radius:8px; box-shadow:0 8px 26px #0006; }
.ojt-validation-title { display:flex; justify-content:space-between; align-items:center; padding:16px 24px; background:#007bff; color:#fff; font-size:17px; }
.ojt-validation-close { border:0; background:transparent; color:#f7b733; font-size:23px; cursor:pointer; }
.ojt-validation-content { padding:22px 44px; font-size:16px; }
.ojt-validation-content ul { padding-left:22px; }
.ojt-validation-content label { display:block; margin:16px 0 6px; }
.ojt-validation-history { margin:10px 0; padding:8px; border-left:4px solid #4a7ebb; background:#edf5fa; white-space:normal; }
.ojt-validation-content input { width:110px; box-sizing:border-box; padding:7px; text-transform:uppercase; border:2px solid #007bff; border-radius:3px; }
.ojt-validation-content textarea { display:block; width:100%; min-height:140px; box-sizing:border-box; padding:9px; font:15px Arial,sans-serif; resize:vertical; border:2px solid #007bff; border-radius:3px; }
.ojt-validation-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:10px 16px; }
.ojt-validation-actions label { margin-right:-4px; }
.ojt-validation-actions input { width:74px; box-sizing:border-box; padding:7px; text-transform:uppercase; border:2px solid #007bff; border-radius:3px; }