:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --color-success:#a0d3e8;
  --text-color-success:#626262;
  --color-default:white;
  --text-color-default:grey;
  --color-error:#C3232D;
  --text-color-error:white;
  --color-info:#dfdff7;
  --text-color-info:#7d7d8e;
  --color-warning:orange;
  --text-color-warning:orange;
  --color-grey:#e4e4e4;
  --text-color-grey:#5c5c5c;
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(359deg);
    }
}

i.material-icons.updating, i.material-icons.rotate { -webkit-animation: rotation 2s infinite linear; }

/* Alignement de l'icone si utilisation dans une chip*/
.chip .material-icons { vertical-align: text-bottom; } 
.chip > .badge {float: right; margin: 0 -12px 0 8px; height: 32px; min-width: 32px; border-radius: 16px; line-height: 32px; background-color: var(--text-color-grey);
 color: var(--color-grey); font-size:0.9rem;}

/* tabs */
.tabs .tab a .badge, .tabs .tab a .badge { background-color:rgba(238,110,115,0.7); color:white; }
.tabs .tab a:hover .badge, .tabs .tab a.active .badge { background-color:#ee6e73; color:white; }

.tabs.flex-grow-1 {width:auto;}

/* form */
form span.help {float:right; color:grey; font-size: 0.7rem; }

/* collection item using collapsible header */
.collection.collapsible .collection-item > .collapsible-header { border:none; padding:0; }
.collection .collection-item > .d-flex > *, .collection .collection-header.d-flex > *  { margin:5px; }
.collection.collapsible .collection-item > .collapsible-header .chip { margin:0; }
.collection.collapsible .collection-item > .collapsible-header i {width:auto; margin:0px;font-size: initial; }
.collection.collapsible .collection-item.active > .collapsible-header { background-color:#f5f5f5; }
.collection.collapsible .collection-item.active { background-color:#f5f5f5; color:#272727; }
.collection.collapsible .collection-item.active .collapsible-body {margin:5px; padding:0px; border-bottom:none; border-top:1px solid #ddd;}

.alert.alert-default {color:var(--text-color-default); background-color:var(--color-default);}
.alert.alert-success {color:var(--text-color-success); background-color:var(--color-success);}
.alert.alert-error {color:var(--text-color-error); background-color:var(--color-error);}
.alert.alert-info {color:var(--text-color-info); background-color:var(--color-info);}
.alert.alert-warning {color:var(--text-color-warning); background-color:var(--color-warning);}







/* Helpers Margin & Padding */
.ml-auto, .mx-auto, .m-auto { margin-left: auto !important; }
.mr-auto, .mx-auto, .m-auto { margin-right: auto !important; }
.mt-auto, .my-auto, .m-auto { margin-top: auto !important; }
.mb-auto, .my-auto, .m-auto { margin-bottom: auto !important; }


.mt-0, .m-0, .my-0 { margin-top:0px !important; }
.mt-1, .m-1, .my-1 { margin-top:var(--space-1) !important; }
.mt-2, .m-2, .my-2 { margin-top:var(--space-2) !important; }
.mt-3, .m-3, .my-3 { margin-top:var(--space-3) !important; }
.mt-4, .m-4, .my-4 { margin-top:var(--space-4) !important; }
.mt-5, .m-5, .my-5 { margin-top:var(--space-5) !important; }

.mb-0, .m-0, .my-0 { margin-bottom:0px !important; }
.mb-1, .m-1, .my-1 { margin-bottom:var(--space-1) !important; }
.mb-2, .m-2, .my-2 { margin-bottom:var(--space-2) !important; }
.mb-3, .m-3, .my-3 { margin-bottom:var(--space-3) !important; }
.mb-4, .m-4, .my-4 { margin-bottom:var(--space-4) !important; }
.mb-5, .m-5, .my-5 { margin-bottom:var(--space-5) !important; }

.ml-0, .m-0, .mx-0 { margin-left:0px !important; }
.ml-1, .m-1, .mx-1 { margin-left:var(--space-1) !important; }
.ml-2, .m-2, .mx-2 { margin-left:var(--space-2) !important; }
.ml-3, .m-3, .mx-3 { margin-left:var(--space-3) !important; }
.ml-4, .m-4, .mx-4 { margin-left:var(--space-4) !important; }
.ml-5, .m-5, .mx-5 { margin-left:var(--space-5) !important; }

.mr-0, .m-0, .mx-0 { margin-right:0px !important; }
.mr-1, .m-1, .mx-1 { margin-right:var(--space-1) !important; }
.mr-2, .m-2, .mx-2 { margin-right:var(--space-2) !important; }
.mr-3, .m-3, .mx-3 { margin-right:var(--space-3) !important; }
.mr-4, .m-4, .mx-4 { margin-right:var(--space-4) !important; }
.mr-5, .m-5, .mx-5 { margin-right:var(--space-5) !important; }

.pt-0, .p-0, .py-0 { padding-top:0px !important; }
.pt-1, .p-1, .py-1 { padding-top:var(--space-1) !important; }
.pt-2, .p-2, .py-2 { padding-top:var(--space-2) !important; }
.pt-3, .p-3, .py-3 { padding-top:var(--space-3) !important; }
.pt-4, .p-4, .py-4 { padding-top:var(--space-4) !important; }
.pt-5, .p-5, .py-5 { padding-top:var(--space-5) !important; }

.pb-0, .p-0, .py-0 { padding-bottom:0px; }
.pb-1, .p-1, .py-1 { padding-bottom:var(--space-1) !important; }
.pb-2, .p-2, .py-2 { padding-bottom:var(--space-2) !important; }
.pb-3, .p-3, .py-3 { padding-bottom:var(--space-3) !important; }
.pb-4, .p-4, .py-4 { padding-bottom:var(--space-4) !important; }
.pb-5, .p-5, .py-5 { padding-bottom:var(--space-5) !important; }

.pl-0, .p-0, .px-0 { padding-left:0px !important; }
.pl-1, .p-1, .px-1 { padding-left:var(--space-1) !important; }
.pl-2, .p-2, .px-2 { padding-left:var(--space-2) !important; }
.pl-3, .p-3, .px-3 { padding-left:var(--space-3) !important; }
.pl-4, .p-4, .px-4 { padding-left:var(--space-4) !important; }
.pl-5, .p-5, .px-5 { padding-left:var(--space-5) !important; }

.pr-0, .p-0, .px-0 { padding-right:0px !important; }
.pr-1, .p-1, .px-1 { padding-right:var(--space-1) !important; }
.pr-2, .p-2, .px-2 { padding-right:var(--space-2) !important; }
.pr-3, .p-3, .px-3 { padding-right:var(--space-3) !important; }
.pr-4, .p-4, .px-4 { padding-right:var(--space-4) !important; }
.pr-5, .p-5, .px-5 { padding-right:var(--space-5) !important; }

/* Helpers d-flex positionning */
.d-flex { display: -ms-flexbox !important; display: flex !important; }


.flex-row            { flex-direction: row !important; }
.flex-column         { flex-direction: column !important; }
.flex-row-reverse    { flex-direction: row-reverse !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }
.flex-wrap         { flex-wrap: wrap !important; }
.flex-nowrap       { flex-wrap: nowrap !important; }
.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }
.flex-fill         { flex: 1 1 auto !important; }
.flex-grow-0       { flex-grow: 0 !important; }
.flex-grow-1       { flex-grow: 1 !important; }
.flex-shrink-0     { flex-shrink: 0 !important; }
.flex-shrink-1     { flex-shrink: 1 !important; }

.justify-content-start   { justify-content: flex-start !important; }
.justify-content-end     { justify-content: flex-end !important; }
.justify-content-center  { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around  { justify-content: space-around !important; }

.align-content-start   { align-content: flex-start !important; }
.align-content-end     { align-content: flex-end !important; }
.align-content-center  { align-content: center !important; }
.align-content-between { align-content: space-between !important; }
.align-content-around  { align-content: space-around !important; }
.align-content-stretch { align-content: stretch !important; }

.align-items-start { -ms-flex-align: start !important; align-items: flex-start !important; }
.align-items-center { -ms-flex-align: center !important; align-items: center !important; }
.align-items-center { -ms-flex-align: center !important; align-items: center !important; }
.align-items-baseline { -ms-flex-align: baseline !important; align-items: baseline !important; }
.align-items-stretch { -ms-flex-align: stretch !important; align-items: stretch !important; }

.align-self-start { -ms-flex-item-align: start !important; align-self: flex-start !important; }
.align-self-end { -ms-flex-item-align: end !important; align-self: flex-end !important; }
.align-self-center { -ms-flex-item-align: center !important; align-self: center !important; }
.align-self-baseline { -ms-flex-item-align: baseline !important; align-self: baseline !important; }
.align-self-stretch { -ms-flex-item-align: stretch !important; align-self: stretch !important; }

/* Width & Height */
.w-100p { width:100px; }
.w-150p { width:150px; }
.w-200p { width:200px; }
.w-300p { width:300px; }

.w-5pe {width:5%;}
.w-10pe {width:10%;}
.w-25pe {width:25%;}
.w-33pe {width:33.33333%;}
.w-50pe {width:50%;}
.w-60pe {width:66.6666%;}
.w-66pe {width:66.6666%;}
.w-75pe {width:75%;}
.w-100pe {width:100%;}
.w-auto {width:auto;}

.overflow-x-h, .overflow-h {overflow-x: hidden;}
.overflow-y-h, .overflow-h {overflow-y: hidden;}

.overflow-x-s, .overflow-s {overflow-x: scroll;}
.overflow-y-s, .overflow-s {overflow-y: scroll;}


/* Borders */
.br-0, .b-0 {border-right:none !important;}
.bl-0, .b-0 {border-left:none !important;}
.bt-0, .b-0 {border-top:none !important;}
.bb-0, .b-0 {border-bottom:none !important;}


.br-1, .b-1 {border-right:1px solid #ddd !important;}
.bl-1, .b-1 {border-left:1px solid #ddd !important;}
.bt-1, .b-1 {border-top:1px solid #ddd !important;}
.bb-1, .b-1 {border-bottom:1px solid #ddd !important;}