index.css

body {
	margin: 10px;
}
button:focus {
	outline: none;
}/*
div {
	display: inline-block;
	width: 100%;
}*/

.nopadding {
	padding-top: 0px !important;
    padding-bottom: 6px !important;
    padding-right: 0px !important;
    padding-left: 0px !important;
}

.dashed_gray_button {
    background-color: white;
    border-style: dashed;
}

.dashed_gray_button:hover {
    background-color: #f8f8f8;
    border-style: dashed;
}

.dashed_gray_button:active {
    background-color: #f0f0f0;
    border-style: dashed;
}

.clickable {
	cursor: pointer;
}

.right_float {
	float: right;
}

.sectioncontainer {
	border: solid #cccccc thin;
    background-color: #fafafa;
    padding: 5px 0px 5px 0px;
}

.opaque {
	opacity: 0.2;
}

input.required, input.ng-invalid {
	background-color: #ffff80
}

.summary_table {
	table-layout: fixed;
	width: 100%;
	text-align: left;
	border-collapse: collapse;
	font-size: 14px;
}

.summary_table_header {
	padding: 0px 0px 0px 5px;
}

.summary_table_rows {
	border: solid #e2e2e2 thin;
    background-color: #fafafa;
}

.summary_table_detail_header {
	padding: 0px 0px 0px 15px !important;
}

.summary_table_detail_rows {
	border: solid #f0f0f0 thin;
    background-color: #fefefe;
}

.summary_table_add_button {
    width: 100%;
    font-style: oblique;
    color: #808080;
}

.summary_table_main_cell {
	max-width: 100%;
	padding: 2.5px;
}

.summary_table_detail_cell {
	padding: 5px;
}


.summary_edit_button {
	text-align: right;
    padding-top: 5px;
}

.inline_div {
	display: inline-block;
}

.hidden {
	display: none !important;
}

.border_light {
	border: black;
    border-width: 2px;
    border-style: solid;
    border-radius: 5px;
}

.border_main_panel {
	border: black;
    border-width: 2px;
    border-style: solid;
    border-radius: 5px;
}

.overlay {
	opacity: 0.2;
	z-index: 10;
	position: fixed;
}

.header_label {
	font-size: 20px;
	padding: 5px !important;
}

label {
	font-weight: normal !important;
	padding: 2px 5px 2px 5px;
}

#summary_body label {
	width: inherit;
}

.submit_button {
	margin: 5px 5px 5px 5px;
	padding: 5px;
	width: 15%;
	border: #999999 solid thin;
	background: #eaeaea;
}

.small-input {
	padding-left: 3px !important;
}

.leftmargin {
	margin-left: 5px;
}

.noleftmargin {
	margin-left: 0px !important;
}

.summarydiagnosisheader:hover, .summarydiagnosisbutton:hover {
	background: #f4f4f4;
}

.summarydiagnosisheader:active, .summarydiagnosisbutton:active {
	background: #eaeaea;
}

.summarydiagnosisbutton {
	text-align: center;
    border: #e2e2e2 solid thin;
}

#addDiagnosisPrompt {
	width: 100%;
	display: inline-block;
	padding: 10px;
}
span {
	display: flex;
	white-space: nowrap;
	width: 100%;
}

#personalDetails_main span, #summary_body span {
	width: calc(100% - 6px);
	height: 32px;
	padding: 3px 2px 3px 2px;
}

#diagnosisDetails_main span {
	/*width: calc(100% - 6px);*/
	padding: 2px 0px 2px 0px;
}
#diagnosisDetails_main .diagnosisfield {
	width: calc(100% - 6px);
	padding: 2px 0px 2px 0px;
}

#personalDetails_main, #summary_main {
	padding: 10px;
	display: inline-block;
	width: 100%;
}

#personalDetails_main input {
	width: 100%;
	padding: 2px;
}

#diagnosisDetails_main {
	padding: 10px;
	display: inline-block;
	width: 100%;
}

#diagnosisDetails_main textarea {
	width: calc(100% - 3px);
	padding: 10px;
	margin: 5px;
	min-height: 100px;
	overflow: hidden;
	resize: vertical;
}

#diagnosisDetails_main input {
	width: calc(100% - 3px);
	height: 25px;
	padding: 2px;
	margin: 5px;
}

#diagnosisDetails_main .inline-fields {
	width: calc(100% - 3px);
	display: flex;
	margin: 2px 5px 2px 5px;
}

#diagnosisDetails_main .medication-name {
	margin: 0px 5px 0px 0px;
}

#diagnosisDetails_main .medication-dose {
	margin: 0px 10px 0px 5px;
}

#diagnosisDetails_main .medication-add-button, .medication-remove-button {
	height: 25px;
	min-width: 25px;
	max-width: 25px;
}