@charset "ISO-8859-1";
@import url(material/theme.css);

:root {
	--material-: 16px;
	--material-padding: 16px;
	--material-padding-between: 24px;
	--material-icon-size: 24px;
	
	--material-padding-between-cards: 8px;
	
	--md-sys-shape-corner-medium: 12px;
}

.material-top-app-bar {
	height: 64px;
	padding-right: var(--material-padding);
	padding-left: var(--material-padding);

	align-items: center;	
	display: flex;
	flex-wrap: wrap;
	gap: var(--material-padding-between);
	
  	background-color: var(--md-sys-color-surface);
  	color: var(--md-sys-color-on-surface);
}

.material-bottom-app-bar {
	height: 64px;
	padding-right: var(--material-padding);
	padding-left: var(--material-padding);

	align-items: center;	
	display: flex;
	flex-wrap: wrap;

	gap: var(--material-padding-between);
	
  	background-color: var(--md-sys-color-surface-container);
  	color: var(--md-sys-color-on-surface-container);
}


.material-collection, .material-collection-small {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	
	gap: var(--material-padding-between-cards);	

	border-radius: var(--md-sys-shape-corner-medium);
}

.material-collection {
	padding: var(--material-padding-between-cards);
  	background-color: var(--md-sys-color-surface-variant);
  	color: var(--md-sys-color-on-surface-variant);
}

@media (max-width: 1023px) {
	.material-collection > * {
	  	width: 100%;
	}
}

@media screen and  (min-width: 1024px) and (max-width: 1199px) {
	.material-collection > * {
	  	width: calc( 50% - (var(--material-padding-between-cards) / 2) );
	}
}

@media screen and  (min-width: 1200px) {
	.material-collection > * {
	  	width: calc( 33.33% - (2 * var(--material-padding-between-cards) / 3) );
	}
}

@media (max-width: 768px) {
	.material-collection-small > * {
	  	width: 100%;
	}
}

@media screen and  (min-width: 769px) and (max-width: 1023px) {
	.material-collection-small > * {
	  	width: calc( 50% - (var(--material-padding-between-cards) / 2) ); 
	}
}

@media screen and  (min-width: 1024px) and (max-width: 1199px) {
	.material-collection-small > * {
	  	width: calc( 33.33% - (2 * var(--material-padding-between-cards) / 3) );
	}
}

@media screen and  (min-width: 1200px) {
	.material-collection-small > * {
	  	width: calc( 25% - (2 * var(--material-padding-between-cards) / 4) );
	}
}


.material-card  {
	padding: var(--material-padding);	
	border-radius: var(--md-sys-shape-corner-medium);
}

.material-card-image, .material-card-image-image {
	border-radius: var(--md-sys-shape-corner-medium);	
  	background-color: var(--md-sys-color-surface-variant);
  	color: var(--md-sys-color-on-surface-variant);
}

.material-card-image-image {
	height: 20vmin;
	background-position: center;
    background-size: cover
}

.material-card-buttons {
	display: flex;
	flex-direction: row;
	gap: 8px;
	flex-wrap: wrap;
	padding: calc( var(--material-padding) / 2);
}

.material-card-buttons > *:first-child {
	margin-left: auto;
}

.material-card-image-text {
	padding: calc( var(--material-padding) / 2);
	display: flex;
	flex-direction: column;
	gap: calc( var(--material-padding) / 2);	
}

.material-card.outlined-card, .material-card-image.outlined-card {
	background-color: var(--md-sys-color-surface);
   	color: var(--md-sys-color-on-surface);

	box-shadow: 2px 2px 0px 1px var(--md-sys-color-surface-variant);
    border: 0.25px solid var(--md-sys-color-surface-variant);
}

.material-card.filled-card, .material-card-image.filled-card {
	background-color: var(--md-sys-color-surface-variant);
   	color: var(--md-sys-color-on-surface-variant);

	box-shadow: 2px 2px 0px 1px var(--md-sys-color-surface-variant);
    border: 0.25px solid var(--md-sys-color-surface-variant);
}

.material-card.error-card, .material-card-image.error-card{
	background-color: var(--md-sys-color-error);
   	color: var(--md-sys-color-on-error);

	box-shadow: 2px 2px 0px 1px var(--md-sys-color-surface-variant);
    border: 0.25px solid var(--md-sys-color-surface-variant);
}

.material-card.warning-card {
	background-color: #F7B500;
   	color: #008351;

	box-shadow: 2px 2px 0px 1px var(--md-sys-color-surface-variant);
    border: 0.25px solid var(--md-sys-color-surface-variant);
}

.material-navigation.rail {
    flex-direction: column;

  	background-color: var(--md-sys-color-surface);
  	color: var(--md-sys-color-on-surface);
  	width: 64px;
    padding: 12px;
    height: 100%;
}

.material-navigation.bar {
    flex-direction: row;

  	background-color: var(--md-sys-color-surface-container);
  	color: var(--md-sys-color-on-surface-container);  	
  	min-height: 52px;
    padding: 12px 40px 16px 40px;
    
	box-shadow: 2px 2px 0px 1px var(--md-sys-color-surface-variant);
    border: 0.25px solid var(--md-sys-color-surface-variant);
    border-radius: 12px;
}

.material-navigation{
	display: flex;
   	flex-wrap: wrap;

    align-items: center;
    gap: 12px;
    }
    
.material-navigation > a {
	display: flex;
    flex-direction: column;
	flex-wrap: wrap;
    
    gap: 4px;	

    align-items: center;
    text-decoration: none;
   	color: var(--md-sys-color-on-surface-variant);
}

.material-navigation.rail > a > span {
	width: 56px;
    padding: 4px 0;
    text-align: center;
    border-radius: 16px;
}

.material-navigation.bar > a > span {
	width: 64px;
	height: 24px;
    padding: 4px 0;
    text-align: center;
    border-radius: 16px;
}

.material-navigation > a.selected > span {	
  	background-color: var(--md-sys-color-secondary);
  	color: var(--md-sys-color-on-secondary);
	
}

.material-navigation > a:hover > span {
  	background-color: var(--md-sys-color-surface-variant);
   	color: var(--md-sys-color-on-surface-variant);
	
}

.material-symbols-rounded, .application-icons {
	vertical-align: middle;
	margin:  auto 0;
}

.material-symbols-rounded { 
	font-variation-settings:
  		'FILL' 0,
  		'wght' 200,
  		'GRAD' 0,
  		'opsz' 24
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

.application-icons, .application-icons img{
	height: 24px;	
}
.material-navigation > a.selected > .application-icons > img {	
	filter: brightness(0%) invert(100%);
}

.material-navigation > a:hover > .application-icons > img {	
	filter: invert(0%);
}

.material-navigation.rail .separator {
	height: 50px;
	width: 100%;
	}
	
.material-navigation.rail .filler {
	margin-bottom: auto;
}

 {
	margin-right: auto;
}

.material-list {
	gap: var(--material-padding-between-cards);	
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.material-list-column {
	gap: var(--material-padding-between-cards);	
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

@media (max-width: 767px) {
	.material-list > * {
	  	width: 100%;
	}
}

@media screen and  (min-width: 768px) and (max-width: 1023px) {
	.material-list-item {
	  	width: calc( 50% - (var(--material-padding-between-cards) / 2) );
	}
}

@media screen and  (min-width: 1024px) and (max-width: 1199px) {
	.material-list > * {
	  	width: calc( 33% - ( 2 * var(--material-padding-between-cards) / 3) );
	}
}

@media screen and  (min-width: 1200px) {
	.material-list > * {
	  	width: calc( 25% - ( 3 * var(--material-padding-between-cards) / 3) );
	}
}

/*
 - Material_button voir partial  
 */
a.material-list-item-container {
	text-decoration: none;
}

.material-list-item-container {
	height: fit-content;
}

.material-list-item {
  	padding: 8px 16px;
  	background-color: var(--md-sys-color-surface);
  	color: var(--md-sys-color-on-surface);
  	border-bottom: 0.25px solid var(--md-sys-color-on-surface);

	display: flex;
    flex-direction: row;
   	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.material-list-item:hover {
  	background-color: var(--md-sys-color-surface-variant);
   	color: var(--md-sys-color-on-surface-variant);
}

.material-list-item-picture {
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain ;
	width: 56px;
    height: 56px;
}

.material-list-item-material, .material-list-item-icon {
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain ;
	width: 24px;
    height: 24px;
    border-radius: 12px;
}

.material-list-item-trailling-icon, .material-list-item-trailling-text {
	margin-left: auto;
}

/*
 - Material_button voir partial  
 */
a.material-button-container {
	text-decoration: none;
}

.material-button {
	height: 40px;
	border-radius: 20px;
	padding: 0 24px;

	display: flex;
	flex-direction: row;
	gap: 8px;
	align-items: center;

}

.material-button.with-icon {
	padding-left: 16px;
}

.material-button.outlined-button {
	border: 1px solid var(--md-sys-color-primary);
	color:  var(--md-sys-color-primary);
}

.material-button.filled-button {
  	background-color: var(--md-sys-color-primary);
  	color: var(--md-sys-color-on-primary);			
}

.material-button.warning-button {
	background-color: #F7B500;
   	color: #008351;

	box-shadow: 2px 2px 0px 1px var(--md-sys-color-surface-variant);
    border: 0.25px solid var(--md-sys-color-surface-variant);
}