:root {
  --color-main: #5e17eb;
  --color-main-light: #8c6dcb;

  --color-success: #148c59;
  --color-success-light: #43a37a;

  --color-warning: #f18a1d;
  --color-warning-light: #f4a14a;

  --color-danger: #c1272d;
  --color-danger-light: #cd5257;

  --color-grey: #a1908c;



  --color-pie-main: #5e17eb;

  --color-pie-success: #148c59;
  --color-pie-success-light: #43a37a;

  --color-pie-warning: #f18a1d;
  --color-pie-warning-light: #f4a14a;

  --color-pie-danger: #c1272d;
  --color-pie-danger-light: #cd5257;

  --border-radius: 1.5em;
  --border-radius-light: 0.75em;
  --border-radius-thin: 0.25em;
  --border-color: #bbb;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: #eaeae9;
}


.btn-main {
  background-color: var(--color-main);
  color:white;
}
.btn-main:hover, .btn-main:active, .btn-main.active {
  background-color: var(--color-main-light);
}

.btn-success {
  background-color: var(--color-success);
  color:white;
}
.btn-success:hover, .btn-success:active, .btn-success.active {
  background-color: var(--color-success-light);
}

.btn-warning {
  background-color: var(--color-warning);
  color:white;
}
.btn-warning:hover, .btn-warning:active, .btn-warning.active {
  background-color: var(--color-warning-light);
}

.btn-danger {
  background-color: var(--color-danger);
  color:white;
}
.btn-danger:hover, .btn-danger:active, .btn-danger.active {
  background-color: var(--color-danger-light);
}


.txt-main {
  color: var(--color-main)!important;
}
.txt-success {
  color: var(--color-success)!important;
}
.txt-warning {
  color: var(--color-warning)!important;
}
.txt-danger {
  color: var(--color-danger)!important;
}
.txt-main-light {
  color: var(--color-main-light)!important;
}
.txt-success-light {
  color: var(--color-success-light)!important;
}
.txt-warning-light {
  color: var(--color-warning-light)!important;
}
.txt-danger-light {
  color: var(--color-danger-light)!important;
}
.txt-white {
  color: #fff!important;
}
.txt-black {
  color: #000!important;
}

.bg-main {
  background-color: var(--color-main)!important;
}
.bg-success {
  background-color: var(--color-success)!important;
}
.bg-warning {
  background-color: var(--color-warning)!important;
}
.bg-danger {
  background-color: var(--color-danger)!important;
}
.bg-main-light {
  background-color: var(--color-main-light)!important;
}
.bg-success-light {
  background-color: var(--color-success-light)!important;
}
.bg-warning-light {
  background-color: var(--color-warning-light)!important;
}
.bg-danger-light {
  background-color: var(--color-danger-light)!important;
}

.border-main , .border-success, .border-warning, .border-danger {
  border: 1px solid;
}
.border-main {
  border-color: var(--color-main)!important;
}
.border-success {
  border-color: var(--color-success)!important;
}
.border-warning {
  border-color: var(--color-warning)!important;
}
.border-danger {
  border-color: var(--color-danger)!important;
}
.border-main-light {
  border-color: var(--color-main-light)!important;
}
.border-success-light {
  border-color: var(--color-success-light)!important;
}
.border-warning-light {
  border-color: var(--color-warning-light)!important;
}
.border-danger-light {
  border-color: var(--color-danger-light)!important;
}


body {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}


/* MARGINS */
/* MARGINS */
/* MARGINS */
.mb-1, .my-1 {
  margin-bottom: 1em;
}
.mb-2, .my-2 {
  margin-bottom: 1.5em;
}
.mb-3, .my-3 {
  margin-bottom: 2em;
}
.mb-4, .my-4 {
  margin-bottom: 2.5em;
}
.mb-5, .my-5 {
  margin-bottom: 3em;
}

.mt-1, .my-1 {
  margin-top: 1em;
}
.mt-2, .my-2 {
  margin-top: 1.5em;
}
.mt-3, .my-3 {
  margin-top: 2em;
}
.mt-4, .my-4 {
  margin-top: 2.5em;
}
.mt-5, .my-5 {
  margin-top: 3em;
}



/* bloc size */
/* bloc size */
/* bloc size */
.w-25 {
  width: 25%;
}
.w-50 {
  width: 50%;
}
.w-75 {
  width: 75%;
}
.w-100 {
  width: 100%;
}
.w-auto {
  width: auto;
  flex-grow: 1;
}





/* cards */
/* cards */
/* cards */
.card {
  border: 1px solid;
  border-color: var(--border-color);
  border-radius: var(--border-radius);
}
.card > .card-header,
.card > .card-body,
.card > .card-footer {
  padding: 15px;
}
.card > .card-header:not(:last-child),
.card > .card-body:not(:last-child),
.card > .card-footer:not(:last-child) {
  /*margin-bottom: 15px;*/
  border-bottom: 1px solid;
  border-color: var(--border-color);
}

.card .card-header {
  font-weight: bold;
  font-size: 1.2em;
}

.card .card-footer {
  font-style: italic;
  font-size: 0.8em;
}



/* pills */
/* pills */
/* pills */
.pill {
  padding: 3px 5px;
  font-size: 0.7em;
  border-radius: var(--border-radius);
}







/* other */
/* other */
/* other */
.font-weight-normal {
  font-weight: normal;
}
.font-weight-bold {
  font-weight: bold;
}