@import url('./reset.css');

body {
	font-family: Roboto, Helvetica, Arial, sans-serif;
}

.container {
	padding: 1rem;
}

#timerDisplay {
	flex: 1;
	white-space: nowrap;
}

#timerDisplayProgress {
	background-color: #ff840026;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

#mobReasonDisplay {
	flex: 2;
	padding-left: 1.5em;
	padding-right: 1.5em;
}

#timerDisplay,
#mobReasonDisplay {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}

#mobPomodoro,
#buildStatuses {
	flex: 1;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	gap: 1em;
	height: 100%;
}

#mobPomodoro > div.actions {
	display: flex;
}

#buildStatuses {
	gap: 1em;
	flex-wrap: wrap;
}

#buildStatuses > div {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
}

#mobPomodoro > div.actions > div {
	padding: 0.5em;
}

.grid-stack-item-content {
	box-shadow: 0.5em 0.5em 0.5em #ccc;
	padding: 0.75em;
	margin: 1em 0 1em 0;
	border-radius: 5px;
	background-color: #eee;
}

#mobPomodoro,
#buildStatuses > div {
	display: flex;
	align-items: center;
}

#buildStatuses > div > div {
	display: flex;
	align-items: center;
	padding: 0.25em;
}

#currentRetroActions {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	padding-top: 0.75rem;
}

#currentRetroActions > li {
	padding: 0.5em;
	margin: 0.25em;
	background-color: lightgray;
}

#flow {
	display: flex;
	justify-content: flex-end;
	width: 100%;
	height: 98%;
	gap: 2em;
}

#flowboard {
	width: 100%;
	flex: 3;
}

#flowboard > iframe {
	width: 100%;
	height: 100%;
}

#teamBookmarks {
	width: 100%;
	flex: 1;
	align-items: center;
}

#meetLinks {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	height:100%;
}

#meetLinks img {
	height: 30px;
}

#notes {
	width: 100%;
	height: 100%;
}

#notes-textarea {
	width: 100%;
	background-color: #eeeeee;
	height: 100%;
	border: none;
	padding: 0.25rem;
	box-shadow: none;
	resize: none;
	outline: none;
}

#ops {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#opsLinks {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

#where-is-my-flow Label {
	display: block;
}

#where-is-my-flow Input {
	width: 100%;
}

#flow-show {
	position: relative;
	cursor: pointer;
}

#flow-dot {
	background-color: black;
	border-radius: 5px;
	position: absolute;
}

.flow-tick {
	height: 0.25rem;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin: 0 0 0.5rem 10px;
	border-bottom: black 1px solid;
}

.flow-tick.tick2 {
	margin: 0 0 1rem 10px;
}

.flow-tick Div {
	height: 100%;
	width: 1px;
	background-color: black;
}



#iWantSound {
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.85);
}

#iWantSound a {
	color: red;
	font-size: xxx-large;
}