/*
 * Navigation bar
 */

/* change the background color */
.navbar-custom {
    background-color: #ffffff;
    padding: 0rem 0rem;
}
/* change the color of active links */
.navbar-custom .nav-item.active .nav-link {
    color: #ffffff;
    background-color: #003366;
    border-radius: 8px;
}

/* change the color of hovered links */
.navbar-custom .nav-item:hover .nav-link {
    background-color: #336699;
    border-radius: 8px;
    color: #ffffff;
}

/* change the link color */
.navbar-custom .navbar-nav .nav-link {
    color: #003366;
    padding: 0.5rem 1.5rem;
}

/* change the brand and text color */
/* .navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: #ffffff;
    padding: 10rem 1rem;
}
*/

/*
 * Sidebar
 */
/* change the background color */
.sidebar-custom {
    width: 100%; /*originaly 180px;*/
    background-color: #e8e8e9;
    padding: 0 0 0 0;
}

@supports ((position: -webkit-sticky) or (position: sticky)) {
  .sidebar-sticky-top {
    /* height: 100%;*/ /*to display the background sidebar until the bottom : */
    position: -webkit-sticky;
    position: sticky;
    top: 40px; /* size of the top nav bar */
    z-index: 900;
  }
}

/* change the color of active links */
.sidebar-custom .nav-item.active .nav-link {
    color: #ffffff;
    background-color: #003366; /* add background-color to active links */
    border-radius: 8px;
    width: 100%; 
}
/* change the color of hovered links */
.sidebar-custom .nav-item:hover .nav-link {
    background-color: #336699;
    border-radius: 8px;
    color: #ffffff;
}

/* change the link color */
.sidebar-custom .navbar-nav .nav-link {
    color: #003366;
    padding: 0.5rem 1rem;
}

.main-func {
    margin-left: 0px;  /*originaly 50px;*/
    margin-top: 10px;
    text-align: left;
}
/* Modification for small screen */
@media screen and (max-width: 599px) {
    .sidebar-custom {width: 100px;}
    .sidebar-custom a {font-size: 11px;}
    .main-func {margin-left: 0px;}
    /* .sidebar-sticky-top {position: relative; top:0;} */
}

.card {
    margin-bottom: 10px;
}

/* limit the logo size in the card */
.persalys-user {
    max-height: 6rem;
    max-width: 100%;
}

/* center the image of the carousel in the card */
.card .carousel-item {
    text-align: center;
}

.card h5 {
    color: #003366 ;
}

/* color title of the table */
.table th {
    color: #003366 ;
}

.btn
{
    background-color: #003366;
    color: #FFFFFF;
}
.btn:hover {
    background-color: #336699;
    color: #FFFFFF;
}

.footer {
    margin-top: 30px; 
}

 /* Carousel image modification : fill="%23XXX" -> XXX:color */
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23555' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23555' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

.carousel-indicators li {
    background-color: #555;
}

.center {
    margin-left: auto;
    margin-right: auto;
    display: block
}

h1 {
    color: #003366;
    font-size: 1.8em;
}

h2 {
    color: #336699;
    font-size: 1em;
    margin-top: 0.5em;
}

p {
    margin-top: 10px;
    margin-bottom: 10px;
}

strong {
    color: #336699;
}

.row {
    margin-bottom: 30px;
}

/* main page description */
.description {
    margin: 30px auto;
    /* text-align: center; */
}

.text-center {
    text-align: center;
}


/* add a bottom line to the table  */
.table th,
.table td {
  border-bottom: 1px solid #dee2e6;
}

.actu-frame {
    margin: auto;
    background-color:  #f2f2f2 ;
    border-radius: 1rem;
    padding: 1rem;
}

.actu-frame img {
    border-radius: 10%;
}