<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-file"> </span>DETAILS</a> </h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="well well-sm well-primary">
<div class="row">
<div class="col-xs-4">Date Grant Budget Starts:</div>
<div class="col-xs-8">--</div>
</div>
<div class="row">
<div class="col-xs-4">Date Grant Budget Ends:</div>
<div class="col-xs-8">--</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="grant1">IND-IDE Regulated:</label>
<input type="text" class="form-control" id='grant1' />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="protocol">Protocol#:</label>
<input type="text" class="form-control" id'protocol' placeholder="protocol#" required />
</div>
</div>
</div>
<div class="well well-sm well-primary">
<div class="row">
<div class="col-xs-3">Number of Sites:</div>
<div class="col-xs-3">1</div>
<div class="col-xs-3">CToA Status:</div>
<div class="col-xs-3">Not Met</div>
</div>
<div class="row">
<div class="col-xs-3">Grant Activity:</div>
<div class="col-xs-3">--</div>
<div class="col-xs-3">Grant Branch:</div>
<div class="col-xs-3">--</div>
</div>
<div class="row">
<div class="col-xs-3">Grant hidden:</div>
<div class="col-xs-3">False</div>
<div class="col-xs-3">Grant PI:</div>
<div class="col-xs-3">--</div>
</div>
<div class="row">
<div class="col-xs-3">Grant PO:</div>
<div class="col-xs-3">--</div>
<div class="col-xs-3">Health Specialist:</div>
<div class="col-xs-3">--</div>
</div>
<div class="row">
<div class="col-xs-3">Bakcup Support Person:</div>
<div class="col-xs-3">--</div>
<div class="col-xs-3">Grant Specialist:</div>
<div class="col-xs-3">--</div>
</div>
<div class="row">
<div class="col-xs-3">Grantee Institution:</div>
<div class="col-xs-3">--</div>
<div class="col-xs-3">Subjects Active:</div>
<div class="col-xs-3">--</div>
</div>
<div class="row">
<div class="col-xs-3">GrantActivity and Number:</div>
<div class="col-xs-3">--</div>
<div class="col-xs-3">Protocol Activity and Number:</div>
<div class="col-xs-3">--</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="protocol2">Protocol Number Alternative:</label>
<input type="text" class="form-control" id='protocol2' />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="grant2">Grant Number:</label>
<select class="form-control" id="grant2">
<option></option>
<option>Data4516</option>
<option>Data24572457</option>
<option>Data4516</option>
<option>Data24572457</option>
<option>Data4516</option>
<option>Data24572457</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="protocol3">Protocol Short Title:</label>
<input type="text" class="form-control" id='protocol3' />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="protocol4">Protocol Title:</label>
<input type="text" class="form-control" id'protocol4' />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="division">Division:</label>
<select class="form-control" id="division">
<option>Extramural Studies</option>
<option>Intramural Studies</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="glyphicon glyphicon-th-list"> </span>Leadership</a> </h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="contact1">CROMS Contact, Primary:</label>
<input type="text" class="form-control" id='contact1' />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="contact2">CROMS Contact, Secondary:</label>
<input type="text" class="form-control" id='contact2' />
</div>
</div>
<div class="col-md-6">
<label for="grantor">Study PI</label>
<select class="form-control" id="grantor">
<option>Name152</option>
<option>Name123512</option>
<option>Name4532</option>
<option>Name152</option>
<option>Name123512</option>
<option>Name4532</option>
<option>Name152</option>
<option>Name123512</option>
<option>Name4532</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-th-list"> </span>Study/Subject Disposition and Administration</a> </h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="grantor">Study PI</label>
<select class="form-control" id="grantor">
<option></option>
<option>Additional NIDCR Oversight</option>
<option>PI/PO Oversight</option>
</select>
</div>
</div>
</div>
<div class="well well-sm well-primary">
<div class="row">
<div class="col-xs-3">Study Oversight Reasons:</div>
<div class="col-xs-3">--</div>
<div class="col-xs-3">GMethod of Additional Oversight:</div>
<div class="col-xs-3">--</div>
</div>
<div class="row">
<div class="col-xs-3">GMethod of Additional Oversight - Other, Specify:</div>
<div class="col-xs-3">--</div>
<div class="col-xs-3">PO Study-level Comments::</div>
<div class="col-xs-3">--</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="monitor">Mdical Monitor Comments on Risk:</label>
<input type="text" class="form-control" id='monitor' />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="date">Date Enrollment Data Most Recently Uptated:</label>
<input type="text" class="form-control" id='date' />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="consented">Subjects Consented:</label>
<input type="text" class="form-control" id='consented' />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="entered">Subjects entered:</label>
<input type="text" class="form-control" id='entered' />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="completed">Subjects completed:</label>
<input type="text" class="form-control" id='completed' />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="status">Status:</label>
<select class="form-control" id="status">
<option>Active</option>
<option>Complete</option>
<option>Data Analysis</option>
<option>In Development</option>
<option>Withdrawn</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="discontinued">Subjects Discontinued:</label>
<input type="text" class="form-control" id='discontinued' />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="recruitment">Recruitment Status:</label>
<select class="form-control" id="recruitment">
<option>Closed</option>
<option>Not Yet Recruiting</option>
<option>Open</option>
<option>Suspended</option>
<option>Terminated</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="sites3">Number of Sites (Anticipated):</label>
<input type="text" class="form-control" id='sites3' />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="enrollment">Subject enrollment (Anticipated):</label>
<input type="text" class="form-control" id='enrollment' />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="Duration2">Proposed Duration:</label>
<input type="text" class="form-control" id='Duration2' />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="risk">Risk Approved</label>
<div class="controls">
<label class="radio" for="risk-0">
<input type="radio" name="risk" id="risk-0" value="True" checked="checked">
True
</label>
<label class="radio" for="risk-1">
<input type="radio" name="risk" id="risk-1" value="False">
False
</label>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="risk2">Risk Level:</label>
<select class="form-control" id="risk2">
<option>Closed</option>
<option>Minimul Risk Level</option>
<option>More than Minimul Risk Level</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="date4">Protocol Approval Date:</label>
<input type="date" class="form-control" id='date4' />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="version">Protocol Version-Most Recently Approved:</label>
<input type="text" class="form-control" id='version' />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class="glyphicon glyphicon-th-list"> </span>Dates</a> </h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="fld-193" title="Date of the first subject's first study visit">Date: First Subject First Visit (FSFV):</label>
<input type="date" class="form-control" id="fld-193" name="fld-193" value="" placeholder="YYYY-MM-DD" />
<label for="fld-199" title="Date the report from PI to NIDCR_Reports is due. Every 6-months unless otherwise specified.">Date: Next QM Report Due: :</label>
<input type="date" class="form-control" id="fld-199" name="fld-199" value="" placeholder="YYYY-MM-DD" />
<label for="fld-200" title="Date of last QM report">Date: Last QM Report Received:</label>
<input type="date" class="form-control" id="fld-200" name="fld-200" value="" placeholder="YYYY-MM-DD" />
<label for="fld-118" title="Date of next Safety Oversight Meeting">Safety Oversight: Date of Next Meeting:</label>
<input type="date" class="form-control" id="fld-118" name="fld-118" value="" placeholder="YYYY-MM-DD" />
<label for="fld-120" title="Date of last IND Annual Report to the FDA">FDA: Date of Last IND Annual Report:</label>
<input type="date" class="form-control" id="fld-120" name="fld-120" value="" placeholder="YYYY-MM-DD" />
<label for="fld-121" title="Date next IND Annual Report is due to the FDA">FDA: Due Date of Next IND Annual Report:</label>
<input type="date" class="form-control" id="fld-121" name="fld-121" value="" placeholder="YYYY-MM-DD" />
<label for="fld-122" title="Date of last orphan drug annual report to the FDA">FDA: Date of Last Orphan Drug Annual Report:</label>
<input type="date" class="form-control" id="fld-122" name="fld-122" value="" placeholder="YYYY-MM-DD" />
<label for="fld-123" title="Date next Orphan Drug Annual Report is Due to the FDA">FDA: Due Date of Next Orphan Drug Annual Report:</label>
<input type="date" class="form-control" id="fld-123" name="fld-123" value="" placeholder="YYYY-MM-DD" />
<label for="fld-165" title="Date Most Recent Protocol Deviation Report Received">Date Most Recent Protocol Deviation Report Received:</label>
<input type="date" class="form-control" id="fld-165" name="fld-165" value="" placeholder="YYYY-MM-DD" />
<label for="fld-166" title="Date that CROMS most recently followed up with a site re: protocol deviation reporting">Date CROMS Follow-up on Protocol Deviations:</label>
<input type="date" class="form-control" id="fld-166" name="fld-166" value="" placeholder="YYYY-MM-DD" />
<label for="fld-179" title="Approximate date after which no additional CROMS services have been performed.">Date: CROMS Services Complete:</label>
<input type="date" class="form-control" id="fld-179" name="fld-179" value="" placeholder="YYYY-MM-DD" />
</div>
</div>
<div class="col-md-6">
<label for="startDate" title="Study Start Date (Date of first site activation)">Date: Study Start:</label>
<input type="date" class="form-control" id="startDate" name="startDate" value="2001-01-01" placeholder="YYYY-MM-DD" />
<label for="endDate" title="Study End Date (Date of last subject, last visit)">Date: Study End:</label>
<input type="date" class="form-control" id="endDate" name="endDate" value="" placeholder="YYYY-MM-DD" />
<label for="fld-49" title="Anticipated study start date (CToA)">Date: Study Start (Anticipated):</label>
<input type="date" class="form-control" id="fld-49" name="fld-49" value="" placeholder="YYYY-MM-DD" />
<label for="fld-50" title="Date PO approved the study for funding (CToA)">Date: PO CToA Approval Date:</label>
<input type="date" class="form-control" id="fld-50" name="fld-50" value="" placeholder="YYYY-MM-DD" />
<label for="fld-52" title="Date relevant documents were requested by PO (CToA)">Date: Relevant Documents Requested:</label>
<input type="date" class="form-control" id="fld-52" name="fld-52" value="" placeholder="YYYY-MM-DD" />
<label for="fld-57" title="Date of last Safety Oversight Committee Meeting">Safety Oversight: Date of Last Meeting:</label>
<input type="date" class="form-control" id="fld-57" name="fld-57" value="" placeholder="YYYY-MM-DD" />
<label for="fld-170" title="Date of the DOCRA or planning call.">Date: DOCRA Call:</label>
<input type="date" class="form-control" id="fld-170" name="fld-170" value="" placeholder="YYYY-MM-DD" />
<label for="fld-174" title="Date that at least one member of the study team attended a QM General Training call.">Date: QM General Training:</label>
<input type="date" class="form-control" id="fld-174" name="fld-174" value="" placeholder="YYYY-MM-DD" />
<label for="fld-188" title="Frequency that PI sends reports to Medical Monitor. May be annually, biannually, or some other specified time interval.">MMOR Frequency:</label>
<select id="fld-188" name="fld-188">
<option value=""></option>
<option value="1145" title="Annual">Annual</option>
<option value="1147" title="Other">Other</option>
<option value="1146" title="Twice Annually">Twice Annually</option>
</select>
<label for="fld-185" title="Date the report from PI to Medical Monitor is due. Every 6-months unless otherwise specified.">Date: Next MM Oversight Report Due:</label>
<input type="date" class="form-control" id="fld-185" name="fld-185" value="" placeholder="YYYY-MM-DD" />
<label for="fld-187" title="Date the most recent report from PI to Medical Monitor was received.">Date: Last MM Oversight Report Received:</label>
<input type="date" class="form-control" id="fld-187" name="fld-187" value="" placeholder="YYYY-MM-DD" />
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseFive"><span class="glyphicon glyphicon-th-list"> </span>Administration</a> </h4>
</div>
<div id="collapseFive" class="panel-collapse collapse">
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<label for="fld-194" title="Text field to capture dates of previous submissions">MM Oversight Report: Dates of Previous Reports:</label>
<input type="text" class="form-control" id="-194" name="fld-194" value="" />
<label for="fld-195" title="Text field to capture dates of previous submissions">QM: Dates of Previous Reports:</label>
<input type="text" class="form-control" id="-195" name="fld-195" value="" />
<label for="fld-205" title="Planned frequency of monitoring visits; e.g., Every 6 months, Annually, Every 2 years, After every X subjects are enrolled">CMP: Monitoring Frequency:</label>
<input type="text" class="form-control" id="-205" name="fld-205" value="" />
<label for="fld-206" title="E.g., 100% SDV for the first 5 subjects; then key fields for 50% of all subjects dosed">CMP: % or # of Records to be Reviewed:</label>
<input type="text" class="form-control" id="-206" name="fld-206" value="" />
<label for="fld-207" title="% of consents to be reviewed (NIDCR policy is to review 100%)">CMP: % of Consents to be Reviewed:</label>
<input type="text" class="form-control" id="-207" name="fld-207" value="" />
<label for="fld-208" title="E.g., After X subjects enrolled">CMP: Timing of 1st IMV:</label>
<input type="text" class="form-control" id="-208" name="fld-208" value="" />
<label for="fld-209" title="Summary of any anticipated remote monitoring activity">CMP: Planned Remote Monitoring:</label>
<input type="text" class="form-control" id="-209" name="fld-209" value="" />
<label for="fld-210" title="">CMP: Comments:</label>
<input type="text" class="form-control" id="-210" name="fld-210" value="" />
<label for="fld-186" title="Number of manuscripts that CROMS has supported for the current study.">Number of Manuscripts Supported by CROMS:</label>
<input type="number" class="form-control" id="-186" name="fld-186" value="" />
<label for="fld-130" title="Summary of Study Services Provided by non-CROMS Groups">Services Provided Outside of CROMS:</label>
<input type="text" class="form-control" id="-130" name="fld-130" value="" />
</div>
<div class="col-md-6">
<label for="fld-178" title="CROMS Services Status">CROMS Services Status:</label>
<select class="form-control" id="fld-178" name="fld-178">
<option value=""></option>
<option value="969" title="CROMS has been asked to complete a DOCRA or planning call.">CROMS Call Pending</option>
<option value="968" title="OCTOM has determined that CROMS services will not be provided.">No CROMS Services – Confirmed</option>
<option value="970" title="CROMS has completed a DOCRA or planning call; OCTOM’s Determination of Services is pending.">Post Call – Services Pending</option>
<option value="972" title="CROMS services have been completed; no services are currently underway.">Services Complete</option>
<option value="971" title="CROMS is currently providing services for this study.">Services In Process</option>
</select>
<label for="fld-131" title="Administrative Comments">CROMS Administrative Comments:</label>
<input type="text" class="form-control" id="-131" name="fld-131" value="" />
<label for="fld-132" title="Clinical Monitoring Group">Clinical Monitoring Group:</label>
<input type="text" class="form-control" id="-132" name="fld-132" value="" />
<label for="fld-141" title="Administrative Comments">OCTOM Administrative Comments:</label>
<input type="text" class="form-control" id="-141" name="fld-141" value="" />
<p>PO Grant-level Comments: </p>
<label for="fld-146" title="Safety Oversight Committee (i.e., DSMB, DSMC, CSOC) hyperlink to NIDCR-CROMS Website">Safety Oversight Committee Hyperlink:</label>
<input type="text" class="form-control" id="-146" name="fld-146" value="" />
<label for="fld-173" title="Notes regarding General QM training attendance, along with a list of study sites that have participated.">CROMS QM Comments:</label>
<input type="text" class="form-control" id="-173" name="fld-173" value="" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.form-inline .form-group { margin-right:10px; }
.well-primary {
color: rgb(255, 255, 255);
background-color: rgb(66, 139, 202);
border-color: rgb(53, 126, 189);
}
.glyphicon { margin-right:5px; }
