/* used to reset the ootb styles on the title row tag in the Starter Collab master page; used for the fullscreen button in SP */
:root {
    /* Theme NS SOFT */ 
  --ns-gradient-1-color:#3D88F8;
  --ns-gradient-2-color:#61AFFC;
  --ns-header-color:#6ba6fc;
  --ns-menu-color:#ecf6ff;
  --ns-button-color:#6ba6fc;
  --ns-primary-color:#509bf9;
  --ns-inactive-color:#e6f2fa;
  --ns-secondary-color:darkblue;
  --ns-accent-color:#ed1e79;
  --ns-text-color:white;
  --ns-text-secondary-color: var(--ns-secondary-color);
  --ns-faq-button-question-color: #3d88f8;
  --ns-faq-button-color : #666666;
  --ns-linear-gradient-to-right:  linear-gradient(to right, var(--ns-gradient-2-color), var(--ns-gradient-1-color));
}

.ns-danger-zone{
color: #FF0000;          /* Rouge */
    text-align: center;      /* Centré horizontalement */
    font-family: "Segoe UI", "Segoe", Tahoma, Helvetica, Arial, sans-serif; /* Police SP2013 */
    margin: 20px 0;          /* Espace au-dessus et en-dessous */
    font-weight: bold;
}
/* RoomHelp */
.ns-links{
    display:flex;
    flex-direction:row-reverse;
    column-gap:25px;
    font-size:14px;
}

.ns-hr{
    height: 4px;
    background-color:var(--ns-primary-color);
    border: none;
}

    .ns-image-placeholder {
      max-width: 100%;
      height: auto;
      border: 1px solid #ccc;
      border-radius: 3px;
    }

	
	/* Styles pour l'accordéon */
    .ns-accordion {
      background-color:var(--ns-menu-color);
      border: 1px solid var(--ns-primary-color);
      border-radius: inherit;
      margin: 20px auto;
      max-width: 800px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .ns-accordion-header {
      background: var(--ns-menu-color);
      color: var(--ns-primary-color);
      cursor: pointer;
      padding: 15px 20px;
      border-top-left-radius:inherit;
      border-top-right-radius:inherit;
      text-align: left;
      border: none;
      outline: none;
      transition: background-color 0.2s ease;
      font-size: 1.2em;
    }

    .ns-accordion-header:hover,
    .ns-accordion-header.active {
      background-color: var(--ns-button-color);
      color:var(--ns-text-color);
    }

    .ns-accordion-content {
      background: var(--ns-menu-color);
      overflow: hidden;
      transition: max-height 0.2s ease-out;
      max-height: 0;
      padding: 0 20px;
      border-bottom-left-radius:inherit;
      border-bottom-right-radius:inherit;
    }

    .ns_accordion-content-inner {
      padding: 15px 0;
    }
/***********/

.log-table {
        width: 100%;
        border-collapse: collapse;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        color: var(--ns-secondary-color);
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    .log-container {
        width: 100%;
        margin:10px
        max-width:1280px;
        max-height: 1024px; /* Ajustez selon la hauteur souhaitée */
        overflow-x: auto;  /* Scroll horizontal si le tableau est trop large */
        overflow-y: auto;  /* Scroll vertical si trop de lignes */
        border: 1px solid var(--ns-inactive-color);
    }
    .log-download-button{
        display:flex;
        flex-direction:row-reverse;
    }

    /* Style de l'entête */
    .log-header {
        background: var(--ns-linear-gradient-to-right);
        color: var(--ns-text-color);
        text-align: left;
    }

    .log-header th {
        padding: 12px 15px;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.85rem;
    }
    /* À placer dans votre ASCX */
    .log-table {
        width: 100%; /* Force une largeur minimale pour éviter l'écrasement des colonnes */
        table-layout: fixed; /* Aide à garder des largeurs de colonnes prévisibles */
        table-layout: fixed; /* INDISPENSABLE pour éviter le débordement */
        border-collapse: collapse;
        word-wrap: break-word; /* Force la coupure des mots longs */
    }

    /* On définit des largeurs fixes pour les petites colonnes */
    .log-cell-fixed { 
        width: 150px!important; 

    }
    .log-cell-fixed-100 { 
        width: 100px!important; 

    }
    .log-cell-fixed-50 { 
        width: 50px !important; 

    }
    .log-cell-fixed-200 { 
        width: 200px!important; 

    }
    .log-cell-date { 
        width: 120px!important; 

    }
    /* Style des lignes (Row & Alternate) */
    .log-row {
        background-color: white;
        border-bottom: 1px solid var(--ns-inactive-color);
    }

    .log-row-alt {
        background-color: var(--ns-menu-color); /* Utilisation de la couleur menu pour l'alternance */
        border-bottom: 1px solid var(--ns-inactive-color);
    }

    /* Style des cellules */
    .log-cell {
        padding: 10px 15px;
        font-size: 0.9rem;
        vertical-align: top;
        overflow: hidden;      /* Cache ce qui dépasse */
    }

    /* Style spécifique pour la colonne Erreur (multi-lignes) */
    .log-cell-error {
        color: var(--ns-accent-color) !important;
        font-family: 'Courier New', Courier, monospace;
        font-size: 0.8rem;
        white-space: pre-wrap !important; /* Préserve les retours à la ligne */
        max-width: 200px;
    }
    
    /* Classe pour limiter l'affichage de l'Objet */
    .log-cell-truncated {
    max-width: 200px; /* Ajustez selon vos besoins */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: help; /* Change le curseur pour indiquer qu'il y a plus d'info */
    color: var(--ns-primary-color); /* Optionnel: une couleur légère pour l'objet */
}
.ns-bloc-parent {
    display: flex;         /* Active le mode Flexbox */
    flex-direction: row;   /* Aligne les enfants en ligne (par défaut) */
    gap: 10px;            /* Optionnel : ajoute de l'espace entre les enfants */
	width: 100%;
	margin: 0 auto;
}

.ns-bloc-enfant {
    padding: 20px;
}
.ns-bloc-30 {
	width: 30% !important;
}
.ns-bloc-70 {
	width: 70% !important;
}
.ns-bloc-90 {
	width: 90%!important;
}
.ns-bloc-50 {
	width: 50%;
}

.ns-margin-top-10 {
    margin-top:10px;
}

.cguLinkAccent{
    color:var(--ns-secondary-color)!important;
    font-size:1em;
    font-weight:bold;
}
.RoomNameTitle {
    font-size:xxx-large;
    color:var(--ns-text-color);
    font-weight:bold;
    padding : 5px 15px;

}
.LoginForm{
    display:block;
    background-color:var(--ns-button-color);
    color:var(--ns-text-color);
    border-radius:16px;
    padding:10px;
}

.gradient-background {
    background-color:var(--ns-linear-gradient-to-right) !important;
    color: var(--ns-text-color);
}
#s4-titlerow {
    background-color: transparent;
    margin: 0;
    padding: 0;
    height: auto;
}

i .far fa-star {
    color: var(--ns-primary-color);
}

/* Used to hide the suite bar and the ribbon when the user is not an admin. Can't hide directly these components, since it would break the scrolling! We need to hide them with CSS */
#suiteBar, #s4-ribbonrow {
    display: none!important;
}

#contentBox {
    margin-right: 20px;
    margin-left: 40px;
    min-width: 703px;
}

#fixedTopContentBox {
    margin-left: 40px;
    max-height: 100px;
 }

/** Header **/
.notaHeader {
    width: 100%;
    display: table;
    background: transparent;
}

.notaHeaderLogo {
    width: auto;
    height: 100%;
    float: left;
}

    .notaHeaderLogo div {
        margin: 10px 10px 0px 10px;
    }

.notaHeaderTitleSection {
    margin-top:0px;
}

.notaHeaderTitle {
    font-size: xx-large;
    color: var(--ns-text-color);
    margin-top:10px;
}

.notaHeaderBreadCrumb {
    font-size: large;
    font-style: italic;
    text-align: left;
    margin-left: 60px;
    padding-left: 0;
    max-width: 100%;
    color: black;
}

.notaHeaderBreadCrumb a {
    color: #777;
}
.notaHeaderBreadCrumb a:visited {
    color: #777;
}

.settingsButtonWrap {
    float: right;
}

.userDropDownMenuWrap {
    float: right;
    max-width:250px;
}

    .userDropDownMenuWrap div {
        margin-right: 25px;
        margin-left: 10px;
    }

.notaHeaderClear {
    clear: both;
}

/** Tiles **/
#tilesContainer {
    margin-top: 30px;
}

.notaRoomColoredTile {
	width: 96px; height: 96px; text-align: center; line-height: 90px; overflow: hidden; display: inline-block; position: relative; background-color: var(--ns-secondary-color);
}
.notaExchangeColoredTile {
	width: 96px; height: 96px; text-align: center; line-height: 90px; overflow: hidden; display: inline-block; position: relative; background-color: rgb(164, 55, 58);
}
.settingsColoredTile {
	width: 96px; height: 96px; text-align: center; line-height: 90px; overflow: hidden; display: inline-block; position: relative; background-color: rgb(0, 94, 0);
}


/** Room view **/
div#nsRoomColumnsContainerParent {
    overflow-x: hidden;
    overflow-y: hidden;
}


div#nsRoomColumnsContainer {
    border: 2px #cccccc solid;
    width: 66%;
    padding-bottom: 1000px;
    border-radius: 5px;
    margin-bottom: 30%;
}

div#nsRoomFixedColumnTop {
    margin-bottom: 20px;
}

div#nsRoomColumnLeftResizable {
    float: left;
    margin-right: -1px;
    padding: 5px 0px 5px 5px;
    margin-top: 5px;
    margin-right: 25px;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
    border-right: 2px #cccccc solid;
	min-width: 320px!important;
}

div#nsRoomColumnLeft {
    height: 100%;
    width: 100%;
    overflow: auto;
    margin-top: -1px!important;
}

div#nsRoomColumnCenter {
    padding: 10px;
    margin-left: 270px;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
    height:1000px;
}

div#nsRoomColumnCenterInner{
    padding-left:10px;
    height: 100%;
    width: 100%;
    overflow: auto;
}

#nsRoomColumnClearFloat {
    clear: both;
}

/** Button with image **/
a.buttonWithImage {
    padding:0px;
    margin: 0px;
    border: 0px;
}

a:hover.buttonWithImage {
    text-decoration: none;
}

span.buttonWithImage, div.buttonWithImage{
    /*padding:6px 5px 6px 5px;*/
    margin: 0px;
}

span.buttonWithImageTileStyled, div.buttonWithImageTileStyled{
    padding:6px 5px 6px 5px;
}

span.buttonWithImageTileStyled:hover, div.buttonWithImageTileStyled:hover{
    filter: brightness(1.1);
}

/** All links are black (#444) -mainly for rooms page (now tree view + folder view never go to 'visited blue') **/
.roomTreeView a,.roomTreeView a:visited
{
    color:#444;
    text-decoration:none;
    padding-left:4px;
}
.ms-vb a:visited,.ms-vb2 a:visited,.ms-vb-user a:visited{
    color:#444;
    text-decoration:none;
}

/** Room status WebPart */
.room-status {
    margin-top: 0px;
    margin-bottom: 0px;
    font-weight: bold;
    visibility:collapse;
}

.button-next-status{
    margin-left:0px !important;
}


/* modal dialog SP*/
    .ms-dlgContent {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: #f3f3f3;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
    
    .ms-dlgTitle {
        background: var(--ns-button-color);
        color: var(--ns-text-color);
 
        padding: 10px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }

    .ms-dlgTitleText {
        font-size: 1.3em!important;
        font-weight: bold!important;
        color:var(--ns-text-color);
    }
    
    .ms-dlgFrameContainer {
        overflow: hidden!important;
        background-color: white!important;
    }

   .ms-vl-apptilehover:hover{
        font-size:1.2em;
        font-weight:bold;
        color:black!important;
    }
	
	.ms-vl-apptitleouter:hover {
        font-size:1.2em;
        font-weight:bold;
        color:black!important;
    }
    /* input and button SP*/
	.ms-vl-apptitleouter {
        font-size:1.2em;
        font-weight:bold;
		max-height:4em;
        color:black!important;
    }

    input[type=password],
    input[type=text],
    input[type=file],
    textarea,
    .ms-inputBox
    {
        padding: 2px 5px;
        border-radius: 5px;
        border-color: #cccccc!important;
        color: #ababab!important;
        border: 2px #cccccc solid;
        height: 25px;
        min-width: 100px;
    }

    input[type=button],
    input[type=reset],
    input[type=submit],
    button{
         width: 250px;
         text-align: center;
         margin: 10px;
         border-radius: 5px;
         background: white;
         color:var(--ns-secondary-color);
         font-size: 12px;
         font-weight: bold;
         border: var(--ns-secondary-color) solid 1px;
         height: 80%;
    }

    input[type=button]:hover,
    input[type=reset]:hover,
    input[type=submit]:hover,
    button:hover
    {
          width: 250px;
         text-align: center;
         margin: 10px;
         border-radius: 5px;
         background: var(--ns-linear-gradient-to-right);
         color:var(--ns-text-color);
         font-size: 12px;
         font-weight: bold;
         border-color: var(--ns-text-color);
         border: var(--ns-menu-color) solid 1px;
         height: 80%;
    }
     
    input[type=button],
    input[type=reset],
    input[type=submit],
    button:focus{
         width: 250px;
         text-align: center;
         margin: 10px;
         border-radius: 5px;
         background: white;
         color: var(--ns-primary-color);
         font-size: 12px;
         font-weight: bold;
         border: var(--ns-primary-color) solid 1px;
         height: 80%;
    }

     a, .ms-link:visited{
        color: var(--ns-secondary-color);
    }
   

    @keyframes spin {
        from {
            transform: rotate(0deg); 
        }
        to {
            transform: rotate(360deg); 
            }
    }

    .ms-list-addnew {
        padding-top: 8px;
        padding-bottom: 12px;
        padding-left: 15px;
        font-weight: normal;
        text-align: left;
        background-image: url(/_layouts/15/images/NotaSolutions/NotaRooms/Btn-add_28x28.png);
        background-size: contain;
        background-position: left;
        background-repeat: no-repeat;
        background-size:32px;
    }

    .ms-list-addnew:hover {
       filter: brightness(1.1);
    }

    .ms-list-addnew-img16 {
        left: -233px;
        top: -138px;
        position: absolute;
        visibility: collapse;
    }

    
    .ms-heroCommandLink, .ms-heroCommandLink:visited{
	
	    color:var(--ns-primary-color)!important;
    }


    .persona-icon {
            display: inline-flex!important;
            align-items: center;
            justify-content: center;
            min-width: 30px;
            min-height: 30px;
            border-radius: 50%;
            color: white;
            font-weight: bold;
            margin-right: 10px;
            position: relative;
            cursor: pointer;
      }

        .tooltiptext {
            visibility: hidden;
            width: 120px;
            background-color: black;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px;
            position: absolute;
            z-index: 1;
            bottom: 125%; /* Position the tooltip above the text */
            left: 50%;
            margin-left: -60px;
            opacity: 0;
            transition: opacity 0.3s;
        }
        .persona-icon:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }

        /*Menu bar*/

          .menu-bar {
        width: 100%;
        background: var(--ns-linear-gradient-to-right);
        height: 75px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        margin: 20px;
        border-radius: 5px;
        justify-content: flex-start;
    }

    .menu-bar .logo {
        display: flex;
        align-items: center;
    }

    .menu-bar .logo img {
        height: 42px;
        width: 42px;
    }

    .menu-bar .logo-text {
        margin-left: 10px;
        font-size: 24px;
        font-weight: bold;
        color: white;
    }

	 .menu-center-logo {
		max-width: 30px;
		max-height: 30px;
		margin-right: 10px;
	}
    .center-text {
        display: flex;
        align-items: center; 
    }
	
	.center-text a {
		display: flex; /* Active Flexbox pour le lien */
		align-items: center; /* Aligne les éléments verticalement au centre */
		text-decoration: none; /* Supprime le soulignement du lien */
	}
	
	.center-menu-text {
		display: flex;
		align-items: center;
		color:white;
	}

	.menu-bar .center-text {
		display: flex;
		align-items: flex-start;
		/* position: absolute; */
		/* left: 69%; */
		transform: translateX(-5%);
		font-size: 18px;
		font-weight: bold;
		color: white;
		background-color: #ED1E79;
		border-radius: 1000px;
		padding: 5px;
		padding-left: 30px;
		padding-right: 30px;
		align-content: center;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: center;
		max-height: 35px;
		margin: auto;
	}

    .menu-bar .right-button {
        background-color: pink;
        padding: 10px 20px;
        border-radius: 25px;
        color: white;
        font-weight: bold;
        display: flex;
        align-items: center;
        border: none;
        cursor: pointer;
    }

    .menu-bar .right-button img {
        margin-right: 10px;
        height: 24px;
        width: 24px;
    }

    .header-icons {
        display: flex;
        /* align-items: center; */
        /* height: 48px; */
        /* width: 48px; */
        /* background-color: brown; */
    }

    .header-icon-echange {
       margin-left: -20px;
       width: 50px;
       margin: 6px;
       background-color: var(--ns-button-color);
       border-radius: 8px;
       color:var(--ns-text-color);
    }

    .header-icon-param {
       margin-left: -20px;
       width: 50px;
       margin: 6px;
       background-color: var(--ns-button-color);
       border-radius: 8px;
       color:var(--ns-text-color);
    }
    
    .header-icon-help {
       margin-left: -20px;
       width: 50px;
       margin: 6px;
       background-color: var(--ns-button-color);
       border-radius: 8px;
       color:var(--ns-text-color);
    }

    .header-icon-dl {
       margin-left: -20px;
       width: 50px;
       margin: 6px;
       background-color: var(--ns-button-color);
       border-radius: 8px;
       color:var(--ns-text-color);
    }

    .header-icon-help:hover {
       filter: brightness(1.1);
       color:var(--ns-accent-color);
     }

     .header-icon-dl:hover {
       filter: brightness(1.1);
       color:var(--ns-accent-color);
     }

     .header-icon-param:hover  {
       filter: brightness(1.1);
       color:var(--ns-accent-color);
     }
	 
     .header-icon-echange:hover  {
       filter: brightness(1.1);
       color:var(--ns-accent-color);
     }
	 
	.notaHeaderUserMenu {
		display: flex!important;
		flex-direction: row;
		position: absolute;
		left: 70%;
		width: 23%;
		justify-content: center;
	}

    .notaHeaderUserMenu div {
        margin: 0px;
    }
	
	#userDropDownMenu {
        margin-top:20px;
        margin-top: 15px;
        margin-left: -180px;
        min-width: 300px;
        z-index:1500;
    }
    #userDropDownMenu span {
        font-weight:bold;
        z-index:1500;
        top: 15px;
        margin-top: 15px;
    }

	#userDropDownMenu .buttonWithImage span{
		color: var(--ns-text-color)!Important; 
		top:-5px;
	}


     #userDropDownMenu .buttonWithImage .dc-mega-icon:before {
        content: '';
        position: absolute;
        top: -4px;
        width: 16px;
        height: 16px;
        display: inline-block;
        background: url(/_layouts/15/images/NotaSolutions/NotaRooms/Personna_42x42.png) no-repeat center center;
        background-size: contain;
    }

      .toolBarDiv {
        font-weight: bold;
        font-size: 13px;
        margin-top: 15px;
        display: flex;
        align-items: center;
        margin-left: 20px;
        justify-content: space-between; /* Espacement entre les éléments de gauche et ceux de droite */
        /* width: 66%; */
        /* background: red; */
    }

    .toolBarDiv .left-items, .toolBarDiv .right-items {
        display: flex;
        align-items: center;
        /* width: 400px; */
    }

    .toolBarDiv .right-items {
        margin-left: auto; /* Pousse les éléments de droite à la fin */
        position: relative;
        /* left: 100%; */
    }

    .toolBarDiv a {
        text-decoration: none;
    }

    #tilesContainer {
        display: flex; /* Utiliser Flexbox pour aligner les éléments horizontalement */
        flex-wrap: wrap; /* Permettre aux éléments de passer à la ligne suivante si nécessaire */
        gap: 20px; /* Espacement entre les éléments */
    }

      .tile {
        width: 200px;
        margin: 20px;
        padding-top: 40px;
        padding-left: 15px;
        padding-right: 15px;
        display: inline-block;
        position: relative;
        background: var(--ns-inactive-color);
        border-radius: 10px;
        color:  var(--ns-primary-color); 
		border: 2px var(--ns-primary-color) solid;
		cursor:pointer;
    }
	.tile .favorite-icon
    {
        color:var(--ns-primary-color);
	}
    .tile:hover .favorite-icon {
        color:var(--ns-accent-color);
	}

    .tile:hover .fa-star:before{
        /*color:var(--ns-primary-color) !important;*/
    }
    .tile:hover .ms-metadata{
        color:var(--ns-text-color);
    }
    .tile:hover .ms-vl-apptitle
		{
            color: var(--ns-text-color) !important; 
        }

   .tile:hover {
        cursor:pointer;
        margin: 20px;
		background:var(--ns-linear-gradient-to-right);
        display: inline-block;
        position: relative;
        border-radius: 10px;
         padding-top: 40px;
        padding-left: 15px;
        padding-right: 15px;
        color: var(--ns-primary-color)!important;
    }

    .ms-vl-appimage {
        text-align: center;
    }

    .ms-vl-appinfo {
        text-align: center;
        color: white;
    }

    .favorite-icon {
        position: absolute;
        top: 10px;
        right: 10px;
        color: white;
        cursor: pointer;
        z-index: 1;
    }

    .favorite-icon-grid {
        top: 10px;
        right: 10px;
        color: white;
        cursor: pointer;
        z-index: 1;
    }

    #tilesContainer .favorite-icon i.fas {
        color: var(--ns-primary-color) !important; /* Blanc dans la vue tuile */
    }

    #tilesContainer .favorite-icon i.far {
        color: var(--ns-accent-color); /* Blanc dans la vue tuile */
    }

    #roomsGridView .favorite-icon-grid i.fas {
        color: var(--ns-primary-color); /* Jaune dans la vue liste */
    }

    #roomsGridView .favorite-icon-grid i.far {
        color: var(--ns-accent-color); /* Gris dans la vue liste */
    }

    .favorite-icon:hover { 
        transform: scale(1.5); /* Grossir la taille du bouton lors du survol */ 
    }
    .favorite-icon-grid:hover { 
        transform: scale(1.5); /* Grossir la taille du bouton lors du survol */ 
    }

    .favorite-filter-button {
        background: none;
        border: none;
        cursor: pointer;
        margin-right: 10px; /* Espacement entre les boutons */
    }

    .favorite-filter-button .fas {
        font-size:2em;
        color: var(--ns-accent-color); /* Couleur de l'étoile */
    }

    .favorite-filter-button .far {
        font-size:2em;
        color: var(--ns-primary-color); /* Couleur de l'étoile */
    }

    .favorite-filter-button:hover .fas {
        transform: scale(1.2); /* Agrandir l'étoile au survol */
        transition: transform 0.2s; /* Animation douce */
    }

    .AddRoom-button {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        margin-right: 10px; /* Espacement entre les boutons */
    }

    .AddRoom-button img {
        width: 28px; /* Ajuste cette valeur selon tes besoins */
        height: 28px; /* Ajuste cette valeur selon tes besoins */
    }

    .AddRoom-button img {
        transform: scale(1.2);
        transition: transform 0.2s;
        color:var(--ns-accent-color);
    }

    .filter-button {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        margin-right: 10px; /* Espacement entre les boutons */
    }

    .filter-button .fas {
        color: black; /* Couleur de la loupe */
        font-size: 24px; /* Taille de la loupe */
    }

    .filter-button:hover .fas {
        transform: scale(1.2);
        transition: transform 0.2s;
    }

    .view-button {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        margin-right: 10px; /* Espacement entre les boutons */
    }

    .view-button .fas {
        color: var(--ns-primary-color); /* Couleur de l'icône */
        font-size: 24px; /* Taille de l'icône */
        padding: 6px;
    }

    .view-button:hover .fas {
       filter: brightness(1.1);
		border : 1px solid var(--ns-primary-color);
    }

    .view-selected {
        border: 1px solid var(--ns-primary-color);
    }

    .ms-vl-apptitle {
        font-size: 16px;
        font-weight: bold;
        color: var(--ns-primary-color)!important; /*changed by JM le 24/04/2025*/
    }

    .ms-metadata {
        font-size: 12px;
        color: var(--ns-text-secondary-color); /*Changed by JM le 24/04/2025*/
    }

    .custom-gridview .text-warning {
        color: var(--ns-primary-color); /* Couleur jaune pour les étoiles */
    }

    .custom-gridview tr {
        cursor: pointer;
    }

    .custom-gridview tr:hover {
        background-color: white; /* Surbrillance lors du survol */
        color:var(--ns-primary-color);
        border-color:var(--ns-primary-color);
        border-width:1px;
    }

    .custom-gridview td {
        padding: 10px; /* Espacement entre les lignes et les colonnes */
    }

    .custom-gridview a {
        text-decoration: none;
        color: inherit;
    }

    .custom-gridview a:hover {
        text-decoration: underline;
    }

    .custom-gridview th {
        font-size: 16px; /* Taille de la police plus grande pour les en-têtes */
        padding: 10px; /* Espacement autour des en-têtes */
        border-bottom: 2px solid #ddd; /* Ligne entre l'en-tête et les données */
        background-color: #f8f8f8; /* Couleur de fond pour différencier l'en-tête */
    }

  .custom-gridview {
       margin:15px;
       width: 95%;
    }

	.clickable-cell:hover{
	   background-color:white;
	   color:var(--ns-primary-color);
	   font-weight:bold;
	   font-size:1.2em;
	   height:15px;
	}

    .custom-gridview th, .custom-gridview td {
        text-align: left; /* Alignement à gauche des textes */
        vertical-align: middle; /* Alignement vertical au milieu */
    }

    .iconPlus {
      width: 32px;
      height: 32px; 
      color: var(--ns-text-color); /* Couleur blanche pour le symbole plus */
      background-color: var(--ns-accent-color);  /* Couleur de fond gris foncé */
      border-radius: 50%; /* Rend l'icône circulaire */
      /* display: flex; */
      align-items: center;
      margin:15px;
      margin-left:60px;
      /* margin-bottom: -5px; */
      justify-content: center;
    }

    
     .iconPlus:hover {
   
       filter: brightness(1.1);
     }

    .iconPlus::before {
      content: '+';
      font-size: 36px; /* Ajuste la taille du symbole plus */
      font-weight: bold; /* Rend le symbole plus en gras */
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      position: relative;
      /*background-image: url(/_layouts/15/images/NotaSolutions/NotaRooms/Btn-add_28x28.png);*/
      background-size: contain;
      background-size: 32px;
    }

    .search-container {
        position: relative;
        width: 400px;
        display: inline-block;
    }

    .filterTextBox {
        width: 100%; /* Ajuste la largeur selon vos besoins */
        padding: 10px 10px 10px 40px!important; /* Ajoute de l'espace pour l'icône */
        border-radius: 25px!important; /* Bordures arrondies */
        background-color: #f0f0f0!important; /* Fond gris */
        border: 0px!important; 

        font-size: 14px; /* Taille de la police */
    }

    .search-icon {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 18px;
        color: var(--ns-accent-color); /*#888;*/ /* Couleur de la loupe */
    }
    .input[type=text] {
      border:0px!important;
      border-radius: 25px!important; /* Bordures arrondies */
      background-color: #f0f0f0!important; /* Fond gris */
      border: 0px!important;
      padding: 0px 0px 0px 40px!important;
    }

    .ms-vl-apptile, .ms-vl-apptile-tenant{
        width: 188px!important; /*zone de selection de la tuile*/
    }

   .button-allRoomsView {
        background-color: #f1f1f1;
        border: none;
        border-radius: 5px;
        padding: 5px 10px;
        cursor: pointer;
        display: flex;
        align-items: center;
    }

   .favorite-filter-button.active i {
    color: var(--ns-accent-color); /* Change la couleur de l'icône lorsqu'elle est active */
    }

    .my-rooms-filter {
        margin: 5px;
        font-weight: bold;
        font-size: 1.2em;
        /* text-decoration: underline!important; */
        border: 2px #F2B53F solid;
        border-radius: 5px;
        padding: 5px;
    }

    .my-rooms-filter:hover {
        filter: brightness(1.1);
     }

    /*RoomToolBox*/
        .roomSearchTextboxContainer {
     
        position: relative;
        display: inline-block;
        min-width: 350px;
        max-width: 350px;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    
     .roomSearchTextbox {
        width: 100%; /* Ajuste la largeur selon vos besoins */
        padding: 10px 10px 10px 40px!important; /* Ajoute de l'espace pour l'icône */
        border-radius: 25px!important; /* Bordures arrondies */
        background-color: #f0f0f0!important; /* Fond gris */
        border: 0px!important; 
        font-size: 14px; /* Taille de la police */
    }

     .search-icon-ToolBox {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 18px;
        color: #888; 
    }

    .search-icon-ToolBox:hover {
       filter: brightness(1.1); 
    }

    .btn-recent-activities {
        border: none;
        border-radius: 5px;
        margin-left: 10px;
        padding: 12px;
        cursor: pointer;
        border-color: #dcdcdc;
        font-size: 13px;
        font-weight: bold;
        color: white;
        VERTICAL-ALIGN: super;
        background: var(--ns-linear-gradient-to-right);
    }

    .btn-recent-activities:hover {
       filter: brightness(1.1);
     }

    .dropDownMenuContainer-menu{
        margin-left: 80px;
        display: flex;
        margin-top:8px;
    }

    .roomToolboxMenu {
        margin-left:30px!important;
        display: flex;
    }
    
    
    .btn-menu-toolbox {
        max-width:48px;
        margin-top: -8px;
        margin-left: 10px;
		cursor: pointer;
        color:var(--ns-primary-color)!important;
        background-color:var(--ns-button-color)!important;
        border-radius:8px;
    }

    .btn-menu-toolbox-recentactivities
    {
        max-width:48px;
        margin-top: -12px;
        margin-left: 10px;
    }

    .btn-menu-toolbox:hover {      
       filter: brightness(1.1);
       color:var(--ns-accent-color);
     }

    .btn-add {
        margin: 8px 8px 8px 0px;
        color:var(--ns-button-color);
        font-size: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        position: relative;
        /*background-image: url(/_layouts/15/images/NotaSolutions/NotaRooms/Btn-add_28x28.png);*/
        background-size: contain;
        background-size: 32px;
    }

    .moreActionsDropDownMenuButton {
      display:inline-grid;
      background: var(--ns-linear-gradient-to-right);
      border: none;
      border-radius: 5px;
      padding: 10px 10px;
      cursor: pointer;
      border-color: #dcdcdc;
      margin-left:10px;
      color:white!important;
    }

    .buttonWithImageTileStyled > span:first-child 
    {
             color: Black!important;
    }

    .buttonWithImageTileStyled > span:hover {
    color: black !important;
}


    /*Room Tree view*/
        .container {
    display: flex;
    height: 100%;
    position: relative;
}
.content {
    flex: 1;
    overflow: auto;
}
.sidebar {
    width: 33%;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    background: var(--ns-linear-gradient-to-right); 
    border-left: 1px solid #ccc;
    transition: width 0.3s;
    overflow: auto;
    z-index: 1000;
    margin-top: 100px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.sidebar.collapsed {
    width: 0;
}
.toggle-btn {
    position: fixed;
    top: 50%;
    right: 0;
    width: 30px;
    height: 100%;
    cursor: pointer;
    background: var(--ns-linear-gradient-to-right);
    border: 1px solid #aaa;
    writing-mode: vertical-rl;
    text-align: center;
    transform: translateY(-50%);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px; /* Ajuste cet espace en fonction de tes besoins */
    margin-top:106px;
}

.toggle-arrow {
    font-size: 2em;
    transition: transform 0.3s;
    margin-bottom: auto; /* Force la flèche à rester en haut */
    color:white;
}

.toggle-btn span {
    margin-top: auto; /* Force le texte à rester au milieu */
}

.toggle-arrow-collapsed {
    transform: rotate(-180deg); /* flèche gauche */
}
.faq-separator {
    border-color:var(--ns-primary-color);
}
.faq-container {
    padding: 10px;
    overflow: auto;
}

.faq-list{
    background-color:white;
     border-radius: 5px;
     color:var(--ns-primary-color);
     margin : 10px;
     padding:10px;
}

.faq-item {
    position: relative;
    align-items: center;
    justify-content: space-between;
}

.faq-header {
    padding: 5px 0;
    position: relative;
    display: flex;
    justify-content: space-between;
    color: var(--ns-text-color);
    margin-left: 10px;
    font-size: 1.5em;
    margin-bottom: 10px;
    font-weight: bold;
}

.faq-question {
    font-weight: bold;
    cursor: pointer;
    flex-grow: 1;
    font-size:0.8em;
    color:var(--ns-text-secondary-color);
}
.faq-answer {
    margin-top: 5px;
    color:black;
    margin-left: 15px;
    align-items: center; /* Aligne les éléments sur la même ligne */
}
.faq-button {
    background-color: var(--ns-faq-button-color);
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.faq-button-question{
    background-color: var(--ns-faq-button-question-color);
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 96%!important;
    font-size: 1.2em!important;
    height: 45px!important;
}

.faq-arrow {
    font-size: 0.7em;
    cursor: pointer;
    margin-right: 5px;
    transition: transform 0.3s;
    color:var(--ns-primary-color);
    max-height:15px;
}

.faq-arrow.up {
    transform: rotate(180deg);
    max-height:15px;
}

.faq-add {
    margin-top: 20px;
}

.answer-text {
    max-width: 70%;
    min-width: 70%;
}

.faq-input, .answer-input {
    width: 150px;
    padding: 5px;
    margin: 5px 0;
    pointer-events: auto;
    z-index: 100;
    margin : 5px;
    min-width:95%;
    max-width:95%;
    color: var(--ns-text-scondary-color)!important;
	min-height:300px;
}
.faq-label {
    border: none !important;
    background-color: transparent;
    font-weight: bold;
    pointer-events: none;
    outline: none;
    width:90%;
}
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
    padding-top: 60px;
}
.small-modal .modal-content {
    width: 50%;
    margin: auto;
}
.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    border: 1px solid #888;
    width: 80%;
    border-radius : 8px;
}
.close {
    color: var(--ns-text-color);
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    background-color:  var(--ns-primary-color);
    text-decoration: none;
    cursor: pointer;
}
.small-modal .modal-content {
    width: 50%;
    margin: auto;
}
.modal-content .faq-label, .modal-content .faq-input, .modal-content .faq-add {
    display: block;
    margin-bottom: 15px;
    min-width: 95%;
    max-width: 95%;
}
.char-count {
    font-size: 0.9em;
    color: #555;
    margin-top: 5px;
    margin-left: 20px;
}

.modal-title-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background : var(--ns-linear-gradient-to-right);
        color: white;
        padding: 10px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        max-height:30px;
    }

    .modal-title {
        margin: 0;
        font-size: 1.5em;
        color:var(--ns-text-color);
    }

    .faq-delete-button {
        background-size: 16px 16px!important;
        width: 16px!important;
        height: 16px!important;
        border: none!important;
        cursor: pointer!important;
        padding: 0px!important;
        min-width:16px!important;
        margin : 0px 10px 0px 0px!important;
    }

    .faq-delete-button:hover {
        background-size: 16px 16px!important;
        width: 16px!important;
        height: 16px!important;
        border: none!important;
        cursor: pointer!important;
        padding: 0px!important;
        min-width:16px!important;
        filter: brightness(0.8); /* Effet visuel sur hover */
    }

       .faq-delete-button-answer {
        background-size: 16px 16px!important;
        width: 16px!important;
        height: 16px!important;
        border: none!important;
        cursor: pointer!important;
        padding: 0px!important;
        min-width:16px!important;
        margin-left: auto!important;
        padding-right: 3px!important;
        color:black!important;
    }

    .faq-delete-button-answer:hover {
        background-size: 16px 16px!important;
        width: 16px!important;
        height: 16px!important;
        border: none!important;
        cursor: pointer!important;
        padding: 0px!important;
        min-width:16px!important;
        filter: brightness(0.8); /* Effet visuel sur hover */
        margin-left: auto!important;
        padding-right: 3px!important;
        color:black!important;
    }

    .no-faq-message {
        text-align: center;
        font-size: 22px;
        margin-top: 20px;
        min-height: 600px;
    }

    .no-faq-message img {
        width: 200px;
        height: 150px;
        display: block;
        margin: 0 auto 10px;
        padding: 50px 50px;
        border-radius: 16px;
        background-color:var(--ns-primary-color)!important;
    }

    .persona-icon {
        position: relative;
        display: inline-block;
        cursor: pointer;
    }

    .persona-icon .tooltiptext {
        visibility: hidden;
        width: 200px;
        background-color: #555;
        color: #fff;
        text-align: left;
        border-radius: 6px;
        padding: 5px;
        position: absolute;
        z-index: 1;
        top: -5px;
        left: 105%; /* Positionne le tooltip à droite de l'icône */
        opacity: 0;
        transition: opacity 0.3s;
    }

    .persona-icon .tooltiptext::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 100%; /* Positionne la flèche à gauche du tooltip */
        margin-top: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent #555 transparent transparent;
    }

    .persona-icon:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }

    .lblNewFolder {
        color:var(--ns-primary-color);
        z-index: 1500;
        position: relative;
        font-size:1em;
    }

    .lblNewFolder:hover{
         z-index: 1500;
         position: relative;
    }

    .NewFolderBtn {
        margin:auto;
        margin: auto;
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: flex-start;
        align-items: center;
        position:relative;
        z-index:1000;
    }

    .NewAnswerBtn {
        margin:auto;
        margin-bottom:10px;
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: flex-start;
        align-items: center;
        position:relative;
        margin-left: 10px;
        z-index:1000;
    }

    .NewFolderBtn:hover {
        filter: brightness(1.1);
        cursor: pointer;
    }

    .NewAnswerBtn:hover {
        filter: brightness(1.1);
        cursor: pointer;
    }



    /*General settings*/
        .settingsSectionHeader {
            border-top: 1px solid #cccccc;
            background-color: #efefef;
            padding:0 0 3px 5px;
        }
        h3{
            font-size:22px;
        }
    
        .tab {
            overflow: hidden;
        }
    
        .tab button {
            background-color: var(--ns-menu-color);
            float: left;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 14px 16px;
            transition: 0.3s;
            border-bottom: var(--ns-button-color) solid 6px;
            color: var(--ns-button-color);
            font-size: 1.5em;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            width:30%;
            font-weight: bold;
        }
    
        .tab button:hover {
            border-bottom: var(--ns-button-color) solid 6px;
            background-color:var(--ns-linear-gradient-to-right);
            color: var(--ns-text-color);
            font-size: 1.5em;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            width:30%;
        }
    
        .tab button.active {
            border-bottom:var(--ns-accent-color) solid 6px;
            background-color:var(--ns-button-color);
            color: var(--ns-text-color);
            font-size: 1.5em;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            width:30%;
        }
    
        .tabcontent {
            display: none;
            padding: 6px 12px;
            border-top: none;
        }
        .vertical-tab {
            float: left;
            width: 20%;
            height: 300px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .vertical-tab button {
            width: 100%;
            text-align: center;
            margin: 10px;
            border-radius: 8px;
            background: var(--ns-menu-color);
            color: var(--ns-button-color);
            font-size: 1.5em;
            font-weight: bold;
            border: var(--ns-button-color) solid 1px;
            height: 80%;
        }

        .vertical-tab button:hover {
            width: 100%;
            text-align: center;
            margin: 10px;
            border-radius: 5px;
            background:var(--ns-linear-gradient-to-right);
            color: var(--ns-text-color);
            font-size: 1.5em;
            font-weight: bold;
            border: 0;
            height: 80%;
        }


        .vertical-tab button.active {
            width: 100%;
            text-align: center;
            margin: 10px;
            border-radius: 5px;
            background: var(--ns-linear-gradient-to-right);
            color: var(--ns-text-color);
            font-size: 1.5em;
            font-weight: bold;
            border: solid var(--ns-accent-color) 2px;
            height: 80%;
        }


        .vertical-tabcontent {
            margin-left: 20%;
            padding: 6px 12px;
            height: 300px;
            border-left: none;
        }

     
        .input-parameter{
            padding: 2px 5px!important;
            border-radius: 5px!important;
            border-color: #cccccc!important;
            color: #cccccc!important;
        }

        .button-parameter{
             text-align: center!important;
             border-radius: 5px!important;
             background:var(--ns-button-color)!important;
             color: var(--ns-text-color)!important;
             font-size: 1.4em!important;
             border: 0!important;
        }

        .button-parameter:hover {
             filter: brightness(1.1);
         }

        .tab button img.OfficeMembersLogo {
            max-height: 40px;
            margin-right: 10px;
            vertical-align: middle;
            content: url('/_layouts/15/images/NotaSolutions/NotaRooms/NotaroomMembre_80x80.png'); 
        }
        .tab button img.AdjustementsLogo { 
            max-height: 40px;
            margin-right: 10px;
            vertical-align: middle;
            content: url('/_layouts/15/images/NotaSolutions/NotaRooms/NotaroomParamReglage_80x80.png'); 
        }
        .tab button img.SiteAppearanceLogo {
            max-height: 40px;
            margin-right: 10px;
            vertical-align: middle;
            content: url('/_layouts/15/images/NotaSolutions/NotaRooms/NotaroomParamPersonalisation_80x80.png'); 
        }

        .tab button:hover img.OfficeMembersLogo { 
            content: url('/_layouts/15/images/NotaSolutions/NotaRooms/NotaroomMembre-hover_80x80.png'); 
            max-height: 40px;
            margin-right: 10px;
            vertical-align: middle;
        }
        .tab button:hover img.AdjustementsLogo { 
            content: url('/_layouts/15/images/NotaSolutions/NotaRooms/NotaroomParamReglage-hover_80x80.png'); 
            max-height: 40px;
            margin-right: 10px;
            vertical-align: middle;
        }
        .tab button:hover img.SiteAppearanceLogo {
            content: url('/_layouts/15/images/NotaSolutions/NotaRooms/NotaroomParamPersonalisation-hover_80x80.png'); 
            max-height: 40px;
            margin-right: 10px;
            vertical-align: middle;
        }

        .tab button.active img.OfficeMembersLogo { 
            content: url('/_layouts/15/images/NotaSolutions/NotaRooms/NotaroomMembre-active_80x80.png'); 
            max-height: 40px;
            margin-right: 10px;
            vertical-align: middle;
        }
        .tab button.active img.AdjustementsLogo { 
            content: url('/_layouts/15/images/NotaSolutions/NotaRooms/NotaroomParamReglage-active_80x80.png'); 
            max-height: 40px;
            margin-right: 10px;
            vertical-align: middle;
        }
        .tab button.active img.SiteAppearanceLogo {
            content: url('/_layouts/15/images/NotaSolutions/NotaRooms/NotaroomParamPersonalisation-active_80x80.png');
            max-height: 40px;
            margin-right: 10px;
            vertical-align: middle;
        }
        .vertical-tab button img.NotaRoomLogo{
            max-height: 40px;
            margin-right: 10px;
            vertical-align: middle;
            content: url('/_layouts/15/images/NotaSolutions/NotaRooms/NotaroomParam_80x80.png'); 
        }
    
        .vertical-tab button img.NotaEchangeLogo{
            max-height: 40px;
            margin-right: 10px;
            vertical-align: middle;
            content: url('/_layouts/15/images/NotaSolutions/NotaRooms/NotaroomEchange_80x80.png'); 
        }

        .vertical-tab button img.NotaEmailLogo{
            max-height: 40px;
            margin-right: 10px;
            vertical-align: middle;
            content: url('/_layouts/15/images/NotaSolutions/NotaRooms/NotaroomCourriel_80x80.png'); 
        }

        .vertical-tab button img.QuotasLogo{
            max-height: 40px;
            margin-right: 10px;
            vertical-align: middle;
            content: url('/_layouts/15/images/NotaSolutions/NotaRooms/NotaroomCourriel_80x80.png'); 
        }


         .vertical-tab button:hover  img.NotaRoomLogo{
            max-height: 40px;
            margin-right: 10px;
            vertical-align: middle;
            content: url('/_layouts/15/images/NotaSolutions/NotaRooms/NotaroomParam-active_80x80.png'); 
        }
    
        .vertical-tab button:hover  img.NotaEchangeLogo{
            max-height: 40px;
            margin-right: 10px;
            vertical-align: middle;
            content: url('/_layouts/15/images/NotaSolutions/NotaRooms/NotaroomEchange-active_80x80.png'); 
        }

        .vertical-tab button:hover  img.NotaEmailLogo{
            max-height: 40px;
            margin-right: 10px;
            vertical-align: middle;
            content: url('/_layouts/15/images/NotaSolutions/NotaRooms/NotaroomCourriel-active_80x80.png'); 
        }

        .vertical-tab button:hover img.QuotasLogo{
            max-height: 40px;
            margin-right: 10px;
            vertical-align: middle;
            content: url('/_layouts/15/images/NotaSolutions/NotaRooms/NotaroomCourriel-active_80x80.png'); 
        }

       .vertical-tab button.active  img.NotaRoomLogo{
            max-height: 40px;
            margin-right: 10px;
            vertical-align: middle;
            content: url('/_layouts/15/images/NotaSolutions/NotaRooms/NotaroomParam-active_80x80.png'); 
        }
    
        .vertical-tab button.active  img.NotaEchangeLogo{
            max-height: 40px;
            margin-right: 10px;
            vertical-align: middle;
            content: url('/_layouts/15/images/NotaSolutions/NotaRooms/NotaroomEchange-active_80x80.png'); 
        }

        .vertical-tab button.active  img.NotaEmailLogo{
            max-height: 40px;
            margin-right: 10px;
            vertical-align: middle;
            content: url('/_layouts/15/images/NotaSolutions/NotaRooms/NotaroomCourriel-active_80x80.png'); 
        }

        .vertical-tab button.active img.QuotasLogo{
            max-height: 40px;
            margin-right: 10px;
            vertical-align: middle;
            content: url('/_layouts/15/images/NotaSolutions/NotaRooms/NotaroomCourriel-active_80x80.png'); 
        }

        .tile-Exchange {
                width: 280px;
                margin: 20px;
                padding-top: 40px;
                padding-left: 15px;
                padding-right: 15px;
                background: var(--ns-inactive-color);
                border-radius: 10px;
                color: var(--ns-primary-color);
		        border: 2px var(--ns-primary-color) solid;
		        cursor:pointer;
				font-size: 2em;
        }
        .tile-Exchange:hover .ms-metadata{
            color:var(--ns-text-color)!important;
        }
        .tile-Exchange:hover .ms-vl-apptitle
		{
            color: var(--ns-text-color) !important; 
        }
		.tile-Exchange:hover {
                width: 280px;
                margin: 20px;
                padding-top: 40px;
                padding-left: 15px;
                padding-right: 15px;
                background: var(--ns-linear-gradient-to-right);;
                border-radius: 10px;
		        cursor:pointer;
				font-size: 2em;
			    text-decoration:underline!important;
        }

		.buttonWithImage.buttonWithImageTileStyled > span > span {
			font-weight: bold;
		}
		
		#moreActionsDropDownMenu > li > a > span > span:first-of-type {
			color: white !important;
		}