#recording-controls {
	height: 100%;
}

#recording-controls h1 {
	font-size: small;
	border-bottom: 1px solid;
	line-height: 20px;
	margin: 5px;
	margin-bottom: 0;
}

#trace-controls {
	overflow-y: auto;
}

#recording-controls .controls-container {
	height: calc(100% - 24px);
	max-height: calc(100% - 24px);
	overflow-y: auto;
}

#recording-controls .controls-menu {
	position: absolute;
	bottom: 0;
}

/*************************\
| Recording Widget Styles |
\*************************/

 .recording {
 	background-color: lightgray;
 	margin-bottom: 2px;
 	cursor: pointer;
 
 	border-top: 1px solid #B9B9B9;
 	border-bottom: 1px solid #B9B9B9;

 	position: relative;
 }
 
 .recording:hover {
 	background-color: #DEDEDE;
 }
 
 .recording.selected {
 	background-color: #174242;
 	color: white;
 }
 
 .recording.selected:hover {
 	background-color: #427F80;
 }
 
 .recording.fat {
 	padding: 5px 0;
 }
 
 /* Striped Background Effect for .in-progress recordings */
 @keyframes stripe-animation {
 	from { background-position: 40px 0; }
 	to { background-position: 0 0; }
 }
 @-webkit-keyframes stripe-animation {
 	from { background-position: 40px 0; }
 	to { background-position: 0 0; }
 }
 
 .recording.in-progress {
 	background-image: linear-gradient(45deg, 
 		rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, 
 		rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, 
 		rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, 
 		rgba(0, 0, 0, 0)
 	);
 
 	background-size: 40px 40px;
 
 }
 /* show an animation on the stripes when the trace is running */
 [trace-running=true] .recording.in-progress {
 	animation: stripe-animation 2s linear infinite;
 	-webkit-animation: stripe-animation 2s linear infinite;
 }

/****************************\
| Recording Label and Editor |
\****************************/

 .recording .recording-label {
 	float: left;
 	display: table;
 	min-height: 30px;
 	width: calc(100% - 60px);
 	
 	font-size: small;
 	box-sizing: border-box;
 }
 
 /*
  The label contains a .text and a .text-edit
  which are only displayed one at a time. The
  .text-edit is an input field that is used to
  allow users to rename recordings. The .text
  simply displays the current label.
  */
 
 .recording .recording-label .text {
 	display: table-cell;
 	vertical-align: middle;
 	padding: 0 5px;
 }

 .recording.in-progress .recording-label .text:before {
 	font-family: FontAwesome;
 	content: '\f03d'; /* fa-video-camera */
 	margin-right: 3px;
 }

 .recording.in-progress .recording-label.no-icon .text:before {
 	display: none;
 }

 [trace-running=true] .recording .recording-label .text:before {
 	-webkit-text-stroke: 1px white;
 	-moz-text-stroke: 1px white;
 	-ms-text-stroke: 1px white;
 	text-stroke: 1px white;
 }

 [trace-running=true] .recording.in-progress .recording-label .text:before {
 	color: red;
 }
 
 .recording .recording-label.editing .text {
 	display: none;
 }
 
 .recording .recording-label .text-edit {
 	display: none;
 	
 	box-sizing: border-box;
 	margin: 0;
 	height: 30px;
 	width: 100%;
 	
 	padding-right: 25px;
 	margin-right: -25px;
 }
 
 .recording .recording-label.editing .text-edit {
 	display: initial;
 }
 
 .recording .recording-label .text-edit-save {
 	display: none;
 	
 	line-height: 20px;
 	vertical-align: middle;
 	color: silver;
 }
 .recording .recording-label.editing .text-edit-save {
 	display: initial;
 }
 .recording .recording-label .text-edit-save:hover {
 	color: black;
 }

/****************\
| Recording Menu |
\****************/

 .recording .btn-group {
 	vertical-align: top;
 	float: right;
 }
 
 .recording .dropdown-toggle {
 	width: 30px;
 	height: 30px;
 	line-height: 30px;
 	box-sizing: border-box;
 	padding: 0;
 }

/************************\
| Recording Adder Button |
\************************/

.recording-adder-button {
	padding: 5px;
	margin-bottom: 2px;
	cursor: pointer;
}

.recording-adder-button.disabled {
	color: #AAA;
	cursor: default;
}

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

/***************************\
| Start/Stop Trace Controls |
\***************************/

 .trace-setup-area {
 	padding: 5px;
 	background-color: lightgray;
 	margin-bottom: 2px;
 }
 
 .trace-setup-area .control-button {
 	padding: 10px;
 	text-align: center;
 	cursor: pointer;
 }

 .trace-setup-area .control {
 	padding: 10px;
 }
 
 .trace-setup-area .control-button.big {
 	font-size: 1.5em;
 }
 
 .trace-setup-area .control-button:hover {
 	background-color: #DEDEDE;
 }

 [data-role=new-trace] .control-button {
 	display: inline-block;
 	line-height: 46px;
 	height: 48px;
 	float: left;
 	margin-right: -60px;
 	padding-right: 60px;
 	padding-left: 10px;
 	padding-top: 0;
 	padding-bottom: 0;
 }


/*************************\
| Connection Waiting Area |
\*************************/

[data-role=connection-waiting] {
	display: block;
	background-color: #b9b9b9;
}

[data-role=connection-waiting] > div {
	max-width: calc(100% - 60px);
	display: inline-block;
	padding: 4px;
}

.connection-help-link {
	font-size: 1.2em;
	float: right;
	vertical-align: top;
	line-height: 40px;
}

/*********************\
| Color Swatch Styles |
\*********************/

 .swatch-container {
 	height: 30px;
 	max-height: 30px;
 	box-sizing: border-box;
 	display: inline-block;
 	float: left;
 	vertical-align: top;
 
 	padding: 6px;
 }
 
 .swatch-container:hover {
 	background-color: rgba(238,238,238,0.5);
 }
 
 .swatch-container.editor-open {
 	background-color: rgba(255,255,255,0.5);
 }
 
 .swatch-container .swatch {
 	height: 16px;
 	width: 16px;
 	box-sizing: border-box;
 	border: 1px solid white;
 	background-color: black;
 }

/************************\
| Activity Legend Styles |
\************************/

.recordingsLegend .legend-entry {
	line-height: 30px;
	font-size: small;
	border-bottom: 1px solid #bebebe;
}

.recordingsLegend .legend-text {
	display: inline-block;
}

.recordingsLegend .legend-menu {
	display: inline-block;
	float: right;
}

.recordingsLegend .legend-menu .dropdown-toggle {
	height: 30px;
	width: 30px;
	line-height: 30px;
	text-align: center;
	padding: 0;
	box-sizing: border-box;
	border-left: 1px solid #bebebe;
}

/*************************************************\
| Special overrides for the 'multiples-recording' |
\*************************************************/

 .recording.multiples-recording {
 	margin-bottom: 10px;
 }

 /* The 'multiples' recording hides the coverage and menu button,
  * so the label doesn't need to save the extra 60px for them.
  */
 .recording.multiples-recording .recording-label {
 	width: calc(100% - 30px);
 }
 
 
 .recording.multiples-recording .dropdown-toggle {
 	display: none;
 }
 
 .recording.multiples-recording .menu-badge {
 	display: none;
 }

/***************************\
| Disabled Recording Styles |
\***************************/

.recording .disabled-overlay {
	display: none;
}

.recording.disabled .disabled-overlay {
	display: block;

	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	
	background-color: rgba(190,190,190,0.7);
	cursor: default;
}