/* ==========================================================
   DIGIETATFIN - DOCUMENTATION
   ========================================================== */

:root{

    --primary:#4897a8;
    --primary-dark:#3d8291;
    --primary-light:#e8f4f7;

    --success:#198754;
    --warning:#ffc107;
    --danger:#dc3545;

    --text:#343a40;
    --muted:#6c757d;

    --border:#e9ecef;

}

/* ==========================================================
   GENERAL
   ========================================================== */

body{

    color:var(--text);

    background:#f8f9fa;

}

section{

    scroll-margin-top:90px;

}

h1,h2,h3,h4,h5{

    font-weight:700;

}

.lead{

    color:var(--muted);

}

/* ==========================================================
   HERO
   ========================================================== */

.hero-documentation{

    background:linear-gradient(135deg,#ffffff,var(--primary-light));

}

.hero-documentation h1{

    color:var(--primary);

}

.hero-documentation .input-group{

    border-radius:12px;

    overflow:hidden;

}

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

.sticky-top{

    z-index:100;

}

.card{

    border:none;

    border-radius:16px;

    transition:.25s ease;

}

.card:hover{

    transform:translateY(-3px);

}

.card-header{

    font-weight:600;

}

.list-group-item{

    border:none;

    padding:.75rem 1rem;

    transition:.2s;

}

.list-group-item:hover{

    background:var(--primary-light);

    color:var(--primary);

    border-radius:8px;

}

.list-group-item.active{

    background:var(--primary);

    border-color:var(--primary);

}

/* ==========================================================
   BUTTONS
   ========================================================== */

.btn-primary{

    background:var(--primary);

    border-color:var(--primary);

}

.btn-primary:hover{

    background:var(--primary-dark);

    border-color:var(--primary-dark);

}

.btn-outline-primary{

    color:var(--primary);

    border-color:var(--primary);

}

.btn-outline-primary:hover{

    background:var(--primary);

    color:white;

}

/* ==========================================================
   TABLES
   ========================================================== */

.table{

    vertical-align:middle;

}

.table thead{

    background:var(--primary-light);

}

.table th{

    color:var(--primary);

}

.table-hover tbody tr:hover{

    background:#f3fbfc;

}

/* ==========================================================
   ALERTS
   ========================================================== */

.alert{

    border:none;

    border-left:5px solid var(--primary);

    border-radius:10px;

}

.alert-warning{

    border-left-color:var(--warning);

}

.alert-success{

    border-left-color:var(--success);

}

.alert-danger{

    border-left-color:var(--danger);

}

/* ==========================================================
   ACCORDION
   ========================================================== */

.accordion-item{

    border:none;

    margin-bottom:12px;

    border-radius:10px;

    overflow:hidden;

}

.accordion-button{

    font-weight:600;

}

.accordion-button:not(.collapsed){

    background:var(--primary-light);

    color:var(--primary);

}

.accordion-button:focus{

    box-shadow:none;

}

/* ==========================================================
   ICONS
   ========================================================== */

.display-4,
.display-5{

    color:var(--primary);

}

/* ==========================================================
   BADGES
   ========================================================== */

.badge.bg-primary{

    background:var(--primary)!important;

}

/* ==========================================================
   TIMELINE / STEPS
   ========================================================== */

.step-circle{

    width:55px;

    height:55px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:bold;

    margin:auto;

}

/* ==========================================================
   SEARCH BOX
   ========================================================== */

input[type="search"],
input[type="text"]{

    border-radius:10px;

}

input:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 .15rem rgba(72,151,168,.20);

}

/* ==========================================================
   LINKS
   ========================================================== */

a{

    color:var(--primary);

    text-decoration:none;

}

a:hover{

    color:var(--primary-dark);

}

/* ==========================================================
   CODE
   ========================================================== */

pre{

    background:#212529;

    color:#f8f9fa;

    padding:20px;

    border-radius:10px;

    overflow:auto;

}

code{

    color:#d63384;

}

/* ==========================================================
   BLOCKQUOTE
   ========================================================== */

blockquote{

    border-left:4px solid var(--primary);

    padding-left:20px;

    color:var(--muted);

}

/* ==========================================================
   FAQ
   ========================================================== */

.accordion-body{

    background:#fff;

}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:992px){

    .sticky-top{

        position:relative!important;

        top:0!important;

    }

}

@media(max-width:768px){

    h1{

        font-size:2rem;

    }

    h2{

        font-size:1.7rem;

    }

    .display-4{

        font-size:2.8rem;

    }

    .display-5{

        font-size:2.3rem;

    }

    .table{

        font-size:.9rem;

    }

}

@media(max-width:576px){

    .card{

        border-radius:12px;

    }

    .btn{

        width:100%;

        margin-bottom:10px;

    }

}