@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=apps,close,invert_colors,login,logout,menu,person');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
	--cmp-main-color: #d2e5f4;
	--cmp-background-color: #f6fafe;
	--cmp-dark-background-color: #293237;
	--cmp-header-size: 56px;
}

i {
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;
}
* {
	font-family:'Roboto Flex', sans-serif;
}
button {
	cursor:pointer;
}

.cmp-button {
	background:var(--cmp-main-color);
	padding:10px 20px;
	border-radius:20px;
	display:flex;
	align-items:center;
	justify-content:center;
	text-decoration:none;
	color:#333;
	font-weight:600;
	font-size:0.8rem;
}
.cmp-header {
	height: var(--cmp-header-size);
	background: #fff;
	display: flex;
	justify-content: space-between;
	box-shadow: 0px 4px 8px rgba(0,0,0,0.05);
	font-size: 0.8rem;
}
.cmp-header button, .cmp-header .button {
	background: none;
	border: none;
	padding: 0px 20px;
	display: flex;
	align-items: center;
	font-size:0.8rem;
	text-decoration:none;
	color:#000;
}
.cmp-header button i, .cmp-header .button i {
	padding-right: 5px;
	font-size: 18px;
	font-variation-settings: 'FILL' 1;
}
.cmp-header .left, .cmp-header .right {
	width: 360px;
}
.cmp-header .left {
	display: flex;
}
.cmp-header #cmp-main-menu {
	margin-left:10px;
}
.cmp-header #cmp-main-menu i {
	padding-right: 0px;
	font-size: 24px;
}
.cmp-header #cmp-accessibility {
	display:flex;
	align-items:center;
	justify-content:center;
}
.cmp-header #cmp-font-size {
	display: flex;
	border: 2px solid #008fe0;
	border-radius:4px;
}
.cmp-header #cmp-font-size button {
	padding:0px 7px;
	font-size:11px;
	height:20px;
}
.cmp-header #cmp-font-size #cmp-font-up {
	background: #008fe0;
	color:#fff;
}
.cmp-header #cmp-font-size #cmp-font-down {
	color: #008fe0;
}
.cmp-header .center {
	display:flex;
	align-items:center;
	justify-content:center;
}
.cmp-header .center img {
	height:80%;
	object-fit:contain;
}
.cmp-header .right {
	display: flex;
	justify-content:flex-end;
	padding-right:30px;
}
.cmp-header .right #cmp-apps {
	padding-left:20px;
}
.cmp-header .right #cmp-apps i {
	font-size:20px;
}
.cmp-header .right button{
	padding:0px 8px;
}
.cmp-header .right ul {
	display: flex;
	align-items: center;
	justify-content: center;
	list-style: none;
	gap: 0px;
}
.cmp-header .right ul li a {
	display: block;
	padding: 0px 18px;
	border-right: 2px solid #000;
	line-height: 12px;
	font-size:14px;
	text-decoration:none;
	color:#000;
}

.cmp-dropdown {
	position:fixed;
	top:0;
	display:none;
	background:var(--cmp-background-color);
	z-index:100;
}
.cmp-dropdown.show {
	display: flex;
}
.cmp-dropdown-close {
	position: absolute;
	padding:0 !important;
	right: 10px;
	top: 10px;
	border: none;
	background: none;
	cursor: pointer;
}
.cmp-dropdown-close i {
	padding:0 !important;
	font-size:20px !important;
}

.cmp-dropdown-menu {
	right: 10px;
	margin-top: -10px;
	border-radius: 20px;
	padding: 40px 20px 20px 20px;
	width: 250px;
	top: calc(var(--cmp-header-size) + 0px);
	box-shadow: 3px 3px 8px rgba(0,0,0,0.2), -3px 3px 8px rgba(0,0,0,0.2);
	flex-direction:column;
	align-items:center;
}
.cmp-dropdown-menu .cmp-oauth-user-picture img {
	width: 96px;
	height: 96px;
	object-fit: cover;
	border: 2px solid #f4f4f4;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.2), -1px 1px 3px rgba(0,0,0,0.2);
	border-radius: 96px;
	background: #f4f4f4;
}
.cmp-dropdown-menu .cmp-oauth-user-name {
	font-weight:400;
	padding:10px 0px;
	font-size:1rem;
}
.cmp-avatar p {
	font-weight: 600;
	font-size: 0.8rem;
}
.cmp-avatar img {
	width: 40px;
	height: 40px;
	object-fit: cover;
	border: 2px solid #f4f4f4;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.2), -1px 1px 3px rgba(0,0,0,0.2);
	border-radius: 40px;
	background: #f4f4f4;
	margin-right:10px;
}
.cmp-footer {
	background: var(--cmp-dark-background-color);
	color: #eee;
}
.cmp-footer-container {
	margin:0 auto;
	width:100%;
	max-width:1200px;
}
.cmp-footer ul {
	list-style:none;
}
.cmp-footer-links li {
	padding:5px 0px;
}
.cmp-footer h1 {
	text-transform:uppercase;
	font-size: 0.8rem;
	margin-bottom:10px;
}
.cmp-footer a {
	display:flex;
	align-items:center;
	text-decoration: none;
	color: #eee;
	font-size:0.8rem;
	white-space:nowrap;
}
.cmp-footer a img {
	margin-right:5px;
}
.cmp-footer-links {
	display:flex;
	flex-wrap:wrap;
	color:#eee;
	gap:50px;
	padding:30px 30px;
}
.cmp-footer-logo{
	flex:1;
	text-align:center;
}
.cmp-footer-logo img {
	filter: brightness(0.2) grayscale(100%) invert(1);
	height:40px;
}
.cmp-footer-last {
	margin-left:auto;
	border-left:1px solid rgba(255,255,255,0.5);
	padding-left:20px;
}
.cmp-footer-link-list {
	flex:1;
}
.cmp-footer hr {
	border:none;
	border-top: 1px solid rgba(255,255,255,0.5);
	margin:10px 0px;
}
.cmp-footer-text {
	margin-bottom:20px;
}
.cmp-footer-text p{
	font-size:0.8rem;
	padding:0px 30px;
}
.cmp-footer-end {
	border-top: 1px solid rgba(255,255,255,0.5);
}
.cmp-footer-end .cmp-footer-container {
	display: flex;
	padding:20px 0;
}
.cmp-footer-end .cmp-footer-container p {
	font-size:0.8rem;
	margin-right:20px;
}
.cmp-footer-end ul {
	display: flex;
	gap:10px;
}
.cmp-footer-end ul li {
	border-left: 2px solid rgba(255,255,255,0.5);
}
.cmp-footer-end ul li a {
	padding:0px 20px;
}


@media (max-width: 640px) {

	.cmp-header #cmp-accessibility {
		display:none;
	}
	.cmp-header .right ul {
		display:none;
	}
	#cmp-apps {
		display:none;
	}
	.cmp-header .center img {
		clip-path: inset(0px 160px 0px 0px);
	}
	.cmp-footer-last {
		border-left: none;
		padding-left: 0px;
	}
	.cmp-footer-container{
		align-items:center;
		justify-content:center;
	}
	.cmp-footer-end ul {
		display:none;
	}


}