.transition {
    transition:.4s;
}

a.transition:hover {
    border-color:#0078bd!important;
    background:#c0e5fa;
    text-decoration:none;
}

figure.image.image-style-side {
    float: right;
}

.d-nav{
    width: 300px;
    margin-left: -250px;
}


/*
 *
 * STATS Dashboard
 *
 */

section.stats{
    column-count: 3;
    column-gap: 20px;
    width: 90%;
    margin: 20px auto;


}

div.stat{
    background-color: #19192c;
    border-radius: 8px;
    color: white;
    padding: 20px;
    box-shadow: 0 2px 4px #19192c;
    margin-bottom: 20px;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #19192c;
    border-radius: 20px;
}

div.stat:hover {
    background-color: #040404;
    box-shadow: 0 4px 8px #040404;
    border: 1px solid #040404;
}

div.stat *{
    margin-bottom: 20px;
}

div.stat div.stat-value{
     font-size: 2.5rem;
     font-weight: 900;
}

div.stat div.stat-text span{
    text-decoration: underline;
}

/* FORT */
div.stat.fort{
    box-shadow: 0 2px 4px rgba(144, 238, 144, 0.6);
    border: 1px solid rgba(144, 238, 144, 1);
}

div.stat.fort div.stat-value{
    color: rgba(144, 238, 144, 1);
}

/* MOYEN */
div.stat.moyen {
    box-shadow: 0 2px 4px rgba(255, 165, 0, 0.6);
    border: 1px solid rgba(255, 165, 0, 1);
}

div.stat.moyen div.stat-value{
    color: rgba(255, 165, 0, 1);
}

/* FAIBLE */
div.stat.faible {
    box-shadow: 0 2px 4px rgba(255, 99, 71, 0.6);
    border: 1px solid rgba(255, 99, 71, 1);
}

div.stat.faible div.stat-value{
    color: rgba(255, 99, 71, 1);
}

.divider {
    border: none;
    border-bottom: 3px solid ;
    width: 60%;
    margin: 0;
    margin-left: 0%;
    margin-top: -5px;
    position: relative;
    top: 5%;
    left: 2%;
  }

/* Ajouter des couleurs spécifiques pour chaque type de div.stat */
div.stat.moyen .divider {
    border-bottom-color: rgba(255, 165, 0, 1); /* Orange pour moyen */
}

div.stat.fort .divider {
    border-bottom-color: rgba(144, 238, 144, 1); /* Vert clair pour fort */
}

div.stat.faible .divider {
    border-bottom-color: rgba(255, 99, 71, 1); /* Rouge tomate pour faible */
}

.btn-circle {
    width: 40px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.btn-warning {
    background-color: #ffc107;
    border-color: #ffc107;
}

.btn-warning2 {
    background-color: #ffc107;
    border-color: #ffc107;
    width:30%;
}

table{
    border-radius:10px!important;
    border:1px solid #dee2e6!important;
}

table th, h1{
    border:none!important;
}

.form-check-input[type=checkbox] {
    border-radius: .25em;
}

.form-check .form-check-input {
    float: left;
    margin-left: -1.5em;
}

.form-check-input {
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    margin-top: .25em;
    vertical-align: top;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid #dee2e6;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
    print-color-adjust: exact;
}

.form-switch {
    padding-left: 2.5em;
}

.form-switch.form-check {
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5em;
    margin-bottom: .125rem;
}

.form-switch .form-check-input {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
    width: 2em;
    margin-left: -1.5em;
    background-image: var(--bs-form-switch-bg);
    background-position: left center;
    border-radius: 2em;
    transition: background-position .15s ease-in-out;
}

.form-switch .form-check-input:checked {
    background-position: right center;
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.form-check-input:checked[type=checkbox] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-check-input:checked {
    background-color: #41e400;
    border-color: #41e400;
}


.btn-scale {
    display: inline-block;
    font-weight: 400;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    background-color: #F2561D;
    border: 1px solid #F2561D;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  
  .btn-scale:hover {
    color: #19192B;
    background-color:#E3A48D;
    border-color:#E3A48D;
    cursor: pointer;
  }
  
  .btn-scale:focus, .btn-primary.focus {
    color: #fff;
    background-color:#DA5118;
    border-color: #DA5118;
    box-shadow: 0 0 0 0.2rem #f74c03;
  }
  
  .btn-scale:active {
    color: #fff;
    background-color: #19192c;
    border-color: #9e390e;
  }

 
  .header-container {
    display: flex;
    align-items: center;
    justify-content: center; /* Centre le contenu horizontalement */
    text-align: center; /* Centre le texte */
}

.custom-image {
    width: 100px;
    height: auto;
    margin-right: 10px ; /* Ajoutez de l'espace entre l'image et le texte */
}

.titrejulia{
    color: white;
    font-weight: bold;
    
}

.stat-title{
    color: white !important;
    font-weight: bold;
    font-size: medium;
}

.stat-text{
    color: white !important;
    font-size:medium
}

th a {
    color: #f2571d;
}

th a:link {
    color: #f2571d;
}

th a:active {
    color: #19192c;
}

th a:visited {
    color: #f2571d;
}

li a {
    color: #f2571d;;
}

li a:active {
    color: #f2571d;
}

.sayHello{
    color: #19192c;
    font-weight: bold;
    
}

.donut-content {
    width: 200px;
}

p.number {
    position: absolute;
    top: 120px;
    z-index: 99;
    right: 95px;
    font-size: 24px;
    font-weight: bolder;
    color: gray;
}

        /* Divider Styles */
        .divider-container {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 20px 0;
        }

        .divider-line {
            flex-grow: 1;
            border-top: 1px solid #ddd;
            margin: 0 10px;
        }

        .divider-text {
            font-size: 1rem;
            font-weight: bold;
            color: #fff;
        }

        /* Azure Login Button Style */
        .azure-login-btn {
            background-color: #0078d4;  /* Azure blue color */
            color: white;
            font-size: 16px;
            font-weight: bold;
            padding: 12px 24px;
            border-radius: 5px;
            border: none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            min-width: 344px;
            min-height: 50px;
            transition: background-color 0.3s;
            align-items: center;
            justify-content: center;
        }
       

        .azure-login-btn:hover {
            background-color: #005a9e;  /* Darker blue on hover */
            color: white;
            text-transform: none;
        }

        .azure-login-btn img {
            width: 20px;
            height: 20px;
        }

        .azure-login-btn:focus {
            outline: none;
        }


/* Customisation dashboard */

#phishing-data .page-body #phishing-donuts {
    /* gap: 14px; */
    flex-flow: row wrap;
    justify-content: flex-start !important;
}

#phishing-data .page-body #phishing-donuts .donut-content {
    flex: 0 0 auto;
    max-width: -moz-calc(20% - 13px);
    max-width: -webkit-calc(20% - 13px);
    max-width: calc(20% - 13px);
    width: 100%;
    margin: 6px;
}

#phishing-data .page-body #phishing-donuts .donut-content .card {
    min-height: 280px;
}

#phishing-data .page-body #phishing-donuts p.number {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: 100%;
    text-align: center;
}

#phishing-data .page-body #phishing-donuts .donut-content .card .apexcharts-legend {
    padding: 0;
}

#phishing-data .page-body #phishing-donuts .donut-content .card .apexcharts-legend.apx-legend-position-top .apexcharts-legend-series {
    margin: 0 0 14px 0;
}

#app>.no-gutters>.col {
    width: -moz-calc(100% - 350px);
    width: -webkit-calc(100% - 350px);
    width: calc(100% - 350px);
}

@media screen and (max-width:1366px) {
    #phishing-data .page-body #phishing-donuts .donut-content {
        max-width: -moz-calc(25% - 13px);
        max-width: -webkit-calc(25% - 13px);
        max-width: calc(25% - 13px);
    }
}

@media screen and (max-width:1280px) {
    #phishing-data .page-body #phishing-donuts .donut-content {
        max-width: -moz-calc(33.33% - 12px);
        max-width: -webkit-calc(33.33% - 12px);
        max-width: calc(33.33% - 12px);
    }
}

@media screen and (max-width:1024px) {
    #phishing-data .page-body #phishing-donuts .donut-content {
        max-width: -moz-calc(50% - 12px);
        max-width: -webkit-calc(50% - 12px);
        max-width: calc(50% - 12px);
    }
}

@media screen and (max-width:767px) {
    #phishing-data .page-body #phishing-donuts .donut-content {
        max-width: 100%;
    }
}

table.dataTable#phishing-data-table tr td:nth-child(5) {
    max-width: 180px;
    font-size: 14px;
}

/* Custom pagination styling */
.pagination {
    display: flex;
    justify-content: center;
    padding-left: 0;
    list-style: none;
}

.pagination .page-item {
    margin: 0 5px;
}

.pagination .page-item .page-link {
    color:#212529;
    border: 1px solid #ddd;
    padding: 8px 12px;
    text-decoration: none;
    border-radius: 4px;
}

.pagination .page-item.active .page-link {
    background-color:  #f2571d;
    color: #212529;
    border-color:  #f2571d;
}

.pagination .page-item.disabled .page-link {
    color: #6c757d;
    cursor: not-allowed;
    border-color: #ddd;
}
.timeline {
    position: relative;
    padding: 20px;
}
.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 48px;
    width: 2px;
    height: 100%;
    background: #dee2e6;
}
.timeline-item {
    position: relative;
    margin-bottom: 20px;
    padding-left: 70px;
}
.timeline-item .icon {
    position: absolute;
    width: 30px;
    height: 30px;
    left: 15px;
    top: 0;
    background: white;
    border-radius: 50%;
    padding: 5px;
    border: 2px solid #dee2e6;
}
.icon svg {
    width: 20px;
    height: 20px;
}