﻿.network {
	flex: 1;
	display: grid;
	grid-template-columns: 190px 4fr 1fr;
	overflow: hidden;
}

.network > section {
	display: flex;
	flex-flow: column;
	overflow: hidden;
	padding: 0 5px 0 5px;
	border-right: 1px solid rgba(34, 36, 38, 0.15);
}

.hubs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
	grid-gap: 5px;
	overflow: auto;
}

.hub {
	padding: 2px;
	cursor: pointer;
	text-align: center;
	border: 2px solid transparent;
	color: white;
}

.hub_selected {
	border-color: black;
}

.hub:hover {
	background: silver !important;
}

.terminals_title {
	display: flex;
	flex-direction: row;
}

.timezone {
	margin: 6px 0 0 10px;;
}

.terminals_panel {
	flex: 1;
	overflow: auto;
}

.terminals {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
	grid-gap: 5px;
	overflow-y: auto;
	padding-right: 2px;
}

.terminal_idle {
	border: 1px solid transparent;
}

.terminal_idle:hover {
	border-color: black;
}

.terminal_selected {
	border: 1px solid black;
}

.terminal {
	cursor: pointer;
	border: 1px solid silver;
	display: flex;
	flex-direction: column;
}

.terminal_info {
	flex: 1;
}

.terminal_info .subtext {
	padding-left: 3px;
}

.terminal_footer {
	display: flex;
	flex-direction: row;
}

.terminal_checkbox {
	font-size: 16px;
	margin: 0 0 0 2px;
}

.terminal_filler {
	flex: 1;
}

.flag {
	padding: 2px;
	color: white;
	display: flex;
	flex-direction: row;
}

.offline {
	background-color: red;
}

.online {
	background-color: darkgreen;
}

.flag_icon {
	font-size: 20px;
	padding: 2px;
}

.flag_text {
	margin-left: 3px;
	padding: 2px;
}

.commands {
	border-top: 1px solid rgba(34, 36, 38, 0.15);
	padding: 5px;
	display: flex;
	flex-direction: row;
}

.commands_bar {
	border-bottom: 1px solid rgba(34, 36, 38, 0.15);
	margin: 0 0 15px 0;
	display: flex;
	flex-direction: row;
}

.commands_filter {
	flex: 1;
}

.commands_delete {
}

.commands_block {
	margin-right: 20px;
}

.commands_groups {
	display: flex;
	flex-direction: row;
}

.commands_group {
}

.commands_row {
	margin: 5px;
}

.command_item {
	display: flex;
	flex-direction: column;
}

.command_main {
	display: flex;
}

.command_icon {
	margin: 4px 0 0 2px;
}

.command_name {
	margin: 4px 0 0 5px;
}

.chores {
	display: flex;
}
