/*
 Theme Name:   Application Ezeecam
 Theme URI:    https://www.ezeecam.com/
 Description:  Ezeecam application
 Author:       Digimeo
 Author URI:   https://www.app.ezeecam.com/
 Version:      1.0
*/
@charset "UTF-8";
/* main colors
white : #fff
light grey : #f5f5f7
purple : #7451ebs
light purple : #e2daff
yellow : #fdc500
grey : #3e3e3e
50% grey : #c1c1c1
*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800&display=swap');

/*Menu bas "view" */
.bottom-view {

	z-index: 6;
	position: absolute;
	/* bottom: 0; */
	bottom: 16px;
	left: 50%;
	background-color: white;
	display: flex;
	justify-content: space-around;
	align-items: center;
	transform: translateX(-50%);
	width: 450px;
	/* border-radius: 10px 10px 0 0; */
	border-radius: 32px;
	box-shadow: 0px 2px 9px #00000022;
	padding: 4px 8px;
}

.viewbtn {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transition: .3s ease-out;
	padding: 8px;
	border-radius: 9px;
}

.viewbtn:not(.active):hover {
	/* filter: brightness(0) saturate(100%) invert(89%) sepia(1%) saturate(370%) hue-rotate(319deg) brightness(84%) contrast(97%); */
	filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(927%) hue-rotate(176deg) brightness(94%) contrast(78%);
	background-color: #7451be11;
	color: white;
}

.viewbtn:not(.active) img {
	filter: brightness(0) saturate(100%) invert(38%) sepia(3%) saturate(3828%) hue-rotate(173deg) brightness(84%) contrast(88%);
}

.modeview {
	text-align: center;
}

.viewbtn:hover .modeview {
	color: white;
}

.viewbtn- {
	cursor: pointer;
}

.viewbtn- .modeview:not(.active) {
	background-color: white;
}

.viewbtn- .modeview:not(.active):hover {
	background-color: #bebebe;
	color: white;
	transition: .3s ease-out;
}

.viewbtn.active {
	background-color: #8b00ff;
	/* var(--accent-color);*/
	color: white !important;
}