:root {
	--color1: rgb(11, 51, 59);
	--color2: rgb(213, 170, 68);
	--color3: rgb(250, 220, 148);
  --alert-color: rgb(207, 7, 7);
	--header-height-mobile: 50px;
	--header-height-tablet: 60px;
	--header-height-desktop: 70px;
	--button-width-mobile: 64px;
	--button-height-mobile: 64px;
	--button-width-tablet: 90px;
	--button-height-tablet: 90px;
	--button-width-desktop: 100px;
	--button-height-desktop: 100px;
	--button-staff-color: var(--color1);
	--button-rooms-color: var(--color1);
	--button-staff-text-color: var(--color3);
	--button-rooms-text-color: var(--color3);
	--button-border: 1px solid var(--color1);
	--button-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.4);
	--message-color-confirmed: var(--color2);
	--message-color-unconfirmed: var(--color3);
	--message-text-color: var(--color1);
	--background-buttons-section: var(--color2);
	--background-message-section: var(--color1);
}

/*general*/
html, body {
	position: relative;
	width: 100%;
	height: 100%;
	font-size: 12px;
}

body {
	background-color: var(--background-message-section);
	color: #333;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

main {
	height: calc(100vh - var(--header-height-mobile));
	text-align: center;
	padding: 0;
	margin: 0 auto;
}

a {
	color: rgb(0, 100, 200);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:visited {
	color: rgb(0, 80, 160);
}

ul {
	margin: 0 !important;
	padding: 0 !important;
}

label {
	display: block;
}

input, button, select, textarea {
	font-family: inherit;
	font-size: inherit;
	-webkit-padding: 0.4em 0;
	padding: 0.4em;
	margin: 0 0 0.5em 0;
	box-sizing: border-box;
	border: 1px solid #ccc;
}

input:disabled {
	color: #ccc;
}

/*Sections*/
.content {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.header-container {
	display: flex;
	justify-content: space-between;
	height: var(--header-height-mobile);
	width: 100%;
	background-color: white;
}

.hamburger {
	padding-left: 1.7em;
	text-decoration: none;
	box-shadow: none;
	border: none;
}

button:active .hamburger {
	background-color: white;
	box-shadow: none;
	color: black;
}

/* buttons => from App.svelte */

.staff ul,
.rooms ul {
  display: flex;
  flex-flow: row wrap;
  margin-left: -10px;
  margin-right: -10px;
}
.staff ul li,
.rooms ul li {
  padding: 0 10px;
  margin-bottom: 20px;
}

/* SOS => SOSButton.svelte */
.sos {
  background: var(--alert-color);
  color: #fff;
}

.sos .icon {
	color: black!important;
	font-size: 2em!important;
}

button:not(:disabled):active .hamburger {
	background-color: white;
	box-shadow: none;
	color: black;
}

.logo img {
	width: auto;
	height: 40px;
	position: absolute;
	padding: 5px;
	transform: translateX(-50%);
}

.current-user {
	display: flex;
	align-items: center;
	padding-right: 1.7rem;
	color: rgb(11, 51, 59);
	font-size: 1.2rem;
}

.button-area {
	display: flex;
	flex-direction: column;
	padding: 0.8em 0.4em 0 0.4em;
	background-color: var(--background-buttons-section);
}

.staff, .rooms {
	width: 100%;
}


.rooms .disabled {
	background-color: rgb(115, 129, 133);
	box-shadow: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.4);
}

.info-area {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	overflow: auto;
	padding: 0.8em;
	padding-bottom: 10px;
}

.protocol {
	width: 100%;
}

.sidebar {
	width: 100%;
	display: flex;
	padding-top: 20px;
}

/*buttons*/
.button {
	width: var(--button-width-mobile);
	height: var(--button-height-mobile);
	cursor: pointer;
	display: block;
	text-align: center;
	border: var(--button-border);
	box-shadow: var(--button-shadow);
}

.rooms .active, .staff .active {
	background-color: rgb(250, 220, 148);
	box-shadow: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.4);
	color: black;
	outline: none !important;
}

.rooms:not(:disabled) .active {
	background-color: rgb(250, 220, 148);
	box-shadow: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.4);
	color: black;
}

.button:disabled, .button:disabled .icon {
	color: #999;
}

.room-number:disabled {
	opacity: 0.7 !important;
}

.button:focus {
	border-color: #666;
}

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

.button .icon {
	display: block;
	width: 50%;
	height: 50%;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	font-size: 1.6em;
	color: white;
}

.button .icon img {
	position: absolute;
	width: 80%;
	height: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.button .text {
	margin-top: 5px;
	display: block;
}

.staff-member-button, .room-number-button, .sos-button {
	padding: 5px !important;
	margin-bottom: 0px !important;
}

.staff-member {
	background-color: var(--button-staff-color);
	color: var(--button-staff-text-color);
}

.room-number {
	background-color: var(--button-rooms-color);
	color: var(--button-rooms-text-color);
}

/*Message-Area*/
.message:first-of-type {
	margin-top: 0;
}

.message {
	margin-top: 10px;
	text-align: left;
	display: list-item;
}

.details {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	width: 100%;
	color: var(--message-text-color);
}

.message.sos {
  background: transparent;
}
.message.sos .message-main {
  background-color: var(--alert-color);
  color: #fff;
}

.message-main {
	font-size: 1.2em;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: var(--message-color-unconfirmed);
	padding: 10px;
}

.message-main .member {
	display: flex;
	width: 35%;
	align-items: flex-start;
}

.message-main .to {
	width: 10%;
	font-weight: 600;
}

.message-main .room {
	width: 55%;
	text-align: left;
}

.message .message-from {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: var(--message-color-unconfirmed);
	margin-left: 3px;
	padding: 5px;
}
.message.sos .message-from {
  background-color: var(--alert-color);
  color: #fff;
}

.message .timestamp, .message .from {
	font-size: 0.8em;
	text-align: left;
}

.timestamp {
	margin-right: 5px;
}

.check, .checked {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: var(--message-color-unconfirmed);
	padding: 10px;
	box-shadow: none;
	border: none;
	margin: 0 0 0 8px;
}

.sos .check {
  background-color: var(--alert-color);
  color: #fff;
}

.check {
	cursor: pointer;
}

.check .fa-thumbs-up, .fa-check {
	font-size: 1em;
	width: 1em;
}

.confirmed .message-main, .confirmed .message-from, .confirmed .checked {
	background-color: var(--message-color-confirmed);
}

.protocol-debug {
    background: rgb(20, 111, 129);
    text-align: left;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    margin: 20px 0;
    padding: 10px;
	  color: white;
    border: 1px solid inset rgb(14, 70, 82);
  }
  .protocol-debug li {
    padding:0 0 0 15px;
    position: relative;
    margin-bottom: 3px;
  }
  .protocol-debug li:before {
    content: "-";
    position: absolute;
    left:0;
  }

/*mobile medium*/
@media (min-width: 460px) {
	html, body {
		font-size: 14px;
	}

	.header-container {
		height: var(--header-height-mobile);
	}

	main {
		height: calc(100vh - var(--header-height-mobile));
	}


	.button {
		width: calc(var(--button-width-mobile) + 5px);
		height: calc(var(--button-width-mobile) + 5px);
	}
}

/*mobile large*/
@media (min-width: 570px) {
	html, body {
		font-size: 15px;
	}

	.button {
		width: calc(var(--button-width-mobile) + 10px);
		height: calc(var(--button-width-mobile) + 10px);
	}
}

/*Tablet small*/
@media (min-width: 678px) {
	html, body {
		font-size: 18px;
	}

	.header-container {
		height: var(--header-height-tablet);
	}

	main {
		height: calc(100vh - var(--header-height-tablet));
	}


	.button {
		width: var(--button-width-tablet);
		height: var(--button-height-tablet);
	}
}

/*Tablet*/
@media (min-width: 780px) {
	html, body {
		font-size: 18px;
	}

	.button-area {
		padding: 1em 1em 0 1em;
	}

	.info-area {
		padding: 1.7em;
		padding-bottom: 20px;
	}

	.button {
		width: calc(var(--button-width-tablet) + 5px);
		height: calc(var(--button-height-tablet) + 5px);
	}

}

/*Tablet*/
@media (min-width: 900px) {
	html, body {
		font-size: 22px;
	}

	.button-area {
		padding: 1em 1em 0 1em;
	}

	.info-area {
		padding: 1.7em;
		padding-bottom: 20px;
	}

	.staff-member-button, .room-number-button {
		margin-bottom: 0;
		padding: 7px!important;
	}

	.button {
		width: calc(var(--button-width-desktop) + 15px);
		height: calc(var(--button-height-desktop) + 15px);
	}

}

/*Mobile landscape small*/
@media (min-width: 300px) and (orientation: landscape) {
	html, body {
		font-size: 11px;
	}

	.header-container {
		height: var(--header-height-mobile);
	}

	main {
		height: calc(100vh - var(--header-height-mobile));
	}

	body {
		flex-direction: row;
	}

	.content {
		flex-direction: row-reverse;
		height: 100%;
	}

	.staff-member-button, .room-number-button {
		margin-bottom: 0;
		padding: 5px;
	}

	.button-area {
		width: 55%;
		padding: 0.8em 0.4em 0 0.4em;
	}

	.info-area {
		width: 45%;
		height: calc(100% - var(--header-height-mobile));
	}

	.button-area li {
		padding: 0 5px !important;
		margin-bottom: 5px !important;
	}

	.button {
		width: calc(var(--button-width-mobile) - 10px);
		height: calc(var(--button-width-mobile) - 10px);
	}
}

/*Mobile Landscape*/
@media (min-width: 780px) and (orientation: landscape) {
	html {
		font-size: 16px;
	}

	.button-area, .info-area {
		padding: 1em 1em 0 1em;
	}

	.button {
		width: calc(var(--button-width-mobile) - 2px);
		height: calc(var(--button-width-mobile) - 2px);
	}
}

/*Tablet Landscape small*/
@media (min-width: 870px) and (orientation: landscape) {
	html {
		font-size: 15px;
	}

	.button {
		width: calc(var(--button-width-mobile));
		height: calc(var(--button-width-mobile));
	}
}

/*Tablet landscape medium*/
@media (min-width: 940px) and (orientation: landscape) {
	html, body {
		font-size: 16px;
	}

	.header-container {
		height: var(--header-height-tablet);
	}

	main {
		height: calc(100vh - var(--header-height-tablet));
	}

	body {
		flex-direction: row;
	}

	.content {
		flex-direction: row-reverse;
		height: 100%;
	}

	.button-area {
		width: 60%;
	}

	.info-area {
		width: 40%;
		height: calc(100% - var(--header-height-tablet));
	}

	.button {
		width: calc(var(--button-width-tablet) - 10px);
		height: calc(var(--button-width-tablet) - 10px);
	}
}

/*Tablet landscape large*/
@media (min-width: 1080px) and (orientation: landscape) {
	html, body {
		font-size: 18px;
	}

	.header-container {
		height: var(--header-height-tablet);
	}

	main {
		height: calc(100vh - var(--header-height-tablet));
	}

	body {
		flex-direction: row;
	}

	.content {
		flex-direction: row-reverse;
		height: 100%;
	}

	.button-area {
		width: 60%;
	}

	.info-area {
		width: 40%;
		height: calc(100% - var(--header-height-tablet));
	}

	.button {
		width: calc(var(--button-width-tablet));
		height: calc(var(--button-width-tablet));
	}
}

/*Desktop small*/
@media (min-width: 1200px) {
	html {
		font-size: 20px;
	}

	.header-container {
		height: var(--header-height-desktop);
	}

	.logo img {
		height: 55px;
	}

	main {
		max-width: 80%;
		margin: 0 auto;
		height: 90vh;
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.4);
	}

	.content {
		height: calc(100% - var(--header-height-desktop));
	}

	body {
		padding: 0 8px 8px 8px;
		background-color: white;
	}

	.button {
		width: calc(var(--button-width-desktop) - 10px);
		height: calc(var(--button-width-desktop) - 10px);
	}

	.button-area {
		height: auto;
	}

	.info-area {
		height: auto;
		background-color: var(--background-message-section);
	}

	.protocol {
		width: 100%;
	}

	.sidebar {
		width: 30%;
		padding-top: 20px;
	}

}

/*Desktop */
@media (min-width: 1600px) {
	html, body {
		font-size: 20px;
	}

	.button {
		width: 105px;
		height: 105px;
	}
}