/*Farben */

$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;

$background-color: $primary-color-light;


@use "animations";
@use "base_style";

.cookie-card{
	@include base_style.eightpadding;
	display: flex; 
	flex-direction: row;
	justify-content: space-between;
	img{
		margin-left:8px;
	}
}



#content-area{
	width:400px;
	height:80vh;
	overflow-x: hidden;
	overflow-y: auto;
	margin-top:8px;
	margin-bottom:16px;
	display:flex;
	flex-direction: column;
	@include base_style.scroll-bar;
}

#button-div{
	display:flex;
	flex-direction:row-reverse;
}

#zsf-div{
	display:flex;
	flex-direction:column;

}

.saved-div{
	display:flex ;
	flex-direction: column ;
	justify-content: flex-start ;
	align-items: center ;
}

.animation-container{
	display:flex;
	justify-content: center;
	align-items: center;
	position:relative;
	margin-top:50px;
	margin-bottom:50px;

	.animation{
		position:relative;
		height:10rem;
		width:10rem;

		.cycle-1{
			position:absolute;
			
			border-radius: 50%;
			border: solid 0.3rem $primary-color-light;
			border-right: solid 0.3rem $accent-color;
			border-left: solid 0.3rem $accent-color;
			top: 0.5rem;
			left: 0.5rem;
			width: 10rem;
			height: 10rem;
			
			animation: spinner 1.5s 300ms infinite;
		}
		
		.cycle-2{
			position:absolute;
			
			border-radius: 50%;
			border: solid 0.3rem $primary-color-light;
			border-right: solid 0.3rem $accent-color;
			border-left: solid 0.3rem $accent-color;
			top: 1.5rem;
			left: 1.5rem;
			width: 8rem;
			height: 8rem;
			animation: spinner 1.5s 400ms infinite;
		}

		.cycle-3{
		position:absolute;
			
			border-radius: 50%;
			border: solid 0.3rem $primary-color-light;
			border-right: solid 0.3rem $accent-color;
			border-left: solid 0.3rem $accent-color;
			
			top: 2.5rem;
			left: 2.5rem;
			width: 6rem;
			height: 6rem;
		
			animation: spinner 1.5s 500ms infinite;
		}
		
		p {
			text-align:center;
			text-transform:uppercase;
			letter-spacing: 0.4rem;
			font-size: 0.8rem;
		}
	}
}


#p_hint_for_press_privacy{

	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	img {
		display:inline-block ;
		width:72px ;
		height:72px ;
	}

}

#right-card{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	img {
		display:inline-block ;
		width:72px ;
		height:72px ;
	}
}

.mdc-tab-bar{
	display:flex;
	width:400px;
	height:50px;
	background-color:$background-color;
}

.mdc-button--raised{
	width:10rem;
}

#extension-div{
	/*noch zu erledigen*/
}

.privacyfade{
	animation: fadecheck 3s infinite;
}

body{
	width: 400px;
	height: 550px;
	display:grid;
	overflow-x: hidden;
	overflow-y: hidden;
	background-color:$background-color;
}