/*
    D cument   : cm
    Created on : 3 avr. 2014, 04:17:46
    Description:
        Purpose of the stylesheet follows.
*/

root {
    display: block;
}

:root {
    --cm_main-accent-color: #0d6efd;
    --cm_main-bg-color: #f8f9fa;
    --cm_navbar-color: #003d4c;
    --cm-table-hover-bg: #e0f7fa; 
    --cm-table-hover-txt: #111; 
    --cm-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

a img:hover,
button img:hover {
    transform: scale(1.2);
    transition: transform 0.2s ease-in-out;
}


.erzo tr td{
	padding: 6px;
	text-align: left;
	vertical-align: top;
	border-bottom:1px solid #ddd;
}

table.ezloline tr {
    line-height: 16px;
}
table.ezloline {
    max-width:50%;
}


table.ezloline tr td{
	padding: 3px;
	text-align: left;
	vertical-align: top;
        border-bottom:0px solid red;
}

table.ezTh tr th{
	padding: 2px;
	text-align: left;
	vertical-align: middle;
        border-bottom:0px solid red;
}
table.ezTh tr {
    line-height: 14px!important;
    vertical-align:middle;
  
}

table.ezTh tr.a {
    line-height: 14px !important;
}

table.ezTh tr th a{
    padding: 16px 2px 0px 2px;
}

table.ezTh .submit{
    /*padding: 15px 2px 2px 2px;*/
}


table.ezloline tr th{
	padding: 2px;
	text-align: left;
	vertical-align: middle;
        border-bottom:0px solid red;
}

.form-inline.cml  fieldset {
     min-width: 100px;
     display: inline-block;
 }

 .form-inline.cml fieldset input{
     float: right;
	 min-width: 100px;
	 margin-bottom: 5px !important;
 }

 .form-inline.cml fieldset select{
     float: right;
     min-width: 100px;
 }

 .form-inline.cml.input{
	marging-bottom:2px !important;
	height:16px !important;
 }

 .form-inline.cml label{
	font-weight: bold;
 }

.form-inline.cm2  fieldset {
     min-width: 100px;
     display: inline-block;
 }

 .form-inline.cm2 fieldset input{
     float: none;
     min-width: 50px;
	 margin-bottom: 5px !important;
 }

 .form-inline.cm2 fieldset select{
     float: none;
     min-width: 50px;
     width: 200px;
 }
 
 .form-inline.cm2 fieldset td select shortSelect{
     float: none;
     min-width: 50px;
     width: 50px;
 }
 .form-inline.cm2  #ScriptPlayerArchitecture{
     float: none;
     min-width: 50px;
     width: 120px;
 }
 .form-inline.cm2 shortSelect{
     float: none;
     min-width: 50px;
     width: 50px;
 }
 
 
#ClientAddScriptPlayerForm select{
     float: none;
     min-width: 50px;
 }
 .form-inline.cm2.input{
	marging-bottom:2px !important;
	height:16px !important;
 }
 .form-inline.cm2 label{
	font-weight: bold;
 }
 .form-inline.cm2 select{
          
 }

 .actions_button a {
    padding: 4px 6px;
}


.logplayers td a {

    color: black !important;
}
.type_file_pub td a {
    color: #FF8000 !important;
}


.logplayers .submit {

	border: 0;
	clear: both;
	margin-top: 1px;
	padding: 26px 1px 2px 2px;
        max-width: 40px;
}

.tab_13px tbody{
	font-size: 10px;
    line-height: 10px;
}
.tab_13px thead{
	font-size: 10px;
    line-height: 10px;
}
.tab_13px  tr td{
    padding: 2px;
    vertical-align:middle
}

#SiteEditForm  textarea {
	clear: both;
	font-size: 15px;
	font-family: var(--cm-font-family);
 	width:380px;
}

#SiteEditForm   div.input.textarea label{
    padding: 20px 26px 0px 0px ;
}



.cm_icons{
    padding: 0 0 0 0px !important;
}

.cm_icons2{
   margin-left: 5px;
   padding: 0 0 0 15px ;
}
.cm_icons3{
   padding: 0 1px 0 3px;
   width: 20px;
   height: 20px;
}
.cm_icons4{
   padding: 0 1px 0 3px;
   width: 16px;
   height: 14px;
}
.cm_icons28{
   padding: 0 1px 0 10px;
   width: 30px;
   height: 30px;
}

.cm_icons28p5{
   padding: 0 2px 0 0px;
   width: 28px;
   height: 28px;
}

#playerModal .modal .fade.in {
  top: 10% !important;
}

#dnldpmModal .modal .fade.in {
  top: 10% !important;
}


#ClientAddPlayerForm div {
    clear: both;
    margin-bottom: 0.1em;
    padding: 0.1em;
    vertical-align: text-top;
}


#ClientAddPlayerForm div fieldset {
    padding-left: 10px !important;
    font-size:85%;
}

#ClientAddPlayerForm fieldset input, select {
    margin-left: 20px;
    padding-left: 20px !important;
    margin-bottom: 3px !important;
}


#ClientAddPlayerForm .modal-body {
  max-height: 560px;
}

#dnldpmModal .modal-body {
  max-height: 560px;
}

#ClientAddSiteForm .modal-body {
    max-height: 540px;
}

#ClientAddSiteForm fieldset {
  	border: none;
	margin-bottom: 1em;
	padding: 5px 10px 2px 20px !important;
}

#userModal.modal{
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1050;
    width: 370px;
    margin: -250px 0 0 -165px;
}

#userModal  select {
    width: 300px;
}

#clientModal.modal{
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1050;
    width: 405px;
    margin: -250px 0 0 -200px;
}
#siteModal.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1050;
  width: 420px;
  margin: -360px 0 0 -230px;
}

#playerModal.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1050;
  width: 470px;
  margin: -360px 0 0 -240px;
}

#moveSiteModal.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1050;
  width: 495px;
  margin: -200px 0 0 -240px;
}
#moveSiteModal select {
    width: 350px;
}

#moveLogPlayerModal select {
    width: 400px;
    margin-left: 20px;
}
#moveLogPlayerModal label{

}

#dnldpmModal.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1050;
  width: 495px;
  margin: -360px 0 0 -240px;
}

#streamModal.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1050;
  width: 445px;
  margin: -360px 0 0 -280px;
}


/* ───────────── 1) Positionnement de la modale ───────────── */

#importpubModal.modal {
  position: fixed;
  max-width: 740px !important; 
  width: 90% !important; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#importpubModal .modal-dialog {
  max-width: 900px !important; 
  width: 95% !important;
}

#importpubModal input, textarea,
#import_sites_csv input, textarea{
  font-size: 100%;
  font-family:var(--cm-font-family);
}


#scriptModal.modal {
  z-index: 1050;
  position: fixed;
  top: 50%;
  left: 50%;
  max-width: 880px !important; 
  width: 90% !important; 
  max-height: 100vh;
  overflow: hidden;
  transform: translate(-50%, -50%);
  font-size: 14px; /* Taille de la police */
  font-family: var(--cm-font-family);
}
#scriptModal .modal-body{
     max-height: 440px;   
}
#scriptModal .modal-dialog {
  max-width: 1000px !important; 
  width: 95% !important;
}

/* ───────────── 2) Corps de la modale ───────────── */
.modal-body.scriptModal {
  padding: 0 0 0 1px;
  max-height: calc(90vh - 30px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 1rem;
  padding-left: 1rem;
}




#ScriptPlayerScript {
    width: 790px !important;
    max-width:800px !important;
    height:130px !important;
    margin: 0 0 2px 4px;
}

/*
Debut ClientAddUserForm
*/

#ClientAddUserForm div, #ClientAddUserSiteForm div, #ClientAddSiteForm div ,#moveSiteForm div{
    clear: both;
    margin-bottom: 0.1em;
    padding: 0.1em;
    vertical-align: text-top;
}
#ClientAddUserForm div fieldset, #ClientAddUserSiteFarm div fieldset,#moveSiteForm div fieldset{
    padding-left: 10px !important;
    font-size:85%;
}
#ClientAddUserFarm div input,#ClientAddUserSiteForm div input,#moveSiteFarm div select, select {
    margin-left: 20px;
    padding-left: 20px !important;
    margin-bottom: 3px !important;
}

#ClientAddUserForm fieldset label,
#ClientAddUserSiteForm fieldset label,
#moveSiteForm fieldset label, 
#userModal fieldset label,
#playerModal fieldset label {
    margin-right: 10px !important;
}

/* form#LogreportIndexForm select{ */
.logreports select{
    background-color: #f0f0f0 !important;
    color: #111 !important;
    padding-left: 2px !important;   
    width: 220px;
}
.logreports select#LogreportPlayer {
    width: 420px;
}
.logreports select#LogreportPeriod {
    width: 200px;
}

/*
#ClientAddUserFarm, #ClientAddUserSiteFarm, #moveSiteFarm  {
    padding: 0 0 0 20px !important;
}
*/
#ClientAddUserForm .modal-body, #ClientAddUserSiteForm .modal-body {
  max-height: 560px;
}


#OLDsetVolumeModal.modal{
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1050;
    width: 799px;     
    max-height: 420px;
    /* margin: -300px 0 0 -402px; */
}

#setVolumeModal.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1050;
    width: 90%; /* utilisation d'un pourcentage pour la réactivité */
    max-width: 800px;
    max-height: 90vh;
    transform: translate(-50%, -50%);
}

#tvolume tbody tr{
    font-size: 10px !important;
    line-height: 12px !important;
}
#setVolumeModal form div{
    margin-bottom: 0px ;
}
.cm_ftp_updates_player form div{
  margin-bottom: 0px ;
  padding-top: 0px;
}

#UserModal.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1050;
  width: 570px;
  margin: -360px 0 0 -280px;
}

/*
FIN
*/


table.inplayer tr {
    line-height: 14px!important;
    vertical-align:middle;
}

table.inplayer tr th{
	padding: 1px;
	text-align: left;
	vertical-align: middle;
        border-bottom:0px solid red;
}
table.inplayer tr.a {
    line-height: 13px !important;
}

table.inplayer tr th a{
    padding: 16px 2px 0px 2px;
}

table.inplayer .submit{
    padding: 15px 2px 2px 2px;
}

/*
table.inplayer input {
    float: right;
    margin-bottom: 3px !important;
    min-width: 100px  !important;
}
*/


input.text.ip {
    width: 170px;
}
input.text.date {
    width: 120px;
}
input.text.date.short {
    width: 100px;
}
input.text.hour {
    width: 40px;
}
input.text.number {
    width: 15px;
}


#SiteNote {
    width: 350px !important;
    margin: 0 0 6px 10px;
}

#InterventionNote {
    width: 350px !important;
    height:70px !important;
    margin: 0 0 2px 10px;
}

#DocSiteNote {
    width: 350px !important;
    height:70px !important;
    margin: 0 0 2px 10px;
}

/*
#ClientAddInterventionForm fieldset div {
	clear: left;
	margin: 0 20px;
}

#ClientAddInterventionForm  div {
	clear: both;
	margin-bottom: .5em;
	padding: .5em;
	vertical-align: text-top;
}
*/

div.bhorizontal{
    width: 260px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

div.bhorizontal label{
    margin: 0 0 0 22px;
}

div.bhorizontal table{
    width:  260px;

}
div.bhorizontal table {
 margin: 10 10px !important;
 padding: 10 10px;
}

div.bhorizontal td {
  text-align: center;
  vertical-align: middle;
}
/*
#ac6, #searchSites  {
    margin-top: 3px;
}
#ac6a #ac6 {
    margin-top: 9px;
}
    */

#select_state{
    margin-bottom: -10px;
}
#select_cnx_type,#select_cp_type {
    margin-top: -15px;
}


#tPlayers select{
    margin-bottom: 6px !important;
}

.input acInput{
    margin-top: 3px;
}


tr.head_sites{
    margin-top: 3px;
    text-align: center;
}

td.deleted_shown,
a.deleted_shown{
    font-style: oblique ;
    color:blueviolet !important;
}
td span.deleted_shown,
a span.deleted_shown{
    font-style: oblique ;
    color:blueviolet !important;
}


td.error_import{
    background:red;
    color:yellow; 
    font-weight: bold;
}

td.deleted_hidden,
a.deleted_hidden{
    text-decoration-line: line-through ;
}
td span.deleted_hidden,
a span.deleted_hidden{
    text-decoration-line: line-through ;
}


#SiteViewForm table tr.head_sites th{
    padding-top: 5px;
}


tr.head_sites label{
    margin-right: 20px;
    margin-bottom: 5px;
}

#SiteViewForm {
    padding-top:  2px;
}



.ezinline li:first-child {
    margin: 0;
}


.clientname{
    color: #371C1C;
    font-weight: normal;
}
.ezinline ul {
    list-style-type: none;
/* background-image: url(navi_bg.png);*/
    height: 30px;
    margin: 15px 0 0 0;
    padding-right: 10px;
    display: block;
    line-height: 70px;
    text-decoration: none;
    text-align: left;

color: #371C1C;
}

.ezinline li {
    float: left;
    width: 120px;
}


.conteneur-onglets
{
    margin: 0;
    padding:0 0 0 5px;
}
.onglet
{
display:inline-block;
margin:5px 2px 0 2px;
padding:5px 10px ;
border:1px solid #AAA;
border-bottom:none;
border-radius:5px 5px 0 0;
-webkit-border-radius:4px 4px 0 0;
-moz-border-radius:4px 4px 0 0;
color:#555;
cursor: pointer;
font-weight:bold;
}
.inactif
{
background:#EEE;
}
.inactif:hover
{
background:#AAA;
}
.affiche-contenu-1
{
background:white;
border-bottom:2px solid white;
padding-bottom:4px;
cursor:text;
}
.contenu
{
background-color:white;
margin-top:-1px;
padding:5px;
display:none;
border:1px solid #AAA;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
color:#555;
cursor: text;
}


/* BootStrap Modifié */

.infosclient .popover {
    font-size: 12px;
    width: 370px;
}

table.tabinfo{
    margin-top: 0px;
    padding-top:  0px;
    font-weight: normal;
}

table.tabinfo tr td:first-child {
    width: 100px;
    font-weight: bold;
}

.infosclient li{
    line-height: 16px;
}

.infosclient .popover-content p {
  padding: 0px;
  margin: 0px;
}

.infosclient .popover-content  {
  padding: 0px;
}


.signin input:focus:required:invalid, .signin textarea:focus:required:invalid, .signin select:focus:required:invalid {
    border-color: #EE5F5B;
    color: white !important;
}

#PlayerSearchSite   {
    margin-bottom: 9px !important;
    height: 19px !important;
}


#table_fix tbody {
 width: 700px;
 height: 600px;
 overflow-x:  hidden;
 overflow-y:  auto;
}

#sur_table_pub{
 height: 240px;
 overflow-x:  hidden;
 overflow-y:  auto;
}
.cm_partial_table{
    height: 240px;
    max-height: 250px;
    overflow-x: hidden;
    overflow-y: auto;
    
}


#table_pubs tr td {
    padding: 2px !important;
    vertical-align:middle !important;
    /* font-size: 11px !important;
    line-height: 15px;
    */
}

#table_players tr td a{
    color :black;
}
#table_pubs tr td a{
    color :black;
}
#table_sites tr td a{
    color :black;
}

#bloc-pubs{
    display:block;
}

#content-pub-players {
    background-color: #F4F4F4;
    display:inline-block;
    width : 480px;
   
    float:left;
    overflow-x:  hidden;
    overflow-y:  auto;
}
#head-pub-players{
    background-color: #D5D5D5;

    height: 20px;
    width: 100%;
    color:black;

}
.selected-pub{
    font-weight: bold !important;
    color:black;
}
#content-players, #content-player-pubs{
    background-color: #F4F4F4;
    display:inline-block;
    width : 320px;

    float:left;
    overflow-x:  hidden;
    overflow-y:  auto;
}
.cm_client_prog_wrapper {
    display: flex;
    gap: 12px;
    margin-top: 1px;
}
  
  .cm_client_prog {
    flex: 1;
  }

/*** EZ */

.cak dl {
	line-height: 2em !important;
	margin: 0em 0em !important;
	width: 60% !important;
}
.cak dl dd:nth-child(4n+2),
.cak dl dt:nth-child(4n+1) {
	background: #f4f4f4 !important;
}

dt {
	font-weight: bold ;
	padding-left: 4px ;
	vertical-align: top ;
	width: 10em ;
}
dd {
	margin-left: 10em ;
	margin-top: -2em ;
	vertical-align: top;
}
/*** FIN EZ */
table.tab_13px  tr:hover td{
    background-color: var(--cm-table-hover-bg); /* #A9BCF5; */
    color:var(--cm-table-hover-txt);
}

table.tab_13px tr td a:hover{
    background-color:var(--cm-table-hover-bg); /* #A9BCF5; */
    color:var(--cm-table-hover-txt);
}
tr.type_file_pub td{
    color:#FF8000 !important;
}
.type_file_stream{
    color:#31B404;
}

.log_titre{
  color:red !important;
}

.log_anomalie {
  color:#FF7400 !important;
}

.log_normal{
  color:black !important;
}
.log_error{
  color:red !important;
  font-weight: bold !important;
}

.cm1_hover_img a {  display:block;  height: 7px; }
.cm1_hover_img a:hover { display:block; }

#contenu_4 form div {
    margin-bottom: 2px !important;
    padding: .2em !important;
}

.pub_date_over td{
    font-style:italic !important;
    color: #888 !important;
}

#align-H{
    height: 20px;
     float: left;
     margin-right: 15px;
}


/* streamModal */
.checkbox-inline {
    display: inline-block;
    width: 45px;
    height: 30px;
	font-size: 80%;
}
#dayofweek_g  {
  margin-left: 13px;
  margin-top: -2px;
}
#dayofweek_g .checkbox-inline {
    font-size: 12px;
}

tr.dayofweek {
   padding: 10 10px !important;
}
tr.dayofweek th {
   padding: 10 10px !important;
}
.dayofweek th {
   padding: 10 10px !important;
}
#dayofweek_g tr{
   padding: 10 10px !important;
}


#dayofweek_g  label {
  display: block;
  padding-left: 15px;
  text-indent: -15px;
}

#dayofweek_g  input {
  width: 13px;
  height: 13px;
  padding: 0;
  margin:0;
  vertical-align: bottom;
  position: relative;
  top: -1px;
  *overflow: hidden;
}



  #menu-pubs {
    padding-left: 10px;
    padding-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 20px; /* espace entre l’icône et la checkbox */
  }
  
  #menu-pubs > div {
    display: flex;
    align-items: center;
  }
  
  #menu-pubs input[type="checkbox"] {
    margin-right: 6px;
    vertical-align: middle;
    margin: 7px 0px 5px 1px;
  }
  
  #menu-pubs label {
    display: flex;
    align-items: center;
    margin: 0;
    font-weight: normal;
    line-height: 1;
  }

.import_csv_pub_player {
    padding-left: 20px;
    max-height: 620px;
}

#cm-horizontal {
    display: table;
    clear: both;
 
}
#cm-horizontal div{
  
    float:left;
    height:20px; 
    padding:5px 10px;
    margin-right: 15px;
    
}


.inline-block-child {
  display: inline-block;
  float:left;
}


#tPlayers select {
  width: 180px;
  background-color: #ffffff;
  border: 1px solid #cccccc;
}

.player_deleted{
    color:red !important;
    font-weight: bold;
}
.player_disabled{
    color:#FF7400 !important;
    font-weight: bold;
}   

.tab_13px tbody tr:nth-child(odd) {
    background-color: #f8f9fa !important; 
}

.tab_13px tbody td {
    padding: 2px !important; 
}
.tab_13px {
    font-size: 14px !important;
}





/* CM_CSS Content */
.cm_content {
    width: 95% !important;
    max-width: none !important;  /* Désactive la max-width de Bootstrap */
   /* margin: 0 auto !important;    Centre horizontalement le bloc */
  }
/* */  

.ui-autocomplete {
  z-index: 1002 !important;
}

.cm_table thead th {
    background-color: #e3e7e7 !important; /* #e3e6e9 */
    color: #212529 !important;
    font-weight: bold;
    font-size: 12px; 
    position: sticky;
    top: 0;
    z-index: 1000;
    font-family: var(--cm-font-family);
}
/* Applique les couleurs alternées de Bootstrap */
table.cm_table.table-striped tbody tr:nth-of-type(odd) > td {
    background-color: #fff !important; /*#fFfFfe !important;  /* #e0f7fa!important; */
}


.cm_table {
    font-size: 12px; 
    font-family: var(--cm-font-family);
}

.cm_table th, 
.cm_table td {
    padding: 1px; /* Ajoute un padding de 2px pour chaque cellule */
}

.cm_table.table-hover tbody tr {
    transition: background-color 0.2s ease-in-out !important;

}
/* Lien Table */
.table.cm_table a {
    text-decoration: none !important; 
    color: #000 !important;          
    font-weight: bold !important;   
}  
#table_players a {
    text-decoration: none !important;    
}  

/* Évite les conflits avec Bootstrap en forçant les variables de couleur */
.cm_table tbody tr {
    --bs-table-accent-bg: transparent !important;
    --bs-table-hover-bg: #e0f7fa     !important;
}

.cm_table.cm_info.cm_player_info tbody tr td{
  padding: 3px !important;  
  font-size: 12px;
}

.table.cm_table tbody td {
    color: #111;
}

.table.cm_table td .cm_icons + .cm_icons {
    margin-left: 10px; /* Espace de 10px entre deux icônes successives */
}


.cm_content h3 {
    background-color: var(--cm_navbar-color) !important;
    color: white;
    padding: 0.4em 1em; /* Unités relatives au lieu de pixels */
    border-radius: 0.3em;
    font-size: 1.2rem;
    word-wrap: break-word; /* Pour éviter le débordement */
    max-width: 100%; /* Empêche de dépasser le conteneur */
    box-sizing: border-box; /* Inclut padding et border dans la taille totale */
}

/* Media query pour petits écrans */
@media (max-width: 600px) {
    .cm_content h3 {
        font-size: 1rem;
        padding: 0.8em 1.2em;
    }
}

th.orderable a {
    display: inline-flex;
    align-items: center;
    gap: 5px; /* Ajoute un petit espace entre le texte et la flèche */
    text-decoration: none;
    color: black;
    padding: 0px 4px;
}

th.orderable.asc a::after {
    content: " \25BC"; /* Flèche vers le bas " ▼";* */ 
    font-size: 13px;
}

th.orderable.desc a::after {
    content: " \25B2"; /* content: " ▲"; */    
    font-size: 13px;
}


/* CM_CSS: Menu Principal */
.cm_navbar {
    min-height: 0 !important;
    background-color: var(--cm_navbar-color) !important; /* Couleur principale */
  }
  .cm_navbar .navbar-nav .nav-link {
    color: #ccc; 
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
    line-height: 0.65 !important;   /* réduit l'espace vertical interne */
    font-size: 0.85rem !important; /* réduit la taille de police */
  }
  .cm_navbar .navbar-toggler {
    padding: 0.25rem 0.5rem !important;
  }  
  .cm_navbar .navbar-brand {
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
    font-size: 0.9rem !important;
    line-height: 1.2 !important;
  }
  .nav-link.active {
    color: #fff !important;
    /*background-color: #444 !important;*/
    border-radius: 4px;
    font-weight: bold;
  }
  body {
    background-color:  var(--cm_main-bg-color);/* ou #f2f2f2, un gris très clair */
    color: #212529;            /* texte gris/noir */
  }

/** Survol **/
/** lien de pagination */
.cm_navigation .pagination .nav-item .page-link:hover {
    background-color: #444 !important; /* Gris clair */
    color: #333;              /* Texte plus foncé */
  }

/* Menu principal */
  .cm_navbar .nav-link:hover {
    background-color: #444 !important;  /* fond plus foncé */
    color: #fff;            /* texte blanc */
    border-radius: 4px;     /* arrondi si vous voulez un effet bouton */
  }
/* Au survol, on assombrit un peu la couleur du bouton */
.form-inline-filter .btn.cm_icons:hover {
    background-color: #444 ;    /* Couleur légèrement plus foncée  #0b5ed7 */
  }
  
/**/

/*****/

/* Conteneur : fixe en hauteur (ex. 90vh) et scrollable */
/* 1) Le wrapper qui affiche les coins arrondis */
.cm_table_wrapper {
    /* Pour voir les coins arrondis, on active un fond, 
       une bordure et on masque le débordement */
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;        /* Coupe le contenu qui dépasse, y compris la scrollbar */
  
    /* Hauteur fixe si vous le souhaitez */
    height: 70vh;           /* ou 580px, selon votre besoin */
  
    /* Optionnel : vous pouvez donner une largeur max, etc. */
    /* width: 100%; */
    /* max-width: 1200px; */
  }
  
  /* 2) Le conteneur interne qui scrolle */
  .table-container {
    /* Le conteneur interne prend 100% de la place dans .table-wrapper */
    width: 100%;
    height: 100%;
  
    /* Active le scroll vertical/horizontal */
    overflow-y: auto;
    overflow-x: auto;
    position: relative;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  /* 3) La table */
  .table-container table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse; /* Si vous préférez le style “collapsé” */
    margin: 0;
    padding: 0;
  }
  
  /* 4) Les cellules */
  .table-container th,
  .table-container td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: none; /* 0px solid #ddd;*/
    padding: 2px;
    vertical-align: middle;
  }
  
  /* 5) Le header sticky */
  .table-container thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: lightgray;
  }
  
  /* 6) La pagination sticky (si vous l'avez en bas) */
  .table-container nav {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: #fff;
    padding: 5px;
    border-top: 1px solid #ccc;
  }
  
  /* 7) Pagination styles */
  .cm_navigation .page-link {
    font-size: 10px;
    padding: 4px 9px;
    font-weight: bold;
  }
.cm_navigation .page-link.active{
    background-color: #212529;
}

.cm_navigation .page-item.active .page-link {
    background-color: #ddd !important;  /* Gris clair */
    color: #333 !important;            /* Couleur du texte */
    border-color: #ddd !important;     /* Bordure assortie */
  }

  .cm_navigation .pagination .page-item {
    margin: 0 4px; 
  }
/***/
/* CMCSS_Filtre Type Fichier**/

.form-inline-filter {
    display: inline-flex;          /* Les éléments s'alignent en ligne */
    flex-flow: row nowrap;
    margin-bottom: 0.2rem;
    align-items: center;           /* Aligne verticalement au centre */
    gap: 9px;                      /* Espacement horizontal entre éléments */
    background-color: #f8f9fa;     /* Fond gris très clair (optionnel) */
    border-radius: 4px;           /* Bords légèrement arrondis */
    padding: 8px 10px;            /* Espace interne */
    font-size: 11px;  
}


  .form-inline-filter .btn.cm_icons:first-child {
    margin-right: 30px;  /* Espace aprés bouton */
  }

  .form-inline-filter label {
    margin: 0;
  }
  .form-inline-filter select {
    min-width: 120px;
    margin-left: 6px;
    padding-left: 6px !important;
  }
  .form-inline-filter .btn {
    font-size: 13px !important;
  }
  .form-inline-filter select option {
    font-size: 13px !important;
    font-weight: bold;
  }
  .form-inline-filter select {
    font-size: 13px !important;
    font-weight: bold;
  }
  .cm_drown {
    padding-left: 4px;
  }
  /* */

  /* Conteneur du formulaire en ligne */
  
  /* Le label */
  .form-inline-filter label {
    margin: 0;                    /* Supprime la marge par défaut */
    font-size: 13px;              /* Taille de police (adaptez si besoin) */
    color: #555;                  /* Couleur de texte gris moyen */
    font-weight: 500;             /* Légèrement plus épais que normal */
  }
  
  /* Le select */
  .form-inline-filter select {
    min-width: 120px;             /* Largeur minimale */
    font-size: 13px;              /* Taille de police (adaptez si besoin) */
    padding: 4px;                 /* Espace interne */
    border-radius: 4px;           /* Bords arrondis */
    border: 1px solid #ccc;       /* Bordure grise légère */
    color: #555;                  /* Couleur de texte */
    outline: none;                /* Supprime le contour bleu sur focus */
  }
  
  /* Le bouton avec icône */
  .form-inline-filter .btn.cm_icons {
    color: #fff;
    display: inline-flex;         /* Pour centrer l’icône horizontalement/verticalement */
    align-items: center;
    justify-content: center;
    padding: 4px 8px;             /* Taille plus compacte que le bouton Bootstrap par défaut */
    border-radius: 4px;           /* Bords arrondis */
    background-color:var(--cm_main-accent-color) !important;  /* Couleur Bootstrap primary (BS5) */
    border: none !important;              
    transition: background-color 0.2s ease-in-out;
  }
  
  
  /* L’icône dans le bouton */
  .form-inline-filter .btn.cm_icons img {
    width: 25x;
    height: 25px;
    vertical-align: middle;       /* Aligne l’icône au milieu du bouton */
  }

 
.cm_input {
    max-width: 320px;
    width: 100%;
    padding: 6px 15px;        /* Espace interne vertical/horizontal */
    border: 1px solid #ccc;  /* Bordure grise claire */
    border-radius: 4px;      /* Coins arrondis */
    font-size: 14px;         /* Taille de police */
    color: #333;             /* Couleur du texte */
    background-color: #fff;  /* Fond blanc */
    outline: none;           /* Supprime le contour bleu par défaut */
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  }
  
  /* 2) Effet “focus” pour un rendu plus moderne */
  .cm_input:focus {
    border-color: #66afe9;                 /* Couleur de bordure au focus */
    box-shadow: 0 0 4px rgba(102,175,233,0.6);
  }

/* EZ regoupe CSS */
.modal {
  font-family: var(--cm-font-family);
  font-size: 14px; 
}
.cm_modal-add {
    z-index: 2000 !important;
}

#importpubModal{
  z-index: 2000 !important;
}

#getUpdateHistoModal{
    z-index: 3000 !important;
}


.modal-title {
    font-weight: bold;
} 
.cm_label {
    font-weight: bold;
    color: #333;
    font-size: 13px;
    font-family: var(--cm-font-family);
}

/* Place le backdrop juste en dessous */
.modal-backdrop {
    z-index: 1040 !important;
}

.cm_modal-add .modal-dialog { 
    max-width: 490px !important; 
}

.cm_modal-add.nwPlayerModal .modal-dialog{
    max-width: 650px !important; 
}
.cm_modal-add.interventionModal .modal-dialog{
  max-width: 600px !important; 
}

 

.cm_modal-add .modal-footer .btn:last-child {
    margin-right: 20px !important;
}

.cm_modal-add .modal-body {
    padding: 0.75rem 1rem;
}
.cm_modal-add .form-control-sm {
    padding: 0.375rem 0.5rem;
    font-size: 0.9rem;
}
/* champs un peu plus compacts */
.cm_modal-add .form-control-sm {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

/* Espacement vertical entre lignes = 0.25rem (≈4px) */
.cm_modal-add  .modal-body .row.mb-1 {
    margin-bottom: 0.25rem !important;
    row-gap: 0.25rem !important;
}
/* Réduit l’espacement vertical de moitié (≈4px) */
.cm_modal-add.modal .modal-body .row {
    margin-bottom: 0.25rem !important;
}

/* ===== Réduit l’espacement vertical de moitié ===== */
.cm_modal-add.modal.show .modal-body .row {
    margin-bottom: 0.25rem !important;
}

/* ============= ESPACEMENT IDEAL ENTRE LIGNES ============= */
.cm_modal-add  .modal-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem !important; /* ≃4px vertical */
}
.cm_modal-add .modal-body .row {
    margin-bottom: 0 !important; /* supprime toute marge conflictuelle */
}
  
/* Enlève tout padding vertical sur les colonnes */
.cm_modal-add  .modal-body .row.align-items-center > [class^="col-"] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.modal-backdrop.show {
    background-color: rgba(0, 0, 0, 0.80) !important;
    opacity: 1 !important;
}


.notyf__toast {
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    padding: 16px 20px;
    font-family: 'Segoe UI', sans-serif;
    font-size: 16px;
    backdrop-filter: blur(10px);
    color: #fff;
  }
  
  .notyf__toast--success {
    background: linear-gradient(135deg, #28a745, #218838);
  }
  
  .notyf__toast--error {
    background: linear-gradient(135deg, #dc3545, #c82333);
  }
  
  .notyf__ripple {
    display: none !important;  /* supprime l'effet de vague */
  }

/* Edit */
/* ========== FORMULAIRE EDIT_CLIENT ========== */

.cm_modal_edit .cm_row,
.cm_modal_edit .row {
    margin-bottom: 8px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.cm_modal_edit .cm_row > [class^="col-"] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Apparence harmonisée des champs */
form.cm_modal_edit .cm_row select,
form.cm_modal_edit .cm_row input[type="text"],
form.cm_modal_edit .cm_row input[type="password"] {
    padding: 4px 8px !important;
    max-width: 270px !important;
    font-size: 14px;
    width: 100%;
    margin-left: 0px !important;
}
/* Style des labels */
.cm_modal_edit label {
    margin-bottom: 0;
}


.cm_form_edit {
    max-width: 600px;
    margin-left: 20px;
}

/* Réduction de l’espacement vertical entre les lignes */
.cm_form_edit .cm_row {
    margin-bottom: 8px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Nettoyage des paddings/margins internes des colonnes Bootstrap */
.cm_form_edit .cm_row > [class^="col-"] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Apparence harmonisée des champs */
form.cm_form_edit .cm_row select,
form.cm_form_edit .cm_row input[type="text"] {
    padding: 4px 8px !important;
    max-width: 330px !important;
    font-size: 14px;
    width: 100%;
    margin-left: 0px !important;
}


/* Style des labels */
.cm_form_edit label {
      margin-bottom: 0;
}

/* Vue Players */

/* ================================
   .cm_players: style du formulaire
   ================================ */

/* (A) Conteneur principal  */
.cm_players {
  margin-bottom: 0px; /* 1rem;*/
}

/* (B) La rangée de filtres */
.cm_players .cm_filters_row {
  display: flex;
  flex-wrap: wrap;
  column-gap: 10px; 
  row-gap: 16px;       /* Pas d’espace vertical */
}

/* (C) Chaque colonne (filtre) */
.cm_filter_group {
  display: flex;
  flex-direction: column; 
}

/* (D) Label */
.cm_filter_label {
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 4px;
  text-align: left;
}

/* (E) Sélecteurs et inputs */
.cm_filter_select,
.cm_filter_input {
  width: auto;
  max-width: 220px; 
  height: 2rem;
  font-size: 0.85rem;
  padding: 0.25rem 0.5rem;
  margin: 0;
  line-height: 1.2;
  box-sizing: border-box;
  border: 1px solid #cccccc;
  border-radius: 4px;
  background-color: #f0f0f0 !important;
}


.cm_filter_buttons {
  gap: 8px; 
  margin: 0 !important;
  padding: 0 !important;
}

/* (G) Boutons */
.cm_filter_buttons .btn.cm_icons {
  width: 2.2rem;  
  height: 2rem;  
  padding: 0 !important;
  margin: 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #eee; 
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cm_filter_buttons .btn.cm_icons img {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

.cm_players .row {
    column-gap: 10px !important;
}

.cm_date input[type="date"].form-control {
    width: 180px !important;
}

select#LogreportPlayer.cm_filter_select {
    width: 420px !important;
    max-width: none;
    border: 1px solid #cccccc;
}
select#LogreportPeriod.cm_filter_select {
    width: 210px !important;
    max-width: none;
}
select#LogreportType.cm_filter_select {
    width: 230px !important;
    max-width: none;
}

/* Boutons icones */
.cm_icon-toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-right: 6px;
    background: transparent;
    border: none;
    gap: 8px;
}

.cm_icon-toolbar img {
    width: 28px;
    height: 28px;
}

.cm_icon-toolbar:last-child {
    margin-right: 0;
}
/* Icone plus petites Icônes dans les lignes de tableaux */ 
.cm_icon-inline {
    padding: 0 4px;
    background: transparent;
    border: none;
    display: inline-flex;
    align-items: center;
}

.cm_icon-inline img {
    width: 16px;
    height: 16px;
}
/* . Icônes dans d'autres menus contextuels / modaux */

.cm_icon-context {
    background: none;
    border: none;
    padding: 0;
    margin: 0 4px;
    display: inline-block;
}

.cm_icon-context img {
    width: 18px;
    height: 18px;
}

/* */
/* Réduction de l’icône warning */
.swal2-popup .swal2-icon {
    width: 3rem !important;
    height: 3rem !important;
  }
  .swal2-title {
    font-size: 1.1rem !important;
  }
  
  .swal2-html-container {
    font-size: 0.9rem !important;
  }
  
  /* Ajout d’espace entre les boutons */
  .swal2-popup .swal2-actions .btn {
    margin: 0 5px;
  }
  
  .modal-propre {
    padding: 2.2em;
    border-radius: 10px;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
    font-family: var(--cm-font-family);
    font-size: 0.95rem;
    color: #333;
  }
  
  /* Bouton style classique application */
  .btn-propre {
    padding: 0.6em 1.3em;
    font-size: 0.9rem;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  
  .btn-danger {
    background-color: #e74c3c;
    color: #fff;
  }
  
  .btn-danger:hover {
    background-color: #c0392b;
  }
  
  .btn-light {
    background-color: #f5f5f5;
    color: #333;
  }
  
  .btn-light:hover {
    background-color: #e2e2e2;
  }

.modal-dialog-scrollable .modal-content {
    max-height: 90vh;
    overflow-y: auto;
}


.cm_days_wrapper {
    display: flex;
    justify-content: space-between;
    gap: 5px;
    margin-bottom: 5px;
}

.cm_days_wrapper .day-check {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 42px;
    font-size: 0.8rem;
}

.tabulation_players { 
display: inline-block; 
margin-left: 28px; 
} 

#hrefToggle{
    font-weight: bold;
}

.cm_table a:hover {
    text-decoration: underline !important;
}

/* Search Site*/
#siteSearchInput {
    max-width: 430px;
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 0.875rem;
}

#siteSearchResults {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;  
    background: #fff;
    border: 0px solid #ccc;
    border-radius: 4px;

    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    overflow-x: hidden; 
    padding: 0px 0;
    z-index: 9999;
    overflow: auto;
}
#siteSearchResults a,
#siteSearchResults a:focus {
    text-decoration: none;
}

/* Style pour chaque ligne de résultat */
#siteSearchResults li {
    padding: 0px 1px; 
    height: 18px;   
    line-height: 16px;  
    font-size: 12px;
    font-weight: normal;
    color: #000;
    list-style: none;
    border-bottom: 0px solid #eee;
    cursor: pointer;
}

#siteSearchResults li:hover {
    background-color: #f0f0f0;
}

/*  New Tab13px*/

.cm_info tbody{
	font-size: 13px;
    line-height: 12px;
}
.cm_info thead{
	font-size: 13px;
    line-height: 12px;
}
.cm_info tr td{
    padding: 5px;
    vertical-align:middle
}

table.cm_info  tr:hover td{
    background-color: var(--cm-table-hover-bg); /* #A9BCF5; */
    color: var(--cm-table-hover-txt);
}

table.cm_info tr td a:hover{
    background-color: var(--cm-table-hover-bg); /* #A9BCF5; */
    color: var(--cm-table-hover-txt);
}
table.cm_info a {
    text-decoration: none;
}

.cm_info tbody tr:nth-child(odd) {
    background-color: #f8f9fa !important; 
}

.cm_info tbody td {
}
.cm_info {
    /*font-size: 14px !important; */
}

/* Vue Site*/
.tab-site{ 
    padding-top: 10px; 
}

.cm_info td:first-child   {
  max-width: 230px;
  width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 15px;
}
.cm_info td:nth-child(2)   {
  max-width: 230px;
}

.cm_info td:nth-child(3)   {
  max-width: 250px;
  width: 190px;
  text-align: left;
}

/* --- Edit form -- */
.cm_form_edit .cm_edit_group {
  display: flex;
  align-items: center;
  margin-bottom: 2px;
  max-height: 34px;
}
  
  .cm_form_edit .cm_edit_label {
    min-width: 160px;
    text-align: left;
    margin-right: 15px;
    font-weight: 500;
    font-size: 13px;
    color: #111;
  }
  
  .cm_form_edit input[type="text"],
  .cm_form_edit input[type="email"],
  .cm_form_edit input[type="checkbox"],
  .cm_form_edit input[type="date"],
  .cm_form_edit select,
  .cm_form_edit textarea,
  .cm_form_edit .cm_edit_input {
    flex: 1;
    min-width: 150px;
    max-width: 300px;
    padding: 2px 10px;
    margin: 0;
    box-sizing: border-box;
    height: 28px ;
    font-size: 13px;
    margin-bottom: 0px;
  }

.cm_form_edit textarea {
    height: 100px !important ;  
}

.form-check-input[type="checkbox"] {
    width: 1em;
}
.cm_modal_edit select{
    margin-left: 0px !important;
}


  /* Feedback positionné correctement */
  .cm_form_edit .invalid-feedback {
    margin-left: 175px;
  }
  
  /* Formulaire Player */
.cm_edit_player {
    margin-bottom: 3px !important 
}

.cm_edit_player .row input.form-control-sm,
.cm_edit_player .row select.form-select-sm {
  padding: 2px 4px !important;
  font-size: 13px !important;
  height: 26px !important;
  line-height: 1.2;
  margin-bottom: -0.25rem !important;
}

.form-edit-player {
    max-width: 580px;
    margin-left: 0;
    padding: 0;
}

.form-edit-player .row {
    margin-bottom: 0px !important;
  }
  .form-edit-player .row.align-items-center > [class^="col-"] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
 

.form-edit-player .form-check .form-check-input {
    margin-left: -1.0em;
}

.cm-spinner-overlay {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
}


.cm-checkbox label {
    display: flex;
    align-items: center;
    gap: 0.4rem; /* espace entre la case et le texte */
    font-size: 0.95rem;
    line-height: 1;
  }
  
  .cm-checkbox input[type="checkbox"].tiny-check {
    width: 16px;
    height: 16px;
    accent-color: #0d6efd;
    border-radius: 3px;
    margin: 0;
  }

  /*
#content-pub-players, #content-players, #content-player-pubs
  */
  .cm_client_prog {
    border:1px solid #ccc;
    padding: 10px 10px 0px 10px; 
    margin: 14px 10px;
    border-radius: 8px;
    background-color: #fff;
    min-height: 180px;
    height: 380px;
    /* Ombre plus visible */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.2s ease-in-out;
  }
  
  #content-pubs-imported {
    max-height: 350px;
    overflow-y: auto;
  }
  .table-scroll {
    display: block;
    width: 100%;
  }

  /* Header Close */
  .modal-header {
    position: relative;
    padding-right: 3rem;
    padding: 10px;
  }

  .modal-header {
    background-color: #f5f5f5;
    position: relative;
    padding-right: 3rem;
  }
  
  .modal-header .btn-close {
    position: absolute;
    top: 1.15rem;
    right: 1rem;
    background-color: #f2f2f2;
    border-radius: 50%;
    padding: 0.4rem;
    transition: background-color 0.2s ease;
  }
  
  .modal-header .btn-close:hover {
    background-color: #ddd;
  }

 
  .btn-close-custom:hover {
    background-color: #e0e0e0;
    cursor: pointer;
  }


  .cm_client_prog:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  }

  /* Classe pour désactiver les interactions */
.cm-disabled {
    pointer-events: none !important;
    cursor: not-allowed !important;
    opacity: 0.6;
    filter: grayscale(20%);
    position: relative;
  }
  
  .cm-disabled::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.4);
    z-index: 9999;
    cursor: not-allowed;
  }

  .tab-ouf.loading { 
    pointer-events: none; opacity: 0.6; 
}


  .cm-tab-disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
  }
 
.tab-ouf.disabled {
    pointer-events: none;
    cursor: not-allowed !important;
    opacity: 0.6;
}

.modal-header {
    font-family: var(--cm-font-family);
}

#id_search_client {
  width: 420px;
  max-width: 500px;
  box-sizing: border-box; /* pour inclure padding/border dans les 300px */
}

#id_note{
  width: 100% !important; 
  max-width: 330px;
}

.cm_sub_title {
  font-size: 16px;
  padding-left: 10px;
}

.cm_sub_title_label {
  font-weight: bold;
  padding-right: 20px;
}

#client_name, #nwSearchSite ,#ac6 {
  width: 100%;
  max-width: 270px;
  min-width: 270px;
}

.cm_players select {
  padding-left: 10px !important;
}


.repport_note{
  font-weight: bold !important;
  color: #444;
  padding-left: 10px;
}
.logerrors {
  padding-top: 15px;
}
/* .cm_table thead th */ 
td.cm_actions, .cm_actions {
  text-align: center !important;
  vertical-align: middle !important;
}
.cm_actions img {
  vertical-align: middle !important;
}
th.th_centered {
  text-align: center;
  vertical-align: middle;
  font-weight: bold !important;
}

.alert-processing{
  font-weight: bold; 
}

.cm_disabled-link {
  pointer-events: none;
  opacity: 0.5; 
  cursor: default;
}

.cm_ftp_test_cnx pre{
  padding-top: 5px;
  padding: 2px;  
  margin-top: 10px; 
  padding: 2 0 0 0 px;
  margin-left: 2px;
  margin-bottom: 0px;
}

.cm_messi_title {
  background-color: #007188 !important;
  color: white;
}