body, div, input, select, label, a, p, h1, h2{font: 400 14px verdana}
body{margin: 0; padding: 0}
p{margin: 0; text-align: center}
h1{text-align: center; font-size: 2em}
th{padding: 0}
label, button, th, h1, h2, h3, select, .participant_spec, .row_table, .named_table, .protocol_options, .use_options,
  .delivery_info, .response_info, #filter td, p, #scheduler_notification, #latest_notification{
  -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none;
  -ms-user-select: none; user-select: none
}
input[type='checkbox'], select{cursor: pointer}
input[type='text'], input[type='number'], input[type='email'], input[type='tel'], input[type='url']{text-indent: 6px}
input[type='time'], input[type='date']{cursor: text}
.menu_wrap input[type='color']{padding: 0}
input, select{display: inline-block; border: none}
button{
  cursor: pointer; background: #4a4a4a; color: #e6e6e6; border-radius: 5px;
  border: none; padding: 6px 12px
}
button:hover{background: #000}
#wrap{position: absolute; top: 0; bottom: 0; left: 0; right: 0}
#side_menu{position: fixed; width: 105px; top: 0; bottom: 0; left: -117px; padding: 50px 5px 0 7px; background: #000; z-index: 1}
#side_menu button{width: 100%; margin: 0 0 7px 0}
#side_menu h1{margin: 10px 0 5px 0; color: #fff; font-size: 1.5em; font-weight: bold}
#display_options p{color: #fff; padding: 15px 0 2px 0}
#display_options input{width: 100%; padding: 0; background: #4a4a4a; color: #e6e6e6}
.menu{position: fixed; left: 0; right: 0; height: 27px}
.menu input{border: 2px inset #767676}
#top_menu{top: 0; border-spacing: 0; width: 100%; text-align: center; z-index: 2; padding: 0 5px}
#top_menu button{width: 100%}
#top_menu td:first-child, #top_menu td:last-child{width: 105px}
#top_menu button.areabutton, #studies_wrap td:first-child button, #study_selector > div > p button{background: #fff; color: #313131; font-weight: bold; font-size: 1.5em; padding: 6px; width: 100%}
#top_menu button.areabutton:hover, #studies_wrap td:first-child button:hover, #study_selector > div > p button:hover{background: #fff; font-weight: normal}
#top_menu button.areabutton{width: 97%}
#display_wrap{position: fixed; top: 39px; bottom: 37px; left: 0; right: 0}
#study_selector{position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #d2d2d2; padding: 100px 0; text-align: center}
#study_selector table{width: 100%; border-spacing: 0}
#study_selector input, #signin_prompt{text-align: center; width: 100%; padding: 6px 0; font-size: 1.5em}
#signin_prompt{padding: 15px 0}
#study_selector > div{max-width: 500px; margin: auto}
#study_selector > div > p button{margin: 50px 0 0 0}
#studies_wrap tHead tr{height: 70px}
#studies_wrap tr{height: 50px}
#studies_wrap button{width: 100%; padding: 10px}
#studies_wrap td:last-child{width: 115px}
#timeline_wrap{
  top: 0; width: 100%; height: 100px; overflow-x: auto;
  background: #333; overflow-y: hidden
}
#timeline_wrap div.selected, .schedule td > div.selected{background: #000; border: 2px solid #fff}
#clock{position: absolute; background: #d2d2d2; width: 100px; padding: 5px 0; height: 17px}
#clock span{position:absolute; right: 0; top: 0; height: 100px; width: 2px; background: #d2d2d2}
.upnext_wrap{position: absolute; left: 100px; right: 0; top: 0}
.upnext_wrap table{width: 100%}
div.nearest, .upnext_wrap table{background: #0060ea; color: #fff}
.upnext_wrap td{padding: 5px; color: #fff; width: 1px}
.upnext_wrap td:last-child{width: auto}
.upnext_wrap td.label{font-weight: bold; padding: 0 0 0 15px; color: #cacaca}
.upnext_wrap tr:last-child{background: #000}
.upnext_wrap tr td:first-child{width: 100px; height: 17px}
#timeline{position: absolute; height: 100px}
#timeline div{position: absolute; width: 10px; height: 100%; border-left: 1px solid #fff; border-right: 1px solid #fff; cursor: pointer}
#timeline div p{display: none}
#schedule_wrap{position: absolute; width: 100%; top: 100px; bottom: 0; overflow: auto}
#schedule_wrap tr{height: 50px; text-align: center}
#schedule_ids{position: sticky; position: -webkit-sticky; left: 0; width: 100px; background: #fff; border-spacing: 0}
#schedule_ids td{padding: 0; vertical-align: top}
#schedule_ids button{width: 100%; height: 52px; border-radius: 0}
.entries_wrap{position: absolute; left: 100px; right: 0; top: 0}
.entries_wrap tr table tr:last-child{display: none}
.entries_wrap tr table.selected tr:last-child{display: table-row}
.entries_wrap tr table.selected tr:last-child > td:first-child div{margin: 0 0 0 44px}
#schedule_entries{width: 100%}
#schedule_entries tr table{border-top: 1px solid #fff; border-bottom: 1px solid #fff; width: 100%}
#schedule_entries tr table:hover{border-top: 1px solid #000; border-bottom: 1px solid #000; background: #e8e8e8}
#schedule_entries tr table tr:first-child{cursor: pointer}
#schedule_entries tr:last-child td > p:first-child{font-size: .95em}
#schedule_entries td > p{font-size: .8em}
#schedule_entries td > p:first-child{font-size: 1em}
#schedule_entries table.selected tr:last-child, #menu_timeline{background: url('timeline.svg') no-repeat; background-size: 9999px; background-color: #292929}
#schedule_entries table.selected tr:last-child{background-position-x: -60px}
#protocol_fills{width: 25px; padding: 0 5px}
#protocol_fills button{margin: 0 0 1px 0; width: 100%}
.screen{
  position: fixed; top: 0; bottom: 0; left: 0; right: 0; cursor: not-allowed; background: #000; z-index: 3;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); -moz-opacity: .6; -khtml-opacity: .6; opacity: .6
}
#options_input div{padding: 0 0 5px 0}
#user_options tr:hover, #protocol_options tr:hover{background: #dadada}
#user_options td{text-align: center}
#user_options td:first-child{text-align: left}
.hide, .range_hide, #menu_schedule .index, table.selected tr:last-child p.index{display: none}
.send_received, .remind_received{background: #dedede}
#menu_schedule button.pending, .pending{background: #7fb2ff}
#menu_schedule button.pause, .pause{background: #caf9f9}
.skipped{background: #8eab79}
.sent{background: #fdff81}
.reminded{background: #f9c361}
.not_delivered{text-align: center}
.not_delivered:after{content: '*'; font-size: 1.5em; font-weight: bold; line-height: .6em; color: #fff}
.missed{background: #f38d0e}
.menu_wrap{
  position: relative; z-index: 1; top: 20px; width: 97%; margin: 0 auto 50px auto;
  border-radius: 20px; background: #fff; z-index: 4
}
.menu_wrap table{width: 100%; border-spacing: 0}
.menu_wrap input{padding: 6px 0; margin: 0}
.menu_wrap input[type='date'], .menu_wrap input[type='time']{padding: 0}
.menu_wrap p > input{text-align: right}
.menu_wrap p > input:last-child{float: left}
.menu_tabs button{width: 100%; padding: 10px 5px; background: #fff; color: #000}
.menu_tabs button:hover{background: #666; color: #fff}
.menu_tabs button.selected{background: #d2d2d2}
.menu_tabs th, .menu_tabs button{font-size: 1.2em; cursor: pointer; border-radius: 15px 15px 0 0}
.menu_tabs button.selected:hover{background: #d2d2d2; color: initial; cursor: default}
.menu_tabs_wrap{width: 100%; overflow-x: auto}
.menu_panes{border-radius: 0 0 20px 20px; background: #d2d2d2}
#filter div.menu_inner{background: #d2d2d2}
.button_row{text-align: left; margin: 0 0 10px 0}
.button_row button:last-child{float: right}
#logs_panes{height: 500px; overflow-y: auto; padding: 10px}
#menu_schedule{overflow-x: auto; margin: 0 0 30px 104px; min-height: 110px; position: relative}
#menu_schedule td > button{background: #c3c3c3; color: #000; width: 100%; padding: 0; height: 20px}
#menu_schedule td > button:hover{background: #484848; color: #fff}
#menu_schedule tr:first-child td:hover{cursor: pointer; color: #fff}
#menu_schedule .ping, #menu_schedule .blackout{cursor: move}
#menu_schedule .editing > p{display: none}
button.active{background: #ab0000}
tr.active{cursor: copy}
.menu_inner{padding: 5px}
.menu_inner > select{margin: 5px 0 10px 0}
.menu_inner select{width: 100%; padding: 5px 0; font-size: 1.2em}
.menu_inner > table > tBody > tr > td:first-child{width: 150px}
.menu_inner table select{font-size: 1em}
.menu_inner input[type='checkbox']{width: 100%; min-height: 20px}
#filter{line-height: 1.5em}
#filter td{vertical-align: top}
#filter div.menu_inner input[type='checkbox']{width: auto; min-height: auto; margin: 5px}
#filter div.menu_inner table{border-spacing: 5px}
#tick_editor{position: absolute; width: 140px; top: 0; padding: 5px; z-index: 1}
#tick_editor button, #tick_editor div > p{margin: 0 2px}
#tick_editor input, #tick_editor select{width: 100%; padding: 5px 0; margin: 0 0 3px 0; text-indent: 2px}
#tick_editor tr:first-child td, #tick_editor tr:first-child td:hover{cursor: default; color: initial}
#tick_info{position: absolute; padding: 5px; z-index: 1}
#tick_info p{padding: 0 2px; white-space: nowrap}
#tick_info span{display: block}
.schedule td > div.temp_update, .schedule td.temp_update{border: 1px solid #fff}
.named_table{min-height: 45px; margin: 5px 0}
.named_table > div:first-child{position: absolute}
.named_table > div:last-child{margin: 0 0 0 150px; overflow-x: auto}
.named_table input, .named_table button{display: block; width: 100%}
.named_table td{text-align: center; padding: 0 5px 0 0}
.named_table p{text-align: left; margin: 0 0 5px 0}
.pending_submit{background: #000}
.schedule_wrap{position: relative; overflow: hidden}
.schedule_wrap > div#menu_schedule{margin: 0 0 0 37px}
.row_table td:first-child{width: 101px}
.row_table td:last-child input{float: right}
.timeline_y{position: absolute}
.timeline_y span{display: block; border-top: 1px solid #3e3e3e; text-indent: 60px}
.timeline_y input{position: relative; margin: 2px 0; height: 21px; width: 103px}
.timeline_y > p{margin: 40px 0 2px 0; text-align: left}
#menu_timeline{overflow: hidden; position: relative; width: 9999px}
#menu_timeline p{font-family: monospace; text-align: left; position: absolute; width: 890px}
.schedule td{vertical-align: top; min-width: 70px; position: relative}
.schedule div > div p:last-child{display: initial}
.schedule td > p{font-size: .8em}
.schedule tr td > p:first-child{font-size: 1em}
.schedule tr:first-child td{padding: 3px}
.schedule tr:first-child td > p:first-child{font-size: 1.2em}
.blackout, .blackout_display{background: #bf2b2b}
.blackout{position: absolute; left: 0; right: 0}
.blackout p{height: 2px; background: #fff; cursor: row-resize; position: absolute; left: 0; right: 0}
.blackout p:last-child{bottom: 0}
.blackout span{display: none}
.ping{height: 4px; left: 0; right: 0; position: absolute}
.ping p{display: none}
.delivery_id, .delivery_info, .response_info{display: block; text-align: center}
.delivery_id{font-size: .6em}
.delivery_info{font-size: .7em}
.response_info{font-size: .8em}
.preadd, .canceled, #menu_schedule td.canceled{background: #afafaf}
.participant_spec{margin: 5px 0}
.participant_spec td{vertical-align: top}
.participant_spec tr > td:first-child{width: 120px}
.participant_spec p{text-align: left}
.day_time{width: 0px}
.rowinfo{width: 10px; vertical-align: top; padding: 28px 0 0 0}
.rowinfo p{text-align: right; padding: 4px 0}
.table_wrap{overflow-x: auto}
#protocol_options tr input, #user_options input{width: 100%}
#scheduler_notification{padding: 5px; margin: 10px; background: #ffff87; position: fixed; left: 0; bottom: 0; opacity: 0}
#protocol_order{border-spacing: 10px 5px}
#protocol_order td:nth-child(2), #protocols_order td:last-of-type{width: 150px}
#protocol_order span{display: inline-block; cursor: pointer; background: #fff; padding: 3px 6px;border-radius: 20px}
#protocol_select{background: #fff; max-height: 100px}
#protocol_select p{text-align: center; cursor: copy; padding: 3px}
#protocol_select p:hover{background: #e2e2e2}
#protocol_order span:hover{background: #d2d2d2; text-decoration: line-through}
#message_preview p, #notifications td:last-child p{
  text-align: left; width: 80%; left: 0; background: #868686; color: #dedede; border-radius: 15px;
  padding: 8px 10px; margin: 5px auto 5px 0; word-break: break-all; word-break: break-word; max-width: 225px
}
#ndisplay{text-align: center}
.foot_buttons{border-radius: 0 0 18px 18px; background: #484848; color: #dedede; border-spacing: 0}
.foot_buttons td{padding: 0}
.foot_buttons button{width: 100%; padding: 12px; font-size: 1.2em}
.foot_buttons td:first-child{width: 150px}
.foot_buttons td:first-child button{border-radius: 0 0 0 18px; background: #ab0000}
.foot_buttons td:first-child button:hover{background: #801515}
.foot_buttons td:last-child{padding: 0}
.foot_buttons td:last-child button{border-radius: 0 0 18px 0}
.foot_buttons button:hover{background: #801515}
#filter .foot_buttons td:first-child button{border-radius: 0 0 18px 18px}
.notifications_wrap{
  position: fixed; bottom: -537px; right: 17px; width: 450px; max-width: 100%; background: #fff; padding: 0 0 37px 0;
  transition: bottom .3s; -webkit-transition: bottom .3s; -moz-transition: bottom .3s; -o-transition: bottom .3s
}
.notifications_wrap div{height: 500px; max-height: 100%; overflow-y: auto; vertical-align: baseline}
.notifications_wrap table:first-child, .notifications_wrap table:first-child button{width: 100%}
.notifications_wrap.expanded{bottom: 0px}
#notifications p{padding: 10px}
#notifications a{color: #0020ff; text-decoration: underline; cursor: pointer}
#notifications td:first-child{vertical-align: top; width: 100px}
#foot_menu{bottom: 0; background: #fff; height: 37px}
#foot_menu table{width: 100%; border-spacing: 0}
#foot_menu td{padding: 5px; width: 1px; white-space: nowrap}
#foot_menu td:last-child{cursor: pointer; text-align: right; opacity: 0; width: auto}
#foot_menu td:last-child.showing, #scheduler_notification.showing{
  display: table-cell; opacity: 1; transition: opacity .5s ease-in; -webkit-transition: opacity .5s ease-in;
  -moz-transition: opacity .5s ease-in; -o-transition: opacity .5s ease-in
}
#latest_notification{padding: 0 5px; white-space: nowrap}
.menu_tabs, .upnext_wrap table, .schedule table{border-spacing: 0}