:root { 
	--primary-accent: rgb(116,54,169);
	--primary-light: rgb(90,177,203);
	--primary-mid: rgb(49,133,156);
	--primary-dark: rgb(37,100,117);
	--primary-text: rgb(255,255,255);
	--primary-ui: rgb(49,133,156);
	--secondary-accent: rgb(255,192,0);
	--secondary-light: rgb(242,242,242);
	--secondary-mid: rgb(217,217,217);
	--secondary-mid50: rgba(217,217,217,50%);
	--secondary-dark: rgb(60,60,60);
	--secondary-ui: rgb(80,80,80);
	--secondary-text: rgb(0,0,0);
	
	--shadow-outside: 0.1rem 0.1rem 0.3rem rgba(0,0,0,0.7);
    --shadow-inside: inset 0.1rem 0.1rem 0.3rem rgba(0,0,0,0.7);
    --shadow-mask: rgba(0,0,0,0.8);
	--content_back: rgba(80,80,80,0.8);
	--content-block: rgb(255,255,255);
	
	--button_logout: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17 16L21 12M21 12L17 8M21 12L7 12M13 16V17C13 18.6569 11.6569 20 10 20H6C4.34315 20 3 18.6569 3 17V7C3 5.34315 4.34315 4 6 4H10C11.6569 4 13 5.34315 13 7V8' stroke='rgb(255,255,255)' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
	
	--button_settings: url("data:image/svg+xml;charset=utf8,<svg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'><path clip-rule='evenodd' d='M35,22H13C7.477,22,3,17.523,3,12S7.477,2,13,2h22c5.522,0,10,4.477,10,10  S40.522,22,35,22z M35,4H13c-4.418,0-8,3.582-8,8s3.582,8,8,8h22c4.418,0,8-3.582,8-8S39.418,4,35,4z M13,18c-3.313,0-6-2.686-6-6  c0-3.313,2.687-6,6-6s6,2.687,6,6C19,15.314,16.313,18,13,18z M13,8c-2.209,0-4,1.791-4,4c0,2.209,1.791,4,4,4s4-1.791,4-4  C17,9.791,15.209,8,13,8z M13,26h22c5.522,0,10,4.478,10,10s-4.478,10-10,10H13C7.477,46,3,41.522,3,36S7.477,26,13,26z M13,44h22  c4.418,0,8-3.582,8-8s-3.582-8-8-8H13c-4.418,0-8,3.582-8,8S8.582,44,13,44z M35,30c3.313,0,6,2.687,6,6s-2.687,6-6,6s-6-2.687-6-6  S31.687,30,35,30z M35,40c2.209,0,4-1.791,4-4s-1.791-4-4-4s-4,1.791-4,4S32.791,40,35,40z' fill-rule='evenodd' fill='rgb(255,255,255)' /></svg>");

	--button_network: url("data:image/svg+xml;charset=utf8,<svg viewBox='0 0 78 78' xmlns='http://www.w3.org/2000/svg'><path d='M39,0C17.461,0,0,17.461,0,39s17.461,39,39,39s39-17.461,39-39S60.539,0,39,0z M40.221,70.934  c-0.445,0.399-0.907,0.483-1.217,0.483c-0.313,0-0.78-0.085-1.232-0.491c-5.489-4.938-9.529-11.251-11.828-18.24  c8.567-2.189,17.566-2.219,26.146-0.091C49.795,59.624,45.738,65.974,40.221,70.934z M24.474,46.87  c-0.469-2.574-0.724-5.205-0.724-7.87s0.255-5.296,0.723-7.87c4.827,1.231,9.776,1.849,14.727,1.849  c4.82,0,9.639-0.587,14.345-1.754c0.457,2.544,0.706,5.143,0.706,7.775s-0.249,5.231-0.706,7.775  C44.005,44.409,34,44.439,24.474,46.87z M37.78,7.066c0.444-0.399,0.907-0.483,1.216-0.483c0.313,0,0.78,0.086,1.232,0.491  c5.513,4.959,9.566,11.306,11.86,18.331c-8.58,2.127-17.579,2.098-26.146-0.091C28.242,18.322,32.286,12.005,37.78,7.066z   M59.318,29.472c3.287-1.181,6.489-2.663,9.569-4.441C70.88,29.276,72,34.009,72,39s-1.12,9.724-3.112,13.969  c-3.08-1.779-6.282-3.26-9.569-4.441c0.604-3.106,0.932-6.293,0.932-9.528C60.25,35.765,59.923,32.579,59.318,29.472z   M65.854,19.855c-2.59,1.494-5.275,2.759-8.029,3.782c-1.917-5.907-4.934-11.373-8.866-16.099  C55.838,9.721,61.742,14.104,65.854,19.855z M29.042,7.539c-3.901,4.689-6.899,10.107-8.817,15.961  c-2.732-1.037-5.396-2.305-7.963-3.807C16.368,14.022,22.227,9.701,29.042,7.539z M9.193,24.85c3.061,1.793,6.244,3.292,9.513,4.491  C18.085,32.489,17.75,35.72,17.75,39c0,3.28,0.334,6.511,0.956,9.659c-3.269,1.2-6.452,2.698-9.513,4.491  C7.148,48.859,6,44.062,6,39S7.148,29.141,9.193,24.85z M12.262,58.306c2.566-1.501,5.23-2.77,7.963-3.807  c1.918,5.854,4.916,11.273,8.817,15.962C22.227,68.299,16.368,63.978,12.262,58.306z M48.959,70.461  c3.932-4.727,6.948-10.192,8.865-16.099c2.754,1.023,5.439,2.289,8.029,3.782C61.742,63.895,55.838,68.278,48.959,70.461z' style='fill:rgb(255,255,255);'/></svg>");
	
	--button_profile: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 78 78'><path d='M52.5,33.529v-3c0-7.425-6.075-13.5-13.5-13.5s-13.5,6.075-13.5,13.5v3c0,7.425,6.075,13.5,13.5,13.5  S52.5,40.954,52.5,33.529z M39,0.03c-21.54,0-39,17.46-39,39c0,11.3,4.8,21.48,12.48,28.59c6.927,6.434,15.604,9.891,24.35,10.351  l-5.85-5.631l5.989-13.489l-6.399-5.11l-17.521,5.65C8.63,53.78,6,46.71,6,39.03c0-18.2,14.8-33,33-33s33,14.8,33,33  c0,7.67-2.63,14.74-7.04,20.35l-17.53-5.64l-6.41,5.11l5.99,13.489l-5.85,5.631c8.991-0.474,17.593-4.066,24.359-10.351  C73.2,60.511,78,50.33,78,39.03C78,17.49,60.54,0.03,39,0.03z' style='fill:rgb(255,255,255);'/></svg>");
	
	--button-new: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;'><path d='M417.4,224H288V94.6c0-16.9-14.3-30.6-32-30.6c-17.7,0-32,13.7-32,30.6V224H94.6C77.7,224,64,238.3,64,256  c0,17.7,13.7,32,30.6,32H224v129.4c0,16.9,14.3,30.6,32,30.6c17.7,0,32-13.7,32-30.6V288h129.4c16.9,0,30.6-14.3,30.6-32  C448,238.3,434.3,224,417.4,224z' fill='rgb(255,255,255)' /></svg>");
	
	--button-close: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;'><path d='M417.4,224H288V94.6c0-16.9-14.3-30.6-32-30.6c-17.7,0-32,13.7-32,30.6V224H94.6C77.7,224,64,238.3,64,256  c0,17.7,13.7,32,30.6,32H224v129.4c0,16.9,14.3,30.6,32,30.6c17.7,0,32-13.7,32-30.6V288h129.4c16.9,0,30.6-14.3,30.6-32  C448,238.3,434.3,224,417.4,224z' fill='rgb(80,80,80)' transform='rotate(45 256 256)' /></svg>");
	
	--button-search: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' enable-background='new 0 0 512 512'><path d='M497.913,497.913c-18.782,18.782-49.225,18.782-68.008,0l-84.862-84.863c-34.889,22.382-76.13,35.717-120.659,35.717  C100.469,448.767,0,348.312,0,224.383S100.469,0,224.384,0c123.931,0,224.384,100.452,224.384,224.383  c0,44.514-13.352,85.771-35.718,120.676l84.863,84.863C516.695,448.704,516.695,479.131,497.913,497.913z M224.384,64.109  c-88.511,0-160.274,71.747-160.274,160.273c0,88.526,71.764,160.274,160.274,160.274c88.525,0,160.273-71.748,160.273-160.274  C384.657,135.856,312.909,64.109,224.384,64.109z' fill='rgb(255,255,255)' /></svg>");
	
	--page-background: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='1748' height='1456.7' viewBox='0 0 1080 900'><g fill-opacity='0.05'><polygon fill='rgb(68, 68, 68)' points='90 150 0 300 180 300'/><polygon points='90 150 180 0 0 0'/><polygon fill='rgb(170, 170, 170)' points='270 150 360 0 180 0'/><polygon fill='rgb(221, 221, 221)' points='450 150 360 300 540 300'/><polygon fill='rgb(153, 153, 153)' points='450 150 540 0 360 0'/><polygon points='630 150 540 300 720 300'/><polygon fill='rgb(221, 221, 221)' points='630 150 720 0 540 0'/><polygon fill='rgb(68, 68, 68)' points='810 150 720 300 900 300'/><polygon fill='rgb(255, 255, 255)' points='810 150 900 0 720 0'/><polygon fill='rgb(221, 221, 221)' points='990 150 900 300 1080 300'/><polygon fill='rgb(68, 68, 68)' points='990 150 1080 0 900 0'/><polygon fill='rgb(221, 221, 221)' points='90 450 0 600 180 600'/><polygon points='90 450 180 300 0 300'/><polygon fill='rgb(102, 102, 102)' points='270 450 180 600 360 600'/><polygon fill='rgb(170, 170, 170)' points='270 450 360 300 180 300'/><polygon fill='rgb(221, 221, 221)' points='450 450 360 600 540 600'/><polygon fill='rgb(153, 153, 153)' points='450 450 540 300 360 300'/><polygon fill='rgb(153, 153, 153)' points='630 450 540 600 720 600'/><polygon fill='rgb(255, 255, 255)' points='630 450 720 300 540 300'/><polygon points='810 450 720 600 900 600'/><polygon fill='rgb(221, 221, 221)' points='810 450 900 300 720 300'/><polygon fill='rgb(170, 170, 170)' points='990 450 900 600 1080 600'/><polygon fill='rgb(68, 68, 68)' points='990 450 1080 300 900 300'/><polygon fill='rgb(34, 34, 34)' points='90 750 0 900 180 900'/><polygon points='270 750 180 900 360 900'/><polygon fill='rgb(221, 221, 221)' points='270 750 360 600 180 600'/><polygon points='450 750 540 600 360 600'/><polygon points='630 750 540 900 720 900'/><polygon fill='rgb(68, 68, 68)' points='630 750 720 600 540 600'/><polygon fill='rgb(170, 170, 170)' points='810 750 720 900 900 900'/><polygon fill='rgb(102, 102, 102)' points='810 750 900 600 720 600'/><polygon fill='rgb(153, 153, 153)' points='990 750 900 900 1080 900'/><polygon fill='rgb(153, 153, 153)' points='180 0 90 150 270 150'/><polygon fill='rgb(68, 68, 68)' points='360 0 270 150 450 150'/><polygon fill='rgb(255, 255, 255)' points='540 0 450 150 630 150'/><polygon points='900 0 810 150 990 150'/><polygon fill='rgb(34, 34, 34)' points='0 300 -90 450 90 450'/><polygon fill='rgb(255, 255, 255)' points='0 300 90 150 -90 150'/><polygon fill='rgb(255, 255, 255)' points='180 300 90 450 270 450'/><polygon fill='rgb(102, 102, 102)' points='180 300 270 150 90 150'/><polygon fill='rgb(34, 34, 34)' points='360 300 270 450 450 450'/><polygon fill='rgb(255, 255, 255)' points='360 300 450 150 270 150'/><polygon fill='rgb(68, 68, 68)' points='540 300 450 450 630 450'/><polygon fill='rgb(34, 34, 34)' points='540 300 630 150 450 150'/><polygon fill='rgb(170, 170, 170)' points='720 300 630 450 810 450'/><polygon fill='rgb(102, 102, 102)' points='720 300 810 150 630 150'/><polygon fill='rgb(255, 255, 255)' points='900 300 810 450 990 450'/><polygon fill='rgb(153, 153, 153)' points='900 300 990 150 810 150'/><polygon points='0 600 -90 750 90 750'/><polygon fill='rgb(102, 102, 102)' points='0 600 90 450 -90 450'/><polygon fill='rgb(170, 170, 170)' points='180 600 90 750 270 750'/><polygon fill='rgb(68, 68, 68)' points='180 600 270 450 90 450'/><polygon fill='rgb(68, 68, 68)' points='360 600 270 750 450 750'/><polygon fill='rgb(153, 153, 153)' points='360 600 450 450 270 450'/><polygon fill='rgb(102, 102, 102)' points='540 600 630 450 450 450'/><polygon fill='rgb(34, 34, 34)' points='720 600 630 750 810 750'/><polygon fill='rgb(255, 255, 255)' points='900 600 810 750 990 750'/><polygon fill='rgb(34, 34, 34)' points='900 600 990 450 810 450'/><polygon fill='rgb(221, 221, 221)' points='0 900 90 750 -90 750'/><polygon fill='rgb(68, 68, 68)' points='180 900 270 750 90 750'/><polygon fill='rgb(255, 255, 255)' points='360 900 450 750 270 750'/><polygon fill='rgb(170, 170, 170)' points='540 900 630 750 450 750'/><polygon fill='rgb(255, 255, 255)' points='720 900 810 750 630 750'/><polygon fill='rgb(34, 34, 34)' points='900 900 990 750 810 750'/><polygon fill='rgb(34, 34, 34)' points='1080 300 990 450 1170 450'/><polygon fill='rgb(255, 255, 255)' points='1080 300 1170 150 990 150'/><polygon points='1080 600 990 750 1170 750'/><polygon fill='rgb(102, 102, 102)' points='1080 600 1170 450 990 450'/><polygon fill='rgb(221, 221, 221)' points='1080 900 1170 750 990 750'/></g></svg>"),linear-gradient(80deg, rgba(0, 129, 126, 0.8), rgba(200, 0 ,200, 0.8));
}
* {
	box-sizing: border-box;
	font-family: 'Open Sans', sans-serif;
}
body {
	background-image: var(--page-background);
	background-color:rgba(0, 129, 126, 1);
	background-position:top center; 
	background-repeat:repeat; 
	background-attachment:scroll;
	margin:0.01rem;
}

h1 {
	text-align:center;
	margin-top:0rem;
	margin-bottom:2rem;
}
a { 
	color: inherit; 
	text-decoration:none;
	font-weight:bold;
	cursor:pointer;
} 
a:hover {
	text-decoration:underline;
}
#content-login a:hover {
	text-decoration:none;
}
menu {
	margin:0;
	padding:0;
}
logo {
	display: inline-block;
    font-weight: 800;
    font-size: 2.1rem;
    color: var(--primary-text);
	cursor:pointer;
}
label {
	display:block;
	font-weight:bold;
	font-size:0.8rem;
	margin-top:0.5rem;
	color:var(--secondary-text);
}
html, body {
	height:100%;
}
content {
	display:block;
	min-height:100%;
}
#content-login {
	display:flex;
	justify-content:center;
	align-content:center;
	align-items:center;
}
#content-login > * {
	flex-grow:1;
}
div.user_dialog {
	background-color: var(--content-block);
	color:rgb(80,80,80);
	border-radius:0.5rem;
	padding:3rem;
	max-width:25rem;
	display:none;
}
#dialog-login {
	display:block;
}
#content_site {
	background-color: var(--content_back);
	padding-top:4rem;
	padding-bottom:2rem;
	padding-left:1rem;
	padding-right:1rem;
	margin-bottom:1rem;
}
#content_site section {
	background: var(--content-block);
	color: var(--secondary-text);
	border-radius:0.6rem;
	margin:1rem;
	padding:1rem;
	max-width:100rem;
	margin-left:auto;
	margin-right:auto;
	box-shadow: var(--shadow-outside);
}
#content_site section h1 {
    background-color: var(--primary-dark);
    color: var(--primary-text);
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    box-shadow: none;
    font-size: 1.5rem;
    font-weight: 800;
    padding: 0.5rem;
	padding-left: 1rem;
	text-align:left;
	margin:-1rem;
	margin-top:-1rem;
	margin-right:-1rem;
	margin-bottom:1rem;
}
#content_site section h2 {
	background-color:var(--primary-light);
	color: var(--primary-text);
    border-top-right-radius: 10rem;
    border-bottom-right-radius: 10rem;
    padding: 0.5rem;
	padding-left: 1rem;
	margin-top:2rem;
	margin-left:-1rem;
}
#content_site section menu {
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-content:stretch;
	gap:1rem;
}
#content_site section menu div {
	border-top-left-radius:10rem;
	border-bottom-left-radius:10rem;
	background-color:var(--secondary-mid);
    margin-right: -1rem;
	flex-shrink:1;
	display:flex;
	gap:1rem;
	padding:0.5rem;
}
#content_site section menu search {
	flex-grow:1;
}
#content_site section menu button {
	height: 2rem;
	width: 2rem;
	margin:0rem;
	border-radius:10rem;
	background-color:var(--primary-mid);
	background-repeat: no-repeat;
    background-position: center;
}
button#comm-create, button.create {
	background-image:var(--button-new);
}
button#comm-search, button.search {
	background-image:var(--button-search);
	background-size: 70%;
}
button-container {
	display:block;
	max-width:100rem;
	margin:1rem;
	margin-left:auto;
	margin-right:auto;
	text-align:right;
	color:var(--primary-text);
}
button-container button {
	margin-top:0rem;
	margin-left:1rem;
	background-color: var(--primary-mid);
	color: var(--primary-text);
	width:10rem;
}
button-container button:hover {
	background-color: var(--primary-light);
}

#comm-list {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	align-items:flex-start;
	align-content:flex-start;
	gap:1rem;
}
#comm-list card {
	background-color:var(--secondary-light);
	border-radius:0.5rem;
	flex-basis:23.5rem;
	padding:0.5rem;
	height:20rem;
	cursor:pointer;
	box-shadow: var(--shadow-outside);
}

section banner {
	display:absolute;
}
section form {
	background-color:var(--secondary-light);
	border-radius:0.5rem;
	margin-top:1rem;
	padding:1rem;
}
section form fieldset {
	background-color:var(--secondary-mid);
	border:0.25rem solid var(--primary-light);
	border-radius:0.5rem;
}
section form fieldset legend {
	background-color:var(--primary-light);
	color:var(--primary-text);
	border-radius:1rem;
	font-weight:bold;
	font-size: 0.8rem;
	padding:0.25rem;
	padding-left:1rem;
	padding-right:1rem;
}
section form fieldset field input, 
section form fieldset field select, 
section form fieldset field textarea {
	width:100%;
	margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    padding: 0.5rem;
	background-color: var(--secondary-light);
	color: var(--secondary-text);
}
section form button[type=submit] {
	background-color:var(--primary-accent);
	color:var(--primary-text);
}
section form button[type=submit]:disabled {
	background-color:var(--secondary-mid);
	color:var(--secondary-light);
}
header {
	background-color:var(--primary-ui);
	box-shadow: var(--shadow-outside);
	position:fixed;
	top:0rem;
	left:0rem;
	width:100%;
	height:4rem;
}
header div {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:stretch;
	align-content:center;
	gap:1rem;
	max-width:100rem;
	margin-left:auto;
	margin-right:auto;
}
header div > * {
	flex-grow:1;
	padding:0.5rem;
}
header div logo {
	flex-shrink:1;
	flex-grow:0;
}
header div user {
	text-align:right;
}
header button {
	height:2rem;
	width:2rem;
	border-radius:0rem;
	margin:0rem;
	margin-left:0.5rem;
	margin-top:0.5rem;
}
header button#menu-profile {
	background:var(--button_profile); 
}
header button#menu-network {
	background:var(--button_network);
}
header button#menu-logout {
	background:var(--button_logout);
}
header button#menu-settings {
	background:var(--button_settings);
}
info, menu {
	display:block;
}
footer {
	background-color:var(--primary-ui);
	color:var(--primary-text);
	position:fixed;
	bottom:0rem;
	left:0rem;
	width:100%;
	height:2rem;
}
footer div {
	height:100%;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:stretch;
	align-content:center;
	gap:1rem;
	max-width:100rem;
	margin-left:auto;
	margin-right:auto;
}
footer div > * {
	flex-grow:1;
	padding:0.5rem;
}
footer info {
	font-weight:bold;
}
footer menu {
	text-align:right;
}
footer menu a {
	margin-left:0.5rem;
	margin-right:0.5rem;
}
footer menu a + a {
	margin-right:0rem;
}
banner {
	height:20rem;
	display:block;
	margin-left:-1rem;
	margin-right:-1rem;
	background-color:var(--primary-light);
	background-size: cover;
	background-position: center center;
	padding-top:10rem;
	border-bottom: 0.5rem solid;
	border-bottom-color: var(--primary-dark);
}
banner profile-name {
	display:block;
	max-width:100rem;
	margin-left:auto;
	margin-right:auto;
	margin-top:4rem;
	height:3rem;
	line-height:3rem;
	color: var(--primary-text);
	font-weight:bold;
	font-size:2rem;
	padding-left:1rem;
	position:relative;
}
name-container {
	display:block;
	background-color:var(--primary-dark);
}
profile-name avatar {
	display:block;
	height:12rem;
	width:12rem;
	background-color: var(--primary-dark);
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	position:absolute;
	top:-4.5rem;
	left:0rem;
	border:0.5rem solid;
	border-color:var(--primary-dark);
	border-radius:10rem;
	font-weight:bold;
	font-size:6rem;
	text-align:center;
	line-height: 11rem;
	padding:0rem;
}
profile-name username {
	padding-left:12rem;
}
avatar-container {
	display:block;
	max-width:100rem;
	margin-left:auto;
	margin-right:auto;
}
avatar-container avatar {
	display:block;
	height:10rem;
	width:20rem;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}
pagebg.preview {
	height:20rem;
	border-radius:0.5rem;
	display:block;
}
banner.preview {
	height:20rem;
	border-radius:0.5rem;
	display:block;
	margin-left:0rem;
	margin-right:0rem;
	background-size: cover;
	background-position: center center;
	padding-top:0rem;
	border-bottom:none;
}
avatar.preview {
	display:block;
	height:10rem;
	width:20rem;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}
#useravatarCurrent avatar.preview, #useravatarPreview avatar.preview {
	display:block;
	height:12rem;
	width:12rem;
	border:0.5rem solid;
	border-color:var(--primary-dark);
	border-radius:10rem;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
card banner {
	margin-top:-0.5rem;
	margin-left:-0.5rem;
	margin-right:-0.5rem;
	border-top-left-radius: 0.5rem;
	border-top-right-radius: 0.5rem;
	height:10rem;
	padding-top:5rem;
}
card avatar-container {
	margin-left:1rem;
}
card avatar-container avatar {
	height:6rem;
	width:12rem;
}
card banner profile-name {
	display:block;
	max-width:100rem;
	margin-left:0rem;
	margin-right:auto;
	margin-top:2rem;
	height:2rem;
	line-height:2rem;
	color: var(--primary-text);
	font-weight:bold;
	font-size:1rem;
	padding-left:0.5rem;
}
card p {
	font-size:0.95rem;
}
input[type="color"] {
	padding:0.2rem;
	height:2.5rem;
}
input[type="checkbox"] {
	appearance: none;
	background-color: #fff;
	margin: 0;
	font: inherit;
	color: currentColor;
	width: 1.5rem;
	height: 1.5rem;
	border: 0.15rem solid rgb(160,160,160);
	border-radius: 0.3rem;
	transform: translateY(-0.075em);
	display: grid;
	place-content: center;
	cursor:pointer;
}
.check-control {
	font-size: 0.8rem;
	font-weight: bold;
	line-height: 1.5rem;
	display: grid !important;
	grid-template-columns: 1.5rem auto;
	gap: 0.5rem;
	cursor:pointer;
}
.check-control + .check-control {
	margin-top: 1em;
}
input[type="checkbox"]::before {
	content: "";
	width: 1rem;
	height: 1rem;
	transform: scale(0);
	transition: 120ms transform ease-in-out;
	box-shadow: inset 1rem 1rem rgb(0, 129, 126);
	transform-origin: bottom left;
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
	cursor:pointer;
}
input[type="checkbox"]:checked::before {
  transform: scale(1);
}		
div[id^="__lpform"] {
	display:none !important;
}
#content-login input[type=text], #content-login input[type=email], #content-login input[type=password], search input[type=text] {
	width:100%;
	margin-top:0.5rem;
	margin-bottom:0.5rem;
	border:none;
	border-radius:0rem;
	border-bottom:0.15rem solid rgb(160,160,160);
	font-size:0.8rem;
	padding-top:0.3rem;
	padding-bottom:0.3rem;
}
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, textarea:focus, select:focus {
	/*background-color: rgb(240,240,240);*/
	background-color: var(--secondary-light);
	color: var(--secondary-text);
}
input[type=text]:focus-visible, input[type=email]:focus-visible, input[type=password]:focus-visible {
	outline: -webkit-focus-ring-color auto 0px;
	outline-width: 0px;
}
input[type=text]::placeholder, input[type=email]::placeholder, input[type=password]::placeholder {
	color: rgb(200,200,200);
	font-size: 0.8rem;
}
button {
	font-weight:bold;
	font-size:0.8rem;
	padding:0.6rem;
	width:100%;
	border:none;
	border-radius:3rem;
	margin-top:1rem;
	margin-bottom:0.5rem;
	cursor:pointer;
	max-width:20rem;
}
form button:last-child {
	margin-left:1rem;
}
#content-login button {
	background-image:linear-gradient(80deg, rgba(0, 129, 126, 0.6), rgba(200, 0 ,200, 0.6));
	background-color:rgba(0, 129, 126);
	color:rgb(255,255,255);
}
button.cancel {
	background-image:none;
	background-color:var(--secondary-dark);
	color: var(--primary-text);
}
span {
	display:block;
	font-weight:bold;
	font-size:0.8rem;
}
span.psswrd {
	float:right;
}
span.signup {
	margin-top:1rem;
	text-align:center;
}
span.agree {
	margin-top:1rem;
	margin-bottom:1rem;
}
span.agree label {
	display:inline;
}
#terms_dialog, #prvcy_dialog {
	margin:1rem;
	background-color:rgb(255,255,255);
	border-radius:0.5rem;
	padding:3rem;
	color:rgb(80,80,80);
}
#terms_dialog ol, 
#prvcy_dialog ol {
	list-style-type: lower-alpha;
}
#terms_dialog ol li, 
#prvcy_dialog ol li {
	margin-bottom:1rem;
}
#terms_dialog h3, 
#prvcy_dialog h3 {
	margin-bottom:0rem;
	text-decoration: underline;
}
#page_messages {
	background-color:rgba(0,0,0,0.8);
	color:rgb(255,255,255);
	text-align:center;
	border-radius:0.5rem;
	font-size:1rem;
	padding:0.5rem;
	padding-bottom:0rem;
	position: absolute;
	top:1rem;
	left: 1rem;
	right: 1rem;
	margin: auto;
}
#page_messages span, message span {
	transition: opacity 1s;
	padding:0.5rem;
	margin-bottom:0.5rem;
	border-radius:0.5rem;
}
#page_messages span.success, message span.success {
	background-color:rgba(0,200,0,0.6);
}		
#page_messages span.failure, message span.failure {
	background-color:rgba(200,0,0,0.6);
}
#page_messages span.removed, message span.removed {
	opacity: 0;
}
#page_messages:empty, message:empty {
	display:none;
}
#page_dialogs {
	position:fixed;
	top:0;
	left:0;
}
#form-comminfo, #form-commrole {
	min-width:50rem;
}
dialog {
	border:none;
	border-radius:0.6rem;
	background-color: var(--content-block);
}
dialog::backdrop {
	background-color:rgba(0,0,0,0.8); 
}
dialog h0 {
    background-color: var(--primary-dark);
    color: var(--primary-text);
    border-top-left-radius: 0.5rem;
    box-shadow: none;
    font-size: 1.5rem;
    font-weight: 800;
    padding: 0.5rem;
	padding-left: 1rem;
	text-align:left;
	margin:-1rem;
	margin-top:-1rem;
	margin-right:-1rem;
	margin-bottom:1rem;
    display: block;
} 
dialog h0 button {
	float:right;
    height: 2rem;
    width: 2rem;
    margin-top: 0rem;
	background-image: var(--button-close);
}
#DlgTerms h0, #DlgPrvcy h0 {
	display:none;
}
table {
	width:100%;
	background-color:var(--secondary-light);
	border-spacing: 0rem 0.3rem;
	padding-left:0.3rem;
	padding-right:0.3rem;
	padding-top:0.15rem;
	padding-bottom:0.15rem;
	border-radius: 0.5rem;
	margin-top:1rem;
}
table thead tr {
	background-color: var(--primary-mid);
	color: var(--primary-text);
}
table tbody tr {
	background-color:var(--secondary-mid);
}
table tbody tr.click:hover {
	background-color:var(--secondary-mid50);
	cursor:pointer; 
}
table tr td:first-child, table tr th:first-child {
	border-top-left-radius: 0.5rem;
	border-bottom-left-radius: 0.5rem;
}
table tr td:last-child, table tr th:last-child {
	border-top-right-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
}
table td, table th {
	padding:0.5rem;
	text-align: center;
}