:root {
    --violet:       #4100ad;
    --pearl:        #4abcd4;
    --blanc-cassé:  #f2f3f4;
    --gris:         #c0c1c2;
    --violet-soft:  #cfb7f5;
    --pearl-soft:   #cce6ef;
    --app-text:     #1f2937;
}

/* TYPOS */
.font-outfit-semibold {
    font-family:            "Outfit", sans-serif;
    font-optical-sizing:    auto;
    font-weight:            600;
    font-style:             normal;
}
.font-outfit-extralight {
    font-family:            "Outfit", sans-serif;
    font-optical-sizing:    auto;
    font-weight:            200;
    font-style:             normal;
}
.text-pearl {
    color:                  var(--pearl);
}
.text-violet {
    color:                  var(--violet);
}
.text-active {
    font-weight:            bold;
    color:                  var(--violet);
}
.text-app {
    color:                  var(--app-text);
}
.text-gris {
    color:                  var(--gris);
}
.text-bc {
    color:                  var(--blanc-cassé);
}
.form-label, .form-check-label {
    font-family:        "Outfit", sans-serif;
}


/* CORPS */
body {
    min-height:         100vh;
    background-color:   var(--blanc-cassé);
    color:              var(--app-text);
    font-family:        "Arial", sans-serif;
}
.main-container {
    width:              min(1400px, calc(100% - 2rem));
    margin:             2rem auto;
}
.page-superheader {
    margin-bottom:          1em;
}
.page-header {
    display:                flex;
    flex-direction:         row;
    justify-content:        space-between;
    align-items:            center;
    margin-bottom:          1em;
}
.page-title {
    font-family:            "Outfit", sans-serif;
    font-optical-sizing:    auto;
    font-weight:            600;
    font-style:             normal;
    color:                  var(--gris);
}
.page-subtitle {
    font-family:            "Outfit", sans-serif;
    font-optical-sizing:    auto;
    font-weight:            600;
    font-style:             normal;
}
.card-title {
    font-family:            "Outfit", sans-serif;
    font-optical-sizing:    auto;
    font-weight:            600;
    font-style:             normal;
}



/* NAVIGATION */
.navbar {
    background-color:   #ffffff !important;
}
.navbar a, .nav-link {
    color:       var(--app-text);
}
.navbar-brand img {
    height:     30px;
    width:      auto;
}
a {
    color: var(--app-text);
}



/* CORRECTIONS BOOTSTRAP */
.card, .nav-link.active, .nav-tabs {
    border: none;
}
.nav-link.active {
    color:      var(--violet) !important;
}
.nav-link {
    color: var(--gris);
}
.nav-link:hover {
    color: var(--app-text);
}


/* CLASSES WIDGETS */
.drag-handle {
    cursor:         grab;
    user-select:    none;
    font-size:      1.5em;
}
.drag-handle:active {
    cursor: grabbing;
}
.cursor-pointer {
    cursor: pointer;
}
.card-hrow {
    display:        flex;
    flex-direction: row;
    align-items:    center;
}
.card-hrow, .card-caption {
    margin-bottom:  2em;
}
.card-ctarow {
    display:        flex;
    flex-direction: row;
}
.card-ctarow-element {
    margin-right:   1em;
}


/* BTN */
.btn {
    font-family:        "Outfit", sans-serif;
    border:             none;
}


/* BTN PRIMARY */
.btn-primary, .btn-primary:hover, .btn-primary:focus {
    border:             1px solid var(--violet);
}
.btn-primary, .btn-primary:focus {
    background-color:   var(--violet);
    color:              #ffffff;
}
.btn-primary:hover {
    background-color:   #ffffff;
    color:              var(--violet);
}
.btn-primary-outline {
    background:         none;
    border-color:       var(--violet);
    color:              var(--violet);
    border: 1px solid   var(--violet);
}
.btn-primary-outline:hover {
    background-color:   var(--violet);
    color:              #ffffff;
}
.btn-primary:disabled {
    border:             1px solid var(--violet-soft);
    background-color:   var(--violet-soft);
}


/* BTN SECONDARY */
.btn-secondary, .btn-secondary:hover, .btn-secondary:focus {
    border:             1px solid var(--pearl);
}
.btn-secondary, .btn-secondary:focus {
    background-color:   var(--pearl);
    color:              #ffffff;
}
.btn-secondary:hover {
    background-color:   #ffffff;
    color:              var(--pearl);
}
.btn-secondary-outline {
    background:         none;
    border-color:       var(--pearl);
    color:              var(--pearl);
    border: 1px solid   var(--pearl);
}
.btn-secondary-outline:hover {
    background-color:   var(--pearl);
    color:              #ffffff;
}

.btn-neutral, .btn-neutral:hover, .btn-neutral:focus {
    border:             1px solid var(--app-text)
}
.btn-neutral, .btn-neutral:focus {
    background-color:   var(--app-text);
    color:              #ffffff;
}
.btn-neutral:hover {
    background-color:   #ffffff;
    color:              var(--app-text)
}

/* BADGES */
.badge {
    border-radius:  0.55rem;
    padding:        0.45em 0.65em;
    font-weight:    700;
}
.badge-app-primary {
    background-color:   var(--violet) !important;
    color:              white;
}
.badge-app-neutral {
    background-color:   #000000;
    color:              #ffffff;
}
.badge-app-grey {
    background-color: var(--gris);
    color:              #ffffff;
}
.badge-soft-primary {
    color:              var(--violet);
    background:         var(--violet-soft);
    text-decoration: none;
}
.badge-soft-secondary {
    color:              var(--pearl);
    background:         var(--pearl-soft);
    text-decoration:    none;
}
.badge-soft-success {
    color:              #15803d;
    background:         #dcfce7;
}
.badge-soft-warning {
    color:              #b45309;
    background:         #fef3c7;
}
.badge-soft-danger {
    color:              #b91c1c;
    background:         #fee2e2;
}

/* FORM */
.form-control, .form-select {

}


/* BUREAU */
.card-bureau {
    height: 200px;
    padding: 1em;
    margin-right: 2em;
}