body {
  font-family: sans-serif;
  -webkit-text-size-adjust: none;
}

input:focus, select:focus, textarea:focus, button:focus {
    outline: none;
}

div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

span {
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-all;
  word-break: break-word;
}

img {
	border: none;
}


.hide {
	display: none;
}


.container {
	width: 550px;
	margin-left: auto;
	margin-right: auto;
}


.navigation {
	width: 100%;
	display: flex;
}


.navigation-inner {
	flex: 1; /* All items take equal space */
	display: flex;
   align-items: center; /* vertical align content */
}

.navigation-left {
	flex: 1; /* or specific width if needed */
}


.navigation-left-left {
	flex: 0 0 20%;
    display: flex;
    align-items: center;   /* vertical center image */
    justify-content: flex-start;
}

.navigation-left-right {
	flex: 0 0 80%;
    display: flex;
    align-items: center;   /* vertical center text */
    justify-content: left;
}

.loggedoutuser {
	display: block;   
	width: 100%;
}


.navigation-center {
    display: flex;
	align-items: center;
	justify-content: center;
}

.navigation-right {
  display: flex;
  align-items: center;
  justify-content: right;
}






.logo-clickable {
	text-decoration: none;
	font-weight: bold;
	font-family: impact;
	color: red;
}

.logo {
	font-weight: bold;
	font-family: impact;
	color: red;
}

.login {
	font-weight: bold;
	font-family: sans-serif;
	color: #000;
	margin-left: 7px;
	text-decoration: none;
}


.post-button-area {
	display: inline;
	margin-right: 12px;
}

.search-icon {
	display: none;
	font-weight: bold;
	margin-right: 10px;
}

.menu-icon {
	display: inline;
}


.baddie {
	color: #3f94d4;
}

.rank {
	color: #000;
}

i.fa-magnifying-glass {
	-webkit-text-stroke: 1px black;
	cursor: pointer;
	
}

i.fa-bars {
	-webkit-text-stroke: 1px black;
	cursor: pointer;
}

.search-area {
	width: 100%;
	margin-top: 20px;
}

.search {
	width: 100%;
}

.search:after {
  content: "";
  display: table;
  clear: both;
}

.search-left {
	width: 90%;
	float: left;
}

.search-right {
	width: 10%;
	float: right;
}

#search-box {
  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
   -webkit-border-radius: 2px;
   -webkit-padding-end: 20px;
   -webkit-padding-start: 2px;
   border: 1px solid #dcdee3;
   color: #515152;
   font-size: inherit;
   overflow: hidden;
   padding-left: 8px;
   white-space: nowrap;
   background-color: #ffffff;
   appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
   font-size: 20px;
   font-weight: bold;
   width: 100%;
   height: 53px;
   border-top-left-radius: 8px;   
   border-bottom-left-radius: 8px; 
   border-right: none;
}

.search-button {
	width: 100%;
	height: 53px;
	background: transparent;
  color: inherit;
  cursor: pointer; 
border-top-right-radius: 8px;   
   border-bottom-right-radius: 8px; 
  border: 1px solid #dcdee3;   /* full border */
  border-left: none;        /* remove left border */
}

.menu {
	width: 30%;
	background-color: #f5f7fa;
	min-height: 100px;
	padding: 8px;
	margin-top: 15px;
	display: none;
	background: linear-gradient(to right, #f5f7fa, transparent);
}


.list-menu-icon {
	color: #949494;
}


.menu-links {
	text-decoration: none;
	color: #a1a1a1;
	font-weight: 600;
	font-size: 16px;
}


.menu-container {
	width: 100%;
	margin-bottom: 10px;
}

.menu-container:after {
  content: "";
  display: table;
  clear: both;
}

.menu-container-left {
	width: 15%;
	float: left;
}

.menu-container-right {
	width: 85%;
	float: right;
}

.cookie-notice {
	width: 100%;
	background-color: #fcfcfc;
	margin-top: 10px;
	margin-bottom: 40px;
	font-size: 15px;
	color: #b1b1b3;
	padding: 5px;
	border-radius: 6px;
}

.cookie-notice-top {
	width: 100%;
	margin-bottom: 15px;
}

.cookie-notice-link {
	color: #b1b1b3;
	font-size: 13px;
}


.accept-all-cookies {
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 12px;
	padding-right: 12px;
	background-color: #49a6e3;
	border-radius: 10px;
	color: #ffffff;
	text-decoration: none;
	margin-left: 12px;
}


.only-necessary-cookies {
	color: #5da8d9;
	text-decoration: none;
	font-size: 12px;
}

.search-links {
	width: 100%;
	margin-top: 15px;
}

.search-links-link {
	margin-right: 9px;
	text-decoration: none;
	color: grey;
	font-size: 16px;
}

.search-links-highlighted {
	color: #3f94d4;
	font-weight: bold;
	font-size: 16px;
}

.footer {
	width: 100%;
	margin-top: 60px;
}

.footer a {
	text-decoration: none;
	color: grey;
	font-size: 12px;
}

.footer-bar {
	font-size: 11px;
	color: grey;
	margin-left: 5px;
	margin-right: 5px;
}

.main {
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
	min-height: 475px;
}

.access-logo {
	width: 100%;
	text-align: center;
	margin-top: 30px;
}

.boxpad {
  border: 1px solid #f7f7f7;
  box-shadow: 1px 1px #e2e2e2;
  padding: 6px;
  background-color: #ffffff;
}

.access {
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 15px;
	padding-bottom: 30px;
}

.box {
  -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
   -webkit-border-radius: 2px;
   -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
   -webkit-padding-end: 20px;
   -webkit-padding-start: 2px;
   border: 1px solid #bfbfbf;
   color:#4c4d4d;
   font-size: inherit;
   overflow: hidden;
   padding-left: 5px;
   white-space: nowrap;
   background-color: #ffffff;
   appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
   font-size: 18px;
   font-weight: bold;
   height: 48px;
   width: 100%;
}

.box::placeholder {
    color: #9c9c9c; /* Light gray */
    
}

.access-space {
	margin-bottom: 30px;
}

.access-space-reset {
	margin-bottom: 3px;
}

.reset-password-link {
	width: 100%;
	margin-bottom: 27px;
}

.reset-password-link a {
	color: #3f94d4;
	font-size: 14px;
	text-decoration: none;
}

.access-button {
	width: 100%;
	margin-top: 20px;
}



.button {
	background-color: #F8F8F8;
  background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1);
  background-image: -moz-linear-gradient(top,#f8f8f8,#f1f1f1);
  background-image: -ms-linear-gradient(top,#f8f8f8,#f1f1f1);
  background-image: -o-linear-gradient(top,#f8f8f8,#f1f1f1);
  background-image: linear-gradient(top,#f8f8f8,#f1f1f1);
	border: 1px solid #c3c6c9;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	cursor: pointer;
	font-weight: bold;
	text-align: center;
	line-height: 27px;
	padding: 0 8px;
	text-decoration: none;
	font-size: 18px;
	color: #000;
}


.button.yellow {
  background-color: #1b97e2;
  background-image: -webkit-linear-gradient(top,#1b97e2,#1583c6);
  background-image: -moz-linear-gradient(top,#1b97e2,#1583c6);
  background-image: -ms-linear-gradient(top,#1b97e2,#1583c6);
  background-image: -o-linear-gradient(top,#1b97e2,#1583c6);
  background-image: linear-gradient(top,#1b97e2,#1583c6);
  border: 1px solid #1583c6;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  cursor: pointer;
  font-weight: bold;
  text-align: center;
  line-height: 27px;
  padding: 0 8px;
  text-decoration: none;
}



.button.orange {
  background-color: #ef632f;
  background-image: -webkit-linear-gradient(#ef632f, #e55e2d);
  background-image: -moz-linear-gradient(#ef632f, #e55e2d);
  background-image: -ms-linear-gradient(#ef632f, #e55e2d);
  background-image: -o-linear-gradient(#ef632f, #e55e2d);
  background-image: linear-gradient(#ef632f, #e55e2d);
  border: 1px solid #d3582a;
  color: #ffffff;
}


.button.orange:hover {
  background-color: #ef632f;
  background-image: -webkit-linear-gradient(#ef632f, #db5727);
  background-image: -moz-linear-gradient(#ef632f, #db5727);
  background-image: -ms-linear-gradient(#ef632f, #db5727);
  background-image: -o-linear-gradient(#ef632f, #db5727);
  background-image: linear-gradient(#ef632f, #db5727);
  border: 1px solid #d3582a;
}



.button.blue {
	border: 1px solid #3986bf;
	background-color: #3f94d4;
	color: #ffffff;
	background-image: -webkit-linear-gradient(top,#3f94d4,#4999d6);
	background-image: -moz-linear-gradient(top,#3f94d4,#4999d6);
	background-image: -ms-linear-gradient(top,#3f94d4,#4999d6);
	background-image: -o-linear-gradient(top,#3f94d4,#4999d6);
	background-image: linear-gradient(top,#3f94d4,#4999d6);
	
}


.button.blue:hover {
	border: 1px solid #3986bf;
	background-color: #3f94d4;
	color: #ffffff;
	background-image: -webkit-linear-gradient(top,#3f94d4,#4999d6);
	background-image: -moz-linear-gradient(top,#3f94d4,#4999d6);
	background-image: -ms-linear-gradient(top,#3f94d4,#4999d6);
	background-image: -o-linear-gradient(top,#3f94d4,#4999d6);
	background-image: linear-gradient(top,#3f94d4,#4999d6);
	font-size: 20px;
}


.accessbutton {
	width: 100%;
	height: 45px;
}

.post-button {
	font-size: 15px;
	height: 30px;
	display: flex;
    align-items: center; /* vertical center */
    justify-content: center; /* horizontal center */
}

.access-title {
	margin-top: 0px;
	font-size: 25px;
}

.access-description {
	margin-top: 0px;
	font-size: 15px;
	color: #636363;
	margin-bottom: 30px;
}

.access-space-accept {
	width: 100%;
	margin-top: 20px;
	font-size: 15px;
	color: #8b8b8c;
	line-height: 23px;
	background-color: #f0f6fc;
	padding: 8px;
	border-radius: 5px;
}

.access-space-accept a {
	color: #3f94d4;
	text-decoration: none;
}

.access-links {
	width: 100%;
	margin-top: 35px;
	text-align: center;
}

.access-links a {
	font-weight: bold;
	color: #3f94d4;
	text-decoration: none;
	font-size: 20px;
}


.loggedoutuser {
	border: none;
}

.error {
	color: #f71c05;
	font-weight: bold;
	font-size: 15px;
}

.consoleerror {
	font-size: 18px;
	margin-top: 15px;
} 

.profile-photo-edit-title {
	width: 100%;
	text-align: center;
	font-size: 22px;
	font-weight: 900;
}

.profile-photo-edit-upload {
	width: 100%;
	text-align: center;
}

.profile-photo-edit-photo {
	width: 100%;
	margin-top: 30px;
	margin-bottom: 30px;
	text-align: center;
}

#file-upload {
	display: none;
}

.file-btn {
  display: inline-block;
  background-color: #F8F8F8;
  background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1);
  background-image: -moz-linear-gradient(top,#f8f8f8,#f1f1f1);
  background-image: -ms-linear-gradient(top,#f8f8f8,#f1f1f1);
  background-image: -o-linear-gradient(top,#f8f8f8,#f1f1f1);
  background-image: linear-gradient(top,#f8f8f8,#f1f1f1);
	border: 1px solid #c3c6c9;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	cursor: pointer;
	font-weight: bold;
	text-align: center;
	line-height: 27px;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 7px;
	padding-right: 7px;
	text-decoration: none;
	font-size: 17px;
	color: #000;
}

#messages {
	width: 100%;
	background-color: #3f94d4;
	color: #fff;
	font-weight: bold;
	text-align: center;
	padding-top: 8px;
	padding-bottom: 8px;
	border-radius: 5px;
	font-size: 16px;
	margin-bottom: 30px;
	display: none;
}

.logoutlink {
	color: #707070;
}

.main-edit-photo {
	margin-top: 40px;
}

.access-main {
	margin-top: 30px;
}