/* ==========================================================
   ENSEMBLE
   Style principal
   ========================================================== */

:root{

    --primary:#0D6E8B;
    --primary-dark:#083B4C;
    --secondary:#27AE60;

    --white:#FFFFFF;
    --light:#F8F9FA;

    --text:#2d3748;

    --glass:rgba(255,255,255,.18);
    --glass-border:rgba(255,255,255,.25);

    --shadow:0 25px 60px rgba(0,0,0,.35);

    --radius:25px;

}

*{

    box-sizing:border-box;

}

html,
body{

    height:100%;
    margin:0;

    font-family:
    "Segoe UI",
    sans-serif;

}

/**************************************************
FOND
**************************************************/

body{

    background:#eef3f5;

}

body.login-page,
body.home-page,
body.reset-page{

    background:url("../photos/img_acc.png") center center;
    background-size:cover;
    background-repeat:no-repeat;

}

.overlay{

    position:fixed;

    inset:0;

    background:linear-gradient(
        rgba(7,33,42,.78),
        rgba(7,33,42,.62)
    );

    z-index:0;

}

/**************************************************
CONTENU
**************************************************/

.content{

    position:relative;

    z-index:1;

}

/**************************************************
CARTE VERRE
**************************************************/

.glass{

    background:var(--glass);

    backdrop-filter:blur(15px);

    border:1px solid var(--glass-border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    color:white;

}

/**************************************************
LOGO
**************************************************/

.logo{

    width:130px;

    max-width:100%;

}

/**************************************************
TITRES
**************************************************/

h1,h2,h3,h4{

    font-weight:700;

}

.text-white-soft{

    color:rgba(255,255,255,.85);

}

/**************************************************
FORMULAIRES
**************************************************/

.form-control{

    background: #f8fafc;
    border: 1px solid #ced4da;
    border-radius: 10px;

    color: #212529;

    padding:14px;

}

.form-control::placeholder{

    color:rgba(255,255,255,.70);
	border-color: #6c757d;

}

.form-control:focus{

    background:rgba(255,255,255,.25);

    color: #252129;

    box-shadow:none;
	background: #ffffff;
    border-color: #0d6efd;
    box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);

}

.form-label {
    font-weight: 600;
    color: #495057;
    margin-bottom: .5rem;
}

/**************************************************
BOUTONS
**************************************************/

.btn-main{

    background:var(--secondary);

    border:none;

    border-radius:50px;

    padding:14px;

    color:white;

    font-weight:600;

    transition:.3s;

}

.btn-main:hover{

    background:#1d8b4d;

    color:white;

    transform:translateY(-2px);

}

.btn-outline-light{

    border-radius:50px;

}

/**************************************************
PROGRESS
**************************************************/

.progress{

    height:8px;

    border-radius:20px;

    overflow:hidden;

    background:rgba(255,255,255,.20);

}

.progress-bar{

    background:var(--secondary);

}

/**************************************************
ALERTES
**************************************************/

.alert{

    border-radius:15px;

}

/**************************************************
FOOTER
**************************************************/

.footer{

    position:absolute;

    bottom:15px;

    width:100%;

    text-align:center;

    color:white;

    font-size:.90rem;

}

/**************************************************
ANIMATIONS
**************************************************/

.fade-in{

    animation:fadeIn .8s;

}

@keyframes fadeIn{

    from{

        opacity:0;
        transform:translateY(35px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/**************************************************
LIENS
**************************************************/

a{

    color:#bfeee1;

    text-decoration:none;

}

a:hover{

    color:white;

}

/**************************************************
DASHBOARD
**************************************************/

.sidebar{

    width:260px;

}

.card{

    border:none;

    border-radius:18px;

    box-shadow:0 5px 18px rgba(0,0,0,.08);

}

.table{

    vertical-align:middle;

}

/**************************************************
RESPONSIVE
**************************************************/

@media(max-width:768px){

.logo{

    width:90px;

}

.glass{

    padding:25px !important;

}

}

.card-custom {
    border: 0;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    background: #fff;
}

/**************************************************
INPUT GROUP
**************************************************/

.input-group-text{

    background:rgba(255,255,255,.15);
    border:none;
    color:white;

}

.input-group .form-control{

    border-left:none;

}

.input-group{

    box-shadow:none;

}

/**************************************************
LOGIN
**************************************************/

.login-page .glass{

    max-width:520px;

}
/*==================================================
SIDEBAR
==================================================*/

.sidebar-header{
    padding:15px;
}

.sidebar-logo{
    max-width:130px;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 270px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #083B4C;
}

.sidebar-menu {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 15px;
}

.sidebar-user {
    flex: 0 0 auto;
    padding: 20px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.sidebar-link{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 14px;
    margin-bottom:2px;
    font-size:15px;
}

.sidebar-link i{
    font-size:18px;
}

.sidebar-link:hover{

    background:#0D6E8B;

    color:white;

}

.sidebar-link.active{

    background:#27AE60;

    color:white;

    font-weight:600;

}

.sidebar-user{

    padding:20px;

    border-top:1px solid rgba(255,255,255,.08);

    display:flex;

    align-items:center;

    gap:15px;

}

.avatar{

    width:46px;

    height:46px;

    border-radius:50%;

    background:#27AE60;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:bold;

    color:white;

}

/*==================================================
TOPBAR
==================================================*/

.topbar{

    height:80px;

    background:#fff;

    border-bottom:1px solid #e9ecef;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 30px;

    position:sticky;

    top:0;

    z-index:999;

}

.flex-grow-1{

    margin-left:270px;

    min-height:100vh;

    background:#f5f7fa;

}

.avatar-small{

    width:35px;

    height:35px;

    border-radius:50%;

    background:#0D6E8B;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:bold;

}

.dropdown-menu{

    border:none;

    border-radius:12px;

}

.dropdown-item{

    padding:.75rem 1rem;

}
.page-header{
    display:flex;
    align-items:center;
}

.software-subtitle{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:8px;
    font-size:.9rem;
    color:#6c757d;
}

.software-name{
    background:linear-gradient(135deg,#0D6E8B,#27AE60);
    color:#fff;
    padding:5px 14px;
    border-radius:30px;
    font-size:.75rem;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
}
/*==================================================
UTILISATEUR SIDEBAR
==================================================*/

.sidebar-user{
    color:#fff;
}

.sidebar-user strong{
    color:#fff;
    display:block;
    font-size:15px;
    font-weight:600;
}

.sidebar-user small{
    color:rgba(255,255,255,.75);
    font-size:13px;
}

.avatar{
    color:#fff;
}

/* ===========================
   Sidebar responsive
=========================== */

@media (max-width:991.98px){

    .sidebar{

        position:fixed;
        top:0;
        left:-270px;

        width:270px;
        height:100vh;

        transition:left .25s ease;

        z-index:1055;

    }

    .sidebar.show{

        left:0;

    }

    .flex-grow-1{

        margin-left:0;
        width:100%;

    }

    .topbar{

        padding:0 15px;

    }

    .page-header h3{

        font-size:1.2rem;

    }

    .software-subtitle{

        display:none;

    }

}
.notification-item{
    transition:background .2s ease;
}

.notification-item:hover{
    background:#f5f7fa;
    text-decoration:none;
}

.notification-item{
    cursor:pointer;
}