:root {
    --font-oswald: 'Oswald', sans-serif;
    --font-open-sans: 'Open Sans', sans-serif;
    --font-extra-bold: 900;
    --font-bold: 700;
    --font-semi-bold: 600;
    --font-regular: 400;
    --font-light: 300;
    --font-light-italic: 300i;
    --color-black: #000000;
    --color-white: #ffffff;
    --color-off-white: #FAFAFA;
    --color-adviz: #84B760;
    --color-dark: #404041;
    --color-vert: rgba(132, 183, 96, 0.24);
    --color-light: #EAE8E8;
    --duration: 0.4s;
  }

body {
    font-family: var(--font-open-sans);
    font-size: 18px;
}

.admin {
    font-weight: 300;
}

h1,
h2 {
    font-family: var(--font-oswald);
    font-weight: var(--font-regular);
    text-transform: uppercase;
}

h1 {
    font-size: 3rem;
    color: var(--color-dark);
}

.app h1 {
    text-align: center;
}

.admin h1 {
    text-align: left;
}

h2 {
    font-size: 2rem;
    color: var(--color-adviz);
    text-align: center;
}

h3,
h4,
h5,
h6 {
    font-family: var(--font-open-sans);
    font-weight: var(--font-bold);
    color: var(--color-dark);
}

h5.card-title {
    font-weight: 400;
    text-transform: uppercase;
    font-size: 1.3rem;
    color: var(--color-adviz);
    line-height: 160%;
}

a,
a:hover,
a:focus {
    color: var(--color-adviz);
}

.btn-link,
.btn-link:hover,
.btn-link:focus {
    color: var(--color-adviz);
}

/* tableau réponse au questionnaire */

.card.ctn-form,
.ctn-form .card {
    border: none;
}

.ctn-form {
    background-color: var(--color-off-white);
    padding: 20px;
}

.ctn-form h3 {
    margin-bottom: 20px;
}

.ctn-form .card {
    background-color: var(--color-off-white);
}

.app .list-group-item {
    background-color: var(--color-off-white);
}
  
.ctn-form .form-control,
.ctn-form .custom-select {
    font-size: 18px;
    font-weight: 300;
    border: none;
    background-color: white;
}

.table thead th {
    color: var(--color-dark);
}

.tab-head {
    padding-bottom: 0;
}

.nav-tabs {
   border-color: var(--color-off-white);
}

.nav-tabs .nav-link {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

.nav-tabs .nav-link {
    border-bottom: none;
}

.nav-tabs .nav-item.show .nav-link, 
.nav-tabs .nav-link.active{
    background-color: #fafafa;
    border-color: var(--color-off-white);
}

.nav-tabs .nav-link:focus, 
.nav-tabs .nav-link:hover {
    border-bottom: none;
}

.card {
    border-radius: 2px;
}

.tab-pane {
    padding-top: 0;
}

.form-control,
.custom-select {
    border-radius: 2px;
}

/* styles de boutons */

.btn-principal {
    background-color: var(--color-dark);
    color: white;
    border-radius: 2px;
    padding: 12px 23px;
    font-size: 1.1em;
    font-weight: 500;
}

.btn-principal:hover {
    background-color: var(--color-adviz);
    color: white;
}

.btn-2 {
    background-color: var(--color-adviz);
    color: white;
    border-radius: 2px;
    padding: 10px 17px;
}

.btn-2:hover {
    background-color: var(--color-dark);
    color: white;
}

.btn-2-noir {
    background-color: var(--color-dark);
    color: white;
    border-radius: 2px;
    padding: 10px 17px;
}

.btn-2-noir:hover {
    background-color: var(--color-adviz);
    color: white;
}

.btn-3 {
    border: 1px solid var(--color-adviz);
    border-radius: 2px;
    color: var(--color-adviz);
}

.btn-3:hover {
    background-color: var(--color-adviz);
    color: white;
}

.btn-voir {
    border-radius: 2px;
    background-color: var(--color-vert);
    color: var(--color-adviz);
}

.btn-voir:hover {
    background-color: var(--color-adviz);
    color: white;
}

.btn-modifier {
    border-radius: 2px;
    background-color: var(--color-adviz);
    color: white;
}

.btn-modifier:hover {
    background-color: var(--color-dark);
    color: white;
}

.btn-supprimer {
    background-color: var(--color-dark);
    border-radius: 2px;
    color: white;
}

.btn-supprimer:hover {
    background-color: var(--color-adviz);
    color: white;
}

.btn-action {
    border-radius: 2px;
    background-color: var(--color-light);
    color: var(--color-dark);
}

.btn-action:hover {
    background-color: var(--color-dark);
    color: white;
}