:root{
    --bs-border-radius-xxl: 1.4rem;
    --bs-light-bg-subtle: #f7f8f9;
    --bs-box-shadow-sm: 0 0.125rem 0.4rem rgba(0, 0, 0, 0.04);
    --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.6;
    --bs-link-color: #7185ff;
    --bs-link-color-rgb: 113, 133, 255;

    --bs-warning: #d75700;
    --bs-warning-rgb: 215, 87, 0;
    --bs-success: #00776a;
    --bs-success-rgb: 0, 119, 106;
    --bs-danger: #e7114f;
    --bs-danger-rgb: 231, 17, 79;
    --bs-info: #077189;
    --bs-info-rgb: 7, 113, 137;
    --bs-info-bg-subtle: #dbf0f3;
    --bs-light: #f1f2f5;
}

html{
    font-size: 15px;
}

/* FONT */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');


/* TYPO */

@media (min-width: 1200px){
    h1, .h1 {
        font-size: 2.4rem;
    }
}

h2, .h2 {
    font-size: 1.8rem;
}
h3, .h3 {
    font-size: 1.2rem;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
    font-weight: 600;
    margin-bottom: 1rem;
}

h4, .h4{
    font-size: 1.4rem;
}
h5, .h5{
    font-size: 1.1rem;
}

.subtitle{
    text-transform: uppercase;
    font-weight: 400;
    color: #31606d;
    font-size: 1.2rem;
}

/* CONTENT */

/* Table */

@media (min-width: 992px){
    .table > :not(caption) > * > * {
        padding: 1rem 1rem;
    }
}

/* sidebar */

.sidebar {
    min-height: 100vh;
    height: auto;
    background-color: #fff;
}

.sidebar .nav-pills .nav-link{
    border-radius: 0;
}

@media (min-width: 992px){
    .sidebar {
        position: sticky;
        top:0;
    }
}

/* FORM */

.dropdown-toggle {
    outline: 0;
}

.form-signin {
    max-width: 330px;
    padding: 1rem;
}
.form-signin input[type="email"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* switch */

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

.form-switch .form-check-input {
    height: 1.5em;
    width: 2.5em;
    margin-left: -3em;
    margin-top: 0;
}

/* COMPONENTS */

/* alert */

.alert{
    --bs-border-width: 0;    
}

/* buttons */

.btn-light {
    --bs-btn-bg: #d7d9db;
}

.badge{
    --bs-badge-padding-x: .85em;
    --bs-badge-padding-y: .5em;
    --bs-badge-font-size: .8em;
    --bs-badge-font-weight: 600;
}

/* card */

.card {
    --bs-card-spacer-y: 1.75rem;
    --bs-card-spacer-x: 1.75rem;
    --bs-card-border-width: 0;
    --bs-card-border-radius: var(--bs-border-radius-xxl);
    --bs-card-inner-border-radius: var(--bs-border-radius-xxl);
    --bs-card-box-shadow: var(--bs-box-shadow-sm);
    --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.09);
    --bs-card-cap-padding-y: .75rem;
    --bs-card-cap-padding-x: 1.25rem;
    box-shadow: var(--bs-card-box-shadow);
}

.hover-translate{
    transition: all ease .24s;
    display: inline-block;     
}

.hover-translate:hover{
    transform: translateX(12px);     
}

/* nav */

.nav {
    --bs-nav-link-color: var(--bs-black-rgb);
}
.nav-pills {
    --bs-nav-pills-link-active-bg: #7185ff;
}

/* UTILITIES */

/* colors */

.bg-warning{
    color: #8d3b09;
}

/* Circle progress */

@property --progress-value {
    syntax: '<integer>';
    inherits: false;
    initial-value: 0;
}

@keyframes html-progress {
    to { --progress-value: var(--progress); }
}

.circle-progress-bar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.circle-progress-bar:before {
    counter-reset: percentage var(--progress-value);
    content: counter(percentage) '%';
    animation: html-progress 2s 1 forwards;
    font-weight: 600;
}

.alert-light .circle-progress-bar,
.bg-light .circle-progress-bar {
    --context-bg-color: rgba(var(--bs-light-rgb));
}

.circle-progress-bar.blue {
    --context-bg-color: white;
    background:
            radial-gradient(closest-side, var(--context-bg-color) 79%, transparent 80% 100%),
            conic-gradient(#077e99 calc(var(--progress-value) * 1%), #c7e1e7 0);
    animation: html-progress 2s 1 forwards;
}
.circle-progress-bar.blue:before {
    color: #077e99;
}

.circle-progress-bar.pink {
    --context-bg-color: white;
    background:
            radial-gradient(closest-side, var(--context-bg-color) 79%, transparent 80% 100%),
            conic-gradient(#f32a58 calc(var(--progress-value) * 1%), #fbcdd7 0);
    animation: html-progress 2s 1 forwards;
}
.circle-progress-bar.pink:before {
    color: #f32a58;
}

/* Project */

@media (min-width: 1200px){
    .project-detail-card{
        position: sticky;
        top: 2rem;
    }
}

/* Customer */

.contact-links-wrapper{
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.contact-link{
    --bs-bg-opacity: 0.1;
    height: 40px;
    width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    transition: var(--bs-transition-base);
}
.contact-link:hover{
    --bs-bg-opacity: 1; 
    color: #fff;   
}

.contact-link-phone{
    background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity));
    color: rgb(var(--bs-success-rgb));
}

.contact-link-mail{
    background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity));
    color: rgb(var(--bs-info-rgb));
}

.text-avatar{
    background-color: var(--bs-light);
    height: 70px;
    width: 70px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 700;
    border-radius: 50%;
}

@media (min-width: 1200px){
    .customer-infos{
        position: sticky;
        top: 2rem;
    }
}

/* avatar */
.avatar {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #f0f0f0;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    text-transform: uppercase;
    text-decoration: none;
}