body {
	background: #f01b43 url(../images/backPink.jpg);
	font-family: 'Roboto', sans-serif;
	color: #fff;
	margin: 10px 0 40px;
	padding: 0;
}

h1, h2, h3 {
	font-family: 'Roboto Slab', sans-serif;
}

ul, li {
margin: 0;
padding: 0 0 0 15px;
list-style-position:�inside;
}

li { padding: 0 }

a {
	color: #fff;
	font-weight: bold;
}

 #loader {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    font-size: 1.5em;
    color: #333;
  }

#loader img {
    position: absolute;
    left: calc(50% - 12.5px);
    top: calc(50% - 12.5px);
}

#notificationBox {
	height: 32px;
	line-height: 32px;
	text-align: center;
	display: none;
}

.center {
	text-align: center;
}

#page {
  max-width: 360px;
	padding: 5px 5px 35px;
}

.loginForm {
	margin: 10px;
	background-color: rgba(0,0,0,0.25);
	border-radius: 5px;
	padding: 15px;
	text-align: center;
}

.loginForm img {
	width: 25%;
	height: 25%;
}

.loginForm h1 {
	font-size: 18px;
}

.loginForm .err {
	background-color: rgba(0,0,0,0.25);
	padding: 6px;
	border-radius: 2px;
	text-align: center;
	font-size: 10px;
}

.loginForm p {
	text-align: left;
}

.loginForm input[type=email],
.loginForm input[type=password] {
	width: calc(100% - 10px);
	resize: none;
	padding: 6px 3px;
	border-radius: 2px;
	border: 1px solid rgba(0,0,0,0.25);
	outline: none;
	margin: 2px 0;
	font-size: 13px;
	background-color: rgba(255, 255, 255, 0.75);
}

.gallery {
	column-count: 2;
	column-gap: 5px;
	clear: both;
	padding: 15px 0 10px;
}

.gallery img {
	width: 100%;
	height: auto;
}

.gallery div {
	position: relative;
	background: rgba(0,0,0,0.25) url(../images/load.gif) 50% 50% no-repeat;
	border-radius: 5px;
	padding: 5px;
	margin-bottom: 5px;
	color: #fff;
	font-size: 0;
}

.gallery .active span.imageActions {
	display: block;
}

.gallery span.imageActions {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: #fff;
	text-align: center;
	border-radius: 5px;
	background-color: rgba(0,0,0,0.5);
}

.gallery span.imageActions a {
	display: inline-block;
	margin-top: 5px;
	padding: 10px;
	background-color: green;
	color: #fff;
	font-size: 14px;
}

.gallery span.imageActions a.edit {
	background-color: orange;
}

.gallery span.imageActions a.remove {
	background-color: red;
}

#uploadImage {
	display: none;
}

#uploadImageForm {
	margin-top: 20px;
}

.moreMenu {
	display: none;
	position: fixed;
	top: 0;
	bottom: 44px;
	left: 0;
	right: 0;
	padding: 20px;
	background-color: rgb(40, 0, 0, 0.9);
	z-index: 9998;
}

.moreMenu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.moreMenu ul li {
	margin: 15px 0;
	line-height: 24px;
}

.moreMenu ul li a {
	font-size: 14px;
	font-weight: normal;
}


.moreMenu ul li a {
	text-decoration: none;
}
.moreMenu ul li svg {
	float: left;
	margin-right: 10px;
}

#topbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #72081b;
	margin: 0;
	text-align: center;
	z-index: 9998;
	font-size: 0;
	max-width: 370px;
}

#topbar a {
	position: relative;
	display: inline-block;
	color: #fff;
	padding: 10px 0;
	margin: 0;
	font-size: 10px;
	font-weight: normal;
	text-decoration: none;
	border-right: 1px solid rgba(0,0,0,0.25);
	text-align: center;
	width: calc((100% / 6) - 1px);
}


#topbar a.current {
	background-color: rgba(0, 0, 0, 0.5);
}


#topbar a:last-child {
	border: none;
}

#topbar svg {
	height: 18px;
	width: auto;
	margin-bottom: 3px;
}

#topbar a span.count {
	position: absolute;
	right: calc(50% - 12px);
	top: 6px;
	font-size: 0px;
	font-weight: bold;
	border-radius: 50%;
	border: 1px solid rgba(0,0,0,0.5);
	background-color: #f01b43;
	height: 8px;
	line-height: 8px;
	text-align: center;
	width: 8px;
	color: #fff;
}

/** User panel **/

.users {
	clear: both;
	height: 190px;
}

.users .user {
	position: relative;
	width: calc(50% - 5px);
	display: inline-block;
	float: left;
	text-align: center;
	font-weight: bold;
}

.users .user.first {
	margin-right: 10px;
}


.users .user .name {
	font-family: 'Roboto Slab', sans-serif;
	font-size:  16px;
	margin-bottom: 5px;
}

.users .user .activity {
	font-size:  12px;
	margin: 10px 0 5px;
	font-weight: normal;
}


.users .user .activity span {
	position: absolute;
	left: calc(50% - 8.4px);
	top: 87px;
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 3px solid #f01b43;
}

.users .user .activity span.online {
	background-color: lime;
}

.users .user .activity span.today {
	background-color: yellow;
}

.users .user .activity span.offline {
	background-color: orange;
}

.users .user .avatar img {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	padding: 2px;
	border: 2px solid #fff;
}

.cardavatar {
	text-align: center;
	margin: 0;
	padding: 20px 0 0 0 ;
}

.cardavatar img{	
	width: 46px;
	height: 46px;
	border-radius: 50%;
	padding: 2px;
	border: 2px solid #fff;
}


.cardsContainer {
	position: relative;
	display: none;
}

.cardImage {
	width: 100%;
	height: auto;
}

.bgContainer {
	margin-top: 11px;
	background-position: center center;
	background-repeat: no-repeat; 
	background-size: cover;
	min-height: calc(100vh - 291px);
	background-color: rgba(0, 0, 0, 0.625);
  background-blend-mode: overlay;
  border: 3px solid #fff;
  border-radius: 10px;
}

.bgContainer p {
	padding: 10px;
}

.users .user .score {
	font-size:  14px;
	margin-top: 5px;
}

.users .user {
	text-align: center;
}

table.form {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0px;
	font-size: 14px;
	margin: 10px 0 0;
	border-radius: 8px;
	border-top: 1px solid rgba(255, 255, 255, 0.4);
	border-left: 1px solid rgba(255, 255, 255, 0.4);
	border-right: 1px solid rgba(255, 255, 255, 0.4);
	padding: 10px 0;
}

table.form td,
table.form th {
	padding: 5px 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}


table.form tr:nth-child(odd) td {
	background-color: rgba(255,255,255,0.2);
}

.users .user table {
	border-collapse: collapse;
	border-spacing: 0px;
	font-size: 11px;
	margin: 10px 0 0;
	border-radius: 8px;
	overflow: hidden;
}

.users .user table td {
	width: 25%;
	height: 24px;
	text-align: center;
}

.users .user table tr.icons td {
	background-color: rgba(0, 0, 0, 0.2);
	font-size: 8px;
	height: 32px;
}

.users .user table tr.values td {
	background-color: rgba(255, 255, 255, 0.2);
}

.users .user table svg {
	height: 14px;
	width: 100%;
}


/** Tools **/

.tools {
	clear: both;
	padding: 30px 0 10px;
	text-align: center;
}

.button {
	padding: 7px;
	border-radius: 5px;
	border: 2px solid #fff;
	color: #fff;
	text-decoration: none;
	font-size: 12px;
	background-color: #f01b43;
}

.button svg {
	width: 12px;
	height: 12px;
	margin-right: 6px;
}


.button:hover {
	background-color: rgba(255, 255, 255, 0.2);
}


/** addTask **/

.addTask {
	display: none;
	clear: both;
	margin: 10px 0;
	padding: 10px 10px 10px;
	background-color: rgba(0,0,0,0.25);
	border-radius: 5px;
	margin-bottom: 10px;
	color: #fff;
}

.addTask.imgPicken {
	display: block;
}

.addTask.taskPicken {
	display: block;
}

.addTask.editTask {
	display: block;
}

.addTask label {
	display: block;
	font-size: 12px;
	margin-bottom: 5px;
}

.addTask input,
.addTask textarea {
	width: calc(100% - 10px);
	resize: none;
	padding: 3px;
	border-radius: 2px;
	border: 1px solid rgba(0,0,0,0.25);
	outline: none;
	margin: 2px 0;
	font-size: 13px;
	background-color: rgba(255, 255, 255, 0.75);
}

.addTask img {
	width: 100%;
	height: auto;
	background-color: rgba(255, 255, 255, 0.5);
}

select,
input[type=search],
input[type=datetime-local] {
	width: 100%;
	min-width: 100%;
	resize: none;
	padding: 6px 3px;
	border-radius: 2px;
	border: 1px solid rgba(0,0,0,0.25);
	outline: none;
	margin: 2px 0;
	font-size: 13px;
	background-color: rgba(255, 255, 255, 0.75);
	margin-bottom: 10px;
}

/** Add Message to chat **/


.addMessage {
	clear: both;
	margin: 10px 0;
	padding: 10px 10px 10px;
	background-color: rgba(0,0,0,0.25);
	border-radius: 5px;
	margin-bottom: 10px;
	color: #fff;
}

.addMessage p {
	margin: 0 0 5px;
	padding: 0;
}

.addMessage label {
	display: block;
	font-size: 12px;
	margin-bottom: 5px;
}

.addMessage input,
.addMessage textarea {
	width: calc(100% - 10px);
	resize: none;
	padding: 3px;
	border-radius: 2px;
	border: 1px solid rgba(0,0,0,0.25);
	outline: none;
	margin: 2px 0;
	font-size: 13px;
	background-color: rgba(255, 255, 255, 0.75);
}

.addMessage img {
	width: 100%;
	height: auto;
}

.addMessage button {
	display: block;
	width: 100%;
}

/** Tasks list **/

.tasks {
	padding: 10px 0;
}

.tasks.imgPicken {
	display: none;
}

.tasks .task {
	border-radius: 5px;
	padding: 10px;
	margin-bottom: 10px;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.25);
}

.tasks .task .taskImage {
	font-size: 0;
	background: rgba(0,0,0,0.25) url(../images/load.gif) 50% 50% no-repeat;
}

img.image {
	width: 100%;
	height: auto;
}

.ratelinks {
	text-align: center;
	margin: 0 0 20px;
	list-style-type: none;
}


.ratelinks li {
	display: inline-block;
	margin-right: 24px;
}


.ratelinks li:last-child {
	margin: 0;
}

.ratelinks a {
	text-decoration: none;
	font-size: 46px;
}

.tasks .task .avatar {
	float: left;
	display: inline-block;
	font-size: 13px;
	margin-right: 5px;
}

.tasks .task .avatar img {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 2px solid #fff;
}

.tasks.message .task .avatar img {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 2px solid #fff;
	margin-right: 5px;
}

.tasks .task a.score {
	float: left;
	display: inline-block;
	background-color: #f01b43;
	width: 32px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	border-radius: 50%;
	border: 2px solid #fff;
	font-size: 13px;
	margin-right: 10px;
	color: #fff;
	text-decoration: none;
}

.tasks .task .meta {
	position: relative;
	font-size: 12px;
	line-height: 32px;
	color: rgba(255, 255, 255, 0.75);
}

.tasks.message .task .meta {
	line-height: 24px;
}

.tasks .task .meta a {
	padding: 3px 6px;
	float: right;
	color: #fff;
	text-decoration: none;
	text-align: center;
}

.tasks .task .meta ul.subnav {
	display: none;
	position: absolute;
	right: 0;
	margin: 5px 0 0 0;
	padding: 0;
	list-style-type: none;
	-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.5);
}

.tasks .task .meta ul.subnav li {
	display: block;
	background-color: #fff;
	color: #444;
	border-bottom: 1px solid #ddd;
}

.tasks .task .meta ul.subnav li a {
	display: block;
	color: #444;
	float: none;
	text-align: left;
	padding: 3px 24px 3px 12px;
}

.tasks .task .meta svg {
	height: 24px;
	width: auto;
}

.tasks .task h2,
.tasks .task h3 {
	clear: both;
}

.tasks .task h2 {
	font-size: 24px;
}


.tasks .task h2 svg {
	height: 22px;
	width: 22px;
}

.tasks .task h2 a.rating {
	float: right;
	color: rgba(255,255,255,0.5);
	text-decoration: none;
	margin-right: 1px;
}

.tasks .task h2 a.rating:hover {
	color: #d4af37;
}

.tasks .task h2 span.rating {
	float: right;
	color: #d4af37;
}


.tasks .task h2 a.unlike {
	float: right;
	color: rgba(255,255,255,0.5);
	text-decoration: none;
	margin-right: 1px;
}

.tasks .task h2 a.unlike:hover {
	color: #d4af37;
}

.tasks .task h2 span.unlike {
	float: right;
	color: #d4af37;
}

.tasks .task h2 a.bookmark {
	float: right;
	color: rgba(255,255,255,0.5);
	text-decoration: none;
}

.tasks .task h2 a.bookmark:hover {
	color: #d4af37;
}

.tasks .task h2 a.bookmark.marked {
	float: right;
	color: #d4af37;
}

.tasks .task h2 span.bookmark {
	float: right;
	color: #d4af37;
}

.tasks .task .comments {
	
}

.tasks .task .comments .comment {
	font-size: 13px;
	background-color: rgba(255, 255, 255, 0.25);
	padding: 3px;
	border-radius: 2px;
	margin: 2px 0;
	overflow-wrap: break-word;
}

.tasks .task form {
	display: block;
	margin-top: 5px;
}

.tasks .task form::after {
  content: "";
  clear: both;
  display: table;
}

.tasks .task form input,
.select_bonus {
	width: calc(100% - 80px);
	padding: 6px;
	border-radius: 2px;
	border: 1px solid rgba(0,0,0,0.25);
	outline: none;
	margin: 2px 0;
	font-size: 13px;
	background-color: rgba(255, 255, 255, 0.75);
	float: left;
}

.tasks .task form .sendComment,
.tasks .task form .uploadCommentImage {
	width: 27.8px;
	height: 27.3px;
	line-height: 27.3px;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.85);
	border-radius: 2px;
	border: 1px solid rgba(0,0,0,0.25);
	outline: none;
	margin: 2px 0 2px 3.2px;
	float: left;
	cursor: pointer;
	color: #666;
}

.commentImage {
	display: none;
}

a.commentImagesLink img.commentImages {
	display: block;
	width: 100%;
	height: auto;
}

a.commentImagesLink {
	margin-top: 10px;
	display: block;
	border: 1px solid rgba(0,0,0,0.25);
	border-radius: 4px;
	padding: 5px;
	width: 50%;
	height: auto;
	overflow: hidden;
	background-color: #fff;
	font-size: 0;
}

.tasks .task form .sendComment svg,
.tasks .task form .uploadCommentImage svg {
	margin-top: 4.7px;
	width: 18px;
	height: 18px;
}

.tasks .task h2,
.tasks .task h3,
.tasks .task p {
	margin: 10px 0;
	padding: 0;
}

.task input,
.task textarea {
	width: 100%;
	/* min-width: calc(100% - 14px); */
	resize: none;
	padding: 6px;
	border-radius: 2px;
	border: 1px solid rgba(0,0,0,0.25);
	outline: none;
	margin: 2px 0;
	font-size: 13px;
	background-color: rgba(255, 255, 255, 0.75);
}

.task .button {
	padding: 7px;
	border-radius: 5px;
	border: 2px solid #fff;
	color: #fff;
	text-decoration: none;
	font-size: 12px;
	background-color: #f01b43;
	cursor: pointer;
}

.task input.button:disabled {
	background-color: dimgrey;
	cursor: not-allowed;
}

.grow-wrap {
  display: grid;
}
.grow-wrap::after {
  content: attr(data-replicated-value) " ";
  white-space: pre-wrap;
  visibility: hidden;
}

.grow-wrap > textarea {
  resize: none;
  overflow: hidden;
}

.grow-wrap > textarea,
.grow-wrap::after {
  padding: 0.5rem 4px;
  font: inherit;
  grid-area: 1 / 1 / 2 / 2;
}



.datetime {
	font-size: 9px;
}

.bonus {
	background-color: #d4af37;
	padding: 5px;
	margin-bottom: 10px;
	text-align: center;
	color: #000;
font-size: 12px;
}

.bonusPicture {
	width: 60%;
	height: auto;
}

.tasks .task .bonus h3, 
.tasks .task .bonus p {
	margin: 3px 0;
}

.bonus h3 {
	line-height: 22px;
	height: 22px;
	font-size: 16px;
}

.bonus svg {
	/* margin-right: 7px; */
	width: 18px;
	height: 18px;
}

/* Editace uživatelských účtů */

.editAccount {
	clear: both;
	text-align: center;
}

.editAccount div {
	margin: 10px 0;
	padding: 10px 10px 10px;
	background-color: rgba(0,0,0,0.25);
	border-radius: 5px;
	margin-bottom: 10px;
	color: #fff;

}
.editAccount label {
	display: block;
	font-size: 12px;
	margin-bottom: 5px;
	text-align: left;
}
.editAccount input,
.editAccount textarea {
	width: calc(100% - 10px);
	resize: none;
	padding: 3px;
	border-radius: 2px;
	border: 1px solid rgba(0,0,0,0.25);
	outline: none;
	margin: 2px 0;
	font-size: 13px;
	background-color: rgba(255, 255, 255, 0.75);
	color: #222;
}

.editAccount .avatar img {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	padding: 2px;
	border: 2px solid #fff;
}

/* Notifikační centrum */

.notifications {
	clear: both;
	padding: 10px 0;
}

.notifications .notification {
	background-color: rgba(255,255,255,0.25);
	border-radius: 5px;
	padding: 10px;
	margin-bottom: 10px;
	color: #fff;
}

.notifications .notification.unreaded {
	background-color: rgba(0,0,0,0.25);
}

#pagination {
	text-align: center;
	margin-bottom: 30px;
}

#pagination a.pagination,
#pagination input {
	display: inline-block;
	padding: 7px 10px;
	border-radius: 5px;
	border: 2px solid #fff;
	color: #fff;
	text-decoration: none;
	font-size: 12px;
	background-color: rgba(255,255,255,0.25);
	margin: 0 10px;
}

#pagination form {
	display: inline-block;
	margin: 0;
	padding: 0;
}

#pagination input {
	max-width: 32px;
	padding: 7px 0;
	margin: 0;
	background: none;
	border: none;
	offset: none;
	font-size: 15px;
	text-align: center;
}

#pagination input:focus {
	border: none;
	outline: none;
}

#pagination small {
	display: inline-block;
	margin-top: 15px;
	color: rgba(255,255,255,0.5);
}

#pagination input::-webkit-outer-spin-button,
#pagination input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


#pagination span.pagination {
	display: inline-block;
	padding: 7px 10px;
	border-radius: 5px;
	border: 2px solid #fff;
	color: #fff;
	text-decoration: none;
	font-size: 12px;
	background-color: rgba(0,0,0,0.25);
	margin: 0 10px;
	opacity: 0.25;
}

.backlink {
	display: block;
	padding: 20px 0;
	text-align: center;
}

.counter {
	background-color: rgba(0,0,0,0.25);
	padding: 10px;
	border-radius: 5px;
	font-size: 13px;
	text-align: center;
}