body {
	overflow-y: hidden;
}

#outerFrame {
    background-color: #FAFAFA;
    padding: .25rem;
    border-radius: .375rem;	
	width: 88vw;
	height: 88vh;
	margin-left: auto;
	margin-right: auto;
	margin-top: 6vh;
	display: flex;
	flex-direction: column;
}

#headerSection {
	background-color: rgba(204, 153, 255, 0.5);
	background-color: #00561f; 
	color: white; 
	height: 3.2rem;
	border-radius: .5rem;
	width: 100%;
	padding: .375rem;
	margin-top: .5vh;
	margin-bottom: .5vh;
}

#headerSection .dataRow {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;	
}

#headerSection .patientSelector {
	padding-left: .8rem;
	width: 33%;
	display: flex;
}

#headerSection .patientSelector input {
	margin-left: .25rem;
	width: calc(94% - 5rem); 
}

#headerSection .dateRangeSelector {
	width: calc(66% - 10vw);
	display: flex;
	align-items: center;
}

#headerSection .dateRangeSelector input {
	width: calc(60% - 5rem);
	margin-right: 1.5rem;
}

#headerSection .dateRangeSelector input:nth-child(2) {
	margin-left: 4.8rem;	
}

#headerSection .dateRangeSelector i {
	margin-right: 1.5rem;	
}

#headerSection .actionBtn {
	width: 10vw;
	display: flex;
	justify-content: center;
}

#mainSection {
	height: calc(100% - 3rem);
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

#patientInfoSection {
	border-right: 2px solid silver;
	border-left: 2px solid silver;
	width: 33%;
	height: 100%;
	padding-right: .75rem;
	padding-left: .75rem;
	border-radius: .5rem;
	display: flex;
	flex-direction: column;
	justify-content: start;
	position: relative;
}

#patientInfoSection textarea.form-control:disabled, #patientInfoSection select.form-select:disabled {
	background-color: rgba(239, 239, 239, 0.3);
}

.dataRow {
	min-height: 2.5rem;
	display: flex;
	flex-direction: row;
	justify-content: center;
}

#patientInfoSection .dataRow {
	font-size: 1rem;
	border-bottom: 1px dotted #999;
	min-height: 3rem;
}

.dataRow .label {
	font-weight: 700;
	text-align-last: justify;
	padding: .375rem;
	padding-top: .65rem;
	width: 5rem;
}

.dataRow.doubleEntry {
	justify-content: space-between;
	padding-left: .35rem;
	padding-right: .35rem;
}

.dataRow.doubleEntry > div {
	display: flex;
	flex-direction: row;
	width: 49.5%;
}

.dataRow.doubleEntry .label {
	width: 5rem;
}

.dataRow.doubleEntry .value {
	width:calc(99% - 5rem);
}

.dataRow .value {
	padding: .375rem;
	margin-top: .1rem;
	margin-bottom: .1rem; 
	margin-left: .25rem;
	width: calc(96% - 5rem);
}

.dataRow textarea.value {
	height: 9rem;
}

#patientInfoSection .editBtn, #patientInfoSection .saveBtn {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	position: absolute;
	bottom: 1rem;
	left: 1rem;
}

i.fa-plus-circle {
	color: #666666;
	position: absolute;
	bottom: 3.5rem;
	right: 1rem;
	transition: .4s;
}

i.fa-plus-circle:hover {
	color: orange;
}

#recordSection {
	width: 66%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: start;
	position: relative;
}

.outerScroller {
    height: 72vh;
    overflow-y: auto;	
}

.dataRow.header {
	background-color: #DDDDDD;
	border-radius: .375rem;
}

.dataRow.header div {
	text-align: center;
	font-weight: 700;
}

#recordSection .dataRow:not(.header) {
	border-bottom: 1px dotted silver;
}

#recordSection .dataRow div {
	padding: .25rem;
}

#recordSection .dataRow div .form-control, #recordSection .dataRow div .form-select {
	margin: .125rem;
	width: 95%;
}

.dataRow div[entry="recordDate"] {
	width: 10vw;
	margin-top: .35rem;
}

.dataRow div[entry="recordTime"] {
	width: 13vw;
	margin-top: .35rem;
}

.dataRow div[entry="hand"] {
	width: 8vw;
	margin-top: .35rem;
}

.dataRow div[entry="gripTimes"] {
	width: 9vw;
	margin-top: .35rem;
}

.dataRow div[entry="strength"] {
	width: 10vw;
	margin-top: .35rem;
}

.dataRow div[entry="duration"] {
	width: 10vw;
	margin-top: .35rem;
}

.dataRow div[entry="edit"] {
	width: 9vw;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}

.dataRow div[entry="edit"] i {
	width: 2rem;
	height: 2rem;
	background-color: #DDDDDD;
	border-radius: 1rem;
	text-align: center;
	padding-top: .5rem;
	cursor: pointer;
	transition: .5s;	
}

.dataRow div[entry="edit"] i:hover {
	color: yellow;
	background-color: #666666;
}

#recordSection i.fa-plus-circle {
	bottom: 1rem;
	cursor: pointer;
}

.none {
	display: none;
}

/* jquery-ui customization */
.ui-autocomplete  {
	max-width: 20vw;
	list-style-type: none;
	background-color: rgba(255, 255, 255, .5);
}

.ui-helper-hidden-accessible {
	display: none;
}