body {
	background-color: #7288BF;
}

.header {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* left space, title, right space */
    align-items: center;
	background-color: #95A1C1;
	padding: 30px;
}

.header-title {
    grid-column: 2; /* put title in middle column */
    text-align: center;
}

.header-title h1 {
    margin: 0;
    font-size: 2em;
}

.header-login-input {
    margin: 0.2em 0;
	padding-right: 0.2em;
}

.header-login {
    grid-column: 3; /* login form on the far right */
    justify-self: end;
}

.header-login label {
    margin-right: 0.5em;
}

.footer {
	background-color: #95A1C1;
	padding: 20px;
	text-align: center;
}

.content {
	display: flex;
	justify-content: space-around;
	padding: 20px;
}

.column {
	background-color: #A1ADCE;
	width: 60%;
	border: 1px solid #ccc;
	padding: 15px;
	text-align: center;
}

.lsidebar {
	background-color: #95A1C1;
	width: 15%;
	border: 1px solid #ccc;
	padding: 15px;
}

.user-creation-block {
	max-width: 500px;
	background-color: #bcc2d4;
	border: 1px solid #ccc;
	padding: 12px;
	margin: 0 auto; /* centers horizontally */
}

.user-creation-block-row {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
}

.user-creation-block-row label {
	width: 150px;
	text-align: right;
	padding-right: 12px;
}

.user-creation-block-row input {
	flex: 1;
	box-sizing: border-box;
}

.user-creation-block-row button[type="submit"] {
	flex: none;          /* don’t grow */
	width: auto;         /* size to content */
	padding: 8px 16px;   /* some padding */
	margin-left: 150px;  /* align with inputs if you want */
}

.user-creation-feedback {
	margin-top: -24px;
	margin-left: 150px; /* same as label width */
	text-align: left;
}

.user-creation-valid {
  color: green;
}

.user-creation-invalid {
  color: rgb(172, 41, 41);
}

.rsidebar {
	background-color: #95A1C1;
	width: 15%;
	border: 1px solid #ccc;
	padding: 15px;
}

img.common {
	width: 60%;
	height: auto;
}

img.catNipShrine {
	width: 60%;
	height: auto;
}

img.none {}

.nav-bar {
	display: flex;
	align-items: center;
	background-color: #A1ADCE;
	padding: 10px 20px;
	gap: 20px;
	position: relative;
}

.nav-item {
	position: relative;
}

.nav-link {
	text-decoration: none;
	color: #333;
	padding: 8px 12px;
	cursor: pointer;
	display: inline-block;
}

.dropdown-content {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background-color: #A1ADCE;
	border: 1px solid #ccc;
	box-shadow: 0 2px 6px rgba(0,0,0,0.1);
	z-index: 100;
	min-width: 150px;
}

.dropdown-content a {
	display: block;
	padding: 8px 12px;
	color: #333;
	text-decoration: none;
}

.dropdown-content a:hover {
	background-color: #95A1C1;
}

.nav-item:hover .dropdown-content {
	display: block;
}

.search-container {
	margin-left: auto;
}

input[type="text"] {
	padding: 6px;
	font-size: 14px;
}

.app {
    width: 100%;    /* or 100%, flexbox, grid, etc. */
    height: calc(100vh -  200px);   /* required for proper sizing */
    border: 2px solid rgb(0, 0, 0); /* just so you can see it */
}

.app canvas {
  width: 100% !important;
  height: 100% !important;
  display: block; /* removes inline gaps */
}

.sn-bar {
	display: flex;
	background-color: #b1d5f3;
	justify-content: space-around;
	align-items: center;
	width: fit-content;
	padding: 10px;
	border: 1px solid #ccc;
    margin: 0 auto; /* Centers the div horizontally */
}

.sn-bar-item {
	display: flex;
	background-color: #D7EDFF;
    margin: 0 auto; /* Centers the div horizontally */
}

.sn-bar-item img {
	display: flex;
	width: 64px;
	height: 64px;
    margin: 0 auto; /* Centers the div horizontally */
}

.sn-bar-item .icon_wall {
	display: flex;
	width: 64px;
	height: 64px;
	background-image: url("/assets/images/sn/icon_wall.png");
	background-size: cover;
    margin: 0 auto; /* Centers the div horizontally */
}

.sn-bar-item a:hover .icon_wall {
	background-image: url("/assets/images/sn/icon_wall_hover.png");
}

.sn-bar-item .icon_profile {
	display: flex;
	width: 64px;
	height: 64px;
	background-image: url("/assets/images/sn/icon_profile.png");
	background-size: cover;
    margin: 0 auto; /* Centers the div horizontally */
}

.sn-bar-item a:hover .icon_profile {
	background-image: url("/assets/images/sn/icon_profile_hover.png");
}

.sn-bar-item .icon_connections {
	display: flex;
	width: 64px;
	height: 64px;
	background-image: url("/assets/images/sn/icon_connections.png");
	background-size: cover;
    margin: 0 auto; /* Centers the div horizontally */
}

.sn-bar-item a:hover .icon_connections {
	background-image: url("/assets/images/sn/icon_connections_hover.png");
}

.sn-bar-item .icon_messages {
	display: flex;
	width: 64px;
	height: 64px;
	background-image: url("/assets/images/sn/icon_messages.png");
	background-size: cover;
    margin: 0 auto; /* Centers the div horizontally */
}

.sn-bar-item a:hover .icon_messages {
	background-image: url("/assets/images/sn/icon_messages_hover.png");
}

.sn-bar-item .icon_cliques {
	display: flex;
	width: 64px;
	height: 64px;
	background-image: url("/assets/images/sn/icon_cliques.png");
	background-size: cover;
    margin: 0 auto; /* Centers the div horizontally */
}

.sn-bar-item a:hover .icon_cliques {
	background-image: url("/assets/images/sn/icon_cliques_hover.png");
}

.sn-bar-item p {
	margin: 4px 0 4px 0;
	text-align: center;
}

.sn-bar-item a {
	padding: 4px;
	color: #035A99;
	background-color: #D7EDFF;
}

.sn-bar-item a:hover {
	color: #024270;
	background-color: #87C5FF;
}