$primary-color-dark:   #1976D2;
$primary-color:        #2196F3;
$primary-color-light:  #BBDEFB;
$primary-color-text:   #FFFFFF;
$accent-color:         #2196F3;
$primary-text-color:   #212121;
$secondary-text-color: #757575;
$divider-color:        #BDBDBD;



@use "@material/theme" with (
  $primary: $primary-color,
  $secondary: $accent-color,
  $background: $primary-color-light,
);

@use "animations";
@use "material-components-web";
@use "@material/switch";
@use "@material/card";
@use "@material/button";
@use "@material/tab";
@import "@material/top-app-bar/mdc-top-app-bar";

@mixin eightspacing{
	margin: 8px 8px 8px 8px ;
}

@mixin eightpadding {
	padding: 8px 8px 8px 8px ;

}

@mixin scroll-bar{
	scrollbar-width: thin ;          
	scrollbar-color: $accent-color $primary-color-light ;

}

.summary-explain-p{
	font-family: 'Arial', sans-serif !important;
	font-size: 18px ;
	display: inline-block ;
	margin-left:8px ;
	@include eightpadding;

}


/* The class for the formation of the used values*/
.view-saved-values{
	display:flex ;
	flex-direction: column ;
	justify-content: flex-start;
}

.summary-picto-div{
	font-family: 'Arial', sans-serif !important;
	padding-left: 4px;
	padding-right: 4px;
	padding-bottom: 4px;
	display:flex ;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items:flex-start ;
	justify-content: flex-start;
	img {
		display:inline-block ;
		width:32px ;
		height:32px ;
	}
		p{
		font-family: 'Arial', sans-serif !important;
		font-size: 18px ;
		padding: 0px 0px 0px 0px;
		margin: 0px 0px 0px 0px;
	}
}

.title-h-picto-div{

	font-family: 'Arial', sans-serif !important;
	width:80wv;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	img {
		display:inline-block ;
		@include eightpadding;
		width:72px ;
		height:72px ;
	}
	h1{
		@include eightpadding;
		display:inline-block ;
		font-family: 'Arial', sans-serif !important;
		font-size: 24px ;
	}
	
}


.mdc-card{
	font-family: 'Arial', sans-serif !important;
	@include eightspacing;
	padding-left: 16px ;
	padding-right: 16px ;
	padding-top:8px ;
	padding-bottom:8px ;
	display:flex ;
	flex-direction: column ;
	justify-content: flex-start ;
	align-items: center ;
	h1{
		font-family: 'Arial', sans-serif !important;
		font-size: 24px ;
	}
	h2{
		font-family: 'Arial', sans-serif !important;
		font-size: 22px ;
	}
	p{
		font-family: 'Arial', sans-serif !important;
		font-size: 18px ;
		@include eightpadding;
	}
	.mdc-button{
		padding: 4px 4px 4px 4px ;
		margin-bottom:8px ;
		text-transform: lowercase ;
	}
	ul{
		@include eightpadding;
		font-family: 'Arial', sans-serif !important;
		font-size: 18px ;
	}
	ol{
		@include eightpadding;
		font-family: 'Arial', sans-serif !important;
		font-size: 18px ;
	}
	li{
		@include eightpadding;
		font-family: 'Arial', sans-serif !important;
		font-size: 18px ;
	}
	dl{
		@include eightpadding;
		font-family: 'Arial', sans-serif !important;
		font-size: 18px ;
	}
	dt{
		@include eightpadding;
		font-family: 'Arial', sans-serif !important;
		font-size: 18px ;
	}
	dd{
		@include eightpadding;
		font-family: 'Arial', sans-serif !important;
		font-size: 18px ;
	}
	hr{
		width:20vw;
	}
}

.cut{
	width: 75vw ;
	height: 90vh ;
	overflow-x: auto ;
	overflow-y: auto ;
	
} 

.custom-direction-cut{
	display:flex ; 
	flex-direction:row ;
	
} 

/* This class used for the highlighting in the text of a policy*/
.costum-css-select{
	background-color: #BBDEFB !important; 
	color:#000 !important;
} 

.costum-app-bar{
	font-family: 'Arial', sans-serif !important;
	text-align:center ;
	color: #FFF ;
	h1 {
		margin:auto ;
	
	}
	width: 100vw ;
	height: 10vh ;
	background-color: $primary-color ;
}

.disable-inheritance{
	
}

/* this class defines the attributes vor the div that contains the faq cards*/
.costum-advanced-div{
	all: unset;
	width: 25vw ;
	height: 90vh ;
	display:flex ;
	flex-direction: column ;
	align-items: stretch ;
	@include eightpadding ;
	overflow-x:hidden ;
	overflow-y:auto ;
	@include scroll-bar ;
	background-color: #BBDEFB ;
	p{
		font-family: 'Arial', sans-serif;
		font-size: 18px !important;
		@include eightpadding;
	}
	h1{
		font-size: 20px ;
		font-family: 'Arial', sans-serif !important;
		@include eightpadding;
	}
	.mdc-button{
		padding: 4px 4px 4px 4px ;
		margin-bottom:8px ;
		text-transform: lowercase ;
	}
	ul{
	}
}

.mdc-button{
	font-family: 'Arial', sans-serif !important;
	padding: 4px 4px 4px 4px ;
	margin-bottom:8px ;
	text-transform: lowercase ;
}