: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-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-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);
}
.txt-success {
	color: var(--color-success);
}
.txt-warning {
	color: var(--color-warning);
}
.txt-danger {
	color: var(--color-danger);
}
.txt-main-light {
	color: var(--color-main-light);
}
.txt-success-light {
	color: var(--color-success-light);
}
.txt-warning-light {
	color: var(--color-warning-light);
}
.txt-danger-light {
	color: var(--color-danger-light);
}
.txt-white {
	color: #fff;
}
.txt-black {
	color: #000;
}

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

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


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%;}





/* 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;}